talking-head-studio 0.2.9 → 0.3.1

package/dist/TalkingHead.js

@@ -57,14 +57,42 @@ exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'n
             }
         };
     }, [avatarUrl, authToken, vendorBaseUrl]);
-    const post = (0, react_1.useCallback)((msg) => {
+    const postQueue = (0, react_1.useRef)([]);
+    const flushTimer = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => () => {
+        if (flushTimer.current)
+            clearTimeout(flushTimer.current);
+    }, []);
+    const flushQueue = (0, react_1.useCallback)(() => {
+        flushTimer.current = null;
         try {
-            webViewRef.current?.postMessage(JSON.stringify(msg));
+            const wv = webViewRef.current;
+            if (!wv)
+                return;
+            const msgs = postQueue.current.splice(0);
+            if (msgs.length === 0)
+                return;
+            // Batch all pending messages into a single injectJavaScript call
+            const js = msgs
+                .map((m) => {
+                const json = JSON.stringify(JSON.stringify(m));
+                return `window.dispatchEvent(new MessageEvent('message',{data:${json}}))`;
+            })
+                .join(';');
+            wv.injectJavaScript(js + ';true;');
         }
         catch {
             // WebView ref frozen/invalidated during unmount — ignore
+            postQueue.current = [];
         }
     }, []);
+    const post = (0, react_1.useCallback)((msg) => {
+        postQueue.current.push(msg);
+        // Coalesce into a single microtask to avoid flooding injectJavaScript
+        if (!flushTimer.current) {
+            flushTimer.current = setTimeout(flushQueue, 0);
+        }
+    }, [flushQueue]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         sendAmplitude: (amplitude) => post({ type: 'amplitude', value: amplitude }),
         sendViseme: (viseme, weight = 1.0) => post({ type: 'viseme', viseme, weight }),

package/dist/TalkingHeadVisualization.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+import { type TalkingHeadMood, type TalkingHeadAccessory, type TalkingHeadViseme, type TalkingHeadVisemeSchedule } from './TalkingHead';
+interface TalkingHeadVisualizationProps {
+    style?: StyleProp<ViewStyle>;
+    avatarUrl: string | null;
+    authToken?: string;
+    cameraView?: 'head' | 'upper' | 'full';
+    cameraDistance?: number;
+    accessories?: TalkingHeadAccessory[];
+    mood?: TalkingHeadMood;
+    aspect?: number;
+    focalLength?: number;
+    visemeSchedule?: TalkingHeadVisemeSchedule | null;
+    onVisemeScheduleApplied?: (info: {
+        requestId: string | null;
+        appliedAtMs: number;
+    }) => void;
+    vendorBaseUrl?: string | null;
+}
+export interface TalkingHeadVisualizationRef {
+    setMood: (mood: TalkingHeadMood) => void;
+    sendAmplitude: (amplitude: number) => void;
+    sendViseme: (viseme: TalkingHeadViseme, weight?: number) => void;
+    scheduleVisemes: (schedule: TalkingHeadVisemeSchedule) => void;
+    clearVisemes: () => void;
+}
+/**
+ * TalkingHeadVisualization — optimized component for rendering the 3D avatar.
+ *
+ * On native: uses FilamentAvatar (direct morph writes, no WebView bridge).
+ * On web: uses TalkingHead WebView renderer.
+ */
+export declare const TalkingHeadVisualization: React.ForwardRefExoticComponent<TalkingHeadVisualizationProps & React.RefAttributes<TalkingHeadVisualizationRef>>;
+export {};

package/dist/TalkingHeadVisualization.js

@@ -0,0 +1,277 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TalkingHeadVisualization = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const TalkingHead_1 = require("./TalkingHead");
+const FilamentAvatar_1 = require("./filament/FilamentAvatar");
+const avatarUtils_1 = require("./utils/avatarUtils");
+const faceSqueezeAssets_1 = require("./filament/faceSqueezeAssets");
+// Cached fallback data URI — resolved once, reused across all instances
+let _fallbackDataUri = null;
+let _fallbackPromise = null;
+function getFallbackAvatarUrl() {
+    if (_fallbackDataUri)
+        return Promise.resolve(_fallbackDataUri);
+    if (!_fallbackPromise) {
+        _fallbackPromise = (0, avatarUtils_1.resolveLocalAssetUrl)(faceSqueezeAssets_1.FACE_SQUEEZE_LOCAL_MODULE).then((uri) => {
+            _fallbackDataUri = uri;
+            return uri;
+        });
+    }
+    return _fallbackPromise;
+}
+function getLoadingLabel(stage) {
+    switch (stage) {
+        case 'fetching_model':
+            return 'Fetching avatar';
+        case 'loading_avatar':
+            return 'Loading avatar';
+        case 'loading_fallback':
+            return 'Loading viewer';
+        case 'ready':
+            return 'Ready';
+        case 'booting':
+        default:
+            return 'Starting avatar';
+    }
+}
+/**
+ * TalkingHeadVisualization — optimized component for rendering the 3D avatar.
+ *
+ * On native: uses FilamentAvatar (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
+    // 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), []);
+    // Fallback local GLB data URI — resolved once on mount
+    const [fallbackUrl, setFallbackUrl] = (0, react_1.useState)(_fallbackDataUri);
+    (0, react_1.useEffect)(() => {
+        if (_fallbackDataUri) {
+            setFallbackUrl(_fallbackDataUri);
+            return;
+        }
+        getFallbackAvatarUrl().then((u) => u && setFallbackUrl(u));
+    }, []);
+    const [mood, setMood] = (0, react_1.useState)(initialMood);
+    const [isAvatarReady, setIsAvatarReady] = (0, react_1.useState)(false);
+    const [avatarError, setAvatarError] = (0, react_1.useState)(null);
+    const [useFallback, setUseFallback] = (0, react_1.useState)(false);
+    const [loadingState, setLoadingState] = (0, react_1.useState)({
+        stage: 'booting',
+        progress: null,
+    });
+    const pendingVisemeScheduleRef = (0, react_1.useRef)(null);
+    const lastScheduledVisemeKeyRef = (0, react_1.useRef)(null);
+    const handleReady = (0, react_1.useCallback)(() => {
+        setAvatarError(null);
+        setIsAvatarReady(true);
+        setLoadingState({ stage: 'ready', progress: 100 });
+        const pendingSchedule = pendingVisemeScheduleRef.current;
+        if (!pendingSchedule)
+            return;
+        const ageMs = typeof pendingSchedule.startedAtMs === 'number'
+            ? Math.max(0, Date.now() - pendingSchedule.startedAtMs)
+            : null;
+        const durationMs = pendingSchedule.durationMs ?? 0;
+        // Drop if audio already finished playing
+        if (ageMs != null && durationMs > 0 && ageMs > durationMs + 500) {
+            __DEV__ && console.log('[TalkingHead] Dropping expired pending viseme schedule', {
+                requestId: pendingSchedule.requestId ?? null,
+                ageMs,
+                durationMs,
+            });
+            pendingVisemeScheduleRef.current = null;
+            return;
+        }
+        __DEV__ && console.log('[TalkingHead] Applying pending viseme schedule', {
+            requestId: pendingSchedule.requestId ?? null,
+            cues: pendingSchedule.cues.length,
+            ageMs,
+        });
+        activeAvatar()?.scheduleVisemes(pendingSchedule);
+        onVisemeScheduleApplied?.({
+            requestId: pendingSchedule.requestId ?? null,
+            appliedAtMs: Date.now(),
+        });
+        lastScheduledVisemeKeyRef.current = `${pendingSchedule.requestId ?? 'anonymous'}:${pendingSchedule.startedAtMs ?? 0}`;
+        pendingVisemeScheduleRef.current = null;
+    }, [onVisemeScheduleApplied, activeAvatar]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setMood: (m) => setMood(m),
+        sendAmplitude: (a) => activeAvatar()?.sendAmplitude(a),
+        sendViseme: (viseme, weight) => activeAvatar()?.sendViseme(viseme, weight),
+        clearVisemes: () => activeAvatar()?.clearVisemes(),
+        scheduleVisemes: (schedule) => {
+            const scheduleKey = `${schedule.requestId ?? 'anonymous'}:${schedule.startedAtMs ?? 0}`;
+            if (lastScheduledVisemeKeyRef.current === scheduleKey)
+                return;
+            const av = activeAvatar();
+            // Filament buffers pending schedules internally — no ready gate needed.
+            // WebView (avatarRef) still needs the ready gate.
+            if (!av || (!filamentRef.current && !isAvatarReady)) {
+                pendingVisemeScheduleRef.current = schedule;
+                return;
+            }
+            av.scheduleVisemes(schedule);
+            onVisemeScheduleApplied?.({ requestId: schedule.requestId ?? null, appliedAtMs: Date.now() });
+            lastScheduledVisemeKeyRef.current = scheduleKey;
+        },
+    }), [isAvatarReady, onVisemeScheduleApplied, activeAvatar]);
+    (0, react_1.useEffect)(() => {
+        setMood(initialMood);
+    }, [initialMood]);
+    (0, react_1.useEffect)(() => {
+        setIsAvatarReady(false);
+        setAvatarError(null);
+        setUseFallback(false);
+        setLoadingState({ stage: 'booting', progress: null });
+        pendingVisemeScheduleRef.current = null;
+        lastScheduledVisemeKeyRef.current = null;
+    }, [avatarUrl]);
+    const handleError = (0, react_1.useCallback)((message) => {
+        console.warn('[TalkingHeadVisualization] Avatar load failed, switching to fallback:', message);
+        setAvatarError(message);
+        setUseFallback(true);
+    }, []);
+    // Effective avatar URL: use remote if available, fallback GLB if error or missing
+    const effectiveAvatarUrl = useFallback || !avatarUrl ? fallbackUrl : avatarUrl;
+    const handleLoadingChange = (0, react_1.useCallback)((nextState) => {
+        setLoadingState({
+            stage: nextState.stage,
+            progress: typeof nextState.progress === 'number' && Number.isFinite(nextState.progress)
+                ? Math.max(0, Math.min(100, Math.round(nextState.progress)))
+                : null,
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!visemeSchedule || visemeSchedule.cues.length === 0)
+            return;
+        const scheduleKey = `${visemeSchedule.requestId ?? 'anonymous'}:${visemeSchedule.startedAtMs ?? 0}`;
+        if (lastScheduledVisemeKeyRef.current === scheduleKey)
+            return;
+        __DEV__ && console.log('[TalkingHead] Received viseme schedule', {
+            requestId: visemeSchedule.requestId ?? null,
+            cues: visemeSchedule.cues.length,
+            ageMs: typeof visemeSchedule.startedAtMs === 'number'
+                ? Math.max(0, Date.now() - visemeSchedule.startedAtMs)
+                : null,
+            ready: isAvatarReady,
+        });
+        const av = activeAvatar();
+        if (!av || (!filamentRef.current && !isAvatarReady)) {
+            pendingVisemeScheduleRef.current = visemeSchedule;
+            return;
+        }
+        __DEV__ && console.log('[TalkingHead] Scheduling visemes immediately', {
+            requestId: visemeSchedule.requestId ?? null,
+            cues: visemeSchedule.cues.length,
+        });
+        av.scheduleVisemes(visemeSchedule);
+        onVisemeScheduleApplied?.({
+            requestId: visemeSchedule.requestId ?? null,
+            appliedAtMs: Date.now(),
+        });
+        lastScheduledVisemeKeyRef.current = scheduleKey;
+    }, [isAvatarReady, onVisemeScheduleApplied, visemeSchedule, activeAvatar]);
+    // On native use Filament — 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;
+                if (typeof ref === 'function')
+                    ref(fr);
+                else if (ref)
+                    ref.current = fr;
+                if (fr && pendingVisemeScheduleRef.current) {
+                    fr.scheduleVisemes(pendingVisemeScheduleRef.current);
+                    pendingVisemeScheduleRef.current = null;
+                }
+            }, style: style, avatarUrl: avatarUrl ?? null, aspect: aspect, mood: mood, accessories: accessories, onReady: handleReady, onError: handleError }));
+    }
+    if (!effectiveAvatarUrl) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [style, styles.placeholder] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [style, styles.container], pointerEvents: "box-none", children: [(0, jsx_runtime_1.jsx)(TalkingHead_1.TalkingHead, { ref: avatarRef, avatarUrl: effectiveAvatarUrl, authToken: authToken, cameraView: cameraView, cameraDistance: cameraDistance, accessories: accessories, mood: mood, onLoadingChange: handleLoadingChange, onReady: handleReady, onError: handleError, style: react_native_1.StyleSheet.absoluteFill, vendorBaseUrl: vendorBaseUrl }), !isAvatarReady && ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "talking-head-loading", style: styles.loadingOverlay, pointerEvents: "none", children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.loadingCard, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.loadingBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingBadgeText, children: "AVATAR" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingTitle, children: avatarError ? 'Avatar failed to load' : getLoadingLabel(loadingState.stage) }), avatarError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingHint, children: avatarError })) : typeof loadingState.progress === 'number' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.loadingPercent, children: [loadingState.progress, "%"] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressTrack, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                            styles.progressFill,
+                                            { width: `${Math.max(6, loadingState.progress)}%` },
+                                        ] }) })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingHint, children: "Preparing the avatar scene\u2026" }))] }) }))] }));
+});
+exports.TalkingHeadVisualization.displayName = 'TalkingHeadVisualization';
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+    },
+    loadingOverlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(5, 10, 18, 0.42)',
+        padding: 20,
+    },
+    loadingCard: {
+        minWidth: 190,
+        maxWidth: 240,
+        borderRadius: 20,
+        paddingHorizontal: 18,
+        paddingVertical: 16,
+        backgroundColor: 'rgba(13, 20, 31, 0.88)',
+        borderWidth: 1,
+        borderColor: 'rgba(151, 163, 184, 0.18)',
+        alignItems: 'center',
+    },
+    loadingBadge: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 999,
+        backgroundColor: 'rgba(83, 156, 255, 0.16)',
+        marginBottom: 10,
+    },
+    loadingBadgeText: {
+        color: '#c7dbff',
+        fontSize: 10,
+        fontWeight: '700',
+        letterSpacing: 1.1,
+    },
+    loadingTitle: {
+        color: '#f8fbff',
+        fontSize: 18,
+        fontWeight: '700',
+    },
+    loadingPercent: {
+        marginTop: 8,
+        color: '#7dd3fc',
+        fontSize: 28,
+        fontWeight: '800',
+    },
+    loadingHint: {
+        marginTop: 10,
+        color: 'rgba(226, 232, 240, 0.82)',
+        fontSize: 13,
+        textAlign: 'center',
+    },
+    progressTrack: {
+        width: '100%',
+        height: 8,
+        borderRadius: 999,
+        backgroundColor: 'rgba(148, 163, 184, 0.18)',
+        marginTop: 12,
+        overflow: 'hidden',
+    },
+    progressFill: {
+        height: '100%',
+        borderRadius: 999,
+        backgroundColor: '#5eead4',
+    },
+    placeholder: {
+        backgroundColor: 'rgba(30,34,53,0.5)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/dist/api/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './studioApi';

package/dist/api/index.js

@@ -0,0 +1,18 @@
+"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 __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 });
+__exportStar(require("./types"), exports);
+__exportStar(require("./studioApi"), exports);

package/dist/api/studioApi.d.ts

@@ -0,0 +1,38 @@
+import type { Avatar, AvatarUpdate, PublicAvatar, VoiceProfile, ProfileSample, WearableAsset, PlacementSuggestion } from './types';
+export declare function configureAvatarApi(opts: {
+    baseUrl?: string;
+    getToken: () => Promise<string | null>;
+}): void;
+export declare function getToken(): Promise<string | null>;
+export declare function studioFetch<T>(path: string, options?: RequestInit): Promise<T>;
+export declare function getMyAvatars(): Promise<Avatar[]>;
+export declare function getAvatar(id: string): Promise<Avatar>;
+export declare function updateAvatar(id: string, data: AvatarUpdate): Promise<Avatar>;
+export declare function deleteAvatar(id: string): Promise<void>;
+export declare function createAvatar(fileUri: string, name: string, description?: string): Promise<Avatar>;
+export declare function getPublicAvatars(): Promise<PublicAvatar[]>;
+export declare function getVoiceProfileSamples(profileId: string): Promise<ProfileSample[]>;
+export declare function getVoiceProfiles(): Promise<VoiceProfile[]>;
+export declare function setDefaultVoice(avatarId: string, profileId: string): Promise<Avatar>;
+export declare function removeDefaultVoice(avatarId: string): Promise<Avatar>;
+export declare function avatarFileUrl(avatar: Avatar): string;
+export declare function avatarThumbnailUrl(avatar: Avatar | PublicAvatar): string | null;
+export declare function avatarAnimatedThumbnailUrl(avatar: Avatar | PublicAvatar): string | null;
+export declare function thumbnailHeaders(): Promise<Record<string, string>>;
+export declare function listAssets(category?: string): Promise<WearableAsset[]>;
+export declare function getAsset(id: string): Promise<WearableAsset>;
+export declare function uploadAsset(fileUri: string, meta: {
+    name: string;
+    category: string;
+    type: 'skinned' | 'rigid';
+    slot?: string;
+    attach_bone?: string;
+    offset_position?: number[];
+    offset_rotation?: number[];
+    hides_body_parts?: string[];
+}): Promise<WearableAsset>;
+export declare function deleteAsset(id: string): Promise<void>;
+export declare function suggestPlacement(assetId: string, avatarId: string): Promise<PlacementSuggestion>;
+export declare function assetFileUrl(asset: WearableAsset): string;
+export declare function createVoiceProfile(name: string, language?: string): Promise<VoiceProfile>;
+export declare function uploadVoiceSample(profileId: string, fileUri: string, fileName: string, referenceText: string): Promise<VoiceProfile>;

package/dist/api/studioApi.js

@@ -0,0 +1,235 @@
+"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;
+// ---------------------------------------------------------------------------
+// Injectable configuration
+// ---------------------------------------------------------------------------
+let _baseUrl = process.env.EXPO_PUBLIC_BACKEND_URL ?? '';
+let _getToken = null;
+function configureAvatarApi(opts) {
+    if (opts.baseUrl !== undefined)
+        _baseUrl = opts.baseUrl;
+    _getToken = opts.getToken;
+}
+async function getToken() {
+    return _getToken ? _getToken() : null;
+}
+// ---------------------------------------------------------------------------
+// Core fetch wrappers
+// ---------------------------------------------------------------------------
+async function studioFetch(path, options) {
+    const token = await getToken();
+    const headers = {
+        ...options?.headers,
+    };
+    if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+    const res = await fetch(`${_baseUrl}${path}`, {
+        ...options,
+        headers,
+    });
+    if (!res.ok) {
+        let detail = '';
+        try {
+            const body = await res.clone().json();
+            detail = body?.detail || body?.message || JSON.stringify(body);
+        }
+        catch {
+            detail = await res.text().catch(() => '');
+        }
+        throw new Error(`Studio API error ${res.status}: ${path}${detail ? ` — ${detail}` : ''}`);
+    }
+    // For 204 No Content (e.g. DELETE), return undefined as T
+    if (res.status === 204) {
+        return undefined;
+    }
+    return res.json();
+}
+/** POST/PUT with FormData, sharing auth token logic. */
+async function studioFetchForm(path, method, formData) {
+    const token = await getToken();
+    const res = await fetch(`${_baseUrl}${path}`, {
+        method,
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+        body: formData,
+    });
+    if (!res.ok) {
+        let detail = '';
+        try {
+            const body = await res.clone().json();
+            detail = body?.detail || body?.message || JSON.stringify(body);
+        }
+        catch {
+            detail = await res.text().catch(() => '');
+        }
+        throw new Error(`Studio API error ${res.status}: ${path}${detail ? ` — ${detail}` : ''}`);
+    }
+    return res.json();
+}
+// ---------------------------------------------------------------------------
+// Avatar endpoints
+// ---------------------------------------------------------------------------
+function getMyAvatars() {
+    return studioFetch('/v1/avatars');
+}
+function getAvatar(id) {
+    return studioFetch(`/v1/avatars/${id}`);
+}
+function updateAvatar(id, data) {
+    return studioFetch(`/v1/avatars/${id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+    });
+}
+function deleteAvatar(id) {
+    return studioFetch(`/v1/avatars/${id}`, { method: 'DELETE' });
+}
+async function createAvatar(fileUri, name, description) {
+    const formData = new FormData();
+    formData.append('file', {
+        uri: fileUri,
+        name: `${name}.glb`,
+        type: 'model/gltf-binary',
+    });
+    formData.append('name', name);
+    if (description) {
+        formData.append('description', description);
+    }
+    return studioFetchForm('/v1/avatars', 'POST', formData);
+}
+function getPublicAvatars() {
+    return studioFetch('/v1/avatars/public');
+}
+// ---------------------------------------------------------------------------
+// Voice profile endpoints
+// ---------------------------------------------------------------------------
+function getVoiceProfileSamples(profileId) {
+    return studioFetch(`/profiles/${profileId}/samples`);
+}
+function getVoiceProfiles() {
+    return studioFetch('/profiles');
+}
+function setDefaultVoice(avatarId, profileId) {
+    return studioFetch(`/v1/avatars/${avatarId}/default-voice`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ profile_id: profileId }),
+    });
+}
+function removeDefaultVoice(avatarId) {
+    return studioFetch(`/v1/avatars/${avatarId}/default-voice`, {
+        method: 'DELETE',
+    });
+}
+// ---------------------------------------------------------------------------
+// URL helpers
+// ---------------------------------------------------------------------------
+function avatarFileUrl(avatar) {
+    const base = `${_baseUrl}${avatar.url}`;
+    return avatar.updated_at ? `${base}?v=${encodeURIComponent(avatar.updated_at)}` : base;
+}
+function avatarThumbnailUrl(avatar) {
+    const url = avatar.thumbnail_url || avatar.animated_thumbnail_url;
+    if (!url)
+        return null;
+    return `${_baseUrl}${url}`;
+}
+function avatarAnimatedThumbnailUrl(avatar) {
+    if (!avatar.animated_thumbnail_url)
+        return null;
+    return `${_baseUrl}${avatar.animated_thumbnail_url}`;
+}
+async function thumbnailHeaders() {
+    const token = await getToken();
+    if (!token)
+        return {};
+    return { Authorization: `Bearer ${token}` };
+}
+// ---------------------------------------------------------------------------
+// Wearable Asset endpoints
+// ---------------------------------------------------------------------------
+function listAssets(category) {
+    const query = category ? `?category=${encodeURIComponent(category)}` : '';
+    return studioFetch(`/v1/assets${query}`);
+}
+function getAsset(id) {
+    return studioFetch(`/v1/assets/${id}`);
+}
+async function uploadAsset(fileUri, meta) {
+    const formData = new FormData();
+    formData.append('file', {
+        uri: fileUri,
+        name: `${meta.name}.glb`,
+        type: 'model/gltf-binary',
+    });
+    formData.append('name', meta.name);
+    formData.append('category', meta.category);
+    formData.append('type', meta.type);
+    if (meta.slot)
+        formData.append('slot', meta.slot);
+    if (meta.attach_bone)
+        formData.append('attach_bone', meta.attach_bone);
+    if (meta.offset_position)
+        formData.append('offset_position', JSON.stringify(meta.offset_position));
+    if (meta.offset_rotation)
+        formData.append('offset_rotation', JSON.stringify(meta.offset_rotation));
+    if (meta.hides_body_parts)
+        formData.append('hides_body_parts', JSON.stringify(meta.hides_body_parts));
+    return studioFetchForm('/v1/assets', 'POST', formData);
+}
+function deleteAsset(id) {
+    return studioFetch(`/v1/assets/${id}`, { method: 'DELETE' });
+}
+function suggestPlacement(assetId, avatarId) {
+    return studioFetch(`/v1/assets/${assetId}/suggest-placement?avatar_id=${encodeURIComponent(avatarId)}`, { method: 'POST' });
+}
+function assetFileUrl(asset) {
+    const base = `${_baseUrl}${asset.url}`;
+    return asset.updated_at ? `${base}?v=${encodeURIComponent(asset.updated_at)}` : base;
+}
+async function createVoiceProfile(name, language = 'en') {
+    return studioFetch('/profiles', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name, language }),
+    });
+}
+async function uploadVoiceSample(profileId, fileUri, fileName, referenceText) {
+    const formData = new FormData();
+    formData.append('reference_text', referenceText);
+    // Do NOT set Content-Type header manually — fetch sets it with the correct boundary
+    formData.append('file', {
+        uri: fileUri,
+        name: fileName,
+        type: 'audio/wav',
+    });
+    return studioFetchForm(`/profiles/${profileId}/samples`, 'POST', formData);
+}