@diffenderfer-games/hub 2.0.0-next.5 → 2.0.0-next.7

package/dist/shared/svg-markup.js

@@ -0,0 +1,1945 @@
+import { t as _defineProperty } from "./defineProperty.js";
+import { decodeLook, encodeLook, normaliseHex, partName, resolveColour } from "@diffenderfer-games/hub-contract/avatar";
+//#region src/avatar/look-like.ts
+/** Turns anything a render accepts into a look (or `null` for the silhouette), caching decoded codes. */
+const decoded = /* @__PURE__ */ new Map();
+const DECODE_CACHE = 512;
+/** Decodes a code once (an LRU of 512). */
+function fromCode(code) {
+	const hit = decoded.get(code);
+	if (hit !== void 0 || decoded.has(code)) return hit ?? null;
+	const look = decodeLook(code)?.look ?? null;
+	if (decoded.size >= DECODE_CACHE) {
+		const oldest = decoded.keys().next().value;
+		if (oldest !== void 0) decoded.delete(oldest);
+	}
+	decoded.set(code, look);
+	return look;
+}
+/** The look a {@link LookLike} names, or `null` (hidden, malformed, missing). */
+function toLook(like) {
+	if (like === null || like === void 0 || like === "") return null;
+	if (typeof like === "string") return fromCode(like);
+	if ("v" in like) return like;
+	if ("look" in like) return like.look;
+	return fromCode(like.code);
+}
+/** The code a {@link LookLike} names (`''` for none). */
+function toCode(like) {
+	if (typeof like === "string") return like;
+	if (like && "code" in like) return like.code;
+	const look = toLook(like);
+	return look ? encodeLook(look) : "";
+}
+//#endregion
+//#region src/avatar/colour.ts
+const toLin = (c) => {
+	const v = c / 255;
+	return v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+};
+const fromLin = (c) => {
+	const v = c <= .0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - .055;
+	return Math.round(Math.min(1, Math.max(0, v)) * 255);
+};
+/** A `#rrggbb` colour in OKLab. */
+function hexToLab(hex) {
+	const r = toLin(parseInt(hex.slice(1, 3), 16));
+	const g = toLin(parseInt(hex.slice(3, 5), 16));
+	const bl = toLin(parseInt(hex.slice(5, 7), 16));
+	const l = Math.cbrt(.4122214708 * r + .5363325363 * g + .0514459929 * bl);
+	const m = Math.cbrt(.2119034982 * r + .6806995451 * g + .1073969566 * bl);
+	const s = Math.cbrt(.0883024619 * r + .2817188376 * g + .6299787005 * bl);
+	return {
+		L: .2104542553 * l + .793617785 * m - .0040720468 * s,
+		a: 1.9779984951 * l - 2.428592205 * m + .4505937099 * s,
+		b: .0259040371 * l + .7827717662 * m - .808675766 * s
+	};
+}
+/** An OKLab colour as `#rrggbb` (clipped to sRGB). */
+function labToHex(lab) {
+	const { a, b } = lab;
+	const l = (lab.L + .3963377774 * a + .2158037573 * b) ** 3;
+	const m = (lab.L - .1055613458 * a - .0638541728 * b) ** 3;
+	const s = (lab.L - .0894841775 * a - 1.291485548 * b) ** 3;
+	return `#${[
+		fromLin(4.0767416621 * l - 3.3077115913 * m + .2309699292 * s),
+		fromLin(-1.2684380046 * l + 2.6097574011 * m - .3413193965 * s),
+		fromLin(-.0041960863 * l - .7034186147 * m + 1.707614701 * s)
+	].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+/** Shifts lightness by `dL` (OKLab L units) and scales chroma. */
+function adjust(hex, dL, chroma = 1) {
+	const c = hexToLab(hex);
+	return labToHex({
+		L: Math.min(.98, Math.max(.03, c.L + dL)),
+		a: c.a * chroma,
+		b: c.b * chroma
+	});
+}
+/** The one shade tone of a fill. */
+const shade = (hex) => adjust(hex, -.1, 1.08);
+/** The one highlight tone of a fill. */
+const light = (hex) => adjust(hex, .09, .9);
+/** Style C's tonal outline: a darker shade of the fill's own colour (§14.1). */
+const outline = (hex) => adjust(hex, -.24, 1.1);
+/** A dark ink in the fill's own hue (status props keep a strong edge). */
+function ink(hex) {
+	const c = hexToLab(hex);
+	return labToHex({
+		L: Math.min(.24, c.L * .42),
+		a: c.a * .6,
+		b: c.b * .6
+	});
+}
+/** Linear mix in OKLab. */
+function mix$1(a, b, t) {
+	const lhs = hexToLab(a);
+	const rhs = hexToLab(b);
+	return labToHex({
+		L: lhs.L + (rhs.L - lhs.L) * t,
+		a: lhs.a + (rhs.a - lhs.a) * t,
+		b: lhs.b + (rhs.b - lhs.b) * t
+	});
+}
+/** OKLab lightness, 0 … 1. */
+const lightness = (hex) => hexToLab(hex).L;
+/** Perceptual distance (OKLab ΔE × 100). */
+function deltaE(a, b) {
+	const lhs = hexToLab(a);
+	const rhs = hexToLab(b);
+	return Math.hypot(lhs.L - rhs.L, lhs.a - rhs.a, lhs.b - rhs.b) * 100;
+}
+/**
+* Keeps brows and facial hair visible on the skin (§14.2): a colour within
+* ΔE 12 of the skin is darkened by 0.18 L.
+*/
+function keepApart(colour, skin) {
+	return deltaE(colour, skin) >= 12 ? colour : adjust(colour, -.18);
+}
+/** WCAG relative luminance of a `#rrggbb`. */
+function luminance(hex) {
+	const r = toLin(parseInt(hex.slice(1, 3), 16));
+	const g = toLin(parseInt(hex.slice(3, 5), 16));
+	const b = toLin(parseInt(hex.slice(5, 7), 16));
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+/** WCAG contrast ratio between two colours. */
+function contrast(a, b) {
+	const lhs = luminance(a);
+	const rhs = luminance(b);
+	return (Math.max(lhs, rhs) + .05) / (Math.min(lhs, rhs) + .05);
+}
+//#endregion
+//#region src/avatar/scene.ts
+/** A group helper that drops empty groups' wrapping. */
+function g(children, opts = {}) {
+	return {
+		k: "g",
+		...opts,
+		children
+	};
+}
+/** A path helper. */
+function path(d, paint, tf) {
+	return {
+		k: "path",
+		d,
+		...paint,
+		...tf ? { tf } : {}
+	};
+}
+/** An ellipse helper. */
+function ellipse(cx, cy, rx, ry, paint, tf) {
+	return {
+		k: "ellipse",
+		cx,
+		cy,
+		rx,
+		ry,
+		...paint,
+		...tf ? { tf } : {}
+	};
+}
+/** A rect helper. */
+function rect(left, top, w, h, paint, r) {
+	return {
+		k: "rect",
+		x: left,
+		y: top,
+		w,
+		h,
+		...paint,
+		...r === void 0 ? {} : { r }
+	};
+}
+/** A translate step. */
+const tr = (dx, dy) => ({
+	k: "t",
+	x: dx,
+	y: dy
+});
+/** A scale step (uniform when `sy` is omitted). */
+const sc = (sx, sy = sx) => ({
+	k: "s",
+	x: sx,
+	y: sy
+});
+/** A rotate step, degrees. */
+const rot = (a) => ({
+	k: "r",
+	a
+});
+/** A horizontal skew step, degrees. */
+const skewX = (a) => ({
+	k: "skx",
+	a
+});
+/** A round-joined stroke paint. */
+function line(colour, width, cap = "round", opacity) {
+	return {
+		fill: "none",
+		stroke: colour,
+		sw: width,
+		cap,
+		...opacity === void 0 ? {} : { opacity }
+	};
+}
+//#endregion
+//#region src/avatar/render/frame.ts
+/**
+* Frames (§3.4): which part of rig space an output shows, and the badge
+* background (the site's rounded panel with a ring that lightens on dark
+* skin, §3.9).
+*/
+/** The three frames' boxes. */
+const FRAMES = {
+	head: [
+		-66,
+		-164,
+		132,
+		132
+	],
+	bust: [
+		-84,
+		-188,
+		168,
+		168
+	],
+	full: [
+		-86,
+		-196,
+		172,
+		206
+	]
+};
+/** The site panel colour behind badges. */
+const PANEL = "#11141c";
+/** The frame an options object asks for (default `head`). */
+function frameOf(opts) {
+	return opts.frame ?? "head";
+}
+/** Output pixel size for a frame (the longer edge is `size`). */
+function pixelSize(opts) {
+	const [, , w, h] = FRAMES[frameOf(opts)];
+	const scale = (opts.size ?? 48) / Math.max(w, h);
+	return {
+		width: w * scale,
+		height: h * scale,
+		scale
+	};
+}
+/** The badge ring colour: lighter when the skin is darker than the panel, so every skin has an edge. */
+function ringColour(look) {
+	return look && lightness(resolveColour(look.skin)) < .42 ? "#6f7787" : "#2a3142";
+}
+/** Wraps the avatar's nodes in the frame's background (a badge clips to the rounded panel). */
+function framed(nodes, look, opts) {
+	const [left, top, w, h] = FRAMES[frameOf(opts)];
+	const background = opts.background ?? (frameOf(opts) === "head" ? "badge" : "none");
+	if (background === "badge") {
+		const r = w * .24;
+		return [
+			rect(left, top, w, h, { fill: PANEL }, r),
+			g(nodes, { clip: { shapes: [rect(left, top, w, h, {}, r)] } }),
+			rect(left + 1.5, top + 1.5, w - 3, h - 3, {
+				fill: "none",
+				stroke: ringColour(look),
+				sw: 3
+			}, r - 1.5)
+		];
+	}
+	if (background === "none") return [...nodes];
+	const fill = normaliseHex(background);
+	return fill ? [rect(left, top, w, h, { fill }), ...nodes] : [...nodes];
+}
+//#endregion
+//#region src/avatar/art-store.ts
+let art = null;
+let loading = null;
+const waiters = /* @__PURE__ */ new Set();
+/** The loaded art, or `null` before {@link ready} resolves. */
+function currentArt() {
+	return art;
+}
+/** Loads the art chunk (once). Resolves when rendering is synchronous. */
+function ready() {
+	loading ?? (loading = import("./art.js").then((mod) => {
+		art = mod.ART;
+		for (const waiter of waiters) waiter();
+		waiters.clear();
+	}));
+	return loading;
+}
+/** Calls `fn` once the art has loaded (now, when it already has). */
+function onArtReady(fn) {
+	if (art) {
+		fn();
+		return;
+	}
+	waiters.add(fn);
+}
+//#endregion
+//#region src/avatar/face.ts
+const brow$1 = (dy = 0, tilt = 0, arch = 2.5) => ({
+	dy,
+	tilt,
+	arch
+});
+const mouth$1 = (m) => ({
+	w: 13,
+	sL: 1.5,
+	sR: 1.5,
+	open: 0,
+	round: 0,
+	teeth: 0,
+	tongue: 0,
+	dx: 0,
+	...m
+});
+const BASE = {
+	browL: brow$1(),
+	browR: brow$1(),
+	lidL: .12,
+	lidR: .12,
+	lowL: 0,
+	lowR: 0,
+	lidTilt: 0,
+	closedCurveL: 1,
+	closedCurveR: 1,
+	pupil: 1,
+	mouth: mouth$1({}),
+	cheeks: .25,
+	headTilt: 0,
+	squash: 0,
+	extras: []
+};
+const face = (f) => ({
+	...BASE,
+	...f
+});
+/** The launch set of 16 expressions (§3.5). Kid-friendly: angry and shocked stay cartoon-cute, cry is one tear. */
+const EXPRESSIONS = {
+	neutral: BASE,
+	happy: face({
+		browL: brow$1(-2, 0, 3.5),
+		browR: brow$1(-2, 0, 3.5),
+		lowL: .22,
+		lowR: .22,
+		mouth: mouth$1({
+			w: 19,
+			sL: 5,
+			sR: 5,
+			open: 7,
+			teeth: .5,
+			tongue: .6
+		}),
+		cheeks: .65
+	}),
+	laugh: face({
+		browL: brow$1(-4, -1, 4),
+		browR: brow$1(-4, -1, 4),
+		lidL: 1,
+		lidR: 1,
+		mouth: mouth$1({
+			w: 22,
+			sL: 6,
+			sR: 6,
+			open: 13,
+			teeth: .45,
+			tongue: .9
+		}),
+		cheeks: .9,
+		headTilt: -6,
+		squash: .03,
+		extras: ["sparkle"]
+	}),
+	grin: face({
+		browL: brow$1(-2.5, 0, 3.5),
+		browR: brow$1(-2.5, 0, 3.5),
+		lowL: .3,
+		lowR: .3,
+		mouth: mouth$1({
+			w: 21,
+			sL: 5.5,
+			sR: 5.5,
+			open: 4.5,
+			teeth: 1
+		}),
+		cheeks: .7
+	}),
+	sad: face({
+		browL: brow$1(1, -4.5, 1),
+		browR: brow$1(1, -4.5, 1),
+		lidL: .3,
+		lidR: .3,
+		lidTilt: -3,
+		mouth: mouth$1({
+			w: 12,
+			sL: -4,
+			sR: -4
+		}),
+		cheeks: .1,
+		headTilt: 4
+	}),
+	cry: face({
+		browL: brow$1(1, -5.5, 1),
+		browR: brow$1(1, -5.5, 1),
+		lidL: .4,
+		lidR: .4,
+		lidTilt: -3,
+		lowL: .15,
+		lowR: .15,
+		mouth: mouth$1({
+			w: 13,
+			sL: -4.5,
+			sR: -4.5,
+			open: 3
+		}),
+		cheeks: .4,
+		headTilt: 5,
+		extras: ["tear"]
+	}),
+	surprised: face({
+		browL: brow$1(-7, -1, 4),
+		browR: brow$1(-7, -1, 4),
+		lidL: 0,
+		lidR: 0,
+		pupil: .8,
+		mouth: mouth$1({
+			w: 9,
+			sL: 0,
+			sR: 0,
+			open: 11,
+			round: 1,
+			tongue: .3
+		}),
+		cheeks: .2,
+		squash: -.05
+	}),
+	shocked: face({
+		browL: brow$1(-9, -2, 4.5),
+		browR: brow$1(-9, -2, 4.5),
+		lidL: 0,
+		lidR: 0,
+		pupil: .7,
+		mouth: mouth$1({
+			w: 11,
+			sL: -1,
+			sR: -1,
+			open: 14,
+			round: .8,
+			tongue: .4
+		}),
+		cheeks: .15,
+		squash: -.07,
+		extras: ["sweat"]
+	}),
+	angry: face({
+		browL: brow$1(2, 5.5, 0),
+		browR: brow$1(2, 5.5, 0),
+		lidL: .32,
+		lidR: .32,
+		lidTilt: 4,
+		mouth: mouth$1({
+			w: 15,
+			sL: -2.5,
+			sR: -2.5,
+			open: 3.5,
+			teeth: .9
+		}),
+		cheeks: .35,
+		extras: ["anger"]
+	}),
+	grumpy: face({
+		browL: brow$1(2, 3.5, .5),
+		browR: brow$1(2, 3.5, .5),
+		lidL: .42,
+		lidR: .42,
+		lidTilt: 2,
+		mouth: mouth$1({
+			w: 12,
+			sL: -2,
+			sR: -2.5,
+			dx: -1
+		}),
+		cheeks: .1,
+		headTilt: -3
+	}),
+	thinking: face({
+		browL: brow$1(-5, -1.5, 3.5),
+		browR: brow$1(1.5, 3, .5),
+		lidL: .1,
+		lidR: .3,
+		mouth: mouth$1({
+			w: 9,
+			sL: -.5,
+			sR: 1.5,
+			dx: 4
+		}),
+		cheeks: .15,
+		headTilt: -5,
+		extras: ["question"]
+	}),
+	wink: face({
+		browL: brow$1(-2, 0, 3.5),
+		browR: brow$1(1.5, 1.5, 1.5),
+		lidR: 1,
+		lowL: .15,
+		mouth: mouth$1({
+			w: 16,
+			sL: 2,
+			sR: 5.5,
+			dx: 1.5
+		}),
+		cheeks: .6,
+		headTilt: 3,
+		extras: ["sparkle"]
+	}),
+	smug: face({
+		browL: brow$1(0, 1, 1.5),
+		browR: brow$1(-4, -1, 3.5),
+		lidL: .45,
+		lidR: .4,
+		lowL: .1,
+		lowR: .1,
+		mouth: mouth$1({
+			w: 14,
+			sL: 1,
+			sR: 5,
+			dx: 3
+		}),
+		cheeks: .45,
+		headTilt: 4
+	}),
+	worried: face({
+		browL: brow$1(-2, -5, 2),
+		browR: brow$1(-2, -5, 2),
+		lidL: .05,
+		lidR: .05,
+		pupil: .9,
+		mouth: mouth$1({
+			w: 11,
+			sL: -1.5,
+			sR: -1,
+			open: 1.5
+		}),
+		cheeks: .1,
+		extras: ["sweat"]
+	}),
+	sleepy: face({
+		browL: brow$1(1, -1, 1.5),
+		browR: brow$1(1, -1, 1.5),
+		lidL: .72,
+		lidR: .72,
+		closedCurveL: -1,
+		closedCurveR: -1,
+		mouth: mouth$1({
+			w: 7,
+			sL: 0,
+			sR: 0,
+			open: 2.5,
+			round: 1
+		}),
+		cheeks: .2,
+		headTilt: 7,
+		extras: ["zzz"]
+	}),
+	determined: face({
+		browL: brow$1(1, 3.5, .5),
+		browR: brow$1(1, 3.5, .5),
+		lidL: .22,
+		lidR: .22,
+		lidTilt: 2,
+		mouth: mouth$1({
+			w: 12,
+			sL: 1,
+			sR: 1
+		}),
+		cheeks: .25
+	})
+};
+/** Every expression name, in the launch order. */
+const EXPRESSION_NAMES = [
+	"neutral",
+	"happy",
+	"laugh",
+	"grin",
+	"sad",
+	"cry",
+	"surprised",
+	"shocked",
+	"angry",
+	"grumpy",
+	"thinking",
+	"wink",
+	"smug",
+	"worried",
+	"sleepy",
+	"determined"
+];
+/** True for a known expression name. */
+function isExpression(name) {
+	return Object.prototype.hasOwnProperty.call(EXPRESSIONS, name);
+}
+const lerp = (a, b, t) => a + (b - a) * t;
+const mixBrow = (a, b, t) => ({
+	dy: lerp(a.dy, b.dy, t),
+	tilt: lerp(a.tilt, b.tilt, t),
+	arch: lerp(a.arch, b.arch, t)
+});
+const mixMouth = (a, b, t) => ({
+	w: lerp(a.w, b.w, t),
+	sL: lerp(a.sL, b.sL, t),
+	sR: lerp(a.sR, b.sR, t),
+	open: lerp(a.open, b.open, t),
+	round: lerp(a.round, b.round, t),
+	teeth: lerp(a.teeth, b.teeth, t),
+	tongue: lerp(a.tongue, b.tongue, t),
+	dx: lerp(a.dx, b.dx, t)
+});
+/** An expression's parameters (a name or parameters pass through). */
+function faceOf(e) {
+	return typeof e === "string" ? EXPRESSIONS[e] : e;
+}
+/** Blends two expressions: `mix('happy', 'surprised', 0.4)`. */
+function mix(a, b, t) {
+	const from = faceOf(a);
+	const to = faceOf(b);
+	return {
+		browL: mixBrow(from.browL, to.browL, t),
+		browR: mixBrow(from.browR, to.browR, t),
+		lidL: lerp(from.lidL, to.lidL, t),
+		lidR: lerp(from.lidR, to.lidR, t),
+		lowL: lerp(from.lowL, to.lowL, t),
+		lowR: lerp(from.lowR, to.lowR, t),
+		lidTilt: lerp(from.lidTilt, to.lidTilt, t),
+		closedCurveL: lerp(from.closedCurveL, to.closedCurveL, t),
+		closedCurveR: lerp(from.closedCurveR, to.closedCurveR, t),
+		pupil: lerp(from.pupil, to.pupil, t),
+		mouth: mixMouth(from.mouth, to.mouth, t),
+		cheeks: lerp(from.cheeks, to.cheeks, t),
+		headTilt: lerp(from.headTilt, to.headTilt, t),
+		squash: lerp(from.squash, to.squash, t),
+		extras: t < .5 ? from.extras : to.extras
+	};
+}
+/** The hub's quick-chat emotes (`e:<emoji>`, the safety package's EMOTES) mapped to faces (§3.7), so an emote can also play on the sender's face. */
+const EMOTE_FACES = {
+	"😀": "happy",
+	"😂": "laugh",
+	"😮": "surprised",
+	"😢": "sad",
+	"😎": "smug",
+	"🤔": "thinking",
+	"👍": "grin",
+	"👏": "happy",
+	"🎉": "laugh",
+	"❤️": "happy",
+	"🔥": "determined",
+	"⭐": "grin"
+};
+/** The face for a quick-chat emote (`e:😂` or the bare emoji), or `null`. */
+function expressionFromEmote(emoteId) {
+	return EMOTE_FACES[emoteId.startsWith("e:") ? emoteId.slice(2) : emoteId] ?? null;
+}
+//#endregion
+//#region src/avatar/geom.ts
+/** Rounds to one decimal and drops a trailing `.0` and negative zero. */
+function n(v) {
+	const r = Math.round(v * 10) / 10;
+	return Object.is(r, -0) ? "0" : String(r);
+}
+/** A path of absolute M/L/C/Q/Z commands that can be warped as a whole. */
+var Path = class {
+	constructor() {
+		_defineProperty(this, "cmds", []);
+	}
+	m(px, py) {
+		this.cmds.push({
+			c: "M",
+			p: [px, py]
+		});
+		return this;
+	}
+	l(px, py) {
+		this.cmds.push({
+			c: "L",
+			p: [px, py]
+		});
+		return this;
+	}
+	c(x1, y1, x2, y2, px, py) {
+		this.cmds.push({
+			c: "C",
+			p: [
+				x1,
+				y1,
+				x2,
+				y2,
+				px,
+				py
+			]
+		});
+		return this;
+	}
+	q(x1, y1, px, py) {
+		this.cmds.push({
+			c: "Q",
+			p: [
+				x1,
+				y1,
+				px,
+				py
+			]
+		});
+		return this;
+	}
+	z() {
+		this.cmds.push({
+			c: "Z",
+			p: []
+		});
+		return this;
+	}
+	/** Appends every command of another path. */
+	add(other) {
+		this.cmds.push(...other.cmds);
+		return this;
+	}
+	/** The lowest y of any point (control points included, so it never under-reports). */
+	bottom() {
+		return this.cmds.reduce((low, { p }) => p.reduce((lo, v, i) => i % 2 === 1 ? Math.max(lo, v) : lo, low), -Infinity);
+	}
+	/** The SVG `d` string, optionally warping every point. */
+	d(warp) {
+		return this.cmds.map(({ c, p }) => {
+			if (c === "Z") return "Z";
+			const out = [];
+			for (let i = 0; i < p.length; i += 2) {
+				const px = p[i] ?? 0;
+				const py = p[i + 1] ?? 0;
+				const [wx, wy] = warp ? warp(px, py) : [px, py];
+				out.push(`${n(wx)} ${n(wy)}`);
+			}
+			return c + out.join(" ");
+		}).join("");
+	}
+};
+/** A point by index, or the origin. */
+const at = (pts, i) => pts[i] ?? [0, 0];
+/**
+* A smooth Catmull-Rom curve through the points (cubic segments). Points
+* flagged `'c'` become sharp corners.
+*/
+function blob(pts, isClosed = true, tension = 1, into = new Path()) {
+	const count = pts.length;
+	if (count === 0) return into;
+	const wrap = (i) => isClosed ? at(pts, (i + count) % count) : at(pts, Math.max(0, Math.min(count - 1, i)));
+	const tangent = (i) => {
+		if (wrap(i)[2] === "c" || !isClosed && (i === 0 || i === count - 1)) return [0, 0];
+		const a = wrap(i - 1);
+		const b = wrap(i + 1);
+		return [(b[0] - a[0]) * tension / 6, (b[1] - a[1]) * tension / 6];
+	};
+	const first = at(pts, 0);
+	into.m(first[0], first[1]);
+	const segs = isClosed ? count : count - 1;
+	for (let i = 0; i < segs; i += 1) {
+		const p1 = wrap(i);
+		const p2 = wrap(i + 1);
+		const t1 = tangent(i);
+		const t2 = tangent(i + 1);
+		into.c(p1[0] + t1[0], p1[1] + t1[1], p2[0] - t2[0], p2[1] - t2[1], p2[0], p2[1]);
+	}
+	if (isClosed) into.z();
+	return into;
+}
+/** Points along an ellipse arc; angles in degrees, 0 = right, 90 = down. */
+function arc(cx, cy, rx, ry, a0, a1, steps) {
+	const out = [];
+	for (let i = 0; i <= steps; i += 1) {
+		const a = (a0 + (a1 - a0) * i / steps) * Math.PI / 180;
+		out.push([cx + rx * Math.cos(a), cy + ry * Math.sin(a)]);
+	}
+	return out;
+}
+/**
+* A scalloped edge: one outward bump between each pair of points (quadratic
+* curves), for curls and clouds. `side` 1 bumps to the left of travel.
+*/
+function scallop(pts, bump, isClosed, side = 1, into = new Path()) {
+	const count = pts.length;
+	const first = at(pts, 0);
+	into.m(first[0], first[1]);
+	const segs = isClosed ? count : count - 1;
+	for (let i = 0; i < segs; i += 1) {
+		const a = at(pts, i);
+		const b = at(pts, (i + 1) % count);
+		const dx = b[0] - a[0];
+		const dy = b[1] - a[1];
+		const len = Math.hypot(dx, dy) || 1;
+		into.q((a[0] + b[0]) / 2 + dy / len * bump * side, (a[1] + b[1]) / 2 + -dx / len * bump * side, b[0], b[1]);
+	}
+	if (isClosed) into.z();
+	return into;
+}
+/** A rounded rectangle path. */
+function roundedRect(px, py, w, h, r) {
+	return new Path().m(px + r, py).l(px + w - r, py).q(px + w, py, px + w, py + r).l(px + w, py + h - r).q(px + w, py + h, px + w - r, py + h).l(px + r, py + h).q(px, py + h, px, py + h - r).l(px, py + r).q(px, py, px + r, py).z();
+}
+/** Clamps `v` to [lo, hi]. */
+const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+//#endregion
+//#region src/avatar/render/colours.ts
+/**
+* Resolves a look's colours into every tint slot the art uses (§3.2): each
+* fill gets its shade, highlight and tonal outline (style C, §14.1), brows
+* and beards are kept apart from the skin (§14.2), and accessories default
+* to the body colour.
+*/
+/** The soft dark-brown ink for lids, mouths and closed eyes (§14.1). */
+const SOFT_INK = "#3a2a2a";
+/** The fixed colours every look shares. */
+const FIXED = {
+	ink: SOFT_INK,
+	white: "#fbfaf6",
+	mouth: "#5a1d2a",
+	tongue: "#ff7d8e",
+	blush: "#ff7b8f",
+	pupil: "#140f0d"
+};
+/** A fill and its tones. */
+function tones(hex) {
+	return {
+		base: hex,
+		shade: shade(hex),
+		light: light(hex),
+		ink: outline(hex)
+	};
+}
+/** The colours of a look. */
+function lookColours(look) {
+	const skin = resolveColour(look.skin);
+	const hair = resolveColour(look.hair.colour);
+	const browBase = look.brows.colour === void 0 ? lightness(hair) > .78 ? adjust(hair, -.22) : adjust(hair, -.05) : resolveColour(look.brows.colour);
+	const beard = keepApart(look.facialHair.colour === void 0 ? hair : resolveColour(look.facialHair.colour), skin);
+	const eye = resolveColour(look.eyes.colour);
+	const body = resolveColour(look.body.colour);
+	return {
+		skin,
+		skinShade: shade(skin),
+		skinLight: light(skin),
+		skinInk: outline(skin),
+		eyeRim: adjust(skin, -.2, 1.1),
+		hair,
+		hairShade: shade(hair),
+		hairLight: light(hair),
+		hairInk: outline(hair),
+		hairBuzz: mix$1(hair, skin, .42),
+		brow: keepApart(browBase, skin),
+		beard,
+		beardShade: shade(beard),
+		beardInk: outline(beard),
+		stubble: mix$1(beard, skin, .35),
+		eye,
+		eyeDark: adjust(eye, -.18),
+		body,
+		bodyShade: shade(body),
+		bodyLight: light(body),
+		bodyInk: outline(body)
+	};
+}
+/** An accessory's colour: its own, else the body colour. */
+function accessoryColour(look, accessory) {
+	return accessory?.colour === void 0 ? resolveColour(look.body.colour) : resolveColour(accessory.colour);
+}
+/** Style C's outline width at the 100-unit head height (§14.1). */
+const LINE = 2.4;
+/** Part fills are outlined a little thinner than lines (the POC's style C). */
+const FILL_OUTLINE = .8;
+/** The head outline (centre 0,0; 100 units tall). */
+const HEAD_PATH = new Path().m(0, -50).c(27, -50, 46, -32, 46, -4).c(46, 24, 30, 50, 0, 50).c(-30, 50, -46, 24, -46, -4).c(-46, -32, -27, -50, 0, -50).z();
+/** The head as a clip region. */
+const HEAD_CLIP = { shapes: [path(HEAD_PATH.d(), {})] };
+/** Where a face feature centred at `x0` lands after the head turn. */
+function feat(ctx, x0) {
+	const t0 = Math.asin(clamp(x0 / 46, -1, 1));
+	const t = t0 + ctx.phi;
+	return {
+		x: 46 * Math.sin(t),
+		sx: Math.max(.05, Math.cos(t) / Math.cos(t0)),
+		vis: Math.cos(t) > .22
+	};
+}
+/**
+* A warp that wraps a part around the skull by `phi`. Unlike a strict
+* cylinder, the far side is squeezed toward the silhouette instead of
+* folding behind it, so outlines never collapse into wedges (§14.2).
+*/
+function turnWarp(phi, dy = 0) {
+	if (phi === 0 && dy === 0) return;
+	const half = Math.PI / 2;
+	return (px, py) => {
+		const ax = Math.abs(px);
+		const sg = Math.sign(px) || 1;
+		const t0 = Math.asin(Math.min(ax, 46) / 46) * sg;
+		const t = t0 + phi * (phi >= 0 ? t0 <= 0 ? 1 : 1 - t0 / half : t0 >= 0 ? 1 : 1 + t0 / half);
+		const over = Math.max(0, ax - 46) * Math.max(.25, Math.abs(Math.sin(t)));
+		return [46 * Math.sin(t) + sg * over, py + dy];
+	};
+}
+/** Resolves a tint slot. `acc` is the accessory (or hair-tie) colour for this part. */
+function slotColour(c, acc, slot) {
+	switch (slot) {
+		case "none": return "none";
+		case "acc": return acc.base;
+		case "accShade": return acc.shade;
+		case "accLight": return acc.light;
+		case "accInk": return acc.ink;
+		case "ink": return FIXED.ink;
+		case "white": return FIXED.white;
+		default: return c[slot];
+	}
+}
+/** The tonal outline slot for a fill slot. */
+function outlineOf(slot) {
+	if (slot.startsWith("hair")) return "hairInk";
+	if (slot === "beard" || slot === "beardShade" || slot === "stubble") return "beardInk";
+	if (slot.startsWith("acc")) return "accInk";
+	if (slot.startsWith("skin")) return "skinInk";
+	return "ink";
+}
+/** Paints catalog shapes with an optional warp; `clip: 'head'` shapes are clipped to the head. */
+function paintShapes(c, acc, shapes, warp) {
+	if (!shapes) return [];
+	return shapes.map((s) => {
+		const d = s.d.d(warp);
+		const opacity = s.opacity === void 0 ? {} : { opacity: s.opacity };
+		if (s.line) return path(d, {
+			fill: "none",
+			stroke: slotColour(c, acc, s.stroke ?? "ink"),
+			sw: s.sw ?? 2.4,
+			cap: s.cap ?? "round",
+			...opacity
+		});
+		const strokeSlot = s.stroke ?? outlineOf(s.fill);
+		const stroke = strokeSlot === "none" ? {} : {
+			stroke: slotColour(c, acc, strokeSlot),
+			sw: (s.sw ?? 2.4) * FILL_OUTLINE
+		};
+		const node = path(d, {
+			fill: slotColour(c, acc, s.fill),
+			...s.evenOdd ? { evenOdd: true } : {},
+			...stroke,
+			...opacity
+		});
+		return s.clip === "head" ? g([node], { clip: HEAD_CLIP }) : node;
+	});
+}
+//#endregion
+//#region src/avatar/render/body.ts
+/**
+* The body blob and its poses (§3.11). Each pose is a transform of the same
+* gumdrop plus where the head sits; a future limbed body re-implements the
+* same names. The cycle poses (`walk`, `run`, `dance`, `jump`, `cheer`) read
+* `phase` (0 … 1).
+*/
+const BODY = blob([
+	[-35, -2],
+	[-40, -24],
+	[-30, -50],
+	[0, -60],
+	[30, -50],
+	[40, -24],
+	[35, -2],
+	[0, 2]
+]).d();
+const STOOL = [
+	rect(-27, -12, 6, 12, {
+		fill: "#2a3142",
+		stroke: "#0d0f14",
+		sw: 2
+	}),
+	rect(21, -12, 6, 12, {
+		fill: "#2a3142",
+		stroke: "#0d0f14",
+		sw: 2
+	}),
+	rect(-38, -22, 76, 11, {
+		fill: "#4a5470",
+		stroke: "#0d0f14",
+		sw: 3
+	}, 5.5)
+];
+const hand = (c, cx, cy) => ellipse(cx, cy, 8, 8, {
+	fill: c.body,
+	stroke: c.bodyInk,
+	sw: LINE
+});
+/** Lays out the body for a pose; `phi` is the body turn (shading shifts with it). */
+function bodyLayout(c, pose, phi, phase, hasStool) {
+	const wave = Math.sin(phase * Math.PI * 2);
+	const hop = Math.abs(Math.sin(phase * Math.PI));
+	let tf = [];
+	let headDx = 0;
+	let headDy = 0;
+	let tilt = 0;
+	let lift = 0;
+	const behind = [];
+	const front = [];
+	switch (pose) {
+		case "sit":
+		case "play": {
+			const up = hasStool ? -18 : 0;
+			tf = [tr(0, up), sc(1.12, .8)];
+			headDy = 12 + up;
+			if (hasStool) behind.push(...STOOL);
+			break;
+		}
+		case "walk":
+		case "run": {
+			const k = pose === "run" ? 1.6 : 1;
+			tf = [
+				tr(0, -10 * k),
+				skewX(-10 * k),
+				sc(1 - wave * .04, 1 + wave * .06)
+			];
+			headDy = -14 * k + wave * 3;
+			headDx = 7 * k;
+			tilt = 6 * k;
+			behind.push(path("M-52 -30h-14M-50 -18h-20M-54 -6h-10", line("#6f7787", 3, "round", .8)));
+			break;
+		}
+		case "wave":
+			tf = [rot(-6)];
+			headDx = -5;
+			tilt = -7;
+			front.push(hand(c, 44, -58), path("M56 -70Q61 -64 58 -56M62 -76Q69 -66 64 -54", line("#e8e6df", 2.2, "round", .8)));
+			break;
+		case "cheer":
+			lift = hop * 10;
+			tf = [sc(1 - hop * .04, 1 + hop * .05)];
+			headDy = -4 * hop;
+			front.push(hand(c, -42, -66 - hop * 4), hand(c, 42, -66 - hop * 4));
+			break;
+		case "jump":
+			lift = hop * 18;
+			tf = [sc(1 - hop * .06, 1 + hop * .08)];
+			headDy = -6 * hop;
+			break;
+		case "dance":
+			tf = [rot(wave * 8), sc(1 + hop * .03, 1 - hop * .03)];
+			headDx = wave * 5;
+			tilt = wave * 7;
+			break;
+		case "away":
+			tf = [sc(1.04, .95)];
+			headDy = 3;
+			tilt = 5;
+	}
+	const hl = -16 - Math.sin(phi) * 8;
+	const body = [g([
+		path(BODY, { fill: c.bodyShade }),
+		path(BODY, { fill: c.body }, [tr(-3 - Math.sin(phi) * 2, -3), sc(.9)]),
+		ellipse(0, -54, 20, 6, { fill: c.bodyShade }),
+		ellipse(0, 0, 6, 4, { fill: c.bodyLight }, [tr(hl, -36), rot(-30)]),
+		path(BODY, {
+			fill: "none",
+			stroke: c.bodyInk,
+			sw: LINE
+		})
+	], { tf })];
+	const isSitting = pose === "sit" || pose === "play";
+	return {
+		behind,
+		body,
+		front,
+		headDx,
+		headDy,
+		tilt,
+		lift,
+		prop: {
+			x: headDx * .5,
+			y: isSitting ? -34 + (hasStool ? -18 : 0) * .8 : -30
+		}
+	};
+}
+/** The soft ground shadow at the feet (shrinks while lifted). */
+function groundShadow(lift) {
+	const k = Math.max(.5, 1 - lift / 40);
+	return ellipse(0, 0, 36 * k, 8 * k, {
+		fill: "#000000",
+		opacity: .3
+	});
+}
+//#endregion
+//#region src/avatar/render/eyewear.ts
+/** The default frame colour. */
+const FRAME_BLACK = "#1d1a1e";
+const SHINE = "M-6 -4L-2 -7";
+const MIRROR_STREAKS = "M-9 7L3 -11M-1 10L9 -4";
+/** A frame stroke along a path, over its edge when it has one. */
+function frameLine(d, frame, sw = frame.sw) {
+	return [...frame.edge === void 0 ? [] : [path(d, line(frame.edge, sw + 1.6))], path(d, line(frame.colour, sw))];
+}
+/** One lens (or visor) in its own coordinates: the glass, then the frame. */
+function lensNodes(d, glass, frame, shines) {
+	const out = [];
+	const clip = { shapes: [path(d, {})] };
+	if (glass.tint === void 0) out.push(path(d, {
+		fill: "#ffffff",
+		fillOpacity: .16
+	}));
+	else if (glass.isMirror === true) out.push(path(d, { fill: glass.tint }), g([rect(-60, 2, 120, 40, {
+		fill: outline(glass.tint),
+		opacity: .75
+	}), ...shines.map(([px, py]) => path(MIRROR_STREAKS, line("#ffffff", 2.6, "round", .85), [tr(px, py)]))], { clip }));
+	else out.push(path(d, {
+		fill: glass.tint,
+		fillOpacity: .86
+	}), g([rect(-60, 3, 120, 40, {
+		fill: "#ffffff",
+		opacity: .12
+	})], { clip }));
+	out.push(...frameLine(d, frame));
+	out.push(...shines.map(([px, py]) => path(SHINE, line("#ffffff", 1.8, "round", glass.tint === void 0 ? .7 : .9), [tr(px, py)])));
+	return out;
+}
+/** Glasses: arms toward the ears, a lens at each eye (or one visor), and the bridge. */
+function glasses(ctx, part, colour, glass) {
+	const out = [];
+	const warp = turnWarp(ctx.phi, ctx.dy);
+	const isEdged = lightness(colour) > .7 || deltaE(colour, ctx.c.skin) < 24;
+	const frame = {
+		colour,
+		sw: part.frame ?? 3.2,
+		edge: isEdged ? ink(colour) : void 0
+	};
+	const tinted = part.tint === void 0 ? {} : {
+		tint: glass.tint ?? part.tint,
+		...glass.isMirror === true ? { isMirror: true } : {}
+	};
+	if (part.isSingle !== true) {
+		for (const side of [-1, 1]) if (feat(ctx, 30 * side).vis) out.push(...frameLine(new Path().m(30 * side, 2).l(45 * side, 0).d(warp), frame, 2.6));
+	}
+	if (part.visor) {
+		const shines = [feat(ctx, -17), feat(ctx, 17)].filter((f) => f.vis).map((f) => [f.x, 4 + ctx.dy]);
+		out.push(...lensNodes(part.visor.d(warp), tinted, frame, shines));
+		return out;
+	}
+	const lens = part.lens;
+	for (const side of [-1, 1]) {
+		const f = feat(ctx, 17 * side);
+		if (!lens || !f.vis || part.isSingle === true && side < 0) continue;
+		const flip = part.isMirrored === true && side < 0 ? -1 : 1;
+		out.push(g([...lensNodes(lens.d(), tinted, frame, [[0, 0]]), ...part.bar ? frameLine(part.bar.d(), frame, 4.4) : []], { tf: [tr(f.x, 4 + ctx.dy), sc(f.sx * flip, 1)] }));
+	}
+	if (part.chain && feat(ctx, 30).vis) out.push(path(part.chain.d(warp), line(colour, 1.6, "round", .9)));
+	if (part.bridge) {
+		const fb = feat(ctx, 0);
+		out.push(g(frameLine(part.bridge.d(), frame, 2.8), { tf: [tr(fb.x, 4 + ctx.dy), sc(fb.sx, 1)] }));
+	}
+	return out;
+}
+const STRAP_FRONT = new Path().m(-47, -2).c(-30, -6, 30, -6, 47, -2);
+const STRAP_BACK = new Path().m(-47, -2).c(-30, 4, 30, 4, 47, -2);
+const SHELL = blob([
+	[-31, -9],
+	[-4, -10],
+	[0, -6],
+	[4, -10],
+	[31, -9],
+	[34, 4],
+	[26, 16],
+	[7, 16],
+	[0, 11],
+	[-7, 16],
+	[-26, 16],
+	[-34, 4]
+]);
+const GLASS_L = blob([
+	[-27, -5],
+	[-7, -6],
+	[-5, 8],
+	[-9, 12],
+	[-24, 12],
+	[-29, 4]
+]);
+const GLASS_R = blob([
+	[27, -5],
+	[7, -6],
+	[5, 8],
+	[9, 12],
+	[24, 12],
+	[29, 4]
+]);
+/** Play goggles over the eyes (they replace the eyes and any glasses); the strap is the body colour. */
+function goggles(ctx) {
+	const w = turnWarp(ctx.phi, ctx.dy);
+	const band = ctx.c.body;
+	const strap = STRAP_FRONT.d(w);
+	return [
+		path(strap, line(ink(band), 9)),
+		path(strap, line(band, 6)),
+		path(SHELL.d(w), {
+			fill: "#2a3142",
+			stroke: "#0d0f14",
+			sw: LINE
+		}),
+		path(GLASS_L.d(w), { fill: "#5fe3f2" }),
+		path(GLASS_R.d(w), { fill: "#5fe3f2" }),
+		path(new Path().m(-22, 6).l(-14, -2).d(w), line("#e8fbff", 3)),
+		path(new Path().m(12, 6).l(20, -2).d(w), line("#e8fbff", 3))
+	];
+}
+/** The goggles strap seen from behind. */
+function gogglesStrapBack(ctx, phi) {
+	const d = STRAP_BACK.d(turnWarp(phi));
+	return [path(d, line(ink(ctx.c.body), 9)), path(d, line(ctx.c.body, 6))];
+}
+//#endregion
+//#region src/avatar/render/eyes.ts
+/**
+* Eyes and brows in style C (§14.1): whites 7% larger than style A's with a
+* 1.6-unit rim in a darker shade of the skin, an iris with a darker ring, a
+* pupil, two glints, and a soft dark-brown lid line. No dark outline.
+*/
+/** Eye-white radii: style A's 9.6 × 11.8, 7% larger. */
+const RX = 10.272;
+const RY = 11.8 * 1.07;
+/** One eye; `side` −1 is the viewer's left. */
+function eye(ctx, side) {
+	const f = feat(ctx, 17 * side);
+	if (!f.vis) return [];
+	const fp = ctx.face;
+	const lidBase = side < 0 ? fp.lidL : fp.lidR;
+	const lid = lidBase + (1 - lidBase) * ctx.blink;
+	const low = side < 0 ? fp.lowL : fp.lowR;
+	const curve = side < 0 ? fp.closedCurveL : fp.closedCurveR;
+	const place = [tr(f.x, 4 + ctx.dy), sc(f.sx, 1)];
+	if (lid >= .9) return [g([path(`M-8 1.5Q0 ${n(1.5 - 9 * curve)} 8 1.5`, line(SOFT_INK, LINE * 1.05))], { tf: place })];
+	const top = -12.626000000000001 + lid * 2 * RY;
+	const edgeY = (px) => top + fp.lidTilt * (px * -side) / 9;
+	const bot = RY - low * 2 * RY;
+	const gx = ctx.gaze.x * 2.8;
+	const gy = ctx.gaze.y * 3.4;
+	const clip = { shapes: [ellipse(0, 0, RX, RY, {})] };
+	const inner = [g([
+		ellipse(0, 0, 7, 7, { fill: ctx.c.eye }),
+		ellipse(0, 0, 6.4, 6.4, line(ctx.c.eyeDark, 1.2)),
+		ellipse(0, 0, 3.6 * fp.pupil, 3.6 * fp.pupil, { fill: FIXED.pupil }),
+		ellipse(-2.4, -2.8, 2.2, 2.2, { fill: "#ffffff" }),
+		ellipse(2.1, 2, .9, .9, { fill: "#ffffff" })
+	], { tf: [tr(gx, gy)] })];
+	if (lid > .02) inner.push(path(`M-12 -14L12 -14L12 ${n(edgeY(12))}Q0 ${n(top + 1.5)} -12 ${n(edgeY(-12))}Z`, { fill: ctx.c.skin }));
+	if (low > .02) inner.push(path(`M-12 14L12 14L12 ${n(bot)}Q0 ${n(bot - 3)} -12 ${n(bot)}Z`, { fill: ctx.c.skin }));
+	const out = [ellipse(0, 0, RX, RY, { fill: FIXED.white }), g(inner, { clip })];
+	if (lid > .06) out.push(g([path(`M${n(-9.772)} ${n(edgeY(-9.772))}Q0 ${n(top + 1.5)} ${n(9.772)} ${n(edgeY(9.772))}`, line(SOFT_INK, 1.9))], { clip }));
+	out.push(ellipse(0, 0, RX, RY, line(ctx.c.eyeRim, 1.6)));
+	return [g(out, { tf: place })];
+}
+const BROW_W = {
+	soft: 3.8,
+	thin: 2.4,
+	thick: 5.6,
+	arched: 3.6,
+	straight: 4.2
+};
+const BROW_ARCH = {
+	soft: 1,
+	thin: 1,
+	thick: .8,
+	arched: 1.9,
+	straight: .2
+};
+/** One brow in a style (`soft`, `thin`, …). */
+function brow(ctx, side, style) {
+	const f = feat(ctx, 17 * side);
+	if (!f.vis) return [];
+	const p = side < 0 ? ctx.face.browL : ctx.face.browR;
+	const by = -14 + p.dy + ctx.dy * 1.1;
+	const xi = -7.5 * side;
+	const xo = 7.5 * side;
+	const yi = by + p.tilt * .8;
+	const yo = by - p.tilt * .35;
+	const arch = p.arch * (BROW_ARCH[style] ?? 1);
+	const width = (BROW_W[style] ?? 3.8) * 1.15;
+	return [g([path(`M${n(xi)} ${n(yi)}Q0 ${n(Math.min(yi, yo) - arch * 2)} ${n(xo)} ${n(yo)}`, line(ctx.c.brow, width))], { tf: [tr(f.x, 0), sc(f.sx, 1)] })];
+}
+//#endregion
+//#region src/avatar/render/head.ts
+/** The head, ears, cheeks and the small face and ear extras. */
+const EAR = "M-2 -10C6 -12 11 -6 10 1C9 8 5 11 -1 10Z";
+const EAR_FOLD = "M1.5 -5C5.5 -5 6.5 0 5 3.5";
+/** Ears behind the head (`behind`) or in front of it (`front`), hidden when turned away. */
+function ears(ctx, which, extra) {
+	const out = [];
+	for (const side of [-1, 1]) {
+		const t = Math.PI / 2 * side + ctx.phi;
+		const cos = Math.cos(t);
+		if (cos < -.15) continue;
+		const isInFront = cos > .3;
+		if (which === "front" !== isInFront) continue;
+		const earX = clamp(46 * Math.sin(t), -44, 44);
+		const w = isInFront ? .75 + .25 * cos : 1;
+		const flip = isInFront ? -Math.sign(earX || side) : side;
+		const parts = [path(EAR, {
+			fill: ctx.c.skin,
+			stroke: ctx.c.skinInk,
+			sw: LINE
+		}), path(EAR_FOLD, line(ctx.c.skinShade, 2.2))];
+		if (extra?.kind === "studs") parts.push(ellipse(3, 7, 2.2, 2.2, {
+			fill: extra.colour,
+			stroke: "#3a2a2a",
+			sw: .8
+		}));
+		if (extra?.kind === "hoops") parts.push(ellipse(3, 12, 3.6, 4.4, line(extra.colour, 1.8)));
+		out.push(g(parts, { tf: [tr(earX, 6 + ctx.dy * .3), sc(flip * w, 1)] }));
+	}
+	return out;
+}
+/** The head: a shade base, the lit face, and the tonal outline. */
+function head(ctx) {
+	const d = HEAD_PATH.d();
+	const lx = -2.5 + Math.sin(ctx.phi) * 3;
+	return [
+		path(d, { fill: ctx.c.skinShade }),
+		path(d, { fill: ctx.c.skin }, [tr(lx, -3), sc(.95)]),
+		path(d, {
+			fill: "none",
+			stroke: ctx.c.skinInk,
+			sw: LINE
+		})
+	];
+}
+const FRECKLES = [
+	[-3.5, -1.5],
+	[0, .8],
+	[3.5, -1.2],
+	[1.5, -3.5]
+];
+/** Cheek blush (from the expression, plus `rosy`) and freckles. */
+function cheeks(ctx, hasFreckles, isRosy) {
+	const out = [];
+	const blush = Math.min(1, ctx.face.cheeks + (isRosy ? .45 : 0));
+	for (const side of [-1, 1]) {
+		const f = feat(ctx, 25 * side);
+		if (!f.vis) continue;
+		const parts = [];
+		if (blush > .02) parts.push(ellipse(0, 0, 6.5, 3.8, {
+			fill: FIXED.blush,
+			opacity: Math.round(blush * 5) / 10
+		}));
+		if (hasFreckles) parts.push(...FRECKLES.map(([fx, fy]) => ellipse(fx, fy, 1.05, 1.05, {
+			fill: ctx.c.skinInk,
+			opacity: .45
+		})));
+		if (parts.length > 0) out.push(g(parts, { tf: [tr(f.x, 18 + ctx.dy), sc(f.sx, 1)] }));
+	}
+	return out;
+}
+//#endregion
+//#region src/avatar/render/mouth.ts
+/**
+* The nose, the mouth morph (one cubic structure for every shape, so any two
+* expressions tween, §3.5) and the small FX glyphs.
+*/
+/** The nose: a soft shade with a highlight. */
+function nose(ctx) {
+	const f = feat(ctx, 0);
+	return [g([ellipse(0, 0, 4.4, 3, { fill: ctx.c.skinShade }), ellipse(-1.5, -1, 1.2, 1.2, {
+		fill: ctx.c.skinLight,
+		opacity: .9
+	})], { tf: [tr(f.x, 16 + ctx.dy), sc(Math.max(.6, f.sx), 1)] })];
+}
+/** The mouth: a line when closed, a filled shape with teeth and tongue when open. Talking adds opening. */
+function mouth(ctx) {
+	const base = ctx.face.mouth;
+	const m = {
+		...base,
+		open: base.open + ctx.talk * 9 * (1 - base.round * .4)
+	};
+	const f = feat(ctx, m.dx);
+	const baseY = 27;
+	const lx = -m.w / 2;
+	const ly = baseY - m.sL;
+	const rx = m.w / 2;
+	const ry = baseY - m.sR;
+	const s = (m.sL + m.sR) / 2;
+	const corner = baseY - s;
+	const ctrl = (target) => (target - .25 * corner) / .75;
+	const place = [tr(f.x, ctx.dy * .8), sc(Math.max(.35, f.sx), 1)];
+	if (m.open < 1) {
+		const c = ctrl(baseY + s * .55);
+		return [g([path(`M${n(lx)} ${n(ly)}C${n(-m.w * .18)} ${n(c)} ${n(m.w * .18)} ${n(c)} ${n(rx)} ${n(ry)}`, line(SOFT_INK, LINE * .95))], { tf: place })];
+	}
+	const up = baseY + s * .3 - m.round * m.open * .45;
+	const lo = baseY + s * .55 + m.open * (1 - m.round * .45);
+	const kx = m.w / 2 * (.55 + m.round * .8);
+	const d = `M${n(lx)} ${n(ly)}C${n(-kx)} ${n(ctrl(up))} ${n(kx)} ${n(ctrl(up))} ${n(rx)} ${n(ry)}C${n(kx)} ${n(ctrl(lo))} ${n(-kx)} ${n(ctrl(lo))} ${n(lx)} ${n(ly)}Z`;
+	const inside = [];
+	if (m.tongue > .05) inside.push(ellipse(0, lo + 1, m.w * .32, m.open * .42 * m.tongue + 1, { fill: FIXED.tongue }));
+	if (m.teeth > .05) inside.push(rect(-m.w / 2, up - 6, m.w, 6 + m.open * .22 * m.teeth, { fill: FIXED.white }));
+	return [g([
+		path(d, { fill: FIXED.mouth }),
+		g(inside, { clip: { shapes: [path(d, {})] } }),
+		path(d, line(SOFT_INK, LINE * .9))
+	], { tf: place })];
+}
+/** FX glyphs beside the head (sparkle, tear, sweat, anger, question, zzz). */
+function extras(ctx) {
+	const out = [];
+	const f = feat(ctx, 0);
+	for (const e of ctx.face.extras) {
+		if (e === "sparkle") out.push(path("M0 -9Q1.4 -1.4 9 0Q1.4 1.4 0 9Q-1.4 1.4 -9 0Q-1.4 -1.4 0 -9Z", {
+			fill: "#ffd23f",
+			stroke: "#0d0f14",
+			sw: 1.6
+		}, [tr(48 + f.x * .2, -44)]));
+		if (e === "tear") {
+			const t = feat(ctx, -16);
+			if (t.vis) out.push(path("M0 -5Q4.5 2 0 5Q-4.5 2 0 -5Z", {
+				fill: "#7cc7ff",
+				stroke: "#1f3b5c",
+				sw: 1.4
+			}, [tr(t.x - 5, 16 + ctx.dy)]));
+		}
+		if (e === "sweat") out.push(path("M0 -6Q5 2 0 6Q-5 2 0 -6Z", {
+			fill: "#9fdcff",
+			stroke: "#1f3b5c",
+			sw: 1.4
+		}, [tr(40 + f.x * .2, -26)]));
+		if (e === "anger") out.push(g([
+			path("M-6 -2Q-2 -2 -2 -6", line("#ff4d4d", 2.6)),
+			path("M2 -6Q2 -2 6 -2", line("#ff4d4d", 2.6)),
+			path("M6 2Q2 2 2 6", line("#ff4d4d", 2.6)),
+			path("M-2 6Q-2 2 -6 2", line("#ff4d4d", 2.6))
+		], { tf: [tr(30 + f.x * .3, -36)] }));
+		if (e === "question") out.push({
+			k: "text",
+			x: 50 + f.x * .2,
+			y: -40,
+			text: "?",
+			size: 26,
+			font: "pixel",
+			fill: "#ffd23f",
+			stroke: "#0d0f14",
+			sw: 1.2
+		});
+		if (e === "zzz") out.push({
+			k: "text",
+			x: 44 + f.x * .2,
+			y: -42,
+			text: "z z",
+			size: 20,
+			font: "pixel",
+			fill: "#8ab4ff",
+			stroke: "#0d0f14",
+			sw: 1.2
+		});
+	}
+	return out;
+}
+//#endregion
+//#region src/avatar/render/props.ts
+/**
+* Status props (§3.11, §14.3): runtime-only parts the world (or a preview)
+* puts on a player. `goggles` lives in eyewear.ts; the head props here sit on
+* the head, the hand props at the `prop` anchor in front of the body.
+*/
+const DARK = "#0d0f14";
+/** Hand props are drawn at this scale so they read at small sizes. */
+const PROP_SCALE = 1.45;
+/** A headset: a band over the head, ear cups and a mic (head space). */
+function headset(ctx, isBack) {
+	const w = turnWarp(isBack ? 0 : ctx.phi);
+	const band = blob(arc(0, -4, 51, 51, 196, 344, 8), false);
+	const nodes = [path(band.d(w), line(DARK, 8)), path(band.d(w), line("#4a5470", 5))];
+	const phi = isBack ? 0 : ctx.phi;
+	for (const side of [-1, 1]) {
+		const t = Math.PI / 2 * side + phi;
+		if (Math.cos(t) < -.15) continue;
+		const cupX = Math.max(-47, Math.min(47, 46 * Math.sin(t)));
+		const wide = 6 + 3 * Math.max(0, Math.cos(t));
+		nodes.push(path(roundedRect(cupX - wide, -6, wide * 2, 20, 5).d(), {
+			fill: "#2a3142",
+			stroke: DARK,
+			sw: LINE
+		}));
+	}
+	if (!isBack && Math.abs(phi) < .7) nodes.push(path(new Path().m(-46, 12).q(-40, 30, -18, 30).d(w), line("#4a5470", 3)), ellipse(-17, 30, 3, 3, {
+		fill: "#ff5f3b",
+		stroke: DARK,
+		sw: 1.2
+	}));
+	return nodes;
+}
+/** A small crown on top of the head (head space; `top` is the hair or hat top). */
+function crown(top) {
+	return [g([path("M-16 0L-18 -16L-8 -8L0 -20L8 -8L18 -16L16 0Z", {
+		fill: "#ffd23f",
+		stroke: "#8a5a00",
+		sw: LINE
+	}), ellipse(0, -5, 2.4, 2.4, { fill: "#ff5f3b" })], { tf: [tr(0, -50 - top + 4)] })];
+}
+const card = (colour) => rect(-6, -9, 12, 17, {
+	fill: colour,
+	stroke: DARK,
+	sw: 1.6
+}, 2.5);
+/** Nub hands holding something at the prop anchor (body space). */
+function nubs(body, ink, spread, atY) {
+	return [-1, 1].map((s) => ellipse(spread * s, atY, 7, 6, {
+		fill: body,
+		stroke: ink,
+		sw: LINE
+	}));
+}
+/** A hand prop drawn at the `prop` anchor (x, y) in front of the body. */
+function handProp(prop, atX, atY, body, bodyInk) {
+	switch (prop) {
+		case "cards": return [g([
+			g([card("#ff5f3b")], { tf: [tr(-8, 0), rot(-18)] }),
+			g([card("#ffd23f")], { tf: [tr(0, -3)] }),
+			g([card("#3d7bff")], { tf: [tr(8, 0), rot(18)] }),
+			...nubs(body, bodyInk, 13, 8)
+		], { tf: [tr(atX, atY), sc(PROP_SCALE)] })];
+		case "controller": return [g([
+			path(new Path().m(-20, -4).c(-20, -12, 20, -12, 20, -4).c(24, 10, 14, 14, 8, 6).l(-8, 6).c(-14, 14, -24, 10, -20, -4).z().d(), {
+				fill: "#2a3142",
+				stroke: DARK,
+				sw: LINE
+			}),
+			ellipse(-9, -2, 2.6, 2.6, { fill: "#8ab4ff" }),
+			ellipse(10, -4, 2, 2, { fill: "#ff5f3b" }),
+			ellipse(13, 0, 2, 2, { fill: "#4ade80" }),
+			...nubs(body, bodyInk, 20, 4)
+		], { tf: [tr(atX, atY), sc(PROP_SCALE)] })];
+		case "book": return [g([
+			path("M0 -2C-8 -8 -18 -8 -24 -5L-24 12C-18 9 -8 9 0 14C8 9 18 9 24 12L24 -5C18 -8 8 -8 0 -2Z", {
+				fill: "#f4f1ea",
+				stroke: DARK,
+				sw: LINE
+			}),
+			path("M0 -2L0 14", line("#c9c2b4", 1.6)),
+			path("M-19 0L-5 3M-19 5L-5 8M5 3L19 0M5 8L19 5", line("#9a9384", 1.2)),
+			path("M-24 12C-18 9 -8 9 0 14C8 9 18 9 24 12L24 15C18 12 8 12 0 17C-8 12 -18 12 -24 15Z", {
+				fill: "#ff5f3b",
+				stroke: DARK,
+				sw: 1.4
+			}),
+			...nubs(body, bodyInk, 25, 6)
+		], { tf: [tr(atX, atY), sc(PROP_SCALE)] })];
+		case "trophy": return [g([
+			path("M-11 -14L11 -14L9 0C8 6 -8 6 -9 0Z", {
+				fill: "#ffd23f",
+				stroke: "#8a5a00",
+				sw: LINE
+			}),
+			path("M-11 -11C-18 -11 -18 -2 -9 -1M11 -11C18 -11 18 -2 9 -1", line("#8a5a00", 2.2)),
+			rect(-3, 4, 6, 6, { fill: "#e0a800" }),
+			rect(-9, 10, 18, 5, {
+				fill: "#6b4f12",
+				stroke: DARK,
+				sw: 1.2
+			}, 1.5),
+			ellipse(13, 6, 7, 6, {
+				fill: body,
+				stroke: bodyInk,
+				sw: LINE
+			})
+		], { tf: [tr(atX + 24, atY - 10), sc(PROP_SCALE)] })];
+		default: return [];
+	}
+}
+//#endregion
+//#region src/avatar/render/compose.ts
+/**
+* Composes a look and a pose into a scene in rig space: the feet at (0, 0),
+* y down, the head centre near (0, −96) (§14.2). Layers go back to front as
+* in §3.2, with facial hair split into beard and moustache layers.
+*/
+/** The lens tint drawn with a mirror finish. */
+const MIRROR_TINT = "p:lens-mirror";
+/** The head centre's height above the feet. */
+const HEAD_Y = -96;
+const DEG = Math.PI / 180;
+const FACING_ANGLE = {
+	S: 0,
+	SE: 34,
+	E: 70,
+	NE: 145,
+	N: 180
+};
+const MIRROR = {
+	SW: "SE",
+	W: "E",
+	NW: "NE"
+};
+const VIEW_FACING = {
+	front: "S",
+	back: "N",
+	left: "W",
+	right: "E"
+};
+/** The facing an options object asks for. */
+function facingOf(opts) {
+	return opts.facing ?? (opts.view ? VIEW_FACING[opts.view] : "S");
+}
+function resolveParts(look, art) {
+	const slot = (name) => look.accessories.find((a) => a.slot === name);
+	const hatAcc = slot("headwear");
+	const glassAcc = slot("glasses");
+	const earAcc = slot("ears");
+	const face = slot("face");
+	return {
+		c: lookColours(look),
+		hair: art.hair[partName(look.hair.style)],
+		hat: hatAcc ? art.headwear[partName(hatAcc.id)] : void 0,
+		hatColour: accessoryColour(look, hatAcc),
+		beard: art.beard[partName(look.facialHair.style)],
+		glasses: glassAcc ? art.glasses[partName(glassAcc.id)] : void 0,
+		glassesColour: glassAcc?.colour === void 0 ? FRAME_BLACK : accessoryColour(look, glassAcc),
+		lensGlass: glassAcc?.tint === void 0 ? {} : {
+			tint: resolveColour(glassAcc.tint),
+			...glassAcc.tint === MIRROR_TINT ? { isMirror: true } : {}
+		},
+		freckles: face?.id === "face.freckles",
+		rosy: face?.id === "face.rosy",
+		earExtra: earAcc ? {
+			kind: earAcc.id === "ears.hoops" ? "hoops" : "studs",
+			colour: earAcc.colour === void 0 ? "#f5c542" : accessoryColour(look, earAcc)
+		} : void 0,
+		browStyle: partName(look.brows.style)
+	};
+}
+/** The far-side clip for a turned head's rear art (a back-of-skull crescent). */
+function backOfHead(phi) {
+	const left = -46 * Math.cos(phi) - 3;
+	const cx = (left + 46 + 12) / 2;
+	const rx = (58 - left) / 2;
+	return {
+		crescent: {
+			shapes: [path(`M-200 -200H200V200H-200Z M${n(cx - rx)} 8A${n(rx)} 64 0 1 0 ${n(cx + rx)} 8A${n(rx)} 64 0 1 0 ${n(cx - rx)} 8Z`, {})],
+			evenOdd: true
+		},
+		half: { shapes: [rect(-200, -200, 200 + cx, 400, {})] }
+	};
+}
+const ABOVE_SHOULDERS = { shapes: [rect(-200, -200, 400, 237, {}), path(HEAD_PATH.d(), {})] };
+const BELOW_SHOULDERS = { shapes: [rect(-200, 35, 400, 300, {})] };
+/** True when a layer reaches below the shoulder line. */
+function hangs(shapes) {
+	return shapes?.some((s) => s.d.bottom() > 36) === true;
+}
+/** Splits a hair layer at the shoulders: the part above stays in `over`, the part below goes in `behind`. */
+function splitAtShoulders(nodes, doesHang, over, behind) {
+	if (nodes.length === 0) return;
+	if (!doesHang) {
+		over.push(...nodes);
+		return;
+	}
+	over.push(g(nodes, { clip: ABOVE_SHOULDERS }));
+	behind.push(g(nodes, { clip: BELOW_SHOULDERS }));
+}
+/** The front and side views of the head. */
+function frontHead(ctx, p, isPlaying, status, angle, gazeX) {
+	const hatCut = p.hat && typeof p.hat.hides === "number" ? { shapes: [rect(-120, p.hat.hides, 240, 260, {})] } : void 0;
+	const isHairShown = !(p.hat && p.hat.hides === "all");
+	const cut = (nodes) => hatCut && nodes.length > 0 ? [g(nodes, { clip: hatCut })] : nodes;
+	const hairTie = tones(ctx.c.body);
+	const hatTones = tones(p.hatColour);
+	const warpFront = turnWarp((angle + gazeX * 6) * DEG);
+	const warpBack = ctx.phi === 0 ? void 0 : (px, py) => [px - Math.sin(ctx.phi) * 8, py];
+	const behindBody = [];
+	const out = [];
+	if (isHairShown) behindBody.push(...cut(paintShapes(ctx.c, hairTie, p.hair?.back, warpBack)));
+	if (p.hat?.back) out.push(...paintShapes(ctx.c, hatTones, p.hat.back, warpBack));
+	if (!p.hat?.hidesEars) out.push(...ears(ctx, "behind", p.earExtra));
+	out.push(...head(ctx));
+	const turnS = Math.sin(ctx.phi);
+	if (Math.abs(turnS) > .3) {
+		const co = Math.cos(ctx.phi);
+		const shift = (px, py) => [px * (.92 + .08 * co) - turnS * 5, py];
+		const clips = backOfHead(ctx.phi);
+		const onFarSide = (nodes) => nodes.length > 0 ? [g([g(nodes, { clip: clips.crescent })], { clip: clips.half })] : [];
+		if (isHairShown) splitAtShoulders(onFarSide(cut(paintShapes(ctx.c, hairTie, p.hair?.rear, shift))), hangs(p.hair?.rear), out, behindBody);
+		if (p.hat) out.push(...onFarSide(paintShapes(ctx.c, hatTones, p.hat.rear, shift)));
+	}
+	if (!p.hat?.hidesEars) out.push(...ears(ctx, "front", p.earExtra));
+	out.push(...cheeks(ctx, p.freckles, p.rosy));
+	const faceWarp = turnWarp(ctx.phi, ctx.dy * .8);
+	out.push(...paintShapes(ctx.c, hairTie, p.beard?.beard, faceWarp));
+	if (!isPlaying) out.push(...eye(ctx, -1), ...eye(ctx, 1));
+	out.push(...brow(ctx, -1, p.browStyle), ...brow(ctx, 1, p.browStyle));
+	if (turnS > .8) out.push(path("M43 9C50 11 51 18 43.5 20", {
+		fill: ctx.c.skin,
+		stroke: ctx.c.skinInk,
+		sw: LINE
+	}));
+	out.push(...nose(ctx), ...mouth(ctx));
+	out.push(...paintShapes(ctx.c, hairTie, p.beard?.moustache, faceWarp));
+	if (isHairShown) {
+		splitAtShoulders(cut(paintShapes(ctx.c, hairTie, p.hair?.front, warpFront)), hangs(p.hair?.front), out, behindBody);
+		if (p.hair?.front?.some((s) => s.clip === "head")) out.push(path(HEAD_PATH.d(), {
+			fill: "none",
+			stroke: ctx.c.skinInk,
+			sw: LINE
+		}));
+	}
+	if (isPlaying) out.push(...goggles(ctx));
+	else if (p.glasses) out.push(...glasses(ctx, p.glasses, p.glassesColour, p.lensGlass));
+	if (p.hat) out.push(...paintShapes(ctx.c, hatTones, p.hat.front, warpFront));
+	if (status === "headset") out.push(...headset(ctx, false));
+	out.push(...extras(ctx));
+	return {
+		behindBody,
+		head: out
+	};
+}
+/** The back views (N, NE): the rear art wrapped past 180°. */
+function backHead(ctx, p, isPlaying, status, angle) {
+	const phi = (angle - 180) * DEG;
+	const warp = turnWarp(phi);
+	const isHairShown = !(p.hat && p.hat.hides === "all");
+	const hatCut = p.hat && typeof p.hat.hides === "number" ? { shapes: [rect(-120, p.hat.hides, 240, 260, {})] } : void 0;
+	const out = [];
+	if (!p.hat?.hidesEars) out.push(...ears({
+		...ctx,
+		phi
+	}, "behind", p.earExtra));
+	out.push(...head({
+		...ctx,
+		phi: 0
+	}));
+	if (isHairShown) {
+		const rear = paintShapes(ctx.c, tones(ctx.c.body), p.hair?.rear, warp);
+		out.push(...hatCut && rear.length > 0 ? [g(rear, { clip: hatCut })] : rear);
+		if (p.hair?.rear.some((s) => s.clip === "head")) out.push(path(HEAD_PATH.d(), {
+			fill: "none",
+			stroke: ctx.c.skinInk,
+			sw: LINE
+		}));
+	}
+	if (isPlaying) out.push(...gogglesStrapBack(ctx, phi));
+	if (p.hat) out.push(...paintShapes(ctx.c, tones(p.hatColour), p.hat.rear, warp));
+	if (status === "headset") out.push(...headset(ctx, true));
+	return {
+		behindBody: [],
+		head: out
+	};
+}
+/** The grey silhouette: a malformed code, a hidden player, or before the art loads. */
+function silhouette(hasShadow) {
+	const grey = "#6f7787";
+	return [
+		...hasShadow ? [groundShadow(0)] : [],
+		path("M-35 -2C-42 -20 -38 -46 -22 -56C-8 -62 8 -62 22 -56C38 -46 42 -20 35 -2C20 3 -20 3 -35 -2Z", { fill: grey }),
+		path(HEAD_PATH.d(), { fill: grey }, [tr(0, -96), sc(.94)])
+	];
+}
+function anchorsFor(headX, headY, top, prop, mirror) {
+	const at = (px, py) => ({
+		x: px * mirror,
+		y: py
+	});
+	return {
+		feet: at(0, 0),
+		body: at(0, -30),
+		neck: at(headX, headY + 46),
+		head: at(headX, headY),
+		eyeLine: at(headX, headY + 4),
+		mouth: at(headX, headY + 27),
+		hatTop: at(headX, top),
+		nameplate: at(0, top - 10),
+		bubble: at(0, top - 14),
+		seat: at(0, 0),
+		prop: at(prop.x, prop.y),
+		shadow: at(0, 0),
+		handL: at(-40, -30),
+		handR: at(40, -30),
+		pod: at(0, 14)
+	};
+}
+/** Composes a look (or `null` for the silhouette) with a pose. */
+function composeAvatar(look, opts = {}) {
+	const art = currentArt();
+	const facingIn = facingOf(opts);
+	const isMirrored = MIRROR[facingIn] !== void 0;
+	const facing = MIRROR[facingIn] ?? (facingIn === "S" || facingIn === "SE" || facingIn === "E" || facingIn === "NE" ? facingIn : "N");
+	const hasShadow = opts.shadow ?? opts.frame === "full";
+	if (!look || !art) return {
+		nodes: silhouette(hasShadow),
+		anchors: anchorsFor(0, -96, -156, {
+			x: 0,
+			y: -30
+		}, 1)
+	};
+	const pose = opts.pose ?? {};
+	const bodyPose = pose.body ?? "idle";
+	const status = pose.status ?? (bodyPose === "play" ? "goggles" : null);
+	const isPlaying = status === "goggles";
+	const face = pose.face ?? EXPRESSIONS[pose.expression ?? (bodyPose === "play" ? "determined" : bodyPose === "away" ? "sleepy" : "neutral")];
+	const gaze = pose.look ?? {
+		x: 0,
+		y: 0
+	};
+	const angle = FACING_ANGLE[facing];
+	const isBack = angle > 90;
+	const parts = resolveParts(look, art);
+	const ctx = {
+		c: parts.c,
+		face,
+		gaze,
+		phi: (angle + gaze.x * 11) * DEG,
+		dy: gaze.y * 3,
+		blink: pose.blink ?? 0,
+		talk: pose.talk ?? 0
+	};
+	const b = bodyLayout(parts.c, bodyPose, ctx.phi, pose.phase ?? .25, opts.stool === true);
+	const headX = b.headDx + (pose.bob?.x ?? 0);
+	const headY = -96 + b.headDy + (pose.bob?.y ?? 0);
+	const tilt = face.headTilt + b.tilt + (pose.tilt ?? 0);
+	const sq = face.squash + (pose.squash ?? 0);
+	const drawn = isBack ? backHead(ctx, parts, isPlaying, status, angle) : frontHead(ctx, parts, isPlaying, status, angle, gaze.x);
+	const headNodes = drawn.head;
+	const top = headY - 50 - Math.max(parts.hair?.top ?? 0, parts.hat?.top ?? 0);
+	if (status === "crown") headNodes.push(...crown(Math.max(parts.hair?.top ?? 0, parts.hat?.top ?? 0)));
+	const handProps = status && !isBack ? handProp(status, b.prop.x, b.prop.y, parts.c.body, parts.c.bodyInk) : [];
+	const headTf = [
+		tr(headX, headY),
+		rot(tilt),
+		sc(1 + sq, 1 - sq)
+	];
+	const character = [
+		...b.behind,
+		...drawn.behindBody.length > 0 ? [g(drawn.behindBody, { tf: headTf })] : [],
+		...b.body,
+		g(headNodes, { tf: headTf }),
+		...b.front,
+		...handProps
+	];
+	const lifted = b.lift > 0 ? [g(character, { tf: [tr(0, -b.lift)] })] : character;
+	const rimmed = opts.rim ? [g(lifted, { rim: true })] : lifted;
+	const all = [...hasShadow ? [groundShadow(b.lift)] : [], ...rimmed];
+	const mirror = isMirrored ? -1 : 1;
+	return {
+		nodes: isMirrored ? [g(all, { tf: [sc(-1, 1)] })] : all,
+		anchors: anchorsFor(headX, headY - b.lift, top - b.lift, {
+			x: b.prop.x,
+			y: b.prop.y - b.lift
+		}, mirror)
+	};
+}
+//#endregion
+//#region src/avatar/outputs/svg-markup.ts
+/**
+* Scene → SVG markup. Ids for clips and the rim filter are prefixed per call,
+* so many avatars can be inlined on one page. The output holds only numbers,
+* derived colours and escaped overlay text, so it is safe to insert as HTML.
+*/
+/** The rim filter: a dilated, soft light edge behind the silhouette. */
+const RIM_COLOUR = "#aab3c7";
+const FONTS = {
+	mono: "'Space Mono', monospace",
+	pixel: "'VT323', monospace"
+};
+/** Three decimals, for scales and opacities. */
+const fine = (v) => String(Math.round(v * 1e3) / 1e3);
+/** Escapes text for SVG content. */
+function escapeXml(text) {
+	return text.replace(/[&<>"']/g, (c) => `&#${String(c.charCodeAt(0))};`);
+}
+/** A transform list as an SVG `transform` attribute (empty for none). */
+function tfAttr(tf) {
+	if (!tf || tf.length === 0) return "";
+	return ` transform="${tf.map((op) => {
+		switch (op.k) {
+			case "t": return `translate(${n(op.x)} ${n(op.y)})`;
+			case "s": return `scale(${fine(op.x)} ${fine(op.y)})`;
+			case "r": return `rotate(${n(op.a)})`;
+			case "skx": return `skewX(${n(op.a)})`;
+		}
+	}).join(" ")}"`;
+}
+function paintAttrs(p) {
+	let out = ` fill="${p.fill ?? "none"}"`;
+	if (p.evenOdd) out += " fill-rule=\"evenodd\"";
+	if (p.fillOpacity !== void 0) out += ` fill-opacity="${fine(p.fillOpacity)}"`;
+	if (p.stroke && p.stroke !== "none") out += ` stroke="${p.stroke}" stroke-width="${n(p.sw ?? 1)}" stroke-linejoin="round" stroke-linecap="${p.cap ?? "round"}"`;
+	if (p.opacity !== void 0 && p.opacity < 1) out += ` opacity="${fine(p.opacity)}"`;
+	return out;
+}
+/** Collects `<defs>` while serialising. */
+var Writer = class {
+	constructor(prefix) {
+		_defineProperty(this, "defs", []);
+		_defineProperty(this, "count", 0);
+		_defineProperty(this, "usesRim", false);
+		_defineProperty(this, "prefix", void 0);
+		this.prefix = prefix;
+	}
+	id(kind) {
+		this.count += 1;
+		return `${this.prefix}${kind}${this.count.toString(36)}`;
+	}
+	clip(clip) {
+		const id = this.id("c");
+		const rule = clip.evenOdd ? " clip-rule=\"evenodd\"" : "";
+		this.defs.push(`<clipPath id="${id}">${clip.shapes.map((s) => this.node(s).replace("<path ", `<path${rule} `)).join("")}</clipPath>`);
+		return id;
+	}
+	node(node) {
+		switch (node.k) {
+			case "g": {
+				let attrs = tfAttr(node.tf);
+				if (node.clip) attrs += ` clip-path="url(#${this.clip(node.clip)})"`;
+				if (node.opacity !== void 0 && node.opacity < 1) attrs += ` opacity="${fine(node.opacity)}"`;
+				if (node.rim) {
+					this.usesRim = true;
+					attrs += ` filter="url(#${this.prefix}rim)"`;
+				}
+				const inner = node.children.map((child) => this.node(child)).join("");
+				return attrs === "" ? inner : `<g${attrs}>${inner}</g>`;
+			}
+			case "path": return `<path d="${node.d}"${tfAttr(node.tf)}${paintAttrs(node)}/>`;
+			case "ellipse": return node.rx === node.ry ? `<circle cx="${n(node.cx)}" cy="${n(node.cy)}" r="${n(node.rx)}"${tfAttr(node.tf)}${paintAttrs(node)}/>` : `<ellipse cx="${n(node.cx)}" cy="${n(node.cy)}" rx="${n(node.rx)}" ry="${n(node.ry)}"${tfAttr(node.tf)}${paintAttrs(node)}/>`;
+			case "rect": return `<rect x="${n(node.x)}" y="${n(node.y)}" width="${n(node.w)}" height="${n(node.h)}"${node.r ? ` rx="${n(node.r)}"` : ""}${tfAttr(node.tf)}${paintAttrs(node)}/>`;
+			case "text": return `<text x="${n(node.x)}" y="${n(node.y)}" font-family="${FONTS[node.font]}" font-size="${n(node.size)}"${node.bold ? " font-weight=\"700\"" : ""}${node.anchor === "middle" ? " text-anchor=\"middle\"" : ""} paint-order="stroke"${paintAttrs(node)}>${escapeXml(node.text)}</text>`;
+		}
+	}
+};
+/** A scene as SVG markup plus the `<defs>` it needs. */
+function sceneToSvg(nodes, prefix) {
+	const writer = new Writer(prefix);
+	const body = nodes.map((node) => writer.node(node)).join("");
+	if (writer.usesRim) writer.defs.push(`<filter id="${prefix}rim" x="-20%" y="-20%" width="140%" height="140%"><feMorphology in="SourceAlpha" operator="dilate" radius="2.8" result="d"/><feFlood flood-color="${RIM_COLOUR}" flood-opacity=".48"/><feComposite in2="d" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>`);
+	return {
+		body,
+		defs: writer.defs.join("")
+	};
+}
+//#endregion
+export { tr as A, pixelSize as C, path as D, line as E, toLook as F, deltaE as M, lightness as N, rect as O, toCode as P, framed as S, g as T, mix as _, composeAvatar as a, FRAMES as b, blob as c, scallop as d, EXPRESSIONS as f, isExpression as g, faceOf as h, HEAD_Y as i, contrast as j, rot as k, n as l, expressionFromEmote as m, escapeXml as n, Path as o, EXPRESSION_NAMES as p, sceneToSvg as r, arc as s, RIM_COLOUR as t, roundedRect as u, onArtReady as v, ellipse as w, frameOf as x, ready as y };
+
+//# sourceMappingURL=svg-markup.js.map