@li2/analytics 0.3.3 → 0.4.0-beta.1

package/dist/toolbar/index.mjs

@@ -1,4 +1,53 @@
-import{a as y}from"../chunk-FF6VDEL5.mjs";async function k(n){let e=new URL(`${n.apiUrl}/api/v1/track/heatmap/clicks`);e.searchParams.set("page_path",n.pagePath),e.searchParams.set("from",n.from),e.searchParams.set("to",n.to),e.searchParams.set("target_width",String(n.targetWidth)),n.deviceType&&e.searchParams.set("device_type",n.deviceType);let t={"X-Li2-Key":n.publishableKey};n.sessionToken&&(t["X-Li2-Session"]=n.sessionToken);let i=await fetch(e.toString(),{headers:t});if(!i.ok)throw new Error(`Heatmap API error: ${i.status}`);return(await i.json()).data.heatmap}var C=[[0,[0,0,255,128]],[.25,[0,255,255,200]],[.5,[0,255,0,220]],[.75,[255,255,0,240]],[1,[255,0,0,255]]];function L(n){if(n<=0)return[0,0,0,0];let e=Math.min(1,Math.max(0,n));for(let t=0;t<C.length-1;t++){let[i,a]=C[t],[r,l]=C[t+1];if(e>=i&&e<=r){let o=(e-i)/(r-i);return[Math.round(a[0]+(l[0]-a[0])*o),Math.round(a[1]+(l[1]-a[1])*o),Math.round(a[2]+(l[2]-a[2])*o),Math.round(a[3]+(l[3]-a[3])*o)]}}return[255,0,0,255]}var O=30;function S(n,e,t,i,a=O){let r=n.getContext("2d");if(!r||e.length===0||t===0||i===0)return;n.width=t,n.height=i;let l=Math.max(...e.map(s=>s.count));if(l===0)return;let o=document.createElement("canvas");o.width=t,o.height=i;let c=o.getContext("2d");if(!c)return;c.fillStyle="black",c.fillRect(0,0,t,i),c.globalCompositeOperation="lighter";for(let s of e){if(s.x<-a||s.x>t+a||s.y<-a||s.y>i+a)continue;let u=s.count/l,d=c.createRadialGradient(s.x,s.y,0,s.x,s.y,a);d.addColorStop(0,`rgba(255,255,255,${u})`),d.addColorStop(.33,`rgba(255,255,255,${u*.607})`),d.addColorStop(.67,`rgba(255,255,255,${u*.135})`),d.addColorStop(1,"rgba(255,255,255,0)"),c.fillStyle=d,c.beginPath(),c.arc(s.x,s.y,a,0,Math.PI*2),c.fill()}let m=c.getImageData(0,0,t,i).data,p=r.createImageData(t,i),h=p.data;for(let s=0;s<m.length;s+=4){let u=m[s]/255;if(u>.01){let[d,R,I,N]=L(u);h[s]=d,h[s+1]=R,h[s+2]=I,h[s+3]=N}}r.putImageData(p,0,0)}var b=class{constructor(){this.grid=[];this.handleResize=()=>{this.resize(),this.doRender()};this.canvas=document.createElement("canvas"),this.canvas.style.cssText="position:absolute;top:0;left:0;pointer-events:none;z-index:99998;"}mount(){document.body.appendChild(this.canvas),this.resize(),window.addEventListener("resize",this.handleResize)}unmount(){this.canvas.remove(),window.removeEventListener("resize",this.handleResize)}render(e){this.grid=e,this.doRender()}setOpacity(e){this.canvas.style.opacity=String(e)}resize(){let e=document.documentElement.scrollWidth,t=document.documentElement.scrollHeight;this.canvas.style.width=`${e}px`,this.canvas.style.height=`${t}px`}doRender(){if(this.grid.length===0)return;let e=document.documentElement.scrollWidth,t=document.documentElement.scrollHeight;S(this.canvas,this.grid,e,t)}};var x=class{constructor(){this.highlight=null;this.tooltip=null;this.currentElement=null}mount(){this.highlight=document.createElement("div"),this.highlight.className="__li2-tagger-highlight",document.body.appendChild(this.highlight),this.tooltip=document.createElement("div"),this.tooltip.className="__li2-tagger-tooltip",document.body.appendChild(this.tooltip)}unmount(){this.highlight?.remove(),this.tooltip?.remove(),this.highlight=null,this.tooltip=null,this.currentElement=null}highlightElement(e){if(!this.highlight||!this.tooltip||e===this.currentElement)return;this.currentElement=e;let t=e.getBoundingClientRect(),i=window.getComputedStyle(e).position==="fixed",a=Math.max(t.width,20),r=Math.max(t.height,20);this.highlight.style.position=i?"fixed":"absolute",this.highlight.style.top=i?`${t.top}px`:`${t.top+window.scrollY}px`,this.highlight.style.left=i?`${t.left}px`:`${t.left+window.scrollX}px`,this.highlight.style.width=`${a}px`,this.highlight.style.height=`${r}px`,this.highlight.style.display="block";let l=e.tagName.toLowerCase(),o=(e.innerText||"").trim().slice(0,40),c=e.id?` #${e.id}`:"",g=o?` "${o}${o.length>=40?"...":""}"`:"";this.tooltip.textContent=`<${l}>${g}${c}`,this.tooltip.style.position=i?"fixed":"absolute";let m=i?t.top-28:t.top+window.scrollY-28;this.tooltip.style.top=`${Math.max(m,4)}px`,this.tooltip.style.left=i?`${t.left}px`:`${t.left+window.scrollX}px`,this.tooltip.style.display="block"}clearHighlight(){this.highlight&&(this.highlight.style.display="none"),this.tooltip&&(this.tooltip.style.display="none"),this.currentElement=null}fixSelection(e){this.highlightElement(e),this.highlight&&this.highlight.classList.add("__li2-tagger-highlight--selected")}clearSelection(){this.highlight&&this.highlight.classList.remove("__li2-tagger-highlight--selected")}updatePosition(){if(this.currentElement){let e=this.currentElement;this.currentElement=null,this.highlightElement(e)}}};var _=class{constructor(e,t){this.active=!1;this.overlay=e,this.callbacks=t,this.handleMouseMove=this.onMouseMove.bind(this),this.handleClick=this.onClick.bind(this),this.handleScroll=this.onScroll.bind(this)}activate(){this.active||(this.active=!0,document.addEventListener("mousemove",this.handleMouseMove,!0),document.addEventListener("click",this.handleClick,!0),window.addEventListener("scroll",this.handleScroll,!0))}deactivate(){this.active&&(this.active=!1,document.removeEventListener("mousemove",this.handleMouseMove,!0),document.removeEventListener("click",this.handleClick,!0),window.removeEventListener("scroll",this.handleScroll,!0),this.overlay.clearHighlight(),this.overlay.clearSelection())}onMouseMove(e){let t=e.target;if(!t)return;if(this.isToolbarElement(t)){this.overlay.clearHighlight();return}if(!y(t)){this.overlay.clearHighlight();return}let a=this.findMeaningfulDomElement(t);a&&this.overlay.highlightElement(a)}onClick(e){let t=e.target;if(!t||this.isToolbarElement(t))return;e.preventDefault(),e.stopPropagation();let i=y(t);if(!i)return;let a=this.findMeaningfulDomElement(t);a&&(this.overlay.fixSelection(a),this.callbacks.onElementSelected(a,i))}onScroll(){this.overlay.updatePosition()}isToolbarElement(e){let t=e;for(;t;){let i=t.className;if(typeof i=="string"&&(i.includes("__li2-toolbar")||i.includes("__li2-tagger")))return!0;t=t.parentElement}return!1}findMeaningfulDomElement(e){let t=new Set(["a","button","input","select","textarea","form","label"]),i=new Set(["button","link","tab","menuitem"]),a=e,r=0;for(;a&&r<5&&a.tagName!=="BODY";){let l=a.tagName.toLowerCase(),o=a.getAttribute("role");if(t.has(l)||o&&i.has(o))return a;a=a.parentElement,r++}return e}};var f=class extends Error{constructor(e,t){super(t),this.status=e}};function M(n){return{"X-Li2-Key":n.publishableKey,"X-Li2-Session":n.sessionToken}}async function P(n,e){let t=await fetch(`${n.apiUrl}/api/v1/track/event-rules`,{method:"POST",headers:{"Content-Type":"application/json",...M(n)},body:JSON.stringify(e)}),i=await t.json().catch(()=>({}));if(!t.ok){let a=i.error||i.message||`Error ${t.status}`;throw new f(t.status,a)}return i.data}async function H(n){let e=await fetch(`${n.apiUrl}/api/v1/track/event-rules`,{headers:M(n)});if(!e.ok)throw new f(e.status,"Failed to load existing rules");return(await e.json()).data||[]}var E=class{constructor(e){this.root=null;this.nameInput=null;this.nameError=null;this.submitBtn=null;this.statusEl=null;this.rulesListEl=null;this.criteriaCheckboxes=new Map;this.existingRules=[];this.currentInfo=null;this.state="idle";this.config=e}mount(){this.root=document.createElement("div"),this.root.className="__li2-tagger-panel",this.root.style.display="none",document.body.appendChild(this.root),this.fetchExistingRules()}unmount(){this.root?.remove(),this.root=null,this.criteriaCheckboxes.clear()}show(e){this.currentInfo=e,this.state="selected",this.buildPanelContent(e),this.root&&(this.root.style.display="block")}hide(){this.currentInfo=null,this.state="idle",this.root&&(this.root.style.display="none",this.root.innerHTML=""),this.criteriaCheckboxes.clear()}buildPanelContent(e){if(!this.root)return;this.root.innerHTML="",this.criteriaCheckboxes.clear();let t=document.createElement("div");t.className="__li2-tagger-panel-header";let i=document.createElement("span");i.textContent="Create Event Rule",t.appendChild(i);let a=document.createElement("button");a.className="__li2-tagger-panel-close",a.textContent="\xD7",a.addEventListener("click",()=>this.handleCancel()),t.appendChild(a),this.root.appendChild(t);let r=document.createElement("div");r.className="__li2-tagger-summary";let l=e.text?` "${e.text.slice(0,30)}${e.text.length>30?"...":""}"`:"";r.textContent=`Selected: <${e.tag}>${l} on ${window.location.pathname}`,this.root.appendChild(r);let o=document.createElement("div");o.className="__li2-tagger-field";let c=document.createElement("label");c.className="__li2-tagger-label",c.textContent="Event name",o.appendChild(c),this.nameInput=document.createElement("input"),this.nameInput.type="text",this.nameInput.placeholder="e.g. signup_click",this.nameInput.className="__li2-tagger-input",this.nameInput.addEventListener("input",()=>this.onNameInput()),o.appendChild(this.nameInput),this.nameError=document.createElement("div"),this.nameError.className="__li2-tagger-field-error",o.appendChild(this.nameError),this.root.appendChild(o);let g=document.createElement("div");g.className="__li2-tagger-label",g.textContent="Match criteria",this.root.appendChild(g);let m=[{key:"selector_path",label:"CSS Selector",value:e.selectorPath||null},{key:"element_text",label:"Text contains",value:e.text||null},{key:"element_id",label:"Element ID",value:e.id||null},{key:"element_href",label:"Link href",value:e.href||null},{key:"page_path",label:"Page path",value:window.location.pathname}];for(let u of m){let d=this.createCriterionRow(u);this.root.appendChild(d)}this.statusEl=document.createElement("div"),this.statusEl.className="__li2-tagger-panel-status",this.root.appendChild(this.statusEl);let p=document.createElement("div");p.className="__li2-tagger-btn-row";let h=document.createElement("button");h.className="__li2-tagger-btn __li2-tagger-btn-cancel",h.textContent="Cancel",h.addEventListener("click",()=>this.handleCancel()),p.appendChild(h),this.submitBtn=document.createElement("button"),this.submitBtn.className="__li2-tagger-btn __li2-tagger-btn-submit",this.submitBtn.textContent="Create Event Rule",this.submitBtn.addEventListener("click",()=>this.handleSubmit()),p.appendChild(this.submitBtn),this.root.appendChild(p);let s=document.createElement("div");s.className="__li2-tagger-rules-header",s.textContent="Existing rules",this.root.appendChild(s),this.rulesListEl=document.createElement("div"),this.rulesListEl.className="__li2-tagger-rules-list",this.renderRulesList(),this.root.appendChild(this.rulesListEl),setTimeout(()=>this.nameInput?.focus(),50)}createCriterionRow(e){let t=document.createElement("div");t.className="__li2-tagger-criterion";let i=document.createElement("input");i.type="checkbox",i.checked=!!e.value,i.disabled=!e.value,i.addEventListener("change",()=>this.updateSubmitState()),this.criteriaCheckboxes.set(e.key,i),t.appendChild(i);let a=document.createElement("span");a.className="__li2-tagger-criterion-label",a.textContent=e.label+":",t.appendChild(a);let r=document.createElement("span");return r.className="__li2-tagger-criterion-value",r.textContent=e.value?z(e.value,60):"(empty)",e.value||(r.style.color="#666"),t.appendChild(r),t}onNameInput(){if(!this.nameInput)return;let e=this.nameInput.value,t=e.toLowerCase().replace(/[^a-z0-9_]/g,"");t!==e&&(this.nameInput.value=t),this.validateName(),this.updateSubmitState()}validateName(){let e=this.nameInput?.value||"",t=null;return e?e.length>256?t="Max 256 characters":/^[a-z0-9_]+$/.test(e)?this.existingRules.some(i=>i.name===e)&&(t="Event name already exists"):t="Only lowercase letters, numbers, and underscores":t=null,this.nameError&&(this.nameError.textContent=t||""),t}updateSubmitState(){if(!this.submitBtn)return;let e=!!this.nameInput?.value&&!this.validateName(),t=this.getCheckedCriteria().length>0;this.submitBtn.disabled=!e||!t||this.state==="creating"}getCheckedCriteria(){let e=[];for(let[t,i]of this.criteriaCheckboxes)i.checked&&e.push(t);return e}async handleSubmit(){if(!this.nameInput||!this.currentInfo)return;let e=this.nameInput.value;if(!e||this.validateName())return;this.state="creating",this.setFormDisabled(!0),this.setStatus("Creating...","loading");let t=new Set(this.getCheckedCriteria()),i=this.currentInfo,a={name:e,selector_path:t.has("selector_path")&&i.selectorPath||void 0,element_text:t.has("element_text")&&i.text||void 0,element_id:t.has("element_id")&&i.id||void 0,element_href:t.has("element_href")&&i.href||void 0,page_path:t.has("page_path")?window.location.pathname:void 0,text_match_mode:t.has("element_text")?"contains":void 0},r={};for(let[l,o]of Object.entries(a))o!==void 0&&(r[l]=o);try{await P(this.config.apiConfig,r),this.state="success",this.setStatus(`Event rule '${e}' created!`,"success"),await this.fetchExistingRules(),setTimeout(()=>{this.hide(),this.config.onCreated(e)},2e3)}catch(l){this.state="error",this.setFormDisabled(!1),l instanceof f?this.setStatus(l.message,"error"):this.setStatus("Connection failed. Please try again.","error")}}handleCancel(){this.hide(),this.config.onCancel()}setFormDisabled(e){this.nameInput&&(this.nameInput.disabled=e),this.submitBtn&&(this.submitBtn.disabled=e,this.submitBtn.textContent=e?"Creating...":"Create Event Rule");for(let t of this.criteriaCheckboxes.values())(t.checked||!e)&&(t.disabled=e?!0:!t.checked)}setStatus(e,t){this.statusEl&&(this.statusEl.textContent=e,this.statusEl.className="__li2-tagger-panel-status",t==="loading"?this.statusEl.classList.add("__li2-tagger-status-loading"):t==="success"?this.statusEl.classList.add("__li2-tagger-status-success"):t==="error"&&this.statusEl.classList.add("__li2-tagger-status-error"))}async fetchExistingRules(){try{this.existingRules=await H(this.config.apiConfig),this.renderRulesList()}catch{}}renderRulesList(){if(this.rulesListEl){if(this.rulesListEl.innerHTML="",this.existingRules.length===0){let e=document.createElement("div");e.className="__li2-tagger-rules-empty",e.textContent="No rules yet",this.rulesListEl.appendChild(e);return}for(let e of this.existingRules){let t=document.createElement("div");t.className="__li2-tagger-rule-item",t.textContent=`\u2022 ${e.name}`,this.rulesListEl.appendChild(t)}}}};function z(n,e){return n.length>e?n.slice(0,e)+"...":n}var v=class{constructor(e){this.root=null;this.statsEl=null;this.statusEl=null;this.config=e}mount(){this.root=document.createElement("div"),this.root.className="__li2-toolbar",this.config.mode==="tagger"?this.mountTagger():this.mountHeatmap(),document.body.appendChild(this.root)}mountHeatmap(){if(!this.root)return;let e=document.createElement("span");e.textContent="Li2 Heatmap",this.root.appendChild(e),this.root.appendChild(this.createSeparator()),this.statsEl=document.createElement("span"),this.statsEl.className="__li2-toolbar-stat",this.statsEl.textContent="...",this.root.appendChild(this.statsEl),this.root.appendChild(this.createSeparator()),this.statusEl=document.createElement("span"),this.root.appendChild(this.statusEl);let t=document.createElement("input");t.type="range",t.min="0",t.max="100",t.value=String(Math.round(this.config.initialOpacity*100)),t.className="__li2-toolbar-slider",t.addEventListener("input",()=>{this.config.onOpacityChange(Number(t.value)/100)}),this.root.appendChild(t),this.appendCloseButton("Close heatmap")}mountTagger(){if(!this.root)return;let e=document.createElement("span");e.textContent="Li2 Event Tagger",this.root.appendChild(e),this.root.appendChild(this.createSeparator()),this.statusEl=document.createElement("span"),this.statusEl.className="__li2-toolbar-status",this.statusEl.textContent="Click an element to tag",this.root.appendChild(this.statusEl),this.appendCloseButton("Close tagger")}appendCloseButton(e){if(!this.root)return;let t=document.createElement("button");t.className="__li2-toolbar-close",t.textContent="\xD7",t.title=e,t.addEventListener("click",this.config.onClose),this.root.appendChild(t)}unmount(){this.root?.remove(),this.root=null}setStats(e,t){this.statsEl&&(this.statsEl.textContent=`${e.toLocaleString()} clicks`)}setLoading(e){this.statusEl&&(e?(this.statusEl.className="__li2-toolbar-loading",this.statusEl.textContent="Loading..."):(this.statusEl.textContent="",this.statusEl.className=""))}setStatus(e){this.statusEl&&(this.statusEl.className="__li2-toolbar-status",this.statusEl.textContent=e)}setError(e){this.statusEl&&(this.statusEl.className="__li2-toolbar-error",this.statusEl.textContent=e)}createSeparator(){let e=document.createElement("span");return e.style.cssText="color:#555;user-select:none;",e.textContent="|",e}};function w(){if(document.getElementById("__li2-toolbar-styles"))return;let n=document.createElement("style");n.id="__li2-toolbar-styles",n.textContent=`
+import{a as k}from"../chunk-FF6VDEL5.mjs";import{a as b}from"../chunk-EO7Y3K6L.mjs";function O(n,e){let t={"X-Li2-Key":n,"X-Li2-SDK-Version":b};return e&&(t["X-Li2-Session"]=e),t}async function R(n){let e=new URL(`${n.apiUrl}/api/v1/track/heatmap/clicks`);e.searchParams.set("page_path",n.pagePath),e.searchParams.set("from",n.from),e.searchParams.set("to",n.to),e.searchParams.set("target_width",String(n.targetWidth)),n.deviceType&&e.searchParams.set("device_type",n.deviceType);let t=await fetch(e.toString(),{headers:O(n.publishableKey,n.sessionToken)});if(!t.ok)throw new Error(`Heatmap API error: ${t.status}`);return(await t.json()).data.heatmap}async function N(n){let e=new URL(`${n.apiUrl}/api/v1/track/heatmap/scroll`);e.searchParams.set("page_path",n.pagePath),e.searchParams.set("from",n.from),e.searchParams.set("to",n.to),n.deviceType&&e.searchParams.set("device_type",n.deviceType);let t=await fetch(e.toString(),{headers:O(n.publishableKey,n.sessionToken)});if(!t.ok)throw new Error(`Scroll heatmap API error: ${t.status}`);return(await t.json()).data}var L=[[0,[0,0,255,128]],[.25,[0,255,255,200]],[.5,[0,255,0,220]],[.75,[255,255,0,240]],[1,[255,0,0,255]]];function x(n){if(n<=0)return[0,0,0,0];let e=Math.min(1,Math.max(0,n));for(let t=0;t<L.length-1;t++){let[i,s]=L[t],[o,r]=L[t+1];if(e>=i&&e<=o){let a=(e-i)/(o-i);return[Math.round(s[0]+(r[0]-s[0])*a),Math.round(s[1]+(r[1]-s[1])*a),Math.round(s[2]+(r[2]-s[2])*a),Math.round(s[3]+(r[3]-s[3])*a)]}}return[255,0,0,255]}var A=30;function I(n,e,t,i,s=A){let o=n.getContext("2d");if(!o||e.length===0||t===0||i===0)return;n.width=t,n.height=i;let r=Math.max(...e.map(l=>l.count));if(r===0)return;let a=document.createElement("canvas");a.width=t,a.height=i;let c=a.getContext("2d");if(!c)return;c.fillStyle="black",c.fillRect(0,0,t,i),c.globalCompositeOperation="lighter";for(let l of e){if(l.x<-s||l.x>t+s||l.y<-s||l.y>i+s)continue;let u=l.count/r,d=c.createRadialGradient(l.x,l.y,0,l.x,l.y,s);d.addColorStop(0,`rgba(255,255,255,${u})`),d.addColorStop(.33,`rgba(255,255,255,${u*.607})`),d.addColorStop(.67,`rgba(255,255,255,${u*.135})`),d.addColorStop(1,"rgba(255,255,255,0)"),c.fillStyle=d,c.beginPath(),c.arc(l.x,l.y,s,0,Math.PI*2),c.fill()}let m=c.getImageData(0,0,t,i).data,g=o.createImageData(t,i),p=g.data;for(let l=0;l<m.length;l+=4){let u=m[l]/255;if(u>.01){let[d,S,T,U]=x(u);p[l]=d,p[l+1]=S,p[l+2]=T,p[l+3]=U}}o.putImageData(g,0,0)}var y=class{constructor(){this.grid=[];this.handleResize=()=>{this.resize(),this.doRender()};this.canvas=document.createElement("canvas"),this.canvas.style.cssText="position:absolute;top:0;left:0;pointer-events:none;z-index:99998;"}mount(){document.body.appendChild(this.canvas),this.resize(),window.addEventListener("resize",this.handleResize)}unmount(){this.canvas.remove(),window.removeEventListener("resize",this.handleResize)}render(e){this.grid=e,this.doRender()}setOpacity(e){this.canvas.style.opacity=String(e)}resize(){let e=document.documentElement.scrollWidth,t=document.documentElement.scrollHeight;this.canvas.style.width=`${e}px`,this.canvas.style.height=`${t}px`}doRender(){if(this.grid.length===0)return;let e=document.documentElement.scrollWidth,t=document.documentElement.scrollHeight;I(this.canvas,this.grid,e,t)}};var M=[0,25,50,75,90,100];function z(n,e,t){let i=n.getContext("2d");if(!i||t===0||e.length===0)return;let s=n.width,o=n.height;i.clearRect(0,0,s,o);let r=new Map;for(let a of e)r.set(a.scroll_depth_percent,a.sessions_reached);for(let a=0;a<M.length-1;a++){let c=M[a],h=M[a+1],m=c/100*o,g=h/100*o,l=(r.get(h)??0)/t,[u,d,S,T]=x(l);i.fillStyle=`rgba(${u},${d},${S},${T/255})`,i.fillRect(0,m,s,g-m)}}var K=[25,50,75,90,100],_=class{constructor(){this.milestones=[];this.totalSessions=0;this.handleResize=()=>{this.resize(),this.doRender(),this.renderBadges()};this.canvas=document.createElement("canvas"),this.canvas.style.cssText="position:absolute;top:0;left:0;pointer-events:none;z-index:99998;",this.badgesContainer=document.createElement("div"),this.badgesContainer.style.cssText="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99999;"}mount(){document.body.appendChild(this.canvas),document.body.appendChild(this.badgesContainer),this.resize(),window.addEventListener("resize",this.handleResize)}unmount(){this.canvas.remove(),this.badgesContainer.remove(),window.removeEventListener("resize",this.handleResize)}render(e,t){this.milestones=e,this.totalSessions=t,this.doRender(),this.renderBadges()}setOpacity(e){this.canvas.style.opacity=String(e)}resize(){let e=document.documentElement.scrollWidth,t=document.documentElement.scrollHeight;this.canvas.width=e,this.canvas.height=t,this.canvas.style.width=`${e}px`,this.canvas.style.height=`${t}px`}doRender(){this.milestones.length!==0&&z(this.canvas,this.milestones,this.totalSessions)}renderBadges(){if(this.badgesContainer.innerHTML="",this.totalSessions===0)return;let e=document.documentElement.scrollHeight;this.badgesContainer.style.height=`${e}px`;let t=new Map(this.milestones.map(i=>[i.scroll_depth_percent,i]));for(let i of K){let s=t.get(i);if(!s||s.sessions_reached===0)continue;let o=i/100*e,r=Math.round(s.sessions_reached/this.totalSessions*100),a=this.createAnchor(i,r,s.sessions_reached,s.avg_time_at_depth,o);this.badgesContainer.appendChild(a)}}createAnchor(e,t,i,s,o){let r=document.createElement("div");r.style.cssText=`
+      position: absolute;
+      right: 16px;
+      top: ${o}px;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      pointer-events: none;
+    `;let a=document.createElement("div");a.style.cssText=`
+      background: rgba(0, 0, 0, 0.9);
+      color: white;
+      padding: 6px 14px;
+      border-radius: 20px;
+      font: bold 12px system-ui, -apple-system, sans-serif;
+      white-space: nowrap;
+      pointer-events: auto;
+      cursor: default;
+      backdrop-filter: blur(12px);
+      border: 1.5px solid rgba(255, 255, 255, 0.25);
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+      transition: all 0.2s ease;
+    `,a.textContent=`${t}% reached this point`;let c=document.createElement("div");c.style.cssText=`
+      width: 40px;
+      height: 2px;
+      background-image: linear-gradient(to left, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 50%, transparent 50%, transparent 100%);
+      background-size: 8px 2px;
+      background-repeat: repeat-x;
+    `;let h=this.createPopover(e,t,i,s);return a.appendChild(h),a.addEventListener("mouseenter",()=>{a.style.background="rgba(0, 0, 0, 0.98)",a.style.transform="scale(1.05)",a.style.borderColor="rgba(255, 255, 255, 0.4)",h.style.display="block"}),a.addEventListener("mouseleave",()=>{a.style.background="rgba(0, 0, 0, 0.9)",a.style.transform="scale(1)",a.style.borderColor="rgba(255, 255, 255, 0.25)",h.style.display="none"}),r.appendChild(a),r.appendChild(c),r}createPopover(e,t,i,s){let o=document.createElement("div");o.style.cssText=`
+      display: none;
+      position: absolute;
+      right: calc(100% + 12px);
+      top: 50%;
+      transform: translateY(-50%);
+      background: rgba(0, 0, 0, 0.95);
+      color: white;
+      padding: 12px 16px;
+      border-radius: 8px;
+      font: normal 12px system-ui, -apple-system, sans-serif;
+      white-space: nowrap;
+      border: 1.5px solid rgba(255, 255, 255, 0.15);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(12px);
+      z-index: 1;
+    `;let r=(s/1e3).toFixed(1);return o.innerHTML=`
+      <div style="margin-bottom: 6px; font-weight: 600; font-size: 13px;">Scroll Depth: ${e}%</div>
+      <div style="color: rgba(255, 255, 255, 0.8);">Sessions: ${i.toLocaleString()}</div>
+      <div style="color: rgba(255, 255, 255, 0.8);">Reach: ${t}% of total</div>
+      <div style="color: rgba(255, 255, 255, 0.8);">Avg. time: ${r}s</div>
+    `,o}};var E=class{constructor(){this.highlight=null;this.tooltip=null;this.currentElement=null}mount(){this.highlight=document.createElement("div"),this.highlight.className="__li2-tagger-highlight",document.body.appendChild(this.highlight),this.tooltip=document.createElement("div"),this.tooltip.className="__li2-tagger-tooltip",document.body.appendChild(this.tooltip)}unmount(){this.highlight?.remove(),this.tooltip?.remove(),this.highlight=null,this.tooltip=null,this.currentElement=null}highlightElement(e){if(!this.highlight||!this.tooltip||e===this.currentElement)return;this.currentElement=e;let t=e.getBoundingClientRect(),i=window.getComputedStyle(e).position==="fixed",s=Math.max(t.width,20),o=Math.max(t.height,20);this.highlight.style.position=i?"fixed":"absolute",this.highlight.style.top=i?`${t.top}px`:`${t.top+window.scrollY}px`,this.highlight.style.left=i?`${t.left}px`:`${t.left+window.scrollX}px`,this.highlight.style.width=`${s}px`,this.highlight.style.height=`${o}px`,this.highlight.style.display="block";let r=e.tagName.toLowerCase(),a=(e.innerText||"").trim().slice(0,40),c=e.id?` #${e.id}`:"",h=a?` "${a}${a.length>=40?"...":""}"`:"";this.tooltip.textContent=`<${r}>${h}${c}`,this.tooltip.style.position=i?"fixed":"absolute";let m=i?t.top-28:t.top+window.scrollY-28;this.tooltip.style.top=`${Math.max(m,4)}px`,this.tooltip.style.left=i?`${t.left}px`:`${t.left+window.scrollX}px`,this.tooltip.style.display="block"}clearHighlight(){this.highlight&&(this.highlight.style.display="none"),this.tooltip&&(this.tooltip.style.display="none"),this.currentElement=null}fixSelection(e){this.highlightElement(e),this.highlight&&this.highlight.classList.add("__li2-tagger-highlight--selected")}clearSelection(){this.highlight&&this.highlight.classList.remove("__li2-tagger-highlight--selected")}updatePosition(){if(this.currentElement){let e=this.currentElement;this.currentElement=null,this.highlightElement(e)}}};var C=class{constructor(e,t){this.active=!1;this.overlay=e,this.callbacks=t,this.handleMouseMove=this.onMouseMove.bind(this),this.handleClick=this.onClick.bind(this),this.handleScroll=this.onScroll.bind(this)}activate(){this.active||(this.active=!0,document.addEventListener("mousemove",this.handleMouseMove,!0),document.addEventListener("click",this.handleClick,!0),window.addEventListener("scroll",this.handleScroll,!0))}deactivate(){this.active&&(this.active=!1,document.removeEventListener("mousemove",this.handleMouseMove,!0),document.removeEventListener("click",this.handleClick,!0),window.removeEventListener("scroll",this.handleScroll,!0),this.overlay.clearHighlight(),this.overlay.clearSelection())}onMouseMove(e){let t=e.target;if(!t)return;if(this.isToolbarElement(t)){this.overlay.clearHighlight();return}if(!k(t)){this.overlay.clearHighlight();return}let s=this.findMeaningfulDomElement(t);s&&this.overlay.highlightElement(s)}onClick(e){let t=e.target;if(!t||this.isToolbarElement(t))return;e.preventDefault(),e.stopPropagation();let i=k(t);if(!i)return;let s=this.findMeaningfulDomElement(t);s&&(this.overlay.fixSelection(s),this.callbacks.onElementSelected(s,i))}onScroll(){this.overlay.updatePosition()}isToolbarElement(e){let t=e;for(;t;){let i=t.className;if(typeof i=="string"&&(i.includes("__li2-toolbar")||i.includes("__li2-tagger")))return!0;t=t.parentElement}return!1}findMeaningfulDomElement(e){let t=new Set(["a","button","input","select","textarea","form","label"]),i=new Set(["button","link","tab","menuitem"]),s=e,o=0;for(;s&&o<5&&s.tagName!=="BODY";){let r=s.tagName.toLowerCase(),a=s.getAttribute("role");if(t.has(r)||a&&i.has(a))return s;s=s.parentElement,o++}return e}};var v=class extends Error{constructor(e,t){super(t),this.status=e}};function $(n){return{"X-Li2-Key":n.publishableKey,"X-Li2-Session":n.sessionToken,"X-Li2-SDK-Version":b}}async function D(n,e){let t=await fetch(`${n.apiUrl}/api/v1/track/event-rules`,{method:"POST",headers:{"Content-Type":"application/json",...$(n)},body:JSON.stringify(e)}),i=await t.json().catch(()=>({}));if(!t.ok){let s=i.error||i.message||`Error ${t.status}`;throw new v(t.status,s)}return i.data}async function B(n){let e=await fetch(`${n.apiUrl}/api/v1/track/event-rules`,{headers:$(n)});if(!e.ok)throw new v(e.status,"Failed to load existing rules");return(await e.json()).data||[]}var w=class{constructor(e){this.root=null;this.nameInput=null;this.nameError=null;this.submitBtn=null;this.statusEl=null;this.rulesListEl=null;this.criteriaCheckboxes=new Map;this.existingRules=[];this.currentInfo=null;this.state="idle";this.config=e}mount(){this.root=document.createElement("div"),this.root.className="__li2-tagger-panel",this.root.style.display="none",document.body.appendChild(this.root),this.fetchExistingRules()}unmount(){this.root?.remove(),this.root=null,this.criteriaCheckboxes.clear()}show(e){this.currentInfo=e,this.state="selected",this.buildPanelContent(e),this.root&&(this.root.style.display="block")}hide(){this.currentInfo=null,this.state="idle",this.root&&(this.root.style.display="none",this.root.innerHTML=""),this.criteriaCheckboxes.clear()}buildPanelContent(e){if(!this.root)return;this.root.innerHTML="",this.criteriaCheckboxes.clear();let t=document.createElement("div");t.className="__li2-tagger-panel-header";let i=document.createElement("span");i.textContent="Create Event Rule",t.appendChild(i);let s=document.createElement("button");s.className="__li2-tagger-panel-close",s.textContent="\xD7",s.addEventListener("click",()=>this.handleCancel()),t.appendChild(s),this.root.appendChild(t);let o=document.createElement("div");o.className="__li2-tagger-summary";let r=e.text?` "${e.text.slice(0,30)}${e.text.length>30?"...":""}"`:"";o.textContent=`Selected: <${e.tag}>${r} on ${window.location.pathname}`,this.root.appendChild(o);let a=document.createElement("div");a.className="__li2-tagger-field";let c=document.createElement("label");c.className="__li2-tagger-label",c.textContent="Event name",a.appendChild(c),this.nameInput=document.createElement("input"),this.nameInput.type="text",this.nameInput.placeholder="e.g. signup_click",this.nameInput.className="__li2-tagger-input",this.nameInput.addEventListener("input",()=>this.onNameInput()),a.appendChild(this.nameInput),this.nameError=document.createElement("div"),this.nameError.className="__li2-tagger-field-error",a.appendChild(this.nameError),this.root.appendChild(a);let h=document.createElement("div");h.className="__li2-tagger-label",h.textContent="Match criteria",this.root.appendChild(h);let m=[{key:"selector_path",label:"CSS Selector",value:e.selectorPath||null},{key:"element_text",label:"Text contains",value:e.text||null},{key:"element_id",label:"Element ID",value:e.id||null},{key:"element_href",label:"Link href",value:e.href||null},{key:"page_path",label:"Page path",value:window.location.pathname}];for(let u of m){let d=this.createCriterionRow(u);this.root.appendChild(d)}this.statusEl=document.createElement("div"),this.statusEl.className="__li2-tagger-panel-status",this.root.appendChild(this.statusEl);let g=document.createElement("div");g.className="__li2-tagger-btn-row";let p=document.createElement("button");p.className="__li2-tagger-btn __li2-tagger-btn-cancel",p.textContent="Cancel",p.addEventListener("click",()=>this.handleCancel()),g.appendChild(p),this.submitBtn=document.createElement("button"),this.submitBtn.className="__li2-tagger-btn __li2-tagger-btn-submit",this.submitBtn.textContent="Create Event Rule",this.submitBtn.addEventListener("click",()=>this.handleSubmit()),g.appendChild(this.submitBtn),this.root.appendChild(g);let l=document.createElement("div");l.className="__li2-tagger-rules-header",l.textContent="Existing rules",this.root.appendChild(l),this.rulesListEl=document.createElement("div"),this.rulesListEl.className="__li2-tagger-rules-list",this.renderRulesList(),this.root.appendChild(this.rulesListEl),setTimeout(()=>this.nameInput?.focus(),50)}createCriterionRow(e){let t=document.createElement("div");t.className="__li2-tagger-criterion";let i=document.createElement("input");i.type="checkbox",i.checked=!!e.value,i.disabled=!e.value,i.addEventListener("change",()=>this.updateSubmitState()),this.criteriaCheckboxes.set(e.key,i),t.appendChild(i);let s=document.createElement("span");s.className="__li2-tagger-criterion-label",s.textContent=e.label+":",t.appendChild(s);let o=document.createElement("span");return o.className="__li2-tagger-criterion-value",o.textContent=e.value?j(e.value,60):"(empty)",e.value||(o.style.color="#666"),t.appendChild(o),t}onNameInput(){if(!this.nameInput)return;let e=this.nameInput.value,t=e.toLowerCase().replace(/[^a-z0-9_]/g,"");t!==e&&(this.nameInput.value=t),this.validateName(),this.updateSubmitState()}validateName(){let e=this.nameInput?.value||"",t=null;return e?e.length>256?t="Max 256 characters":/^[a-z0-9_]+$/.test(e)?this.existingRules.some(i=>i.name===e)&&(t="Event name already exists"):t="Only lowercase letters, numbers, and underscores":t=null,this.nameError&&(this.nameError.textContent=t||""),t}updateSubmitState(){if(!this.submitBtn)return;let e=!!this.nameInput?.value&&!this.validateName(),t=this.getCheckedCriteria().length>0;this.submitBtn.disabled=!e||!t||this.state==="creating"}getCheckedCriteria(){let e=[];for(let[t,i]of this.criteriaCheckboxes)i.checked&&e.push(t);return e}async handleSubmit(){if(!this.nameInput||!this.currentInfo)return;let e=this.nameInput.value;if(!e||this.validateName())return;this.state="creating",this.setFormDisabled(!0),this.setStatus("Creating...","loading");let t=new Set(this.getCheckedCriteria()),i=this.currentInfo,s={name:e,selector_path:t.has("selector_path")&&i.selectorPath||void 0,element_text:t.has("element_text")&&i.text||void 0,element_id:t.has("element_id")&&i.id||void 0,element_href:t.has("element_href")&&i.href||void 0,page_path:t.has("page_path")?window.location.pathname:void 0,text_match_mode:t.has("element_text")?"contains":void 0},o={};for(let[r,a]of Object.entries(s))a!==void 0&&(o[r]=a);try{await D(this.config.apiConfig,o),this.state="success",this.setStatus(`Event rule '${e}' created!`,"success"),await this.fetchExistingRules(),setTimeout(()=>{this.hide(),this.config.onCreated(e)},2e3)}catch(r){this.state="error",this.setFormDisabled(!1),r instanceof v?this.setStatus(r.message,"error"):this.setStatus("Connection failed. Please try again.","error")}}handleCancel(){this.hide(),this.config.onCancel()}setFormDisabled(e){this.nameInput&&(this.nameInput.disabled=e),this.submitBtn&&(this.submitBtn.disabled=e,this.submitBtn.textContent=e?"Creating...":"Create Event Rule");for(let t of this.criteriaCheckboxes.values())(t.checked||!e)&&(t.disabled=e?!0:!t.checked)}setStatus(e,t){this.statusEl&&(this.statusEl.textContent=e,this.statusEl.className="__li2-tagger-panel-status",t==="loading"?this.statusEl.classList.add("__li2-tagger-status-loading"):t==="success"?this.statusEl.classList.add("__li2-tagger-status-success"):t==="error"&&this.statusEl.classList.add("__li2-tagger-status-error"))}async fetchExistingRules(){try{this.existingRules=await B(this.config.apiConfig),this.renderRulesList()}catch{}}renderRulesList(){if(this.rulesListEl){if(this.rulesListEl.innerHTML="",this.existingRules.length===0){let e=document.createElement("div");e.className="__li2-tagger-rules-empty",e.textContent="No rules yet",this.rulesListEl.appendChild(e);return}for(let e of this.existingRules){let t=document.createElement("div");t.className="__li2-tagger-rule-item",t.textContent=`\u2022 ${e.name}`,this.rulesListEl.appendChild(t)}}}};function j(n,e){return n.length>e?n.slice(0,e)+"...":n}var f=class{constructor(e){this.root=null;this.statsEl=null;this.statusEl=null;this.config=e}mount(){this.root=document.createElement("div"),this.root.className="__li2-toolbar",this.config.mode==="tagger"?this.mountTagger():this.config.mode==="scroll"?this.mountScroll():this.mountHeatmap(),document.body.appendChild(this.root)}createOpacitySlider(){let e=document.createElement("input");return e.type="range",e.min="0",e.max="100",e.value=String(Math.round(this.config.initialOpacity*100)),e.className="__li2-toolbar-slider",e.addEventListener("input",()=>{this.config.onOpacityChange(Number(e.value)/100)}),e}mountHeatmap(){if(!this.root)return;let e=document.createElement("span");e.textContent="Li2 Heatmap",this.root.appendChild(e),this.root.appendChild(this.createSeparator()),this.statsEl=document.createElement("span"),this.statsEl.className="__li2-toolbar-stat",this.statsEl.textContent="...",this.root.appendChild(this.statsEl),this.root.appendChild(this.createSeparator()),this.statusEl=document.createElement("span"),this.root.appendChild(this.statusEl),this.root.appendChild(this.createOpacitySlider()),this.appendCloseButton("Close heatmap")}mountScroll(){if(!this.root)return;let e=document.createElement("span");e.textContent="Li2 Scroll Heatmap",this.root.appendChild(e),this.root.appendChild(this.createSeparator()),this.statsEl=document.createElement("span"),this.statsEl.className="__li2-toolbar-stat",this.statsEl.textContent="...",this.root.appendChild(this.statsEl),this.root.appendChild(this.createSeparator()),this.statusEl=document.createElement("span"),this.root.appendChild(this.statusEl),this.root.appendChild(this.createOpacitySlider()),this.appendCloseButton("Close scroll heatmap")}mountTagger(){if(!this.root)return;let e=document.createElement("span");e.textContent="Li2 Event Tagger",this.root.appendChild(e),this.root.appendChild(this.createSeparator()),this.statusEl=document.createElement("span"),this.statusEl.className="__li2-toolbar-status",this.statusEl.textContent="Click an element to tag",this.root.appendChild(this.statusEl),this.appendCloseButton("Close tagger")}appendCloseButton(e){if(!this.root)return;let t=document.createElement("button");t.className="__li2-toolbar-close",t.textContent="\xD7",t.title=e,t.addEventListener("click",this.config.onClose),this.root.appendChild(t)}unmount(){this.root?.remove(),this.root=null}setStats(e,t){this.statsEl&&(this.statsEl.textContent=`${e.toLocaleString()} clicks`)}setScrollStats(e){this.statsEl&&(this.statsEl.textContent=`${e.toLocaleString()} sessions`)}setLoading(e){this.statusEl&&(e?(this.statusEl.className="__li2-toolbar-loading",this.statusEl.textContent="Loading..."):(this.statusEl.textContent="",this.statusEl.className=""))}setStatus(e){this.statusEl&&(this.statusEl.className="__li2-toolbar-status",this.statusEl.textContent=e)}setError(e){this.statusEl&&(this.statusEl.className="__li2-toolbar-error",this.statusEl.textContent=e)}createSeparator(){let e=document.createElement("span");return e.style.cssText="color:#555;user-select:none;",e.textContent="|",e}};function P(){if(document.getElementById("__li2-toolbar-styles"))return;let n=document.createElement("style");n.id="__li2-toolbar-styles",n.textContent=`
     .__li2-toolbar {
       position: fixed; bottom: 20px; right: 20px; z-index: 99999;
       background: #1a1a2e; color: #fff; border-radius: 12px;
@@ -110,4 +159,4 @@ import{a as y}from"../chunk-FF6VDEL5.mjs";async function k(n){let e=new URL(`${n
     }
     .__li2-tagger-rules-empty { color: #64748b; font-size: 12px; padding: 4px 0; }
     .__li2-tagger-rule-item { color: #94a3b8; font-size: 12px; padding: 2px 0; }
-  `,document.head.appendChild(n)}function D(){let n=new Date;return n.setDate(n.getDate()-7),n.toISOString().slice(0,10)}function $(){return new Date().toISOString().slice(0,10)}var T=class{constructor(e){this.heatmapOverlay=null;this.taggerOverlay=null;this.taggerMode=null;this.taggerPanel=null;this.ui=null;this.selectedElement=null;this.onElementSelected=null;this.apiUrl=e.apiUrl,this.publishableKey=e.publishableKey,this.mode=e.mode||"heatmap",this.sessionToken=e.sessionToken}async activate(){if(!this.sessionToken){w(),this.ui=new v({mode:this.mode,initialOpacity:.6,onOpacityChange:()=>{},onClose:()=>this.deactivate()}),this.ui.mount(),this.ui.setError("Session expired. Please reopen from the dashboard.");return}w(),this.mode==="tagger"?this.activateTagger():await this.activateHeatmap()}deactivate(){this.heatmapOverlay?.unmount(),this.heatmapOverlay=null,this.taggerMode?.deactivate(),this.taggerMode=null,this.taggerPanel?.unmount(),this.taggerPanel=null,this.taggerOverlay?.unmount(),this.taggerOverlay=null,this.ui?.unmount(),this.ui=null,this.selectedElement=null;let e=new URL(window.location.href);e.searchParams.delete("li2_heatmap"),e.searchParams.delete("li2_tagger"),e.searchParams.delete("li2_session"),e.searchParams.delete("li2_from"),e.searchParams.delete("li2_to"),e.searchParams.delete("li2_device"),history.replaceState(null,"",e.toString())}async activateHeatmap(){let e=this.parseHeatmapParams();e&&(this.heatmapOverlay=new b,this.heatmapOverlay.mount(),this.ui=new v({mode:"heatmap",initialOpacity:.6,onOpacityChange:t=>this.heatmapOverlay?.setOpacity(t),onClose:()=>this.deactivate()}),this.ui.mount(),await this.fetchAndRender(e))}parseHeatmapParams(){let e=new URL(window.location.href);return e.searchParams.has("li2_heatmap")?{from:e.searchParams.get("li2_from")??D(),to:e.searchParams.get("li2_to")??$(),deviceType:e.searchParams.get("li2_device")??void 0}:null}async fetchAndRender(e){this.ui?.setLoading(!0);try{let t=await k({apiUrl:this.apiUrl,publishableKey:this.publishableKey,sessionToken:this.sessionToken,pagePath:window.location.pathname,from:e.from,to:e.to,deviceType:e.deviceType,targetWidth:window.innerWidth});this.heatmapOverlay?.render(t.grid),this.ui?.setStats(t.total_clicks,t.grid.length)}catch{this.ui?.setError("Failed to load heatmap data")}finally{this.ui?.setLoading(!1)}}activateTagger(){this.taggerOverlay=new x,this.taggerOverlay.mount(),this.taggerPanel=new E({apiConfig:{apiUrl:this.apiUrl,publishableKey:this.publishableKey,sessionToken:this.sessionToken},onCancel:()=>{this.taggerOverlay?.clearHighlight(),this.taggerOverlay?.clearSelection(),this.selectedElement=null,this.ui?.setStatus("Click an element to tag")},onCreated:()=>{this.taggerOverlay?.clearHighlight(),this.taggerOverlay?.clearSelection(),this.selectedElement=null,this.ui?.setStatus("Click an element to tag")}}),this.taggerPanel.mount(),this.taggerMode=new _(this.taggerOverlay,{onElementSelected:(e,t)=>{this.selectedElement={element:e,info:t},this.ui?.setStatus("Element selected"),this.taggerPanel?.show(t),this.onElementSelected?.({element:e,info:t})}}),this.taggerMode.activate(),this.ui=new v({mode:"tagger",initialOpacity:.6,onOpacityChange:()=>{},onClose:()=>this.deactivate()}),this.ui.mount()}};if(typeof window<"u"&&window.__li2ToolbarConfig){let n=window.__li2ToolbarConfig;delete window.__li2ToolbarConfig;let e=new T(n);window.__li2Toolbar=e,e.activate()}export{T as ToolbarManager};
+  `,document.head.appendChild(n)}function F(){let n=new Date;return n.setDate(n.getDate()-7),n.toISOString().slice(0,10)}function G(){return new Date().toISOString().slice(0,10)}var H=class{constructor(e){this.heatmapOverlay=null;this.scrollOverlay=null;this.taggerOverlay=null;this.taggerMode=null;this.taggerPanel=null;this.ui=null;this.selectedElement=null;this.onElementSelected=null;this.apiUrl=e.apiUrl,this.publishableKey=e.publishableKey,this.mode=e.mode||"heatmap",this.sessionToken=e.sessionToken}async activate(){if(!this.sessionToken){P(),this.ui=new f({mode:this.mode,initialOpacity:.6,onOpacityChange:()=>{},onClose:()=>this.deactivate()}),this.ui.mount(),this.ui.setError("Session expired. Please reopen from the dashboard.");return}P(),this.mode==="tagger"?this.activateTagger():this.mode==="scroll"?await this.activateScroll():await this.activateHeatmap()}deactivate(){this.heatmapOverlay?.unmount(),this.heatmapOverlay=null,this.scrollOverlay?.unmount(),this.scrollOverlay=null,this.taggerMode?.deactivate(),this.taggerMode=null,this.taggerPanel?.unmount(),this.taggerPanel=null,this.taggerOverlay?.unmount(),this.taggerOverlay=null,this.ui?.unmount(),this.ui=null,this.selectedElement=null;let e=new URL(window.location.href);e.searchParams.delete("li2_heatmap"),e.searchParams.delete("li2_scroll"),e.searchParams.delete("li2_tagger"),e.searchParams.delete("li2_session"),e.searchParams.delete("li2_from"),e.searchParams.delete("li2_to"),e.searchParams.delete("li2_device"),history.replaceState(null,"",e.toString())}parseParams(e){let t=new URL(window.location.href);return t.searchParams.has(e)?{from:t.searchParams.get("li2_from")??F(),to:t.searchParams.get("li2_to")??G(),deviceType:t.searchParams.get("li2_device")??void 0}:null}async activateHeatmap(){let e=this.parseParams("li2_heatmap");if(e){this.heatmapOverlay=new y,this.heatmapOverlay.mount(),this.ui=new f({mode:"heatmap",initialOpacity:.6,onOpacityChange:t=>this.heatmapOverlay?.setOpacity(t),onClose:()=>this.deactivate()}),this.ui.mount(),this.ui.setLoading(!0);try{let t=await R({apiUrl:this.apiUrl,publishableKey:this.publishableKey,sessionToken:this.sessionToken,pagePath:window.location.pathname,from:e.from,to:e.to,deviceType:e.deviceType,targetWidth:window.innerWidth});this.heatmapOverlay?.render(t.grid),this.ui?.setStats(t.total_clicks,t.grid.length)}catch{this.ui?.setError("Failed to load heatmap data")}finally{this.ui?.setLoading(!1)}}}async activateScroll(){let e=this.parseParams("li2_scroll");if(e){this.scrollOverlay=new _,this.scrollOverlay.mount(),this.scrollOverlay.setOpacity(.35),this.ui=new f({mode:"scroll",initialOpacity:.35,onOpacityChange:t=>this.scrollOverlay?.setOpacity(t),onClose:()=>this.deactivate()}),this.ui.mount(),this.ui.setLoading(!0);try{let t=await N({apiUrl:this.apiUrl,publishableKey:this.publishableKey,sessionToken:this.sessionToken,pagePath:window.location.pathname,from:e.from,to:e.to,deviceType:e.deviceType});this.scrollOverlay?.render(t.milestones,t.total_sessions),this.ui?.setScrollStats(t.total_sessions)}catch{this.ui?.setError("Failed to load scroll heatmap data")}finally{this.ui?.setLoading(!1)}}}activateTagger(){this.taggerOverlay=new E,this.taggerOverlay.mount(),this.taggerPanel=new w({apiConfig:{apiUrl:this.apiUrl,publishableKey:this.publishableKey,sessionToken:this.sessionToken},onCancel:()=>{this.taggerOverlay?.clearHighlight(),this.taggerOverlay?.clearSelection(),this.selectedElement=null,this.ui?.setStatus("Click an element to tag")},onCreated:()=>{this.taggerOverlay?.clearHighlight(),this.taggerOverlay?.clearSelection(),this.selectedElement=null,this.ui?.setStatus("Click an element to tag")}}),this.taggerPanel.mount(),this.taggerMode=new C(this.taggerOverlay,{onElementSelected:(e,t)=>{this.selectedElement={element:e,info:t},this.ui?.setStatus("Element selected"),this.taggerPanel?.show(t),this.onElementSelected?.({element:e,info:t})}}),this.taggerMode.activate(),this.ui=new f({mode:"tagger",initialOpacity:.6,onOpacityChange:()=>{},onClose:()=>this.deactivate()}),this.ui.mount()}};if(typeof window<"u"&&window.__li2ToolbarConfig){let n=window.__li2ToolbarConfig;delete window.__li2ToolbarConfig;let e=new H(n);window.__li2Toolbar=e,e.activate()}export{H as ToolbarManager};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@li2/analytics",
-  "version": "0.3.3",
+  "version": "0.4.0-beta.1",
   "description": "Li2 Analytics SDK for conversion tracking",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,6 +30,17 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "tsup src/index.ts src/outbound.ts src/auto-events.ts src/pageview/index.ts src/click-tracker/index.ts src/toolbar/index.ts --format cjs,esm,iife --dts --minify --global-name li2Analytics",
+    "build:obfuscate": "tsup src/index.ts src/outbound.ts src/auto-events.ts src/pageview/index.ts src/click-tracker/index.ts src/toolbar/index.ts --format cjs,esm,iife --dts --minify --global-name li2Analytics && node scripts/obfuscate.js",
+    "dev": "tsup src/index.ts src/outbound.ts src/auto-events.ts src/pageview/index.ts src/click-tracker/index.ts src/toolbar/index.ts --format cjs,esm,iife --dts --watch --global-name li2Analytics",
+    "demo": "pnpm run build && node demo/server.js",
+    "demo:serve": "node demo/server.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "prepublishOnly": "NODE_OPTIONS=--max-old-space-size=4096 pnpm run build:obfuscate"
+  },
   "keywords": [
     "li2",
     "analytics",
@@ -45,15 +56,5 @@
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vitest": "^4.0.18"
-  },
-  "scripts": {
-    "build": "tsup src/index.ts src/outbound.ts src/auto-events.ts src/pageview/index.ts src/click-tracker/index.ts src/toolbar/index.ts --format cjs,esm,iife --dts --minify --global-name li2Analytics",
-    "build:obfuscate": "tsup src/index.ts src/outbound.ts src/auto-events.ts src/pageview/index.ts src/click-tracker/index.ts src/toolbar/index.ts --format cjs,esm,iife --dts --minify --global-name li2Analytics && node scripts/obfuscate.js",
-    "dev": "tsup src/index.ts src/outbound.ts src/auto-events.ts src/pageview/index.ts src/click-tracker/index.ts src/toolbar/index.ts --format cjs,esm,iife --dts --watch --global-name li2Analytics",
-    "demo": "pnpm run build && node demo/server.js",
-    "demo:serve": "node demo/server.js",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
   }
-}
+}