@fabi-play/engine 0.3.0 → 0.4.0

package/dist/fabi-play-engine.umd.js

@@ -1,4 +1,4 @@
-/*! @fabi-play/engine 0.3.0 (full) | Fabi Play Kit License | https://docs.fabiplay.app */
+/*! @fabi-play/engine 0.4.0 (full) | 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); });
@@ -250,6 +250,7 @@ var AVATARS = [
     id: "lion",
     name: { en: "Lion", it: "Leoncino" },
     band: "6-8",
+    alsoIn: ["3-5"],
     palette: { body: "#f6c454", limbs: "#f6c454", belly: "#fde7b0", accent: "#fde7b0", outline: INK },
     head: "round",
     ears: "round",
@@ -616,6 +617,39 @@ var AVATARS = [
     headExtras: ["hair", "domino"],
     bodyExtras: ["cape", "emblem", "boots"],
     extraColors: ["#ffd84a"]
+  },
+  // ── In both 3–5 and 6–8 (home 6–8, alsoIn 3–5: drawn with the proportions of the band shown) ──
+  {
+    // Next to the round 'dinosaur': a T-rex at a glance, a big head turned three-quarters with a long snout and a
+    // toothy grin, tiny arms, strong legs, a thick striped tail.
+    id: "trex",
+    name: { en: "T-Rex", it: "T-Rex" },
+    band: "6-8",
+    alsoIn: ["3-5"],
+    palette: { body: "#6cb84e", limbs: "#6cb84e", belly: "#f4e8a8", accent: "#f4e8a8", outline: INK },
+    head: "snout-long",
+    ears: "none",
+    face: { eyes: "dot", mouth: "toothy", muzzle: "none", cheeks: "#f59b8f" },
+    tail: "thick",
+    headExtras: ["stripes"],
+    bodyExtras: ["tiny-arms", "strong-legs"],
+    extraColors: ["#4a9235", "#58a23f"]
+  },
+  {
+    // An original child fairy: a bun with a flower crown, little pointed ears, a petal tunic, see-through wings and
+    // a star wand in one hand.
+    id: "fairy",
+    name: { en: "Fairy", it: "Fatina" },
+    band: "6-8",
+    alsoIn: ["3-5"],
+    palette: { body: "#b99af0", limbs: "#a8693f", belly: "#b99af0", accent: "#ffd84a", outline: INK, skin: "#a8693f", hair: "#2e1d17", hands: "#a8693f", feet: "#f58cbc" },
+    head: "round",
+    ears: "pixie",
+    face: { eyes: "dot", mouth: "smile", muzzle: "none", cheeks: "#f0857a" },
+    tail: "none",
+    headExtras: ["bun", "flower-crown"],
+    bodyExtras: ["wings-fairy", "petals", "wand"],
+    extraColors: ["#c4ecff", "#f7a8cf", "#fff3a0", "#ffffff"]
   }
 ];
 
@@ -852,6 +886,7 @@ function headShapes(def, ow) {
   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("bun")) out.push({ k: "circle", x: 0.04, y: -1.14, r: 0.4, fill: p.hair ?? p.outline, ...ol });
   if (has("ninja-hood")) {
     for (const [rot, len3] of [
       [0.35, 0.5],
@@ -889,7 +924,15 @@ function headShapes(def, ow) {
   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")) {
+  if (has("stripes") && def.head === "snout-long") {
+    const c = extra(0, p.outline);
+    for (const [x0, y0, x1, y1] of [
+      [0.46, -0.94, 0.36, -0.66],
+      [0.8, -0.72, 0.62, -0.5],
+      [1, -0.36, 0.78, -0.24]
+    ])
+      out.push({ k: "line", pts: [x0, y0, x1, y1], stroke: c, lw: 0.11 });
+  } else 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) {
@@ -904,6 +947,13 @@ function headShapes(def, ow) {
     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 (def.head === "snout-long") {
+    for (const [x, y, r] of [
+      [-1.38, -0.14, 0.06],
+      [-1.14, -0.22, 0.055]
+    ])
+      out.push({ k: "ellipse", x, y, rx: r, ry: r * 0.8, rot: -0.3, fill: p.outline, alpha: 0.85 });
+  }
   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")) {
@@ -912,6 +962,7 @@ function headShapes(def, ow) {
   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("bun")) out.push({ k: "path", d: smoothClosed(pts(-1.02, -0.1, -0.98, -0.62, -0.56, -1.02, 0, -1.1, 0.56, -1.02, 0.98, -0.62, 1.02, -0.1, 0.84, -0.36, 0.5, -0.56, 0.12, -0.48, -0.22, -0.6, -0.6, -0.5, -0.86, -0.36)), fill: hair, ...ol });
   if (has("curls")) {
     for (let i = 0; i < 7; i++) {
       const c = polar(-1.3 + i / 6 * 2.6, 0.86);
@@ -933,7 +984,7 @@ function headShapes(def, ow) {
   }
   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 (def.face.cheeks) for (const c of cheekSpots(def)) out.push({ k: "ellipse", x: c.x, y: c.y, 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 });
@@ -955,6 +1006,24 @@ function headShapes(def, ow) {
       out.push({ k: "line", pts: [-w2, y + 0.04, w2, y - 0.04], stroke: p.outline, lw: ow * 0.7, alpha: 0.6 });
     }
   }
+  if (has("flower-crown")) {
+    const cols2 = [extra(1, "#f7a8cf"), extra(2, "#fff3a0"), extra(3, WHITE)];
+    for (const a of [-0.84, -0.28, 0.28, 0.84]) {
+      const c = polar(a, 0.9);
+      out.push({ k: "ellipse", x: c.x, y: c.y, rx: 0.14, ry: 0.07, rot: a + 0.5, fill: "#7cc76a", stroke: p.outline, lw: ow * 0.7 });
+    }
+    ;
+    [-1.12, -0.56, 0, 0.56, 1.12].forEach((a, i) => {
+      const c = polar(a, 0.9);
+      const r = i === 2 ? 0.13 : 0.11;
+      for (let k = 0; k < 5; k++) {
+        const t = a + k / 5 * Math.PI * 2;
+        out.push({ k: "circle", x: c.x + Math.sin(t) * r, y: c.y - Math.cos(t) * r, r: r * 0.82, fill: cols2[i % cols2.length], stroke: p.outline, lw: ow * 0.7 });
+      }
+      out.push({ k: "circle", x: c.x, y: c.y, r: r * 0.62, fill: cols2[i % cols2.length] });
+      out.push({ k: "circle", x: c.x, y: c.y, r: r * 0.42, fill: p.accent });
+    });
+  }
   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 });
@@ -1019,6 +1088,8 @@ function headShape(def, ol) {
       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 "snout-long":
+      return { k: "path", d: smoothClosed(SNOUT_HEAD, 0.95), fill, ...ol };
     case "bulb":
       return {
         k: "path",
@@ -1037,6 +1108,19 @@ function headShape(def, ol) {
       };
   }
 }
+var SNOUT_HEAD = pts(0.7, -0.88, 0.12, -1.04, -0.3, -0.98, -0.72, -0.74, -1.2, -0.56, -1.5, -0.32, -1.6, 0.04, -1.44, 0.42, -0.9, 0.72, -0.2, 0.92, 0.5, 0.88, 0.96, 0.56, 1.08, 0, 0.98, -0.5);
+function eyeSpots(def, ex, ey) {
+  if (def.head === "snout-long")
+    return [
+      { x: -0.36, y: -0.5, k: 0.95 },
+      { x: 0.26, y: -0.48, k: 1.1 }
+    ];
+  return SIDES.map((s) => ({ x: s * ex, y: ey, k: 1 }));
+}
+function cheekSpots(def) {
+  if (def.head === "snout-long") return pts(-0.66, -0.14, 0.66, 0.1);
+  return SIDES.map((s) => ({ x: s * 0.64, y: 0.3 }));
+}
 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 };
@@ -1117,6 +1201,10 @@ function ears(def, ow) {
         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 "pixie":
+        out.push({ k: "path", d: roundedPolygon(pts(s * 0.86, -0.22, s * 1.36, -0.5, s * 1.02, 0.26), 0.28), fill: p.skin ?? p.body, ...ol });
+        out.push({ k: "line", pts: [s * 0.98, -0.12, s * 1.16, -0.3], stroke: p.accent, lw: ow * 0.8, alpha: 0.5 });
+        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;
@@ -1149,15 +1237,15 @@ function eyes(def, ow) {
   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));
+      for (const e of eyeSpots(def, ex, ey)) {
+        out.push({ k: "ellipse", x: e.x, y: e.y, rx: 0.12 * e.k, ry: 0.155 * e.k, fill: ink });
+        out.push(shine(e.x + 0.04 * e.k, e.y - 0.06 * e.k, 0.045 * e.k));
       }
       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));
+      for (const e of eyeSpots(def, ex, ey)) {
+        out.push({ k: "ellipse", x: e.x, y: e.y, rx: 0.16 * e.k, ry: 0.22 * e.k, fill: ink });
+        out.push(shine(e.x + 0.05 * e.k, e.y - 0.08 * e.k, 0.065 * e.k));
       }
       break;
     case "big":
@@ -1266,6 +1354,21 @@ function mouth(def, ow) {
       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 "toothy": {
+      out.push({ k: "path", d: "M-1.4 0.1 Q-0.5 0.36 0.5 0.2 Q0.64 0.16 0.68 0.02 Q0.78 0.28 0.52 0.38 Q-0.4 0.78 -1.3 0.26 Z", fill: dark, stroke: dark, lw: ow * 0.6 });
+      out.push({ k: "ellipse", x: -0.38, y: 0.5, rx: 0.24, ry: 0.08, fill: TONGUE });
+      for (const t of [0.12, 0.27, 0.42, 0.57, 0.72, 0.86]) {
+        const x = (1 - t) * (1 - t) * -1.4 + 2 * (1 - t) * t * -0.5 + t * t * 0.5;
+        const y = (1 - t) * (1 - t) * 0.1 + 2 * (1 - t) * t * 0.36 + t * t * 0.2 - 0.01;
+        out.push({ k: "path", d: roundedPolygon(pts(x - 0.08, y, x + 0.08, y, x, y + 0.14), 0.3), fill: WHITE });
+      }
+      for (const t of [0.3, 0.7]) {
+        const x = (1 - t) * (1 - t) * 0.52 + 2 * (1 - t) * t * -0.4 + t * t * -1.3;
+        const y = (1 - t) * (1 - t) * 0.38 + 2 * (1 - t) * t * 0.78 + t * t * 0.26 + 0.01;
+        out.push({ k: "path", d: roundedPolygon(pts(x - 0.07, y, x + 0.07, y, x, y - 0.12), 0.3), fill: WHITE });
+      }
+      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]) {
@@ -1288,7 +1391,10 @@ var BAND_BODY = {
   "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 bodyBand = (def, shown) => {
+  if (shown !== void 0 && def.band !== "all" && def.alsoIn?.includes(shown) && shown in BAND_BODY) return shown;
+  return 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;
@@ -1382,7 +1488,7 @@ function headTilt(body, at, angle, U) {
   return 0;
 }
 function avatarShapes(body, def, box, opts = {}) {
-  const band = bodyBand(def);
+  const band = bodyBand(def, opts.band);
   const bb = BAND_BODY[band];
   const F = frameOf(body, box, { ...opts, band });
   if (!F) return [];
@@ -1414,8 +1520,8 @@ function avatarShapes(body, def, box, opts = {}) {
     out.push({ k: "line", pts: flat2, stroke: p.outline, lw: w2 + ow * 2 });
     out.push({ k: "line", pts: flat2, stroke: color, lw: w2 });
   };
-  const legW = bb.leg * U;
-  const armW = bb.arm * U;
+  const legW = bb.leg * U * (has("strong-legs") ? 1.3 : 1);
+  const armW = bb.arm * U * (has("tiny-arms") ? 0.6 : 1);
   const pad = Math.max(bb.arm / 0.22, 0.9);
   if (F.hipsOk) {
     for (const [hip, kneeI, ankleI, side] of [
@@ -1429,7 +1535,7 @@ function avatarShapes(body, def, box, opts = {}) {
       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));
+      if (ankle.ok) legs.push(...feet(def, ankle, F, side, ow, bb.foot));
     }
   }
   for (const [sh, elbowI, wristI, side] of [
@@ -1462,7 +1568,20 @@ function avatarShapes(body, def, box, opts = {}) {
         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("wand") && side === 1 && !opts.portrait) out.push(...wand(def, hand, norm(add(mul(dir, 0.4), sub(mul(r, 0.6), d))), U, ow));
+    const handR = bb.hand * U * (has("tiny-arms") ? 0.72 : 1);
+    if (has("tiny-arms")) {
+      for (const a of [-0.45, 0.45]) {
+        const c = Math.cos(a);
+        const s = Math.sin(a);
+        const cd = { x: dir.x * c - dir.y * s, y: dir.x * s + dir.y * c };
+        const base = add(hand, mul(cd, handR * 0.75));
+        const tip = add(hand, mul(cd, handR * 1.6));
+        const nrm = { x: -cd.y * handR * 0.32, y: cd.x * handR * 0.32 };
+        out.push({ k: "path", d: roundedPolygon([add(base, nrm), tip, sub(base, nrm)], 0.2), fill: p.belly, ...ol });
+      }
+    }
+    out.push({ k: "circle", x: hand.x, y: hand.y, r: handR, fill: p.hands ?? p.limbs, ...ol });
   }
   if (has("wings")) {
     for (const s of [-1, 1]) {
@@ -1477,6 +1596,7 @@ function avatarShapes(body, def, box, opts = {}) {
       back.push({ k: "path", d: roundedPolygon(w2, 0.18), fill: p.accent, ...ol });
     }
   }
+  if (has("wings-fairy")) back.push(...fairyWings(def, T2, ht, U, ow));
   if (has("cape")) {
     const yb = L + 0.8 * U;
     const wb = hb + 0.36 * U;
@@ -1694,6 +1814,7 @@ function avatarShapes(body, def, box, opts = {}) {
     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("petals")) torso.push(...petals(def, T2, ht, hb, bulge, L, y1, U, ow, bb));
   if (has("scarf")) {
     const y = Math.max(0.04, bb.head * (1 - bb.neck) - 0.06) * U;
     const c = T2(0, y);
@@ -1718,6 +1839,18 @@ function cachedHead(def, ow) {
   }
   return shapes;
 }
+function feet(def, ankle, F, side, ow, k) {
+  const shoe = foot(def, ankle, F, side, ow, k);
+  if (!def.bodyExtras.includes("strong-legs")) return [shoe];
+  const U = F.U * k;
+  const c = add(add(ankle, mul(F.d, 0.07 * U)), mul(F.r, side * 0.06 * U));
+  const out = [shoe];
+  for (const t of [-1, 0, 1]) {
+    const q = add(add(c, mul(F.r, t * 0.12 * U)), mul(F.d, 0.09 * U));
+    out.push({ k: "ellipse", x: q.x, y: q.y, rx: 0.05 * U, ry: 0.045 * U, rot: F.angle, fill: def.palette.belly, stroke: def.palette.outline, lw: ow * 0.8 });
+  }
+  return out;
+}
 function foot(def, ankle, F, side, ow, k) {
   const p = def.palette;
   const { d, r } = F;
@@ -1871,6 +2004,30 @@ function tail(def, F, hb, ow) {
       });
       break;
     }
+    case "thick": {
+      const pts2 = TP([
+        [hb * 0.3, L * 0.42],
+        [hb + 0.42 * U, L * 0.62],
+        [hb + 0.92 * U, L * 0.96],
+        [hb + 1.32 * U, L * 1.08],
+        [hb + 1.44 * U, L * 0.98],
+        [hb + 0.98 * U, L * 1.2],
+        [hb + 0.4 * U, L * 1.22],
+        [hb * 0.3, L * 1.12]
+      ]);
+      out.push({ k: "path", d: smoothClosed(pts2, 0.8), fill: p.body, ...ol });
+      const c = def.extraColors?.[0] ?? p.accent;
+      for (const [x, y, l] of [
+        [0.28, 0.58, 0.26],
+        [0.62, 0.8, 0.22],
+        [0.96, 1, 0.16]
+      ]) {
+        const a = T2(hb + x * U, L * y + 0.03 * U);
+        const b = T2(hb + (x - 0.1) * U, L * y + l * U);
+        out.push({ k: "line", pts: [a.x, a.y, b.x, b.y], stroke: c, lw: 0.09 * U });
+      }
+      break;
+    }
     case "spiky":
     case "arrow": {
       const pts2 = TP([
@@ -1903,6 +2060,81 @@ function tail(def, F, hb, ow) {
   }
   return out;
 }
+function wand(def, hand, wd, U, ow) {
+  const p = def.palette;
+  const from = add(hand, mul(wd, -0.08 * U));
+  const tip = add(hand, mul(wd, 0.52 * U));
+  const k = 0.2 * U;
+  return [
+    { k: "line", pts: [from.x, from.y, tip.x, tip.y], stroke: p.outline, lw: 0.06 * U + ow * 2 },
+    { k: "line", pts: [from.x, from.y, tip.x, tip.y], stroke: "#fff3d6", lw: 0.06 * U },
+    { k: "circle", x: tip.x, y: tip.y, r: 0.24 * U, fill: p.accent, alpha: 0.28 },
+    { k: "group", x: tip.x, y: tip.y, rot: Math.atan2(wd.y, wd.x) + Math.PI / 2, s: k, items: [{ k: "path", d: STAR, fill: p.accent, stroke: p.outline, lw: ow * 0.9 / k }] }
+  ];
+}
+function fairyWings(def, T2, ht, U, ow) {
+  const p = def.palette;
+  const fill = def.extraColors?.[0] ?? "#cdeeff";
+  const out = [];
+  for (const s of [-1, 1]) {
+    const lobes = [
+      // Upper: big, up and out.
+      [
+        [s * ht * 0.3, 0.12 * U],
+        [s * (ht + 0.42 * U), -0.66 * U],
+        [s * (ht + 1 * U), -0.74 * U],
+        [s * (ht + 1.02 * U), -0.18 * U],
+        [s * (ht + 0.5 * U), 0.26 * U]
+      ],
+      // Lower: smaller, down and out.
+      [
+        [s * ht * 0.4, 0.3 * U],
+        [s * (ht + 0.6 * U), 0.36 * U],
+        [s * (ht + 0.74 * U), 0.78 * U],
+        [s * (ht + 0.3 * U), 0.9 * U]
+      ]
+    ];
+    for (const lobe of lobes) {
+      const d = smoothClosed(lobe.map(([x, y]) => T2(x, y)), 0.9);
+      out.push({ k: "path", d, fill, alpha: 0.6 });
+      out.push({ k: "path", d, stroke: p.outline, lw: ow * 0.9 });
+      const inner = lobe[Math.floor(lobe.length / 2)];
+      const a = T2(lobe[0][0], lobe[0][1]);
+      const b = T2(lobe[0][0] + (inner[0] - lobe[0][0]) * 0.75, lobe[0][1] + (inner[1] - lobe[0][1]) * 0.75);
+      out.push({ k: "line", pts: [a.x, a.y, b.x, b.y], stroke: "#ffffff", lw: ow * 0.9, alpha: 0.85 });
+    }
+    for (const [x, y, r] of [
+      [ht + 0.72 * U, -0.42 * U, 0.075 * U],
+      [ht + 0.44 * U, -0.16 * U, 0.05 * U],
+      [ht + 0.5 * U, 0.6 * U, 0.055 * U]
+    ]) {
+      const q = T2(s * x, y);
+      out.push({ k: "group", x: q.x, y: q.y, s: r, items: [{ k: "path", d: STAR, fill: "#ffffff" }] });
+    }
+  }
+  return out;
+}
+function petals(def, T2, ht, hb, bulge, L, y1, U, ow, bb) {
+  const p = def.palette;
+  const second = def.extraColors?.[1] ?? p.belly;
+  const out = [];
+  const ang = Math.atan2(T2(1, 0).y - T2(0, 0).y, T2(1, 0).x - T2(0, 0).x);
+  const n = 5;
+  const w2 = Math.max(hb, bulge * 0.92) * 1.08;
+  const y = (L * 0.8 + y1) / 2;
+  const order = [0, 4, 1, 3, 2];
+  for (const i of order) {
+    const t = i / (n - 1) - 0.5;
+    const c = T2(t * 2 * w2, y + (0.5 - Math.abs(t)) * 0.1 * U);
+    out.push({ k: "ellipse", x: c.x, y: c.y, rx: w2 * 0.3, ry: 0.34 * U, rot: ang - t * 0.6, fill: i % 2 ? second : p.body, stroke: p.outline, lw: ow });
+  }
+  const cy = Math.max(0.04, bb.head * (1 - bb.neck) - 0.04) * U;
+  for (const t of [-1, 1, 0]) {
+    const c = T2(t * ht * 0.32, cy + (t ? 0 : 0.05 * U));
+    out.push({ k: "ellipse", x: c.x, y: c.y, rx: ht * 0.26, ry: 0.12 * U, rot: ang + t * 0.5, fill: t ? second : p.body, stroke: p.outline, lw: ow * 0.9 });
+  }
+  return out;
+}
 
 // ../avatars/src/poses.ts
 var STAND = {
@@ -2045,17 +2277,19 @@ 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 iconShapes(def, size) {
+function iconShapes(def, size, band) {
   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 shown = bodyBand(d, band);
+  const unit = frameOf(body, { x: 0, y: 0, w: 1, h: 1 }, { band: shown });
+  const hb = bounds(headShapes(d, 0.05));
+  const top = -hb.minY;
   const headR = Math.min(0.27, 0.43 / Math.max(top, 1)) * size;
-  const k = headR / BAND_BODY[band].head / unit.U;
+  const dx = d.head === "snout-long" ? (hb.minX + hb.maxX) / 2 * headR : 0;
+  const k = headR / BAND_BODY[shown].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 });
+  const box = { x: size / 2 - dx - unit.head.x * k, y: cy - unit.head.y * k, w: k, h: k };
+  return avatarShapes(body, d, box, { portrait: true, band: shown });
 }
 function smoothBody(prev, next, amount = 0.5) {
   if (!prev || prev.length !== next.length) return next.slice();
@@ -7369,6 +7603,10 @@ async function createEngine(opts = {}) {
     };
     unlisten.push(
       play.on("start", (m) => lateHint(m?.device)),
+      // The simple API knows muted only from the start (its getter is false before): read it again then.
+      play.on("start", (m) => {
+        if (typeof m?.muted === "boolean") sound.muted = m.muted;
+      }),
       play.on("frame", (m) => setPlayers(m?.players)),
       play.on("players", (m) => setPlayers(m?.players)),
       play.on("backdrop", (m) => setBackdrop(m?.backdrop, m?.view)),