bloub-to-vue-and-react 0.1.2

package/dist/types/bot/shape.d.ts

@@ -0,0 +1,79 @@
+import { type ProfileName } from './profiles';
+export interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * 一个剪影 = 一个径向轮廓 r(theta) 加上一个姿势。
+ *
+ * 一切都通过以相同角度数量采样的轮廓来实现：因此任意两个形状的点都能一一对应，
+ * 形变也就归结为半径的线性插值。正是这一点让过渡干净利落，无需路径形变库。
+ */
+export interface Silhouette {
+    radii: number[];
+    /** 轮廓的旋转，单位为弧度 */
+    rot: number;
+    /** 中心的偏移，单位为球半径 */
+    cx: number;
+    cy: number;
+    /** 挤压与拉伸，应用于屏幕坐标系（旋转之后） */
+    sx: number;
+    sy: number;
+}
+export declare function silhouette(name: ProfileName, pose?: Partial<Silhouette>): Silhouette;
+/** 完美圆形：用作中性基础（点、气泡、淡入淡出目标）。 */
+export declare function circle(radius: number, pose?: Partial<Silhouette>): Silhouette;
+/** 两个剪影的插值。`out` 会被复用，以避免在 60 fps 下反复分配内存。 */
+export declare function blend(a: Silhouette, b: Silhouette, t: number, out?: Silhouette): Silhouette;
+/** 将剪影投影为屏幕点。`scale` = 以 viewBox 为单位的球半径。 */
+export declare function toPoints(s: Silhouette, scale: number, out?: Point[]): Point[];
+/**
+ * 闭合折线 -> Catmull-Rom 三次曲线。
+ *
+ * 用 64 个点时，居中切线已经足够：即使以 600 px 显示，轮廓
+ * 也逐像素光滑，并且路径字符串保持简短。
+ */
+export declare function closedPath(pts: Point[], tension?: number): string;
+/**
+ * 任意多边形 -> 径向轮廓，通过从 `center` 发射射线实现。
+ *
+ * 用于构造那些无法自然用 r(theta) 表达的形状（"!" 的截锥形竖杠）。
+ * 仅在加载时计算一次，绝不在渲染循环中进行。
+ */
+export declare function profileFromPolygon(poly: Point[], cx: number, cy: number): number[];
+/** 两个圆的凸包：竖直「!」的截锥形竖杠。 */
+export declare function hullOfCircles(x1: number, y1: number, r1: number, x2: number, y2: number, r2v: number, steps?: number): Point[];
+/**
+ * 轮廓在任意方向上的半径，通过在两个相邻采样点之间插值得到。
+ *
+ * 用于在剪影不再是圆形时，重新校准"放"在身体上的元素（眼睛、通知小圆点）：
+ * 否则，一个放在 0.62 半径处的眼睛会伸出该方向上边缘只有 0.55 的形状，
+ * 从而被遮罩裁剪掉。
+ */
+export declare function radiusAtAngle(radii: number[], angle: number): number;
+/**
+ * 超椭圆：|x/sx|^n + |y/sy|^n = 1。
+ * n = 2 得到椭圆，n ~ 4 得到自定义器中的方圆（squircle）。
+ */
+export declare function superellipseProfile(n: number, sx?: number, sy?: number): number[];
+/**
+ * 圆盘并集的径向轮廓：r(theta) = 射线/圆交集中最远的那一个。
+ * 只要原点位于并集内就是精确的——正是它无需路径布尔运算就能给出云朵的凸起。
+ */
+export declare function unionOfCirclesProfile(circles: Array<{
+    x: number;
+    y: number;
+    r: number;
+}>): number[];
+/** 圆角正多边形，内接于 `radius`。 */
+export declare function regularPolygonProfile(sides: number, radius: number, rc: number, rotationDeg?: number): number[];
+/** 精确的闭合折线：保留直线段（与 closedPath 不同）。 */
+export declare function polyPath(pts: Point[], scale?: number): string;
+/** 以原点为中心的胶囊形（跑道形）：机器人眼睛的精确形状。 */
+export declare function capsulePath(w: number, h: number): string;
+/**
+ * 微笑的嘴：向上弯曲的月牙形。`smile` 是弯曲的深度（正值 = 嘴角上扬），
+ * 以半径为单位。厚度为 `h` 的带状区域，其中心线是一条二次曲线，
+ * 经过两个嘴角和微笑的凹陷处。
+ */
+export declare function smilePath(w: number, h: number, smile: number): string;

package/dist/types/bot/skins.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 机器人自定义器提供的形状和颜色。
+ *
+ * 与动画剪影（`profiles.ts`）不同，这些形状并不是从视频中测量得到的：
+ * 它们是根据原版自定义器的网格解析构造出来的。因此这是两个不同的来源，
+ * 而且这是有意为之——动画状态必须忠于视频，而基础形状则是用户的选择。
+ */
+/**
+ * 标识符采用枚举方式，而不是从数组中推导：这样 i18n 层就能在编译期校验
+ * 每种形状在三种语言中都有对应翻译（`t(\`shapes.${id}\`)` 只有在键存在时才能编译通过）。
+ * 对数组使用 `as const` 也能达到同样效果，但会把 `radii` 变成只读，
+ * 而引擎需要原样使用它。
+ */
+export type ShapeId = 'cercle' | 'galet' | 'squircle' | 'capsule' | 'triangle' | 'hexagone' | 'nuage' | 'goutte';
+export interface BotShape {
+    id: ShapeId;
+    radii: number[];
+}
+export declare const SHAPES: BotShape[];
+export declare const SHAPE_BY_ID: Map<string, BotShape>;
+export declare const DEFAULT_SHAPE = "cercle";
+export type ColorId = 'encre' | 'creme' | 'brun' | 'rouge' | 'orange' | 'ambre' | 'vert' | 'turquoise' | 'bleu' | 'violet' | 'rose' | 'gris';
+export interface BotColor {
+    id: ColorId;
+    hex: string;
+}
+/** 原版自定义器的调色板。 */
+export declare const COLORS: BotColor[];
+export declare const COLOR_BY_ID: Map<string, BotColor>;
+export declare const DEFAULT_COLOR = "encre";
+/** 混合两种十六进制颜色。用于粒子的深度雾化。 */
+export declare function mixHex(from: string, to: string, t: number): string;

package/dist/types/bot/states.d.ts

@@ -0,0 +1,91 @@
+import { type ArcSpec, type DotRender } from './decor';
+import { type HeadGaze } from './face';
+import { type Silhouette } from './shape';
+export interface EyeCfg {
+    /** 局部宽度（胶囊的短轴），以球体半径为单位 */
+    w: number;
+    /** 局部高度（长轴） */
+    h: number;
+    /** 1 = 睁开，0 = 闭合 */
+    open: number;
+    /**
+     * 胶囊自身的倾斜，单位为度，正值 = 顶部朝右。在球体的切向标架之后应用。
+     * 没有它，两只眼睛就必然朝同一侧倾斜（头部滚转），而愤怒和悲伤这两种
+     * 需要互为镜像倾斜的表情就无从实现。
+     */
+    tilt?: number;
+}
+/** 嘴巴：和眼睛同理，是一个放在球面上的胶囊。 */
+export interface MouthCfg {
+    /** 局部宽度（短轴），以球体半径为单位 */
+    w: number;
+    /** 局部高度（长轴） */
+    h: number;
+    /** 微笑的弧度，正值 = 嘴角上扬；缺省 = 笔直的胶囊 */
+    smile?: number;
+}
+export interface Pose {
+    /** 身体的轮廓，以球体半径为单位 */
+    sil: Silhouette;
+    /** 身体和眼睛的整体偏移 */
+    offX: number;
+    offY: number;
+    gaze: HeadGaze;
+    /** 眼睛在球面上的半间距，单位为度 */
+    split: number;
+    /** [内侧眼，外侧眼] */
+    eyes: [EyeCfg, EyeCfg];
+    /** 嘴巴，默认不存在：只有带有嘴巴的表情才会有 */
+    mouth: MouthCfg | null;
+    /** 眼睛的不透明度：用于没有面部的状态 */
+    eyeAlpha: number;
+    bodyAlpha: number;
+    dots: DotRender[];
+    arcs: ArcSpec[];
+    notif: {
+        x: number;
+        y: number;
+        r: number;
+        notch: number;
+    } | null;
+    /** true = 装饰移到身体后面（爆裂粒子） */
+    dotsBehind: boolean;
+}
+export type StateId = 'idle' | 'thinking' | 'wink' | 'wide' | 'alert' | 'notify' | 'exclaim' | 'sleep' | 'egg' | 'hexagon' | 'play' | 'orbit' | 'burst' | 'comet'
+/** 界面过渡，不是目录中的动画：不在 `SEQUENCE` 中 */
+ | 'swirl';
+export interface StateDef {
+    id: StateId;
+    /** 播放完整序列时的保持时长 */
+    duration: number;
+    /**
+     * 动画会在此时长以下被截断而无法完成：「!」不会回到原位，身体保持爆裂状态。
+     * 这个值从下方 `pose` 的常量中读出，而不是人为选择。缺省 = 该状态忽略时间
+     * 或循环播放，任意时长都合适（见 `MIN_BLOCK`）。
+     */
+    minDuration?: number;
+    /** 入场过渡的时长 */
+    morph: number;
+    /** true = 入场被一次眨眼掩盖，和视频中一样 */
+    blinkIn: boolean;
+    /**
+     * true = 身体是「静止」轮廓，因此可以被个性化设置中选择的形状替换。自行绘制
+     * 形状的状态（「!」、圆点、蛋、三角形……）为 false：那个形状本身才是动画。
+     */
+    baseBody: boolean;
+    /**
+     * true = 该状态带有「静止」面部，因此可以被选中的表情替换。只有 `idle`：
+     * 其他有面部的状态在视频中都有专属表情，我们复现的正是这一点。
+     */
+    baseFace: boolean;
+    pose(local: number): Pose;
+}
+export declare const STATES: StateDef[];
+export declare const STATE_BY_ID: Map<StateId, StateDef>;
+/** 完整序列的播放顺序，参照参考视频。 */
+/**
+ * 每个状态最清晰可读的本地时间点：这是缩略图和样张所展示的姿态。
+ * 渲染是确定性的，因此各次运行之间可比。类型强制覆盖所有新状态。
+ */
+export declare const POSES: Record<StateId, number>;
+export declare const SEQUENCE: StateId[];

package/dist/types/components/Core/BloubBot.vue.d.ts

@@ -0,0 +1,83 @@
+import { type GazeScript } from '../../ui/gaze';
+import { type Block } from '../../bot/cycles';
+import { type StateId } from '../../bot/states';
+type __VLS_Props = {
+    size?: number;
+    /** identifiant de forme du personnalisateur */
+    shape?: string;
+    /** identifiant de couleur du personnalisateur */
+    color?: string;
+    /** identifiant d'expression de repos du personnalisateur */
+    expression?: string;
+    /** couleur du fond, utilisee pour la brume de profondeur des particules */
+    paper?: string;
+    /**
+     * Fige le rendu a cette date (en secondes depuis le debut de l'etat).
+     * Le moteur etant une fonction pure du temps, on obtient une image
+     * reproductible au pixel pres, sans boucle d'animation : utile pour une
+     * planche d'etats, une vignette de personnalisateur ou un test.
+     */
+    frozenAt?: number;
+    /**
+     * Montage joue par le lecteur : une suite d'etats, chacun tenu la duree de
+     * son bloc. Par defaut, le cycle releve sur la video.
+     */
+    cycle?: Block[];
+    /**
+     * Le regard suit le pointeur. Hors de portee des vignettes figees, qui n'ont
+     * pas de boucle d'animation : les brancher reveillerait autant de boucles
+     * qu'il y a de cases.
+     */
+    follow?: boolean;
+    /**
+     * Regard scripte de l'arrivee : evalue a chaque image avec le temps ecoule
+     * depuis qu'il a ete pose. Independant de `follow`, qui vise le pointeur —
+     * ici c'est le script qui decide de tout, y compris de sa duree.
+     */
+    gaze?: GazeScript | null;
+    /** Nom accessible du svg, localise par l'application qui l'utilise. */
+    ariaLabel?: string;
+};
+declare function seek(index: number, offset?: number): void;
+declare function rendAt(t: number): void;
+type __VLS_ModelProps = {
+    /**
+     * Le curseur de lecture est un **index de bloc**, pas un etat : un montage peut
+     * jouer deux fois le meme etat, et il faut alors savoir dans lequel des deux on
+     * se trouve. `state` suit le bloc courant — c'est une sortie, l'exterieur pilote
+     * la lecture par `block`.
+     */
+    'block'?: number;
+    'state'?: StateId;
+    'playing'?: boolean;
+    /** Temps ecoule dans le bloc courant, pour la tete de lecture de la timeline. */
+    'elapsed'?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    seek: typeof seek;
+    rendAt: typeof rendAt;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:block": (value: number) => any;
+    "update:state": (value: StateId) => any;
+    "update:playing": (value: boolean) => any;
+    "update:elapsed": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:block"?: ((value: number) => any) | undefined;
+    "onUpdate:state"?: ((value: StateId) => any) | undefined;
+    "onUpdate:playing"?: ((value: boolean) => any) | undefined;
+    "onUpdate:elapsed"?: ((value: number) => any) | undefined;
+}>, {
+    gaze: GazeScript | null;
+    size: number;
+    shape: string;
+    color: string;
+    expression: string;
+    paper: string;
+    frozenAt: number;
+    cycle: Block[];
+    follow: boolean;
+    ariaLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/Core/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 核心渲染引擎（bloub）的库入口：只导出 `BloubBot` 及其公开类型。
+ * 这个文件是 npm 库的打包入口，应用代码仍然直接 import `BloubBot.vue`。
+ */
+export { default as BloubBot } from './BloubBot.vue';
+export type { Block } from '../../bot/cycles';
+export type { StateId } from '../../bot/states';
+export type { GazeScript } from '../../ui/gaze';

package/dist/types/ui/gaze.d.ts

@@ -0,0 +1,130 @@
+import type { Look } from '../bot/engine';
+import type { ExpressionId } from '../bot/expressions';
+/**
+ * Ou le bot regarde quand il suit le curseur. Pur, comme `src/ui/timeline.ts` :
+ * la position du pointeur entre en coordonnees deja normalisees, donc la regle
+ * se teste sans DOM — et elle a besoin de l'etre, parce que deux signes s'y
+ * trompent facilement.
+ */
+/**
+ * Angles en degres d'orientation de tete. CHOISIS, pas releves : la video de
+ * reference ne montre aucun suivi de curseur. Assez amples pour se distinguer de
+ * la derive au repos (±7deg de lacet, ±5,5 de tangage), assez retenus pour
+ * qu'aucun oeil ne parte derriere le limbe de la sphere.
+ */
+export declare const YAW_MAX = 16;
+export declare const PITCH_MAX = 13;
+/**
+ * Hauteur a laquelle le regard se tient, curseur au centre. CHOISIE : legerement
+ * au-dessus de l'equateur, ce qui donne un bot attentif plutot qu'absent.
+ *
+ * C'est une valeur ABSOLUE, et c'est tout le point : en relatif, la hauteur des
+ * yeux suivait celle de chaque expression, et comme « neutre » regarde a
+ * +28,6deg quand les humeurs sont entre -9 et +9, les yeux tombaient d'un coup
+ * au premier changement d'humeur.
+ */
+export declare const PITCH = 10;
+/**
+ * Direction ou la tete se pose dans la vue des reglages : le bot cesse de regarder en haut a
+ * droite (sa pose de repos) pour regarder a GAUCHE, du cote du panneau.
+ *
+ * Ce n'est pas un miroir de l'image : les yeux font vraiment le tour de la
+ * sphere, donc ils gardent leur inclinaison en `\\` et leur compression de
+ * profondeur. Retourner l'image les aurait couches en `//`.
+ */
+export declare const TURN = 26;
+/**
+ * Tour complet parcouru EN CHEMIN : les yeux ne glissent pas en travers du
+ * visage, ils font le tour de la boule avant d'arriver.
+ *
+ * C'est gratuit parce que les yeux vivent sur une sphere : passe 90deg de lacet
+ * ils franchissent le limbe, le moteur les retire de l'image, puis ils
+ * reapparaissent de l'autre cote. Le tourbillon n'est donc pas un effet pose
+ * par-dessus, c'est la meme projection orthographique poussee d'un tour.
+ *
+ * Et surtout : il ATTERRIT JUSTE par construction, `-360deg` etant le meme angle
+ * que `0`. C'est ce qui le distingue d'une pose de regard ecrite dans un etat,
+ * qui laisse les yeux la ou sa courbe se termine.
+ */
+export declare const SPIN = 360;
+/**
+ * Duree du tour. Un peu plus courte que le bloc d'entree (`swirl`) : les yeux
+ * doivent etre poses a gauche avant que les anneaux ne s'effacent.
+ */
+export declare const TURN_TIME = 1.1;
+/**
+ * Humeurs que le bot traverse pendant qu'il suit le curseur.
+ *
+ * Toutes ont un ROULIS NUL, et c'est le critere de selection. Le lacet et le
+ * tangage sont neutralises par le suivi (ils sont absolus), mais pas le roulis —
+ * il fait pencher la tete, donc il deplace les yeux verticalement, et une humeur
+ * a -15deg suivie d'une a +8 les fait sauter. Ce qui reste pour distinguer les
+ * humeurs, c'est la FORME des yeux : ronds, plisses, ecarquilles, aplatis. C'est
+ * largement suffisant, et c'est ce qui se lit.
+ *
+ * Ce n'est donc pas une liste de gouts : y ajouter « curieux » (roulis -15deg)
+ * ramenerait le saut.
+ */
+export declare const HUMEURS: readonly ExpressionId[];
+/**
+ * Un regard SCRIPTE : evalue a chaque image avec le temps ecoule depuis le debut
+ * de l'arrivee, en secondes. Le script porte donc sa propre horloge et peut
+ * enchainer plusieurs mouvements — le composant ne fait que l'evaluer et n'a
+ * aucune duree a connaitre.
+ *
+ * REGLE, et c'est elle qui rend un script sans entretien : il doit FINIR a
+ * `mix: 0`, ou la pose de l'etat commande seule. Il n'y a alors jamais rien a
+ * relacher, et ce relachement — qui se verrait sous la forme d'un dernier
+ * glissement des yeux, juste quand tout devrait etre pose — n'existe pas.
+ *
+ * Le type reste general alors qu'il n'y a qu'un script aujourd'hui : quatre ont
+ * ete ecrits et compares cote a cote avant d'en garder un, et c'est cette forme
+ * qui a permis de les essayer sans toucher au moteur.
+ */
+export type GazeScript = (t: number) => Look;
+/**
+ * « Le tour » : la boule a l'air de tourner sur elle-meme.
+ *
+ * `mix` reste a ZERO du debut a la fin : aucune direction n'est imposee, seul
+ * `spin` fond, ce qui fait passer les yeux DERRIERE la boule avant de les
+ * ramener exactement la ou l'expression choisie les met.
+ *
+ * Ease-in-OUT et non l'ease-out exponentiel du reste du projet : ce n'est pas une
+ * valeur qui se pose, c'est un objet qui tourne. En ease-out, les deux tiers du
+ * tour etaient avales en 0,3 s — un a-coup, pas une rotation.
+ *
+ * Il est VIF au passage du limbe — 20 px entre deux images sur une boule de 100
+ * de rayon — et ce n'est pas un defaut de reglage : pres du bord, un petit angle
+ * devient un grand deplacement a l'ecran, et l'oeil disparait puis reparait de
+ * l'autre cote. Ralentir n'y change rien, c'est la trajectoire qui veut ca, et
+ * c'est justement ce qui fait l'effet. Ne pas chercher a l'adoucir.
+ *
+ * Corollaire indispensable : ce tour ne se joue que sur un CERCLE. Les yeux sont
+ * recolles au contour reel (`radiusAtAngle`), donc sur une forme non circulaire
+ * ils suivent le profil en tournant et sautillent. Voir `forme` dans `App.vue`.
+ */
+export declare const TOUR_TIME = 1.5;
+export declare const tourLook: GazeScript;
+export interface Aim {
+    /** ecart horizontal du pointeur au centre du bot, -1 a 1 (droite positive) */
+    nx: number;
+    /** ecart vertical, -1 a 1, dans le sens de l'ecran (bas positif) */
+    ny: number;
+    /** avancement de l'arrivee, 0 a 1 */
+    tour: number;
+    /** false = aucun pointeur connu : la tete reste tournee, mais elle revit */
+    pointer: boolean;
+}
+/**
+ * Cible de regard.
+ *
+ * `tour` mene tout : il fait monter l'emprise sur la pose (`mix`) et fondre le
+ * tour parcouru (`spin`) en meme temps. A 0 la pose de l'etat commande seule ; a
+ * 1 la tete est posee a gauche et suit le curseur.
+ *
+ * Rien ici ne compense l'expression affichee : c'est le moteur qui melange,
+ * parce que lui seul connait la pose a l'instant t. Le faire ici obligerait a
+ * lire le lacet d'ARRIVEE de l'expression pendant que le moteur, lui, morphe
+ * encore — et les yeux sautaient a chaque changement d'humeur.
+ */
+export declare function lookTarget({ nx, ny, tour, pointer }: Aim): Look;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "bloub-to-vue-and-react",
+  "version": "0.1.2",
+  "type": "module",
+  "description": "SVG recreation of the x.ai bot avatar. One shape morphing through 14 states, measured off the reference video frame by frame.",
+  "license": "MIT",
+  "author": "Jérémy Perret",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jeremy-prt/bloub.git"
+  },
+  "keywords": [
+    "svg",
+    "animation",
+    "avatar",
+    "vue",
+    "morphing"
+  ],
+  "packageManager": "pnpm@11.17.0",
+  "main": "./dist/bloub.js",
+  "module": "./dist/bloub.js",
+  "types": "./dist/types/components/Core/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/components/Core/index.d.ts",
+      "import": "./dist/bloub.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "build:lib": "vite build --config vite.lib.config.ts && vue-tsc --project tsconfig.lib.json",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "pnpm build:lib"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.41"
+  },
+  "dependencies": {
+    "mediabunny": "^1.54.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.0.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "happy-dom": "^20.11.2",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^5.9.3",
+    "vite": "^8.2.1",
+    "vitest": "^4.1.10",
+    "vue": "^3.5.41",
+    "vue-tsc": "^3.3.9"
+  }
+}