@buoy-gg/debug-borders 2.0.2

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

@@ -0,0 +1,309 @@
+"use strict";
+
+function getReactDevToolsHook() {
+  if (typeof global === "undefined") {
+    return null;
+  }
+  const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!hook) {
+    return null;
+  }
+  return hook;
+}
+function getFiberRoots() {
+  const hook = getReactDevToolsHook();
+  if (!hook) {
+    return [];
+  }
+  if (!hook.getFiberRoots) {
+    return [];
+  }
+  try {
+    const rootsSet = hook.getFiberRoots(1);
+    if (!rootsSet) {
+      return [];
+    }
+    return Array.from(rootsSet);
+  } catch (error) {
+    return [];
+  }
+}
+const FiberTags = {
+  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
+};
+const DEV_TOOLS_COMPONENT_NAMES = 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", "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"]);
+const DEV_TOOLS_COMPONENT_PREFIXES = ["JsModal", "HighlightUpdates", "RenderList", "RenderDetail", "DebugBorders", "Storage", "Network", "RouteEvents", "EnvSwitcher", "Floating", "Minimized", "Expandable", "DevTools", "GameUI"];
+const DEV_TOOLS_NATIVE_IDS = new Set(["debug-borders-overlay", "floating-devtools-root", "dial-devtools-root", "jsmodal-root", "highlight-updates-overlay", "__rn_buoy__highlight-modal", "logbox_inspector", "logbox"]);
+const devToolsNodeCache = new Map();
+const CACHE_MAX_SIZE = 500;
+function getNativeTag(stateNode) {
+  if (!stateNode) return null;
+  if (typeof stateNode._nativeTag === "number") return stateNode._nativeTag;
+  if (typeof stateNode.canonical?._nativeTag === "number") {
+    return stateNode.canonical._nativeTag;
+  }
+  if (typeof stateNode.__nativeTag === "number") return stateNode.__nativeTag;
+  return null;
+}
+function isDevToolsNativeID(nativeID) {
+  if (!nativeID) return false;
+  if (DEV_TOOLS_NATIVE_IDS.has(nativeID)) return true;
+  const firstChar = nativeID.charCodeAt(0);
+  if (firstChar === 95) {
+    if (nativeID.startsWith("__highlight_") || nativeID.startsWith("__rn_buoy__")) {
+      return true;
+    }
+  }
+  if (firstChar === 108 && nativeID.startsWith("logbox")) {
+    return true;
+  }
+  return false;
+}
+function getComponentName(fiber) {
+  if (!fiber) return null;
+  const type = fiber.type;
+  if (type) {
+    if (typeof type === "function") {
+      return type.displayName || type.name || null;
+    }
+    if (typeof type === "string") {
+      return type;
+    }
+    if (type.displayName) return type.displayName;
+    if (type.name) return type.name;
+  }
+  const elementType = fiber.elementType;
+  if (elementType) {
+    if (typeof elementType === "function") {
+      return elementType.displayName || elementType.name || null;
+    }
+    if (elementType.displayName) return elementType.displayName;
+    if (elementType.name) return elementType.name;
+  }
+  return null;
+}
+function isDevToolsComponent(fiber, stateNode) {
+  const nativeTag = getNativeTag(stateNode);
+  if (nativeTag != null) {
+    const cached = devToolsNodeCache.get(nativeTag);
+    if (cached !== undefined) {
+      return cached;
+    }
+  }
+  let result = false;
+  const directNativeID = fiber.pendingProps?.nativeID || fiber.memoizedProps?.nativeID;
+  if (isDevToolsNativeID(directNativeID)) {
+    result = true;
+  } else {
+    let currentFiber = fiber;
+    let depth = 0;
+    while (currentFiber && depth < 30) {
+      const name = getComponentName(currentFiber);
+      if (name) {
+        if (DEV_TOOLS_COMPONENT_NAMES.has(name)) {
+          result = true;
+          break;
+        }
+        for (const prefix of DEV_TOOLS_COMPONENT_PREFIXES) {
+          if (name.startsWith(prefix)) {
+            result = true;
+            break;
+          }
+        }
+        if (result) break;
+      }
+      const nativeID = currentFiber.pendingProps?.nativeID || currentFiber.memoizedProps?.nativeID;
+      if (isDevToolsNativeID(nativeID)) {
+        result = true;
+        break;
+      }
+      currentFiber = currentFiber.return;
+      depth++;
+    }
+  }
+  if (result && nativeTag != null) {
+    if (devToolsNodeCache.size >= CACHE_MAX_SIZE) {
+      const entries = Array.from(devToolsNodeCache.keys());
+      for (let i = 0; i < CACHE_MAX_SIZE / 2; i++) {
+        devToolsNodeCache.delete(entries[i]);
+      }
+    }
+    devToolsNodeCache.set(nativeTag, result);
+  }
+  return result;
+}
+function clearDevToolsCache() {
+  devToolsNodeCache.clear();
+}
+function isHiddenOffscreen(fiber) {
+  if (fiber.tag !== FiberTags.OffscreenComponent) {
+    return false;
+  }
+  return fiber.memoizedState !== null;
+}
+function isInactiveScreen(fiber) {
+  const props = fiber.memoizedProps;
+  if (!props) {
+    return false;
+  }
+  return props.activityState === 0;
+}
+function getNativeViewClassName(stateNode) {
+  if (!stateNode) {
+    return null;
+  }
+  if (stateNode.canonical?.viewConfig?.uiViewClassName) {
+    return stateNode.canonical.viewConfig.uiViewClassName;
+  }
+  if (stateNode.viewConfig?.uiViewClassName) {
+    return stateNode.viewConfig.uiViewClassName;
+  }
+  return null;
+}
+function isSVGComponent(stateNode) {
+  const viewClassName = getNativeViewClassName(stateNode);
+  if (!viewClassName) {
+    return false;
+  }
+  return viewClassName.startsWith("RNSVG");
+}
+function traverseFiberTree(fiber, callback, depth = 0, visited = new Set()) {
+  if (!fiber) {
+    return;
+  }
+  if (visited.has(fiber)) {
+    return;
+  }
+  visited.add(fiber);
+  if (depth > 500) {
+    return;
+  }
+  if (isHiddenOffscreen(fiber)) {
+    if (fiber.sibling) {
+      traverseFiberTree(fiber.sibling, callback, depth, visited);
+    }
+    return;
+  }
+  if (isInactiveScreen(fiber)) {
+    if (fiber.sibling) {
+      traverseFiberTree(fiber.sibling, callback, depth, visited);
+    }
+    return;
+  }
+  callback(fiber, depth);
+  if (fiber.child) {
+    traverseFiberTree(fiber.child, callback, depth + 1, visited);
+  }
+  if (fiber.sibling) {
+    traverseFiberTree(fiber.sibling, callback, depth, visited);
+  }
+}
+function getAllHostComponentInstances() {
+  const roots = getFiberRoots();
+  if (roots.length === 0) {
+    return [];
+  }
+  const instances = [];
+  roots.forEach((root, rootIndex) => {
+    traverseFiberTree(root.current, (fiber, depth) => {
+      if (fiber.tag === FiberTags.HostComponent) {
+        const publicInstance = fiber.stateNode;
+        if (isDevToolsComponent(fiber, publicInstance)) {
+          return;
+        }
+        if (isSVGComponent(publicInstance)) {
+          return;
+        }
+        if (publicInstance) {
+          instances.push({
+            instance: publicInstance,
+            fiber: fiber,
+            depth: depth
+          });
+        }
+      }
+    });
+  });
+  return instances;
+}
+function isReactDevToolsAvailable() {
+  const hook = getReactDevToolsHook();
+  if (!hook) {
+    return false;
+  }
+  if (!hook.getFiberRoots) {
+    return false;
+  }
+  return true;
+}
+function getReactDevToolsDiagnostics() {
+  const hook = getReactDevToolsHook();
+  if (!hook) {
+    return {
+      available: false,
+      reason: "Hook not found on global object"
+    };
+  }
+  const diagnostics = {
+    available: true,
+    hasAgent: !!hook.reactDevtoolsAgent,
+    hasFiberRoots: typeof hook.getFiberRoots === "function",
+    rendererCount: 0,
+    rootCount: 0,
+    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 = {
+  getReactDevToolsHook,
+  getFiberRoots,
+  traverseFiberTree,
+  getAllHostComponentInstances,
+  isReactDevToolsAvailable,
+  getReactDevToolsDiagnostics,
+  isHiddenOffscreen,
+  isInactiveScreen,
+  isSVGComponent,
+  getNativeViewClassName,
+  isDevToolsComponent,
+  isDevToolsNativeID,
+  getComponentName,
+  clearDevToolsCache,
+  FiberTags,
+  DEV_TOOLS_COMPONENT_NAMES,
+  DEV_TOOLS_NATIVE_IDS
+};

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

@@ -0,0 +1,202 @@
+/**
+ * Label Positioning Utility
+ *
+ * Resolves overlapping labels by repositioning them.
+ * Uses a greedy algorithm that processes labels once and offsets
+ * any that would overlap with already-placed labels.
+ *
+ * Time Complexity: O(n²) worst case, but typically much faster
+ * since we only compare against nearby labels and use early exit.
+ */
+
+"use strict";
+
+/**
+ * Configuration for label positioning
+ */
+const CONFIG = {
+  // Minimum spacing between labels (pixels)
+  LABEL_SPACING: 0,
+  // Maximum vertical offset before giving up (pixels)
+  MAX_VERTICAL_OFFSET: 100,
+  // Label height estimate (used for offset increments)
+  LABEL_HEIGHT: 10,
+  // Padding around labels for collision detection
+  PADDING: 0
+};
+
+/**
+ * Check if two rectangles overlap
+ *
+ * @param {Object} a - First rectangle {x, y, width, height}
+ * @param {Object} b - Second rectangle {x, y, width, height}
+ * @returns {boolean} - True if rectangles overlap
+ */
+function rectsOverlap(a, b) {
+  const padding = CONFIG.PADDING;
+  const aLeft = a.x - padding;
+  const aRight = a.x + a.width + padding;
+  const aTop = a.y - padding;
+  const aBottom = a.y + a.height + padding;
+  const bLeft = b.x - padding;
+  const bRight = b.x + b.width + padding;
+  const bTop = b.y - padding;
+  const bBottom = b.y + b.height + padding;
+
+  // No overlap if one is completely to the side or above/below the other
+  return !(aRight < bLeft || aLeft > bRight || aBottom < bTop || aTop > bBottom);
+}
+
+/**
+ * Estimate label width based on text length
+ * (Used when actual measurement isn't available)
+ *
+ * @param {string} text - Label text
+ * @returns {number} - Estimated width in pixels
+ */
+function estimateLabelWidth(text) {
+  if (!text) return 0;
+  // Approximate: 5px per character for 8pt monospace font + padding
+  return text.length * 5 + 8;
+}
+
+/**
+ * Resolve overlapping labels by stacking them upward like a menu
+ *
+ * Strategy: Process labels in order. For each label, check if it overlaps
+ * with any already-placed label. If so, stack it above (going upward).
+ * Labels are positioned above their boxes, stacking upward with no gaps.
+ *
+ * @param {Array<Object>} rectangles - Array of rectangle data with componentInfo
+ * @returns {Array<Object>} - Same array with added labelOffset property
+ */
+function resolveOverlappingLabels(rectangles) {
+  if (!rectangles || rectangles.length === 0) {
+    return rectangles;
+  }
+
+  // Filter to only rectangles with valid labels (testID or accessibilityLabel)
+  const validRectangles = rectangles.filter(rect => {
+    const info = rect.componentInfo;
+    return info && (info.testID || info.accessibilityLabel);
+  });
+
+  // Build label rects with estimated dimensions
+  // Labels are positioned ABOVE the box (y - labelHeight)
+  const labelRects = rectangles.map((rect, index) => {
+    const info = rect.componentInfo;
+    const hasValidLabel = info && (info.testID || info.accessibilityLabel);
+    const labelText = hasValidLabel ? info.primaryLabel : "";
+    const labelWidth = estimateLabelWidth(labelText);
+    return {
+      index,
+      hasValidLabel,
+      // Label position is above the box
+      x: rect.x,
+      y: rect.y - CONFIG.LABEL_HEIGHT,
+      // Position above the box
+      width: labelWidth,
+      height: CONFIG.LABEL_HEIGHT,
+      // Track the offset we apply (going upward, so negative)
+      offsetY: 0
+    };
+  });
+
+  // Sort by position (top-to-bottom, left-to-right) for consistent placement
+  const sortedIndices = labelRects.map((_, i) => i).filter(i => labelRects[i].hasValidLabel) // Only process valid labels
+  .sort((a, b) => {
+    const rectA = rectangles[a];
+    const rectB = rectangles[b];
+    // Primary sort by Y, secondary by X
+    if (Math.abs(rectA.y - rectB.y) > 10) {
+      return rectA.y - rectB.y;
+    }
+    return rectA.x - rectB.x;
+  });
+
+  // Track placed labels for collision detection
+  const placedLabels = [];
+
+  // Process each label in sorted order
+  for (const idx of sortedIndices) {
+    const label = labelRects[idx];
+
+    // Skip empty labels
+    if (label.width === 0) {
+      continue;
+    }
+    let offsetY = 0;
+    let hasOverlap = true;
+    let attempts = 0;
+    const maxAttempts = Math.ceil(CONFIG.MAX_VERTICAL_OFFSET / CONFIG.LABEL_HEIGHT);
+    while (hasOverlap && attempts < maxAttempts) {
+      // Create test rect with current offset (going upward)
+      const testRect = {
+        x: label.x,
+        y: label.y - offsetY,
+        // Subtract to go upward
+        width: label.width,
+        height: label.height
+      };
+
+      // Check against all placed labels
+      hasOverlap = placedLabels.some(placed => rectsOverlap(testRect, placed));
+      if (hasOverlap) {
+        // Stack upward with no spacing
+        offsetY += CONFIG.LABEL_HEIGHT;
+        attempts++;
+      }
+    }
+
+    // Store the offset
+    label.offsetY = offsetY;
+
+    // Add to placed labels with final position
+    placedLabels.push({
+      x: label.x,
+      y: label.y - offsetY,
+      width: label.width,
+      height: label.height
+    });
+  }
+
+  // Apply offsets to original rectangles
+  return rectangles.map((rect, index) => ({
+    ...rect,
+    labelOffsetY: labelRects[index].offsetY
+  }));
+}
+
+/**
+ * Quick check if any labels might overlap (for early exit optimization)
+ *
+ * @param {Array<Object>} rectangles - Array of rectangle data
+ * @returns {boolean} - True if there might be overlaps worth resolving
+ */
+function mightHaveOverlaps(rectangles) {
+  if (!rectangles || rectangles.length < 2) {
+    return false;
+  }
+
+  // Quick heuristic: check if any boxes are close together
+  for (let i = 0; i < Math.min(rectangles.length, 20); i++) {
+    for (let j = i + 1; j < Math.min(rectangles.length, 20); j++) {
+      const a = rectangles[i];
+      const b = rectangles[j];
+
+      // If boxes are within label height of each other vertically
+      // and overlap horizontally, we might have label overlaps
+      if (Math.abs(a.y - b.y) < CONFIG.LABEL_HEIGHT * 2 && !(a.x + 100 < b.x || b.x + 100 < a.x)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+module.exports = {
+  resolveOverlappingLabels,
+  rectsOverlap,
+  estimateLabelWidth,
+  mightHaveOverlaps,
+  CONFIG
+};

package/lib/commonjs/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  debugBordersToolPreset: true,
+  createDebugBordersTool: true
+};
+Object.defineProperty(exports, "createDebugBordersTool", {
+  enumerable: true,
+  get: function () {
+    return _preset.createDebugBordersTool;
+  }
+});
+Object.defineProperty(exports, "debugBordersToolPreset", {
+  enumerable: true,
+  get: function () {
+    return _preset.debugBordersToolPreset;
+  }
+});
+var _preset = require("./preset");
+var _debugBorders = require("./debug-borders");
+Object.keys(_debugBorders).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _debugBorders[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _debugBorders[key];
+    }
+  });
+});

package/lib/commonjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}