talking-head-studio 0.4.6 → 0.4.9

package/README.md

@@ -1,6 +1,6 @@
 # talking-head-studio
 
-**Drop a talking, lip-syncing 3D avatar into any React app -- native or web -- in under five minutes.**
+**The missing UI layer for AI Agents. Drop-in, lip-syncing 3D avatars for Web, React, and React Native.**
 
 [![npm version](https://img.shields.io/npm/v/talking-head-studio.svg)](https://www.npmjs.com/package/talking-head-studio)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
@@ -10,10 +10,11 @@
 
 ## Why this?
 
-- **Truly cross-platform.** One component, two renderers. React Native gets a WebView; React on web gets an iframe with `srcdoc`. Same API, same props, same ref.
-- **Bring any GLB.** Rigged models with ARKit/Oculus blend shapes get full phoneme-based lip-sync via HeadAudio. Non-rigged models still work -- they get a static viewer with amplitude-driven jaw animation as a fallback. No vendor lock-in to a single avatar format.
-- **Built for LLM voice pipelines.** Wire `sendAmplitude` to LiveKit, Web Audio, ElevenLabs, or any audio source. The avatar speaks when your AI speaks.
-- **Accessory system.** Attach hats, glasses, backpacks, or any GLB to any bone at runtime. Position, rotate, and scale each piece independently.
+- **Zero-Jank React Native & Web:** True cross-platform rendering. React Native gets a blazing fast wgpu-accelerated native render loop, skipping WebView bridge latency entirely. React on web gets a robust `react-three-fiber` setup. Same API, same props.
+- **Universal GLB Compatibility:** Bring any GLB. Out-of-the-box support for standard ARKit blendshapes. Rigged models get full phoneme-based lip-sync. Non-rigged models get an amplitude-driven jaw animation fallback.
+- **Built for AI & Voice Pipelines:** Wire `sendAmplitude` or visemes directly to LiveKit, Web Audio, ElevenLabs, OpenAI Realtime, or any audio source.
+- **Always Alive:** Procedural idle animations (breathing, nodding, swaying) keep your avatar from feeling like a static doll.
+- **Dynamic Wardrobe & Accessories:** Swap hair, skin, and eye colors on the fly. Attach hats, glasses, or backpacks to any bone at runtime.
 
 ---
 
@@ -68,7 +69,7 @@ export default function Avatar() {
   return (
     <TalkingHead
       ref={ref}
-      avatarUrl="https://models.readyplayer.me/your-model.glb"
+      avatarUrl="https://example.com/your-model.glb"
       mood="happy"
       cameraView="upper"
       hairColor="#1a1a2e"
@@ -378,7 +379,7 @@ For the complete experience -- phoneme lip-sync, expressions, moods, gestures --
 - **ARKit blend shapes** and/or **Oculus viseme blend shapes** for lip-sync
 - Standard Three.js-compatible GLB format
 
-Models from [Ready Player Me](https://readyplayer.me/), [Avaturn](https://avaturn.me/), or any Mixamo-rigged source work out of the box.
+Models from [Avaturn](https://avaturn.me/) or any Mixamo-rigged source work out of the box.
 
 ### Non-rigged models (static fallback)
 
@@ -457,4 +458,11 @@ This project builds on excellent open-source work:
 
 ## License
 
+MIT
+ at runtime.
+
+---
+
+## License
+
 MIT

package/dist/TalkingHead.web.js

@@ -46,14 +46,24 @@ exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'n
     const pendingSkinColorRef = (0, react_1.useRef)(skinColor);
     const pendingEyeColorRef = (0, react_1.useRef)(eyeColor);
     const accessoriesRef = (0, react_1.useRef)(accessories);
+    const onLoadingChangeRef = (0, react_1.useRef)(onLoadingChange);
+    const onReadyRef = (0, react_1.useRef)(onReady);
+    const onErrorRef = (0, react_1.useRef)(onError);
+    const onAvatarStateRef = (0, react_1.useRef)(onAvatarState);
+    (0, react_1.useEffect)(() => {
+        onLoadingChangeRef.current = onLoadingChange;
+        onReadyRef.current = onReady;
+        onErrorRef.current = onError;
+        onAvatarStateRef.current = onAvatarState;
+    });
     (0, react_1.useEffect)(() => {
         accessoriesRef.current = accessories;
     }, [accessories]);
     (0, react_1.useEffect)(() => {
         if (!avatarUrl)
             return;
-        onLoadingChange?.({ stage: 'booting', progress: null });
-    }, [avatarUrl, authToken, onLoadingChange]);
+        onLoadingChangeRef.current?.({ stage: 'booting', progress: null });
+    }, [avatarUrl, authToken]);
     const post = (0, react_1.useCallback)((msg) => {
         iframeRef.current?.contentWindow?.postMessage(JSON.stringify(msg), '*');
     }, []);
@@ -148,7 +158,7 @@ exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'n
             try {
                 const msg = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
                 if (msg.type === 'loading' && typeof msg.stage === 'string') {
-                    onLoadingChange?.({
+                    onLoadingChangeRef.current?.({
                         stage: msg.stage,
                         progress: typeof msg.progress === 'number' && Number.isFinite(msg.progress)
                             ? msg.progress
@@ -158,7 +168,7 @@ exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'n
                 }
                 if (msg.type === 'ready') {
                     readyRef.current = true;
-                    onLoadingChange?.({ stage: 'ready', progress: 100 });
+                    onLoadingChangeRef.current?.({ stage: 'ready', progress: 100 });
                     if (pendingMoodRef.current) {
                         post({ type: 'mood', value: pendingMoodRef.current });
                     }
@@ -174,13 +184,13 @@ exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'n
                     if (accessoriesRef.current?.length) {
                         post({ type: 'set_accessories', accessories: accessoriesRef.current });
                     }
-                    onReady?.();
+                    onReadyRef.current?.();
                 }
                 else if (msg.type === 'error') {
-                    onError?.(msg.message);
+                    onErrorRef.current?.(msg.message);
                 }
                 else if (msg.type === 'avatarState') {
-                    onAvatarState?.(msg.state);
+                    onAvatarStateRef.current?.(msg.state);
                 }
                 else if (msg.type === 'log') {
                     console.log('[TalkingHead]', msg.message);
@@ -192,7 +202,7 @@ exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'n
         };
         window.addEventListener('message', onMessage);
         return () => window.removeEventListener('message', onMessage);
-    }, [onLoadingChange, onReady, onError, post]);
+    }, [post]);
     return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle, ...style }, children: (0, jsx_runtime_1.jsx)("iframe", { ref: iframeRef, srcDoc: srcdoc, style: iframeStyle, sandbox: "allow-scripts allow-same-origin", title: "TalkingHead Avatar" }) }));
 });
 exports.TalkingHead.displayName = 'TalkingHead';

package/dist/TalkingHeadVisualization.js

@@ -46,8 +46,10 @@ function getLoadingLabel(stage) {
  */
 exports.TalkingHeadVisualization = (0, react_1.forwardRef)(({ style, avatarUrl, authToken, cameraView = 'head', cameraDistance = 0.2, accessories, mood: initialMood = 'neutral', aspect, focalLength, visemeSchedule, onVisemeScheduleApplied, onVoiceMood, vendorBaseUrl }, ref) => {
     const avatarRef = (0, react_1.useRef)(null);
-    // On native, WgpuAvatar ref is wired via callback ref — store it here so
-    // scheduleVisemes / sendAmplitude can route to it.
+    // On native, WgpuAvatar ref is stored here so scheduleVisemes / sendAmplitude can route to it.
+    // useImperativeHandle is the sole owner of the forwarded ref on all platforms —
+    // do NOT manually forward ref inside the WgpuAvatar callback ref, as that bypasses
+    // the dedup key check in scheduleVisemes and causes double-fire.
     const wgpuRef = (0, react_1.useRef)(null);
     // Unified accessor — WgpuAvatar on native, WebView on web
     const activeAvatar = (0, react_1.useCallback)(() => (wgpuRef.current ?? avatarRef.current), []);
@@ -183,26 +185,15 @@ exports.TalkingHeadVisualization = (0, react_1.forwardRef)(({ style, avatarUrl,
         lastScheduledVisemeKeyRef.current = scheduleKey;
     }, [isAvatarReady, onVisemeScheduleApplied, visemeSchedule, activeAvatar]);
     // On native use WgpuAvatar — direct morph writes, no WebView bridge.
+    // NOTE: Only store wgpuRef here — do NOT forward `ref` manually. useImperativeHandle
+    // above is the sole owner of the forwarded ref and handles the dedup key check.
     if (react_native_1.Platform.OS !== 'web') {
-        return ((0, jsx_runtime_1.jsx)(WgpuAvatar_1.WgpuAvatar, { focalLength: focalLength, ref: (fr) => {
-                wgpuRef.current = fr;
-                if (typeof ref === 'function')
-                    ref(fr);
-                else if (ref)
-                    ref.current = fr;
-                if (fr && pendingVisemeScheduleRef.current) {
-                    fr.scheduleVisemes(pendingVisemeScheduleRef.current);
-                    pendingVisemeScheduleRef.current = null;
-                }
-            }, style: style, avatarUrl: avatarUrl ?? null, aspect: aspect, mood: mood, accessories: accessories, onReady: handleReady, onError: handleError }));
+        return ((0, jsx_runtime_1.jsx)(WgpuAvatar_1.WgpuAvatar, { focalLength: focalLength, ref: (fr) => { wgpuRef.current = fr; }, style: style, avatarUrl: avatarUrl ?? null, aspect: aspect, mood: mood, accessories: accessories, onReady: handleReady, onError: handleError }));
     }
     if (!effectiveAvatarUrl) {
         return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [style, styles.placeholder] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [style, styles.container], pointerEvents: "box-none", children: [(0, jsx_runtime_1.jsx)(TalkingHead_1.TalkingHead, { ref: avatarRef, avatarUrl: effectiveAvatarUrl, authToken: authToken, cameraView: cameraView, cameraDistance: cameraDistance, accessories: accessories, mood: mood, onLoadingChange: handleLoadingChange, onReady: handleReady, onError: handleError, onVoiceMood: onVoiceMood, style: react_native_1.StyleSheet.absoluteFill, vendorBaseUrl: vendorBaseUrl }), !isAvatarReady && ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "talking-head-loading", style: styles.loadingOverlay, pointerEvents: "none", children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.loadingCard, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.loadingBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingBadgeText, children: "AVATAR" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingTitle, children: avatarError ? 'Avatar failed to load' : getLoadingLabel(loadingState.stage) }), avatarError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingHint, children: avatarError })) : typeof loadingState.progress === 'number' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.loadingPercent, children: [loadingState.progress, "%"] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressTrack, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                                            styles.progressFill,
-                                            { width: `${Math.max(6, loadingState.progress)}%` },
-                                        ] }) })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingHint, children: "Preparing the avatar scene\u2026" }))] }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [style, styles.container], pointerEvents: "box-none", children: [(0, jsx_runtime_1.jsx)(TalkingHead_1.TalkingHead, { ref: avatarRef, avatarUrl: effectiveAvatarUrl, authToken: authToken, cameraView: cameraView, cameraDistance: cameraDistance, accessories: accessories, mood: mood, onLoadingChange: handleLoadingChange, onReady: handleReady, onError: handleError, onVoiceMood: onVoiceMood, style: react_native_1.StyleSheet.absoluteFill, vendorBaseUrl: vendorBaseUrl }), !isAvatarReady && ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "talking-head-loading", style: styles.loadingOverlay, pointerEvents: "none", children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.loadingCard, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.loadingBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingBadgeText, children: "AVATAR" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingTitle, children: avatarError ? 'Avatar failed to load' : getLoadingLabel(loadingState.stage) }), avatarError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingHint, children: avatarError })) : typeof loadingState.progress === 'number' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.loadingPercent, children: [loadingState.progress, "%"] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.progressTrack, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: Math.max(6, loadingState.progress ?? 0), height: '100%', borderRadius: 999, backgroundColor: '#5eead4' } }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 100 - Math.max(6, loadingState.progress ?? 0) } })] })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingHint, children: "Preparing the avatar scene\u2026" }))] }) }))] }));
 });
 exports.TalkingHeadVisualization.displayName = 'TalkingHeadVisualization';
 const styles = react_native_1.StyleSheet.create({
@@ -264,11 +255,7 @@ const styles = react_native_1.StyleSheet.create({
         backgroundColor: 'rgba(148, 163, 184, 0.18)',
         marginTop: 12,
         overflow: 'hidden',
-    },
-    progressFill: {
-        height: '100%',
-        borderRadius: 999,
-        backgroundColor: '#5eead4',
+        flexDirection: 'row',
     },
     placeholder: {
         backgroundColor: 'rgba(30,34,53,0.5)',

package/dist/editor/FaceSqueezeEditor.d.ts

@@ -0,0 +1,17 @@
+/**
+ * WgpuFaceSqueezeEditor — R3F/Three.js port of FaceSqueezeEditor.
+ *
+ * Same gesture zones, spring physics, idle emotions, lip sync, and sound
+ * as the Filament version. Only the render scaffolding changes:
+ *
+ *   FilamentScene + FilamentView + renderableManager.setMorphWeights
+ *   → @react-three/fiber Canvas + mesh.morphTargetInfluences[]
+ *
+ * Drop-in replacement: same FaceSqueezeEditorProps interface.
+ * The .web.tsx stub is shared — import from FaceSqueezeEditor.web.tsx.
+ */
+export declare const FACE_SQUEEZE_LOCAL_MODULE: number;
+export interface FaceSqueezeEditorProps {
+    onClose: () => void;
+}
+export declare function FaceSqueezeEditor({ onClose }: FaceSqueezeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/FaceSqueezeEditor.js

@@ -0,0 +1,553 @@
+"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.FaceSqueezeEditor = exports.FACE_SQUEEZE_LOCAL_MODULE = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * WgpuFaceSqueezeEditor — R3F/Three.js port of FaceSqueezeEditor.
+ *
+ * Same gesture zones, spring physics, idle emotions, lip sync, and sound
+ * as the Filament version. Only the render scaffolding changes:
+ *
+ *   FilamentScene + FilamentView + renderableManager.setMorphWeights
+ *   → @react-three/fiber Canvas + mesh.morphTargetInfluences[]
+ *
+ * Drop-in replacement: same FaceSqueezeEditorProps interface.
+ * The .web.tsx stub is shared — import from FaceSqueezeEditor.web.tsx.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const native_1 = require("@react-three/fiber/native");
+const native_2 = require("@react-three/drei/native");
+const THREE = __importStar(require("three"));
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const Haptics = __importStar(require("expo-haptics"));
+const expo_audio_1 = require("expo-audio");
+const expo_asset_1 = require("expo-asset");
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+exports.FACE_SQUEEZE_LOCAL_MODULE = require('../assets/face-squeeze-local.glb');
+// ---------------------------------------------------------------------------
+// Constants (identical to Filament version)
+// ---------------------------------------------------------------------------
+const SPRING_DURATION_MS = 300;
+const EMOTION_HOLD_MS = 900;
+const IDLE_EMOTION_INTERVAL_MS = 30000;
+const INITIAL_IDLE_EMOTION_DELAY_MS = 1200;
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const SOUND_OWIE = require('./sounds/owie.wav');
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const SOUND_STOP = require('./sounds/stop.wav');
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const SOUND_HAHA = require('./sounds/haha.wav');
+const REACTION_SOUNDS = [
+    SOUND_OWIE,
+    SOUND_STOP,
+    SOUND_HAHA,
+];
+const EMOTION_PRESETS = {
+    owie: {
+        eyeBlinkLeft: 1.0, eyeBlinkRight: 1.0,
+        eyeSquintLeft: 0.9, eyeSquintRight: 0.9,
+        browDownLeft: 0.8, browDownRight: 0.8,
+        browInnerUp: 0.6,
+        noseSneerLeft: 0.7, noseSneerRight: 0.7,
+        jawOpen: 0.35,
+        mouthStretchLeft: 0.6, mouthStretchRight: 0.6,
+    },
+    happy: {
+        mouthSmileLeft: 0.85, mouthSmileRight: 0.85,
+        cheekSquintLeft: 0.6, cheekSquintRight: 0.6,
+        mouthDimpleLeft: 0.4, mouthDimpleRight: 0.4,
+    },
+    surprised: {
+        eyeWideLeft: 0.9, eyeWideRight: 0.9,
+        browInnerUp: 0.8,
+        browOuterUpLeft: 0.7, browOuterUpRight: 0.7,
+        jawOpen: 0.4, mouthFunnel: 0.3,
+    },
+    angry: {
+        browDownLeft: 0.9, browDownRight: 0.9,
+        noseSneerLeft: 0.7, noseSneerRight: 0.7,
+        eyeSquintLeft: 0.6, eyeSquintRight: 0.6,
+        mouthPressLeft: 0.5, mouthPressRight: 0.5,
+    },
+    smirk: {
+        mouthSmileLeft: 0.9, mouthSmileRight: 0.1,
+        cheekSquintLeft: 0.5, mouthDimpleLeft: 0.35,
+    },
+    sad: {
+        browInnerUp: 0.9,
+        browDownLeft: 0.3, browDownRight: 0.3,
+        mouthFrownLeft: 0.8, mouthFrownRight: 0.8,
+        mouthPressLeft: 0.3, mouthPressRight: 0.3,
+        eyeLookDownLeft: 0.5, eyeLookDownRight: 0.5,
+    },
+    disgust: {
+        noseSneerLeft: 0.9, noseSneerRight: 0.9,
+        browDownLeft: 0.7, browDownRight: 0.7,
+        mouthShrugUpper: 0.6, mouthShrugLower: 0.4,
+        mouthLeft: 0.3,
+        eyeSquintLeft: 0.4, eyeSquintRight: 0.4,
+    },
+    wink: {
+        eyeBlinkLeft: 1.0,
+        mouthSmileLeft: 0.5, mouthSmileRight: 0.3,
+        cheekSquintLeft: 0.4,
+    },
+    sleepy: {
+        eyeBlinkLeft: 0.7, eyeBlinkRight: 0.7,
+        browDownLeft: 0.4, browDownRight: 0.4,
+        mouthShrugLower: 0.3, jawOpen: 0.15,
+    },
+    contempt: {
+        mouthSmileLeft: 0.6, mouthPressRight: 0.5,
+        mouthStretchRight: 0.3, browDownRight: 0.4,
+        eyeSquintRight: 0.3,
+    },
+};
+const IDLE_EMOTIONS = [
+    { key: 'happy', weight: 5 },
+    { key: 'surprised', weight: 2 },
+    { key: 'smirk', weight: 2 },
+    { key: 'sad', weight: 1 },
+    { key: 'wink', weight: 2 },
+    { key: 'sleepy', weight: 1 },
+    { key: 'contempt', weight: 1 },
+];
+function pickIdleEmotion() {
+    const total = IDLE_EMOTIONS.reduce((s, e) => s + e.weight, 0);
+    let r = Math.random() * total;
+    for (const e of IDLE_EMOTIONS) {
+        r -= e.weight;
+        if (r <= 0)
+            return e.key;
+    }
+    return IDLE_EMOTIONS[0].key;
+}
+// ---------------------------------------------------------------------------
+// Inner R3F scene — runs inside Canvas
+// ---------------------------------------------------------------------------
+function AvatarScene({ uri, morphState, onReady, }) {
+    const { camera } = (0, native_1.useThree)();
+    const gltf = (0, native_2.useGLTF)(uri);
+    const readyFiredRef = (0, react_1.useRef)(false);
+    // Position camera to match Filament version
+    (0, react_1.useLayoutEffect)(() => {
+        if (!(camera instanceof THREE.PerspectiveCamera))
+            return;
+        camera.fov = 34;
+        camera.position.set(0, 1.55, 1.05);
+        camera.lookAt(0, 1.55, 0);
+        camera.updateProjectionMatrix();
+    }, [camera]);
+    // Find best mesh and build morph index
+    (0, react_1.useEffect)(() => {
+        if (!gltf?.scene)
+            return;
+        let best = 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;
+                best = node;
+            }
+        });
+        if (!best)
+            return;
+        const mesh = best;
+        morphState.current.mesh = mesh;
+        const idx = new Map();
+        for (const [name, i] of Object.entries(mesh.morphTargetDictionary ?? {})) {
+            idx.set(name, i);
+            idx.set(name.toLowerCase(), i);
+        }
+        morphState.current.index = idx;
+        if (!readyFiredRef.current) {
+            readyFiredRef.current = true;
+            onReady();
+        }
+    }, [gltf, morphState, onReady]);
+    // Apply morphState.weights to mesh every frame
+    (0, native_1.useFrame)(() => {
+        const { mesh, weights, index } = morphState.current;
+        if (!mesh?.morphTargetInfluences)
+            return;
+        for (const [name, w] of Object.entries(weights)) {
+            const i = index.get(name) ?? index.get(name.toLowerCase());
+            if (i !== undefined)
+                mesh.morphTargetInfluences[i] = w;
+        }
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("ambientLight", { intensity: 0.65 }), (0, jsx_runtime_1.jsx)("directionalLight", { position: [1, 3, 2], intensity: 1.3 }), (0, jsx_runtime_1.jsx)("primitive", { object: gltf.scene })] }));
+}
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+function FaceSqueezeEditor({ onClose }) {
+    const [localUri, setLocalUri] = (0, react_1.useState)(null);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const asset = expo_asset_1.Asset.fromModule(exports.FACE_SQUEEZE_LOCAL_MODULE);
+                await asset.downloadAsync();
+                const uri = asset.localUri ?? asset.uri;
+                if (!cancelled && uri)
+                    setLocalUri(uri);
+            }
+            catch (e) {
+                console.error('[WgpuFaceSqueezeEditor] Failed to load local GLB:', e);
+            }
+        })();
+        return () => { cancelled = true; };
+    }, []);
+    // Shared morph state — mutated directly, never triggers re-render
+    const morphState = (0, react_1.useRef)({
+        weights: {},
+        index: new Map(),
+        mesh: null,
+    });
+    // ---- Audio ----
+    const reactionSoundIdx = (0, react_1.useRef)(0);
+    const player = (0, expo_audio_1.useAudioPlayer)(REACTION_SOUNDS[0]);
+    // ---- Timers ----
+    const springRef = (0, react_1.useRef)(null);
+    const emotionHoldTimerRef = (0, react_1.useRef)(null);
+    const idleEmotionTimerRef = (0, react_1.useRef)(null);
+    const lipSyncIntervalRef = (0, react_1.useRef)(null);
+    // ---- View geometry (for gesture zone math) ----
+    const viewSize = (0, react_1.useRef)({ width: 1, height: 1 });
+    const viewWidthSv = (0, react_native_reanimated_1.useSharedValue)(1);
+    const viewHeightSv = (0, react_native_reanimated_1.useSharedValue)(1);
+    const touchStartXSv = (0, react_native_reanimated_1.useSharedValue)(0);
+    const touchStartYSv = (0, react_native_reanimated_1.useSharedValue)(0);
+    const touchZoneSv = (0, react_native_reanimated_1.useSharedValue)('cheek_left');
+    const lastPanUpdateTsSv = (0, react_native_reanimated_1.useSharedValue)(0);
+    const onLayout = (0, react_1.useCallback)((e) => {
+        const w = Math.max(1, e.nativeEvent.layout.width);
+        const h = Math.max(1, e.nativeEvent.layout.height);
+        viewSize.current = { width: w, height: h };
+        viewWidthSv.value = w;
+        viewHeightSv.value = h;
+    }, [viewHeightSv, viewWidthSv]);
+    // ---- Weight helpers ----
+    const applyWeights = (0, react_1.useCallback)((targets) => {
+        for (const [name, w] of Object.entries(targets)) {
+            morphState.current.weights[name] = Math.max(0, Math.min(1, w));
+        }
+    }, []);
+    const stopSpring = (0, react_1.useCallback)(() => {
+        if (springRef.current !== null) {
+            cancelAnimationFrame(springRef.current);
+            springRef.current = null;
+        }
+    }, []);
+    const springToZero = (0, react_1.useCallback)(() => {
+        stopSpring();
+        const snapshot = { ...morphState.current.weights };
+        const startTime = Date.now();
+        const tick = () => {
+            const t = Math.min(1, (Date.now() - startTime) / SPRING_DURATION_MS);
+            const eased = 1 - Math.pow(1 - t, 3);
+            for (const name of Object.keys(snapshot)) {
+                morphState.current.weights[name] = snapshot[name] * (1 - eased);
+            }
+            if (t >= 1) {
+                springRef.current = null;
+                morphState.current.weights = {};
+                return;
+            }
+            springRef.current = requestAnimationFrame(tick);
+        };
+        springRef.current = requestAnimationFrame(tick);
+    }, [stopSpring]);
+    const playEmotionBurst = (0, react_1.useCallback)((emotionKey) => {
+        const preset = EMOTION_PRESETS[emotionKey];
+        if (!preset)
+            return;
+        if (emotionHoldTimerRef.current !== null) {
+            clearTimeout(emotionHoldTimerRef.current);
+            emotionHoldTimerRef.current = null;
+        }
+        stopSpring();
+        applyWeights(preset);
+        emotionHoldTimerRef.current = setTimeout(() => {
+            emotionHoldTimerRef.current = null;
+            springToZero();
+        }, EMOTION_HOLD_MS);
+    }, [applyWeights, springToZero, stopSpring]);
+    const stopLipSync = (0, react_1.useCallback)(() => {
+        if (lipSyncIntervalRef.current !== null) {
+            clearInterval(lipSyncIntervalRef.current);
+            lipSyncIntervalRef.current = null;
+        }
+        applyWeights({ jawOpen: 0, mouthFunnel: 0, mouthPucker: 0,
+            mouthUpperUpLeft: 0, mouthUpperUpRight: 0,
+            mouthLowerDownLeft: 0, mouthLowerDownRight: 0,
+            mouthShrugLower: 0, mouthShrugUpper: 0 });
+    }, [applyWeights]);
+    const startLipSync = (0, react_1.useCallback)((durationMs) => {
+        if (lipSyncIntervalRef.current !== null)
+            clearInterval(lipSyncIntervalRef.current);
+        const startTime = Date.now();
+        const TICK_MS = 60;
+        lipSyncIntervalRef.current = setInterval(() => {
+            const elapsed = Date.now() - startTime;
+            if (elapsed >= durationMs) {
+                stopLipSync();
+                return;
+            }
+            const fadeIn = Math.min(1, elapsed / 80);
+            const fadeOut = Math.min(1, (durationMs - elapsed) / 150);
+            const envelope = Math.min(fadeIn, fadeOut);
+            const t = elapsed / 1000;
+            const jaw = envelope * (0.45 + 0.35 * Math.abs(Math.sin(t * 9.5 + Math.random() * 0.3)));
+            const funnel = envelope * Math.max(0, Math.sin(t * 7.2) * 0.5);
+            const shrug = envelope * Math.max(0, Math.sin(t * 5.8 + 1.2) * 0.35);
+            applyWeights({
+                jawOpen: jaw, mouthFunnel: funnel,
+                mouthShrugLower: shrug, mouthShrugUpper: shrug * 0.6,
+                mouthLowerDownLeft: jaw * 0.6, mouthLowerDownRight: jaw * 0.6,
+                mouthUpperUpLeft: jaw * 0.35, mouthUpperUpRight: jaw * 0.35,
+            });
+        }, TICK_MS);
+    }, [applyWeights, stopLipSync]);
+    const playReaction = (0, react_1.useCallback)((durationMs = 1400) => {
+        const idx = reactionSoundIdx.current % REACTION_SOUNDS.length;
+        reactionSoundIdx.current += 1;
+        try {
+            player.replace(REACTION_SOUNDS[idx]);
+            player.play();
+        }
+        catch { /* ignore */ }
+        startLipSync(durationMs);
+    }, [player, startLipSync]);
+    // Cleanup
+    (0, react_1.useEffect)(() => () => {
+        if (springRef.current !== null)
+            cancelAnimationFrame(springRef.current);
+        if (emotionHoldTimerRef.current !== null)
+            clearTimeout(emotionHoldTimerRef.current);
+        if (idleEmotionTimerRef.current !== null)
+            clearInterval(idleEmotionTimerRef.current);
+        if (lipSyncIntervalRef.current !== null)
+            clearInterval(lipSyncIntervalRef.current);
+    }, []);
+    // Idle emotion bursts (start once ready)
+    (0, react_1.useEffect)(() => {
+        if (!isReady)
+            return;
+        const initialKickoff = setTimeout(() => playEmotionBurst(pickIdleEmotion()), INITIAL_IDLE_EMOTION_DELAY_MS);
+        idleEmotionTimerRef.current = setInterval(() => playEmotionBurst(pickIdleEmotion()), IDLE_EMOTION_INTERVAL_MS);
+        return () => {
+            clearTimeout(initialKickoff);
+            if (idleEmotionTimerRef.current !== null)
+                clearInterval(idleEmotionTimerRef.current);
+        };
+    }, [isReady, playEmotionBurst]);
+    // ---- Gesture callbacks (JS side — called via runOnJS) ----
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const onPanBeginJs = (0, react_1.useCallback)((_x, _y, _zone) => {
+        stopSpring();
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    }, [stopSpring]);
+    const onPanUpdateJs = (0, react_1.useCallback)((zone, dx, dy, isLeftHalf) => {
+        const u = {};
+        if (zone === 'brow') {
+            if (dy < 0) {
+                u['browInnerUp'] = Math.abs(dy) * 10;
+                u['browOuterUpLeft'] = Math.abs(dy) * 10;
+                u['browOuterUpRight'] = Math.abs(dy) * 10;
+                u['eyeWideLeft'] = Math.abs(dy) * 8;
+                u['eyeWideRight'] = Math.abs(dy) * 8;
+            }
+            else {
+                u['browDownLeft'] = Math.abs(dy) * 10;
+                u['browDownRight'] = Math.abs(dy) * 10;
+                u['eyeSquintLeft'] = Math.abs(dy) * 8;
+                u['eyeSquintRight'] = Math.abs(dy) * 8;
+                u['noseSneerLeft'] = Math.abs(dy) * 6;
+                u['noseSneerRight'] = Math.abs(dy) * 6;
+            }
+            u['browOuterUpLeft'] = (u['browOuterUpLeft'] ?? 0) + (dx < 0 ? Math.abs(dx) * 8 : 0);
+            u['browOuterUpRight'] = (u['browOuterUpRight'] ?? 0) + (dx > 0 ? Math.abs(dx) * 8 : 0);
+        }
+        else if (zone === 'eye') {
+            u[isLeftHalf ? 'eyeBlinkLeft' : 'eyeBlinkRight'] = dy > 0 ? Math.min(1, Math.abs(dy) * 10) : 0;
+            u[isLeftHalf ? 'eyeSquintLeft' : 'eyeSquintRight'] = dy > 0 ? Math.abs(dy) * 6 : 0;
+            u[isLeftHalf ? 'eyeWideLeft' : 'eyeWideRight'] = dy < 0 ? Math.abs(dy) * 8 : 0;
+            u[isLeftHalf ? 'eyeLookOutLeft' : 'eyeLookInRight'] = dx < 0 ? Math.abs(dx) * 7 : 0;
+            u[isLeftHalf ? 'eyeLookInLeft' : 'eyeLookOutRight'] = dx > 0 ? Math.abs(dx) * 7 : 0;
+            u[isLeftHalf ? 'eyeLookUpLeft' : 'eyeLookUpRight'] = dy < 0 ? Math.abs(dy) * 5 : 0;
+            u[isLeftHalf ? 'eyeLookDownLeft' : 'eyeLookDownRight'] = dy > 0 ? Math.abs(dy) * 5 : 0;
+        }
+        else if (zone === 'cheek_left') {
+            u['cheekPuff'] = Math.abs(dx) * 6;
+            u['cheekSquintLeft'] = Math.abs(dy) * 6;
+            u['cheekSquintRight'] = 0;
+            u['mouthSmileLeft'] = dy < 0 ? Math.abs(dy) * 5 : 0;
+            u['mouthDimpleLeft'] = dy < 0 ? Math.abs(dy) * 4 : 0;
+            u['mouthStretchLeft'] = dy > 0 ? Math.abs(dy) * 5 : 0;
+            u['mouthFrownLeft'] = dy > 0 ? Math.abs(dy) * 4 : 0;
+            u['mouthPressLeft'] = dy > 0 ? Math.abs(dy) * 3 : 0;
+        }
+        else if (zone === 'cheek_right') {
+            u['cheekPuff'] = Math.abs(dx) * 6;
+            u['cheekSquintRight'] = Math.abs(dy) * 6;
+            u['cheekSquintLeft'] = 0;
+            u['mouthSmileRight'] = dy < 0 ? Math.abs(dy) * 5 : 0;
+            u['mouthDimpleRight'] = dy < 0 ? Math.abs(dy) * 4 : 0;
+            u['mouthStretchRight'] = dy > 0 ? Math.abs(dy) * 5 : 0;
+            u['mouthFrownRight'] = dy > 0 ? Math.abs(dy) * 4 : 0;
+            u['mouthPressRight'] = dy > 0 ? Math.abs(dy) * 3 : 0;
+        }
+        else if (zone === 'jaw') {
+            u['jawOpen'] = dy > 0 ? Math.abs(dy) * 10 : 0;
+            u['tongueOut'] = dy > 0 ? Math.max(0, Math.abs(dy) * 10 - 0.7) : 0;
+            u['mouthLowerDownLeft'] = dy > 0 ? Math.abs(dy) * 6 : 0;
+            u['mouthLowerDownRight'] = dy > 0 ? Math.abs(dy) * 6 : 0;
+            u['mouthUpperUpLeft'] = dy > 0 ? Math.abs(dy) * 4 : 0;
+            u['mouthUpperUpRight'] = dy > 0 ? Math.abs(dy) * 4 : 0;
+            u['mouthPressLeft'] = dy < 0 ? Math.abs(dy) * 6 : 0;
+            u['mouthPressRight'] = dy < 0 ? Math.abs(dy) * 6 : 0;
+            u['jawLeft'] = dx < 0 ? Math.abs(dx) * 8 : 0;
+            u['jawRight'] = dx > 0 ? Math.abs(dx) * 8 : 0;
+            u['jawForward'] = Math.abs(dx) * 4;
+            u['mouthLeft'] = dx < 0 ? Math.abs(dx) * 5 : 0;
+            u['mouthRight'] = dx > 0 ? Math.abs(dx) * 5 : 0;
+        }
+        applyWeights(u);
+    }, [applyWeights]);
+    const onPanEndJs = (0, react_1.useCallback)(() => {
+        if (emotionHoldTimerRef.current !== null)
+            return;
+        springToZero();
+    }, [springToZero]);
+    const onPinchBeginJs = (0, react_1.useCallback)(() => {
+        stopSpring();
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    }, [stopSpring]);
+    const onPinchUpdateJs = (0, react_1.useCallback)((scale, delta) => {
+        if (scale < 1) {
+            applyWeights({ mouthPucker: delta * 2, mouthFunnel: 0, mouthRollLower: delta * 1.2, mouthRollUpper: delta * 1.2 });
+        }
+        else {
+            applyWeights({ mouthFunnel: delta * 2, mouthPucker: 0, mouthShrugLower: delta * 0.8, mouthShrugUpper: delta * 0.8, mouthRollLower: 0, mouthRollUpper: 0 });
+        }
+    }, [applyWeights]);
+    const onPinchEndJs = (0, react_1.useCallback)(() => {
+        if (emotionHoldTimerRef.current !== null)
+            return;
+        springToZero();
+    }, [springToZero]);
+    const onEyeTapJs = (0, react_1.useCallback)((x, y) => {
+        const relY = y / Math.max(1, viewSize.current.height);
+        if (relY < 0.16 || relY > 0.52)
+            return;
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+        playReaction();
+        playEmotionBurst('owie');
+    }, [playEmotionBurst, playReaction]);
+    // ---- Gestures ----
+    const panGesture = react_native_gesture_handler_1.Gesture.Pan()
+        .minDistance(0)
+        .onBegin((e) => {
+        'worklet';
+        touchStartXSv.value = e.x;
+        touchStartYSv.value = e.y;
+        const relY = e.y / Math.max(1, viewHeightSv.value);
+        let zone;
+        if (relY < 0.20)
+            zone = 'brow';
+        else if (relY < 0.38)
+            zone = 'eye';
+        else if (relY > 0.72)
+            zone = 'jaw';
+        else
+            zone = e.x < viewWidthSv.value / 2 ? 'cheek_left' : 'cheek_right';
+        touchZoneSv.value = zone;
+        (0, react_native_reanimated_1.runOnJS)(onPanBeginJs)(e.x, e.y, zone);
+    })
+        .onUpdate((e) => {
+        'worklet';
+        const now = Date.now();
+        if (now - lastPanUpdateTsSv.value < 33)
+            return;
+        lastPanUpdateTsSv.value = now;
+        const w = Math.max(1, viewWidthSv.value);
+        const h = Math.max(1, viewHeightSv.value);
+        const dx = (e.x - touchStartXSv.value) / w;
+        const dy = (e.y - touchStartYSv.value) / h;
+        (0, react_native_reanimated_1.runOnJS)(onPanUpdateJs)(touchZoneSv.value, dx, dy, touchStartXSv.value < w / 2);
+    })
+        .onEnd(() => {
+        'worklet';
+        (0, react_native_reanimated_1.runOnJS)(onPanEndJs)();
+    });
+    const pinchGesture = react_native_gesture_handler_1.Gesture.Pinch()
+        .onBegin(() => {
+        'worklet';
+        (0, react_native_reanimated_1.runOnJS)(onPinchBeginJs)();
+    })
+        .onUpdate((e) => {
+        'worklet';
+        (0, react_native_reanimated_1.runOnJS)(onPinchUpdateJs)(e.scale, Math.abs(1 - e.scale));
+    })
+        .onEnd(() => {
+        'worklet';
+        (0, react_native_reanimated_1.runOnJS)(onPinchEndJs)();
+    });
+    const tapGesture = react_native_gesture_handler_1.Gesture.Tap()
+        .onEnd((e, success) => {
+        'worklet';
+        if (success)
+            (0, react_native_reanimated_1.runOnJS)(onEyeTapJs)(e.x, e.y);
+    });
+    const composed = react_native_gesture_handler_1.Gesture.Simultaneous(panGesture, pinchGesture, tapGesture);
+    const handleReady = (0, react_1.useCallback)(() => setIsReady(true), []);
+    return ((0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureHandlerRootView, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.scene, children: localUri ? ((0, jsx_runtime_1.jsx)(native_1.Canvas, { style: react_native_1.StyleSheet.absoluteFill, camera: { fov: 34, position: [0, 1.55, 1.05], near: 0.01, far: 50 }, gl: { antialias: true, alpha: false }, onCreated: ({ gl }) => gl.setClearColor(new THREE.Color('#0a0a0a')), children: (0, jsx_runtime_1.jsx)(AvatarScene, { uri: localUri, morphState: morphState, onReady: handleReady }) })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.loading, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingText, children: "Loading face\u2026" }) })) }), (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: composed, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: react_native_1.StyleSheet.absoluteFill, onLayout: onLayout, collapsable: false }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.closeBtn, onPress: onClose, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.closeBtnText, children: "\u2715  Done squeezing" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.hint, children: "Drag to stretch \u00B7 Pinch lips \u00B7 Poke an eye \uD83D\uDC41" })] }) }));
+}
+exports.FaceSqueezeEditor = FaceSqueezeEditor;
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1, backgroundColor: '#0a0a0a' },
+    scene: { flex: 1 },
+    loading: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    loadingText: { color: '#97a3b5', fontSize: 14 },
+    closeBtn: {
+        position: 'absolute', top: 52, right: 16,
+        backgroundColor: '#6c63ff', borderRadius: 20,
+        paddingHorizontal: 16, paddingVertical: 8,
+    },
+    closeBtnText: { color: '#fff', fontWeight: '700', fontSize: 14 },
+    hint: {
+        position: 'absolute', bottom: 40, alignSelf: 'center',
+        color: '#97a3b5', fontSize: 13,
+    },
+});

package/dist/editor/FaceSqueezeEditor.web.d.ts

@@ -0,0 +1,6 @@
+export declare const FACE_SQUEEZE_LOCAL_MODULE: number;
+export interface FaceSqueezeEditorProps {
+    onClose: () => void;
+}
+export declare function FaceSqueezeEditor({ onClose }: FaceSqueezeEditorProps): import("react/jsx-runtime").JSX.Element;
+export default FaceSqueezeEditor;

package/dist/editor/FaceSqueezeEditor.web.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FaceSqueezeEditor = exports.FACE_SQUEEZE_LOCAL_MODULE = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+exports.FACE_SQUEEZE_LOCAL_MODULE = require('../assets/face-squeeze-local.glb');
+function FaceSqueezeEditor({ onClose }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.container, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.card, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, children: "Face squeeze editor is mobile-only." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.subtitle, children: "This placeholder keeps web builds safe while preserving native functionality." }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.closeButton, onPress: onClose, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.closeButtonText, children: "Close" }) })] }) }));
+}
+exports.FaceSqueezeEditor = FaceSqueezeEditor;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#0f1115",
+        padding: 20,
+    },
+    card: {
+        width: "100%",
+        maxWidth: 460,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: "#2d3340",
+        backgroundColor: "#171b23",
+        padding: 16,
+        gap: 10,
+    },
+    title: {
+        color: "#f1f4f8",
+        fontSize: 18,
+        fontWeight: "700",
+    },
+    subtitle: {
+        color: "#98a1b3",
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    closeButton: {
+        marginTop: 6,
+        alignSelf: "flex-start",
+        borderRadius: 8,
+        backgroundColor: "#2e8f5b",
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    closeButtonText: {
+        color: "#ffffff",
+        fontSize: 14,
+        fontWeight: "600",
+    },
+});
+exports.default = FaceSqueezeEditor;

package/dist/editor/index.d.ts

@@ -3,7 +3,8 @@ export { AvatarEditor } from './AvatarEditor';
 export { AvatarModel } from './AvatarModel';
 export { RigidAccessory } from './RigidAccessory';
 export { SkinnedClothing } from './SkinnedClothing';
+export { FaceSqueezeEditor, FACE_SQUEEZE_LOCAL_MODULE } from './FaceSqueezeEditor';
 export { studioTheme, withAlpha } from './studioTheme';
 export { useBoneSnap, findNearestBone, getWorldPositionForBone, getWorldPositionForPlacement, snapPlacementToNearestBone, HUMANOID_BONES } from './boneSnap';
-export type { AvatarEditorProps, AssetPlacement, EquippedAsset } from './types';
+export type { AvatarEditorProps, AssetPlacement, EquippedAsset, FaceSqueezeEditorProps } from './types';
 export type { BoneSnapResult, HumanoidBone } from './boneSnap';

package/dist/editor/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HUMANOID_BONES = exports.snapPlacementToNearestBone = exports.getWorldPositionForPlacement = exports.getWorldPositionForBone = exports.findNearestBone = exports.useBoneSnap = exports.withAlpha = exports.studioTheme = exports.SkinnedClothing = exports.RigidAccessory = exports.AvatarModel = exports.AvatarEditor = exports.AvatarCanvas = void 0;
+exports.HUMANOID_BONES = exports.snapPlacementToNearestBone = exports.getWorldPositionForPlacement = exports.getWorldPositionForBone = exports.findNearestBone = exports.useBoneSnap = exports.withAlpha = exports.studioTheme = exports.FACE_SQUEEZE_LOCAL_MODULE = exports.FaceSqueezeEditor = exports.SkinnedClothing = exports.RigidAccessory = exports.AvatarModel = exports.AvatarEditor = exports.AvatarCanvas = void 0;
 var AvatarCanvas_1 = require("./AvatarCanvas");
 Object.defineProperty(exports, "AvatarCanvas", { enumerable: true, get: function () { return AvatarCanvas_1.AvatarCanvas; } });
 var AvatarEditor_1 = require("./AvatarEditor");
@@ -11,6 +11,9 @@ var RigidAccessory_1 = require("./RigidAccessory");
 Object.defineProperty(exports, "RigidAccessory", { enumerable: true, get: function () { return RigidAccessory_1.RigidAccessory; } });
 var SkinnedClothing_1 = require("./SkinnedClothing");
 Object.defineProperty(exports, "SkinnedClothing", { enumerable: true, get: function () { return SkinnedClothing_1.SkinnedClothing; } });
+var FaceSqueezeEditor_1 = require("./FaceSqueezeEditor");
+Object.defineProperty(exports, "FaceSqueezeEditor", { enumerable: true, get: function () { return FaceSqueezeEditor_1.FaceSqueezeEditor; } });
+Object.defineProperty(exports, "FACE_SQUEEZE_LOCAL_MODULE", { enumerable: true, get: function () { return FaceSqueezeEditor_1.FACE_SQUEEZE_LOCAL_MODULE; } });
 var studioTheme_1 = require("./studioTheme");
 Object.defineProperty(exports, "studioTheme", { enumerable: true, get: function () { return studioTheme_1.studioTheme; } });
 Object.defineProperty(exports, "withAlpha", { enumerable: true, get: function () { return studioTheme_1.withAlpha; } });

package/dist/editor/types.d.ts

@@ -39,3 +39,6 @@ export interface AvatarEditorProps {
     onDone?: () => void;
     skinColor?: string;
 }
+export interface FaceSqueezeEditorProps {
+    onClose: () => void;
+}

package/dist/html.d.ts

@@ -15,5 +15,10 @@ export type AvatarConfig = {
      * Example: "https://studio.sitebay.org/vendor"
      */
     vendorBaseUrl?: string | null;
+    /**
+     * URL to the DRACO decoder WASM/JS folder.
+     * Defaults to gstatic's v1.5.6 CDN.
+     */
+    dracoDecoderUrl?: string | null;
 };
 export declare function buildAvatarHtml(config: AvatarConfig): string;

package/dist/html.js

@@ -20,6 +20,7 @@ function buildAvatarHtml(config) {
     const headAudioUrl = v ? `${v}/headaudio.min.mjs` : 'https://cdn.jsdelivr.net/gh/met4citizen/HeadAudio@v0.1.0-alpha/dist/headaudio.min.mjs';
     const headWorkletUrl = v ? `${v}/headworklet.min.mjs` : 'https://cdn.jsdelivr.net/gh/met4citizen/HeadAudio@v0.1.0-alpha/dist/headworklet.min.mjs';
     const headModelUrl = v ? `${v}/model-en-mixed.bin` : 'https://cdn.jsdelivr.net/gh/met4citizen/HeadAudio@v0.1.0-alpha/dist/model-en-mixed.bin';
+    const dracoUrl = config.dracoDecoderUrl ?? (v ? `${v}/draco/` : 'https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
     return `
 <!DOCTYPE html>
 <html>
@@ -40,25 +41,26 @@ function buildAvatarHtml(config) {
 }
 </script>
 <script>
-window.ReactNativeWebView?.postMessage(
+function rnPost(d) { window.ReactNativeWebView && window.ReactNativeWebView.postMessage(d); }
+rnPost(
   JSON.stringify({ type: 'log', message: '[bootstrap] inline script start' })
 );
 function postBootstrapError(kind, message) {
-  window.ReactNativeWebView?.postMessage(
+  rnPost(
     JSON.stringify({ type: 'error', message: '[' + kind + '] ' + String(message || 'Unknown error') })
   );
 }
 document.addEventListener('DOMContentLoaded', function() {
-  window.ReactNativeWebView?.postMessage(
+  rnPost(
     JSON.stringify({ type: 'log', message: '[bootstrap] DOMContentLoaded' })
   );
 });
 window.addEventListener('error', function(event) {
-  postBootstrapError('window.error', event?.message || event?.error?.message || 'Script error');
+  postBootstrapError('window.error', (event && event.message) || (event && event.error && event.error.message) || 'Script error');
 });
 window.addEventListener('unhandledrejection', function(event) {
-  const reason = event?.reason;
-  postBootstrapError('unhandledrejection', reason?.message || reason || 'Unhandled promise rejection');
+  const reason = event && event.reason;
+  postBootstrapError('unhandledrejection', (reason && reason.message) || reason || 'Unhandled promise rejection');
 });
 </script>
 </head>
@@ -66,10 +68,11 @@ window.addEventListener('unhandledrejection', function(event) {
 <div id="avatar"></div>
 <script type="module">
 (async function() {
-window.ReactNativeWebView?.postMessage(
+rnPost(
   JSON.stringify({ type: 'log', message: '[module] script start' })
 );
 const AUTH_TOKEN = ${JSON.stringify(config.authToken ?? null)};
+const DRACO_URL = ${JSON.stringify(dracoUrl)};
 const TALKING_HEAD_URL = ${JSON.stringify(talkingHeadUrl)};
 const HEAD_AUDIO_URL = ${JSON.stringify(headAudioUrl)};
 const HEAD_AUDIO_WORKLET = ${JSON.stringify(headWorkletUrl)};
@@ -94,11 +97,11 @@ let staticModel = null;
 let initStarted = false;
 
 function log(msg) {
-  window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'log', message: msg }));
+  rnPost(JSON.stringify({ type: 'log', message: msg }));
 }
 
 function emitLoading(stage, progress = null) {
-  window.ReactNativeWebView?.postMessage(
+  rnPost(
     JSON.stringify({ type: 'loading', stage, progress }),
   );
 }
@@ -125,13 +128,13 @@ function applyColorOverrides() {
     mats.forEach((mat) => {
       const name = (mat.name || '').toLowerCase();
       if (HAIR_COLOR && (name.includes('hair') || name.includes('fur'))) {
-        mat.color?.set(HAIR_COLOR);
+        mat.color && mat.color.set(HAIR_COLOR);
       }
       if (SKIN_COLOR && (name.includes('skin') || name.includes('body') || name.includes('face'))) {
-        mat.color?.set(SKIN_COLOR);
+        mat.color && mat.color.set(SKIN_COLOR);
       }
       if (EYE_COLOR && (name.includes('eye') || name.includes('iris'))) {
-        mat.color?.set(EYE_COLOR);
+        mat.color && mat.color.set(EYE_COLOR);
       }
     });
   });
@@ -204,7 +207,7 @@ async function loadStaticFallback(loadedAvatarUrl) {
       applyAccessories(pendingAccessoriesList);
       motionInitFromRoot(staticModel);
       emitLoading('ready', 100);
-      window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'ready' }));
+      rnPost(JSON.stringify({ type: 'ready' }));
 
       window.addEventListener('resize', () => {
         camera.aspect = window.innerWidth / window.innerHeight;
@@ -228,11 +231,11 @@ async function loadStaticFallback(loadedAvatarUrl) {
       }
     }, (err) => {
       log('Fallback Error: ' + err.message);
-      window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'error', message: err.message }));
+      rnPost(JSON.stringify({ type: 'error', message: err.message }));
     });
   } catch (err) {
     log('Fallback setup error: ' + err.message);
-    window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'error', message: err.message }));
+    rnPost(JSON.stringify({ type: 'error', message: err.message }));
   }
 }
 
@@ -299,7 +302,7 @@ async function init() {
       jawMorphCache = null;
       visemeMorphCache = null;
       rhubarbMorphCache = null;
-      head.armature?.traverse((child) => {
+      head.armature && head.armature.traverse(function(child) {
         if (child.isMesh && child.morphTargetDictionary && child.morphTargetInfluences) {
           mouthMeshes.push(child);
         }
@@ -338,17 +341,17 @@ async function init() {
       applyAccessories(pendingAccessoriesList);
       if (head && head.armature) motionInitFromRoot(head.armature);
       emitLoading('ready', 100);
-      window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'ready' }));
+      rnPost(JSON.stringify({ type: 'ready' }));
     }
   } catch (err) {
     initStarted = false; // allow retry on error
     log('Error: ' + err.message);
-    window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'error', message: err.message }));
+    rnPost(JSON.stringify({ type: 'error', message: err.message }));
   }
 }
 
 function startAudioInterception() {
-  if (!head?.audioCtx || !head?.audioSpeechGainNode) return;
+  if (!head || !head.audioCtx || !head.audioSpeechGainNode) return;
   const audioCtx = head.audioCtx;
   const gainNode = head.audioSpeechGainNode;
   const connected = new WeakSet();
@@ -400,14 +403,14 @@ function updateVoiceMood(rawAmplitude) {
     voiceMoodFramesBelow = 0;
     if (voiceMoodCurrent !== 'excited' && voiceMoodFramesAbove >= VOICE_MOOD_FRAMES_REQUIRED) {
       voiceMoodCurrent = 'excited';
-      window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'voiceMood', mood: 'excited' }));
+      rnPost(JSON.stringify({ type: 'voiceMood', mood: 'excited' }));
     }
   } else if (voiceEnergySmoothed < VOICE_ENERGY_NEUTRAL_THRESH) {
     voiceMoodFramesBelow++;
     voiceMoodFramesAbove = 0;
     if (voiceMoodCurrent !== 'neutral' && voiceMoodFramesBelow >= VOICE_MOOD_FRAMES_REQUIRED * 3) {
       voiceMoodCurrent = 'neutral';
-      window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'voiceMood', mood: 'neutral' }));
+      rnPost(JSON.stringify({ type: 'voiceMood', mood: 'neutral' }));
     }
   }
 }
@@ -578,7 +581,7 @@ function clearScheduledVisemes() {
   for (const key of Object.keys(visemeState)) visemeState[key] = 0;
 }
 
-function tickVisemeDecay(deltaSeconds?: number) {
+function tickVisemeDecay(deltaSeconds) {
   if (!visemeMorphCache) return;
 
   const isScheduled = Date.now() < visemeModeUntil;
@@ -614,7 +617,7 @@ function tickVisemeDecay(deltaSeconds?: number) {
       // Use realtime (not newvalue) — newvalue is consumed and cleared after
       // a single frame, so scheduled visemes would vanish immediately.
       // realtime persists until explicitly set to null.
-      if (head?.mtAvatar && e.morphName && head.mtAvatar[e.morphName]) {
+      if (head && head.mtAvatar && e.morphName && head.mtAvatar[e.morphName]) {
         const mt = head.mtAvatar[e.morphName];
         mt.realtime = targetWeight > 0 ? targetWeight : null;
         mt.needsUpdate = true;
@@ -750,7 +753,7 @@ async function ensureThree() {
     const { DRACOLoader } = await import('three/addons/loaders/DRACOLoader.js');
     gltfLoaderInstance = new GLTFLoader();
     const dracoLoader = new DRACOLoader();
-    dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
+    dracoLoader.setDecoderPath(DRACO_URL);
     gltfLoaderInstance.setDRACOLoader(dracoLoader);
   }
 }
@@ -798,7 +801,7 @@ async function applyAccessories(accessoriesList) {
             if (loadedUrl.startsWith('blob:')) URL.revokeObjectURL(loadedUrl);
             log('[ACC] GLB loaded OK for ' + accData.id);
             const model = gltf.scene;
-            const latestData = currentAccessories[accData.id]?.latestData || accData;
+            const latestData = (currentAccessories[accData.id] && currentAccessories[accData.id].latestData) || accData;
             let targetBone = null;
             let prefixCandidate = null;
             root.traverse((child) => {
@@ -1158,7 +1161,7 @@ function onIncomingMessage(event) {
       if (typeof window.playMotion === 'function') {
         window.playMotion(msg.name);
       }
-      window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'avatarState', state: 'motion:' + msg.name }));
+      rnPost(JSON.stringify({ type: 'avatarState', state: 'motion:' + msg.name }));
       log('motion dispatched: ' + msg.name);
     }
   } catch (err) {

package/dist/tts/useDirectVisemeStream.js

@@ -180,7 +180,7 @@ function sleep(ms, signal) {
         const id = setTimeout(resolve, ms);
         signal.addEventListener("abort", () => {
             clearTimeout(id);
-            reject(Object.assign(new Error("AbortError"), { name: "AbortError" }));
+            reject(new DOMException("The operation was aborted", "AbortError"));
         }, { once: true });
     });
 }

package/dist/wgpu/WgpuAvatar.js

@@ -178,6 +178,11 @@ exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, m
         ? avatarUrl : null;
     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;
+    }
     const currentUri = fileResult?.uri ?? null;
     if (lockedUriRef.current === null && currentUri)
         lockedUriRef.current = currentUri;
@@ -232,7 +237,7 @@ exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, m
     (0, react_1.useEffect)(() => () => clearScheduleTimers(), [clearScheduleTimers]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         setMood: (m) => { morphStateRef.current.moodBase = { ...(morphTables_1.MOOD_MORPHS[m] ?? {}) }; },
-        sendAmplitude: (_amplitude) => { },
+        sendAmplitude: () => { },
         sendViseme: (viseme, weight) => {
             const aliases = morphTables_1.VISEME_MORPH_ALIASES[viseme];
             if (!aliases)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "talking-head-studio",
-  "version": "0.4.6",
+  "version": "0.4.9",
   "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",
@@ -103,6 +103,7 @@
     "@react-three/fiber": ">=8",
     "expo": ">=51",
     "expo-asset": ">=10",
+    "expo-audio": ">=0.3",
     "expo-file-system": ">=17",
     "react": ">=18",
     "react-native": ">=0.73",
@@ -126,6 +127,9 @@
     "expo-asset": {
       "optional": true
     },
+    "expo-audio": {
+      "optional": true
+    },
     "expo-file-system": {
       "optional": true
     },