talking-head-studio 0.4.10 → 0.4.12

package/dist/studio/AvatarEditorScreen.d.ts

@@ -0,0 +1,14 @@
+export interface AvatarEditorScreenProps {
+    avatarId: string;
+    onDelete?: () => void;
+    onBrowseAccessories?: () => void;
+    /**
+     * Optional voice-preview override forwarded to VoicePanel. A host that mounts
+     * a live avatar (e.g. Sorti's docked studio panel) passes this to preview the
+     * voice on the real speaking face with lip-sync instead of an audio sample.
+     */
+    onPreviewVoice?: (voiceId: string) => Promise<void> | void;
+    /** Voice id currently previewing, when the host owns preview state. */
+    previewingVoiceId?: string | null;
+}
+export declare function AvatarEditorScreen({ avatarId, onDelete, onBrowseAccessories, onPreviewVoice, previewingVoiceId }: AvatarEditorScreenProps): import("react/jsx-runtime").JSX.Element;

package/dist/studio/AvatarEditorScreen.js

@@ -0,0 +1,510 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarEditorScreen = AvatarEditorScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vector_icons_1 = require("@expo/vector-icons");
+const TalkingHead_1 = require("../TalkingHead");
+const expo_blur_1 = require("expo-blur");
+const Haptics = __importStar(require("expo-haptics"));
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const AccessoryPanel_1 = __importDefault(require("./AccessoryPanel"));
+const AppearancePanel_1 = __importDefault(require("./AppearancePanel"));
+const DetailsPanel_1 = require("./DetailsPanel");
+const FilamentEditor_1 = require("./FilamentEditor");
+const wardrobe_1 = require("../wardrobe");
+const VoicePanel_1 = __importDefault(require("./VoicePanel"));
+const api_1 = require("../api");
+const editor_1 = require("../editor");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const TAB_ITEMS = [
+    { name: 'Appearance', icon: 'color-palette-outline' },
+    { name: 'Voice', icon: 'mic-outline' },
+    { name: 'Details', icon: 'document-text-outline' },
+    { name: 'Accessories', icon: 'sparkles-outline' },
+];
+const MOODS = [
+    'neutral',
+    'happy',
+    'sad',
+    'angry',
+    'fear',
+    'disgust',
+    'love',
+    'sleep',
+    'excited',
+    'thinking',
+    'concerned',
+    'surprised',
+];
+const MOOD_INTERVAL_MIN = 4000;
+const MOOD_INTERVAL_MAX = 8000;
+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,
+};
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function randomMood() {
+    return MOODS[Math.floor(Math.random() * MOODS.length)];
+}
+function randomInterval() {
+    return MOOD_INTERVAL_MIN + Math.random() * (MOOD_INTERVAL_MAX - MOOD_INTERVAL_MIN);
+}
+function SegmentedTabs({ active, onSelect }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.tabBar, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.tabRow, children: TAB_ITEMS.map((tab) => {
+                const isActive = tab.name === active;
+                return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => {
+                        void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                        onSelect(tab.name);
+                    }, style: [styles.tabItem, isActive && styles.tabItemActive], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: tab.icon, size: 16, color: isActive ? COLORS.textPrimary : COLORS.textSecondary }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.tabLabel, isActive && styles.tabLabelActive], children: tab.name })] }, tab.name));
+            }) }) }));
+}
+// ---------------------------------------------------------------------------
+// Main Screen
+// ---------------------------------------------------------------------------
+function AvatarEditorScreen({ avatarId, onDelete, onBrowseAccessories, onPreviewVoice, previewingVoiceId }) {
+    const { height: windowHeight } = (0, react_native_1.useWindowDimensions)();
+    const talkingHeadRef = (0, react_1.useRef)(null);
+    const [activeTab, setActiveTab] = (0, react_1.useState)('Appearance');
+    const [isPlacementMode, setIsPlacementMode] = (0, react_1.useState)(false);
+    const [authToken, setAuthToken] = (0, react_1.useState)(undefined);
+    (0, react_1.useEffect)(() => {
+        (0, api_1.getToken)()
+            .then((t) => { setAuthToken(t); })
+            .catch(() => setAuthToken(null));
+    }, []);
+    // Crossfade shared values
+    const talkingHeadOpacity = (0, react_native_reanimated_1.useSharedValue)(1);
+    const filamentOpacity = (0, react_native_reanimated_1.useSharedValue)(0);
+    const blurIntensity = (0, react_native_reanimated_1.useSharedValue)(0);
+    // ---- Placement mode transition -------------------------------------------
+    const autoSaveTimer = (0, react_1.useRef)(null);
+    const enterPlacementMode = (0, react_1.useCallback)(() => {
+        if (autoSaveTimer.current) {
+            clearTimeout(autoSaveTimer.current);
+            autoSaveTimer.current = null;
+        }
+        talkingHeadOpacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 400 });
+        filamentOpacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 400 });
+        blurIntensity.value = (0, react_native_reanimated_1.withSequence)((0, react_native_reanimated_1.withTiming)(1, { duration: 150 }), (0, react_native_reanimated_1.withDelay)(100, (0, react_native_reanimated_1.withTiming)(0, { duration: 150 })));
+        setIsPlacementMode(true);
+    }, [talkingHeadOpacity, filamentOpacity, blurIntensity]);
+    const saveRef = (0, react_1.useRef)(() => Promise.resolve());
+    const exitPlacementMode = (0, react_1.useCallback)(() => {
+        filamentOpacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 400 });
+        talkingHeadOpacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 400 });
+        setTimeout(() => setIsPlacementMode(false), 450);
+        saveRef
+            .current()
+            .catch((err) => console.error('[exitPlacementMode] save failed:', err));
+    }, [talkingHeadOpacity, filamentOpacity]);
+    const filamentAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: filamentOpacity.value,
+        pointerEvents: filamentOpacity.value > 0.5 ? 'auto' : 'none',
+    }));
+    const talkingHeadAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: talkingHeadOpacity.value,
+        pointerEvents: talkingHeadOpacity.value > 0.5 ? 'auto' : 'none',
+    }));
+    const blurAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: blurIntensity.value,
+    }));
+    const { avatar, loading, error, name, setName, description, setDescription, isPublic, setIsPublic, hairColor, setHairColor, skinColor, setSkinColor, eyeColor, setEyeColor, voiceProfileId, setVoiceProfileId, isDirty, save, reload, saving, } = (0, wardrobe_1.useStudioAvatar)({ avatarId });
+    saveRef.current = save;
+    // ---- Wardrobe Hydration --------------------------------------------------
+    const setActiveAsset = (0, wardrobe_1.useWardrobeStore)((s) => s.setActiveAsset);
+    const setPlacement = (0, wardrobe_1.useWardrobeStore)((s) => s.setPlacement);
+    const equipped = (0, wardrobe_1.useWardrobeStore)((s) => s.equipped);
+    const placements = (0, wardrobe_1.useWardrobeStore)((s) => s.placements);
+    const activeAssetId = (0, wardrobe_1.useWardrobeStore)((s) => s.activeAssetId);
+    const editorEquipped = (0, react_1.useMemo)(() => Object.values(equipped).map((asset) => ({
+        id: asset.id,
+        url: (0, api_1.assetFileUrl)(asset),
+        type: 'rigid',
+        slot: asset.slot,
+    })), [equipped]);
+    const handlePlacementChange = (0, react_1.useCallback)((assetId, placement) => {
+        setPlacement(assetId, {
+            bone: placement.bone,
+            position: placement.position,
+            rotation: placement.rotation,
+            scale: placement.scale ?? 1,
+        });
+    }, [setPlacement]);
+    const mappedAccessories = (0, react_1.useMemo)(() => {
+        return Object.values(equipped).map((asset) => {
+            const p = placements[asset.id];
+            return {
+                id: asset.id,
+                url: (0, api_1.assetFileUrl)(asset),
+                bone: p?.bone ?? 'Head',
+                position: p?.position ?? [0, 0, 0],
+                rotation: p?.rotation ?? [0, 0, 0],
+                scale: p?.scale ?? 1,
+            };
+        });
+    }, [equipped, placements]);
+    (0, wardrobe_1.useAvatarWardrobeHydration)({
+        avatarId: avatar?.id,
+        accessories: avatar?.appearance?.equippedAccessories,
+    });
+    const previewHeight = (0, react_1.useMemo)(() => {
+        const ratio = isPlacementMode ? 0.5 : 0.4;
+        return Math.max(250, Math.min(windowHeight * ratio, 430));
+    }, [isPlacementMode, windowHeight]);
+    const statusLabel = saving
+        ? 'Saving changes'
+        : isDirty
+            ? 'Unsaved edits'
+            : 'All changes saved';
+    const accessoryCount = Object.keys(equipped).length;
+    // ---- Random mood cycling ------------------------------------------------
+    (0, react_1.useEffect)(() => {
+        if (!avatar)
+            return;
+        let timeout;
+        const cycleMood = () => {
+            talkingHeadRef.current?.setMood(randomMood());
+            timeout = setTimeout(cycleMood, randomInterval());
+        };
+        timeout = setTimeout(cycleMood, randomInterval());
+        return () => clearTimeout(timeout);
+    }, [avatar]);
+    // ---- Live color preview callbacks ----------------------------------------
+    const handleSetHairColor = (0, react_1.useCallback)((color) => {
+        setHairColor(color);
+        talkingHeadRef.current?.setHairColor(color);
+    }, [setHairColor]);
+    const handleSetSkinColor = (0, react_1.useCallback)((color) => {
+        setSkinColor(color);
+        talkingHeadRef.current?.setSkinColor(color);
+    }, [setSkinColor]);
+    const handleSetEyeColor = (0, react_1.useCallback)((color) => {
+        setEyeColor(color);
+        talkingHeadRef.current?.setEyeColor(color);
+    }, [setEyeColor]);
+    // ---- Delete handler ------------------------------------------------------
+    const handleDelete = (0, react_1.useCallback)(async () => {
+        try {
+            await (0, api_1.deleteAvatar)(avatarId);
+            onDelete?.();
+        }
+        catch {
+            // DetailsPanel shows its own Alert; error will propagate via the hook
+        }
+    }, [avatarId, onDelete]);
+    // ---- Derived values ------------------------------------------------------
+    const avatarUrl = (0, react_1.useMemo)(() => (avatar ? (0, api_1.avatarFileUrl)(avatar) : null), [avatar]);
+    const stableTalkingHeadUrl = (0, react_1.useMemo)(() => {
+        if (!avatarUrl)
+            return null;
+        try {
+            const u = new URL(avatarUrl);
+            u.search = '';
+            return u.toString();
+        }
+        catch {
+            return avatarUrl.split('?')[0];
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [avatar?.id]);
+    // ---- Panel rendering -----------------------------------------------------
+    const renderPanel = (0, react_1.useCallback)(() => {
+        switch (activeTab) {
+            case 'Appearance':
+                return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.panelScroll, contentContainerStyle: styles.panelScrollContent, showsVerticalScrollIndicator: false, children: (0, jsx_runtime_1.jsx)(AppearancePanel_1.default, { hairColor: hairColor, setHairColor: handleSetHairColor, skinColor: skinColor, setSkinColor: handleSetSkinColor, eyeColor: eyeColor, setEyeColor: handleSetEyeColor }) }));
+            case 'Voice':
+                return (0, jsx_runtime_1.jsx)(VoicePanel_1.default, { activeVoiceId: voiceProfileId, onSelectVoice: setVoiceProfileId, onPreviewVoice: onPreviewVoice, previewingVoiceId: previewingVoiceId });
+            case 'Accessories':
+                return ((0, jsx_runtime_1.jsx)(AccessoryPanel_1.default, { avatarId: avatarId, onPositionAsset: (assetId) => {
+                        setActiveAsset(assetId);
+                        enterPlacementMode();
+                    }, onBrowseAccessories: onBrowseAccessories }));
+            case 'Details':
+                return ((0, jsx_runtime_1.jsx)(DetailsPanel_1.DetailsPanel, { name: name, setName: setName, description: description, setDescription: setDescription, isPublic: isPublic, setIsPublic: setIsPublic, isDirty: isDirty, saving: saving, onSave: save, onDelete: handleDelete }));
+        }
+    }, [
+        activeTab,
+        hairColor,
+        handleSetHairColor,
+        skinColor,
+        handleSetSkinColor,
+        eyeColor,
+        handleSetEyeColor,
+        voiceProfileId,
+        setVoiceProfileId,
+        onPreviewVoice,
+        previewingVoiceId,
+        name,
+        setName,
+        description,
+        setDescription,
+        isPublic,
+        setIsPublic,
+        isDirty,
+        saving,
+        save,
+        handleDelete,
+        avatarId,
+        enterPlacementMode,
+        setActiveAsset,
+        onBrowseAccessories,
+    ]);
+    // ---- Auto-save appearance changes ----------------------------------------
+    (0, react_1.useEffect)(() => {
+        if (!isDirty || saving || isPlacementMode)
+            return;
+        if (autoSaveTimer.current)
+            clearTimeout(autoSaveTimer.current);
+        autoSaveTimer.current = setTimeout(() => {
+            save().catch((err) => console.error('[auto-save] failed:', err));
+        }, 1500);
+        return () => {
+            if (autoSaveTimer.current)
+                clearTimeout(autoSaveTimer.current);
+        };
+    }, [isDirty, saving, isPlacementMode, save]);
+    // ---- Loading state -------------------------------------------------------
+    if (loading && !avatar) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.centered, 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 avatar..." })] }));
+    }
+    // ---- Error state ---------------------------------------------------------
+    if (error && !avatar) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.centered, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "alert-circle-outline", size: 40, color: COLORS.error, style: { marginBottom: 12 } }), (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: reload, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.retryButtonText, children: "Retry" }) })] }));
+    }
+    // ---- Main layout ---------------------------------------------------------
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.previewContainer, { height: previewHeight }], children: [stableTalkingHeadUrl && authToken !== undefined && !isPlacementMode && ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.talkingHead, talkingHeadAnimatedStyle], children: (0, jsx_runtime_1.jsx)(TalkingHead_1.TalkingHead, { ref: talkingHeadRef, avatarUrl: stableTalkingHeadUrl, authToken: authToken, cameraView: "upper", cameraDistance: -0.5, skinColor: skinColor, hairColor: hairColor, eyeColor: eyeColor, accessories: mappedAccessories, style: react_native_1.StyleSheet.absoluteFillObject, onError: (msg) => console.error('[TalkingHead] Error:', msg) }) })), avatarUrl && isPlacementMode && ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.talkingHead, filamentAnimatedStyle], children: (0, jsx_runtime_1.jsx)(FilamentEditor_1.FilamentEditor, { avatarUrl: avatarUrl, equipped: editorEquipped, placements: placements, activeAssetId: activeAssetId, onActiveAssetChange: setActiveAsset, onPlacementChange: handlePlacementChange, onDone: exitPlacementMode, style: react_native_1.StyleSheet.absoluteFillObject, skinColor: skinColor }) })), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.talkingHead, blurAnimatedStyle], pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(expo_blur_1.BlurView, { intensity: 20, tint: "dark", style: react_native_1.StyleSheet.absoluteFillObject }) }), !avatarUrl && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.previewPlaceholder, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "cube-outline", size: 48, color: COLORS.textSecondary }) }))] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.editorMetaBar, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.editorMetaCopy, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.editorEyebrow, children: isPlacementMode ? 'Placement mode' : 'Avatar studio' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.editorTitle, children: isPlacementMode ? 'Fine-tune your wearable placement.' : 'Refine the look, voice, and presence.' })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                            styles.statusChip,
+                            saving
+                                ? styles.statusChipAccent
+                                : isDirty
+                                    ? styles.statusChipPending
+                                    : styles.statusChipCalm,
+                        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.statusChipText, children: statusLabel }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.metaPillRow, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.metaPill, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "sparkles-outline", size: 14, color: COLORS.textPrimary }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.metaPillText, children: [accessoryCount, " ", accessoryCount === 1 ? 'accessory' : 'accessories'] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.metaPill, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "albums-outline", size: 14, color: COLORS.textPrimary }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.metaPillText, children: activeTab })] })] }), (0, jsx_runtime_1.jsx)(SegmentedTabs, { active: activeTab, onSelect: setActiveTab }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.panelContainer, children: renderPanel() })] }));
+}
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: COLORS.bg,
+    },
+    centered: {
+        flex: 1,
+        backgroundColor: COLORS.bg,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+    },
+    previewContainer: {
+        backgroundColor: COLORS.surface,
+        overflow: 'hidden',
+        borderBottomLeftRadius: 28,
+        borderBottomRightRadius: 28,
+    },
+    talkingHead: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+    previewPlaceholder: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    tabBar: {
+        backgroundColor: COLORS.bg,
+        paddingTop: 8,
+    },
+    tabRow: {
+        flexDirection: 'row',
+        paddingHorizontal: 16,
+        gap: 10,
+    },
+    tabItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        borderRadius: 999,
+        backgroundColor: COLORS.surface,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+    },
+    tabItemActive: {
+        backgroundColor: COLORS.card,
+        borderColor: COLORS.accent,
+    },
+    tabLabel: {
+        fontSize: 13,
+        fontWeight: '600',
+        color: COLORS.textSecondary,
+        letterSpacing: 0.3,
+    },
+    tabLabelActive: {
+        color: COLORS.textPrimary,
+    },
+    editorMetaBar: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        gap: 12,
+        paddingHorizontal: 16,
+        paddingTop: 18,
+        paddingBottom: 10,
+    },
+    editorMetaCopy: {
+        flex: 1,
+        gap: 4,
+    },
+    editorEyebrow: {
+        color: COLORS.textSecondary,
+        fontSize: 11,
+        fontWeight: '700',
+        letterSpacing: 1.6,
+        textTransform: 'uppercase',
+    },
+    editorTitle: {
+        color: COLORS.textPrimary,
+        fontSize: 15,
+        lineHeight: 21,
+        fontWeight: '600',
+    },
+    statusChip: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        borderRadius: 999,
+        borderWidth: 1,
+    },
+    statusChipAccent: {
+        backgroundColor: `${COLORS.accent}20`,
+        borderColor: `${COLORS.accent}60`,
+    },
+    statusChipPending: {
+        backgroundColor: `${COLORS.textSecondary}16`,
+        borderColor: `${COLORS.textSecondary}44`,
+    },
+    statusChipCalm: {
+        backgroundColor: `${COLORS.textPrimary}12`,
+        borderColor: `${COLORS.textPrimary}24`,
+    },
+    statusChipText: {
+        color: COLORS.textPrimary,
+        fontSize: 12,
+        fontWeight: '700',
+        letterSpacing: 0.2,
+    },
+    metaPillRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+        paddingHorizontal: 16,
+        paddingBottom: 4,
+    },
+    metaPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        borderRadius: 999,
+        backgroundColor: COLORS.surface,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+    },
+    metaPillText: {
+        color: COLORS.textPrimary,
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    panelContainer: {
+        flex: 1,
+        backgroundColor: COLORS.surface,
+        marginTop: 14,
+        borderTopLeftRadius: 28,
+        borderTopRightRadius: 28,
+        overflow: 'hidden',
+    },
+    panelScroll: {
+        flex: 1,
+    },
+    panelScrollContent: {
+        paddingBottom: 108,
+    },
+    loadingText: {
+        marginTop: 16,
+        color: COLORS.textSecondary,
+        fontSize: 15,
+        fontWeight: '500',
+        letterSpacing: 0.3,
+    },
+    errorText: {
+        color: '#f87171',
+        fontSize: 15,
+        textAlign: 'center',
+        marginBottom: 20,
+        lineHeight: 22,
+    },
+    retryButton: {
+        backgroundColor: COLORS.card,
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 999,
+    },
+    retryButtonText: {
+        color: '#ffffff',
+        fontWeight: '600',
+        fontSize: 14,
+    },
+});

package/dist/studio/AvatarGrid.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface AvatarGridItem {
+    id: string;
+    name: string;
+    thumbnailUrl: string | null;
+    subtitle?: string;
+    isActive?: boolean;
+}
+export interface AvatarGridProps {
+    items: AvatarGridItem[];
+    loading: boolean;
+    error: string | null;
+    onSelect: (id: string) => void;
+    onDelete?: (id: string) => void;
+    onRetry?: () => void;
+    emptyMessage?: string;
+    emptySubMessage?: string;
+    thumbnailHeaders?: Record<string, string>;
+    ListHeaderComponent?: React.ReactElement;
+    bottomClearance?: number;
+}
+export declare function AvatarGrid({ items, loading, error, onSelect, onDelete, onRetry, emptyMessage, emptySubMessage, thumbnailHeaders, ListHeaderComponent, bottomClearance, }: AvatarGridProps): import("react/jsx-runtime").JSX.Element;
+export default AvatarGrid;