checkpoint-cli 0.1.7 → 0.1.8

package/dist/index.js

@@ -331,6 +331,140 @@ function trackingScript() {
     return null;
   }
 
+  function getVisibleText(node){
+    try{
+      if(!node||!node.textContent) return '';
+      return shortText(String(node.textContent).replace(/\\s+/g,' ').trim()).toLowerCase();
+    }catch(e){}
+    return '';
+  }
+
+  function getNavSignature(){
+    try{
+      var candidates=[];
+      var activeSelectors=[
+        '[aria-current=\"page\"]',
+        '[aria-selected=\"true\"]',
+        '[data-state=\"active\"]',
+        '.active',
+        '.is-active',
+        '.selected'
+      ];
+      for(var i=0;i<activeSelectors.length;i++){
+        var nodes=document.querySelectorAll(activeSelectors[i]);
+        for(var j=0;j<nodes.length&&candidates.length<8;j++){
+          var text=getVisibleText(nodes[j]);
+          if(text) candidates.push(text);
+        }
+      }
+      if(candidates.length===0){
+        var heading=document.querySelector('main h1, [role=\"main\"] h1, h1, h2');
+        var fallbackText=getVisibleText(heading);
+        if(fallbackText) candidates.push(fallbackText);
+      }
+      if(candidates.length===0) return '';
+      return candidates.slice(0,4).join('|');
+    }catch(e){}
+    return '';
+  }
+
+  function getHeadingSignature(){
+    try{
+      var heading=document.querySelector('main h1, [role=\"main\"] h1, h1, h2');
+      return getVisibleText(heading);
+    }catch(e){}
+    return '';
+  }
+
+  function getViewContext(){
+    return {
+      nav_signature:getNavSignature()||undefined,
+      heading_signature:getHeadingSignature()||undefined
+    };
+  }
+
+  function viewContextMatches(expected){
+    if(!expected||typeof expected!=='object') return true;
+    var current=getViewContext();
+    if(expected.nav_signature&&current.nav_signature&&expected.nav_signature!==current.nav_signature){
+      return false;
+    }
+    if(expected.heading_signature&&current.heading_signature&&expected.heading_signature!==current.heading_signature){
+      return false;
+    }
+    return true;
+  }
+
+  function isScrollable(el){
+    if(!el||el.nodeType!==1||!window.getComputedStyle) return false;
+    try{
+      var style=window.getComputedStyle(el);
+      var overflowY=String(style.overflowY||'').toLowerCase();
+      var overflowX=String(style.overflowX||'').toLowerCase();
+      var canScrollY=(overflowY==='auto'||overflowY==='scroll'||overflowY==='overlay')&&(el.scrollHeight-el.clientHeight>1);
+      var canScrollX=(overflowX==='auto'||overflowX==='scroll'||overflowX==='overlay')&&(el.scrollWidth-el.clientWidth>1);
+      return !!(canScrollX||canScrollY);
+    }catch(e){}
+    return false;
+  }
+
+  function getNearestScrollContainer(el){
+    if(!el) return null;
+    var current=el.parentElement;
+    var depth=0;
+    while(current&&depth<10){
+      if(current===document.body||current===document.documentElement) return null;
+      if(isScrollable(current)) return current;
+      current=current.parentElement;
+      depth++;
+    }
+    return null;
+  }
+
+  function getScrollContext(el,clientX,clientY){
+    var container=getNearestScrollContainer(el);
+    if(!container) return null;
+    var rect=container.getBoundingClientRect?container.getBoundingClientRect():null;
+    if(!rect) return null;
+    var safeW=Math.max(1,rect.width||1);
+    var safeH=Math.max(1,rect.height||1);
+    return {
+      container_selector_chain:getSelectorChain(container),
+      container_fingerprint:getDomFingerprint(container),
+      container_x_percent:clampPercent(((clientX-rect.left)/safeW)*100),
+      container_y_percent:clampPercent(((clientY-rect.top)/safeH)*100)
+    };
+  }
+
+  function getPointFromScrollContext(scrollContext){
+    if(!scrollContext||typeof scrollContext!=='object') return null;
+    var container=null;
+    if(Array.isArray(scrollContext.container_selector_chain)){
+      for(var i=0;i<scrollContext.container_selector_chain.length;i++){
+        var candidate=scrollContext.container_selector_chain[i];
+        if(!candidate||typeof candidate.selector!=='string') continue;
+        var nodes=querySelectorAllSafe(document,candidate.selector);
+        var match=pickBestElement(nodes,{coord_fallback:null},getMetrics(),null);
+        if(match&&match.element){
+          container=match.element;
+          break;
+        }
+      }
+    }
+    if(!container&&scrollContext.container_fingerprint){
+      var fp=resolveFromFingerprint(scrollContext.container_fingerprint,{coord_fallback:null},getMetrics(),document);
+      container=fp&&fp.element?fp.element:null;
+    }
+    if(!container||!container.getBoundingClientRect) return null;
+    var rect=container.getBoundingClientRect();
+    var relX=typeof scrollContext.container_x_percent==='number'?clampPercent(scrollContext.container_x_percent)/100:0.5;
+    var relY=typeof scrollContext.container_y_percent==='number'?clampPercent(scrollContext.container_y_percent)/100:0.5;
+    return {
+      clientX:rect.left+(rect.width*relX),
+      clientY:rect.top+(rect.height*relY)
+    };
+  }
+
   function buildCoordFallback(clientX,clientY,metrics){
     var safeViewW=metrics.viewWidth||1;
     var safeViewH=metrics.viewHeight||1;
@@ -377,6 +511,8 @@ function trackingScript() {
       },
       container_hint:getContainerHint(el),
       transient_context:getTransientContext(el),
+      view_context:getViewContext(),
+      scroll_context:getScrollContext(el,clientX,clientY),
       coord_fallback:fallback
     };
   }
@@ -452,13 +588,16 @@ function trackingScript() {
   }
 
   function pickBestElement(nodes,payload,metrics,fingerprintPath){
-    if(!nodes||nodes.length===0) return null;
+    if(!nodes||nodes.length===0) return { element:null, ambiguous:false, bestScore:Infinity };
     var target=getTargetDocPoint(payload,metrics);
     var best=null;
     var bestScore=Infinity;
+    var secondScore=Infinity;
+    var matchCount=0;
     for(var i=0;i<nodes.length;i++){
       var node=nodes[i];
       if(!node||node.nodeType!==1) continue;
+      matchCount++;
       var anchorPoint=getAnchorClientPoint(node,payload);
       var docX=anchorPoint.clientX+metrics.scrollX;
       var docY=anchorPoint.clientY+metrics.scrollY;
@@ -472,11 +611,23 @@ function trackingScript() {
         score+=siblingPathDistance(node,fingerprintPath)*40;
       }
       if(score<bestScore){
+        secondScore=bestScore;
         best=node;
         bestScore=score;
+      }else if(score<secondScore){
+        secondScore=score;
       }
     }
-    return best;
+    if(!best) return { element:null, ambiguous:false, bestScore:Infinity };
+    var ambiguous=false;
+    if(matchCount>1){
+      if(!target){
+        ambiguous=true;
+      }else if((secondScore-bestScore)<18){
+        ambiguous=true;
+      }
+    }
+    return { element:best, ambiguous:ambiguous, bestScore:bestScore };
   }
 
   function querySelectorAllSafe(scope,selector){
@@ -489,14 +640,14 @@ function trackingScript() {
   }
 
   function resolveFromFingerprint(fingerprint,payload,metrics,scope){
-    if(!fingerprint) return null;
+    if(!fingerprint) return { element:null, ambiguous:false, bestScore:Infinity };
     var searchScope=scope||document;
     if(fingerprint.id){
       var byId=searchScope.getElementById?searchScope.getElementById(fingerprint.id):null;
       if(!byId&&searchScope.querySelector){
         try{ byId=searchScope.querySelector('#'+cssEscape(fingerprint.id)); }catch(e){}
       }
-      if(byId) return byId;
+      if(byId) return { element:byId, ambiguous:false, bestScore:0 };
     }
     var tag=fingerprint.tag||'*';
     var selector=tag;
@@ -527,20 +678,30 @@ function trackingScript() {
         var candidate=transient.root_selector_chain[i];
         if(!candidate||typeof candidate.selector!=='string') continue;
         var nodes=querySelectorAllSafe(document,candidate.selector);
-        root=pickBestElement(nodes,payload,metrics,transient.root_fingerprint&&transient.root_fingerprint.sibling_path);
+        var rootMatch=pickBestElement(nodes,payload,metrics,transient.root_fingerprint&&transient.root_fingerprint.sibling_path);
+        root=rootMatch.element;
         if(root) return root;
       }
     }
-    root=resolveFromFingerprint(transient.root_fingerprint,payload,metrics,document);
+    root=resolveFromFingerprint(transient.root_fingerprint,payload,metrics,document).element;
     return root;
   }
 
   function resolveAnchor(payload){
     if(!payload||typeof payload!=='object') return {coordFallback:null,strategy:'none',matchedSelector:null,status:'none'};
+    if(!viewContextMatches(payload.view_context)){
+      return {
+        coordFallback:payload.coord_fallback||null,
+        strategy:'context_mismatch',
+        matchedSelector:null,
+        status:'context_mismatch'
+      };
+    }
     var element=null;
     var strategy='none';
     var matchedSelector=null;
     var metrics=getMetrics();
+    var ambiguous=false;
     var transientRoot=null;
     var hasTransientContext=!!(payload.transient_context&&typeof payload.transient_context==='object');
     if(hasTransientContext){
@@ -557,8 +718,9 @@ function trackingScript() {
         if(!candidate||typeof candidate.selector!=='string') continue;
         var nodes=querySelectorAllSafe(scope,candidate.selector);
         var found=pickBestElement(nodes,payload,metrics,null);
-        if(found){
-          element=found;
+        if(found&&found.element){
+          element=found.element;
+          ambiguous=!!found.ambiguous;
           strategy='selector';
           matchedSelector=(scopeTag?scopeTag+': ':'')+candidate.selector;
           return true;
@@ -581,28 +743,64 @@ function trackingScript() {
       isStrongContainerHint(payload.container_hint)
     ){
       var containerNodesInRoot=transientRoot?querySelectorAllSafe(transientRoot,payload.container_hint.selector):[];
-      var containerEl=pickBestElement(containerNodesInRoot,payload,metrics,null);
-      if(!containerEl){
+      var containerMatch=pickBestElement(containerNodesInRoot,payload,metrics,null);
+      if(!containerMatch.element){
         var containerNodes=querySelectorAllSafe(document,payload.container_hint.selector);
-        containerEl=pickBestElement(containerNodes,payload,metrics,null);
+        containerMatch=pickBestElement(containerNodes,payload,metrics,null);
       }
-      if(containerEl){
-        element=containerEl;
+      if(containerMatch.element){
+        element=containerMatch.element;
+        ambiguous=!!containerMatch.ambiguous;
         strategy='container';
         matchedSelector=payload.container_hint.selector;
       }
     }
     if(!element){
-      var fpEl=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics,transientRoot||undefined);
-      if(!fpEl){
-        fpEl=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics,document);
+      var fpMatch=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics,transientRoot||undefined);
+      if(!fpMatch.element){
+        fpMatch=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics,document);
       }
-      if(fpEl){
-        element=fpEl;
+      if(fpMatch.element){
+        element=fpMatch.element;
+        ambiguous=!!fpMatch.ambiguous;
         strategy='fingerprint';
       }
     }
+    if(!element&&payload.scroll_context){
+      var fromContainer=getPointFromScrollContext(payload.scroll_context);
+      if(fromContainer){
+        return {
+          coordFallback:buildCoordFallback(fromContainer.clientX,fromContainer.clientY,metrics),
+          strategy:'scroll_container',
+          matchedSelector:null,
+          status:'resolved'
+        };
+      }
+    }
     if(!element) return {coordFallback:null,strategy:'fallback',matchedSelector:null,status:'fallback_only'};
+    if(ambiguous){
+      return {
+        coordFallback:payload.coord_fallback||null,
+        strategy:'ambiguous',
+        matchedSelector:matchedSelector,
+        status:'ambiguous'
+      };
+    }
+    var target=getTargetDocPoint(payload,metrics);
+    if(target){
+      var anchorPoint=getAnchorClientPoint(element,payload);
+      var distX=(anchorPoint.clientX+metrics.scrollX)-target.x;
+      var distY=(anchorPoint.clientY+metrics.scrollY)-target.y;
+      var dist=Math.sqrt(distX*distX+distY*distY);
+      if(dist>220){
+        return {
+          coordFallback:payload.coord_fallback||null,
+          strategy:'ambiguous',
+          matchedSelector:matchedSelector,
+          status:'ambiguous'
+        };
+      }
+    }
     var point=getAnchorClientPoint(element,payload);
     var clientX=point.clientX;
     var clientY=point.clientY;
@@ -695,6 +893,7 @@ function trackingScript() {
       scrollTick=true;
       requestAnimationFrame(function(){
         reportScroll();
+        reportDomMutation('scroll');
         scrollTick=false;
       });
     }
@@ -758,6 +957,7 @@ function trackingScript() {
   window.addEventListener('popstate',reportNav);
   window.addEventListener('hashchange',reportNav);
   window.addEventListener('scroll',onScroll,{passive:true});
+  document.addEventListener('scroll',onScroll,true);
   window.addEventListener('resize',reportScroll);
   window.addEventListener('message',function(e){
     try{

package/package.json

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