commerce-kit 0.41.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/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/package.json +1 -1
package/dist/feedback-toolbar.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{useEffect as A,useRef as B,useState as v}from"react";import{createRoot as
|
|
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})?
|
|
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
|