@buoy-gg/image-overlay 2.1.11

package/lib/module/imageOverlay/components/TargetList.js

@@ -0,0 +1,179 @@
+"use strict";
+
+/**
+ * List of discovered image-overlay target components.
+ * Styled to match RenderListItem from highlight-updates.
+ */
+
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
+import { ChevronRight, buoyColors, Hash } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function TargetRow({
+  target,
+  onSelect
+}) {
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    style: styles.card,
+    onPress: onSelect,
+    activeOpacity: 0.7,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.colorIndicator
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.topRow,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.label,
+          numberOfLines: 1,
+          children: target.label
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.bottomRow,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.badgeRow,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.testIdBadge,
+            children: [/*#__PURE__*/_jsx(Hash, {
+              size: 8,
+              color: buoyColors.success
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.testIdBadgeText,
+              children: "testID"
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.testIdValue,
+            numberOfLines: 1,
+            children: target.testID
+          })]
+        }), target.componentName && /*#__PURE__*/_jsx(Text, {
+          style: styles.componentName,
+          numberOfLines: 1,
+          children: target.componentName
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(ChevronRight, {
+      size: 16,
+      color: buoyColors.textMuted
+    })]
+  });
+}
+export function TargetList({
+  targets,
+  onSelect
+}) {
+  if (targets.length === 0) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.emptyState,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.emptyTitle,
+        children: "No targets found"
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.emptyText,
+        children: ["Tag components with", "\n", "testID=\"image-target:YourLabel\""]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(ScrollView, {
+    style: styles.list,
+    contentContainerStyle: styles.listContent,
+    children: targets.map(target => /*#__PURE__*/_jsx(TargetRow, {
+      target: target,
+      onSelect: () => onSelect(target)
+    }, target.testID))
+  });
+}
+const styles = StyleSheet.create({
+  list: {
+    flex: 1
+  },
+  listContent: {
+    paddingTop: 8,
+    paddingBottom: 20
+  },
+  card: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    marginHorizontal: 12,
+    marginBottom: 6,
+    backgroundColor: buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  colorIndicator: {
+    width: 4,
+    height: 36,
+    borderRadius: 2,
+    marginRight: 10,
+    backgroundColor: buoyColors.primary
+  },
+  content: {
+    flex: 1,
+    marginRight: 8
+  },
+  topRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 4
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: buoyColors.text,
+    flex: 1
+  },
+  bottomRow: {
+    gap: 2
+  },
+  badgeRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  testIdBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 2,
+    paddingHorizontal: 5,
+    borderRadius: 4,
+    backgroundColor: buoyColors.success + "20",
+    gap: 3
+  },
+  testIdBadgeText: {
+    fontSize: 9,
+    fontWeight: "700",
+    color: buoyColors.success
+  },
+  testIdValue: {
+    fontSize: 11,
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  componentName: {
+    fontSize: 10,
+    color: "#a855f7",
+    fontFamily: "monospace",
+    marginTop: 1
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40,
+    paddingHorizontal: 32
+  },
+  emptyTitle: {
+    color: buoyColors.text,
+    fontSize: 14,
+    fontWeight: "600",
+    marginBottom: 6
+  },
+  emptyText: {
+    color: buoyColors.textMuted,
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: 18,
+    fontFamily: "monospace"
+  }
+});

package/lib/module/imageOverlay/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export { ImageOverlayModal } from "./components/ImageOverlayModal";
+export { ImageOverlayStandalone } from "./components/ImageOverlayStandalone";
+export { ImageOverlayController } from "./utils/ImageOverlayController";
+export { scanForImageTargets } from "./utils/fiberScanner";

package/lib/module/imageOverlay/types/index.js

@@ -0,0 +1 @@
+"use strict";

package/lib/module/imageOverlay/utils/ImageOverlayController.js

@@ -0,0 +1,388 @@
+"use strict";
+
+/**
+ * Singleton state manager for the image overlay tool.
+ * Bridges the modal (controls) and standalone overlay (rendering).
+ * Supports two modes: "component" (match to tagged element) and "free" (drag anywhere).
+ */
+
+import { Image as RNImage, Dimensions } from "react-native";
+import { measureInstance } from "./componentMeasurement";
+import { scanForImageTargets } from "./fiberScanner";
+const DEFAULT_STATE = {
+  mode: null,
+  enabled: false,
+  imageUri: null,
+  imageWidth: null,
+  imageHeight: null,
+  targetTag: null,
+  targetLabel: null,
+  targetRect: null,
+  showOutline: true,
+  opacity: 0.5,
+  scale: 1.0,
+  offsetX: 0,
+  offsetY: 0,
+  invertX: false,
+  invertY: false,
+  locked: false,
+  freeX: 0,
+  freeY: 0,
+  freeWidth: 200,
+  freeHeight: 200
+};
+let state = {
+  ...DEFAULT_STATE
+};
+const listeners = new Set();
+
+// Hold onto references so we can remeasure
+let targetInstance = null;
+let targetLabel = null;
+
+// Auto-tracking via React DevTools traceUpdates
+let autoTrackEnabled = false;
+let traceUnsubscribe = null;
+let trackingNativeTag = null;
+function notify() {
+  for (const listener of listeners) {
+    listener(state);
+  }
+}
+function getNativeTag(instance) {
+  if (!instance) return null;
+  if (typeof instance._nativeTag === "number") return instance._nativeTag;
+  if (typeof instance.canonical?._nativeTag === "number") return instance.canonical._nativeTag;
+  if (typeof instance.__nativeTag === "number") return instance.__nativeTag;
+  return null;
+}
+async function measureWithFallback(instance, label) {
+  let rect = await measureInstance(instance);
+  if (rect) return {
+    rect,
+    freshInstance: instance
+  };
+  const targets = scanForImageTargets();
+  const fresh = targets.find(t => t.label === label);
+  if (fresh) {
+    rect = await measureInstance(fresh.instance);
+    if (rect) return {
+      rect,
+      freshInstance: fresh.instance
+    };
+  }
+  return {
+    rect: null,
+    freshInstance: instance
+  };
+}
+
+/**
+ * Subscribe to React DevTools traceUpdates to remeasure our target
+ * component in real-time whenever ANY component re-renders (which
+ * includes scroll events that reposition our target).
+ */
+function startTraceTracking() {
+  if (traceUnsubscribe) return; // already tracking
+
+  const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!hook) return;
+
+  // Enable trace updates on all renderers (same as highlight-updates)
+  if (hook.rendererInterfaces) {
+    for (const [, renderer] of hook.rendererInterfaces) {
+      if (typeof renderer.setTraceUpdatesEnabled === "function") {
+        renderer.setTraceUpdatesEnabled(true);
+      }
+    }
+  }
+
+  // Subscribe to traceUpdates — fires whenever components render
+  if (typeof hook.sub === "function") {
+    traceUnsubscribe = hook.sub("traceUpdates", handleTraceForAutoTrack);
+  }
+}
+function stopTraceTracking() {
+  if (traceUnsubscribe) {
+    traceUnsubscribe();
+    traceUnsubscribe = null;
+  }
+  // Note: we don't disable traceUpdates on renderers because
+  // highlight-updates may also be using them
+}
+
+/** Called on every traceUpdates event — remeasure our target */
+function handleTraceForAutoTrack(_nodes) {
+  if (!autoTrackEnabled || !targetInstance) return;
+
+  // Don't filter by nativeTag — any render could have caused a layout
+  // shift (e.g. sibling resize, scroll). Just remeasure cheaply.
+  measureInstance(targetInstance).then(rect => {
+    if (rect && state.targetRect) {
+      // Only notify if position actually changed
+      const prev = state.targetRect;
+      if (Math.abs(rect.x - prev.x) > 0.5 || Math.abs(rect.y - prev.y) > 0.5 || Math.abs(rect.width - prev.width) > 0.5 || Math.abs(rect.height - prev.height) > 0.5) {
+        state = {
+          ...state,
+          targetRect: rect
+        };
+        notify();
+      }
+    }
+  });
+}
+function getImageSize(uri) {
+  return new Promise(resolve => {
+    RNImage.getSize(uri, (width, height) => resolve({
+      width,
+      height
+    }), () => resolve(null));
+  });
+}
+export const ImageOverlayController = {
+  subscribe(listener) {
+    listeners.add(listener);
+    listener(state);
+    return () => listeners.delete(listener);
+  },
+  getState() {
+    return state;
+  },
+  // ─── Component Match Mode ───────────────────────────────────────────
+
+  async setTarget(instance, label, fiber) {
+    targetInstance = instance;
+    targetLabel = label;
+    const instanceToMeasure = fiber?.stateNode ?? instance;
+    const {
+      rect,
+      freshInstance
+    } = await measureWithFallback(instanceToMeasure, label);
+    targetInstance = freshInstance;
+    const tag = getNativeTag(targetInstance);
+    state = {
+      ...state,
+      mode: "component",
+      targetTag: tag,
+      targetLabel: label,
+      targetRect: rect
+    };
+    notify();
+  },
+  async setImageUri(uri) {
+    const size = await getImageSize(uri);
+    let autoScale = 1.0;
+    if (size && state.targetRect && size.width > 0) {
+      autoScale = state.targetRect.width / size.width;
+    }
+    state = {
+      ...state,
+      imageUri: uri,
+      imageWidth: size?.width ?? null,
+      imageHeight: size?.height ?? null,
+      scale: autoScale,
+      showOutline: false
+    };
+    notify();
+  },
+  setOpacity(value) {
+    state = {
+      ...state,
+      opacity: Math.max(0, Math.min(1, value))
+    };
+    notify();
+  },
+  setScale(value) {
+    state = {
+      ...state,
+      scale: Math.max(0.01, Math.min(5, value))
+    };
+    notify();
+  },
+  setOffset(x, y) {
+    state = {
+      ...state,
+      offsetX: x,
+      offsetY: y
+    };
+    notify();
+  },
+  toggleInvertX() {
+    state = {
+      ...state,
+      invertX: !state.invertX
+    };
+    notify();
+  },
+  toggleInvertY() {
+    state = {
+      ...state,
+      invertY: !state.invertY
+    };
+    notify();
+  },
+  setLocked(locked) {
+    state = {
+      ...state,
+      locked
+    };
+    notify();
+  },
+  setAutoTrack(enabled) {
+    autoTrackEnabled = enabled;
+    if (enabled) {
+      startTraceTracking();
+    } else {
+      stopTraceTracking();
+    }
+  },
+  isAutoTracking() {
+    return autoTrackEnabled;
+  },
+  setShowOutline(show) {
+    state = {
+      ...state,
+      showOutline: show
+    };
+    notify();
+  },
+  setEnabled(enabled) {
+    state = {
+      ...state,
+      enabled
+    };
+    notify();
+  },
+  toggle() {
+    state = {
+      ...state,
+      enabled: !state.enabled
+    };
+    notify();
+  },
+  fitWidth() {
+    if (state.imageWidth && state.targetRect && state.imageWidth > 0) {
+      state = {
+        ...state,
+        scale: state.targetRect.width / state.imageWidth
+      };
+      notify();
+    }
+  },
+  fitHeight() {
+    if (state.imageHeight && state.targetRect && state.imageHeight > 0) {
+      state = {
+        ...state,
+        scale: state.targetRect.height / state.imageHeight
+      };
+      notify();
+    }
+  },
+  resetSettings() {
+    if (state.mode === "free") {
+      const screen = Dimensions.get("window");
+      const w = state.imageWidth ?? 200;
+      const h = state.imageHeight ?? 200;
+      state = {
+        ...state,
+        opacity: 0.5,
+        freeX: (screen.width - w) / 2,
+        freeY: (screen.height - h) / 2,
+        freeWidth: w,
+        freeHeight: h
+      };
+    } else {
+      let autoScale = 1.0;
+      if (state.imageWidth && state.targetRect && state.imageWidth > 0) {
+        autoScale = state.targetRect.width / state.imageWidth;
+      }
+      state = {
+        ...state,
+        opacity: 0.5,
+        scale: autoScale,
+        offsetX: 0,
+        offsetY: 0
+      };
+    }
+    notify();
+  },
+  async remeasure() {
+    if (!targetLabel) return;
+    const {
+      rect,
+      freshInstance
+    } = await measureWithFallback(targetInstance, targetLabel);
+    targetInstance = freshInstance;
+    if (rect) {
+      state = {
+        ...state,
+        targetRect: rect
+      };
+      notify();
+    }
+  },
+  // ─── Free Placement Mode ───────────────────────────────────────────
+
+  async startFreeMode(uri) {
+    const size = await getImageSize(uri);
+    const screen = Dimensions.get("window");
+    const w = size?.width ?? 200;
+    const h = size?.height ?? 200;
+
+    // Scale down if image is larger than 80% of screen
+    let displayW = w;
+    let displayH = h;
+    const maxW = screen.width * 0.8;
+    const maxH = screen.height * 0.6;
+    if (displayW > maxW || displayH > maxH) {
+      const ratio = Math.min(maxW / displayW, maxH / displayH);
+      displayW = Math.round(displayW * ratio);
+      displayH = Math.round(displayH * ratio);
+    }
+    state = {
+      ...state,
+      mode: "free",
+      enabled: true,
+      imageUri: uri,
+      imageWidth: size?.width ?? null,
+      imageHeight: size?.height ?? null,
+      opacity: 0.5,
+      freeX: Math.round((screen.width - displayW) / 2),
+      freeY: Math.round((screen.height - displayH) / 2),
+      freeWidth: Math.round(displayW),
+      freeHeight: Math.round(displayH)
+    };
+    notify();
+  },
+  setFreePosition(x, y) {
+    state = {
+      ...state,
+      freeX: x,
+      freeY: y
+    };
+    notify();
+  },
+  setFreeDimensions(width, height, x, y) {
+    state = {
+      ...state,
+      freeWidth: width,
+      freeHeight: height,
+      freeX: x,
+      freeY: y
+    };
+    notify();
+  },
+  // ─── Shared ─────────────────────────────────────────────────────────
+
+  reset() {
+    stopTraceTracking();
+    autoTrackEnabled = false;
+    trackingNativeTag = null;
+    targetInstance = null;
+    targetLabel = null;
+    state = {
+      ...DEFAULT_STATE
+    };
+    notify();
+  }
+};

package/lib/module/imageOverlay/utils/componentMeasurement.js

@@ -0,0 +1,102 @@
+"use strict";
+
+/**
+ * Component measurement utilities for image overlay positioning.
+ * Adapted from debug-borders/utils/componentMeasurement.js
+ *
+ * Supports both Fabric (new arch) and Paper (legacy) measurement APIs.
+ */
+
+import { findNodeHandle, UIManager } from "react-native";
+/**
+ * Measures a component instance and returns its screen-space bounding rect.
+ * Tries multiple strategies to handle Fabric, Paper, and edge cases.
+ */
+export function measureInstance(instance) {
+  return new Promise(resolve => {
+    try {
+      // Build a list of candidates to try measuring
+      const candidates = [];
+
+      // Direct instance (ReactFabricHostComponent has measure/getBoundingClientRect)
+      if (instance) candidates.push(instance);
+
+      // Fabric: instance.canonical.publicInstance
+      if (instance?.canonical?.publicInstance) {
+        candidates.push(instance.canonical.publicInstance);
+      }
+      // Fabric fallback: instance.canonical itself
+      if (instance?.canonical && instance.canonical !== instance) {
+        candidates.push(instance.canonical);
+      }
+
+      // Try getBoundingClientRect first (modern Fabric, synchronous)
+      for (const publicInstance of candidates) {
+        if (typeof publicInstance.getBoundingClientRect === "function") {
+          try {
+            const rect = publicInstance.getBoundingClientRect();
+            if (rect && typeof rect.x === "number" && typeof rect.y === "number" && typeof rect.width === "number" && typeof rect.height === "number" && rect.width > 0 && rect.height > 0) {
+              resolve({
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height
+              });
+              return;
+            }
+          } catch {
+            // Try next candidate
+          }
+        }
+      }
+
+      // Try measure() callback on all candidates
+      for (const publicInstance of candidates) {
+        if (typeof publicInstance.measure === "function") {
+          const timeout = setTimeout(() => resolve(null), 200);
+          publicInstance.measure((_x, _y, width, height, pageX, pageY) => {
+            clearTimeout(timeout);
+            if (pageX != null && pageY != null && width != null && height != null && width > 0 && height > 0) {
+              resolve({
+                x: pageX,
+                y: pageY,
+                width,
+                height
+              });
+            } else {
+              resolve(null);
+            }
+          });
+          return;
+        }
+      }
+
+      // Last resort: try findNodeHandle + UIManager.measure
+      try {
+        const nodeHandle = findNodeHandle(instance);
+        if (nodeHandle != null) {
+          const timeout = setTimeout(() => resolve(null), 200);
+          UIManager.measure(nodeHandle, (_x, _y, width, height, pageX, pageY) => {
+            clearTimeout(timeout);
+            if (pageX != null && pageY != null && width != null && height != null && width > 0 && height > 0) {
+              resolve({
+                x: pageX,
+                y: pageY,
+                width,
+                height
+              });
+            } else {
+              resolve(null);
+            }
+          });
+          return;
+        }
+      } catch {
+        // findNodeHandle not available or failed
+      }
+      resolve(null);
+    } catch {
+      resolve(null);
+    }
+  });
+}