Colour pick mode: header/footer zone previews (pointer-events:none) are now pickable

Found by the real-editor e2e: picking over the header or its logo box returned the page colour behind it.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

craft/scripts/e2e-color-pick.mjs

@@ -41,6 +41,7 @@ const html = `<!doctype html><html><head><style>
   <div id="plain" class="box" style="background:#123456;color:#fedcba;border:3px solid #0a0b0c">plain + border</div>
   <div id="outer" class="box" style="background:#112233;color:#445566"><div id="nested" style="color:#778899"><span id="deep">nested transparent</span></div></div>
   <div id="alpha" class="box" style="background:rgba(18,52,86,.5);color:#111827">alpha</div>
+  <div data-zone-preview="header" style="pointer-events:none;user-select:none"><div id="zone" class="box" style="background:#15202c;color:#ffffff">header zone preview (pointer-events:none, like the editor's header/footer preview)</div></div>
   <p id="txt" style="color:#6b7280;margin:6px 0">muted text on frame bg</p>
 </div>
 <div id="chrome" style="padding:10px">editor chrome</div>
@@ -127,6 +128,11 @@ async function run(name, launcher, exe) {
   eq('text: text match', cand(res, 'text').match, { kind: 'token', ref: 'var(--wsb-muted)', label: 'Muted text' });
   eq('text: background match', cand(res, 'background').match, { kind: 'token', ref: 'var(--wsb-bg)', label: 'Background' });
 
+  // 7b. the editor's header/footer zone previews are pointer-events:none: they must still be pickable
+  ({ res } = await pick('zone'));
+  eq('zone preview: hex', res.hex, '#15202c');
+  eq('zone preview: text candidate', cand(res, 'text').hex, '#ffffff');
+
   // 8. none of those pick clicks reached the elements (no node selection)
   eq('clicks never reached targets', await page.evaluate(() => window.__leaks), []);
 

craft/src/utils/color-pick.ts

@@ -153,7 +153,9 @@ export function pickFromCanvas(opts: { frameSelector?: string; design: SiteDesig
   return new Promise<CanvasPickResult>((resolve) => {
     const style = document.createElement('style');
     style.setAttribute('data-wsb-pick', 'style');
-    style.textContent = `${selector},${selector} *{cursor:crosshair !important}`;
+    // The header/footer zone previews are pointer-events:none in the editor (so they never take clicks); while
+    // picking they must be hit-testable, or the header and its logo box could never be picked.
+    style.textContent = `${selector},${selector} *{cursor:crosshair !important}${selector} [data-zone-preview],${selector} [data-zone-preview] *{pointer-events:auto !important}`;
     const outline = document.createElement('div');
     outline.setAttribute('data-wsb-pick', 'outline');
     outline.style.cssText = 'position:fixed;pointer-events:none;z-index:2147483646;outline:2px solid #fff;box-shadow:0 0 0 2px #1d4ed8;display:none';