From 36c9d59f669a53b963a6fdd87bebef8fdaf403d3 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 26 May 2026 13:35:41 -0400
Subject: [PATCH] Pixel editor: port the OS native colour picker over from the
 vector tools
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The vector tool panels (Pen / Shape / Text fill+stroke) already use
plain <input type="color"> and that works reliably — including its
built-in eyedropper, which is the part Adam actually wanted in the
pixel editor.

Replace the static <span> "current pick" preview in the pixel-editor
palette panel with an <input type="color"> styled to look like the
existing 32×32 swatch:

- Same flex / size / border / radius rules via .pixelPickerPreview.
- Padding: 0 and ::-webkit-color-swatch-wrapper / ::-webkit-color-
  swatch + ::-moz-color-swatch rules strip the browser chrome so
  the element renders as a flat colour tile.
- Click opens the native OS colour picker with its eyedropper —
  same behaviour as the vector tool panels.

The wiring that syncs the OS picker ↔ hex text ↔ in-app HSV picker
was already in place but had no DOM element to bind to; it now lights
up. pixelPickerCommit drops its dead getElementById('pixelPickerPreview')
lookup — the OS picker shows its colour natively from .value, set
on the line above.

The in-app HSV picker (SV square + hue strip) stays as the primary
input path, so anyone whose OS picker is broken (the Brave R=NaN
bug we hit earlier) still has a working route.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/index.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/index.html b/src/index.html
index be04f97..b205c1e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -917,7 +917,14 @@
     .pixelPickerPreview {
       flex: 0 0 auto; width: 32px; height: 32px;
       border: 1px solid var(--line); border-radius: 4px; background: #e43b44;
+      padding: 0; cursor: pointer;
     }
+    /* Strip the default chrome that browsers put around <input type="color">
+       so the element looks like the existing 32×32 swatch but still opens
+       the native OS picker (with its built-in eyedropper) on click. */
+    input.pixelPickerPreview::-webkit-color-swatch-wrapper { padding: 0; }
+    input.pixelPickerPreview::-webkit-color-swatch { border: 0; border-radius: 3px; }
+    input.pixelPickerPreview::-moz-color-swatch { border: 0; border-radius: 3px; }
     .screenPickerOverlay {
       position: fixed; inset: 0; z-index: 100000;
       background: rgba(8,10,16,.94);
@@ -3683,7 +3690,7 @@
                 <canvas id="pixelHueCanvas" width="160" height="14" title="Drag here to choose hue" aria-label="Hue picker"></canvas>
               </div>
               <div class="pixelPaletteEdit">
-                <span id="pixelPickerPreview" class="pixelPickerPreview" aria-label="Current pick"></span>
+                <input type="color" id="pixelColorPicker" class="pixelPickerPreview" title="Click to open the OS colour picker (eyedropper available inside)" value="#e43b44" aria-label="OS colour picker" />
                 <input type="text" id="pixelColorHex" value="#e43b44" maxlength="7" spellcheck="false" autocomplete="off" placeholder="#rrggbb" aria-label="Hex colour" />
                 <button type="button" id="pixelAddColorBtn" class="pixelBarBtn primary">+ Add</button>
               </div>
@@ -8547,8 +8554,6 @@
       }
       const pickEl = document.getElementById('pixelColorPicker');
       if (pickEl) pickEl.value = hex;
-      const previewEl = document.getElementById('pixelPickerPreview');
-      if (previewEl) previewEl.style.backgroundColor = `rgb(${r},${g},${b})`;
     }
     // Persistent screen-share for the screen eyedropper. Granted once per
     // pixel-edit session — every subsequent pick grabs a fresh frame from