diff --git a/craft/scripts/e2e-image-sample.mjs b/craft/scripts/e2e-image-sample.mjs
new file mode 100644
index 0000000..c239cdb
--- /dev/null
+++ b/craft/scripts/e2e-image-sample.mjs
@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+/**
+ * Real-browser check (headless Firefox AND Chromium) for the colour picker's pixel reading:
+ * src/utils/image-sample.ts + palette-extract.ts. jsdom has no canvas, so this bundles them with
+ * esbuild, serves a generated PNG from one origin (the page's own) and from a second port
+ * (cross-origin), and asserts exact pixel colours, the extracted palette, and the cross-origin
+ * failure message.
+ *
+ *   node scripts/e2e-image-sample.mjs        (CHROMIUM_PATH / FIREFOX_PATH override binaries)
+ */
+import { chromium, firefox } from '@playwright/test';
+import { build as esbuild } from 'esbuild';
+import http from 'node:http';
+import zlib from 'node:zlib';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const W = 1024, H = 512;
+const RED = [200, 30, 30], BLUE = [20, 20, 200], GREEN = [0, 160, 0];
+
+// ---- tiny PNG encoder (RGBA, filter 0)
+function crc32(buf) {
+  let c, crc = ~0;
+  for (let n = 0; n < buf.length; n++) { c = (crc ^ buf[n]) & 255; for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1; crc = (crc >>> 8) ^ c; }
+  return ~crc >>> 0;
+}
+function chunk(type, data) {
+  const len = Buffer.alloc(4); len.writeUInt32BE(data.length);
+  const td = Buffer.concat([Buffer.from(type), data]);
+  const crc = Buffer.alloc(4); crc.writeUInt32BE(crc32(td));
+  return Buffer.concat([len, td, crc]);
+}
+function png() {
+  const raw = Buffer.alloc((W * 4 + 1) * H);
+  for (let y = 0; y < H; y++) {
+    raw[y * (W * 4 + 1)] = 0;
+    for (let x = 0; x < W; x++) {
+      const c = x < W / 2 ? RED : y < H / 2 ? BLUE : GREEN;
+      raw.set([...c, 255], y * (W * 4 + 1) + 1 + x * 4);
+    }
+  }
+  const ihdr = Buffer.alloc(13); ihdr.writeUInt32BE(W, 0); ihdr.writeUInt32BE(H, 4); ihdr[8] = 8; ihdr[9] = 6;
+  return Buffer.concat([Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]), chunk('IHDR', ihdr), chunk('IDAT', zlib.deflateSync(raw)), chunk('IEND', Buffer.alloc(0))]);
+}
+const PNG = png();
+
+// ---- bundle the units under test
+const bundle = await esbuild({
+  stdin: {
+    contents: "export * from './src/utils/image-sample'; export * from './src/utils/palette-extract';",
+    resolveDir: root, loader: 'ts',
+  },
+  bundle: true, write: false, format: 'iife', globalName: 'T', platform: 'browser', logLevel: 'error',
+});
+const BUNDLE = bundle.outputFiles[0].text;
+
+// ---- servers: page + same-origin image on A; image only on B (cross-origin)
+const serve = (withPage) => http.createServer((req, res) => {
+  if (withPage && req.url === '/page.html') { res.setHeader('content-type', 'text/html'); return res.end('<!doctype html><title>t</title><body></body>'); }
+  if (withPage && req.url === '/bundle.js') { res.setHeader('content-type', 'text/javascript'); return res.end(BUNDLE); }
+  if (req.url.startsWith('/img.png')) { res.setHeader('content-type', 'image/png'); return res.end(PNG); }
+  res.statusCode = 404; res.end();
+});
+const A = serve(true), B = serve(false);
+await Promise.all([new Promise((r) => A.listen(0, '127.0.0.1', r)), new Promise((r) => B.listen(0, '127.0.0.1', r))]);
+const pa = A.address().port, pb = B.address().port;
+
+let failures = 0;
+const check = (name, ok, extra = '') => { console.log(`${ok ? 'PASS' : 'FAIL'}  ${name}${extra ? '  ' + extra : ''}`); if (!ok) failures++; };
+const hex = (c) => '#' + c.map((n) => n.toString(16).padStart(2, '0')).join('');
+
+const targets = [
+  ['chromium', chromium, process.env.CHROMIUM_PATH],
+  ['firefox', firefox, process.env.FIREFOX_PATH],
+].filter(([n]) => !process.env.ONLY || process.env.ONLY === n);
+
+for (const [name, type, exe] of targets) {
+  console.log(`--- ${name}`);
+  const browser = await type.launch({ headless: true, ...(exe ? { executablePath: exe } : {}) });
+  const page = await browser.newPage();
+  await page.goto(`http://127.0.0.1:${pa}/page.html`);
+  await page.addScriptTag({ url: `/bundle.js` });
+  const r = await page.evaluate(async ({ pa, pb }) => {
+    const out = {};
+    const same = await T.loadImageForSampling(`/img.png`);
+    out.sameOk = same.ok;
+    if (same.ok) {
+      out.size = [same.width, same.height];
+      const d = same.imageData;
+      out.red = T.sampleAt(d, 10, 10);
+      out.blue = T.sampleAt(d, 400, 10);
+      out.green = T.sampleAt(d, 400, 200);
+      out.palette = T.extractPalette(d.data);
+      const c = document.createElement('canvas');
+      same.draw(c);
+      out.drawn = [c.width, c.height];
+    } else out.sameMsg = same.message;
+    const abs = await T.loadImageForSampling(`http://127.0.0.1:${pa}/img.png`);
+    out.absSameOk = abs.ok;
+    const cross = await T.loadImageForSampling(`http://127.0.0.1:${pb}/img.png`);
+    out.cross = cross;
+    const bad = await T.loadImageForSampling(`/missing.png`);
+    out.bad = bad;
+    return out;
+  }, { pa, pb });
+  check('same-origin image loads', r.sameOk, r.sameMsg || '');
+  check('downscaled to 512x256', JSON.stringify(r.size) === '[512,256]', JSON.stringify(r.size));
+  check('draw() sizes canvas', JSON.stringify(r.drawn) === '[512,256]');
+  check('pixel red exact', r.red === hex(RED), r.red);
+  check('pixel blue exact', r.blue === hex(BLUE), r.blue);
+  check('pixel green exact', r.green === hex(GREEN), r.green);
+  check('palette = red, blue, green in population order (red 50%, blue/green 25%)',
+    r.palette[0] === hex(RED) && r.palette.length === 3 && r.palette.includes(hex(BLUE)) && r.palette.includes(hex(GREEN)), JSON.stringify(r.palette));
+  check('absolute same-origin URL loads', r.absSameOk);
+  check('cross-origin refused', r.cross.ok === false && r.cross.reason === 'cross-origin');
+  check('cross-origin message exact', r.cross.message === 'That image comes from another website, so the browser will not let the builder read its colours. Upload it to this site first, then pick from the uploaded copy.');
+  check('missing image -> error', r.bad.ok === false && r.bad.reason === 'error', r.bad.message);
+  await browser.close();
+}
+A.close(); B.close();
+console.log(failures ? `\n${failures} FAILED` : '\nall passed');
+process.exit(failures ? 1 : 0);