screengraft 0.21.0 → 0.21.1

package/README.md

@@ -146,6 +146,22 @@ the background is itself neutral (a pale tiled floor, a plain wall) — you plac
 the edges by hand there. And a prototype recording has no motion blur, so a very
 fast scroll will strobe; that is a property of the source, not of the composite.
 
+## Changelog
+
+Every release is described in [CHANGELOG.md](CHANGELOG.md), with the
+measurements that drove it.
+
+## Support
+
+Bugs and photographs that defeat the detector belong in
+[Issues](https://github.com/seq000/screengraft/issues) — the bug template asks
+first for the `result.json` sidecar, because it reproduces any composite
+exactly. Ideas and "can it do X" go in
+[Discussions](https://github.com/seq000/screengraft/discussions).
+
+If the photograph or the UI is confidential — a client shot, something
+unreleased — email **screengraft@fraczyk.design** instead of posting it.
+
 ## Contributing
 
 See [CONTRIBUTING.md](CONTRIBUTING.md). The short version: there are tests, they

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "screengraft",
-  "version": "0.21.0",
-  "description": "Put a UI screenshot or screen recording onto a photographed device screen with the perspective exactly right — a homography you confirm by hand, not a generative guess.",
+  "version": "0.21.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",
     "device-frame",
@@ -17,7 +17,10 @@
     "figma"
   ],
   "homepage": "https://github.com/seq000/screengraft#readme",
-  "bugs": "https://github.com/seq000/screengraft/issues",
+  "bugs": {
+    "url": "https://github.com/seq000/screengraft/issues",
+    "email": "screengraft@fraczyk.design"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/seq000/screengraft.git"
@@ -25,7 +28,8 @@
   "license": "MIT",
   "author": {
     "name": "Dariusz Fraczyk",
-    "url": "https://fraczyk.design"
+    "url": "https://fraczyk.design",
+    "email": "screengraft@fraczyk.design"
   },
   "type": "commonjs",
   "bin": {

package/scripts/ui.py

@@ -183,6 +183,13 @@ def _is_video(path: str) -> bool:
     return str(path).lower().endswith(VIDEO_EXT)
 
 
+def _fit_frame() -> int:
+    try:
+        return int(SESSION.state.get("fit_frame") or 0)
+    except (TypeError, ValueError):
+        return 0
+
+
 def _read_source(path: str):
     """Read the screen source, which may be a still OR a video.
 
@@ -197,13 +204,27 @@ def _read_source(path: str):
         im, rp = _read_image(real)
         return im, rp, {"video": False}
     n, fps, vw, vh = W.probe_video(real)
-    frame = W.read_frame_at(real, 0)
+    # The frame the designer scrubbed to, NOT frame 0. Preview and Save read the
+    # source through here, so reading frame 0 unconditionally made the scrubber
+    # look decorative: it moved the thumbnail and the composite never changed
+    # (reported 9 Sep 2026). The fitted frame is session state for exactly this
+    # reason — more than one route needs it.
+    frame = W.read_frame_at(real, _fit_frame())
     # Report the encoder's absence HERE, when the clip is chosen, rather than
     # letting the render fail at the end of the job. Someone who installed
     # screengraft before video existed has a working venv with no ffmpeg in it,
     # and nothing else would tell them until they had done all the fitting.
+    # A poster for the chip. The chip used to be handed the .mov path directly,
+    # and an <img> cannot render a video, so the thumbnail was silently blank for
+    # every clip. It is always FRAME 0 and never follows the scrubber: at chip
+    # size one frame looks like any other, so redrawing it would be movement
+    # without information.
+    poster = os.path.join(SESSION.dir,
+                          "poster-" + os.path.splitext(os.path.basename(real))[0] + ".jpg")
+    if not os.path.exists(poster):
+        cv2.imwrite(poster, W.read_frame_at(real, 0), [cv2.IMWRITE_JPEG_QUALITY, 82])
     return frame, real, {"video": True, "frames": n, "fps": fps, "size": [vw, vh],
-                         "ffmpeg": _have_ffmpeg()}
+                         "ffmpeg": _have_ffmpeg(), "poster": poster}
 
 
 # Render progress, read by /api/render_status. A ten-second clip is a few
@@ -364,6 +385,7 @@ class Handler(BaseHTTPRequestHandler):
                     f.write(self._body())
                 # A video is only ever a screen source; a photo must be a still.
                 if role == "screenshot":
+                    SESSION.update(fit_frame=0)
                     im, real, meta = _read_source(dest)
                 else:
                     im, real = _read_image(dest)
@@ -376,6 +398,7 @@ class Handler(BaseHTTPRequestHandler):
             if u.path == "/api/use":
                 role = b["role"]
                 if role == "screenshot":
+                    SESSION.update(fit_frame=0)
                     im, real, meta = _read_source(b["path"])
                 else:
                     im, real = _read_image(b["path"])
@@ -456,12 +479,13 @@ class Handler(BaseHTTPRequestHandler):
                 spath = _safe_local_path(SESSION.state["screenshot"])
                 if not _is_video(spath):
                     return self._json({"error": "the screen source is not a video"}, 400)
+                # Records which frame the fit is judged on. Nothing is written:
+                # the page re-renders the COMPOSITE from it, and the chip stays
+                # on frame 0 deliberately, so a per-step PNG would be disk churn
+                # nobody looks at.
                 idx = int(b.get("index") or 0)
-                frame = W.read_frame_at(spath, idx)
-                dest = os.path.join(SESSION.dir, f"frame-{idx:06d}.png")
-                cv2.imwrite(dest, frame, [cv2.IMWRITE_PNG_COMPRESSION, 1])
-                return self._json({"path": dest, "index": idx,
-                                   "size": [frame.shape[1], frame.shape[0]]})
+                SESSION.update(fit_frame=idx)
+                return self._json({"index": idx})
 
             if u.path == "/api/render":
                 # Video: same fit, same geometry, N frames instead of one.
@@ -479,7 +503,8 @@ class Handler(BaseHTTPRequestHandler):
                                   output=None, message=None)
                 corners = b["corners"]
                 frac = float(b.get("radius_frac") or 0.0)
-                fit_frame = int(b.get("fit_frame") or 0)
+                fit_frame = int(b.get("fit_frame") if b.get("fit_frame") is not None
+                                else _fit_frame())
                 first = W.read_frame_at(spath, fit_frame)
                 radius_px = frac * first.shape[1]
                 gr = float(b.get("grade") if b.get("grade") is not None else 0.0)

package/ui/index.html

@@ -221,6 +221,12 @@
      buttons beside them. Only the corner radii and the shared middle border
      are special. */
   .stepper{display:inline-flex;align-items:center}
+  /* A segmented control has to show which segment is on. `.sel` was only ever
+     styled for the thumbnail picker (.th.sel), so the web/ProRes pair rendered
+     with no selected state at all — reported 9 Sep 2026. Same step as the
+     device chips: selected sits on --raise-hi with the brighter border. */
+  .stepper button.sel{background:var(--raise-hi);border-color:var(--edge-hi);color:var(--ink)}
+  .stepper button.sel:hover{background:var(--raise-highest);border-color:var(--edge-hi)}
   .stepper button{border-radius:0}
   .stepper button:first-child{border-top-left-radius:var(--r-sm);border-bottom-left-radius:var(--r-sm)}
   .stepper button:last-child{border-top-right-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)}
@@ -758,8 +764,8 @@
           <input type="range" id="vframe" min="0" max="0" value="0" step="1"
                  aria-label="Which frame of the clip to match the edges on">
           <span class="sm" id="vframeLbl" style="color:var(--mute);min-width:9ch">0</span>
-          <span class="stepper" role="group" aria-label="Output format">
-            <button class="sm sel" data-preset="web" title="H.264 at CRF 16 — near-visually-lossless, plays anywhere.">Web</button><button class="sm" data-preset="prores" title="ProRes 422 HQ — bigger file, no chroma subsampling. For a case study or further editing.">ProRes</button>
+          <span class="stepper" role="radiogroup" aria-label="Output format">
+            <button class="sm sel" data-preset="web" role="radio" aria-checked="true" title="H.264 at CRF 16 — near-visually-lossless, plays anywhere.">Web</button><button class="sm" data-preset="prores" role="radio" aria-checked="false" title="ProRes 422 HQ — bigger file, no chroma subsampling. For a case study or further editing.">ProRes</button>
           </span>
         </span>
       </div>
@@ -1147,12 +1153,14 @@ function setChosen(role, path, size, el, meta){
   const n = role==='photo'?1:2;
   document.querySelectorAll('#recent'+n+' .th').forEach(x=>x.classList.remove('sel'));
   if (el) el.classList.add('sel');
-  $('#pv'+n).innerHTML = `<img src="${fileURL(path)}" alt="">`;
+  // A video cannot be shown by <img>, so a clip gets its poster frame instead.
+  const thumb = (meta && meta.poster) ? meta.poster : path;
+  $('#pv'+n).innerHTML = `<img src="${fileURL(thumb)}" alt="">`;
   const chip = $('#chip'+n);
   chip.classList.remove('is-empty');
   chip.querySelector('.nm').textContent = `${path.split('/').pop()} · ${size[0]}×${size[1]}`
     + (meta && meta.video ? ` · ${meta.frames} frames @ ${Math.round(meta.fps)}fps` : '');
-  $('#sw'+n).style.background = `center/cover no-repeat url("${fileURL(path)}")`;
+  $('#sw'+n).style.background = `center/cover no-repeat url("${fileURL(thumb)}")`;
   if (role==='photo'){ st.photo = path; st.corners = null; }
   else { st.shot = path; st.video = meta && meta.video ? meta : null; syncVideoUI(); }
   closePop();
@@ -1846,7 +1854,11 @@ let preset = 'web';
 document.querySelectorAll('[data-preset]').forEach(btn => {
   btn.onclick = () => {
     preset = btn.dataset.preset;
-    document.querySelectorAll('[data-preset]').forEach(o => o.classList.toggle('sel', o === btn));
+    document.querySelectorAll('[data-preset]').forEach(o => {
+      const on = o === btn;
+      o.classList.toggle('sel', on);
+      o.setAttribute('aria-checked', on ? 'true' : 'false');
+    });
   };
 });
 
@@ -1879,10 +1891,11 @@ $('#vframe').onchange = async () => {
   // Swapping the poster frame re-runs preview through the same path a still
   // uses, so what you match the edges against is the frame you chose.
   try{
-    const r = await api('/api/frame', {index: +$('#vframe').value});
-    $('#pv2').innerHTML = `<img src="${fileURL(r.path)}" alt="">`;
-    $('#sw2').style.background = `center/cover no-repeat url("${fileURL(r.path)}")`;
-    autoPreview();
+    await api('/api/frame', {index: +$('#vframe').value});
+    // Only the composite changes. The chip keeps frame 0 on purpose — at that
+    // size one frame looks like any other, so updating it would be movement
+    // without meaning.
+    if (st.corners) renderPreview();
   }catch(e){ toast('err', 'Could not read that frame: ' + e.message); }
 };