talking-head-studio 0.3.9 → 0.4.0

package/dist/filament/FilamentAvatar.d.ts

@@ -11,8 +11,8 @@
 import React from 'react';
 import { ViewStyle, StyleProp } from 'react-native';
 import type { TalkingHeadViseme, TalkingHeadVisemeSchedule, TalkingHeadAccessory, TalkingHeadMood } from '../TalkingHead';
-export declare const CAMERA_FOCAL_FULL = 28;
-export declare const CAMERA_FOCAL_PIP = 50;
+export declare const CAMERA_FOCAL_FULL = 50;
+export declare const CAMERA_FOCAL_PIP = 85;
 export interface FilamentAvatarRef {
     sendViseme: (viseme: TalkingHeadViseme, weight?: number) => void;
     scheduleVisemes: (schedule: TalkingHeadVisemeSchedule) => void;

package/dist/filament/FilamentAvatar.js

@@ -40,6 +40,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_filament_1 = require("react-native-filament");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-require-imports
+const { Skybox } = require('react-native-filament');
+const expo_asset_1 = require("expo-asset");
 const useAuthedFilamentUri_1 = require("./useAuthedFilamentUri");
 const faceSqueezeAssets_1 = require("./faceSqueezeAssets");
 const morphTables_1 = require("./morphTables");
@@ -91,14 +94,14 @@ function pickIdleEmotion() {
 // Camera presets — tight head framing matching TalkingHead cameraView='head'
 // Avatar head is at approximately y=1.62 in Ready Player Me scale.
 // ---------------------------------------------------------------------------
-// z=1.4 gives head+shoulders framing at 50mm; z=1.05 was too tight (face only).
-const CAMERA_POSITION = [0, 1.55, 1.4];
-const CAMERA_TARGET = [0, 1.55, 0];
+// Camera sits ~1.0m back, targeting the face for a tight crop.
+const CAMERA_POSITION = [0, 1.52, 0.85];
+const CAMERA_TARGET = [0, 1.52, 0];
 const CAMERA_UP = [0, 1, 0];
-// Full/assistant view: 50mm is a natural portrait focal length — head is not distorted.
+// 50mm gives natural portrait framing at 1.0m distance.
 // Pip: 85mm telephoto for a tight face crop in the small bubble.
-exports.CAMERA_FOCAL_FULL = 28;
-exports.CAMERA_FOCAL_PIP = 50;
+exports.CAMERA_FOCAL_FULL = 50;
+exports.CAMERA_FOCAL_PIP = 85;
 // ---------------------------------------------------------------------------
 // Idle micro-expression cycles (MotionEngine-style procedural layer)
 // Runs at ~60ms ticks, drives subtle head/face movement independent of speech
@@ -137,11 +140,15 @@ function buildVisemeMorphCache(dispatchMap) {
 }
 function FilamentAvatarInner({ localUri, mood: initialMood = 'neutral', hairColor: initialHairColor, skinColor: initialSkinColor, eyeColor: initialEyeColor, onReady, onError: _onError, // eslint-disable-line @typescript-eslint/no-unused-vars
 innerRef, aspect, focalLength = exports.CAMERA_FOCAL_FULL, }) {
-    // localUri is either a file:// string (remote download) or a require() number (bundled fallback).
-    // useModel accepts both as BufferSource (number | { uri: string }) — cast to any since
-    // tsconfig resolves to an older type declaration that only shows { uri: string }.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const model = (0, react_native_filament_1.useModel)(typeof localUri === 'number' ? localUri : { uri: localUri });
+    // Memoize source object to avoid new reference on every render → useModel reload → SIGSEGV.
+    // When localUri is empty (fallback not yet resolved) we still pass a source so
+    // FilamentAvatarInner stays mounted and FilamentView's SwapChain stays alive.
+    // useModel will fail gracefully for the empty string; ModelRenderer is gated on state==='loaded'.
+    const modelSource = react_1.default.useMemo(() => (localUri ? { uri: localUri } : null), [localUri]);
+    (0, react_1.useEffect)(() => {
+        console.log('[FilamentAvatar] useModel source:', localUri || '(empty — waiting for fallback)');
+    }, [localUri]);
+    const model = (0, react_native_filament_1.useModel)(modelSource);
     const modelRef = (0, react_1.useRef)(model);
     modelRef.current = model;
     const { renderableManager } = (0, react_native_filament_1.useFilamentContext)();
@@ -325,6 +332,7 @@ innerRef, aspect, focalLength = exports.CAMERA_FOCAL_FULL, }) {
             prevDirtyRef.current = new Set();
             return;
         }
+        console.log('[FilamentAvatar] model loaded, boundingBox:', JSON.stringify(m.boundingBox));
         const newDispatchMap = new Map();
         const newWeightsMap = new Map();
         const newEntityById = new Map();
@@ -682,29 +690,61 @@ innerRef, aspect, focalLength = exports.CAMERA_FOCAL_FULL, }) {
         });
         return () => sub.remove();
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(react_native_filament_1.FilamentView, { ref: filamentViewRef, style: react_native_1.StyleSheet.absoluteFill, children: [(0, jsx_runtime_1.jsx)(react_native_filament_1.DefaultLight, {}), (0, jsx_runtime_1.jsx)(react_native_filament_1.Camera, { cameraPosition: CAMERA_POSITION, cameraTarget: CAMERA_TARGET, cameraUp: CAMERA_UP, aspect: aspect ?? 1, focalLengthInMillimeters: focalLength }), model.state === 'loaded' && ((0, jsx_runtime_1.jsx)(react_native_filament_1.ModelRenderer, { model: model, multiplyWithCurrentTransform: false }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_filament_1.FilamentView, { ref: filamentViewRef, style: react_native_1.StyleSheet.absoluteFill, enableTransparentRendering: false, children: [(0, jsx_runtime_1.jsx)(Skybox, { colorInHex: "#1a1a2e" }), (0, jsx_runtime_1.jsx)(react_native_filament_1.DefaultLight, {}), (0, jsx_runtime_1.jsx)(react_native_filament_1.Camera, { cameraPosition: CAMERA_POSITION, cameraTarget: CAMERA_TARGET, cameraUp: CAMERA_UP, aspect: aspect ?? 1, focalLengthInMillimeters: focalLength }), model.state === 'loaded' && ((0, jsx_runtime_1.jsx)(react_native_filament_1.ModelRenderer, { model: model }))] }));
 }
 // ---------------------------------------------------------------------------
 // Outer component — handles URL resolution + FilamentScene wrapper
 // ---------------------------------------------------------------------------
-// The fallback is the bundled require() number — useModel accepts this directly
-// (BufferSource = number | { uri: string }), so no async asset resolution needed.
-exports.FilamentAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, aspect, focalLength, mood, hairColor, skinColor, eyeColor, accessories, onReady, onError }, ref) => {
-    const fileResult = (0, useAuthedFilamentUri_1.useAuthedFilamentUri)(avatarUrl ?? null);
+// Resolve the fallback GLB to a file:// URI once at module load.
+// useBuffer (inside useModel) resolves require() numbers via Image.resolveAssetSource
+// which returns an http://localhost Metro URL in dev — Filament's native loader can't
+// fetch that. We must pre-resolve to a file:// path via expo-asset.
+let _fallbackUri = null;
+const _fallbackReady = (async () => {
+    const a = expo_asset_1.Asset.fromModule(faceSqueezeAssets_1.FACE_SQUEEZE_LOCAL_MODULE);
+    await a.downloadAsync();
+    _fallbackUri = a.localUri ?? a.uri ?? '';
+    return _fallbackUri;
+})();
+exports.FilamentAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, aspect: aspectProp, focalLength, mood, hairColor, skinColor, eyeColor, accessories, onReady, onError }, ref) => {
+    // Only download avatarUrl if it's a real remote studio URL (http/https).
+    const remoteUrl = (avatarUrl && (avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://')))
+        ? avatarUrl : null;
+    const fileResult = (0, useAuthedFilamentUri_1.useAuthedFilamentUri)(remoteUrl);
     const currentUri = fileResult?.uri ?? null;
-    // Stabilize localUri: once a valid remote file URI resolves, keep it until a new
-    // one arrives. Falls back to the bundled require() number — always available sync.
-    const stableUriRef = react_1.default.useRef(null);
-    if (currentUri)
-        stableUriRef.current = currentUri;
-    const localUri = stableUriRef.current ?? faceSqueezeAssets_1.FACE_SQUEEZE_LOCAL_MODULE;
+    // Fallback: resolved file:// URI of the bundled face-squeeze GLB.
+    // Starts null, populates async (fast — already kicked off at module load).
+    const [fallbackUri, setFallbackUri] = react_1.default.useState(_fallbackUri);
+    react_1.default.useEffect(() => {
+        if (!_fallbackUri) {
+            _fallbackReady.then(setFallbackUri).catch(() => { });
+        }
+    }, []);
+    // Lock-in URI: once we pick a URI for this mount, NEVER change it.
+    // Switching from fallback → studio mid-session causes useModel to reload,
+    // which tears down GPU assets while FEngine::loop still holds references → SIGSEGV.
+    // Strategy: if the studio URI is ready before/at mount time, use it directly.
+    // If not, use the fallback and stay on it for the lifetime of this component.
+    const lockedUriRef = react_1.default.useRef(null);
+    if (lockedUriRef.current === null) {
+        // First render: pick whichever URI is available, preferring studio.
+        lockedUriRef.current = currentUri ?? fallbackUri;
+    }
+    const localUri = lockedUriRef.current;
+    // Compute aspect ratio from layout if not provided by caller.
+    const [measuredAspect, setMeasuredAspect] = react_1.default.useState(undefined);
+    const aspect = aspectProp ?? measuredAspect;
     // FilamentScene MUST stay mounted for the lifetime of this component.
     // Unmounting it disposes GPU assets on the JS thread while Filament's native
     // render thread (FEngine::loop) and surface thread (JNISurfaceTextu) still hold
     // references to those objects → SIGSEGV / corrupted-PC use-after-free crashes.
     // FilamentAvatarInner keeps FilamentView permanently mounted; only ModelRenderer
     // is conditional on the model being ready.
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [style, styles.fill], children: (0, jsx_runtime_1.jsx)(react_native_filament_1.FilamentScene, { children: (0, jsx_runtime_1.jsx)(FilamentAvatarInner, { localUri: localUri, avatarUrl: avatarUrl, aspect: aspect, focalLength: focalLength, mood: mood, hairColor: hairColor, skinColor: skinColor, eyeColor: eyeColor, accessories: accessories, innerRef: ref, onReady: onReady, onError: onError }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [style, styles.fill], onLayout: (e) => {
+            const { width, height } = e.nativeEvent.layout;
+            if (height > 0)
+                setMeasuredAspect(width / height);
+        }, children: (0, jsx_runtime_1.jsx)(react_native_filament_1.FilamentScene, { children: (0, jsx_runtime_1.jsx)(FilamentAvatarInner, { localUri: localUri ?? '', avatarUrl: avatarUrl, aspect: aspect, focalLength: focalLength, mood: mood, hairColor: hairColor, skinColor: skinColor, eyeColor: eyeColor, accessories: accessories, innerRef: ref, onReady: onReady, onError: onError }) }) }));
 });
 exports.FilamentAvatar.displayName = 'FilamentAvatar';
 const styles = react_native_1.StyleSheet.create({

package/dist/wgpu/WgpuAvatar.d.ts

@@ -0,0 +1,36 @@
+/**
+ * WgpuAvatar — drop-in replacement for FilamentAvatar using react-three-fiber
+ * + react-native-wgpu (or expo-gl fallback). 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-three/fiber >= 8
+ *   @react-three/drei  >= 9
+ *   three              >= 0.170
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { TalkingHeadMood, TalkingHeadAccessory, TalkingHeadVisemeSchedule } from '../index';
+export interface WgpuAvatarRef {
+    setMood: (mood: TalkingHeadMood) => void;
+    sendAmplitude: (amplitude: number) => void;
+    sendViseme: (viseme: string, weight?: number) => void;
+    scheduleVisemes: (schedule: TalkingHeadVisemeSchedule) => void;
+    clearVisemes: () => void;
+}
+interface WgpuAvatarProps {
+    style?: StyleProp<ViewStyle>;
+    avatarUrl: string | null;
+    authToken?: string;
+    aspect?: number;
+    focalLength?: number;
+    mood?: TalkingHeadMood;
+    accessories?: TalkingHeadAccessory[];
+    onReady?: () => void;
+    onError?: (message: string) => void;
+}
+export declare const WgpuAvatar: React.ForwardRefExoticComponent<WgpuAvatarProps & React.RefAttributes<WgpuAvatarRef>>;
+export {};

package/dist/wgpu/WgpuAvatar.js

@@ -0,0 +1,293 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WgpuAvatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * WgpuAvatar — drop-in replacement for FilamentAvatar using react-three-fiber
+ * + react-native-wgpu (or expo-gl fallback). 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-three/fiber >= 8
+ *   @react-three/drei  >= 9
+ *   three              >= 0.170
+ */
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const THREE = __importStar(require("three"));
+const native_1 = require("@react-three/fiber/native");
+const native_2 = require("@react-three/drei/native");
+const morphTables_1 = require("../filament/morphTables");
+const useAuthedFilamentUri_1 = require("../filament/useAuthedFilamentUri");
+// ---------------------------------------------------------------------------
+// Camera defaults — match FilamentAvatar constants
+// ---------------------------------------------------------------------------
+const CAMERA_POSITION = [0, 1.52, 0.85];
+const CAMERA_TARGET = new THREE.Vector3(0, 1.52, 0);
+const CAMERA_FOV_FULL = 38; // rough Three.js FOV equiv to 50mm focal length
+function buildMorphIndex(mesh) {
+    const map = new Map();
+    const dict = mesh.morphTargetDictionary;
+    if (!dict)
+        return map;
+    for (const [name, idx] of Object.entries(dict)) {
+        map.set(name.toLowerCase(), idx);
+        map.set(name, idx); // keep original casing too
+    }
+    return map;
+}
+function resolveIndex(morphIndex, aliases) {
+    for (const alias of aliases) {
+        const idx = morphIndex.get(alias) ?? morphIndex.get(alias.toLowerCase());
+        if (idx !== undefined)
+            return idx;
+    }
+    return undefined;
+}
+function AvatarScene({ uri, morphStateRef, fov, onReady, onError }) {
+    const { camera } = (0, native_1.useThree)();
+    const gltf = (0, native_2.useGLTF)(uri);
+    const headMeshRef = (0, react_1.useRef)(null);
+    const morphIndexRef = (0, react_1.useRef)(new Map());
+    const readyFiredRef = (0, react_1.useRef)(false);
+    // Set up camera on mount
+    (0, react_1.useEffect)(() => {
+        if (!(camera instanceof THREE.PerspectiveCamera))
+            return;
+        camera.fov = fov;
+        camera.position.set(...CAMERA_POSITION);
+        camera.lookAt(CAMERA_TARGET);
+        camera.updateProjectionMatrix();
+    }, [camera, fov]);
+    // Find the head/face mesh with morph targets after GLTF loads
+    (0, react_1.useEffect)(() => {
+        if (!gltf?.scene)
+            return;
+        let bestMesh = null;
+        let bestCount = 0;
+        gltf.scene.traverse((node) => {
+            if (!(node instanceof THREE.Mesh))
+                return;
+            const count = Object.keys(node.morphTargetDictionary ?? {}).length;
+            if (count > bestCount) {
+                bestCount = count;
+                bestMesh = node;
+            }
+        });
+        if (!bestMesh) {
+            onError('No mesh with morph targets found in GLB');
+            return;
+        }
+        headMeshRef.current = bestMesh;
+        morphIndexRef.current = buildMorphIndex(bestMesh);
+        if (!readyFiredRef.current) {
+            readyFiredRef.current = true;
+            onReady();
+        }
+    }, [gltf, onReady, onError]);
+    // Per-frame morph weight application
+    (0, native_1.useFrame)((_, delta) => {
+        const mesh = headMeshRef.current;
+        if (!mesh?.morphTargetInfluences)
+            return;
+        const state = morphStateRef.current;
+        const alpha = Math.min(1, state.alpha * delta * 60); // normalize to 60fps
+        // Merge mood base + viseme target
+        const combined = { ...state.moodBase };
+        for (const [name, w] of Object.entries(state.visemeTarget)) {
+            combined[name] = Math.max(combined[name] ?? 0, w);
+        }
+        // Smooth current toward combined
+        const allNames = new Set([
+            ...Object.keys(state.current),
+            ...Object.keys(combined),
+        ]);
+        for (const name of allNames) {
+            const target = combined[name] ?? 0;
+            const cur = state.current[name] ?? 0;
+            const next = cur + (target - cur) * alpha;
+            state.current[name] = next;
+            const idx = resolveIndex(morphIndexRef.current, [name]);
+            if (idx !== undefined) {
+                mesh.morphTargetInfluences[idx] = next;
+            }
+        }
+        // Decay viseme layer
+        for (const name of Object.keys(state.visemeTarget)) {
+            state.visemeTarget[name] *= Math.pow(0.1, delta); // ~10x decay/s
+            if (state.visemeTarget[name] < 0.001) {
+                delete state.visemeTarget[name];
+            }
+        }
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("ambientLight", { intensity: 0.6 }), (0, jsx_runtime_1.jsx)("directionalLight", { position: [1, 3, 2], intensity: 1.2, castShadow: false }), (0, jsx_runtime_1.jsx)("primitive", { object: gltf.scene })] }));
+}
+// ---------------------------------------------------------------------------
+// Error boundary so GLTF load failures surface to onError
+// ---------------------------------------------------------------------------
+class GltfErrorBoundary extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() { return { hasError: true }; }
+    componentDidCatch(err) { this.props.onError(err.message); }
+    render() {
+        if (this.state.hasError)
+            return null;
+        return this.props.children;
+    }
+}
+// ---------------------------------------------------------------------------
+// Viseme schedule player
+// ---------------------------------------------------------------------------
+function applyVisemeCue(morphState, visemeKey) {
+    const aliases = morphTables_1.VISEME_MORPH_ALIASES[visemeKey];
+    if (!aliases)
+        return;
+    const w = morphTables_1.VISEME_WEIGHTS[visemeKey] ?? morphTables_1.DEFAULT_VISEME_WEIGHT;
+    for (const alias of aliases) {
+        morphState.visemeTarget[alias] = w;
+    }
+}
+// ---------------------------------------------------------------------------
+// Main exported component
+// ---------------------------------------------------------------------------
+exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, mood = 'neutral', onReady, onError, }, ref) => {
+    // Resolve authenticated file URI (same logic as FilamentAvatar)
+    const remoteUrl = avatarUrl && (avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://'))
+        ? avatarUrl
+        : null;
+    const fileResult = (0, useAuthedFilamentUri_1.useAuthedFilamentUri)(remoteUrl);
+    // Lock-in URI on first resolve — never change mid-session
+    const lockedUriRef = (0, react_1.useRef)(null);
+    const currentUri = fileResult?.uri ?? null;
+    if (lockedUriRef.current === null && currentUri) {
+        lockedUriRef.current = currentUri;
+    }
+    const localUri = lockedUriRef.current;
+    const fov = focalLength
+        ? Math.round(2 * Math.atan(21.634 / focalLength) * (180 / Math.PI))
+        : CAMERA_FOV_FULL;
+    // Shared morph state — mutated directly in useFrame, never causes re-renders
+    const morphStateRef = (0, react_1.useRef)({
+        current: {},
+        visemeTarget: {},
+        moodBase: {},
+        alpha: 0.18,
+    });
+    // Update mood baseline when mood prop changes
+    (0, react_1.useEffect)(() => {
+        morphStateRef.current.moodBase = { ...(morphTables_1.MOOD_MORPHS[mood] ?? {}) };
+    }, [mood]);
+    // Pending viseme schedule
+    const scheduleRef = (0, react_1.useRef)(null);
+    const scheduleTimersRef = (0, react_1.useRef)([]);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const clearScheduleTimers = (0, react_1.useCallback)(() => {
+        for (const t of scheduleTimersRef.current)
+            clearTimeout(t);
+        scheduleTimersRef.current = [];
+    }, []);
+    const handleReady = (0, react_1.useCallback)(() => {
+        setIsReady(true);
+        onReady?.();
+        // Flush any pending schedule
+        if (scheduleRef.current) {
+            const s = scheduleRef.current;
+            scheduleRef.current = null;
+            applySchedule(s);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onReady]);
+    const handleError = (0, react_1.useCallback)((msg) => {
+        console.warn('[WgpuAvatar] GLTF error:', msg);
+        onError?.(msg);
+    }, [onError]);
+    const applySchedule = (0, react_1.useCallback)((schedule) => {
+        clearScheduleTimers();
+        const now = Date.now();
+        const startedAt = schedule.startedAtMs ?? now;
+        const offset = now - startedAt;
+        for (const cue of schedule.cues) {
+            const delay = cue.startMs - offset;
+            if (delay < -200)
+                continue; // already expired
+            const rhubarbKey = cue.viseme;
+            const visemeKey = morphTables_1.RHUBARB_TO_VISEME[rhubarbKey] ?? rhubarbKey;
+            const t = setTimeout(() => {
+                applyVisemeCue(morphStateRef.current, visemeKey);
+            }, Math.max(0, delay));
+            scheduleTimersRef.current.push(t);
+        }
+    }, [clearScheduleTimers]);
+    // Cleanup on unmount
+    (0, react_1.useEffect)(() => () => clearScheduleTimers(), [clearScheduleTimers]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setMood: (m) => {
+            morphStateRef.current.moodBase = { ...(morphTables_1.MOOD_MORPHS[m] ?? {}) };
+        },
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        sendAmplitude: (_amplitude) => {
+            // Optional: could drive jaw open with amplitude
+            // morphStateRef.current.visemeTarget['jawOpen'] = _amplitude * 0.3;
+        },
+        sendViseme: (viseme, weight) => {
+            const aliases = morphTables_1.VISEME_MORPH_ALIASES[viseme];
+            if (!aliases)
+                return;
+            const w = weight ?? morphTables_1.VISEME_WEIGHTS[viseme] ?? morphTables_1.DEFAULT_VISEME_WEIGHT;
+            for (const alias of aliases) {
+                morphStateRef.current.visemeTarget[alias] = w;
+            }
+        },
+        clearVisemes: () => {
+            clearScheduleTimers();
+            morphStateRef.current.visemeTarget = {};
+        },
+        scheduleVisemes: (schedule) => {
+            if (!isReady) {
+                scheduleRef.current = schedule;
+                return;
+            }
+            applySchedule(schedule);
+        },
+    }), [isReady, applySchedule, clearScheduleTimers]);
+    if (!localUri) {
+        return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.placeholder, style] });
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, style], children: (0, jsx_runtime_1.jsx)(native_1.Canvas, { style: react_native_1.StyleSheet.absoluteFill, camera: { fov, position: CAMERA_POSITION, near: 0.01, far: 100 }, gl: { antialias: true, alpha: false }, onCreated: ({ gl }) => {
+                gl.setClearColor(new THREE.Color('#1a1a2e'));
+            }, children: (0, jsx_runtime_1.jsx)(GltfErrorBoundary, { onError: handleError, children: (0, jsx_runtime_1.jsx)(AvatarScene, { uri: localUri, morphStateRef: morphStateRef, fov: fov, onReady: handleReady, onError: handleError }) }) }) }));
+});
+exports.WgpuAvatar.displayName = 'WgpuAvatar';
+const styles = react_native_1.StyleSheet.create({
+    container: { overflow: 'hidden', backgroundColor: '#1a1a2e' },
+    placeholder: { backgroundColor: '#1a1a2e' },
+});

package/dist/wgpu/index.d.ts

@@ -0,0 +1,2 @@
+export { WgpuAvatar } from './WgpuAvatar';
+export type { WgpuAvatarRef } from './WgpuAvatar';

package/dist/wgpu/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WgpuAvatar = void 0;
+var WgpuAvatar_1 = require("./WgpuAvatar");
+Object.defineProperty(exports, "WgpuAvatar", { enumerable: true, get: function () { return WgpuAvatar_1.WgpuAvatar; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "talking-head-studio",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "Cross-platform 3D avatar component for React Native & web — lip-sync, gestures, accessories, and LLM integration. Powered by TalkingHead + Three.js.",
   "main": "dist/index.web.js",
   "browser": "dist/index.web.js",
@@ -46,6 +46,11 @@
       "react-native": "./dist/filament/editor/index.js",
       "types": "./dist/filament/editor/index.d.ts",
       "default": "./dist/filament/editor/index.js"
+    },
+    "./wgpu": {
+      "react-native": "./dist/wgpu/index.js",
+      "types": "./dist/wgpu/index.d.ts",
+      "default": "./dist/wgpu/index.js"
     }
   },
   "files": [
@@ -111,6 +116,7 @@
     "react-native": ">=0.73",
     "react-native-filament": ">=1",
     "react-native-webview": ">=13",
+    "react-native-wgpu": ">=0.1",
     "three": ">=0.170"
   },
   "peerDependenciesMeta": {
@@ -123,6 +129,9 @@
     "react-native-filament": {
       "optional": true
     },
+    "react-native-wgpu": {
+      "optional": true
+    },
     "expo": {
       "optional": true
     },
@@ -178,7 +187,7 @@
     "react-native-gesture-handler": "^2.30.0",
     "react-native-reanimated": "^4.2.3",
     "react-native-webview": "^13.16.0",
-    "react-test-renderer": "^19.2.4",
+    "react-test-renderer": "^18.3.1",
     "three": "^0.180.0",
     "ts-jest": "^29.4.6",
     "typescript": "^5.3.3",