@buoy-gg/debug-borders 3.0.1 → 4.0.1

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

@@ -53,14 +53,27 @@ 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
+// Import DevToolsVisibility context to detect when DevTools are open.
+//
+// Resolved lazily (on first render) instead of at module load to avoid a
+// require cycle: @buoy-gg/core -> FloatingDevTools -> autoExternalSync ->
+// @buoy-gg/debug-borders -> preset -> this file -> @buoy-gg/core.
+// Deferring the require breaks the cycle while keeping the optional dependency.
+
+let useDevToolsVisibility;
+function resolveUseDevToolsVisibility() {
+  if (useDevToolsVisibility !== undefined) {
+    return useDevToolsVisibility;
+  }
+  try {
+    // Optional import - will gracefully fail if not available
+    const coreModule = require("@buoy-gg/core");
+    useDevToolsVisibility = coreModule.useDevToolsVisibility ?? null;
+  } catch (e) {
+    // DevToolsVisibility not available, that's ok - borders will always work
+    useDevToolsVisibility = null;
+  }
+  return useDevToolsVisibility ?? null;
 }
 // Row component for displaying info
 function InfoRow({
@@ -216,8 +229,10 @@ function DebugBordersStandaloneOverlay() {
   const [modalVisible, setModalVisible] = (0, _react.useState)(false);
   const measuringRef = _react.default.useRef(false); // Prevent overlapping measurements
 
-  // Check if any DevTools are open (if context is available)
-  const isDevToolsActive = useDevToolsVisibility?.()?.isDevToolsActive ?? false;
+  // Check if any DevTools are open (if context is available).
+  // The hook reference is resolved lazily but is stable for the app's lifetime,
+  // so calling it conditionally here is safe across renders.
+  const isDevToolsActive = resolveUseDevToolsVisibility()?.()?.isDevToolsActive ?? false;
   const handleLabelPress = (0, _react.useCallback)(rect => {
     setSelectedRect(rect);
     setModalVisible(true);

package/lib/commonjs/index.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   debugBordersToolPreset: true,
-  createDebugBordersTool: true
+  createDebugBordersTool: true,
+  debugBordersSyncAdapter: true
 };
 Object.defineProperty(exports, "createDebugBordersTool", {
   enumerable: true,
@@ -13,6 +14,12 @@ Object.defineProperty(exports, "createDebugBordersTool", {
     return _preset.createDebugBordersTool;
   }
 });
+Object.defineProperty(exports, "debugBordersSyncAdapter", {
+  enumerable: true,
+  get: function () {
+    return _debugBordersSyncAdapter.debugBordersSyncAdapter;
+  }
+});
 Object.defineProperty(exports, "debugBordersToolPreset", {
   enumerable: true,
   get: function () {
@@ -20,6 +27,7 @@ Object.defineProperty(exports, "debugBordersToolPreset", {
   }
 });
 var _preset = require("./preset");
+var _debugBordersSyncAdapter = require("./sync/debugBordersSyncAdapter");
 var _debugBorders = require("./debug-borders");
 Object.keys(_debugBorders).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/commonjs/sync/debugBordersSyncAdapter.js

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

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

@@ -49,14 +49,27 @@ 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
+// Import DevToolsVisibility context to detect when DevTools are open.
+//
+// Resolved lazily (on first render) instead of at module load to avoid a
+// require cycle: @buoy-gg/core -> FloatingDevTools -> autoExternalSync ->
+// @buoy-gg/debug-borders -> preset -> this file -> @buoy-gg/core.
+// Deferring the require breaks the cycle while keeping the optional dependency.
+
+let useDevToolsVisibility;
+function resolveUseDevToolsVisibility() {
+  if (useDevToolsVisibility !== undefined) {
+    return useDevToolsVisibility;
+  }
+  try {
+    // Optional import - will gracefully fail if not available
+    const coreModule = require("@buoy-gg/core");
+    useDevToolsVisibility = coreModule.useDevToolsVisibility ?? null;
+  } catch (e) {
+    // DevToolsVisibility not available, that's ok - borders will always work
+    useDevToolsVisibility = null;
+  }
+  return useDevToolsVisibility ?? null;
 }
 // Row component for displaying info
 function InfoRow({
@@ -212,8 +225,10 @@ export function DebugBordersStandaloneOverlay() {
   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;
+  // Check if any DevTools are open (if context is available).
+  // The hook reference is resolved lazily but is stable for the app's lifetime,
+  // so calling it conditionally here is safe across renders.
+  const isDevToolsActive = resolveUseDevToolsVisibility()?.()?.isDevToolsActive ?? false;
   const handleLabelPress = useCallback(rect => {
     setSelectedRect(rect);
     setModalVisible(true);

package/lib/module/index.js

@@ -3,5 +3,8 @@
 // Export preset configuration (easiest way to add to FloatingDevTools!)
 export { debugBordersToolPreset, createDebugBordersTool } from "./preset";
 
+// External sync (adapter for @buoy-gg/external-sync's useExternalSync)
+export { debugBordersSyncAdapter } from "./sync/debugBordersSyncAdapter";
+
 // Export all debug-borders utilities and components
 export * from "./debug-borders";

package/lib/module/sync/debugBordersSyncAdapter.js

@@ -0,0 +1,30 @@
+"use strict";
+
+// 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.
+ */
+export const 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);
+    }
+  }
+};

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

@@ -1 +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;AAmMhE,wBAAgB,6BAA6B,6BAmL5C"}
+{"version":3,"file":"DebugBordersStandaloneOverlay.d.ts","sourceRoot":"","sources":["../../../../src/debug-borders/components/DebugBordersStandaloneOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAiNhE,wBAAgB,6BAA6B,6BAsL5C"}

package/lib/typescript/index.d.ts

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAG1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAGzE,cAAc,iBAAiB,CAAC"}

package/lib/typescript/sync/debugBordersSyncAdapter.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+export declare const debugBordersSyncAdapter: {
+    version: number;
+    getSnapshot: () => {
+        mode: any;
+    };
+    subscribe: (onChange: () => void) => () => void;
+    actions: {
+        /** off → borders → labels → off (labels is Pro-gated on device) */
+        cycleMode: () => void;
+        setMode: (params: unknown) => void;
+    };
+};
+//# sourceMappingURL=debugBordersSyncAdapter.d.ts.map

package/lib/typescript/sync/debugBordersSyncAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debugBordersSyncAdapter.d.ts","sourceRoot":"","sources":["../../../src/sync/debugBordersSyncAdapter.ts"],"names":[],"mappings":"AAQA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB;;;;;0BAGZ,MAAM,IAAI,KACa,MAAM,IAAI;;QAErD,mEAAmE;;0BAIjD,OAAO;;CAI5B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/debug-borders",
-  "version": "3.0.1",
+  "version": "4.0.1",
   "description": "debug-borders package",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,19 +26,19 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/core": "3.0.1",
-    "@buoy-gg/shared-ui": "3.0.1"
+    "@buoy-gg/core": "4.0.1",
+    "@buoy-gg/shared-ui": "4.0.1"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "@buoy-gg/license": "3.0.1"
+    "@buoy-gg/license": "4.0.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
     "@types/react-native": "^0.73.0",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "3.0.1"
+    "@buoy-gg/license": "4.0.1"
   },
   "react-native-builder-bob": {
     "source": "src",