talking-head-studio 0.4.10 → 0.4.12

package/dist/studio/AccessoryPanel.js

@@ -0,0 +1,396 @@
+"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.default = AccessoryPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vector_icons_1 = require("@expo/vector-icons");
+const Haptics = __importStar(require("expo-haptics"));
+const moti_1 = require("moti");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const api_1 = require("../api");
+const wardrobe_1 = require("../wardrobe");
+const editor_1 = require("../editor");
+const accessoryDefaults_1 = require("../wgpu/accessoryDefaults");
+const COLORS = {
+    bg: editor_1.studioTheme.colors.background,
+    surface: editor_1.studioTheme.colors.surface,
+    card: editor_1.studioTheme.colors.surfaceRaised,
+    border: editor_1.studioTheme.colors.border,
+    accent: editor_1.studioTheme.colors.accent,
+    textPrimary: editor_1.studioTheme.colors.textPrimary,
+    textSecondary: editor_1.studioTheme.colors.textSecondary,
+    error: editor_1.studioTheme.colors.danger,
+};
+function AccessoryPanel({ avatarId, onPositionAsset, onBrowseAccessories, avatarRef }) {
+    const [assets, setAssets] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [activeCategory, setActiveCategory] = (0, react_1.useState)(null);
+    const [placingIds, setPlacingIds] = (0, react_1.useState)(new Set());
+    const equipped = (0, wardrobe_1.useWardrobeStore)((s) => s.equipped);
+    const placements = (0, wardrobe_1.useWardrobeStore)((s) => s.placements);
+    const equip = (0, wardrobe_1.useWardrobeStore)((s) => s.equip);
+    const unequip = (0, wardrobe_1.useWardrobeStore)((s) => s.unequip);
+    const setPlacement = (0, wardrobe_1.useWardrobeStore)((s) => s.setPlacement);
+    const activeAssetId = (0, wardrobe_1.useWardrobeStore)((s) => s.activeAssetId);
+    // Breathing border opacity
+    const borderOpacity = (0, react_native_reanimated_1.useSharedValue)(0.5);
+    (0, react_1.useEffect)(() => {
+        borderOpacity.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withSequence)((0, react_native_reanimated_1.withTiming)(1, { duration: 1000 }), (0, react_native_reanimated_1.withTiming)(0.4, { duration: 1000 })), -1, true);
+    }, [borderOpacity]);
+    const activeBorderStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        borderColor: `rgba(255, 122, 89, ${borderOpacity.value})`,
+    }));
+    (0, react_1.useEffect)(() => {
+        void fetchAssets();
+    }, []);
+    const fetchAssets = async () => {
+        try {
+            setIsLoading(true);
+            setError(null);
+            const data = await (0, api_1.listAssets)();
+            setAssets(data || []);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load assets');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const categories = Array.from(new Set(assets.map((a) => a.category))).sort();
+    const filteredAssets = activeCategory
+        ? assets.filter((a) => a.category === activeCategory)
+        : assets;
+    const toggleEquip = (asset) => {
+        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        const isEquipped = equipped[asset.slot]?.id === asset.id;
+        if (isEquipped) {
+            unequip(asset.slot);
+        }
+        else {
+            equip(asset.slot, asset);
+            // Apply snap default if no placement has been saved yet
+            if (!setPlacement || placements[asset.id])
+                return;
+            const snap = (0, accessoryDefaults_1.snapDefaultForCategory)(asset.category);
+            if (snap) {
+                setPlacement(asset.id, snap);
+                // Blink reaction — avatar acknowledges the item snapping on
+                avatarRef?.current?.triggerBlink();
+            }
+        }
+    };
+    const handleAutoPlace = async (asset) => {
+        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+        try {
+            setPlacingIds((prev) => new Set(prev).add(asset.id));
+            const suggestion = await (0, api_1.suggestPlacement)(asset.id, avatarId);
+            setPlacement(asset.id, {
+                bone: suggestion.bone,
+                position: suggestion.position,
+                rotation: suggestion.rotation,
+                scale: 1,
+            });
+            // Ensure it is equipped
+            if (equipped[asset.slot]?.id !== asset.id) {
+                equip(asset.slot, asset);
+            }
+            void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        }
+        catch (err) {
+            console.error('Auto-place failed', err);
+            void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        }
+        finally {
+            setPlacingIds((prev) => {
+                const next = new Set(prev);
+                next.delete(asset.id);
+                return next;
+            });
+        }
+    };
+    const handlePosition = (asset) => {
+        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        // Ensure it's equipped before entering position mode
+        if (equipped[asset.slot]?.id !== asset.id) {
+            equip(asset.slot, asset);
+        }
+        onPositionAsset(asset.id);
+    };
+    const handleDeleteAsset = (asset) => {
+        react_native_1.Alert.alert("Delete Accessory", `Are you sure you want to delete "${asset.name}"? This action cannot be undone.`, [
+            { text: "Cancel", style: "cancel" },
+            {
+                text: "Delete",
+                style: "destructive",
+                onPress: () => {
+                    void (async () => {
+                        try {
+                            setIsLoading(true);
+                            await (0, api_1.deleteAsset)(asset.id);
+                            void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+                            // Un-equip if currently equipped
+                            if (equipped[asset.slot]?.id === asset.id) {
+                                unequip(asset.slot);
+                            }
+                            setAssets((prev) => prev.filter(a => a.id !== asset.id));
+                        }
+                        catch (err) {
+                            void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+                            react_native_1.Alert.alert("Error", err instanceof Error ? err.message : "Failed to delete accessory");
+                        }
+                        finally {
+                            setIsLoading(false);
+                        }
+                    })();
+                }
+            }
+        ]);
+    };
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.centerContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: COLORS.accent }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingText, children: "Loading wardrobe..." })] }));
+    }
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.centerContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.errorText, children: error }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.retryButton, onPress: fetchAssets, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.retryButtonText, children: "Retry" }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: "YOUR WARDROBE" }), categories.length > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.categoriesWrapper, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.categoriesContent, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
+                                void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                                setActiveCategory(null);
+                            }, style: [styles.categoryChip, !activeCategory && styles.categoryChipActive], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.categoryText, !activeCategory && styles.categoryTextActive], children: "All" }) }), categories.map((cat) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
+                                void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                                setActiveCategory(cat);
+                            }, style: [styles.categoryChip, activeCategory === cat && styles.categoryChipActive], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.categoryText, activeCategory === cat && styles.categoryTextActive], children: cat.toUpperCase() }) }, cat)))] }) })), (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: styles.browseButton, onPress: () => onBrowseAccessories?.(), children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "search", size: 16, color: COLORS.accent, style: styles.actionIcon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.browseButtonText, children: "Browse Sketchfab" })] }), assets.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyStateText, children: "You don't have any accessories yet. Upload some in the studio!" })) : ((0, jsx_runtime_1.jsx)(react_native_1.FlatList, { data: filteredAssets, keyExtractor: (item) => item.id, contentContainerStyle: styles.listContent, showsVerticalScrollIndicator: false, renderItem: ({ item, index }) => {
+                    const isEquipped = equipped[item.slot]?.id === item.id;
+                    const isPlacing = placingIds.has(item.id);
+                    return ((0, jsx_runtime_1.jsx)(moti_1.MotiView, { from: { opacity: 0, translateY: 20 }, animate: { opacity: 1, translateY: 0 }, transition: { type: 'spring', damping: 16, stiffness: 180, delay: index * 60 }, children: (0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [
+                                styles.card,
+                                isEquipped && styles.cardActive,
+                                item.id === activeAssetId && activeBorderStyle,
+                            ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: styles.cardHeader, onPress: () => toggleEquip(item), children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.cardInfo, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.cardTitleRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.name, numberOfLines: 1, children: item.name }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.deleteButton, onPress: (e) => {
+                                                                e.stopPropagation();
+                                                                handleDeleteAsset(item);
+                                                            }, hitSlop: 10, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "trash", size: 16, color: COLORS.error }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.badge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.badgeText, children: item.category.toUpperCase() }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.equipToggle, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: isEquipped ? 'checkmark-circle' : 'ellipse-outline', size: 24, color: isEquipped ? COLORS.accent : COLORS.border }) })] }), isEquipped && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionsRow, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: styles.actionButton, onPress: () => handlePosition(item), children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "move", size: 16, color: COLORS.textPrimary, style: styles.actionIcon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.actionText, children: "Position" })] }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [styles.actionButton, styles.autoPlaceButton], onPress: () => handleAutoPlace(item), disabled: isPlacing, children: isPlacing ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: COLORS.accent })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "color-wand", size: 16, color: COLORS.accent, style: styles.actionIcon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.autoPlaceText, children: "Auto-place" })] })) })] }))] }) }));
+                } }))] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingVertical: 16,
+    },
+    centerContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+    },
+    sectionTitle: {
+        color: COLORS.textSecondary,
+        fontSize: 12,
+        fontWeight: '700',
+        letterSpacing: 1.2,
+        textTransform: 'uppercase',
+        paddingHorizontal: 16,
+        marginBottom: 12,
+    },
+    categoriesWrapper: {
+        marginBottom: 16,
+    },
+    categoriesContent: {
+        paddingHorizontal: 16,
+        gap: 8,
+    },
+    categoryChip: {
+        backgroundColor: COLORS.card,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+    },
+    categoryChipActive: {
+        backgroundColor: editor_1.studioTheme.colors.accentMuted,
+        borderColor: COLORS.accent,
+    },
+    categoryText: {
+        color: COLORS.textSecondary,
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    categoryTextActive: {
+        color: COLORS.accent,
+    },
+    emptyStateText: {
+        paddingHorizontal: 16,
+        paddingTop: 8,
+        color: COLORS.textSecondary,
+        fontSize: 14,
+        fontStyle: 'italic',
+    },
+    listContent: {
+        paddingHorizontal: 16,
+        paddingBottom: 24,
+        gap: 12,
+    },
+    card: {
+        backgroundColor: COLORS.card,
+        borderRadius: 18,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        padding: 16,
+        overflow: 'hidden',
+    },
+    cardActive: {
+        borderColor: COLORS.accent,
+        backgroundColor: editor_1.studioTheme.colors.accentMuted,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    cardInfo: {
+        flex: 1,
+        marginRight: 16,
+    },
+    cardTitleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 6,
+    },
+    name: {
+        color: COLORS.textPrimary,
+        fontSize: 16,
+        fontWeight: '600',
+        flex: 1,
+        marginRight: 8,
+    },
+    deleteButton: {
+        padding: 4,
+    },
+    badge: {
+        alignSelf: 'flex-start',
+        backgroundColor: COLORS.border,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+    },
+    badgeText: {
+        color: COLORS.textSecondary,
+        fontSize: 10,
+        fontWeight: '700',
+        letterSpacing: 0.5,
+    },
+    equipToggle: {
+        padding: 4,
+    },
+    actionsRow: {
+        flexDirection: 'row',
+        marginTop: 16,
+        gap: 8,
+    },
+    actionButton: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: COLORS.border,
+        paddingVertical: 10,
+        borderRadius: 8,
+    },
+    autoPlaceButton: {
+        backgroundColor: editor_1.studioTheme.colors.accentMuted,
+        borderWidth: 1,
+        borderColor: `${editor_1.studioTheme.colors.accent}55`,
+    },
+    actionIcon: {
+        marginRight: 6,
+    },
+    actionText: {
+        color: COLORS.textPrimary,
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    autoPlaceText: {
+        color: COLORS.accent,
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    loadingText: {
+        marginTop: 16,
+        color: COLORS.textSecondary,
+        fontSize: 15,
+        fontWeight: '500',
+        letterSpacing: 0.5,
+    },
+    errorText: {
+        color: COLORS.error,
+        fontSize: 15,
+        textAlign: 'center',
+        marginBottom: 20,
+        lineHeight: 22,
+    },
+    retryButton: {
+        backgroundColor: COLORS.border,
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 999,
+    },
+    retryButtonText: {
+        color: COLORS.textPrimary,
+        fontWeight: '600',
+        fontSize: 14,
+    },
+    browseButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginHorizontal: 16,
+        marginBottom: 16,
+        paddingVertical: 12,
+        borderRadius: 18,
+        backgroundColor: editor_1.studioTheme.colors.accentMuted,
+        borderWidth: 1,
+        borderColor: `${editor_1.studioTheme.colors.accent}55`,
+    },
+    browseButtonText: {
+        color: COLORS.accent,
+        fontSize: 15,
+        fontWeight: '600',
+    },
+});

package/dist/studio/AppearancePanel.d.ts

@@ -0,0 +1,9 @@
+export interface AppearancePanelProps {
+    hairColor: string;
+    setHairColor: (color: string) => void;
+    skinColor: string;
+    setSkinColor: (color: string) => void;
+    eyeColor: string;
+    setEyeColor: (color: string) => void;
+}
+export default function AppearancePanel({ hairColor, setHairColor, skinColor, setSkinColor, eyeColor, setEyeColor, }: AppearancePanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/studio/AppearancePanel.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AppearancePanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const ColorSwatch_1 = __importDefault(require("./ColorSwatch"));
+const StudioSurfaceCard_1 = require("./StudioSurfaceCard");
+const editor_1 = require("../editor");
+const HAIR_PALETTE = [
+    { name: 'Raven', hex: '#090806' },
+    { name: 'Chestnut', hex: '#2C1B18' },
+    { name: 'Auburn', hex: '#4A2711' },
+    { name: 'Copper', hex: '#8D2E14' },
+    { name: 'Strawberry', hex: '#A33318' },
+    { name: 'Honey', hex: '#B36D4B' },
+    { name: 'Blonde', hex: '#DCB378' },
+    { name: 'Platinum', hex: '#F0E2C8' },
+    { name: 'Silver', hex: '#E5E6E6' },
+];
+const EYE_PALETTE = [
+    { name: 'Onyx', hex: '#1A1A1A' },
+    { name: 'Espresso', hex: '#3B2715' },
+    { name: 'Amber', hex: '#5A3821' },
+    { name: 'Hazel', hex: '#8A6A40' },
+    { name: 'Emerald', hex: '#766B42' },
+    { name: 'Olive', hex: '#526943' },
+    { name: 'Forest', hex: '#3B593C' },
+    { name: 'Ocean', hex: '#2E536F' },
+    { name: 'Sky', hex: '#5586B2' },
+    { name: 'Ice', hex: '#8BB2D2' },
+    { name: 'Violet', hex: '#5D4E8C' },
+];
+const SKIN_PALETTE = [
+    { name: 'Espresso', hex: '#3A2318' },
+    { name: 'Mocha', hex: '#4A2E20' },
+    { name: 'Cocoa', hex: '#5C3A21' },
+    { name: 'Chestnut', hex: '#7A4B3A' },
+    { name: 'Bronze', hex: '#96684C' },
+    { name: 'Caramel', hex: '#B48A66' },
+    { name: 'Almond', hex: '#D2A884' },
+    { name: 'Sand', hex: '#EAC099' },
+    { name: 'Ivory', hex: '#F5D0B5' },
+    { name: 'Porcelain', hex: '#FCE0C6' },
+    { name: 'Pale', hex: '#FFF0E0' },
+];
+function ColorRow({ title, currentColor, onChangeColor, palette, }) {
+    const normalizedCurrent = currentColor.toUpperCase();
+    const isCustomColor = !palette.some((c) => c.hex.toUpperCase() === normalizedCurrent);
+    return ((0, jsx_runtime_1.jsxs)(StudioSurfaceCard_1.StudioSurfaceCard, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: title }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.scrollContent, children: [isCustomColor && currentColor && ((0, jsx_runtime_1.jsx)(ColorSwatch_1.default, { color: currentColor, selected: true, onPress: () => onChangeColor(currentColor), label: "Custom" })), palette.map((item) => ((0, jsx_runtime_1.jsx)(ColorSwatch_1.default, { color: item.hex, selected: item.hex.toUpperCase() === normalizedCurrent, onPress: () => onChangeColor(item.hex), label: item.name }, item.hex)))] })] }));
+}
+function AppearancePanel({ hairColor, setHairColor, skinColor, setSkinColor, eyeColor, setEyeColor, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(ColorRow, { title: "SKIN TONE", currentColor: skinColor, onChangeColor: setSkinColor, palette: SKIN_PALETTE }), (0, jsx_runtime_1.jsx)(ColorRow, { title: "HAIR COLOR", currentColor: hairColor, onChangeColor: setHairColor, palette: HAIR_PALETTE }), (0, jsx_runtime_1.jsx)(ColorRow, { title: "EYE COLOR", currentColor: eyeColor, onChangeColor: setEyeColor, palette: EYE_PALETTE })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        paddingVertical: 18,
+        paddingHorizontal: 16,
+        gap: 24,
+    },
+    section: {
+        gap: 14,
+        padding: 0,
+    },
+    sectionTitle: {
+        color: editor_1.studioTheme.colors.textSecondary,
+        fontSize: 12,
+        fontWeight: '700',
+        letterSpacing: 1.2,
+        textTransform: 'uppercase',
+    },
+    scrollContent: {
+        gap: 12,
+    },
+});

package/dist/studio/AvatarCreatorScreen.d.ts

@@ -0,0 +1,5 @@
+export interface AvatarCreatorScreenProps {
+    sketchfabApiKey: string;
+    onAvatarCreated?: (avatarId: string) => void;
+}
+export declare function AvatarCreatorScreen({ sketchfabApiKey, onAvatarCreated, }: AvatarCreatorScreenProps): import("react/jsx-runtime").JSX.Element;