talking-head-studio 0.3.6 → 0.3.7

package/dist/TalkingHead.web.js

@@ -15,23 +15,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-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;
-    };
-})();
+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.TalkingHead = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/api/studioApi.js

@@ -1,30 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.configureAvatarApi = configureAvatarApi;
-exports.getToken = getToken;
-exports.studioFetch = studioFetch;
-exports.getMyAvatars = getMyAvatars;
-exports.getAvatar = getAvatar;
-exports.updateAvatar = updateAvatar;
-exports.deleteAvatar = deleteAvatar;
-exports.createAvatar = createAvatar;
-exports.getPublicAvatars = getPublicAvatars;
-exports.getVoiceProfileSamples = getVoiceProfileSamples;
-exports.getVoiceProfiles = getVoiceProfiles;
-exports.setDefaultVoice = setDefaultVoice;
-exports.removeDefaultVoice = removeDefaultVoice;
-exports.avatarFileUrl = avatarFileUrl;
-exports.avatarThumbnailUrl = avatarThumbnailUrl;
-exports.avatarAnimatedThumbnailUrl = avatarAnimatedThumbnailUrl;
-exports.thumbnailHeaders = thumbnailHeaders;
-exports.listAssets = listAssets;
-exports.getAsset = getAsset;
-exports.uploadAsset = uploadAsset;
-exports.deleteAsset = deleteAsset;
-exports.suggestPlacement = suggestPlacement;
-exports.assetFileUrl = assetFileUrl;
-exports.createVoiceProfile = createVoiceProfile;
-exports.uploadVoiceSample = uploadVoiceSample;
+exports.uploadVoiceSample = exports.createVoiceProfile = exports.assetFileUrl = exports.suggestPlacement = exports.deleteAsset = exports.uploadAsset = exports.getAsset = exports.listAssets = exports.thumbnailHeaders = exports.avatarAnimatedThumbnailUrl = exports.avatarThumbnailUrl = exports.avatarFileUrl = exports.removeDefaultVoice = exports.setDefaultVoice = exports.getVoiceProfiles = exports.getVoiceProfileSamples = exports.getPublicAvatars = exports.createAvatar = exports.deleteAvatar = exports.updateAvatar = exports.getAvatar = exports.getMyAvatars = exports.studioFetch = exports.getToken = exports.configureAvatarApi = void 0;
 // ---------------------------------------------------------------------------
 // Injectable configuration
 // ---------------------------------------------------------------------------
@@ -35,9 +11,11 @@ function configureAvatarApi(opts) {
         _baseUrl = opts.baseUrl;
     _getToken = opts.getToken;
 }
+exports.configureAvatarApi = configureAvatarApi;
 async function getToken() {
     return _getToken ? _getToken() : null;
 }
+exports.getToken = getToken;
 // ---------------------------------------------------------------------------
 // Core fetch wrappers
 // ---------------------------------------------------------------------------
@@ -70,6 +48,7 @@ async function studioFetch(path, options) {
     }
     return res.json();
 }
+exports.studioFetch = studioFetch;
 /** POST/PUT with FormData, sharing auth token logic. */
 async function studioFetchForm(path, method, formData) {
     const token = await getToken();
@@ -97,9 +76,11 @@ async function studioFetchForm(path, method, formData) {
 function getMyAvatars() {
     return studioFetch('/v1/avatars');
 }
+exports.getMyAvatars = getMyAvatars;
 function getAvatar(id) {
     return studioFetch(`/v1/avatars/${id}`);
 }
+exports.getAvatar = getAvatar;
 function updateAvatar(id, data) {
     return studioFetch(`/v1/avatars/${id}`, {
         method: 'PATCH',
@@ -107,9 +88,11 @@ function updateAvatar(id, data) {
         body: JSON.stringify(data),
     });
 }
+exports.updateAvatar = updateAvatar;
 function deleteAvatar(id) {
     return studioFetch(`/v1/avatars/${id}`, { method: 'DELETE' });
 }
+exports.deleteAvatar = deleteAvatar;
 async function createAvatar(fileUri, name, description) {
     const formData = new FormData();
     formData.append('file', {
@@ -123,18 +106,22 @@ async function createAvatar(fileUri, name, description) {
     }
     return studioFetchForm('/v1/avatars', 'POST', formData);
 }
+exports.createAvatar = createAvatar;
 function getPublicAvatars() {
     return studioFetch('/v1/avatars/public');
 }
+exports.getPublicAvatars = getPublicAvatars;
 // ---------------------------------------------------------------------------
 // Voice profile endpoints
 // ---------------------------------------------------------------------------
 function getVoiceProfileSamples(profileId) {
     return studioFetch(`/profiles/${profileId}/samples`);
 }
+exports.getVoiceProfileSamples = getVoiceProfileSamples;
 function getVoiceProfiles() {
     return studioFetch('/profiles');
 }
+exports.getVoiceProfiles = getVoiceProfiles;
 function setDefaultVoice(avatarId, profileId) {
     return studioFetch(`/v1/avatars/${avatarId}/default-voice`, {
         method: 'PUT',
@@ -142,11 +129,13 @@ function setDefaultVoice(avatarId, profileId) {
         body: JSON.stringify({ profile_id: profileId }),
     });
 }
+exports.setDefaultVoice = setDefaultVoice;
 function removeDefaultVoice(avatarId) {
     return studioFetch(`/v1/avatars/${avatarId}/default-voice`, {
         method: 'DELETE',
     });
 }
+exports.removeDefaultVoice = removeDefaultVoice;
 // ---------------------------------------------------------------------------
 // URL helpers
 // ---------------------------------------------------------------------------
@@ -154,23 +143,27 @@ function avatarFileUrl(avatar) {
     const base = `${_baseUrl}${avatar.url}`;
     return avatar.updated_at ? `${base}?v=${encodeURIComponent(avatar.updated_at)}` : base;
 }
+exports.avatarFileUrl = avatarFileUrl;
 function avatarThumbnailUrl(avatar) {
     const url = avatar.thumbnail_url || avatar.animated_thumbnail_url;
     if (!url)
         return null;
     return `${_baseUrl}${url}`;
 }
+exports.avatarThumbnailUrl = avatarThumbnailUrl;
 function avatarAnimatedThumbnailUrl(avatar) {
     if (!avatar.animated_thumbnail_url)
         return null;
     return `${_baseUrl}${avatar.animated_thumbnail_url}`;
 }
+exports.avatarAnimatedThumbnailUrl = avatarAnimatedThumbnailUrl;
 async function thumbnailHeaders() {
     const token = await getToken();
     if (!token)
         return {};
     return { Authorization: `Bearer ${token}` };
 }
+exports.thumbnailHeaders = thumbnailHeaders;
 // ---------------------------------------------------------------------------
 // Wearable Asset endpoints
 // ---------------------------------------------------------------------------
@@ -178,9 +171,11 @@ function listAssets(category) {
     const query = category ? `?category=${encodeURIComponent(category)}` : '';
     return studioFetch(`/v1/assets${query}`);
 }
+exports.listAssets = listAssets;
 function getAsset(id) {
     return studioFetch(`/v1/assets/${id}`);
 }
+exports.getAsset = getAsset;
 async function uploadAsset(fileUri, meta) {
     const formData = new FormData();
     formData.append('file', {
@@ -203,16 +198,20 @@ async function uploadAsset(fileUri, meta) {
         formData.append('hides_body_parts', JSON.stringify(meta.hides_body_parts));
     return studioFetchForm('/v1/assets', 'POST', formData);
 }
+exports.uploadAsset = uploadAsset;
 function deleteAsset(id) {
     return studioFetch(`/v1/assets/${id}`, { method: 'DELETE' });
 }
+exports.deleteAsset = deleteAsset;
 function suggestPlacement(assetId, avatarId) {
     return studioFetch(`/v1/assets/${assetId}/suggest-placement?avatar_id=${encodeURIComponent(avatarId)}`, { method: 'POST' });
 }
+exports.suggestPlacement = suggestPlacement;
 function assetFileUrl(asset) {
     const base = `${_baseUrl}${asset.url}`;
     return asset.updated_at ? `${base}?v=${encodeURIComponent(asset.updated_at)}` : base;
 }
+exports.assetFileUrl = assetFileUrl;
 async function createVoiceProfile(name, language = 'en') {
     return studioFetch('/profiles', {
         method: 'POST',
@@ -222,6 +221,7 @@ async function createVoiceProfile(name, language = 'en') {
         body: JSON.stringify({ name, language }),
     });
 }
+exports.createVoiceProfile = createVoiceProfile;
 async function uploadVoiceSample(profileId, fileUri, fileName, referenceText) {
     const formData = new FormData();
     formData.append('reference_text', referenceText);
@@ -233,3 +233,4 @@ async function uploadVoiceSample(profileId, fileUri, fileName, referenceText) {
     });
     return studioFetchForm(`/profiles/${profileId}/samples`, 'POST', formData);
 }
+exports.uploadVoiceSample = uploadVoiceSample;

package/dist/appearance/apply.d.ts

@@ -2,5 +2,11 @@ import { type AvatarAppearance } from './schema';
 type Object3DLike = {
     traverse?: (visitor: (object: unknown) => void) => void;
 };
+/**
+ * Invalidate the morph cache for a scene — call this when the avatar GLB
+ * is replaced (e.g. after a new model loads) so the next appearance update
+ * re-traverses the fresh mesh.
+ */
+export declare function invalidateMorphCache(object3d: object): void;
 export declare function applyAppearanceToObject3D(object3d: Object3DLike, appearance: AvatarAppearance): void;
 export {};

package/dist/appearance/apply.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyAppearanceToObject3D = applyAppearanceToObject3D;
+exports.applyAppearanceToObject3D = exports.invalidateMorphCache = void 0;
 const matchers_1 = require("./matchers");
 const schema_1 = require("./schema");
 function asMaterialArray(material) {
@@ -12,13 +12,64 @@ function asMaterialArray(material) {
 function getVertexCount(mesh) {
     return mesh.geometry?.attributes?.position?.count ?? 0;
 }
+const morphCacheByScene = new WeakMap();
+function buildMorphCache(object3d) {
+    const cache = new Map();
+    object3d.traverse?.((object) => {
+        const mesh = object;
+        if (!mesh?.isMesh ||
+            !mesh.morphTargetDictionary ||
+            !mesh.morphTargetInfluences) {
+            return;
+        }
+        for (const [name, idx] of Object.entries(mesh.morphTargetDictionary)) {
+            // Index by both the full name AND the bare name after a colon prefix.
+            // RPM avatars use "Wolf3D_Head:browInnerUp" style names; we want to
+            // match lookups using just "browInnerUp" (the ARKit part).
+            const keys = new Set();
+            const fullKey = name.toLowerCase();
+            keys.add(fullKey);
+            const colonIdx = name.indexOf(':');
+            if (colonIdx !== -1) {
+                keys.add(name.slice(colonIdx + 1).toLowerCase());
+            }
+            for (const key of keys) {
+                if (!cache.has(key))
+                    cache.set(key, []);
+                cache.get(key).push({ influences: mesh.morphTargetInfluences, idx });
+            }
+        }
+    });
+    return cache;
+}
+function getMorphCache(object3d) {
+    // object3d must be an object reference for WeakMap
+    const key = object3d;
+    let cache = morphCacheByScene.get(key);
+    if (!cache) {
+        cache = buildMorphCache(object3d);
+        morphCacheByScene.set(key, cache);
+    }
+    return cache;
+}
+/**
+ * Invalidate the morph cache for a scene — call this when the avatar GLB
+ * is replaced (e.g. after a new model loads) so the next appearance update
+ * re-traverses the fresh mesh.
+ */
+function invalidateMorphCache(object3d) {
+    morphCacheByScene.delete(object3d);
+}
+exports.invalidateMorphCache = invalidateMorphCache;
+// ---------------------------------------------------------------------------
+// Main apply function
+// ---------------------------------------------------------------------------
 function applyAppearanceToObject3D(object3d, appearance) {
     if (typeof object3d.traverse !== 'function') {
         return;
     }
     const normalizedAppearance = (0, schema_1.normalizeAppearance)(appearance);
-    // First pass: apply name-matched colors and track whether skin was matched,
-    // also track the largest mesh for fallback skin coloring.
+    // --- Color pass (traverse every time — material refs may be shared) -------
     let skinMatched = false;
     let largestVertexCount = 0;
     let largestMeshMaterial = null;
@@ -34,8 +85,9 @@ function applyAppearanceToObject3D(object3d, appearance) {
             }
             const target = (0, matchers_1.pickTargetForMaterialName)(material.name);
             if (!target) {
-                // Track the largest unmatched mesh as a skin fallback candidate
-                if (vertexCount > largestVertexCount && material.color && typeof material.color.set === 'function') {
+                if (vertexCount > largestVertexCount &&
+                    material.color &&
+                    typeof material.color.set === 'function') {
                     largestVertexCount = vertexCount;
                     largestMeshMaterial = material;
                 }
@@ -51,9 +103,22 @@ function applyAppearanceToObject3D(object3d, appearance) {
             material.color.set(color);
         }
     });
-    // Second pass: if no skin material was found by name, apply skin color to
-    // the largest mesh — skin is the largest organ after all.
     if (!skinMatched && largestMeshMaterial && normalizedAppearance.skinColor) {
         largestMeshMaterial.color.set(normalizedAppearance.skinColor);
     }
+    // --- Face shape pass (cached morph target lookup) -------------------------
+    const weights = normalizedAppearance.faceShapeWeights;
+    if (!weights || Object.keys(weights).length === 0) {
+        return;
+    }
+    const cache = getMorphCache(object3d);
+    for (const [name, weight] of Object.entries(weights)) {
+        const entries = cache.get(name.toLowerCase());
+        if (!entries)
+            continue;
+        for (const { influences, idx } of entries) {
+            influences[idx] = weight;
+        }
+    }
 }
+exports.applyAppearanceToObject3D = applyAppearanceToObject3D;

package/dist/appearance/index.d.ts

@@ -1,4 +1,4 @@
-export { applyAppearanceToObject3D } from './apply';
+export { applyAppearanceToObject3D, invalidateMorphCache } from './apply';
 export { pickTargetForMaterialName } from './matchers';
 export { type AvatarAppearance, normalizeAppearance } from './schema';
 export type { AppearanceTarget } from './matchers';

package/dist/appearance/index.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeAppearance = exports.pickTargetForMaterialName = exports.applyAppearanceToObject3D = void 0;
+exports.normalizeAppearance = exports.pickTargetForMaterialName = exports.invalidateMorphCache = exports.applyAppearanceToObject3D = void 0;
 var apply_1 = require("./apply");
 Object.defineProperty(exports, "applyAppearanceToObject3D", { enumerable: true, get: function () { return apply_1.applyAppearanceToObject3D; } });
+Object.defineProperty(exports, "invalidateMorphCache", { enumerable: true, get: function () { return apply_1.invalidateMorphCache; } });
 var matchers_1 = require("./matchers");
 Object.defineProperty(exports, "pickTargetForMaterialName", { enumerable: true, get: function () { return matchers_1.pickTargetForMaterialName; } });
 var schema_1 = require("./schema");

package/dist/appearance/matchers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pickTargetForMaterialName = pickTargetForMaterialName;
+exports.pickTargetForMaterialName = void 0;
 function tokenizeMaterialName(name) {
     return name
         .replace(/([a-z\d])([A-Z])/g, '$1 $2')
@@ -33,3 +33,4 @@ function pickTargetForMaterialName(name) {
     }
     return null;
 }
+exports.pickTargetForMaterialName = pickTargetForMaterialName;

package/dist/appearance/schema.d.ts

@@ -4,5 +4,6 @@ export interface AvatarAppearance {
     hairColor?: string;
     skinColor?: string;
     eyeColor?: string;
+    faceShapeWeights?: Record<string, number>;
 }
 export declare function normalizeAppearance(input: AvatarAppearance): AvatarAppearance;

package/dist/appearance/schema.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeAppearance = normalizeAppearance;
+exports.normalizeAppearance = void 0;
 const HEX_COLOR_PATTERN = /^#(?:[\dA-Fa-f]{3}|[\dA-Fa-f]{6})$/;
 function normalizeHexColor(value) {
     if (!HEX_COLOR_PATTERN.test(value)) {
@@ -19,5 +19,7 @@ function normalizeAppearance(input) {
         hairColor: input.hairColor != null ? normalizeHexColor(input.hairColor) : undefined,
         skinColor: input.skinColor != null ? normalizeHexColor(input.skinColor) : undefined,
         eyeColor: input.eyeColor != null ? normalizeHexColor(input.eyeColor) : undefined,
+        faceShapeWeights: input.faceShapeWeights,
     };
 }
+exports.normalizeAppearance = normalizeAppearance;

package/dist/appearance/sharedState.d.ts

@@ -0,0 +1,11 @@
+import type { AvatarAppearance } from './schema';
+/**
+ * Module-level mutable ref shared between the outer React tree
+ * (CreatorApp) and the R3F Canvas (AvatarModel.useFrame).
+ *
+ * CreatorApp writes here on every appearance change.
+ * AvatarModel reads here every frame — no props-through-Canvas needed.
+ */
+export declare const sharedAppearance: {
+    current: AvatarAppearance;
+};

package/dist/appearance/sharedState.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sharedAppearance = void 0;
+/**
+ * Module-level mutable ref shared between the outer React tree
+ * (CreatorApp) and the R3F Canvas (AvatarModel.useFrame).
+ *
+ * CreatorApp writes here on every appearance change.
+ * AvatarModel reads here every frame — no props-through-Canvas needed.
+ */
+exports.sharedAppearance = {
+    current: { version: 1 },
+};

package/dist/editor/AvatarCanvas.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { AvatarAppearance } from '../appearance';
 import type { AssetPlacement, EquippedAsset } from './types';
 interface AvatarCanvasProps {

package/dist/editor/AvatarCanvas.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarCanvas = AvatarCanvas;
+exports.AvatarCanvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
 const drei_1 = require("@react-three/drei");
@@ -43,7 +43,7 @@ function AvatarCanvas({ avatarUrl, appearance, equipped = [], placements = {}, e
     ]
         .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 }), (0, jsx_runtime_1.jsx)(AvatarModel_1.AvatarModel, { url: avatarUrl, appearance: appearance, 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: !editingAssetId }), (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];
@@ -67,3 +67,4 @@ function AvatarCanvas({ avatarUrl, appearance, equipped = [], placements = {}, e
                                 return null;
                             })] }) }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: (0, jsx_runtime_1.jsx)("p", { children: "Select a base avatar to get started" }) }))] }));
 }
+exports.AvatarCanvas = AvatarCanvas;

package/dist/editor/AvatarModel.d.ts

@@ -1,11 +1,9 @@
 import { Vector3 } from 'three';
-import type { AvatarAppearance } from '../appearance';
 interface AvatarModelProps {
     url: string;
-    appearance?: AvatarAppearance;
     scale?: number;
     onSkeletonReady?: (skeleton: any) => void;
     onBoundsReady?: (center: typeof Vector3.prototype, height: number) => void;
 }
-export declare function AvatarModel({ url, appearance, scale, onSkeletonReady, onBoundsReady, }: AvatarModelProps): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarModel({ url, scale, onSkeletonReady, onBoundsReady, }: AvatarModelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor/AvatarModel.js

@@ -1,18 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarModel = AvatarModel;
+exports.AvatarModel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
 const drei_1 = require("@react-three/drei");
+const fiber_1 = require("@react-three/fiber");
 const react_1 = require("react");
 const three_1 = require("three");
 const appearance_1 = require("../appearance");
-function AvatarModel({ url, appearance, scale = 1, onSkeletonReady, onBoundsReady, }) {
+const sharedState_1 = require("../appearance/sharedState");
+function AvatarModel({ url, scale = 1, onSkeletonReady, onBoundsReady, }) {
     const { scene } = (0, drei_1.useGLTF)(url);
     const groupRef = (0, react_1.useRef)(null);
+    // Scene load / change: invalidate morph cache + report skeleton / bounds
     (0, react_1.useEffect)(() => {
         if (!scene)
             return;
+        (0, appearance_1.invalidateMorphCache)(scene);
         scene.traverse((child) => {
             if (child.isSkinnedMesh && child.skeleton) {
                 onSkeletonReady?.(child.skeleton);
@@ -26,10 +30,14 @@ function AvatarModel({ url, appearance, scale = 1, onSkeletonReady, onBoundsRead
             onBoundsReady(center, height);
         }
     }, [scene, onSkeletonReady, onBoundsReady]);
-    (0, react_1.useEffect)(() => {
+    // Apply appearance every frame from the shared module-level ref.
+    // sharedAppearance.current is written by CreatorApp outside the Canvas —
+    // no props chain, no circular deps, always fresh on every frame.
+    (0, fiber_1.useFrame)(() => {
         if (!scene)
             return;
-        (0, appearance_1.applyAppearanceToObject3D)(scene, appearance ?? { version: 1 });
-    }, [scene, appearance]);
+        (0, appearance_1.applyAppearanceToObject3D)(scene, sharedState_1.sharedAppearance.current);
+    });
     return (0, jsx_runtime_1.jsx)("primitive", { ref: groupRef, object: scene, scale: scale });
 }
+exports.AvatarModel = AvatarModel;

package/dist/editor/RigidAccessory.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RigidAccessory = RigidAccessory;
+exports.RigidAccessory = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
 const drei_1 = require("@react-three/drei");
@@ -76,3 +76,4 @@ 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,25 +15,15 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-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;
-    };
-})();
+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.SkinnedClothing = SkinnedClothing;
+exports.SkinnedClothing = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
 const drei_1 = require("@react-three/drei");
@@ -123,3 +113,4 @@ function SkinnedClothing({ url, avatarSkeleton }) {
     }, [scene, avatarSkeleton]);
     return (0, jsx_runtime_1.jsx)("group", { ref: groupRef });
 }
+exports.SkinnedClothing = SkinnedClothing;