clou-lang 0.3.1 → 0.3.6

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>`;