@buoy-gg/debug-borders 2.0.2

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

@@ -0,0 +1,432 @@
+"use strict";
+
+/**
+ * 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 React, { useEffect, useState, useCallback } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+
+// Import JsModal from shared
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+let JsModal = null;
+let DataViewer = null;
+try {
+  const sharedModule = require("@buoy-gg/shared-ui");
+  JsModal = sharedModule.JsModal;
+} 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
+let useDevToolsVisibility = null;
+try {
+  // Optional import - will gracefully fail if not available
+  const coreModule = require("@buoy-gg/core");
+  useDevToolsVisibility = coreModule.useDevToolsVisibility;
+} catch (e) {
+  // DevToolsVisibility not available, that's ok - borders will always work
+}
+// 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__*/_jsxs(View, {
+    style: modalStyles.row,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: modalStyles.label,
+      children: label
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [modalStyles.value, color ? {
+        color
+      } : null],
+      children: displayValue
+    })]
+  });
+}
+
+// Simple header with just title (no hints)
+function SimpleHeader({
+  title
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: headerStyles.container,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: headerStyles.title,
+      numberOfLines: 1,
+      children: title
+    })
+  });
+}
+
+// Component Info Modal Content
+function ComponentInfoContent({
+  info,
+  rect
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: modalStyles.content,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: modalStyles.sectionTitle,
+      children: "Identifiers"
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "testID",
+      value: info.testID,
+      color: "#10b981"
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "accessibilityLabel",
+      value: info.accessibilityLabel,
+      color: "#ec4899"
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "nativeID",
+      value: info.nativeID,
+      color: "#f59e0b"
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "key",
+      value: info.fiberKey
+    }), /*#__PURE__*/_jsx(Text, {
+      style: modalStyles.sectionTitle,
+      children: "Component"
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "Component Name",
+      value: info.componentName,
+      color: "#a855f7"
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "Parent Component",
+      value: info.parentComponentName
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "Display Name",
+      value: info.displayName
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "Native View Type",
+      value: info.viewType
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "Fiber Tag",
+      value: info.fiberTag
+    }), /*#__PURE__*/_jsx(Text, {
+      style: modalStyles.sectionTitle,
+      children: "Position & Size"
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "X",
+      value: Math.round(rect.x)
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "Y",
+      value: Math.round(rect.y)
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "Width",
+      value: Math.round(rect.width)
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "Height",
+      value: Math.round(rect.height)
+    }), /*#__PURE__*/_jsx(InfoRow, {
+      label: "Depth",
+      value: rect.depth
+    }), (info.accessibilityRole || info.accessibilityHint || info.accessibilityState) && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: modalStyles.sectionTitle,
+        children: "Accessibility"
+      }), /*#__PURE__*/_jsx(InfoRow, {
+        label: "Role",
+        value: info.accessibilityRole
+      }), /*#__PURE__*/_jsx(InfoRow, {
+        label: "Hint",
+        value: info.accessibilityHint
+      }), info.accessibilityState && DataViewer ? /*#__PURE__*/_jsx(DataViewer, {
+        title: "State",
+        data: info.accessibilityState,
+        showTypeFilter: false,
+        initialExpanded: true
+      }) : /*#__PURE__*/_jsx(InfoRow, {
+        label: "State",
+        value: info.accessibilityState
+      })]
+    }), info.styleInfo && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: modalStyles.sectionTitle,
+        children: "Styles"
+      }), DataViewer ? /*#__PURE__*/_jsx(DataViewer, {
+        title: "Styles",
+        data: info.styleInfo,
+        showTypeFilter: false,
+        initialExpanded: true
+      }) : /*#__PURE__*/_jsx(View, {
+        style: modalStyles.codeBlock,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: modalStyles.codeText,
+          children: JSON.stringify(info.styleInfo, null, 2)
+        })
+      })]
+    })]
+  });
+}
+export function DebugBordersStandaloneOverlay() {
+  const [mode, setMode] = useState("off");
+  const [rectangles, setRectangles] = useState([]);
+  const [selectedRect, setSelectedRect] = useState(null);
+  const [modalVisible, setModalVisible] = useState(false);
+  const measuringRef = React.useRef(false); // Prevent overlapping measurements
+
+  // Check if any DevTools are open (if context is available)
+  const isDevToolsActive = useDevToolsVisibility?.()?.isDevToolsActive ?? false;
+  const handleLabelPress = useCallback(rect => {
+    setSelectedRect(rect);
+    setModalVisible(true);
+  }, []);
+  const handleCloseModal = 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
+  useEffect(() => {
+    const unsubscribe = DebugBordersManager.subscribe(newMode => {
+      setMode(newMode);
+    });
+    return unsubscribe;
+  }, []);
+
+  // Update measurements when enabled
+  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__*/_jsxs(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__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(View, {
+          pointerEvents: "none",
+          style: [styles.border, {
+            left: rect.x,
+            top: rect.y,
+            width: rect.width,
+            height: rect.height,
+            borderColor: borderColor
+          }]
+        }), showLabels && hasValidLabel && /*#__PURE__*/_jsx(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__*/_jsx(Text, {
+            style: styles.labelText,
+            numberOfLines: 1,
+            children: info.primaryLabel
+          })
+        })]
+      }, `border-${index}`);
+    }), JsModal && selectedRect?.componentInfo && /*#__PURE__*/_jsx(JsModal, {
+      visible: modalVisible,
+      onClose: handleCloseModal,
+      initialMode: "bottomSheet",
+      header: {
+        customContent: /*#__PURE__*/_jsx(SimpleHeader, {
+          title: selectedRect.componentInfo.primaryLabel
+        })
+      },
+      persistenceKey: "debug-borders-info-modal",
+      enablePersistence: false,
+      children: /*#__PURE__*/_jsx(ComponentInfoContent, {
+        info: selectedRect.componentInfo,
+        rect: selectedRect
+      })
+    })]
+  });
+}
+const styles = 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: "monospace",
+    color: "#ffffff"
+  }
+});
+const headerStyles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    alignItems: "center"
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#ffffff",
+    fontFamily: "monospace"
+  }
+});
+const modalStyles = 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: "monospace"
+  },
+  value: {
+    fontSize: 13,
+    color: "#ffffff",
+    flex: 1,
+    fontFamily: "monospace"
+  },
+  codeBlock: {
+    backgroundColor: "rgba(0, 0, 0, 0.3)",
+    padding: 12,
+    borderRadius: 8,
+    marginTop: 4
+  },
+  codeText: {
+    fontSize: 11,
+    color: "#e5e7eb",
+    fontFamily: "monospace"
+  }
+});

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

@@ -0,0 +1,15 @@
+"use strict";
+
+// Export types
+export * from "./types";
+
+// Export components
+export { DebugBordersModal } from "./components/DebugBordersModal";
+export { DebugBordersStandaloneOverlay } from "./components/DebugBordersStandaloneOverlay";
+
+// Export utilities (JS modules - will be typed when converted to TS)
+// Note: These are CommonJS modules, so we use require for now
+export const DebugBordersManager = require("./utils/DebugBordersManager");
+export const fiberTreeTraversal = require("./utils/fiberTreeTraversal");
+export const componentMeasurement = require("./utils/componentMeasurement");
+export const colorGeneration = require("./utils/colorGeneration");

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

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

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

@@ -0,0 +1,119 @@
+"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/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
+};