clou-lang 0.3.0 → 0.3.5

package/bin/clou.js

@@ -11,15 +11,15 @@
 const fs = require('fs');
 const path = require('path');
 const { buildClou } = require('../src/index');
-const { formatError } = require('../src/errors');
+const { formatError, formatWarnings, scanWarnings, color } = 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.5          ║
+  ║   Describe it once. Run everywhere.   ║
   ╚═══════════════════════════════════════╝
 
   Usage:
@@ -41,6 +41,14 @@ function printHelp() {
     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,
@@ -124,6 +132,12 @@ async function runTerminal(inputFile) {
 function runFile(inputFile) {
   const source = fs.readFileSync(inputFile, 'utf-8');
 
+  // Scan for warnings (typos, etc.)
+  const warnings = scanWarnings(source, inputFile);
+  if (warnings.length > 0) {
+    console.error(formatWarnings(warnings, source, inputFile));
+  }
+
   // Auto-detect: terminal app or website?
   if (isTerminalApp(source)) {
     runTerminal(inputFile).catch(err => {
@@ -158,6 +172,13 @@ function runFile(inputFile) {
 
 function buildFile(inputFile, outputFile) {
   const source = fs.readFileSync(inputFile, 'utf-8');
+
+  // Scan for warnings (typos, etc.)
+  const warnings = scanWarnings(source, inputFile);
+  if (warnings.length > 0) {
+    console.error(formatWarnings(warnings, source, inputFile));
+  }
+
   const basePath = path.dirname(path.resolve(inputFile));
   const result = buildClou(source, { basePath, filename: inputFile });
 

package/examples/hello.html

@@ -174,6 +174,82 @@
     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;
@@ -192,11 +268,12 @@
   <p>It's so easy, anyone can do it!</p>
   </div>
   <hr>
-  <div class="clou-box">
+
+
+
   <h2>About Me</h2>
   <p>I love coding with Clou because it's simple and fun.</p>
   <img src="https://picsum.photos/600/300" alt="image">
-  </div>
   <hr>
   <div class="clou-row">
   <button id="clou-1">Say Hello</button>
@@ -208,6 +285,7 @@
     <li>Fun to use</li>
     <li>Makes real websites</li>
   </ul>
+
 <script>
 document.getElementById('clou-1').addEventListener('click', function() {
     alert("Hello from Clou!");

package/examples/themes-demo.clou

@@ -11,7 +11,7 @@ template feature-card(emoji, title, desc):
         animate slide
 
 page "{brand} - Theme Showcase":
-    theme "ocean"
+    theme "aurora"
 
     navbar "{brand}":
         link "Features" to "#features"

package/examples/themes-demo.html

@@ -172,6 +172,82 @@
     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;
@@ -231,54 +307,6 @@
   }
   .clou-animate-grow { animation: clou-grow 0.5s ease both; }
 
-  /* Theme: Ocean */
-  body {
-    background: linear-gradient(180deg, #0c1b33 0%, #1a3a5c 50%, #0c1b33 100%);
-    background-attachment: fixed;
-    color: #c8dbe6;
-    font-family: 'Georgia', 'Times New Roman', serif;
-  }
-  button, .clou-button {
-    background-color: #4fc3f7;
-  }
-  button:hover, .clou-button:hover {
-    background-color: #29b6f6;
-  }
-  .clou-card {
-    background: rgba(79, 195, 247, 0.08);
-    border: 1px solid rgba(79, 195, 247, 0.15);
-    backdrop-filter: blur(12px);
-  }
-  .clou-card:hover {
-    background: rgba(79, 195, 247, 0.12);
-    box-shadow: 0 8px 32px rgba(79, 195, 247, 0.15);
-  }
-  .clou-navbar {
-    background: rgba(12, 27, 51, 0.9);
-    backdrop-filter: blur(12px);
-  }
-  input, textarea, .clou-input {
-    background: rgba(79, 195, 247, 0.08);
-    border: 1px solid rgba(79, 195, 247, 0.25);
-    color: #c8dbe6;
-  }
-  input:focus, textarea:focus {
-    border-color: #4fc3f7;
-    box-shadow: 0 0 0 3px #4fc3f733;
-  }
-  h1, h2 {
-    color: #4fc3f7;
-  }
-  a {
-    color: #4fc3f7;
-  }
-  hr {
-    border-top-color: rgba(79, 195, 247, 0.2);
-  }
-  .clou-footer {
-    border-top-color: rgba(79, 195, 247, 0.2);
-  }
-
   </style>
 </head>
 <body>

package/package.json

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

package/playground/clou-browser.js

@@ -45,6 +45,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',
@@ -136,6 +151,10 @@ const TokenType = {
   RPAREN: 'RPAREN',
   COMMA: 'COMMA',
 
+  // Keywords - Imports & Routing
+  IMPORT: 'IMPORT',
+  AT: 'AT',
+
   // Keywords - Connectors
   TO: 'TO',
   AND: 'AND',
@@ -168,6 +187,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,
@@ -247,6 +281,8 @@ const KEYWORDS = {
   'function': TokenType.FUNCTION,
   'call': TokenType.CALL,
   'return': TokenType.RETURN,
+  'import': TokenType.IMPORT,
+  'at': TokenType.AT,
   'to': TokenType.TO,
   'and': TokenType.AND,
 };
@@ -368,6 +404,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;
@@ -995,7 +1040,12 @@ class Parser {
       this.skipNewlines();
       if (!this.peek() || this.peek().type === TokenType.EOF) break;
 
-      if (this.peek().type === TokenType.TEMPLATE) {
+      if (this.peek().type === TokenType.IMPORT) {
+        // imports are handled at a higher level, store as-is
+        const imp = this.parseImport();
+        if (!this.ast_imports) this.ast_imports = [];
+        this.ast_imports.push(imp);
+      } else if (this.peek().type === TokenType.TEMPLATE) {
         templates.push(this.parseTemplate());
       } else if (this.peek().type === TokenType.SET) {
         variables.push(this.parseSetVariable());
@@ -1013,18 +1063,31 @@ class Parser {
       this.skipNewlines();
     }
 
-    return { type: 'Program', pages, styles, templates, variables };
+    return { type: 'Program', pages, styles, templates, variables, imports: this.ast_imports || [] };
   }
 
-  // page "Title":
+  // page "Title":  OR  page "Title" at "/path":
   parsePage() {
     this.expect(TokenType.PAGE);
     const title = this.expect(TokenType.STRING).value;
+    let route = null;
+
+    if (this.match(TokenType.AT)) {
+      route = this.expect(TokenType.STRING).value;
+    }
+
     this.expect(TokenType.COLON);
     this.skipNewlines();
 
     const children = this.parseBlock();
-    return { type: 'Page', title, children };
+    return { type: 'Page', title, route, children };
+  }
+
+  // import "file.clou"
+  parseImport() {
+    this.expect(TokenType.IMPORT);
+    const file = this.expect(TokenType.STRING).value;
+    return { type: 'Import', file };
   }
 
   // Parse an indented block of elements
@@ -1071,6 +1134,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();
@@ -1410,6 +1488,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);
@@ -1809,6 +2066,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 = {};
@@ -1868,6 +2129,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)}` : '';
 
@@ -2045,6 +2310,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;
@@ -2052,7 +2393,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>
@@ -2157,6 +2498,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 = '';
 
@@ -2371,6 +2756,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/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);