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

package/dist/shared/overlays.js

@@ -0,0 +1,800 @@
+import { t as _defineProperty } from "./defineProperty.js";
+import { C as ellipse, D as rect, E as path, N as toCode, O as rot, P as toLook, S as pixelSize, T as line, a as composeAvatar, d as EXPRESSIONS, g as mix, k as tr, m as faceOf, w as g } from "./svg-markup.js";
+import { r as renderCanvas, t as renderKey } from "./pose-key.js";
+import { n as renderSvg } from "./svg.js";
+import { hashSeed, mulberry32 } from "@diffenderfer-games/hub-contract/avatar";
+//#region src/avatar/outputs/bitmap.ts
+/**
+* `render.bitmap` and `render.dataUrl`: cached images of an avatar, keyed by
+* code, pose bucket, size and view (an LRU of 256 entries).
+*/
+const CACHE_SIZE = 256;
+const bitmaps = /* @__PURE__ */ new Map();
+function remember(cache, key, make) {
+	const hit = cache.get(key);
+	if (hit !== void 0) {
+		cache.delete(key);
+		cache.set(key, hit);
+		return hit;
+	}
+	const value = make();
+	cache.set(key, value);
+	if (cache.size > CACHE_SIZE) {
+		const oldest = cache.keys().next().value;
+		if (oldest !== void 0) cache.delete(oldest);
+	}
+	return value;
+}
+/** A canvas of the avatar's frame size (an `OffscreenCanvas` where available). */
+function drawToCanvas(like, opts) {
+	const { width, height } = pixelSize(opts);
+	const w = Math.max(1, Math.ceil(width));
+	const h = Math.max(1, Math.ceil(height));
+	if (typeof OffscreenCanvas === "undefined") {
+		const canvas = Object.assign(document.createElement("canvas"), {
+			width: w,
+			height: h
+		});
+		const ctx = canvas.getContext("2d");
+		if (ctx) renderCanvas(ctx, like, {
+			...opts,
+			x: 0,
+			y: 0
+		});
+		return canvas;
+	}
+	const canvas = new OffscreenCanvas(w, h);
+	const ctx = canvas.getContext("2d");
+	if (ctx) renderCanvas(ctx, like, {
+		...opts,
+		x: 0,
+		y: 0
+	});
+	return canvas;
+}
+/** An `ImageBitmap` of the avatar (cached). */
+function renderBitmap(like, opts = {}) {
+	return remember(bitmaps, renderKey(toCode(like), opts), () => createImageBitmap(drawToCanvas(like, opts)));
+}
+/** A data URL: `svg` (synchronous inside, the default) or `png`. */
+async function renderDataUrl(like, opts = {}, type = "svg") {
+	if (type === "svg") return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(renderSvg(like, opts))}`;
+	const canvas = drawToCanvas(like, opts);
+	if ("toDataURL" in canvas) return canvas.toDataURL("image/png");
+	const blob = await canvas.convertToBlob({ type: "image/png" });
+	const bytes = new Uint8Array(await blob.arrayBuffer());
+	let binary = "";
+	for (const byte of bytes) binary += String.fromCharCode(byte);
+	return `data:image/png;base64,${btoa(binary)}`;
+}
+//#endregion
+//#region src/avatar/animator/reactions.ts
+const still = {
+	bob: {
+		x: 0,
+		y: 0
+	},
+	tilt: 0,
+	squash: 0
+};
+const ease = (u) => Math.sin(u * Math.PI);
+/** Every reaction's track; `u` runs 0 … 1 over `ms`. */
+const REACTIONS = {
+	nod: {
+		ms: 700,
+		at: (u) => ({
+			bob: {
+				x: 0,
+				y: Math.sin(u * Math.PI * 2) * 3 * (1 - u)
+			},
+			tilt: 0,
+			squash: 0
+		})
+	},
+	shake: {
+		ms: 800,
+		at: (u) => ({
+			bob: {
+				x: Math.sin(u * Math.PI * 4) * 4 * (1 - u),
+				y: 0
+			},
+			tilt: 0,
+			squash: 0
+		})
+	},
+	bounce: {
+		ms: 600,
+		expression: "happy",
+		at: (u) => ({
+			bob: {
+				x: 0,
+				y: -ease(u) * 8
+			},
+			tilt: 0,
+			squash: -ease(u) * .04
+		})
+	},
+	cheer: {
+		ms: 1400,
+		expression: "laugh",
+		body: "cheer",
+		at: (u) => ({
+			bob: {
+				x: 0,
+				y: -Math.abs(Math.sin(u * Math.PI * 3)) * 6
+			},
+			tilt: 0,
+			squash: 0
+		})
+	},
+	gasp: {
+		ms: 900,
+		expression: "surprised",
+		at: (u) => ({
+			bob: {
+				x: 0,
+				y: -ease(Math.min(1, u * 2)) * 3
+			},
+			tilt: 0,
+			squash: -ease(u) * .05
+		})
+	},
+	flinch: {
+		ms: 600,
+		expression: "shocked",
+		at: (u) => ({
+			bob: {
+				x: -ease(u) * 5,
+				y: ease(u) * 2
+			},
+			tilt: -ease(u) * 6,
+			squash: ease(u) * .04
+		})
+	},
+	shrug: {
+		ms: 900,
+		expression: "smug",
+		at: (u) => ({
+			bob: {
+				x: 0,
+				y: -ease(u) * 3
+			},
+			tilt: Math.sin(u * Math.PI * 2) * 5,
+			squash: 0
+		})
+	},
+	sleep: {
+		ms: 3e3,
+		expression: "sleepy",
+		body: "away",
+		at: () => still
+	},
+	wave: {
+		ms: 1500,
+		expression: "happy",
+		body: "wave",
+		at: (u) => ({
+			bob: {
+				x: 0,
+				y: 0
+			},
+			tilt: Math.sin(u * Math.PI * 4) * 3,
+			squash: 0
+		})
+	}
+};
+/** No motion. */
+const STILL = still;
+const BLINK_BUCKET = 4e3;
+/** A deterministic random in [0, 1) for (seed, channel, bucket). */
+function cell(seed, channel, bucket) {
+	return mulberry32(hashSeed(`${String(seed)}:${String(channel)}:${String(bucket)}`));
+}
+/** One blink's closure at offset `dt` from its start: up then down. */
+function closure(dt) {
+	if (dt < 0 || dt > 150) return 0;
+	const half = 75;
+	return dt < half ? dt / half : 1 - (dt - half) / half;
+}
+/**
+* Lid closure from blinking, 0 … 1: one blink per 4 s bucket at a seeded
+* offset (so intervals fall between about 2 and 6 s), 10% of them doubled.
+*/
+function blinkAt(seed, t) {
+	const bucket = Math.floor(t / BLINK_BUCKET);
+	let out = 0;
+	for (const b of [bucket - 1, bucket]) {
+		const r = cell(seed, 1, b);
+		const start = b * BLINK_BUCKET + 1e3 + r() * 2e3;
+		const isDouble = r() < .1;
+		out = Math.max(out, closure(t - start), isDouble ? closure(t - start - 150 - 90) : 0);
+	}
+	return out;
+}
+/** An idle wandering gaze target: holds for 3–8 s, small amplitude. */
+function wanderAt(seed, t) {
+	const r = cell(seed, 2, Math.floor(t / 5500));
+	if (r() < .45) return {
+		x: 0,
+		y: 0
+	};
+	return {
+		x: (r() * 2 - 1) * .6,
+		y: (r() * 2 - 1) * .3
+	};
+}
+/** Breathing bob (rig units) and a slow sway (degrees). */
+function breathAt(seed, t) {
+	const phase = seed % 1e3 / 1e3;
+	return {
+		bob: Math.sin((t / 2400 + phase) * Math.PI * 2) * .6,
+		sway: Math.sin((t / 5200 + phase) * Math.PI * 2) * 1.2
+	};
+}
+/** An occasional micro smile while idle: its weight at t (0 most of the time). */
+function microSmileAt(seed, t) {
+	const bucket = Math.floor(t / 11e3);
+	const r = cell(seed, 3, bucket);
+	if (r() < .6) return 0;
+	const dt = t - (bucket * 11e3 + 2e3 + r() * 6e3);
+	if (dt < 0 || dt > 900) return 0;
+	return Math.sin(dt / 900 * Math.PI) * .35;
+}
+//#endregion
+//#region src/avatar/animator/animator.ts
+/**
+* The animator (avatars.md §3.7): a pure, time-based face and body driver.
+* Every call (`express`, `lookAt`, `react`, …) appends to a timestamped
+* schedule and `pose(t)` evaluates it, with no clock or animation frame of
+* its own: the same schedule and `t` always give the same pose, so it suits
+* game loops, Pixi tickers, three.js, CSS-driven DOM, tests and replays.
+*/
+const KEEP = 48;
+const push = (list, item) => {
+	list.push(item);
+	if (list.length > KEEP) list.shift();
+};
+/** The last event at or before t. */
+const latest = (list, t) => {
+	for (let i = list.length - 1; i >= 0; i -= 1) {
+		const e = list[i];
+		if (e && e.t <= t) return e;
+	}
+};
+const easeOut = (u) => 1 - (1 - Math.min(1, Math.max(0, u))) ** 2;
+function prefersReducedMotion() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** A face and body driver for one avatar. */
+var Animator = class {
+	constructor(look, opts = {}) {
+		_defineProperty(this, "reducedMotion", void 0);
+		_defineProperty(this, "seed", void 0);
+		_defineProperty(this, "idle", void 0);
+		_defineProperty(this, "clock", void 0);
+		_defineProperty(this, "bases", []);
+		_defineProperty(this, "expresses", []);
+		_defineProperty(this, "looks", []);
+		_defineProperty(this, "talks", []);
+		_defineProperty(this, "reacts", []);
+		_defineProperty(this, "bodies", []);
+		_defineProperty(this, "statuses", []);
+		_defineProperty(this, "current", void 0);
+		this.current = look;
+		this.seed = hashSeed(opts.seed ?? (typeof look === "string" ? look : "dg"));
+		this.idle = opts.idle ?? true;
+		this.reducedMotion = opts.reducedMotion === "auto" || opts.reducedMotion === void 0 ? prefersReducedMotion() : opts.reducedMotion;
+		this.clock = opts.clock ?? (() => typeof performance === "undefined" ? Date.now() : performance.now());
+		this.bases.push({
+			t: -Infinity,
+			face: EXPRESSIONS[opts.base ?? "neutral"],
+			fade: 0
+		});
+	}
+	/** The look this animator drives (adapters render it with each pose). */
+	get look() {
+		return this.current;
+	}
+	/** Swaps the look (an `ev:avatar` change) without resetting the schedule. */
+	setLook(look) {
+		this.current = look;
+		return this;
+	}
+	now(o) {
+		return o?.at ?? this.clock();
+	}
+	fade(ms) {
+		return this.reducedMotion ? Math.min(ms, 120) : ms;
+	}
+	/** Shows an expression (or raw parameters), then returns to the base. */
+	express(e, o = {}) {
+		push(this.expresses, {
+			t: this.now(o),
+			face: faceOf(e),
+			fade: this.fade(o.fadeMs ?? 180),
+			hold: o.holdMs ?? 1500
+		});
+		return this;
+	}
+	/** Sets the resting expression. */
+	setBase(e, o = {}) {
+		push(this.bases, {
+			t: this.now(o),
+			face: faceOf(e),
+			fade: this.fade(o.fadeMs ?? 250)
+		});
+		return this;
+	}
+	/** Eases the gaze toward a direction; `null` goes back to wandering (or the centre with `idle: false`). */
+	lookAt(target, o = {}) {
+		push(this.looks, {
+			t: this.now(o),
+			target,
+			speed: o.speed ?? 6
+		});
+		return this;
+	}
+	/** Flaps the mouth until `talk(false)`. */
+	talk(isOn, o = {}) {
+		const t = this.now(o);
+		push(this.talks, {
+			t,
+			level: isOn ? 1 : 0,
+			until: Infinity
+		});
+		return this;
+	}
+	/** Talks for a duration. */
+	talkFor(ms, o = {}) {
+		const t = this.now(o);
+		push(this.talks, {
+			t,
+			level: 1,
+			until: t + ms
+		});
+		return this;
+	}
+	/** Drives the mouth from audio amplitude (0 … 1). */
+	talkLevel(level, o = {}) {
+		push(this.talks, {
+			t: this.now(o),
+			level: Math.max(0, Math.min(1, level)),
+			until: Infinity
+		});
+		return this;
+	}
+	/** Plays a one-shot reaction. */
+	react(reaction, o = {}) {
+		push(this.reacts, {
+			t: this.now(o),
+			reaction
+		});
+		return this;
+	}
+	/** Sets the body pose; cycle poses (`walk`, `run`, `dance`) loop every `cycleMs`. */
+	setBody(body, o = {}) {
+		push(this.bodies, {
+			t: this.now(o),
+			body,
+			cycleMs: o.cycleMs ?? (body === "run" ? 320 : 520)
+		});
+		return this;
+	}
+	/** Sets or clears the status prop. */
+	setStatus(status, o = {}) {
+		push(this.statuses, {
+			t: this.now(o),
+			status
+		});
+		return this;
+	}
+	/** Plays the tuned face and reaction for a game event. */
+	feel(feeling, o = {}) {
+		const at = { at: this.now(o) };
+		switch (feeling) {
+			case "win": return this.express("laugh", {
+				...at,
+				holdMs: 1800
+			}).react("cheer", at);
+			case "lose": return this.express("sad", {
+				...at,
+				holdMs: 1800
+			});
+			case "bigPlay": return this.express("grin", at).react("bounce", at);
+			case "victim": return this.express("shocked", {
+				...at,
+				holdMs: 900
+			}).react("flinch", at);
+			case "waiting": return this.setBase("thinking", at);
+			case "yourTurn": return this.express("determined", at).react("nod", at);
+			case "idle": return this.setBase("neutral", at);
+		}
+	}
+	faceAt(t) {
+		const base = latest(this.bases, t);
+		const prior = base ? latest(this.bases.filter((b) => b.t < base.t), t) : void 0;
+		let face = base ? prior && base.fade > 0 ? mix(prior.face, base.face, easeOut((t - base.t) / base.fade)) : base.face : EXPRESSIONS.neutral;
+		if (this.idle) {
+			const smile = microSmileAt(this.seed, t);
+			if (smile > 0) face = mix(face, "happy", smile);
+		}
+		const e = latest(this.expresses, t);
+		if (e) {
+			const dt = t - e.t;
+			if (dt < e.fade * 2 + e.hold) {
+				const w = dt < e.fade ? easeOut(dt / e.fade) : dt < e.fade + e.hold ? 1 : 1 - easeOut((dt - e.fade - e.hold) / e.fade);
+				face = mix(face, e.face, w);
+			}
+		}
+		const r = latest(this.reacts, t);
+		const track = r ? REACTIONS[r.reaction] : void 0;
+		if (r && track?.expression && t - r.t < track.ms) face = mix(face, track.expression, Math.min(1, (t - r.t) / 120));
+		return face;
+	}
+	gazeAt(t) {
+		let from = {
+			x: 0,
+			y: 0
+		};
+		let current;
+		for (const e of this.looks) {
+			if (e.t > t) break;
+			if (current) from = this.approach(from, current, e.t);
+			current = e;
+		}
+		if (!current || current.target === null) {
+			const wander = this.idle && !this.reducedMotion ? wanderAt(this.seed, t) : {
+				x: 0,
+				y: 0
+			};
+			return current ? this.approach(from, {
+				...current,
+				target: wander
+			}, t) : wander;
+		}
+		return this.approach(from, current, t);
+	}
+	approach(from, e, t) {
+		const target = e.target ?? {
+			x: 0,
+			y: 0
+		};
+		const k = this.reducedMotion ? 1 : 1 - Math.exp(-e.speed * Math.max(0, t - e.t) / 1e3);
+		return {
+			x: from.x + (target.x - from.x) * k,
+			y: from.y + (target.y - from.y) * k
+		};
+	}
+	talkAt(t) {
+		const e = latest(this.talks, t);
+		if (!e || e.level === 0 || t > e.until) return 0;
+		if (this.reducedMotion) return .5 * e.level;
+		const flap = Math.abs(Math.sin((t - e.t) / 1e3 * Math.PI * 5.5)) * (.65 + .35 * Math.sin((t - e.t) / 1e3 * 3.1));
+		return e.level * flap;
+	}
+	reactionAt(t) {
+		const r = latest(this.reacts, t);
+		if (!r) return { frame: STILL };
+		const track = REACTIONS[r.reaction];
+		const u = (t - r.t) / track.ms;
+		if (u >= 1) return { frame: STILL };
+		return {
+			frame: this.reducedMotion ? STILL : track.at(u),
+			...track.body ? { body: track.body } : {}
+		};
+	}
+	/** The pose at time `t` (same clock as the calls). Pure: the same schedule and `t` give the same pose. */
+	pose(t = this.clock()) {
+		const face = this.faceAt(t);
+		const reaction = this.reactionAt(t);
+		const bodyEvent = latest(this.bodies, t);
+		const body = reaction.body ?? bodyEvent?.body ?? "idle";
+		const cycle = bodyEvent ? (t - bodyEvent.t) / bodyEvent.cycleMs % 1 : 0;
+		const breath = this.idle && !this.reducedMotion ? breathAt(this.seed, t) : {
+			bob: 0,
+			sway: 0
+		};
+		const status = latest(this.statuses, t)?.status ?? null;
+		return {
+			face,
+			look: this.gazeAt(t),
+			blink: blinkAt(this.seed, t),
+			talk: this.talkAt(t),
+			body,
+			phase: reaction.body === "cheer" ? t / 467 % 1 : cycle,
+			status,
+			bob: {
+				x: reaction.frame.bob.x,
+				y: reaction.frame.bob.y + breath.bob
+			},
+			tilt: reaction.frame.tilt + breath.sway,
+			squash: reaction.frame.squash
+		};
+	}
+};
+/** A new animator for a look: `animator(look, { seed: userId })`. */
+function animator(look, opts = {}) {
+	return new Animator(look, opts);
+}
+//#endregion
+//#region src/avatar/layout.ts
+/** Anchors, facings from movement, and the look-at helper (§3.2, §3.3, §3.6). */
+/**
+* The rig anchors for a look in a facing and pose: place name plates,
+* bubbles, props and world objects with these, never with magic numbers.
+* Rig units (a 100-unit head), feet at (0, 0), y down.
+*/
+function layout(like, opts = {}) {
+	return composeAvatar(toLook(like), {
+		frame: "full",
+		...opts
+	}).anchors;
+}
+const EIGHT = [
+	"E",
+	"SE",
+	"S",
+	"SW",
+	"W",
+	"NW",
+	"N",
+	"NE"
+];
+const FOUR = [
+	"E",
+	"S",
+	"W",
+	"N"
+];
+/** The facing for a movement vector (screen space, y down), in 8 or 4 directions. */
+function facingFrom(dx, dy, dirs = 8) {
+	if (dx === 0 && dy === 0) return "S";
+	const angle = Math.atan2(dy, dx);
+	const list = dirs === 8 ? EIGHT : FOUR;
+	const step = Math.PI * 2 / list.length;
+	return list[(Math.round(angle / step) % list.length + list.length) % list.length] ?? "S";
+}
+/**
+* A look direction from one screen point toward another, for card tables
+* where each seat looks at the active player. `strength` scales it.
+*/
+function lookToward(from, to, strength = 1) {
+	const dx = to.x - from.x;
+	const dy = to.y - from.y;
+	const len = Math.hypot(dx, dy);
+	if (len < 1e-6) return {
+		x: 0,
+		y: 0
+	};
+	return {
+		x: dx / len * strength,
+		y: dy / len * strength * .7
+	};
+}
+//#endregion
+//#region src/avatar/overlays.ts
+/**
+* Overlays drawn above an avatar (§3.11, §14.3), as scene nodes in screen
+* pixels with the origin at the anchor they sit on (`nameplate`, `bubble`,
+* `shadow`). Every surface draws them the same way. Text is a username or a
+* catalog title, never player-typed bubble text, and is escaped on output.
+*/
+const INK = "#0d0f14";
+const PAPER = "#e8e6df";
+const MONO_ADVANCE = .6;
+const textWidth = (text, size) => Array.from(text).length * size * MONO_ADVANCE;
+/** A name tag: the username in a pill; friends get a green dot and a ★ (never colour alone), you get an accent outline. */
+function nameTag(o) {
+	const size = 12;
+	const lead = o.friend ? 22 : 0;
+	const w = textWidth(o.name, size) + 16 + lead;
+	const h = 19;
+	const nodes = [rect(-w / 2, -19, w, h, {
+		fill: INK,
+		fillOpacity: .86,
+		stroke: o.you ? "#ff5f3b" : "#2a3142",
+		sw: o.you ? 2 : 1.2
+	}, h / 2)];
+	if (o.friend) nodes.push(ellipse(-w / 2 + 10, -19 / 2, 3.6, 3.6, { fill: "#4ade80" }), {
+		k: "text",
+		x: -w / 2 + 19,
+		y: -5,
+		text: "★",
+		size: 11,
+		font: "mono",
+		anchor: "middle",
+		fill: "#ffd23f"
+	});
+	nodes.push({
+		k: "text",
+		x: lead / 2,
+		y: -5.5,
+		text: o.name,
+		size,
+		font: "mono",
+		bold: true,
+		anchor: "middle",
+		fill: o.muted ? "#6f7787" : PAPER
+	});
+	return {
+		nodes,
+		width: w,
+		height: h,
+		box: [
+			-w / 2,
+			-19,
+			w,
+			h
+		]
+	};
+}
+function icon(kind) {
+	switch (kind) {
+		case "cards": return g([rect(-6, -8, 12, 16, {
+			fill: "#ff5f3b",
+			stroke: INK,
+			sw: 1.6
+		}, 2.5), g([rect(-1, -11, 12, 16, {
+			fill: "#3d7bff",
+			stroke: INK,
+			sw: 1.6
+		}, 2.5)], { tf: [rot(18)] })], { tf: [rot(-10)] });
+		case "controller": return path("M-9 -2C-9 -7 9 -7 9 -2C11 6 6 8 3 4L-3 4C-6 8 -11 6 -9 -2Z", {
+			fill: "#2a3142",
+			stroke: INK,
+			sw: 1.6
+		});
+		case "puzzle": return path("M-7 -7H-1C-1 -11 4 -11 4 -7H7V-1C11 -1 11 4 7 4V7H-7Z", {
+			fill: "#4ade80",
+			stroke: INK,
+			sw: 1.6
+		});
+		case "race": return path("M-7 -8V8M-7 -8H7L4 -4L7 0H-7", {
+			fill: "#ffd23f",
+			stroke: INK,
+			sw: 1.6
+		});
+	}
+}
+/** "Playing Uno": the game's catalog title in a light bubble with a tail. */
+function activityBubble(o) {
+	const text = `${o.verb ?? "Playing"} ${o.game}`;
+	const w = textWidth(text, 12) + 40;
+	return {
+		nodes: [
+			rect(-w / 2, -33, w, 26, {
+				fill: PAPER,
+				stroke: INK,
+				sw: 2
+			}, 8),
+			path("M-6 -7.5L0 0L6 -7.5Z", {
+				fill: PAPER,
+				stroke: INK,
+				sw: 2
+			}),
+			rect(-7, -10, 14, 4, { fill: PAPER }),
+			g([icon(o.icon ?? "cards")], { tf: [tr(-w / 2 + 16, -20)] }),
+			{
+				k: "text",
+				x: 10,
+				y: -15.5,
+				text,
+				size: 12,
+				font: "mono",
+				bold: true,
+				anchor: "middle",
+				fill: INK
+			}
+		],
+		width: w,
+		height: 33,
+		box: [
+			-w / 2,
+			-33,
+			w,
+			33
+		]
+	};
+}
+/** An emote popping above the head (the hub's quick-chat emotes). */
+function emoteBubble(emote) {
+	const glyph = emote.startsWith("e:") ? emote.slice(2) : emote;
+	return {
+		nodes: [
+			ellipse(0, -24, 20, 17, {
+				fill: PAPER,
+				stroke: INK,
+				sw: 2
+			}),
+			path("M-5 -9L0 0L5 -9Z", {
+				fill: PAPER,
+				stroke: INK,
+				sw: 2
+			}),
+			ellipse(0, -10, 5, 2.4, { fill: PAPER }),
+			{
+				k: "text",
+				x: 0,
+				y: -17,
+				text: glyph,
+				size: 20,
+				font: "mono",
+				anchor: "middle",
+				fill: INK
+			}
+		],
+		width: 40,
+		height: 42,
+		box: [
+			-21,
+			-42,
+			42,
+			42
+		]
+	};
+}
+/** A reaction glyph in a small bubble. */
+function reactionBubble(glyph) {
+	const colour = glyph === "♥" ? "#ff5f8f" : glyph === "!" ? "#ff5f3b" : INK;
+	return {
+		nodes: [
+			rect(-15, -30, 30, 24, {
+				fill: PAPER,
+				stroke: INK,
+				sw: 2
+			}, 9),
+			path("M-4 -6.5L0 0L4 -6.5Z", {
+				fill: PAPER,
+				stroke: INK,
+				sw: 2
+			}),
+			rect(-5, -9, 10, 4, { fill: PAPER }),
+			{
+				k: "text",
+				x: 0,
+				y: -12,
+				text: glyph,
+				size: glyph === "zzz" ? 12 : 17,
+				font: "mono",
+				bold: true,
+				anchor: "middle",
+				fill: colour
+			}
+		],
+		width: 30,
+		height: 30,
+		box: [
+			-16,
+			-31,
+			32,
+			31
+		]
+	};
+}
+/** The hover or selection ring at the feet (`radius` in px). */
+function selectionRing(o = {}) {
+	const r = o.radius ?? 18;
+	return {
+		nodes: [ellipse(0, 0, r, r * .3, line(o.selected ? "#ff5f3b" : "#e8e6df", o.selected ? 2.4 : 1.6, "round", .85))],
+		width: r * 2,
+		height: r * .6,
+		box: [
+			-r - 2,
+			-r * .3 - 2,
+			r * 2 + 4,
+			r * .6 + 4
+		]
+	};
+}
+/** Every overlay builder, as the `overlays` namespace. */
+const overlays = {
+	nameTag,
+	activityBubble,
+	emoteBubble,
+	reactionBubble,
+	selectionRing
+};
+//#endregion
+export { Animator as a, drawToCanvas as c, lookToward as i, renderBitmap as l, facingFrom as n, animator as o, layout as r, REACTIONS as s, overlays as t, renderDataUrl as u };
+
+//# sourceMappingURL=overlays.js.map