@buoy-gg/debug-borders 7.0.40 → 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,66 +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.
+Tap the Borders icon in the menu to cycle through off, borders and labels.
 
-## 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.
-
-## 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)
+<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"}});