@siteping/widget 0.9.2 → 0.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +116 -7
- package/dist/index.d.ts +8 -3
- package/dist/index.global.js +1284 -0
- package/dist/index.global.js.map +1 -0
- package/dist/index.js +173 -112
- package/dist/index.js.map +1 -0
- package/dist/schema.d.ts +198 -0
- package/dist/siteping-core.d.ts +4 -0
- package/dist/types.d.ts +307 -0
- package/package.json +13 -5
|
@@ -0,0 +1,1284 @@
|
|
|
1
|
+
"use strict";var SitePing=(()=>{var le=Object.defineProperty;var ht=Object.getOwnPropertyDescriptor;var ft=Object.getOwnPropertyNames;var mt=Object.prototype.hasOwnProperty;var gt=(t,e)=>{for(var n in e)le(t,n,{get:e[n],enumerable:!0})},bt=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of ft(e))!mt.call(t,s)&&s!==n&&le(t,s,{get:()=>e[s],enumerable:!(i=ht(e,s))||i.enumerable});return t};var yt=t=>bt(le({},"__esModule",{value:!0}),t);var Jt={};gt(Jt,{initSiteping:()=>Qt});var M,de,Le;function Me(t,e){if(Le=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:s=>!0,className:s=>!0,tagName:s=>!0,attr:(s,o)=>!1,seedMinLength:1,optimizedMinLength:2,threshold:1e3,maxNumberOfTries:1e4,timeoutMs:void 0};M={...n,...e},de=vt(M.root,n);let i=K(t,"all",()=>K(t,"two",()=>K(t,"one",()=>K(t,"none"))));if(i){let s=Pe(Be(i,t));return s.length>0&&(i=s[0]),q(i)}else throw new Error("Selector was not found.")}function vt(t,e){return t.nodeType===Node.DOCUMENT_NODE?t:t===e.root?t.ownerDocument:t}function K(t,e,n){let i=null,s=[],o=t,r=0;for(;o;){let a=new Date().getTime()-Le.getTime();if(M.timeoutMs!==void 0&&a>M.timeoutMs)throw new Error(`Timeout: Can't find a unique selector after ${a}ms`);let l=W(xt(o))||W(...kt(o))||W(...wt(o))||W(Et(o))||[Fe()],c=Ct(o);if(e=="all")c&&(l=l.concat(l.filter(ce).map(d=>Y(d,c))));else if(e=="two")l=l.slice(0,1),c&&(l=l.concat(l.filter(ce).map(d=>Y(d,c))));else if(e=="one"){let[d]=l=l.slice(0,1);c&&ce(d)&&(l=[Y(d,c)])}else e=="none"&&(l=[Fe()],c&&(l=[Y(l[0],c)]));for(let d of l)d.level=r;if(s.push(l),s.length>=M.seedMinLength&&(i=Se(s,n),i))break;o=o.parentElement,r++}return i||(i=Se(s,n)),!i&&n?n():i}function Se(t,e){let n=Pe(Re(t));if(n.length>M.threshold)return e?e():null;for(let i of n)if(Ie(i))return i;return null}function q(t){let e=t[0],n=e.name;for(let i=1;i<t.length;i++){let s=t[i].level||0;e.level===s-1?n=`${t[i].name} > ${n}`:n=`${t[i].name} ${n}`,e=t[i]}return n}function Ae(t){return t.map(e=>e.penalty).reduce((e,n)=>e+n,0)}function Ie(t){let e=q(t);switch(de.querySelectorAll(e).length){case 0:throw new Error(`Can't select any node with this selector: ${e}`);case 1:return!0;default:return!1}}function xt(t){let e=t.getAttribute("id");return e&&M.idName(e)?{name:"#"+CSS.escape(e),penalty:0}:null}function kt(t){return Array.from(t.attributes).filter(n=>M.attr(n.name,n.value)).map(n=>({name:`[${CSS.escape(n.name)}="${CSS.escape(n.value)}"]`,penalty:.5}))}function wt(t){return Array.from(t.classList).filter(M.className).map(n=>({name:"."+CSS.escape(n),penalty:1}))}function Et(t){let e=t.tagName.toLowerCase();return M.tagName(e)?{name:e,penalty:2}:null}function Fe(){return{name:"*",penalty:3}}function Ct(t){let e=t.parentNode;if(!e)return null;let n=e.firstChild;if(!n)return null;let i=0;for(;n&&(n.nodeType===Node.ELEMENT_NODE&&i++,n!==t);)n=n.nextSibling;return i}function Y(t,e){return{name:t.name+`:nth-child(${e})`,penalty:t.penalty+1}}function ce(t){return t.name!=="html"&&!t.name.startsWith("#")}function W(...t){let e=t.filter(Tt);return e.length>0?e:null}function Tt(t){return t!=null}function*Re(t,e=[]){if(t.length>0)for(let n of t[0])yield*Re(t.slice(1,t.length),e.concat(n));else yield e}function Pe(t){return[...t].sort((e,n)=>Ae(e)-Ae(n))}function*Be(t,e,n={counter:0,visited:new Map}){if(t.length>2&&t.length>M.optimizedMinLength)for(let i=1;i<t.length-1;i++){if(n.counter>M.maxNumberOfTries)return;n.counter+=1;let s=[...t];s.splice(i,1);let o=q(s);if(n.visited.has(o))return;Ie(s)&&St(s,e)&&(yield s,n.visited.set(o,!0),yield*Be(s,e,n))}}function St(t,e){return de.querySelector(q(t))===e}var At=["role","aria-label","type","name","href","src","data-testid","data-id"];function Ft(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 pe(t){let e=t.children.length,n=0,i=t.parentElement;if(i)for(let r of i.children){if(r===t)break;r.tagName===t.tagName&&n++}let s=[];for(let r of At){let a=t.getAttribute(r);a&&s.push(`${r}=${a}`)}let o=s.length>0?Ft(s.join(",")):"0";return`${e}:${n}:${o}`}function Ne(t,e){let n=e.split(":");if(n.length!==3)return 0;let[i,s,o]=n,r=Number(i),a=Number(s);if(Number.isNaN(r)||Number.isNaN(a))return 0;let l=pe(t),[c,d,p]=l.split(":"),f=0,m=Math.abs(Number(c)-r);m===0?f+=.2:m<=2?f+=.1:m<=5&&(f+=.03);let y=Math.abs(Number(d)-a);return y===0?f+=.4:y===1?f+=.2:y<=3&&(f+=.08),p===o&&(f+=.4),f}function N(t,e){let n=e==="before"?"previousElementSibling":"nextElementSibling",i=t[n],s=3;for(;i&&s>0;){let o=i.textContent?.trim();if(o)return e==="before"?o.slice(-32):o.slice(0,32);i=i[n],s--}return""}function U(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 $e(t){if(t.id){let i=t.id.includes("'")?`concat('${t.id.replace(/'/g,`',"'",'`)}')`:`'${t.id}'`;return`//${t.localName}[@id=${i}]`}let e=[],n=t;for(;n&&n!==document.body&&e.length<6;){let i=n.localName,s=n.parentElement;if(n.id){let r=n.id.includes("'")?`concat('${n.id.replace(/'/g,`',"'",'`)}')`:`'${n.id}'`;return e.unshift(`/${i}[@id=${r}]`),"/"+e.join("")}let o=1;if(s)for(let r of s.children){if(r===n)break;r.localName===i&&o++}e.unshift(`/${i}[${o}]`),n=s}return"/html/body"+e.join("")}function ue(t){let e=Me(t,{className:c=>!/^(css|sc|emotion|styled)-/.test(c)&&!/^[a-z]{1,3}[A-Za-z0-9]{4,8}$/.test(c),attr:c=>["data-testid","data-id","role","aria-label"].includes(c),idName:c=>!c.startsWith("radix-")&&!/^:r[0-9]+:$/.test(c),seedMinLength:3,optimizedMinLength:2}),n=$e(t),s=(t.textContent?.trim()??"").slice(0,120),o=N(t,"before"),r=N(t,"after"),a=pe(t),l=U(t);return{cssSelector:e,xpath:n,textSnippet:s,textPrefix:o,textSuffix:r,fingerprint:a,neighborText:l,elementTag:t.tagName,elementId:t.id||void 0}}function De(t,e=document.documentElement){let n=t.x+t.width/2,i=t.y+t.height/2,s=document.elementFromPoint(n,i);if(!s||s===e)return document.body;let o=s,r=s;for(;r&&r!==document.body;){let a=r.getBoundingClientRect();if(a.left<=t.x&&a.top<=t.y&&a.right>=t.x+t.width&&a.bottom>=t.y+t.height){o=r;break}r=r.parentElement}return o}function He(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}}function F(t){let i=document.createRange().createContextualFragment(t).firstElementChild;if(!i||i.nodeName.toLowerCase()!=="svg")throw new Error("[siteping] Invalid SVG string");for(let s of[...i.attributes])s.name.startsWith("on")&&i.removeAttribute(s.name);for(let s of i.querySelectorAll("*"))for(let o of[...s.attributes])o.name.startsWith("on")&&s.removeAttribute(o.name);return i}function h(t,e){let n=document.createElement(t);if(e)for(let[i,s]of Object.entries(e))i==="class"?n.className=s:i==="style"?n.style.cssText=s:n.setAttribute(i,s);return n}function b(t,e){t.textContent=e}function X(t,e="fr"){let n=Date.now()-new Date(t).getTime(),i=Math.floor(n/1e3);if(i<60)return new Intl.RelativeTimeFormat(e,{numeric:"auto"}).format(0,"second");let s=new Intl.RelativeTimeFormat(e,{numeric:"always",style:"narrow"}),o=Math.floor(i/60);if(o<60)return s.format(-o,"minute");let r=Math.floor(o/60);if(r<24)return s.format(-r,"hour");let a=Math.floor(r/24);return a<7?s.format(-a,"day"):new Date(t).toLocaleDateString(e)}var he='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><circle cx="12" cy="10" r="1" fill="currentColor" stroke="none"/><circle cx="8" cy="10" r="1" fill="currentColor" stroke="none"/><circle cx="16" cy="10" r="1" fill="currentColor" stroke="none"/></svg>',Oe='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',je='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 3v18"/></svg>',fe='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',me='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>',G='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',ze='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',_e='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',Ke='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',Ye='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',We='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="6" width="8" height="14" rx="4"/><path d="M19 9h2"/><path d="M3 9h2"/><path d="M19 13h2"/><path d="M3 13h2"/><path d="M19 17h2"/><path d="M3 17h2"/><path d="M10 2h4"/></svg>',qe='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>',Ue='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>',ge='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>';var Ge="#0066ff",Lt=/^#[0-9a-fA-F]{6}$/,Xe=/^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/,Mt=/^#[0-9a-fA-F]{8}$/;function It(t){if(Lt.test(t))return t;let e=Xe.test(t)?t.match(Xe):null;return e?`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`:Mt.test(t)?t.slice(0,7):(console.warn(`[siteping] Invalid accentColor "${t}" \u2014 only hex colors (#RGB, #RRGGBB, #RRGGBBAA) are supported. Using default.`),Ge)}function Rt(t,e){let n=Math.max(0,Math.round(parseInt(t.slice(1,3),16)*(1-e))),i=Math.max(0,Math.round(parseInt(t.slice(3,5),16)*(1-e))),s=Math.max(0,Math.round(parseInt(t.slice(5,7),16)*(1-e)));return`#${n.toString(16).padStart(2,"0")}${i.toString(16).padStart(2,"0")}${s.toString(16).padStart(2,"0")}`}function Pt(){return typeof window>"u"?!1:window.matchMedia("(prefers-color-scheme: dark)").matches}function Bt(t){return t==="dark"||t==="auto"&&Pt()?"dark":"light"}function Ve(t=Ge,e){let n=It(t),i=Rt(n,.15);return Bt(e)==="dark"?{accent:n,accentLight:n+"22",accentDark:i,accentGlow:n+"44",accentGradient:`linear-gradient(135deg, ${n}, ${i})`,bg:"#0f172a",bgHover:"#1e293b",text:"#f1f5f9",textSecondary:"#94a3b8",textTertiary:"#64748b",border:"#334155",shadow:"rgba(0, 0, 0, 0.3)",glassBg:"rgba(15, 23, 42, 0.78)",glassBgHeavy:"rgba(15, 23, 42, 0.88)",glassBorder:"rgba(51, 65, 85, 0.5)",glassBorderSubtle:"rgba(51, 65, 85, 0.3)",typeQuestion:"#60a5fa",typeChange:"#fbbf24",typeBug:"#f87171",typeOther:"#94a3b8",typeQuestionBg:"rgba(59, 130, 246, 0.15)",typeChangeBg:"rgba(245, 158, 11, 0.15)",typeBugBg:"rgba(239, 68, 68, 0.15)",typeOtherBg:"rgba(100, 116, 139, 0.15)"}:{accent:n,accentLight:n+"14",accentDark:i,accentGlow:n+"33",accentGradient:`linear-gradient(135deg, ${n}, ${i})`,bg:"#ffffff",bgHover:"#f8f9fb",text:"#0f172a",textSecondary:"#475569",textTertiary:"#64748b",border:"#e2e8f0",shadow:"rgba(0, 0, 0, 0.06)",glassBg:"rgba(255, 255, 255, 0.72)",glassBgHeavy:"rgba(255, 255, 255, 0.85)",glassBorder:"rgba(255, 255, 255, 0.35)",glassBorderSubtle:"rgba(255, 255, 255, 0.18)",typeQuestion:"#3b82f6",typeChange:"#b45309",typeBug:"#ef4444",typeOther:"#64748b",typeQuestionBg:"#eff6ff",typeChangeBg:"#fffbeb",typeBugBg:"#fef2f2",typeOtherBg:"#f8fafc"}}function I(t,e){switch(t){case"question":return e.typeQuestion;case"change":return e.typeChange;case"bug":return e.typeBug;default:return e.typeOther}}function P(t,e){switch(t){case"question":return e.typeQuestionBg;case"change":return e.typeChangeBg;case"bug":return e.typeBugBg;default:return e.typeOtherBg}}function Qe(t){return`
|
|
2
|
+
--sp-accent: ${t.accent};
|
|
3
|
+
--sp-accent-light: ${t.accentLight};
|
|
4
|
+
--sp-accent-dark: ${t.accentDark};
|
|
5
|
+
--sp-accent-glow: ${t.accentGlow};
|
|
6
|
+
--sp-accent-gradient: ${t.accentGradient};
|
|
7
|
+
--sp-bg: ${t.bg};
|
|
8
|
+
--sp-bg-hover: ${t.bgHover};
|
|
9
|
+
--sp-text: ${t.text};
|
|
10
|
+
--sp-text-secondary: ${t.textSecondary};
|
|
11
|
+
--sp-text-tertiary: ${t.textTertiary};
|
|
12
|
+
--sp-border: ${t.border};
|
|
13
|
+
--sp-shadow: ${t.shadow};
|
|
14
|
+
--sp-glass-bg: ${t.glassBg};
|
|
15
|
+
--sp-glass-bg-heavy: ${t.glassBgHeavy};
|
|
16
|
+
--sp-glass-border: ${t.glassBorder};
|
|
17
|
+
--sp-glass-border-subtle: ${t.glassBorderSubtle};
|
|
18
|
+
--sp-type-question: ${t.typeQuestion};
|
|
19
|
+
--sp-type-change: ${t.typeChange};
|
|
20
|
+
--sp-type-bug: ${t.typeBug};
|
|
21
|
+
--sp-type-other: ${t.typeOther};
|
|
22
|
+
--sp-type-question-bg: ${t.typeQuestionBg};
|
|
23
|
+
--sp-type-change-bg: ${t.typeChangeBg};
|
|
24
|
+
--sp-type-bug-bg: ${t.typeBugBg};
|
|
25
|
+
--sp-type-other-bg: ${t.typeOtherBg};
|
|
26
|
+
--sp-radius: 12px;
|
|
27
|
+
--sp-radius-lg: 16px;
|
|
28
|
+
--sp-radius-xl: 20px;
|
|
29
|
+
--sp-radius-full: 9999px;
|
|
30
|
+
--sp-blur: 20px;
|
|
31
|
+
--sp-blur-heavy: 32px;
|
|
32
|
+
--sp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
33
|
+
--sp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
34
|
+
--sp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
35
|
+
--sp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04);
|
|
36
|
+
--sp-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
|
|
37
|
+
--sp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
38
|
+
`}var V=class{constructor(e,n){this.colors=e;this.t=n;this.root=h("div",{style:`
|
|
39
|
+
position:fixed;
|
|
40
|
+
z-index:2147483647;
|
|
41
|
+
width:300px;
|
|
42
|
+
padding:16px;
|
|
43
|
+
border-radius:16px;
|
|
44
|
+
background:${this.colors.glassBg};
|
|
45
|
+
backdrop-filter:blur(24px);
|
|
46
|
+
-webkit-backdrop-filter:blur(24px);
|
|
47
|
+
border:1px solid ${this.colors.glassBorder};
|
|
48
|
+
box-shadow:0 8px 32px ${this.colors.shadow}, 0 2px 8px ${this.colors.shadow};
|
|
49
|
+
font-family:"Inter",system-ui,-apple-system,sans-serif;
|
|
50
|
+
opacity:0;
|
|
51
|
+
transform:translateY(8px) scale(0.98);
|
|
52
|
+
transition:opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
53
|
+
display:none;
|
|
54
|
+
-webkit-font-smoothing:antialiased;
|
|
55
|
+
`}),this.root.setAttribute("role","dialog"),this.root.setAttribute("aria-modal","true"),this.root.setAttribute("aria-label",this.t("popup.ariaLabel"));let i=[{type:"question",label:this.t("type.question"),icon:Ke},{type:"change",label:this.t("type.change"),icon:Ye},{type:"bug",label:this.t("type.bug"),icon:We},{type:"other",label:this.t("type.other"),icon:qe}],s=h("div",{style:"display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;"});for(let d of i){let p=document.createElement("button");p.style.cssText=`
|
|
56
|
+
height:44px;
|
|
57
|
+
border-radius:9999px;border:1px solid ${this.colors.border};
|
|
58
|
+
background:${this.colors.glassBg};cursor:pointer;
|
|
59
|
+
display:flex;align-items:center;justify-content:center;gap:5px;
|
|
60
|
+
font-family:"Inter",system-ui,-apple-system,sans-serif;
|
|
61
|
+
font-size:13px;font-weight:500;color:${this.colors.textTertiary};
|
|
62
|
+
transition:all 0.2s ease;
|
|
63
|
+
padding:0 12px;
|
|
64
|
+
`;let f=F(d.icon);f.setAttribute("style","width:13px;height:13px;flex-shrink:0;"),p.appendChild(f);let m=document.createElement("span");b(m,d.label),p.appendChild(m),p.dataset.type=d.type,p.setAttribute("aria-pressed","false"),p.addEventListener("click",()=>{this.selectType(d.type,s)}),p.addEventListener("mouseenter",()=>{if(p.dataset.type!==this.selectedType){let y=P(p.dataset.type??"",this.colors);p.style.background=y,p.style.borderColor=I(p.dataset.type??"",this.colors)+"40"}}),p.addEventListener("mouseleave",()=>{p.dataset.type!==this.selectedType&&(p.style.background=this.colors.glassBg,p.style.borderColor=this.colors.border)}),s.appendChild(p)}this.textarea=document.createElement("textarea"),this.textarea.style.cssText=`
|
|
65
|
+
width:100%;min-height:72px;max-height:152px;
|
|
66
|
+
padding:10px 12px;border-radius:12px;
|
|
67
|
+
border:1px solid ${this.colors.border};
|
|
68
|
+
background:${this.colors.glassBgHeavy};
|
|
69
|
+
color:${this.colors.text};font-family:"Inter",system-ui,-apple-system,sans-serif;
|
|
70
|
+
font-size:13px;line-height:1.5;resize:vertical;
|
|
71
|
+
outline:none;transition:all 0.2s ease;
|
|
72
|
+
box-sizing:border-box;
|
|
73
|
+
`,this.textarea.placeholder=this.t("popup.placeholder"),this.textarea.maxLength=5e3,this.textarea.setAttribute("aria-label",this.t("popup.textareaAria"));let o=h("div",{style:`
|
|
74
|
+
font-size:11px;color:${this.colors.textTertiary};
|
|
75
|
+
text-align:right;margin-top:4px;
|
|
76
|
+
font-family:"Inter",system-ui,-apple-system,sans-serif;
|
|
77
|
+
letter-spacing:0.01em;
|
|
78
|
+
`}),r=navigator.userAgentData,a=r?r.platform==="macOS":navigator.platform?.includes("Mac")??/Macintosh|Mac OS X/i.test(navigator.userAgent);b(o,a?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",d=>{d.key==="Enter"&&(d.ctrlKey||d.metaKey)&&(d.preventDefault(),this.submit()),d.key==="Escape"&&this.cancel()});let l=h("div",{style:"display:flex;justify-content:flex-end;gap:8px;margin-top:12px;"}),c=document.createElement("button");c.style.cssText=`
|
|
79
|
+
height:34px;padding:0 16px;border-radius:9999px;
|
|
80
|
+
border:1px solid ${this.colors.border};
|
|
81
|
+
background:${this.colors.glassBg};
|
|
82
|
+
color:${this.colors.textTertiary};font-family:"Inter",system-ui,-apple-system,sans-serif;
|
|
83
|
+
font-size:13px;font-weight:500;cursor:pointer;
|
|
84
|
+
transition:all 0.2s ease;
|
|
85
|
+
`,b(c,this.t("popup.cancel")),c.addEventListener("click",()=>this.cancel()),c.addEventListener("mouseenter",()=>{c.style.borderColor=this.colors.accent,c.style.color=this.colors.accent}),c.addEventListener("mouseleave",()=>{c.style.borderColor=this.colors.border,c.style.color=this.colors.textTertiary}),this.submitBtn=document.createElement("button"),this.submitBtn.style.cssText=`
|
|
86
|
+
height:34px;padding:0 18px;border-radius:9999px;
|
|
87
|
+
border:none;background:${this.colors.accentGradient};
|
|
88
|
+
color:#fff;font-family:"Inter",system-ui,-apple-system,sans-serif;
|
|
89
|
+
font-size:13px;font-weight:600;cursor:pointer;
|
|
90
|
+
opacity:0.35;pointer-events:none;
|
|
91
|
+
transition:all 0.2s ease;
|
|
92
|
+
box-shadow:0 2px 8px ${this.colors.accentGlow};
|
|
93
|
+
`,b(this.submitBtn,this.t("popup.submit")),this.submitBtn.addEventListener("click",()=>this.submit()),l.appendChild(c),l.appendChild(this.submitBtn),this.root.appendChild(s),this.root.appendChild(this.textarea),this.root.appendChild(o),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 i=e.bottom+8,s=e.left;i+220>window.innerHeight&&(i=e.top-220-8),s+300>window.innerWidth&&(s=e.right-300),s=Math.max(8,s),i=Math.max(8,i),this.root.style.top=`${i}px`,this.root.style.left=`${s}px`,this.root.style.display="block",this.onKeydownTrap=r=>{if(r.key==="Tab"){let a=Array.from(this.root.querySelectorAll('button:not([disabled]), textarea, input, [tabindex]:not([tabindex="-1"])'));if(a.length===0)return;let l=a[0],c=a[a.length-1];if(!l||!c)return;r.shiftKey?(document.activeElement===l||!this.root.contains(document.activeElement))&&(r.preventDefault(),c.focus()):(document.activeElement===c||!this.root.contains(document.activeElement))&&(r.preventDefault(),l.focus())}},this.root.addEventListener("keydown",this.onKeydownTrap);let o=typeof window<"u"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;this.root.style.transition=o?"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 i=n.querySelectorAll("button");for(let s of i){let o=s.dataset.type===e,r=I(s.dataset.type??"",this.colors),a=P(s.dataset.type??"",this.colors);s.style.background=o?a:this.colors.glassBg,s.style.borderColor=o?r+"60":this.colors.border,s.style.color=o?r:this.colors.textTertiary,s.style.fontWeight=o?"600":"500",s.setAttribute("aria-pressed",String(o))}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 Q=class{constructor(e,n,i){this.colors=e;this.bus=n;this.t=i;this.popup=new V(e,i),this.bus.on("annotation:start",()=>this.activate())}colors;bus;t;overlay=null;toolbar=null;drawingRect=null;startX=0;startY=0;isDrawing=!1;isActive=!1;popup;savedOverflow="";preActiveFocusElement=null;rafId=null;pendingMoveEvent=null;activate(){if(this.isActive)return;this.isActive=!0,this.preActiveFocusElement=document.activeElement,this.savedOverflow=document.body.style.overflow,document.body.style.overflow="hidden",this.overlay=h("div",{style:`
|
|
94
|
+
position:fixed;inset:0;
|
|
95
|
+
z-index:2147483646;
|
|
96
|
+
background:rgba(15, 23, 42, 0.04);
|
|
97
|
+
cursor:crosshair;
|
|
98
|
+
`}),this.overlay.setAttribute("aria-hidden","true"),this.toolbar=h("div",{style:`
|
|
99
|
+
position:fixed;top:0;left:0;right:0;
|
|
100
|
+
z-index:2147483647;
|
|
101
|
+
height:52px;
|
|
102
|
+
background:${this.colors.glassBg};
|
|
103
|
+
backdrop-filter:blur(24px);
|
|
104
|
+
-webkit-backdrop-filter:blur(24px);
|
|
105
|
+
border-bottom:1px solid ${this.colors.glassBorder};
|
|
106
|
+
display:flex;align-items:center;justify-content:center;gap:16px;
|
|
107
|
+
font-family:"Inter",system-ui,-apple-system,sans-serif;
|
|
108
|
+
font-size:14px;color:${this.colors.text};
|
|
109
|
+
box-shadow:0 4px 16px ${this.colors.shadow};
|
|
110
|
+
-webkit-font-smoothing:antialiased;
|
|
111
|
+
`});let e=h("span",{style:`
|
|
112
|
+
width:8px;height:8px;border-radius:50%;
|
|
113
|
+
background:${this.colors.accent};
|
|
114
|
+
box-shadow:0 0 8px ${this.colors.accentGlow};
|
|
115
|
+
animation:pulse 1.5s ease-in-out infinite;
|
|
116
|
+
`}),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 i=h("span",{style:"font-weight:500;letter-spacing:-0.01em;"});b(i,this.t("annotator.instruction"));let s=document.createElement("button");s.style.cssText=`
|
|
117
|
+
height:34px;padding:0 18px;border-radius:9999px;
|
|
118
|
+
border:1px solid ${this.colors.border};
|
|
119
|
+
background:${this.colors.glassBg};
|
|
120
|
+
color:${this.colors.textTertiary};font-family:"Inter",system-ui,-apple-system,sans-serif;
|
|
121
|
+
font-size:13px;font-weight:500;cursor:pointer;
|
|
122
|
+
transition:all 0.2s ease;
|
|
123
|
+
`,b(s,this.t("annotator.cancel")),s.addEventListener("click",()=>this.deactivate()),s.addEventListener("mouseenter",()=>{s.style.borderColor=this.colors.typeBug,s.style.color=this.colors.typeBug,s.style.background=this.colors.typeBugBg}),s.addEventListener("mouseleave",()=>{s.style.borderColor=this.colors.border,s.style.color=this.colors.textTertiary,s.style.background=this.colors.glassBg}),this.toolbar.appendChild(e),this.toolbar.appendChild(i),this.toolbar.appendChild(s),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:!1}),this.overlay.addEventListener("touchmove",this.onTouchMove,{passive:!1}),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=!1,this.isDrawing=!1,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 i=n.getBoundingClientRect();if(i.width<=0||i.height<=0)return;let s=new DOMRect(i.x,i.y,i.width,i.height),o=await this.popup.show(s);if(!o)return;let a={anchor:ue(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};this.deactivate(),this.bus.emit("annotation:complete",{annotation:a,type:o.type,message:o.message})};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=!0,this.startX=e,this.startY=n,this.drawingRect?.remove(),this.drawingRect=h("div",{style:`
|
|
124
|
+
position:fixed;
|
|
125
|
+
border:2px solid ${this.colors.accent};
|
|
126
|
+
background:${this.colors.accent}12;
|
|
127
|
+
pointer-events:none;
|
|
128
|
+
border-radius:8px;
|
|
129
|
+
box-shadow:0 0 16px ${this.colors.accentGlow};
|
|
130
|
+
transition:box-shadow 0.15s ease;
|
|
131
|
+
`}),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 i=Math.min(n.clientX,this.startX),s=Math.min(n.clientY,this.startY),o=Math.abs(n.clientX-this.startX),r=Math.abs(n.clientY-this.startY);this.drawingRect.style.left=`${i}px`,this.drawingRect.style.top=`${s}px`,this.drawingRect.style.width=`${o}px`,this.drawingRect.style.height=`${r}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=!1;let i=Math.min(e,this.startX),s=Math.min(n,this.startY),o=Math.abs(e-this.startX),r=Math.abs(n-this.startY);if(o<10||r<10){this.drawingRect.remove(),this.drawingRect=null;return}let a=new DOMRect(i,s,o,r),l=await this.popup.show(a);if(!l){this.drawingRect?.remove(),this.drawingRect=null;return}let c=this.buildAnnotation(a);this.drawingRect?.remove(),this.drawingRect=null,this.deactivate(),this.bus.emit("annotation:complete",{annotation:c,type:l.type,message:l.message})};buildAnnotation(e){this.overlay&&(this.overlay.style.pointerEvents="none");let n=De(e);this.overlay&&(this.overlay.style.pointerEvents="auto");let i=ue(n),s=n.getBoundingClientRect(),o=He(e,s);return{anchor:i,rect:o,scrollX:window.scrollX,scrollY:window.scrollY,viewportW:window.innerWidth,viewportH:window.innerHeight,devicePixelRatio:window.devicePixelRatio}}destroy(){this.deactivate(),this.popup.destroy()}};var H="siteping_retry_queue";async function D(t,e,n=3){for(let i=0;i<=n;i++){let s=new AbortController,o=setTimeout(()=>s.abort(),1e4);try{let l=await fetch(t,{...e,signal:s.signal});if(clearTimeout(o),l.ok||l.status>=400&&l.status<500||i===n)return l}catch(l){if(clearTimeout(o),i===n)throw l}let r=1e3*2**i,a=Math.random()*1e3-500;await new Promise(l=>setTimeout(l,r+a))}throw new Error("Max retries exceeded")}function Nt(t,e){try{let n=localStorage.getItem(H),i=n?JSON.parse(n):[],s=Array.isArray(i)?i:[];s.length>=20&&s.shift(),s.push({endpoint:t,payload:e}),localStorage.setItem(H,JSON.stringify(s))}catch{}}async function Je(t){try{let e=localStorage.getItem(H);if(!e)return;let n=JSON.parse(e),i=Array.isArray(n)?n:[],s=i.filter(a=>a.endpoint===t);if(s.length===0)return;let o=[];for(let a of s)try{(await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(a.payload)})).ok||o.push(a)}catch{o.push(a)}let r=i.filter(a=>a.endpoint!==t).concat(o);r.length>0?localStorage.setItem(H,JSON.stringify(r)):localStorage.removeItem(H)}catch{}}var J=class{constructor(e,n){this.endpoint=e;this.projectName=n}endpoint;projectName;async sendFeedback(e){try{let n=await D(this.endpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)});if(!n.ok){let i=await n.text().catch(()=>"Unknown error");throw new Error(`Failed to send feedback: ${n.status} ${i}`)}return await n.json()}catch(n){throw Nt(this.endpoint,e),n}}async getFeedbacks(e,n){let i=new URLSearchParams({projectName:e});n?.page&&i.set("page",String(n.page)),n?.limit&&i.set("limit",String(n.limit)),n?.type&&i.set("type",n.type),n?.status&&i.set("status",n.status),n?.search&&i.set("search",n.search);let s=await D(`${this.endpoint}?${i.toString()}`,{method:"GET"});if(!s.ok)throw new Error(`Failed to fetch feedbacks: ${s.status}`);return await s.json()}async resolveFeedback(e,n){let i=await D(this.endpoint,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:e,projectName:this.projectName,status:n?"resolved":"open"})});if(!i.ok)throw new Error(`Failed to update feedback: ${i.status}`);return await i.json()}async deleteFeedback(e){let n=await D(this.endpoint,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:e,projectName:this.projectName})});if(!n.ok)throw new Error(`Failed to delete feedback: ${n.status}`)}async deleteAllFeedbacks(e){let n=await D(this.endpoint,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({projectName:e,deleteAll:!0})});if(!n.ok)throw new Error(`Failed to delete all feedbacks: ${n.status}`)}};var O=class{listeners=new Map;on(e,n){this.listeners.has(e)||this.listeners.set(e,new Set);let i=this.listeners.get(e);return i.add(n),()=>{i.delete(n)}}off(e,n){let i=this.listeners.get(e);i&&i.delete(n)}emit(e,...n){let i=this.listeners.get(e);if(i)for(let s of i)try{s(...n)}catch(o){console.error(`[siteping] Error in event listener for "${String(e)}":`,o)}}removeAll(){this.listeners.clear()}};var $t=54,Z=class{constructor(e,n,i,s){this.bus=i;this.t=s;let o=n.position??"bottom-right",r=o==="bottom-right";this.items=[{id:"chat",icon:Oe,label:s("fab.messages")},{id:"annotate",icon:je,label:s("fab.annotate")},{id:"toggle-annotations",icon:fe,iconAlt:me,label:s("fab.annotations")}],this.fab=document.createElement("button"),this.fab.className=`sp-fab sp-fab--${o} sp-anim-fab-in`,this.fab.style.position="fixed",this.fab.appendChild(F(he)),this.fab.setAttribute("aria-label",s("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--${o}`,this.radialContainer.setAttribute("role","menu");for(let c=0;c<this.items.length;c++){let d=this.items[c];if(!d)continue;let p=document.createElement("button");p.className="sp-radial-item",p.style.setProperty("--sp-i",String(c)),p.appendChild(F(d.icon)),p.setAttribute("role","menuitem"),p.setAttribute("aria-label",d.label),p.dataset.itemId=d.id,p.addEventListener("click",m=>{m.stopPropagation(),this.handleItemClick(d.id)});let f=document.createElement("span");f.className="sp-radial-label",f.textContent=d.label,f.style.cssText=r?"position:absolute; right:54px; top:50%; transform:translateY(-50%); white-space:nowrap;":"position:absolute; left:54px; top:50%; transform:translateY(-50%); white-space:nowrap;",p.appendChild(f),this.radialContainer.appendChild(p)}this.root=document.createElement("div"),this.root.appendChild(this.radialContainer),this.root.appendChild(this.fab),e.appendChild(this.root);let a=e.host;this.onDocumentClick=c=>{this.isOpen&&!c.composedPath().includes(a)&&this.close()},document.addEventListener("click",this.onDocumentClick);let l=c=>{c.key==="Escape"&&this.isOpen&&(c.stopPropagation(),this.close())};this.fab.addEventListener("keydown",l),this.radialContainer.addEventListener("keydown",l),this.radialContainer.addEventListener("keydown",c=>{let d=Array.from(this.radialContainer.querySelectorAll(".sp-radial-item"));if(d.length===0||!this.isOpen)return;let p=e.activeElement??document.activeElement,f=d.indexOf(p);switch(c.key){case"ArrowUp":{c.preventDefault();let m=f<=0?d.length-1:f-1;d[m]?.focus();break}case"ArrowDown":{c.preventDefault();let m=f>=d.length-1?0:f+1;d[m]?.focus();break}case"Home":{c.preventDefault(),d[0]?.focus();break}case"End":{c.preventDefault(),d[d.length-1]?.focus();break}}})}bus;t;root;fab;radialContainer;badgeEl=null;isOpen=!1;annotationsVisible=!0;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);b(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=!0,this.setFabIcon(G),this.fab.setAttribute("aria-expanded","true"),this.radialContainer.querySelectorAll(".sp-radial-item").forEach((n,i)=>{let s=-(16+$t*(i+1));n.style.transform=`translate(0px, ${s}px) scale(1)`,n.classList.add("sp-radial-item--open")}),requestAnimationFrame(()=>{this.radialContainer.querySelector(".sp-radial-item")?.focus()})}close(){this.isOpen=!1,this.setFabIcon(he),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(F(e)),n&&this.fab.appendChild(n)}handleItemClick(e){switch(this.close(),e){case"chat":this.bus.emit("panel:toggle",!0);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(F(this.annotationsVisible?fe:me));break}}}destroy(){document.removeEventListener("click",this.onDocumentClick),this.root.remove()}};var Ze={"panel.title":"Feedbacks","panel.ariaLabel":"Siteping feedback panel","panel.feedbackList":"Feedback list","panel.loading":"Loading feedbacks","panel.close":"Close panel","panel.deleteAll":"Delete all","panel.deleteAllConfirmTitle":"Delete all","panel.deleteAllConfirmMessage":"Delete all feedbacks for this project? This action cannot be undone.","panel.search":"Search...","panel.searchAria":"Search feedbacks","panel.filterAll":"All","panel.loadError":"Failed to load","panel.retry":"Retry","panel.empty":"No feedback yet","panel.showMore":"Show more","panel.showLess":"Show less","panel.resolve":"Resolve","panel.reopen":"Reopen","panel.delete":"Delete","panel.cancel":"Cancel","panel.confirmDelete":"Delete","type.question":"Question","type.change":"Change","type.bug":"Bug","type.other":"Other","fab.aria":"Siteping \u2014 Feedback menu","fab.messages":"Messages","fab.annotate":"Annotate","fab.annotations":"Annotations","annotator.instruction":"Draw a rectangle on the area to comment","annotator.cancel":"Cancel","popup.ariaLabel":"Feedback form","popup.placeholder":"Describe your feedback...","popup.textareaAria":"Feedback message","popup.submitHintMac":"\u2318+Enter to send","popup.submitHintOther":"Ctrl+Enter to send","popup.cancel":"Cancel","popup.submit":"Send","identity.title":"Identify yourself","identity.nameLabel":"Name","identity.namePlaceholder":"Your name","identity.emailLabel":"Email","identity.emailPlaceholder":"your@email.com","identity.cancel":"Cancel","identity.submit":"Continue","marker.approximate":"Approximate position (confidence: {confidence}%)","marker.aria":"Feedback #{number}: {type} \u2014 {message}","fab.badge":"{count} unresolved feedbacks","feedback.sent.confirmation":"Feedback sent successfully","feedback.error.message":"Failed to send feedback","feedback.deleted.confirmation":"Feedback deleted","badge.count":"{count} unresolved feedbacks"};var et={"panel.title":"Feedbacks","panel.ariaLabel":"Panneau de feedback Siteping","panel.feedbackList":"Liste des feedbacks","panel.loading":"Chargement des feedbacks","panel.close":"Fermer le panneau","panel.deleteAll":"Tout supprimer","panel.deleteAllConfirmTitle":"Tout supprimer","panel.deleteAllConfirmMessage":"Supprimer tous les feedbacks de ce projet ? Cette action est irr\xE9versible.","panel.search":"Rechercher...","panel.searchAria":"Rechercher dans les feedbacks","panel.filterAll":"Tous","panel.loadError":"Erreur de chargement","panel.retry":"R\xE9essayer","panel.empty":"Aucun feedback pour le moment","panel.showMore":"Voir plus","panel.showLess":"Voir moins","panel.resolve":"R\xE9soudre","panel.reopen":"Rouvrir","panel.delete":"Supprimer","panel.cancel":"Annuler","panel.confirmDelete":"Supprimer","type.question":"Question","type.change":"Changement","type.bug":"Bug","type.other":"Autre","fab.aria":"Siteping \u2014 Menu feedback","fab.messages":"Messages","fab.annotate":"Annoter","fab.annotations":"Annotations","annotator.instruction":"Tracez un rectangle sur la zone \xE0 commenter","annotator.cancel":"Annuler","popup.ariaLabel":"Formulaire de feedback","popup.placeholder":"D\xE9crivez votre retour...","popup.textareaAria":"Message de feedback","popup.submitHintMac":"\u2318+Entr\xE9e pour envoyer","popup.submitHintOther":"Ctrl+Entr\xE9e pour envoyer","popup.cancel":"Annuler","popup.submit":"Envoyer","identity.title":"Identifiez-vous","identity.nameLabel":"Nom","identity.namePlaceholder":"Votre nom","identity.emailLabel":"Email","identity.emailPlaceholder":"votre@email.com","identity.cancel":"Annuler","identity.submit":"Continuer","marker.approximate":"Position approximative (confiance : {confidence}%)","marker.aria":"Feedback n\xB0{number} : {type} \u2014 {message}","fab.badge":"{count} feedbacks non r\xE9solus","feedback.sent.confirmation":"Feedback envoy\xE9 avec succ\xE8s","feedback.error.message":"\xC9chec de l'envoi du feedback","feedback.deleted.confirmation":"Feedback supprim\xE9","badge.count":"{count} feedbacks non r\xE9solus"};var be={fr:et,en:Ze};function ee(t){let e=(t.split("-")[0]??t).toLowerCase();be[e]||console.warn(`[siteping] Unknown locale "${t}", falling back to "en"`);let n=be[e]??be.en??{};return i=>n[i]??i}function B(t,e){switch(t){case"question":return e("type.question");case"change":return e("type.change");case"bug":return e("type.bug");case"other":return e("type.other");default:return t}}var tt="siteping_identity";function nt(){try{let t=localStorage.getItem(tt);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 it(t){try{localStorage.setItem(tt,JSON.stringify(t))}catch{}}function Dt(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 r=t;t=e,e=r}let n=t.length,i=e.length,s=new Array(n+1);for(let r=0;r<=n;r++)s[r]=r;let o=new Array(n+1);for(let r=1;r<=i;r++){o[0]=r;for(let l=1;l<=n;l++){let c=s[l-1]??0;o[l]=t[l-1]===e[r-1]?c:1+Math.min(c,s[l]??0,o[l-1]??0)}let a=s;s=o,o=a}return s[n]??0}function $(t,e){if(t===e)return 1;let n=Math.max(t.length,e.length);return n===0?1:1-Dt(t,e)/n}function ye(t,e,n=.6){if(!e||!t)return 0;if(t.includes(e))return 1;let i=e.length;if(i>t.length){let a=$(t,e);return a>=n?a:0}let s=0,o=t.length>500?t.slice(0,500):t,r=o.length-i;for(let a=0;a<=r;a++){let l=o.slice(a,a+i),c=$(l,e);if(c>s&&(s=c),s>=.95)break}return s>=n?s:0}var Ht=300,Ot=.3;function ve(t,e){if(!e.textSnippet)return!0;let n=(t.textContent?.trim()??"").slice(0,500);return ye(n,e.textSnippet,.5)>Ot}function jt(t){if(t.elementId){let e=document.getElementById(t.elementId);if(e&&e.tagName===t.elementTag&&ve(e,t))return{element:e,confidence:1,strategy:"id"}}try{let e=document.querySelector(t.cssSelector);if(e&&e.tagName===t.elementTag&&ve(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&&ve(n,t))return{element:n,confidence:.9,strategy:"xpath"}}catch{}return zt(t)}function zt(t){let e=t.elementTag.toLowerCase(),n=document.querySelectorAll(e);if(n.length===0)return null;let i=null,s=0,o=Math.min(n.length,Ht);for(let r=0;r<o;r++){let a=n[r];if(!a)continue;let l=_t(a,t);if(l>s&&(s=l,i=a,s>=.85))break}return!i||s<.4?null:{element:i,confidence:Math.min(s,.85),strategy:"scan"}}function _t(t,e){let n=0,i=0,s=(t.textContent?.trim()??"").slice(0,500);if(e.textSnippet&&(i+=40,n+=ye(s,e.textSnippet,.5)*40),e.fingerprint&&(i+=20,n+=Ne(t,e.fingerprint)*20),e.textPrefix||e.textSuffix){i+=20;let o=0,r=0;if(e.textPrefix){let a=N(t,"before");o+=a?$(a,e.textPrefix):0,r++}if(e.textSuffix){let a=N(t,"after");o+=a?$(a,e.textSuffix):0,r++}r>0&&(n+=o/r*20)}if(e.neighborText){i+=20;let o=U(t);n+=o?$(o,e.neighborText)*20:0}return i>0?n/i:0}function te(t,e){let n=jt(t);if(!n)return null;let i=n.element.getBoundingClientRect(),s=new DOMRect(i.x+e.xPct*i.width,i.y+e.yPct*i.height,e.wPct*i.width,e.hPct*i.height);return{element:n.element,rect:s,confidence:n.confidence,strategy:n.strategy}}function xe(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}}function ne(t){return{xPct:t.xPct,yPct:t.yPct,wPct:t.wPct,hPct:t.hPct}}var st=13;function ot(t){return{top:t.top+window.scrollY-st,left:t.right+window.scrollX-st}}function j(t,e){let n=t.entries[e],i=t.elementIndices[e];if(!(!n||i===void 0))return n.elements[i]}var rt=300,at=200,Kt=.7,Yt=28,lt=32,ie=class{constructor(e,n,i,s){this.colors=e;this.tooltip=n;this.bus=i;this.t=s;this.container=h("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",o=>{this.container.style.display=o?"block":"none"}),this.resizeHandler=()=>this.scheduleReposition(),window.addEventListener("resize",this.resizeHandler,{passive:!0}),this.scrollHandler=()=>this.scheduleReposition(),window.addEventListener("scroll",this.scrollHandler,{passive:!0,capture:!0}),this.mutationObserver=new MutationObserver(o=>{if(o.length>20){this.scheduleReposition();return}let r=!1;for(let a of o)if(!(this.container.contains(a.target)||this.tooltip.contains(a.target))){r=!0;break}r&&this.scheduleReposition()}),this.mutationObserver.observe(document.body,{childList:!0,subtree:!0,attributes:!1,characterData:!1}),this.onDocumentClickForClusters=o=>{this.container.contains(o.target)||this.collapseAllClusters()},document.addEventListener("click",this.onDocumentClickForClusters)}colors;tooltip;bus;t;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:at+100}):this.repositionTimer=+setTimeout(()=>{this.repositionTimer=null,this.repositionAll()},at))}repositionAll(){for(let e of this.entries)for(let n=0;n<e.feedback.annotations.length;n++){let i=e.elements[n];if(!i)continue;let s=e.feedback.annotations[n];if(!s)continue;let o=`${e.feedback.id}:${n}`,a=this.anchorCache.get(o)?.deref(),l;if(a?.isConnected){let d=a.getBoundingClientRect(),p=ne(s);l={element:a,rect:new DOMRect(d.left+p.xPct*d.width,d.top+p.yPct*d.height,p.wPct*d.width,p.hPct*d.height),confidence:1,strategy:"css"}}else l=te(xe(s),ne(s)),l?.element&&this.anchorCache.set(o,new WeakRef(l.element));if(!l){i.style.display="none";continue}let c=ot(l.rect);e.baseTop=c.top,e.baseLeft=c.left,i.style.display="flex",this.applyConfidenceStyle(i,l.confidence,e.feedback)}this.applyClusterPositions()}applyClusterPositions(){for(let e of this.clusters)e.expanded?this.applyFanPositions(e):this.applyStackPositions(e)}render(e){this.clear(),e.forEach((n,i)=>{let s=this.buildEntry(n,i+1);this.entries.push(s)}),this.buildClusters()}addFeedback(e,n){let i=this.buildEntry(e,n);for(let s of i.elements)s.style.animation="sp-marker-in 0.35s cubic-bezier(0.34,1.56,0.64,1) both";this.entries.push(i),this.buildClusters()}buildEntry(e,n){let i={feedback:e,elements:[],baseTop:0,baseLeft:0};for(let s of e.annotations){let o=te(xe(s),ne(s));if(!o)continue;let r=ot(o.rect);i.baseTop=r.top,i.baseLeft=r.left;let a=this.createMarker(n,e,r);this.applyConfidenceStyle(a,o.confidence,e),this.container.appendChild(a),i.elements.push(a)}return i}buildClusters(){for(let i of this.container.querySelectorAll(".sp-cluster-badge"))i.remove();let e=[];for(let i of this.entries)for(let s=0;s<i.elements.length;s++)e.push({entry:i,elIdx:s});let n=new Set;this.clusters=[];for(let i=0;i<e.length;i++){if(n.has(i))continue;let s=e[i];if(!s)continue;let o={entries:[s.entry],elementIndices:[s.elIdx],expanded:!1};n.add(i);for(let r=i+1;r<e.length;r++){if(n.has(r))continue;let a=s.entry,l=e[r];if(!l)continue;let c=l.entry;Math.sqrt((a.baseLeft-c.baseLeft)**2+(a.baseTop-c.baseTop)**2)<Yt&&(o.entries.push(c),o.elementIndices.push(l.elIdx),n.add(r))}this.clusters.push(o)}for(let i of this.clusters)i.entries.length<=1||(this.applyStackPositions(i),this.addClusterBadge(i))}applyStackPositions(e){let n=e.entries[0];if(!n)return;let{baseTop:i,baseLeft:s}=n,o=e.entries.length<=1;for(let r=0;r<e.entries.length;r++){let a=j(e,r);a&&(a.style.top=`${i+(o?0:r*3)}px`,a.style.left=`${s+(o?0:r*3)}px`,a.style.zIndex=String(r+1))}}applyFanPositions(e){let n=e.entries[0];if(!n)return;let{baseTop:i,baseLeft:s}=n,o=e.entries.length,r=(o-1)*lt,a=s-r/2;for(let l=0;l<o;l++){let c=j(e,l);c&&(c.style.top=`${i}px`,c.style.left=`${a+l*lt}px`,c.style.zIndex=String(10+l))}}addClusterBadge(e){let n=j(e,e.entries.length-1);if(!n)return;let i=h("div",{class:"sp-cluster-badge",style:`
|
|
132
|
+
position:absolute;top:-6px;right:-6px;
|
|
133
|
+
min-width:16px;height:16px;padding:0 4px;
|
|
134
|
+
border-radius:9999px;
|
|
135
|
+
background:${this.colors.accent};color:#fff;
|
|
136
|
+
font-size:10px;font-weight:700;
|
|
137
|
+
display:flex;align-items:center;justify-content:center;
|
|
138
|
+
border:1.5px solid #fff;
|
|
139
|
+
pointer-events:none;
|
|
140
|
+
font-family:"Inter",system-ui,-apple-system,sans-serif;
|
|
141
|
+
line-height:1;
|
|
142
|
+
`});b(i,String(e.entries.length)),n.appendChild(i)}setBadgesVisible(e,n){for(let i=0;i<e.entries.length;i++){let s=j(e,i)?.querySelector(".sp-cluster-badge");s&&(s.style.display=n?"flex":"none")}}findCluster(e){for(let n of this.clusters)if(!(n.entries.length<=1)){for(let i=0;i<n.entries.length;i++)if(j(n,i)===e)return n}return null}handleClusterClick(e,n){let i=this.findCluster(e);return i?i.expanded?!1:(n.stopPropagation(),this.collapseAllClusters(),i.expanded=!0,this.applyFanPositions(i),this.setBadgesVisible(i,!1),!0):!1}collapseCluster(e){e.expanded&&(e.expanded=!1,this.applyStackPositions(e),this.setBadgesVisible(e,!0))}collapseAllClusters(){for(let e of this.clusters)this.collapseCluster(e)}applyConfidenceStyle(e,n,i){let s=i.status==="resolved";n<Kt&&!s?(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,i){let s=I(n.type,this.colors),o=n.status==="resolved",r=h("div",{style:`
|
|
143
|
+
position:absolute;
|
|
144
|
+
top:${i.top}px;
|
|
145
|
+
left:${i.left}px;
|
|
146
|
+
width:26px;height:26px;
|
|
147
|
+
border-radius:50%;
|
|
148
|
+
background:${o?"rgba(241,245,249,0.9)":"rgba(255,255,255,0.92)"};
|
|
149
|
+
border:2px solid ${o?"#cbd5e1":s};
|
|
150
|
+
display:flex;align-items:center;justify-content:center;
|
|
151
|
+
font-family:"Inter",system-ui,-apple-system,sans-serif;
|
|
152
|
+
font-size:11px;font-weight:700;
|
|
153
|
+
color:${o?"#94a3b8":s};
|
|
154
|
+
cursor:pointer;pointer-events:auto;
|
|
155
|
+
box-shadow:${o?"0 2px 8px rgba(0,0,0,0.06)":`0 2px 12px ${s}25, 0 2px 6px rgba(0,0,0,0.06)`};
|
|
156
|
+
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;
|
|
157
|
+
user-select:none;
|
|
158
|
+
-webkit-font-smoothing:antialiased;
|
|
159
|
+
`});r.dataset.feedbackId=n.id,r.setAttribute("tabindex","0"),r.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}",B(n.type,this.t)).replace("{message}",a);r.setAttribute("aria-label",l),r.setAttribute("aria-describedby",this.tooltip.tooltipId),b(r,o?"\u2713":String(e)),r.addEventListener("mouseenter",()=>{r.style.transform="scale(1.2)",r.style.boxShadow=o?"0 4px 16px rgba(0,0,0,0.1)":`0 4px 20px ${s}35, 0 4px 12px rgba(0,0,0,0.08)`,this.tooltip.show(n,r.getBoundingClientRect()),this.pinnedFeedback||this.showHighlight(n)}),r.addEventListener("mouseleave",()=>{r.style.transform="scale(1)",r.style.boxShadow=o?"0 2px 8px rgba(0,0,0,0.06)":`0 2px 12px ${s}25, 0 2px 6px rgba(0,0,0,0.06)`,this.tooltip.scheduleHide(),this.pinnedFeedback||this.clearHighlight()});let c=d=>{d instanceof MouseEvent&&this.handleClusterClick(r,d)||(this.pinHighlight(n),this.bus.emit("panel:toggle",!0),r.dispatchEvent(new CustomEvent("sp-marker-click",{detail:{feedbackId:n.id},bubbles:!0})))};return r.addEventListener("click",d=>c(d)),r.addEventListener("keydown",d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),c(d))}),r}highlight(e){for(let n of this.entries)if(n.feedback.id===e)for(let i of n.elements)i.style.animation="sp-pulse-ring 0.7s ease-out",i.addEventListener("animationend",()=>{i.style.animation=""},{once:!0})}showHighlight(e){this.removeHighlightElements();for(let n of e.annotations){let i=te(xe(n),ne(n));if(!i)continue;let s=I(e.type,this.colors),o=i.rect,r=h("div",{style:`
|
|
160
|
+
position:absolute;
|
|
161
|
+
top:${o.top+window.scrollY}px;
|
|
162
|
+
left:${o.left+window.scrollX}px;
|
|
163
|
+
width:${o.width}px;height:${o.height}px;
|
|
164
|
+
border:2px solid ${s};
|
|
165
|
+
background:${s}0c;
|
|
166
|
+
border-radius:8px;
|
|
167
|
+
pointer-events:none;z-index:-1;
|
|
168
|
+
opacity:0;
|
|
169
|
+
box-shadow:0 0 16px ${s}20;
|
|
170
|
+
transition:opacity ${rt}ms ease;
|
|
171
|
+
`});this.container.appendChild(r),this.highlightElements.push(r),r.offsetHeight,r.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:!0})}unpinHighlight(){this.onDocumentClick&&(document.removeEventListener("click",this.onDocumentClick,{capture:!0}),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:!0}),this.onDocumentClickForClusters&&document.removeEventListener("click",this.onDocumentClickForClusters),this.mutationObserver?.disconnect(),this.container.remove()}};var se=class{constructor(e,n,i,s,o,r,a,l){this.colors=n;this.bus=i;this.client=s;this.projectName=o;this.markers=r;this.t=a;this.locale=l;this.root=h("div",{class:"sp-panel"}),this.root.setAttribute("role","complementary"),this.root.setAttribute("aria-label",this.t("panel.ariaLabel")),this.root.setAttribute("aria-hidden","true");let c=h("div",{class:"sp-panel-header"}),d=h("span",{class:"sp-panel-title"});b(d,this.t("panel.title")),this.closeBtn=document.createElement("button"),this.closeBtn.className="sp-panel-close",this.closeBtn.setAttribute("aria-label",this.t("panel.close")),this.closeBtn.appendChild(F(G)),this.closeBtn.addEventListener("click",()=>this.close()),this.deleteAllBtn=document.createElement("button"),this.deleteAllBtn.className="sp-btn-delete-all",this.deleteAllBtn.setAttribute("aria-label",this.t("panel.deleteAll")),this.deleteAllBtn.appendChild(F(ge));let p=document.createElement("span");b(p,` ${this.t("panel.deleteAll")}`),this.deleteAllBtn.appendChild(p),this.deleteAllBtn.addEventListener("click",()=>this.confirmDeleteAll());let f=h("div",{class:"sp-panel-header-right"});f.appendChild(this.deleteAllBtn),f.appendChild(this.closeBtn),c.appendChild(d),c.appendChild(f);let m=h("div",{class:"sp-filters"}),y=h("div",{class:"sp-search-wrap"}),T=F(ze);T.setAttribute("class","sp-search-icon"),this.searchInput=document.createElement("input"),this.searchInput.type="text",this.searchInput.className="sp-search",this.searchInput.placeholder=this.t("panel.search"),this.searchInput.setAttribute("aria-label",this.t("panel.searchAria")),this.searchInput.addEventListener("input",()=>{this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>this.loadFeedbacks().catch(()=>{}),200)}),y.appendChild(T),y.appendChild(this.searchInput);let k=h("div",{class:"sp-chips"}),C=[{value:"all",label:this.t("panel.filterAll")},{value:"question",label:this.t("type.question")},{value:"change",label:this.t("type.change")},{value:"bug",label:this.t("type.bug")},{value:"other",label:this.t("type.other")}];for(let v of C){let g=document.createElement("button");g.className=`sp-chip ${v.value==="all"?"sp-chip--active":""}`,v.value!=="all"&&(g.style.borderColor=I(v.value,this.colors)),b(g,v.label),g.dataset.filter=v.value,g.setAttribute("aria-pressed",v.value==="all"?"true":"false"),g.addEventListener("click",()=>this.toggleFilter(v.value,k)),k.appendChild(g)}m.appendChild(y),m.appendChild(k),this.listContainer=h("div",{class:"sp-list"}),this.listContainer.setAttribute("role","list"),this.listContainer.setAttribute("aria-label",this.t("panel.feedbackList")),this.root.appendChild(c),this.root.appendChild(m),this.root.appendChild(this.listContainer),e.appendChild(this.root),this.onListClick=v=>{let g=v.target,x=g.closest("[data-action]");if(x){v.stopPropagation();let w=x.closest(".sp-card");if(!w)return;let S=w.dataset.feedbackId,E=this.feedbacks.find(L=>L.id===S);if(!E)return;let A=x.dataset.action;if(A==="expand"){let L=w.querySelector(".sp-card-message");if(!L)return;let _=L.classList.toggle("sp-card-message--expanded");b(x,_?this.t("panel.showLess"):this.t("panel.showMore")),x.setAttribute("aria-expanded",String(_))}else if(A==="resolve"){if(this.pendingMutations.has(E.id))return;let L=x;this.toggleResolve(E,L).catch(()=>{})}else if(A==="delete"){if(this.pendingMutations.has(E.id))return;let L=x;this.deleteFeedback(E,L).catch(()=>{})}return}let u=g.closest(".sp-card");if(u){let w=u.dataset.feedbackId,S=this.feedbacks.find(E=>E.id===w);if(S&&S.annotations.length>0){let E=S.annotations[0];if(!E)return;window.scrollTo({left:E.scrollX,top:E.scrollY,behavior:"smooth"}),this.markers.pinHighlight(S)}}},this.listContainer.addEventListener("click",this.onListClick),this.onListKeydown=v=>{let g=v;if(g.key!=="Enter"&&g.key!==" ")return;let x=g.target,u=x.closest(".sp-card");if(!u||x!==u)return;g.preventDefault();let w=u.dataset.feedbackId,S=this.feedbacks.find(E=>E.id===w);if(S&&S.annotations.length>0){let E=S.annotations[0];if(!E)return;window.scrollTo({left:E.scrollX,top:E.scrollY,behavior:"smooth"}),this.markers.pinHighlight(S)}},this.listContainer.addEventListener("keydown",this.onListKeydown),this.onListMouseover=v=>{let x=v.target.closest(".sp-card");if(!x)return;let u=x.dataset.feedbackId;u&&this.markers.highlight(u)},this.listContainer.addEventListener("mouseover",this.onListMouseover),this.onListMouseout=v=>{let g=v.relatedTarget;g&&this.listContainer.contains(g)||this.markers.highlight("")},this.listContainer.addEventListener("mouseout",this.onListMouseout),this.bus.on("panel:toggle",v=>{v?this.open():this.close()}),e.addEventListener("keydown",v=>{let g=v;if(g.key==="Escape"&&this.isOpen){this.close();return}if(g.key==="Tab"&&this.isOpen){let x=this.root.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(x.length===0)return;let u=x[0],w=x[x.length-1];if(!u||!w)return;let S=e.activeElement;g.shiftKey&&S===u?(g.preventDefault(),w.focus()):!g.shiftKey&&S===w&&(g.preventDefault(),u.focus())}}),this.onMarkerClick=(v=>{this.scrollToFeedback(v.detail.feedbackId)}),document.addEventListener("sp-marker-click",this.onMarkerClick)}colors;bus;client;projectName;markers;t;locale;root;listContainer;searchInput;closeBtn;deleteAllBtn;activeFilters=new Set(["all"]);feedbacks=[];isOpen=!1;searchTimeout=null;loadController=null;pendingMutations=new Set;onMarkerClick;onListClick;onListKeydown;onListMouseover;onListMouseout;async open(){this.isOpen||(this.isOpen=!0,this.root.classList.add("sp-panel--open"),this.root.setAttribute("aria-hidden","false"),this.bus.emit("open"),await this.loadFeedbacks(),requestAnimationFrame(()=>{this.searchInput?this.searchInput.focus():this.closeBtn.focus()}))}close(){if(!this.isOpen)return;this.isOpen=!1,this.root.classList.remove("sp-panel--open"),this.root.setAttribute("aria-hidden","true"),this.bus.emit("close"),this.root.getRootNode().querySelector(".sp-fab")?.focus()}showLoading(){this.listContainer.replaceChildren();let e=h("div",{class:"sp-loading"});e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.setAttribute("aria-label",this.t("panel.loading"));let n=h("div",{class:"sp-spinner"});e.appendChild(n),this.listContainer.appendChild(e)}showError(){this.listContainer.replaceChildren();let e=h("div",{class:"sp-empty"});e.setAttribute("role","status"),e.setAttribute("aria-live","polite");let n=h("div",{class:"sp-empty-text"});b(n,this.t("panel.loadError"));let i=document.createElement("button");i.className="sp-btn-ghost",i.style.marginTop="8px",b(i,this.t("panel.retry")),i.addEventListener("click",()=>this.loadFeedbacks().catch(()=>{})),e.appendChild(n),e.appendChild(i),this.listContainer.appendChild(e)}async loadFeedbacks(){this.loadController?.abort(),this.loadController=new AbortController;let{signal:e}=this.loadController,n=this.searchInput.value.trim()||void 0,i=this.activeFilters.has("all")?void 0:Array.from(this.activeFilters)[0],s={limit:50};i&&(s.type=i),n&&(s.search=n);let o=this.feedbacks.length>0;o||this.showLoading();try{let{feedbacks:r}=await this.client.getFeedbacks(this.projectName,s);if(e.aborted)return;this.feedbacks=r,this.renderList(),this.markers.render(r)}catch(r){if(e.aborted)return;o||this.showError(),this.bus.emit("feedback:error",r instanceof Error?r:new Error(String(r)))}}renderList(){if(this.listContainer.replaceChildren(),this.feedbacks.length===0){let e=h("div",{class:"sp-empty"});e.setAttribute("role","status"),e.setAttribute("aria-live","polite");let n=h("div",{class:"sp-empty-text"});b(n,this.t("panel.empty")),e.appendChild(n),this.listContainer.appendChild(e);return}this.feedbacks.forEach((e,n)=>{let i=this.createCard(e,n+1);i.style.setProperty("--sp-card-i",String(n)),this.listContainer.appendChild(i)})}createCard(e,n){let i=e.status==="resolved",s=I(e.type,this.colors),o=h("div",{class:`sp-card ${i?"sp-card--resolved":""}`});o.setAttribute("role","listitem"),o.setAttribute("tabindex","0"),o.setAttribute("aria-label",`Feedback #${n}: ${B(e.type,this.t)} \u2014 ${e.message.slice(0,80)}`),o.dataset.feedbackId=e.id;let r=h("div",{class:"sp-card-bar"});r.style.background=i?"#9ca3af":s;let a=h("div",{class:"sp-card-body"}),l=h("div",{class:"sp-card-header"}),c=h("span",{class:"sp-card-number"});b(c,`#${n}`);let d=h("span",{class:"sp-badge"}),p=P(e.type,this.colors);d.style.background=p,d.style.color=s,b(d,B(e.type,this.t));let f=h("span",{class:"sp-card-date"});b(f,X(e.createdAt,this.locale)),l.appendChild(c),l.appendChild(d),l.appendChild(f);let m=h("div",{class:"sp-card-message"});b(m,e.message);let y=document.createElement("button");y.className="sp-card-expand",y.dataset.action="expand",b(y,this.t("panel.showMore")),y.style.display="none",y.setAttribute("aria-expanded","false"),requestAnimationFrame(()=>{m.scrollHeight>m.clientHeight&&(y.style.display="block")});let T=h("div",{class:"sp-card-footer"}),k=document.createElement("button");if(k.className="sp-btn-resolve",k.dataset.action="resolve",i){k.appendChild(F(Ue));let g=document.createElement("span");b(g,` ${this.t("panel.reopen")}`),k.appendChild(g)}else{k.appendChild(F(_e));let g=document.createElement("span");b(g,` ${this.t("panel.resolve")}`),k.appendChild(g)}let C=document.createElement("button");C.className="sp-btn-delete",C.dataset.action="delete",C.appendChild(F(ge));let v=document.createElement("span");return b(v,` ${this.t("panel.delete")}`),C.appendChild(v),T.appendChild(k),T.appendChild(C),a.appendChild(l),a.appendChild(m),a.appendChild(y),a.appendChild(T),o.appendChild(r),o.appendChild(a),o}async deleteFeedback(e,n){this.pendingMutations.add(e.id),n.disabled=!0;try{await this.client.deleteFeedback(e.id),this.bus.emit("feedback:deleted",e.id),await this.loadFeedbacks()}catch(i){this.pendingMutations.delete(e.id),n.disabled=!1,this.bus.emit("feedback:error",i instanceof Error?i:new Error(String(i)))}finally{this.pendingMutations.has(e.id)&&setTimeout(()=>this.pendingMutations.delete(e.id),300)}}async confirmDeleteAll(){if(await this.showConfirmDialog(this.t("panel.deleteAllConfirmTitle"),this.t("panel.deleteAllConfirmMessage"))){this.deleteAllBtn.disabled=!0;try{await this.client.deleteAllFeedbacks(this.projectName),this.bus.emit("feedback:all-deleted"),await this.loadFeedbacks()}catch(n){this.bus.emit("feedback:error",n instanceof Error?n:new Error(String(n)))}finally{this.deleteAllBtn.disabled=!1}}}showConfirmDialog(e,n){return new Promise(i=>{let s=h("div",{class:"sp-confirm-backdrop"}),o=`sp-confirm-title-${Date.now()}`,r=`sp-confirm-msg-${Date.now()}`,a=h("div",{class:"sp-confirm-dialog"});a.setAttribute("role","alertdialog"),a.setAttribute("aria-modal","true"),a.setAttribute("aria-labelledby",o),a.setAttribute("aria-describedby",r);let l=h("div",{class:"sp-confirm-title"});l.id=o,b(l,e);let c=h("div",{class:"sp-confirm-message"});c.id=r,b(c,n);let d=h("div",{class:"sp-confirm-actions"}),p=document.createElement("button");p.type="button",p.className="sp-btn-ghost",b(p,this.t("panel.cancel"));let f=document.createElement("button");f.type="button",f.className="sp-btn-danger",b(f,this.t("panel.confirmDelete"));let m=!1,y=k=>{m||(m=!0,s.removeEventListener("keydown",T),s.style.opacity="0",a.style.transform="translateY(8px) scale(0.97)",setTimeout(()=>{s.remove(),i(k)},200))},T=k=>{let C=k;if(C.key==="Escape"){y(!1);return}C.key==="Tab"&&(C.preventDefault(),s.getRootNode().activeElement===p?f.focus():p.focus())};s.addEventListener("keydown",T),p.addEventListener("click",()=>y(!1)),f.addEventListener("click",()=>y(!0)),s.addEventListener("click",k=>{k.target===s&&y(!1)}),d.appendChild(p),d.appendChild(f),a.appendChild(l),a.appendChild(c),a.appendChild(d),s.appendChild(a),this.root.getRootNode()instanceof ShadowRoot?this.root.getRootNode().appendChild(s):this.root.appendChild(s),requestAnimationFrame(()=>{s.style.opacity="1",a.style.transform="translateY(0) scale(1)",p.focus()})})}async toggleResolve(e,n){this.pendingMutations.add(e.id),n.disabled=!0;try{let i=e.status!=="resolved";await this.client.resolveFeedback(e.id,i),await this.loadFeedbacks()}catch(i){this.pendingMutations.delete(e.id),n.disabled=!1,this.bus.emit("feedback:error",i instanceof Error?i:new Error(String(i)))}finally{this.pendingMutations.has(e.id)&&setTimeout(()=>this.pendingMutations.delete(e.id),300)}}toggleFilter(e,n){this.activeFilters.clear(),this.activeFilters.add(e);let i=n.querySelectorAll(".sp-chip");for(let s of i){let o=this.activeFilters.has(s.dataset.filter??"");s.classList.toggle("sp-chip--active",o),s.setAttribute("aria-pressed",String(o))}this.loadFeedbacks().catch(()=>{})}scrollToFeedback(e){let n=CSS.escape(e),i=this.listContainer.querySelector(`[data-feedback-id="${n}"]`);i&&(i.scrollIntoView({behavior:"smooth",block:"center"}),i.classList.add("sp-anim-flash"),i.addEventListener("animationend",()=>{i.classList.remove("sp-anim-flash")},{once:!0}))}async refresh(){this.isOpen&&await this.loadFeedbacks()}destroy(){this.loadController?.abort(),this.searchTimeout&&clearTimeout(this.searchTimeout),this.listContainer.removeEventListener("click",this.onListClick),this.listContainer.removeEventListener("keydown",this.onListKeydown),this.listContainer.removeEventListener("mouseover",this.onListMouseover),this.listContainer.removeEventListener("mouseout",this.onListMouseout),document.removeEventListener("sp-marker-click",this.onMarkerClick),this.root.remove()}};function ke(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,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}}var oe=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,viewport:e.viewport,userAgent:e.userAgent,authorName:e.authorName,authorEmail:e.authorEmail,clientId:e.clientId,annotations:e.annotations.map(ke)});return we(n)}async getFeedbacks(e,n){let{feedbacks:i,total:s}=await this.store.getFeedbacks({projectName:e,page:n?.page,limit:n?.limit,type:n?.type,status:n?.status,search:n?.search});return{feedbacks:i.map(we),total:s}}async resolveFeedback(e,n){let i=await this.store.updateFeedback(e,{status:n?"resolved":"open",resolvedAt:n?new Date:null});return we(i)}async deleteFeedback(e){await this.store.deleteFeedback(e)}async deleteAllFeedbacks(e){await this.store.deleteAllFeedbacks(e)}};function we(t){return{id:t.id,projectName:t.projectName,type:t.type,message:t.message,status:t.status,url:t.url,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(Wt)}}function Wt(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,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 qt="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)",Ee="cubic-bezier(0.16, 1, 0.3, 1)",Ce="cubic-bezier(0.34, 1.56, 0.64, 1)",Ut="cubic-bezier(0.25, 1, 0.5, 1)",ct=`
|
|
172
|
+
/* ---- Keyframes ---- */
|
|
173
|
+
|
|
174
|
+
@keyframes sp-fab-in {
|
|
175
|
+
from {
|
|
176
|
+
transform: scale(0) rotate(-180deg);
|
|
177
|
+
opacity: 0;
|
|
178
|
+
}
|
|
179
|
+
to {
|
|
180
|
+
transform: scale(1) rotate(0deg);
|
|
181
|
+
opacity: 1;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
@keyframes sp-fab-glow {
|
|
186
|
+
0%, 100% { box-shadow: 0 4px 20px var(--sp-accent-glow), 0 2px 8px rgba(0, 0, 0, 0.08); }
|
|
187
|
+
50% { box-shadow: 0 4px 28px var(--sp-accent-glow), 0 2px 12px rgba(0, 0, 0, 0.1); }
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
@keyframes sp-marker-in {
|
|
191
|
+
0% {
|
|
192
|
+
transform: scale(0);
|
|
193
|
+
opacity: 0;
|
|
194
|
+
}
|
|
195
|
+
60% {
|
|
196
|
+
transform: scale(1.2);
|
|
197
|
+
opacity: 1;
|
|
198
|
+
}
|
|
199
|
+
100% {
|
|
200
|
+
transform: scale(1);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
@keyframes sp-pulse-ring {
|
|
205
|
+
0% {
|
|
206
|
+
box-shadow: 0 0 0 0 var(--sp-accent-glow);
|
|
207
|
+
}
|
|
208
|
+
70% {
|
|
209
|
+
box-shadow: 0 0 0 8px transparent;
|
|
210
|
+
}
|
|
211
|
+
100% {
|
|
212
|
+
box-shadow: 0 0 0 0 transparent;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
@keyframes sp-flash-bg {
|
|
217
|
+
0% { background-color: var(--sp-accent-light); }
|
|
218
|
+
100% { background-color: transparent; }
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
@keyframes sp-slide-up {
|
|
222
|
+
from {
|
|
223
|
+
transform: translateY(8px);
|
|
224
|
+
opacity: 0;
|
|
225
|
+
}
|
|
226
|
+
to {
|
|
227
|
+
transform: translateY(0);
|
|
228
|
+
opacity: 1;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
@keyframes sp-fade-in {
|
|
233
|
+
from { opacity: 0; }
|
|
234
|
+
to { opacity: 1; }
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
@keyframes sp-shimmer {
|
|
238
|
+
0% { background-position: -200% 0; }
|
|
239
|
+
100% { background-position: 200% 0; }
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
/* ---- Animation classes ---- */
|
|
243
|
+
|
|
244
|
+
.sp-anim-fab-in {
|
|
245
|
+
animation: sp-fab-in 0.5s ${qt} both;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.sp-anim-marker-in {
|
|
249
|
+
animation: sp-marker-in 0.35s ${Ce} both;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.sp-anim-pulse {
|
|
253
|
+
animation: sp-pulse-ring 0.7s ease-out;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.sp-anim-flash {
|
|
257
|
+
animation: sp-flash-bg 0.5s ${Ut};
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.sp-anim-slide-up {
|
|
261
|
+
animation: sp-slide-up 0.3s ${Ee} both;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.sp-anim-fade-in {
|
|
265
|
+
animation: sp-fade-in 0.2s ease-out both;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* ---- Transition utilities ---- */
|
|
269
|
+
|
|
270
|
+
.sp-panel {
|
|
271
|
+
transform: translateX(110%);
|
|
272
|
+
transition: transform 0.4s ${Ee};
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.sp-panel.sp-panel--open {
|
|
276
|
+
transform: translateX(0);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.sp-radial-item {
|
|
280
|
+
opacity: 0;
|
|
281
|
+
pointer-events: none;
|
|
282
|
+
transform: translate(0, 0) scale(0.8);
|
|
283
|
+
transition:
|
|
284
|
+
transform 0.35s ${Ce},
|
|
285
|
+
opacity 0.2s ease,
|
|
286
|
+
background 0.2s ease,
|
|
287
|
+
border-color 0.2s ease,
|
|
288
|
+
box-shadow 0.2s ease;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.sp-radial-item.sp-radial-item--open {
|
|
292
|
+
opacity: 1;
|
|
293
|
+
pointer-events: auto;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/* Stagger delay via CSS custom property --sp-i */
|
|
297
|
+
.sp-radial-item {
|
|
298
|
+
transition-delay: calc(var(--sp-i, 0) * 50ms);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
/* ---- Card stagger animation ---- */
|
|
302
|
+
|
|
303
|
+
@keyframes sp-card-in {
|
|
304
|
+
from {
|
|
305
|
+
transform: translateY(12px);
|
|
306
|
+
opacity: 0;
|
|
307
|
+
}
|
|
308
|
+
to {
|
|
309
|
+
transform: translateY(0);
|
|
310
|
+
opacity: 1;
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.sp-card {
|
|
315
|
+
animation: sp-card-in 0.35s ${Ee} both;
|
|
316
|
+
animation-delay: calc(var(--sp-card-i, 0) * 40ms);
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
/* ---- Loading spinner ---- */
|
|
320
|
+
|
|
321
|
+
@keyframes sp-spin {
|
|
322
|
+
to { transform: rotate(360deg); }
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.sp-spinner {
|
|
326
|
+
width: 20px;
|
|
327
|
+
height: 20px;
|
|
328
|
+
border: 2px solid var(--sp-border);
|
|
329
|
+
border-top-color: var(--sp-accent);
|
|
330
|
+
border-radius: 50%;
|
|
331
|
+
animation: sp-spin 0.6s linear infinite;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
/* ---- Badge bounce ---- */
|
|
335
|
+
|
|
336
|
+
@keyframes sp-badge-in {
|
|
337
|
+
0% { transform: scale(0); }
|
|
338
|
+
60% { transform: scale(1.3); }
|
|
339
|
+
100% { transform: scale(1); }
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.sp-fab-badge {
|
|
343
|
+
animation: sp-badge-in 0.4s ${Ce} both;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
/* ---- Reduced motion ---- */
|
|
347
|
+
|
|
348
|
+
@media (prefers-reduced-motion: reduce) {
|
|
349
|
+
*, *::before, *::after {
|
|
350
|
+
animation-duration: 0.01ms !important;
|
|
351
|
+
animation-iteration-count: 1 !important;
|
|
352
|
+
transition-duration: 0.01ms !important;
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
`;function Te(t){return`
|
|
357
|
+
:host {
|
|
358
|
+
all: initial;
|
|
359
|
+
position: fixed;
|
|
360
|
+
z-index: 2147483647;
|
|
361
|
+
font-family: var(--sp-font);
|
|
362
|
+
font-size: 14px;
|
|
363
|
+
line-height: 1.5;
|
|
364
|
+
color: var(--sp-text);
|
|
365
|
+
-webkit-font-smoothing: antialiased;
|
|
366
|
+
-moz-osx-font-smoothing: grayscale;
|
|
367
|
+
${Qe(t)}
|
|
368
|
+
|
|
369
|
+
/* Identity modal \u2014 theme-aware backdrop + panel */
|
|
370
|
+
--sp-identity-bg: ${t.glassBgHeavy};
|
|
371
|
+
--sp-identity-overlay: ${t.bg==="#ffffff"?"rgba(15, 23, 42, 0.2)":"rgba(0, 0, 0, 0.4)"};
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
*, *::before, *::after {
|
|
375
|
+
box-sizing: border-box;
|
|
376
|
+
margin: 0;
|
|
377
|
+
padding: 0;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
/* ============================
|
|
381
|
+
Focus visible (accessibility)
|
|
382
|
+
============================ */
|
|
383
|
+
|
|
384
|
+
:focus-visible {
|
|
385
|
+
outline: 2px solid var(--sp-accent);
|
|
386
|
+
outline-offset: 2px;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
/* ============================
|
|
390
|
+
FAB (Floating Action Button)
|
|
391
|
+
============================ */
|
|
392
|
+
|
|
393
|
+
.sp-fab {
|
|
394
|
+
position: fixed;
|
|
395
|
+
width: 52px;
|
|
396
|
+
height: 52px;
|
|
397
|
+
border-radius: var(--sp-radius-full);
|
|
398
|
+
background: var(--sp-accent-gradient);
|
|
399
|
+
color: #fff;
|
|
400
|
+
border: none;
|
|
401
|
+
cursor: pointer;
|
|
402
|
+
display: flex;
|
|
403
|
+
align-items: center;
|
|
404
|
+
justify-content: center;
|
|
405
|
+
box-shadow:
|
|
406
|
+
0 4px 20px var(--sp-accent-glow),
|
|
407
|
+
0 2px 8px rgba(0, 0, 0, 0.08);
|
|
408
|
+
transition:
|
|
409
|
+
transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
410
|
+
box-shadow 0.3s ease;
|
|
411
|
+
outline: none;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.sp-fab:focus-visible {
|
|
415
|
+
outline: 2px solid #fff;
|
|
416
|
+
outline-offset: 3px;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.sp-fab:hover {
|
|
420
|
+
transform: translateY(-2px) scale(1.05);
|
|
421
|
+
box-shadow:
|
|
422
|
+
0 8px 28px var(--sp-accent-glow),
|
|
423
|
+
0 4px 12px rgba(0, 0, 0, 0.1);
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.sp-fab:active {
|
|
427
|
+
transform: translateY(0) scale(0.95);
|
|
428
|
+
transition-duration: 0.1s;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.sp-fab--bottom-right {
|
|
432
|
+
bottom: 24px;
|
|
433
|
+
right: 24px;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.sp-fab--bottom-left {
|
|
437
|
+
bottom: 24px;
|
|
438
|
+
left: 24px;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
.sp-fab svg {
|
|
442
|
+
width: 22px;
|
|
443
|
+
height: 22px;
|
|
444
|
+
fill: currentColor;
|
|
445
|
+
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
/* ---- FAB Badge ---- */
|
|
449
|
+
|
|
450
|
+
.sp-fab-badge {
|
|
451
|
+
position: absolute;
|
|
452
|
+
top: -4px;
|
|
453
|
+
right: -4px;
|
|
454
|
+
min-width: 20px;
|
|
455
|
+
height: 20px;
|
|
456
|
+
padding: 0 6px;
|
|
457
|
+
border-radius: var(--sp-radius-full);
|
|
458
|
+
background: #ef4444;
|
|
459
|
+
color: #fff;
|
|
460
|
+
font-size: 11px;
|
|
461
|
+
font-weight: 700;
|
|
462
|
+
display: flex;
|
|
463
|
+
align-items: center;
|
|
464
|
+
justify-content: center;
|
|
465
|
+
border: 2px solid #fff;
|
|
466
|
+
pointer-events: none;
|
|
467
|
+
font-family: var(--sp-font);
|
|
468
|
+
line-height: 1;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
/* ============================
|
|
472
|
+
Radial Menu
|
|
473
|
+
============================ */
|
|
474
|
+
|
|
475
|
+
.sp-radial {
|
|
476
|
+
position: fixed;
|
|
477
|
+
pointer-events: none;
|
|
478
|
+
width: 52px;
|
|
479
|
+
height: 52px;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.sp-radial--bottom-right {
|
|
483
|
+
bottom: 24px;
|
|
484
|
+
right: 24px;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.sp-radial--bottom-left {
|
|
488
|
+
bottom: 24px;
|
|
489
|
+
left: 24px;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.sp-radial-item {
|
|
493
|
+
position: absolute;
|
|
494
|
+
left: 4px;
|
|
495
|
+
bottom: 4px;
|
|
496
|
+
width: 44px;
|
|
497
|
+
height: 44px;
|
|
498
|
+
border-radius: var(--sp-radius-full);
|
|
499
|
+
background: var(--sp-glass-bg-heavy);
|
|
500
|
+
backdrop-filter: blur(var(--sp-blur));
|
|
501
|
+
-webkit-backdrop-filter: blur(var(--sp-blur));
|
|
502
|
+
color: var(--sp-text);
|
|
503
|
+
border: 1px solid var(--sp-glass-border);
|
|
504
|
+
cursor: pointer;
|
|
505
|
+
display: flex;
|
|
506
|
+
align-items: center;
|
|
507
|
+
justify-content: center;
|
|
508
|
+
box-shadow: var(--sp-shadow-md);
|
|
509
|
+
font-size: 12px;
|
|
510
|
+
font-weight: 600;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
.sp-radial-item:hover,
|
|
514
|
+
.sp-radial-item:focus-visible {
|
|
515
|
+
background: rgba(255, 255, 255, 0.95);
|
|
516
|
+
border-color: var(--sp-accent);
|
|
517
|
+
color: var(--sp-accent);
|
|
518
|
+
box-shadow:
|
|
519
|
+
var(--sp-shadow-md),
|
|
520
|
+
0 0 0 3px var(--sp-accent-light);
|
|
521
|
+
outline: none;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
.sp-radial-item svg {
|
|
525
|
+
width: 18px;
|
|
526
|
+
height: 18px;
|
|
527
|
+
flex-shrink: 0;
|
|
528
|
+
stroke: currentColor;
|
|
529
|
+
fill: none;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.sp-radial-label {
|
|
533
|
+
white-space: nowrap;
|
|
534
|
+
font-size: 12px;
|
|
535
|
+
font-weight: 500;
|
|
536
|
+
color: var(--sp-text);
|
|
537
|
+
pointer-events: none;
|
|
538
|
+
opacity: 0;
|
|
539
|
+
padding: 4px 12px;
|
|
540
|
+
border-radius: var(--sp-radius);
|
|
541
|
+
background: var(--sp-glass-bg-heavy);
|
|
542
|
+
backdrop-filter: blur(12px);
|
|
543
|
+
-webkit-backdrop-filter: blur(12px);
|
|
544
|
+
border: 1px solid var(--sp-glass-border);
|
|
545
|
+
box-shadow: var(--sp-shadow-sm);
|
|
546
|
+
transform: translateX(4px);
|
|
547
|
+
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.sp-radial-item:hover .sp-radial-label,
|
|
551
|
+
.sp-radial-item:focus-visible .sp-radial-label {
|
|
552
|
+
opacity: 1;
|
|
553
|
+
transform: translateX(0);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
/* ============================
|
|
557
|
+
Panel (Side drawer)
|
|
558
|
+
============================ */
|
|
559
|
+
|
|
560
|
+
.sp-panel {
|
|
561
|
+
position: fixed;
|
|
562
|
+
top: 0;
|
|
563
|
+
right: 0;
|
|
564
|
+
width: 400px;
|
|
565
|
+
max-width: 100vw;
|
|
566
|
+
height: 100vh;
|
|
567
|
+
height: 100dvh;
|
|
568
|
+
background: var(--sp-glass-bg);
|
|
569
|
+
backdrop-filter: blur(var(--sp-blur-heavy));
|
|
570
|
+
-webkit-backdrop-filter: blur(var(--sp-blur-heavy));
|
|
571
|
+
border-left: 1px solid var(--sp-glass-border);
|
|
572
|
+
box-shadow: var(--sp-shadow-xl);
|
|
573
|
+
display: flex;
|
|
574
|
+
flex-direction: column;
|
|
575
|
+
overflow: hidden;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
@media (max-width: 480px) {
|
|
579
|
+
.sp-panel {
|
|
580
|
+
width: 100vw;
|
|
581
|
+
border-left: none;
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
.sp-panel-header {
|
|
586
|
+
display: flex;
|
|
587
|
+
align-items: center;
|
|
588
|
+
justify-content: space-between;
|
|
589
|
+
padding: 20px 24px;
|
|
590
|
+
border-bottom: 1px solid var(--sp-border);
|
|
591
|
+
background: var(--sp-glass-bg-heavy);
|
|
592
|
+
backdrop-filter: blur(var(--sp-blur));
|
|
593
|
+
-webkit-backdrop-filter: blur(var(--sp-blur));
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.sp-panel-title {
|
|
597
|
+
font-size: 17px;
|
|
598
|
+
font-weight: 700;
|
|
599
|
+
color: var(--sp-text);
|
|
600
|
+
letter-spacing: -0.02em;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
.sp-panel-close {
|
|
604
|
+
width: 44px;
|
|
605
|
+
height: 44px;
|
|
606
|
+
border-radius: var(--sp-radius);
|
|
607
|
+
border: none;
|
|
608
|
+
background: transparent;
|
|
609
|
+
cursor: pointer;
|
|
610
|
+
display: flex;
|
|
611
|
+
align-items: center;
|
|
612
|
+
justify-content: center;
|
|
613
|
+
color: var(--sp-text-tertiary);
|
|
614
|
+
transition: all 0.2s ease;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.sp-panel-close:hover {
|
|
618
|
+
background: var(--sp-bg-hover);
|
|
619
|
+
color: var(--sp-text);
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
.sp-panel-close svg {
|
|
623
|
+
width: 16px;
|
|
624
|
+
height: 16px;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
/* ============================
|
|
628
|
+
Filters & Search
|
|
629
|
+
============================ */
|
|
630
|
+
|
|
631
|
+
.sp-filters {
|
|
632
|
+
padding: 16px 24px;
|
|
633
|
+
border-bottom: 1px solid var(--sp-border);
|
|
634
|
+
background: var(--sp-glass-bg-heavy);
|
|
635
|
+
backdrop-filter: blur(var(--sp-blur));
|
|
636
|
+
-webkit-backdrop-filter: blur(var(--sp-blur));
|
|
637
|
+
position: sticky;
|
|
638
|
+
top: 0;
|
|
639
|
+
z-index: 1;
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
.sp-search-wrap {
|
|
643
|
+
position: relative;
|
|
644
|
+
margin-bottom: 12px;
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
.sp-search {
|
|
648
|
+
width: 100%;
|
|
649
|
+
height: 40px;
|
|
650
|
+
padding: 0 12px 0 38px;
|
|
651
|
+
border-radius: var(--sp-radius);
|
|
652
|
+
border: 1px solid var(--sp-border);
|
|
653
|
+
background: var(--sp-glass-bg-heavy);
|
|
654
|
+
color: var(--sp-text);
|
|
655
|
+
font-family: var(--sp-font);
|
|
656
|
+
font-size: 13px;
|
|
657
|
+
outline: none;
|
|
658
|
+
transition: all 0.2s ease;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
.sp-search::placeholder {
|
|
662
|
+
color: var(--sp-text-tertiary);
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
.sp-search:focus {
|
|
666
|
+
border-color: var(--sp-accent);
|
|
667
|
+
box-shadow: 0 0 0 3px var(--sp-accent-light);
|
|
668
|
+
background: #fff;
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
.sp-search-icon {
|
|
672
|
+
position: absolute;
|
|
673
|
+
left: 12px;
|
|
674
|
+
top: 50%;
|
|
675
|
+
transform: translateY(-50%);
|
|
676
|
+
color: var(--sp-text-tertiary);
|
|
677
|
+
width: 16px;
|
|
678
|
+
height: 16px;
|
|
679
|
+
transition: color 0.2s ease;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
.sp-search:focus ~ .sp-search-icon,
|
|
683
|
+
.sp-search-wrap:focus-within .sp-search-icon {
|
|
684
|
+
color: var(--sp-accent);
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
.sp-chips {
|
|
688
|
+
display: flex;
|
|
689
|
+
gap: 6px;
|
|
690
|
+
flex-wrap: wrap;
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
.sp-chip {
|
|
694
|
+
padding: 5px 14px;
|
|
695
|
+
border-radius: var(--sp-radius-full);
|
|
696
|
+
border: 1px solid var(--sp-border);
|
|
697
|
+
background: var(--sp-glass-bg-heavy);
|
|
698
|
+
color: var(--sp-text-secondary);
|
|
699
|
+
font-family: var(--sp-font);
|
|
700
|
+
font-size: 12px;
|
|
701
|
+
font-weight: 500;
|
|
702
|
+
cursor: pointer;
|
|
703
|
+
transition: all 0.2s ease;
|
|
704
|
+
white-space: nowrap;
|
|
705
|
+
letter-spacing: 0.01em;
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
.sp-chip:hover {
|
|
709
|
+
border-color: var(--sp-accent);
|
|
710
|
+
color: var(--sp-accent);
|
|
711
|
+
background: var(--sp-accent-light);
|
|
712
|
+
}
|
|
713
|
+
|
|
714
|
+
.sp-chip--active {
|
|
715
|
+
background: var(--sp-accent-gradient);
|
|
716
|
+
border-color: transparent;
|
|
717
|
+
color: #fff;
|
|
718
|
+
box-shadow: 0 2px 8px var(--sp-accent-glow);
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
.sp-chip--active:hover {
|
|
722
|
+
background: var(--sp-accent-gradient);
|
|
723
|
+
border-color: transparent;
|
|
724
|
+
color: #fff;
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
/* ============================
|
|
728
|
+
Feedback Cards
|
|
729
|
+
============================ */
|
|
730
|
+
|
|
731
|
+
.sp-list {
|
|
732
|
+
flex: 1;
|
|
733
|
+
overflow-y: auto;
|
|
734
|
+
padding: 8px 12px;
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
.sp-list::-webkit-scrollbar {
|
|
738
|
+
width: 6px;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.sp-list::-webkit-scrollbar-track {
|
|
742
|
+
background: transparent;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
.sp-list::-webkit-scrollbar-thumb {
|
|
746
|
+
background: var(--sp-border);
|
|
747
|
+
border-radius: var(--sp-radius-full);
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
.sp-list::-webkit-scrollbar-thumb:hover {
|
|
751
|
+
background: var(--sp-text-tertiary);
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
.sp-card {
|
|
755
|
+
display: flex;
|
|
756
|
+
padding: 14px 16px;
|
|
757
|
+
margin-bottom: 6px;
|
|
758
|
+
cursor: pointer;
|
|
759
|
+
border-radius: var(--sp-radius);
|
|
760
|
+
background: var(--sp-glass-bg-heavy);
|
|
761
|
+
border: 1px solid var(--sp-glass-border);
|
|
762
|
+
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
.sp-card:hover {
|
|
766
|
+
background: #fff;
|
|
767
|
+
border-color: var(--sp-border);
|
|
768
|
+
box-shadow: var(--sp-shadow-md);
|
|
769
|
+
transform: translateY(-2px);
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
.sp-card:active {
|
|
773
|
+
transform: translateY(0) scale(0.99);
|
|
774
|
+
transition-duration: 0.1s;
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
.sp-card-bar {
|
|
778
|
+
width: 3px;
|
|
779
|
+
border-radius: var(--sp-radius-full);
|
|
780
|
+
margin-right: 14px;
|
|
781
|
+
flex-shrink: 0;
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
.sp-card-body {
|
|
785
|
+
flex: 1;
|
|
786
|
+
min-width: 0;
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
.sp-card-header {
|
|
790
|
+
display: flex;
|
|
791
|
+
align-items: center;
|
|
792
|
+
gap: 8px;
|
|
793
|
+
margin-bottom: 6px;
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
.sp-card-number {
|
|
797
|
+
font-size: 12px;
|
|
798
|
+
font-weight: 700;
|
|
799
|
+
color: var(--sp-text-tertiary);
|
|
800
|
+
font-variant-numeric: tabular-nums;
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
.sp-badge {
|
|
804
|
+
padding: 2px 10px;
|
|
805
|
+
border-radius: var(--sp-radius-full);
|
|
806
|
+
font-size: 11px;
|
|
807
|
+
font-weight: 600;
|
|
808
|
+
letter-spacing: 0.02em;
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
.sp-card-date {
|
|
812
|
+
font-size: 11px;
|
|
813
|
+
color: var(--sp-text-tertiary);
|
|
814
|
+
margin-left: auto;
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
.sp-card-message {
|
|
818
|
+
font-size: 13px;
|
|
819
|
+
line-height: 1.5;
|
|
820
|
+
color: var(--sp-text);
|
|
821
|
+
display: -webkit-box;
|
|
822
|
+
-webkit-line-clamp: 3;
|
|
823
|
+
-webkit-box-orient: vertical;
|
|
824
|
+
overflow: hidden;
|
|
825
|
+
}
|
|
826
|
+
|
|
827
|
+
.sp-card-message--expanded {
|
|
828
|
+
-webkit-line-clamp: unset;
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
.sp-card-expand {
|
|
832
|
+
font-size: 12px;
|
|
833
|
+
font-weight: 500;
|
|
834
|
+
color: var(--sp-accent);
|
|
835
|
+
cursor: pointer;
|
|
836
|
+
background: none;
|
|
837
|
+
border: none;
|
|
838
|
+
padding: 4px 0;
|
|
839
|
+
font-family: var(--sp-font);
|
|
840
|
+
transition: opacity 0.15s ease;
|
|
841
|
+
}
|
|
842
|
+
|
|
843
|
+
.sp-card-expand:hover {
|
|
844
|
+
opacity: 0.8;
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
.sp-card-footer {
|
|
848
|
+
display: flex;
|
|
849
|
+
align-items: center;
|
|
850
|
+
justify-content: flex-end;
|
|
851
|
+
gap: 6px;
|
|
852
|
+
margin-top: 10px;
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
.sp-btn-resolve,
|
|
856
|
+
.sp-btn-delete {
|
|
857
|
+
padding: 8px 14px;
|
|
858
|
+
border-radius: var(--sp-radius-full);
|
|
859
|
+
border: 1px solid var(--sp-border);
|
|
860
|
+
background: transparent;
|
|
861
|
+
color: var(--sp-text-secondary);
|
|
862
|
+
font-family: var(--sp-font);
|
|
863
|
+
font-size: 12px;
|
|
864
|
+
font-weight: 500;
|
|
865
|
+
cursor: pointer;
|
|
866
|
+
display: flex;
|
|
867
|
+
align-items: center;
|
|
868
|
+
gap: 4px;
|
|
869
|
+
transition: all 0.2s ease;
|
|
870
|
+
}
|
|
871
|
+
|
|
872
|
+
.sp-btn-resolve svg,
|
|
873
|
+
.sp-btn-delete svg {
|
|
874
|
+
width: 14px;
|
|
875
|
+
height: 14px;
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
.sp-btn-resolve:hover {
|
|
879
|
+
border-color: #22c55e;
|
|
880
|
+
color: #22c55e;
|
|
881
|
+
background: rgba(34, 197, 94, 0.06);
|
|
882
|
+
}
|
|
883
|
+
|
|
884
|
+
.sp-btn-delete:hover {
|
|
885
|
+
border-color: #ef4444;
|
|
886
|
+
color: #ef4444;
|
|
887
|
+
background: rgba(239, 68, 68, 0.06);
|
|
888
|
+
}
|
|
889
|
+
|
|
890
|
+
.sp-btn-resolve:disabled,
|
|
891
|
+
.sp-btn-delete:disabled {
|
|
892
|
+
opacity: 0.5;
|
|
893
|
+
cursor: not-allowed;
|
|
894
|
+
pointer-events: none;
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
/* ---- Delete All (header) ---- */
|
|
898
|
+
|
|
899
|
+
.sp-panel-header-right {
|
|
900
|
+
display: flex;
|
|
901
|
+
align-items: center;
|
|
902
|
+
gap: 8px;
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
.sp-btn-delete-all {
|
|
906
|
+
padding: 5px 12px;
|
|
907
|
+
border-radius: var(--sp-radius-full);
|
|
908
|
+
border: 1px solid var(--sp-border);
|
|
909
|
+
background: transparent;
|
|
910
|
+
color: var(--sp-text-tertiary);
|
|
911
|
+
font-family: var(--sp-font);
|
|
912
|
+
font-size: 11px;
|
|
913
|
+
font-weight: 500;
|
|
914
|
+
cursor: pointer;
|
|
915
|
+
display: flex;
|
|
916
|
+
align-items: center;
|
|
917
|
+
gap: 4px;
|
|
918
|
+
transition: all 0.2s ease;
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
.sp-btn-delete-all svg {
|
|
922
|
+
width: 13px;
|
|
923
|
+
height: 13px;
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
.sp-btn-delete-all:hover {
|
|
927
|
+
border-color: #ef4444;
|
|
928
|
+
color: #ef4444;
|
|
929
|
+
background: rgba(239, 68, 68, 0.06);
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
.sp-btn-delete-all:disabled {
|
|
933
|
+
opacity: 0.5;
|
|
934
|
+
cursor: not-allowed;
|
|
935
|
+
pointer-events: none;
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
/* ---- Confirm Dialog ---- */
|
|
939
|
+
|
|
940
|
+
.sp-confirm-backdrop {
|
|
941
|
+
position: fixed;
|
|
942
|
+
inset: 0;
|
|
943
|
+
background: var(--sp-backdrop, rgba(15, 23, 42, 0.2));
|
|
944
|
+
backdrop-filter: blur(var(--sp-blur));
|
|
945
|
+
-webkit-backdrop-filter: blur(var(--sp-blur));
|
|
946
|
+
display: flex;
|
|
947
|
+
align-items: center;
|
|
948
|
+
justify-content: center;
|
|
949
|
+
z-index: 2147483647;
|
|
950
|
+
opacity: 0;
|
|
951
|
+
transition: opacity 0.2s ease;
|
|
952
|
+
}
|
|
953
|
+
|
|
954
|
+
.sp-confirm-dialog {
|
|
955
|
+
width: 340px;
|
|
956
|
+
padding: 28px;
|
|
957
|
+
border-radius: 20px;
|
|
958
|
+
background: var(--sp-glass-bg-heavy);
|
|
959
|
+
backdrop-filter: blur(var(--sp-blur-heavy));
|
|
960
|
+
-webkit-backdrop-filter: blur(var(--sp-blur-heavy));
|
|
961
|
+
border: 1px solid var(--sp-glass-border);
|
|
962
|
+
box-shadow: var(--sp-shadow-xl);
|
|
963
|
+
font-family: var(--sp-font);
|
|
964
|
+
transform: translateY(8px) scale(0.97);
|
|
965
|
+
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
966
|
+
}
|
|
967
|
+
|
|
968
|
+
.sp-confirm-title {
|
|
969
|
+
font-size: 17px;
|
|
970
|
+
font-weight: 700;
|
|
971
|
+
color: var(--sp-text);
|
|
972
|
+
letter-spacing: -0.02em;
|
|
973
|
+
margin-bottom: 8px;
|
|
974
|
+
}
|
|
975
|
+
|
|
976
|
+
.sp-confirm-message {
|
|
977
|
+
font-size: 14px;
|
|
978
|
+
color: var(--sp-text-secondary);
|
|
979
|
+
line-height: 1.5;
|
|
980
|
+
margin-bottom: 20px;
|
|
981
|
+
}
|
|
982
|
+
|
|
983
|
+
.sp-confirm-actions {
|
|
984
|
+
display: flex;
|
|
985
|
+
gap: 8px;
|
|
986
|
+
justify-content: flex-end;
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
.sp-btn-danger {
|
|
990
|
+
height: 40px;
|
|
991
|
+
padding: 0 22px;
|
|
992
|
+
border-radius: var(--sp-radius);
|
|
993
|
+
border: none;
|
|
994
|
+
background: #ef4444;
|
|
995
|
+
color: #fff;
|
|
996
|
+
font-family: var(--sp-font);
|
|
997
|
+
font-size: 14px;
|
|
998
|
+
font-weight: 600;
|
|
999
|
+
cursor: pointer;
|
|
1000
|
+
transition: all 0.2s ease;
|
|
1001
|
+
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
|
|
1002
|
+
}
|
|
1003
|
+
|
|
1004
|
+
.sp-btn-danger:hover {
|
|
1005
|
+
background: #dc2626;
|
|
1006
|
+
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
|
|
1007
|
+
transform: translateY(-1px);
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
.sp-btn-danger:active {
|
|
1011
|
+
transform: translateY(0) scale(0.98);
|
|
1012
|
+
transition-duration: 0.1s;
|
|
1013
|
+
}
|
|
1014
|
+
|
|
1015
|
+
.sp-card--resolved {
|
|
1016
|
+
opacity: 0.5;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
.sp-card--resolved .sp-card-message {
|
|
1020
|
+
text-decoration: line-through;
|
|
1021
|
+
text-decoration-color: var(--sp-text-tertiary);
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
/* ============================
|
|
1025
|
+
Loading State
|
|
1026
|
+
============================ */
|
|
1027
|
+
|
|
1028
|
+
.sp-loading {
|
|
1029
|
+
display: flex;
|
|
1030
|
+
align-items: center;
|
|
1031
|
+
justify-content: center;
|
|
1032
|
+
padding: 48px 24px;
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
/* ============================
|
|
1036
|
+
Identity Form
|
|
1037
|
+
============================ */
|
|
1038
|
+
|
|
1039
|
+
.sp-identity-title {
|
|
1040
|
+
font-size: 17px;
|
|
1041
|
+
font-weight: 700;
|
|
1042
|
+
color: var(--sp-text);
|
|
1043
|
+
letter-spacing: -0.02em;
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
.sp-input {
|
|
1047
|
+
width: 100%;
|
|
1048
|
+
height: 42px;
|
|
1049
|
+
padding: 0 14px;
|
|
1050
|
+
border-radius: var(--sp-radius);
|
|
1051
|
+
border: 1px solid var(--sp-border);
|
|
1052
|
+
background: var(--sp-glass-bg-heavy);
|
|
1053
|
+
color: var(--sp-text);
|
|
1054
|
+
font-family: var(--sp-font);
|
|
1055
|
+
font-size: 14px;
|
|
1056
|
+
outline: none;
|
|
1057
|
+
transition: all 0.2s ease;
|
|
1058
|
+
}
|
|
1059
|
+
|
|
1060
|
+
.sp-input::placeholder {
|
|
1061
|
+
color: var(--sp-text-tertiary);
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
.sp-input:focus {
|
|
1065
|
+
border-color: var(--sp-accent);
|
|
1066
|
+
box-shadow: 0 0 0 3px var(--sp-accent-light);
|
|
1067
|
+
background: #fff;
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
.sp-input-label {
|
|
1071
|
+
font-size: 13px;
|
|
1072
|
+
font-weight: 500;
|
|
1073
|
+
color: var(--sp-text-secondary);
|
|
1074
|
+
margin-bottom: 6px;
|
|
1075
|
+
display: block;
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1078
|
+
/* ============================
|
|
1079
|
+
Buttons
|
|
1080
|
+
============================ */
|
|
1081
|
+
|
|
1082
|
+
.sp-btn-primary {
|
|
1083
|
+
height: 40px;
|
|
1084
|
+
padding: 0 22px;
|
|
1085
|
+
border-radius: var(--sp-radius);
|
|
1086
|
+
border: none;
|
|
1087
|
+
background: var(--sp-accent-gradient);
|
|
1088
|
+
color: #fff;
|
|
1089
|
+
font-family: var(--sp-font);
|
|
1090
|
+
font-size: 14px;
|
|
1091
|
+
font-weight: 600;
|
|
1092
|
+
cursor: pointer;
|
|
1093
|
+
transition: all 0.2s ease;
|
|
1094
|
+
box-shadow: 0 2px 8px var(--sp-accent-glow);
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
.sp-btn-primary:hover {
|
|
1098
|
+
box-shadow: 0 4px 16px var(--sp-accent-glow);
|
|
1099
|
+
transform: translateY(-1px);
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
.sp-btn-primary:active {
|
|
1103
|
+
transform: translateY(0) scale(0.98);
|
|
1104
|
+
transition-duration: 0.1s;
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
.sp-btn-primary:disabled {
|
|
1108
|
+
opacity: 0.4;
|
|
1109
|
+
cursor: not-allowed;
|
|
1110
|
+
transform: none;
|
|
1111
|
+
box-shadow: none;
|
|
1112
|
+
}
|
|
1113
|
+
|
|
1114
|
+
.sp-btn-ghost {
|
|
1115
|
+
height: 40px;
|
|
1116
|
+
padding: 0 22px;
|
|
1117
|
+
border-radius: var(--sp-radius);
|
|
1118
|
+
border: 1px solid var(--sp-border);
|
|
1119
|
+
background: var(--sp-glass-bg-heavy);
|
|
1120
|
+
color: var(--sp-text-secondary);
|
|
1121
|
+
font-family: var(--sp-font);
|
|
1122
|
+
font-size: 14px;
|
|
1123
|
+
font-weight: 500;
|
|
1124
|
+
cursor: pointer;
|
|
1125
|
+
transition: all 0.2s ease;
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
.sp-btn-ghost:hover {
|
|
1129
|
+
border-color: var(--sp-accent);
|
|
1130
|
+
color: var(--sp-accent);
|
|
1131
|
+
background: var(--sp-accent-light);
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
/* ============================
|
|
1135
|
+
Empty State
|
|
1136
|
+
============================ */
|
|
1137
|
+
|
|
1138
|
+
.sp-empty {
|
|
1139
|
+
display: flex;
|
|
1140
|
+
flex-direction: column;
|
|
1141
|
+
align-items: center;
|
|
1142
|
+
justify-content: center;
|
|
1143
|
+
padding: 56px 24px;
|
|
1144
|
+
color: var(--sp-text-tertiary);
|
|
1145
|
+
text-align: center;
|
|
1146
|
+
gap: 8px;
|
|
1147
|
+
animation: sp-fade-in 0.3s ease-out both;
|
|
1148
|
+
}
|
|
1149
|
+
|
|
1150
|
+
.sp-empty-text {
|
|
1151
|
+
font-size: 14px;
|
|
1152
|
+
font-weight: 500;
|
|
1153
|
+
}
|
|
1154
|
+
|
|
1155
|
+
/* ============================
|
|
1156
|
+
Forced Colors / High Contrast
|
|
1157
|
+
============================ */
|
|
1158
|
+
|
|
1159
|
+
@media (forced-colors: active) {
|
|
1160
|
+
.sp-fab,
|
|
1161
|
+
.sp-radial-item,
|
|
1162
|
+
.sp-chip,
|
|
1163
|
+
.sp-card,
|
|
1164
|
+
.sp-panel-close,
|
|
1165
|
+
.sp-search,
|
|
1166
|
+
.sp-btn-resolve,
|
|
1167
|
+
.sp-btn-delete,
|
|
1168
|
+
.sp-btn-delete-all,
|
|
1169
|
+
.sp-btn-primary,
|
|
1170
|
+
.sp-btn-ghost,
|
|
1171
|
+
.sp-btn-danger,
|
|
1172
|
+
.sp-card-expand,
|
|
1173
|
+
.sp-input,
|
|
1174
|
+
.sp-confirm-dialog {
|
|
1175
|
+
border: 2px solid ButtonText !important;
|
|
1176
|
+
background: Canvas !important;
|
|
1177
|
+
color: ButtonText !important;
|
|
1178
|
+
}
|
|
1179
|
+
|
|
1180
|
+
.sp-fab:focus-visible,
|
|
1181
|
+
.sp-radial-item:focus-visible,
|
|
1182
|
+
.sp-chip:focus-visible,
|
|
1183
|
+
.sp-panel-close:focus-visible,
|
|
1184
|
+
.sp-btn-resolve:focus-visible,
|
|
1185
|
+
.sp-btn-delete:focus-visible,
|
|
1186
|
+
.sp-btn-delete-all:focus-visible,
|
|
1187
|
+
.sp-btn-primary:focus-visible,
|
|
1188
|
+
.sp-btn-ghost:focus-visible,
|
|
1189
|
+
.sp-btn-danger:focus-visible,
|
|
1190
|
+
.sp-card-expand:focus-visible,
|
|
1191
|
+
.sp-input:focus-visible,
|
|
1192
|
+
.sp-search:focus-visible {
|
|
1193
|
+
outline: 3px solid Highlight !important;
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
.sp-panel {
|
|
1197
|
+
border: 2px solid ButtonText !important;
|
|
1198
|
+
}
|
|
1199
|
+
|
|
1200
|
+
.sp-fab-badge {
|
|
1201
|
+
border: 2px solid ButtonText !important;
|
|
1202
|
+
background: Canvas !important;
|
|
1203
|
+
color: ButtonText !important;
|
|
1204
|
+
}
|
|
1205
|
+
|
|
1206
|
+
.sp-card-bar {
|
|
1207
|
+
background: ButtonText !important;
|
|
1208
|
+
}
|
|
1209
|
+
}
|
|
1210
|
+
|
|
1211
|
+
${ct}
|
|
1212
|
+
`}var Xt=120,Gt=80,re=class{constructor(e,n="fr"){this.colors=e;this.locale=n;this.root=h("div",{style:`
|
|
1213
|
+
position: fixed;
|
|
1214
|
+
z-index: 2147483647;
|
|
1215
|
+
max-width: 280px;
|
|
1216
|
+
padding: 12px 14px;
|
|
1217
|
+
border-radius: 14px;
|
|
1218
|
+
background: ${this.colors.glassBgHeavy};
|
|
1219
|
+
backdrop-filter: blur(24px);
|
|
1220
|
+
-webkit-backdrop-filter: blur(24px);
|
|
1221
|
+
border: 1px solid ${this.colors.glassBorder};
|
|
1222
|
+
box-shadow: 0 8px 32px ${this.colors.shadow}, 0 2px 8px ${this.colors.shadow};
|
|
1223
|
+
font-family: "Inter", system-ui, -apple-system, sans-serif;
|
|
1224
|
+
pointer-events: auto;
|
|
1225
|
+
opacity: 0;
|
|
1226
|
+
transform: translateY(6px) scale(0.97);
|
|
1227
|
+
transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
1228
|
+
visibility: hidden;
|
|
1229
|
+
-webkit-font-smoothing: antialiased;
|
|
1230
|
+
`}),this.root.setAttribute("role","tooltip"),this.root.id=this.tooltipId,this.arrow=h("div",{style:`
|
|
1231
|
+
position: absolute;
|
|
1232
|
+
width: 12px;
|
|
1233
|
+
height: 12px;
|
|
1234
|
+
background: ${this.colors.glassBgHeavy};
|
|
1235
|
+
border: 1px solid ${this.colors.glassBorder};
|
|
1236
|
+
transform: rotate(45deg);
|
|
1237
|
+
pointer-events: none;
|
|
1238
|
+
`}),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 i=typeof window<"u"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;this.root.style.transition=i?"none":"",this.root.style.visibility="visible",this.root.style.opacity="1",this.root.style.transform="translateY(0) scale(1)"},Xt))}scheduleHide(){this.cancelHide(),this.hideTimer=setTimeout(()=>this.hide(),Gt)}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){let n=Array.from(this.root.children);for(let p of n)p!==this.arrow&&p.remove();let i=I(e.type,this.colors),s=P(e.type,this.colors),o=ee(this.locale),r=B(e.type,o),a=h("div",{style:"display:flex;align-items:center;gap:8px;margin-bottom:8px;"}),l=h("span",{style:`
|
|
1239
|
+
padding:3px 10px;border-radius:9999px;
|
|
1240
|
+
font-size:11px;font-weight:600;
|
|
1241
|
+
color:${i};background:${s};
|
|
1242
|
+
letter-spacing:0.02em;
|
|
1243
|
+
`});b(l,r);let c=h("span",{style:`font-size:11px;color:${this.colors.textSecondary};margin-left:auto;`});b(c,X(e.createdAt,this.locale)),a.appendChild(l),a.appendChild(c);let d=h("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;`});b(d,e.message),this.root.insertBefore(a,this.arrow),this.root.insertBefore(d,this.arrow)}position(e){let n=this.root.getBoundingClientRect(),i=10,s=e.top-n.height-i,o=e.left+e.width/2-n.width/2,r=!0;s<8&&(s=e.bottom+i,r=!1),o=Math.max(8,Math.min(o,window.innerWidth-n.width-8)),this.root.style.top=`${s}px`,this.root.style.left=`${o}px`;let a=Math.max(16,Math.min(e.left+e.width/2-o-6,n.width-22));r?this.arrow.style.cssText=`
|
|
1244
|
+
position:absolute;
|
|
1245
|
+
width:12px;height:12px;
|
|
1246
|
+
background:${this.colors.glassBgHeavy};
|
|
1247
|
+
border-right:1px solid ${this.colors.glassBorder};
|
|
1248
|
+
border-bottom:1px solid ${this.colors.glassBorder};
|
|
1249
|
+
transform:rotate(45deg);
|
|
1250
|
+
pointer-events:none;
|
|
1251
|
+
bottom:-6px;
|
|
1252
|
+
left:${a}px;
|
|
1253
|
+
`:this.arrow.style.cssText=`
|
|
1254
|
+
position:absolute;
|
|
1255
|
+
width:12px;height:12px;
|
|
1256
|
+
background:${this.colors.glassBgHeavy};
|
|
1257
|
+
border-left:1px solid ${this.colors.glassBorder};
|
|
1258
|
+
border-top:1px solid ${this.colors.glassBorder};
|
|
1259
|
+
transform:rotate(45deg);
|
|
1260
|
+
pointer-events:none;
|
|
1261
|
+
top:-6px;
|
|
1262
|
+
left:${a}px;
|
|
1263
|
+
`}contains(e){return this.root.contains(e)}destroy(){this.cancelShow(),this.cancelHide(),this.root.remove()}};var z=null;function ae(){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"){let u="production";return console.info("[siteping] Widget not loaded: production mode detected. Use forceShow: true to override."),t.onSkip?.(u),ae()}}catch{}if(window.innerWidth<768){let u="mobile";return console.info("[siteping] Widget not loaded: viewport width < 768px (mobile not supported)."),t.onSkip?.(u),ae()}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."),ae();if(!t.projectName||typeof t.projectName!="string")return console.error("[siteping] Missing or invalid 'projectName' in config. Expected a non-empty string."),ae();let n=t.locale??"en",i=ee(n);e("Initializing widget",{projectName:t.projectName,theme:t.theme??"light",locale:n});let s=Ve(t.accentColor,t.theme),o=new O,r=new O,a=t.store?new oe(t.store,t.projectName):new J(t.endpoint,t.projectName);t.onOpen&&o.on("open",t.onOpen),t.onClose&&o.on("close",t.onClose),t.onFeedbackSent&&o.on("feedback:sent",t.onFeedbackSent),t.onError&&o.on("feedback:error",t.onError),t.onAnnotationStart&&o.on("annotation:start",t.onAnnotationStart),t.onAnnotationEnd&&o.on("annotation:end",t.onAnnotationEnd),o.on("feedback:sent",u=>r.emit("feedback:sent",u)),o.on("feedback:deleted",u=>r.emit("feedback:deleted",u)),o.on("open",()=>r.emit("panel:open")),o.on("close",()=>r.emit("panel:close")),o.on("open",()=>e("Panel opened")),o.on("close",()=>e("Panel closed")),o.on("feedback:sent",u=>e("Feedback sent",u.id)),o.on("feedback:error",u=>e("Feedback failed",u.message)),o.on("annotation:start",()=>e("Annotation started")),o.on("annotation:end",()=>e("Annotation ended"));let l=document.createElement("siteping-widget");l.style.cssText="position:fixed;z-index:2147483647;";let c=!1;try{typeof process<"u"&&process.env?.["NODE_ENV"]==="test"&&(c=!0)}catch{}let d=c?"open":"closed",p=l.attachShadow({mode:d});if("adoptedStyleSheets"in ShadowRoot.prototype){let u=new CSSStyleSheet;u.replaceSync(Te(s)),p.adoptedStyleSheets=[u]}else{let u=document.createElement("style");u.textContent=Te(s),p.appendChild(u)}document.body.appendChild(l);let m=document.createElement("div");m.setAttribute("role","status"),m.setAttribute("aria-live","polite"),m.setAttribute("aria-atomic","true"),m.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",document.body.appendChild(m);let y=new re(s,n),T=new ie(s,y,o,i),k=new Z(p,t,o,i),C=new se(p,s,o,a,t.projectName,T,i,n),v=new Q(s,o,i),g=!1,x=o.on("annotation:complete",async u=>{if(!g){g=!0;try{let{annotation:w,type:S,message:E}=u,A=nt();if(!A){if(A=await Vt(p,i),!A)return;it(A)}let L=new URL(window.location.href);for(let R of[...L.searchParams.keys()])/token|key|secret|auth|session|password|code/i.test(R)&&L.searchParams.delete(R);let _=L.toString(),pt=(()=>{try{return crypto.randomUUID()}catch{return`${Date.now()}-${Math.random().toString(36).slice(2)}`}})(),ut={projectName:t.projectName,type:S,message:E,url:_,viewport:`${window.innerWidth}x${window.innerHeight}`,userAgent:navigator.userAgent,authorName:A.name,authorEmail:A.email,annotations:[w],clientId:pt};try{let R=await a.sendFeedback(ut);o.emit("feedback:sent",R),T.addFeedback(R,T.count+1),m.textContent=i("feedback.sent.confirmation"),await C.refresh()}catch(R){o.emit("feedback:error",R instanceof Error?R:new Error(String(R))),m.textContent=i("feedback.error.message")}}finally{g=!1}}});return a.getFeedbacks(t.projectName,{limit:50}).then(({feedbacks:u})=>{T.render(u)}).catch(u=>{e("Failed to load initial markers:",u)}),t.endpoint&&Je(t.endpoint).then(()=>e("Retry queue flushed")).catch(()=>{}),z={destroy:()=>{e("Destroying widget"),x(),k.destroy(),C.destroy(),v.destroy(),T.destroy(),y.destroy(),o.removeAll(),r.removeAll(),m.remove(),l.remove(),z=null},open:()=>{C.open()},close:()=>{C.close()},refresh:()=>{C.refresh()},on:(u,w)=>r.on(u,w),off:(u,w)=>{r.off(u,w)}},z}function Vt(t,e){return new Promise(n=>{let i=t.activeElement??document.activeElement,s=document.createElement("div");s.style.cssText=`
|
|
1264
|
+
position:fixed;inset:0;
|
|
1265
|
+
background:var(--sp-identity-overlay);
|
|
1266
|
+
backdrop-filter:blur(8px);
|
|
1267
|
+
-webkit-backdrop-filter:blur(8px);
|
|
1268
|
+
display:flex;align-items:center;justify-content:center;
|
|
1269
|
+
z-index:2147483647;
|
|
1270
|
+
opacity:0;transition:opacity 0.25s ease;
|
|
1271
|
+
`;let o=document.createElement("div");o.style.cssText=`
|
|
1272
|
+
width:340px;padding:28px;border-radius:var(--sp-radius-xl);
|
|
1273
|
+
background:var(--sp-identity-bg);
|
|
1274
|
+
backdrop-filter:blur(var(--sp-blur-heavy));
|
|
1275
|
+
-webkit-backdrop-filter:blur(var(--sp-blur-heavy));
|
|
1276
|
+
border:1px solid var(--sp-glass-border);
|
|
1277
|
+
box-shadow:0 16px 48px var(--sp-shadow), 0 8px 16px var(--sp-shadow);
|
|
1278
|
+
font-family:var(--sp-font, "Inter",system-ui,-apple-system,sans-serif);
|
|
1279
|
+
color:var(--sp-text);
|
|
1280
|
+
transform:translateY(12px) scale(0.97);
|
|
1281
|
+
transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
1282
|
+
-webkit-font-smoothing:antialiased;
|
|
1283
|
+
`;let r=`sp-identity-title-${Date.now()}`;o.setAttribute("role","dialog"),o.setAttribute("aria-modal","true"),o.setAttribute("aria-labelledby",r);let a=document.createElement("div");a.className="sp-identity-title",a.id=r,a.textContent=e("identity.title"),a.style.marginBottom="20px";let l=`sp-identity-name-${Date.now()}`,c=`sp-identity-email-${Date.now()}`,d=document.createElement("label");d.className="sp-input-label",d.textContent=e("identity.nameLabel"),d.setAttribute("for",l);let p=document.createElement("input");p.className="sp-input",p.id=l,p.type="text",p.placeholder=e("identity.namePlaceholder"),p.style.marginBottom="14px";let f=document.createElement("label");f.className="sp-input-label",f.textContent=e("identity.emailLabel"),f.setAttribute("for",c);let m=document.createElement("input");m.className="sp-input",m.id=c,m.type="email",m.placeholder=e("identity.emailPlaceholder");let y=document.createElement("div");y.style.cssText="display:flex;gap:8px;justify-content:flex-end;margin-top:20px;";let T=x=>{s.removeEventListener("keydown",g),s.style.opacity="0",o.style.transform="translateY(12px) scale(0.97)",setTimeout(()=>{s.remove(),i?.focus(),n(x)},250)},k=document.createElement("button");k.className="sp-btn-ghost",k.textContent=e("identity.cancel"),k.addEventListener("click",()=>T(null));let C=document.createElement("button");C.className="sp-btn-primary",C.textContent=e("identity.submit"),C.addEventListener("click",()=>{let x=p.value.trim(),u=m.value.trim();if(!x||!u)return;if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(u)){m.style.borderColor="var(--sp-type-bug, #ef4444)";return}T({name:x,email:u})});let v='input, button, [tabindex]:not([tabindex="-1"])',g=x=>{let u=x;if(u.key==="Escape"){T(null);return}if(u.key==="Tab"){let w=Array.from(o.querySelectorAll(v));if(w.length===0)return;let S=w[0],E=w[w.length-1];if(!S||!E)return;let A=t.activeElement;u.shiftKey?(A===S||!o.contains(A))&&(u.preventDefault(),E.focus()):(A===E||!o.contains(A))&&(u.preventDefault(),S.focus())}};s.addEventListener("keydown",g),s.addEventListener("click",x=>{x.target===s&&T(null)}),y.appendChild(k),y.appendChild(C),o.appendChild(a),o.appendChild(d),o.appendChild(p),o.appendChild(f),o.appendChild(m),o.appendChild(y),s.appendChild(o),t.appendChild(s),requestAnimationFrame(()=>{s.style.opacity="1",o.style.transform="translateY(0) scale(1)",p.focus()})})}function Qt(t){return dt(t)}return yt(Jt);})();
|
|
1284
|
+
//# sourceMappingURL=index.global.js.map
|