screengraft 0.65.0 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screengraft",
-  "version": "0.65.0",
+  "version": "0.66.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.65):** 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.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.
 
 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

@@ -159,7 +159,8 @@
     --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s9:48px;
     /* 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:180ms cubic-bezier(.2,0,0,1);
+    --t-dur:180ms;                 /* the duration alone, for delays */
+    --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
        one token because the failure mode here is a control that transitions its
@@ -194,11 +195,25 @@
      the part that should give; the actions are fixed-size and must not. */
   .topbar > *{min-width:0}
   .tb-chips{overflow:hidden}
-  .tb-actions{flex:none}
+  /* 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
+     belong together (272:1517 frames them); the toggle does not. */
+  .tb-actions{flex:none;display:flex;align-items:center;gap:var(--s4)}
+  .tb-save{display:flex;align-items:center;gap:var(--s2)}
   .tb-left{display:flex;align-items:center;gap:var(--s9)}
   .tb-chips{display:flex;align-items:center;gap:var(--s2)}
   .tb-arrow{color:var(--mute)}
-  .tb-actions{display:flex;align-items:center;gap:var(--s2)}
+  /* Icon-only, but NOT squeezed: Figma 272:1494 is a secondary button keeping
+     the base 12px side padding around a 16px icon, so 40x28. An earlier version
+     of this forced it to 28 square and read as a different species from the
+     buttons beside it. */
+  .iconbtn{flex:none;display:inline-flex;align-items:center;justify-content:center}
+  .iconbtn svg{display:block;width:16px;height:16px}
+  /* Two glyphs, one button (icons / sidebar-opened 272:1489, sidebar-closed
+     272:1463). Each shows the rail's CURRENT state in the width of its two
+     panels, while its chevron points the way the next click will move it. */
+  #railBtn .i-closed,.app.railoff #railBtn .i-open{display:none}
+  .app.railoff #railBtn .i-closed{display:block}
   /* Mona Sans is the brand face in Figma; it is not installed on a stock Mac,
      so it degrades to the system UI face rather than to a serif. */
   /* The wordmark ships WITH the plugin. Mona Sans is the brand face in Figma and
@@ -372,13 +387,6 @@
      column and read like a segmented *bar*. justify-self:start is what
      actually holds it to its content width. */
 
-  /* A stepper should look joined. */
-  /* Stepper (Figma 28:816). NOT a bespoke control: it is ordinary Default
-     buttons butted together, so every state — hover, pressed, disabled — is
-     the button's own. The previous version was borderless, transparent and
-     24px tall, which is exactly why +/- read as a different species from the
-     buttons beside them. Only the corner radii and the shared middle border
-     are special. */
   /* ------------------------------------------------------------------
      `hidden` must actually hide. THREE components have now needed this
      patched one at a time — .cvbar, #outImg/#outVid, and the format
@@ -394,16 +402,6 @@
      ------------------------------------------------------------------ */
   [hidden]{display:none !important}
 
-  .stepper{display:inline-flex;align-items:center}
-  .stepper button{border-radius:0}
-  .stepper button:first-child{border-top-left-radius:var(--r-sm);border-bottom-left-radius:var(--r-sm)}
-  .stepper button:last-child{border-top-right-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)}
-  /* One border between neighbours rather than two stacked. */
-  .stepper button + button{margin-left:calc(-1 * var(--bw))}
-  .stepper button:hover,.stepper button:focus-visible{position:relative;z-index:1}
-  /* The dock's stepper is Sm height but keeps 12px padding (Figma 8:31/8:33). */
-  .dock-step button{padding:0 var(--s3)}
-
   /* ------------------------------------------------------------------
      Segmented control (Figma 84:177). NOT a stepper: a stepper is ordinary
      buttons butted together, which is right for -/+ but wrong for a choice —
@@ -431,7 +429,11 @@
   .seg:active{border-color:var(--edge-mid)}
   /* The track carries the border and the elevation, so a segment is a label
      until it is selected: no border, no shadow, no lift on press. */
-  .seg button{height:24px;padding:0 11px;font-size:12px;border-radius:var(--r-xs);
+  /* 70px each (Figma 84:161, so 2+70+2+70+2 = 146): a two-way choice reads as
+     one control rather than two adjacent buttons, and equal halves are most of
+     what sells that. min-width rather than width so the ghost below still
+     governs if a label ever outgrows 70. */
+  .seg button{height:24px;min-width:70px;padding:0 11px;font-size:12px;border-radius:var(--r-xs);
               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}
@@ -451,11 +453,14 @@
   .seg button.sel{background:var(--raise);color:var(--ink);font-weight:600}
   .seg button.sel:hover{background:var(--raise-hi)}
   .seg button.sel:active{background:var(--raise-mid);transform:none}
-  /* A toggle in the strip head. On = the raised surface every selected thing
-     on this page has (the segmented thumb, the device chip), off = a label. */
-  .striphead button[aria-pressed],#dofBoth[aria-pressed]{background:transparent;border-color:transparent;box-shadow:none;color:var(--mute)}
-  .striphead button[aria-pressed]:hover,#dofBoth[aria-pressed]:hover{color:var(--ink)}
-  .striphead button[aria-pressed="true"],#dofBoth[aria-pressed="true"]{background:var(--raise);border-color:var(--edge);color:var(--ink);font-weight:600}
+  /* 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
+     is a Segment Button inside the strip's own zoom group now (Figma 8:28) and
+     takes .segbtn[aria-pressed="true"] instead. */
+  #dofBoth[aria-pressed]{background:transparent;border-color:transparent;box-shadow:none;color:var(--mute)}
+  #dofBoth[aria-pressed]:hover{color:var(--ink)}
+  #dofBoth[aria-pressed="true"]{background:var(--raise);border-color:var(--edge);color:var(--ink);font-weight:600}
   /* Input chip (Figma 5:14 / 5:20). Surface and shadow are declared here rather
    than inherited from the base button rule, so the filled state is explicit and
    the .is-empty override below has something definite to override.
@@ -551,18 +556,47 @@
      of this page where that is optional is a version where the check is
      optional. Two equal panes plus the rail. */
   .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 344px;
-         min-height:0;overflow:hidden}
+         min-height:0;overflow:hidden;
+         /* The COLUMN animates, not the rail's contents: the panes have to grow
+            into the space at exactly the rate the rail gives it up, and one
+            interpolating track does that for free. Engines that will not
+            interpolate grid-template-columns simply jump, which is the
+            behaviour this replaces. The global prefers-reduced-motion rule
+            near the top of this sheet switches it off. */
+         transition:grid-template-columns var(--t)}
   /* Below ~1100px two panes and a 344px rail no longer fit, and the page starts
      scrolling sideways — which the UI audit catches as a hard failure. Stack the
      panes instead of dropping one: losing the comparison is the one thing this
      layout exists to prevent, so the axis gives way before the pairing does.
      (Found by the audit after compare stopped being optional, at 742px.) */
+  /* Collapsed (the top bar's last button). The rail is 344px of window the two
+     panes are not getting, and nothing in it is needed while you are placing a
+     corner — so it folds away and they take the room. The state is remembered.
+     It also buys back the side-by-side comparison on a narrower window: the
+     rule below stacks the panes under 1100px because two of them PLUS a 344px
+     rail do not fit, and without the rail they do. */
+  /* A 0px THIRD track, not two tracks: the rail is still a grid item, and with
+     only two tracks declared it would be auto-placed into an implicit third
+     column and reappear at full width. */
+  .app.railoff .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 0px}
+  /* display:none cannot animate, and a 0-wide rail with overflow:auto still
+     holds focusable buttons — so visibility does the hiding, delayed to the end
+     of the slide on the way out and immediate on the way in. */
+  .rail{transition:visibility 0s}
+  .app.railoff .rail{visibility:hidden;transition:visibility 0s linear var(--t-dur)}
   @media (max-width:1100px){
     .stage{grid-template-columns:minmax(0,1fr) 344px;
            grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
     .stage > .pane:first-of-type{grid-column:1;grid-row:1}
     .stage > #outPane{grid-column:1;grid-row:2;border-top:1px solid var(--line)}
     .stage > .rail{grid-column:2;grid-row:1 / span 2}
+    /* Collapsed at this width the panes are stacked and each one is now the
+       FULL width rather than sharing it with the rail, which is the better
+       trade here: side by side they would be ~370px each, narrower than the
+       stacked pair, and the comparison is what the layout exists for. */
+    /* Two tracks again rather than one, for the same reason as above: this
+       media query places the rail in column 2 explicitly. */
+    .app.railoff .stage{grid-template-columns:minmax(0,1fr) 0px}
   }
   #types{flex-wrap:nowrap}
   /* The same omission one level down: rows constrained, column implicit.
@@ -720,7 +754,6 @@
                max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
                display:inline-flex;line-height:20px}
   #detSt:empty,#outSt:empty{display:none}
-  .lbl{color:var(--ink);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}
   /* overscroll-behavior:none on both wells (14 Sep 2026): a trackpad pinch is a
      wheel event we zoom on, but macOS still owns the gesture's elastic bounce.
      While the fingers were moving the browser let the well rubber-band past
@@ -997,7 +1030,11 @@
      tooltip hides the only copy of the explanation from anyone not using a
      mouse. */
   .info{flex:none;width:16px;height:16px;padding:0;border:none;
-        background:none;box-shadow:none;color:var(--edge-hi);cursor:help;line-height:0}
+        /* The file draws it at #3a3a40 = --raise-hi (64:375), well below the
+           --edge-hi it used to carry. It is an affordance, not information:
+           the sentence it holds is reachable by hover AND focus, and the
+           rule below lifts it to --mute the moment anyone goes looking. */
+        background:none;box-shadow:none;color:var(--raise-hi);cursor:help;line-height:0}
   .info svg{display:block;width:16px;height:16px}
   .info:hover, .info:focus-visible{color:var(--mute)}
   /* The tooltip is anchored to the section HEADER, not to the 16px icon, and
@@ -1120,13 +1157,20 @@
      silently re-deviated. */
   .hint{color:var(--faint);font-size:12px;margin:8px 0 0;line-height:1.5}
 
-  /* Figma 8:28: 198px tall — 16 padding, 28 header, 8 gap, 130 strip, 16
-     padding. It is a fixed band and must never absorb leftover height. */
-  .dock{background:var(--card);padding:var(--s4);display:grid;gap:var(--s2);
-        grid-template-rows:28px 130px;flex:none;
+  /* Figma 8:28, re-read 17 Sep: 146px tall — 8 padding, 130 strip, 8 padding.
+     It is a fixed band and must never absorb leftover height. The 28px header
+     that held the zoom stepper and the status line is gone; both float over
+     the strip now, and the 52px it cost is given back to the picture. */
+  .dock{background:var(--card);padding:var(--s2);display:grid;
+        grid-template-rows:130px;flex:none;
+        /* Anchors the two floating children. It must stay z-index:auto — a
+           stacking context here would cut their blend rings off from the strip
+           behind them, which is exactly what cost the video bar its stroke in
+           v0.65.0. position:relative alone creates no context. */
+        position:relative;
         /* The rule is an inset shadow, not a border, so it does not add a
-           pixel to the band's height: 16+28+8+130+16 = 198 exactly. */
-        box-shadow:inset 0 1px 0 var(--line), inset 0 2px 0 rgba(255,255,255,.04)}
+           pixel to the band's height: 8+130+8 = 146 exactly. */
+        box-shadow:inset 0 1px 0 var(--line)}
   .dock.hidden{display:none}
   /* Version badge. Bottom-right, fixed, and deliberately the quietest thing on
      screen: --faint is the captions token (measured 3.50:1, the 1.4.3 floor for
@@ -1156,9 +1200,24 @@
   #pointat.suggest{background:var(--raise-hi);border-color:var(--edge-hi);color:var(--ink)}
   #pointat.armed{background:var(--raise-highest);border-color:var(--edge-hi);color:var(--ink)}
   .scroller.pointing canvas#c{cursor:crosshair}
-  /* Figma 8:29 is a 28px header holding 24px buttons — the header does not
-     shrink to hug them. */
-  .striphead{display:flex;align-items:center;gap:8px;font-size:12px;min-height:28px}
+  /* Both of these float OVER the strip (Figma 8:28). Their offsets in the file
+     are from the STRIP's own top-left, and the strip starts at the dock's 8px
+     padding, so each one carries that 8 too: the group at 8+8 / 8+17, the pill
+     at 8+8 from the top and the right. An absolutely positioned child is laid
+     out against its ancestor's PADDING box, so these are measured from the
+     dock's own edges and the arithmetic is done here rather than by the box.
+     .stripzoom is a WRAPPER, not a group (Figma's Frame 271): two Button
+     Groups stacked with 8px between them, 32 wide and 104 tall in total. The
+     zoom pair is one group and Contrast is a group of its own — the same
+     separation the fit pane's left rail makes between its zoom group and Fit,
+     and the reason for it is the same: a group reads as one family of actions,
+     and magnification and tonal treatment are not one family. The file's 1x is
+     not ported; an edge view has no "actual size" to return to. */
+  .stripzoom{position:absolute;left:16px;top:25px;
+             display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
+  /* left:auto undoes .pillwrap's own centring, which is right for the two pane
+     pills and wrong for this one. */
+  .pillwrap.stripstat{top:16px;left:auto;right:16px;margin:0}
   canvas#strip{display:block;width:100%;height:130px;border-radius:var(--r-md);
         background:var(--well);box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 3px rgba(0,0,0,.5)}
   /* Floating mode: the loupe follows the edge instead of taking a permanent band. */
@@ -1349,8 +1408,11 @@
       <span class="seg" id="fmt" role="radiogroup" aria-label="Output format" hidden>
         <button class="sel" data-preset="web" data-label="Web" role="radio" aria-checked="true" title="H.264 at CRF 16 — near-visually-lossless, plays anywhere.">Web</button><button data-preset="prores" data-label="ProRes" role="radio" aria-checked="false" title="ProRes 422 HQ — bigger file, no chroma subsampling. For a case study or further editing.">ProRes</button>
       </span>
-      <button id="save" class="accent" disabled>Preview first</button>
-      <button id="imp" class="accent" disabled title="Send the saved file to Claude so it appears in the chat">Send to Claude</button>
+      <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>
+      </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>
   </header>
 
@@ -1454,7 +1516,7 @@
       </div>
     </section>
 
-    <aside class="rail">
+    <aside class="rail" id="rail">
       <div class="sect" id="secDevice" data-on="1">
         <div class="sect-top"><div class="sect-left"><h4>Device</h4></div></div>
         <div class="chips" id="types"></div>
@@ -1563,15 +1625,24 @@
   </div>
 
   <footer class="dock" id="dock">
-    <div class="striphead">
-      <span class="lbl">Edge view</span>
-      <span class="stepper dock-step"><button id="stripOut" aria-label="Zoom the edge view out">&minus;</button><button id="stripIn" aria-label="Zoom the edge view in">+</button></span>
-      <span class="sm" id="stripZ" style="color:var(--mute);font-variant-numeric:tabular-nums"></span>
-      <button class="sm" id="stripHC" aria-pressed="false" title="Stretch the strip's own tonal range to full contrast. For a dark screen on a dark frame, where the boundary is a few levels apart. The strip only — the composite is untouched.">Contrast</button>
-      <span class="spacer"></span>
-      <span class="sm" id="stripSt" style="color:var(--mute)"></span>
-    </div>
     <canvas id="strip" width="1280" height="130"></canvas>
+    <!-- Both float over the strip and come AFTER it in the DOM, so they paint
+         on top of it without a z-index — the same reason #outSt sits after
+         #outWrap. A z-index here would cost them their blend rings. -->
+    <div class="stripzoom">
+      <div class="bgroup" role="group" aria-label="Edge view magnification"><i class="ring" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i>
+        <button class="segbtn" id="stripIn" aria-label="Zoom the edge view in" title="Zoom the edge view in — a narrower band across the boundary"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--icon)" d="M8.5 7.5H12.5V8.5H8.5V12.5H7.5V8.5H3.5V7.5H7.5V3.5H8.5V7.5Z"/></svg></button>
+        <button class="segbtn" id="stripOut" aria-label="Zoom the edge view out" title="Zoom the edge view out — a wider band across the boundary"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--icon)" d="M12.5 8.5H3.5V7.5H12.5V8.5Z"/></svg></button>
+      </div>
+      <!-- Its own group (Figma 271:1337), a single segment, so it takes the
+           radius on all four corners from .bgroup > .segbtn:only-of-type.
+           Glyph is icons / contrast (272:1421), which replaced the half-disc
+           drawn here while the file still had the Fit icon on this button. -->
+      <div class="bgroup"><i class="ring" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i>
+        <button class="segbtn" id="stripHC" aria-pressed="false" aria-label="High contrast" title="Stretch the strip's own tonal range to full contrast. For a dark screen on a dark frame, where the boundary is a few levels apart. The strip only — the composite is untouched."><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M7 2.08398C4.16237 2.56013 2 5.02706 2 8C2 10.9729 4.16245 13.4388 7 13.915V14.9268C3.60787 14.4414 1 11.5264 1 8C1 4.4736 3.6078 1.55758 7 1.07227V2.08398Z"/><path fill="var(--icon)" d="M8 1C9.90691 1 11.635 1.76326 12.8975 3H13V3.10156C14.237 4.36408 15 6.09284 15 8C15 9.90691 14.2367 11.635 13 12.8975V13H12.8975C11.635 14.2367 9.90691 15 8 15V1ZM9 13.915C9.34419 13.8573 9.67834 13.7709 10 13.6572V2.3418C9.67838 2.22811 9.34414 2.14173 9 2.08398V13.915ZM11 13.1953C11.3584 12.9879 11.6934 12.7452 12 12.4707V3.52832C11.6935 3.25392 11.3584 3.01105 11 2.80371V13.1953ZM13 11.3164C13.6315 10.3663 14 9.22632 14 8C14 6.77339 13.6317 5.63287 13 4.68262V11.3164Z"/></svg></button>
+      </div>
+    </div>
+    <span class="pillwrap stripstat"><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="stripSt"></span></span>
   </footer>
 </div>
 
@@ -2784,7 +2855,12 @@ function paintRingsFallback(){
   if (!IS_WEBKIT || _ringsQueued) return;
   _ringsQueued = true;
   requestAnimationFrame(() => { _ringsQueued = false;
-    const panes = [[$('#c'), $('.pane')], [$('#outImg'), $('#outPane')]];
+    // The edge-view dock is a third surface carrying groups (Figma 8:28, 17
+    // Sep), and its backdrop is the strip canvas rather than either pane's
+    // picture. Without this pair the dock's zoom group and status pill get no
+    // ring colour at all in Safari: they sit outside both panes, so the loop
+    // never reached them and .noblend leaves the ring transparent.
+    const panes = [[$('#c'), $('.pane')], [$('#outImg'), $('#outPane')], [strip, $('#dock')]];
     for (const [src, pane] of panes){
       if (!src || !pane) continue;
       const ok = src.tagName === 'CANVAS' ? src.width > 0 : (!src.hidden && src.naturalWidth > 0);
@@ -3422,7 +3498,7 @@ function setStripHC(on){
   $('#stripHC').setAttribute('aria-pressed', on ? 'true' : 'false');
 }
 $('#stripHC').onclick = () => { setStripHC(!stripHC); drawStrip(); };
-function paintStrip(c, W, H, i, mode){
+function paintStrip(c, W, H, i, mode, padLeft = 9){
   c.setTransform(1,0,0,1,0,0);
   c.fillStyle = '#0c0c0b'; c.fillRect(0,0,W,H);
   const A = st.corners[i], B = st.corners[(i+1)%4];
@@ -3462,8 +3538,8 @@ function paintStrip(c, W, H, i, mode){
   const centre = st.corners.reduce((acc,cc)=>[acc[0]+cc[0]/4, acc[1]+cc[1]/4],[0,0]);
   const inwardIsDown = (n[0]*(centre[0]-A[0]) + n[1]*(centre[1]-A[1])) > 0;
   c.font = '600 11px system-ui'; c.textBaseline = 'middle';
-  casedText(c, 'screen', 9, inwardIsDown ? H/2 + 15 : H/2 - 15, 'rgba(255,255,255,.95)');
-  casedText(c, 'outside', 9, inwardIsDown ? H/2 - 15 : H/2 + 15, 'rgba(255,255,255,.62)');
+  casedText(c, 'screen', padLeft, inwardIsDown ? H/2 + 15 : H/2 - 15, 'rgba(255,255,255,.95)');
+  casedText(c, 'outside', padLeft, inwardIsDown ? H/2 - 15 : H/2 + 15, 'rgba(255,255,255,.62)');
 }
 function swingText(mode){
   if (mode === 'rotA') return 'the right end swings, pivot on the left';
@@ -3510,11 +3586,31 @@ function paintCorner(c, W, H, i){
   casedText(c, LBL[i], W/2 + 12, H/2 - 12, 'rgba(255,255,255,.95)');
 }
 const HANDLE_GAP_S = 4 + 1 + CASE_PAD/2 + 1;   // the same break the canvas leaves around a ring
+/* Figma 8:28 puts the strip's labels at x=59, which is exactly where the
+   floating zoom group ends (8 left + 32 wide) plus 19 of air. Two things stop
+   that 59 from being a literal here.
+   The canvas is a fixed 1280 wide stretched to whatever the band measures, so
+   a number in CSS pixels and a number in canvas pixels only agree at one window
+   width — hence the conversion.
+   And the gap is measured off the GROUP rather than assumed: the labels are
+   drawn from JS while the group is laid out by CSS, so anything that changes
+   the group's width (a longer icon set, a different radius, a zoom level) would
+   silently slide it under the text. Reading its real right edge means the air
+   between them is the design's 19px whatever the group does, and the design's
+   59 is the floor for the case where the group has not been laid out yet —
+   width 0 would otherwise put the labels at the strip's edge, UNDER the group.
+   The floating loupe has no group over it and keeps the default. */
+function stripLabelInset(W){
+  const r = strip.getBoundingClientRect();
+  if (!(r.width > 0)) return Math.round(59 * W / 1280);
+  const g = document.querySelector('.stripzoom');
+  const gRight = g ? g.getBoundingClientRect().right - r.left : 40;
+  return Math.round(Math.max(59, gRight + 19) * W / r.width);
+}
 function drawStrip(){
   const a = drag || hover || pick;
   const has = !!(st.corners && a && (a.kind === 'edge' || a.kind === 'corner') && img.naturalWidth);
   const corner = has && a.kind === 'corner';
-  $('#stripZ').textContent = '±' + stripHalf + 'px';
   if (loupeMode === 'dock'){
     $('#floatLoupe').classList.remove('on');
     const W = strip.width, H = strip.height;
@@ -3527,7 +3623,7 @@ function drawStrip(){
       paintCorner(sctx, W, H, a.i);
       $('#stripSt').textContent = `${LBL[a.i]} corner · ${(H/(2*cornerHalf())).toFixed(1)}× — the whole arc, and where each edge lands on it`;
     } else {
-      paintStrip(sctx, W, H, a.i, a.mode);
+      paintStrip(sctx, W, H, a.i, a.mode, stripLabelInset(W));
       $('#stripSt').textContent = `${EDGE_LBL[a.i]} edge · ±${stripHalf}px · ${(H/(2*stripHalf)).toFixed(1)}× across the boundary — ${swingText(a.mode)}`;
     }
   } else {
@@ -4200,6 +4296,51 @@ $('#imp').onclick = async () => {
     computeFit(); setCanvasZoom(wasFit ? fitScale : scale);
   });
 })();
+
+/* ---- the settings rail collapses -----------------------------------------
+   Last button in the top bar, after Send to Claude. Nothing in the rail is
+   needed while a corner is being placed, and it is 344px the two panes are not
+   getting — so it folds away and they take the room. Remembered across
+   sessions, like the loupe mode and the strip's contrast.
+   This block sits at the very end of the script deliberately: it calls into
+   drawStrip/syncOut on toggle, and those close over consts declared throughout
+   the file, so it must not run while any of them is still in its temporal dead
+   zone. */
+(() => {
+  const app = document.querySelector('.app'), btn = $('#railBtn'), stage = $('#stage');
+  let railWait;
+  const apply = (open, relayout) => {
+    app.classList.toggle('railoff', !open);
+    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+    btn.title = open ? 'Hide the settings rail' : 'Show the settings rail';
+    if (!relayout) return;
+    // The panes just changed width, which is a resize in everything but name —
+    // so do what the resize handler does, then repaint the things that are
+    // MEASURED rather than laid out and have all just moved: the strip's
+    // labels are positioned off the zoom group's box, and the blend rings'
+    // WebKit fallback samples pixels at coordinates taken from the panes.
+    // AFTER the slide, not during: measuring mid-transition fits the canvas to
+    // a width the pane is still leaving. The wait is read off the transition
+    // itself rather than written as a number, so it cannot drift from --t, and
+    // it collapses to ~nothing under prefers-reduced-motion, where the rule at
+    // the top of the sheet has already set the duration to zero.
+    clearTimeout(railWait);
+    const ms = (parseFloat(getComputedStyle(stage).transitionDuration) || 0) * 1000;
+    railWait = setTimeout(() => {
+      if (img.naturalWidth){
+        const wasFit = Math.abs(scale - fitScale) < 1e-6;
+        computeFit(); setCanvasZoom(wasFit ? fitScale : scale);
+      }
+      drawStrip(); syncOut(); refreshRings();
+    }, ms + 20);
+  };
+  btn.onclick = () => {
+    const open = app.classList.contains('railoff');   // toggling TO open
+    remember('rail', open ? '1' : '0');
+    apply(open, true);
+  };
+  apply(recall('rail', '1') === '1', false);
+})();
 </script>
 </body>
 </html>