screengraft 0.46.0 → 0.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.46.0",
+  "version": "0.47.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.47):** 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

@@ -381,7 +381,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 +393,23 @@
   .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;
+             font-size:15px;line-height:1;color:var(--ink);
+             background:var(--raise-hi);border:1px solid var(--edge)}
+  .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 +928,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>&times;</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>&times;</button></span>
       </div>
     </div>
     <span class="spacer"></span>
@@ -1512,6 +1516,7 @@ 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;
@@ -1560,7 +1565,14 @@ 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;
+  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;
@@ -2818,12 +2830,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 = () => {