Centre the scrub pill, unblur it, and stop the readout acting as a pick target

- Centre the pill over the value row rather than left-aligning it. This
  is safe now that it belongs to the row and is bounded by the row's
  width; the earlier left-anchoring was working around it being centred
  over a single field, which could push it past the swatch edge.
- Cancel the inherited text shadow on the pill. The swatch's content
  carries one for legibility against any colour, but on the pill — which
  already sits on an opaque capsule — it just read as blur.
- Shield the readout block from starting a screen pick. Clicking the
  labels, the colour name, or the gaps between them fell through to
  PickTarget and began a pick, which is easy to trigger by accident when
  the same block is also where you click to edit and drag to scrub. The
  shield is an NSView rather than a SwiftUI contentShape because
  PickTarget is itself an NSView in the same z-order, so it has to win
  AppKit's hit-testing, not just SwiftUI's. The value fields sit in front
  and keep receiving their own clicks.
- Show a hairline in the swatch's UI colour on hover, so the boundary of
  that non-picking region is discoverable rather than invisible.

Author: superhighfives

Pika/Views/EditableColorValue.swift

@@ -183,7 +183,7 @@ struct EditableColorValue: View {
         // Decorative overlay: it doesn't feed into the row's reported size, so it can appear and
         // change width without perturbing `FlowLayout`. Anchored to the row rather than to the
         // dragged field, so it's always in bounds and doesn't jump between components.
-        .overlay(alignment: .topLeading) {
+        .overlay(alignment: .top) {
             if let rowScrubPreview {
                 Text(rowScrubPreview)
                     .font(.system(size: 11, weight: .semibold, design: .rounded))
@@ -196,7 +196,10 @@ struct EditableColorValue: View {
                     .background(Capsule().fill(Color(uiColor).opacity(0.92)))
                     // Bounded by the row, and allowed to shrink rather than run past its edge:
                     // a long format (rgba with five decimals a channel) is wider than the swatch.
-                    .frame(maxWidth: effectiveWidth, alignment: .leading)
+                    .frame(maxWidth: effectiveWidth)
+                    // The swatch's content carries a text shadow for legibility on any colour;
+                    // inherited by the pill it just reads as blur, so cancel it here.
+                    .shadow(color: .clear, radius: 0, x: 0, y: 0)
                     .offset(y: -24)
                     .transition(.opacity.combined(with: .scale(scale: 0.9)))
                     .allowsHitTesting(false)

Pika/Views/EyedropperButton.swift

@@ -66,6 +66,22 @@ private struct PickTarget: NSViewRepresentable {
     }
 }
 
+/// Swallows clicks over the readout block so they don't fall through to `PickTarget` and start
+/// a screen pick. An AppKit view rather than a SwiftUI `contentShape`: `PickTarget` is itself an
+/// `NSView` sitting in the same z-order, so the thing shadowing it has to win AppKit's own
+/// hit-testing, not just SwiftUI's.
+private struct ClickShield: NSViewRepresentable {
+    func makeNSView(context _: Context) -> NSView { ShieldView() }
+    func updateNSView(_: NSView, context _: Context) {}
+
+    final class ShieldView: NSView {
+        // Absorb rather than forward: the readout's own fields sit in front of this and keep
+        // receiving their clicks, but the labels, colour name, and the gaps between them no
+        // longer act as a pick target.
+        override func mouseDown(with _: NSEvent) {}
+    }
+}
+
 struct EyedropperButton: View {
     @ObservedObject var eyedropper: Eyedropper
     /// Shared with the other swatch (owned by `ColorPickers`) rather than local: a click on
@@ -87,6 +103,8 @@ struct EyedropperButton: View {
     @State private var valueInvalid: Bool = false
     @State private var isPressed: Bool = false
     @State private var flashOpacity: Double = 0
+    /// Drives the hairline that shows where the non-picking readout block begins.
+    @State private var readoutHovered = false
 
     var body: some View {
         ZStack {
@@ -170,6 +188,18 @@ struct EyedropperButton: View {
                     .shadow(color: shadowColor.opacity(0.30), radius: 0, x: 0, y: 1)
                     .shadow(color: shadowColor.opacity(0.10), radius: 3, x: 0, y: 0)
             }
+            // Both of these sit outside the shadow above, so the hairline stays crisp.
+            .background(ClickShield())
+            .overlay(
+                RoundedRectangle(cornerRadius: 6.0, style: .continuous)
+                    .strokeBorder(
+                        eyedropper.color.getUIColor().opacity(readoutHovered ? 0.35 : 0),
+                        lineWidth: 1
+                    )
+                    .allowsHitTesting(false)
+            )
+            .onHover { readoutHovered = $0 }
+            .animation(.easeInOut(duration: 0.15), value: readoutHovered)
             .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
 
             VStack(spacing: 4.0) {