talking-head-studio 0.4.10 → 0.4.12

package/dist/editor/FaceSqueezeEditor.js

@@ -15,15 +15,26 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FaceSqueezeEditor = exports.FACE_SQUEEZE_LOCAL_MODULE = void 0;
+exports.FACE_SQUEEZE_LOCAL_MODULE = void 0;
+exports.FaceSqueezeEditor = FaceSqueezeEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * WgpuFaceSqueezeEditor — R3F/Three.js port of FaceSqueezeEditor.
@@ -37,18 +48,21 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * Drop-in replacement: same FaceSqueezeEditorProps interface.
  * The .web.tsx stub is shared — import from FaceSqueezeEditor.web.tsx.
  */
+require("../wgpu/blobShim");
 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 fiber_1 = require("@react-three/fiber");
 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");
+const avatarUtils_1 = require("../utils/avatarUtils");
+const R3FWebGpuCanvas_1 = require("../wgpu/R3FWebGpuCanvas");
+const patchThreeForRN_1 = require("../wgpu/patchThreeForRN");
+const useNativeGLTF_1 = require("../wgpu/useNativeGLTF");
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 exports.FACE_SQUEEZE_LOCAL_MODULE = require('../assets/face-squeeze-local.glb');
+(0, patchThreeForRN_1.installThreeRNPatches)(false);
+function emitHaptic() {
+    // Optional in the example path.
+}
 // ---------------------------------------------------------------------------
 // Constants (identical to Filament version)
 // ---------------------------------------------------------------------------
@@ -56,17 +70,6 @@ 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,
@@ -147,12 +150,56 @@ function pickIdleEmotion() {
     }
     return IDLE_EMOTIONS[0].key;
 }
+function morphAliases(name) {
+    const out = new Set([name, name.toLowerCase()]);
+    const pairs = [
+        ['Left', '_L'],
+        ['Right', '_R'],
+        ['Left', 'Left'],
+        ['Right', 'Right'],
+        ['left', '_l'],
+        ['right', '_r'],
+    ];
+    for (const [needle, replacement] of pairs) {
+        if (!name.includes(needle))
+            continue;
+        out.add(name.replace(needle, replacement));
+        out.add(name.replace(needle, replacement).toLowerCase());
+        out.add(name.replace(needle, replacement.replace('_', '')));
+        out.add(name.replace(needle, replacement.replace('_', '')).toLowerCase());
+    }
+    if (name.endsWith('Left')) {
+        const stem = name.slice(0, -4);
+        out.add(`${stem}_L`);
+        out.add(`${stem}_l`);
+        out.add(`${stem}L`);
+        out.add(`${stem}Left`);
+    }
+    if (name.endsWith('Right')) {
+        const stem = name.slice(0, -5);
+        out.add(`${stem}_R`);
+        out.add(`${stem}_r`);
+        out.add(`${stem}R`);
+        out.add(`${stem}Right`);
+    }
+    return [...out];
+}
+function resolveMorphIndices(index, name) {
+    const found = new Set();
+    for (const alias of morphAliases(name)) {
+        const i = index.get(alias) ?? index.get(alias.toLowerCase());
+        if (i !== undefined)
+            found.add(i);
+    }
+    return [...found];
+}
 // ---------------------------------------------------------------------------
 // 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 { camera } = (0, fiber_1.useThree)();
+    const { gltf } = (0, useNativeGLTF_1.useNativeGLTF)(uri);
+    const scene = gltf?.scene ?? null;
     const readyFiredRef = (0, react_1.useRef)(false);
     // Position camera to match Filament version
     (0, react_1.useLayoutEffect)(() => {
@@ -165,11 +212,11 @@ function AvatarScene({ uri, morphState, onReady, }) {
     }, [camera]);
     // Find best mesh and build morph index
     (0, react_1.useEffect)(() => {
-        if (!gltf?.scene)
+        if (!scene)
             return;
         let best = null;
         let bestCount = 0;
-        gltf.scene.traverse((node) => {
+        scene.traverse((node) => {
             if (!(node instanceof THREE.Mesh))
                 return;
             const count = Object.keys(node.morphTargetDictionary ?? {}).length;
@@ -192,33 +239,31 @@ function AvatarScene({ uri, morphState, onReady, }) {
             readyFiredRef.current = true;
             onReady();
         }
-    }, [gltf, morphState, onReady]);
+    }, [scene, morphState, onReady]);
     // Apply morphState.weights to mesh every frame
-    (0, native_1.useFrame)(() => {
+    (0, fiber_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)
+            for (const i of resolveMorphIndices(index, name)) {
                 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 })] }));
+    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 }), scene ? (0, jsx_runtime_1.jsx)("primitive", { object: scene }) : null] }));
 }
 // ---------------------------------------------------------------------------
 // Main component
 // ---------------------------------------------------------------------------
-function FaceSqueezeEditor({ onClose }) {
+function FaceSqueezeEditor({ onClose, avatarModule = exports.FACE_SQUEEZE_LOCAL_MODULE, }) {
     const [localUri, setLocalUri] = (0, react_1.useState)(null);
     const [isReady, setIsReady] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         let cancelled = false;
-        (async () => {
+        void (async () => {
             try {
-                const asset = expo_asset_1.Asset.fromModule(exports.FACE_SQUEEZE_LOCAL_MODULE);
-                await asset.downloadAsync();
-                const uri = asset.localUri ?? asset.uri;
+                const uri = await (0, avatarUtils_1.resolveLocalAssetUrl)(avatarModule);
                 if (!cancelled && uri)
                     setLocalUri(uri);
             }
@@ -227,16 +272,13 @@ function FaceSqueezeEditor({ onClose }) {
             }
         })();
         return () => { cancelled = true; };
-    }, []);
+    }, [avatarModule]);
     // 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);
@@ -244,19 +286,17 @@ function FaceSqueezeEditor({ onClose }) {
     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 touchStartRef = (0, react_1.useRef)({ x: 0, y: 0 });
+    const touchZoneRef = (0, react_1.useRef)('cheek_left');
+    const lastPanUpdateTsRef = (0, react_1.useRef)(0);
+    const pinchStartDistanceRef = (0, react_1.useRef)(null);
+    const activeTouchesRef = (0, react_1.useRef)(0);
+    const hasMovedRef = (0, react_1.useRef)(false);
     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)) {
@@ -340,15 +380,8 @@ function FaceSqueezeEditor({ onClose }) {
         }, 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]);
+    }, [startLipSync]);
     // Cleanup
     (0, react_1.useEffect)(() => () => {
         if (springRef.current !== null)
@@ -373,10 +406,9 @@ function FaceSqueezeEditor({ onClose }) {
         };
     }, [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);
+        emitHaptic();
     }, [stopSpring]);
     const onPanUpdateJs = (0, react_1.useCallback)((zone, dx, dy, isLeftHalf) => {
         const u = {};
@@ -452,7 +484,7 @@ function FaceSqueezeEditor({ onClose }) {
     }, [springToZero]);
     const onPinchBeginJs = (0, react_1.useCallback)(() => {
         stopSpring();
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+        emitHaptic();
     }, [stopSpring]);
     const onPinchUpdateJs = (0, react_1.useCallback)((scale, delta) => {
         if (scale < 1) {
@@ -471,83 +503,125 @@ function FaceSqueezeEditor({ onClose }) {
         const relY = y / Math.max(1, viewSize.current.height);
         if (relY < 0.16 || relY > 0.52)
             return;
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+        emitHaptic();
         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;
+    const getZoneForPoint = (0, react_1.useCallback)((x, y) => {
+        const relY = y / Math.max(1, viewSize.current.height);
         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';
+            return 'brow';
+        if (relY < 0.38)
+            return 'eye';
+        if (relY > 0.72)
+            return 'jaw';
+        return x < viewSize.current.width / 2 ? 'cheek_left' : 'cheek_right';
+    }, []);
+    const distanceBetweenTouches = (0, react_1.useCallback)((event) => {
+        const touches = event.nativeEvent.touches;
+        if (touches.length < 2)
+            return null;
+        const [a, b] = [touches[0], touches[1]];
+        const dx = b.pageX - a.pageX;
+        const dy = b.pageY - a.pageY;
+        return Math.hypot(dx, dy);
+    }, []);
+    const handleResponderGrant = (0, react_1.useCallback)((event) => {
+        activeTouchesRef.current = event.nativeEvent.touches.length;
+        hasMovedRef.current = false;
+        if (event.nativeEvent.touches.length >= 2) {
+            pinchStartDistanceRef.current = distanceBetweenTouches(event);
+            onPinchBeginJs();
+            return;
+        }
+        const { locationX: x, locationY: y } = event.nativeEvent;
+        touchStartRef.current = { x, y };
+        touchZoneRef.current = getZoneForPoint(x, y);
+        lastPanUpdateTsRef.current = 0;
+        onPanBeginJs(x, y, touchZoneRef.current);
+    }, [distanceBetweenTouches, getZoneForPoint, onPanBeginJs, onPinchBeginJs]);
+    const handleResponderMove = (0, react_1.useCallback)((event) => {
+        const touchCount = event.nativeEvent.touches.length;
+        activeTouchesRef.current = touchCount;
+        if (touchCount >= 2) {
+            const currentDistance = distanceBetweenTouches(event);
+            const startDistance = pinchStartDistanceRef.current;
+            if (!currentDistance || !startDistance)
+                return;
+            hasMovedRef.current = true;
+            const scale = currentDistance / startDistance;
+            onPinchUpdateJs(scale, Math.abs(1 - scale));
+            return;
+        }
         const now = Date.now();
-        if (now - lastPanUpdateTsSv.value < 33)
+        if (now - lastPanUpdateTsRef.current < 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);
+        lastPanUpdateTsRef.current = now;
+        const { locationX: x, locationY: y } = event.nativeEvent;
+        const w = Math.max(1, viewSize.current.width);
+        const h = Math.max(1, viewSize.current.height);
+        const dx = (x - touchStartRef.current.x) / w;
+        const dy = (y - touchStartRef.current.y) / h;
+        if (Math.abs(dx) > 0.01 || Math.abs(dy) > 0.01)
+            hasMovedRef.current = true;
+        onPanUpdateJs(touchZoneRef.current, dx, dy, touchStartRef.current.x < w / 2);
+    }, [distanceBetweenTouches, onPanUpdateJs, onPinchUpdateJs]);
+    const handleResponderRelease = (0, react_1.useCallback)((event) => {
+        if (activeTouchesRef.current >= 2 || pinchStartDistanceRef.current != null) {
+            pinchStartDistanceRef.current = null;
+            onPinchEndJs();
+        }
+        else {
+            onPanEndJs();
+            if (!hasMovedRef.current) {
+                const { locationX: x, locationY: y } = event.nativeEvent;
+                onEyeTapJs(x, y);
+            }
+        }
+        activeTouchesRef.current = 0;
+        hasMovedRef.current = false;
+    }, [onEyeTapJs, onPanEndJs, onPinchEndJs]);
+    const handleResponderTerminate = (0, react_1.useCallback)(() => {
+        if (pinchStartDistanceRef.current != null || activeTouchesRef.current >= 2) {
+            pinchStartDistanceRef.current = null;
+            onPinchEndJs();
+        }
+        else {
+            onPanEndJs();
+        }
+        activeTouchesRef.current = 0;
+        hasMovedRef.current = false;
+    }, [onPanEndJs, onPinchEndJs]);
     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" })] }) }));
+    const editorCamera = (0, react_1.useMemo)(() => ({
+        fov: 34,
+        position: [0, 1.55, 1.05],
+        near: 0.01,
+        far: 50,
+    }), []);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.scene, children: [localUri ? ((0, jsx_runtime_1.jsx)(R3FWebGpuCanvas_1.R3FWebGpuCanvas, { style: react_native_1.StyleSheet.absoluteFill, camera: editorCamera, clearColor: "#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_1.View, { style: [react_native_1.StyleSheet.absoluteFill, styles.touchOverlay], pointerEvents: "box-only", onLayout: onLayout, collapsable: false, onStartShouldSetResponder: () => true, onStartShouldSetResponderCapture: () => true, onMoveShouldSetResponder: () => true, onMoveShouldSetResponderCapture: () => true, onResponderGrant: handleResponderGrant, onResponderMove: handleResponderMove, onResponderRelease: handleResponderRelease, onResponderTerminate: handleResponderTerminate, onResponderTerminationRequest: () => true })] }), (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 },
+    scene: { flex: 1, position: 'relative' },
+    touchOverlay: {
+        zIndex: 10,
+        elevation: 10,
+        backgroundColor: 'transparent',
+    },
     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,
+        zIndex: 20,
+        elevation: 20,
     },
     closeBtnText: { color: '#fff', fontWeight: '700', fontSize: 14 },
     hint: {
         position: 'absolute', bottom: 40, alignSelf: 'center',
         color: '#97a3b5', fontSize: 13,
+        zIndex: 20,
     },
 });

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

@@ -1,6 +1,8 @@
-export declare const FACE_SQUEEZE_LOCAL_MODULE: number;
+/** Web builds do not bundle the native face-squeeze GLB module. */
+export declare const FACE_SQUEEZE_LOCAL_MODULE: null;
 export interface FaceSqueezeEditorProps {
     onClose: () => void;
+    avatarModule?: unknown;
 }
 export declare function FaceSqueezeEditor({ onClose }: FaceSqueezeEditorProps): import("react/jsx-runtime").JSX.Element;
 export default FaceSqueezeEditor;

package/dist/editor/FaceSqueezeEditor.web.js

@@ -1,54 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FaceSqueezeEditor = exports.FACE_SQUEEZE_LOCAL_MODULE = void 0;
+exports.FACE_SQUEEZE_LOCAL_MODULE = void 0;
+exports.FaceSqueezeEditor = FaceSqueezeEditor;
 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');
+/** Web builds do not bundle the native face-squeeze GLB module. */
+exports.FACE_SQUEEZE_LOCAL_MODULE = null;
 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" }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: styles.container, children: (0, jsx_runtime_1.jsxs)("div", { style: styles.card, children: [(0, jsx_runtime_1.jsx)("h2", { style: styles.title, children: "Face squeeze editor is mobile-only." }), (0, jsx_runtime_1.jsx)("p", { style: styles.subtitle, children: "This placeholder keeps web builds safe while preserving native functionality." }), (0, jsx_runtime_1.jsx)("button", { type: "button", style: styles.closeButton, onClick: onClose, children: "Close" })] }) }));
 }
-exports.FaceSqueezeEditor = FaceSqueezeEditor;
-const styles = react_native_1.StyleSheet.create({
+const styles = {
     container: {
+        alignItems: 'center',
+        backgroundColor: '#0f1115',
+        boxSizing: 'border-box',
+        display: 'flex',
         flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "#0f1115",
+        height: '100%',
+        justifyContent: 'center',
         padding: 20,
+        width: '100%',
     },
     card: {
-        width: "100%",
-        maxWidth: 460,
+        backgroundColor: '#171b23',
+        border: '1px solid #2d3340',
         borderRadius: 12,
-        borderWidth: 1,
-        borderColor: "#2d3340",
-        backgroundColor: "#171b23",
+        boxSizing: 'border-box',
+        maxWidth: 460,
         padding: 16,
-        gap: 10,
+        width: '100%',
     },
     title: {
-        color: "#f1f4f8",
+        color: '#f1f4f8',
         fontSize: 18,
-        fontWeight: "700",
+        fontWeight: 700,
+        margin: 0,
     },
     subtitle: {
-        color: "#98a1b3",
+        color: '#98a1b3',
         fontSize: 14,
-        lineHeight: 20,
+        lineHeight: '20px',
+        margin: '10px 0 0',
     },
     closeButton: {
-        marginTop: 6,
-        alignSelf: "flex-start",
+        backgroundColor: '#2e8f5b',
+        border: 0,
         borderRadius: 8,
-        backgroundColor: "#2e8f5b",
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-    },
-    closeButtonText: {
-        color: "#ffffff",
+        color: '#ffffff',
+        cursor: 'pointer',
         fontSize: 14,
-        fontWeight: "600",
+        fontWeight: 600,
+        marginTop: 16,
+        padding: '8px 12px',
     },
-});
+};
 exports.default = FaceSqueezeEditor;

package/dist/editor/RigidAccessory.js

@@ -1,15 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RigidAccessory = void 0;
+exports.RigidAccessory = RigidAccessory;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
+/* eslint-disable @typescript-eslint/no-explicit-any -- Accessory attachment walks arbitrary GLTF scene nodes from Three.js loader output. */
 const drei_1 = require("@react-three/drei");
 const react_1 = require("react");
 const three_1 = require("three");
 function RigidAccessory({ assetId, url, avatarScene, attachBone, offsetPosition, offsetRotation, scale = 1, isEditing = false, onPlacementChange, }) {
     const { scene } = (0, drei_1.useGLTF)(url);
-    // Clone uniquely for this instance
+    // Clone uniquely for this instance — dispose geometry/materials on replacement or unmount
     const clone = (0, react_1.useMemo)(() => scene.clone(true), [scene]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clone.traverse((obj) => {
+                if (obj instanceof three_1.Mesh) {
+                    obj.geometry?.dispose();
+                    if (Array.isArray(obj.material))
+                        obj.material.forEach((m) => m.dispose());
+                    else
+                        obj.material?.dispose();
+                }
+            });
+        };
+    }, [clone]);
     const [basePos, setBasePos] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!avatarScene)
@@ -44,7 +58,8 @@ function RigidAccessory({ assetId, url, avatarScene, attachBone, offsetPosition,
             clone.rotation.set(...offsetRotation);
         }
         if (scale !== undefined) {
-            clone.scale.set(scale, scale, scale);
+            const s = Math.max(0.001, scale);
+            clone.scale.set(s, s, s);
         }
     }, [basePos, offsetPosition, offsetRotation, scale, clone]);
     const handleDragEnd = () => {
@@ -76,4 +91,3 @@ function RigidAccessory({ assetId, url, avatarScene, attachBone, offsetPosition,
     }
     return (0, jsx_runtime_1.jsx)("primitive", { object: clone });
 }
-exports.RigidAccessory = RigidAccessory;

package/dist/editor/SkinnedClothing.js

@@ -15,17 +15,28 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkinnedClothing = void 0;
+exports.SkinnedClothing = SkinnedClothing;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
+/* eslint-disable @typescript-eslint/no-explicit-any -- SkeletonUtils.clone and GLTF skeleton rebinding expose untyped Three.js internals. */
 const drei_1 = require("@react-three/drei");
 const react_1 = require("react");
 const THREE = __importStar(require("three"));
@@ -113,4 +124,3 @@ function SkinnedClothing({ url, avatarSkeleton }) {
     }, [scene, avatarSkeleton]);
     return (0, jsx_runtime_1.jsx)("group", { ref: groupRef });
 }
-exports.SkinnedClothing = SkinnedClothing;