commerce-kit 0.36.11 → 0.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser.js +2 -2
- package/dist/browser.js.map +1 -1
- package/dist/feedback-toolbar.js +2 -2
- package/dist/feedback-toolbar.js.map +1 -1
- package/dist/index.d.ts +17 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/browser.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{useEffect as $,useRef as
|
|
2
|
-
`)},Y=e=>{let t=e;for(;t;){if(t instanceof HTMLElement&&t.dataset.ynsFeedbackUi==="true")return!0;t=t.parentElement}return!1},te=new Set(["HTML","HEAD","SCRIPT","STYLE","NOSCRIPT"]),ne=1e4,oe=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 s=Math.ceil(n/6e4);if(s<60)return`~${s} minutes (by ${o})`;let d=Math.round(n/36e5);if(d<24)return`~${d} ${d===1?"hour":"hours"} (by ${o})`;let l=Math.round(n/864e5);return`~${l} ${l===1?"day":"days"} (by ${o})`};function ie(){let[e,t]=C(null),[n,o]=C(!0),[s,d]=C(!1),[l,r]=C(null),[c,g]=C(null),[S,w]=C(!1),[I,y]=C(!1),u=j(null);$(()=>{if(u.current=J(),!u.current){o(!1);return}let i=!1,a=new AbortController,h=async()=>{try{let P=await fetch(`${u.current}/api/feedback-comments?host=${encodeURIComponent(window.location.host)}`,{credentials:"include",signal:a.signal});if(i)return;if(!P.ok){t(null);return}let k=await P.json();if(i)return;t(k),k.sessionStatus==="done"&&window.location.reload()}catch{i||t(null)}finally{i||o(!1)}};h();let f=window.setInterval(h,ne);return()=>{i=!0,a.abort(),window.clearInterval(f)}},[]),$(()=>{!e||e.canComment||(d(!1),r(null),w(!1),g(null))},[e]),$(()=>{if(s)return document.body.style.cursor="crosshair",()=>{document.body.style.cursor=""}},[s]),$(()=>{if(!s)return;let i=document.createElement("div");i.dataset.ynsFeedbackUi="true",i.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 a=document.createElement("div");a.dataset.ynsFeedbackUi="true",a.textContent="Click to comment",a.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(i),document.documentElement.appendChild(a);let h=null,f=k=>{let L=document.elementFromPoint(k.clientX,k.clientY);if(!L||te.has(L.tagName)||Y(L)){i.style.display="none",a.style.display="none",h=null;return}h=L,requestAnimationFrame(()=>{if(h!==L)return;let R=L.getBoundingClientRect();i.style.top=`${R.top}px`,i.style.left=`${R.left}px`,i.style.width=`${R.width}px`,i.style.height=`${R.height}px`,i.style.display="block",a.style.left=`${k.clientX+14}px`,a.style.top=`${k.clientY+14}px`,a.style.display="block"})},P=()=>{i.style.display="none",a.style.display="none",h=null};return document.addEventListener("mousemove",f,!0),document.addEventListener("mouseleave",P),()=>{document.removeEventListener("mousemove",f,!0),document.removeEventListener("mouseleave",P),i.remove(),a.remove()}},[s]),$(()=>{if(!s)return;let i=a=>{let h=a.target;if(!(h instanceof Element)||Y(h))return;a.preventDefault(),a.stopPropagation();let f=h.getBoundingClientRect(),P=f.width>0?(a.clientX-f.left)/f.width:.5,k=f.height>0?(a.clientY-f.top)/f.height:.5;r({cssSelector:Q(h),pagePath:window.location.pathname,surroundingHtml:ee(h),rect:{top:f.top+window.scrollY,left:f.left+window.scrollX,width:f.width,height:f.height},clickX:a.clientX+window.scrollX,clickY:a.clientY+window.scrollY,offsetXRatio:Math.min(1,Math.max(0,P)),offsetYRatio:Math.min(1,Math.max(0,k))}),d(!1)};return document.addEventListener("click",i,{capture:!0}),()=>document.removeEventListener("click",i,{capture:!0})},[s]);let b=async()=>{if(!u.current)return;let i=await fetch(`${u.current}/api/feedback-comments?host=${encodeURIComponent(window.location.host)}`,{credentials:"include"});if(!i.ok)return;let a=await i.json();t(a)},m=async(i,a)=>{!u.current||!e||!l||!(await fetch(`${u.current}/api/feedback-comments`,{method:"POST",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({feedbackSessionId:e.feedbackSessionId,content:i,pagePath:l.pagePath,cssSelector:l.cssSelector,surroundingHtml:l.surroundingHtml,offsetXRatio:l.offsetXRatio,offsetYRatio:l.offsetYRatio,...a.length>0?{attachments:a}:{}})})).ok||(r(null),d(!0),await b())},v=async(i,a,h)=>{!u.current||!(await fetch(`${u.current}/api/feedback-comments/${i}`,{method:"PATCH",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({content:a,attachments:h})})).ok||(g(null),await b())},E=async i=>{!u.current||!(await fetch(`${u.current}/api/feedback-comments/${i}`,{method:"DELETE",credentials:"include"})).ok||await b()},M=async()=>{if(!(!u.current||!e)&&window.confirm("Finalize this feedback session? You won't be able to add more comments.")){y(!0);try{let i=await fetch(`${u.current}/api/feedback-sessions/${e.feedbackSessionId}/finalize`,{method:"POST",credentials:"include"});if(!i.ok)return;let h=(await i.json().catch(()=>null))?.status??"processing";t(f=>f&&{...f,canComment:!1,sessionStatus:h})}finally{y(!1)}}},z=i=>{if(i.pagePath!==window.location.pathname){window.location.assign(i.pagePath);return}let a=null;try{a=document.querySelector(i.cssSelector)}catch{a=null}a&&(a.scrollIntoView({behavior:"smooth",block:"center"}),g(i.id))};if(n||!e)return null;if(!e.canComment)return e.sessionStatus!=="processing"&&e.sessionStatus!=="in_review"?null:p("div",{"data-yns-feedback-ui":"true",children:p(se,{progress:e.progress,eta:e.eta,status:e.sessionStatus})});let A=e.comments.filter(i=>i.pagePath===window.location.pathname&&i.status!=="done");return x("div",{"data-yns-feedback-ui":"true",children:[A.map((i,a)=>p(le,{pin:i,number:a+1,editing:c===i.id,feedbackSessionId:e.feedbackSessionId,apiBase:u.current,onStartEdit:()=>g(i.id),onCancelEdit:()=>g(null),onSave:(h,f)=>v(i.id,h,f),onRemove:()=>E(i.id)},i.id)),l&&p(de,{pending:l,feedbackSessionId:e.feedbackSessionId,apiBase:u.current,onCancel:()=>{r(null),d(!0)},onSave:(i,a)=>m(i,a)}),S&&p(ce,{comments:e.comments,currentPath:window.location.pathname,onClose:()=>w(!1),onSelect:z}),x("div",{style:fe,children:[p("button",{type:"button",onClick:()=>d(i=>!i),style:s?ge:W,children:s?"Cancel":"Add comment"}),p("button",{type:"button",onClick:()=>w(i=>!i),style:be,children:S?"Hide list":`List (${e.comments.length})`}),p("button",{type:"button",onClick:M,disabled:I,style:ye,children:I?"Finalizing\u2026":"Finalize"}),p("span",{style:he,children:s?"Click any element to comment":`${A.length} on this page`})]})]})}function se({progress:e,eta:t,status:n}){let[,o]=C(0);$(()=>{let r=window.setInterval(()=>o(c=>c+1),6e4);return()=>window.clearInterval(r)},[]);let s=oe(t);return x("div",{style:_e,children:[p("style",{children:re}),x("div",{style:je,children:[p(ae,{}),p("span",{style:Ue,children:"Submitted"}),p("strong",{style:{fontSize:13},children:n==="in_review"?"Feedback under review":"Applying feedback"})]}),x("div",{style:Xe,children:[p("span",{children:"Review progress"}),p("span",{style:{opacity:.7},children:e.label})]}),p("div",{style:De,children:p("div",{style:{...Ye,width:`${e.fillPct}%`}})}),x("p",{style:He,children:["Estimated delivery: ",p("span",{style:{fontWeight:600},children:s})]})]})}var re="@keyframes yns-feedback-spin { to { transform: rotate(360deg); } }";function ae({size:e=14}){return p("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 le({pin:e,number:t,editing:n,feedbackSessionId:o,apiBase:s,onStartEdit:d,onCancelEdit:l,onSave:r,onRemove:c}){let g=me(e.cssSelector,e.offsetXRatio,e.offsetYRatio);return g?x("div",{style:{position:"absolute",top:g.top,left:g.left,zIndex:2147483600,pointerEvents:"auto"},children:[p("button",{type:"button",onClick:d,style:V,title:e.content,children:t}),n&&p(O,{initial:e.content,initialAttachments:e.attachments,feedbackSessionId:o,apiBase:s,onCancel:l,onSave:r,onRemove:c})]}):null}function de({pending:e,feedbackSessionId:t,apiBase:n,onCancel:o,onSave:s}){return x(Oe,{children:[p("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:p("div",{style:V,children:"\u2022"})}),p("div",{style:{position:"absolute",top:e.clickY+10,left:e.clickX+10,zIndex:2147483647},children:p(O,{initial:"",initialAttachments:[],feedbackSessionId:t,apiBase:n,onCancel:o,onSave:s})})]})}function ce({comments:e,currentPath:t,onClose:n,onSelect:o}){let s=new Map;for(let l of e){let r=s.get(l.pagePath)??[];r.push(l),s.set(l.pagePath,r)}let d=Array.from(s.keys()).sort((l,r)=>l===t?-1:r===t?1:l.localeCompare(r));return x("div",{style:Le,children:[x("div",{style:$e,children:[x("strong",{style:{fontSize:14},children:["Comments (",e.length,")"]}),p("button",{type:"button",onClick:n,style:U,children:"Close"})]}),p("div",{style:Ae,children:e.length===0?p("div",{style:Te,children:"No comments yet. Click \u201CAdd comment\u201D to leave one."}):d.map(l=>x("div",{style:{marginBottom:12},children:[p("div",{style:Fe,children:l===t?`${l} \xB7 current`:l}),(s.get(l)??[]).map((r,c)=>x("button",{type:"button",onClick:()=>o(r),style:Me,disabled:r.status==="done"&&!1,children:[p("span",{style:ze,children:c+1}),p("span",{style:Ne,children:r.content.length>140?`${r.content.slice(0,140)}\u2026`:r.content}),r.status==="done"&&p("span",{style:Be,children:"done"})]},r.id))]},l))})]})}var _=5,ue=5*1024*1024,pe=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 O({initial:e,initialAttachments:t,feedbackSessionId:n,apiBase:o,onCancel:s,onSave:d,onRemove:l}){let[r,c]=C(e),[g,S]=C(t),[w,I]=C(!1),[y,u]=C(!1),[b,m]=C(null),v=j(null),E=j(null);$(()=>{let i=v.current;if(!i)return;i.focus();let a=i.value.length;i.setSelectionRange(a,a)},[]);let M=async i=>{i.preventDefault();let a=r.trim();if(a){I(!0);try{await d(a,g)}finally{I(!1)}}},z=async i=>{if(!i||i.length===0||!o)return;m(null);let a=_-g.length;if(a<=0){m(`Max ${_} images per comment`);return}let h=Array.from(i).slice(0,a);for(let f of h){if(!f.type.startsWith("image/")){m(`"${f.name}" is not an image`);return}if(f.size>ue){m(`"${f.name}" exceeds 5 MB`);return}}u(!0);try{let f=await Promise.all(h.map(pe)),P=new FormData;h.forEach((R,T)=>{P.append("file",R),P.append("width",f[T]?.width?String(f[T]?.width):""),P.append("height",f[T]?.height?String(f[T]?.height):"")});let k=await fetch(`${o}/api/feedback-comments/uploads?feedbackSessionId=${encodeURIComponent(n)}`,{method:"POST",credentials:"include",body:P});if(!k.ok){let R=await k.json().catch(()=>null);m(R?.error??"Upload failed");return}let L=await k.json();S(R=>[...R,...L.uploads])}catch{m("Upload failed")}finally{u(!1),E.current&&(E.current.value="")}},A=i=>{S(a=>a.filter(h=>h.url!==i))};return x("form",{onSubmit:M,style:Se,children:[p("textarea",{ref:v,value:r,onChange:i=>c(i.target.value),placeholder:"Leave a comment\u2026",style:ve,rows:3}),g.length>0&&p("div",{style:Ce,children:g.map(i=>x("div",{style:ke,children:[p("img",{src:i.url,alt:"",style:Pe}),p("button",{type:"button",onClick:()=>A(i.url),style:Ie,disabled:w||y,"aria-label":"Remove attachment",children:"\xD7"})]},i.url))}),b&&p("div",{style:Re,children:b}),p("input",{ref:E,type:"file",accept:"image/*",multiple:!0,onChange:i=>void z(i.target.files),style:{display:"none"}}),x("div",{style:we,children:[l&&p("button",{type:"button",onClick:()=>l(),style:Ee,disabled:w,children:"Delete"}),p("button",{type:"button",onClick:()=>E.current?.click(),style:U,disabled:w||y||g.length>=_,children:y?"Uploading\u2026":`Attach image${g.length>0?` (${g.length})`:""}`}),p("div",{style:{flex:1}}),p("button",{type:"button",onClick:s,style:U,disabled:w,children:"Cancel"}),p("button",{type:"submit",style:xe,disabled:w||y||!r.trim(),children:w?"Saving\u2026":"Save"})]})]})}function me(e,t,n){let[o,s]=C(null);return $(()=>{let d=()=>{let r=null;try{r=document.querySelector(e)}catch{r=null}if(!r){s(null);return}let c=r.getBoundingClientRect();s({top:c.top+window.scrollY+c.height*n-12,left:c.left+window.scrollX+c.width*t-12})};d();let l=new ResizeObserver(d);try{let r=document.querySelector(e);r&&l.observe(r)}catch{}return window.addEventListener("scroll",d,!0),window.addEventListener("resize",d),()=>{l.disconnect(),window.removeEventListener("scroll",d,!0),window.removeEventListener("resize",d)}},[e,t,n]),o}var fe={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"},W={border:"none",background:"white",color:"#111",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:600,fontSize:13},ge={...W,background:"#ef4444",color:"white"},be={border:"1px solid rgba(255,255,255,0.4)",background:"transparent",color:"white",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:500,fontSize:13},ye={border:"none",background:"#10b981",color:"white",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:600,fontSize:13},he={opacity:.8,fontSize:12},V={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},Se={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"},ve={width:"100%",border:"1px solid #d1d5db",borderRadius:6,padding:8,fontSize:14,resize:"vertical",fontFamily:"inherit",color:"#111",background:"white",boxSizing:"border-box"},we={display:"flex",alignItems:"center",gap:6},X={border:"1px solid transparent",borderRadius:6,padding:"6px 10px",fontSize:13,cursor:"pointer",fontWeight:500},xe={...X,background:"#111",color:"white"},U={...X,background:"transparent",color:"#374151",borderColor:"#d1d5db"},Ee={...X,background:"transparent",color:"#b91c1c",borderColor:"#fecaca"},Ce={display:"flex",flexWrap:"wrap",gap:6},ke={position:"relative",width:56,height:56,borderRadius:6,overflow:"hidden",border:"1px solid #e5e7eb",background:"#f9fafb"},Pe={width:"100%",height:"100%",objectFit:"cover",display:"block"},Ie={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"},Re={color:"#b91c1c",fontSize:12,margin:0},Le={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"},$e={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 16px",borderBottom:"1px solid #e5e7eb"},Ae={flex:1,overflow:"auto",padding:"12px 12px 24px"},Te={color:"#6b7280",fontSize:13,padding:"24px 8px",textAlign:"center"},Fe={fontSize:11,textTransform:"uppercase",letterSpacing:.5,color:"#6b7280",padding:"4px 4px 6px",wordBreak:"break-all"},Me={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"},ze={flexShrink:0,width:22,height:22,borderRadius:999,background:"#10b981",color:"white",fontWeight:700,fontSize:11,display:"inline-flex",alignItems:"center",justifyContent:"center"},Ne={flex:1,whiteSpace:"pre-wrap",wordBreak:"break-word"},Be={flexShrink:0,background:"#d1fae5",color:"#065f46",fontSize:11,fontWeight:600,padding:"2px 6px",borderRadius:4,alignSelf:"center"},_e={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"},je={display:"flex",alignItems:"center",gap:8},Ue={background:"#d1fae5",color:"#065f46",fontSize:11,fontWeight:700,padding:"2px 8px",borderRadius:999,textTransform:"uppercase",letterSpacing:.5},Xe={display:"flex",justifyContent:"space-between",fontSize:12},De={width:"100%",height:6,background:"#f3f4f6",borderRadius:999,overflow:"hidden"},Ye={height:"100%",background:"#10b981",borderRadius:999,transition:"width 500ms"},He={margin:0,fontSize:12,color:"#6b7280"};function H(){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(N)}),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(N))return null;let e=document.createElement("div");e.id=N,e.dataset.ynsFeedbackUi="true",document.body.appendChild(e);let t=K(e);return t.render(p(ie,{})),{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",()=>{H()}):H());function q(){typeof window>"u"||(console.log("[YNS Sandbox Inspectors] module evaluated"),qe(),Ge())}q();var We=new Set(["HEAD","SCRIPT","STYLE","NOSCRIPT","HTML"]);function Ve(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 s=Array.from(n.classList).filter(r=>!r.startsWith("data-yns-"));s.length>0&&(o+=`.${s.map(r=>CSS.escape(r)).join(".")}`);let d=n.parentElement,l=n.tagName;if(d&&Array.from(d.children).filter(c=>c.tagName===l&&(s.length===0||s.every(g=>c.classList.contains(g)))).length>1){let c=Array.from(d.children).indexOf(n)+1;o+=`:nth-child(${c})`}t.unshift(o),n=n.parentElement}return t.join(" > ")}function G(e,t){let n=e.getBoundingClientRect(),o=window.getComputedStyle(e),s=(e.textContent??"").trim();return{tag:e.tagName.toLowerCase(),id:e.id||void 0,classes:Array.from(e.classList).filter(d=>!d.startsWith("data-yns-")),textContent:s.length>t?`${s.slice(0,t)}\u2026`:s,cssSelector:Ve(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 F(e,t){if(!e||!e.tagName||We.has(e.tagName))return!0;for(let n of t)if(e.hasAttribute?.(n))return!0;return!1}function qe(){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 s=document.createElement("div");s.setAttribute("data-yns-design-overlay","label"),s.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(s);let d=document.createElement("style");d.setAttribute("data-yns-design-overlay","style"),d.textContent="[data-yns-selected] { outline: 2px solid #3b82f6 !important; outline-offset: 1px; }",document.head.appendChild(d);function l(y){let u=y.getBoundingClientRect();o.style.top=`${u.top}px`,o.style.left=`${u.left}px`,o.style.width=`${u.width}px`,o.style.height=`${u.height}px`,o.style.display="block";let b=Array.from(y.classList).filter(v=>!v.startsWith("data-yns-")),m=y.tagName.toLowerCase()+(b.length?`.${b[0]}`:"");s.textContent=m,s.style.left=`${u.left}px`,s.style.top=`${Math.max(0,u.top-22)}px`,s.style.display="block"}let r=y=>{let u=document.elementFromPoint(y.clientX,y.clientY);if(F(u,["data-yns-design-overlay"])){o.style.display="none",s.style.display="none",t=null;return}t=u,requestAnimationFrame(()=>{t===u&&e&&u&&l(u)})},c=()=>{o.style.display="none",s.style.display="none",t=null},g=y=>{if(!e||!t)return;y.preventDefault(),y.stopPropagation(),y.stopImmediatePropagation();let u=t;if(F(u,["data-yns-design-overlay"]))return;let b=G(u,120),m=b.cssSelector;n&&n.el.removeAttribute("data-yns-selected"),n&&n.cssSelector===m?(n=null,window.parent.postMessage({type:"element-deselected",data:b},"*")):(n={el:u,cssSelector:m},u.setAttribute("data-yns-selected",""),window.parent.postMessage({type:"element-selected",data:b},"*"))},S=y=>{y.key==="Escape"&&e&&(I(),window.parent.postMessage({type:"design-mode-cleared"},"*"))};function w(){e=!0,document.addEventListener("mousemove",r,!0),document.addEventListener("mouseleave",c),document.addEventListener("click",g,!0),document.addEventListener("keydown",S,!0)}function I(){e=!1,document.removeEventListener("mousemove",r,!0),document.removeEventListener("mouseleave",c),document.removeEventListener("click",g,!0),document.removeEventListener("keydown",S,!0),o.style.display="none",s.style.display="none",t=null,n&&(n.el.removeAttribute("data-yns-selected"),n=null)}window.addEventListener("message",y=>{let u=y.data;!u||typeof u!="object"||(u.type==="design-mode-toggle"&&(u.enabled?w():(I(),window.parent.postMessage({type:"design-mode-cleared"},"*"))),u.type==="design-mode-deselect"&&n&&(n.el.removeAttribute("data-yns-selected"),n=null))})}function Ge(){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 s=document.createElement("div");s.setAttribute("data-yns-comment-overlay","cursor-label"),s.textContent="Click to comment",s.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 d=document.createElement("div");d.setAttribute("data-yns-comment-overlay","pins"),d.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(s),document.documentElement.appendChild(d);function l(){d.innerHTML="";for(let b of n){let m=null;try{m=document.querySelector(b.selector)}catch{m=null}if(!m)continue;let v=m.getBoundingClientRect(),E=document.createElement("div");E.style.cssText=["position: fixed",`top: ${v.top-12}px`,`left: ${v.left+v.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(";"),E.textContent=String(b.number),d.appendChild(E)}}let r=b=>{let m=document.elementFromPoint(b.clientX,b.clientY);if(F(m,["data-yns-comment-overlay","data-yns-design-overlay"])){o.style.display="none",s.style.display="none",t=null;return}t=m,requestAnimationFrame(()=>{if(t===m&&e&&m){let v=m.getBoundingClientRect();o.style.top=`${v.top}px`,o.style.left=`${v.left}px`,o.style.width=`${v.width}px`,o.style.height=`${v.height}px`,o.style.display="block",s.style.left=`${b.clientX+14}px`,s.style.top=`${b.clientY+14}px`,s.style.display="block"}})},c=()=>{o.style.display="none",s.style.display="none",t=null},g=b=>{if(!e||!t)return;b.preventDefault(),b.stopPropagation(),b.stopImmediatePropagation();let m=t;if(F(m,["data-yns-comment-overlay","data-yns-design-overlay"]))return;let v=G(m,200),E=m.getBoundingClientRect();window.parent.postMessage({type:"comment-click",data:{element:v,clickPosition:{x:b.clientX,y:b.clientY},elementRect:{top:E.top,left:E.left,width:E.width,height:E.height},pagePath:window.location.pathname}},"*")},S=b=>{b.key==="Escape"&&e&&(I(),window.parent.postMessage({type:"comment-mode-cleared"},"*"))};function w(){e=!0,document.body.style.cursor="crosshair",document.addEventListener("mousemove",r,!0),document.addEventListener("mouseleave",c),document.addEventListener("click",g,!0),document.addEventListener("keydown",S,!0)}function I(){e=!1,document.body.style.cursor="",document.removeEventListener("mousemove",r,!0),document.removeEventListener("mouseleave",c),document.removeEventListener("click",g,!0),document.removeEventListener("keydown",S,!0),o.style.display="none",s.style.display="none",t=null}let y=!1,u=()=>{y||(y=!0,requestAnimationFrame(()=>{y=!1,l()}))};window.addEventListener("scroll",u,{passive:!0}),window.addEventListener("resize",u,{passive:!0}),window.addEventListener("message",b=>{let m=b.data;!m||typeof m!="object"||(m.type==="comment-mode-toggle"&&(m.enabled?w():I()),m.type==="comment-pins-update"&&(n=m.pins??[],l()),m.type==="comment-pin-remove"&&(n=n.filter(v=>v.id!==m.pinId),l()))})}export{H as mountFeedbackToolbar,q as startSandboxInspectors};
|
|
1
|
+
import{useEffect as $,useRef as U,useState as E}from"react";import{createRoot as J}from"react-dom/client";import{Fragment as q,jsx as l,jsxs as w}from"react/jsx-runtime";var B="yns-feedback-toolbar-root",Q=()=>{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},Z=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(),s=n.getAttribute("class");if(s){let r=s.split(/\s+/).filter(Boolean).slice(0,2).map(u=>`.${CSS.escape(u)}`).join("");o+=r}let c=n.parentElement,d=n.tagName;if(c){let r=Array.from(c.children).filter(u=>u.tagName===d);if(r.length>1){let u=r.indexOf(n)+1;o+=`:nth-of-type(${u})`}}t.unshift(o),n=c}return t.join(" > ")},ee=["id","class","data-testid","aria-label","role","name","href","src"],_=e=>{let t=[];for(let n of ee){let o=e.getAttribute(n);if(!o)continue;let s=o.length>80?`${o.slice(0,80)}\u2026`:o;t.push(` ${n}="${s.replace(/"/g,""")}"`)}return t.join("")},X=e=>{let t=(e.textContent??"").replace(/\s+/g," ").trim();return t?t.length>100?`${t.slice(0,100)}\u2026`:t:""},te=e=>{let t=[],n=e;for(;n&&n!==document.documentElement&&t.length<5;){let u=n.parentElement;if(!u)break;t.unshift(u),n=u}let o=[],s=0;for(let u of t){let b=" ".repeat(s);o.push(`${b}<${u.tagName.toLowerCase()}${_(u)}>`),s++}let c=" ".repeat(s),d=e.tagName.toLowerCase(),r=X(e);if(o.push(`${c}<${d}${_(e)}>${r?`${r}</${d}>`:""} \u2190 TARGET`),!r){let u=" ".repeat(s+1),b=Array.from(e.children).slice(0,6);for(let S of b){let x=X(S);o.push(`${u}<${S.tagName.toLowerCase()}${_(S)}>${x?`${x}</${S.tagName.toLowerCase()}>`:""}`)}e.children.length>6&&o.push(`${u}\u2026 (${e.children.length-6} more children)`),o.push(`${c}</${d}>`)}for(let u=t.length-1;u>=0;u--){let b=" ".repeat(u),S=t[u];S&&o.push(`${b}</${S.tagName.toLowerCase()}>`)}return o.join(`
|
|
2
|
+
`)},D=e=>{let t=e;for(;t;){if(t instanceof HTMLElement&&t.dataset.ynsFeedbackUi==="true")return!0;t=t.parentElement}return!1},ne=new Set(["HTML","HEAD","SCRIPT","STYLE","NOSCRIPT"]),oe=1e4,ie=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 s=Math.ceil(n/6e4);if(s<60)return`~${s} minutes (by ${o})`;let c=Math.round(n/36e5);if(c<24)return`~${c} ${c===1?"hour":"hours"} (by ${o})`;let d=Math.round(n/864e5);return`~${d} ${d===1?"day":"days"} (by ${o})`};function se(){let[e,t]=E(null),[n,o]=E(!0),[s,c]=E(!1),[d,r]=E(null),[u,b]=E(null),[S,x]=E(!1),[I,y]=E(!1),p=U(null);$(()=>{if(p.current=Q(),!p.current){o(!1);return}let i=!1,a=new AbortController,h=async()=>{try{let P=await fetch(`${p.current}/api/feedback-comments?host=${encodeURIComponent(window.location.host)}`,{credentials:"include",signal:a.signal});if(i)return;if(!P.ok){t(null);return}let k=await P.json();if(i)return;t(k),k.sessionStatus==="done"&&window.location.reload()}catch{i||t(null)}finally{i||o(!1)}};h();let f=window.setInterval(h,oe);return()=>{i=!0,a.abort(),window.clearInterval(f)}},[]),$(()=>{!e||e.canComment||(c(!1),r(null),x(!1),b(null))},[e]),$(()=>{if(s)return document.body.style.cursor="crosshair",()=>{document.body.style.cursor=""}},[s]),$(()=>{if(!s)return;let i=document.createElement("div");i.dataset.ynsFeedbackUi="true",i.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 a=document.createElement("div");a.dataset.ynsFeedbackUi="true",a.textContent="Click to comment",a.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(i),document.documentElement.appendChild(a);let h=null,f=k=>{let R=document.elementFromPoint(k.clientX,k.clientY);if(!R||ne.has(R.tagName)||D(R)){i.style.display="none",a.style.display="none",h=null;return}h=R,requestAnimationFrame(()=>{if(h!==R)return;let L=R.getBoundingClientRect();i.style.top=`${L.top}px`,i.style.left=`${L.left}px`,i.style.width=`${L.width}px`,i.style.height=`${L.height}px`,i.style.display="block",a.style.left=`${k.clientX+14}px`,a.style.top=`${k.clientY+14}px`,a.style.display="block"})},P=()=>{i.style.display="none",a.style.display="none",h=null};return document.addEventListener("mousemove",f,!0),document.addEventListener("mouseleave",P),()=>{document.removeEventListener("mousemove",f,!0),document.removeEventListener("mouseleave",P),i.remove(),a.remove()}},[s]),$(()=>{if(!s)return;let i=a=>{let h=a.target;if(!(h instanceof Element)||D(h))return;a.preventDefault(),a.stopPropagation();let f=h.getBoundingClientRect(),P=f.width>0?(a.clientX-f.left)/f.width:.5,k=f.height>0?(a.clientY-f.top)/f.height:.5;r({cssSelector:Z(h),pagePath:window.location.pathname,surroundingHtml:te(h),rect:{top:f.top+window.scrollY,left:f.left+window.scrollX,width:f.width,height:f.height},clickX:a.clientX+window.scrollX,clickY:a.clientY+window.scrollY,offsetXRatio:Math.min(1,Math.max(0,P)),offsetYRatio:Math.min(1,Math.max(0,k))}),c(!1)};return document.addEventListener("click",i,{capture:!0}),()=>document.removeEventListener("click",i,{capture:!0})},[s]);let g=async()=>{if(!p.current)return;let i=await fetch(`${p.current}/api/feedback-comments?host=${encodeURIComponent(window.location.host)}`,{credentials:"include"});if(!i.ok)return;let a=await i.json();t(a)},m=async(i,a)=>{!p.current||!e||!d||!(await fetch(`${p.current}/api/feedback-comments`,{method:"POST",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({feedbackSessionId:e.feedbackSessionId,content:i,pagePath:d.pagePath,cssSelector:d.cssSelector,surroundingHtml:d.surroundingHtml,offsetXRatio:d.offsetXRatio,offsetYRatio:d.offsetYRatio,...a.length>0?{attachments:a}:{}})})).ok||(r(null),c(!0),await g())},v=async(i,a,h)=>{!p.current||!(await fetch(`${p.current}/api/feedback-comments/${i}`,{method:"PATCH",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({content:a,attachments:h})})).ok||(b(null),await g())},C=async i=>{!p.current||!(await fetch(`${p.current}/api/feedback-comments/${i}`,{method:"DELETE",credentials:"include"})).ok||await g()},z=async()=>{if(!(!p.current||!e)&&window.confirm("Finalize this feedback session? You won't be able to add more comments.")){y(!0);try{let i=await fetch(`${p.current}/api/feedback-sessions/${e.feedbackSessionId}/finalize`,{method:"POST",credentials:"include"});if(!i.ok)return;let h=(await i.json().catch(()=>null))?.status??"processing";t(f=>f&&{...f,canComment:!1,sessionStatus:h})}finally{y(!1)}}},N=i=>{if(i.pagePath!==window.location.pathname){window.location.assign(i.pagePath);return}let a=null;try{a=document.querySelector(i.cssSelector)}catch{a=null}a&&(a.scrollIntoView({behavior:"smooth",block:"center"}),b(i.id))};if(n||!e)return null;if(!e.canComment)return e.sessionStatus!=="processing"&&e.sessionStatus!=="in_review"?null:l("div",{"data-yns-feedback-ui":"true",children:l(re,{progress:e.progress,eta:e.eta,status:e.sessionStatus})});let A=e.comments.filter(i=>i.pagePath===window.location.pathname&&i.status!=="done");return w("div",{"data-yns-feedback-ui":"true",children:[A.map((i,a)=>l(de,{pin:i,number:a+1,editing:u===i.id,feedbackSessionId:e.feedbackSessionId,apiBase:p.current,onStartEdit:()=>b(i.id),onCancelEdit:()=>b(null),onSave:(h,f)=>v(i.id,h,f),onRemove:()=>C(i.id)},i.id)),d&&l(ce,{pending:d,feedbackSessionId:e.feedbackSessionId,apiBase:p.current,onCancel:()=>{r(null),c(!0)},onSave:(i,a)=>m(i,a)}),S&&l(ue,{comments:e.comments,currentPath:window.location.pathname,onClose:()=>x(!1),onSelect:N}),w("div",{style:ge,children:[l("button",{type:"button",onClick:()=>c(i=>!i),style:s?be:O,children:s?"Cancel":"Add comment"}),l("button",{type:"button",onClick:()=>x(i=>!i),style:ye,children:S?"Hide list":`List (${e.comments.length})`}),l("button",{type:"button",onClick:z,disabled:I,style:he,children:I?"Finalizing\u2026":"Finalize"}),l("span",{style:Se,children:s?"Click any element to comment":`${A.length} on this page`})]})]})}function re({progress:e,eta:t,status:n}){let[,o]=E(0);$(()=>{let r=window.setInterval(()=>o(u=>u+1),6e4);return()=>window.clearInterval(r)},[]);let s=ie(t);return w("div",{style:De,children:[l("style",{children:ae}),w("div",{style:Ye,children:[l(le,{}),l("span",{style:He,children:"Submitted"}),l("strong",{style:{fontSize:13},children:n==="in_review"?"Feedback under review":"Applying feedback"})]}),w("div",{style:Oe,children:[l("span",{children:"Review progress"}),l("span",{style:{opacity:.7},children:e.label})]}),l("div",{style:We,children:l("div",{style:{...Ve,width:`${e.fillPct}%`}})}),w("p",{style:qe,children:["Estimated delivery: ",l("span",{style:{fontWeight:600},children:s})]})]})}var ae="@keyframes yns-feedback-spin { to { transform: rotate(360deg); } }";function le({size:e=14}){return l("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 de({pin:e,number:t,editing:n,feedbackSessionId:o,apiBase:s,onStartEdit:c,onCancelEdit:d,onSave:r,onRemove:u}){let b=fe(e.cssSelector,e.offsetXRatio,e.offsetYRatio);return b?w("div",{style:{position:"absolute",top:b.top,left:b.left,zIndex:2147483600,pointerEvents:"auto"},children:[l("button",{type:"button",onClick:c,style:W,title:e.content,children:t}),n&&l(H,{initial:e.content,initialAttachments:e.attachments,feedbackSessionId:o,apiBase:s,onCancel:d,onSave:r,onRemove:u})]}):null}function ce({pending:e,feedbackSessionId:t,apiBase:n,onCancel:o,onSave:s}){return w(q,{children:[l("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:l("div",{style:W,children:"\u2022"})}),l("div",{style:{position:"absolute",top:e.clickY+10,left:e.clickX+10,zIndex:2147483647},children:l(H,{initial:"",initialAttachments:[],feedbackSessionId:t,apiBase:n,onCancel:o,onSave:s})})]})}function ue({comments:e,currentPath:t,onClose:n,onSelect:o}){let s=new Map;for(let d of e){let r=s.get(d.pagePath)??[];r.push(d),s.set(d.pagePath,r)}let c=Array.from(s.keys()).sort((d,r)=>d===t?-1:r===t?1:d.localeCompare(r));return w("div",{style:Fe,children:[w("div",{style:Me,children:[w("strong",{style:{fontSize:14},children:["Comments (",e.length,")"]}),l("button",{type:"button",onClick:n,style:V,children:"Close"})]}),l("div",{style:ze,children:e.length===0?l("div",{style:Ne,children:"No comments yet. Click \u201CAdd comment\u201D to leave one."}):c.map(d=>w("div",{style:{marginBottom:12},children:[l("div",{style:Be,children:d===t?`${d} \xB7 current`:d}),(s.get(d)??[]).map((r,u)=>w("button",{type:"button",onClick:()=>o(r),style:_e,disabled:r.status==="done"&&!1,children:[l("span",{style:je,children:u+1}),l("span",{style:Ue,children:r.content.length>140?`${r.content.slice(0,140)}\u2026`:r.content}),r.status==="done"&&l("span",{style:Xe,children:"done"})]},r.id))]},d))})]})}var j=5,pe=5*1024*1024,me=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 H({initial:e,initialAttachments:t,feedbackSessionId:n,apiBase:o,onCancel:s,onSave:c,onRemove:d}){let[r,u]=E(e),[b,S]=E(t),[x,I]=E(!1),[y,p]=E(!1),[g,m]=E(null),v=U(null),C=U(null);$(()=>{let i=v.current;if(!i)return;i.focus();let a=i.value.length;i.setSelectionRange(a,a)},[]);let z=async i=>{i.preventDefault();let a=r.trim();if(a){I(!0);try{await c(a,b)}finally{I(!1)}}},N=async i=>{if(!i||i.length===0||!o)return;m(null);let a=j-b.length;if(a<=0){m(`Max ${j} images per comment`);return}let h=Array.from(i).slice(0,a);for(let f of h){if(!f.type.startsWith("image/")){m(`"${f.name}" is not an image`);return}if(f.size>pe){m(`"${f.name}" exceeds 5 MB`);return}}p(!0);try{let f=await Promise.all(h.map(me)),P=new FormData;h.forEach((L,T)=>{P.append("file",L),P.append("width",f[T]?.width?String(f[T]?.width):""),P.append("height",f[T]?.height?String(f[T]?.height):"")});let k=await fetch(`${o}/api/feedback-comments/uploads?feedbackSessionId=${encodeURIComponent(n)}`,{method:"POST",credentials:"include",body:P});if(!k.ok){let L=await k.json().catch(()=>null);m(L?.error??"Upload failed");return}let R=await k.json();S(L=>[...L,...R.uploads])}catch{m("Upload failed")}finally{p(!1),C.current&&(C.current.value="")}},A=i=>{S(a=>a.filter(h=>h.url!==i))};return w("form",{onSubmit:z,style:ve,children:[l("textarea",{ref:v,value:r,onChange:i=>u(i.target.value),placeholder:"Leave a comment\u2026",style:we,rows:3}),b.length>0&&l("div",{style:ke,children:b.map(i=>w("div",{style:Pe,children:[l("img",{src:i.url,alt:"",style:Ie}),l("button",{type:"button",onClick:()=>A(i.url),style:Le,disabled:x||y,"aria-label":"Remove attachment",children:"\xD7"})]},i.url))}),g&&l("div",{style:Re,children:g}),l("input",{ref:C,type:"file",accept:"image/*",multiple:!0,onChange:i=>void N(i.target.files),style:{display:"none"}}),w("div",{style:xe,children:[d&&l("button",{type:"button",onClick:()=>d(),style:Ee,disabled:x,children:"Delete"}),l("button",{type:"button",onClick:()=>C.current?.click(),style:$e,disabled:x||y||b.length>=j,"aria-label":y?"Uploading\u2026":"Attach image",title:y?"Uploading\u2026":"Attach image",children:y?l(Te,{}):l(Ae,{})}),l("div",{style:{flex:1}}),l("button",{type:"button",onClick:s,style:V,disabled:x,children:"Cancel"}),l("button",{type:"submit",style:Ce,disabled:x||y||!r.trim(),children:x?"Saving\u2026":"Save"})]})]})}function fe(e,t,n){let[o,s]=E(null);return $(()=>{let c=()=>{let r=null;try{r=document.querySelector(e)}catch{r=null}if(!r){s(null);return}let u=r.getBoundingClientRect();s({top:u.top+window.scrollY+u.height*n-12,left:u.left+window.scrollX+u.width*t-12})};c();let d=new ResizeObserver(c);try{let r=document.querySelector(e);r&&d.observe(r)}catch{}return window.addEventListener("scroll",c,!0),window.addEventListener("resize",c),()=>{d.disconnect(),window.removeEventListener("scroll",c,!0),window.removeEventListener("resize",c)}},[e,t,n]),o}var ge={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"},O={border:"none",background:"white",color:"#111",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:600,fontSize:13},be={...O,background:"#ef4444",color:"white"},ye={border:"1px solid rgba(255,255,255,0.4)",background:"transparent",color:"white",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:500,fontSize:13},he={border:"none",background:"#10b981",color:"white",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:600,fontSize:13},Se={opacity:.8,fontSize:12},W={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},ve={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"},we={width:"100%",border:"1px solid #d1d5db",borderRadius:6,padding:8,fontSize:14,resize:"vertical",fontFamily:"inherit",color:"#111",background:"white",boxSizing:"border-box"},xe={display:"flex",alignItems:"center",gap:6},F={border:"1px solid transparent",borderRadius:6,padding:"6px 10px",fontSize:13,cursor:"pointer",fontWeight:500},Ce={...F,background:"#111",color:"white"},V={...F,background:"transparent",color:"#374151",borderColor:"#d1d5db"},Ee={...F,background:"transparent",color:"#b91c1c",borderColor:"#fecaca"},ke={display:"flex",flexWrap:"wrap",gap:6},Pe={position:"relative",width:56,height:56,borderRadius:6,overflow:"hidden",border:"1px solid #e5e7eb",background:"#f9fafb"},Ie={width:"100%",height:"100%",objectFit:"cover",display:"block"},Le={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"},Re={color:"#b91c1c",fontSize:12,margin:0},$e={...F,background:"transparent",color:"#374151",borderColor:"#d1d5db",width:30,height:30,padding:0,display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0};function Ae(){return w("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:[l("title",{children:"Attach image"}),l("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 Te(){return w(q,{children:[l("style",{children:"@keyframes yns-attach-spin { to { transform: rotate(360deg); } }"}),l("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 Fe={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"},Me={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 16px",borderBottom:"1px solid #e5e7eb"},ze={flex:1,overflow:"auto",padding:"12px 12px 24px"},Ne={color:"#6b7280",fontSize:13,padding:"24px 8px",textAlign:"center"},Be={fontSize:11,textTransform:"uppercase",letterSpacing:.5,color:"#6b7280",padding:"4px 4px 6px",wordBreak:"break-all"},_e={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"},je={flexShrink:0,width:22,height:22,borderRadius:999,background:"#10b981",color:"white",fontWeight:700,fontSize:11,display:"inline-flex",alignItems:"center",justifyContent:"center"},Ue={flex:1,whiteSpace:"pre-wrap",wordBreak:"break-word"},Xe={flexShrink:0,background:"#d1fae5",color:"#065f46",fontSize:11,fontWeight:600,padding:"2px 6px",borderRadius:4,alignSelf:"center"},De={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"},Ye={display:"flex",alignItems:"center",gap:8},He={background:"#d1fae5",color:"#065f46",fontSize:11,fontWeight:700,padding:"2px 8px",borderRadius:999,textTransform:"uppercase",letterSpacing:.5},Oe={display:"flex",justifyContent:"space-between",fontSize:12},We={width:"100%",height:6,background:"#f3f4f6",borderRadius:999,overflow:"hidden"},Ve={height:"100%",background:"#10b981",borderRadius:999,transition:"width 500ms"},qe={margin:0,fontSize:12,color:"#6b7280"};function Y(){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(B)}),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(B))return null;let e=document.createElement("div");e.id=B,e.dataset.ynsFeedbackUi="true",document.body.appendChild(e);let t=J(e);return t.render(l(se,{})),{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",()=>{Y()}):Y());function G(){typeof window>"u"||(console.log("[YNS Sandbox Inspectors] module evaluated"),Je(),Qe())}G();var Ge=new Set(["HEAD","SCRIPT","STYLE","NOSCRIPT","HTML"]);function Ke(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 s=Array.from(n.classList).filter(r=>!r.startsWith("data-yns-"));s.length>0&&(o+=`.${s.map(r=>CSS.escape(r)).join(".")}`);let c=n.parentElement,d=n.tagName;if(c&&Array.from(c.children).filter(u=>u.tagName===d&&(s.length===0||s.every(b=>u.classList.contains(b)))).length>1){let u=Array.from(c.children).indexOf(n)+1;o+=`:nth-child(${u})`}t.unshift(o),n=n.parentElement}return t.join(" > ")}function K(e,t){let n=e.getBoundingClientRect(),o=window.getComputedStyle(e),s=(e.textContent??"").trim();return{tag:e.tagName.toLowerCase(),id:e.id||void 0,classes:Array.from(e.classList).filter(c=>!c.startsWith("data-yns-")),textContent:s.length>t?`${s.slice(0,t)}\u2026`:s,cssSelector:Ke(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 M(e,t){if(!e||!e.tagName||Ge.has(e.tagName))return!0;for(let n of t)if(e.hasAttribute?.(n))return!0;return!1}function Je(){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 s=document.createElement("div");s.setAttribute("data-yns-design-overlay","label"),s.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(s);let c=document.createElement("style");c.setAttribute("data-yns-design-overlay","style"),c.textContent="[data-yns-selected] { outline: 2px solid #3b82f6 !important; outline-offset: 1px; }",document.head.appendChild(c);function d(y){let p=y.getBoundingClientRect();o.style.top=`${p.top}px`,o.style.left=`${p.left}px`,o.style.width=`${p.width}px`,o.style.height=`${p.height}px`,o.style.display="block";let g=Array.from(y.classList).filter(v=>!v.startsWith("data-yns-")),m=y.tagName.toLowerCase()+(g.length?`.${g[0]}`:"");s.textContent=m,s.style.left=`${p.left}px`,s.style.top=`${Math.max(0,p.top-22)}px`,s.style.display="block"}let r=y=>{let p=document.elementFromPoint(y.clientX,y.clientY);if(M(p,["data-yns-design-overlay"])){o.style.display="none",s.style.display="none",t=null;return}t=p,requestAnimationFrame(()=>{t===p&&e&&p&&d(p)})},u=()=>{o.style.display="none",s.style.display="none",t=null},b=y=>{if(!e||!t)return;y.preventDefault(),y.stopPropagation(),y.stopImmediatePropagation();let p=t;if(M(p,["data-yns-design-overlay"]))return;let g=K(p,120),m=g.cssSelector;n&&n.el.removeAttribute("data-yns-selected"),n&&n.cssSelector===m?(n=null,window.parent.postMessage({type:"element-deselected",data:g},"*")):(n={el:p,cssSelector:m},p.setAttribute("data-yns-selected",""),window.parent.postMessage({type:"element-selected",data:g},"*"))},S=y=>{y.key==="Escape"&&e&&(I(),window.parent.postMessage({type:"design-mode-cleared"},"*"))};function x(){e=!0,document.addEventListener("mousemove",r,!0),document.addEventListener("mouseleave",u),document.addEventListener("click",b,!0),document.addEventListener("keydown",S,!0)}function I(){e=!1,document.removeEventListener("mousemove",r,!0),document.removeEventListener("mouseleave",u),document.removeEventListener("click",b,!0),document.removeEventListener("keydown",S,!0),o.style.display="none",s.style.display="none",t=null,n&&(n.el.removeAttribute("data-yns-selected"),n=null)}window.addEventListener("message",y=>{let p=y.data;!p||typeof p!="object"||(p.type==="design-mode-toggle"&&(p.enabled?x():(I(),window.parent.postMessage({type:"design-mode-cleared"},"*"))),p.type==="design-mode-deselect"&&n&&(n.el.removeAttribute("data-yns-selected"),n=null))})}function Qe(){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 s=document.createElement("div");s.setAttribute("data-yns-comment-overlay","cursor-label"),s.textContent="Click to comment",s.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 c=document.createElement("div");c.setAttribute("data-yns-comment-overlay","pins"),c.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(s),document.documentElement.appendChild(c);function d(){c.innerHTML="";for(let g of n){let m=null;try{m=document.querySelector(g.selector)}catch{m=null}if(!m)continue;let v=m.getBoundingClientRect(),C=document.createElement("div");C.style.cssText=["position: fixed",`top: ${v.top-12}px`,`left: ${v.left+v.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(";"),C.textContent=String(g.number),c.appendChild(C)}}let r=g=>{let m=document.elementFromPoint(g.clientX,g.clientY);if(M(m,["data-yns-comment-overlay","data-yns-design-overlay"])){o.style.display="none",s.style.display="none",t=null;return}t=m,requestAnimationFrame(()=>{if(t===m&&e&&m){let v=m.getBoundingClientRect();o.style.top=`${v.top}px`,o.style.left=`${v.left}px`,o.style.width=`${v.width}px`,o.style.height=`${v.height}px`,o.style.display="block",s.style.left=`${g.clientX+14}px`,s.style.top=`${g.clientY+14}px`,s.style.display="block"}})},u=()=>{o.style.display="none",s.style.display="none",t=null},b=g=>{if(!e||!t)return;g.preventDefault(),g.stopPropagation(),g.stopImmediatePropagation();let m=t;if(M(m,["data-yns-comment-overlay","data-yns-design-overlay"]))return;let v=K(m,200),C=m.getBoundingClientRect();window.parent.postMessage({type:"comment-click",data:{element:v,clickPosition:{x:g.clientX,y:g.clientY},elementRect:{top:C.top,left:C.left,width:C.width,height:C.height},pagePath:window.location.pathname}},"*")},S=g=>{g.key==="Escape"&&e&&(I(),window.parent.postMessage({type:"comment-mode-cleared"},"*"))};function x(){e=!0,document.body.style.cursor="crosshair",document.addEventListener("mousemove",r,!0),document.addEventListener("mouseleave",u),document.addEventListener("click",b,!0),document.addEventListener("keydown",S,!0)}function I(){e=!1,document.body.style.cursor="",document.removeEventListener("mousemove",r,!0),document.removeEventListener("mouseleave",u),document.removeEventListener("click",b,!0),document.removeEventListener("keydown",S,!0),o.style.display="none",s.style.display="none",t=null}let y=!1,p=()=>{y||(y=!0,requestAnimationFrame(()=>{y=!1,d()}))};window.addEventListener("scroll",p,{passive:!0}),window.addEventListener("resize",p,{passive:!0}),window.addEventListener("message",g=>{let m=g.data;!m||typeof m!="object"||(m.type==="comment-mode-toggle"&&(m.enabled?x():I()),m.type==="comment-pins-update"&&(n=m.pins??[],d()),m.type==="comment-pin-remove"&&(n=n.filter(v=>v.id!==m.pinId),d()))})}export{Y as mountFeedbackToolbar,G as startSandboxInspectors};
|
|
3
3
|
//# sourceMappingURL=browser.js.map
|