@buoy-gg/debug-borders 7.0.41 → 7.0.42

package/README.md

@@ -1,12 +1,14 @@
+<div align="center">
+
 # @buoy-gg/debug-borders
 
-[![npm version](https://img.shields.io/npm/v/@buoy-gg/debug-borders?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/debug-borders) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/debug-borders?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/debug-borders)
+Show layout borders and component labels over your React Native app. Tap a label to inspect the component's available properties.
 
-Show layout borders and component labels over your React Native app. Tap a label to inspect the component’s available properties.
+<a href="https://buoy.gg/buoy/latest/docs/tools/debug-borders"><b>Debug Borders guide</b></a> &nbsp;·&nbsp; <a href="https://buoy.gg">buoy.gg</a> &nbsp;·&nbsp; <a href="https://github.com/Buoy-gg/buoy">All tools</a>
 
-Part of [Buoy](https://github.com/Buoy-gg/buoy). Install the package, complete account setup, and follow the integration steps below.
+[![npm version](https://img.shields.io/npm/v/@buoy-gg/debug-borders?style=flat-square&labelColor=10302a&color=2a9d78)](https://www.npmjs.com/package/@buoy-gg/debug-borders) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/debug-borders?style=flat-square&labelColor=10302a&color=2a9d78&label=downloads%2Fmonth)](https://www.npmjs.com/package/@buoy-gg/debug-borders)
 
-![Debug Borders demo](https://github.com/user-attachments/assets/945fdb5d-2546-442d-98e7-ef73231abbba)
+</div>
 
 ## Install
 
@@ -14,70 +16,10 @@ Part of [Buoy](https://github.com/Buoy-gg/buoy). Install the package, complete a
 npm install @buoy-gg/core @buoy-gg/debug-borders
 ```
 
-## Before you start
-
-Use a development build with `@buoy-gg/core` and a Free or Pro Buoy account key. From your app’s directory, sign in:
-
-```bash
-npx --package=@buoy-gg/core buoy login
-```
-
-For Expo, initialize Buoy before rendering the menu:
-
-```tsx
-import { Buoy } from "@buoy-gg/core";
-
-Buoy.init({ licenseKey: process.env.EXPO_PUBLIC_BUOY_KEY });
-```
-
-The login command writes the Expo key to `.env.local`. For React Native CLI, pass the key from your app’s environment configuration; React Native does not load `.env.local` automatically. Mount `FloatingDevTools` inside the same providers as your screens and restart the development server after installation. The [Quick Start](https://buoy.gg/buoy/latest/docs/quick-start) shows the complete root component setup.
-
-## Quick start
-
-```tsx
-import { FloatingDevTools } from "@buoy-gg/core";
-
-export default function App() {
-  return (
-    <>
-      <YourApp />
-      <FloatingDevTools />
-    </>
-  );
-}
-```
-
-Tap the BORDERS icon in the floating menu to cycle Off → Borders → Labels.
-
-Want your own naming or colors? Build the tool with `createDebugBordersTool({ name: "LAYOUT", bordersColor: "#ec4899", ... })` and pass it to `FloatingDevTools` via the `apps` array.
-
-## Check the integration
-
-Enable borders on a known screen, then tap a component label and inspect its properties. Border drawing and label interaction differ: the labels are intentionally tappable.
-
-## What you get
-
-- **Depth-colored borders** — rainbow borders on every component, colored by depth in the tree, fully touch-through so they never block interaction.
-- **Labels mode** — filters down to components with a `testID` or `accessibilityLabel`: green = testID, pink = accessibilityLabel. Labels sit above their boxes and stack automatically when they overlap.
-- **Tap to inspect** — tap any label for the component's `testID`, `accessibilityLabel`, `nativeID`, key, accessibility props, full computed styles, and exact position and size.
-- **Answers real questions on-device** — "what testID does QA need for this button?" or "which component owns this padding?" without leaving the phone.
-- **Stays out of the way** — borders auto-hide on inactive screens in stack navigators and whenever a DevTools modal is open, and they track layout changes automatically.
-- **Works everywhere** — Expo and React Native CLI, Fabric (New Architecture) and Paper.
+Tap the Borders icon in the menu to cycle through off, borders and labels.
 
-## Desktop & AI
-
-To connect a React Native app to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) or MCP, install `@buoy-gg/external-sync` and follow the [Desktop connection guide](https://buoy.gg/buoy/latest/docs/desktop). Sign in to Desktop separately. [MCP setup](https://buoy.gg/buoy/latest/docs/mcp) also requires a process account and Pro access. Available remote actions depend on the tool and app integration.
-
-## Account and plan requirements
-
-Use a Free or Pro Buoy account. History limits and paid features vary by tool; see [pricing](https://buoy.gg/pricing). Production access requires Pro where supported. Development-only hooks and actions remain unavailable in release builds.
+The [Debug Borders guide](https://buoy.gg/buoy/latest/docs/tools/debug-borders) covers setup, what it captures and its limits. New to Buoy? Start with the [Quick start](https://buoy.gg/buoy/latest/docs/quick-start).
 
 ---
 
-📚 [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.
+<sub>Part of <a href="https://buoy.gg">Buoy</a>, developer tools that live inside your app. Proprietary software. © Buoy LLC. <a href="https://buoy.gg/terms">Terms</a></sub>

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

@@ -1,236 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DebugBordersModal = DebugBordersModal;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-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); }
-const DebugBordersManager = require("../utils/DebugBordersManager");
-
-/**
- * Modal component for controlling debug borders.
- * This allows developers to toggle visual layout debugging borders on/off.
- */
-function DebugBordersModal({
-  visible,
-  onClose
-}) {
-  const [enabled, setEnabled] = (0, _react.useState)(false);
-  const [componentCount, setComponentCount] = (0, _react.useState)(0);
-
-  // Subscribe to manager state
-  (0, _react.useEffect)(() => {
-    const unsubscribe = DebugBordersManager.subscribe(setEnabled);
-    setEnabled(DebugBordersManager.isEnabled());
-    return unsubscribe;
-  }, []);
-
-  // Track component count when enabled
-  (0, _react.useEffect)(() => {
-    if (!enabled) {
-      setComponentCount(0);
-      return;
-    }
-
-    // Update component count periodically
-    const updateCount = () => {
-      try {
-        const {
-          getAllHostComponentInstances
-        } = require("../utils/fiberTreeTraversal");
-        const instances = getAllHostComponentInstances();
-        setComponentCount(instances.length);
-      } catch (error) {
-        console.error("[DebugBorders] Error getting component count:", error);
-      }
-    };
-
-    // Initial count
-    setTimeout(updateCount, 600);
-
-    // Update every 2 seconds
-    const interval = setInterval(updateCount, 2000);
-    return () => clearInterval(interval);
-  }, [enabled]);
-  const handleToggle = () => {
-    DebugBordersManager.toggle();
-  };
-  if (!visible) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.container,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.content,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.title,
-        children: "Debug Borders"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.description,
-        children: "Visualize component layout structure with colored borders"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.statusRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.statusLabel,
-          children: "Status:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.StatusBadge, {
-          status: enabled ? "active" : "inactive"
-        })]
-      }), enabled && componentCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.statsRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.statsLabel,
-          children: "Components Tracked:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.statsValue,
-          children: componentCount
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.toggleContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.button, enabled && styles.buttonActive],
-          onPress: handleToggle,
-          accessibilityRole: "button",
-          accessibilityLabel: `Debug borders ${enabled ? "enabled" : "disabled"}`,
-          accessibilityHint: "Tap to toggle debug borders",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Layers, {
-            size: 40,
-            color: enabled ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.buttonText, enabled && styles.buttonTextActive],
-            children: enabled ? "Disable Borders" : "Enable Borders"
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.infoBox,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.StatusIndicator, {
-          status: enabled ? "success" : "info",
-          size: "small"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.infoText,
-          children: enabled ? "Borders update every 2 seconds. Tap button to disable." : "Tap button to show colored borders around all components."
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: styles.closeButton,
-        onPress: onClose,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.closeButtonText,
-          children: "Close"
-        })
-      })]
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "rgba(0, 0, 0, 0.5)"
-  },
-  content: {
-    backgroundColor: _sharedUi.night.color.surface,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    borderRadius: 16,
-    padding: 32,
-    width: "85%",
-    maxWidth: 420,
-    alignItems: "center"
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: "700",
-    color: _sharedUi.night.color.text,
-    marginBottom: 8
-  },
-  description: {
-    fontSize: 14,
-    color: _sharedUi.night.color.textSecondary,
-    textAlign: "center",
-    marginBottom: 24
-  },
-  statusRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 16,
-    gap: 8
-  },
-  statusLabel: {
-    fontSize: 14,
-    color: _sharedUi.night.color.textSecondary,
-    fontWeight: "600"
-  },
-  statsRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 16,
-    gap: 8
-  },
-  statsLabel: {
-    fontSize: 14,
-    color: _sharedUi.night.color.textSecondary,
-    fontWeight: "600"
-  },
-  statsValue: {
-    fontSize: 16,
-    color: _sharedUi.night.color.text,
-    fontWeight: "700"
-  },
-  toggleContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: 24
-  },
-  button: {
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 24,
-    borderRadius: 16,
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderWidth: 2,
-    borderColor: _sharedUi.night.color.border,
-    minWidth: 200
-  },
-  buttonActive: {
-    borderColor: _sharedUi.night.color.accentBorderStrong,
-    backgroundColor: _sharedUi.night.color.accentSoft
-  },
-  buttonText: {
-    marginTop: 12,
-    fontSize: 16,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textSecondary
-  },
-  buttonTextActive: {
-    color: _sharedUi.night.color.accent
-  },
-  infoBox: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    padding: 12,
-    borderRadius: 8,
-    marginBottom: 24,
-    gap: 8
-  },
-  infoText: {
-    flex: 1,
-    fontSize: 12,
-    color: _sharedUi.night.color.textSecondary,
-    lineHeight: 16
-  },
-  closeButton: {
-    paddingVertical: 12,
-    paddingHorizontal: 32,
-    backgroundColor: _sharedUi.night.color.accent,
-    borderRadius: 8
-  },
-  closeButtonText: {
-    color: _sharedUi.night.color.onAccent,
-    fontSize: 16,
-    fontWeight: "600"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.DebugBordersModal=DebugBordersModal;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(l,a){if("function"==typeof WeakMap)var e=new WeakMap,c=new WeakMap;return(_interopRequireWildcard=function(t,s){if(!s&&t&&t.__esModule)return t;var n,r,i={__proto__:null,default:t};if(null===t||"object"!=typeof t&&"function"!=typeof t)return i;if(n=s?c:e){if(n.has(t))return n.get(t);n.set(t,i)}for(const o in t)"default"!==o&&{}.hasOwnProperty.call(t,o)&&((r=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(t,o))&&(r.get||r.set)?n(i,o,r):i[o]=t[o]);return i})(l,a)}const DebugBordersManager=require("../utils/DebugBordersManager");function DebugBordersModal({visible:l,onClose:a}){const[e,c]=(0,_react.useState)(false);const[t,s]=(0,_react.useState)(0);(0,_react.useEffect)(()=>{const r=DebugBordersManager.subscribe(c);c(DebugBordersManager.isEnabled());return r},[]);(0,_react.useEffect)(()=>{if(!e){s(0);return}const r=()=>{try{const{getAllHostComponentInstances:o}=require("../utils/fiberTreeTraversal");const u=o();s(u.length)}catch(o){console.error("[DebugBorders] Error getting component count:",o)}};setTimeout(r,600);const i=setInterval(r,2e3);return()=>clearInterval(i)},[e]);const n=()=>{DebugBordersManager.toggle()};if(!l)return null;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.content,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.title,children:"Debug Borders"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.description,children:"Visualize component layout structure with colored borders"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.statusRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statusLabel,children:"Status:"}),(0,_jsxRuntime.jsx)(_sharedUi.StatusBadge,{status:e?"active":"inactive"})]}),e&&t>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.statsRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statsLabel,children:"Components Tracked:"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statsValue,children:t})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.toggleContainer,children:(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.button,e&&styles.buttonActive],onPress:n,accessibilityRole:"button",accessibilityLabel:`Debug borders ${e?"enabled":"disabled"}`,accessibilityHint:"Tap to toggle debug borders",children:[(0,_jsxRuntime.jsx)(_sharedUi.Layers,{size:40,color:e?_sharedUi.night.color.accent:_sharedUi.night.color.textSecondary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.buttonText,e&&styles.buttonTextActive],children:e?"Disable Borders":"Enable Borders"})]})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoBox,children:[(0,_jsxRuntime.jsx)(_sharedUi.StatusIndicator,{status:e?"success":"info",size:"small"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.infoText,children:e?"Borders update every 2 seconds. Tap button to disable.":"Tap button to show colored borders around all components."})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.closeButton,onPress:a,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.closeButtonText,children:"Close"})})]})})}const styles=_reactNative.StyleSheet.create({container:{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"rgba(0, 0, 0, 0.5)"},content:{backgroundColor:_sharedUi.night.color.surface,borderWidth:1,borderColor:_sharedUi.night.color.border,borderRadius:16,padding:32,width:"85%",maxWidth:420,alignItems:"center"},title:{fontSize:24,fontWeight:"700",color:_sharedUi.night.color.text,marginBottom:8},description:{fontSize:14,color:_sharedUi.night.color.textSecondary,textAlign:"center",marginBottom:24},statusRow:{flexDirection:"row",alignItems:"center",marginBottom:16,gap:8},statusLabel:{fontSize:14,color:_sharedUi.night.color.textSecondary,fontWeight:"600"},statsRow:{flexDirection:"row",alignItems:"center",marginBottom:16,gap:8},statsLabel:{fontSize:14,color:_sharedUi.night.color.textSecondary,fontWeight:"600"},statsValue:{fontSize:16,color:_sharedUi.night.color.text,fontWeight:"700"},toggleContainer:{alignItems:"center",justifyContent:"center",marginBottom:24},button:{alignItems:"center",justifyContent:"center",padding:24,borderRadius:16,backgroundColor:_sharedUi.night.color.surfaceElevated,borderWidth:2,borderColor:_sharedUi.night.color.border,minWidth:200},buttonActive:{borderColor:_sharedUi.night.color.accentBorderStrong,backgroundColor:_sharedUi.night.color.accentSoft},buttonText:{marginTop:12,fontSize:16,fontWeight:"600",color:_sharedUi.night.color.textSecondary},buttonTextActive:{color:_sharedUi.night.color.accent},infoBox:{flexDirection:"row",alignItems:"flex-start",backgroundColor:_sharedUi.night.color.surfaceElevated,padding:12,borderRadius:8,marginBottom:24,gap:8},infoText:{flex:1,fontSize:12,color:_sharedUi.night.color.textSecondary,lineHeight:16},closeButton:{paddingVertical:12,paddingHorizontal:32,backgroundColor:_sharedUi.night.color.accent,borderRadius:8},closeButtonText:{color:_sharedUi.night.color.onAccent,fontSize:16,fontWeight:"600"}});