screengraft 0.54.5 → 0.54.7

package/package.json

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

@@ -13,7 +13,7 @@ The geometry is exact (`warp.py`); the detection is advisory (`detect.py`) and t
 
 **The realism pass ships and is ON by default** (`grade.py`): it matches the injected screen's white balance and grain to the light around it, at a strength the designer sets in the rail. It can also lift the device's real specular highlights from a screen-off reference frame, though the UI cannot supply one yet. Off is a first-class choice and keeps the screenshot's colour exactly — say so if the user is reviewing brand colour.
 
-**Depth of field** *(off by default)*: a phone shot at an angle is a plane receding from the camera, so its far end is softer than its near end, and a screenshot pasted pin-sharp across all of it gives the fake away. On, the screenshot blurs across the screen in one direction — **direction** (where the blur grows toward) and **strength** — and the glass edge softens with it. **Measure from photo** reads both off the photograph's own screen boundary; on a real photograph that works, on a *mockup template* the device is usually rendered sharp with the blur only on the background, so it answers "flat" and the designer sets it by eye. The measured strength is a floor (the estimator saturates around 5px of blur), never a ceiling. **The gizmo on the result** is the primary control, defined in the screen's own plane and projected through the fit (so the two lines converge with the phone's edges on a steep shot, as real iso-blur lines do): a solid line where focus ends (drag its centre), a dashed line where the blur reaches its full amount (drag its centre to move it, its end pips to turn both, and slide the diamond along it for how much blur). **Both sides** adds a near limit — a second dashed line behind the focus line — for a phone whose middle is sharp and both ends soft (the depth of field's near and far limits). It fades when the pointer leaves the pane. The sliders and the gizmo are one model. Suggest it when the photo has visible bokeh — a blurred hand, table edge or background — and the composite's screen looks pasted on. The live in-place playback cannot show it; the composite and Render preview do.
+**Depth of field** *(off by default)*: a phone shot at an angle is a plane receding from the camera, so its far end is softer than its near end, and a screenshot pasted pin-sharp across all of it gives the fake away. On, the screenshot blurs across the screen in one direction — **direction** (where the blur grows toward) and **strength** — and the glass edge softens with it. **Measure from photo** reads both off the photograph's own screen boundary; on a real photograph that works, on a *mockup template* the device is usually rendered sharp with the blur only on the background, so it answers "flat" and the designer sets it by eye. The measured strength is a floor (the estimator saturates around 5px of blur), never a ceiling. **The gizmo on the result** is the primary control, defined in the screen's own plane and projected through the fit (so the two lines converge with the phone's edges on a steep shot, as real iso-blur lines do): a solid line where focus ends (drag its centre), a dashed line where the blur reaches its full amount (drag its centre to move it, its end pips to turn both, and slide the diamond along it for how much blur). **Both sides** adds a near limit — a second dashed line behind the focus line — for a phone whose middle is sharp and both ends soft (the depth of field's near and far limits). The sliders and the gizmo are one model. Suggest it when the photo has visible bokeh — a blurred hand, table edge or background — and the composite's screen looks pasted on. The live in-place playback cannot show it; the composite and Render preview do.
 
 **Video ships too.** The screen source can be a video (mp4/mov/webm) as well as a still — pick it exactly like a screenshot, choose which frame to match the edges on, **press Play and the clip runs on the photo immediately** — the browser warps it onto the same four corners with the same corner radius and approximates the emissive blend, so placement and motion can be judged with no wait; **Render preview** composites a few seconds through the real pipeline when the grade, grain and true blend are what you need to see — and the primary button becomes **Render**. The photo does not move, so there is one homography and every frame gets the same geometry; the light match is measured once from the frame you fitted on, so the screen cannot pulse as the UI scrolls. Output is H.264 at CRF 16 (near-visually-lossless) or ProRes 422 HQ. This is what pairs with a prototype recording: record the prototype, then inject the recording into a real photograph.
 

package/ui/index.html

@@ -629,26 +629,25 @@
   #outWrap{overflow:auto;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. Faint until the pointer is over the pane, so it never sits
-     on the composite being judged; solid while a handle is being dragged. */
+     engine's own. Always at full opacity: the fade-when-idle was tried and
+     removed on request (13 Sep 2026). */
   #outWrap{position:relative}
-  #dofGizmo{position:absolute;pointer-events:none;opacity:.4;transition:opacity .15s;overflow:visible}
-  #outWrap:hover #dofGizmo,#dofGizmo.drag{opacity:1}
+  #dofGizmo{position:absolute;pointer-events:none;overflow:visible}
   /* Same rules as the fit overlay (v0.54.3): thin core, a light casing
-     underneath at 45% black, dashes 6/5. The casing is what survives a
+     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,.45);fill:none;vector-effect:non-scaling-stroke}
+  #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.8;fill:none;vector-effect:non-scaling-stroke}
+  #dofGizmo .far{stroke:#f5623d;stroke-width:0.9;fill:none;vector-effect:non-scaling-stroke}
   #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
      as 6/5 on screen at any zoom -- the fit overlay's GUIDE_DASH. */
-  #dofGizmo .h{fill:#f5623d;stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke;pointer-events:auto;cursor:move}
+  #dofGizmo .h{fill:none;stroke:#f5623d;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:auto;cursor:move}
+  #dofGizmo .hcase{fill:none;stroke:rgba(0,0,0,.35);stroke-width:4;vector-effect:non-scaling-stroke;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.hollow{fill:#1a1a1a}
-  #dofGizmo .h.pip{fill:#f5623d}
+  #dofGizmo .h.pip{fill:#f5623d;stroke:#fff;stroke-width:1.2}
   #dofGizmo .h.thumb{fill:#fff;stroke:#f5623d;stroke-width:2}
   #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}
@@ -1480,12 +1479,12 @@ 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,.45)', CORE_IDLE = 'rgba(255,255,255,.92)';
+const CASE_A = 'rgba(0,0,0,.35)', CORE_IDLE = 'rgba(255,255,255,.92)';
 const CORE_ACTIVE = '#f5623d';
 const CORE_QUAD = '#f23b0d';
 // Line weights for the fit overlay, in one place. Thinned 13 Sep 2026 on
 // request: quad 1 -> 0.8, active edge 2 -> 1.5, casing +2.5 -> +1.6 at 45%
-// black instead of 62%. The casing is still there -- it is the part that
+// black instead of 62%; then 0.9 / +2.0 at 35% on a second look. The casing is still there -- it is the part that
 // survives an arbitrary photograph -- just lighter.
 // There is no native rotate cursor; this is a 22px circular arrow, white
 // with a dark outline so it reads on any photograph, hotspot at its centre.
@@ -1496,7 +1495,7 @@ const ROTATE_CURSOR = 'url("data:image/svg+xml;utf8,' + encodeURIComponent(
   '<path 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"/>' +
   '<path d="M15.6 2.6l0.4 4.2-4.2 0.3" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
   '</svg>') + '") 11 11, crosshair';
-const QUAD_W = 0.8, QUAD_ACTIVE_W = 1.5, GUIDE_W = 0.8, CASE_PAD = 1.6;
+const QUAD_W = 0.9, QUAD_ACTIVE_W = 1.5, GUIDE_W = 0.9, CASE_PAD = 2.0;
 const GUIDE_DASH = [6, 5];
 function cased(c, path, coreW, coreColor, dash){
   c.save();
@@ -1509,10 +1508,21 @@ function cased(c, path, coreW, coreColor, dash){
 /* A FILLED handle, still cased. cased() strokes twice; a disc has to fill the
    core and put the dark casing around its rim, or the handle loses the
    readability guarantee that makes markers survive an arbitrary photograph. */
+/* A HOLLOW handle: 8px circle, 2px stroke, nothing inside, so the pixel
+   under the handle stays visible; the casing sits outside the ring so the
+   ring itself reads on any photograph (13 Sep 2026, on request). */
+function casedRing(c, x, y, r, coreColor){
+  c.save();
+  c.strokeStyle = CASE_A; c.lineWidth = 2 + CASE_PAD;
+  c.beginPath(); c.arc(x, y, r, 0, Math.PI*2); c.stroke();
+  c.strokeStyle = coreColor; c.lineWidth = 2;
+  c.beginPath(); c.arc(x, y, r, 0, Math.PI*2); c.stroke();
+  c.restore();
+}
 function casedDisc(c, x, y, r, coreColor){
   c.save();
-  c.strokeStyle = CASE_A; c.lineWidth = 1.8;
-  c.beginPath(); c.arc(x, y, r + 0.6, 0, Math.PI*2); c.stroke();
+  c.strokeStyle = CASE_A; c.lineWidth = 2.0;
+  c.beginPath(); c.arc(x, y, r + 0.7, 0, Math.PI*2); c.stroke();
   c.fillStyle = coreColor;
   c.beginPath(); c.arc(x, y, r, 0, Math.PI*2); c.fill();
   c.restore();
@@ -2300,7 +2310,12 @@ function draw(){
   // hollow; the pivot pips went 2.5 -> 3.5 and are filled too, staying visibly
   // smaller than a corner so the two never read as the same control. The gap the
   // edge leaves for each corner grows with it, or the disc sits on the line.
-  const HANDLE_R = 5.5, PIVOT_R = 3.5, HANDLE_GAP = 7.5;
+  // Corner handle: an 8px ring (r to the stroke centre = 4) with a 2px stroke
+  // and the casing outside it, so its visible outer edge is at r + 1 + CASE_PAD/2;
+  // the edge breaks 1px short of that, which is the gap that reads as
+  // "handle, then line" rather than a bead on a wire.
+  const HANDLE_R = 4, PIVOT_R = 3.5;
+  const HANDLE_GAP = HANDLE_R + 1 + CASE_PAD / 2 + 1;
 
   // Guide: the active edge extended to infinity, so you can see the line it
   // is really on. Thinner and dashed — it is a reference, not a handle.
@@ -2346,7 +2361,7 @@ function draw(){
   ctx.font='600 11px system-ui'; ctx.textBaseline='alphabetic';
   P.forEach(([x,y],i) => {
     const on = active && active.kind==='corner' && active.i===i;
-    casedDisc(ctx, x, y, on ? HANDLE_R + 1 : HANDLE_R, CORE_QUAD);
+    casedRing(ctx, x, y, on ? HANDLE_R + 1 : HANDLE_R, CORE_QUAD);
     casedText(ctx, LBL[i], x+13, y-11, 'rgba(255,255,255,.95)');
   });
 }
@@ -2677,6 +2692,7 @@ $('#dofMeasure').onclick = measureDof;
    the SVG's viewBox is the photo so it stays aligned at every zoom for free. */
 const gz = $('#dofGizmo');
 const SIGMA_FULL_FRAC = 0.02;   // mirrors dof.DOF_MAX_FRAC -- keep in step
+const HANDLE_BREAK = 4 + 1 + 2 + 1;   // ring radius + half its stroke + casing + the 1px gap, screen px
 let dofEnd = parseFloat(recall('dofEnd','1')); if (!(dofEnd > 0)) dofEnd = 1;
 // Where along the lines the handles sit (0..1 across the screen's extent).
 // Page-only: it changes nothing in the render. Turning re-derives it so the
@@ -2728,7 +2744,8 @@ function paintGizmo(){
   const c0 = two ? P(dofEnd2, -0.06) : null, c1 = two ? P(dofEnd2, 1.06) : null, cc = two ? P(dofEnd2, dofK) : null;
   const th = P(dofEnd, 0.08 + 0.84 * dofStr);           // the strength thumb slides along the dashed line
   const sigma = dofStr * SIGMA_FULL_FRAC * g.side;
-  const r = 6 * k, rp = 4 * k, fs11 = 11 * k, off = 14 * k;
+  const r = 4 * k, rp = 3.5 * k, fs11 = 11 * k, off = 14 * k;
+  const ring = (p, h, cls='') => `<circle cx="${p[0]}" cy="${p[1]}" r="${r}" class="hcase"/><circle cx="${p[0]}" cy="${p[1]}" r="${r}" class="h ${cls}" data-h="${h}"/>`;
   const L = (x, y, cls, extra='') => `<line x1="${x[0]}" y1="${x[1]}" x2="${y[0]}" y2="${y[1]}" class="${cls}" ${extra}/>`;
   const T = (p, txt, dy) => `<text x="${p[0]}" y="${p[1] + dy}" text-anchor="middle" font-size="${fs11}">${txt}</text>`;
   // GUIDE_DASH in screen px, expressed in photo px; a line past the screen gets a sparser dash
@@ -2736,15 +2753,18 @@ function paintGizmo(){
   const away = unit(sub(bc, ac));                        // label offsets: away from the other line
   const beyond = dofEnd > 1.0001;
   const beyond2 = two && dofEnd2 < -0.0001;
+  // Each line breaks around its ring handle: the ring is hollow, so a line
+  // running through it would show inside. Break = ring outer edge + 1px.
+  const brk = (HANDLE_BREAK) * k;
+  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 =
-    L(a0, a1, 'case', 'stroke-width="2.6"') + L(a0, a1, 'focus') +
-    L(b0, b1, 'case', `stroke-width="2.4" ${dash(beyond)}`) + L(b0, b1, 'far' + (beyond ? ' out' : ''), dash(beyond)) +
-    (two ? L(c0, c1, 'case', `stroke-width="2.4" ${dash(beyond2)}`) + L(c0, c1, 'far' + (beyond2 ? ' out' : ''), dash(beyond2)) : '') +
+    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)) : '') +
     `<circle cx="${a0[0]}" cy="${a0[1]}" r="${rp}" class="h pip" data-h="rotA"/>` +
     `<circle cx="${a1[0]}" cy="${a1[1]}" r="${rp}" class="h pip" data-h="rotB"/>` +
-    `<circle cx="${ac[0]}" cy="${ac[1]}" r="${r}" class="h" data-h="start"/>` +
-    `<circle cx="${bc[0]}" cy="${bc[1]}" r="${r}" class="h hollow" data-h="end"/>` +
-    (two ? `<circle cx="${cc[0]}" cy="${cc[1]}" r="${r}" class="h hollow" data-h="end2"/>` : '') +
+    ring(ac, 'start') + ring(bc, 'end') + (two ? ring(cc, 'end2') : '') +
     `<rect x="${th[0]-r}" y="${th[1]-r}" width="${2*r}" height="${2*r}" transform="rotate(45 ${th[0]} ${th[1]})" class="h thumb" data-h="str"/>` +
     T([ac[0] - away[0]*off*(two ? 0 : 1), ac[1] - away[1]*off*(two ? 0 : 1) + (two ? -off : 0)], 'sharp', 4*k) +
     T([bc[0] + away[0]*off, bc[1] + away[1]*off], `σ ${sigma.toFixed(0)}px from here${beyond ? ' · past the screen' : ''}`, 4*k) +