tova 0.7.0 → 0.9.4

package/src/codegen/browser-codegen.js

@@ -1,8 +1,19 @@
 import { BaseCodegen } from './base-codegen.js';
 import { getBrowserStdlib, buildSelectiveStdlib, RESULT_OPTION, PROPAGATE } from '../stdlib/inline.js';
 import { SecurityCodegen } from './security-codegen.js';
+import { ThemeCodegen } from './theme-codegen.js';
 import { generateValidatorFn, generateFieldSignals, generateFieldAccessor, generateGroupCode, generateArrayCode, generateAsyncValidatorEffect } from './form-codegen.js';
 
+// JS reserved words that cannot be used as variable names
+const JS_RESERVED = new Set([
+  'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger', 'default',
+  'delete', 'do', 'else', 'enum', 'export', 'extends', 'false', 'finally', 'for',
+  'function', 'if', 'import', 'in', 'instanceof', 'new', 'null', 'return', 'super',
+  'switch', 'this', 'throw', 'true', 'try', 'typeof', 'var', 'void', 'while', 'with',
+  'yield', 'let', 'static', 'implements', 'interface', 'package', 'private',
+  'protected', 'public', 'await', 'async'
+]);
+
 export class BrowserCodegen extends BaseCodegen {
   constructor() {
     super();
@@ -11,6 +22,7 @@ export class BrowserCodegen extends BaseCodegen {
     this.componentNames = new Set(); // Track component names for JSX
     this.storeNames = new Set(); // Track store names
     this.formNames = new Set(); // Track form names
+    this._paramRenames = new Map(); // Track JS reserved word renames for component params
     this._asyncContext = false; // When true, server.xxx() calls emit `await`
     this._rpcCache = new WeakMap(); // Memoize _containsRPC() results
     this._signalCache = new WeakMap(); // Memoize _exprReadsSignal() results
@@ -107,7 +119,8 @@ export class BrowserCodegen extends BaseCodegen {
   genExpression(node) {
     if (node && node.type === 'Identifier' &&
         (this.stateNames.has(node.name) || this.computedNames.has(node.name))) {
-      return `${node.name}()`;
+      const safeName = this._paramRenames.get(node.name) || node.name;
+      return `${safeName}()`;
     }
     return super.genExpression(node);
   }
@@ -187,15 +200,16 @@ export class BrowserCodegen extends BaseCodegen {
     return `${asyncPrefix}(${params}) => ${this.genExpression(node.body)}`;
   }
 
-  generate(browserBlocks, sharedCode, sharedBuiltins = null, securityConfig = null, typeValidatorsMap = null) {
+  generate(browserBlocks, sharedCode, sharedBuiltins = null, securityConfig = null, typeValidatorsMap = null, themeConfig = null) {
     this._sharedBuiltins = sharedBuiltins || new Set();
     this._typeValidators = typeValidatorsMap || {};
+    this._themeConfig = themeConfig;
     const lines = [];
 
     // Runtime imports
-    lines.push(`import { createSignal, createEffect, createComputed, mount, hydrate, tova_el, tova_fragment, tova_keyed, tova_transition, tova_inject_css, batch, onMount, onUnmount, onCleanup, onBeforeUpdate, createRef, createContext, provide, inject, createErrorBoundary, ErrorBoundary, ErrorInfo, createRoot, watch, untrack, Dynamic, Portal, lazy, Suspense, Head, createResource, __tova_action, TransitionGroup, createForm, configureCSP } from './runtime/reactivity.js';`);
+    lines.push(`import { createSignal, createEffect, createComputed, mount, hydrate, tova_el, tova_fragment, tova_keyed, tova_transition, tova_inject_css, batch, onMount, onUnmount, onCleanup, onBeforeUpdate, createRef, createContext, provide, inject, createErrorBoundary, ErrorBoundary, ErrorInfo, createRoot, watch, untrack, Dynamic, Portal, lazy, Suspense, Head, createResource, __tova_action, TransitionGroup, createForm, configureCSP, __tova_load_font } from './runtime/reactivity.js';`);
     lines.push(`import { rpc, configureRPC, addRPCInterceptor, setCSRFToken } from './runtime/rpc.js';`);
-    lines.push(`import { navigate, getCurrentRoute, getParams, getPath, getQuery, defineRoutes, onRouteChange, beforeNavigate, afterNavigate, Router, Outlet, Link, Redirect } from './runtime/router.js';`);
+    lines.push(`import { createRouter, lazy, resetRouter, navigate, getCurrentRoute, getParams, getPath, getQuery, getMeta, defineRoutes, onRouteChange, beforeNavigate, afterNavigate, getRouter, Router, Outlet, Link, Redirect } from './runtime/router.js';`);
 
     // Hoist import lines from shared code to the top of the module
     let sharedRest = sharedCode;
@@ -233,6 +247,14 @@ export class BrowserCodegen extends BaseCodegen {
     lines.push('__STDLIB_PLACEHOLDER__');
     lines.push('');
 
+    // Theme CSS custom properties
+    if (themeConfig) {
+      const themeCSS = ThemeCodegen.generateCSS(themeConfig);
+      lines.push('// ── Theme ──');
+      lines.push(`tova_inject_css("__tova_theme", ${JSON.stringify(themeCSS)});`);
+      lines.push('');
+    }
+
     // Server RPC proxy
     lines.push('// ── Server RPC Proxy ──');
     lines.push('const server = new Proxy({}, {');
@@ -425,6 +447,14 @@ export class BrowserCodegen extends BaseCodegen {
     return p.join('');
   }
 
+  // Resolve $token syntax in CSS: $category.name.sub -> var(--tova-category-name-sub)
+  _resolveTokens(css) {
+    return css.replace(/\$(\w+)\.([\w.]+)/g, (match, category, name) => {
+      const cssName = name.replace(/\./g, '-');
+      return `var(--tova-${category}-${cssName})`;
+    });
+  }
+
   // Generate a scope hash from component name + CSS content (for CSS scoping)
   // Uses FNV-1a for better distribution and 8-char output to reduce collision risk.
   _genScopeId(name, css) {
@@ -552,6 +582,453 @@ export class BrowserCodegen extends BaseCodegen {
     return s + scopeAttr;
   }
 
+  static DEFAULT_BREAKPOINTS = { mobile: 0, tablet: 768, desktop: 1024, wide: 1440 };
+
+  _getBreakpoints() {
+    if (this._themeConfig && this._themeConfig.sections) {
+      const bpSection = this._themeConfig.sections.get('breakpoints');
+      if (bpSection) {
+        const result = {};
+        for (const token of bpSection) {
+          result[token.name] = token.value;
+        }
+        return result;
+      }
+    }
+    return BrowserCodegen.DEFAULT_BREAKPOINTS;
+  }
+
+  // Auto-inject @media (prefers-reduced-motion: reduce) when CSS uses transition or animation
+  _generateReducedMotion(scopedCSS, scopeAttr) {
+    const hasTransition = /\btransition\s*:|\btransition-/.test(scopedCSS);
+    const hasAnimation = /\banimation\s*:|\banimation-/.test(scopedCSS);
+    if (!hasTransition && !hasAnimation) return scopedCSS;
+    let rules = '';
+    if (hasTransition) rules += ' transition-duration: 0.01ms !important;';
+    if (hasAnimation) rules += ' animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;';
+    return scopedCSS + ` @media (prefers-reduced-motion: reduce) { ${scopeAttr} {${rules} } }`;
+  }
+
+  // ── Animate @keyframes generation ──────────────────────────
+
+  // Main entry: generates @keyframes CSS from an AnimateDeclaration AST node.
+  // Returns { css, enterName, exitName, duration, easing, stagger }
+  _generateAnimateKeyframes(animDecl, scopeId) {
+    const enterName = `__tova_${scopeId}_${animDecl.name}_enter`;
+    const exitName = `__tova_${scopeId}_${animDecl.name}_exit`;
+    const duration = animDecl.duration || 300;
+    const easing = animDecl.easing || 'ease';
+    const stagger = animDecl.stagger || 0;
+
+    let css = '';
+
+    if (animDecl.enter) {
+      css += this._compositionToKeyframes(enterName, animDecl.enter);
+    }
+
+    if (animDecl.exit) {
+      css += this._compositionToKeyframes(exitName, animDecl.exit);
+    }
+
+    return { css, enterName, exitName, duration, easing, stagger, hasExit: !!animDecl.exit };
+  }
+
+  // Dispatches to the correct keyframe generator based on AST node type
+  _compositionToKeyframes(name, node) {
+    if (node.type === 'AnimatePrimitive') {
+      const kf = this._primitiveToKeyframes(node);
+      return `@keyframes ${name} { from { ${kf.from} } to { ${kf.to} } } `;
+    }
+    if (node.type === 'AnimateParallel') {
+      const kf = this._parallelToKeyframes(node.children);
+      return `@keyframes ${name} { from { ${kf.from} } to { ${kf.to} } } `;
+    }
+    if (node.type === 'AnimateSequence') {
+      return this._sequenceToKeyframes(name, node.children);
+    }
+    return '';
+  }
+
+  // Converts a single AnimatePrimitive to { from: "css", to: "css" }
+  _primitiveToKeyframes(prim) {
+    const p = prim.params;
+    switch (prim.name) {
+      case 'fade':
+        return {
+          from: `opacity: ${p.from !== undefined ? p.from : 0};`,
+          to: `opacity: ${p.to !== undefined ? p.to : 1};`,
+          fromProps: { opacity: `${p.from !== undefined ? p.from : 0}` },
+          toProps: { opacity: `${p.to !== undefined ? p.to : 1}` },
+        };
+      case 'slide': {
+        let fromTransform, toTransform;
+        if (p.x !== undefined && p.y !== undefined) {
+          fromTransform = `translate(${p.x}px, ${p.y}px)`;
+          toTransform = `translate(${p.to !== undefined ? p.to : 0}px, ${p.to !== undefined ? p.to : 0}px)`;
+        } else if (p.x !== undefined) {
+          fromTransform = `translateX(${p.x}px)`;
+          toTransform = `translateX(${p.to !== undefined ? p.to : 0}px)`;
+        } else {
+          fromTransform = `translateY(${p.y !== undefined ? p.y : 0}px)`;
+          toTransform = `translateY(${p.to !== undefined ? p.to : 0}px)`;
+        }
+        return {
+          from: `transform: ${fromTransform};`,
+          to: `transform: ${toTransform};`,
+          fromProps: { transform: fromTransform },
+          toProps: { transform: toTransform },
+        };
+      }
+      case 'scale':
+        return {
+          from: `transform: scale(${p.from !== undefined ? p.from : 1});`,
+          to: `transform: scale(${p.to !== undefined ? p.to : 1});`,
+          fromProps: { transform: `scale(${p.from !== undefined ? p.from : 1})` },
+          toProps: { transform: `scale(${p.to !== undefined ? p.to : 1})` },
+        };
+      case 'rotate':
+        return {
+          from: `transform: rotate(${p.from !== undefined ? p.from : 0}deg);`,
+          to: `transform: rotate(${p.to !== undefined ? p.to : 0}deg);`,
+          fromProps: { transform: `rotate(${p.from !== undefined ? p.from : 0}deg)` },
+          toProps: { transform: `rotate(${p.to !== undefined ? p.to : 0}deg)` },
+        };
+      case 'blur':
+        return {
+          from: `filter: blur(${p.from !== undefined ? p.from : 0}px);`,
+          to: `filter: blur(${p.to !== undefined ? p.to : 0}px);`,
+          fromProps: { filter: `blur(${p.from !== undefined ? p.from : 0}px)` },
+          toProps: { filter: `blur(${p.to !== undefined ? p.to : 0}px)` },
+        };
+      default:
+        return { from: '', to: '', fromProps: {}, toProps: {} };
+    }
+  }
+
+  // Merges multiple primitives into a single from/to block (parallel composition)
+  _parallelToKeyframes(children) {
+    const fromProps = {};
+    const toProps = {};
+    const fromTransforms = [];
+    const toTransforms = [];
+
+    for (const child of children) {
+      const kf = this._primitiveToKeyframes(child);
+      for (const [prop, val] of Object.entries(kf.fromProps || {})) {
+        if (prop === 'transform') {
+          fromTransforms.push(val);
+        } else {
+          fromProps[prop] = val;
+        }
+      }
+      for (const [prop, val] of Object.entries(kf.toProps || {})) {
+        if (prop === 'transform') {
+          toTransforms.push(val);
+        } else {
+          toProps[prop] = val;
+        }
+      }
+    }
+
+    if (fromTransforms.length > 0) fromProps.transform = fromTransforms.join(' ');
+    if (toTransforms.length > 0) toProps.transform = toTransforms.join(' ');
+
+    const fromCSS = Object.entries(fromProps).map(([k, v]) => `${k}: ${v};`).join(' ');
+    const toCSS = Object.entries(toProps).map(([k, v]) => `${k}: ${v};`).join(' ');
+
+    return { from: fromCSS, to: toCSS };
+  }
+
+  // Generates percentage-based keyframes for sequential composition
+  _sequenceToKeyframes(name, children) {
+    const n = children.length;
+    const stops = []; // Array of { percent, props }
+
+    for (let idx = 0; idx < n; idx++) {
+      const child = children[idx];
+      let kf;
+      if (child.type === 'AnimateParallel') {
+        const merged = this._parallelToKeyframes(child.children);
+        // Parse from/to CSS into props
+        kf = { fromProps: this._parseCSSProps(merged.from), toProps: this._parseCSSProps(merged.to) };
+      } else {
+        kf = this._primitiveToKeyframes(child);
+      }
+
+      const startPct = Math.floor((idx / n) * 100);
+      const endPct = idx === n - 1 ? 100 : Math.floor(((idx + 1) / n) * 100);
+
+      if (idx === 0) {
+        // First child: add from props at 0%
+        stops.push({ percent: startPct, props: { ...(kf.fromProps || {}) } });
+      }
+
+      // At the boundary between this child and the next:
+      // merge this child's "to" props with the next child's "from" props
+      if (idx < n - 1) {
+        const nextChild = children[idx + 1];
+        let nextKf;
+        if (nextChild.type === 'AnimateParallel') {
+          const merged = this._parallelToKeyframes(nextChild.children);
+          nextKf = { fromProps: this._parseCSSProps(merged.from), toProps: this._parseCSSProps(merged.to) };
+        } else {
+          nextKf = this._primitiveToKeyframes(nextChild);
+        }
+        stops.push({ percent: endPct, props: { ...(kf.toProps || {}), ...(nextKf.fromProps || {}) } });
+      } else {
+        // Last child: add to props at 100%
+        stops.push({ percent: endPct, props: { ...(kf.toProps || {}) } });
+      }
+    }
+
+    let css = `@keyframes ${name} { `;
+    for (const stop of stops) {
+      const propsCSS = Object.entries(stop.props).map(([k, v]) => `${k}: ${v};`).join(' ');
+      css += `${stop.percent}% { ${propsCSS} } `;
+    }
+    css += '} ';
+
+    return css;
+  }
+
+  // Helper: parse "opacity: 0; transform: scale(0.8);" into { opacity: "0", transform: "scale(0.8)" }
+  _parseCSSProps(cssString) {
+    const props = {};
+    if (!cssString) return props;
+    const parts = cssString.split(';').filter(Boolean);
+    for (const part of parts) {
+      const colonIdx = part.indexOf(':');
+      if (colonIdx > 0) {
+        const key = part.slice(0, colonIdx).trim();
+        const val = part.slice(colonIdx + 1).trim();
+        props[key] = val;
+      }
+    }
+    return props;
+  }
+
+  // Check if any JSX nodes in a tree use animate directives with stagger
+  _jsxTreeHasStagger(nodes) {
+    if (!this._currentAnimateDecls) return false;
+    for (const node of nodes) {
+      if (node.type === 'JSXElement') {
+        for (const attr of (node.attributes || [])) {
+          if (attr.name && attr.name.startsWith('animate:')) {
+            const animName = attr.name.slice(8);
+            const info = this._currentAnimateDecls[animName];
+            if (info && info.stagger) return true;
+          }
+        }
+        if (node.children && this._jsxTreeHasStagger(node.children)) return true;
+      }
+    }
+    return false;
+  }
+
+  _extractResponsive(css) {
+    // Find responsive { ... } block in raw CSS and extract it
+    const responsiveMatch = css.match(/responsive\s*\{/);
+    if (!responsiveMatch) return { baseCss: css, responsiveBlocks: [] };
+
+    const startIdx = responsiveMatch.index;
+    let i = startIdx + responsiveMatch[0].length;
+    let depth = 1;
+
+    while (i < css.length && depth > 0) {
+      if (css[i] === '{') depth++;
+      else if (css[i] === '}') depth--;
+      i++;
+    }
+
+    const responsiveContent = css.slice(startIdx + responsiveMatch[0].length, i - 1);
+    const baseCss = css.slice(0, startIdx) + css.slice(i);
+
+    // Parse breakpoint blocks: "tablet { .box { color: blue; } }"
+    const responsiveBlocks = [];
+    let pos = 0;
+    while (pos < responsiveContent.length) {
+      // Skip whitespace
+      while (pos < responsiveContent.length && /\s/.test(responsiveContent[pos])) pos++;
+      if (pos >= responsiveContent.length) break;
+
+      // Read breakpoint name
+      let name = '';
+      while (pos < responsiveContent.length && /\w/.test(responsiveContent[pos])) {
+        name += responsiveContent[pos];
+        pos++;
+      }
+      if (!name) break;
+
+      // Skip whitespace
+      while (pos < responsiveContent.length && /\s/.test(responsiveContent[pos])) pos++;
+
+      // Expect {
+      if (responsiveContent[pos] !== '{') break;
+      pos++; // skip {
+
+      // Collect content until matching }
+      let bpDepth = 1;
+      let bpCss = '';
+      while (pos < responsiveContent.length && bpDepth > 0) {
+        if (responsiveContent[pos] === '{') bpDepth++;
+        else if (responsiveContent[pos] === '}') {
+          bpDepth--;
+          if (bpDepth === 0) { pos++; break; }
+        }
+        bpCss += responsiveContent[pos];
+        pos++;
+      }
+
+      responsiveBlocks.push({ name: name.trim(), css: bpCss.trim() });
+    }
+
+    return { baseCss, responsiveBlocks };
+  }
+
+  // Extract variant(propName) { ... } blocks from raw CSS.
+  // Returns { baseCss, variants: [{propNames: [...], entries: [...]}] }
+  _extractVariants(css) {
+    const variants = [];
+    let baseCss = css;
+
+    // Repeatedly find and extract variant(...) { ... } blocks
+    const variantRe = /variant\s*\(([^)]+)\)\s*\{/g;
+    let match;
+    // Collect all matches first (with their positions in original css)
+    const matches = [];
+    while ((match = variantRe.exec(baseCss)) !== null) {
+      matches.push({ index: match.index, fullMatch: match[0], propStr: match[1].trim() });
+    }
+
+    // Process in reverse order to maintain correct indices when removing
+    for (let m = matches.length - 1; m >= 0; m--) {
+      const { index: startIdx, fullMatch, propStr } = matches[m];
+      // Parse prop names (single or compound with +)
+      const propNames = propStr.split(/\s*\+\s*/).map(s => s.trim()).filter(Boolean);
+
+      // Find matching closing brace using brace counting
+      let i = startIdx + fullMatch.length;
+      let depth = 1;
+      while (i < baseCss.length && depth > 0) {
+        if (baseCss[i] === '{') depth++;
+        else if (baseCss[i] === '}') depth--;
+        i++;
+      }
+
+      const content = baseCss.slice(startIdx + fullMatch.length, i - 1);
+      const entries = this._parseVariantEntries(content, propNames);
+      variants.unshift({ propNames, entries });
+
+      // Remove the variant block from baseCss
+      baseCss = baseCss.slice(0, startIdx) + baseCss.slice(i);
+    }
+
+    return { baseCss, variants };
+  }
+
+  // Parse entries inside a variant block content string.
+  // Handles: "primary { ... }", "primary:hover { ... }", "primary + lg { ... }"
+  _parseVariantEntries(content, propNames) {
+    const entries = [];
+    let pos = 0;
+
+    while (pos < content.length) {
+      // Skip whitespace
+      while (pos < content.length && /\s/.test(content[pos])) pos++;
+      if (pos >= content.length) break;
+
+      // Read entry name (may include pseudo like "primary:hover" or compound "primary + lg")
+      let nameStr = '';
+      // Read until we hit an opening brace
+      while (pos < content.length && content[pos] !== '{') {
+        nameStr += content[pos];
+        pos++;
+      }
+      nameStr = nameStr.trim();
+      if (!nameStr || pos >= content.length) break;
+
+      // Skip {
+      pos++;
+
+      // Collect CSS content until matching }
+      let entryDepth = 1;
+      let entryCss = '';
+      while (pos < content.length && entryDepth > 0) {
+        if (content[pos] === '{') entryDepth++;
+        else if (content[pos] === '}') {
+          entryDepth--;
+          if (entryDepth === 0) { pos++; break; }
+        }
+        entryCss += content[pos];
+        pos++;
+      }
+
+      // Parse the name to extract values and pseudo-selector
+      // Compound: "primary + lg" -> values: ['primary', 'lg'], pseudo: null
+      // Pseudo: "primary:hover" -> values: ['primary'], pseudo: ':hover'
+      // Compound+pseudo: "primary + lg:hover" -> values: ['primary', 'lg'], pseudo: ':hover'
+      if (propNames.length > 1) {
+        // Compound variant -- split by +
+        const parts = nameStr.split(/\s*\+\s*/);
+        const values = [];
+        let pseudo = null;
+        for (let pi = 0; pi < parts.length; pi++) {
+          let part = parts[pi].trim();
+          // Check for pseudo on the last part
+          const colonIdx = part.indexOf(':');
+          if (colonIdx > 0) {
+            pseudo = part.slice(colonIdx);
+            part = part.slice(0, colonIdx);
+          }
+          values.push(part);
+        }
+        entries.push({ values, pseudo, css: entryCss.trim() });
+      } else {
+        // Single prop -- check for pseudo
+        let pseudo = null;
+        let valueName = nameStr;
+        const colonIdx = nameStr.indexOf(':');
+        if (colonIdx > 0) {
+          pseudo = nameStr.slice(colonIdx);
+          valueName = nameStr.slice(0, colonIdx);
+        }
+        entries.push({ values: [valueName], pseudo, css: entryCss.trim() });
+      }
+    }
+
+    return entries;
+  }
+
+  // Generate scoped CSS for variant entries.
+  // Single prop: .btn--propName-value[scopeAttr] { css }
+  // Compound: .btn--prop1-value1.btn--prop2-value2[scopeAttr] { css }
+  // Pseudo: .btn--propName-value[scopeAttr]:pseudo { css }
+  _generateVariantCSS(variants, baseClass, scopeAttr) {
+    const parts = [];
+    for (const variant of variants) {
+      const { propNames, entries } = variant;
+      for (const entry of entries) {
+        const { values, pseudo, css } = entry;
+        let selector;
+        if (propNames.length === 1) {
+          // Single prop variant
+          selector = `.${baseClass}--${propNames[0]}-${values[0]}${scopeAttr}`;
+        } else {
+          // Compound variant -- chain class selectors
+          const classParts = propNames.map((prop, i) =>
+            `.${baseClass}--${prop}-${values[i]}`
+          );
+          selector = classParts.join('') + scopeAttr;
+        }
+        if (pseudo) {
+          selector += pseudo;
+        }
+        parts.push(`${selector} { ${css} }`);
+      }
+    }
+    return parts.join(' ');
+  }
+
   generateComponent(comp) {
     const hasParams = comp.params.length > 0;
     const paramStr = hasParams ? '__props' : '';
@@ -560,28 +1037,40 @@ export class BrowserCodegen extends BaseCodegen {
     const savedState = new Set(this.stateNames);
     const savedComputed = new Set(this.computedNames);
 
+    // For compound components (e.g. Dialog.Title), use concatenated name (DialogTitle) as function name
+    const funcName = comp.child ? (comp.parent + comp.child) : comp.name;
+
     const p = [];
-    p.push(`function ${comp.name}(${paramStr}) {\n`);
+    p.push(`function ${funcName}(${paramStr}) {\n`);
     this.indent++;
 
     // Generate reactive prop accessors — each prop is accessed through __props getter
     // This ensures parent signal changes propagate reactively to the child
+    const savedRenames = new Map(this._paramRenames);
     if (hasParams) {
       for (const param of comp.params) {
-        this.computedNames.add(param.name);
+        const propName = param.name;
+        const safeName = JS_RESERVED.has(propName) ? `_${propName}` : propName;
+        if (safeName !== propName) {
+          this._paramRenames.set(propName, safeName);
+        }
+        this.computedNames.add(propName);
         const def = param.default || param.defaultValue;
+        const propAccess = safeName !== propName ? `__props["${propName}"]` : `__props.${propName}`;
         if (def) {
           const defaultExpr = this.genExpression(def);
-          p.push(`${this.i()}const ${param.name} = () => __props.${param.name} !== undefined ? __props.${param.name} : ${defaultExpr};\n`);
+          p.push(`${this.i()}const ${safeName} = () => ${propAccess} !== undefined ? ${propAccess} : ${defaultExpr};\n`);
         } else {
-          p.push(`${this.i()}const ${param.name} = () => __props.${param.name};\n`);
+          p.push(`${this.i()}const ${safeName} = () => ${propAccess};\n`);
         }
       }
     }
 
-    // Separate JSX elements, style blocks, and statements
+    // Separate JSX elements, style blocks, animate declarations, font declarations, and statements
     const jsxElements = [];
     const styleBlocks = [];
+    const animateDecls = [];
+    const fontDecls = [];
     const bodyItems = [];
 
     for (const node of comp.body) {
@@ -589,6 +1078,10 @@ export class BrowserCodegen extends BaseCodegen {
         jsxElements.push(node);
       } else if (node.type === 'ComponentStyleBlock') {
         styleBlocks.push(node);
+      } else if (node.type === 'AnimateDeclaration') {
+        animateDecls.push(node);
+      } else if (node.type === 'FontDeclaration') {
+        fontDecls.push(node);
       } else {
         bodyItems.push(node);
       }
@@ -596,14 +1089,105 @@ export class BrowserCodegen extends BaseCodegen {
 
     // Set up scoped CSS if style blocks exist
     const savedScopeId = this._currentScopeId;
+    const savedVariants = this._currentVariants;
+    this._currentVariants = null;
     if (styleBlocks.length > 0) {
       const rawCSS = styleBlocks.map(s => s.css).join('\n');
-      const scopeId = this._genScopeId(comp.name, rawCSS);
+      const resolvedCSS = this._resolveTokens(rawCSS);
+      const scopeId = this._genScopeId(comp.name, rawCSS); // Use rawCSS for hash stability
       this._currentScopeId = scopeId;
-      const scopedCSS = this._scopeCSS(rawCSS, `[data-tova-${scopeId}]`);
+      const scopeAttr = `[data-tova-${scopeId}]`;
+
+      // Extract variant blocks before responsive and scoping
+      const { baseCss: variantBaseCss, variants } = this._extractVariants(resolvedCSS);
+      if (variants.length > 0) {
+        // Detect baseClass from the first CSS class selector in the base CSS
+        const classMatch = variantBaseCss.match(/\.([a-zA-Z_][\w-]*)\s*\{/);
+        const baseClass = classMatch ? classMatch[1] : comp.name.toLowerCase();
+        this._currentVariants = { variants, baseClass };
+      }
+
+      // Extract responsive blocks before scoping
+      const { baseCss, responsiveBlocks } = this._extractResponsive(variantBaseCss);
+      let scopedCSS = this._scopeCSS(baseCss, scopeAttr);
+
+      // Append variant CSS (already scoped via _generateVariantCSS)
+      if (variants.length > 0) {
+        const baseClass = this._currentVariants.baseClass;
+        const variantCSS = this._generateVariantCSS(variants, baseClass, scopeAttr);
+        if (variantCSS) {
+          scopedCSS += ' ' + variantCSS;
+        }
+      }
+
+      // Append responsive media queries with scoped selectors
+      if (responsiveBlocks.length > 0) {
+        const breakpoints = this._getBreakpoints();
+        const sorted = [...responsiveBlocks].sort((a, b) => (breakpoints[a.name] || 0) - (breakpoints[b.name] || 0));
+        for (const bp of sorted) {
+          const bpValue = breakpoints[bp.name] !== undefined ? breakpoints[bp.name] : 0;
+          const scopedBpCSS = this._scopeCSS(bp.css, scopeAttr);
+          if (bpValue === 0) {
+            scopedCSS += ' ' + scopedBpCSS;
+          } else {
+            scopedCSS += ` @media (min-width: ${bpValue}px) { ${scopedBpCSS} }`;
+          }
+        }
+      }
+
+      // Auto-inject prefers-reduced-motion unless opted out with style(motion: full)
+      const motionFull = styleBlocks.some(s => s.config && s.config.motion === 'full');
+      if (!motionFull) {
+        scopedCSS = this._generateReducedMotion(scopedCSS, scopeAttr);
+      }
+
       p.push(`${this.i()}tova_inject_css(${JSON.stringify(scopeId)}, ${JSON.stringify(scopedCSS)});\n`);
     }
 
+    // Generate @keyframes CSS from animate declarations
+    const savedAnimateDecls = this._currentAnimateDecls;
+    this._currentAnimateDecls = null;
+    if (animateDecls.length > 0) {
+      // Ensure a scope ID exists for keyframe name uniqueness
+      if (!this._currentScopeId) {
+        this._currentScopeId = this._genScopeId(comp.name, 'animate');
+      }
+      const scopeId = this._currentScopeId;
+      const animateMap = {};
+      let keyframeCSS = '';
+      for (const animDecl of animateDecls) {
+        const result = this._generateAnimateKeyframes(animDecl, scopeId);
+        keyframeCSS += result.css;
+        animateMap[animDecl.name] = result;
+      }
+      this._currentAnimateDecls = animateMap;
+      if (keyframeCSS) {
+        const animScopeId = `${scopeId}_anim`;
+        p.push(`${this.i()}tova_inject_css(${JSON.stringify(animScopeId)}, ${JSON.stringify(keyframeCSS)});\n`);
+      }
+    }
+
+    // Generate font loading calls
+    if (fontDecls.length > 0) {
+      for (const fontDecl of fontDecls) {
+        const isRemote = fontDecl.source.startsWith('http') || fontDecl.source.startsWith('//');
+        if (isRemote) {
+          // Remote font: use __tova_load_font runtime function
+          p.push(`${this.i()}__tova_load_font(${JSON.stringify(fontDecl.name)}, ${JSON.stringify(fontDecl.source)});\n`);
+        } else {
+          // Local font: generate @font-face CSS and inject via tova_inject_css
+          const config = fontDecl.config || {};
+          const display = config.display || 'swap';
+          let fontFaceCSS = `@font-face { font-family: "${fontDecl.name}"; src: url("${fontDecl.source}");`;
+          if (config.weight) fontFaceCSS += ` font-weight: ${config.weight};`;
+          if (config.style) fontFaceCSS += ` font-style: ${config.style};`;
+          fontFaceCSS += ` font-display: ${display}; }`;
+          const fontScopeId = `__tova_font_${fontDecl.name}`;
+          p.push(`${this.i()}tova_inject_css(${JSON.stringify(fontScopeId)}, ${JSON.stringify(fontFaceCSS)});\n`);
+        }
+      }
+    }
+
     // Generate body items in order (state, computed, effect, other statements)
     for (const node of bodyItems) {
       if (node.type === 'StateDeclaration') {
@@ -641,10 +1225,13 @@ export class BrowserCodegen extends BaseCodegen {
     this.indent--;
     p.push(`}`);
 
-    // Restore scoped names and scope id
+    // Restore scoped names, scope id, variants, animate decls, and param renames
     this.stateNames = savedState;
     this.computedNames = savedComputed;
+    this._paramRenames = savedRenames;
     this._currentScopeId = savedScopeId;
+    this._currentVariants = savedVariants;
+    this._currentAnimateDecls = savedAnimateDecls;
 
     return p.join('');
   }
@@ -1223,6 +1810,13 @@ export class BrowserCodegen extends BaseCodegen {
         // Conditional class: class:active={cond}
         const className = attr.name.slice(6);
         classDirectives.push({ className, condition: this.genExpression(attr.value), node: attr.value });
+      } else if (attr.name.startsWith('animate:')) {
+        // animate:fadeIn or animate:fadeIn={visible} — CSS animation directive
+        const animName = attr.name.slice(8);
+        const isConditional = attr.value.type !== 'BooleanLiteral';
+        const condExpr = isConditional ? this.genExpression(attr.value) : null;
+        if (!node._animateDirectives) node._animateDirectives = [];
+        node._animateDirectives.push({ name: animName, conditional: isConditional, condExpr });
       } else if (attr.name.startsWith('use:')) {
         // use:action directive: use:tooltip={params}
         const actionName = attr.name.slice(4);
@@ -1321,6 +1915,44 @@ export class BrowserCodegen extends BaseCodegen {
       attrs.className = isReactive ? `() => ${classExpr}` : classExpr;
     }
 
+    // Inject variant classes into className when component has variant() styles
+    if (this._currentVariants && attrs.className && !isComponent) {
+      const { variants, baseClass } = this._currentVariants;
+      // Build variant class suffix expressions for each variant prop
+      const variantParts = [];
+      for (const variant of variants) {
+        if (variant.propNames.length === 1) {
+          const prop = variant.propNames[0];
+          variantParts.push(`(${prop}() ? " ${baseClass}--${prop}-" + ${prop}() : "")`);
+        } else {
+          // Compound variants use multiple props -- add all prop classes
+          for (const prop of variant.propNames) {
+            variantParts.push(`(${prop}() ? " ${baseClass}--${prop}-" + ${prop}() : "")`);
+          }
+        }
+      }
+      // Deduplicate prop-based parts (same prop may appear in multiple variant blocks)
+      const seen = new Set();
+      const uniqueParts = [];
+      for (const part of variantParts) {
+        if (!seen.has(part)) {
+          seen.add(part);
+          uniqueParts.push(part);
+        }
+      }
+      if (uniqueParts.length > 0) {
+        const currentClass = attrs.className;
+        // If already reactive (starts with () =>), unwrap
+        let baseExpr;
+        if (typeof currentClass === 'string' && currentClass.startsWith('() => ')) {
+          baseExpr = currentClass.slice(6);
+        } else {
+          baseExpr = currentClass;
+        }
+        attrs.className = `() => ${baseExpr} + ${uniqueParts.join(' + ')}`;
+      }
+    }
+
     // Merge show directive with style (show toggles display:none)
     if (node._showDirective) {
       const { expr: displayExpr, reactive } = node._showDirective;
@@ -1344,8 +1976,77 @@ export class BrowserCodegen extends BaseCodegen {
       attrs[`"data-tova-${this._currentScopeId}"`] = '""';
     }
 
+    // Apply animate: directives — add CSS animation property
+    if (node._animateDirectives && node._animateDirectives.length > 0 && this._currentAnimateDecls) {
+      const animParts = [];
+      let hasStagger = false;
+      let staggerValue = 0;
+
+      for (const dir of node._animateDirectives) {
+        const animInfo = this._currentAnimateDecls[dir.name];
+        if (!animInfo) continue;
+
+        const animStr = `${animInfo.enterName} ${animInfo.duration}ms ${animInfo.easing} both`;
+
+        if (dir.conditional) {
+          // Conditional: only apply when expression is truthy
+          animParts.push({ str: animStr, conditional: true, condExpr: dir.condExpr });
+        } else {
+          animParts.push({ str: animStr, conditional: false });
+        }
+
+        if (animInfo.stagger) {
+          hasStagger = true;
+          staggerValue = animInfo.stagger;
+        }
+      }
+
+      if (animParts.length > 0) {
+        // Build animation style
+        const allUnconditional = animParts.every(a => !a.conditional);
+        if (allUnconditional) {
+          const animValue = animParts.map(a => a.str).join(', ');
+          // Merge with existing style
+          if (attrs.style) {
+            const existing = attrs.style;
+            attrs.style = `Object.assign({}, ${existing}, { animation: "${animValue}" })`;
+          } else {
+            attrs.style = `{ animation: "${animValue}" }`;
+          }
+        } else {
+          // Conditional animations — use reactive style
+          const parts = animParts.map(a =>
+            a.conditional ? `(${a.condExpr} ? "${a.str}" : "")` : `"${a.str}"`
+          );
+          const animExpr = `[${parts.join(', ')}].filter(Boolean).join(", ")`;
+          if (attrs.style) {
+            const existing = attrs.style;
+            attrs.style = `() => Object.assign({}, ${existing}, { animation: ${animExpr} })`;
+          } else {
+            attrs.style = `() => ({ animation: ${animExpr} })`;
+          }
+        }
+
+        if (hasStagger) {
+          // Add animationDelay using a data attribute + parent-index pattern
+          // For stagger, inject a computed delay based on sibling index
+          if (attrs.style && typeof attrs.style === 'string' && attrs.style.startsWith('() =>')) {
+            const inner = attrs.style.slice(6);
+            attrs.style = `() => Object.assign({}, ${inner}, { animationDelay: (__tova_idx * ${staggerValue}) + "ms" })`;
+          } else if (attrs.style) {
+            attrs.style = `Object.assign({}, ${attrs.style}, { animationDelay: (__tova_idx * ${staggerValue}) + "ms" })`;
+          } else {
+            attrs.style = `{ animationDelay: (__tova_idx * ${staggerValue}) + "ms" }`;
+          }
+        }
+      }
+    }
+
     const propParts = [];
     const memoizedProps = []; // Computed memoization for complex expressions
+    // Helper: quote property keys that contain hyphens (aria-*, data-*, stroke-*, etc.)
+    const _needsQuote = (k) => k.includes('-') && !k.startsWith('"');
+    const _propKey = (k) => _needsQuote(k) ? `"${k}"` : k;
     for (const [key, val] of Object.entries(attrs)) {
       // For component props, convert reactive () => wrappers to JS getter syntax
       // so the prop stays reactive through the __props access pattern
@@ -1355,14 +2056,14 @@ export class BrowserCodegen extends BaseCodegen {
         // Complex expressions: memoize with createComputed
         const isSimple = /^[a-zA-Z_$]\w*\(\)$/.test(rawExpr);
         if (isSimple) {
-          propParts.push(`get ${key}() { return ${rawExpr}; }`);
+          propParts.push(`get ${_propKey(key)}() { return ${rawExpr}; }`);
         } else {
-          const memoName = `__memo_${key}`;
+          const memoName = `__memo_${key.replace(/-/g, '_')}`;
           memoizedProps.push(`const ${memoName} = createComputed(() => ${rawExpr})`);
-          propParts.push(`get ${key}() { return ${memoName}(); }`);
+          propParts.push(`get ${_propKey(key)}() { return ${memoName}(); }`);
         }
       } else {
-        propParts.push(`${key}: ${val}`);
+        propParts.push(`${_propKey(key)}: ${val}`);
       }
     }
     for (const [event, handler] of Object.entries(events)) {
@@ -1591,18 +2292,22 @@ export class BrowserCodegen extends BaseCodegen {
     const needsReactive = this._exprReadsSignal(node.iterable);
     const wrap = needsReactive ? '() => ' : '';
 
+    // Include __tova_idx in map callback when stagger animations are used on child elements
+    const needsIdx = this._jsxTreeHasStagger(node.body);
+    const idxParam = needsIdx ? ', __tova_idx' : '';
+
     if (node.keyExpr) {
       const keyExpr = this.genExpression(node.keyExpr);
       if (children.length === 1) {
-        return `${wrap}${iterable}.map((${varName}) => tova_keyed(${keyExpr}, ${children[0]}))`;
+        return `${wrap}${iterable}.map((${varName}${idxParam}) => tova_keyed(${keyExpr}, ${children[0]}))`;
       }
-      return `${wrap}${iterable}.map((${varName}) => tova_keyed(${keyExpr}, tova_fragment([${children.join(', ')}])))`;
+      return `${wrap}${iterable}.map((${varName}${idxParam}) => tova_keyed(${keyExpr}, tova_fragment([${children.join(', ')}])))`;
     }
 
     if (children.length === 1) {
-      return `${wrap}${iterable}.map((${varName}) => ${children[0]})`;
+      return `${wrap}${iterable}.map((${varName}${idxParam}) => ${children[0]})`;
     }
-    return `${wrap}${iterable}.map((${varName}) => tova_fragment([${children.join(', ')}]))`;
+    return `${wrap}${iterable}.map((${varName}${idxParam}) => tova_fragment([${children.join(', ')}]))`;
   }
 
   genJSXIf(node) {