talking-head-studio 0.4.10 → 0.4.12

package/dist/studio/SketchfabModelCard.js

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SketchfabModelCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const expo_image_1 = require("expo-image");
+const vector_icons_1 = require("@expo/vector-icons");
+const moti_1 = require("moti");
+const sketchfab_1 = require("../sketchfab");
+const constants_1 = require("./constants");
+const editor_1 = require("../editor");
+const COLORS = editor_1.studioTheme.colors;
+function formatCount(n) {
+    if (n >= 1000000)
+        return `${(n / 1000000).toFixed(1)}M`;
+    if (n >= 1000)
+        return `${(n / 1000).toFixed(1)}k`;
+    return String(n);
+}
+const HUMANOID_TAGS = [
+    'character', 'humanoid', 'human', 'anime', 'avatar',
+    'person', 'figure', 'girl', 'boy', 'woman', 'man',
+];
+function isHumanoidModel(model) {
+    return model.tags.some((t) => HUMANOID_TAGS.includes(t.slug.toLowerCase()));
+}
+exports.SketchfabModelCard = react_1.default.memo(function SketchfabModelCard({ model, index, onPress, showHumanoidBadge = false, capability = null, }) {
+    const thumbnailUrl = (0, sketchfab_1.getBestThumbnail)(model.thumbnails, 280) || undefined;
+    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(model), style: styles.card, children: [thumbnailUrl ? ((0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: thumbnailUrl }, style: styles.thumbnail, contentFit: "cover", placeholder: { blurhash: constants_1.BLURHASH }, transition: 250, cachePolicy: "memory-disk", recyclingKey: model.uid })) : ((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.jsxs)(react_native_1.View, { style: styles.badgeRow, children: [capability === 'ready' && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.badge, styles.readyBadge], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "checkmark-circle", size: 10, color: "#48c98a" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.badgeText, styles.readyBadgeText], children: "Ready" })] })), capability === 'lipsync' && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.badge, styles.verifiedBadge], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "checkmark-circle", size: 10, color: "#4da3ff" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.badgeText, styles.verifiedBadgeText], children: "Lipsync" })] })), capability === 'limited' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.badge, styles.limitedBadge], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.badgeText, styles.limitedBadgeText], children: "Limited" }) })), capability === 'checking' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.badge, styles.checkingBadge], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.badgeText, styles.checkingBadgeText], children: "Checking\u2026" }) })), showHumanoidBadge && isHumanoidModel(model) && ((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: "Humanoid" }) })), model.animationCount > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.badge, styles.animatedBadge], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.badgeText, children: "Animated" }) }))] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardName, numberOfLines: 1, children: model.name }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.cardStats, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "heart", size: 11, color: COLORS.textMuted }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardStatText, children: formatCount(model.likeCount) }), (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "eye", size: 11, color: COLORS.textMuted, style: { marginLeft: 6 } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardStatText, children: formatCount(model.viewCount) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.cardCreator, numberOfLines: 1, children: ["by ", model.user.displayName || model.user.username] })] }) }));
+});
+const styles = react_native_1.StyleSheet.create({
+    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.backgroundAlt,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    placeholderText: {
+        color: COLORS.textMuted,
+        fontSize: 22,
+        fontWeight: '700',
+        letterSpacing: 2,
+    },
+    badgeRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 4 },
+    badge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 6,
+        backgroundColor: 'rgba(255, 122, 89, 0.14)',
+    },
+    animatedBadge: { backgroundColor: 'rgba(100, 200, 100, 0.14)' },
+    verifiedBadge: {
+        backgroundColor: 'rgba(77, 163, 255, 0.14)',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+    },
+    verifiedBadgeText: { color: '#4da3ff' },
+    readyBadge: {
+        backgroundColor: 'rgba(72, 201, 138, 0.16)',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+    },
+    readyBadgeText: { color: '#48c98a' },
+    limitedBadge: { backgroundColor: 'rgba(255, 255, 255, 0.08)' },
+    limitedBadgeText: { color: COLORS.textMuted },
+    checkingBadge: { backgroundColor: 'rgba(255, 255, 255, 0.06)' },
+    checkingBadgeText: { color: COLORS.textMuted },
+    badgeText: { color: COLORS.accent, fontSize: 9, fontWeight: '700' },
+    cardName: { color: COLORS.textPrimary, fontSize: 13, fontWeight: '600', textAlign: 'center', marginTop: 2 },
+    cardStats: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
+    cardStatText: { color: COLORS.textMuted, fontSize: 11, marginLeft: 3 },
+    cardCreator: { color: COLORS.textMuted, fontSize: 10, textAlign: 'center' },
+});
+exports.default = exports.SketchfabModelCard;

package/dist/studio/StudioBrowseHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface StudioBrowseHeaderProps {
+    eyebrow?: string;
+    title: string;
+    subtitle?: string;
+    children?: React.ReactNode;
+}
+export declare function StudioBrowseHeader({ eyebrow, title, subtitle, children, }: StudioBrowseHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default StudioBrowseHeader;

package/dist/studio/StudioBrowseHeader.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioBrowseHeader = StudioBrowseHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const StudioSectionHeader_1 = require("./StudioSectionHeader");
+const StudioSurfaceCard_1 = require("./StudioSurfaceCard");
+const editor_1 = require("../editor");
+function StudioBrowseHeader({ eyebrow, title, subtitle, children, }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.shell, children: (0, jsx_runtime_1.jsxs)(StudioSurfaceCard_1.StudioSurfaceCard, { style: styles.card, children: [(0, jsx_runtime_1.jsx)(StudioSectionHeader_1.StudioSectionHeader, { eyebrow: eyebrow, title: title, subtitle: subtitle }), children ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.content, children: children }) : null] }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    shell: {
+        paddingHorizontal: editor_1.studioTheme.spacing.md,
+        paddingTop: editor_1.studioTheme.spacing.sm,
+        paddingBottom: editor_1.studioTheme.spacing.md,
+    },
+    card: {
+        backgroundColor: editor_1.studioTheme.colors.surfaceRaised,
+        borderColor: editor_1.studioTheme.colors.borderStrong,
+        gap: editor_1.studioTheme.spacing.md,
+        overflow: 'hidden',
+    },
+    content: {
+        gap: editor_1.studioTheme.spacing.md,
+    },
+});
+exports.default = StudioBrowseHeader;

package/dist/studio/StudioEmptyState.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface StudioEmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    subtitle?: string;
+}
+export declare function StudioEmptyState({ icon, title, subtitle, }: StudioEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export default StudioEmptyState;

package/dist/studio/StudioEmptyState.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioEmptyState = StudioEmptyState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const editor_1 = require("../editor");
+function StudioEmptyState({ icon, title, subtitle, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [icon, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, children: title }), subtitle ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.subtitle, children: subtitle }) : null] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: editor_1.studioTheme.spacing.xl,
+        paddingVertical: editor_1.studioTheme.spacing.xxl,
+        gap: editor_1.studioTheme.spacing.sm,
+    },
+    title: {
+        color: editor_1.studioTheme.colors.textPrimary,
+        textAlign: 'center',
+        ...editor_1.studioTheme.type.sectionTitle,
+    },
+    subtitle: {
+        color: editor_1.studioTheme.colors.textSecondary,
+        textAlign: 'center',
+        ...editor_1.studioTheme.type.body,
+    },
+});
+exports.default = StudioEmptyState;

package/dist/studio/StudioFloatingAction.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+interface StudioFloatingActionProps {
+    children: React.ReactNode;
+    onPress?: () => void;
+    disabled?: boolean;
+    bottomInset?: number;
+    clearance?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export declare function StudioFloatingAction({ children, onPress, disabled, bottomInset, clearance, style, testID, }: StudioFloatingActionProps): import("react/jsx-runtime").JSX.Element;
+export default StudioFloatingAction;

package/dist/studio/StudioFloatingAction.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioFloatingAction = StudioFloatingAction;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const editor_1 = require("../editor");
+function StudioFloatingAction({ children, onPress, disabled = false, bottomInset = 0, clearance = 28, style, testID, }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", testID: "studio-floating-action-shell", style: [styles.shell, { paddingBottom: bottomInset + clearance }], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", disabled: disabled, onPress: onPress, testID: testID, style: ({ pressed }) => [
+                styles.button,
+                disabled && styles.buttonDisabled,
+                pressed && !disabled && styles.buttonPressed,
+                style,
+            ], children: children }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    shell: {
+        position: 'absolute',
+        left: editor_1.studioTheme.spacing.lg,
+        right: editor_1.studioTheme.spacing.lg,
+        bottom: 0,
+        alignItems: 'flex-end',
+        pointerEvents: 'box-none',
+    },
+    button: {
+        minHeight: 60,
+        minWidth: 60,
+        borderRadius: editor_1.studioTheme.radius.pill,
+        backgroundColor: editor_1.studioTheme.colors.accent,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: editor_1.studioTheme.spacing.lg,
+        ...editor_1.studioTheme.shadow.glow,
+    },
+    buttonPressed: {
+        transform: [{ scale: 0.97 }],
+        backgroundColor: editor_1.studioTheme.colors.accentStrong,
+    },
+    buttonDisabled: {
+        opacity: 0.45,
+    },
+});
+exports.default = StudioFloatingAction;

package/dist/studio/StudioSectionHeader.d.ts

@@ -0,0 +1,7 @@
+interface StudioSectionHeaderProps {
+    eyebrow?: string;
+    title: string;
+    subtitle?: string;
+}
+export declare function StudioSectionHeader({ eyebrow, title, subtitle, }: StudioSectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default StudioSectionHeader;

package/dist/studio/StudioSectionHeader.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioSectionHeader = StudioSectionHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const editor_1 = require("../editor");
+function StudioSectionHeader({ eyebrow, title, subtitle, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [eyebrow ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.eyebrow, children: eyebrow }) : null, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, children: title }), subtitle ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.subtitle, children: subtitle }) : null] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        gap: editor_1.studioTheme.spacing.xs,
+    },
+    eyebrow: {
+        color: editor_1.studioTheme.colors.textSecondary,
+        ...editor_1.studioTheme.type.eyebrow,
+    },
+    title: {
+        color: editor_1.studioTheme.colors.textPrimary,
+        ...editor_1.studioTheme.type.sectionTitle,
+    },
+    subtitle: {
+        color: editor_1.studioTheme.colors.textSecondary,
+        ...editor_1.studioTheme.type.body,
+    },
+});
+exports.default = StudioSectionHeader;

package/dist/studio/StudioSurfaceCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+interface StudioSurfaceCardProps {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function StudioSurfaceCard({ children, style }: StudioSurfaceCardProps): import("react/jsx-runtime").JSX.Element;
+export default StudioSurfaceCard;

package/dist/studio/StudioSurfaceCard.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioSurfaceCard = StudioSurfaceCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const editor_1 = require("../editor");
+function StudioSurfaceCard({ children, style }) {
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.card, style], children: children });
+}
+const styles = react_native_1.StyleSheet.create({
+    card: {
+        borderRadius: editor_1.studioTheme.radius.md,
+        borderWidth: 1,
+        borderColor: editor_1.studioTheme.colors.border,
+        backgroundColor: editor_1.studioTheme.colors.surface,
+        padding: editor_1.studioTheme.spacing.md,
+        ...editor_1.studioTheme.shadow.card,
+    },
+});
+exports.default = StudioSurfaceCard;

package/dist/studio/VoicePanel.d.ts

@@ -0,0 +1,15 @@
+interface VoicePanelProps {
+    activeVoiceId: string | null;
+    onSelectVoice: (id: string | null) => void;
+    /**
+     * Optional preview override. When provided, tapping a voice's preview calls
+     * this instead of the built-in audio-only sample player — letting a host
+     * route the preview through a live avatar for real lip-sync. Receives the
+     * voice profile id; should return a promise that resolves when started.
+     */
+    onPreviewVoice?: (voiceId: string) => Promise<void> | void;
+    /** Voice id currently previewing, when the host owns preview state. */
+    previewingVoiceId?: string | null;
+}
+export default function VoicePanel({ activeVoiceId, onSelectVoice, onPreviewVoice, previewingVoiceId }: VoicePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/studio/VoicePanel.js

@@ -0,0 +1,305 @@
+"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.default = VoicePanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vector_icons_1 = require("@expo/vector-icons");
+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 api_1 = require("../api");
+const useVoicePreview_1 = require("../voice/useVoicePreview");
+const CreateVoiceProfileSheet_1 = __importDefault(require("./CreateVoiceProfileSheet"));
+const editor_1 = require("../editor");
+const AnimatedPressable = react_native_reanimated_1.default.createAnimatedComponent(react_native_1.Pressable);
+const VoiceCard = ({ profile, isActive, onPress, previewState, onPreview, }) => {
+    const scale = (0, react_native_reanimated_1.useSharedValue)(1);
+    const isNoVoice = profile === null;
+    const isPreviewLoading = previewState === 'loading';
+    const isPreviewActive = previewState === 'playing';
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return {
+            transform: [{ scale: scale.value }],
+            borderColor: (0, react_native_reanimated_1.withTiming)(isPreviewActive || isActive ? editor_1.studioTheme.colors.accent : editor_1.studioTheme.colors.border, { duration: 250 }),
+            backgroundColor: (0, react_native_reanimated_1.withTiming)(isPreviewActive || isActive
+                ? editor_1.studioTheme.colors.accentMuted
+                : editor_1.studioTheme.colors.surfaceRaised, { duration: 250 }),
+        };
+    });
+    const handlePressIn = () => {
+        scale.value = (0, react_native_reanimated_1.withSpring)(0.97, { damping: 15, stiffness: 200 });
+    };
+    const handlePressOut = () => {
+        scale.value = (0, react_native_reanimated_1.withSpring)(1, { damping: 15, stiffness: 200 });
+    };
+    return ((0, jsx_runtime_1.jsxs)(AnimatedPressable, { onPress: () => {
+            void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+            onPress();
+        }, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [styles.card, animatedStyle], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.cardHeader, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.cardTitleRow, children: [isNoVoice ? ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "mic-off", size: 20, color: isActive ? editor_1.studioTheme.colors.accent : editor_1.studioTheme.colors.textMuted, style: styles.icon })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "mic", size: 20, color: isPreviewActive || isActive
+                                    ? editor_1.studioTheme.colors.accent
+                                    : editor_1.studioTheme.colors.textPrimary, style: styles.icon })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.name, isNoVoice && styles.mutedText, isActive && styles.activeText], children: isNoVoice ? 'No Default Voice' : profile.name })] }), !isNoVoice && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: (e) => {
+                            e.stopPropagation();
+                            void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                            onPreview();
+                        }, style: [
+                            styles.playButton,
+                            isPreviewActive && styles.playButtonActive,
+                            isPreviewLoading && styles.playButtonLoading,
+                        ], children: isPreviewLoading ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: editor_1.studioTheme.colors.textPrimary })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: isPreviewActive ? 'stop-circle-outline' : 'play-circle-outline', size: 24, color: isPreviewActive || isActive
+                                ? editor_1.studioTheme.colors.textPrimary
+                                : editor_1.studioTheme.colors.textSecondary })) })), isActive && ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeIn.duration(200), exiting: react_native_reanimated_1.FadeOut.duration(200), children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "checkmark-circle", size: 22, color: editor_1.studioTheme.colors.accent }) }))] }), !isNoVoice && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.detailsRow, children: [profile.language && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.badge, isActive && styles.activeBadge], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.badgeText, isActive && styles.activeBadgeText], children: profile.language.toUpperCase() }) })), isPreviewLoading ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.previewStateText, children: "Loading sample..." })) : isPreviewActive ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.previewStateText, children: "Previewing sample..." })) : null, profile.description && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.description, isActive && styles.activeDescription], numberOfLines: 2, children: profile.description }))] }))] }));
+};
+function VoicePanel({ activeVoiceId, onSelectVoice, onPreviewVoice, previewingVoiceId }) {
+    const [voices, setVoices] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const sheetRef = (0, react_1.useRef)(null);
+    const { activeVoiceId: builtinPreviewVoiceId, loadingVoiceId, previewVoice } = (0, useVoicePreview_1.useVoicePreview)();
+    // When the host supplies onPreviewVoice it owns preview playback (and the
+    // "playing" state via previewingVoiceId); otherwise fall back to the built-in
+    // audio-only sample preview.
+    const previewVoiceId = onPreviewVoice ? (previewingVoiceId ?? null) : builtinPreviewVoiceId;
+    const refreshVoices = (0, react_1.useCallback)(async (signal) => {
+        const data = await (0, api_1.getVoiceProfiles)();
+        if (!signal?.aborted) {
+            setVoices(data || []);
+        }
+    }, []);
+    const loadVoices = (0, react_1.useCallback)(async (signal) => {
+        try {
+            setIsLoading(true);
+            setError(null);
+            await refreshVoices(signal);
+        }
+        catch (err) {
+            if (!signal?.aborted) {
+                console.error('Failed to load voice profiles', err);
+                setError('Failed to fetch voices. Please try again later.');
+            }
+        }
+        finally {
+            if (!signal?.aborted)
+                setIsLoading(false);
+        }
+    }, [refreshVoices]);
+    (0, react_1.useEffect)(() => {
+        const controller = new AbortController();
+        void loadVoices(controller.signal);
+        return () => controller.abort();
+    }, [loadVoices]);
+    const renderItem = ({ item }) => {
+        const isActive = item === null ? activeVoiceId === null : item.id === activeVoiceId;
+        const previewState = !item?.id
+            ? 'idle'
+            : loadingVoiceId === item.id
+                ? 'loading'
+                : previewVoiceId === item.id
+                    ? 'playing'
+                    : 'idle';
+        return ((0, jsx_runtime_1.jsx)(VoiceCard, { profile: item, isActive: isActive, onPress: () => onSelectVoice(item ? item.id : null), previewState: previewState, onPreview: () => {
+                if (!item?.id)
+                    return;
+                const run = onPreviewVoice ? onPreviewVoice(item.id) : previewVoice(item.id);
+                Promise.resolve(run).catch((err) => console.warn('[VoicePanel] Preview failed:', err));
+            } }));
+    };
+    const listData = [null, ...voices];
+    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: editor_1.studioTheme.colors.accent }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingText, children: "Synthesizing voices..." })] }));
+    }
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.centerContainer, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "alert-circle-outline", size: 36, color: editor_1.studioTheme.colors.danger, 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: () => loadVoices(), 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: "DEFAULT VOICE" }), voices.length === 0 && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyStateText, children: "You don't have any voice profiles yet." })), (0, jsx_runtime_1.jsx)(react_native_1.FlatList, { data: listData, keyExtractor: (item) => (item ? item.id : 'no-voice'), renderItem: renderItem, contentContainerStyle: styles.listContent, showsVerticalScrollIndicator: false }), (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: styles.cloneButton, onPress: () => sheetRef.current?.expand(), children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "add-circle", size: 20, color: "#fff" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cloneButtonText, children: "Clone Voice Profile" })] }), (0, jsx_runtime_1.jsx)(CreateVoiceProfileSheet_1.default, { sheetRef: sheetRef, onSuccess: () => refreshVoices().catch((err) => console.warn('[VoicePanel] Refresh failed:', err)) })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingVertical: 16,
+    },
+    centerContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+    },
+    sectionTitle: {
+        color: editor_1.studioTheme.colors.textSecondary,
+        fontSize: 12,
+        fontWeight: '700',
+        letterSpacing: 1.2,
+        textTransform: 'uppercase',
+        paddingHorizontal: 16,
+        marginBottom: 8,
+    },
+    emptyStateText: {
+        paddingHorizontal: 16,
+        paddingTop: 8,
+        color: editor_1.studioTheme.colors.textMuted,
+        fontSize: 14,
+        fontStyle: 'italic',
+    },
+    listContent: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        gap: 12,
+    },
+    card: {
+        borderRadius: 16,
+        borderWidth: 1,
+        padding: 18,
+        marginBottom: 12,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    playButton: { marginLeft: 'auto', marginRight: 12, padding: 4 },
+    playButtonActive: {
+        borderRadius: 999,
+        backgroundColor: editor_1.studioTheme.colors.accent,
+    },
+    playButtonLoading: {
+        borderRadius: 999,
+        backgroundColor: editor_1.studioTheme.colors.surfaceSoft,
+    },
+    cardTitleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    icon: {
+        marginRight: 12,
+    },
+    name: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: editor_1.studioTheme.colors.textPrimary,
+        letterSpacing: 0.3,
+    },
+    activeText: {
+        color: editor_1.studioTheme.colors.textPrimary,
+    },
+    mutedText: {
+        color: editor_1.studioTheme.colors.textMuted,
+        fontStyle: 'italic',
+        fontWeight: '500',
+    },
+    detailsRow: {
+        marginTop: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 32,
+    },
+    badge: {
+        backgroundColor: editor_1.studioTheme.colors.surfaceSoft,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        marginRight: 12,
+    },
+    activeBadge: {
+        backgroundColor: editor_1.studioTheme.colors.accentMuted,
+    },
+    badgeText: {
+        fontSize: 10,
+        fontWeight: '700',
+        color: editor_1.studioTheme.colors.textSecondary,
+        letterSpacing: 0.5,
+    },
+    activeBadgeText: {
+        color: editor_1.studioTheme.colors.accent,
+    },
+    previewStateText: {
+        color: editor_1.studioTheme.colors.accent,
+        fontSize: 12,
+        fontWeight: '700',
+        marginRight: 12,
+    },
+    description: {
+        flex: 1,
+        fontSize: 13,
+        color: editor_1.studioTheme.colors.textMuted,
+        lineHeight: 18,
+    },
+    activeDescription: {
+        color: editor_1.studioTheme.colors.textSecondary,
+    },
+    loadingText: {
+        marginTop: 16,
+        color: editor_1.studioTheme.colors.textSecondary,
+        fontSize: 15,
+        fontWeight: '500',
+        letterSpacing: 0.5,
+    },
+    errorText: {
+        color: editor_1.studioTheme.colors.danger,
+        fontSize: 15,
+        textAlign: 'center',
+        marginBottom: 20,
+        lineHeight: 22,
+    },
+    retryButton: {
+        backgroundColor: editor_1.studioTheme.colors.surfaceSoft,
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 999,
+    },
+    retryButtonText: {
+        color: editor_1.studioTheme.colors.textPrimary,
+        fontWeight: '600',
+        fontSize: 14,
+    },
+    cloneButton: {
+        backgroundColor: editor_1.studioTheme.colors.accent,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 16,
+        borderRadius: 16,
+        marginHorizontal: 16,
+        marginTop: 12,
+        gap: 8,
+    },
+    cloneButtonText: {
+        color: '#fff',
+        fontWeight: 'bold',
+        fontSize: 16,
+    },
+});

package/dist/studio/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const BLURHASH = "L6PZfSi_.AyE_3t7t7R**0o#DgR4";
+export declare const MAX_ASSET_SIZE: number;
+export declare const RESULTS_PER_PAGE = 24;

package/dist/studio/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RESULTS_PER_PAGE = exports.MAX_ASSET_SIZE = exports.BLURHASH = void 0;
+exports.BLURHASH = 'L6PZfSi_.AyE_3t7t7R**0o#DgR4';
+exports.MAX_ASSET_SIZE = 50 * 1024 * 1024; // 50 MB
+exports.RESULTS_PER_PAGE = 24;