talking-head-studio 0.4.10 → 0.4.12

package/dist/voice/useFaceControls.js

@@ -0,0 +1,81 @@
+"use strict";
+// src/voice/useFaceControls.ts
+// Derive a canonical FaceControl (pose + expression) from a TalkingHead viseme schedule.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFaceControlsFromVisemes = useFaceControlsFromVisemes;
+const react_1 = require("react");
+const morphTables_1 = require("../wgpu/morphTables");
+const faceControls_1 = require("../core/avatar/faceControls");
+function sampleExpressionAtTime(schedule, nowMs) {
+    const neutral = (0, faceControls_1.createNeutralExpression)();
+    if (!schedule.cues || schedule.cues.length === 0)
+        return neutral;
+    const startedAt = schedule.startedAtMs ?? nowMs;
+    const t = Math.max(0, nowMs - startedAt);
+    const cues = schedule.cues.filter((cue) => t >= cue.startMs && t <= cue.endMs);
+    if (cues.length === 0)
+        return neutral;
+    let expr = neutral;
+    for (const cue of cues) {
+        const rhubarbKey = cue.viseme;
+        const oculusViseme = (morphTables_1.RHUBARB_TO_VISEME[rhubarbKey] ?? 'sil');
+        const w = typeof cue.weight === 'number' ? cue.weight : 1;
+        expr = (0, faceControls_1.applyVisemeToExpression)(expr, oculusViseme, w);
+    }
+    return expr;
+}
+/**
+ * useFaceControlsFromVisemes
+ *
+ * Given a TalkingHead viseme schedule (Rhubarb shape cues + startedAtMs),
+ * produce a time-varying FaceControl object (neutral head pose + ExpressionState).
+ *
+ * This hook is intentionally simple: it drives expression purely from the
+ * viseme cues and keeps head pose neutral (0 yaw/pitch/roll). Downstream
+ * backends can layer motion / camera moves on top.
+ */
+function useFaceControlsFromVisemes(schedule) {
+    const [expr, setExpr] = (0, react_1.useState)(() => (0, faceControls_1.createNeutralExpression)());
+    const rafRef = (0, react_1.useRef)(null);
+    const scheduleRef = (0, react_1.useRef)(schedule);
+    (0, react_1.useEffect)(() => {
+        scheduleRef.current = schedule;
+    }, [schedule]);
+    (0, react_1.useEffect)(() => {
+        if (rafRef.current != null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+        if (!schedule || !schedule.cues || schedule.cues.length === 0) {
+            setExpr((0, faceControls_1.createNeutralExpression)());
+            return;
+        }
+        const lastEnd = Math.max(...schedule.cues.map((c) => c.endMs ?? 0));
+        const loop = () => {
+            const s = scheduleRef.current;
+            if (!s || !s.cues || s.cues.length === 0) {
+                setExpr((0, faceControls_1.createNeutralExpression)());
+                return;
+            }
+            const now = Date.now();
+            const nextExpr = sampleExpressionAtTime(s, now);
+            setExpr(nextExpr);
+            const startedAt = s.startedAtMs ?? now;
+            const t = Math.max(0, now - startedAt);
+            if (t <= lastEnd + 200) {
+                rafRef.current = requestAnimationFrame(loop);
+            }
+        };
+        rafRef.current = requestAnimationFrame(loop);
+        return () => {
+            if (rafRef.current != null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+    }, [schedule]);
+    return {
+        pose: { yaw: 0, pitch: 0, roll: 0 },
+        expr,
+    };
+}

package/dist/voice/useVoicePreview.d.ts

@@ -0,0 +1,7 @@
+export declare function configureVoicePreviewBaseUrl(url: string): void;
+export declare function useVoicePreview(): {
+    activeVoiceId: string | null;
+    loadingVoiceId: string | null;
+    previewVoice: (voiceId: string) => Promise<void>;
+    stopPreview: () => void;
+};

package/dist/voice/useVoicePreview.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configureVoicePreviewBaseUrl = configureVoicePreviewBaseUrl;
+exports.useVoicePreview = useVoicePreview;
+const react_1 = require("react");
+const expo_audio_1 = require("expo-audio");
+const studioApi_1 = require("../api/studioApi");
+let _baseUrl = process.env.EXPO_PUBLIC_BACKEND_URL ?? '';
+function configureVoicePreviewBaseUrl(url) {
+    _baseUrl = url;
+}
+async function fetchFirstSampleUrl(voiceId) {
+    const samples = await (0, studioApi_1.getVoiceProfileSamples)(voiceId);
+    if (!samples || samples.length === 0)
+        return null;
+    return `${_baseUrl}/samples/${samples[0].id}`;
+}
+function useVoicePreview() {
+    const [emptyPlayer] = (0, react_1.useState)(() => (0, expo_audio_1.createAudioPlayer)(null));
+    const playerRef = (0, react_1.useRef)(null);
+    const [player, setPlayer] = (0, react_1.useState)(null);
+    const [activeVoiceId, setActiveVoiceId] = (0, react_1.useState)(null);
+    const [loadingVoiceId, setLoadingVoiceId] = (0, react_1.useState)(null);
+    const status = (0, expo_audio_1.useAudioPlayerStatus)(player ?? emptyPlayer);
+    (0, react_1.useEffect)(() => {
+        if (status?.didJustFinish) {
+            setActiveVoiceId(null);
+        }
+    }, [status?.didJustFinish]);
+    const stopPreview = (0, react_1.useCallback)(() => {
+        if (playerRef.current) {
+            playerRef.current.pause();
+            playerRef.current.remove();
+            playerRef.current = null;
+        }
+        setPlayer(null);
+        setActiveVoiceId(null);
+        setLoadingVoiceId(null);
+    }, []);
+    const previewVoice = (0, react_1.useCallback)(async (voiceId) => {
+        if (!voiceId || loadingVoiceId === voiceId)
+            return;
+        if (activeVoiceId === voiceId) {
+            stopPreview();
+            return;
+        }
+        setLoadingVoiceId(voiceId);
+        stopPreview();
+        try {
+            const sampleUrl = await fetchFirstSampleUrl(voiceId);
+            if (!sampleUrl) {
+                setLoadingVoiceId(null);
+                return;
+            }
+            await (0, expo_audio_1.setAudioModeAsync)({
+                playsInSilentMode: true,
+                allowsRecording: false,
+                shouldPlayInBackground: false,
+                interruptionMode: 'mixWithOthers',
+            });
+            const newPlayer = (0, expo_audio_1.createAudioPlayer)(sampleUrl);
+            playerRef.current = newPlayer;
+            setPlayer(newPlayer);
+            newPlayer.play();
+            setLoadingVoiceId(null);
+            setActiveVoiceId(voiceId);
+        }
+        catch (err) {
+            console.error('[useVoicePreview] Failed to play sample:', err);
+            setLoadingVoiceId(null);
+            setActiveVoiceId(null);
+        }
+    }, [activeVoiceId, loadingVoiceId, stopPreview]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            playerRef.current?.pause();
+            playerRef.current?.remove();
+            playerRef.current = null;
+            emptyPlayer.remove();
+        };
+    }, [emptyPlayer]);
+    return { activeVoiceId, loadingVoiceId, previewVoice, stopPreview };
+}

package/dist/wardrobe/index.d.ts

@@ -1,2 +1,5 @@
 export * from './wardrobeStore';
 export { useAvatarWardrobeHydration } from './useAvatarWardrobeHydration';
+export { useStudioAvatar } from './useStudioAvatar';
+export type { UseStudioAvatarOptions, UseStudioAvatarResult } from './useStudioAvatar';
+export { useAccessoryGestures, applyDragTranslate, applyPinchScale, applyRotation, } from './useAccessoryGestures';

package/dist/wardrobe/index.js

@@ -14,7 +14,14 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAvatarWardrobeHydration = void 0;
+exports.applyRotation = exports.applyPinchScale = exports.applyDragTranslate = exports.useAccessoryGestures = exports.useStudioAvatar = exports.useAvatarWardrobeHydration = void 0;
 __exportStar(require("./wardrobeStore"), exports);
 var useAvatarWardrobeHydration_1 = require("./useAvatarWardrobeHydration");
 Object.defineProperty(exports, "useAvatarWardrobeHydration", { enumerable: true, get: function () { return useAvatarWardrobeHydration_1.useAvatarWardrobeHydration; } });
+var useStudioAvatar_1 = require("./useStudioAvatar");
+Object.defineProperty(exports, "useStudioAvatar", { enumerable: true, get: function () { return useStudioAvatar_1.useStudioAvatar; } });
+var useAccessoryGestures_1 = require("./useAccessoryGestures");
+Object.defineProperty(exports, "useAccessoryGestures", { enumerable: true, get: function () { return useAccessoryGestures_1.useAccessoryGestures; } });
+Object.defineProperty(exports, "applyDragTranslate", { enumerable: true, get: function () { return useAccessoryGestures_1.applyDragTranslate; } });
+Object.defineProperty(exports, "applyPinchScale", { enumerable: true, get: function () { return useAccessoryGestures_1.applyPinchScale; } });
+Object.defineProperty(exports, "applyRotation", { enumerable: true, get: function () { return useAccessoryGestures_1.applyRotation; } });

package/dist/wardrobe/useAccessoryGestures.d.ts

@@ -0,0 +1,20 @@
+import { type AssetPlacement } from './wardrobeStore';
+/**
+ * Translate a position by screen-space drag deltas.
+ * Z is intentionally locked — drag stays in the XY plane to avoid depth
+ * artifacts from single-finger gestures.
+ */
+export declare function applyDragTranslate(startPos: [number, number, number], translationX: number, translationY: number, sensitivity?: number): [number, number, number];
+/**
+ * Scale a [x, y, z] triple by a pinch factor, clamped to [0.1, 10].
+ */
+export declare function applyPinchScale(startScale: [number, number, number], scaleFactor: number): [number, number, number];
+/**
+ * Accumulate Euler rotation from gesture deltas (radians).
+ * deltaX maps to Y-axis (yaw), deltaY maps to X-axis (pitch).
+ */
+export declare function applyRotation(startRot: [number, number, number], deltaX: number, deltaY: number): [number, number, number];
+export declare function useAccessoryGestures(): {
+    commitTransform: (id: string, placement: AssetPlacement) => void;
+    selectAccessory: (id: string) => Promise<void>;
+};

package/dist/wardrobe/useAccessoryGestures.js

@@ -0,0 +1,94 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyDragTranslate = applyDragTranslate;
+exports.applyPinchScale = applyPinchScale;
+exports.applyRotation = applyRotation;
+exports.useAccessoryGestures = useAccessoryGestures;
+const Haptics = __importStar(require("expo-haptics"));
+const wardrobeStore_1 = require("./wardrobeStore");
+// ---------------------------------------------------------------------------
+// Pure math helpers — 'worklet' annotated so they can run on the UI thread
+// via react-native-reanimated gesture handlers.
+// ---------------------------------------------------------------------------
+/**
+ * Translate a position by screen-space drag deltas.
+ * Z is intentionally locked — drag stays in the XY plane to avoid depth
+ * artifacts from single-finger gestures.
+ */
+function applyDragTranslate(startPos, translationX, translationY, sensitivity = 0.01) {
+    return [
+        startPos[0] + translationX * sensitivity,
+        startPos[1] - translationY * sensitivity,
+        startPos[2],
+    ];
+}
+/**
+ * Scale a [x, y, z] triple by a pinch factor, clamped to [0.1, 10].
+ */
+function applyPinchScale(startScale, scaleFactor) {
+    const clamp = (v) => Math.max(0.1, Math.min(v, 10));
+    return [
+        clamp(startScale[0] * scaleFactor),
+        clamp(startScale[1] * scaleFactor),
+        clamp(startScale[2] * scaleFactor),
+    ];
+}
+/**
+ * Accumulate Euler rotation from gesture deltas (radians).
+ * deltaX maps to Y-axis (yaw), deltaY maps to X-axis (pitch).
+ */
+function applyRotation(startRot, deltaX, deltaY) {
+    return [
+        startRot[0] + deltaY,
+        startRot[1] + deltaX,
+        startRot[2],
+    ];
+}
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+function useAccessoryGestures() {
+    const setActiveAsset = (0, wardrobeStore_1.useWardrobeStore)((state) => state.setActiveAsset);
+    const setPlacement = (0, wardrobeStore_1.useWardrobeStore)((state) => state.setPlacement);
+    const commitTransform = (id, placement) => {
+        setPlacement(id, placement);
+    };
+    const selectAccessory = async (id) => {
+        setActiveAsset(id);
+        await Haptics.selectionAsync();
+    };
+    return { commitTransform, selectAccessory };
+}

package/dist/wardrobe/useAvatarWardrobeHydration.js

@@ -1,14 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAvatarWardrobeHydration = void 0;
+exports.useAvatarWardrobeHydration = useAvatarWardrobeHydration;
 const react_1 = require("react");
 const studioApi_1 = require("../api/studioApi");
 const wardrobeStore_1 = require("./wardrobeStore");
 function useAvatarWardrobeHydration({ avatarId, accessories, }) {
     const hydrateFromApi = (0, wardrobeStore_1.useWardrobeStore)((s) => s.hydrateFromApi);
+    const accessoriesRef = (0, react_1.useRef)(accessories ?? []);
     const accessorySignature = (0, react_1.useMemo)(() => JSON.stringify(accessories ?? []), [accessories]);
     (0, react_1.useEffect)(() => {
-        const nextAccessories = accessories ?? [];
+        accessoriesRef.current = accessories ?? [];
+    }, [accessories]);
+    (0, react_1.useEffect)(() => {
+        const nextAccessories = accessoriesRef.current;
         if (!avatarId || nextAccessories.length === 0) {
             hydrateFromApi([], {});
             return;
@@ -25,11 +29,12 @@ function useAvatarWardrobeHydration({ avatarId, accessories, }) {
             hydrateFromApi(nextAccessories, lookup);
         })
             .catch((err) => {
+            if (cancelled)
+                return;
             console.error('[useAvatarWardrobeHydration] Failed to hydrate wardrobe:', err);
         });
         return () => {
             cancelled = true;
         };
-    }, [accessorySignature, avatarId, hydrateFromApi, accessories]);
+    }, [accessorySignature, avatarId, hydrateFromApi]);
 }
-exports.useAvatarWardrobeHydration = useAvatarWardrobeHydration;

package/dist/wardrobe/useStudioAvatar.d.ts

@@ -0,0 +1,29 @@
+import type { Avatar } from '../api/types';
+export interface UseStudioAvatarOptions {
+    avatarId: string;
+}
+export interface UseStudioAvatarResult {
+    avatar: Avatar | null;
+    loading: boolean;
+    error: string | null;
+    name: string;
+    setName: (name: string) => void;
+    description: string;
+    setDescription: (desc: string) => void;
+    isPublic: boolean;
+    setIsPublic: (v: boolean) => void;
+    hairColor: string;
+    setHairColor: (color: string) => void;
+    skinColor: string;
+    setSkinColor: (color: string) => void;
+    eyeColor: string;
+    setEyeColor: (color: string) => void;
+    voiceProfileId: string | null;
+    setVoiceProfileId: (id: string | null) => void;
+    isDirty: boolean;
+    saving: boolean;
+    save: () => Promise<void>;
+    revert: () => void;
+    reload: () => Promise<void>;
+}
+export declare function useStudioAvatar({ avatarId }: UseStudioAvatarOptions): UseStudioAvatarResult;

package/dist/wardrobe/useStudioAvatar.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStudioAvatar = useStudioAvatar;
+const react_1 = require("react");
+const studioApi_1 = require("../api/studioApi");
+const wardrobeStore_1 = require("./wardrobeStore");
+const DEFAULT_HAIR_COLOR = '#4a3728';
+const DEFAULT_SKIN_COLOR = '#f5d0b0';
+const DEFAULT_EYE_COLOR = '#5b7553';
+function extractHairColor(a) {
+    return a?.appearance?.hairColor ?? DEFAULT_HAIR_COLOR;
+}
+function extractSkinColor(a) {
+    return a?.appearance?.skinColor ?? DEFAULT_SKIN_COLOR;
+}
+function extractEyeColor(a) {
+    return a?.appearance?.eyeColor ?? DEFAULT_EYE_COLOR;
+}
+function useStudioAvatar({ avatarId }) {
+    const [avatar, setAvatar] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const [name, setName] = (0, react_1.useState)('');
+    const [description, setDescription] = (0, react_1.useState)('');
+    const [isPublic, setIsPublic] = (0, react_1.useState)(false);
+    const [hairColor, setHairColor] = (0, react_1.useState)(DEFAULT_HAIR_COLOR);
+    const [skinColor, setSkinColor] = (0, react_1.useState)(DEFAULT_SKIN_COLOR);
+    const [eyeColor, setEyeColor] = (0, react_1.useState)(DEFAULT_EYE_COLOR);
+    const [voiceProfileId, setVoiceProfileId] = (0, react_1.useState)(null);
+    const populateFromAvatar = (0, react_1.useCallback)((a) => {
+        setName(a.name);
+        setDescription(a.description ?? '');
+        setIsPublic(a.is_public);
+        setHairColor(extractHairColor(a));
+        setSkinColor(extractSkinColor(a));
+        setEyeColor(extractEyeColor(a));
+        setVoiceProfileId(a.default_voice_profile_id);
+    }, []);
+    const fetchAvatar = (0, react_1.useCallback)(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const a = await (0, studioApi_1.getAvatar)(avatarId);
+            setAvatar(a);
+            populateFromAvatar(a);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load avatar');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [avatarId, populateFromAvatar]);
+    (0, react_1.useEffect)(() => {
+        void fetchAvatar();
+    }, [fetchAvatar]);
+    const equipped = (0, wardrobeStore_1.useWardrobeStore)((s) => s.equipped);
+    const placements = (0, wardrobeStore_1.useWardrobeStore)((s) => s.placements);
+    const isDirty = (0, react_1.useMemo)(() => {
+        if (!avatar)
+            return false;
+        if (name !== avatar.name)
+            return true;
+        if (description !== (avatar.description ?? ''))
+            return true;
+        if (isPublic !== avatar.is_public)
+            return true;
+        if (hairColor !== extractHairColor(avatar))
+            return true;
+        if (skinColor !== extractSkinColor(avatar))
+            return true;
+        if (eyeColor !== extractEyeColor(avatar))
+            return true;
+        if (voiceProfileId !== avatar.default_voice_profile_id)
+            return true;
+        const serialized = Object.values(equipped).map((asset) => {
+            const placement = placements[asset.id];
+            return {
+                asset_id: asset.id,
+                bone: placement?.bone ?? 'Head',
+                position: placement?.position ?? [0, 0, 0],
+                rotation: placement?.rotation ?? [0, 0, 0],
+                scale: placement?.scale ?? 1,
+            };
+        });
+        const serverAccs = avatar.appearance?.equippedAccessories ?? [];
+        if (serialized.length !== serverAccs.length)
+            return true;
+        for (const acc of serialized) {
+            const serverMatch = serverAccs.find((sa) => sa.asset_id === acc.asset_id);
+            if (!serverMatch)
+                return true;
+            if (serverMatch.bone !== acc.bone)
+                return true;
+            if (serverMatch.scale !== acc.scale)
+                return true;
+            if (serverMatch.position?.join(',') !== acc.position?.join(','))
+                return true;
+            if (serverMatch.rotation?.join(',') !== acc.rotation?.join(','))
+                return true;
+        }
+        return false;
+    }, [avatar, name, description, isPublic, hairColor, skinColor, eyeColor, voiceProfileId, equipped, placements]);
+    const save = (0, react_1.useCallback)(async () => {
+        if (!avatar)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            const update = {};
+            if (name !== avatar.name)
+                update.name = name;
+            if (description !== (avatar.description ?? ''))
+                update.description = description;
+            if (isPublic !== avatar.is_public)
+                update.is_public = isPublic;
+            const equippedAccessories = wardrobeStore_1.useWardrobeStore.getState().serializeForApi();
+            const serverAccs = avatar.appearance?.equippedAccessories ?? [];
+            const accessoriesChanged = equippedAccessories.length !== serverAccs.length ||
+                equippedAccessories.some((acc) => {
+                    const serverMatch = serverAccs.find((sa) => sa.asset_id === acc.asset_id);
+                    if (!serverMatch)
+                        return true;
+                    if (serverMatch.bone !== acc.bone)
+                        return true;
+                    if (serverMatch.scale !== acc.scale)
+                        return true;
+                    if (serverMatch.position?.join(',') !== acc.position?.join(','))
+                        return true;
+                    if (serverMatch.rotation?.join(',') !== acc.rotation?.join(','))
+                        return true;
+                    return false;
+                });
+            if (hairColor !== extractHairColor(avatar) ||
+                skinColor !== extractSkinColor(avatar) ||
+                eyeColor !== extractEyeColor(avatar) ||
+                accessoriesChanged) {
+                const appearance = {
+                    version: 1,
+                    ...(hairColor ? { hairColor } : {}),
+                    ...(skinColor ? { skinColor } : {}),
+                    ...(eyeColor ? { eyeColor } : {}),
+                    equippedAccessories,
+                };
+                update.appearance = appearance;
+            }
+            if (Object.keys(update).length > 0) {
+                await (0, studioApi_1.updateAvatar)(avatarId, update);
+            }
+            const serverVoice = avatar.default_voice_profile_id;
+            if (voiceProfileId !== serverVoice) {
+                if (voiceProfileId) {
+                    await (0, studioApi_1.setDefaultVoice)(avatarId, voiceProfileId);
+                }
+                else {
+                    await (0, studioApi_1.removeDefaultVoice)(avatarId);
+                }
+            }
+            await fetchAvatar();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to save avatar');
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [avatar, avatarId, name, description, isPublic, hairColor, skinColor, eyeColor, voiceProfileId, fetchAvatar]);
+    const revert = (0, react_1.useCallback)(() => {
+        if (avatar)
+            populateFromAvatar(avatar);
+    }, [avatar, populateFromAvatar]);
+    return {
+        avatar, loading, error,
+        name, setName,
+        description, setDescription,
+        isPublic, setIsPublic,
+        hairColor, setHairColor,
+        skinColor, setSkinColor,
+        eyeColor, setEyeColor,
+        voiceProfileId, setVoiceProfileId,
+        isDirty, saving,
+        save, revert,
+        reload: fetchAvatar,
+    };
+}

package/dist/wardrobe/wardrobeStore.d.ts

@@ -17,6 +17,8 @@ export interface WardrobeState {
     gizmoMode: GizmoMode;
     /** ID of the avatar currently synced to avoid redundant fetches */
     syncedAvatarId: string | null;
+    /** ID of the avatar currently being fetched, used to ignore stale sync results. */
+    syncingAvatarId: string | null;
     equip: (slot: string, asset: WearableAsset) => void;
     unequip: (slot: string) => void;
     setPlacement: (assetId: string, placement: AssetPlacement) => void;

package/dist/wardrobe/wardrobeStore.js

@@ -22,12 +22,12 @@ exports.useWardrobeStore = (0, zustand_1.create)()((set, get) => ({
     activeAssetId: null,
     gizmoMode: 'translate',
     syncedAvatarId: null,
+    syncingAvatarId: null,
     equip: (slot, asset) => set((state) => ({
         equipped: { ...state.equipped, [slot]: asset },
     })),
     unequip: (slot) => set((state) => {
         const removed = state.equipped[slot];
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { [slot]: _removed, ...restEquipped } = state.equipped;
         // Clean up placement data for the removed asset
         const placements = { ...state.placements };
@@ -70,18 +70,26 @@ exports.useWardrobeStore = (0, zustand_1.create)()((set, get) => ({
             return;
         if (get().syncedAvatarId === avatarId)
             return;
+        if (get().syncingAvatarId === avatarId)
+            return;
         get().reset();
+        set({ syncingAvatarId: avatarId });
         try {
             const [avatar, allAssets] = await Promise.all([(0, studioApi_1.getAvatar)(avatarId), (0, studioApi_1.listAssets)()]);
+            if (get().syncingAvatarId !== avatarId)
+                return;
             const lookup = {};
             for (const a of allAssets)
                 lookup[a.id] = a;
             const accessories = avatar.appearance?.equippedAccessories ?? [];
             get().hydrateFromApi(accessories, lookup);
-            set({ syncedAvatarId: avatarId });
+            set({ syncedAvatarId: avatarId, syncingAvatarId: null });
         }
         catch (e) {
             console.warn('[WardrobeStore] Failed to load avatar accessories:', e);
+            if (get().syncingAvatarId === avatarId) {
+                set({ syncingAvatarId: null });
+            }
         }
     },
     serializeForApi: () => {
@@ -102,5 +110,7 @@ exports.useWardrobeStore = (0, zustand_1.create)()((set, get) => ({
         placements: {},
         activeAssetId: null,
         gizmoMode: 'translate',
+        syncedAvatarId: null,
+        syncingAvatarId: null,
     }),
 }));

package/dist/wgpu/R3FWebGpuCanvas.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import * as THREE from 'three';
+import type { RootState } from '@react-three/fiber';
+type CameraProps = THREE.Camera | Record<string, unknown>;
+interface R3FWebGpuCanvasProps {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    camera?: CameraProps;
+    clearColor?: string;
+    onCreated?: (state: RootState) => void;
+    onError?: (message: string) => void;
+}
+export declare function R3FWebGpuCanvas({ children, style, camera, clearColor, onCreated, onError, }: R3FWebGpuCanvasProps): import("react/jsx-runtime").JSX.Element;
+export {};