From dfe2313ec5b93009fd5cff95aaf68237a719227c Mon Sep 17 00:00:00 2001
From: John Mizerek <mizerek@gmail.com>
Date: Tue, 10 Mar 2026 17:29:42 -0700
Subject: [PATCH] Add eyedropper color picker to brand color modal

Uses the native EyeDropper API (Chrome/Edge) to pick colors from
anywhere on screen. Button only shows in supported browsers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 portal/menu-builder.html | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/portal/menu-builder.html b/portal/menu-builder.html
index b053815..923ed2f 100644
--- a/portal/menu-builder.html
+++ b/portal/menu-builder.html
@@ -3647,6 +3647,7 @@
               <input type="text" id="brandColorHex" value="${currentColor}"
                 style="width: 100px; padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-family: monospace;"
                 pattern="^#[0-9A-Fa-f]{6}$" maxlength="7">
+              ${'EyeDropper' in window ? '<button type="button" id="eyedropperDark" style="width:40px;height:40px;border:1px solid var(--border);border-radius:4px;cursor:pointer;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px;" title="Pick from screen">&#128065;</button>' : ''}
               <div id="brandColorPreview" style="flex: 1; height: 40px; border-radius: 4px; background: linear-gradient(to bottom, ${currentColor}44, ${currentColor}00, ${currentColor}66);"></div>
             </div>
             <div style="display: flex; gap: 8px; flex-wrap: wrap;">
@@ -3671,6 +3672,7 @@
               <input type="text" id="brandColorLightHex" value="${currentLight}"
                 style="width: 100px; padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-family: monospace;"
                 placeholder="#F5F5F5" maxlength="7">
+              ${'EyeDropper' in window ? '<button type="button" id="eyedropperLight" style="width:40px;height:40px;border:1px solid var(--border);border-radius:4px;cursor:pointer;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px;" title="Pick from screen">&#128065;</button>' : ''}
               <div id="brandColorLightPreview" style="flex: 1; height: 40px; border-radius: 4px; border: 1px solid var(--border); background: ${currentLight || '#fff'};"></div>
               <button type="button" class="btn btn-secondary" style="font-size: 12px; padding: 6px 10px;" onclick="document.getElementById('brandColorLightHex').value='';document.getElementById('brandColorLightPreview').style.background='#fff';">Clear</button>
             </div>
@@ -3733,6 +3735,28 @@
             lightPreview.style.background = val;
           }
         });
+
+        // Eyedropper buttons (Chrome/Edge only)
+        if ('EyeDropper' in window) {
+          const pickColor = async (colorInput, hexInput, onPick) => {
+            try {
+              const dropper = new EyeDropper();
+              const result = await dropper.open();
+              const color = result.sRGBHex.toUpperCase();
+              colorInput.value = color;
+              hexInput.value = color;
+              if (onPick) onPick(color);
+            } catch (e) { /* user cancelled */ }
+          };
+
+          document.getElementById('eyedropperDark')?.addEventListener('click', () => {
+            pickColor(colorInput, hexInput, updatePreview);
+          });
+
+          document.getElementById('eyedropperLight')?.addEventListener('click', () => {
+            pickColor(lightInput, lightHex, (c) => { lightPreview.style.background = c; });
+          });
+        }
       },
 
       // Save brand color