@buoy-gg/shared-ui 7.0.39 → 7.0.41

package/lib/module/utils/browserAsyncStorage.js

@@ -0,0 +1,151 @@
+"use strict";
+
+const listeners = new Set();
+let detach;
+export function getBrowserStorage(area = 'localStorage') {
+  if (typeof window === 'undefined') throw new Error('Browser storage is unavailable during server rendering.');
+  return window[area];
+}
+function entries(storage) {
+  return Array.from({
+    length: storage.length
+  }, (_, index) => storage.key(index)).filter(key => key !== null).map(key => [key, storage.getItem(key)]);
+}
+function emit(change) {
+  for (const listener of [...listeners]) {
+    try {
+      listener(change);
+    } catch {/* Observers cannot change storage behavior. */}
+  }
+}
+function attach() {
+  if (typeof window === 'undefined' || typeof Storage === 'undefined') return;
+  const proto = Storage.prototype;
+  const set = proto.setItem;
+  const remove = proto.removeItem;
+  const clear = proto.clear;
+  const areaOf = storage => {
+    for (const area of ['localStorage', 'sessionStorage']) {
+      try {
+        if (storage === window[area]) return area;
+      } catch {/* Storage may be blocked. */}
+    }
+    return undefined;
+  };
+  const wrappedSet = function (key, value) {
+    const area = areaOf(this);
+    const name = String(key);
+    const text = String(value);
+    const prevValue = area ? this.getItem(name) : null;
+    Reflect.apply(set, this, [name, text]);
+    if (area) emit({
+      area,
+      action: 'setItem',
+      key: name,
+      value: text,
+      prevValue
+    });
+  };
+  const wrappedRemove = function (key) {
+    const area = areaOf(this);
+    const name = String(key);
+    const prevValue = area ? this.getItem(name) : null;
+    Reflect.apply(remove, this, [name]);
+    if (area) emit({
+      area,
+      action: 'removeItem',
+      key: name,
+      prevValue
+    });
+  };
+  const wrappedClear = function () {
+    const area = areaOf(this);
+    const prevPairs = area ? entries(this) : undefined;
+    Reflect.apply(clear, this, []);
+    if (area) emit({
+      area,
+      action: 'clear',
+      prevPairs
+    });
+  };
+  proto.setItem = wrappedSet;
+  proto.removeItem = wrappedRemove;
+  proto.clear = wrappedClear;
+  const crossDocument = event => {
+    const area = event.storageArea && areaOf(event.storageArea);
+    if (area) emit({
+      area,
+      action: event.key === null ? 'clear' : event.newValue === null ? 'removeItem' : 'setItem',
+      key: event.key ?? undefined,
+      value: event.newValue ?? undefined,
+      prevValue: event.oldValue
+    });
+  };
+  window.addEventListener('storage', crossDocument);
+  detach = () => {
+    if (proto.setItem === wrappedSet) proto.setItem = set;
+    if (proto.removeItem === wrappedRemove) proto.removeItem = remove;
+    if (proto.clear === wrappedClear) proto.clear = clear;
+    window.removeEventListener('storage', crossDocument);
+    detach = undefined;
+  };
+}
+export function subscribeToBrowserStorage(listener) {
+  if (!listeners.size) attach();
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+    if (!listeners.size) detach?.();
+  };
+}
+function merge(previous, next) {
+  if (!previous || !next || typeof previous !== 'object' || typeof next !== 'object' || Array.isArray(previous) || Array.isArray(next)) return next;
+  const result = {
+    ...previous
+  };
+  for (const [key, value] of Object.entries(next)) {
+    Object.defineProperty(result, key, {
+      value: merge(result[key], value),
+      enumerable: true,
+      writable: true,
+      configurable: true
+    });
+  }
+  return result;
+}
+
+// The shared storage editor and snapshot providers use this asynchronous contract.
+const browserAsyncStorage = {
+  async getItem(key) {
+    return getBrowserStorage().getItem(key);
+  },
+  async setItem(key, value) {
+    getBrowserStorage().setItem(key, value);
+  },
+  async removeItem(key) {
+    getBrowserStorage().removeItem(key);
+  },
+  async clear() {
+    getBrowserStorage().clear();
+  },
+  async getAllKeys() {
+    return entries(getBrowserStorage()).map(([key]) => key);
+  },
+  async multiGet(keys) {
+    return keys.map(key => [key, getBrowserStorage().getItem(key)]);
+  },
+  async multiSet(pairs) {
+    for (const [key, value] of pairs) getBrowserStorage().setItem(key, value);
+  },
+  async multiRemove(keys) {
+    for (const key of keys) getBrowserStorage().removeItem(key);
+  },
+  async mergeItem(key, value) {
+    const storage = getBrowserStorage();
+    storage.setItem(key, JSON.stringify(merge(JSON.parse(storage.getItem(key) ?? 'null'), JSON.parse(value))));
+  },
+  async multiMerge(pairs) {
+    for (const [key, value] of pairs) await browserAsyncStorage.mergeItem(key, value);
+  }
+};
+export default browserAsyncStorage;

package/lib/module/utils/browserNavigation.js

@@ -0,0 +1,108 @@
+"use strict";
+
+let adapter;
+const listeners = new Set();
+let detach;
+export function registerBrowserRouter(router) {
+  adapter = router;
+  return () => {
+    if (adapter === router) adapter = undefined;
+  };
+}
+export function getBrowserHref() {
+  return typeof location === 'undefined' ? '/' : location.href;
+}
+export function getBrowserRouteURL(href = getBrowserHref()) {
+  const url = new URL(href, 'http://localhost');
+  return url.hash.startsWith('#/') ? new URL(url.hash.slice(1), url.origin) : url;
+}
+export function subscribeBrowserNavigation(listener) {
+  if (!listeners.size && typeof window !== 'undefined') {
+    const history = window.history;
+    const push = history.pushState;
+    const replace = history.replaceState;
+    const emit = kind => {
+      for (const callback of [...listeners]) {
+        try {
+          callback({
+            href: getBrowserHref(),
+            kind
+          });
+        } catch {/* Keep host navigation intact. */}
+      }
+    };
+    const wrappedPush = function (...args) {
+      const result = Reflect.apply(push, this, args);
+      emit('push');
+      return result;
+    };
+    const wrappedReplace = function (...args) {
+      const result = Reflect.apply(replace, this, args);
+      emit('replace');
+      return result;
+    };
+    history.pushState = wrappedPush;
+    history.replaceState = wrappedReplace;
+    const pop = () => emit('pop');
+    window.addEventListener('popstate', pop);
+    window.addEventListener('hashchange', pop);
+    detach = () => {
+      if (history.pushState === wrappedPush) history.pushState = push;
+      if (history.replaceState === wrappedReplace) history.replaceState = replace;
+      window.removeEventListener('popstate', pop);
+      window.removeEventListener('hashchange', pop);
+      detach = undefined;
+    };
+  }
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+    if (!listeners.size) detach?.();
+  };
+}
+function pathFor(path) {
+  const target = typeof path === 'string' ? path : path.pathname;
+  const url = new URL(target, getBrowserHref());
+  if (url.origin !== window.location.origin) throw new Error('Tool navigation must stay on the current origin.');
+  if (typeof path !== 'string') for (const [key, value] of Object.entries(path.params ?? {})) url.searchParams.set(key, String(value));
+  return `${url.pathname}${url.search}${url.hash}`;
+}
+export const browserRouter = {
+  push(path) {
+    const target = pathFor(path);
+    if (adapter) return adapter.push(target);
+    window.history.pushState(null, '', window.location.hash.startsWith('#/') ? `#${target}` : target);
+    window.dispatchEvent(new PopStateEvent('popstate', {
+      state: window.history.state
+    }));
+  },
+  replace(path) {
+    const target = pathFor(path);
+    if (adapter) return adapter.replace(target);
+    window.history.replaceState(window.history.state, '', window.location.hash.startsWith('#/') ? `#${target}` : target);
+    window.dispatchEvent(new PopStateEvent('popstate', {
+      state: window.history.state
+    }));
+  },
+  back() {
+    if (adapter) adapter.back();else window.history.back();
+  },
+  canGoBack() {
+    return adapter?.canGoBack?.() ?? (typeof window !== 'undefined' && window.history.length > 1);
+  },
+  navigate(path) {
+    browserRouter.push(path);
+  },
+  setParams(params) {
+    browserRouter.replace({
+      pathname: getBrowserHref(),
+      params
+    });
+  },
+  dismiss(count = 1) {
+    window.history.go(-count);
+  },
+  dismissAll() {
+    throw new Error('Use the captured browser history to select a destination.');
+  }
+};

package/lib/module/utils/devServer.js

@@ -23,11 +23,15 @@ const ORIGIN_RE = /^(https?:\/\/[^/]+)/;
 /** Bundle URL this JS realm was loaded from, or null off React Native. */
 function scriptURL() {
   try {
-    // Requires stay lexically inside try{} so Metro treats them as optional —
-    // react-native-web has neither path and falls through to null.
-    const NativeSourceCode =
+    // The public route to the SourceCode TurboModule that
+    // react-native/Libraries/NativeModules/specs/NativeSourceCode wraps. Deep
+    // imports warn on RN 0.80+; react-native-web has no registry and falls
+    // through to null.
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    require("react-native/Libraries/NativeModules/specs/NativeSourceCode").default;
+    const {
+      TurboModuleRegistry
+    } = require("react-native");
+    const NativeSourceCode = TurboModuleRegistry?.get?.("SourceCode");
     const url = NativeSourceCode?.getConstants?.().scriptURL;
     if (url) return url;
   } catch {

package/lib/module/utils/devServer.web.js

@@ -0,0 +1,6 @@
+"use strict";
+
+// A browser origin does not imply the presence of Metro's reload socket.
+export function getDevServerOrigin() {
+  return null;
+}

package/lib/module/utils/domRuntime.js

@@ -0,0 +1,134 @@
+"use strict";
+
+const handles = new WeakMap();
+let nextHandle = 1;
+export function isDOMElement(value) {
+  return !!value && typeof value === 'object' && value.nodeType === 1 && typeof value.getBoundingClientRect === 'function';
+}
+export function getDOMNodeHandle(value) {
+  if (!isDOMElement(value)) return null;
+  let handle = handles.get(value);
+  if (handle === undefined) {
+    handle = nextHandle++;
+    handles.set(value, handle);
+  }
+  return handle;
+}
+export function getDOMFiber(value) {
+  if (!isDOMElement(value)) return null;
+  const key = Object.keys(value).find(name => name.startsWith('__reactFiber$'));
+  return key ? value[key] : null;
+}
+
+/** Map DOM controls onto the shared screen automation contract. */
+export function getDOMControlProps(value, props) {
+  if (!isDOMElement(value) || !props) return props;
+  const input = value;
+  const tag = value.tagName.toLowerCase();
+  const toggle = tag === 'input' && (input.type === 'checkbox' || input.type === 'radio');
+  const range = tag === 'input' && input.type === 'range';
+  const text = tag === 'textarea' || tag === 'select' || tag === 'input' && !toggle && !range && !['button', 'submit', 'reset', 'file', 'hidden'].includes(input.type);
+  const setValue = next => {
+    if (toggle) {
+      if (input.checked !== Boolean(next)) input.click();
+      return;
+    }
+    const setter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value')?.set;
+    if (setter) setter.call(input, String(next));else input.value = String(next);
+    input.dispatchEvent(new Event('input', {
+      bubbles: true
+    }));
+    input.dispatchEvent(new Event('change', {
+      bubbles: true
+    }));
+  };
+  return {
+    ...props,
+    __buoyDevToolsRoot: props.__buoyDevToolsRoot || props['data-buoy-root'] !== undefined,
+    testID: props.testID ?? props['data-testid'],
+    nativeID: props.nativeID ?? props.id,
+    accessibilityLabel: props.accessibilityLabel ?? props['aria-label'],
+    accessibilityRole: props.accessibilityRole ?? props.role ?? (tag === 'button' ? 'button' : tag === 'a' ? 'link' : toggle ? input.type : text ? 'textbox' : range ? 'slider' : undefined),
+    onPress: props.onPress ?? (typeof props.onClick === 'function' || tag === 'button' || tag === 'a' ? () => input.click() : undefined),
+    ...(toggle || range ? {
+      onValueChange: setValue,
+      value: toggle ? input.checked : Number(input.value),
+      ...(range ? {
+        minimumValue: Number(input.min || 0),
+        maximumValue: Number(input.max || 100)
+      } : {})
+    } : {}),
+    ...(text ? {
+      onChangeText: setValue,
+      value: input.value
+    } : {})
+  };
+}
+export function getDOMPublicInstance(value) {
+  if (!isDOMElement(value)) return null;
+  return {
+    __nativeTag: getDOMNodeHandle(value),
+    measure(callback) {
+      const rect = value.getBoundingClientRect();
+      callback(rect.x, rect.y, rect.width, rect.height, rect.x, rect.y);
+    },
+    measureInWindow(callback) {
+      const rect = value.getBoundingClientRect();
+      callback(rect.x, rect.y, rect.width, rect.height);
+    },
+    requestTVFocus() {
+      value.focus();
+    },
+    focus() {
+      value.focus();
+    }
+  };
+}
+const eventNames = {
+  topFocus: 'focus',
+  topBlur: 'blur',
+  topTouchStart: 'pointerdown',
+  topTouchMove: 'pointermove',
+  topTouchEnd: 'pointerup',
+  topTouchCancel: 'pointercancel',
+  topChange: 'input',
+  topValueChange: 'input',
+  topSlidingComplete: 'change'
+};
+export function resolveDOMEventEmitter() {
+  if (typeof document === 'undefined') return {
+    emitter: null,
+    reason: 'DOM events are unavailable during server rendering.'
+  };
+  return {
+    reason: null,
+    emitter: {
+      addListener(name, listener) {
+        const type = eventNames[name];
+        if (!type) throw new Error(`Unsupported DOM event: ${name}`);
+        const callback = event => {
+          const element = event.composedPath()[0] ?? event.target;
+          if (!isDOMElement(element)) return;
+          const input = element;
+          const pointer = event;
+          const nativeEvent = {
+            target: getDOMNodeHandle(element),
+            pageX: pointer.clientX,
+            pageY: pointer.clientY
+          };
+          if (type === 'input' || type === 'change') {
+            if (input.type === 'checkbox' || input.type === 'radio') nativeEvent.value = input.checked;else if (input.type === 'range') nativeEvent.value = Number(input.value);else nativeEvent.text = input.value ?? element.textContent ?? '';
+          }
+          listener({
+            eventName: name,
+            nativeEvent
+          });
+        };
+        document.addEventListener(type, callback, true);
+        return {
+          remove: () => document.removeEventListener(type, callback, true)
+        };
+      }
+    }
+  };
+}

package/lib/module/utils/expoRouterModule.js

@@ -0,0 +1,46 @@
+"use strict";
+
+import { NativeModules } from "react-native";
+function hasExpoNativeRuntime() {
+  // Modern Expo (SDK 50+, both Old and New Architecture): expo-modules-core
+  // installs a global `expo` object — the Expo Modules API runtime — via JSI
+  // when the native runtime is actually present. This is the most reliable
+  // signal and, crucially, the ONLY one of these checks that fires on SDK 54+ /
+  // New Architecture dev builds, where the legacy NativeModules entries below
+  // are no longer registered (ExpoLinking is gone, NativeUnimoduleProxy isn't
+  // on the bridge). It stays absent on bare RN CLI, so there's no false
+  // positive there. Without this, navigation-dependent tools (route sitemap,
+  // remote navigate, perf-monitor automation) silently no-op on modern builds.
+  const expoGlobal = globalThis.expo;
+  if (expoGlobal != null && (expoGlobal.modules != null || expoGlobal.EventEmitter != null || expoGlobal.NativeModule != null)) {
+    return true;
+  }
+
+  // Check legacy NativeModules bridge (Expo SDK < 54)
+  if (NativeModules.ExpoLinking) {
+    return true;
+  }
+
+  // Check for Expo Modules Core native bridge (older SDKs / Old Architecture)
+  if (NativeModules.NativeUnimoduleProxy || NativeModules.ExpoModulesCore) {
+    return true;
+  }
+
+  // Check for Expo Go app
+  if (NativeModules.ExpoGoModule || NativeModules.ExpoUpdates) {
+    return true;
+  }
+
+  // No Expo native runtime detected (e.g. bare RN CLI).
+  // NOTE: We intentionally do NOT try require("expo-modules-core") here because
+  // on RN CLI it may be bundled as a transitive dep but the native modules
+  // (requireOptionalNativeModule etc.) are undefined, causing crashes.
+  return false;
+}
+export function loadExpoRouter() {
+  if (!hasExpoNativeRuntime()) return null;
+  return require("expo-router");
+}
+export function loadExpoRouterStore() {
+  return require("expo-router/build/global-state/router-store")?.store ?? null;
+}

package/lib/module/utils/expoRouterModule.web.js

@@ -0,0 +1,9 @@
+"use strict";
+
+// Automatic Expo Router discovery is not supported by the browser entry.
+export function loadExpoRouter() {
+  return null;
+}
+export function loadExpoRouterStore() {
+  return null;
+}

package/lib/module/utils/getSafeAreaInsets.web.js

@@ -0,0 +1,31 @@
+"use strict";
+
+export function getSafeAreaInsets() {
+  const empty = {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    hasNotch: false
+  };
+  if (typeof document === "undefined" || !document.body) return empty;
+  const probe = document.createElement("div");
+  probe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)";
+  document.body.appendChild(probe);
+  try {
+    const style = getComputedStyle(probe);
+    const top = parseFloat(style.paddingTop) || 0;
+    const bottom = parseFloat(style.paddingBottom) || 0;
+    const left = parseFloat(style.paddingLeft) || 0;
+    const right = parseFloat(style.paddingRight) || 0;
+    return {
+      top,
+      bottom,
+      left,
+      right,
+      hasNotch: top > 0 || bottom > 0 || left > 0 || right > 0
+    };
+  } finally {
+    probe.remove();
+  }
+}

package/lib/module/utils/index.js

@@ -2,8 +2,8 @@
 
 export { absoluteFill } from "./absoluteFill.js";
 export { displayValue, parseDisplayValue } from "./displayValue.js";
-export { getSafeAreaInsets } from "./getSafeAreaInsets.js";
-export { persistentStorage, isUsingPersistentStorage, getStorageBackendType } from "./persistentStorage.js";
+export { getSafeAreaInsets } from "./getSafeAreaInsets";
+export { persistentStorage, isUsingPersistentStorage, getStorageBackendType } from "./persistentStorage";
 export { safeStringify } from "./safeStringify.js";
 export { getValueType, isPrimitive, isJsonSerializable, isValidJson, getConstructorName, isEmpty, getValueSize } from "./typeHelpers.js";
 export { parseValue, formatValue, getTypeColor, truncateText, flattenObject, formatPath } from "./valueFormatting.js";
@@ -12,7 +12,12 @@ export { setRenderCaptureProvider, getRenderCaptureProvider } from "./renderCapt
 export { registerStateSnapshotProvider, getStateSnapshotProviders, getStateSnapshotProvider, subscribeToStateSnapshotProviders } from "./stateSnapshotRegistry.js";
 export { serialize as superJsonSerialize, deserialize as superJsonDeserialize } from "./minimalSuperJSON.js";
 export { reloadApp, scheduleReloadApp, resolveReloadStrategy, REMOTE_RELOAD_DELAY_MS } from "./reloadApp.js";
-export { getDevServerOrigin } from "./devServer.js";
+export { getDevServerOrigin } from "./devServer";
 export { Subscribable } from "./subscribable.js";
 export { subscriberCountNotifier, subscribeToSubscriberCountChanges, notifySubscriberCountChange } from "./subscriberCountNotifier.js";
-export { useSafeRouter, useSafePathname, useSafeSegments, useSafeGlobalSearchParams, getSafeRouter, getSafeCurrentPathname, getSafeCurrentRoute, isExpoRouterAvailable } from "./safeExpoRouter.js";
+export { useSafeRouter, useSafePathname, useSafeSegments, useSafeGlobalSearchParams, getSafeRouter, getSafeCurrentPathname, getSafeCurrentRoute, isExpoRouterAvailable } from "./safeExpoRouter";
+export { getBrowserStorage, subscribeToBrowserStorage } from "./browserAsyncStorage.js";
+export { browserRouter, getBrowserHref, getBrowserRouteURL, registerBrowserRouter, subscribeBrowserNavigation } from "./browserNavigation.js";
+export { isDOMElement, getDOMControlProps, getDOMFiber, getDOMNodeHandle, getDOMPublicInstance, resolveDOMEventEmitter } from "./domRuntime.js";
+export { registerToolModules, getRegisteredToolModule, getToolModuleVersion } from "./toolModules.js";
+export { loadToolModule } from "./loadToolModule";

package/lib/module/utils/loadToolModule.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { getRegisteredToolModule } from "./toolModules.js";
+export function loadToolModule(name) {
+  const registered = getRegisteredToolModule(name);
+  if (registered) return registered;
+  // Metro only treats a require() inside try/catch as optional, so this
+  // rethrowing wrapper keeps an uninstalled tool from failing the bundle.
+  // eslint-disable-next-line no-useless-catch
+  try {
+    switch (name) {
+      case '@buoy-gg/license':
+        return require('@buoy-gg/license');
+      case '@buoy-gg/storage':
+        return require('@buoy-gg/storage');
+      case '@buoy-gg/network':
+        return require('@buoy-gg/network');
+      case '@buoy-gg/redux':
+        return require('@buoy-gg/redux');
+      case '@buoy-gg/zustand':
+        return require('@buoy-gg/zustand');
+      case '@buoy-gg/jotai':
+        return require('@buoy-gg/jotai');
+      case '@buoy-gg/react-query':
+        return require('@buoy-gg/react-query');
+      case '@buoy-gg/route-events':
+        return require('@buoy-gg/route-events');
+      case '@buoy-gg/highlight-updates':
+        return require('@buoy-gg/highlight-updates');
+      case '@buoy-gg/core':
+        return require('@buoy-gg/core');
+      case '@buoy-gg/shared-ui':
+        return require('../index');
+      case '@buoy-gg/shared-ui/dataViewer':
+        return require('../dataViewer');
+      default:
+        throw new Error(`Unknown tool module: ${name}`);
+    }
+  } catch (error) {
+    throw error;
+  }
+}

package/lib/module/utils/loadToolModule.web.js

@@ -0,0 +1,8 @@
+"use strict";
+
+import { getRegisteredToolModule } from "./toolModules.js";
+export function loadToolModule(name) {
+  const module = getRegisteredToolModule(name);
+  if (!module) throw new Error(`Register ${name} with createWebTools before opening tools that use it.`);
+  return module;
+}

package/lib/module/utils/modalStorage.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import { persistentStorage } from "./persistentStorage";
+/** Shared modal persistence, including state saved before a tool unmounts. */
+export class ModalStorage {
+  static cache = new Map();
+  static async save(key, value) {
+    this.cache.set(key, value);
+    try {
+      await persistentStorage.setItem(key, JSON.stringify(value));
+    } catch {/* The cached value remains available for this session. */}
+  }
+  static async load(key) {
+    if (this.cache.has(key)) return this.cache.get(key);
+    try {
+      const stored = await persistentStorage.getItem(key);
+      if (stored) {
+        const value = JSON.parse(stored);
+        this.cache.set(key, value);
+        return value;
+      }
+    } catch {/* Use the modal's defaults if the saved state is unavailable. */}
+    return null;
+  }
+  static saveMinimized(key, state) {
+    return this.save(key, {
+      mode: state.mode,
+      panelHeight: state.panelHeight,
+      dimensions: state.floatingDimensions && state.floatingPosition ? {
+        ...state.floatingDimensions,
+        top: state.floatingPosition.y,
+        left: state.floatingPosition.x
+      } : undefined,
+      isVisible: false
+    });
+  }
+}