@buoy-gg/debug-borders 7.0.39 → 7.0.41

package/README.md

@@ -77,3 +77,7 @@ Use a Free or Pro Buoy account. History limits and paid features vary by tool; s
 📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/debug-borders) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
 
 Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)
+
+## Web support (unreleased)
+
+Import @buoy-gg/core/web/register before React DOM. The shared overlay measures DOM elements and draws their borders and labels. The browser build is available in this checkout and has not been published yet. See the [web setup guide](https://buoy.gg/buoy/latest/docs/web-preview) for registration, dependencies, and browser boundaries.

package/lib/commonjs/debug-borders/components/DebugBordersStandaloneOverlay.js

@@ -7,6 +7,8 @@ exports.DebugBordersStandaloneOverlay = DebugBordersStandaloneOverlay;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _utils = require("@buoy-gg/shared-ui/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -22,36 +24,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * Automatically hides borders when DevTools modals are open to avoid visual clutter.
  */
 
-// Import JsModal from shared
-let JsModal = null;
-let DataViewer = null;
-/**
- * Where this overlay's info window remembers its size.
- *
- * It used to be the bare string `"debug-borders-info-modal"`, which is the one
- * Buoy key in the app that `isDevToolsStorageKey` does not recognise — no
- * `@react_buoy`, no `buoy-`, no `@buoy`. The consequences were small but wrong
- * in both directions: it showed up in the Storage tool as if it were the app's
- * own data, and the Events timeline reported Buoy resizing its own window as an
- * application storage write.
- */
-let infoModalKey = "@react_buoy_debug_borders_info_modal";
-try {
-  const sharedModule = require("@buoy-gg/shared-ui");
-  JsModal = sharedModule.JsModal;
-  const keys = sharedModule.devToolsStorageKeys;
-  if (keys?.debugBorders?.infoModal) {
-    infoModalKey = keys.debugBorders.infoModal();
-  }
-} catch (e) {
-  // JsModal not available
-}
-try {
-  const dataViewerModule = require("@buoy-gg/shared-ui/dataViewer");
-  DataViewer = dataViewerModule.DataViewer;
-} catch (e) {
-  // DataViewer not available
-}
+const infoModalKey = _sharedUi.devToolsStorageKeys.debugBorders.infoModal();
 const DebugBordersManager = require("../utils/DebugBordersManager");
 const {
   getAllHostComponentInstances
@@ -83,7 +56,7 @@ function resolveUseDevToolsVisibility() {
   }
   try {
     // Optional import - will gracefully fail if not available
-    const coreModule = require("@buoy-gg/core");
+    const coreModule = (0, _utils.loadToolModule)("@buoy-gg/core");
     useDevToolsVisibility = coreModule.useDevToolsVisibility ?? null;
   } catch (e) {
     // DevToolsVisibility not available, that's ok - borders will always work
@@ -208,7 +181,7 @@ function ComponentInfoContent({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
         label: "Hint",
         value: info.accessibilityHint
-      }), info.accessibilityState && DataViewer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DataViewer, {
+      }), info.accessibilityState && _dataViewer.DataViewer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
         title: "",
         data: info.accessibilityState,
         showTypeFilter: true,
@@ -222,7 +195,7 @@ function ComponentInfoContent({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: modalStyles.sectionTitle,
         children: "Styles"
-      }), DataViewer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DataViewer, {
+      }), _dataViewer.DataViewer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
         title: "",
         data: info.styleInfo,
         showTypeFilter: true,
@@ -364,7 +337,7 @@ function DebugBordersStandaloneOverlay() {
           })
         })]
       }, `border-${index}`);
-    }), JsModal && selectedRect?.componentInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(JsModal, {
+    }), _sharedUi.JsModal && selectedRect?.componentInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
       visible: modalVisible,
       onClose: handleCloseModal,
       initialMode: "bottomSheet",

package/lib/commonjs/debug-borders/utils/DebugBordersManager.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _utils = require("@buoy-gg/shared-ui/utils");
+"use strict";
 let globalMode = "off";
 const listeners = new Set();
 const MODE_CYCLE_FULL = ["off", "borders", "labels"];
@@ -10,7 +12,7 @@ function loadLicenseModule() {
   if (_licenseLoadAttempted) return;
   _licenseLoadAttempted = true;
   try {
-    const mod = require("@buoy-gg/license");
+    const mod = (0, _utils.loadToolModule)("@buoy-gg/license");
     if (mod && typeof mod.isPro === "function") {
       _isPro = mod.isPro;
     }

package/lib/commonjs/debug-borders/utils/fiberTreeTraversal.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _utils = require("@buoy-gg/shared-ui/utils");
+"use strict";
 function getReactDevToolsHook() {
   if (typeof global === "undefined") {
     return null;
@@ -18,15 +20,14 @@ function getFiberRoots() {
   if (!hook.getFiberRoots) {
     return [];
   }
-  try {
-    const rootsSet = hook.getFiberRoots(1);
-    if (!rootsSet) {
-      return [];
-    }
-    return Array.from(rootsSet);
-  } catch (error) {
-    return [];
+  const roots = new Set();
+  const ids = hook.renderers?.keys ? Array.from(hook.renderers.keys()) : [1];
+  for (const id of ids) {
+    try {
+      hook.getFiberRoots(id)?.forEach(root => roots.add(root));
+    } catch {}
   }
+  return [...roots];
 }
 const FiberTags = {
   FunctionComponent: 0,
@@ -61,6 +62,8 @@ const DEV_TOOLS_NATIVE_IDS = new Set(["debug-borders-overlay", "floating-devtool
 const devToolsNodeCache = new Map();
 const CACHE_MAX_SIZE = 500;
 function getNativeTag(stateNode) {
+  const dom = (0, _utils.getDOMNodeHandle)(stateNode);
+  if (dom !== null) return dom;
   if (!stateNode) return null;
   if (typeof stateNode._nativeTag === "number") return stateNode._nativeTag;
   if (typeof stateNode.canonical?._nativeTag === "number") {
@@ -107,6 +110,7 @@ function getComponentName(fiber) {
   return null;
 }
 function isDevToolsComponent(fiber, stateNode) {
+  if ((0, _utils.isDOMElement)(stateNode) && stateNode.closest('[data-buoy-root]')) return true;
   const nativeTag = getNativeTag(stateNode);
   if (nativeTag != null) {
     const cached = devToolsNodeCache.get(nativeTag);
@@ -173,6 +177,7 @@ function isInactiveScreen(fiber) {
   return props.activityState === 0;
 }
 function getNativeViewClassName(stateNode) {
+  if ((0, _utils.isDOMElement)(stateNode)) return stateNode.tagName.toLowerCase();
   if (!stateNode) {
     return null;
   }
@@ -272,20 +277,10 @@ function getReactDevToolsDiagnostics() {
     available: true,
     hasAgent: !!hook.reactDevtoolsAgent,
     hasFiberRoots: typeof hook.getFiberRoots === "function",
-    rendererCount: 0,
-    rootCount: 0,
+    rendererCount: hook.renderers?.size ?? 0,
+    rootCount: getFiberRoots().length,
     hookKeys: Object.keys(hook)
   };
-  if (hook.getFiberRoots) {
-    try {
-      const roots = hook.getFiberRoots(1);
-      if (roots) {
-        diagnostics.rootCount = roots.size;
-      }
-    } catch (e) {
-      diagnostics.error = e.message;
-    }
-  }
   return diagnostics;
 }
 module.exports = {

package/lib/module/debug-borders/components/DebugBordersStandaloneOverlay.js

@@ -16,37 +16,11 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 import { monoFont } from "@buoy-gg/shared-ui";
-// Import JsModal from shared
+import { JsModal, devToolsStorageKeys } from '@buoy-gg/shared-ui';
+import { DataViewer } from '@buoy-gg/shared-ui/dataViewer';
+import { loadToolModule } from '@buoy-gg/shared-ui/utils';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-let JsModal = null;
-let DataViewer = null;
-/**
- * Where this overlay's info window remembers its size.
- *
- * It used to be the bare string `"debug-borders-info-modal"`, which is the one
- * Buoy key in the app that `isDevToolsStorageKey` does not recognise — no
- * `@react_buoy`, no `buoy-`, no `@buoy`. The consequences were small but wrong
- * in both directions: it showed up in the Storage tool as if it were the app's
- * own data, and the Events timeline reported Buoy resizing its own window as an
- * application storage write.
- */
-let infoModalKey = "@react_buoy_debug_borders_info_modal";
-try {
-  const sharedModule = require("@buoy-gg/shared-ui");
-  JsModal = sharedModule.JsModal;
-  const keys = sharedModule.devToolsStorageKeys;
-  if (keys?.debugBorders?.infoModal) {
-    infoModalKey = keys.debugBorders.infoModal();
-  }
-} catch (e) {
-  // JsModal not available
-}
-try {
-  const dataViewerModule = require("@buoy-gg/shared-ui/dataViewer");
-  DataViewer = dataViewerModule.DataViewer;
-} catch (e) {
-  // DataViewer not available
-}
+const infoModalKey = devToolsStorageKeys.debugBorders.infoModal();
 const DebugBordersManager = require("../utils/DebugBordersManager");
 const {
   getAllHostComponentInstances
@@ -78,7 +52,7 @@ function resolveUseDevToolsVisibility() {
   }
   try {
     // Optional import - will gracefully fail if not available
-    const coreModule = require("@buoy-gg/core");
+    const coreModule = loadToolModule("@buoy-gg/core");
     useDevToolsVisibility = coreModule.useDevToolsVisibility ?? null;
   } catch (e) {
     // DevToolsVisibility not available, that's ok - borders will always work

package/lib/module/debug-borders/utils/DebugBordersManager.js

@@ -1,5 +1,7 @@
 "use strict";
 
+import { loadToolModule } from '@buoy-gg/shared-ui/utils';
+"use strict";
 let globalMode = "off";
 const listeners = new Set();
 const MODE_CYCLE_FULL = ["off", "borders", "labels"];
@@ -10,7 +12,7 @@ function loadLicenseModule() {
   if (_licenseLoadAttempted) return;
   _licenseLoadAttempted = true;
   try {
-    const mod = require("@buoy-gg/license");
+    const mod = loadToolModule("@buoy-gg/license");
     if (mod && typeof mod.isPro === "function") {
       _isPro = mod.isPro;
     }

package/lib/module/debug-borders/utils/fiberTreeTraversal.js

@@ -1,5 +1,7 @@
 "use strict";
 
+import { getDOMNodeHandle, isDOMElement } from '@buoy-gg/shared-ui/utils';
+"use strict";
 function getReactDevToolsHook() {
   if (typeof global === "undefined") {
     return null;
@@ -18,15 +20,14 @@ function getFiberRoots() {
   if (!hook.getFiberRoots) {
     return [];
   }
-  try {
-    const rootsSet = hook.getFiberRoots(1);
-    if (!rootsSet) {
-      return [];
-    }
-    return Array.from(rootsSet);
-  } catch (error) {
-    return [];
+  const roots = new Set();
+  const ids = hook.renderers?.keys ? Array.from(hook.renderers.keys()) : [1];
+  for (const id of ids) {
+    try {
+      hook.getFiberRoots(id)?.forEach(root => roots.add(root));
+    } catch {}
   }
+  return [...roots];
 }
 const FiberTags = {
   FunctionComponent: 0,
@@ -61,6 +62,8 @@ const DEV_TOOLS_NATIVE_IDS = new Set(["debug-borders-overlay", "floating-devtool
 const devToolsNodeCache = new Map();
 const CACHE_MAX_SIZE = 500;
 function getNativeTag(stateNode) {
+  const dom = getDOMNodeHandle(stateNode);
+  if (dom !== null) return dom;
   if (!stateNode) return null;
   if (typeof stateNode._nativeTag === "number") return stateNode._nativeTag;
   if (typeof stateNode.canonical?._nativeTag === "number") {
@@ -107,6 +110,7 @@ function getComponentName(fiber) {
   return null;
 }
 function isDevToolsComponent(fiber, stateNode) {
+  if (isDOMElement(stateNode) && stateNode.closest('[data-buoy-root]')) return true;
   const nativeTag = getNativeTag(stateNode);
   if (nativeTag != null) {
     const cached = devToolsNodeCache.get(nativeTag);
@@ -173,6 +177,7 @@ function isInactiveScreen(fiber) {
   return props.activityState === 0;
 }
 function getNativeViewClassName(stateNode) {
+  if (isDOMElement(stateNode)) return stateNode.tagName.toLowerCase();
   if (!stateNode) {
     return null;
   }
@@ -272,20 +277,10 @@ function getReactDevToolsDiagnostics() {
     available: true,
     hasAgent: !!hook.reactDevtoolsAgent,
     hasFiberRoots: typeof hook.getFiberRoots === "function",
-    rendererCount: 0,
-    rootCount: 0,
+    rendererCount: hook.renderers?.size ?? 0,
+    rootCount: getFiberRoots().length,
     hookKeys: Object.keys(hook)
   };
-  if (hook.getFiberRoots) {
-    try {
-      const roots = hook.getFiberRoots(1);
-      if (roots) {
-        diagnostics.rootCount = roots.size;
-      }
-    } catch (e) {
-      diagnostics.error = e.message;
-    }
-  }
   return diagnostics;
 }
 module.exports = {

package/lib/typescript/debug-borders/components/DebugBordersStandaloneOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebugBordersStandaloneOverlay.d.ts","sourceRoot":"","sources":["../../../../src/debug-borders/components/DebugBordersStandaloneOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAiOhE,wBAAgB,6BAA6B,6BAsL5C"}
+{"version":3,"file":"DebugBordersStandaloneOverlay.d.ts","sourceRoot":"","sources":["../../../../src/debug-borders/components/DebugBordersStandaloneOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAuMhE,wBAAgB,6BAA6B,6BAsL5C"}

package/lib/web/index.mjs

@@ -0,0 +1,2 @@
+"use client";
+var re=Object.defineProperty;var pt=Object.getOwnPropertyDescriptor;var bt=Object.getOwnPropertyNames;var gt=Object.prototype.hasOwnProperty;var mt=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,o)=>(typeof require<"u"?require:t)[o]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var me=(e,t)=>()=>(e&&(t=e(e=0)),t);var H=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),ye=(e,t)=>{for(var o in t)re(e,o,{get:t[o],enumerable:!0})},ne=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of bt(t))!gt.call(e,r)&&r!==o&&re(e,r,{get:()=>t[r],enumerable:!(n=pt(t,r))||n.enumerable});return e},y=(e,t,o)=>(ne(e,t,"default"),o&&ne(o,t,"default"));var yt=e=>ne(re({},"__esModule",{value:!0}),e);var d=me(()=>{"use strict";typeof window<"u"&&typeof globalThis.global>"u"&&(globalThis.global=globalThis)});import{loadToolModule as xo}from"@buoy-gg/shared-ui/web/utils";var _=H((An,we)=>{"use strict";d();var B="off",ie=new Set,Te=["off","borders","labels"],Co=["off","borders"],J=null,he=!1;function vo(){if(!he){he=!0;try{let e=xo("@buoy-gg/license");e&&typeof e.isPro=="function"&&(J=e.isPro)}catch{J=null}}}function X(){if(vo(),J)try{return J()}catch{return!1}return!1}function Se(){return X()?Te:Co}var wo=Te;function Ro(e){return ie.add(e),e(B),()=>{ie.delete(e)}}function Io(){ie.forEach(e=>{try{e(B)}catch(t){console.error("[DebugBorders] Error in listener:",t)}})}function q(e){return B===e?!0:e==="labels"&&!X()?(console.warn("[DebugBorders] Labels mode requires React Buoy Pro. Upgrade at https://buoy.gg/pro"),!1):(B=e,Io(),!0)}function Vo(){return B}function xe(){let e=Se(),t=e.indexOf(B);if(t===-1){q("off");return}let o=(t+1)%e.length;q(e[o])}function Ce(){q("borders")}function ve(){q("off")}function Mo(){xe()}function Do(){return B!=="off"}function Lo(){return B==="labels"&&X()}function No(){return X()}function Eo(){return Se()}function Bo(e){e?Ce():ve()}we.exports={subscribe:Ro,enable:Ce,disable:ve,toggle:Mo,cycle:xe,isEnabled:Do,showLabels:Lo,setEnabled:Bo,getMode:Vo,setMode:q,isProEnabled:No,getAvailableModes:Eo,MODE_CYCLE:wo}});import{getDOMNodeHandle as Ao,isDOMElement as Ie}from"@buoy-gg/shared-ui/web/utils";var K=H((Pn,Fe)=>{"use strict";d();function Z(){if(typeof globalThis>"u")return null;let e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;return e||null}function le(){let e=Z();if(!e)return[];if(!e.getFiberRoots)return[];let t=new Set,o=e.renderers?.keys?Array.from(e.renderers.keys()):[1];for(let n of o)try{e.getFiberRoots(n)?.forEach(r=>t.add(r))}catch{}return[...t]}var se={FunctionComponent:0,ClassComponent:1,IndeterminateComponent:2,HostRoot:3,HostPortal:4,HostComponent:5,HostText:6,Fragment:7,Mode:8,ContextConsumer:9,ContextProvider:10,ForwardRef:11,Profiler:12,SuspenseComponent:13,MemoComponent:14,SimpleMemoComponent:15,LazyComponent:16,IncompleteClassComponent:17,DehydratedFragment:18,SuspenseListComponent:19,ScopeComponent:21,OffscreenComponent:22,LegacyHiddenComponent:23,CacheComponent:24,TracingMarkerComponent:25},Ve=new Set(["FloatingTools","FloatingDevTools","FloatingMenu","DialDevTools","DevToolsVisibilityProvider","AppHostProvider","MinimizedToolsProvider","MinimizedToolsStack","GlitchToolButton","DefaultConfigProvider","JsModalComponent","JsModal","ModalHeader","DraggableHeader","DragIndicator","CornerHandle","WindowControls","HighlightUpdatesModal","HighlightUpdatesOverlay","HighlightFilterView","RenderDetailView","RenderListItem","RenderListItemInner","RenderHistoryViewer","RenderCauseBadge","DebugBordersStandaloneOverlay","DebugBordersModal","ImageOverlayModal","ImageOverlayStandalone","StorageBrowser","StorageModal","GameUIStorageBrowser","StorageEventListener","StorageEventFilterView","NetworkMonitor","NetworkModal","NetworkRequestList","NetworkRequestDetail","RouteEventsModal","RouteEventsList","EnvSwitcher","EnvSwitcherModal","TabSelector","SectionHeader","TypePicker","PatternInput","PatternChip","DetectedItemsSection","DetectedCategoryBadge","IdentifierBadge","CategoryBadge","AppRenderer","AppOverlay","ExpandablePopover","Divider","UserStatus","GripVerticalIcon","LogBox","LogBoxLog","LogBoxLogNotification","LogBoxNotificationContainer","_LogBoxNotificationContainer","LogBoxInspector","LogBoxInspectorContainer","LogBoxInspectorHeader","LogBoxInspectorBody","LogBoxInspectorFooter","LogBoxInspectorMessageHeader","LogBoxInspectorStackFrame","LogBoxInspectorSection","LogBoxButton","LogBoxMessage"]),Fo=["JsModal","HighlightUpdates","RenderList","RenderDetail","DebugBorders","ImageOverlay","Storage","Network","RouteEvents","EnvSwitcher","Floating","Minimized","Expandable","DevTools","GameUI"],Me=new Set(["debug-borders-overlay","floating-devtools-root","dial-devtools-root","jsmodal-root","highlight-updates-overlay","image-overlay-standalone","__rn_buoy__highlight-modal","logbox_inspector","logbox"]),G=new Map,Re=500;function Oo(e){let t=Ao(e);return t!==null?t:e?typeof e._nativeTag=="number"?e._nativeTag:typeof e.canonical?._nativeTag=="number"?e.canonical._nativeTag:typeof e.__nativeTag=="number"?e.__nativeTag:null:null}function ae(e){if(!e)return!1;if(Me.has(e))return!0;let t=e.charCodeAt(0);return!!(t===95&&(e.startsWith("__highlight_")||e.startsWith("__rn_buoy__"))||t===108&&e.startsWith("logbox"))}function De(e){if(!e)return null;let t=e.type;if(t){if(typeof t=="function")return t.displayName||t.name||null;if(typeof t=="string")return t;if(t.displayName)return t.displayName;if(t.name)return t.name}let o=e.elementType;if(o){if(typeof o=="function")return o.displayName||o.name||null;if(o.displayName)return o.displayName;if(o.name)return o.name}return null}function Le(e,t){if(Ie(t)&&t.closest("[data-buoy-root]"))return!0;let o=Oo(t);if(o!=null){let a=G.get(o);if(a!==void 0)return a}let n=!1,r=e.pendingProps?.nativeID||e.memoizedProps?.nativeID;if(ae(r))n=!0;else{let a=e,i=0;for(;a&&i<30;){let l=De(a);if(l){if(Ve.has(l)){n=!0;break}for(let c of Fo)if(l.startsWith(c)){n=!0;break}if(n)break}let s=a.pendingProps?.nativeID||a.memoizedProps?.nativeID;if(ae(s)){n=!0;break}a=a.return,i++}}if(n&&o!=null){if(G.size>=Re){let a=Array.from(G.keys());for(let i=0;i<Re/2;i++)G.delete(a[i])}G.set(o,n)}return n}function Po(){G.clear()}function Ne(e){return e.tag!==se.OffscreenComponent?!1:e.memoizedState!==null}function Ee(e){let t=e.memoizedProps;return t?t.activityState===0:!1}function Be(e){return Ie(e)?e.tagName.toLowerCase():e?e.canonical?.viewConfig?.uiViewClassName?e.canonical.viewConfig.uiViewClassName:e.viewConfig?.uiViewClassName?e.viewConfig.uiViewClassName:null:null}function Ae(e){let t=Be(e);return t?t.startsWith("RNSVG"):!1}function W(e,t,o=0,n=new Set){if(e&&!n.has(e)&&(n.add(e),!(o>500))){if(Ne(e)){e.sibling&&W(e.sibling,t,o,n);return}if(Ee(e)){e.sibling&&W(e.sibling,t,o,n);return}t(e,o),e.child&&W(e.child,t,o+1,n),e.sibling&&W(e.sibling,t,o,n)}}function Ho(){let e=le();if(e.length===0)return[];let t=[];return e.forEach((o,n)=>{W(o.current,(r,a)=>{if(r.tag===se.HostComponent){let i=r.stateNode;if(Le(r,i)||Ae(i))return;i&&t.push({instance:i,fiber:r,depth:a})}})}),t}function ko(){let e=Z();return!(!e||!e.getFiberRoots)}function _o(){let e=Z();return e?{available:!0,hasAgent:!!e.reactDevtoolsAgent,hasFiberRoots:typeof e.getFiberRoots=="function",rendererCount:e.renderers?.size??0,rootCount:le().length,hookKeys:Object.keys(e)}:{available:!1,reason:"Hook not found on global object"}}Fe.exports={getReactDevToolsHook:Z,getFiberRoots:le,traverseFiberTree:W,getAllHostComponentInstances:Ho,isReactDevToolsAvailable:ko,getReactDevToolsDiagnostics:_o,isHiddenOffscreen:Ne,isInactiveScreen:Ee,isSVGComponent:Ae,getNativeViewClassName:Be,isDevToolsComponent:Le,isDevToolsNativeID:ae,getComponentName:De,clearDevToolsCache:Po,FiberTags:se,DEV_TOOLS_COMPONENT_NAMES:Ve,DEV_TOOLS_NATIVE_IDS:Me}});var Ge={};ye(Ge,{VIEW_TYPE_MAP:()=>O,default:()=>Go,getAllComponentNames:()=>_e,getAllNativeViewTypes:()=>ke,getComponentDisplayName:()=>Oe,getNativeViewType:()=>Pe,isKnownViewType:()=>He});function Oe(e){return O[e]||e}function Pe(e){for(let[t,o]of Object.entries(O))if(o===e)return t;return null}function He(e){return e in O}function ke(){return Object.keys(O)}function _e(){return[...new Set(Object.values(O))]}var O,Go,We=me(()=>{"use strict";d();O={RCTView:"View",RCTSafeAreaView:"SafeAreaView",RCTModalHostView:"Modal",RCTText:"Text",RCTRawText:"RawText",RCTVirtualText:"VirtualText",RCTTextInlineImage:"TextInlineImage",RCTImageView:"Image",RCTImage:"Image",RCTScrollView:"ScrollView",RCTScrollContentView:"ScrollContentView",AndroidHorizontalScrollView:"HorizontalScrollView",AndroidHorizontalScrollContentView:"HorizontalScrollContentView",RCTSinglelineTextInputView:"TextInput",RCTMultilineTextInputView:"TextInput (Multiline)",AndroidTextInput:"TextInput",RCTInputAccessoryView:"InputAccessoryView",RCTRefreshControl:"RefreshControl",AndroidSwipeRefreshLayout:"RefreshControl",PullToRefreshView:"RefreshControl",RCTSwitch:"Switch",AndroidSwitch:"Switch",RCTSlider:"Slider",RCTActivityIndicatorView:"ActivityIndicator",AndroidProgressBar:"ActivityIndicator",AndroidDrawerLayout:"DrawerLayout",VirtualView:"VirtualView",VirtualViewExperimental:"VirtualView",DebuggingOverlay:"DebuggingOverlay",LayoutConformance:"LayoutConformance",UnimplementedNativeView:"UnimplementedView",RKShimmeringView:"ShimmeringView",RCTTemplateView:"TemplateView",RCTAxialGradientView:"AxialGradientView",RCTMap:"Map",RCTWebView:"WebView",RCTKeyframes:"Keyframes",RCTImpressionTrackingView:"ImpressionTrackingView",RNSVGSvgView:"Svg",RNSVGGroup:"G",RNSVGPath:"Path",RNSVGText:"SvgText",RNSVGTSpan:"TSpan",RNSVGTextPath:"TextPath",RNSVGImage:"SvgImage",RNSVGCircle:"Circle",RNSVGEllipse:"Ellipse",RNSVGLine:"Line",RNSVGRect:"Rect",RNSVGClipPath:"ClipPath",RNSVGDefs:"Defs",RNSVGUse:"Use",RNSVGSymbol:"Symbol",RNSVGPattern:"Pattern",RNSVGMask:"Mask",RNSVGForeignObject:"ForeignObject",RNSVGMarker:"Marker",RNSVGLinearGradient:"LinearGradient",RNSVGRadialGradient:"RadialGradient",RNSVGFilter:"Filter",RNSVGFeBlend:"FeBlend",RNSVGFeColorMatrix:"FeColorMatrix",RNSVGFeComposite:"FeComposite",RNSVGFeFlood:"FeFlood",RNSVGFeGaussianBlur:"FeGaussianBlur",RNSVGFeMerge:"FeMerge",RNSVGFeOffset:"FeOffset",RNSVGPolygon:"Polygon",RNSVGPolyline:"Polyline",RNSVGStop:"Stop",RNGestureHandlerRootView:"GestureHandlerRootView",RNGestureHandlerButton:"GestureHandlerButton",RNCSafeAreaProvider:"SafeAreaProvider",RNCSafeAreaView:"SafeAreaView",RNSScreen:"Screen",RNSScreenContainer:"ScreenContainer",RNSScreenStack:"ScreenStack",RNSScreenStackHeaderConfig:"ScreenStackHeaderConfig",RNSScreenStackHeaderSubview:"ScreenStackHeaderSubview",RNSSearchBar:"SearchBar",RNSFullWindowOverlay:"FullWindowOverlay",RNSModalScreen:"ModalScreen",ReanimatedView:"Animated.View",ExpoView:"ExpoView",ExpoBlurView:"BlurView",ExpoLinearGradient:"LinearGradient",ExpoImage:"ExpoImage",ExpoVideoView:"VideoView",ExpoCamera:"Camera",ExpoBarCodeScannerView:"BarCodeScanner",RNCWebView:"WebView",AIRMap:"MapView",AIRMapMarker:"Marker",AIRMapPolyline:"Polyline",AIRMapPolygon:"Polygon",AIRMapCircle:"Circle",AIRMapCallout:"Callout",RCTVideo:"Video",LottieAnimationView:"LottieView",FastImageView:"FastImage"};Go={VIEW_TYPE_MAP:O,getComponentDisplayName:Oe,getNativeViewType:Pe,isKnownViewType:He,getAllNativeViewTypes:ke,getAllComponentNames:_e}});var ce=H((_n,ze)=>{"use strict";d();var{getComponentDisplayName:Wo}=(We(),yt(Ge)),{getNativeViewClassName:zo,getComponentName:Uo}=K(),P={testID:{label:"test",color:"#10b981"},nativeID:{label:"native",color:"#f59e0b"},component:{label:"comp",color:"#a855f7"},accessibilityLabel:{label:"a11y",color:"#ec4899"},viewType:{label:"view",color:"#6b7280"}};function qo(e,t){let o=e.memoizedProps||e.pendingProps||{},n=zo(t)||"Unknown",r=Wo(n),a=Uo(e),i=o.testID||null,l=o.nativeID||null,s=o.accessibilityLabel||o.accessible?.label||null,c=o.accessibilityRole||o.role||null,b=o.accessibilityHint||null,R=o.accessibilityState||null,V=null;if(o.style)try{V=Array.isArray(o.style)?Object.assign({},...o.style.filter(Boolean)):o.style}catch{V=null}let M=e.tag,g=e.key,T=null,x=e.return;for(;x&&!(x.type&&typeof x.type=="function"&&(T=x.type.displayName||x.type.name||null,T));)x=x.return;let m={viewType:n,displayName:r,componentName:a,parentComponentName:T,testID:i,nativeID:l,accessibilityLabel:s,accessibilityRole:c,accessibilityHint:b,accessibilityState:R,fiberTag:M,fiberKey:g,styleInfo:V,primaryLabel:null,primaryType:null,primaryColor:null};return i?(m.primaryLabel=i,m.primaryType="testID",m.primaryColor=P.testID.color):s?(m.primaryLabel=s,m.primaryType="accessibilityLabel",m.primaryColor=P.accessibilityLabel.color):a?(m.primaryLabel=a,m.primaryType="component",m.primaryColor=P.component.color):l?(m.primaryLabel=l,m.primaryType="nativeID",m.primaryColor=P.nativeID.color):(m.primaryLabel=r,m.primaryType="viewType",m.primaryColor=P.viewType.color),m}function Ko(e,t=20){return e?e.length<=t?e:e.substring(0,t-1)+"\u2026":""}function jo(e){let t=P[e];return t?t.label+":":""}ze.exports={extractComponentInfo:qo,getShortLabel:Ko,getLabelPrefix:jo,IDENTIFIER_CONFIG:P}});var ue=H((Wn,Ke)=>{"use strict";d();var $o=null;try{$o=mt("./DebugInfo").addLog}catch{}function Ue(e){return new Promise(t=>{try{let o=e;if(e.canonical&&(e.canonical.publicInstance?o=e.canonical.publicInstance:o=e.canonical),typeof o.getBoundingClientRect=="function"){let n=o.getBoundingClientRect();if(n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.width=="number"&&typeof n.height=="number"&&n.width>=0&&n.height>=0){t({x:n.x,y:n.y,width:n.width,height:n.height});return}}if(typeof o.measure=="function"){let n=setTimeout(()=>{t(null)},100);o.measure((r,a,i,l,s,c)=>{clearTimeout(n),s!=null&&c!=null&&i!=null&&l!=null&&i>=0&&l>=0?t({x:s,y:c,width:i,height:l}):t(null)});return}t(null)}catch{t(null)}})}var{extractComponentInfo:Yo}=ce();async function Jo(e){return(await Promise.all(e.map(async({instance:n,fiber:r,depth:a})=>{let i=await Ue(n);if(i){let l=Yo(r,n);return{...i,depth:a,componentInfo:l}}return null}))).filter(n=>n!=null)}function qe(e){return{hasFabricBoundingRect:typeof e.getBoundingClientRect=="function",hasPaperMeasure:typeof e.measure=="function",hasNode:e.node!=null}}function Xo(e){let t={fabric:0,paper:0,none:0};return e.forEach(({instance:o})=>{let n=qe(o);n.hasFabricBoundingRect?t.fabric++:n.hasPaperMeasure?t.paper++:t.none++}),t}Ke.exports={measureInstance:Ue,measureInstances:Jo,getMeasurementCapabilities:qe,getMeasurementStats:Xo}});var pe=H((Un,$e)=>{"use strict";d();function fe(e,t,o){let n=e/360,r=t/100,a=o/100,i,l,s;if(r===0)i=l=s=a;else{let b=(M,g,T)=>(T<0&&(T+=1),T>1&&(T-=1),T<.16666666666666666?M+(g-M)*6*T:T<.5?g:T<.6666666666666666?M+(g-M)*(.6666666666666666-T)*6:M),R=a<.5?a*(1+r):a+r-a*r,V=2*a-R;i=b(V,R,n+1/3),l=b(V,R,n),s=b(V,R,n-1/3)}let c=b=>{let R=Math.round(b*255).toString(16);return R.length===1?"0"+R:R};return`#${c(i)}${c(l)}${c(s)}`}function je(e){let t=(0+e*137.508)%360;return fe(t,70,50)}function Zo(){let e=Math.random()*360;return fe(e,70,50)}function Qo(e){let t=[];for(let o=0;o<e;o++)t.push(je(o));return t}var de=["#FF5733","#33FF57","#3357FF","#FF33F5","#F5FF33","#33FFF5","#FF8333","#8333FF","#33FF83","#FF3383"];function en(e){return de[e%de.length]}function tn(e,t=1){let o=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return`rgba(${o}, ${n}, ${r}, ${t})`}function on(e){let t=parseInt(e.slice(1,3),16),o=parseInt(e.slice(3,5),16),n=parseInt(e.slice(5,7),16);return 255<<24|t<<16|o<<8|n}$e.exports={getColorForDepth:je,getRandomColor:Zo,generateColorPalette:Qo,getColorFromPalette:en,hslToHex:fe,hexToRgba:tn,hexToProcessColor:on,PREDEFINED_PALETTE:de}});var Ze=H((Kn,Xe)=>{"use strict";d();var A={LABEL_SPACING:0,MAX_VERTICAL_OFFSET:100,LABEL_HEIGHT:10,PADDING:0};function Ye(e,t){let o=A.PADDING,n=e.x-o,r=e.x+e.width+o,a=e.y-o,i=e.y+e.height+o,l=t.x-o,s=t.x+t.width+o,c=t.y-o,b=t.y+t.height+o;return!(r<l||n>s||i<c||a>b)}function Je(e){return e?e.length*5+8:0}function nn(e){if(!e||e.length===0)return e;let t=e.filter(a=>{let i=a.componentInfo;return i&&(i.testID||i.accessibilityLabel)}),o=e.map((a,i)=>{let l=a.componentInfo,s=l&&(l.testID||l.accessibilityLabel),c=s?l.primaryLabel:"",b=Je(c);return{index:i,hasValidLabel:s,x:a.x,y:a.y-A.LABEL_HEIGHT,width:b,height:A.LABEL_HEIGHT,offsetY:0}}),n=o.map((a,i)=>i).filter(a=>o[a].hasValidLabel).sort((a,i)=>{let l=e[a],s=e[i];return Math.abs(l.y-s.y)>10?l.y-s.y:l.x-s.x}),r=[];for(let a of n){let i=o[a];if(i.width===0)continue;let l=0,s=!0,c=0,b=Math.ceil(A.MAX_VERTICAL_OFFSET/A.LABEL_HEIGHT);for(;s&&c<b;){let R={x:i.x,y:i.y-l,width:i.width,height:i.height};s=r.some(V=>Ye(R,V)),s&&(l+=A.LABEL_HEIGHT,c++)}i.offsetY=l,r.push({x:i.x,y:i.y-l,width:i.width,height:i.height})}return e.map((a,i)=>({...a,labelOffsetY:o[i].offsetY}))}function rn(e){if(!e||e.length<2)return!1;for(let t=0;t<Math.min(e.length,20);t++)for(let o=t+1;o<Math.min(e.length,20);o++){let n=e[t],r=e[o];if(Math.abs(n.y-r.y)<A.LABEL_HEIGHT*2&&!(n.x+100<r.x||r.x+100<n.x))return!0}return!1}Xe.exports={resolveOverlappingLabels:nn,rectsOverlap:Ye,estimateLabelWidth:Je,mightHaveOverlaps:rn,CONFIG:A}});d();d();import{useState as it,useEffect as at}from"react";import{Layers as lt}from"@buoy-gg/shared-ui/web";d();import Qe,{useEffect as et,useState as Q,useCallback as tt}from"react";var p={};ye(p,{AccessibilityInfo:()=>Bt,ActivityIndicator:()=>Vt,Alert:()=>Lt,Animated:()=>At,AppRegistry:()=>Ot,AppState:()=>Pt,Appearance:()=>Ft,BackHandler:()=>Ht,Button:()=>Mt,CheckBox:()=>eo,Clipboard:()=>kt,DeviceEventEmitter:()=>yo,Dimensions:()=>_t,Easing:()=>Gt,FlatList:()=>to,I18nManager:()=>Wt,Image:()=>oo,ImageBackground:()=>no,InteractionManager:()=>Ut,Keyboard:()=>zt,KeyboardAvoidingView:()=>ro,LayoutAnimation:()=>qt,Linking:()=>Kt,LogBox:()=>mo,Modal:()=>Rt,NativeEventEmitter:()=>jt,NativeModules:()=>Et,PanResponder:()=>$t,Picker:()=>io,PixelRatio:()=>Yt,Platform:()=>Jt,Pressable:()=>vt,ProgressBar:()=>ao,RefreshControl:()=>lo,SafeAreaView:()=>so,ScrollView:()=>wt,SectionList:()=>co,Share:()=>Xt,StatusBar:()=>uo,StyleSheet:()=>F,Switch:()=>It,Text:()=>h,TextInput:()=>St,Touchable:()=>fo,TouchableHighlight:()=>xt,TouchableNativeFeedback:()=>po,TouchableOpacity:()=>k,TouchableWithoutFeedback:()=>Ct,UIManager:()=>Zt,Vibration:()=>Qt,View:()=>w,VirtualizedList:()=>bo,YellowBox:()=>go,findNodeHandle:()=>Dt,unstable_createElement:()=>Nt,useColorScheme:()=>ho,useLocaleContext:()=>To,useWindowDimensions:()=>So});d();y(p,Nn);import*as Nn from"react-native-web";import{unstable_createElement as Nt,NativeModules as Et,AccessibilityInfo as Bt,Animated as At,Appearance as Ft,AppRegistry as Ot,AppState as Pt,BackHandler as Ht,Clipboard as kt,Dimensions as _t,Easing as Gt,I18nManager as Wt,Keyboard as zt,InteractionManager as Ut,LayoutAnimation as qt,Linking as Kt,NativeEventEmitter as jt,PanResponder as $t,PixelRatio as Yt,Platform as Jt,Share as Xt,StyleSheet as F,UIManager as Zt,Vibration as Qt,CheckBox as eo,FlatList as to,Image as oo,ImageBackground as no,KeyboardAvoidingView as ro,Picker as io,ProgressBar as ao,RefreshControl as lo,SafeAreaView as so,SectionList as co,StatusBar as uo,Touchable as fo,TouchableNativeFeedback as po,VirtualizedList as bo,YellowBox as go,LogBox as mo,DeviceEventEmitter as yo,useColorScheme as ho,useLocaleContext as To,useWindowDimensions as So}from"react-native-web";import*as f from"react-native-web";import{createElement as ht,forwardRef as Tt}from"react";function L(e){let t=Tt((n,r)=>{let{accessibilityState:a,accessibilityValue:i,...l}=n;for(let s of["busy","checked","disabled","expanded","selected"])a?.[s]!==void 0&&l[`aria-${s}`]===void 0&&(l[`aria-${s}`]=a[s]);for(let[s,c]of Object.entries({min:"valuemin",max:"valuemax",now:"valuenow",text:"valuetext"}))i?.[s]!==void 0&&l[`aria-${c}`]===void 0&&(l[`aria-${c}`]=i[s]);return ht(e,{...l,ref:r})}),o=e.State;return o&&Object.assign(t,{State:o}),t.displayName=e.displayName??e.name??"NativeWebView",t}var w=L(f.View),h=L(f.Text),St=L(f.TextInput),k=L(f.TouchableOpacity),xt=L(f.TouchableHighlight),Ct=L(f.TouchableWithoutFeedback),vt=L(f.Pressable),wt=L(f.ScrollView),Rt=L(f.Modal),It=L(f.Switch),Vt=L(f.ActivityIndicator),Mt=L(f.Button),Dt=f.findNodeHandle,Lt={alert(e,t,o,n){if(typeof document>"u")return;let r=document.createElement("dialog");r.dataset.buoyRoot="",r.setAttribute("aria-label",e),r.style.cssText="position:fixed;inset:0;margin:auto;width:min(440px,90vw);padding:24px;border:1px solid #475569;border-radius:14px;background:#17212e;color:#f1f5f9;font:14px system-ui;box-shadow:0 20px 80px #0008;z-index:2147483647";let a=document.createElement("h2");if(a.textContent=e,a.style.cssText="font-size:18px;margin:0 0 12px",r.appendChild(a),t){let c=document.createElement("p");c.textContent=t,c.style.cssText="line-height:1.5;white-space:pre-wrap;margin:0 0 20px",r.appendChild(c)}let i=document.createElement("div");i.style.cssText="display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px";let l=o?.length?o:[{text:"OK"}],s=()=>{r.close?.(),r.remove()};for(let c of l){let b=document.createElement("button");b.type="button",b.textContent=c.text??"OK",b.style.cssText=`padding:9px 14px;border:1px solid #64748b;border-radius:7px;color:white;background:${c.style==="destructive"?"#a52b38":"#283a4d"};cursor:pointer;font:inherit`,b.onclick=()=>{s(),c.onPress?.()},i.appendChild(b)}r.addEventListener("cancel",c=>{c.preventDefault(),n?.cancelable!==!1&&(s(),n?.onDismiss?.())}),r.appendChild(i),document.body.appendChild(r),r.showModal?r.showModal():r.setAttribute("open","")}};import{monoFont as $}from"@buoy-gg/shared-ui/web";import{JsModal as ot,devToolsStorageKeys as an}from"@buoy-gg/shared-ui/web";import{DataViewer as ee}from"@buoy-gg/shared-ui/web/dataViewer";import{loadToolModule as ln}from"@buoy-gg/shared-ui/web/utils";import{Fragment as rt,jsx as u,jsxs as z}from"react/jsx-runtime";var sn=an.debugBorders.infoModal(),cn=_(),{getAllHostComponentInstances:un}=K(),{measureInstances:dn}=ue(),{getColorForDepth:fn}=pe(),{getShortLabel:er}=ce(),{resolveOverlappingLabels:pn}=Ze(),j;function bn(){if(j!==void 0)return j;try{j=ln("@buoy-gg/core").useDevToolsVisibility??null}catch{j=null}return j??null}function v({label:e,value:t,color:o}){if(t==null)return null;let n;if(typeof t=="object")try{n=JSON.stringify(t,null,2)}catch{n=String(t)}else n=String(t);return z(w,{style:N.row,children:[u(h,{style:N.label,children:e}),u(h,{style:[N.value,o?{color:o}:null],children:n})]})}function gn({title:e}){return u(w,{style:nt.container,children:u(h,{style:nt.title,numberOfLines:1,children:e})})}function mn({info:e,rect:t}){return z(w,{style:N.content,children:[u(h,{style:N.sectionTitle,children:"Identifiers"}),u(v,{label:"testID",value:e.testID,color:"#10b981"}),u(v,{label:"accessibilityLabel",value:e.accessibilityLabel,color:"#ec4899"}),u(v,{label:"nativeID",value:e.nativeID,color:"#f59e0b"}),u(v,{label:"key",value:e.fiberKey}),u(h,{style:N.sectionTitle,children:"Component"}),u(v,{label:"Component Name",value:e.componentName,color:"#a855f7"}),u(v,{label:"Parent Component",value:e.parentComponentName}),u(v,{label:"Display Name",value:e.displayName}),u(v,{label:"Native View Type",value:e.viewType}),u(v,{label:"Fiber Tag",value:e.fiberTag}),u(h,{style:N.sectionTitle,children:"Position & Size"}),u(v,{label:"X",value:Math.round(t.x)}),u(v,{label:"Y",value:Math.round(t.y)}),u(v,{label:"Width",value:Math.round(t.width)}),u(v,{label:"Height",value:Math.round(t.height)}),u(v,{label:"Depth",value:t.depth}),(e.accessibilityRole||e.accessibilityHint||e.accessibilityState)&&z(rt,{children:[u(h,{style:N.sectionTitle,children:"Accessibility"}),u(v,{label:"Role",value:e.accessibilityRole}),u(v,{label:"Hint",value:e.accessibilityHint}),e.accessibilityState&&ee?u(ee,{title:"",data:e.accessibilityState,showTypeFilter:!0,rawMode:!0,initialExpanded:!0}):u(v,{label:"State",value:e.accessibilityState})]}),e.styleInfo&&z(rt,{children:[u(h,{style:N.sectionTitle,children:"Styles"}),ee?u(ee,{title:"",data:e.styleInfo,showTypeFilter:!0,rawMode:!0,initialExpanded:!0}):u(w,{style:N.codeBlock,children:u(h,{style:N.codeText,children:JSON.stringify(e.styleInfo,null,2)})})]})]})}function yn(){let[e,t]=Q("off"),[o,n]=Q([]),[r,a]=Q(null),[i,l]=Q(!1),s=Qe.useRef(!1),c=bn()?.()?.isDevToolsActive??!1,b=tt(g=>{a(g),l(!0)},[]),R=tt(()=>{l(!1),a(null)},[]),V=e!=="off"&&!c,M=e==="labels"&&!c;return et(()=>cn.subscribe(T=>{t(T)}),[]),et(()=>{if(!V){n([]);return}let g=!0,T,x=async()=>{if(!(!g||s.current)){s.current=!0;try{let E=un();if(E.length===0){s.current=!1;return}let ge=await dn(E);if(g){let ft=M?pn(ge):ge;n(ft)}}catch(E){console.error("[DebugBorders] Error updating measurements:",E)}finally{s.current=!1}}},m=setTimeout(()=>{x()},500);return T=setInterval(x,2e3),()=>{g=!1,clearTimeout(m),clearInterval(T),s.current=!1}},[V,M,o.length]),V?z(w,{style:te.overlay,pointerEvents:"box-none",dataSet:{debugOverlay:"true"},nativeID:"debug-borders-overlay",children:[o.map((g,T)=>{let x=g.componentInfo,m=x&&(x.testID||x.accessibilityLabel);if(M&&!m)return null;let E=M&&x?x.primaryColor:fn(g.depth);return z(Qe.Fragment,{children:[u(w,{pointerEvents:"none",style:[te.border,{left:g.x,top:g.y,width:g.width,height:g.height,borderColor:E}]}),M&&m&&u(k,{activeOpacity:.7,onPress:()=>b(g),style:[te.labelContainer,{left:g.x,top:g.y-10-(g.labelOffsetY||0),backgroundColor:x.primaryColor}],children:u(h,{style:te.labelText,numberOfLines:1,children:x.primaryLabel})})]},`border-${T}`)}),ot&&r?.componentInfo&&u(ot,{visible:i,onClose:R,initialMode:"bottomSheet",header:{customContent:u(gn,{title:r.componentInfo.primaryLabel})},persistenceKey:sn,enablePersistence:!1,children:u(mn,{info:r.componentInfo,rect:r})})]}):null}var te=F.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:9e3,elevation:9e3},border:{position:"absolute",borderWidth:1,borderStyle:"solid"},labelContainer:{position:"absolute",paddingHorizontal:4,paddingVertical:1,borderRadius:2},labelText:{fontSize:8,fontWeight:"700",fontFamily:$,color:"#ffffff"}}),nt=F.create({container:{paddingHorizontal:16,paddingVertical:8,alignItems:"center"},title:{fontSize:16,fontWeight:"600",color:"#ffffff",fontFamily:$}}),N=F.create({content:{padding:16},sectionTitle:{fontSize:12,fontWeight:"700",color:"#6b7280",marginTop:16,marginBottom:8,textTransform:"uppercase",letterSpacing:1},row:{flexDirection:"row",paddingVertical:8,borderBottomWidth:1,borderBottomColor:"rgba(255, 255, 255, 0.1)"},label:{fontSize:13,color:"#9ca3af",width:140,fontFamily:$},value:{fontSize:13,color:"#ffffff",flex:1,fontFamily:$},codeBlock:{backgroundColor:"rgba(0, 0, 0, 0.3)",padding:12,borderRadius:8,marginTop:4},codeText:{fontSize:11,color:"#e5e7eb",fontFamily:$}});import{jsx as ct}from"react/jsx-runtime";var U=_(),hn={off:"#6b7280",borders:"#10b981",labels:"#06b6d4"};function Tn({size:e}){let[t,o]=it(()=>U.getMode());return at(()=>U.subscribe(r=>{o(r)}),[]),ct(lt,{size:e,color:hn[t]})}function st(){return null}var Sn={id:"debug-borders",name:"BORDERS",description:"Visual layout debugger - tap to cycle modes",slot:"row",icon:Tn,component:st,props:{},launchMode:"toggle-only",onPress:()=>{U.cycle()}};function xn(e){let t={off:e?.offColor||"#6b7280",borders:e?.bordersColor||"#10b981",labels:e?.labelsColor||"#06b6d4"},o=({size:n})=>{let[r,a]=it(()=>U.getMode());return at(()=>U.subscribe(l=>{a(l)}),[]),ct(lt,{size:n,color:t[r]})};return{id:e?.id||"debug-borders",name:e?.name||"BORDERS",description:e?.description||"Visual layout debugger - tap to cycle modes",slot:"row",icon:o,component:st,props:{},launchMode:"toggle-only",onPress:()=>{U.cycle()}}}d();var oe=_(),Cn={version:1,getSnapshot:()=>({mode:oe.getMode()}),subscribe:e=>oe.subscribe(e),actions:{cycleMode:()=>{oe.cycle()},setMode:e=>{oe.setMode(e.mode)}}};d();d();import{useEffect as ut,useState as dt}from"react";import{night as S,Layers as vn,StatusBadge as wn,StatusIndicator as Rn}from"@buoy-gg/shared-ui/web";import{jsx as I,jsxs as Y}from"react/jsx-runtime";var be=_();function In({visible:e,onClose:t}){let[o,n]=dt(!1),[r,a]=dt(0);ut(()=>{let l=be.subscribe(n);return n(be.isEnabled()),l},[]),ut(()=>{if(!o){a(0);return}let l=()=>{try{let{getAllHostComponentInstances:c}=K(),b=c();a(b.length)}catch(c){console.error("[DebugBorders] Error getting component count:",c)}};setTimeout(l,600);let s=setInterval(l,2e3);return()=>clearInterval(s)},[o]);let i=()=>{be.toggle()};return e?I(w,{style:C.container,children:Y(w,{style:C.content,children:[I(h,{style:C.title,children:"Debug Borders"}),I(h,{style:C.description,children:"Visualize component layout structure with colored borders"}),Y(w,{style:C.statusRow,children:[I(h,{style:C.statusLabel,children:"Status:"}),I(wn,{status:o?"active":"inactive"})]}),o&&r>0&&Y(w,{style:C.statsRow,children:[I(h,{style:C.statsLabel,children:"Components Tracked:"}),I(h,{style:C.statsValue,children:r})]}),I(w,{style:C.toggleContainer,children:Y(k,{style:[C.button,o&&C.buttonActive],onPress:i,accessibilityRole:"button",accessibilityLabel:`Debug borders ${o?"enabled":"disabled"}`,accessibilityHint:"Tap to toggle debug borders",children:[I(vn,{size:40,color:o?S.color.accent:S.color.textSecondary}),I(h,{style:[C.buttonText,o&&C.buttonTextActive],children:o?"Disable Borders":"Enable Borders"})]})}),Y(w,{style:C.infoBox,children:[I(Rn,{status:o?"success":"info",size:"small"}),I(h,{style:C.infoText,children:o?"Borders update every 2 seconds. Tap button to disable.":"Tap button to show colored borders around all components."})]}),I(k,{style:C.closeButton,onPress:t,children:I(h,{style:C.closeButtonText,children:"Close"})})]})}):null}var C=F.create({container:{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"rgba(0, 0, 0, 0.5)"},content:{backgroundColor:S.color.surface,borderWidth:1,borderColor:S.color.border,borderRadius:16,padding:32,width:"85%",maxWidth:420,alignItems:"center"},title:{fontSize:24,fontWeight:"700",color:S.color.text,marginBottom:8},description:{fontSize:14,color:S.color.textSecondary,textAlign:"center",marginBottom:24},statusRow:{flexDirection:"row",alignItems:"center",marginBottom:16,gap:8},statusLabel:{fontSize:14,color:S.color.textSecondary,fontWeight:"600"},statsRow:{flexDirection:"row",alignItems:"center",marginBottom:16,gap:8},statsLabel:{fontSize:14,color:S.color.textSecondary,fontWeight:"600"},statsValue:{fontSize:16,color:S.color.text,fontWeight:"700"},toggleContainer:{alignItems:"center",justifyContent:"center",marginBottom:24},button:{alignItems:"center",justifyContent:"center",padding:24,borderRadius:16,backgroundColor:S.color.surfaceElevated,borderWidth:2,borderColor:S.color.border,minWidth:200},buttonActive:{borderColor:S.color.accentBorderStrong,backgroundColor:S.color.accentSoft},buttonText:{marginTop:12,fontSize:16,fontWeight:"600",color:S.color.textSecondary},buttonTextActive:{color:S.color.accent},infoBox:{flexDirection:"row",alignItems:"flex-start",backgroundColor:S.color.surfaceElevated,padding:12,borderRadius:8,marginBottom:24,gap:8},infoText:{flex:1,fontSize:12,color:S.color.textSecondary,lineHeight:16},closeButton:{paddingVertical:12,paddingHorizontal:32,backgroundColor:S.color.accent,borderRadius:8},closeButtonText:{color:S.color.onAccent,fontSize:16,fontWeight:"600"}});var Tr=_(),Sr=K(),xr=ue(),Cr=pe();export{Tr as DebugBordersManager,In as DebugBordersModal,yn as DebugBordersStandaloneOverlay,Cr as colorGeneration,xr as componentMeasurement,xn as createDebugBordersTool,Cn as debugBordersSyncAdapter,Sn as debugBordersToolPreset,Sr as fiberTreeTraversal};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/debug-borders",
-  "version": "7.0.39",
+  "version": "7.0.41",
   "description": "Layout debugging borders for React Native — depth-colored, touch-through, tap any label to inspect testIDs & styles. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -10,35 +10,45 @@
   "exports": {
     ".": {
       "react-native": "./lib/module/index.js",
+      "browser": {
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/web/index.mjs"
+      },
       "import": {
-        "default": "./lib/module/index.js",
-        "types": "./lib/typescript/index.d.ts"
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/module/index.js"
       },
       "require": {
-        "default": "./lib/commonjs/index.js",
-        "types": "./lib/typescript/index.d.ts"
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/commonjs/index.js"
       }
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./web": {
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/web/index.mjs"
+    }
   },
   "files": [
     "lib"
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/core": "^7.0.39",
-    "@buoy-gg/shared-ui": "^7.0.39"
+    "@buoy-gg/core": "^7.0.41",
+    "@buoy-gg/shared-ui": "^7.0.41"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "@buoy-gg/license": "7.0.39"
+    "@buoy-gg/license": "7.0.41",
+    "react-native-web": "^0.21.0",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
     "@types/react-native": "^0.73.0",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "^7.0.39"
+    "@buoy-gg/license": "^7.0.41"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -88,10 +98,22 @@
     "borders",
     "ui-debugging"
   ],
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-web": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "scripts": {
-    "build": "bob build",
+    "build": "bob build && pnpm run build:web",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf lib",
-    "test": "pnpm run typecheck"
+    "test": "pnpm run typecheck",
+    "build:web": "node ../../scripts/build-web.mjs debug-borders"
   }
 }