Make a scrub reversible, cancellable with Escape, and keep the pill on screen

Reversibility: each scrub frame was recomposing from `values`, which now
tracks the clamped colour, so every frame fed the previous frame's
clamping back in. That ratcheted the components you weren't dragging a
little further each frame, and dragging back where you came from no
longer returned the colour you started with. Recompose from a pristine
snapshot of the session's starting values instead — the displayed
numbers still track the real colour, but they no longer feed the source.

Escape: the tracking loop only watched for mouse events, so Escape did
nothing mid-drag (the field isn't focused during a scrub, so the normal
key path never saw it). Watch for it in the loop and route a cancelled
drag to the same revert path focused editing already uses.

Pill: centring it over a field near the swatch's left edge pushed it
past that edge, where it was clipped. Anchor it leading so it grows
rightward into the gutter the row already reserves.

Author: superhighfives

Pika/Views/EditableColorValue.swift

@@ -111,6 +111,12 @@ struct EditableColorValue: View {
     /// trackpad momentum — can tell "this is still my session" apart from "a different field
     /// has since taken over, or this session already ended and a new one started elsewhere."
     @State private var sessionOwner: Int?
+    /// The component values as they were when the session began, kept pristine for its whole
+    /// duration. Every scrub frame recomposes from *these* rather than from `values`, which now
+    /// tracks the clamped colour: feeding each frame's clamped result back in would make the drag
+    /// path-dependent, ratcheting the untouched components a little further every frame so
+    /// dragging back where you came from no longer returns the colour you started with.
+    @State private var sessionStartValues: [String] = []
 
     private var decomposed: DecomposedColor {
         format.decompose(eyedropper.color, style: style, in: colorSpace)
@@ -311,6 +317,7 @@ struct EditableColorValue: View {
     /// `finishEditing`/`abortEditingForExternalPick` have a consistent point to commit or revert to.
     private func startSession(layout: DecomposedColor) {
         isEditing = true
+        sessionStartValues = layout.values
         // Sized to the *widest possible* value for this format, not the current one: keeping
         // `frozenSize` in step with the live value (as it started out) only froze the font size,
         // not the wrap decision — a component can still change digit count as it's scrubbed
@@ -386,8 +393,10 @@ struct EditableColorValue: View {
     @discardableResult
     private func previewLiveScrub(index: Int, layout: DecomposedColor, value: Double) -> Double {
         guard index < layout.components.count else { return value }
-        let currentKey = FormatStyleKey(format: format, style: style, colorSpace: colorSpace)
-        var liveValues = (valuesKey == currentKey && values.count == layout.components.count) ? values : layout.values
+        // From the session's starting values, never the live (clamped) ones — see
+        // `sessionStartValues`. This is what makes a scrub reversible: drag chroma up into the
+        // clamped region and back down, and you land on exactly the colour you began with.
+        var liveValues = sessionStartValues.count == layout.components.count ? sessionStartValues : layout.values
         guard index < liveValues.count else { return value }
         liveValues[index] = ColorComponentField.formattedDragValue(value, kind: layout.components[index].kind)
         guard let color = format.recompose(liveValues, style: style, in: colorSpace) else { return value }
@@ -591,6 +600,10 @@ struct ColorComponentField: View {
             onDragBegin: onDragBegin,
             onDragEnd: onDragEnd,
             onScrubPreview: { scrubPreviewText = $0 },
+            onDragCancel: {
+                scrubPreviewText = nil
+                onCancel()
+            },
             onLiveValue: onLiveValue,
             onStep: isDraggable ? stepValue : nil
         )
@@ -610,7 +623,10 @@ struct ColorComponentField: View {
         )
         // Purely decorative: an `.overlay` doesn't feed back into this view's own reported size,
         // so the pill can appear, change text, and disappear without ever perturbing `FlowLayout`.
-        .overlay(alignment: .top) {
+        // Leading, not centred: centring a wide pill over a field near the swatch's left edge
+        // pushes it past that edge, where it's clipped (the value row starts hard against it).
+        // Growing rightward instead keeps it inside — the row reserves a trailing gutter anyway.
+        .overlay(alignment: .topLeading) {
             if let scrubPreviewText {
                 Text(scrubPreviewText)
                     .font(.system(size: 12, weight: .semibold, design: .rounded))

Pika/Views/ScrubTextField.swift

@@ -109,6 +109,8 @@ struct ScrubbableColorField: NSViewRepresentable {
     /// instead of the field's own text, which stays frozen for the whole drag (see
     /// `EditableColorValue.scrubPreviewText`).
     let onScrubPreview: (String?) -> Void
+    /// Escape pressed mid-drag — abandon the scrub and put the colour back how it was.
+    let onDragCancel: () -> Void
     /// Fired with the raw live value on every drag step, so the parent can preview the eyedropper
     /// colour without touching `text` (which stays frozen — see `onScrubPreview` above).
     let onLiveValue: (Double) -> Double
@@ -159,6 +161,10 @@ struct ScrubbableColorField: NSViewRepresentable {
         nsView.range = range
         nsView.kind = kind
         nsView.onDragBegin = onDragBegin
+        nsView.onDragCancel = { [weak nsView] in
+            nsView?.lastAchievedValue = nil
+            onDragCancel()
+        }
         // The field's own `stringValue` is deliberately never touched here — it stays frozen at
         // whatever it showed when the drag began, for `FlowLayout`'s benefit (see
         // `EditableColorValue.scrubPreviewText`). Only the floating pill sees the live value.
@@ -279,6 +285,8 @@ final class ScrubTextField: NSTextField {
     var onDragChanged: ((Double) -> Void)?
     /// Fires with the drag's final value once it ends.
     var onDragEnd: ((Double) -> Void)?
+    /// Fires instead of `onDragEnd` when the drag is abandoned with Escape.
+    var onDragCancel: (() -> Void)?
     /// Reports true/false as this field becomes/resigns first responder. Driven from these
     /// overrides rather than `NSTextFieldDelegate`'s controlTextDidBeginEditing/EndEditing —
     /// see the note at the `onFocusChange` assignment in `ScrubbableColorField.updateNSView`.
@@ -394,7 +402,7 @@ final class ScrubTextField: NSTextField {
         // of starting fresh.
         while true {
             guard let next = NSApp.nextEvent(
-                matching: [.leftMouseDragged, .leftMouseUp],
+                matching: [.leftMouseDragged, .leftMouseUp, .keyDown],
                 until: .distantFuture,
                 inMode: .eventTracking,
                 dequeue: true
@@ -404,6 +412,12 @@ final class ScrubTextField: NSTextField {
             }
 
             switch next.type {
+            case .keyDown:
+                // Escape abandons the scrub. Only meaningful once a drag is actually under way;
+                // otherwise let the key fall through to its normal handling.
+                guard didBeginDrag, next.keyCode == 53 else { continue }
+                cancelDrag()
+                return
             case .leftMouseDragged:
                 let translationX = next.locationInWindow.x - startPoint.x
                 if !didBeginDrag {
@@ -509,6 +523,13 @@ final class ScrubTextField: NSTextField {
         onDragChanged?(newValue)
     }
 
+    private func cancelDrag() {
+        dragAnchorValue = nil
+        lastDragValue = nil
+        NSCursor.arrow.set()
+        onDragCancel?()
+    }
+
     private func finishDrag() {
         dragAnchorValue = nil
         NSCursor.arrow.set()

PikaTests/EditableColorValueTests.swift

@@ -47,4 +47,50 @@ final class EditableColorValueTests: XCTestCase {
     func test_stableDecimalPlaces_moreThanFourDecimals_clampsDownToFour() {
         XCTAssertEqual(ColorComponentField.stableDecimalPlaces(for: "5.123456"), 4)
     }
+
+    // MARK: - Scrub reversibility / gamut clamping
+
+    /// Recomposing from a session's *starting* values is what makes a scrub reversible. Pushing
+    /// OKLCH chroma past the sRGB gamut clamps the colour, and decomposing that clamped colour
+    /// reports a different lightness and hue — so feeding each frame's result back in would drag
+    /// the untouched components along with it and you could never return to where you began.
+    func test_scrubFromPristineValues_isReversible() {
+        let start = ["40.68", "0.2173", "264.58"]
+        let format = ColorFormat.oklch
+        let space = NSColorSpace.sRGB
+
+        guard let original = format.recompose(start, style: .css, in: space) else {
+            return XCTFail("expected the starting values to recompose")
+        }
+
+        // Drag chroma far out of gamut, then back to exactly where it started.
+        var pushed = start
+        pushed[1] = "1.0"
+        guard let clamped = format.recompose(pushed, style: .css, in: space) else {
+            return XCTFail("expected the out-of-gamut values to recompose")
+        }
+        let clampedBack = format.decompose(clamped, style: .css, in: space)
+        XCTAssertNotEqual(clampedBack.values[0], start[0], "clamping should have moved lightness")
+        XCTAssertNotEqual(clampedBack.values[2], start[2], "clamping should have moved hue")
+
+        // Returning to the original chroma from the pristine starting values restores the colour.
+        guard let restored = format.recompose(start, style: .css, in: space) else {
+            return XCTFail("expected the restored values to recompose")
+        }
+        XCTAssertEqual(restored.toHex(in: space), original.toHex(in: space))
+
+        // Whereas carrying the clamped values forward does not.
+        var ratcheted = clampedBack.values
+        ratcheted[1] = start[1]
+        guard let notRestored = format.recompose(ratcheted, style: .css, in: space) else {
+            return XCTFail("expected the ratcheted values to recompose")
+        }
+        XCTAssertNotEqual(notRestored.toHex(in: space), original.toHex(in: space))
+    }
+
+    func test_naturalDecimalPlaces_matchesTheStepItCanResolve() {
+        XCTAssertEqual(ColorComponentField.naturalDecimalPlaces(forRange: 0 ... 360), 0)
+        XCTAssertEqual(ColorComponentField.naturalDecimalPlaces(forRange: 0 ... 100), 1)
+        XCTAssertEqual(ColorComponentField.naturalDecimalPlaces(forRange: 0 ... 1), 3)
+    }
 }