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