screengraft 0.63.10 → 0.64.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.63.10",
+  "version": "0.64.1",
   "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/skills/inject-screenshot/SKILL.md

@@ -5,7 +5,7 @@ description: Injects a UI screenshot OR a screen recording onto a photographed d
 
 # Inject a screenshot onto a photographed device
 
-**What ships (v0.63):** a local browser UI (`scripts/ui.py`) that walks the designer through the whole job — pick the photo and the screen source, which may be an image **or a video** (the images you have used before, drag-drop, browse, path, or a **Figma frame link**), auto-detect the screen as a starting position — and when detection cannot tell which region is a screen, **Point at screen**: one click inside it and the detector uses that point — or, if this photograph has been fitted before, **the fit it was saved with comes back** as the starting position instead of a detection, recognised by the photo's own pixels so a rename or a drag-drop still match — and every save also writes a **portable `.fit.json` beside the mockup** that can be dropped back onto the page later, which is how a fit survives a re-export, another machine, or someone else's hands — then **match the four edges** (drag an edge's middle to slide it, near an end to pivot; corners still draggable) with canvas navigation that follows the usual conventions — **hold ⌘ and scroll to zoom to the pointer, hold space and drag to pan** — and a rectified strip loupe. The fit and the composite sit **side by side and always have** — the result pane re-renders as you drag, which is how a corner gets judged, so it is the layout rather than a mode you can switch off. Then an on-by-default realism pass that colour-matches the source to the photo's light, **Save** (or **Render**, for a video) into the project folder (`--out-dir`), and a **Send to Claude** button that reaches you through the plugin's own MCP server. The UI is a hand port of the project's Figma design file — dark only.
+**What ships (v0.64):** a local browser UI (`scripts/ui.py`) that walks the designer through the whole job — pick the photo and the screen source, which may be an image **or a video** (the images you have used before, drag-drop, browse, path, or a **Figma frame link**), auto-detect the screen as a starting position — and when detection cannot tell which region is a screen, **Point at screen**: one click inside it and the detector uses that point — or, if this photograph has been fitted before, **the fit it was saved with comes back** as the starting position instead of a detection, recognised by the photo's own pixels so a rename or a drag-drop still match — and every save also writes a **portable `.fit.json` beside the mockup** that can be dropped back onto the page later, which is how a fit survives a re-export, another machine, or someone else's hands — then **match the four edges** (drag an edge's middle to slide it, near an end to pivot; corners still draggable) with canvas navigation that follows the usual conventions — **hold ⌘ and scroll to zoom to the pointer, hold space and drag to pan** — and a rectified strip loupe. The fit and the composite sit **side by side and always have** — the result pane re-renders as you drag, which is how a corner gets judged, so it is the layout rather than a mode you can switch off. Then an on-by-default realism pass that colour-matches the source to the photo's light, **Save** (or **Render**, for a video) into the project folder (`--out-dir`), and a **Send to Claude** button that reaches you through the plugin's own MCP server. The UI is a hand port of the project's Figma design file — dark only.
 
 The geometry is exact (`warp.py`); the detection is advisory (`detect.py`) and the human corrects it. **When a detection is wrong and you want to know why**, ask for the candidate list: `POST /api/detect {"trace": true}` writes `<session>/candidates.json`, or run `python3 scripts/detect.py --photo P --out-corners /tmp/c.json --trace /tmp/t.json` (add `--click X,Y`). Every candidate quad is in there with its score and whether it was accepted, rejected, never reached, or filtered out by the click — which is what separates "the screen was never proposed" from "it was proposed and something else won".
 

package/ui/index.html

@@ -813,12 +813,25 @@
   /* Same rules as the fit overlay (v0.54.3): thin core, a light casing
      underneath at 35% black, dashes 6/5. The casing is what survives a
      photograph; the thinness is the request. */
-  #dofGizmo .case{stroke:rgba(0,0,0,.35);fill:none;vector-effect:non-scaling-stroke}
-  #dofGizmo .focus{stroke:#f5623d;stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
-  #dofGizmo .far{stroke:#f5623d;stroke-width:0.9;fill:none;vector-effect:non-scaling-stroke}
+  /* The casing colour is one token so the canvas overlay and the SVG gizmo
+     agree. `html.lightcase` is an EXPERIMENT (14 Sep 2026): a white casing
+     instead of black, to be judged on real photographs. Flip it with
+     ?case=light in the URL or the toggle in Overlay; nothing else changes. */
+  :root{--overlay-case:rgba(0,0,0,.35)}
+  html.lightcase{--overlay-case:rgba(255,255,255,.55)}
+  /* Every gizmo width is a SCREEN px times --gk (photo px per screen px, set
+     by paintGizmo on each zoom) -- not vector-effect:non-scaling-stroke. WebKit
+     applies non-scaling-stroke to the dash pattern as well as the width, so
+     dashes set in photo px came out scaled twice and grew with every zoom out
+     (reported 14 Sep 2026); Chrome scaled only the width. Doing the maths
+     ourselves makes the two agree, and matches the canvas overlay, which has
+     always drawn in screen px. Lines are 1px, casings +2px, as on the canvas. */
+  #dofGizmo{--gk:1}
+  #dofGizmo .case{stroke:var(--overlay-case);fill:none;stroke-width:calc(3px * var(--gk))}
+  #dofGizmo .focus{stroke:#f5623d;stroke-width:calc(1px * var(--gk));fill:none}
+  #dofGizmo .far{stroke:#f5623d;stroke-width:calc(1px * var(--gk));fill:none}
   #dofGizmo .far.out{opacity:.75}
-  /* Dash lengths are set inline in photo px scaled by the zoom (SVG dashes
-     are viewBox units; non-scaling-stroke does not cover them), so they read
+  /* Dash lengths are set inline in photo px scaled by the zoom, so they read
      as 6/5 on screen at any zoom -- the fit overlay's GUIDE_DASH. */
   /* pointer-events:ALL, not auto: the rings are hollow (v0.54.7), and an
      unfilled SVG shape under `auto` is hit only on its stroke — the centre of
@@ -826,17 +839,17 @@
      could not be grabbed at all on a steep fit (reported 14 Sep 2026). `all`
      hits the interior whatever the fill. Each handle also carries a .hit disc,
      a 10px-radius invisible target, because a 4px ring is not a grab area. */
-  #dofGizmo .h{fill:none;stroke:#f5623d;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:all;cursor:move}
+  #dofGizmo .h{fill:none;stroke:#f5623d;stroke-width:calc(2px * var(--gk));pointer-events:all;cursor:move}
   #dofGizmo .hit{fill:transparent;stroke:none;pointer-events:all;cursor:move}
   #dofGizmo .hit.pipHit{cursor:inherit}
   #dofGizmo .hit[data-h="str"]{cursor:ew-resize}
-  #dofGizmo .hcase{fill:none;stroke:rgba(0,0,0,.35);stroke-width:4;vector-effect:non-scaling-stroke;pointer-events:none}
+  #dofGizmo .hcase{fill:none;stroke:var(--overlay-case);stroke-width:calc(4px * var(--gk));pointer-events:none}
   #dofGizmo .h.pip{cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M17.5 11a6.5 6.5 0 1 1-2.2-4.9' fill='none' stroke='rgba(0,0,0,.85)' stroke-width='4.2' stroke-linecap='round'/%3E%3Cpath d='M17.5 11a6.5 6.5 0 1 1-2.2-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M15.6 2.6l0.4 4.2-4.2 0.3' fill='none' stroke='rgba(0,0,0,.85)' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.6 2.6l0.4 4.2-4.2 0.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 11 11, crosshair}
   #dofGizmo .h.thumb{cursor:ew-resize}
-  #dofGizmo .h.pip{fill:#f5623d;stroke:#fff;stroke-width:1.2}
-  #dofGizmo .h.thumb{fill:#fff;stroke:#f5623d;stroke-width:2}
+  #dofGizmo .h.pip{fill:#f5623d;stroke:#fff;stroke-width:calc(1.2px * var(--gk))}
+  #dofGizmo .h.thumb{fill:#fff;stroke:#f5623d;stroke-width:calc(2px * var(--gk))}
   #dofGizmo .h:active{cursor:grabbing}
-  #dofGizmo text{font:600 11px system-ui,-apple-system,sans-serif;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
+  #dofGizmo text{font:600 11px system-ui,-apple-system,sans-serif;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:calc(3px * var(--gk));stroke-linejoin:round;pointer-events:none}
   #outImg,#outVid{display:block;margin:auto}
   /* The live layer stacks the clip on the photo. `position:relative` on the
      wrapper and `transform-origin:0 0` on the video are what make the matrix3d
@@ -1705,7 +1718,15 @@ const recall = (k,d) => { try{ const v = localStorage.getItem('sg.'+k); return v
    The dark casing underneath is NOT optional and stays: flat accent measures
    ~1.06:1 against mid-tone photography, which is the failure the casing was
    introduced to fix. CORE_IDLE stays white for the strip's idle rule. */
-const CASE_A = 'rgba(0,0,0,.35)', CORE_IDLE = 'rgba(255,255,255,.92)';
+let CASE_A = 'rgba(0,0,0,.35)'; const CORE_IDLE = 'rgba(255,255,255,.92)';
+// Casing follows the --overlay-case token (see the CSS), so the light-casing
+// experiment reaches the canvas overlay too. Read once per toggle, not per draw.
+function setLightCase(on){
+  document.documentElement.classList.toggle('lightcase', !!on);
+  CASE_A = getComputedStyle(document.documentElement).getPropertyValue('--overlay-case').trim() || CASE_A;
+  try { if (img.naturalWidth) draw(); } catch (e) {}   // before the image exists there is nothing to redraw
+}
+addEventListener('DOMContentLoaded', () => { if (new URLSearchParams(location.search).get('case') === 'light') setLightCase(true); });
 const CORE_ACTIVE = '#f5623d';
 const CORE_QUAD = '#f23b0d';
 // Line weights for the fit overlay, in one place. Thinned 13 Sep 2026 on
@@ -1726,7 +1747,10 @@ const GUIDE_DASH = [6, 5];
 function cased(c, path, coreW, coreColor, dash){
   c.save();
   if (dash) c.setLineDash(dash);
-  c.lineCap = 'round'; c.lineJoin = 'round';
+  // Butt caps on a dashed stroke: a round cap grows every dash by the line
+  // width at both ends, so the 6/5 guide read as ~9/2 under its 2.9px casing
+  // while the gizmo (SVG, butt caps) showed a true 6/5 (14 Sep 2026).
+  c.lineCap = dash ? 'butt' : 'round'; c.lineJoin = 'round';
   c.strokeStyle = CASE_A; c.lineWidth = coreW + CASE_PAD; path(); c.stroke();
   c.strokeStyle = coreColor; c.lineWidth = coreW; path(); c.stroke();
   c.restore();
@@ -2127,6 +2151,7 @@ $('#figmaBtn').onclick = async () => {
    with the two UNCHANGED adjacent lines. Corner handles stay for edges that
    run off-frame or sit behind an occluder. */
 const cv = $('#c'), ctx = cv.getContext('2d');
+let cvW = 0, cvH = 0, cvDpr = 1;   // the canvas's CSS size and the device-pixel factor of its store
 const strip = $('#strip'), sctx = strip.getContext('2d');
 const stripF = $('#stripF'), fctx = stripF.getContext('2d');
 const img = new Image();
@@ -2202,8 +2227,17 @@ function computeFit(){
 function setCanvasZoom(z, focus){
   const prev = scale;
   scale = Math.max(0.05, Math.min(4, z));
-  cv.width = Math.round(img.naturalWidth * scale);
-  cv.height = Math.round(img.naturalHeight * scale);
+  // The backing store is sized in DEVICE pixels and the element in CSS pixels,
+  // so on a Retina display the photo and the overlay are drawn at 2x and the
+  // overlay's 1px lines are as sharp as the SVG gizmo's in the result pane.
+  // Until 14 Sep 2026 the store was CSS-sized and the browser upsampled it --
+  // every line in the fit pane was softer than the same line one pane over.
+  // draw() undoes the factor with setTransform, so everything below still
+  // thinks in CSS px: cvW/cvH are the CSS size, cv.width/height the store.
+  cvW = Math.round(img.naturalWidth * scale); cvH = Math.round(img.naturalHeight * scale);
+  cvDpr = Math.max(1, window.devicePixelRatio || 1);
+  cv.width = Math.round(cvW * cvDpr); cv.height = Math.round(cvH * cvDpr);
+  cv.style.width = cvW + 'px'; cv.style.height = cvH + 'px';
   $('#czSt').textContent = Math.round(scale*100) + '%';
   draw();
   const sc = $('#scroller');
@@ -2243,8 +2277,8 @@ function zoomAt(z, clientX, clientY){
   const before = pos({clientX, clientY});
   setCanvasZoom(z);
   const sc = $('#scroller'), r = cv.getBoundingClientRect();
-  sc.scrollLeft += r.left + before[0] * scale * (r.width / cv.width) - clientX;
-  sc.scrollTop  += r.top  + before[1] * scale * (r.height / cv.height) - clientY;
+  sc.scrollLeft += r.left + before[0] * scale * (r.width / cvW) - clientX;
+  sc.scrollTop  += r.top  + before[1] * scale * (r.height / cvH) - clientY;
 }
 
 /* A trackpad pinch arrives as a wheel event with ctrlKey synthesised true, and
@@ -2640,9 +2674,10 @@ function draw(){
   // fit, so leaving it on the old corners would make the two panes disagree
   // mid-drag — which is the one thing the side-by-side exists to prevent.
   if (!$('#liveWrap').hidden) placeLiveVideo();
-  ctx.clearRect(0,0,cv.width,cv.height);
+  ctx.setTransform(cvDpr, 0, 0, cvDpr, 0, 0);          // CSS px from here on; the store is cvDpr times larger
+  ctx.clearRect(0,0,cvW,cvH);
   if (!img.naturalWidth) return;
-  ctx.drawImage(img, 0,0, cv.width, cv.height);
+  ctx.drawImage(img, 0,0, cvW, cvH);
   if (!st.corners) return;
   const P = st.corners.map(([x,y]) => [x*scale, y*scale]);
   const active = drag || hover || pick;
@@ -2721,7 +2756,7 @@ function draw(){
 
 function pos(e){
   const r = cv.getBoundingClientRect();
-  return [(e.clientX-r.left)*cv.width/r.width/scale, (e.clientY-r.top)*cv.height/r.height/scale];
+  return [(e.clientX-r.left)*cvW/r.width/scale, (e.clientY-r.top)*cvH/r.height/scale];
 }
 function hitTest(p){
   if (!st.corners) return null;
@@ -3093,6 +3128,7 @@ function paintGizmo(){
   gz.style.left = im.offsetLeft + 'px'; gz.style.top = im.offsetTop + 'px';
   gz.style.width = im.clientWidth + 'px'; gz.style.height = im.clientHeight + 'px';
   const k = W / Math.max(im.clientWidth, 1);           // photo px per screen px
+  gz.style.setProperty('--gk', k);                     // every stroke width in the CSS is screen px * this
   const g = gizmoGeom(); if (!g.H || !g.Hi) return;
   const P = (f, q) => applyH(g.H, gzPt(g, f, q));
   const a0 = P(dofStart, -0.06), a1 = P(dofStart, 1.06), ac = P(dofStart, dofK);
@@ -3119,9 +3155,9 @@ function paintGizmo(){
   const split = (p0, p1, h) => { const v = unit(sub(p1, p0)); return [[p0, sub(h, mul(v, brk))], [add(h, mul(v, brk)), p1]]; };
   const LL = (p0, p1, h, cls, extra='') => split(p0, p1, h).map(([x, y]) => L(x, y, cls, extra)).join('');
   gz.innerHTML =
-    LL(a0, a1, ac, 'case', 'stroke-width="3"') + LL(a0, a1, ac, 'focus') +
-    LL(b0, b1, bc, 'case', `stroke-width="2.9" ${dash(beyond)}`) + LL(b0, b1, bc, 'far' + (beyond ? ' out' : ''), dash(beyond)) +
-    (two ? LL(c0, c1, cc, 'case', `stroke-width="2.9" ${dash(beyond2)}`) + LL(c0, c1, cc, 'far' + (beyond2 ? ' out' : ''), dash(beyond2)) : '') +
+    LL(a0, a1, ac, 'case') + LL(a0, a1, ac, 'focus') +
+    LL(b0, b1, bc, 'case', dash(beyond)) + LL(b0, b1, bc, 'far' + (beyond ? ' out' : ''), dash(beyond)) +
+    (two ? LL(c0, c1, cc, 'case', dash(beyond2)) + LL(c0, c1, cc, 'far' + (beyond2 ? ' out' : ''), dash(beyond2)) : '') +
     hit(a0, 'rotA', 'pipHit') + `<circle cx="${a0[0]}" cy="${a0[1]}" r="${rp}" class="h pip" data-h="rotA"/>` +
     hit(a1, 'rotB', 'pipHit') + `<circle cx="${a1[0]}" cy="${a1[1]}" r="${rp}" class="h pip" data-h="rotB"/>` +
     ring(ac, 'start') + ring(bc, 'end') + (two ? ring(cc, 'end2') : '') +