# Gusto Code Editor Editor de código no navegador, inspirado no VS Code, para criar, pré-visualizar e simular execução de HTML, CSS, JavaScript, Python e C/C++ em modo local. ## Masterplan - Oferecer um workspace web simples para estudantes e iniciantes testarem código sem instalar IDEs. - Reproduzir uma experiência próxima ao VS Code: explorer de arquivos, editor central, terminal/preview, bibliotecas, extensões e ações rápidas. - Suportar HTML, CSS, JavaScript, Python e C/C++ com arquivos de exemplo, extensões corretas, criação/remoção de arquivos e download. - Rodar prioritariamente no cliente: HTML/CSS/JS executam em iframe; Python e C/C++ são simulações/parsers limitados. - Manter a aplicação estática, sem build step, Babel, Vite, Monaco ou CodeMirror. ## Tech Stack & Architecture - **Runtime:** aplicação estática carregada por `index.html`. - **React:** `react@19.2.0` via CDN ESM em `esm.sh`. - **ReactDOM:** `react-dom@19.2.0/client` usado em `src/main.js`. - **Templates:** `htm@3.1.1`; componentes usam `html\`...\`` de `src/jsx.js` em vez de JSX compilado. - **Ícones:** `lucide-react` via CDN ESM. - **CSS:** Tailwind CDN em `index.html` + tokens HSL e ajustes globais em `styles/main.css`. - **Capabilities injetadas:** `window.genmb.fn` e `window.genmb.db` em `index.html`. Conexão dos arquivos: - `index.html` define o shell HTML, Tailwind CDN, CSS global, SDKs GenMB Functions/DB e importa `src/main.js`. - `src/main.js` monta `` dentro de `` no elemento `#root`. - `src/mainProviders.js` centraliza tema e toasts através de contexts React. - `src/App.js` contém praticamente todo o produto: samples, workspace, editor, preview, terminal, bibliotecas, extensões, Codex UI, download/reset e execução. - `src/components/Header.js` renderiza cabeçalho, botão de tema e botão Codex quando a extensão está ativa. - `src/jsx.js` faz o binding de `htm` com `React.createElement`. Estado: - O estado principal é local em `src/App.js` via React hooks: arquivos, arquivo ativo, saída do terminal, preview, carregamento/execução, extensões, bibliotecas e painéis abertos. - Tema fica em `ThemeProvider`, persistido em `localStorage` com chave `gusto-theme`. - Toasts ficam em `ToastProvider`; cada aviso expira automaticamente após `4200ms`. - Não há roteamento, autenticação própria ou backend customizado usado pelo app atual. Gotchas importantes: - **Não usar JSX tradicional.** Não existe Babel/Vite. Use sempre `html` de `src/jsx.js`. - Imports externos devem ser URLs ESM compatíveis com navegador. - O editor é um `textarea`, não Monaco/CodeMirror; preservar simplicidade e compatibilidade mobile. - O iframe de preview é a fronteira de execução real para HTML/CSS/JS. - Python e C/C++ não executam código real; não adicionar execução nativa sem sandbox/worker/runtime seguro. - `buildHtmlPreview()` substitui `` e `` e injeta como script inline. - injeta bibliotecas JavaScript CDN habilitadas antes do fechamento do HTML. - A execução JavaScript do usuário fica isolada no iframe, mas ainda deve ser tratada como código não confiável. ### Terminal e execução - O botão de execução usa o arquivo ativo e a linguagem inferida. - HTML/CSS/JS atualizam o preview e/ou geram mensagens no terminal. - Python e C/C++ exibem simulação de saída com base no conteúdo/sample, sem runtime real. - Erros e status são comunicados por terminal e toasts. ### Bibliotecas - O app possui painel de bibliotecas em `src/App.js`. - Bibliotecas JavaScript selecionadas são carregadas por CDN no iframe de preview. - O sample de JavaScript espera: - `confetti` para Canvas Confetti. - `_` para Lodash. - O sample de Python menciona `numpy`, mas isso é apenas parte da simulação; não há Pyodide ou runtime Python instalado. ### Extensões - Painel de extensões local em `src/App.js`. - O botão Codex no header aparece somente quando a extensão Codex está instalada/ativa. - `src/components/Header.js` recebe: - `isCodexInstalled` - `isCodexOpen` - `setIsCodexOpen` - Codex é UI local/simulada; não há integração real com LLM/API no código atual. ### Download e reset - Download exporta o arquivo ativo ou conteúdo gerado localmente pelo navegador. - Reset restaura os samples definidos em `SAMPLES` em `src/App.js`. ### GenMB Functions e Database As capabilities estão disponíveis globalmente, mas o app atual não as utiliza para persistência. API disponível: - `window.genmb.fn.invoke(name, payload, opts)` - `window.genmb.fn.get(name, opts)` - `window.genmb.db..list(params)` - `window.genmb.db.

.getById(id)` - `window.genmb.db.

.create(fields)` - `window.genmb.db.

.update(id, fields)` - `window.genmb.db.

.delete(id)` - `window.genmb.db.

.count(params)` - `window.genmb.db.

.createMany(records)` - `window.genmb.db.

.deleteMany(ids)` Tabelas provisionadas, mas não consumidas pelo app atual: - `projects`, `folders`, `files`, `fileVersions`, `languages`, `codeExecutions`, `libraries`, `projectLibraries`, `extensions`, `userExtensions`, `editorSettings`, `tableName`. Se persistência remota for adicionada, mapear o estado local de `src/App.js` para `projects/files/folders` e registrar execuções em `codeExecutions`. Não misturar isso silenciosamente com o fluxo local atual. ## Design Guidelines - Estética: dark-first, inspirada em editor desktop/VS Code, com painéis, bordas discretas e cards escuros. - Cores vêm de CSS variables HSL em `styles/main.css`. - Primária: verde/emerald (`--primary`). - Accent: roxo (`--accent`). - Warning: amarelo para JavaScript. - Info: azul para HTML. - Success: verde para C/C++. - Tema claro existe via `html:not(.dark)` e é alternado pelo header. - Tipografia: `Inter, ui-sans-serif, system-ui...` definida em `--font-sans`. - Botões têm altura mínima confortável (`min-h-11`), foco visível e microinterações de hover/translate. - Layout deve funcionar em mobile: - evitar larguras fixas rígidas; - manter `textarea` com `font-size: max(16px, 1rem)` para evitar zoom automático no iOS; - preservar classes `safe-top` e `safe-page` para safe areas. ## App Flow 1. Usuário abre `index.html`. 2. `src/main.js` monta o app com providers. 3. Tema é carregado de `localStorage`; padrão é dark. 4. `src/App.js` cria o workspace com arquivos sample. 5. Usuário seleciona arquivo no explorer. 6. Usuário edita no `textarea`. 7. Usuário clica em executar: - HTML/CSS/JS atualizam o iframe e terminal. - Python/C/C++ mostram simulação no terminal. 8. Usuário pode: - alternar tema; - ativar bibliotecas; - instalar/habilitar extensões; - abrir/fechar Codex se instalado; - criar/remover arquivos; - baixar arquivo; - resetar workspace. Edge cases: - Se não houver arquivo ativo, bloquear ações que dependem dele e mostrar toast. - Ao remover arquivo ativo, selecionar outro arquivo existente ou tratar workspace vazio. - Se HTML referencia CSS/JS por nome diferente do arquivo no workspace, nada é injetado. - Bibliotecas CDN podem falhar por rede/CSP; o app não possui fallback local. - Conteúdo executado no iframe pode travar a aba se tiver loops infinitos; não há worker/timeout real. ## Conventions - Componentes React exportados usam PascalCase: `Header`, `Providers`, `App`. - Helpers internos em `src/App.js` usam camelCase: `buildHtmlPreview`, `getLanguageFromFilename`, `getAccentColor`. - Não criar arquivos `.jsx`; todos os componentes atuais são `.js` com `htm`. - Para markup, usar: ```js return html`

...

`; ``` e não JSX. - Para ícones Lucide: ```js import { Play } from 'https://esm.sh/lucide-react?deps=react@19.2.0'; html`<${Play} className='h-5 w-5' />` ``` - Styling é Tailwind inline nos componentes + tokens globais em `styles/main.css`. - Novas cores devem virar CSS variables se forem reutilizadas. - Para adicionar nova linguagem: 1. adicionar sample em `SAMPLES` em `src/App.js`; 2. atualizar `getLanguageFromFilename`; 3. atualizar `getAccentColor`; 4. ajustar lógica de execução/terminal; 5. criar arquivo inicial no workspace; 6. documentar limitações se for simulação. - Para adicionar nova biblioteca: 1. registrar no painel/lista de bibliotecas em `src/App.js`; 2. se for JavaScript visual, injetar CDN em `buildHtmlPreview`; 3. garantir que só seja carregada quando habilitada. - Para adicionar persistência: 1. manter modo local como fallback; 2. usar `window.genmb.db.projects`, `files`, `folders` e `fileVersions`; 3. refletir loading/erro no terminal ou toast; 4. atualizar este documento com o novo fluxo de dados. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.