talking-head-studio 0.4.11 → 0.4.12

package/dist/studio/AccessoryBrowserScreen.js

@@ -0,0 +1,626 @@
+"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.AccessoryBrowserScreen = AccessoryBrowserScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const flash_list_1 = require("@shopify/flash-list");
+const expo_image_1 = require("expo-image");
+const bottom_sheet_1 = __importStar(require("@gorhom/bottom-sheet"));
+const Haptics = __importStar(require("expo-haptics"));
+const LegacyFileSystem = __importStar(require("expo-file-system/legacy"));
+const expo_blur_1 = require("expo-blur");
+const vector_icons_1 = require("@expo/vector-icons");
+const api_1 = require("../api");
+const wardrobe_1 = require("../wardrobe");
+const StudioBrowseHeader_1 = require("./StudioBrowseHeader");
+const StudioEmptyState_1 = require("./StudioEmptyState");
+const SketchfabModelCard_1 = require("./SketchfabModelCard");
+const constants_1 = require("./constants");
+const editor_1 = require("../editor");
+const COLORS = editor_1.studioTheme.colors;
+const SKETCHFAB_API = 'https://api.sketchfab.com/v3';
+const DEFAULT_QUERY = 'accessories hat glasses helmet';
+const ACCESSORY_CATEGORIES = [
+    { id: 'hair', label: 'Hair', icon: 'cut', type: 'skinned', defaultQuery: 'anime hair 3d model' },
+    { id: 'hat', label: 'Hats', icon: 'school', type: 'rigid', attach_bone: 'Head', defaultQuery: 'hat cap 3d model' },
+    { id: 'glasses', label: 'Glasses', icon: 'glasses', type: 'rigid', attach_bone: 'Head', defaultQuery: 'glasses eyewear 3d model' },
+    { id: 'necklace', label: 'Necklaces', icon: 'link', type: 'rigid', attach_bone: 'Neck', defaultQuery: 'necklace pendant 3d model' },
+    { id: 'handheld', label: 'Handheld', icon: 'hand-left', type: 'rigid', attach_bone: 'RightHand', defaultQuery: 'sword weapon prop 3d model' },
+    { id: 'wings', label: 'Wings', icon: 'leaf', type: 'rigid', attach_bone: 'Spine2', defaultQuery: 'wings 3d model fantasy' },
+    { id: 'tail', label: 'Tail', icon: 'flash', type: 'rigid', attach_bone: 'Hips', defaultQuery: 'tail 3d model character' },
+    { id: 'cape', label: 'Cape', icon: 'shield', type: 'skinned', attach_bone: 'Spine2', defaultQuery: 'cape cloak 3d model' },
+    { id: 'top', label: 'Tops', icon: 'shirt', type: 'skinned', defaultQuery: 'shirt jacket clothing 3d model' },
+    { id: 'bottom', label: 'Bottoms', icon: 'cube', type: 'skinned', defaultQuery: 'pants skirt clothing 3d model' },
+    { id: 'footwear', label: 'Footwear', icon: 'footsteps', type: 'skinned', defaultQuery: 'shoes boots footwear 3d model' },
+];
+const DEFAULT_CATEGORY = ACCESSORY_CATEGORIES[0];
+function formatCount(n) {
+    if (n >= 1000000)
+        return `${(n / 1000000).toFixed(1)}M`;
+    if (n >= 1000)
+        return `${(n / 1000).toFixed(1)}k`;
+    return String(n);
+}
+function pickThumbnail(thumbnails, targetWidth = 600) {
+    const images = thumbnails?.images;
+    if (!images || images.length === 0)
+        return null;
+    let best = images[0];
+    let bestDiff = Math.abs(best.width - targetWidth);
+    for (let i = 1; i < images.length; i++) {
+        const diff = Math.abs(images[i].width - targetWidth);
+        if (diff < bestDiff) {
+            best = images[i];
+            bestDiff = diff;
+        }
+    }
+    return best.url;
+}
+// ---------------------------------------------------------------------------
+// Backdrop component
+// ---------------------------------------------------------------------------
+const renderBackdrop = (props) => ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetBackdrop, { ...props, disappearsOnIndex: -1, appearsOnIndex: 0, pressBehavior: "close", opacity: 0.6 }));
+// ---------------------------------------------------------------------------
+// Main screen
+// ---------------------------------------------------------------------------
+function AccessoryBrowserScreen({ avatarId, sketchfabApiKey, onDone, }) {
+    const bottomSheetRef = (0, react_1.useRef)(null);
+    const equip = (0, wardrobe_1.useWardrobeStore)((s) => s.equip);
+    // Search state
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [activeCategory, setActiveCategory] = (0, react_1.useState)(DEFAULT_CATEGORY);
+    const [query, setQuery] = (0, react_1.useState)(DEFAULT_CATEGORY.defaultQuery);
+    // Data state
+    const [models, setModels] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [loadingMore, setLoadingMore] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [nextCursor, setNextCursor] = (0, react_1.useState)(null);
+    // Bottom sheet state
+    const [selected, setSelected] = (0, react_1.useState)(null);
+    // Import state
+    const [importing, setImporting] = (0, react_1.useState)(false);
+    const [importPhase, setImportPhase] = (0, react_1.useState)(null);
+    const [importProgress, setImportProgress] = (0, react_1.useState)(0);
+    // Debounce ref
+    const debounceRef = (0, react_1.useRef)(null);
+    // Bottom sheet snap points
+    const snapPoints = (0, react_1.useMemo)(() => ['55%', '80%'], []);
+    // ------ Sketchfab search ------------------------------------------------
+    const searchSketchfab = (0, react_1.useCallback)(async (q, cursor) => {
+        const effectiveQuery = q.trim() || DEFAULT_QUERY;
+        const params = new URLSearchParams({
+            type: 'models',
+            downloadable: 'true',
+            sort_by: '-likeCount',
+            count: String(constants_1.RESULTS_PER_PAGE),
+            q: effectiveQuery,
+        });
+        if (cursor) {
+            params.set('cursor', cursor);
+        }
+        const res = await fetch(`${SKETCHFAB_API}/search?${params.toString()}`, {
+            headers: { Authorization: `Token ${sketchfabApiKey}` },
+        });
+        if (!res.ok) {
+            throw new Error(`Sketchfab API error: ${res.status}`);
+        }
+        return (await res.json());
+    }, [sketchfabApiKey]);
+    const filterBySize = (0, react_1.useCallback)((results) => {
+        return results.filter((m) => {
+            const size = m.archives?.glb?.size ?? m.archives?.gltf?.size;
+            return !size || size <= constants_1.MAX_ASSET_SIZE;
+        });
+    }, []);
+    const loadInitial = (0, react_1.useCallback)(async (q) => {
+        try {
+            setLoading(true);
+            setError(null);
+            setModels([]);
+            setNextCursor(null);
+            const data = await searchSketchfab(q);
+            setModels(filterBySize(data.results));
+            setNextCursor(data.cursors?.next ?? null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to search Sketchfab');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [searchSketchfab, filterBySize]);
+    const loadMore = (0, react_1.useCallback)(async () => {
+        if (!nextCursor || loadingMore)
+            return;
+        try {
+            setLoadingMore(true);
+            const data = await searchSketchfab(query, nextCursor);
+            setModels((prev) => [...prev, ...filterBySize(data.results)]);
+            setNextCursor(data.cursors?.next ?? null);
+        }
+        catch (err) {
+            react_native_1.Alert.alert('Error', err instanceof Error ? err.message : 'Failed to load more results');
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    }, [nextCursor, loadingMore, query, searchSketchfab, filterBySize]);
+    // Initial load
+    (0, react_1.useEffect)(() => {
+        void loadInitial(query);
+    }, [query, loadInitial]);
+    // ------ Debounced text search -------------------------------------------
+    const handleSearchChange = (0, react_1.useCallback)((text) => {
+        setSearchText(text);
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        debounceRef.current = setTimeout(() => {
+            const trimmed = text.trim();
+            const nextQuery = trimmed ? `${trimmed} accessory 3d model` : activeCategory.defaultQuery;
+            setQuery(nextQuery);
+        }, 400);
+    }, [activeCategory]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+        };
+    }, []);
+    // ------ Filter chips ----------------------------------------------------
+    const handleCategoryPress = (0, react_1.useCallback)((cat) => {
+        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        setActiveCategory(cat);
+        setSearchText('');
+        setQuery(cat.defaultQuery);
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+            debounceRef.current = null;
+        }
+    }, []);
+    // ------ Card tap --------------------------------------------------------
+    const handleCardPress = (0, react_1.useCallback)((model) => {
+        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        setSelected(model);
+        setImportPhase(null);
+        setImportProgress(0);
+        bottomSheetRef.current?.snapToIndex(0);
+    }, []);
+    const handleSheetChange = (0, react_1.useCallback)((index) => {
+        if (index === -1) {
+            setSelected(null);
+            setImportPhase(null);
+            setImportProgress(0);
+        }
+    }, []);
+    // ------ Import flow -----------------------------------------------------
+    const handleImport = (0, react_1.useCallback)(async (model) => {
+        if (importing)
+            return;
+        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+        try {
+            setImporting(true);
+            setImportPhase('downloading');
+            setImportProgress(0);
+            // 1. Get signed download URL
+            const downloadRes = await fetch(`${SKETCHFAB_API}/models/${model.uid}/download`, {
+                headers: { Authorization: `Token ${sketchfabApiKey}` },
+            });
+            if (!downloadRes.ok) {
+                throw new Error('Failed to get download URL');
+            }
+            const downloadData = await downloadRes.json();
+            // 2. Check size before downloading (Max 50MB)
+            const MAX_SIZE = constants_1.MAX_ASSET_SIZE;
+            const skfSize = downloadData?.glb?.size ?? downloadData?.gltf?.size;
+            if (skfSize && skfSize > MAX_SIZE) {
+                const mb = (skfSize / (1024 * 1024)).toFixed(1);
+                throw new Error(`Model is too large (${mb}MB). Maximum size is 50MB.`);
+            }
+            const glbUrl = downloadData?.glb?.url ?? downloadData?.gltf?.url;
+            if (!glbUrl)
+                throw new Error('No download URL found');
+            // HEAD request to verify content-length (fallback)
+            let tooLargeError = null;
+            try {
+                const headRes = await fetch(glbUrl, { method: 'HEAD' });
+                const contentLength = headRes.headers.get('content-length');
+                if (contentLength && parseInt(contentLength, 10) > MAX_SIZE) {
+                    const mb = (parseInt(contentLength, 10) / (1024 * 1024)).toFixed(1);
+                    tooLargeError = new Error(`Model is too large (${mb}MB). Maximum size is 50MB.`);
+                }
+            }
+            catch (e) {
+                console.warn('[AccessoryBrowser] HEAD size check failed:', e);
+            }
+            if (tooLargeError)
+                throw tooLargeError;
+            // 3. Download GLB to disk
+            const tmpPath = `${LegacyFileSystem.cacheDirectory}sketchfab_accessory.glb`;
+            const download = LegacyFileSystem.createDownloadResumable(glbUrl, tmpPath, {}, (progress) => {
+                const pct = progress.totalBytesWritten /
+                    progress.totalBytesExpectedToWrite;
+                setImportProgress(pct);
+            });
+            const result = await download.downloadAsync();
+            if (!result)
+                throw new Error('Download failed');
+            // 3. Upload as asset
+            setImportPhase('uploading');
+            setImportProgress(0);
+            await LegacyFileSystem.getInfoAsync(result.uri);
+            const asset = await (0, api_1.uploadAsset)(result.uri, {
+                name: model.name,
+                category: activeCategory.id,
+                type: activeCategory.type,
+                slot: model.uid,
+                attach_bone: activeCategory.attach_bone,
+            });
+            // 4. AI placement suggestion
+            if (avatarId) {
+                setImportPhase('placing');
+                try {
+                    const suggestion = await (0, api_1.suggestPlacement)(asset.id, avatarId);
+                    equip(asset.slot, asset);
+                    const setPlacement = wardrobe_1.useWardrobeStore.getState().setPlacement;
+                    setPlacement(asset.id, {
+                        bone: suggestion.bone,
+                        position: suggestion.position,
+                        rotation: suggestion.rotation,
+                        scale: 1,
+                    });
+                }
+                catch {
+                    equip(asset.slot, asset);
+                }
+            }
+            else {
+                equip(asset.slot, asset);
+            }
+            // 5. Cleanup temp file
+            await LegacyFileSystem.deleteAsync(tmpPath, { idempotent: true });
+            // 6. Close sheet and navigate back
+            bottomSheetRef.current?.close();
+            void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+            onDone?.();
+        }
+        catch (err) {
+            react_native_1.Alert.alert('Import Failed', err instanceof Error ? err.message : 'Something went wrong during import.');
+        }
+        finally {
+            setImporting(false);
+            setImportPhase(null);
+            setImportProgress(0);
+        }
+    }, [importing, sketchfabApiKey, avatarId, equip, activeCategory, onDone]);
+    // ------ Render helpers --------------------------------------------------
+    const renderItem = (0, react_1.useCallback)(({ item, index }) => ((0, jsx_runtime_1.jsx)(SketchfabModelCard_1.SketchfabModelCard, { model: item, index: index, onPress: handleCardPress })), [handleCardPress]);
+    const keyExtractor = (0, react_1.useCallback)((item) => item.uid, []);
+    const renderFooter = (0, react_1.useCallback)(() => {
+        if (loadingMore) {
+            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.footerContainer, children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: COLORS.accent, size: "small" }) }));
+        }
+        if (nextCursor) {
+            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.footerContainer, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.loadMoreButton, activeOpacity: 0.7, onPress: loadMore, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadMoreText, children: "Load More" }) }) }));
+        }
+        return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.gridBottomSpacer });
+    }, [loadingMore, nextCursor, loadMore]);
+    // ------ Import button label ---------------------------------------------
+    const importButtonLabel = (0, react_1.useMemo)(() => {
+        if (importPhase === 'downloading') {
+            return `Downloading\u2026 ${Math.round(importProgress * 100)}%`;
+        }
+        if (importPhase === 'uploading') {
+            return 'Uploading\u2026';
+        }
+        if (importPhase === 'placing') {
+            return 'Auto-placing\u2026';
+        }
+        return 'Import Accessory';
+    }, [importPhase, importProgress]);
+    // ------ Selected model details ------------------------------------------
+    const selectedThumbnail = selected
+        ? pickThumbnail(selected.thumbnails, 600)
+        : null;
+    // ------ Header: search bar + chips --------------------------------------
+    const ListHeader = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(StudioBrowseHeader_1.StudioBrowseHeader, { eyebrow: "Wardrobe", title: "Browse accessories", subtitle: "Search props, hair, and wearables, then place them directly on the active avatar.", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.searchContainer, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "search", size: 18, color: COLORS.textMuted, style: styles.searchIcon }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: styles.searchInput, placeholder: "Search accessories...", placeholderTextColor: COLORS.textMuted, value: searchText, onChangeText: handleSearchChange, returnKeyType: "search", autoCorrect: false, autoCapitalize: "none" }), searchText.length > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => handleSearchChange(''), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close-circle", size: 18, color: COLORS.textMuted }) }))] }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.chipScroll, children: ACCESSORY_CATEGORIES.map((cat) => {
+                    const isActive = activeCategory.id === cat.id;
+                    return ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.chip, isActive && styles.chipActive], activeOpacity: 0.7, onPress: () => handleCategoryPress(cat), children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: cat.icon, size: 13, color: isActive ? '#fff' : COLORS.textSecondary, style: { marginRight: 4 } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                    styles.chipText,
+                                    isActive && styles.chipTextActive,
+                                ], children: cat.label })] }, cat.id));
+                }) })] })), [searchText, activeCategory, handleSearchChange, handleCategoryPress]);
+    // ------ Loading state ---------------------------------------------------
+    if (loading) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [ListHeader, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.centered, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: COLORS.accent, size: "large" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingText, children: "Searching accessories..." })] })] }));
+    }
+    // ------ Error state -----------------------------------------------------
+    if (error && models.length === 0) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [ListHeader, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.centered, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.errorText, children: error }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => loadInitial(query), style: styles.retryButton, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.retryButtonText, children: "Retry" }) })] })] }));
+    }
+    // ------ Empty state -----------------------------------------------------
+    if (!loading && models.length === 0) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [ListHeader, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.centered, children: (0, jsx_runtime_1.jsx)(StudioEmptyState_1.StudioEmptyState, { icon: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyTitle, children: "WARDROBE" }), title: "No accessories found", subtitle: "Try a different search term or filter." }) })] }));
+    }
+    // ------ Main grid -------------------------------------------------------
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const AnyFlashList = flash_list_1.FlashList;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(AnyFlashList, { style: { flex: 1 }, data: models, keyExtractor: keyExtractor, renderItem: renderItem, numColumns: 2, estimatedItemSize: 200, contentContainerStyle: styles.gridContent, showsVerticalScrollIndicator: false, ListHeaderComponent: ListHeader, ListFooterComponent: renderFooter }), (0, jsx_runtime_1.jsx)(bottom_sheet_1.default, { ref: bottomSheetRef, index: -1, snapPoints: snapPoints, enablePanDownToClose: true, onChange: handleSheetChange, backdropComponent: renderBackdrop, backgroundComponent: ((props) => ((0, jsx_runtime_1.jsx)(expo_blur_1.BlurView, { ...props, tint: "systemThickMaterialDark", intensity: 90, style: [
+                        props.style,
+                        styles.sheetBackground,
+                        { backgroundColor: 'rgba(15, 19, 26, 0.4)' },
+                    ] }))), handleIndicatorStyle: styles.sheetHandle, children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetScrollView, { contentContainerStyle: styles.sheetContent, children: selected ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedThumbnail ? ((0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: selectedThumbnail }, style: styles.sheetThumbnail, contentFit: "cover", placeholder: { blurhash: constants_1.BLURHASH }, transition: 300 })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.sheetThumbnailPlaceholder, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sheetPlaceholderText, children: "3D" }) })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sheetName, children: selected.name }), selected.description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sheetDescription, numberOfLines: 4, children: selected.description })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.statsRow, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.statItem, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "heart", size: 14, color: COLORS.textSecondary }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.statText, children: formatCount(selected.likeCount) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.statItem, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "eye", size: 14, color: COLORS.textSecondary }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.statText, children: formatCount(selected.viewCount) })] }), selected.animationCount > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.statItem, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "film", size: 14, color: COLORS.textSecondary }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.statText, children: [selected.animationCount, " anim"] })] }))] }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.sheetMeta, children: ["by", ' ', selected.user.displayName || selected.user.username, selected.license
+                                        ? ` \u00b7 ${selected.license.label}`
+                                        : ''] }), importPhase === 'downloading' ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.progressContainer, children: [(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.round(importProgress * 100)}%` },
+                                            ] }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.progressText, children: importButtonLabel })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                                    styles.importButton,
+                                    importing && styles.importButtonDisabled,
+                                ], activeOpacity: 0.8, onPress: () => handleImport(selected), disabled: importing, children: importing ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.importButtonInner, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: "#fff", size: "small" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.importButtonText, children: importButtonLabel })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.importButtonText, children: "Import Accessory" })) }))] })) : null }) })] }));
+}
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: COLORS.background,
+    },
+    centered: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 32,
+        gap: 8,
+    },
+    searchContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: COLORS.surface,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        marginHorizontal: 12,
+        paddingHorizontal: 14,
+        height: 46,
+        gap: 8,
+    },
+    searchIcon: {
+        marginRight: 2,
+    },
+    searchInput: {
+        flex: 1,
+        color: COLORS.textPrimary,
+        fontSize: 15,
+        paddingVertical: 0,
+    },
+    chipScroll: {
+        paddingHorizontal: 12,
+        gap: 8,
+    },
+    chip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 14,
+        paddingVertical: 7,
+        borderRadius: 10,
+        backgroundColor: COLORS.surface,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+    },
+    chipActive: {
+        backgroundColor: COLORS.accent,
+        borderColor: COLORS.accent,
+    },
+    chipText: {
+        color: COLORS.textSecondary,
+        fontSize: 13,
+        fontWeight: '500',
+    },
+    chipTextActive: {
+        color: '#fff',
+        fontWeight: '600',
+    },
+    gridContent: {
+        paddingHorizontal: 12,
+    },
+    gridBottomSpacer: {
+        height: 32,
+    },
+    footerContainer: {
+        paddingVertical: 20,
+        alignItems: 'center',
+    },
+    loadMoreButton: {
+        paddingHorizontal: 28,
+        paddingVertical: 12,
+        backgroundColor: COLORS.surface,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+    },
+    loadMoreText: {
+        color: COLORS.textPrimary,
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    loadingText: {
+        color: COLORS.textSecondary,
+        fontSize: 13,
+        marginTop: 8,
+    },
+    errorText: {
+        color: COLORS.danger,
+        fontSize: 14,
+        fontWeight: '500',
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    retryButton: {
+        paddingHorizontal: 24,
+        paddingVertical: 10,
+        backgroundColor: COLORS.surfaceSoft,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+    },
+    retryButtonText: {
+        color: COLORS.textPrimary,
+        fontSize: 13,
+        fontWeight: '600',
+    },
+    emptyTitle: {
+        color: COLORS.textSecondary,
+        fontSize: 16,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    sheetBackground: {
+        backgroundColor: COLORS.surface,
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    sheetHandle: {
+        backgroundColor: COLORS.border,
+        width: 40,
+    },
+    sheetContent: {
+        paddingHorizontal: 24,
+        paddingTop: 8,
+        paddingBottom: 40,
+        gap: 12,
+    },
+    sheetThumbnail: {
+        width: '100%',
+        aspectRatio: 4 / 3,
+        borderRadius: 16,
+        backgroundColor: COLORS.backgroundAlt,
+    },
+    sheetThumbnailPlaceholder: {
+        width: '100%',
+        aspectRatio: 4 / 3,
+        borderRadius: 16,
+        backgroundColor: COLORS.surfaceSoft,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    sheetPlaceholderText: {
+        color: COLORS.textMuted,
+        fontSize: 32,
+        fontWeight: '700',
+        letterSpacing: 3,
+    },
+    sheetName: {
+        color: COLORS.textPrimary,
+        fontSize: 22,
+        fontWeight: '700',
+        letterSpacing: -0.3,
+    },
+    sheetDescription: {
+        color: COLORS.textSecondary,
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    statsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 16,
+    },
+    statItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    statText: {
+        color: COLORS.textSecondary,
+        fontSize: 13,
+    },
+    sheetMeta: {
+        color: COLORS.textMuted,
+        fontSize: 12,
+    },
+    importButton: {
+        marginTop: 8,
+        backgroundColor: COLORS.accent,
+        borderRadius: 14,
+        paddingVertical: 16,
+        alignItems: 'center',
+        shadowColor: COLORS.accent,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.4,
+        shadowRadius: 12,
+        elevation: 8,
+    },
+    importButtonDisabled: {
+        opacity: 0.7,
+    },
+    importButtonInner: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    importButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '700',
+        letterSpacing: 0.3,
+    },
+    progressContainer: {
+        marginTop: 8,
+        gap: 8,
+        alignItems: 'center',
+    },
+    progressTrack: {
+        width: '100%',
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: COLORS.border,
+        overflow: 'hidden',
+    },
+    progressFill: {
+        height: '100%',
+        borderRadius: 4,
+        backgroundColor: COLORS.accent,
+    },
+    progressText: {
+        color: COLORS.textSecondary,
+        fontSize: 13,
+        fontWeight: '500',
+    },
+});

package/dist/studio/AccessoryPanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { WgpuAvatarRef } from '../wgpu/WgpuAvatar';
+export interface AccessoryPanelProps {
+    avatarId: string;
+    onPositionAsset: (assetId: string) => void;
+    onBrowseAccessories?: () => void;
+    /** Ref to the live avatar — used to trigger the blink reaction on snap-on. */
+    avatarRef?: React.RefObject<WgpuAvatarRef | null>;
+}
+export default function AccessoryPanel({ avatarId, onPositionAsset, onBrowseAccessories, avatarRef }: AccessoryPanelProps): import("react/jsx-runtime").JSX.Element;