@siteping/widget 0.9.6 → 0.9.8

package/dist/chunk-OTJZRTBK.js

@@ -0,0 +1,1751 @@
+function c(o){let s=document.createRange().createContextualFragment(o).firstElementChild;if(!s||s.nodeName.toLowerCase()!=="svg")throw new Error("[siteping] Invalid SVG string");for(let n of [...s.attributes])n.name.startsWith("on")&&s.removeAttribute(n.name);for(let n of s.querySelectorAll("*"))for(let i of [...n.attributes])i.name.startsWith("on")&&n.removeAttribute(i.name);return s}function r(o,e){let t=document.createElement(o);if(e)for(let[s,n]of Object.entries(e))s==="class"?t.className=n:s==="style"?t.style.cssText=n:t.setAttribute(s,n);return t}function a(o,e){o.textContent=e;}function L(o){let e=Array.from(o.childNodes).map(t=>t.cloneNode(true));return o.disabled=true,o.replaceChildren(r("div",{class:"sp-spinner sp-spinner--sm"})),()=>{o.replaceChildren(...e),o.disabled=false;}}function Re(o,e="en"){let t=Date.now()-new Date(o).getTime(),s=Math.floor(t/1e3);if(s<60)return new Intl.RelativeTimeFormat(e,{numeric:"auto"}).format(0,"second");let n=new Intl.RelativeTimeFormat(e,{numeric:"always",style:"narrow"}),i=Math.floor(s/60);if(i<60)return n.format(-i,"minute");let l=Math.floor(i/60);if(l<24)return n.format(-l,"hour");let d=Math.floor(l/24);return d<7?n.format(-d,"day"):new Date(o).toLocaleDateString(e)}var 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"/><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>',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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',Ne='<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>',je='<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>',_e='<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>',De='<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>',$e='<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>',Pe='<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>',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="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>',Ie='<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>',Ve='<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>',Ge='<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"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>',Ye='<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="9"/><circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/></svg>',Ke='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>',qe='<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>',Qe='<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 F="#0066ff",J=/^#[0-9a-fA-F]{6}$/,O=/^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/,Z=/^#[0-9a-fA-F]{8}$/;function ee(o){if(J.test(o))return o;let e=O.test(o)?o.match(O):null;return e?`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`:Z.test(o)?o.slice(0,7):(console.warn(`[siteping] Invalid accentColor "${o}" \u2014 only hex colors (#RGB, #RRGGBB, #RRGGBBAA) are supported. Using default.`),F)}function te(o,e){let t=Math.max(0,Math.round(parseInt(o.slice(1,3),16)*(1-e))),s=Math.max(0,Math.round(parseInt(o.slice(3,5),16)*(1-e))),n=Math.max(0,Math.round(parseInt(o.slice(5,7),16)*(1-e)));return `#${t.toString(16).padStart(2,"0")}${s.toString(16).padStart(2,"0")}${n.toString(16).padStart(2,"0")}`}function se(){return typeof window>"u"?false:window.matchMedia("(prefers-color-scheme: dark)").matches}function oe(o){return o==="dark"||o==="auto"&&se()?"dark":"light"}function Xe(o=F,e){let t=ee(o),s=te(t,.15);return oe(e)==="dark"?{accent:t,accentLight:t+"22",accentDark:s,accentGlow:t+"44",accentGradient:`linear-gradient(135deg, ${t}, ${s})`,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)",statusOpen:"#4ade80",statusOpenBg:"rgba(74, 222, 128, 0.15)",statusResolved:"#94a3b8",statusResolvedBg:"rgba(148, 163, 184, 0.15)"}:{accent:t,accentLight:t+"14",accentDark:s,accentGlow:t+"33",accentGradient:`linear-gradient(135deg, ${t}, ${s})`,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",statusOpen:"#16a34a",statusOpenBg:"#f0fdf4",statusResolved:"#64748b",statusResolvedBg:"#f1f5f9"}}function A(o,e){switch(o){case "question":return e.typeQuestion;case "change":return e.typeChange;case "bug":return e.typeBug;default:return e.typeOther}}function N(o,e){switch(o){case "question":return e.typeQuestionBg;case "change":return e.typeChangeBg;case "bug":return e.typeBugBg;default:return e.typeOtherBg}}function Je(o){return `
+    --sp-accent: ${o.accent};
+    --sp-accent-light: ${o.accentLight};
+    --sp-accent-dark: ${o.accentDark};
+    --sp-accent-glow: ${o.accentGlow};
+    --sp-accent-gradient: ${o.accentGradient};
+    --sp-bg: ${o.bg};
+    --sp-bg-hover: ${o.bgHover};
+    --sp-text: ${o.text};
+    --sp-text-secondary: ${o.textSecondary};
+    --sp-text-tertiary: ${o.textTertiary};
+    --sp-border: ${o.border};
+    --sp-shadow: ${o.shadow};
+    --sp-glass-bg: ${o.glassBg};
+    --sp-glass-bg-heavy: ${o.glassBgHeavy};
+    --sp-glass-border: ${o.glassBorder};
+    --sp-glass-border-subtle: ${o.glassBorderSubtle};
+    --sp-type-question: ${o.typeQuestion};
+    --sp-type-change: ${o.typeChange};
+    --sp-type-bug: ${o.typeBug};
+    --sp-type-other: ${o.typeOther};
+    --sp-type-question-bg: ${o.typeQuestionBg};
+    --sp-type-change-bg: ${o.typeChangeBg};
+    --sp-type-bug-bg: ${o.typeBugBg};
+    --sp-type-other-bg: ${o.typeOtherBg};
+    --sp-radius: 12px;
+    --sp-radius-lg: 16px;
+    --sp-radius-xl: 20px;
+    --sp-radius-full: 9999px;
+    --sp-blur: 20px;
+    --sp-blur-heavy: 32px;
+    --sp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+    --sp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
+    --sp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+    --sp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04);
+    --sp-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
+    --sp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  `}var j={"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","panel.loadMore":"Load more ({remaining} remaining)","panel.statusAll":"All","panel.statusOpen":"Open","panel.statusResolved":"Resolved","type.label":"Type","type.question":"Question","type.change":"Change","type.bug":"Bug","type.other":"Other","status.label":"Status","scope.label":"Scope","scope.thisPage":"This page","scope.thisType":"This type","scope.all":"All pages","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}","marker.count":"{count} feedback markers displayed","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","bulk.selectAll":"Select all","bulk.selected":"{count} selected","bulk.resolve":"Resolve","bulk.delete":"Delete","bulk.deselect":"Deselect","sort.newest":"Newest first","sort.oldest":"Oldest first","sort.byType":"By type","sort.openFirst":"Open first","sort.label":"Sort","group.byPage":"By page","group.feedbacks":"{count} feedbacks","stats.open":"Open","stats.resolved":"Resolved","stats.bugs":"Bugs","stats.progress":"{percent}% resolved","detail.back":"Back","detail.title":"Feedback #{number}","detail.status":"Status","detail.message":"Message","detail.screenshot":"Screenshot","detail.screenshotAlt":"Screenshot of the annotated area","detail.metadata":"Details","detail.annotation":"Annotation","detail.page":"Page","detail.author":"Author","detail.date":"Created","detail.viewport":"Viewport","detail.browser":"Browser","detail.resolvedAt":"Resolved at","detail.goToAnnotation":"Go to annotation","detail.element":"Element","detail.selector":"Selector","detail.position":"Position","detail.resolve":"Resolve","detail.reopen":"Reopen","detail.delete":"Delete","detail.diagnostics":"Diagnostics","detail.diagnostics.console":"Console","detail.diagnostics.network":"Failed network","detail.diagnostics.expand":"Show diagnostics","detail.diagnostics.collapse":"Hide diagnostics","detail.diagnostics.noEntries":"No entries","shortcuts.title":"Keyboard shortcuts","shortcuts.navigate":"Navigate feedbacks","shortcuts.resolve":"Resolve / Reopen","shortcuts.delete":"Delete","shortcuts.search":"Focus search","shortcuts.select":"Toggle selection","shortcuts.help":"Show shortcuts","shortcuts.close":"Close","shortcuts.hint":"Keyboard shortcuts","export.label":"Export","export.csv":"Export CSV","export.json":"Export JSON"};var w={en:j},_=new Set(["de","es","fr","it","pt","ru"]);async function st(o){let e=(o.split("-")[0]??o).toLowerCase();if(w[e])return w[e];if(!_.has(e))return null;let t;switch(e){case "de":t=await import('./de-32TXJQIE.js');break;case "es":t=await import('./es-GFAPKPTK.js');break;case "fr":t=await import('./fr-W2JZ3EUC.js');break;case "it":t=await import('./it-GASU527B.js');break;case "pt":t=await import('./pt-AYXM6FG4.js');break;case "ru":t=await import('./ru-5DW2JCKR.js');break;default:return null}let s=t[e];return s?(w[e]=s,s):null}function ot(o){let e=(o.split("-")[0]??o).toLowerCase();return e!=="en"&&!w[e]&&!_.has(e)&&console.warn(`[siteping] Unknown locale "${o}", falling back to "en"`),t=>(w[e]??w.en??{})[t]??w.en?.[t]??t}function nt(o,e){switch(o){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 o}}var ne='<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 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',re='<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"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>',ie='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H6a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2"/><path d="M16 3h2a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2"/></svg>',at=`
+  /* ============================
+     Export Button & Menu
+     ============================ */
+
+  .sp-export-btn {
+    padding: 5px 12px;
+    border-radius: var(--sp-radius-full);
+    border: 1px solid var(--sp-border);
+    background: transparent;
+    color: var(--sp-text-tertiary);
+    font-family: var(--sp-font);
+    font-size: 11px;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.2s ease;
+    position: relative;
+  }
+
+  .sp-export-btn svg {
+    width: 13px;
+    height: 13px;
+  }
+
+  .sp-export-btn:hover {
+    border-color: var(--sp-accent);
+    color: var(--sp-accent);
+    background: var(--sp-accent-light);
+  }
+
+  .sp-export-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .sp-export-menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    min-width: 180px;
+    padding: 4px;
+    border-radius: var(--sp-radius);
+    background: var(--sp-glass-bg-heavy);
+    backdrop-filter: blur(var(--sp-blur));
+    -webkit-backdrop-filter: blur(var(--sp-blur));
+    border: 1px solid var(--sp-glass-border);
+    box-shadow: var(--sp-shadow-lg);
+    z-index: 10;
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+    transition: opacity 0.15s ease, transform 0.15s ease;
+    pointer-events: none;
+  }
+
+  .sp-export-menu--open {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+  }
+
+  .sp-export-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--sp-text-secondary);
+    font-family: var(--sp-font);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    text-align: left;
+  }
+
+  .sp-export-option:hover,
+  .sp-export-option:focus-visible {
+    background: var(--sp-accent-light);
+    color: var(--sp-accent);
+  }
+
+  .sp-export-option-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .sp-export-option-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .sp-export-option-label {
+    flex: 1;
+  }
+
+  @media (forced-colors: active) {
+    .sp-export-btn,
+    .sp-export-option,
+    .sp-export-menu {
+      border: 2px solid ButtonText !important;
+      background: Canvas !important;
+      color: ButtonText !important;
+    }
+
+    .sp-export-btn:focus-visible,
+    .sp-export-option:focus-visible {
+      outline: 3px solid Highlight !important;
+    }
+  }
+`,D=["id","type","status","message","url","authorName","authorEmail","createdAt","resolvedAt","viewport"];function ae(o){return o.includes('"')||o.includes(",")||o.includes(`
+`)||o.includes("\r")?`"${o.replace(/"/g,'""')}"`:o}function le(o){let e=D.join(","),t=o.map(s=>D.map(n=>{let i=s[n];return ae(i==null?"":String(i))}).join(","));return [e,...t].join(`
+`)}function pe(o){return JSON.stringify(o,null,2)}function $(o,e,t){let s=new Blob([o],{type:t}),n=URL.createObjectURL(s),i=document.createElement("a");i.href=n,i.download=e,i.style.display="none",document.body.appendChild(i),i.click(),requestAnimationFrame(()=>{URL.revokeObjectURL(n),i.remove();});}var P=class{constructor(e,t,s){this.getFeedbacks=t;this.element=r("div",{style:"position: relative; display: inline-flex;"});let n=document.createElement("button");n.className="sp-export-btn",n.setAttribute("aria-haspopup","true"),n.setAttribute("aria-expanded","false"),n.appendChild(c(ne));let i=document.createElement("span");a(i,s("export.label")),n.appendChild(i),n.addEventListener("click",p=>{p.stopPropagation(),this.toggle();}),this.menu=r("div",{class:"sp-export-menu"}),this.menu.setAttribute("role","menu");let l=this.createOption(re,s("export.csv"),()=>{this.exportAs("csv");}),d=this.createOption(ie,s("export.json"),()=>{this.exportAs("json");});this.menu.appendChild(l),this.menu.appendChild(d),this.element.appendChild(n),this.element.appendChild(this.menu),this.onDocumentClick=p=>{this.isOpen&&!this.element.contains(p.target)&&this.close();},document.addEventListener("click",this.onDocumentClick,true);}getFeedbacks;element;menu;isOpen=false;onDocumentClick;createOption(e,t,s){let n=document.createElement("button");n.className="sp-export-option",n.setAttribute("role","menuitem");let i=r("span",{class:"sp-export-option-icon"});i.appendChild(c(e));let l=r("span",{class:"sp-export-option-label"});return a(l,t),n.appendChild(i),n.appendChild(l),n.addEventListener("click",d=>{d.stopPropagation(),s(),this.close();}),n}toggle(){this.isOpen?this.close():this.open();}open(){this.isOpen=true,this.menu.classList.add("sp-export-menu--open"),this.element.querySelector(".sp-export-btn")?.setAttribute("aria-expanded","true");}close(){this.isOpen=false,this.menu.classList.remove("sp-export-menu--open"),this.element.querySelector(".sp-export-btn")?.setAttribute("aria-expanded","false");}exportAs(e){let t=this.getFeedbacks();if(t.length===0)return;let s=t[0]?.projectName??"feedbacks",n=new Date().toISOString().slice(0,10),i=s.replace(/[^a-zA-Z0-9_-]/g,"_");if(e==="csv"){let l=le(t);$(l,`feedbacks-${i}-${n}.csv`,"text/csv;charset=utf-8");}else {let l=pe(t);$(l,`feedbacks-${i}-${n}.json`,"application/json;charset=utf-8");}}destroy(){document.removeEventListener("click",this.onDocumentClick,true),this.element.remove();}};var T='<svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><rect x="1" y="1" width="16" height="16" rx="4" stroke="currentColor" stroke-width="2"/></svg>',z='<svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><rect x="1" y="1" width="16" height="16" rx="4" fill="url(#sp-cb-grad)" stroke="none"/><polyline points="5 9 8 12 13 6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="sp-cb-grad" x1="0" y1="0" x2="18" y2="18" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="var(--sp-accent)"/><stop offset="100%" stop-color="var(--sp-accent-dark)"/></linearGradient></defs></svg>',dt=`
+  /* ============================
+     Bulk Checkbox
+     ============================ */
+
+  .sp-bulk-checkbox {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    cursor: pointer;
+    border-radius: 4px;
+    color: var(--sp-border);
+    opacity: 0;
+    transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sp-bulk-checkbox svg {
+    width: 16px;
+    height: 16px;
+    display: block;
+  }
+
+  .sp-bulk-checkbox:hover {
+    color: var(--sp-accent);
+    transform: scale(1.1);
+  }
+
+  .sp-bulk-checkbox--checked {
+    color: var(--sp-accent);
+    opacity: 1 !important;
+    filter: drop-shadow(0 0 4px var(--sp-accent-glow));
+  }
+
+  /* Show checkboxes when hovering a card */
+  .sp-card:hover .sp-bulk-checkbox {
+    opacity: 1;
+  }
+
+  /* When any card has selection, show ALL checkboxes */
+  .sp-list--has-selection .sp-bulk-checkbox {
+    opacity: 1;
+  }
+
+  /* ============================
+     Card Selected State
+     ============================ */
+
+  .sp-card--selected {
+    border-left: 3px solid var(--sp-accent) !important;
+    background: var(--sp-accent-light) !important;
+  }
+
+  .sp-card--selected:hover {
+    background: var(--sp-accent-light) !important;
+  }
+
+  /* ============================
+     Select All Bar
+     ============================ */
+
+  .sp-bulk-select-all {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    margin-bottom: 4px;
+    border-radius: var(--sp-radius);
+    background: transparent;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s ease, background 0.2s ease;
+    user-select: none;
+    font-family: var(--sp-font);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--sp-text-secondary);
+  }
+
+  .sp-bulk-select-all:hover {
+    background: var(--sp-bg-hover);
+  }
+
+  /* Show select-all on list hover or when selections exist */
+  .sp-list:hover .sp-bulk-select-all,
+  .sp-list--has-selection .sp-bulk-select-all {
+    opacity: 1;
+  }
+
+  .sp-bulk-select-all .sp-bulk-checkbox {
+    opacity: 1;
+  }
+
+  /* ============================
+     Floating Action Bar
+     ============================ */
+
+  @keyframes sp-bulk-bar-in {
+    from {
+      transform: translateY(100%) scale(0.95);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0) scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes sp-bulk-bar-out {
+    from {
+      transform: translateY(0) scale(1);
+      opacity: 1;
+    }
+    to {
+      transform: translateY(100%) scale(0.95);
+      opacity: 0;
+    }
+  }
+
+  .sp-bulk-bar {
+    position: absolute;
+    bottom: 16px;
+    left: 16px;
+    right: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: 16px;
+    background: var(--sp-glass-bg-heavy);
+    backdrop-filter: blur(var(--sp-blur-heavy));
+    -webkit-backdrop-filter: blur(var(--sp-blur-heavy));
+    border: 1px solid var(--sp-glass-border);
+    box-shadow: var(--sp-shadow-xl);
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(100%) scale(0.95);
+    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
+                opacity 0.25s ease;
+    font-family: var(--sp-font);
+  }
+
+  .sp-bulk-bar--visible {
+    pointer-events: auto;
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  .sp-bulk-bar-count {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--sp-text);
+    white-space: nowrap;
+    letter-spacing: -0.01em;
+  }
+
+  .sp-bulk-bar-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .sp-bulk-btn-resolve,
+  .sp-bulk-btn-delete {
+    padding: 7px 14px;
+    border-radius: var(--sp-radius-full);
+    border: 1.5px solid transparent;
+    background: transparent;
+    font-family: var(--sp-font);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+  }
+
+  .sp-bulk-btn-resolve {
+    color: #22c55e;
+    border-color: #22c55e;
+  }
+
+  .sp-bulk-btn-resolve:hover {
+    background: rgba(34, 197, 94, 0.1);
+    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
+  }
+
+  .sp-bulk-btn-resolve:active {
+    transform: scale(0.96);
+    transition-duration: 0.1s;
+  }
+
+  .sp-bulk-btn-delete {
+    color: #ef4444;
+    border-color: #ef4444;
+  }
+
+  .sp-bulk-btn-delete:hover {
+    background: rgba(239, 68, 68, 0.1);
+    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
+  }
+
+  .sp-bulk-btn-delete:active {
+    transform: scale(0.96);
+    transition-duration: 0.1s;
+  }
+
+  .sp-bulk-btn-resolve:disabled,
+  .sp-bulk-btn-delete:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .sp-bulk-btn-deselect {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--sp-radius-full);
+    border: 1px solid var(--sp-border);
+    background: transparent;
+    color: var(--sp-text-tertiary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+    padding: 0;
+  }
+
+  .sp-bulk-btn-deselect:hover {
+    background: var(--sp-bg-hover);
+    color: var(--sp-text);
+    border-color: var(--sp-text-tertiary);
+  }
+
+  .sp-bulk-btn-deselect:active {
+    transform: scale(0.92);
+    transition-duration: 0.1s;
+  }
+
+  .sp-bulk-btn-deselect svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* Spinner inside bulk bar buttons */
+  .sp-bulk-btn-resolve .sp-spinner,
+  .sp-bulk-btn-delete .sp-spinner {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* ============================
+     Forced Colors / High Contrast
+     ============================ */
+
+  @media (forced-colors: active) {
+    .sp-bulk-checkbox,
+    .sp-bulk-btn-resolve,
+    .sp-bulk-btn-delete,
+    .sp-bulk-btn-deselect,
+    .sp-bulk-bar {
+      border: 2px solid ButtonText !important;
+      background: Canvas !important;
+      color: ButtonText !important;
+    }
+
+    .sp-bulk-checkbox--checked {
+      background: Highlight !important;
+      color: HighlightText !important;
+    }
+
+    .sp-card--selected {
+      border-left: 4px solid Highlight !important;
+    }
+  }
+
+  /* ============================
+     Reduced Motion
+     ============================ */
+
+  @media (prefers-reduced-motion: reduce) {
+    .sp-bulk-bar {
+      transition-duration: 0.01ms !important;
+    }
+
+    .sp-bulk-checkbox {
+      transition-duration: 0.01ms !important;
+    }
+  }
+`,I=class{constructor(e,t,s){this.callbacks=t;this.t=s,this.barElement=r("div",{class:"sp-bulk-bar"}),this.barElement.setAttribute("role","toolbar"),this.barElement.setAttribute("aria-label","Bulk actions"),this.countLabel=r("span",{class:"sp-bulk-bar-count"}),a(this.countLabel,this.t("bulk.selected").replace("{count}","0"));let n=r("div",{class:"sp-bulk-bar-actions"});this.resolveBtn=document.createElement("button"),this.resolveBtn.className="sp-bulk-btn-resolve",this.resolveBtn.type="button",this.resolveBtn.addEventListener("click",()=>this.handleResolve()),this.deleteBtn=document.createElement("button"),this.deleteBtn.className="sp-bulk-btn-delete",this.deleteBtn.type="button",this.deleteBtn.addEventListener("click",()=>this.handleDelete());let i=document.createElement("button");i.className="sp-bulk-btn-deselect",i.type="button",i.setAttribute("aria-label",this.t("bulk.deselect")),i.appendChild(c('<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>')),i.addEventListener("click",()=>this.deselectAll()),n.appendChild(this.resolveBtn),n.appendChild(this.deleteBtn),n.appendChild(i),this.barElement.appendChild(this.countLabel),this.barElement.appendChild(n),this.updateButtonLabels();}callbacks;barElement;selected=new Set;checkboxMap=new Map;countLabel;resolveBtn;deleteBtn;selectAllCheckbox=null;listContainer=null;isProcessing=false;t;createCheckbox(e){let t=r("div",{class:"sp-bulk-checkbox"});return t.setAttribute("role","checkbox"),t.setAttribute("aria-checked","false"),t.setAttribute("tabindex","0"),t.setAttribute("aria-label",`Select feedback ${e}`),t.appendChild(c(T)),t.addEventListener("click",s=>{s.stopPropagation(),this.toggle(e);}),t.addEventListener("keydown",s=>{(s.key===" "||s.key==="Enter")&&(s.preventDefault(),s.stopPropagation(),this.toggle(e));}),this.checkboxMap.set(e,t),t}createSelectAllBar(e,t){let s=r("div",{class:"sp-bulk-select-all"}),n=r("div",{class:"sp-bulk-checkbox"});n.appendChild(c(T)),this.selectAllCheckbox=n;let i=r("span");return a(i,t),s.appendChild(n),s.appendChild(i),s.addEventListener("click",()=>{this.selected.size===e.length&&e.length>0?this.deselectAll():this.selectAll(e);}),s}setListContainer(e){this.listContainer=e;}toggle(e){this.isProcessing||(this.selected.has(e)?this.selected.delete(e):this.selected.add(e),this.updateCheckbox(e),this.updateBar(),this.updateSelectAllCheckbox(),this.updateListSelectionClass(),this.updateCardSelectedState(e));}selectAll(e){if(!this.isProcessing){for(let t of e)this.selected.add(t),this.updateCheckbox(t),this.updateCardSelectedState(t);this.updateBar(),this.updateSelectAllCheckbox(),this.updateListSelectionClass();}}deselectAll(){let e=[...this.selected];this.selected.clear();for(let t of e)this.updateCheckbox(t),this.updateCardSelectedState(t);this.updateBar(),this.updateSelectAllCheckbox(),this.updateListSelectionClass();}get selectedIds(){return [...this.selected]}get count(){return this.selected.size}get hasSelection(){return this.selected.size>0}reset(){this.selected.clear(),this.checkboxMap.clear(),this.selectAllCheckbox=null,this.isProcessing=false,this.updateBar(),this.updateListSelectionClass();}destroy(){this.selected.clear(),this.checkboxMap.clear(),this.selectAllCheckbox=null,this.listContainer=null,this.barElement.remove();}updateBar(){let e=this.selected.size,t=e>0;this.barElement.classList.toggle("sp-bulk-bar--visible",t),a(this.countLabel,this.t("bulk.selected").replace("{count}",String(e))),this.updateButtonLabels();}updateButtonLabels(){let e=this.selected.size,t=this.t("bulk.resolve"),s=this.t("bulk.delete");this.resolveBtn.replaceChildren();let n=document.createElement("span");a(n,e>0?`${t} ${e}`:t),this.resolveBtn.appendChild(n),this.deleteBtn.replaceChildren();let i=document.createElement("span");a(i,e>0?`${s} ${e}`:s),this.deleteBtn.appendChild(i);}updateCheckbox(e){let t=this.checkboxMap.get(e);if(!t)return;let s=this.selected.has(e);t.classList.toggle("sp-bulk-checkbox--checked",s),t.setAttribute("aria-checked",String(s)),t.replaceChildren(),t.appendChild(c(s?z:T));}updateSelectAllCheckbox(){if(!this.selectAllCheckbox)return;let e=this.selected.size>0&&this.selected.size===this.checkboxMap.size;this.selectAllCheckbox.classList.toggle("sp-bulk-checkbox--checked",e),this.selectAllCheckbox.setAttribute("aria-checked",String(e)),this.selectAllCheckbox.replaceChildren(),this.selectAllCheckbox.appendChild(c(e?z:T));}updateListSelectionClass(){this.listContainer&&this.listContainer.classList.toggle("sp-list--has-selection",this.selected.size>0);}updateCardSelectedState(e){if(!this.listContainer)return;let t=CSS.escape(e),s=this.listContainer.querySelector(`[data-feedback-id="${t}"]`);s&&s.classList.toggle("sp-card--selected",this.selected.has(e));}async handleResolve(){if(this.isProcessing||this.selected.size===0)return;this.isProcessing=true;let e=[...this.selected],t=L(this.resolveBtn);this.deleteBtn.disabled=true;try{await this.callbacks.onResolve(e),this.reset();}catch{t(),this.deleteBtn.disabled=false;}finally{this.isProcessing=false;}}async handleDelete(){if(this.isProcessing||this.selected.size===0)return;this.isProcessing=true;let e=[...this.selected],t=L(this.deleteBtn);this.resolveBtn.disabled=true;try{await this.callbacks.onDelete(e),this.reset();}catch{t(),this.resolveBtn.disabled=false;}finally{this.isProcessing=false;}}};var de='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>',R='<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 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>',ce='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>',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="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',ue='<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="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="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"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',H='<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>',V='<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>',G='<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>',be='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',ve='<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"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>',xe='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>',me='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>',gt=`
+  /* ============================
+     Detail View \u2014 Panel-in-Panel
+     ============================ */
+
+  .sp-detail {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    background: var(--sp-glass-bg);
+    backdrop-filter: blur(var(--sp-blur-heavy));
+    -webkit-backdrop-filter: blur(var(--sp-blur-heavy));
+    z-index: 20;
+    transform: translateX(100%);
+    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform;
+    overflow: hidden;
+  }
+
+  .sp-detail--visible {
+    transform: translateX(0);
+  }
+
+  /* ---- Header ---- */
+
+  .sp-detail-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--sp-border);
+    background: var(--sp-glass-bg-heavy);
+    backdrop-filter: blur(var(--sp-blur));
+    -webkit-backdrop-filter: blur(var(--sp-blur));
+    flex-shrink: 0;
+    min-height: 64px;
+  }
+
+  .sp-detail-back {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--sp-radius);
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--sp-text-tertiary);
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+    padding: 0;
+  }
+
+  .sp-detail-back:hover {
+    background: var(--sp-bg-hover);
+    color: var(--sp-text);
+  }
+
+  .sp-detail-back:active {
+    transform: scale(0.92);
+    transition-duration: 0.1s;
+  }
+
+  .sp-detail-back svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .sp-detail-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--sp-text);
+    letter-spacing: -0.02em;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sp-detail-header .sp-badge {
+    flex-shrink: 0;
+  }
+
+  /* ---- Content ---- */
+
+  .sp-detail-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0;
+  }
+
+  .sp-detail-content::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .sp-detail-content::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .sp-detail-content::-webkit-scrollbar-thumb {
+    background: var(--sp-border);
+    border-radius: var(--sp-radius-full);
+  }
+
+  .sp-detail-content::-webkit-scrollbar-thumb:hover {
+    background: var(--sp-text-tertiary);
+  }
+
+  /* ---- Section ---- */
+
+  .sp-detail-section {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--sp-border);
+    opacity: 0;
+    transform: translateY(8px);
+    animation: sp-detail-section-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+
+  @keyframes sp-detail-section-in {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .sp-detail-section:last-child {
+    border-bottom: none;
+  }
+
+  .sp-detail-section-title {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--sp-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin-bottom: 14px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .sp-detail-section-title svg {
+    width: 14px;
+    height: 14px;
+    opacity: 0.6;
+  }
+
+  /* ---- Status + Actions Section ---- */
+
+  .sp-detail-status {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 16px;
+  }
+
+  .sp-detail-status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 14px;
+    border-radius: var(--sp-radius-full);
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  .sp-detail-status-pill--open {
+    background: rgba(34, 197, 94, 0.1);
+    color: #22c55e;
+    border: 1px solid rgba(34, 197, 94, 0.2);
+  }
+
+  .sp-detail-status-pill--resolved {
+    background: rgba(156, 163, 175, 0.1);
+    color: #9ca3af;
+    border: 1px solid rgba(156, 163, 175, 0.2);
+  }
+
+  .sp-detail-status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .sp-detail-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  .sp-detail-actions button {
+    flex: 1;
+    height: 40px;
+    padding: 0 16px;
+    border-radius: var(--sp-radius);
+    font-family: var(--sp-font);
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all 0.2s ease;
+  }
+
+  .sp-detail-actions button svg {
+    width: 15px;
+    height: 15px;
+  }
+
+  .sp-detail-btn-resolve {
+    border: 1.5px solid #22c55e;
+    background: rgba(34, 197, 94, 0.06);
+    color: #22c55e;
+  }
+
+  .sp-detail-btn-resolve:hover {
+    background: rgba(34, 197, 94, 0.14);
+    box-shadow: 0 0 16px rgba(34, 197, 94, 0.12);
+    transform: translateY(-1px);
+  }
+
+  .sp-detail-btn-resolve:active {
+    transform: translateY(0) scale(0.98);
+    transition-duration: 0.1s;
+  }
+
+  .sp-detail-btn-reopen {
+    border: 1.5px solid var(--sp-accent);
+    background: var(--sp-accent-light);
+    color: var(--sp-accent);
+  }
+
+  .sp-detail-btn-reopen:hover {
+    background: rgba(var(--sp-accent), 0.14);
+    box-shadow: 0 0 16px var(--sp-accent-glow);
+    transform: translateY(-1px);
+  }
+
+  .sp-detail-btn-reopen:active {
+    transform: translateY(0) scale(0.98);
+    transition-duration: 0.1s;
+  }
+
+  .sp-detail-btn-delete {
+    border: 1.5px solid #ef4444;
+    background: rgba(239, 68, 68, 0.06);
+    color: #ef4444;
+  }
+
+  .sp-detail-btn-delete:hover {
+    background: rgba(239, 68, 68, 0.14);
+    box-shadow: 0 0 16px rgba(239, 68, 68, 0.12);
+    transform: translateY(-1px);
+  }
+
+  .sp-detail-btn-delete:active {
+    transform: translateY(0) scale(0.98);
+    transition-duration: 0.1s;
+  }
+
+  .sp-detail-actions button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+    transform: none;
+    box-shadow: none;
+  }
+
+  /* ---- Message Section ---- */
+
+  .sp-detail-message {
+    font-size: 14px;
+    line-height: 1.65;
+    color: var(--sp-text);
+    padding: 14px 16px;
+    border-left: 3px solid var(--sp-accent);
+    border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
+    background: var(--sp-glass-bg-heavy);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  /* ---- Screenshot Section ---- */
+
+  .sp-detail-screenshot {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 400px;
+    object-fit: contain;
+    border-radius: var(--sp-radius);
+    border: 1px solid var(--sp-glass-border);
+    background: var(--sp-glass-bg-heavy);
+  }
+
+  /* ---- Metadata Section ---- */
+
+  .sp-detail-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .sp-detail-meta-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .sp-detail-meta-row svg {
+    width: 14px;
+    height: 14px;
+    color: var(--sp-text-tertiary);
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  .sp-detail-meta-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .sp-detail-meta-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--sp-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    line-height: 1;
+    margin-bottom: 4px;
+  }
+
+  .sp-detail-meta-value {
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--sp-text);
+    word-break: break-all;
+  }
+
+  .sp-detail-meta-value--mono {
+    font-family: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;
+    font-size: 12px;
+    background: var(--sp-glass-bg-heavy);
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid var(--sp-glass-border-subtle);
+  }
+
+  .sp-detail-meta-value--secondary {
+    color: var(--sp-text-secondary);
+    font-size: 12px;
+  }
+
+  /* ---- Annotation Section ---- */
+
+  .sp-detail-annotation {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .sp-detail-annotation-info {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 14px;
+    border-radius: var(--sp-radius);
+    background: var(--sp-glass-bg-heavy);
+    border: 1px solid var(--sp-glass-border-subtle);
+  }
+
+  .sp-detail-annotation-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .sp-detail-annotation-row svg {
+    width: 13px;
+    height: 13px;
+    color: var(--sp-text-tertiary);
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  .sp-detail-annotation-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--sp-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    line-height: 1;
+    margin-bottom: 3px;
+  }
+
+  .sp-detail-annotation-value {
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--sp-text);
+    word-break: break-all;
+  }
+
+  .sp-detail-annotation-value--mono {
+    font-family: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;
+    font-size: 11px;
+    background: var(--sp-bg-hover);
+    padding: 2px 6px;
+    border-radius: 4px;
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sp-detail-btn-goto {
+    width: 100%;
+    height: 44px;
+    padding: 0 20px;
+    border-radius: var(--sp-radius);
+    border: none;
+    background: var(--sp-accent-gradient);
+    color: #fff;
+    font-family: var(--sp-font);
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: all 0.25s ease;
+    box-shadow: 0 2px 12px var(--sp-accent-glow);
+  }
+
+  .sp-detail-btn-goto svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .sp-detail-btn-goto:hover {
+    box-shadow: 0 4px 20px var(--sp-accent-glow);
+    transform: translateY(-2px);
+  }
+
+  .sp-detail-btn-goto:active {
+    transform: translateY(0) scale(0.98);
+    transition-duration: 0.1s;
+  }
+
+  /* ---- Forced Colors / High Contrast ---- */
+
+  @media (forced-colors: active) {
+    .sp-detail {
+      border: 2px solid ButtonText !important;
+      background: Canvas !important;
+    }
+
+    .sp-detail-back,
+    .sp-detail-btn-goto,
+    .sp-detail-btn-resolve,
+    .sp-detail-btn-reopen,
+    .sp-detail-btn-delete {
+      border: 2px solid ButtonText !important;
+      background: Canvas !important;
+      color: ButtonText !important;
+    }
+
+    .sp-detail-back:focus-visible,
+    .sp-detail-btn-goto:focus-visible,
+    .sp-detail-btn-resolve:focus-visible,
+    .sp-detail-btn-reopen:focus-visible,
+    .sp-detail-btn-delete:focus-visible {
+      outline: 3px solid Highlight !important;
+    }
+
+    .sp-detail-status-pill {
+      border: 2px solid ButtonText !important;
+      background: Canvas !important;
+      color: ButtonText !important;
+    }
+
+    .sp-detail-message {
+      border-left: 3px solid ButtonText !important;
+    }
+  }
+
+  /* ---- Diagnostics Section ---- */
+
+  .sp-detail-diag {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .sp-detail-diag-toggle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 10px 12px;
+    border-radius: var(--sp-radius);
+    border: 1px solid var(--sp-glass-border-subtle);
+    background: var(--sp-glass-bg-heavy);
+    color: var(--sp-text);
+    font-family: var(--sp-font);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s ease;
+  }
+
+  .sp-detail-diag-toggle:hover {
+    background: var(--sp-bg-hover);
+  }
+
+  .sp-detail-diag-toggle svg {
+    width: 12px;
+    height: 12px;
+    transition: transform 0.2s ease;
+  }
+
+  .sp-detail-diag-toggle[aria-expanded="true"] svg {
+    transform: rotate(90deg);
+  }
+
+  .sp-detail-diag-counts {
+    display: inline-flex;
+    gap: 6px;
+    font-weight: 500;
+    color: var(--sp-text-tertiary);
+  }
+
+  .sp-detail-diag-count {
+    padding: 1px 7px;
+    border-radius: var(--sp-radius-full);
+    background: var(--sp-bg-hover);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sp-detail-diag-count--errors {
+    background: rgba(239, 68, 68, 0.14);
+    color: #ef4444;
+  }
+
+  .sp-detail-diag-body {
+    display: none;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .sp-detail-diag-body--open {
+    display: flex;
+  }
+
+  .sp-detail-diag-group-title {
+    font-size: 10px;
+    font-weight: 700;
+    color: var(--sp-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin-bottom: 6px;
+  }
+
+  .sp-detail-diag-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-radius: var(--sp-radius);
+    border: 1px solid var(--sp-glass-border-subtle);
+    background: var(--sp-glass-bg-heavy);
+    max-height: 240px;
+    overflow-y: auto;
+  }
+
+  .sp-detail-diag-list li {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--sp-glass-border-subtle);
+    font-family: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;
+    font-size: 11px;
+    line-height: 1.45;
+    color: var(--sp-text);
+  }
+
+  .sp-detail-diag-list li:last-child {
+    border-bottom: none;
+  }
+
+  .sp-detail-diag-level {
+    flex-shrink: 0;
+    font-weight: 700;
+    width: 44px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-size: 10px;
+  }
+
+  .sp-detail-diag-level--log {
+    color: var(--sp-text-tertiary);
+  }
+  .sp-detail-diag-level--info {
+    color: #3b82f6;
+  }
+  .sp-detail-diag-level--warn {
+    color: #f59e0b;
+  }
+  .sp-detail-diag-level--error {
+    color: #ef4444;
+  }
+
+  .sp-detail-diag-message {
+    flex: 1;
+    min-width: 0;
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+
+  .sp-detail-diag-net {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .sp-detail-diag-net-status {
+    flex-shrink: 0;
+    font-weight: 700;
+    color: #ef4444;
+    min-width: 32px;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sp-detail-diag-net-method {
+    flex-shrink: 0;
+    font-weight: 600;
+    color: var(--sp-text-tertiary);
+    min-width: 44px;
+  }
+
+  .sp-detail-diag-net-url {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--sp-text);
+  }
+
+  .sp-detail-diag-empty {
+    padding: 12px;
+    font-style: italic;
+    font-size: 11px;
+    color: var(--sp-text-tertiary);
+    text-align: center;
+  }
+
+  /* ---- Reduced Motion ---- */
+
+  @media (prefers-reduced-motion: reduce) {
+    .sp-detail {
+      transition-duration: 0.01ms !important;
+    }
+
+    .sp-detail-section {
+      animation-duration: 0.01ms !important;
+    }
+  }
+`;function fe(o){if(/Edg\//i.test(o)){let e=o.match(/Edg\/([\d.]+)/);return e?`Edge ${e[1]}`:"Edge"}if(/OPR\//i.test(o)||/Opera/i.test(o)){let e=o.match(/OPR\/([\d.]+)/);return e?`Opera ${e[1]}`:"Opera"}if(/Firefox\//i.test(o)){let e=o.match(/Firefox\/([\d.]+)/);return e?`Firefox ${e[1]}`:"Firefox"}if(/Chrome\//i.test(o)&&!/Chromium/i.test(o)){let e=o.match(/Chrome\/([\d.]+)/);return e?`Chrome ${e[1]}`:"Chrome"}if(/Safari\//i.test(o)&&!/Chrome/i.test(o)){let e=o.match(/Version\/([\d.]+)/);return e?`Safari ${e[1]}`:"Safari"}return "Unknown"}function U(o,e){try{return new Date(o).toLocaleString(e,{year:"numeric",month:"long",day:"numeric",hour:"2-digit",minute:"2-digit"})}catch{return o}}function ye(o){try{return new URL(o).pathname}catch{return o}}function ke(o){return !!(/^data:image\/(jpeg|png|webp);/i.test(o)||/^https:\/\//i.test(o))}function S(o,e){return o.length<=e?o:o.slice(0,e-1)+"\u2026"}function Ce(o){if(!o)return  false;let e=Array.isArray(o.console)?o.console.length:0,t=Array.isArray(o.network)?o.network.length:0;return e>0||t>0}function we(o){return !Number.isFinite(o)||o<0?"\u2014":o<1e3?`${Math.round(o)} ms`:`${(o/1e3).toFixed(1)} s`}var Y=class{constructor(e,t,s,n){this.colors=e;this.callbacks=t;this.t=s,this.locale=n,this.element=r("div",{class:"sp-detail"}),this.element.setAttribute("role","dialog"),this.element.setAttribute("aria-label","Feedback detail"),this.element.setAttribute("aria-hidden","true");let i=r("div",{class:"sp-detail-header"}),l=document.createElement("button");l.type="button",l.className="sp-detail-back",l.setAttribute("aria-label",this.t("detail.back")),l.appendChild(c(de)),l.addEventListener("click",()=>{this.hide(),this.callbacks.onBack();}),this.element.appendChild(i),i.appendChild(l),this.content=r("div",{class:"sp-detail-content"}),this.element.appendChild(this.content);}colors;callbacks;element;_isVisible=false;currentFeedback=null;content;t;locale;resolveBtn=null;deleteBtn=null;isProcessing=false;show(e,t){this.currentFeedback=e,this.isProcessing=false;let s=this.element.querySelector(".sp-detail-header");if(!s)return;let n=s.querySelector(".sp-detail-back");if(!n)return;s.replaceChildren(n);let i=r("span",{class:"sp-detail-title"});a(i,this.t("detail.title").replace("{number}",String(t))),s.appendChild(i);let l=r("span",{class:"sp-badge"});l.style.background=N(e.type,this.colors),l.style.color=A(e.type,this.colors),a(l,e.type),s.appendChild(l),this.content.replaceChildren();let d=0,p=this.buildSection(d++);this.buildStatusActions(p,e),this.content.appendChild(p);let u=this.buildSection(d++),h=r("div",{class:"sp-detail-section-title"});a(h,this.t("detail.message")),u.appendChild(h);let v=r("div",{class:"sp-detail-message"});if(v.style.borderLeftColor=A(e.type,this.colors),a(v,e.message),u.appendChild(v),this.content.appendChild(u),e.screenshotUrl&&ke(e.screenshotUrl)){let g=this.buildSection(d++),x=r("div",{class:"sp-detail-section-title"});a(x,this.t("detail.screenshot")),g.appendChild(x);let b=document.createElement("img");b.className="sp-detail-screenshot",b.src=e.screenshotUrl,b.alt=this.t("detail.screenshotAlt"),b.loading="lazy",b.referrerPolicy="no-referrer",g.appendChild(b),this.content.appendChild(g);}let f=this.buildSection(d++),m=r("div",{class:"sp-detail-section-title"});if(a(m,this.t("detail.metadata")),f.appendChild(m),this.buildMetadata(f,e),this.content.appendChild(f),e.annotations.length>0){let g=this.buildSection(d++),x=r("div",{class:"sp-detail-section-title"});x.appendChild(c(R));let b=r("span");a(b,this.t("detail.annotation")),x.appendChild(b),g.appendChild(x),this.buildAnnotation(g,e),this.content.appendChild(g);}if(Ce(e.diagnostics)){let g=this.buildSection(d++),x=r("div",{class:"sp-detail-section-title"});x.appendChild(c(me));let b=r("span");a(b,this.t("detail.diagnostics")),x.appendChild(b),g.appendChild(x),this.buildDiagnostics(g,e),this.content.appendChild(g);}this._isVisible=true,this.element.setAttribute("aria-hidden","false"),this.element.offsetHeight,this.element.classList.add("sp-detail--visible"),requestAnimationFrame(()=>{n.focus();});}hide(){this._isVisible&&(this._isVisible=false,this.element.classList.remove("sp-detail--visible"),this.element.setAttribute("aria-hidden","true"),this.currentFeedback=null,this.resolveBtn=null,this.deleteBtn=null);}get isVisible(){return this._isVisible}destroy(){this.hide(),this.element.remove();}buildSection(e){let t=r("div",{class:"sp-detail-section"});return t.style.animationDelay=`${e*40}ms`,t}buildStatusActions(e,t){let s=t.status==="resolved",n=r("div",{class:"sp-detail-section-title"});a(n,this.t("detail.status")),e.appendChild(n);let i=r("div",{class:"sp-detail-status"}),l=r("span",{class:`sp-detail-status-pill ${s?"sp-detail-status-pill--resolved":"sp-detail-status-pill--open"}`}),d=r("span",{class:"sp-detail-status-dot"});d.style.background=s?"#9ca3af":"#22c55e",l.appendChild(d);let p=r("span");a(p,s?this.t("detail.reopen"):this.t("detail.resolve")),a(p,s?"Resolved":"Open"),l.appendChild(p),i.appendChild(l),e.appendChild(i);let u=r("div",{class:"sp-detail-actions"});if(this.resolveBtn=document.createElement("button"),this.resolveBtn.type="button",s){this.resolveBtn.className="sp-detail-btn-reopen",this.resolveBtn.appendChild(c(V));let v=document.createElement("span");a(v,this.t("detail.reopen")),this.resolveBtn.appendChild(v);}else {this.resolveBtn.className="sp-detail-btn-resolve",this.resolveBtn.appendChild(c(H));let v=document.createElement("span");a(v,this.t("detail.resolve")),this.resolveBtn.appendChild(v);}this.resolveBtn.addEventListener("click",()=>this.handleResolve()),this.deleteBtn=document.createElement("button"),this.deleteBtn.type="button",this.deleteBtn.className="sp-detail-btn-delete",this.deleteBtn.appendChild(c(G));let h=document.createElement("span");a(h,this.t("detail.delete")),this.deleteBtn.appendChild(h),this.deleteBtn.addEventListener("click",()=>this.handleDelete()),u.appendChild(this.resolveBtn),u.appendChild(this.deleteBtn),e.appendChild(u);}buildMetadata(e,t){let s=r("div",{class:"sp-detail-meta"});if(this.addMetaRow(s,ce,this.t("detail.page"),()=>{let n=r("div",{class:"sp-detail-meta-value"}),i=ye(t.url);return a(n,S(i,60)),n.title=t.url,n}),this.addMetaRow(s,he,this.t("detail.author"),()=>{let n=r("div",{class:"sp-detail-meta-value"}),i=t.authorName||"Anonymous",l=t.authorEmail;return a(n,l?`${i} (${l})`:i),n}),this.addMetaRow(s,ue,this.t("detail.date"),()=>{let n=r("div",{class:"sp-detail-meta-value"});return a(n,U(t.createdAt,this.locale.startsWith("fr")?"fr":"en")),n}),this.addMetaRow(s,ge,this.t("detail.viewport"),()=>{let n=r("div",{class:"sp-detail-meta-value sp-detail-meta-value--mono"});return a(n,t.viewport||"Unknown"),n}),this.addMetaRow(s,'<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"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>',this.t("detail.browser"),()=>{let n=r("div",{class:"sp-detail-meta-value"});return a(n,fe(t.userAgent)),n}),t.resolvedAt){let n=t.resolvedAt;this.addMetaRow(s,H,this.t("detail.resolvedAt"),()=>{let i=r("div",{class:"sp-detail-meta-value sp-detail-meta-value--secondary"});return a(i,U(n,this.locale.startsWith("fr")?"fr":"en")),i});}e.appendChild(s);}addMetaRow(e,t,s,n){let i=r("div",{class:"sp-detail-meta-row"});i.appendChild(c(t));let l=r("div",{class:"sp-detail-meta-content"}),d=r("div",{class:"sp-detail-meta-label"});a(d,s),l.appendChild(d),l.appendChild(n()),i.appendChild(l),e.appendChild(i);}buildAnnotation(e,t){let s=t.annotations[0];if(!s)return;let n=r("div",{class:"sp-detail-annotation"}),i=r("div",{class:"sp-detail-annotation-info"});this.addAnnotationRow(i,be,this.t("detail.element"),()=>{let p=r("span",{class:"sp-detail-annotation-value sp-detail-annotation-value--mono"}),u=s.elementId?`<${s.elementTag}#${s.elementId}>`:`<${s.elementTag}>`;return a(p,u),p}),this.addAnnotationRow(i,ve,this.t("detail.selector"),()=>{let p=r("span",{class:"sp-detail-annotation-value sp-detail-annotation-value--mono"});return a(p,S(s.cssSelector,60)),p.title=s.cssSelector,p}),this.addAnnotationRow(i,R,this.t("detail.position"),()=>{let p=r("span",{class:"sp-detail-annotation-value"});return a(p,`${s.xPct.toFixed(1)}%, ${s.yPct.toFixed(1)}%`+(s.wPct>0||s.hPct>0?` (${s.wPct.toFixed(1)}% \xD7 ${s.hPct.toFixed(1)}%)`:"")),p}),n.appendChild(i);let l=document.createElement("button");l.type="button",l.className="sp-detail-btn-goto",l.appendChild(c(R));let d=document.createElement("span");a(d,this.t("detail.goToAnnotation")),l.appendChild(d),l.addEventListener("click",()=>{this.currentFeedback&&this.callbacks.onGoToAnnotation(this.currentFeedback);}),n.appendChild(l),e.appendChild(n);}buildDiagnostics(e,t){let s=t.diagnostics;if(!s)return;let n=Array.isArray(s.console)?s.console:[],i=Array.isArray(s.network)?s.network:[],l=n.filter(x=>x.level==="error").length,d=r("div",{class:"sp-detail-diag"}),p=document.createElement("button");p.type="button",p.className="sp-detail-diag-toggle",p.setAttribute("aria-expanded","false"),p.setAttribute("aria-label",this.t("detail.diagnostics.expand"));let u=document.createElement("span"),h=document.createElement("span");h.style.display="inline-flex",h.style.alignItems="center",h.style.gap="8px",h.appendChild(c(xe)),a(u,this.t("detail.diagnostics")),h.appendChild(u),p.appendChild(h);let v=r("span",{class:"sp-detail-diag-counts"}),f=r("span",{class:`sp-detail-diag-count${l>0?" sp-detail-diag-count--errors":""}`});a(f,`${n.length} console`);let m=r("span",{class:`sp-detail-diag-count${i.length>0?" sp-detail-diag-count--errors":""}`});a(m,`${i.length} net`),v.appendChild(f),v.appendChild(m),p.appendChild(v);let g=r("div",{class:"sp-detail-diag-body"});if(n.length>0){let x=document.createElement("div"),b=r("div",{class:"sp-detail-diag-group-title"});a(b,this.t("detail.diagnostics.console")),x.appendChild(b);let C=document.createElement("ul");C.className="sp-detail-diag-list";for(let y of n){let k=document.createElement("li"),E=r("span",{class:`sp-detail-diag-level sp-detail-diag-level--${y.level}`});a(E,y.level);let B=r("span",{class:"sp-detail-diag-message"});a(B,S(y.message,240)),B.title=y.message,k.appendChild(E),k.appendChild(B),C.appendChild(k);}x.appendChild(C),g.appendChild(x);}if(i.length>0){let x=document.createElement("div"),b=r("div",{class:"sp-detail-diag-group-title"});a(b,this.t("detail.diagnostics.network")),x.appendChild(b);let C=document.createElement("ul");C.className="sp-detail-diag-list";for(let y of i){let k=document.createElement("li");k.classList.add("sp-detail-diag-net");let E=r("span",{class:"sp-detail-diag-net-status"});a(E,y.status===0?"ERR":String(y.status));let B=r("span",{class:"sp-detail-diag-net-method"});a(B,y.method);let M=r("span",{class:"sp-detail-diag-net-url"});a(M,S(y.url,120)),M.title=`${y.url} \u2014 ${we(y.durationMs)}`,k.appendChild(E),k.appendChild(B),k.appendChild(M),C.appendChild(k);}x.appendChild(C),g.appendChild(x);}p.addEventListener("click",()=>{let b=!(p.getAttribute("aria-expanded")==="true");p.setAttribute("aria-expanded",String(b)),p.setAttribute("aria-label",b?this.t("detail.diagnostics.collapse"):this.t("detail.diagnostics.expand")),g.classList.toggle("sp-detail-diag-body--open",b);}),d.appendChild(p),d.appendChild(g),e.appendChild(d);}addAnnotationRow(e,t,s,n){let i=r("div",{class:"sp-detail-annotation-row"});i.appendChild(c(t));let l=r("div",{class:"sp-detail-meta-content"}),d=r("div",{class:"sp-detail-annotation-label"});a(d,s),l.appendChild(d),l.appendChild(n()),i.appendChild(l),e.appendChild(i);}async handleResolve(){if(!(this.isProcessing||!this.currentFeedback)){this.isProcessing=true,this.resolveBtn&&this.setButtonLoading(this.resolveBtn),this.deleteBtn&&(this.deleteBtn.disabled=true);try{await this.callbacks.onResolve(this.currentFeedback);}catch{this.isProcessing=false,this.resolveBtn&&this.restoreResolveBtn(this.currentFeedback),this.deleteBtn&&(this.deleteBtn.disabled=false);}}}async handleDelete(){if(!(this.isProcessing||!this.currentFeedback)){this.isProcessing=true,this.deleteBtn&&this.setButtonLoading(this.deleteBtn),this.resolveBtn&&(this.resolveBtn.disabled=true);try{await this.callbacks.onDelete(this.currentFeedback);}catch{this.isProcessing=false,this.deleteBtn&&this.restoreDeleteBtn(),this.resolveBtn&&(this.resolveBtn.disabled=false);}}}setButtonLoading(e){e.disabled=true,e.replaceChildren(r("div",{class:"sp-spinner sp-spinner--sm"}));}restoreResolveBtn(e){if(!this.resolveBtn)return;this.resolveBtn.disabled=false,this.resolveBtn.replaceChildren();let t=e.status==="resolved";this.resolveBtn.appendChild(c(t?V:H));let s=document.createElement("span");a(s,t?this.t("detail.reopen"):this.t("detail.resolve")),this.resolveBtn.appendChild(s);}restoreDeleteBtn(){if(!this.deleteBtn)return;this.deleteBtn.disabled=false,this.deleteBtn.replaceChildren(),this.deleteBtn.appendChild(c(G));let e=document.createElement("span");a(e,this.t("detail.delete")),this.deleteBtn.appendChild(e);}};var Be='<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 5h10"/><path d="M11 9h7"/><path d="M11 13h4"/><path d="M3 17l3 3 3-3"/><path d="M6 18V4"/></svg>',Q='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>',Ee='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>',K={question:0,change:1,bug:2,other:3};function xt(o,e){let t=[...o];switch(e){case "newest":t.sort((s,n)=>new Date(n.createdAt).getTime()-new Date(s.createdAt).getTime());break;case "oldest":t.sort((s,n)=>new Date(s.createdAt).getTime()-new Date(n.createdAt).getTime());break;case "by-type":t.sort((s,n)=>{let i=K[s.type]??99,l=K[n.type]??99;return i!==l?i-l:new Date(n.createdAt).getTime()-new Date(s.createdAt).getTime()});break;case "open-first":t.sort((s,n)=>{let i=s.status==="open"?0:1,l=n.status==="open"?0:1;return i!==l?i-l:new Date(n.createdAt).getTime()-new Date(s.createdAt).getTime()});break}return t}function Te(o){try{return new URL(o).pathname}catch{return o}}function Se(o,e){if(o.length<=e)return o;let t="\u2026",s=Math.floor((e-1)/2);return o.slice(0,s)+t+o.slice(-s)}function mt(o){let e=new Map;for(let s of o){let n=Te(s.url),i=e.get(n);i?i.push(s):e.set(n,[s]);}return new Map([...e.entries()].sort((s,n)=>n[1].length-s[1].length))}function ft(o,e,t){let s=r("div",{class:"sp-group-header"});s.setAttribute("role","button"),s.setAttribute("tabindex","0"),s.setAttribute("aria-expanded","true"),s.style.borderBottomColor=t.border;let n=r("span",{class:"sp-group-header-chevron"});n.appendChild(c(Ee)),s.appendChild(n);let i=r("span",{class:"sp-group-header-icon"});i.appendChild(c(Q)),s.appendChild(i);let l=r("span",{class:"sp-group-header-path"}),d=Se(o,40);a(l,d),o.length>40&&(l.title=o),s.appendChild(l);let p=r("span",{class:"sp-group-header-count"});p.style.background=t.accentLight,p.style.color=t.accent,a(p,String(e)),s.appendChild(p);let u=()=>{let h=s.getAttribute("aria-expanded")==="true";s.setAttribute("aria-expanded",String(!h)),s.classList.toggle("sp-group-header--collapsed",h);let v=s.nextElementSibling;v?.classList.contains("sp-group-content")&&v.classList.toggle("sp-group-content--collapsed",h);};return s.addEventListener("click",u),s.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),u());}),s}var q=class{element;_sortMode="newest";_groupByPage=false;menuEl=null;sortBtn;groupToggle;t;colors;onChange;outsideClickHandler=null;constructor(e,t,s){this.colors=e,this.onChange=t,this.t=s,this.element=r("div",{class:"sp-sort-controls"}),this.sortBtn=document.createElement("button"),this.sortBtn.className="sp-sort-btn",this.sortBtn.setAttribute("aria-haspopup","listbox"),this.sortBtn.setAttribute("aria-expanded","false"),this.sortBtn.setAttribute("aria-label",this.t("sort.label"));let n=c(Be);this.sortBtn.appendChild(n);let i=r("span",{class:"sp-sort-btn-label"});a(i,this.t("sort.newest")),this.sortBtn.appendChild(i),this.sortBtn.addEventListener("click",p=>{p.stopPropagation(),this.toggleMenu();}),this.groupToggle=document.createElement("button"),this.groupToggle.className="sp-group-toggle",this.groupToggle.setAttribute("aria-pressed","false");let l=c(Q);this.groupToggle.appendChild(l);let d=r("span",{class:"sp-group-toggle-label"});a(d,this.t("group.byPage")),this.groupToggle.appendChild(d),this.groupToggle.addEventListener("click",()=>{this._groupByPage=!this._groupByPage,this.groupToggle.classList.toggle("sp-group-toggle--active",this._groupByPage),this.groupToggle.setAttribute("aria-pressed",String(this._groupByPage)),this.onChange();}),this.element.appendChild(this.sortBtn),this.element.appendChild(this.groupToggle);}get sortMode(){return this._sortMode}get groupByPage(){return this._groupByPage}toggleMenu(){if(this.menuEl){this.closeMenu();return}this.openMenu();}openMenu(){this.menuEl=r("div",{class:"sp-sort-menu"}),this.menuEl.setAttribute("role","listbox"),this.menuEl.setAttribute("aria-label",this.t("sort.label")),this.sortBtn.setAttribute("aria-expanded","true");let e=[{mode:"newest",label:this.t("sort.newest")},{mode:"oldest",label:this.t("sort.oldest")},{mode:"by-type",label:this.t("sort.byType")},{mode:"open-first",label:this.t("sort.openFirst")}];for(let t of e){let s=document.createElement("button");s.className=`sp-sort-option${t.mode===this._sortMode?" sp-sort-option--active":""}`,s.setAttribute("role","option"),s.setAttribute("aria-selected",String(t.mode===this._sortMode)),t.mode===this._sortMode&&(s.style.background=this.colors.accentLight,s.style.color=this.colors.accent),a(s,t.label),s.addEventListener("click",n=>{n.stopPropagation(),this._sortMode=t.mode,this.updateSortLabel(),this.closeMenu(),this.onChange();}),this.menuEl.appendChild(s);}this.element.appendChild(this.menuEl),requestAnimationFrame(()=>{this.outsideClickHandler=t=>{this.menuEl&&!this.element.contains(t.target)&&this.closeMenu();},document.addEventListener("click",this.outsideClickHandler,true);}),this.menuEl.addEventListener("keydown",t=>{t.key==="Escape"&&(this.closeMenu(),this.sortBtn.focus());});}closeMenu(){this.menuEl&&(this.menuEl.remove(),this.menuEl=null),this.sortBtn.setAttribute("aria-expanded","false"),this.outsideClickHandler&&(document.removeEventListener("click",this.outsideClickHandler,true),this.outsideClickHandler=null);}updateSortLabel(){let e={newest:this.t("sort.newest"),oldest:this.t("sort.oldest"),"by-type":this.t("sort.byType"),"open-first":this.t("sort.openFirst")},t=this.sortBtn.querySelector(".sp-sort-btn-label");t&&a(t,e[this._sortMode]);}destroy(){this.closeMenu();}},yt=`
+  /* ============================
+     Sort Controls Container
+     ============================ */
+
+  .sp-sort-controls {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 4px;
+    padding-top: 8px;
+    border-top: 1px solid var(--sp-border);
+  }
+
+  /* ============================
+     Sort Dropdown Button
+     ============================ */
+
+  .sp-sort-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 12px;
+    border-radius: var(--sp-radius-full);
+    border: 1px solid var(--sp-border);
+    background: var(--sp-glass-bg-heavy);
+    color: var(--sp-text-secondary);
+    font-family: var(--sp-font);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.2s ease;
+    position: relative;
+  }
+
+  .sp-sort-btn svg {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+
+  .sp-sort-btn:hover {
+    border-color: var(--sp-accent);
+    color: var(--sp-accent);
+    background: var(--sp-accent-light);
+  }
+
+  .sp-sort-btn[aria-expanded="true"] {
+    border-color: var(--sp-accent);
+    color: var(--sp-accent);
+    background: var(--sp-accent-light);
+  }
+
+  /* ============================
+     Sort Floating Menu
+     ============================ */
+
+  .sp-sort-menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    min-width: 170px;
+    padding: 4px;
+    border-radius: var(--sp-radius);
+    background: var(--sp-glass-bg-heavy);
+    backdrop-filter: blur(var(--sp-blur-heavy));
+    -webkit-backdrop-filter: blur(var(--sp-blur-heavy));
+    border: 1px solid var(--sp-glass-border);
+    box-shadow: var(--sp-shadow-md);
+    z-index: 10;
+    animation: sp-sort-menu-in 0.15s ease-out both;
+  }
+
+  @keyframes sp-sort-menu-in {
+    from {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  /* ============================
+     Sort Menu Option
+     ============================ */
+
+  .sp-sort-option {
+    display: block;
+    width: 100%;
+    padding: 8px 12px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--sp-text-secondary);
+    font-family: var(--sp-font);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    text-align: left;
+    transition: all 0.15s ease;
+  }
+
+  .sp-sort-option:hover {
+    background: var(--sp-bg-hover);
+    color: var(--sp-text);
+  }
+
+  .sp-sort-option--active {
+    font-weight: 600;
+  }
+
+  .sp-sort-option--active:hover {
+    background: var(--sp-accent-light);
+    color: var(--sp-accent);
+  }
+
+  /* ============================
+     Group by Page Toggle
+     ============================ */
+
+  .sp-group-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 12px;
+    border-radius: var(--sp-radius-full);
+    border: 1px solid var(--sp-border);
+    background: var(--sp-glass-bg-heavy);
+    color: var(--sp-text-secondary);
+    font-family: var(--sp-font);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.2s ease;
+  }
+
+  .sp-group-toggle svg {
+    width: 13px;
+    height: 13px;
+    flex-shrink: 0;
+  }
+
+  .sp-group-toggle:hover {
+    border-color: var(--sp-accent);
+    color: var(--sp-accent);
+    background: var(--sp-accent-light);
+  }
+
+  .sp-group-toggle--active {
+    background: var(--sp-accent-gradient);
+    border-color: transparent;
+    color: #fff;
+    box-shadow: 0 2px 8px var(--sp-accent-glow);
+  }
+
+  .sp-group-toggle--active:hover {
+    background: var(--sp-accent-gradient);
+    border-color: transparent;
+    color: #fff;
+  }
+
+  /* ============================
+     Page Group Header
+     ============================ */
+
+  .sp-group-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--sp-accent-light);
+    border-bottom: 1px solid var(--sp-border);
+    cursor: pointer;
+    user-select: none;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    transition: background 0.2s ease;
+  }
+
+  .sp-group-header:hover {
+    background: var(--sp-bg-hover);
+  }
+
+  .sp-group-header:focus-visible {
+    outline: 2px solid var(--sp-accent);
+    outline-offset: -2px;
+  }
+
+  .sp-group-header-chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+    transform: rotate(90deg);
+  }
+
+  .sp-group-header-chevron svg {
+    width: 12px;
+    height: 12px;
+    color: var(--sp-text-tertiary);
+  }
+
+  .sp-group-header--collapsed .sp-group-header-chevron {
+    transform: rotate(0deg);
+  }
+
+  .sp-group-header-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .sp-group-header-icon svg {
+    width: 14px;
+    height: 14px;
+    color: var(--sp-text-tertiary);
+  }
+
+  .sp-group-header-path {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--sp-text-secondary);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sp-group-header-count {
+    font-size: 11px;
+    font-weight: 700;
+    padding: 1px 8px;
+    border-radius: var(--sp-radius-full);
+    flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ============================
+     Page Group Content
+     ============================ */
+
+  .sp-group-content {
+    overflow: hidden;
+    transition: max-height 0.25s ease, opacity 0.2s ease;
+    max-height: 5000px;
+    opacity: 1;
+  }
+
+  .sp-group-content--collapsed {
+    max-height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* ============================
+     Forced Colors / High Contrast
+     ============================ */
+
+  @media (forced-colors: active) {
+    .sp-sort-btn,
+    .sp-group-toggle,
+    .sp-sort-option,
+    .sp-group-header {
+      border: 2px solid ButtonText !important;
+      background: Canvas !important;
+      color: ButtonText !important;
+    }
+
+    .sp-sort-btn:focus-visible,
+    .sp-group-toggle:focus-visible,
+    .sp-sort-option:focus-visible,
+    .sp-group-header:focus-visible {
+      outline: 3px solid Highlight !important;
+    }
+
+    .sp-sort-menu {
+      border: 2px solid ButtonText !important;
+      background: Canvas !important;
+    }
+  }
+
+  /* ============================
+     Reduced Motion
+     ============================ */
+
+  @media (prefers-reduced-motion: reduce) {
+    .sp-sort-menu {
+      animation: none;
+    }
+    .sp-group-header-chevron {
+      transition: none;
+    }
+    .sp-group-content {
+      transition: none;
+    }
+  }
+`;var wt=`
+  .sp-stats-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px 24px;
+    border-bottom: 1px solid var(--sp-border);
+    user-select: none;
+  }
+
+  .sp-stats-bar[hidden] {
+    display: none;
+  }
+
+  .sp-stats-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .sp-stats-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .sp-stats-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .sp-stats-value {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--sp-text);
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum";
+    transition: opacity 0.3s ease;
+  }
+
+  .sp-stats-label {
+    font-size: 11px;
+    line-height: 1;
+    color: var(--sp-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .sp-stats-progress {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .sp-stats-progress-track {
+    flex: 1;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--sp-border);
+    overflow: hidden;
+  }
+
+  .sp-stats-progress-fill {
+    height: 100%;
+    border-radius: 2px;
+    background: linear-gradient(90deg, var(--sp-accent), #22c55e);
+    width: 0%;
+    transition: width 0.5s ease;
+  }
+
+  .sp-stats-progress-label {
+    font-size: 10px;
+    line-height: 1;
+    color: var(--sp-text-tertiary);
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum";
+    min-width: 64px;
+    text-align: right;
+  }
+`,W=class{constructor(e,t){this.colors=e;this.t=t,this.element=r("div",{class:"sp-stats-bar"}),this.element.setAttribute("aria-label","Feedback statistics"),this.element.hidden=true;let s=r("div",{class:"sp-stats-row"}),n=r("div",{class:"sp-stats-item"}),i=r("span",{class:"sp-stats-dot"});i.style.background="#22c55e",this.valueOpen=r("span",{class:"sp-stats-value"}),a(this.valueOpen,"0");let l=r("span",{class:"sp-stats-label"});a(l,this.t("stats.open")),n.appendChild(i),n.appendChild(this.valueOpen),n.appendChild(l);let d=r("div",{class:"sp-stats-item"}),p=r("span",{class:"sp-stats-dot"});p.style.background="#9ca3af",this.valueResolved=r("span",{class:"sp-stats-value"}),a(this.valueResolved,"0");let u=r("span",{class:"sp-stats-label"});a(u,this.t("stats.resolved")),d.appendChild(p),d.appendChild(this.valueResolved),d.appendChild(u);let h=r("div",{class:"sp-stats-item"}),v=r("span",{class:"sp-stats-dot"});v.style.background=this.colors.typeBug,this.valueBugs=r("span",{class:"sp-stats-value"}),a(this.valueBugs,"0");let f=r("span",{class:"sp-stats-label"});a(f,this.t("stats.bugs")),h.appendChild(v),h.appendChild(this.valueBugs),h.appendChild(f),s.appendChild(n),s.appendChild(d),s.appendChild(h);let m=r("div",{class:"sp-stats-progress"}),g=r("div",{class:"sp-stats-progress-track"});this.progressFill=r("div",{class:"sp-stats-progress-fill"}),g.appendChild(this.progressFill),this.progressLabel=r("span",{class:"sp-stats-progress-label"}),a(this.progressLabel,""),m.appendChild(g),m.appendChild(this.progressLabel),this.element.appendChild(s),this.element.appendChild(m);}colors;element;valueOpen;valueResolved;valueBugs;progressFill;progressLabel;t;update(e,t){if(t===0){this.element.hidden=true;return}this.element.hidden=false;let s=0,n=0,i=0;for(let u of e)u.status==="open"&&s++,u.status==="resolved"&&n++,u.type==="bug"&&i++;a(this.valueOpen,String(s)),a(this.valueResolved,String(n)),a(this.valueBugs,String(i));let l=e.length,d=l>0?Math.round(n/l*100):0;requestAnimationFrame(()=>{this.progressFill.style.width=`${d}%`;});let p=this.t("stats.progress").replace("{percent}",String(d));a(this.progressLabel,p);}};var Me='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 8h.01"/><path d="M10 8h.01"/><path d="M14 8h.01"/><path d="M18 8h.01"/><path d="M6 12h.01"/><path d="M18 12h.01"/><path d="M8 16h8"/></svg>';function Tt(o){let e=o.querySelectorAll(".sp-card");for(let t=0;t<e.length;t++)if(e[t]?.classList.contains("sp-card--focused"))return t;return  -1}function St(o,e){let t=o.querySelectorAll(".sp-card");if(t.length===0)return;for(let i of t)i.classList.remove("sp-card--focused");let s=Math.max(0,Math.min(e,t.length-1)),n=t[s];n&&(n.classList.add("sp-card--focused"),n.scrollIntoView({block:"nearest",behavior:"smooth"}),n.focus({preventScroll:true}));}var Le=[{keys:["J","K"],label:"shortcuts.navigate"},{keys:["R"],label:"shortcuts.resolve"},{keys:["D"],label:"shortcuts.delete"},{keys:["F","/"],label:"shortcuts.search"},{keys:["X"],label:"shortcuts.select"},{keys:["?"],label:"shortcuts.help"},{keys:["Esc"],label:"shortcuts.close"}],Mt=`
+  /* ---- Help overlay backdrop ---- */
+
+  .sp-shortcuts-overlay {
+    position: fixed;
+    inset: 0;
+    background: var(--sp-backdrop, rgba(15, 23, 42, 0.2));
+    backdrop-filter: blur(var(--sp-blur));
+    -webkit-backdrop-filter: blur(var(--sp-blur));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+  }
+
+  .sp-shortcuts-overlay--visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* ---- Glassmorphism card ---- */
+
+  .sp-shortcuts-card {
+    width: 380px;
+    max-width: calc(100vw - 32px);
+    padding: 24px 28px 20px;
+    border-radius: 20px;
+    background: var(--sp-glass-bg-heavy);
+    backdrop-filter: blur(var(--sp-blur-heavy));
+    -webkit-backdrop-filter: blur(var(--sp-blur-heavy));
+    border: 1px solid var(--sp-glass-border);
+    box-shadow: var(--sp-shadow-xl);
+    font-family: var(--sp-font);
+    position: relative;
+    transform: scale(0.92) translateY(8px);
+    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .sp-shortcuts-overlay--visible .sp-shortcuts-card {
+    transform: scale(1) translateY(0);
+  }
+
+  /* ---- Title row ---- */
+
+  .sp-shortcuts-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--sp-text);
+    margin-bottom: 18px;
+  }
+
+  .sp-shortcuts-title svg {
+    width: 18px;
+    height: 18px;
+    color: var(--sp-text-secondary);
+    flex-shrink: 0;
+  }
+
+  /* ---- Close button ---- */
+
+  .sp-shortcuts-close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    color: var(--sp-text-tertiary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s ease, color 0.15s ease;
+  }
+
+  .sp-shortcuts-close:hover {
+    background: var(--sp-bg-hover);
+    color: var(--sp-text);
+  }
+
+  .sp-shortcuts-close svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* ---- Two-column grid ---- */
+
+  .sp-shortcuts-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .sp-shortcuts-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .sp-shortcuts-keys {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 80px;
+    justify-content: flex-end;
+  }
+
+  .sp-shortcuts-separator {
+    font-size: 11px;
+    color: var(--sp-text-tertiary);
+    user-select: none;
+  }
+
+  /* ---- Key badge (<kbd> styling) ---- */
+
+  .sp-kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 28px;
+    height: 26px;
+    padding: 0 7px;
+    border-radius: 6px;
+    background: var(--sp-bg-hover);
+    border: 1px solid var(--sp-border);
+    box-shadow:
+      inset 0 -1px 0 rgba(0, 0, 0, 0.08),
+      0 1px 2px rgba(0, 0, 0, 0.04);
+    font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--sp-text);
+    text-align: center;
+    line-height: 1;
+    user-select: none;
+  }
+
+  /* ---- Description text ---- */
+
+  .sp-shortcuts-desc {
+    font-size: 13px;
+    color: var(--sp-text-secondary);
+    line-height: 1.3;
+  }
+
+  /* ---- Hint button (bottom-right of panel) ---- */
+
+  .sp-shortcuts-hint {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--sp-radius-full);
+    border: 1px solid var(--sp-border);
+    background: var(--sp-bg-hover);
+    color: var(--sp-text-tertiary);
+    font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+  }
+
+  .sp-shortcuts-hint:hover {
+    background: var(--sp-accent-light);
+    color: var(--sp-accent);
+    border-color: var(--sp-accent);
+  }
+
+  .sp-shortcuts-hint::after {
+    content: attr(aria-label);
+    position: absolute;
+    bottom: calc(100% + 6px);
+    right: 0;
+    padding: 4px 8px;
+    border-radius: 6px;
+    background: var(--sp-glass-bg-heavy);
+    border: 1px solid var(--sp-glass-border);
+    box-shadow: var(--sp-shadow-sm);
+    font-family: var(--sp-font);
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--sp-text-secondary);
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(4px);
+    transition: opacity 0.15s ease, transform 0.15s ease;
+  }
+
+  .sp-shortcuts-hint:hover::after {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* ---- Card focus highlight (navigation) ---- */
+
+  .sp-card--focused {
+    outline: 2px solid var(--sp-accent);
+    outline-offset: -2px;
+    border-radius: inherit;
+  }
+
+  /* ---- Reduced motion ---- */
+
+  @media (prefers-reduced-motion: reduce) {
+    .sp-shortcuts-overlay,
+    .sp-shortcuts-card,
+    .sp-shortcuts-close,
+    .sp-shortcuts-hint,
+    .sp-shortcuts-hint::after {
+      transition-duration: 0.01ms !important;
+    }
+  }
+`,Ae='<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>',X=class{constructor(e,t,s){this.t=s;this.keyMap=new Map([["j",()=>t.onNavigate("down")],["k",()=>t.onNavigate("up")],["r",()=>t.onResolve()],["d",()=>t.onDelete()],["f",()=>t.onFocusSearch()],["/",()=>t.onFocusSearch()],["x",()=>t.onToggleSelect()],["?",()=>this.toggleHelp()]]),this.helpOverlay=this.buildOverlay(),this.hintButton=this.buildHintButton(),this.boundHandler=n=>this.handleKeydown(n);}t;helpOverlay;hintButton;keyMap;boundHandler;shadowRoot=null;enabled=false;helpVisible=false;destroyed=false;enable(e){if(this.destroyed||this.enabled)return;e&&(this.shadowRoot=e),(this.shadowRoot??document).addEventListener("keydown",this.boundHandler),this.enabled=true;}disable(){if(!this.enabled)return;(this.shadowRoot??document).removeEventListener("keydown",this.boundHandler),this.enabled=false,this.helpVisible&&this.hideHelp();}toggleHelp(){this.helpVisible?this.hideHelp():this.showHelp();}destroy(){this.destroyed||(this.disable(),this.helpOverlay.remove(),this.hintButton.remove(),this.destroyed=true);}handleKeydown(e){if(e.key==="Escape"){this.helpVisible&&(e.preventDefault(),e.stopPropagation(),this.hideHelp());return}if(this.helpVisible)return;let t=e.composedPath()[0];if(t){let n=t.tagName?.toLowerCase();if(n==="input"||n==="textarea"||n==="select"||t.isContentEditable)return}if(e.ctrlKey||e.altKey||e.metaKey)return;let s=this.keyMap.get(e.key);s&&(e.preventDefault(),e.stopPropagation(),s());}showHelp(){this.helpVisible=true,this.helpOverlay.classList.add("sp-shortcuts-overlay--visible"),this.helpOverlay.querySelector(".sp-shortcuts-close")?.focus();}hideHelp(){this.helpVisible=false,this.helpOverlay.classList.remove("sp-shortcuts-overlay--visible");}buildOverlay(){let e=r("div",{class:"sp-shortcuts-overlay"});e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("aria-label",this.t("shortcuts.title")),e.addEventListener("click",d=>{d.target===e&&this.hideHelp();});let t=r("div",{class:"sp-shortcuts-card"}),s=r("div",{class:"sp-shortcuts-title"});s.appendChild(c(Me));let n=r("span");a(n,this.t("shortcuts.title")),s.appendChild(n),t.appendChild(s);let i=document.createElement("button");i.className="sp-shortcuts-close",i.setAttribute("aria-label",this.t("shortcuts.close")),i.appendChild(c(Ae)),i.addEventListener("click",()=>this.hideHelp()),t.appendChild(i);let l=r("div",{class:"sp-shortcuts-grid"});for(let d of Le){let p=r("div",{class:"sp-shortcuts-row"}),u=r("div",{class:"sp-shortcuts-keys"});d.keys.forEach((v,f)=>{if(f>0){let g=r("span",{class:"sp-shortcuts-separator"});a(g,"/"),u.appendChild(g);}let m=r("span",{class:"sp-kbd"});a(m,v),u.appendChild(m);});let h=r("span",{class:"sp-shortcuts-desc"});a(h,this.t(d.label)),p.appendChild(u),p.appendChild(h),l.appendChild(p);}return t.appendChild(l),e.appendChild(t),e}buildHintButton(){let e=document.createElement("button");return e.className="sp-shortcuts-hint",e.setAttribute("aria-label",this.t("shortcuts.hint")),a(e,"?"),e.addEventListener("click",t=>{t.stopPropagation(),this.toggleHelp();}),e}};export{st as A,ot as B,nt as C,at as D,P as E,dt as F,I as G,gt as H,Y as I,xt as J,mt as K,ft as L,q as M,yt as N,wt as O,W as P,Tt as Q,St as R,Mt as S,X as T,c as a,r as b,a as c,L as d,Re as e,Oe as f,Fe as g,Ne as h,je as i,_e as j,De as k,$e as l,Pe as m,ze as n,Ie as o,Ve as p,Ge as q,Ue as r,Ye as s,Ke as t,qe as u,Qe as v,Xe as w,A as x,N as y,Je as z};//# sourceMappingURL=chunk-OTJZRTBK.js.map
+//# sourceMappingURL=chunk-OTJZRTBK.js.map