[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_151":152,"_153":154},"routes/_app.x.$handle.$name",{"_93":92,"_32":45,"_101":83,"_27":96,"_13":14,"_102":-5,"_11":103,"_104":105,"_106":107,"_108":109,"_110":111,"_20":-5,"_112":-5,"_113":-5,"_114":25,"_115":116,"_117":118,"_119":-5,"_120":-5,"_121":122},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","8b445342-3db0-11f1-9437-42b51c65c3df","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport { createRoot, renderToString } from \"npm:react-dom/server\";\nimport { Routes } from \"npm:react-router-dom\";\n\n// Learn more: https://docs.val.town/vals/http/jsx/\n/*export const reactExample = (request: Request) =>\n new Response(renderToString(

Test {1 + 1}

), {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });*/\ncreateRoot(document.getElementById(\"root\")).render(\n ,\n);","/** @jsxRuntime automatic */\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport {\n ArrowLeft,\n ArrowRight,\n ChevronDown,\n ChevronRight,\n Download,\n Edit2,\n Eye,\n EyeOff,\n FileBox,\n FileCode,\n FileJson,\n FilePlus,\n FileText,\n FileType2,\n FileUp,\n Folder,\n FolderPlus,\n Globe,\n Image as ImageIcon,\n LayoutTemplate,\n Maximize,\n Minimize,\n Monitor,\n Play,\n Plus,\n RotateCw,\n Square,\n Terminal,\n Trash2,\n Upload,\n X,\n} from \"https://esm.sh/lucide-react@0.263.1\";\n\nconst TEMPLATES = {\n Starter: {\n \"app.py\":\n `from flask import Flask, render_template\\n\\napp = Flask(__name__)\\n\\n@app.route('/')\\ndef index():\\n return render_template(\"index.html\")\\n\\nif __name__ == '__main__':\\n app.run()`,\n \"templates/index.html\":\n `\\n\\n\\n Flask App\\n \\n\\n\\n

\\n

Welcome to Flask IDE

\\n

\\n\\n`,\n \"static/styles.css\":\n `body {\\n position: absolute;\\n left:0;\\n right:0;\\n top:0;\\n bottom:0;\\n display: flex;\\n align-items:center;\\n justify-content:center;\\n font-family:Arial;\\n}\\n\\n.container {\\n max-width:512px;\\n max-height:320px;\\n padding:8px;\\n padding-left:16px;\\n padding-right:16px;\\n border:1px solid lightgray;\\n text-align: center;\\n border-radius:4px;\\n background-color:white;\\n box-shadow: 6px 9px 9px hsl(0deg 0% 0% / 0.36);\\n}`,\n },\n Base: {\n \"app.py\":\n `from flask import Flask, render_template\\n\\napp = Flask(__name__)\\n\\n@app.route('/')\\ndef index():\\n return \"Hello, World!\"\\n\\nif __name__ == '__main__':\\n app.run()`,\n },\n Empty: {},\n};\n\n// Minified Python Pyodide Mock Environment Code\nconst PYODIDE_MOCK_ENV = `\nimport sys,js,types,builtins,re,json,jinja2\nfrom io import StringIO\nclass ConsoleOutput:\n def write(self,t):\n if t.strip()!=\"\":js.window.appendTerminal(t)\n def flush(self):pass\nsys.stdout=ConsoleOutput()\nsys.stderr=ConsoleOutput()\nclass MockFile(StringIO):\n def __init__(self,f,c,m):\n self.f=f;self.m=m\n if 'w' in m:super().__init__(\"\")\n else:\n super().__init__(c if c else \"\")\n if 'a' in m:self.seek(0,2)\n def close(self):self.flush();super().close()\n def flush(self):\n if any(x in self.m for x in ['w','+','a']):js.window.setFileContent(self.f,self.getvalue())\n super().flush()\n def write(self,s):super().write(s);self.flush()\n def __exit__(self,*a):self.close()\ndef mock_open(file,mode='r',**kw):\n f=str(file)[2:] if str(file).startswith('./') else str(file)\n c=js.window.getFileContent(f)\n if c is None and 'r' in mode and '+' not in mode and 'w' not in mode and 'a' not in mode:raise FileNotFoundError(f)\n if c is None and any(x in mode for x in ['w','a','+']):js.window.setFileContent(f,\"\");c=\"\"\n return MockFile(f,c,mode)\nbuiltins.open=mock_open\ndef url_for(e,**v):\n if e=='static':return '/static/'+v.get('filename','')\n a=getattr(js.window,'_flaskApp',None)\n return a.endpoints[e] if a and hasattr(a,'endpoints') and e in a.endpoints else '/'+e\nclass MockRequest:\n def __init__(self):self.method='GET';self.args={};self.form={}\nglobal_request=MockRequest()\nclass MockFlaskApp:\n def __init__(self,n):self.n=n;self.routes={};self.endpoints={};js.window._flaskApp=self\n def route(self,p,methods=['GET']):\n def d(f):\n if p not in self.routes:self.routes[p]={}\n for m in methods:self.routes[p][m.upper()]=f\n self.endpoints[f.__name__]=p\n return f\n return d\n def run(self,host='127.0.0.1',port=5000,debug=False):print(f\" * Serving {self.n}\")\ndef render_template(t,**kw):\n c=js.window.getFileContent(\"templates/\"+t)\n if not c:return f\"

TemplateNotFound

{t}

\"\n ctx=kw.copy();ctx['url_for']=url_for;ctx['request']=global_request\n try:return jinja2.Template(c).render(**ctx)\n except Exception as e:\n import traceback;return f\"

{traceback.format_exc()}

\"\ndef jsonify(*a,**kw):return json.dumps(a[0] if len(a)==1 else (a or kw))\ndef redirect(l,code=302,Response=None):return f\"\"\nflask_mod=types.ModuleType('flask')\nflask_mod.Flask=MockFlaskApp\nflask_mod.render_template=render_template\nflask_mod.redirect=redirect\nflask_mod.request=global_request\nflask_mod.jsonify=jsonify\nflask_mod.url_for=url_for\nsys.modules['flask']=flask_mod\n`;\n\nfunction App() {\n const [currentView, setCurrentView] = useState(\"home\");\n const [projectId, setProjectId] = useState(() => Date.now().toString());\n const [projectName, setProjectName] = useState(\"Untitled\");\n const [files, setFiles] = useState(TEMPLATES.Starter);\n const [activeFile, setActiveFile] = useState(\"app.py\");\n const [selectedPath, setSelectedPath] = useState(null);\n const [terminalOutput, setTerminalOutput] = useState([\n \"Initializing Pyodide WebAssembly environment...\",\n \"Please wait...\",\n ]);\n const [isRunning, setIsRunning] = useState(false);\n const [browserUrl, setBrowserUrl] = useState(\"http://127.0.0.1:5000/\");\n const [browserContent, setBrowserContent] = useState(\n '

Server Offline

Click \"Run\" to start.

',\n );\n const [pyodideReady, setPyodideReady] = useState(false);\n const [pyodideInstance, setPyodideInstance] = useState(null);\n const [creatingType, setCreatingType] = useState(null);\n const [newFilePath, setNewFilePath] = useState(\"\");\n const [expandedFolders, setExpandedFolders] = useState({\n \"templates\": true,\n \"static\": true,\n });\n const [historyState, setHistoryState] = useState({\n history: [\"/\"],\n index: 0,\n });\n const [openFiles, setOpenFiles] = useState([\"app.py\"]);\n const [renamingPath, setRenamingPath] = useState(null);\n const [renameValue, setRenameValue] = useState(\"\");\n const [isFullscreenBrowser, setIsFullscreenBrowser] = useState(false);\n const [isBrowserVisible, setIsBrowserVisible] = useState(true);\n const [homeSavedProjects, setHomeSavedProjects] = useState([]);\n\n const fileInputRef = useRef(null);\n const fileUploadRef = useRef(null);\n const terminalEndRef = useRef(null);\n const highlightRef = useRef(null);\n\n const filesRef = useRef(files);\n const isRunningRef = useRef(isRunning);\n const pyodideInstanceRef = useRef(null);\n const historyRef = useRef([\"/\"]);\n const historyIndexRef = useRef(0);\n const projectNameRef = useRef(projectName);\n const projectIdRef = useRef(projectId);\n\n useEffect(() => {\n if (terminalEndRef.current) {\n terminalEndRef.current.scrollIntoView({ behavior: \"smooth\" });\n }\n }, [terminalOutput]);\n\n const resetBrowserState = () => {\n setIsRunning(false);\n if (window._flaskApp) window._flaskApp = null;\n setBrowserUrl(\"http://127.0.0.1:5000/\");\n setBrowserContent(\n '

Server Offline

Click \"Run\" to start.

',\n );\n };\n\n useEffect(() => {\n if (currentView === \"home\") {\n const saved = JSON.parse(localStorage.getItem(\"flask_ide_saves\") || \"{}\");\n setHomeSavedProjects(\n Object.entries(saved).map(([id, data]) => ({ id, ...data })).sort((\n a,\n b,\n ) => b.id - a.id),\n );\n }\n }, [currentView]);\n\n const saveProject = (name = projectNameRef.current) => {\n const saved = JSON.parse(localStorage.getItem(\"flask_ide_saves\") || \"{}\");\n saved[projectIdRef.current] = {\n name: name || \"Untitled\",\n date: new Date().toLocaleString(),\n files: filesRef.current,\n };\n localStorage.setItem(\"flask_ide_saves\", JSON.stringify(saved));\n };\n\n const handleCreateFromTemplate = (templateName) => {\n const templateFiles = TEMPLATES[templateName];\n setProjectId(Date.now().toString());\n setProjectName(`Untitled ${templateName}`);\n setFiles(templateFiles);\n const fileKeys = Object.keys(templateFiles);\n setOpenFiles(\n \"app.py\" in templateFiles\n ? [\"app.py\"]\n : (fileKeys.length > 0 ? [fileKeys[0]] : []),\n );\n setActiveFile(\n \"app.py\" in templateFiles\n ? \"app.py\"\n : (fileKeys.length > 0 ? fileKeys[0] : null),\n );\n resetBrowserState();\n setCurrentView(\"editor\");\n setTimeout(() => saveProject(`Untitled ${templateName}`), 100);\n };\n\n const handleOpenProjectFromHome = (id) => {\n const saved = JSON.parse(localStorage.getItem(\"flask_ide_saves\") || \"{}\");\n if (saved[id]) {\n setFiles(saved[id].files);\n setProjectId(id);\n setProjectName(saved[id].name);\n const fileKeys = Object.keys(saved[id].files);\n setOpenFiles(\n \"app.py\" in saved[id].files\n ? [\"app.py\"]\n : (fileKeys.length > 0 ? [fileKeys[0]] : []),\n );\n setActiveFile(\n \"app.py\" in saved[id].files\n ? \"app.py\"\n : (fileKeys.length > 0 ? fileKeys[0] : null),\n );\n resetBrowserState();\n setCurrentView(\"editor\");\n }\n };\n\n const handleDeleteProjectFromHome = (e, id) => {\n e.stopPropagation();\n const saved = JSON.parse(localStorage.getItem(\"flask_ide_saves\") || \"{}\");\n delete saved[id];\n localStorage.setItem(\"flask_ide_saves\", JSON.stringify(saved));\n setHomeSavedProjects(\n Object.entries(saved).map(([pid, data]) => ({ id: pid, ...data })).sort((\n a,\n b,\n ) => b.id - a.id),\n );\n };\n\n useEffect(() => {\n filesRef.current = files;\n isRunningRef.current = isRunning;\n projectNameRef.current = projectName;\n projectIdRef.current = projectId;\n }, [files, isRunning, projectName, projectId]);\n\n useEffect(() => {\n const handleGlobalKeyDown = (e) => {\n if ((e.ctrlKey || e.metaKey) && e.key === \"s\") {\n e.preventDefault();\n saveProject();\n setTerminalOutput((prev) => [...prev, `* Project saved (Ctrl+S).`]);\n }\n };\n window.addEventListener(\"keydown\", handleGlobalKeyDown);\n return () => window.removeEventListener(\"keydown\", handleGlobalKeyDown);\n }, []);\n\n useEffect(() => {\n const loadPyodideEnvironment = async () => {\n try {\n const loadScript = (src) =>\n new Promise((resolve, reject) => {\n const script = document.createElement(\"script\");\n script.src = src;\n script.onload = resolve;\n script.onerror = reject;\n document.body.appendChild(script);\n });\n await loadScript(\n \"https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js\",\n );\n const py = await window.loadPyodide();\n await py.loadPackage(\"jinja2\");\n setPyodideInstance(py);\n pyodideInstanceRef.current = py;\n setPyodideReady(true);\n setTerminalOutput((prev) => [...prev, \"* Pyodide runtime ready.\"]);\n } catch (err) {\n setTerminalOutput(\n (prev) => [...prev, \"[Error] Init failed: \" + err.message]\n );\n }\n };\n loadPyodideEnvironment();\n\n window.appendTerminal = (text) =>\n setTerminalOutput((prev) => [...prev, text]);\n window.getFileContent = (path) =>\n filesRef.current[path] !== undefined ? filesRef.current[path] : null;\n window.setFileContent = (path, content) =>\n setFiles((prev) => ({ ...prev, [path]: content }));\n window.setBrowserContentJS = (html, currentPath = \"/\") => {\n let processedHtml = html;\n const cssMatch = processedHtml.match(\n /]*href=[\"']\\/static\\/([^\"']+)[\"'][^>]*>/,\n );\n if (cssMatch && cssMatch[1]) {\n let cssContent = filesRef.current[`static/${cssMatch[1]}`] || \"\";\n processedHtml = processedHtml.replace(\n cssMatch[0],\n ``,\n );\n }\n const interceptorScript = `\n \n `;\n setBrowserContent(processedHtml + interceptorScript);\n };\n\n const handleMessage = (e) => {\n if (e.data && e.data.type === \"flask_navigate\") {\n handleNavigate(\n e.data.url,\n false,\n e.data.method || \"GET\",\n e.data.formData || {},\n );\n }\n };\n window.addEventListener(\"message\", handleMessage);\n return () => window.removeEventListener(\"message\", handleMessage);\n }, []);\n\n const handleNavigate = async (\n path,\n isHistoryAction = false,\n method = \"GET\",\n formData = {},\n ) => {\n if (!isRunningRef.current) return;\n let routePath = path.replace(\"http://127.0.0.1:5000\", \"\");\n if (!routePath.startsWith(\"/\")) routePath = \"/\" + routePath;\n\n const urlObj = new URL(\"http://localhost\" + routePath);\n const queryParams = {};\n for (let [key, value] of urlObj.searchParams.entries()) {\n queryParams[key] = value;\n }\n\n setBrowserUrl(`http://127.0.0.1:5000${routePath}`);\n if (!isHistoryAction && method === \"GET\") {\n const newHistory = historyRef.current.slice(\n 0,\n historyIndexRef.current + 1,\n );\n newHistory.push(routePath);\n historyRef.current = newHistory;\n historyIndexRef.current = newHistory.length - 1;\n setHistoryState({ history: newHistory, index: newHistory.length - 1 });\n }\n\n if (!window._flaskApp) {\n setBrowserContent(\n '

502 Bad Gateway

',\n );\n return;\n }\n\n try {\n const pyodide = pyodideInstanceRef.current;\n if (!pyodide) return;\n window._flaskMethod = method;\n window._flaskFormData = JSON.stringify(formData);\n window._flaskQueryParams = JSON.stringify(queryParams);\n window._flaskCleanPath = urlObj.pathname;\n\n const execCode = `\nimport flask, json, js, traceback\napp = js.window._flaskApp\npath = js.window._flaskCleanPath\nflask.request.method = js.window._flaskMethod\ntry: flask.request.form = json.loads(js.window._flaskFormData)\nexcept: flask.request.form = {}\ntry: flask.request.args = json.loads(js.window._flaskQueryParams)\nexcept: flask.request.args = {}\n\nif path in app.routes:\n if js.window._flaskMethod in app.routes[path]:\n try:\n result = app.routes[path][js.window._flaskMethod]()\n js.window.setBrowserContentJS(str(result), path)\n except Exception as e:\n js.window.setBrowserContentJS(f\"

500 Error

{traceback.format_exc()}

\", path)\n else:\n js.window.setBrowserContentJS(f\"

405 Method Not Allowed

\", path)\nelse:\n js.window.setBrowserContentJS(\"

404 Not Found

\", path)\n `;\n await pyodide.runPythonAsync(execCode);\n } catch (err) {\n setTerminalOutput((prev) => [...prev, `[Router Error]: ${err.message}`]);\n }\n };\n\n const startServer = async () => {\n if (!pyodideReady || !pyodideInstance) return;\n setIsRunning(true);\n setTerminalOutput([\"Starting development server...\"]);\n window._flaskApp = null;\n try {\n await pyodideInstance.runPythonAsync(PYODIDE_MOCK_ENV);\n if (filesRef.current[\"app.py\"] === undefined) {\n throw new Error(\"app.py not found.\");\n }\n await pyodideInstance.runPythonAsync(filesRef.current[\"app.py\"]);\n handleNavigate(\"/\");\n } catch (err) {\n setTerminalOutput((prev) => [...prev, `[Error]:\\n${err.toString()}`]);\n setIsRunning(false);\n }\n };\n\n const stopServer = () => {\n setIsRunning(false);\n window._flaskApp = null;\n setBrowserContent(\n '

Server Offline

',\n );\n setTerminalOutput((prev) => [...prev, \"\\n* Server stopped.\"]);\n };\n\n const handleDownload = () => {\n const blob = new Blob([JSON.stringify(files, null, 2)], {\n type: \"application/json\",\n });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `${projectName.replace(/\\s+/g, \"_\")}_backup.json`;\n a.click();\n URL.revokeObjectURL(url);\n };\n\n const handleUpload = (e) => {\n const file = e.target.files[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = (event) => {\n try {\n const loadedFiles = JSON.parse(event.target.result);\n setFiles(loadedFiles);\n setProjectId(Date.now().toString());\n setProjectName(file.name.replace(\".json\", \"\"));\n resetBrowserState();\n setOpenFiles(Object.keys(loadedFiles).slice(0, 1));\n setActiveFile(Object.keys(loadedFiles)[0] || null);\n } catch (err) {}\n };\n reader.readAsText(file);\n e.target.value = \"\";\n };\n\n const isFolderNode = (path) =>\n Object.keys(files).some((k) => k.startsWith(path + \"/\"));\n const getContextBasePath = () => {\n if (!selectedPath) return \"\";\n if (isFolderNode(selectedPath) || selectedPath.endsWith(\".keep\")) {\n return selectedPath.replace(\"/.keep\", \"\") + \"/\";\n }\n const parts = selectedPath.split(\"/\");\n parts.pop();\n return parts.length ? parts.join(\"/\") + \"/\" : \"\";\n };\n\n const handleFileUpload = (e) => {\n const uploadedFiles = Array.from(e.target.files);\n if (!uploadedFiles.length) return;\n let newOpenFiles = [...openFiles];\n const base = getContextBasePath();\n uploadedFiles.forEach((file) => {\n const newPath = base + file.name;\n const reader = new FileReader();\n reader.onload = (event) => {\n setFiles((prev) => ({ ...prev, [newPath]: event.target.result }));\n if (!newOpenFiles.includes(newPath)) newOpenFiles.push(newPath);\n setOpenFiles([...newOpenFiles]);\n setActiveFile(newPath);\n setSelectedPath(newPath);\n };\n if (file.type.startsWith(\"image/\")) reader.readAsDataURL(file);\n else reader.readAsText(file);\n });\n e.target.value = \"\";\n };\n\n const handleCreateNode = () => {\n if (!newFilePath.trim() || !creatingType) return setCreatingType(null);\n let path = newFilePath.trim();\n if (creatingType === \"folder\") {\n path = path.endsWith(\"/\") ? `${path}.keep` : `${path}/.keep`;\n if (!files[path]) setFiles((prev) => ({ ...prev, [path]: \"\" }));\n setExpandedFolders((prev) => ({\n ...prev,\n [path.replace(\"/.keep\", \"\")]: true,\n }));\n } else {\n if (!files[path]) setFiles((prev) => ({ ...prev, [path]: \"\" }));\n setActiveFile(path);\n if (!openFiles.includes(path)) setOpenFiles((prev) => [...prev, path]);\n }\n setNewFilePath(\"\");\n setCreatingType(null);\n saveProject();\n };\n\n const handleDeleteFile = (path) => {\n const newFiles = { ...files };\n delete newFiles[path];\n setFiles(newFiles);\n const newOpen = openFiles.filter((p) => p !== path);\n setOpenFiles(newOpen);\n if (activeFile === path) {\n setActiveFile(newOpen.length > 0 ? newOpen[newOpen.length - 1] : null);\n }\n saveProject();\n };\n\n const handleDeleteFolder = (folderPath) => {\n const newFiles = { ...files };\n Object.keys(newFiles).forEach((key) => {\n if (key.startsWith(folderPath + \"/\")) delete newFiles[key];\n });\n setFiles(newFiles);\n const newOpen = openFiles.filter((p) => !p.startsWith(folderPath + \"/\"));\n setOpenFiles(newOpen);\n if (activeFile?.startsWith(folderPath + \"/\")) {\n setActiveFile(newOpen.length > 0 ? newOpen[newOpen.length - 1] : null);\n }\n saveProject();\n };\n\n const commitRename = (oldPath, isFolder) => {\n if (!renameValue.trim() || renameValue === oldPath.split(\"/\").pop()) {\n return setRenamingPath(null);\n }\n const parts = oldPath.split(\"/\");\n parts.pop();\n const newPath = (parts.length > 0 ? parts.join(\"/\") + \"/\" : \"\") +\n renameValue.trim();\n const newFiles = { ...files };\n let newOpenFiles = [...openFiles];\n let newActiveFile = activeFile;\n\n if (isFolder) {\n const oldPrefix = oldPath + \"/\";\n const newPrefix = newPath + \"/\";\n Object.keys(newFiles).forEach((key) => {\n if (key.startsWith(oldPrefix)) {\n newFiles[newPrefix + key.substring(oldPrefix.length)] = newFiles[key];\n delete newFiles[key];\n }\n });\n if (newFiles[`${oldPath}/.keep`] !== undefined) {\n newFiles[`${newPath}/.keep`] = newFiles[`${oldPath}/.keep`];\n delete newFiles[`${oldPath}/.keep`];\n }\n newOpenFiles = newOpenFiles.map((p) =>\n p.startsWith(oldPrefix) ? newPrefix + p.substring(oldPrefix.length) : p\n );\n if (newActiveFile?.startsWith(oldPrefix)) {\n newActiveFile = newPrefix + newActiveFile.substring(oldPrefix.length);\n }\n } else {\n newFiles[newPath] = newFiles[oldPath];\n delete newFiles[oldPath];\n newOpenFiles = newOpenFiles.map((p) => p === oldPath ? newPath : p);\n if (newActiveFile === oldPath) newActiveFile = newPath;\n }\n setFiles(newFiles);\n setOpenFiles(newOpenFiles);\n setActiveFile(newActiveFile);\n setRenamingPath(null);\n saveProject();\n };\n\n const escapeHtml = (str) =>\n str\n ? str.replace(/&/g, \"&\").replace(//g, \">\")\n : \"\";\n\n const getFileIcon = (filename) => {\n if (/\\.(png|jpe?g|gif|svg|webp|ico)$/i.test(filename)) {\n return ;\n }\n if (filename.endsWith(\".py\")) {\n return ;\n }\n if (filename.endsWith(\".html\") || filename.endsWith(\".css\")) {\n return ;\n }\n if (filename.endsWith(\".json\")) {\n return ;\n }\n return ;\n };\n\n const buildTree = (filesMap) => {\n const root = {};\n Object.keys(filesMap).forEach((filePath) => {\n const parts = filePath.split(\"/\");\n let current = root;\n for (let i = 0; i < parts.length; i++) {\n if (i === parts.length - 1) {\n if (parts[i] !== \".keep\") {\n current[parts[i]] = {\n type: \"file\",\n path: filePath,\n name: parts[i],\n };\n }\n } else {\n if (!current[parts[i]]) {\n current[parts[i]] = {\n type: \"folder\",\n name: parts[i],\n children: {},\n };\n }\n current = current[parts[i]].children;\n }\n }\n });\n return root;\n };\n\n const renderTree = (node, currentPath = \"\", level = 0) => {\n return Object.keys(node).sort((a, b) => node[a].type === \"folder\" ? -1 : 1)\n .map((name) => {\n const item = node[name];\n const path = currentPath ? `${currentPath}/${name}` : name;\n if (item.type === \"folder\") {\n const isExpanded = expandedFolders[path];\n return (\n

\n {\n setExpandedFolders((p) => ({ ...p, [path]: !p[path] }));\n setSelectedPath(path);\n }}\n >\n

\n {isExpanded\n ? \n : }\n \n {renamingPath === path\n ? (\n setRenameValue(e.target.value)}\n onBlur={() => commitRename(path, true)}\n onKeyDown={(e) =>\n e.key === \"Enter\" && commitRename(path, true)}\n className=\"bg-gray-800 text-gray-200 px-1 outline-none pointer-events-auto w-full\"\n onClick={(e) => e.stopPropagation()}\n />\n )\n : {name}}\n

\n {!renamingPath && (\n

\n {\n e.stopPropagation();\n setRenamingPath(path);\n setRenameValue(name);\n }}\n className=\"hover:text-blue-400\"\n >\n \n \n {\n e.stopPropagation();\n handleDeleteFolder(path);\n }}\n className=\"hover:text-red-400\"\n >\n \n \n

\n )}\n

\n {isExpanded && renderTree(item.children, path, level + 1)}\n \n );\n } else {\n return (\n {\n if (!openFiles.includes(path)) {\n setOpenFiles([...openFiles, path]);\n }\n setActiveFile(path);\n setSelectedPath(path);\n }}\n >\n

\n {getFileIcon(name)}\n {renamingPath === path\n ? (\n setRenameValue(e.target.value)}\n onBlur={() => commitRename(path, false)}\n onKeyDown={(e) =>\n e.key === \"Enter\" && commitRename(path, false)}\n className=\"bg-gray-800 text-gray-200 px-1 outline-none pointer-events-auto w-full\"\n onClick={(e) => e.stopPropagation()}\n />\n )\n : {name}}\n

\n {!renamingPath && (\n

\n {\n e.stopPropagation();\n setRenamingPath(path);\n setRenameValue(name);\n }}\n className=\"hover:text-blue-400\"\n >\n \n \n {\n e.stopPropagation();\n handleDeleteFile(path);\n }}\n className=\"hover:text-red-400\"\n >\n \n \n

\n )}\n \n );\n }\n });\n };\n\n if (currentView === \"home\") {\n return (\n

Start a New Project

\n {[\"Starter\", \"Base\", \"Empty\"].map((t) => (\n handleCreateFromTemplate(t)}\n className=\"flex items-center gap-3 p-4 rounded border border-gray-800 bg-gray-900 hover:border-indigo-500 text-left\"\n >\n {\" \"}\n

{t}

\n \n ))}\n

Recent Projects

\n {homeSavedProjects.map((proj) => (\n handleOpenProjectFromHome(proj.id)}\n className=\"flex flex-col p-4 rounded border border-gray-800 bg-gray-900 hover:bg-gray-800 cursor-pointer group relative\"\n >\n

{proj.name}

{proj.date}

\n handleDeleteProjectFromHome(e, proj.id)}\n className=\"absolute top-2 right-2 text-gray-500 hover:text-red-400 opacity-0 group-hover:opacity-100\"\n >\n \n \n

\n ))}\n

\n \n );\n }\n\n return (\n

\n {/* File Explorer */}\n

\n {\n saveProject();\n setCurrentView(\"home\");\n }}\n className=\"text-indigo-400 hover:text-indigo-300\"\n >\n \n \n setProjectName(e.target.value)}\n onBlur={() => saveProject(projectName)}\n className=\"bg-transparent text-sm font-semibold outline-none w-28 text-center\"\n />\n

\n \n fileInputRef.current?.click()}\n className=\"text-gray-400 hover:text-blue-400\"\n >\n \n \n \n \n \n

\n FILES\n

\n \n fileUploadRef.current?.click()}\n className=\"hover:text-green-400\"\n >\n \n \n {\n setNewFilePath(getContextBasePath());\n setCreatingType(\"file\");\n }}\n className=\"hover:text-indigo-400\"\n >\n \n \n {\n setNewFilePath(getContextBasePath());\n setCreatingType(\"folder\");\n }}\n className=\"hover:text-blue-400\"\n >\n \n \n

\n {renderTree(buildTree(files))}\n {creatingType && (\n setNewFilePath(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && handleCreateNode()}\n onBlur={() => !newFilePath && setCreatingType(null)}\n className=\"w-[90%] mx-2 my-1 bg-gray-800 px-1 py-0.5 text-sm outline-none border border-indigo-500 rounded\"\n />\n )}\n

\n\n {/* Editor & Terminal */}\n

\n {openFiles.map((path) => (\n {\n setActiveFile(path);\n setSelectedPath(path);\n }}\n className={`flex items-center gap-2 px-3 py-2 border-r border-gray-800 cursor-pointer text-sm ${\n activeFile === path\n ? \"bg-gray-800 text-indigo-300\"\n : \"text-gray-500\"\n }`}\n >\n {getFileIcon(path)} {path.split(\"/\").pop()}\n {\n e.stopPropagation();\n setOpenFiles(openFiles.filter((p) => p !== path));\n if (activeFile === path) setActiveFile(null);\n }}\n >\n \n \n

\n ))}\n

\n setIsBrowserVisible(!isBrowserVisible)}\n className=\"flex items-center gap-1 px-2 py-1 bg-gray-800 text-sm rounded\"\n >\n Preview\n \n {!isRunning\n ? (\n \n Run\n \n )\n : (\n \n Stop\n \n )}\n

\n\n

\n {activeFile && files[activeFile] !== undefined\n ? (\n \n setFiles((prev) => ({\n ...prev,\n [activeFile]: e.target.value,\n }))}\n className=\"absolute inset-0 w-full h-full p-4 bg-transparent text-gray-300 font-mono text-sm resize-none outline-none whitespace-pre\"\n spellCheck=\"false\"\n />\n )\n :

Select a file

}\n

\n\n

\n Terminal\n

\n {terminalOutput.map((l, i) =>

{l}

)}\n

\n\n {/* Browser Preview */}\n {isBrowserVisible && (\n \n

\n \n handleNavigate(\n historyState.history[Math.max(0, historyState.index - 1)],\n true,\n )}\n disabled={!isRunning}\n className=\"p-1 hover:bg-gray-300 rounded\"\n >\n \n \n setBrowserUrl(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && handleNavigate(browserUrl)}\n className=\"flex-1 bg-white border px-2 py-0.5 rounded text-sm outline-none\"\n disabled={!isRunning}\n />\n setIsFullscreenBrowser(!isFullscreenBrowser)}\n className=\"p-1 hover:bg-gray-300 rounded\"\n >\n \n \n

\n \n

\n )}\n \n );\n}\n\nif (typeof document !== \"undefined\") {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n const root = createRoot(rootElement);\n root.render();\n }\n}\n\nconst getModuleUrl = () => {\n try {\n return new Function(\"return import.meta.url\")();\n } catch (e) {\n return \"\";\n }\n};\nexport default async function server(request) {\n return new Response(\n `\n \n \n \n \n \n Flask IDE\n \n \n \n

\n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","createdAt",["D",1776972064451],"branchVersion","branchId","8b3f8c04-3db0-11f1-9437-42b51c65c3df","id","8b3e6e1e-3db0-11f1-9437-42b51c65c3df","untitled-1477",["D",1776796388485],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0b99be5d-6b4b-42a7-9e7e-6943d30bfd0f","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019d6ee2-199b-7656-bfa5-3abd2443e6be","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_93":92,"_100":96},"org",{"_93":92,"_94":-5,"_95":96,"_18":54,"_97":98,"_99":25},"branch",{"_13":14,"_32":83,"_43":42,"_84":44,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":45,"_91":92},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","imillyamous","handle","displayName","avatar","","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":147,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":148,"_78":149,"_80":150,"_82":25},"tree",[142],"files",[142],"counts",{"_131":60,"_132":133,"_134":60,"_135":136,"_137":138},"contents",[123],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":124,"_32":28,"_30":31,"_125":-5,"_41":42,"_40":14,"_126":118,"_38":127,"_13":128,"_33":34,"_35":37,"_24":25,"_129":-5,"_27":130},"924ac67c-3f49-11f1-b9db-42b51c65c3df","parentId","latest",["D",1776972064451],7,"label",[28],"pulls","branches",1,"forks","envVars",{"_139":60,"_141":60},"connections",{"_139":60,"_140":60},"count","unfilledCount","emptyCount",{"_43":124,"_32":28,"_30":31,"_125":-5,"_41":42,"_40":14,"_126":118,"_38":143,"_13":128,"_33":34,"_35":37,"_24":25,"_129":-5,"_144":145,"_27":146},["D",1776972064451],"children",[],[28],["D",1776796388485],{"_93":92,"_100":96},{"_93":92,"_94":-5,"_95":96,"_18":54,"_97":98,"_99":25},{"_13":14,"_32":83,"_43":42,"_84":44,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":45,"_91":92},"ctx",{"_76":-5,"_120":184,"_185":186,"_187":188,"_189":25,"_190":25,"_191":25,"_192":118,"_193":-5,"_194":-7,"_195":-7,"_196":60,"_197":25,"_198":25,"_199":-5,"_200":25,"_201":25,"_202":25,"_203":-5},"ENV",{"_155":156,"_157":158,"_159":83,"_160":161,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v8