@fabi-play/sdk 0.3.0 → 0.5.0

package/dist/fabi-play.umd.js

@@ -1,4 +1,4 @@
-/*! @fabi-play/sdk 0.3.0 | Fabi Play Kit License | https://docs.fabiplay.app */
+/*! @fabi-play/sdk 0.5.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); });
@@ -229,6 +229,88 @@ function pointer(play, options = {}) {
     target.cursor(x, y, clicked ? 0 : progress);
   });
 }
+function domCursor(doc = document) {
+  const win = doc.defaultView;
+  const Pointer = win?.PointerEvent;
+  const Mouse = win?.MouseEvent ?? MouseEvent;
+  let over = null;
+  let pressed = null;
+  const fire = (el, type, x, y, buttons, related = null) => {
+    const init = { bubbles: true, cancelable: true, composed: true, view: win, clientX: x, clientY: y, screenX: x, screenY: y, button: 0, buttons, relatedTarget: related, pointerId: 1, pointerType: "mouse", isPrimary: true };
+    if (type.startsWith("pointer")) {
+      if (Pointer) el.dispatchEvent(new Pointer(type, init));
+    } else el.dispatchEvent(new Mouse(type, init));
+  };
+  return {
+    // The viewport (the game's frame), not the document, which may be taller.
+    size: () => ({ width: win?.innerWidth ?? doc.documentElement.clientWidth, height: win?.innerHeight ?? doc.documentElement.clientHeight }),
+    dispatch(type, x, y, buttons) {
+      const el = doc.elementFromPoint(x, y) ?? doc.body ?? doc.documentElement;
+      if (type === "pointermove" && el !== over) {
+        if (over?.isConnected) for (const t of ["pointerout", "mouseout"]) fire(over, t, x, y, buttons, el);
+        for (const t of ["pointerover", "mouseover"]) fire(el, t, x, y, buttons, over);
+        over = el;
+      }
+      if (type === "pointerdown") pressed = el;
+      if (type === "click") {
+        const same = pressed === el;
+        pressed = null;
+        if (!same) return;
+      }
+      fire(el, type, x, y, buttons);
+    }
+  };
+}
+function cursorDriver(target) {
+  let last = null;
+  const send = (types, x, y, buttons) => {
+    const { width, height } = target.size();
+    for (const t of types) target.dispatch(t, x * width, y * height, buttons);
+  };
+  return {
+    update(c) {
+      const was = last?.down ?? false;
+      if (!last || last.x !== c.x || last.y !== c.y) send(["pointermove", "mousemove"], c.x, c.y, was ? 1 : 0);
+      if (c.down && !was) send(["pointerdown", "mousedown"], c.x, c.y, 1);
+      if (!c.down && was) send(["pointerup", "mouseup", "click"], c.x, c.y, 0);
+      last = { x: c.x, y: c.y, down: c.down };
+    },
+    cancel() {
+      if (!last?.down) return;
+      send(["pointercancel", "mouseup"], last.x, last.y, 0);
+      last = { ...last, down: false };
+    }
+  };
+}
+
+// ../protocol/src/picture.ts
+var MAX_PICTURE_BYTES = 3 * 1024 * 1024;
+var MAX_PICTURE_SIDE = 1920;
+var PICTURE_JPEG_QUALITY = 0.85;
+var MAX_PICTURE_TITLE = 60;
+var PICTURE_RESULTS = ["sent", "unavailable", "too-big", "error"];
+var BASE64 = /^[A-Za-z0-9+/]*={0,2}$/;
+var MAGIC = { "image/jpeg": "/9j/", "image/png": "iVBORw0KGg" };
+var PREFIX = /^data:(image\/(?:jpeg|png));base64,/;
+var decodedSize = (b64) => b64.length / 4 * 3 - (b64.endsWith("==") ? 2 : b64.endsWith("=") ? 1 : 0);
+var MAX_BASE64 = Math.ceil(MAX_PICTURE_BYTES / 3) * 4;
+var isImage = (mime, b64) => b64.length % 4 === 0 && b64.length > 0 && b64.startsWith(MAGIC[mime]) && BASE64.test(b64);
+function checkPicture(v) {
+  if (typeof v !== "string") return { error: "invalid" };
+  const m = PREFIX.exec(v);
+  if (!m) return { error: "invalid" };
+  const mime = m[1];
+  const base64 = v.slice(m[0].length);
+  if (base64.length > MAX_BASE64) return { error: "too-big" };
+  if (!isImage(mime, base64)) return { error: "invalid" };
+  const size = decodedSize(base64);
+  return size > MAX_PICTURE_BYTES ? { error: "too-big" } : { ok: { mime, base64, size } };
+}
+function parsePictureTitle(v) {
+  if (typeof v !== "string") return void 0;
+  const t = Array.from(v.replace(/[\p{Cc}\p{Cf}]/gu, "").trim()).slice(0, MAX_PICTURE_TITLE).join("").trim();
+  return t || void 0;
+}
 
 // ../protocol/src/index.ts
 var PROTOCOL_VERSION = 1;
@@ -285,6 +367,15 @@ function parseGameStats(v) {
   if (DEVICE_TIERS.includes(v.tier)) out.tier = v.tier;
   return out;
 }
+function parseCursor(v) {
+  if (!isObject(v) || !isNumber(v.x) || !isNumber(v.y) || typeof v.down !== "boolean") return void 0;
+  const c = (n) => Math.min(Math.max(n, 0), 1);
+  return { type: "cursor", x: c(v.x), y: c(v.y), down: v.down };
+}
+function parsePictureResult(v) {
+  if (!isObject(v) || !PICTURE_RESULTS.includes(v.result)) return void 0;
+  return { type: "picture-result", ...Number.isInteger(v.id) ? { id: v.id } : {}, result: v.result };
+}
 var isPlayerId = (id) => Number.isInteger(id) && id >= 1 && id <= MAX_PLAYERS;
 function parseTurnPlayers(v) {
   return Array.isArray(v) && v.length === 1 && isPlayerId(v[0]) ? [v[0]] : void 0;
@@ -293,6 +384,7 @@ function parseTurnOrder(v) {
   if (!Array.isArray(v) || v.length < 1 || v.length > MAX_PLAYERS || !v.every(isPlayerId) || new Set(v).size !== v.length) return void 0;
   return [...v];
 }
+var COVER_ASPECT = 16 / 9;
 var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 var isNumber = (v) => typeof v === "number" && Number.isFinite(v);
 var POSE_HEADER = 12;
@@ -415,6 +507,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",
@@ -781,6 +874,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"]
   }
 ];
 
@@ -1017,6 +1143,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, len2] of [
       [0.35, 0.5],
@@ -1054,7 +1181,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) {
@@ -1069,6 +1204,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")) {
@@ -1077,6 +1219,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);
@@ -1098,7 +1241,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 });
@@ -1120,6 +1263,24 @@ function headShapes(def, ow) {
       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("flower-crown")) {
+    const cols = [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: cols[i % cols.length], stroke: p.outline, lw: ow * 0.7 });
+      }
+      out.push({ k: "circle", x: c.x, y: c.y, r: r * 0.62, fill: cols[i % cols.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 });
@@ -1184,6 +1345,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",
@@ -1202,6 +1365,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 };
@@ -1282,6 +1458,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;
@@ -1314,15 +1494,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":
@@ -1431,6 +1611,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]) {
@@ -1453,7 +1648,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;
@@ -1547,7 +1745,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 [];
@@ -1579,8 +1777,8 @@ function avatarShapes(body, def, box, opts = {}) {
     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 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 [
@@ -1594,7 +1792,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 [
@@ -1627,7 +1825,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]) {
@@ -1642,6 +1853,7 @@ function avatarShapes(body, def, box, opts = {}) {
       back.push({ k: "path", d: roundedPolygon(w, 0.18), fill: p.accent, ...ol });
     }
   }
+  if (has("wings-fairy")) back.push(...fairyWings(def, T, ht, U, ow));
   if (has("cape")) {
     const yb = L + 0.8 * U;
     const wb = hb + 0.36 * U;
@@ -1859,6 +2071,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, T, 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 = T(0, y);
@@ -1883,6 +2096,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;
@@ -2036,6 +2261,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 = T(hb + x * U, L * y + 0.03 * U);
+        const b = T(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([
@@ -2068,6 +2317,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, T, 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]) => T(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 = T(lobe[0][0], lobe[0][1]);
+      const b = T(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 = T(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, T, 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(T(1, 0).y - T(0, 0).y, T(1, 0).x - T(0, 0).x);
+  const n = 5;
+  const w = 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 = T(t * 2 * w, y + (0.5 - Math.abs(t)) * 0.1 * U);
+    out.push({ k: "ellipse", x: c.x, y: c.y, rx: w * 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 = T(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 = {
@@ -2211,7 +2535,7 @@ 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 });
+  const shapes = avatarShapes(body, resolve(def), box, { mirrored: opts.mirrored, band: opts.band });
   if (!shapes.length) return false;
   ctx.save();
   if (opts.alpha !== void 0) ctx.globalAlpha *= Math.min(Math.max(opts.alpha, 0), 1);
@@ -2219,17 +2543,19 @@ function drawAvatar(ctx, body, def, box, opts = {}) {
   ctx.restore();
   return true;
 }
-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();
@@ -2459,6 +2785,7 @@ function easy(connecting) {
     p.on("break-done", (m) => emit("break-end", { shown: m.shown }));
     p.onBackdrop((backdrop, view) => emit("backdrop", { backdrop, view }));
     p.on("turn", (m) => emit("turn", { players: [...m.players] }));
+    p.on("capabilities", (m) => emit("capabilities", { pictures: m.pictures }));
     p.on("frame", (f2) => {
       emit("players", { players: f2.players });
       for (const pl of f2.players) {
@@ -2505,6 +2832,13 @@ function easy(connecting) {
     get hasPointer() {
       return play?.pointer ?? false;
     },
+    get canSavePicture() {
+      return play?.canSavePicture ?? false;
+    },
+    savePicture: (source, opts) => new Promise((resolve2) => withPlay((p) => void p.savePicture(source, opts).then(resolve2))),
+    get muted() {
+      return play?.muted ?? false;
+    },
     get view() {
       return play?.view ?? null;
     },
@@ -2519,7 +2853,7 @@ function easy(connecting) {
   };
 }
 var none = Object.freeze([]);
-var startInfo = (p) => ({ ageRange: p.ageRange, players: p.players, locale: p.locale, mode: p.mode, backdrop: p.backdrop, view: p.view, device: p.device, turns: p.turns, input: p.input, pointer: p.pointer });
+var startInfo = (p) => ({ ageRange: p.ageRange, players: p.players, locale: p.locale, mode: p.mode, orientation: p.orientation, backdrop: p.backdrop, view: p.view, device: p.device, turns: p.turns, input: p.input, pointer: p.pointer, canSavePicture: p.canSavePicture, muted: p.muted });
 var playingNow = (p) => p.input === "remote" ? p.players[0] ?? 1 : 1;
 function endOf(p, score, last) {
   const now2 = playingNow(p);
@@ -2528,6 +2862,46 @@ function endOf(p, score, last) {
   return [...played.map((player) => ({ player, score: last.get(player) ?? 0, stars: 2 })), { player: now2, score, stars: 2 }];
 }
 
+// src/picture.ts
+var QUALITIES = [PICTURE_JPEG_QUALITY, 0.7, 0.55];
+var SHRINK = 0.75;
+var MIN_SIDE = 320;
+function encodePicture(source) {
+  if (typeof source === "string") {
+    const checked = checkPicture(source);
+    return "ok" in checked ? { data: source } : { error: checked.error === "too-big" ? "too-big" : "error" };
+  }
+  try {
+    if (!source || typeof source.toDataURL !== "function") return { error: "error" };
+    const { width, height } = source;
+    if (!(width > 0 && height > 0)) return { error: "error" };
+    const doc = source.ownerDocument ?? document;
+    let scale = Math.min(1, MAX_PICTURE_SIDE / Math.max(width, height));
+    for (; ; ) {
+      const w = Math.max(1, Math.round(width * scale));
+      const h = Math.max(1, Math.round(height * scale));
+      const flat = doc.createElement("canvas");
+      flat.width = w;
+      flat.height = h;
+      const ctx = flat.getContext("2d");
+      if (!ctx) return { error: "error" };
+      ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, w, h);
+      ctx.drawImage(source, 0, 0, w, h);
+      for (const q of QUALITIES) {
+        const data = flat.toDataURL("image/jpeg", q);
+        const checked = checkPicture(data);
+        if ("ok" in checked) return { data };
+        if (checked.error !== "too-big") return { error: "error" };
+      }
+      if (Math.max(w, h) * SHRINK < MIN_SIDE) return { error: "too-big" };
+      scale *= SHRINK;
+    }
+  } catch {
+    return { error: "error" };
+  }
+}
+
 // src/index.ts
 var windowChannel = (win = window) => ({
   post: (m) => win.parent.postMessage(m, "*"),
@@ -2536,7 +2910,8 @@ var windowChannel = (win = window) => ({
 });
 var INIT_TIMEOUT_MS = 1e4;
 var STATS_MS = 1e3;
-function connect(channel = windowChannel()) {
+var PICTURE_TIMEOUT_MS = 12e4;
+function connect(channel = windowChannel(), options = {}) {
   return new Promise((resolve2, reject) => {
     const listeners = /* @__PURE__ */ new Map();
     const breaks = [];
@@ -2548,6 +2923,17 @@ function connect(channel = windowChannel()) {
     let input = "body";
     let players = Object.freeze([]);
     let turns = players;
+    let pictures = false;
+    let pictureId = 0;
+    const pictureWaits = /* @__PURE__ */ new Map();
+    let cursor;
+    const cursorTarget = () => {
+      if (cursor === void 0) {
+        const target = options.cursor !== void 0 ? options.cursor : typeof document !== "undefined" ? domCursor() : null;
+        cursor = target ? cursorDriver(target) : null;
+      }
+      return cursor;
+    };
     const backdropListeners = /* @__PURE__ */ new Set();
     const avatars = new AvatarBook();
     const drawAvatar2 = avatarDrawer(avatars, () => ({ view }));
@@ -2568,6 +2954,7 @@ function connect(channel = windowChannel()) {
         const device = parseDeviceHint(m.device) ?? null;
         input = m.input === "remote" ? "remote" : "body";
         const pointer2 = input === "remote" && m.pointer === true;
+        pictures = m.pictures === true;
         players = Object.freeze(Array.isArray(m.players) ? [...m.players] : []);
         const order = input === "remote" && players.length === 1 ? parseTurnOrder(m.turns) : void 0;
         turns = Object.freeze(order && order[0] === players[0] ? order : [...players]);
@@ -2591,6 +2978,8 @@ function connect(channel = windowChannel()) {
           input,
           pointer: pointer2,
           muted: m.muted,
+          // Hosts before orientations don't send it: landscape.
+          orientation: m.orientation === "portrait" ? "portrait" : "landscape",
           ageRange: m.ageRange ?? "6-8",
           get backdrop() {
             return backdrop;
@@ -2622,7 +3011,28 @@ function connect(channel = windowChannel()) {
             breaks.push({ reason, done });
             channel.post(wire({ type: "break", reason }));
           }),
-          end: (scores) => channel.post(wire({ type: "end", scores }))
+          end: (scores) => channel.post(wire({ type: "end", scores })),
+          get canSavePicture() {
+            return pictures;
+          },
+          savePicture: async (source, opts) => {
+            if (!pictures) return "unavailable";
+            const encoded = encodePicture(source);
+            if ("error" in encoded) return encoded.error;
+            const id = ++pictureId;
+            const title = parsePictureTitle(opts?.title);
+            return new Promise((done) => {
+              const timer2 = setTimeout(() => finish("error"), PICTURE_TIMEOUT_MS);
+              timer2.unref?.();
+              const finish = (r) => {
+                clearTimeout(timer2);
+                pictureWaits.delete(id);
+                done(r);
+              };
+              pictureWaits.set(id, finish);
+              channel.post(wire({ type: "picture", data: encoded.data, id, ...title ? { title } : {} }));
+            });
+          }
         });
       } else if (!started) return;
       else {
@@ -2645,6 +3055,23 @@ function connect(channel = windowChannel()) {
           players = Object.freeze(next);
           message = { type: "turn", players: [...next] };
         }
+        if (m.type === "picture-result") {
+          const r = parsePictureResult(m);
+          if (r?.id !== void 0) pictureWaits.get(r.id)?.(r.result);
+          return;
+        }
+        if (m.type === "capabilities") {
+          if (typeof m.pictures !== "boolean" || m.pictures === pictures) return;
+          pictures = m.pictures;
+          message = { type: "capabilities", pictures };
+        }
+        if (m.type === "cursor") {
+          const c = input === "remote" ? parseCursor(m) : void 0;
+          if (!c) return;
+          message = c;
+          cursorTarget()?.update(c);
+        }
+        if (m.type === "pause" || m.type === "break-start" || m.type === "turn") cursor?.cancel();
         if (m.type === "break-start") inBreak = breaks.length > 0;
         for (const l of listeners.get(m.type) ?? []) l(message);
         if (m.type === "break-done") {