@yakuzaa/jade 0.1.4 → 0.1.6

package/commands/compilar.js

@@ -13,7 +13,7 @@
 
 import { spawn } from 'child_process';
 import { resolve, basename, dirname, join } from 'path';
-import { existsSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
 import { createRequire } from 'module';
 import { fileURLToPath } from 'url';
 import { gerarHTML_dist } from './html.js';
@@ -99,7 +99,33 @@ export async function compilar(args) {
 
   // Geração de HTML (a menos que --so-wasm)
   if (!soWasm) {
-    const nomeProjeto = basename(arquivo, '.jd');
-    await gerarHTML_dist({ prefixo, nome: nomeProjeto });
+    // Lê jade.config.json se existir (tema, nome do projeto)
+    let tema = {};
+    let nomeProjeto = basename(arquivo, '.jd');
+    const configCandidatos = [
+      join(process.cwd(), 'config', 'jade.config.json'),
+      join(process.cwd(), 'jade.config.json'),
+    ];
+    for (const cfg of configCandidatos) {
+      if (existsSync(cfg)) {
+        try {
+          const c = JSON.parse(readFileSync(cfg, 'utf-8'));
+          if (c.nome) nomeProjeto = c.nome;
+          if (c.tema) tema = c.tema;
+        } catch { /* config inválido — ignora */ }
+        break;
+      }
+    }
+
+    // Seeds: procura seeds.json na raiz do projeto
+    const seedsOrigem = (() => {
+      const candidatos = [
+        join(process.cwd(), 'seeds.json'),
+        join(process.cwd(), 'seeds', 'seeds.json'),
+      ];
+      return candidatos.find(p => existsSync(p)) ?? null;
+    })();
+
+    await gerarHTML_dist({ prefixo, nome: nomeProjeto, tema, seedsOrigem });
   }
 }

package/commands/html.js

@@ -11,7 +11,7 @@
  * Não depende de bundler no projeto do usuário.
  */
 
-import { readFileSync, writeFileSync, copyFileSync, existsSync, mkdirSync } from 'fs';
+import { writeFileSync, copyFileSync, existsSync, mkdirSync } from 'fs';
 import { resolve, dirname, join, basename } from 'path';
 import { createRequire } from 'module';
 
@@ -19,25 +19,22 @@ const require = createRequire(import.meta.url);
 
 // ── Cores ─────────────────────────────────────────────────────────────────────
 
-const verde  = (s) => `\x1b[1;32m${s}\x1b[0m`;
-const azul   = (s) => `\x1b[34m${s}\x1b[0m`;
-const dim    = (s) => `\x1b[2m${s}\x1b[0m`;
+const verde   = (s) => `\x1b[1;32m${s}\x1b[0m`;
+const azul    = (s) => `\x1b[34m${s}\x1b[0m`;
+const dim     = (s) => `\x1b[2m${s}\x1b[0m`;
 const amarelo = (s) => `\x1b[1;33m${s}\x1b[0m`;
-const ok     = () => verde('✓');
-const aviso  = () => amarelo('⚠');
+const ok      = () => verde('✓');
+const aviso   = () => amarelo('⚠');
 
 // ── Localiza o browser.js do runtime instalado ────────────────────────────────
 
 function localizarRuntime() {
-  // Tenta via require.resolve (funciona quando @yakuzaa/jade-runtime está instalado)
   try {
     const pkgPath = require.resolve('@yakuzaa/jade-runtime/package.json');
     const pkgDir  = dirname(pkgPath);
     const browser = join(pkgDir, 'dist', 'browser.js');
     if (existsSync(browser)) return browser;
-  } catch {
-    // não instalado via npm — tenta caminho relativo ao monorepo
-  }
+  } catch { /* não instalado via npm */ }
 
   // Fallback: monorepo local (desenvolvimento)
   const mono = resolve(dirname(new URL(import.meta.url).pathname), '..', '..', 'jade-runtime', 'dist', 'browser.js');
@@ -46,85 +43,376 @@ function localizarRuntime() {
   return null;
 }
 
+// ── CSS custom properties (tema em português) ─────────────────────────────────
+
+function gerarVariaveisCSS(tema = {}) {
+  const t = {
+    corPrimaria:   tema.corPrimaria   ?? '#2563eb',
+    corSecundaria: tema.corSecundaria ?? '#7c3aed',
+    corTexto:      tema.corTexto      ?? '#0f172a',
+    corTextoMuted: tema.corTextoMuted ?? '#64748b',
+    corFundo:      tema.corFundo      ?? '#f8fafc',
+    corFundoCard:  tema.corFundoCard  ?? '#ffffff',
+    corFundoNav:   tema.corFundoNav   ?? '#1e293b',
+    corBorda:      tema.corBorda      ?? '#e2e8f0',
+    corDestaque:   tema.corDestaque   ?? '#dbeafe',
+    corSucesso:    tema.corSucesso    ?? '#16a34a',
+    corErro:       tema.corErro       ?? '#dc2626',
+    corAviso:      tema.corAviso      ?? '#d97706',
+    raio:          tema.raio          ?? '8px',
+    fonte:         tema.fonte         ?? "system-ui, -apple-system, 'Segoe UI', sans-serif",
+  };
+
+  return `
+  --jade-cor-primaria:    ${t.corPrimaria};
+  --jade-cor-secundaria:  ${t.corSecundaria};
+  --jade-cor-texto:       ${t.corTexto};
+  --jade-cor-texto-muted: ${t.corTextoMuted};
+  --jade-cor-fundo:       ${t.corFundo};
+  --jade-cor-fundo-card:  ${t.corFundoCard};
+  --jade-cor-fundo-nav:   ${t.corFundoNav};
+  --jade-cor-borda:       ${t.corBorda};
+  --jade-cor-destaque:    ${t.corDestaque};
+  --jade-cor-sucesso:     ${t.corSucesso};
+  --jade-cor-erro:        ${t.corErro};
+  --jade-cor-aviso:       ${t.corAviso};
+  --jade-raio:            ${t.raio};
+  --jade-fonte:           ${t.fonte};`.trim();
+}
+
+// ── CSS do shell (layout, nav, conteúdo) ──────────────────────────────────────
+
+function gerarCSS(tema = {}) {
+  return `
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      ${gerarVariaveisCSS(tema)}
+    }
+
+    body {
+      font-family: var(--jade-fonte);
+      background: var(--jade-cor-fundo);
+      color: var(--jade-cor-texto);
+      min-height: 100dvh;
+    }
+
+    /* Layout principal */
+    #jade-app {
+      display: flex;
+      min-height: 100dvh;
+    }
+
+    /* Nav lateral */
+    #jade-nav {
+      width: 240px;
+      min-height: 100dvh;
+      background: var(--jade-cor-fundo-nav);
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      position: sticky;
+      top: 0;
+      height: 100dvh;
+      overflow-y: auto;
+    }
+
+    #jade-nav-header {
+      padding: 20px 16px 12px;
+      border-bottom: 1px solid rgba(255,255,255,0.08);
+    }
+
+    #jade-nav-titulo {
+      font-size: 0.875rem;
+      font-weight: 700;
+      color: #fff;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    #jade-nav-versao {
+      font-size: 0.7rem;
+      color: rgba(255,255,255,0.35);
+      margin-top: 2px;
+    }
+
+    #jade-nav-lista {
+      flex: 1;
+      padding: 8px 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .jade-nav-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 9px 12px;
+      border: none;
+      border-radius: var(--jade-raio);
+      background: transparent;
+      color: rgba(255,255,255,0.6);
+      font-size: 0.875rem;
+      font-family: var(--jade-fonte);
+      cursor: pointer;
+      text-align: left;
+      transition: background 0.15s, color 0.15s;
+    }
+
+    .jade-nav-item:hover {
+      background: rgba(255,255,255,0.07);
+      color: rgba(255,255,255,0.9);
+    }
+
+    .jade-nav-ativo {
+      background: var(--jade-cor-primaria) !important;
+      color: #fff !important;
+    }
+
+    .jade-nav-icone { font-size: 1rem; }
+
+    /* Área de conteúdo */
+    #jade-conteudo {
+      flex: 1;
+      min-width: 0;
+      padding: 24px;
+      overflow-y: auto;
+    }
+
+    /* Carregando */
+    #jade-carregando {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100dvh;
+      color: var(--jade-cor-texto-muted);
+      font-size: 0.9rem;
+      gap: 10px;
+    }
+
+    .jade-spinner {
+      width: 20px; height: 20px;
+      border: 2px solid var(--jade-cor-borda);
+      border-top-color: var(--jade-cor-primaria);
+      border-radius: 50%;
+      animation: jade-giro 0.7s linear infinite;
+    }
+
+    @keyframes jade-giro { to { transform: rotate(360deg); } }
+
+    /* Mobile: nav vira barra inferior */
+    @media (max-width: 640px) {
+      #jade-app { flex-direction: column-reverse; }
+
+      #jade-nav {
+        width: 100%;
+        min-height: auto;
+        height: auto;
+        position: sticky;
+        bottom: 0;
+        top: auto;
+        border-top: 1px solid rgba(255,255,255,0.1);
+      }
+
+      #jade-nav-header { display: none; }
+
+      #jade-nav-lista {
+        flex-direction: row;
+        overflow-x: auto;
+        padding: 6px 8px;
+        gap: 4px;
+      }
+
+      .jade-nav-item {
+        flex-direction: column;
+        gap: 2px;
+        padding: 6px 12px;
+        font-size: 0.7rem;
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
+      .jade-nav-icone { font-size: 1.2rem; }
+
+      #jade-conteudo { padding: 16px; }
+    }
+  `.trim();
+}
+
 // ── Bootstrap JS inline no index.html ────────────────────────────────────────
 
-function bootstrap(wasmFile, uiFile) {
+function gerarBootstrap(uiArquivo, wasmArquivo, nomeApp) {
   return `
-    import { JadeRuntime, UIEngine } from './runtime.js';
+import { JadeRuntime, UIEngine, LocalDatastore } from './runtime.js';
+
+const NOME_APP    = ${JSON.stringify(nomeApp)};
+const WASM_FILE   = ${JSON.stringify('./' + wasmArquivo)};
+const UI_FILE     = ${JSON.stringify('./' + uiArquivo)};
+const SEEDS_FILE  = './seeds.json';
+
+function icone(nome) {
+  const n = (nome || '').toLowerCase();
+  if (/produto|estoque|item|mercadoria/.test(n)) return '📦';
+  if (/cliente|pessoa|contato|fornecedor/.test(n)) return '👥';
+  if (/pedido|venda|ordem|compra/.test(n)) return '🛒';
+  if (/fiscal|nota|nfe|imposto|tributo/.test(n)) return '🧾';
+  if (/relatorio|relat|estatistica/.test(n)) return '📊';
+  if (/config|configurac|preferencia/.test(n)) return '⚙️';
+  if (/dashboard|painel|resumo|inicio/.test(n)) return '🏠';
+  if (/caixa|pagamento|financ|receber|pagar/.test(n)) return '💰';
+  if (/usuario|user|acesso|perfil/.test(n)) return '👤';
+  if (/moviment|lancament|transac/.test(n)) return '↕️';
+  return '📋';
+}
+
+function coletarEntidades(telas) {
+  const nomes = new Set();
+  for (const tela of telas) {
+    for (const el of tela.elementos || []) {
+      for (const prop of el.propriedades || []) {
+        if (prop.chave === 'entidade' && prop.valor) nomes.add(String(prop.valor));
+      }
+    }
+  }
+  return [...nomes];
+}
 
-    async function iniciar() {
-      const runtime = new JadeRuntime();
-      const ui = new UIEngine(runtime.getMemory());
+async function mudarTela(idx, telas, db, ui) {
+  document.querySelectorAll('.jade-nav-item').forEach((el, i) => {
+    el.classList.toggle('jade-nav-ativo', i === idx);
+  });
+
+  const tela = telas[idx];
+  const container = document.getElementById('jade-conteudo');
+  container.innerHTML = '';
+
+  // Carrega dados do banco local para cada entidade referenciada nesta tela
+  const dadosMap = {};
+  for (const el of tela.elementos || []) {
+    for (const prop of el.propriedades || []) {
+      if (prop.chave === 'entidade' && prop.valor && !dadosMap[prop.valor]) {
+        dadosMap[prop.valor] = await db.find(String(prop.valor)).catch(() => []);
+      }
+    }
+  }
 
-      // Carrega o módulo WASM compilado
-      const resposta = await fetch('./${wasmFile}');
-      await runtime.load(resposta);
+  ui.renderizarTela(tela, container, dadosMap);
+}
 
-      // Carrega descritores de tela gerados pelo compilador
-      const telas = await fetch('./${uiFile}').then(r => r.json()).catch(() => []);
+async function iniciar() {
+  // 1. Carrega descritores de tela compilados (.jade-ui.json)
+  const telas = await fetch(UI_FILE).then(r => r.json()).catch(() => []);
 
-      const container = document.getElementById('app');
+  // 2. Inicializa banco local com as entidades declaradas nas telas
+  const entidades = coletarEntidades(telas);
+  const db = new LocalDatastore(NOME_APP, entidades);
+  await db.init();
 
-      if (telas.length > 0) {
-        // renderizarTela: lê o descriptor do compilador e decide O COMO automaticamente
-        ui.renderizarTela(telas[0], container);
-      } else {
-        container.innerHTML = '<p style="font-family:sans-serif;padding:2rem">App JADE carregado. Nenhuma tela declarada.</p>';
+  // 3. Carrega seeds.json na primeira execução (tabelas vazias)
+  try {
+    const seeds = await fetch(SEEDS_FILE).then(r => { if (!r.ok) throw 0; return r.json(); });
+    for (const [entidade, registros] of Object.entries(seeds)) {
+      const existentes = await db.find(entidade).catch(() => []);
+      if (existentes.length === 0) {
+        for (const reg of registros) {
+          await db.insert(entidade, reg).catch(() => {});
+        }
       }
     }
+  } catch { /* sem seeds ou já populado */ }
 
-    iniciar().catch(e => {
-      document.getElementById('app').innerHTML =
-        \`<p style="font-family:sans-serif;color:#dc2626;padding:2rem">
-          <strong>Erro ao iniciar:</strong> \${e.message}
-        </p>\`;
-      console.error('[JADE]', e);
-    });
-  `.trim();
+  // 4. Carrega WASM (lógica de negócio compilada)
+  const runtime = new JadeRuntime();
+  try {
+    const resp = await fetch(WASM_FILE);
+    if (resp.ok) await runtime.load(resp);
+  } catch { /* WASM ausente se o arquivo só tem telas */ }
+
+  const ui = new UIEngine(runtime.getMemory());
+
+  // 5. Remove tela de carregamento
+  document.getElementById('jade-carregando')?.remove();
+  document.getElementById('jade-app').style.display = '';
+
+  if (telas.length === 0) {
+    document.getElementById('jade-conteudo').innerHTML =
+      '<p style="color:var(--jade-cor-texto-muted);padding:2rem">Nenhuma tela declarada.</p>';
+    return;
+  }
+
+  // 6. Constrói nav a partir dos descritores
+  const nav = document.getElementById('jade-nav-lista');
+  telas.forEach((tela, i) => {
+    const btn = document.createElement('button');
+    btn.className = 'jade-nav-item' + (i === 0 ? ' jade-nav-ativo' : '');
+    btn.dataset.idx = String(i);
+    btn.innerHTML =
+      '<span class="jade-nav-icone">' + icone(tela.nome) + '</span>' +
+      '<span>' + (tela.titulo || tela.nome) + '</span>';
+    btn.addEventListener('click', () => mudarTela(i, telas, db, ui));
+    nav.appendChild(btn);
+  });
+
+  // 7. Renderiza primeira tela
+  await mudarTela(0, telas, db, ui);
+}
+
+iniciar().catch(e => {
+  document.getElementById('jade-carregando')?.remove();
+  const app = document.getElementById('jade-app');
+  app.style.display = '';
+  app.innerHTML =
+    '<p style="padding:2rem;color:var(--jade-cor-erro)">' +
+    '<strong>Erro ao iniciar:</strong> ' + e.message + '</p>';
+  console.error('[JADE]', e);
+});
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('./sw.js').catch(() => {});
+}
+`.trim();
 }
 
 // ── HTML shell ────────────────────────────────────────────────────────────────
 
-function gerarHTML(nome, wasmFile, uiFile, corTema = '#2563eb') {
+function gerarHTML(nome, wasmFile, uiFile, tema = {}) {
+  const corPrimaria = tema.corPrimaria ?? '#2563eb';
+
   return `<!DOCTYPE html>
 <html lang="pt-BR">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-  <meta name="theme-color" content="${corTema}">
+  <meta name="theme-color" content="${corPrimaria}">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <title>${nome}</title>
   <link rel="manifest" href="manifest.json">
   <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: system-ui, -apple-system, sans-serif; background: #f9fafb; }
-    #app { min-height: 100dvh; }
-    #jade-carregando {
-      display: flex; align-items: center; justify-content: center;
-      min-height: 100dvh; font-family: sans-serif; color: #6b7280;
-    }
+${gerarCSS(tema)}
   </style>
 </head>
 <body>
-  <div id="jade-carregando">Carregando...</div>
-  <div id="app" style="display:none"></div>
-  <script type="module">
-    ${bootstrap(wasmFile, uiFile)}
-
-    // Remove tela de carregamento quando o app montar
-    const obs = new MutationObserver(() => {
-      if (document.getElementById('app').children.length > 0) {
-        document.getElementById('jade-carregando').remove();
-        document.getElementById('app').style.display = '';
-        obs.disconnect();
-      }
-    });
-    obs.observe(document.getElementById('app'), { childList: true });
+  <div id="jade-carregando">
+    <div class="jade-spinner"></div>
+    Carregando...
+  </div>
+
+  <div id="jade-app" style="display:none">
+    <nav id="jade-nav">
+      <div id="jade-nav-header">
+        <div id="jade-nav-titulo">${nome}</div>
+        <div id="jade-nav-versao">feito com Jade DSL</div>
+      </div>
+      <div id="jade-nav-lista"></div>
+    </nav>
+    <main id="jade-conteudo"></main>
+  </div>
 
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('./sw.js').catch(() => {});
-    }
+  <script type="module">
+${gerarBootstrap(uiFile, wasmFile, nome)}
   </script>
 </body>
 </html>`;
@@ -132,15 +420,15 @@ function gerarHTML(nome, wasmFile, uiFile, corTema = '#2563eb') {
 
 // ── manifest.json ─────────────────────────────────────────────────────────────
 
-function gerarManifest(nome) {
+function gerarManifest(nome, tema = {}) {
   return JSON.stringify({
     name: nome,
     short_name: nome.slice(0, 12),
     display: 'standalone',
     start_url: '/',
     scope: '/',
-    theme_color: '#2563eb',
-    background_color: '#ffffff',
+    theme_color: tema.corPrimaria ?? '#2563eb',
+    background_color: tema.corFundo ?? '#f8fafc',
     icons: [
       { src: 'icon-192.png', sizes: '192x192', type: 'image/png' },
       { src: 'icon-512.png', sizes: '512x512', type: 'image/png' },
@@ -150,10 +438,10 @@ function gerarManifest(nome) {
 
 // ── service worker ────────────────────────────────────────────────────────────
 
-function gerarSW(nome, wasmFile) {
+function gerarSW(nome, wasmFile, uiFile) {
   const cache = `jade-${nome.toLowerCase().replace(/\s+/g, '-')}-v1`;
   return `const CACHE = '${cache}';
-const ARQUIVOS = ['/', '/index.html', '/${wasmFile}', '/runtime.js', '/manifest.json'];
+const ARQUIVOS = ['/', '/index.html', '/${wasmFile}', '/${uiFile}', '/runtime.js', '/manifest.json'];
 
 self.addEventListener('install', e => {
   e.waitUntil(caches.open(CACHE).then(c => c.addAll(ARQUIVOS).catch(() => {})));
@@ -182,11 +470,18 @@ self.addEventListener('fetch', e => {
 
 // ── Comando principal ─────────────────────────────────────────────────────────
 
-export async function gerarHTML_dist({ prefixo, nome }) {
-  const distDir   = dirname(resolve(prefixo));
-  const baseName  = basename(prefixo);
-  const wasmFile  = `${baseName}.wasm`;
-  const uiFile    = `${baseName}.jade-ui.json`;
+/**
+ * @param {object} opts
+ * @param {string} opts.prefixo    - caminho de saída sem extensão (ex: dist/app)
+ * @param {string} opts.nome       - nome do app (usado no título e manifest)
+ * @param {object} [opts.tema]     - objeto de tema do jade.config.json
+ * @param {string} [opts.seedsOrigem] - caminho absoluto do seeds.json a copiar para dist/
+ */
+export async function gerarHTML_dist({ prefixo, nome, tema = {}, seedsOrigem = null }) {
+  const distDir  = dirname(resolve(prefixo));
+  const baseName = basename(prefixo);
+  const wasmFile = `${baseName}.wasm`;
+  const uiFile   = `${baseName}.jade-ui.json`;
 
   mkdirSync(distDir, { recursive: true });
 
@@ -202,17 +497,22 @@ export async function gerarHTML_dist({ prefixo, nome }) {
   }
 
   // 2. index.html
-  const html = gerarHTML(nome, wasmFile, uiFile);
-  writeFileSync(join(distDir, 'index.html'), html, 'utf-8');
+  writeFileSync(join(distDir, 'index.html'), gerarHTML(nome, wasmFile, uiFile, tema), 'utf-8');
   console.log(`  ${ok()} index.html`);
 
   // 3. manifest.json
-  writeFileSync(join(distDir, 'manifest.json'), gerarManifest(nome), 'utf-8');
+  writeFileSync(join(distDir, 'manifest.json'), gerarManifest(nome, tema), 'utf-8');
   console.log(`  ${ok()} manifest.json`);
 
   // 4. sw.js
-  writeFileSync(join(distDir, 'sw.js'), gerarSW(nome, wasmFile), 'utf-8');
+  writeFileSync(join(distDir, 'sw.js'), gerarSW(nome, wasmFile, uiFile), 'utf-8');
   console.log(`  ${ok()} sw.js`);
 
+  // 5. Copia seeds.json se existir no projeto
+  if (seedsOrigem && existsSync(seedsOrigem)) {
+    copyFileSync(seedsOrigem, join(distDir, 'seeds.json'));
+    console.log(`  ${ok()} seeds.json ${dim('(carga inicial de dados)')}`);
+  }
+
   console.log(`\n  ${azul('→')} para abrir no browser: ${verde('jade servir ' + distDir)}\n`);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yakuzaa/jade",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Jade DSL — linguagem empresarial em português compilada para WebAssembly. Instala compilador + runtime + CLI.",
   "type": "module",
   "bin": {
@@ -17,8 +17,8 @@
     "postinstall": "node postinstall.js"
   },
   "dependencies": {
-    "@yakuzaa/jade-compiler": "^0.1.6",
-    "@yakuzaa/jade-runtime": "^0.1.4"
+    "@yakuzaa/jade-compiler": "^0.1.8",
+    "@yakuzaa/jade-runtime": "^0.1.6"
   },
   "keywords": [
     "jade",