talking-head-studio 0.4.10 → 0.4.12

package/dist/studio/AvatarCreatorScreen.js

@@ -0,0 +1,806 @@
+"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.AvatarCreatorScreen = AvatarCreatorScreen;
+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 StudioBrowseHeader_1 = require("./StudioBrowseHeader");
+const StudioEmptyState_1 = require("./StudioEmptyState");
+const SketchfabModelCard_1 = require("./SketchfabModelCard");
+const useSketchfabCapabilities_1 = require("./useSketchfabCapabilities");
+const base64_js_1 = require("base64-js");
+const api_1 = require("../api");
+const constants_1 = require("./constants");
+const editor_1 = require("../editor");
+const sketchfab_1 = require("../sketchfab");
+const avatarCapabilities_1 = require("../core/avatar/avatarCapabilities");
+const COLORS = editor_1.studioTheme.colors;
+const SKETCHFAB_API = 'https://api.sketchfab.com/v3';
+const DEFAULT_QUERY = 'character humanoid avatar';
+const FILTER_CHIPS = [
+    'character',
+    'anime',
+    'robot',
+    'fantasy',
+    'sci-fi',
+    'cartoon',
+];
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+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;
+}
+function isHumanoid(model) {
+    const HUMANOID_TAGS = [
+        'character', 'humanoid', 'human', 'anime', 'avatar',
+        'person', 'figure', 'girl', 'boy', 'woman', 'man',
+    ];
+    return model.tags.some((t) => HUMANOID_TAGS.includes(t.slug.toLowerCase()));
+}
+/**
+ * Read just the GLB JSON chunk from a downloaded file and report whether the
+ * model has morph targets. Returns null when the check can't run (bad header,
+ * filesystem error) so callers treat it as "unknown" rather than failing.
+ */
+async function glbFileCapabilities(fileUri) {
+    try {
+        const headerB64 = await LegacyFileSystem.readAsStringAsync(fileUri, {
+            encoding: LegacyFileSystem.EncodingType.Base64,
+            position: 0,
+            length: 20,
+        });
+        const jsonLength = (0, sketchfab_1.glbJsonChunkLength)((0, base64_js_1.toByteArray)(headerB64));
+        if (jsonLength === null || jsonLength <= 0)
+            return null;
+        const jsonB64 = await LegacyFileSystem.readAsStringAsync(fileUri, {
+            encoding: LegacyFileSystem.EncodingType.Base64,
+            position: 20,
+            length: jsonLength,
+        });
+        return (0, avatarCapabilities_1.inspectAvatarJsonChunk)((0, base64_js_1.toByteArray)(jsonB64));
+    }
+    catch (err) {
+        console.warn('[Create] GLB capability check failed:', err);
+        return null;
+    }
+}
+/**
+ * Promise-wrapped confirm for an avatar that can't fully lip-sync and/or move.
+ * Soft-warn — the user can still import. Alert buttons are a no-op on RN-web,
+ * so that path falls back to window.confirm.
+ */
+function confirmLimitedAvatar(cap) {
+    const issues = [];
+    if (!cap.canLipSync) {
+        issues.push(cap.lipSyncTier === 'minimal'
+            ? '• Only basic jaw movement — no facial blend shapes for real lipsync'
+            : '• No lipsync — no facial blend shapes');
+    }
+    if (!cap.canMove) {
+        issues.push('• No body gestures — the rig isn’t compatible with the motion engine');
+    }
+    const title = 'Limited Avatar';
+    const message = `This model has limitations:\n\n${issues.join('\n')}\n\nImport anyway?`;
+    if (react_native_1.Platform.OS === 'web') {
+        return Promise.resolve(typeof window !== 'undefined' ? window.confirm(`${title}\n\n${message}`) : true);
+    }
+    return new Promise((resolve) => {
+        react_native_1.Alert.alert(title, message, [
+            { text: 'Cancel', style: 'cancel', onPress: () => resolve(false) },
+            { text: 'Import Anyway', onPress: () => resolve(true) },
+        ]);
+    });
+}
+function formatCount(n) {
+    if (n >= 1000000)
+        return `${(n / 1000000).toFixed(1)}M`;
+    if (n >= 1000)
+        return `${(n / 1000).toFixed(1)}k`;
+    return String(n);
+}
+/**
+ * Good-first rank for a search result (lower = higher in the list):
+ *  0 backend-verified · 1 lip-sync + motion · 2 lip-sync only ·
+ *  3 unknown/pending/uninspected · 4 inspected but can't lip-sync (sinks).
+ */
+function capabilityRank(uid, verifiedUids, capabilities) {
+    if (verifiedUids.has(uid))
+        return 0;
+    const entry = capabilities.get(uid);
+    if (entry?.status === 'done') {
+        const { canLipSync, canMove } = entry.cap;
+        if (canLipSync && canMove)
+            return 1;
+        if (canLipSync)
+            return 2;
+        return 4;
+    }
+    return 3;
+}
+/** Card/sheet badge for a result's pre-flight capability, or null for none. */
+function capabilityBadge(uid, verifiedUids, capabilities) {
+    if (verifiedUids.has(uid))
+        return 'lipsync';
+    const entry = capabilities.get(uid);
+    if (!entry)
+        return null;
+    if (entry.status === 'pending')
+        return 'checking';
+    if (entry.status === 'unknown')
+        return null;
+    const { canLipSync, canMove } = entry.cap;
+    if (canLipSync && canMove)
+        return 'ready';
+    if (canLipSync)
+        return 'lipsync';
+    return 'limited';
+}
+// ---------------------------------------------------------------------------
+// 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 AvatarCreatorScreen({ sketchfabApiKey, onAvatarCreated, }) {
+    const bottomSheetRef = (0, react_1.useRef)(null);
+    // Responsive layout. The screen is mobile-first (fixed 2-col grid + bottom
+    // sheet). On web we widen the grid with available width and present the
+    // model detail as a centered modal instead of a phone-style bottom sheet.
+    const isWeb = react_native_1.Platform.OS === 'web';
+    const { width: windowWidth } = (0, react_native_1.useWindowDimensions)();
+    const numColumns = (0, react_1.useMemo)(() => {
+        if (!isWeb)
+            return 2;
+        // Cards read well at ~260px; cap at 5 columns so they don't get tiny.
+        return Math.max(2, Math.min(5, Math.floor(windowWidth / 260)));
+    }, [isWeb, windowWidth]);
+    // Search state
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [activeChip, setActiveChip] = (0, react_1.useState)(null);
+    const [query, setQuery] = (0, react_1.useState)(DEFAULT_QUERY);
+    // 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);
+    // Sketchfab uids that previously imported with working morph targets.
+    // Best-effort: an empty set just means no pinning/badges.
+    const [verifiedUids, setVerifiedUids] = (0, react_1.useState)(new Set());
+    // 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',
+            rigged: '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 loadInitial = (0, react_1.useCallback)(async (q) => {
+        try {
+            setLoading(true);
+            setError(null);
+            setModels([]);
+            setNextCursor(null);
+            const data = await searchSketchfab(q);
+            const filtered = data.results.filter(m => {
+                const size = m.archives?.glb?.size ?? m.archives?.gltf?.size;
+                return !size || size <= constants_1.MAX_ASSET_SIZE;
+            });
+            setModels(filtered);
+            setNextCursor(data.cursors?.next ?? null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to search Sketchfab');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [searchSketchfab]);
+    const loadMore = (0, react_1.useCallback)(async () => {
+        if (!nextCursor || loadingMore)
+            return;
+        try {
+            setLoadingMore(true);
+            const data = await searchSketchfab(query, nextCursor);
+            const filtered = data.results.filter(m => {
+                const size = m.archives?.glb?.size ?? m.archives?.gltf?.size;
+                return !size || size <= constants_1.MAX_ASSET_SIZE;
+            });
+            setModels((prev) => [...prev, ...filtered]);
+            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]);
+    // Initial load
+    (0, react_1.useEffect)(() => {
+        void loadInitial(query);
+    }, [query, loadInitial]);
+    (0, react_1.useEffect)(() => {
+        (0, api_1.getVerifiedSketchfabUids)()
+            .then((uids) => setVerifiedUids(new Set(uids)))
+            .catch((err) => console.warn('[Create] Failed to load verified models:', err));
+    }, []);
+    // Background-inspect the leading results so we can float lip-sync + motion
+    // ready avatars to the top and badge them before the user commits to import.
+    const capabilities = (0, useSketchfabCapabilities_1.useSketchfabCapabilities)({
+        models,
+        apiKey: sketchfabApiKey,
+    });
+    // Good-first ordering: backend-verified + inspected-good first, weak last,
+    // preserving Sketchfab's search order within each rank (stable sort).
+    const sortedModels = (0, react_1.useMemo)(() => {
+        return models
+            .map((m, i) => ({ m, i, rank: capabilityRank(m.uid, verifiedUids, capabilities) }))
+            .sort((a, b) => a.rank - b.rank || a.i - b.i)
+            .map((x) => x.m);
+    }, [models, verifiedUids, capabilities]);
+    // ------ Debounced text search -------------------------------------------
+    const handleSearchChange = (0, react_1.useCallback)((text) => {
+        setSearchText(text);
+        setActiveChip(null);
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        debounceRef.current = setTimeout(() => {
+            const trimmed = text.trim();
+            const nextQuery = trimmed ? `${trimmed} 3d model character humanoid avatar` : DEFAULT_QUERY;
+            setQuery(nextQuery);
+        }, 400);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+        };
+    }, []);
+    // ------ Filter chips ----------------------------------------------------
+    const handleChipPress = (0, react_1.useCallback)((chip) => {
+        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        if (activeChip === chip) {
+            setActiveChip(null);
+            setSearchText('');
+            setQuery(DEFAULT_QUERY);
+        }
+        else {
+            setActiveChip(chip);
+            setSearchText(chip);
+            setQuery(chip);
+        }
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+            debounceRef.current = null;
+        }
+    }, [activeChip]);
+    // ------ Card tap --------------------------------------------------------
+    const handleCardPress = (0, react_1.useCallback)((model) => {
+        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        setSelected(model);
+        setImportPhase(null);
+        setImportProgress(0);
+        if (!isWeb)
+            bottomSheetRef.current?.snapToIndex(0);
+    }, [isWeb]);
+    const closeDetail = (0, react_1.useCallback)(() => {
+        setSelected(null);
+        setImportPhase(null);
+        setImportProgress(0);
+    }, []);
+    const handleSheetChange = (0, react_1.useCallback)((index) => {
+        if (index === -1)
+            closeDetail();
+    }, [closeDetail]);
+    // ------ 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();
+            // 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('[Create] HEAD size check failed:', e);
+            }
+            if (tooLargeError)
+                throw tooLargeError;
+            // 2. Download GLB to disk
+            const tmpPath = `${LegacyFileSystem.cacheDirectory}sketchfab_import.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. Capability check — lipsync (facial blend shapes) + body motion
+            //    (humanoid rig the procedural motion engine can drive). Soft-warn.
+            const cap = await glbFileCapabilities(result.uri);
+            if (cap && (!cap.canLipSync || !cap.canMove)) {
+                const proceed = await confirmLimitedAvatar(cap);
+                if (!proceed) {
+                    await LegacyFileSystem.deleteAsync(tmpPath, { idempotent: true });
+                    return;
+                }
+            }
+            // 4. Upload to backend
+            setImportPhase('uploading');
+            setImportProgress(0);
+            const avatar = await (0, api_1.createAvatar)(result.uri, model.name, model.description || undefined, { sketchfabUid: model.uid, sketchfabHasMorphs: cap?.canLipSync === true });
+            // 5. Cleanup temp file
+            await LegacyFileSystem.deleteAsync(tmpPath, { idempotent: true });
+            // 6. Close sheet and navigate to editor
+            bottomSheetRef.current?.close();
+            onAvatarCreated?.(avatar.id);
+        }
+        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, onAvatarCreated]);
+    // ------ Render helpers --------------------------------------------------
+    const renderItem = (0, react_1.useCallback)(({ item, index }) => ((0, jsx_runtime_1.jsx)(SketchfabModelCard_1.SketchfabModelCard, { model: item, index: index, onPress: handleCardPress, showHumanoidBadge: true, capability: capabilityBadge(item.uid, verifiedUids, capabilities) })), [handleCardPress, verifiedUids, capabilities]);
+    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';
+        }
+        return 'Import Avatar';
+    }, [importPhase, importProgress]);
+    // ------ Selected model details ------------------------------------------
+    const selectedThumbnail = selected
+        ? pickThumbnail(selected.thumbnails, 600)
+        : null;
+    const selectedBadge = selected
+        ? capabilityBadge(selected.uid, verifiedUids, capabilities)
+        : null;
+    // ------ Header: search bar + chips --------------------------------------
+    const ListHeader = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(StudioBrowseHeader_1.StudioBrowseHeader, { eyebrow: "Sketchfab", title: "Create from 3D models", subtitle: "Find a strong base character, then import it into the studio without breaking your rhythm.", 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 Sketchfab models...", 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: FILTER_CHIPS.map((chip) => {
+                    const isActive = activeChip === chip;
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.chip, isActive && styles.chipActive], activeOpacity: 0.7, onPress: () => handleChipPress(chip), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                styles.chipText,
+                                isActive && styles.chipTextActive,
+                            ], children: chip }) }, chip));
+                }) })] })), [searchText, activeChip, handleSearchChange, handleChipPress]);
+    // ------ 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 models..." })] })] }));
+    }
+    // ------ 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.emptyIcon, children: "SEARCH" }), title: "No models 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;
+    // Shared detail content — rendered inside a bottom sheet (native) or a
+    // centered modal (web). Identical body in both cases.
+    const detailBody = 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) })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.sheetBadgeRow, children: [selectedBadge === 'ready' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.sheetBadge, styles.sheetReadyBadge], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sheetBadgeText, styles.sheetReadyText], children: "Lip-sync + motion" }) })), selectedBadge === 'lipsync' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.sheetBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sheetBadgeText, children: "Lip-sync ready" }) })), selectedBadge === 'limited' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.sheetBadge, styles.sheetLimitedBadge], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sheetBadgeText, styles.sheetLimitedText], children: "Limited lip-sync" }) })), isHumanoid(selected) && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.sheetBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sheetBadgeText, children: "Humanoid" }) })), selected.animationCount > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.sheetBadge, styles.sheetAnimatedBadge], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sheetBadgeText, children: "Animated" }) }))] }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.sheetMeta, children: ["by ", selected.user.displayName || selected.user.username, selected.license ? ` · ${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 Avatar" })) }))] })) : null;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(AnyFlashList, { style: { flex: 1 }, data: sortedModels, keyExtractor: keyExtractor, renderItem: renderItem, numColumns: numColumns, estimatedItemSize: 200, contentContainerStyle: styles.gridContent, showsVerticalScrollIndicator: false, ListHeaderComponent: ListHeader, ListFooterComponent: renderFooter }), isWeb ? ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: !!selected, transparent: true, animationType: "fade", onRequestClose: closeDetail, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.webModalBackdrop, onPress: closeDetail, children: (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: styles.webModalCard, onPress: () => { }, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.webModalClose, onPress: closeDetail, accessibilityLabel: "Close", children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close", size: 22, color: COLORS.textSecondary }) }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { contentContainerStyle: styles.sheetContent, children: selected ? detailBody : null })] }) }) })) : ((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 ? detailBody : 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: {
+        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',
+    },
+    emptyIcon: {
+        fontSize: 40,
+        marginBottom: 4,
+    },
+    sheetBackground: {
+        backgroundColor: COLORS.surface,
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    sheetHandle: {
+        backgroundColor: COLORS.border,
+        width: 40,
+    },
+    sheetContent: {
+        paddingHorizontal: 24,
+        paddingTop: 8,
+        paddingBottom: 40,
+        gap: 12,
+    },
+    // Web detail modal — centered, bounded card instead of a bottom sheet.
+    webModalBackdrop: {
+        flex: 1,
+        backgroundColor: 'rgba(8, 10, 16, 0.6)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+    },
+    webModalCard: {
+        width: '100%',
+        maxWidth: 560,
+        maxHeight: '90%',
+        backgroundColor: COLORS.surface,
+        borderRadius: 20,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        overflow: 'hidden',
+    },
+    webModalClose: {
+        position: 'absolute',
+        top: 12,
+        right: 12,
+        zIndex: 1,
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: COLORS.backgroundAlt,
+    },
+    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,
+    },
+    sheetBadgeRow: {
+        flexDirection: 'row',
+        gap: 8,
+        flexWrap: 'wrap',
+    },
+    sheetBadge: {
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 8,
+        backgroundColor: 'rgba(108, 99, 255, 0.15)',
+    },
+    sheetAnimatedBadge: {
+        backgroundColor: 'rgba(59, 178, 115, 0.15)',
+    },
+    sheetReadyBadge: {
+        backgroundColor: 'rgba(72, 201, 138, 0.18)',
+    },
+    sheetReadyText: {
+        color: '#48c98a',
+    },
+    sheetLimitedBadge: {
+        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    },
+    sheetLimitedText: {
+        color: COLORS.textMuted,
+    },
+    sheetBadgeText: {
+        color: COLORS.accent,
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    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',
+    },
+});