angular-avatar-player 0.1.0

package/fesm2022/angular-avatar-player.mjs

@@ -0,0 +1,1664 @@
+import * as i0 from '@angular/core';
+import { Injectable, input, inject, ElementRef, NgZone, signal, computed, effect, ViewEncapsulation, Component, Input, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * - `base`   — main face fill
+ * - `ear`    — secondary tone for ears
+ * - `lip`    — lips
+ * - `shadow` — a THIRD tone reserved for small linework (nose stroke).
+ *
+ * `shadow` used to be conflated with `ear`, which made the nose vanish
+ * on the two darkest tones: `deep` ear is #3C200E against a #4A2912 face,
+ * far too close to read as a line. `shadow` is always a clear step darker
+ * than `ear` so it stays legible at the 2px stroke width we use.
+ *
+ * The style guide allows at most two tones per *region*. The nose is its
+ * own region, so a dedicated third value is compliant.
+ */
+const SKIN_TONES = {
+    light: { base: '#FDDBB4', ear: '#F5C89A', lip: '#E8967A', shadow: '#E0A473' },
+    medium: { base: '#F0AC78', ear: '#E09A62', lip: '#C97050', shadow: '#C67C45' },
+    tan: { base: '#D4845A', ear: '#C0724A', lip: '#A8533A', shadow: '#A15532' },
+    dark: { base: '#8D5524', ear: '#7A4820', lip: '#6B3A18', shadow: '#5E3312' },
+    deep: { base: '#4A2912', ear: '#3C200E', lip: '#5C2E18', shadow: '#291505' },
+};
+
+const HAIR_COLORS = {
+    black: '#1A1A2E',
+    brown: '#6B3A2A',
+    blonde: '#E8C96E',
+    red: '#C0392B',
+    gray: '#9E9E9E',
+    white: '#F0F0F0',
+};
+
+const EYE_COLORS = {
+    brown: '#6B3A2A',
+    blue: '#2980B9',
+    green: '#27AE60',
+    gray: '#7F8C8D',
+    black: '#1A1A2E',
+};
+
+// libs/avatar-player/src/lib/geometry/svg-parts/hair-shapes.ts/svg-parts/hair-shapes.ts
+// 7 haircut styles: short, long, curly, bald, bun, ponytail, mohawk
+// Each provides back (rendered behind face) + front (rendered on top)
+// All shapes: solid fill, no gradients, no strokes > 2.5, flat silhouettes
+// Colors use CSS var: fill="var(--hair-color)"
+// Face ellipse: cx=100 cy=88 rx=52 ry=56 → top of head ~y=32
+const HAIR_SHAPES = {
+    short: {
+        back: `
+      <ellipse cx="100" cy="62" rx="54" ry="34" fill="var(--hair-color)"/>`,
+        front: `
+      <path d="M48,75 Q48,32 100,28 Q152,32 152,75 Q140,58 100,54 Q60,58 48,75 Z"
+            fill="var(--hair-color)"/>`,
+    },
+    long: {
+        back: `
+      <path d="M44,70 Q44,28 100,22 Q156,28 156,70 L156,140 Q156,150 148,150
+              L52,150 Q44,150 44,140 Z"
+            fill="var(--hair-color)"/>`,
+        front: `
+      <path d="M46,78 Q46,28 100,22 Q154,28 154,78 Q142,54 100,48 Q58,54 46,78 Z"
+            fill="var(--hair-color)"/>
+      <path d="M46,78 L46,110 Q48,95 52,85 Z" fill="var(--hair-color)"/>
+      <path d="M154,78 L154,110 Q152,95 148,85 Z" fill="var(--hair-color)"/>`,
+    },
+    curly: {
+        back: `
+      <path d="M42,80 Q38,30 100,22 Q162,30 158,80 L160,135 Q155,145 148,140
+              Q142,148 132,142 Q122,150 112,142 Q102,148 92,142 Q82,150 72,142
+              Q62,148 52,140 Q45,145 40,135 Z"
+            fill="var(--hair-color)"/>`,
+        front: `
+      <path d="M44,82 Q42,30 100,22 Q158,30 156,82
+              Q148,60 130,50 Q100,42 70,50 Q52,60 44,82 Z"
+            fill="var(--hair-color)"/>
+      <circle cx="44" cy="88" r="8" fill="var(--hair-color)"/>
+      <circle cx="156" cy="88" r="8" fill="var(--hair-color)"/>
+      <circle cx="48" cy="100" r="7" fill="var(--hair-color)"/>
+      <circle cx="152" cy="100" r="7" fill="var(--hair-color)"/>`,
+    },
+    bald: {
+        back: '',
+        front: '',
+    },
+    bun: {
+        back: `
+      <circle cx="100" cy="24" r="18" fill="var(--hair-color)"/>
+      <ellipse cx="100" cy="60" rx="54" ry="32" fill="var(--hair-color)"/>`,
+        front: `
+      <path d="M48,75 Q48,32 100,28 Q152,32 152,75 Q140,56 100,52 Q60,56 48,75 Z"
+            fill="var(--hair-color)"/>`,
+    },
+    ponytail: {
+        back: `
+      <ellipse cx="100" cy="62" rx="54" ry="34" fill="var(--hair-color)"/>
+      <path d="M130,42 Q158,40 162,60 Q166,90 158,130 Q154,142 148,140
+              Q152,120 150,80 Q148,50 130,42 Z"
+            fill="var(--hair-color)"/>`,
+        front: `
+      <path d="M48,75 Q48,32 100,28 Q152,32 152,75 Q140,56 100,52 Q60,56 48,75 Z"
+            fill="var(--hair-color)"/>`,
+    },
+    mohawk: {
+        back: '',
+        front: `
+      <!-- Shaved sides – faint stubble -->
+      <path d="M54,70 Q54,42 100,34 Q146,42 146,70 Q136,56 100,52 Q64,56 54,70 Z"
+            fill="var(--hair-color)" opacity="0.12"/>
+      <!-- Mohawk crest – 5 pointed spikes -->
+      <path d="M84,64 Q84,48 86,40
+               L80,20 L89,36
+               L86,6  L95,30
+               L100,2 L105,30
+               L114,6 L111,36
+               L120,20 L114,40
+               Q116,48 116,64
+               Q108,54 100,52 Q92,54 84,64 Z"
+            fill="var(--hair-color)"/>`,
+    },
+};
+
+// libs/avatar-player/src/lib/geometry/svg-parts/eye-shapes.ts/svg-parts/eye-shapes.ts
+// 4 eye styles: round, almond, wide, narrow
+// Each style provides sclera + iris SVG strings
+// Eyes are positioned at cx=74 (left) and cx=126 (right), cy=88
+// Sclera r≈11, iris r≈9, pupil r≈5 — large eyes per style guide
+// Colors use CSS vars: fill="var(--eye-color)"
+const EYE_SHAPES = {
+    round: {
+        sclera: `
+      <circle cx="74" cy="88" r="11" fill="#FFF"/>
+      <circle cx="126" cy="88" r="11" fill="#FFF"/>`,
+        iris: `
+      <circle cx="74" cy="88" r="9" fill="var(--eye-color)"/>
+      <circle cx="74" cy="88" r="5" fill="#1A1A2E"/>
+      <circle cx="77" cy="85" r="2" fill="#FFF"/>
+      <circle cx="126" cy="88" r="9" fill="var(--eye-color)"/>
+      <circle cx="126" cy="88" r="5" fill="#1A1A2E"/>
+      <circle cx="129" cy="85" r="2" fill="#FFF"/>`,
+    },
+    almond: {
+        sclera: `
+      <ellipse cx="74" cy="88" rx="12" ry="9" fill="#FFF"/>
+      <ellipse cx="126" cy="88" rx="12" ry="9" fill="#FFF"/>`,
+        iris: `
+      <circle cx="74" cy="88" r="8" fill="var(--eye-color)"/>
+      <circle cx="74" cy="88" r="5" fill="#1A1A2E"/>
+      <circle cx="77" cy="85" r="2" fill="#FFF"/>
+      <circle cx="126" cy="88" r="8" fill="var(--eye-color)"/>
+      <circle cx="126" cy="88" r="5" fill="#1A1A2E"/>
+      <circle cx="129" cy="85" r="2" fill="#FFF"/>`,
+    },
+    wide: {
+        sclera: `
+      <ellipse cx="74" cy="88" rx="13" ry="11" fill="#FFF"/>
+      <ellipse cx="126" cy="88" rx="13" ry="11" fill="#FFF"/>`,
+        iris: `
+      <circle cx="74" cy="88" r="9" fill="var(--eye-color)"/>
+      <circle cx="74" cy="88" r="5" fill="#1A1A2E"/>
+      <circle cx="77" cy="85" r="2.5" fill="#FFF"/>
+      <circle cx="126" cy="88" r="9" fill="var(--eye-color)"/>
+      <circle cx="126" cy="88" r="5" fill="#1A1A2E"/>
+      <circle cx="129" cy="85" r="2.5" fill="#FFF"/>`,
+    },
+    narrow: {
+        sclera: `
+      <ellipse cx="74" cy="88" rx="12" ry="7" fill="#FFF"/>
+      <ellipse cx="126" cy="88" rx="12" ry="7" fill="#FFF"/>`,
+        iris: `
+      <circle cx="74" cy="88" r="7" fill="var(--eye-color)"/>
+      <circle cx="74" cy="88" r="4" fill="#1A1A2E"/>
+      <circle cx="77" cy="86" r="1.5" fill="#FFF"/>
+      <circle cx="126" cy="88" r="7" fill="var(--eye-color)"/>
+      <circle cx="126" cy="88" r="4" fill="#1A1A2E"/>
+      <circle cx="129" cy="86" r="1.5" fill="#FFF"/>`,
+    },
+};
+
+// libs/avatar-player/src/lib/geometry/svg-parts/mustache-shapes.ts/svg-parts/mustache-shapes.ts
+// 5 mustache styles: none, thin, thick, handlebar, chevron
+// Positioned below nose (~y=112) and above mouth (~y=119)
+// Flat fill only, no gradients, stroke-width ≤ 3
+// Color: fill="var(--hair-color)"
+const MUSTACHE_SHAPES = {
+    none: '',
+    thin: `
+    <!-- Thin pencil mustache -->
+    <path d="M82,114 Q91,118 100,115 Q109,118 118,114"
+          stroke="var(--hair-color)" stroke-width="3" fill="none"
+          stroke-linecap="round"/>`,
+    thick: `
+    <!-- Thick walrus mustache -->
+    <path d="M78,111 Q82,112 88,114 Q94,117 100,115
+            Q106,117 112,114 Q118,112 122,111
+            L124,113 Q120,120 112,122 Q106,123 100,122
+            Q94,123 88,122 Q80,120 76,113 Z"
+          fill="var(--hair-color)"/>`,
+    handlebar: `
+    <!-- Handlebar mustache with curled tips -->
+    <path d="M80,112 Q90,118 100,115 Q110,118 120,112
+            L122,114 Q112,121 100,119 Q88,121 78,114 Z"
+          fill="var(--hair-color)"/>
+    <!-- Left curl -->
+    <path d="M80,113 Q74,110 72,114 Q70,118 73,122"
+          stroke="var(--hair-color)" stroke-width="3.5" fill="none"
+          stroke-linecap="round"/>
+    <!-- Right curl -->
+    <path d="M120,113 Q126,110 128,114 Q130,118 127,122"
+          stroke="var(--hair-color)" stroke-width="3.5" fill="none"
+          stroke-linecap="round"/>`,
+    chevron: `
+    <!-- Chevron mustache — wide inverted V shape -->
+    <path d="M76,111 L88,112 Q94,118 100,116 Q106,118 112,112
+            L124,111 L126,113 Q116,122 100,120
+            Q84,122 74,113 Z"
+          fill="var(--hair-color)"/>`,
+};
+
+// libs/avatar-player/src/lib/geometry/svg-parts/beard-shapes.ts/svg-parts/beard-shapes.ts
+// 5 beard styles: none, stubble, short, long, goatee
+//
+// The outer edge of both full beards follows the face ellipse
+// (cx=100 cy=88 rx=52 ry=56) rather than a hand-typed curve. An earlier
+// version kept its outer edge near x=49 down to y=118, but the face has
+// already narrowed to x=55 by then, so the beard projected past the jaw
+// as a dark wedge on each side.
+//
+// Face half-width by row, which is what the outer curves are matched to:
+//   y=96  -> 51.5   y=110 -> 47.9   y=120 -> 45.0
+//   y=130 -> 37.2   y=140 -> 26.0   chin -> 0 (y=144)
+//
+// Flat fill only, no gradients, stroke-width ≤ 2.5
+// Color: fill="var(--hair-color)"
+const BEARD_SHAPES = {
+    none: '',
+    stubble: `
+    <!-- 5 o'clock shadow following the jawline. The previous version ran to
+         x=76/124 at y=140, where the face half-width is only ~19 (x 81..119),
+         so it overhung the jaw by ~5px on each side and had to be cut back by
+         the face clip. It now ends at the chin instead of hanging below it. -->
+    <path d="M72,114 Q70,126 80,136 Q90,143 100,144 Q110,143 120,136 Q130,126 128,114
+             Q122,126 100,132 Q78,126 72,114 Z"
+          fill="var(--hair-color)" opacity="0.2"/>`,
+    short: `
+    <!-- Jaw-hugging beard. Outer edge is inset 3px inside the face ellipse so
+         it never projects past the jaw; inner edge sits above it, leaving a
+         band that thins at the cheeks and thickens at the chin. -->
+    <path d="M52,96
+             C52,108 56,120 64,128
+             C72,136 86,143 100,143
+             C114,143 128,136 136,128
+             C144,120 148,108 148,96
+             C146,104 140,114 130,121
+             C120,128 110,131 100,131
+             C90,131 80,128 70,121
+             C60,114 54,104 52,96 Z"
+          fill="var(--hair-color)"/>`,
+    long: `
+    <!-- Same jaw-hugging top, then flowing below the chin to a rounded point. -->
+    <path d="M52,96
+             C52,110 58,126 70,138
+             C80,148 90,160 95,172
+             C96,176 104,176 105,172
+             C110,160 120,148 130,138
+             C142,126 148,110 148,96
+             C146,104 140,114 130,121
+             C120,128 110,131 100,131
+             C90,131 80,128 70,121
+             C60,114 54,104 52,96 Z"
+          fill="var(--hair-color)"/>`,
+    goatee: `
+    <!-- Soul patch -->
+    <ellipse cx="100" cy="126" rx="4" ry="2.5" fill="var(--hair-color)"/>
+    <!-- Compact chin goatee -->
+    <path d="M88,130 Q86,140 92,147 Q96,152 100,153 Q104,152 108,147 Q114,140 112,130
+             Q108,138 100,142 Q92,138 88,130 Z"
+          fill="var(--hair-color)"/>`,
+};
+
+// libs/avatar-player/src/lib/geometry/svg-parts/glasses-shapes.ts/svg-parts/glasses-shapes.ts
+// 5 glasses styles: none, round, rectangular, sunglasses, monocle
+// Positioned over eyes at cy=88, cx=74 (left), cx=126 (right)
+// Stroke-only where possible, flat fills, no gradients
+// stroke-width ≤ 2.5
+const GLASSES_SHAPES = {
+    none: '',
+    round: `
+    <circle cx="74" cy="88" r="16" fill="none" stroke="#1A1A2E" stroke-width="2"/>
+    <circle cx="126" cy="88" r="16" fill="none" stroke="#1A1A2E" stroke-width="2"/>
+    <line x1="90" y1="88" x2="110" y2="88" stroke="#1A1A2E" stroke-width="2"/>
+    <line x1="58" y1="88" x2="48" y2="86" stroke="#1A1A2E" stroke-width="1.5"/>
+    <line x1="142" y1="88" x2="152" y2="86" stroke="#1A1A2E" stroke-width="1.5"/>`,
+    rectangular: `
+    <rect x="58" y="78" width="32" height="20" rx="4" fill="none"
+          stroke="#1A1A2E" stroke-width="2"/>
+    <rect x="110" y="78" width="32" height="20" rx="4" fill="none"
+          stroke="#1A1A2E" stroke-width="2"/>
+    <line x1="90" y1="88" x2="110" y2="88" stroke="#1A1A2E" stroke-width="2"/>
+    <line x1="58" y1="86" x2="48" y2="84" stroke="#1A1A2E" stroke-width="1.5"/>
+    <line x1="142" y1="86" x2="152" y2="84" stroke="#1A1A2E" stroke-width="1.5"/>`,
+    sunglasses: `
+    <path d="M58,82 Q58,76 66,76 L82,76 Q90,76 90,82 L90,94 Q90,100 82,100
+            L66,100 Q58,100 58,94 Z" fill="#1A1A2E"/>
+    <path d="M110,82 Q110,76 118,76 L134,76 Q142,76 142,82 L142,94 Q142,100 134,100
+            L118,100 Q110,100 110,94 Z" fill="#1A1A2E"/>
+    <line x1="90" y1="86" x2="110" y2="86" stroke="#1A1A2E" stroke-width="2.5"/>
+    <line x1="58" y1="84" x2="48" y2="82" stroke="#1A1A2E" stroke-width="2"/>
+    <line x1="142" y1="84" x2="152" y2="82" stroke="#1A1A2E" stroke-width="2"/>`,
+    monocle: `
+    <circle cx="126" cy="88" r="16" fill="none" stroke="#C9A84C" stroke-width="2"/>
+    <line x1="126" y1="104" x2="120" y2="140" stroke="#C9A84C" stroke-width="1.5"/>`,
+};
+
+// libs/avatar-player/src/lib/geometry/svg-parts/profession-layers.ts/svg-parts/profession-layers.ts
+// 9 professions: none, doctor, engineer, teacher, chef, police, astronaut, artist, business
+// Each provides: body (shoulders/clothing) + accessory (badge/hat/item on top of head)
+// Canvas: 200×200. Face center (100,88). Neck x=88–112, y=135–157.
+// Body renders as layer 1 (below head). Accessory renders as layer 14 (above hair).
+// Flat fills only, no gradients/filters, stroke-width ≤ 2.5
+const PROFESSION_LAYERS = {
+    // ─── None: Plain crew-neck T-shirt ──────────────────
+    none: {
+        body: `
+      <path d="M30,200 Q30,158 55,150 Q75,143 88,140
+              L88,145 Q90,148 100,148 Q110,148 112,145 L112,140
+              Q125,143 145,150 Q170,158 170,200 Z" fill="#6B7280"/>
+      <!-- Collar line -->
+      <path d="M88,145 Q90,150 100,151 Q110,150 112,145"
+            fill="none" stroke="#5B6370" stroke-width="1.5" stroke-linecap="round"/>`,
+        accessory: '',
+    },
+    // ─── Doctor: White lab coat over blue scrubs, stethoscope ───
+    doctor: {
+        body: `
+      <!-- Blue scrub underneath -->
+      <path d="M30,200 Q30,158 55,150 Q75,143 88,140
+              L88,145 Q90,148 100,148 Q110,148 112,145 L112,140
+              Q125,143 145,150 Q170,158 170,200 Z" fill="#3B82F6"/>
+      <!-- V-neck scrub neckline -->
+      <path d="M88,140 L96,155 L100,152 L104,155 L112,140"
+            fill="#3B82F6" stroke="#2563EB" stroke-width="1"/>
+      <!-- White lab coat — open front, over shoulders -->
+      <path d="M30,200 Q30,158 55,150 Q70,145 80,142
+              L82,155 L90,200 Z" fill="#F8FAFC"/>
+      <path d="M170,200 Q170,158 145,150 Q130,145 120,142
+              L118,155 L110,200 Z" fill="#F8FAFC"/>
+      <!-- Coat lapels -->
+      <path d="M80,142 L86,158 L82,155" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="0.5"/>
+      <path d="M120,142 L114,158 L118,155" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="0.5"/>
+      <!-- Breast pocket -->
+      <rect x="34" y="168" width="14" height="10" rx="1" fill="none" stroke="#CBD5E1" stroke-width="1"/>
+      <!-- Stethoscope — tubes start behind neck, just under jaw (~y=142) -->
+      <path d="M95,142 Q80,148 76,156 Q74,166 84,172 Q94,177 100,175"
+            fill="none" stroke="#475569" stroke-width="2.5" stroke-linecap="round"/>
+      <path d="M105,142 Q120,148 124,156 Q126,166 116,172 Q106,177 100,175"
+            fill="none" stroke="#475569" stroke-width="2.5" stroke-linecap="round"/>
+      <!-- Stethoscope chest piece (centered on chest) -->
+      <circle cx="100" cy="177" r="5" fill="#64748B" stroke="#475569" stroke-width="1.2"/>
+      <circle cx="100" cy="177" r="2" fill="#94A3B8"/>`,
+        accessory: ``,
+    },
+    // ─── Engineer: Orange safety vest, hard hat ─────────
+    engineer: {
+        body: `
+      <!-- Blue work shirt -->
+      <path d="M30,200 Q30,158 55,150 Q75,143 88,140
+              L88,145 Q90,148 100,148 Q110,148 112,145 L112,140
+              Q125,143 145,150 Q170,158 170,200 Z" fill="#1E3A5F"/>
+      <!-- Orange hi-vis vest -->
+      <path d="M45,200 Q48,160 65,152 Q78,146 88,144
+              L92,200 Z" fill="#F97316"/>
+      <path d="M155,200 Q152,160 135,152 Q122,146 112,144
+              L108,200 Z" fill="#F97316"/>
+      <!-- Reflective stripes -->
+      <line x1="55" y1="164" x2="88" y2="152" stroke="#FDE68A" stroke-width="2.5"/>
+      <line x1="145" y1="164" x2="112" y2="152" stroke="#FDE68A" stroke-width="2.5"/>
+      <line x1="58" y1="178" x2="90" y2="168" stroke="#FDE68A" stroke-width="2.5"/>
+      <line x1="142" y1="178" x2="110" y2="168" stroke="#FDE68A" stroke-width="2.5"/>`,
+        accessory: `
+      <!-- Hair cover (hides any hair poking through) -->
+      <ellipse cx="100" cy="52" rx="56" ry="20" fill="#D97706"/>
+      <!-- Hard hat — dome -->
+      <path d="M50,52 Q50,14 100,8 Q150,14 150,52 Z" fill="#F59E0B"/>
+      <!-- Brim -->
+      <rect x="44" y="50" width="112" height="9" rx="4" fill="#D97706"/>
+      <!-- Brim shadow line -->
+      <line x1="48" y1="57" x2="152" y2="57" stroke="#B45309" stroke-width="1"/>
+      <!-- Center ridge -->
+      <line x1="100" y1="10" x2="100" y2="50" stroke="#EAB308" stroke-width="1" opacity="0.4"/>`,
+    },
+    // ─── Teacher: Professor with graduation cap, sweater vest, bow tie ─────
+    teacher: {
+        body: `
+      <!-- Light blue dress shirt -->
+      <path d="M30,200 Q30,158 55,150 Q75,143 88,140
+              L88,145 Q90,148 100,148 Q110,148 112,145 L112,140
+              Q125,143 145,150 Q170,158 170,200 Z" fill="#DBEAFE"/>
+      <!-- Shirt collar -->
+      <path d="M88,140 L82,148 L94,152" fill="#BFDBFE" stroke="#93C5FD" stroke-width="0.7"/>
+      <path d="M112,140 L118,148 L106,152" fill="#BFDBFE" stroke="#93C5FD" stroke-width="0.7"/>
+      <!-- Dark navy sweater vest -->
+      <path d="M55,200 Q56,162 65,154 Q78,147 88,144
+              L94,152 L100,148 L106,152 L112,144
+              Q122,147 135,154 Q144,162 145,200 Z" fill="#1E293B"/>
+      <!-- V-neck of sweater vest -->
+      <path d="M88,144 L94,152 L100,148 L106,152 L112,144"
+            fill="#DBEAFE" stroke="#1E293B" stroke-width="0.8"/>
+      <!-- Sweater vest bottom ribbing -->
+      <line x1="58" y1="196" x2="142" y2="196" stroke="#334155" stroke-width="1"/>
+      <line x1="57" y1="198" x2="143" y2="198" stroke="#334155" stroke-width="0.5"/>
+      <!-- Sleeves (shirt showing) -->
+      <path d="M30,200 Q30,158 55,150 Q62,148 65,154
+              L58,200 Z" fill="#DBEAFE"/>
+      <path d="M170,200 Q170,158 145,150 Q138,148 135,154
+              L142,200 Z" fill="#DBEAFE"/>
+      <!-- Bow tie -->
+      <path d="M93,147 L88,143 L88,151 Z" fill="#991B1B"/>
+      <path d="M107,147 L112,143 L112,151 Z" fill="#991B1B"/>
+      <circle cx="100" cy="147" r="2.5" fill="#B91C1C" stroke="#7F1D1D" stroke-width="0.5"/>`,
+        accessory: `
+      <!-- Graduation mortarboard cap -->
+      <!-- Cap crown (skull cap — covers top of head generously) -->
+      <path d="M46,56 Q44,38 62,30 Q80,22 100,22 Q120,22 138,30 Q156,38 154,56
+              Q134,62 100,62 Q66,62 46,56 Z" fill="#1E293B" stroke="#0F172A" stroke-width="0.6"/>
+      <!-- Flat board — large diamond shape for 3D perspective -->
+      <polygon points="100,8 168,34 100,54 32,34" fill="#1E293B" stroke="#0F172A" stroke-width="0.8"/>
+      <!-- Board top highlight for depth -->
+      <polygon points="100,11 164,34 100,52 36,34" fill="#334155" opacity="0.3"/>
+      <!-- Button on top center -->
+      <circle cx="100" cy="32" r="3.5" fill="#475569" stroke="#0F172A" stroke-width="0.8"/>
+      <!-- Tassel string from center button draping to right -->
+      <path d="M100,32 Q124,24 144,32 Q158,44 160,62" fill="none" stroke="#EAB308" stroke-width="2.2" stroke-linecap="round"/>
+      <!-- Tassel end fringe -->
+      <line x1="158" y1="60" x2="156" y2="70" stroke="#EAB308" stroke-width="1.2"/>
+      <line x1="160" y1="62" x2="159" y2="72" stroke="#EAB308" stroke-width="1.2"/>
+      <line x1="162" y1="61" x2="162" y2="71" stroke="#EAB308" stroke-width="1.2"/>
+      <line x1="159" y1="71" x2="159" y2="77" stroke="#CA8A04" stroke-width="1.5"/>`,
+    },
+    // ─── Chef: Double-breasted white jacket, tall toque ─
+    chef: {
+        body: `
+      <!-- White chef jacket -->
+      <path d="M30,200 Q30,158 55,150 Q75,143 88,140
+              L88,145 Q90,148 100,148 Q110,148 112,145 L112,140
+              Q125,143 145,150 Q170,158 170,200 Z" fill="#FEFEFE"/>
+      <!-- Mandarin collar -->
+      <rect x="86" y="138" width="28" height="8" rx="3" fill="#F1F5F9" stroke="#E2E8F0" stroke-width="1"/>
+      <!-- Double-breasted buttons (left row) -->
+      <circle cx="88" cy="162" r="2" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="0.8"/>
+      <circle cx="88" cy="174" r="2" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="0.8"/>
+      <circle cx="88" cy="186" r="2" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="0.8"/>
+      <!-- Right row -->
+      <circle cx="96" cy="162" r="2" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="0.8"/>
+      <circle cx="96" cy="174" r="2" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="0.8"/>
+      <circle cx="96" cy="186" r="2" fill="#E2E8F0" stroke="#CBD5E1" stroke-width="0.8"/>
+      <!-- Center front seam -->
+      <line x1="100" y1="146" x2="100" y2="200" stroke="#E2E8F0" stroke-width="0.8"/>`,
+        accessory: `
+      <!-- Chef toque blanche — puffy hat, sized to sit inside the 0–200 canvas.
+           The previous version ran to y=-48, so most of it was off-canvas and
+           read as a shapeless blob. The face top is y=32, so the hat occupies
+           y≈2…59: high enough to look tall, never past the top edge. -->
+      <!-- Band at the forehead — spans the head width -->
+      <rect x="48" y="44" width="104" height="15" rx="4" fill="#FEFEFE" stroke="#E2E8F0" stroke-width="1.2"/>
+      <!-- Puffy toque body -->
+      <path d="M56,46 C52,38 50,28 52,20
+               C54,11 62,6 72,5
+               C80,4 88,4 100,4
+               C112,4 120,4 128,5
+               C138,6 146,11 148,20
+               C150,28 148,38 144,46 Z"
+            fill="#FEFEFE" stroke="#E2E8F0" stroke-width="1"/>
+      <!-- Crown puffs — overlapping rounded bumps, all within the canvas -->
+      <ellipse cx="76" cy="18" rx="20" ry="12" fill="#FEFEFE"/>
+      <ellipse cx="124" cy="18" rx="20" ry="12" fill="#FEFEFE"/>
+      <ellipse cx="100" cy="14" rx="24" ry="13" fill="#FEFEFE"/>
+      <!-- Pleat lines -->
+      <path d="M76,44 Q70,26 76,8" stroke="#F0F0F0" stroke-width="0.7" fill="none"/>
+      <path d="M100,44 L100,4" stroke="#F0F0F0" stroke-width="0.7" fill="none"/>
+      <path d="M124,44 Q130,26 124,8" stroke="#F0F0F0" stroke-width="0.7" fill="none"/>`,
+    },
+    // ─── Police: Navy uniform, cap with badge ───────────
+    police: {
+        body: `
+      <!-- Navy uniform -->
+      <path d="M30,200 Q30,158 55,150 Q75,143 88,140
+              L88,145 Q90,148 100,148 Q110,148 112,145 L112,140
+              Q125,143 145,150 Q170,158 170,200 Z" fill="#1E3A8A"/>
+      <!-- Collar -->
+      <path d="M86,140 L82,148 L92,152 L100,148 L108,152 L118,148 L114,140"
+            fill="#1E40AF" stroke="#1E3A8A" stroke-width="0.8"/>
+      <!-- Shoulder epaulettes -->
+      <rect x="52" y="148" width="18" height="5" rx="2" fill="#1E40AF" stroke="#2563EB" stroke-width="0.8"/>
+      <rect x="130" y="148" width="18" height="5" rx="2" fill="#1E40AF" stroke="#2563EB" stroke-width="0.8"/>
+      <!-- Badge (left breast) -->
+      <g transform="translate(82,168)">
+        <polygon points="0,-6 1.5,-2 5.5,-2 2.5,0.5 3.5,4.5 0,2 -3.5,4.5 -2.5,0.5 -5.5,-2 -1.5,-2"
+                 fill="#EAB308" stroke="#CA8A04" stroke-width="0.5"/>
+      </g>
+      <!-- Buttons down front -->
+      <circle cx="100" cy="175" r="1.5" fill="#D4D4D8"/>
+      <circle cx="100" cy="185" r="1.5" fill="#D4D4D8"/>
+      <circle cx="100" cy="195" r="1.5" fill="#D4D4D8"/>
+      <!-- Breast pockets -->
+      <path d="M76,162 L76,172 L88,172" fill="none" stroke="#1E40AF" stroke-width="1"/>
+      <path d="M124,162 L124,172 L112,172" fill="none" stroke="#1E40AF" stroke-width="1"/>`,
+        accessory: `
+      <!-- Hair cover -->
+      <ellipse cx="100" cy="54" rx="56" ry="20" fill="#1E3A8A"/>
+      <!-- Police cap — crown -->
+      <path d="M50,54 L50,40 Q50,20 100,16 Q150,20 150,40 L150,54 Z" fill="#1E3A8A"/>
+      <!-- Cap band -->
+      <rect x="50" y="46" width="100" height="8" rx="0" fill="#1E40AF"/>
+      <!-- Cap badge -->
+      <g transform="translate(100,44)">
+        <polygon points="0,-6 2,-2 6,-2 3,1 4,5 0,3 -4,5 -3,1 -6,-2 -2,-2"
+                 fill="#EAB308"/>
+      </g>
+      <!-- Cap brim (visor) -->
+      <path d="M46,54 Q46,62 100,66 Q154,62 154,54 Z" fill="#111827"/>`,
+    },
+    // ─── Astronaut: Silver/white space suit, glass helmet ──
+    astronaut: {
+        body: `
+      <!-- Neck cover — hides skin-tone neck behind collar -->
+      <rect x="82" y="130" width="36" height="20" rx="6" fill="#CFD8DC"/>
+      <!-- Bulky space suit -->
+      <path d="M22,200 Q22,155 50,147 Q72,140 88,138
+              L88,142 Q92,146 100,146 Q108,146 112,142 L112,138
+              Q128,140 150,147 Q178,155 178,200 Z" fill="#CFD8DC"/>
+      <!-- Suit seam lines -->
+      <line x1="60" y1="148" x2="52" y2="200" stroke="#B0BEC5" stroke-width="1.2"/>
+      <line x1="140" y1="148" x2="148" y2="200" stroke="#B0BEC5" stroke-width="1.2"/>
+      <!-- Chest plate -->
+      <rect x="76" y="148" width="48" height="34" rx="8" fill="#B0BEC5" stroke="#90A4AE" stroke-width="1.2"/>
+      <!-- Status lights on chest -->
+      <circle cx="90" cy="157" r="2.5" fill="#4ADE80"/>
+      <circle cx="110" cy="157" r="2.5" fill="#60A5FA"/>
+      <!-- Mission patch (left shoulder) -->
+      <path d="M42,153 L50,150 L58,153 L50,162 Z" fill="#1E3A5F" stroke="#BBB" stroke-width="0.5"/>
+      <path d="M46,154 L50,152 L54,154" fill="none" stroke="#60A5FA" stroke-width="0.8"/>
+      <!-- Agency logo patch (right shoulder) -->
+      <circle cx="155" cy="159" r="7" fill="#1E3A5F" stroke="#BBB" stroke-width="0.5"/>
+      <circle cx="155" cy="159" r="4" fill="none" stroke="#60A5FA" stroke-width="0.8"/>
+      <!-- Collar ring -->
+      <ellipse cx="100" cy="141" rx="30" ry="9" fill="#607D8B"/>
+      <ellipse cx="100" cy="139" rx="28" ry="7" fill="#78909C"/>
+      <ellipse cx="100" cy="137" rx="24" ry="5" fill="#90A4AE"/>`,
+        accessory: `
+      <!-- Helmet dome -->
+      <ellipse cx="100" cy="78" rx="60" ry="64" fill="#CFD8DC" opacity="0.30"/>
+      <!-- Helmet outer rim -->
+      <ellipse cx="100" cy="78" rx="60" ry="64" fill="none"
+               stroke="#78909C" stroke-width="4"/>
+      <!-- Visor glass reflection -->
+      <path d="M64,52 Q74,36 90,40" fill="none" stroke="#FFF" stroke-width="2.5" stroke-linecap="round" opacity="0.40"/>
+      <!-- Side bolts -->
+      <circle cx="42" cy="88" r="4" fill="#546E7A" stroke="#455A64" stroke-width="1"/>
+      <circle cx="158" cy="88" r="4" fill="#546E7A" stroke="#455A64" stroke-width="1"/>
+      <!-- Antenna. The helmet crown is at y=14, leaving ~12px of headroom
+           inside the 200×200 canvas — keep the tip's outer edge at y >= 2. -->
+      <line x1="78" y1="16" x2="78" y2="8" stroke="#78909C" stroke-width="2.5" stroke-linecap="round"/>
+      <circle cx="78" cy="5" r="3" fill="#EF4444" stroke="#DC2626" stroke-width="0.8"/>`,
+    },
+    // ─── Artist: Striped shirt, apron, beret + brush ─────
+    artist: {
+        body: `
+      <!-- Dark striped undershirt -->
+      <path d="M30,200 Q30,158 55,150 Q75,143 88,140
+              L88,145 Q90,148 100,148 Q110,148 112,145 L112,140
+              Q125,143 145,150 Q170,158 170,200 Z" fill="#333A45"/>
+      <!-- Horizontal stripes on shirt -->
+      <line x1="42" y1="168" x2="158" y2="168" stroke="#4E5563" stroke-width="2"/>
+      <line x1="36" y1="180" x2="164" y2="180" stroke="#4E5563" stroke-width="2"/>
+      <line x1="34" y1="192" x2="166" y2="192" stroke="#4E5563" stroke-width="2"/>
+      <!-- Canvas-colored apron over shirt -->
+      <path d="M72,152 L72,200 L128,200 L128,152
+              Q128,148 120,148 L100,148 L80,148 Q72,148 72,152 Z" fill="#E8DCCA"/>
+      <!-- Apron neck strap (V-shape) -->
+      <path d="M88,140 L80,148" stroke="#D4C4A8" stroke-width="2" stroke-linecap="round"/>
+      <path d="M112,140 L120,148" stroke="#D4C4A8" stroke-width="2" stroke-linecap="round"/>
+      <!-- Apron pocket -->
+      <rect x="84" y="170" width="32" height="16" rx="2" fill="none" stroke="#C4B498" stroke-width="1"/>
+      <!-- Paintbrush in pocket -->
+      <line x1="92" y1="163" x2="92" y2="172" stroke="#8B5E3C" stroke-width="2" stroke-linecap="round"/>
+      <rect x="90" y="160" width="4" height="5" rx="1" fill="#3B82F6"/>
+      <!-- Paint smudge on apron — natural drip shapes -->
+      <path d="M110,175 Q112,173 114,176 Q113,178 110,177 Z" fill="#EF4444" opacity="0.6"/>
+      <path d="M78,188 Q80,186 83,188 Q82,191 79,190 Z" fill="#7C3AED" opacity="0.5"/>
+      <circle cx="120" cy="190" r="2" fill="#FBBF24" opacity="0.5"/>`,
+        accessory: `
+      <!-- Hair cover -->
+      <ellipse cx="100" cy="54" rx="56" ry="20" fill="#DC2626"/>
+      <!-- Beret — classic flat shape sitting on head -->
+      <path d="M50,54 Q50,36 70,28 Q86,22 100,22 Q120,22 140,30 Q156,38 156,54 Z" fill="#DC2626"/>
+      <!-- Beret puff — floppy top drooping to the right -->
+      <path d="M100,22 Q120,14 145,18 Q164,24 162,38 Q160,48 156,54
+              Q152,40 130,30 Q110,22 100,22 Z" fill="#EF4444"/>
+      <!-- Band (rim that hugs the forehead) -->
+      <path d="M50,54 Q50,60 100,62 Q150,60 156,54" fill="none"
+            stroke="#B91C1C" stroke-width="2.5"/>
+      <!-- Nub on top -->
+      <circle cx="138" cy="20" r="3.5" fill="#B91C1C"/>`,
+    },
+    // ─── Business: Black suit, white shirt, red tie ─────
+    business: {
+        body: `
+      <!-- White dress shirt -->
+      <path d="M30,200 Q30,158 55,150 Q75,143 88,140
+              L88,145 Q90,148 100,148 Q110,148 112,145 L112,140
+              Q125,143 145,150 Q170,158 170,200 Z" fill="#F8FAFC"/>
+      <!-- Shirt collar -->
+      <path d="M86,140 L80,150 L94,150 Z" fill="#F1F5F9" stroke="#E2E8F0" stroke-width="0.5"/>
+      <path d="M114,140 L120,150 L106,150 Z" fill="#F1F5F9" stroke="#E2E8F0" stroke-width="0.5"/>
+      <!-- Suit jacket -->
+      <path d="M30,200 Q30,158 55,150 Q66,146 76,143
+              L82,152 L88,200 Z" fill="#333A45"/>
+      <path d="M170,200 Q170,158 145,150 Q134,146 124,143
+              L118,152 L112,200 Z" fill="#333A45"/>
+      <!-- Lapels (V-shape) -->
+      <path d="M76,143 L86,158 L82,152" fill="#3E4652" stroke="#4E5563" stroke-width="0.5"/>
+      <path d="M124,143 L114,158 L118,152" fill="#3E4652" stroke="#4E5563" stroke-width="0.5"/>
+      <!-- Suit button -->
+      <circle cx="88" cy="175" r="2" fill="#3F3F46"/>
+      <circle cx="112" cy="175" r="2" fill="#3F3F46"/>
+      <!-- Necktie -->
+      <path d="M96,148 L100,150 L104,148 L100,146 Z" fill="#DC2626"/>
+      <path d="M97,150 L100,152 L103,150 L103.5,150" fill="#DC2626"/>
+      <polygon points="100,152 95,200 105,200" fill="#DC2626"/>
+      <!-- Tie knot -->
+      <path d="M97,148 L100,151 L103,148" fill="#B91C1C"/>
+      <!-- Tie stripe detail -->
+      <line x1="97" y1="165" x2="103" y2="162" stroke="#991B1B" stroke-width="1"/>
+      <line x1="97" y1="175" x2="103" y2="172" stroke="#991B1B" stroke-width="1"/>
+      <line x1="97" y1="185" x2="103" y2="182" stroke="#991B1B" stroke-width="1"/>`,
+        accessory: ``,
+    },
+};
+
+// libs/avatar-player/src/lib/geometry/trait-previews.ts/trait-previews.ts
+//
+// Small SVG thumbnails for the creator's pickers.
+//
+// The UI was showing an emoji per option while TraitOption already had an
+// unused `svgPreview` field. Emoji neither match the artwork nor tell you what
+// "handlebar" looks like. These build the real shape from the same part data
+// the renderer uses, so a preview can never drift from the result.
+//
+// Everything is drawn with literal hex colours, not CSS custom properties:
+// the thumbnails are injected with innerHTML and must stand on their own.
+const SKIN = SKIN_TONES.medium.base;
+const SKIN_DARK = SKIN_TONES.medium.ear;
+const HAIR = HAIR_COLORS.brown;
+const EYE = EYE_COLORS.brown;
+/**
+ * Part data references `var(--hair-color)` and friends. Substitute literals so
+ * a thumbnail renders correctly outside the avatar's own stylesheet.
+ */
+function inlineVars(svg) {
+    return svg
+        .replace(/var\(--hair-color\)/g, HAIR)
+        .replace(/var\(--eye-color\)/g, EYE)
+        .replace(/var\(--skin-base\)/g, SKIN)
+        .replace(/var\(--skin-ear\)/g, SKIN_DARK)
+        .replace(/var\(--skin-shadow\)/g, SKIN_DARK)
+        .replace(/var\(--lip-color\)/g, SKIN_TONES.medium.lip);
+}
+/** Crop window around the head. Parts live in 0–200 space centred on x=100. */
+const VIEWBOX = '32 18 136 136';
+function wrap(inner, viewBox = VIEWBOX) {
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" ` +
+        `preserveAspectRatio="xMidYMid meet">${inner}</svg>`);
+}
+const head = (rx = 52, ry = 56, cy = 88) => `<ellipse cx="100" cy="${cy}" rx="${rx}" ry="${ry}" fill="${SKIN}"/>`;
+const ears = () => `<ellipse cx="48" cy="90" rx="8" ry="10" fill="${SKIN_DARK}"/>` +
+    `<ellipse cx="152" cy="90" rx="8" ry="10" fill="${SKIN_DARK}"/>`;
+const eyes = () => {
+    const e = EYE_SHAPES.round;
+    return `<g>${inlineVars(e.sclera)}</g><g>${inlineVars(e.iris)}</g>`;
+};
+const brows = () => `<rect x="63" y="72" width="22" height="5" rx="3" fill="${HAIR}"/>` +
+    `<rect x="115" y="72" width="22" height="5" rx="3" fill="${HAIR}"/>`;
+const noseMouth = () => `<path d="M97,105 Q100,112 103,105" stroke="${SKIN_DARK}" stroke-width="2" fill="none" stroke-linecap="round"/>` +
+    `<path d="M84,120 Q100,132 116,120" stroke="${SKIN_TONES.medium.lip}" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+/** Neutral bust used behind profession thumbnails. */
+const bust = () => `<path d="M30,200 Q30,150 100,150 Q170,150 170,200 Z" fill="#8A93A5"/>`;
+function buildTraitPreview(kind, value) {
+    switch (kind) {
+        case 'gender': {
+            const woman = value === 'woman';
+            const face = woman
+                ? `<ellipse cx="100" cy="86" rx="49" ry="55" fill="${SKIN}"/>` +
+                    `<g class="lashes">${[0, 1, 2, 3, 4, 5, 6, 7]
+                        .map((i) => {
+                        const xs = [65, 70, 76, 82, 117, 122, 128, 134][i];
+                        return `<path d="M${xs},78 l-3,-4" stroke="${HAIR}" stroke-width="1.5" stroke-linecap="round"/>`;
+                    })
+                        .join('')}</g>`
+                : head();
+            return wrap(ears() + face + eyes() + brows() + noseMouth());
+        }
+        case 'haircut': {
+            const h = HAIR_SHAPES[value];
+            if (!h)
+                return wrap(head());
+            return wrap(ears() + `<g>${inlineVars(h.back)}</g>` + head() + `<g>${inlineVars(h.front)}</g>`);
+        }
+        case 'eyeStyle': {
+            const e = EYE_SHAPES[value];
+            if (!e)
+                return wrap(head());
+            return wrap(head() + `<g>${inlineVars(e.sclera)}</g><g>${inlineVars(e.iris)}</g>`);
+        }
+        case 'mustache': {
+            const m = MUSTACHE_SHAPES[value];
+            return wrap(ears() + head() + eyes() + brows() + noseMouth() + (m ? `<g>${inlineVars(m)}</g>` : ''));
+        }
+        case 'beard': {
+            const b = BEARD_SHAPES[value];
+            return wrap(ears() + head() + eyes() + brows() + noseMouth() + (b ? `<g>${inlineVars(b)}</g>` : ''));
+        }
+        case 'glasses': {
+            const g = GLASSES_SHAPES[value];
+            return wrap(ears() + head() + eyes() + brows() + noseMouth() + (g ? `<g>${inlineVars(g)}</g>` : ''));
+        }
+        case 'profession': {
+            const p = PROFESSION_LAYERS[value];
+            const body = p?.body ? inlineVars(p.body) : bust();
+            const acc = p?.accessory ? inlineVars(p.accessory) : '';
+            // Profession art is drawn on the full 0–200 canvas, so use the whole
+            // thing rather than the head crop the face previews use.
+            return wrap(body + ears() + head() + eyes() + brows() + noseMouth() + acc, '0 0 200 200');
+        }
+        default:
+            return wrap(head());
+    }
+}
+
+// libs/avatar-player/src/lib/geometry/visemes.ts/visemes.ts
+//
+// Pure text -> viseme mapping, shared by the runtime lip-sync service and the
+// offline generator that bakes an animated mouth into an exported SVG.
+//
+// Deliberately not a real phoneme model: every unmapped consonant falls back
+// to the "spread" viseme, so the result reads as "mouth is moving" rather
+// than accurate speech. Do not present it as phonetics.
+/** Silence. */
+const VISEME_SILENCE = 0;
+/** A / I — wide open */
+const VISEME_WIDE = 1;
+/** O / U — rounded */
+const VISEME_ROUND = 2;
+/** E — spread */
+const VISEME_SPREAD = 3;
+/** M / B / P — pressed */
+const VISEME_PRESSED = 4;
+/** F / V — teeth on lip */
+const VISEME_TEETH = 5;
+/** How long each viseme is held, in ms. */
+const MS_PER_VISEME = 80;
+/**
+ * Map text characters to viseme ids 0–5.
+ * 0=silence, 1=A/I wide, 2=O/U round, 3=E spread, 4=M/B/P pressed, 5=F/V teeth
+ */
+function textToVisemes(text) {
+    return text
+        .toLowerCase()
+        .split('')
+        .map((char) => {
+        if ('ai'.includes(char))
+            return VISEME_WIDE;
+        if ('ou'.includes(char))
+            return VISEME_ROUND;
+        if ('e'.includes(char))
+            return VISEME_SPREAD;
+        if ('mbp'.includes(char))
+            return VISEME_PRESSED;
+        if ('fv'.includes(char))
+            return VISEME_TEETH;
+        if (char === ' ')
+            return VISEME_SILENCE;
+        return VISEME_SPREAD; // default consonant
+    });
+}
+
+// libs/avatar-player/src/lib/geometry/svg-parts/mouth-shapes.ts/svg-parts/mouth-shapes.ts
+// 6 viseme paths for lip-sync animation
+// All paths fit within the face area (x: 82–118, y: 118–136)
+// stroke="var(--lip-color)" stroke-width="3" fill="none" stroke-linecap="round"
+const MOUTH_SHAPES = {
+    0: 'M84,120 Q100,132 116,120', // silence — gentle smile
+    1: 'M84,118 Q100,136 116,118', // A/I — wide open
+    2: 'M90,118 Q100,130 110,118', // O/U — round
+    3: 'M82,122 Q100,128 118,122', // E — spread
+    4: 'M86,122 Q100,124 114,122', // M/B/P — pressed
+    5: 'M84,120 Q92,126 100,122 Q108,126 116,120', // F/V — teeth-lip
+};
+
+// libs/avatar-player/src/lib/geometry/svg-parts/beard-path.ts/svg-parts/beard-path.ts
+//
+// Facial hair is authored as artwork, then FITTED to the head at render
+// time.
+//
+// The shapes in beard-shapes.ts / mustache-shapes.ts were drawn against the
+// man's face (cx=100 cy=88 rx=52 ry=56). A woman's head is a different
+// ellipse, so the same path either juts past her jaw or leaves a gap.
+//
+// The first three attempts generated new geometry instead, which produced
+// uniform bands that lost the hand-drawn character. This keeps the original
+// silhouettes and rescales them by the ratio between the two faces, so:
+//   - a man is unchanged, exactly, by construction (the ratios are 1)
+//   - a woman gets the same shape at the same relative position on a
+//     proportionally smaller head
+//
+// The rescale is applied to the NUMBERS in the path, never as a CSS
+// transform. An SVG transform attribute would be resolved against the
+// element's bounding box under `transform-box: fill-box` and fling the
+// beard across the face.
+/** The two head shapes the renderer supports. */
+const MAN_FACE = { cx: 100, cy: 88, rx: 52, ry: 56 };
+const WOMAN_FACE = { cx: 100, cy: 86, rx: 49, ry: 55 };
+function faceFor(gender) {
+    return gender === 'woman' ? WOMAN_FACE : MAN_FACE;
+}
+/** Half-width of the head at a given y. Returns 0 at or past the chin. */
+function faceHalfWidthAt(face, y) {
+    const t = (y - face.cy) / face.ry;
+    if (t <= -1 || t >= 1)
+        return 0;
+    return face.rx * Math.sqrt(1 - t * t);
+}
+const r2 = (n) => Math.round(n * 100) / 100;
+const lerp = (a, b, t) => a + (b - a) * t;
+/** How far the beard's outer edge deliberately overshoots the face. */
+const OVERHANG = 1;
+/** Closed path through points, smoothed with quadratic midpoints. */
+function smoothClosedPath(pts) {
+    if (pts.length < 3)
+        return '';
+    const mid = (a, b) => [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+    let d = `M${r2(pts[0][0])},${r2(pts[0][1])}`;
+    for (let i = 1; i <= pts.length; i++) {
+        const cur = pts[i % pts.length];
+        const m = mid(cur, pts[(i + 1) % pts.length]);
+        d += ` Q${r2(cur[0])},${r2(cur[1])} ${r2(m[0])},${r2(m[1])}`;
+    }
+    return d + ' Z';
+}
+/**
+ * Rewrite every coordinate in a `d` attribute from the man's face into the
+ * target face. Safe because these shapes use only absolute M/L/Q/C/Z — no
+ * relative commands, no arcs, so all numbers come in x,y pairs.
+ */
+function fitPathData(d, face) {
+    const sx = face.rx / MAN_FACE.rx;
+    const sy = face.ry / MAN_FACE.ry;
+    if (sx === 1 && sy === 1 && face.cx === MAN_FACE.cx && face.cy === MAN_FACE.cy) {
+        return d; // man's face — leave the artwork byte-for-byte alone
+    }
+    let i = 0;
+    return d.replace(/-?\d+(\.\d+)?/g, (m) => {
+        const v = parseFloat(m);
+        const isX = i % 2 === 0;
+        i++;
+        const scaled = isX
+            ? face.cx + (v - MAN_FACE.cx) * sx
+            : face.cy + (v - MAN_FACE.cy) * sy;
+        return String(r2(scaled));
+    });
+}
+/** Fit every `d` and every ellipse in a piece of SVG markup to a head. */
+function fitToFace(markup, face) {
+    if (!markup)
+        return '';
+    const sx = face.rx / MAN_FACE.rx;
+    const sy = face.ry / MAN_FACE.ry;
+    return markup
+        .replace(/d="([^"]*)"/g, (_, d) => `d="${fitPathData(d, face)}"`)
+        .replace(/<ellipse([^>]*)\/>/g, (whole, attrs) => {
+        const out = attrs
+            .replace(/cx="(-?\d+(?:\.\d+)?)"/, (_, v) => `cx="${r2(face.cx + (parseFloat(v) - MAN_FACE.cx) * sx)}"`)
+            .replace(/cy="(-?\d+(?:\.\d+)?)"/, (_, v) => `cy="${r2(face.cy + (parseFloat(v) - MAN_FACE.cy) * sy)}"`)
+            .replace(/rx="(-?\d+(?:\.\d+)?)"/, (_, v) => `rx="${r2(parseFloat(v) * sx)}"`)
+            .replace(/ry="(-?\d+(?:\.\d+)?)"/, (_, v) => `ry="${r2(parseFloat(v) * sy)}"`);
+        return `<ellipse${out}/>`;
+    });
+}
+const BEARD_BANDS = {
+    // 5 o'clock shadow: low and faint, hugging the jaw only.
+    stubble: { startFrac: 0.36, endFrac: 0.97, inset: 3, thicknessTop: 4, thicknessBottom: 7 },
+    // Jaw-hugging crescent, tapering to nothing by the ears.
+    short: { startFrac: 0.17, endFrac: 0.99, inset: 2.5, thicknessTop: 4, thicknessBottom: 14 },
+    // Same crescent, then a narrow drop. Kept narrow on purpose: a wide drop
+    // reads as a bib rather than a beard.
+    long: {
+        startFrac: 0.17, endFrac: 0.99, inset: 2.5, thicknessTop: 4, thicknessBottom: 15,
+        drop: 0.30, dropWidth: 0.26,
+    },
+    // Chin patch only.
+    goatee: { startFrac: 0.60, endFrac: 0.99, inset: 13, thicknessTop: 5, thicknessBottom: 12 },
+};
+function buildBeardSvg(style, face, fill) {
+    if (style === 'none')
+        return '';
+    const o = BEARD_BANDS[style];
+    const steps = 26;
+    const yTop = face.cy + face.ry * o.startFrac;
+    const yJaw = face.cy + face.ry * o.endFrac;
+    const chinY = face.cy + face.ry;
+    const dropLen = o.drop ? face.ry * o.drop : 0;
+    const dropW = o.dropWidth ? face.rx * o.dropWidth : 0;
+    /**
+     * Outer half-width; past the chin it becomes the drop's taper.
+     *
+     * The band's outer edge is drawn slightly OUTSIDE the face outline, not
+     * inset inside it. Two reasons: the smoothing below passes through the
+     * MIDPOINTS between samples rather than through the samples themselves, so
+     * an edge placed exactly on the face ends up a sliver inside it and shows
+     * as a skin gap. Overhanging by a pixel and letting the face clip trim it
+     * back gives contact by construction instead of by tuning.
+     */
+    const outerHalf = (y) => {
+        if (y <= chinY)
+            return Math.max(0, faceHalfWidthAt(face, y) + OVERHANG);
+        if (!dropLen)
+            return 0;
+        const t = (y - chinY) / dropLen;
+        return t >= 1 ? 0 : dropW * Math.sqrt(1 - t * t);
+    };
+    const innerR = [];
+    const innerL = [];
+    for (let i = 0; i <= steps; i++) {
+        const t = i / steps;
+        const y = lerp(yTop, yJaw, t);
+        // The inner edge follows the same curve, a band-thickness inside it.
+        // Deriving it from the face is what closes the gap.
+        const hw = Math.max(0, faceHalfWidthAt(face, y) - o.inset - lerp(o.thicknessTop, o.thicknessBottom, t));
+        innerR.push([face.cx + hw, y]);
+        innerL.push([face.cx - hw, y]);
+    }
+    const outerR = [];
+    const outerL = [];
+    for (let i = 0; i <= steps; i++) {
+        const y = lerp(yTop, chinY + dropLen, i / steps);
+        const hw = outerHalf(y);
+        outerR.push([face.cx + hw, y]);
+        outerL.push([face.cx - hw, y]);
+    }
+    const ring = [
+        ...innerL,
+        ...[...innerR].reverse(),
+        ...outerR,
+        ...[...outerL].reverse(),
+    ];
+    const d = smoothClosedPath(ring);
+    if (!d)
+        return '';
+    // Stubble still relies on opacity rather than a second tone; logged for Phase 5.
+    const opacity = style === 'stubble' ? ' opacity="0.22"' : '';
+    return `<path d="${d}" fill="${fill}"${opacity}/>`;
+}
+
+// libs/avatar-player/src/lib/geometry/avatar-renderer.ts/avatar-renderer.ts
+//
+// SINGLE SOURCE OF TRUTH for avatar geometry.
+//
+// Both the live preview (SvgAvatarComponent) and the export bundle
+// (AvatarService.buildSvg) call this. Previously each had its own copy
+// of the render logic, and they drifted badly: the exporter ignored gender
+// and omitted every clipPath, so head-wearing professions exported with
+// hair punching through their hats.
+//
+// Nothing in here may read DOM state. Everything the renderer needs is
+// derived from the config (plus an optional viseme), which is what makes
+// the output reproducible and testable.
+/**
+ * Professions whose accessory covers the top of the head, so hair must clip.
+ *
+ * `chef` is here because the toque band sits across the forehead; without it
+ * long hair renders straight through the hat.
+ */
+const HAT_PROFESSIONS = new Set([
+    'engineer',
+    'police',
+    'artist',
+    'chef',
+]);
+/** Professions with a full helmet, which clips hair AND facial hair. */
+const HELMET_PROFESSIONS = new Set(['astronaut']);
+/** Canonical canvas. */
+const CANVAS = { width: 200, height: 200, viewBox: '0 0 200 200' };
+/**
+ * Hat brim clip. A flat cut at y=56 — see the plan: deriving this from the
+ * actual hat geometry is Phase 3 work.
+ */
+const HAT_CLIP_RECT = { x: 0, y: 56, width: 200, height: 144 };
+/** Helmet aperture. */
+const HELMET_CLIP_ELLIPSE = { cx: 100, cy: 78, rx: 57, ry: 62 };
+/**
+ * Build the `<animate>` child for the mouth, or '' when there is nothing to
+ * animate. Consecutive duplicates are collapsed so the animation spends its
+ * time on distinct mouth shapes rather than repeating the same one.
+ */
+function mouthAnimation(text) {
+    const visemes = textToVisemes(text);
+    if (visemes.length === 0)
+        return '';
+    // Collapse runs of the same viseme, then always return to silence so the
+    // loop does not snap between two open shapes.
+    const seq = [];
+    for (const v of visemes) {
+        if (seq.length === 0 || seq[seq.length - 1] !== v)
+            seq.push(v);
+    }
+    if (seq[seq.length - 1] !== 0)
+        seq.push(0);
+    const values = seq.map((v) => MOUTH_SHAPES[v] ?? MOUTH_SHAPES[0]);
+    const totalMs = seq.length * MS_PER_VISEME;
+    // calcMode="discrete" steps between the shapes with no interpolation —
+    // which is what lip sync wants, and also avoids interpolating between
+    // paths whose command counts differ (viseme 5 is a three-segment path).
+    return (`<animate attributeName="d" calcMode="discrete" dur="${(totalMs / 1000).toFixed(3)}s"` +
+        ` repeatCount="indefinite" values="${values.join(';')}"/>`);
+}
+function isAstronaut(config) {
+    return HELMET_PROFESSIONS.has(config.profession);
+}
+function hasHat(config) {
+    return HAT_PROFESSIONS.has(config.profession);
+}
+/** Clip reference for the hair-back / hair-front layers, or null. */
+function hairClipUrl(config, idsPrefix = '') {
+    if (isAstronaut(config))
+        return `url(#${idsPrefix}helmet-clip)`;
+    if (hasHat(config))
+        return `url(#${idsPrefix}hat-clip)`;
+    return null;
+}
+/** Clip reference for ears / mustache / beard, or null. */
+function helmetClipUrl(config, idsPrefix = '') {
+    return isAstronaut(config) ? `url(#${idsPrefix}helmet-clip)` : null;
+}
+/** CSS custom properties that drive every colour in the artwork. */
+function avatarCssVars(config) {
+    const skin = SKIN_TONES[config.skinTone];
+    return {
+        '--skin-base': skin.base,
+        '--skin-ear': skin.ear,
+        '--skin-shadow': skin.shadow,
+        '--lip-color': skin.lip,
+        '--hair-color': HAIR_COLORS[config.hairColor],
+        '--eye-color': EYE_COLORS[config.eyeColor],
+    };
+}
+function cssVarDecls(config) {
+    return Object.entries(avatarCssVars(config))
+        .map(([k, v]) => `${k}: ${v}`)
+        .join(';');
+}
+/** `clip-path="url(#x)"` only when the value exists — avoids empty attrs. */
+function clipAttr(url) {
+    return url ? ` clip-path="${url}"` : '';
+}
+const LASH_PATHS = [
+    'M65,78 L62,74', 'M70,76 L68,72', 'M76,76 L78,72', 'M82,78 L85,74',
+    'M117,78 L114,74', 'M122,76 L120,72', 'M128,76 L130,72', 'M134,78 L137,74',
+];
+/**
+ * The avatar markup WITHOUT the outer `<svg>` element.
+ * The preview component supplies its own root so it can keep Angular
+ * bindings on it; the exporter wraps this in a standalone document.
+ */
+function buildAvatarSvgInner(config, opts = {}) {
+    const { viseme = 0, animated = false, idsPrefix = '' } = opts;
+    const isWoman = config.gender === 'woman';
+    const astronaut = isAstronaut(config);
+    const hair = HAIR_SHAPES[config.haircut] ?? { back: '', front: '' };
+    const eyes = EYE_SHAPES[config.eyeStyle] ?? { sclera: '', iris: '' };
+    // Facial hair is authored once and rescaled to whichever head is in use.
+    // A man is untouched (the ratios are exactly 1); a woman gets the same
+    // silhouette at the same relative position on a proportionally smaller
+    // head, which is what the hand-drawn shapes were missing.
+    const facialHead = faceFor(config.gender);
+    const mustache = fitToFace(MUSTACHE_SHAPES[config.mustache] ?? '', facialHead);
+    const beard = buildBeardSvg(config.beard, facialHead, HAIR_COLORS[config.hairColor]);
+    const glasses = GLASSES_SHAPES[config.glasses] ?? '';
+    const profession = PROFESSION_LAYERS[config.profession] ?? { body: '', accessory: '' };
+    const mouthPath = MOUTH_SHAPES[viseme] ?? MOUTH_SHAPES[0];
+    const hairClip = hairClipUrl(config, idsPrefix);
+    const helmetClip = helmetClipUrl(config, idsPrefix);
+    // ── defs ────────────────────────────────────────────────────────────
+    // Face containment for facial hair. The hand-drawn beard and moustache
+    // artwork is not perfectly authored to the jawline — `stubble` overhangs
+    // even on a man — so rescaling alone cannot guarantee they stay on the
+    // head. This clip is derived from the face in use and is the backstop.
+    // The ellipse arcs over the top, then runs straight down past the chin so
+    // a long beard may still fall onto the chest.
+    const faceClipPath = `M${facialHead.cx - facialHead.rx},${facialHead.cy} ` +
+        `A${facialHead.rx},${facialHead.ry} 0 0 1 ${facialHead.cx + facialHead.rx},${facialHead.cy} ` +
+        `L${facialHead.cx + facialHead.rx},192 L${facialHead.cx - facialHead.rx},192 Z`;
+    const defs = `<defs>` +
+        `<clipPath id="${idsPrefix}face-clip"><path d="${faceClipPath}"/></clipPath>` +
+        `<clipPath id="${idsPrefix}hat-clip">` +
+        `<rect x="${HAT_CLIP_RECT.x}" y="${HAT_CLIP_RECT.y}" width="${HAT_CLIP_RECT.width}" height="${HAT_CLIP_RECT.height}"/>` +
+        `</clipPath>` +
+        `<clipPath id="${idsPrefix}helmet-clip">` +
+        `<ellipse cx="${HELMET_CLIP_ELLIPSE.cx}" cy="${HELMET_CLIP_ELLIPSE.cy}" rx="${HELMET_CLIP_ELLIPSE.rx}" ry="${HELMET_CLIP_ELLIPSE.ry}"/>` +
+        `</clipPath>` +
+        `</defs>`;
+    // ── 1. body ──────────────────────────────────────────────────────────
+    const body = `<g class="layer-body">${profession.body}</g>`;
+    // ── 2. neck (hidden for astronaut — the collar covers it) ───────────
+    const neck = astronaut
+        ? ''
+        : isWoman
+            ? `<rect class="layer-neck" x="90" y="135" width="20" height="22" rx="8" fill="var(--skin-base)"/>`
+            : `<rect class="layer-neck" x="88" y="135" width="24" height="22" rx="8" fill="var(--skin-base)"/>`;
+    // ── 3. ears ─────────────────────────────────────────────────────────
+    const earRx = isWoman ? 7 : 8;
+    const earRy = isWoman ? 9 : 10;
+    const ears = `<g class="layer-ears"${clipAttr(helmetClip)}>` +
+        `<ellipse cx="48" cy="90" rx="${earRx}" ry="${earRy}" fill="var(--skin-ear)"/>` +
+        `<ellipse cx="152" cy="90" rx="${earRx}" ry="${earRy}" fill="var(--skin-ear)"/>` +
+        `</g>`;
+    // ── 4. hair back ────────────────────────────────────────────────────
+    const hairBack = `<g class="layer-hair-back"${clipAttr(hairClip)}>${hair.back}</g>`;
+    // ── 5. face ─────────────────────────────────────────────────────────
+    const face = isWoman
+        ? `<ellipse class="layer-face" cx="100" cy="86" rx="49" ry="55" fill="var(--skin-base)"/>`
+        : `<ellipse class="layer-face" cx="100" cy="88" rx="52" ry="56" fill="var(--skin-base)"/>`;
+    // ── 6. eyes ─────────────────────────────────────────────────────────
+    // `.pupils` is driven by --pupil-x/--pupil-y so no post-render DOM
+    // patching is needed; see svg-avatar.component.scss.
+    const eyeGroup = `<g class="layer-eyes">` +
+        `<g>${eyes.sclera}</g>` +
+        `<g class="pupils"><g>${eyes.iris}</g></g>` +
+        `</g>`;
+    // ── 6b. lashes (woman only) ─────────────────────────────────────────
+    const lashes = isWoman
+        ? `<g class="layer-lashes">${LASH_PATHS.map((d) => `<path d="${d}" stroke="var(--hair-color)" stroke-width="1.5" stroke-linecap="round" fill="none"/>`).join('')}</g>`
+        : '';
+    // ── 7. eyelids (blink) ──────────────────────────────────────────────
+    // The eyelids are OPAQUE skin-coloured rects painted over the eyes. The
+    // only thing that hides them is `transform: scaleY(0)` from the consuming
+    // stylesheet — so a standalone SVG with no stylesheet ships with its eyes
+    // completely covered. Two defences:
+    //   1. static output omits the layer outright, because a still image has
+    //      nothing to blink
+    //   2. animated output carries transform="scale(1,0)" as an inline
+    //      presentation attribute, so the eyes are hidden even if the CSS
+    //      never arrives. CSS still wins over the attribute, so blinking works.
+    const eyelids = animated
+        ? `<g class="layer-eyelids">` +
+            `<rect class="eyelid-left" x="63" y="77" width="22" height="22" rx="11" fill="var(--skin-base)" transform="scale(1,0)"/>` +
+            `<rect class="eyelid-right" x="115" y="77" width="22" height="22" rx="11" fill="var(--skin-base)" transform="scale(1,0)"/>` +
+            `</g>`
+        : '';
+    // ── 8. brows ────────────────────────────────────────────────────────
+    const brows = isWoman
+        ? `<g class="layer-brows">` +
+            `<path d="M64,74 Q74,69 84,73" stroke="var(--hair-color)" stroke-width="2" fill="none" stroke-linecap="round"/>` +
+            `<path d="M116,73 Q126,69 136,74" stroke="var(--hair-color)" stroke-width="2" fill="none" stroke-linecap="round"/>` +
+            `</g>`
+        : `<g class="layer-brows">` +
+            `<rect x="63" y="72" width="22" height="5" rx="3" fill="var(--hair-color)"/>` +
+            `<rect x="115" y="72" width="22" height="5" rx="3" fill="var(--hair-color)"/>` +
+            `</g>`;
+    // ── 9. nose — uses --skin-shadow so it stays visible on deep skin ───
+    const nose = isWoman
+        ? `<path class="layer-nose" d="M98,104 Q100,110 102,104" stroke="var(--skin-shadow)" stroke-width="1.8" fill="none" stroke-linecap="round"/>`
+        : `<path class="layer-nose" d="M97,105 Q100,112 103,105" stroke="var(--skin-shadow)" stroke-width="2" fill="none" stroke-linecap="round"/>`;
+    // ── 10. mouth ───────────────────────────────────────────────────────
+    // When `speech` is set the mouth carries a self-running SMIL animation,
+    // so the file speaks on its own with no host page involved.
+    const speech = opts.speech;
+    const mouthAnim = speech ? mouthAnimation(speech) : '';
+    const mouthInner = isWoman
+        ? `stroke="var(--lip-color)" stroke-width="2.5" fill="var(--lip-color)" fill-opacity="0.35" stroke-linecap="round"`
+        : `stroke="var(--lip-color)" stroke-width="2.5" fill="none" stroke-linecap="round"`;
+    const mouth = `<path class="layer-mouth" d="${mouthPath}" ${mouthInner}>` +
+        mouthAnim +
+        `</path>`;
+    // ── 11-14 ───────────────────────────────────────────────────────────
+    // No CSS transform: the shape is rescaled in the path data itself. The
+    // inner groups carry the face clip and the outer the helmet clip, because
+    // an element can only take one clip-path.
+    const facialHair = `<g class="layer-mustache"${clipAttr(helmetClip)}>` +
+        `<g clip-path="url(#${idsPrefix}face-clip)">${mustache}</g></g>` +
+        `<g class="layer-beard"${clipAttr(helmetClip)}>` +
+        `<g clip-path="url(#${idsPrefix}face-clip)">${beard}</g></g>`;
+    const glassesGroup = `<g class="layer-glasses">${glasses}</g>`;
+    const hairFront = `<g class="layer-hair-front"${clipAttr(hairClip)}>${hair.front}</g>`;
+    const accessory = `<g class="layer-accessory">${profession.accessory}</g>`;
+    const head = `<g class="layer-head"${animated ? ' animate-idle' : ''}>` + [ears, hairBack, face, eyeGroup, lashes, eyelids, brows, nose, mouth, facialHair, glassesGroup, hairFront, accessory].join('') + `</g>`;
+    return defs + body + neck + head;
+}
+/**
+ * A complete, standalone SVG document. This is what gets written to disk
+ * and what the demo viewer renders — it must depend on nothing outside
+ * itself, so the palette is inlined as a `style` attribute on the root.
+ *
+ * `animated` is forced off regardless of what the caller passed. That flag
+ * emits the `.animate-idle` class, which is driven by the consuming
+ * component's stylesheet; a standalone file has no stylesheet, so the class
+ * would be a promise the document cannot keep. `speech` still applies,
+ * because SMIL travels inside the file.
+ */
+function buildAvatarSvg(config, opts = {}) {
+    const inner = buildAvatarSvgInner(config, { ...opts, animated: false });
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${CANVAS.viewBox}"` +
+        ` style="${cssVarDecls(config)}">` +
+        inner +
+        `</svg>`);
+}
+
+/**
+ * Blink, pupil drift and head-idle driving — framework-free.
+ *
+ * This was the body of an Angular `@Injectable()` service. Nothing in it ever
+ * touched Angular, only `setTimeout` and `requestAnimationFrame`, so it lives
+ * here and the Angular wrapper just delegates. The React player uses it
+ * directly.
+ *
+ * Head idle is deliberately *not* here: it is a pure CSS animation, so it costs
+ * no JavaScript and no framework re-render. See the stylesheet.
+ */
+class AvatarAnimator {
+    timers = [];
+    rafs = [];
+    /**
+     * Start random blink animation.
+     * Calls onState with CSS class names: 'blinking' → 'blink-half' → ''
+     * Interval: 2.5–5s random for natural feel.
+     */
+    startBlink(onState) {
+        const doBlink = () => {
+            onState('blinking');
+            const t1 = setTimeout(() => {
+                onState('blink-half');
+                const t2 = setTimeout(() => {
+                    onState('');
+                    // Schedule next blink: 2.5s–5s random interval
+                    const t3 = setTimeout(doBlink, 2500 + Math.random() * 2500);
+                    this.timers.push(t3);
+                }, 50);
+                this.timers.push(t2);
+            }, 80);
+            this.timers.push(t1);
+        };
+        const init = setTimeout(doBlink, 1000 + Math.random() * 1000);
+        this.timers.push(init);
+    }
+    /**
+     * Start random eye movement (pupil tracking).
+     * Calls onOffset with {x, y} pixel offsets for the pupil group.
+     */
+    startEyeMovement(onOffset) {
+        const move = () => {
+            const dx = (Math.random() - 0.5) * 8;
+            const dy = (Math.random() - 0.5) * 4;
+            onOffset({ x: dx, y: dy });
+            const t = setTimeout(move, 1800 + Math.random() * 2200);
+            this.timers.push(t);
+        };
+        const init = setTimeout(move, 500);
+        this.timers.push(init);
+    }
+    /**
+     * Start subtle head idle motion via requestAnimationFrame.
+     * Produces a gentle sine-wave rotation + vertical bob.
+     */
+    startHeadIdle(onTransform) {
+        const start = performance.now();
+        const tick = (now) => {
+            const t = (now - start) / 1000;
+            const rotZ = Math.sin(t * 0.6) * 1.5;
+            const transY = Math.sin(t * 0.4) * 1.5;
+            onTransform(`rotate(${rotZ}, 100, 150) translate(0, ${transY})`);
+            this.rafs.push(requestAnimationFrame(tick));
+        };
+        this.rafs.push(requestAnimationFrame(tick));
+    }
+    /** Stop all running animations and clear timers/rafs. */
+    stopAll() {
+        this.timers.forEach(clearTimeout);
+        this.rafs.forEach(cancelAnimationFrame);
+        this.timers = [];
+        this.rafs = [];
+    }
+}
+
+/**
+ * Drives visemes in real time — framework-free.
+ *
+ * The text -> viseme mapping itself lives in ./visemes because the offline SVG
+ * generator needs the exact same mapping to bake an animated mouth into an
+ * exported file. Keeping one copy is the whole point — if this drifted from
+ * the generator, exported avatars would mouth different words than the preview
+ * does.
+ */
+class LipSyncPlayer {
+    MS_PER_VISEME = MS_PER_VISEME;
+    /** @see textToVisemes */
+    textToVisemes(text) {
+        return textToVisemes(text);
+    }
+    /**
+     * Play a viseme sequence, calling onViseme(id) each frame.
+     *
+     * `onEnd` fires exactly once when the sequence finishes or is cancelled, so
+     * callers can clear a "speaking" flag reliably. Do NOT infer the end from
+     * onViseme(0): viseme 0 is silence and occurs at every space, so it would
+     * end the utterance at the first word gap.
+     *
+     * Returns a cancel function. Always resets to 0 (silence) on end or cancel.
+     */
+    play(visemes, onViseme, onEnd) {
+        let i = 0;
+        let cancelled = false;
+        let finished = false;
+        const finish = () => {
+            if (finished)
+                return;
+            finished = true;
+            onViseme(0); // reset to silence
+            onEnd?.();
+        };
+        const tick = () => {
+            if (cancelled || i >= visemes.length) {
+                finish();
+                return;
+            }
+            onViseme(visemes[i++]);
+            setTimeout(tick, this.MS_PER_VISEME);
+        };
+        tick();
+        return () => {
+            cancelled = true;
+            finish();
+        };
+    }
+}
+
+/**
+ * Public entry point of the avatar geometry.
+ *
+ * WHY THIS LIVES INSIDE THE ANGULAR LIBRARY
+ *
+ * The code below is plain TypeScript with no framework imports — it could sit in
+ * a package of its own, and that is where it used to live. It lives here
+ * because of a hard limit in ng-packagr:
+ *
+ *   - ng-packagr treats EVERY bare specifier as external
+ *     (`isExternalDependency`, ng-packagr/lib/flatten/rollup.js), so a
+ *     `from 'avatar-core'` import ships unresolved and breaks the tarball.
+ *   - a relative import into another package does not work either: ng-packagr
+ *     compiles src/ -> dist/avatar-player/esm2022/ first and only then bundles,
+ *     so a path valid from src/ points at nothing from the intermediate dir.
+ *
+ * Living inside the library means ng-packagr compiles it as first-party source
+ * and inlines it into the published bundle. The React package imports these
+ * same files with a relative specifier at build time, so there is still exactly
+ * ONE copy of the geometry in the repository and in CI.
+ *
+ * Consequence: consumers of angular-avatar-player and react-avatar-player get
+ * their own copy of the renderer inside the tarball. That is deliberate — it
+ * means `npm i angular-avatar-player` is a single, self-contained install.
+ */
+// ── Color palettes ──────────────────────────────────────────
+
+// libs/avatar-player/src/lib/services/lip-sync.service.ts
+/**
+ * Angular-facing wrapper around the framework-free {@link LipSyncPlayer}.
+ *
+ * The logic lives in ../geometry so the React player and any non-Angular
+ * renderer use the exact same mapping. This class exists only so Angular apps
+ * can inject it and so DI gives each player component its own instance.
+ */
+class LipSyncService extends LipSyncPlayer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LipSyncService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LipSyncService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LipSyncService, decorators: [{
+            type: Injectable
+        }] });
+
+// libs/avatar-player/src/lib/services/avatar-animation.service.ts
+/**
+ * Angular-facing wrapper around the framework-free {@link AvatarAnimator}.
+ *
+ * The timers live in ../geometry so the React player can drive the same blink
+ * and pupil logic. This class exists only so Angular apps can inject it and so
+ * DI scopes one animator per component — a shared instance would mean one avatar
+ * leaving the DOM stops blinking for every other avatar on the page.
+ */
+class AvatarAnimationService extends AvatarAnimator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarAnimationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarAnimationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarAnimationService, decorators: [{
+            type: Injectable
+        }] });
+
+// libs/avatar-player/src/lib/components/svg-avatar/svg-avatar.component.ts
+class SvgAvatarComponent {
+    // ── Signal inputs ────────────────────────────────────────────
+    //
+    // These were `@Input` fields mirrored into signals via ngOnChanges.
+    // That indirection was the root cause of four separate bugs: a `computed`
+    // or `effect` that reads a plain property registers no dependency, so it
+    // evaluates once and never invalidates. The symptoms were a frozen avatar,
+    // permanently disabled undo/redo, and a dead Test Speech button.
+    //
+    // Signal inputs make that mistake impossible: reading `config()` inside a
+    // computed registers a real dependency, so the derived values below cannot
+    // silently go stale.
+    config = input.required();
+    animationsEnabled = input(true);
+    /** 0–5, controlled externally for lip sync. */
+    viseme = input(0);
+    /**
+     * Namespace for generated element ids. Set this when inlining more than
+     * one avatar into a document, otherwise every avatar's `url(#hat-clip)`
+     * resolves to the first matching element on the page.
+     */
+    idsPrefix = input('');
+    sanitizer = inject(DomSanitizer);
+    host = inject(ElementRef);
+    zone = inject(NgZone);
+    anim = inject(AvatarAnimationService);
+    viewBox = CANVAS.viewBox;
+    // Animation state (driven by AvatarAnimationService)
+    eyeBlinkClass = signal('');
+    pupilOffset = signal({ x: 0, y: 0 });
+    /**
+     * Palette plus the two pupil-offset custom properties the SCSS reads.
+     *
+     * A computed, not a getter: a getter returns a new SafeStyle on every
+     * change-detection pass, so Angular re-wrote the style attribute each
+     * cycle. A getter also cannot track `config`, so it went stale too.
+     */
+    cssVarsStyle = computed(() => {
+        const p = this.pupilOffset();
+        const decls = `--pupil-x: ${p.x}px; --pupil-y: ${p.y}px; ` +
+            Object.entries(avatarCssVars(this.config()))
+                .map(([k, v]) => `${k}: ${v}`)
+                .join('; ');
+        return this.sanitizer.bypassSecurityTrustStyle(decls);
+    });
+    /**
+     * The markup is regenerated only when the *config* changes — deliberately
+     * NOT when the viseme does. Re-assigning innerHTML mid-utterance would
+     * recreate `.layer-head` and restart the head-idle animation every 80ms.
+     * Viseme changes are applied to the existing mouth path below instead.
+     */
+    innerHtml = computed(() => this.sanitizer.bypassSecurityTrustHtml(buildAvatarSvgInner(this.config(), {
+        animated: this.animationsEnabled(),
+        idsPrefix: this.idsPrefix(),
+    })));
+    // Public shape helpers — the geometry itself lives in lib/shared.
+    isAstronaut = computed(() => isAstronaut(this.config()));
+    hasHat = computed(() => hasHat(this.config()));
+    hairClipUrl = computed(() => hairClipUrl(this.config(), this.idsPrefix()));
+    helmetClipUrl = computed(() => helmetClipUrl(this.config(), this.idsPrefix()));
+    mouthPath = computed(() => MOUTH_SHAPES[this.viseme()] ?? MOUTH_SHAPES[0]);
+    constructor() {
+        // Keep the mouth in sync without re-rendering the whole avatar.
+        effect(() => {
+            // Both reads are signal-tracked: mouthPath so the mouth follows lip
+            // sync, innerHtml so the path is re-applied after each markup swap,
+            // when the fresh .layer-mouth element is guaranteed to be in the DOM.
+            const path = this.mouthPath();
+            this.innerHtml();
+            this.applyMouthPath(path);
+        });
+    }
+    applyMouthPath(path) {
+        const mouth = this.host.nativeElement.querySelector('.layer-mouth');
+        if (mouth) {
+            mouth.setAttribute('d', path);
+            return;
+        }
+        // Markup was swapped this tick and the element is not queryable yet.
+        requestAnimationFrame(() => {
+            this.host.nativeElement
+                .querySelector('.layer-mouth')
+                ?.setAttribute('d', path);
+        });
+    }
+    ngOnInit() {
+        if (this.animationsEnabled()) {
+            this.zone.runOutsideAngular(() => {
+                this.anim.startBlink((v) => this.zone.run(() => this.eyeBlinkClass.set(v)));
+                this.anim.startEyeMovement((v) => this.zone.run(() => this.pupilOffset.set(v)));
+                // Head idle is a pure CSS animation — no JS needed
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.anim.stopAll();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SvgAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: SvgAvatarComponent, isStandalone: true, selector: "app-svg-avatar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, animationsEnabled: { classPropertyName: "animationsEnabled", publicName: "animationsEnabled", isSignal: true, isRequired: false, transformFunction: null }, viseme: { classPropertyName: "viseme", publicName: "viseme", isSignal: true, isRequired: false, transformFunction: null }, idsPrefix: { classPropertyName: "idsPrefix", publicName: "idsPrefix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AvatarAnimationService], ngImport: i0, template: `<svg xmlns="http://www.w3.org/2000/svg"
+     [attr.viewBox]="viewBox"
+     class="avatar-svg"
+     [class.blink-blinking]="eyeBlinkClass() === 'blinking'"
+     [class.blink-half]="eyeBlinkClass() === 'blink-half'"
+     [style]="cssVarsStyle()"
+     [innerHTML]="innerHtml()"></svg>`, isInline: true, styles: [".avatar-svg{display:block;width:100%;height:100%;overflow:visible;shape-rendering:geometricPrecision}.avatar-svg *{transform-box:fill-box}.avatar-svg .eyelid-left,.avatar-svg .eyelid-right{transform-origin:center center;transform:scaleY(0);transition:transform .05s linear}.avatar-svg.blink-blinking .eyelid-left,.avatar-svg.blink-blinking .eyelid-right{transform:scaleY(1)}.avatar-svg.blink-half .eyelid-left,.avatar-svg.blink-half .eyelid-right{transform:scaleY(.5)}.avatar-svg .layer-head{transform-origin:100px 150px}.avatar-svg .layer-head.animate-idle{animation:avatar-head-idle 8s ease-in-out infinite;will-change:transform}.avatar-svg .pupils{transform:translate(var(--pupil-x, 0px),var(--pupil-y, 0px));transition:transform .4s cubic-bezier(.25,.46,.45,.94);will-change:transform}.avatar-svg .layer-mouth{transition:d .06s linear}@keyframes avatar-head-idle{0%,to{transform:rotate(0) translate(0)}20%{transform:rotate(1.2deg) translateY(-1.2px)}50%{transform:rotate(-.8deg) translateY(.8px)}70%{transform:rotate(1.5deg) translateY(-1.5px)}}@media (prefers-reduced-motion: reduce){.avatar-svg .layer-head{animation:none!important;transform:none!important}.avatar-svg .pupils,.avatar-svg .layer-mouth,.avatar-svg .eyelid-left,.avatar-svg .eyelid-right{transition:none}}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SvgAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-svg-avatar', standalone: true, encapsulation: ViewEncapsulation.None, providers: [AvatarAnimationService], template: `<svg xmlns="http://www.w3.org/2000/svg"
+     [attr.viewBox]="viewBox"
+     class="avatar-svg"
+     [class.blink-blinking]="eyeBlinkClass() === 'blinking'"
+     [class.blink-half]="eyeBlinkClass() === 'blink-half'"
+     [style]="cssVarsStyle()"
+     [innerHTML]="innerHtml()"></svg>`, styles: [".avatar-svg{display:block;width:100%;height:100%;overflow:visible;shape-rendering:geometricPrecision}.avatar-svg *{transform-box:fill-box}.avatar-svg .eyelid-left,.avatar-svg .eyelid-right{transform-origin:center center;transform:scaleY(0);transition:transform .05s linear}.avatar-svg.blink-blinking .eyelid-left,.avatar-svg.blink-blinking .eyelid-right{transform:scaleY(1)}.avatar-svg.blink-half .eyelid-left,.avatar-svg.blink-half .eyelid-right{transform:scaleY(.5)}.avatar-svg .layer-head{transform-origin:100px 150px}.avatar-svg .layer-head.animate-idle{animation:avatar-head-idle 8s ease-in-out infinite;will-change:transform}.avatar-svg .pupils{transform:translate(var(--pupil-x, 0px),var(--pupil-y, 0px));transition:transform .4s cubic-bezier(.25,.46,.45,.94);will-change:transform}.avatar-svg .layer-mouth{transition:d .06s linear}@keyframes avatar-head-idle{0%,to{transform:rotate(0) translate(0)}20%{transform:rotate(1.2deg) translateY(-1.2px)}50%{transform:rotate(-.8deg) translateY(.8px)}70%{transform:rotate(1.5deg) translateY(-1.5px)}}@media (prefers-reduced-motion: reduce){.avatar-svg .layer-head{animation:none!important;transform:none!important}.avatar-svg .pupils,.avatar-svg .layer-mouth,.avatar-svg .eyelid-left,.avatar-svg .eyelid-right{transition:none}}\n"] }]
+        }], ctorParameters: () => [] });
+
+// libs/avatar-player/src/lib/components/avatar-player/avatar-player.component.ts
+class AvatarPlayerComponent {
+    config;
+    speaking = false;
+    message = '';
+    /**
+     * Namespace for the generated `clipPath` ids.
+     *
+     * REQUIRED when more than one player is on a page. Every avatar emits
+     * `url(#hat-clip)`, which resolves against the *first* matching element in
+     * the document — so without a unique prefix per avatar they all clip against
+     * whichever came first, and hats and helmets stop hiding hair.
+     */
+    idsPrefix = '';
+    /** Base edge length in px. It grows while speaking. */
+    size = 48;
+    currentViseme = signal(0);
+    lipSync = inject(LipSyncService);
+    zone = inject(NgZone);
+    lipSyncCancelFn = null;
+    ngOnChanges(changes) {
+        if (changes['speaking'] || changes['message']) {
+            // Always cancel previous playback before starting new
+            this.lipSyncCancelFn?.();
+            if (this.speaking && this.message) {
+                const visemes = this.lipSync.textToVisemes(this.message);
+                this.lipSyncCancelFn = this.lipSync.play(visemes, (v) => {
+                    this.zone.run(() => this.currentViseme.set(v));
+                });
+            }
+            else {
+                this.currentViseme.set(0);
+            }
+        }
+    }
+    /** Speaking reads as a small "leaning in", so the avatar grows. */
+    displaySize() {
+        return this.speaking ? this.size * 1.5 : this.size;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: AvatarPlayerComponent, isStandalone: true, selector: "app-avatar-player", inputs: { config: "config", speaking: "speaking", message: "message", idsPrefix: "idsPrefix", size: "size" }, providers: [LipSyncService], usesOnChanges: true, ngImport: i0, template: `
+    <div class="avatar-player" [class.avatar-player--speaking]="speaking">
+      <app-svg-avatar
+        [config]="config"
+        [animationsEnabled]="true"
+        [viseme]="currentViseme()"
+        [idsPrefix]="idsPrefix"
+        [style.width.px]="displaySize()"
+        [style.height.px]="displaySize()"
+        class="player-avatar" />
+    </div>
+  `, isInline: true, styles: [".avatar-player{display:inline-flex;position:relative}.avatar-player .player-avatar{border-radius:50%;transition:width .2s ease,height .2s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SvgAvatarComponent, selector: "app-svg-avatar", inputs: ["config", "animationsEnabled", "viseme", "idsPrefix"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-avatar-player', standalone: true, imports: [CommonModule, SvgAvatarComponent], providers: [LipSyncService], template: `
+    <div class="avatar-player" [class.avatar-player--speaking]="speaking">
+      <app-svg-avatar
+        [config]="config"
+        [animationsEnabled]="true"
+        [viseme]="currentViseme()"
+        [idsPrefix]="idsPrefix"
+        [style.width.px]="displaySize()"
+        [style.height.px]="displaySize()"
+        class="player-avatar" />
+    </div>
+  `, styles: [".avatar-player{display:inline-flex;position:relative}.avatar-player .player-avatar{border-radius:50%;transition:width .2s ease,height .2s ease}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input,
+                args: [{ required: true }]
+            }], speaking: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], idsPrefix: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+// libs/avatar-player/src/lib/avatar-player.module.ts
+class AvatarPlayerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarPlayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: AvatarPlayerModule, imports: [CommonModule,
+            // Standalone components imported into the module
+            SvgAvatarComponent,
+            AvatarPlayerComponent], exports: [
+            // Only these two need to be exported for consumers
+            SvgAvatarComponent,
+            AvatarPlayerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarPlayerModule, providers: [
+            LipSyncService,
+            AvatarAnimationService,
+        ], imports: [CommonModule,
+            AvatarPlayerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarPlayerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        // Standalone components imported into the module
+                        SvgAvatarComponent,
+                        AvatarPlayerComponent,
+                    ],
+                    exports: [
+                        // Only these two need to be exported for consumers
+                        SvgAvatarComponent,
+                        AvatarPlayerComponent,
+                    ],
+                    providers: [
+                        LipSyncService,
+                        AvatarAnimationService,
+                    ],
+                }]
+        }] });
+
+/**
+ * Single public entry point of the Angular avatar package.
+ *
+ * A consuming app only ever imports from here:
+ *
+ *   import { AvatarPlayerComponent } from 'angular-avatar-player';
+ *
+ * The SVG geometry, palettes and viseme mapping live in ./lib/geometry — plain
+ * TypeScript with no Angular imports, but shipped inside this package. They are
+ * re-exported below, so there is one import path and a consumer never needs a
+ * second package to reach the renderer. `react-avatar-player` compiles the same
+ * geometry files into its own bundle, which is what keeps the two players from
+ * drifting apart.
+ */
+// ── Components ──────────────────────────────────────────────
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarAnimationService, AvatarAnimator, AvatarPlayerComponent, AvatarPlayerModule, BEARD_SHAPES, CANVAS, EYE_COLORS, EYE_SHAPES, GLASSES_SHAPES, HAIR_COLORS, HAIR_SHAPES, HAT_PROFESSIONS, HELMET_PROFESSIONS, LipSyncPlayer, LipSyncService, MAN_FACE, MOUTH_SHAPES, MS_PER_VISEME, MUSTACHE_SHAPES, PROFESSION_LAYERS, SKIN_TONES, SvgAvatarComponent, VISEME_PRESSED, VISEME_ROUND, VISEME_SILENCE, VISEME_SPREAD, VISEME_TEETH, VISEME_WIDE, WOMAN_FACE, avatarCssVars, buildAvatarSvg, buildAvatarSvgInner, buildBeardSvg, buildTraitPreview, faceFor, faceHalfWidthAt, fitToFace, hairClipUrl, hasHat, helmetClipUrl, isAstronaut, textToVisemes };
+//# sourceMappingURL=angular-avatar-player.mjs.map