1import{a8 as Vt,e as Je,ed as Re,g as Ut,f as Gt,ab as Wt,r as s,q as x,a as Ft,j as t,I as Kt,eC as qt,A as Pe,k as Xt,a9 as Zt,ef as fe,ag as Qe,u as Yt,am as Jt,an as Qt,eu as en,ee as tn}from"./index-Bk9gjvYU.js";import{u as nn,S as Ae,T as he,B as on,a as _e,N as rn,b as an,P as ln,M as sn,I as J,L as xe,g as cn}from"./TopBarFrame-B8W_wso1.js";import{a as dn,s as pn,u as un}from"./buildBrandVisualCss-CtPIu-a4.js";import{I as gn,u as fn,R as hn}from"./useReplaceImageFlow-BpaQ7Fv5.js";import{c as xn,A as $e,r as ke,n as Me,v as bn,d as wn}from"./aiClient-BicRjvdc.js";import"./useSavePopupsV2VariantMutation-BLdPuEkd.js";import"./buildCdnImageUrl-Bhobrtd8.js";import"./useWebsiteAssets-BGWMvg9l.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},n=new Error().stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="7626f7ec-1fe8-4766-a111-b4d65453e894",e._sentryDebugIdIdentifier="sentry-dbid-7626f7ec-1fe8-4766-a111-b4d65453e894")}catch{}})();const vn=e=>{const n=Vt();return Je({...e,mutationFn:async o=>{const{publishPopupsV2:a}=await Ut.request({document:Gt(` 2 mutation PublishPopupsV2( 3 $variantId: Int! 4 $type: CampaignSourceTypeEnum! 5 $html: String! 6 $css: String! 7 $js: String! 8 ) { 9 publishPopupsV2( 10 input: { 11 variantId: $variantId 12 type: $type 13 html: $html 14 css: $css 15 js: $js 16 } 17 ) { 18 id 19 popupsV2Content { 20 html 21 css 22 js 23 } 24 draftPopupsV2Content { 25 html 26 css 27 js 28 } 29 campaign { 30 state 31 } 32 } 33 } 34 `),variables:o});return a},onSuccess:(o,a,l)=>{n.setQueriesData({queryKey:Re.details()},r=>!r||r.id!==a.variantId?r:{...r,popupsV2Content:{__typename:"PopupsV2ContentType",html:a.html,css:a.css,js:a.js},draftPopupsV2Content:o.draftPopupsV2Content?{__typename:"PopupsV2ContentType",html:o.draftPopupsV2Content.html,css:o.draftPopupsV2Content.css,js:o.draftPopupsV2Content.js}:null,campaign:r.campaign?{...r.campaign,state:o.campaign?.state??r.campaign.state}:r.campaign}),n.invalidateQueries({queryKey:Re.details()})}})},mn=e=>Je({...e,mutationFn:async({file:n,variantId:o,type:a,imageId:l,previousPath:r})=>{const i=new FormData;i.append("operations",JSON.stringify({query:`mutation UploadPopupsV2Image($file: Upload!, $variantId: Int!, $type: CampaignSourceTypeEnum!, $imageId: String!, $previousPath: String) { 35 uploadPopupsV2Image(input: { file: $file, variantId: $variantId, type: $type, imageId: $imageId, previousPath: $previousPath }) { 36 path 37 originalWidth 38 } 39 }`,variables:{file:null,variantId:o,type:a,imageId:l,previousPath:r??null},operationName:"UploadPopupsV2Image"})),i.append("map",'{"1":["variables.file"]}'),i.append("1",n);const g=await fetch(`${Wt}?op=UploadPopupsV2Image`,{method:"POST",body:i,credentials:"include"});if(g.ok){const c=await g.json();if(c.errors?.length)throw{code:422,message:c.errors[0]?.message??"Unknown error",validation:{}};const d=c.data?.uploadPopupsV2Image;if(!d)throw{code:500,message:"Upload returned no path",validation:{}};return d}throw{code:g.status,message:g.statusText||"Upload failed",validation:{}}},onSuccess:(...n)=>{e?.onSuccess?.(...n)}}),ye=e=>s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",width:20,height:20,fill:"none",...e},s.createElement("g",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",clipPath:"url(#a)"},s.createElement("path",{d:"m17.3 17.9.6-.6c.5-.5.5-1.4 0-2L8.3 5.9c-.5-.5-1.4-.5-2 0l-.5.6c-.5.5-.5 1.4 0 1.9l9.6 9.6c.5.5 1.4.5 1.9 0ZM14 3v2m1-1h-2m-9 9v2m1-1H3M3 2v2m1-1H2m6 7 2-2"})),s.createElement("defs",null,s.createElement("clipPath",{id:"a"},s.createElement("path",{fill:"#fff",d:"M0 0h20v20H0z"})))),kn=x.div` 40 background: white; 41 border-right: 1px solid #e5e7eb; 42 display: flex; 43 flex-direction: column; 44 height: 100%; 45`,yn=x.div`
46 align-items: center; 47 border-bottom: 1px solid #f0f0f5; 48 display: flex; 49 justify-content: space-between; 50 padding: 14px 16px 10px; 51`,En=x.div` 52 align-items: center; 53 color: #1a1a1a; 54 display: flex; 55 font-size: 13px; 56 font-weight: 600; 57 gap: 6px; 58`,jn=x.button` 59 background: none; 60 border: none; 61 color: #999; 62 cursor: pointer; 63 font-size: 11px; 64 padding: 0; 65 66 &:hover { 67 color: #4f46e5; 68 } 69`,Cn=x.div` 70 display: flex; 71 flex: 1; 72 flex-direction: column; 73 gap: 10px; 74 overflow-y: auto; 75 padding: 14px 16px; 76`,X=x.div` 77 border-radius: 12px; 78 font-size: 12px; 79 line-height: 1.45; 80 max-width: 90%; 81 padding: 9px 12px; 82 83 ${({$role:e})=>e==="user"?` 84 align-self: flex-end; 85 background: #4f46e5; 86 border-bottom-right-radius: 3px; 87 color: white; 88 display: flex; 89 flex-direction: column; 90 gap: 6px; 91 `:` 92 align-self: flex-start; 93 background: #f3f4f6; 94 border-bottom-left-radius: 3px; 95 color: #1a1a1a; 96 `} 97`,be=x.span` 98 align-items: center; 99 align-self: flex-start; 100 background: rgb(255 255 255 / 16%); 101 border: 1px solid rgb(255 255 255 / 32%); 102 border-radius: 999px; 103 color: white; 104 display: inline-flex; 105 font-size: 10px; 106 font-weight: 500; 107 padding: 2px 9px; 108`,Sn=x.button` 109 background: white; 110 border: 1px solid #d4d4dc; 111 border-radius: 4px; 112 color: #4f46e5; 113 cursor: pointer; 114 display: inline-flex; 115 font-size: 11px; 116 gap: 3px; 117 margin-top: 6px; 118 padding: 2px 8px; 119 120 &:hover { 121 background: #eef2ff; 122 } 123`,Tn=x.div` 124 border-top: 1px solid #f0f0f5; 125 display: flex; 126 flex-direction: column; 127 gap: 6px; 128 padding: 10px 12px; 129`,In=x.div` 130 align-items: center; 131 display: flex; 132 gap: 6px; 133 padding: 0 0 8px; 134`,Bn=x.span` 135 align-items: center; 136 background: #eef2ff; 137 border: 1px solid #c7d2fe; 138 border-radius: 999px; 139 color: #2c3a8c; 140 display: inline-flex; 141 font-size: 11px; 142 gap: 6px; 143 padding: 3px 10px; 144`,Dn=x.button` 145 background: none; 146 border: none; 147 color: #4f46e5; 148 cursor: pointer; 149 font-size: 14px; 150 line-height: 1; 151 opacity: 0.7; 152 padding: 0; 153`,Ln=x.div` 154 color: #999; 155 font-size: 10px; 156`,Rn=x(X).attrs({$role:"ai"})` 157 color: #999; 158 font-style: italic; 159`,Pn=({history:e,pending:n,isLoading:o,lastError:a,selectedBlockSummary:l,aiSnapshotPresent:r,onClose:i,onClear:g,onSubmit:c,onCancel:d,onUndo:f,onClearScope:p})=>{const w=Ft(),[k,b]=s.useState(""),u=s.useRef(null),v=s.useRef(null);s.useEffect(()=>{u.current?.focus()},[]),s.useEffect(()=>{v.current!==null&&(v.current.scrollTop=v.current.scrollHeight)},[e.length,n,o]);const T=s.useCallback(C=>{b(C.value)},[]),B=s.useCallback(()=>{const C=k.trim();C===""||o||(c(C),b(""))},[k,o,c]),L=s.useCallback(C=>{C.key==="Enter"&&B(),C.key==="Escape"&&(o&&d(),i())},[B,o,d,i]),S=e.length-1,P=w.formatMessage({id:"ai_pane.placeholder",description:"AI pane input placeholder",defaultMessage:"your next ideaâ¦"});return t.jsxs(kn,{children:[t.jsxs(yn,{children:[t.jsxs(En,{children:[t.jsx(ye,{height:"14",width:"14"}),w.formatMessage({id:"ai_pane.title",description:"AI pane title",defaultMessage:"Edit with AI"})]}),e.length>0&&t.jsx(jn,{onClick:g,children:w.formatMessage({id:"ai_pane.clear",description:"Clear AI conversation",defaultMessage:"Clear"})})]}),t.jsxs(Cn,{ref:v,children:[e.map((C,y)=>t.jsxs(s.Fragment,{children:[t.jsxs(X,{$role:"user",children:[C.isSeed?t.jsx(be,{children:w.formatMessage({id:"ai_pane.seed_chip",description:"Path-B seed chip label",defaultMessage:'From "Create with AI"'})}):null,!C.isSeed&&C.scopeLabel!==null&&t.jsx(be,{children:C.scopeLabel}),t.jsx("span",{children:C.userPrompt})]}),t.jsxs(X,{$role:"ai",children:[t.jsx("span",{children:C.aiSummary}),y===S&&r?t.jsx(Sn,{"aria-label":"Undo",onClick:f,children:w.formatMessage({id:"ai_pane.undo",description:"Undo last AI edit inline",defaultMessage:"ⶠUndo"})}):null]})]},y)),n!==null&&t.jsxs(X,{$role:"user",children:[n.scopeLabel!==null&&t.jsx(be,{children:n.scopeLabel}),t.jsx("span",{children:n.userPrompt})]}),o?t.jsx(Rn,{children:w.formatMessage({id:"ai_pane.thinking",description:"Loading state in AI pane",defaultMessage:"Working on itâ¦"})}):null,a!==null&&t.jsxs(X,{$role:"ai",style:{color:"#c5302a"},children:[a.message,a.validatorErrors.length>0&&t.jsx("ul",{style:{margin:"6px 0 0",paddingLeft:16},children:a.validatorErrors.map((C,y)=>t.jsx("li",{children:C},y))})]})]}),t.jsxs(Tn,{children:[l!==null&&t.jsx(In,{children:t.jsxs(Bn,{children:[w.formatMessage({id:"ai_pane.editing_chip",description:"Selection chip above input",defaultMessage:"Editing: {summary}"},{summary:l}),t.jsx(Dn,{"aria-label":"Clear scope",onClick:p,children:w.formatMessage({id:"ai_pane.clear_scope_icon",description:"Clear scope button icon character",defaultMessage:"Ã"})})]})}),t.jsx(Kt,{disabled:o,icon:t.jsx(ye,{height:"16",width:"16"}),loading:o,onChange:T,onKeyDown:L,placeholder:P,ref:u,size:"medium",value:k}),t.jsx(Ln,{children:o?w.formatMessage({id:"ai_pane.thinking_hint",description:"Hint while loading",defaultMessage:"AI is thinkingâ¦"}):w.formatMessage({id:"ai_pane.enter_hint",description:"Enter-to-submit hint",defaultMessage:"Enter to send · Esc to dismiss"})})]})]})},et="popups-v2-ai:",An=10080*60*1e3,ie=(e,n)=>`${et}${e}:${n}`,Ee=e=>{try{const n=localStorage.getItem(e);if(n===null)return null;const o=JSON.parse(n);return typeof o.updatedAt!="number"||!Array.isArray(o.turns)||Date.now()-o.updatedAt>An?null:o}catch{return null}},tt=(e,n)=>{try{localStorage.setItem(e,JSON.stringify(n))}catch{}},Oe=(e,n)=>Ee(ie(e,n))?.turns??[],_n=(e,n,o)=>{const a=ie(e,n),r=[...Ee(a)?.turns??[],o].slice(-50);tt(a,{turns:r,updatedAt:Date.now()})},$n=(e,n,o)=>{tt(ie(e,n),{turns:o.slice(-50),updatedAt:Date.now()})},Mn=(e,n)=>{try{localStorage.removeItem(ie(e,n))}catch{}},On=()=>{try{const e=[];for(let n=0;n<localStorage.length;n++){const o=localStorage.key(n);o?.startsWith(et)&&e.push(o)}for(const n of e)Ee(n)===null&&localStorage.removeItem(n)}catch{}},Hn=e=>e.slice(-10).map(n=>({userPrompt:n.userPrompt,scopeIds:n.scopeIds})),Nn=({userId:e,variantId:n,dispatch:o})=>{const[a,l]=s.useState(()=>e===null?[]:Oe(e,n)),[r,i]=s.useState(!1),[g,c]=s.useState(null),[d,f]=s.useState(null),p=s.useRef(null);s.useEffect(()=>{On()},[]),s.useEffect(()=>{e!==null&&l(Oe(e,n))},[e,n]);const w=s.useCallback(()=>{p.current?.abort(),p.current=null,i(!1),f(null)},[]),k=s.useCallback(async(v,T)=>{if(e===null)return;p.current&&p.current.abort();const B=new AbortController;p.current=B,f({userPrompt:v,scopeIds:T.selectedBlockIds,scopeLabel:T.selectedBlockLabel}),i(!0),c(null);try{const L=await xn({variantId:n,prompt:v,initialPopup:T.initialPopup,selectedBlockIds:T.selectedBlockIds,recentIntent:Hn(a)},B.signal);if(p.current!==B)return;o({type:"AI_MUTATION_APPLIED",popup:L.popup});const S={userPrompt:v,aiSummary:L.summary,scopeIds:T.selectedBlockIds,scopeLabel:T.selectedBlockLabel,isSeed:!1};_n(e,n,S),l(P=>[...P,S]),f(null)}catch(L){if(B.signal.aborted)return;throw L instanceof $e?c(L):c(new $e(L instanceof Error?L.message:String(L),[])),L}finally{p.current===B&&(p.current=null,i(!1))}},[e,n,a,o]),b=s.useCallback(()=>{e!==null&&(Mn(e,n),l([]),f(null))},[e,n]),u=s.useCallback(v=>
159{e!==null&&($n(e,n,v),l(v))},[e,n]);return{submit:k,cancel:w,isLoading:r,lastError:g,history:a,pending:d,resetHistory:b,seedHistory:u}},zn=()=>t.jsx("svg",{fill:"none",height:16,viewBox:"0 0 16 16",width:16,children:t.jsx("path",{d:"M3 4h10M5 4v8M11 4v8",stroke:"currentColor",strokeLinecap:"round",strokeWidth:1.5})}),Vn=()=>t.jsx("svg",{fill:"none",height:16,viewBox:"0 0 16 16",width:16,children:t.jsx("path",{d:"M3 5h10M3 9h10M3 13h7",stroke:"currentColor",strokeLinecap:"round",strokeWidth:1.5})}),Un=()=>t.jsx("svg",{fill:"none",height:16,viewBox:"0 0 16 16",width:16,children:t.jsx("rect",{height:6,rx:2,stroke:"currentColor",strokeWidth:1.5,width:12,x:2,y:5})}),Gn=()=>t.jsx("svg",{fill:"none",height:16,viewBox:"0 0 16 16",width:16,children:t.jsx("rect",{height:11,rx:1.5,stroke:"currentColor",strokeDasharray:"2 1.5",strokeWidth:1.5,width:11,x:2.5,y:2.5})}),Wn=()=>t.jsx("svg",{fill:"none",height:16,viewBox:"0 0 16 16",width:16,children:t.jsx("path",{d:"M6.5 9.5l3-3M6 5h-.5a3 3 0 100 6h1M10 11h.5a3 3 0 100-6h-1",stroke:"currentColor",strokeLinecap:"round",strokeWidth:1.5})}),Fn=()=>t.jsxs("svg",{fill:"none",height:16,viewBox:"0 0 16 16",width:16,children:[t.jsx("rect",{height:11,rx:1.5,stroke:"currentColor",strokeWidth:1.5,width:12,x:2,y:2.5}),t.jsx("circle",{cx:6,cy:6.5,r:1,stroke:"currentColor",strokeWidth:1.5}),t.jsx("path",{d:"M2.5 12L6 8.5L9 11.5L11.5 9L13.5 11",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})]}),Kn=[{label:"Heading",idPrefix:"heading",snippet:'<h2 class="wp-heading" data-wp-block="__ID__">Heading</h2>',icon:t.jsx(zn,{})},{label:"Text",idPrefix:"text",snippet:'<p class="wp-text" data-wp-block="__ID__">Text</p>',icon:t.jsx(Vn,{})},{label:"Button",idPrefix:"button",snippet:'<button class="wp-button" data-wp-block="__ID__" type="button" data-wp-action="link" href="#">Button</button>',icon:t.jsx(Un,{})},{label:"Container",idPrefix:"container",snippet:'<div class="wp-container" data-wp-block="__ID__"></div>',icon:t.jsx(Gn,{})},{label:"Link",idPrefix:"link",snippet:'<a class="wp-link" data-wp-block="__ID__" href="#">Link text</a>',icon:t.jsx(Wn,{})},{label:"Image",idPrefix:"image",snippet:'<img class="wp-image" data-wp-block="__ID__" alt="" style="--wp-aspect-ratio: 4/3">',icon:t.jsx(Fn,{})}],qn=x.div` 160 display: flex; 161 flex-direction: column; 162 height: 100%; 163`,Xn=x.div` 164 border-bottom: 1px solid #e5e7eb; 165 color: #6b7280; 166 flex-shrink: 0; 167 font-size: 11px; 168 font-weight: 600; 169 letter-spacing: 0.08em; 170 padding: 12px 16px; 171 text-transform: uppercase; 172`,Zn=x.div` 173 display: flex; 174 flex-direction: column; 175 gap: 6px; 176 overflow-y: auto; 177 padding: 12px; 178`,Yn=x.button` 179 align-items: center; 180 background: ${({$active:e})=>e?"#eff6ff":"#ffffff"}; 181 border: 1px solid ${({$active:e})=>e?"#3b82f6":"#e5e7eb"}; 182 border-radius: 8px; 183 color: #374151; 184 cursor: grab; 185 display: flex; 186 font-size: 13px; 187 font-weight: 500; 188 gap: 10px; 189 padding: 10px 12px; 190 text-align: left; 191 user-select: none; 192 width: 100%; 193 194 &:active { 195 cursor: grabbing; 196 } 197 198 &:hover { 199 background: ${({$active:e})=>e?"#eff6ff":"#f9fafb"}; 200 border-color: ${({$active:e})=>e?"#3b82f6":"#d1d5db"}; 201 } 202`,Jn=x.span` 203 align-items: center; 204 color: #6b7280; 205 display: inline-flex; 206 flex-shrink: 0; 207 height: 16px; 208 justify-content: center; 209 width: 16px; 210`,Qn=x.span` 211 flex: 1; 212`,eo=x.div` 213 align-items: center; 214 background: #fff; 215 border: 1px solid #3b82f6; 216 border-radius: 8px; 217 box-shadow: 0 4px 12px rgb(0 0 0 / 15%); 218 color: #1f2937; 219 display: flex; 220 font-size: 13px; 221 font-weight: 500; 222 gap: 8px; 223 height: 36px; 224 opacity: 0.95; 225 padding: 0 12px; 226 pointer-events: none; 227 position: fixed; 228 z-index: 10000; 229`,to=x.span` 230 align-items: center; 231 color: #3b82f6; 232 display: inline-flex; 233 flex-shrink: 0; 234 height: 16px; 235 justify-content: center; 236 width: 16px; 237`,no=({block:e,active:n,onMouseDown:o})=>{const a=s.useCallback(l=>{l.button===0&&(l.preventDefault(),o(e,l))},[e,o]);return t.jsxs(Yn,{$active:n,"aria-label":`Add ${e.label}`,onMouseDown:a,type:"button",children:[t.jsx(Jn,{children:e.icon}),t.jsx(Qn,{children:e.label})]})},oo=({activeBlock:e,onTileMouseDown:n})=>t.jsxs(qn,{children:[t.jsx(Xn,{children:"Add block"}),t.jsx(Zn,{children:Kn.map(o=>t.jsx(no,{active:e?.idPrefix===o.idPrefix,block:o,onMouseDown:n},o.idPrefix))})]}),ro=({icon:e,label:n,x:o,y:a})=>{const l=o+12,r=a+12;return qt.createPortal(t.jsxs(eo,{style:{left:l,top:r},children:[t.jsx(to,{children:e}),t.jsxs("span",{children:["+ ",n]})]}),document.body)},je="wisepops-builder",_=(e,n)=>{e.contentWindow?.postMessage({source:je,payload:n},"*")},ao=e=>{const n=e.data;return!n||n.source!==je?null:n.payload??null},io=` 238function sendToParent(payload) { 239 window.parent.postMessage({ source: "${je}", payload: payload }, "*"); 240} 241`,He=(e,n,o)=>n>=e.left&&n<=e.right&&o>=e.top&&o<=e.bottom,lo=e=>{const[n,o]=s.useState(null),[a,l]=s.useState(null),r=s.useRef(null);r.current=n;const i=s.useCallback(()=>{document.body.style.cursor="",e.current&&(e.current.style.pointerEvents=""),o(null),l(null),r.current=null},[e]),g=s.useCallback(()=>{e.current&&_(e.current,{type:"PALETTE_DRAG_CANCEL"})},[e]);s.useEffect(()=>{if(!n)return;let d=!1;const f=b=>{if(!r.current)return;l({x:b.clientX,y:b.clientY});const v=e.current;if(!v)return;const T=v.getBoundingClientRect();if(!He(T,b.clientX,b.clientY)){d&&(_(v,{type:"PALETTE_DRAG_CANCEL"}),d=!1);return}d=!0,_(v,{type:"PALETTE_DRAG_MOVE",x:b.clientX-T.left,y:b.clientY-T.top})},p=b=>{const u=r.current;if(!u){i();return}const v=e.current;if(!v){i();return}const T=v.getBoundingClientRect();He(T,b.clientX,b.clientY)?_(v,{type:"PALETTE_DRAG_DROP",x:b.clientX-T.left,y:b.clientY-T.top,snippet:u.snippet,idPrefix:u.idPrefix}):_(v,{type:"PALETTE_DRAG_CANCEL"}),i()},w=b=>{b.key==="Escape"&&(g(),i())};document.body.style.cursor="grabbing";const k=e.current;return k&&(k.style.pointerEvents="none"),window.addEventListener("mousemove",f),window.addEventListener("mouseup",p),window.addEventListener("keydown",w),()=>{window.removeEventListener("mousemove",f),window.removeEventListener("mouseup",p),window.removeEventListener("keydown",w),document.body.style.cursor="",k&&(k.style.pointerEvents="")}},[n,e,i,g]);const c=s.useCallback((d,f)=>{o(d),l({x:f.clientX,y:f.clientY}),r.current=d},[]);return{activeBlock:n,ghostPos:a,start:c}},N=(e,n)=>{e.status==="editing"&&e.editingBlockId&&n&&_(n,{type:"COMMIT_TEXT_EDIT"})},so=x.div`
242 align-items: center; 243 background: #fafafa; 244 border: 1px solid #e5e7eb; 245 border-radius: 20px; 246 display: flex; 247 gap: 2px; 248 padding: 2px; 249`,Ne=x.button` 250 background: ${({$active:e})=>e?"#ffffff":"#fafafa"}; 251 border: none; 252 border-radius: 16px; 253 box-shadow: ${({$active:e})=>e?"0 1px 3px rgba(0,0,0,0.12)":"none"}; 254 color: ${({$active:e})=>e?"#111827":"#999999"}; 255 cursor: pointer; 256 font-size: 13px; 257 font-weight: ${({$active:e})=>e?"700":"400"}; 258 padding: 4px 12px; 259 transition: 260 background 0.15s ease, 261 color 0.15s ease, 262 font-weight 0.15s ease; 263`,co="Desktop",po="Mobile",uo=({device:e,onChange:n})=>{const o=s.useCallback(()=>{n("desktop")},[n]),a=s.useCallback(()=>{n("mobile")},[n]);return t.jsxs(so,{children:[t.jsx(Ne,{$active:e==="desktop",onClick:o,type:"button",children:co}),t.jsx(Ne,{$active:e==="mobile",onClick:a,type:"button",children:po})]})},go={DIV:"Container",SECTION:"Section",H1:"Heading",H2:"Heading",H3:"Heading",H4:"Heading",H5:"Heading",H6:"Heading",P:"Paragraph",SPAN:"Text",A:"Link",BUTTON:"Button",IMG:"Image",INPUT:"Input",FORM:"Form"},ze=25,fo=e=>{const n=[];for(const a of e.childNodes)if(a.nodeType===Node.TEXT_NODE){const l=a.textContent?.trim();l&&n.push(l)}return n.length>0?n.join(" "):[...e.children].some(a=>a.dataset.wpBlock!==void 0)?"":e.textContent?.trim()??""},ho=e=>{if(!e.trim())return[];const o=new DOMParser().parseFromString(e,"text/html"),a=i=>{const g=i.dataset.wpBlock;if(g===void 0)return null;const c=[...i.children],d=[];for(const u of c){const v=l(u);d.push(...v)}const p=[...i.childNodes].filter(u=>u.nodeType===Node.TEXT_NODE).map(u=>u.textContent??"").join("").trim()||fo(i);let w;p?w=p.length>ze?p.slice(0,ze)+"...":p:w=go[i.tagName]??i.tagName;const k=i.dataset.wpStep,b=Object.hasOwn(i.dataset,"wpStepInitial");return{id:g,tag:i.tagName,label:w,children:d,...k!==void 0&&{stepId:k},...k!==void 0&&b&&{isInitialStep:!0}}},l=i=>{if(i.dataset.wpBlock!==void 0){const d=a(i);return d?[d]:[]}const c=[];for(const d of i.children)c.push(...l(d));return c},r=[];for(const i of o.body.children)r.push(...l(i));return r},xo=x.div` 264 border-bottom: 1px solid #e5e7eb; 265 color: #6b7280; 266 flex-shrink: 0; 267 font-size: 11px; 268 font-weight: 600; 269 letter-spacing: 0.08em; 270 padding: 12px 16px; 271 text-transform: uppercase; 272`,bo=x.div` 273 flex: 1; 274 overflow-y: auto; 275 padding: 4px 0; 276`,wo=x.div` 277 align-items: center; 278 background: ${({$selected:e})=>e?"#eff6ff":"transparent"}; 279 color: ${({$selected:e})=>e?"#1d4ed8":"#374151"}; 280 cursor: pointer; 281 display: flex; 282 font-size: 12px; 283 font-weight: ${({$selected:e})=>e?600:400}; 284 gap: 6px; 285 padding: 5px 12px 5px ${({$depth:e})=>12+e*16}px; 286 user-select: none; 287 288 &:hover { 289 background: ${({$selected:e})=>e?"#eff6ff":"#f5f5f5"}; 290 } 291`,vo=x.span` 292 background: ${({$selected:e})=>e?"#3b82f6":"#d1d5db"}; 293 border-radius: 50%; 294 flex-shrink: 0; 295 height: 6px; 296 width: 6px; 297`,mo=x.span` 298 overflow: hidden; 299 text-overflow: ellipsis; 300 white-space: nowrap; 301`,ko=x.span` 302 background: ${({$active:e})=>e?"#6366f1":"#9ca3af"}; 303 border-radius: 4px; 304 color: #fff; 305 flex-shrink: 0; 306 font-size: 9px; 307 font-weight: 700; 308 line-height: 1; 309 padding: 2px 4px; 310`,nt=({node:e,depth:n,selectedBlockId:o,currentStepId:a,parentStepId:l,stepIndexMap:r,onBlockClick:i,onStepClick:g})=>{const c=e.id===o,d=e.stepId!==void 0,f=d&&e.stepId===a,p=s.useCallback(()=>{e.stepId===void 0?(l!==void 0&&l!==a&&g(l),i(e.id)):(g(e.stepId),i(e.id))},[i,g,e.id,e.stepId,l,a]),w=e.stepId===void 0?void 0:r.get(e.stepId);return t.jsxs("div",{children:[t.jsxs(wo,{$depth:n,$selected:c,onClick:p,children:[d&&w!==void 0?t.jsxs(ko,{$active:f,children:["Step ",w]}):null,t.jsx(vo,{$selected:c}),t.jsxs(mo,{title:e.label,children:[e.label,e.isInitialStep===!0&&" (initial)"]})]}),e.children.map(k=>t.jsx(nt,{currentStepId:a,depth:n+1,node:k,onBlockClick:i,onStepClick:g,parentStepId:e.stepId??l,selectedBlockId:o,stepIndexMap:r},k.id))]})},yo=e=>{const n=[],o=a=>{a.stepId!==void 0&&n.push(a.stepId);for(const l of a.children)o(l)};for(const a of e)o(a);return n},Eo=({html:e,selectedBlockId:n,currentStepId:o,onBlockClick:a,onStepClick:l})=>{const r=s.useMemo(()=>ho(e),[e]),i=s.useMemo(()=>{const g=yo(r),c=new Map;return g.forEach((d,f)=>{c.set(d,f+1)}),c},[r]);return t.jsxs(t.Fragment,{children:[t.jsx(xo,{children:"Layers"}),t.jsx(bo,{children:r.map(g=>t.jsx(nt,{currentStepId:o,depth:0,node:g,onBlockClick:a,onStepClick:l,parentStepId:void 0,selectedBlockId:n,stepIndexMap:i},g.id))})]})},jo=`.wp-root { 311 position: relative; 312 display: flex; 313 flex-direction: column; 314 width: min(var(--wp-max-width, 420px), 100vw - 32px); 315 max-height: calc(100dvh - 32px); 316 overflow: hidden; 317 background: var(--wp-bg, var(--bk-color-bg, #ffffff)); 318 border-radius: var(--wp-radius, 16px); 319 box-shadow: var(--wp-shadow, 0 20px 60px rgba(0, 0, 0, 0.15)); 320 font-family: var(--bk-font-body, "Inter", sans-serif); 321} 322 323.wp-step { 324 flex: 1 1 auto; 325 min-height: 0; 326 overflow-y: auto; 327 padding: var(--wp-padding, 40px 32px 32px); 328 display: flex; 329 flex-direction: var(--wp-layout-direction, column); 330 flex-wrap: var(--wp-layout-wrap, nowrap); 331 overflow-x: var(--wp-layout-overflow, visible); 332 gap: var(--wp-gap, 12px); 333 align-items: var(--wp-align, stretch); 334 justify-content: var(--wp-justify, flex-start); 335} 336 337.wp-container { 338 display: flex; 339 flex-direction: var(--wp-layout-direction, column); 340 flex-wrap: var(--wp-layout-wrap, nowrap); 341 overflow-x: var(--wp-layout-overflow, visible); 342 gap: var(--wp-gap, 12px); 343 align-items: var(--wp-align, stretch); 344 justify-content: var(--wp-justify, flex-start); 345 padding: var(--wp-padding, 0); 346 max-width: var(--wp-max-width, 100%); 347 align-self: var(--wp-align-self, auto); 348} 349 350.wp-step[style*="--wp-layout: stack"], .wp-step[style*="--wp-layout:stack"], 351.wp-container[style*="--wp-layout: stack"], .wp-container[style*="--wp-layout:stack"] { 352 --wp-layout-direction: column; 353 --wp-layout-wrap: nowrap; 354 --wp-layout-overflow: visible; 355} 356 357.wp-step[style*="--wp-layout: row"], .wp-step[style*="--wp-layout:row"], 358.wp-container[style*="--wp-layout: row"], .wp-container[style*="--wp-layout:row"] { 359 --wp-layout-direction: row; 360 --wp-layout-wrap: wrap; 361 --wp-layout-overflow: visible; 362} 363 364.wp-step[style*="--wp-layout: row-scroll"], .wp-step[style*="--wp-layout:row-scroll"], 365.wp-container[style*="--wp-layout: row-scroll"], .wp-container[style*="--wp-layout:row-scroll"] { 366 --wp-layout-direction: row; 367 --wp-layout-wrap: nowrap; 368 --wp-layout-overflow: auto; 369} 370 371.wp-heading { 372 font-size: var(--wp-font-size, 2rem); 373 font-weight: var(--wp-font-weight, 700); 374 color: var(--wp-color, var(--bk-color-text, #111827)); 375 font-family: var(--bk-font-heading, var(--bk-font-body, inherit)); 376 line-height: 1.2; 377 margin: 0; 378 align-self: var(--wp-align-self, auto); 379} 380 381.wp-text { 382 font-size: var(--wp-font-size, 1rem); 383 font-weight: var(--wp-font-weight, 400); 384 color: var(--wp-color, var(--bk-color-text-muted, #6b7280)); 385 line-height: 1.6; 386 margin: 0; 387 align-self: var(--wp-align-self, auto); 388} 389 390.wp-button { 391 display: inline-block; 392 padding: var(--wp-padding, 12px 32px); 393 background: var(--wp-bg, var(--bk-color-primary, #3b82f6)); 394 color: var(--wp-color, #ffffff); 395 font: inherit; 396 font-weight: 600; 397 border: none; 398 border-radius: var(--wp-radius, var(--bk-radius-button, 8px)); 399 cursor: pointer; 400 text-decoration: none; 401 transition: background 0.15s; 402 max-width: var(--wp-max-width, none); 403 align-self: var(--wp-align-self, auto); 404} 405 406.wp-button:hover { 407 background: color-mix(in srgb, var(--wp-bg, var(--bk-color-primary, #3b82f6)) 85%, black); 408} 409 410.wp-button:focus-visible { 411 outline: 2px solid var(--bk-color-primary, #3b82f6); 412 outline-offset: 2px; 413} 414 415.wp-link { 416 color: var(--wp-color, var(--bk-color-primary, #3b82f6)); 417 text-decoration: underline; 418 cursor: pointer;
419 align-self: var(--wp-align-self, auto); 420} 421 422.wp-link:hover { 423 text-decoration: none; 424} 425 426.wp-image { 427 display: block; 428 width: 100%; 429 max-width: var(--wp-max-width, 100%); 430 aspect-ratio: var(--wp-aspect-ratio, auto); 431 object-fit: var(--wp-object-fit, cover); 432 border-radius: var(--wp-radius, 0); 433 align-self: var(--wp-align-self, auto); 434} 435 436[data-wp-builder] .wp-image:not([src]) { 437 background: #f3f4f6; 438 border: 2px dashed #9ca3af; 439 min-height: 80px; 440 cursor: pointer; 441 position: relative; 442} 443 444[data-wp-builder] .wp-image:not([src])::before { 445 content: 'Click to add image'; 446 position: absolute; 447 inset: 0; 448 display: flex; 449 align-items: center; 450 justify-content: center; 451 color: #6b7280; 452 font-size: 13px; 453 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 454 pointer-events: none; 455} 456 457@media (max-width: 768px) { 458 .wp-root { 459 background: var(--wp-mobile-bg, var(--wp-bg, var(--bk-color-bg, #ffffff))); 460 border-radius: var(--wp-mobile-radius, var(--wp-radius, 16px)); 461 box-shadow: var(--wp-mobile-shadow, var(--wp-shadow, 0 20px 60px rgba(0, 0, 0, 0.15))); 462 } 463 464 .wp-step { 465 padding: var(--wp-mobile-padding, var(--wp-padding, 32px 20px)); 466 flex-direction: var(--wp-mobile-layout-direction, var(--wp-layout-direction, column)); 467 flex-wrap: var(--wp-mobile-layout-wrap, var(--wp-layout-wrap, nowrap)); 468 overflow-x: var(--wp-mobile-layout-overflow, var(--wp-layout-overflow, visible)); 469 gap: var(--wp-mobile-gap, var(--wp-gap, 12px)); 470 align-items: var(--wp-mobile-align, var(--wp-align, stretch)); 471 justify-content: var(--wp-mobile-justify, var(--wp-justify, flex-start)); 472 } 473 474 .wp-container { 475 flex-direction: var(--wp-mobile-layout-direction, var(--wp-layout-direction, column)); 476 flex-wrap: var(--wp-mobile-layout-wrap, var(--wp-layout-wrap, nowrap)); 477 overflow-x: var(--wp-mobile-layout-overflow, var(--wp-layout-overflow, visible)); 478 gap: var(--wp-mobile-gap, var(--wp-gap, 12px)); 479 align-items: var(--wp-mobile-align, var(--wp-align, stretch)); 480 justify-content: var(--wp-mobile-justify, var(--wp-justify, flex-start)); 481 padding: var(--wp-mobile-padding, var(--wp-padding, 0)); 482 max-width: var(--wp-mobile-max-width, var(--wp-max-width, 100%)); 483 align-self: var(--wp-mobile-align-self, var(--wp-align-self, auto)); 484 } 485 486 .wp-step[style*="--wp-mobile-layout: stack"], .wp-step[style*="--wp-mobile-layout:stack"], 487 .wp-container[style*="--wp-mobile-layout: stack"], .wp-container[style*="--wp-mobile-layout:stack"] { 488 --wp-mobile-layout-direction: column; 489 --wp-mobile-layout-wrap: nowrap; 490 --wp-mobile-layout-overflow: visible; 491 } 492 493 .wp-step[style*="--wp-mobile-layout: row"], .wp-step[style*="--wp-mobile-layout:row"], 494 .wp-container[style*="--wp-mobile-layout: row"], .wp-container[style*="--wp-mobile-layout:row"] { 495 --wp-mobile-layout-direction: row; 496 --wp-mobile-layout-wrap: wrap; 497 --wp-mobile-layout-overflow: visible; 498 } 499 500 .wp-step[style*="--wp-mobile-layout: row-scroll"], .wp-step[style*="--wp-mobile-layout:row-scroll"], 501 .wp-container[style*="--wp-mobile-layout: row-scroll"], .wp-container[style*="--wp-mobile-layout:row-scroll"] { 502 --wp-mobile-layout-direction: row; 503 --wp-mobile-layout-wrap: nowrap; 504 --wp-mobile-layout-overflow: auto; 505 } 506 507 .wp-heading { 508 font-size: var(--wp-mobile-font-size, var(--wp-font-size, 1.5rem)); 509 font-weight: var(--wp-mobile-font-weight, var(--wp-font-weight, 700)); 510 color: var(--wp-mobile-color, var(--wp-color, var(--bk-color-text, #111827))); 511 align-self: var(--wp-mobile-align-self, var(--wp-align-self, auto)); 512 } 513 514 .wp-text { 515 font-size: var(--wp-mobile-font-size, var(--wp-font-size, 0.875rem)); 516 font-weight: var(--wp-mobile-font-weight, var(--wp-font-weight, 400)); 517 color: var(--wp-mobile-color, var(--wp-color, var(--bk-color-text-muted, #6b7280))); 518 align-self: var(--wp-mobile-align-self, var(--wp-align-self, auto)); 519 } 520 521 .wp-button { 522 padding: var(--wp-mobile-padding, var(--wp-padding, 12px 32px)); 523 background: var(--wp-mobile-bg, var(--wp-bg, var(--bk-color-primary, #3b82f6))); 524 color: var(--wp-mobile-color, var(--wp-color, #ffffff)); 525 border-radius: var(--wp-mobile-radius, var(--wp-radius, var(--bk-radius-button, 8px))); 526 max-width: var(--wp-mobile-max-width, var(--wp-max-width, none)); 527 align-self: var(--wp-mobile-align-self, var(--wp-align-self, auto)); 528 } 529 530 .wp-button:hover { 531 background: color-mix(in srgb, var(--wp-mobile-bg, var(--wp-bg, var(--bk-color-primary, #3b82f6))) 85%, black); 532 } 533 534 .wp-link { 535 color: var(--wp-mobile-color, var(--wp-color, var(--bk-color-primary, #3b82f6))); 536 align-self: var(--wp-mobile-align-self, var(--wp-align-self, auto)); 537 } 538 539 .wp-image { 540 max-width: var(--wp-mobile-max-width, var(--wp-max-width, 100%)); 541 aspect-ratio: var(--wp-mobile-aspect-ratio, var(--wp-aspect-ratio, auto)); 542 object-fit: var(--wp-mobile-object-fit, var(--wp-object-fit, cover)); 543 border-radius: var(--wp-mobile-radius, var(--wp-radius, 0)); 544 align-self: var(--wp-mobile-align-self, var(--wp-align-self, auto)); 545 } 546} 547`,Co=()=>` 548(function() { 549 var container = document.getElementById("popup-container"); 550 if (!container) return; 551 552 var selectedBlockId = null; 553 var dragState = null; 554 var dropIndicator = null; 555 var editingBlockId = null; 556 var paletteDragActive = false;
557 var dropZoneOutline = null; 558 559 // ========================================================================= 560 // Step visibility 561 // ========================================================================= 562 563 function initStepVisibility() { 564 var steps = container.querySelectorAll("[data-wp-step]"); 565 if (steps.length < 2) return; 566 567 var initialStep = container.querySelector("[data-wp-step-initial]") 568 || steps[0]; 569 for (var i = 0; i < steps.length; i++) { 570 if (steps[i] === initialStep) { 571 steps[i].classList.remove("wp-step-hidden"); 572 } else { 573 steps[i].classList.add("wp-step-hidden"); 574 } 575 } 576 } 577 578 function showStep(stepId) { 579 var steps = container.querySelectorAll("[data-wp-step]"); 580 for (var i = 0; i < steps.length; i++) { 581 var id = steps[i].getAttribute("data-wp-step"); 582 if (id === stepId) { 583 steps[i].classList.remove("wp-step-hidden"); 584 } else { 585 steps[i].classList.add("wp-step-hidden"); 586 } 587 } 588 } 589 590 // ========================================================================= 591 // Selection 592 // ========================================================================= 593 594 function findBlock(target) { 595 var el = target; 596 while (el && el !== container) { 597 if (el.getAttribute && el.getAttribute("data-wp-block")) return el; 598 el = el.parentElement; 599 } 600 return null; 601 } 602 603 var selectBlock = function(blockId) { 604 if (selectedBlockId) { 605 var prev = container.querySelector('[data-wp-block="' + selectedBlockId + '"]'); 606 if (prev) prev.classList.remove("wp-selected"); 607 } 608 selectedBlockId = blockId; 609 if (blockId) { 610 var el = container.querySelector('[data-wp-block="' + blockId + '"]'); 611 if (el) el.classList.add("wp-selected"); 612 } 613 }; 614 615 function sendBlockRect(blockId) { 616 var el = document.querySelector('[data-wp-block="' + blockId + '"]'); 617 if (!el) return; 618 var elRect = el.getBoundingClientRect(); 619 sendToParent({ 620 type: "BLOCK_RECT_RECEIVED", 621 blockId: blockId, 622 rect: { 623 top: elRect.top, 624 left: elRect.left, 625 width: elRect.width, 626 height: elRect.height 627 } 628 }); 629 } 630 631 function sendBlockComputedStyles(blockId) { 632 var el = document.querySelector('[data-wp-block="' + blockId + '"]'); 633 if (!el) return; 634 var cs = getComputedStyle(el); 635 sendToParent({ 636 type: "BLOCK_COMPUTED_STYLES", 637 blockId: blockId, 638 styles: { 639 fontSize: cs.fontSize, 640 fontWeight: cs.fontWeight, 641 color: cs.color, 642 backgroundColor: cs.backgroundColor, 643 padding: cs.padding, 644 borderRadius: cs.borderRadius, 645 maxWidth: cs.maxWidth, 646 boxShadow: cs.boxShadow, 647 flexDirection: cs.flexDirection, 648 flexWrap: cs.flexWrap, 649 overflowX: cs.overflowX, 650 gap: cs.gap, 651 alignItems: cs.alignItems, 652 justifyContent: cs.justifyContent, 653 alignSelf: cs.alignSelf 654 } 655 }); 656 } 657 658 // ========================================================================= 659 // Drag and Drop 660 // ========================================================================= 661 662 var DRAG_THRESHOLD = 5; 663 664 function getBlockParent(el) { 665 var parent = el.parentElement; 666 while (parent && parent !== container) { 667 if (parent.getAttribute && parent.getAttribute("data-wp-block")) return parent; 668 parent = parent.parentElement; 669 } 670 return container; 671 } 672 673 function isHorizontalLayout(parentEl) { 674 var style = window.getComputedStyle(parentEl); 675 var display = style.display || ""; 676 // Only check flexDirection if the element is actually a flex container 677 if (display.includes("flex")) { 678 var dir = style.flexDirection || ""; 679 return dir === "row" || dir === "row-reverse"; 680 } 681 if (display.includes("grid")) { 682 var cols = style.gridTemplateColumns || ""; 683 return cols.split(/\\s+/).filter(function(c) { return c && c !== "none"; }).length > 1; 684 } 685 return false;
686 } 687 688 function removeDropIndicator() { 689 if (dropIndicator && dropIndicator.parentElement) { 690 dropIndicator.parentElement.removeChild(dropIndicator); 691 } 692 dropIndicator = null; 693 var highlighted = container.querySelectorAll(".wp-drop-container"); 694 for (var i = 0; i < highlighted.length; i++) { 695 highlighted[i].classList.remove("wp-drop-container"); 696 } 697 } 698 699 function showDropZoneOutline() { 700 if (dropZoneOutline) return; 701 dropZoneOutline = document.createElement("div"); 702 dropZoneOutline.className = "wp-drop-zone-outline"; 703 var rect = container.getBoundingClientRect(); 704 dropZoneOutline.style.position = "absolute"; 705 dropZoneOutline.style.top = rect.top + "px"; 706 dropZoneOutline.style.left = rect.left + "px"; 707 dropZoneOutline.style.width = rect.width + "px"; 708 dropZoneOutline.style.height = rect.height + "px"; 709 dropZoneOutline.style.outline = "1px dashed #3b82f6"; 710 dropZoneOutline.style.outlineOffset = "0"; 711 dropZoneOutline.style.opacity = "0.4"; 712 dropZoneOutline.style.pointerEvents = "none"; 713 dropZoneOutline.style.zIndex = "9998"; 714 document.body.appendChild(dropZoneOutline); 715 } 716 717 function hideDropZoneOutline() { 718 if (dropZoneOutline && dropZoneOutline.parentElement) { 719 dropZoneOutline.parentElement.removeChild(dropZoneOutline); 720 } 721 dropZoneOutline = null; 722 } 723 724 function refreshEmptyContainerMarkers() { 725 var divs = container.querySelectorAll("div[data-wp-block]"); 726 for (var i = 0; i < divs.length; i++) { 727 var hasBlockChild = divs[i].querySelector("[data-wp-block]"); 728 if (hasBlockChild) { 729 divs[i].classList.remove("wp-empty-container"); 730 } else { 731 divs[i].classList.add("wp-empty-container"); 732 } 733 } 734 } 735 736 function generateBlockId(prefix) { 737 var existing = {}; 738 var blocks = container.querySelectorAll("[data-wp-block]"); 739 for (var i = 0; i < blocks.length; i++) { 740 existing[blocks[i].getAttribute("data-wp-block")] = true; 741 } 742 if (!existing[prefix]) return prefix; 743 var n = 1; 744 while (existing[prefix + "-" + n]) n++; 745 return prefix + "-" + n; 746 } 747 748 function insertPaletteBlock(snippet, idPrefix, dropTarget) { 749 if (!snippet || !idPrefix || !dropTarget) return; 750 751 var newId = generateBlockId(idPrefix); 752 var html = snippet.replace("__ID__", newId); 753 754 var template = document.createElement("template"); 755 template.innerHTML = html.trim(); 756 var newEl = template.content.firstElementChild; 757 if (!newEl) return; 758 759 executeDrop(dropTarget, newEl); 760 removeDropIndicator(); 761 refreshEmptyContainerMarkers(); 762 763 selectBlock(newId); 764 765 // Include the rect atomically in BLOCK_INSERTED. Sending it via a 766 // separate sendBlockRect() call before BLOCK_INSERTED would race with 767 // the parent's selectedBlockId update â the BLOCK_RECT_RECEIVED guard 768 // checks state.selectedBlockId === blockId, which is still the old 769 // value when the rect arrives, so the rect would be silently dropped. 770 var elRect = newEl.getBoundingClientRect(); 771 sendToParent({ 772 type: "BLOCK_INSERTED", 773 blockId: newId, 774 html: getPopupHtml(), 775 rect: { 776 top: elRect.top, 777 left: elRect.left, 778 width: elRect.width, 779 height: elRect.height 780 } 781 }); 782 } 783 784 function getDirectBlockChildren(parentEl) { 785 // Get direct children that have data-wp-block (not nested deeper) 786 var children = []; 787 for (var i = 0; i < parentEl.children.length; i++) { 788 var child = parentEl.children[i]; 789 if (child.getAttribute("data-wp-block")) { 790 children.push(child); 791 } 792 } 793 return children; 794 } 795 796 function findDeepestContainer(x, y, draggedEl) {
797 // Find the deepest block container that contains the cursor point. 798 // A container is a DIV block that either has block children or carries 799 // the wp-empty-container marker (newly inserted / temporarily empty). 800 var allBlocks = container.querySelectorAll("[data-wp-block]"); 801 var best = null; 802 var bestArea = Infinity; 803 804 for (var i = 0; i < allBlocks.length; i++) { 805 var block = allBlocks[i]; 806 if (block === draggedEl) continue; 807 if (block.tagName !== "DIV") continue; 808 if (block.hasAttribute("data-wp-smart")) continue; 809 var hasBlockChildren = getDirectBlockChildren(block).length > 0; 810 var isEmptyMarked = block.classList.contains("wp-empty-container"); 811 if (!hasBlockChildren && !isEmptyMarked) continue; 812 var rect = block.getBoundingClientRect(); 813 if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) { 814 var area = rect.width * rect.height; 815 if (area < bestArea) { 816 bestArea = area; 817 best = block; 818 } 819 } 820 } 821 return best; 822 } 823 824 function findDropTarget(x, y, draggedEl, paletteMode) { 825 // Only allow drops inside the popup container bounds 826 var popupContainerRect = container.getBoundingClientRect(); 827 if (x < popupContainerRect.left || x > popupContainerRect.right || y < popupContainerRect.top || y > popupContainerRect.bottom) { 828 return null; 829 } 830 831 // Find the deepest container block the cursor is inside 832 var targetContainer = findDeepestContainer(x, y, draggedEl); 833 if (!targetContainer) return null; 834 835 // Get direct block children of that container (excluding dragged element) 836 var siblings = getDirectBlockChildren(targetContainer); 837 siblings = siblings.filter(function(el) { 838 return el !== draggedEl && (!draggedEl || !draggedEl.contains(el)) && isDraggable(el); 839 }); 840 841 if (siblings.length === 0) { 842 // Empty container: drop "into" works for both palette and in-canvas 843 // DnD. paletteMode is unused here today but kept for future 844 // kind-specific drop rules. 845 return { 846 target: null, 847 position: "into", 848 container: targetContainer, 849 horizontal: false, 850 rect: targetContainer.getBoundingClientRect(), 851 indicatorPos: 0 852 }; 853 } 854 855 var horizontal = isHorizontalLayout(targetContainer); 856 857 // Get ALL direct block children (including dragged) to detect same-position drops 858 var allSiblings = getDirectBlockChildren(targetContainer); 859 860 // Build gaps: before first, between each pair, after last 861 var gaps = []; 862 for (var j = 0; j < siblings.length; j++) { 863 var rect = siblings[j].getBoundingClientRect(); 864 if (j === 0) { 865 var containerRect2 = targetContainer.getBoundingClientRect(); 866 var edge = horizontal ? containerRect2.left : containerRect2.top; 867 var blockEdge = horizontal ? rect.left : rect.top; 868 gaps.push({ pos: (edge + blockEdge) / 2, center: (edge + blockEdge) / 2, target: siblings[j], position: "before" }); 869 } 870 var gapPos, gapCenter; 871 if (j < siblings.length - 1) { 872 var nextRect = siblings[j + 1].getBoundingClientRect(); 873 gapPos = horizontal ? (rect.right + nextRect.left) / 2 : (rect.bottom + nextRect.top) / 2; 874 gapCenter = gapPos; 875 } else { 876 var containerRect3 = targetContainer.getBoundingClientRect(); 877 var lastEdge = horizontal ? rect.right : rect.bottom; 878 var contEdge = horizontal ? containerRect3.right : containerRect3.bottom; 879 gapPos = lastEdge; 880 gapCenter = (lastEdge + contEdge) / 2; 881 } 882 gaps.push({ pos: gapPos, center: gapCenter, target: siblings[j], position: "after" }); 883 } 884 885 // Find closest gap
886 var cursorPos = horizontal ? x : y; 887 var bestGap = null; 888 var bestGapDist = Infinity; 889 for (var k = 0; k < gaps.length; k++) { 890 var d = Math.abs(cursorPos - gaps[k].pos); 891 if (d < bestGapDist) { 892 bestGapDist = d; 893 bestGap = gaps[k]; 894 } 895 } 896 897 if (!bestGap) return null; 898 899 // Same-position check only applies when an existing block is being dragged 900 if (draggedEl) { 901 var dragIdx = allSiblings.indexOf(draggedEl); 902 if (dragIdx !== -1) { 903 var targetIdx = allSiblings.indexOf(bestGap.target); 904 if (bestGap.position === "before" && (dragIdx === targetIdx || dragIdx === targetIdx - 1)) return null; 905 if (bestGap.position === "after" && (dragIdx === targetIdx || dragIdx === targetIdx + 1)) return null; 906 } 907 } 908 909 var targetRect = bestGap.target.getBoundingClientRect(); 910 return { 911 target: bestGap.target, 912 position: bestGap.position, 913 container: targetContainer, 914 horizontal: horizontal, 915 rect: targetRect, 916 indicatorPos: bestGap.center 917 }; 918 } 919 920 function showDropIndicator(dropTarget) { 921 removeDropIndicator(); 922 if (!dropTarget) return; 923 924 if (dropTarget.position === "into") { 925 // Empty-container drop: container highlight only, no line 926 dropTarget.container.classList.add("wp-drop-container"); 927 return; 928 } 929 930 var rect = dropTarget.rect; 931 var containerRect = dropTarget.container.getBoundingClientRect(); 932 933 dropIndicator = document.createElement("div"); 934 dropIndicator.className = "wp-drop-indicator"; 935 dropIndicator.style.position = "absolute"; 936 dropIndicator.style.zIndex = "9999"; 937 dropIndicator.style.pointerEvents = "none"; 938 939 if (dropTarget.horizontal) { 940 dropIndicator.style.width = "3px"; 941 dropIndicator.style.top = containerRect.top + "px"; 942 dropIndicator.style.height = containerRect.height + "px"; 943 dropIndicator.style.left = (dropTarget.indicatorPos - 1) + "px"; 944 } else { 945 dropIndicator.style.height = "3px"; 946 dropIndicator.style.left = rect.left + "px"; 947 dropIndicator.style.width = rect.width + "px"; 948 dropIndicator.style.top = (dropTarget.indicatorPos - 1) + "px"; 949 } 950 951 document.body.appendChild(dropIndicator); 952 953 // Highlight container for cross-container moves 954 var draggedParent = dragState ? getBlockParent(dragState.el) : null; 955 if (dropTarget.container !== draggedParent) { 956 dropTarget.container.classList.add("wp-drop-container"); 957 } 958 } 959 960 function executeDrop(dropTarget, draggedEl) { 961 if (!dropTarget || !draggedEl) return; 962 963 if (dropTarget.position === "into") { 964 dropTarget.container.appendChild(draggedEl); 965 return; 966 } 967 968 var target = dropTarget.target; 969 var parentEl = target.parentElement; 970 if (!parentEl) return; 971 972 if (dropTarget.position === "before") { 973 parentEl.insertBefore(draggedEl, target); 974 } else { 975 if (target.nextSibling) { 976 parentEl.insertBefore(draggedEl, target.nextSibling); 977 } else { 978 parentEl.appendChild(draggedEl); 979 } 980 } 981 } 982 983 function getPopupHtml() { 984 var clone = container.cloneNode(true); 985 var indicators = clone.querySelectorAll(".wp-drop-indicator"); 986 for (var i = 0; i < indicators.length; i++) { 987 indicators[i].parentElement.removeChild(indicators[i]); 988 } 989 var allBlocks = clone.querySelectorAll("[data-wp-block]"); 990 for (var j = 0; j < allBlocks.length; j++) { 991 allBlocks[j].classList.remove("wp-selected", "wp-editing", "wp-dragging", "wp-drop-container", "wp-hovered", "wp-step-hidden", "wp-empty-container"); 992 allBlocks[j].removeAttribute("contenteditable"); 993 } 994 return clone.innerHTML; 995 } 996 997 // ========================================================================= 998 // Event handlers 999 // ========================================================================= 1000 1001 function isDraggable(el) { 1002 // Skip absolutely positioned elements (close buttons, overlays) 1003 var style = window.getComputedStyle(el); 1004 if (style.position === "absolute" || style.position === "fixed") return false;
1005 // Skip elements with data-wp-close 1006 if (el.hasAttribute("data-wp-close")) return false; 1007 return true; 1008 } 1009 1010 var TEXT_EDITABLE_TAGS = { H1: 1, H2: 1, H3: 1, H4: 1, H5: 1, H6: 1, P: 1, SPAN: 1, A: 1, BUTTON: 1 }; 1011 1012 function isTextEditable(el) { 1013 // Only allow known text-bearing tags (excludes img, input, hr, etc.) 1014 if (!TEXT_EDITABLE_TAGS[el.tagName]) return false; 1015 // Not editable if it's a container (has child blocks) 1016 if (el.querySelector("[data-wp-block]")) return false; 1017 // Not editable if it's a smart block 1018 if (el.hasAttribute("data-wp-smart")) return false; 1019 return true; 1020 } 1021 1022 function commitTextEdit() { 1023 if (!editingBlockId) return; 1024 var blockId = editingBlockId; 1025 var el = container.querySelector('[data-wp-block="' + blockId + '"]'); 1026 if (el) { 1027 el.removeAttribute("contenteditable"); 1028 el.classList.remove("wp-editing"); 1029 el.classList.add("wp-selected"); 1030 } 1031 editingBlockId = null; 1032 var html = getPopupHtml(); 1033 sendToParent({ type: "TEXT_EDIT_ENDED", blockId: blockId, updatedHtml: html }); 1034 } 1035 1036 function startTextEdit(el, e) { 1037 var blockId = el.getAttribute("data-wp-block"); 1038 if (!blockId) return; 1039 1040 // Already editing this block â ignore 1041 if (editingBlockId === blockId) return; 1042 1043 // If editing another block, commit first 1044 if (editingBlockId) commitTextEdit(); 1045 1046 editingBlockId = blockId; 1047 el.setAttribute("contenteditable", "true"); 1048 el.classList.remove("wp-selected"); 1049 el.classList.add("wp-editing"); 1050 el.focus(); 1051 1052 // Place cursor at click position 1053 if (e && document.caretRangeFromPoint) { 1054 var range = document.caretRangeFromPoint(e.clientX, e.clientY); 1055 if (range) { 1056 var sel = window.getSelection(); 1057 sel.removeAllRanges(); 1058 sel.addRange(range); 1059 } 1060 } else if (e && document.caretPositionFromPoint) { 1061 var pos = document.caretPositionFromPoint(e.clientX, e.clientY); 1062 if (pos) { 1063 var sel = window.getSelection(); 1064 var caretRange = document.createRange(); 1065 caretRange.setStart(pos.offsetNode, pos.offset); 1066 caretRange.collapse(true); 1067 sel.removeAllRanges(); 1068 sel.addRange(caretRange); 1069 } 1070 } 1071 1072 sendToParent({ type: "TEXT_EDIT_STARTED", blockId: blockId }); 1073 } 1074 1075 container.addEventListener("mousedown", function(e) { 1076 var block = findBlock(e.target); 1077 1078 // If editing and clicking outside the editing block, commit first 1079 if (editingBlockId) { 1080 var clickedBlockId = block ? block.getAttribute("data-wp-block") : null; 1081 if (clickedBlockId !== editingBlockId) { 1082 commitTextEdit(); 1083 } else { 1084 // Clicked inside the editing block â let contenteditable handle it 1085 return; 1086 } 1087 } 1088 1089 if (!block) return; 1090 1091 var blockId = block.getAttribute("data-wp-block"); 1092 1093 // Second click on an already-selected empty image placeholder â open replace modal. 1094 // First click selects (existing flow below). Filled images don't fire this. 1095 if ( 1096 selectedBlockId === blockId 1097 && block.classList.contains("wp-image") 1098 && !block.hasAttribute("src") 1099 ) { 1100 e.preventDefault(); 1101 sendToParent({ type: "IMAGE_PLACEHOLDER_CLICKED", blockId: blockId }); 1102 return; 1103 } 1104 1105 selectBlock(blockId); 1106 sendToParent({ type: "BLOCK_SELECTED", blockId: blockId }); 1107 sendBlockRect(blockId); 1108 1109 // Root block and non-draggable elements: select only, no drag 1110 var rootBlock = container.querySelector("[data-wp-block]"); 1111 if (block === rootBlock || !isDraggable(block)) { 1112 return; 1113 } 1114 1115 dragState = { 1116 el: block, 1117 startX: e.clientX, 1118 startY: e.clientY, 1119 started: false, 1120 currentDrop: null 1121 }; 1122 1123 e.preventDefault(); 1124 }); 1125 1126 var hoveredEl = null; 1127 document.addEventListener("mousemove", function(e) { 1128 if (!dragState) { 1129 var block = findBlock(e.target); 1130 if (hoveredEl && hoveredEl !== block) { 1131 hoveredEl.classList.remove("wp-hovered"); 1132 } 1133 if (block) { 1134 block.classList.add("wp-hovered"); 1135 hoveredEl = block; 1136 sendToParent({ type: "BLOCK_HOVERED", blockId: block.getAttribute("data-wp-block") }); 1137 } else { 1138 hoveredEl = null; 1139 sendToParent({ type: "BLOCK_HOVERED", blockId: null }); 1140 } 1141 return; 1142 } 1143 1144 var dx = e.clientX - dragState.startX; 1145 var dy = e.clientY - dragState.startY; 1146 1147 if (!dragState.started) { 1148 if (Math.sqrt(dx * dx + dy * dy) < DRAG_THRESHOLD) return; 1149 dragState.started = true; 1150 dragState.el.classList.add("wp-dragging"); 1151 document.body.classList.add("wp-drag-active"); 1152 } 1153 1154 var dropTarget = findDropTarget(e.clientX, e.clientY, dragState.el, false); 1155 showDropIndicator(dropTarget); 1156 dragState.currentDrop = dropTarget; 1157 }); 1158 1159 document.addEventListener("mouseup", function() { 1160 if (!dragState) return; 1161 1162 if (dragState.started && dragState.currentDrop) { 1163 executeDrop(dragState.currentDrop, dragState.el); 1164 removeDropIndicator(); 1165 dragState.el.classList.remove("wp-dragging"); 1166 document.body.classList.remove("wp-drag-active"); 1167 1168 refreshEmptyContainerMarkers(); 1169 var newHtml = getPopupHtml(); 1170 sendToParent({ type: "DRAG_COMPLETE", html: newHtml }); 1171 } else { 1172 if (dragState.el) { 1173 dragState.el.classList.remove("wp-dragging"); 1174 } 1175 document.body.classList.remove("wp-drag-active"); 1176 removeDropIndicator(); 1177 } 1178 1179 dragState = null; 1180 }); 1181 1182 document.addEventListener("keydown", function(e) { 1183 if (e.key === "Escape" && dragState) { 1184 dragState.el.classList.remove("wp-dragging"); 1185 document.body.classList.remove("wp-drag-active"); 1186 removeDropIndicator(); 1187 dragState = null; 1188 } 1189 }); 1190 1191 document.addEventListener("click", function(e) { 1192 e.preventDefault(); 1193 var block = findBlock(e.target); 1194 if (!block) { 1195 if (editingBlockId) { 1196 commitTextEdit(); 1197 } 1198 selectBlock(null); 1199 sendToParent({ type: "BLOCK_SELECTED", blockId: null }); 1200 } 1201 }); 1202 1203 container.addEventListener("dblclick", function(e) { 1204 var block = findBlock(e.target); 1205 if (!block) return; 1206 if (!isTextEditable(block)) return; 1207 1208 e.preventDefault(); 1209 startTextEdit(block, e); 1210 }); 1211 1212 document.addEventListener("keydown", function(e) { 1213 if (!editingBlockId) return; 1214 1215 if (e.key === "Escape") { 1216 e.preventDefault(); 1217 e.stopPropagation(); 1218 commitTextEdit(); 1219 return; 1220 } 1221 1222 // Block Cmd/Ctrl+B, Cmd/Ctrl+I, Cmd/Ctrl+U (no inline formatting) 1223 if ((e.metaKey || e.ctrlKey) && (e.key === "b" || e.key === "i" || e.key === "u")) { 1224 e.preventDefault(); 1225 return; 1226 } 1227 1228 // Normalize Enter to <br> 1229 if (e.key === "Enter" && !e.shiftKey) { 1230 e.preventDefault(); 1231 document.execCommand("insertLineBreak"); 1232 } 1233 }, true); 1234 1235 document.addEventListener("paste", function(e) { 1236 if (!editingBlockId) return; 1237 e.preventDefault(); 1238 var text = (e.clipboardData || window.clipboardData).getData("text/plain"); 1239 document.execCommand("insertText", false, text); 1240 }, true); 1241 1242 window.addEventListener("message", function(e) { 1243 var data = e.data; 1244 if (!data || data.source !== "wisepops-builder") return; 1245 var msg = data.payload; 1246 1247 switch (msg.type) { 1248 case "INIT": 1249 break; 1250 case "SET_DEVICE": 1251 // Device switching is handled by the parent resizing the iframe element â 1252 // no class toggling needed inside the document. 1253 break; 1254 case "SELECT_BLOCK": 1255 selectBlock(msg.blockId); 1256 if (msg.blockId) { 1257 sendBlockRect(msg.blockId); 1258 sendBlockComputedStyles(msg.blockId); 1259 } 1260 break; 1261 case "SHOW_STEP": 1262 showStep(msg.stepId); 1263 break; 1264 case "SET_BLOCK_PROPERTY": 1265 var styleEl = document.querySelector('[data-wp-block="' + msg.blockId + '"]'); 1266 if (styleEl) { 1267 if (msg.value === null) { 1268 styleEl.style.removeProperty(msg.property); 1269 } else { 1270 styleEl.style.setProperty(msg.property, msg.value); 1271 } 1272 sendToParent({ type: "HTML_UPDATED", html: getPopupHtml() }); 1273 sendBlockRect(msg.blockId); 1274 sendBlockComputedStyles(msg.blockId); 1275 } 1276 break; 1277 case "SET_BLOCK_ATTRIBUTE": 1278 var attrEl = document.querySelector('[data-wp-block="' + msg.blockId + '"]'); 1279 if (attrEl) { 1280 // null removes; "" sets an empty attribute 1281 // (e.g. alt="" for decorative images). 1282 if (msg.value === null) { 1283 attrEl.removeAttribute(msg.attribute); 1284 } else { 1285 attrEl.setAttribute(msg.attribute, msg.value); 1286 } 1287 sendToParent({ type: "HTML_UPDATED", html: getPopupHtml() }); 1288 } 1289 break; 1290 case "SET_BLOCK_ATTRIBUTES": 1291 var multiEl = document.querySelector('[data-wp-block="' + msg.blockId + '"]'); 1292 if (multiEl) { 1293 for (var i = 0; i < msg.attributes.length; i++) { 1294 var pair = msg.attributes[i]; 1295 // null removes; "" sets an empty attribute. 1296 if (pair.value === null) { 1297 multiEl.removeAttribute(pair.attribute); 1298 } else { 1299 multiEl.setAttribute(pair.attribute, pair.value); 1300 } 1301 } 1302 sendToParent({ type: "HTML_UPDATED", html: getPopupHtml() }); 1303 } 1304 break; 1305 case "COMMIT_TEXT_EDIT": 1306 commitTextEdit(); 1307 break; 1308 case "PALETTE_DRAG_MOVE": 1309 if (!paletteDragActive) { 1310 paletteDragActive = true; 1311 showDropZoneOutline(); 1312 document.body.classList.add("wp-drag-active"); 1313 } 1314 var moveTarget = findDropTarget(msg.x, msg.y, null, true); 1315 showDropIndicator(moveTarget); 1316 break; 1317 case "PALETTE_DRAG_DROP": 1318 var dropResult = findDropTarget(msg.x, msg.y, null, true); 1319 if (dropResult) { 1320 insertPaletteBlock(msg.snippet, msg.idPrefix, dropResult); 1321 } else { 1322 // No valid target â clear the drop indicator left over from 1323 // the last move event before tearing down drag state. 1324 removeDropIndicator(); 1325 } 1326 hideDropZoneOutline(); 1327 document.body.classList.remove("wp-drag-active"); 1328 paletteDragActive = false;
1329 break; 1330 case "PALETTE_DRAG_CANCEL": 1331 removeDropIndicator(); 1332 hideDropZoneOutline(); 1333 document.body.classList.remove("wp-drag-active"); 1334 paletteDragActive = false; 1335 break; 1336 } 1337 }); 1338 1339 var resizeTimer = null; 1340 var observer = new ResizeObserver(function() { 1341 clearTimeout(resizeTimer); 1342 resizeTimer = setTimeout(function() { 1343 if (selectedBlockId) { 1344 sendBlockRect(selectedBlockId); 1345 } 1346 }, 100); 1347 }); 1348 observer.observe(document.getElementById("popup-container")); 1349 1350 sendToParent({ type: "READY" }); 1351 initStepVisibility(); 1352 refreshEmptyContainerMarkers(); 1353})(); 1354`,Q="#3b82f6",Ve="cdn.wisepops.net",Ue=(e,n)=>e.replaceAll(`</${n}`,`<\\/${n}`),So=(e,n,o)=>`<!DOCTYPE html> 1355<html data-wp-builder> 1356<head> 1357<meta charset="utf-8"> 1358<meta name="viewport" content="width=device-width, initial-scale=1"> 1359<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline' https://fonts.googleapis.com; script-src 'unsafe-inline'; img-src data: blob: https://${Ve}; font-src data: https://fonts.gstatic.com https://${Ve};"> 1360<style> 1361*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } 1362html, body { width: 100%; height: 100%; overflow: hidden; background: transparent; } 1363body { display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } 1364#popup-container { position: relative; } 1365[data-wp-block] { cursor: pointer; transition: outline 0.1s ease; } 1366[data-wp-block].wp-hovered:not(.wp-selected) { outline: 2px dashed rgba(59, 130, 246, 0.4); outline-offset: -2px; } 1367[data-wp-block].wp-selected { outline: 2px solid ${Q}; outline-offset: -2px; } 1368[contenteditable]:focus { outline: none; } 1369[data-wp-block].wp-editing { outline: 2px dashed ${Q}; outline-offset: -2px; cursor: text; } 1370[data-wp-block].wp-dragging { opacity: 0.3; border: 2px dashed ${Q}; } 1371body.wp-drag-active [data-wp-block]:not(.wp-dragging) { outline: none !important; } 1372body.wp-drag-active [data-wp-block] { cursor: grabbing; } 1373body.wp-drag-active { user-select: none; cursor: grabbing; } 1374.wp-drop-indicator { height: 3px; background: ${Q}; border-radius: 2px; box-shadow: 0 0 8px rgba(59, 130, 246, 0.4); pointer-events: none; position: relative; z-index: 9999; } 1375.wp-drop-container { outline: 2px solid rgba(59, 130, 246, 0.4) !important; outline-offset: -2px; background: rgba(59, 130, 246, 0.03); } 1376.wp-step-hidden { display: none !important; } 1377.wp-empty-container { min-width: 80px; min-height: 60px; outline: 1px dashed #c8c8d0; outline-offset: -1px; } 1378.wp-empty-container.wp-drop-container { outline-color: #3b82f6 !important; background: rgba(59, 130, 246, 0.06); } 1379/* During drag, outline every container so users can see drop targets that contain only one or two children. Excludes the drop target itself (which keeps its brighter wp-drop-container highlight) and the dragged element. */ 1380body.wp-drag-active [data-wp-block]:has(> [data-wp-block]):not(.wp-dragging):not(.wp-drop-container) { outline: 1px dashed rgba(59, 130, 246, 0.35) !important; outline-offset: -1px; } 1381body.wp-drag-active .wp-empty-container:not(.wp-dragging):not(.wp-drop-container) { outline: 1px dashed rgba(59, 130, 246, 0.35) !important; outline-offset: -1px; } 1382</style> 1383<style>${Ue(n,"style")}</style> 1384</head> 1385<body> 1386<div id="popup-container">${e}</div> 1387<script>${Ue(o,"script")}<\/script> 1388<script> 1389${io} 1390${Co()} 1391<\/script> 1392</body> 1393</html>`,re={nodes:[],edges:[]},To=e=>e.replaceAll(/[_-]+/g," ").replaceAll(/([a-z])([A-Z])/g,"$1 $2").replaceAll(/\b\w/g,n=>n.toUpperCase()).trim(),Ce=e=>{if(!e)return re;const o=new DOMParser().parseFromString(e,"text/html"),a=o.querySelectorAll("[data-wp-step]");if(a.length<2)return re;const r=o.querySelector("[data-wp-step-initial]")?.getAttribute("data-wp-step")??a[0]?.getAttribute("data-wp-step")??null,i=new Set,g=[];if(a.forEach(f=>{const p=f.dataset.wpStep;!p||i.has(p)||(i.add(p),g.push({id:p,label:To(p),isInitial:p===r}))}),g.length<2)return re;const c=new Set,d=[];return a.forEach(f=>{const p=f.dataset.wpStep;if(!p)return;f.querySelectorAll("[data-wp-goto]").forEach(k=>{const b=k.dataset.wpGoto;if(!b||!i.has(b))return;const u=`${p}->${b}`;c.has(u)||(c.add(u),d.push({from:p,to:b}))})}),{nodes:g,edges:d}},Io=x.nav`
1394 align-items: center; 1395 border-bottom: 1px solid #e5e7eb; 1396 display: flex; 1397 flex-direction: row; 1398 flex-shrink: 0; 1399 gap: 6px; 1400 height: 44px; 1401 justify-content: center; 1402 overflow-x: auto; 1403 padding: 0 12px; 1404 1405 &::-webkit-scrollbar { 1406 height: 4px; 1407 } 1408 1409 &::-webkit-scrollbar-thumb { 1410 background: #d1d5db; 1411 border-radius: 2px; 1412 } 1413 1414 &::-webkit-scrollbar-track { 1415 background: transparent; 1416 } 1417`,Bo=x.button` 1418 align-items: center; 1419 background: ${({$active:e})=>e?"#eef2ff":"transparent"}; 1420 border: 1px solid ${({$active:e})=>e?"#6366f1":"#e0e0e0"}; 1421 border-radius: 12px; 1422 color: ${({$active:e})=>e?"#6366f1":"#666"}; 1423 cursor: pointer; 1424 display: flex; 1425 flex-shrink: 0; 1426 font-size: 12px; 1427 font-weight: ${({$active:e})=>e?500:400}; 1428 gap: 4px; 1429 max-width: 120px; 1430 padding: 4px 12px; 1431 transition: 1432 background 150ms ease, 1433 border-color 150ms ease, 1434 color 150ms ease; 1435 1436 &:hover { 1437 background: ${({$active:e})=>e?"#eef2ff":"#f5f5f5"}; 1438 } 1439`,Do=x.span` 1440 background: currentcolor; 1441 border-radius: 50%; 1442 flex-shrink: 0; 1443 height: 5px; 1444 width: 5px; 1445`,Lo=x.span` 1446 overflow: hidden; 1447 text-overflow: ellipsis; 1448 white-space: nowrap; 1449`,Ro=({node:e,isActive:n,onClick:o})=>{const a=s.useCallback(()=>{o(e.id)},[o,e.id]);return t.jsxs(Bo,{$active:n,onClick:a,title:e.label,children:[e.isInitial?t.jsx(Do,{}):null,t.jsx(Lo,{children:e.label})]})},Po=({html:e,currentStepId:n,onStepClick:o})=>{const a=s.useMemo(()=>Ce(e),[e]);return a.nodes.length===0?null:t.jsx(Io,{children:a.nodes.map(l=>t.jsx(Ro,{isActive:l.id===n,node:l,onClick:o},l.id))})},Ao=x.div` 1450 align-items: center; 1451 background: #eeeef0; 1452 display: flex; 1453 flex: 1; 1454 justify-content: center; 1455 overflow: hidden; 1456 position: relative; 1457`,_o=x.iframe` 1458 background: #fff; 1459 border: 1px solid #e0e0e0; 1460 border-radius: 8px; 1461 box-shadow: 0 2px 12px rgb(0 0 0 / 6%); 1462 display: block; 1463 transition: 1464 width 0.3s ease, 1465 height 0.3s ease; 1466 1467 /* Iframe IS the simulated viewport. Mobile: phone-sized so 100vw inside 1468 resolves to the simulated phone width. Desktop: roomy laptop-sized, 1469 capped at 1440x900. */ 1470 ${e=>e.$device==="mobile"?Pe` 1471 height: 720px; 1472 max-height: calc(100% - 80px); 1473 width: 375px; 1474 `:Pe` 1475 height: calc(100% - 80px); 1476 max-height: 900px; 1477 max-width: 1440px; 1478 width: calc(100% - 80px); 1479 `} 1480`,$o=x.div` 1481 display: flex; 1482 flex: 1; 1483 flex-direction: column; 1484 overflow: hidden; 1485`,Mo=({brandVisual:e,canvasRef:n,children:o,currentStepId:a,device:l,doc:r,iframeRef:i,onMessage:g,onStepClick:c,selectedBlockId:d})=>{const f=s.useRef(!1),p=s.useRef({}),w=s.useCallback(()=>{if(!f.current||!i.current)return;const b=p.current;b.device!==l&&(_(i.current,{type:"SET_DEVICE",device:l}),b.device=l),b.selectedBlockId!==d&&(_(i.current,{type:"SELECT_BLOCK",blockId:d}),b.selectedBlockId=d),a&&b.currentStepId!==a&&(_(i.current,{type:"SHOW_STEP",stepId:a}),b.currentStepId=a)},[l,d,a,i]);s.useEffect(()=>{w()},[w]),s.useEffect(()=>{const b=u=>{if(u.origin!=="null")return;const v=ao(u);v&&(v.type==="READY"&&(f.current=!0,w()),g(v))};return window.addEventListener("message",b),()=>{window.removeEventListener("message",b)}},[g,w]);const[k]=s.useState(()=>{const b=dn(e);return So(r.html,`${b} 1486${jo} 1487${r.css}`,r.js)});return t.jsxs($o,{children:[t.jsx(Po,{currentStepId:a,html:r.html,onStepClick:c}),t.jsxs(Ao,{ref:n,children:[t.jsx(_o,{$device:l,ref:i,sandbox:"allow-scripts",srcDoc:k,title:"Popup preview"}),o]})]})},Ge=220,We=24,we=12,Oo=8,Ho=(e,n,o,a)=>{if(e===null)return null;const r=o.left+e.left+e.width+We;let i,g;r+Ge+we>n.width?(i=o.left-Ge-We,g="left"):(i=r,g="right");let c;return c=e.height>a?o.top+e.top+Oo:o.top+e.top+e.height/2-a/2,c=Math.max(we,c),c=Math.min(n.height-a-we,c),{top:c,left:i,side:g}},No=(e,n,o,a)=>s.useMemo(()=>n===null||o===null?null:Ho(e,n,o,a),[e,n,o,a]),zo=Xt` 1488 from { 1489 opacity: 0; 1490 transform: translateX(8px); 1491 } 1492 to { 1493 opacity: 1; 1494 transform: translateX(0); 1495 } 1496`,Vo=x.div` 1497 animation: ${zo} 0.2s ease; 1498 background: #fff; 1499 border: 1px solid #e8e8ec; 1500 border-radius: 12px; 1501 box-shadow: 0 4px 24px rgb(0 0 0 / 12%); 1502 left: ${({$left:e})=>e}px; 1503 padding: 16px; 1504 position: absolute; 1505 top: ${({$top:e})=>e}px; 1506 width: 220px; 1507 z-index: 10; 1508`,Uo=x.div`
1509 align-items: center; 1510 display: flex; 1511 flex-direction: row; 1512 gap: 6px; 1513 margin-bottom: 14px; 1514`,Go=x.div` 1515 background: #6366f1; 1516 border-radius: 50%; 1517 height: 6px; 1518 width: 6px; 1519`,Wo=x.span` 1520 color: #6366f1; 1521 font-size: 10px; 1522 font-weight: 700; 1523 letter-spacing: 0.5px; 1524 text-transform: uppercase; 1525`,M=x.div` 1526 color: #aaa; 1527 font-size: 10px; 1528 font-weight: 600; 1529 letter-spacing: 0.3px; 1530 margin-bottom: 8px; 1531 margin-top: 14px; 1532 text-transform: uppercase; 1533 1534 &:first-child { 1535 margin-top: 0; 1536 } 1537`,E=x.div` 1538 margin-bottom: 10px; 1539`,j=x.div` 1540 color: #888; 1541 font-size: 11px; 1542 margin-bottom: 4px; 1543`,R=x.input` 1544 background: #f7f7f9; 1545 border: 1px solid #e5e5ea; 1546 border-radius: 8px; 1547 box-sizing: border-box; 1548 color: #333; 1549 font-size: 12px; 1550 outline: none; 1551 padding: 7px 10px; 1552 transition: border-color 0.15s; 1553 width: 100%; 1554 1555 &:focus { 1556 border-color: #6366f1; 1557 } 1558`,ae=x.select` 1559 appearance: none; 1560 background: #f7f7f9; 1561 background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); 1562 background-position: right 10px center; 1563 background-repeat: no-repeat; 1564 border: 1px solid #e5e5ea; 1565 border-radius: 8px; 1566 box-sizing: border-box; 1567 color: #333; 1568 cursor: pointer; 1569 font-size: 12px; 1570 outline: none; 1571 padding: 7px 10px; 1572 transition: border-color 0.15s; 1573 width: 100%; 1574 1575 &:focus { 1576 border-color: #6366f1; 1577 } 1578`,O=x.div` 1579 border: 1px solid #e5e5ea; 1580 border-radius: 8px; 1581 display: flex; 1582 flex-direction: row; 1583 overflow: hidden; 1584`,H=x.button` 1585 background: ${({$active:e})=>e?"#6366f1":"#f7f7f9"}; 1586 border: none; 1587 border-right: 1px solid #e5e5ea; 1588 color: ${({$active:e})=>e?"#fff":"#888"}; 1589 cursor: pointer; 1590 flex: 1; 1591 font-size: 11px; 1592 padding: 6px 0; 1593 text-align: center; 1594 transition: all 0.15s; 1595 1596 &:last-child { 1597 border-right: none; 1598 } 1599 1600 &:hover { 1601 background: ${({$active:e})=>e?"#6366f1":"#ededf0"}; 1602 } 1603`;x.div` 1604 align-items: center; 1605 display: flex; 1606 flex-direction: row; 1607 gap: 8px; 1608`;x.input.attrs({type:"color"})` 1609 background: none; 1610 border: 2px solid #e5e5ea; 1611 border-radius: 6px; 1612 cursor: pointer; 1613 height: 28px; 1614 padding: 0; 1615 width: 28px; 1616 1617 &::-webkit-color-swatch-wrapper { 1618 padding: 0; 1619 } 1620 1621 &::-webkit-color-swatch { 1622 border: none; 1623 border-radius: 4px; 1624 } 1625`;const Fo=x.svg` 1626 height: 100%; 1627 left: 0; 1628 pointer-events: none; 1629 position: absolute; 1630 top: 0; 1631 width: 100%; 1632 z-index: 5; 1633`,Ko=[{label:"Auto",value:"auto"},{label:"Start",value:"flex-start"},{label:"Center",value:"center"},{label:"End",value:"flex-end"},{label:"Stretch",value:"stretch"}],qo=e=>e==="mobile"?"--wp-mobile-align-self":"--wp-align-self",F=({blockId:e,mode:n,value:o,computedAlignSelf:a,onPropertyChange:l})=>{const r=o||a||"auto";return t.jsxs(E,{children:[t.jsx(j,{children:"Align self"}),t.jsx(O,{children:Ko.map(i=>t.jsx(H,{$active:r===i.value,onClick:()=>{l(e,qo(n),i.value==="auto"?null:i.value)},children:i.label},i.value))})]})},Xo=x.div` 1634 align-items: center; 1635 display: flex; 1636 flex-wrap: wrap; 1637 gap: 6px; 1638`,Zo=x.input` 1639 background: ${({$readOnly:e})=>e===!0?"#f9fafb":"#fff"}; 1640 border: 1px solid #e8e8ec; 1641 border-radius: 6px; 1642 color: ${({$readOnly:e})=>e===!0?"#6b7280":"inherit"}; 1643 font: 1644 12px ui-monospace, 1645 monospace; 1646 outline: none; 1647 padding: 4px 8px; 1648 width: 84px; 1649 1650 &:focus { 1651 border-color: #6366f1; 1652 } 1653`,Yo=x.button` 1654 background: #fff; 1655 border: 1px solid #e8e8ec; 1656 border-radius: 6px; 1657 color: #6b7280; 1658 cursor: pointer; 1659 font-size: 11px; 1660 padding: 4px 8px; 1661`,Fe=({value:e,onHexChange:n,onReset:o,readOnly:a})=>{const l=s.useRef(null),[r,i]=s.useState(e);return s.useEffect(()=>{document.activeElement!==l.current&&i(e)},[e]),t.jsxs(Xo,{children:[t.jsx(Zo,{$readOnly:a,"data-color-hex-in
1661put":!0,onChange:g=>{a!==!0&&(i(g.target.value),n(g.target.value))},placeholder:"#000000",readOnly:a,ref:l,value:r}),e?t.jsx(Yo,{onClick:o,type:"button",children:"Reset"}):null]})},Jo=x.div` 1662 align-items: flex-start; 1663 display: flex; 1664 gap: 8px; 1665 margin-bottom: 10px; 1666`,Ke=x.div` 1667 align-items: center; 1668 display: flex; 1669 flex-direction: column; 1670 gap: 3px; 1671`,ot=x.button` 1672 background: ${({$color:e})=>pn(e)??"transparent"}; 1673 border: 1px solid #e8e8ec; 1674 border-radius: 6px; 1675 cursor: pointer; 1676 height: 28px; 1677 outline: ${({$active:e})=>e?"2px solid #4f46e5":"none"}; 1678 outline-offset: 2px; 1679 padding: 0; 1680 width: 28px; 1681`,Qo=x(ot)` 1682 background: conic-gradient( 1683 #ef4444, 1684 #f59e0b, 1685 #eab308, 1686 #22c55e, 1687 #3b82f6, 1688 #8b5cf6, 1689 #ef4444 1690 ); 1691`,er=x.div` 1692 background: #e5e7eb; 1693 margin: 4px 4px 12px; 1694 width: 1px; 1695`,qe=x.div` 1696 color: ${({$active:e})=>e?"#4f46e5":"#6b7280"}; 1697 font-size: 9px; 1698 font-weight: ${({$active:e})=>e?600:400}; 1699`,tr=x.div` 1700 color: #9ca3af; 1701 font-size: 11px; 1702 line-height: 1.5; 1703 margin-top: 12px; 1704 1705 a { 1706 color: #4f46e5; 1707 } 1708`,Xe=[{key:"primary",label:"primary",role:"primary"},{key:"accent",label:"accent",role:"accent"},{key:"background",label:"bg",role:"bg"},{key:"text",label:"text",role:"text"},{key:"text_muted",label:"muted",role:"text_muted"}],nr=(e,n)=>n!==null&&e.toLowerCase()===n.toLowerCase(),W=({value:e,onColorChange:n,onReset:o,brandColors:a,releaseFlagOn:l})=>{const r=s.useCallback(c=>{n(c)},[n]);if(a===null)return t.jsxs("div",{"data-color-picker":!0,children:[t.jsx(Fe,{onHexChange:r,onReset:o,value:e}),l===!0?t.jsxs(tr,{children:["Tip: ",t.jsx("a",{href:"../settings/brand",children:"Set up your brand"})," ","to use color swatches across all popups."]}):null]});const i=Xe.find(c=>nr(e,a[c.key]))?.role??null,g=i===null&&e!=="";return t.jsxs("div",{"data-color-picker":!0,children:[t.jsxs(Jo,{children:[Xe.map(({key:c,label:d,role:f})=>{const p=a[c];if(p===null)return null;const w=i===f;return t.jsxs(Ke,{children:[t.jsx(ot,{$active:w,$color:p,"data-active":w,"data-role":f,onClick:()=>{n(p,f)},type:"button"}),t.jsx(qe,{$active:w,children:d})]},c)}),t.jsx(er,{}),t.jsxs(Ke,{children:[t.jsx(Qo,{$active:g,$color:"transparent","data-active":g,"data-role":"custom",onClick:c=>{c.currentTarget.closest("[data-color-picker]")?.querySelector("[data-color-hex-input]")?.focus()},type:"button"}),t.jsx(qe,{$active:g,children:"custom"})]})]}),t.jsx(Fe,{onHexChange:r,onReset:o,value:e})]})},or=()=>{},rr=()=>or,rt=s.createContext(rr),I=(e,n)=>{const o=s.useRef(void 0),a=s.useRef(void 0),l=s.useRef(e);l.current=e,s.useEffect(()=>()=>{clearTimeout(o.current)},[]);const r=s.useCallback((...c)=>{clearTimeout(o.current),a.current=c,o.current=setTimeout(()=>{o.current=void 0;const d=a.current;a.current=void 0,d&&l.current(...d)},n)},[n]),i=s.useCallback(()=>{if(o.current===void 0)return;clearTimeout(o.current),o.current=void 0;const c=a.current;a.current=void 0,c&&l.current(...c)},[]),g=s.useContext(rt);return s.useEffect(()=>g(i),[g,i]),{set:r,flush:i}},z=(e,n)=>n==="mobile"?e.replace("--wp-","--wp-mobile-"):e,ar=({blockId:e,block:n,mode:o,computedStyles:a,stepGraph:l,onPropertyChange:r,onAttributeChange:i,brandColors:g,releaseFlagOn:c})=>{const d=o==="mobile"?n.mobile:n,f=d.radius||a.borderRadius||(o==="mobile"?"(uses desktop)":"e.g. 8px"),p=d.padding||a.padding||(o==="mobile"?"(uses desktop)":"e.g. 12px 24px"),{set:w}=I(i,300),{set:k}=I(r,300),{set:b}=I(r,300),{set:u}=I(r,300),{set:v}=I(r,300),{set:T}=I(r,300),B=s.useCallback(y=>{switch(y){case"link":{i(e,"data-wp-action","link"),i(e,"data-wp-goto",null);break}case"goto":{const $=l.nodes[0];i(e,"data-wp-action","goto"),i(e,"href",null),$&&i(e,"data-wp-goto",$.id);break}case"close":{i(e,"data-wp-action","close"),i(e,"data-wp-goto",null),i(e,"href",null);break}}},[e,i,l.nodes]),L=s.useCallback((y,$)=>{k(e,z("--wp-color",o),y||null),i(e,"data-wp-bk-color",$===void 0?null:$)},[e,o,i]),S=s.useCallback(()=>{r(e,z("--wp-color",o),null),i(e,"data-wp-bk-color",null)},[e,o,r,i]),P=s.useCallback((y,$)=>{b(e,z("--wp-bg",o),y||null),i(e,"data-wp-bk-background",$===void 0?null:$)},[e,o,i]),C=s.useCallback(()=>{r(e,z("--wp-bg",o),null),i(e,"data-wp-bk-background",null)},[e,o,r,i]);return t.jsxs(t.Fragment,{children:[t.jsx(M,{children:"Action"}),t.jsxs(E,{children:[t.jsx(j,{children:"On click"}
1708),t.jsxs(ae,{defaultValue:n.action.type,onChange:y=>{B(y.target.value)},children:[t.jsx("option",{value:"link",children:"Open link"}),l.nodes.length>0&&t.jsx("option",{value:"goto",children:"Go to step"}),t.jsx("option",{value:"close",children:"Close popup"})]})]}),n.action.type==="link"&&t.jsxs(E,{children:[t.jsx(j,{children:"Link URL"}),t.jsx(R,{defaultValue:n.action.href,onChange:y=>{w(e,"href",y.target.value)},placeholder:"https://..."})]}),n.action.type==="goto"&&t.jsxs(E,{children:[t.jsx(j,{children:"Target step"}),t.jsx(ae,{defaultValue:n.action.stepId,onChange:y=>{i(e,"data-wp-goto",y.target.value)},children:l.nodes.map(y=>t.jsx("option",{value:y.id,children:y.label},y.id))})]}),t.jsx(M,{children:"Style"}),t.jsxs(E,{children:[t.jsx(j,{children:"Text color"}),t.jsx(W,{brandColors:g,onColorChange:L,onReset:S,releaseFlagOn:c,value:d.color})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Background"}),t.jsx(W,{brandColors:g,onColorChange:P,onReset:C,releaseFlagOn:c,value:d.bg})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Radius"}),t.jsx(R,{defaultValue:d.radius,onChange:y=>{u(e,z("--wp-radius",o),y.target.value||null)},placeholder:f})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Padding"}),t.jsx(R,{defaultValue:d.padding,onChange:y=>{v(e,z("--wp-padding",o),y.target.value||null)},placeholder:p})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Max width"}),t.jsx(R,{defaultValue:d.maxWidth,onChange:y=>{T(e,z("--wp-max-width",o),y.target.value||null)},placeholder:d.maxWidth||"e.g. 200px"})]}),t.jsx(F,{blockId:e,computedAlignSelf:a.alignSelf??"",mode:o,onPropertyChange:r,value:d.alignSelf})]})},ir=({blockRect:e,iframeOffset:n,position:o,panelHeight:a})=>{if(!e||!n)return null;const l=n.left+e.left+e.width+2,r=n.top+e.top+e.height/2,i=o.side==="right"?o.left-2:o.left+220+2,g=o.top+Math.min(30,a/2),c=(l+i)/2;return t.jsx(Fo,{children:t.jsx("path",{d:`M ${l} ${r} C ${c} ${r}, ${c} ${g}, ${i} ${g}`,fill:"none",opacity:"0.35",stroke:"#6366f1",strokeDasharray:"4 3",strokeWidth:"1.5"})})},lr=[{label:"Stack",value:"stack"},{label:"Row",value:"row"},{label:"Row scroll",value:"row-scroll"}],sr=e=>e==="mobile"?"--wp-mobile-layout":"--wp-layout",cr=(e,n,o,a)=>e||(n==="row"?o==="nowrap"&&a==="auto"?"row-scroll":"row":"stack"),at=({blockId:e,mode:n,value:o,computedDirection:a,computedWrap:l,computedOverflow:r,onPropertyChange:i})=>{const g=cr(o,a,l,r);return t.jsxs(E,{children:[t.jsx(j,{children:"Layout"}),t.jsx(O,{children:lr.map(c=>t.jsx(H,{$active:g===c.value,onClick:()=>{i(e,sr(n),c.value==="stack"?null:c.value)},children:c.label},c.value))})]})},dr=[{label:"Start",value:"flex-start"},{label:"Center",value:"center"},{label:"End",value:"flex-end"},{label:"Stretch",value:"stretch"}],pr=[{label:"Start",value:"flex-start"},{label:"Center",value:"center"},{label:"End",value:"flex-end"},{label:"Between",value:"space-between"},{label:"Around",value:"space-around"}],K=(e,n)=>n==="mobile"?e.replace("--wp-","--wp-mobile-"):e,ur=({blockId:e,block:n,mode:o,computedStyles:a,onPropertyChange:l})=>{const r=o==="mobile"?n.mobile:n,{set:i}=I(l,300),{set:g}=I(l,300),{set:c}=I(l,300),d=r.align||a.alignItems||"stretch",f=r.justify||a.justifyContent||"flex-start";return t.jsxs(t.Fragment,{children:[t.jsx(M,{children:"Layout"}),t.jsxs(E,{children:[t.jsx(j,{children:"Padding"}),t.jsx(R,{defaultValue:r.padding,onChange:p=>{i(e,K("--wp-padding",o),p.target.value||null)},placeholder:r.padding||"e.g. 16px"})]}),t.jsx(at,{blockId:e,computedDirection:a.flexDirection??"",computedOverflow:a.overflowX??"",computedWrap:a.flexWrap??"",mode:o,onPropertyChange:l,value:r.layout}),t.jsxs(E,{children:[t.jsx(j,{children:"Gap"}),t.jsx(R,{defaultValue:r.gap,onChange:p=>{g(e,K("--wp-gap",o),p.target.value||null)},placeholder:r.gap||"e.g. 12px"})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Align items"}),t.jsx(O,{children:dr.map(p=>t.jsx(H,{$active:d===p.value,onClick:()=>{l(e,K("--wp-align",o),p.value==="stretch"?null:p.value)},children:p.label},p.value))})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Justify content"}),t.jsx(O,{children:pr.map(p=>t.jsx(H,{$active:f===p.value,onClick:()=>{l(e,K("--wp-justify",o),p.value==="flex-start"?null:p.value)},children:p.label},p.value))})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Max width"}),t.jsx(R,{defaultValue:r.maxWidth,onChange:p=>{c(e,K("--wp-max-width",o),p.target.value||null)},placeholder:r.maxWidth||"e.g. 100%"})]}),t.jsx(F,{blockId:e,computedAlignSelf:a.alignSelf??"",mode:o,onPropertyChange:l,value:r.alignSelf})]})},gr=[{label:"Regular",value:"400"},{label:"Bold",value:"700"}],ee=(e,n)=>n==="mobile"?e.replace("--wp-","--wp-mobile-"):e,fr=({blockId:e,block:n,mode:o,computedStyles:a,onPropertyChange:l,onAttributeChange:r,brandColors:i,releaseFlagOn:g})=>{const c=o==="mobile"?n.mobile:n,{set:d}=I(l,300),{set:f}=I(l,300),p=c.fontSize||a.fontSize||(o==="mobile"?"(uses desktop)":"e.g. 32px"),w=c.fontWeight||a.fontWeight,k=s.useCallback((u,v)=>{f(e,ee("--wp-color",o),u||null),r(e,"data-wp-bk-color",v===void 0?null:v)},[e,o,r]),b=s.useCallback(()=>
1708{l(e,ee("--wp-color",o),null),r(e,"data-wp-bk-color",null)},[e,o,l,r]);return t.jsxs(t.Fragment,{children:[t.jsx(M,{children:"Typography"}),t.jsxs(E,{children:[t.jsx(j,{children:"Font size"}),t.jsx(R,{defaultValue:c.fontSize,onChange:u=>{d(e,ee("--wp-font-size",o),u.target.value||null)},placeholder:p})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Font weight"}),t.jsx(O,{children:gr.map(u=>t.jsx(H,{$active:w===u.value,onClick:()=>{l(e,ee("--wp-font-weight",o),u.value)},children:u.label},u.value))})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Text color"}),t.jsx(W,{brandColors:i,onColorChange:k,onReset:b,releaseFlagOn:g,value:c.color})]}),t.jsx(F,{blockId:e,computedAlignSelf:a.alignSelf??"",mode:o,onPropertyChange:l,value:c.alignSelf})]})},hr=[{label:"Auto",value:"auto"},{label:"1:1 (square)",value:"1/1"},{label:"4:3",value:"4/3"},{label:"3:4",value:"3/4"},{label:"16:9",value:"16/9"},{label:"9:16",value:"9/16"}],xr=[{label:"Cover (fill, may crop)",value:"cover"},{label:"Contain (fit, may letterbox)",value:"contain"}],te=(e,n)=>n==="mobile"?e.replace("--wp-","--wp-mobile-"):e,br=({blockId:e,block:n,mode:o,computedStyles:a,onPropertyChange:l,onAttributeChange:r,onOpenReplace:i,onOpenRecrop:g})=>{const c=o==="mobile"?n.mobile:n,d=n.src!=="",{set:f}=I(r,300),{set:p}=I(l,300),{set:w}=I(l,300),k=c.radius||a.borderRadius||(o==="mobile"?"(uses desktop)":"e.g. 8px"),b=c.maxWidth||a.maxWidth||(o==="mobile"?"(uses desktop)":"e.g. 100%");return t.jsxs(t.Fragment,{children:[t.jsx(gn,{imageRef:d?{path:n.src,size:0,crop:null}:null,label:"",onOpenRecrop:()=>{g(e)},onOpenReplace:()=>{i(e)},srcOverride:n.src}),t.jsxs(E,{children:[t.jsx(j,{children:"Alt text"}),t.jsx(R,{defaultValue:n.alt,onChange:u=>{f(e,"alt",u.target.value)},placeholder:'Describe this image (alt="" allowed for decorative)'})]}),t.jsx(M,{children:"Style"}),t.jsxs(E,{children:[t.jsx(j,{children:"Aspect ratio"}),t.jsx(ae,{defaultValue:c.aspectRatio||"auto",onChange:u=>{l(e,te("--wp-aspect-ratio",o),u.target.value==="auto"?null:u.target.value)},children:hr.map(u=>t.jsx("option",{value:u.value,children:u.label},u.value))})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Object fit"}),t.jsx(ae,{defaultValue:c.objectFit||"cover",onChange:u=>{l(e,te("--wp-object-fit",o),u.target.value==="cover"?null:u.target.value)},children:xr.map(u=>t.jsx("option",{value:u.value,children:u.label},u.value))})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Radius"}),t.jsx(R,{defaultValue:c.radius,onChange:u=>{p(e,te("--wp-radius",o),u.target.value||null)},placeholder:k})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Max width"}),t.jsx(R,{defaultValue:c.maxWidth,onChange:u=>{w(e,te("--wp-max-width",o),u.target.value||null)},placeholder:b})]}),t.jsx(F,{blockId:e,computedAlignSelf:a.alignSelf??"",mode:o,onPropertyChange:l,value:c.alignSelf})]})},Ze=e=>e==="mobile"?"--wp-mobile-color":"--wp-color",wr=({blockId:e,block:n,mode:o,computedStyles:a,onPropertyChange:l,onAttributeChange:r,brandColors:i,releaseFlagOn:g})=>{const c=o==="mobile"?n.mobile:n,{set:d}=I(r,300),{set:f}=I(l,300),p=s.useCallback((k,b)=>{f(e,Ze(o),k||null),r(e,"data-wp-bk-color",b===void 0?null:b)},[e,o,r]),w=s.useCallback(()=>{l(e,Ze(o),null),r(e,"data-wp-bk-color",null)},[e,o,l,r]);return t.jsxs(t.Fragment,{children:[t.jsx(M,{children:"Action"}),t.jsxs(E,{children:[t.jsx(j,{children:"URL"}
1708),t.jsx(R,{defaultValue:n.href,onChange:k=>{d(e,"href",k.target.value)},placeholder:"https://..."})]}),t.jsx(M,{children:"Typography"}),t.jsxs(E,{children:[t.jsx(j,{children:"Text color"}),t.jsx(W,{brandColors:i,onColorChange:p,onReset:w,releaseFlagOn:g,value:c.color})]}),t.jsx(F,{blockId:e,computedAlignSelf:a.alignSelf??"",mode:o,onPropertyChange:l,value:c.alignSelf})]})},vr=x.div` 1709 background: #f1f1f4; 1710 border-radius: 6px; 1711 display: flex; 1712 margin-bottom: 8px; 1713 padding: 2px; 1714`,Ye=x.button` 1715 background: ${e=>e.$active?"#fff":"transparent"}; 1716 border: none; 1717 border-radius: 4px; 1718 box-shadow: ${e=>e.$active?"0 1px 2px rgba(0,0,0,0.06)":"none"}; 1719 color: ${e=>e.$active?"#111827":"#6b7280"}; 1720 cursor: pointer; 1721 flex: 1; 1722 font-size: 11px; 1723 font-weight: 500; 1724 padding: 4px 8px; 1725`,mr=({mode:e,onChange:n})=>t.jsxs(vr,{children:[t.jsx(Ye,{$active:e==="desktop",onClick:()=>{n("desktop")},type:"button",children:"Desktop"}),t.jsx(Ye,{$active:e==="mobile",onClick:()=>{n("mobile")},type:"button",children:"Mobile"})]}),q=(e,n)=>n==="mobile"?e.replace("--wp-","--wp-mobile-"):e,ve=(e,n,o)=>e||n||o,kr=({blockId:e,block:n,mode:o,computedStyles:a,onPropertyChange:l,onAttributeChange:r,brandColors:i,releaseFlagOn:g})=>{const c=o==="mobile"?n.mobile:n,{set:d}=I(l,300),{set:f}=I(l,300),{set:p}=I(l,300),{set:w}=I(l,300),k=s.useCallback((u,v)=>{p(e,q("--wp-bg",o),u||null),r(e,"data-wp-bk-background",v===void 0?null:v)},[e,o,r]),b=s.useCallback(()=>{l(e,q("--wp-bg",o),null),r(e,"data-wp-bk-background",null)},[e,o,l,r]);return t.jsxs(t.Fragment,{children:[t.jsx(M,{children:"Popup"}),t.jsxs(E,{children:[t.jsx(j,{children:"Max width"}),t.jsx(R,{defaultValue:c.maxWidth,onChange:u=>{d(e,q("--wp-max-width",o),u.target.value||null)},placeholder:ve(c.maxWidth,a.maxWidth,o==="mobile"?"(uses desktop)":"e.g. 420px")})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Border radius"}),t.jsx(R,{defaultValue:c.radius,onChange:u=>{f(e,q("--wp-radius",o),u.target.value||null)},placeholder:ve(c.radius,a.borderRadius,o==="mobile"?"(uses desktop)":"e.g. 16px")})]}
1725),t.jsxs(E,{children:[t.jsx(j,{children:"Background"}),t.jsx(W,{brandColors:i,onColorChange:k,onReset:b,releaseFlagOn:g,value:c.bg})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Shadow"}),t.jsx(R,{defaultValue:c.shadow,onChange:u=>{w(e,q("--wp-shadow",o),u.target.value||null)},placeholder:ve(c.shadow,a.boxShadow,o==="mobile"?"(uses desktop)":"e.g. 0 20px 60px rgba(0,0,0,0.15)")})]})]})},yr=[{label:"Start",value:"flex-start"},{label:"Center",value:"center"},{label:"End",value:"flex-end"},{label:"Stretch",value:"stretch"}],Er=[{label:"Start",value:"flex-start"},{label:"Center",value:"center"},{label:"End",value:"flex-end"},{label:"Between",value:"space-between"},{label:"Around",value:"space-around"}],ne=(e,n)=>n==="mobile"?e.replace("--wp-","--wp-mobile-"):e,jr=({blockId:e,block:n,mode:o,computedStyles:a,onPropertyChange:l})=>{const r=o==="mobile"?n.mobile:n,{set:i}=I(l,300),{set:g}=I(l,300),c=r.align||a.alignItems||"stretch",d=r.justify||a.justifyContent||"flex-start";return t.jsxs(t.Fragment,{children:[t.jsx(M,{children:"Layout"}),t.jsxs(E,{children:[t.jsx(j,{children:"Padding"}),t.jsx(R,{defaultValue:r.padding,onChange:f=>{i(e,ne("--wp-padding",o),f.target.value||null)},placeholder:r.padding||"e.g. 32px 20px"})]}),t.jsx(at,{blockId:e,computedDirection:a.flexDirection??"",computedOverflow:a.overflowX??"",computedWrap:a.flexWrap??"",mode:o,onPropertyChange:l,value:r.layout}),t.jsxs(E,{children:[t.jsx(j,{children:"Gap"}),t.jsx(R,{defaultValue:r.gap,onChange:f=>{g(e,ne("--wp-gap",o),f.target.value||null)},placeholder:r.gap||"e.g. 12px"})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Align items"}),t.jsx(O,{children:yr.map(f=>t.jsx(H,{$active:c===f.value,onClick:()=>{l(e,ne("--wp-align",o),f.value==="stretch"?null:f.value)},children:f.label},f.value))})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Justify content"}),t.jsx(O,{children:Er.map(f=>t.jsx(H,{$active:d===f.value,onClick:()=>{l(e,ne("--wp-justify",o),f.value==="flex-start"?null:f.value)},children:f.label},f.value))})]})]})},Cr=[{label:"Regular",value:"400"},{label:"Bold",value:"700"}],oe=(e,n)=>n==="mobile"?e.replace("--wp-","--wp-mobile-"):e,Sr=({blockId:e,block:n,mode:o,computedStyles:a,onPropertyChange:l,onAttributeChange:r,brandColors:i,releaseFlagOn:g})=>{const c=o==="mobile"?n.mobile:n,{set:d}=I(l,300),{set:f}=I(l,300),p=c.fontSize||a.fontSize||(o==="mobile"?"(uses desktop)":"e.g. 16px"),w=c.fontWeight||a.fontWeight,k=s.useCallback((u,v)=>{f(e,oe("--wp-color",o),u||null),r(e,"data-wp-bk-color",v===void 0?null:v)},[e,o,r]),b=s.useCallback(()=>{l(e,oe("--wp-color",o),null),r(e,"data-wp-bk-color",null)},[e,o,l,r]);return t.jsxs(t.Fragment,{children:[t.jsx(M,{children:"Typography"}),t.jsxs(E,{children:[t.jsx(j,{children:"Font size"}),t.jsx(R,{defaultValue:c.fontSize,onChange:u=>{d(e,oe("--wp-font-size",o),u.target.value||null)},placeholder:p})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Font weight"}),t.jsx(O,{children:Cr.map(u=>t.jsx(H,{$active:w===u.value,onClick:()=>{l(e,oe("--wp-font-weight",o),u.value)},children:u.label},u.value))})]}),t.jsxs(E,{children:[t.jsx(j,{children:"Text color"}),t.jsx(W,{brandColors:i,onColorChange:k,onReset:b,releaseFlagOn:g,value:c.color})]}),t.jsx(F,{blockId:e,computedAlignSelf:a.alignSelf??"",mode:o,onPropertyChange:l,value:c.alignSelf})]})},Tr={root:"Popup",step:"Step",container:"Container",heading:"Heading",text:"Text",button:"Button",link:"Link",image:"Image"},Ir=(e,n,o,a,l,r,i,g,c,d,f)=>{const p=`${e}-${o}`;switch(n.kind){case"root":return t.jsx(kr,{block:n,blockId:e,brandColors:d,computedStyles:l,mode:o,onAttributeChange:i,onPropertyChange:r,releaseFlagOn:f},p);case"heading":return t.jsx(fr,{block:n,blockId:e,brandColors:d,computedStyles:l,mode:o,onAttributeChange:i,onPropertyChange:r,releaseFlagOn:f},p);case"text":return t.jsx(Sr,{block:n,blockId:e,brandColors:d,computedStyles:l,mode:o,onAttributeChange:i,onPropertyChange:r,releaseFlagOn:f},p);case"button":return t.jsx(ar,{block:n,blockId:e,brandColors:d,computedStyles:l,mode:o,onAttributeChange:i,onPropertyChange:r,releaseFlagOn:f,stepGraph:a},p);case"container":return t.jsx(ur,{block:n,blockId:e,computedStyles:l,mode:o,onPropertyChange:r},p);case"link":return t.jsx(wr,{block:n,blockId:e,brandColors:d,computedStyles:l,mode:o,onAttributeChange:i,onPropertyChange:r,releaseFlagOn:f},p);case"image":return t.jsx(br,{block:n,blockId:e,computedStyles:l,mode:o,onAttributeChange:i,onOpenRecrop:c,onOpenReplace:g,onPropertyChange:r},p);case"step":return t.jsx(jr,{block:n,blockId:e,computedStyles:l,mode:o,onPropertyChange:r},p);default:return n}},Br=e=>e!=="step",Dr=({blockRect:e,canvasRef:n,computedStyles:o,html:a,iframeRef:l,onAttributeChange:r,onOpenRecrop:i,onOpenReplace:g,onPropertyChange:c,selectedBlockId:d,stepGraph:f,brandColors:p,releaseFlagOn:w})=>{const[k,b]=s.useState(150),[u,v]=s.useState("desktop"),T=s.useRef(null),B=s.useMemo(()=>d?ke(d,a):null,[d,a]),L=s.useMemo(()=>
1725{if(!n.current||!l.current)return null;const C=n.current.getBoundingClientRect(),y=l.current.getBoundingClientRect();return{top:y.top-C.top,left:y.left-C.left,width:y.width,height:y.height}},[n,l,e]),S=s.useMemo(()=>{if(!n.current)return null;const C=n.current.getBoundingClientRect();return{width:C.width,height:C.height}},[n,e]),P=No(e,S,L,k);return s.useEffect(()=>{T.current&&b(T.current.offsetHeight)},[d,B]),!d||!B||!P?null:t.jsxs(t.Fragment,{children:[t.jsx(ir,{blockRect:e,iframeOffset:L,panelHeight:k,position:P}),t.jsxs(Vo,{$left:P.left,$top:P.top,ref:T,children:[t.jsxs(Uo,{children:[t.jsx(Go,{}),t.jsx(Wo,{children:Tr[B.kind]})]}),Br(B.kind)&&t.jsx(mr,{mode:u,onChange:v}),Ir(d,B,u,f,o,c,r,g,i,p,w)]},d)]})},Lr=(e,n)=>{if(e.status==="loading"){if(n.type==="LOADED"){const o=Ce(n.doc.html),a=o.nodes.find(l=>l.isInitial)??o.nodes[0]??null;return{status:"editing",variantId:e.variantId,doc:n.doc,serverDoc:n.doc,publishedDoc:n.publishedDoc,selectedBlockId:null,hoveredBlockId:null,currentStepId:a?.id??null,device:"desktop",blockRect:null,selectedBlockComputedStyles:{},editingBlockId:null,pendingAction:null,aiSnapshot:null,srcdocVersion:0}}return e}switch(n.type){case"LOADED":return e;case"BLOCK_SELECTED":return{...e,selectedBlockId:n.blockId,editingBlockId:n.blockId===e.editingBlockId?e.editingBlockId:null,blockRect:n.blockId===e.selectedBlockId?e.blockRect:null,selectedBlockComputedStyles:n.blockId===e.selectedBlockId?e.selectedBlockComputedStyles:{}};case"BLOCK_COMPUTED_STYLES":return n.blockId!==e.selectedBlockId?e:{...e,selectedBlockComputedStyles:n.styles};case"BLOCK_HOVERED":return{...e,hoveredBlockId:n.blockId};case"STEP_CHANGED":return{...e,currentStepId:n.stepId};case"DRAG_COMPLETE":return{...e,doc:{...e.doc,html:n.html},selectedBlockId:null,aiSnapshot:null};case"DEVICE_CHANGED":return{...e,device:n.device};case"BLOCK_RECT_RECEIVED":return e.selectedBlockId===n.blockId?{...e,blockRect:n.rect}:e;case"HTML_UPDATED":return{...e,doc:{...e.doc,html:n.html},aiSnapshot:null};case"SAVE_REQUESTED":return{...e,pendingAction:"save"};case"PUBLISH_REQUESTED":return{...e,pendingAction:"publish"};case"ACTION_ABORTED":return{...e,pendingAction:null};case"SAVE_SUCCEEDED":return{...e,serverDoc:n.savedDoc,pendingAction:null};case"PUBLISH_SUCCEEDED":return{...e,serverDoc:n.publishedDoc,publishedDoc:n.publishedDoc,pendingAction:null};case"TEXT_EDIT_STARTED":return{...e,editingBlockId:n.blockId};case"TEXT_EDIT_ENDED":return{...e,editingBlockId:null,doc:{...e.doc,html:n.updatedHtml},aiSnapshot:null};case"BLOCK_INSERTED":return{...e,doc:{...e.doc,html:n.html},selectedBlockId:n.blockId,blockRect:n.rect,aiSnapshot:null};case"INITIALIZE_FROM_AI":return{...e,doc:{html:n.popup.html,css:n.popup.css,js:n.popup.js??e.doc.js},srcdocVersion:e.srcdocVersion+1};case"AI_MUTATION_APPLIED":return{...e,doc:{html:n.popup.html,css:n.popup.css,js:n.popup.js??e.doc.js},aiSnapshot:{html:e.doc.html,css:e.doc.css,js:e.doc.js},srcdocVersion:e.srcdocVersion+1};case"AI_UNDO_APPLIED":return e.aiSnapshot===null?e:{...e,doc:{html:e.aiSnapshot.html,css:e.aiSnapshot.css,js:e.aiSnapshot.js??e.doc.js},aiSnapshot:null,srcdocVersion:e.srcdocVersion+1};default:return e}},Rr=e=>({status:"loading",variantId:e}),it=(e,n)=>e.html===n.html&&e.css===n.css&&e.js===n.js,me=e=>!it(e.doc,e.serverDoc),Pr=e=>e.publishedDoc!==null&&it(e.doc,e.publishedDoc),Ar=()=>{},_r=()=>t.jsxs("svg",{fill:"none",height:18,viewBox:"0 0 18 18",width:18,children:[t.jsx("path",{d:"M2 5h14",stroke:"currentColor",strokeLinecap:"round",strokeWidth:1.5}),t.jsx("path",{d:"M2 9h14",stroke:"currentColor",strokeLinecap:"round",strokeWidth:1.5}),t.jsx("path",{d:"M2 13h14",stroke:"currentColor",strokeLinecap:"round",strokeWidth:1.5})]}),$r=()=>t.jsxs("svg",{fill:"none",height:18,viewBox:"0 0 18 18",width:18,children:[t.jsx("path",{d:"M9 3v12",stroke:"currentColor",strokeLinecap:"round",strokeWidth:1.5}),t.jsx("path",{d:"M3 9h12",stroke:"currentColor",strokeLinecap:"round",strokeWidth:1.5})]}),Mr=({variantId:e,websiteId:n,campaignName:o,initialDoc:a,publishedDoc:l})=>{const[r,i]=s.useReducer(Lr,String(e),Rr),{createToast:g}
1725=Zt(),c=s.useRef(null),d=s.useRef(null),f=lo(d),p=f.start,w=s.useRef(new Set),k=s.useCallback(h=>(w.current.add(h),()=>{w.current.delete(h)}),[]),b=s.useCallback(()=>{w.current.forEach(h=>{h()})},[]),u=s.useRef(0),v=s.useRef(0),[,T]=s.useReducer(h=>h+1,0),B=s.useCallback(()=>{v.current++,T()},[]),L=s.useCallback(()=>{v.current=Math.max(0,v.current-1),T()},[]),S=fn({variantId:e,useUploadMutation:mn,buildUploadVariables:({file:h,variantId:m,blockId:D,previousPath:ge})=>({file:h,variantId:m,type:fe.PopupsV2,imageId:D,previousPath:ge}),onUploadStart:B,onUploadFinish:L}),[P,C]=s.useState(null),y=s.useCallback(h=>{C(m=>m===h?null:h)},[]),$=s.useCallback(()=>{y("layers")},[y]),lt=s.useCallback(()=>{y("palette")},[y]),st=s.useCallback(()=>{y("ai")},[y]),{workspace:ct,website:dt}=Qe({strict:!1}),{data:Se}=Yt(),le=Se?.id===void 0?null:String(Se.id),Te=Jt(Qt.BRAND_PROFILE),{data:pt}=un({websiteId:n}),se=Te?pt?.settings?.brand_profile?.visual??null:null,V=se?.colors??null,ut=V?{primary:V.primary??null,accent:V.accent??null,background:V.background??null,text:V.text??null,text_muted:V.text_muted??null}:null,A=Nn({userId:le,variantId:String(e),dispatch:i}),ce=s.useRef(!1);s.useEffect(()=>{if(le===null||ce.current)return;const h=`popups-v2-ai-history-${String(e)}`,m=sessionStorage.getItem(h);if(m===null){ce.current=!0;return}ce.current=!0;try{const D=JSON.parse(m);A.seedHistory([D.seedTurn]),i({type:"INITIALIZE_FROM_AI",popup:D.popup}),C("ai")}catch{}finally{sessionStorage.removeItem(h)}},[le,e]),s.useEffect(()=>{const h=m=>{(m.metaKey||m.ctrlKey)&&m.key==="k"&&(m.preventDefault(),C(D=>D==="ai"?null:"ai"))};return window.addEventListener("keydown",h),()=>{window.removeEventListener("keydown",h)}},[]),s.useEffect(()=>{i({type:"LOADED",doc:a,publishedDoc:l})},[a,l]),s.useEffect(()=>{if(!(r.status==="editing"&&me(r)||r.status==="editing"&&!!r.editingBlockId))return;const m=D=>{D.preventDefault()};return window.addEventListener("beforeunload",m),()=>{window.removeEventListener("beforeunload",m)}},[r]);const U=nn(),G=vn(),Ie=s.useCallback(async()=>{if(r.status!=="editing")return;const h=r.doc,m=Me(h.html);try{await U.mutateAsync({channel:"popupsV2",input:{variantId:e,type:fe.PopupsV2,html:m,css:h.css,js:h.js}}),i({type:"SAVE_SUCCEEDED",savedDoc:h})}catch{i({type:"ACTION_ABORTED"})}},[r,e,U]),Be=s.useCallback(async()=>{if(r.status!=="editing")return;const h=r.doc,m=Me(h.html),D=bn(m,h.css,"publish");if(!D.ok){const ge=D.errors.find(zt=>zt.severity==="error");i({type:"ACTION_ABORTED"}),g("error",ge?.message??"Cannot publish: validation failed");return}try{await G.mutateAsync({variantId:e,type:fe.PopupsV2,html:m,css:h.css,js:h.js}),i({type:"PUBLISH_SUCCEEDED",publishedDoc:h})}catch{i({type:"ACTION_ABORTED"})}},[r,e,G,g]),gt=s.useCallback(h=>{N(r,d.current),i({type:"DEVICE_CHANGED",device:h})},[r]),ft=s.useCallback(h=>{r.status==="editing"&&r.editingBlockId!==h&&N(r,d.current),i({type:"BLOCK_SELECTED",blockId:h})},[r]),De=s.useCallback(h=>{N(r,d.current),i({type:"STEP_CHANGED",stepId:h})},[r]),ht=s.useCallback((h,m,D)=>{d.current&&(N(r,d.current),u.current+=1,_(d.current,{type:"SET_BLOCK_PROPERTY",blockId:h,property:m,value:D}))},[r]),xt=s.useCallback((h,m,D)=>{d.current&&(N(r,d.current),u.current+=1,_(d.current,{type:"SET_BLOCK_ATTRIBUTE",blockId:h,attribute:m,value:D}))},[r]),de=s.useCallback(h=>{if(r.status!=="editing")return;const m=ke(h,r.doc.html);if(m?.kind!=="image")return;const D=r.device==="mobile"&&m.mobile.aspectRatio||m.aspectRatio;S.openReplace({blockId:h,currentPath:m.path,category:m.category,aspectRatio:D})},[r,S]),bt=s.useCallback(h=>{if(h.type==="READY"){u.current=0;return}if(h.type==="IMAGE_PLACEHOLDER_CLICKED"){de(h.blockId);return}(h.type==="HTML_UPDATED"||h.type==="BLOCK_INSERTED")&&(u.current=Math.max(0,u.current-1)),i(h)},[de]),wt=s.useCallback(h=>{if(r.status!=="editing")return;const m=ke(h,r.doc.html);if(m?.kind!=="image"||m.path==="")return;const D=r.device==="mobile"&&m.mobile.aspectRatio||m.aspectRatio;S.openRecrop({blockId:h,currentPath:m.path,aspectRatio:D})},[r,S]),vt=s.useCallback(h=>{if(S.state.status!=="crop")return;const m=S.state.blockId;if(!d.current){S.close();return}N(r,d.current),u.current+=1,_(d.current,{type:"SET_BLOCK_ATTRIBUTES",blockId:m,attributes:[{attribute:"src",value:h.src},{attribute:"data-wp-image-path",value:h.path}]}),S.close()},[S,r]),pe=r.status==="editing"?r.doc.html:null,mt=s.useMemo(()=>pe?Ce(pe):re,[pe]),kt=r.status==="editing"?r.selectedBlockId:null,yt=r.status==="editing"?r.doc.html:null,ue=s.useMemo(()=>r.status==="editing"?wn(r):null,[r.status,kt,yt]),Et=s.useCallback(()=>{b(),i({type:"SAVE_REQUESTED"})},[b]),Le=s.useCallback(()=>{b(),i({type:"PUBLISH_REQUESTED"})},[b]),jt=s.useCallback(()=>{const m=r.status==="editing"&&r.publishedDoc!==null?"This will update the live version of the popup.":"This will make the popup live and appear on your website.";window.confirm(m)&&Le()},[r,Le]),Ct=s.useCallback(()=>{S.close()},[S]),St=s.useCallback(()=>{S.backToBrowse()},[S]),Tt=s.useCallback(h=>{S.selectAsset(h)},[S]),It=s.useCallback(h=>{S.uploadFile(h)},[S]),Z=s.useRef(null);s.useEffect(()=>{if(r.status!=="editing"||!r.pendingAction){Z.current=null;return}if(r.editingBlockId){N(r,d.current);return}if(!(u.current>0)&&!(v.current>0)&&Z.current!==r.pendingAction)if(r.pendingAction==="save"){if(U.isPending)return;Z.current="save",Ie()}else{if(G.isPending)return;Z.current="publish",Be()}},[r,Ie,Be,U.isPending,G.isPending]);const Bt=s.useCallback(h=>{r.status==="editing"&&A.submit(h,{initialPopup:r.doc,selectedBlockIds:r.selectedBlockId===null?null:[r.selectedBlockId],selectedBlockLabel:ue}).catch(Ar)},[A,r,ue]),Dt=s.useCallback(()=>{A.cancel()},[A]),Lt=s.useCallback(()=>{A.resetHistory()},[A]),Rt=s.useCallback(()=>{i({type:"BLOCK_SELECTED",blockId:null})},[]),Pt=s.useCallback(()=>{C(null)},[]),At=s.useCallback(()=>{i({type:"AI_UNDO_APPLIED"})},[]);if(r.status==="loading")return t.jsx(Ae,{style:{alignItems:"center",justifyContent:"center"},children:"Loading..."});const _t=r.aiSnapshot!==null,$t=t.jsx(Pn,{aiSnapshotPresent:_t,history:A.history,isLoading:A.isLoading,lastError:A.lastError,onCancel:Dt,onClear:Lt,onClearScope:Rt,onClose:Pt,onSubmit:Bt,onUndo:At,pending:A.pending,selectedBlockSummary:ue}),Y=A.isLoading,Mt=!me(r)&&!r.editingBlockId||U.isPending||r.pendingAction!==null||v.current>0,Ot=Pr(r)||G.isPending||r.pendingAction!==null||v.current>0,Ht=U.isPending||r.pendingAction==="save",Nt=G.isPending||r.pendingAction==="publish";return t.jsx(rt.Provider,{value:k,children:t.jsxs(Ae,{children:[t.jsxs(he,{children:[t.jsxs(he.Left,{children:[t.jsx(on,{isDirty:me
1725(r),params:{workspace:ct??"",website:dt??""},to:"/workspaces/$workspace/websites/$website/campaigns/popups"}),t.jsx(_e,{}),t.jsx(rn,{children:o})]}),t.jsxs(he.Right,{children:[t.jsx(uo,{device:r.device,onChange:gt}),t.jsx(_e,{}),t.jsx(an,{disabled:Mt||Y,isSaving:Ht,onClick:Et,title:Y?"Wait for AI generation to finish, or cancel it.":void 0}),t.jsx(ln,{disabled:Ot||Y,isPublishing:Nt,onClick:jt,title:Y?"Wait for AI generation to finish, or cancel it.":void 0})]})]}),t.jsxs(sn,{children:[t.jsxs(J,{children:[t.jsx(J.Item,{icon:t.jsx(_r,{}),isActive:P==="layers",label:"Toggle layers panel",onClick:$}),t.jsx(J.Item,{icon:t.jsx($r,{}),isActive:P==="palette",label:"Toggle block palette",onClick:lt}),t.jsx(J.Item,{icon:t.jsx(ye,{height:18,width:18}),isActive:P==="ai",label:"Toggle AI pane",onClick:st})]}),P==="layers"&&t.jsx(xe,{children:t.jsx(Eo,{currentStepId:r.currentStepId,html:r.doc.html,onBlockClick:ft,onStepClick:De,selectedBlockId:r.selectedBlockId})}),P==="palette"&&t.jsx(xe,{children:t.jsx(oo,{activeBlock:f.activeBlock,onTileMouseDown:p})}),P==="ai"&&t.jsx(xe,{$width:320,children:$t}),t.jsx(Mo,{brandVisual:se,canvasRef:c,currentStepId:r.currentStepId,device:r.device,doc:r.doc,iframeRef:d,onMessage:bt,onStepClick:De,selectedBlockId:r.selectedBlockId,children:t.jsx(Dr,{blockRect:r.blockRect,brandColors:ut,canvasRef:c,computedStyles:r.selectedBlockComputedStyles,html:r.doc.html,iframeRef:d,onAttributeChange:xt,onOpenRecrop:wt,onOpenReplace:de,onPropertyChange:ht,releaseFlagOn:Te,selectedBlockId:r.selectedBlockId,stepGraph:mt})},`${r.srcdocVersion}-${se===null?"n":"b"}`)]}),f.activeBlock&&f.ghostPos?t.jsx(ro,{icon:f.activeBlock.icon,label:f.activeBlock.label,x:f.ghostPos.x,y:f.ghostPos.y}):null,t.jsx(hn,{isUploading:S.isUploading,onBackToBrowse:St,onClose:Ct,onCropConfirm:vt,onSelectAsset:Tt,onUploadFile:It,state:S.state,websiteId:n})]})})},Fr=()=>{const{variant:e}
1725=en({from:"/workspaces/$workspace/websites/$website/campaigns/popups/$id/builder"}),{id:n,website:o}=Qe({from:"/workspaces/$workspace/websites/$website/campaigns/popups/$id/builder"}),a=e.draftPopupsV2Content??e.popupsV2Content,l={html:a?.html??"",css:a?.css??"",js:a?.js??""},i=e.campaign?.state===tn.Published&&e.popupsV2Content?{html:e.popupsV2Content.html,css:e.popupsV2Content.css,js:e.popupsV2Content.js}:null,g=cn(e);return t.jsx(Mr,{campaignName:g,initialDoc:l,publishedDoc:i,variantId:Number(n),websiteId:Number(o)})};export{Fr as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.