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