screengraft 0.40.0 → 0.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.40.0",
+  "version": "0.41.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",

package/scripts/ui.py

@@ -702,6 +702,41 @@ def _adopt(role, path):
     return {"path": real, "size": [im.shape[1], im.shape[0]], **meta}
 
 
+class RenderBusy(Exception):
+    """A request that must not run while a render is in flight."""
+
+
+def _clear(role):
+    """Un-choose a source. The mirror of _adopt(), and the only way to start
+    over: picking a different file was the one exit, and a reload restores the
+    session's fit, so "start again" was not reachable from the page at all.
+
+    What goes with it is decided by what the thing IS, not by convenience:
+      photo      -> the corners. The quad is a property of the photograph. A
+                    fit that was SAVED comes back on re-pick (fits.py), so
+                    this is recoverable; an unsaved drag is not, and the page
+                    says which.
+      screenshot -> the fitted frame. The corners stay: they are on the photo.
+      either     -> the session output. A composite made from a source that
+                    is no longer loaded is a stale artefact, and Send to
+                    Claude must not be able to hand it over.
+    """
+    if role not in ROLES:
+        raise ValueError(f"role must be one of {', '.join(ROLES)}")
+    # A render in flight would publish its output and sidecar AFTER this
+    # cleared them, from a source that is no longer loaded -- the exact stale
+    # artefact this exists to prevent. Refused, the way the render route
+    # refuses a second render; the page shows the message.
+    with RENDER_LOCK:
+        if RENDER["state"] == "running":
+            raise RenderBusy("a render is running — wait for it, then remove the source")
+    if role == "photo":
+        SESSION.update(photo=None, corners=None, output=None)
+    else:
+        SESSION.update(screenshot=None, fit_frame=0, output=None)
+    return {"cleared": role}
+
+
 def _guess_type(corners):
     c = np.array(corners, dtype=float)
     w = (np.linalg.norm(c[1] - c[0]) + np.linalg.norm(c[2] - c[3])) / 2
@@ -872,6 +907,12 @@ class Handler(BaseHTTPRequestHandler):
             if u.path == "/api/use":
                 return self._json(_adopt(b["role"], b["path"]))
 
+            if u.path == "/api/clear":
+                try:
+                    return self._json(_clear(b.get("role")))
+                except RenderBusy as exc:
+                    return self._json({"error": str(exc)}, 409)
+
             if u.path == "/api/figma":
                 return self._json(SESSION.enqueue({
                     "type": "figma_export", "url": b["url"],

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.40):** 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.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.
 
 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

@@ -393,6 +393,17 @@
   .inputchip.is-empty{background:var(--card);border-style:dashed;
                    color:var(--mute);box-shadow:none}
   .inputchip.is-empty .sw{box-shadow:inset 0 0 0 1px var(--line)}
+  /* The clear control is a SIBLING of the chip, not a child: the chip is one
+     <button>, and a button inside a button is invalid HTML that browsers
+     repair unpredictably. Beside it, it is its own keyboard stop with its own
+     name ("Remove photo"), which is also what makes it distinct from the fit
+     bar's Reset -- that resets the QUAD; this un-chooses a SOURCE. A small
+     round Sm button, so it reads as belonging to the chip without competing
+     with it. Only present while the chip is filled. */
+  .chipclear{width:24px;height:24px;padding:0;border-radius:999px;flex:none;
+             margin-left:calc(-1 * var(--s1));font-size:15px;line-height:1;
+             color:var(--mute)}
+  .chipclear:hover{color:var(--ink)}
 
   /* Status carries meaning in THREE channels: glyph, weight, luminance —
      never hue alone. */
@@ -898,8 +909,10 @@
       <span class="brand">Screengraft</span><span id="sess" hidden></span>
       <div class="tb-chips">
         <button class="inputchip is-empty" id="chip1"><span class="sw" id="sw1"></span><span class="nm">Choose a photo…</span></button>
+        <button class="chipclear" id="clear1" data-role="photo" aria-label="Remove photo" title="Remove the photo and start over. A fit you saved for it comes back when you pick it again." hidden>&times;</button>
         <span class="tb-arrow">&rarr;</span>
         <button class="inputchip is-empty" id="chip2"><span class="sw" id="sw2"></span><span class="nm">Choose a screenshot…</span></button>
+        <button class="chipclear" id="clear2" data-role="screenshot" aria-label="Remove screenshot" title="Remove the screenshot. The fit on the photo is kept." hidden>&times;</button>
       </div>
     </div>
     <span class="spacer"></span>
@@ -1453,6 +1466,53 @@ async function loadRecent(){
     if (!items.length) g.innerHTML = '<span class="sm" style="color:var(--mute)">No recent images on Desktop/Downloads (last 14 days).</span>';
   }
 }
+/* Un-choose a source. The mirror of setChosen(): every visual the fill put up
+   comes down, and the state the source owned goes with it -- the photo owns
+   the corners, the screenshot owns the video state and the fitted frame,
+   either owns the result. The server does the same to the session
+   (/api/clear), so a reload agrees with what is on screen. */
+async function clearSource(role){
+  try { await api('/api/clear', {role}); }
+  catch(e){ alert(e.message); return; }
+  const n = role==='photo'?1:2;
+  const chip = $('#chip'+n);
+  chip.classList.add('is-empty');
+  chip.querySelector('.nm').textContent = role==='photo' ? 'Choose a photo…' : 'Choose a screenshot…';
+  $('#sw'+n).style.background = '';
+  $('#pv'+n).innerHTML = '<span class="empty">Select a recent image</span>';
+  $('#clear'+n).hidden = true;
+  document.querySelectorAll('#recent'+n+' .th').forEach(x=>x.classList.remove('sel'));
+  stopLive();
+  showResult('empty');
+  if (role==='photo'){
+    st.photo = null; st.corners = null; st.remembered = null; st.quadFrom = null;
+    st.measured = null;
+    // Nothing to draw on: the canvas goes back to its empty state rather
+    // than showing the last photograph with no way to act on it.
+    const c = $('#c'); c.getContext('2d').clearRect(0, 0, c.width, c.height);
+    // ... and the edge view, which would otherwise keep showing a strip of a
+    // photograph that is no longer here.
+    for (const id of ['strip', 'stripF']) {
+      const k = $('#' + id); if (k) k.getContext('2d').clearRect(0, 0, k.width, k.height);
+    }
+    $('#cvbar').hidden = true;
+    $('#detSt').className = 'status';
+    $('#detSt').textContent = 'Photo removed. A fit you saved for it comes back when you pick it again.';
+  } else {
+    st.shot = null; st.video = null; syncVideoUI();
+    $('#detSt').className = 'status';
+    $('#detSt').textContent = st.photo
+      ? 'Screenshot removed — the fit on the photo is kept. Choose another screenshot.'
+      : 'Screenshot removed.';
+  }
+  markStale();
+  // The control that had focus has just hidden itself; without this, focus
+  // drops to <body> and a keyboard user is nowhere. The empty chip is the
+  // natural next action.
+  chip.focus();
+}
+document.querySelectorAll('.chipclear').forEach(b => { b.onclick = () => clearSource(b.dataset.role); });
+
 async function choose(role, path, el){
   try{ const r = await api('/api/use', {role, path}); setChosen(role, r.path, r.size, el, r); }
   catch(e){ alert(e.message); }
@@ -1469,6 +1529,7 @@ function setChosen(role, path, size, el, meta){
   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(thumb)}")`;
+  $('#clear'+n).hidden = false;
   // A fit the server recognised from this photograph's own pixels. Held
   // rather than applied here: the quad only means anything once there is a
   // screenshot to put inside it, which is what maybeStart() waits for.