talking-head-studio 0.4.11 → 0.4.12

package/dist/wgpu/WgpuAvatar.js

@@ -37,24 +37,38 @@ 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
+ * + 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
  */
+// IMPORTANT: blobShim MUST be the very first import — before any three/R3F
+// imports — so the Blob+createObjectURL patch is in place before R3F's
+// polyfills() smoke-tests createObjectURL at module evaluation time.
+require("./blobShim");
 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 fiber_1 = require("@react-three/fiber");
 const morphTables_1 = require("./morphTables");
 const useAuthedModelUri_1 = require("./useAuthedModelUri");
+const patchThreeForRN_1 = require("./patchThreeForRN");
+const R3FWebGpuCanvas_1 = require("./R3FWebGpuCanvas");
+const useNativeGLTF_1 = require("./useNativeGLTF");
+const scenePlacement_1 = require("./scenePlacement");
+const motion_1 = require("../core/avatar/motion");
+const motionRuntime_1 = require("../core/avatar/motionRuntime");
+const motionState_1 = require("./motionState");
+// Patch Three.js loaders before any GLTF/texture loading happens.
+// This fixes "Cannot create URL for blob!" on React Native — URL.createObjectURL
+// doesn't exist in Hermes/JSC, but GLTFLoader calls it for embedded textures.
+(0, patchThreeForRN_1.installThreeRNPatches)(false);
 // ---------------------------------------------------------------------------
 // Camera defaults — match FilamentAvatar constants
 // ---------------------------------------------------------------------------
@@ -65,7 +79,7 @@ const CAMERA_FOV_FULL = 38;
 // Scene/camera ref capture — runs inside Canvas so it can access R3F context
 // ---------------------------------------------------------------------------
 function SceneCapture({ onSceneReady }) {
-    const { scene, camera } = (0, native_1.useThree)();
+    const { scene, camera } = (0, fiber_1.useThree)();
     (0, react_1.useEffect)(() => {
         onSceneReady(scene, camera);
         // Only fire once on mount — scene/camera identity is stable
@@ -73,6 +87,13 @@ function SceneCapture({ onSceneReady }) {
     }, []);
     return null;
 }
+/** Walks up to the topmost ancestor so a bone scan covers the whole skeleton. */
+function findSkeletonRoot(node) {
+    let root = node;
+    while (root.parent)
+        root = root.parent;
+    return root;
+}
 function buildMorphIndex(mesh) {
     const map = new Map();
     const dict = mesh.morphTargetDictionary;
@@ -92,12 +113,39 @@ function resolveIndex(morphIndex, aliases) {
     }
     return undefined;
 }
-function AvatarScene({ uri, morphStateRef, fov, onReady, onError, onSceneReady }) {
-    const { camera } = (0, native_1.useThree)();
-    const gltf = (0, native_2.useGLTF)(uri);
+// ---------------------------------------------------------------------------
+// Accessory mesh — loads a GLB and parents it to a named bone on the avatar
+// ---------------------------------------------------------------------------
+function AccessoryMesh({ accessory, avatarScene, }) {
+    const { gltf } = (0, useNativeGLTF_1.useNativeGLTF)(accessory.url);
+    (0, react_1.useEffect)(() => {
+        if (!gltf?.scene)
+            return;
+        const bone = avatarScene.getObjectByName(accessory.bone ?? 'Head');
+        const target = bone ?? avatarScene;
+        const clone = gltf.scene.clone(true);
+        if (accessory.position)
+            clone.position.set(...accessory.position);
+        if (accessory.rotation)
+            clone.rotation.set(...accessory.rotation);
+        if (accessory.scale != null)
+            clone.scale.setScalar(accessory.scale);
+        target.add(clone);
+        return () => { target.remove(clone); };
+    }, [gltf, avatarScene, accessory]);
+    return null;
+}
+function AvatarScene({ uri, morphStateRef, motionStateRef, fov, accessories, animationRequest, onReady, onError, onAvatarState, onSceneReady, }) {
+    const { camera } = (0, fiber_1.useThree)();
+    const { gltf, error } = (0, useNativeGLTF_1.useNativeGLTF)(uri);
+    const { gltf: animationGltf, error: animationError } = (0, useNativeGLTF_1.useNativeGLTF)(animationRequest?.url ?? null);
+    const scene = gltf?.scene ?? null;
+    const placement = (0, react_1.useMemo)(() => (scene ? (0, scenePlacement_1.computeObjectPlacement)(scene, CAMERA_TARGET) : null), [scene]);
     const headMeshRef = (0, react_1.useRef)(null);
     const morphIndexRef = (0, react_1.useRef)(new Map());
     const readyFiredRef = (0, react_1.useRef)(false);
+    const animationMixerRef = (0, react_1.useRef)(null);
+    const animationStopTimerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (!(camera instanceof THREE.PerspectiveCamera))
             return;
@@ -107,13 +155,25 @@ function AvatarScene({ uri, morphStateRef, fov, onReady, onError, onSceneReady }
         camera.updateProjectionMatrix();
     }, [camera, fov]);
     (0, react_1.useEffect)(() => {
-        if (!gltf?.scene)
+        if (!error)
+            return;
+        onError(error.message);
+    }, [error, onError]);
+    (0, react_1.useEffect)(() => {
+        if (!animationError || !animationRequest)
+            return;
+        onAvatarState?.(`animation_error:${animationRequest.url}`);
+        onError(animationError.message);
+    }, [animationError, animationRequest, onAvatarState, onError]);
+    (0, react_1.useEffect)(() => {
+        if (!scene)
             return;
         let bestMesh = null;
         let bestCount = 0;
-        gltf.scene.traverse((node) => {
+        scene.traverse((node) => {
             if (!(node instanceof THREE.Mesh))
                 return;
+            node.frustumCulled = false;
             const count = Object.keys(node.morphTargetDictionary ?? {}).length;
             if (count > bestCount) {
                 bestCount = count;
@@ -121,8 +181,16 @@ function AvatarScene({ uri, morphStateRef, fov, onReady, onError, onSceneReady }
             }
         });
         if (!bestMesh) {
-            onError('No mesh with morph targets found in GLB');
-            return;
+            // Fallback: no morph targets — find any mesh and use amplitude-only jaw drive
+            scene.traverse((node) => {
+                if (node instanceof THREE.Mesh && !bestMesh)
+                    bestMesh = node;
+            });
+            if (!bestMesh) {
+                onError('No mesh found in GLB');
+                return;
+            }
+            console.warn('[WgpuAvatar] No morph targets found — using amplitude-only mode');
         }
         headMeshRef.current = bestMesh;
         morphIndexRef.current = buildMorphIndex(bestMesh);
@@ -130,14 +198,64 @@ function AvatarScene({ uri, morphStateRef, fov, onReady, onError, onSceneReady }
             readyFiredRef.current = true;
             onReady();
         }
-    }, [gltf, onReady, onError]);
-    (0, native_1.useFrame)((_, delta) => {
+    }, [scene, onReady, onError]);
+    (0, react_1.useEffect)(() => {
+        if (animationStopTimerRef.current) {
+            clearTimeout(animationStopTimerRef.current);
+            animationStopTimerRef.current = null;
+        }
+        animationMixerRef.current?.stopAllAction();
+        animationMixerRef.current = null;
+        if (!scene || !animationRequest)
+            return;
+        const source = animationGltf ?? (animationRequest.url === uri ? gltf : null);
+        if (!source)
+            return;
+        const clip = source.animations[animationRequest.index] ?? source.animations[0];
+        if (!clip) {
+            onAvatarState?.(`animation_error:no_clip:${animationRequest.url}`);
+            return;
+        }
+        const mixer = new THREE.AnimationMixer(scene);
+        const action = mixer.clipAction(clip);
+        action.reset().play();
+        animationMixerRef.current = mixer;
+        onAvatarState?.(`animation:${animationRequest.url}`);
+        if (animationRequest.dur && animationRequest.dur > 0) {
+            animationStopTimerRef.current = setTimeout(() => {
+                mixer.stopAllAction();
+                if (animationMixerRef.current === mixer)
+                    animationMixerRef.current = null;
+                onAvatarState?.('animation:stopped');
+            }, animationRequest.dur * 1000);
+        }
+        return () => {
+            if (animationStopTimerRef.current) {
+                clearTimeout(animationStopTimerRef.current);
+                animationStopTimerRef.current = null;
+            }
+            mixer.stopAllAction();
+            if (animationMixerRef.current === mixer)
+                animationMixerRef.current = null;
+        };
+    }, [animationGltf, animationRequest, gltf, onAvatarState, scene, uri]);
+    (0, fiber_1.useFrame)((_, delta) => {
         const mesh = headMeshRef.current;
         if (!mesh?.morphTargetInfluences)
             return;
         const state = morphStateRef.current;
-        const alpha = Math.min(1, state.alpha * delta * 60);
-        const combined = { ...state.moodBase };
+        // Frame-rate independent lerp: same convergence speed at 30 Hz and 120 Hz
+        const alpha = 1 - Math.exp(-state.alpha * delta * 60);
+        // Idle animation — subtle breathing / brow life at ~0.3 Hz
+        state.idleTime += delta;
+        const breathe = Math.sin(state.idleTime * 2 * Math.PI * 0.3) * 0.04;
+        const idleIdle = {
+            browRaiserL: Math.max(0, breathe),
+            browRaiserR: Math.max(0, breathe),
+            browRaiser_L: Math.max(0, breathe),
+            browRaiser_R: Math.max(0, breathe),
+        };
+        const combined = { ...state.moodBase, ...idleIdle };
         for (const [name, w] of Object.entries(state.visemeTarget)) {
             combined[name] = Math.max(combined[name] ?? 0, w);
         }
@@ -151,19 +269,61 @@ function AvatarScene({ uri, morphStateRef, fov, onReady, onError, onSceneReady }
             if (idx !== undefined)
                 mesh.morphTargetInfluences[idx] = next;
         }
+        // Viseme decay: hold peak for 80 ms then decay (avoids eating fast cues)
+        const now = performance.now();
         for (const name of Object.keys(state.visemeTarget)) {
-            state.visemeTarget[name] *= Math.pow(0.1, delta);
-            if (state.visemeTarget[name] < 0.001)
-                delete state.visemeTarget[name];
+            const cueAge = (now - (state.visemeCueTime[name] ?? now)) / 1000;
+            if (cueAge > 0.08) {
+                state.visemeTarget[name] *= Math.pow(0.05, delta);
+                if (state.visemeTarget[name] < 0.001) {
+                    delete state.visemeTarget[name];
+                    delete state.visemeCueTime[name];
+                }
+            }
+        }
+        // Procedural body motion — drives the skeleton bones (independent of the
+        // face morphs above). Bones are scanned lazily on first active motion.
+        const motion = motionStateRef.current;
+        if (motion.key) {
+            if (!motion.bones) {
+                const root = headMeshRef.current?.parent ?? mesh;
+                const skeletonRoot = root ? findSkeletonRoot(root) : null;
+                if (skeletonRoot) {
+                    const scanned = (0, motionRuntime_1.scanMotionBones)((visit) => {
+                        skeletonRoot.traverse((node) => {
+                            if (node.isBone) {
+                                visit(node);
+                            }
+                        });
+                    });
+                    motion.bones = scanned.bones;
+                    motion.rest = scanned.rest;
+                }
+                else {
+                    // No skeleton — nothing to drive. Clear so we don't rescan every frame.
+                    motion.key = null;
+                }
+            }
+            if (motion.key && motion.bones && motion.rest) {
+                const tSec = (now - motion.startTime) / 1000;
+                (0, motionRuntime_1.applyMotionFrame)(motion.key, tSec, motion.bones, motion.rest);
+            }
         }
+        animationMixerRef.current?.update(delta);
     });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onSceneReady && (0, jsx_runtime_1.jsx)(SceneCapture, { onSceneReady: onSceneReady }), (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 })] }));
+    if (!scene) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onSceneReady && (0, jsx_runtime_1.jsx)(SceneCapture, { onSceneReady: onSceneReady }), (0, jsx_runtime_1.jsx)("ambientLight", { intensity: 0.6 }), (0, jsx_runtime_1.jsx)("directionalLight", { position: [1, 3, 2], intensity: 1.2, castShadow: false })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onSceneReady && (0, jsx_runtime_1.jsx)(SceneCapture, { onSceneReady: onSceneReady }), (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)("group", { position: placement?.position ?? CAMERA_TARGET, scale: placement?.scale ?? 1, children: (0, jsx_runtime_1.jsx)("primitive", { object: scene }) }), accessories?.map((acc) => ((0, jsx_runtime_1.jsx)(AccessoryMesh, { accessory: acc, avatarScene: scene }, acc.id)))] }));
 }
 // ---------------------------------------------------------------------------
 // Error boundary
 // ---------------------------------------------------------------------------
 class GltfErrorBoundary extends react_1.default.Component {
-    constructor(props) { super(props); this.state = { hasError: false }; }
+    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)
@@ -177,43 +337,88 @@ function applyVisemeCue(morphState, visemeKey) {
     if (!aliases)
         return;
     const w = morphTables_1.VISEME_WEIGHTS[visemeKey] ?? morphTables_1.DEFAULT_VISEME_WEIGHT;
-    for (const alias of aliases)
+    const now = performance.now();
+    for (const alias of aliases) {
         morphState.visemeTarget[alias] = w;
+        morphState.visemeCueTime[alias] = now;
+    }
 }
 // ---------------------------------------------------------------------------
 // Main exported component
 // ---------------------------------------------------------------------------
-exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, mood = 'neutral', onReady, onError, onSceneReady }, ref) => {
-    const remoteUrl = avatarUrl && (avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://'))
-        ? avatarUrl : null;
+exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, mood = 'neutral', accessories, onReady, onError, onAvatarState, onSceneReady }, ref) => {
+    const isRemote = avatarUrl != null && (avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://'));
+    const remoteUrl = (0, react_1.useMemo)(() => isRemote ? avatarUrl : null, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [avatarUrl]);
     const fileResult = (0, useAuthedModelUri_1.useAuthedModelUri)(remoteUrl);
-    const lockedUriRef = (0, react_1.useRef)(null);
-    const lastUrlRef = (0, react_1.useRef)(avatarUrl);
-    if (lastUrlRef.current !== avatarUrl) {
-        lastUrlRef.current = avatarUrl;
-        lockedUriRef.current = null;
+    // stableUri: once a valid URI is resolved, keep showing it until a new one
+    // is ready — prevents Canvas unmount/remount flicker on transient url changes.
+    const stableUriRef = (0, react_1.useRef)(null);
+    const lastAvatarUrlRef = (0, react_1.useRef)(avatarUrl);
+    if (lastAvatarUrlRef.current !== avatarUrl) {
+        // avatarUrl changed — invalidate stable URI so next resolved URI takes over
+        lastAvatarUrlRef.current = avatarUrl;
+        stableUriRef.current = null;
+    }
+    // For non-remote URLs (file://, asset://, data:) use directly without download
+    const currentUri = isRemote ? (fileResult?.uri ?? null) : (avatarUrl ?? null);
+    if (currentUri && currentUri !== stableUriRef.current) {
+        stableUriRef.current = currentUri;
     }
-    const currentUri = fileResult?.uri ?? null;
-    if (lockedUriRef.current === null && currentUri)
-        lockedUriRef.current = currentUri;
-    const localUri = lockedUriRef.current;
+    const localUri = stableUriRef.current;
     const fov = focalLength
         ? Math.round(2 * Math.atan(21.634 / focalLength) * (180 / Math.PI))
         : CAMERA_FOV_FULL;
+    const cameraProps = (0, react_1.useMemo)(() => ({ fov, position: CAMERA_POSITION, near: 0.01, far: 100 }), [fov]);
     const morphStateRef = (0, react_1.useRef)({
-        current: {}, visemeTarget: {}, moodBase: {}, alpha: 0.18,
+        current: {}, visemeTarget: {}, visemeCueTime: {}, moodBase: {}, alpha: 0.18, idleTime: 0,
     });
+    const motionStateRef = (0, react_1.useRef)((0, motionState_1.createMotionState)());
+    const [animationRequest, setAnimationRequest] = (0, react_1.useState)(null);
+    const animationNonceRef = (0, react_1.useRef)(0);
+    const onAvatarStateRef = (0, react_1.useRef)(onAvatarState);
+    onAvatarStateRef.current = onAvatarState;
     (0, react_1.useEffect)(() => {
         morphStateRef.current.moodBase = { ...(morphTables_1.MOOD_MORPHS[mood] ?? {}) };
     }, [mood]);
     const scheduleRef = (0, react_1.useRef)(null);
     const scheduleTimersRef = (0, react_1.useRef)([]);
+    const blinkTimersRef = (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 = [];
     }, []);
+    (0, react_1.useEffect)(() => {
+        (0, motionState_1.resetMotionStateForAvatarSwap)(motionStateRef.current);
+    }, [localUri]);
+    const stopMotion = (0, react_1.useCallback)(() => {
+        (0, motionState_1.stopMotionState)(motionStateRef.current);
+    }, []);
+    const playMotionKey = (0, react_1.useCallback)((name, autoReturnOverrideMs) => {
+        if (!(0, motion_1.isMotionKey)(name)) {
+            onAvatarStateRef.current?.(`motion_error:unknown:${name}`);
+            return false;
+        }
+        const motion = motionStateRef.current;
+        if (motion.autoReturnTimer) {
+            clearTimeout(motion.autoReturnTimer);
+            motion.autoReturnTimer = null;
+        }
+        motion.key = name;
+        motion.startTime = performance.now();
+        onAvatarStateRef.current?.(`motion:${name}`);
+        const autoReturnMs = autoReturnOverrideMs ?? motion_1.MOTION_DEFS[name].autoReturnMs;
+        if (autoReturnMs && autoReturnMs > 0) {
+            motion.autoReturnTimer = setTimeout(() => {
+                if (motionStateRef.current.key === name)
+                    stopMotion();
+            }, autoReturnMs);
+        }
+        return true;
+    }, [stopMotion]);
     const applySchedule = (0, react_1.useCallback)((schedule) => {
         clearScheduleTimers();
         const now = Date.now();
@@ -245,6 +450,12 @@ exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, m
         onError?.(msg);
     }, [onError]);
     (0, react_1.useEffect)(() => () => clearScheduleTimers(), [clearScheduleTimers]);
+    (0, react_1.useEffect)(() => () => { for (const t of blinkTimersRef.current)
+        clearTimeout(t); }, []);
+    (0, react_1.useEffect)(() => () => (0, motionState_1.resetMotionStateForAvatarSwap)(motionStateRef.current), []);
+    const handleCanvasCreated = (0, react_1.useCallback)((state) => {
+        state.scene.background = new THREE.Color('#1a1a2e');
+    }, []);
     (0, react_1.useImperativeHandle)(ref, () => ({
         setMood: (m) => { morphStateRef.current.moodBase = { ...(morphTables_1.MOOD_MORPHS[m] ?? {}) }; },
         sendAmplitude: () => { },
@@ -253,10 +464,55 @@ exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, m
             if (!aliases)
                 return;
             const w = weight ?? morphTables_1.VISEME_WEIGHTS[viseme] ?? morphTables_1.DEFAULT_VISEME_WEIGHT;
-            for (const alias of aliases)
+            const now = performance.now();
+            for (const alias of aliases) {
                 morphStateRef.current.visemeTarget[alias] = w;
+                morphStateRef.current.visemeCueTime[alias] = now;
+            }
+        },
+        clearVisemes: () => { clearScheduleTimers(); morphStateRef.current.visemeTarget = {}; morphStateRef.current.visemeCueTime = {}; },
+        playMotion: (name) => {
+            playMotionKey(name);
+        },
+        stopMotion,
+        playGesture: (name, opts) => {
+            playMotionKey(name, opts?.ms ?? 1000);
+        },
+        stopGesture: stopMotion,
+        playPose: (name) => {
+            playMotionKey(name);
+        },
+        stopPose: stopMotion,
+        playAnimation: (url, opts) => {
+            animationNonceRef.current += 1;
+            setAnimationRequest({
+                url,
+                index: opts?.index ?? 0,
+                dur: opts?.dur,
+                nonce: animationNonceRef.current,
+            });
+        },
+        stopAnimation: () => {
+            setAnimationRequest(null);
+            onAvatarStateRef.current?.('animation:stopped');
+        },
+        triggerBlink: () => {
+            // Blink: close eyes over 80ms, hold 40ms, open over 80ms
+            const BLINK_MORPHS = [
+                'eyeBlinkLeft', 'eyeBlink_L', 'eyesClosed',
+                'eyeBlinkRight', 'eyeBlink_R',
+            ];
+            const now = performance.now();
+            const set = (w) => {
+                for (const name of BLINK_MORPHS) {
+                    morphStateRef.current.visemeTarget[name] = w;
+                    morphStateRef.current.visemeCueTime[name] = now;
+                }
+            };
+            set(1);
+            const t1 = setTimeout(() => set(0), 120);
+            blinkTimersRef.current.push(t1);
         },
-        clearVisemes: () => { clearScheduleTimers(); morphStateRef.current.visemeTarget = {}; },
         scheduleVisemes: (schedule) => {
             if (!isReady) {
                 scheduleRef.current = schedule;
@@ -264,13 +520,14 @@ exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, m
             }
             applySchedule(schedule);
         },
-    }), [isReady, applySchedule, clearScheduleTimers]);
+    }), [isReady, applySchedule, clearScheduleTimers, playMotionKey, stopMotion]);
     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, onSceneReady: onSceneReady }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, style], children: (0, jsx_runtime_1.jsx)(R3FWebGpuCanvas_1.R3FWebGpuCanvas, { style: styles.canvas, camera: cameraProps, clearColor: "#1a1a2e", onCreated: handleCanvasCreated, onError: handleError, children: (0, jsx_runtime_1.jsx)(GltfErrorBoundary, { onError: handleError, children: (0, jsx_runtime_1.jsx)(AvatarScene, { uri: localUri, morphStateRef: morphStateRef, motionStateRef: motionStateRef, fov: fov, accessories: accessories, animationRequest: animationRequest, onReady: handleReady, onError: handleError, onAvatarState: onAvatarState, onSceneReady: onSceneReady }) }) }) }));
 });
 exports.WgpuAvatar.displayName = 'WgpuAvatar';
 const styles = react_native_1.StyleSheet.create({
     container: { overflow: 'hidden', backgroundColor: '#1a1a2e' },
+    canvas: { flex: 1 },
     placeholder: { backgroundColor: '#1a1a2e' },
 });

package/dist/wgpu/accessoryDefaults.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Canonical snap-to-bone defaults per accessory category.
+ * Applied immediately when the user equips an item that has no saved placement,
+ * so the "good enough" position is free on tap for ~90% of use-cases.
+ *
+ * Offsets are in the bone's local space (metres).
+ * Rotation is Euler XYZ in radians.
+ */
+import type { AssetPlacement } from '../wardrobe/wardrobeStore';
+export declare const BONE_SNAP_DEFAULTS: Record<string, AssetPlacement>;
+/** Returns the snap default for a category, or null if the category is unknown. */
+export declare function snapDefaultForCategory(category: string): AssetPlacement | null;

package/dist/wgpu/accessoryDefaults.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BONE_SNAP_DEFAULTS = void 0;
+exports.snapDefaultForCategory = snapDefaultForCategory;
+exports.BONE_SNAP_DEFAULTS = {
+    hat: { bone: 'Head', position: [0, 0.12, 0.00], rotation: [0, 0, 0], scale: 1.0 },
+    cap: { bone: 'Head', position: [0, 0.10, 0.02], rotation: [0, 0, 0], scale: 1.0 },
+    glasses: { bone: 'Head', position: [0, 0.02, 0.07], rotation: [0, 0, 0], scale: 1.0 },
+    sunglasses: { bone: 'Head', position: [0, 0.02, 0.07], rotation: [0, 0, 0], scale: 1.0 },
+    earring: { bone: 'Head', position: [0.085, 0.01, 0.00], rotation: [0, 0, 0], scale: 0.8 },
+    earrings: { bone: 'Head', position: [0.085, 0.01, 0.00], rotation: [0, 0, 0], scale: 0.8 },
+    necklace: { bone: 'Neck', position: [0, -0.04, 0.03], rotation: [0, 0, 0], scale: 1.0 },
+    mask: { bone: 'Head', position: [0, 0.00, 0.08], rotation: [0, 0, 0], scale: 1.0 },
+};
+/** Returns the snap default for a category, or null if the category is unknown. */
+function snapDefaultForCategory(category) {
+    const key = category.toLowerCase().trim();
+    return exports.BONE_SNAP_DEFAULTS[key] ?? null;
+}

package/dist/wgpu/blobShim.d.ts

@@ -0,0 +1,2 @@
+/** Exported so patchThreeForRN can use the same store when re-patching URL.createObjectURL. */
+export declare const blobBytesStore: WeakMap<object, Uint8Array<ArrayBufferLike>>;