talking-head-studio 0.4.0 → 0.4.2

package/dist/TalkingHeadVisualization.d.ts

@@ -28,7 +28,7 @@ export interface TalkingHeadVisualizationRef {
 /**
  * TalkingHeadVisualization — optimized component for rendering the 3D avatar.
  *
- * On native: uses FilamentAvatar (direct morph writes, no WebView bridge).
+ * On native: uses WgpuAvatar (direct morph writes, no WebView bridge).
  * On web: uses TalkingHead WebView renderer.
  */
 export declare const TalkingHeadVisualization: React.ForwardRefExoticComponent<TalkingHeadVisualizationProps & React.RefAttributes<TalkingHeadVisualizationRef>>;

package/dist/TalkingHeadVisualization.js

@@ -6,9 +6,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const TalkingHead_1 = require("./TalkingHead");
-const FilamentAvatar_1 = require("./filament/FilamentAvatar");
+const WgpuAvatar_1 = require("./wgpu/WgpuAvatar");
 const avatarUtils_1 = require("./utils/avatarUtils");
-const faceSqueezeAssets_1 = require("./filament/faceSqueezeAssets");
+const faceSqueezeAssets_1 = require("./wgpu/faceSqueezeAssets");
 // Cached fallback data URI — resolved once, reused across all instances
 let _fallbackDataUri = null;
 let _fallbackPromise = null;
@@ -41,16 +41,16 @@ function getLoadingLabel(stage) {
 /**
  * TalkingHeadVisualization — optimized component for rendering the 3D avatar.
  *
- * On native: uses FilamentAvatar (direct morph writes, no WebView bridge).
+ * On native: uses WgpuAvatar (direct morph writes, no WebView bridge).
  * On web: uses TalkingHead WebView renderer.
  */
 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 filamentRef = (0, react_1.useRef)(null);
-    // Unified accessor — Filament on native, WebView on web
-    const activeAvatar = (0, react_1.useCallback)(() => (filamentRef.current ?? avatarRef.current), []);
+    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), []);
     // Fallback local GLB data URI — resolved once on mount
     const [fallbackUrl, setFallbackUrl] = (0, react_1.useState)(_fallbackDataUri);
     (0, react_1.useEffect)(() => {
@@ -114,9 +114,9 @@ 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 || (!filamentRef.current && !isAvatarReady)) {
+            if (!av || (!wgpuRef.current && !isAvatarReady)) {
                 pendingVisemeScheduleRef.current = schedule;
                 return;
             }
@@ -166,7 +166,7 @@ exports.TalkingHeadVisualization = (0, react_1.forwardRef)(({ style, avatarUrl,
             ready: isAvatarReady,
         });
         const av = activeAvatar();
-        if (!av || (!filamentRef.current && !isAvatarReady)) {
+        if (!av || (!wgpuRef.current && !isAvatarReady)) {
             pendingVisemeScheduleRef.current = visemeSchedule;
             return;
         }
@@ -181,10 +181,10 @@ 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)(FilamentAvatar_1.FilamentAvatar, { focalLength: focalLength, ref: (fr) => {
-                filamentRef.current = fr;
+        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)

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/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/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 {};