clou-lang 0.2.0 → 0.3.1

package/README.md

@@ -47,6 +47,7 @@ That's it. Your website opens in the browser.
 clou mysite.clou          # Build and open in browser
 clou build mysite.clou    # Build to HTML
 clou dev mysite.clou      # Live dev server with auto-reload
+clou deploy mysite.clou   # Deploy to the web (one command!)
 clou playground           # Open browser-based live editor
 clou themes               # List all 10 built-in themes
 clou ai                   # Copy AI prompt to clipboard
@@ -56,14 +57,16 @@ clou help                 # Show help
 ## Features
 
 ### Website Mode
-- **19 elements**: page, heading, text, image, video, button, link, input, list, box, row, grid, card, section, navbar, footer, modal, icon, space
+- **30+ elements**: page, heading, text, image, video, button, link, input, list, box, row, grid, card, section, navbar, footer, modal, icon, space, form, table, tabs, accordion, progress, dropdown, textarea, checkbox, audio, code, slider
 - **10 themes**: neon, ocean, sunset, forest, candy, minimal, midnight, retro, glass, aurora
 - **Variables**: `set name to "Alex"` + `{name}` interpolation
 - **Templates**: reusable components with parameters
 - **Animations**: fade, slide, bounce, grow, glow
 - **Multi-page**: `page "About" at "/about":`
 - **Import**: `import "shared.clou"`
+- **Deploy**: `clou deploy mysite.clou` — one command to go live
 - **Styling**: gradients, shadows, rounded corners, responsive grids
+- **Smart errors**: helpful error messages with line numbers and tips
 
 ### Terminal Mode
 - **Print with colors**: `print color green "Success!"`

package/bin/clou.js

@@ -11,14 +11,15 @@
 const fs = require('fs');
 const path = require('path');
 const { buildClou } = require('../src/index');
+const { formatError } = require('../src/errors');
 
 const args = process.argv.slice(2);
 
 function printHelp() {
   console.log(`
   ╔═══════════════════════════════════════╗
-  ║         CLOU Language v0.2            ║
-  ║   Simple enough for kids to code.     ║
+  ║         CLOU Language v0.3            ║
+  ║   Describe it once. Run everywhere.   ║
   ╚═══════════════════════════════════════╝
 
   Usage:
@@ -28,13 +29,26 @@ function printHelp() {
     clou build <file.clou> -o <output>  Build to specific file
     clou dev <file.clou>                Start live dev server
     clou dev <file.clou> -p <port>      Dev server on custom port
+    clou deploy <file.clou>             Deploy to the web (surge)
+    clou deploy <file.clou> --github    Deploy to GitHub Pages
+    clou deploy <file.clou> --netlify   Deploy with Netlify
     clou themes                         List all available themes
+    clou playground                     Open browser-based editor
+    clou ai                             Copy AI prompt to clipboard
     clou help                           Show this help
 
   Examples:
     clou mysite.clou
     clou build mysite.clou -o index.html
     clou dev mysite.clou
+    clou deploy mysite.clou
+
+  Elements (30+):
+    page, heading, text, image, video, button, link,
+    input, textarea, checkbox, dropdown, slider, form,
+    list, box, row, grid, card, section, navbar, footer,
+    modal, icon, space, table, tabs, accordion, progress,
+    audio, code
 
   Themes:
     neon, ocean, sunset, forest, candy,
@@ -121,14 +135,14 @@ function runFile(inputFile) {
   // Auto-detect: terminal app or website?
   if (isTerminalApp(source)) {
     runTerminal(inputFile).catch(err => {
-      console.error(`\n  Clou Error: ${err.message}\n`);
+      console.error(formatError(err, source, inputFile));
       process.exit(1);
     });
     return;
   }
 
   const basePath = path.dirname(path.resolve(inputFile));
-  const result = buildClou(source, { basePath });
+  const result = buildClou(source, { basePath, filename: inputFile });
 
   if (result.pages) {
     // Multi-page build
@@ -153,7 +167,7 @@ function runFile(inputFile) {
 function buildFile(inputFile, outputFile) {
   const source = fs.readFileSync(inputFile, 'utf-8');
   const basePath = path.dirname(path.resolve(inputFile));
-  const result = buildClou(source, { basePath });
+  const result = buildClou(source, { basePath, filename: inputFile });
 
   if (result.pages) {
     const outDir = outputFile ? path.dirname(outputFile) : path.dirname(path.resolve(inputFile));
@@ -235,6 +249,40 @@ if (args[0] === 'playground' || args[0] === 'play') {
   process.exit(0);
 }
 
+// Handle deploy command (before smart detection)
+if (args[0] === 'deploy') {
+  const { ClouDeploy } = require('../src/deploy');
+  const deployFile = args[1];
+
+  if (!deployFile) {
+    console.error('  Error: No input file specified.');
+    console.error('  Usage: clou deploy mysite.clou');
+    process.exit(1);
+  }
+
+  if (!fs.existsSync(deployFile)) {
+    console.error(`  Error: File not found: ${deployFile}`);
+    process.exit(1);
+  }
+
+  let target = 'auto';
+  if (args.includes('--github')) target = 'github';
+  else if (args.includes('--netlify')) target = 'netlify';
+  else if (args.includes('--surge')) target = 'surge';
+
+  const domainIdx = args.indexOf('--domain');
+  const domain = domainIdx !== -1 ? args[domainIdx + 1] : null;
+
+  const deployer = new ClouDeploy(deployFile, { target, domain });
+  deployer.deploy().catch(err => {
+    console.error(`\n  Deploy Error: ${err.message}\n`);
+    process.exit(1);
+  });
+
+  // Don't fall through to other commands
+  return;
+}
+
 // Smart detection: if first arg ends with .clou, treat as "clou run file.clou"
 let command, inputFile;
 
@@ -276,6 +324,9 @@ try {
     process.exit(1);
   }
 } catch (err) {
-  console.error(`\n  Clou Error: ${err.message}\n`);
+  // Read source for error formatting
+  let source = '';
+  try { source = fs.readFileSync(inputFile, 'utf-8'); } catch {}
+  console.error(formatError(err, source, inputFile));
   process.exit(1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clou-lang",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Clou - A programming language so simple, even kids can build websites and terminal apps",
   "main": "src/index.js",
   "bin": {

package/src/compiler.js

@@ -13,6 +13,10 @@ class Compiler {
     this.animations = new Set();
     this.hasModal = false;
     this.hasNavbar = false;
+    this.hasTabs = false;
+    this.hasAccordion = false;
+    this.hasProgress = false;
+    this.hasSlider = false;
     this.hoverStyles = [];
     this.variables = {};
     this.templates = {};
@@ -72,6 +76,10 @@ class Compiler {
     const animationCSS = this.buildAnimationCSS();
     const modalCSS = this.hasModal ? this.buildModalCSS() : '';
     const navbarCSS = this.hasNavbar ? this.buildNavbarCSS() : '';
+    const tabsCSS = this.hasTabs ? this.buildTabsCSS() : '';
+    const accordionCSS = this.hasAccordion ? this.buildAccordionCSS() : '';
+    const progressCSS = this.hasProgress ? this.buildProgressCSS() : '';
+    const sliderCSS = this.hasSlider ? this.buildSliderCSS() : '';
     const hoverCSS = this.hoverStyles.join('\n');
     const themeCSS = this.activeTheme ? `\n  /* Theme: ${this.activeTheme.name} */\n${generateThemeCSS(this.activeTheme)}` : '';
 
@@ -249,6 +257,82 @@ class Compiler {
     display: inline-block;
   }
 
+  .clou-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 16px 0;
+  }
+
+  .clou-table th, .clou-table td {
+    padding: 12px 16px;
+    text-align: left;
+    border-bottom: 1px solid rgba(128,128,128,0.2);
+  }
+
+  .clou-table th {
+    font-weight: 600;
+    opacity: 0.8;
+  }
+
+  .clou-table tr:hover td {
+    background: rgba(128,128,128,0.05);
+  }
+
+  .clou-form {
+    margin: 16px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .clou-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 8px 0;
+    cursor: pointer;
+  }
+
+  .clou-checkbox input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+  }
+
+  .clou-code {
+    background: rgba(0,0,0,0.3);
+    border-radius: 8px;
+    padding: 16px 20px;
+    margin: 12px 0;
+    overflow-x: auto;
+    font-family: 'Fira Code', 'Consolas', monospace;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .clou-audio {
+    width: 100%;
+    max-width: 400px;
+    margin: 8px 0;
+  }
+
+  .clou-dropdown {
+    margin: 8px 0;
+  }
+
+  .clou-dropdown label {
+    display: block;
+    margin-bottom: 6px;
+    font-size: 14px;
+    opacity: 0.8;
+  }
+
+  select.clou-input {
+    width: auto;
+    min-width: 200px;
+    cursor: pointer;
+  }
+
   .clou-footer {
     padding: 40px 20px;
     margin-top: 40px;
@@ -256,7 +340,7 @@ class Compiler {
     opacity: 0.7;
     border-top: 1px solid rgba(128,128,128,0.2);
   }
-${navbarCSS}${modalCSS}${animationCSS}${hoverCSS}${themeCSS}
+${navbarCSS}${modalCSS}${tabsCSS}${accordionCSS}${progressCSS}${sliderCSS}${animationCSS}${hoverCSS}${themeCSS}
   </style>
 </head>
 <body>
@@ -361,6 +445,50 @@ ${scripts}
 `;
   }
 
+  buildTabsCSS() {
+    return `
+  .clou-tabs { margin: 16px 0; }
+  .clou-tab-buttons { display: flex; gap: 0; border-bottom: 2px solid rgba(128,128,128,0.2); margin-bottom: 16px; }
+  .clou-tab-btn { padding: 10px 24px; background: none; border: none; color: inherit; cursor: pointer; font-size: 16px; font-weight: 500; opacity: 0.6; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: opacity 0.2s, border-color 0.2s; }
+  .clou-tab-btn:hover { opacity: 0.9; transform: none; box-shadow: none; }
+  .clou-tab-btn.active { opacity: 1; border-bottom-color: currentColor; }
+  .clou-tab-panel { display: none; }
+  .clou-tab-panel.active { display: block; }
+`;
+  }
+
+  buildAccordionCSS() {
+    return `
+  .clou-accordion { margin: 16px 0; }
+  .clou-panel { border: 1px solid rgba(128,128,128,0.2); border-radius: 8px; margin: 8px 0; overflow: hidden; }
+  .clou-panel-header { padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; transition: background 0.2s; }
+  .clou-panel-header:hover { background: rgba(128,128,128,0.1); }
+  .clou-panel-arrow { transition: transform 0.3s; font-size: 12px; }
+  .clou-panel.open .clou-panel-arrow { transform: rotate(180deg); }
+  .clou-panel-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
+  .clou-panel.open .clou-panel-body { max-height: 500px; padding: 0 20px 16px; }
+`;
+  }
+
+  buildProgressCSS() {
+    const accent = this.buttonColorCSS || '#4A90D9';
+    return `
+  .clou-progress { margin: 12px 0; }
+  .clou-progress-label { font-size: 14px; margin-bottom: 6px; opacity: 0.8; }
+  .clou-progress-bar { width: 100%; height: 12px; background: rgba(128,128,128,0.2); border-radius: 6px; overflow: hidden; }
+  .clou-progress-fill { height: 100%; background: ${accent}; border-radius: 6px; transition: width 0.6s ease; }
+`;
+  }
+
+  buildSliderCSS() {
+    const accent = this.buttonColorCSS || '#4A90D9';
+    return `
+  .clou-slider { margin: 12px 0; }
+  .clou-slider label { display: block; font-size: 14px; margin-bottom: 6px; }
+  .clou-slider input[type="range"] { width: 100%; max-width: 400px; accent-color: ${accent}; }
+`;
+  }
+
   buildAnimationCSS() {
     let css = '';
 
@@ -575,6 +703,139 @@ ${scripts}
                `  </div>`;
       }
 
+      case 'Form': {
+        const id = this.uid();
+        const content = this.compileChildren(node.children || []);
+        this.scripts.push(
+          `document.getElementById('${id}').addEventListener('submit', function(e) {\n` +
+          `    e.preventDefault();\n` +
+          `    alert('Form submitted!');\n` +
+          `  });`
+        );
+        const action = node.action ? ` action="${this.escapeHtml(node.action)}"` : '';
+        return `  <form id="${id}"${action} class="clou-form">\n${content}\n  </form>`;
+      }
+
+      case 'Table': {
+        const rows = (node.children || []).filter(c => c.type === 'Row' || c.type === 'TableRow');
+        let html = '  <table class="clou-table">\n';
+        for (const row of node.children || []) {
+          if (row.type === 'Heading') {
+            // Table heading row
+            html += '    <thead><tr>';
+            const cells = row.value.split(',').map(c => c.trim());
+            for (const cell of cells) {
+              html += `<th>${this.escapeHtml(this.interpolate(cell))}</th>`;
+            }
+            html += '</tr></thead>\n';
+          } else if (row.children) {
+            html += '    <tr>';
+            for (const cell of row.children || []) {
+              if (cell.type === 'Text') {
+                html += `<td>${this.escapeHtml(this.interpolate(cell.value))}</td>`;
+              } else {
+                html += `<td>${this.compileNode(cell)}</td>`;
+              }
+            }
+            html += '</tr>\n';
+          }
+        }
+        html += '  </table>';
+        return html;
+      }
+
+      case 'Tabs': {
+        this.hasTabs = true;
+        const tabId = this.uid();
+        const tabs = (node.children || []).filter(c => c.type === 'Tab');
+        let buttonsHtml = `  <div class="clou-tabs" id="${tabId}">\n    <div class="clou-tab-buttons">`;
+        let panelsHtml = '';
+
+        tabs.forEach((tab, i) => {
+          const active = i === 0 ? ' active' : '';
+          const panelId = `${tabId}-panel-${i}`;
+          buttonsHtml += `\n      <button class="clou-tab-btn${active}" data-panel="${panelId}" onclick="document.querySelectorAll('#${tabId} .clou-tab-btn').forEach(b=>b.classList.remove('active'));this.classList.add('active');document.querySelectorAll('#${tabId} .clou-tab-panel').forEach(p=>p.classList.remove('active'));document.getElementById('${panelId}').classList.add('active');">${this.escapeHtml(this.interpolate(tab.name))}</button>`;
+          const content = this.compileChildren(this.filterContent(tab.children || []));
+          panelsHtml += `\n    <div id="${panelId}" class="clou-tab-panel${active}">\n${content}\n    </div>`;
+        });
+
+        buttonsHtml += `\n    </div>`;
+        return `${buttonsHtml}${panelsHtml}\n  </div>`;
+      }
+
+      case 'Tab':
+        // Handled by Tabs parent
+        return '';
+
+      case 'Accordion': {
+        this.hasAccordion = true;
+        const panels = (node.children || []).filter(c => c.type === 'Panel');
+        let html = '  <div class="clou-accordion">';
+        for (const panel of panels) {
+          const panelId = this.uid();
+          const content = this.compileChildren(this.filterContent(panel.children || []));
+          html += `\n    <div class="clou-panel" id="${panelId}">`;
+          html += `\n      <div class="clou-panel-header" onclick="this.parentElement.classList.toggle('open')">${this.escapeHtml(this.interpolate(panel.name))}<span class="clou-panel-arrow">&#9660;</span></div>`;
+          html += `\n      <div class="clou-panel-body">\n${content}\n      </div>`;
+          html += `\n    </div>`;
+        }
+        html += '\n  </div>';
+        return html;
+      }
+
+      case 'Panel':
+        // Handled by Accordion parent
+        return '';
+
+      case 'Progress': {
+        this.hasProgress = true;
+        const pct = parseInt(node.value, 10) || 0;
+        const label = node.label ? `\n    <div class="clou-progress-label">${this.escapeHtml(this.interpolate(node.label))}</div>` : '';
+        return `  <div class="clou-progress">${label}\n    <div class="clou-progress-bar"><div class="clou-progress-fill" style="width: ${pct}%"></div></div>\n  </div>`;
+      }
+
+      case 'Dropdown': {
+        const id = this.uid();
+        const options = (node.children || []).filter(c => c.type === 'Option');
+        let html = `  <div class="clou-dropdown">\n    <label for="${id}">${this.escapeHtml(this.interpolate(node.label))}</label>\n    <select id="${id}" class="clou-input">`;
+        for (const opt of options) {
+          html += `\n      <option value="${this.escapeHtml(opt.value)}">${this.escapeHtml(this.interpolate(opt.value))}</option>`;
+        }
+        html += '\n    </select>\n  </div>';
+        return html;
+      }
+
+      case 'Option':
+        // Handled by Dropdown parent
+        return '';
+
+      case 'Textarea': {
+        const id = this.uid();
+        const style = this.extractInlineStyles(node.children || []);
+        const styleAttr = style ? ` style="${style}"` : '';
+        return `  <textarea id="${id}" placeholder="${this.escapeHtml(this.interpolate(node.placeholder))}" rows="4"${styleAttr}></textarea>`;
+      }
+
+      case 'Checkbox': {
+        const id = this.uid();
+        return `  <label class="clou-checkbox"><input type="checkbox" id="${id}"> ${this.escapeHtml(this.interpolate(node.label))}</label>`;
+      }
+
+      case 'Audio':
+        return `  <audio src="${this.escapeHtml(node.src)}" controls class="clou-audio"></audio>`;
+
+      case 'Code':
+        return `  <pre class="clou-code"><code>${this.escapeHtml(this.interpolate(node.value))}</code></pre>`;
+
+      case 'Slider': {
+        this.hasSlider = true;
+        const id = this.uid();
+        return `  <div class="clou-slider">\n    <label for="${id}">${this.escapeHtml(this.interpolate(node.label))}</label>\n    <input type="range" id="${id}" min="${node.min}" max="${node.max}">\n  </div>`;
+      }
+
+      case 'Submit':
+        return `  <button type="submit">${this.escapeHtml(this.interpolate(node.label))}</button>`;
+
       case 'Icon':
         return `  <span class="clou-icon">${node.value}</span>`;
 

package/src/deploy.js

@@ -0,0 +1,232 @@
+// Clou Language - Deploy Module
+// Deploys Clou websites with a single command
+
+const fs = require('fs');
+const path = require('path');
+const { execSync, exec } = require('child_process');
+const { buildClou } = require('./index');
+
+class ClouDeploy {
+  constructor(inputFile, options = {}) {
+    this.inputFile = inputFile;
+    this.options = options;
+    this.buildDir = path.join(path.dirname(path.resolve(inputFile)), '_clou_build');
+  }
+
+  // Build the site to a directory
+  build() {
+    console.log('');
+    console.log('  Building site...');
+
+    const source = fs.readFileSync(this.inputFile, 'utf-8');
+    const basePath = path.dirname(path.resolve(this.inputFile));
+    const result = buildClou(source, { basePath });
+
+    // Create build directory
+    if (fs.existsSync(this.buildDir)) {
+      this.rmDir(this.buildDir);
+    }
+    fs.mkdirSync(this.buildDir, { recursive: true });
+
+    if (result.pages) {
+      // Multi-page site
+      for (const [filename, pageData] of Object.entries(result.pages)) {
+        const outPath = path.join(this.buildDir, filename);
+        fs.writeFileSync(outPath, pageData.html, 'utf-8');
+        console.log(`    ${filename}`);
+      }
+    } else {
+      // Single page
+      fs.writeFileSync(path.join(this.buildDir, 'index.html'), result.html, 'utf-8');
+      console.log('    index.html');
+    }
+
+    console.log('  Build complete!');
+    return this.buildDir;
+  }
+
+  // Remove directory recursively
+  rmDir(dir) {
+    if (fs.existsSync(dir)) {
+      fs.readdirSync(dir).forEach(file => {
+        const curPath = path.join(dir, file);
+        if (fs.lstatSync(curPath).isDirectory()) {
+          this.rmDir(curPath);
+        } else {
+          fs.unlinkSync(curPath);
+        }
+      });
+      fs.rmdirSync(dir);
+    }
+  }
+
+  // Check if a command exists
+  commandExists(cmd) {
+    try {
+      if (process.platform === 'win32') {
+        execSync(`where ${cmd}`, { stdio: 'ignore' });
+      } else {
+        execSync(`which ${cmd}`, { stdio: 'ignore' });
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  // Deploy with Surge
+  deploySurge(domain) {
+    console.log('');
+    console.log('  Deploying with Surge...');
+    console.log('');
+
+    try {
+      const cmd = domain
+        ? `surge "${this.buildDir}" ${domain}`
+        : `surge "${this.buildDir}"`;
+      execSync(cmd, { stdio: 'inherit' });
+      console.log('');
+      console.log('  Deploy complete!');
+    } catch (err) {
+      console.error('  Deploy failed. Make sure you have surge installed:');
+      console.error('    npm install -g surge');
+    }
+  }
+
+  // Deploy with GitHub Pages (using gh-pages or gh CLI)
+  deployGithub() {
+    console.log('');
+    console.log('  Deploying to GitHub Pages...');
+
+    try {
+      // Check if we're in a git repo
+      execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
+    } catch {
+      console.error('  Error: Not a git repository. Initialize one with:');
+      console.error('    git init && git remote add origin <your-repo-url>');
+      return;
+    }
+
+    try {
+      // Use gh-pages approach: create orphan branch and push
+      const buildDir = this.buildDir;
+
+      execSync(`git add "${buildDir}"`, { stdio: 'ignore' });
+      execSync('git stash', { stdio: 'ignore' });
+
+      try {
+        execSync('git branch -D gh-pages', { stdio: 'ignore' });
+      } catch { /* branch may not exist */ }
+
+      execSync('git checkout --orphan gh-pages', { stdio: 'ignore' });
+      execSync('git rm -rf .', { stdio: 'ignore' });
+
+      // Copy build files to root
+      const files = fs.readdirSync(buildDir);
+      for (const file of files) {
+        fs.copyFileSync(path.join(buildDir, file), file);
+      }
+
+      execSync('git add -A', { stdio: 'ignore' });
+      execSync('git commit -m "Deploy Clou site"', { stdio: 'ignore' });
+      execSync('git push origin gh-pages --force', { stdio: 'inherit' });
+
+      // Go back to previous branch
+      execSync('git checkout -', { stdio: 'ignore' });
+      execSync('git stash pop', { stdio: 'ignore' });
+
+      console.log('');
+      console.log('  Deployed to GitHub Pages!');
+      console.log('  Enable Pages in your repo settings (branch: gh-pages)');
+    } catch (err) {
+      console.error('  Deploy failed: ' + err.message);
+      // Try to recover
+      try { execSync('git checkout -', { stdio: 'ignore' }); } catch {}
+      try { execSync('git stash pop', { stdio: 'ignore' }); } catch {}
+    }
+  }
+
+  // Deploy with Netlify CLI
+  deployNetlify() {
+    console.log('');
+    console.log('  Deploying with Netlify...');
+    console.log('');
+
+    try {
+      execSync(`netlify deploy --prod --dir="${this.buildDir}"`, { stdio: 'inherit' });
+      console.log('');
+      console.log('  Deploy complete!');
+    } catch (err) {
+      console.error('  Deploy failed. Make sure you have netlify-cli installed:');
+      console.error('    npm install -g netlify-cli');
+    }
+  }
+
+  // Main deploy function
+  async deploy() {
+    // Step 1: Build
+    this.build();
+
+    const target = this.options.target || 'auto';
+    const domain = this.options.domain || null;
+
+    // Step 2: Deploy based on target
+    if (target === 'surge' || target === 'auto') {
+      if (this.commandExists('surge')) {
+        this.deploySurge(domain);
+        return;
+      }
+      if (target === 'surge') {
+        console.log('');
+        console.log('  Surge not found. Install it with:');
+        console.log('    npm install -g surge');
+        console.log('');
+        console.log('  Then run: clou deploy ' + this.inputFile);
+        return;
+      }
+    }
+
+    if (target === 'github') {
+      this.deployGithub();
+      return;
+    }
+
+    if (target === 'netlify') {
+      if (this.commandExists('netlify')) {
+        this.deployNetlify();
+        return;
+      }
+      console.log('');
+      console.log('  Netlify CLI not found. Install it with:');
+      console.log('    npm install -g netlify-cli');
+      return;
+    }
+
+    // Auto mode: no surge found, give options
+    console.log('');
+    console.log('  ╔═══════════════════════════════════════╗');
+    console.log('  ║       Ready to deploy!                ║');
+    console.log('  ╚═══════════════════════════════════════╝');
+    console.log('');
+    console.log('  Your site is built in: _clou_build/');
+    console.log('');
+    console.log('  To deploy, install one of these (pick one):');
+    console.log('');
+    console.log('  1. Surge (easiest - recommended):');
+    console.log('     npm install -g surge');
+    console.log('     clou deploy ' + this.inputFile);
+    console.log('');
+    console.log('  2. Netlify:');
+    console.log('     npm install -g netlify-cli');
+    console.log('     clou deploy ' + this.inputFile + ' --netlify');
+    console.log('');
+    console.log('  3. GitHub Pages:');
+    console.log('     clou deploy ' + this.inputFile + ' --github');
+    console.log('');
+    console.log('  4. Manual: Upload the _clou_build/ folder');
+    console.log('     to any web host!');
+    console.log('');
+  }
+}
+
+module.exports = { ClouDeploy };

package/src/errors.js

@@ -0,0 +1,182 @@
+// Clou Language - Error Formatting
+// Kid-friendly error messages with line numbers and suggestions
+
+class ClouError extends Error {
+  constructor(message, options = {}) {
+    super(message);
+    this.line = options.line || null;
+    this.col = options.col || null;
+    this.source = options.source || null;
+    this.tip = options.tip || null;
+    this.phase = options.phase || 'build';
+  }
+}
+
+// Format a nice error message with source context
+function formatError(error, source, filename) {
+  const lines = (source || '').split('\n');
+  let output = '\n';
+
+  // Header
+  const file = filename ? ` in ${filename}` : '';
+  output += `  Clou Error${file}\n`;
+  output += '  ' + '-'.repeat(38) + '\n\n';
+
+  // Get line number from error
+  let lineNum = null;
+  let colNum = null;
+
+  if (error.line) {
+    lineNum = error.line;
+    colNum = error.col || 1;
+  } else if (error.token && error.token.line) {
+    lineNum = error.token.line;
+    colNum = error.token.col || 1;
+  } else {
+    // Try to extract line number from error message
+    const lineMatch = error.message.match(/[Ll]ine\s+(\d+)/);
+    if (lineMatch) lineNum = parseInt(lineMatch[1], 10);
+    const colMatch = error.message.match(/[Cc]ol\s+(\d+)/);
+    if (colMatch) colNum = parseInt(colMatch[1], 10);
+  }
+
+  // Show source context
+  if (lineNum && lines.length > 0 && lineNum <= lines.length) {
+    const start = Math.max(0, lineNum - 3);
+    const end = Math.min(lines.length, lineNum + 2);
+
+    for (let i = start; i < end; i++) {
+      const num = String(i + 1).padStart(4);
+      const marker = (i + 1 === lineNum) ? '  > ' : '    ';
+      output += `${marker}${num} | ${lines[i]}\n`;
+
+      // Show pointer to error column
+      if (i + 1 === lineNum && colNum) {
+        const pointer = ' '.repeat(colNum - 1) + '^';
+        output += `         | ${pointer}\n`;
+      }
+    }
+    output += '\n';
+  }
+
+  // Problem description (clean up technical jargon)
+  const friendlyMsg = makeFriendly(error.message);
+  output += `  Problem: ${friendlyMsg}\n`;
+
+  // Tip
+  const tip = error.tip || suggestFix(error.message, lineNum ? lines[lineNum - 1] : '');
+  if (tip) {
+    output += `\n  Tip: ${tip}\n`;
+  }
+
+  output += '\n';
+  return output;
+}
+
+// Make error messages less technical
+function makeFriendly(msg) {
+  // Remove "Line X, Col Y:" prefix since we show it visually
+  msg = msg.replace(/Line \d+, Col \d+:\s*/g, '');
+  msg = msg.replace(/at line \d+, col \d+/g, '');
+
+  // Replace technical parser messages
+  msg = msg.replace(/Expected STRING but got (\w+)/g, (_, got) => {
+    const names = tokenName(got);
+    return `Expected text in quotes (like "hello") but found ${names}`;
+  });
+  msg = msg.replace(/Expected (\w+) but got (\w+)/g, (_, exp, got) => {
+    return `Expected ${tokenName(exp)} but found ${tokenName(got)}`;
+  });
+  msg = msg.replace(/Expected (\w+) but got end of file/g, (_, exp) => {
+    return `File ended too early. Expected ${tokenName(exp)}`;
+  });
+  msg = msg.replace(/Unexpected end of file/g, 'File ended unexpectedly. Something might be missing.');
+  msg = msg.replace(/Unterminated string/g, 'String is not closed. Add a closing quote "');
+
+  return msg.trim();
+}
+
+// Map token types to friendly names
+function tokenName(type) {
+  const names = {
+    'STRING': 'text in quotes ("...")',
+    'NUMBER': 'a number',
+    'COLON': 'a colon (:)',
+    'INDENT': 'indented content',
+    'DEDENT': 'end of block',
+    'NEWLINE': 'a new line',
+    'EOF': 'end of file',
+    'IDENTIFIER': 'a name',
+    'TO': '"to"',
+    'AT': '"at"',
+    'LPAREN': 'an opening parenthesis (',
+    'RPAREN': 'a closing parenthesis )',
+    'COMMA': 'a comma',
+    'PAGE': '"page"',
+    'HEADING': '"heading"',
+    'TEXT': '"text"',
+    'BUTTON': '"button"',
+    'IMAGE': '"image"',
+  };
+  return names[type] || `"${type.toLowerCase()}"`;
+}
+
+// Suggest fixes based on common mistakes
+function suggestFix(msg, line) {
+  if (!line) line = '';
+  const trimmed = line.trim();
+
+  // Missing colon
+  if (msg.includes('Expected COLON') || msg.includes('Expected a colon')) {
+    return 'Add a colon : at the end of the line. Example: page "My Site":';
+  }
+
+  // Unterminated string
+  if (msg.includes('Unterminated') || msg.includes('not closed')) {
+    return 'Every string needs opening and closing quotes: "Hello World"';
+  }
+
+  // Missing string after keyword
+  if (msg.includes('Expected text in quotes') || msg.includes('Expected STRING')) {
+    if (trimmed.startsWith('page')) return 'page needs a title: page "My Website":';
+    if (trimmed.startsWith('heading')) return 'heading needs text: heading "Hello World"';
+    if (trimmed.startsWith('text')) return 'text needs content: text "Some text here"';
+    if (trimmed.startsWith('button')) return 'button needs a label: button "Click me":';
+    if (trimmed.startsWith('image')) return 'image needs a source: image "photo.jpg"';
+    if (trimmed.startsWith('link')) return 'link needs text and url: link "Click" to "page.html"';
+    if (trimmed.startsWith('input')) return 'input needs a placeholder: input "Enter name"';
+    if (trimmed.startsWith('modal')) return 'modal needs a name: modal "popup":';
+    if (trimmed.startsWith('theme')) return 'theme needs a name: theme "neon"';
+    if (trimmed.startsWith('tab')) return 'tab needs a name: tab "First":';
+    if (trimmed.startsWith('panel')) return 'panel needs a title: panel "Question":';
+    if (trimmed.startsWith('dropdown')) return 'dropdown needs a label: dropdown "Choose":';
+    if (trimmed.startsWith('option')) return 'option needs a value: option "Choice A"';
+    if (trimmed.startsWith('textarea')) return 'textarea needs a placeholder: textarea "Write here"';
+    if (trimmed.startsWith('checkbox')) return 'checkbox needs a label: checkbox "I agree"';
+    return 'Add text in quotes after the keyword: keyword "text here"';
+  }
+
+  // Missing TO in link
+  if (msg.includes('Expected "to"') || msg.includes('Expected TO')) {
+    return 'link needs "to" keyword: link "Click" to "https://example.com"';
+  }
+
+  // Indentation issues
+  if (msg.includes('INDENT') || msg.includes('indented')) {
+    return 'Content inside a block needs to be indented with spaces (4 spaces recommended).';
+  }
+
+  // Import errors
+  if (msg.includes('Import error') || msg.includes('Could not read')) {
+    return 'Check the file path. It should be relative to your .clou file.';
+  }
+
+  // File ended early
+  if (msg.includes('ended too early') || msg.includes('ended unexpectedly')) {
+    return 'Your code seems incomplete. Did you forget to close a block or add content?';
+  }
+
+  return null;
+}
+
+module.exports = { ClouError, formatError, makeFriendly, suggestFix };

package/src/index.js

@@ -6,6 +6,7 @@ const path = require('path');
 const { tokenize, LexerError } = require('./lexer');
 const { parse, ParseError } = require('./parser');
 const { compile } = require('./compiler');
+const { ClouError, formatError } = require('./errors');
 
 // Resolve imports: reads imported files and prepends their source
 function resolveImports(source, basePath) {
@@ -28,7 +29,10 @@ function resolveImports(source, basePath) {
       // Replace the import statement with the file contents
       resolved = resolved.replace(match[0], importedSource);
     } catch (err) {
-      throw new Error(`Import error: Could not read "${importFile}" (${fullPath})`);
+      throw new ClouError(`Import error: Could not read "${importFile}"`, {
+        source,
+        tip: `Check that the file "${importFile}" exists at: ${fullPath}`
+      });
     }
   }
 
@@ -37,25 +41,37 @@ function resolveImports(source, basePath) {
 
 function buildClou(source, options = {}) {
   const basePath = options.basePath || process.cwd();
+  const filename = options.filename || null;
 
-  // Step 0: Resolve imports
-  const resolvedSource = resolveImports(source, basePath);
+  try {
+    // Step 0: Resolve imports
+    const resolvedSource = resolveImports(source, basePath);
 
-  // Step 1: Tokenize
-  const tokens = tokenize(resolvedSource);
+    // Step 1: Tokenize
+    const tokens = tokenize(resolvedSource);
 
-  // Step 2: Parse into AST
-  const ast = parse(tokens);
+    // Step 2: Parse into AST
+    const ast = parse(tokens);
 
-  // Step 3: Check for multi-page
-  if (ast.pages.length > 1 && ast.pages.some(p => p.route)) {
-    return buildMultiPage(ast, resolvedSource);
-  }
-
-  // Step 4: Compile to HTML (single page)
-  const html = compile(ast);
+    // Step 3: Check for multi-page
+    if (ast.pages.length > 1 && ast.pages.some(p => p.route)) {
+      return buildMultiPage(ast, resolvedSource);
+    }
 
-  return { tokens, ast, html, pages: null };
+    // Step 4: Compile to HTML (single page)
+    const html = compile(ast);
+
+    return { tokens, ast, html, pages: null };
+  } catch (err) {
+    // Wrap with formatted error if running in CLI mode
+    if (options.formatErrors) {
+      const formatted = formatError(err, source, filename);
+      const wrapped = new Error(formatted);
+      wrapped.formatted = true;
+      throw wrapped;
+    }
+    throw err;
+  }
 }
 
 // Build multiple pages from a multi-page AST
@@ -84,4 +100,4 @@ function buildMultiPage(ast) {
   return { pages, html: pages['index.html'] ? pages['index.html'].html : Object.values(pages)[0].html };
 }
 
-module.exports = { buildClou, resolveImports, tokenize, parse, compile, LexerError, ParseError };
+module.exports = { buildClou, resolveImports, tokenize, parse, compile, LexerError, ParseError, ClouError, formatError };

package/src/lexer.js

@@ -38,6 +38,21 @@ const TokenType = {
   SECTION: 'SECTION',
   SPACE: 'SPACE',
   COLUMNS: 'COLUMNS',
+  FORM: 'FORM',
+  TABLE: 'TABLE',
+  TABS: 'TABS',
+  TAB: 'TAB',
+  ACCORDION: 'ACCORDION',
+  PANEL: 'PANEL',
+  PROGRESS: 'PROGRESS',
+  DROPDOWN: 'DROPDOWN',
+  OPTION: 'OPTION',
+  TEXTAREA: 'TEXTAREA',
+  CHECKBOX: 'CHECKBOX',
+  AUDIO: 'AUDIO',
+  CODE: 'CODE',
+  SLIDER: 'SLIDER',
+  SUBMIT: 'SUBMIT',
 
   // Keywords - Actions
   SHOW: 'SHOW',
@@ -165,6 +180,21 @@ const KEYWORDS = {
   'section': TokenType.SECTION,
   'space': TokenType.SPACE,
   'columns': TokenType.COLUMNS,
+  'form': TokenType.FORM,
+  'table': TokenType.TABLE,
+  'tabs': TokenType.TABS,
+  'tab': TokenType.TAB,
+  'accordion': TokenType.ACCORDION,
+  'panel': TokenType.PANEL,
+  'progress': TokenType.PROGRESS,
+  'dropdown': TokenType.DROPDOWN,
+  'option': TokenType.OPTION,
+  'textarea': TokenType.TEXTAREA,
+  'checkbox': TokenType.CHECKBOX,
+  'audio': TokenType.AUDIO,
+  'code': TokenType.CODE,
+  'slider': TokenType.SLIDER,
+  'submit': TokenType.SUBMIT,
   'show': TokenType.SHOW,
   'message': TokenType.MESSAGE,
   'hide': TokenType.HIDE,

package/src/parser.js

@@ -157,6 +157,21 @@ class Parser {
       case TokenType.GRID: return this.parseGrid();
       case TokenType.SECTION: return this.parseSection();
       case TokenType.SPACE: return this.parseSpace();
+      case TokenType.FORM: return this.parseForm();
+      case TokenType.TABLE: return this.parseTable();
+      case TokenType.TABS: return this.parseTabs();
+      case TokenType.TAB: return this.parseTab();
+      case TokenType.ACCORDION: return this.parseAccordion();
+      case TokenType.PANEL: return this.parsePanel();
+      case TokenType.PROGRESS: return this.parseProgress();
+      case TokenType.DROPDOWN: return this.parseDropdown();
+      case TokenType.OPTION: return this.parseOption();
+      case TokenType.TEXTAREA: return this.parseTextarea();
+      case TokenType.CHECKBOX: return this.parseCheckbox();
+      case TokenType.AUDIO: return this.parseAudio();
+      case TokenType.CODE: return this.parseCode();
+      case TokenType.SLIDER: return this.parseSlider();
+      case TokenType.SUBMIT: return this.parseSubmit();
       case TokenType.SET: return this.parseSetVariable();
       case TokenType.USE: return this.parseUse();
       case TokenType.REPEAT: return this.parseRepeat();
@@ -496,6 +511,185 @@ class Parser {
     return { type: 'Space', value };
   }
 
+  // form:
+  parseForm() {
+    this.expect(TokenType.FORM);
+    const node = { type: 'Form', action: null, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.STRING) {
+      node.action = this.advance().value;
+    }
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // table:
+  parseTable() {
+    this.expect(TokenType.TABLE);
+    const node = { type: 'Table', children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // tabs:
+  parseTabs() {
+    this.expect(TokenType.TABS);
+    const node = { type: 'Tabs', children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // tab "name":
+  parseTab() {
+    this.expect(TokenType.TAB);
+    const name = this.expect(TokenType.STRING).value;
+    const node = { type: 'Tab', name, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // accordion:
+  parseAccordion() {
+    this.expect(TokenType.ACCORDION);
+    const node = { type: 'Accordion', children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // panel "title":
+  parsePanel() {
+    this.expect(TokenType.PANEL);
+    const name = this.expect(TokenType.STRING).value;
+    const node = { type: 'Panel', name, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // progress 75  OR  progress 75 "Label"
+  parseProgress() {
+    this.expect(TokenType.PROGRESS);
+    const value = this.expect(TokenType.NUMBER).value;
+    let label = null;
+    if (this.peek() && this.peek().type === TokenType.STRING) {
+      label = this.advance().value;
+    }
+    return { type: 'Progress', value, label };
+  }
+
+  // dropdown "label":
+  parseDropdown() {
+    this.expect(TokenType.DROPDOWN);
+    const label = this.expect(TokenType.STRING).value;
+    const node = { type: 'Dropdown', label, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // option "value"
+  parseOption() {
+    this.expect(TokenType.OPTION);
+    const value = this.expect(TokenType.STRING).value;
+    return { type: 'Option', value };
+  }
+
+  // textarea "placeholder"
+  parseTextarea() {
+    this.expect(TokenType.TEXTAREA);
+    const placeholder = this.expect(TokenType.STRING).value;
+    const node = { type: 'Textarea', placeholder, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // checkbox "label"
+  parseCheckbox() {
+    this.expect(TokenType.CHECKBOX);
+    const label = this.expect(TokenType.STRING).value;
+    return { type: 'Checkbox', label };
+  }
+
+  // audio "src"
+  parseAudio() {
+    this.expect(TokenType.AUDIO);
+    const src = this.expect(TokenType.STRING).value;
+    return { type: 'Audio', src };
+  }
+
+  // code "content"
+  parseCode() {
+    this.expect(TokenType.CODE);
+    const value = this.expect(TokenType.STRING).value;
+    return { type: 'Code', value };
+  }
+
+  // slider "label" 0 to 100
+  parseSlider() {
+    this.expect(TokenType.SLIDER);
+    const label = this.expect(TokenType.STRING).value;
+    let min = '0', max = '100';
+    if (this.peek() && this.peek().type === TokenType.NUMBER) {
+      min = this.advance().value;
+      this.expect(TokenType.TO);
+      max = this.expect(TokenType.NUMBER).value;
+    }
+    return { type: 'Slider', label, min, max };
+  }
+
+  // submit "text"
+  parseSubmit() {
+    this.expect(TokenType.SUBMIT);
+    const label = this.expect(TokenType.STRING).value;
+    return { type: 'Submit', label };
+  }
+
   // button "text":
   parseButton() {
     this.expect(TokenType.BUTTON);