screengraft 0.48.0 → 0.50.0

package/README.md

@@ -232,6 +232,9 @@ See [CONTRIBUTING.md](CONTRIBUTING.md). The short version: there are tests, they
 run in CI, and a change to the compositing engine needs a measurement, not an
 opinion.
 
+
+**Testing a change without reinstalling.** The desktop app snapshots an installed plugin per session and only refreshes it after *Check for updates*, so release → check → new session is a slow loop. Instead, run `scripts/dev-root.sh` once in your checkout: it writes `~/.screengraft/dev-root`, and from then on every session's `launch.sh` — including the installed copy's — runs the UI from your tree. The badge reads `dev <sha>+` while it does. `scripts/dev-root.sh off` restores the installed copy. Only `SKILL.md` and `mcp/server.py` changes still need a real update, because the app loads those itself.
+
 ## Licence
 
 MIT. The bundled Mona Sans subset is SIL OFL — see `ui/fonts/OFL.txt`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.48.0",
+  "version": "0.50.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/dev-root.sh

@@ -0,0 +1,23 @@
+#!/usr/bin/env zsh
+# Point the installed plugin at a checkout, or stop doing so.
+#
+#   scripts/dev-root.sh            -> use THIS checkout (the one the script is in)
+#   scripts/dev-root.sh /some/tree -> use that one
+#   scripts/dev-root.sh off        -> back to the installed copy
+#   scripts/dev-root.sh status     -> say which
+#
+# Writes ~/.screengraft/dev-root, which launch.sh reads. See launch.sh for why.
+set -euo pipefail
+FILE="$HOME/.screengraft/dev-root"
+case "${1:-}" in
+  off)    rm -f "$FILE"; echo "dev root off — launch.sh uses the installed copy" ;;
+  status) if [ -s "$FILE" ]; then echo "dev root: $(head -n1 "$FILE")"; else echo "dev root off"; fi ;;
+  *)
+    TREE="${1:-$(cd "$(dirname "$0")/.." && pwd)}"
+    TREE="$(cd "$TREE" && pwd)"
+    [ -f "$TREE/scripts/ui.py" ] || { echo "error: $TREE has no scripts/ui.py" >&2; exit 2; }
+    mkdir -p "$(dirname "$FILE")"
+    printf '%s\n' "$TREE" > "$FILE"
+    echo "dev root: $TREE — every session's launch.sh now runs this tree; the badge will read 'dev <sha>'"
+    ;;
+esac

package/scripts/launch.sh

@@ -18,6 +18,26 @@
 # the same reason a Terminal window did, and there is no window to clean up.
 set -euo pipefail
 ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+# Dev root: run the UI from a checkout instead of the installed copy.
+# `~/.screengraft/dev-root` holds one line, the path to a screengraft tree.
+# The desktop app snapshots every installed plugin per session and only
+# refreshes that snapshot after "Check for updates", so testing a change used
+# to mean release -> check -> new session. With the file in place any session,
+# including one already open, runs whatever is in the tree right now; the
+# badge reads "dev <sha>+" so it can never pass for a release. Opt-in by the
+# file's existence; a path that is not a tree is ignored with a warning, so
+# a stale file cannot silently break a launch. `scripts/dev-root.sh` writes it.
+DEV_ROOT_FILE="$HOME/.screengraft/dev-root"
+if [ -s "$DEV_ROOT_FILE" ]; then
+  DEV_ROOT="$(head -n1 "$DEV_ROOT_FILE")"
+  DEV_ROOT="${DEV_ROOT/#\~/$HOME}"
+  if [ -f "$DEV_ROOT/scripts/ui.py" ]; then
+    ROOT="$DEV_ROOT"
+    echo "dev root: running from $ROOT (remove $DEV_ROOT_FILE to use the installed copy)" >&2
+  else
+    echo "warning: $DEV_ROOT_FILE points at $DEV_ROOT, which has no scripts/ui.py — using the installed copy" >&2
+  fi
+fi
 PORT=0
 OUT_DIR=""
 

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.48):** 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.50):** 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".
 
@@ -54,6 +54,8 @@ scripts/launch.sh --out-dir "<the user's current project folder>/mockups"
 
 **Do not launch `ui.py` directly with `nohup ... &` from your own shell.** That was tried on 3 Sep 2026 and the server died silently between turns, twice, losing whatever the user had already entered — the shell session that launches it can be torn down out from under a merely-backgrounded child. `launch.sh` starts it with `--daemon`, which double-forks and calls `setsid`, putting the server in its own session with no controlling terminal; it survives the launching shell and opens no window. It self-checks (waits for startup output, then confirms the server responds) before returning.
 
+**If `launch.sh` prints `dev root: running from <path>`**, the UI is running from a source checkout, not from this installed copy — the developer has opted in with `~/.screengraft/dev-root` (see `scripts/dev-root.sh`). Say so in one line, and treat the badge's `dev <sha>+` as expected. Anything the user reports is then about that tree, not about the release.
+
 A Terminal.app window was the previous fix for the same problem. It worked but left a dead "[Process completed]" window behind after every session, and closing those from AppleScript proved unreliable — Terminal reports stale ttys for dead windows and leaves zero-tab husks that `close` reports success on. The daemon removes the window entirely, so there is nothing to clean up.
 
 It prints one JSON line — `url`, `session`, `job`, `result`, `out_dir` — and opens the browser tab itself. If it exits non-zero, read the error and the log path it names before telling the user anything is ready.
@@ -140,6 +142,7 @@ The server is a detached daemon with no window. **Stop it with `scripts/stop.sh`
 | `scripts/preflight.py` | Dependency report; `--install` builds the venv |
 | `scripts/launch.sh` | Starts `ui.py` as a detached daemon (no window) and verifies it's alive — use this, not `ui.py` directly |
 | `scripts/stop.sh` | Stops the UI with SIGTERM so the session pointer is cleared — use this instead of `pkill` |
+| `scripts/dev-root.sh` | Developer opt-in: point every session's `launch.sh` at a checkout (`on` by default, `off`, `status`). Testing a change then needs no release and no plugin update. |
 | `scripts/ui.py` | Local server + browser UI; calls the two below |
 | `scripts/detect.py` | Advisory screen-quad + corner-radius detection (no ML) |
 | `scripts/warp.py` | The engine: `compose()` and a CLI for scripted use |

package/ui/index.html

@@ -384,6 +384,11 @@
   .seg button.sel{background:var(--raise);color:var(--ink);font-weight:600}
   .seg button.sel:hover{background:var(--raise-mid)}
   .seg button.sel:active{background:var(--raise-low);transform:none}
+  /* A toggle in the strip head. On = the raised surface every selected thing
+     on this page has (the segmented thumb, the device chip), off = a label. */
+  .striphead button[aria-pressed]{background:transparent;border-color:transparent;box-shadow:none;color:var(--mute)}
+  .striphead button[aria-pressed]:hover{color:var(--ink)}
+  .striphead button[aria-pressed="true"]{background:var(--raise);border-color:var(--edge);color:var(--ink);font-weight:600}
   /* Input chip (Figma 5:14 / 5:20). Surface and shadow are declared here rather
    than inherited from the base button rule, so the filled state is explicit and
    the .is-empty override below has something definite to override.
@@ -1136,6 +1141,7 @@
       <span class="lbl">Edge view</span>
       <span class="stepper dock-step"><button class="sm" id="stripOut">&minus;</button><button class="sm" id="stripIn">+</button></span>
       <span class="sm" id="stripZ" style="color:var(--mute);font-variant-numeric:tabular-nums"></span>
+      <button class="sm" id="stripHC" aria-pressed="false" title="Stretch the strip's own tonal range to full contrast. For a dark screen on a dark frame, where the boundary is a few levels apart. The strip only — the composite is untouched.">Contrast</button>
       <span class="spacer"></span>
       <span class="sm" id="stripSt" style="color:var(--mute)"></span>
     </div>
@@ -2463,7 +2469,38 @@ $('#emisAmt').onchange = e => { setEmis(true, parseFloat(e.target.value)); autoP
 
 $('#edgeBtn').onclick = () => setLoupeMode(loupeMode === 'float' ? 'dock' : 'float');
 
-function paintStrip(c, W, H, i){
+/* Contrast for the strip only. A dark screen on a dark frame puts the
+   boundary a few levels apart — 8 against 20 — which is invisible at any
+   zoom, and no amount of magnification adds contrast. This takes the strip's
+   own 1st–99th percentile of luminance and stretches it to 0–255, the same
+   gain on every channel so hue is kept. It is a viewing aid: the composite,
+   the fit and the saved file never see it. Per strip, per frame — 1280×130
+   is 166k pixels and this runs on every hover. */
+let stripHC = recall('stripHC','0') === '1';
+function stretchContrast(c, W, H){
+  const im = c.getImageData(0, 0, W, H), d = im.data, n = W*H;
+  const hist = new Uint32Array(256);
+  for (let k = 0; k < n; k++){
+    const o = k*4;
+    hist[(d[o]*77 + d[o+1]*151 + d[o+2]*28) >> 8]++;
+  }
+  let lo = 0, hi = 255, acc = 0;
+  for (let v = 0; v < 256; v++){ acc += hist[v]; if (acc > n*0.01){ lo = v; break; } }
+  acc = 0;
+  for (let v = 255; v >= 0; v--){ acc += hist[v]; if (acc > n*0.01){ hi = v; break; } }
+  if (hi - lo < 2) return;
+  const g = 255 / (hi - lo);
+  const lut = new Uint8ClampedArray(256);
+  for (let v = 0; v < 256; v++) lut[v] = Math.max(0, Math.min(255, (v - lo) * g));
+  for (let o = 0; o < n*4; o += 4){ d[o] = lut[d[o]]; d[o+1] = lut[d[o+1]]; d[o+2] = lut[d[o+2]]; }
+  c.putImageData(im, 0, 0);
+}
+function setStripHC(on){
+  stripHC = on; remember('stripHC', on ? '1' : '0');
+  $('#stripHC').setAttribute('aria-pressed', on ? 'true' : 'false');
+}
+$('#stripHC').onclick = () => { setStripHC(!stripHC); drawStrip(); };
+function paintStrip(c, W, H, i, mode){
   c.setTransform(1,0,0,1,0,0);
   c.fillStyle = '#0c0c0b'; c.fillRect(0,0,W,H);
   const A = st.corners[i], B = st.corners[(i+1)%4];
@@ -2478,7 +2515,25 @@ function paintStrip(c, W, H, i){
   c.imageSmoothingEnabled = true;
   c.drawImage(img, 0, 0);
   c.restore();
+  if (stripHC) stretchContrast(c, W, H);
   cased(c, () => { c.beginPath(); c.moveTo(0, H/2); c.lineTo(W, H/2); }, 1.25, CORE_ACTIVE);
+  // Which end is about to swing. The canvas shows this with the pivot pips,
+  // but the eye is on the strip while an edge is being placed, and "rotA" /
+  // "rotB" are meaningless there without a mark. A grab near one end pivots
+  // on the OTHER: the pivot end gets the same filled pip the canvas uses, the
+  // swinging end a double arrow across the rule. Translate marks nothing —
+  // both ends move. Left in the strip is A, the edge's first corner.
+  if (mode === 'rotA' || mode === 'rotB'){
+    // At 0.16 / 0.84 of the edge: where the canvas draws its pips, and clear
+    // of the screen/outside labels at the left edge.
+    const pivotX = mode === 'rotA' ? W*0.16 : W*0.84, swingX = mode === 'rotA' ? W*0.84 : W*0.16;
+    casedDisc(c, pivotX, H/2, 3.5, CORE_ACTIVE);
+    cased(c, () => { c.beginPath();
+      c.moveTo(swingX, H/2 - 22); c.lineTo(swingX, H/2 + 22);
+      c.moveTo(swingX - 5, H/2 - 16); c.lineTo(swingX, H/2 - 22); c.lineTo(swingX + 5, H/2 - 16);
+      c.moveTo(swingX - 5, H/2 + 16); c.lineTo(swingX, H/2 + 22); c.lineTo(swingX + 5, H/2 + 16); },
+      1.5, CORE_ACTIVE);
+  }
   cased(c, () => { c.beginPath();
     for (const f of [0.25,0.5,0.75]){ c.moveTo(W*f, H/2-9); c.lineTo(W*f, H/2+9); } },
     1, 'rgba(255,255,255,.7)');
@@ -2488,6 +2543,11 @@ function paintStrip(c, W, H, i){
   casedText(c, 'screen', 9, inwardIsDown ? H/2 + 15 : H/2 - 15, 'rgba(255,255,255,.95)');
   casedText(c, 'outside', 9, inwardIsDown ? H/2 - 15 : H/2 + 15, 'rgba(255,255,255,.62)');
 }
+function swingText(mode){
+  if (mode === 'rotA') return 'the right end swings, pivot on the left';
+  if (mode === 'rotB') return 'the left end swings, pivot on the right';
+  return 'flat on the rule means aligned';
+}
 function drawStrip(){
   const a = drag || hover || pick;
   const has = !!(st.corners && a && a.kind === 'edge' && img.naturalWidth);
@@ -2500,13 +2560,13 @@ function drawStrip(){
       $('#stripSt').textContent = 'Hover or drag an edge — this straightens it, so misalignment shows as a wedge.';
       return;
     }
-    paintStrip(sctx, W, H, a.i);
-    $('#stripSt').textContent = `${EDGE_LBL[a.i]} edge · ±${stripHalf}px · ${(H/(2*stripHalf)).toFixed(1)}× across the boundary — flat on the rule means aligned`;
+    paintStrip(sctx, W, H, a.i, a.mode);
+    $('#stripSt').textContent = `${EDGE_LBL[a.i]} edge · ±${stripHalf}px · ${(H/(2*stripHalf)).toFixed(1)}× across the boundary — ${swingText(a.mode)}`;
   } else {
     const fl = $('#floatLoupe');
     if (!has){ fl.classList.remove('on'); return; }
-    paintStrip(fctx, stripF.width, stripF.height, a.i);
-    $('#stripFCap').textContent = `${EDGE_LBL[a.i]} edge · ±${stripHalf}px — flat on the rule means aligned`;
+    paintStrip(fctx, stripF.width, stripF.height, a.i, a.mode);
+    $('#stripFCap').textContent = `${EDGE_LBL[a.i]} edge · ±${stripHalf}px — ${swingText(a.mode)}`;
     fl.classList.add('on');
     const w = fl.offsetWidth || 356, h = fl.offsetHeight || 130;
     let x = lastPointer[0] + 26, y = lastPointer[1] - h - 18;
@@ -3110,6 +3170,7 @@ $('#imp').onclick = async () => {
     b.onclick=()=>{setType(t); applyPreset(); autoPreview();}; types.appendChild(b);
   }
   setLoupeMode(loupeMode);
+  setStripHC(stripHC);
   setGrade(gradeOn, gradeAmt);
   setEmis(emisOn, emisAmt);
   setRadiusOn(radiusOn);