@nice2dev/game-engine 1.0.5 → 1.0.11

package/dist/esm/godot-integration/components/GodotProjectBrowser.js

@@ -0,0 +1,666 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, forwardRef, useReducer, useMemo, useCallback, useImperativeHandle, useContext } from 'react';
+
+const DEFAULT_THEME = {
+    background: '#1d2229',
+    panelBackground: '#252d38',
+    headerBackground: '#1a2028',
+    itemBackground: 'rgba(255,255,255,0.02)',
+    itemHover: 'rgba(255,255,255,0.05)',
+    itemSelected: 'rgba(73, 140, 200, 0.2)',
+    textPrimary: '#e0e6ed',
+    textSecondary: '#8a99a8',
+    accent: '#478cbf',
+    success: '#38b54a',
+    warning: '#e0c138',
+    danger: '#dd5555',
+    border: 'rgba(255,255,255,0.08)',
+    godotBlue: '#478cbf',
+    sceneColor: '#6ccdd8',
+    scriptColor: '#a3d17a',
+    resourceColor: '#c9bc57',
+};
+function browserReducer(state, action) {
+    switch (action.type) {
+        case 'SET_PROJECT':
+            return { ...state, projectInfo: action.info, selectedResources: new Set() };
+        case 'CLEAR_PROJECT':
+            return { ...state, projectInfo: null, selectedResources: new Set() };
+        case 'SELECT_RESOURCE':
+            if (action.additive) {
+                const newSet = new Set(state.selectedResources);
+                if (newSet.has(action.id)) {
+                    newSet.delete(action.id);
+                }
+                else {
+                    newSet.add(action.id);
+                }
+                return { ...state, selectedResources: newSet };
+            }
+            return { ...state, selectedResources: new Set([action.id]) };
+        case 'SELECT_ALL':
+            return {
+                ...state,
+                selectedResources: new Set(state.projectInfo?.resources.map((r) => r.id) ?? []),
+            };
+        case 'DESELECT_ALL':
+            return { ...state, selectedResources: 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, previewResource: action.resource };
+        case 'SET_SYNC_STATUS':
+            return { ...state, syncStatus: action.status };
+        case 'SET_IMPORTING':
+            return {
+                ...state,
+                importing: action.importing,
+                importProgress: action.progress ?? state.importProgress,
+            };
+        case 'SET_TAB':
+            return { ...state, tab: action.tab };
+        default:
+            return state;
+    }
+}
+const INITIAL_STATE = {
+    projectInfo: null,
+    selectedResources: new Set(),
+    expandedFolders: new Set(['res://']),
+    searchQuery: '',
+    filterType: 'all',
+    viewMode: 'tree',
+    previewResource: null,
+    syncStatus: { connected: false, isRunning: false, debuggerConnected: false },
+    importing: false,
+    importProgress: 0,
+    tab: 'files',
+};
+const BrowserContext = createContext(null);
+function useBrowser() {
+    const ctx = useContext(BrowserContext);
+    if (!ctx) {
+        throw new Error('useBrowser must be used within GodotProjectBrowser');
+    }
+    return ctx;
+}
+/* ── Helper Functions ─────────────────────────────────────────── */
+function getResourceIcon(type) {
+    switch (type) {
+        case 'scene':
+            return '🎬';
+        case 'script':
+            return '📜';
+        case 'resource':
+            return '📄';
+        case 'texture':
+            return '🖼️';
+        case 'audio':
+            return '🔊';
+        case 'mesh':
+            return '🔷';
+        case 'material':
+            return '🎨';
+        case 'animation':
+            return '🏃';
+        case 'shader':
+            return '✨';
+        case 'theme':
+            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 = () => {
+    const { state, dispatch, theme, connectSync, disconnectSync } = 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.godotBlue,
+                    borderRadius: 4,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: 18,
+                }, children: "\uD83E\uDD16" }), 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: ["Godot ", state.projectInfo.godotVersion, " \u2022", ' ', state.projectInfo.renderer.replace('_', ' '), state.projectInfo.dotnetEnabled && ' • C#'] })) : ('Select a Godot project.godot file') })] }), jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '6px 12px',
+                    backgroundColor: state.syncStatus.connected
+                        ? 'rgba(56, 181, 74, 0.1)'
+                        : 'rgba(0,0,0,0.2)',
+                    borderRadius: 20,
+                    border: `1px solid ${state.syncStatus.connected ? theme.success : theme.border}`,
+                }, children: [jsx("div", { style: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            backgroundColor: state.syncStatus.connected
+                                ? state.syncStatus.isRunning
+                                    ? theme.warning
+                                    : theme.success
+                                : theme.textSecondary,
+                        } }), jsx("span", { style: { fontSize: 11, color: theme.textPrimary }, children: state.syncStatus.connected
+                            ? state.syncStatus.isRunning
+                                ? 'Running'
+                                : 'Connected'
+                            : 'Disconnected' }), jsx("button", { onClick: () => (state.syncStatus.connected ? disconnectSync() : connectSync()), style: {
+                            padding: '2px 8px',
+                            fontSize: 10,
+                            backgroundColor: theme.accent,
+                            border: 'none',
+                            borderRadius: 4,
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: state.syncStatus.connected ? 'Disconnect' : 'Connect' })] })] }));
+};
+/* ── Toolbar Component ────────────────────────────────────────── */
+const BrowserToolbar = () => {
+    const { state, dispatch, theme, importSelectedResources } = useBrowser();
+    const filters = [
+        { value: 'all', label: 'All' },
+        { value: 'scene', label: 'Scenes' },
+        { value: 'script', label: 'Scripts' },
+        { value: 'resource', label: 'Resources' },
+        { value: 'texture', label: 'Textures' },
+        { value: 'mesh', label: 'Meshes' },
+        { value: 'material', label: 'Materials' },
+        { value: 'shader', label: 'Shaders' },
+        { 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 resources...", 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.selectedResources.size, " selected"] }), jsx("button", { onClick: importSelectedResources, disabled: state.selectedResources.size === 0 || state.importing, style: {
+                    padding: '8px 16px',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    backgroundColor: state.selectedResources.size > 0 && !state.importing
+                        ? theme.accent
+                        : theme.textSecondary,
+                    border: 'none',
+                    borderRadius: 6,
+                    color: '#fff',
+                    cursor: state.selectedResources.size > 0 && !state.importing ? 'pointer' : 'not-allowed',
+                    opacity: state.selectedResources.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: 'files', label: 'Files', icon: '📁' },
+        { id: 'autoloads', label: 'Autoloads', icon: '🚀' },
+        { id: 'plugins', label: 'Plugins', icon: '🔌' },
+        { id: 'exports', label: 'Exports', 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))) }));
+};
+/* ── Resource Tree Item ───────────────────────────────────────── */
+const ResourceTreeItem = ({ resource, indent, }) => {
+    const { state, dispatch, theme } = useBrowser();
+    const isSelected = state.selectedResources.has(resource.id);
+    return (jsxs("div", { onClick: (e) => dispatch({ type: 'SELECT_RESOURCE', id: resource.id, additive: e.ctrlKey || e.metaKey }), onDoubleClick: () => dispatch({ type: 'SET_PREVIEW', resource }), 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_RESOURCE', id: resource.id, additive: true }), onClick: (e) => e.stopPropagation() }), jsx("span", { style: { fontSize: 14 }, children: getResourceIcon(resource.type) }), jsx("span", { style: {
+                    flex: 1,
+                    fontSize: 12,
+                    color: isSelected ? theme.textPrimary : theme.textSecondary,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, children: resource.name }), jsx("span", { style: { fontSize: 10, color: theme.textSecondary }, children: formatFileSize(resource.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;
+            }
+            const resource = child;
+            if (state.filterType !== 'all' && resource.type !== state.filterType) {
+                return false;
+            }
+            if (state.searchQuery) {
+                return resource.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 }, 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(ResourceTreeItem, { resource: child, indent: indent + 1 }, child.id)))] }));
+};
+/* ── Files Panel ──────────────────────────────────────────────── */
+const FilesPanel = () => {
+    const { state } = useBrowser();
+    if (!state.projectInfo) {
+        return (jsx("div", { style: { padding: 20, textAlign: 'center', color: '#8a99a8' }, children: "No project loaded. Select a Godot project to browse." }));
+    }
+    if (state.viewMode === 'tree') {
+        return (jsx("div", { style: { padding: 8 }, children: jsx(FolderTreeItem, { folder: state.projectInfo.rootFolder, indent: 0 }) }));
+    }
+    // Grid view
+    return (jsx("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+            gap: 12,
+            padding: 12,
+        }, children: state.projectInfo.resources
+            .filter((r) => {
+            if (state.filterType !== 'all' && r.type !== state.filterType) {
+                return false;
+            }
+            if (state.searchQuery) {
+                return r.name.toLowerCase().includes(state.searchQuery.toLowerCase());
+            }
+            return true;
+        })
+            .map((resource) => {
+            const isSelected = state.selectedResources.has(resource.id);
+            return jsx(ResourceGridItem, { resource: resource, isSelected: isSelected }, resource.id);
+        }) }));
+};
+const ResourceGridItem = ({ resource, isSelected, }) => {
+    const { dispatch, theme } = useBrowser();
+    return (jsxs("div", { onClick: (e) => dispatch({ type: 'SELECT_RESOURCE', id: resource.id, additive: e.ctrlKey || e.metaKey }), onDoubleClick: () => dispatch({ type: 'SET_PREVIEW', resource }), 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: { fontSize: 32, marginBottom: 8 }, children: getResourceIcon(resource.type) }), jsx("span", { style: {
+                    fontSize: 11,
+                    color: theme.textPrimary,
+                    textAlign: 'center',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    width: '100%',
+                }, children: resource.name }), jsx("span", { style: { fontSize: 9, color: theme.textSecondary }, children: formatFileSize(resource.size) })] }));
+};
+/* ── Autoloads Panel ──────────────────────────────────────────── */
+const AutoloadsPanel = () => {
+    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: "Autoload Scripts (Singletons)" }), state.projectInfo.autoloads.map((autoload) => (jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '10px 12px',
+                    marginBottom: 4,
+                    backgroundColor: theme.itemBackground,
+                    borderRadius: 6,
+                }, children: [jsx("input", { type: "checkbox", checked: autoload.enabled, readOnly: true }), jsx("span", { style: { fontSize: 13, color: theme.textPrimary, fontWeight: 500 }, children: autoload.name }), jsx("span", { style: { fontSize: 11, color: theme.textSecondary, flex: 1 }, children: autoload.path })] }, autoload.name))), state.projectInfo.autoloads.length === 0 && (jsx("div", { style: { color: theme.textSecondary }, children: "No autoloads configured" }))] }));
+};
+/* ── Plugins Panel ────────────────────────────────────────────── */
+const PluginsPanel = () => {
+    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: "Editor Plugins" }), state.projectInfo.plugins.map((plugin) => (jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '10px 12px',
+                    marginBottom: 4,
+                    backgroundColor: theme.itemBackground,
+                    borderRadius: 6,
+                }, children: [jsx("div", { style: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            backgroundColor: plugin.enabled ? theme.success : theme.textSecondary,
+                        } }), jsx("span", { style: { fontSize: 13, color: theme.textPrimary }, children: plugin.name }), jsx("span", { style: {
+                            marginLeft: 'auto',
+                            padding: '2px 8px',
+                            fontSize: 10,
+                            backgroundColor: plugin.enabled ? theme.success : 'rgba(255,255,255,0.1)',
+                            borderRadius: 4,
+                            color: '#fff',
+                        }, children: plugin.enabled ? 'Enabled' : 'Disabled' })] }, plugin.name))), state.projectInfo.plugins.length === 0 && (jsx("div", { style: { color: theme.textSecondary }, children: "No plugins installed" }))] }));
+};
+/* ── Exports Panel ────────────────────────────────────────────── */
+const ExportsPanel = () => {
+    const { state, theme } = useBrowser();
+    if (!state.projectInfo) {
+        return null;
+    }
+    const getPlatformIcon = (platform) => {
+        switch (platform.toLowerCase()) {
+            case 'windows':
+                return '🪟';
+            case 'linux':
+                return '🐧';
+            case 'macos':
+                return '🍎';
+            case 'android':
+                return '🤖';
+            case 'ios':
+                return '📱';
+            case 'web':
+                return '🌐';
+            default:
+                return '📦';
+        }
+    };
+    return (jsxs("div", { style: { padding: 16 }, children: [jsx("h3", { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: "Export Presets" }), state.projectInfo.exportPresets.map((preset, i) => (jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '12px',
+                    marginBottom: 4,
+                    backgroundColor: theme.itemBackground,
+                    borderRadius: 6,
+                }, children: [jsx("span", { style: { fontSize: 20 }, children: getPlatformIcon(preset.platform) }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 13, color: theme.textPrimary, fontWeight: 500 }, children: preset.name }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: preset.platform })] }), jsx("button", { style: {
+                            padding: '6px 12px',
+                            fontSize: 11,
+                            backgroundColor: theme.accent,
+                            border: 'none',
+                            borderRadius: 4,
+                            color: '#fff',
+                            cursor: 'pointer',
+                        }, children: "Export" })] }, i))), state.projectInfo.exportPresets.length === 0 && (jsx("div", { style: { color: theme.textSecondary }, children: "No export presets configured" }))] }));
+};
+// Demo project
+const DEMO_PROJECT = {
+    name: 'MyGodotGame',
+    path: 'C:/Projects/MyGodotGame',
+    godotVersion: '4.2.1',
+    renderer: 'forward_plus',
+    dotnetEnabled: false,
+    features: ['Mobile', '3D', 'Physics'],
+    resources: [
+        {
+            id: '1',
+            name: 'main.tscn',
+            path: 'res://scenes/main.tscn',
+            type: 'scene',
+            size: 12000,
+            lastModified: '2024-01-15',
+            selected: false,
+        },
+        {
+            id: '2',
+            name: 'player.tscn',
+            path: 'res://scenes/player.tscn',
+            type: 'scene',
+            size: 8500,
+            lastModified: '2024-01-14',
+            selected: false,
+        },
+        {
+            id: '3',
+            name: 'player.gd',
+            path: 'res://scripts/player.gd',
+            type: 'script',
+            size: 3200,
+            lastModified: '2024-01-14',
+            selected: false,
+        },
+        {
+            id: '4',
+            name: 'enemy.gd',
+            path: 'res://scripts/enemy.gd',
+            type: 'script',
+            size: 2800,
+            lastModified: '2024-01-13',
+            selected: false,
+        },
+        {
+            id: '5',
+            name: 'player_texture.png',
+            path: 'res://textures/player_texture.png',
+            type: 'texture',
+            size: 524000,
+            lastModified: '2024-01-12',
+            selected: false,
+        },
+        {
+            id: '6',
+            name: 'standard_material.tres',
+            path: 'res://materials/standard_material.tres',
+            type: 'material',
+            size: 1200,
+            lastModified: '2024-01-11',
+            selected: false,
+        },
+        {
+            id: '7',
+            name: 'custom_shader.gdshader',
+            path: 'res://shaders/custom_shader.gdshader',
+            type: 'shader',
+            size: 2500,
+            lastModified: '2024-01-10',
+            selected: false,
+        },
+        {
+            id: '8',
+            name: 'jump.wav',
+            path: 'res://audio/jump.wav',
+            type: 'audio',
+            size: 45000,
+            lastModified: '2024-01-09',
+            selected: false,
+        },
+    ],
+    rootFolder: {
+        path: 'res://',
+        name: 'res://',
+        expanded: true,
+        children: [
+            { path: 'res://scenes', name: 'scenes', expanded: false, children: [] },
+            { path: 'res://scripts', name: 'scripts', expanded: false, children: [] },
+            { path: 'res://textures', name: 'textures', expanded: false, children: [] },
+            { path: 'res://materials', name: 'materials', expanded: false, children: [] },
+            { path: 'res://shaders', name: 'shaders', expanded: false, children: [] },
+            { path: 'res://audio', name: 'audio', expanded: false, children: [] },
+        ],
+    },
+    autoloads: [
+        { name: 'GameManager', path: 'res://scripts/game_manager.gd', enabled: true },
+        { name: 'AudioManager', path: 'res://scripts/audio_manager.gd', enabled: true },
+    ],
+    plugins: [
+        { name: 'godot-git-plugin', enabled: true },
+        { name: 'dialogue-addon', enabled: false },
+    ],
+    exportPresets: [
+        { name: 'Windows Desktop', platform: 'Windows' },
+        { name: 'Linux Desktop', platform: 'Linux' },
+        { name: 'Web Build', platform: 'Web' },
+    ],
+};
+const GodotProjectBrowser = forwardRef(({ projectPath, theme: themeOverride, onProjectLoad, onImport, onSyncConnect, onSyncDisconnect, className, style, }, ref) => {
+    const [state, dispatch] = useReducer(browserReducer, {
+        ...INITIAL_STATE,
+        projectInfo: DEMO_PROJECT,
+    });
+    const theme = useMemo(() => ({ ...DEFAULT_THEME, ...themeOverride }), [themeOverride]);
+    // Import selected resources
+    const importSelectedResources = useCallback(async () => {
+        if (state.selectedResources.size === 0 || !state.projectInfo) {
+            return;
+        }
+        const selectedResources = state.projectInfo.resources.filter((r) => state.selectedResources.has(r.id));
+        dispatch({ type: 'SET_IMPORTING', importing: true, progress: 0 });
+        try {
+            for (let i = 0; i < selectedResources.length; i++) {
+                dispatch({
+                    type: 'SET_IMPORTING',
+                    importing: true,
+                    progress: Math.round(((i + 1) / selectedResources.length) * 100),
+                });
+                await new Promise((resolve) => setTimeout(resolve, 200));
+            }
+            if (onImport) {
+                await onImport(selectedResources);
+            }
+            dispatch({ type: 'DESELECT_ALL' });
+        }
+        finally {
+            dispatch({ type: 'SET_IMPORTING', importing: false });
+        }
+    }, [state.selectedResources, state.projectInfo, onImport]);
+    // Sync connection
+    const connectSync = useCallback(async () => {
+        if (onSyncConnect) {
+            const status = await onSyncConnect();
+            dispatch({ type: 'SET_SYNC_STATUS', status });
+        }
+        else {
+            dispatch({
+                type: 'SET_SYNC_STATUS',
+                status: {
+                    connected: true,
+                    godotVersion: '4.2.1',
+                    projectName: 'MyGodotGame',
+                    isRunning: false,
+                    debuggerConnected: true,
+                },
+            });
+        }
+    }, [onSyncConnect]);
+    const disconnectSync = useCallback(() => {
+        onSyncDisconnect?.();
+        dispatch({
+            type: 'SET_SYNC_STATUS',
+            status: { connected: false, isRunning: false, debuggerConnected: false },
+        });
+    }, [onSyncDisconnect]);
+    // Imperative handle
+    useImperativeHandle(ref, () => ({
+        loadProject: async (path) => {
+            dispatch({ type: 'SET_PROJECT', info: DEMO_PROJECT });
+            onProjectLoad?.(DEMO_PROJECT);
+        },
+        getSelectedResources: () => {
+            if (!state.projectInfo) {
+                return [];
+            }
+            return state.projectInfo.resources.filter((r) => state.selectedResources.has(r.id));
+        },
+        importSelected: importSelectedResources,
+    }), [state.projectInfo, state.selectedResources, importSelectedResources, onProjectLoad]);
+    const ctxValue = useMemo(() => ({ state, dispatch, theme, importSelectedResources, connectSync, disconnectSync }), [state, theme, importSelectedResources, connectSync, disconnectSync]);
+    return (jsx(BrowserContext.Provider, { value: ctxValue, children: jsxs("div", { className: `godot-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 === 'files' && jsx(FilesPanel, {}), state.tab === 'autoloads' && jsx(AutoloadsPanel, {}), state.tab === 'plugins' && jsx(PluginsPanel, {}), state.tab === 'exports' && jsx(ExportsPanel, {})] })] }) }));
+});
+GodotProjectBrowser.displayName = 'GodotProjectBrowser';
+
+export { GodotProjectBrowser };
+//# sourceMappingURL=GodotProjectBrowser.js.map