screengraft 0.63.8 → 0.63.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.63.8",
+  "version": "0.63.10",
   "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

@@ -792,6 +792,17 @@
   button.switch:focus-visible .sw-track{box-shadow:0 0 0 3px var(--acc-soft);border-color:var(--acc)}
 
   #outPane{display:grid}
+  /* No native scrollbars on either well (14 Sep 2026). With a mouse attached
+     macOS draws CLASSIC scrollbars, always visible, and each well then gives
+     up 17px at the bottom and the right to the track; in Safari's dark theme
+     the horizontal track is a black band with the photo stopping above it --
+     "the photo is cropped a bit at the bottom", both panes, every zoom route.
+     Measured in that Safari: offsetHeight 824, clientHeight 807, scrollHeight
+     nine more than the canvas; with the bars hidden all three agree. The
+     design's well has no scrollbar; panning is the wheel, cmd+wheel and
+     space-drag, and the result pane mirrors this one. */
+  #scroller,#outWrap{scrollbar-width:none}
+  #scroller::-webkit-scrollbar,#outWrap::-webkit-scrollbar{display:none}
   #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
@@ -3073,7 +3084,11 @@ function paintGizmo(){
   const show = dofOn && st.corners && st.shotSize && !im.hidden && im.naturalWidth && $('#liveWrap').hidden;
   gz.toggleAttribute('hidden', !show);
   if (!show) return;
-  const W = im.naturalWidth, Hh = im.naturalHeight;
+  // PHOTO pixels, not the preview's: the corners and every gizmo coordinate
+  // are in the photograph's own pixels, and the preview is a resample of the
+  // whole photograph at <=1600px wide. Sizing the viewBox to the preview put
+  // the lines off the picture on any photo wider than 1600px (14 Sep 2026).
+  const W = img.naturalWidth, Hh = img.naturalHeight;
   gz.setAttribute('viewBox', `0 0 ${W} ${Hh}`);
   gz.style.left = im.offsetLeft + 'px'; gz.style.top = im.offsetTop + 'px';
   gz.style.width = im.clientWidth + 'px'; gz.style.height = im.clientHeight + 'px';
@@ -3135,7 +3150,7 @@ function moveFocus(f){
 // pointer position in SCREENSHOT pixels
 function gizmoPos(e, g){
   const rc = gz.getBoundingClientRect();
-  const W = $('#outImg').naturalWidth, Hh = $('#outImg').naturalHeight;
+  const W = img.naturalWidth, Hh = img.naturalHeight;   // photo pixels, as above
   const photo = [(e.clientX - rc.left) * W / rc.width, (e.clientY - rc.top) * Hh / rc.height];
   return applyH(g.Hi, photo);
 }