tova 0.8.2 → 0.9.4

package/src/parser/ast.js

@@ -704,6 +704,7 @@ export {
   ComponentDeclaration, ComponentStyleBlock, StoreDeclaration,
   JSXElement, JSXAttribute, JSXSpreadAttribute, JSXFragment,
   JSXText, JSXExpression, JSXFor, JSXIf, JSXMatch,
+  FontDeclaration,
 } from './browser-ast.js';
 
 // ============================================================
@@ -768,6 +769,20 @@ export {
 
 export { SelectStatement, SelectCase } from './select-ast.js';
 
+// ============================================================
+// Theme-specific nodes (lazy-loaded from theme-ast.js, re-exported for backward compat)
+// ============================================================
+
+export { ThemeBlock, ThemeSection, ThemeToken } from './theme-ast.js';
+
+// ============================================================
+// Animate-specific nodes (lazy-loaded from animate-ast.js, re-exported for backward compat)
+// ============================================================
+
+export {
+  AnimateDeclaration, AnimatePrimitive, AnimateSequence, AnimateParallel,
+} from './animate-ast.js';
+
 export class TestBlock {
   constructor(name, body, loc, options = {}) {
     this.type = 'TestBlock';

package/src/parser/browser-ast.js

@@ -39,13 +39,17 @@ export class ComponentDeclaration {
     this.params = params;
     this.body = body; // Array of JSX elements and statements
     this.loc = loc;
+    // Compound component fields (set by parser for Dialog.Title etc.)
+    this.parent = null;
+    this.child = null;
   }
 }
 
 export class ComponentStyleBlock {
-  constructor(css, loc) {
+  constructor(css, loc, config) {
     this.type = 'ComponentStyleBlock';
     this.css = css; // raw CSS string
+    this.config = config || null; // e.g. { motion: 'full' } from style(motion: full)
     this.loc = loc;
   }
 }
@@ -145,3 +149,17 @@ export class JSXMatch {
     this.loc = loc;
   }
 }
+
+// ============================================================
+// Font loading
+// ============================================================
+
+export class FontDeclaration {
+  constructor(name, source, config, loc) {
+    this.type = 'FontDeclaration';
+    this.name = name;       // string - font identifier
+    this.source = source;   // string - URL or local path
+    this.config = config;   // { weight, style, display } or null
+    this.loc = loc;
+  }
+}

package/src/parser/browser-parser.js

@@ -4,6 +4,10 @@
 import { TokenType, Keywords } from '../lexer/tokens.js';
 import * as AST from './ast.js';
 import { installFormParser } from './form-parser.js';
+import {
+  AnimateDeclaration, AnimatePrimitive, AnimateSequence, AnimateParallel,
+} from './animate-ast.js';
+import { FontDeclaration } from './browser-ast.js';
 
 export function installBrowserParser(ParserClass) {
   if (ParserClass.prototype._browserParserInstalled) return;
@@ -112,7 +116,17 @@ export function installBrowserParser(ParserClass) {
   ParserClass.prototype.parseComponent = function() {
     const l = this.loc();
     this.expect(TokenType.COMPONENT);
-    const name = this.expect(TokenType.IDENTIFIER, "Expected component name").value;
+    let name = this.expect(TokenType.IDENTIFIER, "Expected component name").value;
+
+    // Check for compound component: Dialog.Title
+    let parent = null;
+    let child = null;
+    if (this.check(TokenType.DOT)) {
+      this.advance(); // consume '.'
+      child = this.expect(TokenType.IDENTIFIER, "Expected sub-component name after '.'").value;
+      parent = name;
+      name = parent + '.' + child;
+    }
 
     let params = [];
     if (this.match(TokenType.LPAREN)) {
@@ -125,9 +139,23 @@ export function installBrowserParser(ParserClass) {
     while (!this.check(TokenType.RBRACE) && !this.isAtEnd()) {
       if (this.check(TokenType.STYLE_BLOCK)) {
         const sl = this.loc();
-        const css = this.current().value;
+        let css = this.current().value;
+        let config = null;
+        // Parse __CONFIG:key:value__ prefix from lexer
+        if (css.startsWith('__CONFIG:')) {
+          const endIdx = css.indexOf('__', 9);
+          if (endIdx !== -1) {
+            const configStr = css.slice(9, endIdx);
+            config = {};
+            for (const part of configStr.split(',')) {
+              const [k, v] = part.split(':').map(s => s.trim());
+              if (k) config[k] = v || true;
+            }
+            css = css.slice(endIdx + 2).trim();
+          }
+        }
         this.advance();
-        body.push(new AST.ComponentStyleBlock(css, sl));
+        body.push(new AST.ComponentStyleBlock(css, sl, config));
       } else if (this.check(TokenType.LESS) && this._looksLikeJSX()) {
         body.push(this.parseJSXElementOrFragment());
       } else if (this.check(TokenType.STATE)) {
@@ -140,13 +168,22 @@ export function installBrowserParser(ParserClass) {
         body.push(this.parseComponent());
       } else if (this.check(TokenType.FORM)) {
         body.push(this.parseFormDeclaration());
+      } else if (this.check(TokenType.IDENTIFIER) && this.current().value === 'font' && this.peek(1).type === TokenType.IDENTIFIER && this.peek(2).type === TokenType.FROM) {
+        body.push(this.parseComponentFontDeclaration());
+      } else if (this.check(TokenType.IDENTIFIER) && this.current().value === 'animate' && this.peek(1).type === TokenType.IDENTIFIER && this.peek(2).type === TokenType.LBRACE) {
+        body.push(this.parseAnimateDeclaration());
       } else {
         body.push(this.parseStatement());
       }
     }
     this.expect(TokenType.RBRACE, "Expected '}' to close component body");
 
-    return new AST.ComponentDeclaration(name, params, body, l);
+    const node = new AST.ComponentDeclaration(name, params, body, l);
+    if (parent) {
+      node.parent = parent;
+      node.child = child;
+    }
+    return node;
   };
 
   // ─── JSX-like parsing ─────────────────────────────────────
@@ -305,6 +342,13 @@ export function installBrowserParser(ParserClass) {
       this.error("Expected attribute name");
     }
 
+    // Handle hyphenated attribute names: aria-disabled, data-testid, stroke-width, etc.
+    while (this.check(TokenType.MINUS) && this.peek(1) &&
+           (this.peek(1).type === TokenType.IDENTIFIER || this.peek(1).value in Keywords)) {
+      this.advance(); // consume MINUS
+      name += '-' + this.advance().value;
+    }
+
     // Handle namespaced attributes: on:click, bind:value, class:active
     if (this.match(TokenType.COLON)) {
       let suffix;
@@ -608,4 +652,177 @@ export function installBrowserParser(ParserClass) {
     this.expect(TokenType.RBRACE, "Expected '}' to close JSX match body");
     return new AST.JSXMatch(subject, arms, l);
   };
+
+  // ─── Font declaration parsing ──────────────────────────────
+
+  ParserClass.prototype.parseComponentFontDeclaration = function() {
+    const l = this.loc();
+    this.advance(); // consume 'font' identifier
+    const name = this.expect(TokenType.IDENTIFIER, "Expected font name after 'font'").value;
+    this.expect(TokenType.FROM, "Expected 'from' after font name");
+    const source = this.expect(TokenType.STRING, "Expected URL or path string after 'from'").value;
+
+    // Optional config block: { weight: "400" style: "normal" display: "swap" }
+    let config = null;
+    if (this.check(TokenType.LBRACE)) {
+      this.advance(); // consume '{'
+      config = {};
+      while (!this.check(TokenType.RBRACE) && !this.isAtEnd()) {
+        const key = this.expect(TokenType.IDENTIFIER, "Expected config key (weight, style, display)").value;
+        this.expect(TokenType.COLON, `Expected ':' after '${key}'`);
+        const val = this.expect(TokenType.STRING, `Expected string value for '${key}'`).value;
+        config[key] = val;
+      }
+      this.expect(TokenType.RBRACE, "Expected '}' to close font config block");
+    }
+
+    return new FontDeclaration(name, source, config, l);
+  };
+
+  // ─── Animate block parsing ─────────────────────────────────
+
+  ParserClass.prototype.parseAnimateDeclaration = function() {
+    const l = this.loc();
+    this.advance(); // consume 'animate' identifier
+    const name = this.expect(TokenType.IDENTIFIER, "Expected animation name after 'animate'").value;
+    this.expect(TokenType.LBRACE, "Expected '{' after animate name");
+
+    let enter = null;
+    let exit = null;
+    let duration = null;
+    let easing = null;
+    let stagger = null;
+    let stay = null;
+
+    while (!this.check(TokenType.RBRACE) && !this.isAtEnd()) {
+      const key = this.expect(TokenType.IDENTIFIER, "Expected property name inside animate block").value;
+      this.expect(TokenType.COLON, `Expected ':' after '${key}'`);
+
+      switch (key) {
+        case 'enter':
+          enter = this._parseAnimateComposition();
+          break;
+        case 'exit':
+          exit = this._parseAnimateComposition();
+          break;
+        case 'duration': {
+          const tok = this.expect(TokenType.NUMBER, "Expected number for 'duration'");
+          duration = Number(tok.value);
+          break;
+        }
+        case 'easing': {
+          const tok = this.expect(TokenType.STRING, "Expected string for 'easing'");
+          easing = tok.value;
+          break;
+        }
+        case 'stagger': {
+          const tok = this.expect(TokenType.NUMBER, "Expected number for 'stagger'");
+          stagger = Number(tok.value);
+          break;
+        }
+        case 'stay': {
+          const tok = this.expect(TokenType.NUMBER, "Expected number for 'stay'");
+          stay = Number(tok.value);
+          break;
+        }
+        default:
+          this.error(`Unknown animate property '${key}'. Expected enter, exit, duration, easing, stagger, or stay`);
+      }
+    }
+
+    this.expect(TokenType.RBRACE, "Expected '}' to close animate block");
+    return new AnimateDeclaration(name, enter, exit, duration, easing, stagger, stay, l);
+  };
+
+  /**
+   * Parse animate composition with precedence:
+   *   - `then` has lowest precedence (creates AnimateSequence)
+   *   - `+` has higher precedence (creates AnimateParallel)
+   */
+  ParserClass.prototype._parseAnimateComposition = function() {
+    const l = this.loc();
+    let left = this._parseAnimateParallel();
+
+    // Check for `then` (IDENTIFIER with value 'then') — sequential composition
+    const parts = [left];
+    while (this.check(TokenType.IDENTIFIER) && this.current().value === 'then') {
+      this.advance(); // consume 'then'
+      parts.push(this._parseAnimateParallel());
+    }
+
+    if (parts.length === 1) return left;
+    return new AnimateSequence(parts, l);
+  };
+
+  /**
+   * Parse parallel composition: primitives joined with `+`
+   */
+  ParserClass.prototype._parseAnimateParallel = function() {
+    const l = this.loc();
+    let left = this._parseAnimatePrimitive();
+
+    const parts = [left];
+    while (this.check(TokenType.PLUS)) {
+      this.advance(); // consume '+'
+      parts.push(this._parseAnimatePrimitive());
+    }
+
+    if (parts.length === 1) return left;
+    return new AnimateParallel(parts, l);
+  };
+
+  /**
+   * Parse a single animation primitive: name(key: value, key: value)
+   * Supports parenthesized grouping: (expr)
+   */
+  ParserClass.prototype._parseAnimatePrimitive = function() {
+    // Parenthesized grouping for precedence override
+    if (this.check(TokenType.LPAREN)) {
+      this.advance(); // consume '('
+      const inner = this._parseAnimateComposition();
+      this.expect(TokenType.RPAREN, "Expected ')' after grouped animation expression");
+      return inner;
+    }
+
+    const l = this.loc();
+    const primName = this.expect(TokenType.IDENTIFIER, "Expected animation primitive name (fade, slide, scale, rotate, blur)").value;
+    this.expect(TokenType.LPAREN, `Expected '(' after '${primName}'`);
+
+    const params = {};
+    while (!this.check(TokenType.RPAREN) && !this.isAtEnd()) {
+      // Accept identifiers and keywords as parameter names (e.g., 'from' is a keyword in Tova)
+      let paramKey;
+      if (this.check(TokenType.IDENTIFIER) || (typeof this.current().value === 'string' && this.current().value in Keywords)) {
+        paramKey = this.advance().value;
+      } else {
+        paramKey = this.expect(TokenType.IDENTIFIER, "Expected parameter name").value;
+      }
+      this.expect(TokenType.COLON, `Expected ':' after parameter name '${paramKey}'`);
+
+      // Value can be a number (including negative), identifier, or string
+      if (this.check(TokenType.MINUS)) {
+        this.advance(); // consume '-'
+        const tok = this.expect(TokenType.NUMBER, "Expected number after '-'");
+        params[paramKey] = -Number(tok.value);
+      } else if (this.check(TokenType.NUMBER)) {
+        const tok = this.advance();
+        params[paramKey] = Number(tok.value);
+      } else if (this.check(TokenType.STRING)) {
+        const tok = this.advance();
+        params[paramKey] = tok.value;
+      } else if (this.check(TokenType.IDENTIFIER)) {
+        const tok = this.advance();
+        params[paramKey] = tok.value;
+      } else {
+        this.error("Expected number, string, or identifier as animation parameter value");
+      }
+
+      if (!this.check(TokenType.RPAREN)) {
+        this.expect(TokenType.COMMA, "Expected ',' between animation parameters");
+      }
+    }
+
+    this.expect(TokenType.RPAREN, `Expected ')' to close '${primName}' parameters`);
+    return new AnimatePrimitive(primName, params, l);
+  };
 }

package/src/parser/parser.js

@@ -599,6 +599,12 @@ export class Parser {
     if (this.check(TokenType.PUB)) {
       this.error("Duplicate 'pub' modifier");
     }
+    // Handle pub component at top level (parseComponent is installed by browser-parser plugin)
+    if (this.check(TokenType.COMPONENT) && typeof this.parseComponent === 'function') {
+      const comp = this.parseComponent();
+      comp.isPublic = true;
+      return comp;
+    }
     const stmt = this.parseStatement();
     if (stmt) stmt.isPublic = true;
     return stmt;
@@ -1490,7 +1496,14 @@ export class Parser {
       // Destructuring without let: {name, age} = user  or  [a, b] = list
       if (expr.type === 'ObjectLiteral') {
         const pattern = new AST.ObjectPattern(
-          expr.properties.map(p => ({ key: typeof p.key === 'string' ? p.key : p.key.name || p.key, value: typeof p.key === 'string' ? p.key : p.key.name || p.key })),
+          expr.properties.map(p => {
+            const key = typeof p.key === 'string' ? p.key : p.key.name || p.key;
+            // For shorthand {name}, key and value are the same
+            // For rename {name: alias}, value is the alias identifier
+            const val = p.shorthand ? key
+              : (p.value && p.value.type === 'Identifier' ? p.value.name : key);
+            return { key, value: val };
+          }),
           expr.loc
         );
         const value = this.parseExpression();
@@ -1498,7 +1511,13 @@ export class Parser {
       }
       if (expr.type === 'ArrayLiteral') {
         const pattern = new AST.ArrayPattern(
-          expr.elements.map(e => e.type === 'Identifier' ? e.name : '_'),
+          expr.elements.map(e => {
+            if (e.type === 'Identifier') return e.name;
+            if (e.type === 'SpreadExpression' && e.argument && e.argument.type === 'Identifier') {
+              return '...' + e.argument.name;
+            }
+            return '_';
+          }),
           expr.loc
         );
         const value = this.parseExpression();

package/src/parser/theme-ast.js

@@ -0,0 +1,29 @@
+// Theme-specific AST Node definitions for the Tova language
+// Extracted for lazy loading — only loaded when theme { } blocks are used.
+
+export class ThemeBlock {
+  constructor(sections, darkOverrides, loc) {
+    this.type = 'ThemeBlock';
+    this.sections = sections;           // Array of ThemeSection
+    this.darkOverrides = darkOverrides; // Array of ThemeToken (flat dark mode overrides)
+    this.loc = loc;
+  }
+}
+
+export class ThemeSection {
+  constructor(name, tokens, loc) {
+    this.type = 'ThemeSection';
+    this.name = name;       // string — section name, e.g. "colors", "spacing", "font"
+    this.tokens = tokens;   // Array of ThemeToken
+    this.loc = loc;
+  }
+}
+
+export class ThemeToken {
+  constructor(name, value, loc) {
+    this.type = 'ThemeToken';
+    this.name = name;   // string — dot-separated name, e.g. "primary.hover"
+    this.value = value;  // string or number — token value
+    this.loc = loc;
+  }
+}

package/src/parser/theme-parser.js

@@ -0,0 +1,70 @@
+// Theme-specific parser methods for the Tova language
+// Extracted from parser.js for lazy loading — only loaded when theme { } blocks are encountered.
+
+import { TokenType } from '../lexer/tokens.js';
+import { ThemeBlock, ThemeSection, ThemeToken } from './theme-ast.js';
+
+export function installThemeParser(ParserClass) {
+  if (ParserClass.prototype._themeParserInstalled) return;
+  ParserClass.prototype._themeParserInstalled = true;
+
+  ParserClass.prototype.parseThemeBlock = function() {
+    const l = this.loc();
+    this.advance(); // consume 'theme'
+    this.expect(TokenType.LBRACE, "Expected '{' after 'theme'");
+
+    const sections = [];
+    const darkOverrides = [];
+
+    while (!this.check(TokenType.RBRACE) && !this.isAtEnd()) {
+      const sectionLoc = this.loc();
+      const sectionName = this.expect(TokenType.IDENTIFIER, "Expected section name inside theme block").value;
+      this.expect(TokenType.LBRACE, `Expected '{' after theme section '${sectionName}'`);
+
+      if (sectionName === 'dark') {
+        // dark section: flat overrides with dot-notation names
+        while (!this.check(TokenType.RBRACE) && !this.isAtEnd()) {
+          darkOverrides.push(this._parseThemeToken());
+        }
+      } else {
+        // Regular section: parse tokens into a ThemeSection
+        const tokens = [];
+        while (!this.check(TokenType.RBRACE) && !this.isAtEnd()) {
+          tokens.push(this._parseThemeToken());
+        }
+        sections.push(new ThemeSection(sectionName, tokens, sectionLoc));
+      }
+
+      this.expect(TokenType.RBRACE, `Expected '}' to close theme section '${sectionName}'`);
+    }
+
+    this.expect(TokenType.RBRACE, "Expected '}' to close theme block");
+    return new ThemeBlock(sections, darkOverrides, l);
+  };
+
+  ParserClass.prototype._parseThemeToken = function() {
+    const l = this.loc();
+
+    // Read dot-separated name: IDENTIFIER (DOT IDENTIFIER)*
+    let name = this.expect(TokenType.IDENTIFIER, "Expected token name").value;
+    while (this.check(TokenType.DOT)) {
+      this.advance(); // consume DOT
+      const part = this.expect(TokenType.IDENTIFIER, "Expected identifier after '.' in token name").value;
+      name += '.' + part;
+    }
+
+    this.expect(TokenType.COLON, `Expected ':' after token name '${name}'`);
+
+    // Read value: STRING or NUMBER
+    let value;
+    if (this.check(TokenType.STRING)) {
+      value = this.advance().value;
+    } else if (this.check(TokenType.NUMBER)) {
+      value = this.advance().value;
+    } else {
+      this.error(`Expected string or number value for token '${name}'`);
+    }
+
+    return new ThemeToken(name, value, l);
+  };
+}

package/src/registry/plugins/theme-plugin.js

@@ -0,0 +1,20 @@
+import { installThemeParser } from '../../parser/theme-parser.js';
+
+export const themePlugin = {
+  name: 'theme',
+  astNodeType: 'ThemeBlock',
+  detection: {
+    strategy: 'identifier',
+    identifierValue: 'theme',
+  },
+  parser: {
+    install: installThemeParser,
+    installedFlag: '_themeParserInstalled',
+    method: 'parseThemeBlock',
+  },
+  analyzer: {
+    visit: (analyzer, node) => analyzer.visitThemeBlock(node),
+    noopNodeTypes: ['ThemeSection', 'ThemeToken'],
+  },
+  codegen: {},
+};

package/src/registry/register-all.js

@@ -13,7 +13,9 @@ import { benchPlugin } from './plugins/bench-plugin.js';
 import { edgePlugin } from './plugins/edge-plugin.js';
 import { concurrencyPlugin } from './plugins/concurrency-plugin.js';
 import { deployPlugin } from './plugins/deploy-plugin.js';
+import { themePlugin } from './plugins/theme-plugin.js';
 
+BlockRegistry.register(themePlugin);
 BlockRegistry.register(serverPlugin);
 BlockRegistry.register(browserPlugin);
 BlockRegistry.register(sharedPlugin);