@buoy-gg/network 7.0.14 → 7.0.16

package/lib/module/network/hooks/useNetworkEventList.js

@@ -27,11 +27,21 @@ export function useNetworkEventList(options) {
     filter,
     ignoredPatterns,
     paused,
+    visible = true,
     isPro
   } = options;
   const [events, setEvents] = useState(() => networkEventStore.getEvents());
   useEffect(() => {
-    if (paused) return undefined;
+    // Hidden: neither subscribe nor sync — a hidden screen re-rendering for
+    // stream traffic is pure waste (the stable-router contract).
+    if (!visible) return undefined;
+    if (paused) {
+      // Pause freezes the STREAM, not the data. The store still holds the
+      // frozen events, and a screen entering visibility during a pause must
+      // show them rather than whatever it had at mount.
+      setEvents(networkEventStore.getEvents());
+      return undefined;
+    }
     // Coalesce store emissions to one commit per frame: a burst of N
     // concurrent requests emits 2N times (add + response each), and
     // uncoalesced each emission is its own commit re-rendering the
@@ -54,7 +64,7 @@ export function useNetworkEventList(options) {
       unsubscribe();
       if (rafId != null) cancelAnimationFrame(rafId);
     };
-  }, [paused]);
+  }, [paused, visible]);
   useEffect(() => networkEventStore.onClear(() => {
     setEvents([]);
   }), []);

package/lib/module/network/overrides/applyToXhr.js

@@ -1,9 +1,10 @@
 "use strict";
 
 /**
- * Perform an override outcome against a React Native XMLHttpRequest.
+ * Perform an override outcome against an XMLHttpRequest — React Native's OR a
+ * standards (browser/webview) one.
  *
- * WHY THIS IS POSSIBLE AT ALL: React Native's XMLHttpRequest
+ * WHY THIS IS POSSIBLE ON RN: React Native's XMLHttpRequest
  * (`react-native/Libraries/Network/XMLHttpRequest.js`) is pure JavaScript.
  * `readyState`, `status`, `responseHeaders` and `responseURL` are plain
  * writable fields, and `setResponseHeaders()` / `setReadyState()` are real
@@ -12,16 +13,33 @@
  * `_hasError` → error, otherwise load; always loadend). So a response can be
  * synthesized end to end without touching native code.
  *
- * WHY XHR IS THE ONLY PLACE WE HOOK: `react-native/Libraries/Network/fetch.js`
- * is `require('whatwg-fetch')` — RN's `fetch` IS the polyfill over
- * XMLHttpRequest. Overriding here therefore covers `fetch`, `axios` and raw
- * XHR through one code path, and the fake response flows back up through the
- * polyfill so the tool records it without any extra plumbing.
+ * WHY XHR IS THE ONLY PLACE WE HOOK ON RN:
+ * `react-native/Libraries/Network/fetch.js` is `require('whatwg-fetch')` —
+ * RN's `fetch` IS the polyfill over XMLHttpRequest. Overriding here therefore
+ * covers `fetch`, `axios` and raw XHR through one code path, and the fake
+ * response flows back up through the polyfill so the tool records it without
+ * any extra plumbing.
  *
  * Verified field-for-field on React Native 0.81.4 and 0.85.3.
  *
- * Four non-obvious behaviours are handled below; each one is a real bug if you
- * skip it, and each is commented at the line that fixes it.
+ * WHY THERE IS A SECOND PATH: on a STANDARDS XMLHttpRequest (a webview port —
+ * Tauri/Capacitor — or react-native-web) none of the RN internals exist, and
+ * `status` / `readyState` / `response` are readonly ACCESSORS on
+ * `XMLHttpRequest.prototype`, so plain assignment silently no-ops (or throws
+ * in strict mode). This file used to feature-detect that and give up —
+ * "degraded, but never broken" — which was right for react-native-web as a
+ * by-product of an RN app, and wrong the moment the web ports made the
+ * browser XHR a first-class target: the row got FLAGGED as overridden (the
+ * rule matched) while the real request went out. The fix is
+ * `runStandardOverride` below: `Object.defineProperty` INSTANCE own-properties
+ * shadow the prototype accessors (legal on any object), and the lifecycle
+ * events are dispatched by hand through the XHR's own EventTarget — which
+ * fires `addEventListener` listeners AND the `onload`/`onloadend`/
+ * `onreadystatechange` handler attributes, exactly what axios's XHR adapter
+ * listens on.
+ *
+ * Several non-obvious behaviours are handled below; each one is a real bug if
+ * you skip it, and each is commented at the line that fixes it.
  */
 
 const HEADERS_RECEIVED = 2;
@@ -40,22 +58,33 @@ const internalsOf = xhr => xhr;
 let warnedUnsupported = false;
 
 /**
- * Can this XMLHttpRequest be driven by hand?
+ * Can this XMLHttpRequest be driven through React Native's internals?
  *
- * The whole technique rests on RN internals, so it is feature-detected rather
- * than assumed: on a browser XMLHttpRequest (react-native-web) these methods
- * don't exist and `status` is a read-only getter. There, overrides no-op and
- * the request goes out for real — degraded, but never broken.
+ * The RN technique rests on those internals, so it is feature-detected rather
+ * than assumed. A request that fails this check is NOT automatically a lost
+ * cause — `canSynthesizeStandard` covers the standards XHR next.
  */
 export function canSynthesize(xhr) {
   const internals = internalsOf(xhr);
   return typeof internals.setReadyState === "function" && typeof internals.setResponseHeaders === "function";
 }
+
+/**
+ * Can this XMLHttpRequest be driven as a STANDARDS one?
+ *
+ * `dispatchEvent` is the load-bearing requirement: the whole standard path
+ * works by defining instance own-properties and then dispatching the
+ * lifecycle events through the XHR's own EventTarget. `removeEventListener`
+ * rules out half-mocks that could take the branch and then leak listeners.
+ */
+export function canSynthesizeStandard(xhr) {
+  return typeof xhr.addEventListener === "function" && typeof xhr.removeEventListener === "function" && typeof xhr.dispatchEvent === "function";
+}
 function warnUnsupported() {
   if (warnedUnsupported) return;
   warnedUnsupported = true;
   if (typeof __DEV__ !== "undefined" && __DEV__) {
-    console.warn("[Buoy] Network overrides need React Native's XMLHttpRequest and this " + "environment provides a different one — requests will run normally.");
+    console.warn("[Buoy] Network overrides need an XMLHttpRequest they can drive (React " + "Native's, or a standards EventTarget one) and this environment " + "provides neither — requests will run normally.");
   }
 }
 
@@ -115,6 +144,230 @@ function fail(xhr, outcome) {
   internals.setReadyState?.(DONE);
 }
 
+// ============================================================================
+// STANDARDS XMLHttpRequest path (webview ports / react-native-web)
+// ============================================================================
+
+/**
+ * Shadow a prototype accessor with an instance own-property.
+ *
+ * This is the entire trick: `xhr.status = 500` silently no-ops (or throws in
+ * strict mode) against the readonly getter on `XMLHttpRequest.prototype`, but
+ * an own DATA property on the instance is legal and takes precedence in every
+ * lookup. `configurable: true` so `readyState` can be redefined per
+ * transition. Works identically against RN's plain class fields, so nothing
+ * here is browser-only — the RN path just has a richer mechanism available.
+ */
+function defineOwn(xhr, name, value) {
+  Object.defineProperty(xhr, name, {
+    value,
+    configurable: true,
+    enumerable: true,
+    writable: false
+  });
+}
+
+/**
+ * Build a lifecycle event to dispatch by hand.
+ *
+ * `ProgressEvent` where the spec uses one (load/loadend/error/timeout/abort)
+ * and the constructor exists; plain `Event` otherwise (Node test runs have no
+ * ProgressEvent); a `{ type }` literal as the last resort for event-target
+ * shims. Dispatching through the XHR's own EventTarget is what makes the
+ * `onload`/`onloadend`/`onreadystatechange` handler ATTRIBUTES fire too —
+ * they're listeners in the same list, which is exactly what axios's adapter
+ * registers.
+ */
+function makeEvent(type) {
+  if (type !== "readystatechange" && typeof ProgressEvent === "function") {
+    try {
+      return new ProgressEvent(type);
+    } catch {
+      // fall through
+    }
+  }
+  if (typeof Event === "function") {
+    try {
+      return new Event(type);
+    } catch {
+      // fall through
+    }
+  }
+  return {
+    type
+  };
+}
+function fireEvent(xhr, type) {
+  xhr.dispatchEvent(makeEvent(type));
+}
+
+/** Move the shadowed `readyState` and announce it — the interceptor's own
+ * listener stamps TTFB off the HEADERS_RECEIVED notification, same as a real
+ * response. */
+function setStandardReadyState(xhr, state) {
+  defineOwn(xhr, "readyState", state);
+  fireEvent(xhr, "readystatechange");
+}
+
+/**
+ * `xhr.response` in the caller's requested shape.
+ *
+ * A standards XHR types `response` off `responseType`; axios sets it when the
+ * caller asked for one (default '' → text). JSON is parsed (spec: null on
+ * parse failure), arraybuffer/blob are best-effort encodings of the rule's
+ * text body, everything else falls back to the string.
+ */
+function standardResponseFor(xhr, outcome) {
+  let responseType = "";
+  try {
+    responseType = xhr.responseType;
+  } catch {
+    // Some shims throw on access before send — treat as default text.
+  }
+  switch (responseType) {
+    case "":
+    case "text":
+      return outcome.body;
+    case "json":
+      try {
+        return JSON.parse(outcome.body);
+      } catch {
+        return null;
+      }
+    case "arraybuffer":
+      if (typeof TextEncoder === "function") {
+        return new TextEncoder().encode(outcome.body).buffer;
+      }
+      return outcome.body;
+    case "blob":
+      if (typeof Blob === "function") {
+        const contentType = Object.entries(outcome.headers).find(([name]) => name.toLowerCase() === "content-type")?.[1] ?? "";
+        return new Blob([outcome.body], {
+          type: contentType
+        });
+      }
+      return outcome.body;
+    default:
+      return outcome.body;
+  }
+}
+
+/** Synthesize a successful response on a standards XHR. */
+function respondStandard(xhr, url, outcome, isAborted) {
+  const headers = outcome.headers;
+  // Spec shape: lowercase names, `name: value\r\n` per pair — axios splits on
+  // newlines and trims, raw XHR users get what a real response reads like.
+  const allHeaders = Object.entries(headers).map(([name, value]) => `${name.toLowerCase()}: ${value}\r\n`).join("");
+  defineOwn(xhr, "getAllResponseHeaders", () => allHeaders);
+  defineOwn(xhr, "getResponseHeader", name => {
+    const wanted = String(name).toLowerCase();
+    for (const [key, value] of Object.entries(headers)) {
+      if (key.toLowerCase() === wanted) return value;
+    }
+    return null;
+  });
+  defineOwn(xhr, "responseURL", url);
+  defineOwn(xhr, "status", outcome.status);
+  defineOwn(xhr, "statusText", outcome.statusText);
+  defineOwn(xhr, "response", standardResponseFor(xhr, outcome));
+  // Own property, so it answers with the body even under a non-text
+  // `responseType` (where the real accessor would throw). axios reads it
+  // whenever `responseType` is '' or 'text'.
+  defineOwn(xhr, "responseText", outcome.body);
+  setStandardReadyState(xhr, HEADERS_RECEIVED);
+  if (isAborted()) return;
+  setStandardReadyState(xhr, LOADING);
+  if (isAborted()) return;
+  setStandardReadyState(xhr, DONE);
+  fireEvent(xhr, "load");
+  fireEvent(xhr, "loadend");
+}
+
+/** Synthesize a transport failure on a standards XHR — offline or timeout. */
+function failStandard(xhr, outcome) {
+  // `status` stays 0 (the prototype getter's answer for a request whose real
+  // send never ran) — exactly what a genuine network error reports. The
+  // 'error'/'timeout' event is the entire signal; axios turns them into
+  // ERR_NETWORK / ECONNABORTED the same way whatwg-fetch turns RN's flags
+  // into TypeErrors.
+  setStandardReadyState(xhr, DONE);
+  fireEvent(xhr, outcome.failKind === "timeout" ? "timeout" : "error");
+  fireEvent(xhr, "loadend");
+}
+
+/**
+ * Apply an outcome to a standards XMLHttpRequest that has NOT been sent.
+ *
+ * The real `send()` is never invoked for respond/fail — the request must not
+ * touch the network. That leaves `abort()` with nothing to do natively (per
+ * spec, abort on a request whose send flag is unset dispatches NOTHING), so
+ * an instance shadow gives it the in-flight behaviour the app expects:
+ * cancel the pending outcome and dispatch abort + loadend. The shadow deletes
+ * itself the moment it can't matter anymore — after settling, and before a
+ * `delay` pass-through hands the request to the real network, where the
+ * prototype `abort()` must be reachable again.
+ */
+function runStandardOverride(xhr, url, outcome, passThrough) {
+  let timer = null;
+  let aborted = false;
+  let settled = false;
+  const restoreAbort = () => {
+    try {
+      delete xhr.abort;
+    } catch {
+      // Non-configurable shadow can't happen (we define it configurable), but
+      // never let cleanup throw into app code.
+    }
+  };
+  Object.defineProperty(xhr, "abort", {
+    configurable: true,
+    writable: true,
+    value: () => {
+      if (settled || aborted) return;
+      aborted = true;
+      settled = true;
+      if (timer !== null) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      restoreAbort();
+      // The in-flight abort sequence: DONE, then 'abort', then 'loadend' —
+      // whatwg's request-error steps, which is also what RN's setReadyState
+      // dispatches off `_aborted`.
+      setStandardReadyState(xhr, DONE);
+      fireEvent(xhr, "abort");
+      fireEvent(xhr, "loadend");
+    }
+  });
+  const fire = () => {
+    timer = null;
+    if (aborted) return;
+    if (outcome.kind === "delay") {
+      // The real request is about to be genuinely in flight — put the
+      // prototype `abort()` back FIRST so cancelling reaches the network.
+      restoreAbort();
+      passThrough();
+      return;
+    }
+    if (outcome.kind === "fail") {
+      failStandard(xhr, outcome);
+    } else {
+      respondStandard(xhr, url, outcome, () => aborted);
+    }
+    settled = true;
+    restoreAbort();
+  };
+
+  // ALWAYS asynchronous, even at 0ms — same contract as the RN path: callers
+  // legitimately attach handlers after `send()` returns (axios does).
+  timer = setTimeout(fire, outcome.delayMs);
+  return true;
+}
+
+// ============================================================================
+// Entry point
+// ============================================================================
+
 /**
  * Apply an outcome to a request that has NOT been sent yet.
  *
@@ -125,6 +378,13 @@ function fail(xhr, outcome) {
  */
 export function runOverride(xhr, url, outcome, passThrough) {
   if (!canSynthesize(xhr)) {
+    // Not React Native's XMLHttpRequest — a standards one (webview port,
+    // react-native-web) is driven through instance property shadowing
+    // instead. Order matters: RN's XHR also extends an EventTarget shim, so
+    // the RN check must win first.
+    if (canSynthesizeStandard(xhr)) {
+      return runStandardOverride(xhr, url, outcome, passThrough);
+    }
     warnUnsupported();
     return false;
   }

package/lib/module/network/utils/generateNetworkCopyText.js

@@ -6,9 +6,36 @@
  * callback previously inlined in NetworkModal — kept pure so the header
  * CopyButton can resolve it LAZILY at copy time (CopyButton accepts a
  * function value) instead of rebuilding the string on every event.
+ *
+ * PLATFORM-FREE ON PURPOSE: this module is reused verbatim by the web ports
+ * (webview shims resolve `@buoy-gg/shared-ui` to a minimal storage-only shim),
+ * so it must not reach the RN component graph or the shared-ui barrel. That is
+ * why:
+ *  - `CopySettings` is defined HERE rather than imported from
+ *    NetworkCopySettingsView.tsx (which pulls in react-native + shared-ui RN
+ *    chrome). The RN view keeps its own structurally-identical definition —
+ *    keep the two shapes in sync.
+ *  - `formatBytes` is a verbatim copy of
+ *    shared/src/utils/formatting/dataFormatting.ts rather than the
+ *    `./formatting` re-export of `@buoy-gg/shared-ui` (not in the web shim).
  */
 
-import { formatBytes } from "./formatting";
+/**
+ * What the copy exporter includes and how it formats it. Structurally
+ * identical to (and must stay in sync with) the `CopySettings` exported by
+ * NetworkCopySettingsView.tsx — see the platform-free note above for why the
+ * definition lives here.
+ */
+
+/** shared/src/utils/formatting/dataFormatting.ts `formatBytes` — verbatim. */
+function formatBytes(bytes) {
+  if (bytes === undefined || bytes === null) return "N/A";
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+}
 function shouldIncludePayload(data, bodySizeThresholdKb) {
   if (bodySizeThresholdKb === -1) return true;
   if (!data) return true;

package/lib/module/network/utils/networkEventStore.js

@@ -108,8 +108,14 @@ class NetworkEventStore extends BaseEventStore {
       const now = Date.now();
       const recent = this.recentRequests.get(requestKey);
 
-      // If same request within 50ms, likely a duplicate from XHR/fetch dual interception
-      if (recent && now - recent.at < 50) {
+      // If same request within 50ms, likely a duplicate from XHR/fetch dual
+      // interception. The age must be non-negative: Date.now() is not
+      // monotonic, and after a backwards clock adjustment (iOS time sync) a
+      // future-dated entry would satisfy `< 50` for EVERY request to this
+      // endpoint until the clock caught up — capture going silent for minutes
+      // to hours, "fixed" only by Clear wiping this map (field-reported). A
+      // negative age falls through and re-stamps the entry with the new clock.
+      if (recent && now - recent.at >= 0 && now - recent.at < 50) {
         // …but the duplicate is not always redundant. On React Native a
         // `fetch()` is seen twice: once by the fetch wrapper, which is what
         // creates this event, and again by the XHR wrapper underneath it —
@@ -126,11 +132,13 @@ class NetworkEventStore extends BaseEventStore {
         id: request.id
       });
 
-      // Clean up old entries to prevent memory leak
+      // Clean up old entries to prevent memory leak. Future-dated entries are
+      // stale by definition (clock moved backwards) — drop those too, or they
+      // survive every sweep until the clock overtakes them.
       if (this.recentRequests.size > 100) {
         const cutoff = now - 5000;
         for (const [key, entry] of this.recentRequests.entries()) {
-          if (entry.at < cutoff) {
+          if (entry.at < cutoff || entry.at > now) {
             this.recentRequests.delete(key);
           }
         }

package/lib/module/network/utils/networkListener.js

@@ -200,20 +200,6 @@ class NetworkListener {
     return `${Math.round(bytes / Math.pow(k, i) * 100) / 100} ${sizes[i]}`;
   }
 
-  // Get response body size
-  getResponseSize(body) {
-    if (!body) return 0;
-    if (typeof body === "string") return body.length;
-    if (typeof body === "object") {
-      try {
-        return JSON.stringify(body).length;
-      } catch {
-        return 0;
-      }
-    }
-    return 0;
-  }
-
   /**
    * Handle XMLHttpRequest response processing
    * This method processes the response and emits appropriate events
@@ -541,8 +527,7 @@ class NetworkListener {
         const responseClone = response.clone();
         const {
           body,
-          size: responseSize,
-          truncated
+          size: responseSize
         } = await self.processResponseBody(responseClone);
 
         // Now the body is in — this is the comparable, total number.

package/lib/typescript/index.web.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @buoy-gg/network — Web Entry Point (webview ports: Tauri / Capacitor / web).
+ *
+ * Exposes the platform-free capture + data layer only. The capture core
+ * (networkListener) patches `globalThis.fetch` and `XMLHttpRequest.prototype`
+ * — standard web APIs — so it runs in a webview unchanged; the RN UI
+ * components (NetworkModal etc.) are NOT exported here. Their DOM twins are
+ * added feature-by-feature as the web tools port progresses.
+ *
+ * Consumers resolve `@buoy-gg/shared-ui` to a web shim (see
+ * example-tauri/src/shims/shared-ui.web.ts) providing localStorage-backed
+ * persistentStorage, devToolsStorageKeys, BaseEventStore, and the pure
+ * ignored-patterns helpers.
+ *
+ * @platform React DOM Web
+ */
+export { networkListener, startNetworkListener, stopNetworkListener, addNetworkListener, removeAllNetworkListeners, isNetworkListening, } from "./network/utils/networkListener";
+export type { NetworkingEvent, NetworkingEventListener, } from "./network/utils/networkListener";
+export { networkEventStore } from "./network/utils/networkEventStore";
+export { networkSavedStore, flagsForEventId, } from "./network/utils/networkSavedStore";
+export type { NetworkEvent, NetworkStats, NetworkFilter, NetworkTimings, } from "./network/types";
+export { useNetworkEvents, FREE_TIER_REQUEST_LIMIT } from "./network/hooks/useNetworkEvents";
+export { useNetworkEventList } from "./network/hooks/useNetworkEventList";
+export { useLiveNetworkEvent } from "./network/hooks/useLiveNetworkEvent";
+export { useNetworkBadgeCounts } from "./network/hooks/useNetworkBadgeCounts";
+export { useHasNetworkSelection, useSelectedNetworkEventId, useNetworkBodyEventId, useNetworkCursor, } from "./network/hooks/useNetworkSelection";
+export { networkSelectionStore, toSelectionIds, } from "./network/utils/networkSelectionStore";
+export { NetworkListScreen } from "./network/components/NetworkListScreen.web";
+export { NetworkEventItemCompact } from "./network/components/NetworkEventItemCompact.web";
+export { NetworkHeaderBadges, NetworkClearButton, NetworkSavedButton, NetworkDetailPinActions, NetworkHeaderCopyButton, } from "./network/components/NetworkHeaderLive.web";
+export { NetworkEventDetailView } from "./network/components/NetworkEventDetailView.web";
+export { NetworkDetailStepper } from "./network/components/NetworkDetailStepper.web";
+export { NetworkDetailScreen } from "./network/components/NetworkDetailScreen.web";
+export { NetworkFilterViewV3 } from "./network/components/NetworkFilterViewV3.web";
+export { NetworkFilterScreen } from "./network/components/NetworkFilterScreen.web";
+export { NetworkSavedScreen } from "./network/components/NetworkSavedScreen.web";
+export { NetworkCopySettingsView, DEFAULT_COPY_SETTINGS, } from "./network/components/NetworkCopySettingsView.web";
+export { NetworkCopyScreen } from "./network/components/NetworkCopyScreen.web";
+export { generateNetworkCopyText, type CopySettings, } from "./network/utils/generateNetworkCopyText";
+export { selectSavedEvents } from "./network/utils/selectSavedEvents";
+export { FREE_TIER_SAVED_LIMIT, MAX_SAVED } from "./network/utils/networkSavedStore";
+export { NetworkOverridesScreen } from "./network/components/NetworkOverridesScreen.web";
+export { NetworkOverrideEditor } from "./network/components/NetworkOverrideEditor.web";
+export { NetworkNumberPrompt } from "./network/components/NetworkNumberPrompt.web";
+export { NetworkOverridesButton } from "./network/components/NetworkOverridesButton.web";
+export { NetworkOverrideHeaderButton } from "./network/components/NetworkOverrideHeaderButton.web";
+export { useOverrideRules } from "./network/hooks/useOverrideRules";
+export { overrideRulesStore, type OverrideRuleDraft, } from "./network/overrides/overrideRulesStore";
+export { draftFromEvent, patternForUrl } from "./network/overrides/presets";
+export { FREE_TIER_RULE_LIMIT, MAX_RULES, STATUS_MAX, STATUS_MIN, type OverrideRule, type NetworkOverrideMark, } from "./network/overrides/types";
+export { ruleMatches } from "./network/overrides/matchRule";
+export { filterNetworkEvents, applyIgnoredPatterns, } from "./network/utils/filterNetworkEvents";
+export { splitPinned, type PinnedSplit } from "./network/utils/withPinnedFirst";
+export { extractOperationName } from "./network/utils/extractOperationName";
+export { generateCurl } from "./network/utils/generateCurl";
+//# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/index.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../src/index.web.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/network/components/DataViewer.web.d.ts

@@ -0,0 +1,78 @@
+/**
+ * DataViewer.web — DOM twin of the shared-ui data-viewer stack, exactly as the
+ * network DETAIL view consumes it (`rawMode` + type-filter legend +
+ * `initialExpanded`). The web shim exposes none of this chrome, so it is
+ * replicated here as DOM with provenance:
+ *
+ *  - `DataViewer` — shared/src/dataViewer/DataViewer.tsx (type-filter chips +
+ *    the `flattenByType` filtered projection, algorithms copied verbatim).
+ *  - Tree rows — shared/src/dataViewer/VirtualizedDataExplorer.tsx, rawMode
+ *    path: synthetic "root" row, 24px rows, 16px indent per depth, chevron
+ *    expander, `key:` in monospace, values colored by type
+ *    (macOSColors.dataTypes via the gameUIColors macOS theme), expandable rows
+ *    reading "object (3 items)", per-row copy button, MAX_ITEMS_PER_LEVEL 500 /
+ *    MAX_DEPTH_LIMIT 15 caps and the circular-reference guard.
+ *  - Indent guides — shared/src/dataViewer/IndentGuidesOverlay.tsx (same
+ *    segment computation, 1px lines at (depth-0.5)*16, primary @ ~30% alpha).
+ *  - Type chips — shared/src/dataViewer/TypeLegend.tsx (`getTypeColor` copied
+ *    verbatim).
+ *  - `CopyButton` / `InlineCopyButton` — shared/src/ui/components/
+ *    CopyButton.tsx: idle/success/error states, 1500ms feedback, lazy function
+ *    values resolved at press time, object values pretty-printed (2-space,
+ *    circular-safe — clipboard/copyToClipboard.ts's safeStringify semantics).
+ *
+ * Intentional deviations (all logged):
+ *  - FlatList virtualization + the chunked/debounced async flatten
+ *    ("Processing data…") → a synchronous flatten over plain DOM rows. The
+ *    same 500-per-level/15-deep caps bound the work, and web rows are cheap;
+ *    the settle-window in `networkSelectionStore` (see `showBodies` on the
+ *    detail view) is what keeps stepping fast, exactly as on native.
+ *  - Row selection / double-tap inline editing / `DataTreeActionBar` are NOT
+ *    ported — that is the response-EDITOR surface (overrides), a later port
+ *    feature. Read-only rows toggle expansion on press, as native does when no
+ *    `onSelectionChange` is wired.
+ *  - `CopyButton`'s Pro upgrade modal + first-copy hint banner are not ported
+ *    (license gating isn't part of the web port); `disableCopy` is accepted
+ *    for API compatibility and ignored, same as the native explorer.
+ *  - `displayValue`'s minimal-SuperJSON serialization → JSON.stringify; for
+ *    the JSON payloads this tool renders the output is identical.
+ *
+ * @platform React DOM Web
+ */
+import { type CSSProperties } from "react";
+interface CopyButtonProps {
+    /** The value to copy — any type; a FUNCTION value is resolved at press time
+     * (CopyButton's latest-ref pattern), so no string is built per render. */
+    value: unknown;
+    /** Icon size (default 16, matching native). */
+    size?: number;
+    buttonStyle?: CSSProperties;
+    /** Custom colors per state — same contract as native. */
+    colors?: {
+        idle?: string;
+        success?: string;
+        error?: string;
+    };
+    "aria-label"?: string;
+}
+/**
+ * Copy button with idle/success/error feedback (1500ms), same icon set and
+ * state colors as native. No Pro modal / hint banner — see the deviations log.
+ */
+export declare const CopyButton: import("react").NamedExoticComponent<CopyButtonProps>;
+/** Preset copy button for inline use (smaller size) — native `InlineCopyButton`. */
+export declare const InlineCopyButton: import("react").NamedExoticComponent<Omit<CopyButtonProps, "size">>;
+type JsonValue = unknown;
+export interface DataViewerProps {
+    title: string;
+    data: JsonValue;
+    maxDepth?: number;
+    rawMode?: boolean;
+    showTypeFilter?: boolean;
+    initialExpanded?: boolean;
+    /** Accepted for API compatibility with native; ignored (see deviations). */
+    disableCopy?: boolean;
+}
+export declare function DataViewer({ title: _title, data, maxDepth, rawMode: _rawMode, showTypeFilter, initialExpanded, disableCopy: _disableCopy, }: DataViewerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=DataViewer.web.d.ts.map

package/lib/typescript/network/components/DataViewer.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewer.web.d.ts","sourceRoot":"","sources":["../../../../src/network/components/DataViewer.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAML,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAuJf,UAAU,eAAe;IACvB;8EAC0E;IAC1E,KAAK,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,yDAAyD;IACzD,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,uDAwErB,CAAC;AAEH,oFAAoF;AACpF,eAAO,MAAM,gBAAgB,qEAI3B,CAAC;AAqBH,KAAK,SAAS,GAAG,OAAO,CAAC;AAsdzB,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EAAE,MAAM,EACb,IAAI,EACJ,QAAa,EACb,OAAO,EAAE,QAAe,EACxB,cAAqB,EACrB,eAAuB,EACvB,WAAW,EAAE,YAAoB,GAClC,EAAE,eAAe,+BAmGjB"}

package/lib/typescript/network/components/NetworkCopyScreen.web.d.ts

@@ -0,0 +1,27 @@
+/**
+ * NetworkCopyScreen.web — DOM twin of the `NetworkCopyScreen` 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 NetworkFilterScreen.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. The preview reads the SAME filtered
+ * list the user is looking at (`useNetworkEventList` — the platform-free hook
+ * native uses, reused, not forked).
+ *
+ * @platform React DOM Web
+ */
+import type { IgnoredPattern, NetworkFilter } from "../types";
+import type { CopySettings } from "../utils/generateNetworkCopyText";
+export interface NetworkCopyScreenProps {
+    visible: boolean;
+    paused: boolean;
+    isPro: boolean;
+    filter: NetworkFilter;
+    ignoredPatterns: IgnoredPattern[];
+    settings: CopySettings;
+    onSettingsChange: (settings: CopySettings) => void;
+}
+export declare function NetworkCopyScreen({ visible, paused, isPro, filter, ignoredPatterns, settings, onSettingsChange, }: NetworkCopyScreenProps): import("react").JSX.Element | null;
+//# sourceMappingURL=NetworkCopyScreen.web.d.ts.map

package/lib/typescript/network/components/NetworkCopyScreen.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkCopyScreen.web.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkCopyScreen.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAIrE,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,aAAa,CAAC;IACtB,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,QAAQ,EAAE,YAAY,CAAC;IACvB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,MAAM,EACN,KAAK,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,gBAAgB,GACjB,EAAE,sBAAsB,sCAexB"}