UNPKG

commerce-kit

Version:

3 lines • 33.9 kB
1
2
3
import{useEffect as A,useRef as z,useState as P}from"react";import{createRoot as ce}from"react-dom/client";import{Fragment as ae,jsx as s,jsxs as v}from"react/jsx-runtime";var D="yns-feedback-toolbar-root",ue=()=>{if(typeof window>"u")return null;let e=(process.env.NEXT_PUBLIC_YNS_API_BASE??"").trim();if(e)return e.replace(/\/$/,"");let t=window.location.hostname,n=window.location.protocol;return t.endsWith(".yns.store")?`${n}//yns.store`:t.endsWith(".yns.cx")?`${n}//yns.cx`:window.location.origin},pe=e=>{if(e.id)return`#${CSS.escape(e.id)}`;let t=[],n=e;for(;n&&n.nodeType===Node.ELEMENT_NODE&&t.length<6;){let o=n.tagName.toLowerCase(),i=n.getAttribute("class");if(i){let a=i.split(/\s+/).filter(Boolean).slice(0,2).map(c=>`.${CSS.escape(c)}`).join("");o+=a}let p=n.parentElement,d=n.tagName;if(p){let a=Array.from(p.children).filter(c=>c.tagName===d);if(a.length>1){let c=a.indexOf(n)+1;o+=`:nth-of-type(${c})`}}t.unshift(o),n=p}return t.join(" > ")},me=["id","class","data-testid","aria-label","role","name","href","src"],H=e=>{let t=[];for(let n of me){let o=e.getAttribute(n);if(!o)continue;let i=o.length>80?`${o.slice(0,80)}\u2026`:o;t.push(` ${n}="${i.replace(/"/g,"&quot;")}"`)}return t.join("")},Q=e=>{let t=(e.textContent??"").replace(/\s+/g," ").trim();return t?t.length>100?`${t.slice(0,100)}\u2026`:t:""},fe=e=>{let t=[],n=e;for(;n&&n!==document.documentElement&&t.length<5;){let c=n.parentElement;if(!c)break;t.unshift(c),n=c}let o=[],i=0;for(let c of t){let g=" ".repeat(i);o.push(`${g}<${c.tagName.toLowerCase()}${H(c)}>`),i++}let p=" ".repeat(i),d=e.tagName.toLowerCase(),a=Q(e);if(o.push(`${p}<${d}${H(e)}>${a?`${a}</${d}>`:""} \u2190 TARGET`),!a){let c=" ".repeat(i+1),g=Array.from(e.children).slice(0,6);for(let x of g){let C=Q(x);o.push(`${c}<${x.tagName.toLowerCase()}${H(x)}>${C?`${C}</${x.tagName.toLowerCase()}>`:""}`)}e.children.length>6&&o.push(`${c}\u2026 (${e.children.length-6} more children)`),o.push(`${p}</${d}>`)}for(let c=t.length-1;c>=0;c--){let g=" ".repeat(c),x=t[c];x&&o.push(`${g}</${x.tagName.toLowerCase()}>`)}return o.join(` `)},Z=e=>{let t=e;for(;t;){if(t instanceof HTMLElement&&t.dataset.ynsFeedbackUi==="true")return!0;t=t.parentElement}return!1},ge=new Set(["HTML","HEAD","SCRIPT","STYLE","NOSCRIPT"]),be=1e4,ye=3e4,he=e=>typeof e=="object"&&e!==null&&"viewer"in e&&(e.viewer==="anonymous"||e.viewer==="non-member"||e.viewer==="member"),Se=e=>{let t=new Date(e),n=t.getTime()-Date.now(),o=t.toLocaleString(void 0,{weekday:"short",month:"short",day:"numeric",hour:"numeric",minute:"2-digit"});if(n<=0)return`Any moment now (estimated by ${o})`;let i=Math.ceil(n/6e4);if(i<60)return`~${i} minutes (by ${o})`;let p=Math.round(n/36e5);if(p<24)return`~${p} ${p===1?"hour":"hours"} (by ${o})`;let d=Math.round(n/864e5);return`~${d} ${d===1?"day":"days"} (by ${o})`};async function ee(e){try{let t=await fetch("/api/auth/sign-out",{method:"POST",credentials:"include"});t.ok||console.warn("[YNS Feedback Toolbar] sign-out responded non-OK",t.status)}catch(t){console.warn("[YNS Feedback Toolbar] sign-out fetch failed",t)}e()}var ve=e=>new URL(e,window.location.origin).toString();function we(){let[e,t]=P(null),[n,o]=P(!0),[i,p]=P(!1),[d,a]=P(null),[c,g]=P(null),[x,C]=P(!1),[I,y]=P(!1),m=z(null),f=z(()=>{});A(()=>{if(m.current=ue(),!m.current){o(!1);return}let r=!1,u=null,h=0,b=null,T=null,k=()=>{b!==null&&(window.clearTimeout(b),b=null)},E=(F,M)=>{r||M<h||(T=F?.viewer??null,t(F),o(!1))},$=()=>{if(r)return;let F=T==="member"?be:ye;b=window.setTimeout(()=>{Y()},F)},Y=async()=>{if(r)return;u?.abort();let F=new AbortController;u=F;let M=++h;try{let N=await fetch(`${m.current}/api/feedback-comments?host=${encodeURIComponent(window.location.host)}`,{credentials:"include",signal:F.signal});if(r||M<h)return;if(N.status===404||!N.ok){E(null,M),$();return}let J=await N.json();if(r||M<h)return;if(!he(J)){E(null,M),$();return}E(J,M),$()}catch(N){if(N?.name==="AbortError"||r)return;E(null,M),$()}},G=()=>{r||(k(),Y())};f.current=G;let K=()=>{document.hidden?(u?.abort(),k()):G()};return document.addEventListener("visibilitychange",K),Y(),()=>{r=!0,document.removeEventListener("visibilitychange",K),u?.abort(),k(),f.current=()=>{}}},[]);let l=e?.viewer==="member"?e:null;A(()=>{!l||l.canComment||(p(!1),a(null),C(!1),g(null))},[l]),A(()=>{if(i)return document.body.style.cursor="crosshair",()=>{document.body.style.cursor=""}},[i]),A(()=>{if(!i)return;let r=document.createElement("div");r.dataset.ynsFeedbackUi="true",r.style.cssText=["position: fixed","pointer-events: none","z-index: 2147483644","border: 2px dashed #10b981","background: rgba(16, 185, 129, 0.08)","border-radius: 3px","display: none","transition: top 0.05s, left 0.05s, width 0.05s, height 0.05s"].join(";");let u=document.createElement("div");u.dataset.ynsFeedbackUi="true",u.textContent="Click to comment",u.style.cssText=["position: fixed","pointer-events: none","z-index: 2147483645","background: #059669","color: #fff","font-size: 11px","font-family: ui-sans-serif, system-ui, sans-serif","padding: 3px 8px","border-radius: 4px","white-space: nowrap","display: none","box-shadow: 0 2px 6px rgba(0,0,0,0.15)"].join(";"),document.documentElement.appendChild(r),document.documentElement.appendChild(u);let h=null,b=k=>{let E=document.elementFromPoint(k.clientX,k.clientY);if(!E||ge.has(E.tagName)||Z(E)){r.style.display="none",u.style.display="none",h=null;return}h=E,requestAnimationFrame(()=>{if(h!==E)return;let $=E.getBoundingClientRect();r.style.top=`${$.top}px`,r.style.left=`${$.left}px`,r.style.width=`${$.width}px`,r.style.height=`${$.height}px`,r.style.display="block",u.style.left=`${k.clientX+14}px`,u.style.top=`${k.clientY+14}px`,u.style.display="block"})},T=()=>{r.style.display="none",u.style.display="none",h=null};return document.addEventListener("mousemove",b,!0),document.addEventListener("mouseleave",T),()=>{document.removeEventListener("mousemove",b,!0),document.removeEventListener("mouseleave",T),r.remove(),u.remove()}},[i]),A(()=>{if(!i)return;let r=u=>{let h=u.target;if(!(h instanceof Element)||Z(h))return;u.preventDefault(),u.stopPropagation();let b=h.getBoundingClientRect(),T=b.width>0?(u.clientX-b.left)/b.width:.5,k=b.height>0?(u.clientY-b.top)/b.height:.5;a({cssSelector:pe(h),pagePath:window.location.pathname,surroundingHtml:fe(h),rect:{top:b.top+window.scrollY,left:b.left+window.scrollX,width:b.width,height:b.height},clickX:u.clientX+window.scrollX,clickY:u.clientY+window.scrollY,offsetXRatio:Math.min(1,Math.max(0,T)),offsetYRatio:Math.min(1,Math.max(0,k))}),p(!1)};return document.addEventListener("click",r,{capture:!0}),()=>document.removeEventListener("click",r,{capture:!0})},[i]);let w=()=>{f.current()},R=async(r,u)=>{!m.current||!l||!d||!(await fetch(`${m.current}/api/feedback-comments`,{method:"POST",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({feedbackSessionId:l.feedbackSessionId,content:r,pagePath:d.pagePath,cssSelector:d.cssSelector,surroundingHtml:d.surroundingHtml,offsetXRatio:d.offsetXRatio,offsetYRatio:d.offsetYRatio,...u.length>0?{attachments:u}:{}})})).ok||(a(null),p(!0),w())},j=async(r,u,h)=>{!m.current||!(await fetch(`${m.current}/api/feedback-comments/${r}`,{method:"PATCH",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({content:u,attachments:h})})).ok||(g(null),w())},O=async r=>{!m.current||!(await fetch(`${m.current}/api/feedback-comments/${r}`,{method:"DELETE",credentials:"include"})).ok||w()},X=async()=>{if(!(!m.current||!l)&&window.confirm("Finalize this feedback session? You won't be able to add more comments.")){y(!0);try{let r=await fetch(`${m.current}/api/feedback-sessions/${l.feedbackSessionId}/finalize`,{method:"POST",credentials:"include"});if(!r.ok)return;let h=(await r.json().catch(()=>null))?.status??"processing";t(b=>b?.viewer==="member"?{...b,canComment:!1,sessionStatus:h}:b)}finally{y(!1)}}},S=r=>{if(r.pagePath!==window.location.pathname){window.location.assign(r.pagePath);return}let u=null;try{u=document.querySelector(r.cssSelector)}catch{u=null}u&&(u.scrollIntoView({behavior:"smooth",block:"center"}),g(r.id))};if(n||!e)return null;if(e.viewer==="anonymous")return s(Ge,{loginUrl:e.loginUrl});if(e.viewer==="non-member")return s(Ke,{user:e.user,onSignOut:()=>void ee(()=>f.current())});if(!l)return null;if(!l.canComment)return l.sessionStatus!=="processing"&&l.sessionStatus!=="in_review"?null:s("div",{"data-yns-feedback-ui":"true",children:s(xe,{progress:l.progress,eta:l.eta,status:l.sessionStatus})});let L=l.comments.filter(r=>r.pagePath===window.location.pathname&&r.status!=="done");return v("div",{"data-yns-feedback-ui":"true",children:[L.map((r,u)=>s(Ee,{pin:r,number:u+1,editing:c===r.id,feedbackSessionId:l.feedbackSessionId,apiBase:m.current,onStartEdit:()=>g(r.id),onCancelEdit:()=>g(null),onSave:(h,b)=>j(r.id,h,b),onRemove:()=>O(r.id)},r.id)),d&&s(Pe,{pending:d,feedbackSessionId:l.feedbackSessionId,apiBase:m.current,onCancel:()=>{a(null),p(!0)},onSave:(r,u)=>R(r,u)}),x&&s(Re,{comments:l.comments,currentPath:window.location.pathname,onClose:()=>C(!1),onSelect:S}),v("div",{style:V,children:[s("button",{type:"button",onClick:()=>p(r=>!r),style:i?Te:B,children:i?"Cancel":"Add comment"}),s("button",{type:"button",onClick:()=>C(r=>!r),style:$e,children:x?"Hide list":`List (${l.comments.length})`}),s("button",{type:"button",onClick:X,disabled:I,style:Me,children:I?"Finalizing\u2026":"Finalize"}),s("span",{style:q,children:i?"Click any element to comment":`${L.length} on this page`}),s(Je,{user:l.user,onSignOut:()=>void ee(()=>f.current())})]})]})}function xe({progress:e,eta:t,status:n}){let[,o]=P(0);A(()=>{let a=window.setInterval(()=>o(c=>c+1),6e4);return()=>window.clearInterval(a)},[]);let i=Se(t);return v("div",{style:mt,children:[s("style",{children:Ce}),v("div",{style:ft,children:[s(ke,{}),s("span",{style:gt,children:"Submitted"}),s("strong",{style:{fontSize:13},children:n==="in_review"?"Feedback under review":"Applying feedback"})]}),v("div",{style:bt,children:[s("span",{children:"Review progress"}),s("span",{style:{opacity:.7},children:e.label})]}),s("div",{style:yt,children:s("div",{style:{...ht,width:`${e.fillPct}%`}})}),v("p",{style:St,children:["Estimated delivery: ",s("span",{style:{fontWeight:600},children:i})]})]})}var Ce="@keyframes yns-feedback-spin { to { transform: rotate(360deg); } }";function ke({size:e=14}){return s("span",{"aria-hidden":!0,style:{display:"inline-block",width:e,height:e,border:"2px solid rgba(16, 185, 129, 0.25)",borderTopColor:"#10b981",borderRadius:999,animation:"yns-feedback-spin 0.9s linear infinite"}})}function Ee({pin:e,number:t,editing:n,feedbackSessionId:o,apiBase:i,onStartEdit:p,onCancelEdit:d,onSave:a,onRemove:c}){let g=Ae(e.cssSelector,e.offsetXRatio,e.offsetYRatio);return g?v("div",{style:{position:"absolute",top:g.top,left:g.left,zIndex:2147483600,pointerEvents:"auto"},children:[s("button",{type:"button",onClick:p,style:oe,title:e.content,children:t}),n&&s(ne,{initial:e.content,initialAttachments:e.attachments,feedbackSessionId:o,apiBase:i,onCancel:d,onSave:a,onRemove:c})]}):null}function Pe({pending:e,feedbackSessionId:t,apiBase:n,onCancel:o,onSave:i}){return v(ae,{children:[s("div",{style:{position:"absolute",top:e.rect.top+e.rect.height*e.offsetYRatio-12,left:e.rect.left+e.rect.width*e.offsetXRatio-12,zIndex:2147483600,pointerEvents:"none"},children:s("div",{style:oe,children:"\u2022"})}),s("div",{style:{position:"absolute",top:e.clickY+10,left:e.clickX+10,zIndex:2147483647},children:s(ne,{initial:"",initialAttachments:[],feedbackSessionId:t,apiBase:n,onCancel:o,onSave:i})})]})}function Re({comments:e,currentPath:t,onClose:n,onSelect:o}){let i=new Map;for(let d of e){let a=i.get(d.pagePath)??[];a.push(d),i.set(d.pagePath,a)}let p=Array.from(i.keys()).sort((d,a)=>d===t?-1:a===t?1:d.localeCompare(a));return v("div",{style:it,children:[v("div",{style:st,children:[v("strong",{style:{fontSize:14},children:["Comments (",e.length,")"]}),s("button",{type:"button",onClick:n,style:ie,children:"Close"})]}),s("div",{style:rt,children:e.length===0?s("div",{style:at,children:"No comments yet. Click \u201CAdd comment\u201D to leave one."}):p.map(d=>v("div",{style:{marginBottom:12},children:[s("div",{style:lt,children:d===t?`${d} \xB7 current`:d}),(i.get(d)??[]).map((a,c)=>v("button",{type:"button",onClick:()=>o(a),style:dt,disabled:a.status==="done"&&!1,children:[s("span",{style:ct,children:c+1}),s("span",{style:ut,children:a.content.length>140?`${a.content.slice(0,140)}\u2026`:a.content}),a.status==="done"&&s("span",{style:pt,children:"done"})]},a.id))]},d))})]})}var W=5,Le=5*1024*1024,Ie=e=>new Promise(t=>{let n=URL.createObjectURL(e),o=new window.Image;o.onload=()=>{URL.revokeObjectURL(n),t({width:o.naturalWidth,height:o.naturalHeight})},o.onerror=()=>{URL.revokeObjectURL(n),t(null)},o.src=n});function ne({initial:e,initialAttachments:t,feedbackSessionId:n,apiBase:o,onCancel:i,onSave:p,onRemove:d}){let[a,c]=P(e),[g,x]=P(t),[C,I]=P(!1),[y,m]=P(!1),[f,l]=P(null),w=z(null),R=z(null);A(()=>{let S=w.current;if(!S)return;S.focus();let L=S.value.length;S.setSelectionRange(L,L)},[]);let j=async S=>{S.preventDefault();let L=a.trim();if(L){I(!0);try{await p(L,g)}finally{I(!1)}}},O=async S=>{if(!S||S.length===0||!o)return;l(null);let L=W-g.length;if(L<=0){l(`Max ${W} images per comment`);return}let r=Array.from(S).slice(0,L);for(let u of r){if(!u.type.startsWith("image/")){l(`"${u.name}" is not an image`);return}if(u.size>Le){l(`"${u.name}" exceeds 5 MB`);return}}m(!0);try{let u=await Promise.all(r.map(Ie)),h=new FormData;r.forEach((k,E)=>{h.append("file",k),h.append("width",u[E]?.width?String(u[E]?.width):""),h.append("height",u[E]?.height?String(u[E]?.height):"")});let b=await fetch(`${o}/api/feedback-comments/uploads?feedbackSessionId=${encodeURIComponent(n)}`,{method:"POST",credentials:"include",body:h});if(!b.ok){let k=await b.json().catch(()=>null);l(k?.error??"Upload failed");return}let T=await b.json();x(k=>[...k,...T.uploads])}catch{l("Upload failed")}finally{m(!1),R.current&&(R.current.value="")}},X=S=>{x(L=>L.filter(r=>r.url!==S))};return v("form",{onSubmit:j,style:Fe,children:[s("textarea",{ref:w,value:a,onChange:S=>c(S.target.value),placeholder:"Leave a comment\u2026",style:Ne,rows:3}),g.length>0&&s("div",{style:Ue,children:g.map(S=>v("div",{style:je,children:[s("img",{src:S.url,alt:"",style:Oe}),s("button",{type:"button",onClick:()=>X(S.url),style:Xe,disabled:C||y,"aria-label":"Remove attachment",children:"\xD7"})]},S.url))}),f&&s("div",{style:Ye,children:f}),s("input",{ref:R,type:"file",accept:"image/*",multiple:!0,onChange:S=>void O(S.target.files),style:{display:"none"}}),v("div",{style:ze,children:[d&&s("button",{type:"button",onClick:()=>d(),style:_e,disabled:C,children:"Delete"}),s("button",{type:"button",onClick:()=>R.current?.click(),style:De,disabled:C||y||g.length>=W,"aria-label":y?"Uploading\u2026":"Attach image",title:y?"Uploading\u2026":"Attach image",children:y?s(We,{}):s(He,{})}),s("div",{style:{flex:1}}),s("button",{type:"button",onClick:i,style:ie,disabled:C,children:"Cancel"}),s("button",{type:"submit",style:Be,disabled:C||y||!a.trim(),children:C?"Saving\u2026":"Save"})]})]})}function Ae(e,t,n){let[o,i]=P(null);return A(()=>{let p=()=>{let a=null;try{a=document.querySelector(e)}catch{a=null}if(!a){i(null);return}let c=a.getBoundingClientRect();i({top:c.top+window.scrollY+c.height*n-12,left:c.left+window.scrollX+c.width*t-12})};p();let d=new ResizeObserver(p);try{let a=document.querySelector(e);a&&d.observe(a)}catch{}return window.addEventListener("scroll",p,!0),window.addEventListener("resize",p),()=>{d.disconnect(),window.removeEventListener("scroll",p,!0),window.removeEventListener("resize",p)}},[e,t,n]),o}var V={position:"fixed",bottom:16,left:"50%",transform:"translateX(-50%)",zIndex:2147483646,display:"flex",alignItems:"center",gap:8,padding:"8px 12px",background:"rgba(17, 17, 17, 0.92)",color:"white",borderRadius:999,boxShadow:"0 8px 24px rgba(0,0,0,0.25)",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',fontSize:14,pointerEvents:"auto"},B={border:"none",background:"white",color:"#111",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:600,fontSize:13},Te={...B,background:"#ef4444",color:"white"},$e={border:"1px solid rgba(255,255,255,0.4)",background:"transparent",color:"white",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:500,fontSize:13},Me={border:"none",background:"#10b981",color:"white",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:600,fontSize:13},q={opacity:.8,fontSize:12},oe={width:24,height:24,borderRadius:999,background:"#10b981",color:"white",border:"2px solid white",cursor:"pointer",fontSize:12,fontWeight:700,boxShadow:"0 2px 6px rgba(0,0,0,0.3)",display:"inline-flex",alignItems:"center",justifyContent:"center",padding:0},Fe={background:"white",border:"1px solid #e5e7eb",borderRadius:8,padding:12,width:280,boxShadow:"0 12px 32px rgba(0,0,0,0.18)",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',display:"flex",flexDirection:"column",gap:8,color:"#111"},Ne={width:"100%",border:"1px solid #d1d5db",borderRadius:6,padding:8,fontSize:14,resize:"vertical",fontFamily:"inherit",color:"#111",background:"white",boxSizing:"border-box"},ze={display:"flex",alignItems:"center",gap:6},_={border:"1px solid transparent",borderRadius:6,padding:"6px 10px",fontSize:13,cursor:"pointer",fontWeight:500},Be={..._,background:"#111",color:"white"},ie={..._,background:"transparent",color:"#374151",borderColor:"#d1d5db"},_e={..._,background:"transparent",color:"#b91c1c",borderColor:"#fecaca"},Ue={display:"flex",flexWrap:"wrap",gap:6},je={position:"relative",width:56,height:56,borderRadius:6,overflow:"hidden",border:"1px solid #e5e7eb",background:"#f9fafb"},Oe={width:"100%",height:"100%",objectFit:"cover",display:"block"},Xe={position:"absolute",top:2,right:2,width:18,height:18,borderRadius:999,border:"none",background:"rgba(17, 17, 17, 0.85)",color:"white",fontSize:13,lineHeight:"16px",cursor:"pointer",padding:0,display:"inline-flex",alignItems:"center",justifyContent:"center"},Ye={color:"#b91c1c",fontSize:12,margin:0},De={..._,background:"transparent",color:"#374151",borderColor:"#d1d5db",width:30,height:30,padding:0,display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0};function He(){return v("svg",{role:"img","aria-label":"Attach image",width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[s("title",{children:"Attach image"}),s("path",{d:"m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 17.93 8.83l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"})]})}function We(){return v(ae,{children:[s("style",{children:"@keyframes yns-attach-spin { to { transform: rotate(360deg); } }"}),s("span",{"aria-hidden":!0,style:{display:"inline-block",width:12,height:12,border:"2px solid rgba(55, 65, 81, 0.25)",borderTopColor:"#374151",borderRadius:999,animation:"yns-attach-spin 0.9s linear infinite"}})]})}var Ve=480;function se(){let[e,t]=P(!1);return A(()=>{let n=window.matchMedia(`(max-width: ${Ve}px)`),o=()=>t(n.matches);return o(),n.addEventListener("change",o),()=>n.removeEventListener("change",o)},[]),e}var qe=e=>{let t=e.name?.trim();return t?t.split(/\s+/).filter(Boolean).slice(0,2).map(o=>o[0]?.toUpperCase()??"").join(""):e.email[0]?.toUpperCase()??"?"};function re({user:e,size:t=22}){return e.image?s("img",{src:e.image,alt:"",width:t,height:t,style:{width:t,height:t,borderRadius:999,objectFit:"cover",display:"block",flexShrink:0}}):s("span",{"aria-hidden":!0,style:{width:t,height:t,borderRadius:999,background:"rgba(255,255,255,0.18)",color:"white",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:Math.max(10,Math.round(t*.45)),fontWeight:600,flexShrink:0},children:qe(e)})}function Ge({loginUrl:e}){return s("div",{"data-yns-feedback-ui":"true",children:v("div",{style:V,children:[s("span",{style:q,children:"Log in to provide feedback"}),s("button",{type:"button",onClick:()=>window.location.assign(ve(e)),style:B,children:"Log in"})]})})}function Ke({user:e,onSignOut:t}){let n=se();return s("div",{"data-yns-feedback-ui":"true",children:v("div",{style:V,children:[s(re,{user:e}),!n&&s("span",{style:Qe,children:e.email}),s("span",{style:q,children:"You don't have access to this store"}),s("button",{type:"button",onClick:t,style:B,children:"Sign out"})]})})}function Je({user:e,onSignOut:t}){let[n,o]=P(!1),i=z(null),p=se();A(()=>{if(!n)return;let c=g=>{i.current&&(g.target instanceof Node&&i.current.contains(g.target)||o(!1))};return document.addEventListener("mousedown",c),()=>document.removeEventListener("mousedown",c)},[n]);let d=e.name?.trim()||e.email,a=d.length>16?`${d.slice(0,16)}\u2026`:d;return v("div",{ref:i,style:{position:"relative"},children:[v("button",{type:"button",onClick:()=>o(c=>!c),style:Ze,"aria-haspopup":"menu","aria-expanded":n,title:d,children:[s(re,{user:e,size:20}),!p&&s("span",{style:et,children:a}),s("span",{"aria-hidden":!0,style:tt,children:"\u25BE"})]}),n&&s("div",{role:"menu",style:nt,children:s("button",{type:"button",role:"menuitem",onClick:()=>{o(!1),t()},style:ot,children:"Sign out"})})]})}var Qe={fontSize:13,color:"white",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:200},Ze={display:"inline-flex",alignItems:"center",gap:6,background:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.16)",color:"white",padding:"4px 8px 4px 4px",borderRadius:999,cursor:"pointer",fontSize:12,fontWeight:500,fontFamily:"inherit"},et={maxWidth:"16ch",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},tt={opacity:.7,fontSize:10},nt={position:"absolute",right:0,bottom:"calc(100% + 8px)",background:"white",color:"#111",border:"1px solid #e5e7eb",borderRadius:8,boxShadow:"0 12px 32px rgba(0,0,0,0.18)",minWidth:140,padding:4,zIndex:2147483647},ot={display:"block",width:"100%",textAlign:"left",background:"transparent",border:"none",padding:"6px 10px",fontSize:13,color:"#111",cursor:"pointer",borderRadius:6},it={position:"fixed",top:0,right:0,bottom:0,width:360,maxWidth:"92vw",background:"white",borderLeft:"1px solid #e5e7eb",boxShadow:"-12px 0 32px rgba(0,0,0,0.12)",zIndex:2147483646,display:"flex",flexDirection:"column",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',color:"#111"},st={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 16px",borderBottom:"1px solid #e5e7eb"},rt={flex:1,overflow:"auto",padding:"12px 12px 24px"},at={color:"#6b7280",fontSize:13,padding:"24px 8px",textAlign:"center"},lt={fontSize:11,textTransform:"uppercase",letterSpacing:.5,color:"#6b7280",padding:"4px 4px 6px",wordBreak:"break-all"},dt={display:"flex",alignItems:"flex-start",gap:8,width:"100%",textAlign:"left",background:"white",border:"1px solid #e5e7eb",borderRadius:6,padding:"8px 10px",cursor:"pointer",fontSize:13,marginBottom:6,color:"#111"},ct={flexShrink:0,width:22,height:22,borderRadius:999,background:"#10b981",color:"white",fontWeight:700,fontSize:11,display:"inline-flex",alignItems:"center",justifyContent:"center"},ut={flex:1,whiteSpace:"pre-wrap",wordBreak:"break-word"},pt={flexShrink:0,background:"#d1fae5",color:"#065f46",fontSize:11,fontWeight:600,padding:"2px 6px",borderRadius:4,alignSelf:"center"},mt={position:"fixed",bottom:16,left:"50%",transform:"translateX(-50%)",zIndex:2147483646,display:"flex",flexDirection:"column",gap:8,padding:"12px 16px",width:"min(420px, calc(100vw - 32px))",background:"white",border:"1px solid #e5e7eb",borderRadius:12,boxShadow:"0 12px 32px rgba(0,0,0,0.18)",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',color:"#111",pointerEvents:"auto"},ft={display:"flex",alignItems:"center",gap:8},gt={background:"#d1fae5",color:"#065f46",fontSize:11,fontWeight:700,padding:"2px 8px",borderRadius:999,textTransform:"uppercase",letterSpacing:.5},bt={display:"flex",justifyContent:"space-between",fontSize:12},yt={width:"100%",height:6,background:"#f3f4f6",borderRadius:999,overflow:"hidden"},ht={height:"100%",background:"#10b981",borderRadius:999,transition:"width 500ms"},St={margin:0,fontSize:12,color:"#6b7280"};function te(){if(console.log("[YNS Feedback Toolbar] mountFeedbackToolbar() called",{isWindow:typeof window<"u",vercelEnv:process.env.NEXT_PUBLIC_VERCEL_ENV,alreadyMounted:typeof document<"u"&&!!document.getElementById(D)}),typeof window>"u")return null;if(process.env.NEXT_PUBLIC_VERCEL_ENV!=="preview")return console.log("[YNS Feedback Toolbar] gate failed \u2014 NEXT_PUBLIC_VERCEL_ENV is",process.env.NEXT_PUBLIC_VERCEL_ENV),null;if(document.getElementById(D))return null;let e=document.createElement("div");e.id=D,e.dataset.ynsFeedbackUi="true",document.body.appendChild(e);let t=ce(e);return t.render(s(we,{})),{unmount:()=>{t.unmount(),e.remove()}}}typeof window<"u"&&console.log("[YNS Feedback Toolbar] module evaluated",{vercelEnv:process.env.NEXT_PUBLIC_VERCEL_ENV,readyState:document.readyState,willAutoMount:process.env.NEXT_PUBLIC_VERCEL_ENV==="preview"});typeof window<"u"&&process.env.NEXT_PUBLIC_VERCEL_ENV==="preview"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{te()}):te());function le(){typeof window>"u"||(console.log("[YNS Sandbox Inspectors] module evaluated"),xt(),Ct())}le();var vt=new Set(["HEAD","SCRIPT","STYLE","NOSCRIPT","HTML"]);function wt(e){if(e.id)return`${e.tagName.toLowerCase()}#${CSS.escape(e.id)}`;let t=[],n=e;for(;n&&n!==document.body&&n!==document.documentElement;){let o=n.tagName.toLowerCase();if(n.id){t.unshift(`${o}#${CSS.escape(n.id)}`);break}let i=Array.from(n.classList).filter(a=>!a.startsWith("data-yns-"));i.length>0&&(o+=`.${i.map(a=>CSS.escape(a)).join(".")}`);let p=n.parentElement,d=n.tagName;if(p&&Array.from(p.children).filter(c=>c.tagName===d&&(i.length===0||i.every(g=>c.classList.contains(g)))).length>1){let c=Array.from(p.children).indexOf(n)+1;o+=`:nth-child(${c})`}t.unshift(o),n=n.parentElement}return t.join(" > ")}function de(e,t){let n=e.getBoundingClientRect(),o=window.getComputedStyle(e),i=(e.textContent??"").trim();return{tag:e.tagName.toLowerCase(),id:e.id||void 0,classes:Array.from(e.classList).filter(p=>!p.startsWith("data-yns-")),textContent:i.length>t?`${i.slice(0,t)}\u2026`:i,cssSelector:wt(e),boundingRect:{top:n.top,left:n.left,width:n.width,height:n.height},computedStyles:{color:o.color,backgroundColor:o.backgroundColor,fontSize:o.fontSize,fontFamily:o.fontFamily,padding:o.padding,margin:o.margin}}}function U(e,t){if(!e?.tagName||vt.has(e.tagName))return!0;for(let n of t)if(e.hasAttribute?.(n))return!0;return!1}function xt(){let e=!1,t=null,n=null,o=document.createElement("div");o.setAttribute("data-yns-design-overlay","hover"),o.style.cssText=["position: fixed","pointer-events: none","z-index: 2147483646","border: 2px solid #3b82f6","background: rgba(59, 130, 246, 0.08)","border-radius: 3px","display: none","transition: top 0.05s, left 0.05s, width 0.05s, height 0.05s"].join(";");let i=document.createElement("div");i.setAttribute("data-yns-design-overlay","label"),i.style.cssText=["position: fixed","pointer-events: none","z-index: 2147483647","background: #3b82f6","color: #fff","font-size: 11px","font-family: ui-monospace, monospace","padding: 2px 6px","border-radius: 3px","white-space: nowrap","display: none"].join(";"),document.documentElement.appendChild(o),document.documentElement.appendChild(i);let p=document.createElement("style");p.setAttribute("data-yns-design-overlay","style"),p.textContent="[data-yns-selected] { outline: 2px solid #3b82f6 !important; outline-offset: 1px; }",document.head.appendChild(p);function d(y){let m=y.getBoundingClientRect();o.style.top=`${m.top}px`,o.style.left=`${m.left}px`,o.style.width=`${m.width}px`,o.style.height=`${m.height}px`,o.style.display="block";let f=Array.from(y.classList).filter(w=>!w.startsWith("data-yns-")),l=y.tagName.toLowerCase()+(f.length?`.${f[0]}`:"");i.textContent=l,i.style.left=`${m.left}px`,i.style.top=`${Math.max(0,m.top-22)}px`,i.style.display="block"}let a=y=>{let m=document.elementFromPoint(y.clientX,y.clientY);if(U(m,["data-yns-design-overlay"])){o.style.display="none",i.style.display="none",t=null;return}t=m,requestAnimationFrame(()=>{t===m&&e&&m&&d(m)})},c=()=>{o.style.display="none",i.style.display="none",t=null},g=y=>{if(!e||!t)return;y.preventDefault(),y.stopPropagation(),y.stopImmediatePropagation();let m=t;if(U(m,["data-yns-design-overlay"]))return;let f=de(m,120),l=f.cssSelector;n&&n.el.removeAttribute("data-yns-selected"),n&&n.cssSelector===l?(n=null,window.parent.postMessage({type:"element-deselected",data:f},"*")):(n={el:m,cssSelector:l},m.setAttribute("data-yns-selected",""),window.parent.postMessage({type:"element-selected",data:f},"*"))},x=y=>{y.key==="Escape"&&e&&(I(),window.parent.postMessage({type:"design-mode-cleared"},"*"))};function C(){e=!0,document.addEventListener("mousemove",a,!0),document.addEventListener("mouseleave",c),document.addEventListener("click",g,!0),document.addEventListener("keydown",x,!0)}function I(){e=!1,document.removeEventListener("mousemove",a,!0),document.removeEventListener("mouseleave",c),document.removeEventListener("click",g,!0),document.removeEventListener("keydown",x,!0),o.style.display="none",i.style.display="none",t=null,n&&(n.el.removeAttribute("data-yns-selected"),n=null)}window.addEventListener("message",y=>{let m=y.data;!m||typeof m!="object"||(m.type==="design-mode-toggle"&&(m.enabled?C():(I(),window.parent.postMessage({type:"design-mode-cleared"},"*"))),m.type==="design-mode-deselect"&&n&&(n.el.removeAttribute("data-yns-selected"),n=null))})}function Ct(){let e=!1,t=null,n=[],o=document.createElement("div");o.setAttribute("data-yns-comment-overlay","hover"),o.style.cssText=["position: fixed","pointer-events: none","z-index: 2147483644","border: 2px dashed #10b981","background: rgba(16, 185, 129, 0.06)","border-radius: 3px","display: none","transition: top 0.05s, left 0.05s, width 0.05s, height 0.05s"].join(";");let i=document.createElement("div");i.setAttribute("data-yns-comment-overlay","cursor-label"),i.textContent="Click to comment",i.style.cssText=["position: fixed","pointer-events: none","z-index: 2147483645","background: #059669","color: #fff","font-size: 11px","font-family: ui-sans-serif, system-ui, sans-serif","padding: 3px 8px","border-radius: 4px","white-space: nowrap","display: none","box-shadow: 0 2px 6px rgba(0,0,0,0.15)"].join(";");let p=document.createElement("div");p.setAttribute("data-yns-comment-overlay","pins"),p.style.cssText="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2147483643;",document.documentElement.appendChild(o),document.documentElement.appendChild(i),document.documentElement.appendChild(p);function d(){p.innerHTML="";for(let f of n){let l=null;try{l=document.querySelector(f.selector)}catch{l=null}if(!l)continue;let w=l.getBoundingClientRect(),R=document.createElement("div");R.style.cssText=["position: fixed",`top: ${w.top-12}px`,`left: ${w.left+w.width/2-12}px`,"width: 24px","height: 24px","border-radius: 50%","background: #059669","color: #fff","display: flex","align-items: center","justify-content: center","font-size: 12px","font-weight: 600","font-family: ui-sans-serif, system-ui, sans-serif","box-shadow: 0 2px 8px rgba(0,0,0,0.2)","pointer-events: none"].join(";"),R.textContent=String(f.number),p.appendChild(R)}}let a=f=>{let l=document.elementFromPoint(f.clientX,f.clientY);if(U(l,["data-yns-comment-overlay","data-yns-design-overlay"])){o.style.display="none",i.style.display="none",t=null;return}t=l,requestAnimationFrame(()=>{if(t===l&&e&&l){let w=l.getBoundingClientRect();o.style.top=`${w.top}px`,o.style.left=`${w.left}px`,o.style.width=`${w.width}px`,o.style.height=`${w.height}px`,o.style.display="block",i.style.left=`${f.clientX+14}px`,i.style.top=`${f.clientY+14}px`,i.style.display="block"}})},c=()=>{o.style.display="none",i.style.display="none",t=null},g=f=>{if(!e||!t)return;f.preventDefault(),f.stopPropagation(),f.stopImmediatePropagation();let l=t;if(U(l,["data-yns-comment-overlay","data-yns-design-overlay"]))return;let w=de(l,200),R=l.getBoundingClientRect();window.parent.postMessage({type:"comment-click",data:{element:w,clickPosition:{x:f.clientX,y:f.clientY},elementRect:{top:R.top,left:R.left,width:R.width,height:R.height},pagePath:window.location.pathname}},"*")},x=f=>{f.key==="Escape"&&e&&(I(),window.parent.postMessage({type:"comment-mode-cleared"},"*"))};function C(){e=!0,document.body.style.cursor="crosshair",document.addEventListener("mousemove",a,!0),document.addEventListener("mouseleave",c),document.addEventListener("click",g,!0),document.addEventListener("keydown",x,!0)}function I(){e=!1,document.body.style.cursor="",document.removeEventListener("mousemove",a,!0),document.removeEventListener("mouseleave",c),document.removeEventListener("click",g,!0),document.removeEventListener("keydown",x,!0),o.style.display="none",i.style.display="none",t=null}let y=!1,m=()=>{y||(y=!0,requestAnimationFrame(()=>{y=!1,d()}))};window.addEventListener("scroll",m,{passive:!0}),window.addEventListener("resize",m,{passive:!0}),window.addEventListener("message",f=>{let l=f.data;!l||typeof l!="object"||(l.type==="comment-mode-toggle"&&(l.enabled?C():I()),l.type==="comment-pins-update"&&(n=l.pins??[],d()),l.type==="comment-pin-remove"&&(n=n.filter(w=>w.id!==l.pinId),d()))})}export{te as mountFeedbackToolbar,le as startSandboxInspectors}; //# sourceMappingURL=browser.js.map