@lifecorner/angular-ui-kit 3.7.0 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifecorner/angular-ui-kit",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "LifeCorner Design System – Angular UI component library",
   "license": "MIT",
   "repository": {
@@ -48,6 +48,9 @@
     "./icon-names.json": {
       "default": "./src/assets/icon-names.json"
     },
+    "./assets/character/*": {
+      "default": "./src/assets/character/*"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -107,6 +110,14 @@
       "types": "./types/lifecorner-angular-ui-kit-card.d.ts",
       "default": "./fesm2022/lifecorner-angular-ui-kit-card.mjs"
     },
+    "./character": {
+      "types": "./types/lifecorner-angular-ui-kit-character.d.ts",
+      "default": "./fesm2022/lifecorner-angular-ui-kit-character.mjs"
+    },
+    "./character-svg": {
+      "types": "./types/lifecorner-angular-ui-kit-character-svg.d.ts",
+      "default": "./fesm2022/lifecorner-angular-ui-kit-character-svg.mjs"
+    },
     "./chat": {
       "types": "./types/lifecorner-angular-ui-kit-chat.d.ts",
       "default": "./fesm2022/lifecorner-angular-ui-kit-chat.mjs"

package/src/assets/README.md

@@ -31,3 +31,7 @@ The words "Life" and "Corner" are **outlined to paths**, so the lockup looks the
 | Layout | x 118, baseline 74, size 72, letter-spacing −1.4, kerning on, no ligatures (as a browser sets it) |
 
 The font file itself is not shipped. Outlined glyphs in a logo are artwork made with the font, which the OFL allows.
+
+## Character (`character/`, 3.8)
+
+Edu's 14 poses, `<pose>-light.svg` and `<pose>-dark.svg` (100 × 100, about 1.5 KB each), for `lc-character` (`@lifecorner/angular-ui-kit/character`, loaded from `LC_CHARACTER_BASE_PATH`, default `LC_LOGO_BASE_PATH` + `/character`), `<img>` or `<picture>`. They resolve as `@lifecorner/angular-ui-kit/assets/character/<file>`; the same drawings are strings in `@lifecorner/angular-ui-kit/character-svg`. Source: the approved drawings in life-os `docs/brand/character/`, copied unchanged; the dark files of welcomes-member, resting, in-his-corner, comforts, all-done, connects, discovered, thinking, connection-paused and see-you are made by its dark rule (`scripts/generate-character-assets.mjs`).

package/src/assets/character/all-done-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C73 57 78 64 83 68"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><path d="M37.5 38.5 Q42 35 46.5 38.5" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58.6" cy="38.4" r="2.3" fill="#0c1722"></circle><path d="M44 45 Q50 52 56 45" fill="none" stroke="#0c1722" stroke-width="2.2" stroke-linecap="round"></path><g fill="#84c7d4" stroke="#84c7d4" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="85" cy="70" r="5.5"></circle></g></svg>

package/src/assets/character/all-done-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C73 57 78 64 83 68"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><path d="M37.5 38.5 Q42 35 46.5 38.5" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58.6" cy="38.4" r="2.3" fill="#0c1722"></circle><path d="M44 45 Q50 52 56 45" fill="none" stroke="#0c1722" stroke-width="2.2" stroke-linecap="round"></path><g fill="#84c7d4" stroke="#1a6a79" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="85" cy="70" r="5.5"></circle></g></svg>

package/src/assets/character/calm-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C73 57 78 64 83 68"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="42" cy="39.8" r="2.3" fill="#0c1722"></circle><circle cx="58" cy="39.8" r="2.3" fill="#0c1722"></circle><path d="M45 45.5 Q50 49 55 45.5" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path><g fill="#0a121b" stroke="#84c7d4" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="85" cy="70" r="5.5"></circle></g></svg>

package/src/assets/character/calm-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C73 57 78 64 83 68"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="42" cy="39.8" r="2.3" fill="#0c1722"></circle><circle cx="58" cy="39.8" r="2.3" fill="#0c1722"></circle><path d="M45 45.5 Q50 49 55 45.5" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path><g fill="#ffffff" stroke="#1a6a79" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="85" cy="70" r="5.5"></circle></g></svg>

package/src/assets/character/comforts-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C75 54 83 55 89 52"></path></g><g transform="rotate(-8 50 45)"><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="42" cy="39.8" r="2.3" fill="#0c1722"></circle><circle cx="58" cy="39.8" r="2.3" fill="#0c1722"></circle><g fill="none" stroke="#0c1722" stroke-width="1.8" stroke-linecap="round"><path d="M38 31 L45.5 32.5"></path><path d="M54.5 32.5 L62 31"></path><path d="M46 47.5 Q50 46.3 54 47.5"></path></g></g><g fill="#0a121b" stroke="#84c7d4" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="91" cy="51" r="5.5"></circle></g></svg>

package/src/assets/character/comforts-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C75 54 83 55 89 52"></path></g><g transform="rotate(-8 50 45)"><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="42" cy="39.8" r="2.3" fill="#0c1722"></circle><circle cx="58" cy="39.8" r="2.3" fill="#0c1722"></circle><g fill="none" stroke="#0c1722" stroke-width="1.8" stroke-linecap="round"><path d="M38 31 L45.5 32.5"></path><path d="M54.5 32.5 L62 31"></path><path d="M46 47.5 Q50 46.3 54 47.5"></path></g></g><g fill="#ffffff" stroke="#1a6a79" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="91" cy="51" r="5.5"></circle></g></svg>

package/src/assets/character/connection-paused-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M76.8 54.9 A10 10 0 0 1 86.7 72.2" fill="none" stroke="#4f9aaa" stroke-width="2" stroke-linecap="round"></path><path d="M85.2 70.1 L84.1 74.0 L88.2 74.3 Z" fill="#4f9aaa"></path><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C71 56 74 60 77 62"></path></g><g transform="rotate(4 50 45)"><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="44.0" cy="40.6" r="2.3" fill="#0c1722"></circle><circle cx="60.0" cy="40.6" r="2.3" fill="#0c1722"></circle><path d="M37.5 30.5 Q41.5 29.2 45.5 30.5" fill="none" stroke="#0c1722" stroke-width="1.8" stroke-linecap="round"></path><path d="M54.5 28.6 Q58.5 25.2 62.5 27.6" fill="none" stroke="#0c1722" stroke-width="1.8" stroke-linecap="round"></path><path d="M46.5 47 Q50 48.8 53.8 46.4" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path></g><g fill="#0a121b" stroke="#84c7d4" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle></g><circle cx="81" cy="64" r="5.5" fill="#0a121b" stroke="#84c7d4" stroke-width="3" stroke-dasharray="3.2 2.6"></circle></svg>

package/src/assets/character/connection-paused-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M76.8 54.9 A10 10 0 0 1 86.7 72.2" fill="none" stroke="#84c7d4" stroke-width="2" stroke-linecap="round"></path><path d="M85.2 70.1 L84.1 74.0 L88.2 74.3 Z" fill="#84c7d4"></path><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C71 56 74 60 77 62"></path></g><g transform="rotate(4 50 45)"><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="44.0" cy="40.6" r="2.3" fill="#0c1722"></circle><circle cx="60.0" cy="40.6" r="2.3" fill="#0c1722"></circle><path d="M37.5 30.5 Q41.5 29.2 45.5 30.5" fill="none" stroke="#0c1722" stroke-width="1.8" stroke-linecap="round"></path><path d="M54.5 28.6 Q58.5 25.2 62.5 27.6" fill="none" stroke="#0c1722" stroke-width="1.8" stroke-linecap="round"></path><path d="M46.5 47 Q50 48.8 53.8 46.4" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path></g><g fill="#ffffff" stroke="#1a6a79" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle></g><circle cx="81" cy="64" r="5.5" fill="#ffffff" stroke="#1a6a79" stroke-width="3" stroke-dasharray="3.2 2.6"></circle></svg>

package/src/assets/character/connects-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M8 56 Q20 94 50 94 Q80 94 92 56" fill="none" stroke="#4f9aaa" stroke-width="1.6" stroke-dasharray="3 3"></path><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M33 48 C24 52 16 56 9 56"></path><path d="M42 56 C38 66 32 74 24 80"></path><path d="M58 56 C62 66 68 74 76 80"></path><path d="M67 48 C76 52 84 56 91 56"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="42" cy="39.8" r="2.3" fill="#0c1722"></circle><circle cx="58" cy="39.8" r="2.3" fill="#0c1722"></circle><path d="M47 46.5 L53 46.5" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path><g fill="#84c7d4" stroke="#84c7d4" stroke-width="4"><circle cx="8" cy="56" r="5.5"></circle><circle cx="23" cy="81" r="5.5"></circle><circle cx="77" cy="81" r="5.5"></circle><circle cx="92" cy="56" r="5.5"></circle></g></svg>

package/src/assets/character/connects-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M8 56 Q20 94 50 94 Q80 94 92 56" fill="none" stroke="#84c7d4" stroke-width="1.6" stroke-dasharray="3 3"></path><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M33 48 C24 52 16 56 9 56"></path><path d="M42 56 C38 66 32 74 24 80"></path><path d="M58 56 C62 66 68 74 76 80"></path><path d="M67 48 C76 52 84 56 91 56"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="42" cy="39.8" r="2.3" fill="#0c1722"></circle><circle cx="58" cy="39.8" r="2.3" fill="#0c1722"></circle><path d="M47 46.5 L53 46.5" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path><g fill="#84c7d4" stroke="#1a6a79" stroke-width="4"><circle cx="8" cy="56" r="5.5"></circle><circle cx="23" cy="81" r="5.5"></circle><circle cx="77" cy="81" r="5.5"></circle><circle cx="92" cy="56" r="5.5"></circle></g></svg>

package/src/assets/character/discovered-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M88 3 L89.7 8.3 L95 10 L89.7 11.7 L88 17 L86.3 11.7 L81 10 L86.3 8.3 Z" fill="#e8b04a"></path><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 46 C73 39 77 31 78 24"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="42" cy="38" r="5" fill="#ffffff"></circle><circle cx="58" cy="38" r="5" fill="#ffffff"></circle><circle cx="43.4" cy="36.6" r="2.3" fill="#0c1722"></circle><circle cx="59.4" cy="36.6" r="2.3" fill="#0c1722"></circle><g fill="none" stroke="#0c1722" stroke-width="1.8" stroke-linecap="round"><path d="M37 30 Q41 27.5 45 29.5"></path><path d="M55 29.5 Q59 27.5 63 30"></path></g><circle cx="50" cy="47" r="1.9" fill="#0c1722"></circle><g fill="#0a121b" stroke="#84c7d4" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle></g><circle cx="78" cy="21" r="5.5" fill="#e8b04a" stroke="#84c7d4" stroke-width="4"></circle></svg>

package/src/assets/character/discovered-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M88 3 L89.7 8.3 L95 10 L89.7 11.7 L88 17 L86.3 11.7 L81 10 L86.3 8.3 Z" fill="#e8b04a"></path><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 46 C73 39 77 31 78 24"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="42" cy="38" r="5" fill="#ffffff"></circle><circle cx="58" cy="38" r="5" fill="#ffffff"></circle><circle cx="43.4" cy="36.6" r="2.3" fill="#0c1722"></circle><circle cx="59.4" cy="36.6" r="2.3" fill="#0c1722"></circle><g fill="none" stroke="#0c1722" stroke-width="1.8" stroke-linecap="round"><path d="M37 30 Q41 27.5 45 29.5"></path><path d="M55 29.5 Q59 27.5 63 30"></path></g><circle cx="50" cy="47" r="1.9" fill="#0c1722"></circle><g fill="#ffffff" stroke="#1a6a79" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle></g><circle cx="78" cy="21" r="5.5" fill="#e8b04a" stroke="#1a6a79" stroke-width="4"></circle></svg>

package/src/assets/character/happy-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M9 29 L10.5 32.5 L14 34 L10.5 35.5 L9 39 L7.5 35.5 L4 34 L7.5 32.5 Z" fill="#e8b04a"></path><path d="M91 29 L92.5 32.5 L96 34 L92.5 35.5 L91 39 L89.5 35.5 L86 34 L89.5 32.5 Z" fill="#e8b04a"></path><path d="M50 2.5 L51.4 5.7 L54.5 7 L51.4 8.3 L50 11.5 L48.6 8.3 L45.5 7 L48.6 5.7 Z" fill="#e8b04a"></path><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 46 C26 38 21 29 19 19"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 46 C74 38 79 29 81 19"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><path d="M37.5 38 Q42 33.5 46.5 38" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M53.5 38 Q58 33.5 62.5 38" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M44.5 45 Q50 53 55.5 45 Q50 47 44.5 45 Z" fill="#0c1722"></path><g fill="#84c7d4" stroke="#84c7d4" stroke-width="4"><circle cx="18" cy="16" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="82" cy="16" r="5.5"></circle></g></svg>

package/src/assets/character/happy-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M9 29 L10.5 32.5 L14 34 L10.5 35.5 L9 39 L7.5 35.5 L4 34 L7.5 32.5 Z" fill="#e8b04a"></path><path d="M91 29 L92.5 32.5 L96 34 L92.5 35.5 L91 39 L89.5 35.5 L86 34 L89.5 32.5 Z" fill="#e8b04a"></path><path d="M50 2.5 L51.4 5.7 L54.5 7 L51.4 8.3 L50 11.5 L48.6 8.3 L45.5 7 L48.6 5.7 Z" fill="#e8b04a"></path><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 46 C26 38 21 29 19 19"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 46 C74 38 79 29 81 19"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><path d="M37.5 38 Q42 33.5 46.5 38" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M53.5 38 Q58 33.5 62.5 38" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M44.5 45 Q50 53 55.5 45 Q50 47 44.5 45 Z" fill="#0c1722"></path><g fill="#84c7d4" stroke="#1a6a79" stroke-width="4"><circle cx="18" cy="16" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="82" cy="16" r="5.5"></circle></g></svg>

package/src/assets/character/hello-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 46 C74 40 79 31 81 22"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><g fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"><path d="M37.5 38 Q42 33.5 46.5 38"></path><path d="M53.5 38 Q58 33.5 62.5 38"></path><path d="M45 45.5 Q50 50 55 45.5"></path></g><g fill="#0a121b" stroke="#84c7d4" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="82" cy="19" r="5.5"></circle></g></svg>

package/src/assets/character/hello-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 46 C74 40 79 31 81 22"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><g fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"><path d="M37.5 38 Q42 33.5 46.5 38"></path><path d="M53.5 38 Q58 33.5 62.5 38"></path><path d="M45 45.5 Q50 50 55 45.5"></path></g><g fill="#ffffff" stroke="#1a6a79" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="82" cy="19" r="5.5"></circle></g></svg>

package/src/assets/character/in-his-corner-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M6 6 L6 92 L98 92" fill="none" stroke="#2a4250" stroke-width="2" stroke-linecap="round"></path><g transform="translate(3 6)"><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 58 21 70 14 80"></path><path d="M44 56 C42 66 38 74 33 80"></path><path d="M56 56 C59 66 63 74 68 80"></path><path d="M66 50 C74 58 82 72 90 80"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="43.6" cy="38.8" r="2.3" fill="#0c1722"></circle><circle cx="59.6" cy="38.8" r="2.3" fill="#0c1722"></circle><path d="M45 45.5 Q50 49 55 45.5" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path><g fill="#0a121b" stroke="#84c7d4" stroke-width="4"><circle cx="14" cy="80" r="5.5"></circle><circle cx="33" cy="80" r="5.5"></circle><circle cx="68" cy="80" r="5.5"></circle><circle cx="90" cy="80" r="5.5"></circle></g></g></svg>

package/src/assets/character/in-his-corner-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M6 6 L6 92 L98 92" fill="none" stroke="#cfe0e4" stroke-width="2" stroke-linecap="round"></path><g transform="translate(3 6)"><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 58 21 70 14 80"></path><path d="M44 56 C42 66 38 74 33 80"></path><path d="M56 56 C59 66 63 74 68 80"></path><path d="M66 50 C74 58 82 72 90 80"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="43.6" cy="38.8" r="2.3" fill="#0c1722"></circle><circle cx="59.6" cy="38.8" r="2.3" fill="#0c1722"></circle><path d="M45 45.5 Q50 49 55 45.5" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path><g fill="#ffffff" stroke="#1a6a79" stroke-width="4"><circle cx="14" cy="80" r="5.5"></circle><circle cx="33" cy="80" r="5.5"></circle><circle cx="68" cy="80" r="5.5"></circle><circle cx="90" cy="80" r="5.5"></circle></g></g></svg>

package/src/assets/character/resting-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 58 24 66 22 74"></path><path d="M44 56 C42 65 40 72 38 79"></path><path d="M56 56 C58 65 60 72 62 79"></path><path d="M66 50 C73 58 76 66 78 74"></path></g><g transform="rotate(-5 50 45)"><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><path d="M37.5 37.5 Q42 41.5 46.5 37.5" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M53.5 37.5 Q58 41.5 62.5 37.5" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M46 46 Q50 48.6 54 46" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path></g><g fill="#84c7d4" stroke="#84c7d4" stroke-width="4"><circle cx="22" cy="76" r="5.5"></circle><circle cx="38" cy="81" r="5.5"></circle><circle cx="62" cy="81" r="5.5"></circle><circle cx="78" cy="76" r="5.5"></circle></g></svg>

package/src/assets/character/resting-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 58 24 66 22 74"></path><path d="M44 56 C42 65 40 72 38 79"></path><path d="M56 56 C58 65 60 72 62 79"></path><path d="M66 50 C73 58 76 66 78 74"></path></g><g transform="rotate(-5 50 45)"><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><path d="M37.5 37.5 Q42 41.5 46.5 37.5" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M53.5 37.5 Q58 41.5 62.5 37.5" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M46 46 Q50 48.6 54 46" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path></g><g fill="#84c7d4" stroke="#1a6a79" stroke-width="4"><circle cx="22" cy="76" r="5.5"></circle><circle cx="38" cy="81" r="5.5"></circle><circle cx="62" cy="81" r="5.5"></circle><circle cx="78" cy="76" r="5.5"></circle></g></svg>

package/src/assets/character/see-you-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#4f9aaa" stroke-width="1.8" stroke-linecap="round"><path d="M7 13 Q4.5 19 7 25"></path><path d="M30 12 Q32.5 18 30 24"></path></g><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 46 C26 40 21 31 19 22"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C73 57 78 64 83 68"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><path d="M37.5 38 Q42 33.5 46.5 38" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M53.5 38 Q58 33.5 62.5 38" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M45 45.5 Q50 50 55 45.5" fill="none" stroke="#0c1722" stroke-width="2.2" stroke-linecap="round"></path><g fill="#0a121b" stroke="#84c7d4" stroke-width="4"><circle cx="18" cy="19" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="85" cy="70" r="5.5"></circle></g></svg>

package/src/assets/character/see-you-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="#84c7d4" stroke-width="1.8" stroke-linecap="round"><path d="M7 13 Q4.5 19 7 25"></path><path d="M30 12 Q32.5 18 30 24"></path></g><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 46 C26 40 21 31 19 22"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C73 57 78 64 83 68"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><path d="M37.5 38 Q42 33.5 46.5 38" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M53.5 38 Q58 33.5 62.5 38" fill="none" stroke="#0c1722" stroke-width="2.4" stroke-linecap="round"></path><path d="M45 45.5 Q50 50 55 45.5" fill="none" stroke="#0c1722" stroke-width="2.2" stroke-linecap="round"></path><g fill="#ffffff" stroke="#1a6a79" stroke-width="4"><circle cx="18" cy="19" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="85" cy="70" r="5.5"></circle></g></svg>

package/src/assets/character/shows-the-way-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M78 30 Q86 27 94 29" fill="none" stroke="#4f9aaa" stroke-width="1.6" stroke-dasharray="3 3" stroke-linecap="round"></path><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M67 45 C76 43 84 41 91 39"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="44.2" cy="38.6" r="2.3" fill="#0c1722"></circle><circle cx="60.2" cy="38.6" r="2.3" fill="#0c1722"></circle><path d="M45 45 Q50.5 49.5 56 45" fill="none" stroke="#0c1722" stroke-width="2.2" stroke-linecap="round"></path><g fill="#0a121b" stroke="#84c7d4" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle></g><g fill="#84c7d4" stroke="#84c7d4" stroke-width="4"><circle cx="92" cy="39" r="5.5"></circle></g></svg>

package/src/assets/character/shows-the-way-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M78 30 Q86 27 94 29" fill="none" stroke="#84c7d4" stroke-width="1.6" stroke-dasharray="3 3" stroke-linecap="round"></path><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 50 C27 57 22 64 17 68"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M67 45 C76 43 84 41 91 39"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="44.2" cy="38.6" r="2.3" fill="#0c1722"></circle><circle cx="60.2" cy="38.6" r="2.3" fill="#0c1722"></circle><path d="M45 45 Q50.5 49.5 56 45" fill="none" stroke="#0c1722" stroke-width="2.2" stroke-linecap="round"></path><g fill="#ffffff" stroke="#1a6a79" stroke-width="4"><circle cx="15" cy="70" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle></g><g fill="#84c7d4" stroke="#1a6a79" stroke-width="4"><circle cx="92" cy="39" r="5.5"></circle></g></svg>

package/src/assets/character/thinking-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="#4f9aaa"><circle cx="74" cy="20" r="2"></circle><circle cx="80.5" cy="15" r="2.4"></circle><circle cx="87.5" cy="10.5" r="2.8"></circle></g><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C73 57 78 64 83 68"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="40.8" cy="36.6" r="2.3" fill="#0c1722"></circle><circle cx="56.8" cy="36.6" r="2.3" fill="#0c1722"></circle><path d="M46 47 Q50.5 48.5 54 46" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path><path d="M33 50 C29 57 32 63 38 60" fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"></path><g fill="#0a121b" stroke="#84c7d4" stroke-width="4"><circle cx="40" cy="58" r="4.6"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="85" cy="70" r="5.5"></circle></g></svg>

package/src/assets/character/thinking-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="#84c7d4"><circle cx="74" cy="20" r="2"></circle><circle cx="80.5" cy="15" r="2.4"></circle><circle cx="87.5" cy="10.5" r="2.8"></circle></g><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 50 C73 57 78 64 83 68"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="40.8" cy="36.6" r="2.3" fill="#0c1722"></circle><circle cx="56.8" cy="36.6" r="2.3" fill="#0c1722"></circle><path d="M46 47 Q50.5 48.5 54 46" fill="none" stroke="#0c1722" stroke-width="2" stroke-linecap="round"></path><path d="M33 50 C29 57 32 63 38 60" fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"></path><g fill="#ffffff" stroke="#1a6a79" stroke-width="4"><circle cx="40" cy="58" r="4.6"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="85" cy="70" r="5.5"></circle></g></svg>

package/src/assets/character/welcomes-member-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50 15.5 C44 11.5 41 8.5 41 6 C41 3.4 43 2.2 45.2 2.2 C47.2 2.2 49 3.4 50 5.2 C51 3.4 52.8 2.2 54.8 2.2 C57 2.2 59 3.4 59 6 C59 8.5 56 11.5 50 15.5 Z" fill="#e8b04a"></path><g fill="none" stroke="#84c7d4" stroke-width="5.5" stroke-linecap="round"><path d="M34 46 C26 44 18 40 11 35"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 46 C74 44 82 40 89 35"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#84c7d4"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.22"></ellipse><circle cx="37" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#1a6a79" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="42.0" cy="38.6" r="2.3" fill="#0c1722"></circle><circle cx="58.0" cy="38.6" r="2.3" fill="#0c1722"></circle><path d="M44 45 Q50 51.5 56 45" fill="none" stroke="#0c1722" stroke-width="2.2" stroke-linecap="round"></path><g fill="#0a121b" stroke="#84c7d4" stroke-width="4"><circle cx="10" cy="34" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="90" cy="34" r="5.5"></circle></g></svg>

package/src/assets/character/welcomes-member-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50 15.5 C44 11.5 41 8.5 41 6 C41 3.4 43 2.2 45.2 2.2 C47.2 2.2 49 3.4 50 5.2 C51 3.4 52.8 2.2 54.8 2.2 C57 2.2 59 3.4 59 6 C59 8.5 56 11.5 50 15.5 Z" fill="#e8b04a"></path><g fill="none" stroke="#1a6a79" stroke-width="5.5" stroke-linecap="round"><path d="M34 46 C26 44 18 40 11 35"></path><path d="M44 56 C42 65 39 73 36 79"></path><path d="M56 56 C58 65 61 73 64 79"></path><path d="M66 46 C74 44 82 40 89 35"></path></g><ellipse cx="50" cy="38" rx="22" ry="20" fill="#1a6a79"></ellipse><ellipse cx="43" cy="29" rx="8" ry="4.5" fill="#ffffff" opacity="0.14"></ellipse><circle cx="37" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="63" cy="46" r="3.2" fill="#84c7d4" opacity="0.55"></circle><circle cx="42" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="58" cy="38" r="4.6" fill="#ffffff"></circle><circle cx="42.0" cy="38.6" r="2.3" fill="#0c1722"></circle><circle cx="58.0" cy="38.6" r="2.3" fill="#0c1722"></circle><path d="M44 45 Q50 51.5 56 45" fill="none" stroke="#0c1722" stroke-width="2.2" stroke-linecap="round"></path><g fill="#ffffff" stroke="#1a6a79" stroke-width="4"><circle cx="10" cy="34" r="5.5"></circle><circle cx="35" cy="82" r="5.5"></circle><circle cx="65" cy="82" r="5.5"></circle><circle cx="90" cy="34" r="5.5"></circle></g></svg>

package/src/styles/_horizon.scss

@@ -31,6 +31,19 @@
  *                            on the land add its height, e.g. 136 px on the phone)
  *   --lc-horizon-sun-radius  the sun's radius (58 px phone, 70 · 90 · 120 · 166 px)
  *   --lc-horizon-sun-x       the sun's centre from the block's left edge (72%)
+ *   --lc-horizon-figure-size the figure's size in .lc-horizon__figure
+ *                            (64 px phone, 96 px from 1024, 128 px from 1920)
+ *   --lc-horizon-figure-gap  its right edge to the sun's left edge (16 px; 24 px from 1024)
+ *
+ * Figure (3.8, G-4): Edu on the line, left of the sun, in a DIRECT child with
+ * .lc-horizon__figure (lc-character, <img>, <picture>, or an element holding an
+ * inline <svg>), placed BEFORE .lc-horizon__land. His feet stand on the line
+ * (the box bottom 12.5 % of its size below it); the block's height above the
+ * line becomes max(sun + 22 px, figure + 8 px). Decorative, never a target:
+ *
+ *   <div class="lc-horizon" aria-hidden="true">
+ *     <lc-character class="lc-horizon__figure" pose="comforts" />
+ *   </div>
  *
  * Colours: --color-background-low, --color-horizon-line, --color-land-1…3,
  * --color-sun-1…3, --color-sun-ring, --color-sun-halo (theme tokens).
@@ -40,6 +53,8 @@
   --_lc-horizon-land: var(--lc-horizon-land, 112px);
   --_lc-horizon-r: var(--lc-horizon-sun-radius, 58px);
   --_lc-horizon-x: var(--lc-horizon-sun-x, 72%);
+  --_lc-horizon-fig: var(--lc-horizon-figure-size, 64px);
+  --_lc-horizon-fig-gap: var(--lc-horizon-figure-gap, 16px);
 
   position: relative;
   flex: 1 0 auto;
@@ -84,6 +99,8 @@
   @media (min-width: 1024px) {
     --_lc-horizon-land: var(--lc-horizon-land, 100px);
     --_lc-horizon-r: var(--lc-horizon-sun-radius, 70px);
+    --_lc-horizon-fig: var(--lc-horizon-figure-size, 96px);
+    --_lc-horizon-fig-gap: var(--lc-horizon-figure-gap, 24px);
   }
 
   @media (min-width: 1280px) {
@@ -99,6 +116,7 @@
   @media (min-width: 1920px) {
     --_lc-horizon-land: var(--lc-horizon-land, 184px);
     --_lc-horizon-r: var(--lc-horizon-sun-radius, 166px);
+    --_lc-horizon-fig: var(--lc-horizon-figure-size, 128px);
   }
 
   // Windows high contrast and other forced-colour modes: no decoration.
@@ -113,3 +131,37 @@
   position: absolute;
   inset: auto 0 0;
 }
+
+// Edu on the horizon line (3.8, G-4): left of the sun, the feet on the line.
+// Only a block WITH the figure gets the taller minimum; without it the block
+// renders exactly as before.
+.lc-horizon:has(> .lc-horizon__figure) {
+  min-height: calc(var(--_lc-horizon-land) + max(var(--_lc-horizon-r) + 22px, var(--_lc-horizon-fig) + 8px));
+}
+
+// The slot sizes the figure (an lc-character's `size` input doesn't apply).
+// Its right edge sits the gap left of the sun's left edge; the box bottom lies
+// 12.5 % of its size below the line, where the standing poses' feet end
+// (y 87.5 of 100). Px, not rem: at 200 % text the figure keeps its size.
+.lc-horizon__figure {
+  --lc-character-size: var(--_lc-horizon-fig);
+
+  position: absolute;
+  right: calc(100% - var(--_lc-horizon-x) + var(--_lc-horizon-r) + var(--_lc-horizon-fig-gap));
+  bottom: calc(var(--_lc-horizon-land) - var(--_lc-horizon-fig) * 0.125);
+  width: var(--_lc-horizon-fig);
+  height: var(--_lc-horizon-fig);
+  pointer-events: none;
+
+  // Decoration, like the horizon's own: dropped, its box kept.
+  @media (forced-colors: active) {
+    visibility: hidden;
+  }
+}
+
+// A <picture> or an element holding an inline <svg>.
+.lc-horizon__figure > :is(img, svg) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/src/styles/horizon.figure.spec.ts

@@ -0,0 +1,79 @@
+import { compile } from 'sass';
+import { resolve } from 'path';
+
+/**
+ * The horizon's figure slot (3.8, G-4, AC-15 and AC-16 of request 005), read
+ * from the compiled CSS. The block without a figure is pinned by
+ * horizon.spec.ts, which this request leaves unchanged.
+ */
+const css = '\n' + compile(resolve(__dirname, '_horizon.scss')).css;
+
+/** The declarations of the top-level rule whose selector is exactly `selector` (compiled rules start a line). */
+function rule(selector: string): string {
+  const start = css.indexOf(`\n${selector} {`);
+  expect(start).toBeGreaterThan(-1);
+  return css.slice(start, css.indexOf('}', start));
+}
+
+describe('.lc-horizon__figure (G-4)', () => {
+  it('takes the figure size and gap from custom properties: 64 px and 16 px on the phone', () => {
+    const base = rule('.lc-horizon');
+    expect(base).toMatch(/--_lc-horizon-fig:\s*var\(--lc-horizon-figure-size, 64px\)/);
+    expect(base).toMatch(/--_lc-horizon-fig-gap:\s*var\(--lc-horizon-figure-gap, 16px\)/);
+  });
+
+  it.each([
+    [1024, '96px', '24px'],
+    [1920, '128px', null],
+  ])('steps up from %s px: size %s, gap %s', (width, size, gap) => {
+    const start = css.indexOf(`@media (min-width: ${width}px) {\n  .lc-horizon {`);
+    expect(start).toBeGreaterThan(-1);
+    const step = css.slice(start, css.indexOf('}', start));
+    expect(step).toContain(`--_lc-horizon-fig: var(--lc-horizon-figure-size, ${size})`);
+    if (gap) expect(step).toContain(`--_lc-horizon-fig-gap: var(--lc-horizon-figure-gap, ${gap})`);
+    else expect(step).not.toContain('--_lc-horizon-fig-gap');
+  });
+
+  it.each([1280, 1440])('keeps 96 px and 24 px at %s px (no figure step there)', (width) => {
+    const start = css.indexOf(`@media (min-width: ${width}px) {\n  .lc-horizon {`);
+    expect(css.slice(start, css.indexOf('}', start))).not.toContain('--_lc-horizon-fig');
+  });
+
+  it('raises the minimum above the line to max(sun + 22 px, figure + 8 px) only with a figure child', () => {
+    expect(rule('.lc-horizon:has(> .lc-horizon__figure)')).toMatch(
+      /min-height:\s*calc\(var\(--_lc-horizon-land\) \+ max\(var\(--_lc-horizon-r\) \+ 22px, var\(--_lc-horizon-fig\) \+ 8px\)\)/,
+    );
+    // The block without the figure keeps land + sun + 22 px (horizon.spec.ts).
+    expect(rule('.lc-horizon')).toMatch(/min-height:\s*calc\(var\(--_lc-horizon-land\) \+ var\(--_lc-horizon-r\) \+ 22px\)/);
+  });
+
+  it('places the figure left of the sun with the gap, its feet on the line, sized by the slot', () => {
+    const figure = rule('.lc-horizon__figure');
+    expect(figure).toMatch(/position:\s*absolute/);
+    expect(figure).toMatch(/right:\s*calc\(100% - var\(--_lc-horizon-x\) \+ var\(--_lc-horizon-r\) \+ var\(--_lc-horizon-fig-gap\)\)/);
+    expect(figure).toMatch(/bottom:\s*calc\(var\(--_lc-horizon-land\) - var\(--_lc-horizon-fig\) \* 0\.125\)/);
+    expect(figure).toMatch(/width:\s*var\(--_lc-horizon-fig\)/);
+    expect(figure).toMatch(/height:\s*var\(--_lc-horizon-fig\)/);
+    expect(figure).toMatch(/--lc-character-size:\s*var\(--_lc-horizon-fig\)/);
+  });
+
+  it('AC-16: the figure is never a pointer target', () => {
+    expect(rule('.lc-horizon__figure')).toMatch(/pointer-events:\s*none/);
+  });
+
+  it('drops the figure in forced colours, keeping its box', () => {
+    expect(css).toMatch(/@media \(forced-colors: active\) \{\s*\.lc-horizon__figure \{\s*visibility: hidden;/);
+  });
+
+  it('fills the slot with a <picture>’s image or an inline <svg>', () => {
+    const child = rule('.lc-horizon__figure > :is(img, svg)');
+    expect(child).toMatch(/display:\s*block/);
+    expect(child).toMatch(/width:\s*100%/);
+    expect(child).toMatch(/height:\s*100%/);
+  });
+
+  it('adds no motion and no raw colour', () => {
+    const figureCss = css.slice(css.indexOf('.lc-horizon:has('));
+    expect(figureCss).not.toMatch(/animation|transition|#[0-9a-f]{3,6}\b/i);
+  });
+});

package/types/lifecorner-angular-ui-kit-character-svg.d.ts

@@ -0,0 +1,44 @@
+/** One of a pose's two drawings: `light` for light surfaces, `dark` for dark ones. */
+export type CharacterDrawing = 'light' | 'dark';
+/** A pose's two drawings as SVG markup, each equal to its file `<pose>-<drawing>.svg`. */
+export interface CharacterSvgPair {
+  readonly light: string;
+  readonly dark: string;
+}
+/**
+ * Edu's poses (3.8, gap G-4), in the order of the docs. `calm` is the neutral
+ * Edu; the post-only poses (peeks-around-corner, amazed, looks-ahead) are not shipped.
+ */
+export type CharacterPose = 'hello' | 'shows-the-way' | 'happy' | 'welcomes-member' | 'resting' | 'in-his-corner' | 'comforts' | 'all-done' | 'calm' | 'connects' | 'discovered' | 'thinking' | 'connection-paused' | 'see-you';
+/** Every shipped pose, in the order of the docs. */
+export declare const CHARACTER_POSES: readonly CharacterPose[];
+/** hello (Hallo); dark drawn. */
+export declare const CHARACTER_SVG_HELLO: CharacterSvgPair;
+/** shows-the-way (Zeigt den Weg); dark drawn. */
+export declare const CHARACTER_SVG_SHOWS_THE_WAY: CharacterSvgPair;
+/** happy (Freut sich); dark drawn. */
+export declare const CHARACTER_SVG_HAPPY: CharacterSvgPair;
+/** welcomes-member (Begrüßt ein Mitglied); dark by the rule. */
+export declare const CHARACTER_SVG_WELCOMES_MEMBER: CharacterSvgPair;
+/** resting (Ruht sich aus); dark by the rule. */
+export declare const CHARACTER_SVG_RESTING: CharacterSvgPair;
+/** in-his-corner (Sitzt in seiner Ecke); dark by the rule. */
+export declare const CHARACTER_SVG_IN_HIS_CORNER: CharacterSvgPair;
+/** comforts (Tröstet); dark by the rule. */
+export declare const CHARACTER_SVG_COMFORTS: CharacterSvgPair;
+/** all-done (Erledigt); dark by the rule. */
+export declare const CHARACTER_SVG_ALL_DONE: CharacterSvgPair;
+/** calm (ruhig); dark drawn. */
+export declare const CHARACTER_SVG_CALM: CharacterSvgPair;
+/** connects (Verbindet); dark by the rule. */
+export declare const CHARACTER_SVG_CONNECTS: CharacterSvgPair;
+/** discovered (Hat etwas entdeckt); dark by the rule. */
+export declare const CHARACTER_SVG_DISCOVERED: CharacterSvgPair;
+/** thinking (Denkt nach); dark by the rule. */
+export declare const CHARACTER_SVG_THINKING: CharacterSvgPair;
+/** connection-paused (Verbindung pausiert); dark by the rule. */
+export declare const CHARACTER_SVG_CONNECTION_PAUSED: CharacterSvgPair;
+/** see-you (Bis bald); dark by the rule. */
+export declare const CHARACTER_SVG_SEE_YOU: CharacterSvgPair;
+/** Every pose's light and dark drawing, keyed by pose. */
+export declare const CHARACTER_SVG: Readonly<Record<CharacterPose, CharacterSvgPair>>;

package/types/lifecorner-angular-ui-kit-character.d.ts

@@ -0,0 +1,104 @@
+import * as i0 from "@angular/core";
+import { InjectionToken } from "@angular/core";
+import { CharacterPose, CharacterPose as CharacterPose$1 } from "@lifecorner/angular-ui-kit/character-svg";
+/** Edge of the figure's square box in px. `--lc-character-size` overrides it. */
+export type CharacterSize = 48 | 64 | 80 | 96 | 128;
+/**
+ * Which drawing to show.
+ * - `auto`: the root theme picks the light or the dark drawing.
+ * - `dark`: the on-dark drawing in both themes, for a fixed dark surface.
+ */
+export type CharacterColorMode = 'auto' | 'dark';
+/**
+ * The URL folder that holds the pose files (`<pose>-light.svg`,
+ * `<pose>-dark.svg`, copied from the package's `assets/character/`). Follows
+ * `LC_LOGO_BASE_PATH` (default `/assets` → `/assets/character`) unless you
+ * provide it yourself.
+ *
+ * @example
+ * ```ts
+ * providers: [{ provide: LC_CHARACTER_BASE_PATH, useValue: '/static/edu' }]
+ * ```
+ */
+export declare const LC_CHARACTER_BASE_PATH: InjectionToken<string>;
+/**
+ * Edu, the LifeCorner character, in one of his poses (3.8, gap G-4).
+ *
+ * Renders the pose files as `<img>` (no inline SVG, no Trusted Types policy),
+ * in a square box that is sized by CSS before any JavaScript runs, so the
+ * figure prerenders and never shifts the layout. Decorative by default
+ * (`aria-hidden="true"`); `ariaLabel` makes it an image with that name. The
+ * figure is still: nothing animates.
+ *
+ * Without Angular, use the files (`@lifecorner/angular-ui-kit/assets/character/<pose>-<light|dark>.svg`)
+ * or the strings of `@lifecorner/angular-ui-kit/character-svg`.
+ *
+ * @example Decorative, follows the app theme
+ * ```html
+ * <lc-character pose="comforts" size="96" />
+ * ```
+ *
+ * @example On a fixed dark surface, with a name
+ * ```html
+ * <lc-character pose="hello" colorMode="dark" ariaLabel="Edu winkt" />
+ * ```
+ */
+export declare class CharacterComponent {
+  /**
+   * Which pose to draw: hello, shows-the-way, happy, welcomes-member, resting,
+   * in-his-corner, comforts, all-done, calm, connects, discovered, thinking,
+   * connection-paused, see-you. `calm` is the neutral Edu.
+   * @default 'calm'
+   */
+  readonly pose: import("@angular/core").InputSignal<CharacterPose$1>;
+  /**
+   * Edge of the square box in px: 48, 64, 80, 96 or 128 (`size="96"` works
+   * too). `--lc-character-size` overrides it; set that hook per breakpoint in
+   * CSS.
+   * @default 64
+   */
+  readonly size: import("@angular/core").InputSignalWithTransform<CharacterSize, CharacterSize | "48" | "64" | "80" | "96" | "128">;
+  /**
+   * Which drawing to show.
+   * - `auto`: both drawings are in the DOM and the root theme shows one
+   *   (light, dark, and system with the OS setting), without JavaScript.
+   * - `dark`: only the on-dark drawing, in both themes, for a fixed dark
+   *   surface such as the hero band.
+   * @default 'auto'
+   */
+  readonly colorMode: import("@angular/core").InputSignal<CharacterColorMode>;
+  /**
+   * Empty: decorative (`aria-hidden="true"`). Set: `role="img"` with this
+   * name. This is your own translated text; the kit ships none.
+   * @default ''
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  private readonly basePath;
+  protected readonly lightSrc: import("@angular/core").Signal<string>;
+  protected readonly darkSrc: import("@angular/core").Signal<string>;
+  protected readonly hostClass: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CharacterComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<CharacterComponent, "lc-character", never, {
+    "pose": {
+      "alias": "pose";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "colorMode": {
+      "alias": "colorMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export type { CharacterPose };

package/types/lifecorner-angular-ui-kit.d.ts

@@ -9,6 +9,8 @@ export * from "@lifecorner/angular-ui-kit/icon";
 export * from "@lifecorner/angular-ui-kit/icon-names";
 export * from "@lifecorner/angular-ui-kit/icons";
 export * from "@lifecorner/angular-ui-kit/logo";
+export * from "@lifecorner/angular-ui-kit/character";
+export * from "@lifecorner/angular-ui-kit/character-svg";
 export * from "@lifecorner/angular-ui-kit/menu";
 export * from "@lifecorner/angular-ui-kit/input";
 export * from "@lifecorner/angular-ui-kit/radio";