screengraft 0.46.0 → 0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.46.0",
+  "version": "0.48.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/ui.py

@@ -900,7 +900,10 @@ class Handler(BaseHTTPRequestHandler):
                 with open(dest, "wb") as f:
                     f.write(self._body())
                 # A video is only ever a screen source; a photo must be a still.
-                return self._json(_adopt(role, dest))
+                # The chip shows the file's OWN name: the session copy is
+                # "<role>-<epoch>-<name>", and a chip reading "photo-1789…" told
+                # the person nothing about which photo was loaded (12 Sep 2026).
+                return self._json({**_adopt(role, dest), "name": name})
 
             b = self._jbody()
 

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

@@ -366,7 +366,16 @@
      until it is selected: no border, no shadow, no lift on press. */
   .seg button{height:22px;padding:0 11px;font-size:12px;border-radius:var(--r-sm);
               background:transparent;border:0;box-shadow:none;color:var(--mute);
-              font-weight:400}
+              font-weight:400;display:inline-flex;flex-direction:column;
+              align-items:center;justify-content:center}
+  /* Each segment is as wide as its label at the SELECTED weight, whichever
+     weight it is showing. Without this the control reflowed on every switch:
+     600 is wider than 400, so selecting "ProRes" grew that segment, and the
+     whole control — left edge included — moved (reported 12 Sep 2026).
+     A zero-height ghost of the label at 600 sits under the visible one and
+     sets the width; `data-label` carries the text. Not padding. */
+  .seg button::after{content:attr(data-label);font-weight:600;height:0;
+                     overflow:hidden;visibility:hidden;pointer-events:none}
   .seg button:hover{background:transparent;color:var(--ink)}
   .seg button:active{background:transparent;transform:none}
   /* The thumb. Its three surfaces are the Default button's own, which is the
@@ -381,7 +390,7 @@
    NOTE the modifier is `is-empty`, not `empty`: `.empty` is already the
    centred placeholder-paragraph class (padding:24px), and the chip was
    silently inheriting it and rendering 50px tall instead of 32. */
-  .inputchip{display:inline-flex;align-items:center;gap:var(--s2);max-width:300px;
+  .inputchip{display:inline-flex;align-items:center;gap:var(--s2);max-width:220px;
              height:32px;padding:0 12px 0 6px;border-radius:999px;
              background:var(--raise);border:1px solid var(--edge);box-shadow:var(--hi)}
   .inputchip .sw{width:22px;height:22px;border-radius:999px;flex:none;
@@ -393,17 +402,30 @@
   .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)}
+  /* The clear control is a SIBLING of the chip in the markup, not a child:
+     the chip is one <button>, and a button inside a button is invalid HTML
+     that browsers repair unpredictably. It is drawn INSIDE the pill though --
+     .chipwrap positions it over the chip's right end and the filled chip
+     reserves room for it -- because beside the chip it read as a stray
+     character and nobody found it ("place clear buttons inside of chip and
+     make it visible", 12 Sep 2026). Its own keyboard stop with its own name
+     ("Remove photo"), distinct from the fit bar's Reset -- that resets the
+     QUAD; this un-chooses a SOURCE. Only present while the chip is filled. */
+  .chipwrap{position:relative;display:inline-flex;min-width:0}
+  .chipwrap .inputchip:not(.is-empty){padding-right:30px}
+  .chipclear{position:absolute;right:5px;top:50%;transform:translateY(-50%);
+             width:22px;height:22px;padding:0;border-radius:999px;flex:none;
+             display:inline-flex;align-items:center;justify-content:center;
+             color:var(--ink);background:var(--raise-hi);border:1px solid var(--edge)}
+  /* The cross is drawn, not typed. As the &times; character at 15px it sat
+     above centre in its disc -- a glyph carries its own ascent and side
+     bearings and no line-height setting centres it in a 22px circle ("X icon
+     is not fully centered", 12 Sep 2026). A 10px SVG in a flex
+     centre is centred by construction, and it is the same route the toast
+     glyphs took in v0.42.0. */
+  .chipclear svg{display:block;width:10px;height:10px}
+  .chipclear:hover{background:var(--raise-highest);border-color:var(--edge-hi)}
+  .chipclear:active{background:var(--raise-mid);transform:translateY(-50%)}
 
   /* Status carries meaning in THREE channels: glyph, weight, luminance —
      never hue alone. */
@@ -922,11 +944,9 @@
     <div class="tb-left">
       <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="chipwrap"><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><svg aria-hidden="true" viewBox="0 0 10 10"><path d="M1.5 1.5l7 7M8.5 1.5l-7 7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
         <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>
+        <span class="chipwrap"><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><svg aria-hidden="true" viewBox="0 0 10 10"><path d="M1.5 1.5l7 7M8.5 1.5l-7 7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
       </div>
     </div>
     <span class="spacer"></span>
@@ -941,7 +961,7 @@
          the one-accent-on-screen rule is untouched. -->
     <div class="tb-actions">
       <span class="seg" id="fmt" role="radiogroup" aria-label="Output format" hidden>
-        <button class="sel" data-preset="web" role="radio" aria-checked="true" title="H.264 at CRF 16 — near-visually-lossless, plays anywhere.">Web</button><button 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>
+        <button class="sel" data-preset="web" data-label="Web" role="radio" aria-checked="true" title="H.264 at CRF 16 — near-visually-lossless, plays anywhere.">Web</button><button data-preset="prores" data-label="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>
       <button id="save" class="accent" disabled>Preview first</button>
       <button id="imp" class="accent" disabled title="Send the saved file to Claude so it appears in the chat">Send to Claude</button>
@@ -984,7 +1004,7 @@
           <span class="stepper"><button class="sm" data-jump="0">TL</button><button class="sm" data-jump="1">TR</button><button class="sm" data-jump="2">BR</button><button class="sm" data-jump="3">BL</button></span>
           <button class="sm" id="redetect">Re-detect</button>
           <button class="sm" id="pointat" title="Click once inside the screen and the detector will use that point. The detectors usually do find the screen — they just cannot tell which region IS one, and that is the part you can answer instantly.">Point at screen</button>
-          <button class="sm" id="rotatequad" title="Turn the screenshot a quarter turn inside the same four edges. The edges stay where they are; only which one is the top changes. Use this when the phone lies on its side and the screenshot lands sideways.">Rotate 90°</button>
+          <button class="sm" id="rotatequad" title="Turn the screenshot inside the same four edges. The edges stay where they are; only which one is the top changes. A portrait screenshot fits a phone only two ways, so on a phone this is a half turn; a quarter turn where the screen is near-square or the screenshot fits the other way.">Rotate</button>
           <button class="sm" id="resetquad" title="Put the four edges back to a rectangle in the middle of the photo. Use this if a corner has ended up off the picture where you cannot grab it.">Reset</button>
         </span>
       </div>
@@ -1512,12 +1532,12 @@ async function clearSource(role){
   const chip = $('#chip'+n);
   chip.classList.add('is-empty');
   chip.querySelector('.nm').textContent = role==='photo' ? 'Choose a photo…' : 'Choose a screenshot…';
+  chip.title = '';
   $('#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');
+  dropResult();
   if (role==='photo'){
     st.photo = null; st.corners = null; st.remembered = null; st.quadFrom = null;
     st.measured = null;
@@ -1539,13 +1559,27 @@ async function clearSource(role){
       ? '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); });
+/* A source has changed, so whatever the Result pane shows was made from
+   something that is no longer chosen. One place for the three things that
+   must happen together: stop the live clip (its <video> still holds the OLD
+   file and would keep playing it), empty the pane, and un-light Save. Before
+   this, swapping a clip for a screenshot — or one photo for another with a
+   fit already in hand — left the previous composite on screen, and the live
+   layer kept the previous clip running, because setChosen() only redrew the
+   canvas and renderPreview() will not take the pane away from a playing clip
+   (reported 12 Sep 2026: "the preview is not being updated"). */
+function dropResult(){
+  stopLive();
+  showResult('empty');
+  $('#outSt').textContent = '';
+  markStale();
+}
 
 async function choose(role, path, el){
   try{ const r = await api('/api/use', {role, path}); setChosen(role, r.path, r.size, el, r); }
@@ -1560,7 +1594,18 @@ function setChosen(role, path, size, el, meta){
   $('#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]}`
+  // The file's own name and nothing else. The size and, for a clip, the frame
+  // count used to follow it in the same 12px, which pushed the one thing that
+  // identifies the file into an ellipsis; they live on hover now, with the
+  // full path. An upload's session copy is "<role>-<epoch>-<name>", so the
+  // server sends the original name back as `name`.
+  const shown = (meta && meta.name) || path.split('/').pop();
+  chip.querySelector('.nm').textContent = shown;
+  // A different file in either role: the composite on screen is of the old
+  // one. Dropped here, before the state changes, so nothing downstream can
+  // narrate over it; maybeStart() re-renders once the fit is ready.
+  if ((role==='photo' ? st.photo : st.shot) !== path) dropResult();
+  chip.title = `${homePath(path)}\n${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;
@@ -1748,7 +1793,7 @@ async function maybeStart(){
     }
     $('#cvbar').hidden = false;
     if (st.corners){
-      draw(); drawStrip();
+      draw(); drawStrip(); autoPreview();
       // A reload arrives here with the session's corners already in hand, and
       // the only thing on the status line is the "now choose the screenshot"
       // text from the photo-only step above — a message about a step already
@@ -2049,10 +2094,22 @@ function turnQuad(){
   if (pick && pick.kind === 'corner') pick = {kind: 'corner', i: (pick.i + 3) % 4};
   else if (pick && pick.kind === 'edge') pick = {kind: 'edge', i: (pick.i + 3) % 4};
 }
+// A quarter turn is only offered where the screenshot still FITS. A portrait
+// screenshot on a phone fits two ways, top on either short edge; turned onto a
+// long edge it is mapped anyway — 804px across a 890px edge and 1748px down a
+// 441px one — and the 4:1 squash also flattens the corner rounding into an
+// ellipse, which is what "the corners rotate too and no longer fit the frame"
+// looked like (reported 12 Sep 2026). So Rotate steps to the NEXT
+// orientation the screenshot fits: a half turn on a phone, a quarter turn on a
+// near-square screen or when the screenshot's aspect suits the other edges.
 function rotateQuad(){
   if (!st.corners) return;
   turnQuad();
+  let turns = 1;
+  if (!orientationFits()){ turnQuad(); turns = 2; }
   draw(); drawStrip(); autoPreview();
+  toast('info', turns === 1 ? 'Turned the screenshot a quarter turn.'
+                            : 'Turned the screenshot a half turn — a portrait screenshot fits this screen only two ways.');
 }
 $('#rotatequad').onclick = rotateQuad;
 // The automatic half. Detection orders corners geometrically and cannot know
@@ -2066,16 +2123,24 @@ $('#rotatequad').onclick = rotateQuad;
 // this page has it. Near-square quads (under 1.25) are left alone — perspective
 // can make either kind of edge the longer one. Returns whether it turned.
 const ORIENT_ASPECT = 1.25;
-function orientQuad(){
-  if (!st.corners || !st.shotSize) return false;
+// Does the screenshot fit the quad the way it is ordered now? True when the
+// quad is near-square (either kind of edge can be the top), when there is no
+// screenshot yet, or when the top edge is the kind the screenshot's aspect
+// wants — short for portrait, long for landscape. Shared by the automatic
+// orientation below and by the Rotate button.
+function orientationFits(){
+  if (!st.corners || !st.shotSize) return true;
   const C = st.corners;
   const len = i => Math.hypot(C[(i+1)%4][0]-C[i][0], C[(i+1)%4][1]-C[i][1]);
   const a = (len(0) + len(2)) / 2, b = (len(1) + len(3)) / 2;   // edges 0/2 vs 1/3
-  if (Math.max(a, b) < ORIENT_ASPECT * Math.max(Math.min(a, b), 1e-6)) return false;
+  if (Math.max(a, b) < ORIENT_ASPECT * Math.max(Math.min(a, b), 1e-6)) return true;
   const shotPortrait = st.shotSize[1] > st.shotSize[0];
-  const topShouldBeShort = shotPortrait;
-  const topIsShort = a < b;
-  if (topIsShort === topShouldBeShort) return false;
+  return (a < b) === shotPortrait;
+}
+function orientQuad(){
+  if (!st.corners || !st.shotSize) return false;
+  if (orientationFits()) return false;
+  const C = st.corners;
   // Two candidate top edges (1 and 3, the other pair); the higher one in the
   // image is the top. Turn once to make edge 1 the top, twice more for edge 3.
   const midY = i => (C[i][1] + C[(i+1)%4][1]) / 2;
@@ -2818,12 +2883,6 @@ function homePath(p){
   const home = st.home || '';
   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';
 document.querySelectorAll('[data-preset]').forEach(btn => {
   btn.onclick = () => {