@nice2dev/game-engine 1.0.5 → 1.0.10

package/dist/esm/unity-integration/components/UnityAssetStoreBrowser.js

@@ -0,0 +1,794 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, forwardRef, useReducer, useMemo, useCallback, useImperativeHandle, useState, useContext } from 'react';
+
+const DEFAULT_THEME = {
+    background: '#0f0f17',
+    surfaceBackground: '#1a1a28',
+    cardBackground: '#252538',
+    headerBackground: '#15151f',
+    textPrimary: '#e2e8f0',
+    textSecondary: '#94a3b8',
+    accent: '#6366f1',
+    success: '#22c55e',
+    warning: '#f59e0b',
+    danger: '#ef4444',
+    star: '#fbbf24',
+    border: 'rgba(255,255,255,0.08)',
+    freeBadge: '#22c55e',
+    ownedBadge: '#3b82f6',
+    saleBadge: '#ef4444',
+};
+function storeReducer(state, action) {
+    switch (action.type) {
+        case 'SET_QUERY':
+            return { ...state, query: { ...state.query, ...action.query } };
+        case 'SET_RESULTS':
+            return { ...state, results: action.results, totalResults: action.total };
+        case 'SET_LOADING':
+            return { ...state, loading: action.loading };
+        case 'SET_ERROR':
+            return { ...state, error: action.error };
+        case 'SELECT_ASSET':
+            return { ...state, selectedAsset: action.asset };
+        case 'ADD_TO_CART':
+            return { ...state, cart: new Set([...state.cart, action.id]) };
+        case 'REMOVE_FROM_CART':
+            const newCart = new Set(state.cart);
+            newCart.delete(action.id);
+            return { ...state, cart: newCart };
+        case 'CLEAR_CART':
+            return { ...state, cart: new Set() };
+        case 'SET_DOWNLOAD_PROGRESS':
+            const newDownloads = new Map(state.downloading);
+            newDownloads.set(action.id, action.progress);
+            return { ...state, downloading: newDownloads };
+        case 'CLEAR_DOWNLOAD':
+            const cleared = new Map(state.downloading);
+            cleared.delete(action.id);
+            return { ...state, downloading: cleared };
+        case 'SET_VIEW':
+            return { ...state, view: action.view };
+        case 'TOGGLE_MY_ASSETS':
+            return { ...state, myAssets: !state.myAssets };
+        default:
+            return state;
+    }
+}
+const INITIAL_STATE = {
+    query: {
+        query: '',
+        category: 'all',
+        pricing: 'all',
+        minRating: 0,
+        sortBy: 'relevance',
+        page: 1,
+        pageSize: 24,
+    },
+    results: [],
+    totalResults: 0,
+    loading: false,
+    error: null,
+    selectedAsset: null,
+    cart: new Set(),
+    downloading: new Map(),
+    view: 'grid',
+    myAssets: false,
+};
+const StoreContext = createContext(null);
+function useStore() {
+    const ctx = useContext(StoreContext);
+    if (!ctx) {
+        throw new Error('useStore must be used within UnityAssetStoreBrowser');
+    }
+    return ctx;
+}
+/* ── Helper Functions ─────────────────────────────────────────── */
+function formatPrice(price, currency) {
+    if (price === 0) {
+        return 'Free';
+    }
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(price);
+}
+function formatFileSize(bytes) {
+    if (bytes < 1024 * 1024) {
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    }
+    if (bytes < 1024 * 1024 * 1024) {
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+function getCategoryIcon(category) {
+    switch (category) {
+        case '3d':
+            return '🎲';
+        case '2d':
+            return '🖼️';
+        case 'tools':
+            return '🔧';
+        case 'vfx':
+            return '✨';
+        case 'audio':
+            return '🔊';
+        case 'templates':
+            return '📋';
+        case 'add-ons':
+            return '🧩';
+        default:
+            return '📦';
+    }
+}
+/* ── Search Header ────────────────────────────────────────────── */
+const SearchHeader = () => {
+    const { state, dispatch, theme, search } = useStore();
+    const [localQuery, setLocalQuery] = useState(state.query.query);
+    const handleSearch = () => {
+        dispatch({ type: 'SET_QUERY', query: { query: localQuery, page: 1 } });
+        search();
+    };
+    const categories = [
+        { value: 'all', label: 'All Categories' },
+        { value: '3d', label: '3D' },
+        { value: '2d', label: '2D' },
+        { value: 'tools', label: 'Tools' },
+        { value: 'vfx', label: 'VFX' },
+        { value: 'audio', label: 'Audio' },
+        { value: 'templates', label: 'Templates' },
+        { value: 'add-ons', label: 'Add-ons' },
+    ];
+    return (jsxs("div", { style: {
+            padding: '16px 24px',
+            backgroundColor: theme.headerBackground,
+            borderBottom: `1px solid ${theme.border}`,
+        }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }, children: [jsx("div", { style: { fontSize: 24 }, children: "\uD83C\uDFEA" }), jsx("h1", { style: { margin: 0, fontSize: 18, fontWeight: 600, color: theme.textPrimary }, children: "Unity Asset Store" }), jsx("div", { style: { flex: 1 } }), jsxs("button", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 6,
+                            padding: '8px 12px',
+                            backgroundColor: state.cart.size > 0 ? theme.accent : 'rgba(0,0,0,0.2)',
+                            border: 'none',
+                            borderRadius: 6,
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: ["\uD83D\uDED2 Cart (", state.cart.size, ")"] }), jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_MY_ASSETS' }), style: {
+                            padding: '8px 12px',
+                            backgroundColor: state.myAssets ? theme.accent : 'rgba(0,0,0,0.2)',
+                            border: 'none',
+                            borderRadius: 6,
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: "\uD83D\uDCDA My Assets" })] }), jsxs("div", { style: { display: 'flex', gap: 8 }, children: [jsxs("div", { style: { flex: 1, position: 'relative' }, children: [jsx("input", { type: "text", placeholder: "Search assets...", value: localQuery, onChange: (e) => setLocalQuery(e.target.value), onKeyDown: (e) => e.key === 'Enter' && handleSearch(), style: {
+                                    width: '100%',
+                                    padding: '10px 16px',
+                                    paddingRight: 50,
+                                    fontSize: 14,
+                                    backgroundColor: 'rgba(0,0,0,0.3)',
+                                    border: `1px solid ${theme.border}`,
+                                    borderRadius: 8,
+                                    color: theme.textPrimary,
+                                    outline: 'none',
+                                } }), jsx("button", { onClick: handleSearch, style: {
+                                    position: 'absolute',
+                                    right: 4,
+                                    top: 4,
+                                    bottom: 4,
+                                    padding: '0 12px',
+                                    backgroundColor: theme.accent,
+                                    border: 'none',
+                                    borderRadius: 6,
+                                    color: '#fff',
+                                    cursor: 'pointer',
+                                }, children: "\uD83D\uDD0D" })] }), jsx("select", { value: state.query.category, onChange: (e) => {
+                            dispatch({
+                                type: 'SET_QUERY',
+                                query: { category: e.target.value, page: 1 },
+                            });
+                            search();
+                        }, style: {
+                            padding: '10px 16px',
+                            fontSize: 14,
+                            backgroundColor: 'rgba(0,0,0,0.3)',
+                            border: `1px solid ${theme.border}`,
+                            borderRadius: 8,
+                            color: theme.textPrimary,
+                        }, children: categories.map((c) => (jsx("option", { value: c.value, children: c.label }, c.value))) }), jsxs("select", { value: state.query.pricing, onChange: (e) => {
+                            dispatch({
+                                type: 'SET_QUERY',
+                                query: { pricing: e.target.value, page: 1 },
+                            });
+                            search();
+                        }, style: {
+                            padding: '10px 16px',
+                            fontSize: 14,
+                            backgroundColor: 'rgba(0,0,0,0.3)',
+                            border: `1px solid ${theme.border}`,
+                            borderRadius: 8,
+                            color: theme.textPrimary,
+                        }, children: [jsx("option", { value: "all", children: "All Prices" }), jsx("option", { value: "free", children: "Free" }), jsx("option", { value: "paid", children: "Paid" }), jsx("option", { value: "sale", children: "On Sale" })] }), jsxs("select", { value: state.query.sortBy, onChange: (e) => {
+                            dispatch({
+                                type: 'SET_QUERY',
+                                query: { sortBy: e.target.value, page: 1 },
+                            });
+                            search();
+                        }, style: {
+                            padding: '10px 16px',
+                            fontSize: 14,
+                            backgroundColor: 'rgba(0,0,0,0.3)',
+                            border: `1px solid ${theme.border}`,
+                            borderRadius: 8,
+                            color: theme.textPrimary,
+                        }, children: [jsx("option", { value: "relevance", children: "Relevance" }), jsx("option", { value: "popularity", children: "Popularity" }), jsx("option", { value: "rating", children: "Rating" }), jsx("option", { value: "price_asc", children: "Price: Low to High" }), jsx("option", { value: "price_desc", children: "Price: High to Low" }), jsx("option", { value: "newest", children: "Newest" })] })] })] }));
+};
+/* ── Rating Stars ─────────────────────────────────────────────── */
+const RatingStars = ({ rating, count }) => {
+    const { theme } = useStore();
+    return (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [[1, 2, 3, 4, 5].map((star) => (jsx("span", { style: {
+                    fontSize: 12,
+                    color: star <= Math.round(rating) ? theme.star : theme.textSecondary,
+                }, children: "\u2605" }, star))), count !== undefined && (jsxs("span", { style: { fontSize: 11, color: theme.textSecondary, marginLeft: 4 }, children: ["(", count, ")"] }))] }));
+};
+/* ── Asset Card ───────────────────────────────────────────────── */
+const AssetCard = ({ asset }) => {
+    const { state, dispatch, theme, downloadAsset, openInBrowser } = useStore();
+    const isDownloading = state.downloading.has(asset.id);
+    const downloadProgress = state.downloading.get(asset.id) ?? 0;
+    const isInCart = state.cart.has(asset.id);
+    return (jsxs("div", { style: {
+            backgroundColor: theme.cardBackground,
+            borderRadius: 12,
+            overflow: 'hidden',
+            cursor: 'pointer',
+            transition: 'transform 0.2s, box-shadow 0.2s',
+            border: `1px solid ${theme.border}`,
+        }, onClick: () => dispatch({ type: 'SELECT_ASSET', asset }), children: [jsxs("div", { style: {
+                    position: 'relative',
+                    width: '100%',
+                    paddingTop: '56.25%',
+                    backgroundColor: 'rgba(0,0,0,0.3)',
+                }, children: [asset.thumbnailUrl && (jsx("div", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            backgroundImage: `url(${asset.thumbnailUrl})`,
+                            backgroundSize: 'cover',
+                            backgroundPosition: 'center',
+                        } })), jsxs("div", { style: { position: 'absolute', top: 8, left: 8, display: 'flex', gap: 4 }, children: [asset.isFree && (jsx("span", { style: {
+                                    padding: '2px 8px',
+                                    fontSize: 10,
+                                    fontWeight: 600,
+                                    backgroundColor: theme.freeBadge,
+                                    borderRadius: 4,
+                                    color: '#fff',
+                                }, children: "FREE" })), asset.isOwned && (jsx("span", { style: {
+                                    padding: '2px 8px',
+                                    fontSize: 10,
+                                    fontWeight: 600,
+                                    backgroundColor: theme.ownedBadge,
+                                    borderRadius: 4,
+                                    color: '#fff',
+                                }, children: "OWNED" })), asset.originalPrice && (jsxs("span", { style: {
+                                    padding: '2px 8px',
+                                    fontSize: 10,
+                                    fontWeight: 600,
+                                    backgroundColor: theme.saleBadge,
+                                    borderRadius: 4,
+                                    color: '#fff',
+                                }, children: ["-", Math.round((1 - asset.price / asset.originalPrice) * 100), "%"] }))] }), jsx("div", { style: {
+                            position: 'absolute',
+                            bottom: 8,
+                            right: 8,
+                            width: 28,
+                            height: 28,
+                            backgroundColor: 'rgba(0,0,0,0.6)',
+                            borderRadius: 6,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: 14,
+                        }, children: getCategoryIcon(asset.category) })] }), jsxs("div", { style: { padding: 12 }, children: [jsx("h3", { style: {
+                            margin: 0,
+                            fontSize: 13,
+                            fontWeight: 600,
+                            color: theme.textPrimary,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: asset.name }), jsx("div", { style: {
+                            fontSize: 11,
+                            color: theme.textSecondary,
+                            marginTop: 4,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: asset.publisher }), jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            marginTop: 8,
+                        }, children: [jsx(RatingStars, { rating: asset.rating, count: asset.ratingCount }), jsxs("div", { style: { textAlign: 'right' }, children: [asset.originalPrice && (jsx("div", { style: {
+                                            fontSize: 10,
+                                            color: theme.textSecondary,
+                                            textDecoration: 'line-through',
+                                        }, children: formatPrice(asset.originalPrice, asset.currency) })), jsx("div", { style: {
+                                            fontSize: 14,
+                                            fontWeight: 600,
+                                            color: asset.isFree ? theme.freeBadge : theme.textPrimary,
+                                        }, children: formatPrice(asset.price, asset.currency) })] })] }), jsxs("div", { style: { display: 'flex', gap: 8, marginTop: 12 }, children: [asset.isOwned ? (jsx("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    downloadAsset(asset.id);
+                                }, disabled: isDownloading, style: {
+                                    flex: 1,
+                                    padding: '8px 12px',
+                                    fontSize: 11,
+                                    fontWeight: 500,
+                                    backgroundColor: isDownloading ? theme.textSecondary : theme.success,
+                                    border: 'none',
+                                    borderRadius: 6,
+                                    color: '#fff',
+                                    cursor: isDownloading ? 'not-allowed' : 'pointer',
+                                }, children: isDownloading ? `${downloadProgress}%` : '📥 Download' })) : (jsx("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (isInCart) {
+                                        dispatch({ type: 'REMOVE_FROM_CART', id: asset.id });
+                                    }
+                                    else {
+                                        dispatch({ type: 'ADD_TO_CART', id: asset.id });
+                                    }
+                                }, style: {
+                                    flex: 1,
+                                    padding: '8px 12px',
+                                    fontSize: 11,
+                                    fontWeight: 500,
+                                    backgroundColor: isInCart ? theme.warning : theme.accent,
+                                    border: 'none',
+                                    borderRadius: 6,
+                                    color: '#fff',
+                                    cursor: 'pointer',
+                                }, children: isInCart ? '✓ In Cart' : '🛒 Add to Cart' })), jsx("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    openInBrowser(asset);
+                                }, style: {
+                                    padding: '8px 12px',
+                                    fontSize: 11,
+                                    backgroundColor: 'rgba(0,0,0,0.2)',
+                                    border: `1px solid ${theme.border}`,
+                                    borderRadius: 6,
+                                    color: theme.textSecondary,
+                                    cursor: 'pointer',
+                                }, children: "\uD83D\uDD17" })] })] })] }));
+};
+/* ── Asset Grid ───────────────────────────────────────────────── */
+const AssetGrid = () => {
+    const { state, theme } = useStore();
+    if (state.loading) {
+        return (jsx("div", { style: {
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: theme.textSecondary,
+            }, children: "\u23F3 Loading assets..." }));
+    }
+    if (state.error) {
+        return (jsxs("div", { style: {
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: theme.danger,
+            }, children: ["\u274C ", state.error] }));
+    }
+    if (state.results.length === 0) {
+        return (jsxs("div", { style: {
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: theme.textSecondary,
+            }, children: [jsx("div", { style: { fontSize: 48, marginBottom: 16 }, children: "\uD83D\uDCED" }), jsx("div", { children: "No assets found" })] }));
+    }
+    return (jsx("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+            gap: 16,
+            padding: 16,
+        }, children: state.results.map((asset) => (jsx(AssetCard, { asset: asset }, asset.id))) }));
+};
+/* ── Asset Detail Modal ───────────────────────────────────────── */
+const AssetDetailModal = () => {
+    const { state, dispatch, theme, downloadAsset, openInBrowser } = useStore();
+    const [activeTab, setActiveTab] = useState('overview');
+    if (!state.selectedAsset) {
+        return null;
+    }
+    const asset = state.selectedAsset;
+    const isInCart = state.cart.has(asset.id);
+    const isDownloading = state.downloading.has(asset.id);
+    const downloadProgress = state.downloading.get(asset.id) ?? 0;
+    return (jsx("div", { style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0,0,0,0.8)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+            padding: 24,
+        }, onClick: () => dispatch({ type: 'SELECT_ASSET', asset: null }), children: jsxs("div", { onClick: (e) => e.stopPropagation(), style: {
+                width: '100%',
+                maxWidth: 900,
+                maxHeight: '90vh',
+                backgroundColor: theme.surfaceBackground,
+                borderRadius: 16,
+                overflow: 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: [jsxs("div", { style: {
+                        display: 'flex',
+                        padding: 20,
+                        backgroundColor: theme.headerBackground,
+                        borderBottom: `1px solid ${theme.border}`,
+                    }, children: [jsx("div", { style: {
+                                width: 200,
+                                height: 112,
+                                backgroundColor: 'rgba(0,0,0,0.3)',
+                                borderRadius: 8,
+                                backgroundImage: `url(${asset.thumbnailUrl})`,
+                                backgroundSize: 'cover',
+                                backgroundPosition: 'center',
+                                marginRight: 20,
+                                flexShrink: 0,
+                            } }), jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [jsx("h2", { style: { margin: 0, fontSize: 20, fontWeight: 600, color: theme.textPrimary }, children: asset.name }), jsxs("div", { style: { fontSize: 14, color: theme.textSecondary, marginTop: 4 }, children: ["by ", asset.publisher] }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 16, marginTop: 12 }, children: [jsx(RatingStars, { rating: asset.rating, count: asset.ratingCount }), jsx("span", { style: { fontSize: 12, color: theme.textSecondary }, children: formatFileSize(asset.fileSize) }), jsxs("span", { style: { fontSize: 12, color: theme.textSecondary }, children: ["Unity ", asset.minUnityVersion, "+"] })] }), jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 12 }, children: [asset.renderPipelines.map((rp) => (jsx("span", { style: {
+                                                padding: '2px 8px',
+                                                fontSize: 10,
+                                                backgroundColor: theme.accent,
+                                                borderRadius: 4,
+                                                color: '#fff',
+                                                textTransform: 'uppercase',
+                                            }, children: rp }, rp))), asset.tags.slice(0, 5).map((tag) => (jsx("span", { style: {
+                                                padding: '2px 8px',
+                                                fontSize: 10,
+                                                backgroundColor: 'rgba(255,255,255,0.1)',
+                                                borderRadius: 4,
+                                                color: theme.textSecondary,
+                                            }, children: tag }, tag)))] })] }), jsxs("div", { style: { textAlign: 'right', marginLeft: 20 }, children: [asset.originalPrice && (jsx("div", { style: { fontSize: 14, color: theme.textSecondary, textDecoration: 'line-through' }, children: formatPrice(asset.originalPrice, asset.currency) })), jsx("div", { style: {
+                                        fontSize: 28,
+                                        fontWeight: 700,
+                                        color: asset.isFree ? theme.freeBadge : theme.textPrimary,
+                                    }, children: formatPrice(asset.price, asset.currency) }), jsxs("div", { style: { marginTop: 12 }, children: [asset.isOwned ? (jsx("button", { onClick: () => downloadAsset(asset.id), disabled: isDownloading, style: {
+                                                width: '100%',
+                                                padding: '12px 24px',
+                                                fontSize: 14,
+                                                fontWeight: 600,
+                                                backgroundColor: isDownloading ? theme.textSecondary : theme.success,
+                                                border: 'none',
+                                                borderRadius: 8,
+                                                color: '#fff',
+                                                cursor: isDownloading ? 'not-allowed' : 'pointer',
+                                            }, children: isDownloading ? `Downloading ${downloadProgress}%` : '📥 Download & Import' })) : (jsx("button", { onClick: () => isInCart
+                                                ? dispatch({ type: 'REMOVE_FROM_CART', id: asset.id })
+                                                : dispatch({ type: 'ADD_TO_CART', id: asset.id }), style: {
+                                                width: '100%',
+                                                padding: '12px 24px',
+                                                fontSize: 14,
+                                                fontWeight: 600,
+                                                backgroundColor: isInCart ? theme.warning : theme.accent,
+                                                border: 'none',
+                                                borderRadius: 8,
+                                                color: '#fff',
+                                                cursor: 'pointer',
+                                            }, children: isInCart ? '✓ Remove from Cart' : '🛒 Add to Cart' })), jsx("button", { onClick: () => openInBrowser(asset), style: {
+                                                width: '100%',
+                                                marginTop: 8,
+                                                padding: '10px 24px',
+                                                fontSize: 12,
+                                                backgroundColor: 'transparent',
+                                                border: `1px solid ${theme.border}`,
+                                                borderRadius: 8,
+                                                color: theme.textSecondary,
+                                                cursor: 'pointer',
+                                            }, children: "\uD83D\uDD17 View on Asset Store" })] })] }), jsx("button", { onClick: () => dispatch({ type: 'SELECT_ASSET', asset: null }), style: {
+                                position: 'absolute',
+                                top: 16,
+                                right: 16,
+                                padding: 8,
+                                fontSize: 18,
+                                backgroundColor: 'transparent',
+                                border: 'none',
+                                color: theme.textSecondary,
+                                cursor: 'pointer',
+                            }, children: "\u2715" })] }), jsx("div", { style: { display: 'flex', borderBottom: `1px solid ${theme.border}` }, children: ['overview', 'images', 'reviews'].map((tab) => (jsx("button", { onClick: () => setActiveTab(tab), style: {
+                            flex: 1,
+                            padding: '12px 16px',
+                            fontSize: 13,
+                            fontWeight: 500,
+                            backgroundColor: 'transparent',
+                            border: 'none',
+                            borderBottom: activeTab === tab ? `2px solid ${theme.accent}` : '2px solid transparent',
+                            color: activeTab === tab ? theme.textPrimary : theme.textSecondary,
+                            cursor: 'pointer',
+                            textTransform: 'capitalize',
+                        }, children: tab }, tab))) }), jsxs("div", { style: { flex: 1, overflow: 'auto', padding: 20 }, children: [activeTab === 'overview' && (jsxs("div", { children: [jsx("h3", { style: {
+                                        margin: '0 0 12px',
+                                        fontSize: 16,
+                                        fontWeight: 600,
+                                        color: theme.textPrimary,
+                                    }, children: "Description" }), jsx("p", { style: { margin: 0, fontSize: 14, lineHeight: 1.6, color: theme.textSecondary }, children: asset.description }), jsxs("div", { style: { marginTop: 24 }, children: [jsx("h3", { style: {
+                                                margin: '0 0 12px',
+                                                fontSize: 16,
+                                                fontWeight: 600,
+                                                color: theme.textPrimary,
+                                            }, children: "Details" }), jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }, children: [jsxs("div", { style: { padding: 12, backgroundColor: theme.cardBackground, borderRadius: 8 }, children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Version" }), jsx("div", { style: { fontSize: 14, color: theme.textPrimary, fontWeight: 500 }, children: asset.version })] }), jsxs("div", { style: { padding: 12, backgroundColor: theme.cardBackground, borderRadius: 8 }, children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Last Updated" }), jsx("div", { style: { fontSize: 14, color: theme.textPrimary, fontWeight: 500 }, children: asset.lastUpdated })] }), jsxs("div", { style: { padding: 12, backgroundColor: theme.cardBackground, borderRadius: 8 }, children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Min Unity Version" }), jsx("div", { style: { fontSize: 14, color: theme.textPrimary, fontWeight: 500 }, children: asset.minUnityVersion })] }), jsxs("div", { style: { padding: 12, backgroundColor: theme.cardBackground, borderRadius: 8 }, children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "File Size" }), jsx("div", { style: { fontSize: 14, color: theme.textPrimary, fontWeight: 500 }, children: formatFileSize(asset.fileSize) })] })] })] })] })), activeTab === 'images' && (jsxs("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+                                gap: 12,
+                            }, children: [asset.previewImages.map((url, i) => (jsx("div", { style: {
+                                        paddingTop: '56.25%',
+                                        backgroundColor: 'rgba(0,0,0,0.3)',
+                                        borderRadius: 8,
+                                        backgroundImage: `url(${url})`,
+                                        backgroundSize: 'cover',
+                                        backgroundPosition: 'center',
+                                    } }, i))), asset.previewImages.length === 0 && (jsx("div", { style: { color: theme.textSecondary }, children: "No preview images available" }))] })), activeTab === 'reviews' && (jsx("div", { style: { color: theme.textSecondary }, children: "Reviews would be loaded from the Asset Store API" }))] })] }) }));
+};
+// Demo assets
+const DEMO_ASSETS = [
+    {
+        id: '1',
+        name: 'Polygon Fantasy Kingdom',
+        publisher: 'Synty Studios',
+        publisherId: 'synty',
+        category: '3d',
+        shortDescription: 'Low poly fantasy modular asset pack',
+        description: 'A massive library of low-poly 3D assets perfect for creating fantasy worlds. Includes buildings, characters, props, weapons, and more.',
+        price: 99.99,
+        currency: 'USD',
+        isFree: false,
+        rating: 4.8,
+        ratingCount: 2840,
+        thumbnailUrl: '',
+        previewImages: [],
+        unityVersions: ['2020.3', '2021.3', '2022.3'],
+        minUnityVersion: '2020.3',
+        fileSize: 456000000,
+        lastUpdated: '2024-01-10',
+        version: '2.5.0',
+        tags: ['lowpoly', 'fantasy', 'medieval', 'modular'],
+        isOwned: false,
+        renderPipelines: ['builtin', 'urp', 'hdrp'],
+        url: 'https://assetstore.unity.com/',
+    },
+    {
+        id: '2',
+        name: 'DOTween Pro',
+        publisher: 'Demigiant',
+        publisherId: 'demigiant',
+        category: 'tools',
+        shortDescription: 'High-performance animation engine',
+        description: 'DOTween is a fast, efficient, fully type-safe object-oriented animation engine for Unity, optimized for C# users.',
+        price: 15.0,
+        originalPrice: 20.0,
+        currency: 'USD',
+        isFree: false,
+        rating: 5.0,
+        ratingCount: 5621,
+        thumbnailUrl: '',
+        previewImages: [],
+        unityVersions: ['2019.4', '2020.3', '2021.3', '2022.3'],
+        minUnityVersion: '2019.4',
+        fileSize: 1200000,
+        lastUpdated: '2023-12-15',
+        version: '1.0.375',
+        tags: ['animation', 'tween', 'performance'],
+        isOwned: true,
+        renderPipelines: ['builtin', 'urp', 'hdrp'],
+        url: 'https://assetstore.unity.com/',
+    },
+    {
+        id: '3',
+        name: 'Ultimate Character Controller',
+        publisher: 'Opsive',
+        publisherId: 'opsive',
+        category: 'tools',
+        shortDescription: 'Professional character controller',
+        description: 'The Ultimate Character Controller is a professional, kinematic character controller designed to include the smoothest first and third person controls.',
+        price: 75.0,
+        currency: 'USD',
+        isFree: false,
+        rating: 4.7,
+        ratingCount: 892,
+        thumbnailUrl: '',
+        previewImages: [],
+        unityVersions: ['2020.3', '2021.3', '2022.3'],
+        minUnityVersion: '2020.3',
+        fileSize: 89000000,
+        lastUpdated: '2024-01-05',
+        version: '3.1.2',
+        tags: ['character', 'controller', 'fps', 'tps'],
+        isOwned: false,
+        renderPipelines: ['builtin', 'urp'],
+        url: 'https://assetstore.unity.com/',
+    },
+    {
+        id: '4',
+        name: 'AllSky - Free',
+        publisher: 'rpgwhitelock',
+        publisherId: 'rpgwhitelock',
+        category: '2d',
+        shortDescription: 'Free skybox pack',
+        description: '10 free skyboxes in various styles. Perfect for prototyping or small projects.',
+        price: 0,
+        currency: 'USD',
+        isFree: true,
+        rating: 4.9,
+        ratingCount: 3200,
+        thumbnailUrl: '',
+        previewImages: [],
+        unityVersions: ['2019.4', '2020.3', '2021.3', '2022.3'],
+        minUnityVersion: '2019.4',
+        fileSize: 45000000,
+        lastUpdated: '2023-06-20',
+        version: '1.2.0',
+        tags: ['skybox', 'environment', 'free'],
+        isOwned: true,
+        renderPipelines: ['builtin', 'urp', 'hdrp'],
+        url: 'https://assetstore.unity.com/',
+    },
+    {
+        id: '5',
+        name: 'Magic Effects FREE',
+        publisher: 'Hovl Studio',
+        publisherId: 'hovl',
+        category: 'vfx',
+        shortDescription: 'Free VFX magic effects',
+        description: 'A free pack of 20 magic spell effects with particles, trails, and meshes.',
+        price: 0,
+        currency: 'USD',
+        isFree: true,
+        rating: 4.8,
+        ratingCount: 1560,
+        thumbnailUrl: '',
+        previewImages: [],
+        unityVersions: ['2019.4', '2020.3', '2021.3', '2022.3'],
+        minUnityVersion: '2019.4',
+        fileSize: 78000000,
+        lastUpdated: '2023-09-12',
+        version: '1.5.0',
+        tags: ['vfx', 'particles', 'magic', 'free'],
+        isOwned: false,
+        renderPipelines: ['builtin', 'urp'],
+        url: 'https://assetstore.unity.com/',
+    },
+    {
+        id: '6',
+        name: 'Odin Inspector',
+        publisher: 'Sirenix',
+        publisherId: 'sirenix',
+        category: 'tools',
+        shortDescription: 'Powerful Unity inspector',
+        description: 'Odin puts a complete inspector replacement, custom attribute system, and serialization suite at your fingertips.',
+        price: 55.0,
+        currency: 'USD',
+        isFree: false,
+        rating: 5.0,
+        ratingCount: 4100,
+        thumbnailUrl: '',
+        previewImages: [],
+        unityVersions: ['2019.4', '2020.3', '2021.3', '2022.3'],
+        minUnityVersion: '2019.4',
+        fileSize: 35000000,
+        lastUpdated: '2024-01-12',
+        version: '3.2.1',
+        tags: ['inspector', 'serialization', 'editor', 'attributes'],
+        isOwned: false,
+        renderPipelines: ['builtin', 'urp', 'hdrp'],
+        url: 'https://assetstore.unity.com/',
+    },
+];
+const UnityAssetStoreBrowser = forwardRef(({ theme: themeOverride, onDownload, onPurchase, className, style }, ref) => {
+    const [state, dispatch] = useReducer(storeReducer, {
+        ...INITIAL_STATE,
+        results: DEMO_ASSETS,
+        totalResults: DEMO_ASSETS.length,
+    });
+    const theme = useMemo(() => ({ ...DEFAULT_THEME, ...themeOverride }), [themeOverride]);
+    // Search
+    const search = useCallback(async () => {
+        dispatch({ type: 'SET_LOADING', loading: true });
+        dispatch({ type: 'SET_ERROR', error: null });
+        try {
+            // Simulate API call
+            await new Promise((resolve) => setTimeout(resolve, 500));
+            // Filter demo assets
+            let filtered = [...DEMO_ASSETS];
+            if (state.query.query) {
+                const q = state.query.query.toLowerCase();
+                filtered = filtered.filter((a) => a.name.toLowerCase().includes(q) ||
+                    a.publisher.toLowerCase().includes(q) ||
+                    a.tags.some((t) => t.toLowerCase().includes(q)));
+            }
+            if (state.query.category !== 'all') {
+                filtered = filtered.filter((a) => a.category === state.query.category);
+            }
+            if (state.query.pricing === 'free') {
+                filtered = filtered.filter((a) => a.isFree);
+            }
+            else if (state.query.pricing === 'paid') {
+                filtered = filtered.filter((a) => !a.isFree);
+            }
+            else if (state.query.pricing === 'sale') {
+                filtered = filtered.filter((a) => a.originalPrice !== undefined);
+            }
+            if (state.myAssets) {
+                filtered = filtered.filter((a) => a.isOwned);
+            }
+            dispatch({ type: 'SET_RESULTS', results: filtered, total: filtered.length });
+        }
+        catch (error) {
+            dispatch({ type: 'SET_ERROR', error: String(error) });
+        }
+        finally {
+            dispatch({ type: 'SET_LOADING', loading: false });
+        }
+    }, [state.query, state.myAssets]);
+    // Download asset
+    const downloadAsset = useCallback(async (id) => {
+        dispatch({ type: 'SET_DOWNLOAD_PROGRESS', id, progress: 0 });
+        try {
+            // Simulate download
+            for (let i = 1; i <= 10; i++) {
+                await new Promise((resolve) => setTimeout(resolve, 200));
+                dispatch({ type: 'SET_DOWNLOAD_PROGRESS', id, progress: i * 10 });
+            }
+            if (onDownload) {
+                await onDownload(id);
+            }
+        }
+        finally {
+            dispatch({ type: 'CLEAR_DOWNLOAD', id });
+        }
+    }, [onDownload]);
+    // Open in browser
+    const openInBrowser = useCallback((asset) => {
+        window.open(asset.url, '_blank');
+    }, []);
+    // Imperative handle
+    useImperativeHandle(ref, () => ({
+        search: async (query) => {
+            if (query !== undefined) {
+                dispatch({ type: 'SET_QUERY', query: { query } });
+            }
+            await search();
+        },
+        getCart: () => [...state.cart],
+        clearCart: () => dispatch({ type: 'CLEAR_CART' }),
+    }), [search, state.cart]);
+    const ctxValue = useMemo(() => ({
+        state,
+        dispatch,
+        theme,
+        search,
+        downloadAsset,
+        openInBrowser,
+    }), [state, theme, search, downloadAsset, openInBrowser]);
+    return (jsx(StoreContext.Provider, { value: ctxValue, children: jsxs("div", { className: `unity-asset-store-browser ${className ?? ''}`, style: {
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                height: '100%',
+                backgroundColor: theme.background,
+                fontFamily: 'system-ui, sans-serif',
+                overflow: 'hidden',
+                ...style,
+            }, children: [jsx(SearchHeader, {}), jsx("div", { style: { flex: 1, overflow: 'auto' }, children: jsx(AssetGrid, {}) }), jsx(AssetDetailModal, {})] }) }));
+});
+UnityAssetStoreBrowser.displayName = 'UnityAssetStoreBrowser';
+
+export { UnityAssetStoreBrowser };
+//# sourceMappingURL=UnityAssetStoreBrowser.js.map