@eyeglass/inspector 0.1.7 → 0.1.8

package/dist/index.js

@@ -1707,7 +1707,7 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
         </div>
       </div>
     `:""}
-  `,t.querySelector(".close-btn").addEventListener("click",()=>e.onClose()),t.querySelector(".panel-header").addEventListener("mousedown",e.onPanelDragStart),t.querySelectorAll(".question-option").forEach(y=>{y.addEventListener("click",Mt=>{let C=Mt.target,Ht=C.dataset.questionId,It=C.dataset.answerId,Ct=C.textContent;e.onSubmitAnswer(Ht,It,Ct)})});let g=t.querySelector(".action-btn-commit"),x=t.querySelector(".action-btn-undo");g&&g.addEventListener("click",()=>e.onCommit()),x&&x.addEventListener("click",()=>e.onUndo());let h=t.querySelector(".followup-input"),p=t.querySelector(".followup-send"),b=t.querySelector(".followup-done");h&&p&&(p.addEventListener("click",()=>{h.value.trim()&&e.onSubmitFollowUp(h.value)}),h.addEventListener("keydown",y=>{y.key==="Enter"&&!y.shiftKey&&h.value.trim()&&(y.preventDefault(),e.onSubmitFollowUp(h.value))}),requestAnimationFrame(()=>h.focus())),b&&b.addEventListener("click",()=>e.onClose());let I=t.querySelector(".activity-feed");I&&(I.scrollTop=I.scrollHeight)}function st(t,n,e){if(!t)return;let i=t.querySelector(".status-text");i&&(i.textContent=$(n,e))}function rt(t,n,e,i){return s=>{let o=e();if(!o.multiSelectMode&&o.frozen||!o.inspectorEnabled)return;if(s.composedPath().includes(t)){o.multiSelectMode||i.hideHighlight();return}if(o.throttleTimeout)return;i.setThrottleTimeout(window.setTimeout(()=>{i.setThrottleTimeout(null)},16)),t.style.pointerEvents="none";let a=document.elementFromPoint(s.clientX,s.clientY);if(t.style.pointerEvents="",!a||a===document.documentElement||a===document.body){o.multiSelectMode||i.hideHighlight();return}n.contains(a)||(i.setCurrentElement(a),i.showHighlight(a))}}function at(t,n,e){return i=>{let s=n();if(!(!s.inspectorEnabled||!s.currentElement||i.composedPath().some(r=>r===t))){if(i.preventDefault(),i.stopPropagation(),s.multiSelectMode){e.toggleInSelection(s.currentElement);return}s.frozen||e.freeze()}}}function lt(t,n){return e=>{let i=t();e.key==="Escape"&&i.frozen&&(e.preventDefault(),n.unfreeze()),(navigator.platform.toUpperCase().indexOf("MAC")>=0?e.metaKey:e.ctrlKey)&&e.shiftKey&&e.key.toLowerCase()==="e"&&(e.preventDefault(),n.toggleInspectorEnabled())}}function ct(t,n){return()=>{let e=t();e.frozen&&(n.disableHighlightTransitions(),e.currentElement&&e.highlight&&!e.multiSelectMode&&n.showHighlight(e.currentElement),e.multiSelectMode&&e.selectedElements.length>0&&n.updateMultiSelectHighlightPositions(),e.scrollTimeout&&window.clearTimeout(e.scrollTimeout),n.setScrollTimeout(window.setTimeout(()=>{n.enableHighlightTransitions(),n.setScrollTimeout(null)},150)))}}function dt(t,n){let e=o=>{let r=t();if(!r.isDragging||!r.panel)return;let a=Math.max(0,Math.min(o.clientX-r.dragOffset.x,window.innerWidth-340)),l=Math.max(0,Math.min(o.clientY-r.dragOffset.y,window.innerHeight-100));n.setCustomPanelPosition({x:a,y:l}),r.panel.style.left=`${a}px`,r.panel.style.top=`${l}px`},i=()=>{n.setDragging(!1),document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",i)};return{handlePanelDragStart:o=>{if(o.target.closest("button"))return;let r=t();if(!r.panel)return;n.setDragging(!0);let a=r.panel.getBoundingClientRect();n.setDragOffset({x:o.clientX-a.left,y:o.clientY-a.top}),document.addEventListener("mousemove",e),document.addEventListener("mouseup",i)},handlePanelDrag:e,handlePanelDragEnd:i}}function ut(t,n,e,i,s){if(!t)return;let o={interactionId:t,userNote:n,componentName:e?.framework.componentName||e?.tagName||"element",status:i,message:s,timestamp:Date.now()};try{sessionStorage.setItem(E,JSON.stringify(o))}catch{}}function ht(){try{let t=sessionStorage.getItem(E);if(!t)return null;let n=JSON.parse(t);return Date.now()-n.timestamp>1e4?(sessionStorage.removeItem(E),null):n}catch{return null}}function q(){try{sessionStorage.removeItem(E)}catch{}}function pt(){try{let t=sessionStorage.getItem(P);if(t)return JSON.parse(t)}catch{}return[]}function m(t){try{sessionStorage.setItem(P,JSON.stringify(t))}catch{}}function F(t,n){let e=[...t],i=e.findIndex(s=>s.interactionId===n.interactionId);return i>=0?e[i]=n:(e.unshift(n),e.length>20&&(e.length=20)),e}function k(t,n,e){return t.map(i=>i.interactionId===n?{...i,status:e}:i)}function mt(t,n){return t.filter(e=>e.interactionId!==n)}function gt(){try{let t=localStorage.getItem(D);if(t!==null)return t==="true"}catch{}return!0}function bt(t){try{localStorage.setItem(D,String(t))}catch{}}function ft(){try{let t=localStorage.getItem(L);if(t!==null)return t==="true"}catch{}return!0}function vt(t){try{localStorage.setItem(L,String(t))}catch{}}function xt(){try{let t=localStorage.getItem(N);if(t==="light"||t==="dark"||t==="auto")return t}catch{}return"auto"}function yt(t){try{localStorage.setItem(N,t)}catch{}}function w(t,n){t.multiSelectHighlights.forEach(s=>s.remove());let e=[],i=3;return t.selectedElements.forEach((s,o)=>{let r=s.getBoundingClientRect(),a=document.createElement("div");a.className="highlight multi",a.style.display="block",a.style.left=`${r.left-i}px`,a.style.top=`${r.top-i}px`,a.style.width=`${r.width+i*2}px`,a.style.height=`${r.height+i*2}px`;let l=document.createElement("div");l.className="highlight-badge",l.textContent=String(o+1),a.appendChild(l),n.appendChild(a),e.push(a)}),e}function M(t,n){t.multiSelectHighlights.forEach(e=>e.remove())}function St(t,n){t.forEach((i,s)=>{let o=n[s];if(!o)return;let r=i.getBoundingClientRect();o.style.left=`${r.left-3}px`,o.style.top=`${r.top-3}px`,o.style.width=`${r.width+3*2}px`,o.style.height=`${r.height+3*2}px`})}function Et(t,n){t&&t.classList.add("no-transition"),n.forEach(e=>e.classList.add("no-transition"))}function wt(t,n){t&&t.classList.remove("no-transition"),n.forEach(e=>e.classList.remove("no-transition"))}var H=class extends HTMLElement{constructor(){super();this.highlight=null;this.panel=null;this.toast=null;this.hub=null;this.currentElement=null;this.currentSnapshot=null;this.interactionId=null;this.frozen=!1;this.eventSource=null;this.throttleTimeout=null;this.mode="input";this.activityEvents=[];this.currentStatus="idle";this.hubExpanded=!1;this.hubPage="main";this.inspectorEnabled=!0;this.autoCommitEnabled=!0;this.themePreference="auto";this.history=[];this.isDragging=!1;this.dragOffset={x:0,y:0};this.customPanelPosition=null;this.multiSelectMode=!1;this.selectedElements=[];this.selectedSnapshots=[];this.multiSelectHighlights=[];this.submittedSnapshots=[];this.cursorStyleElement=null;this.scrollTimeout=null;this.phraseIndex=0;this.phraseInterval=null;this._userNote="";this.shadow=this.attachShadow({mode:"closed"}),this.handleMouseMove=rt(this,this.shadow,()=>({frozen:this.frozen,multiSelectMode:this.multiSelectMode,inspectorEnabled:this.inspectorEnabled,throttleTimeout:this.throttleTimeout}),{setThrottleTimeout:e=>this.throttleTimeout=e,hideHighlight:()=>this.hideHighlight(),showHighlight:e=>this.showHighlight(e),setCurrentElement:e=>this.currentElement=e}),this.handleClick=at(this,()=>({inspectorEnabled:this.inspectorEnabled,currentElement:this.currentElement,frozen:this.frozen,multiSelectMode:this.multiSelectMode}),{toggleInSelection:e=>this.toggleInSelection(e),freeze:()=>this.freeze()}),this.handleKeyDown=lt(()=>({frozen:this.frozen}),{unfreeze:()=>this.unfreeze(),toggleInspectorEnabled:()=>this.toggleInspectorEnabled()}),this.handleScroll=ct(()=>({frozen:this.frozen,currentElement:this.currentElement,highlight:this.highlight,multiSelectMode:this.multiSelectMode,selectedElements:this.selectedElements,scrollTimeout:this.scrollTimeout}),{showHighlight:e=>this.showHighlight(e),updateMultiSelectHighlightPositions:()=>St(this.selectedElements,this.multiSelectHighlights),disableHighlightTransitions:()=>Et(this.highlight,this.multiSelectHighlights),enableHighlightTransitions:()=>wt(this.highlight,this.multiSelectHighlights),setScrollTimeout:e=>this.scrollTimeout=e}),this.dragHandlers=dt(()=>({isDragging:this.isDragging,dragOffset:this.dragOffset,panel:this.panel}),{setDragging:e=>this.isDragging=e,setDragOffset:e=>this.dragOffset=e,setCustomPanelPosition:e=>this.customPanelPosition=e})}connectedCallback(){let e=document.createElement("style");e.textContent=K,this.shadow.appendChild(e),this.highlight=document.createElement("div"),this.highlight.className="highlight",this.highlight.style.display="none",this.shadow.appendChild(this.highlight),document.addEventListener("mousemove",this.handleMouseMove,!0),document.addEventListener("click",this.handleClick,!0),document.addEventListener("keydown",this.handleKeyDown,!0),window.addEventListener("scroll",this.handleScroll,!0),this.inspectorEnabled=gt(),this.autoCommitEnabled=ft(),this.themePreference=xt(),this.applyTheme(),this.history=pt(),this.renderHub(),this.connectSSE(),this.restoreSession(),this.updateCursor()}disconnectedCallback(){document.removeEventListener("mousemove",this.handleMouseMove,!0),document.removeEventListener("click",this.handleClick,!0),document.removeEventListener("keydown",this.handleKeyDown,!0),window.removeEventListener("scroll",this.handleScroll,!0),this.eventSource?.close(),this.cursorStyleElement&&(this.cursorStyleElement.remove(),this.cursorStyleElement=null)}connectSSE(){this.eventSource=G({onActivityEvent:e=>this.handleActivityEvent(e),onReconnect:()=>this.connectSSE()})}handleActivityEvent(e){e.type==="status"&&(this.history=k(this.history,e.interactionId,e.status),m(this.history),this.renderHub()),e.interactionId===this.interactionId&&(this.activityEvents.push(e),e.type==="status"&&(this.currentStatus=e.status,ut(this.interactionId,this._userNote,this.currentSnapshot,this.currentStatus,e.message),e.status==="fixing"?this.startPhraseRotation():this.stopPhraseRotation(),e.status==="failed"&&setTimeout(()=>this.unfreeze(),4e3)),this.renderPanel())}restoreSession(){let e=ht();e&&(e.status==="success"||e.status==="failed")&&(this.showResultToast(e),q())}showResultToast(e){this.toast=document.createElement("div"),this.toast.className="result-toast";let i=e.status==="success",s=i?"\u2713":"\u2715",o=i?"Done!":"Failed";this.toast.innerHTML=`
+  `,t.querySelector(".close-btn").addEventListener("click",()=>e.onClose()),t.querySelector(".panel-header").addEventListener("mousedown",e.onPanelDragStart),t.querySelectorAll(".question-option").forEach(y=>{y.addEventListener("click",Mt=>{let C=Mt.target,Ht=C.dataset.questionId,It=C.dataset.answerId,Ct=C.textContent;e.onSubmitAnswer(Ht,It,Ct)})});let g=t.querySelector(".action-btn-commit"),x=t.querySelector(".action-btn-undo");g&&g.addEventListener("click",()=>e.onCommit()),x&&x.addEventListener("click",()=>e.onUndo());let h=t.querySelector(".followup-input"),p=t.querySelector(".followup-send"),b=t.querySelector(".followup-done");h&&p&&(p.addEventListener("click",()=>{h.value.trim()&&e.onSubmitFollowUp(h.value)}),h.addEventListener("keydown",y=>{y.key==="Enter"&&!y.shiftKey&&h.value.trim()&&(y.preventDefault(),e.onSubmitFollowUp(h.value))}),requestAnimationFrame(()=>h.focus())),b&&b.addEventListener("click",()=>e.onClose());let I=t.querySelector(".activity-feed");I&&(I.scrollTop=I.scrollHeight)}function st(t,n,e){if(!t)return;let i=t.querySelector(".status-text");i&&(i.textContent=$(n,e))}function rt(t,n,e,i){return s=>{let o=e();if(!o.multiSelectMode&&o.frozen||!o.inspectorEnabled)return;if(s.composedPath().includes(t)){o.multiSelectMode||i.hideHighlight();return}if(o.throttleTimeout)return;i.setThrottleTimeout(window.setTimeout(()=>{i.setThrottleTimeout(null)},16)),t.style.pointerEvents="none";let a=document.elementFromPoint(s.clientX,s.clientY);if(t.style.pointerEvents="",!a||a===document.documentElement||a===document.body){o.multiSelectMode||i.hideHighlight();return}n.contains(a)||(i.setCurrentElement(a),o.multiSelectMode||i.showHighlight(a))}}function at(t,n,e){return i=>{let s=n();if(!(!s.inspectorEnabled||!s.currentElement||i.composedPath().some(r=>r===t))){if(i.preventDefault(),i.stopPropagation(),s.multiSelectMode){e.toggleInSelection(s.currentElement);return}s.frozen||e.freeze()}}}function lt(t,n){return e=>{let i=t();e.key==="Escape"&&i.frozen&&(e.preventDefault(),n.unfreeze()),(navigator.platform.toUpperCase().indexOf("MAC")>=0?e.metaKey:e.ctrlKey)&&e.shiftKey&&e.key.toLowerCase()==="e"&&(e.preventDefault(),n.toggleInspectorEnabled())}}function ct(t,n){return()=>{let e=t();e.frozen&&(n.disableHighlightTransitions(),e.currentElement&&e.highlight&&!e.multiSelectMode&&n.showHighlight(e.currentElement),e.multiSelectMode&&e.selectedElements.length>0&&n.updateMultiSelectHighlightPositions(),e.scrollTimeout&&window.clearTimeout(e.scrollTimeout),n.setScrollTimeout(window.setTimeout(()=>{n.enableHighlightTransitions(),n.setScrollTimeout(null)},150)))}}function dt(t,n){let e=o=>{let r=t();if(!r.isDragging||!r.panel)return;let a=Math.max(0,Math.min(o.clientX-r.dragOffset.x,window.innerWidth-340)),l=Math.max(0,Math.min(o.clientY-r.dragOffset.y,window.innerHeight-100));n.setCustomPanelPosition({x:a,y:l}),r.panel.style.left=`${a}px`,r.panel.style.top=`${l}px`},i=()=>{n.setDragging(!1),document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",i)};return{handlePanelDragStart:o=>{if(o.target.closest("button"))return;let r=t();if(!r.panel)return;n.setDragging(!0);let a=r.panel.getBoundingClientRect();n.setDragOffset({x:o.clientX-a.left,y:o.clientY-a.top}),document.addEventListener("mousemove",e),document.addEventListener("mouseup",i)},handlePanelDrag:e,handlePanelDragEnd:i}}function ut(t,n,e,i,s){if(!t)return;let o={interactionId:t,userNote:n,componentName:e?.framework.componentName||e?.tagName||"element",status:i,message:s,timestamp:Date.now()};try{sessionStorage.setItem(E,JSON.stringify(o))}catch{}}function ht(){try{let t=sessionStorage.getItem(E);if(!t)return null;let n=JSON.parse(t);return Date.now()-n.timestamp>1e4?(sessionStorage.removeItem(E),null):n}catch{return null}}function q(){try{sessionStorage.removeItem(E)}catch{}}function pt(){try{let t=sessionStorage.getItem(P);if(t)return JSON.parse(t)}catch{}return[]}function m(t){try{sessionStorage.setItem(P,JSON.stringify(t))}catch{}}function F(t,n){let e=[...t],i=e.findIndex(s=>s.interactionId===n.interactionId);return i>=0?e[i]=n:(e.unshift(n),e.length>20&&(e.length=20)),e}function k(t,n,e){return t.map(i=>i.interactionId===n?{...i,status:e}:i)}function mt(t,n){return t.filter(e=>e.interactionId!==n)}function gt(){try{let t=localStorage.getItem(D);if(t!==null)return t==="true"}catch{}return!0}function bt(t){try{localStorage.setItem(D,String(t))}catch{}}function ft(){try{let t=localStorage.getItem(L);if(t!==null)return t==="true"}catch{}return!0}function vt(t){try{localStorage.setItem(L,String(t))}catch{}}function xt(){try{let t=localStorage.getItem(N);if(t==="light"||t==="dark"||t==="auto")return t}catch{}return"auto"}function yt(t){try{localStorage.setItem(N,t)}catch{}}function w(t,n){t.multiSelectHighlights.forEach(s=>s.remove());let e=[],i=3;return t.selectedElements.forEach((s,o)=>{let r=s.getBoundingClientRect(),a=document.createElement("div");a.className="highlight multi",a.style.display="block",a.style.left=`${r.left-i}px`,a.style.top=`${r.top-i}px`,a.style.width=`${r.width+i*2}px`,a.style.height=`${r.height+i*2}px`;let l=document.createElement("div");l.className="highlight-badge",l.textContent=String(o+1),a.appendChild(l),n.appendChild(a),e.push(a)}),e}function M(t,n){t.multiSelectHighlights.forEach(e=>e.remove())}function St(t,n){t.forEach((i,s)=>{let o=n[s];if(!o)return;let r=i.getBoundingClientRect();o.style.left=`${r.left-3}px`,o.style.top=`${r.top-3}px`,o.style.width=`${r.width+3*2}px`,o.style.height=`${r.height+3*2}px`})}function Et(t,n){t&&t.classList.add("no-transition"),n.forEach(e=>e.classList.add("no-transition"))}function wt(t,n){t&&t.classList.remove("no-transition"),n.forEach(e=>e.classList.remove("no-transition"))}var H=class extends HTMLElement{constructor(){super();this.highlight=null;this.panel=null;this.toast=null;this.hub=null;this.currentElement=null;this.currentSnapshot=null;this.interactionId=null;this.frozen=!1;this.eventSource=null;this.throttleTimeout=null;this.mode="input";this.activityEvents=[];this.currentStatus="idle";this.hubExpanded=!1;this.hubPage="main";this.inspectorEnabled=!0;this.autoCommitEnabled=!0;this.themePreference="auto";this.history=[];this.isDragging=!1;this.dragOffset={x:0,y:0};this.customPanelPosition=null;this.multiSelectMode=!1;this.selectedElements=[];this.selectedSnapshots=[];this.multiSelectHighlights=[];this.submittedSnapshots=[];this.cursorStyleElement=null;this.scrollTimeout=null;this.phraseIndex=0;this.phraseInterval=null;this._userNote="";this.shadow=this.attachShadow({mode:"closed"}),this.handleMouseMove=rt(this,this.shadow,()=>({frozen:this.frozen,multiSelectMode:this.multiSelectMode,inspectorEnabled:this.inspectorEnabled,throttleTimeout:this.throttleTimeout}),{setThrottleTimeout:e=>this.throttleTimeout=e,hideHighlight:()=>this.hideHighlight(),showHighlight:e=>this.showHighlight(e),setCurrentElement:e=>this.currentElement=e}),this.handleClick=at(this,()=>({inspectorEnabled:this.inspectorEnabled,currentElement:this.currentElement,frozen:this.frozen,multiSelectMode:this.multiSelectMode}),{toggleInSelection:e=>this.toggleInSelection(e),freeze:()=>this.freeze()}),this.handleKeyDown=lt(()=>({frozen:this.frozen}),{unfreeze:()=>this.unfreeze(),toggleInspectorEnabled:()=>this.toggleInspectorEnabled()}),this.handleScroll=ct(()=>({frozen:this.frozen,currentElement:this.currentElement,highlight:this.highlight,multiSelectMode:this.multiSelectMode,selectedElements:this.selectedElements,scrollTimeout:this.scrollTimeout}),{showHighlight:e=>this.showHighlight(e),updateMultiSelectHighlightPositions:()=>St(this.selectedElements,this.multiSelectHighlights),disableHighlightTransitions:()=>Et(this.highlight,this.multiSelectHighlights),enableHighlightTransitions:()=>wt(this.highlight,this.multiSelectHighlights),setScrollTimeout:e=>this.scrollTimeout=e}),this.dragHandlers=dt(()=>({isDragging:this.isDragging,dragOffset:this.dragOffset,panel:this.panel}),{setDragging:e=>this.isDragging=e,setDragOffset:e=>this.dragOffset=e,setCustomPanelPosition:e=>this.customPanelPosition=e})}connectedCallback(){let e=document.createElement("style");e.textContent=K,this.shadow.appendChild(e),this.highlight=document.createElement("div"),this.highlight.className="highlight",this.highlight.style.display="none",this.shadow.appendChild(this.highlight),document.addEventListener("mousemove",this.handleMouseMove,!0),document.addEventListener("click",this.handleClick,!0),document.addEventListener("keydown",this.handleKeyDown,!0),window.addEventListener("scroll",this.handleScroll,!0),this.inspectorEnabled=gt(),this.autoCommitEnabled=ft(),this.themePreference=xt(),this.applyTheme(),this.history=pt(),this.renderHub(),this.connectSSE(),this.restoreSession(),this.updateCursor()}disconnectedCallback(){document.removeEventListener("mousemove",this.handleMouseMove,!0),document.removeEventListener("click",this.handleClick,!0),document.removeEventListener("keydown",this.handleKeyDown,!0),window.removeEventListener("scroll",this.handleScroll,!0),this.eventSource?.close(),this.cursorStyleElement&&(this.cursorStyleElement.remove(),this.cursorStyleElement=null)}connectSSE(){this.eventSource=G({onActivityEvent:e=>this.handleActivityEvent(e),onReconnect:()=>this.connectSSE()})}handleActivityEvent(e){e.type==="status"&&(this.history=k(this.history,e.interactionId,e.status),m(this.history),this.renderHub()),e.interactionId===this.interactionId&&(this.activityEvents.push(e),e.type==="status"&&(this.currentStatus=e.status,ut(this.interactionId,this._userNote,this.currentSnapshot,this.currentStatus,e.message),e.status==="fixing"?this.startPhraseRotation():this.stopPhraseRotation(),e.status==="failed"&&setTimeout(()=>this.unfreeze(),4e3)),this.renderPanel())}restoreSession(){let e=ht();e&&(e.status==="success"||e.status==="failed")&&(this.showResultToast(e),q())}showResultToast(e){this.toast=document.createElement("div"),this.toast.className="result-toast";let i=e.status==="success",s=i?"\u2713":"\u2715",o=i?"Done!":"Failed";this.toast.innerHTML=`
       <div class="toast-icon ${e.status}">${s}</div>
       <div class="toast-content">
         <div class="toast-title">${o}</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eyeglass/inspector",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Browser inspector component for Eyeglass",
   "type": "module",
   "main": "dist/index.js",