checkpoint-cli 0.1.5 → 0.1.7

package/dist/index.js

@@ -208,6 +208,129 @@ function trackingScript() {
     };
   }
 
+  function parseZIndex(value){
+    var n=parseInt(String(value||''),10);
+    return isNaN(n)?0:n;
+  }
+
+  function detectTransientKind(el){
+    if(!el||!el.tagName) return 'unknown';
+    try{
+      var role=(el.getAttribute&&el.getAttribute('role')||'').toLowerCase();
+      var classes=(el.className&&typeof el.className==='string'?el.className:'').toLowerCase();
+      var id=(el.id||'').toLowerCase();
+      var label=(role+' '+classes+' '+id).trim();
+      if(role==='dialog'||el.getAttribute('aria-modal')==='true'||label.indexOf('modal')>=0||label.indexOf('dialog')>=0){
+        return 'dialog';
+      }
+      if(label.indexOf('drawer')>=0||label.indexOf('sheet')>=0||label.indexOf('sidebar')>=0){
+        return 'drawer';
+      }
+      if(label.indexOf('popover')>=0) return 'popover';
+      if(role==='menu'||label.indexOf('menu')>=0||label.indexOf('dropdown')>=0) return 'menu';
+      if(role==='tooltip'||label.indexOf('tooltip')>=0) return 'tooltip';
+    }catch(e){}
+    return 'unknown';
+  }
+
+  function isTransientRootCandidate(el){
+    if(!el||!el.tagName) return false;
+    try{
+      var role=(el.getAttribute&&el.getAttribute('role')||'').toLowerCase();
+      var ariaModal=(el.getAttribute&&el.getAttribute('aria-modal')||'').toLowerCase();
+      var dataState=(el.getAttribute&&el.getAttribute('data-state')||'').toLowerCase();
+      var classes=(el.className&&typeof el.className==='string'?el.className:'').toLowerCase();
+      var id=(el.id||'').toLowerCase();
+      var style=window.getComputedStyle?window.getComputedStyle(el):null;
+      var position=style?style.position:'';
+      var zIndex=parseZIndex(style?style.zIndex:0);
+      if(role==='dialog'||role==='menu'||role==='tooltip') return true;
+      if(ariaModal==='true') return true;
+      if(dataState==='open'&&(classes.indexOf('modal')>=0||classes.indexOf('popover')>=0||classes.indexOf('drawer')>=0)) return true;
+      if(classes.indexOf('modal')>=0||classes.indexOf('dialog')>=0||classes.indexOf('drawer')>=0||classes.indexOf('popover')>=0||classes.indexOf('tooltip')>=0||classes.indexOf('dropdown')>=0) return true;
+      if(id.indexOf('modal')>=0||id.indexOf('dialog')>=0||id.indexOf('drawer')>=0||id.indexOf('popover')>=0) return true;
+      if((position==='fixed'||position==='sticky')&&zIndex>=100) return true;
+    }catch(e){}
+    return false;
+  }
+
+  function isLikelyPortaled(el){
+    if(!el||!el.parentElement) return false;
+    try{
+      var root=el;
+      var steps=0;
+      while(root&&root.parentElement&&steps<8){
+        root=root.parentElement;
+        steps++;
+      }
+      if(!root||!root.parentElement) return false;
+      if(root===document.body) return true;
+      if(el.parentElement===document.body) return true;
+      if(el.parentElement&&el.parentElement.id&&String(el.parentElement.id).toLowerCase().indexOf('portal')>=0) return true;
+      var classes=(el.className&&typeof el.className==='string'?el.className:'').toLowerCase();
+      if(classes.indexOf('portal')>=0) return true;
+    }catch(e){}
+    return false;
+  }
+
+  function getOpenerCandidates(){
+    var out=[];
+    var seen={};
+    var selectors=[
+      '[aria-haspopup=\"dialog\"]',
+      '[aria-controls]',
+      '[data-modal-trigger]',
+      '[data-dialog-trigger]',
+      'button',
+      '[role=\"button\"]',
+      'a'
+    ];
+    for(var s=0;s<selectors.length;s++){
+      var selector=selectors[s];
+      try{
+        var nodes=document.querySelectorAll(selector);
+        for(var i=0;i<nodes.length&&out.length<8;i++){
+          var node=nodes[i];
+          if(!node||node.nodeType!==1) continue;
+          var sel=elementSelector(node);
+          if(!sel||seen[sel]) continue;
+          seen[sel]=true;
+          var score=0.3;
+          var label=(node.getAttribute&&node.getAttribute('aria-label')||'').toLowerCase();
+          var text=shortText(node.textContent).toLowerCase();
+          if(label.indexOf('setting')>=0||text.indexOf('setting')>=0) score=0.9;
+          else if(label.indexOf('open')>=0||text.indexOf('open')>=0) score=0.7;
+          out.push({selector:sel,score:score});
+        }
+      }catch(e){}
+    }
+    out.sort(function(a,b){ return b.score-a.score; });
+    return out.slice(0,6);
+  }
+
+  function getTransientContext(el){
+    if(!el||typeof el.closest!=='function') return null;
+    var current=el;
+    var depth=0;
+    while(current&&current.nodeType===1&&depth<8){
+      if(isTransientRootCandidate(current)){
+        var style=window.getComputedStyle?window.getComputedStyle(current):null;
+        return {
+          kind:detectTransientKind(current),
+          root_selector_chain:getSelectorChain(current),
+          root_fingerprint:getDomFingerprint(current),
+          is_portaled:isLikelyPortaled(current),
+          z_index:parseZIndex(style?style.zIndex:0),
+          is_fixed:style?style.position==='fixed':false,
+          opener_candidates:getOpenerCandidates()
+        };
+      }
+      current=current.parentElement;
+      depth++;
+    }
+    return null;
+  }
+
   function buildCoordFallback(clientX,clientY,metrics){
     var safeViewW=metrics.viewWidth||1;
     var safeViewH=metrics.viewHeight||1;
@@ -235,6 +358,16 @@ function trackingScript() {
       textSelf=shortText(el&&el.textContent);
       textParent=shortText(el&&el.parentElement&&el.parentElement.textContent);
     }catch(e){}
+    var fallback=buildCoordFallback(clientX,clientY,metrics);
+    try{
+      var rect=el&&el.getBoundingClientRect?el.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 {
       selector_chain:getSelectorChain(el),
       dom_fingerprint:getDomFingerprint(el),
@@ -243,14 +376,126 @@ function trackingScript() {
         parent:textParent
       },
       container_hint:getContainerHint(el),
-      coord_fallback:buildCoordFallback(clientX,clientY,metrics)
+      transient_context:getTransientContext(el),
+      coord_fallback:fallback
     };
   }
 
-  function resolveFromFingerprint(fingerprint){
+  function getTargetDocPoint(payload,metrics){
+    var fallback=payload&&payload.coord_fallback;
+    if(!fallback||typeof fallback!=='object') return null;
+    var docW=(typeof fallback.doc_width==='number'&&fallback.doc_width>0)
+      ? fallback.doc_width
+      : (metrics.docWidth||metrics.viewWidth||1);
+    var docH=(typeof fallback.doc_height==='number'&&fallback.doc_height>0)
+      ? fallback.doc_height
+      : (metrics.docHeight||metrics.viewHeight||1);
+    if(typeof fallback.doc_x_percent==='number'&&typeof fallback.doc_y_percent==='number'){
+      return {
+        x:(fallback.doc_x_percent/100)*docW,
+        y:(fallback.doc_y_percent/100)*docH
+      };
+    }
+    if(typeof fallback.x_percent==='number'&&typeof fallback.y_percent==='number'){
+      var viewW=(typeof fallback.viewport_width==='number'&&fallback.viewport_width>0)
+        ? fallback.viewport_width
+        : (metrics.viewWidth||1);
+      var viewH=(typeof fallback.viewport_height==='number'&&fallback.viewport_height>0)
+        ? fallback.viewport_height
+        : (metrics.viewHeight||1);
+      var scrollX=typeof fallback.scroll_x==='number'?fallback.scroll_x:metrics.scrollX;
+      var scrollY=typeof fallback.scroll_y==='number'?fallback.scroll_y:metrics.scrollY;
+      return {
+        x:(fallback.x_percent/100)*viewW+scrollX,
+        y:(fallback.y_percent/100)*viewH+scrollY
+      };
+    }
+    return null;
+  }
+
+  function getAnchorClientPoint(el,payload){
+    var rect=el.getBoundingClientRect();
+    var safeW=Math.max(2,rect.width||2);
+    var safeH=Math.max(2,rect.height||2);
+    var relX=0.5;
+    var relY=0.5;
+    var fallback=payload&&payload.coord_fallback;
+    if(fallback&&typeof fallback.element_x_percent==='number'){
+      relX=clampPercent(fallback.element_x_percent)/100;
+    }
+    if(fallback&&typeof fallback.element_y_percent==='number'){
+      relY=clampPercent(fallback.element_y_percent)/100;
+    }
+    return {
+      clientX:rect.left+Math.max(1,Math.min(safeW-1,safeW*relX)),
+      clientY:rect.top+Math.max(1,Math.min(safeH-1,safeH*relY))
+    };
+  }
+
+  function siblingPathDistance(el,path){
+    if(!Array.isArray(path)||path.length===0) return 0;
+    var current=getSiblingPath(el);
+    var maxLen=Math.max(current.length,path.length);
+    var dist=Math.abs(current.length-path.length)*5;
+    var cOffset=maxLen-current.length;
+    var pOffset=maxLen-path.length;
+    for(var i=0;i<maxLen;i++){
+      var cVal=current[i-cOffset];
+      var pVal=path[i-pOffset];
+      if(typeof cVal==='number'&&typeof pVal==='number'){
+        dist+=Math.abs(cVal-pVal);
+      }else{
+        dist+=2;
+      }
+    }
+    return dist;
+  }
+
+  function pickBestElement(nodes,payload,metrics,fingerprintPath){
+    if(!nodes||nodes.length===0) return null;
+    var target=getTargetDocPoint(payload,metrics);
+    var best=null;
+    var bestScore=Infinity;
+    for(var i=0;i<nodes.length;i++){
+      var node=nodes[i];
+      if(!node||node.nodeType!==1) continue;
+      var anchorPoint=getAnchorClientPoint(node,payload);
+      var docX=anchorPoint.clientX+metrics.scrollX;
+      var docY=anchorPoint.clientY+metrics.scrollY;
+      var score=0;
+      if(target){
+        var dx=docX-target.x;
+        var dy=docY-target.y;
+        score+=Math.sqrt(dx*dx+dy*dy);
+      }
+      if(Array.isArray(fingerprintPath)&&fingerprintPath.length>0){
+        score+=siblingPathDistance(node,fingerprintPath)*40;
+      }
+      if(score<bestScore){
+        best=node;
+        bestScore=score;
+      }
+    }
+    return best;
+  }
+
+  function querySelectorAllSafe(scope,selector){
+    if(!scope||!selector) return [];
+    try{
+      var nodeList=scope.querySelectorAll(selector);
+      return nodeList?Array.prototype.slice.call(nodeList):[];
+    }catch(e){}
+    return [];
+  }
+
+  function resolveFromFingerprint(fingerprint,payload,metrics,scope){
     if(!fingerprint) return null;
+    var searchScope=scope||document;
     if(fingerprint.id){
-      var byId=document.getElementById(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;
     }
     var tag=fingerprint.tag||'*';
@@ -258,56 +503,110 @@ function trackingScript() {
     if(Array.isArray(fingerprint.classes)&&fingerprint.classes.length>0){
       selector+= '.'+fingerprint.classes.map(cssEscape).join('.');
     }
-    try{
-      var nodes=document.querySelectorAll(selector);
-      if(nodes&&nodes.length>0) return nodes[0];
-    }catch(e){}
-    return null;
+    var nodes=querySelectorAllSafe(searchScope,selector);
+    return pickBestElement(nodes,payload,metrics,fingerprint.sibling_path);
+  }
+
+  function isStrongContainerHint(hint){
+    if(!hint||typeof hint!=='object') return false;
+    if(typeof hint.id==='string'&&hint.id.length>0) return true;
+    if(typeof hint.selector==='string'){
+      if(hint.selector.indexOf('#')===0) return true;
+      if(hint.selector.indexOf('[data-testid')>=0) return true;
+      if(hint.selector.indexOf('[role=')>=0) return true;
+    }
+    return false;
+  }
+
+  function resolveTransientRoot(payload,metrics){
+    var transient=payload&&payload.transient_context;
+    if(!transient||typeof transient!=='object') return null;
+    var root=null;
+    if(Array.isArray(transient.root_selector_chain)){
+      for(var i=0;i<transient.root_selector_chain.length;i++){
+        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);
+        if(root) return root;
+      }
+    }
+    root=resolveFromFingerprint(transient.root_fingerprint,payload,metrics,document);
+    return root;
   }
 
   function resolveAnchor(payload){
-    if(!payload||typeof payload!=='object') return {coordFallback:null,strategy:'none',matchedSelector:null};
+    if(!payload||typeof payload!=='object') return {coordFallback:null,strategy:'none',matchedSelector:null,status:'none'};
     var element=null;
     var strategy='none';
     var matchedSelector=null;
-    if(Array.isArray(payload.selector_chain)){
+    var metrics=getMetrics();
+    var transientRoot=null;
+    var hasTransientContext=!!(payload.transient_context&&typeof payload.transient_context==='object');
+    if(hasTransientContext){
+      transientRoot=resolveTransientRoot(payload,metrics);
+      if(!transientRoot){
+        return {coordFallback:null,strategy:'transient_missing',matchedSelector:null,status:'transient_missing'};
+      }
+    }
+
+    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;
-        try{
-          var found=document.querySelector(candidate.selector);
-          if(found){
-            element=found;
-            strategy='selector';
-            matchedSelector=candidate.selector;
-            break;
-          }
-        }catch(e){}
+        var nodes=querySelectorAllSafe(scope,candidate.selector);
+        var found=pickBestElement(nodes,payload,metrics,null);
+        if(found){
+          element=found;
+          strategy='selector';
+          matchedSelector=(scopeTag?scopeTag+': ':'')+candidate.selector;
+          return true;
+        }
       }
+      return false;
     }
-    if(!element&&payload.container_hint&&typeof payload.container_hint.selector==='string'){
-      try{
-        var containerEl=document.querySelector(payload.container_hint.selector);
-        if(containerEl){
-          element=containerEl;
-          strategy='container';
-          matchedSelector=payload.container_hint.selector;
-        }
-      }catch(e){}
+
+    if(transientRoot){
+      trySelectorChain(transientRoot,'transient_root');
     }
     if(!element){
-      var fpEl=resolveFromFingerprint(payload.dom_fingerprint);
+      trySelectorChain(document,'document');
+    }
+
+    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 containerEl=pickBestElement(containerNodesInRoot,payload,metrics,null);
+      if(!containerEl){
+        var containerNodes=querySelectorAllSafe(document,payload.container_hint.selector);
+        containerEl=pickBestElement(containerNodes,payload,metrics,null);
+      }
+      if(containerEl){
+        element=containerEl;
+        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);
+      }
       if(fpEl){
         element=fpEl;
         strategy='fingerprint';
       }
     }
-    if(!element) return {coordFallback:null,strategy:'none',matchedSelector:null};
-    var rect=element.getBoundingClientRect();
-    var clientX=rect.left+Math.max(1,Math.min(rect.width-1,rect.width*0.5));
-    var clientY=rect.top+Math.max(1,Math.min(rect.height-1,rect.height*0.5));
-    var metrics=getMetrics();
-    return {coordFallback:buildCoordFallback(clientX,clientY,metrics),strategy:strategy,matchedSelector:matchedSelector};
+    if(!element) return {coordFallback:null,strategy:'fallback',matchedSelector:null,status:'fallback_only'};
+    var point=getAnchorClientPoint(element,payload);
+    var clientX=point.clientX;
+    var clientY=point.clientY;
+    return {coordFallback:buildCoordFallback(clientX,clientY,metrics),strategy:strategy,matchedSelector:matchedSelector,status:'resolved'};
   }
 
   function setPickMode(enabled){
@@ -400,8 +699,59 @@ function trackingScript() {
       });
     }
   }
+
+  var mutationTick=false;
+  function reportDomMutation(reason){
+    try{
+      window.parent.postMessage({
+        type:'checkpoint:domMutation',
+        reason:reason||'mutation',
+        path:location.pathname+location.search+location.hash
+      },'*');
+    }catch(e){}
+  }
+
+  function onMutation(){
+    if(mutationTick) return;
+    mutationTick=true;
+    requestAnimationFrame(function(){
+      mutationTick=false;
+      reportScroll();
+      reportDomMutation('mutation');
+    });
+  }
+
+  function setupMutationObserver(){
+    try{
+      if(!window.MutationObserver||!document.documentElement) return;
+      var observer=new MutationObserver(function(mutations){
+        for(var i=0;i<mutations.length;i++){
+          var m=mutations[i];
+          if(m.type==='childList'){
+            if((m.addedNodes&&m.addedNodes.length>0)||(m.removedNodes&&m.removedNodes.length>0)){
+              onMutation();
+              return;
+            }
+          }
+          if(m.type==='attributes'){
+            onMutation();
+            return;
+          }
+        }
+      });
+      observer.observe(document.documentElement,{
+        childList:true,
+        subtree:true,
+        attributes:true,
+        attributeFilter:['class','style','aria-hidden','aria-modal','data-state','open']
+      });
+      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();};
@@ -423,23 +773,14 @@ function trackingScript() {
           var item=e.data.items[i];
           if(!item||typeof item.id!=='string') continue;
           var result=resolveAnchor(item.anchorPayload);
-          if(result.coordFallback){
-            positions.push({
-              id:item.id,
-              found:true,
-              strategy:result.strategy,
-              matchedSelector:result.matchedSelector,
-              coordFallback:result.coordFallback
-            });
-          } else {
-            positions.push({
-              id:item.id,
-              found:false,
-              strategy:'fallback',
-              matchedSelector:null,
-              coordFallback:null
-            });
-          }
+          positions.push({
+            id:item.id,
+            found:!!result.coordFallback,
+            status:result.status||'none',
+            strategy:result.strategy,
+            matchedSelector:result.matchedSelector,
+            coordFallback:result.coordFallback||null
+          });
         }
         window.parent.postMessage({
           type:'checkpoint:anchorsResolved',

package/package.json

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