@buoy-gg/image-overlay 7.0.76 → 7.0.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/commonjs/imageOverlay/components/TargetList.js +1 -1
  2. package/lib/module/imageOverlay/components/TargetList.js +1 -1
  3. package/lib/web/index.mjs +1 -1
  4. package/package.json +2 -2
package/lib/commonjs/imageOverlay/components/TargetList.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.TargetList=TargetList;var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function TargetRow({target:e,onSelect:t}){return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.card,onPress:t,activeOpacity:.7,testID:`buoy-image-overlay-target-${e.label}`,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.colorIndicator}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.content,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.topRow,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.label,numberOfLines:1,testID:`buoy-image-overlay-target-${e.label}-label`,children:e.label})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.bottomRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.badgeRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.testIdBadge,children:[(0,_jsxRuntime.jsx)(_sharedUi.Hash,{size:8,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.testIdBadgeText,children:"testID"})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.testIdValue,numberOfLines:1,testID:`buoy-image-overlay-target-${e.label}-testid`,children:e.testID})]}),e.componentName&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.componentName,numberOfLines:1,testID:`buoy-image-overlay-target-${e.label}-component`,children:e.componentName})]})]}),(0,_jsxRuntime.jsx)(_sharedUi.ChevronRight,{size:16,color:_sharedUi.night.color.textTertiary})]})}function TargetList({targets:e,onSelect:t}){if(e.length===0){return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:"buoy-image-overlay-empty",otto:"scanning",title:"No targets found",message:'Tag components with\ntestID="image-target:YourLabel"'})}return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:styles.list,contentContainerStyle:styles.listContent,children:e.map(o=>(0,_jsxRuntime.jsx)(TargetRow,{target:o,onSelect:()=>t(o)},o.testID))})}const styles=_reactNative.StyleSheet.create({list:{flex:1},listContent:{paddingTop:8,paddingBottom:20},card:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10,backgroundColor:_sharedUi.night.color.accent},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},label:{fontSize:13,fontWeight:"600",color:_sharedUi.night.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:_sharedUi.night.color.accentSoft,gap:3},testIdBadgeText:{fontSize:9,fontWeight:"700",color:_sharedUi.night.color.accent},testIdValue:{fontSize:11,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,flex:1},componentName:{fontSize:10,color:"#a855f7",fontFamily:_sharedUi.monoFont,marginTop:1},emptyState:{alignItems:"center",paddingVertical:40,paddingHorizontal:32},emptyTitle:{color:_sharedUi.night.color.text,fontSize:14,fontWeight:"600",marginBottom:6},emptyText:{color:_sharedUi.night.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:18,fontFamily:_sharedUi.monoFont}});
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.TargetList=TargetList;var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function TargetRow({target:e,onSelect:t}){return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.card,onPress:t,activeOpacity:.7,testID:`buoy-image-overlay-target-${e.label}`,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.colorIndicator}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.content,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.topRow,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.label,numberOfLines:1,testID:`buoy-image-overlay-target-${e.label}-label`,children:e.label})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.bottomRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.badgeRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.testIdBadge,children:[(0,_jsxRuntime.jsx)(_sharedUi.Hash,{size:8,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.testIdBadgeText,children:"testID"})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.testIdValue,numberOfLines:1,testID:`buoy-image-overlay-target-${e.label}-testid`,children:e.testID})]}),e.componentName&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.componentName,numberOfLines:1,testID:`buoy-image-overlay-target-${e.label}-component`,children:e.componentName})]})]}),(0,_jsxRuntime.jsx)(_sharedUi.ChevronRight,{size:16,color:_sharedUi.night.color.textTertiary})]})}function TargetList({targets:e,onSelect:t}){if(e.length===0){return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:"buoy-image-overlay-empty",otto:"scanning",title:"No targets found",message:'Tag components with\ntestID="image-target:YourLabel"'})}return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{keyboardShouldPersistTaps:"handled",style:styles.list,contentContainerStyle:styles.listContent,children:e.map(o=>(0,_jsxRuntime.jsx)(TargetRow,{target:o,onSelect:()=>t(o)},o.testID))})}const styles=_reactNative.StyleSheet.create({list:{flex:1},listContent:{paddingTop:8,paddingBottom:20},card:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10,backgroundColor:_sharedUi.night.color.accent},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},label:{fontSize:13,fontWeight:"600",color:_sharedUi.night.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:_sharedUi.night.color.accentSoft,gap:3},testIdBadgeText:{fontSize:9,fontWeight:"700",color:_sharedUi.night.color.accent},testIdValue:{fontSize:11,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,flex:1},componentName:{fontSize:10,color:"#a855f7",fontFamily:_sharedUi.monoFont,marginTop:1},emptyState:{alignItems:"center",paddingVertical:40,paddingHorizontal:32},emptyTitle:{color:_sharedUi.night.color.text,fontSize:14,fontWeight:"600",marginBottom:6},emptyText:{color:_sharedUi.night.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:18,fontFamily:_sharedUi.monoFont}});
package/lib/module/imageOverlay/components/TargetList.js CHANGED
@@ -1 +1 @@
1
- "use strict";import{View as r,Text as i,TouchableOpacity as d,StyleSheet as m,ScrollView as g}from"react-native";import{ChevronRight as y,night as o,Hash as f,ToolEmptyState as p,monoFont as s}from"@buoy-gg/shared-ui";import{jsx as n,jsxs as l}from"react/jsx-runtime";function b({target:t,onSelect:a}){return l(d,{style:e.card,onPress:a,activeOpacity:.7,testID:`buoy-image-overlay-target-${t.label}`,children:[n(r,{style:e.colorIndicator}),l(r,{style:e.content,children:[n(r,{style:e.topRow,children:n(i,{style:e.label,numberOfLines:1,testID:`buoy-image-overlay-target-${t.label}-label`,children:t.label})}),l(r,{style:e.bottomRow,children:[l(r,{style:e.badgeRow,children:[l(r,{style:e.testIdBadge,children:[n(f,{size:8,color:o.color.accent}),n(i,{style:e.testIdBadgeText,children:"testID"})]}),n(i,{style:e.testIdValue,numberOfLines:1,testID:`buoy-image-overlay-target-${t.label}-testid`,children:t.testID})]}),t.componentName&&n(i,{style:e.componentName,numberOfLines:1,testID:`buoy-image-overlay-target-${t.label}-component`,children:t.componentName})]})]}),n(y,{size:16,color:o.color.textTertiary})]})}export function TargetList({targets:t,onSelect:a}){if(t.length===0){return n(p,{testID:"buoy-image-overlay-empty",otto:"scanning",title:"No targets found",message:'Tag components with\ntestID="image-target:YourLabel"'})}return n(g,{style:e.list,contentContainerStyle:e.listContent,children:t.map(c=>n(b,{target:c,onSelect:()=>a(c)},c.testID))})}const e=m.create({list:{flex:1},listContent:{paddingTop:8,paddingBottom:20},card:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10,backgroundColor:o.color.accent},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},label:{fontSize:13,fontWeight:"600",color:o.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:o.color.accentSoft,gap:3},testIdBadgeText:{fontSize:9,fontWeight:"700",color:o.color.accent},testIdValue:{fontSize:11,color:o.color.text,fontFamily:s,flex:1},componentName:{fontSize:10,color:"#a855f7",fontFamily:s,marginTop:1},emptyState:{alignItems:"center",paddingVertical:40,paddingHorizontal:32},emptyTitle:{color:o.color.text,fontSize:14,fontWeight:"600",marginBottom:6},emptyText:{color:o.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:18,fontFamily:s}});
1
+ "use strict";import{View as r,Text as i,TouchableOpacity as d,StyleSheet as m,ScrollView as g}from"react-native";import{ChevronRight as y,night as o,Hash as p,ToolEmptyState as f,monoFont as s}from"@buoy-gg/shared-ui";import{jsx as n,jsxs as l}from"react/jsx-runtime";function b({target:t,onSelect:a}){return l(d,{style:e.card,onPress:a,activeOpacity:.7,testID:`buoy-image-overlay-target-${t.label}`,children:[n(r,{style:e.colorIndicator}),l(r,{style:e.content,children:[n(r,{style:e.topRow,children:n(i,{style:e.label,numberOfLines:1,testID:`buoy-image-overlay-target-${t.label}-label`,children:t.label})}),l(r,{style:e.bottomRow,children:[l(r,{style:e.badgeRow,children:[l(r,{style:e.testIdBadge,children:[n(p,{size:8,color:o.color.accent}),n(i,{style:e.testIdBadgeText,children:"testID"})]}),n(i,{style:e.testIdValue,numberOfLines:1,testID:`buoy-image-overlay-target-${t.label}-testid`,children:t.testID})]}),t.componentName&&n(i,{style:e.componentName,numberOfLines:1,testID:`buoy-image-overlay-target-${t.label}-component`,children:t.componentName})]})]}),n(y,{size:16,color:o.color.textTertiary})]})}export function TargetList({targets:t,onSelect:a}){if(t.length===0){return n(f,{testID:"buoy-image-overlay-empty",otto:"scanning",title:"No targets found",message:'Tag components with\ntestID="image-target:YourLabel"'})}return n(g,{keyboardShouldPersistTaps:"handled",style:e.list,contentContainerStyle:e.listContent,children:t.map(c=>n(b,{target:c,onSelect:()=>a(c)},c.testID))})}const e=m.create({list:{flex:1},listContent:{paddingTop:8,paddingBottom:20},card:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10,backgroundColor:o.color.accent},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},label:{fontSize:13,fontWeight:"600",color:o.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:o.color.accentSoft,gap:3},testIdBadgeText:{fontSize:9,fontWeight:"700",color:o.color.accent},testIdValue:{fontSize:11,color:o.color.text,fontFamily:s,flex:1},componentName:{fontSize:10,color:"#a855f7",fontFamily:s,marginTop:1},emptyState:{alignItems:"center",paddingVertical:40,paddingHorizontal:32},emptyTitle:{color:o.color.text,fontSize:14,fontWeight:"600",marginBottom:6},emptyText:{color:o.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:18,fontFamily:s}});
package/lib/web/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
1
  "use client";var ze=Object.defineProperty;var ut=Object.getOwnPropertyDescriptor;var ht=Object.getOwnPropertyNames;var gt=Object.prototype.hasOwnProperty;var yt=(e,t)=>{for(var n in t)ze(e,n,{get:t[n],enumerable:true})},He=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of ht(t))!gt.call(e,a)&&a!==n&&ze(e,a,{get:()=>t[a],enumerable:!(r=ut(t,a))||r.enumerable});return e},ft=(e,t,n)=>(He(e,t,"default"),n&&He(n,t,"default"));var ln=(()=>{try{let e=globalThis.Capacitor;if(e&&typeof e.isNativePlatform=="function"&&e.isNativePlatform())return e.DEBUG===true}catch{}return process.env.NODE_ENV!=="production"})();typeof window<"u"&&typeof globalThis.global>"u"&&(globalThis.global=globalThis);import{ImageOverlayIcon as pt,createToolFactory as mt,defineToolPreset as bt}from"@buoy-gg/shared-ui/web";var se;function vt(){return typeof navigator>"u"||!navigator.clipboard?null:{async hasImageAsync(){if(se=void 0,!navigator.clipboard.read)return false;let e=await navigator.clipboard.read();for(let t of e){let n=t.types.find(r=>r.startsWith("image/"));if(n)return se=await t.getType(n),true}return false},async getImageAsync(){if(!se)return null;let e=se;return se=void 0,{data:await new Promise((t,n)=>{let r=new FileReader;r.onload=()=>t(String(r.result)),r.onerror=n,r.readAsDataURL(e)})}},getStringAsync:()=>navigator.clipboard.readText()}}function xt(){return null}import{useState as ce,useEffect as Te,useCallback as oe}from"react";var We={};yt(We,{AccessibilityInfo:()=>Ct,ActivityIndicator:()=>So,Alert:()=>ue,Animated:()=>po,AppRegistry:()=>Rt,AppState:()=>Mt,Appearance:()=>Tt,BackHandler:()=>Bt,Button:()=>Io,CheckBox:()=>Ft,Clipboard:()=>Dt,DeviceEventEmitter:()=>to,Dimensions:()=>be,Easing:()=>Pt,FlatList:()=>Yt,I18nManager:()=>Ot,Image:()=>Re,ImageBackground:()=>Xt,InteractionManager:()=>At,Keyboard:()=>kt,KeyboardAvoidingView:()=>$t,LayoutAnimation:()=>Lt,Linking:()=>Et,LogBox:()=>eo,Modal:()=>xo,NativeEventEmitter:()=>zt,NativeModules:()=>It,PanResponder:()=>ve,Picker:()=>jt,PixelRatio:()=>Ht,Platform:()=>Ve,Pressable:()=>vo,ProgressBar:()=>Nt,RefreshControl:()=>_t,SafeAreaView:()=>Ut,ScrollView:()=>Ne,SectionList:()=>Kt,Share:()=>Wt,StatusBar:()=>qt,StyleSheet:()=>re,Switch:()=>wo,Text:()=>f,TextInput:()=>De,Touchable:()=>Gt,TouchableHighlight:()=>mo,TouchableNativeFeedback:()=>Jt,TouchableOpacity:()=>R,TouchableWithoutFeedback:()=>bo,UIManager:()=>Fe,Vibration:()=>Vt,View:()=>c,VirtualizedList:()=>Qt,YellowBox:()=>Zt,findNodeHandle:()=>Ue,unstable_createElement:()=>St,useColorScheme:()=>oo,useLocaleContext:()=>no,useWindowDimensions:()=>ao});ft(We,wt);import*as wt from"react-native-web";import{unstable_createElement as St,NativeModules as It,AccessibilityInfo as Ct,Appearance as Tt,AppRegistry as Rt,AppState as Mt,BackHandler as Bt,Clipboard as Dt,Dimensions as be,Easing as Pt,I18nManager as Ot,Keyboard as kt,InteractionManager as At,LayoutAnimation as Lt,Linking as Et,NativeEventEmitter as zt,PanResponder as ve,PixelRatio as Ht,Platform as Ve,Share as Wt,UIManager as Fe,Vibration as Vt,CheckBox as Ft,FlatList as Yt,Image as Re,ImageBackground as Xt,KeyboardAvoidingView as $t,Picker as jt,ProgressBar as Nt,RefreshControl as _t,SafeAreaView as Ut,SectionList as Kt,StatusBar as qt,Touchable as Gt,TouchableNativeFeedback as Jt,VirtualizedList as Qt,YellowBox as Zt,LogBox as eo,DeviceEventEmitter as to,useColorScheme as oo,useLocaleContext as no,useWindowDimensions as ao}from"react-native-web";import*as V from"react-native-web";import{createElement as Me,forwardRef as Ye,useCallback as ro,useRef as io}from"react";import{useEffect as lo,useState as so}from"react";import{createPortal as co}from"react-dom";var uo='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';import{jsx as ho}from"react/jsx-runtime";var de=Symbol.for("@buoy-gg/portal-host"),Xe=e=>{if(!(e instanceof Element))return false;if(e.closest("input, textarea, select"))return true;let t=e.closest("[contenteditable]")?.getAttribute("contenteditable")?.toLowerCase();return t===""||t==="true"||t==="plaintext-only"};function $e(){let e=document;if(e[de])return e[de].host;let t=document.createElement("div");t.dataset.buoyPortalHost="",Object.assign(t.style,{position:"fixed",inset:"0",zIndex:"2147483647",pointerEvents:"none",fontFamily:uo});let n=()=>{let i=document.fullscreenElement,I=i&&i.tagName!=="CANVAS"?i:document.body;t.parentElement!==I&&I.appendChild(t)},r=new Map,a=i=>{(!t.contains(i.target)||!Xe(i.target))&&r.set(i.code||i.key,{key:i.key,code:i.code,location:i.location,keyCode:i.keyCode,which:i.which,altKey:i.altKey,ctrlKey:i.ctrlKey,metaKey:i.metaKey,shiftKey:i.shiftKey})},g=i=>{r.delete(i.code||i.key)},x=()=>r.clear(),p=()=>{let i=[...r.values()];r.clear();for(let I of i)document.dispatchEvent(new KeyboardEvent("keyup",{...I,bubbles:true}))},y=i=>{Xe(i.target)&&i.stopPropagation()},d=i=>i.stopPropagation();return n(),document.addEventListener("fullscreenchange",n),document.addEventListener("keydown",a,true),document.addEventListener("keyup",g,true),window.addEventListener("blur",x),t.addEventListener("focusin",p),t.addEventListener("keydown",y),t.addEventListener("keyup",y),t.addEventListener("keypress",y),t.addEventListener("wheel",d,{passive:true}),e[de]={host:t,users:0,dispose:()=>{document.removeEventListener("fullscreenchange",n),document.removeEventListener("keydown",a,true),document.removeEventListener("keyup",g,true),window.removeEventListener("blur",x),t.remove(),delete e[de]}},t}function go({children:e}){let[t,n]=so(null);return lo(()=>{let r=$e(),a=document[de];return a.users++,n(r),()=>{--a.users===0&&a.dispose()}},[]),t?co(ho("div",{"data-buoy-root":"",style:{display:"contents",pointerEvents:"auto"},children:e}),t):null}var ne=V,yo=["shadowColor","shadowOffset","shadowOpacity","shadowRadius","textShadowColor","textShadowOffset","textShadowRadius"],ae=e=>typeof e=="number"?`${e}px`:e;function Be(e){if(Array.isArray(e)){let I=e.map(Be);return I.some((A,u)=>A!==e[u])?I:e}if(!e||typeof e!="object"||!yo.some(I=>e[I]!=null))return e;let{shadowColor:t,shadowOffset:n,shadowOpacity:r,shadowRadius:a,textShadowColor:g,textShadowOffset:x,textShadowRadius:p,...y}=e;if(t!=null||n!=null||r!=null||a!=null){let I=t??"black",A=r==null?I:`color-mix(in srgb, ${I} ${Math.min(r,1)*100}%, transparent)`,u=`${ae(n?.width??0)} ${ae(n?.height??0)} ${ae(a??0)} ${A}`;y.boxShadow=typeof y.boxShadow=="string"?`${y.boxShadow}, ${u}`:y.boxShadow??u}let{width:d=0,height:i=0}=x??{};if(g&&(d||i||p)){let I=`${ae(d)} ${ae(i)} ${ae(p??0)} ${g}`;y.textShadow=y.textShadow?`${y.textShadow}, ${I}`:I}return y}var fo=ne.StyleSheet.create({auto:{pointerEvents:"auto"},none:{pointerEvents:"none"},"box-none":{pointerEvents:"box-none"},"box-only":{pointerEvents:"box-only"}});function je(e,t){if(typeof e=="function")return r=>je(e(r),t);let n=Be(e);return t?[n,fo[t]]:n}var re={...ne.StyleSheet,create:e=>ne.StyleSheet.create(Object.fromEntries(Object.entries(e).map(([t,n])=>[t,Be(n)])))};function j(e){let t=Ye((r,a)=>{let{accessibilityState:g,accessibilityValue:x,pointerEvents:p,...y}=r;for(let i of["busy","checked","disabled","expanded","selected"])g?.[i]!==void 0&&y[`aria-${i}`]===void 0&&(y[`aria-${i}`]=g[i]);for(let[i,I]of Object.entries({min:"valuemin",max:"valuemax",now:"valuenow",text:"valuetext"}))x?.[i]!==void 0&&y[`aria-${I}`]===void 0&&(y[`aria-${I}`]=x[i]);let d=je(y.style,p);return d!==y.style&&(y.style=d),Me(e,{...y,ref:a})}),n=e.State;return n&&Object.assign(t,{State:n}),t.displayName=e.displayName??e.name??"NativeWebView",t}var c=j(V.View),f=j(V.Text),po={...ne.Animated,View:ne.Animated.createAnimatedComponent(c),Text:ne.Animated.createAnimatedComponent(f)},De=j(V.TextInput),R=j(V.TouchableOpacity),mo=j(V.TouchableHighlight),bo=j(V.TouchableWithoutFeedback),vo=j(V.Pressable),Ne=j(V.ScrollView),_e=Ye((e,t)=>{let n=io(null),r=ro(a=>{if(a){let g=a;for(;g.parentElement&&g.parentElement!==document.body;)g=g.parentElement;g.parentElement===document.body&&(n.current=g,Object.assign(g.style,{position:"relative",zIndex:"2147483647",pointerEvents:"auto"}),$e().appendChild(g))}else n.current&&(document.body.appendChild(n.current),n.current=null);typeof t=="function"?t(a):t&&(t.current=a)},[t]);return Me(go,null,Me(V.Modal,{...e,ref:r}))});_e.displayName="Modal";var xo=j(_e),wo=j(V.Switch),So=j(V.ActivityIndicator),Io=j(V.Button),Ue=V.findNodeHandle,ue={alert(e,t,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 g=document.createElement("h2");if(g.textContent=e,g.style.cssText="font-size:18px;margin:0 0 12px",a.appendChild(g),t){let d=document.createElement("p");d.textContent=t,d.style.cssText="line-height:1.5;white-space:pre-wrap;margin:0 0 20px",a.appendChild(d)}let x=document.createElement("div");x.style.cssText="display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px";let p=n?.length?n:[{text:"OK"}],y=()=>{a.close?.(),a.remove()};for(let d of p){let i=document.createElement("button");i.type="button",i.textContent=d.text??"OK",i.style.cssText=`padding:9px 14px;border:1px solid #64748b;border-radius:7px;color:white;background:${d.style==="destructive"?"#a52b38":"#283a4d"};cursor:pointer;font:inherit`,i.onclick=()=>{y(),d.onPress?.()},x.appendChild(i)}a.addEventListener("cancel",d=>{d.preventDefault(),r?.cancelable!==false&&(y(),r?.onDismiss?.())}),a.appendChild(x),document.body.appendChild(a),a.showModal?a.showModal():a.setAttribute("open","")}};import{JsModal as Co,ModalHeader as xe,macOSColors as Ke,night as b,Trash2 as To,SquareDashed as Ro,Image as Mo,PowerToggleButton as Bo,windowDragProps as Do,ToggleRow as Pe,monoFont as Po}from"@buoy-gg/shared-ui/web";function Oe(e){return new Promise(t=>{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){t({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(()=>t(null),200);r.measure((g,x,p,y,d,i)=>{clearTimeout(a),d!=null&&i!=null&&p!=null&&y!=null&&p>0&&y>0?t({x:d,y:i,width:p,height:y}):t(null)});return}try{let r=Ue(e);if(r!=null){let a=setTimeout(()=>t(null),200);Fe.measure(r,(g,x,p,y,d,i)=>{clearTimeout(a),d!=null&&i!=null&&p!=null&&y!=null&&p>0&&y>0?t({x:d,y:i,width:p,height:y}):t(null)});return}}catch{}t(null)}catch{t(null)}})}var qe=null;function Oo(e){qe=e??null}function Ge(){return qe||(typeof globalThis>"u"?null:globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__??null)}var Je="image-target:",ko=5,Ao=22;function Lo(){let e=Ge();if(!e?.getFiberRoots)return[];let t=new Set,n=e.renderers?.keys?Array.from(e.renderers.keys()):[1];for(let r of n)try{e.getFiberRoots(r)?.forEach(a=>t.add(a))}catch{}return[...t]}function Eo(e){return e.tag===Ao&&e.memoizedState!==null}function zo(e){return e.memoizedProps?.activityState===0}function he(e,t,n=0,r=new Set){if(!(!e||r.has(e)||n>500)){if(r.add(e),Eo(e)){e.sibling&&he(e.sibling,t,n,r);return}if(zo(e)){e.sibling&&he(e.sibling,t,n,r);return}t(e,n),e.child&&he(e.child,t,n+1,r),e.sibling&&he(e.sibling,t,n,r)}}function Ho(e){let t=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 g=typeof a=="string"?a:a.displayName||a.name;if(g&&!t.has(g))return g}n=n.return}return null}function ge(){let e=Lo();if(e.length===0)return[];let t=[];for(let n of e)he(n.current,r=>{if(r.tag!==ko)return;let a=r.memoizedProps?.testID??r.pendingProps?.testID??r.memoizedProps?.["data-testid"]??r.pendingProps?.["data-testid"];if(!a||!a.startsWith(Je))return;let g=a.slice(Je.length);g&&t.push({label:g,testID:a,fiber:r,instance:r.stateNode,componentName:Ho(r)})});return t}var Qe={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},l={...Qe},ke=new Set,K=null,we=null,ye=false,fe=null,Wo=null;function M(){for(let e of ke)e(l)}function Vo(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 Ze(e,t){let n=await Oe(e);if(n)return{rect:n,freshInstance:e};let r=ge().find(a=>a.label===t);return r&&(n=await Oe(r.instance),n)?{rect:n,freshInstance:r.instance}:{rect:null,freshInstance:e}}function Fo(){if(fe)return;let e=Ge();if(e){if(e.rendererInterfaces)for(let[,t]of e.rendererInterfaces)typeof t.setTraceUpdatesEnabled=="function"&&t.setTraceUpdatesEnabled(true);typeof e.sub=="function"&&(fe=e.sub("traceUpdates",$o))}}var ie=null,Ae=false;function Yo(){if(ie!==null||typeof requestAnimationFrame!="function")return;let e=()=>{ie=requestAnimationFrame(e),!(Ae||!ye||!K)&&(Ae=true,tt().finally(()=>{Ae=false}))};ie=requestAnimationFrame(e)}function Xo(){ie!==null&&typeof cancelAnimationFrame=="function"&&cancelAnimationFrame(ie),ie=null}function et(){Xo(),fe&&(fe(),fe=null)}function $o(e){!ye||!K||tt()}function tt(){return Oe(K).then(e=>{if(e&&l.targetRect){let t=l.targetRect;(Math.abs(e.x-t.x)>.5||Math.abs(e.y-t.y)>.5||Math.abs(e.width-t.width)>.5||Math.abs(e.height-t.height)>.5)&&(l={...l,targetRect:e},M())}}).catch(()=>{})}function ot(e){return new Promise(t=>{Re.getSize(e,(n,r)=>t({width:n,height:r}),()=>t(null))})}var v={subscribe(e){return ke.add(e),e(l),()=>ke.delete(e)},getState(){return l},async setTarget(e,t,n){K=e,we=t;let r=n?.stateNode??e,{rect:a,freshInstance:g}=await Ze(r,t);K=g;let x=Vo(K);l={...l,mode:"component",targetTag:x,targetLabel:t,targetRect:a},M()},async setImageUri(e){let t=await ot(e),n=1;t&&l.targetRect&&t.width>0&&(n=l.targetRect.width/t.width),l={...l,imageUri:e,imageWidth:t?.width??null,imageHeight:t?.height??null,scale:n,showOutline:false},M()},setOpacity(e){l={...l,opacity:Math.max(0,Math.min(1,e))},M()},setScale(e){l={...l,scale:Math.max(.01,Math.min(5,e))},M()},setOffset(e,t){l={...l,offsetX:e,offsetY:t},M()},toggleInvertX(){l={...l,invertX:!l.invertX},M()},toggleInvertY(){l={...l,invertY:!l.invertY},M()},setLocked(e){l={...l,locked:e},M()},setAutoTrack(e){ye=e,e?(Fo(),Yo()):et()},isAutoTracking(){return ye},setShowOutline(e){l={...l,showOutline:e},M()},setEnabled(e){l={...l,enabled:e},M()},toggle(){l={...l,enabled:!l.enabled},M()},fitWidth(){l.imageWidth&&l.targetRect&&l.imageWidth>0&&(l={...l,scale:l.targetRect.width/l.imageWidth},M())},fitHeight(){l.imageHeight&&l.targetRect&&l.imageHeight>0&&(l={...l,scale:l.targetRect.height/l.imageHeight},M())},resetSettings(){if(l={...l,invertX:false,invertY:false},l.mode==="free"){let e=be.get("window"),t=l.imageWidth??200,n=l.imageHeight??200;l={...l,opacity:.5,freeX:(e.width-t)/2,freeY:(e.height-n)/2,freeWidth:t,freeHeight:n}}else{let e=1;l.imageWidth&&l.targetRect&&l.imageWidth>0&&(e=l.targetRect.width/l.imageWidth),l={...l,opacity:.5,scale:e,offsetX:0,offsetY:0}}M()},async remeasure(){if(!we)return;let{rect:e,freshInstance:t}=await Ze(K,we);K=t,e&&(l={...l,targetRect:e},M())},async startFreeMode(e){let t=await ot(e),n=be.get("window"),r=t?.width??200,a=t?.height??200,g=r,x=a,p=n.width*.8,y=n.height*.6;if(g>p||x>y){let d=Math.min(p/g,y/x);g=Math.round(g*d),x=Math.round(x*d)}l={...l,mode:"free",enabled:true,imageUri:e,imageWidth:t?.width??null,imageHeight:t?.height??null,opacity:.5,freeX:Math.round((n.width-g)/2),freeY:Math.round((n.height-x)/2),freeWidth:Math.round(g),freeHeight:Math.round(x)},M()},setFreePosition(e,t){l={...l,freeX:e,freeY:t},M()},setFreeDimensions(e,t,n,r){l={...l,freeWidth:e,freeHeight:t,freeX:n,freeY:r},M()},reset(){et(),ye=false,Wo=null,K=null,we=null,l={...Qe},M()}};import{ChevronRight as jo,night as _,Hash as No,ToolEmptyState as _o,monoFont as Le}from"@buoy-gg/shared-ui/web";import{jsx as U,jsxs as pe}from"react/jsx-runtime";function Uo({target:e,onSelect:t}){return pe(R,{style:Y.card,onPress:t,activeOpacity:.7,testID:`buoy-image-overlay-target-${e.label}`,children:[U(c,{style:Y.colorIndicator}),pe(c,{style:Y.content,children:[U(c,{style:Y.topRow,children:U(f,{style:Y.label,numberOfLines:1,testID:`buoy-image-overlay-target-${e.label}-label`,children:e.label})}),pe(c,{style:Y.bottomRow,children:[pe(c,{style:Y.badgeRow,children:[pe(c,{style:Y.testIdBadge,children:[U(No,{size:8,color:_.color.accent}),U(f,{style:Y.testIdBadgeText,children:"testID"})]}),U(f,{style:Y.testIdValue,numberOfLines:1,testID:`buoy-image-overlay-target-${e.label}-testid`,children:e.testID})]}),e.componentName&&U(f,{style:Y.componentName,numberOfLines:1,testID:`buoy-image-overlay-target-${e.label}-component`,children:e.componentName})]})]}),U(jo,{size:16,color:_.color.textTertiary})]})}function Ko({targets:e,onSelect:t}){return e.length===0?U(_o,{testID:"buoy-image-overlay-empty",otto:"scanning",title:"No targets found",message:`Tag components with
2
- testID="image-target:YourLabel"`}):U(Ne,{style:Y.list,contentContainerStyle:Y.listContent,children:e.map(n=>U(Uo,{target:n,onSelect:()=>t(n)},n.testID))})}var Y=re.create({list:{flex:1},listContent:{paddingTop:8,paddingBottom:20},card:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:_.color.surface,borderRadius:8,borderWidth:1,borderColor:_.color.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10,backgroundColor:_.color.accent},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},label:{fontSize:13,fontWeight:"600",color:_.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:_.color.accentSoft,gap:3},testIdBadgeText:{fontSize:9,fontWeight:"700",color:_.color.accent},testIdValue:{fontSize:11,color:_.color.text,fontFamily:Le,flex:1},componentName:{fontSize:10,color:"#a855f7",fontFamily:Le,marginTop:1},emptyState:{alignItems:"center",paddingVertical:40,paddingHorizontal:32},emptyTitle:{color:_.color.text,fontSize:14,fontWeight:"600",marginBottom:6},emptyText:{color:_.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:18,fontFamily:Le}});import{useRef as J,useCallback as Se}from"react";import{night as q,monoFont as qo}from"@buoy-gg/shared-ui/web";import{jsx as F,jsxs as Ie}from"react/jsx-runtime";function me({label:e,testID:t,value:n,min:r,max:a,step:g,displayValue:x,onChange:p}){let y=J(0),d=J(0),i=Se(T=>Math.max(r,Math.min(a,T)),[r,a]),I=a>r?(n-r)/(a-r):0,A=J(p),u=J(i),P=J(r),L=J(a);A.current=p,u.current=i,P.current=r,L.current=a;let H=Se(T=>{let E=T-d.current,z=Math.max(0,Math.min(1,E/y.current)),w=P.current+z*(L.current-P.current);A.current(u.current(w))},[]),$=J(ve.create({onStartShouldSetPanResponder:()=>true,onMoveShouldSetPanResponder:()=>true,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:T=>{H(T.nativeEvent.pageX)},onPanResponderMove:T=>{H(T.nativeEvent.pageX)}})).current,Q=Se(T=>{y.current=T.nativeEvent.layout.width},[]),W=J(null),O=Se(()=>{W.current?.measure?.((T,E,z,w,k)=>{d.current=k})},[]);return Ie(c,{style:X.controlRow,children:[F(f,{style:X.label,children:e}),Ie(c,{style:X.controlRight,children:[F(R,{style:X.stepperButton,onPress:()=>p(i(n-g)),testID:`${t}-minus`,activeOpacity:.6,children:F(f,{style:X.stepperButtonText,children:"-"})}),F(c,{style:X.sliderHitArea,...$.panHandlers,testID:t,children:Ie(c,{ref:W,style:X.sliderTrack,onLayout:T=>{Q(T),O()},pointerEvents:"none",children:[F(c,{style:[X.sliderFill,{width:`${I*100}%`}]}),F(c,{style:[X.sliderThumb,{left:`${I*100}%`}]})]})}),F(R,{style:X.stepperButton,onPress:()=>p(i(n+g)),testID:`${t}-plus`,activeOpacity:.6,children:F(f,{style:X.stepperButtonText,children:"+"})}),F(f,{style:X.valueText,testID:`${t}-value`,children:x})]})]})}function nt({opacity:e,scale:t,offsetX:n,offsetY:r,onOpacityChange:a,onScaleChange:g,onOffsetChange:x,opacityOnly:p}){return p?F(me,{label:"Opacity",testID:"buoy-image-overlay-slider-opacity",value:e,min:0,max:1,step:.05,displayValue:`${Math.round(e*100)}%`,onChange:a}):Ie(c,{style:X.container,children:[F(me,{label:"Opacity",testID:"buoy-image-overlay-slider-opacity",value:e,min:0,max:1,step:.05,displayValue:`${Math.round(e*100)}%`,onChange:a}),F(me,{label:"Scale",testID:"buoy-image-overlay-slider-scale",value:t,min:.05,max:3,step:.05,displayValue:`${Math.round(t*100)}%`,onChange:g}),F(me,{label:"Offset X",testID:"buoy-image-overlay-slider-offset-x",value:n,min:-200,max:200,step:2,displayValue:`${Math.round(n)}px`,onChange:y=>x(Math.round(y),r)}),F(me,{label:"Offset Y",testID:"buoy-image-overlay-slider-offset-y",value:r,min:-200,max:200,step:2,displayValue:`${Math.round(r)}px`,onChange:y=>x(n,Math.round(y))})]})}var X=re.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:{zIndex:1,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:qo}});import{Fragment as at,jsx as s,jsxs as m}from"react/jsx-runtime";var Z="";function Ee({visible:e,onClose:t,onBack:n,onMinimize:r,enableSharedModalDimensions:a=false,initialModalState:g,minimizeTargetPosition:x,inline:p=false,initialView:y}){let[d,i]=ce(()=>{if(y)return y;let h=v.getState();return h.mode==="free"?"free":h.targetRect?"controls":"idle"}),[I,A]=ce(()=>y==="targets"?ge():[]),[u,P]=ce(()=>v.getState()),[L,H]=ce(Z),[$,Q]=ce(()=>v.isAutoTracking());Te(()=>{Z=L},[L]),Te(()=>v.subscribe(P),[]),Te(()=>(v.setAutoTrack($),()=>{}),[$]);let W=oe(()=>{let h=ge();A(h),i("targets")},[]),O=oe(async h=>{await v.setTarget(h.instance,h.label,h.fiber),Z.trim()&&(await v.setImageUri(Z.trim()),v.setEnabled(true)),i("controls")},[]),T=oe(async()=>{let h=Z.trim();h&&(d==="free"?await v.startFreeMode(h):(await v.setImageUri(h),v.setEnabled(true)))},[d]),E=oe(async()=>{let h=null;try{h=vt()}catch{}let S=null;if(!h)try{let C=xt();S=C.default||C}catch{}if(!h&&!S){ue.alert("Clipboard not available","Install expo-clipboard or @react-native-clipboard/clipboard to use paste.");return}try{if(h&&typeof h.hasImageAsync=="function"&&await h.hasImageAsync()){let N=await h.getImageAsync({format:"png"});if(N?.data){d==="free"?await v.startFreeMode(N.data):(await v.setImageUri(N.data),v.setEnabled(true));return}}let C=null;if(h&&typeof h.getStringAsync=="function"?C=await h.getStringAsync():S&&typeof S.getString=="function"&&(C=await S.getString()),C&&(C.startsWith("http")||C.startsWith("data:"))){H(C),Z=C;return}h?ue.alert("No image detected","Try saving your design image, opening it in Photos or Preview, and copying it from there."):ue.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{ue.alert("Paste failed","Something went wrong reading the clipboard. Try copying the image again.")}},[d]),z=oe(()=>{v.reset(),Z="",i("idle"),H(""),A([])},[]),w=oe(()=>{if(d==="controls"){let h=ge();A(h),i("targets")}else(d==="targets"||d==="free")&&v.reset(),i("idle")},[d]),k=(()=>{switch(d){case"targets":return`Targets (${I.length})`;case"controls":return u.targetLabel||"Component Match";case"free":return"Free Placement";default:return"Image Overlay"}})(),ee={showToggleButton:false,customContent:m(xe,{children:[s(xe.Navigation,{onBack:d!=="idle"?w:n}),s(xe.Content,{title:k,testID:"buoy-image-overlay-title"}),m(xe.Actions,{children:[d==="targets"&&s(R,{style:o.headerTextButton,onPress:W,testID:"buoy-image-overlay-scan",activeOpacity:.7,children:s(f,{style:o.headerTextButtonLabel,children:"Scan"})}),(d==="controls"||d==="free")&&u.imageUri&&s(Bo,{isEnabled:u.enabled,onToggle:()=>v.toggle(),accessibilityLabel:"Toggle image overlay",testID:"buoy-image-overlay-power"}),d!=="idle"&&s(R,{style:o.headerActionButton,onPress:z,testID:"buoy-image-overlay-clear",activeOpacity:.7,children:s(To,{size:14,color:b.color.textSecondary})})]})]})},te=m(c,{style:o.container,children:[d==="idle"&&m(c,{style:o.homeContainer,children:[s(f,{style:o.homeSubtitle,testID:"buoy-image-overlay-home",children:"Choose a mode"}),m(c,{style:o.modeGrid,children:[m(R,{style:o.modePanel,onPress:W,testID:"buoy-image-overlay-mode-component",activeOpacity:.7,accessibilityRole:"button",accessibilityLabel:"Component Match. Overlay on a tagged component",children:[s(c,{style:[o.modeIconCircle,{backgroundColor:b.color.accentSoft}],children:s(Ro,{size:24,color:b.color.accent})}),m(f,{style:o.modePanelTitle,children:["Component",`
2
+ testID="image-target:YourLabel"`}):U(Ne,{keyboardShouldPersistTaps:"handled",style:Y.list,contentContainerStyle:Y.listContent,children:e.map(n=>U(Uo,{target:n,onSelect:()=>t(n)},n.testID))})}var Y=re.create({list:{flex:1},listContent:{paddingTop:8,paddingBottom:20},card:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:_.color.surface,borderRadius:8,borderWidth:1,borderColor:_.color.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10,backgroundColor:_.color.accent},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},label:{fontSize:13,fontWeight:"600",color:_.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:_.color.accentSoft,gap:3},testIdBadgeText:{fontSize:9,fontWeight:"700",color:_.color.accent},testIdValue:{fontSize:11,color:_.color.text,fontFamily:Le,flex:1},componentName:{fontSize:10,color:"#a855f7",fontFamily:Le,marginTop:1},emptyState:{alignItems:"center",paddingVertical:40,paddingHorizontal:32},emptyTitle:{color:_.color.text,fontSize:14,fontWeight:"600",marginBottom:6},emptyText:{color:_.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:18,fontFamily:Le}});import{useRef as J,useCallback as Se}from"react";import{night as q,monoFont as qo}from"@buoy-gg/shared-ui/web";import{jsx as F,jsxs as Ie}from"react/jsx-runtime";function me({label:e,testID:t,value:n,min:r,max:a,step:g,displayValue:x,onChange:p}){let y=J(0),d=J(0),i=Se(T=>Math.max(r,Math.min(a,T)),[r,a]),I=a>r?(n-r)/(a-r):0,A=J(p),u=J(i),P=J(r),L=J(a);A.current=p,u.current=i,P.current=r,L.current=a;let H=Se(T=>{let E=T-d.current,z=Math.max(0,Math.min(1,E/y.current)),w=P.current+z*(L.current-P.current);A.current(u.current(w))},[]),$=J(ve.create({onStartShouldSetPanResponder:()=>true,onMoveShouldSetPanResponder:()=>true,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:T=>{H(T.nativeEvent.pageX)},onPanResponderMove:T=>{H(T.nativeEvent.pageX)}})).current,Q=Se(T=>{y.current=T.nativeEvent.layout.width},[]),W=J(null),O=Se(()=>{W.current?.measure?.((T,E,z,w,k)=>{d.current=k})},[]);return Ie(c,{style:X.controlRow,children:[F(f,{style:X.label,children:e}),Ie(c,{style:X.controlRight,children:[F(R,{style:X.stepperButton,onPress:()=>p(i(n-g)),testID:`${t}-minus`,activeOpacity:.6,children:F(f,{style:X.stepperButtonText,children:"-"})}),F(c,{style:X.sliderHitArea,...$.panHandlers,testID:t,children:Ie(c,{ref:W,style:X.sliderTrack,onLayout:T=>{Q(T),O()},pointerEvents:"none",children:[F(c,{style:[X.sliderFill,{width:`${I*100}%`}]}),F(c,{style:[X.sliderThumb,{left:`${I*100}%`}]})]})}),F(R,{style:X.stepperButton,onPress:()=>p(i(n+g)),testID:`${t}-plus`,activeOpacity:.6,children:F(f,{style:X.stepperButtonText,children:"+"})}),F(f,{style:X.valueText,testID:`${t}-value`,children:x})]})]})}function nt({opacity:e,scale:t,offsetX:n,offsetY:r,onOpacityChange:a,onScaleChange:g,onOffsetChange:x,opacityOnly:p}){return p?F(me,{label:"Opacity",testID:"buoy-image-overlay-slider-opacity",value:e,min:0,max:1,step:.05,displayValue:`${Math.round(e*100)}%`,onChange:a}):Ie(c,{style:X.container,children:[F(me,{label:"Opacity",testID:"buoy-image-overlay-slider-opacity",value:e,min:0,max:1,step:.05,displayValue:`${Math.round(e*100)}%`,onChange:a}),F(me,{label:"Scale",testID:"buoy-image-overlay-slider-scale",value:t,min:.05,max:3,step:.05,displayValue:`${Math.round(t*100)}%`,onChange:g}),F(me,{label:"Offset X",testID:"buoy-image-overlay-slider-offset-x",value:n,min:-200,max:200,step:2,displayValue:`${Math.round(n)}px`,onChange:y=>x(Math.round(y),r)}),F(me,{label:"Offset Y",testID:"buoy-image-overlay-slider-offset-y",value:r,min:-200,max:200,step:2,displayValue:`${Math.round(r)}px`,onChange:y=>x(n,Math.round(y))})]})}var X=re.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:{zIndex:1,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:qo}});import{Fragment as at,jsx as s,jsxs as m}from"react/jsx-runtime";var Z="";function Ee({visible:e,onClose:t,onBack:n,onMinimize:r,enableSharedModalDimensions:a=false,initialModalState:g,minimizeTargetPosition:x,inline:p=false,initialView:y}){let[d,i]=ce(()=>{if(y)return y;let h=v.getState();return h.mode==="free"?"free":h.targetRect?"controls":"idle"}),[I,A]=ce(()=>y==="targets"?ge():[]),[u,P]=ce(()=>v.getState()),[L,H]=ce(Z),[$,Q]=ce(()=>v.isAutoTracking());Te(()=>{Z=L},[L]),Te(()=>v.subscribe(P),[]),Te(()=>(v.setAutoTrack($),()=>{}),[$]);let W=oe(()=>{let h=ge();A(h),i("targets")},[]),O=oe(async h=>{await v.setTarget(h.instance,h.label,h.fiber),Z.trim()&&(await v.setImageUri(Z.trim()),v.setEnabled(true)),i("controls")},[]),T=oe(async()=>{let h=Z.trim();h&&(d==="free"?await v.startFreeMode(h):(await v.setImageUri(h),v.setEnabled(true)))},[d]),E=oe(async()=>{let h=null;try{h=vt()}catch{}let S=null;if(!h)try{let C=xt();S=C.default||C}catch{}if(!h&&!S){ue.alert("Clipboard not available","Install expo-clipboard or @react-native-clipboard/clipboard to use paste.");return}try{if(h&&typeof h.hasImageAsync=="function"&&await h.hasImageAsync()){let N=await h.getImageAsync({format:"png"});if(N?.data){d==="free"?await v.startFreeMode(N.data):(await v.setImageUri(N.data),v.setEnabled(true));return}}let C=null;if(h&&typeof h.getStringAsync=="function"?C=await h.getStringAsync():S&&typeof S.getString=="function"&&(C=await S.getString()),C&&(C.startsWith("http")||C.startsWith("data:"))){H(C),Z=C;return}h?ue.alert("No image detected","Try saving your design image, opening it in Photos or Preview, and copying it from there."):ue.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{ue.alert("Paste failed","Something went wrong reading the clipboard. Try copying the image again.")}},[d]),z=oe(()=>{v.reset(),Z="",i("idle"),H(""),A([])},[]),w=oe(()=>{if(d==="controls"){let h=ge();A(h),i("targets")}else(d==="targets"||d==="free")&&v.reset(),i("idle")},[d]),k=(()=>{switch(d){case"targets":return`Targets (${I.length})`;case"controls":return u.targetLabel||"Component Match";case"free":return"Free Placement";default:return"Image Overlay"}})(),ee={showToggleButton:false,customContent:m(xe,{children:[s(xe.Navigation,{onBack:d!=="idle"?w:n}),s(xe.Content,{title:k,testID:"buoy-image-overlay-title"}),m(xe.Actions,{children:[d==="targets"&&s(R,{style:o.headerTextButton,onPress:W,testID:"buoy-image-overlay-scan",activeOpacity:.7,children:s(f,{style:o.headerTextButtonLabel,children:"Scan"})}),(d==="controls"||d==="free")&&u.imageUri&&s(Bo,{isEnabled:u.enabled,onToggle:()=>v.toggle(),accessibilityLabel:"Toggle image overlay",testID:"buoy-image-overlay-power"}),d!=="idle"&&s(R,{style:o.headerActionButton,onPress:z,testID:"buoy-image-overlay-clear",activeOpacity:.7,children:s(To,{size:14,color:b.color.textSecondary})})]})]})},te=m(c,{style:o.container,children:[d==="idle"&&m(c,{style:o.homeContainer,children:[s(f,{style:o.homeSubtitle,testID:"buoy-image-overlay-home",children:"Choose a mode"}),m(c,{style:o.modeGrid,children:[m(R,{style:o.modePanel,onPress:W,testID:"buoy-image-overlay-mode-component",activeOpacity:.7,accessibilityRole:"button",accessibilityLabel:"Component Match. Overlay on a tagged component",children:[s(c,{style:[o.modeIconCircle,{backgroundColor:b.color.accentSoft}],children:s(Ro,{size:24,color:b.color.accent})}),m(f,{style:o.modePanelTitle,children:["Component",`
3
3
  `,"Match"]}),s(f,{style:o.modePanelDesc,children:"Overlay on a tagged component"})]}),m(R,{style:o.modePanel,onPress:()=>i("free"),testID:"buoy-image-overlay-mode-free",activeOpacity:.7,accessibilityRole:"button",accessibilityLabel:"Free Placement. Drag and resize anywhere",children:[s(c,{style:[o.modeIconCircle,{backgroundColor:b.color.accentSoft}],children:s(Mo,{size:24,color:b.color.accent})}),m(f,{style:o.modePanelTitle,children:["Free",`
4
4
  `,"Placement"]}),s(f,{style:o.modePanelDesc,children:"Drag and resize anywhere"})]})]})]}),d==="targets"&&s(Ko,{targets:I,onSelect:O}),d==="controls"&&m(c,{style:o.controlsContainer,children:[u.targetRect&&m(c,{style:o.infoCard,children:[m(c,{style:o.infoRow,children:[s(f,{style:o.infoLabel,children:"Component"}),s(f,{style:o.infoValue,testID:"buoy-image-overlay-info-component",children:u.targetLabel})]}),m(c,{style:o.infoRow,children:[s(f,{style:o.infoLabel,children:"Size"}),m(f,{style:o.infoValueMono,testID:"buoy-image-overlay-info-size",children:[Math.round(u.targetRect.width)," x ",Math.round(u.targetRect.height)]})]}),m(c,{style:o.infoRow,children:[s(f,{style:o.infoLabel,children:"Position"}),m(f,{style:o.infoValueMono,testID:"buoy-image-overlay-info-position",children:[Math.round(u.targetRect.x),", ",Math.round(u.targetRect.y)]})]}),u.imageWidth!=null&&u.imageHeight!=null&&m(c,{style:o.infoRow,children:[s(f,{style:o.infoLabel,children:"Image"}),m(f,{style:o.infoValueMono,testID:"buoy-image-overlay-info-image",children:[u.imageWidth," x ",u.imageHeight]})]})]}),m(c,{style:o.inputSection,children:[s(f,{style:o.sectionLabel,children:"Image"}),s(R,{style:o.pasteButton,onPress:E,activeOpacity:.7,accessibilityLabel:"Paste from clipboard",accessibilityRole:"button",testID:"buoy-image-overlay-paste",children:s(f,{style:o.pasteButtonText,children:"Paste from Clipboard"})}),m(c,{style:o.urlRow,children:[s(De,{style:o.urlInput,testID:"buoy-image-overlay-url",value:L,onChangeText:H,placeholder:"or enter URL...",placeholderTextColor:b.color.placeholder,autoCapitalize:"none",autoCorrect:false,returnKeyType:"go",onSubmitEditing:T}),s(R,{style:[o.loadButton,!L.trim()&&o.loadButtonDisabled],onPress:T,disabled:!L.trim(),activeOpacity:.7,testID:"buoy-image-overlay-load",children:s(f,{style:o.loadButtonText,children:"Load"})})]})]}),m(c,{style:o.toggleSection,children:[s(Pe,{label:"Show Outline",testID:"buoy-image-overlay-outline-toggle",value:u.showOutline,onValueChange:h=>v.setShowOutline(h)}),s(Pe,{label:"Auto Track",value:$,onValueChange:Q,testID:"buoy-image-overlay-autotrack"}),u.imageUri&&m(at,{children:[m(c,{style:o.blendRow,children:[s(f,{style:o.toggleLabel,children:"Opacity"}),s(c,{style:o.blendButtons,children:[0,25,50,75,100].map(h=>s(R,{testID:`buoy-image-overlay-opacity-${h}`,style:[o.blendButton,Math.round(u.opacity*100)===h&&o.blendButtonActive],onPress:()=>v.setOpacity(h/100),activeOpacity:.7,children:m(f,{style:[o.blendButtonText,Math.round(u.opacity*100)===h&&o.blendButtonTextActive],children:[h,"%"]})},h))})]}),m(c,{style:o.blendRow,children:[s(f,{style:o.toggleLabel,children:"Flip"}),m(c,{style:o.blendButtons,children:[s(R,{style:[o.blendButton,u.invertX&&o.blendButtonActive],onPress:()=>v.toggleInvertX(),testID:"buoy-image-overlay-flip-x",activeOpacity:.7,children:s(f,{style:[o.blendButtonText,u.invertX&&o.blendButtonTextActive],testID:u.invertX?"buoy-image-overlay-flip-x-on":void 0,children:"Horizontal"})}),s(R,{style:[o.blendButton,u.invertY&&o.blendButtonActive],onPress:()=>v.toggleInvertY(),testID:"buoy-image-overlay-flip-y",activeOpacity:.7,children:s(f,{style:[o.blendButtonText,u.invertY&&o.blendButtonTextActive],testID:u.invertY?"buoy-image-overlay-flip-y-on":void 0,children:"Vertical"})})]})]})]})]}),u.imageUri&&s(nt,{opacity:u.opacity,scale:u.scale,offsetX:u.offsetX,offsetY:u.offsetY,onOpacityChange:h=>v.setOpacity(h),onScaleChange:h=>v.setScale(h),onOffsetChange:(h,S)=>v.setOffset(h,S)}),m(c,{style:o.actions,children:[s(R,{style:o.actionButton,onPress:()=>v.resetSettings(),activeOpacity:.7,testID:"buoy-image-overlay-reset-settings",children:s(f,{style:o.actionButtonText,children:"Reset Settings"})}),s(R,{style:o.actionButton,onPress:()=>v.remeasure(),activeOpacity:.7,testID:"buoy-image-overlay-remeasure",children:s(f,{style:o.actionButtonText,children:"Remeasure"})})]})]}),d==="free"&&m(c,{style:o.controlsContainer,children:[m(c,{style:o.inputSection,children:[s(f,{style:o.sectionLabel,children:"Image"}),s(R,{style:o.pasteButton,onPress:E,activeOpacity:.7,accessibilityLabel:"Paste from clipboard",accessibilityRole:"button",testID:"buoy-image-overlay-paste",children:s(f,{style:o.pasteButtonText,children:"Paste from Clipboard"})}),m(c,{style:o.urlRow,children:[s(De,{style:o.urlInput,testID:"buoy-image-overlay-url",value:L,onChangeText:H,placeholder:"or enter URL...",placeholderTextColor:b.color.placeholder,autoCapitalize:"none",autoCorrect:false,returnKeyType:"go",onSubmitEditing:T}),s(R,{style:[o.loadButton,!L.trim()&&o.loadButtonDisabled],onPress:T,disabled:!L.trim(),activeOpacity:.7,testID:"buoy-image-overlay-load",children:s(f,{style:o.loadButtonText,children:"Load"})})]})]}),u.imageUri&&u.mode==="free"&&m(at,{children:[m(c,{style:o.infoCard,children:[m(c,{style:o.infoRow,children:[s(f,{style:o.infoLabel,children:"Position"}),m(f,{style:o.infoValueMono,testID:"buoy-image-overlay-info-position",children:[Math.round(u.freeX),", ",Math.round(u.freeY)]})]}),m(c,{style:o.infoRow,children:[s(f,{style:o.infoLabel,children:"Size"}),m(f,{style:o.infoValueMono,testID:"buoy-image-overlay-info-size",children:[Math.round(u.freeWidth)," x ",Math.round(u.freeHeight)]})]}),u.imageWidth!=null&&u.imageHeight!=null&&m(c,{style:o.infoRow,children:[s(f,{style:o.infoLabel,children:"Original"}),m(f,{style:o.infoValueMono,testID:"buoy-image-overlay-info-original",children:[u.imageWidth," x ",u.imageHeight]})]})]}),s(c,{style:o.inputSection,children:s(nt,{opacity:u.opacity,scale:1,offsetX:0,offsetY:0,onOpacityChange:h=>v.setOpacity(h),onScaleChange:()=>{},onOffsetChange:()=>{},opacityOnly:true})}),m(c,{style:o.toggleSection,children:[s(Pe,{label:"Lock Position",testID:"buoy-image-overlay-lock",tone:"warning",value:u.locked,onValueChange:h=>v.setLocked(h)}),m(c,{style:o.blendRow,children:[s(f,{style:o.toggleLabel,children:"Opacity"}),s(c,{style:o.blendButtons,children:[0,25,50,75,100].map(h=>s(R,{testID:`buoy-image-overlay-opacity-${h}`,style:[o.blendButton,Math.round(u.opacity*100)===h&&o.blendButtonActive],onPress:()=>v.setOpacity(h/100),activeOpacity:.7,children:m(f,{style:[o.blendButtonText,Math.round(u.opacity*100)===h&&o.blendButtonTextActive],children:[h,"%"]})},h))})]}),m(c,{style:o.blendRow,children:[s(f,{style:o.toggleLabel,children:"Flip"}),m(c,{style:o.blendButtons,children:[s(R,{style:[o.blendButton,u.invertX&&o.blendButtonActive],onPress:()=>v.toggleInvertX(),testID:"buoy-image-overlay-flip-x",activeOpacity:.7,children:s(f,{style:[o.blendButtonText,u.invertX&&o.blendButtonTextActive],testID:u.invertX?"buoy-image-overlay-flip-x-on":void 0,children:"Horizontal"})}),s(R,{style:[o.blendButton,u.invertY&&o.blendButtonActive],onPress:()=>v.toggleInvertY(),testID:"buoy-image-overlay-flip-y",activeOpacity:.7,children:s(f,{style:[o.blendButtonText,u.invertY&&o.blendButtonTextActive],testID:u.invertY?"buoy-image-overlay-flip-y-on":void 0,children:"Vertical"})})]})]})]}),s(c,{style:o.actions,children:s(R,{style:o.actionButton,onPress:()=>v.resetSettings(),activeOpacity:.7,testID:"buoy-image-overlay-reset-position",children:s(f,{style:o.actionButtonText,children:"Reset Position"})})})]})]})]});return p?m(c,{style:o.inlineRoot,children:[s(c,{style:o.inlineHeader,...Do,children:ee.customContent}),te]}):s(Co,{visible:e,onClose:t,onMinimize:r,minimizeTargetPosition:x,initialModalState:g,header:ee,initialMode:"bottomSheet",persistenceKey:"buoy-image-overlay-modal",enablePersistence:true,children:te})}function Go(e={}){return s(Ee,{...e,inline:true,visible:true,onClose:()=>{}})}var o=re.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:Ke.background.base},inlineHeader:{borderBottomWidth:1,borderBottomColor:Ke.border.default,backgroundColor:"transparent"},container:{flex:1,backgroundColor:"transparent"},headerTextButton:{height:32,paddingHorizontal:12,borderRadius:8,backgroundColor:b.color.buttonSurface,borderWidth:1,borderColor:b.color.border,alignItems:"center",justifyContent:"center"},headerTextButtonLabel:{fontSize:12,fontWeight:"600",color:b.color.accent},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:b.color.buttonSurface,borderWidth:1,borderColor:b.color.border,alignItems:"center",justifyContent:"center"},homeContainer:{flex:1,paddingHorizontal:12,paddingTop:16,paddingBottom:20,gap:12},homeSubtitle:{fontSize:12,fontWeight:"600",color:b.color.textTertiary,textTransform:"uppercase",letterSpacing:.5,textAlign:"center"},modeGrid:{flexDirection:"row",gap:10},modePanel:{flex:1,alignItems:"center",paddingVertical:20,paddingHorizontal:12,backgroundColor:b.color.surface,borderRadius:12,borderWidth:1,borderColor:b.color.border,gap:8},modeIconCircle:{width:48,height:48,borderRadius:24,alignItems:"center",justifyContent:"center",marginBottom:4},modePanelTitle:{fontSize:13,fontWeight:"700",color:b.color.text,textAlign:"center",lineHeight:17},modePanelDesc:{fontSize:11,color:b.color.textTertiary,textAlign:"center",lineHeight:15},controlsContainer:{flex:1,paddingTop:8,paddingBottom:24,gap:10},infoCard:{marginHorizontal:12,backgroundColor:b.color.surface,borderRadius:8,borderWidth:1,borderColor:b.color.border,padding:10,gap:4},infoRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},infoLabel:{fontSize:11,fontWeight:"500",color:b.color.textTertiary,textTransform:"uppercase",letterSpacing:.3},infoValue:{fontSize:12,fontWeight:"600",color:b.color.text},infoValueMono:{fontSize:12,fontWeight:"600",color:b.color.text,fontFamily:Po},inputSection:{paddingHorizontal:12,gap:6},sectionLabel:{fontSize:11,fontWeight:"600",color:b.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},pasteButton:{paddingVertical:10,borderRadius:8,backgroundColor:b.color.accentSoft,borderWidth:1,borderColor:b.color.accentBorderStrong,alignItems:"center"},pasteButtonText:{fontSize:13,fontWeight:"600",color:b.color.accent},urlRow:{flexDirection:"row",gap:8},urlInput:{flex:1,height:36,borderRadius:10,backgroundColor:b.color.surfaceElevated,borderWidth:1,borderColor:b.color.border,paddingHorizontal:12,fontSize:13,color:b.color.text},loadButton:{height:36,paddingHorizontal:14,borderRadius:8,backgroundColor:b.color.accent,justifyContent:"center",alignItems:"center"},loadButtonDisabled:{opacity:.4},loadButtonText:{fontSize:13,fontWeight:"600",color:b.color.onAccent},toggleSection:{paddingHorizontal:12,gap:6},toggleRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:b.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:b.color.border,paddingHorizontal:12,paddingVertical:8},toggleLabel:{fontSize:13,fontWeight:"500",color:b.color.textSecondary},blendRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:b.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:b.color.border,paddingHorizontal:12,paddingVertical:6},blendButtons:{flexDirection:"row",gap:4},blendButton:{paddingHorizontal:10,paddingVertical:5,borderRadius:6,backgroundColor:"transparent"},blendButtonActive:{backgroundColor:b.color.accentSoft},blendButtonText:{fontSize:12,fontWeight:"600",color:b.color.textTertiary},blendButtonTextActive:{color:b.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:b.color.surfaceElevated,borderWidth:1,borderColor:b.color.border},actionButtonText:{fontSize:12,fontWeight:"500",color:b.color.textSecondary}});import{jsx as Jo}from"react/jsx-runtime";var Qo="#A855F7",rt=bt({id:"image-overlay",name:"IMG",description:"Design mockup overlay",slot:"both",icon:({size:e})=>Jo(pt,{size:e,color:Qo}),component:Ee,props:{enableSharedModalDimensions:false}}),Zo=mt(rt,e=>({enableSharedModalDimensions:e.enableSharedModalDimensions??false}));import{useState as it,useEffect as en,useRef as lt,useMemo as st,useCallback as tn}from"react";import{absoluteFill as on,monoFont as nn}from"@buoy-gg/shared-ui/web";import{Fragment as ct,jsx as D,jsxs as Ce}from"react/jsx-runtime";function dt({uri:e,style:t,invertX:n,invertY:r}){let a=[];n&&a.push({scaleX:-1}),r&&a.push({scaleY:-1});let g=a.length>0?{transform:a}:{};return D(Re,{testID:"buoy-internal-image-overlay",source:{uri:e},style:[t,g,{pointerEvents:"none"}]})}var le=30;function an({imageUri:e,x:t,y:n,width:r,height:a,opacity:g,aspectRatio:x,invertX:p,invertY:y,locked:d}){let[i,I]=it(false),A=lt({x:0,y:0}),u=lt({x:0,y:0,width:0,height:0}),P=be.get("window"),L=st(()=>ve.create({onStartShouldSetPanResponder:()=>!d,onMoveShouldSetPanResponder:(W,O)=>!d&&(Math.abs(O.dx)>2||Math.abs(O.dy)>2),onPanResponderTerminationRequest:()=>false,onPanResponderGrant:()=>{let W=v.getState();A.current={x:W.freeX,y:W.freeY},I(true)},onPanResponderMove:(W,O)=>{let T=v.getState(),E=Math.max(0,Math.min(A.current.x+O.dx,P.width-T.freeWidth)),z=Math.max(0,Math.min(A.current.y+O.dy,P.height-T.freeHeight));v.setFreePosition(E,z)},onPanResponderRelease:()=>I(false),onPanResponderTerminate:()=>I(false)}),[P.width,P.height,d]),H=tn(W=>ve.create({onStartShouldSetPanResponder:()=>!d,onMoveShouldSetPanResponder:()=>!d,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:()=>{let O=v.getState();u.current={x:O.freeX,y:O.freeY,width:O.freeWidth,height:O.freeHeight},I(true)},onPanResponderMove:(O,T)=>{let{dx:E,dy:z}=T;if(Math.abs(E)<.5&&Math.abs(z)<.5)return;let w=u.current,k=x>0?x:w.width/w.height,ee=Math.abs(E),te=Math.abs(z),h=ee>=te,S,C,N=w.x,G=w.y;switch(W){case"bottomRight":{S=h?w.width+E:(w.height+z)*k,S=Math.max(le,Math.min(S,P.width-w.x)),C=S/k;break}case"bottomLeft":{S=h?w.width-E:(w.height+z)*k,S=Math.max(le,S),C=S/k,N=w.x+w.width-S,N=Math.max(0,N),S=Math.min(S,w.x+w.width),C=S/k;break}case"topRight":{S=h?w.width+E:(w.height-z)*k,S=Math.max(le,Math.min(S,P.width-w.x)),C=S/k,G=w.y+w.height-C,G=Math.max(0,G),C=Math.min(C,w.y+w.height),S=C*k;break}case"topLeft":{S=h?w.width-E:(w.height-z)*k,S=Math.max(le,S),C=S/k,N=w.x+w.width-S,G=w.y+w.height-C,N=Math.max(0,N),G=Math.max(0,G),S=Math.min(S,w.x+w.width),C=S/k,G=w.y+w.height-C;break}}S=Math.max(le,Math.round(S)),C=Math.max(le,Math.round(C)),v.setFreeDimensions(S,C,Math.round(N),Math.round(G))},onPanResponderRelease:()=>I(false),onPanResponderTerminate:()=>I(false)}),[P.width,P.height,x,d]),$=st(()=>({topLeft:H("topLeft"),topRight:H("topRight"),bottomLeft:H("bottomLeft"),bottomRight:H("bottomRight")}),[H]),Q={...on,opacity:g};return Ce(c,{testID:"buoy-image-overlay-free-box",style:{position:"absolute",left:t,top:n,width:r,height:a},pointerEvents:d?"none":"auto",children:[D(c,{style:re.absoluteFill,...d?{}:L.panHandlers,children:D(dt,{uri:e,style:Q,invertX:p,invertY:y})}),D(c,{pointerEvents:"none",style:[B.freeBorder,i&&B.freeBorderActive,d&&B.freeBorderLocked]}),!d&&Ce(ct,{children:[D(c,{...$.topLeft.panHandlers,style:[B.cornerWrapper,{top:-20,left:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:D(c,{style:[B.cornerHandle,i&&B.cornerHandleActive]})}),D(c,{...$.topRight.panHandlers,style:[B.cornerWrapper,{top:-20,right:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:D(c,{style:[B.cornerHandle,i&&B.cornerHandleActive]})}),D(c,{...$.bottomLeft.panHandlers,style:[B.cornerWrapper,{bottom:-20,left:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:D(c,{style:[B.cornerHandle,i&&B.cornerHandleActive]})}),D(c,{...$.bottomRight.panHandlers,style:[B.cornerWrapper,{bottom:-20,right:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:D(c,{style:[B.cornerHandle,i&&B.cornerHandleActive]})})]})]})}function rn(){let[e,t]=it(()=>v.getState());en(()=>v.subscribe(t),[]);let{mode:n,enabled:r,imageUri:a,imageWidth:g,imageHeight:x,targetRect:p,targetLabel:y,showOutline:d,opacity:i,scale:I,offsetX:A,offsetY:u,invertX:P,invertY:L,locked:H,freeX:$,freeY:Q,freeWidth:W,freeHeight:O}=e,T=g&&x&&x>0?g/x:0;if(n==="free"&&r&&a)return D(c,{style:B.overlay,pointerEvents:"box-none",nativeID:"image-overlay-standalone",children:D(an,{imageUri:a,x:$,y:Q,width:W,height:O,opacity:i,aspectRatio:T,invertX:P,invertY:L,locked:H})});if(!p)return null;let E=r&&a;return Ce(c,{style:B.overlay,pointerEvents:"box-none",nativeID:"image-overlay-standalone",children:[d&&Ce(ct,{children:[D(c,{pointerEvents:"none",nativeID:"__image_overlay_highlight__",testID:"buoy-image-overlay-outline",style:[B.highlight,{left:p.x-3,top:p.y-3,width:p.width+6,height:p.height+6}]}),y&&D(c,{pointerEvents:"none",style:[B.label,{left:p.x,top:p.y-20}],children:D(f,{style:B.labelText,testID:"buoy-image-overlay-outline-label",children:y})})]}),E&&(()=>{let z=(g??p.width)*I,w=(x??p.height)*I,k=p.x+p.width/2,ee=p.y+p.height/2,te={position:"absolute",left:k-z/2+A,top:ee-w/2+u,width:z,height:w,opacity:i};return D(dt,{uri:a,style:te,invertX:P,invertY:L})})()]})}var B=re.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:Ve.OS==="web"?999: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:nn},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{v as ImageOverlayController,Ee as ImageOverlayModal,rn as ImageOverlayStandalone,Go as ImageOverlayToolView,Zo as createImageOverlayTool,rt as imageOverlayToolPreset,ge as scanForImageTargets,Oo as setDevToolsHookOverride};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@buoy-gg/image-overlay",
3
- "version": "7.0.76",
3
+ "version": "7.0.78",
4
4
  "description": "Overlay a design mockup on a running React Native app and adjust opacity to compare spacing and alignment.",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -34,7 +34,7 @@
34
34
  ],
35
35
  "sideEffects": false,
36
36
  "dependencies": {
37
- "@buoy-gg/shared-ui": "^7.0.76"
37
+ "@buoy-gg/shared-ui": "^7.0.78"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": "*"