screengraft 0.41.1 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.41.1",
+  "version": "0.43.0",
   "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/scripts/detect.py

@@ -635,7 +635,30 @@ def _finalize(candidates, img_area: float, refine: bool = True, img_shape=None,
     # project has never had the number. Off unless asked for, and it must not
     # change the answer: it observes the same lists the walk below uses.
     walked = {}
-    for cand in sorted(candidates, key=lambda c: c[0], reverse=True):
+    # Walk order: by score -- EXCEPT when the best-scoring candidate has no
+    # shape evidence at all (tier 0: sharp, unmeasurable, or inconsistent
+    # corners) while a tier-2 candidate exists in the same list. A tier-0
+    # winner cannot be corroborated and ends in an abstention or a refusal, so
+    # nothing is lost by looking past it; a tier-2 candidate has four corners
+    # agreeing on a radius, which on the labelled corpus has meant "on the
+    # screen" for every channel-accepted result. Deliberately NOT tier-first
+    # ordering of the whole list: that was tried on 11 Sep 2026 and broke three
+    # photographs, because a tier-2 WRONG candidate sits deeper in the list on
+    # each. This only moves when score alone would have handed the answer to a
+    # quad with nothing to say for itself.
+    def _tier_of(cand):
+        _score, quad, contour, _tag = cand
+        q = order_quad(refine_corners(contour, quad, rail_band)[0]) if refine else quad
+        return shape_tier({"corner_radius": measure_corner_radius(contour, q)})
+
+    order = sorted(candidates, key=lambda c: c[0], reverse=True)
+    if order and _tier_of(order[0]) == 0:
+        # Identity, not equality: candidates hold numpy arrays.
+        strong = [c for c in order if _tier_of(c) == 2]
+        if strong:
+            strong_ids = {id(c) for c in strong}
+            order = strong + [c for c in order if id(c) not in strong_ids]
+    for cand in order:
         # NOT necessarily `cand`: pick_innermost steps inward from it while a
         # comparably screen-like quad nests inside, so the quad that gets
         # validated -- and returned -- can belong to a different candidate.
@@ -927,6 +950,18 @@ def has_rounded_corners(result) -> bool:
     if float(cr["photo_px"]) <= MIN_ROUNDING_PX:
         return False
     per = [float(v) for v in cr["per_corner_px"]]
+    # ALL FOUR corners, not most of them. A per-corner estimate of exactly 0.0
+    # is the estimator saying "no arc here", and a rounded rectangle does not
+    # have corners with no arc. The spread test alone let [0, 0, 56, 56]
+    # through -- a quad rounded at two corners and square at the other two,
+    # a shape no screen has -- because its spread lands at exactly 2.00 and the
+    # comparison is <=. That quad shipped as a CONFIDENT answer 124% off
+    # (iPhone-8, 12 Sep 2026): the only confidently wrong result the labelled
+    # bench has ever produced. Categorical rather than a threshold: on the 14
+    # labelled photographs every on-screen quad this accepts has all four
+    # corners measured (smallest 1.6px); the wrong one had two at 0.0.
+    if min(per) <= 0.0:
+        return False
     r = float(cr["photo_px"])
     spread = (max(per) - min(per)) / max(r, 1e-6)
     return spread <= MAX_RADIUS_SPREAD

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.41):** 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** (recent Desktop/Downloads images, 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.43):** 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** (recent Desktop/Downloads images, 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

@@ -812,7 +812,7 @@
          display:flex;align-items:flex-start;gap:8px;padding:10px 12px;
          border-radius:var(--r-md);background:var(--float);
          border:1px solid var(--edge);box-shadow:var(--shadow), var(--hi);
-         font-size:12px;line-height:1.45;color:var(--ink);
+         font-size:13px;line-height:1.45;color:var(--ink);
          pointer-events:auto;touch-action:none;transform-origin:50% 0;
          will-change:transform,opacity;
          overflow:hidden;
@@ -826,21 +826,35 @@
   @media (prefers-reduced-motion:reduce){ .toast{transition:opacity 120ms} }
 
   /* Same three-channel encoding as .status — glyph, weight, luminance — so a
-     toast and a status pill never disagree, and meaning survives without hue. */
-  .toast .g{flex:none;font-weight:600;line-height:1.45}
-  .toast.ok  .g{color:var(--ok)}    .toast.ok  .g::before{content:"\2713"}
-  .toast.warn .g{color:var(--warn)} .toast.warn .g::before{content:"!"}
-  .toast.err .g{color:var(--err)}   .toast.err .g::before{content:"\00d7"}
-  .toast.info .g{color:var(--mute)} .toast.info .g::before{content:"\2022"}
+     toast and a status pill never disagree, and meaning survives without hue.
+     The glyphs are SHAPES now, not characters: the error glyph used to be the
+     × character, which is the same character as the Dismiss button beside it
+     (reported 11 Sep 2026). Each kind has a silhouette nothing else on the
+     page uses — circle-tick, triangle-bang, octagon-bang, circle-i — and the
+     one × left in a toast is the control that closes it. */
+  .toast .g{flex:none;width:16px;height:16px;margin-top:1px;line-height:0}
+  .toast .g svg{width:16px;height:16px;display:block}
+  .toast.ok  .g{color:var(--ok)}
+  .toast.warn .g{color:var(--warn)}
+  .toast.err .g{color:var(--err)}
+  .toast.info .g{color:var(--mute)}
+  /* A path is part of the message, in the message's face — it was <code> at
+     the browser's monospace default, a second typeface for no reason. It gets
+     its own line, so the sentence ends and the path begins where the eye
+     expects, and it wraps on its own separators rather than mid-word. */
+  .toast code{font:inherit}
+  .toast .path{display:block;margin-top:6px;font:inherit;color:var(--ink);
+               overflow-wrap:anywhere}
+  .toast.err .path{color:var(--warn)}
   /* Error toast: the CONTAINER stays quiet — stroke close to its fill, the same
      relationship a standard button has — and the message carries the colour,
      rather than a tinted stroke and glyph shouting around neutral text. */
   .toast.err{border-color:var(--edge)}
   .toast.err .g, .toast.err .msg{color:var(--warn)}
   .toast .msg{min-width:0;word-break:break-word}
-  .toast .x{flex:none;margin:-4px -4px 0 4px;width:22px;height:22px;padding:0;
+  .toast .x{flex:none;margin:-3px -4px 0 4px;width:22px;height:22px;padding:0;
             background:none;border:none;box-shadow:none;color:var(--mute);
-            font-size:14px;line-height:22px;border-radius:var(--r-sm);opacity:0;
+            font-size:15px;line-height:22px;border-radius:var(--r-sm);opacity:0;
             transition:opacity var(--t), background-color var(--t), color var(--t)}
   /* Close is stack-level furniture: it shows when the stack is open, so a
      resting stack stays clean. Always available to keyboard users. */
@@ -1244,6 +1258,25 @@ function layoutToasts(expanded) {
   });
 }
 
+/* One silhouette per kind, none of them an ×. 16px, currentColor, drawn on a
+   16-unit grid so the stroke stays 1.5px at 1×. */
+const TOAST_GLYPH = {
+  ok:   '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.5"/><path d="M5 8.2l2 2 4-4.4"/></svg>',
+  warn: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2.2 14.3 13.2H1.7z"/><path d="M8 6.4v3.2"/><circle cx="8" cy="11.4" r=".55" fill="currentColor" stroke="none"/></svg>',
+  err:  '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5.4 1.8h5.2l3.6 3.6v5.2l-3.6 3.6H5.4L1.8 10.6V5.4z"/><path d="M8 4.9v3.8"/><circle cx="8" cy="11.1" r=".55" fill="currentColor" stroke="none"/></svg>',
+  info: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.5"/><path d="M8 7.2v4"/><circle cx="8" cy="4.9" r=".55" fill="currentColor" stroke="none"/></svg>',
+};
+
+/* A file path for a toast: its own line, full and unshortened, in the message's
+   own face. Escaped, because a path is user data. */
+function toastPath(p){
+  const esc = String(p || '').replace(/&/g, '&amp;').replace(/</g, '&lt;');
+  // Break opportunities after every separator, so a long path wraps at a
+  // slash rather than in the middle of a filename. overflow-wrap:anywhere in
+  // the CSS is the fallback for a single segment wider than the toast.
+  return `<span class="path">${esc.replace(/\//g, '/<wbr>')}</span>`;
+}
+
 function toast(kind, html, opts = {}) {
   const wrap = $('#toasts');
   if (!wrap) return null;
@@ -1251,7 +1284,7 @@ function toast(kind, html, opts = {}) {
   const el = document.createElement('div');
   el.className = `toast ${kind}`;
   if (kind === 'err') el.setAttribute('role', 'alert');
-  el.innerHTML = `<span class="g" aria-hidden="true"></span><div class="msg"></div>`;
+  el.innerHTML = `<span class="g" aria-hidden="true">${TOAST_GLYPH[kind] || TOAST_GLYPH.info}</span><div class="msg"></div>`;
   el.querySelector('.msg').innerHTML = html;
 
   const life = opts.ms !== undefined ? opts.ms : TOASTS[kind];
@@ -2724,13 +2757,17 @@ async function renderPreview(){
     }
   }catch(e){ say(e.message); }
 }
-function prettyDir(p){
-  // ~ for home, and show the last two segments of a long path: the interesting
-  // part of a long output path is the end, not the volume.
+function homePath(p){
+  // ~ for home, nothing else touched. Now that a path has its own line and
+  // wraps, it can afford to be complete — an elided "…/mockups/file.png" told
+  // you the file and not where it was, which is the half people go looking for.
   const home = st.home || '';
-  let d = (home && p.startsWith(home)) ? '~' + p.slice(home.length) : p;
-  const seg = d.split('/');
-  return seg.length > 4 ? '…/' + seg.slice(-2).join('/') : d;
+  return (home && p.startsWith(home)) ? '~' + p.slice(home.length) : p;
+}
+function prettyDir(p){
+  // The short form, for places that cannot wrap: the last two segments.
+  const seg = homePath(p).split('/');
+  return seg.length > 4 ? '…/' + seg.slice(-2).join('/') : homePath(p);
 }
 
 let preset = 'web';
@@ -2868,7 +2905,7 @@ async function renderVideo(){
       setRenderProgress(null);
       b.textContent = saveLabel(); b.disabled = false; b.classList.remove('primary');
       $('#vframeLbl').textContent = `${$('#vframe').value} / ${$('#vframe').max}`;
-      toast('ok', `Rendered <code>${(d.output||'').split('/').pop()}</code> · ${d.done} frames to <code>${prettyDir(st.outDir||'')}</code>`);
+      toast('ok', `Rendered ${d.done} frames` + toastPath(homePath(d.output || '')));
       const imp = $('#imp'); imp.disabled = false; imp.textContent = 'Send to Claude'; imp.classList.add('primary');
     } else if (d.state === 'error'){
       clearInterval(tick);
@@ -2892,8 +2929,8 @@ $('#save').onclick = async () => {
     // Naming the fit file here is the whole reason it is discoverable: it is
     // written silently beside the mockup, and a file nobody knows about is a
     // file nobody drags back in.
-    toast('ok', `Saved <code>${r.output.split('/').pop()}</code> to <code>${prettyDir(st.outDir || '')}</code>`
-      + (r.fit_file ? ` · the fit is beside it as <code>${r.fit_file.split('/').pop()}</code> — drop that back on this page to reuse these corners` : ''),
+    toast('ok', 'Saved' + toastPath(homePath(r.output))
+      + (r.fit_file ? `<span class="path" style="margin-top:8px;color:var(--mute)">The fit is beside it as ${r.fit_file.split('/').pop()} — drop that back on this page to reuse these corners.</span>` : ''),
       { ms: 9000, dismissible: true });
     const imp = $('#imp');
     imp.disabled = false; imp.textContent = 'Send to Claude';
@@ -2952,7 +2989,7 @@ $('#imp').onclick = async () => {
   }
   // Say up front where Save will put things. With --out-dir this is usually the
   // project folder, and a designer should not have to press Save to find out.
-  toast('info', `Fit the four edges, then Preview. Saves go to <code>${prettyDir(s.out_dir||'')}</code>.`,
+  toast('info', 'Fit the four edges, then Preview. Saves go to' + toastPath(homePath(s.out_dir || '')),
         { ms: 9000, dismissible: true });
   const types = $('#types');
   for (const t of ['phone','tablet','laptop','desktop']){