testeranto 0.203.0 → 0.206.0

package/dist/common/src/app/frontend/components/stateful/SkriboPage.js

@@ -0,0 +1,517 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkriboPage = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const react_1 = __importDefault(require("react"));
+// import { GenericTree } from './GenericXMLEditor/GenericTree';
+// import { GenericPreview } from './GenericXMLEditor/GenericPreview';
+// import { GenericTextEditor } from './GenericXMLEditor/GenericTextEditor';
+// import { AttributeEditor } from './GenericXMLEditor/AttributeEditor';
+// import { XMLNode } from './GenericXMLEditorPage';
+const SkriboPage = () => {
+    // const [code, setCode] = useState<string>('// Write your code here\nfunction hello() {\n  console.log("Hello, world!");\n}');
+    // const [language, setLanguage] = useState<string>('javascript');
+    // const [fileTreeWidth, setFileTreeWidth] = useState(250);
+    // const [editorWidth, setEditorWidth] = useState(600);
+    // const [previewWidth, setPreviewWidth] = useState(400);
+    // const [isResizing, setIsResizing] = useState(false);
+    // const [resizeType, setResizeType] = useState<'fileTree' | 'editor' | 'preview' | null>(null);
+    // const [isLoading, setIsLoading] = useState(false);
+    // const [currentPath, setCurrentPath] = useState<string>('');
+    // const [fileTree, setFileTree] = useState<any[]>([]);
+    // const [canUndo, setCanUndo] = useState(false);
+    // const [canRedo, setCanRedo] = useState(false);
+    // const containerRef = useRef<HTMLDivElement>(null);
+    // // Sample XML tree data for the GenericXMLEditor components
+    // const [xmlTree, setXmlTree] = useState<XMLNode>({
+    //   id: 'root',
+    //   type: 'svg',
+    //   attributes: { width: '100', height: '100' },
+    //   children: [
+    //     {
+    //       id: 'rect1',
+    //       type: 'rect',
+    //       attributes: { x: '10', y: '10', width: '80', height: '80', fill: 'red' },
+    //       children: []
+    //     }
+    //   ]
+    // });
+    // const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+    // const [hiddenNodes, setHiddenNodes] = useState<Set<string>>(new Set());
+    // // Find the selected node
+    // const findNode = (node: XMLNode, id: string): XMLNode | null => {
+    //   if (node.id === id) return node;
+    //   for (const child of node.children) {
+    //     const found = findNode(child, id);
+    //     if (found) return found;
+    //   }
+    //   return null;
+    // };
+    // const selectedNode = selectedNodeId ? findNode(xmlTree, selectedNodeId) : null;
+    // const handleUpdateNode = (nodeId: string, attributes: Record<string, string>) => {
+    //   const updateNode = (node: XMLNode): XMLNode => {
+    //     if (node.id === nodeId) {
+    //       return { ...node, attributes };
+    //     }
+    //     return {
+    //       ...node,
+    //       children: node.children.map(updateNode)
+    //     };
+    //   };
+    //   setXmlTree(updateNode(xmlTree));
+    // };
+    // const handleEditorChange = (value: string | undefined) => {
+    //   setCode(value || '');
+    // };
+    // // Handle horizontal scroll when over the editor
+    // const handleEditorDidMount = (editor: any, monaco: any) => {
+    //   // Add event listener to the editor container to handle horizontal scrolling
+    //   const editorContainer = editor.getDomNode();
+    //   if (editorContainer) {
+    //     editorContainer.addEventListener('wheel', (event: WheelEvent) => {
+    //       // Check if it's a horizontal scroll
+    //       if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+    //         // Prevent the default behavior to allow horizontal scrolling of the parent
+    //         event.preventDefault();
+    //         // Scroll the container horizontally
+    //         if (containerRef.current) {
+    //           containerRef.current.scrollLeft += event.deltaX;
+    //         }
+    //       }
+    //     }, { passive: false });
+    //   }
+    // };
+    // const handleUndo = () => {
+    //   // Implement undo functionality
+    //   console.log('Undo');
+    // };
+    // const handleRedo = () => {
+    //   // Implement redo functionality
+    //   console.log('Redo');
+    // };
+    // const startResizing = (type: 'fileTree' | 'editor' | 'treeView' | 'attributes' | 'textEditor' | 'preview') => {
+    //   setIsResizing(true);
+    //   setResizeType(type);
+    // };
+    // useEffect(() => {
+    //   // Load file tree based on mode
+    //   const loadFileTree = async () => {
+    //     setIsLoading(true);
+    //     try {
+    //       const isDevelopment = process.env.NODE_ENV === 'development';
+    //       if (isDevelopment) {
+    //         // Try to use FileService first
+    //         try {
+    //           const { getFileService } = await import('../../services/FileService');
+    //           const fileService = getFileService('dev');
+    //           // Read the root directory
+    //           const rootContent = await fileService.readDirectory('/');
+    //           // Process the directory content to build a proper tree structure
+    //           const processedTree = await processDirectoryContent('/', rootContent, fileService);
+    //           setFileTree(processedTree);
+    //         } catch (fileServiceError) {
+    //           console.warn('FileService directory listing not available, trying API:', fileServiceError);
+    //           try {
+    //             const response = await fetch('/api/files/tree');
+    //             if (response.ok) {
+    //               const tree = await response.json();
+    //               setFileTree(tree);
+    //             } else {
+    //               throw new Error(`API returned ${response.status}`);
+    //             }
+    //           } catch (apiError) {
+    //             console.warn('API endpoint not available, trying direct file system access:', apiError);
+    //             // Fall back to direct file system access using Node.js fs module
+    //             await loadFileTreeFromFileSystem();
+    //           }
+    //         }
+    //       } else {
+    //         // In static mode, use isomorphic-git to get file tree
+    //         await loadFileTreeFromGit();
+    //       }
+    //     } catch (error) {
+    //       console.error('Failed to load file tree:', error);
+    //       // Fall back to sample structure
+    //       setFileTree(getSampleFileTree());
+    //     } finally {
+    //       setIsLoading(false);
+    //     }
+    //   };
+    //   const processDirectoryContent = async (currentPath: string, items: any[], fileService: any): Promise<any[]> => {
+    //     const result: any[] = [];
+    //     for (const item of items) {
+    //       if (item.type === 'folder') {
+    //         try {
+    //           // Recursively process subdirectories
+    //           const children = await fileService.readDirectory(item.path);
+    //           const processedChildren = await processDirectoryContent(item.path, children, fileService);
+    //           result.push({
+    //             name: item.name,
+    //             type: 'folder',
+    //             path: item.path,
+    //             children: processedChildren
+    //           });
+    //         } catch (error) {
+    //           console.warn(`Failed to read directory ${item.path}:`, error);
+    //           result.push({
+    //             name: item.name,
+    //             type: 'folder',
+    //             path: item.path,
+    //             children: []
+    //           });
+    //         }
+    //       } else {
+    //         result.push({
+    //           name: item.name,
+    //           type: 'file',
+    //           path: item.path
+    //         });
+    //       }
+    //     }
+    //     return result;
+    //   };
+    //   const loadFileTreeFromFileSystem = async () => {
+    //     try {
+    //       const fs = await import('fs');
+    //       const path = await import('path');
+    //       const readDirRecursive = async (dirPath: string, basePath: string = ''): Promise<any[]> => {
+    //         const items: any[] = [];
+    //         const fullPath = path.join(dirPath, basePath);
+    //         try {
+    //           const entries = await fs.promises.readdir(fullPath, { withFileTypes: true });
+    //           for (const entry of entries) {
+    //             // Skip hidden files and directories (like .git, .DS_Store)
+    //             if (entry.name.startsWith('.')) continue;
+    //             const relativePath = path.join(basePath, entry.name);
+    //             if (entry.isDirectory()) {
+    //               const children = await readDirRecursive(dirPath, relativePath);
+    //               items.push({
+    //                 name: entry.name,
+    //                 type: 'folder',
+    //                 path: '/' + relativePath,
+    //                 children
+    //               });
+    //             } else if (entry.isFile()) {
+    //               items.push({
+    //                 name: entry.name,
+    //                 type: 'file',
+    //                 path: '/' + relativePath
+    //               });
+    //             }
+    //           }
+    //         } catch (error) {
+    //           console.warn(`Failed to read directory ${fullPath}:`, error);
+    //         }
+    //         return items;
+    //       };
+    //       const tree = await readDirRecursive(process.cwd());
+    //       setFileTree(tree);
+    //     } catch (error) {
+    //       console.error('Failed to load file tree from file system:', error);
+    //       throw error;
+    //     }
+    //   };
+    //   const loadFileTreeFromGit = async () => {
+    //     try {
+    //       const git = await import('isomorphic-git');
+    //       const fs = await import('fs');
+    //       // Get the list of files from git
+    //       const files = await git.listFiles({
+    //         fs,
+    //         dir: process.cwd(),
+    //         ref: 'HEAD'
+    //       });
+    //       // Convert flat file list to hierarchical structure
+    //       const tree = buildFileTree(files);
+    //       setFileTree(tree);
+    //     } catch (error) {
+    //       console.error('Failed to load file tree from git:', error);
+    //       // Fall back to file system access
+    //       await loadFileTreeFromFileSystem();
+    //     }
+    //   };
+    //   const buildFileTree = (files: string[]): any[] => {
+    //     const root: Record<string, any> = {};
+    //     files.forEach(filePath => {
+    //       // Skip git-related files
+    //       if (filePath.startsWith('.git/')) return;
+    //       const parts = filePath.split('/');
+    //       let current = root;
+    //       for (let i = 0; i < parts.length; i++) {
+    //         const part = parts[i];
+    //         const isFile = i === parts.length - 1;
+    //         if (!current[part]) {
+    //           if (isFile) {
+    //             current[part] = {
+    //               name: part,
+    //               type: 'file',
+    //               path: '/' + filePath
+    //             };
+    //           } else {
+    //             current[part] = {
+    //               name: part,
+    //               type: 'folder',
+    //               path: '/' + parts.slice(0, i + 1).join('/'),
+    //               children: {}
+    //             };
+    //           }
+    //         }
+    //         if (!isFile) {
+    //           current = current[part].children;
+    //         }
+    //       }
+    //     });
+    //     // Convert the object structure to an array
+    //     const convertToArray = (obj: Record<string, any>): any[] => {
+    //       return Object.values(obj).map(item => {
+    //         if (item.type === 'folder') {
+    //           return {
+    //             ...item,
+    //             children: convertToArray(item.children)
+    //           };
+    //         }
+    //         return item;
+    //       });
+    //     };
+    //     return convertToArray(root);
+    //   };
+    //   const getSampleFileTree = () => {
+    //     return [
+    //       {
+    //         name: 'src', 
+    //         type: 'folder', 
+    //         path: '/src',
+    //         children: [
+    //           { name: 'index.js', type: 'file', path: '/src/index.js' },
+    //           { name: 'app.js', type: 'file', path: '/src/app.js' },
+    //           {
+    //             name: 'components', 
+    //             type: 'folder', 
+    //             path: '/src/components',
+    //             children: [
+    //               { name: 'Button.js', type: 'file', path: '/src/components/Button.js' },
+    //               { name: 'Header.js', type: 'file', path: '/src/components/Header.js' }
+    //             ]
+    //           }
+    //         ]
+    //       },
+    //       { name: 'package.json', type: 'file', path: '/package.json' },
+    //       { name: 'README.md', type: 'file', path: '/README.md' }
+    //     ];
+    //   };
+    //   loadFileTree();
+    // }, []);
+    // useEffect(() => {
+    //   const handleMouseMove = (e: MouseEvent) => {
+    //     if (!isResizing || !containerRef.current) return;
+    //     const containerRect = containerRef.current.getBoundingClientRect();
+    //     const relativeX = e.clientX - containerRect.left;
+    //     if (resizeType === 'fileTree') {
+    //       const newWidth = Math.max(200, Math.min(relativeX, 800));
+    //       setFileTreeWidth(newWidth);
+    //     } else if (resizeType === 'editor') {
+    //       const newWidth = Math.max(200, Math.min(relativeX - fileTreeWidth, 800));
+    //       setEditorWidth(newWidth);
+    //     } else if (resizeType === 'editor') {
+    //       const newWidth = Math.max(200, Math.min(relativeX - fileTreeWidth, 800));
+    //       setEditorWidth(newWidth);
+    //     } else if (resizeType === 'preview') {
+    //       const newWidth = Math.max(200, Math.min(relativeX - fileTreeWidth - editorWidth, 800));
+    //       setPreviewWidth(newWidth);
+    //     }
+    //   };
+    //   const handleMouseUp = () => {
+    //     setIsResizing(false);
+    //     setResizeType(null);
+    //   };
+    //   if (isResizing) {
+    //     document.addEventListener('mousemove', handleMouseMove);
+    //     document.addEventListener('mouseup', handleMouseUp);
+    //   }
+    //   return () => {
+    //     document.removeEventListener('mousemove', handleMouseMove);
+    //     document.removeEventListener('mouseup', handleMouseUp);
+    //   };
+    // }, [isResizing, resizeType, fileTreeWidth, editorWidth]);
+    // const loadFileContent = async (filePath: string) => {
+    //   try {
+    //     setIsLoading(true);
+    //     // Determine the mode based on the environment
+    //     const isDevelopment = process.env.NODE_ENV === 'development';
+    //     if (isDevelopment) {
+    //       // In development mode, try multiple approaches to load file content
+    //       try {
+    //         // First try FileService
+    //         const { getFileService } = await import('../../services/FileService');
+    //         const fileService = getFileService('dev');
+    //         const content = await fileService.readFile(filePath);
+    //         setCode(content);
+    //         setCurrentPath(filePath);
+    //       } catch (fileServiceError) {
+    //         console.warn('FileService not available, trying API endpoint:', fileServiceError);
+    //         try {
+    //           // Try API endpoint
+    //           const encodedPath = encodeURIComponent(filePath);
+    //           const response = await fetch(`/api/files/read?path=${encodedPath}`);
+    //           if (response.ok) {
+    //             const content = await response.text();
+    //             setCode(content);
+    //             setCurrentPath(filePath);
+    //           } else {
+    //             throw new Error(`HTTP error! status: ${response.status}`);
+    //           }
+    //         } catch (apiError) {
+    //           console.warn('API endpoint not available, trying direct file system access:', apiError);
+    //           // Fall back to direct file system access
+    //           await loadFileContentFromFileSystem(filePath);
+    //         }
+    //       }
+    //     } else {
+    //       // In production/static mode, use isomorphic-git to fetch from GitHub
+    //       await loadFileContentFromGit(filePath);
+    //     }
+    //     // Set language based on file extension
+    //     updateLanguageFromFilePath(filePath);
+    //   } catch (error) {
+    //     console.error('Failed to load file:', error);
+    //     setCode(`// Error loading file: ${filePath}\n// ${error instanceof Error ? error.message : 'Unknown error'}`);
+    //     setCurrentPath(filePath);
+    //   } finally {
+    //     setIsLoading(false);
+    //   }
+    // };
+    // const loadFileContentFromFileSystem = async (filePath: string) => {
+    //   try {
+    //     const fs = await import('fs');
+    //     const path = await import('path');
+    //     // Remove leading slash if present
+    //     const cleanPath = filePath.startsWith('/') ? filePath.slice(1) : filePath;
+    //     const fullPath = path.join(process.cwd(), cleanPath);
+    //     const content = await fs.promises.readFile(fullPath, 'utf-8');
+    //     setCode(content);
+    //     setCurrentPath(filePath);
+    //   } catch (error) {
+    //     console.error('Direct file system load failed:', error);
+    //     throw error;
+    //   }
+    // };
+    // const loadFileContentDirect = async (filePath: string) => {
+    //   try {
+    //     let fetchPath = filePath;
+    //     if (fetchPath.startsWith('/')) {
+    //       fetchPath = fetchPath.slice(1);
+    //     }
+    //     const cacheBuster = `?cb=${Date.now()}`;
+    //     const response = await fetch(fetchPath + cacheBuster);
+    //     if (response.ok) {
+    //       const content = await response.text();
+    //       setCode(content);
+    //       setCurrentPath(filePath);
+    //     } else {
+    //       throw new Error(`File not found (${response.status})`);
+    //     }
+    //   } catch (error) {
+    //     console.error('Direct file load failed:', error);
+    //     setCode(`// File: ${filePath}\n// ${error instanceof Error ? error.message : 'Content not available'}\n\n// Add your code here`);
+    //     setCurrentPath(filePath);
+    //   }
+    // };
+    // const loadFileContentFromGit = async (filePath: string) => {
+    //   try {
+    //     // Import isomorphic-git
+    //     const git = await import('isomorphic-git');
+    //     const fs = await import('fs');
+    //     // Remove leading slash if present
+    //     const gitPath = filePath.startsWith('/') ? filePath.slice(1) : filePath;
+    //     // Read file from git repository
+    //     // Note: This assumes the repository is already cloned locally
+    //     // In a real implementation, you'd need to handle the repository setup
+    //     const content = await git.readBlob({
+    //       fs,
+    //       dir: process.cwd(), // Current working directory (where the git repo is)
+    //       oid: 'HEAD', // Read from the latest commit
+    //       filepath: gitPath
+    //     });
+    //     // Convert Uint8Array to string
+    //     const text = new TextDecoder().decode(content.blob);
+    //     setCode(text);
+    //     setCurrentPath(filePath);
+    //   } catch (error) {
+    //     console.error('Failed to load file from git:', error);
+    //     // Fall back to direct fetch
+    //     await loadFileContentDirect(filePath);
+    //   }
+    // };
+    // const updateLanguageFromFilePath = (filePath: string) => {
+    //   const extension = filePath.split('.').pop()?.toLowerCase();
+    //   const languageMap: Record<string, string> = {
+    //     'js': 'javascript',
+    //     'jsx': 'javascript',
+    //     'ts': 'typescript',
+    //     'tsx': 'typescript',
+    //     'py': 'python',
+    //     'html': 'html',
+    //     'css': 'css',
+    //     'scss': 'scss',
+    //     'sass': 'sass',
+    //     'json': 'json',
+    //     'md': 'markdown',
+    //     'xml': 'xml',
+    //     'svg': 'xml',
+    //     'go': 'go',
+    //     'java': 'java',
+    //     'cpp': 'cpp',
+    //     'c': 'c',
+    //     'cs': 'csharp',
+    //     'php': 'php',
+    //     'rb': 'ruby',
+    //     'rs': 'rust',
+    //     'sh': 'shell',
+    //     'bash': 'shell',
+    //     'bat': 'bat',
+    //     'ps1': 'powershell',
+    //     'sql': 'sql',
+    //     'yaml': 'yaml',
+    //     'yml': 'yaml',
+    //     'toml': 'toml',
+    //     'ini': 'ini',
+    //     'cfg': 'ini',
+    //     'conf': 'ini'
+    //   };
+    //   setLanguage(languageMap[extension || ''] || 'plaintext');
+    // };
+    // const renderFileTree = (items: any[]) => {
+    //   return (
+    //     <ul style={{ listStyle: 'none', paddingLeft: '0' }}>
+    //       {items.map((item, index) => (
+    //         <li key={index} style={{ marginBottom: '0.25rem' }}>
+    //           <div 
+    //             className="d-flex align-items-center"
+    //             style={{ cursor: item.type === 'file' ? 'pointer' : 'default' }}
+    //             onClick={() => {
+    //               if (item.type === 'file') {
+    //                 loadFileContent(item.path);
+    //               }
+    //             }}
+    //           >
+    //             <span className="me-1">
+    //               {item.type === 'folder' ? '📁 ' : '📄 '}
+    //             </span>
+    //             <span className="small">{item.name}</span>
+    //           </div>
+    //           {item.type === 'folder' && item.children && (
+    //             <div style={{ marginLeft: '1rem' }}>
+    //               {renderFileTree(item.children)}
+    //             </div>
+    //           )}
+    //         </li>
+    //       ))}
+    //     </ul>
+    //   );
+    // };
+    return (react_1.default.createElement("div", null, "IDK"));
+};
+exports.SkriboPage = SkriboPage;

package/dist/common/src/app/frontend/components/stateful/TextEditorPage.js

@@ -0,0 +1,154 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextEditorPage = void 0;
+const react_1 = __importStar(require("react"));
+const react_2 = require("@monaco-editor/react");
+const FileTree_1 = require("./FileTree");
+const TextEditorPage = () => {
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [activeFile, setActiveFile] = (0, react_1.useState)(null);
+    const [editorTheme, setEditorTheme] = (0, react_1.useState)('vs-dark');
+    // Initialize with sample files
+    (0, react_1.useEffect)(() => {
+        const sampleFiles = [
+            {
+                path: 'src/index.ts',
+                content: '// TypeScript code here\nconst message = "Hello World";\nconsole.log(message);',
+                language: 'typescript'
+            },
+            {
+                path: 'package.json',
+                content: '{\n  "name": "my-project",\n  "version": "1.0.0"\n}',
+                language: 'json'
+            }
+        ];
+        setFiles(sampleFiles);
+        setActiveFile(sampleFiles[0]);
+    }, []);
+    const handleFileSelect = (filePath) => {
+        const selectedFile = files.find(f => f.path === filePath);
+        if (selectedFile) {
+            setActiveFile(selectedFile);
+        }
+    };
+    const handleEditorChange = (value) => {
+        if (activeFile && value !== undefined) {
+            setFiles(files.map(f => f.path === activeFile.path ? Object.assign(Object.assign({}, f), { content: value }) : f));
+        }
+    };
+    const [widths, setWidths] = (0, react_1.useState)({
+        fileTree: 250,
+        editor: window.innerWidth - 550, // Initial editor width (total width minus side panels)
+        preview: 300
+    });
+    const containerStyle = {
+        display: 'flex',
+        height: '100vh',
+        width: '100%'
+    };
+    const panelStyle = {
+        height: '100%',
+        overflow: 'hidden',
+        position: 'relative'
+    };
+    const [isResizing, setIsResizing] = (0, react_1.useState)(false);
+    const [startX, setStartX] = (0, react_1.useState)(0);
+    const [startWidth, setStartWidth] = (0, react_1.useState)(0);
+    const startResizing = (e, panel) => {
+        setIsResizing(true);
+        setStartX(e.clientX);
+        setStartWidth(widths[panel]);
+    };
+    const resize = (e) => {
+        if (isResizing) {
+            const dx = e.clientX - startX;
+            const newFileTreeWidth = Math.max(200, Math.min(400, startWidth + dx));
+            setWidths({
+                fileTree: newFileTreeWidth,
+                editor: window.innerWidth - newFileTreeWidth - widths.preview,
+                preview: widths.preview
+            });
+        }
+    };
+    const stopResizing = () => {
+        setIsResizing(false);
+    };
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('mousemove', resize);
+        window.addEventListener('mouseup', stopResizing);
+        return () => {
+            window.removeEventListener('mousemove', resize);
+            window.removeEventListener('mouseup', stopResizing);
+        };
+    }, [isResizing, startX, startWidth]);
+    return (react_1.default.createElement("div", { style: containerStyle },
+        react_1.default.createElement("div", { style: Object.assign(Object.assign({}, panelStyle), { width: widths.fileTree }) },
+            react_1.default.createElement(FileTree_1.FileTree, { files: files, onSelect: handleFileSelect, activeFile: activeFile === null || activeFile === void 0 ? void 0 : activeFile.path }),
+            react_1.default.createElement("div", { style: {
+                    width: '4px',
+                    height: '100%',
+                    cursor: 'col-resize',
+                    backgroundColor: isResizing ? '#aaa' : '#ddd',
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
+                    zIndex: 1
+                }, onMouseDown: (e) => startResizing(e, 'fileTree') })),
+        react_1.default.createElement("div", { style: Object.assign(Object.assign({}, panelStyle), { width: widths.editor }) }, activeFile && (react_1.default.createElement(react_2.Editor, { height: "100%", path: activeFile.path, defaultLanguage: activeFile.language, defaultValue: activeFile.content, onChange: handleEditorChange, theme: editorTheme, options: {
+                minimap: { enabled: false },
+                fontSize: 14,
+                wordWrap: 'on',
+                automaticLayout: true
+            } }))),
+        react_1.default.createElement("div", { style: Object.assign(Object.assign({}, panelStyle), { width: widths.preview }) },
+            react_1.default.createElement("div", { style: {
+                    width: '4px',
+                    height: '100%',
+                    cursor: 'col-resize',
+                    backgroundColor: isResizing ? '#aaa' : '#ddd',
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    zIndex: 1
+                }, onMouseDown: (e) => startResizing(e, 'editor') }),
+            activeFile && (react_1.default.createElement("div", null)
+            // <FilePreview 
+            //   content={activeFile.content}
+            //   language={activeFile.language}
+            // />
+            ))));
+};
+exports.TextEditorPage = TextEditorPage;