talking-head-studio 0.4.11 → 0.4.12

package/dist/wardrobe/useStudioAvatar.js

@@ -53,7 +53,7 @@ function useStudioAvatar({ avatarId }) {
         }
     }, [avatarId, populateFromAvatar]);
     (0, react_1.useEffect)(() => {
-        fetchAvatar();
+        void fetchAvatar();
     }, [fetchAvatar]);
     const equipped = (0, wardrobeStore_1.useWardrobeStore)((s) => s.equipped);
     const placements = (0, wardrobeStore_1.useWardrobeStore)((s) => s.placements);
@@ -74,7 +74,16 @@ function useStudioAvatar({ avatarId }) {
             return true;
         if (voiceProfileId !== avatar.default_voice_profile_id)
             return true;
-        const serialized = wardrobeStore_1.useWardrobeStore.getState().serializeForApi();
+        const serialized = Object.values(equipped).map((asset) => {
+            const placement = placements[asset.id];
+            return {
+                asset_id: asset.id,
+                bone: placement?.bone ?? 'Head',
+                position: placement?.position ?? [0, 0, 0],
+                rotation: placement?.rotation ?? [0, 0, 0],
+                scale: placement?.scale ?? 1,
+            };
+        });
         const serverAccs = avatar.appearance?.equippedAccessories ?? [];
         if (serialized.length !== serverAccs.length)
             return true;

package/dist/wardrobe/wardrobeStore.d.ts

@@ -17,6 +17,8 @@ export interface WardrobeState {
     gizmoMode: GizmoMode;
     /** ID of the avatar currently synced to avoid redundant fetches */
     syncedAvatarId: string | null;
+    /** ID of the avatar currently being fetched, used to ignore stale sync results. */
+    syncingAvatarId: string | null;
     equip: (slot: string, asset: WearableAsset) => void;
     unequip: (slot: string) => void;
     setPlacement: (assetId: string, placement: AssetPlacement) => void;

package/dist/wardrobe/wardrobeStore.js

@@ -22,12 +22,12 @@ exports.useWardrobeStore = (0, zustand_1.create)()((set, get) => ({
     activeAssetId: null,
     gizmoMode: 'translate',
     syncedAvatarId: null,
+    syncingAvatarId: null,
     equip: (slot, asset) => set((state) => ({
         equipped: { ...state.equipped, [slot]: asset },
     })),
     unequip: (slot) => set((state) => {
         const removed = state.equipped[slot];
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { [slot]: _removed, ...restEquipped } = state.equipped;
         // Clean up placement data for the removed asset
         const placements = { ...state.placements };
@@ -70,18 +70,26 @@ exports.useWardrobeStore = (0, zustand_1.create)()((set, get) => ({
             return;
         if (get().syncedAvatarId === avatarId)
             return;
+        if (get().syncingAvatarId === avatarId)
+            return;
         get().reset();
+        set({ syncingAvatarId: avatarId });
         try {
             const [avatar, allAssets] = await Promise.all([(0, studioApi_1.getAvatar)(avatarId), (0, studioApi_1.listAssets)()]);
+            if (get().syncingAvatarId !== avatarId)
+                return;
             const lookup = {};
             for (const a of allAssets)
                 lookup[a.id] = a;
             const accessories = avatar.appearance?.equippedAccessories ?? [];
             get().hydrateFromApi(accessories, lookup);
-            set({ syncedAvatarId: avatarId });
+            set({ syncedAvatarId: avatarId, syncingAvatarId: null });
         }
         catch (e) {
             console.warn('[WardrobeStore] Failed to load avatar accessories:', e);
+            if (get().syncingAvatarId === avatarId) {
+                set({ syncingAvatarId: null });
+            }
         }
     },
     serializeForApi: () => {
@@ -102,5 +110,7 @@ exports.useWardrobeStore = (0, zustand_1.create)()((set, get) => ({
         placements: {},
         activeAssetId: null,
         gizmoMode: 'translate',
+        syncedAvatarId: null,
+        syncingAvatarId: null,
     }),
 }));

package/dist/wgpu/R3FWebGpuCanvas.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import * as THREE from 'three';
+import type { RootState } from '@react-three/fiber';
+type CameraProps = THREE.Camera | Record<string, unknown>;
+interface R3FWebGpuCanvasProps {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    camera?: CameraProps;
+    clearColor?: string;
+    onCreated?: (state: RootState) => void;
+    onError?: (message: string) => void;
+}
+export declare function R3FWebGpuCanvas({ children, style, camera, clearColor, onCreated, onError, }: R3FWebGpuCanvasProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/wgpu/R3FWebGpuCanvas.js

@@ -0,0 +1,176 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.R3FWebGpuCanvas = R3FWebGpuCanvas;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const THREE = __importStar(require("three"));
+const fiber_1 = require("@react-three/fiber");
+const react_native_wgpu_1 = require("react-native-wgpu");
+function formatErrorMessage(error) {
+    if (error instanceof Error)
+        return error.message;
+    return String(error);
+}
+class ReactNativeCanvas {
+    constructor(canvas) {
+        this.canvas = canvas;
+    }
+    get width() { return this.canvas.width; }
+    set width(width) { this.canvas.width = width; }
+    get height() { return this.canvas.height; }
+    set height(height) { this.canvas.height = height; }
+    get clientWidth() { return this.canvas.width; }
+    set clientWidth(width) { this.canvas.width = width; }
+    get clientHeight() { return this.canvas.height; }
+    set clientHeight(height) { this.canvas.height = height; }
+    addEventListener() { }
+    removeEventListener() { }
+    dispatchEvent() { }
+    setPointerCapture() { }
+    releasePointerCapture() { }
+}
+const THREE_WITH_WEBGPU = THREE;
+(0, fiber_1.extend)(THREE);
+function R3FWebGpuCanvas({ children, style, camera, clearColor = '#000', onCreated, onError, }) {
+    const canvasRef = (0, react_1.useRef)(null);
+    const rootRef = (0, react_1.useRef)(null);
+    const contextRef = (0, react_1.useRef)(null);
+    const rendererRef = (0, react_1.useRef)(null);
+    const surfaceRef = (0, react_1.useRef)(null);
+    const rendererPatchedRef = (0, react_1.useRef)(false);
+    const rendererInitializedRef = (0, react_1.useRef)(false);
+    const [layoutSize, setLayoutSize] = (0, react_1.useState)({ width: 0, height: 0 });
+    const [configured, setConfigured] = (0, react_1.useState)(false);
+    const childrenRef = (0, react_1.useRef)(children);
+    (0, react_1.useEffect)(() => {
+        childrenRef.current = children;
+    }, [children]);
+    const handleLayout = (0, react_1.useCallback)((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        setLayoutSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!canvasRef.current || layoutSize.width <= 0 || layoutSize.height <= 0)
+            return;
+        let cancelled = false;
+        const configure = async () => {
+            try {
+                if (!contextRef.current) {
+                    contextRef.current = canvasRef.current?.getContext('webgpu');
+                }
+                const context = contextRef.current;
+                if (!context)
+                    throw new Error('Unable to acquire a WebGPU canvas context');
+                const surface = surfaceRef.current ?? new ReactNativeCanvas(context.canvas);
+                surfaceRef.current = surface;
+                const dpr = react_native_1.PixelRatio.get();
+                surface.width = Math.max(1, Math.round(layoutSize.width * dpr));
+                surface.height = Math.max(1, Math.round(layoutSize.height * dpr));
+                const root = rootRef.current ?? (0, fiber_1.createRoot)(surface);
+                rootRef.current = root;
+                const renderer = rendererRef.current ?? new THREE_WITH_WEBGPU.WebGPURenderer({
+                    alpha: false,
+                    antialias: true,
+                    canvas: surface,
+                    context,
+                });
+                rendererRef.current = renderer;
+                if (!rendererInitializedRef.current) {
+                    await renderer.init();
+                    rendererInitializedRef.current = true;
+                }
+                await root.configure({
+                    dpr: 1,
+                    frameloop: 'always',
+                    size: {
+                        width: surface.clientWidth,
+                        height: surface.clientHeight,
+                        top: 0,
+                        left: 0,
+                    },
+                    camera: camera,
+                    gl: renderer,
+                    onCreated: (state) => {
+                        if (!rendererPatchedRef.current) {
+                            const originalRender = state.gl.render.bind(state.gl);
+                            state.gl.render = (scene, camera) => {
+                                const result = originalRender(scene, camera);
+                                context.present();
+                                return result;
+                            };
+                            rendererPatchedRef.current = true;
+                        }
+                        state.scene.background = new THREE.Color(clearColor);
+                        onCreated?.(state);
+                    },
+                });
+                if (!cancelled) {
+                    root.render(childrenRef.current);
+                    setConfigured(true);
+                }
+            }
+            catch (error) {
+                if (!cancelled) {
+                    setConfigured(false);
+                    onError?.(formatErrorMessage(error));
+                }
+            }
+        };
+        void configure();
+        return () => {
+            cancelled = true;
+        };
+    }, [camera, clearColor, layoutSize.height, layoutSize.width, onCreated, onError]);
+    (0, react_1.useEffect)(() => {
+        if (!configured || !rootRef.current)
+            return;
+        rootRef.current.render(children);
+    }, [children, configured]);
+    (0, react_1.useEffect)(() => () => {
+        rootRef.current?.unmount();
+        rootRef.current = null;
+        contextRef.current = null;
+        rendererRef.current = null;
+        surfaceRef.current = null;
+        rendererPatchedRef.current = false;
+        rendererInitializedRef.current = false;
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, style], onLayout: handleLayout, children: (0, jsx_runtime_1.jsx)(react_native_wgpu_1.Canvas, { ref: canvasRef, style: react_native_1.StyleSheet.absoluteFill, transparent: true }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: { overflow: 'hidden' },
+});

package/dist/wgpu/WgpuAvatar.d.ts

@@ -1,26 +1,49 @@
 /**
  * WgpuAvatar — drop-in replacement for FilamentAvatar using react-three-fiber
- * + react-native-wgpu (or expo-gl fallback). Exposes the same ref interface as
+ * + react-native-wgpu. Exposes the same ref interface as
  * FilamentAvatarRef so siteclaw can swap renderers without changing call sites.
  *
  * No SurfaceTexture, no choreographer, no JNI surface lifecycle bugs.
  *
  * Peer deps required by the host app:
- *   react-native-wgpu  (or expo-gl for the expo-gl fallback canvas)
+ *   react-native-wgpu
  *   @react-three/fiber >= 8
  *   @react-three/drei  >= 9
  *   three              >= 0.170
  */
+import './blobShim';
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import * as THREE from 'three';
 import type { TalkingHeadMood, TalkingHeadAccessory, TalkingHeadVisemeSchedule } from '../index';
+import { type MotionKey, type TalkingHeadGesture, type TalkingHeadPose } from '../core/avatar/motion';
 export interface WgpuAvatarRef {
     setMood: (mood: TalkingHeadMood) => void;
     sendAmplitude: (amplitude: number) => void;
     sendViseme: (viseme: string, weight?: number) => void;
     scheduleVisemes: (schedule: TalkingHeadVisemeSchedule) => void;
     clearVisemes: () => void;
+    /** Play a procedural body motion (e.g. 'attack', 'defend', 'groove'). */
+    playMotion(name: MotionKey): void;
+    playMotion(name: string): void;
+    /** Stop the active procedural motion and restore the rest pose. */
+    stopMotion: () => void;
+    /** Procedural fallback for upstream TalkingHead gestures on native WGPU. */
+    playGesture: (name: TalkingHeadGesture | string, opts?: {
+        ms?: number;
+    }) => void;
+    stopGesture: () => void;
+    /** Procedural fallback for upstream TalkingHead pose templates on native WGPU. */
+    playPose: (name: TalkingHeadPose | string) => void;
+    stopPose: () => void;
+    /** Play an animation clip from a GLB loaded by the native WGPU path. */
+    playAnimation: (url: string, opts?: {
+        dur?: number;
+        index?: number;
+    }) => void;
+    stopAnimation: () => void;
+    /** Triggers a single natural blink — use as a reaction to accessory snap-on. */
+    triggerBlink: () => void;
 }
 interface WgpuAvatarProps {
     style?: StyleProp<ViewStyle>;
@@ -32,6 +55,7 @@ interface WgpuAvatarProps {
     accessories?: TalkingHeadAccessory[];
     onReady?: () => void;
     onError?: (message: string) => void;
+    onAvatarState?: (state: string) => void;
     /** Called once the R3F scene and camera are available (for editor raycasting). */
     onSceneReady?: (scene: THREE.Scene, camera: THREE.Camera) => void;
 }