clou-lang 0.3.5 → 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

@@ -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 {
@@ -256,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/package.json

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