@nice2dev/game-engine 1.0.5 → 1.0.11

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

@@ -0,0 +1,831 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, forwardRef, useReducer, useMemo, useCallback, useImperativeHandle, useContext } from 'react';
+
+const DEFAULT_THEME = {
+    background: '#1e1e2e',
+    panelBackground: '#252536',
+    headerBackground: '#1a1a28',
+    itemBackground: 'rgba(255,255,255,0.02)',
+    itemHover: 'rgba(255,255,255,0.05)',
+    itemSelected: 'rgba(99, 102, 241, 0.2)',
+    textPrimary: '#e2e8f0',
+    textSecondary: '#94a3b8',
+    accent: '#6366f1',
+    success: '#22c55e',
+    warning: '#f59e0b',
+    danger: '#ef4444',
+    border: 'rgba(255,255,255,0.1)',
+    folderColor: '#fbbf24',
+    sceneColor: '#3b82f6',
+    prefabColor: '#10b981',
+    materialColor: '#ec4899',
+    scriptColor: '#f97316',
+};
+function browserReducer(state, action) {
+    switch (action.type) {
+        case 'SET_PROJECT':
+            return { ...state, projectInfo: action.info, selectedAssets: new Set() };
+        case 'CLEAR_PROJECT':
+            return { ...state, projectInfo: null, selectedAssets: new Set() };
+        case 'SELECT_ASSET':
+            if (action.additive) {
+                const newSet = new Set(state.selectedAssets);
+                if (newSet.has(action.id)) {
+                    newSet.delete(action.id);
+                }
+                else {
+                    newSet.add(action.id);
+                }
+                return { ...state, selectedAssets: newSet };
+            }
+            return { ...state, selectedAssets: new Set([action.id]) };
+        case 'SELECT_ALL':
+            return {
+                ...state,
+                selectedAssets: new Set(state.projectInfo?.assets.map((a) => a.id) ?? []),
+            };
+        case 'DESELECT_ALL':
+            return { ...state, selectedAssets: new Set() };
+        case 'TOGGLE_FOLDER':
+            const expanded = new Set(state.expandedFolders);
+            if (expanded.has(action.path)) {
+                expanded.delete(action.path);
+            }
+            else {
+                expanded.add(action.path);
+            }
+            return { ...state, expandedFolders: expanded };
+        case 'SET_SEARCH':
+            return { ...state, searchQuery: action.query };
+        case 'SET_FILTER':
+            return { ...state, filterType: action.filter };
+        case 'SET_SORT':
+            return { ...state, sortBy: action.by, sortOrder: action.order ?? state.sortOrder };
+        case 'SET_VIEW_MODE':
+            return { ...state, viewMode: action.mode };
+        case 'SET_PREVIEW':
+            return { ...state, previewAsset: action.asset };
+        case 'SET_IMPORT_PROGRESS':
+            return { ...state, importProgress: action.progress };
+        case 'SET_LIVE_LINK_STATUS':
+            return { ...state, liveLinkStatus: action.status };
+        case 'SET_TAB':
+            return { ...state, tab: action.tab };
+        default:
+            return state;
+    }
+}
+const INITIAL_STATE = {
+    projectInfo: null,
+    selectedAssets: new Set(),
+    expandedFolders: new Set(['Assets']),
+    searchQuery: '',
+    filterType: 'all',
+    sortBy: 'name',
+    sortOrder: 'asc',
+    viewMode: 'tree',
+    previewAsset: null,
+    importProgress: null,
+    liveLinkStatus: { connected: false, playMode: 'stopped' },
+    tab: 'assets',
+};
+const BrowserContext = createContext(null);
+function useBrowser() {
+    const ctx = useContext(BrowserContext);
+    if (!ctx) {
+        throw new Error('useBrowser must be used within UnityProjectBrowser');
+    }
+    return ctx;
+}
+/* ── Helper Functions ─────────────────────────────────────────── */
+function getAssetIcon(type) {
+    switch (type) {
+        case 'scene':
+            return '🎬';
+        case 'prefab':
+            return '📦';
+        case 'material':
+            return '🎨';
+        case 'texture':
+            return '🖼️';
+        case 'mesh':
+            return '🔷';
+        case 'animation':
+            return '🏃';
+        case 'script':
+            return '📜';
+        case 'audio':
+            return '🔊';
+        default:
+            return '📄';
+    }
+}
+function formatFileSize(bytes) {
+    if (bytes < 1024) {
+        return `${bytes} B`;
+    }
+    if (bytes < 1024 * 1024) {
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    }
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/* ── Header Component ─────────────────────────────────────────── */
+const BrowserHeader = ({ projectPath }) => {
+    const { state, dispatch, theme, connectLiveLink, disconnectLiveLink } = useBrowser();
+    return (jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12,
+            padding: '12px 16px',
+            backgroundColor: theme.headerBackground,
+            borderBottom: `1px solid ${theme.border}`,
+        }, children: [jsx("div", { style: {
+                    width: 32,
+                    height: 32,
+                    backgroundColor: '#1a1a1a',
+                    borderRadius: 4,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: 20,
+                }, children: "\uD83C\uDFAE" }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: state.projectInfo?.name ?? 'No Project Loaded' }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: state.projectInfo ? (jsxs(Fragment, { children: ["Unity ", state.projectInfo.unityVersion, " \u2022", ' ', state.projectInfo.renderPipeline.toUpperCase()] })) : ((projectPath ?? 'Select a Unity project folder')) })] }), jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '6px 12px',
+                    backgroundColor: state.liveLinkStatus.connected
+                        ? 'rgba(34, 197, 94, 0.1)'
+                        : 'rgba(0,0,0,0.2)',
+                    borderRadius: 20,
+                    border: `1px solid ${state.liveLinkStatus.connected ? theme.success : theme.border}`,
+                }, children: [jsx("div", { style: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            backgroundColor: state.liveLinkStatus.connected ? theme.success : theme.textSecondary,
+                        } }), jsx("span", { style: { fontSize: 11, color: theme.textPrimary }, children: state.liveLinkStatus.connected ? 'Live Link' : 'Disconnected' }), jsx("button", { onClick: () => state.liveLinkStatus.connected ? disconnectLiveLink() : connectLiveLink(), style: {
+                            padding: '2px 8px',
+                            fontSize: 10,
+                            backgroundColor: theme.accent,
+                            border: 'none',
+                            borderRadius: 4,
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: state.liveLinkStatus.connected ? 'Disconnect' : 'Connect' })] })] }));
+};
+/* ── Toolbar Component ────────────────────────────────────────── */
+const BrowserToolbar = () => {
+    const { state, dispatch, theme, importSelectedAssets } = useBrowser();
+    const filters = [
+        { value: 'all', label: 'All' },
+        { value: 'scene', label: 'Scenes' },
+        { value: 'prefab', label: 'Prefabs' },
+        { value: 'material', label: 'Materials' },
+        { value: 'mesh', label: 'Meshes' },
+        { value: 'texture', label: 'Textures' },
+        { value: 'animation', label: 'Animations' },
+        { value: 'script', label: 'Scripts' },
+        { value: 'audio', label: 'Audio' },
+    ];
+    return (jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: '8px 16px',
+            backgroundColor: theme.panelBackground,
+            borderBottom: `1px solid ${theme.border}`,
+        }, children: [jsx("div", { style: { flex: 1, maxWidth: 300 }, children: jsx("input", { type: "text", placeholder: "Search assets...", value: state.searchQuery, onChange: (e) => dispatch({ type: 'SET_SEARCH', query: e.target.value }), style: {
+                        width: '100%',
+                        padding: '6px 12px',
+                        fontSize: 12,
+                        backgroundColor: 'rgba(0,0,0,0.2)',
+                        border: `1px solid ${theme.border}`,
+                        borderRadius: 6,
+                        color: theme.textPrimary,
+                        outline: 'none',
+                    } }) }), jsx("select", { value: state.filterType, onChange: (e) => dispatch({ type: 'SET_FILTER', filter: e.target.value }), style: {
+                    padding: '6px 10px',
+                    fontSize: 12,
+                    backgroundColor: 'rgba(0,0,0,0.2)',
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 6,
+                    color: theme.textPrimary,
+                }, children: filters.map((f) => (jsx("option", { value: f.value, children: f.label }, f.value))) }), jsxs("div", { style: {
+                    display: 'flex',
+                    backgroundColor: 'rgba(0,0,0,0.2)',
+                    borderRadius: 6,
+                    overflow: 'hidden',
+                }, children: [jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'tree' }), style: {
+                            padding: '6px 10px',
+                            fontSize: 12,
+                            backgroundColor: state.viewMode === 'tree' ? theme.accent : 'transparent',
+                            border: 'none',
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: "\uD83D\uDCD1" }), jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'grid' }), style: {
+                            padding: '6px 10px',
+                            fontSize: 12,
+                            backgroundColor: state.viewMode === 'grid' ? theme.accent : 'transparent',
+                            border: 'none',
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: "\uD83D\uDD32" })] }), jsx("div", { style: { flex: 1 } }), jsxs("span", { style: { fontSize: 11, color: theme.textSecondary }, children: [state.selectedAssets.size, " selected"] }), jsx("button", { onClick: importSelectedAssets, disabled: state.selectedAssets.size === 0 || state.importProgress !== null, style: {
+                    padding: '8px 16px',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    backgroundColor: state.selectedAssets.size > 0 && !state.importProgress
+                        ? theme.accent
+                        : theme.textSecondary,
+                    border: 'none',
+                    borderRadius: 6,
+                    color: '#fff',
+                    cursor: state.selectedAssets.size > 0 && !state.importProgress ? 'pointer' : 'not-allowed',
+                    opacity: state.selectedAssets.size > 0 && !state.importProgress ? 1 : 0.5,
+                }, children: state.importProgress ? '⏳ Importing...' : '📥 Import Selected' })] }));
+};
+/* ── Tab Bar Component ────────────────────────────────────────── */
+const TabBar = () => {
+    const { state, dispatch, theme } = useBrowser();
+    const tabs = [
+        { id: 'assets', label: 'Assets', icon: '📁' },
+        { id: 'scenes', label: 'Scenes', icon: '🎬' },
+        { id: 'packages', label: 'Packages', icon: '📦' },
+        { id: 'settings', label: 'Settings', icon: '⚙️' },
+    ];
+    return (jsx("div", { style: {
+            display: 'flex',
+            gap: 0,
+            backgroundColor: theme.panelBackground,
+            borderBottom: `1px solid ${theme.border}`,
+        }, children: tabs.map((tab) => (jsxs("button", { onClick: () => dispatch({ type: 'SET_TAB', tab: tab.id }), style: {
+                flex: 1,
+                padding: '10px 16px',
+                fontSize: 12,
+                backgroundColor: state.tab === tab.id ? theme.background : 'transparent',
+                border: 'none',
+                borderBottom: state.tab === tab.id ? `2px solid ${theme.accent}` : '2px solid transparent',
+                color: state.tab === tab.id ? theme.textPrimary : theme.textSecondary,
+                cursor: 'pointer',
+            }, children: [tab.icon, " ", tab.label] }, tab.id))) }));
+};
+/* ── Asset Tree View ──────────────────────────────────────────── */
+const AssetTreeItem = ({ asset, indent }) => {
+    const { state, dispatch, theme } = useBrowser();
+    const isSelected = state.selectedAssets.has(asset.id);
+    return (jsxs("div", { onClick: (e) => dispatch({ type: 'SELECT_ASSET', id: asset.id, additive: e.ctrlKey || e.metaKey }), onDoubleClick: () => dispatch({ type: 'SET_PREVIEW', asset }), style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: '4px 8px',
+            paddingLeft: indent * 16 + 8,
+            backgroundColor: isSelected ? theme.itemSelected : 'transparent',
+            cursor: 'pointer',
+        }, children: [jsx("input", { type: "checkbox", checked: isSelected, onChange: () => dispatch({ type: 'SELECT_ASSET', id: asset.id, additive: true }), onClick: (e) => e.stopPropagation() }), jsx("span", { style: { fontSize: 14 }, children: getAssetIcon(asset.type) }), jsx("span", { style: {
+                    flex: 1,
+                    fontSize: 12,
+                    color: isSelected ? theme.textPrimary : theme.textSecondary,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, children: asset.name }), jsx("span", { style: { fontSize: 10, color: theme.textSecondary }, children: formatFileSize(asset.size) })] }));
+};
+const FolderTreeItem = ({ folder, indent }) => {
+    const { state, dispatch, theme } = useBrowser();
+    const isExpanded = state.expandedFolders.has(folder.path);
+    const filteredChildren = useMemo(() => {
+        return folder.children.filter((child) => {
+            if ('children' in child) {
+                return true;
+            } // folder
+            const asset = child;
+            if (state.filterType !== 'all' && asset.type !== state.filterType) {
+                return false;
+            }
+            if (state.searchQuery) {
+                return asset.name.toLowerCase().includes(state.searchQuery.toLowerCase());
+            }
+            return true;
+        });
+    }, [folder.children, state.filterType, state.searchQuery]);
+    if (filteredChildren.length === 0 && state.searchQuery) {
+        return null;
+    }
+    return (jsxs("div", { children: [jsxs("div", { onClick: () => dispatch({ type: 'TOGGLE_FOLDER', path: folder.path }), style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '4px 8px',
+                    paddingLeft: indent * 16 + 8,
+                    cursor: 'pointer',
+                }, children: [jsx("span", { style: { fontSize: 10, color: theme.textSecondary }, children: isExpanded ? '▼' : '▶' }), jsx("span", { style: { fontSize: 14, color: theme.folderColor }, children: "\uD83D\uDCC1" }), jsx("span", { style: { fontSize: 12, color: theme.textPrimary, fontWeight: 500 }, children: folder.name }), jsxs("span", { style: { fontSize: 10, color: theme.textSecondary }, children: ["(", filteredChildren.length, ")"] })] }), isExpanded &&
+                filteredChildren.map((child, i) => 'children' in child ? (jsx(FolderTreeItem, { folder: child, indent: indent + 1 }, child.path)) : (jsx(AssetTreeItem, { asset: child, indent: indent + 1 }, child.id)))] }));
+};
+/* ── Asset Grid View ──────────────────────────────────────────── */
+const AssetGridView = () => {
+    const { state, dispatch, theme } = useBrowser();
+    const filteredAssets = useMemo(() => {
+        if (!state.projectInfo) {
+            return [];
+        }
+        return state.projectInfo.assets.filter((asset) => {
+            if (state.filterType !== 'all' && asset.type !== state.filterType) {
+                return false;
+            }
+            if (state.searchQuery) {
+                return asset.name.toLowerCase().includes(state.searchQuery.toLowerCase());
+            }
+            return true;
+        });
+    }, [state.projectInfo, state.filterType, state.searchQuery]);
+    return (jsx("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+            gap: 12,
+            padding: 12,
+        }, children: filteredAssets.map((asset) => {
+            const isSelected = state.selectedAssets.has(asset.id);
+            return (jsxs("div", { onClick: (e) => dispatch({ type: 'SELECT_ASSET', id: asset.id, additive: e.ctrlKey || e.metaKey }), onDoubleClick: () => dispatch({ type: 'SET_PREVIEW', asset }), style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    padding: 12,
+                    backgroundColor: isSelected ? theme.itemSelected : theme.itemBackground,
+                    borderRadius: 8,
+                    border: `1px solid ${isSelected ? theme.accent : theme.border}`,
+                    cursor: 'pointer',
+                }, children: [jsx("div", { style: {
+                            width: 48,
+                            height: 48,
+                            backgroundColor: 'rgba(0,0,0,0.2)',
+                            borderRadius: 8,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: 24,
+                            marginBottom: 8,
+                        }, children: asset.thumbnail ? (jsx("img", { src: asset.thumbnail, alt: asset.name, style: { width: '100%', height: '100%', objectFit: 'cover', borderRadius: 8 } })) : (getAssetIcon(asset.type)) }), jsx("span", { style: {
+                            fontSize: 11,
+                            color: theme.textPrimary,
+                            textAlign: 'center',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            width: '100%',
+                        }, children: asset.name }), jsx("span", { style: { fontSize: 9, color: theme.textSecondary }, children: formatFileSize(asset.size) })] }, asset.id));
+        }) }));
+};
+/* ── Scenes Panel ─────────────────────────────────────────────── */
+const ScenesPanel = () => {
+    const { state, theme } = useBrowser();
+    if (!state.projectInfo) {
+        return null;
+    }
+    return (jsxs("div", { style: { padding: 16 }, children: [jsx("h3", { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: "Build Settings - Scenes" }), state.projectInfo.scenes.map((scene, i) => (jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '8px 12px',
+                    marginBottom: 4,
+                    backgroundColor: theme.itemBackground,
+                    borderRadius: 6,
+                }, children: [jsx("input", { type: "checkbox", checked: scene.enabled, readOnly: true }), jsx("span", { style: { fontSize: 13, color: theme.textPrimary, flex: 1 }, children: scene.path }), jsxs("span", { style: { fontSize: 11, color: theme.textSecondary }, children: ["Index: ", i] })] }, scene.path)))] }));
+};
+/* ── Packages Panel ───────────────────────────────────────────── */
+const PackagesPanel = () => {
+    const { state, theme } = useBrowser();
+    if (!state.projectInfo) {
+        return null;
+    }
+    const getSourceBadge = (source) => {
+        const colors = {
+            registry: theme.accent,
+            git: '#f97316',
+            local: theme.warning,
+            embedded: theme.success,
+        };
+        return colors[source] ?? theme.textSecondary;
+    };
+    return (jsxs("div", { style: { padding: 16 }, children: [jsxs("h3", { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: ["Packages (", state.projectInfo.packages.length, ")"] }), state.projectInfo.packages.map((pkg) => (jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '10px 12px',
+                    marginBottom: 4,
+                    backgroundColor: theme.itemBackground,
+                    borderRadius: 6,
+                }, children: [jsx("span", { style: { fontSize: 14 }, children: "\uD83D\uDCE6" }), jsx("span", { style: { fontSize: 12, color: theme.textPrimary, flex: 1 }, children: pkg.name }), jsx("span", { style: {
+                            padding: '2px 8px',
+                            fontSize: 10,
+                            backgroundColor: getSourceBadge(pkg.source),
+                            borderRadius: 10,
+                            color: '#fff',
+                        }, children: pkg.source }), jsx("span", { style: { fontSize: 11, color: theme.textSecondary }, children: pkg.version })] }, pkg.name)))] }));
+};
+/* ── Settings Panel ───────────────────────────────────────────── */
+const SettingsPanel = () => {
+    const { state, theme } = useBrowser();
+    if (!state.projectInfo) {
+        return null;
+    }
+    const info = state.projectInfo;
+    const settingRow = (label, value) => (jsxs("div", { style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            padding: '8px 0',
+            borderBottom: `1px solid ${theme.border}`,
+        }, children: [jsx("span", { style: { fontSize: 12, color: theme.textSecondary }, children: label }), jsx("span", { style: { fontSize: 12, color: theme.textPrimary, fontWeight: 500 }, children: value })] }));
+    return (jsxs("div", { style: { padding: 16 }, children: [jsx("h3", { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: "Project Settings" }), jsxs("div", { style: { backgroundColor: theme.itemBackground, borderRadius: 8, padding: 12 }, children: [settingRow('Project Name', info.name), settingRow('Unity Version', info.unityVersion), settingRow('Render Pipeline', info.renderPipeline.toUpperCase()), settingRow('Scripting Backend', info.scriptingBackend), settingRow('API Compatibility', info.apiCompatibility.replace(/_/g, ' ')), settingRow('Total Assets', `${info.assets.length}`), settingRow('Scenes', `${info.scenes.length}`), settingRow('Packages', `${info.packages.length}`)] })] }));
+};
+/* ── Preview Panel ────────────────────────────────────────────── */
+const PreviewPanel = () => {
+    const { state, dispatch, theme } = useBrowser();
+    if (!state.previewAsset) {
+        return null;
+    }
+    const asset = state.previewAsset;
+    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,
+        }, onClick: () => dispatch({ type: 'SET_PREVIEW', asset: null }), children: jsxs("div", { onClick: (e) => e.stopPropagation(), style: {
+                width: '80%',
+                maxWidth: 800,
+                backgroundColor: theme.panelBackground,
+                borderRadius: 12,
+                overflow: 'hidden',
+            }, children: [jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 12,
+                        padding: 16,
+                        borderBottom: `1px solid ${theme.border}`,
+                    }, children: [jsx("span", { style: { fontSize: 24 }, children: getAssetIcon(asset.type) }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 16, fontWeight: 600, color: theme.textPrimary }, children: asset.name }), jsx("div", { style: { fontSize: 12, color: theme.textSecondary }, children: asset.path })] }), jsx("button", { onClick: () => dispatch({ type: 'SET_PREVIEW', asset: null }), style: {
+                                padding: '4px 8px',
+                                fontSize: 14,
+                                backgroundColor: 'transparent',
+                                border: 'none',
+                                color: theme.textSecondary,
+                                cursor: 'pointer',
+                            }, children: "\u2715" })] }), jsxs("div", { style: { padding: 16 }, children: [jsx("div", { style: {
+                                width: '100%',
+                                height: 300,
+                                backgroundColor: 'rgba(0,0,0,0.3)',
+                                borderRadius: 8,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontSize: 48,
+                                marginBottom: 16,
+                            }, children: asset.thumbnail ? (jsx("img", { src: asset.thumbnail, alt: asset.name, style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' } })) : (getAssetIcon(asset.type)) }), jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }, children: [jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Type" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary }, children: asset.type })] }), jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Size" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary }, children: formatFileSize(asset.size) })] }), jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "GUID" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary, fontFamily: 'monospace' }, children: asset.guid })] }), jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Last Modified" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary }, children: asset.lastModified })] })] }), asset.dependencies && asset.dependencies.length > 0 && (jsxs("div", { style: { marginTop: 16 }, children: [jsxs("div", { style: { fontSize: 12, fontWeight: 500, color: theme.textPrimary, marginBottom: 8 }, children: ["Dependencies (", asset.dependencies.length, ")"] }), jsx("div", { style: { maxHeight: 100, overflow: 'auto' }, children: asset.dependencies.map((dep, i) => (jsx("div", { style: {
+                                            padding: '4px 8px',
+                                            fontSize: 11,
+                                            color: theme.textSecondary,
+                                            backgroundColor: 'rgba(0,0,0,0.2)',
+                                            borderRadius: 4,
+                                            marginBottom: 4,
+                                        }, children: dep }, i))) })] }))] }), jsx("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        gap: 8,
+                        padding: 16,
+                        borderTop: `1px solid ${theme.border}`,
+                    }, children: jsx("button", { onClick: () => {
+                            dispatch({ type: 'SELECT_ASSET', id: asset.id });
+                            dispatch({ type: 'SET_PREVIEW', asset: null });
+                        }, style: {
+                            padding: '8px 16px',
+                            fontSize: 12,
+                            backgroundColor: theme.accent,
+                            border: 'none',
+                            borderRadius: 6,
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: "Select for Import" }) })] }) }));
+};
+/* ── Import Progress Overlay ──────────────────────────────────── */
+const ImportProgressOverlay = () => {
+    const { state, theme } = useBrowser();
+    if (!state.importProgress) {
+        return null;
+    }
+    const progress = state.importProgress;
+    const percent = progress.total > 0 ? Math.round((progress.current / progress.total) * 100) : 0;
+    return (jsx("div", { style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0,0,0,0.7)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 999,
+        }, children: jsxs("div", { style: {
+                width: 400,
+                backgroundColor: theme.panelBackground,
+                borderRadius: 12,
+                padding: 24,
+            }, children: [jsx("h3", { style: { margin: '0 0 16px', fontSize: 16, fontWeight: 600, color: theme.textPrimary }, children: progress.phase === 'complete' ? '✅ Import Complete' : '📥 Importing Assets' }), jsx("div", { style: { fontSize: 12, color: theme.textSecondary, marginBottom: 8 }, children: progress.message }), progress.currentAsset && (jsx("div", { style: {
+                        fontSize: 11,
+                        color: theme.textPrimary,
+                        backgroundColor: 'rgba(0,0,0,0.2)',
+                        padding: '6px 10px',
+                        borderRadius: 4,
+                        marginBottom: 12,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                    }, children: progress.currentAsset })), jsx("div", { style: {
+                        width: '100%',
+                        height: 6,
+                        backgroundColor: 'rgba(0,0,0,0.3)',
+                        borderRadius: 3,
+                        overflow: 'hidden',
+                    }, children: jsx("div", { style: {
+                            width: `${percent}%`,
+                            height: '100%',
+                            backgroundColor: progress.phase === 'error' ? theme.danger : theme.accent,
+                            transition: 'width 0.2s ease',
+                        } }) }), jsxs("div", { style: { fontSize: 11, color: theme.textSecondary, marginTop: 8, textAlign: 'center' }, children: [progress.current, " / ", progress.total, " (", percent, "%)"] })] }) }));
+};
+// Default demo project
+const DEMO_PROJECT = {
+    name: 'MyUnityProject',
+    path: 'C:/Projects/MyUnityProject',
+    unityVersion: '2022.3.10f1',
+    renderPipeline: 'urp',
+    scriptingBackend: 'il2cpp',
+    apiCompatibility: 'NET_Standard_2_1',
+    assets: [
+        {
+            id: '1',
+            name: 'MainScene.unity',
+            path: 'Assets/Scenes/MainScene.unity',
+            type: 'scene',
+            guid: 'a1b2c3d4',
+            size: 245000,
+            lastModified: '2024-01-15',
+            selected: false,
+        },
+        {
+            id: '2',
+            name: 'Player.prefab',
+            path: 'Assets/Prefabs/Player.prefab',
+            type: 'prefab',
+            guid: 'e5f6g7h8',
+            size: 12000,
+            lastModified: '2024-01-14',
+            selected: false,
+        },
+        {
+            id: '3',
+            name: 'Enemy.prefab',
+            path: 'Assets/Prefabs/Enemy.prefab',
+            type: 'prefab',
+            guid: 'i9j0k1l2',
+            size: 8000,
+            lastModified: '2024-01-13',
+            selected: false,
+        },
+        {
+            id: '4',
+            name: 'StandardMaterial.mat',
+            path: 'Assets/Materials/StandardMaterial.mat',
+            type: 'material',
+            guid: 'm3n4o5p6',
+            size: 2000,
+            lastModified: '2024-01-12',
+            selected: false,
+        },
+        {
+            id: '5',
+            name: 'PlayerController.cs',
+            path: 'Assets/Scripts/PlayerController.cs',
+            type: 'script',
+            guid: 'q7r8s9t0',
+            size: 5000,
+            lastModified: '2024-01-11',
+            selected: false,
+        },
+        {
+            id: '6',
+            name: 'hero_texture.png',
+            path: 'Assets/Textures/hero_texture.png',
+            type: 'texture',
+            guid: 'u1v2w3x4',
+            size: 2048000,
+            lastModified: '2024-01-10',
+            selected: false,
+        },
+        {
+            id: '7',
+            name: 'character_mesh.fbx',
+            path: 'Assets/Models/character_mesh.fbx',
+            type: 'mesh',
+            guid: 'y5z6a7b8',
+            size: 856000,
+            lastModified: '2024-01-09',
+            selected: false,
+        },
+        {
+            id: '8',
+            name: 'walk_animation.anim',
+            path: 'Assets/Animations/walk_animation.anim',
+            type: 'animation',
+            guid: 'c9d0e1f2',
+            size: 15000,
+            lastModified: '2024-01-08',
+            selected: false,
+        },
+        {
+            id: '9',
+            name: 'background_music.wav',
+            path: 'Assets/Audio/background_music.wav',
+            type: 'audio',
+            guid: 'g3h4i5j6',
+            size: 5120000,
+            lastModified: '2024-01-07',
+            selected: false,
+        },
+    ],
+    folders: {
+        path: 'Assets',
+        name: 'Assets',
+        expanded: true,
+        children: [
+            {
+                path: 'Assets/Scenes',
+                name: 'Scenes',
+                expanded: false,
+                children: [],
+            },
+            {
+                path: 'Assets/Prefabs',
+                name: 'Prefabs',
+                expanded: false,
+                children: [],
+            },
+            {
+                path: 'Assets/Materials',
+                name: 'Materials',
+                expanded: false,
+                children: [],
+            },
+            {
+                path: 'Assets/Scripts',
+                name: 'Scripts',
+                expanded: false,
+                children: [],
+            },
+        ],
+    },
+    packages: [
+        { name: 'com.unity.render-pipelines.universal', version: '14.0.8', source: 'registry' },
+        { name: 'com.unity.inputsystem', version: '1.7.0', source: 'registry' },
+        { name: 'com.unity.cinemachine', version: '2.9.7', source: 'registry' },
+        { name: 'com.unity.textmeshpro', version: '3.0.6', source: 'registry' },
+    ],
+    scenes: [
+        { path: 'Assets/Scenes/MainScene.unity', enabled: true },
+        { path: 'Assets/Scenes/Level1.unity', enabled: true },
+        { path: 'Assets/Scenes/Level2.unity', enabled: true },
+    ],
+};
+const UnityProjectBrowser = forwardRef(({ projectPath, theme: themeOverride, onProjectLoad, onImport, onLiveLinkConnect, onLiveLinkDisconnect, className, style, }, ref) => {
+    const [state, dispatch] = useReducer(browserReducer, {
+        ...INITIAL_STATE,
+        projectInfo: DEMO_PROJECT,
+    });
+    const theme = useMemo(() => ({ ...DEFAULT_THEME, ...themeOverride }), [themeOverride]);
+    // Import selected assets
+    const importSelectedAssets = useCallback(async () => {
+        if (state.selectedAssets.size === 0 || !state.projectInfo) {
+            return;
+        }
+        const selectedAssets = state.projectInfo.assets.filter((a) => state.selectedAssets.has(a.id));
+        dispatch({
+            type: 'SET_IMPORT_PROGRESS',
+            progress: {
+                phase: 'scanning',
+                current: 0,
+                total: selectedAssets.length,
+                currentAsset: '',
+                message: 'Preparing import...',
+            },
+        });
+        try {
+            for (let i = 0; i < selectedAssets.length; i++) {
+                dispatch({
+                    type: 'SET_IMPORT_PROGRESS',
+                    progress: {
+                        phase: 'importing',
+                        current: i + 1,
+                        total: selectedAssets.length,
+                        currentAsset: selectedAssets[i].path,
+                        message: `Importing asset ${i + 1} of ${selectedAssets.length}`,
+                    },
+                });
+                // Simulate import delay
+                await new Promise((resolve) => setTimeout(resolve, 200));
+            }
+            if (onImport) {
+                await onImport(selectedAssets);
+            }
+            dispatch({
+                type: 'SET_IMPORT_PROGRESS',
+                progress: {
+                    phase: 'complete',
+                    current: selectedAssets.length,
+                    total: selectedAssets.length,
+                    currentAsset: '',
+                    message: 'Import complete!',
+                },
+            });
+            setTimeout(() => {
+                dispatch({ type: 'SET_IMPORT_PROGRESS', progress: null });
+                dispatch({ type: 'DESELECT_ALL' });
+            }, 1500);
+        }
+        catch (error) {
+            dispatch({
+                type: 'SET_IMPORT_PROGRESS',
+                progress: {
+                    phase: 'error',
+                    current: 0,
+                    total: 0,
+                    currentAsset: '',
+                    message: `Import failed: ${error}`,
+                },
+            });
+        }
+    }, [state.selectedAssets, state.projectInfo, onImport]);
+    // Live Link
+    const connectLiveLink = useCallback(async () => {
+        if (onLiveLinkConnect) {
+            const status = await onLiveLinkConnect();
+            dispatch({ type: 'SET_LIVE_LINK_STATUS', status });
+        }
+        else {
+            dispatch({
+                type: 'SET_LIVE_LINK_STATUS',
+                status: {
+                    connected: true,
+                    unityVersion: '2022.3.10f1',
+                    projectName: 'MyUnityProject',
+                    playMode: 'stopped',
+                },
+            });
+        }
+    }, [onLiveLinkConnect]);
+    const disconnectLiveLink = useCallback(() => {
+        onLiveLinkDisconnect?.();
+        dispatch({ type: 'SET_LIVE_LINK_STATUS', status: { connected: false, playMode: 'stopped' } });
+    }, [onLiveLinkDisconnect]);
+    // Imperative handle
+    useImperativeHandle(ref, () => ({
+        loadProject: async (path) => {
+            // In real implementation, would load from path
+            dispatch({ type: 'SET_PROJECT', info: DEMO_PROJECT });
+            onProjectLoad?.(DEMO_PROJECT);
+        },
+        getSelectedAssets: () => {
+            if (!state.projectInfo) {
+                return [];
+            }
+            return state.projectInfo.assets.filter((a) => state.selectedAssets.has(a.id));
+        },
+        importSelected: importSelectedAssets,
+    }), [state.projectInfo, state.selectedAssets, importSelectedAssets, onProjectLoad]);
+    const ctxValue = useMemo(() => ({
+        state,
+        dispatch,
+        theme,
+        importSelectedAssets,
+        connectLiveLink,
+        disconnectLiveLink,
+    }), [state, theme, importSelectedAssets, connectLiveLink, disconnectLiveLink]);
+    return (jsx(BrowserContext.Provider, { value: ctxValue, children: jsxs("div", { className: `unity-project-browser ${className ?? ''}`, style: {
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                height: '100%',
+                backgroundColor: theme.background,
+                fontFamily: 'system-ui, sans-serif',
+                position: 'relative',
+                overflow: 'hidden',
+                ...style,
+            }, children: [jsx(BrowserHeader, { projectPath: projectPath }), jsx(BrowserToolbar, {}), jsx(TabBar, {}), jsxs("div", { style: { flex: 1, overflow: 'auto' }, children: [state.tab === 'assets' &&
+                            (state.viewMode === 'tree' && state.projectInfo ? (jsx("div", { style: { padding: 8 }, children: jsx(FolderTreeItem, { folder: state.projectInfo.folders, indent: 0 }) })) : (jsx(AssetGridView, {}))), state.tab === 'scenes' && jsx(ScenesPanel, {}), state.tab === 'packages' && jsx(PackagesPanel, {}), state.tab === 'settings' && jsx(SettingsPanel, {})] }), jsx(PreviewPanel, {}), jsx(ImportProgressOverlay, {})] }) }));
+});
+UnityProjectBrowser.displayName = 'UnityProjectBrowser';
+
+export { UnityProjectBrowser };
+//# sourceMappingURL=UnityProjectBrowser.js.map