screengraft 0.62.4 → 0.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.62.4",
+  "version": "0.63.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/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.62):** 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** (the images you have used before, 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.63):** 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** (the images you have used before, 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

@@ -88,8 +88,10 @@
     /* button-group/default/border — a 20% cool grey, the ONLY translucent
        stroke in the system; it sits over the photograph, so it has to read on
        any tone. The two shadows are the Button Group's and the Status pill's. */
-    --group-edge:rgba(194,195,203,.2);
-    --group-shadow:0 2px 4px rgba(0,0,0,.03), 0 3px 10px rgba(0,0,0,.08), 0 4px 24px rgba(0,0,0,.25);
+    /* Re-read from the Canvas well frame (7:36) on 14 Sep 2026: a 55% mid
+       grey stroke and a slightly heavier shadow than the first read. */
+    --group-edge:rgba(139,139,139,.55);
+    --group-shadow:0 2px 4px rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.12), 0 4px 24px rgba(0,0,0,.25);
     --pill-shadow:0 2px 2px rgba(0,0,0,.03), 0 3px 5px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.25);
 
     --warn:#f0c375;
@@ -561,6 +563,7 @@
   .bgroup{display:inline-flex;flex-direction:column;align-items:stretch;flex:none;
           background:var(--raise);border:var(--bw) solid var(--group-edge);
           border-radius:var(--r-xs);box-shadow:var(--group-shadow);overflow:hidden}
+  .bgroup.row{flex-direction:row}
   .segbtn,.segbtn:hover,.segbtn:active{border:0;border-radius:0;box-shadow:none;transform:none}
   /* Segment Button re-read 14 Sep 2026: 32px tall, 32px minimum, 8px side
      padding; a text label sits in its own 6px-padded box, so a text button
@@ -574,10 +577,11 @@
   .segbtn[disabled],.segbtn[disabled]:hover{background:var(--raise-low);color:var(--mute)}
   .segbtn:focus-visible{outline-offset:-2px}
   .segbtn svg{width:16px;height:16px;display:block;flex:none}
-  .lrail{position:absolute;left:24px;top:48px;z-index:3;display:flex;flex-direction:column;gap:var(--s2)}
+  .lrail{position:absolute;left:16px;top:48px;z-index:3;display:flex;flex-direction:column;gap:var(--s2)}
   .lrail .corners{margin-top:var(--s6)}       /* 8 + 24 = the design's 32px between rails */
-  .brail{position:absolute;left:0;right:0;bottom:8px;z-index:3;display:flex;justify-content:center;
-         align-items:center;gap:4px;pointer-events:none;flex-wrap:wrap;padding:0 var(--s4)}
+  /* One horizontal group, centred, 20px off the bottom edge (7:36, 14 Sep). */
+  .brail{position:absolute;left:0;right:0;bottom:20px;z-index:3;display:flex;justify-content:center;
+         align-items:center;pointer-events:none;padding:0 var(--s4)}
   .brail .bgroup{pointer-events:auto}
   /* The status pill (Status pill 5:7 / 5:10): floats top-centre, its own
      recessed surface and the group stroke, hidden while it has nothing to say.
@@ -1154,15 +1158,18 @@
            when it lived over the canvas it slid out of view the moment you
            zoomed in. Anchored to the pane it stays put while the picture moves
            underneath, which is what a floating control should do. -->
-      <!-- Bottom rail (Figma 113:2851): the actions on the FIT as a whole, each
-           its own one-button group, centred. Corner selection moved to the left
-           rail — it is navigation, not an action on the fit. Rotate is not in
-           the design frame and is kept until it is ruled on. -->
+      <!-- Bottom rail (Figma 7:36, 14 Sep): the actions on the FIT as a whole
+           as ONE horizontal Button Group of four segments, centred 20px off the
+           bottom. Corner selection lives on the left rail — it is navigation,
+           not an action on the fit. The frame's last two segments are
+           placeholders; Rotate and Reset fill them (SG103). -->
       <div class="brail" id="cvbar">
-        <div class="bgroup"><button class="segbtn txt" id="redetect">Re-detect</button></div>
-        <div class="bgroup"><button class="segbtn txt" 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></div>
-        <div class="bgroup"><button class="segbtn txt" 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></div>
-        <div class="bgroup"><button class="segbtn txt" 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></div>
+        <div class="bgroup row" role="group" aria-label="Fit actions">
+          <button class="segbtn txt" id="redetect">Re-detect</button>
+          <button class="segbtn txt" 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="segbtn txt" 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="segbtn txt" 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>
+        </div>
       </div>
     </section>