@buoy-gg/image-overlay 7.0.40 → 7.0.42

package/lib/module/preset.js

@@ -1,38 +1 @@
-"use strict";
-
-/**
- * Pre-configured image overlay tool for FloatingDevTools
- *
- * @example
- * ```tsx
- * import { imageOverlayToolPreset } from '@buoy-gg/image-overlay';
- *
- * const installedApps = [
- *   imageOverlayToolPreset,
- * ];
- * ```
- */
-
-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 = defineToolPreset({
-  id: "image-overlay",
-  name: "IMG",
-  description: "Design mockup overlay",
-  slot: "both",
-  icon: ({
-    size
-  }) => /*#__PURE__*/_jsx(ImageOverlayIcon, {
-    size: size,
-    color: IMAGE_OVERLAY_ICON_COLOR
-  }),
-  component: ImageOverlayModal,
-  props: {
-    enableSharedModalDimensions: false
-  }
-});
-export const createImageOverlayTool = createToolFactory(imageOverlayToolPreset, options => ({
-  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
-}));
+"use strict";import{ImageOverlayIcon as o,createToolFactory as a,defineToolPreset as r}from"@buoy-gg/shared-ui";import{ImageOverlayModal as s}from"./imageOverlay/components/ImageOverlayModal";import{jsx as l}from"react/jsx-runtime";export const IMAGE_OVERLAY_ICON_COLOR="#A855F7";export const imageOverlayToolPreset=r({id:"image-overlay",name:"IMG",description:"Design mockup overlay",slot:"both",icon:({size:e})=>l(o,{size:e,color:IMAGE_OVERLAY_ICON_COLOR}),component:s,props:{enableSharedModalDimensions:false}});export const createImageOverlayTool=a(imageOverlayToolPreset,e=>({enableSharedModalDimensions:e.enableSharedModalDimensions??false}));

package/lib/typescript/imageOverlay/utils/imageClipboard.d.ts

@@ -0,0 +1,3 @@
+export declare function loadImageClipboard(): any;
+export declare function loadTextClipboard(): any;
+//# sourceMappingURL=imageClipboard.d.ts.map

package/lib/typescript/imageOverlay/utils/imageClipboard.web.d.ts

@@ -0,0 +1,9 @@
+export declare function loadImageClipboard(): {
+    hasImageAsync(): Promise<boolean>;
+    getImageAsync(): Promise<{
+        data: string;
+    } | null>;
+    getStringAsync: () => Promise<string>;
+} | null;
+export declare function loadTextClipboard(): null;
+//# sourceMappingURL=imageClipboard.web.d.ts.map

package/lib/web/index.mjs

@@ -0,0 +1,4 @@
+"use client";var ke=Object.defineProperty;var et=Object.getOwnPropertyDescriptor;var tt=Object.getOwnPropertyNames;var ot=Object.prototype.hasOwnProperty;var nt=(e,o)=>{for(var n in o)ke(e,n,{get:o[n],enumerable:true})},He=(e,o,n,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of tt(o))!ot.call(e,a)&&a!==n&&ke(e,a,{get:()=>o[a],enumerable:!(r=et(o,a))||r.enumerable});return e},rt=(e,o,n)=>(He(e,o,"default"),n&&He(n,o,"default"));typeof window<"u"&&typeof globalThis.global>"u"&&(globalThis.global=globalThis);import{ImageOverlayIcon as at,createToolFactory as it,defineToolPreset as lt}from"@buoy-gg/shared-ui/web";var ie;function st(){return typeof navigator>"u"||!navigator.clipboard?null:{async hasImageAsync(){if(ie=void 0,!navigator.clipboard.read)return false;let e=await navigator.clipboard.read();for(let o of e){let n=o.types.find(r=>r.startsWith("image/"));if(n)return ie=await o.getType(n),true}return false},async getImageAsync(){if(!ie)return null;let e=ie;return ie=void 0,{data:await new Promise((o,n)=>{let r=new FileReader;r.onload=()=>o(String(r.result)),r.onerror=n,r.readAsDataURL(e)})}},getStringAsync:()=>navigator.clipboard.readText()}}function ct(){return null}import{useState as le,useEffect as Se,useCallback as oe}from"react";var Ae={};nt(Ae,{AccessibilityInfo:()=>gt,ActivityIndicator:()=>no,Alert:()=>se,Animated:()=>ft,AppRegistry:()=>mt,AppState:()=>yt,Appearance:()=>pt,BackHandler:()=>bt,Button:()=>ro,CheckBox:()=>kt,Clipboard:()=>xt,DeviceEventEmitter:()=>Ut,Dimensions:()=>pe,Easing:()=>vt,FlatList:()=>Ht,I18nManager:()=>wt,Image:()=>Te,ImageBackground:()=>At,InteractionManager:()=>Tt,Keyboard:()=>St,KeyboardAvoidingView:()=>Wt,LayoutAnimation:()=>Ct,Linking:()=>Rt,LogBox:()=>Nt,Modal:()=>to,NativeEventEmitter:()=>Bt,NativeModules:()=>ut,PanResponder:()=>me,Picker:()=>zt,PixelRatio:()=>Mt,Platform:()=>It,Pressable:()=>eo,ProgressBar:()=>Lt,RefreshControl:()=>Vt,SafeAreaView:()=>Dt,ScrollView:()=>ze,SectionList:()=>Et,Share:()=>Pt,StatusBar:()=>Ft,StyleSheet:()=>ne,Switch:()=>oo,Text:()=>u,TextInput:()=>Ce,Touchable:()=>Yt,TouchableHighlight:()=>Qt,TouchableNativeFeedback:()=>Xt,TouchableOpacity:()=>R,TouchableWithoutFeedback:()=>Zt,UIManager:()=>We,Vibration:()=>Ot,View:()=>s,VirtualizedList:()=>_t,YellowBox:()=>jt,findNodeHandle:()=>Le,unstable_createElement:()=>ht,useColorScheme:()=>$t,useLocaleContext:()=>Kt,useWindowDimensions:()=>qt});rt(Ae,dt);import*as dt from"react-native-web";import{unstable_createElement as ht,NativeModules as ut,AccessibilityInfo as gt,Animated as ft,Appearance as pt,AppRegistry as mt,AppState as yt,BackHandler as bt,Clipboard as xt,Dimensions as pe,Easing as vt,I18nManager as wt,Keyboard as St,InteractionManager as Tt,LayoutAnimation as Ct,Linking as Rt,NativeEventEmitter as Bt,PanResponder as me,PixelRatio as Mt,Platform as It,Share as Pt,StyleSheet as ne,UIManager as We,Vibration as Ot,CheckBox as kt,FlatList as Ht,Image as Te,ImageBackground as At,KeyboardAvoidingView as Wt,Picker as zt,ProgressBar as Lt,RefreshControl as Vt,SafeAreaView as Dt,SectionList as Et,StatusBar as Ft,Touchable as Yt,TouchableNativeFeedback as Xt,VirtualizedList as _t,YellowBox as jt,LogBox as Nt,DeviceEventEmitter as Ut,useColorScheme as $t,useLocaleContext as Kt,useWindowDimensions as qt}from"react-native-web";import*as E from"react-native-web";import{createElement as Gt,forwardRef as Jt}from"react";function j(e){let o=Jt((r,a)=>{let{accessibilityState:y,accessibilityValue:v,...p}=r;for(let b of["busy","checked","disabled","expanded","selected"])y?.[b]!==void 0&&p[`aria-${b}`]===void 0&&(p[`aria-${b}`]=y[b]);for(let[b,c]of Object.entries({min:"valuemin",max:"valuemax",now:"valuenow",text:"valuetext"}))v?.[b]!==void 0&&p[`aria-${c}`]===void 0&&(p[`aria-${c}`]=v[b]);return Gt(e,{...p,ref:a})}),n=e.State;return n&&Object.assign(o,{State:n}),o.displayName=e.displayName??e.name??"NativeWebView",o}var s=j(E.View),u=j(E.Text),Ce=j(E.TextInput),R=j(E.TouchableOpacity),Qt=j(E.TouchableHighlight),Zt=j(E.TouchableWithoutFeedback),eo=j(E.Pressable),ze=j(E.ScrollView),to=j(E.Modal),oo=j(E.Switch),no=j(E.ActivityIndicator),ro=j(E.Button),Le=E.findNodeHandle,se={alert(e,o,n,r){if(typeof document>"u")return;let a=document.createElement("dialog");a.dataset.buoyRoot="",a.setAttribute("aria-label",e),a.style.cssText="position:fixed;inset:0;margin:auto;width:min(440px,90vw);padding:24px;border:1px solid #475569;border-radius:14px;background:#17212e;color:#f1f5f9;font:14px system-ui;box-shadow:0 20px 80px #0008;z-index:2147483647";let y=document.createElement("h2");if(y.textContent=e,y.style.cssText="font-size:18px;margin:0 0 12px",a.appendChild(y),o){let c=document.createElement("p");c.textContent=o,c.style.cssText="line-height:1.5;white-space:pre-wrap;margin:0 0 20px",a.appendChild(c)}let v=document.createElement("div");v.style.cssText="display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px";let p=n?.length?n:[{text:"OK"}],b=()=>{a.close?.(),a.remove()};for(let c of p){let S=document.createElement("button");S.type="button",S.textContent=c.text??"OK",S.style.cssText=`padding:9px 14px;border:1px solid #64748b;border-radius:7px;color:white;background:${c.style==="destructive"?"#a52b38":"#283a4d"};cursor:pointer;font:inherit`,S.onclick=()=>{b(),c.onPress?.()},v.appendChild(S)}a.addEventListener("cancel",c=>{c.preventDefault(),r?.cancelable!==false&&(b(),r?.onDismiss?.())}),a.appendChild(v),document.body.appendChild(a),a.showModal?a.showModal():a.setAttribute("open","")}};import{JsModal as ao,ModalHeader as ye,macOSColors as Ve,night as f,Trash2 as io,SquareDashed as lo,Image as so,PowerToggleButton as co,windowDragProps as ho,ToggleRow as Re,monoFont as uo}from"@buoy-gg/shared-ui/web";function Be(e){return new Promise(o=>{try{let n=[];e&&n.push(e),e?.canonical?.publicInstance&&n.push(e.canonical.publicInstance),e?.canonical&&e.canonical!==e&&n.push(e.canonical);for(let r of n)if(typeof r.getBoundingClientRect=="function")try{let a=r.getBoundingClientRect();if(a&&typeof a.x=="number"&&typeof a.y=="number"&&typeof a.width=="number"&&typeof a.height=="number"&&a.width>0&&a.height>0){o({x:a.x,y:a.y,width:a.width,height:a.height});return}}catch{}for(let r of n)if(typeof r.measure=="function"){let a=setTimeout(()=>o(null),200);r.measure((y,v,p,b,c,S)=>{clearTimeout(a),c!=null&&S!=null&&p!=null&&b!=null&&p>0&&b>0?o({x:c,y:S,width:p,height:b}):o(null)});return}try{let r=Le(e);if(r!=null){let a=setTimeout(()=>o(null),200);We.measure(r,(y,v,p,b,c,S)=>{clearTimeout(a),c!=null&&S!=null&&p!=null&&b!=null&&p>0&&b>0?o({x:c,y:S,width:p,height:b}):o(null)});return}}catch{}o(null)}catch{o(null)}})}var De=null;function go(e){De=e??null}function Ee(){return De||(typeof globalThis>"u"?null:globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__??null)}var Fe="image-target:",fo=5,po=22;function mo(){let e=Ee();if(!e?.getFiberRoots)return[];let o=new Set,n=e.renderers?.keys?Array.from(e.renderers.keys()):[1];for(let r of n)try{e.getFiberRoots(r)?.forEach(a=>o.add(a))}catch{}return[...o]}function yo(e){return e.tag===po&&e.memoizedState!==null}function bo(e){return e.memoizedProps?.activityState===0}function ce(e,o,n=0,r=new Set){if(!(!e||r.has(e)||n>500)){if(r.add(e),yo(e)){e.sibling&&ce(e.sibling,o,n,r);return}if(bo(e)){e.sibling&&ce(e.sibling,o,n,r);return}o(e,n),e.child&&ce(e.child,o,n+1,r),e.sibling&&ce(e.sibling,o,n,r)}}function xo(e){let o=new Set(["View","RCTView","Text","RCTText","Image","RCTImageView","ScrollView","RCTScrollView","TextInput","RCTTextInput","TouchableOpacity","TouchableHighlight","TouchableWithoutFeedback","Pressable","FlatList","SectionList","SafeAreaView"]),n=e._debugOwner||e.return,r=0;for(;n&&r<30;){r++;let a=n.type;if(a){let y=typeof a=="string"?a:a.displayName||a.name;if(y&&!o.has(y))return y}n=n.return}return null}function de(){let e=mo();if(e.length===0)return[];let o=[];for(let n of e)ce(n.current,r=>{if(r.tag!==fo)return;let a=r.memoizedProps?.testID??r.pendingProps?.testID??r.memoizedProps?.["data-testid"]??r.pendingProps?.["data-testid"];if(!a||!a.startsWith(Fe))return;let y=a.slice(Fe.length);y&&o.push({label:y,testID:a,fiber:r,instance:r.stateNode,componentName:xo(r)})});return o}var Ye={mode:null,enabled:false,imageUri:null,imageWidth:null,imageHeight:null,targetTag:null,targetLabel:null,targetRect:null,showOutline:true,opacity:.5,scale:1,offsetX:0,offsetY:0,invertX:false,invertY:false,locked:false,freeX:0,freeY:0,freeWidth:200,freeHeight:200},i={...Ye},Me=new Set,K=null,be=null,he=false,ue=null,vo=null;function B(){for(let e of Me)e(i)}function wo(e){return e?typeof e._nativeTag=="number"?e._nativeTag:typeof e.canonical?._nativeTag=="number"?e.canonical._nativeTag:typeof e.__nativeTag=="number"?e.__nativeTag:null:null}async function Xe(e,o){let n=await Be(e);if(n)return{rect:n,freshInstance:e};let r=de().find(a=>a.label===o);return r&&(n=await Be(r.instance),n)?{rect:n,freshInstance:r.instance}:{rect:null,freshInstance:e}}function So(){if(ue)return;let e=Ee();if(e){if(e.rendererInterfaces)for(let[,o]of e.rendererInterfaces)typeof o.setTraceUpdatesEnabled=="function"&&o.setTraceUpdatesEnabled(true);typeof e.sub=="function"&&(ue=e.sub("traceUpdates",Ro))}}var re=null,Ie=false;function To(){if(re!==null||typeof requestAnimationFrame!="function")return;let e=()=>{re=requestAnimationFrame(e),!(Ie||!he||!K)&&(Ie=true,je().finally(()=>{Ie=false}))};re=requestAnimationFrame(e)}function Co(){re!==null&&typeof cancelAnimationFrame=="function"&&cancelAnimationFrame(re),re=null}function _e(){Co(),ue&&(ue(),ue=null)}function Ro(e){!he||!K||je()}function je(){return Be(K).then(e=>{if(e&&i.targetRect){let o=i.targetRect;(Math.abs(e.x-o.x)>.5||Math.abs(e.y-o.y)>.5||Math.abs(e.width-o.width)>.5||Math.abs(e.height-o.height)>.5)&&(i={...i,targetRect:e},B())}}).catch(()=>{})}function Ne(e){return new Promise(o=>{Te.getSize(e,(n,r)=>o({width:n,height:r}),()=>o(null))})}var m={subscribe(e){return Me.add(e),e(i),()=>Me.delete(e)},getState(){return i},async setTarget(e,o,n){K=e,be=o;let r=n?.stateNode??e,{rect:a,freshInstance:y}=await Xe(r,o);K=y;let v=wo(K);i={...i,mode:"component",targetTag:v,targetLabel:o,targetRect:a},B()},async setImageUri(e){let o=await Ne(e),n=1;o&&i.targetRect&&o.width>0&&(n=i.targetRect.width/o.width),i={...i,imageUri:e,imageWidth:o?.width??null,imageHeight:o?.height??null,scale:n,showOutline:false},B()},setOpacity(e){i={...i,opacity:Math.max(0,Math.min(1,e))},B()},setScale(e){i={...i,scale:Math.max(.01,Math.min(5,e))},B()},setOffset(e,o){i={...i,offsetX:e,offsetY:o},B()},toggleInvertX(){i={...i,invertX:!i.invertX},B()},toggleInvertY(){i={...i,invertY:!i.invertY},B()},setLocked(e){i={...i,locked:e},B()},setAutoTrack(e){he=e,e?(So(),To()):_e()},isAutoTracking(){return he},setShowOutline(e){i={...i,showOutline:e},B()},setEnabled(e){i={...i,enabled:e},B()},toggle(){i={...i,enabled:!i.enabled},B()},fitWidth(){i.imageWidth&&i.targetRect&&i.imageWidth>0&&(i={...i,scale:i.targetRect.width/i.imageWidth},B())},fitHeight(){i.imageHeight&&i.targetRect&&i.imageHeight>0&&(i={...i,scale:i.targetRect.height/i.imageHeight},B())},resetSettings(){if(i.mode==="free"){let e=pe.get("window"),o=i.imageWidth??200,n=i.imageHeight??200;i={...i,opacity:.5,freeX:(e.width-o)/2,freeY:(e.height-n)/2,freeWidth:o,freeHeight:n}}else{let e=1;i.imageWidth&&i.targetRect&&i.imageWidth>0&&(e=i.targetRect.width/i.imageWidth),i={...i,opacity:.5,scale:e,offsetX:0,offsetY:0}}B()},async remeasure(){if(!be)return;let{rect:e,freshInstance:o}=await Xe(K,be);K=o,e&&(i={...i,targetRect:e},B())},async startFreeMode(e){let o=await Ne(e),n=pe.get("window"),r=o?.width??200,a=o?.height??200,y=r,v=a,p=n.width*.8,b=n.height*.6;if(y>p||v>b){let c=Math.min(p/y,b/v);y=Math.round(y*c),v=Math.round(v*c)}i={...i,mode:"free",enabled:true,imageUri:e,imageWidth:o?.width??null,imageHeight:o?.height??null,opacity:.5,freeX:Math.round((n.width-y)/2),freeY:Math.round((n.height-v)/2),freeWidth:Math.round(y),freeHeight:Math.round(v)},B()},setFreePosition(e,o){i={...i,freeX:e,freeY:o},B()},setFreeDimensions(e,o,n,r){i={...i,freeWidth:e,freeHeight:o,freeX:n,freeY:r},B()},reset(){_e(),he=false,vo=null,K=null,be=null,i={...Ye},B()}};import{ChevronRight as Bo,night as U,Hash as Mo,ToolEmptyState as Io,monoFont as Pe}from"@buoy-gg/shared-ui/web";import{jsx as $,jsxs as ge}from"react/jsx-runtime";function Po({target:e,onSelect:o}){return ge(R,{style:F.card,onPress:o,activeOpacity:.7,children:[$(s,{style:F.colorIndicator}),ge(s,{style:F.content,children:[$(s,{style:F.topRow,children:$(u,{style:F.label,numberOfLines:1,children:e.label})}),ge(s,{style:F.bottomRow,children:[ge(s,{style:F.badgeRow,children:[ge(s,{style:F.testIdBadge,children:[$(Mo,{size:8,color:U.color.accent}),$(u,{style:F.testIdBadgeText,children:"testID"})]}),$(u,{style:F.testIdValue,numberOfLines:1,children:e.testID})]}),e.componentName&&$(u,{style:F.componentName,numberOfLines:1,children:e.componentName})]})]}),$(Bo,{size:16,color:U.color.textTertiary})]})}function Oo({targets:e,onSelect:o}){return e.length===0?$(Io,{testID:"buoy-image-overlay-empty",otto:"scanning",title:"No targets found",message:`Tag components with
+testID="image-target:YourLabel"`}):$(ze,{style:F.list,contentContainerStyle:F.listContent,children:e.map(n=>$(Po,{target:n,onSelect:()=>o(n)},n.testID))})}var F=ne.create({list:{flex:1},listContent:{paddingTop:8,paddingBottom:20},card:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:U.color.surface,borderRadius:8,borderWidth:1,borderColor:U.color.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10,backgroundColor:U.color.accent},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},label:{fontSize:13,fontWeight:"600",color:U.color.text,flex:1},bottomRow:{gap:2},badgeRow:{flexDirection:"row",alignItems:"center",gap:4},testIdBadge:{flexDirection:"row",alignItems:"center",paddingVertical:2,paddingHorizontal:5,borderRadius:4,backgroundColor:U.color.accentSoft,gap:3},testIdBadgeText:{fontSize:9,fontWeight:"700",color:U.color.accent},testIdValue:{fontSize:11,color:U.color.text,fontFamily:Pe,flex:1},componentName:{fontSize:10,color:"#a855f7",fontFamily:Pe,marginTop:1},emptyState:{alignItems:"center",paddingVertical:40,paddingHorizontal:32},emptyTitle:{color:U.color.text,fontSize:14,fontWeight:"600",marginBottom:6},emptyText:{color:U.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:18,fontFamily:Pe}});import{useRef as Q,useCallback as xe}from"react";import{night as q,monoFont as ko}from"@buoy-gg/shared-ui/web";import{jsx as V,jsxs as ve}from"react/jsx-runtime";function fe({label:e,value:o,min:n,max:r,step:a,displayValue:y,onChange:v}){let p=Q(0),b=Q(0),c=xe(T=>Math.max(n,Math.min(r,T)),[n,r]),S=r>n?(o-n)/(r-n):0,A=Q(v),X=Q(c),h=Q(n),P=Q(r);A.current=v,X.current=c,h.current=n,P.current=r;let O=xe(T=>{let L=T-b.current,k=Math.max(0,Math.min(1,L/p.current)),H=h.current+k*(P.current-h.current);A.current(X.current(H))},[]),z=Q(me.create({onStartShouldSetPanResponder:()=>true,onMoveShouldSetPanResponder:()=>true,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:T=>{O(T.nativeEvent.pageX)},onPanResponderMove:T=>{O(T.nativeEvent.pageX)}})).current,_=xe(T=>{p.current=T.nativeEvent.layout.width},[]),G=Q(null),D=xe(()=>{G.current?.measure?.((T,L,k,H,x)=>{b.current=x})},[]);return ve(s,{style:Y.controlRow,children:[V(u,{style:Y.label,children:e}),ve(s,{style:Y.controlRight,children:[V(R,{style:Y.stepperButton,onPress:()=>v(c(o-a)),activeOpacity:.6,children:V(u,{style:Y.stepperButtonText,children:"-"})}),V(s,{style:Y.sliderHitArea,...z.panHandlers,children:ve(s,{ref:G,style:Y.sliderTrack,onLayout:T=>{_(T),D()},pointerEvents:"none",children:[V(s,{style:[Y.sliderFill,{width:`${S*100}%`}]}),V(s,{style:[Y.sliderThumb,{left:`${S*100}%`}]})]})}),V(R,{style:Y.stepperButton,onPress:()=>v(c(o+a)),activeOpacity:.6,children:V(u,{style:Y.stepperButtonText,children:"+"})}),V(u,{style:Y.valueText,children:y})]})]})}function Ue({opacity:e,scale:o,offsetX:n,offsetY:r,onOpacityChange:a,onScaleChange:y,onOffsetChange:v,opacityOnly:p}){return p?V(fe,{label:"Opacity",value:e,min:0,max:1,step:.05,displayValue:`${Math.round(e*100)}%`,onChange:a}):ve(s,{style:Y.container,children:[V(fe,{label:"Opacity",value:e,min:0,max:1,step:.05,displayValue:`${Math.round(e*100)}%`,onChange:a}),V(fe,{label:"Scale",value:o,min:.05,max:3,step:.05,displayValue:`${Math.round(o*100)}%`,onChange:y}),V(fe,{label:"Offset X",value:n,min:-200,max:200,step:2,displayValue:`${Math.round(n)}px`,onChange:b=>v(Math.round(b),r)}),V(fe,{label:"Offset Y",value:r,min:-200,max:200,step:2,displayValue:`${Math.round(r)}px`,onChange:b=>v(n,Math.round(b))})]})}var Y=ne.create({container:{gap:8},controlRow:{paddingHorizontal:12,gap:4},label:{fontSize:11,fontWeight:"600",color:q.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},controlRight:{flexDirection:"row",alignItems:"center",gap:6},stepperButton:{width:28,height:28,borderRadius:6,backgroundColor:q.color.surfaceElevated,borderWidth:1,borderColor:q.color.border,justifyContent:"center",alignItems:"center"},stepperButtonText:{fontSize:16,fontWeight:"700",color:q.color.text,lineHeight:18},sliderHitArea:{flex:1,paddingVertical:20,paddingHorizontal:40,marginVertical:-20,marginHorizontal:-40},sliderTrack:{height:28,justifyContent:"center",borderRadius:6,backgroundColor:q.color.bg,borderWidth:1,borderColor:q.color.border,overflow:"hidden"},sliderFill:{position:"absolute",left:0,top:0,bottom:0,backgroundColor:q.color.accentFill,borderRadius:5},sliderThumb:{position:"absolute",width:4,top:4,bottom:4,marginLeft:-2,borderRadius:2,backgroundColor:q.color.accent},valueText:{fontSize:11,fontWeight:"600",color:q.color.text,width:45,textAlign:"right",fontFamily:ko}});import{Fragment as $e,jsx as l,jsxs as g}from"react/jsx-runtime";var Z="";function Oe({visible:e,onClose:o,onBack:n,onMinimize:r,enableSharedModalDimensions:a=false,initialModalState:y,minimizeTargetPosition:v,inline:p=false,initialView:b}){let[c,S]=le(()=>{if(b)return b;let d=m.getState();return d.mode==="free"?"free":d.targetRect?"controls":"idle"}),[A,X]=le(()=>b==="targets"?de():[]),[h,P]=le(()=>m.getState()),[O,z]=le(Z),[_,G]=le(()=>m.isAutoTracking());Se(()=>{Z=O},[O]),Se(()=>m.subscribe(P),[]),Se(()=>(m.setAutoTrack(_),()=>{}),[_]);let D=oe(()=>{let d=de();X(d),S("targets")},[]),T=oe(async d=>{await m.setTarget(d.instance,d.label,d.fiber),Z.trim()&&(await m.setImageUri(Z.trim()),m.setEnabled(true)),S("controls")},[]),L=oe(async()=>{let d=Z.trim();d&&(c==="free"?await m.startFreeMode(d):(await m.setImageUri(d),m.setEnabled(true)))},[c]),k=oe(async()=>{let d=null;try{d=st()}catch{}let w=null;if(!d)try{let C=ct();w=C.default||C}catch{}if(!d&&!w){se.alert("Clipboard not available","Install expo-clipboard or @react-native-clipboard/clipboard to use paste.");return}try{if(d&&typeof d.hasImageAsync=="function"&&await d.hasImageAsync()){let N=await d.getImageAsync({format:"png"});if(N?.data){c==="free"?await m.startFreeMode(N.data):(await m.setImageUri(N.data),m.setEnabled(true));return}}let C=null;if(d&&typeof d.getStringAsync=="function"?C=await d.getStringAsync():w&&typeof w.getString=="function"&&(C=await w.getString()),C&&(C.startsWith("http")||C.startsWith("data:"))){z(C),Z=C;return}d?se.alert("No image detected","Try saving your design image, opening it in Photos or Preview, and copying it from there."):se.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.")}catch{se.alert("Paste failed","Something went wrong reading the clipboard. Try copying the image again.")}},[c]),H=oe(()=>{m.reset(),Z="",S("idle"),z(""),X([])},[]),x=oe(()=>{if(c==="controls"){let d=de();X(d),S("targets")}else(c==="targets"||c==="free")&&m.reset(),S("idle")},[c]),W=(()=>{switch(c){case"targets":return`Targets (${A.length})`;case"controls":return h.targetLabel||"Component Match";case"free":return"Free Placement";default:return"Image Overlay"}})(),ee={showToggleButton:false,customContent:g(ye,{children:[l(ye.Navigation,{onBack:c!=="idle"?x:n}),l(ye.Content,{title:W}),g(ye.Actions,{children:[c==="targets"&&l(R,{style:t.headerTextButton,onPress:D,activeOpacity:.7,children:l(u,{style:t.headerTextButtonLabel,children:"Scan"})}),(c==="controls"||c==="free")&&h.imageUri&&l(co,{isEnabled:h.enabled,onToggle:()=>m.toggle(),accessibilityLabel:"Toggle image overlay"}),c!=="idle"&&l(R,{style:t.headerActionButton,onPress:H,activeOpacity:.7,children:l(io,{size:14,color:f.color.textSecondary})})]})]})},te=g(s,{style:t.container,children:[c==="idle"&&g(s,{style:t.homeContainer,children:[l(u,{style:t.homeSubtitle,children:"Choose a mode"}),g(s,{style:t.modeGrid,children:[g(R,{style:t.modePanel,onPress:D,activeOpacity:.7,children:[l(s,{style:[t.modeIconCircle,{backgroundColor:f.color.accentSoft}],children:l(lo,{size:24,color:f.color.accent})}),g(u,{style:t.modePanelTitle,children:["Component",`
+`,"Match"]}),l(u,{style:t.modePanelDesc,children:"Overlay on a tagged component"})]}),g(R,{style:t.modePanel,onPress:()=>S("free"),activeOpacity:.7,children:[l(s,{style:[t.modeIconCircle,{backgroundColor:f.color.accentSoft}],children:l(so,{size:24,color:f.color.accent})}),g(u,{style:t.modePanelTitle,children:["Free",`
+`,"Placement"]}),l(u,{style:t.modePanelDesc,children:"Drag and resize anywhere"})]})]})]}),c==="targets"&&l(Oo,{targets:A,onSelect:T}),c==="controls"&&g(s,{style:t.controlsContainer,children:[h.targetRect&&g(s,{style:t.infoCard,children:[g(s,{style:t.infoRow,children:[l(u,{style:t.infoLabel,children:"Component"}),l(u,{style:t.infoValue,children:h.targetLabel})]}),g(s,{style:t.infoRow,children:[l(u,{style:t.infoLabel,children:"Size"}),g(u,{style:t.infoValueMono,children:[Math.round(h.targetRect.width)," x ",Math.round(h.targetRect.height)]})]}),g(s,{style:t.infoRow,children:[l(u,{style:t.infoLabel,children:"Position"}),g(u,{style:t.infoValueMono,children:[Math.round(h.targetRect.x),", ",Math.round(h.targetRect.y)]})]}),h.imageWidth!=null&&h.imageHeight!=null&&g(s,{style:t.infoRow,children:[l(u,{style:t.infoLabel,children:"Image"}),g(u,{style:t.infoValueMono,children:[h.imageWidth," x ",h.imageHeight]})]})]}),g(s,{style:t.inputSection,children:[l(u,{style:t.sectionLabel,children:"Image"}),l(R,{style:t.pasteButton,onPress:k,activeOpacity:.7,accessibilityLabel:"Paste from clipboard",accessibilityRole:"button",children:l(u,{style:t.pasteButtonText,children:"Paste from Clipboard"})}),g(s,{style:t.urlRow,children:[l(Ce,{style:t.urlInput,value:O,onChangeText:z,placeholder:"or enter URL...",placeholderTextColor:f.color.placeholder,autoCapitalize:"none",autoCorrect:false,returnKeyType:"go",onSubmitEditing:L}),l(R,{style:[t.loadButton,!O.trim()&&t.loadButtonDisabled],onPress:L,disabled:!O.trim(),activeOpacity:.7,children:l(u,{style:t.loadButtonText,children:"Load"})})]})]}),g(s,{style:t.toggleSection,children:[l(Re,{label:"Show Outline",value:h.showOutline,onValueChange:d=>m.setShowOutline(d)}),l(Re,{label:"Auto Track",value:_,onValueChange:G}),h.imageUri&&g($e,{children:[g(s,{style:t.blendRow,children:[l(u,{style:t.toggleLabel,children:"Opacity"}),l(s,{style:t.blendButtons,children:[0,25,50,75,100].map(d=>l(R,{style:[t.blendButton,Math.round(h.opacity*100)===d&&t.blendButtonActive],onPress:()=>m.setOpacity(d/100),activeOpacity:.7,children:g(u,{style:[t.blendButtonText,Math.round(h.opacity*100)===d&&t.blendButtonTextActive],children:[d,"%"]})},d))})]}),g(s,{style:t.blendRow,children:[l(u,{style:t.toggleLabel,children:"Flip"}),g(s,{style:t.blendButtons,children:[l(R,{style:[t.blendButton,h.invertX&&t.blendButtonActive],onPress:()=>m.toggleInvertX(),activeOpacity:.7,children:l(u,{style:[t.blendButtonText,h.invertX&&t.blendButtonTextActive],children:"Horizontal"})}),l(R,{style:[t.blendButton,h.invertY&&t.blendButtonActive],onPress:()=>m.toggleInvertY(),activeOpacity:.7,children:l(u,{style:[t.blendButtonText,h.invertY&&t.blendButtonTextActive],children:"Vertical"})})]})]})]})]}),h.imageUri&&l(Ue,{opacity:h.opacity,scale:h.scale,offsetX:h.offsetX,offsetY:h.offsetY,onOpacityChange:d=>m.setOpacity(d),onScaleChange:d=>m.setScale(d),onOffsetChange:(d,w)=>m.setOffset(d,w)}),g(s,{style:t.actions,children:[l(R,{style:t.actionButton,onPress:()=>m.resetSettings(),activeOpacity:.7,children:l(u,{style:t.actionButtonText,children:"Reset Settings"})}),l(R,{style:t.actionButton,onPress:()=>m.remeasure(),activeOpacity:.7,children:l(u,{style:t.actionButtonText,children:"Remeasure"})})]})]}),c==="free"&&g(s,{style:t.controlsContainer,children:[g(s,{style:t.inputSection,children:[l(u,{style:t.sectionLabel,children:"Image"}),l(R,{style:t.pasteButton,onPress:k,activeOpacity:.7,accessibilityLabel:"Paste from clipboard",accessibilityRole:"button",children:l(u,{style:t.pasteButtonText,children:"Paste from Clipboard"})}),g(s,{style:t.urlRow,children:[l(Ce,{style:t.urlInput,value:O,onChangeText:z,placeholder:"or enter URL...",placeholderTextColor:f.color.placeholder,autoCapitalize:"none",autoCorrect:false,returnKeyType:"go",onSubmitEditing:L}),l(R,{style:[t.loadButton,!O.trim()&&t.loadButtonDisabled],onPress:L,disabled:!O.trim(),activeOpacity:.7,children:l(u,{style:t.loadButtonText,children:"Load"})})]})]}),h.imageUri&&h.mode==="free"&&g($e,{children:[g(s,{style:t.infoCard,children:[g(s,{style:t.infoRow,children:[l(u,{style:t.infoLabel,children:"Position"}),g(u,{style:t.infoValueMono,children:[Math.round(h.freeX),", ",Math.round(h.freeY)]})]}),g(s,{style:t.infoRow,children:[l(u,{style:t.infoLabel,children:"Size"}),g(u,{style:t.infoValueMono,children:[Math.round(h.freeWidth)," x ",Math.round(h.freeHeight)]})]}),h.imageWidth!=null&&h.imageHeight!=null&&g(s,{style:t.infoRow,children:[l(u,{style:t.infoLabel,children:"Original"}),g(u,{style:t.infoValueMono,children:[h.imageWidth," x ",h.imageHeight]})]})]}),l(s,{style:t.inputSection,children:l(Ue,{opacity:h.opacity,scale:1,offsetX:0,offsetY:0,onOpacityChange:d=>m.setOpacity(d),onScaleChange:()=>{},onOffsetChange:()=>{},opacityOnly:true})}),g(s,{style:t.toggleSection,children:[l(Re,{label:"Lock Position",tone:"warning",value:h.locked,onValueChange:d=>m.setLocked(d)}),g(s,{style:t.blendRow,children:[l(u,{style:t.toggleLabel,children:"Opacity"}),l(s,{style:t.blendButtons,children:[0,25,50,75,100].map(d=>l(R,{style:[t.blendButton,Math.round(h.opacity*100)===d&&t.blendButtonActive],onPress:()=>m.setOpacity(d/100),activeOpacity:.7,children:g(u,{style:[t.blendButtonText,Math.round(h.opacity*100)===d&&t.blendButtonTextActive],children:[d,"%"]})},d))})]}),g(s,{style:t.blendRow,children:[l(u,{style:t.toggleLabel,children:"Flip"}),g(s,{style:t.blendButtons,children:[l(R,{style:[t.blendButton,h.invertX&&t.blendButtonActive],onPress:()=>m.toggleInvertX(),activeOpacity:.7,children:l(u,{style:[t.blendButtonText,h.invertX&&t.blendButtonTextActive],children:"Horizontal"})}),l(R,{style:[t.blendButton,h.invertY&&t.blendButtonActive],onPress:()=>m.toggleInvertY(),activeOpacity:.7,children:l(u,{style:[t.blendButtonText,h.invertY&&t.blendButtonTextActive],children:"Vertical"})})]})]})]}),l(s,{style:t.actions,children:l(R,{style:t.actionButton,onPress:()=>m.resetSettings(),activeOpacity:.7,children:l(u,{style:t.actionButtonText,children:"Reset Position"})})})]})]})]});return p?g(s,{style:t.inlineRoot,children:[l(s,{style:t.inlineHeader,...ho,children:ee.customContent}),te]}):l(ao,{visible:e,onClose:o,onMinimize:r,minimizeTargetPosition:v,initialModalState:y,header:ee,initialMode:"bottomSheet",persistenceKey:"buoy-image-overlay-modal",enablePersistence:true,children:te})}function Ho(e={}){return l(Oe,{...e,inline:true,visible:true,onClose:()=>{}})}var t=ne.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:Ve.background.base},inlineHeader:{borderBottomWidth:1,borderBottomColor:Ve.border.default,backgroundColor:"transparent"},container:{flex:1,backgroundColor:"transparent"},headerTextButton:{height:32,paddingHorizontal:12,borderRadius:8,backgroundColor:f.color.buttonSurface,borderWidth:1,borderColor:f.color.border,alignItems:"center",justifyContent:"center"},headerTextButtonLabel:{fontSize:12,fontWeight:"600",color:f.color.accent},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:f.color.buttonSurface,borderWidth:1,borderColor:f.color.border,alignItems:"center",justifyContent:"center"},homeContainer:{flex:1,paddingHorizontal:12,paddingTop:16,paddingBottom:20,gap:12},homeSubtitle:{fontSize:12,fontWeight:"600",color:f.color.textTertiary,textTransform:"uppercase",letterSpacing:.5,textAlign:"center"},modeGrid:{flexDirection:"row",gap:10},modePanel:{flex:1,alignItems:"center",paddingVertical:20,paddingHorizontal:12,backgroundColor:f.color.surface,borderRadius:12,borderWidth:1,borderColor:f.color.border,gap:8},modeIconCircle:{width:48,height:48,borderRadius:24,alignItems:"center",justifyContent:"center",marginBottom:4},modePanelTitle:{fontSize:13,fontWeight:"700",color:f.color.text,textAlign:"center",lineHeight:17},modePanelDesc:{fontSize:11,color:f.color.textTertiary,textAlign:"center",lineHeight:15},controlsContainer:{flex:1,paddingTop:8,paddingBottom:24,gap:10},infoCard:{marginHorizontal:12,backgroundColor:f.color.surface,borderRadius:8,borderWidth:1,borderColor:f.color.border,padding:10,gap:4},infoRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},infoLabel:{fontSize:11,fontWeight:"500",color:f.color.textTertiary,textTransform:"uppercase",letterSpacing:.3},infoValue:{fontSize:12,fontWeight:"600",color:f.color.text},infoValueMono:{fontSize:12,fontWeight:"600",color:f.color.text,fontFamily:uo},inputSection:{paddingHorizontal:12,gap:6},sectionLabel:{fontSize:11,fontWeight:"600",color:f.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},pasteButton:{paddingVertical:10,borderRadius:8,backgroundColor:f.color.accentSoft,borderWidth:1,borderColor:f.color.accentBorderStrong,alignItems:"center"},pasteButtonText:{fontSize:13,fontWeight:"600",color:f.color.accent},urlRow:{flexDirection:"row",gap:8},urlInput:{flex:1,height:36,borderRadius:10,backgroundColor:f.color.surfaceElevated,borderWidth:1,borderColor:f.color.border,paddingHorizontal:12,fontSize:13,color:f.color.text},loadButton:{height:36,paddingHorizontal:14,borderRadius:8,backgroundColor:f.color.accent,justifyContent:"center",alignItems:"center"},loadButtonDisabled:{opacity:.4},loadButtonText:{fontSize:13,fontWeight:"600",color:f.color.onAccent},toggleSection:{paddingHorizontal:12,gap:6},toggleRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:f.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:f.color.border,paddingHorizontal:12,paddingVertical:8},toggleLabel:{fontSize:13,fontWeight:"500",color:f.color.textSecondary},blendRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:f.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:f.color.border,paddingHorizontal:12,paddingVertical:6},blendButtons:{flexDirection:"row",gap:4},blendButton:{paddingHorizontal:10,paddingVertical:5,borderRadius:6,backgroundColor:"transparent"},blendButtonActive:{backgroundColor:f.color.accentSoft},blendButtonText:{fontSize:12,fontWeight:"600",color:f.color.textTertiary},blendButtonTextActive:{color:f.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:f.color.surfaceElevated,borderWidth:1,borderColor:f.color.border},actionButtonText:{fontSize:12,fontWeight:"500",color:f.color.textSecondary}});import{jsx as Ao}from"react/jsx-runtime";var Wo="#A855F7",Ke=lt({id:"image-overlay",name:"IMG",description:"Design mockup overlay",slot:"both",icon:({size:e})=>Ao(at,{size:e,color:Wo}),component:Oe,props:{enableSharedModalDimensions:false}}),zo=it(Ke,e=>({enableSharedModalDimensions:e.enableSharedModalDimensions??false}));import{useState as qe,useEffect as Lo,useRef as Ge,useMemo as Je,useCallback as Vo}from"react";import{absoluteFill as Do,monoFont as Eo}from"@buoy-gg/shared-ui/web";import{Fragment as Qe,jsx as I,jsxs as we}from"react/jsx-runtime";function Ze({uri:e,style:o,invertX:n,invertY:r}){let a=[];n&&a.push({scaleX:-1}),r&&a.push({scaleY:-1});let y=a.length>0?{transform:a}:{};return I(Te,{testID:"buoy-internal-image-overlay",source:{uri:e},style:[o,y],pointerEvents:"none"})}var ae=30;function Fo({imageUri:e,x:o,y:n,width:r,height:a,opacity:y,aspectRatio:v,invertX:p,invertY:b,locked:c}){let[S,A]=qe(false),X=Ge({x:0,y:0}),h=Ge({x:0,y:0,width:0,height:0}),P=pe.get("window"),O=Je(()=>me.create({onStartShouldSetPanResponder:()=>!c,onMoveShouldSetPanResponder:(D,T)=>!c&&(Math.abs(T.dx)>2||Math.abs(T.dy)>2),onPanResponderTerminationRequest:()=>false,onPanResponderGrant:()=>{let D=m.getState();X.current={x:D.freeX,y:D.freeY},A(true)},onPanResponderMove:(D,T)=>{let L=m.getState(),k=Math.max(0,Math.min(X.current.x+T.dx,P.width-L.freeWidth)),H=Math.max(0,Math.min(X.current.y+T.dy,P.height-L.freeHeight));m.setFreePosition(k,H)},onPanResponderRelease:()=>A(false),onPanResponderTerminate:()=>A(false)}),[P.width,P.height,c]),z=Vo(D=>me.create({onStartShouldSetPanResponder:()=>!c,onMoveShouldSetPanResponder:()=>!c,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:()=>{let T=m.getState();h.current={x:T.freeX,y:T.freeY,width:T.freeWidth,height:T.freeHeight},A(true)},onPanResponderMove:(T,L)=>{let{dx:k,dy:H}=L;if(Math.abs(k)<.5&&Math.abs(H)<.5)return;let x=h.current,W=v>0?v:x.width/x.height,ee=Math.abs(k),te=Math.abs(H),d=ee>=te,w,C,N=x.x,J=x.y;switch(D){case"bottomRight":{w=d?x.width+k:(x.height+H)*W,w=Math.max(ae,Math.min(w,P.width-x.x)),C=w/W;break}case"bottomLeft":{w=d?x.width-k:(x.height+H)*W,w=Math.max(ae,w),C=w/W,N=x.x+x.width-w,N=Math.max(0,N),w=Math.min(w,x.x+x.width),C=w/W;break}case"topRight":{w=d?x.width+k:(x.height-H)*W,w=Math.max(ae,Math.min(w,P.width-x.x)),C=w/W,J=x.y+x.height-C,J=Math.max(0,J),C=Math.min(C,x.y+x.height),w=C*W;break}case"topLeft":{w=d?x.width-k:(x.height-H)*W,w=Math.max(ae,w),C=w/W,N=x.x+x.width-w,J=x.y+x.height-C,N=Math.max(0,N),J=Math.max(0,J),w=Math.min(w,x.x+x.width),C=w/W,J=x.y+x.height-C;break}}w=Math.max(ae,Math.round(w)),C=Math.max(ae,Math.round(C)),m.setFreeDimensions(w,C,Math.round(N),Math.round(J))},onPanResponderRelease:()=>A(false),onPanResponderTerminate:()=>A(false)}),[P.width,P.height,v,c]),_=Je(()=>({topLeft:z("topLeft"),topRight:z("topRight"),bottomLeft:z("bottomLeft"),bottomRight:z("bottomRight")}),[z]),G={...Do,opacity:y};return we(s,{style:{position:"absolute",left:o,top:n,width:r,height:a},pointerEvents:c?"none":"auto",children:[I(s,{style:ne.absoluteFill,...c?{}:O.panHandlers,children:I(Ze,{uri:e,style:G,invertX:p,invertY:b})}),I(s,{pointerEvents:"none",style:[M.freeBorder,S&&M.freeBorderActive,c&&M.freeBorderLocked]}),!c&&we(Qe,{children:[I(s,{..._.topLeft.panHandlers,style:[M.cornerWrapper,{top:-20,left:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:I(s,{style:[M.cornerHandle,S&&M.cornerHandleActive]})}),I(s,{..._.topRight.panHandlers,style:[M.cornerWrapper,{top:-20,right:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:I(s,{style:[M.cornerHandle,S&&M.cornerHandleActive]})}),I(s,{..._.bottomLeft.panHandlers,style:[M.cornerWrapper,{bottom:-20,left:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:I(s,{style:[M.cornerHandle,S&&M.cornerHandleActive]})}),I(s,{..._.bottomRight.panHandlers,style:[M.cornerWrapper,{bottom:-20,right:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:I(s,{style:[M.cornerHandle,S&&M.cornerHandleActive]})})]})]})}function Yo(){let[e,o]=qe(()=>m.getState());Lo(()=>m.subscribe(o),[]);let{mode:n,enabled:r,imageUri:a,imageWidth:y,imageHeight:v,targetRect:p,targetLabel:b,showOutline:c,opacity:S,scale:A,offsetX:X,offsetY:h,invertX:P,invertY:O,locked:z,freeX:_,freeY:G,freeWidth:D,freeHeight:T}=e,L=y&&v&&v>0?y/v:0;if(n==="free"&&r&&a)return I(s,{style:M.overlay,pointerEvents:"box-none",nativeID:"image-overlay-standalone",children:I(Fo,{imageUri:a,x:_,y:G,width:D,height:T,opacity:S,aspectRatio:L,invertX:P,invertY:O,locked:z})});if(!p)return null;let k=r&&a;return we(s,{style:M.overlay,pointerEvents:"box-none",nativeID:"image-overlay-standalone",children:[c&&we(Qe,{children:[I(s,{pointerEvents:"none",nativeID:"__image_overlay_highlight__",style:[M.highlight,{left:p.x-3,top:p.y-3,width:p.width+6,height:p.height+6}]}),b&&I(s,{pointerEvents:"none",style:[M.label,{left:p.x,top:p.y-20}],children:I(u,{style:M.labelText,children:b})})]}),k&&(()=>{let H=(y??p.width)*A,x=(v??p.height)*A,W=p.x+p.width/2,ee=p.y+p.height/2,te={position:"absolute",left:W-H/2+X,top:ee-x/2+h,width:H,height:x,opacity:S};return I(Ze,{uri:a,style:te,invertX:P,invertY:O})})()]})}var M=ne.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:999999,elevation:999999,borderWidth:0},highlight:{position:"absolute",borderWidth:2,borderStyle:"dashed",borderColor:"#20C997",backgroundColor:"transparent"},label:{position:"absolute",backgroundColor:"#20C997",paddingHorizontal:6,paddingVertical:2,borderRadius:3},labelText:{color:"#fff",fontSize:10,fontWeight:"700",fontFamily:Eo},freeBorder:{position:"absolute",top:-6,left:-6,right:-6,bottom:-6,borderWidth:1,borderColor:"transparent",borderRadius:4},freeBorderActive:{borderColor:"#20C997",borderStyle:"dashed"},freeBorderLocked:{borderColor:"#f59e0b",borderStyle:"solid"},cornerWrapper:{position:"absolute",width:24,height:24,zIndex:1e3,alignItems:"center",justifyContent:"center"},cornerHandle:{width:12,height:12,borderRadius:6,backgroundColor:"#20C997",borderWidth:2,borderColor:"#fff"},cornerHandleActive:{backgroundColor:"#10b981",shadowColor:"#10b981",shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:6}});export{m as ImageOverlayController,Oe as ImageOverlayModal,Yo as ImageOverlayStandalone,Ho as ImageOverlayToolView,zo as createImageOverlayTool,Ke as imageOverlayToolPreset,de as scanForImageTargets,go as setDevToolsHookOverride};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/image-overlay",
-  "version": "7.0.40",
+  "version": "7.0.42",
   "description": "Overlay a design mockup on a running React Native app and adjust opacity to compare spacing and alignment.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -10,27 +10,37 @@
   "exports": {
     ".": {
       "react-native": "./lib/module/index.js",
+      "browser": {
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/web/index.mjs"
+      },
       "import": {
-        "default": "./lib/module/index.js",
-        "types": "./lib/typescript/index.d.ts"
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/module/index.js"
       },
       "require": {
-        "default": "./lib/commonjs/index.js",
-        "types": "./lib/typescript/index.d.ts"
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/commonjs/index.js"
       }
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./web": {
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/web/index.mjs"
+    }
   },
   "files": [
     "lib"
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.40"
+    "@buoy-gg/shared-ui": "^7.0.42"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-web": "^0.21.0",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
@@ -85,10 +95,22 @@
     "pixel-perfect",
     "ui-review"
   ],
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-web": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "scripts": {
-    "build": "bob build",
+    "build": "bob build && pnpm run build:web",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf lib",
-    "test": "pnpm run typecheck"
+    "test": "pnpm run typecheck",
+    "build:web": "node ../../scripts/build-web.mjs image-overlay"
   }
 }

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

@@ -1 +0,0 @@
-{"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/ImageOverlayStandalone.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ImageOverlayStandalone.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/components/ImageOverlayStandalone.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAwNjF,wBAAgB,sBAAsB,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CAuFlE"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"OverlayControls.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/components/OverlayControls.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAmIH,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,KAAK,EACL,OAAO,EACP,OAAO,EACP,eAAe,EACf,aAAa,EACb,cAAc,EACd,WAAW,GACZ,EAAE,oBAAoB,+BAuDtB"}

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

@@ -1 +0,0 @@
-{"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/imageOverlay/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,YAAY;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,MAAM,GAAG,IAAI,CAAC;AACtD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,UAAU,EAAE,YAAY,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAEhB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,GAAG,CAAC;IACd,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,sBAAsB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACvD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB"}

package/lib/typescript/imageOverlay/utils/ImageOverlayController.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ImageOverlayController.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/utils/ImageOverlayController.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAgB,YAAY,EAAE,MAAM,UAAU,CAAC;AAK3D,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;AAqI9C,eAAO,MAAM,sBAAsB;wBACb,QAAQ,GAAG,MAAM,IAAI;gBAM7B,YAAY;wBAME,GAAG,SAAS,MAAM,UAAU,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;qBAmBlD,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;sBAmB3B,MAAM;oBAKR,MAAM;iBAKT,MAAM,KAAK,MAAM;;;sBAeZ,OAAO;0BAKH,OAAO;sBASX,OAAO;yBAIJ,OAAO;wBAKR,OAAO;;;;;iBA+CR,OAAO,CAAC,IAAI,CAAC;uBAYP,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;uBAkC5B,MAAM,KAAK,MAAM;6BAKX,MAAM,UAAU,MAAM,KAAK,MAAM,KAAK,MAAM;;CAgBtE,CAAC"}

package/lib/typescript/imageOverlay/utils/componentMeasurement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"componentMeasurement.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/utils/componentMeasurement.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C;;;GAGG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,GAAG,GAAG,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,CAoG3E"}

package/lib/typescript/imageOverlay/utils/devtoolsHook.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"devtoolsHook.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/utils/devtoolsHook.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAE3D;AAED,wBAAgB,eAAe,IAAI,GAAG,CAIrC"}

package/lib/typescript/imageOverlay/utils/fiberScanner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fiberScanner.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/utils/fiberScanner.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAgFjD;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,EAAE,CAmCxD"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAK1E,OAAO,EACL,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kDAAkD,CAAC;AAK1F,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AAKrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAK5E,YAAY,EACV,sBAAsB,EACtB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,gBAAgB,GACjB,MAAM,sBAAsB,CAAC"}

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

@@ -1 +0,0 @@
-{"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"}