image-to-pixel 3.0.0 → 3.0.1

package/lib/core/palette/extract.js

@@ -1,69 +1,69 @@
-// Palette extraction: median cut on the image's colours, refined by a few k-means passes.
-// Deterministic (no randomness), so the same image always gives the same palette.
-
-import { toHex } from '../color.js';
-
-/**
- * @param {{ data: ArrayLike<number>, width: number, height: number }} img RGBA bytes
- * @param {number} count number of colours (2..256)
- * @param {{ maxSamples?: number, alphaThreshold?: number }} [opts]
- * @returns {string[]} '#rrggbb' colours sorted dark → light
- */
-export function extractPalette(img, count = 16, opts = {}) {
-  const { maxSamples = 40000, alphaThreshold = 0.5 } = opts;
-  const n = img.width * img.height;
-  const step = Math.max(1, Math.floor(n / maxSamples));
-  const pts = [];
-  for (let i = 0; i < n; i += step) {
-    const o = i * 4;
-    if (img.data[o + 3] < alphaThreshold * 255) continue;
-    pts.push([img.data[o], img.data[o + 1], img.data[o + 2]]);
-  }
-  if (!pts.length) return ['#000000', '#ffffff'].slice(0, Math.max(1, count));
-
-  // ---- median cut
-  let boxes = [pts];
-  while (boxes.length < count) {
-    let bi = -1, bestRange = -1, bestAxis = 0;
-    boxes.forEach((b, i) => {
-      if (b.length < 2) return;
-      for (let a = 0; a < 3; a++) {
-        let lo = 255, hi = 0;
-        for (const p of b) { if (p[a] < lo) lo = p[a]; if (p[a] > hi) hi = p[a]; }
-        // weight by population so big flat areas get split before tiny noisy ones
-        const r = (hi - lo) * Math.sqrt(b.length);
-        if (r > bestRange) { bestRange = r; bi = i; bestAxis = a; }
-      }
-    });
-    if (bi < 0 || bestRange <= 0) break;
-    const b = boxes[bi].slice().sort((p, q) => p[bestAxis] - q[bestAxis]);
-    const mid = b.length >> 1;
-    boxes.splice(bi, 1, b.slice(0, mid), b.slice(mid));
-  }
-  let centers = boxes.map(b => mean(b));
-
-  // ---- k-means refinement
-  for (let iter = 0; iter < 6; iter++) {
-    const sums = centers.map(() => [0, 0, 0, 0]);
-    for (const p of pts) {
-      let best = 0, bd = Infinity;
-      for (let c = 0; c < centers.length; c++) {
-        const dr = p[0] - centers[c][0], dg = p[1] - centers[c][1], db = p[2] - centers[c][2];
-        const d = dr * dr + dg * dg + db * db;
-        if (d < bd) { bd = d; best = c; }
-      }
-      const s = sums[best]; s[0] += p[0]; s[1] += p[1]; s[2] += p[2]; s[3]++;
-    }
-    centers = centers.map((c, i) => (sums[i][3] ? [sums[i][0] / sums[i][3], sums[i][1] / sums[i][3], sums[i][2] / sums[i][3]] : c));
-  }
-
-  const hexes = [...new Set(centers.map(c => toHex(c)))];
-  const lum = h => { const v = parseInt(h.slice(1), 16); return 0.2126 * (v >> 16) + 0.7152 * ((v >> 8) & 255) + 0.0722 * (v & 255); };
-  return hexes.sort((a, b) => lum(a) - lum(b));
-}
-
-function mean(list) {
-  let r = 0, g = 0, b = 0;
-  for (const p of list) { r += p[0]; g += p[1]; b += p[2]; }
-  return [r / list.length, g / list.length, b / list.length];
-}
+// Palette extraction: median cut on the image's colours, refined by a few k-means passes.
+// Deterministic (no randomness), so the same image always gives the same palette.
+
+import { toHex } from '../color.js';
+
+/**
+ * @param {{ data: ArrayLike<number>, width: number, height: number }} img RGBA bytes
+ * @param {number} count number of colours (2..256)
+ * @param {{ maxSamples?: number, alphaThreshold?: number }} [opts]
+ * @returns {string[]} '#rrggbb' colours sorted dark → light
+ */
+export function extractPalette(img, count = 16, opts = {}) {
+  const { maxSamples = 40000, alphaThreshold = 0.5 } = opts;
+  const n = img.width * img.height;
+  const step = Math.max(1, Math.floor(n / maxSamples));
+  const pts = [];
+  for (let i = 0; i < n; i += step) {
+    const o = i * 4;
+    if (img.data[o + 3] < alphaThreshold * 255) continue;
+    pts.push([img.data[o], img.data[o + 1], img.data[o + 2]]);
+  }
+  if (!pts.length) return ['#000000', '#ffffff'].slice(0, Math.max(1, count));
+
+  // ---- median cut
+  let boxes = [pts];
+  while (boxes.length < count) {
+    let bi = -1, bestRange = -1, bestAxis = 0;
+    boxes.forEach((b, i) => {
+      if (b.length < 2) return;
+      for (let a = 0; a < 3; a++) {
+        let lo = 255, hi = 0;
+        for (const p of b) { if (p[a] < lo) lo = p[a]; if (p[a] > hi) hi = p[a]; }
+        // weight by population so big flat areas get split before tiny noisy ones
+        const r = (hi - lo) * Math.sqrt(b.length);
+        if (r > bestRange) { bestRange = r; bi = i; bestAxis = a; }
+      }
+    });
+    if (bi < 0 || bestRange <= 0) break;
+    const b = boxes[bi].slice().sort((p, q) => p[bestAxis] - q[bestAxis]);
+    const mid = b.length >> 1;
+    boxes.splice(bi, 1, b.slice(0, mid), b.slice(mid));
+  }
+  let centers = boxes.map(b => mean(b));
+
+  // ---- k-means refinement
+  for (let iter = 0; iter < 6; iter++) {
+    const sums = centers.map(() => [0, 0, 0, 0]);
+    for (const p of pts) {
+      let best = 0, bd = Infinity;
+      for (let c = 0; c < centers.length; c++) {
+        const dr = p[0] - centers[c][0], dg = p[1] - centers[c][1], db = p[2] - centers[c][2];
+        const d = dr * dr + dg * dg + db * db;
+        if (d < bd) { bd = d; best = c; }
+      }
+      const s = sums[best]; s[0] += p[0]; s[1] += p[1]; s[2] += p[2]; s[3]++;
+    }
+    centers = centers.map((c, i) => (sums[i][3] ? [sums[i][0] / sums[i][3], sums[i][1] / sums[i][3], sums[i][2] / sums[i][3]] : c));
+  }
+
+  const hexes = [...new Set(centers.map(c => toHex(c)))];
+  const lum = h => { const v = parseInt(h.slice(1), 16); return 0.2126 * (v >> 16) + 0.7152 * ((v >> 8) & 255) + 0.0722 * (v & 255); };
+  return hexes.sort((a, b) => lum(a) - lum(b));
+}
+
+function mean(list) {
+  let r = 0, g = 0, b = 0;
+  for (const p of list) { r += p[0]; g += p[1]; b += p[2]; }
+  return [r / list.length, g / list.length, b / list.length];
+}

package/lib/core/palette/lospec.js

@@ -1,24 +1,24 @@
-// Lospec palette lookup by slug, e.g. 'rgbg-36' from https://lospec.com/palette-list/rgbg-36
-
-import { parseJSON } from './parse.js';
-
-/** Turn a slug or a full Lospec URL into a slug. */
-export function lospecSlug(input) {
-  const s = String(input || '').trim();
-  const m = /palette-list\/([a-z0-9-]+)/i.exec(s);
-  return (m ? m[1] : s).toLowerCase().replace(/\.(json|hex|gpl)$/, '');
-}
-
-/**
- * Fetch a palette from Lospec. Needs network access; the editor caches results.
- * @returns {Promise<{ name: string, colors: string[], author?: string, slug: string }>}
- */
-export async function fetchLospec(slugOrUrl, { fetch: f = globalThis.fetch } = {}) {
-  const slug = lospecSlug(slugOrUrl);
-  if (!/^[a-z0-9-]+$/.test(slug)) throw new Error('That does not look like a Lospec palette slug');
-  const res = await f(`https://lospec.com/palette-list/${slug}.json`);
-  if (!res.ok) throw new Error(`Lospec returned ${res.status} for "${slug}"`);
-  const json = await res.json();
-  const p = parseJSON(json);
-  return { name: json.name || slug, author: json.author || '', colors: p.colors, slug };
-}
+// Lospec palette lookup by slug, e.g. 'rgbg-36' from https://lospec.com/palette-list/rgbg-36
+
+import { parseJSON } from './parse.js';
+
+/** Turn a slug or a full Lospec URL into a slug. */
+export function lospecSlug(input) {
+  const s = String(input || '').trim();
+  const m = /palette-list\/([a-z0-9-]+)/i.exec(s);
+  return (m ? m[1] : s).toLowerCase().replace(/\.(json|hex|gpl)$/, '');
+}
+
+/**
+ * Fetch a palette from Lospec. Needs network access; the editor caches results.
+ * @returns {Promise<{ name: string, colors: string[], author?: string, slug: string }>}
+ */
+export async function fetchLospec(slugOrUrl, { fetch: f = globalThis.fetch } = {}) {
+  const slug = lospecSlug(slugOrUrl);
+  if (!/^[a-z0-9-]+$/.test(slug)) throw new Error('That does not look like a Lospec palette slug');
+  const res = await f(`https://lospec.com/palette-list/${slug}.json`);
+  if (!res.ok) throw new Error(`Lospec returned ${res.status} for "${slug}"`);
+  const json = await res.json();
+  const p = parseJSON(json);
+  return { name: json.name || slug, author: json.author || '', colors: p.colors, slug };
+}

package/lib/core/palette/parse.js

@@ -1,112 +1,112 @@
-// Palette file formats. Every parser returns { name, colors: ['#rrggbb', …] }.
-//
-//   .gpl   GIMP / Aseprite / Krita palette
-//   .hex   one hex colour per line (Lospec "HEX file")
-//   .txt   Paint.NET palette (AARRGGBB per line, ';' comments)
-//   .pal   JASC-PAL (Paint Shop Pro, Aseprite export)
-//   .json  Lospec JSON ({ name, colors: ['rrggbb'] }), this tool's own export, or a plain array
-//   anything else: every #hex / 6-digit token found in the text
-
-import { normHex } from '../color.js';
-
-const dedupe = list => [...new Set(list)];
-
-export function parseGPL(text) {
-  const lines = text.split(/\r?\n/);
-  if (!/^GIMP Palette/i.test(lines[0] || '')) throw new Error('Not a GIMP palette (missing "GIMP Palette" header)');
-  let name = '';
-  const colors = [];
-  for (const raw of lines.slice(1)) {
-    const line = raw.trim();
-    if (!line || line.startsWith('#')) continue;
-    const nm = /^Name:\s*(.*)$/i.exec(line);
-    if (nm) { name = nm[1].trim(); continue; }
-    if (/^Columns:/i.test(line)) continue;
-    const m = /^(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})/.exec(line);
-    if (m) colors.push(normHex([+m[1], +m[2], +m[3]]));
-  }
-  return { name, colors };
-}
-
-export function parseHexList(text) {
-  const colors = [];
-  for (const raw of text.split(/\r?\n/)) {
-    const line = raw.trim();
-    if (!line || line.startsWith(';') || line.startsWith('//')) continue;
-    const m = /^#?([0-9a-f]{6}|[0-9a-f]{8}|[0-9a-f]{3})\b/i.exec(line);
-    if (!m) continue;
-    // 8 digits in a .txt palette are AARRGGBB (Paint.NET); in a .hex file they are rare, treat the same
-    const h = m[1].length === 8 ? m[1].slice(2) : m[1];
-    colors.push(normHex(h));
-  }
-  return { name: '', colors };
-}
-
-export function parseJASC(text) {
-  const lines = text.split(/\r?\n/).map(l => l.trim());
-  if (lines[0] !== 'JASC-PAL') throw new Error('Not a JASC palette');
-  const n = parseInt(lines[2], 10) || 0;
-  const colors = [];
-  for (let i = 3; i < 3 + n && i < lines.length; i++) {
-    const m = /^(\d+)\s+(\d+)\s+(\d+)/.exec(lines[i]);
-    if (m) colors.push(normHex([+m[1], +m[2], +m[3]]));
-  }
-  return { name: '', colors };
-}
-
-export function parseJSON(text) {
-  const obj = typeof text === 'string' ? JSON.parse(text) : text;
-  const list = Array.isArray(obj) ? obj : (obj.colors || obj.palette || []);
-  const colors = list.map(c => (typeof c === 'object' && c ? (c.hex || c.color) : c)).filter(Boolean).map(normHex);
-  return { name: (!Array.isArray(obj) && obj.name) || '', colors };
-}
-
-/** Pull every hex-looking token out of free text (pasted CSS, a tweet, a Lospec page). */
-export function parseLoose(text) {
-  const colors = [];
-  const re = /#?\b([0-9a-f]{6})\b/gi;
-  let m;
-  while ((m = re.exec(text))) colors.push(normHex(m[1]));
-  return { name: '', colors };
-}
-
-/**
- * Parse palette text by file name / content sniffing.
- * @param {string} text
- * @param {string} [filename]
- * @returns {{ name: string, colors: string[] }}
- */
-export function parsePalette(text, filename = '') {
-  const ext = (/\.([a-z0-9]+)$/i.exec(filename) || [])[1]?.toLowerCase() || '';
-  const t = String(text).replace(/^/, '');
-  const trimmed = t.trim();
-  let out;
-  if (ext === 'gpl' || /^GIMP Palette/i.test(trimmed)) out = parseGPL(trimmed);
-  else if (ext === 'pal' || trimmed.startsWith('JASC-PAL')) out = parseJASC(trimmed);
-  else if (ext === 'json' || trimmed.startsWith('{') || trimmed.startsWith('[')) out = parseJSON(trimmed);
-  else if (ext === 'hex' || ext === 'txt') out = parseHexList(trimmed);
-  else {
-    out = parseHexList(trimmed);
-    if (!out.colors.length) out = parseLoose(trimmed);
-  }
-  out.colors = dedupe(out.colors).slice(0, 256);
-  if (!out.name && filename) out.name = filename.replace(/\.[^.]+$/, '').replace(/[-_]+/g, ' ');
-  if (!out.colors.length) throw new Error('No colours found in that palette');
-  return out;
-}
-
-/** Palette → .gpl text. */
-export function toGPL(name, colors) {
-  const rows = colors.map(c => {
-    const h = normHex(c);
-    const r = parseInt(h.slice(1, 3), 16), g = parseInt(h.slice(3, 5), 16), b = parseInt(h.slice(5, 7), 16);
-    return `${String(r).padStart(3)} ${String(g).padStart(3)} ${String(b).padStart(3)}\t${h.slice(1)}`;
-  });
-  return `GIMP Palette\nName: ${name || 'Palette'}\nColumns: 8\n#\n${rows.join('\n')}\n`;
-}
-
-/** Palette → .hex text. */
-export const toHexFile = colors => colors.map(c => normHex(c).slice(1)).join('\n') + '\n';
-
-/** Palette → JSON text (Lospec-compatible shape). */
-export const toPaletteJSON = (name, colors) => JSON.stringify({ name: name || 'Palette', colors: colors.map(c => normHex(c).slice(1)) }, null, 2);
+// Palette file formats. Every parser returns { name, colors: ['#rrggbb', …] }.
+//
+//   .gpl   GIMP / Aseprite / Krita palette
+//   .hex   one hex colour per line (Lospec "HEX file")
+//   .txt   Paint.NET palette (AARRGGBB per line, ';' comments)
+//   .pal   JASC-PAL (Paint Shop Pro, Aseprite export)
+//   .json  Lospec JSON ({ name, colors: ['rrggbb'] }), this tool's own export, or a plain array
+//   anything else: every #hex / 6-digit token found in the text
+
+import { normHex } from '../color.js';
+
+const dedupe = list => [...new Set(list)];
+
+export function parseGPL(text) {
+  const lines = text.split(/\r?\n/);
+  if (!/^GIMP Palette/i.test(lines[0] || '')) throw new Error('Not a GIMP palette (missing "GIMP Palette" header)');
+  let name = '';
+  const colors = [];
+  for (const raw of lines.slice(1)) {
+    const line = raw.trim();
+    if (!line || line.startsWith('#')) continue;
+    const nm = /^Name:\s*(.*)$/i.exec(line);
+    if (nm) { name = nm[1].trim(); continue; }
+    if (/^Columns:/i.test(line)) continue;
+    const m = /^(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})/.exec(line);
+    if (m) colors.push(normHex([+m[1], +m[2], +m[3]]));
+  }
+  return { name, colors };
+}
+
+export function parseHexList(text) {
+  const colors = [];
+  for (const raw of text.split(/\r?\n/)) {
+    const line = raw.trim();
+    if (!line || line.startsWith(';') || line.startsWith('//')) continue;
+    const m = /^#?([0-9a-f]{6}|[0-9a-f]{8}|[0-9a-f]{3})\b/i.exec(line);
+    if (!m) continue;
+    // 8 digits in a .txt palette are AARRGGBB (Paint.NET); in a .hex file they are rare, treat the same
+    const h = m[1].length === 8 ? m[1].slice(2) : m[1];
+    colors.push(normHex(h));
+  }
+  return { name: '', colors };
+}
+
+export function parseJASC(text) {
+  const lines = text.split(/\r?\n/).map(l => l.trim());
+  if (lines[0] !== 'JASC-PAL') throw new Error('Not a JASC palette');
+  const n = parseInt(lines[2], 10) || 0;
+  const colors = [];
+  for (let i = 3; i < 3 + n && i < lines.length; i++) {
+    const m = /^(\d+)\s+(\d+)\s+(\d+)/.exec(lines[i]);
+    if (m) colors.push(normHex([+m[1], +m[2], +m[3]]));
+  }
+  return { name: '', colors };
+}
+
+export function parseJSON(text) {
+  const obj = typeof text === 'string' ? JSON.parse(text) : text;
+  const list = Array.isArray(obj) ? obj : (obj.colors || obj.palette || []);
+  const colors = list.map(c => (typeof c === 'object' && c ? (c.hex || c.color) : c)).filter(Boolean).map(normHex);
+  return { name: (!Array.isArray(obj) && obj.name) || '', colors };
+}
+
+/** Pull every hex-looking token out of free text (pasted CSS, a tweet, a Lospec page). */
+export function parseLoose(text) {
+  const colors = [];
+  const re = /#?\b([0-9a-f]{6})\b/gi;
+  let m;
+  while ((m = re.exec(text))) colors.push(normHex(m[1]));
+  return { name: '', colors };
+}
+
+/**
+ * Parse palette text by file name / content sniffing.
+ * @param {string} text
+ * @param {string} [filename]
+ * @returns {{ name: string, colors: string[] }}
+ */
+export function parsePalette(text, filename = '') {
+  const ext = (/\.([a-z0-9]+)$/i.exec(filename) || [])[1]?.toLowerCase() || '';
+  const t = String(text).replace(/^/, '');
+  const trimmed = t.trim();
+  let out;
+  if (ext === 'gpl' || /^GIMP Palette/i.test(trimmed)) out = parseGPL(trimmed);
+  else if (ext === 'pal' || trimmed.startsWith('JASC-PAL')) out = parseJASC(trimmed);
+  else if (ext === 'json' || trimmed.startsWith('{') || trimmed.startsWith('[')) out = parseJSON(trimmed);
+  else if (ext === 'hex' || ext === 'txt') out = parseHexList(trimmed);
+  else {
+    out = parseHexList(trimmed);
+    if (!out.colors.length) out = parseLoose(trimmed);
+  }
+  out.colors = dedupe(out.colors).slice(0, 256);
+  if (!out.name && filename) out.name = filename.replace(/\.[^.]+$/, '').replace(/[-_]+/g, ' ');
+  if (!out.colors.length) throw new Error('No colours found in that palette');
+  return out;
+}
+
+/** Palette → .gpl text. */
+export function toGPL(name, colors) {
+  const rows = colors.map(c => {
+    const h = normHex(c);
+    const r = parseInt(h.slice(1, 3), 16), g = parseInt(h.slice(3, 5), 16), b = parseInt(h.slice(5, 7), 16);
+    return `${String(r).padStart(3)} ${String(g).padStart(3)} ${String(b).padStart(3)}\t${h.slice(1)}`;
+  });
+  return `GIMP Palette\nName: ${name || 'Palette'}\nColumns: 8\n#\n${rows.join('\n')}\n`;
+}
+
+/** Palette → .hex text. */
+export const toHexFile = colors => colors.map(c => normHex(c).slice(1)).join('\n') + '\n';
+
+/** Palette → JSON text (Lospec-compatible shape). */
+export const toPaletteJSON = (name, colors) => JSON.stringify({ name: name || 'Palette', colors: colors.map(c => normHex(c).slice(1)) }, null, 2);

package/lib/core/plan.js

@@ -1,58 +1,58 @@
-// A "plan" is everything both backends need, resolved once from settings + source size:
-// output size, palette bytes, threshold map, kernel, and the numbers derived from them.
-// Building it in one place keeps the CPU and GPU paths in lock-step.
-
-import { normalizeSettings, resolveSize, ditherKind, cropRect } from './settings.js';
-import { parseColor, paletteSpread } from './color.js';
-import { thresholdMap } from './dither/matrices.js';
-import { KERNELS, kernelSkew, waveCount } from './dither/kernels.js';
-import { extractPalette } from './palette/extract.js';
-import { resample, adjust } from './cpu/stages.js';
-
-/**
- * @param {object} settings
- * @param {{ width: number, height: number, data: ArrayLike<number> }} src RGBA source (only read for palette extraction)
- */
-export function makePlan(settings, src) {
-  const s = normalizeSettings(settings);
-  const crop = cropRect(src.width, src.height, s.frame);
-  const { width, height } = resolveSize(crop.w, crop.h, s.size);
-
-  let colors = s.palette.colors;
-  if (s.palette.source === 'extract') colors = extractFrom(src, s, width, height, crop);
-  const quantize = s.palette.source !== 'none' && colors.length > 0;
-  const palette = quantize ? colors.map(parseColor) : [];
-
-  let kind = quantize ? ditherKind(s.dither.method) : 'none';
-  if (s.dither.strength <= 0) kind = 'none';
-
-  const map = kind === 'ordered' ? thresholdMap(s.dither.method, s.dither.matrix) : null;
-  const kernel = kind === 'diffusion' ? KERNELS[s.dither.method] : null;
-  const skew = kernel ? kernelSkew(kernel) : 1;
-
-  return {
-    settings: s,
-    srcWidth: src.width, srcHeight: src.height,
-    crop,                                      // source pixels kept by the frame settings
-    width, height,
-    quantize, kind,
-    palette,                                   // [[r, g, b] bytes]
-    paletteHex: quantize ? colors.slice() : null,
-    distance: s.palette.distance === 'rgb' ? 1 : 0,
-    spread: quantize ? paletteSpread(palette) : 0,
-    map, kernel, skew,
-    waves: kernel ? waveCount(width, height, skew) : 0,
-    outline: { mode: s.outline.mode, color: parseColor(s.outline.color), corners: s.outline.corners },
-  };
-}
-
-function extractFrom(src, s, width, height, crop) {
-  // extract from what will actually be quantised: the resized + adjusted image (capped for speed)
-  const k = Math.min(1, 160 / Math.max(width, height));
-  const w = Math.max(1, Math.round(width * k)), h = Math.max(1, Math.round(height * k));
-  const prep = resample(src, w, h, 'box', crop);
-  adjust(prep, s.adjust);
-  const bytes = new Uint8ClampedArray(prep.length);
-  for (let i = 0; i < prep.length; i++) bytes[i] = Math.round(prep[i] * 255);
-  return extractPalette({ data: bytes, width: w, height: h }, s.palette.count, { alphaThreshold: Math.max(0.01, s.alpha.threshold) });
-}
+// A "plan" is everything both backends need, resolved once from settings + source size:
+// output size, palette bytes, threshold map, kernel, and the numbers derived from them.
+// Building it in one place keeps the CPU and GPU paths in lock-step.
+
+import { normalizeSettings, resolveSize, ditherKind, cropRect } from './settings.js';
+import { parseColor, paletteSpread } from './color.js';
+import { thresholdMap } from './dither/matrices.js';
+import { KERNELS, kernelSkew, waveCount } from './dither/kernels.js';
+import { extractPalette } from './palette/extract.js';
+import { resample, adjust } from './cpu/stages.js';
+
+/**
+ * @param {object} settings
+ * @param {{ width: number, height: number, data: ArrayLike<number> }} src RGBA source (only read for palette extraction)
+ */
+export function makePlan(settings, src) {
+  const s = normalizeSettings(settings);
+  const crop = cropRect(src.width, src.height, s.frame);
+  const { width, height } = resolveSize(crop.w, crop.h, s.size);
+
+  let colors = s.palette.colors;
+  if (s.palette.source === 'extract') colors = extractFrom(src, s, width, height, crop);
+  const quantize = s.palette.source !== 'none' && colors.length > 0;
+  const palette = quantize ? colors.map(parseColor) : [];
+
+  let kind = quantize ? ditherKind(s.dither.method) : 'none';
+  if (s.dither.strength <= 0) kind = 'none';
+
+  const map = kind === 'ordered' ? thresholdMap(s.dither.method, s.dither.matrix) : null;
+  const kernel = kind === 'diffusion' ? KERNELS[s.dither.method] : null;
+  const skew = kernel ? kernelSkew(kernel) : 1;
+
+  return {
+    settings: s,
+    srcWidth: src.width, srcHeight: src.height,
+    crop,                                      // source pixels kept by the frame settings
+    width, height,
+    quantize, kind,
+    palette,                                   // [[r, g, b] bytes]
+    paletteHex: quantize ? colors.slice() : null,
+    distance: s.palette.distance === 'rgb' ? 1 : 0,
+    spread: quantize ? paletteSpread(palette) : 0,
+    map, kernel, skew,
+    waves: kernel ? waveCount(width, height, skew) : 0,
+    outline: { mode: s.outline.mode, color: parseColor(s.outline.color), corners: s.outline.corners },
+  };
+}
+
+function extractFrom(src, s, width, height, crop) {
+  // extract from what will actually be quantised: the resized + adjusted image (capped for speed)
+  const k = Math.min(1, 160 / Math.max(width, height));
+  const w = Math.max(1, Math.round(width * k)), h = Math.max(1, Math.round(height * k));
+  const prep = resample(src, w, h, 'box', crop);
+  adjust(prep, s.adjust);
+  const bytes = new Uint8ClampedArray(prep.length);
+  for (let i = 0; i < prep.length; i++) bytes[i] = Math.round(prep[i] * 255);
+  return extractPalette({ data: bytes, width: w, height: h }, s.palette.count, { alphaThreshold: Math.max(0.01, s.alpha.threshold) });
+}

package/lib/core/presets.js

@@ -1,42 +1,42 @@
-// Built-in presets: partial settings applied on top of the defaults.
-
-export const PRESETS = [
-  {
-    id: 'balanced', name: 'Balanced', description: 'Endesga 32, Bayer 4×4. A good first look at most photos.',
-    settings: { size: { width: 96 }, palette: { source: 'builtin', id: 'endesga-32' }, dither: { method: 'bayer4', strength: 0.6 } },
-  },
-  {
-    id: 'game-boy', name: 'Game Boy', description: 'Four greens, 160 px wide, ordered dither.',
-    settings: { size: { width: 160 }, palette: { source: 'builtin', id: 'game-boy-dmg' }, dither: { method: 'bayer4', strength: 1 }, adjust: { contrast: 0.15 } },
-  },
-  {
-    id: 'pico-8', name: 'PICO-8', description: '128 px, the PICO-8 palette, blue-noise dither.',
-    settings: { size: { width: 128 }, palette: { source: 'builtin', id: 'pico-8' }, dither: { method: 'bluenoise', strength: 0.7 } },
-  },
-  {
-    id: 'one-bit', name: '1-bit Atkinson', description: 'Classic Mac look: two colours, Atkinson diffusion.',
-    settings: { size: { width: 192 }, palette: { source: 'builtin', id: '1-bit-monitor' }, dither: { method: 'atkinson', strength: 1 }, adjust: { contrast: 0.2 } },
-  },
-  {
-    id: 'faithful', name: 'Faithful colour', description: 'Palette extracted from the image, Floyd–Steinberg.',
-    settings: { size: { width: 128 }, palette: { source: 'extract', count: 24 }, dither: { method: 'floyd-steinberg', strength: 0.75 } },
-  },
-  {
-    id: 'sprite', name: 'Clean sprite', description: 'No dither, nearest resample, orphan cleanup and a dark outline. For art with transparency.',
-    settings: { size: { width: 48, resample: 'nearest' }, palette: { source: 'extract', count: 12 }, dither: { method: 'none' }, cleanup: { orphans: true }, outline: { mode: 'outer', color: '#1a1c2c' } },
-  },
-  {
-    id: 'cga', name: 'CGA', description: '16 hard colours with an 8×8 Bayer pattern.',
-    settings: { size: { width: 160 }, palette: { source: 'builtin', id: 'cga-16' }, dither: { method: 'bayer8', strength: 1 } },
-  },
-  {
-    id: 'newsprint', name: 'Newsprint', description: 'Grey clustered-dot halftone.',
-    settings: { size: { width: 220 }, palette: { source: 'builtin', id: 'grayscale-4' }, dither: { method: 'cluster8', strength: 1 }, adjust: { saturation: -1 } },
-  },
-  {
-    id: 'soft', name: 'Soft painterly', description: 'Resurrect 64 with Sierra Lite and a light smooth.',
-    settings: { size: { width: 112 }, palette: { source: 'builtin', id: 'resurrect-64' }, dither: { method: 'sierra-lite', strength: 0.6 }, cleanup: { smooth: true } },
-  },
-];
-
-export const getPreset = id => PRESETS.find(p => p.id === id) || null;
+// Built-in presets: partial settings applied on top of the defaults.
+
+export const PRESETS = [
+  {
+    id: 'balanced', name: 'Balanced', description: 'Endesga 32, Bayer 4×4. A good first look at most photos.',
+    settings: { size: { width: 96 }, palette: { source: 'builtin', id: 'endesga-32' }, dither: { method: 'bayer4', strength: 0.6 } },
+  },
+  {
+    id: 'game-boy', name: 'Game Boy', description: 'Four greens, 160 px wide, ordered dither.',
+    settings: { size: { width: 160 }, palette: { source: 'builtin', id: 'game-boy-dmg' }, dither: { method: 'bayer4', strength: 1 }, adjust: { contrast: 0.15 } },
+  },
+  {
+    id: 'pico-8', name: 'PICO-8', description: '128 px, the PICO-8 palette, blue-noise dither.',
+    settings: { size: { width: 128 }, palette: { source: 'builtin', id: 'pico-8' }, dither: { method: 'bluenoise', strength: 0.7 } },
+  },
+  {
+    id: 'one-bit', name: '1-bit Atkinson', description: 'Classic Mac look: two colours, Atkinson diffusion.',
+    settings: { size: { width: 192 }, palette: { source: 'builtin', id: '1-bit-monitor' }, dither: { method: 'atkinson', strength: 1 }, adjust: { contrast: 0.2 } },
+  },
+  {
+    id: 'faithful', name: 'Faithful colour', description: 'Palette extracted from the image, Floyd–Steinberg.',
+    settings: { size: { width: 128 }, palette: { source: 'extract', count: 24 }, dither: { method: 'floyd-steinberg', strength: 0.75 } },
+  },
+  {
+    id: 'sprite', name: 'Clean sprite', description: 'No dither, nearest resample, orphan cleanup and a dark outline. For art with transparency.',
+    settings: { size: { width: 48, resample: 'nearest' }, palette: { source: 'extract', count: 12 }, dither: { method: 'none' }, cleanup: { orphans: true }, outline: { mode: 'outer', color: '#1a1c2c' } },
+  },
+  {
+    id: 'cga', name: 'CGA', description: '16 hard colours with an 8×8 Bayer pattern.',
+    settings: { size: { width: 160 }, palette: { source: 'builtin', id: 'cga-16' }, dither: { method: 'bayer8', strength: 1 } },
+  },
+  {
+    id: 'newsprint', name: 'Newsprint', description: 'Grey clustered-dot halftone.',
+    settings: { size: { width: 220 }, palette: { source: 'builtin', id: 'grayscale-4' }, dither: { method: 'cluster8', strength: 1 }, adjust: { saturation: -1 } },
+  },
+  {
+    id: 'soft', name: 'Soft painterly', description: 'Resurrect 64 with Sierra Lite and a light smooth.',
+    settings: { size: { width: 112 }, palette: { source: 'builtin', id: 'resurrect-64' }, dither: { method: 'sierra-lite', strength: 0.6 }, cleanup: { smooth: true } },
+  },
+];
+
+export const getPreset = id => PRESETS.find(p => p.id === id) || null;