talking-head-studio 0.4.11 → 0.4.12

package/dist/studio/DetailsPanel.js

@@ -0,0 +1,239 @@
+"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.DetailsPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const Haptics = __importStar(require("expo-haptics"));
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const editor_1 = require("../editor");
+const COLORS = {
+    background: editor_1.studioTheme.colors.surface,
+    card: editor_1.studioTheme.colors.surfaceRaised,
+    border: editor_1.studioTheme.colors.border,
+    accent: editor_1.studioTheme.colors.accent,
+    textMain: editor_1.studioTheme.colors.textPrimary,
+    textMuted: editor_1.studioTheme.colors.textMuted,
+    danger: editor_1.studioTheme.colors.danger,
+    inputBg: editor_1.studioTheme.colors.backgroundAlt
+};
+const CustomSwitch = ({ value, onValueChange }) => {
+    const offset = (0, react_native_reanimated_1.useSharedValue)(value ? 1 : 0);
+    (0, react_1.useEffect)(() => {
+        offset.value = (0, react_native_reanimated_1.withTiming)(value ? 1 : 0, { duration: 250 });
+    }, [offset, value]);
+    const animatedTrackStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return {
+            backgroundColor: (0, react_native_reanimated_1.interpolateColor)(offset.value, [0, 1], [COLORS.inputBg, COLORS.accent])
+        };
+    });
+    const animatedThumbStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return {
+            transform: [{ translateX: offset.value * 22 }]
+        };
+    });
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => onValueChange(!value), hitSlop: 10, style: styles.switchContainer, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.switchTrack, animatedTrackStyle], children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.switchThumb, animatedThumbStyle] }) }) }));
+};
+const DetailsPanel = ({ name, setName, description, setDescription, isPublic, setIsPublic, isDirty, saving, onSave, onDelete }) => {
+    const pulseOpacity = (0, react_native_reanimated_1.useSharedValue)(1);
+    const pulseScale = (0, react_native_reanimated_1.useSharedValue)(1);
+    (0, react_1.useEffect)(() => {
+        if (isDirty && !saving) {
+            pulseOpacity.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withSequence)((0, react_native_reanimated_1.withTiming)(0.7, { duration: 1200 }), (0, react_native_reanimated_1.withTiming)(1, { duration: 1200 })), -1, true);
+            pulseScale.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withSequence)((0, react_native_reanimated_1.withTiming)(0.98, { duration: 1200 }), (0, react_native_reanimated_1.withTiming)(1, { duration: 1200 })), -1, true);
+        }
+        else {
+            pulseOpacity.value = (0, react_native_reanimated_1.withTiming)(isDirty ? 1 : 0.4, { duration: 300 });
+            pulseScale.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 300 });
+        }
+    }, [isDirty, pulseOpacity, pulseScale, saving]);
+    const animatedButtonStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return {
+            opacity: pulseOpacity.value,
+            transform: [{ scale: pulseScale.value }]
+        };
+    });
+    const handleDelete = () => {
+        react_native_1.Alert.alert("Delete Avatar", "Are you sure you want to delete this avatar? This action cannot be undone.", [
+            { text: "Cancel", style: "cancel" },
+            { text: "Delete", style: "destructive", onPress: () => {
+                    void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+                    onDelete();
+                } }
+        ]);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: styles.container, contentContainerStyle: styles.contentContainer, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.card, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "Name" }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: styles.input, value: name, onChangeText: setName, placeholder: "Give your avatar a name", placeholderTextColor: COLORS.textMuted, selectionColor: COLORS.accent })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "Description" }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [styles.input, styles.textArea], value: description, onChangeText: setDescription, placeholder: "Describe your avatar's persona and traits...", placeholderTextColor: COLORS.textMuted, selectionColor: COLORS.accent, multiline: true, textAlignVertical: "top" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.section, styles.row, styles.lastSection], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.textContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "Public Profile" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.subtext, children: "Allow others to view and interact with this avatar." })] }), (0, jsx_runtime_1.jsx)(CustomSwitch, { value: isPublic, onValueChange: setIsPublic })] })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.actionsContainer, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedButtonStyle, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [styles.saveButton, (!isDirty || saving) && styles.saveButtonDisabled], onPress: () => {
+                            void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+                            onSave();
+                        }, disabled: !isDirty || saving, children: saving ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: "#fff" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.saveButtonText, children: "Save Changes" })) }) }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.dangerZone, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.dangerTitle, children: "Danger Zone" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.dangerSubtext, children: "Permanently remove this avatar and all associated data." }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.deleteButton, onPress: handleDelete, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.deleteButtonText, children: "Delete Avatar" }) })] })] }));
+};
+exports.DetailsPanel = DetailsPanel;
+exports.default = exports.DetailsPanel;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: COLORS.background,
+    },
+    contentContainer: {
+        padding: 16,
+        paddingBottom: 40,
+    },
+    card: {
+        backgroundColor: COLORS.card,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        padding: 20,
+        marginBottom: 24,
+    },
+    section: {
+        marginBottom: 20,
+    },
+    lastSection: {
+        marginBottom: 0,
+    },
+    label: {
+        color: COLORS.textMain,
+        fontSize: 15,
+        fontWeight: '600',
+        marginBottom: 8,
+        letterSpacing: 0.3,
+    },
+    subtext: {
+        color: COLORS.textMuted,
+        fontSize: 13,
+        lineHeight: 18,
+    },
+    input: {
+        backgroundColor: COLORS.inputBg,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        borderRadius: 12,
+        color: COLORS.textMain,
+        fontSize: 15,
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+    },
+    textArea: {
+        minHeight: 100,
+        paddingTop: 14,
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    textContainer: {
+        flex: 1,
+        paddingRight: 16,
+    },
+    switchContainer: {
+        justifyContent: 'center',
+    },
+    switchTrack: {
+        width: 48,
+        height: 26,
+        borderRadius: 13,
+        padding: 2,
+    },
+    switchThumb: {
+        width: 22,
+        height: 22,
+        backgroundColor: '#ffffff',
+        borderRadius: 11,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        shadowRadius: 2,
+        elevation: 2,
+    },
+    actionsContainer: {
+        marginBottom: 40,
+    },
+    saveButton: {
+        backgroundColor: COLORS.accent,
+        borderRadius: 999,
+        paddingVertical: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: COLORS.accent,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 4,
+    },
+    saveButtonDisabled: {
+        backgroundColor: COLORS.inputBg,
+        shadowOpacity: 0,
+        elevation: 0,
+    },
+    saveButtonText: {
+        color: '#ffffff',
+        fontSize: 16,
+        fontWeight: '600',
+        letterSpacing: 0.5,
+    },
+    dangerZone: {
+        marginTop: 'auto',
+        paddingTop: 24,
+        borderTopWidth: 1,
+        borderTopColor: COLORS.border,
+    },
+    dangerTitle: {
+        color: COLORS.danger,
+        fontSize: 15,
+        fontWeight: '600',
+        marginBottom: 4,
+    },
+    dangerSubtext: {
+        color: COLORS.textMuted,
+        fontSize: 13,
+        marginBottom: 16,
+    },
+    deleteButton: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: 'rgba(240, 122, 122, 0.35)',
+        borderRadius: 18,
+        paddingVertical: 14,
+        alignItems: 'center',
+    },
+    deleteButtonText: {
+        color: COLORS.danger,
+        fontSize: 15,
+        fontWeight: '600',
+    },
+});

package/dist/studio/FilamentEditor.d.ts

@@ -0,0 +1,2 @@
+export { AvatarEditor as FilamentEditor, AvatarEditor as default } from '../editor';
+export type { AvatarEditorProps as FilamentEditorProps } from '../editor';

package/dist/studio/FilamentEditor.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.FilamentEditor = void 0;
+var editor_1 = require("../editor");
+Object.defineProperty(exports, "FilamentEditor", { enumerable: true, get: function () { return editor_1.AvatarEditor; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return editor_1.AvatarEditor; } });

package/dist/studio/PrecisionPanel.d.ts

@@ -0,0 +1,2 @@
+export declare function PrecisionPanel(_props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+export default PrecisionPanel;

package/dist/studio/PrecisionPanel.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrecisionPanel = PrecisionPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+function PrecisionPanel(_props) { return (0, jsx_runtime_1.jsx)(react_native_1.View, {}); }
+exports.default = PrecisionPanel;

package/dist/studio/PublicGalleryScreen.d.ts

@@ -0,0 +1,5 @@
+export interface PublicGalleryScreenProps {
+    onUseAvatar?: (fileUrl: string, avatarName: string) => void;
+    onNavigateToAssistant?: () => void;
+}
+export declare function PublicGalleryScreen({ onUseAvatar, onNavigateToAssistant, }: PublicGalleryScreenProps): import("react/jsx-runtime").JSX.Element;

package/dist/studio/PublicGalleryScreen.js

@@ -0,0 +1,358 @@
+"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.PublicGalleryScreen = PublicGalleryScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(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 moti_1 = require("moti");
+const bottom_sheet_1 = __importStar(require("@gorhom/bottom-sheet"));
+const Haptics = __importStar(require("expo-haptics"));
+const expo_blur_1 = require("expo-blur");
+const api_1 = require("../api");
+const constants_1 = require("./constants");
+const editor_1 = require("../editor");
+const StudioBrowseHeader_1 = require("./StudioBrowseHeader");
+const StudioEmptyState_1 = require("./StudioEmptyState");
+const COLORS = editor_1.studioTheme.colors;
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function truncateUserId(id, maxLen = 12) {
+    if (id.length <= maxLen)
+        return id;
+    return `${id.slice(0, maxLen)}\u2026`;
+}
+function formatVoiceBadge(avatar) {
+    if (!avatar.voice_name)
+        return null;
+    const lang = avatar.voice_language?.toUpperCase() ?? '';
+    return lang ? `${lang} \u2014 ${avatar.voice_name}` : avatar.voice_name;
+}
+const GalleryCard = react_1.default.memo(function GalleryCard({ avatar, index, onPress, headers, }) {
+    const thumbnailUrl = (0, api_1.avatarThumbnailUrl)(avatar);
+    const voiceBadge = formatVoiceBadge(avatar);
+    const delay = Math.min(index * 60, 600);
+    return ((0, jsx_runtime_1.jsx)(moti_1.MotiView, { from: { opacity: 0, translateY: 20 }, animate: { opacity: 1, translateY: 0 }, transition: { type: 'timing', duration: 400, delay }, style: styles.cardOuter, children: (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { activeOpacity: 0.7, onPress: () => onPress(avatar), style: styles.card, children: [thumbnailUrl ? ((0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: thumbnailUrl, headers }, style: styles.thumbnail, contentFit: "cover", placeholder: { blurhash: constants_1.BLURHASH }, transition: 250, cachePolicy: "memory-disk", recyclingKey: avatar.id })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.thumbnailPlaceholder, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.placeholderText, children: "3D" }) })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardName, numberOfLines: 1, children: avatar.name }), voiceBadge ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.voiceBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.voiceBadgeText, numberOfLines: 1, children: voiceBadge }) })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.cardCreator, numberOfLines: 1, children: ["by ", truncateUserId(avatar.owner_user_id)] })] }) }));
+});
+// ---------------------------------------------------------------------------
+// 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 PublicGalleryScreen({ onUseAvatar, onNavigateToAssistant, }) {
+    const bottomSheetRef = (0, react_1.useRef)(null);
+    // State
+    const [avatars, setAvatars] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [headers, setHeaders] = (0, react_1.useState)({});
+    const [selected, setSelected] = (0, react_1.useState)(null);
+    // Bottom sheet snap points
+    const snapPoints = (0, react_1.useMemo)(() => ['50%', '75%'], []);
+    // ------ Data fetching ---------------------------------------------------
+    const loadData = (0, react_1.useCallback)(async () => {
+        try {
+            setLoading(true);
+            setError(null);
+            const [data, th] = await Promise.all([
+                (0, api_1.getPublicAvatars)(),
+                (0, api_1.thumbnailHeaders)(),
+            ]);
+            setAvatars(data);
+            setHeaders(th);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load public avatars');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        void loadData();
+    }, [loadData]);
+    // ------ Interactions ----------------------------------------------------
+    const handleCardPress = (0, react_1.useCallback)((avatar) => {
+        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        setSelected(avatar);
+        bottomSheetRef.current?.snapToIndex(0);
+    }, []);
+    const handleUseAvatar = (0, react_1.useCallback)(() => {
+        if (!selected)
+            return;
+        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+        bottomSheetRef.current?.close();
+        const fileUrl = `${selected.id}/file`;
+        onUseAvatar?.(fileUrl, selected.name);
+        react_native_1.Alert.alert('Avatar Selected', `"${selected.name}" is ready. Go to your assistant to see it in action.`, [
+            { text: 'Stay Here', style: 'cancel' },
+            {
+                text: 'Go to Assistant',
+                onPress: () => onNavigateToAssistant?.(),
+            },
+        ]);
+    }, [selected, onUseAvatar, onNavigateToAssistant]);
+    const handleSheetChange = (0, react_1.useCallback)((index) => {
+        if (index === -1) {
+            setSelected(null);
+        }
+    }, []);
+    // ------ Render helpers --------------------------------------------------
+    const renderItem = (0, react_1.useCallback)(({ item, index }) => ((0, jsx_runtime_1.jsx)(GalleryCard, { avatar: item, index: index, onPress: handleCardPress, headers: headers })), [handleCardPress, headers]);
+    const keyExtractor = (0, react_1.useCallback)((item) => item.id, []);
+    // ------ Loading state ---------------------------------------------------
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.container, children: (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: "Discovering avatars\\u2026" })] }) }));
+    }
+    // ------ Error state -----------------------------------------------------
+    if (error) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.container, children: (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: loadData, style: styles.retryButton, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.retryButtonText, children: "Retry" }) })] }) }));
+    }
+    // ------ Empty state -----------------------------------------------------
+    if (avatars.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.container, children: (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: "PUBLIC" }), title: "No public avatars yet", subtitle: "Be the first to share an avatar with the community." }) }) }));
+    }
+    // ------ Main grid -------------------------------------------------------
+    const selectedThumbnail = selected ? (0, api_1.avatarThumbnailUrl)(selected) : null;
+    const selectedVoice = selected ? formatVoiceBadge(selected) : null;
+    // 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: avatars, keyExtractor: keyExtractor, renderItem: renderItem, numColumns: 2, estimatedItemSize: 200, contentContainerStyle: styles.gridContent, showsVerticalScrollIndicator: false, ListHeaderComponent: (0, jsx_runtime_1.jsx)(StudioBrowseHeader_1.StudioBrowseHeader, { eyebrow: "Gallery", title: "Public avatars", subtitle: "Browse community-ready characters and pull one straight into your assistant." }), ListFooterComponent: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.gridBottomSpacer }) }), (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.BottomSheetView, { style: 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, headers }, 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, children: selected.description })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.sheetMeta, children: [selectedVoice ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.sheetVoiceBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sheetVoiceBadgeText, children: selectedVoice }) })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.sheetCreator, children: ["by ", truncateUserId(selected.owner_user_id, 20)] })] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.useButton, activeOpacity: 0.8, onPress: handleUseAvatar, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.useButtonText, children: "Use This Avatar" }) })] })) : 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,
+    },
+    gridContent: {
+        paddingHorizontal: 12,
+    },
+    gridBottomSpacer: {
+        height: 32,
+    },
+    cardOuter: {
+        flex: 1,
+        marginHorizontal: 6,
+        marginBottom: 12,
+    },
+    card: {
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        backgroundColor: COLORS.surfaceRaised,
+        overflow: 'hidden',
+        padding: 10,
+        gap: 6,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 4,
+    },
+    thumbnail: {
+        width: '100%',
+        aspectRatio: 1,
+        borderRadius: 12,
+        backgroundColor: COLORS.backgroundAlt,
+    },
+    thumbnailPlaceholder: {
+        width: '100%',
+        aspectRatio: 1,
+        borderRadius: 12,
+        backgroundColor: COLORS.surfaceSoft,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    placeholderText: {
+        color: COLORS.textMuted,
+        fontSize: 22,
+        fontWeight: '700',
+        letterSpacing: 2,
+    },
+    cardName: {
+        color: COLORS.textPrimary,
+        fontSize: 13,
+        fontWeight: '600',
+        textAlign: 'center',
+        marginTop: 2,
+    },
+    voiceBadge: {
+        alignSelf: 'center',
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+        borderRadius: 8,
+        backgroundColor: 'rgba(255, 122, 89, 0.14)',
+    },
+    voiceBadgeText: {
+        color: COLORS.accent,
+        fontSize: 10,
+        fontWeight: '600',
+    },
+    cardCreator: {
+        color: COLORS.textMuted,
+        fontSize: 10,
+        textAlign: 'center',
+    },
+    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: {
+        flex: 1,
+        paddingHorizontal: 24,
+        paddingTop: 8,
+        paddingBottom: 32,
+        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,
+    },
+    sheetMeta: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        flexWrap: 'wrap',
+    },
+    sheetVoiceBadge: {
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 8,
+        backgroundColor: 'rgba(255, 122, 89, 0.14)',
+    },
+    sheetVoiceBadgeText: {
+        color: COLORS.accent,
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    sheetCreator: {
+        color: COLORS.textMuted,
+        fontSize: 12,
+    },
+    useButton: {
+        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,
+    },
+    useButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '700',
+        letterSpacing: 0.3,
+    },
+});

package/dist/studio/SketchfabModelCard.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { SketchfabModel } from '../sketchfab';
+/**
+ * Pre-flight avatar capability, surfaced as a card badge:
+ *  - 'ready'    lip-sync + body motion (or backend-verified)
+ *  - 'lipsync'  facial blend shapes, but the rig can't drive body motion
+ *  - 'limited'  inspected, can't lip-sync — sinks in good-first ranking
+ *  - 'checking' inspection in flight
+ */
+export type CapabilityBadge = 'ready' | 'lipsync' | 'limited' | 'checking';
+interface SketchfabModelCardProps {
+    model: SketchfabModel;
+    index: number;
+    onPress: (model: SketchfabModel) => void;
+    showHumanoidBadge?: boolean;
+    /** Pre-flight capability badge from background GLB inspection. */
+    capability?: CapabilityBadge | null;
+}
+export declare const SketchfabModelCard: React.MemoExoticComponent<({ model, index, onPress, showHumanoidBadge, capability, }: SketchfabModelCardProps) => import("react/jsx-runtime").JSX.Element>;
+export default SketchfabModelCard;