@nice2dev/game-engine 1.0.5 → 1.0.10

package/dist/esm/unreal-integration/components/UnrealProjectBrowser.js

@@ -0,0 +1,833 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, forwardRef, useReducer, useMemo, useCallback, useImperativeHandle, useContext } from 'react';
+
+const DEFAULT_THEME = {
+    background: '#1c1c1c',
+    panelBackground: '#242424',
+    headerBackground: '#1a1a1a',
+    itemBackground: 'rgba(255,255,255,0.02)',
+    itemHover: 'rgba(255,255,255,0.05)',
+    itemSelected: 'rgba(0, 150, 255, 0.2)',
+    textPrimary: '#e6e6e6',
+    textSecondary: '#a0a0a0',
+    accent: '#0096ff',
+    success: '#2ea043',
+    warning: '#d29922',
+    danger: '#cf222e',
+    border: 'rgba(255,255,255,0.08)',
+    unrealBlack: '#1c1c1c',
+    blueprintBlue: '#0096ff',
+    cppOrange: '#d97706',
+    contentBrowserGray: '#2d2d2d',
+};
+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_VIEW_MODE':
+            return { ...state, viewMode: action.mode };
+        case 'SET_PREVIEW':
+            return { ...state, previewAsset: action.asset };
+        case 'SET_LIVE_LINK_STATUS':
+            return { ...state, liveLinkStatus: action.status };
+        case 'SET_IMPORTING':
+            return {
+                ...state,
+                importing: action.importing,
+                importProgress: action.progress ?? state.importProgress,
+            };
+        case 'SET_TAB':
+            return { ...state, tab: action.tab };
+        case 'SET_TILE_SIZE':
+            return { ...state, tileSize: action.size };
+        default:
+            return state;
+    }
+}
+const INITIAL_STATE = {
+    projectInfo: null,
+    selectedAssets: new Set(),
+    expandedFolders: new Set(['/Game']),
+    searchQuery: '',
+    filterType: 'all',
+    viewMode: 'tiles',
+    previewAsset: null,
+    liveLinkStatus: {
+        connected: false,
+        playState: 'stopped',
+        compiling: false,
+        hotReloadAvailable: false,
+    },
+    importing: false,
+    importProgress: 0,
+    tab: 'content',
+    tileSize: 'medium',
+};
+const BrowserContext = createContext(null);
+function useBrowser() {
+    const ctx = useContext(BrowserContext);
+    if (!ctx) {
+        throw new Error('useBrowser must be used within UnrealProjectBrowser');
+    }
+    return ctx;
+}
+/* ── Helper Functions ─────────────────────────────────────────── */
+function getAssetIcon(type) {
+    switch (type) {
+        case 'blueprint':
+            return '🔵';
+        case 'level':
+            return '🗺️';
+        case 'material':
+            return '🎨';
+        case 'texture':
+            return '🖼️';
+        case 'mesh':
+            return '🔷';
+        case 'skeletal_mesh':
+            return '🦴';
+        case 'animation':
+            return '🏃';
+        case 'sound':
+            return '🔊';
+        case 'particle':
+            return '✨';
+        case 'widget':
+            return '📱';
+        case 'data_asset':
+            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`;
+}
+function getAssetColor(type, theme) {
+    switch (type) {
+        case 'blueprint':
+            return theme.blueprintBlue;
+        case 'material':
+            return '#4ade80';
+        case 'mesh':
+        case 'skeletal_mesh':
+            return '#c084fc';
+        case 'texture':
+            return '#f59e0b';
+        case 'level':
+            return '#22d3ee';
+        case 'widget':
+            return '#f472b6';
+        default:
+            return theme.textSecondary;
+    }
+}
+/* ── Header Component ─────────────────────────────────────────── */
+const BrowserHeader = () => {
+    const { state, dispatch, theme, connectLiveLink, disconnectLiveLink, triggerHotReload } = 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: theme.unrealBlack,
+                    borderRadius: 4,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: 18,
+                    border: '1px solid rgba(255,255,255,0.1)',
+                }, 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: ["UE ", state.projectInfo.engineVersion, " \u2022 ", state.projectInfo.targetPlatforms.join(', ')] })) : ('Select a .uproject file') })] }), state.liveLinkStatus.connected && state.liveLinkStatus.hotReloadAvailable && (jsx("button", { onClick: triggerHotReload, disabled: state.liveLinkStatus.compiling, style: {
+                    padding: '6px 12px',
+                    fontSize: 11,
+                    backgroundColor: state.liveLinkStatus.compiling ? theme.warning : theme.cppOrange,
+                    border: 'none',
+                    borderRadius: 4,
+                    color: '#fff',
+                    cursor: state.liveLinkStatus.compiling ? 'not-allowed' : 'pointer',
+                }, children: state.liveLinkStatus.compiling ? '⏳ Compiling...' : '🔥 Hot Reload' })), jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '6px 12px',
+                    backgroundColor: state.liveLinkStatus.connected
+                        ? 'rgba(46, 160, 67, 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
+                                ? state.liveLinkStatus.playState !== 'stopped'
+                                    ? theme.warning
+                                    : theme.success
+                                : theme.textSecondary,
+                        } }), jsx("span", { style: { fontSize: 11, color: theme.textPrimary }, children: state.liveLinkStatus.connected
+                            ? state.liveLinkStatus.playState === 'stopped'
+                                ? 'Editor'
+                                : state.liveLinkStatus.playState === 'simulating'
+                                    ? 'Simulating'
+                                    : 'PIE'
+                            : '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 Assets' },
+        { value: 'blueprint', label: 'Blueprints' },
+        { value: 'level', label: 'Levels' },
+        { value: 'material', label: 'Materials' },
+        { value: 'mesh', label: 'Static Meshes' },
+        { value: 'skeletal_mesh', label: 'Skeletal Meshes' },
+        { value: 'texture', label: 'Textures' },
+        { value: 'animation', label: 'Animations' },
+        { value: 'sound', label: 'Sounds' },
+        { value: 'particle', label: 'Particles' },
+        { value: 'widget', label: 'Widgets' },
+    ];
+    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 Content Browser...", 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.3)',
+                        border: `1px solid ${theme.border}`,
+                        borderRadius: 4,
+                        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.3)',
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 4,
+                    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: 4,
+                    overflow: 'hidden',
+                }, children: [jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'tiles' }), style: {
+                            padding: '6px 10px',
+                            fontSize: 12,
+                            backgroundColor: state.viewMode === 'tiles' ? theme.accent : 'transparent',
+                            border: 'none',
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: "\uD83D\uDD32" }), jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'list' }), style: {
+                            padding: '6px 10px',
+                            fontSize: 12,
+                            backgroundColor: state.viewMode === 'list' ? theme.accent : 'transparent',
+                            border: 'none',
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: "\uD83D\uDCCB" }), jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'columns' }), style: {
+                            padding: '6px 10px',
+                            fontSize: 12,
+                            backgroundColor: state.viewMode === 'columns' ? theme.accent : 'transparent',
+                            border: 'none',
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: "\uD83D\uDCD1" })] }), state.viewMode === 'tiles' && (jsxs("select", { value: state.tileSize, onChange: (e) => dispatch({ type: 'SET_TILE_SIZE', size: e.target.value }), style: {
+                    padding: '6px 10px',
+                    fontSize: 12,
+                    backgroundColor: 'rgba(0,0,0,0.3)',
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 4,
+                    color: theme.textPrimary,
+                }, children: [jsx("option", { value: "small", children: "Small" }), jsx("option", { value: "medium", children: "Medium" }), jsx("option", { value: "large", children: "Large" })] })), 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.importing, style: {
+                    padding: '8px 16px',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    backgroundColor: state.selectedAssets.size > 0 && !state.importing ? theme.accent : theme.textSecondary,
+                    border: 'none',
+                    borderRadius: 4,
+                    color: '#fff',
+                    cursor: state.selectedAssets.size > 0 && !state.importing ? 'pointer' : 'not-allowed',
+                    opacity: state.selectedAssets.size > 0 && !state.importing ? 1 : 0.5,
+                }, children: state.importing ? `⏳ ${state.importProgress}%` : '📥 Import Selected' })] }));
+};
+/* ── Tab Bar ─────────────────────────────────────────────────── */
+const TabBar = () => {
+    const { state, dispatch, theme } = useBrowser();
+    const tabs = [
+        { id: 'content', label: 'Content', icon: '📁' },
+        { id: 'levels', label: 'Levels', icon: '🗺️' },
+        { id: 'plugins', label: 'Plugins', icon: '🔌' },
+        { id: 'modules', label: 'Modules', icon: '📦' },
+        { id: 'settings', label: 'Settings', icon: '⚙️' },
+    ];
+    return (jsx("div", { style: {
+            display: 'flex',
+            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 Tile ───────────────────────────────────────────────── */
+const AssetTile = ({ asset, size, }) => {
+    const { state, dispatch, theme } = useBrowser();
+    const isSelected = state.selectedAssets.has(asset.id);
+    const sizeMap = { small: 80, medium: 120, large: 160 };
+    const tileSize = sizeMap[size];
+    return (jsxs("div", { onClick: (e) => dispatch({ type: 'SELECT_ASSET', id: asset.id, additive: e.ctrlKey || e.metaKey }), onDoubleClick: () => dispatch({ type: 'SET_PREVIEW', asset }), style: {
+            width: tileSize,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: 8,
+            backgroundColor: isSelected ? theme.itemSelected : theme.itemBackground,
+            borderRadius: 4,
+            border: `1px solid ${isSelected ? theme.accent : 'transparent'}`,
+            cursor: 'pointer',
+        }, children: [jsxs("div", { style: {
+                    width: tileSize - 16,
+                    height: tileSize - 16,
+                    backgroundColor: 'rgba(0,0,0,0.3)',
+                    borderRadius: 4,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: tileSize > 100 ? 32 : 24,
+                    marginBottom: 8,
+                    position: 'relative',
+                }, children: [asset.thumbnail ? (jsx("div", { style: {
+                            width: '100%',
+                            height: '100%',
+                            backgroundImage: `url(${asset.thumbnail})`,
+                            backgroundSize: 'cover',
+                            backgroundPosition: 'center',
+                            borderRadius: 4,
+                        } })) : (getAssetIcon(asset.type)), jsx("div", { style: {
+                            position: 'absolute',
+                            bottom: 4,
+                            right: 4,
+                            width: 12,
+                            height: 12,
+                            borderRadius: 2,
+                            backgroundColor: getAssetColor(asset.type, theme),
+                        } })] }), jsx("span", { style: {
+                    fontSize: 10,
+                    color: theme.textPrimary,
+                    textAlign: 'center',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    width: '100%',
+                }, children: asset.name })] }));
+};
+/* ── Content Panel ────────────────────────────────────────────── */
+const ContentPanel = () => {
+    const { state, theme } = useBrowser();
+    if (!state.projectInfo) {
+        return (jsx("div", { style: { padding: 20, textAlign: 'center', color: theme.textSecondary }, children: "No project loaded. Select an Unreal project to browse." }));
+    }
+    const filteredAssets = 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;
+    });
+    if (state.viewMode === 'tiles') {
+        return (jsx("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 8,
+                padding: 12,
+                alignContent: 'flex-start',
+            }, children: filteredAssets.map((asset) => (jsx(AssetTile, { asset: asset, size: state.tileSize }, asset.id))) }));
+    }
+    // List view
+    return (jsx("div", { style: { padding: 8 }, children: filteredAssets.map((asset) => {
+            const isSelected = state.selectedAssets.has(asset.id);
+            return jsx(AssetListItem, { asset: asset, isSelected: isSelected }, asset.id);
+        }) }));
+};
+const AssetListItem = ({ asset, isSelected, }) => {
+    const { dispatch, theme } = useBrowser();
+    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: 12,
+            padding: '6px 8px',
+            backgroundColor: isSelected ? theme.itemSelected : 'transparent',
+            borderRadius: 4,
+            cursor: 'pointer',
+        }, children: [jsx("input", { type: "checkbox", checked: isSelected, onChange: () => dispatch({ type: 'SELECT_ASSET', id: asset.id, additive: true }), onClick: (e) => e.stopPropagation() }), jsx("div", { style: {
+                    width: 6,
+                    height: 6,
+                    borderRadius: 2,
+                    backgroundColor: getAssetColor(asset.type, theme),
+                } }), jsx("span", { style: { fontSize: 14 }, children: getAssetIcon(asset.type) }), jsx("span", { style: { flex: 1, fontSize: 12, color: theme.textPrimary }, children: asset.name }), jsx("span", { style: { fontSize: 11, color: theme.textSecondary }, children: asset.className }), jsx("span", { style: { fontSize: 10, color: theme.textSecondary }, children: formatFileSize(asset.size) })] }));
+};
+/* ── Levels Panel ─────────────────────────────────────────────── */
+const LevelsPanel = () => {
+    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: "World Levels" }), state.projectInfo.maps.map((map, i) => (jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '12px',
+                    marginBottom: 4,
+                    backgroundColor: theme.itemBackground,
+                    borderRadius: 4,
+                }, children: [jsx("span", { style: { fontSize: 20 }, children: "\uD83D\uDDFA\uFE0F" }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 13, color: theme.textPrimary, fontWeight: 500 }, children: map.name }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: map.path })] }), map.persistent && (jsx("span", { style: {
+                            padding: '2px 8px',
+                            fontSize: 10,
+                            backgroundColor: theme.accent,
+                            borderRadius: 4,
+                            color: '#fff',
+                        }, children: "Persistent" })), jsx("button", { style: {
+                            padding: '6px 12px',
+                            fontSize: 11,
+                            backgroundColor: theme.success,
+                            border: 'none',
+                            borderRadius: 4,
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: "Open" })] }, i)))] }));
+};
+/* ── Plugins Panel ────────────────────────────────────────────── */
+const PluginsPanel = () => {
+    const { state, theme } = useBrowser();
+    if (!state.projectInfo) {
+        return null;
+    }
+    const groupedPlugins = state.projectInfo.plugins.reduce((acc, plugin) => {
+        const cat = plugin.category || 'Other';
+        if (!acc[cat]) {
+            acc[cat] = [];
+        }
+        acc[cat].push(plugin);
+        return acc;
+    }, {});
+    return (jsxs("div", { style: { padding: 16 }, children: [jsxs("h3", { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: ["Plugins (", state.projectInfo.plugins.length, ")"] }), Object.entries(groupedPlugins).map(([category, plugins]) => (jsxs("div", { style: { marginBottom: 16 }, children: [jsx("div", { style: { fontSize: 12, fontWeight: 600, color: theme.textSecondary, marginBottom: 8 }, children: category }), plugins.map((plugin) => (jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 12,
+                            padding: '10px 12px',
+                            marginBottom: 4,
+                            backgroundColor: theme.itemBackground,
+                            borderRadius: 4,
+                        }, children: [jsx("div", { style: {
+                                    width: 8,
+                                    height: 8,
+                                    borderRadius: '50%',
+                                    backgroundColor: plugin.enabled ? theme.success : theme.textSecondary,
+                                } }), jsx("span", { style: { flex: 1, fontSize: 12, color: theme.textPrimary }, children: plugin.name }), jsx("span", { style: { fontSize: 10, color: theme.textSecondary }, children: plugin.version }), jsx("button", { style: {
+                                    padding: '4px 10px',
+                                    fontSize: 10,
+                                    backgroundColor: plugin.enabled ? theme.success : 'rgba(255,255,255,0.1)',
+                                    border: 'none',
+                                    borderRadius: 4,
+                                    color: '#fff',
+                                    cursor: 'pointer',
+                                }, children: plugin.enabled ? 'Enabled' : 'Disabled' })] }, plugin.name)))] }, category)))] }));
+};
+/* ── Modules Panel ────────────────────────────────────────────── */
+const ModulesPanel = () => {
+    const { state, theme } = useBrowser();
+    if (!state.projectInfo) {
+        return null;
+    }
+    const getModuleTypeColor = (type) => {
+        switch (type) {
+            case 'Runtime':
+                return theme.success;
+            case 'Editor':
+                return theme.accent;
+            case 'Developer':
+                return theme.warning;
+            default:
+                return theme.textSecondary;
+        }
+    };
+    return (jsxs("div", { style: { padding: 16 }, children: [jsxs("h3", { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: ["Code Modules (", state.projectInfo.modules.length, ")"] }), state.projectInfo.modules.map((module) => (jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '12px',
+                    marginBottom: 4,
+                    backgroundColor: theme.itemBackground,
+                    borderRadius: 4,
+                }, children: [jsx("span", { style: { fontSize: 14 }, children: "\uD83D\uDCE6" }), jsx("span", { style: { flex: 1, fontSize: 13, color: theme.textPrimary, fontWeight: 500 }, children: module.name }), jsx("span", { style: {
+                            padding: '2px 8px',
+                            fontSize: 10,
+                            backgroundColor: getModuleTypeColor(module.type),
+                            borderRadius: 4,
+                            color: '#fff',
+                        }, children: module.type }), jsx("span", { style: { fontSize: 10, color: theme.textSecondary }, children: module.loadingPhase })] }, module.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: '10px 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('Engine Version', info.engineVersion), settingRow('Engine Branch', info.engineBranch || 'Release'), settingRow('Target Platforms', info.targetPlatforms.join(', ')), settingRow('Default Map', info.config.defaultMap || 'None'), settingRow('Default Game Mode', info.config.defaultGameMode || 'None'), settingRow('Default Pawn', info.config.defaultPawn || 'None'), settingRow('Total Assets', `${info.assets.length}`), settingRow('Plugins', `${info.plugins.length}`), settingRow('Modules', `${info.modules.length}`)] })] }));
+};
+// Demo project
+const DEMO_PROJECT = {
+    name: 'MyUnrealGame',
+    path: 'C:/Projects/MyUnrealGame',
+    engineVersion: '5.3.2',
+    engineBranch: 'Release',
+    targetPlatforms: ['Windows', 'Linux', 'PS5', 'XSX'],
+    plugins: [
+        { name: 'Paper2D', enabled: true, version: '5.3', category: '2D' },
+        { name: 'Niagara', enabled: true, version: '5.3', category: 'VFX' },
+        { name: 'ControlRig', enabled: true, version: '5.3', category: 'Animation' },
+        { name: 'MetaHuman', enabled: false, version: '5.3', category: 'Characters' },
+        { name: 'OnlineSubsystemSteam', enabled: true, version: '5.3', category: 'Online' },
+    ],
+    modules: [
+        { name: 'MyUnrealGame', type: 'Runtime', loadingPhase: 'Default' },
+        { name: 'MyUnrealGameEditor', type: 'Editor', loadingPhase: 'PostEngineInit' },
+    ],
+    assets: [
+        {
+            id: '1',
+            name: 'BP_Player',
+            path: '/Game/Blueprints/BP_Player',
+            type: 'blueprint',
+            className: 'Character',
+            packagePath: '/Game/Blueprints',
+            size: 125000,
+            lastModified: '2024-01-15',
+            selected: false,
+        },
+        {
+            id: '2',
+            name: 'BP_Enemy',
+            path: '/Game/Blueprints/BP_Enemy',
+            type: 'blueprint',
+            className: 'Character',
+            packagePath: '/Game/Blueprints',
+            size: 89000,
+            lastModified: '2024-01-14',
+            selected: false,
+        },
+        {
+            id: '3',
+            name: 'MainLevel',
+            path: '/Game/Maps/MainLevel',
+            type: 'level',
+            className: 'World',
+            packagePath: '/Game/Maps',
+            size: 2450000,
+            lastModified: '2024-01-13',
+            selected: false,
+        },
+        {
+            id: '4',
+            name: 'M_Standard',
+            path: '/Game/Materials/M_Standard',
+            type: 'material',
+            className: 'Material',
+            packagePath: '/Game/Materials',
+            size: 15000,
+            lastModified: '2024-01-12',
+            selected: false,
+        },
+        {
+            id: '5',
+            name: 'SM_Cube',
+            path: '/Game/Meshes/SM_Cube',
+            type: 'mesh',
+            className: 'StaticMesh',
+            packagePath: '/Game/Meshes',
+            size: 5000,
+            lastModified: '2024-01-11',
+            selected: false,
+        },
+        {
+            id: '6',
+            name: 'SK_Character',
+            path: '/Game/Characters/SK_Character',
+            type: 'skeletal_mesh',
+            className: 'SkeletalMesh',
+            packagePath: '/Game/Characters',
+            size: 1250000,
+            lastModified: '2024-01-10',
+            selected: false,
+        },
+        {
+            id: '7',
+            name: 'T_Ground',
+            path: '/Game/Textures/T_Ground',
+            type: 'texture',
+            className: 'Texture2D',
+            packagePath: '/Game/Textures',
+            size: 4096000,
+            lastModified: '2024-01-09',
+            selected: false,
+        },
+        {
+            id: '8',
+            name: 'NS_Explosion',
+            path: '/Game/VFX/NS_Explosion',
+            type: 'particle',
+            className: 'NiagaraSystem',
+            packagePath: '/Game/VFX',
+            size: 45000,
+            lastModified: '2024-01-08',
+            selected: false,
+        },
+        {
+            id: '9',
+            name: 'WBP_HUD',
+            path: '/Game/UI/WBP_HUD',
+            type: 'widget',
+            className: 'WidgetBlueprint',
+            packagePath: '/Game/UI',
+            size: 35000,
+            lastModified: '2024-01-07',
+            selected: false,
+        },
+    ],
+    contentFolder: {
+        path: '/Game',
+        name: 'Game',
+        expanded: true,
+        children: [
+            { path: '/Game/Blueprints', name: 'Blueprints', expanded: false, children: [] },
+            { path: '/Game/Maps', name: 'Maps', expanded: false, children: [] },
+            { path: '/Game/Materials', name: 'Materials', expanded: false, children: [] },
+            { path: '/Game/Meshes', name: 'Meshes', expanded: false, children: [] },
+            { path: '/Game/Characters', name: 'Characters', expanded: false, children: [] },
+            { path: '/Game/Textures', name: 'Textures', expanded: false, children: [] },
+            { path: '/Game/VFX', name: 'VFX', expanded: false, children: [] },
+            { path: '/Game/UI', name: 'UI', expanded: false, children: [] },
+        ],
+    },
+    maps: [
+        { name: 'MainLevel', path: '/Game/Maps/MainLevel', persistent: true },
+        { name: 'Level_01', path: '/Game/Maps/Level_01', persistent: false },
+        { name: 'Level_02', path: '/Game/Maps/Level_02', persistent: false },
+    ],
+    config: {
+        defaultMap: '/Game/Maps/MainLevel',
+        defaultGameMode: '/Game/Blueprints/BP_GameMode',
+        defaultPawn: '/Game/Blueprints/BP_Player',
+    },
+};
+const UnrealProjectBrowser = forwardRef(({ projectPath, theme: themeOverride, onProjectLoad, onImport, onLiveLinkConnect, onLiveLinkDisconnect, onHotReload, 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_IMPORTING', importing: true, progress: 0 });
+        try {
+            for (let i = 0; i < selectedAssets.length; i++) {
+                dispatch({
+                    type: 'SET_IMPORTING',
+                    importing: true,
+                    progress: Math.round(((i + 1) / selectedAssets.length) * 100),
+                });
+                await new Promise((resolve) => setTimeout(resolve, 200));
+            }
+            if (onImport) {
+                await onImport(selectedAssets);
+            }
+            dispatch({ type: 'DESELECT_ALL' });
+        }
+        finally {
+            dispatch({ type: 'SET_IMPORTING', importing: false });
+        }
+    }, [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,
+                    engineVersion: '5.3.2',
+                    projectName: 'MyUnrealGame',
+                    playState: 'stopped',
+                    compiling: false,
+                    hotReloadAvailable: true,
+                },
+            });
+        }
+    }, [onLiveLinkConnect]);
+    const disconnectLiveLink = useCallback(() => {
+        onLiveLinkDisconnect?.();
+        dispatch({
+            type: 'SET_LIVE_LINK_STATUS',
+            status: {
+                connected: false,
+                playState: 'stopped',
+                compiling: false,
+                hotReloadAvailable: false,
+            },
+        });
+    }, [onLiveLinkDisconnect]);
+    // Hot Reload
+    const triggerHotReload = useCallback(async () => {
+        dispatch({
+            type: 'SET_LIVE_LINK_STATUS',
+            status: { ...state.liveLinkStatus, compiling: true },
+        });
+        try {
+            if (onHotReload) {
+                await onHotReload();
+            }
+            else {
+                await new Promise((resolve) => setTimeout(resolve, 2000));
+            }
+            dispatch({
+                type: 'SET_LIVE_LINK_STATUS',
+                status: {
+                    ...state.liveLinkStatus,
+                    compiling: false,
+                    lastHotReload: new Date().toISOString(),
+                },
+            });
+        }
+        catch (error) {
+            dispatch({
+                type: 'SET_LIVE_LINK_STATUS',
+                status: { ...state.liveLinkStatus, compiling: false },
+            });
+        }
+    }, [state.liveLinkStatus, onHotReload]);
+    // Imperative handle
+    useImperativeHandle(ref, () => ({
+        loadProject: async (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,
+        triggerHotReload,
+    }), [
+        state.projectInfo,
+        state.selectedAssets,
+        importSelectedAssets,
+        triggerHotReload,
+        onProjectLoad,
+    ]);
+    const ctxValue = useMemo(() => ({
+        state,
+        dispatch,
+        theme,
+        importSelectedAssets,
+        connectLiveLink,
+        disconnectLiveLink,
+        triggerHotReload,
+    }), [state, theme, importSelectedAssets, connectLiveLink, disconnectLiveLink, triggerHotReload]);
+    return (jsx(BrowserContext.Provider, { value: ctxValue, children: jsxs("div", { className: `unreal-project-browser ${className ?? ''}`, style: {
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                height: '100%',
+                backgroundColor: theme.background,
+                fontFamily: 'system-ui, sans-serif',
+                overflow: 'hidden',
+                ...style,
+            }, children: [jsx(BrowserHeader, {}), jsx(BrowserToolbar, {}), jsx(TabBar, {}), jsxs("div", { style: { flex: 1, overflow: 'auto' }, children: [state.tab === 'content' && jsx(ContentPanel, {}), state.tab === 'levels' && jsx(LevelsPanel, {}), state.tab === 'plugins' && jsx(PluginsPanel, {}), state.tab === 'modules' && jsx(ModulesPanel, {}), state.tab === 'settings' && jsx(SettingsPanel, {})] })] }) }));
+});
+UnrealProjectBrowser.displayName = 'UnrealProjectBrowser';
+
+export { UnrealProjectBrowser };
+//# sourceMappingURL=UnrealProjectBrowser.js.map