@fabi-play/sdk 0.0.0-stage → 0.1.0

package/dist/fabi-play.umd.js

@@ -0,0 +1,2612 @@
+/*! @fabi-play/sdk 0.1.0 | Fabi Play Kit License | https://docs.fabiplay.app */
+(function (root, factory) {
+  var script = typeof document !== 'undefined' ? document.currentScript : null;
+  if (typeof define === 'function' && define.amd) define([], function () { return factory(script); });
+  else if (typeof module === 'object' && module && module.exports) module.exports = factory(script);
+  else root.FabiPlay = factory(script);
+})(typeof globalThis !== 'undefined' ? globalThis : typeof self !== 'undefined' ? self : this, function (script) {
+  'use strict';
+  var module = { exports: {} };
+  var exports = module.exports;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/umd.ts
+var umd_exports = {};
+__export(umd_exports, {
+  install: () => install
+});
+module.exports = __toCommonJS(umd_exports);
+
+// src/adapters.ts
+function muteDuringBreaks(play, win = window) {
+  const contexts = /* @__PURE__ */ new Set();
+  const Original = win.AudioContext;
+  if (Original) {
+    win.AudioContext = class extends Original {
+      constructor(...args) {
+        super(...args);
+        contexts.add(this);
+      }
+    };
+  }
+  let paused = [];
+  let suspended = [];
+  void Promise.resolve(play).then((p) => {
+    p.on("break-start", () => {
+      paused = [...win.document.querySelectorAll("audio, video")].filter((m) => !m.paused);
+      paused.forEach((m) => m.pause());
+      suspended = [...contexts].filter((c) => c.state === "running");
+      suspended.forEach((c) => void c.suspend());
+    });
+    p.on("break-done", () => {
+      paused.forEach((m) => void m.play().catch(() => void 0));
+      suspended.forEach((c) => void c.resume());
+      paused = [];
+      suspended = [];
+    });
+  });
+}
+var DEFAULT_KEYS = { jump: "Space", squat: "ArrowDown", left: "ArrowLeft", right: "ArrowRight", clap: "Enter" };
+function parseKeys(value) {
+  if (value.trim() === "default") return void 0;
+  const map = {};
+  for (const pair of value.split(",")) {
+    const [action, code] = pair.split(":").map((s) => s.trim());
+    if (action && code) map[action] = code;
+  }
+  return map;
+}
+var NAMED = {
+  Space: [" ", 32],
+  Enter: ["Enter", 13],
+  Escape: ["Escape", 27],
+  ShiftLeft: ["Shift", 16],
+  ArrowLeft: ["ArrowLeft", 37],
+  ArrowUp: ["ArrowUp", 38],
+  ArrowRight: ["ArrowRight", 39],
+  ArrowDown: ["ArrowDown", 40]
+};
+function keyInfo(code) {
+  const named = NAMED[code];
+  if (named) return { key: named[0], code, keyCode: named[1] };
+  const letter = /^Key([A-Z])$/.exec(code);
+  if (letter) return { key: letter[1].toLowerCase(), code, keyCode: letter[1].charCodeAt(0) };
+  const digit = /^Digit([0-9])$/.exec(code);
+  if (digit) return { key: digit[1], code, keyCode: 48 + Number(digit[1]) };
+  throw new Error(`Fabi Play: unknown key "${code}" (use Space, Enter, Arrow\u2026, KeyA\u2026, Digit0\u2026)`);
+}
+var domKeys = (doc = document) => ({
+  dispatch(type, k) {
+    const e = new KeyboardEvent(type, { key: k.key, code: k.code, bubbles: true, cancelable: true });
+    for (const name of ["keyCode", "which"]) Object.defineProperty(e, name, { get: () => k.keyCode });
+    (doc.activeElement ?? doc.body ?? doc).dispatchEvent(e);
+  }
+});
+var TAP_MS = 80;
+var MAX_HOLD_MS = 800;
+function keyboard(play, map = DEFAULT_KEYS, options = {}) {
+  const player = options.player ?? 1;
+  const target = options.target ?? domKeys();
+  const later = options.setTimeout ?? ((fn, ms) => setTimeout(fn, ms));
+  const held = /* @__PURE__ */ new Set();
+  let lane = 0;
+  const down = (a) => {
+    const code = map[a];
+    if (!code || held.has(a)) return;
+    held.add(a);
+    target.dispatch("keydown", keyInfo(code));
+  };
+  const up = (a) => {
+    const code = map[a];
+    if (!code || !held.has(a)) return;
+    held.delete(a);
+    target.dispatch("keyup", keyInfo(code));
+  };
+  const tap = (a) => {
+    down(a);
+    later(() => up(a), TAP_MS);
+  };
+  const onGesture = (g) => {
+    if (g.player !== player) return;
+    const lanes = { "lane-left": -1, "lane-center": 0, "lane-right": 1 };
+    switch (g.gesture) {
+      case "jump":
+        down("jump");
+        later(() => up("jump"), MAX_HOLD_MS);
+        break;
+      case "land":
+        up("jump");
+        break;
+      case "squat":
+        down("squat");
+        break;
+      case "stand":
+        up("squat");
+        break;
+      case "clap":
+        tap("clap");
+        break;
+      default: {
+        const next = lanes[g.gesture];
+        if (next === void 0) break;
+        const dir = next > lane ? "right" : "left";
+        for (let i = 0; i < Math.abs(next - lane); i++) later(() => tap(dir), i * (TAP_MS * 2));
+        lane = next;
+      }
+    }
+  };
+  const onFrame = (f2) => {
+    const p = f2.players.find((x) => x.id === player);
+    if (!p) return;
+    if (p.shape === "arms-up") down("arms-up");
+    else up("arms-up");
+  };
+  const offs = [play.on("gesture", onGesture), play.on("frame", onFrame), play.on("break-start", () => [...held].forEach(up))];
+  return () => {
+    offs.forEach((off) => off());
+    [...held].forEach(up);
+  };
+}
+function domPointer(doc = document) {
+  const ring = doc.createElement("div");
+  ring.setAttribute("aria-hidden", "true");
+  ring.style.cssText = "position:fixed;left:0;top:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:6px solid #FBE7B8;background:rgba(251,231,184,.25);pointer-events:none;z-index:2147483647;box-sizing:border-box;transition:transform 60ms linear";
+  doc.body.appendChild(ring);
+  const fire = (x, y, ...types) => {
+    const el = doc.elementFromPoint(x, y) ?? doc.body;
+    for (const type of types) {
+      const init = { bubbles: true, cancelable: true, clientX: x, clientY: y, pointerId: 1, pointerType: "touch", isPrimary: true };
+      el.dispatchEvent(type.startsWith("pointer") ? new PointerEvent(type, init) : new MouseEvent(type, init));
+    }
+  };
+  return {
+    size: () => ({ width: doc.documentElement.clientWidth, height: doc.documentElement.clientHeight }),
+    move: (x, y) => fire(x, y, "pointermove", "mousemove"),
+    click: (x, y) => fire(x, y, "pointerdown", "mousedown", "pointerup", "mouseup", "click"),
+    cursor: (x, y, progress) => {
+      ring.style.transform = `translate(${x}px, ${y}px) scale(${1 - progress * 0.35})`;
+      ring.style.borderColor = progress > 0 ? "#EE6A43" : "#FBE7B8";
+    }
+  };
+}
+function pointer(play, options = {}) {
+  const player = options.player ?? 1;
+  const hand = options.hand ?? "any";
+  const dwell = options.dwellMs ?? 800;
+  const radius = options.radius ?? 0.04;
+  const target = options.target ?? domPointer();
+  let anchor = null;
+  let clicked = false;
+  return play.on("frame", (f2) => {
+    const p = f2.players.find((x2) => x2.id === player);
+    if (!p) return;
+    const pick = (a, b) => a && b ? a.y < b.y ? a : b : a ?? b;
+    const h = hand === "left" ? p.leftHand : hand === "right" ? p.rightHand : pick(p.leftHand, p.rightHand);
+    if (!h) return;
+    const { width, height } = target.size();
+    const x = h.x * width;
+    const y = h.y * height;
+    target.move(x, y);
+    const far = anchor ? Math.hypot(x - anchor.x, y - anchor.y) > radius * Math.hypot(width, height) : true;
+    if (far) {
+      anchor = { x, y, t: f2.t };
+      clicked = false;
+    }
+    const progress = clicked ? 0 : Math.min((f2.t - anchor.t) / dwell, 1);
+    if (progress >= 1) {
+      clicked = true;
+      target.click(anchor.x, anchor.y);
+    }
+    target.cursor(x, y, clicked ? 0 : progress);
+  });
+}
+
+// ../protocol/src/index.ts
+var PROTOCOL_VERSION = 1;
+var LANDMARKS = 33;
+var P = {
+  nose: 0,
+  leftShoulder: 11,
+  rightShoulder: 12,
+  leftElbow: 13,
+  rightElbow: 14,
+  leftWrist: 15,
+  rightWrist: 16,
+  leftHip: 23,
+  rightHip: 24,
+  leftKnee: 25,
+  rightKnee: 26,
+  leftAnkle: 27,
+  rightAnkle: 28
+};
+var AGE_RANGES = ["3-5", "6-8", "9-12"];
+var isAgeRange = (v) => AGE_RANGES.includes(v);
+var MAX_PLAYERS = 4;
+var DEFAULT_AVATARS_BY_AGE = {
+  "3-5": ["bunny", "bear", "panda", "penguin"],
+  "6-8": ["fox", "lion", "dragon", "unicorn"],
+  "9-12": ["robot", "astronaut", "ninja", "skater"]
+};
+var DEFAULT_AVATARS = DEFAULT_AVATARS_BY_AGE["6-8"];
+var defaultAvatarFor = (slot, ageRange) => {
+  const list = isAgeRange(ageRange) ? DEFAULT_AVATARS_BY_AGE[ageRange] : DEFAULT_AVATARS;
+  return list[Number.isInteger(slot) && slot >= 0 ? slot % list.length : 0];
+};
+var NS = "fabi-play";
+var wire = (m) => ({ ns: NS, ...m });
+function parseView(v) {
+  if (!isObject(v)) return void 0;
+  const { x, y, w, h } = v;
+  return isNumber(x) && isNumber(y) && isNumber(w) && isNumber(h) && w > 0 && h > 0 ? { x, y, w, h } : void 0;
+}
+var toScreen = (view, p) => view ? { x: view.x + p.x * view.w, y: view.y + p.y * view.h } : { x: p.x, y: p.y };
+var DEVICE_TIERS = ["high", "medium", "low"];
+function parseDeviceHint(v) {
+  if (!isObject(v)) return void 0;
+  const out = {};
+  if (DEVICE_TIERS.includes(v.tier)) out.tier = v.tier;
+  if (isNumber(v.hz) && v.hz >= 20 && v.hz <= 240) out.hz = Math.round(v.hz);
+  return out.tier || out.hz ? out : void 0;
+}
+function parseGameStats(v) {
+  const out = {};
+  if (!isObject(v)) return out;
+  if (isNumber(v.fps) && v.fps >= 0 && v.fps < 1e3) out.fps = v.fps;
+  if (typeof v.renderer === "string" && /^[a-z0-9-]{1,16}$/.test(v.renderer)) out.renderer = v.renderer;
+  if (DEVICE_TIERS.includes(v.tier)) out.tier = v.tier;
+  return out;
+}
+var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+var isNumber = (v) => typeof v === "number" && Number.isFinite(v);
+var POSE_HEADER = 12;
+var POSE_BODY_BYTES = LANDMARKS * 4;
+var poseBytes = (bodies) => POSE_HEADER + bodies * POSE_BODY_BYTES;
+var POSE_MAX_BYTES = poseBytes(MAX_PLAYERS);
+
+// ../avatars/src/defs.ts
+var SOFT = "#4a382c";
+var INK = "#2b2118";
+var COOL = "#1c1f2b";
+var CREAM = "#fbefe3";
+var BLUSH = "#f4897a";
+var NOSE = "#3a2a22";
+var AVATARS = [
+  {
+    id: "fox",
+    name: { en: "Fox", it: "Volpe" },
+    band: "6-8",
+    palette: { body: "#ee6a43", limbs: "#ee6a43", belly: CREAM, accent: "#ffd9c2", outline: INK, hands: "#5a3426", feet: "#5a3426" },
+    head: "wide",
+    ears: "pointy",
+    face: { eyes: "dot", mouth: "cat", nose: NOSE, muzzle: "cheeks" },
+    tail: "fluffy",
+    headExtras: [],
+    bodyExtras: []
+  },
+  {
+    // The fox of the app icon (brand/): the same coral fur and dark paws as 'fox', told apart by the icon's face
+    // (big glossy eyes, the cream lower face, blush, a big open smile, dark brown inside the ears), a big brush of a
+    // tail and a yellow star on the chest.
+    id: "mascot",
+    name: { en: "Fabi", it: "Fabi" },
+    band: "all",
+    special: true,
+    palette: { body: "#ee6a43", limbs: "#ee6a43", belly: CREAM, accent: "#5a3426", outline: INK, hands: "#5a3426", feet: "#5a3426" },
+    head: "wide",
+    ears: "pointy",
+    face: { eyes: "bead", mouth: "open", nose: NOSE, muzzle: "band", cheeks: BLUSH },
+    tail: "brush",
+    headExtras: [],
+    bodyExtras: ["star"],
+    extraColors: ["#ffd84a"]
+  },
+  {
+    id: "bunny",
+    name: { en: "Bunny", it: "Coniglietto" },
+    band: "3-5",
+    palette: { body: "#f9d0de", limbs: "#f9d0de", belly: "#fff6f8", accent: "#f4a0b9", outline: SOFT },
+    head: "round",
+    ears: "long",
+    face: { eyes: "dot", mouth: "cat", nose: "#e0607e", muzzle: "none", cheeks: BLUSH },
+    tail: "pom",
+    headExtras: [],
+    bodyExtras: []
+  },
+  {
+    id: "bear",
+    name: { en: "Bear", it: "Orsetto" },
+    band: "3-5",
+    palette: { body: "#cf9f78", limbs: "#cf9f78", belly: "#f7e0bf", accent: "#f7e0bf", outline: SOFT },
+    head: "round",
+    ears: "round",
+    face: { eyes: "dot", mouth: "smile", nose: NOSE, muzzle: "oval", cheeks: BLUSH },
+    tail: "none",
+    headExtras: [],
+    bodyExtras: []
+  },
+  {
+    id: "cat",
+    name: { en: "Cat", it: "Gattino" },
+    band: "3-5",
+    palette: { body: "#c8b6ee", limbs: "#c8b6ee", belly: "#f4eeff", accent: "#f7b3c8", outline: SOFT, hands: "#f4eeff", feet: "#f4eeff" },
+    head: "wide",
+    ears: "pointy",
+    face: { eyes: "big", eyeColor: "#3f9a5a", mouth: "cat", nose: "#f07a9a", muzzle: "none", cheeks: BLUSH },
+    tail: "long",
+    headExtras: ["whiskers"],
+    bodyExtras: []
+  },
+  {
+    id: "panda",
+    name: { en: "Panda", it: "Panda" },
+    band: "3-5",
+    palette: { body: "#ffffff", limbs: "#6e6674", belly: "#ffffff", accent: "#6e6674", outline: SOFT, ears: "#6e6674" },
+    head: "wide",
+    ears: "round",
+    face: { eyes: "mask", mouth: "smile", nose: "#2f2a2c", muzzle: "none", cheeks: "#f6a3a3" },
+    tail: "none",
+    headExtras: [],
+    bodyExtras: []
+  },
+  {
+    id: "penguin",
+    name: { en: "Penguin", it: "Pinguino" },
+    band: "3-5",
+    palette: { body: "#6c8fca", limbs: "#6c8fca", belly: "#ffffff", accent: "#f9b95c", outline: SOFT, feet: "#f9b95c" },
+    head: "tall",
+    ears: "none",
+    face: { eyes: "dot", mouth: "beak", muzzle: "heart", cheeks: "#f6a3a3" },
+    tail: "none",
+    headExtras: [],
+    bodyExtras: ["flippers", "scarf"],
+    extraColors: ["#f6907a"]
+  },
+  {
+    id: "frog",
+    name: { en: "Frog", it: "Ranocchio" },
+    band: "3-5",
+    palette: { body: "#8fd487", limbs: "#8fd487", belly: "#e6f7cc", accent: "#62ad62", outline: SOFT },
+    head: "wide",
+    ears: "none",
+    face: { eyes: "big", eyesOnTop: true, mouth: "open", muzzle: "none", cheeks: "#f59b8f" },
+    tail: "none",
+    headExtras: [],
+    bodyExtras: ["flippers", "spots"],
+    extraColors: ["#62ad62", "#b0e6a4"]
+  },
+  {
+    id: "lion",
+    name: { en: "Lion", it: "Leoncino" },
+    band: "6-8",
+    palette: { body: "#f6c454", limbs: "#f6c454", belly: "#fde7b0", accent: "#fde7b0", outline: INK },
+    head: "round",
+    ears: "round",
+    face: { eyes: "dot", mouth: "cat", nose: "#8a4b2a", muzzle: "oval", cheeks: BLUSH },
+    tail: "tuft",
+    headExtras: ["mane"],
+    bodyExtras: [],
+    extraColors: ["#c8692e"]
+  },
+  {
+    id: "unicorn",
+    name: { en: "Unicorn", it: "Unicorno" },
+    band: "6-8",
+    palette: { body: "#fbf5ff", limbs: "#fbf5ff", belly: "#efe0ff", accent: "#fbd46a", outline: INK, hands: "#c9a6f2", feet: "#c9a6f2" },
+    head: "tall",
+    ears: "unicorn",
+    face: { eyes: "dot", mouth: "smile", muzzle: "none", cheeks: "#f7a6c8" },
+    tail: "none",
+    headExtras: ["rainbow-mane"],
+    bodyExtras: [],
+    extraColors: ["#f58cc0", "#8fd3f4", "#a98ff2"]
+  },
+  {
+    id: "dragon",
+    name: { en: "Little Dragon", it: "Draghetto" },
+    band: "6-8",
+    palette: { body: "#8a63d2", limbs: "#8a63d2", belly: "#fbd46a", accent: "#5fd0b5", outline: INK },
+    head: "wide",
+    ears: "horns",
+    face: { eyes: "big", eyeColor: "#3a2a6a", mouth: "teeth", muzzle: "none", cheeks: "#f59bc0" },
+    tail: "arrow",
+    headExtras: [],
+    bodyExtras: ["wings"]
+  },
+  {
+    id: "robot",
+    name: { en: "Robot", it: "Robot" },
+    band: "9-12",
+    palette: { body: "#b9c7d2", limbs: "#8b9aa6", belly: "#b9c7d2", accent: "#ee6a43", outline: COOL, hands: "#ee6a43", feet: "#6b7a86" },
+    head: "square",
+    ears: "antenna",
+    face: { eyes: "screen", eyeColor: "#7ff0ff", mouth: "grill", muzzle: "none" },
+    tail: "none",
+    headExtras: ["bolts"],
+    bodyExtras: ["panel", "joints", "boots"],
+    extraColors: ["#ff7a6b", "#fbd46a", "#7ff0ff"]
+  },
+  {
+    id: "astronaut",
+    name: { en: "Astronaut", it: "Astronauta" },
+    band: "9-12",
+    palette: { body: "#f4f1ec", limbs: "#f4f1ec", belly: "#f4f1ec", accent: "#ee6a43", outline: COOL, hands: "#9fb0bd", feet: "#9fb0bd" },
+    head: "round",
+    ears: "none",
+    face: { eyes: "visor", mouth: "smile", muzzle: "none" },
+    tail: "none",
+    headExtras: ["helmet"],
+    bodyExtras: ["backpack", "badge", "boots"],
+    extraColors: ["#c9d3db"]
+  },
+  {
+    id: "dinosaur",
+    name: { en: "Dinosaur", it: "Dinosauro" },
+    band: "6-8",
+    palette: { body: "#3fb3a6", limbs: "#3fb3a6", belly: "#c9f0d6", accent: "#f79a3e", outline: INK },
+    head: "wide",
+    ears: "none",
+    face: { eyes: "dot", mouth: "teeth", muzzle: "none", cheeks: "#f59b8f" },
+    tail: "spiky",
+    headExtras: ["spikes", "spots"],
+    bodyExtras: [],
+    extraColors: ["#2b8f84", "#7fd3c6"]
+  },
+  {
+    id: "monkey",
+    name: { en: "Monkey", it: "Scimmietta" },
+    band: "6-8",
+    palette: { body: "#7b5234", limbs: "#7b5234", belly: "#f2c9a0", accent: "#f2c9a0", outline: INK, hands: "#f2c9a0", feet: "#f2c9a0" },
+    head: "round",
+    ears: "side",
+    face: { eyes: "dot", mouth: "open", nose: "#5a3a26", muzzle: "monkey", cheeks: BLUSH },
+    tail: "curl",
+    headExtras: ["tuft"],
+    bodyExtras: []
+  },
+  {
+    id: "koala",
+    name: { en: "Koala", it: "Koala" },
+    band: "3-5",
+    palette: { body: "#b7bcc6", limbs: "#b7bcc6", belly: "#eef0f3", accent: "#f4dbe2", outline: SOFT },
+    head: "wide",
+    ears: "big-round",
+    face: { eyes: "dot", mouth: "smile", nose: "#3b3438", muzzle: "none", cheeks: "#f4a3b0" },
+    tail: "none",
+    headExtras: [],
+    bodyExtras: []
+  },
+  {
+    id: "tiger",
+    name: { en: "Tiger", it: "Tigrotto" },
+    band: "6-8",
+    palette: { body: "#f9a33a", limbs: "#f9a33a", belly: "#fff1dc", accent: "#fff1dc", outline: INK },
+    head: "wide",
+    ears: "round",
+    face: { eyes: "dot", mouth: "cat", nose: "#e2607a", muzzle: "oval", cheeks: BLUSH },
+    tail: "striped",
+    headExtras: ["stripes", "whiskers"],
+    bodyExtras: [],
+    extraColors: ["#3a2a22"]
+  },
+  {
+    id: "owl",
+    name: { en: "Owl", it: "Gufetto" },
+    band: "3-5",
+    palette: { body: "#8ec0e6", limbs: "#8ec0e6", belly: "#e3f2fc", accent: "#639cc9", outline: SOFT, feet: "#f9b95c", hands: "#639cc9" },
+    head: "tall",
+    ears: "tufts",
+    face: { eyes: "big", eyeColor: SOFT, eyeRing: "#fde08a", mouth: "beak", muzzle: "none", cheeks: "#f6a8b4" },
+    tail: "none",
+    headExtras: [],
+    bodyExtras: ["feathers"]
+  },
+  {
+    id: "alien",
+    name: { en: "Alien", it: "Alieno" },
+    band: "9-12",
+    palette: { body: "#9ee05a", limbs: "#9ee05a", belly: "#d8f5a8", accent: "#b07cf2", outline: COOL },
+    head: "bulb",
+    ears: "antennae",
+    face: { eyes: "almond", eyeColor: "#1e1838", mouth: "smirk", muzzle: "none" },
+    tail: "none",
+    headExtras: [],
+    bodyExtras: ["spots"],
+    extraColors: ["#7cc23e", "#7cc23e"]
+  },
+  {
+    id: "ghost",
+    name: { en: "Friendly Ghost", it: "Fantasmino" },
+    band: "6-8",
+    palette: { body: "#e6f4ff", limbs: "#e6f4ff", belly: "#e6f4ff", accent: "#bcd9f2", outline: INK },
+    head: "round",
+    ears: "none",
+    face: { eyes: "dot", mouth: "open", muzzle: "none", cheeks: "#f7a6c8" },
+    tail: "none",
+    headExtras: ["curl"],
+    bodyExtras: ["sheet"]
+  },
+  {
+    id: "octopus",
+    name: { en: "Octopus", it: "Polpetto" },
+    band: "6-8",
+    palette: { body: "#e0578a", limbs: "#e0578a", belly: "#f7b3cc", accent: "#f7b3cc", outline: INK, hands: "#f7b3cc", feet: "#f7b3cc" },
+    head: "tall",
+    ears: "none",
+    face: { eyes: "big", eyeColor: "#3a2140", mouth: "smile", muzzle: "none", cheeks: "#ffd0a0" },
+    tail: "none",
+    headExtras: ["spots"],
+    bodyExtras: ["tentacles"],
+    extraColors: ["#f7b3cc", "#f7b3cc"]
+  },
+  // ── New in the age bands: 3–5 ──
+  {
+    id: "chick",
+    name: { en: "Chick", it: "Pulcino" },
+    band: "3-5",
+    palette: { body: "#ffd45e", limbs: "#ffd45e", belly: "#fff2c2", accent: "#ffa04a", outline: SOFT, hands: "#ffc23d", feet: "#ffa04a" },
+    head: "round",
+    ears: "none",
+    face: { eyes: "dot", mouth: "beak", muzzle: "none", cheeks: BLUSH },
+    tail: "none",
+    headExtras: ["eggshell"],
+    bodyExtras: [],
+    extraColors: ["#fffaf0"]
+  },
+  {
+    id: "puppy",
+    name: { en: "Puppy", it: "Cucciolo" },
+    band: "3-5",
+    palette: { body: "#f4e4cf", limbs: "#f4e4cf", belly: "#fffaf2", accent: "#f29aa4", outline: SOFT, ears: "#b58262", hands: "#e6caa6", feet: "#e6caa6" },
+    head: "wide",
+    ears: "floppy",
+    face: { eyes: "dot", mouth: "open", nose: NOSE, muzzle: "oval", cheeks: BLUSH },
+    tail: "curl",
+    headExtras: ["eye-spot"],
+    bodyExtras: []
+  },
+  {
+    id: "lamb",
+    name: { en: "Lamb", it: "Agnellino" },
+    band: "3-5",
+    palette: { body: "#fdf8ee", limbs: "#e3d1c2", belly: "#fffdf8", accent: "#f6bcc2", outline: SOFT, skin: "#f7dccb", hands: "#a58c7e", feet: "#a58c7e" },
+    head: "round",
+    ears: "droopy",
+    face: { eyes: "dot", mouth: "smile", nose: "#e591a0", muzzle: "none", cheeks: BLUSH },
+    tail: "pom",
+    headExtras: ["wool"],
+    bodyExtras: ["wool"]
+  },
+  {
+    id: "duckling",
+    name: { en: "Duckling", it: "Anatroccolo" },
+    band: "3-5",
+    palette: { body: "#fff1a6", limbs: "#fff1a6", belly: "#fffbe0", accent: "#ff9f43", outline: SOFT, feet: "#ff9f43" },
+    head: "tall",
+    ears: "none",
+    face: { eyes: "dot", mouth: "bill", muzzle: "none", cheeks: BLUSH },
+    tail: "none",
+    headExtras: ["curl"],
+    bodyExtras: ["flippers", "scarf"],
+    extraColors: ["#86cfe0"]
+  },
+  // ── New in the age bands: 6–8 ──
+  {
+    id: "shark",
+    name: { en: "Shark", it: "Squalo" },
+    band: "6-8",
+    palette: { body: "#6c95c4", limbs: "#6c95c4", belly: "#eef5fb", accent: "#4c76a8", outline: INK, hands: "#eef5fb", feet: "#4c76a8" },
+    head: "wide",
+    ears: "fin",
+    face: { eyes: "dot", mouth: "jaws", muzzle: "none", cheeks: "#f59bb0" },
+    tail: "fish",
+    headExtras: ["gills"],
+    bodyExtras: []
+  },
+  {
+    id: "wolf",
+    name: { en: "Wolf", it: "Lupo" },
+    band: "6-8",
+    palette: { body: "#8f9bb3", limbs: "#8f9bb3", belly: "#eef1f6", accent: "#f3b8c4", outline: INK, hands: "#5a647a", feet: "#5a647a" },
+    head: "round",
+    ears: "pointy",
+    face: { eyes: "dot", mouth: "open", nose: NOSE, muzzle: "oval", cheeks: "#f4a3b0" },
+    tail: "fluffy",
+    headExtras: ["ruff", "forehead"],
+    bodyExtras: [],
+    extraColors: ["#636d84"]
+  },
+  {
+    id: "parrot",
+    name: { en: "Parrot", it: "Pappagallo" },
+    band: "6-8",
+    palette: { body: "#e8503f", limbs: "#e8503f", belly: "#ffd25a", accent: "#f6e6c4", outline: INK, hands: "#3a9bdc", feet: "#8a7a70" },
+    head: "round",
+    ears: "none",
+    face: { eyes: "big", eyeColor: INK, eyeRing: "#ffffff", mouth: "hook", muzzle: "none", cheeks: "#ffb0a0" },
+    tail: "plume",
+    headExtras: ["crest"],
+    bodyExtras: ["feathers"],
+    extraColors: ["#ffd25a", "#3fae5a", "#3a9bdc"]
+  },
+  // ── New in the age bands: 9–12 (people: generic faces, gear that reads at small size) ──
+  {
+    id: "ninja",
+    name: { en: "Ninja", it: "Ninja" },
+    band: "9-12",
+    palette: { body: "#2f3a56", limbs: "#2f3a56", belly: "#2f3a56", accent: "#36c9bb", outline: COOL, skin: "#b07a52", hands: "#222a40", feet: "#222a40" },
+    head: "round",
+    ears: "none",
+    face: { eyes: "calm", mouth: "none", muzzle: "none", brows: "#2a1d16" },
+    tail: "none",
+    headExtras: ["ninja-hood"],
+    bodyExtras: ["belt"],
+    extraColors: ["#36c9bb", "#36c9bb", "#36c9bb"]
+  },
+  {
+    id: "skater",
+    name: { en: "Skater", it: "Skater" },
+    band: "9-12",
+    palette: { body: "#3a8fc0", limbs: "#2c3e57", belly: "#2f7aa6", accent: "#ffcf3a", outline: COOL, skin: "#f2c9a5", hair: "#7a4a2a", hands: "#f2c9a5", feet: "#eef1f5" },
+    head: "round",
+    ears: "human",
+    face: { eyes: "calm", mouth: "smirk", muzzle: "none", brows: "#5a3520" },
+    tail: "none",
+    headExtras: ["hair", "cap"],
+    bodyExtras: ["pocket", "joints"],
+    extraColors: ["#ff5d73"]
+  },
+  {
+    id: "explorer",
+    name: { en: "Explorer", it: "Giramondo" },
+    band: "9-12",
+    palette: { body: "#5f8f5b", limbs: "#5f8f5b", belly: "#5f8f5b", accent: "#d9bb7e", outline: COOL, skin: "#7a4a30", hair: "#1d1410", hands: "#7a4a30", feet: "#6b4a2a" },
+    head: "round",
+    ears: "human",
+    face: { eyes: "calm", mouth: "smile", muzzle: "none", brows: "#1d1410" },
+    tail: "none",
+    headExtras: ["curls", "safari-hat"],
+    bodyExtras: ["backpack", "straps", "boots"],
+    extraColors: ["#e07b39", "#6b4a2a"]
+  },
+  {
+    id: "wizard",
+    name: { en: "Wizard", it: "Mago" },
+    band: "9-12",
+    palette: { body: "#5b3fa0", limbs: "#5b3fa0", belly: "#5b3fa0", accent: "#3d5fc8", outline: COOL, skin: "#c98d62", hair: "#a8452a", hands: "#c98d62", feet: "#33255e" },
+    head: "round",
+    ears: "human",
+    face: { eyes: "calm", mouth: "smile", muzzle: "none", brows: "#7a301c" },
+    tail: "none",
+    headExtras: ["locks", "wizard-hat"],
+    bodyExtras: ["robe", "belt"],
+    extraColors: ["#ffd84a", "#ffd84a", "#ffd84a"]
+  },
+  {
+    id: "knight",
+    name: { en: "Knight", it: "Cavaliere" },
+    band: "9-12",
+    palette: { body: "#bcc7d3", limbs: "#8e9aa8", belly: "#dce3ea", accent: "#d8443a", outline: COOL, hands: "#6c7786", feet: "#6c7786" },
+    head: "bucket",
+    ears: "none",
+    face: { eyes: "slit", eyeColor: "#bfefff", mouth: "none", muzzle: "none" },
+    tail: "none",
+    headExtras: ["plume"],
+    bodyExtras: ["pauldrons", "emblem", "boots"],
+    extraColors: ["#d8443a"]
+  },
+  {
+    id: "racer",
+    name: { en: "Racer", it: "Pilota" },
+    band: "9-12",
+    palette: { body: "#ff6a2b", limbs: "#ff6a2b", belly: "#ffffff", accent: "#ffffff", outline: COOL, hands: "#232838", feet: "#232838" },
+    head: "round",
+    ears: "none",
+    face: { eyes: "goggle", eyeColor: "#7fd6ff", mouth: "none", muzzle: "none" },
+    tail: "none",
+    headExtras: ["stripe"],
+    bodyExtras: ["racing-stripe", "boots"]
+  },
+  {
+    id: "pirate",
+    name: { en: "Pirate", it: "Pirata" },
+    band: "9-12",
+    palette: { body: "#f2efe6", limbs: "#2a3d6e", belly: "#f2efe6", accent: "#d94545", outline: COOL, skin: "#d9a072", hair: "#2b1a12", hands: "#d9a072", feet: "#3a2a20" },
+    head: "round",
+    ears: "human",
+    face: { eyes: "calm", mouth: "smirk", muzzle: "none", brows: "#2b1a12" },
+    tail: "none",
+    headExtras: ["locks", "bandana", "eye-patch"],
+    bodyExtras: ["stripes", "belt", "boots"],
+    extraColors: ["#d94545", "#2a3d6e", "#4a3426"]
+  },
+  {
+    id: "diver",
+    name: { en: "Diver", it: "Sub" },
+    band: "9-12",
+    palette: { body: "#1f6582", limbs: "#1f6582", belly: "#1f6582", accent: "#ffb020", outline: COOL, skin: "#e8b48a", hair: "#c98f2e", hands: "#1b4f66", feet: "#ffb020" },
+    head: "round",
+    ears: "human",
+    face: { eyes: "calm", mouth: "smile", muzzle: "none", brows: "#8a5a1a" },
+    tail: "none",
+    headExtras: ["curls", "dive-mask"],
+    bodyExtras: ["tank", "fins"],
+    extraColors: ["#c9d3db"]
+  },
+  {
+    id: "hero",
+    name: { en: "Hero", it: "Supereroe" },
+    band: "9-12",
+    palette: { body: "#3557c8", limbs: "#3557c8", belly: "#3557c8", accent: "#e0403a", outline: COOL, skin: "#5a3825", hair: "#141010", hands: "#e0403a", feet: "#e0403a" },
+    head: "round",
+    ears: "human",
+    face: { eyes: "calm", mouth: "smirk", muzzle: "none", brows: "#141010" },
+    tail: "none",
+    headExtras: ["hair", "domino"],
+    bodyExtras: ["cape", "emblem", "boots"],
+    extraColors: ["#ffd84a"]
+  }
+];
+
+// ../avatars/src/shapes.ts
+var PATH = { M: 0, L: 1, Q: 2, C: 3, Z: 4 };
+var PATH_ARGS = [2, 2, 4, 6, 0];
+function drawShapes(ctx, shapes) {
+  for (const s of shapes) drawShape(ctx, s);
+}
+function drawShape(ctx, s) {
+  if (s.k === "group") {
+    ctx.save();
+    ctx.translate(s.x, s.y);
+    if (s.rot) ctx.rotate(s.rot);
+    if (s.s !== void 0 && s.s !== 1) ctx.scale(s.s, s.s);
+    if (s.alpha !== void 0) ctx.globalAlpha *= s.alpha;
+    drawShapes(ctx, s.items);
+    ctx.restore();
+    return;
+  }
+  ctx.save();
+  if (s.alpha !== void 0) ctx.globalAlpha *= s.alpha;
+  ctx.beginPath();
+  switch (s.k) {
+    case "circle":
+      ctx.arc(s.x, s.y, Math.max(s.r, 0), 0, Math.PI * 2);
+      break;
+    case "ellipse":
+      ctx.ellipse(s.x, s.y, Math.max(s.rx, 0), Math.max(s.ry, 0), s.rot ?? 0, 0, Math.PI * 2);
+      break;
+    case "rect":
+      roundRect(ctx, s);
+      break;
+    case "path":
+      if (typeof s.d === "string") tracePath(ctx, s.d);
+      else traceData(ctx, s.d);
+      break;
+    case "line":
+      ctx.moveTo(s.pts[0] ?? 0, s.pts[1] ?? 0);
+      for (let i = 2; i + 1 < s.pts.length; i += 2) ctx.lineTo(s.pts[i], s.pts[i + 1]);
+      break;
+  }
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  if (s.fill && s.k !== "line") {
+    ctx.fillStyle = s.fill;
+    ctx.fill();
+  }
+  if (s.stroke && (s.lw ?? 1) > 0) {
+    ctx.strokeStyle = s.stroke;
+    ctx.lineWidth = s.lw ?? 1;
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+function roundRect(ctx, s) {
+  const r = Math.max(0, Math.min(s.r, s.w / 2, s.h / 2));
+  ctx.translate(s.x, s.y);
+  if (s.rot) ctx.rotate(s.rot);
+  const x = -s.w / 2;
+  const y = -s.h / 2;
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + s.w - r, y);
+  ctx.quadraticCurveTo(x + s.w, y, x + s.w, y + r);
+  ctx.lineTo(x + s.w, y + s.h - r);
+  ctx.quadraticCurveTo(x + s.w, y + s.h, x + s.w - r, y + s.h);
+  ctx.lineTo(x + r, y + s.h);
+  ctx.quadraticCurveTo(x, y + s.h, x, y + s.h - r);
+  ctx.lineTo(x, y + r);
+  ctx.quadraticCurveTo(x, y, x + r, y);
+  ctx.closePath();
+}
+function traceData(ctx, d) {
+  for (let i = 0; i < d.length; ) {
+    const c = d[i++];
+    if (c === PATH.M) ctx.moveTo(d[i], d[i + 1]);
+    else if (c === PATH.L) ctx.lineTo(d[i], d[i + 1]);
+    else if (c === PATH.Q) ctx.quadraticCurveTo(d[i], d[i + 1], d[i + 2], d[i + 3]);
+    else if (c === PATH.C) ctx.bezierCurveTo(d[i], d[i + 1], d[i + 2], d[i + 3], d[i + 4], d[i + 5]);
+    else if (c === PATH.Z) ctx.closePath();
+    else return;
+    i += PATH_ARGS[c];
+  }
+}
+function pathPoints(d) {
+  if (typeof d === "string") return (d.match(/-?\d*\.?\d+(?:e-?\d+)?/gi) ?? []).map(Number);
+  const out = [];
+  for (let i = 0; i < d.length; ) {
+    const n = PATH_ARGS[d[i++]];
+    if (n === void 0) break;
+    for (let k = 0; k < n; k++) out.push(d[i + k]);
+    i += n;
+  }
+  return out;
+}
+function tracePath(ctx, d) {
+  const tokens = d.match(/[MLQCZ]|-?\d*\.?\d+(?:e-?\d+)?/gi) ?? [];
+  let cmd = "";
+  let i = 0;
+  const n = () => Number(tokens[i++]);
+  while (i < tokens.length) {
+    const t = tokens[i];
+    if (/[MLQCZ]/i.test(t)) {
+      cmd = t.toUpperCase();
+      i++;
+      if (cmd === "Z") {
+        ctx.closePath();
+        continue;
+      }
+    }
+    if (cmd === "M") {
+      ctx.moveTo(n(), n());
+      cmd = "L";
+    } else if (cmd === "L") ctx.lineTo(n(), n());
+    else if (cmd === "Q") ctx.quadraticCurveTo(n(), n(), n(), n());
+    else if (cmd === "C") ctx.bezierCurveTo(n(), n(), n(), n(), n(), n());
+    else i++;
+  }
+}
+var f = (v) => {
+  const r = Math.round(v * 100) / 100;
+  return r === 0 ? 0 : r;
+};
+function roundedPolygon(pts2, round = 0.5) {
+  const n = pts2.length;
+  if (n < 3) return [];
+  const mid2 = (a, b, t2) => ({ x: a.x + (b.x - a.x) * t2, y: a.y + (b.y - a.y) * t2 });
+  const t = Math.min(Math.max(round, 0), 0.5);
+  const start = mid2(pts2[0], pts2[1], t);
+  const d = [PATH.M, f(start.x), f(start.y)];
+  for (let i = 1; i <= n; i++) {
+    const prev = pts2[(i - 1) % n];
+    const cur = pts2[i % n];
+    const next = pts2[(i + 1) % n];
+    const a = mid2(prev, cur, 1 - t);
+    const b = mid2(cur, next, t);
+    d.push(PATH.L, f(a.x), f(a.y), PATH.Q, f(cur.x), f(cur.y), f(b.x), f(b.y));
+  }
+  d.push(PATH.Z);
+  return d;
+}
+function smoothClosed(pts2, tension = 1) {
+  const n = pts2.length;
+  if (n < 3) return [];
+  const d = [PATH.M, f(pts2[0].x), f(pts2[0].y)];
+  const k = tension / 6;
+  for (let i = 0; i < n; i++) {
+    const p0 = pts2[(i - 1 + n) % n];
+    const p1 = pts2[i];
+    const p2 = pts2[(i + 1) % n];
+    const p3 = pts2[(i + 2) % n];
+    d.push(PATH.C, f(p1.x + (p2.x - p0.x) * k), f(p1.y + (p2.y - p0.y) * k), f(p2.x - (p3.x - p1.x) * k), f(p2.y - (p3.y - p1.y) * k), f(p2.x), f(p2.y));
+  }
+  d.push(PATH.Z);
+  return d;
+}
+function smoothOpen(pts2) {
+  const n = pts2.length;
+  if (n < 2) return [];
+  const d = [PATH.M, f(pts2[0].x), f(pts2[0].y)];
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = pts2[Math.max(i - 1, 0)];
+    const p1 = pts2[i];
+    const p2 = pts2[i + 1];
+    const p3 = pts2[Math.min(i + 2, n - 1)];
+    d.push(PATH.C, f(p1.x + (p2.x - p0.x) / 6), f(p1.y + (p2.y - p0.y) / 6), f(p2.x - (p3.x - p1.x) / 6), f(p2.y - (p3.y - p1.y) / 6), f(p2.x), f(p2.y));
+  }
+  return d;
+}
+var STAR = "M0 -1 L0.29 -0.4 L0.95 -0.31 L0.47 0.15 L0.59 0.81 L0 0.5 L-0.59 0.81 L-0.47 0.15 L-0.95 -0.31 L-0.29 -0.4 Z";
+
+// ../avatars/src/head.ts
+var WHITE = "#ffffff";
+var SIDES = [-1, 1];
+var MOUTH = "#3a2420";
+var TONGUE = "#f2808f";
+var DARK_GLASS = "#26324a";
+var GOLD = "#ffd84a";
+var pts = (...xy) => {
+  const out = [];
+  for (let i = 0; i + 1 < xy.length; i += 2) out.push({ x: xy[i], y: xy[i + 1] });
+  return out;
+};
+function headShapes(def, ow) {
+  const p = def.palette;
+  const out = [];
+  const ol = { stroke: p.outline, lw: ow };
+  const has = (x) => def.headExtras.includes(x);
+  const extra = (i, fallback) => def.extraColors?.[i] ?? fallback;
+  if (has("mane")) {
+    const n = 12;
+    for (let i = 0; i < n; i++) {
+      const a = i / n * Math.PI * 2;
+      out.push({ k: "circle", x: Math.cos(a) * 1.02, y: Math.sin(a) * 1 + 0.04, r: 0.42, fill: extra(0, p.accent), ...ol });
+    }
+    out.push({ k: "circle", x: 0, y: 0.04, r: 1.08, fill: extra(0, p.accent) });
+  }
+  if (has("rainbow-mane")) {
+    const c = def.extraColors ?? ["#f59ac0", "#fbd46a", "#8fd3f4"];
+    const locks = [
+      [0.98, 0.05, 0.3, 0.5, -0.25],
+      [0.92, 0.58, 0.26, 0.42, -0.1],
+      [0.62, 0.92, 0.22, 0.32, 0.4]
+    ];
+    locks.forEach(([x, y, rx, ry, rot], i) => out.push({ k: "ellipse", x, y, rx, ry, rot, fill: c[i % c.length], ...ol }));
+  }
+  if (has("spikes")) {
+    for (const a of [-0.55, 0, 0.55]) {
+      const tip = polar(a, 1.48);
+      const b1 = polar(a - 0.32, 0.86);
+      const b2 = polar(a + 0.32, 0.86);
+      out.push({ k: "path", d: roundedPolygon([b1, tip, b2], 0.22), fill: p.accent, ...ol });
+    }
+  }
+  if (has("curl")) {
+    out.push({ k: "path", d: smoothClosed([{ x: -0.2, y: -0.9 }, { x: -0.05, y: -1.3 }, { x: 0.32, y: -1.42 }, { x: 0.16, y: -1.18 }, { x: 0.2, y: -0.9 }]), fill: p.body, ...ol });
+  }
+  if (has("wool")) {
+    for (let i = 0; i <= 8; i++) {
+      const a = -1.75 + i / 8 * 3.5;
+      out.push({ k: "circle", x: Math.sin(a) * 0.98, y: -Math.cos(a) * 0.92 - 0.04, r: 0.34, fill: p.body, ...ol });
+    }
+  }
+  if (has("crest")) {
+    ;
+    [-0.38, 0, 0.38].forEach((a, i) => {
+      const c = polar(a, 1.12);
+      out.push({ k: "ellipse", x: c.x, y: c.y, rx: 0.15, ry: 0.42, rot: a, fill: extra(i, p.accent), ...ol });
+    });
+  }
+  if (has("plume")) {
+    out.push({ k: "path", d: smoothClosed(pts(-0.12, -0.92, -0.2, -1.42, 0.1, -1.78, 0.62, -1.74, 0.36, -1.46, 0.16, -0.98)), fill: p.accent, ...ol });
+  }
+  if (has("locks")) {
+    out.push({ k: "path", d: smoothClosed(pts(-1.14, 0.58, -1.24, -0.2, -0.86, -0.98, 0, -1.2, 0.86, -0.98, 1.24, -0.2, 1.14, 0.58, 0.8, 0.66, 0, 0.2, -0.8, 0.66)), fill: p.hair ?? p.outline, ...ol });
+  }
+  if (has("ninja-hood")) {
+    for (const [rot, len2] of [
+      [0.35, 0.5],
+      [0.85, 0.42]
+    ])
+      out.push({ k: "ellipse", x: 1 + Math.cos(rot) * len2 * 0.8, y: -0.5 + Math.sin(rot) * len2 * 0.8, rx: len2, ry: 0.11, rot, fill: p.accent, ...ol });
+  }
+  if (has("bandana")) {
+    for (const [rot, len2] of [
+      [Math.PI - 0.5, 0.42],
+      [Math.PI - 1, 0.36]
+    ])
+      out.push({ k: "ellipse", x: -0.98 + Math.cos(rot) * len2 * 0.8, y: -0.36 + Math.sin(rot) * len2 * 0.8, rx: len2, ry: 0.12, rot, fill: p.accent, ...ol });
+  }
+  if (has("ruff")) {
+    for (const s of SIDES)
+      out.push({ k: "path", d: roundedPolygon(pts(s * 0.7, -0.3, s * 1.32, 0, s * 1.02, 0.18, s * 1.26, 0.46, s * 0.86, 0.56, s * 0.98, 0.84, s * 0.4, 0.7), 0.25), fill: p.body, ...ol });
+  }
+  if (def.face.eyesOnTop) {
+    for (const s of SIDES) out.push({ k: "circle", x: s * 0.46, y: -0.72, r: 0.38, fill: p.body, ...ol });
+  }
+  out.push(...ears(def, ow));
+  out.push(headShape(def, ol));
+  const muzzle = def.face.muzzle;
+  const mc = p.belly;
+  if (muzzle === "oval") out.push({ k: "ellipse", x: 0, y: 0.4, rx: 0.46, ry: 0.32, fill: mc });
+  if (muzzle === "monkey") {
+    for (const s of SIDES) out.push({ k: "circle", x: s * 0.32, y: -0.04, r: 0.38, fill: mc });
+    out.push({ k: "ellipse", x: 0, y: 0.4, rx: 0.56, ry: 0.4, fill: mc });
+  }
+  if (muzzle === "heart") {
+    for (const s of SIDES) out.push({ k: "circle", x: s * 0.36, y: 0.02, r: 0.5, fill: mc });
+    out.push({ k: "ellipse", x: 0, y: 0.38, rx: 0.66, ry: 0.48, fill: mc });
+  }
+  if (muzzle === "disc") for (const s of SIDES) out.push({ k: "circle", x: s * 0.4, y: 0.02, r: 0.44, fill: mc });
+  if (muzzle === "cheeks") for (const s of SIDES) out.push({ k: "ellipse", x: s * 0.4, y: 0.44, rx: 0.44, ry: 0.32, fill: mc });
+  if (muzzle === "band") out.push({ k: "path", d: lowerFace(def, ow), fill: mc });
+  if (has("stripes")) {
+    const c = extra(0, p.outline);
+    out.push({ k: "line", pts: [0, -0.97, 0, -0.66], stroke: c, lw: 0.13 });
+    for (const s of SIDES) {
+      out.push({ k: "line", pts: [s * 0.3, -0.93, s * 0.24, -0.7], stroke: c, lw: 0.1 });
+      out.push({ k: "line", pts: [s * 0.98, -0.05, s * 0.74, 0], stroke: c, lw: 0.1 });
+      out.push({ k: "line", pts: [s * 0.94, 0.22, s * 0.74, 0.22], stroke: c, lw: 0.09 });
+    }
+  }
+  if (has("spots")) {
+    const c = extra(1, p.belly);
+    out.push({ k: "circle", x: -0.55, y: -0.5, r: 0.15, fill: c });
+    out.push({ k: "circle", x: 0.58, y: -0.42, r: 0.11, fill: c });
+    out.push({ k: "circle", x: 0.22, y: -0.76, r: 0.09, fill: c });
+  }
+  if (has("forehead")) out.push({ k: "path", d: smoothClosed(pts(-0.62, -0.66, 0, -0.86, 0.62, -0.66, 0.26, -0.36, 0, -0.1, -0.26, -0.36), 0.9), fill: extra(0, p.accent) });
+  if (has("eye-spot")) out.push({ k: "ellipse", x: 0.42, y: -0.06, rx: 0.3, ry: 0.33, rot: 0.3, fill: p.ears ?? p.accent });
+  if (has("gills")) {
+    for (const s of SIDES) for (const dx of [0, 0.12, 0.24]) out.push({ k: "path", d: `M${s * (0.66 + dx)} 0.06 Q${s * (0.6 + dx)} 0.22 ${s * (0.66 + dx)} 0.38`, stroke: p.accent, lw: ow * 0.9 });
+  }
+  const hair = p.hair ?? p.outline;
+  if (has("hair")) out.push({ k: "path", d: smoothClosed(pts(-1.02, -0.06, -1.02, -0.58, -0.62, -1.04, 0.08, -1.14, 0.76, -0.92, 1.05, -0.42, 1, -0.06, 0.84, -0.4, 0.42, -0.5, 0.06, -0.4, -0.34, -0.56, -0.74, -0.38)), fill: hair, ...ol });
+  if (has("locks")) out.push({ k: "path", d: smoothClosed(pts(-1, -0.08, -0.98, -0.62, -0.56, -1.02, 0, -1.1, 0.56, -1.02, 0.98, -0.62, 1, -0.08, 0.8, -0.38, 0.36, -0.44, 0, -0.4, -0.36, -0.44, -0.8, -0.38)), fill: hair, ...ol });
+  if (has("curls")) {
+    for (let i = 0; i < 7; i++) {
+      const c = polar(-1.3 + i / 6 * 2.6, 0.86);
+      out.push({ k: "circle", x: c.x, y: c.y, r: 0.3, fill: hair, ...ol });
+    }
+    out.push({ k: "ellipse", x: 0, y: -0.64, rx: 0.8, ry: 0.36, fill: hair });
+  }
+  if (has("ninja-hood")) {
+    out.push({ k: "rect", x: 0, y: 0, w: 1.56, h: 0.6, r: 0.28, fill: p.skin ?? WHITE, stroke: p.outline, lw: ow * 0.8 });
+    out.push({ k: "path", d: "M-0.98 -0.42 Q0 -0.74 0.98 -0.42 L1.0 -0.62 Q0 -0.94 -1.0 -0.62 Z", fill: p.accent, ...ol });
+  }
+  if (has("domino")) {
+    out.push({ k: "path", d: smoothClosed(pts(-0.86, -0.04, -0.62, -0.3, -0.18, -0.24, 0, -0.16, 0.18, -0.24, 0.62, -0.3, 0.86, -0.04, 0.6, 0.22, 0.16, 0.16, 0, 0.1, -0.16, 0.16, -0.6, 0.22), 0.9), fill: p.accent, ...ol });
+    for (const s of SIDES) out.push({ k: "ellipse", x: s * 0.38, y: 0, rx: 0.19, ry: 0.13, fill: WHITE });
+  }
+  out.push(...eyes(def, ow));
+  if (has("brows")) {
+    for (const s of SIDES) out.push({ k: "line", pts: [s * 0.72, -0.5, s * 0.14, -0.3], stroke: p.accent, lw: 0.16 });
+  }
+  if (def.face.brows) for (const s of SIDES) out.push({ k: "line", pts: [s * 0.2, -0.2, s * 0.54, -0.28], stroke: def.face.brows, lw: 0.09 });
+  out.push(...mouth(def, ow));
+  if (def.face.cheeks) for (const s of SIDES) out.push({ k: "ellipse", x: s * 0.64, y: 0.3, rx: 0.15, ry: 0.1, fill: def.face.cheeks, alpha: 0.8 });
+  if (has("whiskers")) {
+    for (const s of SIDES)
+      for (const dy of [-0.1, 0.06]) out.push({ k: "line", pts: [s * 0.62, 0.38 + dy, s * 1.06, 0.3 + dy * 2.2], stroke: p.outline, lw: ow * 0.7, alpha: 0.75 });
+  }
+  if (has("rainbow-mane")) {
+    const c = def.extraColors ?? ["#f59ac0", "#fbd46a", "#8fd3f4"];
+    out.push({ k: "ellipse", x: 0.42, y: -0.82, rx: 0.34, ry: 0.22, rot: 0.5, fill: c[0], ...ol });
+    out.push({ k: "ellipse", x: 0.1, y: -0.92, rx: 0.3, ry: 0.2, rot: 0.25, fill: c[1 % c.length], ...ol });
+  }
+  if (def.ears === "unicorn") {
+    const horn = [
+      { x: -0.18, y: -0.84 },
+      { x: 0.02, y: -1.72 },
+      { x: 0.18, y: -0.84 }
+    ];
+    out.push({ k: "path", d: roundedPolygon(horn, 0.12), fill: p.accent, ...ol });
+    for (const y of [-1, -1.2, -1.4]) {
+      const w = 0.16 * ((y + 1.72) / 0.88);
+      out.push({ k: "line", pts: [-w, y + 0.04, w, y - 0.04], stroke: p.outline, lw: ow * 0.7, alpha: 0.6 });
+    }
+  }
+  if (has("helmet")) {
+    for (const s of SIDES) out.push({ k: "rect", x: s * 1, y: 0.05, w: 0.26, h: 0.56, r: 0.12, fill: p.accent, ...ol });
+    out.push({ k: "path", d: "M-0.62 -0.62 Q-0.3 -0.92 0.12 -0.9", stroke: WHITE, lw: 0.1, alpha: 0.9 });
+  }
+  if (has("bolts")) for (const s of SIDES) out.push({ k: "rect", x: s * 1.08, y: 0.08, w: 0.2, h: 0.44, r: 0.08, fill: p.accent, ...ol });
+  if (has("tuft")) {
+    out.push({ k: "path", d: smoothClosed([{ x: -0.26, y: -0.95 }, { x: -0.12, y: -1.22 }, { x: 0.02, y: -1.04 }, { x: 0.16, y: -1.28 }, { x: 0.28, y: -0.95 }, { x: 0, y: -0.86 }]), fill: p.body, ...ol });
+  }
+  if (has("eggshell")) {
+    out.push({ k: "path", d: "M-0.88 -0.5 C-0.88 -1.12 -0.46 -1.42 0 -1.42 C0.46 -1.42 0.88 -1.12 0.88 -0.5 L0.66 -0.66 L0.44 -0.48 L0.22 -0.66 L0 -0.48 L-0.22 -0.66 L-0.44 -0.48 L-0.66 -0.66 Z", fill: extra(0, WHITE), ...ol });
+  }
+  if (has("wool")) for (const [x, y] of [[-0.36, -0.84], [0.02, -0.94], [0.4, -0.82]]) out.push({ k: "circle", x, y, r: 0.27, fill: p.body, ...ol });
+  if (has("stripe")) out.push({ k: "rect", x: 0, y: -0.64, w: 0.38, h: 0.62, r: 0.06, fill: p.accent });
+  if (has("eye-patch")) {
+    out.push({ k: "line", pts: [-0.97, -0.5, 0.97, 0.13], stroke: p.outline, lw: 0.07 });
+    out.push({ k: "ellipse", x: 0.38, y: 0.02, rx: 0.21, ry: 0.19, fill: p.outline });
+  }
+  if (has("bandana")) {
+    out.push({ k: "path", d: smoothClosed(pts(-1.05, -0.22, -0.96, -0.72, -0.5, -1.08, 0.1, -1.14, 0.72, -0.96, 1.04, -0.56, 1.05, -0.22, 0.5, -0.46, -0.5, -0.46)), fill: p.accent, ...ol });
+    for (const [x, y] of [[-0.5, -0.8], [0.08, -0.92], [0.6, -0.74], [-0.12, -0.62], [0.36, -0.6]]) out.push({ k: "circle", x, y, r: 0.06, fill: WHITE, alpha: 0.85 });
+    out.push({ k: "circle", x: -0.98, y: -0.34, r: 0.15, fill: p.accent, ...ol });
+  }
+  if (has("cap")) {
+    for (const s of SIDES) out.push({ k: "line", pts: [s * 0.98, -0.2, s * 0.5, 0.82, -s * 0.05, 0.98], stroke: p.outline, lw: 0.06 });
+    out.push({ k: "path", d: smoothClosed(pts(-1.1, -0.16, -1.04, -0.66, -0.6, -1.12, 0, -1.24, 0.6, -1.12, 1.04, -0.66, 1.1, -0.16, 0.5, -0.4, -0.5, -0.4)), fill: p.accent, ...ol });
+    out.push({ k: "path", d: "M-0.74 -0.4 Q0 -0.6 0.74 -0.4 Q0.8 -0.24 0.6 -0.22 Q0 -0.36 -0.6 -0.22 Q-0.8 -0.24 -0.74 -0.4 Z", fill: p.accent, ...ol });
+    out.push({ k: "circle", x: 0.5, y: -0.82, r: 0.15, fill: extra(0, WHITE), ...ol });
+    for (const x of [-0.42, -0.14]) out.push({ k: "line", pts: [x, -1.04, x + 0.02, -0.78], stroke: p.outline, lw: 0.07, alpha: 0.7 });
+  }
+  if (has("safari-hat")) {
+    out.push({ k: "ellipse", x: 0, y: -0.56, rx: 1.48, ry: 0.3, fill: p.accent, ...ol });
+    out.push({ k: "path", d: smoothClosed(pts(-0.78, -0.58, -0.7, -1.1, -0.3, -1.38, 0.3, -1.38, 0.7, -1.1, 0.78, -0.58, 0, -0.5), 0.8), fill: p.accent, ...ol });
+    out.push({ k: "path", d: "M-0.77 -0.72 Q0 -0.62 0.77 -0.72 L0.74 -0.9 Q0 -0.8 -0.74 -0.9 Z", fill: extra(1, p.outline), stroke: p.outline, lw: ow * 0.8 });
+  }
+  if (has("wizard-hat")) {
+    out.push({ k: "ellipse", x: 0, y: -0.62, rx: 1.32, ry: 0.26, fill: p.accent, ...ol });
+    out.push({ k: "path", d: roundedPolygon(pts(-0.8, -0.66, -0.36, -1.5, 0.5, -2.2, 0.3, -1.46, 0.8, -0.66), 0.3), fill: p.accent, ...ol });
+    const star = extra(0, GOLD);
+    for (const [x, y, k] of [[0.02, -1.08, 0.18], [-0.38, -0.84, 0.1], [0.36, -1.5, 0.11]]) out.push({ k: "group", x, y, s: k, items: [{ k: "path", d: STAR, fill: star }] });
+  }
+  if (has("dive-mask")) {
+    for (const s of SIDES) out.push({ k: "line", pts: [s * 0.7, -0.04, s * 1, -0.12], stroke: p.outline, lw: 0.2 }, { k: "line", pts: [s * 0.7, -0.04, s * 1, -0.12], stroke: p.accent, lw: 0.11 });
+    out.push({ k: "rect", x: 0, y: 0, w: 1.42, h: 0.62, r: 0.28, fill: "#bfe9f5", alpha: 0.35 });
+    out.push({ k: "rect", x: 0, y: 0, w: 1.42, h: 0.62, r: 0.28, stroke: p.outline, lw: 0.2 });
+    out.push({ k: "rect", x: 0, y: 0, w: 1.42, h: 0.62, r: 0.28, stroke: p.accent, lw: 0.11 });
+    out.push({ k: "path", d: "M-0.5 -0.16 Q-0.4 -0.24 -0.22 -0.24", stroke: WHITE, lw: 0.06, alpha: 0.9 });
+    const tube = "M0.5 0.52 Q0.98 0.56 1.04 0.1 L1.12 -0.92";
+    out.push({ k: "path", d: tube, stroke: p.outline, lw: 0.24 }, { k: "path", d: tube, stroke: p.accent, lw: 0.13 });
+  }
+  return out;
+}
+function headShape(def, ol) {
+  const fill = def.headExtras.includes("ninja-hood") ? def.palette.body : def.palette.skin ?? def.palette.body;
+  switch (def.head) {
+    case "round":
+      return { k: "circle", x: 0, y: 0, r: 1, fill, ...ol };
+    case "wide":
+      return { k: "ellipse", x: 0, y: 0.03, rx: 1.12, ry: 0.94, fill, ...ol };
+    case "tall":
+      return { k: "ellipse", x: 0, y: -0.02, rx: 0.94, ry: 1.04, fill, ...ol };
+    case "square":
+      return { k: "rect", x: 0, y: 0, w: 2, h: 1.8, r: 0.46, fill, ...ol };
+    case "bucket":
+      return { k: "path", d: roundedPolygon(pts(-0.94, 0.96, -0.98, -0.36, -0.62, -1.04, 0.62, -1.04, 0.98, -0.36, 0.94, 0.96), 0.42), fill, ...ol };
+    case "bulb":
+      return {
+        k: "path",
+        d: smoothClosed([
+          { x: 0, y: -1.02 },
+          { x: 0.86, y: -0.74 },
+          { x: 1.08, y: -0.12 },
+          { x: 0.72, y: 0.62 },
+          { x: 0, y: 0.92 },
+          { x: -0.72, y: 0.62 },
+          { x: -1.08, y: -0.12 },
+          { x: -0.86, y: -0.74 }
+        ]),
+        fill,
+        ...ol
+      };
+  }
+}
+function headEllipse(def) {
+  if (def.head === "round") return { cy: 0, rx: 1, ry: 1 };
+  if (def.head === "tall") return { cy: -0.02, rx: 0.94, ry: 1.04 };
+  return { cy: 0.03, rx: 1.12, ry: 0.94 };
+}
+function lowerFace(def, ow) {
+  const { cy, rx: hx, ry: hy } = headEllipse(def);
+  const rx = hx - ow / 2;
+  const ry = hy - ow / 2;
+  const top = 0.15;
+  const a0 = Math.asin(Math.min(1, (top - cy) / ry));
+  const x0 = Math.cos(a0) * rx;
+  const r = (v) => Math.round(v * 100) / 100 || 0;
+  const d = [PATH.M, r(-x0), top];
+  const wave = [
+    [-0.84 * x0, 0.02, -0.53 * x0, 0.06, -0.32 * x0, 0.24],
+    [-0.17 * x0, 0.11, 0.17 * x0, 0.11, 0.32 * x0, 0.24],
+    [0.53 * x0, 0.06, 0.84 * x0, 0.02, x0, top]
+  ];
+  for (const c of wave) d.push(PATH.C, ...c.map(r));
+  const n = 24;
+  for (let i = 1; i <= n; i++) {
+    const a = a0 + (Math.PI - 2 * a0) * i / n;
+    d.push(PATH.L, r(Math.cos(a) * rx), r(cy + Math.sin(a) * ry));
+  }
+  d.push(PATH.Z);
+  return d;
+}
+function ears(def, ow) {
+  const p = def.palette;
+  const ol = { stroke: p.outline, lw: ow };
+  const out = [];
+  for (const s of SIDES) {
+    switch (def.ears) {
+      case "pointy":
+      case "unicorn": {
+        const k = def.ears === "unicorn" ? 0.8 : 1;
+        const base1 = { x: s * 0.3, y: -0.82 };
+        const tip = { x: s * 0.86, y: -0.82 - 0.62 * k };
+        const base2 = { x: s * 0.94, y: -0.36 };
+        out.push({ k: "path", d: roundedPolygon([base1, tip, base2], 0.2), fill: p.body, ...ol });
+        const c = { x: (base1.x + tip.x + base2.x) / 3, y: (base1.y + tip.y + base2.y) / 3 };
+        const inner = [base1, tip, base2].map((q) => ({ x: c.x + (q.x - c.x) * 0.55, y: c.y + (q.y - c.y) * 0.55 + 0.04 }));
+        out.push({ k: "path", d: roundedPolygon(inner, 0.25), fill: p.accent });
+        break;
+      }
+      case "round":
+        out.push({ k: "circle", x: s * 0.72, y: -0.72, r: 0.36, fill: p.ears ?? p.body, ...ol });
+        if (!p.ears) out.push({ k: "circle", x: s * 0.74, y: -0.74, r: 0.19, fill: p.accent });
+        break;
+      case "big-round":
+        out.push({ k: "circle", x: s * 0.96, y: -0.46, r: 0.52, fill: p.body, ...ol });
+        out.push({ k: "circle", x: s * 1, y: -0.44, r: 0.32, fill: p.accent });
+        break;
+      case "long":
+        out.push({ k: "ellipse", x: s * 0.38, y: -1.42, rx: 0.25, ry: 0.68, rot: s * 0.14, fill: p.body, ...ol });
+        out.push({ k: "ellipse", x: s * 0.39, y: -1.36, rx: 0.12, ry: 0.48, rot: s * 0.14, fill: p.accent });
+        break;
+      case "side":
+        out.push({ k: "circle", x: s * 1, y: 0.02, r: 0.34, fill: p.body, ...ol });
+        out.push({ k: "circle", x: s * 1.02, y: 0.02, r: 0.2, fill: p.belly });
+        break;
+      case "tufts":
+        out.push({ k: "path", d: roundedPolygon([{ x: s * 0.3, y: -0.84 }, { x: s * 1.22, y: -1.12 }, { x: s * 0.92, y: -0.42 }], 0.16), fill: p.body, ...ol });
+        out.push({ k: "line", pts: [s * 0.62, -0.78, s * 1, -0.98], stroke: p.accent, lw: 0.08 });
+        break;
+      case "antennae": {
+        const tip = { x: s * 0.62, y: -1.42 };
+        out.push({ k: "path", d: `M${s * 0.3} -0.8 Q${s * 0.36} -1.2 ${tip.x} ${tip.y}`, stroke: p.outline, lw: ow * 2.6 });
+        out.push({ k: "path", d: `M${s * 0.3} -0.8 Q${s * 0.36} -1.2 ${tip.x} ${tip.y}`, stroke: p.body, lw: ow * 1.2 });
+        out.push({ k: "circle", x: tip.x, y: tip.y, r: 0.17, fill: p.accent, ...ol });
+        break;
+      }
+      case "floppy":
+        out.push({ k: "ellipse", x: s * 0.96, y: 0.02, rx: 0.3, ry: 0.62, rot: -s * 0.36, fill: p.ears ?? p.body, ...ol });
+        break;
+      case "droopy":
+        out.push({ k: "ellipse", x: s * 1.04, y: -0.22, rx: 0.4, ry: 0.18, rot: s * 0.32, fill: p.skin ?? p.body, ...ol });
+        out.push({ k: "ellipse", x: s * 1.08, y: -0.2, rx: 0.24, ry: 0.08, rot: s * 0.32, fill: p.accent });
+        break;
+      case "human":
+        out.push({ k: "ellipse", x: s * 0.98, y: 0.06, rx: 0.17, ry: 0.23, fill: p.skin ?? p.body, ...ol });
+        break;
+      case "horns": {
+        const pts2 = [
+          { x: s * 0.3, y: -0.84 },
+          { x: s * 0.6, y: -1.5 },
+          { x: s * 0.66, y: -0.68 }
+        ];
+        out.push({ k: "path", d: roundedPolygon(pts2, 0.18), fill: p.accent, ...ol });
+        break;
+      }
+    }
+  }
+  if (def.ears === "fin") out.push({ k: "path", d: roundedPolygon(pts(-0.4, -0.82, 0.2, -1.62, 0.46, -0.78), 0.2), fill: p.body, ...ol });
+  if (def.ears === "antenna") {
+    out.push({ k: "line", pts: [0, -0.85, 0, -1.42], stroke: p.outline, lw: ow * 2.6 });
+    out.push({ k: "line", pts: [0, -0.85, 0, -1.42], stroke: p.limbs, lw: ow * 1.2 });
+    out.push({ k: "circle", x: 0, y: -1.5, r: 0.18, fill: p.accent, ...ol });
+  }
+  return out;
+}
+function eyes(def, ow) {
+  const p = def.palette;
+  const f2 = def.face;
+  const out = [];
+  const ink = p.outline;
+  const ex = f2.eyesOnTop ? 0.46 : 0.4;
+  const ey = f2.eyesOnTop ? -0.72 : -0.04;
+  const shine = (x, y, r) => ({ k: "circle", x, y, r, fill: WHITE });
+  switch (f2.eyes) {
+    case "dot":
+      for (const s of SIDES) {
+        out.push({ k: "ellipse", x: s * ex, y: ey, rx: 0.12, ry: 0.155, fill: ink });
+        out.push(shine(s * ex + 0.04, ey - 0.06, 0.045));
+      }
+      break;
+    case "bead":
+      for (const s of SIDES) {
+        out.push({ k: "ellipse", x: s * ex, y: ey, rx: 0.16, ry: 0.22, fill: ink });
+        out.push(shine(s * ex + 0.05, ey - 0.08, 0.065));
+      }
+      break;
+    case "big":
+      for (const s of SIDES) {
+        if (f2.eyeRing) out.push({ k: "circle", x: s * ex, y: ey, r: 0.36, fill: f2.eyeRing, stroke: ink, lw: ow * 0.8 });
+        out.push({ k: "circle", x: s * ex, y: ey, r: 0.25, fill: WHITE, stroke: ink, lw: ow * 0.8 });
+        out.push({ k: "circle", x: s * ex + s * -0.03, y: ey + 0.03, r: 0.14, fill: f2.eyeColor ?? ink });
+        out.push(shine(s * ex + s * -0.03 + 0.05, ey - 0.03, 0.05));
+      }
+      break;
+    case "mask":
+      for (const s of SIDES) {
+        out.push({ k: "ellipse", x: s * 0.4, y: 0, rx: 0.24, ry: 0.32, rot: s * -0.55, fill: p.limbs });
+        out.push({ k: "circle", x: s * 0.4, y: -0.02, r: 0.11, fill: WHITE });
+        out.push({ k: "circle", x: s * 0.39, y: -0, r: 0.065, fill: ink });
+      }
+      break;
+    case "screen":
+      out.push({ k: "rect", x: 0, y: 0, w: 1.5, h: 0.66, r: 0.26, fill: "#24323d", stroke: ink, lw: ow * 0.8 });
+      for (const s of SIDES) {
+        out.push({ k: "ellipse", x: s * 0.36, y: 0, rx: 0.2, ry: 0.24, fill: f2.eyeColor ?? "#7ff0ff", alpha: 0.3 });
+        out.push({ k: "ellipse", x: s * 0.36, y: 0, rx: 0.12, ry: 0.16, fill: f2.eyeColor ?? "#7ff0ff" });
+      }
+      break;
+    case "almond":
+      for (const s of SIDES) {
+        out.push({ k: "ellipse", x: s * 0.42, y: -0.02, rx: 0.3, ry: 0.2, rot: -s * 0.5, fill: f2.eyeColor ?? ink });
+        out.push(shine(s * 0.42 - s * 0.07, -0.08, 0.07));
+      }
+      break;
+    case "calm":
+      for (const s of SIDES) {
+        out.push({ k: "ellipse", x: s * 0.38, y: 0.02, rx: 0.085, ry: 0.12, fill: ink });
+        out.push(shine(s * 0.38 + 0.03, -0.02, 0.03));
+      }
+      break;
+    case "slit":
+      out.push({ k: "line", pts: [0, -0.98, 0, -0.2], stroke: ink, lw: ow * 0.8, alpha: 0.5 });
+      out.push({ k: "rect", x: 0, y: -0.04, w: 1.56, h: 0.26, r: 0.1, fill: DARK_GLASS, stroke: ink, lw: ow * 0.8 });
+      out.push({ k: "rect", x: 0, y: 0.3, w: 0.22, h: 0.46, r: 0.08, fill: DARK_GLASS, stroke: ink, lw: ow * 0.8 });
+      for (const s of SIDES) {
+        out.push({ k: "ellipse", x: s * 0.4, y: -0.04, rx: 0.12, ry: 0.07, fill: f2.eyeColor ?? WHITE });
+        for (const dy of [0.36, 0.56]) out.push({ k: "circle", x: s * 0.42, y: dy, r: 0.05, fill: ink, alpha: 0.6 });
+      }
+      break;
+    case "goggle":
+      for (const s of SIDES) out.push({ k: "circle", x: s * 0.9, y: 0, r: 0.13, fill: p.accent, stroke: ink, lw: ow * 0.8 });
+      out.push({ k: "rect", x: 0, y: 0, w: 1.66, h: 0.62, r: 0.3, fill: DARK_GLASS, stroke: ink, lw: ow * 0.8 });
+      out.push({ k: "path", d: "M-0.6 -0.16 Q-0.42 -0.24 -0.12 -0.24", stroke: WHITE, lw: 0.07, alpha: 0.8 });
+      for (const s of SIDES) out.push({ k: "path", d: `M${s * 0.5} 0.04 Q${s * 0.34} -0.08 ${s * 0.16} 0.02`, stroke: f2.eyeColor ?? "#7fd6ff", lw: 0.08 });
+      for (const x of [-0.18, 0, 0.18]) out.push({ k: "line", pts: [x, 0.56, x, 0.72], stroke: ink, lw: ow * 0.8, alpha: 0.6 });
+      break;
+    case "visor":
+      out.push({ k: "ellipse", x: 0, y: 0.08, rx: 0.8, ry: 0.64, fill: "#2a3f6b", stroke: ink, lw: ow * 0.8 });
+      out.push({ k: "path", d: "M-0.56 -0.14 Q-0.46 -0.4 -0.16 -0.46", stroke: WHITE, lw: 0.08, alpha: 0.7 });
+      for (const s of SIDES) out.push({ k: "ellipse", x: s * 0.28, y: 0.04, rx: 0.1, ry: 0.14, fill: f2.eyeColor ?? "#cfeeff" });
+      break;
+  }
+  return out;
+}
+function mouth(def, ow) {
+  const p = def.palette;
+  const f2 = def.face;
+  const out = [];
+  const dark = f2.eyes === "visor" ? "#cfeeff" : MOUTH;
+  const lw = ow * 1.05;
+  if (f2.nose && f2.mouth !== "beak") {
+    if (f2.mouth === "cat") out.push({ k: "path", d: roundedPolygon([{ x: -0.1, y: 0.22 }, { x: 0.1, y: 0.22 }, { x: 0, y: 0.33 }], 0.3), fill: f2.nose, stroke: f2.nose, lw: ow * 0.6 });
+    else if (def.ears === "big-round") out.push({ k: "ellipse", x: 0, y: 0.22, rx: 0.2, ry: 0.25, fill: f2.nose });
+    else out.push({ k: "ellipse", x: 0, y: 0.25, rx: 0.13, ry: 0.085, fill: f2.nose });
+  }
+  switch (f2.mouth) {
+    case "smile":
+      out.push({ k: "path", d: f2.eyes === "visor" ? "M-0.16 0.32 Q0 0.46 0.16 0.32" : "M-0.17 0.42 Q0 0.58 0.17 0.42", stroke: dark, lw });
+      break;
+    case "open":
+      out.push({ k: "path", d: "M-0.21 0.4 Q0 0.46 0.21 0.4 Q0.19 0.68 0 0.68 Q-0.19 0.68 -0.21 0.4 Z", fill: dark, stroke: dark, lw: ow * 0.5 });
+      out.push({ k: "ellipse", x: 0, y: 0.6, rx: 0.1, ry: 0.06, fill: TONGUE });
+      break;
+    case "cat":
+      out.push({ k: "path", d: "M-0.19 0.4 Q-0.1 0.5 0 0.37 Q0.1 0.5 0.19 0.4", stroke: dark, lw });
+      break;
+    case "beak":
+      out.push({ k: "path", d: roundedPolygon([{ x: -0.17, y: 0.2 }, { x: 0.17, y: 0.2 }, { x: 0, y: 0.48 }], 0.25), fill: p.accent, stroke: p.outline, lw: ow * 0.8 });
+      break;
+    case "teeth":
+      out.push({ k: "path", d: "M-0.36 0.34 Q0 0.44 0.36 0.34 Q0.28 0.66 0 0.66 Q-0.28 0.66 -0.36 0.34 Z", fill: dark, stroke: dark, lw: ow * 0.5 });
+      for (const s of SIDES) out.push({ k: "rect", x: s * 0.12, y: 0.43, w: 0.1, h: 0.1, r: 0.03, fill: WHITE });
+      break;
+    case "grill":
+      out.push({ k: "rect", x: 0, y: 0.56, w: 0.62, h: 0.2, r: 0.08, fill: "#24323d", stroke: p.outline, lw: ow * 0.7 });
+      for (const x of [-0.15, 0, 0.15]) out.push({ k: "line", pts: [x, 0.51, x, 0.61], stroke: "#9fb0bd", lw: ow * 0.6 });
+      break;
+    case "tiny":
+      out.push({ k: "ellipse", x: 0, y: 0.44, rx: 0.08, ry: 0.1, fill: dark });
+      break;
+    case "smirk":
+      out.push({ k: "path", d: "M-0.16 0.46 Q0.06 0.54 0.22 0.38", stroke: dark, lw });
+      break;
+    case "bill":
+      out.push({ k: "ellipse", x: 0, y: 0.36, rx: 0.44, ry: 0.2, fill: p.accent, stroke: p.outline, lw: ow * 0.8 });
+      out.push({ k: "path", d: "M-0.36 0.38 Q0 0.46 0.36 0.38", stroke: p.outline, lw: ow * 0.7 });
+      for (const s of SIDES) out.push({ k: "circle", x: s * 0.1, y: 0.28, r: 0.03, fill: p.outline });
+      break;
+    case "hook":
+      out.push({ k: "ellipse", x: 0, y: 0.48, rx: 0.16, ry: 0.11, fill: MOUTH });
+      out.push({ k: "path", d: "M-0.3 0.12 Q0 -0.02 0.3 0.12 Q0.36 0.52 0.04 0.76 Q0.08 0.52 -0.08 0.46 Q-0.28 0.38 -0.3 0.12 Z", fill: p.accent, stroke: p.outline, lw: ow * 0.8 });
+      break;
+    case "jaws": {
+      out.push({ k: "path", d: "M-0.5 0.3 Q0 0.5 0.5 0.3 Q0.38 0.72 0 0.72 Q-0.38 0.72 -0.5 0.3 Z", fill: dark, stroke: dark, lw: ow * 0.5 });
+      for (const x of [-0.34, -0.17, 0, 0.17, 0.34]) {
+        const y = 0.3 + 0.4 * (x + 0.5) * (0.5 - x) - 0.01;
+        out.push({ k: "path", d: roundedPolygon(pts(x - 0.075, y, x + 0.075, y, x, y + 0.13), 0.15), fill: WHITE });
+      }
+      break;
+    }
+  }
+  return out;
+}
+var polar = (a, r) => ({ x: Math.sin(a) * r, y: -Math.cos(a) * r });
+
+// ../avatars/src/rig.ts
+var VISIBLE = 0.5;
+var FACE = { leftEye: 2, rightEye: 5, leftEar: 7, rightEar: 8 };
+var BAND_BODY = {
+  "3-5": { head: 0.75, neck: 0.74, arm: 0.3, leg: 0.36, hand: 0.19, foot: 1.2, shoulderMin: 0.4, shoulderPad: 0.07, hipMin: 0.5, hipPad: 0.22, bottom: 0.26, bulge: 1.12, armsOverHead: true },
+  "6-8": { head: 0.6, neck: 0.78, arm: 0.22, leg: 0.28, hand: 0.15, foot: 1, shoulderMin: 0.34, shoulderPad: 0.04, hipMin: 0.4, hipPad: 0.16, bottom: 0.14, bulge: 1.04, armsOverHead: false },
+  "9-12": { head: 0.5, neck: 0.92, arm: 0.17, leg: 0.21, hand: 0.125, foot: 0.9, shoulderMin: 0.36, shoulderPad: 0.07, hipMin: 0.32, hipPad: 0.08, bottom: 0.1, bulge: 1, armsOverHead: false }
+};
+var DEFAULT_BAND = "6-8";
+var bodyBand = (def) => def.band in BAND_BODY ? def.band : DEFAULT_BAND;
+var HEAD = BAND_BODY[DEFAULT_BAND].head;
+var MAX_TILT = 0.3;
+var TILT_DEAD_ZONE = 0.12;
+var TILT_TRUSTED_TO = 0.9;
+var TILT_FADE = 0.5;
+var FACE_VISIBLE = 0.65;
+var NOSE_FOLLOW = 0.35;
+var NOSE_REACH = 0.2;
+var FORESHORTENED = 0.25;
+var sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y });
+var add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
+var mul = (a, k) => ({ x: a.x * k, y: a.y * k });
+var len = (a) => Math.hypot(a.x, a.y);
+var mid = (a, b) => ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 });
+var norm = (a) => {
+  const l = len(a);
+  return l > 1e-9 ? { x: a.x / l, y: a.y / l } : { x: 0, y: 1 };
+};
+var finite = (...v) => v.every(Number.isFinite);
+var wrap = (a) => Math.atan2(Math.sin(a), Math.cos(a));
+var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), hi);
+function joints(body, box, mirrored = false) {
+  return (i) => {
+    const x = body[i * 3];
+    const y = body[i * 3 + 1];
+    const v = body[i * 3 + 2];
+    if (x === void 0 || y === void 0 || v === void 0 || !finite(x, y, v)) return { x: 0, y: 0, ok: false };
+    return { x: box.x + (mirrored ? 1 - x : x) * box.w, y: box.y + y * box.h, ok: v >= VISIBLE };
+  };
+}
+function frameOf(body, box, opts = {}) {
+  const at = joints(body, box, opts.mirrored);
+  const ls = at(P.leftShoulder);
+  const rs = at(P.rightShoulder);
+  if (!ls.ok || !rs.ok) return null;
+  const lh = at(P.leftHip);
+  const rh = at(P.rightHip);
+  const S = mid(ls, rs);
+  const sw = len(sub(rs, ls));
+  const hipsOk = lh.ok && rh.ok;
+  let across = norm(sub(rs, ls));
+  if (sw < 1e-6) across = { x: 1, y: 0 };
+  let d;
+  let L;
+  let U;
+  if (hipsOk) {
+    const H = mid(lh, rh);
+    L = len(sub(H, S));
+    if (L >= sw * FORESHORTENED) d = norm(sub(H, S));
+    else {
+      d = { x: -across.y, y: across.x };
+      if (d.y < 0) d = mul(d, -1);
+    }
+    U = Math.max(L, sw * 1.15);
+  } else {
+    d = { x: -across.y, y: across.x };
+    if (d.y < 0) d = mul(d, -1);
+    U = sw * 1.15;
+    L = U;
+  }
+  U = Math.max(U, 1e-6);
+  const r = { x: d.y, y: -d.x };
+  const angle = Math.atan2(r.y, r.x);
+  const up = mul(d, -1);
+  const bb = BAND_BODY[opts.band ?? DEFAULT_BAND] ?? BAND_BODY[DEFAULT_BAND];
+  const headR = bb.head * U;
+  let head = add(S, mul(up, headR * bb.neck));
+  const nose = at(P.nose);
+  if (nose.ok) {
+    const want = add(nose, mul(up, headR * 0.15));
+    const delta = mul(sub(want, head), NOSE_FOLLOW);
+    const k = Math.min(1, headR * NOSE_REACH / Math.max(len(delta), 1e-6));
+    head = add(head, mul(delta, k));
+  }
+  return { S, r, d, U, L, hipsOk, head, headR, headRot: angle + headTilt(body, at, angle, U), angle };
+}
+function headTilt(body, at, angle, U) {
+  const pairs = [
+    [FACE.leftEar, FACE.rightEar],
+    [FACE.leftEye, FACE.rightEye]
+  ];
+  for (const [a, b] of pairs) {
+    const p = at(a);
+    const q = at(b);
+    if (!p.ok || !q.ok || !(body[a * 3 + 2] >= FACE_VISIBLE && body[b * 3 + 2] >= FACE_VISIBLE) || len(sub(q, p)) < U * 0.05) continue;
+    const t = wrap(Math.atan2(q.y - p.y, q.x - p.x) - angle);
+    const past = Math.max(Math.abs(t) - TILT_DEAD_ZONE, 0);
+    const trust = clamp((TILT_TRUSTED_TO + TILT_FADE - Math.abs(t)) / TILT_FADE, 0, 1);
+    return Math.sign(t) * Math.min(past, MAX_TILT) * trust;
+  }
+  return 0;
+}
+function avatarShapes(body, def, box, opts = {}) {
+  const band = bodyBand(def);
+  const bb = BAND_BODY[band];
+  const F = frameOf(body, box, { ...opts, band });
+  if (!F) return [];
+  const at = joints(body, box, opts.mirrored);
+  const p = def.palette;
+  const { S, r, d, U, L } = F;
+  const has = (x) => def.bodyExtras.includes(x);
+  const ow = Math.max(1.2, U * 0.045);
+  const ol = { stroke: p.outline, lw: ow };
+  const T = (x, y) => ({ x: S.x + r.x * x + d.x * y, y: S.y + r.y * x + d.y * y });
+  const TP = (pts2) => pts2.map(([x, y]) => T(x, y));
+  const ls = at(P.leftShoulder);
+  const rs = at(P.rightShoulder);
+  const lh = at(P.leftHip);
+  const rh = at(P.rightHip);
+  const sw = len(sub(rs, ls));
+  const hw = F.hipsOk ? len(sub(rh, lh)) : sw * 0.7;
+  const ht = Math.max(sw / 2 + bb.shoulderPad * U, bb.shoulderMin * U);
+  const hb = Math.max(hw / 2 + bb.hipPad * U, bb.hipMin * U);
+  const y0 = -0.1 * U;
+  const y1 = L + bb.bottom * U;
+  const back = [];
+  const legs = [];
+  const torso = [];
+  const arms = [];
+  const front = [];
+  const limb = (out, pts2, w, color) => {
+    const flat = pts2.flatMap((q) => [q.x, q.y]);
+    out.push({ k: "line", pts: flat, stroke: p.outline, lw: w + ow * 2 });
+    out.push({ k: "line", pts: flat, stroke: color, lw: w });
+  };
+  const legW = bb.leg * U;
+  const armW = bb.arm * U;
+  const pad = Math.max(bb.arm / 0.22, 0.9);
+  if (F.hipsOk) {
+    for (const [hip, kneeI, ankleI, side] of [
+      [lh, P.leftKnee, P.leftAnkle, -1],
+      [rh, P.rightKnee, P.rightAnkle, 1]
+    ]) {
+      const knee = at(kneeI);
+      const ankle = at(ankleI);
+      if (!knee.ok) continue;
+      const top = add(hip, mul(d, -0.12 * U));
+      const pts2 = ankle.ok ? [top, knee, ankle] : [top, knee];
+      limb(legs, pts2, legW, p.limbs);
+      if (has("joints")) legs.push({ k: "circle", x: knee.x, y: knee.y, r: 0.15 * U * pad, fill: p.accent, ...ol });
+      if (ankle.ok) legs.push(foot(def, ankle, F, side, ow, bb.foot));
+    }
+  }
+  for (const [sh, elbowI, wristI, side] of [
+    [ls, P.leftElbow, P.leftWrist, -1],
+    [rs, P.rightElbow, P.rightWrist, 1]
+  ]) {
+    const elbow = at(elbowI);
+    const wrist = at(wristI);
+    if (has("pauldrons")) {
+      const c = add(sh, mul(d, 0.02 * U));
+      arms.push({ k: "ellipse", x: c.x, y: c.y, rx: 0.25 * U, ry: 0.17 * U, rot: F.angle + side * 0.25, fill: p.body, ...ol });
+      const q = add(c, mul(d, 0.05 * U));
+      arms.push({ k: "ellipse", x: q.x, y: q.y, rx: 0.17 * U, ry: 0.07 * U, rot: F.angle + side * 0.25, fill: p.belly });
+    }
+    if (!elbow.ok) continue;
+    const raised = bb.armsOverHead && (elbow.x - S.x) * d.x + (elbow.y - S.y) * d.y < -0.25 * U;
+    const out = raised ? front : arms;
+    const top = add(sh, mul(d, 0.04 * U));
+    limb(out, wrist.ok ? [top, elbow, wrist] : [top, elbow], armW, p.limbs);
+    if (has("joints")) out.push({ k: "circle", x: elbow.x, y: elbow.y, r: 0.13 * U * pad, fill: p.accent, ...ol });
+    if (!wrist.ok) continue;
+    const dir = norm(sub(wrist, elbow));
+    const hand = add(wrist, mul(dir, 0.05 * U));
+    if (has("feathers")) {
+      for (const a of [-0.55, 0, 0.55]) {
+        const c = Math.cos(a);
+        const s = Math.sin(a) * side;
+        const fd = { x: dir.x * c - dir.y * s, y: dir.x * s + dir.y * c };
+        const q = add(hand, mul(fd, 0.16 * U));
+        out.push({ k: "ellipse", x: q.x, y: q.y, rx: 0.2 * U, ry: 0.09 * U, rot: Math.atan2(fd.y, fd.x), fill: p.hands ?? p.accent, ...ol });
+      }
+    }
+    out.push({ k: "circle", x: hand.x, y: hand.y, r: bb.hand * U, fill: p.hands ?? p.limbs, ...ol });
+  }
+  if (has("wings")) {
+    for (const s of [-1, 1]) {
+      const w = TP([
+        [s * ht * 0.5, 0.05 * U],
+        [s * (ht + 0.85 * U), -0.6 * U],
+        [s * (ht + 0.72 * U), 0.05 * U],
+        [s * (ht + 0.45 * U), -0.02 * U],
+        [s * (ht + 0.3 * U), 0.32 * U],
+        [s * ht * 0.6, 0.55 * U]
+      ]);
+      back.push({ k: "path", d: roundedPolygon(w, 0.18), fill: p.accent, ...ol });
+    }
+  }
+  if (has("cape")) {
+    const yb = L + 0.8 * U;
+    const wb = hb + 0.36 * U;
+    const cape = TP([
+      [-ht * 0.92, y0 + 0.04 * U],
+      [ht * 0.92, y0 + 0.04 * U],
+      [ht + 0.16 * U, L * 0.5],
+      [wb, yb],
+      [wb * 0.5, yb - 0.1 * U],
+      [0, yb],
+      [-wb * 0.5, yb - 0.1 * U],
+      [-wb, yb],
+      [-ht - 0.16 * U, L * 0.5]
+    ]);
+    back.push({ k: "path", d: smoothClosed(cape, 0.6), fill: p.accent, ...ol });
+  }
+  if (has("backpack")) {
+    const c = T(0, 0.35 * U);
+    back.push({ k: "rect", x: c.x, y: c.y, w: ht * 2 + 0.34 * U, h: 0.8 * U, r: 0.16 * U, rot: F.angle, fill: def.extraColors?.[0] ?? p.limbs, ...ol });
+  }
+  if (has("tank")) {
+    const c = T(ht * 0.95, 0.24 * U);
+    const col = def.extraColors?.[0] ?? p.accent;
+    const valve = T(ht * 0.95, -0.3 * U);
+    back.push({ k: "rect", x: valve.x, y: valve.y, w: 0.14 * U, h: 0.16 * U, r: 0.04 * U, rot: F.angle, fill: p.outline });
+    back.push({ k: "rect", x: c.x, y: c.y, w: 0.34 * U, h: 1 * U, r: 0.17 * U, rot: F.angle, fill: col, ...ol });
+  }
+  if (F.hipsOk && !opts.portrait) back.push(...tail(def, F, hb, ow));
+  if (has("tentacles") && F.hipsOk) {
+    for (const s of [-1, 1]) {
+      const pts2 = TP([
+        [s * hb * 0.7, L * 0.9],
+        [s * (hb + 0.22 * U), L + 0.3 * U],
+        [s * (hb + 0.48 * U), L + 0.22 * U],
+        [s * (hb + 0.5 * U), L - 0.02 * U],
+        [s * (hb + 0.34 * U), L - 0.06 * U]
+      ]);
+      back.push({ k: "path", d: smoothOpen(pts2), stroke: p.outline, lw: 0.2 * U + ow * 2 });
+      back.push({ k: "path", d: smoothOpen(pts2), stroke: p.limbs, lw: 0.2 * U });
+    }
+  }
+  const bulge = Math.max(ht, hb) * bb.bulge;
+  if (has("wool")) {
+    for (const [x, y] of [
+      [ht * 0.7, y0 + 0.02 * U],
+      [bulge, L * 0.3],
+      [bulge * 1.02, L * 0.62],
+      [(bulge + hb) / 2, L * 0.92],
+      [hb * 0.55, y1]
+    ])
+      for (const s of [-1, 1]) {
+        const q2 = T(s * x, y);
+        torso.push({ k: "circle", x: q2.x, y: q2.y, r: 0.2 * U, fill: p.body, ...ol });
+      }
+    const q = T(0, y1 + 0.02 * U);
+    torso.push({ k: "circle", x: q.x, y: q.y, r: 0.2 * U, fill: p.body, ...ol });
+  }
+  if (has("robe")) {
+    const yb = L + 0.58 * U;
+    const wb = hb * 1.4;
+    torso.push({
+      k: "path",
+      d: smoothClosed(
+        TP([
+          [-ht, y0],
+          [0, y0 - 0.04 * U],
+          [ht, y0],
+          [bulge, L * 0.55],
+          [wb, yb],
+          [0, yb + 0.06 * U],
+          [-wb, yb],
+          [-bulge, L * 0.55]
+        ]),
+        0.7
+      ),
+      fill: p.body,
+      ...ol
+    });
+    const hem = TP([
+      [-wb * 0.94, yb - 0.1 * U],
+      [0, yb - 0.04 * U],
+      [wb * 0.94, yb - 0.1 * U]
+    ]);
+    torso.push({ k: "path", d: smoothOpen(hem), stroke: def.extraColors?.[0] ?? p.accent, lw: 0.07 * U });
+  } else if (has("sheet")) {
+    const yb = L + 0.78 * U;
+    const wb = hb * 1.3;
+    torso.push({
+      k: "path",
+      d: smoothClosed(
+        TP([
+          [-ht, y0],
+          [ht, y0],
+          [bulge, L * 0.55],
+          [wb, yb],
+          [wb * 0.5, yb - 0.2 * U],
+          [0, yb],
+          [-wb * 0.5, yb - 0.2 * U],
+          [-wb, yb],
+          [-bulge, L * 0.55]
+        ]),
+        0.9
+      ),
+      fill: p.body,
+      ...ol
+    });
+  } else {
+    torso.push({
+      k: "path",
+      d: smoothClosed(
+        TP([
+          [-ht, y0],
+          [0, y0 - 0.04 * U],
+          [ht, y0],
+          [bulge, L * 0.55],
+          [hb, y1],
+          [0, y1 + 0.03 * U],
+          [-hb, y1],
+          [-bulge, L * 0.55]
+        ]),
+        0.85
+      ),
+      fill: p.body,
+      ...ol
+    });
+  }
+  const minW = Math.min(ht, hb);
+  if (has("pocket")) {
+    const c = T(0, L * 0.74);
+    torso.push({ k: "rect", x: c.x, y: c.y, w: minW * 1.3, h: 0.3 * U, r: 0.1 * U, rot: F.angle, fill: p.belly, stroke: p.outline, lw: ow * 0.8 });
+  } else if (has("racing-stripe")) {
+    for (const x of [-0.1, 0.1]) {
+      const a = T(x * U, y0 + 0.02 * U);
+      const b = T(x * U, y1 - 0.04 * U);
+      torso.push({ k: "line", pts: [a.x, a.y, b.x, b.y], stroke: p.belly, lw: 0.1 * U });
+    }
+  } else if (p.belly && p.belly !== p.body && !has("panel") && !has("sheet") && !has("stripes")) {
+    const c = T(0, L * 0.58);
+    torso.push({ k: "ellipse", x: c.x, y: c.y, rx: minW * 0.64, ry: Math.max(L * 0.36, 0.2 * U), rot: F.angle, fill: p.belly });
+  }
+  if (has("spots")) {
+    const c = def.extraColors?.[1] ?? p.belly;
+    for (const [x, y, rr] of [
+      [-0.55, 0.35, 0.09],
+      [0.5, 0.62, 0.11],
+      [-0.35, 0.86, 0.07]
+    ]) {
+      const q = T(x * minW, y * L);
+      torso.push({ k: "circle", x: q.x, y: q.y, r: rr * U, fill: c });
+    }
+  }
+  if (has("stripes")) {
+    const c = def.extraColors?.[1] ?? p.accent;
+    for (const y of [0.22, 0.44, 0.66]) {
+      const a = T(-minW * 0.98, L * y);
+      const b = T(minW * 0.98, L * y);
+      torso.push({ k: "line", pts: [a.x, a.y, b.x, b.y], stroke: c, lw: 0.1 * U });
+    }
+  }
+  if (has("straps")) {
+    const c = def.extraColors?.[1] ?? p.outline;
+    for (const s of [-1, 1]) {
+      const a = T(s * ht * 0.62, y0 + 0.02 * U);
+      const b = T(s * minW * 0.62, L * 0.72);
+      torso.push({ k: "line", pts: [a.x, a.y, b.x, b.y], stroke: p.outline, lw: 0.13 * U + ow * 2 });
+      torso.push({ k: "line", pts: [a.x, a.y, b.x, b.y], stroke: c, lw: 0.13 * U });
+    }
+  }
+  if (has("belt")) {
+    const c = T(0, L * 0.9);
+    torso.push({ k: "rect", x: c.x, y: c.y, w: hb * 1.92, h: 0.17 * U, r: 0.06 * U, rot: F.angle, fill: def.extraColors?.[2] ?? "#4a3426", ...ol });
+    torso.push({ k: "rect", x: c.x, y: c.y, w: 0.2 * U, h: 0.19 * U, r: 0.04 * U, rot: F.angle, fill: "#ffd84a", ...ol });
+  }
+  if (has("emblem")) {
+    const c = T(0, L * 0.4);
+    const fill = def.extraColors?.[0] ?? p.accent;
+    const shield = roundedPolygon(
+      [
+        { x: -0.22, y: -0.2 },
+        { x: 0.22, y: -0.2 },
+        { x: 0.22, y: 0.04 },
+        { x: 0, y: 0.26 },
+        { x: -0.22, y: 0.04 }
+      ],
+      0.25
+    );
+    torso.push({
+      k: "group",
+      x: c.x,
+      y: c.y,
+      rot: F.angle,
+      s: U,
+      items: [
+        { k: "path", d: shield, fill, stroke: p.outline, lw: ow / U },
+        { k: "group", x: 0, y: 0.01, s: 0.12, items: [{ k: "path", d: STAR, fill: fill === p.accent ? "#ffffff" : p.accent }] }
+      ]
+    });
+  }
+  if (has("panel")) {
+    const c = T(0, L * 0.5);
+    torso.push({ k: "rect", x: c.x, y: c.y, w: minW * 1.2, h: 0.38 * U, r: 0.1 * U, rot: F.angle, fill: "#24323d", ...ol });
+    const lights = def.extraColors ?? ["#ff7a6b", "#fbd46a", "#7ff0ff"];
+    lights.slice(0, 3).forEach((col, i) => {
+      const q = T((i - 1) * minW * 0.34, L * 0.5);
+      torso.push({ k: "circle", x: q.x, y: q.y, r: 0.075 * U, fill: col });
+    });
+  }
+  if (has("badge")) {
+    const c = T(-minW * 0.42, L * 0.36);
+    torso.push({ k: "circle", x: c.x, y: c.y, r: 0.15 * U, fill: p.accent, ...ol });
+    torso.push({ k: "group", x: c.x, y: c.y, rot: F.angle, s: 0.09 * U, items: [{ k: "path", d: STAR, fill: "#ffffff" }] });
+  }
+  if (has("star")) {
+    const c = T(-minW * 0.5, L * 0.3);
+    const k = 0.15 * U;
+    torso.push({ k: "group", x: c.x, y: c.y, rot: F.angle - 0.2, s: k, items: [{ k: "path", d: STAR, fill: def.extraColors?.[0] ?? "#ffd84a", stroke: p.outline, lw: ow * 0.8 / k }] });
+  }
+  if (has("scarf")) {
+    const y = Math.max(0.04, bb.head * (1 - bb.neck) - 0.06) * U;
+    const c = T(0, y);
+    const col = def.extraColors?.[0] ?? p.accent;
+    const tailEnd = T(ht * 0.45, y + 0.28 * U);
+    torso.push({ k: "rect", x: tailEnd.x, y: tailEnd.y, w: 0.16 * U, h: 0.42 * U, r: 0.06 * U, rot: F.angle + 0.15, fill: col, ...ol });
+    torso.push({ k: "rect", x: c.x, y: c.y, w: ht * 2.05, h: 0.2 * U, r: 0.1 * U, rot: F.angle, fill: col, ...ol });
+  }
+  const head = { k: "group", x: F.head.x, y: F.head.y, rot: F.headRot, s: F.headR, items: cachedHead(def, ow / F.headR) };
+  return [...back, ...legs, ...torso, ...arms, head, ...front];
+}
+var headCache = /* @__PURE__ */ new WeakMap();
+var HEAD_CACHE_SIZE = 64;
+function cachedHead(def, ow) {
+  const key = Number(ow.toPrecision(4));
+  let byOutline = headCache.get(def);
+  if (!byOutline) headCache.set(def, byOutline = /* @__PURE__ */ new Map());
+  let shapes = byOutline.get(key);
+  if (!shapes) {
+    if (byOutline.size >= HEAD_CACHE_SIZE) byOutline.clear();
+    byOutline.set(key, shapes = headShapes(def, key));
+  }
+  return shapes;
+}
+function foot(def, ankle, F, side, ow, k) {
+  const p = def.palette;
+  const { d, r } = F;
+  const U = F.U * k;
+  const c = add(add(ankle, mul(d, 0.07 * U)), mul(r, side * 0.06 * U));
+  const ol = { stroke: p.outline, lw: ow };
+  const fill = p.feet ?? p.limbs;
+  if (def.bodyExtras.includes("fins")) {
+    const fin = roundedPolygon(
+      [
+        { x: -0.13, y: -0.06 },
+        { x: 0.13, y: -0.06 },
+        { x: 0.24, y: 0.46 },
+        { x: -0.24, y: 0.46 }
+      ],
+      0.22
+    );
+    return {
+      k: "group",
+      x: c.x,
+      y: c.y,
+      rot: F.angle,
+      s: U,
+      items: [
+        { k: "path", d: fin, fill, stroke: p.outline, lw: ow / U },
+        { k: "line", pts: [0, 0.06, 0, 0.38], stroke: p.outline, lw: ow / U, alpha: 0.5 }
+      ]
+    };
+  }
+  if (def.bodyExtras.includes("flippers")) return { k: "ellipse", x: c.x, y: c.y, rx: 0.27 * U, ry: 0.11 * U, rot: F.angle, fill, ...ol };
+  if (def.bodyExtras.includes("boots")) return { k: "rect", x: c.x, y: c.y, w: 0.4 * U, h: 0.24 * U, r: 0.09 * U, rot: F.angle, fill, ...ol };
+  return { k: "ellipse", x: c.x, y: c.y, rx: 0.2 * U, ry: 0.13 * U, rot: F.angle, fill, ...ol };
+}
+function tail(def, F, hb, ow) {
+  const p = def.palette;
+  const { U, L, S, r, d } = F;
+  const T = (x, y) => ({ x: S.x + r.x * x + d.x * y, y: S.y + r.y * x + d.y * y });
+  const TP = (pts2) => pts2.map(([x, y]) => T(x, y));
+  const ol = { stroke: p.outline, lw: ow };
+  const stroke = (pts2, w, color) => [
+    { k: "path", d: smoothOpen(pts2), stroke: p.outline, lw: w + ow * 2 },
+    { k: "path", d: smoothOpen(pts2), stroke: color, lw: w }
+  ];
+  const out = [];
+  switch (def.tail) {
+    case "none":
+      break;
+    case "fluffy": {
+      const pts2 = TP([
+        [hb * 0.5, L * 0.95],
+        [hb + 0.28 * U, L * 1],
+        [hb + 0.72 * U, L * 0.62],
+        [hb + 0.78 * U, L * 0.12],
+        [hb + 0.52 * U, L * 0.32],
+        [hb + 0.3 * U, L * 0.6],
+        [hb * 0.6, L * 0.7]
+      ]);
+      out.push({ k: "path", d: smoothClosed(pts2), fill: p.body, ...ol });
+      const tip = T(hb + 0.72 * U, L * 0.2);
+      out.push({ k: "ellipse", x: tip.x, y: tip.y, rx: 0.13 * U, ry: 0.2 * U, rot: F.angle + 0.25, fill: p.belly, ...ol });
+      break;
+    }
+    case "brush": {
+      const pts2 = TP([
+        [hb * 0.4, L * 0.98],
+        [hb + 0.42 * U, L * 1.06],
+        [hb + 0.98 * U, L * 0.66],
+        [hb + 1.06 * U, L * 0.12],
+        [hb + 0.86 * U, -0.04 * U],
+        [hb + 0.66 * U, L * 0.36],
+        [hb + 0.3 * U, L * 0.66],
+        [hb * 0.5, L * 0.68]
+      ]);
+      out.push({ k: "path", d: smoothClosed(pts2), fill: p.body, ...ol });
+      const tip = TP([
+        [hb + 1.03 * U, L * 0.36],
+        [hb + 1.06 * U, L * 0.12],
+        [hb + 0.86 * U, -0.04 * U],
+        [hb + 0.72 * U, L * 0.24],
+        [hb + 0.86 * U, L * 0.34]
+      ]);
+      out.push({ k: "path", d: smoothClosed(tip), fill: p.belly, ...ol });
+      break;
+    }
+    case "pom": {
+      const c = T(hb + 0.06 * U, L * 0.88);
+      out.push({ k: "circle", x: c.x, y: c.y, r: 0.2 * U, fill: p.belly, ...ol });
+      break;
+    }
+    case "long":
+    case "striped":
+    case "tuft": {
+      const pts2 = TP([
+        [hb * 0.6, L * 0.9],
+        [hb + 0.35 * U, L * 0.85],
+        [hb + 0.58 * U, L * 0.4],
+        [hb + 0.5 * U, -0.02 * U]
+      ]);
+      out.push(...stroke(pts2, 0.14 * U, p.body));
+      if (def.tail === "tuft") {
+        const end = pts2[pts2.length - 1];
+        out.push({ k: "circle", x: end.x, y: end.y, r: 0.16 * U, fill: def.extraColors?.[0] ?? p.accent, ...ol });
+      }
+      if (def.tail === "striped") {
+        for (const t of [0.35, 0.6, 0.85]) {
+          const q = T(hb + 0.35 * U + (0.58 - 0.35) * U * (t * 1.4 > 1 ? 1 : t * 1.4), L * (0.85 - (0.85 - 0) * t));
+          out.push({ k: "line", pts: [q.x - r.x * 0.08 * U, q.y - r.y * 0.08 * U, q.x + r.x * 0.08 * U, q.y + r.y * 0.08 * U], stroke: def.extraColors?.[0] ?? p.outline, lw: 0.06 * U });
+        }
+        const end = pts2[pts2.length - 1];
+        out.push({ k: "circle", x: end.x, y: end.y, r: 0.07 * U, fill: def.extraColors?.[0] ?? p.outline });
+      }
+      break;
+    }
+    case "curl": {
+      const pts2 = TP([
+        [hb * 0.6, L * 0.9],
+        [hb + 0.4 * U, L * 0.88],
+        [hb + 0.62 * U, L * 0.45],
+        [hb + 0.5 * U, L * 0.12],
+        [hb + 0.3 * U, L * 0.24],
+        [hb + 0.36 * U, L * 0.42]
+      ]);
+      out.push(...stroke(pts2, 0.12 * U, p.limbs));
+      break;
+    }
+    case "fish": {
+      const line = TP([
+        [hb * 0.6, L * 0.9],
+        [hb + 0.36 * U, L * 0.86],
+        [hb + 0.6 * U, L * 0.5]
+      ]);
+      out.push(...stroke(line, 0.17 * U, p.body));
+      const tip = line[line.length - 1];
+      const fin = roundedPolygon(
+        [
+          { x: 0, y: 0.06 },
+          { x: -0.26, y: -0.34 },
+          { x: 0.02, y: -0.12 },
+          { x: 0.32, y: -0.3 }
+        ],
+        0.2
+      );
+      out.push({ k: "group", x: tip.x, y: tip.y, rot: F.angle + 0.35, s: U, items: [{ k: "path", d: fin, fill: p.body, stroke: p.outline, lw: ow / U }] });
+      break;
+    }
+    case "plume": {
+      const cols = def.extraColors ?? [p.accent];
+      [0, 1, 2].forEach((i) => {
+        const c = T(hb + (0.12 + i * 0.13) * U, L + (0.32 - i * 0.06) * U);
+        out.push({ k: "ellipse", x: c.x, y: c.y, rx: 0.11 * U, ry: 0.44 * U, rot: F.angle - 0.55 + i * 0.28, fill: cols[(i + 1) % cols.length], ...ol });
+      });
+      break;
+    }
+    case "spiky":
+    case "arrow": {
+      const pts2 = TP([
+        [hb * 0.3, L * 0.55],
+        [hb + 0.35 * U, L * 0.68],
+        [hb + 0.95 * U, L * 0.86],
+        [hb + 0.35 * U, L * 1.08],
+        [hb * 0.3, L * 1.08]
+      ]);
+      if (def.tail === "spiky") {
+        for (const t of [0.15, 0.45, 0.72]) {
+          const x = hb + (0.2 + t * 0.7) * U;
+          const y = L * (0.66 + t * 0.19);
+          out.push({ k: "path", d: roundedPolygon(TP([[x - 0.12 * U, y + 0.05 * U], [x, y - 0.2 * U], [x + 0.12 * U, y + 0.07 * U]]), 0.2), fill: p.accent, ...ol });
+        }
+        out.push({ k: "path", d: smoothClosed(pts2, 0.7), fill: p.body, ...ol });
+      } else {
+        const line = TP([
+          [hb * 0.6, L * 0.9],
+          [hb + 0.4 * U, L * 0.92],
+          [hb + 0.62 * U, L * 0.5],
+          [hb + 0.62 * U, L * 0.18]
+        ]);
+        out.push(...stroke(line, 0.13 * U, p.body));
+        const tip = line[line.length - 1];
+        out.push({ k: "group", x: tip.x, y: tip.y, rot: F.angle, s: U, items: [{ k: "path", d: roundedPolygon([{ x: -0.15, y: 0.04 }, { x: 0, y: -0.22 }, { x: 0.15, y: 0.04 }], 0.2), fill: p.accent, stroke: p.outline, lw: ow / U }] });
+      }
+      break;
+    }
+  }
+  return out;
+}
+
+// ../avatars/src/poses.ts
+var STAND = {
+  nose: [0, -0.62],
+  leftShoulder: [-0.42, 0],
+  rightShoulder: [0.42, 0],
+  leftElbow: [-0.58, 0.5],
+  rightElbow: [0.58, 0.5],
+  leftWrist: [-0.66, 0.98],
+  rightWrist: [0.66, 0.98],
+  leftHip: [-0.27, 1],
+  rightHip: [0.27, 1],
+  leftKnee: [-0.31, 1.6],
+  rightKnee: [0.31, 1.6],
+  leftAnkle: [-0.33, 2.18],
+  rightAnkle: [0.33, 2.18]
+};
+function poseBody(spec, { cx = 0.5, cy = 0.36, T = 0.18 } = {}) {
+  const s = { ...STAND, ...spec };
+  const b = new Array(LANDMARKS * 3).fill(0);
+  const set = (i, [x, y], v = 0.99) => {
+    b[i * 3] = cx + x * T;
+    b[i * 3 + 1] = cy + y * T;
+    b[i * 3 + 2] = v;
+  };
+  for (const key of Object.keys(P)) set(P[key], s[key]);
+  const tilt = s.tilt ?? 0;
+  const around = (dx, dy) => [s.nose[0] + dx * Math.cos(tilt) - dy * Math.sin(tilt), s.nose[1] + dx * Math.sin(tilt) + dy * Math.cos(tilt)];
+  set(FACE.leftEye, around(-0.1, -0.08));
+  set(FACE.rightEye, around(0.1, -0.08));
+  set(FACE.leftEar, around(-0.22, -0.02));
+  set(FACE.rightEar, around(0.22, -0.02));
+  return b;
+}
+var neutralPose = () => poseBody({});
+
+// ../avatars/src/interpolate.ts
+var SEEN = 0.5;
+var JUMP = 0.15;
+var BodyInterpolator = class {
+  constructor(o = {}) {
+    __publicField(this, "tracks", /* @__PURE__ */ new Map());
+    /** Page clock minus sender clock, at its smallest (the fastest delivery): NaN before the first body. */
+    __publicField(this, "offset", NaN);
+    __publicField(this, "lastArrival", NaN);
+    /** The time between bodies (sender's clock), smoothed. */
+    __publicField(this, "interval", 33);
+    __publicField(this, "lastT", NaN);
+    __publicField(this, "lostMs");
+    __publicField(this, "maxExtrapolateMs");
+    this.lostMs = o.lostMs ?? 250;
+    this.maxExtrapolateMs = o.maxExtrapolateMs ?? 25;
+  }
+  /** The time between bodies the drawing is behind by, in ms. */
+  get delayMs() {
+    return this.interval;
+  }
+  /**
+   * A new body for this player, taken at t (the sender's clock), arriving now (this page's clock, by default
+   * performance.now()). Bodies for several players of one camera frame share t.
+   */
+  push(player, t, body, arrival = now()) {
+    if (!Number.isFinite(t)) t = arrival;
+    this.clock(t, arrival);
+    const tr = this.tracks.get(player);
+    if (!tr || t - tr.tb > this.lostMs || t < tr.tb - this.lostMs || body.length !== tr.b.length) {
+      this.tracks.set(player, { a: null, ta: t, b: body, tb: t, out: null, outAt: NaN });
+      return;
+    }
+    if (body === tr.b || t <= tr.tb) {
+      if (t === tr.tb && body !== tr.b) tr.b = body, tr.out = null;
+      return;
+    }
+    tr.a = tr.b;
+    tr.ta = tr.tb;
+    tr.b = body;
+    tr.tb = t;
+    tr.out = null;
+  }
+  /** The player's body to draw at time now (this page's clock); null for a player never pushed or forgotten. */
+  at(player, at = now()) {
+    const tr = this.tracks.get(player);
+    if (!tr) return null;
+    if (!tr.a) return tr.b;
+    if (tr.out && tr.outAt === at) return tr.out;
+    const rt = at - this.offset - this.interval;
+    const span = tr.tb - tr.ta;
+    const ahead = Math.min(span * 0.5, this.maxExtrapolateMs);
+    const u = Math.min(Math.max((rt - tr.ta) / span, 0), 1 + ahead / span);
+    tr.out = blend(tr.a, tr.b, u);
+    tr.outAt = at;
+    return tr.out;
+  }
+  /** A player gone: their next body starts afresh. */
+  forget(player) {
+    this.tracks.delete(player);
+  }
+  /** Every player gone (a new scene). */
+  clear() {
+    this.tracks.clear();
+  }
+  clock(t, arrival) {
+    const o = arrival - t;
+    if (!Number.isFinite(this.offset) || o < this.offset || o > this.offset + 1e3) this.offset = o;
+    else if (Number.isFinite(this.lastArrival)) this.offset += Math.min(o - this.offset, (arrival - this.lastArrival) / 1e3);
+    this.lastArrival = arrival;
+    if (Number.isFinite(this.lastT) && t > this.lastT) {
+      const dt = t - this.lastT;
+      if (dt < this.interval * 3 + 20) this.interval += (Math.min(Math.max(dt, 8), 100) - this.interval) * 0.1;
+    }
+    if (!(t <= this.lastT)) this.lastT = t;
+  }
+};
+var now = () => globalThis.performance?.now() ?? Date.now();
+function blend(a, b, u) {
+  const out = b.slice();
+  const near = u < 0.5 ? a : b;
+  for (let i = 0; i + 2 < b.length; i += 3) {
+    const ax = a[i];
+    const ay = a[i + 1];
+    const bx = b[i];
+    const by = b[i + 1];
+    if (a[i + 2] >= SEEN && b[i + 2] >= SEEN && Math.abs(bx - ax) + Math.abs(by - ay) < JUMP) {
+      out[i] = ax + (bx - ax) * u;
+      out[i + 1] = ay + (by - ay) * u;
+      out[i + 2] = a[i + 2] + (b[i + 2] - a[i + 2]) * Math.min(u, 1);
+    } else {
+      out[i] = near[i];
+      out[i + 1] = near[i + 1];
+      out[i + 2] = near[i + 2];
+    }
+  }
+  return out;
+}
+
+// ../avatars/src/index.ts
+var AVATAR_IDS = AVATARS.map((a) => a.id);
+var BY_ID = new Map(AVATARS.map((a) => [a.id, a]));
+var DEFAULT_AVATAR = BY_ID.get("fox");
+var isAvatarId = (v) => typeof v === "string" && BY_ID.has(v);
+var avatarById = (id) => BY_ID.get(id);
+var resolve = (def) => typeof def === "string" ? BY_ID.get(def) ?? DEFAULT_AVATAR : def;
+function drawAvatar(ctx, body, def, box, opts = {}) {
+  const shapes = avatarShapes(body, resolve(def), box, { mirrored: opts.mirrored });
+  if (!shapes.length) return false;
+  ctx.save();
+  if (opts.alpha !== void 0) ctx.globalAlpha *= Math.min(Math.max(opts.alpha, 0), 1);
+  drawShapes(ctx, shapes);
+  ctx.restore();
+  return true;
+}
+function iconShapes(def, size) {
+  const d = resolve(def);
+  const body = neutralPose();
+  const band = bodyBand(d);
+  const unit = frameOf(body, { x: 0, y: 0, w: 1, h: 1 }, { band });
+  const top = -bounds(headShapes(d, 0.05)).minY;
+  const headR = Math.min(0.27, 0.43 / Math.max(top, 1)) * size;
+  const k = headR / BAND_BODY[band].head / unit.U;
+  const cy = 0.5 * size + Math.min(0, (top - 1.6) * 0.06 * size);
+  const box = { x: size / 2 - unit.head.x * k, y: cy - unit.head.y * k, w: k, h: k };
+  return avatarShapes(body, d, box, { portrait: true });
+}
+function smoothBody(prev, next, amount = 0.5) {
+  if (!prev || prev.length !== next.length) return next.slice();
+  const out = next.slice();
+  for (let i = 0; i + 2 < next.length; i += 3) {
+    const pv = prev[i + 2];
+    const nv = next[i + 2];
+    const wasSeen = pv >= 0.5;
+    const isSeen = nv >= 0.5;
+    if (wasSeen && nv >= 0.3) out[i + 2] = Math.max(nv, 0.5);
+    if (wasSeen && isSeen && Math.hypot(next[i] - prev[i], next[i + 1] - prev[i + 1]) < 0.15) {
+      out[i] = prev[i] + (next[i] - prev[i]) * amount;
+      out[i + 1] = prev[i + 1] + (next[i + 1] - prev[i + 1]) * amount;
+    } else if (wasSeen && !isSeen && out[i + 2] >= 0.5) {
+      out[i] = prev[i];
+      out[i + 1] = prev[i + 1];
+    }
+  }
+  smoothFace(prev, next, out, amount * FACE_SMOOTHING);
+  return out;
+}
+var FACE_SMOOTHING = 0.35;
+var FACE_POINTS = 11;
+function smoothFace(prev, next, out, amount) {
+  const ls = P.leftShoulder * 3;
+  const rs = P.rightShoulder * 3;
+  const seen = (b, i) => b[i + 2] >= 0.5;
+  if (!seen(prev, ls) || !seen(prev, rs) || !seen(next, ls) || !seen(next, rs)) return;
+  const mid2 = (b, k) => (b[ls + k] + b[rs + k]) / 2;
+  const prevS = [mid2(prev, 0), mid2(prev, 1)];
+  const nextS = [mid2(next, 0), mid2(next, 1)];
+  const outS = [mid2(out, 0), mid2(out, 1)];
+  for (let p = 0; p < FACE_POINTS && p * 3 + 2 < next.length; p++) {
+    const i = p * 3;
+    if (!seen(prev, i) || !seen(next, i)) continue;
+    const po = [prev[i] - prevS[0], prev[i + 1] - prevS[1]];
+    const no = [next[i] - nextS[0], next[i + 1] - nextS[1]];
+    if (Math.hypot(no[0] - po[0], no[1] - po[1]) >= 0.15) continue;
+    out[i] = outS[0] + po[0] + (no[0] - po[0]) * amount;
+    out[i + 1] = outS[1] + po[1] + (no[1] - po[1]) * amount;
+  }
+}
+function bounds(shapes) {
+  const b = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
+  const addPt = (x, y) => {
+    b.minX = Math.min(b.minX, x);
+    b.minY = Math.min(b.minY, y);
+    b.maxX = Math.max(b.maxX, x);
+    b.maxY = Math.max(b.maxY, y);
+  };
+  for (const s of shapes) {
+    const pad = "lw" in s && s.stroke ? (s.lw ?? 1) / 2 : 0;
+    switch (s.k) {
+      case "circle":
+        addPt(s.x - s.r - pad, s.y - s.r - pad);
+        addPt(s.x + s.r + pad, s.y + s.r + pad);
+        break;
+      case "ellipse":
+      case "rect": {
+        const rx = s.k === "ellipse" ? s.rx : s.w / 2;
+        const ry = s.k === "ellipse" ? s.ry : s.h / 2;
+        const r = Math.max(rx, ry) + pad;
+        addPt(s.x - r, s.y - r);
+        addPt(s.x + r, s.y + r);
+        break;
+      }
+      case "path": {
+        const n = pathPoints(s.d);
+        for (let i = 0; i + 1 < n.length; i += 2) addPt(n[i] - pad, n[i + 1] - pad), addPt(n[i] + pad, n[i + 1] + pad);
+        break;
+      }
+      case "line":
+        for (let i = 0; i + 1 < s.pts.length; i += 2) addPt(s.pts[i] - pad, s.pts[i + 1] - pad), addPt(s.pts[i] + pad, s.pts[i + 1] + pad);
+        break;
+      case "group": {
+        const inner = bounds(s.items);
+        if (!Number.isFinite(inner.minX)) break;
+        const k = s.s ?? 1;
+        const c = Math.cos(s.rot ?? 0);
+        const sn = Math.sin(s.rot ?? 0);
+        for (const [x, y] of [
+          [inner.minX, inner.minY],
+          [inner.maxX, inner.minY],
+          [inner.minX, inner.maxY],
+          [inner.maxX, inner.maxY]
+        ])
+          addPt(s.x + (x * c - y * sn) * k, s.y + (x * sn + y * c) * k);
+        break;
+      }
+    }
+  }
+  return b;
+}
+
+// src/avatars.ts
+var frameTime = () => {
+  const t = typeof document !== "undefined" ? document.timeline?.currentTime : null;
+  return typeof t === "number" && Number.isFinite(t) ? t : globalThis.performance?.now() ?? Date.now();
+};
+var clockNow = () => globalThis.performance?.now() ?? Date.now();
+var AvatarBook = class {
+  /** now: this frame's time (tests). */
+  constructor(now2 = frameTime) {
+    __publicField(this, "now", now2);
+    __publicField(this, "known", /* @__PURE__ */ new Map());
+    __publicField(this, "smoothed", /* @__PURE__ */ new Map());
+    /** When each body of the host's frames was taken (the frame's t) and arrived. */
+    __publicField(this, "times", /* @__PURE__ */ new WeakMap());
+    __publicField(this, "lerp", new BodyInterpolator());
+    /** Animation frames something was drawn in, for stats. */
+    __publicField(this, "drawnAt", NaN);
+    __publicField(this, "drawn", 0);
+    /**
+     * A player's smoothed body (see Play.smoothedBody): a frame's body smoothed for its player and interpolated for
+     * this animation frame, or a player id's (null if none yet).
+     */
+    __publicField(this, "smoothedBody", (who, options = {}) => {
+      const interpolate = options.interpolate !== false;
+      if (typeof who === "number") {
+        const last = this.smoothed.get(who);
+        if (!last) return null;
+        return interpolate ? this.lerp.at(who, this.tick()) ?? last.body : last.body;
+      }
+      if (typeof who !== "object" || who === null || !Array.isArray(who.body)) return null;
+      return this.posed(who.id, who.body, smoothAmount(options.smooth), interpolate);
+    });
+  }
+  /** Every frame from the host: the latest avatar of each player, and when their bodies were taken (t). */
+  note(players, t, arrival = clockNow()) {
+    for (const p of players) {
+      this.known.set(p.id, this.resolve(p.id, p.avatar));
+      if (t !== void 0 && Number.isFinite(t) && Array.isArray(p.body)) this.times.set(p.body, { t, arrival });
+    }
+  }
+  /**
+   * The avatar id of a player (an id, 1-based, or a frame): the one the child picked, or the default of the slot
+   * (fox, lion, dragon, unicorn: the 6–8 band's, as no age is known here) before the first frame, from an older host, or for an id this SDK doesn't know.
+   */
+  of(player) {
+    if (typeof player === "object" && player !== null) return player.avatar !== void 0 ? this.resolve(player.id, player.avatar) : this.of(player.id);
+    return this.known.get(player) ?? defaultAvatarFor(player - 1);
+  }
+  /**
+   * The body to draw for this player now: body smoothed (amount below 1) against the player's previous one, then,
+   * with interpolate, at this animation frame's time between the last two.
+   */
+  posed(player, body, amount, interpolate = true) {
+    const sample = this.smooth(player, body, amount);
+    return interpolate ? this.lerp.at(player, this.tick()) ?? sample : sample;
+  }
+  /** body smoothed against this player's previous one; the same body twice in a row is smoothed once. */
+  smooth(player, body, amount) {
+    const last = this.smoothed.get(player);
+    if (last && last.raw === body && last.amount === amount) return last.body;
+    if (last && last.amount !== amount) this.lerp.forget(player);
+    const next = amount < 1 ? smoothBody(last?.body, body, amount) : body;
+    this.smoothed.set(player, { raw: body, body: next, amount });
+    const at = this.times.get(body);
+    const arrival = at?.arrival ?? clockNow();
+    this.lerp.push(player, at?.t ?? arrival, next, arrival);
+    return next;
+  }
+  /**
+   * Animation frames the avatars were drawn in, since the last call; for stats. Frames are
+   * told apart by their time, so any number of avatars or calls in one frame count once.
+   */
+  takeDrawn() {
+    const n = this.drawn;
+    this.drawn = 0;
+    return n;
+  }
+  tick() {
+    const t = this.now();
+    if (t !== this.drawnAt) {
+      this.drawnAt = t;
+      this.drawn++;
+    }
+    return t;
+  }
+  resolve(id, avatar) {
+    return isAvatarId(avatar) ? avatar : defaultAvatarFor(id - 1);
+  }
+};
+function defaultBox(ctx, view) {
+  const t = typeof ctx.getTransform === "function" ? ctx.getTransform() : null;
+  const sx = t ? Math.hypot(t.a, t.b) || 1 : 1;
+  const sy = t ? Math.hypot(t.c, t.d) || 1 : 1;
+  const w = (ctx.canvas?.width ?? 0) / sx;
+  const h = (ctx.canvas?.height ?? 0) / sy;
+  return view ? { x: view.x * w, y: view.y * h, w: view.w * w, h: view.h * h } : { x: 0, y: 0, w, h };
+}
+var smoothAmount = (smooth) => smooth === false ? 1 : typeof smooth === "number" ? Math.min(Math.max(smooth, 0.05), 1) : 0.5;
+function avatarDrawer(book, scene) {
+  return (ctx, who, player, box, options = {}) => {
+    const frame = Array.isArray(who) ? null : who;
+    const body = frame ? frame.body : who;
+    if (!Array.isArray(body)) return null;
+    const avatar = typeof player === "string" ? player : book.of(typeof player === "number" ? player : frame ?? 1);
+    const id = typeof player === "number" ? player : frame?.id;
+    const posed = id !== void 0 ? book.posed(id, body, smoothAmount(options.smooth), options.interpolate !== false) : body;
+    return drawAvatar(ctx, posed, avatar, box ?? defaultBox(ctx, scene().view), options.alpha !== void 0 ? { alpha: options.alpha } : {}) ? posed : null;
+  };
+}
+
+// src/easy.ts
+function easy(connecting) {
+  const listeners = /* @__PURE__ */ new Map();
+  const emit = (event, data) => listeners.get(event)?.forEach((l) => l(data));
+  let play = null;
+  const queue = [];
+  const withPlay = (fn) => play ? fn(play) : queue.push(fn);
+  const early = new AvatarBook();
+  const drawEarly = avatarDrawer(early, () => ({ view: null }));
+  void connecting.then((p) => {
+    play = p;
+    const shapes = /* @__PURE__ */ new Map();
+    p.on("gesture", (g) => emit(g.gesture, { player: g.player }));
+    p.on("pause", (m) => emit("pause", { reason: m.reason === "distance" ? "distance" : "user" }));
+    p.on("resume", () => emit("resume", {}));
+    p.on("break-start", () => emit("break-start", {}));
+    p.on("break-done", (m) => emit("break-end", { shown: m.shown }));
+    p.onBackdrop((backdrop, view) => emit("backdrop", { backdrop, view }));
+    p.on("frame", (f2) => {
+      emit("players", { players: f2.players });
+      for (const pl of f2.players) {
+        emit("hands", { player: pl.id, left: pl.leftHand, right: pl.rightHand });
+        if (shapes.get(pl.id) !== pl.shape) {
+          shapes.set(pl.id, pl.shape);
+          emit("shape", { player: pl.id, shape: pl.shape });
+        }
+      }
+    });
+    emit("start", startInfo(p));
+    queue.splice(0).forEach((fn) => fn(p));
+  });
+  return {
+    on(event, listener) {
+      const set = listeners.get(event) ?? /* @__PURE__ */ new Set();
+      listeners.set(event, set);
+      set.add(listener);
+      if (event === "start" && play) listener(startInfo(play));
+      return () => void set.delete(listener);
+    },
+    ready: () => withPlay((p) => p.ready()),
+    score: (score, player = 1) => withPlay((p) => p.score(player, score)),
+    break: (reason) => new Promise((resolve2) => withPlay((p) => void p.break(reason).then(resolve2))),
+    end: (score) => withPlay(
+      (p) => p.end(typeof score === "number" ? [{ player: 1, score, stars: 2 }] : score.map((s) => ({ player: s.player, score: s.score, stars: s.stars ?? 2 })))
+    ),
+    keys: (map, options) => withPlay((p) => void keyboard(p, map, options)),
+    pointer: (options) => withPlay((p) => void pointer(p, options)),
+    get view() {
+      return play?.view ?? null;
+    },
+    get device() {
+      return play?.device ?? null;
+    },
+    reportStats: (s) => play?.reportStats(s),
+    toScreen: (p) => play ? play.toScreen(p) : toScreen(null, p),
+    avatarOf: (player) => play ? play.avatarOf(player) : early.of(player),
+    drawAvatar: (...args) => play ? play.drawAvatar(...args) : drawEarly(...args),
+    smoothedBody: (...args) => play ? play.smoothedBody(...args) : early.smoothedBody(...args)
+  };
+}
+var startInfo = (p) => ({ ageRange: p.ageRange, players: p.players, locale: p.locale, mode: p.mode, backdrop: p.backdrop, view: p.view, device: p.device });
+
+// src/index.ts
+var windowChannel = (win = window) => ({
+  post: (m) => win.parent.postMessage(m, "*"),
+  // Only the screen that embeds the game speaks to it.
+  listen: (l) => win.addEventListener("message", (e) => e.source === win.parent && l(e.data))
+});
+var INIT_TIMEOUT_MS = 1e4;
+var STATS_MS = 1e3;
+function connect(channel = windowChannel()) {
+  return new Promise((resolve2, reject) => {
+    const listeners = /* @__PURE__ */ new Map();
+    const breaks = [];
+    let started = false;
+    let backdrop = "none";
+    let view = null;
+    const backdropListeners = /* @__PURE__ */ new Set();
+    const avatars = new AvatarBook();
+    const drawAvatar2 = avatarDrawer(avatars, () => ({ view }));
+    const smoothedBody = avatars.smoothedBody;
+    const timer = setTimeout(() => reject(new Error("Fabi Play: no host, is the game opened from Fabi Play?")), INIT_TIMEOUT_MS);
+    channel.listen((data) => {
+      if (typeof data !== "object" || data === null || data.ns !== NS) return;
+      const m = data;
+      if (m.type === "init" && !started) {
+        if (m.v !== PROTOCOL_VERSION) {
+          clearTimeout(timer);
+          return reject(new Error(`Fabi Play: protocol ${m.v}, this SDK speaks ${PROTOCOL_VERSION}`));
+        }
+        started = true;
+        clearTimeout(timer);
+        backdrop = m.backdrop === "video" ? "video" : "none";
+        view = parseView(m.view) ?? null;
+        const device = parseDeviceHint(m.device) ?? null;
+        let reported = {};
+        if (m.stats === true) {
+          let since = performance.now();
+          const stats = setInterval(() => {
+            const now2 = performance.now();
+            channel.post(wire({ type: "stats", renderFps: Math.round(avatars.takeDrawn() * 1e3 / Math.max(now2 - since, 1)), ...reported }));
+            since = now2;
+          }, STATS_MS);
+          stats.unref?.();
+        }
+        resolve2({
+          locale: m.locale,
+          mode: m.mode,
+          players: m.players,
+          muted: m.muted,
+          ageRange: m.ageRange ?? "6-8",
+          get backdrop() {
+            return backdrop;
+          },
+          get view() {
+            return view;
+          },
+          device,
+          reportStats: (s) => {
+            reported = parseGameStats(s);
+          },
+          toScreen: (p) => toScreen(view, p),
+          avatarOf: (player) => avatars.of(player),
+          drawAvatar: drawAvatar2,
+          smoothedBody,
+          onBackdrop(listener) {
+            backdropListeners.add(listener);
+            return () => void backdropListeners.delete(listener);
+          },
+          on(event, listener) {
+            const set = listeners.get(event) ?? /* @__PURE__ */ new Set();
+            listeners.set(event, set);
+            set.add(listener);
+            return () => void set.delete(listener);
+          },
+          ready: () => channel.post(wire({ type: "ready" })),
+          score: (player, score) => channel.post(wire({ type: "score", player, score })),
+          break: (reason = "level") => new Promise((done) => {
+            breaks.push(done);
+            channel.post(wire({ type: "break", reason }));
+          }),
+          end: (scores) => channel.post(wire({ type: "end", scores }))
+        });
+      } else if (!started) return;
+      else {
+        let message = m;
+        if (m.type === "frame" && Array.isArray(m.players)) avatars.note(m.players, m.t);
+        if (m.type === "backdrop") {
+          if (m.backdrop !== "video" && m.backdrop !== "none") return;
+          const next = parseView(m.view) ?? null;
+          if (m.backdrop === backdrop && sameView(next, view)) return;
+          backdrop = m.backdrop;
+          view = next;
+          message = { type: "backdrop", backdrop, ...view ? { view } : {} };
+          for (const l of [...backdropListeners]) l(backdrop, view);
+        }
+        for (const l of listeners.get(m.type) ?? []) l(message);
+        if (m.type === "break-done") breaks.shift()?.(m.shown);
+      }
+    });
+  });
+}
+var sameView = (a, b) => a === b || a !== null && b !== null && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+
+// src/shared-avatars.ts
+var shared_avatars_exports = {};
+__export(shared_avatars_exports, {
+  BAND_BODY: () => BAND_BODY,
+  DEFAULT_AVATAR: () => DEFAULT_AVATAR,
+  avatarById: () => avatarById,
+  avatarShapes: () => avatarShapes,
+  drawShapes: () => drawShapes,
+  frameOf: () => frameOf,
+  iconShapes: () => iconShapes
+});
+
+// src/install.ts
+function install(script) {
+  const connecting = connect();
+  const api = easy(connecting);
+  if (script?.dataset.mute !== "manual") muteDuringBreaks(connecting);
+  const global = Object.assign(api, { avatars: { ...shared_avatars_exports } });
+  window.FabiPlay = global;
+  const keys = script?.dataset.keys;
+  if (keys) api.keys(parseKeys(keys));
+  const hand = script?.dataset.pointer;
+  if (hand) api.pointer({ hand: hand === "left" || hand === "right" ? hand : "any" });
+  if (script?.dataset.ready !== "manual") {
+    if (document.readyState === "complete") api.ready();
+    else window.addEventListener("load", () => api.ready(), { once: true });
+  }
+  return global;
+}
+  return module.exports.install(script);
+});