@fabi-play/avatars 0.3.0 → 0.5.0

package/README.md

@@ -1,7 +1,9 @@
 # @fabi-play/avatars
 
-Thirty-seven original, child-friendly avatars, drawn from a body pose: Fabi the fox (the fox of the app icon, the
-mascot), offered in every age band, and 12 for each band. The TV shows them in place
+Thirty-nine original, child-friendly avatars, drawn from a body pose: 12 for each age band, the T-rex and the fairy,
+and Fabi the fox (the fox of the app icon, the mascot). Fabi is the host, not a player: no band offers it to the
+children, but the TV and games draw it like any other avatar. The lion, the T-rex and the fairy
+are offered to both 3–5 and 6–8. The TV shows them in place
 of the plain silhouette when the phone's video is not on screen. Each child picks one on the phone, among the avatars
 of their age band. The phone stores only the avatar's id; any valid id is accepted everywhere, whatever the band.
 
@@ -10,9 +12,9 @@ varied skin tones and gender-neutral looks, and are told apart by their gear.
 
 | Band | Style | id · en · it (the first four are the slot defaults) |
 | --- | --- | --- |
-| all | the app icon's fox: first in every band's list, `special: true`, drawn with the 6–8 proportions; never a slot default | `mascot` Fabi · Fabi |
-| 3–5 | cuddly baby animals: big round heads, chubby limbs, soft colours, a soft brown outline | `bunny` Bunny · Coniglietto, `bear` Bear · Orsetto, `panda` Panda · Panda, `penguin` Penguin · Pinguino, `koala` Koala · Koala, `frog` Frog · Ranocchio, `cat` Cat · Gattino, `owl` Owl · Gufetto, `chick` Chick · Pulcino, `puppy` Puppy · Cucciolo, `lamb` Lamb · Agnellino, `duckling` Duckling · Anatroccolo |
-| 6–8 | animals and adventure | `fox` Fox · Volpe, `lion` Lion · Leoncino, `dragon` Little Dragon · Draghetto, `unicorn` Unicorn · Unicorno, `tiger` Tiger · Tigrotto, `monkey` Monkey · Scimmietta, `dinosaur` Dinosaur · Dinosauro, `octopus` Octopus · Polpetto, `ghost` Friendly Ghost · Fantasmino, `shark` Shark · Squalo, `wolf` Wolf · Lupo, `parrot` Parrot · Pappagallo |
+| all | the app icon's fox, the host: in no band's list (pickers don't offer it), `special: true`, drawn with the 6–8 proportions; never a slot default; a child saved with it keeps it | `mascot` Fabi · Fabi |
+| 3–5 | cuddly baby animals: big round heads, chubby limbs, soft colours, a soft brown outline | `bunny` Bunny · Coniglietto, `bear` Bear · Orsetto, `panda` Panda · Panda, `penguin` Penguin · Pinguino, `koala` Koala · Koala, `frog` Frog · Ranocchio, `cat` Cat · Gattino, `owl` Owl · Gufetto, `chick` Chick · Pulcino, `puppy` Puppy · Cucciolo, `lamb` Lamb · Agnellino, `duckling` Duckling · Anatroccolo; then, also offered here (home 6–8): `lion`, `trex`, `fairy` |
+| 6–8 | animals and adventure | `fox` Fox · Volpe, `lion` Lion · Leoncino, `dragon` Little Dragon · Draghetto, `unicorn` Unicorn · Unicorno, `tiger` Tiger · Tigrotto, `monkey` Monkey · Scimmietta, `dinosaur` Dinosaur · Dinosauro, `trex` T-Rex · T-Rex, `octopus` Octopus · Polpetto, `ghost` Friendly Ghost · Fantasmino, `shark` Shark · Squalo, `wolf` Wolf · Lupo, `parrot` Parrot · Pappagallo, `fairy` Fairy · Fatina |
 | 9–12 | older kids: smaller heads, slimmer longer limbs, gear, cooler colours, no blush, a cool outline | `robot` Robot · Robot, `astronaut` Astronaut · Astronauta, `ninja` Ninja · Ninja, `skater` Skater · Skater, `alien` Alien · Alieno, `explorer` Explorer · Giramondo, `wizard` Wizard · Mago, `knight` Knight · Cavaliere, `racer` Racer · Pilota, `pirate` Pirate · Pirata, `diver` Diver · Sub, `hero` Hero · Supereroe |
 
 ## Install
@@ -41,27 +43,50 @@ el.innerHTML = avatarIconSvg('panda', 96)               // web DOM
 <img src={avatarIconDataUri('panda', 96)} />             // data URI
 ```
 
-- `AVATARS: readonly AvatarDef[]` (all 37), `AVATAR_IDS`, `DEFAULT_AVATAR` (the fox), `avatarById(id)`, `isAvatarId(x)`.
-- `AVATAR_BANDS: Record<AgeRange, readonly AvatarId[]>` (picker order: the mascot, `MASCOT_ID`, first, then the
-  band's own 12, whose first four are the slot defaults, see `defaultAvatarFor(slot, ageRange?)` in
-  `@fabi-play/protocol`), `avatarsFor(ageRange)` (the definitions, in that order), `bandOf(id)` (`'all'` for the
-  mascot, 6–8 for an unknown id). Every definition has its `band` (`AvatarBand`: an age range or `'all'`);
-  `special: true` marks the mascot, so a picker can mark it. `bodyBand(def)` gives the proportions it is drawn with
-  (6–8 for `'all'`).
-- `drawAvatar(ctx, body, def | id, box, { alpha?, mirrored? })`. Unknown ids draw the default avatar. Pass
+- `AVATARS: readonly AvatarDef[]` (all 39), `AVATAR_IDS`, `DEFAULT_AVATAR` (the fox), `avatarById(id)`, `isAvatarId(x)`.
+- `AVATAR_BANDS: Record<AgeRange, readonly AvatarId[]>` (picker order: the band's own 12, whose first four are the
+  slot defaults, see `defaultAvatarFor(slot, ageRange?)` in `@fabi-play/protocol`, then the avatars also offered
+  there; the lists are not all the same length: 15, 14, 12). The mascot (`MASCOT_ID`) is in none: Fabi is the host,
+  not a player. It stays in `AVATARS`, `isAvatarId('mascot')` is true and `drawAvatar` draws it,
+  `avatarsFor(ageRange)` (the definitions, in that order), `bandOf(id)` (the home band: `'all'` for the mascot, 6–8
+  for an unknown id), `bandsOf(id)` (every band whose list offers it: none for the mascot). Every definition has its `band`
+  (`AvatarBand`: an age range or `'all'`) and, if it is offered elsewhere too, `alsoIn` (see "Avatars of two bands"
+  below); `special: true` marks the mascot. `bodyBand(def, shown?)` gives the proportions
+  it is drawn with (6–8 for `'all'`).
+- `drawAvatar(ctx, body, def | id, box, { alpha?, mirrored?, band? })`. Unknown ids draw the default avatar. `band`:
+  the child's age band, when the caller knows it (see "Avatars of two bands"). Pass
   `mirrored` when the body is in camera space rather than player space. It draws nothing when the shoulders are not
   seen (it returns whether it drew), and it never throws on missing or broken points.
-- `drawAvatarIcon(ctx, def | id, x, y, size)`: a head-and-shoulders portrait in a neutral pose, clipped to its square.
-- `avatarIconSvg(def | id, size, { background?, radius? })`: the same portrait as an SVG document string. Its
+- `drawAvatarIcon(ctx, def | id, x, y, size, { band? })`: a head-and-shoulders portrait in a neutral pose, clipped to
+  its square. A picker passes the band it shows.
+- `avatarIconSvg(def | id, size, { background?, radius?, band? })`: the same portrait as an SVG document string. Its
   clip-path id is unique per call (avatar, size and a counter), so many portraits can sit inline in one page.
   `avatarIconDataUri` returns the same as a data URI.
 - `smoothBody(prev, next, amount = 0.5)`: optional per-player smoothing. Points ease towards the new frame. A point
   that was seen stays visible until its visibility drops below 0.3, so limbs don't blink. Keep the result per player.
 - Poses for previews and tests: `neutralPose()`, `armsUpPose()`, `starJumpPose()`, `squatPose()`, `wavePose()`,
   `TEST_POSES`, `poseBody(spec)`.
-- Lower level: `avatarShapes(body, def, box)` returns the shape list, `drawShapes(ctx, shapes)` draws it on a canvas,
+- Lower level: `avatarShapes(body, def, box, { mirrored?, portrait?, band? })` returns the shape list,
+  `iconShapes(def, size, band?)` the portrait's, `drawShapes(ctx, shapes)` draws it on a canvas,
   and `shapesToSvg(shapes)` turns it into SVG. `frameOf(body, box)` gives the rig's torso frame.
 
+### Avatars of two bands
+
+An avatar can be offered in more than one band: its `band` is its home, and `alsoIn` lists the others (today the
+lion, the T-rex and the fairy: home 6–8, also in 3–5). It is listed in each of those bands' `AVATAR_BANDS`, after
+the band's own, so the slot defaults never change.
+
+- **Proportions follow the band shown.** Pass the band (`drawAvatar`/`avatarShapes` option `band`, the third argument
+  of `iconShapes`, the `band` option of `drawAvatarIcon`/`avatarIconSvg`): an avatar offered in that band takes its
+  proportions (`bodyBand(def, band)`), so the lion in a 3–5 picker or game has the toddler build. The band is the
+  child's (`Player.ageRange` on the phone and the TV) or the picker's.
+- **Without a band, or with a band it is not offered in, it keeps its home band's** proportions: exactly what it drew
+  before. Avatars of one band, and the mascot (always 6–8), ignore `band` entirely, so passing it is always safe.
+- **Its style stays its home band's** (outline colour, palette): one look, whatever the band. `bandOf(id)` still
+  returns the home band (one value, as before); `bandsOf(id)` returns them all.
+- The SDK's and the engine's `drawAvatar` don't pass a band yet: in games these avatars are drawn with their home
+  band's proportions, as are their name tags.
+
 ## How it is drawn
 
 One source of truth: the rig and the portrait build a small **shape list** (`circle`, `ellipse`, `rect`, `path`,
@@ -83,8 +108,8 @@ a change that alters them by accident fails the tests (`UPDATE_SNAPSHOT=1` after
 - **Limbs**: thick round strokes from shoulder to elbow to wrist (0.22 U) and from hip to knee to ankle (0.28 U),
   each with an outline. Arms start just below the shoulder. Legs start inside the torso, so nothing looks detached.
   Hands are round caps. Feet are ovals, flippers or boots.
-- **Proportions by band** (`BAND_BODY`): the joints are always the child's, only sizes change. An avatar of every
-  band (`'all'`, the mascot) takes the 6–8 row.
+- **Proportions by band** (`BAND_BODY`): the joints are always the child's, only sizes change. An avatar of no
+  band (`'all'`, the mascot) takes the 6–8 row. An avatar of two bands takes the row of the band shown (above).
 
   | band | head radius | head centre above the shoulders | arm / leg thickness | hand radius | torso below the hips | torso min half width (shoulders / hips) |
   | --- | --- | --- | --- | --- | --- | --- |
@@ -95,9 +120,14 @@ a change that alters them by accident fails the tests (`UPDATE_SNAPSHOT=1` after
   In 3–5 an arm raised well above the shoulders is drawn over the big head, which would hide it.
 - **Head**: radius by band (above), centred above the shoulder midpoint along the torso axis. It follows the
   nose a little (at most 0.35 radii) and tilts with the ear line, or the eye line if the ears are missing. The tilt is
-  clamped to ±0.5 rad from the torso, and a swapped pair is treated as a child facing away.
+  clamped to ±0.5 rad from the torso, and a swapped pair is treated as a child facing away. The `snout-long` head
+  (the T-rex) is turned three-quarters, its snout on the left, away from the tail; its portrait is centred on the
+  head's width, snout included.
 - **Tail, wings, backpack, tentacles**: these hang off the hips or the back, in torso coordinates, and are drawn
   behind the body. The tail goes on the child's right. Portraits leave it out.
+- **Held things**: the fairy's `wand` is in the hand on the right, following it (up and out from the body, leaning
+  with the forearm), under the hand; no wrist, no wand. Portraits leave it out. `tiny-arms` only makes the arms
+  slimmer, with small clawed hands: they still reach the child's hands.
 - **Draw order**: back extras, legs, torso, arms, head, then (3–5 only) raised arms.
 - **Degrading**: a point counts as seen at visibility ≥ 0.5. If the elbow or knee is missing, that limb is hidden.
   If the wrist or ankle is missing, the limb ends at the elbow or knee. If the hips are missing, the torso is one U
@@ -106,7 +136,8 @@ a change that alters them by accident fails the tests (`UPDATE_SNAPSHOT=1` after
 ## Adding an avatar
 
 1. Add an entry to `AVATARS` in `src/defs.ts` and its id to its band in `AVATAR_BANDS` (`src/index.ts`) (an avatar
-   of band `'all'` goes in every band, after the mascot). Choose a new
+   of band `'all'` goes in no band (only the mascot, the host, is one); one offered in another band too lists it in `alsoIn` and goes
+   in that band's list as well, after the band's own). Choose a new
    kebab-case `id` and never rename it later, because phones store it. Fill in `name.en`, `name.it` and `band`. Pick a `palette` with `body`, `limbs`, `belly`, `accent` and
    `outline`, plus optional `hands`, `feet` and `ears`. Then choose a `head` shape, `ears`, the `face` (eyes, mouth,
    muzzle, nose, cheeks), a `tail`, `headExtras` and `bodyExtras`. `extraColors` covers stripes, spots, manes and
@@ -115,7 +146,8 @@ a change that alters them by accident fails the tests (`UPDATE_SNAPSHOT=1` after
    body colour that reads on both the night background (#1f1813) and a light one. Keep the dark outline.
 3. If a part does not exist yet, add a kind to the union in `src/types.ts` and draw it in `src/head.ts` (head units:
    radius 1, y down) or in `src/rig.ts` (torso units of U). Don't write per-id special cases.
-4. Run `pnpm -F @fabi-play/avatars preview <dir> --details` and look at the PNGs: the portrait, every pose, and
+4. Run `pnpm -F @fabi-play/avatars preview <dir> --details` and look at the PNGs (an avatar of two bands is shown
+   in each, with that band's proportions): the portrait, every pose, and
    both backgrounds. Then run `pnpm -F @fabi-play/avatars test`.
 
 ## Scripts

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-// @fabi-play/avatars: 37 child-friendly avatars: Fabi the fox in every age band and 12 per band, drawn from a body pose, on canvas or as SVG portraits for the pickers. See https://docs.fabiplay.app.
+// @fabi-play/avatars: 39 child-friendly avatars: Fabi the fox in every age band, 12 per band, a T-rex and a fairy, drawn from a body pose, on canvas or as SVG portraits for the pickers. See https://docs.fabiplay.app.
 // Generated by scripts/build-lib.mjs (fabiplay-kit) from the sources: do not edit.
 
 import { AgeRange, Body as Body$1 } from '@fabi-play/protocol';
@@ -116,21 +116,21 @@ export interface Palette {
 	hair?: string;
 }
 /** The head's outline. */
-export type HeadShape = "round" | "wide" | "tall" | "square" | "bulb" | "bucket";
+export type HeadShape = "round" | "wide" | "tall" | "square" | "bulb" | "bucket" | "snout-long";
 /** The ears (or what is in their place: horns, antennae, a fin). */
-export type EarKind = "none" | "pointy" | "round" | "big-round" | "long" | "side" | "tufts" | "antenna" | "antennae" | "horns" | "unicorn" | "floppy" | "droopy" | "fin" | "human";
+export type EarKind = "none" | "pointy" | "round" | "big-round" | "long" | "side" | "tufts" | "antenna" | "antennae" | "horns" | "unicorn" | "floppy" | "droopy" | "fin" | "human" | "pixie";
 /** How the eyes are drawn. */
 export type EyeKind = "dot" | "big" | "mask" | "screen" | "almond" | "visor" | "calm" | "slit" | "goggle" | "bead";
 /** How the mouth (or beak) is drawn. */
-export type MouthKind = "none" | "smile" | "open" | "cat" | "beak" | "teeth" | "grill" | "tiny" | "smirk" | "bill" | "hook" | "jaws";
+export type MouthKind = "none" | "smile" | "open" | "cat" | "beak" | "teeth" | "grill" | "tiny" | "smirk" | "bill" | "hook" | "jaws" | "toothy";
 /** The patch around the nose and mouth. */
 export type MuzzleKind = "none" | "oval" | "heart" | "monkey" | "disc" | "cheeks" | "band";
 /** The tail, behind the body. */
-export type TailKind = "none" | "fluffy" | "brush" | "pom" | "long" | "curl" | "tuft" | "striped" | "spiky" | "arrow" | "fish" | "plume";
+export type TailKind = "none" | "fluffy" | "brush" | "pom" | "long" | "curl" | "tuft" | "striped" | "spiky" | "arrow" | "fish" | "plume" | "thick";
 /** Things on the head. */
-export type HeadExtra = "mane" | "rainbow-mane" | "stripes" | "spikes" | "spots" | "curl" | "helmet" | "bolts" | "whiskers" | "tuft" | "brows" | "eggshell" | "wool" | "eye-spot" | "crest" | "forehead" | "gills" | "ruff" | "hair" | "curls" | "locks" | "ninja-hood" | "cap" | "safari-hat" | "wizard-hat" | "plume" | "stripe" | "bandana" | "eye-patch" | "dive-mask" | "domino";
+export type HeadExtra = "mane" | "rainbow-mane" | "stripes" | "spikes" | "spots" | "curl" | "helmet" | "bolts" | "whiskers" | "tuft" | "brows" | "eggshell" | "wool" | "eye-spot" | "crest" | "forehead" | "gills" | "ruff" | "hair" | "curls" | "locks" | "ninja-hood" | "cap" | "safari-hat" | "wizard-hat" | "plume" | "stripe" | "bandana" | "eye-patch" | "dive-mask" | "domino" | "bun" | "flower-crown";
 /** Things on the body. */
-export type BodyExtra = "wings" | "backpack" | "sheet" | "tentacles" | "panel" | "badge" | "joints" | "feathers" | "flippers" | "boots" | "scarf" | "spots" | "wool" | "robe" | "cape" | "fins" | "tank" | "straps" | "belt" | "stripes" | "pauldrons" | "emblem" | "pocket" | "racing-stripe" | "star";
+export type BodyExtra = "wings" | "backpack" | "sheet" | "tentacles" | "panel" | "badge" | "joints" | "feathers" | "flippers" | "boots" | "scarf" | "spots" | "wool" | "robe" | "cape" | "fins" | "tank" | "straps" | "belt" | "stripes" | "pauldrons" | "emblem" | "pocket" | "racing-stripe" | "star" | "tiny-arms" | "strong-legs" | "wings-fairy" | "wand" | "petals";
 /** An avatar's face. */
 export interface FaceDef {
 	/** How the eyes are drawn. */
@@ -152,7 +152,7 @@ export interface FaceDef {
 	/** Eyebrows of this colour (people): a little attitude. */
 	brows?: string;
 }
-/** The age band an avatar is for, or 'all': offered in every band (Fabi the fox, the app's mascot). */
+/** The age band an avatar is for, or 'all': of no band (Fabi the fox, the app's mascot: the host, in no picker). */
 export type AvatarBand = AgeRange | "all";
 /** An avatar, as data: one renderer draws any definition. */
 export interface AvatarDef {
@@ -164,11 +164,17 @@ export interface AvatarDef {
 		it: string;
 	};
 	/**
-	 * The age band the avatar is for: its style and its body proportions (see BAND_BODY in rig.ts). 'all': in every
-	 * band's list, drawn with the 6–8 proportions.
+	 * The age band the avatar is for, its home: its style and its body proportions (see BAND_BODY in rig.ts). 'all': in
+	 * no band's list (the mascot), drawn with the 6–8 proportions. See alsoIn for an avatar offered in other bands too.
 	 */
 	band: AvatarBand;
-	/** A special avatar (the mascot): first in every band's list; pickers may mark it. */
+	/**
+	 * Other age bands the avatar is also offered in (listed in their AVATAR_BANDS too), besides its own band. Shown in
+	 * one of them, it is drawn with that band's proportions (bodyBand(def, band)); its band stays its home: its style
+	 * (outline), bandOf, and its proportions when the band shown is not known. Not for 'all' (the mascot).
+	 */
+	alsoIn?: readonly AgeRange[];
+	/** A special avatar (the mascot): the host, not a player; in no band's list (AVATAR_BANDS). */
 	special?: boolean;
 	/** Its colours. */
 	palette: Palette;
@@ -285,8 +291,14 @@ export interface BandBody {
 	armsOverHead: boolean;
 }
 export declare const BAND_BODY: Record<AgeRange, BandBody>;
-/** The proportions an avatar is drawn with: its band's, 6–8's for an avatar of every band ('all') or anything else. */
-export declare const bodyBand: (def: Pick<AvatarDef, "band">) => AgeRange;
+/**
+ * The proportions an avatar is drawn with: its band's, 6–8's for the mascot ('all') or anything else.
+ * shown: the band it is shown in (the child's, the picker's), when known; an avatar offered in more than one band
+ * (alsoIn) takes the proportions of the one shown, any other keeps its own (the mascot always 6–8's).
+ */
+export declare const bodyBand: (def: Pick<AvatarDef, "band"> & {
+	alsoIn?: readonly AgeRange[];
+}, shown?: AgeRange) => AgeRange;
 /** Head radius in torso units (6–8; see BAND_BODY for the others). */
 export declare const HEAD: number;
 /** The head tilts at most this much (rad) from the shoulders' line. */
@@ -298,9 +310,12 @@ export declare const MAX_TILT = 0.3;
 export declare const TILT_DEAD_ZONE = 0.12;
 export interface RigOptions {
 	mirrored?: boolean;
-	/** Portraits leave the tail out: in a head-and-shoulders crop it would only peek in as a stray shape. */
+	/** Portraits leave the tail and the wand out: in a head-and-shoulders crop they would only peek in as stray shapes. */
 	portrait?: boolean;
-	/** Body proportions (see BAND_BODY); 6–8 by default. avatarShapes takes the avatar's own band. */
+	/**
+	 * Body proportions (see BAND_BODY); 6–8 by default. For avatarShapes, the band the avatar is shown in: it follows
+	 * it only for an avatar offered there too (alsoIn, see bodyBand); otherwise the avatar's own band.
+	 */
 	band?: AgeRange;
 }
 /** The torso frame: origin between the shoulders, r to the right, d down along the torso; lengths in pixels. */
@@ -360,13 +375,17 @@ export declare class BodyInterpolator {
 export declare function blend(a: Body$1, b: Body$1, u: number): Body$1;
 export declare const AVATAR_IDS: readonly string[];
 export type AvatarId = string;
-/** Fabi the fox, the app's mascot: an avatar of every band ('all'), first in each band's list. */
+/**
+ * Fabi the fox, the app's mascot ('all': no band of its own). Fabi is the host, not a player: in no band's list
+ * (AVATAR_BANDS), so pickers never offer it, but it is a valid avatar (isAvatarId, avatarById, drawAvatar) for the TV
+ * and for games, and a child saved with it before keeps it.
+ */
 export declare const MASCOT_ID: AvatarId;
 /**
- * The avatars of each age band, in the order the pickers show them: the mascot first (special: pickers may mark
- * it), then the band's own 12. The first four of the band's own are the defaults of the four player slots
- * (defaultAvatarFor in @fabi-play/protocol), not the mascot. Every avatar is in exactly one band, except those of
- * band 'all' (the mascot), which are in every band.
+ * The avatars of each age band, in the order the pickers show them: the band's own 12, then (3–5) the ones also
+ * offered there. The first four are the defaults of the four player slots (defaultAvatarFor in @fabi-play/protocol).
+ * Every avatar is in its own band and in those of its alsoIn; those of band 'all' (the mascot, MASCOT_ID) are in
+ * none: Fabi hosts, the children play. The lists are not all the same length.
  */
 export declare const AVATAR_BANDS: Readonly<Record<AgeRange, readonly AvatarId[]>>;
 /** The avatar of a child who has not picked one yet: the fox (6–8's first). */
@@ -376,13 +395,27 @@ export declare const isAvatarId: (v: unknown) => v is AvatarId;
 export declare const avatarById: (id: string) => AvatarDef | undefined;
 /** The avatars of an age band, in picker order (6–8 for anything that is not an age band). */
 export declare function avatarsFor(ageRange: AgeRange): readonly AvatarDef[];
-/** The age band of an avatar: 'all' for the mascot (in every band), 6–8 (the default avatar's) for an unknown id. */
+/**
+ * The age band of an avatar, its home: 'all' for the mascot (in no band's list), 6–8 (the default avatar's) for an
+ * unknown id. An avatar offered in more than one band has one home band (its style, its proportions when the band
+ * shown is not known); bandsOf gives every band it is offered in.
+ */
 export declare const bandOf: (id: AvatarId) => AvatarBand;
+/**
+ * Every age band whose list (AVATAR_BANDS) offers the avatar, youngest first; the default avatar's for an unknown id;
+ * none for the mascot (offered in no band).
+ */
+export declare const bandsOf: (id: AvatarId) => readonly AgeRange[];
 export interface DrawOptions {
 	/** 0–1, for the whole avatar. */
 	alpha?: number;
 	/** The body is in camera space (not mirrored like player space): flip it left to right. */
 	mirrored?: boolean;
+	/**
+	 * The age band the avatar is shown in (the child's), when known: an avatar offered in that band too (alsoIn) takes
+	 * its proportions; any other avatar keeps its own band's (see bodyBand).
+	 */
+	band?: AgeRange;
 }
 /**
  * Draws the avatar posed like the body. box is where player space (0–1) lands on the canvas, as for the silhouette
@@ -390,11 +423,18 @@ export interface DrawOptions {
  * Returns whether it drew.
  */
 export declare function drawAvatar(ctx: CanvasRenderingContext2D | Ctx2D, body: Body$1, def: AvatarDef | string, box: Box, opts?: DrawOptions): boolean;
-/** The portrait: head and shoulders of the neutral pose, framed in a size × size square at (0, 0). */
-export declare function iconShapes(def: AvatarDef | string, size: number): Shape[];
+/**
+ * The portrait: head and shoulders of the neutral pose, framed in a size × size square at (0, 0). band: the band the
+ * picker shows (see DrawOptions.band).
+ */
+export declare function iconShapes(def: AvatarDef | string, size: number, band?: AgeRange): Shape[];
+export interface IconOptions {
+	/** The band the picker shows (see DrawOptions.band). */
+	band?: AgeRange;
+}
 /** Draws the portrait in the square (x, y, size), clipped to it. */
-export declare function drawAvatarIcon(ctx: CanvasRenderingContext2D | Ctx2D, def: AvatarDef | string, x: number, y: number, size: number): void;
-export interface IconSvgOptions {
+export declare function drawAvatarIcon(ctx: CanvasRenderingContext2D | Ctx2D, def: AvatarDef | string, x: number, y: number, size: number, opts?: IconOptions): void;
+export interface IconSvgOptions extends IconOptions {
 	/** A background colour for the square; transparent by default. */
 	background?: string;
 	/** Corner radius of the background, in pixels. */

package/dist/index.js

@@ -120,6 +120,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",
@@ -486,6 +487,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"]
   }
 ];
 
@@ -780,6 +814,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],
@@ -817,7 +852,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) {
@@ -832,6 +875,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")) {
@@ -840,6 +890,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);
@@ -861,7 +912,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 });
@@ -883,6 +934,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 });
@@ -947,6 +1016,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",
@@ -965,6 +1036,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 };
@@ -1045,6 +1129,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;
@@ -1077,15 +1165,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":
@@ -1194,6 +1282,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]) {
@@ -1220,7 +1323,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;
@@ -1314,7 +1420,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 [];
@@ -1346,8 +1452,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 [
@@ -1361,7 +1467,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 [
@@ -1394,7 +1500,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]) {
@@ -1409,6 +1528,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;
@@ -1626,6 +1746,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);
@@ -1650,6 +1771,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;
@@ -1803,6 +1936,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([
@@ -1835,6 +1992,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;
+}
 
 // src/poses.ts
 var STAND = {
@@ -2016,9 +2248,9 @@ function blend(a, b, u) {
 var AVATAR_IDS = AVATARS.map((a) => a.id);
 var MASCOT_ID = "mascot";
 var AVATAR_BANDS = {
-  "3-5": [MASCOT_ID, "bunny", "bear", "panda", "penguin", "koala", "frog", "cat", "owl", "chick", "puppy", "lamb", "duckling"],
-  "6-8": [MASCOT_ID, "fox", "lion", "dragon", "unicorn", "tiger", "monkey", "dinosaur", "octopus", "ghost", "shark", "wolf", "parrot"],
-  "9-12": [MASCOT_ID, "robot", "astronaut", "ninja", "skater", "alien", "explorer", "wizard", "knight", "racer", "pirate", "diver", "hero"]
+  "3-5": ["bunny", "bear", "panda", "penguin", "koala", "frog", "cat", "owl", "chick", "puppy", "lamb", "duckling", "lion", "trex", "fairy"],
+  "6-8": ["fox", "lion", "dragon", "unicorn", "tiger", "monkey", "dinosaur", "trex", "octopus", "ghost", "shark", "wolf", "parrot", "fairy"],
+  "9-12": ["robot", "astronaut", "ninja", "skater", "alien", "explorer", "wizard", "knight", "racer", "pirate", "diver", "hero"]
 };
 var BY_ID = new Map(AVATARS.map((a) => [a.id, a]));
 var DEFAULT_AVATAR = BY_ID.get("fox");
@@ -2029,9 +2261,13 @@ function avatarsFor(ageRange) {
   return ids.map((id) => BY_ID.get(id));
 }
 var bandOf = (id) => BY_ID.get(id)?.band ?? DEFAULT_AVATAR.band;
+var bandsOf = (id) => {
+  const known = BY_ID.has(id) ? id : DEFAULT_AVATAR.id;
+  return AGE_RANGES.filter((r) => AVATAR_BANDS[r].includes(known));
+};
 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);
@@ -2039,25 +2275,27 @@ 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 drawAvatarIcon(ctx, def, x, y, size) {
+function drawAvatarIcon(ctx, def, x, y, size, opts = {}) {
   ctx.save();
   ctx.beginPath();
   ctx.rect(x, y, size, size);
   ctx.clip();
   ctx.translate(x, y);
-  drawShapes(ctx, iconShapes(def, size));
+  drawShapes(ctx, iconShapes(def, size, opts.band));
   ctx.restore();
 }
 var clipCount = 0;
@@ -2066,7 +2304,7 @@ function avatarIconSvg(def, size, opts = {}) {
   const s = Math.round(size * 100) / 100;
   const bg = opts.background ? `<rect width="${s}" height="${s}" rx="${opts.radius ?? 0}" fill="${opts.background}"/>` : "";
   const clip = `av-${d.id}-${String(s).replace(".", "_")}-${++clipCount}`;
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 ${s} ${s}"><title>${d.name.en}</title><defs><clipPath id="${clip}"><rect width="${s}" height="${s}" rx="${opts.radius ?? 0}"/></clipPath></defs>` + bg + `<g clip-path="url(#${clip})">${shapesToSvg(iconShapes(d, size))}</g></svg>`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 ${s} ${s}"><title>${d.name.en}</title><defs><clipPath id="${clip}"><rect width="${s}" height="${s}" rx="${opts.radius ?? 0}"/></clipPath></defs>` + bg + `<g clip-path="url(#${clip})">${shapesToSvg(iconShapes(d, size, opts.band))}</g></svg>`;
 }
 var avatarIconDataUri = (def, size, opts) => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(avatarIconSvg(def, size, opts))}`;
 function smoothBody(prev, next, amount = 0.5) {
@@ -2188,6 +2426,7 @@ export {
   avatarShapes,
   avatarsFor,
   bandOf,
+  bandsOf,
   blend,
   bodyBand,
   bounds,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabi-play/avatars",
-  "version": "0.3.0",
-  "description": "37 child-friendly avatars: Fabi the fox in every age band and 12 per band, drawn from a body pose, on canvas or as SVG portraits for the pickers.",
+  "version": "0.5.0",
+  "description": "39 child-friendly avatars: Fabi the fox in every age band, 12 per band, a T-rex and a fairy, drawn from a body pose, on canvas or as SVG portraits for the pickers.",
   "keywords": [
     "fabi-play",
     "avatars",
@@ -32,7 +32,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@fabi-play/protocol": "^0.3.0"
+    "@fabi-play/protocol": "^0.5.0"
   },
   "devDependencies": {
     "@types/node": "24.10.1",