@siteping/widget 0.9.6 → 0.9.8

package/dist/react.js

@@ -0,0 +1,1568 @@
+import {A,B,w as w$1,O as O$1,N,F,D,S,H as H$1,z,b,x,y,C,c,e,g,h,j,i,a,f,k,n,o,p,q as q$1}from'./chunk-OTJZRTBK.js';import {useRef,useState,useEffect}from'react';var w,Pe,at;function lt(t,e){if(at=new Date,t.nodeType!==Node.ELEMENT_NODE)throw new Error("Can't generate CSS selector for non-element node type.");if(t.tagName.toLowerCase()==="html")return "html";let n={root:document.body,idName:i=>true,className:i=>true,tagName:i=>true,attr:(i,r)=>false,seedMinLength:1,optimizedMinLength:2,threshold:1e3,maxNumberOfTries:1e4,timeoutMs:void 0};w={...n,...e},Pe=jt(w.root,n);let o=ne(t,"all",()=>ne(t,"two",()=>ne(t,"one",()=>ne(t,"none"))));if(o){let i=dt(ut(o,t));return i.length>0&&(o=i[0]),re(o)}else throw new Error("Selector was not found.")}function jt(t,e){return t.nodeType===Node.DOCUMENT_NODE?t:t===e.root?t.ownerDocument:t}function ne(t,e,n){let o=null,i=[],r=t,s=0;for(;r;){let a=new Date().getTime()-at.getTime();if(w.timeoutMs!==void 0&&a>w.timeoutMs)throw new Error(`Timeout: Can't find a unique selector after ${a}ms`);let l=ie(zt(r))||ie(...Kt(r))||ie(...Xt(r))||ie(Ut(r))||[st()],p=Yt(r);if(e=="all")p&&(l=l.concat(l.filter(Ae).map(c=>oe(c,p))));else if(e=="two")l=l.slice(0,1),p&&(l=l.concat(l.filter(Ae).map(c=>oe(c,p))));else if(e=="one"){let[c]=l=l.slice(0,1);p&&Ae(c)&&(l=[oe(c,p)]);}else e=="none"&&(l=[st()],p&&(l=[oe(l[0],p)]));for(let c of l)c.level=s;if(i.push(l),i.length>=w.seedMinLength&&(o=it(i,n),o))break;r=r.parentElement,s++;}return o||(o=it(i,n)),!o&&n?n():o}function it(t,e){let n=dt(pt(t));if(n.length>w.threshold)return e?e():null;for(let o of n)if(ct(o))return o;return null}function re(t){let e=t[0],n=e.name;for(let o=1;o<t.length;o++){let i=t[o].level||0;e.level===i-1?n=`${t[o].name} > ${n}`:n=`${t[o].name} ${n}`,e=t[o];}return n}function rt(t){return t.map(e=>e.penalty).reduce((e,n)=>e+n,0)}function ct(t){let e=re(t);switch(Pe.querySelectorAll(e).length){case 0:throw new Error(`Can't select any node with this selector: ${e}`);case 1:return  true;default:return  false}}function zt(t){let e=t.getAttribute("id");return e&&w.idName(e)?{name:"#"+CSS.escape(e),penalty:0}:null}function Kt(t){return Array.from(t.attributes).filter(n=>w.attr(n.name,n.value)).map(n=>({name:`[${CSS.escape(n.name)}="${CSS.escape(n.value)}"]`,penalty:.5}))}function Xt(t){return Array.from(t.classList).filter(w.className).map(n=>({name:"."+CSS.escape(n),penalty:1}))}function Ut(t){let e=t.tagName.toLowerCase();return w.tagName(e)?{name:e,penalty:2}:null}function st(){return {name:"*",penalty:3}}function Yt(t){let e=t.parentNode;if(!e)return null;let n=e.firstChild;if(!n)return null;let o=0;for(;n&&(n.nodeType===Node.ELEMENT_NODE&&o++,n!==t);)n=n.nextSibling;return o}function oe(t,e){return {name:t.name+`:nth-child(${e})`,penalty:t.penalty+1}}function Ae(t){return t.name!=="html"&&!t.name.startsWith("#")}function ie(...t){let e=t.filter(Wt);return e.length>0?e:null}function Wt(t){return t!=null}function*pt(t,e=[]){if(t.length>0)for(let n of t[0])yield*pt(t.slice(1,t.length),e.concat(n));else yield e;}function dt(t){return [...t].sort((e,n)=>rt(e)-rt(n))}function*ut(t,e,n={counter:0,visited:new Map}){if(t.length>2&&t.length>w.optimizedMinLength)for(let o=1;o<t.length-1;o++){if(n.counter>w.maxNumberOfTries)return;n.counter+=1;let i=[...t];i.splice(o,1);let r=re(i);if(n.visited.has(r))return;ct(i)&&qt(i,e)&&(yield i,n.visited.set(r,true),yield*ut(i,e,n));}}function qt(t,e){return Pe.querySelector(re(t))===e}var Gt=["role","aria-label","type","name","href","src","data-testid","data-id"];function Vt(t){let e=5381;for(let n=0;n<t.length;n++)e=(e<<5)+e+t.charCodeAt(n)|0;return (e>>>0).toString(36)}function Re(t){let e=t.children.length,n=0,o=t.parentElement;if(o)for(let s of o.children){if(s===t)break;s.tagName===t.tagName&&n++;}let i=[];for(let s of Gt){let a=t.getAttribute(s);a&&i.push(`${s}=${a}`);}let r=i.length>0?Vt(i.join(",")):"0";return `${e}:${n}:${r}`}function ht(t,e){let n=e.split(":");if(n.length!==3)return 0;let[o,i,r]=n,s=Number(o),a=Number(i);if(Number.isNaN(s)||Number.isNaN(a))return 0;let l=Re(t),[p,c,d]=l.split(":"),h=0,f=Math.abs(Number(p)-s);f===0?h+=.2:f<=2?h+=.1:f<=5&&(h+=.03);let v=Math.abs(Number(c)-a);return v===0?h+=.4:v===1?h+=.2:v<=3&&(h+=.08),d===r&&(h+=.4),h}function $(t,e){let n=e==="before"?"previousElementSibling":"nextElementSibling",o=t[n],i=3;for(;o&&i>0;){let r=o.textContent?.trim();if(r)return e==="before"?r.slice(-32):r.slice(0,32);o=o[n],i--;}return ""}function se(t){let e=t.previousElementSibling?.textContent?.trim().slice(0,40)??"",n=t.nextElementSibling?.textContent?.trim().slice(0,40)??"";return [e,n].filter(Boolean).join(" | ")}function ft(t){if(t.id){let o=t.id.includes("'")?`concat('${t.id.replace(/'/g,`',"'",'`)}')`:`'${t.id}'`;return `//${t.localName}[@id=${o}]`}let e=[],n=t;for(;n&&n!==document.body&&e.length<6;){let o=n.localName,i=n.parentElement;if(n.id){let s=n.id.includes("'")?`concat('${n.id.replace(/'/g,`',"'",'`)}')`:`'${n.id}'`;return e.unshift(`/${o}[@id=${s}]`),"/"+e.join("")}let r=1;if(i)for(let s of i.children){if(s===n)break;s.localName===o&&r++;}e.unshift(`/${o}[${r}]`),n=i;}return "/html/body"+e.join("")}var K="data-feedback-anchor";function Fe(t){let e=lt(t,{className:d=>!/^(css|sc|emotion|styled)-/.test(d)&&!/^[a-z]{1,3}[A-Za-z0-9]{4,8}$/.test(d),attr:d=>["data-testid","data-id","role","aria-label"].includes(d),idName:d=>!d.startsWith("radix-")&&!/^:r[0-9]+:$/.test(d),seedMinLength:3,optimizedMinLength:2}),n=ft(t),i=(t.textContent?.trim()??"").slice(0,120),r=$(t,"before"),s=$(t,"after"),a=Re(t),l=se(t),c=t.closest(`[${K}]`)?.getAttribute(K)??null;return {cssSelector:e,xpath:n,textSnippet:i,textPrefix:r,textSuffix:s,fingerprint:a,neighborText:l,elementTag:t.tagName,elementId:t.id||void 0,anchorKey:c}}function mt(t,e){let n=t.getBoundingClientRect();return n.left<=e.x&&n.top<=e.y&&n.right>=e.x+e.width&&n.bottom>=e.y+e.height}function gt(t,e=document.documentElement){let n=t.x+t.width/2,o=t.y+t.height/2,i=document.elementFromPoint(n,o);if(!i||i===e)return document.body;let r=i;for(;r&&r!==document.body;){if(r.hasAttribute(K)&&mt(r,t))return r;r=r.parentElement;}for(r=i;r&&r!==document.body;){if(mt(r,t))return r;r=r.parentElement;}return document.body}function bt(t,e){return e.width<=0||e.height<=0?{xPct:0,yPct:0,wPct:1,hPct:1}:{xPct:(t.x-e.x)/e.width,yPct:(t.y-e.y)/e.height,wPct:t.width/e.width,hPct:t.height/e.height}}var ae=class{constructor(e,n$1){this.colors=e;this.t=n$1;this.root=b("div",{style:`
+        position:fixed;
+        z-index:${2147483647};
+        width:300px;
+        padding:16px;
+        border-radius:16px;
+        background:${this.colors.glassBg};
+        backdrop-filter:blur(24px);
+        -webkit-backdrop-filter:blur(24px);
+        border:1px solid ${this.colors.glassBorder};
+        box-shadow:0 8px 32px ${this.colors.shadow}, 0 2px 8px ${this.colors.shadow};
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        opacity:0;
+        transform:translateY(8px) scale(0.98);
+        transition:opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+        display:none;
+        -webkit-font-smoothing:antialiased;
+      `}),this.root.setAttribute("role","dialog"),this.root.setAttribute("aria-modal","true"),this.root.setAttribute("aria-label",this.t("popup.ariaLabel"));let o$1=[{type:"question",label:this.t("type.question"),icon:n},{type:"change",label:this.t("type.change"),icon:o},{type:"bug",label:this.t("type.bug"),icon:p},{type:"other",label:this.t("type.other"),icon:q$1}],i=b("div",{style:"display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;"});for(let c$1 of o$1){let d=document.createElement("button");d.style.cssText=`
+        height:44px;
+        border-radius:9999px;border:1px solid ${this.colors.border};
+        background:${this.colors.glassBg};cursor:pointer;
+        display:flex;align-items:center;justify-content:center;gap:5px;
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        font-size:13px;font-weight:500;color:${this.colors.textTertiary};
+        transition:all 0.2s ease;
+        padding:0 12px;
+      `;let h=a(c$1.icon);h.setAttribute("style","width:13px;height:13px;flex-shrink:0;"),d.appendChild(h);let f=document.createElement("span");c(f,c$1.label),d.appendChild(f),d.dataset.type=c$1.type,d.setAttribute("aria-pressed","false"),d.addEventListener("click",()=>{this.selectType(c$1.type,i);}),d.addEventListener("mouseenter",()=>{if(d.dataset.type!==this.selectedType){let v=y(d.dataset.type??"",this.colors);d.style.background=v,d.style.borderColor=x(d.dataset.type??"",this.colors)+"40";}}),d.addEventListener("mouseleave",()=>{d.dataset.type!==this.selectedType&&(d.style.background=this.colors.glassBg,d.style.borderColor=this.colors.border);}),i.appendChild(d);}this.textarea=document.createElement("textarea"),this.textarea.style.cssText=`
+      width:100%;min-height:72px;max-height:152px;
+      padding:10px 12px;border-radius:12px;
+      border:1px solid ${this.colors.border};
+      background:${this.colors.glassBgHeavy};
+      color:${this.colors.text};font-family:"Inter",system-ui,-apple-system,sans-serif;
+      font-size:13px;line-height:1.5;resize:vertical;
+      outline:none;transition:all 0.2s ease;
+      box-sizing:border-box;
+    `,this.textarea.placeholder=this.t("popup.placeholder"),this.textarea.maxLength=5e3,this.textarea.setAttribute("aria-label",this.t("popup.textareaAria"));let r=b("div",{style:`
+        font-size:11px;color:${this.colors.textTertiary};
+        text-align:right;margin-top:4px;
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        letter-spacing:0.01em;
+      `}),s=navigator.userAgentData,a$1=s?s.platform==="macOS":navigator.platform?.includes("Mac")??/Macintosh|Mac OS X/i.test(navigator.userAgent);c(r,a$1?this.t("popup.submitHintMac"):this.t("popup.submitHintOther")),this.textarea.addEventListener("focus",()=>{this.textarea.style.borderColor=this.colors.accent,this.textarea.style.boxShadow=`0 0 0 3px ${this.colors.accent}14`,this.textarea.style.background=this.colors.bg;}),this.textarea.addEventListener("blur",()=>{this.textarea.style.borderColor=this.colors.border,this.textarea.style.boxShadow="none",this.textarea.style.background=this.colors.glassBgHeavy;}),this.textarea.addEventListener("input",()=>{this.updateSubmitState();}),this.textarea.addEventListener("keydown",c=>{c.key==="Enter"&&(c.ctrlKey||c.metaKey)&&(c.preventDefault(),this.submit()),c.key==="Escape"&&this.cancel();});let l=b("div",{style:"display:flex;justify-content:flex-end;gap:8px;margin-top:12px;"}),p$1=document.createElement("button");p$1.style.cssText=`
+      height:34px;padding:0 16px;border-radius:9999px;
+      border:1px solid ${this.colors.border};
+      background:${this.colors.glassBg};
+      color:${this.colors.textTertiary};font-family:"Inter",system-ui,-apple-system,sans-serif;
+      font-size:13px;font-weight:500;cursor:pointer;
+      transition:all 0.2s ease;
+    `,c(p$1,this.t("popup.cancel")),p$1.addEventListener("click",()=>this.cancel()),p$1.addEventListener("mouseenter",()=>{p$1.style.borderColor=this.colors.accent,p$1.style.color=this.colors.accent;}),p$1.addEventListener("mouseleave",()=>{p$1.style.borderColor=this.colors.border,p$1.style.color=this.colors.textTertiary;}),this.submitBtn=document.createElement("button"),this.submitBtn.style.cssText=`
+      height:34px;padding:0 18px;border-radius:9999px;
+      border:none;background:${this.colors.accentGradient};
+      color:#fff;font-family:"Inter",system-ui,-apple-system,sans-serif;
+      font-size:13px;font-weight:600;cursor:pointer;
+      opacity:0.35;pointer-events:none;
+      transition:all 0.2s ease;
+      box-shadow:0 2px 8px ${this.colors.accentGlow};
+    `,c(this.submitBtn,this.t("popup.submit")),this.submitBtn.addEventListener("click",()=>this.submit()),l.appendChild(p$1),l.appendChild(this.submitBtn),this.root.appendChild(i),this.root.appendChild(this.textarea),this.root.appendChild(r),this.root.appendChild(l),document.body.appendChild(this.root);}colors;t;root;selectedType=null;textarea;submitBtn;resolve=null;previouslyFocused=null;onKeydownTrap=null;show(e){return new Promise(n=>{this.resolve=n,this.selectedType=null,this.textarea.value="",this.updateSubmitState(),this.resetTypeButtons(),this.previouslyFocused=document.activeElement;let o=220,i=300,r=e.bottom+8,s=e.left;if(r+o>window.innerHeight){let l=e.top-o-8;l>=8?r=l:r=window.innerHeight-o-8;}s+i>window.innerWidth&&(s=e.right-i),s=Math.max(8,s),r=Math.max(8,r),this.root.style.top=`${r}px`,this.root.style.left=`${s}px`,this.root.style.display="block",this.onKeydownTrap=l=>{if(l.key==="Tab"){let p=Array.from(this.root.querySelectorAll('button:not([disabled]), textarea, input, [tabindex]:not([tabindex="-1"])'));if(p.length===0)return;let c=p[0],d=p[p.length-1];if(!c||!d)return;l.shiftKey?(document.activeElement===c||!this.root.contains(document.activeElement))&&(l.preventDefault(),d.focus()):(document.activeElement===d||!this.root.contains(document.activeElement))&&(l.preventDefault(),c.focus());}},this.root.addEventListener("keydown",this.onKeydownTrap);let a=typeof window<"u"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;this.root.style.transition=a?"none":"",requestAnimationFrame(()=>{this.root.style.opacity="1",this.root.style.transform="translateY(0) scale(1)",this.textarea.focus();});})}selectType(e,n){this.selectedType=e;let o=n.querySelectorAll("button");for(let i of o){let r=i.dataset.type===e,s=x(i.dataset.type??"",this.colors),a=y(i.dataset.type??"",this.colors);i.style.background=r?a:this.colors.glassBg,i.style.borderColor=r?s+"60":this.colors.border,i.style.color=r?s:this.colors.textTertiary,i.style.fontWeight=r?"600":"500",i.setAttribute("aria-pressed",String(r));}this.updateSubmitState();}resetTypeButtons(){let e=this.root.querySelectorAll("button[data-type]");for(let n of e)n.setAttribute("aria-pressed","false"),n.style.background=this.colors.glassBg,n.style.borderColor=this.colors.border,n.style.color=this.colors.textTertiary,n.style.fontWeight="500";}updateSubmitState(){let e=this.selectedType!==null&&this.textarea.value.trim().length>0;this.submitBtn.disabled=!e,this.submitBtn.style.opacity=e?"1":"0.35",this.submitBtn.style.pointerEvents=e?"auto":"none";}submit(){!this.selectedType||!this.textarea.value.trim()||(this.resolve?.({type:this.selectedType,message:this.textarea.value.trim()}),this.resolve=null,this.hideElement());}cancel(){this.resolve?.(null),this.resolve=null,this.hideElement();}hideElement(){this.onKeydownTrap&&(this.root.removeEventListener("keydown",this.onKeydownTrap),this.onKeydownTrap=null),this.root.style.opacity="0",this.root.style.transform="translateY(8px) scale(0.98)",this.previouslyFocused?.focus(),this.previouslyFocused=null,setTimeout(()=>{this.root.style.display="none";},250);}destroy(){this.root.remove();}};var X,yt=false;async function Jt(){if(X!==void 0)return X;try{let t=await import('html2canvas');return X=t.default??t,X}catch(t){return X=null,yt||(yt=true,console.warn("[siteping] html2canvas import failed unexpectedly. Capture is disabled for this session \u2014 feedbacks are still submitted, just without screenshots. Underlying error:",t)),null}}async function xt(t,e){let n=await Jt();if(!n)return null;let o=.85,i=1200;try{let r=await n(document.body,{x:window.scrollX+t.x,y:window.scrollY+t.y,width:t.width,height:t.height,scale:window.devicePixelRatio,useCORS:!0,allowTaint:!0,logging:!1,ignoreElements:d=>d.tagName==="SITEPING-WIDGET"||d.closest?.("siteping-widget")!==null||d.getAttribute?.("data-siteping-ignore")==="true"});if(r.width<=i)return r.toDataURL("image/jpeg",o);let s=i/r.width,a=i,l=Math.round(r.height*s),p=document.createElement("canvas");p.width=a,p.height=l;let c=p.getContext("2d");return c?(c.drawImage(r,0,0,a,l),p.toDataURL("image/jpeg",o)):null}catch(r){return console.warn("[siteping] Screenshot capture failed:",r),null}}var le=class{constructor(e,n,o,i=false){this.colors=e;this.bus=n;this.t=o;this.enableScreenshot=i;this.popup=new ae(e,o),this.bus.on("annotation:start",()=>this.activate());}colors;bus;t;enableScreenshot;overlay=null;toolbar=null;drawingRect=null;startX=0;startY=0;isDrawing=false;isActive=false;popup;savedOverflow="";preActiveFocusElement=null;rafId=null;pendingMoveEvent=null;async maybeCapture(e){return this.enableScreenshot?xt(e):null}activate(){if(this.isActive)return;this.isActive=true,this.preActiveFocusElement=document.activeElement,this.savedOverflow=document.body.style.overflow,document.body.style.overflow="hidden",this.overlay=b("div",{style:`
+        position:fixed;inset:0;
+        z-index:${2147483646};
+        background:rgba(15, 23, 42, 0.04);
+        cursor:crosshair;
+      `}),this.overlay.setAttribute("aria-hidden","true"),this.toolbar=b("div",{style:`
+        position:fixed;top:0;left:0;right:0;
+        z-index:${2147483647};
+        height:52px;
+        background:${this.colors.glassBg};
+        backdrop-filter:blur(24px);
+        -webkit-backdrop-filter:blur(24px);
+        border-bottom:1px solid ${this.colors.glassBorder};
+        display:flex;align-items:center;justify-content:center;gap:16px;
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        font-size:14px;color:${this.colors.text};
+        box-shadow:0 4px 16px ${this.colors.shadow};
+        -webkit-font-smoothing:antialiased;
+      `});let e=b("span",{style:`
+        width:8px;height:8px;border-radius:50%;
+        background:${this.colors.accent};
+        box-shadow:0 0 8px ${this.colors.accentGlow};
+        animation:pulse 1.5s ease-in-out infinite;
+      `}),n=document.createElement("style");n.textContent=["@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}","@media(prefers-reduced-motion:reduce){@keyframes pulse{from,to{opacity:1}}}"].join(""),this.toolbar.appendChild(n);let o=b("span",{style:"font-weight:500;letter-spacing:-0.01em;"});c(o,this.t("annotator.instruction"));let i=document.createElement("button");i.style.cssText=`
+      height:34px;padding:0 18px;border-radius:9999px;
+      border:1px solid ${this.colors.border};
+      background:${this.colors.glassBg};
+      color:${this.colors.textTertiary};font-family:"Inter",system-ui,-apple-system,sans-serif;
+      font-size:13px;font-weight:500;cursor:pointer;
+      transition:all 0.2s ease;
+    `,c(i,this.t("annotator.cancel")),i.addEventListener("click",()=>this.deactivate()),i.addEventListener("mouseenter",()=>{i.style.borderColor=this.colors.typeBug,i.style.color=this.colors.typeBug,i.style.background=this.colors.typeBugBg;}),i.addEventListener("mouseleave",()=>{i.style.borderColor=this.colors.border,i.style.color=this.colors.textTertiary,i.style.background=this.colors.glassBg;}),this.toolbar.appendChild(e),this.toolbar.appendChild(o),this.toolbar.appendChild(i),this.overlay.addEventListener("mousedown",this.onMouseDown),this.overlay.addEventListener("mousemove",this.onMouseMove),this.overlay.addEventListener("mouseup",this.onMouseUp),this.overlay.addEventListener("touchstart",this.onTouchStart,{passive:false}),this.overlay.addEventListener("touchmove",this.onTouchMove,{passive:false}),this.overlay.addEventListener("touchend",this.onTouchEnd),this.overlay.addEventListener("keydown",this.onOverlayKeyDown),this.overlay.setAttribute("tabindex","0"),document.addEventListener("keydown",this.onKeyDown),document.body.appendChild(this.overlay),document.body.appendChild(this.toolbar);}deactivate(){this.isActive&&(this.isActive=false,this.isDrawing=false,this.preActiveFocusElement=null,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.pendingMoveEvent=null,document.body.style.overflow=this.savedOverflow,document.removeEventListener("keydown",this.onKeyDown),this.overlay?.remove(),this.toolbar?.remove(),this.drawingRect?.remove(),this.overlay=null,this.toolbar=null,this.drawingRect=null,this.bus.emit("annotation:end"));}onKeyDown=e=>{e.key==="Escape"&&this.deactivate();};onOverlayKeyDown=async e=>{if(e.key!=="Enter")return;e.preventDefault();let n=this.preActiveFocusElement;if(!n||!(n instanceof HTMLElement))return;let o=n.getBoundingClientRect();if(o.width<=0||o.height<=0)return;let i=new DOMRect(o.x,o.y,o.width,o.height),r=await this.popup.show(i);if(!r)return;let a={anchor:Fe(n),rect:{xPct:0,yPct:0,wPct:1,hPct:1},scrollX:window.scrollX,scrollY:window.scrollY,viewportW:window.innerWidth,viewportH:window.innerHeight,devicePixelRatio:window.devicePixelRatio},l=await this.maybeCapture(i);this.deactivate(),this.bus.emit("annotation:complete",{annotation:a,type:r.type,message:r.message,screenshotDataUrl:l});};onMouseDown=e=>{this.startDrawing(e.clientX,e.clientY);};onTouchStart=e=>{e.preventDefault();let n=e.touches[0];n&&this.startDrawing(n.clientX,n.clientY);};startDrawing(e,n){this.isDrawing=true,this.startX=e,this.startY=n,this.drawingRect?.remove(),this.drawingRect=b("div",{style:`
+        position:fixed;
+        border:2px solid ${this.colors.accent};
+        background:${this.colors.accent}12;
+        pointer-events:none;
+        border-radius:8px;
+        box-shadow:0 0 16px ${this.colors.accentGlow};
+        transition:box-shadow 0.15s ease;
+      `}),this.overlay?.appendChild(this.drawingRect);}onMouseMove=e=>{this.scheduleRectUpdate(e);};onTouchMove=e=>{e.preventDefault(),e.touches[0]&&this.scheduleRectUpdate(e.touches[0]);};scheduleRectUpdate(e){!this.isDrawing||!this.drawingRect||(this.pendingMoveEvent=e,this.rafId===null&&(this.rafId=requestAnimationFrame(()=>{this.rafId=null;let n=this.pendingMoveEvent;if(!n||!this.drawingRect)return;let o=Math.min(n.clientX,this.startX),i=Math.min(n.clientY,this.startY),r=Math.abs(n.clientX-this.startX),s=Math.abs(n.clientY-this.startY);this.drawingRect.style.left=`${o}px`,this.drawingRect.style.top=`${i}px`,this.drawingRect.style.width=`${r}px`,this.drawingRect.style.height=`${s}px`;})));}onTouchEnd=async e=>{let n=e.changedTouches[0];n&&await this.finishDrawing(n.clientX,n.clientY);};onMouseUp=async e=>{await this.finishDrawing(e.clientX,e.clientY);};finishDrawing=async(e,n)=>{if(!this.isDrawing||!this.drawingRect)return;this.isDrawing=false;let o=Math.min(e,this.startX),i=Math.min(n,this.startY),r=Math.abs(e-this.startX),s=Math.abs(n-this.startY);if(r<10||s<10){this.drawingRect.remove(),this.drawingRect=null;return}let a=new DOMRect(o,i,r,s),l=await this.popup.show(a);if(!l){this.drawingRect?.remove(),this.drawingRect=null;return}let p=this.buildAnnotation(a);this.drawingRect?.remove(),this.drawingRect=null;let c=await this.maybeCapture(a);this.deactivate(),this.bus.emit("annotation:complete",{annotation:p,type:l.type,message:l.message,screenshotDataUrl:c});};buildAnnotation(e){this.overlay&&(this.overlay.style.pointerEvents="none");let n=gt(e);this.overlay&&(this.overlay.style.pointerEvents="auto");let o=Fe(n),i=n.getBoundingClientRect(),r=bt(e,i);return {anchor:o,rect:r,scrollX:window.scrollX,scrollY:window.scrollY,viewportW:window.innerWidth,viewportH:window.innerHeight,devicePixelRatio:window.devicePixelRatio}}destroy(){this.deactivate(),this.popup.destroy();}};var T=class extends Error{code;retryable;constructor(e,n,o){super(e),this.code=n,this.retryable=o,this.name="SitepingError";}},H=class extends T{constructor(e){super(e,"NETWORK",true),this.name="SitepingNetworkError";}},U=class extends T{constructor(e){super(e,"VALIDATION",false),this.name="SitepingValidationError";}},Y=class extends T{constructor(e){super(e,"AUTH",false),this.name="SitepingAuthError";}};function Me(t){return {cssSelector:t.anchor.cssSelector,xpath:t.anchor.xpath,textSnippet:t.anchor.textSnippet,elementTag:t.anchor.elementTag,elementId:t.anchor.elementId,textPrefix:t.anchor.textPrefix,textSuffix:t.anchor.textSuffix,fingerprint:t.anchor.fingerprint,neighborText:t.anchor.neighborText,anchorKey:t.anchor.anchorKey??null,xPct:t.rect.xPct,yPct:t.rect.yPct,wPct:t.rect.wPct,hPct:t.rect.hPct,scrollX:t.scrollX,scrollY:t.scrollY,viewportW:t.viewportW,viewportH:t.viewportH,devicePixelRatio:t.devicePixelRatio}}async function W(t,e){let n=await t.text().catch(()=>"Unknown error"),o=n?`${t.status} ${n}`:`${t.status}`,i=`${e}: ${o}`;return t.status===401||t.status===403?new Y(i):t.status>=400&&t.status<500?new U(i):new T(i,"SERVER",false)}function q(t,e){if(t instanceof T&&t instanceof H)return t;let n=t instanceof Error?t.message:String(t);return new H(`${e}: ${n}`)}var Qt=3,Zt=1e4,V="siteping_retry_queue",en=20;async function G(t,e,n=Qt){for(let o=0;o<=n;o++){let i=new AbortController,r=setTimeout(()=>i.abort(),Zt);try{let l=await fetch(t,{...e,signal:i.signal});if(clearTimeout(r),l.ok||l.status>=400&&l.status<500||o===n)return l}catch(l){if(clearTimeout(r),o===n)throw l}let s=1e3*2**o,a=Math.random()*1e3-500;await new Promise(l=>setTimeout(l,s+a));}throw new Error("Max retries exceeded")}var tn="siteping_retry_queue";async function vt(t){return typeof navigator<"u"&&navigator.locks?navigator.locks.request(tn,()=>t()):t()}function nn(t,e){vt(()=>{try{let n=localStorage.getItem(V),o=n?JSON.parse(n):[],i=Array.isArray(o)?o:[];i.length>=en&&i.shift(),i.push({endpoint:t,payload:e}),localStorage.setItem(V,JSON.stringify(i));}catch{}});}async function wt(t){await vt(async()=>{try{let e=localStorage.getItem(V);if(!e)return;let n=JSON.parse(e),o=Array.isArray(n)?n:[],i=o.filter(a=>a.endpoint===t);if(i.length===0)return;let r=[];for(let a of i)try{(await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(a.payload)})).ok||r.push(a);}catch{r.push(a);}let s=o.filter(a=>a.endpoint!==t).concat(r);s.length>0?localStorage.setItem(V,JSON.stringify(s)):localStorage.removeItem(V);}catch{}});}var ce=class{constructor(e,n){this.endpoint=e;this.projectName=n;}endpoint;projectName;async sendFeedback(e){try{let n;try{n=await G(this.endpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)});}catch(o){throw q(o,"Failed to send feedback")}if(!n.ok)throw await W(n,"Failed to send feedback");return await n.json()}catch(n){throw nn(this.endpoint,e),n}}async getFeedbacks(e,n){let o=new URLSearchParams({projectName:e});n?.page&&o.set("page",String(n.page)),n?.limit&&o.set("limit",String(n.limit)),n?.type&&o.set("type",n.type),n?.status&&o.set("status",n.status),n?.search&&o.set("search",n.search),n?.url&&o.set("url",n.url),n?.urlPattern&&o.set("urlPattern",n.urlPattern);let i;try{i=await G(`${this.endpoint}?${o.toString()}`,{method:"GET",cache:"no-store"});}catch(r){throw q(r,"Failed to fetch feedbacks")}if(!i.ok)throw await W(i,"Failed to fetch feedbacks");return await i.json()}async resolveFeedback(e,n){let o;try{o=await G(this.endpoint,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:e,projectName:this.projectName,status:n?"resolved":"open"})});}catch(i){throw q(i,"Failed to update feedback")}if(!o.ok)throw await W(o,"Failed to update feedback");return await o.json()}async deleteFeedback(e){let n;try{n=await G(this.endpoint,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:e,projectName:this.projectName})});}catch(o){throw q(o,"Failed to delete feedback")}if(!n.ok)throw await W(n,"Failed to delete feedback")}async deleteAllFeedbacks(e){let n;try{n=await G(this.endpoint,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({projectName:e,deleteAll:!0})});}catch(o){throw q(o,"Failed to delete all feedbacks")}if(!n.ok)throw await W(n,"Failed to delete all feedbacks")}};var on=["log","info","warn","error"];function rn(t){if(t===null)return "null";if(t===void 0)return "undefined";if(typeof t=="string")return t;if(typeof t=="number"||typeof t=="boolean"||typeof t=="bigint")return String(t);if(t instanceof Error)return `${t.name}: ${t.message}${t.stack?`
+${t.stack}`:""}`;try{let e=new WeakSet;return JSON.stringify(t,(n,o)=>{if(typeof o=="function")return "[Function]";if(typeof o=="symbol")return o.toString();if(typeof o=="object"&&o!==null){if(e.has(o))return "[Circular]";e.add(o);}return o})}catch{try{return String(t)}catch{return "[Unserializable]"}}}function sn(t){let e="";for(let n=0;n<t.length&&(n>0&&(e+=" "),e+=rn(t[n]),!(e.length>=500));n++);return e.length>500&&(e=`${e.slice(0,499)}\u2026`),e}var pe=class{maxEntries;entries=[];originals=new Map;disposed=false;constructor(e=50){if(this.maxEntries=Math.min(Math.max(Math.floor(e),0),1e3),!(typeof console>"u"))for(let n of on){let o=console[n];if(typeof o!="function")continue;this.originals.set(n,o);let i=this,r=function(...s){try{i.push(n,s);}catch{}o.apply(this??console,s);};try{Object.defineProperty(r,"name",{value:n});}catch{}console[n]=r;}}push(e,n){this.maxEntries!==0&&(this.entries.length>=this.maxEntries&&this.entries.shift(),this.entries.push({level:e,timestamp:new Date().toISOString(),message:sn(n)}));}getEntries(){return this.entries.slice()}dispose(){if(!this.disposed&&(this.disposed=true,!(typeof console>"u"))){for(let[e,n]of this.originals)try{console[e]=n;}catch{}this.originals.clear();}}};function kt(t){return t.length<=2e3?t:`${t.slice(0,1999)}\u2026`}function Et(t){if(typeof t=="string")return t;if(t instanceof URL)return t.href;if(typeof t=="object"&&t!==null&&"url"in t){let e=t.url;if(typeof e=="string")return e}try{return String(t)}catch{return "(unknown)"}}var de=class{maxEntries;entries=[];originalFetch=null;originalXhrOpen=null;originalXhrSend=null;disposed=false;constructor(e=20){this.maxEntries=Math.min(Math.max(Math.floor(e),0),500),this.installFetch(),this.installXhr();}push(e){this.maxEntries!==0&&(this.entries.length>=this.maxEntries&&this.entries.shift(),this.entries.push(e));}installFetch(){if(typeof globalThis.fetch!="function")return;let e=globalThis.fetch;this.originalFetch=e;let n=async(o,i)=>{let r=new Date,s=typeof performance<"u"?performance.now():Date.now(),a=kt(Et(o)),l=(i?.method??(o instanceof Request?o.method:"GET")).toUpperCase();try{let p=await e(o,i);if(!p.ok){let c=typeof performance<"u"?performance.now():Date.now();this.push({url:a,method:l,status:p.status,durationMs:Math.round(c-s),timestamp:r.toISOString()});}return p}catch(p){let c=typeof performance<"u"?performance.now():Date.now();throw this.push({url:a,method:l,status:0,durationMs:Math.round(c-s),timestamp:r.toISOString()}),p}};globalThis.fetch=n;}installXhr(){if(typeof XMLHttpRequest>"u")return;let e=XMLHttpRequest.prototype,n=e.open,o=e.send;this.originalXhrOpen=n,this.originalXhrSend=o;let i=this,r=new WeakMap;e.open=function(s,a,...l){try{r.set(this,{method:s.toUpperCase(),url:kt(Et(a)),startedAt:new Date,t0:typeof performance<"u"?performance.now():Date.now()});}catch{}return n.call(this,s,a,...l)},e.send=function(s){let a=r.get(this);if(a){let l=()=>{try{let p=typeof performance<"u"?performance.now():Date.now(),c=this.status;(c===0||c>=400)&&i.push({url:a.url,method:a.method,status:c,durationMs:Math.round(p-a.t0),timestamp:a.startedAt.toISOString()});}catch{}};try{this.addEventListener("loadend",l,{once:!0});}catch{try{this.addEventListener("loadend",l);}catch{}}}return o.call(this,s??null)};}getEntries(){return this.entries.slice()}dispose(){if(!this.disposed){if(this.disposed=true,this.originalFetch&&typeof globalThis.fetch=="function")try{globalThis.fetch=this.originalFetch;}catch{}if(typeof XMLHttpRequest<"u")try{this.originalXhrOpen&&(XMLHttpRequest.prototype.open=this.originalXhrOpen),this.originalXhrSend&&(XMLHttpRequest.prototype.send=this.originalXhrSend);}catch{}}}};var J=class{listeners=new Map;on(e,n){this.listeners.has(e)||this.listeners.set(e,new Set);let o=this.listeners.get(e);return o.add(n),()=>{o.delete(n);}}off(e,n){let o=this.listeners.get(e);o&&o.delete(n);}emit(e,...n){let o=this.listeners.get(e);if(o)for(let i of o)try{i(...n);}catch(r){console.error(`[siteping] Error in event listener for "${String(e)}":`,r);}}removeAll(){this.listeners.clear();}};var an=54,ue=class{constructor(e,n,o,i$1){this.bus=o;this.t=i$1;let r=n.position??"bottom-right",s=r==="bottom-right";this.items=[{id:"chat",icon:g,label:i$1("fab.messages")},{id:"annotate",icon:h,label:i$1("fab.annotate")},{id:"toggle-annotations",icon:i,iconAlt:j,label:i$1("fab.annotations")}],this.fab=document.createElement("button"),this.fab.className=`sp-fab sp-fab--${r} sp-anim-fab-in`,this.fab.style.position="fixed",this.fab.appendChild(a(f)),this.fab.setAttribute("aria-label",i$1("fab.aria")),this.fab.setAttribute("aria-expanded","false"),this.fab.addEventListener("click",()=>this.toggle()),this.radialContainer=document.createElement("div"),this.radialContainer.className=`sp-radial sp-radial--${r}`,this.radialContainer.setAttribute("role","menu");for(let p=0;p<this.items.length;p++){let c=this.items[p];if(!c)continue;let d=document.createElement("button");d.className="sp-radial-item",d.style.setProperty("--sp-i",String(p)),d.appendChild(a(c.icon)),d.setAttribute("role","menuitem"),d.setAttribute("aria-label",c.label),d.dataset.itemId=c.id,d.addEventListener("click",f=>{f.stopPropagation(),this.handleItemClick(c.id);});let h=document.createElement("span");h.className="sp-radial-label",h.textContent=c.label,h.style.cssText=s?"position:absolute; right:54px; top:50%; transform:translateY(-50%); white-space:nowrap;":"position:absolute; left:54px; top:50%; transform:translateY(-50%); white-space:nowrap;",d.appendChild(h),this.radialContainer.appendChild(d);}this.root=document.createElement("div"),this.root.appendChild(this.radialContainer),this.root.appendChild(this.fab),e.appendChild(this.root);let a$1=e.host;this.onDocumentClick=p=>{this.isOpen&&!p.composedPath().includes(a$1)&&this.close();},document.addEventListener("click",this.onDocumentClick);let l=p=>{p.key==="Escape"&&this.isOpen&&(p.stopPropagation(),this.close());};this.fab.addEventListener("keydown",l),this.radialContainer.addEventListener("keydown",l),this.radialContainer.addEventListener("keydown",p=>{let c=Array.from(this.radialContainer.querySelectorAll(".sp-radial-item"));if(c.length===0||!this.isOpen)return;let d=e.activeElement??document.activeElement,h=c.indexOf(d);switch(p.key){case "ArrowUp":{p.preventDefault();let f=h<=0?c.length-1:h-1;c[f]?.focus();break}case "ArrowDown":{p.preventDefault();let f=h>=c.length-1?0:h+1;c[f]?.focus();break}case "Home":{p.preventDefault(),c[0]?.focus();break}case "End":{p.preventDefault(),c[c.length-1]?.focus();break}}});}bus;t;root;fab;radialContainer;badgeEl=null;isOpen=false;annotationsVisible=true;items;onDocumentClick;updateBadge(e){if(e<=0){this.badgeEl?.remove(),this.badgeEl=null;return}this.badgeEl||(this.badgeEl=document.createElement("span"),this.badgeEl.className="sp-fab-badge",this.badgeEl.setAttribute("role","status"),this.badgeEl.setAttribute("aria-live","polite"),this.fab.appendChild(this.badgeEl));let n=e>99?"99+":String(e);c(this.badgeEl,n),this.badgeEl.setAttribute("aria-label",this.t("fab.badge").replace("{count}",String(e)));}toggle(){this.isOpen?this.close():this.open();}open(){this.isOpen=true,this.setFabIcon(k),this.fab.setAttribute("aria-expanded","true"),this.radialContainer.querySelectorAll(".sp-radial-item").forEach((n,o)=>{let i=-(16+an*(o+1));n.style.transform=`translate(0px, ${i}px) scale(1)`,n.classList.add("sp-radial-item--open");}),requestAnimationFrame(()=>{this.radialContainer.querySelector(".sp-radial-item")?.focus();});}close(){this.isOpen=false,this.setFabIcon(f),this.fab.setAttribute("aria-expanded","false"),this.radialContainer.querySelectorAll(".sp-radial-item").forEach(n=>{n.style.transform="translate(0, 0) scale(0.8)",n.classList.remove("sp-radial-item--open");}),this.fab.focus();}setFabIcon(e){let n=this.badgeEl;this.fab.replaceChildren(a(e)),n&&this.fab.appendChild(n);}handleItemClick(e){switch(this.close(),e){case "chat":this.bus.emit("panel:toggle",true);break;case "annotate":this.bus.emit("annotation:start");break;case "toggle-annotations":{this.annotationsVisible=!this.annotationsVisible,this.bus.emit("annotations:toggle",this.annotationsVisible);let n=this.radialContainer.querySelector('[data-item-id="toggle-annotations"]');n&&n.replaceChildren(a(this.annotationsVisible?i:j));break}}}destroy(){document.removeEventListener("click",this.onDocumentClick),this.root.remove();}};var St="siteping_identity";function Tt(){try{let t=localStorage.getItem(St);if(!t)return null;let e=JSON.parse(t);if(typeof e=="object"&&e!==null&&"name"in e&&typeof e.name=="string"&&"email"in e&&typeof e.email=="string"){let n=e;if(n.name&&n.email)return n}return null}catch{return null}}function Ct(t){try{localStorage.setItem(St,JSON.stringify(t));}catch{}}function ln(t,e){if(t===e)return 0;if(t.length===0)return e.length;if(e.length===0)return t.length;if(t.length>e.length){let s=t;t=e,e=s;}let n=t.length,o=e.length,i=new Array(n+1);for(let s=0;s<=n;s++)i[s]=s;let r=new Array(n+1);for(let s=1;s<=o;s++){r[0]=s;for(let l=1;l<=n;l++){let p=i[l-1]??0;r[l]=t[l-1]===e[s-1]?p:1+Math.min(p,i[l]??0,r[l-1]??0);}let a=i;i=r,r=a;}return i[n]??0}function O(t,e){if(t===e)return 1;let n=Math.max(t.length,e.length);return n===0?1:1-ln(t,e)/n}function Ie(t,e,n=.6){if(!e||!t)return 0;if(t.includes(e))return 1;let o=e.length;if(o>t.length){let a=O(t,e);return a>=n?a:0}let i=0,r=t.length>500?t.slice(0,500):t,s=r.length-o;for(let a=0;a<=s;a++){let l=r.slice(a,a+o),p=O(l,e);if(p>i&&(i=p),i>=.95)break}return i>=n?i:0}var cn=300,pn=.3;function he(t,e){if(!e.textSnippet)return  true;let n=(t.textContent?.trim()??"").slice(0,500);return Ie(n,e.textSnippet,.5)>pn}function dn(t){if(t.anchorKey){let e=t.anchorKey.replace(/\\/g,"\\\\").replace(/"/g,'\\"');try{let n=document.querySelector(`[${K}="${e}"]`);if(n&&he(n,t))return {element:n,confidence:1,strategy:"anchorKey"}}catch{}}if(t.elementId){let e=document.getElementById(t.elementId);if(e&&e.tagName===t.elementTag&&he(e,t))return {element:e,confidence:1,strategy:"id"}}try{let e=document.querySelector(t.cssSelector);if(e&&e.tagName===t.elementTag&&he(e,t))return {element:e,confidence:.95,strategy:"css"}}catch{}try{let n=document.evaluate(t.xpath,document,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;if(n instanceof Element&&n.tagName===t.elementTag&&he(n,t))return {element:n,confidence:.9,strategy:"xpath"}}catch{}return un(t)}function un(t){let e=t.elementTag.toLowerCase(),n=document.querySelectorAll(e);if(n.length===0)return null;let o=null,i=0,r=Math.min(n.length,cn);for(let s=0;s<r;s++){let a=n[s];if(!a)continue;let l=hn(a,t);if(l>i&&(i=l,o=a,i>=.85))break}return !o||i<.4?null:{element:o,confidence:Math.min(i,.85),strategy:"scan"}}function hn(t,e){let n=0,o=0,i=(t.textContent?.trim()??"").slice(0,500);if(e.textSnippet&&(o+=40,n+=Ie(i,e.textSnippet,.5)*40),e.fingerprint&&(o+=20,n+=ht(t,e.fingerprint)*20),e.textPrefix||e.textSuffix){o+=20;let r=0,s=0;if(e.textPrefix){let a=$(t,"before");r+=a?O(a,e.textPrefix):0,s++;}if(e.textSuffix){let a=$(t,"after");r+=a?O(a,e.textSuffix):0,s++;}s>0&&(n+=r/s*20);}if(e.neighborText){o+=20;let r=se(t);n+=r?O(r,e.neighborText)*20:0;}return o>0?n/o:0}function fe(t,e){let n=dn(t);if(!n)return null;let o=n.element.getBoundingClientRect(),i=new DOMRect(o.x+e.xPct*o.width,o.y+e.yPct*o.height,e.wPct*o.width,e.hPct*o.height);return {element:n.element,rect:i,confidence:n.confidence,strategy:n.strategy}}function De(t){return {cssSelector:t.cssSelector,xpath:t.xpath,textSnippet:t.textSnippet,elementTag:t.elementTag,elementId:t.elementId??void 0,textPrefix:t.textPrefix,textSuffix:t.textSuffix,fingerprint:t.fingerprint,neighborText:t.neighborText,anchorKey:t.anchorKey??null}}function me(t){return {xPct:t.xPct,yPct:t.yPct,wPct:t.wPct,hPct:t.hPct}}var At=13;function Pt(t){return {top:t.top+window.scrollY-At,left:t.right+window.scrollX-At}}function Q(t,e){let n=t.entries[e],o=t.elementIndices[e];if(!(!n||o===void 0))return n.elements[o]}var Rt=300,Ft=200,fn=.7,mn=28,Mt=32,ge=class{constructor(e,n,o,i,r=null){this.colors=e;this.tooltip=n;this.bus=o;this.t=i;this.liveRegion=r;this.container=b("div",{style:`position:absolute;top:0;left:0;pointer-events:none;z-index:${2147483646};`}),this.container.id="siteping-markers",document.body.appendChild(this.container),this.bus.on("annotations:toggle",s=>{this.container.style.display=s?"block":"none";}),this.resizeHandler=()=>this.scheduleReposition(),window.addEventListener("resize",this.resizeHandler,{passive:true}),this.scrollHandler=()=>this.scheduleReposition(),window.addEventListener("scroll",this.scrollHandler,{passive:true,capture:true}),this.mutationObserver=new MutationObserver(s=>{let a=false;for(let l of s)if(!(this.container.contains(l.target)||this.tooltip.contains(l.target))){a=true;break}a&&this.scheduleReposition();}),this.mutationObserver.observe(document.body,{childList:true,subtree:true,attributes:false,characterData:false}),this.onDocumentClickForClusters=s=>{this.container.contains(s.target)||this.collapseAllClusters();},document.addEventListener("click",this.onDocumentClickForClusters);}colors;tooltip;bus;t;liveRegion;container;entries=[];highlightElements=[];pinnedFeedback=null;onDocumentClick=null;repositionTimer=null;mutationObserver=null;scrollHandler=null;resizeHandler=null;anchorCache=new Map;clusters=[];onDocumentClickForClusters=null;get count(){return this.entries.length}scheduleReposition(){this.repositionTimer||("requestIdleCallback"in window?this.repositionTimer=window.requestIdleCallback(()=>{this.repositionTimer=null,this.repositionAll();},{timeout:Ft+100}):this.repositionTimer=+setTimeout(()=>{this.repositionTimer=null,this.repositionAll();},Ft));}repositionAll(){let e=new Set;for(let n of this.entries)for(let o=0;o<n.feedback.annotations.length;o++){let i=n.elements[o];if(!i)continue;let r=n.feedback.annotations[o];if(!r)continue;let s=`${n.feedback.id}:${o}`;e.add(s);let l=this.anchorCache.get(s)?.deref(),p;if(l?.isConnected){let d=l.getBoundingClientRect(),h=me(r);p={element:l,rect:new DOMRect(d.left+h.xPct*d.width,d.top+h.yPct*d.height,h.wPct*d.width,h.hPct*d.height),confidence:1,strategy:"css"};}else p=fe(De(r),me(r)),p?.element&&this.anchorCache.set(s,new WeakRef(p.element));if(!p){i.style.display="none";continue}let c=Pt(p.rect);n.baseTop=c.top,n.baseLeft=c.left,i.style.display="flex",this.applyConfidenceStyle(i,p.confidence,n.feedback);}for(let n of this.anchorCache.keys())e.has(n)||this.anchorCache.delete(n);this.applyClusterPositions(),this.pinnedFeedback&&this.showHighlight(this.pinnedFeedback);}applyClusterPositions(){for(let e of this.clusters)e.expanded?this.applyFanPositions(e):this.applyStackPositions(e);}render(e){this.clear(),e.forEach((n,o)=>{let i=this.buildEntry(n,o+1);this.entries.push(i);}),this.buildClusters(),this.liveRegion&&this.entries.length>0&&(this.liveRegion.textContent=this.t("marker.count").replace("{count}",String(this.entries.length)));}addFeedback(e,n){let o=this.buildEntry(e,n);for(let i of o.elements)i.style.animation="sp-marker-in 0.35s cubic-bezier(0.34,1.56,0.64,1) both";this.entries.push(o),this.buildClusters();}buildEntry(e,n){let o={feedback:e,elements:[],baseTop:0,baseLeft:0};for(let i of e.annotations){let r=fe(De(i),me(i));if(!r)continue;let s=Pt(r.rect);o.baseTop=s.top,o.baseLeft=s.left;let a=this.createMarker(n,e,s);this.applyConfidenceStyle(a,r.confidence,e),this.container.appendChild(a),o.elements.push(a);}return o}buildClusters(){for(let o of this.container.querySelectorAll(".sp-cluster-badge"))o.remove();let e=[];for(let o of this.entries)for(let i=0;i<o.elements.length;i++)e.push({entry:o,elIdx:i});let n=new Set;this.clusters=[];for(let o=0;o<e.length;o++){if(n.has(o))continue;let i=e[o];if(!i)continue;let r={entries:[i.entry],elementIndices:[i.elIdx],expanded:false};n.add(o);for(let s=o+1;s<e.length;s++){if(n.has(s))continue;let a=i.entry,l=e[s];if(!l)continue;let p=l.entry;Math.sqrt((a.baseLeft-p.baseLeft)**2+(a.baseTop-p.baseTop)**2)<mn&&(r.entries.push(p),r.elementIndices.push(l.elIdx),n.add(s));}this.clusters.push(r);}for(let o of this.clusters)o.entries.length<=1||(this.applyStackPositions(o),this.addClusterBadge(o));}applyStackPositions(e){let n=e.entries[0];if(!n)return;let{baseTop:o,baseLeft:i}=n,r=e.entries.length<=1;for(let s=0;s<e.entries.length;s++){let a=Q(e,s);a&&(a.style.top=`${o+(r?0:s*3)}px`,a.style.left=`${i+(r?0:s*3)}px`,a.style.zIndex=String(s+1));}}applyFanPositions(e){let n=e.entries[0];if(!n)return;let{baseTop:o,baseLeft:i}=n,r=e.entries.length,s=(r-1)*Mt,a=i-s/2;for(let l=0;l<r;l++){let p=Q(e,l);p&&(p.style.top=`${o}px`,p.style.left=`${a+l*Mt}px`,p.style.zIndex=String(10+l));}}addClusterBadge(e){let n=Q(e,e.entries.length-1);if(!n)return;let o=b("div",{class:"sp-cluster-badge",style:`
+        position:absolute;top:-6px;right:-6px;
+        min-width:16px;height:16px;padding:0 4px;
+        border-radius:9999px;
+        background:${this.colors.accent};color:#fff;
+        font-size:10px;font-weight:700;
+        display:flex;align-items:center;justify-content:center;
+        border:1.5px solid #fff;
+        pointer-events:none;
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        line-height:1;
+      `});c(o,String(e.entries.length)),n.appendChild(o);}setBadgesVisible(e,n){for(let o=0;o<e.entries.length;o++){let i=Q(e,o)?.querySelector(".sp-cluster-badge");i&&(i.style.display=n?"flex":"none");}}findCluster(e){for(let n of this.clusters)if(!(n.entries.length<=1)){for(let o=0;o<n.entries.length;o++)if(Q(n,o)===e)return n}return null}handleClusterClick(e,n){let o=this.findCluster(e);return o?o.expanded?false:(n.stopPropagation(),this.collapseAllClusters(),o.expanded=true,this.applyFanPositions(o),this.setBadgesVisible(o,false),true):false}collapseCluster(e){e.expanded&&(e.expanded=false,this.applyStackPositions(e),this.setBadgesVisible(e,true));}collapseAllClusters(){for(let e of this.clusters)this.collapseCluster(e);}applyConfidenceStyle(e,n,o){let i=o.status==="resolved";n<fn&&!i?(e.style.borderStyle="dashed",e.style.opacity="0.7",e.title=this.t("marker.approximate").replace("{confidence}",String(Math.round(n*100)))):(e.style.borderStyle="solid",e.style.opacity="1",e.title="");}createMarker(e,n,o){let i=x(n.type,this.colors),r=n.status==="resolved",s=b("div",{style:`
+        position:absolute;
+        top:${o.top}px;
+        left:${o.left}px;
+        width:26px;height:26px;
+        border-radius:50%;
+        background:${r?"rgba(241,245,249,0.9)":"rgba(255,255,255,0.92)"};
+        border:2px solid ${r?"#cbd5e1":i};
+        display:flex;align-items:center;justify-content:center;
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        font-size:11px;font-weight:700;
+        color:${r?"#94a3b8":i};
+        cursor:pointer;pointer-events:auto;
+        box-shadow:${r?"0 2px 8px rgba(0,0,0,0.06)":`0 2px 12px ${i}25, 0 2px 6px rgba(0,0,0,0.06)`};
+        transition:top 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.15s ease, box-shadow 0.15s ease;
+        user-select:none;
+        -webkit-font-smoothing:antialiased;
+      `});s.dataset.feedbackId=n.id,s.setAttribute("tabindex","0"),s.setAttribute("role","button");let a=n.message.length>60?`${n.message.slice(0,60)}...`:n.message,l=this.t("marker.aria").replace("{number}",String(e)).replace("{type}",C(n.type,this.t)).replace("{message}",a);s.setAttribute("aria-label",l),s.setAttribute("aria-describedby",this.tooltip.tooltipId),c(s,r?"\u2713":String(e)),s.addEventListener("mouseenter",()=>{s.style.transform="scale(1.2)",s.style.boxShadow=r?"0 4px 16px rgba(0,0,0,0.1)":`0 4px 20px ${i}35, 0 4px 12px rgba(0,0,0,0.08)`,this.tooltip.show(n,s.getBoundingClientRect()),this.pinnedFeedback||this.showHighlight(n);}),s.addEventListener("mouseleave",()=>{s.style.transform="scale(1)",s.style.boxShadow=r?"0 2px 8px rgba(0,0,0,0.06)":`0 2px 12px ${i}25, 0 2px 6px rgba(0,0,0,0.06)`,this.tooltip.scheduleHide(),this.pinnedFeedback||this.clearHighlight();}),s.addEventListener("focus",()=>{this.tooltip.show(n,s.getBoundingClientRect()),this.pinnedFeedback||this.showHighlight(n);}),s.addEventListener("blur",()=>{this.tooltip.scheduleHide(),this.pinnedFeedback||this.clearHighlight();});let p=c=>{c instanceof MouseEvent&&this.handleClusterClick(s,c)||(this.pinHighlight(n),this.bus.emit("panel:toggle",true),s.dispatchEvent(new CustomEvent("sp-marker-click",{detail:{feedbackId:n.id},bubbles:true})));};return s.addEventListener("click",c=>p(c)),s.addEventListener("keydown",c=>{(c.key==="Enter"||c.key===" ")&&(c.preventDefault(),p(c));}),s}highlight(e){for(let n of this.entries)if(n.feedback.id===e)for(let o of n.elements)o.style.animation="sp-pulse-ring 0.7s ease-out",o.addEventListener("animationend",()=>{o.style.animation="";},{once:true});}showHighlight(e){this.removeHighlightElements();for(let n of e.annotations){let o=fe(De(n),me(n));if(!o)continue;let i=x(e.type,this.colors),r=o.rect,s=b("div",{style:`
+          position:absolute;
+          top:${r.top+window.scrollY}px;
+          left:${r.left+window.scrollX}px;
+          width:${r.width}px;height:${r.height}px;
+          border:2px solid ${i};
+          background:${i}0c;
+          border-radius:8px;
+          pointer-events:none;z-index:-1;
+          opacity:0;
+          box-shadow:0 0 16px ${i}20;
+          transition:opacity ${Rt}ms ease;
+        `});this.container.appendChild(s),this.highlightElements.push(s),s.offsetHeight,s.style.opacity="1";}}pinHighlight(e){this.unpinHighlight(),this.showHighlight(e),this.pinnedFeedback=e,this.onDocumentClick=n=>{this.container.contains(n.target)||this.unpinHighlight();},document.addEventListener("click",this.onDocumentClick,{capture:true});}unpinHighlight(){this.onDocumentClick&&(document.removeEventListener("click",this.onDocumentClick,{capture:true}),this.onDocumentClick=null),this.pinnedFeedback=null,this.clearHighlight();}clearHighlight(){for(let e of this.highlightElements)e.style.opacity="0",setTimeout(()=>e.remove(),Rt);this.highlightElements=[];}removeHighlightElements(){for(let e of this.highlightElements)e.remove();this.highlightElements=[];}clear(){this.unpinHighlight(),this.container.replaceChildren(),this.entries=[],this.clusters=[],this.anchorCache.clear();}destroy(){this.unpinHighlight(),this.repositionTimer&&("cancelIdleCallback"in window&&window.cancelIdleCallback(this.repositionTimer),clearTimeout(this.repositionTimer)),this.resizeHandler&&window.removeEventListener("resize",this.resizeHandler),this.scrollHandler&&window.removeEventListener("scroll",this.scrollHandler,{capture:true}),this.onDocumentClickForClusters&&document.removeEventListener("click",this.onDocumentClickForClusters),this.mutationObserver?.disconnect(),this.container.remove();}};var be=class{constructor(e,n){this.store=e;this.projectName=n;}store;projectName;async sendFeedback(e){let n=await this.store.createFeedback({projectName:e.projectName,type:e.type,message:e.message,status:"open",url:e.url,urlPattern:e.urlPattern??null,viewport:e.viewport,userAgent:e.userAgent,authorName:e.authorName,authorEmail:e.authorEmail,clientId:e.clientId,annotations:e.annotations.map(Me),screenshotDataUrl:e.screenshotDataUrl??null});return Le(n)}async getFeedbacks(e,n){let{feedbacks:o,total:i}=await this.store.getFeedbacks({projectName:e,page:n?.page,limit:n?.limit,type:n?.type,status:n?.status,search:n?.search,url:n?.url,urlPattern:n?.urlPattern});return {feedbacks:o.map(Le),total:i}}async resolveFeedback(e,n){let o=await this.store.updateFeedback(e,{status:n?"resolved":"open",resolvedAt:n?new Date:null});return Le(o)}async deleteFeedback(e){await this.store.deleteFeedback(e);}async deleteAllFeedbacks(e){await this.store.deleteAllFeedbacks(e);}};function Le(t){return {id:t.id,projectName:t.projectName,type:t.type,message:t.message,status:t.status,url:t.url,urlPattern:t.urlPattern??null,viewport:t.viewport,userAgent:t.userAgent,authorName:t.authorName,authorEmail:t.authorEmail,resolvedAt:t.resolvedAt?.toISOString()??null,createdAt:t.createdAt.toISOString(),updatedAt:t.updatedAt.toISOString(),annotations:t.annotations.map(gn),screenshotUrl:t.screenshotUrl??null,diagnostics:t.diagnostics??null}}function gn(t){return {id:t.id,feedbackId:t.feedbackId,cssSelector:t.cssSelector,xpath:t.xpath,textSnippet:t.textSnippet,elementTag:t.elementTag,elementId:t.elementId,textPrefix:t.textPrefix,textSuffix:t.textSuffix,fingerprint:t.fingerprint,neighborText:t.neighborText,anchorKey:t.anchorKey??null,xPct:t.xPct,yPct:t.yPct,wPct:t.wPct,hPct:t.hPct,scrollX:t.scrollX,scrollY:t.scrollY,viewportW:t.viewportW,viewportH:t.viewportH,devicePixelRatio:t.devicePixelRatio,createdAt:t.createdAt.toISOString()}}var bn="linear(0, 0.006, 0.025, 0.06, 0.11, 0.17, 0.25, 0.34, 0.45, 0.56, 0.67, 0.78, 0.88, 0.95, 1.01, 1.04, 1.05, 1.04, 1.02, 1, 0.99, 1)",Ne="cubic-bezier(0.16, 1, 0.3, 1)",_e="cubic-bezier(0.34, 1.56, 0.64, 1)",yn="cubic-bezier(0.25, 1, 0.5, 1)",It=`
+  /* ---- Keyframes ---- */
+
+  @keyframes sp-fab-in {
+    from {
+      transform: scale(0) rotate(-180deg);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1) rotate(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes sp-fab-glow {
+    0%, 100% { box-shadow: 0 4px 20px var(--sp-accent-glow), 0 2px 8px rgba(0, 0, 0, 0.08); }
+    50% { box-shadow: 0 4px 28px var(--sp-accent-glow), 0 2px 12px rgba(0, 0, 0, 0.1); }
+  }
+
+  @keyframes sp-marker-in {
+    0% {
+      transform: scale(0);
+      opacity: 0;
+    }
+    60% {
+      transform: scale(1.2);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes sp-pulse-ring {
+    0% {
+      box-shadow: 0 0 0 0 var(--sp-accent-glow);
+    }
+    70% {
+      box-shadow: 0 0 0 8px transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  @keyframes sp-flash-bg {
+    0% { background-color: var(--sp-accent-light); }
+    100% { background-color: transparent; }
+  }
+
+  @keyframes sp-slide-up {
+    from {
+      transform: translateY(8px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes sp-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes sp-shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+
+  /* ---- Animation classes ---- */
+
+  .sp-anim-fab-in {
+    animation: sp-fab-in 0.5s ${bn} both;
+  }
+
+  .sp-anim-marker-in {
+    animation: sp-marker-in 0.35s ${_e} both;
+  }
+
+  .sp-anim-pulse {
+    animation: sp-pulse-ring 0.7s ease-out;
+  }
+
+  .sp-anim-flash {
+    animation: sp-flash-bg 0.5s ${yn};
+  }
+
+  .sp-anim-slide-up {
+    animation: sp-slide-up 0.3s ${Ne} both;
+  }
+
+  .sp-anim-fade-in {
+    animation: sp-fade-in 0.2s ease-out both;
+  }
+
+  /* ---- Transition utilities ---- */
+
+  .sp-panel {
+    transform: translateX(110%);
+    transition: transform 0.4s ${Ne};
+  }
+
+  .sp-panel.sp-panel--open {
+    transform: translateX(0);
+  }
+
+  .sp-radial-item {
+    opacity: 0;
+    pointer-events: none;
+    transform: translate(0, 0) scale(0.8);
+    transition:
+      transform 0.35s ${_e},
+      opacity 0.2s ease,
+      background 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .sp-radial-item.sp-radial-item--open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* Stagger delay via CSS custom property --sp-i */
+  .sp-radial-item {
+    transition-delay: calc(var(--sp-i, 0) * 50ms);
+  }
+
+  /* ---- Card stagger animation ---- */
+
+  @keyframes sp-card-in {
+    from {
+      transform: translateY(12px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  .sp-card {
+    animation: sp-card-in 0.35s ${Ne} both;
+    animation-delay: calc(var(--sp-card-i, 0) * 40ms);
+  }
+
+  /* ---- Loading spinner ---- */
+
+  @keyframes sp-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .sp-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--sp-border);
+    border-top-color: var(--sp-accent);
+    border-radius: 50%;
+    animation: sp-spin 0.6s linear infinite;
+  }
+
+  /* ---- Badge bounce ---- */
+
+  @keyframes sp-badge-in {
+    0% { transform: scale(0); }
+    60% { transform: scale(1.3); }
+    100% { transform: scale(1); }
+  }
+
+  .sp-fab-badge {
+    animation: sp-badge-in 0.4s ${_e} both;
+  }
+
+  /* ---- Reduced motion ---- */
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+`;function $e(t){return `
+    :host {
+      all: initial;
+      position: fixed;
+      z-index: ${2147483647};
+      font-family: var(--sp-font);
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--sp-text);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      ${z(t)}
+
+      /* Identity modal \u2014 theme-aware backdrop + panel */
+      --sp-identity-bg: ${t.glassBgHeavy};
+      --sp-identity-overlay: ${t.bg==="#ffffff"?"rgba(15, 23, 42, 0.2)":"rgba(0, 0, 0, 0.4)"};
+    }
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* ============================
+       Focus visible (accessibility)
+       ============================ */
+
+    :focus-visible {
+      outline: 2px solid var(--sp-accent);
+      outline-offset: 2px;
+      /* Double-ring against any background colour: the bg-coloured halo
+         separates the accent ring from busy host-page surfaces. */
+      box-shadow: 0 0 0 4px var(--sp-bg);
+    }
+
+    /* ============================
+       FAB (Floating Action Button)
+       ============================ */
+
+    .sp-fab {
+      position: fixed;
+      width: 52px;
+      height: 52px;
+      border-radius: var(--sp-radius-full);
+      background: var(--sp-accent-gradient);
+      color: #fff;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow:
+        0 4px 20px var(--sp-accent-glow),
+        0 2px 8px rgba(0, 0, 0, 0.08);
+      transition:
+        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
+        box-shadow 0.3s ease;
+      outline: none;
+    }
+
+    .sp-fab:focus-visible {
+      outline: 2px solid #fff;
+      outline-offset: 3px;
+    }
+
+    .sp-fab:hover {
+      transform: translateY(-2px) scale(1.05);
+      box-shadow:
+        0 8px 28px var(--sp-accent-glow),
+        0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .sp-fab:active {
+      transform: translateY(0) scale(0.95);
+      transition-duration: 0.1s;
+    }
+
+    .sp-fab--bottom-right {
+      bottom: 24px;
+      right: 24px;
+    }
+
+    .sp-fab--bottom-left {
+      bottom: 24px;
+      left: 24px;
+    }
+
+    .sp-fab svg {
+      width: 22px;
+      height: 22px;
+      fill: currentColor;
+      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    /* ---- FAB Badge ---- */
+
+    .sp-fab-badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      min-width: 20px;
+      height: 20px;
+      padding: 0 6px;
+      border-radius: var(--sp-radius-full);
+      background: #ef4444;
+      color: #fff;
+      font-size: 11px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid #fff;
+      pointer-events: none;
+      font-family: var(--sp-font);
+      line-height: 1;
+    }
+
+    /* ============================
+       Radial Menu
+       ============================ */
+
+    .sp-radial {
+      position: fixed;
+      pointer-events: none;
+      width: 52px;
+      height: 52px;
+    }
+
+    .sp-radial--bottom-right {
+      bottom: 24px;
+      right: 24px;
+    }
+
+    .sp-radial--bottom-left {
+      bottom: 24px;
+      left: 24px;
+    }
+
+    .sp-radial-item {
+      position: absolute;
+      left: 4px;
+      bottom: 4px;
+      width: 44px;
+      height: 44px;
+      border-radius: var(--sp-radius-full);
+      background: var(--sp-glass-bg-heavy);
+      backdrop-filter: blur(var(--sp-blur));
+      -webkit-backdrop-filter: blur(var(--sp-blur));
+      color: var(--sp-text);
+      border: 1px solid var(--sp-glass-border);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: var(--sp-shadow-md);
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .sp-radial-item:hover,
+    .sp-radial-item:focus-visible {
+      background: rgba(255, 255, 255, 0.95);
+      border-color: var(--sp-accent);
+      color: var(--sp-accent);
+      box-shadow:
+        var(--sp-shadow-md),
+        0 0 0 3px var(--sp-accent-light);
+      outline: none;
+    }
+
+    .sp-radial-item svg {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      stroke: currentColor;
+      fill: none;
+    }
+
+    .sp-radial-label {
+      white-space: nowrap;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--sp-text);
+      pointer-events: none;
+      opacity: 0;
+      padding: 4px 12px;
+      border-radius: var(--sp-radius);
+      background: var(--sp-glass-bg-heavy);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid var(--sp-glass-border);
+      box-shadow: var(--sp-shadow-sm);
+      transform: translateX(4px);
+      transition: opacity 0.2s ease, transform 0.2s ease;
+    }
+
+    .sp-radial-item:hover .sp-radial-label,
+    .sp-radial-item:focus-visible .sp-radial-label {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    /* ============================
+       Panel (Side drawer)
+       ============================ */
+
+    .sp-panel {
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 400px;
+      max-width: 100vw;
+      height: 100vh;
+      height: 100dvh;
+      background: var(--sp-glass-bg);
+      backdrop-filter: blur(var(--sp-blur-heavy));
+      -webkit-backdrop-filter: blur(var(--sp-blur-heavy));
+      border-left: 1px solid var(--sp-glass-border);
+      box-shadow: var(--sp-shadow-xl);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    @media (max-width: 480px) {
+      .sp-panel {
+        width: 100vw;
+        border-left: none;
+      }
+    }
+
+    .sp-panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 24px;
+      border-bottom: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      backdrop-filter: blur(var(--sp-blur));
+      -webkit-backdrop-filter: blur(var(--sp-blur));
+      position: relative;
+      z-index: 2;
+    }
+
+    .sp-panel-title {
+      font-size: 17px;
+      font-weight: 700;
+      color: var(--sp-text);
+      letter-spacing: -0.02em;
+    }
+
+    .sp-panel-close {
+      width: 44px;
+      height: 44px;
+      border-radius: var(--sp-radius);
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--sp-text-tertiary);
+      transition: all 0.2s ease;
+    }
+
+    .sp-panel-close:hover {
+      background: var(--sp-bg-hover);
+      color: var(--sp-text);
+    }
+
+    .sp-panel-close svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    /* ============================
+       Filters & Search
+       ============================ */
+
+    .sp-filters {
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      backdrop-filter: blur(var(--sp-blur));
+      -webkit-backdrop-filter: blur(var(--sp-blur));
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    .sp-search-wrap {
+      position: relative;
+      margin-bottom: 12px;
+    }
+
+    .sp-search {
+      width: 100%;
+      height: 40px;
+      padding: 0 12px 0 38px;
+      border-radius: var(--sp-radius);
+      border: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      color: var(--sp-text);
+      font-family: var(--sp-font);
+      font-size: 13px;
+      outline: none;
+      transition: all 0.2s ease;
+    }
+
+    .sp-search::placeholder {
+      color: var(--sp-text-tertiary);
+    }
+
+    .sp-search:focus {
+      border-color: var(--sp-accent);
+      box-shadow: 0 0 0 3px var(--sp-accent-light);
+      background: #fff;
+    }
+
+    .sp-search-icon {
+      position: absolute;
+      left: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--sp-text-tertiary);
+      width: 16px;
+      height: 16px;
+      transition: color 0.2s ease;
+    }
+
+    .sp-search:focus ~ .sp-search-icon,
+    .sp-search-wrap:focus-within .sp-search-icon {
+      color: var(--sp-accent);
+    }
+
+    /* ============================
+       Filter bar (type dropdown + status segmented)
+       ============================ */
+
+    .sp-filter-bar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+      flex-wrap: wrap;
+    }
+
+    /* ============================
+       Type filter dropdown
+       ============================ */
+
+    .sp-filter-dropdown {
+      position: relative;
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    .sp-filter-dropdown-btn {
+      --sp-chip-color: var(--sp-text-secondary);
+      --sp-chip-bg: var(--sp-glass-bg-heavy);
+
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      height: 32px;
+      padding: 0 8px 0 10px;
+      border-radius: var(--sp-radius-full);
+      border: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      color: var(--sp-text);
+      font-family: var(--sp-font);
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+    }
+
+    .sp-filter-dropdown-btn:hover {
+      border-color: var(--sp-chip-color);
+      background: var(--sp-chip-bg);
+    }
+
+    .sp-filter-dropdown-btn[aria-expanded="true"] {
+      border-color: var(--sp-chip-color);
+      background: var(--sp-chip-bg);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-chip-color) 14%, transparent);
+    }
+
+    .sp-filter-dropdown-btn--filtered {
+      border-color: var(--sp-chip-color);
+      background: var(--sp-chip-bg);
+    }
+
+    .sp-filter-dropdown-btn__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      color: var(--sp-chip-color);
+    }
+
+    .sp-filter-dropdown-btn__icon svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .sp-filter-dropdown-btn__label {
+      display: inline-flex;
+      align-items: baseline;
+      gap: 6px;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+    }
+
+    .sp-filter-dropdown-btn__prefix {
+      color: var(--sp-text-tertiary);
+      font-weight: 500;
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+
+    .sp-filter-dropdown-btn__value {
+      color: var(--sp-chip-color);
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .sp-filter-dropdown-btn__chevron {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+      color: var(--sp-text-tertiary);
+      transition: transform 0.18s ease, color 0.18s ease;
+    }
+
+    .sp-filter-dropdown-btn__chevron svg {
+      width: 12px;
+      height: 12px;
+    }
+
+    .sp-filter-dropdown-btn[aria-expanded="true"] .sp-filter-dropdown-btn__chevron {
+      transform: rotate(180deg);
+      color: var(--sp-chip-color);
+    }
+
+    .sp-filter-dropdown-menu {
+      position: absolute;
+      top: calc(100% + 6px);
+      left: 0;
+      right: 0;
+      min-width: 180px;
+      padding: 4px;
+      border-radius: var(--sp-radius);
+      background: var(--sp-glass-bg-heavy);
+      backdrop-filter: blur(var(--sp-blur-heavy));
+      -webkit-backdrop-filter: blur(var(--sp-blur-heavy));
+      border: 1px solid var(--sp-glass-border);
+      box-shadow: var(--sp-shadow-md);
+      z-index: 10;
+      animation: sp-filter-menu-in 0.15s ease-out both;
+    }
+
+    @keyframes sp-filter-menu-in {
+      from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+
+    .sp-filter-dropdown-option {
+      --sp-chip-color: var(--sp-text-secondary);
+      --sp-chip-bg: transparent;
+
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 8px 10px;
+      border: none;
+      border-radius: 8px;
+      background: transparent;
+      color: var(--sp-text);
+      font-family: var(--sp-font);
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      text-align: left;
+      transition: background 0.12s ease, color 0.12s ease;
+    }
+
+    .sp-filter-dropdown-option__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      flex-shrink: 0;
+      border-radius: 6px;
+      background: var(--sp-chip-bg);
+      color: var(--sp-chip-color);
+    }
+
+    .sp-filter-dropdown-option__icon svg {
+      width: 13px;
+      height: 13px;
+    }
+
+    .sp-filter-dropdown-option__label {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .sp-filter-dropdown-option__check {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+      color: var(--sp-chip-color);
+    }
+
+    .sp-filter-dropdown-option__check svg {
+      width: 13px;
+      height: 13px;
+    }
+
+    .sp-filter-dropdown-option:hover {
+      background: var(--sp-bg-hover);
+    }
+
+    .sp-filter-dropdown-option--active {
+      color: var(--sp-chip-color);
+      font-weight: 600;
+    }
+
+    .sp-filter-dropdown-option--active:hover {
+      background: var(--sp-chip-bg);
+    }
+
+    /* ============================
+       Status segmented control
+       ============================ */
+
+    .sp-segmented {
+      display: inline-flex;
+      align-items: stretch;
+      padding: 2px;
+      border-radius: var(--sp-radius-full);
+      border: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      flex-shrink: 0;
+    }
+
+    .sp-segmented__btn {
+      --sp-chip-color: var(--sp-text-tertiary);
+      --sp-chip-bg: transparent;
+
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      height: 26px;
+      padding: 0 10px;
+      border: none;
+      border-radius: var(--sp-radius-full);
+      background: transparent;
+      color: var(--sp-text-secondary);
+      font-family: var(--sp-font);
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+    }
+
+    .sp-segmented__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 13px;
+      height: 13px;
+      flex-shrink: 0;
+      color: var(--sp-chip-color);
+      transition: color 0.18s ease, transform 0.18s ease;
+    }
+
+    .sp-segmented__icon svg {
+      width: 13px;
+      height: 13px;
+    }
+
+    .sp-segmented__btn:hover {
+      color: var(--sp-chip-color);
+    }
+
+    .sp-segmented__btn:hover .sp-segmented__icon {
+      color: var(--sp-chip-color);
+    }
+
+    .sp-segmented__btn--active {
+      background: var(--sp-chip-bg);
+      color: var(--sp-chip-color);
+      font-weight: 600;
+      box-shadow:
+        inset 0 0 0 1px color-mix(in srgb, var(--sp-chip-color) 35%, transparent),
+        0 1px 2px rgba(0, 0, 0, 0.04);
+    }
+
+    .sp-segmented__btn--active .sp-segmented__icon {
+      color: var(--sp-chip-color);
+    }
+
+    .sp-segmented__btn--open.sp-segmented__btn--active .sp-segmented__icon {
+      animation: sp-segmented-pulse 2.4s ease-in-out infinite;
+    }
+
+    @keyframes sp-segmented-pulse {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(0.85); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .sp-filter-dropdown-btn,
+      .sp-filter-dropdown-btn__chevron,
+      .sp-filter-dropdown-option,
+      .sp-segmented__btn,
+      .sp-segmented__icon {
+        transition: none;
+      }
+      .sp-filter-dropdown-menu {
+        animation: none;
+      }
+      .sp-segmented__btn--open.sp-segmented__btn--active .sp-segmented__icon {
+        animation: none;
+      }
+    }
+
+    /* ============================
+       Feedback Cards
+       ============================ */
+
+    .sp-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 12px;
+    }
+
+    .sp-list::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .sp-list::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .sp-list::-webkit-scrollbar-thumb {
+      background: var(--sp-border);
+      border-radius: var(--sp-radius-full);
+    }
+
+    .sp-list::-webkit-scrollbar-thumb:hover {
+      background: var(--sp-text-tertiary);
+    }
+
+    .sp-card {
+      display: flex;
+      padding: 14px 16px;
+      margin-bottom: 6px;
+      cursor: pointer;
+      border-radius: var(--sp-radius);
+      background: var(--sp-glass-bg-heavy);
+      border: 1px solid var(--sp-glass-border);
+      box-shadow: var(--sp-shadow-xs);
+      transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    .sp-card:hover {
+      background: #fff;
+      border-color: var(--sp-border);
+      box-shadow: var(--sp-shadow-md);
+      transform: translateY(-2px);
+    }
+
+    .sp-card:active {
+      transform: translateY(0) scale(0.99);
+      transition-duration: 0.1s;
+    }
+
+    .sp-card-bar {
+      width: 3px;
+      border-radius: var(--sp-radius-full);
+      margin-right: 14px;
+      flex-shrink: 0;
+    }
+
+    .sp-card-body {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .sp-card-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+    }
+
+    .sp-card-number {
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--sp-text-tertiary);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .sp-badge {
+      padding: 2px 10px;
+      border-radius: var(--sp-radius-full);
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+    }
+
+    .sp-card-date {
+      font-size: 11px;
+      color: var(--sp-text-tertiary);
+      margin-left: auto;
+    }
+
+    .sp-card-message {
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--sp-text);
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    .sp-card-message--expanded {
+      -webkit-line-clamp: unset;
+    }
+
+    .sp-card-expand {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--sp-accent);
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 4px 0;
+      font-family: var(--sp-font);
+      transition: opacity 0.15s ease;
+    }
+
+    .sp-card-expand:hover {
+      opacity: 0.8;
+    }
+
+    .sp-card-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 6px;
+      margin-top: 10px;
+    }
+
+    .sp-btn-resolve,
+    .sp-btn-delete {
+      padding: 8px 14px;
+      border-radius: var(--sp-radius-full);
+      border: 1px solid var(--sp-border);
+      background: transparent;
+      color: var(--sp-text-secondary);
+      font-family: var(--sp-font);
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      transition: all 0.2s ease;
+    }
+
+    .sp-btn-resolve svg,
+    .sp-btn-delete svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .sp-btn-resolve:hover {
+      border-color: #22c55e;
+      color: #22c55e;
+      background: rgba(34, 197, 94, 0.06);
+    }
+
+    .sp-btn-delete:hover {
+      border-color: #ef4444;
+      color: #ef4444;
+      background: rgba(239, 68, 68, 0.06);
+    }
+
+    .sp-btn-resolve:disabled,
+    .sp-btn-delete:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .sp-spinner--sm {
+      width: 14px;
+      height: 14px;
+    }
+
+    /* ---- Delete All (header) ---- */
+
+    .sp-panel-header-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .sp-btn-delete-all {
+      padding: 5px 12px;
+      border-radius: var(--sp-radius-full);
+      border: 1px solid var(--sp-border);
+      background: transparent;
+      color: var(--sp-text-tertiary);
+      font-family: var(--sp-font);
+      font-size: 11px;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      transition: all 0.2s ease;
+    }
+
+    .sp-btn-delete-all svg {
+      width: 13px;
+      height: 13px;
+    }
+
+    .sp-btn-delete-all:hover {
+      border-color: #ef4444;
+      color: #ef4444;
+      background: rgba(239, 68, 68, 0.06);
+    }
+
+    .sp-btn-delete-all:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    /* ---- Confirm Dialog ---- */
+
+    .sp-confirm-backdrop {
+      position: fixed;
+      inset: 0;
+      background: var(--sp-backdrop, rgba(15, 23, 42, 0.2));
+      backdrop-filter: blur(var(--sp-blur));
+      -webkit-backdrop-filter: blur(var(--sp-blur));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: ${2147483647};
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .sp-confirm-dialog {
+      width: 340px;
+      padding: 28px;
+      border-radius: 20px;
+      background: var(--sp-glass-bg-heavy);
+      backdrop-filter: blur(var(--sp-blur-heavy));
+      -webkit-backdrop-filter: blur(var(--sp-blur-heavy));
+      border: 1px solid var(--sp-glass-border);
+      box-shadow: var(--sp-shadow-xl);
+      font-family: var(--sp-font);
+      transform: translateY(8px) scale(0.97);
+      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .sp-confirm-title {
+      font-size: 17px;
+      font-weight: 700;
+      color: var(--sp-text);
+      letter-spacing: -0.02em;
+      margin-bottom: 8px;
+    }
+
+    .sp-confirm-message {
+      font-size: 14px;
+      color: var(--sp-text-secondary);
+      line-height: 1.5;
+      margin-bottom: 20px;
+    }
+
+    .sp-confirm-actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+
+    .sp-btn-danger {
+      height: 40px;
+      padding: 0 22px;
+      border-radius: var(--sp-radius);
+      border: none;
+      background: #ef4444;
+      color: #fff;
+      font-family: var(--sp-font);
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
+    }
+
+    .sp-btn-danger:hover {
+      background: #dc2626;
+      box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
+      transform: translateY(-1px);
+    }
+
+    .sp-btn-danger:active {
+      transform: translateY(0) scale(0.98);
+      transition-duration: 0.1s;
+    }
+
+    .sp-card--resolved {
+      opacity: 0.5;
+    }
+
+    .sp-card--resolved .sp-card-message {
+      text-decoration: line-through;
+      text-decoration-color: var(--sp-text-tertiary);
+    }
+
+    /* ============================
+       Loading State
+       ============================ */
+
+    .sp-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 48px 24px;
+    }
+
+    /* ============================
+       Identity Form
+       ============================ */
+
+    .sp-identity-title {
+      font-size: 17px;
+      font-weight: 700;
+      color: var(--sp-text);
+      letter-spacing: -0.02em;
+    }
+
+    .sp-input {
+      width: 100%;
+      height: 42px;
+      padding: 0 14px;
+      border-radius: var(--sp-radius);
+      border: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      color: var(--sp-text);
+      font-family: var(--sp-font);
+      font-size: 14px;
+      outline: none;
+      transition: all 0.2s ease;
+    }
+
+    .sp-input::placeholder {
+      color: var(--sp-text-tertiary);
+    }
+
+    .sp-input:focus {
+      border-color: var(--sp-accent);
+      box-shadow: 0 0 0 3px var(--sp-accent-light);
+      background: #fff;
+    }
+
+    .sp-input-label {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--sp-text-secondary);
+      margin-bottom: 6px;
+      display: block;
+    }
+
+    /* ============================
+       Buttons
+       ============================ */
+
+    .sp-btn-primary {
+      height: 40px;
+      padding: 0 22px;
+      border-radius: var(--sp-radius);
+      border: none;
+      background: var(--sp-accent-gradient);
+      color: #fff;
+      font-family: var(--sp-font);
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 8px var(--sp-accent-glow);
+    }
+
+    .sp-btn-primary:hover {
+      box-shadow: 0 4px 16px var(--sp-accent-glow);
+      transform: translateY(-1px);
+    }
+
+    .sp-btn-primary:active {
+      transform: translateY(0) scale(0.98);
+      transition-duration: 0.1s;
+    }
+
+    .sp-btn-primary:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+      transform: none;
+      box-shadow: none;
+    }
+
+    .sp-btn-ghost {
+      height: 40px;
+      padding: 0 22px;
+      border-radius: var(--sp-radius);
+      border: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      color: var(--sp-text-secondary);
+      font-family: var(--sp-font);
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .sp-btn-ghost:hover {
+      border-color: var(--sp-accent);
+      color: var(--sp-accent);
+      background: var(--sp-accent-light);
+    }
+
+    /* ============================
+       Empty State
+       ============================ */
+
+    .sp-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 56px 24px;
+      color: var(--sp-text-tertiary);
+      text-align: center;
+      gap: 8px;
+      animation: sp-fade-in 0.3s ease-out both;
+    }
+
+    .sp-empty-text {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    /* ============================
+       Load More
+       ============================ */
+
+    .sp-load-more-wrap {
+      display: flex;
+      justify-content: center;
+      padding: 12px 0 4px;
+    }
+
+    .sp-btn-load-more {
+      width: 100%;
+    }
+
+    /* ============================
+       Forced Colors / High Contrast
+       ============================ */
+
+    @media (forced-colors: active) {
+      .sp-fab,
+      .sp-radial-item,
+      .sp-filter-dropdown-btn,
+      .sp-segmented,
+      .sp-segmented__btn,
+      .sp-card,
+      .sp-panel-close,
+      .sp-search,
+      .sp-btn-resolve,
+      .sp-btn-delete,
+      .sp-btn-delete-all,
+      .sp-btn-primary,
+      .sp-btn-ghost,
+      .sp-btn-danger,
+      .sp-card-expand,
+      .sp-input,
+      .sp-confirm-dialog {
+        border: 2px solid ButtonText !important;
+        background: Canvas !important;
+        color: ButtonText !important;
+      }
+
+      .sp-segmented__btn--active {
+        background: Highlight !important;
+        color: HighlightText !important;
+      }
+
+      .sp-filter-dropdown-menu {
+        border: 2px solid ButtonText !important;
+        background: Canvas !important;
+      }
+
+      .sp-filter-dropdown-option--active {
+        background: Highlight !important;
+        color: HighlightText !important;
+      }
+
+      .sp-fab:focus-visible,
+      .sp-radial-item:focus-visible,
+      .sp-filter-dropdown-btn:focus-visible,
+      .sp-segmented__btn:focus-visible,
+      .sp-filter-dropdown-option:focus-visible,
+      .sp-panel-close:focus-visible,
+      .sp-btn-resolve:focus-visible,
+      .sp-btn-delete:focus-visible,
+      .sp-btn-delete-all:focus-visible,
+      .sp-btn-primary:focus-visible,
+      .sp-btn-ghost:focus-visible,
+      .sp-btn-danger:focus-visible,
+      .sp-card-expand:focus-visible,
+      .sp-input:focus-visible,
+      .sp-search:focus-visible {
+        outline: 3px solid Highlight !important;
+      }
+
+      .sp-panel {
+        border: 2px solid ButtonText !important;
+      }
+
+      .sp-fab-badge {
+        border: 2px solid ButtonText !important;
+        background: Canvas !important;
+        color: ButtonText !important;
+      }
+
+      .sp-card-bar {
+        background: ButtonText !important;
+      }
+    }
+
+    ${It}
+    ${O$1}
+    ${N}
+    ${F}
+    ${D}
+    ${S}
+    ${H$1}
+  `}var xn=120,vn=80,ye=class{constructor(e,n="en"){this.colors=e;this.locale=n;this.root=b("div",{style:`
+        position: fixed;
+        z-index: ${2147483647};
+        max-width: 280px;
+        padding: 12px 14px;
+        border-radius: 14px;
+        background: ${this.colors.glassBgHeavy};
+        backdrop-filter: blur(24px);
+        -webkit-backdrop-filter: blur(24px);
+        border: 1px solid ${this.colors.glassBorder};
+        box-shadow: 0 8px 32px ${this.colors.shadow}, 0 2px 8px ${this.colors.shadow};
+        font-family: "Inter", system-ui, -apple-system, sans-serif;
+        pointer-events: auto;
+        opacity: 0;
+        transform: translateY(6px) scale(0.97);
+        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+        visibility: hidden;
+        -webkit-font-smoothing: antialiased;
+      `}),this.root.setAttribute("role","tooltip"),this.root.id=this.tooltipId,this.arrow=b("div",{style:`
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        background: ${this.colors.glassBgHeavy};
+        border: 1px solid ${this.colors.glassBorder};
+        transform: rotate(45deg);
+        pointer-events: none;
+      `}),this.root.appendChild(this.arrow),this.root.addEventListener("mouseenter",()=>this.cancelHide()),this.root.addEventListener("mouseleave",()=>this.scheduleHide()),document.body.appendChild(this.root);}colors;locale;root;arrow;showTimer=null;hideTimer=null;currentFeedbackId=null;tooltipId="sp-tooltip";show(e,n){this.currentFeedbackId!==e.id&&(this.cancelHide(),this.cancelShow(),this.showTimer=setTimeout(()=>{this.currentFeedbackId=e.id,this.render(e),this.position(n);let o=typeof window<"u"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;this.root.style.transition=o?"none":"",this.root.style.visibility="visible",this.root.style.opacity="1",this.root.style.transform="translateY(0) scale(1)";},xn));}scheduleHide(){this.cancelHide(),this.hideTimer=setTimeout(()=>this.hide(),vn);}hide(){this.cancelShow(),this.currentFeedbackId=null,this.root.style.opacity="0",this.root.style.transform="translateY(6px) scale(0.97)",setTimeout(()=>{this.currentFeedbackId||(this.root.style.visibility="hidden");},200);}cancelShow(){this.showTimer&&(clearTimeout(this.showTimer),this.showTimer=null);}cancelHide(){this.hideTimer&&(clearTimeout(this.hideTimer),this.hideTimer=null);}render(e$1){let n=Array.from(this.root.children);for(let d of n)d!==this.arrow&&d.remove();let o=x(e$1.type,this.colors),i=y(e$1.type,this.colors),r=B(this.locale),s=C(e$1.type,r),a=b("div",{style:"display:flex;align-items:center;gap:8px;margin-bottom:8px;"}),l=b("span",{style:`
+        padding:3px 10px;border-radius:9999px;
+        font-size:11px;font-weight:600;
+        color:${o};background:${i};
+        letter-spacing:0.02em;
+      `});c(l,s);let p=b("span",{style:`font-size:11px;color:${this.colors.textSecondary};margin-left:auto;`});c(p,e(e$1.createdAt,this.locale)),a.appendChild(l),a.appendChild(p);let c$1=b("div",{style:`font-size:13px;line-height:1.55;color:${this.colors.text};display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;`});c(c$1,e$1.message),this.root.insertBefore(a,this.arrow),this.root.insertBefore(c$1,this.arrow);}position(e){let n=this.root.getBoundingClientRect(),o=10,i=e.top-n.height-o,r=e.left+e.width/2-n.width/2,s=true;i<8&&(i=e.bottom+o,s=false),r=Math.max(8,Math.min(r,window.innerWidth-n.width-8)),this.root.style.top=`${i}px`,this.root.style.left=`${r}px`;let a=Math.max(16,Math.min(e.left+e.width/2-r-6,n.width-22));s?this.arrow.style.cssText=`
+        position:absolute;
+        width:12px;height:12px;
+        background:${this.colors.glassBgHeavy};
+        border-right:1px solid ${this.colors.glassBorder};
+        border-bottom:1px solid ${this.colors.glassBorder};
+        transform:rotate(45deg);
+        pointer-events:none;
+        bottom:-6px;
+        left:${a}px;
+      `:this.arrow.style.cssText=`
+        position:absolute;
+        width:12px;height:12px;
+        background:${this.colors.glassBgHeavy};
+        border-left:1px solid ${this.colors.glassBorder};
+        border-top:1px solid ${this.colors.glassBorder};
+        transform:rotate(45deg);
+        pointer-events:none;
+        top:-6px;
+        left:${a}px;
+      `;}contains(e){return this.root.contains(e)}destroy(){this.cancelShow(),this.cancelHide(),this.root.remove();}};var Z=null;function kn(t){return t===void 0||t===false?{console:false,network:false,maxConsoleEntries:50,maxNetworkEntries:20}:t===true?{console:true,network:true,maxConsoleEntries:50,maxNetworkEntries:20}:{console:t.console!==false,network:t.network!==false,maxConsoleEntries:typeof t.maxConsoleEntries=="number"?t.maxConsoleEntries:50,maxNetworkEntries:typeof t.maxNetworkEntries=="number"?t.maxNetworkEntries:20}}function xe(){let t=()=>{};return {destroy:t,open:t,close:t,refresh:t,on:()=>t,off:t}}function Dt(t){let e=t.debug?(...u)=>console.debug("[siteping]",...u):()=>{};if(Z)return e("initSiteping() called more than once \u2014 returning existing instance"),Z;if(!t.forceShow)try{if(typeof process<"u")return t.onSkip?.("production"),xe()}catch{}if(window.innerWidth<768){let u="mobile";return t.onSkip?.(u),xe()}if(!t.store&&(!t.endpoint||typeof t.endpoint!="string"))return console.error("[siteping] Missing 'endpoint' or 'store' in config. Provide an endpoint like '/api/siteping' or a SitepingStore instance."),xe();if(!t.projectName||typeof t.projectName!="string")return console.error("[siteping] Missing or invalid 'projectName' in config. Expected a non-empty string."),xe();let n=t.locale??"en";n!=="en"&&A(n).catch(()=>{});let o=B(n),i=t.scopeAnnotationsByUrl??true,r=()=>{try{let u=t.getPageScope?.();if(u)return u}catch(u){e("getPageScope() threw, falling back to pathname:",u);}return {url:window.location.pathname,urlPattern:null}};e("Initializing widget",{projectName:t.projectName,theme:t.theme??"light",locale:n,scopeAnnotationsByUrl:i});let s=kn(t.captureDiagnostics),a=s.console?new pe(s.maxConsoleEntries):null,l=s.network?new de(s.maxNetworkEntries):null,p=w$1(t.accentColor,t.theme),c=new J,d=new J,h=t.store?new be(t.store,t.projectName):new ce(t.endpoint,t.projectName);t.onOpen&&c.on("open",t.onOpen),t.onClose&&c.on("close",t.onClose),t.onFeedbackSent&&c.on("feedback:sent",t.onFeedbackSent),t.onError&&c.on("feedback:error",t.onError),t.onAnnotationStart&&c.on("annotation:start",t.onAnnotationStart),t.onAnnotationEnd&&c.on("annotation:end",t.onAnnotationEnd),c.on("feedback:sent",u=>d.emit("feedback:sent",u)),c.on("feedback:deleted",u=>d.emit("feedback:deleted",u)),c.on("open",()=>d.emit("panel:open")),c.on("close",()=>d.emit("panel:close")),c.on("open",()=>e("Panel opened")),c.on("close",()=>e("Panel closed")),c.on("feedback:sent",u=>e("Feedback sent",u.id)),c.on("feedback:error",u=>e("Feedback failed",u.message)),c.on("annotation:start",()=>e("Annotation started")),c.on("annotation:end",()=>e("Annotation ended"));let f=document.createElement("siteping-widget");f.style.cssText=`position:fixed;z-index:${2147483647};`;let v=false;try{typeof process<"u"&&process.env?.["NODE_ENV"]==="test"&&(v=!0);}catch{}let D=v?"open":"closed",S=f.attachShadow({mode:D});if("adoptedStyleSheets"in ShadowRoot.prototype){let u=new CSSStyleSheet;u.replaceSync($e(p)),S.adoptedStyleSheets=[u];}else {let u=document.createElement("style");u.textContent=$e(p),S.appendChild(u);}document.body.appendChild(f);let k=document.createElement("div");k.setAttribute("role","status"),k.setAttribute("aria-live","polite"),k.setAttribute("aria-atomic","true"),k.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",document.body.appendChild(k);let j=new ye(p,n),x=new ge(p,j,c,o,k),E=new ue(S,t,c,o),g=null,R=null,C=false;async function F(){return C?null:g||(R||(R=import('./panel-HDPPIATU.js').then(u=>C?null:(g=new u.Panel(S,p,c,h,t.projectName,x,o,n,{getScope:r,scopeAnnotationsByUrl:i}),g))),R)}if(typeof window<"u"){let u=()=>{C||F();},b=window.requestIdleCallback;typeof b=="function"?b(u):setTimeout(u,200);}let L=false,Nt=c.on("panel:toggle",u=>{g||(u?(L=true,F().then(b=>{b&&L&&b.open(),L=false;}).catch(b=>e("Failed to lazy-load panel:",b))):L=false);}),_t=new le(p,c,o,t.enableScreenshot??false),ve=false,$t=c.on("annotation:complete",async u=>{if(!ve){ve=true;try{let{annotation:b,type:N,message:we,screenshotDataUrl:ke}=u,_=Tt();if(!_){if(_=await En(S,o),!_)return;Ct(_);}let Ot=(()=>{try{return crypto.randomUUID()}catch{return `${Date.now()}-${Math.random().toString(36).slice(2)}`}})(),Ee=r(),Be=null;(a||l)&&(Be={console:a?.getEntries()??[],network:l?.getEntries()??[]});let Bt={projectName:t.projectName,type:N,message:we,url:Ee.url,urlPattern:Ee.urlPattern,viewport:`${window.innerWidth}x${window.innerHeight}`,userAgent:navigator.userAgent,authorName:_.name,authorEmail:_.email,annotations:[b],clientId:Ot,screenshotDataUrl:ke??null,diagnostics:Be};try{let M=await h.sendFeedback(Bt);c.emit("feedback:sent",M),(!i||M.url===Ee.url)&&x.addFeedback(M,x.count+1),k.textContent=o("feedback.sent.confirmation"),g&&await g.refresh();}catch(M){c.emit("feedback:error",M instanceof Error?M:new Error(String(M))),k.textContent=o("feedback.error.message");}}finally{ve=false;}}}),Oe=r(),Ht=i?{limit:20,url:Oe.url}:{limit:20};return h.getFeedbacks(t.projectName,Ht).then(({feedbacks:u})=>{let b=i?u.filter(N=>N.url===Oe.url):u;x.render(b);}).catch(u=>{e("Failed to load initial markers:",u);}),t.endpoint&&wt(t.endpoint).then(()=>e("Retry queue flushed")).catch(()=>{}),Z={destroy:()=>{e("Destroying widget"),C=true,L=false,$t(),Nt(),E.destroy(),g?.destroy(),_t.destroy(),x.destroy(),j.destroy(),a?.dispose(),l?.dispose(),c.removeAll(),d.removeAll(),k.remove(),f.remove(),Z=null;},open:()=>{c.emit("panel:toggle",true);},close:()=>{g?g.close():L=false;},refresh:()=>{if(g?.isCurrentlyOpen){g.refresh();return}let u=r(),b=i?{limit:20,url:u.url}:{limit:20};h.getFeedbacks(t.projectName,b).then(({feedbacks:N})=>{let we=i?N.filter(ke=>ke.url===u.url):N;x.render(we);}).catch(()=>{});},on:(u,b)=>d.on(u,b),off:(u,b)=>{d.off(u,b);}},Z}function En(t,e){return new Promise(n=>{let o=t.activeElement??document.activeElement,i=document.createElement("div");i.style.cssText=`
+      position:fixed;inset:0;
+      background:var(--sp-identity-overlay);
+      backdrop-filter:blur(8px);
+      -webkit-backdrop-filter:blur(8px);
+      display:flex;align-items:center;justify-content:center;
+      z-index:${2147483647};
+      opacity:0;transition:opacity 0.25s ease;
+    `;let r=document.createElement("div");r.style.cssText=`
+      width:340px;padding:28px;border-radius:var(--sp-radius-xl);
+      background:var(--sp-identity-bg);
+      backdrop-filter:blur(var(--sp-blur-heavy));
+      -webkit-backdrop-filter:blur(var(--sp-blur-heavy));
+      border:1px solid var(--sp-glass-border);
+      box-shadow:0 16px 48px var(--sp-shadow), 0 8px 16px var(--sp-shadow);
+      font-family:var(--sp-font, "Inter",system-ui,-apple-system,sans-serif);
+      color:var(--sp-text);
+      transform:translateY(12px) scale(0.97);
+      transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+      -webkit-font-smoothing:antialiased;
+    `;let s=`sp-identity-title-${Date.now()}`;r.setAttribute("role","dialog"),r.setAttribute("aria-modal","true"),r.setAttribute("aria-labelledby",s);let a=document.createElement("div");a.className="sp-identity-title",a.id=s,a.textContent=e("identity.title"),a.style.marginBottom="20px";let l=`sp-identity-name-${Date.now()}`,p=`sp-identity-email-${Date.now()}`,c=document.createElement("label");c.className="sp-input-label",c.textContent=e("identity.nameLabel"),c.setAttribute("for",l);let d=document.createElement("input");d.className="sp-input",d.id=l,d.type="text",d.placeholder=e("identity.namePlaceholder"),d.style.marginBottom="14px";let h=document.createElement("label");h.className="sp-input-label",h.textContent=e("identity.emailLabel"),h.setAttribute("for",p);let f=document.createElement("input");f.className="sp-input",f.id=p,f.type="email",f.placeholder=e("identity.emailPlaceholder");let v=document.createElement("div");v.style.cssText="display:flex;gap:8px;justify-content:flex-end;margin-top:20px;";let D=x=>{i.removeEventListener("keydown",j),i.style.opacity="0",r.style.transform="translateY(12px) scale(0.97)",setTimeout(()=>{i.remove(),o?.focus(),n(x);},250);},S=document.createElement("button");S.className="sp-btn-ghost",S.textContent=e("identity.cancel"),S.addEventListener("click",()=>D(null));let B=document.createElement("button");B.className="sp-btn-primary",B.textContent=e("identity.submit"),B.addEventListener("click",()=>{let x=d.value.trim(),E=f.value.trim();if(!x||!E)return;if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(E)){f.style.borderColor="var(--sp-type-bug, #ef4444)";return}D({name:x,email:E});});let k='input, button, [tabindex]:not([tabindex="-1"])',j=x=>{let E=x;if(E.key==="Escape"){D(null);return}if(E.key==="Tab"){let g=Array.from(r.querySelectorAll(k));if(g.length===0)return;let R=g[0],C=g[g.length-1];if(!R||!C)return;let F=t.activeElement;E.shiftKey?(F===R||!r.contains(F))&&(E.preventDefault(),C.focus()):(F===C||!r.contains(F))&&(E.preventDefault(),R.focus());}};i.addEventListener("keydown",j),i.addEventListener("click",x=>{x.target===i&&D(null);}),v.appendChild(S),v.appendChild(B),r.appendChild(a),r.appendChild(c),r.appendChild(d),r.appendChild(h),r.appendChild(f),r.appendChild(v),i.appendChild(r),t.appendChild(i),requestAnimationFrame(()=>{i.style.opacity="1",r.style.transform="translateY(0) scale(1)",d.focus();});})}function Lt(t){return Dt(t)}function ii(t){let e=useRef(t);e.current=t;let[n,o]=useState(null);return useEffect(()=>{let i=true,r=Lt(e.current);if(!i){r.destroy();return}let s=r.on("feedback:sent",p=>{e.current.onFeedbackSent?.(p);}),a=r.on("panel:open",()=>{e.current.onOpen?.();}),l=r.on("panel:close",()=>{e.current.onClose?.();});return o(r),()=>{i=false,s(),a(),l(),r.destroy(),o(null);}},[]),n}export{ii as useSiteping};//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map