@buoy-gg/image-overlay 7.0.40 → 7.0.42

package/lib/commonjs/imageOverlay/components/ImageOverlayModal.js

@@ -1,875 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImageOverlayModal = ImageOverlayModal;
-exports.ImageOverlayToolView = ImageOverlayToolView;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _ImageOverlayController = require("../utils/ImageOverlayController");
-var _fiberScanner = require("../utils/fiberScanner");
-var _TargetList = require("./TargetList");
-var _OverlayControls = require("./OverlayControls");
-var _jsxRuntime = require("react/jsx-runtime");
-// Module-level so it survives remounts from JsModal
-let persistedImageUrl = "";
-function ImageOverlayModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false,
-  initialModalState,
-  minimizeTargetPosition,
-  inline = false,
-  initialView
-}) {
-  const [view, setView] = (0, _react.useState)(() => {
-    if (initialView) return initialView;
-    const s = _ImageOverlayController.ImageOverlayController.getState();
-    if (s.mode === "free") return "free";
-    if (s.targetRect) return "controls";
-    return "idle";
-  });
-  // Opening straight onto the target list has to arrive scanned — the list is
-  // otherwise only ever filled by the button that navigates to it.
-  const [targets, setTargets] = (0, _react.useState)(() => initialView === "targets" ? (0, _fiberScanner.scanForImageTargets)() : []);
-  const [state, setState] = (0, _react.useState)(() => _ImageOverlayController.ImageOverlayController.getState());
-  const [imageUrl, setImageUrl] = (0, _react.useState)(persistedImageUrl);
-  const [autoTrack, setAutoTrack] = (0, _react.useState)(() => _ImageOverlayController.ImageOverlayController.isAutoTracking());
-  (0, _react.useEffect)(() => {
-    persistedImageUrl = imageUrl;
-  }, [imageUrl]);
-  (0, _react.useEffect)(() => {
-    return _ImageOverlayController.ImageOverlayController.subscribe(setState);
-  }, []);
-
-  // Sync auto-track toggle with controller
-  (0, _react.useEffect)(() => {
-    _ImageOverlayController.ImageOverlayController.setAutoTrack(autoTrack);
-    return () => {
-      // Don't stop tracking on unmount — let it persist while modal is minimized
-    };
-  }, [autoTrack]);
-  const handleScan = (0, _react.useCallback)(() => {
-    const found = (0, _fiberScanner.scanForImageTargets)();
-    setTargets(found);
-    setView("targets");
-  }, []);
-  const handleSelectTarget = (0, _react.useCallback)(async target => {
-    await _ImageOverlayController.ImageOverlayController.setTarget(target.instance, target.label, target.fiber);
-    if (persistedImageUrl.trim()) {
-      await _ImageOverlayController.ImageOverlayController.setImageUri(persistedImageUrl.trim());
-      _ImageOverlayController.ImageOverlayController.setEnabled(true);
-    }
-    setView("controls");
-  }, []);
-  const handleLoadImage = (0, _react.useCallback)(async () => {
-    const url = persistedImageUrl.trim();
-    if (!url) return;
-    if (view === "free") {
-      await _ImageOverlayController.ImageOverlayController.startFreeMode(url);
-    } else {
-      await _ImageOverlayController.ImageOverlayController.setImageUri(url);
-      _ImageOverlayController.ImageOverlayController.setEnabled(true);
-    }
-  }, [view]);
-  const handlePasteImage = (0, _react.useCallback)(async () => {
-    // Try expo-clipboard (supports images)
-    let expoClipboard = null;
-    try {
-      expoClipboard = require("expo-clipboard");
-    } catch {/* not installed */}
-
-    // Only fall back to @react-native-clipboard/clipboard when expo-clipboard
-    // isn't present. Requiring it runs TurboModuleRegistry.getEnforcing('RNCClipboard'),
-    // which crashes in Expo Go where that native module isn't in the binary.
-    let rnClipboard = null;
-    if (!expoClipboard) {
-      try {
-        const mod = require("@react-native-clipboard/clipboard");
-        rnClipboard = mod.default || mod;
-      } catch {/* not installed */}
-    }
-
-    // No clipboard library at all
-    if (!expoClipboard && !rnClipboard) {
-      _reactNative.Alert.alert("Clipboard not available", "Install expo-clipboard or @react-native-clipboard/clipboard to use paste.");
-      return;
-    }
-    try {
-      // 1. Try image paste (expo-clipboard only)
-      if (expoClipboard && typeof expoClipboard.hasImageAsync === "function") {
-        const hasImage = await expoClipboard.hasImageAsync();
-        if (hasImage) {
-          const image = await expoClipboard.getImageAsync({
-            format: "png"
-          });
-          if (image?.data) {
-            if (view === "free") {
-              await _ImageOverlayController.ImageOverlayController.startFreeMode(image.data);
-            } else {
-              await _ImageOverlayController.ImageOverlayController.setImageUri(image.data);
-              _ImageOverlayController.ImageOverlayController.setEnabled(true);
-            }
-            return;
-          }
-        }
-      }
-
-      // 2. Try text paste as URL (either library)
-      let text = null;
-      if (expoClipboard && typeof expoClipboard.getStringAsync === "function") {
-        text = await expoClipboard.getStringAsync();
-      } else if (rnClipboard && typeof rnClipboard.getString === "function") {
-        text = await rnClipboard.getString();
-      }
-      if (text && (text.startsWith("http") || text.startsWith("data:"))) {
-        setImageUrl(text);
-        persistedImageUrl = text;
-        return;
-      }
-
-      // 3. Nothing useful found
-      if (!expoClipboard) {
-        // RN clipboard can't read images — tell them why
-        _reactNative.Alert.alert("Image paste requires expo-clipboard", "Your project uses @react-native-clipboard/clipboard which only supports text. Install expo-clipboard to paste images directly, or paste an image URL instead.");
-      } else {
-        _reactNative.Alert.alert("No image detected", "Try saving your design image, opening it in Photos or Preview, and copying it from there.");
-      }
-    } catch {
-      _reactNative.Alert.alert("Paste failed", "Something went wrong reading the clipboard. Try copying the image again.");
-    }
-  }, [view]);
-  const handleReset = (0, _react.useCallback)(() => {
-    _ImageOverlayController.ImageOverlayController.reset();
-    persistedImageUrl = "";
-    setView("idle");
-    setImageUrl("");
-    setTargets([]);
-  }, []);
-  const handleBack = (0, _react.useCallback)(() => {
-    if (view === "controls") {
-      const found = (0, _fiberScanner.scanForImageTargets)();
-      setTargets(found);
-      setView("targets");
-    } else if (view === "targets" || view === "free") {
-      _ImageOverlayController.ImageOverlayController.reset();
-      setView("idle");
-    } else {
-      setView("idle");
-    }
-  }, [view]);
-  const headerTitle = (() => {
-    switch (view) {
-      case "targets":
-        return `Targets (${targets.length})`;
-      case "controls":
-        return state.targetLabel || "Component Match";
-      case "free":
-        return "Free Placement";
-      default:
-        return "Image Overlay";
-    }
-  })();
-  const headerContent = {
-    showToggleButton: false,
-    customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-        onBack: view !== "idle" ? handleBack : onBack
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-        title: headerTitle
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
-        children: [view === "targets" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.headerTextButton,
-          onPress: handleScan,
-          activeOpacity: 0.7,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.headerTextButtonLabel,
-            children: "Scan"
-          })
-        }), (view === "controls" || view === "free") && state.imageUri && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
-          isEnabled: state.enabled,
-          onToggle: () => _ImageOverlayController.ImageOverlayController.toggle(),
-          accessibilityLabel: "Toggle image overlay"
-        }), view !== "idle" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.headerActionButton,
-          onPress: handleReset,
-          activeOpacity: 0.7,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
-            size: 14,
-            color: _sharedUi.night.color.textSecondary
-          })
-        })]
-      })]
-    })
-  };
-  const body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
-    children: [view === "idle" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.homeContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.homeSubtitle,
-        children: "Choose a mode"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.modeGrid,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: styles.modePanel,
-          onPress: handleScan,
-          activeOpacity: 0.7,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.modeIconCircle, {
-              backgroundColor: _sharedUi.night.color.accentSoft
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SquareDashed, {
-              size: 24,
-              color: _sharedUi.night.color.accent
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: styles.modePanelTitle,
-            children: ["Component", "\n", "Match"]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.modePanelDesc,
-            children: "Overlay on a tagged component"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: styles.modePanel,
-          onPress: () => setView("free"),
-          activeOpacity: 0.7,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.modeIconCircle, {
-              backgroundColor: _sharedUi.night.color.accentSoft
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Image, {
-              size: 24,
-              color: _sharedUi.night.color.accent
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: styles.modePanelTitle,
-            children: ["Free", "\n", "Placement"]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.modePanelDesc,
-            children: "Drag and resize anywhere"
-          })]
-        })]
-      })]
-    }), view === "targets" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TargetList.TargetList, {
-      targets: targets,
-      onSelect: handleSelectTarget
-    }), view === "controls" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.controlsContainer,
-      children: [state.targetRect && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.infoCard,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.infoRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.infoLabel,
-            children: "Component"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.infoValue,
-            children: state.targetLabel
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.infoRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.infoLabel,
-            children: "Size"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: styles.infoValueMono,
-            children: [Math.round(state.targetRect.width), " x ", Math.round(state.targetRect.height)]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.infoRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.infoLabel,
-            children: "Position"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: styles.infoValueMono,
-            children: [Math.round(state.targetRect.x), ", ", Math.round(state.targetRect.y)]
-          })]
-        }), state.imageWidth != null && state.imageHeight != null && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.infoRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.infoLabel,
-            children: "Image"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: styles.infoValueMono,
-            children: [state.imageWidth, " x ", state.imageHeight]
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.inputSection,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.sectionLabel,
-          children: "Image"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.pasteButton,
-          onPress: handlePasteImage,
-          activeOpacity: 0.7,
-          accessibilityLabel: "Paste from clipboard",
-          accessibilityRole: "button",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.pasteButtonText,
-            children: "Paste from Clipboard"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.urlRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-            style: styles.urlInput,
-            value: imageUrl,
-            onChangeText: setImageUrl,
-            placeholder: "or enter URL...",
-            placeholderTextColor: _sharedUi.night.color.placeholder,
-            autoCapitalize: "none",
-            autoCorrect: false
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [styles.loadButton, !imageUrl.trim() && styles.loadButtonDisabled],
-            onPress: handleLoadImage,
-            disabled: !imageUrl.trim(),
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.loadButtonText,
-              children: "Load"
-            })
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.toggleSection,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToggleRow, {
-          label: "Show Outline",
-          value: state.showOutline,
-          onValueChange: v => _ImageOverlayController.ImageOverlayController.setShowOutline(v)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToggleRow, {
-          label: "Auto Track",
-          value: autoTrack,
-          onValueChange: setAutoTrack
-        }), state.imageUri && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.blendRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.toggleLabel,
-              children: "Opacity"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.blendButtons,
-              children: [0, 25, 50, 75, 100].map(pct => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                style: [styles.blendButton, Math.round(state.opacity * 100) === pct && styles.blendButtonActive],
-                onPress: () => _ImageOverlayController.ImageOverlayController.setOpacity(pct / 100),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                  style: [styles.blendButtonText, Math.round(state.opacity * 100) === pct && styles.blendButtonTextActive],
-                  children: [pct, "%"]
-                })
-              }, pct))
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.blendRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.toggleLabel,
-              children: "Flip"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.blendButtons,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                style: [styles.blendButton, state.invertX && styles.blendButtonActive],
-                onPress: () => _ImageOverlayController.ImageOverlayController.toggleInvertX(),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: [styles.blendButtonText, state.invertX && styles.blendButtonTextActive],
-                  children: "Horizontal"
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                style: [styles.blendButton, state.invertY && styles.blendButtonActive],
-                onPress: () => _ImageOverlayController.ImageOverlayController.toggleInvertY(),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: [styles.blendButtonText, state.invertY && styles.blendButtonTextActive],
-                  children: "Vertical"
-                })
-              })]
-            })]
-          })]
-        })]
-      }), state.imageUri && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OverlayControls.OverlayControls, {
-        opacity: state.opacity,
-        scale: state.scale,
-        offsetX: state.offsetX,
-        offsetY: state.offsetY,
-        onOpacityChange: v => _ImageOverlayController.ImageOverlayController.setOpacity(v),
-        onScaleChange: v => _ImageOverlayController.ImageOverlayController.setScale(v),
-        onOffsetChange: (x, y) => _ImageOverlayController.ImageOverlayController.setOffset(x, y)
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.actions,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.actionButton,
-          onPress: () => _ImageOverlayController.ImageOverlayController.resetSettings(),
-          activeOpacity: 0.7,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.actionButtonText,
-            children: "Reset Settings"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.actionButton,
-          onPress: () => _ImageOverlayController.ImageOverlayController.remeasure(),
-          activeOpacity: 0.7,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.actionButtonText,
-            children: "Remeasure"
-          })
-        })]
-      })]
-    }), view === "free" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.controlsContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.inputSection,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.sectionLabel,
-          children: "Image"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.pasteButton,
-          onPress: handlePasteImage,
-          activeOpacity: 0.7,
-          accessibilityLabel: "Paste from clipboard",
-          accessibilityRole: "button",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.pasteButtonText,
-            children: "Paste from Clipboard"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.urlRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-            style: styles.urlInput,
-            value: imageUrl,
-            onChangeText: setImageUrl,
-            placeholder: "or enter URL...",
-            placeholderTextColor: _sharedUi.night.color.placeholder,
-            autoCapitalize: "none",
-            autoCorrect: false
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [styles.loadButton, !imageUrl.trim() && styles.loadButtonDisabled],
-            onPress: handleLoadImage,
-            disabled: !imageUrl.trim(),
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.loadButtonText,
-              children: "Load"
-            })
-          })]
-        })]
-      }), state.imageUri && state.mode === "free" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.infoCard,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.infoRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.infoLabel,
-              children: "Position"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-              style: styles.infoValueMono,
-              children: [Math.round(state.freeX), ", ", Math.round(state.freeY)]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.infoRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.infoLabel,
-              children: "Size"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-              style: styles.infoValueMono,
-              children: [Math.round(state.freeWidth), " x ", Math.round(state.freeHeight)]
-            })]
-          }), state.imageWidth != null && state.imageHeight != null && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.infoRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.infoLabel,
-              children: "Original"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-              style: styles.infoValueMono,
-              children: [state.imageWidth, " x ", state.imageHeight]
-            })]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.inputSection,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OverlayControls.OverlayControls, {
-            opacity: state.opacity,
-            scale: 1,
-            offsetX: 0,
-            offsetY: 0,
-            onOpacityChange: v => _ImageOverlayController.ImageOverlayController.setOpacity(v),
-            onScaleChange: () => {},
-            onOffsetChange: () => {},
-            opacityOnly: true
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.toggleSection,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToggleRow, {
-            label: "Lock Position",
-            tone: "warning",
-            value: state.locked,
-            onValueChange: v => _ImageOverlayController.ImageOverlayController.setLocked(v)
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.blendRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.toggleLabel,
-              children: "Opacity"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.blendButtons,
-              children: [0, 25, 50, 75, 100].map(pct => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                style: [styles.blendButton, Math.round(state.opacity * 100) === pct && styles.blendButtonActive],
-                onPress: () => _ImageOverlayController.ImageOverlayController.setOpacity(pct / 100),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                  style: [styles.blendButtonText, Math.round(state.opacity * 100) === pct && styles.blendButtonTextActive],
-                  children: [pct, "%"]
-                })
-              }, pct))
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.blendRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.toggleLabel,
-              children: "Flip"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.blendButtons,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                style: [styles.blendButton, state.invertX && styles.blendButtonActive],
-                onPress: () => _ImageOverlayController.ImageOverlayController.toggleInvertX(),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: [styles.blendButtonText, state.invertX && styles.blendButtonTextActive],
-                  children: "Horizontal"
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                style: [styles.blendButton, state.invertY && styles.blendButtonActive],
-                onPress: () => _ImageOverlayController.ImageOverlayController.toggleInvertY(),
-                activeOpacity: 0.7,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: [styles.blendButtonText, state.invertY && styles.blendButtonTextActive],
-                  children: "Vertical"
-                })
-              })]
-            })]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.actions,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: styles.actionButton,
-            onPress: () => _ImageOverlayController.ImageOverlayController.resetSettings(),
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.actionButtonText,
-              children: "Reset Position"
-            })
-          })
-        })]
-      })]
-    })]
-  });
-
-  // The ONLY difference between the phone and an embedded host is which shell
-  // the header and body go in. Everything above this is shared.
-  if (inline) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.inlineRoot,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.inlineHeader,
-        ..._sharedUi.windowDragProps,
-        children: headerContent.customContent
-      }), body]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
-    visible: visible,
-    onClose: onClose,
-    onMinimize: onMinimize,
-    minimizeTargetPosition: minimizeTargetPosition,
-    initialModalState: initialModalState,
-    header: headerContent,
-    initialMode: "bottomSheet",
-    persistenceKey: "buoy-image-overlay-modal",
-    enablePersistence: true,
-    children: body
-  });
-}
-
-/**
- * The same Image Overlay tool as `ImageOverlayModal`, rendered INLINE for hosts
- * that place tools in a panel rather than a bottom sheet (the docs-site live
- * demo). Exists so there is exactly one implementation of the tool's header,
- * mode chooser, target list and controls.
- *
- * `initialView` seeds which screen it opens on — the view is otherwise internal
- * state reachable only by tapping.
- */
-function ImageOverlayToolView(props = {}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageOverlayModal, {
-    ...props,
-    inline: true,
-    visible: true,
-    onClose: () => {}
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  inlineRoot: {
-    flex: 1,
-    minHeight: 0,
-    backgroundColor: _sharedUi.macOSColors.background.base
-  },
-  inlineHeader: {
-    borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.macOSColors.border.default,
-    // Clear, like Bench — the host's hoisted sky shows through the header.
-    backgroundColor: "transparent"
-  },
-  container: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  headerTextButton: {
-    height: 32,
-    paddingHorizontal: 12,
-    borderRadius: 8,
-    backgroundColor: _sharedUi.night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerTextButtonLabel: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: _sharedUi.night.color.accent
-  },
-  headerActionButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: _sharedUi.night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  // Home — mode selection
-  homeContainer: {
-    flex: 1,
-    paddingHorizontal: 12,
-    paddingTop: 16,
-    paddingBottom: 20,
-    gap: 12
-  },
-  homeSubtitle: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textTertiary,
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
-    textAlign: "center"
-  },
-  modeGrid: {
-    flexDirection: "row",
-    gap: 10
-  },
-  modePanel: {
-    flex: 1,
-    alignItems: "center",
-    paddingVertical: 20,
-    paddingHorizontal: 12,
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    gap: 8
-  },
-  modeIconCircle: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: 4
-  },
-  modePanelTitle: {
-    fontSize: 13,
-    fontWeight: "700",
-    color: _sharedUi.night.color.text,
-    textAlign: "center",
-    lineHeight: 17
-  },
-  modePanelDesc: {
-    fontSize: 11,
-    color: _sharedUi.night.color.textTertiary,
-    textAlign: "center",
-    lineHeight: 15
-  },
-  // Controls
-  controlsContainer: {
-    flex: 1,
-    paddingTop: 8,
-    paddingBottom: 24,
-    gap: 10
-  },
-  infoCard: {
-    marginHorizontal: 12,
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    padding: 10,
-    gap: 4
-  },
-  infoRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-  },
-  infoLabel: {
-    fontSize: 11,
-    fontWeight: "500",
-    color: _sharedUi.night.color.textTertiary,
-    textTransform: "uppercase",
-    letterSpacing: 0.3
-  },
-  infoValue: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: _sharedUi.night.color.text
-  },
-  infoValueMono: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: _sharedUi.night.color.text,
-    fontFamily: _sharedUi.monoFont
-  },
-  inputSection: {
-    paddingHorizontal: 12,
-    gap: 6
-  },
-  sectionLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textTertiary,
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  pasteButton: {
-    paddingVertical: 10,
-    borderRadius: 8,
-    backgroundColor: _sharedUi.night.color.accentSoft,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.accentBorderStrong,
-    alignItems: "center"
-  },
-  pasteButtonText: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: _sharedUi.night.color.accent
-  },
-  urlRow: {
-    flexDirection: "row",
-    gap: 8
-  },
-  urlInput: {
-    flex: 1,
-    height: 36,
-    borderRadius: 10,
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    paddingHorizontal: 12,
-    fontSize: 13,
-    color: _sharedUi.night.color.text
-  },
-  loadButton: {
-    height: 36,
-    paddingHorizontal: 14,
-    borderRadius: 8,
-    backgroundColor: _sharedUi.night.color.accent,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  loadButtonDisabled: {
-    opacity: 0.4
-  },
-  loadButtonText: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: _sharedUi.night.color.onAccent
-  },
-  toggleSection: {
-    paddingHorizontal: 12,
-    gap: 6
-  },
-  toggleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 8
-  },
-  toggleLabel: {
-    fontSize: 13,
-    fontWeight: "500",
-    color: _sharedUi.night.color.textSecondary
-  },
-  blendRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 6
-  },
-  blendButtons: {
-    flexDirection: "row",
-    gap: 4
-  },
-  blendButton: {
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 6,
-    backgroundColor: "transparent"
-  },
-  blendButtonActive: {
-    backgroundColor: _sharedUi.night.color.accentSoft
-  },
-  blendButtonText: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textTertiary
-  },
-  blendButtonTextActive: {
-    color: _sharedUi.night.color.accent
-  },
-  actions: {
-    flexDirection: "row",
-    paddingHorizontal: 12,
-    gap: 8,
-    marginTop: 4
-  },
-  actionButton: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 8,
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border
-  },
-  actionButtonText: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: _sharedUi.night.color.textSecondary
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ImageOverlayModal=ImageOverlayModal;exports.ImageOverlayToolView=ImageOverlayToolView;var _imageClipboard=require("../utils/imageClipboard");var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _ImageOverlayController=require("../utils/ImageOverlayController");var _fiberScanner=require("../utils/fiberScanner");var _TargetList=require("./TargetList");var _OverlayControls=require("./OverlayControls");var _jsxRuntime=require("react/jsx-runtime");let persistedImageUrl="";function ImageOverlayModal({visible:c,onClose:m,onBack:T,onMinimize:C,enableSharedModalDimensions:z=false,initialModalState:j,minimizeTargetPosition:v,inline:O=false,initialView:d}){const[o,l]=(0,_react.useState)(()=>{if(d)return d;const e=_ImageOverlayController.ImageOverlayController.getState();if(e.mode==="free")return"free";if(e.targetRect)return"controls";return"idle"});const[y,g]=(0,_react.useState)(()=>d==="targets"?(0,_fiberScanner.scanForImageTargets)():[]);const[t,w]=(0,_react.useState)(()=>_ImageOverlayController.ImageOverlayController.getState());const[n,i]=(0,_react.useState)(persistedImageUrl);const[h,I]=(0,_react.useState)(()=>_ImageOverlayController.ImageOverlayController.isAutoTracking());(0,_react.useEffect)(()=>{persistedImageUrl=n},[n]);(0,_react.useEffect)(()=>{return _ImageOverlayController.ImageOverlayController.subscribe(w)},[]);(0,_react.useEffect)(()=>{_ImageOverlayController.ImageOverlayController.setAutoTrack(h);return()=>{}},[h]);const x=(0,_react.useCallback)(()=>{const e=(0,_fiberScanner.scanForImageTargets)();g(e);l("targets")},[]);const S=(0,_react.useCallback)(async e=>{await _ImageOverlayController.ImageOverlayController.setTarget(e.instance,e.label,e.fiber);if(persistedImageUrl.trim()){await _ImageOverlayController.ImageOverlayController.setImageUri(persistedImageUrl.trim());_ImageOverlayController.ImageOverlayController.setEnabled(true)}l("controls")},[]);const s=(0,_react.useCallback)(async()=>{const e=persistedImageUrl.trim();if(!e)return;if(o==="free"){await _ImageOverlayController.ImageOverlayController.startFreeMode(e)}else{await _ImageOverlayController.ImageOverlayController.setImageUri(e);_ImageOverlayController.ImageOverlayController.setEnabled(true)}},[o]);const b=(0,_react.useCallback)(async()=>{let e=null;try{e=(0,_imageClipboard.loadImageClipboard)()}catch{}let a=null;if(!e){try{const r=(0,_imageClipboard.loadTextClipboard)();a=r.default||r}catch{}}if(!e&&!a){_reactNative.Alert.alert("Clipboard not available","Install expo-clipboard or @react-native-clipboard/clipboard to use paste.");return}try{if(e&&typeof e.hasImageAsync==="function"){const P=await e.hasImageAsync();if(P){const u=await e.getImageAsync({format:"png"});if(u?.data){if(o==="free"){await _ImageOverlayController.ImageOverlayController.startFreeMode(u.data)}else{await _ImageOverlayController.ImageOverlayController.setImageUri(u.data);_ImageOverlayController.ImageOverlayController.setEnabled(true)}return}}}let r=null;if(e&&typeof e.getStringAsync==="function"){r=await e.getStringAsync()}else if(a&&typeof a.getString==="function"){r=await a.getString()}if(r&&(r.startsWith("http")||r.startsWith("data:"))){i(r);persistedImageUrl=r;return}if(!e){_reactNative.Alert.alert("Image paste requires expo-clipboard","Your project uses @react-native-clipboard/clipboard which only supports text. Install expo-clipboard to paste images directly, or paste an image URL instead.")}else{_reactNative.Alert.alert("No image detected","Try saving your design image, opening it in Photos or Preview, and copying it from there.")}}catch{_reactNative.Alert.alert("Paste failed","Something went wrong reading the clipboard. Try copying the image again.")}},[o]);const B=(0,_react.useCallback)(()=>{_ImageOverlayController.ImageOverlayController.reset();persistedImageUrl="";l("idle");i("");g([])},[]);const V=(0,_react.useCallback)(()=>{if(o==="controls"){const e=(0,_fiberScanner.scanForImageTargets)();g(e);l("targets")}else if(o==="targets"||o==="free"){_ImageOverlayController.ImageOverlayController.reset();l("idle")}else{l("idle")}},[o]);const R=(()=>{switch(o){case"targets":return`Targets (${y.length})`;case"controls":return t.targetLabel||"Component Match";case"free":return"Free Placement";default:return"Image Overlay"}})();const f={showToggleButton:false,customContent:(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:o!=="idle"?V:T}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:R}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[o==="targets"&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.headerTextButton,onPress:x,activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.headerTextButtonLabel,children:"Scan"})}),(o==="controls"||o==="free")&&t.imageUri&&(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{isEnabled:t.enabled,onToggle:()=>_ImageOverlayController.ImageOverlayController.toggle(),accessibilityLabel:"Toggle image overlay"}),o!=="idle"&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.headerActionButton,onPress:B,activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_sharedUi.Trash2,{size:14,color:_sharedUi.night.color.textSecondary})})]})]})};const p=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[o==="idle"&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.homeContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.homeSubtitle,children:"Choose a mode"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.modeGrid,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.modePanel,onPress:x,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.modeIconCircle,{backgroundColor:_sharedUi.night.color.accentSoft}],children:(0,_jsxRuntime.jsx)(_sharedUi.SquareDashed,{size:24,color:_sharedUi.night.color.accent})}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.modePanelTitle,children:["Component","\n","Match"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.modePanelDesc,children:"Overlay on a tagged component"})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.modePanel,onPress:()=>l("free"),activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.modeIconCircle,{backgroundColor:_sharedUi.night.color.accentSoft}],children:(0,_jsxRuntime.jsx)(_sharedUi.Image,{size:24,color:_sharedUi.night.color.accent})}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.modePanelTitle,children:["Free","\n","Placement"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.modePanelDesc,children:"Drag and resize anywhere"})]})]})]}),o==="targets"&&(0,_jsxRuntime.jsx)(_TargetList.TargetList,{targets:y,onSelect:S}),o==="controls"&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.controlsContainer,children:[t.targetRect&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoCard,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.infoLabel,children:"Component"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.infoValue,children:t.targetLabel})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.infoLabel,children:"Size"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.infoValueMono,children:[Math.round(t.targetRect.width)," x ",Math.round(t.targetRect.height)]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.infoLabel,children:"Position"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.infoValueMono,children:[Math.round(t.targetRect.x),", ",Math.round(t.targetRect.y)]})]}),t.imageWidth!=null&&t.imageHeight!=null&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.infoLabel,children:"Image"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.infoValueMono,children:[t.imageWidth," x ",t.imageHeight]})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inputSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionLabel,children:"Image"}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.pasteButton,onPress:b,activeOpacity:.7,accessibilityLabel:"Paste from clipboard",accessibilityRole:"button",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.pasteButtonText,children:"Paste from Clipboard"})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.urlRow,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{style:styles.urlInput,value:n,onChangeText:i,placeholder:"or enter URL...",placeholderTextColor:_sharedUi.night.color.placeholder,autoCapitalize:"none",autoCorrect:false,returnKeyType:"go",onSubmitEditing:s}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.loadButton,!n.trim()&&styles.loadButtonDisabled],onPress:s,disabled:!n.trim(),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.loadButtonText,children:"Load"})})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.toggleSection,children:[(0,_jsxRuntime.jsx)(_sharedUi.ToggleRow,{label:"Show Outline",value:t.showOutline,onValueChange:e=>_ImageOverlayController.ImageOverlayController.setShowOutline(e)}),(0,_jsxRuntime.jsx)(_sharedUi.ToggleRow,{label:"Auto Track",value:h,onValueChange:I}),t.imageUri&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.blendRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.toggleLabel,children:"Opacity"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.blendButtons,children:[0,25,50,75,100].map(e=>(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.blendButton,Math.round(t.opacity*100)===e&&styles.blendButtonActive],onPress:()=>_ImageOverlayController.ImageOverlayController.setOpacity(e/100),activeOpacity:.7,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.blendButtonText,Math.round(t.opacity*100)===e&&styles.blendButtonTextActive],children:[e,"%"]})},e))})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.blendRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.toggleLabel,children:"Flip"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.blendButtons,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.blendButton,t.invertX&&styles.blendButtonActive],onPress:()=>_ImageOverlayController.ImageOverlayController.toggleInvertX(),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.blendButtonText,t.invertX&&styles.blendButtonTextActive],children:"Horizontal"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.blendButton,t.invertY&&styles.blendButtonActive],onPress:()=>_ImageOverlayController.ImageOverlayController.toggleInvertY(),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.blendButtonText,t.invertY&&styles.blendButtonTextActive],children:"Vertical"})})]})]})]})]}),t.imageUri&&(0,_jsxRuntime.jsx)(_OverlayControls.OverlayControls,{opacity:t.opacity,scale:t.scale,offsetX:t.offsetX,offsetY:t.offsetY,onOpacityChange:e=>_ImageOverlayController.ImageOverlayController.setOpacity(e),onScaleChange:e=>_ImageOverlayController.ImageOverlayController.setScale(e),onOffsetChange:(e,a)=>_ImageOverlayController.ImageOverlayController.setOffset(e,a)}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actions,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.actionButton,onPress:()=>_ImageOverlayController.ImageOverlayController.resetSettings(),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionButtonText,children:"Reset Settings"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.actionButton,onPress:()=>_ImageOverlayController.ImageOverlayController.remeasure(),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionButtonText,children:"Remeasure"})})]})]}),o==="free"&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.controlsContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inputSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionLabel,children:"Image"}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.pasteButton,onPress:b,activeOpacity:.7,accessibilityLabel:"Paste from clipboard",accessibilityRole:"button",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.pasteButtonText,children:"Paste from Clipboard"})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.urlRow,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{style:styles.urlInput,value:n,onChangeText:i,placeholder:"or enter URL...",placeholderTextColor:_sharedUi.night.color.placeholder,autoCapitalize:"none",autoCorrect:false,returnKeyType:"go",onSubmitEditing:s}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.loadButton,!n.trim()&&styles.loadButtonDisabled],onPress:s,disabled:!n.trim(),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.loadButtonText,children:"Load"})})]})]}),t.imageUri&&t.mode==="free"&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoCard,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.infoLabel,children:"Position"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.infoValueMono,children:[Math.round(t.freeX),", ",Math.round(t.freeY)]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.infoLabel,children:"Size"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.infoValueMono,children:[Math.round(t.freeWidth)," x ",Math.round(t.freeHeight)]})]}),t.imageWidth!=null&&t.imageHeight!=null&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.infoLabel,children:"Original"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.infoValueMono,children:[t.imageWidth," x ",t.imageHeight]})]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.inputSection,children:(0,_jsxRuntime.jsx)(_OverlayControls.OverlayControls,{opacity:t.opacity,scale:1,offsetX:0,offsetY:0,onOpacityChange:e=>_ImageOverlayController.ImageOverlayController.setOpacity(e),onScaleChange:()=>{},onOffsetChange:()=>{},opacityOnly:true})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.toggleSection,children:[(0,_jsxRuntime.jsx)(_sharedUi.ToggleRow,{label:"Lock Position",tone:"warning",value:t.locked,onValueChange:e=>_ImageOverlayController.ImageOverlayController.setLocked(e)}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.blendRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.toggleLabel,children:"Opacity"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.blendButtons,children:[0,25,50,75,100].map(e=>(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.blendButton,Math.round(t.opacity*100)===e&&styles.blendButtonActive],onPress:()=>_ImageOverlayController.ImageOverlayController.setOpacity(e/100),activeOpacity:.7,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.blendButtonText,Math.round(t.opacity*100)===e&&styles.blendButtonTextActive],children:[e,"%"]})},e))})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.blendRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.toggleLabel,children:"Flip"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.blendButtons,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.blendButton,t.invertX&&styles.blendButtonActive],onPress:()=>_ImageOverlayController.ImageOverlayController.toggleInvertX(),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.blendButtonText,t.invertX&&styles.blendButtonTextActive],children:"Horizontal"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.blendButton,t.invertY&&styles.blendButtonActive],onPress:()=>_ImageOverlayController.ImageOverlayController.toggleInvertY(),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.blendButtonText,t.invertY&&styles.blendButtonTextActive],children:"Vertical"})})]})]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.actions,children:(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.actionButton,onPress:()=>_ImageOverlayController.ImageOverlayController.resetSettings(),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionButtonText,children:"Reset Position"})})})]})]})]});if(O){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inlineRoot,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.inlineHeader,..._sharedUi.windowDragProps,children:f.customContent}),p]})}return(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:c,onClose:m,onMinimize:C,minimizeTargetPosition:v,initialModalState:j,header:f,initialMode:"bottomSheet",persistenceKey:"buoy-image-overlay-modal",enablePersistence:true,children:p})}function ImageOverlayToolView(c={}){return(0,_jsxRuntime.jsx)(ImageOverlayModal,{...c,inline:true,visible:true,onClose:()=>{}})}const styles=_reactNative.StyleSheet.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:_sharedUi.macOSColors.background.base},inlineHeader:{borderBottomWidth:1,borderBottomColor:_sharedUi.macOSColors.border.default,backgroundColor:"transparent"},container:{flex:1,backgroundColor:"transparent"},headerTextButton:{height:32,paddingHorizontal:12,borderRadius:8,backgroundColor:_sharedUi.night.color.buttonSurface,borderWidth:1,borderColor:_sharedUi.night.color.border,alignItems:"center",justifyContent:"center"},headerTextButtonLabel:{fontSize:12,fontWeight:"600",color:_sharedUi.night.color.accent},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.night.color.buttonSurface,borderWidth:1,borderColor:_sharedUi.night.color.border,alignItems:"center",justifyContent:"center"},homeContainer:{flex:1,paddingHorizontal:12,paddingTop:16,paddingBottom:20,gap:12},homeSubtitle:{fontSize:12,fontWeight:"600",color:_sharedUi.night.color.textTertiary,textTransform:"uppercase",letterSpacing:.5,textAlign:"center"},modeGrid:{flexDirection:"row",gap:10},modePanel:{flex:1,alignItems:"center",paddingVertical:20,paddingHorizontal:12,backgroundColor:_sharedUi.night.color.surface,borderRadius:12,borderWidth:1,borderColor:_sharedUi.night.color.border,gap:8},modeIconCircle:{width:48,height:48,borderRadius:24,alignItems:"center",justifyContent:"center",marginBottom:4},modePanelTitle:{fontSize:13,fontWeight:"700",color:_sharedUi.night.color.text,textAlign:"center",lineHeight:17},modePanelDesc:{fontSize:11,color:_sharedUi.night.color.textTertiary,textAlign:"center",lineHeight:15},controlsContainer:{flex:1,paddingTop:8,paddingBottom:24,gap:10},infoCard:{marginHorizontal:12,backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:10,gap:4},infoRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},infoLabel:{fontSize:11,fontWeight:"500",color:_sharedUi.night.color.textTertiary,textTransform:"uppercase",letterSpacing:.3},infoValue:{fontSize:12,fontWeight:"600",color:_sharedUi.night.color.text},infoValueMono:{fontSize:12,fontWeight:"600",color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},inputSection:{paddingHorizontal:12,gap:6},sectionLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},pasteButton:{paddingVertical:10,borderRadius:8,backgroundColor:_sharedUi.night.color.accentSoft,borderWidth:1,borderColor:_sharedUi.night.color.accentBorderStrong,alignItems:"center"},pasteButtonText:{fontSize:13,fontWeight:"600",color:_sharedUi.night.color.accent},urlRow:{flexDirection:"row",gap:8},urlInput:{flex:1,height:36,borderRadius:10,backgroundColor:_sharedUi.night.color.surfaceElevated,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingHorizontal:12,fontSize:13,color:_sharedUi.night.color.text},loadButton:{height:36,paddingHorizontal:14,borderRadius:8,backgroundColor:_sharedUi.night.color.accent,justifyContent:"center",alignItems:"center"},loadButtonDisabled:{opacity:.4},loadButtonText:{fontSize:13,fontWeight:"600",color:_sharedUi.night.color.onAccent},toggleSection:{paddingHorizontal:12,gap:6},toggleRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingHorizontal:12,paddingVertical:8},toggleLabel:{fontSize:13,fontWeight:"500",color:_sharedUi.night.color.textSecondary},blendRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingHorizontal:12,paddingVertical:6},blendButtons:{flexDirection:"row",gap:4},blendButton:{paddingHorizontal:10,paddingVertical:5,borderRadius:6,backgroundColor:"transparent"},blendButtonActive:{backgroundColor:_sharedUi.night.color.accentSoft},blendButtonText:{fontSize:12,fontWeight:"600",color:_sharedUi.night.color.textTertiary},blendButtonTextActive:{color:_sharedUi.night.color.accent},actions:{flexDirection:"row",paddingHorizontal:12,gap:8,marginTop:4},actionButton:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:8,paddingHorizontal:12,borderRadius:8,backgroundColor:_sharedUi.night.color.surfaceElevated,borderWidth:1,borderColor:_sharedUi.night.color.border},actionButtonText:{fontSize:12,fontWeight:"500",color:_sharedUi.night.color.textSecondary}});