clou-lang 0.3.1 → 0.3.6

package/ai/clou-ai-prompt.md

@@ -1,6 +1,6 @@
 # Clou Language - AI System Prompt
 
-You are an expert in the **Clou** programming language. Clou is a simple programming language designed to build websites and terminal apps. It's so simple that even kids can use it.
+You are an expert in the **Clou** programming language. Clou is the simplest programming language ever made — designed so even kids can build websites and terminal apps. Its motto: **"Describe it once. Run it everywhere."**
 
 ## How Clou Works
 
@@ -9,8 +9,10 @@ Clou code compiles to HTML/CSS/JS for websites, or runs directly in the terminal
 **Run:** `clou mysite.clou` (auto-detects website vs terminal)
 **Build:** `clou build mysite.clou`
 **Dev server:** `clou dev mysite.clou`
+**Deploy:** `clou deploy mysite.clou`
+**Playground:** `clou playground`
 
-## Website Mode — Full Syntax Reference
+## Website Mode — Full Syntax Reference (30+ Elements)
 
 ```clou
 // Variables
@@ -53,8 +55,45 @@ page "Title" at "/":
     link "text" to "url"    // anchor
     line                    // horizontal rule
     space 40                // vertical spacing (px)
-
-    // Interactive
+    code "let x = 1"        // code block
+    audio "song.mp3"        // audio player
+
+    // Forms & Input
+    form:
+        input "placeholder"
+        textarea "Write here..."
+        checkbox "I agree"
+        dropdown "Country":
+            option "Germany"
+            option "USA"
+            option "Japan"
+        slider "Volume" 0 to 100
+        submit "Send"
+
+    // Data Display
+    table:
+        heading "Name, Role, Status"
+        row:
+            text "Alex"
+            text "Developer"
+            text "Active"
+
+    progress 75 "Loading..."
+
+    // Interactive Elements
+    tabs:
+        tab "Info":
+            text "Info content"
+        tab "Settings":
+            text "Settings content"
+
+    accordion:
+        panel "Question 1":
+            text "Answer 1"
+        panel "Question 2":
+            text "Answer 2"
+
+    // Actions (inside buttons)
     button "Click me":
         show message "Alert text!"
         open "modal-name"
@@ -62,8 +101,6 @@ page "Title" at "/":
         toggle "element-id"
         go to "url"
 
-    input "placeholder"
-
     list:
         text "Item 1"
         text "Item 2"
@@ -142,6 +179,11 @@ app "My App":
     multiply 3 by count
     divide 2 by count
 
+    // Math operators
+    set result to 5 + 3
+    set total to 10 * 2
+    set half to 100 / 4
+
     // Conditions
     if name is "Alex":
         print "Hi Alex!"
@@ -189,6 +231,7 @@ app "My App":
 6. **Templates**: Use templates for any repeated pattern (cards, sections, etc.)
 7. **Comments**: Use `//` for comments.
 8. **Keep it simple**: Clou's power is simplicity. Don't overcomplicate.
+9. **Use new elements**: Prefer form/table/tabs/accordion when appropriate instead of plain boxes.
 
 ## Example: Complete Website
 
@@ -207,7 +250,7 @@ page "{brand}":
 
     navbar "{brand}":
         link "Features" to "#features"
-        link "Pricing" to "#pricing"
+        link "About" to "#about"
 
     section "hero":
         center
@@ -232,8 +275,30 @@ page "{brand}":
             use feature("🔒", "Secure", "Safe by default.")
             use feature("🎨", "Beautiful", "Looks great.")
 
+    section "about":
+        heading "FAQ":
+            huge
+        space 20
+        accordion:
+            panel "What is {brand}?":
+                text "The simplest way to build software."
+            panel "How much does it cost?":
+                text "Free forever."
+            panel "How do I start?":
+                text "npm install -g clou-lang"
+
+    section "contact":
+        center
+        heading "Get in Touch"
+        space 20
+        form:
+            input "Your name"
+            input "Your email"
+            textarea "Your message"
+            submit "Send Message"
+
     footer:
-        text "© 2026 {brand}"
+        text "© 2026 {brand} — Built with Clou"
 ```
 
-When the user asks you to build something with Clou, generate clean, well-structured Clou code following these patterns.
+When the user asks you to build something with Clou, generate clean, well-structured Clou code following these patterns. Use the new elements (form, table, tabs, accordion, progress, dropdown, checkbox, textarea, slider, audio, code) where they make sense.

package/bin/clou.js

@@ -11,14 +11,14 @@
 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.3            ║
+  ║         CLOU Language v0.3.5          ║
   ║   Describe it once. Run everywhere.   ║
   ╚═══════════════════════════════════════╝
 
@@ -91,10 +91,16 @@ function getOutputPath(inputFile, customOutput) {
 
 function openInBrowser(filePath) {
   const absPath = path.resolve(filePath);
-  const { exec } = require('child_process');
+  const { exec, execSync } = require('child_process');
 
   if (process.platform === 'win32') {
-    exec(`start "" "${absPath}"`);
+    // Use start command - escape path for Windows cmd
+    exec(`start "" "${absPath}"`, (err) => {
+      if (err) {
+        // Fallback: use explorer
+        exec(`explorer "${absPath}"`);
+      }
+    });
   } else if (process.platform === 'darwin') {
     exec(`open "${absPath}"`);
   } else {
@@ -132,6 +138,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 => {
@@ -166,6 +178,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 });
 
@@ -243,10 +262,48 @@ if (args[0] === 'ai') {
 }
 
 if (args[0] === 'playground' || args[0] === 'play') {
-  const playgroundPath = path.resolve(__dirname, '..', 'playground', 'index.html');
-  console.log('  Opening Clou Playground...');
-  openInBrowser(playgroundPath);
-  process.exit(0);
+  const playgroundDir = path.resolve(__dirname, '..', 'playground');
+  const playgroundFile = path.join(playgroundDir, 'index.html');
+
+  if (!fs.existsSync(playgroundFile)) {
+    console.error('  Error: Playground files not found.');
+    process.exit(1);
+  }
+
+  // Start a simple HTTP server for the playground
+  const http = require('http');
+  const port = 4000;
+
+  const mimeTypes = {
+    '.html': 'text/html',
+    '.js': 'application/javascript',
+    '.css': 'text/css',
+  };
+
+  const server = http.createServer((req, res) => {
+    let filePath = path.join(playgroundDir, req.url === '/' ? 'index.html' : req.url);
+    const ext = path.extname(filePath);
+    const contentType = mimeTypes[ext] || 'text/plain';
+
+    fs.readFile(filePath, (err, data) => {
+      if (err) {
+        res.writeHead(404);
+        res.end('Not found');
+        return;
+      }
+      res.writeHead(200, { 'Content-Type': contentType });
+      res.end(data);
+    });
+  });
+
+  server.listen(port, () => {
+    console.log(`  Clou Playground running at http://localhost:${port}`);
+    console.log('  Press Ctrl+C to stop.\n');
+    openInBrowser(`http://localhost:${port}`);
+  });
+
+  // Don't exit - keep server running
+  return;
 }
 
 // Handle deploy command (before smart detection)

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.1",
+  "version": "0.3.6",
   "description": "Clou - A programming language so simple, even kids can build websites and terminal apps",
   "main": "src/index.js",
   "bin": {