talking-head-studio 0.4.1 → 0.4.3

package/dist/TalkingHead.d.ts

@@ -25,11 +25,17 @@ export interface TalkingHeadVisemeSchedule {
     /** Matches X-TTS-Request-Id / agent_visemes.requestId */
     requestId?: string;
     /**
-     * Wall-clock ms at which audio playback started.
-     * Anchor this to the moment you observe agent_state: speaking.
-     * Used to skip cues that are already in the past on late delivery.
+     * Wall-clock ms at which the TTS request was fired (agent side).
+     * Used as the scheduling anchor plus AUDIO_PIPELINE_DELAY_MS.
      */
     startedAtMs?: number;
+    /**
+     * Wall-clock ms at which audio actually began playing in the speaker.
+     * When present, used directly as the scheduling anchor with no additional
+     * pipeline offset — more accurate than startedAtMs on fast connections.
+     * Stamp this from the LiveKit onAudioPlaybackStarted callback if available.
+     */
+    audioStartedAtMs?: number;
     durationMs?: number;
     cues: TalkingHeadVisemeCue[];
 }

package/dist/TalkingHeadVisualization.js

@@ -46,10 +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, vendorBaseUrl }, ref) => {
     const avatarRef = (0, react_1.useRef)(null);
-    // On native, Filament ref is wired via callback ref — store it here so
+    // On native, WgpuAvatar ref is wired via callback ref — store it here so
     // scheduleVisemes / sendAmplitude can route to it.
     const wgpuRef = (0, react_1.useRef)(null);
-    // Unified accessor — Filament on native, WebView on web
+    // Unified accessor — WgpuAvatar on native, WebView on web
     const activeAvatar = (0, react_1.useCallback)(() => (wgpuRef.current ?? avatarRef.current), []);
     // Fallback local GLB data URI — resolved once on mount
     const [fallbackUrl, setFallbackUrl] = (0, react_1.useState)(_fallbackDataUri);
@@ -114,7 +114,7 @@ exports.TalkingHeadVisualization = (0, react_1.forwardRef)(({ style, avatarUrl,
             if (lastScheduledVisemeKeyRef.current === scheduleKey)
                 return;
             const av = activeAvatar();
-            // Filament buffers pending schedules internally — no ready gate needed.
+            // WgpuAvatar buffers pending schedules internally — no ready gate needed.
             // WebView (avatarRef) still needs the ready gate.
             if (!av || (!wgpuRef.current && !isAvatarReady)) {
                 pendingVisemeScheduleRef.current = schedule;
@@ -181,7 +181,7 @@ exports.TalkingHeadVisualization = (0, react_1.forwardRef)(({ style, avatarUrl,
         });
         lastScheduledVisemeKeyRef.current = scheduleKey;
     }, [isAvatarReady, onVisemeScheduleApplied, visemeSchedule, activeAvatar]);
-    // On native use Filament — direct morph writes, no WebView bridge.
+    // On native use WgpuAvatar — direct morph writes, no WebView bridge.
     if (react_native_1.Platform.OS !== 'web') {
         return ((0, jsx_runtime_1.jsx)(WgpuAvatar_1.WgpuAvatar, { focalLength: focalLength, ref: (fr) => {
                 wgpuRef.current = fr;

package/dist/editor/AvatarCanvas.d.ts

@@ -1,16 +1,5 @@
-/// <reference types="react" />
-import type { AvatarAppearance } from '../appearance';
-import type { AssetPlacement, EquippedAsset } from './types';
-interface AvatarCanvasProps {
-    avatarUrl: string;
-    appearance?: AvatarAppearance;
-    equipped?: EquippedAsset[];
-    placements?: Record<string, AssetPlacement>;
-    editingAssetId?: string | null;
-    onPlacementChange?: (assetId: string, placement: AssetPlacement) => void;
+import type { AvatarEditorProps } from './types';
+export declare function AvatarCanvas({ avatarUrl, equipped, placements, editingAssetId, activeAssetId, onPlacementChange, onSceneRef, style, className, }: AvatarEditorProps & {
     onSceneRef?: (scene: any) => void;
-    style?: React.CSSProperties;
     className?: string;
-}
-export declare function AvatarCanvas({ avatarUrl, equipped, placements, editingAssetId, onPlacementChange, onSceneRef, style, className, }: AvatarCanvasProps): import("react/jsx-runtime").JSX.Element;
-export {};
+}): import("react/jsx-runtime").JSX.Element;

package/dist/editor/AvatarCanvas.js

@@ -18,7 +18,9 @@ function SceneRefCapture({ onSceneRef }) {
     }, [scene, onSceneRef]);
     return null;
 }
-function AvatarCanvas({ avatarUrl, equipped = [], placements = {}, editingAssetId = null, onPlacementChange, onSceneRef, style, className, }) {
+function AvatarCanvas({ avatarUrl, equipped = [], placements = {}, editingAssetId = null, activeAssetId = null, onPlacementChange, onSceneRef, style, className, }) {
+    // Support both prop names — web consumers use editingAssetId, native uses activeAssetId
+    const editingId = editingAssetId ?? activeAssetId;
     const [skeleton, setSkeleton] = (0, react_1.useState)(null);
     const [avatarScene, setAvatarScene] = (0, react_1.useState)(null);
     const [cameraTarget, setCameraTarget] = (0, react_1.useState)([0, 1, 0]);
@@ -43,12 +45,11 @@ function AvatarCanvas({ avatarUrl, equipped = [], placements = {}, editingAssetI
     ]
         .filter(Boolean)
         .join(' ');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClass, style: style, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 opacity-[0.04] pointer-events-none", style: { backgroundImage: 'linear-gradient(rgba(255,255,255,0.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.3) 1px,transparent 1px)', backgroundSize: '60px 60px' } }), avatarUrl ? ((0, jsx_runtime_1.jsx)(AvatarCanvasErrorBoundary_1.AvatarCanvasErrorBoundary, { children: (0, jsx_runtime_1.jsx)(fiber_1.Canvas, { ref: canvasRef, camera: { position: cameraPosition, fov: 45 }, style: { width: '100%', height: '100%' }, children: (0, jsx_runtime_1.jsxs)(react_1.Suspense, { fallback: null, children: [onSceneRef && (0, jsx_runtime_1.jsx)(SceneRefCapture, { onSceneRef: onSceneRef }), (0, jsx_runtime_1.jsx)("ambientLight", { intensity: 0.6 }), (0, jsx_runtime_1.jsx)("directionalLight", { position: [5, 5, 5], intensity: 0.8 }), (0, jsx_runtime_1.jsx)(drei_1.Environment, { preset: "studio" }), (0, jsx_runtime_1.jsx)(drei_1.OrbitControls, { target: cameraTarget, minDistance: 1, maxDistance: 10, enablePan: false, makeDefault: true, enabled: !editingAssetId }), (0, jsx_runtime_1.jsx)(AvatarModel_1.AvatarModel, { url: avatarUrl, scale: 1, onSkeletonReady: handleSkeletonReady, onBoundsReady: handleBoundsReady }), equippedItems.map((asset) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClass, style: style, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 opacity-[0.04] pointer-events-none", style: { backgroundImage: 'linear-gradient(rgba(255,255,255,0.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.3) 1px,transparent 1px)', backgroundSize: '60px 60px' } }), avatarUrl ? ((0, jsx_runtime_1.jsx)(AvatarCanvasErrorBoundary_1.AvatarCanvasErrorBoundary, { children: (0, jsx_runtime_1.jsx)(fiber_1.Canvas, { ref: canvasRef, camera: { position: cameraPosition, fov: 45 }, style: { width: '100%', height: '100%' }, children: (0, jsx_runtime_1.jsxs)(react_1.Suspense, { fallback: null, children: [onSceneRef && (0, jsx_runtime_1.jsx)(SceneRefCapture, { onSceneRef: onSceneRef }), (0, jsx_runtime_1.jsx)("ambientLight", { intensity: 0.6 }), (0, jsx_runtime_1.jsx)("directionalLight", { position: [5, 5, 5], intensity: 0.8 }), (0, jsx_runtime_1.jsx)(drei_1.Environment, { preset: "studio" }), (0, jsx_runtime_1.jsx)(drei_1.OrbitControls, { target: cameraTarget, minDistance: 1, maxDistance: 10, enablePan: false, makeDefault: true, enabled: !editingId }), (0, jsx_runtime_1.jsx)(AvatarModel_1.AvatarModel, { url: avatarUrl, scale: 1, onSkeletonReady: handleSkeletonReady, onBoundsReady: handleBoundsReady }), equippedItems.map((asset) => {
                                 if (!asset)
                                     return null;
                                 const llmPlacement = placements[asset.id];
-                                const isEditing = editingAssetId === asset.id;
-                                // If a placement is provided, always render as rigid attachment
+                                const isEditing = editingId === asset.id;
                                 if (llmPlacement) {
                                     const bone = llmPlacement.bone ?? asset.attach_bone;
                                     if (!bone)

package/dist/editor/AvatarEditor.d.ts

@@ -0,0 +1 @@
+export { AvatarCanvas as AvatarEditor } from './AvatarCanvas';

package/dist/editor/AvatarEditor.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarEditor = void 0;
+// Web: delegate to AvatarCanvas (existing web implementation).
+var AvatarCanvas_1 = require("./AvatarCanvas");
+Object.defineProperty(exports, "AvatarEditor", { enumerable: true, get: function () { return AvatarCanvas_1.AvatarCanvas; } });

package/dist/editor/AvatarEditor.native.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarEditorProps } from './types';
+export type { AvatarEditorProps };
+export declare function AvatarEditor({ avatarUrl, activeAssetId, onPlacementChange, style, }: AvatarEditorProps): import("react/jsx-runtime").JSX.Element;
+export default AvatarEditor;

package/dist/editor/AvatarEditor.native.js

@@ -0,0 +1,93 @@
+"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.AvatarEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Native avatar placement editor.
+ * Uses WgpuAvatar (R3F + expo-gl) as the render surface and Three.js raycasting
+ * for gesture-driven accessory placement. Replaces the old FilamentEditor.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const THREE = __importStar(require("three"));
+const wgpu_1 = require("../wgpu");
+const boneSnap_1 = require("./boneSnap");
+function tapToNDC(evt, layout) {
+    const { locationX, locationY } = evt.nativeEvent;
+    return new THREE.Vector2((locationX / layout.width) * 2 - 1, -((locationY / layout.height) * 2 - 1));
+}
+function AvatarEditor({ avatarUrl, activeAssetId = null, onPlacementChange, style, }) {
+    const cameraRef = (0, react_1.useRef)(null);
+    const layoutRef = (0, react_1.useRef)({ width: 1, height: 1 });
+    const [avatarScene, setAvatarScene] = (0, react_1.useState)(null);
+    const handleSceneReady = (0, react_1.useCallback)((scene, camera) => {
+        cameraRef.current = camera;
+        let avatarRoot = scene;
+        scene.traverse((obj) => {
+            if (obj instanceof THREE.SkinnedMesh && avatarRoot === scene) {
+                avatarRoot = obj.parent ?? obj;
+            }
+        });
+        setAvatarScene(avatarRoot);
+    }, []);
+    const handleTap = (0, react_1.useCallback)((evt) => {
+        if (!activeAssetId || !cameraRef.current || !avatarScene)
+            return;
+        const ndc = tapToNDC(evt, layoutRef.current);
+        const raycaster = new THREE.Raycaster();
+        raycaster.setFromCamera(ndc, cameraRef.current);
+        const meshes = [];
+        avatarScene.traverse((obj) => {
+            if (obj instanceof THREE.Mesh || obj instanceof THREE.SkinnedMesh) {
+                meshes.push(obj);
+            }
+        });
+        const hits = raycaster.intersectObjects(meshes, false);
+        if (hits.length === 0)
+            return;
+        const hitPoint = hits[0].point;
+        const snap = (0, boneSnap_1.findNearestBone)(avatarScene, hitPoint);
+        if (!snap)
+            return;
+        const offsetPos = [
+            hitPoint.x - snap.position.x,
+            hitPoint.y - snap.position.y,
+            hitPoint.z - snap.position.z,
+        ];
+        onPlacementChange?.(activeAssetId, {
+            bone: snap.bone,
+            position: offsetPos,
+            rotation: [0, 0, 0],
+            scale: 1,
+        });
+    }, [activeAssetId, avatarScene, onPlacementChange]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, style], onLayout: (e) => { layoutRef.current = e.nativeEvent.layout; }, children: [(0, jsx_runtime_1.jsx)(wgpu_1.WgpuAvatar, { avatarUrl: avatarUrl, style: react_native_1.StyleSheet.absoluteFill, onSceneReady: handleSceneReady }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: react_native_1.StyleSheet.absoluteFill, onTouchEnd: handleTap, pointerEvents: activeAssetId ? 'auto' : 'none' })] }));
+}
+exports.AvatarEditor = AvatarEditor;
+exports.default = AvatarEditor;
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1, overflow: 'hidden' },
+});

package/dist/editor/boneSnap.d.ts

@@ -0,0 +1,25 @@
+import * as THREE from 'three';
+export declare const HUMANOID_BONES: readonly ["Hips", "Spine", "Spine1", "Spine2", "Neck", "Head", "LeftShoulder", "LeftArm", "LeftForeArm", "LeftHand", "RightShoulder", "RightArm", "RightForeArm", "RightHand", "LeftUpLeg", "LeftLeg", "LeftFoot", "LeftToeBase", "RightUpLeg", "RightLeg", "RightFoot", "RightToeBase"];
+export type HumanoidBone = (typeof HUMANOID_BONES)[number];
+export interface BoneSnapResult {
+    bone: string;
+    position: THREE.Vector3;
+    distance: number;
+}
+/**
+ * Given an avatar scene and a world-space position, finds the nearest skeleton
+ * bone whose name matches a known humanoid bone name.
+ */
+export declare function findNearestBone(avatarScene: THREE.Object3D, worldPos: THREE.Vector3, maxDistance?: number): BoneSnapResult | null;
+/**
+ * Returns the world-space position of a named bone in the avatar scene.
+ * Returns the scene origin if the bone is not found.
+ */
+export declare function getWorldPositionForBone(avatarScene: THREE.Object3D, boneName: string): THREE.Vector3;
+export declare const getWorldPositionForPlacement: typeof getWorldPositionForBone;
+export declare function snapPlacementToNearestBone(avatarScene: THREE.Object3D, worldPos: THREE.Vector3): BoneSnapResult | null;
+/**
+ * Hook that returns a snap function. Fires haptic feedback when a new bone
+ * is snapped to.
+ */
+export declare function useBoneSnap(avatarScene: THREE.Object3D | null): (worldPos: THREE.Vector3) => BoneSnapResult | null;

package/dist/editor/boneSnap.js

@@ -0,0 +1,93 @@
+"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.useBoneSnap = exports.snapPlacementToNearestBone = exports.getWorldPositionForPlacement = exports.getWorldPositionForBone = exports.findNearestBone = exports.HUMANOID_BONES = void 0;
+const react_1 = require("react");
+const Haptics = __importStar(require("expo-haptics"));
+const THREE = __importStar(require("three"));
+exports.HUMANOID_BONES = [
+    'Hips', 'Spine', 'Spine1', 'Spine2', 'Neck', 'Head',
+    'LeftShoulder', 'LeftArm', 'LeftForeArm', 'LeftHand',
+    'RightShoulder', 'RightArm', 'RightForeArm', 'RightHand',
+    'LeftUpLeg', 'LeftLeg', 'LeftFoot', 'LeftToeBase',
+    'RightUpLeg', 'RightLeg', 'RightFoot', 'RightToeBase',
+];
+/**
+ * Given an avatar scene and a world-space position, finds the nearest skeleton
+ * bone whose name matches a known humanoid bone name.
+ */
+function findNearestBone(avatarScene, worldPos, maxDistance = 0.35) {
+    let best = null;
+    const boneWorldPos = new THREE.Vector3();
+    avatarScene.traverse((obj) => {
+        if (!(obj instanceof THREE.Bone))
+            return;
+        if (!exports.HUMANOID_BONES.includes(obj.name))
+            return;
+        obj.getWorldPosition(boneWorldPos);
+        const dist = worldPos.distanceTo(boneWorldPos);
+        if (dist < maxDistance && (!best || dist < best.distance)) {
+            best = { bone: obj.name, position: boneWorldPos.clone(), distance: dist };
+        }
+    });
+    return best;
+}
+exports.findNearestBone = findNearestBone;
+/**
+ * Returns the world-space position of a named bone in the avatar scene.
+ * Returns the scene origin if the bone is not found.
+ */
+function getWorldPositionForBone(avatarScene, boneName) {
+    const result = new THREE.Vector3();
+    avatarScene.traverse((obj) => {
+        if (obj instanceof THREE.Bone && obj.name === boneName) {
+            obj.getWorldPosition(result);
+        }
+    });
+    return result;
+}
+exports.getWorldPositionForBone = getWorldPositionForBone;
+// Legacy alias kept for call-site compatibility
+exports.getWorldPositionForPlacement = getWorldPositionForBone;
+function snapPlacementToNearestBone(avatarScene, worldPos) {
+    return findNearestBone(avatarScene, worldPos);
+}
+exports.snapPlacementToNearestBone = snapPlacementToNearestBone;
+/**
+ * Hook that returns a snap function. Fires haptic feedback when a new bone
+ * is snapped to.
+ */
+function useBoneSnap(avatarScene) {
+    return (0, react_1.useCallback)((worldPos) => {
+        if (!avatarScene)
+            return null;
+        const result = findNearestBone(avatarScene, worldPos);
+        if (result) {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => null);
+        }
+        return result;
+    }, [avatarScene]);
+}
+exports.useBoneSnap = useBoneSnap;

package/dist/editor/index.d.ts

@@ -1,5 +1,9 @@
 export { AvatarCanvas } from './AvatarCanvas';
+export { AvatarEditor } from './AvatarEditor';
 export { AvatarModel } from './AvatarModel';
 export { RigidAccessory } from './RigidAccessory';
 export { SkinnedClothing } from './SkinnedClothing';
+export { studioTheme, withAlpha } from './studioTheme';
+export { useBoneSnap, findNearestBone, getWorldPositionForBone, getWorldPositionForPlacement, snapPlacementToNearestBone, HUMANOID_BONES } from './boneSnap';
 export type { AvatarEditorProps, AssetPlacement, EquippedAsset } from './types';
+export type { BoneSnapResult, HumanoidBone } from './boneSnap';

package/dist/editor/index.js

@@ -1,11 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkinnedClothing = exports.RigidAccessory = exports.AvatarModel = exports.AvatarCanvas = void 0;
+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;
 var AvatarCanvas_1 = require("./AvatarCanvas");
 Object.defineProperty(exports, "AvatarCanvas", { enumerable: true, get: function () { return AvatarCanvas_1.AvatarCanvas; } });
+var AvatarEditor_1 = require("./AvatarEditor");
+Object.defineProperty(exports, "AvatarEditor", { enumerable: true, get: function () { return AvatarEditor_1.AvatarEditor; } });
 var AvatarModel_1 = require("./AvatarModel");
 Object.defineProperty(exports, "AvatarModel", { enumerable: true, get: function () { return AvatarModel_1.AvatarModel; } });
 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 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; } });
+var boneSnap_1 = require("./boneSnap");
+Object.defineProperty(exports, "useBoneSnap", { enumerable: true, get: function () { return boneSnap_1.useBoneSnap; } });
+Object.defineProperty(exports, "findNearestBone", { enumerable: true, get: function () { return boneSnap_1.findNearestBone; } });
+Object.defineProperty(exports, "getWorldPositionForBone", { enumerable: true, get: function () { return boneSnap_1.getWorldPositionForBone; } });
+Object.defineProperty(exports, "getWorldPositionForPlacement", { enumerable: true, get: function () { return boneSnap_1.getWorldPositionForPlacement; } });
+Object.defineProperty(exports, "snapPlacementToNearestBone", { enumerable: true, get: function () { return boneSnap_1.snapPlacementToNearestBone; } });
+Object.defineProperty(exports, "HUMANOID_BONES", { enumerable: true, get: function () { return boneSnap_1.HUMANOID_BONES; } });

package/dist/editor/studioTheme.d.ts

@@ -0,0 +1,86 @@
+export declare const studioTheme: {
+    readonly colors: {
+        readonly background: "#111315";
+        readonly backgroundAlt: "#191d20";
+        readonly surface: "#1c2125";
+        readonly surfaceRaised: "#252b30";
+        readonly surfaceSoft: "#2b3238";
+        readonly border: "#394249";
+        readonly borderStrong: "#53606a";
+        readonly textPrimary: "#f6efe4";
+        readonly textSecondary: "#cabfaa";
+        readonly textMuted: "#8b847a";
+        readonly accent: "#ff7a59";
+        readonly accentStrong: "#ff9c72";
+        readonly accentMuted: "rgba(255, 122, 89, 0.16)";
+        readonly success: "#69c08a";
+        readonly danger: "#f07a7a";
+        readonly shadow: "rgba(0, 0, 0, 0.32)";
+        readonly haze: "rgba(255, 255, 255, 0.05)";
+    };
+    readonly spacing: {
+        readonly xs: 6;
+        readonly sm: 10;
+        readonly md: 16;
+        readonly lg: 22;
+        readonly xl: 28;
+        readonly xxl: 36;
+    };
+    readonly radius: {
+        readonly sm: 12;
+        readonly md: 18;
+        readonly lg: 24;
+        readonly pill: 999;
+    };
+    readonly shadow: {
+        readonly glow: {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 10;
+            };
+            readonly shadowOpacity: 0.24;
+            readonly shadowRadius: 24;
+            readonly elevation: 10;
+        };
+        readonly card: {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 8;
+            };
+            readonly shadowOpacity: 0.16;
+            readonly shadowRadius: 18;
+            readonly elevation: 6;
+        };
+    };
+    readonly type: {
+        readonly eyebrow: {
+            readonly fontSize: 12;
+            readonly fontWeight: "700";
+            readonly letterSpacing: 1.6;
+            readonly textTransform: "uppercase";
+        };
+        readonly sectionTitle: {
+            readonly fontSize: 24;
+            readonly fontWeight: "700";
+            readonly letterSpacing: 0.2;
+        };
+        readonly body: {
+            readonly fontSize: 15;
+            readonly lineHeight: 22;
+            readonly fontWeight: "500";
+        };
+        readonly bodySmall: {
+            readonly fontSize: 13;
+            readonly lineHeight: 18;
+            readonly fontWeight: "500";
+        };
+        readonly button: {
+            readonly fontSize: 15;
+            readonly fontWeight: "700";
+            readonly letterSpacing: 0.2;
+        };
+    };
+};
+export declare function withAlpha(hexOrRgb: string, alphaHex: string): string;

package/dist/editor/studioTheme.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withAlpha = exports.studioTheme = void 0;
+exports.studioTheme = {
+    colors: {
+        background: '#111315',
+        backgroundAlt: '#191d20',
+        surface: '#1c2125',
+        surfaceRaised: '#252b30',
+        surfaceSoft: '#2b3238',
+        border: '#394249',
+        borderStrong: '#53606a',
+        textPrimary: '#f6efe4',
+        textSecondary: '#cabfaa',
+        textMuted: '#8b847a',
+        accent: '#ff7a59',
+        accentStrong: '#ff9c72',
+        accentMuted: 'rgba(255, 122, 89, 0.16)',
+        success: '#69c08a',
+        danger: '#f07a7a',
+        shadow: 'rgba(0, 0, 0, 0.32)',
+        haze: 'rgba(255, 255, 255, 0.05)',
+    },
+    spacing: {
+        xs: 6,
+        sm: 10,
+        md: 16,
+        lg: 22,
+        xl: 28,
+        xxl: 36,
+    },
+    radius: {
+        sm: 12,
+        md: 18,
+        lg: 24,
+        pill: 999,
+    },
+    shadow: {
+        glow: {
+            shadowColor: '#000000',
+            shadowOffset: { width: 0, height: 10 },
+            shadowOpacity: 0.24,
+            shadowRadius: 24,
+            elevation: 10,
+        },
+        card: {
+            shadowColor: '#000000',
+            shadowOffset: { width: 0, height: 8 },
+            shadowOpacity: 0.16,
+            shadowRadius: 18,
+            elevation: 6,
+        },
+    },
+    type: {
+        eyebrow: {
+            fontSize: 12,
+            fontWeight: '700',
+            letterSpacing: 1.6,
+            textTransform: 'uppercase',
+        },
+        sectionTitle: {
+            fontSize: 24,
+            fontWeight: '700',
+            letterSpacing: 0.2,
+        },
+        body: {
+            fontSize: 15,
+            lineHeight: 22,
+            fontWeight: '500',
+        },
+        bodySmall: {
+            fontSize: 13,
+            lineHeight: 18,
+            fontWeight: '500',
+        },
+        button: {
+            fontSize: 15,
+            fontWeight: '700',
+            letterSpacing: 0.2,
+        },
+    },
+};
+function withAlpha(hexOrRgb, alphaHex) {
+    if (hexOrRgb.startsWith('#')) {
+        return `${hexOrRgb}${alphaHex}`;
+    }
+    return hexOrRgb;
+}
+exports.withAlpha = withAlpha;

package/dist/editor/types.d.ts

@@ -1,5 +1,4 @@
 import type { AvatarAppearance } from '../appearance';
-import type React from 'react';
 export interface AssetPlacement {
     bone: string;
     position: [number, number, number];
@@ -15,13 +14,28 @@ export interface EquippedAsset {
     offset_position?: [number, number, number];
     offset_rotation?: [number, number, number];
 }
+/**
+ * Shared props understood by both AvatarCanvas (web) and AvatarEditor (native).
+ * Web-only fields (className, appearance) are optional and ignored on native.
+ * Native-only fields (activeAssetId, onActiveAssetChange, onDone, skinColor)
+ * are optional and ignored on web.
+ *
+ * `style` is typed as `any` to avoid importing react-native into a file
+ * compiled by plain tsc. Call-sites should cast to the appropriate type.
+ */
 export interface AvatarEditorProps {
     avatarUrl: string;
-    appearance?: AvatarAppearance;
     equipped?: EquippedAsset[];
     placements?: Record<string, AssetPlacement>;
-    editingAssetId?: string | null;
     onPlacementChange?: (assetId: string, placement: AssetPlacement) => void;
+    /** @web which asset is currently being placed */
+    editingAssetId?: string | null;
+    appearance?: AvatarAppearance;
     className?: string;
-    style?: React.CSSProperties;
+    style?: any;
+    /** @native which asset is currently being placed (maps to editingAssetId on web) */
+    activeAssetId?: string | null;
+    onActiveAssetChange?: (id: string | null) => void;
+    onDone?: () => void;
+    skinColor?: string;
 }

package/dist/html.js

@@ -215,7 +215,7 @@ async function loadStaticFallback(loadedAvatarUrl) {
       renderer.setAnimationLoop(() => {
         const delta = clock.getDelta();
         if (staticMixer) staticMixer.update(delta);
-        tickVisemeDecay();
+        tickVisemeDecay(delta);
         applyMotionBones();
         controls.update();
         renderer.render(scene, camera);
@@ -322,15 +322,15 @@ async function init() {
             }
           };
           const headaudioUpdate = headaudio.update.bind(headaudio);
-          head.opt.update = (dt) => { headaudioUpdate(dt); tickVisemeDecay(); applyMotionBones(); };
+          head.opt.update = (dt) => { headaudioUpdate(dt); tickVisemeDecay(dt); applyMotionBones(); };
           log('HeadAudio ready (phoneme lip sync)');
         } else {
           log('HeadAudio skipped: AudioWorklet not supported in this WebView. Use sendViseme() from native TTS callbacks.');
-          head.opt.update = () => { tickVisemeDecay(); applyMotionBones(); };
+          head.opt.update = (dt) => { tickVisemeDecay(dt); applyMotionBones(); };
         }
       } catch (err) {
         log('HeadAudio unavailable, viseme/amplitude fallback active: ' + err.message);
-        head.opt.update = () => { tickVisemeDecay(); applyMotionBones(); };
+        head.opt.update = (dt) => { tickVisemeDecay(dt); applyMotionBones(); };
       }
 
       startAudioInterception();
@@ -551,7 +551,7 @@ function clearScheduledVisemes() {
   for (const key of Object.keys(visemeState)) visemeState[key] = 0;
 }
 
-function tickVisemeDecay() {
+function tickVisemeDecay(deltaSeconds?: number) {
   if (!visemeMorphCache) return;
 
   const isScheduled = Date.now() < visemeModeUntil;
@@ -566,7 +566,12 @@ function tickVisemeDecay() {
     // Only decay if we aren't in the middle of a viseme schedule.
     // Scheduled visemes are cleared manually by timeouts.
     if (!isScheduled) {
-      const decayed = weight * 0.82;
+      // Time-delta-aware decay: maintain consistent feel regardless of frame rate.
+      // Base rate is calibrated for 60 fps (0.82 per frame = ~12 frames to 10%).
+      // pow(0.82, delta*60) is frame-rate independent.
+      const dt = deltaSeconds ?? (1 / 60);
+      const decayFactor = Math.pow(0.82, dt * 60);
+      const decayed = weight * decayFactor;
       visemeState[key] = decayed < 0.01 ? 0 : decayed;
     }
 
@@ -609,12 +614,17 @@ function scheduleVisemes(schedule) {
   if (!schedule || !Array.isArray(schedule.cues) || schedule.cues.length === 0) return;
 
   const myScheduleId = activeVisemeScheduleId;
-  // The startedAtMs anchor is set when tts_request_start arrives on the data
-  // channel. Audio doesn't play until ~300ms later (LiveKit audio buffering).
-  // TTS generation delay is no longer included here since visemes now arrive
-  // via direct ref call before the React render cycle.
-  const AUDIO_PIPELINE_DELAY_MS = 300;
-  let startedAt = (schedule.startedAtMs || Date.now()) + AUDIO_PIPELINE_DELAY_MS;
+  // Anchor selection priority:
+  //   1. audioStartedAtMs — stamped when audio actually begins playing (most accurate)
+  //   2. startedAtMs + pipeline delay — stamped at TTS request fire time
+  //
+  // AUDIO_PIPELINE_DELAY_MS compensates for the gap between "TTS request fired"
+  // and "audio audible from speaker". Qwen3-TTS on local/tailnet is ~80–150 ms;
+  // LiveKit adds ~50–80 ms of jitter buffer on top. 150 ms is conservative but
+  // avoids the mouth running ahead of audio on fast connections.
+  const AUDIO_PIPELINE_DELAY_MS = 150;
+  let startedAt = schedule.audioStartedAtMs
+    ?? ((schedule.startedAtMs || Date.now()) + AUDIO_PIPELINE_DELAY_MS);
   const durationMs = schedule.durationMs || 0;
   const now = Date.now();
   let elapsedMs = Math.max(0, now - startedAt);

package/dist/utils/avatarUtils.d.ts

@@ -1,9 +1,8 @@
 /**
  * Resolves a local Expo asset module into a file:// URI for use with
- * react-native-filament's useModel(). Never base64-encodes — Filament reads
- * file:// directly on both iOS and Android.
+ * WgpuAvatar model loading.
  */
-export declare function resolveFilamentAssetUri(module: unknown): Promise<string | null>;
+export declare function resolveLocalAssetUri(module: unknown): Promise<string | null>;
 /**
  * Resolves a local Expo asset module (from require()) into a usable URL string.
  * On web, returns an absolute URL.

package/dist/utils/avatarUtils.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveLocalAssetUrl = exports.resolveFilamentAssetUri = void 0;
+exports.resolveLocalAssetUrl = exports.resolveLocalAssetUri = void 0;
 const expo_asset_1 = require("expo-asset");
 const react_native_1 = require("react-native");
 const expo_file_system_1 = require("expo-file-system");
 /**
  * Resolves a local Expo asset module into a file:// URI for use with
- * react-native-filament's useModel(). Never base64-encodes — Filament reads
- * file:// directly on both iOS and Android.
+ * WgpuAvatar model loading.
  */
-async function resolveFilamentAssetUri(module) {
+async function resolveLocalAssetUri(module) {
     try {
         const asset = expo_asset_1.Asset.fromModule(module);
         await asset.downloadAsync();
@@ -17,11 +16,11 @@ async function resolveFilamentAssetUri(module) {
         return uri ?? null;
     }
     catch (e) {
-        console.error('[AssetUtils] Failed to resolve Filament asset:', e);
+        console.error('[AssetUtils] Failed to resolve asset:', e);
         return null;
     }
 }
-exports.resolveFilamentAssetUri = resolveFilamentAssetUri;
+exports.resolveLocalAssetUri = resolveLocalAssetUri;
 /**
  * Resolves a local Expo asset module (from require()) into a usable URL string.
  * On web, returns an absolute URL.

package/dist/wardrobe/wardrobeStore.d.ts

@@ -11,7 +11,7 @@ export interface WardrobeState {
     equipped: Record<string, WearableAsset>;
     /** assetId -> placement transform */
     placements: Record<string, AssetPlacement>;
-    /** asset currently being positioned (Filament mode) */
+    /** asset currently being positioned (native mode) */
     activeAssetId: string | null;
     /** current gizmo operation mode */
     gizmoMode: GizmoMode;

package/dist/wgpu/WgpuAvatar.d.ts

@@ -13,6 +13,7 @@
  */
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import * as THREE from 'three';
 import type { TalkingHeadMood, TalkingHeadAccessory, TalkingHeadVisemeSchedule } from '../index';
 export interface WgpuAvatarRef {
     setMood: (mood: TalkingHeadMood) => void;
@@ -31,6 +32,8 @@ interface WgpuAvatarProps {
     accessories?: TalkingHeadAccessory[];
     onReady?: () => void;
     onError?: (message: string) => void;
+    /** Called once the R3F scene and camera are available (for editor raycasting). */
+    onSceneReady?: (scene: THREE.Scene, camera: THREE.Camera) => void;
 }
 export declare const WgpuAvatar: React.ForwardRefExoticComponent<WgpuAvatarProps & React.RefAttributes<WgpuAvatarRef>>;
 export {};

package/dist/wgpu/WgpuAvatar.js

@@ -44,13 +44,25 @@ const THREE = __importStar(require("three"));
 const native_1 = require("@react-three/fiber/native");
 const native_2 = require("@react-three/drei/native");
 const morphTables_1 = require("./morphTables");
-const useAuthedFilamentUri_1 = require("./useAuthedFilamentUri");
+const useAuthedModelUri_1 = require("./useAuthedModelUri");
 // ---------------------------------------------------------------------------
 // Camera defaults — match FilamentAvatar constants
 // ---------------------------------------------------------------------------
 const CAMERA_POSITION = [0, 1.52, 0.85];
 const CAMERA_TARGET = new THREE.Vector3(0, 1.52, 0);
-const CAMERA_FOV_FULL = 38; // rough Three.js FOV equiv to 50mm focal length
+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)();
+    (0, react_1.useEffect)(() => {
+        onSceneReady(scene, camera);
+        // Only fire once on mount — scene/camera identity is stable
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return null;
+}
 function buildMorphIndex(mesh) {
     const map = new Map();
     const dict = mesh.morphTargetDictionary;
@@ -58,7 +70,7 @@ function buildMorphIndex(mesh) {
         return map;
     for (const [name, idx] of Object.entries(dict)) {
         map.set(name.toLowerCase(), idx);
-        map.set(name, idx); // keep original casing too
+        map.set(name, idx);
     }
     return map;
 }
@@ -70,13 +82,12 @@ function resolveIndex(morphIndex, aliases) {
     }
     return undefined;
 }
-function AvatarScene({ uri, morphStateRef, fov, onReady, onError }) {
+function AvatarScene({ uri, morphStateRef, fov, onReady, onError, onSceneReady }) {
     const { camera } = (0, native_1.useThree)();
     const gltf = (0, native_2.useGLTF)(uri);
     const headMeshRef = (0, react_1.useRef)(null);
     const morphIndexRef = (0, react_1.useRef)(new Map());
     const readyFiredRef = (0, react_1.useRef)(false);
-    // Set up camera on mount
     (0, react_1.useEffect)(() => {
         if (!(camera instanceof THREE.PerspectiveCamera))
             return;
@@ -85,7 +96,6 @@ function AvatarScene({ uri, morphStateRef, fov, onReady, onError }) {
         camera.lookAt(CAMERA_TARGET);
         camera.updateProjectionMatrix();
     }, [camera, fov]);
-    // Find the head/face mesh with morph targets after GLTF loads
     (0, react_1.useEffect)(() => {
         if (!gltf?.scene)
             return;
@@ -111,58 +121,43 @@ function AvatarScene({ uri, morphStateRef, fov, onReady, onError }) {
             onReady();
         }
     }, [gltf, onReady, onError]);
-    // Per-frame morph weight application
     (0, native_1.useFrame)((_, delta) => {
         const mesh = headMeshRef.current;
         if (!mesh?.morphTargetInfluences)
             return;
         const state = morphStateRef.current;
-        const alpha = Math.min(1, state.alpha * delta * 60); // normalize to 60fps
-        // Merge mood base + viseme target
+        const alpha = Math.min(1, state.alpha * delta * 60);
         const combined = { ...state.moodBase };
         for (const [name, w] of Object.entries(state.visemeTarget)) {
             combined[name] = Math.max(combined[name] ?? 0, w);
         }
-        // Smooth current toward combined
-        const allNames = new Set([
-            ...Object.keys(state.current),
-            ...Object.keys(combined),
-        ]);
+        const allNames = new Set([...Object.keys(state.current), ...Object.keys(combined)]);
         for (const name of allNames) {
             const target = combined[name] ?? 0;
             const cur = state.current[name] ?? 0;
             const next = cur + (target - cur) * alpha;
             state.current[name] = next;
             const idx = resolveIndex(morphIndexRef.current, [name]);
-            if (idx !== undefined) {
+            if (idx !== undefined)
                 mesh.morphTargetInfluences[idx] = next;
-            }
         }
-        // Decay viseme layer
         for (const name of Object.keys(state.visemeTarget)) {
-            state.visemeTarget[name] *= Math.pow(0.1, delta); // ~10x decay/s
-            if (state.visemeTarget[name] < 0.001) {
+            state.visemeTarget[name] *= Math.pow(0.1, delta);
+            if (state.visemeTarget[name] < 0.001)
                 delete state.visemeTarget[name];
-            }
         }
     });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("ambientLight", { intensity: 0.6 }), (0, jsx_runtime_1.jsx)("directionalLight", { position: [1, 3, 2], intensity: 1.2, castShadow: false }), (0, jsx_runtime_1.jsx)("primitive", { object: gltf.scene })] }));
+    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 })] }));
 }
 // ---------------------------------------------------------------------------
-// Error boundary so GLTF load failures surface to onError
+// 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)
-            return null;
-        return this.props.children;
-    }
+    render() { if (this.state.hasError)
+        return null; return this.props.children; }
 }
 // ---------------------------------------------------------------------------
 // Viseme schedule player
@@ -172,41 +167,30 @@ function applyVisemeCue(morphState, visemeKey) {
     if (!aliases)
         return;
     const w = morphTables_1.VISEME_WEIGHTS[visemeKey] ?? morphTables_1.DEFAULT_VISEME_WEIGHT;
-    for (const alias of aliases) {
+    for (const alias of aliases)
         morphState.visemeTarget[alias] = w;
-    }
 }
 // ---------------------------------------------------------------------------
 // Main exported component
 // ---------------------------------------------------------------------------
-exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, mood = 'neutral', onReady, onError, }, ref) => {
-    // Resolve authenticated file URI (same logic as FilamentAvatar)
+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;
-    const fileResult = (0, useAuthedFilamentUri_1.useAuthedFilamentUri)(remoteUrl);
-    // Lock-in URI on first resolve — never change mid-session
+        ? avatarUrl : null;
+    const fileResult = (0, useAuthedModelUri_1.useAuthedModelUri)(remoteUrl);
     const lockedUriRef = (0, react_1.useRef)(null);
     const currentUri = fileResult?.uri ?? null;
-    if (lockedUriRef.current === null && currentUri) {
+    if (lockedUriRef.current === null && currentUri)
         lockedUriRef.current = currentUri;
-    }
     const localUri = lockedUriRef.current;
     const fov = focalLength
         ? Math.round(2 * Math.atan(21.634 / focalLength) * (180 / Math.PI))
         : CAMERA_FOV_FULL;
-    // Shared morph state — mutated directly in useFrame, never causes re-renders
     const morphStateRef = (0, react_1.useRef)({
-        current: {},
-        visemeTarget: {},
-        moodBase: {},
-        alpha: 0.18,
+        current: {}, visemeTarget: {}, moodBase: {}, alpha: 0.18,
     });
-    // Update mood baseline when mood prop changes
     (0, react_1.useEffect)(() => {
         morphStateRef.current.moodBase = { ...(morphTables_1.MOOD_MORPHS[mood] ?? {}) };
     }, [mood]);
-    // Pending viseme schedule
     const scheduleRef = (0, react_1.useRef)(null);
     const scheduleTimersRef = (0, react_1.useRef)([]);
     const [isReady, setIsReady] = (0, react_1.useState)(false);
@@ -215,21 +199,6 @@ exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, m
             clearTimeout(t);
         scheduleTimersRef.current = [];
     }, []);
-    const handleReady = (0, react_1.useCallback)(() => {
-        setIsReady(true);
-        onReady?.();
-        // Flush any pending schedule
-        if (scheduleRef.current) {
-            const s = scheduleRef.current;
-            scheduleRef.current = null;
-            applySchedule(s);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [onReady]);
-    const handleError = (0, react_1.useCallback)((msg) => {
-        console.warn('[WgpuAvatar] GLTF error:', msg);
-        onError?.(msg);
-    }, [onError]);
     const applySchedule = (0, react_1.useCallback)((schedule) => {
         clearScheduleTimers();
         const now = Date.now();
@@ -238,39 +207,41 @@ exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, m
         for (const cue of schedule.cues) {
             const delay = cue.startMs - offset;
             if (delay < -200)
-                continue; // already expired
-            const rhubarbKey = cue.viseme;
-            const visemeKey = morphTables_1.RHUBARB_TO_VISEME[rhubarbKey] ?? rhubarbKey;
+                continue;
+            const visemeKey = morphTables_1.RHUBARB_TO_VISEME[cue.viseme] ?? cue.viseme;
             const t = setTimeout(() => {
                 applyVisemeCue(morphStateRef.current, visemeKey);
             }, Math.max(0, delay));
             scheduleTimersRef.current.push(t);
         }
     }, [clearScheduleTimers]);
-    // Cleanup on unmount
+    const handleReady = (0, react_1.useCallback)(() => {
+        setIsReady(true);
+        onReady?.();
+        if (scheduleRef.current) {
+            const s = scheduleRef.current;
+            scheduleRef.current = null;
+            applySchedule(s);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onReady]);
+    const handleError = (0, react_1.useCallback)((msg) => {
+        console.warn('[WgpuAvatar] GLTF error:', msg);
+        onError?.(msg);
+    }, [onError]);
     (0, react_1.useEffect)(() => () => clearScheduleTimers(), [clearScheduleTimers]);
     (0, react_1.useImperativeHandle)(ref, () => ({
-        setMood: (m) => {
-            morphStateRef.current.moodBase = { ...(morphTables_1.MOOD_MORPHS[m] ?? {}) };
-        },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        sendAmplitude: (_amplitude) => {
-            // Optional: could drive jaw open with amplitude
-            // morphStateRef.current.visemeTarget['jawOpen'] = _amplitude * 0.3;
-        },
+        setMood: (m) => { morphStateRef.current.moodBase = { ...(morphTables_1.MOOD_MORPHS[m] ?? {}) }; },
+        sendAmplitude: (_amplitude) => { },
         sendViseme: (viseme, weight) => {
             const aliases = morphTables_1.VISEME_MORPH_ALIASES[viseme];
             if (!aliases)
                 return;
             const w = weight ?? morphTables_1.VISEME_WEIGHTS[viseme] ?? morphTables_1.DEFAULT_VISEME_WEIGHT;
-            for (const alias of aliases) {
+            for (const alias of aliases)
                 morphStateRef.current.visemeTarget[alias] = w;
-            }
-        },
-        clearVisemes: () => {
-            clearScheduleTimers();
-            morphStateRef.current.visemeTarget = {};
         },
+        clearVisemes: () => { clearScheduleTimers(); morphStateRef.current.visemeTarget = {}; },
         scheduleVisemes: (schedule) => {
             if (!isReady) {
                 scheduleRef.current = schedule;
@@ -279,12 +250,9 @@ exports.WgpuAvatar = (0, react_1.forwardRef)(({ style, avatarUrl, focalLength, m
             applySchedule(schedule);
         },
     }), [isReady, applySchedule, clearScheduleTimers]);
-    if (!localUri) {
+    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 }) }) }) }));
+    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 }) }) }) }));
 });
 exports.WgpuAvatar.displayName = 'WgpuAvatar';
 const styles = react_native_1.StyleSheet.create({

package/dist/wgpu/morphTables.js

@@ -1,6 +1,6 @@
 "use strict";
 // ---------------------------------------------------------------------------
-// Morph target tables for Filament avatar viseme/mood rendering
+// Morph target tables for avatar viseme/mood rendering
 // ---------------------------------------------------------------------------
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MOOD_MORPHS = exports.DEFAULT_VISEME_WEIGHT = exports.VISEME_WEIGHTS = exports.VISEME_MORPH_ALIASES = exports.RHUBARB_TO_VISEME = void 0;

package/dist/wgpu/useAuthedModelUri.d.ts

@@ -0,0 +1,11 @@
+export type AuthedFileResult = {
+    uri: string;
+    size: number;
+} | null;
+/**
+ * Downloads a remote URL (with Bearer auth) to the local cache and returns a
+ * `file://` URI suitable for WgpuAvatar model source.
+ * The native model fetcher doesn't send auth headers, so we pre-fetch here.
+ * Also returns the file size in bytes for GPU memory budgeting.
+ */
+export declare function useAuthedModelUri(remoteUrl: string | null): AuthedFileResult;

package/dist/wgpu/{useAuthedFilamentUri.js → useAuthedModelUri.js}

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAuthedFilamentUri = void 0;
+exports.useAuthedModelUri = void 0;
 const react_1 = require("react");
 const FileSystem = __importStar(require("expo-file-system/legacy"));
 const studioApi_1 = require("../api/studioApi");
@@ -31,11 +31,11 @@ const studioApi_1 = require("../api/studioApi");
 const failedUrls = new Set();
 /**
  * Downloads a remote URL (with Bearer auth) to the local cache and returns a
- * `file://` URI suitable for react-native-filament's <Model> source prop.
- * The native Filament fetcher doesn't send auth headers, so we pre-fetch here.
+ * `file://` URI suitable for WgpuAvatar model source.
+ * The native model fetcher doesn't send auth headers, so we pre-fetch here.
  * Also returns the file size in bytes for GPU memory budgeting.
  */
-function useAuthedFilamentUri(remoteUrl) {
+function useAuthedModelUri(remoteUrl) {
     const [result, setResult] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!remoteUrl) {
@@ -57,7 +57,7 @@ function useAuthedFilamentUri(remoteUrl) {
                 // Strip query params (access_token changes per session) so the same GLB is cached across sessions
                 const urlWithoutQuery = remoteUrl.split('?')[0];
                 const key = urlWithoutQuery.replace(/[^a-zA-Z0-9]/g, '_').slice(-100);
-                const dir = `${FileSystem.cacheDirectory}filament/`;
+                const dir = `${FileSystem.cacheDirectory}model/`;
                 // Append .glb so native loaders can identify the format
                 const localPath = `${dir}${key}.glb`;
                 await FileSystem.makeDirectoryAsync(dir, { intermediates: true });
@@ -85,7 +85,7 @@ function useAuthedFilamentUri(remoteUrl) {
                 const downloaded = await FileSystem.getInfoAsync(dlResult.uri);
                 const downloadedSize = downloaded.size;
                 if (!downloaded.exists || !downloadedSize || downloadedSize < 1000) {
-                    console.error('[useAuthedFilamentUri] Download too small (' + (downloadedSize ?? 0) + 'B), likely an error response');
+                    console.error('[useAuthedModelUri] Download too small (' + (downloadedSize ?? 0) + 'B), likely an error response');
                     failedUrls.add(remoteUrl);
                     await FileSystem.deleteAsync(dlResult.uri);
                     return;
@@ -96,7 +96,7 @@ function useAuthedFilamentUri(remoteUrl) {
                     position: 0,
                 });
                 if (dlHeader !== 'Z2xURg==') {
-                    console.error('[useAuthedFilamentUri] Downloaded file is not a valid GLB (bad magic bytes)');
+                    console.error('[useAuthedModelUri] Downloaded file is not a valid GLB (bad magic bytes)');
                     failedUrls.add(remoteUrl);
                     await FileSystem.deleteAsync(dlResult.uri);
                     return;
@@ -105,7 +105,7 @@ function useAuthedFilamentUri(remoteUrl) {
                     setResult({ uri: dlResult.uri, size: downloadedSize });
             }
             catch (e) {
-                console.error('[useAuthedFilamentUri] Failed to download:', remoteUrl.slice(-60), e);
+                console.error('[useAuthedModelUri] Failed to download:', remoteUrl.slice(-60), e);
             }
         })();
         return () => {
@@ -114,4 +114,4 @@ function useAuthedFilamentUri(remoteUrl) {
     }, [remoteUrl]);
     return result;
 }
-exports.useAuthedFilamentUri = useAuthedFilamentUri;
+exports.useAuthedModelUri = useAuthedModelUri;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "talking-head-studio",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "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",
@@ -94,6 +94,7 @@
   "sideEffects": false,
   "dependencies": {
     "@mediapipe/tasks-vision": "^0.10.34",
+    "expo-gl": "^55.0.10",
     "zustand": "^5.0.12"
   },
   "peerDependencies": {

package/dist/wgpu/useAuthedFilamentUri.d.ts

@@ -1,11 +0,0 @@
-export type AuthedFileResult = {
-    uri: string;
-    size: number;
-} | null;
-/**
- * Downloads a remote URL (with Bearer auth) to the local cache and returns a
- * `file://` URI suitable for react-native-filament's <Model> source prop.
- * The native Filament fetcher doesn't send auth headers, so we pre-fetch here.
- * Also returns the file size in bytes for GPU memory budgeting.
- */
-export declare function useAuthedFilamentUri(remoteUrl: string | null): AuthedFileResult;