@botharness/pixel-avatar 0.6.0 → 0.8.0

package/README.md

@@ -22,6 +22,8 @@ const svg = pixelAvatarSvg(recipe); // 32×32 viewBox, crisp edges, no ids or sc
 - `AVATAR_PARTS_V2`, `AVATAR_EXTRA_PARTS`, `hiddenChoices(recipe)`: version 2 adds elf, dwarf, orc and flower species, armor/robe/tunic/cloak outfits, helmet/hood headwear, an optional `beard`, and a flower's `petals` and `flowerBase`. `hiddenChoices` names saved choices the current species or headwear keeps but does not draw, so an editor can say so instead of discarding them.
 - `PixelCustomPart`, `withHeadpiece(recipe, part)`, `customPartId`, `isPixelCustomPart`: a Human-drawn Custom Part in the `headpiece` slot (the top 32×16 of the tile). Its back layer is drawn behind the hair and its front layer over it, and both follow the head through turns. Each cell is `[x, y, color, tone]`, where `color` is an appearance color slot (`hairColor`, `skinColor`, `eyeColor`, `shirtColor`), so the part recolors with the Avatar, or a fixed `#rrggbb`, and `tone` is a step from −2 to 2 on the rig's shade ramp (`partToneColor`). A recipe wearing a part embeds its own copy as asset version 3. `customPartId` is the SHA-256 of the canonical content; names, authors and origins belong to the consumer's library.
 - `HAIR_PART_SLOTS`, `hairPieceStart(recipe, slot)`, `withCustomPart(recipe, slot, part)`, `wornPart`: drawn hair pieces. `bangs`, `leftSideHair`, `rightSideHair` and `backHair` each take a Custom Part (front layer only) that replaces the built-in piece while it stays saved underneath. In a hair part, a `hairColor` cell at tone 0 is live hair: it is shaded with the rest of the hair exactly like the built-in piece, so `hairPieceStart` flattens the worn built-in piece into such cells and an unchanged copy renders identically. Other cells show their own color. Drawn hair follows turns and is hidden under a helmet or hood and on a flower, like built-in hair.
+- `REPLACE_PART_SLOTS`, `replacePartStart(recipe, slot)`: drawn `outfit`, `accessory`, `beard`, `glasses`, `nose`, `cheeks`, `petals` and `flowerBase` parts (front layer only). A drawn part replaces the built-in part pixel for pixel in the layer that part paints into, while the built-in choice stays saved underneath. `replacePartStart` flattens the worn built-in part for this recipe: pixels that are exactly an appearance color at a tone become that color slot, and the rest become fixed colors, so an unchanged copy renders identically. Drawn face parts never cover the speaking mouth, and drawn parts are hidden wherever the species or headwear hides the built-in part. A drawn accessory replacing a helmet or hood no longer hides the hair.
 - `emptyPartLayer`, `paintPartLayer`, `fillPartLayer`, `mirrorPartX`, `partLayer`, `partCells`, `createCustomPart`: drawing on dense layers, with pencil and eraser strokes, 4-connected flood fill and mirroring across the Avatar centerline.
+- `partLinePoints`, `partRectPoints`, `gradientPartLayer`, `ditherThreshold`, `noisePartLayer`, `shadePartLayer`: line (with 0°/45°/90° snap), rectangle (with square), tone gradient with 4×4 or 2×2 ordered dithering inside the start region, seeded ±1 tone noise, and a shade stroke that moves each colored cell one tone. All mirror, and all produce ordinary cells: the seed and the tool are not part of the part.
 - `faceCells`, `pixelSymbolCells`, `symbolArtCells`: pixels for [`@botharness/pixel-morph`](../morph).
 - `pixelAvatarSvg(recipe, { turns, classPrefix })`: optional pre-rendered head turns, and rig layer classes (`<prefix>-body`, `-head`, `-face`, `-gaze`, `-blink`) for CSS animation.

package/dist/index.d.ts

@@ -90,6 +90,14 @@ declare const CUSTOM_PART_KEYS: {
   readonly leftSideHair: "leftSideHairPart";
   readonly rightSideHair: "rightSideHairPart";
   readonly backHair: "backHairPart";
+  readonly outfit: "outfitPart";
+  readonly accessory: "accessoryPart";
+  readonly beard: "beardPart";
+  readonly glasses: "glassesPart";
+  readonly nose: "nosePart";
+  readonly cheeks: "cheeksPart";
+  readonly petals: "petalsPart";
+  readonly flowerBase: "flowerBasePart";
 };
 type CustomPartKey = (typeof CUSTOM_PART_KEYS)[PartSlot];
 /**
@@ -177,6 +185,38 @@ declare const PART_SLOTS: {
     readonly width: 32;
     readonly height: 32;
   };
+  readonly outfit: {
+    readonly width: 32;
+    readonly height: 32;
+  };
+  readonly accessory: {
+    readonly width: 32;
+    readonly height: 32;
+  };
+  readonly beard: {
+    readonly width: 32;
+    readonly height: 32;
+  };
+  readonly glasses: {
+    readonly width: 32;
+    readonly height: 32;
+  };
+  readonly nose: {
+    readonly width: 32;
+    readonly height: 32;
+  };
+  readonly cheeks: {
+    readonly width: 32;
+    readonly height: 32;
+  };
+  readonly petals: {
+    readonly width: 32;
+    readonly height: 32;
+  };
+  readonly flowerBase: {
+    readonly width: 32;
+    readonly height: 32;
+  };
 };
 type PartSlot = keyof typeof PART_SLOTS;
 /**
@@ -186,6 +226,13 @@ type PartSlot = keyof typeof PART_SLOTS;
 declare const HAIR_PART_SLOTS: readonly ["bangs", "leftSideHair", "rightSideHair", "backHair"];
 type HairPartSlot = (typeof HAIR_PART_SLOTS)[number];
 declare const isHairPartSlot: (slot: PartSlot) => slot is HairPartSlot;
+/**
+ * Slots whose drawn part replaces a built-in part pixel for pixel: the part's cells are painted
+ * where the built-in part would be, and every cell shows its own color and tone.
+ */
+declare const REPLACE_PART_SLOTS: readonly ["outfit", "accessory", "beard", "glasses", "nose", "cheeks", "petals", "flowerBase"];
+type ReplacePartSlot = (typeof REPLACE_PART_SLOTS)[number];
+declare const isReplacePartSlot: (slot: PartSlot) => slot is ReplacePartSlot;
 /** Tone steps on the rig's shade ramp: two darker, the color itself, two lighter. */
 declare const PART_TONES: readonly [-2, -1, 0, 1, 2];
 type PartTone = (typeof PART_TONES)[number];
@@ -196,7 +243,7 @@ type PartCell = readonly [x: number, y: number, color: PartColor, tone: PartTone
 declare const PART_LAYERS: readonly ["front", "back"];
 type PartLayerName = (typeof PART_LAYERS)[number];
 /** Most fixed colors one part may use. */
-declare const MAX_PART_FIXED_COLORS = 16;
+declare const MAX_PART_FIXED_COLORS = 32;
 /**
  * A Human-drawn Custom Part. Its content is immutable and its identity is `customPartId`;
  * name, author, origin and parent are metadata kept outside it.
@@ -231,6 +278,29 @@ declare function paintPartLayer(slot: PartSlot, layer: PartLayer, points: readon
  * becomes `ink`. With `mirror`, the mirrored start is filled too.
  */
 declare function fillPartLayer(slot: PartSlot, layer: PartLayer, x: number, y: number, ink: PartInk | null, mirror?: boolean): PartLayer;
+/** Pixel-perfect line points (Bresenham). With `snap`, the end snaps to 0°, 45° or 90°. */
+declare function partLinePoints(from: readonly [number, number], to: readonly [number, number], snap?: boolean): [number, number][];
+/** Rectangle outline points between two corners. With `square`, the far corner makes a square. */
+declare function partRectPoints(from: readonly [number, number], to: readonly [number, number], square?: boolean): [number, number][];
+/** The ordered-dither threshold in [0, 1) for a cell. */
+declare function ditherThreshold(x: number, y: number, size?: 2 | 4): number;
+/**
+ * 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.
+ */
+declare function gradientPartLayer(slot: PartSlot, layer: PartLayer, from: readonly [number, number], to: readonly [number, number], color: PartColor, fromTone: PartTone, toTone: PartTone, options?: {
+  dither?: 2 | 4;
+  mirror?: boolean;
+}): PartLayer;
+/**
+ * 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.
+ */
+declare function noisePartLayer(slot: PartSlot, layer: PartLayer, amount: number, seed: string, mirror?: boolean): PartLayer;
+/** Moves the tone of each colored cell on the points by `delta` once; empty cells are skipped. */
+declare function shadePartLayer(slot: PartSlot, layer: PartLayer, points: readonly (readonly [number, number])[], delta: 1 | -1, mirror?: boolean): PartLayer;
 //#endregion
 //#region src/figure.d.ts
 type Cell = string | undefined;
@@ -260,6 +330,18 @@ declare function hairPieceStart(recipe: PixelAvatarRecipe, slot: HairPartSlot):
   front: PartCell[];
   back: PartCell[];
 };
+/**
+ * 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
+ * color slot and tone when it is exactly one, so it recolors with the Avatar, and a fixed color
+ * otherwise; an unchanged copy renders identically. A flattened helmet or hood no longer hides
+ * the hair: only the built-in ones do.
+ */
+declare function replacePartStart(recipe: PixelAvatarRecipe, slot: ReplacePartSlot): {
+  slot: ReplacePartSlot;
+  front: PartCell[];
+  back: PartCell[];
+};
 //#endregion
 //#region src/random.d.ts
 declare function seededRandom(seed: string): () => number;
@@ -309,5 +391,5 @@ declare function pixelSymbolCells(symbol: PixelSymbol, color: string): PixelCell
  */
 declare function symbolArtCells(rows: readonly string[], color: string): PixelCell$1[];
 //#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, type AvatarColor, type AvatarExtraPart, type AvatarHairPart, type AvatarPart, type AvatarPieceColor, type AvatarRange, type AvatarSpecies, CUSTOM_PART_KEYS, type CustomPartKey, DEFAULT_RECIPE, HAIR_PART_SLOTS, type HairPartSlot, MAX_PART_FIXED_COLORS, PART_LAYERS, PART_SLOTS, PART_TONES, PIXEL_SYMBOLS, type PartCell, type PartColor, type PartInk, type PartLayer, type PartLayerName, type PartSlot, type PartTone, type PixelAvatarRecipe, type PixelAvatarRecipeV1, type PixelAvatarRecipeV2, type PixelAvatarRecipeV3, type PixelAvatarSvgOptions, type PixelCell, type PixelCustomPart, type PixelFigureOptions, type PixelGrid, type PixelMouthState, type PixelSymbol, 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 };
+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, type AvatarColor, type AvatarExtraPart, type AvatarHairPart, type AvatarPart, type AvatarPieceColor, type AvatarRange, type AvatarSpecies, CUSTOM_PART_KEYS, type CustomPartKey, DEFAULT_RECIPE, HAIR_PART_SLOTS, type HairPartSlot, MAX_PART_FIXED_COLORS, PART_LAYERS, PART_SLOTS, PART_TONES, PIXEL_SYMBOLS, type PartCell, type PartColor, type PartInk, type PartLayer, type PartLayerName, type PartSlot, type PartTone, type PixelAvatarRecipe, type PixelAvatarRecipeV1, type PixelAvatarRecipeV2, type PixelAvatarRecipeV3, type PixelAvatarSvgOptions, type PixelCell, type PixelCustomPart, type PixelFigureOptions, type PixelGrid, type PixelMouthState, type PixelSymbol, REPLACE_PART_SLOTS, type ReplacePartSlot, 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 };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -371,7 +371,15 @@ const CUSTOM_PART_KEYS = {
 	bangs: "bangsPart",
 	leftSideHair: "leftSideHairPart",
 	rightSideHair: "rightSideHairPart",
-	backHair: "backHairPart"
+	backHair: "backHairPart",
+	outfit: "outfitPart",
+	accessory: "accessoryPart",
+	beard: "beardPart",
+	glasses: "glassesPart",
+	nose: "nosePart",
+	cheeks: "cheeksPart",
+	petals: "petalsPart",
+	flowerBase: "flowerBasePart"
 };
 const PART_KEY_ENTRIES = Object.entries(CUSTOM_PART_KEYS);
 const DEFAULT_RECIPE = {
@@ -465,10 +473,10 @@ function hiddenChoices(recipe) {
 		"nose",
 		"cheeks",
 		"glasses",
-		...recipe.beard ? ["beard"] : []
+		...recipe.beard || wornPart(recipe, "beard") ? ["beard"] : []
 	];
 	const hidden = [];
-	if (recipe.accessory === "helmet" || recipe.accessory === "hood") hidden.push(...HAIR_PIECES);
+	if ((recipe.accessory === "helmet" || recipe.accessory === "hood") && !wornPart(recipe, "accessory")) hidden.push(...HAIR_PIECES);
 	if (recipe.species === "dwarf") hidden.push("nose");
 	return hidden;
 }
@@ -894,6 +902,38 @@ const PART_SLOTS = {
 	backHair: {
 		width: 32,
 		height: 32
+	},
+	outfit: {
+		width: 32,
+		height: 32
+	},
+	accessory: {
+		width: 32,
+		height: 32
+	},
+	beard: {
+		width: 32,
+		height: 32
+	},
+	glasses: {
+		width: 32,
+		height: 32
+	},
+	nose: {
+		width: 32,
+		height: 32
+	},
+	cheeks: {
+		width: 32,
+		height: 32
+	},
+	petals: {
+		width: 32,
+		height: 32
+	},
+	flowerBase: {
+		width: 32,
+		height: 32
 	}
 };
 /**
@@ -907,6 +947,21 @@ const HAIR_PART_SLOTS = [
 	"backHair"
 ];
 const isHairPartSlot = (slot) => HAIR_PART_SLOTS.includes(slot);
+/**
+* Slots whose drawn part replaces a built-in part pixel for pixel: the part's cells are painted
+* where the built-in part would be, and every cell shows its own color and tone.
+*/
+const REPLACE_PART_SLOTS = [
+	"outfit",
+	"accessory",
+	"beard",
+	"glasses",
+	"nose",
+	"cheeks",
+	"petals",
+	"flowerBase"
+];
+const isReplacePartSlot = (slot) => REPLACE_PART_SLOTS.includes(slot);
 /** Tone steps on the rig's shade ramp: two darker, the color itself, two lighter. */
 const PART_TONES = [
 	-2,
@@ -917,7 +972,7 @@ const PART_TONES = [
 ];
 const PART_LAYERS = ["front", "back"];
 /** Most fixed colors one part may use. */
-const MAX_PART_FIXED_COLORS = 16;
+const MAX_PART_FIXED_COLORS = 32;
 const FIXED = /^#[\da-f]{6}$/iu;
 const isColor = (value) => typeof value === "string" && (AVATAR_COLORS.includes(value) || FIXED.test(value));
 function isPixelCustomPart(value) {
@@ -925,7 +980,7 @@ function isPixelCustomPart(value) {
 	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;
+	if (r["slot"] !== "headpiece" && r["back"]?.length !== 0) return false;
 	const fixed = /* @__PURE__ */ new Set();
 	for (const name of PART_LAYERS) {
 		const cells = r[name];
@@ -1025,6 +1080,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);
@@ -1879,6 +2110,15 @@ function pixelTileColor(hair) {
 	].map((v) => v * 255));
 }
 function pixelFigure(recipe, yawDeg, options = {}) {
+	const { grids: _, ...out } = renderFigure(recipe, yawDeg, options, /* @__PURE__ */ new Set());
+	return out;
+}
+const FACE_SLOTS = [
+	"nose",
+	"cheeks",
+	"glasses"
+];
+function renderFigure(recipe, yawDeg, options, omit) {
 	const yaw = yawDeg * Math.PI / 180;
 	const sinY = Math.sin(yaw);
 	const s = Math.round(sinY * 3);
@@ -1895,9 +2135,40 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		return front(x - Math.round(d * (1 + Math.max(0, y - 20) * .4) - d * tuck), y);
 	} : front;
 	const flower = recipe.species === "flower";
-	const covered = recipe.accessory === "helmet" || recipe.accessory === "hood";
+	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);
+		return part && shown ? [[slot, part.front]] : [];
+	}));
+	const skip = (slot) => omit.has(slot) || drawnParts.has(slot);
+	const covered = !skip("accessory") && (recipe.accessory === "helmet" || recipe.accessory === "hood");
 	const bare = () => false;
-	const petalRing = flower ? petals(recipe.petals ?? "trumpet", s) : bare;
+	const petalRing = flower && !skip("petals") ? petals(recipe.petals ?? "trumpet", s) : bare;
+	const faceShift = Math.round(fs * .6);
+	const mouthCells = /* @__PURE__ */ new Set();
+	for (const rows of [...Object.values(MOUTHS), [
+		".K.",
+		"KMK",
+		".K."
+	]]) {
+		const left = Math.round(C - .5 + fs * .6 - (rows[0].length - 1) / 2);
+		rows.forEach((row, dy) => [...row].forEach((code, dx) => {
+			if (code !== ".") mouthCells.add(`${left + dx},${20 + (recipe.height ?? 0) + dy}`);
+		}));
+	}
+	const mouthBox = (x, y) => mouthCells.has(`${x},${y}`);
+	const overlay = (grid, slot, keepOutMouth = false) => {
+		const cells = drawnParts.get(slot);
+		if (!cells) return;
+		const shift = FACE_SLOTS.includes(slot) ? faceShift : s;
+		for (const [x, y, color, tone] of cells) {
+			const px = x + shift;
+			if (px < 0 || px >= N || keepOutMouth && mouthBox(px, y)) continue;
+			const base = color.startsWith("#") ? color.toLowerCase() : recipe[color];
+			grid[y][px] = TONES[tone](base);
+		}
+	};
 	const builtin = flower ? {
 		back: petalRing,
 		front: bare,
@@ -1941,8 +2212,13 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 	};
 	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);
+	if (flower) {
+		if (!skip("flowerBase")) flowerBase(recipe, body, s);
+		overlay(body, "flowerBase");
+	} else {
+		if (!skip("outfit")) outfit(recipe, body, s);
+		overlay(body, "outfit");
+	}
 	const back = blank();
 	if (flower) {
 		paint(back, petalRing, hairColor);
@@ -1966,11 +2242,12 @@ 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);
+	overlay(back, "petals");
 	if (headpiece) placeCells(back, headpiece.back);
 	const head = blank();
 	paint(head, face, skin);
 	const h = recipe.height ?? 0;
-	if (recipe.beard && !flower) {
+	if (recipe.beard && !flower && !skip("beard")) {
 		const centre = C + fs * .6;
 		const mouthX = Math.round(C - .5 + fs * .6);
 		const chin = (x, y) => face(x, y) || face(x, y - 2);
@@ -2014,7 +2291,7 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 	});
 	if (!pointed && !flower) 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) accessory(recipe, head, s, face);
+	if (!flower && !skip("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]] : []));
@@ -2055,6 +2332,9 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		}
 		return out;
 	};
+	const drawnOver = blank();
+	overlay(drawnOver, "beard", true);
+	overlay(drawnOver, "accessory");
 	const crown = blank();
 	placeCells(crown, inked("all-front"), false);
 	if (headpiece) placeCells(crown, headpiece.front);
@@ -2063,6 +2343,7 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		back,
 		body,
 		shadeHair(head),
+		drawnOver,
 		crown
 	]) for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) if (layer[y][x]) figure[y][x] = layer[y][x];
 	const features = blank();
@@ -2130,6 +2411,7 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		N: shade(skin, .84),
 		n: shade(skin, .72)
 	});
+	else if (skip("nose")) overlay(features, "nose", true);
 	else if (recipe.nose === "dot") sprite(features, ["N"], cx, 18 + h, { N: shade(skin, .78) });
 	else if (recipe.nose === "button") sprite(features, ["N"], cx, 18 + h, { N: shade(skin, .88) });
 	else if (recipe.nose === "line") sprite(features, ["N", "N"], cx, 17 + h, { N: shade(skin, .82) });
@@ -2144,11 +2426,12 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		});
 		if (recipe.species === "goblin") for (const tx of [Math.round(mx - 2.5), Math.round(mx + 2.5)]) sprite(layer, ["T"], tx, 21 + h, { T: TUSK });
 		if (recipe.species === "orc") for (const tx of [Math.round(mx - 2.5), Math.round(mx + 2.5)]) sprite(layer, ["T", "T"], tx, 20 + h, { T: TUSK });
-		if (recipe.cheeks === "blush" && !flower) {
+		if (skip("cheeks")) overlay(layer, "cheeks", true);
+		if (recipe.cheeks === "blush" && !flower && !skip("cheeks")) {
 			sprite(layer, ["PP"], left.x - 1, 19 + h, { P: mix$1(BLUSH, skin, .25) });
 			sprite(layer, ["PP"], right.x + right.w - 1, 19 + h, { P: mix$1(BLUSH, skin, .25) });
 		}
-		if (recipe.cheeks === "freckles" && !flower) {
+		if (recipe.cheeks === "freckles" && !flower && !skip("cheeks")) {
 			sprite(layer, ["F.F"], left.x, 19 + h, { F: shade(skin, .7) });
 			sprite(layer, ["F.F"], right.x + 1, 19 + h, { F: shade(skin, .7) });
 		}
@@ -2171,7 +2454,8 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		const corner = (x === fx - 1 || x === fx + w) && (y === eyeTop - 1 || y === eyeTop + 4);
 		return box && !inside && !(round && corner);
 	}, INK$1);
-	const lenses = flower ? "none" : recipe.glasses;
+	const lenses = flower || skip("glasses") ? "none" : recipe.glasses;
+	overlay(glasses, "glasses", true);
 	if (lenses === "round" || lenses === "square") {
 		frame(left.x, left.w, lenses === "round");
 		frame(right.x, right.w, lenses === "round");
@@ -2201,7 +2485,7 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 			hairColor: color
 		};
 		for (const k of AVATAR_PIECE_COLORS) delete plain[k];
-		for (const cell of pixelFigure(plain, yawDeg).cells) variant[cell.y][cell.x] = cell.c;
+		for (const cell of renderFigure(plain, yawDeg, {}, omit).cells) variant[cell.y][cell.x] = cell.c;
 		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];
 	});
@@ -2210,7 +2494,7 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 	for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
 		const c = full[y][x];
 		if (!c) continue;
-		if (y >= 22 && !head[y][x] && !back[y][x] && !crown[y][x]) bodyCells[y][x] = c;
+		if (y >= 22 && !head[y][x] && !back[y][x] && !crown[y][x] && !drawnOver[y][x]) bodyCells[y][x] = c;
 		else headCells[y][x] = c;
 	}
 	const cells = [];
@@ -2223,6 +2507,13 @@ function pixelFigure(recipe, yawDeg, options = {}) {
 		});
 	}
 	return {
+		grids: {
+			figure,
+			features: savedFeatures,
+			glasses,
+			back,
+			body
+		},
 		cells,
 		tile: `<rect width="32" height="32" rx="6" fill="${pixelTileColor(recipe.hairColor)}"/>`,
 		body: `<g class="bh-illustrated-body">${rects(bodyCells)}</g>`,
@@ -2269,6 +2560,48 @@ function hairPieceStart(recipe, slot) {
 		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
+* color slot and tone when it is exactly one, so it recolors with the Avatar, and a fixed color
+* otherwise; an unchanged copy renders identically. A flattened helmet or hood no longer hides
+* the hair: only the built-in ones do.
+*/
+function replacePartStart(recipe, slot) {
+	const worn = wornPart(recipe, slot);
+	if (worn) return {
+		slot,
+		front: [...worn.front],
+		back: []
+	};
+	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 front = [];
+	for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
+		const c = shown[y][x];
+		if (c && c !== without[y][x]) front.push([
+			x,
+			y,
+			...source(c)
+		]);
+	}
+	return {
+		slot,
+		front,
+		back: []
+	};
+}
 
 //#endregion
 //#region src/svg.ts
@@ -2792,5 +3125,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, 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 };
+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 };
 //# sourceMappingURL=index.js.map