commerce-kit 0.39.2 → 0.41.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/README.md +29 -0
- package/dist/api-types.d.ts +596 -29
- package/dist/browser.js +3 -3
- package/dist/browser.js.map +1 -1
- package/dist/feedback-toolbar.js +3 -3
- package/dist/feedback-toolbar.js.map +1 -1
- package/dist/index.d.ts +27 -2
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/browser.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{useEffect as
|
|
2
|
-
`)},te=e=>{let n=e;for(;n;){if(n instanceof HTMLElement&&n.dataset.ynsFeedbackUi==="true")return!0;n=n.parentElement}return!1},ve=new Set(["HTML","HEAD","SCRIPT","STYLE","NOSCRIPT"]),we=1e4,xe=3e4,Ce=e=>typeof e=="object"&&e!==null&&"viewer"in e&&(e.viewer==="anonymous"||e.viewer==="non-member"||e.viewer==="member"),ke=e=>{let n=new Date(e),t=n.getTime()-Date.now(),o=n.toLocaleString(void 0,{weekday:"short",month:"short",day:"numeric",hour:"numeric",minute:"2-digit"});if(t<=0)return`Any moment now (estimated by ${o})`;let r=Math.ceil(t/6e4);if(r<60)return`~${r} minutes (by ${o})`;let s=Math.round(t/36e5);if(s<24)return`~${s} ${s===1?"hour":"hours"} (by ${o})`;let c=Math.round(t/864e5);return`~${c} ${c===1?"day":"days"} (by ${o})`};async function ne(e,n){try{let t=await fetch(`${e}/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)}n()}function Ee(){let[e,n]=P(null),[t,o]=P(!0),[r,s]=P(!1),[c,a]=P(null),[u,g]=P(null),[w,C]=P(!1),[L,y]=P(!1),m=z(null),f=z(()=>{});I(()=>{if(m.current=be(),!m.current){o(!1);return}let d=!1,p=null,S=0,b=null,$=null,k=()=>{b!==null&&(window.clearTimeout(b),b=null)},E=(F,M)=>{d||M<S||($=F?.viewer??null,n(F),o(!1))},T=()=>{if(d)return;let F=$==="member"?we:xe;b=window.setTimeout(()=>{D()},F)},D=async()=>{if(d)return;p?.abort();let F=new AbortController;p=F;let M=++S;try{let N=await fetch(`${m.current}/api/feedback-comments?host=${encodeURIComponent(window.location.host)}`,{credentials:"include",signal:F.signal});if(d||M<S)return;if(N.status===404||!N.ok){E(null,M),T();return}let Z=await N.json();if(d||M<S)return;if(!Ce(Z)){E(null,M),T();return}E(Z,M),T()}catch(N){if(N?.name==="AbortError"||d)return;E(null,M),T()}},J=()=>{d||(k(),D())};f.current=J;let Q=()=>{document.hidden?(p?.abort(),k()):J()};return document.addEventListener("visibilitychange",Q),D(),()=>{d=!0,document.removeEventListener("visibilitychange",Q),p?.abort(),k(),f.current=()=>{}}},[]);let l=e?.viewer==="member"?e:null;I(()=>{!l||l.canComment||(s(!1),a(null),C(!1),g(null))},[l]),I(()=>{if(r)return document.body.style.cursor="crosshair",()=>{document.body.style.cursor=""}},[r]),I(()=>{if(!r)return;let d=document.createElement("div");d.dataset.ynsFeedbackUi="true",d.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 p=document.createElement("div");p.dataset.ynsFeedbackUi="true",p.textContent="Click to comment",p.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(d),document.documentElement.appendChild(p);let S=null,b=k=>{let E=document.elementFromPoint(k.clientX,k.clientY);if(!E||ve.has(E.tagName)||te(E)){d.style.display="none",p.style.display="none",S=null;return}S=E,requestAnimationFrame(()=>{if(S!==E)return;let T=E.getBoundingClientRect();d.style.top=`${T.top}px`,d.style.left=`${T.left}px`,d.style.width=`${T.width}px`,d.style.height=`${T.height}px`,d.style.display="block",p.style.left=`${k.clientX+14}px`,p.style.top=`${k.clientY+14}px`,p.style.display="block"})},$=()=>{d.style.display="none",p.style.display="none",S=null};return document.addEventListener("mousemove",b,!0),document.addEventListener("mouseleave",$),()=>{document.removeEventListener("mousemove",b,!0),document.removeEventListener("mouseleave",$),d.remove(),p.remove()}},[r]),I(()=>{if(!r)return;let d=p=>{let S=p.target;if(!(S instanceof Element)||te(S))return;p.preventDefault(),p.stopPropagation();let b=S.getBoundingClientRect(),$=b.width>0?(p.clientX-b.left)/b.width:.5,k=b.height>0?(p.clientY-b.top)/b.height:.5;a({cssSelector:ye(S),pagePath:window.location.pathname,surroundingHtml:Se(S),rect:{top:b.top+window.scrollY,left:b.left+window.scrollX,width:b.width,height:b.height},clickX:p.clientX+window.scrollX,clickY:p.clientY+window.scrollY,offsetXRatio:Math.min(1,Math.max(0,$)),offsetYRatio:Math.min(1,Math.max(0,k))}),s(!1)};return document.addEventListener("click",d,{capture:!0}),()=>document.removeEventListener("click",d,{capture:!0})},[r]);let x=()=>{f.current()},R=async(d,p)=>{!m.current||!l||!c||!(await fetch(`${m.current}/api/feedback-comments`,{method:"POST",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({feedbackSessionId:l.feedbackSessionId,content:d,pagePath:c.pagePath,cssSelector:c.cssSelector,surroundingHtml:c.surroundingHtml,offsetXRatio:c.offsetXRatio,offsetYRatio:c.offsetYRatio,...p.length>0?{attachments:p}:{}})})).ok||(a(null),s(!0),x())},O=async(d,p,S)=>{!m.current||!(await fetch(`${m.current}/api/feedback-comments/${d}`,{method:"PATCH",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({content:p,attachments:S})})).ok||(g(null),x())},Y=async d=>{!m.current||!(await fetch(`${m.current}/api/feedback-comments/${d}`,{method:"DELETE",credentials:"include"})).ok||x()},X=async()=>{if(!(!m.current||!l)&&window.confirm(nt(l))){y(!0);try{let d=await fetch(`${m.current}/api/feedback-sessions/${l.feedbackSessionId}/finalize`,{method:"POST",credentials:"include"});if(!d.ok)return;let S=(await d.json().catch(()=>null))?.status??"processing";n(b=>b?.viewer==="member"?{...b,canComment:!1,sessionStatus:S}:b)}finally{y(!1)}}},v=d=>{if(d.pagePath!==window.location.pathname){window.location.assign(d.pagePath);return}let p=null;try{p=document.querySelector(d.cssSelector)}catch{p=null}p&&(p.scrollIntoView({behavior:"smooth",block:"center"}),g(d.id))};if(t||!e)return null;if(e.viewer==="anonymous")return i(it,{loginUrl:e.loginUrl});if(e.viewer==="non-member")return i(rt,{user:e.user,onSignOut:()=>{m.current&&ne(m.current,()=>f.current())}});if(!l)return null;if(!l.canComment)return l.sessionStatus!=="processing"&&l.sessionStatus!=="in_review"?null:i("div",{"data-yns-feedback-ui":"true",children:i(Pe,{progress:l.progress,eta:l.eta,status:l.sessionStatus})});let A=l.comments.filter(d=>d.pagePath===window.location.pathname&&d.status!=="done");return h("div",{"data-yns-feedback-ui":"true",children:[A.map((d,p)=>i(Le,{pin:d,number:p+1,editing:u===d.id,feedbackSessionId:l.feedbackSessionId,apiBase:m.current,onStartEdit:()=>g(d.id),onCancelEdit:()=>g(null),onSave:(S,b)=>O(d.id,S,b),onRemove:()=>Y(d.id)},d.id)),c&&i($e,{pending:c,feedbackSessionId:l.feedbackSessionId,apiBase:m.current,onCancel:()=>{a(null),s(!0)},onSave:(d,p)=>R(d,p)}),w&&i(Te,{comments:l.comments,currentPath:window.location.pathname,onClose:()=>C(!1),onSelect:v}),h("div",{style:q,children:[i("button",{type:"button",onClick:()=>s(d=>!d),style:r?ze:_,children:r?"Cancel":"Add comment"}),i("button",{type:"button",onClick:()=>C(d=>!d),style:Be,children:w?"Hide list":`List (${l.comments.length})`}),i("button",{type:"button",onClick:X,disabled:L,style:_e,children:L?"Finalizing\u2026":"Finalize"}),i("span",{style:G,children:r?"Click any element to comment":`${A.length} on this page`}),i(ot,{authors:l.authors,viewerId:l.user.id}),i(st,{user:l.user,onSignOut:()=>{m.current&&ne(m.current,()=>f.current())}})]})]})}function Pe({progress:e,eta:n,status:t}){let[,o]=P(0);I(()=>{let a=window.setInterval(()=>o(u=>u+1),6e4);return()=>window.clearInterval(a)},[]);let r=ke(n);return h("div",{style:Ct,children:[i("style",{children:Re}),h("div",{style:kt,children:[i(Ae,{}),i("span",{style:Et,children:"Submitted"}),i("strong",{style:{fontSize:13},children:t==="in_review"?"Feedback under review":"Applying feedback"})]}),h("div",{style:Pt,children:[i("span",{children:"Review progress"}),i("span",{style:{opacity:.7},children:e.label})]}),i("div",{style:Rt,children:i("div",{style:{...At,width:`${e.fillPct}%`}})}),h("p",{style:Lt,children:["Estimated delivery: ",i("span",{style:{fontWeight:600},children:r})]})]})}var Re="@keyframes yns-feedback-spin { to { transform: rotate(360deg); } }";function Ae({size:e=14}){return i("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:n,editing:t,feedbackSessionId:o,apiBase:r,onStartEdit:s,onCancelEdit:c,onSave:a,onRemove:u}){let g=Ne(e.cssSelector,e.offsetXRatio,e.offsetYRatio);if(!g)return null;let w=e.canMutate!==!1;return h("div",{style:{position:"absolute",top:g.top,left:g.left,zIndex:2147483600,pointerEvents:"auto"},children:[i("button",{type:"button",onClick:s,style:re,title:e.content,children:n}),e.author&&i("span",{style:Ye,title:e.author.name||e.author.email,children:i(B,{user:e.author,size:16})}),t&&(w?i(ie,{initial:e.content,initialAttachments:e.attachments,feedbackSessionId:o,apiBase:r,onCancel:c,onSave:a,onRemove:u}):i(Ie,{comment:e,onClose:c}))]})}function Ie({comment:e,onClose:n}){return h("div",{style:se,children:[e.author&&h("div",{style:Xe,children:[i(B,{user:e.author,size:20}),i("span",{style:De,children:e.author.name||e.author.email})]}),i("div",{style:We,children:e.content}),e.attachments.length>0&&i("div",{style:le,children:e.attachments.map(t=>i("a",{href:t.url,target:"_blank",rel:"noreferrer",style:de,children:i("img",{src:t.url,alt:"",style:ce})},t.url))}),h("div",{style:ae,children:[i("span",{style:{flex:1,fontSize:12,color:"#6b7280"},children:"Only the author can edit"}),i("button",{type:"button",onClick:n,style:K,children:"Close"})]})]})}function $e({pending:e,feedbackSessionId:n,apiBase:t,onCancel:o,onSave:r}){return h(pe,{children:[i("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:i("div",{style:re,children:"\u2022"})}),i("div",{style:{position:"absolute",top:e.clickY+10,left:e.clickX+10,zIndex:2147483647},children:i(ie,{initial:"",initialAttachments:[],feedbackSessionId:n,apiBase:t,onCancel:o,onSave:r})})]})}function Te({comments:e,currentPath:n,onClose:t,onSelect:o}){let r=new Map;for(let c of e){let a=r.get(c.pagePath)??[];a.push(c),r.set(c.pagePath,a)}let s=Array.from(r.keys()).sort((c,a)=>c===n?-1:a===n?1:c.localeCompare(a));return h("div",{style:mt,children:[h("div",{style:ft,children:[h("strong",{style:{fontSize:14},children:["Comments (",e.length,")"]}),i("button",{type:"button",onClick:t,style:K,children:"Close"})]}),i("div",{style:gt,children:e.length===0?i("div",{style:bt,children:"No comments yet. Click \u201CAdd comment\u201D to leave one."}):s.map(c=>h("div",{style:{marginBottom:12},children:[i("div",{style:yt,children:c===n?`${c} \xB7 current`:c}),(r.get(c)??[]).map((a,u)=>h("button",{type:"button",onClick:()=>o(a),style:ht,disabled:a.status==="done"&&!1,children:[i("span",{style:St,children:u+1}),h("span",{style:vt,children:[a.author&&i("span",{style:wt,children:a.author.name||a.author.email}),a.content.length>140?`${a.content.slice(0,140)}\u2026`:a.content]}),a.status==="done"&&i("span",{style:xt,children:"done"})]},a.id))]},c))})]})}var V=5,Me=5*1024*1024,Fe=e=>new Promise(n=>{let t=URL.createObjectURL(e),o=new window.Image;o.onload=()=>{URL.revokeObjectURL(t),n({width:o.naturalWidth,height:o.naturalHeight})},o.onerror=()=>{URL.revokeObjectURL(t),n(null)},o.src=t});function ie({initial:e,initialAttachments:n,feedbackSessionId:t,apiBase:o,onCancel:r,onSave:s,onRemove:c}){let[a,u]=P(e),[g,w]=P(n),[C,L]=P(!1),[y,m]=P(!1),[f,l]=P(null),x=z(null),R=z(null);I(()=>{let v=x.current;if(!v)return;v.focus();let A=v.value.length;v.setSelectionRange(A,A)},[]);let O=async v=>{v.preventDefault();let A=a.trim();if(A){L(!0);try{await s(A,g)}finally{L(!1)}}},Y=async v=>{if(!v||v.length===0||!o)return;l(null);let A=V-g.length;if(A<=0){l(`Max ${V} images per comment`);return}let d=Array.from(v).slice(0,A);for(let p of d){if(!p.type.startsWith("image/")){l(`"${p.name}" is not an image`);return}if(p.size>Me){l(`"${p.name}" exceeds 5 MB`);return}}m(!0);try{let p=await Promise.all(d.map(Fe)),S=new FormData;d.forEach((k,E)=>{S.append("file",k),S.append("width",p[E]?.width?String(p[E]?.width):""),S.append("height",p[E]?.height?String(p[E]?.height):"")});let b=await fetch(`${o}/api/feedback-comments/uploads?feedbackSessionId=${encodeURIComponent(t)}`,{method:"POST",credentials:"include",body:S});if(!b.ok){let k=await b.json().catch(()=>null);l(k?.error??"Upload failed");return}let $=await b.json();w(k=>[...k,...$.uploads])}catch{l("Upload failed")}finally{m(!1),R.current&&(R.current.value="")}},X=v=>{w(A=>A.filter(d=>d.url!==v))};return h("form",{onSubmit:O,style:se,children:[i("textarea",{ref:x,value:a,onChange:v=>u(v.target.value),placeholder:"Leave a comment\u2026",style:He,rows:3}),g.length>0&&i("div",{style:le,children:g.map(v=>h("div",{style:de,children:[i("img",{src:v.url,alt:"",style:ce}),i("button",{type:"button",onClick:()=>X(v.url),style:Ge,disabled:C||y,"aria-label":"Remove attachment",children:"\xD7"})]},v.url))}),f&&i("div",{style:Ke,children:f}),i("input",{ref:R,type:"file",accept:"image/*",multiple:!0,onChange:v=>void Y(v.target.files),style:{display:"none"}}),h("div",{style:ae,children:[c&&i("button",{type:"button",onClick:()=>c(),style:qe,disabled:C,children:"Delete"}),i("button",{type:"button",onClick:()=>R.current?.click(),style:Je,disabled:C||y||g.length>=V,"aria-label":y?"Uploading\u2026":"Attach image",title:y?"Uploading\u2026":"Attach image",children:y?i(Ze,{}):i(Qe,{})}),i("div",{style:{flex:1}}),i("button",{type:"button",onClick:r,style:K,disabled:C,children:"Cancel"}),i("button",{type:"submit",style:Ve,disabled:C||y||!a.trim(),children:C?"Saving\u2026":"Save"})]})]})}function Ne(e,n,t){let[o,r]=P(null);return I(()=>{let s=()=>{let a=null;try{a=document.querySelector(e)}catch{a=null}if(!a){r(null);return}let u=a.getBoundingClientRect();r({top:u.top+window.scrollY+u.height*t-12,left:u.left+window.scrollX+u.width*n-12})};s();let c=new ResizeObserver(s);try{let a=document.querySelector(e);a&&c.observe(a)}catch{}return window.addEventListener("scroll",s,!0),window.addEventListener("resize",s),()=>{c.disconnect(),window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s)}},[e,n,t]),o}var q={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"},_={border:"none",background:"white",color:"#111",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:600,fontSize:13},ze={..._,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},_e={border:"none",background:"#10b981",color:"white",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:600,fontSize:13},G={opacity:.8,fontSize:12},je={display:"inline-flex",alignItems:"center",paddingLeft:4},Ue={marginLeft:-6,display:"inline-flex",borderRadius:999,boxShadow:"0 0 0 2px rgba(17, 17, 17, 0.92)"},Oe={marginLeft:-2,padding:"0 6px",height:18,minWidth:18,borderRadius:999,background:"rgba(255,255,255,0.18)",color:"white",fontSize:10,fontWeight:600,display:"inline-flex",alignItems:"center",justifyContent:"center"},re={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},Ye={position:"absolute",bottom:-6,right:-6,width:20,height:20,borderRadius:999,border:"2px solid white",background:"#111",display:"inline-flex",alignItems:"center",justifyContent:"center",boxShadow:"0 1px 3px rgba(0,0,0,0.3)",pointerEvents:"none"},Xe={display:"flex",alignItems:"center",gap:8},De={fontSize:13,fontWeight:600,color:"#111"},We={fontSize:14,color:"#111",whiteSpace:"pre-wrap",wordBreak:"break-word"},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"},He={width:"100%",border:"1px solid #d1d5db",borderRadius:6,padding:8,fontSize:14,resize:"vertical",fontFamily:"inherit",color:"#111",background:"white",boxSizing:"border-box"},ae={display:"flex",alignItems:"center",gap:6},j={border:"1px solid transparent",borderRadius:6,padding:"6px 10px",fontSize:13,cursor:"pointer",fontWeight:500},Ve={...j,background:"#111",color:"white"},K={...j,background:"transparent",color:"#374151",borderColor:"#d1d5db"},qe={...j,background:"transparent",color:"#b91c1c",borderColor:"#fecaca"},le={display:"flex",flexWrap:"wrap",gap:6},de={position:"relative",width:56,height:56,borderRadius:6,overflow:"hidden",border:"1px solid #e5e7eb",background:"#f9fafb"},ce={width:"100%",height:"100%",objectFit:"cover",display:"block"},Ge={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"},Ke={color:"#b91c1c",fontSize:12,margin:0},Je={...j,background:"transparent",color:"#374151",borderColor:"#d1d5db",width:30,height:30,padding:0,display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0};function Qe(){return h("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:[i("title",{children:"Attach image"}),i("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 Ze(){return h(pe,{children:[i("style",{children:"@keyframes yns-attach-spin { to { transform: rotate(360deg); } }"}),i("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 et=480;function ue(){let[e,n]=P(!1);return I(()=>{let t=window.matchMedia(`(max-width: ${et}px)`),o=()=>n(t.matches);return o(),t.addEventListener("change",o),()=>t.removeEventListener("change",o)},[]),e}var tt=e=>{let n=e.name?.trim();return n?n.split(/\s+/).filter(Boolean).slice(0,2).map(o=>o[0]?.toUpperCase()??"").join(""):e.email[0]?.toUpperCase()??"?"};function B({user:e,size:n=22}){return e.image?i("img",{src:e.image,alt:"",width:n,height:n,style:{width:n,height:n,borderRadius:999,objectFit:"cover",display:"block",flexShrink:0}}):i("span",{"aria-hidden":!0,style:{width:n,height:n,borderRadius:999,background:"rgba(255,255,255,0.18)",color:"white",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:Math.max(10,Math.round(n*.45)),fontWeight:600,flexShrink:0},children:tt(e)})}function nt(e){let n=e.authors??[],t=e.anonymousCount??0,o=e.commentTotal;if(o===0)return"Finalize this feedback session with zero comments? It will be canceled instead of submitted.";if(n.length===0&&t===0)return`Finalize this feedback session with ${o} comment${o===1?"":"s"}? You won't be able to add more.`;let r=n.length+(t>0?1:0),s=n.map(a=>a.name||a.email);t>0&&s.push(`${t} anonymous`);let c=s.length===1?s[0]:`${s.slice(0,-1).join(", ")} and ${s.at(-1)}`;return`Submit ${o} comment${o===1?"":"s"} from ${r} reviewer${r===1?"":"s"} (${c})?
|
|
1
|
+
import{useEffect as T,useRef as B,useState as C}from"react";import{createRoot as Re}from"react-dom/client";import{Fragment as ke,jsx as i,jsxs as g}from"react/jsx-runtime";var V="yns-feedback-toolbar-root",ne={todo:"Open",in_progress:"In progress",done:"Resolved",wont_fix:"Won't fix"},Ae=()=>{if(typeof window>"u")return null;let e=(process.env.NEXT_PUBLIC_YNS_API_BASE??"").trim();if(e)return e.replace(/\/$/,"");let n=window.location.hostname,t=window.location.protocol;return n.endsWith(".yns.store")?`${t}//yns.store`:n.endsWith(".yns.cx")?`${t}//yns.cx`:window.location.origin},Le=e=>{if(e.id)return`#${CSS.escape(e.id)}`;let n=[],t=e;for(;t&&t.nodeType===Node.ELEMENT_NODE&&n.length<6;){let o=t.tagName.toLowerCase(),s=t.getAttribute("class");if(s){let l=s.split(/\s+/).filter(Boolean).slice(0,2).map(d=>`.${CSS.escape(d)}`).join("");o+=l}let a=t.parentElement,c=t.tagName;if(a){let l=Array.from(a.children).filter(d=>d.tagName===c);if(l.length>1){let d=l.indexOf(t)+1;o+=`:nth-of-type(${d})`}}n.unshift(o),t=a}return n.join(" > ")},Ie=["id","class","data-testid","aria-label","role","name","href","src"],K=e=>{let n=[];for(let t of Ie){let o=e.getAttribute(t);if(!o)continue;let s=o.length>80?`${o.slice(0,80)}\u2026`:o;n.push(` ${t}="${s.replace(/"/g,""")}"`)}return n.join("")},oe=e=>{let n=(e.textContent??"").replace(/\s+/g," ").trim();return n?n.length>100?`${n.slice(0,100)}\u2026`:n:""},Te=e=>{let n=[],t=e;for(;t&&t!==document.documentElement&&n.length<5;){let d=t.parentElement;if(!d)break;n.unshift(d),t=d}let o=[],s=0;for(let d of n){let m=" ".repeat(s);o.push(`${m}<${d.tagName.toLowerCase()}${K(d)}>`),s++}let a=" ".repeat(s),c=e.tagName.toLowerCase(),l=oe(e);if(o.push(`${a}<${c}${K(e)}>${l?`${l}</${c}>`:""} \u2190 TARGET`),!l){let d=" ".repeat(s+1),m=Array.from(e.children).slice(0,6);for(let v of m){let k=oe(v);o.push(`${d}<${v.tagName.toLowerCase()}${K(v)}>${k?`${k}</${v.tagName.toLowerCase()}>`:""}`)}e.children.length>6&&o.push(`${d}\u2026 (${e.children.length-6} more children)`),o.push(`${a}</${c}>`)}for(let d=n.length-1;d>=0;d--){let m=" ".repeat(d),v=n[d];v&&o.push(`${m}</${v.tagName.toLowerCase()}>`)}return o.join(`
|
|
2
|
+
`)},ie=e=>{let n=e;for(;n;){if(n instanceof HTMLElement&&n.dataset.ynsFeedbackUi==="true")return!0;n=n.parentElement}return!1},$e=new Set(["HTML","HEAD","SCRIPT","STYLE","NOSCRIPT"]),Me=1e4,Ne=3e4,Fe=e=>typeof e=="object"&&e!==null&&"viewer"in e&&(e.viewer==="anonymous"||e.viewer==="non-member"||e.viewer==="member"),ze=e=>{let n=new Date(e),t=n.getTime()-Date.now(),o=n.toLocaleString(void 0,{weekday:"short",month:"short",day:"numeric",hour:"numeric",minute:"2-digit"});if(t<=0)return`Any moment now (estimated by ${o})`;let s=Math.ceil(t/6e4);if(s<60)return`~${s} minutes (by ${o})`;let a=Math.round(t/36e5);if(a<24)return`~${a} ${a===1?"hour":"hours"} (by ${o})`;let c=Math.round(t/864e5);return`~${c} ${c===1?"day":"days"} (by ${o})`};async function se(e,n){try{let t=await fetch(`${e}/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)}n()}function _e(){let[e,n]=C(null),[t,o]=C(!0),[s,a]=C(!1),[c,l]=C(null),[d,m]=C(null),[v,k]=C(!1),[E,w]=C(!1),p=B(null),y=B(()=>{});T(()=>{if(p.current=Ae(),!p.current){o(!1);return}let r=!1,f=null,b=0,S=null,A=null,P=()=>{S!==null&&(window.clearTimeout(S),S=null)},I=(F,N)=>{r||N<b||(A=F?.viewer??null,n(F),o(!1))},$=()=>{if(r)return;let F=A==="member"?Me:Ne;S=window.setTimeout(()=>{H()},F)},H=async()=>{if(r)return;f?.abort();let F=new AbortController;f=F;let N=++b;try{let _=await fetch(`${p.current}/api/feedback-comments?host=${encodeURIComponent(window.location.host)}`,{credentials:"include",signal:F.signal});if(r||N<b)return;if(_.status===404||!_.ok){I(null,N),$();return}let te=await _.json();if(r||N<b)return;if(!Fe(te)){I(null,N),$();return}I(te,N),$()}catch(_){if(_?.name==="AbortError"||r)return;I(null,N),$()}},Z=()=>{r||(P(),H())};y.current=Z;let ee=()=>{document.hidden?(f?.abort(),P()):Z()};return document.addEventListener("visibilitychange",ee),H(),()=>{r=!0,document.removeEventListener("visibilitychange",ee),f?.abort(),P(),y.current=()=>{}}},[]);let u=e?.viewer==="member"?e:null;T(()=>{!u||u.canComment||(a(!1),l(null),k(!1),m(null))},[u]),T(()=>{if(s)return document.body.style.cursor="crosshair",()=>{document.body.style.cursor=""}},[s]),T(()=>{if(!s)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 f=document.createElement("div");f.dataset.ynsFeedbackUi="true",f.textContent="Click to comment",f.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(f);let b=null,S=P=>{let I=document.elementFromPoint(P.clientX,P.clientY);if(!I||$e.has(I.tagName)||ie(I)){r.style.display="none",f.style.display="none",b=null;return}b=I,requestAnimationFrame(()=>{if(b!==I)return;let $=I.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",f.style.left=`${P.clientX+14}px`,f.style.top=`${P.clientY+14}px`,f.style.display="block"})},A=()=>{r.style.display="none",f.style.display="none",b=null};return document.addEventListener("mousemove",S,!0),document.addEventListener("mouseleave",A),()=>{document.removeEventListener("mousemove",S,!0),document.removeEventListener("mouseleave",A),r.remove(),f.remove()}},[s]),T(()=>{if(!s)return;let r=f=>{let b=f.target;if(!(b instanceof Element)||ie(b))return;f.preventDefault(),f.stopPropagation();let S=b.getBoundingClientRect(),A=S.width>0?(f.clientX-S.left)/S.width:.5,P=S.height>0?(f.clientY-S.top)/S.height:.5;l({cssSelector:Le(b),pagePath:window.location.pathname,surroundingHtml:Te(b),rect:{top:S.top+window.scrollY,left:S.left+window.scrollX,width:S.width,height:S.height},clickX:f.clientX+window.scrollX,clickY:f.clientY+window.scrollY,offsetXRatio:Math.min(1,Math.max(0,A)),offsetYRatio:Math.min(1,Math.max(0,P))}),a(!1)};return document.addEventListener("click",r,{capture:!0}),()=>document.removeEventListener("click",r,{capture:!0})},[s]);let h=()=>{y.current()},R=async(r,f)=>{!p.current||!u||!c||!(await fetch(`${p.current}/api/feedback-comments`,{method:"POST",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({feedbackSessionId:u.feedbackSessionId,content:r,pagePath:c.pagePath,cssSelector:c.cssSelector,surroundingHtml:c.surroundingHtml,offsetXRatio:c.offsetXRatio,offsetYRatio:c.offsetYRatio,...f.length>0?{attachments:f}:{}})})).ok||(l(null),a(!0),h())},z=async(r,f,b)=>{!p.current||!(await fetch(`${p.current}/api/feedback-comments/${r}`,{method:"PATCH",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({content:f,attachments:b})})).ok||(m(null),h())},W=async r=>{!p.current||!(await fetch(`${p.current}/api/feedback-comments/${r}`,{method:"DELETE",credentials:"include"})).ok||h()},Y=async(r,f)=>{!p.current||!(await fetch(`${p.current}/api/feedback-comments/${r}`,{method:"PATCH",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({status:f})})).ok||h()},X=async(r,f)=>{!p.current||!(await fetch(`${p.current}/api/feedback-comments/${r}/replies`,{method:"POST",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({content:f})})).ok||h()},x=async()=>{if(!(!p.current||!u)&&window.confirm(ct(u))){w(!0);try{let r=await fetch(`${p.current}/api/feedback-sessions/${u.feedbackSessionId}/finalize`,{method:"POST",credentials:"include"});if(!r.ok)return;let b=(await r.json().catch(()=>null))?.status??"extracting";n(S=>S?.viewer==="member"?{...S,canComment:!1,sessionStatus:b}:S)}finally{w(!1)}}},L=r=>{if(r.pagePath!==window.location.pathname){window.location.assign(r.pagePath);return}let f=null;try{f=document.querySelector(r.cssSelector)}catch{f=null}f&&(f.scrollIntoView({behavior:"smooth",block:"center"}),m(r.id))};if(t||!e)return null;if(e.viewer==="anonymous")return i(pt,{loginUrl:e.loginUrl});if(e.viewer==="non-member")return i(mt,{user:e.user,onSignOut:()=>{p.current&&se(p.current,()=>y.current())}});if(!u)return null;if(!u.canComment)return u.sessionStatus!=="extracting"&&u.sessionStatus!=="tasks_review"&&u.sessionStatus!=="processing"&&u.sessionStatus!=="in_review"?null:i("div",{"data-yns-feedback-ui":"true",children:i(Be,{progress:u.progress,eta:u.eta,status:u.sessionStatus,dashboardUrl:`${p.current??""}/feedback`})});let M=u.comments.filter(r=>r.pagePath===window.location.pathname&&r.status!=="done"&&r.status!=="wont_fix");return g("div",{"data-yns-feedback-ui":"true",children:[M.map((r,f)=>i(Oe,{pin:r,number:f+1,editing:d===r.id,feedbackSessionId:u.feedbackSessionId,apiBase:p.current,onStartEdit:()=>m(r.id),onCancelEdit:()=>m(null),onSave:(b,S)=>z(r.id,b,S),onRemove:()=>W(r.id),onReply:b=>X(r.id,b),onStatusChange:b=>Y(r.id,b)},r.id)),c&&i(Ue,{pending:c,feedbackSessionId:u.feedbackSessionId,apiBase:p.current,onCancel:()=>{l(null),a(!0)},onSave:(r,f)=>R(r,f)}),v&&i(De,{comments:u.comments,currentPath:window.location.pathname,onClose:()=>k(!1),onSelect:L}),g("div",{style:G,children:[i("button",{type:"button",onClick:()=>a(r=>!r),style:s?He:j,children:s?"Cancel":"Add comment"}),i("button",{type:"button",onClick:()=>k(r=>!r),style:Ve,children:v?"Hide list":`List (${u.comments.length})`}),i("button",{type:"button",onClick:x,disabled:E,style:Ke,children:E?"Finalizing\u2026":"Finalize"}),i("span",{style:J,children:s?"Click any element to comment":`${M.length} on this page`}),i(ut,{authors:u.authors,viewerId:u.user.id}),i(ft,{user:u.user,onSignOut:()=>{p.current&&se(p.current,()=>y.current())}})]})]})}function Be({progress:e,eta:n,status:t,dashboardUrl:o}){let[,s]=C(0);if(T(()=>{let d=window.setInterval(()=>s(m=>m+1),6e4);return()=>window.clearInterval(d)},[]),t==="extracting"||t==="tasks_review"){let d=t==="tasks_review";return g("div",{style:de,children:[i("style",{children:re}),g("div",{style:ce,children:[i(ae,{}),i("span",{style:ue,children:d?"Review":"Working"}),i("strong",{style:{fontSize:13},children:d?"Tasks ready to review":"Preparing tasks"})]}),i("p",{style:pe,children:d?"We turned your comments into tasks. Open your YNS dashboard to review them and start the changes.":"Turning each comment thread into a task. This only takes a moment."}),d&&o&&i("a",{href:o,target:"_blank",rel:"noreferrer",style:Nt,children:"Review tasks \u2192"})]})}let a=ze(n);return g("div",{style:de,children:[i("style",{children:re}),g("div",{style:ce,children:[i(ae,{}),i("span",{style:ue,children:"Submitted"}),i("strong",{style:{fontSize:13},children:t==="in_review"?"Feedback under review":"Applying feedback"})]}),g("div",{style:Tt,children:[i("span",{children:"Review progress"}),i("span",{style:{opacity:.7},children:e.label})]}),i("div",{style:$t,children:i("div",{style:{...Mt,width:`${e.fillPct}%`}})}),g("p",{style:pe,children:["Estimated delivery: ",i("span",{style:{fontWeight:600},children:a})]})]})}var re="@keyframes yns-feedback-spin { to { transform: rotate(360deg); } }";function ae({size:e=14}){return i("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({comment:e,onReply:n,onStatusChange:t}){let[o,s]=C(""),[a,c]=C(!1),l=e.replies??[],d=async()=>{let m=o.trim();if(!(!m||a)){c(!0);try{await n(m),s("")}finally{c(!1)}}};return g("div",{style:Ft,children:[t&&g("div",{style:zt,children:[i("span",{style:_t,children:"Status"}),i("select",{value:e.status,onChange:m=>void t(m.target.value),style:Bt,children:Object.keys(ne).map(m=>i("option",{value:m,children:ne[m]},m))})]}),l.length>0&&i("div",{style:Ot,children:l.map(m=>g("div",{style:jt,children:[i("span",{style:Ut,children:m.authorKind==="system"?"System":m.author?.name||m.author?.email||"Reviewer"}),i("span",{style:Dt,children:m.content})]},m.id))}),g("div",{style:Wt,children:[i("textarea",{value:o,onChange:m=>s(m.target.value),placeholder:"Reply\u2026",rows:2,style:be,onKeyDown:m=>{m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),d())}}),i("button",{type:"button",onClick:()=>void d(),style:Se,disabled:a||!o.trim(),children:a?"\u2026":"Reply"})]})]})}function Oe({pin:e,number:n,editing:t,feedbackSessionId:o,apiBase:s,onStartEdit:a,onCancelEdit:c,onSave:l,onRemove:d,onReply:m,onStatusChange:v}){let k=Xe(e.cssSelector,e.offsetXRatio,e.offsetYRatio);if(!k)return null;let E=e.canMutate!==!1;return g("div",{style:{position:"absolute",top:k.top,left:k.left,zIndex:2147483600,pointerEvents:"auto"},children:[i("button",{type:"button",onClick:a,style:ge,title:e.content,children:n}),e.author&&i("span",{style:Qe,title:e.author.name||e.author.email,children:i(O,{user:e.author,size:16})}),t&&(E?i(fe,{initial:e.content,initialAttachments:e.attachments,feedbackSessionId:o,apiBase:s,onCancel:c,onSave:l,onRemove:d,thread:i(le,{comment:e,onReply:m,onStatusChange:v})}):i(je,{comment:e,onClose:c,thread:i(le,{comment:e,onReply:m})}))]})}function je({comment:e,onClose:n,thread:t}){return g("div",{style:ye,children:[e.author&&g("div",{style:Ze,children:[i(O,{user:e.author,size:20}),i("span",{style:et,children:e.author.name||e.author.email})]}),i("div",{style:tt,children:e.content}),e.attachments.length>0&&i("div",{style:ve,children:e.attachments.map(o=>i("a",{href:o.url,target:"_blank",rel:"noreferrer",style:we,children:i("img",{src:o.url,alt:"",style:xe})},o.url))}),t,g("div",{style:he,children:[i("span",{style:{flex:1,fontSize:12,color:"#6b7280"},children:"Only the author can edit"}),i("button",{type:"button",onClick:n,style:Q,children:"Close"})]})]})}function Ue({pending:e,feedbackSessionId:n,apiBase:t,onCancel:o,onSave:s}){return g(ke,{children:[i("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:i("div",{style:ge,children:"\u2022"})}),i("div",{style:{position:"absolute",top:e.clickY+10,left:e.clickX+10,zIndex:2147483647},children:i(fe,{initial:"",initialAttachments:[],feedbackSessionId:n,apiBase:t,onCancel:o,onSave:s})})]})}function De({comments:e,currentPath:n,onClose:t,onSelect:o}){let s=new Map;for(let c of e){let l=s.get(c.pagePath)??[];l.push(c),s.set(c.pagePath,l)}let a=Array.from(s.keys()).sort((c,l)=>c===n?-1:l===n?1:c.localeCompare(l));return g("div",{style:wt,children:[g("div",{style:xt,children:[g("strong",{style:{fontSize:14},children:["Comments (",e.length,")"]}),i("button",{type:"button",onClick:t,style:Q,children:"Close"})]}),i("div",{style:Ct,children:e.length===0?i("div",{style:kt,children:"No comments yet. Click \u201CAdd comment\u201D to leave one."}):a.map(c=>g("div",{style:{marginBottom:12},children:[i("div",{style:Et,children:c===n?`${c} \xB7 current`:c}),(s.get(c)??[]).map((l,d)=>g("button",{type:"button",onClick:()=>o(l),style:Pt,disabled:l.status==="done"&&!1,children:[i("span",{style:Rt,children:d+1}),g("span",{style:At,children:[l.author&&i("span",{style:Lt,children:l.author.name||l.author.email}),l.content.length>140?`${l.content.slice(0,140)}\u2026`:l.content]}),l.status==="done"&&i("span",{style:It,children:"done"})]},l.id))]},c))})]})}var q=5,We=5*1024*1024,Ye=e=>new Promise(n=>{let t=URL.createObjectURL(e),o=new window.Image;o.onload=()=>{URL.revokeObjectURL(t),n({width:o.naturalWidth,height:o.naturalHeight})},o.onerror=()=>{URL.revokeObjectURL(t),n(null)},o.src=t});function fe({initial:e,initialAttachments:n,feedbackSessionId:t,apiBase:o,onCancel:s,onSave:a,onRemove:c,thread:l}){let[d,m]=C(e),[v,k]=C(n),[E,w]=C(!1),[p,y]=C(!1),[u,h]=C(null),R=B(null),z=B(null);T(()=>{let x=R.current;if(!x)return;x.focus();let L=x.value.length;x.setSelectionRange(L,L)},[]);let W=async x=>{x.preventDefault();let L=d.trim();if(L){w(!0);try{await a(L,v)}finally{w(!1)}}},Y=async x=>{if(!x||x.length===0||!o)return;h(null);let L=q-v.length;if(L<=0){h(`Max ${q} images per comment`);return}let M=Array.from(x).slice(0,L);for(let r of M){if(!r.type.startsWith("image/")){h(`"${r.name}" is not an image`);return}if(r.size>We){h(`"${r.name}" exceeds 5 MB`);return}}y(!0);try{let r=await Promise.all(M.map(Ye)),f=new FormData;M.forEach((A,P)=>{f.append("file",A),f.append("width",r[P]?.width?String(r[P]?.width):""),f.append("height",r[P]?.height?String(r[P]?.height):"")});let b=await fetch(`${o}/api/feedback-comments/uploads?feedbackSessionId=${encodeURIComponent(t)}`,{method:"POST",credentials:"include",body:f});if(!b.ok){let A=await b.json().catch(()=>null);h(A?.error??"Upload failed");return}let S=await b.json();k(A=>[...A,...S.uploads])}catch{h("Upload failed")}finally{y(!1),z.current&&(z.current.value="")}},X=x=>{k(L=>L.filter(M=>M.url!==x))};return g("form",{onSubmit:W,style:ye,children:[i("textarea",{ref:R,value:d,onChange:x=>m(x.target.value),placeholder:"Leave a comment\u2026",style:be,rows:3}),v.length>0&&i("div",{style:ve,children:v.map(x=>g("div",{style:we,children:[i("img",{src:x.url,alt:"",style:xe}),i("button",{type:"button",onClick:()=>X(x.url),style:ot,disabled:E||p,"aria-label":"Remove attachment",children:"\xD7"})]},x.url))}),u&&i("div",{style:it,children:u}),i("input",{ref:z,type:"file",accept:"image/*",multiple:!0,onChange:x=>void Y(x.target.files),style:{display:"none"}}),g("div",{style:he,children:[c&&i("button",{type:"button",onClick:()=>c(),style:nt,disabled:E,children:"Delete"}),i("button",{type:"button",onClick:()=>z.current?.click(),style:st,disabled:E||p||v.length>=q,"aria-label":p?"Uploading\u2026":"Attach image",title:p?"Uploading\u2026":"Attach image",children:p?i(at,{}):i(rt,{})}),i("div",{style:{flex:1}}),i("button",{type:"button",onClick:s,style:Q,disabled:E,children:"Cancel"}),i("button",{type:"submit",style:Se,disabled:E||p||!d.trim(),children:E?"Saving\u2026":"Save"})]}),l]})}function Xe(e,n,t){let[o,s]=C(null);return T(()=>{let a=()=>{let l=null;try{l=document.querySelector(e)}catch{l=null}if(!l){s(null);return}let d=l.getBoundingClientRect();s({top:d.top+window.scrollY+d.height*t-12,left:d.left+window.scrollX+d.width*n-12})};a();let c=new ResizeObserver(a);try{let l=document.querySelector(e);l&&c.observe(l)}catch{}return window.addEventListener("scroll",a,!0),window.addEventListener("resize",a),()=>{c.disconnect(),window.removeEventListener("scroll",a,!0),window.removeEventListener("resize",a)}},[e,n,t]),o}var G={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"},j={border:"none",background:"white",color:"#111",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:600,fontSize:13},He={...j,background:"#ef4444",color:"white"},Ve={border:"1px solid rgba(255,255,255,0.4)",background:"transparent",color:"white",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:500,fontSize:13},Ke={border:"none",background:"#10b981",color:"white",padding:"6px 12px",borderRadius:999,cursor:"pointer",fontWeight:600,fontSize:13},J={opacity:.8,fontSize:12},qe={display:"inline-flex",alignItems:"center",paddingLeft:4},Ge={marginLeft:-6,display:"inline-flex",borderRadius:999,boxShadow:"0 0 0 2px rgba(17, 17, 17, 0.92)"},Je={marginLeft:-2,padding:"0 6px",height:18,minWidth:18,borderRadius:999,background:"rgba(255,255,255,0.18)",color:"white",fontSize:10,fontWeight:600,display:"inline-flex",alignItems:"center",justifyContent:"center"},ge={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},Qe={position:"absolute",bottom:-6,right:-6,width:20,height:20,borderRadius:999,border:"2px solid white",background:"#111",display:"inline-flex",alignItems:"center",justifyContent:"center",boxShadow:"0 1px 3px rgba(0,0,0,0.3)",pointerEvents:"none"},Ze={display:"flex",alignItems:"center",gap:8},et={fontSize:13,fontWeight:600,color:"#111"},tt={fontSize:14,color:"#111",whiteSpace:"pre-wrap",wordBreak:"break-word"},ye={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"},be={width:"100%",border:"1px solid #d1d5db",borderRadius:6,padding:8,fontSize:14,resize:"vertical",fontFamily:"inherit",color:"#111",background:"white",boxSizing:"border-box"},he={display:"flex",alignItems:"center",gap:6},U={border:"1px solid transparent",borderRadius:6,padding:"6px 10px",fontSize:13,cursor:"pointer",fontWeight:500},Se={...U,background:"#111",color:"white"},Q={...U,background:"transparent",color:"#374151",borderColor:"#d1d5db"},nt={...U,background:"transparent",color:"#b91c1c",borderColor:"#fecaca"},ve={display:"flex",flexWrap:"wrap",gap:6},we={position:"relative",width:56,height:56,borderRadius:6,overflow:"hidden",border:"1px solid #e5e7eb",background:"#f9fafb"},xe={width:"100%",height:"100%",objectFit:"cover",display:"block"},ot={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"},it={color:"#b91c1c",fontSize:12,margin:0},st={...U,background:"transparent",color:"#374151",borderColor:"#d1d5db",width:30,height:30,padding:0,display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0};function rt(){return g("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:[i("title",{children:"Attach image"}),i("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 at(){return g(ke,{children:[i("style",{children:"@keyframes yns-attach-spin { to { transform: rotate(360deg); } }"}),i("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 lt=480;function Ce(){let[e,n]=C(!1);return T(()=>{let t=window.matchMedia(`(max-width: ${lt}px)`),o=()=>n(t.matches);return o(),t.addEventListener("change",o),()=>t.removeEventListener("change",o)},[]),e}var dt=e=>{let n=e.name?.trim();return n?n.split(/\s+/).filter(Boolean).slice(0,2).map(o=>o[0]?.toUpperCase()??"").join(""):e.email[0]?.toUpperCase()??"?"};function O({user:e,size:n=22}){return e.image?i("img",{src:e.image,alt:"",width:n,height:n,style:{width:n,height:n,borderRadius:999,objectFit:"cover",display:"block",flexShrink:0}}):i("span",{"aria-hidden":!0,style:{width:n,height:n,borderRadius:999,background:"rgba(255,255,255,0.18)",color:"white",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:Math.max(10,Math.round(n*.45)),fontWeight:600,flexShrink:0},children:dt(e)})}function ct(e){let n=e.authors??[],t=e.anonymousCount??0,o=e.commentTotal;if(o===0)return"Finalize this feedback session with zero comments? It will be canceled instead of submitted.";if(n.length===0&&t===0)return`Finalize this feedback session with ${o} comment${o===1?"":"s"}? You won't be able to add more.`;let s=n.length+(t>0?1:0),a=n.map(l=>l.name||l.email);t>0&&a.push(`${t} anonymous`);let c=a.length===1?a[0]:`${a.slice(0,-1).join(", ")} and ${a.at(-1)}`;return`Submit ${o} comment${o===1?"":"s"} from ${s} reviewer${s===1?"":"s"} (${c})?
|
|
3
3
|
|
|
4
|
-
This sends ALL comments \u2014 including those from other reviewers \u2014 for AI processing. You won't be able to add more comments after finalizing.`}function ot({authors:e,viewerId:n}){if(!e||e.length===0)return null;let t=e.filter(s=>s.id!==n);if(t.length===0)return null;let o=t.slice(0,3),r=t.length-o.length;return h("div",{style:je,title:`Also commenting: ${t.map(s=>`${s.name||s.email} (${s.commentCount})`).join(", ")}`,children:[o.map(s=>i("span",{style:Ue,children:i(B,{user:s,size:18})},s.id)),r>0&&h("span",{style:Oe,children:["+",r]})]})}function it({loginUrl:e}){return i("div",{"data-yns-feedback-ui":"true",children:h("div",{style:q,children:[i("span",{style:G,children:"Log in to provide feedback"}),i("button",{type:"button",onClick:()=>window.location.assign(e),style:_,children:"Log in"})]})})}function rt({user:e,onSignOut:n}){let t=ue();return i("div",{"data-yns-feedback-ui":"true",children:h("div",{style:q,children:[i(B,{user:e}),!t&&i("span",{style:at,children:e.email}),i("span",{style:G,children:"You don't have access to this store"}),i("button",{type:"button",onClick:n,style:_,children:"Sign out"})]})})}function st({user:e,onSignOut:n}){let[t,o]=P(!1),r=z(null),s=ue();I(()=>{if(!t)return;let u=g=>{r.current&&(g.target instanceof Node&&r.current.contains(g.target)||o(!1))};return document.addEventListener("mousedown",u),()=>document.removeEventListener("mousedown",u)},[t]);let c=e.name?.trim()||e.email,a=c.length>16?`${c.slice(0,16)}\u2026`:c;return h("div",{ref:r,style:{position:"relative"},children:[h("button",{type:"button",onClick:()=>o(u=>!u),style:lt,"aria-haspopup":"menu","aria-expanded":t,title:c,children:[i(B,{user:e,size:20}),!s&&i("span",{style:dt,children:a}),i("span",{"aria-hidden":!0,style:ct,children:"\u25BE"})]}),t&&i("div",{role:"menu",style:ut,children:i("button",{type:"button",role:"menuitem",onClick:()=>{o(!1),n()},style:pt,children:"Sign out"})})]})}var at={fontSize:13,color:"white",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:200},lt={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"},dt={maxWidth:"16ch",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},ct={opacity:.7,fontSize:10},ut={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},pt={display:"block",width:"100%",textAlign:"left",background:"transparent",border:"none",padding:"6px 10px",fontSize:13,color:"#111",cursor:"pointer",borderRadius:6},mt={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"},ft={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 16px",borderBottom:"1px solid #e5e7eb"},gt={flex:1,overflow:"auto",padding:"12px 12px 24px"},bt={color:"#6b7280",fontSize:13,padding:"24px 8px",textAlign:"center"},yt={fontSize:11,textTransform:"uppercase",letterSpacing:.5,color:"#6b7280",padding:"4px 4px 6px",wordBreak:"break-all"},ht={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"},St={flexShrink:0,width:22,height:22,borderRadius:999,background:"#10b981",color:"white",fontWeight:700,fontSize:11,display:"inline-flex",alignItems:"center",justifyContent:"center"},vt={flex:1,whiteSpace:"pre-wrap",wordBreak:"break-word"},wt={display:"block",fontSize:11,fontWeight:600,color:"#6b7280",marginBottom:2},xt={flexShrink:0,background:"#d1fae5",color:"#065f46",fontSize:11,fontWeight:600,padding:"2px 6px",borderRadius:4,alignSelf:"center"},Ct={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"},kt={display:"flex",alignItems:"center",gap:8},Et={background:"#d1fae5",color:"#065f46",fontSize:11,fontWeight:700,padding:"2px 8px",borderRadius:999,textTransform:"uppercase",letterSpacing:.5},Pt={display:"flex",justifyContent:"space-between",fontSize:12},Rt={width:"100%",height:6,background:"#f3f4f6",borderRadius:999,overflow:"hidden"},At={height:"100%",background:"#10b981",borderRadius:999,transition:"width 500ms"},Lt={margin:0,fontSize:12,color:"#6b7280"};function oe(){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(W)}),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(W))return null;let e=document.createElement("div");e.id=W,e.dataset.ynsFeedbackUi="true",document.body.appendChild(e);let n=ge(e);return n.render(i(Ee,{})),{unmount:()=>{n.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",()=>{oe()}):oe());function me(){typeof window>"u"||(console.log("[YNS Sandbox Inspectors] module evaluated"),Tt(),Mt())}me();var It=new Set(["HEAD","SCRIPT","STYLE","NOSCRIPT","HTML"]);function $t(e){if(e.id)return`${e.tagName.toLowerCase()}#${CSS.escape(e.id)}`;let n=[],t=e;for(;t&&t!==document.body&&t!==document.documentElement;){let o=t.tagName.toLowerCase();if(t.id){n.unshift(`${o}#${CSS.escape(t.id)}`);break}let r=Array.from(t.classList).filter(a=>!a.startsWith("data-yns-"));r.length>0&&(o+=`.${r.map(a=>CSS.escape(a)).join(".")}`);let s=t.parentElement,c=t.tagName;if(s&&Array.from(s.children).filter(u=>u.tagName===c&&(r.length===0||r.every(g=>u.classList.contains(g)))).length>1){let u=Array.from(s.children).indexOf(t)+1;o+=`:nth-child(${u})`}n.unshift(o),t=t.parentElement}return n.join(" > ")}function fe(e,n){let t=e.getBoundingClientRect(),o=window.getComputedStyle(e),r=(e.textContent??"").trim();return{tag:e.tagName.toLowerCase(),id:e.id||void 0,classes:Array.from(e.classList).filter(s=>!s.startsWith("data-yns-")),textContent:r.length>n?`${r.slice(0,n)}\u2026`:r,cssSelector:$t(e),boundingRect:{top:t.top,left:t.left,width:t.width,height:t.height},computedStyles:{color:o.color,backgroundColor:o.backgroundColor,fontSize:o.fontSize,fontFamily:o.fontFamily,padding:o.padding,margin:o.margin}}}function U(e,n){if(!e?.tagName||It.has(e.tagName))return!0;for(let t of n)if(e.hasAttribute?.(t))return!0;return!1}function Tt(){let e=!1,n=null,t=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 r=document.createElement("div");r.setAttribute("data-yns-design-overlay","label"),r.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(r);let s=document.createElement("style");s.setAttribute("data-yns-design-overlay","style"),s.textContent="[data-yns-selected] { outline: 2px solid #3b82f6 !important; outline-offset: 1px; }",document.head.appendChild(s);function c(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(x=>!x.startsWith("data-yns-")),l=y.tagName.toLowerCase()+(f.length?`.${f[0]}`:"");r.textContent=l,r.style.left=`${m.left}px`,r.style.top=`${Math.max(0,m.top-22)}px`,r.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",r.style.display="none",n=null;return}n=m,requestAnimationFrame(()=>{n===m&&e&&m&&c(m)})},u=()=>{o.style.display="none",r.style.display="none",n=null},g=y=>{if(!e||!n)return;y.preventDefault(),y.stopPropagation(),y.stopImmediatePropagation();let m=n;if(U(m,["data-yns-design-overlay"]))return;let f=fe(m,120),l=f.cssSelector;t&&t.el.removeAttribute("data-yns-selected"),t&&t.cssSelector===l?(t=null,window.parent.postMessage({type:"element-deselected",data:f},"*")):(t={el:m,cssSelector:l},m.setAttribute("data-yns-selected",""),window.parent.postMessage({type:"element-selected",data:f},"*"))},w=y=>{y.key==="Escape"&&e&&(L(),window.parent.postMessage({type:"design-mode-cleared"},"*"))};function C(){e=!0,document.addEventListener("mousemove",a,!0),document.addEventListener("mouseleave",u),document.addEventListener("click",g,!0),document.addEventListener("keydown",w,!0)}function L(){e=!1,document.removeEventListener("mousemove",a,!0),document.removeEventListener("mouseleave",u),document.removeEventListener("click",g,!0),document.removeEventListener("keydown",w,!0),o.style.display="none",r.style.display="none",n=null,t&&(t.el.removeAttribute("data-yns-selected"),t=null)}window.addEventListener("message",y=>{let m=y.data;!m||typeof m!="object"||(m.type==="design-mode-toggle"&&(m.enabled?C():(L(),window.parent.postMessage({type:"design-mode-cleared"},"*"))),m.type==="design-mode-deselect"&&t&&(t.el.removeAttribute("data-yns-selected"),t=null))})}function Mt(){let e=!1,n=null,t=[],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 r=document.createElement("div");r.setAttribute("data-yns-comment-overlay","cursor-label"),r.textContent="Click to comment",r.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 s=document.createElement("div");s.setAttribute("data-yns-comment-overlay","pins"),s.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(r),document.documentElement.appendChild(s);function c(){s.innerHTML="";for(let f of t){let l=null;try{l=document.querySelector(f.selector)}catch{l=null}if(!l)continue;let x=l.getBoundingClientRect(),R=document.createElement("div");R.style.cssText=["position: fixed",`top: ${x.top-12}px`,`left: ${x.left+x.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),s.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",r.style.display="none",n=null;return}n=l,requestAnimationFrame(()=>{if(n===l&&e&&l){let x=l.getBoundingClientRect();o.style.top=`${x.top}px`,o.style.left=`${x.left}px`,o.style.width=`${x.width}px`,o.style.height=`${x.height}px`,o.style.display="block",r.style.left=`${f.clientX+14}px`,r.style.top=`${f.clientY+14}px`,r.style.display="block"}})},u=()=>{o.style.display="none",r.style.display="none",n=null},g=f=>{if(!e||!n)return;f.preventDefault(),f.stopPropagation(),f.stopImmediatePropagation();let l=n;if(U(l,["data-yns-comment-overlay","data-yns-design-overlay"]))return;let x=fe(l,200),R=l.getBoundingClientRect();window.parent.postMessage({type:"comment-click",data:{element:x,clickPosition:{x:f.clientX,y:f.clientY},elementRect:{top:R.top,left:R.left,width:R.width,height:R.height},pagePath:window.location.pathname}},"*")},w=f=>{f.key==="Escape"&&e&&(L(),window.parent.postMessage({type:"comment-mode-cleared"},"*"))};function C(){e=!0,document.body.style.cursor="crosshair",document.addEventListener("mousemove",a,!0),document.addEventListener("mouseleave",u),document.addEventListener("click",g,!0),document.addEventListener("keydown",w,!0)}function L(){e=!1,document.body.style.cursor="",document.removeEventListener("mousemove",a,!0),document.removeEventListener("mouseleave",u),document.removeEventListener("click",g,!0),document.removeEventListener("keydown",w,!0),o.style.display="none",r.style.display="none",n=null}let y=!1,m=()=>{y||(y=!0,requestAnimationFrame(()=>{y=!1,c()}))};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():L()),l.type==="comment-pins-update"&&(t=l.pins??[],c()),l.type==="comment-pin-remove"&&(t=t.filter(x=>x.id!==l.pinId),c()))})}export{oe as mountFeedbackToolbar,me as startSandboxInspectors};
|
|
4
|
+
This sends ALL comments \u2014 including those from other reviewers \u2014 for AI processing. You won't be able to add more comments after finalizing.`}function ut({authors:e,viewerId:n}){if(!e||e.length===0)return null;let t=e.filter(a=>a.id!==n);if(t.length===0)return null;let o=t.slice(0,3),s=t.length-o.length;return g("div",{style:qe,title:`Also commenting: ${t.map(a=>`${a.name||a.email} (${a.commentCount})`).join(", ")}`,children:[o.map(a=>i("span",{style:Ge,children:i(O,{user:a,size:18})},a.id)),s>0&&g("span",{style:Je,children:["+",s]})]})}function pt({loginUrl:e}){return i("div",{"data-yns-feedback-ui":"true",children:g("div",{style:G,children:[i("span",{style:J,children:"Log in to provide feedback"}),i("button",{type:"button",onClick:()=>window.location.assign(e),style:j,children:"Log in"})]})})}function mt({user:e,onSignOut:n}){let t=Ce();return i("div",{"data-yns-feedback-ui":"true",children:g("div",{style:G,children:[i(O,{user:e}),!t&&i("span",{style:gt,children:e.email}),i("span",{style:J,children:"You don't have access to this store"}),i("button",{type:"button",onClick:n,style:j,children:"Sign out"})]})})}function ft({user:e,onSignOut:n}){let[t,o]=C(!1),s=B(null),a=Ce();T(()=>{if(!t)return;let d=m=>{s.current&&(m.target instanceof Node&&s.current.contains(m.target)||o(!1))};return document.addEventListener("mousedown",d),()=>document.removeEventListener("mousedown",d)},[t]);let c=e.name?.trim()||e.email,l=c.length>16?`${c.slice(0,16)}\u2026`:c;return g("div",{ref:s,style:{position:"relative"},children:[g("button",{type:"button",onClick:()=>o(d=>!d),style:yt,"aria-haspopup":"menu","aria-expanded":t,title:c,children:[i(O,{user:e,size:20}),!a&&i("span",{style:bt,children:l}),i("span",{"aria-hidden":!0,style:ht,children:"\u25BE"})]}),t&&i("div",{role:"menu",style:St,children:i("button",{type:"button",role:"menuitem",onClick:()=>{o(!1),n()},style:vt,children:"Sign out"})})]})}var gt={fontSize:13,color:"white",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:200},yt={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"},bt={maxWidth:"16ch",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},ht={opacity:.7,fontSize:10},St={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},vt={display:"block",width:"100%",textAlign:"left",background:"transparent",border:"none",padding:"6px 10px",fontSize:13,color:"#111",cursor:"pointer",borderRadius:6},wt={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"},xt={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 16px",borderBottom:"1px solid #e5e7eb"},Ct={flex:1,overflow:"auto",padding:"12px 12px 24px"},kt={color:"#6b7280",fontSize:13,padding:"24px 8px",textAlign:"center"},Et={fontSize:11,textTransform:"uppercase",letterSpacing:.5,color:"#6b7280",padding:"4px 4px 6px",wordBreak:"break-all"},Pt={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"},Rt={flexShrink:0,width:22,height:22,borderRadius:999,background:"#10b981",color:"white",fontWeight:700,fontSize:11,display:"inline-flex",alignItems:"center",justifyContent:"center"},At={flex:1,whiteSpace:"pre-wrap",wordBreak:"break-word"},Lt={display:"block",fontSize:11,fontWeight:600,color:"#6b7280",marginBottom:2},It={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"},ce={display:"flex",alignItems:"center",gap:8},ue={background:"#d1fae5",color:"#065f46",fontSize:11,fontWeight:700,padding:"2px 8px",borderRadius:999,textTransform:"uppercase",letterSpacing:.5},Tt={display:"flex",justifyContent:"space-between",fontSize:12},$t={width:"100%",height:6,background:"#f3f4f6",borderRadius:999,overflow:"hidden"},Mt={height:"100%",background:"#10b981",borderRadius:999,transition:"width 500ms"},pe={margin:0,fontSize:12,color:"#6b7280"},Nt={alignSelf:"flex-start",fontSize:13,fontWeight:600,color:"#059669",textDecoration:"none"},Ft={display:"flex",flexDirection:"column",gap:8,borderTop:"1px solid #e5e7eb",paddingTop:8,marginTop:2},zt={display:"flex",alignItems:"center",gap:8},_t={fontSize:12,fontWeight:600,color:"#6b7280"},Bt={flex:1,border:"1px solid #d1d5db",borderRadius:6,padding:"4px 8px",fontSize:13,color:"#111",background:"white",fontFamily:"inherit"},Ot={display:"flex",flexDirection:"column",gap:6,maxHeight:160,overflowY:"auto"},jt={display:"flex",flexDirection:"column",gap:1,borderLeft:"2px solid #e5e7eb",paddingLeft:8},Ut={fontSize:11,fontWeight:600,color:"#6b7280"},Dt={fontSize:13,color:"#111",whiteSpace:"pre-wrap",wordBreak:"break-word"},Wt={display:"flex",alignItems:"flex-end",gap:6};function me(){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(V)}),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(V))return null;let e=document.createElement("div");e.id=V,e.dataset.ynsFeedbackUi="true",document.body.appendChild(e);let n=Re(e);return n.render(i(_e,{})),{unmount:()=>{n.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",()=>{me()}):me());function Ee(){typeof window>"u"||(console.log("[YNS Sandbox Inspectors] module evaluated"),Ht(),Vt())}Ee();var Yt=new Set(["HEAD","SCRIPT","STYLE","NOSCRIPT","HTML"]);function Xt(e){if(e.id)return`${e.tagName.toLowerCase()}#${CSS.escape(e.id)}`;let n=[],t=e;for(;t&&t!==document.body&&t!==document.documentElement;){let o=t.tagName.toLowerCase();if(t.id){n.unshift(`${o}#${CSS.escape(t.id)}`);break}let s=Array.from(t.classList).filter(l=>!l.startsWith("data-yns-"));s.length>0&&(o+=`.${s.map(l=>CSS.escape(l)).join(".")}`);let a=t.parentElement,c=t.tagName;if(a&&Array.from(a.children).filter(d=>d.tagName===c&&(s.length===0||s.every(m=>d.classList.contains(m)))).length>1){let d=Array.from(a.children).indexOf(t)+1;o+=`:nth-child(${d})`}n.unshift(o),t=t.parentElement}return n.join(" > ")}function Pe(e,n){let t=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(a=>!a.startsWith("data-yns-")),textContent:s.length>n?`${s.slice(0,n)}\u2026`:s,cssSelector:Xt(e),boundingRect:{top:t.top,left:t.left,width:t.width,height:t.height},computedStyles:{color:o.color,backgroundColor:o.backgroundColor,fontSize:o.fontSize,fontFamily:o.fontFamily,padding:o.padding,margin:o.margin}}}function D(e,n){if(!e?.tagName||Yt.has(e.tagName))return!0;for(let t of n)if(e.hasAttribute?.(t))return!0;return!1}function Ht(){let e=!1,n=null,t=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 a=document.createElement("style");a.setAttribute("data-yns-design-overlay","style"),a.textContent="[data-yns-selected] { outline: 2px solid #3b82f6 !important; outline-offset: 1px; }",document.head.appendChild(a);function c(w){let p=w.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 y=Array.from(w.classList).filter(h=>!h.startsWith("data-yns-")),u=w.tagName.toLowerCase()+(y.length?`.${y[0]}`:"");s.textContent=u,s.style.left=`${p.left}px`,s.style.top=`${Math.max(0,p.top-22)}px`,s.style.display="block"}let l=w=>{let p=document.elementFromPoint(w.clientX,w.clientY);if(D(p,["data-yns-design-overlay"])){o.style.display="none",s.style.display="none",n=null;return}n=p,requestAnimationFrame(()=>{n===p&&e&&p&&c(p)})},d=()=>{o.style.display="none",s.style.display="none",n=null},m=w=>{if(!e||!n)return;w.preventDefault(),w.stopPropagation(),w.stopImmediatePropagation();let p=n;if(D(p,["data-yns-design-overlay"]))return;let y=Pe(p,120),u=y.cssSelector;t&&t.el.removeAttribute("data-yns-selected"),t&&t.cssSelector===u?(t=null,window.parent.postMessage({type:"element-deselected",data:y},"*")):(t={el:p,cssSelector:u},p.setAttribute("data-yns-selected",""),window.parent.postMessage({type:"element-selected",data:y},"*"))},v=w=>{w.key==="Escape"&&e&&(E(),window.parent.postMessage({type:"design-mode-cleared"},"*"))};function k(){e=!0,document.addEventListener("mousemove",l,!0),document.addEventListener("mouseleave",d),document.addEventListener("click",m,!0),document.addEventListener("keydown",v,!0)}function E(){e=!1,document.removeEventListener("mousemove",l,!0),document.removeEventListener("mouseleave",d),document.removeEventListener("click",m,!0),document.removeEventListener("keydown",v,!0),o.style.display="none",s.style.display="none",n=null,t&&(t.el.removeAttribute("data-yns-selected"),t=null)}window.addEventListener("message",w=>{let p=w.data;!p||typeof p!="object"||(p.type==="design-mode-toggle"&&(p.enabled?k():(E(),window.parent.postMessage({type:"design-mode-cleared"},"*"))),p.type==="design-mode-deselect"&&t&&(t.el.removeAttribute("data-yns-selected"),t=null))})}function Vt(){let e=!1,n=null,t=[],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 a=document.createElement("div");a.setAttribute("data-yns-comment-overlay","pins"),a.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(a);function c(){a.innerHTML="";for(let y of t){let u=null;try{u=document.querySelector(y.selector)}catch{u=null}if(!u)continue;let h=u.getBoundingClientRect(),R=document.createElement("div");R.style.cssText=["position: fixed",`top: ${h.top-12}px`,`left: ${h.left+h.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(y.number),a.appendChild(R)}}let l=y=>{let u=document.elementFromPoint(y.clientX,y.clientY);if(D(u,["data-yns-comment-overlay","data-yns-design-overlay"])){o.style.display="none",s.style.display="none",n=null;return}n=u,requestAnimationFrame(()=>{if(n===u&&e&&u){let h=u.getBoundingClientRect();o.style.top=`${h.top}px`,o.style.left=`${h.left}px`,o.style.width=`${h.width}px`,o.style.height=`${h.height}px`,o.style.display="block",s.style.left=`${y.clientX+14}px`,s.style.top=`${y.clientY+14}px`,s.style.display="block"}})},d=()=>{o.style.display="none",s.style.display="none",n=null},m=y=>{if(!e||!n)return;y.preventDefault(),y.stopPropagation(),y.stopImmediatePropagation();let u=n;if(D(u,["data-yns-comment-overlay","data-yns-design-overlay"]))return;let h=Pe(u,200),R=u.getBoundingClientRect();window.parent.postMessage({type:"comment-click",data:{element:h,clickPosition:{x:y.clientX,y:y.clientY},elementRect:{top:R.top,left:R.left,width:R.width,height:R.height},pagePath:window.location.pathname}},"*")},v=y=>{y.key==="Escape"&&e&&(E(),window.parent.postMessage({type:"comment-mode-cleared"},"*"))};function k(){e=!0,document.body.style.cursor="crosshair",document.addEventListener("mousemove",l,!0),document.addEventListener("mouseleave",d),document.addEventListener("click",m,!0),document.addEventListener("keydown",v,!0)}function E(){e=!1,document.body.style.cursor="",document.removeEventListener("mousemove",l,!0),document.removeEventListener("mouseleave",d),document.removeEventListener("click",m,!0),document.removeEventListener("keydown",v,!0),o.style.display="none",s.style.display="none",n=null}let w=!1,p=()=>{w||(w=!0,requestAnimationFrame(()=>{w=!1,c()}))};window.addEventListener("scroll",p,{passive:!0}),window.addEventListener("resize",p,{passive:!0}),window.addEventListener("message",y=>{let u=y.data;!u||typeof u!="object"||(u.type==="comment-mode-toggle"&&(u.enabled?k():E()),u.type==="comment-pins-update"&&(t=u.pins??[],c()),u.type==="comment-pin-remove"&&(t=t.filter(h=>h.id!==u.pinId),c()))})}export{me as mountFeedbackToolbar,Ee as startSandboxInspectors};
|
|
5
5
|
//# sourceMappingURL=browser.js.map
|