screengraft 0.63.6 → 0.63.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.63.6",
+  "version": "0.63.8",
   "description": "Put a UI screenshot or screen recording onto a photographed device screen with the perspective exactly right \u2014 a homography you confirm by hand, not a generative guess.",
   "keywords": [
     "mockup",

package/ui/index.html

@@ -667,8 +667,15 @@
                display:inline-flex;line-height:20px}
   #detSt:empty,#outSt:empty{display:none}
   .lbl{color:var(--ink);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}
+  /* overscroll-behavior:none on both wells (14 Sep 2026): a trackpad pinch is a
+     wheel event we zoom on, but macOS still owns the gesture's elastic bounce.
+     While the fingers were moving the browser let the well rubber-band past
+     the picture's bottom edge, so the last rows of the photo sat under a band
+     of well for as long as the gesture lasted -- the "photo cropped at the
+     bottom on zoom" report of 14 Sep 2026, seen in both panes. Not
+     reproducible from script, because scripted scrolls clamp. */
   .scroller{overflow:auto;background:var(--well);display:grid;
-            min-height:0;min-width:0;
+            min-height:0;min-width:0;overscroll-behavior:none;
             box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
   /* tabindex -1, not 0: the canvas is not a tab stop — it takes focus only when
      you actually click it, which is what makes space mean PAN rather than
@@ -785,7 +792,7 @@
   button.switch:focus-visible .sw-track{box-shadow:0 0 0 3px var(--acc-soft);border-color:var(--acc)}
 
   #outPane{display:grid}
-  #outWrap{overflow:auto;background:var(--well);display:grid;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
+  #outWrap{overflow:auto;overscroll-behavior:none;background:var(--well);display:grid;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
   /* The depth-of-field gizmo: an SVG laid exactly over the composite, drawn
      in PHOTO pixels (its viewBox is the photo) so every coordinate is the
      engine's own. Always at full opacity: the fade-when-idle was tried and
@@ -2565,15 +2572,20 @@ function ringColour(rgb){ let b = rgb.map(v => v/255);
   return 'rgb(' + b.map(v => Math.round(Math.max(0, Math.min(1, v))*255)).join(',') + ')'; }
 // One small copy of each pane's picture to sample from (a readback per draw,
 // not per pixel). Fit pane: the canvas; result pane: the composite <img>.
+const WELL_RGB = [10,10,11];   // --well, what is under a rail that is not over the picture
 const _sampleCv = document.createElement('canvas'), _sampleCx = _sampleCv.getContext('2d', {willReadFrequently: true});
 function _backdropSampler(source, rect){
   const W = 256, H = Math.max(1, Math.round(256 * rect.height / Math.max(rect.width, 1)));
   _sampleCv.width = W; _sampleCv.height = H;
   try { _sampleCx.drawImage(source, 0, 0, W, H); } catch (e) { return null; }
   const data = _sampleCx.getImageData(0, 0, W, H).data;
-  return (x, y) => { const px = Math.max(0, Math.min(W-1, Math.round((x - rect.left) * W / rect.width)));
-    const py = Math.max(0, Math.min(H-1, Math.round((y - rect.top) * H / rect.height)));
-    const i = (py*W + px) * 4; return data[i+3] ? [data[i], data[i+1], data[i+2]] : null; };
+  // A point outside the picture is over the well, not over the picture's
+  // nearest edge -- clamping put the left rail on the photo's bright edge
+  // column and painted it light (Safari, 14 Sep 2026).
+  return (x, y) => { if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) return WELL_RGB;
+    const px = Math.max(0, Math.min(W-1, Math.floor((x - rect.left) * W / rect.width)));
+    const py = Math.max(0, Math.min(H-1, Math.floor((y - rect.top) * H / rect.height)));
+    const i = (py*W + px) * 4; return data[i+3] ? [data[i], data[i+1], data[i+2]] : WELL_RGB; };
 }
 function _sideColours(sample, r, out){
   const N = 9, sides = {top: [], right: [], bottom: [], left: []};
@@ -2581,7 +2593,7 @@ function _sideColours(sample, r, out){
     sides.top.push(sample(r.left + r.width*t, r.top - 1)); sides.bottom.push(sample(r.left + r.width*t, r.bottom + 1));
     sides.left.push(sample(r.left - 1, r.top + r.height*t)); sides.right.push(sample(r.right + 1, r.top + r.height*t)); }
   for (const [side, pts] of Object.entries(sides)){ const ok = pts.filter(Boolean);
-    const avg = ok.length ? [0,1,2].map(i => ok.reduce((a, p) => a + p[i], 0) / ok.length) : [11,11,11];
+    const avg = ok.length ? [0,1,2].map(i => ok.reduce((a, p) => a + p[i], 0) / ok.length) : WELL_RGB;
     out.style['border' + side[0].toUpperCase() + side.slice(1) + 'Color'] = ringColour(avg); }
 }
 let _ringsQueued = false;
@@ -2597,7 +2609,7 @@ function paintRingsFallback(){
       const sample = ok && rect.width > 0 ? _backdropSampler(src, rect) : null;
       pane.querySelectorAll('.bgroup > .ring.lift, .pillwrap > .ring.lift').forEach(ring => {
         const r = ring.parentElement.getBoundingClientRect();
-        if (sample) _sideColours(sample, r, ring); else ['Top','Right','Bottom','Left'].forEach(sd => ring.style['border' + sd + 'Color'] = ringColour([11,11,11]));
+        if (sample) _sideColours(sample, r, ring); else ['Top','Right','Bottom','Left'].forEach(sd => ring.style['border' + sd + 'Color'] = ringColour(WELL_RGB));
       });
     }
   });