@buoy-gg/debug-borders 7.0.40 → 7.0.42

package/lib/commonjs/preset.js

@@ -1,178 +1 @@
-"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: "row",
-  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: "row",
-    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
- */
+"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(r,n){if("function"==typeof WeakMap)var u=new WeakMap,d=new WeakMap;return(_interopRequireWildcard=function(e,c){if(!c&&e&&e.__esModule)return e;var o,t,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(o=c?d:u){if(o.has(e))return o.get(e);o.set(e,a)}for(const s in e)"default"!==s&&{}.hasOwnProperty.call(e,s)&&((t=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,s))&&(t.get||t.set)?o(a,s,t):a[s]=e[s]);return a})(r,n)}const DebugBordersManager=require("./debug-borders/utils/DebugBordersManager");const MODE_COLORS={off:"#6b7280",borders:"#10b981",labels:"#06b6d4"};function BordersIcon({size:r}){const[n,u]=(0,_react.useState)(()=>DebugBordersManager.getMode());(0,_react.useEffect)(()=>{const d=DebugBordersManager.subscribe(e=>{u(e)});return d},[]);return(0,_jsxRuntime.jsx)(_sharedUi.Layers,{size:r,color:MODE_COLORS[n]})}function EmptyComponent(){return null}const debugBordersToolPreset=exports.debugBordersToolPreset={id:"debug-borders",name:"BORDERS",description:"Visual layout debugger - tap to cycle modes",slot:"row",icon:BordersIcon,component:EmptyComponent,props:{},launchMode:"toggle-only",onPress:()=>{DebugBordersManager.cycle()}};function createDebugBordersTool(r){const n={off:r?.offColor||"#6b7280",borders:r?.bordersColor||"#10b981",labels:r?.labelsColor||"#06b6d4"};const u=({size:d})=>{const[e,c]=(0,_react.useState)(()=>DebugBordersManager.getMode());(0,_react.useEffect)(()=>{const o=DebugBordersManager.subscribe(t=>{c(t)});return o},[]);return(0,_jsxRuntime.jsx)(_sharedUi.Layers,{size:d,color:n[e]})};return{id:r?.id||"debug-borders",name:r?.name||"BORDERS",description:r?.description||"Visual layout debugger - tap to cycle modes",slot:"row",icon:u,component:EmptyComponent,props:{},launchMode:"toggle-only",onPress:()=>{DebugBordersManager.cycle()}}}

package/lib/commonjs/sync/debugBordersSyncAdapter.js

@@ -1,34 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.debugBordersSyncAdapter = void 0;
-// CJS module (matches how preset.tsx loads it)
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const DebugBordersManager = require("../debug-borders/utils/DebugBordersManager");
-/**
- * Sync adapter for the debug-borders tool, consumed by @buoy-gg/external-sync's
- * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
- * this package doesn't need a dependency on it).
- *
- * Debug borders draw on the DEVICE's UI — there is nothing to mirror on a
- * dashboard. This adapter is a remote control: the dashboard reads the
- * current mode from snapshots and drives it via actions.
- */
-const debugBordersSyncAdapter = exports.debugBordersSyncAdapter = {
-  version: 1,
-  getSnapshot: () => ({
-    mode: DebugBordersManager.getMode()
-  }),
-  subscribe: onChange => DebugBordersManager.subscribe(onChange),
-  actions: {
-    /** off → borders → labels → off (labels is Pro-gated on device) */
-    cycleMode: () => {
-      DebugBordersManager.cycle();
-    },
-    setMode: params => {
-      DebugBordersManager.setMode(params.mode);
-    }
-  }
-};
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.debugBordersSyncAdapter=void 0;const DebugBordersManager=require("../debug-borders/utils/DebugBordersManager");const debugBordersSyncAdapter=exports.debugBordersSyncAdapter={version:1,getSnapshot:()=>({mode:DebugBordersManager.getMode()}),subscribe:e=>DebugBordersManager.subscribe(e),actions:{cycleMode:()=>{DebugBordersManager.cycle()},setMode:e=>{DebugBordersManager.setMode(e.mode)}}};

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

@@ -1,231 +1 @@
-"use strict";
-
-import React, { useEffect, useState } from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { night, 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 ? night.color.accent : night.color.textSecondary
-          }), /*#__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: night.color.surface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    borderRadius: 16,
-    padding: 32,
-    width: "85%",
-    maxWidth: 420,
-    alignItems: "center"
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: "700",
-    color: night.color.text,
-    marginBottom: 8
-  },
-  description: {
-    fontSize: 14,
-    color: night.color.textSecondary,
-    textAlign: "center",
-    marginBottom: 24
-  },
-  statusRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 16,
-    gap: 8
-  },
-  statusLabel: {
-    fontSize: 14,
-    color: night.color.textSecondary,
-    fontWeight: "600"
-  },
-  statsRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 16,
-    gap: 8
-  },
-  statsLabel: {
-    fontSize: 14,
-    color: night.color.textSecondary,
-    fontWeight: "600"
-  },
-  statsValue: {
-    fontSize: 16,
-    color: night.color.text,
-    fontWeight: "700"
-  },
-  toggleContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: 24
-  },
-  button: {
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 24,
-    borderRadius: 16,
-    backgroundColor: night.color.surfaceElevated,
-    borderWidth: 2,
-    borderColor: night.color.border,
-    minWidth: 200
-  },
-  buttonActive: {
-    borderColor: night.color.accentBorderStrong,
-    backgroundColor: night.color.accentSoft
-  },
-  buttonText: {
-    marginTop: 12,
-    fontSize: 16,
-    fontWeight: "600",
-    color: night.color.textSecondary
-  },
-  buttonTextActive: {
-    color: night.color.accent
-  },
-  infoBox: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    backgroundColor: night.color.surfaceElevated,
-    padding: 12,
-    borderRadius: 8,
-    marginBottom: 24,
-    gap: 8
-  },
-  infoText: {
-    flex: 1,
-    fontSize: 12,
-    color: night.color.textSecondary,
-    lineHeight: 16
-  },
-  closeButton: {
-    paddingVertical: 12,
-    paddingHorizontal: 32,
-    backgroundColor: night.color.accent,
-    borderRadius: 8
-  },
-  closeButtonText: {
-    color: night.color.onAccent,
-    fontSize: 16,
-    fontWeight: "600"
-  }
-});
+"use strict";import w,{useEffect as b,useState as f}from"react";import{View as s,Text as n,StyleSheet as S,TouchableOpacity as m}from"react-native";import{night as t,Layers as C,StatusBadge as T,StatusIndicator as v}from"@buoy-gg/shared-ui";import{jsx as o,jsxs as l}from"react/jsx-runtime";const a=require("../utils/DebugBordersManager");export function DebugBordersModal({visible:h,onClose:y}){const[r,d]=f(false);const[u,g]=f(0);b(()=>{const c=a.subscribe(d);d(a.isEnabled());return c},[]);b(()=>{if(!r){g(0);return}const c=()=>{try{const{getAllHostComponentInstances:i}=require("../utils/fiberTreeTraversal");const B=i();g(B.length)}catch(i){console.error("[DebugBorders] Error getting component count:",i)}};setTimeout(c,600);const p=setInterval(c,2e3);return()=>clearInterval(p)},[r]);const x=()=>{a.toggle()};if(!h)return null;return o(s,{style:e.container,children:l(s,{style:e.content,children:[o(n,{style:e.title,children:"Debug Borders"}),o(n,{style:e.description,children:"Visualize component layout structure with colored borders"}),l(s,{style:e.statusRow,children:[o(n,{style:e.statusLabel,children:"Status:"}),o(T,{status:r?"active":"inactive"})]}),r&&u>0&&l(s,{style:e.statsRow,children:[o(n,{style:e.statsLabel,children:"Components Tracked:"}),o(n,{style:e.statsValue,children:u})]}),o(s,{style:e.toggleContainer,children:l(m,{style:[e.button,r&&e.buttonActive],onPress:x,accessibilityRole:"button",accessibilityLabel:`Debug borders ${r?"enabled":"disabled"}`,accessibilityHint:"Tap to toggle debug borders",children:[o(C,{size:40,color:r?t.color.accent:t.color.textSecondary}),o(n,{style:[e.buttonText,r&&e.buttonTextActive],children:r?"Disable Borders":"Enable Borders"})]})}),l(s,{style:e.infoBox,children:[o(v,{status:r?"success":"info",size:"small"}),o(n,{style:e.infoText,children:r?"Borders update every 2 seconds. Tap button to disable.":"Tap button to show colored borders around all components."})]}),o(m,{style:e.closeButton,onPress:y,children:o(n,{style:e.closeButtonText,children:"Close"})})]})})}const e=S.create({container:{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"rgba(0, 0, 0, 0.5)"},content:{backgroundColor:t.color.surface,borderWidth:1,borderColor:t.color.border,borderRadius:16,padding:32,width:"85%",maxWidth:420,alignItems:"center"},title:{fontSize:24,fontWeight:"700",color:t.color.text,marginBottom:8},description:{fontSize:14,color:t.color.textSecondary,textAlign:"center",marginBottom:24},statusRow:{flexDirection:"row",alignItems:"center",marginBottom:16,gap:8},statusLabel:{fontSize:14,color:t.color.textSecondary,fontWeight:"600"},statsRow:{flexDirection:"row",alignItems:"center",marginBottom:16,gap:8},statsLabel:{fontSize:14,color:t.color.textSecondary,fontWeight:"600"},statsValue:{fontSize:16,color:t.color.text,fontWeight:"700"},toggleContainer:{alignItems:"center",justifyContent:"center",marginBottom:24},button:{alignItems:"center",justifyContent:"center",padding:24,borderRadius:16,backgroundColor:t.color.surfaceElevated,borderWidth:2,borderColor:t.color.border,minWidth:200},buttonActive:{borderColor:t.color.accentBorderStrong,backgroundColor:t.color.accentSoft},buttonText:{marginTop:12,fontSize:16,fontWeight:"600",color:t.color.textSecondary},buttonTextActive:{color:t.color.accent},infoBox:{flexDirection:"row",alignItems:"flex-start",backgroundColor:t.color.surfaceElevated,padding:12,borderRadius:8,marginBottom:24,gap:8},infoText:{flex:1,fontSize:12,color:t.color.textSecondary,lineHeight:16},closeButton:{paddingVertical:12,paddingHorizontal:32,backgroundColor:t.color.accent,borderRadius:8},closeButtonText:{color:t.color.onAccent,fontSize:16,fontWeight:"600"}});