checkpoint-cli 0.2.2 → 0.3.0

package/dist/index.js

@@ -11,6 +11,7 @@ const readline_1 = __importDefault(require("readline"));
 const chalk_1 = __importDefault(require("chalk"));
 const supabase_js_1 = require("@supabase/supabase-js");
 const config_js_1 = require("./config.js");
+const tracking_script_minimal_js_1 = require("./tracking-script-minimal.js");
 /* ── Authenticated Supabase Client ── */
 function getSupabase() {
     const config = (0, config_js_1.loadConfig)();
@@ -90,6 +91,10 @@ function trackingScript() {
   var pickMoveHandler=null;
   var pickInspectBox=null;
   var pickInspectLabel=null;
+  var pickPointerDownHandler=null;
+  var pickHoverRaf=0;
+  var pickLastMouseX=0;
+  var pickLastMouseY=0;
 
   function getMetrics(){
     var de=document.documentElement;
@@ -205,7 +210,7 @@ function trackingScript() {
     var sourceTarget=findBestSourceAnchorTarget(target);
     var anchorEl=sourceTarget.element||target;
     var sourceAnchor=sourceTarget.sourceAnchor||getSourceAnchor(anchorEl);
-    var rect=anchorEl.getBoundingClientRect?anchorEl.getBoundingClientRect():null;
+    var rect=target.getBoundingClientRect?target.getBoundingClientRect():null;
     if(!rect||rect.width<1||rect.height<1){
       hidePickInspectUi();
       return;
@@ -252,6 +257,16 @@ function trackingScript() {
 
   function getEventElement(ev){
     if(!ev) return null;
+    try{
+      if(typeof ev.composedPath==='function'){
+        var path=ev.composedPath();
+        if(path&&path.length>0){
+          var first=path[0];
+          if(first&&first.nodeType===1) return first;
+          if(first&&first.nodeType===3&&first.parentElement) return first.parentElement;
+        }
+      }
+    }catch(e){}
     var target=ev.target||null;
     if(target&&target.nodeType===1){
       return target;
@@ -270,6 +285,18 @@ function trackingScript() {
     return null;
   }
 
+  function getElementAtPoint(x,y){
+    try{
+      if(typeof x==='number'&&typeof y==='number'&&document.elementFromPoint){
+        var node=document.elementFromPoint(x,y);
+        if(node&&node.nodeType===1){
+          return node;
+        }
+      }
+    }catch(e){}
+    return null;
+  }
+
   function elementSelector(el){
     if(!el||!el.tagName) return '';
     var tag=el.tagName.toLowerCase();
@@ -1016,21 +1043,60 @@ function trackingScript() {
         window.removeEventListener('click',pickClickHandler,true);
         pickClickHandler=null;
       }
+      if(pickPointerDownHandler){
+        window.removeEventListener('pointerdown',pickPointerDownHandler,true);
+        pickPointerDownHandler=null;
+      }
       if(pickMoveHandler){
-        window.removeEventListener('mousemove',pickMoveHandler,true);
+        document.removeEventListener('mousemove',pickMoveHandler,true);
         pickMoveHandler=null;
       }
       if(pickEscHandler){
         window.removeEventListener('keydown',pickEscHandler,true);
         pickEscHandler=null;
       }
+      if(pickHoverRaf){
+        cancelAnimationFrame(pickHoverRaf);
+        pickHoverRaf=0;
+      }
       hidePickInspectUi();
       return;
     }
     pickMoveHandler=function(ev){
       if(!pickMode) return;
-      var target=getEventElement(ev);
-      renderPickInspect(target,ev.clientX,ev.clientY);
+      pickLastMouseX=ev.clientX;
+      pickLastMouseY=ev.clientY;
+      if(pickHoverRaf) return;
+      pickHoverRaf=requestAnimationFrame(function(){
+        pickHoverRaf=0;
+        var target=getElementAtPoint(pickLastMouseX,pickLastMouseY)||getEventElement(ev);
+        renderPickInspect(target,pickLastMouseX,pickLastMouseY);
+      });
+    };
+    pickPointerDownHandler=function(ev){
+      if(!pickMode) return;
+      var target=getElementAtPoint(ev.clientX,ev.clientY)||getEventElement(ev);
+      if(!target) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      if(typeof ev.stopImmediatePropagation==='function'){
+        ev.stopImmediatePropagation();
+      }
+      try{
+        var payload=buildAnchorPayload(target,ev.clientX,ev.clientY);
+        window.parent.postMessage({
+          type:'checkpoint:pickResult',
+          path:location.pathname+location.search+location.hash,
+          anchorPayload:payload,
+          point:{
+            xPercent:payload.coord_fallback&&typeof payload.coord_fallback.x_percent==='number'?payload.coord_fallback.x_percent:50,
+            yPercent:payload.coord_fallback&&typeof payload.coord_fallback.y_percent==='number'?payload.coord_fallback.y_percent:50,
+            scrollY:payload.coord_fallback&&typeof payload.coord_fallback.scroll_y==='number'?payload.coord_fallback.scroll_y:0,
+            viewHeight:payload.coord_fallback&&typeof payload.coord_fallback.viewport_height==='number'?payload.coord_fallback.viewport_height:0
+          }
+        },'*');
+      }catch(e){}
+      setPickMode(false);
     };
     pickClickHandler=function(ev){
       try{
@@ -1062,7 +1128,8 @@ function trackingScript() {
         setPickMode(false);
       }
     };
-    window.addEventListener('mousemove',pickMoveHandler,true);
+    document.addEventListener('mousemove',pickMoveHandler,true);
+    window.addEventListener('pointerdown',pickPointerDownHandler,true);
     window.addEventListener('click',pickClickHandler,true);
     window.addEventListener('keydown',pickEscHandler,true);
   }
@@ -1202,7 +1269,7 @@ function trackingScript() {
 }
 /* ── Injection Proxy ── */
 function startInjectionProxy(targetPort) {
-    const SCRIPT = trackingScript();
+    const SCRIPT = (0, tracking_script_minimal_js_1.buildMinimalTrackingScript)();
     return new Promise((resolve, reject) => {
         const server = http_1.default.createServer((req, res) => {
             const fwdHeaders = { ...req.headers, host: `localhost:${targetPort}` };
@@ -1225,7 +1292,7 @@ function startInjectionProxy(targetPort) {
                 proxyRes.on('data', (chunk) => chunks.push(chunk));
                 proxyRes.on('end', () => {
                     let body = Buffer.concat(chunks).toString('utf-8');
-                    if (!body.includes('data-checkpoint-script="1"')) {
+                    if (!body.includes('data-checkpoint-script=')) {
                         if (body.includes('</head>')) {
                             body = body.replace('</head>', SCRIPT + '\n</head>');
                         }
@@ -1538,7 +1605,7 @@ const program = new commander_1.Command();
 program
     .name('checkpoint')
     .description('Share your localhost with reviewers — get visual feedback directly on the page')
-    .version('0.1.0');
+    .version('0.3.0');
 // ── checkpoint login ──
 program
     .command('login')

package/dist/tracking-script-minimal.d.ts

@@ -0,0 +1 @@
+export declare function buildMinimalTrackingScript(): string;

package/dist/tracking-script-minimal.js

@@ -0,0 +1,599 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildMinimalTrackingScript = buildMinimalTrackingScript;
+function buildMinimalTrackingScript() {
+    return String.raw `
+<script data-checkpoint-script="1">
+(function(){
+  var pickMode=false;
+  var pickMoveHandler=null;
+  var pickPointerDownHandler=null;
+  var pickClickHandler=null;
+  var pickEscHandler=null;
+  var hoverRaf=0;
+  var lastMouseX=0;
+  var lastMouseY=0;
+  var inspectBox=null;
+  var inspectLabel=null;
+  var lastPath='';
+  var mutationTick=false;
+
+  function getMetrics(){
+    var de=document.documentElement;
+    return {
+      scrollX:window.scrollX||window.pageXOffset||0,
+      scrollY:window.scrollY||window.pageYOffset||0,
+      docWidth:de.scrollWidth||0,
+      docHeight:de.scrollHeight||0,
+      viewWidth:de.clientWidth||window.innerWidth||0,
+      viewHeight:de.clientHeight||window.innerHeight||0
+    };
+  }
+
+  function clampPercent(v){
+    if(v<0) return 0;
+    if(v>100) return 100;
+    return v;
+  }
+
+  function shortText(value){
+    if(!value) return '';
+    return String(value).replace(/\s+/g,' ').trim().slice(0,120);
+  }
+
+  function cssEscape(value){
+    try{
+      if(window.CSS&&typeof window.CSS.escape==='function') return window.CSS.escape(value);
+    }catch(e){}
+    return String(value).replace(/[^a-zA-Z0-9_-]/g,'\\$&');
+  }
+
+  function getReactFiberNode(el){
+    if(!el||typeof el!=='object') return null;
+    try{
+      var keys=Object.keys(el);
+      for(var i=0;i<keys.length;i++){
+        var key=keys[i];
+        if(key.indexOf('__reactFiber$')===0||key.indexOf('__reactInternalInstance$')===0){
+          return el[key];
+        }
+      }
+    }catch(e){}
+    return null;
+  }
+
+  function getReactFiberName(fiber){
+    try{
+      if(!fiber) return '';
+      var t=fiber.type||fiber.elementType;
+      if(typeof t==='string') return t;
+      if(t&&typeof t.displayName==='string'&&t.displayName) return t.displayName;
+      if(t&&typeof t.name==='string'&&t.name) return t.name;
+    }catch(e){}
+    return '';
+  }
+
+  function getSourceDebugInfo(fiber){
+    var current=fiber;
+    var steps=0;
+    while(current&&steps<24){
+      if(current._debugSource) return current._debugSource;
+      current=current.return||null;
+      steps++;
+    }
+    return null;
+  }
+
+  function getReactOwnerPathFromFiber(fiber){
+    if(!fiber) return [];
+    var path=[];
+    var current=fiber;
+    var steps=0;
+    while(current&&steps<24){
+      var name=getReactFiberName(current);
+      if(name){
+        var keyVal=current.key!=null?String(current.key):'';
+        path.push(keyVal?name+'#'+keyVal:name);
+      }
+      current=current.return||null;
+      steps++;
+    }
+    path.reverse();
+    return path.slice(-12);
+  }
+
+  function getExplicitAnchorId(el){
+    if(!el||typeof el.closest!=='function') return '';
+    var holder=el.closest('[data-checkpoint-anchor]');
+    if(!holder||!holder.getAttribute) return '';
+    return holder.getAttribute('data-checkpoint-anchor')||'';
+  }
+
+  function getSourceAnchorFromElement(el){
+    if(!el||el.nodeType!==1) return null;
+    var fiber=getReactFiberNode(el);
+    var ownerPath=getReactOwnerPathFromFiber(fiber);
+    var source=getSourceDebugInfo(fiber);
+    var component=getReactFiberName(fiber);
+    var explicitId=getExplicitAnchorId(el);
+    var reactKey=fiber&&fiber.key!=null?String(fiber.key):'';
+    var hasData=!!(explicitId||component||ownerPath.length>0||source||reactKey);
+    if(!hasData) return null;
+    return {
+      explicit_id:explicitId||undefined,
+      component_name:component||undefined,
+      owner_path:ownerPath,
+      source_file:source&&source.fileName?String(source.fileName):undefined,
+      source_line:source&&typeof source.lineNumber==='number'?source.lineNumber:undefined,
+      source_column:source&&typeof source.columnNumber==='number'?source.columnNumber:undefined,
+      react_key:reactKey||undefined,
+      host_tag:el&&el.tagName?String(el.tagName).toLowerCase():undefined
+    };
+  }
+
+  function getSourceAnchorStrength(anchor){
+    if(!anchor||typeof anchor!=='object') return 0;
+    var score=0;
+    if(anchor.explicit_id) score+=2200;
+    if(anchor.source_file) score+=500;
+    if(typeof anchor.source_line==='number') score+=340;
+    if(anchor.react_key) score+=320;
+    if(anchor.component_name) score+=180;
+    if(Array.isArray(anchor.owner_path)&&anchor.owner_path.length>0){
+      score+=Math.min(260,anchor.owner_path.length*26);
+    }
+    return score;
+  }
+
+  function findBestAnchorableElement(el){
+    if(!el||el.nodeType!==1) return { element:el, sourceAnchor:null };
+    var current=el;
+    var bestEl=el;
+    var bestAnchor=null;
+    var bestScore=0;
+    var depth=0;
+    while(current&&current.nodeType===1&&depth<12){
+      var anchor=getSourceAnchorFromElement(current);
+      var score=getSourceAnchorStrength(anchor);
+      if(score>bestScore){
+        bestScore=score;
+        bestAnchor=anchor;
+        bestEl=current;
+      }
+      if(anchor&&anchor.explicit_id){
+        return { element:current, sourceAnchor:anchor };
+      }
+      current=current.parentElement;
+      depth++;
+    }
+    return { element:bestEl, sourceAnchor:bestAnchor };
+  }
+
+  function ownerSuffixScore(current,expected){
+    if(!Array.isArray(current)||!Array.isArray(expected)||current.length===0||expected.length===0) return 0;
+    var i=current.length-1;
+    var j=expected.length-1;
+    var score=0;
+    while(i>=0&&j>=0){
+      if(current[i]!==expected[j]) break;
+      score+=100;
+      i--;
+      j--;
+    }
+    return score;
+  }
+
+  function sourceMatchScore(el,sourceAnchor){
+    if(!el||!sourceAnchor) return 0;
+    var score=0;
+    var explicit=getExplicitAnchorId(el);
+    if(sourceAnchor.explicit_id){
+      if(explicit===sourceAnchor.explicit_id) score+=2400;
+      else if(explicit) score-=200;
+    }
+    var fiber=getReactFiberNode(el);
+    var component=getReactFiberName(fiber);
+    var source=getSourceDebugInfo(fiber);
+    var ownerPath=getReactOwnerPathFromFiber(fiber);
+    if(sourceAnchor.component_name&&component===sourceAnchor.component_name) score+=240;
+    if(sourceAnchor.react_key&&fiber&&fiber.key!=null&&String(fiber.key)===sourceAnchor.react_key) score+=360;
+    score+=ownerSuffixScore(ownerPath,sourceAnchor.owner_path||[]);
+    if(sourceAnchor.source_file&&source&&String(source.fileName||'')===String(sourceAnchor.source_file)){
+      score+=420;
+      if(typeof sourceAnchor.source_line==='number'&&source.lineNumber===sourceAnchor.source_line) score+=420;
+      if(typeof sourceAnchor.source_column==='number'&&source.columnNumber===sourceAnchor.source_column) score+=80;
+    }
+    if(sourceAnchor.host_tag&&el.tagName&&String(el.tagName).toLowerCase()===sourceAnchor.host_tag) score+=40;
+    return score;
+  }
+
+  function getElementAtPoint(x,y){
+    try{
+      if(typeof x==='number'&&typeof y==='number'&&document.elementFromPoint){
+        var node=document.elementFromPoint(x,y);
+        if(node&&node.nodeType===1) return node;
+      }
+    }catch(e){}
+    return null;
+  }
+
+  function buildCoordFallback(clientX,clientY,metrics,anchorEl){
+    var safeViewW=metrics.viewWidth||1;
+    var safeViewH=metrics.viewHeight||1;
+    var docW=metrics.docWidth||safeViewW;
+    var docH=metrics.docHeight||safeViewH;
+    var docX=clientX+metrics.scrollX;
+    var docY=clientY+metrics.scrollY;
+    var fallback={
+      x_percent:clampPercent((clientX/safeViewW)*100),
+      y_percent:clampPercent((clientY/safeViewH)*100),
+      scroll_x:metrics.scrollX,
+      scroll_y:metrics.scrollY,
+      viewport_width:safeViewW,
+      viewport_height:safeViewH,
+      doc_width:docW,
+      doc_height:docH,
+      doc_x_percent:clampPercent((docX/docW)*100),
+      doc_y_percent:clampPercent((docY/docH)*100)
+    };
+    try{
+      var rect=anchorEl&&anchorEl.getBoundingClientRect?anchorEl.getBoundingClientRect():null;
+      if(rect){
+        var safeW=Math.max(1,rect.width||1);
+        var safeH=Math.max(1,rect.height||1);
+        fallback.element_x_percent=clampPercent(((clientX-rect.left)/safeW)*100);
+        fallback.element_y_percent=clampPercent(((clientY-rect.top)/safeH)*100);
+      }
+    }catch(e){}
+    return fallback;
+  }
+
+  function buildAnchorPayload(el,clientX,clientY){
+    var metrics=getMetrics();
+    var sourceTarget=findBestAnchorableElement(el);
+    var anchorEl=sourceTarget.element||el;
+    return {
+      selector_chain:[],
+      dom_fingerprint:null,
+      text_context:null,
+      container_hint:null,
+      transient_context:null,
+      source_anchor:sourceTarget.sourceAnchor||getSourceAnchorFromElement(anchorEl),
+      coord_fallback:buildCoordFallback(clientX,clientY,metrics,anchorEl)
+    };
+  }
+
+  function findBySource(sourceAnchor,scope){
+    if(!sourceAnchor||typeof sourceAnchor!=='object') return null;
+    var searchScope=scope||document;
+    if(sourceAnchor.explicit_id){
+      var explicit=searchScope.querySelector('[data-checkpoint-anchor="'+cssEscape(sourceAnchor.explicit_id)+'"]');
+      if(explicit) return explicit;
+    }
+    var tag=sourceAnchor.host_tag||'*';
+    var nodes=[];
+    try{
+      nodes=Array.prototype.slice.call(searchScope.querySelectorAll(tag));
+    }catch(e){ nodes=[]; }
+    if(nodes.length>1800) nodes=nodes.slice(0,1800);
+    var best=null;
+    var bestScore=0;
+    for(var i=0;i<nodes.length;i++){
+      var node=nodes[i];
+      var score=sourceMatchScore(node,sourceAnchor);
+      if(score>bestScore){
+        best=node;
+        bestScore=score;
+      }
+    }
+    return bestScore>=240?best:null;
+  }
+
+  function resolveAnchor(payload){
+    if(!payload||typeof payload!=='object'){
+      return { coordFallback:null, strategy:'none', matchedSelector:null, status:'none' };
+    }
+    if(payload.source_anchor){
+      var match=findBySource(payload.source_anchor,document);
+      if(match&&match.getBoundingClientRect){
+        var rect=match.getBoundingClientRect();
+        var clientX=rect.left+Math.max(1,Math.min(Math.max(2,rect.width)-1,rect.width/2));
+        var clientY=rect.top+Math.max(1,Math.min(Math.max(2,rect.height)-1,rect.height/2));
+        return {
+          coordFallback:buildCoordFallback(clientX,clientY,getMetrics(),match),
+          strategy:'source',
+          matchedSelector:'source_anchor',
+          status:'resolved'
+        };
+      }
+    }
+    if(payload.coord_fallback){
+      return {
+        coordFallback:payload.coord_fallback,
+        strategy:'fallback',
+        matchedSelector:'coord_fallback',
+        status:'fallback_only'
+      };
+    }
+    return { coordFallback:null, strategy:'none', matchedSelector:null, status:'none' };
+  }
+
+  function getInspectLabelText(target){
+    if(!target||!target.tagName) return '';
+    var tag=String(target.tagName).toLowerCase();
+    var id=target.id?('#'+target.id):'';
+    var cls='';
+    try{
+      var classes=(target.className&&typeof target.className==='string')
+        ? target.className.trim().split(/\s+/).filter(Boolean).slice(0,3)
+        : [];
+      if(classes.length>0) cls='.'+classes.join('.');
+    }catch(e){}
+    var selector=shortText(tag+id+cls);
+    var anchor=findBestAnchorableElement(target).sourceAnchor;
+    var source='(no source)';
+    if(anchor){
+      var file=anchor.source_file?String(anchor.source_file).split(/[\\/]/).pop():'';
+      if(file&&typeof anchor.source_line==='number') source=file+':'+anchor.source_line;
+      else if(file) source=file;
+      else if(anchor.component_name) source=anchor.component_name;
+      if(anchor.explicit_id) source=source+' · #'+anchor.explicit_id;
+    }
+    return selector+'\n'+source;
+  }
+
+  function ensureInspectUi(){
+    if(!document.body) return;
+    if(!inspectBox){
+      inspectBox=document.createElement('div');
+      inspectBox.style.position='fixed';
+      inspectBox.style.left='0';
+      inspectBox.style.top='0';
+      inspectBox.style.width='0';
+      inspectBox.style.height='0';
+      inspectBox.style.border='2px solid #6366f1';
+      inspectBox.style.background='rgba(99,102,241,0.12)';
+      inspectBox.style.boxSizing='border-box';
+      inspectBox.style.borderRadius='4px';
+      inspectBox.style.pointerEvents='none';
+      inspectBox.style.zIndex='2147483646';
+      inspectBox.style.display='none';
+      document.body.appendChild(inspectBox);
+    }
+    if(!inspectLabel){
+      inspectLabel=document.createElement('div');
+      inspectLabel.style.position='fixed';
+      inspectLabel.style.left='0';
+      inspectLabel.style.top='0';
+      inspectLabel.style.padding='6px 8px';
+      inspectLabel.style.maxWidth='420px';
+      inspectLabel.style.borderRadius='8px';
+      inspectLabel.style.border='1px solid rgba(148,163,184,0.45)';
+      inspectLabel.style.background='rgba(15,23,42,0.96)';
+      inspectLabel.style.color='#e2e8f0';
+      inspectLabel.style.font='12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace';
+      inspectLabel.style.whiteSpace='pre-line';
+      inspectLabel.style.wordBreak='break-word';
+      inspectLabel.style.pointerEvents='none';
+      inspectLabel.style.zIndex='2147483647';
+      inspectLabel.style.display='none';
+      inspectLabel.style.boxShadow='0 6px 20px rgba(0,0,0,0.35)';
+      document.body.appendChild(inspectLabel);
+    }
+  }
+
+  function hideInspectUi(){
+    if(inspectBox) inspectBox.style.display='none';
+    if(inspectLabel) inspectLabel.style.display='none';
+  }
+
+  function renderInspectAt(x,y){
+    ensureInspectUi();
+    if(!inspectBox||!inspectLabel){
+      return;
+    }
+    var target=getElementAtPoint(x,y);
+    if(!target||!target.getBoundingClientRect){
+      hideInspectUi();
+      return;
+    }
+    var rect=target.getBoundingClientRect();
+    if(!rect||rect.width<1||rect.height<1){
+      hideInspectUi();
+      return;
+    }
+    inspectBox.style.display='block';
+    inspectBox.style.left=Math.max(0,rect.left)+'px';
+    inspectBox.style.top=Math.max(0,rect.top)+'px';
+    inspectBox.style.width=Math.max(1,rect.width)+'px';
+    inspectBox.style.height=Math.max(1,rect.height)+'px';
+    inspectLabel.textContent=getInspectLabelText(target);
+    inspectLabel.style.display='block';
+
+    var vw=window.innerWidth||document.documentElement.clientWidth||0;
+    var vh=window.innerHeight||document.documentElement.clientHeight||0;
+    var lr=inspectLabel.getBoundingClientRect();
+    var left=x+12;
+    var top=y+12;
+    if(left+lr.width>vw-8) left=Math.max(8,x-lr.width-12);
+    if(top+lr.height>vh-8) top=Math.max(8,y-lr.height-12);
+    inspectLabel.style.left=left+'px';
+    inspectLabel.style.top=top+'px';
+  }
+
+  function postPickResult(target,clientX,clientY){
+    var payload=buildAnchorPayload(target,clientX,clientY);
+    window.parent.postMessage({
+      type:'checkpoint:pickResult',
+      path:location.pathname+location.search+location.hash,
+      anchorPayload:payload,
+      point:{
+        xPercent:payload.coord_fallback&&typeof payload.coord_fallback.x_percent==='number'?payload.coord_fallback.x_percent:50,
+        yPercent:payload.coord_fallback&&typeof payload.coord_fallback.y_percent==='number'?payload.coord_fallback.y_percent:50,
+        scrollY:payload.coord_fallback&&typeof payload.coord_fallback.scroll_y==='number'?payload.coord_fallback.scroll_y:0,
+        viewHeight:payload.coord_fallback&&typeof payload.coord_fallback.viewport_height==='number'?payload.coord_fallback.viewport_height:0
+      }
+    },'*');
+  }
+
+  function setPickMode(enabled){
+    var next=!!enabled;
+    if(pickMode===next) return;
+    pickMode=next;
+    document.documentElement.style.cursor=pickMode?'crosshair':'';
+    if(document.body) document.body.style.cursor=pickMode?'crosshair':'';
+
+    if(!pickMode){
+      if(pickMoveHandler) document.removeEventListener('mousemove',pickMoveHandler,true);
+      if(pickPointerDownHandler) window.removeEventListener('pointerdown',pickPointerDownHandler,true);
+      if(pickClickHandler) window.removeEventListener('click',pickClickHandler,true);
+      if(pickEscHandler) window.removeEventListener('keydown',pickEscHandler,true);
+      pickMoveHandler=null;
+      pickPointerDownHandler=null;
+      pickClickHandler=null;
+      pickEscHandler=null;
+      if(hoverRaf){
+        cancelAnimationFrame(hoverRaf);
+        hoverRaf=0;
+      }
+      hideInspectUi();
+      return;
+    }
+
+    pickMoveHandler=function(ev){
+      if(!pickMode) return;
+      lastMouseX=ev.clientX;
+      lastMouseY=ev.clientY;
+      if(hoverRaf) return;
+      hoverRaf=requestAnimationFrame(function(){
+        hoverRaf=0;
+        renderInspectAt(lastMouseX,lastMouseY);
+      });
+    };
+    pickPointerDownHandler=function(ev){
+      if(!pickMode) return;
+      var target=getElementAtPoint(ev.clientX,ev.clientY);
+      if(!target) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      if(typeof ev.stopImmediatePropagation==='function') ev.stopImmediatePropagation();
+      try{
+        postPickResult(target,ev.clientX,ev.clientY);
+      }catch(e){}
+      setPickMode(false);
+    };
+    pickClickHandler=function(ev){
+      if(!pickMode) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      if(typeof ev.stopImmediatePropagation==='function') ev.stopImmediatePropagation();
+    };
+    pickEscHandler=function(ev){
+      if(ev.key==='Escape') setPickMode(false);
+    };
+
+    document.addEventListener('mousemove',pickMoveHandler,true);
+    window.addEventListener('pointerdown',pickPointerDownHandler,true);
+    window.addEventListener('click',pickClickHandler,true);
+    window.addEventListener('keydown',pickEscHandler,true);
+  }
+
+  function reportScroll(){
+    try{
+      var m=getMetrics();
+      window.parent.postMessage({
+        type:'checkpoint:scroll',
+        scrollX:m.scrollX,
+        scrollY:m.scrollY,
+        docWidth:m.docWidth,
+        docHeight:m.docHeight,
+        viewWidth:m.viewWidth,
+        viewHeight:m.viewHeight
+      },'*');
+    }catch(e){}
+  }
+
+  function reportNav(){
+    try{
+      var p=location.pathname+location.search+location.hash;
+      if(p===lastPath) return;
+      lastPath=p;
+      window.parent.postMessage({ type:'checkpoint:navigate', path:p },'*');
+      reportScroll();
+    }catch(e){}
+  }
+
+  function reportDomMutation(){
+    if(mutationTick) return;
+    mutationTick=true;
+    requestAnimationFrame(function(){
+      mutationTick=false;
+      window.parent.postMessage({
+        type:'checkpoint:domMutation',
+        reason:'mutation',
+        path:location.pathname+location.search+location.hash
+      },'*');
+    });
+  }
+
+  function setupMutationObserver(){
+    try{
+      if(!window.MutationObserver||!document.documentElement) return;
+      var observer=new MutationObserver(function(){ reportDomMutation(); });
+      observer.observe(document.documentElement,{ childList:true, subtree:true, attributes:true });
+      window.addEventListener('beforeunload',function(){ try{observer.disconnect();}catch(e){}; });
+    }catch(e){}
+  }
+
+  reportNav();
+  reportScroll();
+  setupMutationObserver();
+  var _ps=history.pushState,_rs=history.replaceState;
+  history.pushState=function(){ _ps.apply(this,arguments); reportNav(); };
+  history.replaceState=function(){ _rs.apply(this,arguments); reportNav(); };
+  window.addEventListener('popstate',reportNav);
+  window.addEventListener('hashchange',reportNav);
+  window.addEventListener('scroll',function(){ requestAnimationFrame(reportScroll); },{passive:true});
+  document.addEventListener('scroll',function(){ requestAnimationFrame(reportScroll); },true);
+  window.addEventListener('resize',reportScroll);
+
+  window.addEventListener('message',function(e){
+    try{
+      var d=e.data;
+      if(!d||typeof d!=='object') return;
+      if(d.type==='checkpoint:scrollTo'&&typeof d.y==='number'){
+        window.scrollTo({ top:d.y, behavior:'smooth' });
+        return;
+      }
+      if(d.type==='checkpoint:pickMode'){
+        setPickMode(!!d.enabled);
+        return;
+      }
+      if(d.type==='checkpoint:resolveAnchors'&&Array.isArray(d.items)){
+        var positions=[];
+        for(var i=0;i<d.items.length;i++){
+          var item=d.items[i];
+          if(!item||typeof item.id!=='string') continue;
+          var result=resolveAnchor(item.anchorPayload);
+          positions.push({
+            id:item.id,
+            found:!!result.coordFallback,
+            status:result.status||'none',
+            strategy:result.strategy||'none',
+            matchedSelector:result.matchedSelector||null,
+            coordFallback:result.coordFallback||null
+          });
+        }
+        window.parent.postMessage({
+          type:'checkpoint:anchorsResolved',
+          path:location.pathname+location.search+location.hash,
+          positions:positions
+        },'*');
+      }
+    }catch(ex){}
+  });
+
+  setInterval(reportNav,500);
+})();
+</script>`.trim();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "checkpoint-cli",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Share your localhost with reviewers — get visual feedback directly on the page",
   "keywords": [
     "checkpoint",