npm - clou-lang - Versions diffs - 0.2.0 - Mend

clou-lang 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/LICENSE +21 -0
package/README.md +128 -0
package/ai/clou-ai-prompt.md +239 -0
package/bin/clou.js +281 -0
package/examples/calculator.clou +41 -0
package/examples/hello-terminal.clou +22 -0
package/examples/hello.clou +37 -0
package/examples/hello.html +220 -0
package/examples/multipage/about.html +319 -0
package/examples/multipage/contact.html +308 -0
package/examples/multipage/index.html +322 -0
package/examples/multipage/shared.clou +19 -0
package/examples/multipage/site.clou +102 -0
package/examples/portfolio.clou +51 -0
package/examples/portfolio.html +217 -0
package/examples/quiz.clou +90 -0
package/examples/showcase.clou +136 -0
package/examples/showcase.html +410 -0
package/examples/startup.clou +153 -0
package/examples/startup.html +469 -0
package/examples/themes-demo.clou +117 -0
package/examples/themes-demo.html +429 -0
package/package.json +48 -0
package/playground/clou-browser.js +2576 -0
package/playground/index.html +682 -0
package/src/bundle-browser.js +62 -0
package/src/compiler.js +761 -0
package/src/devserver.js +154 -0
package/src/index.js +87 -0
package/src/lexer.js +456 -0
package/src/parser.js +879 -0
package/src/terminal-parser.js +358 -0
package/src/terminal-runtime.js +310 -0
package/src/themes.js +469 -0

package/playground/index.html ADDED Viewed

@@ -0,0 +1,682 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Clou Playground - Build Websites Live</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+:root {
+  --bg: #0f0f23;
+  --bg2: #1a1a35;
+  --bg3: #252545;
+  --text: #e0e0e0;
+  --accent: #6C63FF;
+  --accent2: #00e5ff;
+  --border: #2a2a4a;
+  --green: #00ff88;
+  --red: #ff6b6b;
+}
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+/* ── Header ── */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  background: var(--bg2);
+  border-bottom: 1px solid var(--border);
+  height: 52px;
+  flex-shrink: 0;
+}
+.logo {
+  font-size: 1.3em;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -0.5px;
+}
+.logo span {
+  -webkit-text-fill-color: #888;
+  font-weight: 400;
+  font-size: 0.75em;
+  margin-left: 8px;
+}
+.header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.theme-select {
+  padding: 6px 12px;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 13px;
+  cursor: pointer;
+  outline: none;
+}
+.theme-select:focus { border-color: var(--accent); }
+.btn {
+  padding: 6px 14px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg3);
+  color: var(--text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.btn:hover { background: var(--accent); color: white; border-color: var(--accent); }
+.btn-accent { background: var(--accent); color: white; border-color: var(--accent); }
+.btn-accent:hover { background: #5a52d5; }
+/* ── Examples Bar ── */
+.examples-bar {
+  display: flex;
+  gap: 6px;
+  padding: 8px 20px;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+.example-btn {
+  padding: 4px 12px;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: transparent;
+  color: #888;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s;
+}
+.example-btn:hover { color: var(--accent); border-color: var(--accent); }
+.example-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(108, 99, 255, 0.1); }
+/* ── Main Split ── */
+.main {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+/* ── Editor Panel ── */
+.editor-panel {
+  width: 45%;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+}
+.panel-header {
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #666;
+  background: var(--bg2);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.status {
+  font-size: 11px;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+}
+.status-ok { color: var(--green); }
+.status-err { color: var(--red); }
+#editor {
+  flex: 1;
+  width: 100%;
+  background: var(--bg);
+  color: #e0e0e0;
+  border: none;
+  outline: none;
+  padding: 16px;
+  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  resize: none;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  white-space: pre;
+  overflow: auto;
+}
+#editor::placeholder { color: #444; }
+/* ── Preview Panel ── */
+.preview-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: white;
+}
+#preview {
+  flex: 1;
+  border: none;
+  width: 100%;
+  height: 100%;
+  background: white;
+}
+/* ── Error Toast ── */
+.error-bar {
+  display: none;
+  padding: 8px 16px;
+  background: rgba(255, 107, 107, 0.1);
+  border-top: 1px solid rgba(255, 107, 107, 0.3);
+  color: var(--red);
+  font-family: monospace;
+  font-size: 13px;
+  max-height: 80px;
+  overflow-y: auto;
+}
+.error-bar.visible { display: block; }
+/* ── Resize Handle ── */
+.resize-handle {
+  width: 4px;
+  cursor: col-resize;
+  background: var(--border);
+  transition: background 0.15s;
+}
+.resize-handle:hover { background: var(--accent); }
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .main { flex-direction: column; }
+  .editor-panel { width: 100%; height: 50%; border-right: none; border-bottom: 1px solid var(--border); }
+  .resize-handle { display: none; }
+}
+</style>
+</head>
+<body>
+<div class="header">
+  <div class="logo">Clou Playground <span>v0.2</span></div>
+  <div class="header-actions">
+    <select class="theme-select" id="themeSelect">
+      <option value="">No Theme</option>
+    </select>
+    <button class="btn" id="copyBtn">Copy HTML</button>
+    <button class="btn btn-accent" id="downloadBtn">Download</button>
+  </div>
+</div>
+<div class="examples-bar" id="examplesBar"></div>
+<div class="main">
+  <div class="editor-panel" id="editorPanel">
+    <div class="panel-header">
+      <span>Editor — .clou</span>
+      <span class="status" id="status"></span>
+    </div>
+    <textarea id="editor" spellcheck="false" placeholder="Write your Clou code here..."></textarea>
+    <div class="error-bar" id="errorBar"></div>
+  </div>
+  <div class="resize-handle" id="resizeHandle"></div>
+  <div class="preview-panel">
+    <div class="panel-header">Preview</div>
+    <iframe id="preview" sandbox="allow-scripts allow-modals"></iframe>
+  </div>
+</div>
+<script src="clou-browser.js"></script>
+<script>
+(function() {
+  const editor = document.getElementById('editor');
+  const preview = document.getElementById('preview');
+  const status = document.getElementById('status');
+  const errorBar = document.getElementById('errorBar');
+  const themeSelect = document.getElementById('themeSelect');
+  const copyBtn = document.getElementById('copyBtn');
+  const downloadBtn = document.getElementById('downloadBtn');
+  const examplesBar = document.getElementById('examplesBar');
+  let lastHtml = '';
+  let compileTimer = null;
+  // ── Populate Themes ──
+  Clou.getThemeNames().forEach(name => {
+    const opt = document.createElement('option');
+    opt.value = name;
+    opt.textContent = name.charAt(0).toUpperCase() + name.slice(1);
+    themeSelect.appendChild(opt);
+  });
+  // ── Examples ──
+  const examples = {
+    'Hello World': `page "My First Website":
+    title "Hello Clou!"
+    box:
+        heading "Welcome!"
+        text "This is my first website made with Clou."
+        text "Edit this code on the left to see changes!"
+    button "Click me":
+        show message "Hello from Clou!"
+style:
+    background color #f0f4f8
+    text color #333
+    button color #4A90D9
+    center`,
+    'Landing Page': `set brand to "SpaceApp"
+template feature(emoji, title, desc):
+    card:
+        icon "{emoji}"
+        heading "{title}"
+        text "{desc}"
+        animate slide
+page "{brand} - Launch Your Ideas":
+    theme "midnight"
+    navbar "{brand}":
+        link "Features" to "#features"
+        link "Pricing" to "#pricing"
+        link "Start" to "#cta"
+    section "hero":
+        center
+        space 30
+        heading "Launch Your Ideas Into Space":
+            huge
+            animate fade
+        text "The fastest way to build and ship your next project.":
+            big
+        space 20
+        row:
+            center
+            button "Get Started":
+                show message "Welcome to {brand}!"
+            button "Learn More":
+                go to "#features"
+        space 30
+    section "features":
+        center
+        heading "Why {brand}?":
+            huge
+        space 20
+        grid:
+            use feature("⚡", "Blazing Fast", "Built for speed from the ground up.")
+            use feature("🔒", "Secure", "Enterprise-grade security by default.")
+            use feature("🎨", "Beautiful", "Stunning UI without the effort.")
+    section "cta":
+        center
+        card:
+            gradient #6C63FF to #00e5ff
+            padding 60
+            center
+            heading "Ready to Launch?":
+                huge
+                animate bounce
+            text "Start building for free today."
+            space 20
+            button "Start Now":
+                show message "Let's go!"`,
+    'Portfolio': `set name to "Alex"
+page "{name}'s Portfolio":
+    theme "glass"
+    navbar "{name}":
+        link "Work" to "#work"
+        link "About" to "#about"
+        link "Contact" to "#contact"
+    section "hero":
+        center
+        space 40
+        heading "Hi, I'm {name}":
+            huge
+            animate fade
+        text "Designer & Developer":
+            big
+        space 40
+    section "work":
+        center
+        heading "My Work":
+            huge
+        space 20
+        grid:
+            card:
+                heading "Project Alpha"
+                text "A mobile app for fitness tracking"
+                animate slide
+            card:
+                heading "Project Beta"
+                text "An e-commerce website redesign"
+                animate slide
+            card:
+                heading "Project Gamma"
+                text "A dashboard for data analytics"
+                animate slide
+    section "contact":
+        center
+        card:
+            center
+            padding 40
+            heading "Get In Touch"
+            space 10
+            input "Your email"
+            input "Your message"
+            space 10
+            button "Send":
+                show message "Thanks! I'll get back to you soon."
+    footer:
+        text "© 2026 {name}. Built with Clou."`,
+    'Neon Theme': `page "Neon Vibes":
+    theme "neon"
+    navbar "NEON":
+        link "Home" to "#"
+        link "About" to "#"
+        link "Contact" to "#"
+    section "hero":
+        center
+        space 30
+        heading "Welcome to the Future":
+            huge
+            animate fade
+        text "Cyberpunk aesthetics. One line of code.":
+            big
+        space 20
+        button "Enter the Grid":
+            show message "Welcome, hacker."
+        space 30
+    grid:
+        card:
+            icon "🟢"
+            heading "Neon Glow"
+            text "Electric green on pure black."
+            animate slide
+        card:
+            icon "⚡"
+            heading "Gradient Text"
+            text "Headers shimmer with color."
+            animate slide
+        card:
+            icon "🌃"
+            heading "Dark Mode"
+            text "Easy on the eyes, hard to forget."
+            animate slide
+    footer:
+        text "Powered by Clou"`,
+    'Candy Theme': `page "Sweet Shop":
+    theme "candy"
+    navbar "Sweet Shop":
+        link "Menu" to "#menu"
+        link "About" to "#about"
+        link "Order" to "#order"
+    section "hero":
+        center
+        space 30
+        icon "🍬"
+        heading "Life is Sweet":
+            huge
+            animate bounce
+        text "The cutest little candy shop on the internet.":
+            big
+        space 30
+    section "menu":
+        center
+        heading "Our Treats":
+            huge
+        space 20
+        grid:
+            card:
+                icon "🍩"
+                heading "Donuts"
+                text "Freshly glazed, always amazing."
+                animate slide
+            card:
+                icon "🧁"
+                heading "Cupcakes"
+                text "Fluffy clouds of sweetness."
+                animate slide
+            card:
+                icon "🍪"
+                heading "Cookies"
+                text "Crunchy on the outside, soft inside."
+                animate slide
+    section "order":
+        center
+        card:
+            center
+            padding 40
+            heading "Place an Order"
+            space 10
+            input "Your name"
+            input "What would you like?"
+            space 10
+            button "Order Now":
+                show message "Order placed! 🍬"
+    footer:
+        text "Sweet Shop © 2026 — Made with Clou"`,
+    'Minimal': `page "Minimal":
+    theme "minimal"
+    section "main":
+        space 40
+        heading "Less is more.":
+            huge
+            animate fade
+        space 10
+        text "A clean canvas for your ideas. No noise. No distractions."
+        text "Just content that matters."
+        space 30
+        line
+        space 30
+        heading "Features"
+        space 10
+        list:
+            text "Clean typography"
+            text "Focused layout"
+            text "Black and white"
+            text "Zero clutter"
+        space 30
+        line
+        space 30
+        button "Get Started":
+            show message "Keep it simple."
+        space 40
+    footer:
+        text "Built with Clou — the simplest way to build websites."`,
+  };
+  // Create example buttons
+  Object.keys(examples).forEach((name, i) => {
+    const btn = document.createElement('button');
+    btn.className = 'example-btn' + (i === 0 ? ' active' : '');
+    btn.textContent = name;
+    btn.onclick = () => {
+      editor.value = examples[name];
+      document.querySelectorAll('.example-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      // Auto-detect theme
+      const themeMatch = examples[name].match(/theme\s+"(\w+)"/);
+      themeSelect.value = themeMatch ? themeMatch[1] : '';
+      compileAndRender();
+    };
+    examplesBar.appendChild(btn);
+  });
+  // ── Compile & Render ──
+  function compileAndRender() {
+    let source = editor.value;
+    // If theme selected and not already in code, inject it
+    const selectedTheme = themeSelect.value;
+    if (selectedTheme && !source.includes('theme "')) {
+      // Find page line and inject theme after it
+      const lines = source.split('\n');
+      let injected = false;
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].trim().startsWith('page ')) {
+          // Find next indented line
+          const indent = lines[i + 1] ? lines[i + 1].match(/^(\s*)/)[1] : '    ';
+          lines.splice(i + 1, 0, indent + 'theme "' + selectedTheme + '"');
+          injected = true;
+          break;
+        }
+      }
+      if (!injected) {
+        source = 'theme "' + selectedTheme + '"\n' + source;
+      } else {
+        source = lines.join('\n');
+      }
+    }
+    try {
+      const result = Clou.buildClou(source);
+      lastHtml = result.html;
+      // Write to iframe
+      const doc = preview.contentDocument || preview.contentWindow.document;
+      doc.open();
+      doc.write(lastHtml);
+      doc.close();
+      status.textContent = 'Compiled';
+      status.className = 'status status-ok';
+      errorBar.classList.remove('visible');
+    } catch (err) {
+      status.textContent = 'Error';
+      status.className = 'status status-err';
+      errorBar.textContent = err.message;
+      errorBar.classList.add('visible');
+    }
+  }
+  // ── Auto-compile on input ──
+  editor.addEventListener('input', () => {
+    clearTimeout(compileTimer);
+    compileTimer = setTimeout(compileAndRender, 200);
+  });
+  // ── Tab key support ──
+  editor.addEventListener('keydown', (e) => {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const start = editor.selectionStart;
+      const end = editor.selectionEnd;
+      editor.value = editor.value.substring(0, start) + '    ' + editor.value.substring(end);
+      editor.selectionStart = editor.selectionEnd = start + 4;
+      compileAndRender();
+    }
+  });
+  // ── Theme select ──
+  themeSelect.addEventListener('change', compileAndRender);
+  // ── Copy HTML ──
+  copyBtn.addEventListener('click', () => {
+    if (lastHtml) {
+      navigator.clipboard.writeText(lastHtml).then(() => {
+        copyBtn.textContent = 'Copied!';
+        setTimeout(() => copyBtn.textContent = 'Copy HTML', 1500);
+      });
+    }
+  });
+  // ── Download HTML ──
+  downloadBtn.addEventListener('click', () => {
+    if (!lastHtml) return;
+    const blob = new Blob([lastHtml], { type: 'text/html' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'clou-website.html';
+    a.click();
+    URL.revokeObjectURL(url);
+  });
+  // ── Resize Handle ──
+  const resizeHandle = document.getElementById('resizeHandle');
+  const editorPanel = document.getElementById('editorPanel');
+  let isResizing = false;
+  resizeHandle.addEventListener('mousedown', (e) => {
+    isResizing = true;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  });
+  document.addEventListener('mousemove', (e) => {
+    if (!isResizing) return;
+    const percent = (e.clientX / window.innerWidth) * 100;
+    if (percent > 20 && percent < 80) {
+      editorPanel.style.width = percent + '%';
+    }
+  });
+  document.addEventListener('mouseup', () => {
+    isResizing = false;
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  });
+  // ── Load first example ──
+  editor.value = examples['Hello World'];
+  compileAndRender();
+})();
+</script>
+</body>
+</html>