@buoy-gg/debug-borders 2.0.2

package/lib/typescript/debug-borders/components/DebugBordersStandaloneOverlay.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 from "react";
+export declare function DebugBordersStandaloneOverlay(): React.JSX.Element | null;
+//# sourceMappingURL=DebugBordersStandaloneOverlay.d.ts.map

package/lib/typescript/debug-borders/components/DebugBordersStandaloneOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugBordersStandaloneOverlay.d.ts","sourceRoot":"","sources":["../../../../src/debug-borders/components/DebugBordersStandaloneOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAiMhE,wBAAgB,6BAA6B,6BAmL5C"}

package/lib/typescript/debug-borders/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./types";
+export { DebugBordersModal } from "./components/DebugBordersModal";
+export { DebugBordersStandaloneOverlay } from "./components/DebugBordersStandaloneOverlay";
+export declare const DebugBordersManager: any;
+export declare const fiberTreeTraversal: any;
+export declare const componentMeasurement: any;
+export declare const colorGeneration: any;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/debug-borders/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/debug-borders/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAI3F,eAAO,MAAM,mBAAmB,KAAyC,CAAC;AAC1E,eAAO,MAAM,kBAAkB,KAAwC,CAAC;AACxE,eAAO,MAAM,oBAAoB,KAA0C,CAAC;AAC5E,eAAO,MAAM,eAAe,KAAqC,CAAC"}

package/lib/typescript/debug-borders/types.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Type definitions for debug-borders package
+ */
+/**
+ * Props for the DebugBordersModal component
+ */
+export interface DebugBordersModalProps {
+    /** Enable shared modal dimensions */
+    enableSharedModalDimensions?: boolean;
+}
+/**
+ * Debug Borders Manager API
+ */
+export interface DebugBordersManagerAPI {
+    /** Enable debug borders */
+    enable: () => void;
+    /** Disable debug borders */
+    disable: () => void;
+    /** Toggle debug borders on/off */
+    toggle: () => void;
+    /** Check if debug borders are enabled */
+    isEnabled: () => boolean;
+    /** Set enabled state */
+    setEnabled: (enabled: boolean) => void;
+    /** Subscribe to state changes */
+    subscribe: (callback: (enabled: boolean) => void) => () => void;
+}
+/**
+ * Rectangle measurement data
+ */
+export interface RectangleMeasurement {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    depth: number;
+}
+/**
+ * Component instance with fiber node reference
+ */
+export interface ComponentInstance {
+    node: any;
+    depth: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/debug-borders/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/debug-borders/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,2BAA2B;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,4BAA4B;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,yCAAyC;IACzC,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,wBAAwB;IACxB,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,KAAK,MAAM,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,GAAG,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf"}

package/lib/typescript/debug-borders/utils/ViewTypeMapper.d.ts

@@ -0,0 +1,66 @@
+/**
+ * ViewTypeMapper
+ *
+ * Maps native view class names (e.g., "RCTView", "RCTText") to their
+ * developer-friendly React Native component names (e.g., "View", "Text").
+ *
+ * This makes the render tracking UI more understandable since developers
+ * work with component names, not native class names.
+ *
+ * Sources:
+ * - React Native core: packages/react-native/Libraries/Components/*
+ * - React Native Android: ReactAndroid/src/main/java/com/facebook/react/views/*
+ * - FabricNameComponentMapping.kt
+ * - Common third-party libraries (react-native-svg, gesture-handler, etc.)
+ */
+/**
+ * Mapping from native view class names to React component names.
+ *
+ * Format: { "NativeClassName": "ComponentName" }
+ */
+export declare const VIEW_TYPE_MAP: Record<string, string>;
+/**
+ * Get the developer-friendly component name for a native view type.
+ * Returns the original viewType if no mapping exists.
+ *
+ * @param viewType - The native view class name (e.g., "RCTView")
+ * @returns The component name (e.g., "View")
+ */
+export declare function getComponentDisplayName(viewType: string): string;
+/**
+ * Get the native view class name for a component name (reverse lookup).
+ * Returns null if no mapping exists.
+ *
+ * @param componentName - The component name (e.g., "View")
+ * @returns The native view class name (e.g., "RCTView") or null
+ */
+export declare function getNativeViewType(componentName: string): string | null;
+/**
+ * Check if a view type is a known native component.
+ *
+ * @param viewType - The native view class name
+ * @returns true if it's a known component
+ */
+export declare function isKnownViewType(viewType: string): boolean;
+/**
+ * Get all known view types (useful for autocomplete/suggestions).
+ *
+ * @returns Array of all native view class names
+ */
+export declare function getAllNativeViewTypes(): string[];
+/**
+ * Get all known component names (useful for autocomplete/suggestions).
+ *
+ * @returns Array of all component display names
+ */
+export declare function getAllComponentNames(): string[];
+declare const _default: {
+    VIEW_TYPE_MAP: Record<string, string>;
+    getComponentDisplayName: typeof getComponentDisplayName;
+    getNativeViewType: typeof getNativeViewType;
+    isKnownViewType: typeof isKnownViewType;
+    getAllNativeViewTypes: typeof getAllNativeViewTypes;
+    getAllComponentNames: typeof getAllComponentNames;
+};
+export default _default;
+//# sourceMappingURL=ViewTypeMapper.d.ts.map

package/lib/typescript/debug-borders/utils/ViewTypeMapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewTypeMapper.d.ts","sourceRoot":"","sources":["../../../../src/debug-borders/utils/ViewTypeMapper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA6LhD,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEhE;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAOtE;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEzD;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,EAAE,CAEhD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,EAAE,CAE/C;;;;;;;;;AAED,wBAOE"}

package/lib/typescript/index.d.ts

@@ -0,0 +1,3 @@
+export { debugBordersToolPreset, createDebugBordersTool } from "./preset";
+export * from "./debug-borders";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAG1E,cAAc,iBAAiB,CAAC"}

package/lib/typescript/preset.d.ts

@@ -0,0 +1,108 @@
+/**
+ * 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
+ * ];
+ * ```
+ */
+import React from "react";
+/**
+ * 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.
+ */
+declare function BordersIcon({ size }: {
+    size: number;
+}): React.JSX.Element;
+/**
+ * Empty component for toggle-only tools (no modal needed)
+ */
+declare function EmptyComponent(): 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)
+ */
+export declare const debugBordersToolPreset: {
+    id: string;
+    name: string;
+    description: string;
+    slot: "menu";
+    icon: typeof BordersIcon;
+    component: typeof EmptyComponent;
+    props: {};
+    launchMode: "toggle-only";
+    onPress: () => void;
+};
+/**
+ * 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",
+ * });
+ * ```
+ */
+export declare function createDebugBordersTool(options?: {
+    /** Tool name (default: "BORDERS") */
+    name?: string;
+    /** Tool description */
+    description?: string;
+    /** Icon color when off (default: "#6b7280" - gray) */
+    offColor?: string;
+    /** Icon color in borders mode (default: "#10b981" - green) */
+    bordersColor?: string;
+    /** Icon color in labels mode (default: "#06b6d4" - cyan) */
+    labelsColor?: string;
+    /** Custom tool ID (default: "debug-borders") */
+    id?: string;
+}): {
+    id: string;
+    name: string;
+    description: string;
+    slot: "menu";
+    icon: ({ size }: {
+        size: number;
+    }) => React.JSX.Element;
+    component: typeof EmptyComponent;
+    props: {};
+    launchMode: "toggle-only";
+    onPress: () => void;
+};
+/**
+ * Export the standalone overlay for manual integration
+ * Use this if you want to control debug borders outside of FloatingDevTools
+ */
+export { DebugBordersStandaloneOverlay } from "./debug-borders/components/DebugBordersStandaloneOverlay";
+//# sourceMappingURL=preset.d.ts.map

package/lib/typescript/preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAmBnD;;;;;;;;;;GAUG;AACH,iBAAS,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,qBAW9C;AAED;;GAEG;AACH,iBAAS,cAAc,SAEtB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;CAalC,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,CAAC,EAAE;IAC/C,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;;;;;qBAcsC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;EA4BtD;AAED;;;GAGG;AACH,OAAO,EAAE,6BAA6B,EAAE,MAAM,0DAA0D,CAAC"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@buoy-gg/debug-borders",
+  "version": "2.0.2",
+  "description": "debug-borders package",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "files": [
+    "lib"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bob build",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bob build",
+    "clean": "rimraf lib",
+    "test": "pnpm run typecheck"
+  },
+  "dependencies": {
+    "@buoy-gg/core": "workspace:*",
+    "@buoy-gg/shared-ui": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "@buoy-gg/license": "*"
+  },
+  "peerDependenciesMeta": {
+    "@buoy-gg/license": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-native": "^0.73.0",
+    "typescript": "~5.8.3"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "sourceMaps": false
+        }
+      ],
+      [
+        "module",
+        {
+          "sourceMaps": false
+        }
+      ],
+      "typescript"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LovesWorking/react-native-buoy.git",
+    "directory": "packages/debug-borders"
+  },
+  "bugs": {
+    "url": "https://github.com/LovesWorking/react-native-buoy/issues"
+  },
+  "homepage": "https://github.com/LovesWorking/react-native-buoy/tree/main/packages/debug-borders#readme",
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  }
+}