@buoy-gg/debug-borders 7.0.40 → 7.0.42

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

@@ -1,469 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DebugBordersStandaloneOverlay = DebugBordersStandaloneOverlay;
-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); }
-/**
- * Standalone Debug Borders Overlay
- *
- * This component renders debug borders independently of the Provider.
- * It should be rendered at the root level of the app to ensure it appears on top.
- *
- * Supports two display modes:
- * - "borders" - Shows colored borders only
- * - "labels" - Shows colored borders with component labels
- *
- * 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 DebugBordersManager = require("../utils/DebugBordersManager");
-const {
-  getAllHostComponentInstances
-} = require("../utils/fiberTreeTraversal");
-const {
-  measureInstances
-} = require("../utils/componentMeasurement");
-const {
-  getColorForDepth
-} = require("../utils/colorGeneration");
-const {
-  getShortLabel
-} = require("../utils/componentInfo");
-const {
-  resolveOverlappingLabels
-} = require("../utils/labelPositioning");
-
-// Import DevToolsVisibility context to detect when DevTools are open.
-//
-// Resolved lazily (on first render) instead of at module load to avoid a
-// require cycle: @buoy-gg/core -> FloatingDevTools -> autoExternalSync ->
-// @buoy-gg/debug-borders -> preset -> this file -> @buoy-gg/core.
-// Deferring the require breaks the cycle while keeping the optional dependency.
-
-let useDevToolsVisibility;
-function resolveUseDevToolsVisibility() {
-  if (useDevToolsVisibility !== undefined) {
-    return useDevToolsVisibility;
-  }
-  try {
-    // Optional import - will gracefully fail if not available
-    const coreModule = require("@buoy-gg/core");
-    useDevToolsVisibility = coreModule.useDevToolsVisibility ?? null;
-  } catch (e) {
-    // DevToolsVisibility not available, that's ok - borders will always work
-    useDevToolsVisibility = null;
-  }
-  return useDevToolsVisibility ?? null;
-}
-// Row component for displaying info
-function InfoRow({
-  label,
-  value,
-  color
-}) {
-  if (value === null || value === undefined) return null;
-  let displayValue;
-  if (typeof value === "object") {
-    try {
-      displayValue = JSON.stringify(value, null, 2);
-    } catch {
-      displayValue = String(value);
-    }
-  } else {
-    displayValue = String(value);
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: modalStyles.row,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: modalStyles.label,
-      children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [modalStyles.value, color ? {
-        color
-      } : null],
-      children: displayValue
-    })]
-  });
-}
-
-// Simple header with just title (no hints)
-function SimpleHeader({
-  title
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: headerStyles.container,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: headerStyles.title,
-      numberOfLines: 1,
-      children: title
-    })
-  });
-}
-
-// Component Info Modal Content
-function ComponentInfoContent({
-  info,
-  rect
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: modalStyles.content,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: modalStyles.sectionTitle,
-      children: "Identifiers"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "testID",
-      value: info.testID,
-      color: "#10b981"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "accessibilityLabel",
-      value: info.accessibilityLabel,
-      color: "#ec4899"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "nativeID",
-      value: info.nativeID,
-      color: "#f59e0b"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "key",
-      value: info.fiberKey
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: modalStyles.sectionTitle,
-      children: "Component"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "Component Name",
-      value: info.componentName,
-      color: "#a855f7"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "Parent Component",
-      value: info.parentComponentName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "Display Name",
-      value: info.displayName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "Native View Type",
-      value: info.viewType
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "Fiber Tag",
-      value: info.fiberTag
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: modalStyles.sectionTitle,
-      children: "Position & Size"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "X",
-      value: Math.round(rect.x)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "Y",
-      value: Math.round(rect.y)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "Width",
-      value: Math.round(rect.width)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "Height",
-      value: Math.round(rect.height)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-      label: "Depth",
-      value: rect.depth
-    }), (info.accessibilityRole || info.accessibilityHint || info.accessibilityState) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: modalStyles.sectionTitle,
-        children: "Accessibility"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-        label: "Role",
-        value: info.accessibilityRole
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-        label: "Hint",
-        value: info.accessibilityHint
-      }), info.accessibilityState && DataViewer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DataViewer, {
-        title: "",
-        data: info.accessibilityState,
-        showTypeFilter: true,
-        rawMode: true,
-        initialExpanded: true
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
-        label: "State",
-        value: info.accessibilityState
-      })]
-    }), info.styleInfo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: modalStyles.sectionTitle,
-        children: "Styles"
-      }), DataViewer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DataViewer, {
-        title: "",
-        data: info.styleInfo,
-        showTypeFilter: true,
-        rawMode: true,
-        initialExpanded: true
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: modalStyles.codeBlock,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: modalStyles.codeText,
-          children: JSON.stringify(info.styleInfo, null, 2)
-        })
-      })]
-    })]
-  });
-}
-function DebugBordersStandaloneOverlay() {
-  const [mode, setMode] = (0, _react.useState)("off");
-  const [rectangles, setRectangles] = (0, _react.useState)([]);
-  const [selectedRect, setSelectedRect] = (0, _react.useState)(null);
-  const [modalVisible, setModalVisible] = (0, _react.useState)(false);
-  const measuringRef = _react.default.useRef(false); // Prevent overlapping measurements
-
-  // Check if any DevTools are open (if context is available).
-  // The hook reference is resolved lazily but is stable for the app's lifetime,
-  // so calling it conditionally here is safe across renders.
-  const isDevToolsActive = resolveUseDevToolsVisibility()?.()?.isDevToolsActive ?? false;
-  const handleLabelPress = (0, _react.useCallback)(rect => {
-    setSelectedRect(rect);
-    setModalVisible(true);
-  }, []);
-  const handleCloseModal = (0, _react.useCallback)(() => {
-    setModalVisible(false);
-    setSelectedRect(null);
-  }, []);
-
-  // Effective enabled state: user enabled AND no DevTools active
-  const isEnabled = mode !== "off" && !isDevToolsActive;
-  const showLabels = mode === "labels" && !isDevToolsActive;
-
-  // Subscribe to manager
-  (0, _react.useEffect)(() => {
-    const unsubscribe = DebugBordersManager.subscribe(newMode => {
-      setMode(newMode);
-    });
-    return unsubscribe;
-  }, []);
-
-  // Update measurements when enabled
-  (0, _react.useEffect)(() => {
-    if (!isEnabled) {
-      setRectangles([]);
-      return;
-    }
-    let mounted = true;
-    let timer;
-    const updateMeasurements = async () => {
-      if (!mounted || measuringRef.current) {
-        return;
-      }
-      measuringRef.current = true;
-      try {
-        const instances = getAllHostComponentInstances();
-        if (instances.length === 0) {
-          measuringRef.current = false;
-          return;
-        }
-        const measurements = await measureInstances(instances);
-        if (mounted) {
-          // Resolve overlapping labels when in labels mode
-          const processedMeasurements = showLabels ? resolveOverlappingLabels(measurements) : measurements;
-          setRectangles(processedMeasurements);
-        }
-      } catch (error) {
-        console.error("[DebugBorders] Error updating measurements:", error);
-      } finally {
-        measuringRef.current = false;
-      }
-    };
-
-    // Initial measurement with delay to let UI settle
-    const initialTimer = setTimeout(() => {
-      updateMeasurements();
-    }, 500);
-
-    // Periodic updates (less frequent to avoid performance issues)
-    timer = setInterval(updateMeasurements, 2000);
-    return () => {
-      mounted = false;
-      clearTimeout(initialTimer);
-      clearInterval(timer);
-      measuringRef.current = false;
-    };
-  }, [isEnabled, showLabels, rectangles.length]);
-  if (!isEnabled) {
-    return null;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.overlay,
-    pointerEvents: "box-none"
-    // @ts-ignore - custom prop to identify this as debug overlay
-    ,
-    dataSet: {
-      debugOverlay: "true"
-    },
-    nativeID: "debug-borders-overlay",
-    children: [rectangles.map((rect, index) => {
-      const info = rect.componentInfo;
-      const hasValidLabel = info && (info.testID || info.accessibilityLabel);
-
-      // In labels mode, only show components with testID or accessibilityLabel
-      if (showLabels && !hasValidLabel) {
-        return null;
-      }
-
-      // Use label color for border when in labels mode, otherwise use depth-based color
-      const borderColor = showLabels && info ? info.primaryColor : getColorForDepth(rect.depth);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          pointerEvents: "none",
-          style: [styles.border, {
-            left: rect.x,
-            top: rect.y,
-            width: rect.width,
-            height: rect.height,
-            borderColor: borderColor
-          }]
-        }), showLabels && hasValidLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          activeOpacity: 0.7,
-          onPress: () => handleLabelPress(rect),
-          style: [styles.labelContainer, {
-            left: rect.x,
-            top: rect.y - 10 - (rect.labelOffsetY || 0),
-            backgroundColor: info.primaryColor
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.labelText,
-            numberOfLines: 1,
-            children: info.primaryLabel
-          })
-        })]
-      }, `border-${index}`);
-    }), JsModal && selectedRect?.componentInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(JsModal, {
-      visible: modalVisible,
-      onClose: handleCloseModal,
-      initialMode: "bottomSheet",
-      header: {
-        customContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(SimpleHeader, {
-          title: selectedRect.componentInfo.primaryLabel
-        })
-      },
-      persistenceKey: infoModalKey,
-      enablePersistence: false,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentInfoContent, {
-        info: selectedRect.componentInfo,
-        rect: selectedRect
-      })
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  overlay: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    // Use z-index below floating dev tools (9999-10001) but above normal app content
-    zIndex: 9000,
-    elevation: 9000
-  },
-  border: {
-    position: "absolute",
-    borderWidth: 1,
-    borderStyle: "solid"
-  },
-  labelContainer: {
-    position: "absolute",
-    paddingHorizontal: 4,
-    paddingVertical: 1,
-    borderRadius: 2
-  },
-  labelText: {
-    fontSize: 8,
-    fontWeight: "700",
-    fontFamily: _sharedUi.monoFont,
-    color: "#ffffff"
-  }
-});
-const headerStyles = _reactNative.StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    alignItems: "center"
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#ffffff",
-    fontFamily: _sharedUi.monoFont
-  }
-});
-const modalStyles = _reactNative.StyleSheet.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: _sharedUi.monoFont
-  },
-  value: {
-    fontSize: 13,
-    color: "#ffffff",
-    flex: 1,
-    fontFamily: _sharedUi.monoFont
-  },
-  codeBlock: {
-    backgroundColor: "rgba(0, 0, 0, 0.3)",
-    padding: 12,
-    borderRadius: 8,
-    marginTop: 4
-  },
-  codeText: {
-    fontSize: 11,
-    color: "#e5e7eb",
-    fontFamily: _sharedUi.monoFont
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});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,r){if("function"==typeof WeakMap)var c=new WeakMap,s=new WeakMap;return(_interopRequireWildcard=function(t,f){if(!f&&t&&t.__esModule)return t;var a,u,o={__proto__:null,default:t};if(null===t||"object"!=typeof t&&"function"!=typeof t)return o;if(a=f?s:c){if(a.has(t))return a.get(t);a.set(t,o)}for(const i in t)"default"!==i&&{}.hasOwnProperty.call(t,i)&&((u=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(t,i))&&(u.get||u.set)?a(o,i,u):o[i]=t[i]);return o})(e,r)}const infoModalKey=_sharedUi.devToolsStorageKeys.debugBorders.infoModal();const DebugBordersManager=require("../utils/DebugBordersManager");const{getAllHostComponentInstances}=require("../utils/fiberTreeTraversal");const{measureInstances}=require("../utils/componentMeasurement");const{getColorForDepth}=require("../utils/colorGeneration");const{getShortLabel}=require("../utils/componentInfo");const{resolveOverlappingLabels}=require("../utils/labelPositioning");let useDevToolsVisibility;function resolveUseDevToolsVisibility(){if(useDevToolsVisibility!==void 0){return useDevToolsVisibility}try{const e=(0,_utils.loadToolModule)("@buoy-gg/core");useDevToolsVisibility=e.useDevToolsVisibility??null}catch(e){useDevToolsVisibility=null}return useDevToolsVisibility??null}function InfoRow({label:e,value:r,color:c}){if(r===null||r===void 0)return null;let s;if(typeof r==="object"){try{s=JSON.stringify(r,null,2)}catch{s=String(r)}}else{s=String(r)}return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:modalStyles.row,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:modalStyles.label,children:e}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[modalStyles.value,c?{color:c}:null],children:s})]})}function SimpleHeader({title:e}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:headerStyles.container,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:headerStyles.title,numberOfLines:1,children:e})})}function ComponentInfoContent({info:e,rect:r}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:modalStyles.content,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:modalStyles.sectionTitle,children:"Identifiers"}),(0,_jsxRuntime.jsx)(InfoRow,{label:"testID",value:e.testID,color:"#10b981"}),(0,_jsxRuntime.jsx)(InfoRow,{label:"accessibilityLabel",value:e.accessibilityLabel,color:"#ec4899"}),(0,_jsxRuntime.jsx)(InfoRow,{label:"nativeID",value:e.nativeID,color:"#f59e0b"}),(0,_jsxRuntime.jsx)(InfoRow,{label:"key",value:e.fiberKey}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:modalStyles.sectionTitle,children:"Component"}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Component Name",value:e.componentName,color:"#a855f7"}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Parent Component",value:e.parentComponentName}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Display Name",value:e.displayName}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Native View Type",value:e.viewType}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Fiber Tag",value:e.fiberTag}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:modalStyles.sectionTitle,children:"Position & Size"}),(0,_jsxRuntime.jsx)(InfoRow,{label:"X",value:Math.round(r.x)}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Y",value:Math.round(r.y)}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Width",value:Math.round(r.width)}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Height",value:Math.round(r.height)}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Depth",value:r.depth}),(e.accessibilityRole||e.accessibilityHint||e.accessibilityState)&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:modalStyles.sectionTitle,children:"Accessibility"}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Role",value:e.accessibilityRole}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Hint",value:e.accessibilityHint}),e.accessibilityState&&_dataViewer.DataViewer?(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:e.accessibilityState,showTypeFilter:true,rawMode:true,initialExpanded:true}):(0,_jsxRuntime.jsx)(InfoRow,{label:"State",value:e.accessibilityState})]}),e.styleInfo&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:modalStyles.sectionTitle,children:"Styles"}),_dataViewer.DataViewer?(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:e.styleInfo,showTypeFilter:true,rawMode:true,initialExpanded:true}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:modalStyles.codeBlock,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:modalStyles.codeText,children:JSON.stringify(e.styleInfo,null,2)})})]})]})}function DebugBordersStandaloneOverlay(){const[e,r]=(0,_react.useState)("off");const[c,s]=(0,_react.useState)([]);const[t,f]=(0,_react.useState)(null);const[a,u]=(0,_react.useState)(false);const o=_react.default.useRef(false);const i=resolveUseDevToolsVisibility()?.()?.isDevToolsActive??false;const m=(0,_react.useCallback)(l=>{f(l);u(true)},[]);const g=(0,_react.useCallback)(()=>{u(false);f(null)},[]);const h=e!=="off"&&!i;const y=e==="labels"&&!i;(0,_react.useEffect)(()=>{const l=DebugBordersManager.subscribe(d=>{r(d)});return l},[]);(0,_react.useEffect)(()=>{if(!h){s([]);return}let l=true;let d;const n=async()=>{if(!l||o.current){return}o.current=true;try{const b=getAllHostComponentInstances();if(b.length===0){o.current=false;return}const x=await measureInstances(b);if(l){const v=y?resolveOverlappingLabels(x):x;s(v)}}catch(b){console.error("[DebugBorders] Error updating measurements:",b)}finally{o.current=false}};const p=setTimeout(()=>{n()},500);d=setInterval(n,2e3);return()=>{l=false;clearTimeout(p);clearInterval(d);o.current=false}},[h,y,c.length]);if(!h){return null}return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.overlay,pointerEvents:"box-none",dataSet:{debugOverlay:"true"},nativeID:"debug-borders-overlay",children:[c.map((l,d)=>{const n=l.componentInfo;const p=n&&(n.testID||n.accessibilityLabel);if(y&&!p){return null}const b=y&&n?n.primaryColor:getColorForDepth(l.depth);return(0,_jsxRuntime.jsxs)(_react.default.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[styles.border,{left:l.x,top:l.y,width:l.width,height:l.height,borderColor:b}]}),y&&p&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{activeOpacity:.7,onPress:()=>m(l),style:[styles.labelContainer,{left:l.x,top:l.y-10-(l.labelOffsetY||0),backgroundColor:n.primaryColor}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.labelText,numberOfLines:1,children:n.primaryLabel})})]},`border-${d}`)}),_sharedUi.JsModal&&t?.componentInfo&&(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:a,onClose:g,initialMode:"bottomSheet",header:{customContent:(0,_jsxRuntime.jsx)(SimpleHeader,{title:t.componentInfo.primaryLabel})},persistenceKey:infoModalKey,enablePersistence:false,children:(0,_jsxRuntime.jsx)(ComponentInfoContent,{info:t.componentInfo,rect:t})})]})}const styles=_reactNative.StyleSheet.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:_sharedUi.monoFont,color:"#ffffff"}});const headerStyles=_reactNative.StyleSheet.create({container:{paddingHorizontal:16,paddingVertical:8,alignItems:"center"},title:{fontSize:16,fontWeight:"600",color:"#ffffff",fontFamily:_sharedUi.monoFont}});const modalStyles=_reactNative.StyleSheet.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:_sharedUi.monoFont},value:{fontSize:13,color:"#ffffff",flex:1,fontFamily:_sharedUi.monoFont},codeBlock:{backgroundColor:"rgba(0, 0, 0, 0.3)",padding:12,borderRadius:8,marginTop:4},codeText:{fontSize:11,color:"#e5e7eb",fontFamily:_sharedUi.monoFont}});

package/lib/commonjs/debug-borders/index.js

@@ -1,51 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  DebugBordersManager: true,
-  fiberTreeTraversal: true,
-  componentMeasurement: true,
-  colorGeneration: true,
-  DebugBordersModal: true,
-  DebugBordersStandaloneOverlay: true
-};
-exports.DebugBordersManager = void 0;
-Object.defineProperty(exports, "DebugBordersModal", {
-  enumerable: true,
-  get: function () {
-    return _DebugBordersModal.DebugBordersModal;
-  }
-});
-Object.defineProperty(exports, "DebugBordersStandaloneOverlay", {
-  enumerable: true,
-  get: function () {
-    return _DebugBordersStandaloneOverlay.DebugBordersStandaloneOverlay;
-  }
-});
-exports.fiberTreeTraversal = exports.componentMeasurement = exports.colorGeneration = void 0;
-var _types = require("./types");
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _types[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _types[key];
-    }
-  });
-});
-var _DebugBordersModal = require("./components/DebugBordersModal");
-var _DebugBordersStandaloneOverlay = require("./components/DebugBordersStandaloneOverlay");
-// Export types
-
-// Export components
-
-// Export utilities (JS modules - will be typed when converted to TS)
-// Note: These are CommonJS modules, so we use require for now
-const DebugBordersManager = exports.DebugBordersManager = require("./utils/DebugBordersManager");
-const fiberTreeTraversal = exports.fiberTreeTraversal = require("./utils/fiberTreeTraversal");
-const componentMeasurement = exports.componentMeasurement = require("./utils/componentMeasurement");
-const colorGeneration = exports.colorGeneration = require("./utils/colorGeneration");
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _exportNames={DebugBordersManager:true,fiberTreeTraversal:true,componentMeasurement:true,colorGeneration:true,DebugBordersModal:true,DebugBordersStandaloneOverlay:true};exports.DebugBordersManager=void 0;Object.defineProperty(exports,"DebugBordersModal",{enumerable:true,get:function(){return _DebugBordersModal.DebugBordersModal}});Object.defineProperty(exports,"DebugBordersStandaloneOverlay",{enumerable:true,get:function(){return _DebugBordersStandaloneOverlay.DebugBordersStandaloneOverlay}});exports.fiberTreeTraversal=exports.componentMeasurement=exports.colorGeneration=void 0;var _types=require("./types");Object.keys(_types).forEach(function(e){if(e==="default"||e==="__esModule")return;if(Object.prototype.hasOwnProperty.call(_exportNames,e))return;if(e in exports&&exports[e]===_types[e])return;Object.defineProperty(exports,e,{enumerable:true,get:function(){return _types[e]}})});var _DebugBordersModal=require("./components/DebugBordersModal");var _DebugBordersStandaloneOverlay=require("./components/DebugBordersStandaloneOverlay");const DebugBordersManager=exports.DebugBordersManager=require("./utils/DebugBordersManager");const fiberTreeTraversal=exports.fiberTreeTraversal=require("./utils/fiberTreeTraversal");const componentMeasurement=exports.componentMeasurement=require("./utils/componentMeasurement");const colorGeneration=exports.colorGeneration=require("./utils/colorGeneration");

package/lib/commonjs/debug-borders/types.js

@@ -1 +1 @@
-"use strict";
+"use strict";

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

@@ -1,119 +1 @@
-"use strict";
-
-let globalMode = "off";
-const listeners = new Set();
-const MODE_CYCLE_FULL = ["off", "borders", "labels"];
-const MODE_CYCLE_FREE = ["off", "borders"];
-let _isPro = null;
-let _licenseLoadAttempted = false;
-function loadLicenseModule() {
-  if (_licenseLoadAttempted) return;
-  _licenseLoadAttempted = true;
-  try {
-    const mod = require("@buoy-gg/license");
-    if (mod && typeof mod.isPro === "function") {
-      _isPro = mod.isPro;
-    }
-  } catch {
-    _isPro = null;
-  }
-}
-function checkIsPro() {
-  loadLicenseModule();
-  if (_isPro) {
-    try {
-      return _isPro();
-    } catch {
-      return false;
-    }
-  }
-  return false;
-}
-function getModeCycle() {
-  return checkIsPro() ? MODE_CYCLE_FULL : MODE_CYCLE_FREE;
-}
-const MODE_CYCLE = MODE_CYCLE_FULL;
-function subscribe(listener) {
-  listeners.add(listener);
-  listener(globalMode);
-  return () => {
-    listeners.delete(listener);
-  };
-}
-function notifyListeners() {
-  listeners.forEach(listener => {
-    try {
-      listener(globalMode);
-    } catch (error) {
-      console.error("[DebugBorders] Error in listener:", error);
-    }
-  });
-}
-function setMode(mode) {
-  if (globalMode === mode) {
-    return true;
-  }
-  if (mode === "labels" && !checkIsPro()) {
-    console.warn("[DebugBorders] Labels mode requires React Buoy Pro. Upgrade at https://buoy.gg/pro");
-    return false;
-  }
-  globalMode = mode;
-  notifyListeners();
-  return true;
-}
-function getMode() {
-  return globalMode;
-}
-function cycle() {
-  const availableModes = getModeCycle();
-  const currentIndex = availableModes.indexOf(globalMode);
-  if (currentIndex === -1) {
-    setMode("off");
-    return;
-  }
-  const nextIndex = (currentIndex + 1) % availableModes.length;
-  setMode(availableModes[nextIndex]);
-}
-function enable() {
-  setMode("borders");
-}
-function disable() {
-  setMode("off");
-}
-function toggle() {
-  cycle();
-}
-function isEnabled() {
-  return globalMode !== "off";
-}
-function showLabels() {
-  return globalMode === "labels" && checkIsPro();
-}
-function isProEnabled() {
-  return checkIsPro();
-}
-function getAvailableModes() {
-  return getModeCycle();
-}
-function setEnabled(enabled) {
-  if (enabled) {
-    enable();
-  } else {
-    disable();
-  }
-}
-module.exports = {
-  subscribe,
-  enable,
-  disable,
-  toggle,
-  cycle,
-  isEnabled,
-  showLabels,
-  setEnabled,
-  getMode,
-  setMode,
-  isProEnabled,
-  getAvailableModes,
-  MODE_CYCLE
-};
+"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"];const MODE_CYCLE_FREE=["off","borders"];let _isPro=null;let _licenseLoadAttempted=false;function loadLicenseModule(){if(_licenseLoadAttempted)return;_licenseLoadAttempted=true;try{const e=(0,_utils.loadToolModule)("@buoy-gg/license");if(e&&typeof e.isPro==="function"){_isPro=e.isPro}}catch{_isPro=null}}function checkIsPro(){loadLicenseModule();if(_isPro){try{return _isPro()}catch{return false}}return false}function getModeCycle(){return checkIsPro()?MODE_CYCLE_FULL:MODE_CYCLE_FREE}const MODE_CYCLE=MODE_CYCLE_FULL;function subscribe(e){listeners.add(e);e(globalMode);return()=>{listeners.delete(e)}}function notifyListeners(){listeners.forEach(e=>{try{e(globalMode)}catch(t){console.error("[DebugBorders] Error in listener:",t)}})}function setMode(e){if(globalMode===e){return true}if(e==="labels"&&!checkIsPro()){console.warn("[DebugBorders] Labels mode requires React Buoy Pro. Upgrade at https://buoy.gg/pro");return false}globalMode=e;notifyListeners();return true}function getMode(){return globalMode}function cycle(){const e=getModeCycle();const t=e.indexOf(globalMode);if(t===-1){setMode("off");return}const n=(t+1)%e.length;setMode(e[n])}function enable(){setMode("borders")}function disable(){setMode("off")}function toggle(){cycle()}function isEnabled(){return globalMode!=="off"}function showLabels(){return globalMode==="labels"&&checkIsPro()}function isProEnabled(){return checkIsPro()}function getAvailableModes(){return getModeCycle()}function setEnabled(e){if(e){enable()}else{disable()}}module.exports={subscribe,enable,disable,toggle,cycle,isEnabled,showLabels,setEnabled,getMode,setMode,isProEnabled,getAvailableModes,MODE_CYCLE};