@botharness/pixel-avatar 0.7.0 → 0.9.0

package/dist/index.js

@@ -333,6 +333,33 @@ const AVATAR_SPECIES = [
 ];
 /** Optional per-piece hair colors (asset version 2); an absent piece uses `hairColor`. */
 const AVATAR_PIECE_COLORS = ["leftSideHairColor", "rightSideHairColor"];
+/**
+* Asset version 4 adds a color for every other hair piece; an absent piece uses `hairColor`.
+* `strandColor` colors the single strand (`strand`).
+*/
+const AVATAR_PIECE_COLORS_V4 = [
+	"bangsColor",
+	"backHairColor",
+	"strandColor"
+];
+/** A single strand of hair standing up from the crown (asset version 4). */
+const AVATAR_STRANDS = [
+	"ahoge",
+	"curl",
+	"double"
+];
+/**
+* Built-in headpieces (asset version 4), worn in the headpiece slot alongside an accessory and
+* drawn partly behind the hair. The first five were accessories in earlier versions.
+*/
+const AVATAR_HEADPIECES = [
+	"catears",
+	"bunnyears",
+	"horseears",
+	"horns",
+	"halo",
+	"wings"
+];
 /** Part choices that exist only in asset version 2, added after every version 1 choice. */
 const AVATAR_PARTS_V2 = {
 	...AVATAR_PARTS,
@@ -410,17 +437,22 @@ function isPixelAvatarRecipe(value) {
 	const r = value;
 	const detailed = DETAIL_KEYS.filter((key) => Object.hasOwn(r, key)).length;
 	if (detailed !== 0 && detailed !== DETAIL_KEYS.length) return false;
+	const v4 = r["assetVersion"] === 4;
 	const v3 = r["assetVersion"] === 3;
-	const v2 = r["assetVersion"] === 2 || v3;
-	const worn = PART_KEY_ENTRIES.filter(([, key]) => Object.hasOwn(r, key));
-	if (v3 ? worn.length === 0 : worn.length !== 0) return false;
+	const v2 = r["assetVersion"] === 2 || v3 || v4;
+	const builtInHead = v4 && typeof r["headpiece"] === "string";
+	if (builtInHead && !AVATAR_HEADPIECES.includes(r["headpiece"])) return false;
+	const worn = PART_KEY_ENTRIES.filter(([slot, key]) => Object.hasOwn(r, key) && !(slot === "headpiece" && builtInHead));
+	if (v3 ? worn.length === 0 : !v4 && worn.length !== 0) return false;
+	const newer = [...AVATAR_PIECE_COLORS_V4, "strand"].filter((key) => Object.hasOwn(r, key));
+	if (newer.length !== 0 && (!v4 || !AVATAR_PIECE_COLORS_V4.every((key) => !Object.hasOwn(r, key) || typeof r[key] === "string" && /^#[\da-f]{6}$/iu.test(r[key])) || Object.hasOwn(r, "strand") && !AVATAR_STRANDS.includes(r["strand"]))) return false;
 	for (const [slot, key] of worn) {
 		const part = r[key];
 		if (!isPixelCustomPart(part) || part.slot !== slot) return false;
 	}
 	const pieces = AVATAR_PIECE_COLORS.filter((key) => Object.hasOwn(r, key));
 	const extras = Object.keys(AVATAR_EXTRA_PARTS).filter((key) => Object.hasOwn(r, key));
-	const v2Keys = v2 ? 2 + pieces.length + extras.length + worn.length : 0;
+	const v2Keys = v2 ? 2 + pieces.length + extras.length + worn.length + newer.length + (builtInHead ? 1 : 0) : 0;
 	if (Object.keys(r).length !== Object.keys(DEFAULT_RECIPE).length + detailed + v2Keys) return false;
 	if (v2 && (detailed === 0 || !AVATAR_SPECIES.includes(r["species"]) || !AVATAR_HAIR_PARTS.sideHair.includes(r["rightSideHair"]) || !pieces.every((key) => typeof r[key] === "string" && /^#[\da-f]{6}$/iu.test(r[key])) || !extras.every((key) => AVATAR_EXTRA_PARTS[key].includes(r[key])))) return false;
 	const catalog = v2 ? AVATAR_PARTS_V2 : AVATAR_PARTS;
@@ -445,9 +477,13 @@ function canonicalRecipe(recipe) {
 		canonical["rightSideHair"] = recipe.rightSideHair;
 		for (const key of AVATAR_PIECE_COLORS) if (recipe[key] !== void 0) canonical[key] = recipe[key].toLowerCase();
 		for (const key of Object.keys(AVATAR_EXTRA_PARTS)) if (recipe[key] !== void 0) canonical[key] = recipe[key];
-		if (recipe.assetVersion === 3) for (const [, key] of PART_KEY_ENTRIES) {
+		if (recipe.assetVersion === 3 || recipe.assetVersion === 4) for (const [, key] of PART_KEY_ENTRIES) {
 			const part = recipe[key];
-			if (part !== void 0) canonical[key] = canonicalCustomPart(part);
+			if (part !== void 0) canonical[key] = typeof part === "string" ? part : canonicalCustomPart(part);
+		}
+		if (recipe.assetVersion === 4) {
+			if (recipe.strand !== void 0) canonical["strand"] = recipe.strand;
+			for (const key of AVATAR_PIECE_COLORS_V4) if (recipe[key] !== void 0) canonical[key] = recipe[key].toLowerCase();
 		}
 	}
 	return canonical;
@@ -464,8 +500,12 @@ const HAIR_PIECES = [
 * the species or headwear changes back.
 */
 function hiddenChoices(recipe) {
+	const strand = recipe.strand && (recipe.species === "flower" || recipe.bangs !== "none") ? ["strand"] : [];
+	const bald = recipe.strand && recipe.bangs === "none" ? ["strand"] : [];
 	if (recipe.species === "flower") return [
 		...HAIR_PIECES,
+		...strand,
+		...typeof recipe.headpiece === "string" ? ["headpiece"] : [],
 		"outfit",
 		"accessory",
 		"eyes",
@@ -476,8 +516,9 @@ function hiddenChoices(recipe) {
 		...recipe.beard || wornPart(recipe, "beard") ? ["beard"] : []
 	];
 	const hidden = [];
-	if ((recipe.accessory === "helmet" || recipe.accessory === "hood") && !wornPart(recipe, "accessory")) hidden.push(...HAIR_PIECES);
+	if ((recipe.accessory === "helmet" || recipe.accessory === "hood") && !wornPart(recipe, "accessory")) hidden.push(...HAIR_PIECES, ...strand);
 	if (recipe.species === "dwarf") hidden.push("nose");
+	if (!hidden.includes("strand")) hidden.push(...bald);
 	return hidden;
 }
 function withSpecies(recipe, species) {
@@ -486,16 +527,12 @@ function withSpecies(recipe, species) {
 	const suggested = AVATAR_SPECIES_SWATCHES[previous].includes(recipe.skinColor.toLowerCase());
 	return {
 		...detailed,
-		assetVersion: recipe.assetVersion === 3 ? 3 : 2,
+		assetVersion: recipe.assetVersion === 1 ? 2 : recipe.assetVersion,
 		species,
 		rightSideHair: detailed.rightSideHair ?? detailed.sideHair,
 		skinColor: suggested && previous !== species ? AVATAR_SPECIES_SWATCHES[species][0] : recipe.skinColor
 	};
 }
-/**
-* Returns the recipe wearing `part` in `slot`, or with that slot's part taken off. The recipe
-* embeds its own copy; it is asset version 3 while it wears any part and version 2 otherwise.
-*/
 function withCustomPart(recipe, slot, part) {
 	const base = { ...recipe.assetVersion === 1 ? withSpecies(recipe, "human") : recipe };
 	const key = CUSTOM_PART_KEYS[slot];
@@ -504,19 +541,51 @@ function withCustomPart(recipe, slot, part) {
 		...part,
 		slot
 	});
+	if (recipe.assetVersion === 4) return base;
 	const wearing = PART_KEY_ENTRIES.some(([, k]) => base[k] !== void 0);
 	return {
 		...base,
 		assetVersion: wearing ? 3 : 2
 	};
 }
+const MOVED_HEADPIECES = AVATAR_HEADPIECES;
+/**
+* Returns the recipe as asset version 4, keeping every choice. An accessory that is now a
+* headpiece moves into the empty headpiece slot, freeing the accessory slot; call this only when
+* the Human edits, so saved recipes keep rendering as they were.
+*/
+function withPieces(recipe) {
+	if (recipe.assetVersion === 4) return recipe;
+	const base = {
+		...recipe.assetVersion === 1 ? withSpecies(recipe, "human") : recipe,
+		assetVersion: 4
+	};
+	if (base["headpiece"] === void 0 && MOVED_HEADPIECES.includes(recipe.accessory)) {
+		base["headpiece"] = recipe.accessory;
+		base["accessory"] = "none";
+	}
+	return base;
+}
+/** Returns the recipe as asset version 4 wearing a built-in headpiece, or none. */
+function withBuiltInHeadpiece(recipe, headpiece) {
+	const base = { ...withPieces(recipe) };
+	delete base["headpiece"];
+	if (headpiece !== void 0) base["headpiece"] = headpiece;
+	return base;
+}
+/** The built-in headpiece worn, if any. */
+function builtInHeadpiece(recipe) {
+	return typeof recipe.headpiece === "string" ? recipe.headpiece : void 0;
+}
 /** `withCustomPart` for the headpiece slot. */
 function withHeadpiece(recipe, part) {
 	return withCustomPart(recipe, "headpiece", part);
 }
 /** The Custom Part worn in a slot, if any. */
 function wornPart(recipe, slot) {
-	return recipe.assetVersion === 3 ? recipe[CUSTOM_PART_KEYS[slot]] : void 0;
+	if (recipe.assetVersion !== 3 && recipe.assetVersion !== 4) return void 0;
+	const part = recipe[CUSTOM_PART_KEYS[slot]];
+	return typeof part === "string" ? void 0 : part;
 }
 function detailedRecipe(recipe) {
 	if (recipe.bangs !== void 0) return recipe;
@@ -1080,6 +1149,182 @@ function fillPartLayer(slot, layer, x, y, ink, mirror = false) {
 	}
 	return out;
 }
+/** Pixel-perfect line points (Bresenham). With `snap`, the end snaps to 0°, 45° or 90°. */
+function partLinePoints(from, to, snap = false) {
+	let [x1, y1] = to;
+	const [x0, y0] = from;
+	if (snap) {
+		const dx = x1 - x0;
+		const dy = y1 - y0;
+		const ax = Math.abs(dx);
+		const ay = Math.abs(dy);
+		if (ax > ay * 2) y1 = y0;
+		else if (ay > ax * 2) x1 = x0;
+		else {
+			const m = Math.max(ax, ay);
+			x1 = x0 + Math.sign(dx) * m;
+			y1 = y0 + Math.sign(dy) * m;
+		}
+	}
+	const points = [];
+	const dx = Math.abs(x1 - x0);
+	const dy = -Math.abs(y1 - y0);
+	const sx = x0 < x1 ? 1 : -1;
+	const sy = y0 < y1 ? 1 : -1;
+	let error = dx + dy;
+	let [x, y] = [x0, y0];
+	for (;;) {
+		points.push([x, y]);
+		if (x === x1 && y === y1) break;
+		const e2 = 2 * error;
+		if (e2 >= dy) {
+			error += dy;
+			x += sx;
+		}
+		if (e2 <= dx) {
+			error += dx;
+			y += sy;
+		}
+	}
+	return points;
+}
+/** Rectangle outline points between two corners. With `square`, the far corner makes a square. */
+function partRectPoints(from, to, square = false) {
+	const [x0, y0] = from;
+	let [x1, y1] = to;
+	if (square) {
+		const m = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));
+		x1 = x0 + (x1 < x0 ? -m : m);
+		y1 = y0 + (y1 < y0 ? -m : m);
+	}
+	const [left, right] = [Math.min(x0, x1), Math.max(x0, x1)];
+	const [top, bottom] = [Math.min(y0, y1), Math.max(y0, y1)];
+	const points = /* @__PURE__ */ new Map();
+	for (let x = left; x <= right; x++) for (const y of [top, bottom]) points.set(`${x},${y}`, [x, y]);
+	for (let y = top; y <= bottom; y++) for (const x of [left, right]) points.set(`${x},${y}`, [x, y]);
+	return [...points.values()];
+}
+const BAYER4 = [
+	[
+		0,
+		8,
+		2,
+		10
+	],
+	[
+		12,
+		4,
+		14,
+		6
+	],
+	[
+		3,
+		11,
+		1,
+		9
+	],
+	[
+		15,
+		7,
+		13,
+		5
+	]
+];
+const BAYER2 = [[0, 2], [3, 1]];
+/** The ordered-dither threshold in [0, 1) for a cell. */
+function ditherThreshold(x, y, size = 4) {
+	return size === 4 ? (BAYER4[y & 3][x & 3] + .5) / 16 : (BAYER2[y & 1][x & 1] + .5) / 4;
+}
+/**
+* A linear gradient over the 4-connected region of the start cell: each cell's position along
+* `from`→`to` steps through the tones between `fromTone` and `toTone`, with ordered dithering
+* between neighboring tones. No RGB is blended; the result is ordinary cells.
+*/
+function gradientPartLayer(slot, layer, from, to, color, fromTone, toTone, options = {}) {
+	const { width, height } = PART_SLOTS[slot];
+	const out = layer.map((row) => [...row]);
+	const [fx, fy] = from;
+	const region = (sx, sy) => {
+		if (sx < 0 || sx >= width || sy < 0 || sy >= height) return [];
+		const target = layer[sy][sx];
+		const seen = /* @__PURE__ */ new Set();
+		const cells = [];
+		const stack = [[sx, sy]];
+		while (stack.length) {
+			const [x, y] = stack.pop();
+			if (x < 0 || x >= width || y < 0 || y >= height || seen.has(y * width + x)) continue;
+			if (!same(layer[y][x], target)) continue;
+			seen.add(y * width + x);
+			cells.push([x, y]);
+			stack.push([x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1]);
+		}
+		return cells;
+	};
+	const paint = (cells, start, end, ditherX) => {
+		const vx = end[0] - start[0];
+		const vy = end[1] - start[1];
+		const length = vx * vx + vy * vy;
+		const steps = toTone - fromTone;
+		for (const [x, y] of cells) {
+			const position = (length === 0 ? 0 : Math.min(1, Math.max(0, ((x - start[0]) * vx + (y - start[1]) * vy) / length))) * Math.abs(steps);
+			const base = Math.floor(position);
+			const up = position - base > ditherThreshold(ditherX(x), y, options.dither ?? 4) ? 1 : 0;
+			const tone = fromTone + Math.sign(steps) * Math.min(Math.abs(steps), base + up);
+			out[y][x] = {
+				color,
+				tone
+			};
+		}
+	};
+	const own = region(fx, fy);
+	if (!options.mirror) {
+		paint(own, from, to, (x) => x);
+		return out;
+	}
+	const mx = mirrorPartX(slot, fx);
+	const mirroredCells = region(mx, fy);
+	const inOwn = new Set(own.map(([x, y]) => y * width + x));
+	const inMirrored = new Set(mirroredCells.map(([x, y]) => y * width + x));
+	const startSide = (x) => x < width / 2 === fx < width / 2;
+	paint(own.filter(([x, y]) => startSide(x) || !inMirrored.has(y * width + x)), from, to, (x) => x);
+	paint(mirroredCells.filter(([x, y]) => !startSide(x) || !inOwn.has(y * width + x)), [mx, fy], [mirrorPartX(slot, to[0]), to[1]], (x) => mirrorPartX(slot, x));
+	return out;
+}
+/**
+* Moves the tone of colored cells by ±1 at random, for texture. The same seed gives the same
+* result; the seed is used only now, and the result is ordinary cells. With `mirror`, each cell
+* and its mirror get the same change.
+*/
+function noisePartLayer(slot, layer, amount, seed, mirror = false) {
+	const random = seededRandom(seed);
+	const rolls = layer.map((row) => row.map(() => [random(), random() < .5 ? -1 : 1]));
+	return layer.map((row, y) => row.map((ink, x) => {
+		const source = mirror ? Math.min(x, mirrorPartX(slot, x)) : x;
+		const [roll, direction] = rolls[y][source];
+		if (!ink || roll >= amount) return ink;
+		return {
+			color: ink.color,
+			tone: Math.max(-2, Math.min(2, ink.tone + direction))
+		};
+	}));
+}
+/** Moves the tone of each colored cell on the points by `delta` once; empty cells are skipped. */
+function shadePartLayer(slot, layer, points, delta, mirror = false) {
+	const { width, height } = PART_SLOTS[slot];
+	const out = layer.map((row) => [...row]);
+	const done = /* @__PURE__ */ new Set();
+	for (const [x, y] of points) for (const px of mirror ? [x, mirrorPartX(slot, x)] : [x]) {
+		const key = `${px},${y}`;
+		if (done.has(key) || px < 0 || px >= width || y < 0 || y >= height) continue;
+		done.add(key);
+		const ink = layer[y][px];
+		if (ink) out[y][px] = {
+			color: ink.color,
+			tone: Math.max(-2, Math.min(2, ink.tone + delta))
+		};
+	}
+	return out;
+}
 const K = Uint32Array.from("428a2f98 71374491 b5c0fbcf e9b5dba5 3956c25b 59f111f1 923f82a4 ab1c5ed5 d807aa98 12835b01 243185be 550c7dc3 72be5d74 80deb1fe 9bdc06a7 c19bf174 e49b69c1 efbe4786 0fc19dc6 240ca1cc 2de92c6f 4a7484aa 5cb0a9dc 76f988da 983e5152 a831c66d b00327c8 bf597fc7 c6e00bf3 d5a79147 06ca6351 14292967 27b70a85 2e1b2138 4d2c6dfc 53380d13 650a7354 766a0abb 81c2c92e 92722c85 a2bfe8a1 a81a664b c24b8b70 c76c51a3 d192e819 d6990624 f40e3585 106aa070 19a4c116 1e376c08 2748774c 34b0bcb5 391c0cb3 4ed8aa4a 5b9cca4f 682e6ff3 748f82ee 78a5636f 84c87814 8cc70208 90befffa a4506ceb bef9a3f7 c67178f2".split(" ").map((h) => Number.parseInt(h, 16)));
 function sha256(text) {
 	const bytes = new TextEncoder().encode(text);
@@ -1483,6 +1728,39 @@ function hair(recipe, s, b) {
 		};
 	}
 }
+const STRANDS = {
+	ahoge: {
+		rows: [
+			"XX.",
+			".XX",
+			".XX"
+		],
+		dx: 0
+	},
+	curl: {
+		rows: [
+			".XX.",
+			"X..X",
+			"..XX",
+			".X.."
+		],
+		dx: -1
+	},
+	double: {
+		rows: [
+			"X...X",
+			".X.X.",
+			".X.X."
+		],
+		dx: -2
+	}
+};
+function strandMask(style, s) {
+	const { rows, dx } = STRANDS[style];
+	const top = 4 - rows.length;
+	const left = Math.round(C + s) + dx;
+	return (x, y) => rows[y - top]?.[x - left] === "X";
+}
 function detailedHair(recipe, s, b) {
 	const of = (style) => hair({
 		...recipe,
@@ -1497,8 +1775,11 @@ function detailedHair(recipe, s, b) {
 	const sideOf = (sign) => (x, y) => y > 7 && sign * (x + .5 - C - s) >= 7 && lengthen((sign < 0 ? side : right).front)(x, y);
 	const fringe = (x, y) => y <= 7 ? bangs.front(x, y) || back.front(x, y) : Math.abs(x + .5 - C - s) < 7 && bangs.front(x, y);
 	const behind = length === 0 ? back.back : lengthen(back.back);
+	const tuft = recipe.strand && recipe.bangs !== "none" ? strandMask(recipe.strand, s) : void 0;
+	const strand = tuft ? (x, y) => tuft(x, y) && !fringe(x, y) && !sideOf(-1)(x, y) && !sideOf(1)(x, y) : void 0;
 	return {
-		front: (x, y) => fringe(x, y) || sideOf(-1)(x, y) || sideOf(1)(x, y),
+		front: (x, y) => fringe(x, y) || sideOf(-1)(x, y) || sideOf(1)(x, y) || (strand?.(x, y) ?? false),
+		...strand ? { strand } : {},
 		sides: [sideOf(-1), sideOf(1)],
 		pieces: {
 			bangs: fringe,
@@ -1843,6 +2124,87 @@ function accessory(recipe, g, s, face) {
 			return;
 	}
 }
+/**
+* A built-in headpiece: the row that meets the head goes behind the hair, the rest in front.
+* Turned, the far side of a pair is hidden, like a turned ear.
+*/
+function drawHeadpiece(style, recipe, behind, front, s, far) {
+	const cx = Math.round(C + s);
+	const pair = (rows, left, right, y, pal, mirror = true) => {
+		const tips = rows.slice(0, -1);
+		if (far >= 0) {
+			sprite(behind, rows, cx + left, y, pal);
+			sprite(front, tips, cx + left, y, pal);
+		}
+		if (far <= 0) {
+			sprite(behind, rows, cx + right, y, pal, mirror);
+			sprite(front, tips, cx + right, y, pal, mirror);
+		}
+	};
+	switch (style) {
+		case "catears":
+			pair([
+				"X...",
+				"XX..",
+				"XPX.",
+				"XXXX"
+			], -9, 5, 2, {
+				X: recipe.hairColor,
+				P: "#f4a3b5"
+			});
+			return;
+		case "bunnyears":
+			pair([
+				"WW",
+				"WP",
+				"WP",
+				"WP",
+				"WW"
+			], -6, 4, 0, {
+				W: "#f4f1ec",
+				P: "#f4a3b5"
+			});
+			return;
+		case "horseears":
+			pair([
+				".X.",
+				"XPX",
+				"XPX",
+				"XXX"
+			], -9, 6, 1, {
+				X: shade(recipe.hairColor, .9),
+				P: "#f4a3b5"
+			}, false);
+			return;
+		case "horns":
+			pair([
+				".H",
+				"HH",
+				"Hh"
+			], -8, 6, 1, {
+				H: "#5b3a6e",
+				h: "#7d5694"
+			});
+			return;
+		case "halo": {
+			const ring = (x, y) => ellipse(C + s, 1.6, 6.5, 1.8)(x, y) && !ellipse(C + s, 1.6, 4.4, .8)(x, y);
+			paint(behind, (x, y) => ring(x, y) && y < 2, GOLD);
+			paint(front, (x, y) => ring(x, y) && y >= 2, GOLD);
+			return;
+		}
+		case "wings":
+			pair([
+				"W..",
+				"WW.",
+				"WwW",
+				".ww"
+			], -13, 10, 7, {
+				W: "#f4f1ec",
+				w: "#cfd6e2"
+			});
+			return;
+	}
+}
 const POINTED_EARS = {
 	goblin: {
 		rows: [
@@ -2029,7 +2391,7 @@ function renderFigure(recipe, yawDeg, options, omit) {
 	};
 	const masks = drawnHair.length === 0 ? builtin : {
 		...builtin,
-		front: (x, y) => piece("bangs")(x, y) || piece("leftSideHair")(x, y) || piece("rightSideHair")(x, y),
+		front: (x, y) => piece("bangs")(x, y) || piece("leftSideHair")(x, y) || piece("rightSideHair")(x, y) || (builtin.strand?.(x, y) ?? false),
 		sides: [piece("leftSideHair"), piece("rightSideHair")],
 		back: piece("backHair"),
 		...drawnHair.some((drawn) => drawn.slot === "backHair") ? { ties: [] } : {}
@@ -2068,6 +2430,9 @@ function renderFigure(recipe, yawDeg, options, omit) {
 	placeCells(back, inked("backHair"), false);
 	overlay(back, "petals");
 	if (headpiece) placeCells(back, headpiece.back);
+	const wornHead = flower ? void 0 : builtInHeadpiece(recipe);
+	const headFront = blank();
+	if (wornHead) drawHeadpiece(wornHead, recipe, back, headFront, s, turned ? d : 0);
 	const head = blank();
 	paint(head, face, skin);
 	const h = recipe.height ?? 0;
@@ -2119,8 +2484,10 @@ function renderFigure(recipe, yawDeg, options, omit) {
 	const shadeHair = (g) => {
 		const out = g.map((r) => [...r]);
 		const cells = g.flatMap((row, y) => row.flatMap((c, x) => c === hairColor ? [[x, y]] : []));
-		const xs = cells.map(([x]) => x);
-		const ys = cells.map(([, y]) => y);
+		const framed = cells.filter(([x, y]) => !builtin.strand?.(x, y));
+		const bounds = framed.length ? framed : cells;
+		const xs = bounds.map(([x]) => x);
+		const ys = bounds.map(([, y]) => y);
 		const left = Math.min(...xs);
 		const right = Math.max(...xs);
 		const top = Math.min(...ys);
@@ -2149,7 +2516,7 @@ function renderFigure(recipe, yawDeg, options, omit) {
 		}
 		const ring = mix$1(hairColor, WHITE, .45);
 		for (let x = Math.round(C + s) - 7; x <= Math.round(C + s) + 3; x++) {
-			const first = g.findIndex((row) => row[x] === hairColor);
+			const first = g.findIndex((row, y) => row[x] === hairColor && !builtin.strand?.(x, y));
 			if (first < 0) continue;
 			const y = first + 2 + Math.round(Math.abs(x + .5 - (C + s - 2)) / 4);
 			if (g[y]?.[x] === hairColor && x % 3 !== 0) out[y][x] = ring;
@@ -2162,6 +2529,7 @@ function renderFigure(recipe, yawDeg, options, omit) {
 	const crown = blank();
 	placeCells(crown, inked("all-front"), false);
 	if (headpiece) placeCells(crown, headpiece.front);
+	for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) if (headFront[y][x]) crown[y][x] = headFront[y][x];
 	const figure = blank();
 	for (const layer of [
 		back,
@@ -2299,17 +2667,42 @@ function renderFigure(recipe, yawDeg, options, omit) {
 		], right.x + right.w, eyeTop + 5, { G: GOLD });
 	}
 	const full = clip(outline(figure));
-	AVATAR_PIECE_COLORS.forEach((key, i) => {
-		const color = recipe[key];
-		const mask = masks.sides?.[i];
-		if (color === void 0 || !mask || color.toLowerCase() === hairColor.toLowerCase()) return;
+	const variants = /* @__PURE__ */ new Map();
+	const recolor = (color) => {
+		const cached = variants.get(color.toLowerCase());
+		if (cached) return cached;
 		const variant = blank();
+		variants.set(color.toLowerCase(), variant);
 		const plain = {
 			...recipe,
 			hairColor: color
 		};
-		for (const k of AVATAR_PIECE_COLORS) delete plain[k];
+		for (const k of [...AVATAR_PIECE_COLORS, ...AVATAR_PIECE_COLORS_V4]) delete plain[k];
 		for (const cell of renderFigure(plain, yawDeg, {}, omit).cells) variant[cell.y][cell.x] = cell.c;
+		return variant;
+	};
+	if (recipe.assetVersion === 4) {
+		const over = (x, y) => !!crown[y]?.[x] || !!drawnOver[y]?.[x] || !!eyes[y]?.[x] || !!glasses[y]?.[x];
+		const hairAt = (x, y) => head[y]?.[x] === hairColor && !over(x, y);
+		const backAt = (x, y) => back[y]?.[x] !== void 0 && figure[y][x] === back[y][x];
+		const owners = [
+			[flower ? void 0 : recipe.backHairColor, (x, y) => masks.back(x, y) && backAt(x, y)],
+			[recipe.leftSideHairColor, (x, y) => !!masks.sides?.[0](x, y) && (hairAt(x, y) || backAt(x, y))],
+			[recipe.rightSideHairColor, (x, y) => !!masks.sides?.[1](x, y) && (hairAt(x, y) || backAt(x, y))],
+			[recipe.bangsColor, (x, y) => (builtin.pieces ? piece("bangs")(x, y) : false) && hairAt(x, y)],
+			[recipe.strandColor, (x, y) => (builtin.strand?.(x, y) ?? false) && hairAt(x, y)]
+		];
+		for (const [color, owns] of owners) {
+			if (color === void 0 || color.toLowerCase() === hairColor.toLowerCase()) continue;
+			const variant = recolor(color);
+			const near = (x, y) => owns(x - 1, y) || owns(x + 1, y) || owns(x, y - 1) || owns(x, y + 1);
+			for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) if (full[y][x] && !over(x, y) && (owns(x, y) || !figure[y][x] && near(x, y))) full[y][x] = variant[y][x];
+		}
+	} else AVATAR_PIECE_COLORS.forEach((key, i) => {
+		const color = recipe[key];
+		const mask = masks.sides?.[i];
+		if (color === void 0 || !mask || color.toLowerCase() === hairColor.toLowerCase()) return;
+		const variant = recolor(color);
 		const near = (x, y) => mask(x, y) || mask(x - 1, y) || mask(x + 1, y) || mask(x, y - 1) || mask(x, y + 1);
 		for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) if (full[y][x] && near(x, y) && !eyes[y][x] && !glasses[y][x]) full[y][x] = variant[y][x];
 	});
@@ -2384,6 +2777,57 @@ function hairPieceStart(recipe, slot) {
 		back: []
 	};
 }
+function cellSource(recipe) {
+	return (c) => {
+		for (const key of AVATAR_COLORS) for (const tone of [
+			0,
+			-1,
+			1,
+			-2,
+			2
+		]) if (TONES[tone](recipe[key].toLowerCase()) === c) return [key, tone];
+		return [c, 0];
+	};
+}
+/**
+* The headpiece as a Custom Part to start drawing from: the drawn headpiece worn, or the
+* built-in headpiece flattened for this recipe in the front pose, its base on the back layer and
+* the rest on the front layer, so an unchanged copy renders identically facing front.
+*/
+function headpieceStart(recipe) {
+	const worn = wornPart(recipe, "headpiece");
+	if (worn) return {
+		slot: "headpiece",
+		front: [...worn.front],
+		back: [...worn.back]
+	};
+	const style = builtInHeadpiece(recipe);
+	const behind = blank();
+	const over = blank();
+	if (style) drawHeadpiece(style, recipe, behind, over, 0, 0);
+	const source = cellSource(recipe);
+	const front = [];
+	const back = [];
+	for (let y = 0; y < 16; y++) for (let x = 0; x < N; x++) {
+		const c = over[y][x];
+		const b = behind[y][x];
+		if (c) front.push([
+			x,
+			y,
+			...source(c)
+		]);
+		if (b && b !== c) back.push([
+			x,
+			y,
+			...source(b)
+		]);
+	}
+	return {
+		slot: "headpiece",
+		front,
+		back
+	};
+}
 /**
 * The part in a replacement slot as a Custom Part to start drawing from: the drawn part worn
 * there, or the built-in part flattened for this recipe in the front pose. Each pixel becomes a
@@ -2401,16 +2845,7 @@ function replacePartStart(recipe, slot) {
 	const layer = slot === "glasses" ? "glasses" : slot === "nose" || slot === "cheeks" ? "features" : slot === "petals" ? "back" : slot === "outfit" || slot === "flowerBase" ? "body" : "figure";
 	const shown = renderFigure(recipe, 0, {}, /* @__PURE__ */ new Set()).grids[layer];
 	const without = renderFigure(recipe, 0, {}, new Set([slot])).grids[layer];
-	const source = (c) => {
-		for (const key of AVATAR_COLORS) for (const tone of [
-			0,
-			-1,
-			1,
-			-2,
-			2
-		]) if (TONES[tone](recipe[key].toLowerCase()) === c) return [key, tone];
-		return [c, 0];
-	};
+	const source = cellSource(recipe);
 	const front = [];
 	for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
 		const c = shown[y][x];
@@ -2949,5 +3384,5 @@ function symbolArtCells(rows, color) {
 }
 
 //#endregion
-export { AVATAR_COLORS, AVATAR_EXTRA_PARTS, AVATAR_HAIR_PARTS, AVATAR_PARTS, AVATAR_PARTS_V2, AVATAR_PIECE_COLORS, AVATAR_PRESETS, AVATAR_RANGES, AVATAR_SPECIES, AVATAR_SPECIES_SWATCHES, AVATAR_SWATCHES, AVATAR_TURNS, CUSTOM_PART_KEYS, DEFAULT_RECIPE, HAIR_PART_SLOTS, MAX_PART_FIXED_COLORS, PART_LAYERS, PART_SLOTS, PART_TONES, PIXEL_SYMBOLS, REPLACE_PART_SLOTS, canonicalCustomPart, canonicalRecipe, createCustomPart, createSeededRecipe, createSeededRecipeV2, customPartId, detailedRecipe, emptyPartLayer, faceCells, fillPartLayer, hairPieceStart, hiddenChoices, isHairPartSlot, isPixelAvatarRecipe, isPixelCustomPart, isReplacePartSlot, mirrorPartX, paintPartLayer, partCells, partLayer, partToneColor, pixelAvatarSvg, pixelFigure, pixelSymbolCells, pixelTileColor, replacePartStart, seededRandom, seededRecipe, seededRecipeV2, symbolArtCells, withCustomPart, withHeadpiece, withSpecies, wornPart };
+export { AVATAR_COLORS, AVATAR_EXTRA_PARTS, AVATAR_HAIR_PARTS, AVATAR_HEADPIECES, AVATAR_PARTS, AVATAR_PARTS_V2, AVATAR_PIECE_COLORS, AVATAR_PIECE_COLORS_V4, AVATAR_PRESETS, AVATAR_RANGES, AVATAR_SPECIES, AVATAR_SPECIES_SWATCHES, AVATAR_STRANDS, AVATAR_SWATCHES, AVATAR_TURNS, CUSTOM_PART_KEYS, DEFAULT_RECIPE, HAIR_PART_SLOTS, MAX_PART_FIXED_COLORS, PART_LAYERS, PART_SLOTS, PART_TONES, PIXEL_SYMBOLS, REPLACE_PART_SLOTS, builtInHeadpiece, canonicalCustomPart, canonicalRecipe, createCustomPart, createSeededRecipe, createSeededRecipeV2, customPartId, detailedRecipe, ditherThreshold, emptyPartLayer, faceCells, fillPartLayer, gradientPartLayer, hairPieceStart, headpieceStart, hiddenChoices, isHairPartSlot, isPixelAvatarRecipe, isPixelCustomPart, isReplacePartSlot, mirrorPartX, noisePartLayer, paintPartLayer, partCells, partLayer, partLinePoints, partRectPoints, partToneColor, pixelAvatarSvg, pixelFigure, pixelSymbolCells, pixelTileColor, replacePartStart, seededRandom, seededRecipe, seededRecipeV2, shadePartLayer, symbolArtCells, withBuiltInHeadpiece, withCustomPart, withHeadpiece, withPieces, withSpecies, wornPart };
 //# sourceMappingURL=index.js.map