@buoy-gg/image-overlay 2.1.11

package/lib/commonjs/imageOverlay/utils/fiberScanner.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scanForImageTargets = scanForImageTargets;
+/**
+ * Fiber tree scanner for discovering image-overlay targets.
+ * Finds components tagged with testID="image-target:LabelName".
+ *
+ * Core traversal adapted from debug-borders/utils/fiberTreeTraversal.js
+ */
+
+const IMAGE_TARGET_PREFIX = "image-target:";
+
+// Fiber tag constants (from React internals)
+const HostComponent = 5;
+const OffscreenComponent = 22;
+function getReactDevToolsHook() {
+  if (typeof global === "undefined") return null;
+  return global.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? null;
+}
+function getFiberRoots() {
+  const hook = getReactDevToolsHook();
+  if (!hook?.getFiberRoots) return [];
+  try {
+    const rootsSet = hook.getFiberRoots(1);
+    return rootsSet ? Array.from(rootsSet) : [];
+  } catch {
+    return [];
+  }
+}
+function isHiddenOffscreen(fiber) {
+  return fiber.tag === OffscreenComponent && fiber.memoizedState !== null;
+}
+function isInactiveScreen(fiber) {
+  return fiber.memoizedProps?.activityState === 0;
+}
+function traverseFiberTree(fiber, callback, depth = 0, visited = new Set()) {
+  if (!fiber || visited.has(fiber) || depth > 500) return;
+  visited.add(fiber);
+  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);
+}
+
+/**
+ * Walk the fiber tree upward to find the owning user-defined React component name.
+ */
+function getOwningComponentName(fiber) {
+  const internalNames = new Set(["View", "RCTView", "Text", "RCTText", "Image", "RCTImageView", "ScrollView", "RCTScrollView", "TextInput", "RCTTextInput", "TouchableOpacity", "TouchableHighlight", "TouchableWithoutFeedback", "Pressable", "FlatList", "SectionList", "SafeAreaView"]);
+  let current = fiber._debugOwner || fiber.return;
+  let depth = 0;
+  while (current && depth < 30) {
+    depth++;
+    const type = current.type;
+    if (type) {
+      const name = typeof type === "string" ? type : type.displayName || type.name;
+      if (name && !internalNames.has(name)) {
+        return name;
+      }
+    }
+    current = current.return;
+  }
+  return null;
+}
+
+/**
+ * Scan the React fiber tree for components with testID="image-target:*".
+ * Returns an array of discovered targets with their fiber references for measurement.
+ */
+function scanForImageTargets() {
+  const roots = getFiberRoots();
+  if (roots.length === 0) return [];
+  const targets = [];
+  for (const root of roots) {
+    traverseFiberTree(root.current, fiber => {
+      if (fiber.tag !== HostComponent) return;
+      const testID = fiber.memoizedProps?.testID ?? fiber.pendingProps?.testID;
+      if (!testID || !testID.startsWith(IMAGE_TARGET_PREFIX)) return;
+      const label = testID.slice(IMAGE_TARGET_PREFIX.length);
+      if (!label) return;
+      targets.push({
+        label,
+        testID,
+        fiber,
+        instance: fiber.stateNode,
+        componentName: getOwningComponentName(fiber)
+      });
+    });
+  }
+  return targets;
+}

package/lib/commonjs/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ImageOverlayController", {
+  enumerable: true,
+  get: function () {
+    return _ImageOverlayController.ImageOverlayController;
+  }
+});
+Object.defineProperty(exports, "ImageOverlayModal", {
+  enumerable: true,
+  get: function () {
+    return _ImageOverlayModal.ImageOverlayModal;
+  }
+});
+Object.defineProperty(exports, "ImageOverlayStandalone", {
+  enumerable: true,
+  get: function () {
+    return _ImageOverlayStandalone.ImageOverlayStandalone;
+  }
+});
+Object.defineProperty(exports, "createImageOverlayTool", {
+  enumerable: true,
+  get: function () {
+    return _preset.createImageOverlayTool;
+  }
+});
+Object.defineProperty(exports, "imageOverlayToolPreset", {
+  enumerable: true,
+  get: function () {
+    return _preset.imageOverlayToolPreset;
+  }
+});
+Object.defineProperty(exports, "scanForImageTargets", {
+  enumerable: true,
+  get: function () {
+    return _fiberScanner.scanForImageTargets;
+  }
+});
+var _preset = require("./preset");
+var _ImageOverlayModal = require("./imageOverlay/components/ImageOverlayModal");
+var _ImageOverlayStandalone = require("./imageOverlay/components/ImageOverlayStandalone");
+var _ImageOverlayController = require("./imageOverlay/utils/ImageOverlayController");
+var _fiberScanner = require("./imageOverlay/utils/fiberScanner");

package/lib/commonjs/package.json

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

package/lib/commonjs/preset.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IMAGE_OVERLAY_ICON_COLOR = void 0;
+exports.createImageOverlayTool = createImageOverlayTool;
+exports.imageOverlayToolPreset = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _ImageOverlayModal = require("./imageOverlay/components/ImageOverlayModal");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Pre-configured image overlay tool for FloatingDevTools
+ *
+ * @example
+ * ```tsx
+ * import { imageOverlayToolPreset } from '@buoy-gg/image-overlay';
+ *
+ * const installedApps = [
+ *   imageOverlayToolPreset,
+ * ];
+ * ```
+ */
+
+const IMAGE_OVERLAY_ICON_COLOR = exports.IMAGE_OVERLAY_ICON_COLOR = "#A855F7";
+const imageOverlayToolPreset = exports.imageOverlayToolPreset = {
+  id: "image-overlay",
+  name: "IMG",
+  description: "Design mockup overlay",
+  slot: "both",
+  icon: ({
+    size
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ImageOverlayIcon, {
+    size: size,
+    color: IMAGE_OVERLAY_ICON_COLOR
+  }),
+  component: _ImageOverlayModal.ImageOverlayModal,
+  props: {
+    enableSharedModalDimensions: false
+  }
+};
+function createImageOverlayTool(options) {
+  return {
+    id: options?.id || "image-overlay",
+    name: options?.name || "IMG",
+    description: options?.description || "Design mockup overlay",
+    slot: "both",
+    icon: ({
+      size
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ImageOverlayIcon, {
+      size: size,
+      color: IMAGE_OVERLAY_ICON_COLOR
+    }),
+    component: _ImageOverlayModal.ImageOverlayModal,
+    props: {
+      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
+    }
+  };
+}