talking-head-studio 0.4.10 → 0.4.12

package/dist/studio/AvatarGrid.js

@@ -0,0 +1,257 @@
+"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.AvatarGrid = AvatarGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const flash_list_1 = require("@shopify/flash-list");
+const expo_image_1 = require("expo-image");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const StudioEmptyState_1 = require("./StudioEmptyState");
+const editor_1 = require("../editor");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const MAX_STAGGER_DELAY = 500;
+const STAGGER_STEP = 50;
+function AvatarCard({ item, index, onPress, onDelete, thumbnailHeaders }) {
+    const delay = Math.min(index * STAGGER_STEP, MAX_STAGGER_DELAY);
+    const handleDelete = () => {
+        if (onDelete) {
+            react_native_1.Alert.alert("Delete Avatar", `Are you sure you want to delete "${item.name}"? This action cannot be undone.`, [
+                { text: "Cancel", style: "cancel" },
+                {
+                    text: "Delete",
+                    style: "destructive",
+                    onPress: () => onDelete(item.id)
+                }
+            ]);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeInDown.delay(delay), style: [
+            styles.card,
+            item.isActive && styles.cardActive,
+        ], children: (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { activeOpacity: 0.7, onPress: () => onPress(item.id), style: styles.cardTouchable, children: [item.thumbnailUrl ? ((0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: {
+                        uri: item.thumbnailUrl,
+                        headers: thumbnailHeaders,
+                    }, style: styles.thumbnail, contentFit: "cover", placeholder: { blurhash: 'L6PZfSi_.AyE_3t7t7R**0o#DgR4' }, transition: 200, cachePolicy: "memory-disk", recyclingKey: item.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" }) })), onDelete && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.deleteButton, onPress: handleDelete, 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.Text, { style: styles.name, numberOfLines: 1, children: item.name }), item.subtitle ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.subtitle, numberOfLines: 1, children: item.subtitle })) : null, item.isActive ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.activeBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.activeBadgeText, children: "Active" }) })) : null] }) }));
+}
+// ---------------------------------------------------------------------------
+// Grid
+// ---------------------------------------------------------------------------
+function AvatarGrid({ items, loading, error, onSelect, onDelete, onRetry, emptyMessage = 'No avatars yet', emptySubMessage = 'Create one to get started.', thumbnailHeaders, ListHeaderComponent, bottomClearance = 120, }) {
+    const renderItem = (0, react_1.useCallback)(({ item, index }) => ((0, jsx_runtime_1.jsx)(AvatarCard, { item: item, index: index, onPress: onSelect, onDelete: onDelete, thumbnailHeaders: thumbnailHeaders })), [onSelect, onDelete, thumbnailHeaders]);
+    const keyExtractor = (0, react_1.useCallback)((item) => item.id, []);
+    // ---- Loading state -------------------------------------------------
+    if (loading) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.centeredContainer, children: [ListHeaderComponent ?? null, (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: "Loading avatars..." })] })] }));
+    }
+    // ---- Error state ---------------------------------------------------
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.centeredContainer, children: [ListHeaderComponent ?? null, (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 }), onRetry ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onRetry, style: styles.retryButton, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.retryText, children: "Retry" }) })) : null] })] }));
+    }
+    // ---- Empty state ---------------------------------------------------
+    if (items.length === 0) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.centeredContainer, children: [ListHeaderComponent ?? null, (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: "CAST" }), title: emptyMessage, subtitle: emptySubMessage }) })] }));
+    }
+    // ---- Grid ----------------------------------------------------------
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const AnyFlashList = flash_list_1.FlashList;
+    return ((0, jsx_runtime_1.jsx)(AnyFlashList, { data: items, keyExtractor: keyExtractor, renderItem: renderItem, numColumns: 2, estimatedItemSize: 180, contentContainerStyle: [styles.grid, { paddingBottom: bottomClearance }], showsVerticalScrollIndicator: false, ListHeaderComponent: ListHeaderComponent }));
+}
+exports.default = AvatarGrid;
+// ---------------------------------------------------------------------------
+// Design tokens
+// ---------------------------------------------------------------------------
+const COLORS = {
+    background: editor_1.studioTheme.colors.background,
+    card: editor_1.studioTheme.colors.surfaceRaised,
+    border: editor_1.studioTheme.colors.border,
+    activeBorder: editor_1.studioTheme.colors.accent,
+    activeBg: editor_1.studioTheme.colors.accentMuted,
+    textPrimary: editor_1.studioTheme.colors.textPrimary,
+    textSecondary: editor_1.studioTheme.colors.textSecondary,
+    textMuted: editor_1.studioTheme.colors.textMuted,
+    error: editor_1.studioTheme.colors.danger,
+    accent: editor_1.studioTheme.colors.accent,
+    thumbnailBg: editor_1.studioTheme.colors.backgroundAlt,
+    placeholderBg: editor_1.studioTheme.colors.surfaceSoft,
+};
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+const styles = react_native_1.StyleSheet.create({
+    // Layout ---------------------------------------------------------------
+    grid: {
+        paddingHorizontal: 14,
+        paddingTop: 2,
+    },
+    // Card -----------------------------------------------------------------
+    card: {
+        flex: 1,
+        borderRadius: 18,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        backgroundColor: COLORS.card,
+        overflow: 'hidden',
+        // Margins replace FlatList columnWrapperStyle (gap: 12, marginBottom: 12)
+        marginHorizontal: 6,
+        marginBottom: 12,
+        // Shadow (iOS + Android elevation)
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.18,
+        shadowRadius: 16,
+        elevation: 6,
+    },
+    cardActive: {
+        borderColor: COLORS.activeBorder,
+        backgroundColor: COLORS.activeBg,
+        shadowColor: COLORS.activeBorder,
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 0.24,
+        shadowRadius: 12,
+        elevation: 8,
+    },
+    cardTouchable: {
+        padding: 10,
+        gap: 6,
+    },
+    deleteButton: {
+        position: 'absolute',
+        top: 14,
+        right: 14,
+        backgroundColor: COLORS.card,
+        borderRadius: 12,
+        padding: 6,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        zIndex: 10,
+    },
+    // Thumbnail ------------------------------------------------------------
+    thumbnail: {
+        width: '100%',
+        aspectRatio: 1,
+        borderRadius: 12,
+        backgroundColor: COLORS.thumbnailBg,
+    },
+    thumbnailPlaceholder: {
+        width: '100%',
+        aspectRatio: 1,
+        borderRadius: 12,
+        backgroundColor: COLORS.placeholderBg,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    placeholderText: {
+        color: COLORS.textMuted,
+        fontSize: 18,
+        fontWeight: '700',
+        letterSpacing: 1.6,
+    },
+    // Text -----------------------------------------------------------------
+    name: {
+        color: COLORS.textPrimary,
+        fontSize: 14,
+        fontWeight: '700',
+        textAlign: 'center',
+    },
+    subtitle: {
+        color: COLORS.textSecondary,
+        fontSize: 12,
+        textAlign: 'center',
+    },
+    // Active badge ---------------------------------------------------------
+    activeBadge: {
+        alignSelf: 'center',
+        marginTop: 2,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderRadius: 999,
+        backgroundColor: `${COLORS.accent}24`,
+    },
+    activeBadgeText: {
+        color: COLORS.accent,
+        fontSize: 10,
+        fontWeight: '700',
+    },
+    // Centered states (loading / error / empty) ----------------------------
+    centeredContainer: {
+        flex: 1,
+        backgroundColor: COLORS.background,
+    },
+    centered: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 32,
+        gap: 10,
+    },
+    loadingText: {
+        color: COLORS.textSecondary,
+        fontSize: 14,
+        marginTop: 8,
+    },
+    // Error ----------------------------------------------------------------
+    errorText: {
+        color: COLORS.error,
+        fontSize: 14,
+        fontWeight: '500',
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    retryButton: {
+        paddingHorizontal: 20,
+        paddingVertical: 10,
+        backgroundColor: COLORS.card,
+        borderRadius: 999,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+    },
+    retryText: {
+        color: COLORS.textPrimary,
+        fontSize: 13,
+        fontWeight: '600',
+    },
+    // Empty ----------------------------------------------------------------
+    emptyIcon: {
+        color: COLORS.textSecondary,
+        fontSize: 14,
+        fontWeight: '800',
+        letterSpacing: 2.4,
+    },
+});

package/dist/studio/ColorSwatch.d.ts

@@ -0,0 +1,8 @@
+export interface ColorSwatchProps {
+    color: string;
+    selected: boolean;
+    onPress: () => void;
+    label?: string;
+    size?: number;
+}
+export default function ColorSwatch({ color, selected, onPress, label, size, }: ColorSwatchProps): import("react/jsx-runtime").JSX.Element;

package/dist/studio/ColorSwatch.js

@@ -0,0 +1,100 @@
+"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 = ColorSwatch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 AnimatedPressable = react_native_reanimated_1.default.createAnimatedComponent(react_native_1.Pressable);
+const SPRING_CONFIG = {
+    damping: 12,
+    stiffness: 180,
+    mass: 0.8,
+};
+function ColorSwatch({ color, selected, onPress, label, size = 40, }) {
+    const scale = (0, react_native_reanimated_1.useSharedValue)(1);
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ scale: scale.value }],
+    }));
+    const handlePressIn = () => {
+        scale.value = (0, react_native_reanimated_1.withSpring)(0.85, SPRING_CONFIG);
+    };
+    const handlePressOut = () => {
+        scale.value = (0, react_native_reanimated_1.withSpring)(1, SPRING_CONFIG);
+    };
+    const glowColor = `${color}99`; // ~60% opacity
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.wrapper, children: [(0, jsx_runtime_1.jsx)(AnimatedPressable, { onPress: () => {
+                    void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                    onPress();
+                }, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [
+                    animatedStyle,
+                    styles.swatch,
+                    {
+                        width: size,
+                        height: size,
+                        borderRadius: size / 2,
+                        backgroundColor: color,
+                    },
+                    selected
+                        ? { borderWidth: 2, borderColor: glowColor }
+                        : { borderWidth: 1, borderColor: editor_1.studioTheme.colors.border },
+                ], children: selected && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                        styles.check,
+                        { fontSize: size * 0.45, lineHeight: size * 0.55 },
+                    ], children: "\u2713" })) }), label != null && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, numberOfLines: 1, children: label }))] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    wrapper: {
+        alignItems: 'center',
+        gap: 4,
+    },
+    swatch: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    check: {
+        color: '#ffffff',
+        fontWeight: '700',
+        textAlign: 'center',
+    },
+    label: {
+        color: editor_1.studioTheme.colors.textSecondary,
+        fontSize: 10,
+        textAlign: 'center',
+        maxWidth: 56,
+    },
+});

package/dist/studio/CreateVoiceProfileSheet.d.ts

@@ -0,0 +1,8 @@
+import BottomSheet from '@gorhom/bottom-sheet';
+import type React from 'react';
+interface Props {
+    sheetRef: React.RefObject<BottomSheet | null>;
+    onSuccess: () => void;
+}
+export default function CreateVoiceProfileSheet({ sheetRef, onSuccess }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/studio/CreateVoiceProfileSheet.js

@@ -0,0 +1,242 @@
+"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 = CreateVoiceProfileSheet;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vector_icons_1 = require("@expo/vector-icons");
+const bottom_sheet_1 = __importStar(require("@gorhom/bottom-sheet"));
+const expo_audio_1 = require("expo-audio");
+const DocumentPicker = __importStar(require("expo-document-picker"));
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const api_1 = require("../api");
+function CreateVoiceProfileSheet({ sheetRef, onSuccess }) {
+    const [name, setName] = (0, react_1.useState)('');
+    const [referenceText, setReferenceText] = (0, react_1.useState)('');
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [audioUri, setAudioUri] = (0, react_1.useState)(null);
+    const [audioName, setAudioName] = (0, react_1.useState)(null);
+    const recorder = (0, expo_audio_1.useAudioRecorder)(expo_audio_1.RecordingPresets.HIGH_QUALITY);
+    const startRecording = async () => {
+        try {
+            const permission = await (0, expo_audio_1.getRecordingPermissionsAsync)();
+            if (permission.status !== 'granted') {
+                const resp = await (0, expo_audio_1.requestRecordingPermissionsAsync)();
+                if (resp.status !== 'granted') {
+                    react_native_1.Alert.alert('Permission to access microphone was denied');
+                    return;
+                }
+            }
+            await (0, expo_audio_1.setAudioModeAsync)({
+                allowsRecording: true,
+                playsInSilentMode: true,
+                shouldPlayInBackground: false,
+                interruptionMode: 'doNotMix',
+            });
+            await recorder.prepareToRecordAsync();
+            recorder.record();
+        }
+        catch (err) {
+            console.error('Failed to start recording', err);
+        }
+    };
+    const stopRecording = async () => {
+        if (!recorder.isRecording)
+            return;
+        try {
+            await recorder.stop();
+            const uri = recorder.uri;
+            if (uri) {
+                setAudioUri(uri);
+                setAudioName('recording.m4a');
+            }
+        }
+        catch (err) {
+            console.error('Failed to stop recording', err);
+        }
+    };
+    const pickFile = async () => {
+        try {
+            const result = await DocumentPicker.getDocumentAsync({
+                type: ['audio/*'],
+                copyToCacheDirectory: true,
+            });
+            if (!result.canceled && result.assets.length > 0) {
+                setAudioUri(result.assets[0].uri);
+                setAudioName(result.assets[0].name);
+            }
+        }
+        catch (err) {
+            console.error('Failed to pick document', err);
+        }
+    };
+    const clearAudio = () => {
+        setAudioUri(null);
+        setAudioName(null);
+    };
+    const handleSubmit = async () => {
+        if (!name || !referenceText || !audioUri || !audioName) {
+            react_native_1.Alert.alert('Error', 'Please fill out all fields and provide audio.');
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            const profile = await (0, api_1.createVoiceProfile)(name);
+            await (0, api_1.uploadVoiceSample)(profile.id, audioUri, audioName, referenceText);
+            // Reset form
+            setName('');
+            setReferenceText('');
+            clearAudio();
+            sheetRef.current?.close();
+            onSuccess();
+        }
+        catch (e) {
+            console.error(e);
+            react_native_1.Alert.alert('Error', 'Failed to create profile: ' + (e instanceof Error ? e.message : 'Unknown error'));
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const renderBackdrop = (0, react_1.useCallback)((props) => ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetBackdrop, { ...props, disappearsOnIndex: -1, appearsOnIndex: 0, opacity: 0.7 })), []);
+    return ((0, jsx_runtime_1.jsx)(bottom_sheet_1.default, { ref: sheetRef, index: -1, snapPoints: ['80%'], enablePanDownToClose: true, backdropComponent: renderBackdrop, backgroundStyle: styles.sheetBackground, handleIndicatorStyle: styles.indicator, children: (0, jsx_runtime_1.jsxs)(bottom_sheet_1.BottomSheetScrollView, { style: styles.scrollView, contentContainerStyle: styles.contentContainer, keyboardShouldPersistTaps: "handled", keyboardDismissMode: "interactive", showsVerticalScrollIndicator: false, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, children: "Clone Voice" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "Profile Name" }), (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetTextInput, { style: styles.input, placeholder: "e.g. My Custom Voice", placeholderTextColor: "#666", value: name, onChangeText: setName }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "Transcript (Reference Text)" }), (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetTextInput, { style: [styles.input, styles.textArea], placeholder: "Type exactly what is spoken in the audio...", placeholderTextColor: "#666", value: referenceText, onChangeText: setReferenceText, multiline: true }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "Audio Source" }), !audioUri ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.audioButtonsRow, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: [styles.audioButton, recorder.isRecording && styles.recordingButton], onPress: recorder.isRecording ? stopRecording : startRecording, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: recorder.isRecording ? 'stop-circle' : 'mic', size: 24, color: recorder.isRecording ? '#fff' : '#6c63ff' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.audioButtonText, recorder.isRecording && styles.recordingText], children: recorder.isRecording ? 'Stop Recording' : 'Record Voice' })] }), (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: styles.audioButton, onPress: pickFile, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "folder-open", size: 24, color: "#6c63ff" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.audioButtonText, children: "Upload File" })] })] })) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.audioSelected, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "musical-notes", size: 24, color: "#6c63ff" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.audioNameText, numberOfLines: 1, ellipsizeMode: "middle", children: audioName }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: clearAudio, style: styles.clearButton, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close-circle", size: 24, color: "#ef4444" }) })] })), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [
+                        styles.submitButton,
+                        (!name || !referenceText || !audioUri || isSubmitting) && styles.submitButtonDisabled,
+                    ], onPress: handleSubmit, disabled: !name || !referenceText || !audioUri || isSubmitting, children: isSubmitting ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: "#fff" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.submitButtonText, children: "Create Profile" })) })] }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    sheetBackground: {
+        backgroundColor: '#161d28',
+    },
+    indicator: {
+        backgroundColor: '#444',
+    },
+    scrollView: {
+        flex: 1,
+    },
+    contentContainer: {
+        padding: 24,
+        paddingBottom: 40,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#fff',
+        marginBottom: 24,
+        textAlign: 'center',
+    },
+    label: {
+        color: '#97a3b5',
+        fontSize: 12,
+        fontWeight: '700',
+        textTransform: 'uppercase',
+        marginBottom: 8,
+        marginTop: 16,
+    },
+    input: {
+        backgroundColor: '#1a1830',
+        borderWidth: 1,
+        borderColor: '#232933',
+        borderRadius: 12,
+        color: '#fff',
+        padding: 16,
+        fontSize: 16,
+    },
+    textArea: {
+        height: 100,
+        textAlignVertical: 'top',
+    },
+    audioButtonsRow: {
+        flexDirection: 'row',
+        gap: 12,
+    },
+    audioButton: {
+        flex: 1,
+        backgroundColor: '#1a1830',
+        borderWidth: 1,
+        borderColor: '#232933',
+        borderRadius: 12,
+        padding: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        gap: 8,
+    },
+    recordingButton: {
+        backgroundColor: '#ef4444',
+        borderColor: '#ef4444',
+    },
+    audioButtonText: {
+        color: '#6c63ff',
+        fontWeight: '600',
+        fontSize: 14,
+    },
+    recordingText: {
+        color: '#fff',
+    },
+    audioSelected: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#1a1830',
+        borderWidth: 1,
+        borderColor: '#6c63ff',
+        borderRadius: 12,
+        padding: 16,
+    },
+    audioNameText: {
+        color: '#fff',
+        marginLeft: 12,
+        flex: 1,
+    },
+    clearButton: {
+        marginLeft: 12,
+    },
+    submitButton: {
+        backgroundColor: '#6c63ff',
+        borderRadius: 12,
+        padding: 16,
+        alignItems: 'center',
+        marginTop: 24,
+        marginBottom: 24,
+    },
+    submitButtonDisabled: {
+        backgroundColor: '#444',
+    },
+    submitButtonText: {
+        color: '#fff',
+        fontWeight: 'bold',
+        fontSize: 16,
+    },
+});

package/dist/studio/DetailsPanel.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface DetailsPanelProps {
+    name: string;
+    setName: (v: string) => void;
+    description: string;
+    setDescription: (v: string) => void;
+    isPublic: boolean;
+    setIsPublic: (v: boolean) => void;
+    isDirty: boolean;
+    saving: boolean;
+    onSave: () => void;
+    onDelete: () => void;
+}
+export declare const DetailsPanel: React.FC<DetailsPanelProps>;
+export default DetailsPanel;