screengraft 0.24.1 → 0.25.1

package/README.md

@@ -76,7 +76,7 @@ npx screengraft --out-dir ./mockups
 ```
 
 npm is a delivery mechanism here, not a claim about the language: the tool is
-Python and OpenCV, and `bin/screengraft.js` is a launcher. It installs nothing
+Python and OpenCV, and `cli/screengraft.js` is a launcher. It installs nothing
 behind your back — if the engine is missing it prints the one command that
 builds it (`npx screengraft --install`) and exits.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.24.1",
+  "version": "0.25.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",
@@ -33,10 +33,10 @@
   },
   "type": "commonjs",
   "bin": {
-    "screengraft": "bin/screengraft.js"
+    "screengraft": "cli/screengraft.js"
   },
   "files": [
-    "bin/",
+    "cli/",
     "scripts/",
     "ui/",
     "mcp/",
@@ -61,6 +61,6 @@
     "linux"
   ],
   "scripts": {
-    "start": "node bin/screengraft.js"
+    "start": "node cli/screengraft.js"
   }
 }

package/scripts/grade.py

@@ -130,21 +130,46 @@ def match_light(photo: np.ndarray, warped: np.ndarray, mask: np.ndarray,
     return apply_light(warped, light_params(photo, warped, mask, strength))
 
 
+GRAIN_GATE = 20.0        # grey levels: above this a residual is an edge, not grain
+_MEDIAN_HP_GAIN = 0.909  # a 3x3 median high-pass absorbs this much of iid noise
+                         # (measured, 5 seeds x sigma 1-5, spread < 0.3%)
+
+
 def measure_grain(photo: np.ndarray, ring: np.ndarray) -> float:
     """The photo's noise floor, in grey levels, measured where the screen isn't.
 
-    High-pass with a 3x3 median (cheap, edge-preserving) and take the MEDIAN
-    absolute deviation of the residual rather than its standard deviation: a
-    bezel edge or a highlight inside the ring is a huge outlier, and a mean-based
-    estimate would read the edge as noise and dump visible grain on the screen.
-    0.6745 converts MAD to a sigma for a normal distribution.
+    High-pass with a 3x3 median (cheap, edge-preserving), gate the outliers off,
+    then take the MEAN absolute deviation of what is left.
+
+    Why the mean and not the median: `photo` is uint8 and so is the
+    median blur, so the residual is integer-valued, and a median of integers is
+    an integer or a half. The old MAD/0.6745 could therefore only ever return
+    multiples of 1.4826 — and under one grey level it returned a flat 0, so a
+    lightly-noisy photograph got no grain at all. Two of the three surviving
+    reference photos measured exactly 0.0 that way while actually carrying 0.39
+    and 1.46. A mean over the same integers resolves continuously.
+
+    Robustness moves from the statistic to the GATE. A 3x3 median is
+    edge-preserving, so a clean step edge leaves a residual of exactly 0 and was
+    never the danger the old docstring guarded against; what does leak is fine
+    repeating texture and specks, whose residuals are large. Discarding
+    |resid| > GRAIN_GATE drops those and leaves the noise floor untouched:
+    identical for any gate in 8..40, unbiased out to sigma 4, and 5x below the
+    smallest texture residual that breaks it — a 9px-pitch line pattern reads
+    27.0 ungated against a true 1.0.
+
+    0.7979 is E|X|/sigma for a normal; _MEDIAN_HP_GAIN undoes the noise the
+    median filter itself absorbs.
     """
     g = cv2.cvtColor(photo, cv2.COLOR_BGR2GRAY)
     resid = g.astype(np.float32) - cv2.medianBlur(g, 3).astype(np.float32)
     px = resid[ring.astype(bool)]
     if px.size < 500:
         return 0.0
-    return float(np.median(np.abs(px - np.median(px))) / 0.6745)
+    px = px[np.abs(px) <= GRAIN_GATE]
+    if px.size < 500:
+        return 0.0
+    return float(np.mean(np.abs(px - px.mean())) / 0.7979 / _MEDIAN_HP_GAIN)
 
 
 def add_grain(img: np.ndarray, mask: np.ndarray, sigma: float, seed: int = 0) -> np.ndarray:

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.24):** 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 — 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.25):** 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 — 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.
 

package/ui/index.html

@@ -101,12 +101,27 @@
 
   /* The shell IS the viewport. Nothing scrolls except the canvas, so the
      fitting surface can never be pushed off-screen by finished work. */
-  .app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;
+  /* The ROWS were given minmax(0,1fr) and the column was left implicit,
+     which means `auto` — and an auto track is floored at its content's
+     min-content width, so the whole app grew to 896px inside a 742px viewport
+     and the page scrolled sideways. Same discipline, same axis: a track that
+     may not exceed its share needs the 0 minimum stated. This is the root of
+     the overflow; the topbar and #stage reported with it were victims, sized by
+     a container that had already grown. */
+  .app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
+       grid-template-columns:minmax(0,1fr);min-height:0;
        padding-bottom:32px;background:var(--bg)}
 
   .topbar{display:flex;align-items:center;gap:8px;padding:0 12px 0 var(--s4);height:56px;
           background:var(--card);border-bottom:1px solid var(--line);
           box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(0,0,0,.25)}
+  /* A nowrap flex row whose children keep min-width:auto cannot shrink
+     below their content, so at 742px Save and Send to Claude sat at x=750..885
+     — outside the viewport and unclickable. The chips carry a filename and are
+     the part that should give; the actions are fixed-size and must not. */
+  .topbar > *{min-width:0}
+  .tb-chips{overflow:hidden}
+  .tb-actions{flex:none}
   .tb-left{display:flex;align-items:center;gap:var(--s9)}
   .tb-chips{display:flex;align-items:center;gap:var(--s2)}
   .tb-arrow{color:var(--mute)}
@@ -302,7 +317,12 @@
     .stage > .rail{grid-column:2;grid-row:1 / span 2}
   }
   #types{flex-wrap:nowrap}
+  /* The same omission one level down: rows constrained, column implicit.
+     min-width:0 lets the PANE shrink; it does nothing for the auto track
+     inside it, which was still sizing to the header's min-content — 798px
+     wide in a 398px column. */
   .pane{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);
+        grid-template-columns:minmax(0,1fr);
         position:relative;   /* the frame the corner bar is anchored to */
         border-right:1px solid var(--line)}
   .panehead{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);background:var(--card);