@buoy-gg/image-overlay 7.0.33 → 7.0.35

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

@@ -337,32 +337,14 @@ function ImageOverlayModal({
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.toggleSection,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.toggleRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.toggleLabel,
-            children: "Show Outline"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
-            value: state.showOutline,
-            onValueChange: v => _ImageOverlayController.ImageOverlayController.setShowOutline(v),
-            trackColor: {
-              false: _sharedUi.night.color.surfaceElevated,
-              true: _sharedUi.night.color.accent
-            }
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.toggleRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.toggleLabel,
-            children: "Auto Track"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
-            value: autoTrack,
-            onValueChange: setAutoTrack,
-            trackColor: {
-              false: _sharedUi.night.color.surfaceElevated,
-              true: _sharedUi.night.color.accent
-            }
-          })]
+        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,
@@ -519,19 +501,11 @@ function ImageOverlayModal({
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.toggleSection,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.toggleRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.toggleLabel,
-              children: "Lock Position"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
-              value: state.locked,
-              onValueChange: v => _ImageOverlayController.ImageOverlayController.setLocked(v),
-              trackColor: {
-                false: _sharedUi.night.color.surfaceElevated,
-                true: _sharedUi.night.color.warning
-              }
-            })]
+          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, {
@@ -765,7 +739,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   inputSection: {
     paddingHorizontal: 12,

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

@@ -407,7 +407,7 @@ const styles = _reactNative.StyleSheet.create({
     color: "#fff",
     fontSize: 10,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   freeBorder: {
     position: "absolute",

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

@@ -248,6 +248,6 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.night.color.text,
     width: 45,
     textAlign: "right",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });

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

@@ -151,13 +151,13 @@ const styles = _reactNative.StyleSheet.create({
   testIdValue: {
     fontSize: 11,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     flex: 1
   },
   componentName: {
     fontSize: 10,
     color: "#a855f7",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     marginTop: 1
   },
   emptyState: {
@@ -176,6 +176,6 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     textAlign: "center",
     lineHeight: 18,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });

package/lib/commonjs/preset.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IMAGE_OVERLAY_ICON_COLOR = void 0;
-exports.createImageOverlayTool = createImageOverlayTool;
-exports.imageOverlayToolPreset = void 0;
+exports.imageOverlayToolPreset = exports.createImageOverlayTool = exports.IMAGE_OVERLAY_ICON_COLOR = void 0;
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _ImageOverlayModal = require("./imageOverlay/components/ImageOverlayModal");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -23,7 +21,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const IMAGE_OVERLAY_ICON_COLOR = exports.IMAGE_OVERLAY_ICON_COLOR = "#A855F7";
-const imageOverlayToolPreset = exports.imageOverlayToolPreset = {
+const imageOverlayToolPreset = exports.imageOverlayToolPreset = (0, _sharedUi.defineToolPreset)({
   id: "image-overlay",
   name: "IMG",
   description: "Design mockup overlay",
@@ -38,22 +36,7 @@ const imageOverlayToolPreset = exports.imageOverlayToolPreset = {
   props: {
     enableSharedModalDimensions: false
   }
-};
-function createImageOverlayTool(options) {
-  return {
-    id: options?.id || "image-overlay",
-    name: options?.name || "IMG",
-    description: options?.description || "Design mockup overlay",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ImageOverlayIcon, {
-      size: size,
-      color: IMAGE_OVERLAY_ICON_COLOR
-    }),
-    component: _ImageOverlayModal.ImageOverlayModal,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+});
+const createImageOverlayTool = exports.createImageOverlayTool = (0, _sharedUi.createToolFactory)(imageOverlayToolPreset, options => ({
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}));

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

@@ -1,8 +1,8 @@
 "use strict";
 
 import { useState, useEffect, useCallback } from "react";
-import { View, Text, TextInput, TouchableOpacity, StyleSheet, Switch, Alert } from "react-native";
-import { JsModal, ModalHeader, macOSColors, night, Trash2, SquareDashed, Image, PowerToggleButton, windowDragProps } from "@buoy-gg/shared-ui";
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from "react-native";
+import { JsModal, ModalHeader, macOSColors, night, Trash2, SquareDashed, Image, PowerToggleButton, windowDragProps, ToggleRow, monoFont } from "@buoy-gg/shared-ui";
 import { ImageOverlayController } from "../utils/ImageOverlayController";
 import { scanForImageTargets } from "../utils/fiberScanner";
 import { TargetList } from "./TargetList";
@@ -332,32 +332,14 @@ export function ImageOverlayModal({
         })]
       }), /*#__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: night.color.surfaceElevated,
-              true: night.color.accent
-            }
-          })]
-        }), /*#__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: night.color.surfaceElevated,
-              true: night.color.accent
-            }
-          })]
+        children: [/*#__PURE__*/_jsx(ToggleRow, {
+          label: "Show Outline",
+          value: state.showOutline,
+          onValueChange: v => ImageOverlayController.setShowOutline(v)
+        }), /*#__PURE__*/_jsx(ToggleRow, {
+          label: "Auto Track",
+          value: autoTrack,
+          onValueChange: setAutoTrack
         }), state.imageUri && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsxs(View, {
             style: styles.blendRow,
@@ -514,19 +496,11 @@ export function ImageOverlayModal({
           })
         }), /*#__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: night.color.surfaceElevated,
-                true: night.color.warning
-              }
-            })]
+          children: [/*#__PURE__*/_jsx(ToggleRow, {
+            label: "Lock Position",
+            tone: "warning",
+            value: state.locked,
+            onValueChange: v => ImageOverlayController.setLocked(v)
           }), /*#__PURE__*/_jsxs(View, {
             style: styles.blendRow,
             children: [/*#__PURE__*/_jsx(Text, {
@@ -760,7 +734,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   inputSection: {
     paddingHorizontal: 12,

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

@@ -12,7 +12,7 @@
 
 import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { View, Text, Image as RNImage, StyleSheet, PanResponder, Dimensions } from "react-native";
-import { absoluteFill } from "@buoy-gg/shared-ui";
+import { absoluteFill, monoFont } from "@buoy-gg/shared-ui";
 import { ImageOverlayController } from "../utils/ImageOverlayController";
 
 // ─── Overlay Image (handles flip transforms) ─────────────────────────────────
@@ -403,7 +403,7 @@ const styles = StyleSheet.create({
     color: "#fff",
     fontSize: 10,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   freeBorder: {
     position: "absolute",

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

@@ -7,7 +7,7 @@
 
 import { useRef, useCallback } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, PanResponder } from "react-native";
-import { night } from "@buoy-gg/shared-ui";
+import { night, monoFont } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function SliderStepper({
   label,
@@ -244,6 +244,6 @@ const styles = StyleSheet.create({
     color: night.color.text,
     width: 45,
     textAlign: "right",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

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

@@ -6,7 +6,7 @@
  */
 
 import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
-import { ChevronRight, night, Hash, ToolEmptyState } from "@buoy-gg/shared-ui";
+import { ChevronRight, night, Hash, ToolEmptyState, monoFont } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function TargetRow({
   target,
@@ -147,13 +147,13 @@ const styles = StyleSheet.create({
   testIdValue: {
     fontSize: 11,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   componentName: {
     fontSize: 10,
     color: "#a855f7",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 1
   },
   emptyState: {
@@ -172,6 +172,6 @@ const styles = StyleSheet.create({
     fontSize: 12,
     textAlign: "center",
     lineHeight: 18,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

package/lib/module/preset.js

@@ -13,11 +13,11 @@
  * ```
  */
 
-import { ImageOverlayIcon } from "@buoy-gg/shared-ui";
+import { ImageOverlayIcon, createToolFactory, defineToolPreset } from "@buoy-gg/shared-ui";
 import { ImageOverlayModal } from "./imageOverlay/components/ImageOverlayModal";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const IMAGE_OVERLAY_ICON_COLOR = "#A855F7";
-export const imageOverlayToolPreset = {
+export const imageOverlayToolPreset = defineToolPreset({
   id: "image-overlay",
   name: "IMG",
   description: "Design mockup overlay",
@@ -32,22 +32,7 @@ export const imageOverlayToolPreset = {
   props: {
     enableSharedModalDimensions: false
   }
-};
-export function createImageOverlayTool(options) {
-  return {
-    id: options?.id || "image-overlay",
-    name: options?.name || "IMG",
-    description: options?.description || "Design mockup overlay",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/_jsx(ImageOverlayIcon, {
-      size: size,
-      color: IMAGE_OVERLAY_ICON_COLOR
-    }),
-    component: ImageOverlayModal,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+});
+export const createImageOverlayTool = createToolFactory(imageOverlayToolPreset, options => ({
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}));

package/lib/typescript/imageOverlay/components/ImageOverlayModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlayModal.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/components/ImageOverlayModal.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,sBAAsB,EAAkC,MAAM,UAAU,CAAC;AAMvF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAKjE,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,iBAAiB,EACjB,sBAAsB,EACtB,MAAc,EACd,WAAW,GACZ,EAAE,sBAAsB,+BAgjBxB;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,GAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAM,+BAG3E"}
+{"version":3,"file":"ImageOverlayModal.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/components/ImageOverlayModal.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,sBAAsB,EAAkC,MAAM,UAAU,CAAC;AAMvF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAKjE,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,iBAAiB,EACjB,sBAAsB,EACtB,MAAc,EACd,WAAW,GACZ,EAAE,sBAAsB,+BAoiBxB;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,GAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAM,+BAG3E"}

package/lib/typescript/imageOverlay/components/TargetList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TargetList.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/components/TargetList.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAwCjD,UAAU,eAAe;IACvB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAwBhE"}
+{"version":3,"file":"TargetList.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/components/TargetList.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAUH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAwCjD,UAAU,eAAe;IACvB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAwBhE"}

package/lib/typescript/preset.d.ts

@@ -25,12 +25,10 @@ export declare const imageOverlayToolPreset: {
         enableSharedModalDimensions: boolean;
     };
 };
-export declare function createImageOverlayTool(options?: {
-    name?: string;
-    description?: string;
-    id?: string;
+export declare const createImageOverlayTool: (options?: ({
+    /** Enable shared modal dimensions */
     enableSharedModalDimensions?: boolean;
-}): {
+} & import("@buoy-gg/shared-ui").ToolPresetOverrides) | undefined) => {
     id: string;
     name: string;
     description: string;

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

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAEhF,eAAO,MAAM,wBAAwB,YAAY,CAAC;AAElD,eAAO,MAAM,sBAAsB;;;;;qBAKhB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;CAOlC,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,OAAO,CAAC,EAAE;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;;;;;qBAMoB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;EAWpC"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAEhF,eAAO,MAAM,wBAAwB,YAAY,CAAC;AAElD,eAAO,MAAM,sBAAsB;;;;;qBAKhB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;CAOjC,CAAC;AAEH,eAAO,MAAM,sBAAsB;IAG/B,qCAAqC;kCACP,OAAO;;;;;;qBAbtB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;CAiBlC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/image-overlay",
-  "version": "7.0.33",
+  "version": "7.0.35",
   "description": "Pin your Figma mockup on top of the running app — pixel-perfect UI comparison without leaving the simulator. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.33"
+    "@buoy-gg/shared-ui": "^7.0.35"
   },
   "peerDependencies": {
     "react": "*",