talking-head-studio 0.2.8 → 0.3.0

package/dist/wardrobe/useAvatarWardrobeHydration.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 accessorySignature = (0, react_1.useMemo)(() => JSON.stringify(accessories ?? []), [accessories]);
+    (0, react_1.useEffect)(() => {
+        const nextAccessories = accessories ?? [];
+        if (!avatarId || nextAccessories.length === 0) {
+            hydrateFromApi([], {});
+            return;
+        }
+        let cancelled = false;
+        void (0, studioApi_1.listAssets)()
+            .then((allAssets) => {
+            if (cancelled)
+                return;
+            const lookup = {};
+            for (const asset of allAssets) {
+                lookup[asset.id] = asset;
+            }
+            hydrateFromApi(nextAccessories, lookup);
+        })
+            .catch((err) => {
+            console.error('[useAvatarWardrobeHydration] Failed to hydrate wardrobe:', err);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [accessorySignature, avatarId, hydrateFromApi]);
+}

package/dist/wardrobe/wardrobeStore.d.ts

@@ -0,0 +1,30 @@
+import type { WearableAsset, EquippedAccessory } from '../api/types';
+export interface AssetPlacement {
+    bone: string;
+    position: [number, number, number];
+    rotation: [number, number, number];
+    scale: number;
+}
+export type GizmoMode = 'translate' | 'rotate' | 'scale';
+export interface WardrobeState {
+    /** slot -> equipped asset */
+    equipped: Record<string, WearableAsset>;
+    /** assetId -> placement transform */
+    placements: Record<string, AssetPlacement>;
+    /** asset currently being positioned (Filament mode) */
+    activeAssetId: string | null;
+    /** current gizmo operation mode */
+    gizmoMode: GizmoMode;
+    /** ID of the avatar currently synced to avoid redundant fetches */
+    syncedAvatarId: string | null;
+    equip: (slot: string, asset: WearableAsset) => void;
+    unequip: (slot: string) => void;
+    setPlacement: (assetId: string, placement: AssetPlacement) => void;
+    setActiveAsset: (assetId: string | null) => void;
+    setGizmoMode: (mode: GizmoMode) => void;
+    hydrateFromApi: (accessories: EquippedAccessory[], assetLookup: Record<string, WearableAsset>) => void;
+    syncWithAvatar: (avatarUrl: string) => Promise<void>;
+    serializeForApi: () => EquippedAccessory[];
+    reset: () => void;
+}
+export declare const useWardrobeStore: import("zustand").UseBoundStore<import("zustand").StoreApi<WardrobeState>>;

package/dist/wardrobe/wardrobeStore.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWardrobeStore = void 0;
+const zustand_1 = require("zustand");
+const studioApi_1 = require("../api/studioApi");
+// ---------------------------------------------------------------------------
+// Inline avatar ID extraction (avoids dep on avatarUtils)
+// ---------------------------------------------------------------------------
+const AVATAR_PATH_RE = /\/v1\/avatars\/([^/]+)\/file/;
+function extractAvatarIdFromUrl(url) {
+    if (!url)
+        return null;
+    const match = url.match(AVATAR_PATH_RE);
+    return match ? match[1] : null;
+}
+// ---------------------------------------------------------------------------
+// Store
+// ---------------------------------------------------------------------------
+exports.useWardrobeStore = (0, zustand_1.create)()((set, get) => ({
+    equipped: {},
+    placements: {},
+    activeAssetId: null,
+    gizmoMode: 'translate',
+    syncedAvatarId: 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 };
+        if (removed) {
+            delete placements[removed.id];
+        }
+        return {
+            equipped: restEquipped,
+            placements,
+            activeAssetId: removed && removed.id === state.activeAssetId
+                ? null
+                : state.activeAssetId,
+        };
+    }),
+    setPlacement: (assetId, placement) => set((state) => ({
+        placements: { ...state.placements, [assetId]: placement },
+    })),
+    setActiveAsset: (assetId) => set({ activeAssetId: assetId }),
+    setGizmoMode: (mode) => set({ gizmoMode: mode }),
+    hydrateFromApi: (accessories, assetLookup) => set(() => {
+        const equipped = {};
+        const placements = {};
+        for (const acc of accessories) {
+            const asset = assetLookup[acc.asset_id];
+            if (asset) {
+                equipped[asset.slot] = asset;
+                placements[acc.asset_id] = {
+                    bone: acc.bone,
+                    position: acc.position,
+                    rotation: acc.rotation,
+                    scale: acc.scale,
+                };
+            }
+        }
+        return { equipped, placements };
+    }),
+    syncWithAvatar: async (avatarUrl) => {
+        const avatarId = extractAvatarIdFromUrl(avatarUrl);
+        if (!avatarId)
+            return;
+        if (get().syncedAvatarId === avatarId)
+            return;
+        get().reset();
+        try {
+            const [avatar, allAssets] = await Promise.all([(0, studioApi_1.getAvatar)(avatarId), (0, studioApi_1.listAssets)()]);
+            const lookup = {};
+            for (const a of allAssets)
+                lookup[a.id] = a;
+            const accessories = avatar.appearance?.equippedAccessories ?? [];
+            get().hydrateFromApi(accessories, lookup);
+            set({ syncedAvatarId: avatarId });
+        }
+        catch (e) {
+            console.warn('[WardrobeStore] Failed to load avatar accessories:', e);
+        }
+    },
+    serializeForApi: () => {
+        const { equipped, placements } = get();
+        return Object.values(equipped).map((asset) => {
+            const p = placements[asset.id];
+            return {
+                asset_id: asset.id,
+                bone: p?.bone ?? 'Head',
+                position: p?.position ?? [0, 0, 0],
+                rotation: p?.rotation ?? [0, 0, 0],
+                scale: p?.scale ?? 1,
+            };
+        });
+    },
+    reset: () => set({
+        equipped: {},
+        placements: {},
+        activeAssetId: null,
+        gizmoMode: 'translate',
+    }),
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "talking-head-studio",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "Cross-platform 3D avatar component for React Native & web — lip-sync, gestures, accessories, and LLM integration. Powered by TalkingHead + Three.js.",
   "main": "dist/index.web.js",
   "browser": "dist/index.web.js",
@@ -28,6 +28,19 @@
     "./sketchfab": {
       "types": "./dist/sketchfab/index.d.ts",
       "default": "./dist/sketchfab/index.js"
+    },
+    "./api": {
+      "types": "./dist/api/index.d.ts",
+      "default": "./dist/api/index.js"
+    },
+    "./wardrobe": {
+      "types": "./dist/wardrobe/index.d.ts",
+      "default": "./dist/wardrobe/index.js"
+    },
+    "./filament": {
+      "react-native": "./dist/filament/index.js",
+      "types": "./dist/filament/index.d.ts",
+      "default": "./dist/filament/index.js"
     }
   },
   "files": [
@@ -35,7 +48,7 @@
   ],
   "scripts": {
     "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
-    "build": "npm run clean && tsc --project tsconfig.json",
+    "build": "npm run clean && tsc --project tsconfig.json && mkdir -p dist/assets && cp src/assets/*.glb dist/assets/",
     "typecheck": "tsc --noEmit",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
@@ -78,12 +91,18 @@
     "url": "https://github.com/sitebay/talking-head-studio/issues"
   },
   "sideEffects": false,
+  "dependencies": {
+    "zustand": "^5.0.12"
+  },
   "peerDependencies": {
+    "@react-three/drei": ">=9",
+    "@react-three/fiber": ">=8",
+    "expo-asset": ">=10",
+    "expo-file-system": ">=17",
     "react": ">=18",
     "react-native": ">=0.73",
+    "react-native-filament": ">=1",
     "react-native-webview": ">=13",
-    "@react-three/fiber": ">=8",
-    "@react-three/drei": ">=9",
     "three": ">=0.170"
   },
   "peerDependenciesMeta": {
@@ -93,6 +112,15 @@
     "react-native-webview": {
       "optional": true
     },
+    "react-native-filament": {
+      "optional": true
+    },
+    "expo-asset": {
+      "optional": true
+    },
+    "expo-file-system": {
+      "optional": true
+    },
     "@react-three/fiber": {
       "optional": true
     },
@@ -126,6 +154,7 @@
     "metro-react-native-babel-preset": "^0.77.0",
     "multer": "^2.1.0",
     "prettier": "^3.8.1",
+    "react-native-webview": "^13.16.0",
     "react-test-renderer": "^19.2.4",
     "ts-jest": "^29.4.6"
   }