checkpoint-cli 0.2.0 → 0.2.1

package/dist/index.js

@@ -81,12 +81,15 @@ function requireAuth() {
 /* ── Checkpoint Tracking Script (injected into HTML responses) ── */
 function trackingScript() {
     return `
-<script data-checkpoint>
+<script data-checkpoint-script="1">
 (function(){
   var lastPath='';
   var pickMode=false;
   var pickClickHandler=null;
   var pickEscHandler=null;
+  var pickMoveHandler=null;
+  var pickInspectBox=null;
+  var pickInspectLabel=null;
 
   function getMetrics(){
     var de=document.documentElement;
@@ -120,6 +123,133 @@ function trackingScript() {
     return String(value).replace(/\\s+/g,' ').trim().slice(0,120);
   }
 
+  function getFileLeaf(path){
+    if(!path) return '';
+    try{
+      var raw=String(path);
+      var parts=raw.split(/[\\\\/]/);
+      return parts[parts.length-1]||raw;
+    }catch(e){}
+    return '';
+  }
+
+  function getInspectElementLabel(el){
+    if(!el||!el.tagName) return '(unknown)';
+    var tag=String(el.tagName).toLowerCase();
+    var id=el.id?('#'+el.id):'';
+    var classes='';
+    try{
+      var cls=(el.className&&typeof el.className==='string')
+        ? el.className.trim().split(/\\s+/).filter(Boolean).slice(0,3)
+        : [];
+      if(cls.length>0){
+        classes='.'+cls.join('.');
+      }
+    }catch(e){}
+    return shortText(tag+id+classes);
+  }
+
+  function ensurePickInspectUi(){
+    if(!document.body) return;
+    if(!pickInspectBox){
+      pickInspectBox=document.createElement('div');
+      pickInspectBox.setAttribute('data-checkpoint-inspect','box');
+      pickInspectBox.style.position='fixed';
+      pickInspectBox.style.left='0';
+      pickInspectBox.style.top='0';
+      pickInspectBox.style.width='0';
+      pickInspectBox.style.height='0';
+      pickInspectBox.style.border='2px solid #6366f1';
+      pickInspectBox.style.background='rgba(99,102,241,0.12)';
+      pickInspectBox.style.boxSizing='border-box';
+      pickInspectBox.style.borderRadius='4px';
+      pickInspectBox.style.pointerEvents='none';
+      pickInspectBox.style.zIndex='2147483646';
+      pickInspectBox.style.display='none';
+      document.body.appendChild(pickInspectBox);
+    }
+    if(!pickInspectLabel){
+      pickInspectLabel=document.createElement('div');
+      pickInspectLabel.setAttribute('data-checkpoint-inspect','label');
+      pickInspectLabel.style.position='fixed';
+      pickInspectLabel.style.left='0';
+      pickInspectLabel.style.top='0';
+      pickInspectLabel.style.maxWidth='380px';
+      pickInspectLabel.style.padding='6px 8px';
+      pickInspectLabel.style.borderRadius='8px';
+      pickInspectLabel.style.border='1px solid rgba(148,163,184,0.45)';
+      pickInspectLabel.style.background='rgba(15,23,42,0.96)';
+      pickInspectLabel.style.color='#e2e8f0';
+      pickInspectLabel.style.font='12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace';
+      pickInspectLabel.style.whiteSpace='pre-line';
+      pickInspectLabel.style.wordBreak='break-word';
+      pickInspectLabel.style.pointerEvents='none';
+      pickInspectLabel.style.zIndex='2147483647';
+      pickInspectLabel.style.display='none';
+      pickInspectLabel.style.boxShadow='0 6px 20px rgba(0,0,0,0.35)';
+      document.body.appendChild(pickInspectLabel);
+    }
+  }
+
+  function hidePickInspectUi(){
+    if(pickInspectBox) pickInspectBox.style.display='none';
+    if(pickInspectLabel) pickInspectLabel.style.display='none';
+  }
+
+  function renderPickInspect(target,mouseX,mouseY){
+    ensurePickInspectUi();
+    if(!pickInspectBox||!pickInspectLabel||!target||target.nodeType!==1){
+      hidePickInspectUi();
+      return;
+    }
+    var sourceTarget=findBestSourceAnchorTarget(target);
+    var anchorEl=sourceTarget.element||target;
+    var sourceAnchor=sourceTarget.sourceAnchor||getSourceAnchor(anchorEl);
+    var rect=anchorEl.getBoundingClientRect?anchorEl.getBoundingClientRect():null;
+    if(!rect||rect.width<1||rect.height<1){
+      hidePickInspectUi();
+      return;
+    }
+
+    pickInspectBox.style.display='block';
+    pickInspectBox.style.left=Math.max(0,rect.left)+'px';
+    pickInspectBox.style.top=Math.max(0,rect.top)+'px';
+    pickInspectBox.style.width=Math.max(1,rect.width)+'px';
+    pickInspectBox.style.height=Math.max(1,rect.height)+'px';
+
+    var primary=getInspectElementLabel(anchorEl);
+    var sourceLabel='(no source metadata)';
+    if(sourceAnchor){
+      var leaf=getFileLeaf(sourceAnchor.source_file);
+      if(leaf&&typeof sourceAnchor.source_line==='number'){
+        sourceLabel=leaf+':'+sourceAnchor.source_line;
+      }else if(leaf){
+        sourceLabel=leaf;
+      }else if(sourceAnchor.component_name){
+        sourceLabel=sourceAnchor.component_name;
+      }
+      if(sourceAnchor.explicit_id){
+        sourceLabel=sourceLabel+' · #'+sourceAnchor.explicit_id;
+      }
+    }
+    pickInspectLabel.textContent=primary+'\\n'+sourceLabel;
+    pickInspectLabel.style.display='block';
+
+    var viewW=window.innerWidth||document.documentElement.clientWidth||0;
+    var viewH=window.innerHeight||document.documentElement.clientHeight||0;
+    var labelRect=pickInspectLabel.getBoundingClientRect();
+    var left=mouseX+14;
+    var top=mouseY+14;
+    if(left+labelRect.width>viewW-8){
+      left=Math.max(8,mouseX-labelRect.width-14);
+    }
+    if(top+labelRect.height>viewH-8){
+      top=Math.max(8,mouseY-labelRect.height-14);
+    }
+    pickInspectLabel.style.left=left+'px';
+    pickInspectLabel.style.top=top+'px';
+  }
+
   function elementSelector(el){
     if(!el||!el.tagName) return '';
     var tag=el.tagName.toLowerCase();
@@ -372,6 +502,9 @@ function trackingScript() {
   }
 
   function buildAnchorPayload(el,clientX,clientY){
+    var sourceTarget=findBestSourceAnchorTarget(el);
+    var anchorEl=sourceTarget.element||el;
+    var sourceAnchor=sourceTarget.sourceAnchor||getSourceAnchor(anchorEl)||null;
     var metrics=getMetrics();
     var textSelf='';
     var textParent='';
@@ -381,7 +514,7 @@ function trackingScript() {
     }catch(e){}
     var fallback=buildCoordFallback(clientX,clientY,metrics);
     try{
-      var rect=el&&el.getBoundingClientRect?el.getBoundingClientRect():null;
+      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);
@@ -390,15 +523,15 @@ function trackingScript() {
       }
     }catch(e){}
     return {
-      selector_chain:getSelectorChain(el),
-      dom_fingerprint:getDomFingerprint(el),
+      selector_chain:[],
+      dom_fingerprint:null,
       text_context:{
         self:textSelf,
         parent:textParent
       },
-      container_hint:getContainerHint(el),
+      container_hint:null,
       transient_context:getTransientContext(el),
-      source_anchor:getSourceAnchor(el),
+      source_anchor:sourceAnchor,
       coord_fallback:fallback
     };
   }
@@ -548,6 +681,44 @@ function trackingScript() {
     };
   }
 
+  function getSourceAnchorStrength(anchor){
+    if(!anchor||typeof anchor!=='object') return 0;
+    var score=0;
+    if(anchor.explicit_id) score+=2000;
+    if(anchor.react_key) score+=400;
+    if(anchor.source_file) score+=420;
+    if(typeof anchor.source_line==='number') score+=260;
+    if(anchor.component_name) score+=160;
+    if(Array.isArray(anchor.owner_path)&&anchor.owner_path.length>0){
+      score+=Math.min(220,anchor.owner_path.length*28);
+    }
+    return score;
+  }
+
+  function findBestSourceAnchorTarget(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=getSourceAnchor(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 ownerPathSuffixMatches(current,expected){
     if(!Array.isArray(current)||!Array.isArray(expected)||current.length===0||expected.length===0) return 0;
     var i=current.length-1;
@@ -734,7 +905,10 @@ function trackingScript() {
       }
       consider(docNodes);
     }
-    if(bestScore<220){
+    var minScore=160;
+    if(sourceAnchor.explicit_id) minScore=900;
+    else if(sourceAnchor.source_file) minScore=260;
+    if(bestScore<minScore){
       return { element:null, score:bestScore };
     }
     return { element:best, score:bestScore };
@@ -771,9 +945,6 @@ function trackingScript() {
 
   function resolveAnchor(payload){
     if(!payload||typeof payload!=='object') return {coordFallback:null,strategy:'none',matchedSelector:null,status:'none'};
-    var element=null;
-    var strategy='none';
-    var matchedSelector=null;
     var metrics=getMetrics();
     var transientRoot=null;
     var hasTransientContext=!!(payload.transient_context&&typeof payload.transient_context==='object');
@@ -784,72 +955,32 @@ function trackingScript() {
       }
     }
 
-    function trySelectorChain(scope,scopeTag){
-      if(!Array.isArray(payload.selector_chain)) return false;
-      for(var i=0;i<payload.selector_chain.length;i++){
-        var candidate=payload.selector_chain[i];
-        if(!candidate||typeof candidate.selector!=='string') continue;
-        var nodes=querySelectorAllSafe(scope,candidate.selector);
-        var found=pickBestElement(nodes,payload,metrics,null);
-        if(found&&found.element){
-          element=found.element;
-          strategy='selector';
-          matchedSelector=(scopeTag?scopeTag+': ':'')+candidate.selector;
-          return true;
-        }
-      }
-      return false;
-    }
-
-    if(transientRoot){
-      trySelectorChain(transientRoot,'transient_root');
-    }
-    if(!element&&payload.source_anchor){
-      var sourceScope=transientRoot||document;
-      var sourceMatch=resolveFromSourceAnchor(payload.source_anchor,payload,metrics,sourceScope);
-      if(sourceMatch&&sourceMatch.element){
-        element=sourceMatch.element;
-        strategy='source';
-        matchedSelector='source_anchor';
+    if(!payload.source_anchor){
+      if(payload.coord_fallback){
+        return {
+          coordFallback:payload.coord_fallback,
+          strategy:'fallback',
+          matchedSelector:'legacy_coord_fallback',
+          status:'fallback_only'
+        };
       }
-    }
-    if(!element){
-      trySelectorChain(document,'document');
+      return {coordFallback:null,strategy:'none',matchedSelector:null,status:'none'};
     }
 
-    if(
-      !element&&
-      payload.container_hint&&
-      typeof payload.container_hint.selector==='string'&&
-      isStrongContainerHint(payload.container_hint)
-    ){
-      var containerNodesInRoot=transientRoot?querySelectorAllSafe(transientRoot,payload.container_hint.selector):[];
-      var containerMatch=pickBestElement(containerNodesInRoot,payload,metrics,null);
-      if(!containerMatch.element){
-        var containerNodes=querySelectorAllSafe(document,payload.container_hint.selector);
-        containerMatch=pickBestElement(containerNodes,payload,metrics,null);
-      }
-      if(containerMatch.element){
-        element=containerMatch.element;
-        strategy='container';
-        matchedSelector=payload.container_hint.selector;
-      }
+    var sourceScope=transientRoot||document;
+    var sourceMatch=resolveFromSourceAnchor(payload.source_anchor,payload,metrics,sourceScope);
+    if(!sourceMatch||!sourceMatch.element){
+      return {coordFallback:null,strategy:'fallback',matchedSelector:'source_anchor_miss',status:'fallback_only'};
     }
-    if(!element){
-      var fpMatch=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics,transientRoot||undefined);
-      if(!fpMatch.element){
-        fpMatch=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics,document);
-      }
-      if(fpMatch.element){
-        element=fpMatch.element;
-        strategy='fingerprint';
-      }
-    }
-    if(!element) return {coordFallback:null,strategy:'fallback',matchedSelector:null,status:'fallback_only'};
-    var point=getAnchorClientPoint(element,payload);
+    var point=getAnchorClientPoint(sourceMatch.element,payload);
     var clientX=point.clientX;
     var clientY=point.clientY;
-    return {coordFallback:buildCoordFallback(clientX,clientY,metrics),strategy:strategy,matchedSelector:matchedSelector,status:'resolved'};
+    return {
+      coordFallback:buildCoordFallback(clientX,clientY,metrics),
+      strategy:'source',
+      matchedSelector:'source_anchor',
+      status:'resolved'
+    };
   }
 
   function setPickMode(enabled){
@@ -865,12 +996,22 @@ function trackingScript() {
         window.removeEventListener('click',pickClickHandler,true);
         pickClickHandler=null;
       }
+      if(pickMoveHandler){
+        window.removeEventListener('mousemove',pickMoveHandler,true);
+        pickMoveHandler=null;
+      }
       if(pickEscHandler){
         window.removeEventListener('keydown',pickEscHandler,true);
         pickEscHandler=null;
       }
+      hidePickInspectUi();
       return;
     }
+    pickMoveHandler=function(ev){
+      if(!pickMode) return;
+      var target=ev.target&&ev.target.nodeType===1?ev.target:null;
+      renderPickInspect(target,ev.clientX,ev.clientY);
+    };
     pickClickHandler=function(ev){
       try{
         if(!pickMode) return;
@@ -901,6 +1042,7 @@ function trackingScript() {
         setPickMode(false);
       }
     };
+    window.addEventListener('mousemove',pickMoveHandler,true);
     window.addEventListener('click',pickClickHandler,true);
     window.addEventListener('keydown',pickEscHandler,true);
   }
@@ -1063,7 +1205,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')) {
+                    if (!body.includes('data-checkpoint-script="1"')) {
                         if (body.includes('</head>')) {
                             body = body.replace('</head>', SCRIPT + '\n</head>');
                         }

package/package.json

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