talking-head-studio 0.4.11 → 0.4.12

package/dist/studio/index.d.ts

@@ -0,0 +1,29 @@
+export { default as ColorSwatch } from './ColorSwatch';
+export type { ColorSwatchProps } from './ColorSwatch';
+export { StudioSurfaceCard, default as StudioSurfaceCardDefault } from './StudioSurfaceCard';
+export { StudioEmptyState } from './StudioEmptyState';
+export { StudioSectionHeader } from './StudioSectionHeader';
+export { StudioFloatingAction } from './StudioFloatingAction';
+export { StudioBrowseHeader } from './StudioBrowseHeader';
+export { default as AppearancePanel } from './AppearancePanel';
+export type { AppearancePanelProps } from './AppearancePanel';
+export { default as AvatarGrid } from './AvatarGrid';
+export type { AvatarGridItem, AvatarGridProps } from './AvatarGrid';
+export { DetailsPanel } from './DetailsPanel';
+export { default as AccessoryPanel } from './AccessoryPanel';
+export type { AccessoryPanelProps } from './AccessoryPanel';
+export { default as VoicePanel } from './VoicePanel';
+export { default as CreateVoiceProfileSheet } from './CreateVoiceProfileSheet';
+export { FilamentEditor } from './FilamentEditor';
+export type { FilamentEditorProps } from './FilamentEditor';
+export { PrecisionPanel } from './PrecisionPanel';
+export { SketchfabModelCard } from './SketchfabModelCard';
+export { AccessoryBrowserScreen } from './AccessoryBrowserScreen';
+export type { AccessoryBrowserScreenProps } from './AccessoryBrowserScreen';
+export { AvatarCreatorScreen } from './AvatarCreatorScreen';
+export type { AvatarCreatorScreenProps } from './AvatarCreatorScreen';
+export { AvatarEditorScreen } from './AvatarEditorScreen';
+export type { AvatarEditorScreenProps } from './AvatarEditorScreen';
+export { PublicGalleryScreen } from './PublicGalleryScreen';
+export type { PublicGalleryScreenProps } from './PublicGalleryScreen';
+export { BLURHASH, MAX_ASSET_SIZE, RESULTS_PER_PAGE } from './constants';

package/dist/studio/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RESULTS_PER_PAGE = exports.MAX_ASSET_SIZE = exports.BLURHASH = exports.PublicGalleryScreen = exports.AvatarEditorScreen = exports.AvatarCreatorScreen = exports.AccessoryBrowserScreen = exports.SketchfabModelCard = exports.PrecisionPanel = exports.FilamentEditor = exports.CreateVoiceProfileSheet = exports.VoicePanel = exports.AccessoryPanel = exports.DetailsPanel = exports.AvatarGrid = exports.AppearancePanel = exports.StudioBrowseHeader = exports.StudioFloatingAction = exports.StudioSectionHeader = exports.StudioEmptyState = exports.StudioSurfaceCardDefault = exports.StudioSurfaceCard = exports.ColorSwatch = void 0;
+// UI primitives
+var ColorSwatch_1 = require("./ColorSwatch");
+Object.defineProperty(exports, "ColorSwatch", { enumerable: true, get: function () { return __importDefault(ColorSwatch_1).default; } });
+var StudioSurfaceCard_1 = require("./StudioSurfaceCard");
+Object.defineProperty(exports, "StudioSurfaceCard", { enumerable: true, get: function () { return StudioSurfaceCard_1.StudioSurfaceCard; } });
+Object.defineProperty(exports, "StudioSurfaceCardDefault", { enumerable: true, get: function () { return __importDefault(StudioSurfaceCard_1).default; } });
+var StudioEmptyState_1 = require("./StudioEmptyState");
+Object.defineProperty(exports, "StudioEmptyState", { enumerable: true, get: function () { return StudioEmptyState_1.StudioEmptyState; } });
+var StudioSectionHeader_1 = require("./StudioSectionHeader");
+Object.defineProperty(exports, "StudioSectionHeader", { enumerable: true, get: function () { return StudioSectionHeader_1.StudioSectionHeader; } });
+var StudioFloatingAction_1 = require("./StudioFloatingAction");
+Object.defineProperty(exports, "StudioFloatingAction", { enumerable: true, get: function () { return StudioFloatingAction_1.StudioFloatingAction; } });
+var StudioBrowseHeader_1 = require("./StudioBrowseHeader");
+Object.defineProperty(exports, "StudioBrowseHeader", { enumerable: true, get: function () { return StudioBrowseHeader_1.StudioBrowseHeader; } });
+// Editor panels
+var AppearancePanel_1 = require("./AppearancePanel");
+Object.defineProperty(exports, "AppearancePanel", { enumerable: true, get: function () { return __importDefault(AppearancePanel_1).default; } });
+var AvatarGrid_1 = require("./AvatarGrid");
+Object.defineProperty(exports, "AvatarGrid", { enumerable: true, get: function () { return __importDefault(AvatarGrid_1).default; } });
+var DetailsPanel_1 = require("./DetailsPanel");
+Object.defineProperty(exports, "DetailsPanel", { enumerable: true, get: function () { return DetailsPanel_1.DetailsPanel; } });
+var AccessoryPanel_1 = require("./AccessoryPanel");
+Object.defineProperty(exports, "AccessoryPanel", { enumerable: true, get: function () { return __importDefault(AccessoryPanel_1).default; } });
+var VoicePanel_1 = require("./VoicePanel");
+Object.defineProperty(exports, "VoicePanel", { enumerable: true, get: function () { return __importDefault(VoicePanel_1).default; } });
+var CreateVoiceProfileSheet_1 = require("./CreateVoiceProfileSheet");
+Object.defineProperty(exports, "CreateVoiceProfileSheet", { enumerable: true, get: function () { return __importDefault(CreateVoiceProfileSheet_1).default; } });
+var FilamentEditor_1 = require("./FilamentEditor");
+Object.defineProperty(exports, "FilamentEditor", { enumerable: true, get: function () { return FilamentEditor_1.FilamentEditor; } });
+var PrecisionPanel_1 = require("./PrecisionPanel");
+Object.defineProperty(exports, "PrecisionPanel", { enumerable: true, get: function () { return PrecisionPanel_1.PrecisionPanel; } });
+// Sketchfab shared
+var SketchfabModelCard_1 = require("./SketchfabModelCard");
+Object.defineProperty(exports, "SketchfabModelCard", { enumerable: true, get: function () { return SketchfabModelCard_1.SketchfabModelCard; } });
+// Screen-level components (navigation via props/callbacks)
+var AccessoryBrowserScreen_1 = require("./AccessoryBrowserScreen");
+Object.defineProperty(exports, "AccessoryBrowserScreen", { enumerable: true, get: function () { return AccessoryBrowserScreen_1.AccessoryBrowserScreen; } });
+var AvatarCreatorScreen_1 = require("./AvatarCreatorScreen");
+Object.defineProperty(exports, "AvatarCreatorScreen", { enumerable: true, get: function () { return AvatarCreatorScreen_1.AvatarCreatorScreen; } });
+var AvatarEditorScreen_1 = require("./AvatarEditorScreen");
+Object.defineProperty(exports, "AvatarEditorScreen", { enumerable: true, get: function () { return AvatarEditorScreen_1.AvatarEditorScreen; } });
+var PublicGalleryScreen_1 = require("./PublicGalleryScreen");
+Object.defineProperty(exports, "PublicGalleryScreen", { enumerable: true, get: function () { return PublicGalleryScreen_1.PublicGalleryScreen; } });
+// Constants
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "BLURHASH", { enumerable: true, get: function () { return constants_1.BLURHASH; } });
+Object.defineProperty(exports, "MAX_ASSET_SIZE", { enumerable: true, get: function () { return constants_1.MAX_ASSET_SIZE; } });
+Object.defineProperty(exports, "RESULTS_PER_PAGE", { enumerable: true, get: function () { return constants_1.RESULTS_PER_PAGE; } });

package/dist/studio/useSketchfabCapabilities.d.ts

@@ -0,0 +1,31 @@
+import type { SketchfabModel } from '../sketchfab';
+import type { AvatarCapabilities } from '../core/avatar/avatarCapabilities';
+/** Per-model inspection state. A model's capabilities never change, so once a
+ *  uid is 'done'/'unknown' it stays cached for the whole session. */
+export type CapabilityEntry = {
+    status: 'pending';
+} | {
+    status: 'unknown';
+} | {
+    status: 'done';
+    cap: AvatarCapabilities;
+};
+export interface UseSketchfabCapabilitiesOptions {
+    models: SketchfabModel[];
+    apiKey: string;
+    /** How many leading results to pre-inspect. */
+    topN?: number;
+    /** Max concurrent range-inspections. */
+    concurrency?: number;
+    enabled?: boolean;
+}
+export declare const DEFAULT_CAPABILITY_TOP_N = 12;
+/**
+ * Background-inspects the top-N search results (range-reads each GLB's JSON
+ * chunk) so the picker can rank/badge known-good avatars before import.
+ *
+ * Results are cached per uid for the session and survive query changes. The
+ * effect keys on the *set* of leading uids — appending pages (load-more) does
+ * not re-run it, so in-flight inspections are never thrashed.
+ */
+export declare function useSketchfabCapabilities({ models, apiKey, topN, concurrency, enabled, }: UseSketchfabCapabilitiesOptions): Map<string, CapabilityEntry>;

package/dist/studio/useSketchfabCapabilities.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_CAPABILITY_TOP_N = void 0;
+exports.useSketchfabCapabilities = useSketchfabCapabilities;
+const react_1 = require("react");
+const sketchfab_1 = require("../sketchfab");
+exports.DEFAULT_CAPABILITY_TOP_N = 12;
+const DEFAULT_CONCURRENCY = 3;
+/**
+ * Background-inspects the top-N search results (range-reads each GLB's JSON
+ * chunk) so the picker can rank/badge known-good avatars before import.
+ *
+ * Results are cached per uid for the session and survive query changes. The
+ * effect keys on the *set* of leading uids — appending pages (load-more) does
+ * not re-run it, so in-flight inspections are never thrashed.
+ */
+function useSketchfabCapabilities({ models, apiKey, topN = exports.DEFAULT_CAPABILITY_TOP_N, concurrency = DEFAULT_CONCURRENCY, enabled = true, }) {
+    // Durable per-uid cache; the snapshot is a cheap clone published on mutation
+    // so consumers re-render.
+    const cacheRef = (0, react_1.useRef)(new Map());
+    const [snapshot, setSnapshot] = (0, react_1.useState)(() => new Map());
+    const publish = (0, react_1.useCallback)(() => {
+        setSnapshot(new Map(cacheRef.current));
+    }, []);
+    // Mirror the latest props into a ref (in an effect, never during render) so
+    // the inspection effect can read them without re-running on every list
+    // change — it should only re-run when the leading uid set changes.
+    const latest = (0, react_1.useRef)({ models, apiKey, topN, concurrency });
+    (0, react_1.useEffect)(() => {
+        latest.current = { models, apiKey, topN, concurrency };
+    });
+    const topKey = enabled && apiKey
+        ? models.slice(0, topN).map((m) => m.uid).join(',')
+        : '';
+    (0, react_1.useEffect)(() => {
+        if (!topKey)
+            return;
+        const { models, apiKey, topN, concurrency } = latest.current;
+        // The cache Map identity is stable for the hook's lifetime; capture it so
+        // the cleanup closure doesn't read a (lint-flagged) ref in cleanup.
+        const cache = cacheRef.current;
+        const targets = models
+            .slice(0, topN)
+            .map((m) => m.uid)
+            .filter((uid) => !cache.has(uid));
+        if (targets.length === 0)
+            return;
+        const ac = new AbortController();
+        let cancelled = false;
+        for (const uid of targets)
+            cache.set(uid, { status: 'pending' });
+        publish();
+        const queue = [...targets];
+        const worker = async () => {
+            while (!cancelled && queue.length > 0) {
+                const uid = queue.shift();
+                const cap = await (0, sketchfab_1.fetchSketchfabCapabilities)(uid, apiKey, ac.signal);
+                if (cancelled)
+                    return;
+                cache.set(uid, cap ? { status: 'done', cap } : { status: 'unknown' });
+                publish();
+            }
+        };
+        const lanes = Math.min(Math.max(1, concurrency), queue.length);
+        void Promise.all(Array.from({ length: lanes }, () => worker()));
+        return () => {
+            cancelled = true;
+            ac.abort();
+            // Drop entries still pending so a later run (or re-appearance) retries.
+            let changed = false;
+            for (const uid of targets) {
+                if (cache.get(uid)?.status === 'pending') {
+                    cache.delete(uid);
+                    changed = true;
+                }
+            }
+            if (changed)
+                publish();
+        };
+    }, [topKey, publish]);
+    return snapshot;
+}

package/dist/tts/useDirectVisemeStream.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDirectVisemeStream = useDirectVisemeStream;
 const react_1 = require("react");
-const fetch_1 = require("expo/fetch");
 // How long to keep retrying a stream before giving up (ms).
 const STREAM_RETRY_BUDGET_MS = 3000;
 // Initial retry delay; doubles each attempt up to MAX_RETRY_DELAY_MS.
 const INITIAL_RETRY_DELAY_MS = 150;
 const MAX_RETRY_DELAY_MS = 1000;
+const shouldLogDebugMessages = typeof process !== "undefined" && process.env.NODE_ENV !== "production";
 /**
  * Opens a direct SSE connection to the TTS server to receive viseme data,
  * bypassing the agent data channel relay.
@@ -38,12 +38,12 @@ function useDirectVisemeStream(onVisemes) {
         // Strip trailing /v1 if present so we don't double it
         const base = ttsBaseUrl.replace(/\/v1\/?$/, "");
         const url = `${base}/v1/audio/visemes/${encodeURIComponent(requestId)}/stream`;
-        (async () => {
+        void (async () => {
             const startedAt = Date.now();
             let retryDelay = INITIAL_RETRY_DELAY_MS;
             while (!signal.aborted) {
                 try {
-                    const response = await (0, fetch_1.fetch)(url, {
+                    const response = await fetch(url, {
                         headers: { Accept: "text/event-stream" },
                         signal,
                     });
@@ -67,11 +67,14 @@ function useDirectVisemeStream(onVisemes) {
                         onVisemesRef.current(payload);
                     });
                     // Stream ended cleanly — done.
-                    console.log("[VisemeSSE] stream ended", { requestId });
+                    if (shouldLogDebugMessages) {
+                        console.log("[VisemeSSE] stream ended", { requestId });
+                    }
                     return;
                 }
                 catch (err) {
-                    if (err?.name === "AbortError" || signal.aborted)
+                    const isAbortError = err instanceof Error && err.name === "AbortError";
+                    if (isAbortError || signal.aborted)
                         return;
                     const elapsed = Date.now() - startedAt;
                     if (elapsed >= STREAM_RETRY_BUDGET_MS) {
@@ -119,11 +122,13 @@ async function readSseStream(reader, signal, onVisemes) {
             const jsonText = dataLines.join("\n");
             try {
                 const payload = JSON.parse(jsonText);
-                console.log("[VisemeSSE] received", {
-                    requestId: payload.requestId,
-                    cues: Array.isArray(payload.cues) ? payload.cues.length : 0,
-                    durationMs: payload.durationMs ?? null,
-                });
+                if (shouldLogDebugMessages) {
+                    console.log("[VisemeSSE] received", {
+                        requestId: payload.requestId,
+                        cues: Array.isArray(payload.cues) ? payload.cues.length : 0,
+                        durationMs: payload.durationMs ?? null,
+                    });
+                }
                 onVisemes(payload);
             }
             catch (parseErr) {

package/dist/utils/avatarUtils.js

@@ -1,20 +1,105 @@
 "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.resolveLocalAssetUri = resolveLocalAssetUri;
 exports.resolveLocalAssetUrl = resolveLocalAssetUrl;
 const expo_asset_1 = require("expo-asset");
 const react_native_1 = require("react-native");
 const expo_file_system_1 = require("expo-file-system");
+const LegacyFileSystem = __importStar(require("expo-file-system/legacy"));
+/**
+ * Narrows dynamic require() results to the Expo asset module shapes accepted by Asset.fromModule.
+ */
+function isExpoAssetModule(module) {
+    if (typeof module === 'number' || typeof module === 'string') {
+        return true;
+    }
+    return (typeof module === 'object' &&
+        module !== null &&
+        'uri' in module &&
+        typeof module.uri === 'string' &&
+        'width' in module &&
+        typeof module.width === 'number' &&
+        'height' in module &&
+        typeof module.height === 'number');
+}
+function inferAssetFileName(uri) {
+    try {
+        const parsed = new URL(uri);
+        const unstablePath = parsed.searchParams.get('unstable_path') ?? '';
+        const hash = parsed.searchParams.get('hash');
+        const sourcePath = unstablePath || parsed.pathname;
+        const extMatch = sourcePath.match(/\.([a-z0-9]+)$/i);
+        const ext = extMatch?.[1] ?? 'bin';
+        return `${hash ?? 'asset'}.${ext}`;
+    }
+    catch {
+        return 'asset.bin';
+    }
+}
+async function resolveAssetUriWithFallback(asset) {
+    try {
+        await asset.downloadAsync();
+        return asset.localUri ?? asset.uri ?? null;
+    }
+    catch (error) {
+        const remoteUri = asset.uri;
+        if (!remoteUri || (!remoteUri.startsWith('http://') && !remoteUri.startsWith('https://'))) {
+            throw error;
+        }
+        if (!LegacyFileSystem.cacheDirectory) {
+            throw error;
+        }
+        const dir = `${LegacyFileSystem.cacheDirectory}expo-asset-fallback/`;
+        const fileUri = `${dir}${inferAssetFileName(remoteUri)}`;
+        await LegacyFileSystem.makeDirectoryAsync(dir, { intermediates: true });
+        const downloaded = await LegacyFileSystem.downloadAsync(remoteUri, fileUri);
+        return downloaded.uri;
+    }
+}
 /**
  * Resolves a local Expo asset module into a file:// URI for use with
  * WgpuAvatar model loading.
  */
 async function resolveLocalAssetUri(module) {
     try {
+        if (!isExpoAssetModule(module)) {
+            throw new TypeError('Expected an Expo asset module id, URI, or asset descriptor.');
+        }
         const asset = expo_asset_1.Asset.fromModule(module);
-        await asset.downloadAsync();
-        const uri = asset.localUri ?? asset.uri;
-        return uri ?? null;
+        return await resolveAssetUriWithFallback(asset);
     }
     catch (e) {
         console.error('[AssetUtils] Failed to resolve asset:', e);
@@ -29,9 +114,11 @@ async function resolveLocalAssetUri(module) {
  */
 async function resolveLocalAssetUrl(module) {
     try {
+        if (!isExpoAssetModule(module)) {
+            throw new TypeError('Expected an Expo asset module id, URI, or asset descriptor.');
+        }
         const asset = expo_asset_1.Asset.fromModule(module);
-        await asset.downloadAsync();
-        const uri = asset.localUri ?? asset.uri;
+        const uri = await resolveAssetUriWithFallback(asset);
         if (!uri)
             return null;
         if (react_native_1.Platform.OS === 'web') {

package/dist/utils/faceLandmarkerToShapeWeights.js

@@ -57,10 +57,8 @@ async function getLandmarker() {
     if (_landmarkerPromise)
         return _landmarkerPromise;
     _landmarkerPromise = (async () => {
-        // Dynamic import so this module is tree-shaken when unused
-        // @mediapipe/tasks-vision is loaded at runtime from CDN — not in node_modules.
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
+        // Dynamic import keeps the MediaPipe WASM/runtime out of bundles that never
+        // call this utility.
         const vision = await Promise.resolve().then(() => __importStar(require(
         /* webpackChunkName: "mediapipe-tasks-vision" */
         '@mediapipe/tasks-vision')));

package/dist/voice/useAudioPlayer.js

@@ -14,8 +14,12 @@ function useAudioPlayer({ onError, } = {}) {
                 setIsPlaying(false);
             }
             else {
-                audioRef.current.play();
-                setIsPlaying(true);
+                void audioRef.current.play()
+                    .then(() => setIsPlaying(true))
+                    .catch((error) => {
+                    const err = error instanceof Error ? error : new Error('Failed to play audio file');
+                    onError?.(err);
+                });
             }
         }
         else {
@@ -42,8 +46,17 @@ function useAudioPlayer({ onError, } = {}) {
                 }
                 audioRef.current = null;
             });
-            audio.play();
-            setIsPlaying(true);
+            void audio.play()
+                .then(() => setIsPlaying(true))
+                .catch((error) => {
+                const err = error instanceof Error ? error : new Error('Failed to play audio file');
+                if (onError) {
+                    onError(err);
+                }
+                else {
+                    console.error('[useAudioPlayer] Playback error:', err.message);
+                }
+            });
         }
     };
     const cleanup = () => {

package/dist/voice/useVoicePreview.js

@@ -16,11 +16,12 @@ async function fetchFirstSampleUrl(voiceId) {
     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);
+    const status = (0, expo_audio_1.useAudioPlayerStatus)(player ?? emptyPlayer);
     (0, react_1.useEffect)(() => {
         if (status?.didJustFinish) {
             setActiveVoiceId(null);
@@ -75,7 +76,8 @@ function useVoicePreview() {
             playerRef.current?.pause();
             playerRef.current?.remove();
             playerRef.current = null;
+            emptyPlayer.remove();
         };
-    }, []);
+    }, [emptyPlayer]);
     return { activeVoiceId, loadingVoiceId, previewVoice, stopPreview };
 }

package/dist/wardrobe/index.d.ts

@@ -2,3 +2,4 @@ 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,9 +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.useStudioAvatar = 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

@@ -6,9 +6,13 @@ 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,10 +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]);
 }