@botharness/pixel-avatar 0.5.0 → 0.6.0

package/dist/index.js

@@ -1,191 +1,5 @@
 import { escapeAttribute } from "@botharness/pixel-morph";
 
-//#region src/part.ts
-/**
-* Custom Part slots. A headpiece covers the top of the tile, around the hair: its back layer is
-* drawn behind the hair and its front layer over it. Cells are in tile coordinates, so the
-* Avatar centerline sits between x = 15 and x = 16.
-*/
-const PART_SLOTS = { headpiece: {
-	width: 32,
-	height: 16
-} };
-/** Tone steps on the rig's shade ramp: two darker, the color itself, two lighter. */
-const PART_TONES = [
-	-2,
-	-1,
-	0,
-	1,
-	2
-];
-const PART_LAYERS = ["front", "back"];
-/** Most fixed colors one part may use. */
-const MAX_PART_FIXED_COLORS = 16;
-const FIXED = /^#[\da-f]{6}$/iu;
-const isColor = (value) => typeof value === "string" && (AVATAR_COLORS.includes(value) || FIXED.test(value));
-function isPixelCustomPart(value) {
-	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
-	const r = value;
-	if (Object.keys(r).length !== 3 || !Object.hasOwn(PART_SLOTS, r["slot"])) return false;
-	const { width, height } = PART_SLOTS[r["slot"]];
-	const fixed = /* @__PURE__ */ new Set();
-	for (const name of PART_LAYERS) {
-		const cells = r[name];
-		if (!Array.isArray(cells) || cells.length > width * height) return false;
-		const seen = /* @__PURE__ */ new Set();
-		for (const cell of cells) {
-			if (!Array.isArray(cell) || cell.length !== 4) return false;
-			const [x, y, color, tone] = cell;
-			if (!Number.isInteger(x) || !Number.isInteger(y) || x < 0 || x >= width || y < 0 || y >= height || !isColor(color) || !PART_TONES.includes(tone)) return false;
-			const key = y * width + x;
-			if (seen.has(key)) return false;
-			seen.add(key);
-			if (color.startsWith("#")) fixed.add(color.toLowerCase());
-		}
-	}
-	return fixed.size <= MAX_PART_FIXED_COLORS;
-}
-const canonicalCells = (cells) => cells.map(([x, y, color, tone]) => [
-	x,
-	y,
-	color.startsWith("#") ? color.toLowerCase() : color,
-	tone
-]).sort((a, b) => a[1] - b[1] || a[0] - b[0]);
-/** The part with cells in row order and fixed colors in lowercase. */
-function canonicalCustomPart(part) {
-	return {
-		slot: part.slot,
-		front: canonicalCells(part.front),
-		back: canonicalCells(part.back)
-	};
-}
-/** Content identity: a SHA-256 of the canonical slot, cells and color references. */
-function customPartId(part) {
-	return sha256(JSON.stringify(canonicalCustomPart(part)));
-}
-function emptyPartLayer(slot) {
-	const { width, height } = PART_SLOTS[slot];
-	return Array.from({ length: height }, () => Array(width).fill(null));
-}
-function partLayer(slot, cells) {
-	const layer = emptyPartLayer(slot);
-	for (const [x, y, color, tone] of cells) layer[y][x] = {
-		color,
-		tone
-	};
-	return layer;
-}
-function partCells(layer) {
-	return layer.flatMap((row, y) => row.flatMap((ink, x) => ink ? [[
-		x,
-		y,
-		ink.color,
-		ink.tone
-	]] : []));
-}
-/** Builds a canonical part from two drawn layers. */
-function createCustomPart(slot, layers) {
-	return canonicalCustomPart({
-		slot,
-		front: partCells(layers.front),
-		back: partCells(layers.back)
-	});
-}
-/** The column mirrored across the Avatar centerline. */
-function mirrorPartX(slot, x) {
-	return PART_SLOTS[slot].width - 1 - x;
-}
-const same = (a, b) => a === b || a !== null && b !== null && a.color === b.color && a.tone === b.tone;
-/** Sets cells (pencil with ink, eraser with `null`), optionally mirrored across the centerline. */
-function paintPartLayer(slot, layer, points, ink, mirror = false) {
-	const out = layer.map((row) => [...row]);
-	const { width, height } = PART_SLOTS[slot];
-	for (const [x, y] of points) for (const px of mirror ? [x, mirrorPartX(slot, x)] : [x]) if (px >= 0 && px < width && y >= 0 && y < height) out[y][px] = ink;
-	return out;
-}
-/**
-* 4-connected flood fill from a cell: every cell reachable through cells equal to the start
-* becomes `ink`. With `mirror`, the mirrored start is filled too.
-*/
-function fillPartLayer(slot, layer, x, y, ink, mirror = false) {
-	const { width, height } = PART_SLOTS[slot];
-	let out = layer.map((row) => [...row]);
-	for (const sx of mirror ? [x, mirrorPartX(slot, x)] : [x]) {
-		if (sx < 0 || sx >= width || y < 0 || y >= height) continue;
-		const target = out[y][sx];
-		if (same(target, ink)) continue;
-		const next = out.map((row) => [...row]);
-		const stack = [[sx, y]];
-		while (stack.length) {
-			const [cx, cy] = stack.pop();
-			if (cx < 0 || cx >= width || cy < 0 || cy >= height) continue;
-			if (!same(next[cy][cx], target)) continue;
-			next[cy][cx] = ink;
-			stack.push([cx + 1, cy], [cx - 1, cy], [cx, cy + 1], [cx, cy - 1]);
-		}
-		out = next;
-	}
-	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);
-	const length = Math.ceil((bytes.length + 9) / 64) * 64;
-	const data = new Uint8Array(length);
-	data.set(bytes);
-	data[bytes.length] = 128;
-	const view = new DataView(data.buffer);
-	view.setUint32(length - 8, Math.floor(bytes.length * 8 / 2 ** 32));
-	view.setUint32(length - 4, bytes.length * 8 >>> 0);
-	const h = Uint32Array.from([
-		1779033703,
-		3144134277,
-		1013904242,
-		2773480762,
-		1359893119,
-		2600822924,
-		528734635,
-		1541459225
-	]);
-	const w = new Uint32Array(64);
-	const rotr = (v, n) => v >>> n | v << 32 - n;
-	for (let offset = 0; offset < length; offset += 64) {
-		for (let i = 0; i < 16; i++) w[i] = view.getUint32(offset + i * 4);
-		for (let i = 16; i < 64; i++) {
-			const a = w[i - 15];
-			const b = w[i - 2];
-			const s0 = rotr(a, 7) ^ rotr(a, 18) ^ a >>> 3;
-			const s1 = rotr(b, 17) ^ rotr(b, 19) ^ b >>> 10;
-			w[i] = w[i - 16] + s0 + w[i - 7] + s1 >>> 0;
-		}
-		let [a, b, c, d, e, f, g, k] = h;
-		for (let i = 0; i < 64; i++) {
-			const t1 = k + (rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25)) + (e & f ^ ~e & g) + K[i] + w[i] >>> 0;
-			const t2 = (rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22)) + (a & b ^ a & c ^ b & c) >>> 0;
-			k = g;
-			g = f;
-			f = e;
-			e = d + t1 >>> 0;
-			d = c;
-			c = b;
-			b = a;
-			a = t1 + t2 >>> 0;
-		}
-		[
-			a,
-			b,
-			c,
-			d,
-			e,
-			f,
-			g,
-			k
-		].forEach((v, i) => h[i] = h[i] + v >>> 0);
-	}
-	return [...h].map((v) => v.toString(16).padStart(8, "0")).join("");
-}
-
-//#endregion
 //#region src/random.ts
 function seededRandom(seed) {
 	let h = 2166136261;
@@ -551,6 +365,15 @@ const AVATAR_EXTRA_PARTS = {
 	],
 	flowerBase: ["leaves", "pot"]
 };
+/** The recipe key that embeds the Custom Part worn in each slot. */
+const CUSTOM_PART_KEYS = {
+	headpiece: "headpiece",
+	bangs: "bangsPart",
+	leftSideHair: "leftSideHairPart",
+	rightSideHair: "rightSideHairPart",
+	backHair: "backHairPart"
+};
+const PART_KEY_ENTRIES = Object.entries(CUSTOM_PART_KEYS);
 const DEFAULT_RECIPE = {
 	schemaVersion: 1,
 	family: "illustrated",
@@ -581,10 +404,15 @@ function isPixelAvatarRecipe(value) {
 	if (detailed !== 0 && detailed !== DETAIL_KEYS.length) return false;
 	const v3 = r["assetVersion"] === 3;
 	const v2 = r["assetVersion"] === 2 || v3;
-	if (v3 ? !isPixelCustomPart(r["headpiece"]) : Object.hasOwn(r, "headpiece")) return false;
+	const worn = PART_KEY_ENTRIES.filter(([, key]) => Object.hasOwn(r, key));
+	if (v3 ? worn.length === 0 : worn.length !== 0) 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 + (v3 ? 1 : 0) : 0;
+	const v2Keys = v2 ? 2 + pieces.length + extras.length + worn.length : 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;
@@ -609,7 +437,10 @@ 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) canonical["headpiece"] = canonicalCustomPart(recipe.headpiece);
+		if (recipe.assetVersion === 3) for (const [, key] of PART_KEY_ENTRIES) {
+			const part = recipe[key];
+			if (part !== void 0) canonical[key] = canonicalCustomPart(part);
+		}
 	}
 	return canonical;
 }
@@ -654,21 +485,31 @@ function withSpecies(recipe, species) {
 	};
 }
 /**
-* Returns the recipe wearing a Custom Part in the headpiece slot (asset version 3), or without
-* one (asset version 2). The recipe embeds its own copy of the part.
+* 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 withHeadpiece(recipe, part) {
-	const { headpiece: _, ...rest } = recipe.assetVersion === 1 ? withSpecies(recipe, "human") : recipe;
-	if (part === void 0) return {
-		...rest,
-		assetVersion: 2
-	};
+function withCustomPart(recipe, slot, part) {
+	const base = { ...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
+	});
+	const wearing = PART_KEY_ENTRIES.some(([, k]) => base[k] !== void 0);
 	return {
-		...rest,
-		assetVersion: 3,
-		headpiece: canonicalCustomPart(part)
+		...base,
+		assetVersion: wearing ? 3 : 2
 	};
 }
+/** `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;
+}
 function detailedRecipe(recipe) {
 	if (recipe.bangs !== void 0) return recipe;
 	const pick = (part) => AVATAR_HAIR_PARTS[part].includes(recipe.hair) ? recipe.hair : HAIR_SPLIT[recipe.hair][part];
@@ -1025,6 +866,223 @@ const AVATAR_PRESETS = [
 	})
 ];
 
+//#endregion
+//#region src/part.ts
+/**
+* Custom Part slots. A headpiece covers the top of the tile, around the hair: its back layer is
+* drawn behind the hair and its front layer over it. Hair slots replace one built-in hair piece
+* and use only the front layer. Cells are in tile coordinates, so the Avatar centerline sits
+* between x = 15 and x = 16.
+*/
+const PART_SLOTS = {
+	headpiece: {
+		width: 32,
+		height: 16
+	},
+	bangs: {
+		width: 32,
+		height: 32
+	},
+	leftSideHair: {
+		width: 32,
+		height: 32
+	},
+	rightSideHair: {
+		width: 32,
+		height: 32
+	},
+	backHair: {
+		width: 32,
+		height: 32
+	}
+};
+/**
+* Hair slots. In a hair part, a `hairColor` cell at tone 0 is live hair: it is shaded with the
+* rest of the hair, exactly like a built-in piece. Every other cell shows its own color.
+*/
+const HAIR_PART_SLOTS = [
+	"bangs",
+	"leftSideHair",
+	"rightSideHair",
+	"backHair"
+];
+const isHairPartSlot = (slot) => HAIR_PART_SLOTS.includes(slot);
+/** Tone steps on the rig's shade ramp: two darker, the color itself, two lighter. */
+const PART_TONES = [
+	-2,
+	-1,
+	0,
+	1,
+	2
+];
+const PART_LAYERS = ["front", "back"];
+/** Most fixed colors one part may use. */
+const MAX_PART_FIXED_COLORS = 16;
+const FIXED = /^#[\da-f]{6}$/iu;
+const isColor = (value) => typeof value === "string" && (AVATAR_COLORS.includes(value) || FIXED.test(value));
+function isPixelCustomPart(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+	const r = value;
+	if (Object.keys(r).length !== 3 || !Object.hasOwn(PART_SLOTS, r["slot"])) return false;
+	const { width, height } = PART_SLOTS[r["slot"]];
+	if (isHairPartSlot(r["slot"]) && r["back"]?.length !== 0) return false;
+	const fixed = /* @__PURE__ */ new Set();
+	for (const name of PART_LAYERS) {
+		const cells = r[name];
+		if (!Array.isArray(cells) || cells.length > width * height) return false;
+		const seen = /* @__PURE__ */ new Set();
+		for (const cell of cells) {
+			if (!Array.isArray(cell) || cell.length !== 4) return false;
+			const [x, y, color, tone] = cell;
+			if (!Number.isInteger(x) || !Number.isInteger(y) || x < 0 || x >= width || y < 0 || y >= height || !isColor(color) || !PART_TONES.includes(tone)) return false;
+			const key = y * width + x;
+			if (seen.has(key)) return false;
+			seen.add(key);
+			if (color.startsWith("#")) fixed.add(color.toLowerCase());
+		}
+	}
+	return fixed.size <= MAX_PART_FIXED_COLORS;
+}
+const canonicalCells = (cells) => cells.map(([x, y, color, tone]) => [
+	x,
+	y,
+	color.startsWith("#") ? color.toLowerCase() : color,
+	tone
+]).sort((a, b) => a[1] - b[1] || a[0] - b[0]);
+/** The part with cells in row order and fixed colors in lowercase. */
+function canonicalCustomPart(part) {
+	return {
+		slot: part.slot,
+		front: canonicalCells(part.front),
+		back: canonicalCells(part.back)
+	};
+}
+/** Content identity: a SHA-256 of the canonical slot, cells and color references. */
+function customPartId(part) {
+	return sha256(JSON.stringify(canonicalCustomPart(part)));
+}
+function emptyPartLayer(slot) {
+	const { width, height } = PART_SLOTS[slot];
+	return Array.from({ length: height }, () => Array(width).fill(null));
+}
+function partLayer(slot, cells) {
+	const layer = emptyPartLayer(slot);
+	for (const [x, y, color, tone] of cells) layer[y][x] = {
+		color,
+		tone
+	};
+	return layer;
+}
+function partCells(layer) {
+	return layer.flatMap((row, y) => row.flatMap((ink, x) => ink ? [[
+		x,
+		y,
+		ink.color,
+		ink.tone
+	]] : []));
+}
+/** Builds a canonical part from two drawn layers. */
+function createCustomPart(slot, layers) {
+	return canonicalCustomPart({
+		slot,
+		front: partCells(layers.front),
+		back: partCells(layers.back)
+	});
+}
+/** The column mirrored across the Avatar centerline. */
+function mirrorPartX(slot, x) {
+	return PART_SLOTS[slot].width - 1 - x;
+}
+const same = (a, b) => a === b || a !== null && b !== null && a.color === b.color && a.tone === b.tone;
+/** Sets cells (pencil with ink, eraser with `null`), optionally mirrored across the centerline. */
+function paintPartLayer(slot, layer, points, ink, mirror = false) {
+	const out = layer.map((row) => [...row]);
+	const { width, height } = PART_SLOTS[slot];
+	for (const [x, y] of points) for (const px of mirror ? [x, mirrorPartX(slot, x)] : [x]) if (px >= 0 && px < width && y >= 0 && y < height) out[y][px] = ink;
+	return out;
+}
+/**
+* 4-connected flood fill from a cell: every cell reachable through cells equal to the start
+* becomes `ink`. With `mirror`, the mirrored start is filled too.
+*/
+function fillPartLayer(slot, layer, x, y, ink, mirror = false) {
+	const { width, height } = PART_SLOTS[slot];
+	let out = layer.map((row) => [...row]);
+	for (const sx of mirror ? [x, mirrorPartX(slot, x)] : [x]) {
+		if (sx < 0 || sx >= width || y < 0 || y >= height) continue;
+		const target = out[y][sx];
+		if (same(target, ink)) continue;
+		const next = out.map((row) => [...row]);
+		const stack = [[sx, y]];
+		while (stack.length) {
+			const [cx, cy] = stack.pop();
+			if (cx < 0 || cx >= width || cy < 0 || cy >= height) continue;
+			if (!same(next[cy][cx], target)) continue;
+			next[cy][cx] = ink;
+			stack.push([cx + 1, cy], [cx - 1, cy], [cx, cy + 1], [cx, cy - 1]);
+		}
+		out = next;
+	}
+	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);
+	const length = Math.ceil((bytes.length + 9) / 64) * 64;
+	const data = new Uint8Array(length);
+	data.set(bytes);
+	data[bytes.length] = 128;
+	const view = new DataView(data.buffer);
+	view.setUint32(length - 8, Math.floor(bytes.length * 8 / 2 ** 32));
+	view.setUint32(length - 4, bytes.length * 8 >>> 0);
+	const h = Uint32Array.from([
+		1779033703,
+		3144134277,
+		1013904242,
+		2773480762,
+		1359893119,
+		2600822924,
+		528734635,
+		1541459225
+	]);
+	const w = new Uint32Array(64);
+	const rotr = (v, n) => v >>> n | v << 32 - n;
+	for (let offset = 0; offset < length; offset += 64) {
+		for (let i = 0; i < 16; i++) w[i] = view.getUint32(offset + i * 4);
+		for (let i = 16; i < 64; i++) {
+			const a = w[i - 15];
+			const b = w[i - 2];
+			const s0 = rotr(a, 7) ^ rotr(a, 18) ^ a >>> 3;
+			const s1 = rotr(b, 17) ^ rotr(b, 19) ^ b >>> 10;
+			w[i] = w[i - 16] + s0 + w[i - 7] + s1 >>> 0;
+		}
+		let [a, b, c, d, e, f, g, k] = h;
+		for (let i = 0; i < 64; i++) {
+			const t1 = k + (rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25)) + (e & f ^ ~e & g) + K[i] + w[i] >>> 0;
+			const t2 = (rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22)) + (a & b ^ a & c ^ b & c) >>> 0;
+			k = g;
+			g = f;
+			f = e;
+			e = d + t1 >>> 0;
+			d = c;
+			c = b;
+			b = a;
+			a = t1 + t2 >>> 0;
+		}
+		[
+			a,
+			b,
+			c,
+			d,
+			e,
+			f,
+			g,
+			k
+		].forEach((v, i) => h[i] = h[i] + v >>> 0);
+	}
+	return [...h].map((v) => v.toString(16).padStart(8, "0")).join("");
+}
+
 //#endregion
 //#region src/figure.ts
 const N = 32;
@@ -1382,10 +1440,18 @@ function detailedHair(recipe, s, b) {
 	const length = (recipe.hairLength ?? 0) * 2;
 	const lengthen = (mask) => (x, y) => mask(x, y > 18 ? Math.round(y - length) : y);
 	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);
 	return {
-		front: (x, y) => y <= 7 ? bangs.front(x, y) || back.front(x, y) : Math.abs(x + .5 - C - s) < 7 ? bangs.front(x, y) : lengthen((x + .5 - C - s < 0 ? side : right).front)(x, y),
+		front: (x, y) => fringe(x, y) || sideOf(-1)(x, y) || sideOf(1)(x, y),
 		sides: [sideOf(-1), sideOf(1)],
-		back: length === 0 ? back.back : lengthen(back.back),
+		pieces: {
+			bangs: fringe,
+			leftSideHair: sideOf(-1),
+			rightSideHair: sideOf(1),
+			backHair: behind
+		},
+		back: behind,
 		...back.ties ? { ties: back.ties } : {},
 		...back.bands ? { bands: back.bands } : {}
 	};
@@ -1832,7 +1898,7 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 	const covered = recipe.accessory === "helmet" || recipe.accessory === "hood";
 	const bare = () => false;
 	const petalRing = flower ? petals(recipe.petals ?? "trumpet", s) : bare;
-	const masks = flower ? {
+	const builtin = flower ? {
 		back: petalRing,
 		front: bare,
 		sides: [(x, y) => petalRing(x, y) && x + .5 < C + s, (x, y) => petalRing(x, y) && x + .5 >= C + s]
@@ -1840,6 +1906,40 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		back: bare,
 		front: bare
 	} : recipe.bangs === void 0 ? hair(recipe, s, b) : detailedHair(recipe, s, b);
+	const drawnHair = HAIR_PART_SLOTS.flatMap((slot) => {
+		const part = builtin.pieces ? wornPart(recipe, slot) : void 0;
+		return part ? [{
+			slot,
+			part
+		}] : [];
+	});
+	const live = (cells, shift) => {
+		const keys = new Set(cells.flatMap(([x, y, color, tone]) => color === "hairColor" && tone === 0 ? [`${x + shift},${y}`] : []));
+		return (x, y) => keys.has(`${x},${y}`);
+	};
+	const backShift = () => {
+		if (s === b || !builtin.pieces) return s;
+		const front = detailedHair(detailedRecipe(recipe), 0, 0).pieces.backHair;
+		const misses = (shift) => {
+			let count = 0;
+			for (let y = 0; y < N; y++) for (let x = -4; x < N + 4; x++) if (front(x, y) !== builtin.pieces.backHair(x + shift, y)) count++;
+			return count;
+		};
+		return misses(b) < misses(s) ? b : s;
+	};
+	const piece = (slot) => {
+		const part = drawnHair.find((drawn) => drawn.slot === slot)?.part;
+		if (!part) return builtin.pieces[slot];
+		return live(part.front, slot === "backHair" ? backShift() : s);
+	};
+	const masks = drawnHair.length === 0 ? builtin : {
+		...builtin,
+		front: (x, y) => piece("bangs")(x, y) || piece("leftSideHair")(x, y) || piece("rightSideHair")(x, y),
+		sides: [piece("leftSideHair"), piece("rightSideHair")],
+		back: piece("backHair"),
+		...drawnHair.some((drawn) => drawn.slot === "backHair") ? { ties: [] } : {}
+	};
+	const inked = (slot) => drawnHair.filter((drawn) => slot === "all-front" ? drawn.slot !== "backHair" : drawn.slot === slot).flatMap((drawn) => drawn.part.front.filter(([, , color, tone]) => !(color === "hairColor" && tone === 0)));
 	const body = blank();
 	if (flower) flowerBase(recipe, body, s);
 	else outfit(recipe, body, s);
@@ -1850,11 +1950,11 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		paint(back, (x, y) => petalRing(x, y) && x + .5 < C + s - 3 && y < 10, mix$1(hairColor, WHITE, .3));
 	} else paint(back, masks.back, shade(hairColor, .82));
 	if (masks.bands) paint(back, (x, y) => masks.back(x, y) && (y + Math.floor(x / 2)) % 4 === 0, shade(hairColor, .68));
-	const headpiece = recipe.assetVersion === 3 ? recipe.headpiece : void 0;
-	const placeCells = (grid, cells) => {
+	const headpiece = wornPart(recipe, "headpiece");
+	const placeCells = (grid, cells, compress = true) => {
 		const placed = cells.map(([x, y, color, tone]) => {
 			const dx = x + .5 - C;
-			const far = turned && d * dx < 0 && Math.abs(dx) >= 5;
+			const far = compress && turned && d * dx < 0 && Math.abs(dx) >= 5;
 			const base = color.startsWith("#") ? color.toLowerCase() : recipe[color];
 			return {
 				x: x + s + (far ? d : 0),
@@ -1865,6 +1965,7 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		});
 		for (const cell of [...placed.filter((p) => p.far), ...placed.filter((p) => !p.far)]) if (cell.x >= 0 && cell.x < N) grid[cell.y][cell.x] = cell.c;
 	};
+	placeCells(back, inked("backHair"), false);
 	if (headpiece) placeCells(back, headpiece.back);
 	const head = blank();
 	paint(head, face, skin);
@@ -1955,6 +2056,7 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		return out;
 	};
 	const crown = blank();
+	placeCells(crown, inked("all-front"), false);
 	if (headpiece) placeCells(crown, headpiece.front);
 	const figure = blank();
 	for (const layer of [
@@ -2133,6 +2235,40 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		].join("")
 	};
 }
+/**
+* The hair piece in `slot` as a Custom Part to start drawing from: the drawn part worn there,
+* or the built-in piece flattened for this recipe in the front pose as live `hairColor` cells.
+* A flattened piece keeps this shape and no longer follows face shape or hair length.
+*/
+function hairPieceStart(recipe, slot) {
+	const worn = wornPart(recipe, slot);
+	if (worn) return {
+		slot,
+		front: [...worn.front],
+		back: []
+	};
+	const built = detailedHair(detailedRecipe(recipe), 0, 0);
+	const mask = built.pieces[slot];
+	const ties = new Set(slot === "backHair" ? (built.ties ?? []).map(([x, y]) => `${Math.round(x)},${y}`) : []);
+	const front = [];
+	for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) if (ties.has(`${x},${y}`)) front.push([
+		x,
+		y,
+		"shirtColor",
+		-1
+	]);
+	else if (mask(x, y)) front.push([
+		x,
+		y,
+		"hairColor",
+		0
+	]);
+	return {
+		slot,
+		front,
+		back: []
+	};
+}
 
 //#endregion
 //#region src/svg.ts
@@ -2656,5 +2792,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, DEFAULT_RECIPE, MAX_PART_FIXED_COLORS, PART_LAYERS, PART_SLOTS, PART_TONES, PIXEL_SYMBOLS, canonicalCustomPart, canonicalRecipe, createCustomPart, createSeededRecipe, createSeededRecipeV2, customPartId, detailedRecipe, emptyPartLayer, faceCells, fillPartLayer, hiddenChoices, isPixelAvatarRecipe, isPixelCustomPart, mirrorPartX, paintPartLayer, partCells, partLayer, partToneColor, pixelAvatarSvg, pixelFigure, pixelSymbolCells, pixelTileColor, seededRandom, seededRecipe, seededRecipeV2, symbolArtCells, withHeadpiece, withSpecies };
+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, canonicalCustomPart, canonicalRecipe, createCustomPart, createSeededRecipe, createSeededRecipeV2, customPartId, detailedRecipe, emptyPartLayer, faceCells, fillPartLayer, hairPieceStart, hiddenChoices, isHairPartSlot, isPixelAvatarRecipe, isPixelCustomPart, mirrorPartX, paintPartLayer, partCells, partLayer, partToneColor, pixelAvatarSvg, pixelFigure, pixelSymbolCells, pixelTileColor, seededRandom, seededRecipe, seededRecipeV2, symbolArtCells, withCustomPart, withHeadpiece, withSpecies, wornPart };
 //# sourceMappingURL=index.js.map