angular-avatar-player 0.1.0

package/lib/geometry/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+export type { AvatarConfig, Gender, SkinTone, HaircutStyle, HairColor, EyeColor, MustacheStyle, BeardStyle, EyeStyle, GlassesStyle, ProfessionType, } from './avatar.model';
+export { SKIN_TONES } from './skin-tones';
+export { HAIR_COLORS } from './hair-colors';
+export { EYE_COLORS } from './eye-colors';
+export { buildTraitPreview } from './trait-previews';
+export type { PreviewKind } from './trait-previews';
+export { textToVisemes, MS_PER_VISEME } from './visemes';
+export { VISEME_SILENCE, VISEME_WIDE, VISEME_ROUND, VISEME_SPREAD, VISEME_PRESSED, VISEME_TEETH, } from './visemes';
+export { buildAvatarSvg, buildAvatarSvgInner, avatarCssVars, hairClipUrl, helmetClipUrl, isAstronaut, hasHat, HAT_PROFESSIONS, HELMET_PROFESSIONS, CANVAS, } from './avatar-renderer';
+export type { BuildAvatarOptions } from './avatar-renderer';
+export { MOUTH_SHAPES } from './svg-parts/mouth-shapes';
+export { EYE_SHAPES } from './svg-parts/eye-shapes';
+export { HAIR_SHAPES } from './svg-parts/hair-shapes';
+export { GLASSES_SHAPES } from './svg-parts/glasses-shapes';
+export { MUSTACHE_SHAPES } from './svg-parts/mustache-shapes';
+export { BEARD_SHAPES } from './svg-parts/beard-shapes';
+export { faceFor, faceHalfWidthAt, fitToFace, buildBeardSvg, MAN_FACE, WOMAN_FACE, } from './svg-parts/beard-path';
+export type { FaceGeometry } from './svg-parts/beard-path';
+export { PROFESSION_LAYERS } from './svg-parts/profession-layers';
+export { AvatarAnimator } from './avatar-animator';
+export { LipSyncPlayer } from './lip-sync-player';

package/lib/geometry/lip-sync-player.d.ts

@@ -0,0 +1,16 @@
+export declare class LipSyncPlayer {
+    private readonly MS_PER_VISEME;
+    /** @see textToVisemes */
+    textToVisemes(text: string): number[];
+    /**
+     * 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: number[], onViseme: (v: number) => void, onEnd?: () => void): () => void;
+}

package/lib/geometry/skin-tones.d.ts

@@ -0,0 +1,21 @@
+import { SkinTone } from './avatar.model';
+/**
+ * - `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.
+ */
+export declare const SKIN_TONES: Record<SkinTone, {
+    base: string;
+    ear: string;
+    lip: string;
+    shadow: string;
+}>;

package/lib/geometry/svg-parts/beard-path.d.ts

@@ -0,0 +1,16 @@
+import type { BeardStyle, Gender } from '../avatar.model';
+export interface FaceGeometry {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}
+/** The two head shapes the renderer supports. */
+export declare const MAN_FACE: FaceGeometry;
+export declare const WOMAN_FACE: FaceGeometry;
+export declare function faceFor(gender: Gender): FaceGeometry;
+/** Half-width of the head at a given y. Returns 0 at or past the chin. */
+export declare function faceHalfWidthAt(face: FaceGeometry, y: number): number;
+/** Fit every `d` and every ellipse in a piece of SVG markup to a head. */
+export declare function fitToFace(markup: string, face: FaceGeometry): string;
+export declare function buildBeardSvg(style: BeardStyle, face: FaceGeometry, fill: string): string;

package/lib/geometry/svg-parts/beard-shapes.d.ts

@@ -0,0 +1,2 @@
+import { BeardStyle } from '../avatar.model';
+export declare const BEARD_SHAPES: Record<BeardStyle, string>;

package/lib/geometry/svg-parts/eye-shapes.d.ts

@@ -0,0 +1,7 @@
+import { EyeStyle } from '../avatar.model';
+interface EyeShapeParts {
+    sclera: string;
+    iris: string;
+}
+export declare const EYE_SHAPES: Record<EyeStyle, EyeShapeParts>;
+export {};

package/lib/geometry/svg-parts/glasses-shapes.d.ts

@@ -0,0 +1,2 @@
+import { GlassesStyle } from '../avatar.model';
+export declare const GLASSES_SHAPES: Record<GlassesStyle, string>;

package/lib/geometry/svg-parts/hair-shapes.d.ts

@@ -0,0 +1,7 @@
+import { HaircutStyle } from '../avatar.model';
+interface HairShapeParts {
+    back: string;
+    front: string;
+}
+export declare const HAIR_SHAPES: Record<HaircutStyle, HairShapeParts>;
+export {};

package/lib/geometry/svg-parts/mouth-shapes.d.ts

@@ -0,0 +1 @@
+export declare const MOUTH_SHAPES: Record<number, string>;

package/lib/geometry/svg-parts/mustache-shapes.d.ts

@@ -0,0 +1,2 @@
+import { MustacheStyle } from '../avatar.model';
+export declare const MUSTACHE_SHAPES: Record<MustacheStyle, string>;

package/lib/geometry/svg-parts/profession-layers.d.ts

@@ -0,0 +1,7 @@
+import { ProfessionType } from '../avatar.model';
+interface ProfessionParts {
+    body: string;
+    accessory: string;
+}
+export declare const PROFESSION_LAYERS: Record<ProfessionType, ProfessionParts>;
+export {};

package/lib/geometry/trait-previews.d.ts

@@ -0,0 +1,2 @@
+export type PreviewKind = 'gender' | 'haircut' | 'eyeStyle' | 'mustache' | 'beard' | 'glasses' | 'profession';
+export declare function buildTraitPreview(kind: PreviewKind, value: string): string;

package/lib/geometry/visemes.d.ts

@@ -0,0 +1,19 @@
+/** Silence. */
+export declare const VISEME_SILENCE = 0;
+/** A / I — wide open */
+export declare const VISEME_WIDE = 1;
+/** O / U — rounded */
+export declare const VISEME_ROUND = 2;
+/** E — spread */
+export declare const VISEME_SPREAD = 3;
+/** M / B / P — pressed */
+export declare const VISEME_PRESSED = 4;
+/** F / V — teeth on lip */
+export declare const VISEME_TEETH = 5;
+/** How long each viseme is held, in ms. */
+export declare 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
+ */
+export declare function textToVisemes(text: string): number[];

package/lib/services/avatar-animation.service.d.ts

@@ -0,0 +1,14 @@
+import { AvatarAnimator } from '../geometry';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export declare class AvatarAnimationService extends AvatarAnimator {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarAnimationService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AvatarAnimationService>;
+}

package/lib/services/lip-sync.service.d.ts

@@ -0,0 +1,13 @@
+import { LipSyncPlayer } from '../geometry';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export declare class LipSyncService extends LipSyncPlayer {
+    static ɵfac: i0.ɵɵFactoryDeclaration<LipSyncService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LipSyncService>;
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "angular-avatar-player",
+  "version": "0.1.0",
+  "description": "Animated SVG avatar component for Angular. Blinking, eye movement, head idle motion and lip sync, rendered as pure vector SVG with no images or runtime assets.",
+  "keywords": [
+    "angular",
+    "avatar",
+    "svg",
+    "avatar-generator",
+    "lipsync",
+    "lip-sync",
+    "chat",
+    "assistant",
+    "animation",
+    "component"
+  ],
+  "homepage": "https://mateuszpsuja.github.io/AvatarCreator/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MateuszPsuja/AvatarCreator.git",
+    "directory": "src/libs/avatar-player"
+  },
+  "bugs": {
+    "url": "https://github.com/MateuszPsuja/AvatarCreator/issues"
+  },
+  "license": "MIT",
+  "author": "Mateusz Psuja",
+  "sideEffects": false,
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/platform-browser": "^19.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "module": "fesm2022/angular-avatar-player.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/angular-avatar-player.mjs"
+    }
+  }
+}