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