const FA_SYMBOL_FONT_URL =

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.ttf";

const symbolSets = [

{

id: "fa-geometric",

name: "FA Geometric",

fontFamily: '"Font Awesome 6 Free", "Segoe UI Symbol", sans-serif',

fontWeight: 900,

pdfFontUrl: FA_SYMBOL_FONT_URL,

symbols: [

"\uf111",

"\uf192",

"\uf042",

"\uf1ce",

"\uf0c8",

"\uf45c",

"\uf14a",

"\uf146",

"\uf0fe",

"\uf2d3",

"\uf219",

"\uf071",

"\u002a",

"\u002b",

"\uf068",

"\uf00d",

"\uf00c",

"\u003d",

"\uf04b",

"\uf04c",

"\uf04d",

"\uf715",

"\u0025",

"\uf005",

"\uf004",

"\u{e0b7}",

"\uf0d8",

"\uf0d7",

"\uf0d9",

"\uf0da",

"\uf139",

"\uf13a",

],

},

{

id: "fa-direction",

name: "FA Direction",

fontFamily: '"Font Awesome 6 Free", "Segoe UI Symbol", sans-serif',

fontWeight: 900,

pdfFontUrl: FA_SYMBOL_FONT_URL,

symbols: [

"\uf062",

"\uf063",

"\uf060",

"\uf061",

"\uf148",

"\uf149",

"\uf021",

"\uf07d",

"\uf07e",

"\uf362",

"\uf0b2",

"\uf3bf",

"\uf3be",

"\uf124",

"\uf601",

"\uf14e",

"\uf4d7",

"\uf276",

"\uf3c5",

"\uf04e",

"\uf04a",

"\uf04b",

"\uf04c",

"\uf04d",

"\uf01e",

"\uf0e2",

"\uf065",

"\uf066",

"\uf106",

"\uf107",

"\uf104",

"\uf105",

],

},

{

id: "fa-ui",

name: "FA UI Essentials",

fontFamily: '"Font Awesome 6 Free", "Segoe UI Symbol", sans-serif',

fontWeight: 900,

pdfFontUrl: FA_SYMBOL_FONT_URL,

symbols: [

"\uf0f3",

"\uf02e",

"\uf02d",

"\uf133",

"\uf030",

"\uf328",

"\uf017",

"\uf0c2",

"\uf0e0",

"\uf06e",

"\uf070",

"\uf0b0",

"\uf024",

"\uf07b",

"\uf013",

"\uf0ac",

"\uf004",

"\uf084",

"\uf023",

"\uf09c",

"\uf002",

"\uf27a",

"\uf001",

"\uf1d8",

"\uf005",

"\uf02b",

"\uf164",

"\uf007",

"\uf0ad",

"\uf0e7",

"\uf0eb",

"\uf5ad",

],

},

{

id: "fa-nature",

name: "FA Nature & Weather",

fontFamily: '"Font Awesome 6 Free", "Segoe UI Symbol", sans-serif',

fontWeight: 900,

pdfFontUrl: FA_SYMBOL_FONT_URL,

symbols: [

"\uf185",

"\uf186",

"\uf0c2",

"\uf73d",

"\uf6c4",

"\uf2dc",

"\uf72e",

"\uf75b",

"\uf0e9",

"\uf06c",

"\uf1bb",

"\uf4d8",

"\uf52d",

"\uf6fc",

"\uf773",

"\uf043",

"\uf06d",

"\uf1b0",

"\uf578",

"\uf188",

"\uf6be",

"\uf6d3",

"\uf4ba",

"\uf6f0",

"\uf6ed",

"\uf52e",

"\uf700",

"\uf717",

"\uf5d1",

"\uf787",

"\uf816",

"\uf094",

],

},

{

id: "fa-mixed",

name: "FA Mixed (High Contrast)",

fontFamily: '"Font Awesome 6 Free", "Segoe UI Symbol", sans-serif',

fontWeight: 900,

pdfFontUrl: FA_SYMBOL_FONT_URL,

symbols: [

"\uf0c2",

"\uf004",

"\uf276",

"\uf0b2",

"\uf186",

"\uf124",

"\uf084",

"\u{e0b7}",

"\uf0e0",

"\uf021",

"\uf0f3",

"\uf4d7",

"\uf06d",

"\uf362",

"\uf185",

"\uf06e",

"\uf2dc",

"\uf0c8",

"\uf065",

"\uf017",

"\uf219",

"\uf030",

"\uf013",

"\uf071",

"\uf043",

"\uf005",

"\uf06c",

"\uf1b0",

"\uf14e",

"\uf0eb",

"\uf111",

"\u002a",

],

},

];

const isValidSymbolSetId = (symbolSetId) =>

symbolSets.some((symbolSet) => symbolSet.id === symbolSetId);

const getValidSymbolSetId = (symbolSetId) =>

isValidSymbolSetId(symbolSetId) ? symbolSetId : defaultSymbolSetId;

const fabricCatalog = [

{

id: "aida",

name: "Aida",

counts: [12, 14, 16, 18, 20, 22, 24, 26, 28],

},

{

id: "evenweave",

name: "Evenweave",

counts: [20, 22, 24, 26, 28, 32, 36],

},

{

id: "linen",

name: "Linen",

counts: [20, 22, 24, 26, 28, 32, 36],

},

];

const defaultPaletteId = typeof dmcPalette !== "undefined" ? dmcPalette.id : "";

const defaultSymbolSetId = "fa-mixed";

const buildAnchorPalette = (palette, conversionMap) => {

if (!palette || !conversionMap) return null;

const colors = [];

const seen = new Set();

palette.colors.forEach((color) => {

const anchors = conversionMap[color.code];

if (!anchors || !anchors.length) return;

anchors.forEach((anchorCode) => {

if (!anchorCode || seen.has(anchorCode)) return;

seen.add(anchorCode);

colors.push({

code: anchorCode,

name: color.name,

hex: color.hex,

});

});

});

return {

id: "anchor",

name: "Anchor",

brand: "Anchor",

source: "https://www.cyberstitchers.com/stitching_tools/floss_conversion_charts/dmc_to_anchor",

colors,

};

};

const anchorPalette =

typeof dmcPalette !== "undefined" && typeof dmcToAnchorMap !== "undefined"

? buildAnchorPalette(dmcPalette, dmcToAnchorMap)

: null;

const paletteCatalog = [];

if (typeof dmcPalette !== "undefined") {

paletteCatalog.push(dmcPalette);

}

if (anchorPalette) {

paletteCatalog.push(anchorPalette);

}

const STITCH_SIZE = 10;

const imageExtensionsByMimeType = {

"image/png": "png",

"image/jpeg": "jpg",

"image/jpg": "jpg",

"image/webp": "webp",

"image/gif": "gif",

"image/bmp": "bmp",

"image/avif": "avif",

"image/svg+xml": "svg",

};

const imageMimeTypesByExtension = {

png: "image/png",

jpg: "image/jpeg",

jpeg: "image/jpeg",

webp: "image/webp",

gif: "image/gif",

bmp: "image/bmp",

avif: "image/avif",

svg: "image/svg+xml",

};

const state = {

image: null,

imageUrl: null,

imageWidth: 0,

imageHeight: 0,

aspectRatio: 1,

gridWidth: 80,

gridHeight: 80,

colorLimit: 10,

ditherStrength: 0,

brightness: 0,

contrast: 0,

paletteId: defaultPaletteId,

blurStrength: 0,

smoothing: false,

accentSlots: 2,

symbolSetId: defaultSymbolSetId,

fabricType: "aida",

fabricCount: 14,

fabricUnit: "inch",

patternMode: "color-symbols",

hiddenColors: [],

manageMode: "pick",

manageColorIndex: null,

managePainting: false,

manageModalOpen: false,

manageModalMaximized: false,

managePendingColor: null,

manageHistory: {

undo: [],

redo: [],

batch: null,

},

paletteSearchMode: "replace",

projectMeta: null,

mappedPixels: null,

mappedPalette: [],

counts: [],

symbols: [],

activeReplaceIndex: null,

activeSymbolIndex: null,

symbolPickerOpen: false,

};

const elements = {

imageUpload: document.getElementById("imageUpload"),

paletteSelect: document.getElementById("paletteSelect"),

symbolSet: document.getElementById("symbolSet"),

colorLimit: document.getElementById("colorLimit"),

colorLimitValue: document.getElementById("colorLimitValue"),

ditherStrength: document.getElementById("ditherStrength"),

ditherStrengthValue: document.getElementById("ditherStrengthValue"),

brightness: document.getElementById("brightness"),

brightnessValue: document.getElementById("brightnessValue"),

contrast: document.getElementById("contrast"),

contrastValue: document.getElementById("contrastValue"),

gridWidth: document.getElementById("gridWidth"),

gridHeight: document.getElementById("gridHeight"),

lockAspect: document.getElementById("lockAspect"),

useOriginal: document.getElementById("useOriginal"),

blurStrength: document.getElementById("blurStrength"),

blurValue: document.getElementById("blurValue"),

smoothing: document.getElementById("smoothing"),

accentSlots: document.getElementById("accentSlots"),

fabricType: document.getElementById("fabricType"),

fabricCount: document.getElementById("fabricCount"),

fabricUnit: document.getElementById("fabricUnit"),

patternMode: document.getElementById("patternMode"),

pdfSplit: document.getElementById("pdfSplit"),

previewZoom: document.getElementById("previewZoom"),

previewZoomValue: document.getElementById("previewZoomValue"),

managePick: document.getElementById("managePick"),

managePaint: document.getElementById("managePaint"),

manageBucket: document.getElementById("manageBucket"),

manageSelect: document.getElementById("manageSelect"),

manageUndo: document.getElementById("manageUndo"),

manageRedo: document.getElementById("manageRedo"),

managePendingBadge: document.getElementById("managePendingBadge"),

manageSwatch: document.getElementById("manageSwatch"),

manageColorName: document.getElementById("manageColorName"),

manageColorCode: document.getElementById("manageColorCode"),

sizeCm: document.getElementById("sizeCm"),

sizeIn: document.getElementById("sizeIn"),

refresh: document.getElementById("refresh"),

printPdf: document.getElementById("printPdf"),

saveProject: document.getElementById("saveProject"),

loadProject: document.getElementById("loadProject"),

projectFile: document.getElementById("projectFile"),

openManage: document.getElementById("openManage"),

sourceCanvas: document.getElementById("sourceCanvas"),

outputCanvas: document.getElementById("outputCanvas"),

manageCanvas: document.getElementById("manageCanvas"),

legendList: document.getElementById("legendList"),

randomizeSymbols: document.getElementById("randomizeSymbols"),

mergeDuplicateColors: document.getElementById("mergeDuplicateColors"),

symbolPicker: document.getElementById("symbolPicker"),

symbolPickerList: document.getElementById("symbolPickerList"),

symbolPickerClose: document.getElementById("symbolPickerClose"),

status: document.getElementById("status"),

paletteSearchModal: document.getElementById("paletteSearchModal"),

paletteSearchInput: document.getElementById("paletteSearchInput"),

paletteSearchResults: document.getElementById("paletteSearchResults"),

paletteSearchCount: document.getElementById("paletteSearchCount"),

paletteSearchClose: document.getElementById("paletteSearchClose"),

manageModal: document.getElementById("manageModal"),

manageClose: document.getElementById("manageClose"),

manageMaximize: document.getElementById("manageMaximize"),

stickyPreview: document.getElementById("stickyPreview"),

};

const sourceCtx = elements.sourceCanvas.getContext("2d");

const outputCtx = elements.outputCanvas.getContext("2d");

const offscreen = document.createElement("canvas");

const offscreenCtx = offscreen.getContext("2d");

const resized = document.createElement("canvas");

const resizedCtx = resized.getContext("2d");

const clampNumber = (value, min, max) => Math.max(min, Math.min(max, value));

const hexToRgb = (hex) => {

const normalized = hex.replace("#", "");

const bigint = parseInt(normalized, 16);

return {

r: (bigint >> 16) & 255,

g: (bigint >> 8) & 255,

b: bigint & 255,

};

};

const distanceSq = (a, b) => {

const dr = a.r - b.r;

const dg = a.g - b.g;

const db = a.b - b.b;

return dr * dr + dg * dg + db * db;

};

const rgbToLab = (rgb) => {

const sr = rgb.r / 255;

const sg = rgb.g / 255;

const sb = rgb.b / 255;

const linear = (v) => (v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));

const r = linear(sr);

const g = linear(sg);

const b = linear(sb);

const x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;

const y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;

const z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;

const f = (v) => (v > 0.008856 ? Math.cbrt(v) : 7.787 * v + 16 / 116);

const fx = f(x);

const fy = f(y);

const fz = f(z);

return {

l: 116 * fy - 16,

a: 500 * (fx - fy),

b: 200 * (fy - fz),

};

};

const labDistanceSq = (a, b) => {

const dl = a.l - b.l;

const da = a.a - b.a;

const db = a.b - b.b;

return dl * dl + da * da + db * db;

};

const buildLimitedPalette = (data, paletteColors, limit, accentSlots) => {

const buckets = new Map();

for (let i = 0; i < data.length; i += 4) {

const alpha = data[i + 3];

if (alpha < 10) continue;

const r = data[i];

const g = data[i + 1];

const b = data[i + 2];

const key = ((r >> 4) << 8) | ((g >> 4) << 4) | (b >> 4);

const existing = buckets.get(key) || { count: 0, sumR: 0, sumG: 0, sumB: 0 };

existing.count += 1;

existing.sumR += r;

existing.sumG += g;

existing.sumB += b;

buckets.set(key, existing);

}

const totalPixels = Math.floor(data.length / 4);

const minCount = Math.max(20, Math.round(totalPixels * 0.001));

const bucketList = Array.from(buckets.values())

.map((bucket) => {

const avg = {

r: Math.round(bucket.sumR / bucket.count),

g: Math.round(bucket.sumG / bucket.count),

b: Math.round(bucket.sumB / bucket.count),

};

const lab = rgbToLab(avg);

const chroma = Math.sqrt(lab.a * lab.a + lab.b * lab.b);

return { ...bucket, avg, lab, chroma };

})

.sort((a, b) => b.count - a.count);

const selected = [];

const selectedIndices = new Set();

const addClosestPalette = (lab) => {

let bestIndex = 0;

let bestDistance = Infinity;

for (let j = 0; j < paletteColors.length; j += 1) {

const dist = labDistanceSq(lab, paletteColors[j].lab);

if (dist < bestDistance) {

bestDistance = dist;

bestIndex = j;

}

}

if (!selectedIndices.has(bestIndex)) {

selectedIndices.add(bestIndex);

selected.push(paletteColors[bestIndex]);

}

};

const slots = Math.min(accentSlots, limit);

const accentChroma = 20;

const accentBuckets = bucketList

.filter((bucket) => bucket.count >= minCount && bucket.chroma >= accentChroma)

.sort((a, b) => b.chroma - a.chroma);

for (const bucket of accentBuckets) {

addClosestPalette(bucket.lab);

if (selected.length >= slots) break;

}

for (const bucket of bucketList) {

if (selected.length >= limit) break;

addClosestPalette(bucket.lab);

}

if (selected.length < limit) {

for (let j = 0; j < paletteColors.length; j += 1) {

if (!selectedIndices.has(j)) {

selectedIndices.add(j);

selected.push(paletteColors[j]);

}

if (selected.length >= limit) break;

}

}

return selected.slice(0, limit);

};

const setStatus = (message) => {

elements.status.textContent = message;

};

function updateLoadProjectIcon() {

if (!elements.loadProject) return;

if (!window.lucide?.createIcons) return;

const locked = elements.loadProject.dataset.locked === "true";

const iconName = locked ? "external-link" : "folder-open";

elements.loadProject.innerHTML = `

<i data-lucide="${iconName}"></i>

Load project

`;

window.lucide.createIcons();

}

const setImageLocked = (locked) => {

if (elements.imageUpload) {

elements.imageUpload.disabled = locked;

}

const label = document.getElementById("imageUploadLabel");

if (label) {

label.classList.toggle("is-disabled", locked);

}

if (elements.loadProject) {

elements.loadProject.dataset.locked = locked ? "true" : "false";

elements.loadProject.dataset.external = locked ? "true" : "false";

}

updateLoadProjectIcon();

};

const getProjectMeta = () => {

const now = new Date().toISOString();

if (!state.projectMeta) {

const id =

(window.crypto?.randomUUID && window.crypto.randomUUID()) ||

`lilo-${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`;

state.projectMeta = {

id,

createdAt: now,

updatedAt: now,

};

return state.projectMeta;

}

state.projectMeta.updatedAt = now;

return state.projectMeta;

};

let toastTimer = null;

const showToast = (message) => {

const toast = document.getElementById("toast");

if (!toast) return;

toast.textContent = message;

toast.classList.add("show");

if (toastTimer) window.clearTimeout(toastTimer);

toastTimer = window.setTimeout(() => {

toast.classList.remove("show");

}, 2200);

};

const updateLegend = () => {

elements.legendList.innerHTML = "";

if (!state.counts.length) {

const empty = document.createElement("p");

empty.className = "hint";

empty.textContent = "Legend will populate after conversion.";

elements.legendList.appendChild(empty);

updateMergeDuplicateButton();

return;

}

state.counts.forEach((count, index) => {

const color = state.mappedPalette[index];

if (!color || count <= 0) return;

const symbol = state.symbols[index] || "";

const hidden = isHiddenColor(color);

const item = document.createElement("div");

item.className = "legend-item";

if (hidden) item.classList.add("is-hidden");

const symbolBadge = document.createElement("div");

symbolBadge.className = "symbol-badge";

symbolBadge.textContent = symbol;

symbolBadge.dataset.index = String(index);

symbolBadge.classList.add("symbol-picker-trigger");

symbolBadge.setAttribute("role", "button");

symbolBadge.setAttribute("tabindex", "0");

symbolBadge.setAttribute("aria-label", "Change symbol");

const info = document.createElement("div");

const title = document.createElement("strong");

title.textContent = color.name;

const meta = document.createElement("div");

meta.className = "legend-meta";

const swatch = document.createElement("div");

swatch.className = "swatch";

swatch.style.background = color.hex;

const stitchCount = document.createElement("span");

stitchCount.className = "legend-count";

stitchCount.textContent = `(${count} st.)`;

meta.appendChild(stitchCount);

if (color.code) {

const kbd = document.createElement("kbd");

kbd.className = "kbd";

kbd.textContent = `@${color.code}`;

meta.appendChild(kbd);

}

const iconStack = document.createElement("div");

iconStack.className = "legend-icon";

iconStack.appendChild(swatch);

iconStack.appendChild(symbolBadge);

const actions = document.createElement("div");

actions.className = "legend-actions";

const visibility = document.createElement("label");

visibility.className = "switch legend-switch";

visibility.dataset.index = String(index);

const visibilityInput = document.createElement("input");

visibilityInput.className = "switch-input switch-input-sm";

visibilityInput.type = "checkbox";

visibilityInput.role = "switch";

visibilityInput.checked = hidden;

const visibilityText = document.createElement("span");

visibilityText.textContent = "Hide";

visibility.appendChild(visibilityInput);

visibility.appendChild(visibilityText);

actions.appendChild(visibility);

const action = document.createElement("button");

action.className = "legend-action icon-button";

action.type = "button";

action.dataset.index = String(index);

action.setAttribute("aria-label", "Replace the color");

action.setAttribute("title", "Replace the color");

action.innerHTML = '<i data-lucide="pencil"></i>';

actions.appendChild(action);

info.appendChild(title);

info.appendChild(meta);

info.appendChild(actions);

item.appendChild(iconStack);

item.appendChild(info);

elements.legendList.appendChild(item);

});

if (window.lucide?.createIcons) {

window.lucide.createIcons();

}

updateMergeDuplicateButton();

};

const getPaletteById = (paletteId) => paletteCatalog.find((item) => item.id === paletteId);

const getPalette = () => getPaletteById(state.paletteId);

const buildReverseMap = (map) => {

if (!map) return {};

const reverse = {};

Object.entries(map).forEach(([fromCode, toCodes]) => {

if (!Array.isArray(toCodes)) return;

toCodes.forEach((toCode) => {

if (!toCode) return;

if (!reverse[toCode]) {

reverse[toCode] = [];

}

if (!reverse[toCode].includes(fromCode)) {

reverse[toCode].push(fromCode);

}

});

});

return reverse;

};

const anchorToDmcMap =

typeof dmcToAnchorMap !== "undefined" ? buildReverseMap(dmcToAnchorMap) : {};

const buildPaletteColorData = (palette) =>

palette.colors.map((color) => {

const rgb = hexToRgb(color.hex);

return {

...color,

rgb,

lab: rgbToLab(rgb),

};

});

const findColorByCodes = (palette, codes) => {

if (!palette || !Array.isArray(codes)) return null;

for (const code of codes) {

const match = palette.colors.find((color) => String(color.code) === String(code));

if (match) return match;

}

return null;

};

const findClosestPaletteColor = (paletteColors, targetLab) => {

if (!paletteColors.length) return null;

let best = paletteColors[0];

let bestDistance = Infinity;

paletteColors.forEach((color) => {

const dist = labDistanceSq(targetLab, color.lab);

if (dist < bestDistance) {

bestDistance = dist;

best = color;

}

});

return best;

};

const getSymbolSetData = () =>

symbolSets.find((symbolSet) => symbolSet.id === state.symbolSetId) || symbolSets[0];

const getSymbolSet = () => getSymbolSetData().symbols;

const updateSymbolFontStyles = () => {

const symbolSet = getSymbolSetData();

if (!symbolSet) return;

document.documentElement.style.setProperty("--symbol-font-family", symbolSet.fontFamily);

document.documentElement.style.setProperty(

"--symbol-font-weight",

String(symbolSet.fontWeight || 600)

);

};

const normalizeHex = (hex) => hex.toLowerCase();

const countDuplicateColors = () => {

if (!state.mappedPalette.length) return 0;

const seen = new Set();

let duplicates = 0;

state.mappedPalette.forEach((color) => {

if (!color) return;

const hex = normalizeHex(color.hex);

if (seen.has(hex)) {

duplicates += 1;

} else {

seen.add(hex);

}

});

return duplicates;

};

const updateMergeDuplicateButton = () => {

if (!elements.mergeDuplicateColors) return;

const duplicates = countDuplicateColors();

elements.mergeDuplicateColors.disabled = duplicates === 0;

elements.mergeDuplicateColors.title = duplicates

? `Merge ${duplicates} duplicate ${duplicates === 1 ? "color" : "colors"}`

: "No duplicate colors to merge";

};

const getHiddenSet = () => new Set(state.hiddenColors.map(normalizeHex));

const isHiddenColor = (color) => getHiddenSet().has(normalizeHex(color.hex));

const toggleHiddenColor = (color) => {

const hex = normalizeHex(color.hex);

const hiddenSet = getHiddenSet();

if (hiddenSet.has(hex)) {

hiddenSet.delete(hex);

} else {

hiddenSet.add(hex);

}

state.hiddenColors = Array.from(hiddenSet);

};

const normalizeQuery = (query) => query.trim().toLowerCase();

const buildSearchResults = (query) => {

const palette = getPalette();

if (!palette) return [];

const cleaned = normalizeQuery(query);

if (!cleaned) return palette.colors;

if (cleaned.startsWith("#")) {

const hexQuery = cleaned;

return palette.colors.filter((color) => color.hex.toLowerCase().startsWith(hexQuery));

}

if (cleaned.startsWith("@")) {

const codeQuery = cleaned.slice(1);

return palette.colors.filter((color) => color.code && color.code.toLowerCase().includes(codeQuery));

}

return palette.colors.filter((color) => color.name.toLowerCase().includes(cleaned));

};

const openPaletteSearch = (index, mode = "replace") => {

if (!state.mappedPalette.length) return;

state.activeReplaceIndex = mode === "replace" ? index : null;

state.paletteSearchMode = mode;

elements.paletteSearchInput.value = "";

renderPaletteSearch("");

elements.paletteSearchModal.classList.toggle("modal-top", mode === "select");

elements.paletteSearchModal.classList.add("open");

elements.paletteSearchModal.setAttribute("aria-hidden", "false");

elements.paletteSearchInput.focus();

};

const closePaletteSearch = () => {

elements.paletteSearchModal.classList.remove("open");

elements.paletteSearchModal.classList.remove("modal-top");

elements.paletteSearchModal.setAttribute("aria-hidden", "true");

state.activeReplaceIndex = null;

state.paletteSearchMode = "replace";

};

const renderPaletteSearch = (query) => {

const results = buildSearchResults(query);

elements.paletteSearchResults.innerHTML = "";

const countLabel = results.length === 1 ? "1 match" : `${results.length} matches`;

elements.paletteSearchCount.textContent = countLabel;

const maxResults = 120;

results.slice(0, maxResults).forEach((color) => {

const item = document.createElement("button");

item.type = "button";

item.className = "search-result";

item.dataset.code = color.code || "";

item.dataset.name = color.name || "";

item.dataset.hex = color.hex;

const swatch = document.createElement("div");

swatch.className = "swatch";

swatch.style.background = color.hex;

const info = document.createElement("div");

const title = document.createElement("strong");

title.textContent = color.name;

const meta = document.createElement("div");

meta.className = "result-meta";

const code = color.code ? `Code ${color.code}` : "";

meta.textContent = `${color.hex.toUpperCase()}${code ? ` · ${code}` : ""}`;

info.appendChild(title);

info.appendChild(meta);

const action = document.createElement("span");

action.className = "muted";

action.textContent = "Select";

item.appendChild(swatch);

item.appendChild(info);

item.appendChild(action);

elements.paletteSearchResults.appendChild(item);

});

};

const applyPaletteReplacement = (color) => {

if (state.activeReplaceIndex === null) return;

const paletteColor = {

...color,

rgb: hexToRgb(color.hex),

};

paletteColor.lab = rgbToLab(paletteColor.rgb);

const existingIndex = state.mappedPalette.findIndex(

(entry, index) => index !== state.activeReplaceIndex && entry && entry.hex === color.hex

);

const currentSymbol = state.symbols[state.activeReplaceIndex] || "?";

const symbol = existingIndex >= 0 ? state.symbols[existingIndex] || currentSymbol : currentSymbol;

paletteColor.symbol = symbol;

state.mappedPalette[state.activeReplaceIndex] = paletteColor;

state.symbols[state.activeReplaceIndex] = symbol;

renderOutput();

updateLegend();

closePaletteSearch();

};

const selectManageColor = (color) => {

if (!state.mappedPalette.length) return;

const paletteColor = {

...color,

rgb: hexToRgb(color.hex),

};

paletteColor.lab = rgbToLab(paletteColor.rgb);

const existingIndex = state.mappedPalette.findIndex((entry) => entry && entry.hex === color.hex);

if (existingIndex >= 0) {

state.manageColorIndex = existingIndex;

state.managePendingColor = null;

state.manageMode = "paint";

updateManageToolbar();

closePaletteSearch();

return;

}

state.managePendingColor = paletteColor;

state.manageColorIndex = null;

state.manageMode = "paint";

updateManageToolbar();

closePaletteSearch();

};

const formatSize = (value) => {

if (!Number.isFinite(value)) return "0";

const rounded = Math.round(value * 10) / 10;

return rounded.toFixed(1);

};

const updateFabricSizes = () => {

const count = state.fabricCount || 1;

let widthIn = 0;

let heightIn = 0;

let widthCm = 0;

let heightCm = 0;

if (state.fabricUnit === "cm") {

widthCm = state.gridWidth / count;

heightCm = state.gridHeight / count;

widthIn = widthCm / 2.54;

heightIn = heightCm / 2.54;

} else {

widthIn = state.gridWidth / count;

heightIn = state.gridHeight / count;

widthCm = widthIn * 2.54;

heightCm = heightIn * 2.54;

}

elements.sizeCm.textContent = `${formatSize(widthCm)} cm x ${formatSize(heightCm)} cm`;

elements.sizeIn.textContent = `${formatSize(widthIn)} in x ${formatSize(heightIn)} in`;

};

const drawSourcePreview = () => {

const width = elements.sourceCanvas.width;

const height = elements.sourceCanvas.height;

sourceCtx.clearRect(0, 0, width, height);

if (!state.image) return;

const ratio = Math.min(width / state.imageWidth, height / state.imageHeight);

const drawWidth = state.imageWidth * ratio;

const drawHeight = state.imageHeight * ratio;

const x = (width - drawWidth) / 2;

const y = (height - drawHeight) / 2;

sourceCtx.drawImage(state.image, x, y, drawWidth, drawHeight);

};

const resizeForGrid = () => {

if (!state.image) return;

offscreen.width = state.imageWidth;

offscreen.height = state.imageHeight;

offscreenCtx.clearRect(0, 0, offscreen.width, offscreen.height);

offscreenCtx.drawImage(state.image, 0, 0);

resized.width = state.gridWidth;

resized.height = state.gridHeight;

resizedCtx.clearRect(0, 0, resized.width, resized.height);

resizedCtx.imageSmoothingEnabled = state.smoothing;

resizedCtx.imageSmoothingQuality = state.smoothing ? "high" : "low";

const filters = [];