screengraft 0.66.0 → 0.67.0

package/package.json

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

@@ -1077,6 +1077,35 @@ class Handler(BaseHTTPRequestHandler):
                 except RenderBusy as exc:
                     return self._json({"error": str(exc)}, 409)
 
+            if u.path == "/api/reveal":
+                # Show a saved file in the desktop's file manager. The PAGE
+                # cannot do this -- a browser will not open a Finder window
+                # from an http origin -- and this server is the half of
+                # screengraft that runs on the user's machine, so it is the
+                # only thing that can.
+                #
+                # _safe_local_path is the whole security story and it already
+                # guards /file: it expands ~, resolves symlinks, refuses any
+                # path outside HOME, and requires a file that exists. The
+                # command is an argument LIST handed to the OS, never a string
+                # through a shell, so a path cannot become an argument or a
+                # second command however it is spelled.
+                try:
+                    p = _safe_local_path(b.get("path") or "")
+                except (PermissionError, FileNotFoundError, TypeError) as exc:
+                    return self._json({"error": str(exc)}, 400)
+                if sys.platform == "darwin":
+                    cmd = ["open", "-R", p]            # reveals AND selects it
+                elif os.name == "nt":
+                    cmd = ["explorer", "/select,", p]  # exits 1 even on success
+                else:
+                    cmd = ["xdg-open", os.path.dirname(p)]
+                try:
+                    subprocess.run(cmd, capture_output=True, timeout=10, check=False)
+                except (OSError, subprocess.SubprocessError) as exc:
+                    return self._json({"error": f"could not open the folder: {exc}"}, 500)
+                return self._json({"ok": True})
+
             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.66):** 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.67):** 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

@@ -68,14 +68,32 @@
        polished Button matrix (4:14): hover's border is border/edge-mid, and
        pressed keeps border/edge rather than dimming to edge-low — pressing a
        control must not make it look unavailable. Both had drifted. */
-    --btn-hover:#333337; --btn-hover-edge:#494a50;
-    --btn-press:#1c1c20; --btn-press-edge:#3a3b41;
+    /* Re-read 20 Sep 2026 and the family is now COMPLETE: rest had no token
+       of its own, so the button borrowed --raise/--edge and had quietly
+       diverged from button/secondary/container|border/default. Every value
+       below is read straight off 4:14. --btn-rest-edge (#46464e) is the border
+       every raised control wears — the Default button at rest AND pressed, and
+       the segmented track — which is why it is one token used in three places
+       rather than a new step in the --edge ladder.
+       NOTE: hover's surface (#2b2b30) is now a hair DARKER than rest
+       (#2b2c31), so hover is carried almost entirely by the border stepping to
+       edge-mid. That is what the file says; it looks like the hover variant
+       kept the old rest value when rest moved. Flagged for the design file. */
+    --btn-rest:#2b2c31;  --btn-rest-edge:#46464e;
+    --btn-hover:#2b2b30; --btn-hover-edge:#494a50;
+    --btn-press:#1c1c20; --btn-press-edge:#46464e;
     /* Accent disabled keeps the label READABLE rather than fading the whole
        button — the Button component in Figma says so explicitly. */
     /* Re-read 13 Sep 2026: primary/container/disabled is the SOLID press
        colour with the solid stroke and the solid label — the design fades
        nothing here, it recesses. Was three alpha variants. */
-    --acc-dis:#bb2b00; --acc-dis-edge:#ff6833; --acc-dis-ink:#fbf9f9;
+    /* Re-read 20 Sep 2026: primary/container/disabled stepped down again,
+       #bb2b00 -> #992800, and its border is now the accent itself rather than
+       the lighter stroke. #bb2b00 is primary/container/PRESSED only, which is
+       --acc-press — the two had been sharing one value and the pressed state
+       was borrowing --acc-dis-edge for its border, so it now has its own. */
+    --acc-dis:#992800; --acc-dis-edge:#f23b0d; --acc-dis-ink:#fbf9f9;
+    --acc-press-edge:#f23b0d;
     /* Strokes are 0.5px throughout the component sets (button, chip, input
        chip, segmented, switch, button group). A half pixel snaps to one device
        pixel on any screen, so it never vanishes; on a Retina Mac it is the
@@ -160,6 +178,13 @@
     /* 120ms originally, per the visual-language notes. asked for a bit
        slower on 5 Sep — one token, so retuning is a one-line change. */
     --t-dur:180ms;                 /* the duration alone, for delays */
+    /* The source chip's grow/collapse runs slower than the app's general
+       motion on purpose: it is a shape change across ~100px, not a state
+       flip, and at 180ms it read as a snap rather than a movement. The cross
+       that follows it is quicker, and waits out this duration first. Tune
+       these two and the whole chip sequence moves with them. */
+    --t-chip:260ms;
+    --t-chip-cross:150ms;
     --t:var(--t-dur) cubic-bezier(.2,0,0,1);
     --t-pop:220ms cubic-bezier(.2,0,0,1);   /* popovers travel further */
     /* Every control animates the SAME four properties on the same curve. Kept as
@@ -186,14 +211,29 @@
        grid-template-columns:minmax(0,1fr);min-height:0;
        padding-bottom:32px;background:var(--bg)}
 
+  /* The bottom rule is an INSET SHADOW, not a border, for the same reason the
+     dock's is — and here it is not only about height, it is about which device
+     pixel things land on. A 1px border under box-sizing:border-box leaves a
+     55px content box; centring the 32px chip row in an ODD height puts it at
+     y=11.5. The chips carry a 0.5px stroke (--bw), which only survives because
+     a half CSS pixel snaps to one whole device pixel — and that assumption
+     holds only when the element's EDGES sit on whole device pixels. At 11.5 the
+     bottom edge straddles the boundary, renders faint or vanishes at dpr 2, and
+     the chip reads as pressed. Reported 20 Sep with a screenshot of exactly
+     that. As an inset shadow the content box is the full 56, the row centres on
+     y=12, and the rule is drawn in the same place it was before. */
   .topbar{display:flex;align-items:center;gap:8px;padding:0 12px 0 var(--s4);height:56px;
-          background:var(--card);border-bottom:1px solid var(--line);
-          box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(0,0,0,.25)}
+          background:var(--card);
+          box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 var(--line),
+                     0 1px 0 rgba(0,0,0,.25)}
   /* A nowrap flex row whose children keep min-width:auto cannot shrink
      below their content, so at 742px Save and Send to Claude sat at x=750..885
      — outside the viewport and unclickable. The chips carry a filename and are
      the part that should give; the actions are fixed-size and must not. */
   .topbar > *{min-width:0}
+  /* overflow:hidden clips the horizontal only in spirit — CSS couples the
+     axes — but nothing needs vertical room any more now that pressed does not
+     move. A long filename is still the part that gives. */
   .tb-chips{overflow:hidden}
   /* Figma 15:108: three groups at 16px — the format control, the save PAIR,
      and the rail toggle — with 8px inside the pair. Save and Send to Claude
@@ -252,13 +292,20 @@
      ------------------------------------------------------------------ */
   /* Both sizes are radius/sm (6px) — re-read from Button 4:14 on 13 Sep 2026,
      where every variant carries the same radius. Md had been 8 since 11 Sep. */
-  button{font:inherit;color:var(--ink);background:var(--raise);
-         border:var(--bw) solid var(--edge);border-radius:var(--r-sm);
+  button{font:inherit;color:var(--ink);background:var(--btn-rest);
+         border:var(--bw) solid var(--btn-rest-edge);border-radius:var(--r-sm);
          padding:0 var(--s3);height:28px;font-size:13px;cursor:pointer;
          transition:var(--t-all), transform var(--t)}
   button:hover{background:var(--btn-hover);border-color:var(--btn-hover-edge)}
+  /* Pressed does NOT move. It used to carry translateY(.5px) — half a CSS
+     pixel, so one device pixel at 2x — and that read as the button jumping on
+     every click rather than depressing. It also put the button's own 0.5px
+     stroke on a half-pixel boundary, and inside any clipping parent it pushed
+     the bottom edge out of the box: the top-bar chips visibly lost their
+     bottom stroke while held (20 Sep). The darker surface and the darker
+     border already say pressed, and they say it without motion. */
   button:active{background:var(--btn-press);border-color:var(--btn-press-edge);
-                box-shadow:none;transform:translateY(.5px)}
+                box-shadow:none}
   button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
   /* Default/Disabled RECESSES: surface/raise-low with border/edge-low, label at
      text/faint x 50%. It used to keep the raised surface and dim only the label.
@@ -283,22 +330,25 @@
 
   /* Primary. The accent means exactly one thing: the next action, so only one
      of these is lit at a time (see the accent hand-off in the JS). */
+  /* Weight 400, not 600: every one of the sixteen Button variants in 4:14 is
+     SF Pro Regular. The bold primary was a carry-over from before the matrix
+     existed, and it made the accent shout twice. */
   button.primary{background:var(--acc-btn-rest);color:var(--acc-ink);
-                 border-color:var(--acc-stroke);font-weight:600;box-shadow:none}
+                 border-color:var(--acc-stroke);font-weight:400;box-shadow:none}
   button.primary:hover{background:var(--acc);border-color:var(--acc-stroke)}
-  button.primary:active{background:var(--acc-press);border-color:var(--acc-dis-edge);
-                        transform:translateY(.5px)}
-  /* An accent-family button that is enabled but is NOT the next action reads
-     as an ordinary neutral control. */
-  button.accent:not(:disabled):not(.primary){
-    background:var(--raise); color:var(--ink); border-color:var(--edge);
-    font-weight:400}
-  /* Radius is deliberately NOT restated in these three rules any more. It is the
-     base button's, so .sm keeps winning on size — an accent .sm button used to
-     be handed --r-md by specificity alone. */
-  button.accent:disabled,button.primary:disabled{
+  button.primary:active{background:var(--acc-press);border-color:var(--acc-press-edge)}
+  /* The `.accent` class is gone (20 Sep 2026). Save and Send to Claude wore it
+     so that they could be accent-coloured while DISABLED — which is exactly
+     backwards: before anything is loaded the top bar showed two lit orange
+     buttons offering actions that could not be taken. They are ordinary
+     Default buttons now and gain `.primary` only when they genuinely are the
+     next action, which is the rule the Button component states.
+     Radius is deliberately NOT restated below. It is the base button's, so .sm
+     keeps winning on size — an accent .sm button used to be handed --r-md by
+     specificity alone. */
+  button.primary:disabled{
     background:var(--acc-dis); border-color:var(--acc-dis-edge);
-    color:var(--acc-dis-ink); font-weight:600; box-shadow:none; opacity:1}
+    color:var(--acc-dis-ink); font-weight:400; box-shadow:none; opacity:1}
 
   /* ------------------------------------------------------------------
      Render, while it is rendering: the button IS the progress bar.
@@ -423,7 +473,7 @@
      the thumb is 24px tall at radius/xs. Hover lifts the thumb to raise-hi
      and the track's stroke to edge-mid; pressed drops the thumb to raise-mid. */
   .seg{display:inline-flex;align-items:center;gap:2px;padding:2px;
-       background:var(--raise-low);border:var(--bw) solid var(--edge);
+       background:var(--raise-low);border:var(--bw) solid var(--btn-rest-edge);
        border-radius:var(--r-sm);transition:var(--t-all)}
   .seg:hover{border-color:var(--edge-mid)}
   .seg:active{border-color:var(--edge-mid)}
@@ -437,22 +487,23 @@
               background:transparent;border:0;box-shadow:none;color:var(--mute);
               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}
+  /* There used to be a zero-height ghost of the label at weight 600 here,
+     sizing each segment to its SELECTED width so the control did not reflow
+     when the selection moved (600 is wider than 400, so selecting "ProRes"
+     grew that segment and the whole control shifted — reported 12 Sep 2026).
+     The ghost is gone because its cause is: 84:177 has BOTH segments at
+     regular, selected and not, so no width changes on selection and the
+     `data-label` attributes in the markup are now inert. Selection is carried
+     by the thumb surface and the label colour, which is the stronger signal
+     anyway. Put the ghost back if a weight difference ever returns. */
   .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
      point of the component: one raised thing, behaving like every other raised
      thing on the page. */
-  .seg button.sel{background:var(--raise);color:var(--ink);font-weight:600}
+  .seg button.sel{background:var(--btn-rest);color:var(--ink);font-weight:400}
   .seg button.sel:hover{background:var(--raise-hi)}
-  .seg button.sel:active{background:var(--raise-mid);transform:none}
+  .seg button.sel:active{background:var(--btn-hover);transform:none}
   /* A text toggle that reads as a label until it is on. On = the raised
      surface every selected thing on this page has (the segmented thumb, the
      device chip). The edge view's Contrast toggle used to share this rule; it
@@ -472,15 +523,30 @@
      chosen source reads as a selection. Empty = its own recessed, dashed
      surface with a mid-grey label. Active = a file is being dragged OVER the
      chip: accent stroke and label on the empty one, accent fill on the filled. */
-  .inputchip{display:inline-flex;align-items:center;gap:var(--s2);max-width:220px;
+  /* The gap lives on the THUMB as a margin, not here as a flex gap: a gap
+     survives its neighbour collapsing to zero width, so an empty chip would
+     keep 8px of nothing between a thumbnail that is not there and its label.
+     As a margin it collapses with the thumb. The chip's own width is auto, so
+     it follows the thumb frame by frame — the only thing it animates itself is
+     the padding it gives back when the clear button leaves. */
+  .inputchip{display:inline-flex;align-items:center;max-width:220px;
              height:32px;padding:0 12px 0 6px;border-radius:999px;color:var(--ink);
-             background:var(--raise-hi);border:var(--bw) solid var(--edge-hi)}
+             background:var(--raise-hi);border:var(--bw) solid var(--edge-hi);
+             transition:var(--t-all), padding var(--t-chip) cubic-bezier(.2,0,0,1),
+                        width var(--t-chip) cubic-bezier(.2,0,0,1)}
   .inputchip:hover{background:var(--raise-highest);border-color:var(--edge-hi)}
   .inputchip:active{background:var(--raise-mid);border-color:var(--edge-hi)}
   .inputchip.over,.inputchip.over:hover{background:var(--acc);border-color:var(--acc-stroke);
                                         color:var(--acc-ink)}
-  .inputchip .sw{width:22px;height:22px;border-radius:999px;flex:none;
-                 background:var(--sunk);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
+  .inputchip .sw{width:22px;height:22px;margin-right:var(--s2);border-radius:999px;flex:none;
+                 background:var(--sunk);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
+                 /* Scale from the left edge so the disc grows INTO the chip and
+                    the label is pushed, rather than both sliding apart. */
+                 transform-origin:left center;
+                 transition:width var(--t-chip) cubic-bezier(.2,0,0,1),
+                            margin-right var(--t-chip) cubic-bezier(.2,0,0,1),
+                            transform var(--t-chip) cubic-bezier(.2,0,0,1),
+                            opacity var(--t-chip) cubic-bezier(.2,0,0,1)}
   .inputchip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
   /* Empty is the SAME box as filled — 32px tall, same padding, same 22px
      avatar. Only the surface, border style and label colour change. It was
@@ -489,9 +555,27 @@
                    border-color:var(--edge);color:var(--inchip-ink);box-shadow:none}
   .inputchip.is-empty:hover{background:var(--float);border-color:var(--edge-mid)}
   .inputchip.is-empty:active{background:var(--raise-low);border-color:var(--edge-mid)}
-  .inputchip.is-empty.over,.inputchip.is-empty.over:hover{background:var(--float);
-                   border-color:var(--acc-stroke);color:var(--acc-stroke)}
-  .inputchip.is-empty .sw{box-shadow:inset 0 0 0 1px var(--line)}
+  /* Active on the UNSELECTED chip -- popover open, or a file dragged over it.
+     Re-read from Input chip 159:4117 on 20 Sep 2026: the stroke is grey
+     (input-chip/unselected/border/pressed, #494a50) and the surface is
+     raise-low, not the accent. The accent stroke shipped here was the one
+     place a control that is merely READY wore the colour reserved for "this
+     is the next action" -- and with an empty chip nothing has been chosen
+     yet, so it was promising an outcome the drop had not produced. The label
+     stays accent: that is what the file says, and one accent-coloured word
+     inside a grey pill reads as a target rather than a result.
+     The FILLED chip's Active state is unchanged and still solid accent
+     (input-chip/filled/container|border/active), which the file confirms. */
+  .inputchip.is-empty.over,.inputchip.is-empty.over:hover{background:var(--raise-low);
+                   border-color:var(--edge-mid);color:var(--acc-stroke)}
+  /* Empty shows NO thumbnail — there is nothing to show, and a placeholder
+     disc read as a broken image. It collapses to zero width AND zero scale:
+     the width is what moves the label and grows the chip, the scale is what
+     makes it look like the picture arrives rather than the box stretching. */
+  .inputchip.is-empty .sw{width:0;margin-right:0;transform:scale(0);opacity:0;
+                          background:none;box-shadow:none}
+  /* No thumb to hug, so the label gets the same 12px both sides. */
+  .inputchip.is-empty{padding-left:12px}
   /* 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 --
@@ -508,10 +592,29 @@
      the root. */
   .chipwrap{position:relative;display:inline-flex;min-width:0;z-index:52}
   .chipwrap .inputchip:not(.is-empty){padding-right:30px}
-  .chipclear{position:absolute;right:5px;top:50%;transform:translateY(-50%);
+  /* It waits for its space. The chip spends --t-dur growing and opening the
+     30px of right padding this sits in; only then does the cross fade and
+     scale in, so it never appears on top of a label still sliding underneath
+     it. Leaving is the reverse and immediate — it goes first, then the chip
+     closes up behind it.
+     visibility, not [hidden]: the global [hidden]{display:none!important} rule
+     cannot animate, and visibility still takes the button out of the tab order
+     and the accessibility tree while it is away. */
+  .chipclear{position:absolute;right:5px;top:50%;transform:translateY(-50%) scale(.6);
              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)}
+             opacity:0;visibility:hidden;pointer-events:none;
+             color:var(--ink);background:var(--raise-hi);border:1px solid var(--edge);
+             transition:opacity var(--t-chip-cross) cubic-bezier(.2,0,0,1),
+                        transform var(--t-chip-cross) cubic-bezier(.2,0,0,1),
+                        background-color var(--t), border-color var(--t),
+                        visibility 0s linear var(--t-chip-cross)}
+  .chipclear.on{opacity:1;visibility:visible;pointer-events:auto;
+                transform:translateY(-50%) scale(1);
+                transition:opacity var(--t-chip-cross) cubic-bezier(.2,0,0,1) var(--t-chip),
+                           transform var(--t-chip-cross) cubic-bezier(.2,0,0,1) var(--t-chip),
+                           background-color var(--t), border-color var(--t),
+                           visibility 0s}
   /* 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
@@ -520,7 +623,7 @@
      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%)}
+  .chipclear:active{background:var(--raise-mid)}
 
   /* Status carries meaning in THREE channels: glyph, weight, luminance —
      never hue alone. */
@@ -531,14 +634,33 @@
           height:22px;padding:0 10px;border-radius:999px;background:var(--sunk);
           border:1px solid var(--line);box-shadow:none;transition:var(--t-all)}
   .status::before{font-size:11px}
+  /* The depth-of-field advanced row: two buttons and a whole sentence sharing
+     a ~296px rail. As a NOWRAP flex row every item shrank below its own label,
+     the labels wrapped inside boxes with a fixed height (button.sm is 24px,
+     .status is 22px), and .sect-body{overflow:hidden} sliced whatever stuck
+     out — "Both sides" rendered as "Both ·˙·" and the measured note stopped
+     mid-word (found 20 Sep by a UI test pass).
+     The fix is the ROW, not the container: the buttons keep their natural
+     width, and the note takes a line of its own and grows to fit. A fixed
+     height is right for a one-line pill and wrong for a sentence. */
+  .dof-adv{flex-wrap:wrap}
+  .dof-adv > button{flex:none}
+  .dof-adv > .status{flex:1 1 100%;height:auto;min-height:22px;
+                     padding-top:3px;padding-bottom:3px;align-items:flex-start}
   .status.ok{color:var(--ok);font-weight:400} .status.ok::before{content:"\2713";font-weight:600}
   .status.warn{color:var(--warn);font-weight:600} .status.warn::before{content:"!";font-weight:400}
   .status.err{color:var(--err);font-weight:600} .status.err::before{content:"\00d7"}
   /* A real spinner, not a static glyph. The old "\22ef" ellipsis never moved,
      so a wait that genuinely was in progress looked identical to a dead UI —
      which is exactly what it felt like while the agent wasn't running. */
+  /* --acc, not --accent. It said `var(--accent)` from the day it was written
+     and there is no such token in this file, so the declaration was invalid at
+     computed-value time and border-top-color fell back to currentColor. The
+     ring still turned -- the lit arc was just the label's own grey instead of
+     the accent, which is why nobody caught it by looking. Second one of these
+     today; see the kbd font shorthand. */
   .status.busy::before{content:"";width:9px;height:9px;border-radius:50%;
-          border:1.5px solid var(--line);border-top-color:var(--accent);
+          border:1.5px solid var(--line);border-top-color:var(--acc);
           animation:sg-spin .7s linear infinite}
   @keyframes sg-spin{to{transform:rotate(360deg)}}
   @media (prefers-reduced-motion:reduce){
@@ -1292,6 +1414,11 @@
   .toast.err{border-color:var(--edge)}
   .toast.err .g, .toast.err .msg{color:var(--warn)}
   .toast .msg{min-width:0;word-break:break-word}
+  /* The one action a toast may carry. Sm height and the neutral surface: it is
+     an offer beside the message, not the next step, so it takes no accent —
+     that means "the next action" and Send to Claude already has it. */
+  .toast .act{display:inline-flex;align-items:center;margin-top:8px;
+              height:24px;padding:0 9px;font-size:12px;border-radius:var(--r-sm)}
   .toast .x{flex:none;margin:-3px -4px 0 4px;width:22px;height:22px;padding:0;
             background:none;border:none;box-shadow:none;color:var(--mute);
             font-size:15px;line-height:22px;border-radius:var(--r-sm);opacity:0;
@@ -1374,8 +1501,36 @@
   .sm{font-size:12px}
   code{font:12px ui-monospace,Menlo,monospace;background:var(--sunk);padding:2px 6px;
        border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line)}
+  /* LONGHAND, deliberately. This was `font:11px/1.6 inherit`, which is an
+     INVALID shorthand -- `inherit` is not a permitted font-family value there,
+     so the browser dropped the whole declaration and every key cap silently
+     rendered at .hint's inherited 12px/1.5. The 11px never once shipped.
+     Caught 20 Sep 2026 while measuring cap heights, because the computed
+     line-height came back 18px and 19.5px when it had just been set to 14.
+     13px, up a step by request: a key cap is a label you hunt for mid-fit, not
+     body copy. `kbd.sym` goes one further because a bare glyph -- an arrow, the
+     cmd or shift sign -- fills a fraction of its em box, so at a shared size it
+     reads smaller and lighter than a cap holding a word like Tab.
+     The line box is pinned in px rather than a ratio so both sizes yield caps
+     of the SAME height; on a ratio they came out 20 and 19, and a row of caps
+     disagreeing by a pixel reads as a wobble rather than a set. */
   kbd{border:1px solid var(--edge);border-bottom-width:2px;border-radius:var(--r-sm);
-      padding:1px 5px;font:11px/1.6 inherit;color:var(--mute);background:var(--sunk)}
+      padding:1px 5px;font-family:inherit;font-size:13px;line-height:15px;
+      /* inline-block, and this is the load-bearing part: on a plain inline box
+         the painted height comes from the FONT's content area, not line-height,
+         so pinning the line box did nothing and the 14px caps still measured
+         21.5 against the 13px caps' 20. An inline-block takes its height from
+         its line box, so both land on 20. */
+      display:inline-block;
+      color:var(--mute);background:var(--sunk)}
+  kbd.sym{font-size:14px}
+  /* The Keys legend. max-content on the first column sizes it to the widest
+     cap, so every description starts on the same x and the caps form a single
+     column the eye can run down. */
+  dl.keys{display:grid;grid-template-columns:max-content 1fr;gap:6px 10px;
+          margin:8px 0 0;align-items:baseline}
+  dl.keys dt{color:var(--faint);font-size:12px;white-space:nowrap}
+  dl.keys dd{margin:0;color:var(--faint);font-size:12px;line-height:1.5}
 </style>
 </head>
 <body>
@@ -1389,9 +1544,9 @@
     <div class="tb-left">
       <span class="brand">Screengraft</span><span id="sess" hidden></span>
       <div class="tb-chips">
-        <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="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."><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>
-        <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>
+        <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."><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>
@@ -1409,8 +1564,8 @@
         <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>
       <span class="tb-save">
-        <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>
+        <button id="save" disabled>Save</button>
+        <button id="imp" disabled title="Send the saved file to Claude so it appears in the chat">Send to Claude</button>
       </span>
       <button id="railBtn" class="iconbtn" aria-expanded="true" aria-controls="rail" aria-label="Settings rail"><svg class="i-open" viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M4.76855 1C4.50954 1.2888 4.30589 1.62677 4.17383 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.17383C4.30589 14.3732 4.50954 14.7112 4.76855 15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V3C1 1.89543 1.89543 1 3 1H4.76855Z"/><path fill="var(--icon)" d="M7 15C5.89543 15 5 14.1046 5 13V3C5 1.96435 5.78722 1.113 6.7959 1.01074L7 1H13L13.2041 1.01074C14.1457 1.1062 14.8938 1.85435 14.9893 2.7959L15 3V13C15 14.1046 14.1046 15 13 15H7ZM13 14C13.5523 14 14 13.5523 14 13V3C14 2.44771 13.5523 2 13 2H7C6.44771 2 6 2.44771 6 3V13C6 13.5523 6.44772 14 7 14H13ZM7.14648 8.64648L7.79297 8L7.14648 7.35352L7.85352 6.64648L9.20703 8L7.85352 9.35352L7.14648 8.64648Z"/></svg><svg class="i-closed" viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M8.76855 1C8.50954 1.2888 8.30589 1.62677 8.17383 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H8.17383C8.30589 14.3732 8.50954 14.7112 8.76855 15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V3C1 1.89543 1.89543 1 3 1H8.76855Z"/><path fill="var(--icon)" d="M11 15C9.89543 15 9 14.1046 9 13V3C9 1.96435 9.78722 1.113 10.7959 1.01074L11 1H13L13.2041 1.01074C14.1457 1.1062 14.8938 1.85435 14.9893 2.7959L15 3V13C15 14.1046 14.1046 15 13 15H11ZM13 14C13.5523 14 14 13.5523 14 13V3C14 2.44771 13.5523 2 13 2H11C10.4477 2 10 2.44771 10 3V13C10 13.5523 10.4477 14 11 14H13ZM10.793 8L12.1465 6.64648L12.8535 7.35352L12.207 8L12.8535 8.64648L12.1465 9.35352L10.793 8Z"/></svg></button>
     </div>
@@ -1442,10 +1597,10 @@
           <button class="segbtn" id="czFit" aria-label="Fit the photo to the pane" title="Fit the whole photo in the pane"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path fill="var(--mute)" d="M14.1025 1.00488C14.6067 1.05621 15 1.48232 15 2V14L14.9951 14.1025C14.9472 14.573 14.573 14.9472 14.1025 14.9951L14 15H2C1.48232 15 1.05621 14.6067 1.00488 14.1025L1 14V2C1 1.44772 1.44772 1 2 1H14L14.1025 1.00488ZM2 14H14V2H2V14Z"/><path stroke="var(--icon)" d="M7 11.5H4.5V9M4.5 11.5L7.5 8.5"/><path stroke="var(--icon)" d="M9 4.5H11.5V7M11.5 4.5L8.5 7.5"/></svg></button>
         </div>
         <div class="bgroup corners" role="group" aria-label="Select corner"><i class="ring" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i>
-          <button class="segbtn" data-jump="0" aria-label="Top-left corner" title="Jump to the top-left corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M2 13C2 13.5523 2.44772 14 3 14H6V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V10H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H10V14H13C13.5523 14 14 13.5523 14 13V10H15V13ZM6 2H3C2.44772 2 2 2.44772 2 3V6H1V3C1 1.89543 1.89543 1 3 1H6V2ZM13 1C14.1046 1 15 1.89543 15 3V6H14V3C14 2.44772 13.5523 2 13 2H10V1H13Z"/><path fill="var(--acc-ink)" d="M6 2H3C2.44772 2 2 2.44772 2 3V6H1V3C1 1.89543 1.89543 1 3 1H6V2Z"/></svg></button>
-          <button class="segbtn" data-jump="1" aria-label="Top-right corner" title="Jump to the top-right corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M2 13C2 13.5523 2.44772 14 3 14H6V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V10H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H10V14H13C13.5523 14 14 13.5523 14 13V10H15V13ZM6 2H3C2.44772 2 2 2.44772 2 3V6H1V3C1 1.89543 1.89543 1 3 1H6V2ZM13 1C14.1046 1 15 1.89543 15 3V6H14V3C14 2.44772 13.5523 2 13 2H10V1H13Z"/><path fill="var(--acc-ink)" d="M10 2H13C13.5523 2 14 2.44772 14 3V6H15V3C15 1.89543 14.1046 1 13 1H10V2Z"/></svg></button>
-          <button class="segbtn" data-jump="3" aria-label="Bottom-left corner" title="Jump to the bottom-left corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M2 13C2 13.5523 2.44772 14 3 14H6V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V10H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H10V14H13C13.5523 14 14 13.5523 14 13V10H15V13ZM6 2H3C2.44772 2 2 2.44772 2 3V6H1V3C1 1.89543 1.89543 1 3 1H6V2ZM13 1C14.1046 1 15 1.89543 15 3V6H14V3C14 2.44772 13.5523 2 13 2H10V1H13Z"/><path fill="var(--acc-ink)" d="M6 14H3C2.44772 14 2 13.5523 2 13V10H1V13C1 14.1046 1.89543 15 3 15H6V14Z"/></svg></button>
-          <button class="segbtn" data-jump="2" aria-label="Bottom-right corner" title="Jump to the bottom-right corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M2 13C2 13.5523 2.44772 14 3 14H6V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V10H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H10V14H13C13.5523 14 14 13.5523 14 13V10H15V13ZM6 2H3C2.44772 2 2 2.44772 2 3V6H1V3C1 1.89543 1.89543 1 3 1H6V2ZM13 1C14.1046 1 15 1.89543 15 3V6H14V3C14 2.44772 13.5523 2 13 2H10V1H13Z"/><path fill="var(--acc-ink)" d="M10 14H13C13.5523 14 14 13.5523 14 13V10H15V13C15 14.1046 14.1046 15 13 15H10V14Z"/></svg></button>
+          <button class="segbtn" data-jump="0" aria-label="Top-left corner" title="Jump to the top-left corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--edge-hi)" d="M2 13C2 13.5523 2.44772 14 3 14H5V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V11H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H11V14H13C13.5523 14 14 13.5523 14 13V11H15V13ZM5 2H3C2.44772 2 2 2.44772 2 3V5H1V3C1 1.89543 1.89543 1 3 1H5V2ZM13 1C14.1046 1 15 1.89543 15 3V5H14V3C14 2.44772 13.5523 2 13 2H11V1H13Z"/><path fill="var(--acc-ink)" d="M5 2.5H3C2.72386 2.5 2.5 2.72386 2.5 3V5H1V3C1 1.89543 1.89543 1 3 1H5V2.5Z"/></svg></button>
+          <button class="segbtn" data-jump="1" aria-label="Top-right corner" title="Jump to the top-right corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--edge-hi)" d="M2 13C2 13.5523 2.44772 14 3 14H5V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V11H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H11V14H13C13.5523 14 14 13.5523 14 13V11H15V13ZM5 2H3C2.44772 2 2 2.44772 2 3V5H1V3C1 1.89543 1.89543 1 3 1H5V2ZM13 1C14.1046 1 15 1.89543 15 3V5H14V3C14 2.44772 13.5523 2 13 2H11V1H13Z"/><path fill="var(--acc-ink)" d="M11 2.5H13C13.2761 2.5 13.5 2.72386 13.5 3V5H15V3C15 1.89543 14.1046 1 13 1H11V2.5Z"/></svg></button>
+          <button class="segbtn" data-jump="3" aria-label="Bottom-left corner" title="Jump to the bottom-left corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--edge-hi)" d="M2 13C2 13.5523 2.44772 14 3 14H5V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V11H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H11V14H13C13.5523 14 14 13.5523 14 13V11H15V13ZM5 2H3C2.44772 2 2 2.44772 2 3V5H1V3C1 1.89543 1.89543 1 3 1H5V2ZM13 1C14.1046 1 15 1.89543 15 3V5H14V3C14 2.44772 13.5523 2 13 2H11V1H13Z"/><path fill="var(--acc-ink)" d="M5 13.5H3C2.72386 13.5 2.5 13.2761 2.5 13V11H1V13C1 14.1046 1.89543 15 3 15H5V13.5Z"/></svg></button>
+          <button class="segbtn" data-jump="2" aria-label="Bottom-right corner" title="Jump to the bottom-right corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--edge-hi)" d="M2 13C2 13.5523 2.44772 14 3 14H5V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V11H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H11V14H13C13.5523 14 14 13.5523 14 13V11H15V13ZM5 2H3C2.44772 2 2 2.44772 2 3V5H1V3C1 1.89543 1.89543 1 3 1H5V2ZM13 1C14.1046 1 15 1.89543 15 3V5H14V3C14 2.44772 13.5523 2 13 2H11V1H13Z"/><path fill="var(--acc-ink)" d="M11 13.5H13C13.2761 13.5 13.5 13.2761 13.5 13V11H15V13C15 14.1046 14.1046 15 13 15H11V13.5Z"/></svg></button>
         </div>
       </div>
       <!-- Corner jump. It is a SIBLING of the scroller, not a child: anything
@@ -1476,7 +1631,13 @@
         fitted quad by the browser. Not the composite — the composite already
         has a frame burned into it, so playing over that would show two screens.
       --><div id="liveWrap" hidden><img id="liveBg" alt=""><video id="liveVid" loop muted playsinline></video></div></div>
-      <span class="pillwrap"><i class="ring sat" aria-hidden="true"></i><i class="ring lum" aria-hidden="true"></i><i class="ring hue" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i><span class="status" id="outSt">Press Preview</span></span>
+      <span class="pillwrap"><i class="ring sat" aria-hidden="true"></i><i class="ring lum" aria-hidden="true"></i><i class="ring hue" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i><!-- Empty on purpose. It read "Press Preview" until 20 Sep 2026, which named
+           a button that does not exist: the compare pane renders on its own after
+           every correction, so there is nothing to press. The pane already says
+           what it is waiting for in its own body text, and .pillwrap:has(>
+           .status:empty) hides the pill until there is something true to put in
+           it. -->
+      <span class="status" id="outSt"></span></span>
       <!-- Video controls. Hidden entirely for a still source: a scrubber over a
            screenshot is a control that can only confuse. The fit itself is
            unchanged — you match the edges on one frame and every frame gets the
@@ -1584,7 +1745,7 @@
         <div class="sect-body"><div class="sect-body-in">
           <div style="display:grid;gap:var(--s2)">
             <div style="display:flex;align-items:center;justify-content:space-between;gap:var(--s2)">
-              <span class="sm" style="color:var(--mute)">Blur grows toward (of the screen)</span>
+              <span class="sm" style="color:var(--mute)">Blur grows toward</span>
               <span class="sm" id="dofDirVal" style="font-variant-numeric:tabular-nums"></span>
             </div>
             <input type="range" id="dofDir" min="0" max="355" step="5" value="90" aria-label="Direction the blur grows in">
@@ -1593,7 +1754,7 @@
               <span class="sm" id="dofStrVal" style="font-variant-numeric:tabular-nums"></span>
             </div>
             <input type="range" id="dofStr" min="0" max="1" step="0.05" value="0.3" aria-label="Blur strength at the far edge">
-            <div style="display:flex;align-items:center;gap:var(--s2)">
+            <div class="dof-adv" style="display:flex;align-items:center;gap:var(--s2)">
               <button class="sm" id="dofBoth" aria-pressed="false" title="Blur on both sides of the focus line — the depth of field's near and far limits, for a phone whose middle is sharp and both ends soft. Off, the plane of focus is at the screen's edge and blur grows one way.">Both sides</button>
               <button class="sm" id="dofMeasure" title="Read the direction and a starting strength off the photo's own bezel">Measure from photo</button>
               <span class="status sm" id="dofSt" style="min-width:0"></span>
@@ -1614,12 +1775,38 @@
       </div>
       <div class="sect" id="secKeys" data-on="1">
         <div class="sect-top"><div class="sect-left"><h4>Keys</h4></div></div>
-        <!-- Two lines, split by what they act on: the QUAD you are fitting, and
-             the VIEW you are fitting it in. Grouping them by that rather than
-             by modifier is what makes the list scannable while you are mid-fit
-             and looking for one of them. -->
-        <p class="hint"><kbd>&larr;&uarr;&rarr;&darr;</kbd> nudge 1px · <kbd>&#8679;</kbd>+arrow 10px · <kbd>Tab</kbd> next edge</p>
-        <p class="hint"><kbd>&#8984;</kbd>+scroll zoom to pointer · <kbd>Space</kbd>+drag pan · scroll pans</p>
+        <!-- One row per key, in the order you meet them: place the quad, move
+             between its parts, then move the view you are placing it in.
+
+             A <dl>, because these ARE term/description pairs -- saying so in the
+             markup is also what lets a screen reader read a key and its meaning
+             as one unit. It ran as prose lines until 20 Sep 2026, which read
+             fine in a wide rail and badly in a narrow one: the caps ended up
+             mid-sentence and mid-wrap, so finding one meant reading the line
+             rather than scanning a column.
+
+             Checked line by line against the handlers the same day and it held,
+             with two gaps, both fixed here. (a) The arrows do nothing until an
+             edge or corner is SELECTED (`if (!pick) return`) -- "nudge 1px"
+             implied they always work. (b) Escape was undocumented, and it is the
+             way out of the canvas's Tab cycle, so the one line that told you how
+             to get IN had no counterpart telling you how to get out. Also named
+             the trackpad pinch: the wheel handler takes ctrlKey as well as
+             metaKey, so a pinch has always zoomed, unmentioned, on the gesture
+             most people reach for first on this hardware.
+
+             Those two conditions sit in the note BELOW the list rather than in
+             parentheses on a row, because each qualifies several rows. -->
+        <dl class="keys">
+          <dt><kbd class="sym">&larr;&uarr;&rarr;&darr;</kbd></dt><dd>nudge 1px</dd>
+          <dt><kbd class="sym">&#8679;</kbd>+arrow</dt><dd>nudge 10px</dd>
+          <dt><kbd>Tab</kbd></dt><dd>next edge</dd>
+          <dt><kbd>Esc</kbd></dt><dd>release the photo</dd>
+          <dt><kbd class="sym">&#8984;</kbd>+scroll or pinch</dt><dd>zoom to the pointer</dd>
+          <dt><kbd>Space</kbd>+drag</dt><dd>pan</dd>
+          <dt><kbd>scroll</kbd></dt><dd>pan</dd>
+        </dl>
+        <p class="hint">Arrows act on the selected edge or corner. <kbd>Tab</kbd> and <kbd>Esc</kbd> need a click on the photo first.</p>
       </div>
     </aside>
   </div>
@@ -1801,6 +1988,20 @@ function toastPath(p){
   return `<span class="path">${esc.replace(/\//g, '/<wbr>')}</span>`;
 }
 
+/* "Open folder" on the save toast. A browser cannot open a file manager from
+   an http page, so the page asks the server, which runs on the machine.
+   Delegated from the container rather than wired per toast: a toast is created
+   and destroyed constantly, and one listener outlives all of them. It fails
+   soft on purpose — the page has a second host with no filesystem at all, and
+   there the route simply is not there. */
+$('#toasts')?.addEventListener('click', async (e) => {
+  const b = e.target.closest('[data-reveal]');
+  if (!b) return;
+  b.disabled = true;
+  try { await api('/api/reveal', { path: decodeURIComponent(b.dataset.reveal) }); }
+  catch (err) { b.disabled = false; toast('err', 'Could not open the folder: ' + err.message); }
+});
+
 function toast(kind, html, opts = {}) {
   const wrap = $('#toasts');
   if (!wrap) return null;
@@ -1837,7 +2038,11 @@ function toast(kind, html, opts = {}) {
      there is nowhere down for it to go. */
   let startX = 0, startY = 0, dragging = false;
   el.addEventListener('pointerdown', e => {
-    if (e.target.closest('.x')) return;
+    // Anything clickable in a toast must bail out BEFORE the capture below:
+    // setPointerCapture retargets the resulting click to the toast, so a
+    // button inside it never sees one. The dismiss × has always needed this;
+    // .act (Open folder) needs it for exactly the same reason.
+    if (e.target.closest('.x, .act')) return;
     dragging = true; startX = e.clientX; startY = e.clientY;
     el.dataset.dragging = 'true';
     try { el.setPointerCapture(e.pointerId); } catch (err) {}
@@ -2011,12 +2216,66 @@ function casedText(c, text, x, y, color){
    The page reads the bytes and the SERVER judges them: whether this is the
    photograph the fit was made for is a question only the side holding the
    pixels can answer. */
+/* One busy state for every operation on this page that can take a while.
+
+   Measured 20 Sep 2026, because the report was "the 4K image takes time to
+   load" and the guess attached to it was detection. The guess was right and
+   the description was not: a cold 4000x4000 photo fetches and decodes in about
+   150ms, while `scripts/detect.py` on the same file takes **11.2s** -- it runs
+   at full resolution, it does not downscale. So the wait is real, it is
+   detection, and it was already being narrated -- just not well enough to be
+   believed, because a static "Detecting..." for eleven seconds is
+   indistinguishable from a page that has stopped.
+
+   Two things fix that, and neither is a bigger spinner. A counter that keeps
+   moving is the difference between slow and stuck, which the Figma import has
+   understood since it was written -- this is that pattern, lifted out of it so
+   three more callers can have it. And the 250ms delay means a fast operation
+   never flashes a spinner it did not need, which is why this can be used on
+   everything without making the page feel busier than it is.
+
+   `settle(restore)` ends it. Pass true when the caller does NOT write its own
+   status afterwards and the line held something worth putting back; pass false
+   when the caller is about to overwrite it anyway. */
+function busy(el, label, opts){
+  const o = opts || {};
+  const delay = o.delay == null ? 250 : o.delay;
+  const countFrom = o.countFrom == null ? 2 : o.countFrom;
+  const t0 = Date.now();
+  const prev = {cls: el.className, html: el.innerHTML, title: el.title};
+  // Keep a size modifier the caller had set; only the state word changes.
+  const cls = 'status ' + (/\bsm\b/.test(prev.cls) ? 'sm ' : '') + 'busy';
+  let armed = false, tick = null;
+  const paint = () => {
+    const n = Math.round((Date.now() - t0) / 1000);
+    el.className = cls;
+    el.innerHTML = n >= countFrom ? `${label} <span class="el">${n}s</span>` : `${label}…`;
+  };
+  const arm = setTimeout(() => { armed = true; paint(); tick = setInterval(paint, 1000); }, delay);
+  // A timer is throttled to about once a minute in a hidden tab, and this is
+  // exactly the wait somebody switches away from. Repaint on return so the
+  // number is right the moment they look at it again.
+  document.addEventListener('visibilitychange', paint);
+  return function settle(restore){
+    clearTimeout(arm);
+    if (tick){ clearInterval(tick); tick = null; }
+    document.removeEventListener('visibilitychange', paint);
+    if (armed && restore){ el.className = prev.cls; el.innerHTML = prev.html; el.title = prev.title; }
+    armed = false;
+  };
+}
 async function loadFitFile(file){
   const s = $('#detSt');
+  // Declared out here so the catch can end the counter too.
+  let settle = () => {};
   try {
     const text = await file.text();
-    s.className = 'status busy'; s.textContent = 'Reading that fit…';
+    // /api/fit hashes the photograph's decoded pixels to decide whether this
+    // fit belongs to it, so it costs more on a big photo, for the same reason
+    // detection does.
+    settle = busy(s, 'Reading that fit');
     const r = await api('/api/fit', {fit: JSON.parse(text)});
+    settle(false);
     st.corners = r.corners.map(c => c.slice());
     st.measured = null;
     st.quadFrom = 'file';
@@ -2039,6 +2298,7 @@ async function loadFitFile(file){
     pick = {kind:'edge', i:0};
     draw(); drawStrip(); autoPreview();
   } catch (e) {
+    settle(false);
     s.className = 'status warn'; s.textContent = 'That fit could not be used';
     s.title = e.message || '';
     toast('err', 'Could not load that fit: ' + (e.message || e));
@@ -2087,17 +2347,59 @@ async function loadRecent(){
    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. */
+/* The chip is sized by its content, and content changes in ONE frame: the
+   label swaps between "Choose a photo…" and a filename, and the box arrives at
+   its new width before the thumbnail has moved at all. That is the jump — the
+   thumb and the padding were animating politely while the width had already
+   finished. `auto` cannot be transitioned, so the width is measured on both
+   sides of the change and animated explicitly between the two.
+   Released back to auto once it lands, because a fixed width would stop a
+   later filename or a window resize from reflowing the chip normally.
+   Found 20 Sep by reading a screen recording frame by frame. */
+const chipMs = () => parseFloat(getComputedStyle(document.documentElement)
+                       .getPropertyValue('--t-chip')) || 260;
+function reshapeChip(chip, apply){
+  const from = chip.getBoundingClientRect().width;
+  // Pin BEFORE the content changes, so the swap cannot paint at its new
+  // natural width even for a frame — and so the measurement below, which
+  // forces a layout, cannot commit that width as the transition's start.
+  chip.style.width = from + 'px';
+  apply();
+  // Measure the target on a GHOST, not on the live chip. The live thumbnail is
+  // mid-transition at this instant and still reports width 0, so measuring
+  // here lands ~30px short and the chip finishes with a second, untimed step
+  // when the pin is released. The ghost carries the same classes and content
+  // with transitions off, so it is already at rest.
+  const ghost = chip.cloneNode(true);
+  ghost.removeAttribute('id');
+  ghost.querySelectorAll('[id]').forEach(e => e.removeAttribute('id'));
+  ghost.style.cssText = 'position:absolute;left:-9999px;top:0;width:auto;' +
+                        'visibility:hidden;pointer-events:none;transition:none';
+  chip.parentElement.appendChild(ghost);
+  const to = ghost.getBoundingClientRect().width;
+  ghost.remove();
+  if (Math.abs(to - from) < 0.5){ chip.style.width = ''; return; }
+  void chip.offsetWidth;                        // commit the start
+  chip.style.width = to + 'px';
+  // Back to auto once it lands: a fixed width would stop a later filename or a
+  // window resize from reflowing the chip normally.
+  clearTimeout(chip._reshape);
+  chip._reshape = setTimeout(() => { chip.style.width = ''; }, chipMs() + 40);
+}
+
 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…';
+  reshapeChip(chip, () => {
+    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;
+  $('#clear'+n).classList.remove('on');
   document.querySelectorAll('#recent'+n+' .th').forEach(x=>x.classList.remove('sel'));
   dropResult();
   if (role==='photo'){
@@ -2106,6 +2408,10 @@ async function clearSource(role){
     // 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);
+    // Belt and braces, and worth it on its own: a 4000x4000 decode is ~64MB of
+    // pixels held for a photograph the user has just removed. Dropping it makes
+    // the stale-repaint above impossible rather than merely unpainted.
+    img.removeAttribute('src');
     // ... 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']) {
@@ -2156,14 +2462,16 @@ function setChosen(role, path, size, el, meta){
   const ver = (meta && meta.mtime) || Date.now();
   $('#pv'+n).innerHTML = `<img src="${srcURL(thumb, ver)}" alt="">`;
   const chip = $('#chip'+n);
-  chip.classList.remove('is-empty');
   // 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;
+  reshapeChip(chip, () => {
+    chip.classList.remove('is-empty');
+    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.
@@ -2171,7 +2479,7 @@ function setChosen(role, path, size, el, meta){
   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("${srcURL(thumb, ver)}")`;
-  $('#clear'+n).hidden = false;
+  $('#clear'+n).classList.add('on');
   // 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.
@@ -2384,10 +2692,44 @@ function distToSeg(p,a,b){
   return {d: vlen(sub(p, add(a, mul(ab,t)))), t};
 }
 
+/* Loading the photograph is the one long step on this page that said nothing.
+   `detect()` has narrated itself since it existed, and it runs AFTER this, so a
+   4K photo spent its whole fetch-and-decode in silence with the picker already
+   closed and the canvas still empty -- which reads as the click not having
+   landed. Reported 20 Sep 2026, with detection as the suspected cause; it was
+   not, and the measured order is: set img.src -> fetch the full-resolution file
+   -> browser decode -> onload -> computeFit/draw -> only then detect().
+
+   Armed on a 250ms delay so a small photo never flashes a spinner it does not
+   need, and it counts seconds past 2 for the same reason the Figma import does:
+   a number that keeps moving is the difference between slow and stuck.
+
+   The previous status is CAPTURED and handed back on settle rather than
+   blanked. One caller (setChosen, changing the screenshot under an existing
+   fit) writes "the fit on the photo is kept" and then calls in here, and the
+   branch below that keeps existing corners writes nothing -- so clearing would
+   have eaten somebody else's message. */
+let photoBusy = null;                // settle() for a load still in flight
 async function maybeStart(){
   if (!st.photo) return;
   const ready = !!st.shot;           // the screenshot gates the fit, not the photo
+  const s = $('#detSt');
+  if (photoBusy) photoBusy(true);    // a second pick mid-load: retire the first
+  const done = busy(s, 'Loading the photo');
+  const settle = () => { done(true); photoBusy = null; };
+  photoBusy = settle;
+  // There was no onerror at all, so a photo that failed to decode left the page
+  // silent for good: no canvas, no message, nothing to do next.
+  img.onerror = () => {
+    // Clearing the photo drops img's src on purpose; that is not a failure.
+    if (!st.photo) { settle(); return; }
+    settle();
+    s.className = 'status err';
+    s.textContent = 'That photo could not be opened — try another, or drop the file in again.';
+    s.title = homePath(st.photo || '');
+  };
   img.onload = () => {
+    settle();
     computeFit(); setCanvasZoom(fitScale);
     refreshRings();
     if (!ready){
@@ -2596,9 +2938,11 @@ $('#scroller').addEventListener('pointerdown', e => {
   pointAt(p[0], p[1]);
 }, true);
 async function pointAt(x, y){
-  const s = $('#detSt'); s.className = 'status busy'; s.textContent = 'Reading that point…';
+  const s = $('#detSt');
+  const settle = busy(s, 'Reading that point');
   try {
     const r = await api('/api/detect', {click: [x, y]});
+    settle(false);
     if (r.found){
       st.corners = r.corners; st.measured = r.corner_radius; st.quadFrom = 'detected';
       orientQuad();
@@ -2614,6 +2958,7 @@ async function pointAt(x, y){
       s.title = r.message || '';
     }
   } catch (err) {
+    settle(false);
     s.className = 'status warn'; s.textContent = 'Could not read that point: ' + err.message;
   }
   pick = {kind:'edge', i:0};
@@ -2628,8 +2973,29 @@ document.querySelectorAll('[data-jump]').forEach(b => {
 });
 
 async function detect(){
-  const s = $('#detSt'); s.className='status busy'; s.textContent = 'Detecting…';
-  const r = await api('/api/detect', {});
+  const s = $('#detSt');
+  // The longest wait on the page: 11.2s measured on a 4000x4000 photo, because
+  // detect.py runs at full resolution. The counter is what makes that read as
+  // working rather than hung.
+  const settle = busy(s, 'Detecting');
+  let r;
+  // There was no catch here at all, so a request that failed left 'Detecting…'
+  // spinning for good -- the one state the page could never leave.
+  try { r = await api('/api/detect', {}); }
+  catch (e){
+    settle(false);
+    s.className = 'status err';
+    s.textContent = 'Detection failed — try Point at screen, or place the edges by hand';
+    s.title = e.message || '';
+    suggestPointing(true);
+    st.corners = defaultQuad(); st.quadFrom = 'default';
+    if (!st.type) setType('phone');
+    applyPreset();
+    pick = {kind:'edge', i:0};
+    draw(); drawStrip(); autoPreview();
+    return;
+  }
+  settle(false);
   if (r.found){
     st.corners = r.corners; st.measured = r.corner_radius; st.quadFrom = 'detected';
     orientQuad();
@@ -2890,7 +3256,16 @@ function draw(){
   if (!$('#liveWrap').hidden) placeLiveVideo();
   ctx.setTransform(cvDpr, 0, 0, cvDpr, 0, 0);          // CSS px from here on; the store is cvDpr times larger
   ctx.clearRect(0,0,cvW,cvH);
-  if (!img.naturalWidth) return;
+  // st.photo FIRST, and this is the whole bug reported 21 Sep 2026: clear the
+  // photo, then click anywhere in the fit pane, and the photograph came back
+  // while the chip still read "Choose a photo…". The guard here was
+  // `img.naturalWidth` alone -- the <img> keeps its decoded pixels until
+  // something replaces them, and clearSource only wiped the CANVAS, so the
+  // image was still 4000x4000 and perfectly drawable. The click ran
+  // cv.onpointerdown -> no hit -> draw(), and draw() repainted what it still
+  // had. Asking the <img> whether there is a photo was the mistake: the <img>
+  // is a cache, st.photo is the answer.
+  if (!(st.photo && img.naturalWidth)) return;
   ctx.drawImage(img, 0,0, cvW, cvH);
   if (!st.corners) return;
   const P = st.corners.map(([x,y]) => [x*scale, y*scale]);
@@ -3041,9 +3416,21 @@ cv.onpointerup = cv.onpointercancel = () => { drag = null; draw(); drawStrip();
 cv.onpointerleave = () => { if (!drag){ hover = null; draw(); drawStrip(); } };
 
 window.addEventListener('keydown', e => {
-  if (e.key === 'Escape'){ closePop(); return; }
+  // Escape also releases the canvas, so Tab-cycling is never a one-way door.
+  if (e.key === 'Escape'){ closePop(); if (document.activeElement === cv) cv.blur(); return; }
   if (!st.corners || document.querySelector('.pop.on')) return;
   if (e.key === 'Tab'){
+    // Tab is the BROWSER's focus key everywhere except the fit canvas itself.
+    // This was taken at window level with no target check, so the moment a fit
+    // existed a keyboard user could never reach the top bar or the rail: focus
+    // stayed where it was and the EDGE advanced instead. Reported 20 Sep with
+    // the focus ring visibly stuck on a device chip while the edge cycled —
+    // WCAG 2.1.1, and the KEYS legend's "Tab next edge" is why it looked
+    // deliberate rather than broken.
+    // The canvas is tabindex="-1": it holds focus only after a click on it,
+    // which is exactly when cycling edges is what Tab should mean. Escape
+    // above gives it back.
+    if (document.activeElement !== cv) return;
     e.preventDefault();
     const i = pick && pick.kind==='edge' ? (pick.i+1)%4 : 0;
     pick = {kind:'edge', i}; draw(); drawStrip(); return;
@@ -3704,15 +4091,25 @@ let outNat = 0, autoTimer = null;
    would do. On a tool whose whole pitch is that the output is exact, a label
    that disagrees with its action is not a small thing. */
 function saveLabel(){ return st.video ? 'Render' : 'Save'; }
-/* The labels that mean "there is something to do". markStale's 'Preview first'
-   and the in-flight 'Saving…' / progress text must survive a source change, so
+/* The in-flight 'Saving…' / progress text must survive a source change, so
    relabelling only touches a button that is currently offering the action. */
 function relabelSave(){
   const b = $('#save');
   if (b.textContent === 'Save' || b.textContent === 'Render') b.textContent = saveLabel();
 }
 function markStale(){
-  const b = $('#save'); b.disabled = true; b.textContent = 'Preview first';
+  // This used to relabel the button 'Preview first'. Removed 20 Sep 2026 on
+  // request, and the request was right on inspection: with the compare pane
+  // open by default, EVERY caller of markStale that has all three inputs is
+  // followed by autoPreview() within the same interaction -- pointerup after a
+  // drag, the same line after a keyboard nudge, the end of pointAt(), the
+  // callers of setFrac. So the label was only ever on screen for the 350ms
+  // debounce. The one place it PERSISTED was a failed /api/preview, where it
+  // told the user to do the thing they had just done and that had just failed.
+  // Dead in the happy path, wrong in the sad one. The button keeps its own
+  // verb and simply reads as unavailable; the status line says why.
+  const b = $('#save'); b.disabled = true;
+  b.textContent = saveLabel();
   // Exactly one lit action at a time — the Figma Button component says the
   // accent marks the NEXT action and that only one may be on screen. With no
   // current render there is nothing to save, so nothing is lit: Preview stays
@@ -4180,8 +4577,11 @@ $('#save').onclick = async () => {
     // Naming the fit file here is the whole reason it is discoverable: it is
     // written silently beside the mockup, and a file nobody knows about is a
     // file nobody drags back in.
+    // encodeURIComponent, not an HTML escape: the path goes into an attribute
+    // and a filename may legally contain quotes. This cannot break out of it.
     toast('ok', 'Saved' + toastPath(homePath(r.output))
-      + (r.fit_file ? `<span class="path" style="margin-top:8px;color:var(--mute)">The fit is beside it as ${r.fit_file.split('/').pop()} — drop that back on this page to reuse these corners.</span>` : ''),
+      + (r.fit_file ? `<span class="path" style="margin-top:8px;color:var(--mute)">The fit is beside it as ${r.fit_file.split('/').pop()} — drop that back on this page to reuse these corners.</span>` : '')
+      + `<button type="button" class="act" data-reveal="${encodeURIComponent(r.output)}">Open folder</button>`,
       { ms: 9000, dismissible: true });
     const imp = $('#imp');
     imp.disabled = false; imp.textContent = 'Send to Claude';
@@ -4238,14 +4638,23 @@ $('#imp').onclick = async () => {
     $('#ver').textContent = 'v' + s.version + (s.build ? ' · ' + s.build : '');
     $('#ver').classList.toggle('dev', !!s.build);
   }
-  // Say up front where Save will put things. With --out-dir this is usually the
-  // project folder, and a designer should not have to press Save to find out.
-  toast('info', 'Fit the four edges, then Preview. Saves go to' + toastPath(homePath(s.out_dir || '')),
-        { ms: 9000, dismissible: true });
+  // There used to be a toast here on every load, saying "Fit the four edges,
+  // then Preview" and naming the save folder. Removed 20 Sep 2026 on request.
+  // It was the one message that fired when the user had done nothing, so it
+  // greeted every single session -- including the hundredth -- with an
+  // instruction and a long path, over the picker that had just opened by
+  // itself. The instruction is already in the fit pane's own status line, and
+  // the save folder is named in the toast that appears AFTER a save, which is
+  // the moment it is actually wanted. Nothing replaced it: no toast on load.
   const types = $('#types');
   for (const t of ['phone','tablet','laptop','desktop']){
     const b=document.createElement('button'); b.className='chip'; b.dataset.t=t; b.textContent=t;   /* Chip is one size in Figma (5:6): h28, 12px */
-    b.onclick=()=>{setType(t); applyPreset(); autoPreview();}; types.appendChild(b);
+    // Re-clicking the device you are ALREADY on used to re-apply its preset and
+    // silently overwrite a hand-set corner radius — phone → phone jumped 10.2%
+    // back to 15.4% (found 20 Sep). Picking the device you already have is a
+    // no-op; the preset dropdown is the deliberate way to re-apply one.
+    b.onclick=()=>{ if (st.type === t) return; setType(t); applyPreset(); autoPreview(); };
+    types.appendChild(b);
   }
   setLoupeMode(loupeMode);
   setStripHC(stripHC);