@buoy-gg/network 7.0.36 → 7.0.38

package/lib/module/network/conditions/NetworkConditionsControl.js

@@ -0,0 +1,231 @@
+"use strict";
+
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { ChevronDown, Check, night } from "@buoy-gg/shared-ui";
+import { conditionsCanApply, getNetworkCondition, setNetworkCondition, subscribeNetworkConditions } from "./store";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const options = [{
+  profile: "normal",
+  label: "No throttling"
+}, {
+  profile: "slow",
+  label: "Slow"
+}, {
+  profile: "verySlow",
+  label: "Very slow"
+}, {
+  profile: "offline",
+  label: "Offline"
+}];
+const summaries = {
+  normal: "No added delay",
+  slow: "+500 ms before each new request",
+  verySlow: "+2 seconds before each new request",
+  offline: "New requests fail before sending"
+};
+export function NetworkConditionsControl({
+  remote
+}) {
+  const local = useSyncExternalStore(subscribeNetworkConditions, getNetworkCondition, getNetworkCondition);
+  const localAvailable = useSyncExternalStore(subscribeNetworkConditions, conditionsCanApply, conditionsCanApply);
+  const [expanded, setExpanded] = useState(false);
+  const [error, setError] = useState();
+  const [pending, setPending] = useState(false);
+  const busy = useRef(false);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const profile = remote ? remote.profile : local;
+  const available = remote ? remote.available : localAvailable;
+  const active = profile !== null && profile !== "normal";
+  const tint = profile === "offline" ? night.color.danger : active ? night.color.warning : night.color.accent;
+  async function select(value) {
+    if (!available || busy.current) return;
+    if (value === profile) {
+      setExpanded(false);
+      return;
+    }
+    busy.current = true;
+    setPending(true);
+    setError(undefined);
+    try {
+      if (remote) await remote.onChange(value);else setNetworkCondition(value);
+      if (mounted.current) setExpanded(false);
+    } catch (failure) {
+      if (mounted.current) setError(failure instanceof Error ? failure.message : String(failure));
+    } finally {
+      busy.current = false;
+      if (mounted.current) setPending(false);
+    }
+  }
+  const label = options.find(option => option.profile === profile)?.label ?? "Unavailable";
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    testID: "buoy-network-throttling-screen",
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.heading,
+      children: "Connection profile"
+    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      testID: "buoy-network-conditions",
+      accessibilityRole: "button",
+      accessibilityLabel: `Network throttling: ${label}`,
+      accessibilityState: {
+        expanded,
+        disabled: !available || pending
+      },
+      disabled: !available || pending,
+      onPress: () => setExpanded(value => !value),
+      style: [styles.dropdown, expanded && styles.dropdownOpen, !available && styles.disabled],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.value, active && {
+          color: tint
+        }],
+        children: label
+      }), pending ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: night.color.textSecondary
+      }) : /*#__PURE__*/_jsx(ChevronDown, {
+        size: 16,
+        color: night.color.textSecondary
+      })]
+    }), expanded && /*#__PURE__*/_jsx(View, {
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: "Connection profile",
+      style: styles.options,
+      children: options.map(option => {
+        const selected = profile === option.profile;
+        return /*#__PURE__*/_jsxs(TouchableOpacity, {
+          testID: `buoy-network-condition-${option.profile}`,
+          accessibilityRole: "radio",
+          accessibilityLabel: option.label,
+          accessibilityState: {
+            checked: selected,
+            disabled: !available || pending
+          },
+          disabled: !available || pending,
+          onPress: () => void select(option.profile),
+          style: [styles.option, selected && styles.selected],
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.optionBody,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.optionTitle, selected && {
+                color: tint
+              }],
+              children: option.label
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.caption,
+              children: summaries[option.profile]
+            })]
+          }), selected && /*#__PURE__*/_jsx(Check, {
+            size: 16,
+            color: tint
+          })]
+        }, option.profile);
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.caption,
+      accessibilityLiveRegion: "polite",
+      children: pending ? "Applying to device…" : !available ? remote ? "Conditions unavailable on this device" : "Requires a signed-in account and a development build" : profile ? summaries[profile] : "Waiting for device status"
+    }), !!error && /*#__PURE__*/_jsx(Text, {
+      accessibilityRole: "alert",
+      style: styles.error,
+      children: error
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.help,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.heading,
+        children: "How it works"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.caption,
+        children: "Affects new HTTP requests through global fetch and XHR. Slow adds a wait before sending; download speed stays unchanged."
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.caption,
+        children: "Stays active when you close this tool or pause capture. Choose No throttling to stop. Reloading the app resets it."
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    padding: night.gutter,
+    gap: 10
+  },
+  heading: {
+    fontSize: night.font.caption,
+    fontWeight: "600",
+    color: night.color.textSecondary
+  },
+  dropdown: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    minHeight: 44,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: night.radius.segment,
+    borderWidth: 1,
+    borderColor: night.color.separator,
+    backgroundColor: night.color.surfaceElevated
+  },
+  dropdownOpen: {
+    borderColor: night.color.accentBorderStrong
+  },
+  value: {
+    flex: 1,
+    fontSize: night.font.body,
+    color: night.color.text
+  },
+  options: {
+    padding: 4,
+    borderRadius: night.radius.row,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    backgroundColor: night.color.surface
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minHeight: 54,
+    padding: 10,
+    borderRadius: night.radius.segment
+  },
+  optionBody: {
+    flex: 1,
+    gap: 4
+  },
+  optionTitle: {
+    fontSize: night.font.caption,
+    fontWeight: "600",
+    color: night.color.text
+  },
+  selected: {
+    backgroundColor: night.color.surfaceElevated
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  caption: {
+    fontSize: night.font.caption,
+    lineHeight: 19,
+    color: night.color.textSecondary
+  },
+  help: {
+    marginTop: 14,
+    paddingTop: 16,
+    gap: 10,
+    borderTopWidth: 1,
+    borderTopColor: night.color.separator
+  },
+  error: {
+    fontSize: night.font.caption,
+    lineHeight: 18,
+    color: night.color.danger
+  }
+});

package/lib/module/network/conditions/NetworkConditionsControl.test.js

@@ -0,0 +1,135 @@
+"use strict";
+
+// @vitest-environment jsdom
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { NetworkConditionsControl } from "./NetworkConditionsControl";
+vi.mock("@buoy-gg/shared-ui", async () => ({
+  ChevronDown: () => null,
+  Check: () => null,
+  night: (await vi.importActual("../../../../shared/src/ui/night/nightTheme")).night
+}));
+vi.mock("react-native", () => ({
+  StyleSheet: {
+    create: value => value
+  },
+  View: ({
+    children
+  }) => /*#__PURE__*/createElement("div", null, children),
+  Text: ({
+    children
+  }) => /*#__PURE__*/createElement("span", null, children),
+  ActivityIndicator: () => /*#__PURE__*/createElement("span", null, "pending"),
+  TouchableOpacity: ({
+    children,
+    onPress,
+    disabled,
+    accessibilityLabel,
+    accessibilityState,
+    testID
+  }) => /*#__PURE__*/createElement("button", {
+    onClick: onPress,
+    disabled,
+    "aria-label": accessibilityLabel,
+    "aria-checked": accessibilityState?.checked,
+    "data-testid": testID
+  }, children)
+}));
+vi.mock("./store", () => ({
+  NETWORK_CONDITIONS: {
+    normal: {
+      label: "Normal"
+    },
+    slow: {
+      label: "Slow"
+    },
+    verySlow: {
+      label: "Very slow"
+    },
+    offline: {
+      label: "Offline"
+    }
+  },
+  getNetworkCondition: () => "normal",
+  conditionsCanApply: () => true,
+  subscribeNetworkConditions: () => () => {},
+  setNetworkCondition: vi.fn()
+}));
+let root;
+let container;
+beforeEach(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+  container = document.createElement("div");
+  root = createRoot(container);
+});
+afterEach(() => act(() => root.unmount()));
+const button = profile => container.querySelector(`[data-testid="buoy-network-condition-${profile}"]`);
+function render(remote) {
+  act(() => root.render(/*#__PURE__*/createElement(NetworkConditionsControl, {
+    remote
+  })));
+}
+const dropdown = () => container.querySelector('[data-testid="buoy-network-conditions"]');
+const open = () => act(() => dropdown().click());
+it("defaults to a closed No throttling dropdown and closes when the current option is chosen", () => {
+  const onChange = vi.fn();
+  render({
+    profile: "normal",
+    available: true,
+    onChange
+  });
+  expect(dropdown().textContent).toBe("No throttling");
+  expect(button("normal")).toBeNull();
+  open();
+  expect(["normal", "slow", "verySlow", "offline"].every(value => !!button(value))).toBe(true);
+  act(() => button("normal").click());
+  expect(button("normal")).toBeNull();
+  expect(onChange).not.toHaveBeenCalled();
+});
+it("blocks duplicate remote changes and waits for the device profile before selecting it", async () => {
+  let finish;
+  const onChange = vi.fn(() => new Promise(resolve => {
+    finish = resolve;
+  }));
+  render({
+    profile: "normal",
+    available: true,
+    onChange
+  });
+  open();
+  act(() => button("slow").click());
+  expect(button("offline").disabled).toBe(true);
+  expect(button("normal").getAttribute("aria-checked")).toBe("true");
+  act(() => button("offline").click());
+  expect(onChange).toHaveBeenCalledExactlyOnceWith("slow");
+  await act(async () => finish());
+  render({
+    profile: "slow",
+    available: true,
+    onChange
+  });
+  expect(dropdown().textContent).toBe("Slow");
+  expect(button("slow")).toBeNull();
+  open();
+  expect(button("slow").getAttribute("aria-checked")).toBe("true");
+});
+it("reports a remote error, permits retry, and disables unavailable devices", async () => {
+  const onChange = vi.fn().mockRejectedValue(new Error("Device disconnected"));
+  render({
+    profile: "normal",
+    available: true,
+    onChange
+  });
+  open();
+  await act(async () => button("offline").click());
+  expect(container.textContent).toContain("Device disconnected");
+  expect(button("offline").disabled).toBe(false);
+  render({
+    profile: null,
+    available: false,
+    onChange
+  });
+  expect(button("normal").disabled).toBe(true);
+  expect(container.textContent).toContain("Conditions unavailable on this device");
+});

package/lib/module/network/conditions/NetworkConditionsIcon.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { useSyncExternalStore } from "react";
+import { Text, View } from "react-native";
+import { NetworkIcon } from "@buoy-gg/shared-ui";
+import { getNetworkCondition, subscribeNetworkConditions, NETWORK_CONDITIONS } from "./store";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NetworkConditionsIcon({
+  size
+}) {
+  const profile = useSyncExternalStore(subscribeNetworkConditions, getNetworkCondition, getNetworkCondition);
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityLabel: profile === "normal" ? "Network" : `Network: ${NETWORK_CONDITIONS[profile].label}`,
+    children: [/*#__PURE__*/_jsx(NetworkIcon, {
+      size: size
+    }), profile !== "normal" && /*#__PURE__*/_jsx(Text, {
+      testID: "buoy-network-condition-indicator",
+      style: {
+        position: "absolute",
+        top: -6,
+        right: -8,
+        color: "#FFCC66",
+        fontSize: 10,
+        fontWeight: "700"
+      },
+      children: profile === "offline" ? "OFF" : `+${NETWORK_CONDITIONS[profile].delayMs}`
+    })]
+  });
+}

package/lib/module/network/conditions/NetworkFloatingTool.js

@@ -0,0 +1,304 @@
+"use strict";
+
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from "react-native";
+import { FloatingTool, night, openFloatingTool, persistentStorage, registerPersistentFloatingTool } from "@buoy-gg/shared-ui";
+import { conditionsCanApply, getNetworkCondition, setNetworkCondition, subscribeNetworkConditions } from "./store";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A live source keeps the desktop strip current after its launching panel closes. */
+export function createRemoteConditionsSource() {
+  let value;
+  const listeners = new Set();
+  return {
+    getSnapshot: () => value,
+    subscribe: listener => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    update(next) {
+      value = next;
+      listeners.forEach(listener => listener());
+    }
+  };
+}
+const noSubscribe = () => () => {};
+const noRemote = () => undefined;
+const options = [{
+  id: "normal",
+  label: "No throttling",
+  detail: "No added delay"
+}, {
+  id: "slow",
+  label: "Slow",
+  detail: "+500 ms before sending"
+}, {
+  id: "verySlow",
+  label: "Very slow",
+  detail: "+2 seconds before sending"
+}, {
+  id: "offline",
+  label: "Offline",
+  detail: "New requests fail"
+}];
+const localRegistration = {
+  id: "network-throttling",
+  render: context => /*#__PURE__*/_jsx(NetworkFloatingTool, {
+    ...context
+  })
+};
+if (typeof __DEV__ !== "undefined" && __DEV__ && typeof navigator !== "undefined" && navigator.product === "ReactNative") {
+  registerPersistentFloatingTool(localRegistration, persistentStorage);
+}
+export function openNetworkFloatingTool(source) {
+  openFloatingTool({
+    id: "network-throttling",
+    render: context => /*#__PURE__*/_jsx(NetworkFloatingTool, {
+      ...context,
+      source: source
+    })
+  });
+}
+export function NetworkFloatingTool({
+  id,
+  revealToken,
+  dismiss,
+  source
+}) {
+  const local = useSyncExternalStore(subscribeNetworkConditions, getNetworkCondition, getNetworkCondition);
+  const localAvailable = useSyncExternalStore(subscribeNetworkConditions, conditionsCanApply, conditionsCanApply);
+  const remote = useSyncExternalStore(source?.subscribe ?? noSubscribe, source?.getSnapshot ?? noRemote, noRemote);
+  const profile = source ? remote?.profile ?? null : local;
+  const available = source ? remote?.available === true : localAvailable;
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState();
+  const busy = useRef(false);
+  const operation = useRef(0);
+  const mounted = useRef(true);
+  const {
+    width
+  } = useWindowDimensions();
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    operation.current += 1;
+    busy.current = false;
+    setPending(false);
+    setError(undefined);
+  }, [source, remote?.targetId]);
+  const active = profile !== null && profile !== "normal";
+  const selected = profile ?? "normal";
+  const choice = options.find(option => option.id === selected);
+  const next = options[(options.findIndex(option => option.id === selected) + 1) % options.length];
+  const bars = !available || selected === "offline" ? 0 : selected === "verySlow" ? 1 : selected === "slow" ? 2 : 4;
+  const detail = pending ? "Applying…" : !available ? "Unavailable" : selected === "normal" ? "0 ms" : selected === "slow" ? "+500 ms" : selected === "verySlow" ? "+2000 ms" : "Blocked";
+  async function apply(next, close = false) {
+    if (busy.current) return;
+    const currentOperation = ++operation.current;
+    busy.current = true;
+    setPending(true);
+    setError(undefined);
+    const startingRemote = source?.getSnapshot();
+    try {
+      if (source) {
+        if (!startingRemote?.available) throw new Error("Device unavailable. Open Network again to reconnect these controls.");
+        await startingRemote.onChange(next);
+      } else setNetworkCondition(next);
+      if (mounted.current && operation.current === currentOperation) {
+        if (close) dismiss();
+      }
+    } catch (failure) {
+      if (mounted.current && operation.current === currentOperation) setError(failure instanceof Error ? failure.message : String(failure));
+    } finally {
+      if (operation.current === currentOperation) {
+        busy.current = false;
+        if (mounted.current) setPending(false);
+      }
+    }
+  }
+  const accessory = error ? /*#__PURE__*/_jsx(View, {
+    style: styles.menu,
+    children: /*#__PURE__*/_jsx(Text, {
+      accessibilityRole: "alert",
+      style: styles.error,
+      children: error
+    })
+  }) : undefined;
+  return /*#__PURE__*/_jsx(FloatingTool, {
+    id: id,
+    revealToken: revealToken,
+    variant: "strip",
+    dragFromSurface: true,
+    accessibilityLabel: `Move or hide network throttling. ${active ? "Active" : "Off"}`,
+    accessory: accessory,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.row, {
+        width: Math.max(220, Math.min(292, width - 64))
+      }],
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        testID: "throttling-cycle",
+        accessibilityRole: "button",
+        accessibilityLabel: `Network: ${choice.label}. Switch to ${next.label}`,
+        accessibilityState: {
+          disabled: pending || !available
+        },
+        disabled: pending || !available,
+        onPress: () => void apply(next.id),
+        style: styles.signalButton,
+        children: pending ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: night.color.accent
+        }) : /*#__PURE__*/_jsxs(View, {
+          testID: `throttling-signal-${selected}`,
+          style: styles.signal,
+          children: [[7, 12, 18, 24].map((height, index) => /*#__PURE__*/_jsx(View, {
+            style: {
+              width: 4,
+              height,
+              borderRadius: 2,
+              backgroundColor: index < bars ? selected === "offline" ? night.color.danger : night.color.accent : night.color.fillTertiary
+            }
+          }, height)), selected === "offline" && /*#__PURE__*/_jsx(View, {
+            style: styles.slash
+          })]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.profile,
+        children: /*#__PURE__*/_jsx(Text, {
+          testID: "throttling-profile",
+          accessibilityLabel: `Connection profile: ${choice.label}`,
+          accessibilityLiveRegion: "polite",
+          numberOfLines: 1,
+          style: styles.profileLabel,
+          children: choice.label
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        testID: "throttling-status",
+        numberOfLines: 1,
+        accessibilityLiveRegion: "polite",
+        style: styles.status,
+        children: detail
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.separator
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        testID: "throttling-close",
+        accessibilityRole: "button",
+        accessibilityLabel: "Close and turn off throttling",
+        disabled: pending,
+        accessibilityState: {
+          disabled: pending
+        },
+        onPress: () => {
+          if (profile === "normal") dismiss();else void apply("normal", true);
+        },
+        style: [styles.action, pending && styles.disabled],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.actionText,
+          children: "Close"
+        })
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingVertical: 4,
+    minHeight: 48
+  },
+  signalButton: {
+    width: 36,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  signal: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 3,
+    height: 24
+  },
+  slash: {
+    position: "absolute",
+    width: 30,
+    height: 2,
+    backgroundColor: night.color.danger,
+    top: 11,
+    left: -2,
+    transform: [{
+      rotate: "-45deg"
+    }]
+  },
+  separator: {
+    height: 20,
+    width: 1,
+    backgroundColor: night.color.separator,
+    marginHorizontal: 2
+  },
+  status: {
+    color: night.color.textSecondary,
+    fontSize: 10,
+    lineHeight: 15,
+    flexShrink: 1
+  },
+  profile: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    minHeight: 44
+  },
+  profileLabel: {
+    color: night.color.text,
+    fontSize: 13,
+    fontWeight: "500",
+    flexShrink: 1
+  },
+  action: {
+    minHeight: 36,
+    minWidth: 52,
+    borderRadius: night.radius.input,
+    borderWidth: 1,
+    borderColor: night.color.accentBorderStrong,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 10
+  },
+  actionText: {
+    color: night.color.accent,
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  disabled: {
+    opacity: 0.4
+  },
+  menu: {
+    marginVertical: 8,
+    padding: 6,
+    borderRadius: night.radius.card,
+    borderWidth: 1,
+    borderColor: night.color.separator,
+    backgroundColor: night.color.surface,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 6
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 16,
+    elevation: 8
+  },
+  error: {
+    color: night.color.danger,
+    fontSize: 12,
+    lineHeight: 18,
+    padding: 10
+  }
+});