@botharness/pixel-avatar 0.8.0 → 0.10.0

package/dist/index.js

@@ -331,8 +331,55 @@ const AVATAR_SPECIES = [
 	"orc",
 	"flower"
 ];
+/**
+* Anthropomorphic animal species (asset version 4): a muzzle, animal ears and fur colors. The
+* skin color is the fur color, and an optional `pattern` is drawn in its tones.
+*/
+const AVATAR_ANIMAL_SPECIES = [
+	"cat",
+	"dog",
+	"fox",
+	"rabbit",
+	"bear"
+];
+const isAnimalSpecies = (species) => AVATAR_ANIMAL_SPECIES.includes(species);
+/** Fur patterns for animal species, drawn in skin-color tones so they survive recoloring. */
+const AVATAR_PATTERNS = [
+	"solid",
+	"tabby",
+	"spots",
+	"patches",
+	"colorpoint"
+];
 /** 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,
@@ -379,7 +426,8 @@ const CUSTOM_PART_KEYS = {
 	nose: "nosePart",
 	cheeks: "cheeksPart",
 	petals: "petalsPart",
-	flowerBase: "flowerBasePart"
+	flowerBase: "flowerBasePart",
+	pattern: "patternPart"
 };
 const PART_KEY_ENTRIES = Object.entries(CUSTOM_PART_KEYS);
 const DEFAULT_RECIPE = {
@@ -410,19 +458,29 @@ 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;
+	if (!v4 && Object.hasOwn(r, CUSTOM_PART_KEYS.pattern)) return false;
+	const newer = [
+		...AVATAR_PIECE_COLORS_V4,
+		"strand",
+		"pattern"
+	].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"]) || Object.hasOwn(r, "pattern") && !AVATAR_PATTERNS.includes(r["pattern"]))) 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;
+	if (v2 && (detailed === 0 || !(AVATAR_SPECIES.includes(r["species"]) || v4 && isAnimalSpecies(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;
 	return (detailed === 0 || Object.keys(AVATAR_HAIR_PARTS).every((key) => typeof r[key] === "string" && AVATAR_HAIR_PARTS[key].includes(r[key])) && Object.keys(AVATAR_RANGES).every((key) => {
 		const v = r[key];
@@ -445,9 +503,14 @@ 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;
+			if (recipe.pattern !== void 0 && recipe.pattern !== "solid") canonical["pattern"] = recipe.pattern;
+			for (const key of AVATAR_PIECE_COLORS_V4) if (recipe[key] !== void 0) canonical[key] = recipe[key].toLowerCase();
 		}
 	}
 	return canonical;
@@ -458,14 +521,23 @@ const HAIR_PIECES = [
 	"rightSideHair",
 	"backHair"
 ];
+const EAR_PIECES = [
+	"catears",
+	"bunnyears",
+	"horseears"
+];
 /**
 * Saved choices the recipe keeps but does not draw: a flower shows petals and a stem instead of
 * hair, outfit, beard and headwear, and a helmet or hood covers the hair. The choices return when
 * 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",
@@ -473,50 +545,86 @@ function hiddenChoices(recipe) {
 		"nose",
 		"cheeks",
 		"glasses",
-		...recipe.beard || wornPart(recipe, "beard") ? ["beard"] : []
+		...recipe.beard || wornPart(recipe, "beard") ? ["beard"] : [],
+		...recipe.pattern || wornPart(recipe, "pattern") ? ["pattern"] : []
 	];
 	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);
+	if (isAnimalSpecies(recipe.species)) {
+		hidden.push("nose");
+		if (EAR_PIECES.includes(builtInHeadpiece(recipe) ?? "")) hidden.push("headpiece");
+		if (EAR_PIECES.includes(recipe.accessory) && !wornPart(recipe, "accessory")) hidden.push("accessory");
+	} else if (recipe.pattern || wornPart(recipe, "pattern")) hidden.push("pattern");
 	return hidden;
 }
-function withSpecies(recipe, species) {
+function withSpecies(source, species) {
+	const recipe = isAnimalSpecies(species) && source.assetVersion !== 4 ? withPieces(source) : source;
 	const detailed = detailedRecipe(recipe);
 	const previous = recipe.species ?? "human";
 	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 base = { ...slot === "pattern" && part !== void 0 ? withPieces(recipe) : recipe.assetVersion === 1 ? withSpecies(recipe, "human") : recipe };
 	const key = CUSTOM_PART_KEYS[slot];
 	delete base[key];
 	if (part !== void 0) base[key] = canonicalCustomPart({
 		...part,
 		slot
 	});
+	if (base["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;
@@ -745,6 +853,46 @@ const AVATAR_SPECIES_SWATCHES = {
 		"#e8a85a",
 		"#c98b4a",
 		"#f4f1ec"
+	],
+	cat: [
+		"#f2a65a",
+		"#9aa3ad",
+		"#3a3438",
+		"#f4f1ec",
+		"#c98b4a",
+		"#e8d2b0"
+	],
+	dog: [
+		"#c98b4a",
+		"#e8d2b0",
+		"#8a5a36",
+		"#f4f1ec",
+		"#3a3438",
+		"#d9a066"
+	],
+	fox: [
+		"#e0763a",
+		"#c4452f",
+		"#f2a65a",
+		"#f4f1ec",
+		"#8a5a36",
+		"#9aa3ad"
+	],
+	rabbit: [
+		"#f4f1ec",
+		"#d9c7b8",
+		"#9aa3ad",
+		"#8a5a36",
+		"#e8d2b0",
+		"#3a3438"
+	],
+	bear: [
+		"#8a5a36",
+		"#5a3a2a",
+		"#c98b4a",
+		"#3a3438",
+		"#f4f1ec",
+		"#d9a066"
 	]
 };
 const preset = (parts) => ({
@@ -934,6 +1082,10 @@ const PART_SLOTS = {
 	flowerBase: {
 		width: 32,
 		height: 32
+	},
+	pattern: {
+		width: 32,
+		height: 32
 	}
 };
 /**
@@ -959,7 +1111,8 @@ const REPLACE_PART_SLOTS = [
 	"nose",
 	"cheeks",
 	"petals",
-	"flowerBase"
+	"flowerBase",
+	"pattern"
 ];
 const isReplacePartSlot = (slot) => REPLACE_PART_SLOTS.includes(slot);
 /** Tone steps on the rig's shade ramp: two darker, the color itself, two lighter. */
@@ -1659,6 +1812,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,
@@ -1673,8 +1859,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,
@@ -2019,6 +2208,172 @@ 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 ANIMALS = {
+	cat: {
+		ears: [
+			"E...",
+			"EE..",
+			"EiE.",
+			"EEEE"
+		],
+		x: -9,
+		y: 2,
+		inner: "pink"
+	},
+	fox: {
+		ears: [
+			"D....",
+			"EE...",
+			"EiE..",
+			"EiiE.",
+			"EEEEE"
+		],
+		x: -10,
+		y: 1,
+		inner: "fur"
+	},
+	rabbit: {
+		ears: [
+			"EE",
+			"Ei",
+			"Ei",
+			"Ei",
+			"Ei",
+			"EE"
+		],
+		x: -6,
+		y: 0,
+		inner: "pink"
+	},
+	bear: {
+		ears: [
+			".EE.",
+			"EiiE",
+			"EEEE"
+		],
+		x: -10,
+		y: 3,
+		inner: "fur"
+	},
+	dog: {
+		ears: [
+			"EEE.",
+			"EEEE",
+			"EEEE",
+			".EEE",
+			"..EE"
+		],
+		x: -13,
+		y: 7,
+		inner: "fur",
+		side: true
+	}
+};
+function patternMask(recipe, s, fs, face) {
+	const cx = C + s;
+	const mid = C + fs * .6;
+	switch (recipe.pattern) {
+		case "tabby": {
+			let top = 0;
+			while (top < N && !face(Math.round(cx), top)) top++;
+			return (x, y) => y >= top && y <= top + 3 && Math.abs(x + .5 - cx) <= 3 && (x + 40 - Math.round(cx)) % 2 === 0 || (y === 17 || y === 19) && Math.abs(x + .5 - mid) >= 6.5;
+		}
+		case "spots": return (x, y) => [
+			[-7, 21],
+			[-6, 22],
+			[-5, 21],
+			[5, 21],
+			[6, 22],
+			[7, 21],
+			[-2, 23],
+			[2, 23]
+		].some(([dx, dy]) => x === Math.round(cx) + dx && y === dy);
+		case "patches": return (x, y) => ellipse(cx - 4, 14, 3.6, 3.2)(x, y) || ellipse(cx + 5, 9, 2.6, 2)(x, y);
+		case "colorpoint": return (x, y) => (x + .5 - cx) ** 2 / 64 + (y + .5 - 16.6) ** 2 / 49 > .62;
+		default: return () => false;
+	}
+}
 const POINTED_EARS = {
 	goblin: {
 		rows: [
@@ -2135,10 +2490,11 @@ function renderFigure(recipe, yawDeg, options, omit) {
 		return front(x - Math.round(d * (1 + Math.max(0, y - 20) * .4) - d * tuck), y);
 	} : front;
 	const flower = recipe.species === "flower";
+	const animal = isAnimalSpecies(recipe.species) ? ANIMALS[recipe.species] : void 0;
 	const hiddenNow = hiddenChoices(recipe);
 	const drawnParts = new Map(REPLACE_PART_SLOTS.flatMap((slot) => {
 		const part = wornPart(recipe, slot);
-		const shown = slot === "petals" || slot === "flowerBase" ? flower : !hiddenNow.includes(slot);
+		const shown = slot === "petals" || slot === "flowerBase" ? flower : slot === "pattern" ? animal !== void 0 : !hiddenNow.includes(slot);
 		return part && shown ? [[slot, part.front]] : [];
 	}));
 	const skip = (slot) => omit.has(slot) || drawnParts.has(slot);
@@ -2205,7 +2561,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: [] } : {}
@@ -2244,8 +2600,18 @@ function renderFigure(recipe, yawDeg, options, omit) {
 	placeCells(back, inked("backHair"), false);
 	overlay(back, "petals");
 	if (headpiece) placeCells(back, headpiece.back);
+	const wornHead = flower || hiddenNow.includes("headpiece") ? 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);
+	if (animal) {
+		const pattern = patternMask(recipe, s, fs, face);
+		if (!skip("pattern")) paint(head, (x, y) => face(x, y) && pattern(x, y), TONES[recipe.pattern === "patches" ? -2 : -1](skin));
+		overlay(head, "pattern");
+		const muzzle = ellipse(C + fs * .6, 20.6 + (recipe.height ?? 0), 3.9, 2.6);
+		paint(head, (x, y) => face(x, y) && muzzle(x, y), TONES[2](skin));
+	}
 	const h = recipe.height ?? 0;
 	if (recipe.beard && !flower && !skip("beard")) {
 		const centre = C + fs * .6;
@@ -2263,7 +2629,17 @@ function renderFigure(recipe, yawDeg, options, omit) {
 		return side < 0 ? xs[0] - 1 : xs.at(-1) + 1;
 	};
 	const pointed = recipe.species ? POINTED_EARS[recipe.species] : void 0;
-	if (flower) {} else if (pointed) {
+	if (flower) {} else if (animal) {
+		paint(head, masks.front, hairColor);
+		const pal = {
+			E: recipe.pattern === "colorpoint" || animal.side ? shade(skin, .72) : skin,
+			i: animal.inner === "pink" ? "#f4a3b5" : shade(skin, .72),
+			D: shade(skin, .45)
+		};
+		const cx = Math.round(C + s);
+		const sides = animal.side && turned ? [-d] : [-1, 1];
+		for (const side of sides) sprite(head, animal.ears, side < 0 ? cx + animal.x : cx - animal.x - animal.ears[0].length, animal.y, pal, side > 0);
+	} else if (pointed) {
 		const pal = {
 			E: skin,
 			e: shade(skin, .86),
@@ -2289,14 +2665,16 @@ function renderFigure(recipe, yawDeg, options, omit) {
 		E: skin,
 		e: shade(skin, .8)
 	});
-	if (!pointed && !flower) paint(head, masks.front, hairColor);
+	if (!pointed && !flower && !animal) paint(head, masks.front, hairColor);
 	for (const [x, y] of masks.ties ?? []) sprite(back, ["T"], Math.round(x), y, { T: shade(recipe.shirtColor, .8) });
-	if (!flower && !skip("accessory")) accessory(recipe, head, s, face);
+	if (!flower && !skip("accessory") && !hiddenNow.includes("accessory")) accessory(recipe, head, s, face);
 	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);
@@ -2325,7 +2703,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;
@@ -2338,6 +2716,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,
@@ -2407,7 +2786,8 @@ function renderFigure(recipe, yawDeg, options, omit) {
 		sprite(features, fit(browRows, right.w), right.x, eyeTop - 2, { B: shade(hairColor, .55) }, true);
 	}
 	const cx = Math.round(C + fs * (turned ? .85 : .6));
-	if (flower) {} else if (recipe.species === "dwarf") sprite(features, [".N.", "NnN"], cx - 1, 17 + h, {
+	if (flower) {} else if (animal) sprite(features, ["NNN", ".N."], Math.round(C + fs * .6) - 1, 18 + h, { N: mix$1(INK$1, skin, .2) });
+	else if (recipe.species === "dwarf") sprite(features, [".N.", "NnN"], cx - 1, 17 + h, {
 		N: shade(skin, .84),
 		n: shade(skin, .72)
 	});
@@ -2475,17 +2855,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];
 	});
@@ -2560,6 +2965,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
@@ -2577,16 +3033,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];
@@ -3125,5 +3572,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, ditherThreshold, emptyPartLayer, faceCells, fillPartLayer, gradientPartLayer, hairPieceStart, hiddenChoices, isHairPartSlot, isPixelAvatarRecipe, isPixelCustomPart, isReplacePartSlot, mirrorPartX, noisePartLayer, paintPartLayer, partCells, partLayer, partLinePoints, partRectPoints, partToneColor, pixelAvatarSvg, pixelFigure, pixelSymbolCells, pixelTileColor, replacePartStart, seededRandom, seededRecipe, seededRecipeV2, shadePartLayer, symbolArtCells, withCustomPart, withHeadpiece, withSpecies, wornPart };
+export { AVATAR_ANIMAL_SPECIES, AVATAR_COLORS, AVATAR_EXTRA_PARTS, AVATAR_HAIR_PARTS, AVATAR_HEADPIECES, AVATAR_PARTS, AVATAR_PARTS_V2, AVATAR_PATTERNS, 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, isAnimalSpecies, 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