@buoy-gg/debug-borders 2.0.2

package/lib/commonjs/preset.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DebugBordersStandaloneOverlay", {
+  enumerable: true,
+  get: function () {
+    return _DebugBordersStandaloneOverlay.DebugBordersStandaloneOverlay;
+  }
+});
+exports.createDebugBordersTool = createDebugBordersTool;
+exports.debugBordersToolPreset = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+var _DebugBordersStandaloneOverlay = require("./debug-borders/components/DebugBordersStandaloneOverlay");
+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); }
+/**
+ * Pre-configured debug borders tool for FloatingDevTools
+ *
+ * This preset provides a zero-config way to add visual layout debugging to your dev tools.
+ * Just import and add it to your apps array! Tap the icon to cycle through modes:
+ * - Off (gray icon)
+ * - Borders only (green icon)
+ * - Borders + Labels (cyan icon)
+ *
+ * @example
+ * ```tsx
+ * import { debugBordersToolPreset } from '@buoy-gg/debug-borders';
+ *
+ * const installedApps = [
+ *   debugBordersToolPreset, // That's it!
+ *   // ...other tools
+ * ];
+ * ```
+ */
+
+const DebugBordersManager = require("./debug-borders/utils/DebugBordersManager");
+/**
+ * Mode colors for the icon
+ * - off: gray (disabled)
+ * - borders: green (enabled, borders only)
+ * - labels: cyan (enabled, with labels)
+ */
+const MODE_COLORS = {
+  off: "#6b7280",
+  // Gray
+  borders: "#10b981",
+  // Green
+  labels: "#06b6d4" // Cyan
+};
+
+/**
+ * Icon component that changes color based on display mode.
+ *
+ * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
+ * This component MUST use useState and useEffect hooks to subscribe to the manager.
+ * It is rendered as a JSX component (<IconComponent />) in FloatingMenu and DialIcon,
+ * which allows hooks to work properly.
+ *
+ * If you remove the hooks or change this to read getMode() directly,
+ * the icon color will NOT update when the toggle is pressed.
+ */
+function BordersIcon({
+  size
+}) {
+  const [mode, setMode] = (0, _react.useState)(() => DebugBordersManager.getMode());
+  (0, _react.useEffect)(() => {
+    const unsubscribe = DebugBordersManager.subscribe(newMode => {
+      setMode(newMode);
+    });
+    return unsubscribe;
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Layers, {
+    size: size,
+    color: MODE_COLORS[mode]
+  });
+}
+
+/**
+ * Empty component for toggle-only tools (no modal needed)
+ */
+function EmptyComponent() {
+  return null;
+}
+
+/**
+ * Pre-configured debug borders tool for FloatingDevTools.
+ * Tap the icon to cycle through modes: Off → Borders → Labels → Off
+ *
+ * Features:
+ * - Visual layout debugging with colored borders
+ * - Optional component labels showing testID, nativeID, component name, etc.
+ * - Automatic component tracking
+ * - Real-time updates every 2 seconds
+ * - Icon changes color: gray (off), green (borders), cyan (labels)
+ */
+const debugBordersToolPreset = exports.debugBordersToolPreset = {
+  id: "debug-borders",
+  name: "BORDERS",
+  description: "Visual layout debugger - tap to cycle modes",
+  slot: "menu",
+  icon: BordersIcon,
+  component: EmptyComponent,
+  props: {},
+  launchMode: "toggle-only",
+  onPress: () => {
+    DebugBordersManager.cycle();
+    // Icon updates automatically via subscription in BordersIcon component
+  }
+};
+
+/**
+ * Create a custom debug borders tool configuration.
+ * Use this if you want to override default settings.
+ *
+ * @example
+ * ```tsx
+ * import { createDebugBordersTool } from '@buoy-gg/debug-borders';
+ *
+ * const myBordersTool = createDebugBordersTool({
+ *   name: "LAYOUT",
+ *   offColor: "#9ca3af",
+ *   bordersColor: "#ec4899",
+ *   labelsColor: "#8b5cf6",
+ * });
+ * ```
+ */
+function createDebugBordersTool(options) {
+  const colors = {
+    off: options?.offColor || "#6b7280",
+    borders: options?.bordersColor || "#10b981",
+    labels: options?.labelsColor || "#06b6d4"
+  };
+
+  /**
+   * Custom icon component with hooks - rendered as JSX component.
+   *
+   * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
+   * This component MUST use useState and useEffect hooks to subscribe to the manager.
+   * See the comment on BordersIcon above for full explanation.
+   */
+  const CustomBordersIcon = ({
+    size
+  }) => {
+    const [mode, setMode] = (0, _react.useState)(() => DebugBordersManager.getMode());
+    (0, _react.useEffect)(() => {
+      const unsubscribe = DebugBordersManager.subscribe(newMode => {
+        setMode(newMode);
+      });
+      return unsubscribe;
+    }, []);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Layers, {
+      size: size,
+      color: colors[mode]
+    });
+  };
+  return {
+    id: options?.id || "debug-borders",
+    name: options?.name || "BORDERS",
+    description: options?.description || "Visual layout debugger - tap to cycle modes",
+    slot: "menu",
+    icon: CustomBordersIcon,
+    component: EmptyComponent,
+    props: {},
+    launchMode: "toggle-only",
+    onPress: () => {
+      DebugBordersManager.cycle();
+      // Icon updates automatically via subscription
+    }
+  };
+}
+
+/**
+ * Export the standalone overlay for manual integration
+ * Use this if you want to control debug borders outside of FloatingDevTools
+ */

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

@@ -0,0 +1,229 @@
+"use strict";
+
+import React, { useEffect, useState } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { macOSColors, Layers, StatusBadge, StatusIndicator } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DebugBordersManager = require("../utils/DebugBordersManager");
+
+/**
+ * Modal component for controlling debug borders.
+ * This allows developers to toggle visual layout debugging borders on/off.
+ */
+export function DebugBordersModal({
+  visible,
+  onClose
+}) {
+  const [enabled, setEnabled] = useState(false);
+  const [componentCount, setComponentCount] = useState(0);
+
+  // Subscribe to manager state
+  useEffect(() => {
+    const unsubscribe = DebugBordersManager.subscribe(setEnabled);
+    setEnabled(DebugBordersManager.isEnabled());
+    return unsubscribe;
+  }, []);
+
+  // Track component count when enabled
+  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__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        children: "Debug Borders"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.description,
+        children: "Visualize component layout structure with colored borders"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.statusRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.statusLabel,
+          children: "Status:"
+        }), /*#__PURE__*/_jsx(StatusBadge, {
+          status: enabled ? "active" : "inactive"
+        })]
+      }), enabled && componentCount > 0 && /*#__PURE__*/_jsxs(View, {
+        style: styles.statsRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.statsLabel,
+          children: "Components Tracked:"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.statsValue,
+          children: componentCount
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.toggleContainer,
+        children: /*#__PURE__*/_jsxs(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__*/_jsx(Layers, {
+            size: 40,
+            color: enabled ? macOSColors.semantic.success : macOSColors.text.secondary
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.buttonText, enabled && styles.buttonTextActive],
+            children: enabled ? "Disable Borders" : "Enable Borders"
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.infoBox,
+        children: [/*#__PURE__*/_jsx(StatusIndicator, {
+          status: enabled ? "success" : "info",
+          size: "small"
+        }), /*#__PURE__*/_jsx(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__*/_jsx(TouchableOpacity, {
+        style: styles.closeButton,
+        onPress: onClose,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.closeButtonText,
+          children: "Close"
+        })
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  content: {
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 16,
+    padding: 32,
+    width: "85%",
+    maxWidth: 420,
+    alignItems: "center"
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: macOSColors.text.primary,
+    marginBottom: 8
+  },
+  description: {
+    fontSize: 14,
+    color: macOSColors.text.secondary,
+    textAlign: "center",
+    marginBottom: 24
+  },
+  statusRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 16,
+    gap: 8
+  },
+  statusLabel: {
+    fontSize: 14,
+    color: macOSColors.text.secondary,
+    fontWeight: "600"
+  },
+  statsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 16,
+    gap: 8
+  },
+  statsLabel: {
+    fontSize: 14,
+    color: macOSColors.text.secondary,
+    fontWeight: "600"
+  },
+  statsValue: {
+    fontSize: 16,
+    color: macOSColors.text.primary,
+    fontWeight: "700"
+  },
+  toggleContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 24
+  },
+  button: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+    borderRadius: 16,
+    backgroundColor: macOSColors.background.hover,
+    borderWidth: 2,
+    borderColor: macOSColors.border.default,
+    minWidth: 200
+  },
+  buttonActive: {
+    borderColor: macOSColors.semantic.success,
+    backgroundColor: `${macOSColors.semantic.success}15`
+  },
+  buttonText: {
+    marginTop: 12,
+    fontSize: 16,
+    fontWeight: "600",
+    color: macOSColors.text.secondary
+  },
+  buttonTextActive: {
+    color: macOSColors.semantic.success
+  },
+  infoBox: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    backgroundColor: macOSColors.background.hover,
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 24,
+    gap: 8
+  },
+  infoText: {
+    flex: 1,
+    fontSize: 12,
+    color: macOSColors.text.secondary,
+    lineHeight: 16
+  },
+  closeButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    backgroundColor: macOSColors.semantic.info,
+    borderRadius: 8
+  },
+  closeButtonText: {
+    color: macOSColors.text.primary,
+    fontSize: 16,
+    fontWeight: "600"
+  }
+});