clou-lang 0.3.1 → 0.3.6

package/playground/index.html

@@ -509,6 +509,78 @@ page "{name}'s Portfolio":
     footer:
         text "Sweet Shop © 2026 — Made with Clou"`,
 
+    'New Elements': `page "All Elements":
+    theme "ocean"
+
+    navbar "Clou Demo":
+        link "Forms" to "#forms"
+        link "Data" to "#data"
+        link "Interactive" to "#interactive"
+
+    section "forms":
+        heading "Forms & Inputs":
+            huge
+            animate fade
+        space 20
+        form:
+            input "Your name"
+            input "Your email"
+            textarea "Write a message"
+            checkbox "I agree to the terms"
+            dropdown "Country":
+                option "Germany"
+                option "USA"
+                option "Japan"
+            slider "Volume" 0 to 100
+            submit "Send"
+
+    section "data":
+        heading "Data Display":
+            huge
+        space 20
+        table:
+            heading "Name, Role, Status"
+            row:
+                text "Alex"
+                text "Developer"
+                text "Active"
+            row:
+                text "Sam"
+                text "Designer"
+                text "Away"
+
+        space 20
+        progress 75 "Project Progress"
+        progress 40 "Bug Fixes"
+        space 20
+        code "clou deploy mysite.clou"
+
+    section "interactive":
+        heading "Interactive":
+            huge
+        space 20
+        tabs:
+            tab "About":
+                text "Clou is the simplest language ever."
+                text "Even kids can learn it!"
+            tab "Features":
+                text "30+ elements, 10 themes."
+                text "One command deploy."
+            tab "Code":
+                code "page \\"Hello\\": heading \\"World\\""
+
+        space 20
+        accordion:
+            panel "What is Clou?":
+                text "The simplest programming language for building websites."
+            panel "How do I install it?":
+                text "npm install -g clou-lang"
+            panel "Is it free?":
+                text "Yes! Clou is open source and free forever."
+
+    footer:
+        text "Built with Clou v0.3"`,
+
     'Minimal': `page "Minimal":
     theme "minimal"
 

package/src/errors.js

@@ -1,5 +1,17 @@
 // Clou Language - Error Formatting
-// Kid-friendly error messages with line numbers and suggestions
+// Kid-friendly error messages with line numbers, colors, and typo detection
+
+// ── ANSI Colors ──
+const color = {
+  red: (s) => `\x1b[31m${s}\x1b[0m`,
+  yellow: (s) => `\x1b[33m${s}\x1b[0m`,
+  green: (s) => `\x1b[32m${s}\x1b[0m`,
+  cyan: (s) => `\x1b[36m${s}\x1b[0m`,
+  gray: (s) => `\x1b[90m${s}\x1b[0m`,
+  bold: (s) => `\x1b[1m${s}\x1b[0m`,
+  bgRed: (s) => `\x1b[41m\x1b[37m${s}\x1b[0m`,
+  bgYellow: (s) => `\x1b[43m\x1b[30m${s}\x1b[0m`,
+};
 
 class ClouError extends Error {
   constructor(message, options = {}) {
@@ -12,15 +24,143 @@ class ClouError extends Error {
   }
 }
 
-// Format a nice error message with source context
+// ── All known Clou keywords ──
+const KNOWN_KEYWORDS = [
+  'page', 'title', 'heading', 'text', 'image', 'box', 'link', 'button',
+  'input', 'list', 'item', 'line', 'video', 'navbar', 'footer', 'logo',
+  'card', 'icon', 'modal', 'grid', 'section', 'space', 'columns',
+  'form', 'table', 'tabs', 'tab', 'accordion', 'panel', 'progress',
+  'dropdown', 'option', 'textarea', 'checkbox', 'audio', 'code', 'slider', 'submit',
+  'show', 'message', 'hide', 'toggle', 'go', 'open', 'close',
+  'style', 'background', 'color', 'size', 'bold', 'italic', 'center',
+  'left', 'right', 'rounded', 'shadow', 'padding', 'margin', 'width',
+  'height', 'font', 'gap', 'row', 'gradient', 'border', 'opacity',
+  'hover', 'animate', 'full', 'dark', 'light', 'small', 'big', 'huge',
+  'tiny', 'sticky', 'fixed', 'wrap', 'grow',
+  'set', 'template', 'use', 'repeat', 'theme', 'to', 'and', 'at',
+  'import', 'app', 'print', 'ask', 'save', 'as', 'if', 'else',
+  'is', 'not', 'greater', 'less', 'than', 'or', 'add', 'subtract',
+  'multiply', 'divide', 'by', 'wait', 'read', 'write', 'file', 'run',
+  'exit', 'clear', 'each', 'in', 'while', 'true', 'false',
+  'function', 'call', 'return',
+];
+
+// ── Levenshtein Distance (for typo detection) ──
+function levenshtein(a, b) {
+  const m = a.length, n = b.length;
+  const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+  for (let i = 0; i <= m; i++) dp[i][0] = i;
+  for (let j = 0; j <= n; j++) dp[0][j] = j;
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      dp[i][j] = Math.min(
+        dp[i - 1][j] + 1,
+        dp[i][j - 1] + 1,
+        dp[i - 1][j - 1] + (a[i - 1] !== b[j - 1] ? 1 : 0)
+      );
+    }
+  }
+  return dp[m][n];
+}
+
+// Find closest keyword match
+function findClosest(word) {
+  const lower = word.toLowerCase();
+  if (KNOWN_KEYWORDS.includes(lower)) return null; // exact match
+
+  let best = null;
+  let bestDist = Infinity;
+
+  for (const kw of KNOWN_KEYWORDS) {
+    const dist = levenshtein(lower, kw);
+    // Allow max distance based on word length
+    const maxDist = lower.length <= 3 ? 1 : 2;
+    if (dist <= maxDist && dist < bestDist) {
+      bestDist = dist;
+      best = kw;
+    }
+  }
+
+  return best;
+}
+
+// ── Warning Scanner ──
+// Scans source code for potential typos and issues BEFORE compilation
+function scanWarnings(source, filename) {
+  const lines = source.split('\n');
+  const warnings = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trim();
+
+    // Skip empty lines, comments, strings-only lines
+    if (!trimmed || trimmed.startsWith('//') || trimmed.startsWith('#')) continue;
+
+    // Get the first word on the line
+    const firstWordMatch = trimmed.match(/^([a-zA-Z_-]+)/);
+    if (!firstWordMatch) continue;
+
+    const firstWord = firstWordMatch[1];
+    const lower = firstWord.toLowerCase();
+
+    // Skip if it's a known keyword
+    if (KNOWN_KEYWORDS.includes(lower)) continue;
+
+    // Skip if it looks like a value (after a keyword on same line)
+    // We only warn about words that START a line (likely meant to be a keyword)
+    const indentMatch = line.match(/^(\s*)/);
+    const indent = indentMatch ? indentMatch[1].length : 0;
+
+    // Check for possible typo
+    const suggestion = findClosest(firstWord);
+    if (suggestion) {
+      warnings.push({
+        line: i + 1,
+        col: indent + 1,
+        word: firstWord,
+        suggestion,
+        message: `"${firstWord}" is not a Clou keyword. Did you mean "${suggestion}"?`,
+      });
+    }
+  }
+
+  return warnings;
+}
+
+// ── Format Warnings ──
+function formatWarnings(warnings, source, filename) {
+  if (warnings.length === 0) return '';
+
+  const lines = source.split('\n');
+  let output = '';
+
+  const file = filename ? ` in ${filename}` : '';
+  output += `\n  ${color.bgYellow(' WARNING ')}${color.yellow(` ${warnings.length} possible issue${warnings.length > 1 ? 's' : ''} found${file}`)}\n`;
+  output += `  ${color.gray('-'.repeat(38))}\n\n`;
+
+  for (const warn of warnings) {
+    const lineNum = warn.line;
+    const lineText = lines[lineNum - 1] || '';
+
+    output += `  ${color.yellow('>')} ${color.gray(String(lineNum).padStart(4))} ${color.gray('|')} ${lineText}\n`;
+    const pointer = ' '.repeat(warn.col - 1) + '~'.repeat(warn.word.length);
+    output += `         ${color.gray('|')} ${color.yellow(pointer)}\n`;
+    output += `         ${color.yellow(`Did you mean "${color.bold(warn.suggestion)}"?`)}\n\n`;
+  }
+
+  return output;
+}
+
+// ── Format Error (with colors) ──
 function formatError(error, source, filename) {
   const lines = (source || '').split('\n');
   let output = '\n';
 
-  // Header
+  // Header with red
   const file = filename ? ` in ${filename}` : '';
-  output += `  Clou Error${file}\n`;
-  output += '  ' + '-'.repeat(38) + '\n\n';
+  output += `  ${color.bgRed(' ERROR ')}${color.red(` Clou Error${file}`)}\n`;
+  output += `  ${color.gray('-'.repeat(38))}\n\n`;
 
   // Get line number from error
   let lineNum = null;
@@ -33,40 +173,40 @@ function formatError(error, source, filename) {
     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
+  // Show source context with colors
   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`;
+      if (i + 1 === lineNum) {
+        output += `  ${color.red('>')} ${color.red(num)} ${color.gray('|')} ${lines[i]}\n`;
+        if (colNum) {
+          const pointer = ' '.repeat(colNum - 1) + '^';
+          output += `         ${color.gray('|')} ${color.red(pointer)}\n`;
+        }
+      } else {
+        output += `    ${color.gray(num)} ${color.gray('|')} ${color.gray(lines[i])}\n`;
       }
     }
     output += '\n';
   }
 
-  // Problem description (clean up technical jargon)
+  // Problem description
   const friendlyMsg = makeFriendly(error.message);
-  output += `  Problem: ${friendlyMsg}\n`;
+  output += `  ${color.red('Problem:')} ${friendlyMsg}\n`;
 
   // Tip
   const tip = error.tip || suggestFix(error.message, lineNum ? lines[lineNum - 1] : '');
   if (tip) {
-    output += `\n  Tip: ${tip}\n`;
+    output += `\n  ${color.cyan('Tip:')} ${tip}\n`;
   }
 
   output += '\n';
@@ -75,14 +215,11 @@ function formatError(error, source, filename) {
 
 // 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}`;
+    return `Expected text in quotes (like "hello") but found ${tokenName(got)}`;
   });
   msg = msg.replace(/Expected (\w+) but got (\w+)/g, (_, exp, got) => {
     return `Expected ${tokenName(exp)} but found ${tokenName(got)}`;
@@ -126,17 +263,14 @@ 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"';
@@ -156,22 +290,18 @@ function suggestFix(msg, line) {
     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?';
   }
@@ -179,4 +309,4 @@ function suggestFix(msg, line) {
   return null;
 }
 
-module.exports = { ClouError, formatError, makeFriendly, suggestFix };
+module.exports = { ClouError, formatError, formatWarnings, scanWarnings, findClosest, makeFriendly, suggestFix, color };

package/src/lexer.js

@@ -397,6 +397,15 @@ function tokenize(source) {
         continue;
       }
 
+      // Math operators: +, -, *, /  (but not // which is a comment, and not - in words)
+      if ((ch === '+' || ch === '*') ||
+          (ch === '-' && col + 1 < line.length && line[col + 1] === ' ') ||
+          (ch === '/' && col + 1 < line.length && line[col + 1] !== '/')) {
+        tokens.push(new Token(TokenType.IDENTIFIER, ch, lineNum + 1, col + 1));
+        col++;
+        continue;
+      }
+
       // String literal (double or single quotes)
       if (ch === '"' || ch === "'") {
         const quote = ch;

package/src/terminal-parser.js

@@ -142,6 +142,15 @@ class TerminalParser {
     const name = this.advance().value;
     this.expect(TokenType.TO);
     const value = this.advance().value;
+
+    // Check for math operators: set x to 5 + 3, set x to y * 2
+    const peek = this.peek();
+    if (peek && peek.type === TokenType.IDENTIFIER && ['+', '-', '*', '/'].includes(peek.value)) {
+      const op = this.advance().value;
+      const right = this.advance().value;
+      return { type: 'SetMath', name, left: value, op, right };
+    }
+
     return { type: 'Set', name, value };
   }
 

package/src/terminal-runtime.js

@@ -177,6 +177,21 @@ class TerminalRuntime {
         break;
       }
 
+      case 'SetMath': {
+        const left = this.resolveNum(node.left);
+        const right = this.resolveNum(node.right);
+        let val;
+        switch (node.op) {
+          case '+': val = left + right; break;
+          case '-': val = left - right; break;
+          case '*': val = left * right; break;
+          case '/': val = right !== 0 ? left / right : 0; break;
+          default: val = left;
+        }
+        this.variables[node.name] = Number.isInteger(val) ? String(val) : String(Math.round(val * 100) / 100);
+        break;
+      }
+
       case 'Math': {
         const amount = this.resolveNum(node.amount);
         const current = this.resolveNum(node.varName);