\n\n\n \n
\n
\n \n \n
\n
\n \n
\n
\n \n
\n \n
\n
\n
\n\n","src/main.tsx":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\nimport './index.css';\n\nReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(\n \n \n \n);","src/App.tsx":"import React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport Home from './components/Home';\nimport Navigation from './components/Navigation';\n\nfunction App() {\n return (\n \n
\n \n
\n \n \n \n
\n
\n \n );\n}\n\nexport default App;\n","src/components/Home.tsx":"import React, { useState } from 'react';\nimport { Input, Button } from 'lucide-react';\n\nconst Home: React.FC = () => {\n const [inputText, setInputText] = useState('');\n const [modifiedText, setModifiedText] = useState('');\n\n const handleInputChange = (event: React.ChangeEvent) => {\n setInputText(event.target.value);\n };\n\n const handleSubmit = () => {\n // Remove the word 'world' from the input text\n const result = inputText.replace(/world/gi, '').trim();\n setModifiedText(result);\n };\n\n return (\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n
\n {modifiedText}\n
\n
\n
\n );\n};\n\nexport default Home;\n","src/index.css":"/* Tailwind CSS base styles */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* Custom styles for modern design language */\n\n:root {\n --primary-color: #3498db;\n}\n\nbody {\n font-family: 'Inter', sans-serif;\n background-color: #f5f7fa;\n color: #333;\n}\n\n/* Input field styles */\n.input-field {\n @apply border border-gray-300 rounded-md p-2 w-full;\n transition: border-color 0.3s ease;\n}\n\n.input-field:focus {\n @apply outline-none border-primary;\n}\n\n/* Button styles */\n.submit-button {\n @apply bg-primary text-white font-semibold py-2 px-4 rounded-md shadow-md;\n transition: background-color 0.3s ease;\n}\n\n.submit-button:hover {\n @apply bg-blue-600;\n}\n\n/* Result display area styles */\n.result-display {\n @apply bg-white border border-gray-200 rounded-md p-4 shadow-sm;\n}\n\n.label {\n @apply block text-sm font-medium text-gray-700 mb-1;\n}\n\n/* Utility classes for layout */\n.container {\n @apply max-w-2xl mx-auto p-4;\n}\n\n.flex-center {\n @apply flex justify-center items-center;\n}\n","src/components/About.tsx":"import React from 'react';\nimport { LucideIcon } from 'lucide-react';\n\nconst About: React.FC = () => {\n return (\n
\n

About Us

\n

\n Welcome to our company! We are committed to delivering the best services to our customers.\n Our team is dedicated to ensuring customer satisfaction and providing top-notch solutions.\n

\n
\n \n \n \n
\n
\n );\n};\n\nexport default About;\n","src/components/Navigation.tsx":"import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { Home } from 'lucide-react';\n\nconst Navigation: React.FC = () => {\n return (\n \n );\n};\n\nexport default Navigation;\n","src/components/TextInputField.tsx":"import React from 'react';\n\ninterface TextInputFieldProps {\n placeholder: string;\n label: string;\n}\n\nconst TextInputField: React.FC = ({ placeholder, label }) => {\n return (\n
\n \n \n
\n );\n};\n\nexport default TextInputField;\n","src/components/SubmitButton.tsx":"import React from 'react';\nimport { Button } from 'lucide-react';\n\ninterface SubmitButtonProps {\n label: string;\n onClick: () => void;\n}\n\nconst SubmitButton: React.FC = ({ label, onClick }) => {\n return (\n \n \n );\n};\n\nexport default SubmitButton;\n","src/components/ResultDisplayArea.tsx":"import React from 'react';\nimport { FileText } from 'lucide-react';\n\ninterface ResultDisplayAreaProps {\n label: string;\n text: string;\n}\n\nconst ResultDisplayArea: React.FC = ({ label, text }) => {\n return (\n
\n
\n \n

{label}

\n
\n

{text}

\n
\n );\n};\n\nexport default ResultDisplayArea;\n"}; function resolvePath(base, relative) { if (!relative.startsWith('.')) return relative; const stack = base.split('/'); stack.pop(); const parts = relative.split('/'); for (let i = 0; i < parts.length; i++) { if (parts[i] === '.') continue; if (parts[i] === '..') stack.pop(); else stack.push(parts[i]); } return stack.join('/'); } function getFileContent(path) { if (window.__SOURCES__[path]) return { content: window.__SOURCES__[path], finalPath: path }; const extensions = ['.tsx', '.ts', '.jsx', '.js', '.css', '.json']; for (let ext of extensions) { if (window.__SOURCES__[path + ext]) return { content: window.__SOURCES__[path + ext], finalPath: path + ext }; } for (let ext of extensions) { if (window.__SOURCES__[path + '/index' + ext]) return { content: window.__SOURCES__[path + '/index' + ext], finalPath: path + '/index' + ext }; } return null; } window.require = function(path, base = '') { // --- BUILT-INS --- if (path === 'react') return window.React; if (path === 'react-dom') return window.ReactDOM; if (path === 'react-dom/client') return window.ReactDOM; if (path === '@supabase/supabase-js') return window.supabase || createSafeProxy({}, '@supabase/supabase-js'); if (path === 'lucide-react') return window.lucide || createSafeProxy({}, 'lucide-react'); // --- ROUTER SHIM (STRICT FIX) --- if (path === 'react-router-dom' || path === 'react-router') { const rrd = window.ReactRouterDOM || {}; const Passthrough = ({ children }) => children; return { ...rrd, BrowserRouter: Passthrough, HashRouter: Passthrough, MemoryRouter: Passthrough, }; } const resolvedPath = resolvePath(base, path); const fileInfo = getFileContent(resolvedPath); if (!fileInfo) { console.warn('Module not found:', path, 'Resolved:', resolvedPath); return createSafeProxy({}, path); } const { content, finalPath } = fileInfo; // 1. Check Cache if (window.__MODULES__[finalPath]) return window.__MODULES__[finalPath].exports; if (finalPath.endsWith('.css')) { const style = document.createElement('style'); style.textContent = content; document.head.appendChild(style); window.__MODULES__[finalPath] = { exports: {} }; return {}; } if (finalPath.endsWith('.json')) { try { const json = JSON.parse(content); window.__MODULES__[finalPath] = { exports: json }; return json; } catch(e) {} } // --- COMPILATION (CIRCULAR DEP FIX) --- // 2. Register Module EARLY to support circular dependencies const module = { exports: {} }; window.__MODULES__[finalPath] = module; try { // Guard: Check for hallucinated text files acting as code if (content.trim().indexOf('import ') !== 0 && content.trim().indexOf('export ') === -1 && content.trim().indexOf('<') === -1) { if (content.length < 500 && (content.includes('Remove') || content.includes('Note:') || content.includes('Instructions:'))) { throw new Error("File content appears to be text instructions, not code."); } } const presets = [['env', { modules: 'commonjs' }], 'react']; if (finalPath.endsWith('.ts') || finalPath.endsWith('.tsx')) { presets.push('typescript'); } const transformed = Babel.transform(content, { presets, filename: finalPath }).code; const wrapper = new Function('module', 'exports', 'require', transformed); wrapper(module, module.exports, (p) => window.require(p, finalPath)); return module.exports; } catch (e) { console.error('Compilation Error in ' + finalPath, e); const ErrorComponent = () => window.React.createElement('div', { style: { color: 'red', padding: 10, background: '#fee2e2', border: '1px solid red' } }, 'Error compiling ' + finalPath + ': ' + e.message); // Update the cache with the error component so we don't retry infinite loops window.__MODULES__[finalPath].exports = { default: ErrorComponent, ErrorComponent }; return window.__MODULES__[finalPath].exports; } }; // --- BOOTSTRAP --- window.onload = function() { try { const rootEl = document.getElementById('root'); if (!rootEl) throw new Error("Missing #root element"); // 1. AUTO-DETECT APP COMPONENT const appFile = ['src/App.tsx', 'src/App.jsx', 'src/App.js', 'App.tsx', 'App.jsx', 'App.js'].find(p => window.__SOURCES__[p]); let mounted = false; if (appFile) { try { const mod = window.require(appFile); // Support both default and named 'App' exports const App = mod.default || mod.App; if (App) { const React = window.React; const ReactDOM = window.ReactDOM; // Use REAL HashRouter from global UMD for the root context const RealHashRouter = window.ReactRouterDOM.HashRouter; const root = ReactDOM.createRoot(rootEl); root.render(React.createElement(RealHashRouter, {}, React.createElement(App))); mounted = true; console.log('Mounted App via ' + appFile); } else { throw new Error("App component not found in exports. Ensure 'export default App' or 'export const App'."); } } catch(e) { console.warn('Auto-mount failed:', e); throw e; // Re-throw to show error overlay } } // 2. FALLBACK: EXECUTE ENTRY FILE (main.tsx) if (!mounted) { const entry = "src/main.tsx"; if (entry && window.__SOURCES__[entry]) { console.log('Executing entry: ' + entry); window.require(entry); } else if (!appFile) { document.body.innerHTML = '
Waiting for entry point...
'; } } } catch (e) { console.error('Bootstrap Error:', e); window.onerror(e.message, '', 0, 0, e); } };