@papyrus-sdk/ui-react-native 0.2.35 → 0.2.37

package/runtime/runtime.js

@@ -156,7 +156,7 @@
     var doc=contents.document,win=contents.window,start=null,blocked=false;
     function point(e){var t=e.changedTouches&&e.changedTouches[0]||e.touches&&e.touches[0];return t?{x:t.clientX,y:t.clientY,time:Date.now()}:null;}
     function selected(){return Boolean(String(win.getSelection()||'').trim()) || config.blocked();}
-    function interactive(target){return Boolean(target && target.closest && target.closest('a,button,input,textarea,select,[contenteditable="true"],[data-papyrus-overlay]'));}
+    function interactive(target){return Boolean(target && target.closest && target.closest('a,button,input,textarea,select,[contenteditable="true"],[data-papyrus-overlay],[data-papyrus-ink-capture]'));}
     function begin(e){start=point(e);blocked=e.touches.length!==1 || selected() || interactive(e.target);}
     function invalidateScroll(finish){if(config.current() && start && finish && config.mode()==='chapter-scroll' && !blocked && !selected() && Math.abs(finish.y-start.y)>12 && Math.abs(finish.y-start.y)>Math.abs(finish.x-start.x) && config.interact)config.interact();}
     function move(e){if(e.touches.length!==1)blocked=true;invalidateScroll(point(e));}
@@ -181,6 +181,84 @@
       typeof anchor.href === 'string' && !/^(javascript|data):/i.test(anchor.href) &&
       typeof anchor.quote === 'string' && anchor.quote.length > 0 && anchor.quote.length <= 100000;
   }
+  function simplifyPath(points, tolerance, maxPoints) {
+    if (!Array.isArray(points) || points.length <= 2) return Array.isArray(points) ? points.slice() : [];
+    tolerance = Number.isFinite(tolerance) ? Math.max(0, tolerance) : 1.5;
+    maxPoints = Number.isSafeInteger(maxPoints) ? Math.max(2, maxPoints) : 512;
+    var keep = new Uint8Array(points.length); keep[0] = 1; keep[points.length - 1] = 1;
+    var stack = [[0, points.length - 1]], toleranceSquared = tolerance * tolerance;
+    while (stack.length) {
+      var interval = stack.pop(), first = interval[0], last = interval[1], a = points[first], b = points[last];
+      var dx = b.x - a.x, dy = b.y - a.y, lengthSquared = dx * dx + dy * dy, maxDistance = toleranceSquared, split = -1;
+      for (var i = first + 1; i < last; i++) {
+        var p = points[i], ratio = lengthSquared ? Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / lengthSquared)) : 0;
+        var px = a.x + ratio * dx, py = a.y + ratio * dy, ox = p.x - px, oy = p.y - py, distance = ox * ox + oy * oy;
+        if (distance > maxDistance) { maxDistance = distance; split = i; }
+      }
+      if (split >= 0) { keep[split] = 1; stack.push([first, split], [split, last]); }
+    }
+    var result = []; for (var j = 0; j < points.length; j++) if (keep[j]) result.push(points[j]);
+    if (result.length <= maxPoints) return result;
+    var capped = []; for (var k = 0; k < maxPoints; k++) capped.push(result[Math.round(k * (result.length - 1) / (maxPoints - 1))]);
+    return capped;
+  }
+  function compactGesturePoints(points, maxPoints) {
+    if (!Array.isArray(points)) return [];
+    maxPoints = Number.isSafeInteger(maxPoints) ? Math.max(2, maxPoints) : 1024;
+    if (points.length <= maxPoints) return points.slice();
+    var compacted = [];
+    for (var i = 0; i < maxPoints; i++) compacted.push(points[Math.round(i * (points.length - 1) / (maxPoints - 1))]);
+    return compacted;
+  }
+  function densifyPath(points, maxStep, maxPoints) {
+    if (!Array.isArray(points) || !points.length) return [];
+    if (points.length === 1) return points.slice();
+    maxStep = Number.isFinite(maxStep) ? Math.max(1, maxStep) : 12;
+    maxPoints = Number.isSafeInteger(maxPoints) ? Math.max(2, maxPoints) : 512;
+    var cumulative = [0], total = 0;
+    for (var i = 1; i < points.length; i++) {
+      if (![points[i-1].x,points[i-1].y,points[i].x,points[i].y].every(Number.isFinite)) return [];
+      total += Math.hypot(points[i].x-points[i-1].x, points[i].y-points[i-1].y);
+      cumulative.push(total);
+    }
+    if (!total) return [points[0], points[points.length-1]];
+    var intervals = Math.min(maxPoints-1, Math.max(1, Math.ceil(total/maxStep))), result = [], segment = 1;
+    for (var sample = 0; sample <= intervals; sample++) {
+      var distance = total*sample/intervals;
+      while (segment < cumulative.length-1 && cumulative[segment] < distance) segment++;
+      var start = points[segment-1], end = points[segment], span = cumulative[segment]-cumulative[segment-1];
+      var ratio = span ? (distance-cumulative[segment-1])/span : 0;
+      result.push({x:start.x+(end.x-start.x)*ratio,y:start.y+(end.y-start.y)*ratio});
+    }
+    return result;
+  }
+  function createSpatialIndex(entries, cellSize) {
+    cellSize = Number.isFinite(cellSize) ? Math.max(8, cellSize) : 64;
+    var cells = new Map();
+    entries.forEach(function(entry) {
+      var left = Math.floor(entry.left / cellSize), right = Math.floor(entry.right / cellSize);
+      var top = Math.floor(entry.top / cellSize), bottom = Math.floor(entry.bottom / cellSize);
+      for (var x = left; x <= right; x++) for (var y = top; y <= bottom; y++) {
+        var key = x + ':' + y, bucket = cells.get(key); if (!bucket) { bucket = []; cells.set(key, bucket); } bucket.push(entry);
+      }
+    });
+    return {cells:cells,cellSize:cellSize};
+  }
+  function queryNearestTextRect(index, x, y, maxDistance) {
+    if (!index || !Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(maxDistance) || maxDistance < 0) return null;
+    var size = index.cellSize, minX = Math.floor((x-maxDistance)/size), maxX = Math.floor((x+maxDistance)/size);
+    var minY = Math.floor((y-maxDistance)/size), maxY = Math.floor((y+maxDistance)/size), seen = new Set(), best = null;
+    for (var cx=minX; cx<=maxX; cx++) for (var cy=minY; cy<=maxY; cy++) {
+      var bucket = index.cells.get(cx+':'+cy); if (!bucket) continue;
+      bucket.forEach(function(entry) {
+        if (seen.has(entry)) return; seen.add(entry);
+        var nearestX = Math.max(entry.left,Math.min(entry.right,x)), nearestY = Math.max(entry.top,Math.min(entry.bottom,y));
+        var dx=x-nearestX,dy=y-nearestY,distance=Math.sqrt(dx*dx+dy*dy);
+        if (distance<=maxDistance && (!best || distance<best.distance)) best={entry:entry,distance:distance,x:nearestX,y:nearestY};
+      });
+    }
+    return best;
+  }
   function textNodes(document) {
     var walker = document.createTreeWalker(document.body, 4);
     var nodes = [], text = '', node;
@@ -230,13 +308,205 @@
     if(win.getComputedStyle(doc.body).position==='static')doc.body.style.position='relative';
     doc.body.appendChild(overlay);
     var registry = new Map(), hitRegions = [];
+    var inkRegistry = new Map(), rangeCache = new Map(), spatialIndex = null, activeGesture = null, inkConfig = {enabled:false,preset:'ink'};
+    var inkSvg = doc.createElementNS('http://www.w3.org/2000/svg','svg');
+    inkSvg.setAttribute('data-papyrus-ink-overlay','');
+    inkSvg.style.cssText = 'position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:1';
+    overlay.appendChild(inkSvg);
+    var previewSvg = doc.createElementNS('http://www.w3.org/2000/svg','svg');
+    previewSvg.setAttribute('data-papyrus-ink-preview-overlay','');
+    previewSvg.style.cssText = 'position:fixed;left:0;top:0;overflow:hidden;pointer-events:none;z-index:2147482999';
+    doc.documentElement.appendChild(previewSvg);
+    var inkCanvas = doc.createElement('canvas');
+    inkCanvas.dataset.papyrusInkCapture = '';
+    inkCanvas.style.cssText = 'position:fixed;left:0;top:0;width:1px;height:1px;z-index:2147483000;background:transparent;pointer-events:none;touch-action:none';
+    doc.documentElement.appendChild(inkCanvas);
+    var inkContext = null; try { if(typeof win.CanvasRenderingContext2D==='function')inkContext = inkCanvas.getContext('2d'); } catch (_) {}
+    function resizeCanvas() {
+      var ratio = Math.max(1,Math.min(3,win.devicePixelRatio || 1));
+      var width=Math.max(1,Math.min(4096,win.innerWidth||1));
+      var height=Math.max(1,Math.min(4096,win.innerHeight||1));
+      inkCanvas.style.width=width+'px';inkCanvas.style.height=height+'px';
+      previewSvg.setAttribute('width',String(width));previewSvg.setAttribute('height',String(height));
+      previewSvg.setAttribute('viewBox','0 0 '+width+' '+height);
+      inkCanvas.width = Math.round(width*ratio); inkCanvas.height = Math.round(height*ratio);
+      if (inkContext) { inkContext.setTransform(ratio,0,0,ratio,0,0); inkContext.clearRect(0,0,width,height); }
+    }
+    function collectTextRects() {
+      var walker = doc.createTreeWalker(doc.body,4), node, entries=[];
+      while ((node=walker.nextNode())) {
+        var parent=node.parentElement;
+        if (!parent || parent.closest('script,style,noscript,textarea,[data-papyrus-overlay],[data-papyrus-ink-capture]')) continue;
+        var text=node.nodeValue || '', style=win.getComputedStyle(parent), computed=parseFloat(style.lineHeight);
+        for (var start=0; start<text.length;) {
+          var end=Math.min(text.length,start+24), last=text.charCodeAt(end-1), next=text.charCodeAt(end);
+          if(end<text.length&&last>=0xD800&&last<=0xDBFF&&next>=0xDC00&&next<=0xDFFF)end++;
+          var range=doc.createRange(); range.setStart(node,start); range.setEnd(node,end);
+          var rects=[]; try { rects=Array.from(range.getClientRects()); } catch (_) {}
+          rects.forEach(function(rect) {
+            if (!(rect.width>0 && rect.height>0)) return;
+            entries.push({left:rect.left+win.scrollX,top:rect.top+win.scrollY,right:rect.right+win.scrollX,bottom:rect.bottom+win.scrollY,width:rect.width,height:rect.height,
+              node:node,start:start,end:end,lineHeight:Number.isFinite(computed)&&computed>0?computed:rect.height});
+          });
+          start=end;
+        }
+      }
+      return entries;
+    }
+    function rebuildSpatialIndex() { spatialIndex=createSpatialIndex(collectTextRects(),64); rangeCache.clear(); }
+    function inkViewportExtent() {
+      var root=doc.documentElement,body=doc.body,bodyRect=body.getBoundingClientRect();
+      var width=root.clientWidth||body.clientWidth||bodyRect.width||win.innerWidth||1;
+      var height=root.clientHeight||body.clientHeight||bodyRect.height||win.innerHeight||1;
+      return Math.max(1,Math.min(4096,width),Math.min(4096,height));
+    }
+    function inkStrokeWidthPx(width,preset) {
+      var scale=preset==='highlight'?0.8:preset==='underline'?0.1:0.15;
+      return Math.max(1,Math.min(24,(Number.isFinite(width)?width:0.006)*inkViewportExtent()*scale));
+    }
+    function closestGlyph(entry,x,y,maxDistance) {
+      var source=(entry.node.nodeValue || '').slice(entry.start,entry.end), best=null, offset=0;
+      for (var glyph of source) {
+        var range=doc.createRange(); range.setStart(entry.node,entry.start+offset); range.setEnd(entry.node,entry.start+offset+glyph.length); offset+=glyph.length;
+        var rects=[]; try { rects=Array.from(range.getClientRects()); } catch (_) {}
+        rects.forEach(function(rect) {
+          if (!(rect.width>0 && rect.height>0)) return;
+          var nx=Math.max(rect.left+win.scrollX,Math.min(rect.right+win.scrollX,x)), ny=Math.max(rect.top+win.scrollY,Math.min(rect.bottom+win.scrollY,y));
+          var dx=x-nx,dy=y-ny,distance=Math.sqrt(dx*dx+dy*dy);
+          if (distance<=maxDistance && (!best || distance<best.distance)) best={range:range,rect:rect,distance:distance};
+        });
+      }
+      if (!best || typeof contents.cfiFromRange!=='function') return null;
+      var quote=best.range.toString(), cfiRange; try { cfiRange=contents.cfiFromRange(best.range); } catch (_) { return null; }
+      if (!quote || typeof cfiRange!=='string' || !/^epubcfi\([^\n<>]+\)$/.test(cfiRange)) return null;
+      var lineHeight=Math.max(1,entry.lineHeight || best.rect.height), px=x-(best.rect.left+win.scrollX), py=y-(best.rect.top+win.scrollY);
+      return {cfiRange:cfiRange,quote:quote,x:Math.max(-3,Math.min(3,px/lineHeight)),y:Math.max(-3,Math.min(3,py/lineHeight))};
+    }
+    function renderInkAnnotation(annotation,keep,bodyRect) {
+      var baseRect=bodyRect || doc.body.getBoundingClientRect() || {left:0,top:0};
+      var data=annotation.epubInk;
+      if (!data || data.version!==1 || data.kind!=='epub-ink' || !Array.isArray(data.segments)) return;
+      keep.add(annotation.id);
+      var group=inkRegistry.get(annotation.id);
+      if (!group) { group=doc.createElementNS('http://www.w3.org/2000/svg','g'); group.setAttribute('data-epub-ink-id',annotation.id); inkSvg.appendChild(group); inkRegistry.set(annotation.id,group); }
+      group.replaceChildren();
+      var color=/^#[0-9a-f]{6}$/i.test(annotation.color)?annotation.color:'#2563eb';
+      var opacity=Number.isFinite(annotation.opacity)?Math.max(0,Math.min(1,annotation.opacity)):1;
+      var preset=['ink','highlight','underline'].indexOf(data.preset)>=0?data.preset:'ink';
+      var stroke=inkStrokeWidthPx(annotation.strokeWidth,preset);
+      data.segments.forEach(function(segment) {
+        if (segment.href!==options.href || !Array.isArray(segment.points)) return;
+        var paths=[], current=[];
+        segment.points.forEach(function(point) {
+          var range=rangeCache.get(point.cfiRange);
+          if (!range) { try { range=contents.range(point.cfiRange); } catch (_) { range=null; } if (range) rangeCache.set(point.cfiRange,range); }
+          if (!range || range.toString()!==point.quote) { if(current.length>1)paths.push(current);current=[];return; }
+          var rect; try { rect=range.getBoundingClientRect(); } catch (_) { rect=null; }
+          if (!rect || !(rect.width>0 && rect.height>0)) { if(current.length>1)paths.push(current);current=[];return; }
+          var lineHeight=Math.max(1,rect.height), x=rect.left-baseRect.left+point.x*lineHeight, y=rect.top-baseRect.top+point.y*lineHeight;
+          var previous=current[current.length-1], jumpLimit=Math.max(24,lineHeight*2.5);
+          if (previous && Math.hypot(x-previous.x,y-previous.y)>jumpLimit) { if(current.length>1)paths.push(current);current=[]; }
+          current.push({x:x,y:y,lineHeight:lineHeight});
+        });
+        if(current.length>1)paths.push(current);
+        paths.forEach(function(points) {
+          var d='M '+points[0].x.toFixed(1)+' '+points[0].y.toFixed(1);
+          for(var i=1;i<points.length;i++){var prev=points[i-1],point=points[i],mx=(prev.x+point.x)/2,my=(prev.y+point.y)/2;d+=' Q '+prev.x.toFixed(1)+' '+prev.y.toFixed(1)+' '+mx.toFixed(1)+' '+my.toFixed(1);}
+          var last=points[points.length-1];d+=' L '+last.x.toFixed(1)+' '+last.y.toFixed(1);
+          var path=doc.createElementNS('http://www.w3.org/2000/svg','path');path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('stroke',color);path.setAttribute('stroke-width',String(stroke));path.setAttribute('stroke-linecap','round');path.setAttribute('stroke-linejoin','round');path.setAttribute('opacity',String(opacity));group.appendChild(path);
+        });
+      });
+    }
+    function clearPreview() {
+      if(inkContext)inkContext.clearRect(0,0,inkCanvas.width,inkCanvas.height);
+      previewSvg.replaceChildren();
+    }
+    function createPreviewPath(x,y) {
+      var path=doc.createElementNS('http://www.w3.org/2000/svg','path');
+      path.setAttribute('data-papyrus-ink-preview','');path.setAttribute('d','M '+x.toFixed(1)+' '+y.toFixed(1));path.setAttribute('fill','none');
+      path.setAttribute('stroke',inkConfig.color);path.setAttribute('stroke-width',String(inkStrokeWidthPx(inkConfig.strokeWidth,inkConfig.preset)));
+      path.setAttribute('stroke-linecap','round');path.setAttribute('stroke-linejoin','round');path.setAttribute('opacity',String(inkConfig.opacity));
+      path.style.pointerEvents='none';previewSvg.appendChild(path);return path;
+    }
+    function updatePreviewPath(clientX,clientY) {
+      var x=clientX,y=clientY;
+      var gesture=activeGesture;
+      var startsSegment=!gesture.previewPath||gesture.previewPathPoints>=32;
+      if(startsSegment){
+        gesture.previewPath=createPreviewPath(gesture.previewLast?gesture.previewLast.x:x,gesture.previewLast?gesture.previewLast.y:y);
+        gesture.previewPathPoints=1;
+      }
+      if(!startsSegment||gesture.previewLast){
+        var pathData=gesture.previewPath.getAttribute('d')||'';
+        gesture.previewPath.setAttribute('d',pathData+' L '+x.toFixed(1)+' '+y.toFixed(1));
+        gesture.previewPathPoints++;
+      }
+      gesture.previewLast={x:x,y:y};
+    }
+    function cancelGesture() {
+      var gesture=activeGesture; activeGesture=null; clearPreview();
+      if(gesture)try{inkCanvas.releasePointerCapture(gesture.pointerId);}catch(_){}
+    }
+    function commitGesture() {
+      var gesture=activeGesture; activeGesture=null; clearPreview();
+      if(!gesture || !alive || !options.isCurrent() || !inkConfig.enabled || !spatialIndex) return;
+      var simplified=simplifyPath(gesture.points,1.5,512), anchorSamples=densifyPath(simplified,12,512), segments=[], current=[];
+      anchorSamples.forEach(function(point) {
+        var coarse=queryNearestTextRect(spatialIndex,point.x,point.y,28);
+        var cutoff=coarse?Math.max(12,Math.min(28,0.8*coarse.entry.lineHeight)):12;
+        var anchored=coarse && closestGlyph(coarse.entry,point.x,point.y,cutoff);
+        if(!anchored){if(current.length>1)segments.push({href:options.href,spineIndex:options.spineIndex,points:current});current=[];return;}
+        current.push(anchored);
+      });
+      if(current.length>1)segments.push({href:options.href,spineIndex:options.spineIndex,points:current});
+      segments=segments.slice(0,64);
+      var pointCount=segments.reduce(function(total,segment){return total+segment.points.length;},0);
+      if(!pointCount)return;
+      var width=Math.max(1,doc.documentElement.scrollWidth,win.innerWidth),height=Math.max(1,doc.documentElement.scrollHeight,win.innerHeight);
+      var normalized=simplified.map(function(p){return {x:Math.max(0,Math.min(1,p.x/width)),y:Math.max(0,Math.min(1,p.y/height))};});
+      var minX=Math.min.apply(null,normalized.map(function(p){return p.x;})),maxX=Math.max.apply(null,normalized.map(function(p){return p.x;}));
+      var minY=Math.min.apply(null,normalized.map(function(p){return p.y;})),maxY=Math.max.apply(null,normalized.map(function(p){return p.y;}));
+      var first=segments[0].points[0], href=segments[0].href, documentId=typeof options.documentId==='function'?options.documentId():options.documentId;
+      var annotation={id:'epub-ink-'+Date.now()+'-'+Math.random().toString(36).slice(2,9),type:'ink',pageIndex:(options.spineIndex||0)+1,
+        rect:{x:minX,y:minY,width:Math.min(1-minX,Math.max(0.001,maxX-minX)),height:Math.min(1-minY,Math.max(0.001,maxY-minY))},path:normalized,color:inkConfig.color,opacity:inkConfig.opacity,strokeWidth:inkConfig.strokeWidth,createdAt:Date.now(),content:first.quote,
+        anchor:{version:1,kind:'epub-cfi',cfiRange:first.cfiRange,href:href,spineIndex:options.spineIndex,documentId:documentId,quote:first.quote},
+        epubInk:{version:1,kind:'epub-ink',documentId:documentId,preset:inkConfig.preset,segments:segments}};
+      if(typeof options.onInkCommit==='function')options.onInkCommit(annotation);
+    }
+    function pointerDown(event) {
+      if(!inkConfig.enabled || !alive || !options.isCurrent() || event.button!==undefined && event.button!==0)return;
+      if(activeGesture){cancelGesture();return;}
+      event.preventDefault();event.stopPropagation();
+      activeGesture={pointerId:event.pointerId,points:[{x:event.clientX+win.scrollX,y:event.clientY+win.scrollY}],last:{x:event.clientX,y:event.clientY},previewPath:null,previewPathPoints:0,previewLast:null};
+      updatePreviewPath(event.clientX,event.clientY);
+      try{inkCanvas.setPointerCapture(event.pointerId);}catch(_){}
+    }
+    function pointerMove(event) {
+      if(!activeGesture || activeGesture.pointerId!==event.pointerId)return;
+      if(!options.isCurrent()||!inkConfig.enabled){cancelGesture();return;}
+      event.preventDefault();event.stopPropagation();
+      var point={x:event.clientX+win.scrollX,y:event.clientY+win.scrollY};activeGesture.points.push(point);
+      if(activeGesture.points.length>2048)activeGesture.points=compactGesturePoints(activeGesture.points,1024);
+      if(inkContext){inkContext.beginPath();inkContext.moveTo(activeGesture.last.x,activeGesture.last.y);inkContext.lineTo(event.clientX,event.clientY);inkContext.strokeStyle=inkConfig.color;inkContext.globalAlpha=inkConfig.opacity;inkContext.lineWidth=inkStrokeWidthPx(inkConfig.strokeWidth,inkConfig.preset);inkContext.lineCap='round';inkContext.lineJoin='round';inkContext.stroke();}
+      updatePreviewPath(event.clientX,event.clientY);
+      activeGesture.last={x:event.clientX,y:event.clientY};
+    }
+    function pointerUp(event) {if(!activeGesture || activeGesture.pointerId!==event.pointerId)return;event.preventDefault();event.stopPropagation();var end={x:event.clientX+win.scrollX,y:event.clientY+win.scrollY},last=activeGesture.points[activeGesture.points.length-1];if(Math.hypot(end.x-last.x,end.y-last.y)>0.5){activeGesture.points.push(end);updatePreviewPath(event.clientX,event.clientY);}commitGesture();}
+    function pointerCancel(event) {if(activeGesture && (event.pointerId===undefined || activeGesture.pointerId===event.pointerId))cancelGesture();}
+    resizeCanvas();rebuildSpatialIndex();
+    inkCanvas.addEventListener('pointerdown',pointerDown);inkCanvas.addEventListener('pointermove',pointerMove);inkCanvas.addEventListener('pointerup',pointerUp);inkCanvas.addEventListener('pointercancel',pointerCancel);inkCanvas.addEventListener('lostpointercapture',pointerCancel);
+    win.addEventListener('blur',pointerCancel);
     function render() {
       frame = 0; if (!alive || !options.isCurrent()) return;
-      var keep = new Set(), noteGroups = new Map();
+      var keep = new Set(), keepInk = new Set(), noteGroups = new Map();
       hitRegions = [];
+      var bodyRect=doc.body.getBoundingClientRect() || {left:0,top:0};
+      inkSvg.setAttribute('width',String(Math.max(doc.documentElement.scrollWidth,win.innerWidth)));
+      inkSvg.setAttribute('height',String(Math.max(doc.documentElement.scrollHeight,win.innerHeight)));
       options.annotations().forEach(function(annotation) {
         var anchor = annotation.anchor;
         if (!validAnchor(anchor) || anchor.href !== options.href || anchor.documentId && options.documentId && anchor.documentId !== options.documentId) return;
+        if(annotation.type==='ink' && annotation.epubInk){renderInkAnnotation(annotation,keepInk,bodyRect);return;}
         var range = resolveRange(contents,anchor); if (!range) return;
         var rects = Array.from(range.getClientRects()).filter(function(r){return r.width>0 && r.height>0;});
         if (!rects.length) return;
@@ -275,22 +545,26 @@
         group.button.addEventListener('click',function(e){e.stopPropagation();if(options.isCurrent())options.onTap(group.ids[0],group.ids);});
       });
       registry.forEach(function(group,id){if (!keep.has(id)) {group.remove();registry.delete(id);}});
+      inkRegistry.forEach(function(group,id){if (!keepInk.has(id)) {group.remove();inkRegistry.delete(id);}});
     }
     function schedule() { if (alive && !frame) frame = win.requestAnimationFrame(render); }
+    function rebuildAndSchedule(){if(!alive)return;rebuildSpatialIndex();schedule();}
+    function handleResize(){resizeCanvas();rebuildAndSchedule();}
+    function handleDocumentLoad(){rebuildAndSchedule();}
     function tapMarkup(event) {
       if(!alive || !options.isCurrent() || String(win.getSelection() || '').length || event.target.closest('[data-papyrus-overlay]'))return;
       var hit=hitRegions.find(function(item){return item.rects.some(function(r){return event.clientX>=r.left && event.clientX<=r.right && event.clientY>=r.top && event.clientY<=r.bottom;});});
       if(hit) {event.stopPropagation();options.onTap(hit.id);}
     }
     doc.addEventListener('click',tapMarkup);
-    var observer = typeof win.ResizeObserver === 'function' ? new win.ResizeObserver(schedule) : null;
+    var observer = typeof win.ResizeObserver === 'function' ? new win.ResizeObserver(rebuildAndSchedule) : null;
     if (observer) observer.observe(doc.body);
-    win.addEventListener('resize',schedule);win.addEventListener('scroll',schedule); doc.addEventListener('load',schedule,true);
-    if (doc.fonts && doc.fonts.ready) doc.fonts.ready.then(schedule);
+    win.addEventListener('resize',handleResize);win.addEventListener('scroll',schedule); doc.addEventListener('load',handleDocumentLoad,true);
+    if (doc.fonts && doc.fonts.ready) doc.fonts.ready.then(function(){if(alive){rebuildSpatialIndex();schedule();}});
     schedule();
-    return {schedule:schedule, hit:function(x,y){return hitRegions.some(function(item){return item.rects.some(function(r){return x>=r.left && x<=r.right && y>=r.top && y<=r.bottom;});});}, range:function(anchor){return resolveRange(contents,anchor);}, destroy:function(){alive=false;if(frame)win.cancelAnimationFrame(frame);if(observer)observer.disconnect();win.removeEventListener('resize',schedule);win.removeEventListener('scroll',schedule);doc.removeEventListener('load',schedule,true);doc.removeEventListener('click',tapMarkup);overlay.remove();doc.body.style.position=originalPosition;registry.clear();}};
+    return {schedule:schedule, setInkMode:function(config){var preset=['ink','highlight','underline'].indexOf(config?.preset)>=0?config.preset:'ink';inkConfig={enabled:!!config?.enabled,preset:preset,color:/^#[0-9a-f]{6}$/i.test(config?.color)?config.color:'#2563eb',opacity:Number.isFinite(config?.opacity)?Math.max(0,Math.min(1,config.opacity)):1,strokeWidth:Number.isFinite(config?.strokeWidth)?Math.max(0.0025,Math.min(0.02,config.strokeWidth)):0.006};inkCanvas.style.pointerEvents=inkConfig.enabled?'auto':'none';if(!inkConfig.enabled)cancelGesture();}, invalidateLayout:rebuildAndSchedule, hit:function(x,y){return hitRegions.some(function(item){return item.rects.some(function(r){return x>=r.left && x<=r.right && y>=r.top && y<=r.bottom;});});}, range:function(anchor){return resolveRange(contents,anchor);}, destroy:function(){alive=false;cancelGesture();if(frame)win.cancelAnimationFrame(frame);if(observer)observer.disconnect();win.removeEventListener('resize',handleResize);win.removeEventListener('scroll',schedule);win.removeEventListener('blur',pointerCancel);doc.removeEventListener('load',handleDocumentLoad,true);doc.removeEventListener('click',tapMarkup);inkCanvas.removeEventListener('pointerdown',pointerDown);inkCanvas.removeEventListener('pointermove',pointerMove);inkCanvas.removeEventListener('pointerup',pointerUp);inkCanvas.removeEventListener('pointercancel',pointerCancel);inkCanvas.removeEventListener('lostpointercapture',pointerCancel);inkCanvas.remove();previewSvg.remove();overlay.remove();doc.body.style.position=originalPosition;registry.clear();inkRegistry.clear();rangeCache.clear();}};
   }
-  return {validAnchor:validAnchor,recoverRange:recoverRange,resolveRange:resolveRange,selection:selection,install:install};
+  return {validAnchor:validAnchor,simplifyPath:simplifyPath,compactGesturePoints:compactGesturePoints,densifyPath:densifyPath,createSpatialIndex:createSpatialIndex,queryNearestTextRect:queryNearestTextRect,recoverRange:recoverRange,resolveRange:resolveRange,selection:selection,install:install};
 });
 
 /* @papyrus-epub-annotations:end */
@@ -306,6 +580,7 @@
   let annotationDocumentId;
   let annotationLabels = {};
   let epubAnnotations = [];
+  let epubInkMode = {enabled:false,color:'#2563eb',opacity:1,strokeWidth:0.006};
   const epubAnnotationRenderers = new Map();
   let spineItems = [];
   let textPages = [];
@@ -1420,11 +1695,14 @@
         if (href && window.PapyrusEpubAnnotations) {
           const renderer = window.PapyrusEpubAnnotations.install(contents, {
             href, get documentId() { return annotationDocumentId; },
+            spineIndex:contents.sectionIndex,
             isCurrent: () => session === documentSessionId && activeRendition === rendition,
             pageWidth: () => activeRendition.layout?.width || viewer.clientWidth,
             annotations: () => epubAnnotations, labels: () => annotationLabels,
+            onInkCommit: annotation => sendEvent('EPUB_INK_CREATED',{documentSessionId:session,annotation}),
             onTap: (id, ids) => sendEvent("EPUB_ANNOTATION_TAP", {documentSessionId: session, id, ids}),
           });
+          renderer.setInkMode(epubInkMode);
           epubAnnotationRenderers.set(contents,renderer);
         }
         const frame = contents && contents.document ? contents.document.defaultView.frameElement : null;
@@ -1516,7 +1794,7 @@
         sendEvent('EPUB_TEXT_SELECTED', payload);
       });
       ['rendered','resized','layout','relocated'].forEach(name => rendition.on(name, () => {
-        if (selectionSession === documentSessionId && selectionRendition === rendition) epubAnnotationRenderers.forEach(renderer => renderer.schedule());
+        if (selectionSession === documentSessionId && selectionRendition === rendition) epubAnnotationRenderers.forEach(renderer => name==='relocated'?renderer.schedule():renderer.invalidateLayout());
       }));
       rendition.on('relocated', (location) => {
         if (selectionSession !== documentSessionId || selectionRendition !== rendition) return;
@@ -1813,6 +2091,7 @@
         documentSessionId = payload.documentSessionId || null;
         epubAnnotations = [];
         annotationDocumentId = undefined;
+        epubInkMode = {enabled:false,color:'#2563eb',opacity:1,strokeWidth:0.006};
         zoom = 1.0;
         epubViewMode = payload.epubMode === "chapter-scroll" ? "continuous" : "single";
         epubLocation = null;
@@ -1944,6 +2223,12 @@
         }
         sendResponse(id,true,null);return;
       }
+      if (kind === 'set-epub-ink-mode') {
+        if(currentType!=='epub'||!documentSessionId||payload.documentSessionId!==documentSessionId)throw new Error('Stale EPUB ink session');
+        epubInkMode={enabled:payload.enabled===true,preset:['ink','highlight','underline'].indexOf(payload.preset)>=0?payload.preset:'ink',color:/^#[0-9a-f]{6}$/i.test(payload.color||'')?payload.color:'#2563eb',opacity:Number.isFinite(payload.opacity)?Math.max(0,Math.min(1,payload.opacity)):1,strokeWidth:Number.isFinite(payload.strokeWidth)?Math.max(0.0025,Math.min(0.02,payload.strokeWidth)):0.006};
+        epubAnnotationRenderers.forEach(renderer=>renderer.setInkMode(epubInkMode));
+        sendResponse(id,true,null);return;
+      }
       if(kind === 'epub-go-to-location'){
         if(currentType!=='epub' || payload.documentSessionId!==documentSessionId || !window.PapyrusEpubReader.validCfi(payload.cfi))throw new Error('Invalid EPUB location');
         epubNavigationQueue=epubNavigationQueue.catch(()=>{}).then(()=>{if(payload.documentSessionId!==documentSessionId)return;epubResizeAnchor?.invalidate();return rendition.display(payload.cfi);});

package/runtime/comicRuntime.test.ts

@@ -1,241 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
-import {
-  getComicPreviewSize,
-  getComicPageAspectRatio,
-  getProtectedComicPageIndexes,
-  isCurrentComicPageLoad,
-  isComicImageName,
-  patchCbrWorkerSource,
-  sortComicPageNames,
-} from "./comicRuntime";
-
-describe("mobile comic runtime helpers", () => {
-  it("keeps only supported comic image entries", () => {
-    expect(isComicImageName("pages/001.jpg")).toBe(true);
-    expect(isComicImageName("pages/002.webp")).toBe(true);
-    expect(isComicImageName("pages/readme.txt")).toBe(false);
-    expect(isComicImageName("pages/")).toBe(false);
-  });
-
-  it("sorts page names naturally", () => {
-    expect(
-      sortComicPageNames(["page-10.jpg", "page-2.jpg", "page-1.jpg"])
-    ).toEqual(["page-1.jpg", "page-2.jpg", "page-10.jpg"]);
-  });
-
-  it("patches the shipped CBR worker to use the packaged WASM asset", () => {
-    const worker = readFileSync(
-      resolve(
-        process.cwd(),
-        "packages/engine-cbr-mobile/runtime/worker-bundle.js.txt"
-      ),
-      "utf8"
-    );
-
-    const patched = patchCbrWorkerSource(worker, "/assets/libarchive.wasm");
-
-    expect(patched).not.toContain(
-      'new URL("libarchive.wasm",import.meta.url).href'
-    );
-    expect(patched).toContain(JSON.stringify("/assets/libarchive.wasm"));
-  });
-
-  it("caps comic previews without upscaling them", () => {
-    expect(getComicPreviewSize(1600, 2400)).toEqual({ width: 240, height: 360 });
-    expect(getComicPreviewSize(120, 180)).toEqual({ width: 120, height: 180 });
-  });
-
-  it("keeps the page geometry when a cached image URL is evicted", () => {
-    expect(getComicPageAspectRatio(1200, 1800)).toBe("1200 / 1800");
-    expect(getComicPageAspectRatio(0, 0)).toBe("1 / 1");
-  });
-
-  it("protects visible and pending pages from URL eviction", () => {
-    expect(
-      Array.from(getProtectedComicPageIndexes(1, [3, 4], [5])).sort(
-        (left, right) => left - right
-      )
-    ).toEqual([-1, 0, 1, 3, 4, 5]);
-  });
-
-  it("rejects page extraction completions from an older document", () => {
-    const entry = { name: "old.jpg" };
-    const currentEntry = { name: "new.jpg" };
-
-    expect(isCurrentComicPageLoad(2, 3, entry, currentEntry)).toBe(false);
-    expect(isCurrentComicPageLoad(3, 3, entry, currentEntry)).toBe(false);
-    expect(isCurrentComicPageLoad(3, 3, entry, entry)).toBe(true);
-  });
-
-  it("embeds the tested helpers in the shipped runtimes", () => {
-    const runtime = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/runtime.js"),
-      "utf8"
-    );
-    const html = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/index.html"),
-      "utf8"
-    );
-
-    expect(runtime.match(/function getComicPageAspectRatio/g)).toHaveLength(1);
-    expect(html.match(/function getComicPageAspectRatio/g)).toHaveLength(1);
-    expect(html).toContain("root.PapyrusComicRuntime");
-    expect(runtime).toContain("getProtectedComicPageIndexes");
-    expect(html).toContain("getProtectedComicPageIndexes");
-    expect(runtime).toContain("file-chunk-request");
-    expect(html).toContain("file-chunk-request");
-  });
-
-  it("loads local EPUB files through the native chunk bridge", () => {
-    const runtime = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/runtime.js"),
-      "utf8"
-    );
-    const html = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/index.html"),
-      "utf8"
-    );
-
-    expect(runtime).toContain("sourceToArrayBuffer(source),");
-    expect(html).toContain("sourceToArrayBuffer(source),");
-    expect(runtime).not.toContain("data = source.uri;");
-    expect(html).not.toContain("data = source.uri;");
-  });
-
-  it("passes an exact ArrayBuffer to epub.js for base64 sources", () => {
-    const runtime = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/runtime.js"),
-      "utf8"
-    );
-    const html = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/index.html"),
-      "utf8"
-    );
-
-    expect(runtime).toContain("const toExactArrayBuffer = (bytes) =>");
-    expect(html).toContain("const toExactArrayBuffer = (bytes) =>");
-    expect(runtime).toContain("data = toExactArrayBuffer(decodeBase64(source.data));");
-    expect(html).toContain("data = toExactArrayBuffer(decodeBase64(source.data));");
-  });
-
-  it("correlates EPUB diagnostics and load terminals by request id", () => {
-    const runtime = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/runtime.js"),
-      "utf8"
-    );
-    const html = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/index.html"),
-      "utf8"
-    );
-    for (const artifact of [runtime, html]) {
-      expect(artifact).toContain("epub.load.start");
-      expect(artifact).toContain("epub.book.ready");
-      expect(artifact).toContain("epub.display.start");
-      expect(artifact).toContain("epub.load.ready");
-      expect(artifact).toContain("epub.load.error");
-      expect(artifact).toContain("epub.load.timeout");
-      expect(artifact).toContain("loadId");
-      expect(artifact).toContain("document.ready");
-      expect(artifact).toContain("document.error");
-      expect(artifact).toContain("withEpubStageTimeout");
-    }
-  });
-
-  it("invalidates a pending EPUB load when another document starts", () => {
-    const runtime = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/runtime.js"),
-      "utf8"
-    );
-    const loadStart = runtime.indexOf("if (kind === 'load')");
-    const generationInvalidation = runtime.indexOf(
-      "epubLoadGeneration += 1",
-      loadStart
-    );
-    const currentTypeAssignment = runtime.indexOf(
-      "currentType = payload.type",
-      loadStart
-    );
-
-    expect(generationInvalidation).toBeGreaterThan(loadStart);
-    expect(generationInvalidation).toBeLessThan(currentTypeAssignment);
-    expect(runtime).toContain(
-      "const loadEpub = async (source, loadId, generation) =>"
-    );
-    expect(runtime).toContain(
-      "const result = await loadEpub(payload.source, id, generation);"
-    );
-  });
-
-  it("rejects a stale EPUB load after outline resolution", () => {
-    const runtime = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/runtime.js"),
-      "utf8"
-    );
-    const outlineStart = runtime.indexOf("const outline = await withEpubStageTimeout(");
-    const outlineGuard = runtime.indexOf(
-      "if (!isCurrentLoad()) throw new Error('EPUB load superseded by a newer load');",
-      outlineStart
-    );
-    const readyEvent = runtime.indexOf(
-      "sendEpubDiagnostic('epub.load.ready'",
-      outlineStart
-    );
-
-    expect(outlineStart).toBeGreaterThan(-1);
-    expect(outlineGuard).toBeGreaterThan(outlineStart);
-    expect(outlineGuard).toBeLessThan(readyEvent);
-  });
-
-  it("ships the paginated and chapter-scroll EPUB reading policy", () => {
-    const runtime = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/runtime.js"),
-      "utf8"
-    );
-    const html = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/index.html"),
-      "utf8"
-    );
-
-    expect(runtime).toContain("manager:'default'");
-    expect(html).toContain("manager:'default'");
-    expect(runtime).toContain("'scrolled-doc'");
-    expect(html).toContain("'scrolled-doc'");
-    expect(runtime).toContain("rendition.on('relocated'");
-    expect(html).toContain("rendition.on('relocated'");
-    expect(runtime).toContain("sendEvent('VIEWER_SCROLL'");
-    expect(html).toContain("sendEvent('VIEWER_SCROLL'");
-    expect(runtime).toContain("sendEvent('EPUB_CONTENT_TAP'");
-    expect(html).toContain("sendEvent('EPUB_CONTENT_TAP'");
-    expect(runtime).toContain("'paginated'");
-    expect(html).toContain("'paginated'");
-  });
-
-  it("observes the real EPUB manager queue without changing queue semantics", () => {
-    const runtime = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/runtime.js"),
-      "utf8"
-    );
-    const html = readFileSync(
-      resolve(process.cwd(), "packages/ui-react-native/runtime/index.html"),
-      "utf8"
-    );
-
-    for (const artifact of [runtime, html]) {
-      expect(artifact).toContain("const originalCheck = typeof manager.check");
-      expect(artifact).toContain("manager.check = function (...args)");
-      expect(artifact).toContain("const originalEnqueue = queue && typeof queue.enqueue");
-      expect(artifact).toContain("queue.enqueue = function (...args)");
-      expect(artifact).toContain("manager.queue.enqueue");
-      expect(artifact).toContain("queue.enqueue = originalEnqueue");
-      expect(artifact).toContain("manager.check.request");
-      expect(artifact).toContain("manager.check.start");
-      expect(artifact).toContain("manager.check.end");
-      expect(artifact).toContain("epubSelectionCleanups");
-      expect(artifact).toContain("__papyrusSelectionCleanup");
-      expect(artifact).toContain("setSelectionActive(false)");
-      expect(artifact).not.toContain("String(task)");
-    }
-  });
-});