@buoy-gg/image-overlay 7.0.17 → 7.0.18

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

@@ -17,15 +17,20 @@ export function ImageOverlayModal({
   onMinimize,
   enableSharedModalDimensions = false,
   initialModalState,
-  minimizeTargetPosition
+  minimizeTargetPosition,
+  inline = false,
+  initialView
 }) {
   const [view, setView] = useState(() => {
+    if (initialView) return initialView;
     const s = ImageOverlayController.getState();
     if (s.mode === "free") return "free";
     if (s.targetRect) return "controls";
     return "idle";
   });
-  const [targets, setTargets] = useState([]);
+  // 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] = useState(() => initialView === "targets" ? scanForImageTargets() : []);
   const [state, setState] = useState(() => ImageOverlayController.getState());
   const [imageUrl, setImageUrl] = useState(persistedImageUrl);
   const [autoTrack, setAutoTrack] = useState(() => ImageOverlayController.isAutoTracking());
@@ -196,399 +201,440 @@ export function ImageOverlayModal({
       })]
     })
   };
-  return /*#__PURE__*/_jsx(JsModal, {
-    visible: visible,
-    onClose: onClose,
-    onMinimize: onMinimize,
-    minimizeTargetPosition: minimizeTargetPosition,
-    initialModalState: initialModalState,
-    header: headerContent,
-    initialMode: "bottomSheet",
-    persistenceKey: "buoy-image-overlay-modal",
-    enablePersistence: true,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.container,
-      children: [view === "idle" && /*#__PURE__*/_jsxs(View, {
-        style: styles.homeContainer,
+  const body = /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [view === "idle" && /*#__PURE__*/_jsxs(View, {
+      style: styles.homeContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.homeSubtitle,
+        children: "Choose a mode"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.modeGrid,
+        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.modePanel,
+          onPress: handleScan,
+          activeOpacity: 0.7,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.modeIconCircle, {
+              backgroundColor: macOSColors.semantic.success + "18"
+            }],
+            children: /*#__PURE__*/_jsx(SquareDashed, {
+              size: 24,
+              color: macOSColors.semantic.success
+            })
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.modePanelTitle,
+            children: ["Component", "\n", "Match"]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.modePanelDesc,
+            children: "Overlay on a tagged component"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.modePanel,
+          onPress: () => setView("free"),
+          activeOpacity: 0.7,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.modeIconCircle, {
+              backgroundColor: buoyColors.primary + "18"
+            }],
+            children: /*#__PURE__*/_jsx(Image, {
+              size: 24,
+              color: buoyColors.primary
+            })
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.modePanelTitle,
+            children: ["Free", "\n", "Placement"]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.modePanelDesc,
+            children: "Drag and resize anywhere"
+          })]
+        })]
+      })]
+    }), view === "targets" && /*#__PURE__*/_jsx(TargetList, {
+      targets: targets,
+      onSelect: handleSelectTarget
+    }), view === "controls" && /*#__PURE__*/_jsxs(View, {
+      style: styles.controlsContainer,
+      children: [state.targetRect && /*#__PURE__*/_jsxs(View, {
+        style: styles.infoCard,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.infoRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.infoLabel,
+            children: "Component"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.infoValue,
+            children: state.targetLabel
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.infoRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.infoLabel,
+            children: "Size"
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.infoValueMono,
+            children: [Math.round(state.targetRect.width), " x ", Math.round(state.targetRect.height)]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.infoRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.infoLabel,
+            children: "Position"
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.infoValueMono,
+            children: [Math.round(state.targetRect.x), ", ", Math.round(state.targetRect.y)]
+          })]
+        }), state.imageWidth != null && state.imageHeight != null && /*#__PURE__*/_jsxs(View, {
+          style: styles.infoRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.infoLabel,
+            children: "Image"
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.infoValueMono,
+            children: [state.imageWidth, " x ", state.imageHeight]
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.inputSection,
         children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.homeSubtitle,
-          children: "Choose a mode"
+          style: styles.sectionLabel,
+          children: "Image"
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.pasteButton,
+          onPress: handlePasteImage,
+          activeOpacity: 0.7,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.pasteButtonText,
+            children: "Paste from Clipboard"
+          })
         }), /*#__PURE__*/_jsxs(View, {
-          style: styles.modeGrid,
-          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: styles.modePanel,
-            onPress: handleScan,
-            activeOpacity: 0.7,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.modeIconCircle, {
-                backgroundColor: macOSColors.semantic.success + "18"
-              }],
-              children: /*#__PURE__*/_jsx(SquareDashed, {
-                size: 24,
-                color: macOSColors.semantic.success
-              })
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.modePanelTitle,
-              children: ["Component", "\n", "Match"]
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.modePanelDesc,
-              children: "Overlay on a tagged component"
-            })]
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: styles.modePanel,
-            onPress: () => setView("free"),
+          style: styles.urlRow,
+          children: [/*#__PURE__*/_jsx(TextInput, {
+            style: styles.urlInput,
+            value: imageUrl,
+            onChangeText: setImageUrl,
+            placeholder: "or enter URL...",
+            placeholderTextColor: macOSColors.text.muted,
+            autoCapitalize: "none",
+            autoCorrect: false
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.loadButton, !imageUrl.trim() && styles.loadButtonDisabled],
+            onPress: handleLoadImage,
+            disabled: !imageUrl.trim(),
             activeOpacity: 0.7,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.modeIconCircle, {
-                backgroundColor: buoyColors.primary + "18"
-              }],
-              children: /*#__PURE__*/_jsx(Image, {
-                size: 24,
-                color: buoyColors.primary
-              })
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.modePanelTitle,
-              children: ["Free", "\n", "Placement"]
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.modePanelDesc,
-              children: "Drag and resize anywhere"
-            })]
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.loadButtonText,
+              children: "Load"
+            })
           })]
         })]
-      }), view === "targets" && /*#__PURE__*/_jsx(TargetList, {
-        targets: targets,
-        onSelect: handleSelectTarget
-      }), view === "controls" && /*#__PURE__*/_jsxs(View, {
-        style: styles.controlsContainer,
-        children: [state.targetRect && /*#__PURE__*/_jsxs(View, {
-          style: styles.infoCard,
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.toggleSection,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.toggleRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.toggleLabel,
+            children: "Show Outline"
+          }), /*#__PURE__*/_jsx(Switch, {
+            value: state.showOutline,
+            onValueChange: v => ImageOverlayController.setShowOutline(v),
+            trackColor: {
+              false: macOSColors.background.hover,
+              true: buoyColors.primary
+            }
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.toggleRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.toggleLabel,
+            children: "Auto Track"
+          }), /*#__PURE__*/_jsx(Switch, {
+            value: autoTrack,
+            onValueChange: setAutoTrack,
+            trackColor: {
+              false: macOSColors.background.hover,
+              true: macOSColors.semantic.success
+            }
+          })]
+        }), state.imageUri && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.infoRow,
+            style: styles.blendRow,
             children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.infoLabel,
-              children: "Component"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.infoValue,
-              children: state.targetLabel
+              style: styles.toggleLabel,
+              children: "Opacity"
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.blendButtons,
+              children: [0, 25, 50, 75, 100].map(pct => /*#__PURE__*/_jsx(TouchableOpacity, {
+                style: [styles.blendButton, Math.round(state.opacity * 100) === pct && styles.blendButtonActive],
+                onPress: () => ImageOverlayController.setOpacity(pct / 100),
+                activeOpacity: 0.7,
+                children: /*#__PURE__*/_jsxs(Text, {
+                  style: [styles.blendButtonText, Math.round(state.opacity * 100) === pct && styles.blendButtonTextActive],
+                  children: [pct, "%"]
+                })
+              }, pct))
             })]
           }), /*#__PURE__*/_jsxs(View, {
+            style: styles.blendRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.toggleLabel,
+              children: "Flip"
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.blendButtons,
+              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                style: [styles.blendButton, state.invertX && styles.blendButtonActive],
+                onPress: () => ImageOverlayController.toggleInvertX(),
+                activeOpacity: 0.7,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.blendButtonText, state.invertX && styles.blendButtonTextActive],
+                  children: "Horizontal"
+                })
+              }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                style: [styles.blendButton, state.invertY && styles.blendButtonActive],
+                onPress: () => ImageOverlayController.toggleInvertY(),
+                activeOpacity: 0.7,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.blendButtonText, state.invertY && styles.blendButtonTextActive],
+                  children: "Vertical"
+                })
+              })]
+            })]
+          })]
+        })]
+      }), state.imageUri && /*#__PURE__*/_jsx(OverlayControls, {
+        opacity: state.opacity,
+        scale: state.scale,
+        offsetX: state.offsetX,
+        offsetY: state.offsetY,
+        onOpacityChange: v => ImageOverlayController.setOpacity(v),
+        onScaleChange: v => ImageOverlayController.setScale(v),
+        onOffsetChange: (x, y) => ImageOverlayController.setOffset(x, y)
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.actions,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.actionButton,
+          onPress: () => ImageOverlayController.resetSettings(),
+          activeOpacity: 0.7,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.actionButtonText,
+            children: "Reset Settings"
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.actionButton,
+          onPress: () => ImageOverlayController.remeasure(),
+          activeOpacity: 0.7,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.actionButtonText,
+            children: "Remeasure"
+          })
+        })]
+      })]
+    }), view === "free" && /*#__PURE__*/_jsxs(View, {
+      style: styles.controlsContainer,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.inputSection,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.sectionLabel,
+          children: "Image"
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.pasteButton,
+          onPress: handlePasteImage,
+          activeOpacity: 0.7,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.pasteButtonText,
+            children: "Paste from Clipboard"
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.urlRow,
+          children: [/*#__PURE__*/_jsx(TextInput, {
+            style: styles.urlInput,
+            value: imageUrl,
+            onChangeText: setImageUrl,
+            placeholder: "or enter URL...",
+            placeholderTextColor: macOSColors.text.muted,
+            autoCapitalize: "none",
+            autoCorrect: false
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.loadButton, !imageUrl.trim() && styles.loadButtonDisabled],
+            onPress: handleLoadImage,
+            disabled: !imageUrl.trim(),
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.loadButtonText,
+              children: "Load"
+            })
+          })]
+        })]
+      }), state.imageUri && state.mode === "free" && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.infoCard,
+          children: [/*#__PURE__*/_jsxs(View, {
             style: styles.infoRow,
             children: [/*#__PURE__*/_jsx(Text, {
               style: styles.infoLabel,
-              children: "Size"
+              children: "Position"
             }), /*#__PURE__*/_jsxs(Text, {
               style: styles.infoValueMono,
-              children: [Math.round(state.targetRect.width), " x ", Math.round(state.targetRect.height)]
+              children: [Math.round(state.freeX), ", ", Math.round(state.freeY)]
             })]
           }), /*#__PURE__*/_jsxs(View, {
             style: styles.infoRow,
             children: [/*#__PURE__*/_jsx(Text, {
               style: styles.infoLabel,
-              children: "Position"
+              children: "Size"
             }), /*#__PURE__*/_jsxs(Text, {
               style: styles.infoValueMono,
-              children: [Math.round(state.targetRect.x), ", ", Math.round(state.targetRect.y)]
+              children: [Math.round(state.freeWidth), " x ", Math.round(state.freeHeight)]
             })]
           }), state.imageWidth != null && state.imageHeight != null && /*#__PURE__*/_jsxs(View, {
             style: styles.infoRow,
             children: [/*#__PURE__*/_jsx(Text, {
               style: styles.infoLabel,
-              children: "Image"
+              children: "Original"
             }), /*#__PURE__*/_jsxs(Text, {
               style: styles.infoValueMono,
               children: [state.imageWidth, " x ", state.imageHeight]
             })]
           })]
-        }), /*#__PURE__*/_jsxs(View, {
+        }), /*#__PURE__*/_jsx(View, {
           style: styles.inputSection,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionLabel,
-            children: "Image"
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.pasteButton,
-            onPress: handlePasteImage,
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.pasteButtonText,
-              children: "Paste from Clipboard"
-            })
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.urlRow,
-            children: [/*#__PURE__*/_jsx(TextInput, {
-              style: styles.urlInput,
-              value: imageUrl,
-              onChangeText: setImageUrl,
-              placeholder: "or enter URL...",
-              placeholderTextColor: macOSColors.text.muted,
-              autoCapitalize: "none",
-              autoCorrect: false
-            }), /*#__PURE__*/_jsx(TouchableOpacity, {
-              style: [styles.loadButton, !imageUrl.trim() && styles.loadButtonDisabled],
-              onPress: handleLoadImage,
-              disabled: !imageUrl.trim(),
-              activeOpacity: 0.7,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.loadButtonText,
-                children: "Load"
-              })
-            })]
-          })]
+          children: /*#__PURE__*/_jsx(OverlayControls, {
+            opacity: state.opacity,
+            scale: 1,
+            offsetX: 0,
+            offsetY: 0,
+            onOpacityChange: v => ImageOverlayController.setOpacity(v),
+            onScaleChange: () => {},
+            onOffsetChange: () => {},
+            opacityOnly: true
+          })
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.toggleSection,
           children: [/*#__PURE__*/_jsxs(View, {
             style: styles.toggleRow,
             children: [/*#__PURE__*/_jsx(Text, {
               style: styles.toggleLabel,
-              children: "Show Outline"
+              children: "Lock Position"
             }), /*#__PURE__*/_jsx(Switch, {
-              value: state.showOutline,
-              onValueChange: v => ImageOverlayController.setShowOutline(v),
+              value: state.locked,
+              onValueChange: v => ImageOverlayController.setLocked(v),
               trackColor: {
                 false: macOSColors.background.hover,
-                true: buoyColors.primary
+                true: "#f59e0b"
               }
             })]
           }), /*#__PURE__*/_jsxs(View, {
-            style: styles.toggleRow,
+            style: styles.blendRow,
             children: [/*#__PURE__*/_jsx(Text, {
               style: styles.toggleLabel,
-              children: "Auto Track"
-            }), /*#__PURE__*/_jsx(Switch, {
-              value: autoTrack,
-              onValueChange: setAutoTrack,
-              trackColor: {
-                false: macOSColors.background.hover,
-                true: macOSColors.semantic.success
-              }
+              children: "Opacity"
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.blendButtons,
+              children: [0, 25, 50, 75, 100].map(pct => /*#__PURE__*/_jsx(TouchableOpacity, {
+                style: [styles.blendButton, Math.round(state.opacity * 100) === pct && styles.blendButtonActive],
+                onPress: () => ImageOverlayController.setOpacity(pct / 100),
+                activeOpacity: 0.7,
+                children: /*#__PURE__*/_jsxs(Text, {
+                  style: [styles.blendButtonText, Math.round(state.opacity * 100) === pct && styles.blendButtonTextActive],
+                  children: [pct, "%"]
+                })
+              }, pct))
             })]
-          }), state.imageUri && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.blendRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.toggleLabel,
-                children: "Opacity"
-              }), /*#__PURE__*/_jsx(View, {
-                style: styles.blendButtons,
-                children: [0, 25, 50, 75, 100].map(pct => /*#__PURE__*/_jsx(TouchableOpacity, {
-                  style: [styles.blendButton, Math.round(state.opacity * 100) === pct && styles.blendButtonActive],
-                  onPress: () => ImageOverlayController.setOpacity(pct / 100),
-                  activeOpacity: 0.7,
-                  children: /*#__PURE__*/_jsxs(Text, {
-                    style: [styles.blendButtonText, Math.round(state.opacity * 100) === pct && styles.blendButtonTextActive],
-                    children: [pct, "%"]
-                  })
-                }, pct))
-              })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.blendRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.toggleLabel,
+              children: "Flip"
             }), /*#__PURE__*/_jsxs(View, {
-              style: styles.blendRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.toggleLabel,
-                children: "Flip"
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.blendButtons,
-                children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-                  style: [styles.blendButton, state.invertX && styles.blendButtonActive],
-                  onPress: () => ImageOverlayController.toggleInvertX(),
-                  activeOpacity: 0.7,
-                  children: /*#__PURE__*/_jsx(Text, {
-                    style: [styles.blendButtonText, state.invertX && styles.blendButtonTextActive],
-                    children: "Horizontal"
-                  })
-                }), /*#__PURE__*/_jsx(TouchableOpacity, {
-                  style: [styles.blendButton, state.invertY && styles.blendButtonActive],
-                  onPress: () => ImageOverlayController.toggleInvertY(),
-                  activeOpacity: 0.7,
-                  children: /*#__PURE__*/_jsx(Text, {
-                    style: [styles.blendButtonText, state.invertY && styles.blendButtonTextActive],
-                    children: "Vertical"
-                  })
-                })]
+              style: styles.blendButtons,
+              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                style: [styles.blendButton, state.invertX && styles.blendButtonActive],
+                onPress: () => ImageOverlayController.toggleInvertX(),
+                activeOpacity: 0.7,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.blendButtonText, state.invertX && styles.blendButtonTextActive],
+                  children: "Horizontal"
+                })
+              }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                style: [styles.blendButton, state.invertY && styles.blendButtonActive],
+                onPress: () => ImageOverlayController.toggleInvertY(),
+                activeOpacity: 0.7,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.blendButtonText, state.invertY && styles.blendButtonTextActive],
+                  children: "Vertical"
+                })
               })]
             })]
           })]
-        }), state.imageUri && /*#__PURE__*/_jsx(OverlayControls, {
-          opacity: state.opacity,
-          scale: state.scale,
-          offsetX: state.offsetX,
-          offsetY: state.offsetY,
-          onOpacityChange: v => ImageOverlayController.setOpacity(v),
-          onScaleChange: v => ImageOverlayController.setScale(v),
-          onOffsetChange: (x, y) => ImageOverlayController.setOffset(x, y)
-        }), /*#__PURE__*/_jsxs(View, {
+        }), /*#__PURE__*/_jsx(View, {
           style: styles.actions,
-          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          children: /*#__PURE__*/_jsx(TouchableOpacity, {
             style: styles.actionButton,
             onPress: () => ImageOverlayController.resetSettings(),
             activeOpacity: 0.7,
             children: /*#__PURE__*/_jsx(Text, {
               style: styles.actionButtonText,
-              children: "Reset Settings"
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.actionButton,
-            onPress: () => ImageOverlayController.remeasure(),
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.actionButtonText,
-              children: "Remeasure"
-            })
-          })]
-        })]
-      }), view === "free" && /*#__PURE__*/_jsxs(View, {
-        style: styles.controlsContainer,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.inputSection,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionLabel,
-            children: "Image"
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.pasteButton,
-            onPress: handlePasteImage,
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.pasteButtonText,
-              children: "Paste from Clipboard"
-            })
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.urlRow,
-            children: [/*#__PURE__*/_jsx(TextInput, {
-              style: styles.urlInput,
-              value: imageUrl,
-              onChangeText: setImageUrl,
-              placeholder: "or enter URL...",
-              placeholderTextColor: macOSColors.text.muted,
-              autoCapitalize: "none",
-              autoCorrect: false
-            }), /*#__PURE__*/_jsx(TouchableOpacity, {
-              style: [styles.loadButton, !imageUrl.trim() && styles.loadButtonDisabled],
-              onPress: handleLoadImage,
-              disabled: !imageUrl.trim(),
-              activeOpacity: 0.7,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.loadButtonText,
-                children: "Load"
-              })
-            })]
-          })]
-        }), state.imageUri && state.mode === "free" && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.infoCard,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.infoRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.infoLabel,
-                children: "Position"
-              }), /*#__PURE__*/_jsxs(Text, {
-                style: styles.infoValueMono,
-                children: [Math.round(state.freeX), ", ", Math.round(state.freeY)]
-              })]
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.infoRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.infoLabel,
-                children: "Size"
-              }), /*#__PURE__*/_jsxs(Text, {
-                style: styles.infoValueMono,
-                children: [Math.round(state.freeWidth), " x ", Math.round(state.freeHeight)]
-              })]
-            }), state.imageWidth != null && state.imageHeight != null && /*#__PURE__*/_jsxs(View, {
-              style: styles.infoRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.infoLabel,
-                children: "Original"
-              }), /*#__PURE__*/_jsxs(Text, {
-                style: styles.infoValueMono,
-                children: [state.imageWidth, " x ", state.imageHeight]
-              })]
-            })]
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.inputSection,
-            children: /*#__PURE__*/_jsx(OverlayControls, {
-              opacity: state.opacity,
-              scale: 1,
-              offsetX: 0,
-              offsetY: 0,
-              onOpacityChange: v => ImageOverlayController.setOpacity(v),
-              onScaleChange: () => {},
-              onOffsetChange: () => {},
-              opacityOnly: true
+              children: "Reset Position"
             })
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.toggleSection,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.toggleRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.toggleLabel,
-                children: "Lock Position"
-              }), /*#__PURE__*/_jsx(Switch, {
-                value: state.locked,
-                onValueChange: v => ImageOverlayController.setLocked(v),
-                trackColor: {
-                  false: macOSColors.background.hover,
-                  true: "#f59e0b"
-                }
-              })]
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.blendRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.toggleLabel,
-                children: "Opacity"
-              }), /*#__PURE__*/_jsx(View, {
-                style: styles.blendButtons,
-                children: [0, 25, 50, 75, 100].map(pct => /*#__PURE__*/_jsx(TouchableOpacity, {
-                  style: [styles.blendButton, Math.round(state.opacity * 100) === pct && styles.blendButtonActive],
-                  onPress: () => ImageOverlayController.setOpacity(pct / 100),
-                  activeOpacity: 0.7,
-                  children: /*#__PURE__*/_jsxs(Text, {
-                    style: [styles.blendButtonText, Math.round(state.opacity * 100) === pct && styles.blendButtonTextActive],
-                    children: [pct, "%"]
-                  })
-                }, pct))
-              })]
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.blendRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.toggleLabel,
-                children: "Flip"
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.blendButtons,
-                children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-                  style: [styles.blendButton, state.invertX && styles.blendButtonActive],
-                  onPress: () => ImageOverlayController.toggleInvertX(),
-                  activeOpacity: 0.7,
-                  children: /*#__PURE__*/_jsx(Text, {
-                    style: [styles.blendButtonText, state.invertX && styles.blendButtonTextActive],
-                    children: "Horizontal"
-                  })
-                }), /*#__PURE__*/_jsx(TouchableOpacity, {
-                  style: [styles.blendButton, state.invertY && styles.blendButtonActive],
-                  onPress: () => ImageOverlayController.toggleInvertY(),
-                  activeOpacity: 0.7,
-                  children: /*#__PURE__*/_jsx(Text, {
-                    style: [styles.blendButtonText, state.invertY && styles.blendButtonTextActive],
-                    children: "Vertical"
-                  })
-                })]
-              })]
-            })]
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.actions,
-            children: /*#__PURE__*/_jsx(TouchableOpacity, {
-              style: styles.actionButton,
-              onPress: () => ImageOverlayController.resetSettings(),
-              activeOpacity: 0.7,
-              children: /*#__PURE__*/_jsx(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__*/_jsxs(View, {
+      style: styles.inlineRoot,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.inlineHeader,
+        children: headerContent.customContent
+      }), body]
+    });
+  }
+  return /*#__PURE__*/_jsx(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.
+ */
+export function ImageOverlayToolView(props = {}) {
+  return /*#__PURE__*/_jsx(ImageOverlayModal, {
+    ...props,
+    inline: true,
+    visible: true,
+    onClose: () => {}
   });
 }
 const styles = StyleSheet.create({
+  inlineRoot: {
+    flex: 1,
+    minHeight: 0,
+    backgroundColor: macOSColors.background.base
+  },
+  inlineHeader: {
+    borderBottomWidth: 1,
+    borderBottomColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.card
+  },
   container: {
     flex: 1
   },