@buoy-gg/network 7.0.35 → 7.0.38

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
+  }
+});

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

@@ -0,0 +1,218 @@
+"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 { NetworkFloatingTool, createRemoteConditionsSource } from "./NetworkFloatingTool";
+const state = vi.hoisted(() => ({
+  profile: "normal",
+  available: true,
+  listeners: new Set(),
+  set: vi.fn()
+}));
+vi.mock("./store", () => ({
+  getNetworkCondition: () => state.profile,
+  conditionsCanApply: () => state.available,
+  subscribeNetworkConditions: listener => {
+    state.listeners.add(listener);
+    return () => state.listeners.delete(listener);
+  },
+  setNetworkCondition: profile => {
+    state.set(profile);
+    state.profile = profile;
+    state.listeners.forEach(listener => listener());
+  }
+}));
+vi.mock("@buoy-gg/shared-ui", async () => ({
+  night: (await vi.importActual("../../../../shared/src/ui/night/nightTheme")).night,
+  ChevronDown: () => null,
+  Check: () => null,
+  openFloatingTool: vi.fn(),
+  FloatingTool: ({
+    children,
+    accessory
+  }) => /*#__PURE__*/createElement("div", null, children, accessory)
+}));
+vi.mock("react-native", () => ({
+  StyleSheet: {
+    create: value => value
+  },
+  useWindowDimensions: () => ({
+    width: 390,
+    height: 844
+  }),
+  View: ({
+    children,
+    testID
+  }) => /*#__PURE__*/createElement("div", {
+    "data-testid": testID
+  }, children),
+  Text: ({
+    children,
+    testID
+  }) => /*#__PURE__*/createElement("span", {
+    "data-testid": testID
+  }, children),
+  ActivityIndicator: () => null,
+  TouchableOpacity: ({
+    children,
+    onPress,
+    disabled,
+    testID,
+    accessibilityLabel
+  }) => /*#__PURE__*/createElement("button", {
+    onClick: onPress,
+    disabled,
+    "data-testid": testID,
+    "aria-label": accessibilityLabel
+  }, children)
+}));
+let root;
+let container;
+const dismiss = vi.fn();
+beforeEach(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+  state.profile = "normal";
+  state.available = true;
+  state.set.mockClear();
+  dismiss.mockClear();
+  container = document.createElement("div");
+  root = createRoot(container);
+});
+afterEach(() => act(() => root.unmount()));
+const button = id => container.querySelector(`[data-testid="${id}"]`);
+const tap = async id => act(async () => button(id).click());
+const status = () => container.querySelector('[data-testid="throttling-status"]')?.textContent;
+function render(source) {
+  act(() => root.render(/*#__PURE__*/createElement(NetworkFloatingTool, {
+    id: "network-throttling",
+    revealToken: 1,
+    dismiss,
+    source
+  })));
+}
+async function choose(value) {
+  const order = ["normal", "slow", "verySlow", "offline"];
+  const count = (order.indexOf(value) - order.indexOf(state.profile) + order.length) % order.length;
+  for (let i = 0; i < count; i++) await tap("throttling-cycle");
+}
+it("cycles and applies every profile immediately, including wrapping to normal", async () => {
+  render();
+  for (const [profile, label] of [["slow", "+500 ms"], ["verySlow", "+2000 ms"], ["offline", "Blocked"], ["normal", "0 ms"]]) {
+    await tap("throttling-cycle");
+    expect(state.profile).toBe(profile);
+    expect(container.querySelector(`[data-testid="throttling-signal-${profile}"]`)).not.toBeNull();
+    expect(status()).toBe(label);
+  }
+  expect(state.set).toHaveBeenCalledTimes(4);
+});
+it("keeps the profile label informational when tapped", async () => {
+  render();
+  await tap("throttling-profile");
+  expect(state.set).not.toHaveBeenCalled();
+  expect(state.profile).toBe("normal");
+  expect(button("throttling-profile").closest("button")).toBeNull();
+});
+it("changes active profiles and stops before dismissal", async () => {
+  state.profile = "slow";
+  render();
+  await choose("offline");
+  expect(state.profile).toBe("offline");
+  await tap("throttling-close");
+  expect(state.profile).toBe("normal");
+  expect(dismiss).toHaveBeenCalledOnce();
+});
+it("reflects external changes and disables cycling when account admission is revoked", () => {
+  render();
+  act(() => {
+    state.profile = "offline";
+    state.listeners.forEach(listener => listener());
+  });
+  expect(status()).toBe("Blocked");
+  act(() => {
+    state.profile = "normal";
+    state.available = false;
+    state.listeners.forEach(listener => listener());
+  });
+  expect(status()).toBe("Unavailable");
+  expect(button("throttling-cycle").disabled).toBe(true);
+});
+it("keeps remote failures visible and does not claim a profile was applied", async () => {
+  const source = createRemoteConditionsSource();
+  const onChange = vi.fn().mockRejectedValue(new Error("Connection lost"));
+  source.update({
+    profile: "normal",
+    available: true,
+    onChange
+  });
+  render(source);
+  await choose("slow");
+  expect(container.textContent).toContain("Connection lost");
+  expect(status()).toBe("0 ms");
+  expect(state.set).not.toHaveBeenCalled();
+});
+it("prevents duplicate remote operations and follows confirmed snapshots", async () => {
+  const source = createRemoteConditionsSource();
+  let resolve;
+  const onChange = vi.fn(() => new Promise(done => {
+    resolve = done;
+  }));
+  source.update({
+    profile: "normal",
+    available: true,
+    onChange
+  });
+  render(source);
+  await tap("throttling-cycle");
+  await tap("throttling-cycle");
+  expect(onChange).toHaveBeenCalledOnce();
+  expect(status()).toBe("Applying…");
+  await act(async () => resolve());
+  expect(status()).toBe("0 ms");
+  act(() => source.update({
+    profile: "slow",
+    available: true,
+    onChange
+  }));
+  expect(status()).toBe("+500 ms");
+  act(() => source.update(undefined));
+  expect(status()).toBe("Unavailable");
+});
+it("ignores a previous device's completion after switching devices", async () => {
+  const source = createRemoteConditionsSource();
+  let reject;
+  source.update({
+    targetId: "first",
+    profile: "normal",
+    available: true,
+    onChange: () => new Promise((_resolve, fail) => {
+      reject = fail;
+    })
+  });
+  render(source);
+  await choose("slow");
+  act(() => source.update({
+    targetId: "second",
+    profile: "normal",
+    available: true,
+    onChange: vi.fn()
+  }));
+  await act(async () => reject(new Error("Old device failed")));
+  expect(container.textContent).not.toContain("Old device failed");
+  expect(status()).toBe("0 ms");
+  expect(button("throttling-profile").textContent).toBe("No throttling");
+});
+it("keeps the strip open when stopping a remote device fails", async () => {
+  const source = createRemoteConditionsSource();
+  source.update({
+    profile: "offline",
+    available: true,
+    onChange: vi.fn().mockRejectedValue(new Error("Could not stop"))
+  });
+  render(source);
+  await tap("throttling-close");
+  expect(dismiss).not.toHaveBeenCalled();
+  expect(status()).toBe("Blocked");
+  expect(container.textContent).toContain("Could not stop");
+});

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

@@ -0,0 +1,65 @@
+"use strict";
+
+import { hasAccountAccess, subscribeAccountAccess } from "@buoy-gg/shared-ui";
+import { addNetworkListener, startNetworkListener, getNetworkListenerCount, stopNetworkListener } from "../utils/networkListener";
+export const NETWORK_CONDITIONS = {
+  normal: {
+    label: "Normal",
+    delayMs: 0
+  },
+  offline: {
+    label: "Offline (requests)",
+    delayMs: 0
+  },
+  slow: {
+    label: "Slow (+500 ms)",
+    delayMs: 500
+  },
+  verySlow: {
+    label: "Very slow (+2000 ms)",
+    delayMs: 2000
+  }
+};
+export const networkConditionsRuntimeId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+let profile = "normal";
+let keepAlive;
+const listeners = new Set();
+export const conditionsCanApply = () => typeof __DEV__ !== "undefined" && __DEV__ && hasAccountAccess();
+export const getNetworkCondition = () => profile;
+export const subscribeNetworkConditions = listener => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+export function setNetworkCondition(value) {
+  if (typeof value !== "string" || !Object.prototype.hasOwnProperty.call(NETWORK_CONDITIONS, value)) {
+    throw new Error("Choose normal, offline, slow, or verySlow.");
+  }
+  if (value !== "normal" && !conditionsCanApply()) {
+    throw new Error("Network conditions require an admitted account and a development build.");
+  }
+  if (value === profile) return profile;
+  if (value !== "normal" && !keepAlive) {
+    startNetworkListener();
+    keepAlive = addNetworkListener(() => {});
+  } else if (value === "normal") {
+    keepAlive?.();
+    keepAlive = undefined;
+    if (getNetworkListenerCount() === 0) stopNetworkListener();
+  }
+  profile = value;
+  listeners.forEach(listener => listener());
+  return profile;
+}
+export function snapshotNetworkCondition(url) {
+  if (profile === "normal" || !conditionsCanApply() || !/^https?:\/\//i.test(url)) return;
+  return Object.freeze({
+    profile,
+    delayMs: NETWORK_CONDITIONS[profile].delayMs
+  });
+}
+subscribeAccountAccess(() => {
+  if (!hasAccountAccess()) setNetworkCondition("normal");
+  listeners.forEach(listener => listener());
+});

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

@@ -0,0 +1,38 @@
+"use strict";
+
+export function throwIfAborted(signal) {
+  if (!signal?.aborted) return;
+  if (signal.reason !== undefined) throw signal.reason;
+  const error = new Error("The request was aborted.");
+  error.name = "AbortError";
+  throw error;
+}
+
+/** Wait before dispatch, releasing the timer and listener on cancellation. */
+export function waitBeforeDispatch(ms, signal) {
+  return new Promise((resolve, reject) => {
+    try {
+      throwIfAborted(signal);
+    } catch (error) {
+      reject(error);
+      return;
+    }
+    const cleanup = () => signal?.removeEventListener("abort", abort);
+    const abort = () => {
+      clearTimeout(timer);
+      cleanup();
+      try {
+        throwIfAborted(signal);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    const timer = setTimeout(() => {
+      cleanup();
+      resolve();
+    }, ms);
+    signal?.addEventListener("abort", abort, {
+      once: true
+    });
+  });
+}