tova 0.9.11 → 0.9.13

package/bin/tova.js

@@ -780,18 +780,40 @@ async function runFile(filePath, options = {}) {
       return;
     }
 
-    // Compile .tova dependencies and inline them
+    // Compile .tova dependencies and inline them (recursively)
     let depCode = '';
     if (hasTovaImports) {
       const compiled = new Set();
-      for (const imp of tovaImportPaths) {
-        if (compiled.has(imp.resolved)) continue;
-        compiled.add(imp.resolved);
-        const depSource = readFileSync(imp.resolved, 'utf-8');
-        const dep = compileTova(depSource, imp.resolved, { strict: options.strict });
+      const resolveTovaImportsRecursive = (filePath) => {
+        if (compiled.has(filePath)) return;
+        compiled.add(filePath);
+
+        const depSource = readFileSync(filePath, 'utf-8');
+
+        // Scan for transitive .tova imports
+        const transitiveRegex = /import\s+(?:\{[^}]*\}|[\w$]+|\*\s+as\s+[\w$]+)\s+from\s+['"]([^'"]+)['"]/g;
+        let transitiveMatch;
+        while ((transitiveMatch = transitiveRegex.exec(depSource)) !== null) {
+          const importSource = transitiveMatch[1];
+          if (!importSource.startsWith('.') && !importSource.startsWith('/')) continue;
+          let transitivePath = resolve(dirname(filePath), importSource);
+          if (!transitivePath.endsWith('.tova') && existsSync(transitivePath + '.tova')) {
+            transitivePath = transitivePath + '.tova';
+          }
+          if (transitivePath.endsWith('.tova') && existsSync(transitivePath)) {
+            resolveTovaImportsRecursive(transitivePath);
+          }
+        }
+
+        // Compile this dependency
+        const dep = compileTova(depSource, filePath, { strict: options.strict });
         let depShared = dep.shared || '';
         depShared = depShared.replace(/^export /gm, '');
         depCode += depShared + '\n';
+      };
+
+      for (const imp of tovaImportPaths) {
+        resolveTovaImportsRecursive(imp.resolved);
       }
     }
 
@@ -1305,7 +1327,7 @@ async function buildProject(args) {
     if (scorecard) console.log(scorecard.format());
   }
 
-  if (errorCount > 0) process.exit(1);
+  if (errorCount > 0 && !isWatch) process.exit(1);
 
   // Watch mode for build command
   if (isWatch) {
@@ -1318,7 +1340,11 @@ async function buildProject(args) {
         const changedPath = resolve(srcDir, filename);
         invalidateFile(changedPath);
         if (!isQuiet) console.log(`  Rebuilding (${filename} changed)...`);
-        await buildProject(args.filter(a => a !== '--watch'));
+        try {
+          await buildProject(args.filter(a => a !== '--watch'));
+        } catch (err) {
+          // Continue watching even on error
+        }
         if (!isQuiet) console.log('  Watching for changes...\n');
       }, 100);
     });
@@ -1811,6 +1837,8 @@ async function devServer(args) {
       let rebuildBrowserCode = '';
       let rebuildHasClient = false;
 
+      // First pass: collect all outputs without writing server files yet
+      const dirOutputs = [];
       for (const [dir, files] of rebuildDirGroups) {
         const dirName = basename(dir) === '.' ? 'app' : basename(dir);
         const result = mergeDirectory(dir, srcDir, { strict: buildStrict, strictSecurity: buildStrictSecurity, isDev: true });
@@ -1841,6 +1869,21 @@ async function devServer(args) {
           rebuildBrowserCode = fixedBrowser;
           rebuildHasClient = true;
         }
+
+        // Store outputs for second pass
+        dirOutputs.push({ output, outBaseName });
+      }
+
+      // Generate dev HTML with all shared code prepended to browser code
+      if (rebuildHasClient) {
+        const rebuildAllShared = rebuildSharedParts.join('\n').replace(/^export /gm, '');
+        const rebuildFullClient = rebuildAllShared ? rebuildAllShared + '\n' + rebuildBrowserCode : rebuildBrowserCode;
+        rebuildClientHTML = await generateDevHTML(rebuildFullClient, srcDir, actualReloadPort);
+        writeFileSync(join(outDir, 'index.html'), rebuildClientHTML);
+      }
+
+      // Second pass: write server files with correct __clientHTML
+      for (const { output, outBaseName } of dirOutputs) {
         if (output.server) {
           let serverCode = output.server;
           if (rebuildClientHTML) {
@@ -1859,14 +1902,6 @@ async function devServer(args) {
           }
         }
       }
-
-      // Generate dev HTML with all shared code prepended to browser code
-      if (rebuildHasClient) {
-        const rebuildAllShared = rebuildSharedParts.join('\n').replace(/^export /gm, '');
-        const rebuildFullClient = rebuildAllShared ? rebuildAllShared + '\n' + rebuildBrowserCode : rebuildBrowserCode;
-        rebuildClientHTML = await generateDevHTML(rebuildFullClient, srcDir, actualReloadPort);
-        writeFileSync(join(outDir, 'index.html'), rebuildClientHTML);
-      }
     } catch (err) {
       console.error(`  ✗ Rebuild failed: ${err.message}`);
       return; // Keep old processes running
@@ -2685,6 +2720,13 @@ shared {
   }
 }
 
+security {
+  cors {
+    origins: ["http://localhost:3000"]
+    methods: ["GET", "POST"]
+  }
+}
+
 server {
   fn get_message() {
     Message("Hello from Tova!", Date.new().toLocaleTimeString())
@@ -3169,6 +3211,13 @@ browser {
     file: 'src/app.tova',
     content: name => `// ${name} — Built with Tova
 
+security {
+  cors {
+    origins: ["http://localhost:3000"]
+    methods: ["GET", "POST", "PUT", "DELETE"]
+  }
+}
+
 server {
   fn health() {
     { status: "ok" }
@@ -4966,7 +5015,7 @@ async function productionBuild(srcDir, outDir, isStatic = false) {
   for (const file of tovaFiles) {
     try {
       const source = readFileSync(file, 'utf-8');
-      const output = compileTova(source, file);
+      const output = compileWithImports(source, file, srcDir);
 
       if (output.shared) sharedParts.push(output.shared);
       if (output.server) serverParts.push(output.server);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tova",
-  "version": "0.9.11",
+  "version": "0.9.13",
   "description": "Tova — a modern programming language that transpiles to JavaScript, unifying frontend and backend",
   "type": "module",
   "main": "src/index.js",

package/src/analyzer/analyzer.js

@@ -529,7 +529,8 @@ export class Analyzer {
           const rt = this._inferType(expr.right);
           if (!lt && !rt) return null;
           if (lt === 'Float' || rt === 'Float') return 'Float';
-          if (lt === 'String' || rt === 'String') return 'String';
+          // Bug fix 4: Tova uses ++ for concatenation, + is numeric only
+          // Remove String check for + operator
           return 'Int';
         }
         if (BITWISE_OPS.has(expr.operator)) return 'Int';
@@ -2250,12 +2251,19 @@ export class Analyzer {
     } else if (node.pattern.type === 'ArrayPattern' || node.pattern.type === 'TuplePattern') {
       for (const el of node.pattern.elements) {
         if (el) {
-          const varName = el.startsWith('...') ? el.slice(3) : el;
-          try {
-            this.currentScope.define(varName,
-              new Symbol(varName, 'variable', null, false, node.loc));
-          } catch (e) {
-            this.error(e.message);
+          // Bug fix 1: check if element is a string before calling .startsWith()
+          // Elements can be nested pattern objects
+          if (typeof el === 'string') {
+            const varName = el.startsWith('...') ? el.slice(3) : el;
+            try {
+              this.currentScope.define(varName,
+                new Symbol(varName, 'variable', null, false, node.loc));
+            } catch (e) {
+              this.error(e.message);
+            }
+          } else if (el && typeof el === 'object') {
+            // Nested pattern - recursively extract variables using visitPattern
+            this.visitPattern(el);
           }
         }
       }
@@ -2700,13 +2708,21 @@ export class Analyzer {
       this.visitExpression(node.iterable);
 
       // Define loop variable(s)
+      // Bug fix 2: handle destructured loop variables (pattern objects)
       const vars = Array.isArray(node.variable) ? node.variable : [node.variable];
       for (const v of vars) {
-        try {
-          this.currentScope.define(v,
-            new Symbol(v, 'variable', null, false, node.loc));
-        } catch (e) {
-          this.error(e.message);
+        // Check if v is a pattern object (has a .type property like ObjectPattern or ArrayPattern)
+        if (typeof v === 'object' && v && v.type) {
+          // It's a pattern - use visitPattern to extract and define all bound variables
+          this.visitPattern(v);
+        } else {
+          // It's a plain string variable name
+          try {
+            this.currentScope.define(v,
+              new Symbol(v, 'variable', null, false, node.loc));
+          } catch (e) {
+            this.error(e.message);
+          }
         }
       }
 

package/src/analyzer/browser-analyzer.js

@@ -278,9 +278,20 @@ export function installBrowserAnalyzer(AnalyzerClass) {
   AnalyzerClass.prototype.visitJSXMatch = function(node) {
     this.visitExpression(node.subject);
     for (const arm of node.arms) {
-      // Visit pattern bindings in a child scope
-      for (const child of arm.body) {
-        this.visitNode(child);
+      // Bug fix 3: Create child scope and visit pattern to define bound variables
+      // Match the pattern used in visitMatchExpression
+      const prevScope = this.currentScope;
+      this.currentScope = this.currentScope.child('block');
+
+      try {
+        this.visitPattern(arm.pattern);
+        if (arm.guard) this.visitExpression(arm.guard);
+
+        for (const child of arm.body) {
+          this.visitNode(child);
+        }
+      } finally {
+        this.currentScope = prevScope;
       }
     }
   };

package/src/codegen/base-codegen.js

@@ -32,6 +32,8 @@ export class BaseCodegen {
     this._fastMode = false;
     this._typedArrayParams = new Map(); // paramName -> 'Float64Array' | 'Int32Array' | 'Uint8Array'
     this._typedArrayLocals = new Map(); // varName -> 'Float64Array' | 'Int32Array' | 'Uint8Array'
+    // Track shadowed parameter names to prevent incorrect substitution in nested lambdas
+    this._substitutionShadowed = new Set(); // names shadowed by lambda/function params
   }
 
   static TYPED_ARRAY_MAP = {
@@ -328,7 +330,8 @@ export class BaseCodegen {
     switch (node.type) {
       case 'Identifier':
         // Parameter substitution for map chain fusion
-        if (this._paramSubstitutions && this._paramSubstitutions.has(node.name)) {
+        // Skip substitution if the name is shadowed by a nested lambda/function parameter
+        if (this._paramSubstitutions && this._paramSubstitutions.has(node.name) && !this._substitutionShadowed.has(node.name)) {
           return this._paramSubstitutions.get(node.name);
         }
         // Track builtin identifier usage (e.g., None used without call)
@@ -556,6 +559,19 @@ export class BaseCodegen {
     const exportPrefix = node.isPublic ? 'export ' : '';
     const asyncPrefix = node.isAsync ? 'async ' : '';
     const genStar = isGenerator ? '*' : '';
+
+    // Track which parameter names shadow active substitutions
+    const paramNames = this._collectParamNames(node.params);
+    const shadowedNames = [];
+    if (this._paramSubstitutions) {
+      for (const name of paramNames) {
+        if (this._paramSubstitutions.has(name)) {
+          shadowedNames.push(name);
+          this._substitutionShadowed.add(name);
+        }
+      }
+    }
+
     this.pushScope();
     for (const p of node.params) {
       if (p.destructure) {
@@ -566,6 +582,11 @@ export class BaseCodegen {
     }
     const body = this.genBlockBody(node.body);
     this.popScope();
+
+    // Restore shadowing state
+    for (const name of shadowedNames) {
+      this._substitutionShadowed.delete(name);
+    }
     const lines = [];
     lines.push(`${this.i()}${exportPrefix}${asyncPrefix}function${genStar} ${node.name}(${params}) {`);
     // In @fast mode, convert typed array params at function entry
@@ -1722,6 +1743,53 @@ export class BaseCodegen {
     return result;
   }
 
+  // Collect all parameter names from a param list (including destructured names)
+  _collectParamNames(params) {
+    const names = [];
+    for (const p of params) {
+      if (p.destructure) {
+        // Recursively collect names from destructuring patterns
+        this._collectDestructureNames(p.destructure, names);
+      } else {
+        names.push(p.name);
+      }
+    }
+    return names;
+  }
+
+  // Helper to recursively collect names from destructuring patterns
+  _collectDestructureNames(pattern, names) {
+    if (pattern.type === 'ObjectPattern') {
+      for (const prop of pattern.properties) {
+        if (prop.value && prop.value.type === 'Identifier') {
+          names.push(prop.value.name);
+        } else if (prop.value) {
+          this._collectDestructureNames(prop.value, names);
+        }
+      }
+    } else if (pattern.type === 'ArrayPattern') {
+      for (const elem of pattern.elements) {
+        if (elem === null) continue; // skip holes
+        if (elem.type === 'Identifier') {
+          names.push(elem.name);
+        } else if (elem.type === 'RestElement' && elem.argument.type === 'Identifier') {
+          names.push(elem.argument.name);
+        } else {
+          this._collectDestructureNames(elem, names);
+        }
+      }
+    } else if (pattern.type === 'TuplePattern') {
+      for (const elem of pattern.elements) {
+        if (elem === null) continue;
+        if (elem.type === 'Identifier') {
+          names.push(elem.name);
+        } else {
+          this._collectDestructureNames(elem, names);
+        }
+      }
+    }
+  }
+
   // ─── Compile-time devirtualization for Result/Option ──────────
   // When the codegen sees Ok(val).method(), Err(val).method(), Some(val).method(),
   // or None.method(), it knows the exact type at compile time. Instead of allocating
@@ -2421,11 +2489,27 @@ export class BaseCodegen {
     const hasPropagate = this._containsPropagate(node.body);
     const asyncPrefix = node.isAsync ? 'async ' : '';
 
+    // Track which parameter names shadow active substitutions
+    const paramNames = this._collectParamNames(node.params);
+    const shadowedNames = [];
+    if (this._paramSubstitutions) {
+      for (const name of paramNames) {
+        if (this._paramSubstitutions.has(name)) {
+          shadowedNames.push(name);
+          this._substitutionShadowed.add(name);
+        }
+      }
+    }
+
     if (node.body.type === 'BlockStatement') {
       this.pushScope();
       for (const p of node.params) { if (p.destructure) this._declareDestructureVars(p.destructure); else this.declareVar(p.name); }
       const body = this.genBlockBody(node.body);
       this.popScope();
+      // Restore shadowing state
+      for (const name of shadowedNames) {
+        this._substitutionShadowed.delete(name);
+      }
       if (hasPropagate) {
         const p = [];
         p.push(`${asyncPrefix}(${params}) => {`);
@@ -2449,13 +2533,25 @@ export class BaseCodegen {
       const stmt = this.generateStatement(node.body);
       this.indent--;
       this.popScope();
+      // Restore shadowing state
+      for (const name of shadowedNames) {
+        this._substitutionShadowed.delete(name);
+      }
       return `${asyncPrefix}(${params}) => { ${stmt.trim()} }`;
     }
 
+    // Expression body
+    let bodyCode;
     if (hasPropagate) {
-      return `${asyncPrefix}(${params}) => { try { return ${this.genExpression(node.body)}; } catch (__e) { if (__e && __e.__tova_propagate) return __e.value; throw __e; } }`;
+      bodyCode = `${asyncPrefix}(${params}) => { try { return ${this.genExpression(node.body)}; } catch (__e) { if (__e && __e.__tova_propagate) return __e.value; throw __e; } }`;
+    } else {
+      bodyCode = `${asyncPrefix}(${params}) => ${this.genExpression(node.body)}`;
+    }
+    // Restore shadowing state
+    for (const name of shadowedNames) {
+      this._substitutionShadowed.delete(name);
     }
-    return `${asyncPrefix}(${params}) => ${this.genExpression(node.body)}`;
+    return bodyCode;
   }
 
   // Check if a match can be emitted as a ternary chain instead of IIFE

package/src/codegen/browser-codegen.js

@@ -48,7 +48,7 @@ export class BrowserCodegen extends BaseCodegen {
     if (node.type === 'ReturnStatement') return this._containsRPC(node.value);
     if (node.type === 'IfStatement') {
       return this._containsRPC(node.condition) || this._containsRPC(node.consequent) ||
-        node.alternates.some(a => this._containsRPC(a.body)) ||
+        (node.alternates && node.alternates.some(a => this._containsRPC(a.body))) ||
         this._containsRPC(node.elseBody);
     }
     if (node.type === 'IfExpression') {
@@ -223,7 +223,7 @@ export class BrowserCodegen extends BaseCodegen {
     // 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, __tova_load_font } from './runtime/reactivity.js';`);
     lines.push(`import { rpc, configureRPC, addRPCInterceptor, setCSRFToken } from './runtime/rpc.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';`);
+    lines.push(`import { createRouter, 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;

package/src/codegen/edge-codegen.js

@@ -185,7 +185,7 @@ export class EdgeCodegen extends BaseCodegen {
       lines.push('  const checks = {};');
       lines.push('  let status = "healthy";');
       if (config.healthChecks.includes('check_memory')) {
-        lines.push('  const mem = process.memoryUsage ? process.memoryUsage() : { heapUsed: 0, heapTotal: 1 };');
+        lines.push('  const mem = (typeof process !== "undefined" && process.memoryUsage) ? process.memoryUsage() : { heapUsed: 0, heapTotal: 1 };');
         lines.push('  const heapPct = mem.heapUsed / mem.heapTotal;');
         lines.push('  checks.memory = { status: heapPct > 0.9 ? "degraded" : "healthy", heapUsed: mem.heapUsed, heapTotal: mem.heapTotal };');
         lines.push('  if (heapPct > 0.9) status = "degraded";');
@@ -264,15 +264,17 @@ export class EdgeCodegen extends BaseCodegen {
       const fallbackHeaders = hasCors
         ? `{ "Content-Type": "application/json", ...__getCorsHeaders(${reqVar}) }`
         : '{ "Content-Type": "application/json" }';
-      lines.push(`${indent}  return { statusCode: 500, headers: ${fallbackHeaders}, body: JSON.stringify({ error: e.message }) };`);
+      lines.push(`${indent}  console.error("[tova:edge]", e);`);
+      lines.push(`${indent}  return { statusCode: 500, headers: ${fallbackHeaders}, body: JSON.stringify({ error: "Internal Server Error" }) };`);
     } else {
+      lines.push(`${indent}  console.error("[tova:edge]", e);`);
       if (hasCors) {
-        lines.push(`${indent}  return new Response(JSON.stringify({ error: e.message }), {`);
+        lines.push(`${indent}  return new Response(JSON.stringify({ error: "Internal Server Error" }), {`);
         lines.push(`${indent}    status: 500,`);
         lines.push(`${indent}    headers: { "Content-Type": "application/json", ...__getCorsHeaders(${reqVar}) }`);
         lines.push(`${indent}  });`);
       } else {
-        lines.push(`${indent}  return new Response(JSON.stringify({ error: e.message }), {`);
+        lines.push(`${indent}  return new Response(JSON.stringify({ error: "Internal Server Error" }), {`);
         lines.push(`${indent}    status: 500,`);
         lines.push(`${indent}    headers: { "Content-Type": "application/json" }`);
         lines.push(`${indent}  });`);

package/src/codegen/form-codegen.js

@@ -39,13 +39,13 @@ export function generateValidatorFn(fieldName, validators, genExpression, indent
 
       case 'min': {
         const threshold = v.args.length >= 2 ? genExpression(v.args[0]) : '0';
-        lines.push(`${indent}  if (typeof v === "number" && v < ${threshold}) return ${msg};`);
+        lines.push(`${indent}  if (v !== "" && v !== null && v !== undefined && Number(v) < ${threshold}) return ${msg};`);
         break;
       }
 
       case 'max': {
         const threshold = v.args.length >= 2 ? genExpression(v.args[0]) : 'Infinity';
-        lines.push(`${indent}  if (typeof v === "number" && v > ${threshold}) return ${msg};`);
+        lines.push(`${indent}  if (v !== "" && v !== null && v !== undefined && Number(v) > ${threshold}) return ${msg};`);
         break;
       }
 
@@ -196,13 +196,13 @@ export function generateGuardedValidatorFn(fieldName, validators, genExpression,
 
       case 'min': {
         const threshold = v.args.length >= 2 ? genExpression(v.args[0]) : '0';
-        lines.push(`${indent}  if (typeof v === "number" && v < ${threshold}) return ${msg};`);
+        lines.push(`${indent}  if (v !== "" && v !== null && v !== undefined && Number(v) < ${threshold}) return ${msg};`);
         break;
       }
 
       case 'max': {
         const threshold = v.args.length >= 2 ? genExpression(v.args[0]) : 'Infinity';
-        lines.push(`${indent}  if (typeof v === "number" && v > ${threshold}) return ${msg};`);
+        lines.push(`${indent}  if (v !== "" && v !== null && v !== undefined && Number(v) > ${threshold}) return ${msg};`);
         break;
       }
 

package/src/codegen/security-codegen.js

@@ -262,14 +262,15 @@ export class SecurityCodegen extends BaseCodegen {
         lines.push(`function ${fnName}(obj, user) {`);
         lines.push('  if (!obj) return obj;');
         lines.push('  const result = { ...obj };');
-        for (const field of fields) {
+        for (let fi = 0; fi < fields.length; fi++) {
+          const field = fields[fi];
           if (field.config.never_expose) {
             lines.push(`  delete result.${field.fieldName};`);
           } else if (field.config.visible_to) {
             const visibleExpr = this.genExpression(field.config.visible_to);
-            lines.push(`  const __visibleTo = ${visibleExpr};`);
-            lines.push(`  const __canSee = __visibleTo.some(v => v === "self" ? (user && __isSameIdentity(user, obj)) : __hasRole(user, v));`);
-            lines.push(`  if (!__canSee) delete result.${field.fieldName};`);
+            lines.push(`  { const __visibleTo = ${visibleExpr};`);
+            lines.push(`    const __canSee = __visibleTo.some(v => v === "self" ? (user && __isSameIdentity(user, obj)) : __hasRole(user, v));`);
+            lines.push(`    if (!__canSee) delete result.${field.fieldName}; }`);
           }
         }
         lines.push('  return result;');

package/src/codegen/server-codegen.js

@@ -3217,6 +3217,7 @@ export class ServerCodegen extends BaseCodegen {
       lines.push('  let __pathname = __qIdx === -1 ? __rawUrl.slice(__pStart) : __rawUrl.slice(__pStart, __qIdx);');
       lines.push('  try { __pathname = decodeURIComponent(__pathname); } catch {}');
       lines.push('  __pathname = __pathname.replace(/\\/\\/+/g, "/");');
+      lines.push('  if (__pathname.includes("..")) { const __parts = __pathname.split("/"); const __resolved = []; for (const __seg of __parts) { if (__seg === "..") { __resolved.pop(); } else if (__seg !== ".") { __resolved.push(__seg); } } __pathname = __resolved.join("/") || "/"; }');
       lines.push('  if (__pathname.length > 1 && __pathname.endsWith("/")) __pathname = __pathname.slice(0, -1);');
       lines.push('  const __method = req.method;');
 

package/src/lexer/lexer.js

@@ -518,6 +518,14 @@ export class Lexer {
               } else if (quote === '"' && this.peek() === '}' && strDepth > 0) {
                 strDepth--;
                 exprParts.push(this.advance());
+              } else if (quote === '`' && this.peek() === '$' && this.pos + 1 < this.length && this.source[this.pos + 1] === '{') {
+                // Handle JS template literal interpolation ${...}
+                exprParts.push(this.advance()); // $
+                exprParts.push(this.advance()); // {
+                strDepth++;
+              } else if (quote === '`' && this.peek() === '}' && strDepth > 0) {
+                strDepth--;
+                exprParts.push(this.advance());
               } else if (this.peek() === quote && strDepth === 0) {
                 break;
               } else {

package/src/runtime/embedded.js

@@ -1,6 +1,6 @@
 // Auto-generated by scripts/embed-runtime.js — do not edit
 
-export const REACTIVITY_SOURCE = "// Fine-grained reactivity system for Tova (signals-based)\n\nconst __DEV__ = typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';\n\n// ─── DevTools hooks (zero-cost when disabled) ────────────\nlet __devtools_hooks = null;\nexport function __enableDevTools(hooks) {\n  __devtools_hooks = hooks;\n}\n\nlet currentEffect = null;\nconst effectStack = [];\n\n// ─── Ownership System ─────────────────────────────────────\nlet currentOwner = null;\nconst ownerStack = [];\n\n// ─── Batching ────────────────────────────────────────────\n// Default: synchronous flush after each setter (backward compatible).\n// Inside batch(): effects are deferred and flushed once when batch ends.\n// This means setA(1); setB(2) causes 2 runs by default, but\n// batch(() => { setA(1); setB(2); }) causes only 1 run.\n\nlet pendingEffects = new Set();\nlet batchDepth = 0;\nlet flushing = false;\n\n// Reusable array for flush cycle — avoids allocation on every flush\nlet _flushBuf = [];\n\n// Reset module-level mutable state for test isolation.\n// Bun runs all test files in a single process, so Maps like __tovaStyleRefs\n// accumulate entries across files. Call this between tests to prevent pollution.\nexport function __resetForTesting() {\n  if (typeof __tovaStyleRefs !== 'undefined') __tovaStyleRefs.clear();\n  if (typeof __tovaFontRefs !== 'undefined') __tovaFontRefs.clear();\n  __cspNonce = null;\n  __tovaHeadTags.length = 0;\n  pendingEffects.clear();\n  currentEffect = null;\n  currentOwner = null;\n  effectStack.length = 0;\n  ownerStack.length = 0;\n  batchDepth = 0;\n  flushing = false;\n  _flushBuf.length = 0;\n  __devtools_hooks = null;\n  __errorBoundaryIdCounter = 0;\n  currentErrorHandler = null;\n}\n\nfunction flush() {\n  if (flushing) return; // prevent re-entrant flush\n  flushing = true;\n  let iterations = 0;\n  try {\n    while (pendingEffects.size > 0) {\n      if (++iterations > 100) {\n        console.error('Tova: Possible infinite loop in reactive updates (>100 flush iterations). Aborting.');\n        pendingEffects.clear();\n        break;\n      }\n\n      // Invoke onBeforeUpdate callbacks for owners that have pending effects\n      const ownersNotified = new Set();\n      for (const effect of pendingEffects) {\n        const owner = effect._owner;\n        if (owner && owner._beforeUpdate && !ownersNotified.has(owner)) {\n          ownersNotified.add(owner);\n          for (const cb of owner._beforeUpdate) {\n            try { cb(); } catch (e) { console.error('Tova: onBeforeUpdate error:', e); }\n          }\n        }\n      }\n\n      const toRun = pendingEffects;\n      pendingEffects = new Set();\n      // Sort by depth (parents first) to avoid redundant child re-runs\n      // Reuse buffer to reduce GC pressure\n      if (toRun.size > 1) {\n        _flushBuf.length = 0;\n        for (const effect of toRun) _flushBuf.push(effect);\n        _flushBuf.sort((a, b) => (a._depth || 0) - (b._depth || 0));\n        for (let i = 0; i < _flushBuf.length; i++) {\n          if (!_flushBuf[i]._disposed) {\n            _flushBuf[i]();\n          }\n        }\n        _flushBuf.length = 0;\n      } else {\n        for (const effect of toRun) {\n          if (!effect._disposed) {\n            effect();\n          }\n        }\n      }\n    }\n  } finally {\n    flushing = false;\n  }\n}\n\nexport function batch(fn) {\n  batchDepth++;\n  try {\n    fn();\n  } finally {\n    batchDepth--;\n    if (batchDepth === 0) {\n      flush();\n    }\n  }\n}\n\n// ─── Ownership Root ──────────────────────────────────────\n\nexport function createRoot(fn) {\n  const root = {\n    _children: [],\n    _disposed: false,\n    _cleanups: [],\n    _contexts: null,\n    _owner: currentOwner,\n    dispose() {\n      if (root._disposed) return;\n      root._disposed = true;\n      // Dispose children in reverse order (skip already-disposed)\n      for (let i = root._children.length - 1; i >= 0; i--) {\n        const child = root._children[i];\n        if (!child._disposed && typeof child.dispose === 'function') child.dispose();\n      }\n      root._children.length = 0;\n      // Run cleanups in reverse order\n      for (let i = root._cleanups.length - 1; i >= 0; i--) {\n        try { root._cleanups[i](); } catch (e) { console.error('Tova: root cleanup error:', e); }\n      }\n      root._cleanups.length = 0;\n    }\n  };\n  ownerStack.push(currentOwner);\n  currentOwner = root;\n  try {\n    return fn(root.dispose.bind(root));\n  } finally {\n    currentOwner = ownerStack.pop();\n  }\n}\n\n// ─── Dependency Cleanup ──────────────────────────────────\n\nfunction cleanupDeps(subscriber) {\n  if (subscriber._deps) {\n    for (const depSet of subscriber._deps) {\n      depSet.delete(subscriber);\n    }\n    subscriber._deps.clear();\n  }\n}\n\nfunction trackDep(subscriber, subscriberSet) {\n  subscriberSet.add(subscriber);\n  if (!subscriber._deps) subscriber._deps = new Set();\n  subscriber._deps.add(subscriberSet);\n}\n\n// ─── Signals ─────────────────────────────────────────────\n\nexport function createSignal(initialValue, name) {\n  let value = initialValue;\n  const subscribers = new Set();\n  let signalId = null;\n\n  if (__devtools_hooks) {\n    signalId = __devtools_hooks.onSignalCreate(\n      () => value,\n      (v) => setter(v),\n      name,\n    );\n  }\n\n  function getter() {\n    if (currentEffect) {\n      trackDep(currentEffect, subscribers);\n    }\n    return value;\n  }\n\n  function setter(newValue) {\n    if (typeof newValue === 'function') {\n      newValue = newValue(value);\n    }\n    if (value !== newValue) {\n      const oldValue = value;\n      value = newValue;\n      if (__devtools_hooks && signalId != null) {\n        __devtools_hooks.onSignalUpdate(signalId, oldValue, newValue);\n      }\n      for (const sub of subscribers) {\n        if (sub._isComputed) {\n          sub(); // propagate dirty flags synchronously through computed graph\n        } else {\n          pendingEffects.add(sub);\n        }\n      }\n      if (batchDepth === 0) {\n        flush();\n      }\n    }\n  }\n\n  return [getter, setter];\n}\n\n// ─── Effects ─────────────────────────────────────────────\n\nfunction runCleanups(effect) {\n  if (effect._cleanup) {\n    try { effect._cleanup(); } catch (e) { console.error('Tova: cleanup error:', e); }\n    effect._cleanup = null;\n  }\n  if (effect._cleanups && effect._cleanups.length > 0) {\n    for (const cb of effect._cleanups) {\n      try { cb(); } catch (e) { console.error('Tova: cleanup error:', e); }\n    }\n    effect._cleanups = [];\n  }\n}\n\nexport function createEffect(fn) {\n  function effect() {\n    if (effect._running) return;\n    if (effect._disposed) return;\n    effect._running = true;\n\n    // Run cleanups from previous execution\n    runCleanups(effect);\n\n    // Remove from all previous dependency subscriber sets\n    cleanupDeps(effect);\n\n    effectStack.push(effect);\n    currentEffect = effect;\n    const startTime = __devtools_hooks && typeof performance !== 'undefined' ? performance.now() : 0;\n    try {\n      const result = fn();\n      // If effect returns a function, use as cleanup\n      if (typeof result === 'function') {\n        effect._cleanup = result;\n      }\n    } catch (e) {\n      console.error('Tova: Error in effect:', e);\n      if (currentErrorHandler) {\n        currentErrorHandler(e);\n      }\n    } finally {\n      if (__devtools_hooks) {\n        const duration = typeof performance !== 'undefined' ? performance.now() - startTime : 0;\n        __devtools_hooks.onEffectRun(effect, duration);\n      }\n      effectStack.pop();\n      currentEffect = effectStack[effectStack.length - 1] || null;\n      effect._running = false;\n    }\n  }\n\n  effect._deps = new Set();\n  effect._running = false;\n  effect._disposed = false;\n  effect._cleanup = null;\n  effect._cleanups = [];\n  effect._owner = currentOwner;\n  // Compute depth for priority scheduling (parents flush before children)\n  effect._depth = currentOwner ? (currentOwner._depth || 0) + 1 : 0;\n\n  if (__devtools_hooks) {\n    __devtools_hooks.onEffectCreate(effect);\n  }\n\n  if (currentOwner && !currentOwner._disposed) {\n    currentOwner._children.push(effect);\n  }\n\n  effect.dispose = function () {\n    effect._disposed = true;\n    runCleanups(effect);\n    cleanupDeps(effect);\n    pendingEffects.delete(effect);\n  };\n\n  // Run immediately (synchronous first run)\n  effect();\n  return effect;\n}\n\n// ─── Computed (lazy/pull-based for glitch-free reads) ────\n\nexport function createComputed(fn) {\n  let value;\n  let dirty = true;\n  const subscribers = new Set();\n\n  // notify is called synchronously when a source signal changes.\n  // It marks the computed dirty and propagates to downstream subscribers.\n  function notify() {\n    if (!dirty) {\n      dirty = true;\n      notify._dirty = true;\n      for (const sub of subscribers) {\n        if (sub._isComputed) {\n          if (!sub._dirty) sub(); // skip already-dirty computeds\n        } else {\n          pendingEffects.add(sub);\n        }\n      }\n    }\n  }\n\n  notify._deps = new Set();\n  notify._disposed = false;\n  notify._isComputed = true;\n  notify._owner = currentOwner;\n\n  if (currentOwner && !currentOwner._disposed) {\n    currentOwner._children.push(notify);\n  }\n\n  notify.dispose = function () {\n    notify._disposed = true;\n    cleanupDeps(notify);\n  };\n\n  function recompute() {\n    cleanupDeps(notify);\n\n    effectStack.push(notify);\n    currentEffect = notify;\n    try {\n      value = fn();\n      dirty = false;\n      notify._dirty = false;\n    } finally {\n      effectStack.pop();\n      currentEffect = effectStack[effectStack.length - 1] || null;\n    }\n  }\n\n  // Initial computation\n  recompute();\n\n  function getter() {\n    if (currentEffect) {\n      trackDep(currentEffect, subscribers);\n    }\n    if (dirty) {\n      recompute();\n    }\n    return value;\n  }\n\n  return getter;\n}\n\n// ─── Lifecycle Hooks ─────────────────────────────────────\n\nexport function onMount(fn) {\n  const owner = currentOwner;\n  queueMicrotask(() => {\n    const result = fn();\n    if (typeof result === 'function' && owner && !owner._disposed) {\n      owner._cleanups.push(result);\n    }\n  });\n}\n\nexport function onUnmount(fn) {\n  if (currentOwner && !currentOwner._disposed) {\n    currentOwner._cleanups.push(fn);\n  }\n}\n\nexport function onCleanup(fn) {\n  if (currentEffect) {\n    if (!currentEffect._cleanups) currentEffect._cleanups = [];\n    currentEffect._cleanups.push(fn);\n  }\n}\n\nexport function onBeforeUpdate(fn) {\n  if (currentOwner && !currentOwner._disposed) {\n    if (!currentOwner._beforeUpdate) currentOwner._beforeUpdate = [];\n    currentOwner._beforeUpdate.push(fn);\n  }\n}\n\n// ─── Untrack ─────────────────────────────────────────────\n// Run a function without tracking any signal reads (opt out of reactivity)\n\nexport function untrack(fn) {\n  const prev = currentEffect;\n  currentEffect = null;\n  try {\n    return fn();\n  } finally {\n    currentEffect = prev;\n  }\n}\n\n// ─── Watch ───────────────────────────────────────────────\n// Watch a reactive expression, calling callback with (newValue, oldValue)\n// Returns a dispose function to stop watching.\n\nexport function watch(getter, callback, options = {}) {\n  let oldValue = undefined;\n  let initialized = false;\n\n  const effect = createEffect(() => {\n    const newValue = getter();\n    if (initialized) {\n      untrack(() => callback(newValue, oldValue));\n    } else if (options.immediate) {\n      untrack(() => callback(newValue, undefined));\n    }\n    oldValue = newValue;\n    initialized = true;\n  });\n\n  return effect.dispose ? effect.dispose.bind(effect) : () => {\n    effect._disposed = true;\n    runCleanups(effect);\n    cleanupDeps(effect);\n    pendingEffects.delete(effect);\n  };\n}\n\n// ─── Refs ────────────────────────────────────────────────\n\nexport function createRef(initialValue) {\n  return { current: initialValue !== undefined ? initialValue : null };\n}\n\n// ─── Error Boundaries ────────────────────────────────────\n\n// Stack-based error handler for correct nested boundary propagation\nconst errorHandlerStack = [];\nlet currentErrorHandler = null;\n\nfunction pushErrorHandler(handler) {\n  errorHandlerStack.push(currentErrorHandler);\n  currentErrorHandler = handler;\n}\n\nfunction popErrorHandler() {\n  currentErrorHandler = errorHandlerStack.pop() || null;\n}\n\n// Component name tracking for stack traces\nconst componentNameStack = [];\n\nexport function pushComponentName(name) {\n  componentNameStack.push(name);\n}\n\nexport function popComponentName() {\n  componentNameStack.pop();\n}\n\nfunction buildComponentStack() {\n  return [...componentNameStack].reverse();\n}\n\nexport function createErrorBoundary(options = {}) {\n  const { onError, onReset } = options;\n  const [error, setError] = createSignal(null);\n\n  function run(fn) {\n    pushErrorHandler((e) => {\n      const stack = buildComponentStack();\n      if (e && typeof e === 'object') e.__tovaComponentStack = stack;\n      setError(e);\n      if (onError) onError({ error: e, componentStack: stack });\n    });\n    try {\n      return fn();\n    } catch (e) {\n      const stack = buildComponentStack();\n      if (e && typeof e === 'object') e.__tovaComponentStack = stack;\n      setError(e);\n      if (onError) onError({ error: e, componentStack: stack });\n      return null;\n    } finally {\n      popErrorHandler();\n    }\n  }\n\n  function reset() {\n    setError(null);\n    if (onReset) onReset();\n  }\n\n  return { error, run, reset };\n}\n\nlet __errorBoundaryIdCounter = 0;\n\nexport function ErrorBoundary({ fallback, children, onError, onReset, onErrorCleared, retry = 0 }) {\n  const [error, setError] = createSignal(null);\n  const [retryCount, setRetryCount] = createSignal(0);\n  const boundaryId = ++__errorBoundaryIdCounter;\n  let lastErrorId = 0;\n\n  function handleError(e) {\n    const stack = buildComponentStack();\n    const errorId = `EB${boundaryId}-${++lastErrorId}`;\n\n    if (e && typeof e === 'object') {\n      e.__tovaComponentStack = stack;\n      e.__tovaErrorId = errorId;\n    }\n\n    if (retryCount() < retry) {\n      setRetryCount(c => c + 1);\n      setError(null); // clear to re-trigger render\n      return;\n    }\n    setError(e);\n    if (onError) onError({ error: e, componentStack: stack, errorId, retryCount: retryCount() });\n  }\n\n  function resetBoundary() {\n    setRetryCount(0);\n    setError(null);\n    if (onReset) onReset();\n  }\n\n  // Return a reactive wrapper that switches between children and fallback\n  const childContent = children && children.length === 1 ? children[0] : tova_fragment(children || []);\n\n  const vnode = {\n    __tova: true,\n    tag: '__dynamic',\n    props: {},\n    children: [],\n    _fallback: fallback,\n    _componentName: 'ErrorBoundary',\n    _errorHandler: handleError, // Active during __dynamic effect render cycle\n    compute: () => {\n      const err = error();\n      if (err) {\n        // Render fallback — if fallback itself throws, propagate to parent boundary\n        try {\n          const errorId = err && typeof err === 'object' ? err.__tovaErrorId : null;\n          return typeof fallback === 'function'\n            ? fallback({\n                error: err,\n                errorId,\n                retryCount: retryCount(),\n                componentStack: err && typeof err === 'object' ? err.__tovaComponentStack : [],\n                reset: resetBoundary,\n              })\n            : fallback;\n        } catch (fallbackError) {\n          // Fallback threw — propagate to parent error boundary\n          if (currentErrorHandler) {\n            currentErrorHandler(fallbackError);\n          }\n          return null;\n        }\n      }\n      // Children rendered successfully — fire onErrorCleared if we recovered from an error\n      if (onErrorCleared && lastErrorId > 0 && retryCount() === 0) {\n        queueMicrotask(() => onErrorCleared());\n      }\n      return childContent;\n    },\n  };\n\n  return vnode;\n}\n\n// Built-in ErrorInfo component — renders a formatted error display\n// Usage: <ErrorBoundary fallback={fn(props) ErrorInfo(props)} />\nexport function ErrorInfo({ error, errorId, componentStack, reset, retryCount }) {\n  const message = error instanceof Error ? error.message : String(error);\n  const stackTrace = error instanceof Error && error.stack ? error.stack : '';\n  const compStack = (componentStack || []).join(' > ');\n\n  const children = [\n    tova_el('h3', { style: { margin: '0 0 8px 0', color: '#e53e3e' } }, ['Something went wrong']),\n    tova_el('p', { style: { margin: '4px 0', fontFamily: 'monospace', fontSize: '14px' } }, [message]),\n  ];\n\n  if (compStack) {\n    children.push(\n      tova_el('p', { style: { margin: '4px 0', fontSize: '12px', color: '#718096' } }, [\n        'Component: ', compStack\n      ])\n    );\n  }\n\n  if (errorId) {\n    children.push(\n      tova_el('p', { style: { margin: '4px 0', fontSize: '11px', color: '#a0aec0' } }, [\n        'Error ID: ', errorId\n      ])\n    );\n  }\n\n  if (stackTrace) {\n    children.push(\n      tova_el('details', { style: { marginTop: '8px', fontSize: '12px' } }, [\n        tova_el('summary', { style: { cursor: 'pointer', color: '#4a5568' } }, ['Stack trace']),\n        tova_el('pre', { style: { margin: '4px 0', padding: '8px', background: '#1a202c', color: '#e2e8f0', borderRadius: '4px', overflow: 'auto', fontSize: '11px', maxHeight: '200px' } }, [stackTrace]),\n      ])\n    );\n  }\n\n  if (reset) {\n    children.push(\n      tova_el('button', {\n        style: { marginTop: '8px', padding: '6px 16px', background: '#3182ce', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '13px' },\n        onClick: reset,\n      }, [retryCount > 0 ? 'Retry again' : 'Try again'])\n    );\n  }\n\n  return tova_el('div', {\n    style: { padding: '16px', border: '1px solid #fed7d7', borderRadius: '8px', background: '#fff5f5', color: '#2d3748', fontFamily: 'system-ui, -apple-system, sans-serif' },\n    role: 'alert',\n  }, children);\n}\n\n// ─── Dynamic Component ──────────────────────────────────\n// Renders a component dynamically based on a reactive signal.\n// Usage: Dynamic({ component: mySignal, ...props })\n\nexport function Dynamic({ component, ...rest }) {\n  return {\n    __tova: true,\n    tag: '__dynamic',\n    props: {},\n    children: [],\n    compute: () => {\n      const comp = typeof component === 'function' && !component.__tova ? component() : component;\n      if (!comp) return null;\n      if (typeof comp === 'function') {\n        return comp(rest);\n      }\n      return comp;\n    },\n  };\n}\n\n// ─── Portal ─────────────────────────────────────────────\n// Renders children into a different DOM target.\n// Usage: Portal({ target: \"#modal-root\", children })\n// Cleans up children from the target when the component unmounts.\n\nexport function Portal({ target, children }) {\n  return {\n    __tova: true,\n    tag: '__portal',\n    props: { target },\n    children: children || [],\n    _portalCleanup: true, // Signal to render() to register cleanup\n  };\n}\n\n// ─── Suspense ────────────────────────────────────────────\n// Renders fallback while any child lazy() component is loading.\n// Usage: Suspense({ fallback: loadingEl, children: [LazyComp(props)] })\n\nconst SuspenseContext = createContext(null);\n\nexport function Suspense({ fallback, children }) {\n  const [pending, setPending] = createSignal(0);\n  const childContent = children && children.length === 1 ? children[0] : tova_fragment(children || []);\n\n  const boundary = {\n    register() {\n      setPending(p => p + 1);\n    },\n    resolve() {\n      setPending(p => Math.max(0, p - 1));\n    },\n  };\n\n  return {\n    __tova: true,\n    tag: '__dynamic',\n    props: {},\n    children: [],\n    compute: () => {\n      provide(SuspenseContext, boundary);\n      if (pending() > 0) {\n        return typeof fallback === 'function' ? fallback() : fallback;\n      }\n      return childContent;\n    },\n  };\n}\n\n// ─── Lazy ───────────────────────────────────────────────\n// Async component loading with optional fallback.\n// Usage: const LazyComp = lazy(() => import('./HeavyComponent.js'))\n\nexport function lazy(loader) {\n  let resolved = null;\n  let loadError = null;\n  let promise = null;\n  // Signal is shared across all renders of this lazy component (not per-call)\n  const [tick, setTick] = createSignal(0);\n\n  return function LazyWrapper(props) {\n    if (resolved) {\n      return resolved(props);\n    }\n\n    // Check for Suspense boundary\n    const suspense = inject(SuspenseContext);\n\n    if (!promise) {\n      if (suspense) suspense.register();\n      promise = loader()\n        .then(mod => {\n          resolved = mod.default || mod;\n          if (suspense) suspense.resolve();\n          setTick(1);\n        })\n        .catch(e => {\n          loadError = e;\n          if (suspense) suspense.resolve();\n          setTick(1);\n        });\n    }\n\n    return {\n      __tova: true,\n      tag: '__dynamic',\n      props: {},\n      children: [],\n      compute: () => {\n        tick(); // Track for reactivity\n        if (loadError) return tova_el('span', { className: 'tova-error' }, [String(loadError)]);\n        if (resolved) return resolved(props);\n        // Fallback while loading (individual or Suspense-level)\n        return props && props.fallback ? props.fallback : null;\n      },\n    };\n  };\n}\n\n// ─── Context (Provide/Inject) ────────────────────────────\n// Tree-based: values are stored on the ownership tree, inject walks up.\n\nexport function createContext(defaultValue) {\n  const id = Symbol('context');\n  return { _id: id, _default: defaultValue };\n}\n\nexport function provide(context, value) {\n  const owner = currentOwner;\n  if (owner) {\n    if (!owner._contexts) owner._contexts = new Map();\n    owner._contexts.set(context._id, value);\n  }\n}\n\nexport function inject(context) {\n  let owner = currentOwner;\n  while (owner) {\n    if (owner._contexts && owner._contexts.has(context._id)) {\n      return owner._contexts.get(context._id);\n    }\n    owner = owner._owner;\n  }\n  return context._default;\n}\n\n// ─── Head Component ──────────────────────────────────────\n// Declarative document head management.\n// Usage: Head({ children: [tova_el('title', {}, ['My Page']), tova_el('meta', {name: 'description', content: '...'})] })\n// Components can render <Head> to set title, meta, link, and script tags in <head>.\n// When the component unmounts, its head contributions are removed.\n\nconst __tovaHeadTags = [];\n\nexport function Head({ children }) {\n  if (typeof document === 'undefined') return null;\n\n  const addedElements = [];\n  const childList = Array.isArray(children) ? children : [children];\n\n  for (const child of childList) {\n    if (!child || !child.__tova) continue;\n    const tag = child.tag;\n    const props = child.props || {};\n    const text = child.children && child.children.length > 0 ? child.children.join('') : null;\n\n    if (tag === 'title') {\n      // Special case: update document.title directly\n      const prevTitle = document.title;\n      document.title = text || '';\n      addedElements.push({ type: 'title', prev: prevTitle });\n    } else {\n      const el = document.createElement(tag);\n      for (const [key, val] of Object.entries(props)) {\n        if (key.startsWith('on') || key === 'key' || key === 'ref') continue;\n        const attrName = key === 'className' ? 'class' : key;\n        const attrVal = typeof val === 'function' ? val() : val;\n        if (attrVal !== false && attrVal != null) {\n          el.setAttribute(attrName, String(attrVal));\n        }\n      }\n      if (text) el.textContent = text;\n      document.head.appendChild(el);\n      addedElements.push({ type: 'element', el });\n    }\n  }\n\n  // Register cleanup: remove added elements when component unmounts\n  if (currentOwner) {\n    const cleanup = () => {\n      for (const item of addedElements) {\n        if (item.type === 'element') {\n          if (typeof item.el.remove === 'function') {\n            item.el.remove();\n          } else if (item.el.parentNode && typeof item.el.parentNode.removeChild === 'function') {\n            item.el.parentNode.removeChild(item.el);\n          }\n        } else if (item.type === 'title') {\n          document.title = item.prev;\n        }\n      }\n    };\n    if (!currentOwner._cleanups) currentOwner._cleanups = [];\n    currentOwner._cleanups.push(cleanup);\n  }\n\n  return null; // Head renders nothing in the component tree\n}\n\n// ─── createResource ──────────────────────────────────────\n// Async data fetching primitive integrated with signals.\n// Usage: const [data, { loading, error, refetch }] = createResource(fetcher)\n// Usage with source: const [data, { loading, error, refetch }] = createResource(sourceSignal, fetcher)\n// When source changes, fetcher is re-invoked automatically.\n\nexport function createResource(sourceOrFetcher, maybeFetcher) {\n  let source, fetcher;\n  if (typeof maybeFetcher === 'function') {\n    source = sourceOrFetcher;\n    fetcher = maybeFetcher;\n  } else {\n    source = null;\n    fetcher = sourceOrFetcher;\n  }\n\n  const [data, setData] = createSignal(undefined);\n  const [loading, setLoading] = createSignal(false);\n  const [error, setError] = createSignal(undefined);\n  let version = 0; // Guards against stale responses\n\n  function doFetch(sourceVal) {\n    const currentVersion = ++version;\n    setLoading(true);\n    setError(undefined);\n    try {\n      const result = source ? fetcher(sourceVal) : fetcher();\n      if (result && typeof result.then === 'function') {\n        result.then(\n          (val) => {\n            if (currentVersion === version) {\n              setData(() => val);\n              setLoading(false);\n            }\n          },\n          (err) => {\n            if (currentVersion === version) {\n              setError(() => err);\n              setLoading(false);\n            }\n          },\n        );\n      } else {\n        // Synchronous fetcher\n        if (currentVersion === version) {\n          setData(() => result);\n          setLoading(false);\n        }\n      }\n    } catch (err) {\n      if (currentVersion === version) {\n        setError(() => err);\n        setLoading(false);\n      }\n    }\n  }\n\n  function refetch() {\n    const sourceVal = source ? (typeof source === 'function' ? source() : source) : undefined;\n    doFetch(sourceVal);\n  }\n\n  // If source is provided, track it reactively\n  if (source) {\n    createEffect(() => {\n      const sourceVal = typeof source === 'function' ? source() : source;\n      if (sourceVal !== undefined && sourceVal !== null && sourceVal !== false) {\n        doFetch(sourceVal);\n      }\n    });\n  } else {\n    // Fetch immediately\n    doFetch();\n  }\n\n  return [data, { loading, error, refetch, mutate: setData }];\n}\n\n// ─── DOM Rendering ────────────────────────────────────────\n\n// CSP nonce — set via configureCSP({ nonce: '...' }) or auto-detected from\n// <meta name=\"csp-nonce\" content=\"...\">. Used for style tags to comply with\n// Content-Security-Policy headers.\nlet __cspNonce = null;\n\nexport function configureCSP(options) {\n  if (options && options.nonce) __cspNonce = options.nonce;\n}\n\nfunction getCSPNonce() {\n  if (__cspNonce) return __cspNonce;\n  if (typeof document !== 'undefined' && typeof document.querySelector === 'function') {\n    const meta = document.querySelector('meta[name=\"csp-nonce\"]');\n    if (meta) {\n      __cspNonce = meta.getAttribute('content');\n      return __cspNonce;\n    }\n  }\n  return null;\n}\n\n// Inject scoped CSS into the page with reference counting.\n// Style tags are created on first use and removed when no component instances reference them.\n// Supports CSP nonce for Content-Security-Policy compliance.\nconst __tovaStyleRefs = new Map(); // id → { el, count }\nexport function tova_inject_css(id, css) {\n  const ref = __tovaStyleRefs.get(id);\n  if (ref) {\n    ref.count++;\n  } else {\n    const style = document.createElement('style');\n    style.setAttribute('data-tova-style', id);\n    const nonce = getCSPNonce();\n    if (nonce) style.setAttribute('nonce', nonce);\n    style.textContent = css;\n    document.head.appendChild(style);\n    __tovaStyleRefs.set(id, { el: style, count: 1 });\n  }\n  // Register cleanup on the current owner so unmount decrements the ref count\n  if (currentOwner) {\n    let cleaned = false;\n    const cleanup = () => {\n      if (cleaned) return;\n      cleaned = true;\n      const r = __tovaStyleRefs.get(id);\n      if (r) {\n        r.count--;\n        if (r.count <= 0) {\n          if (typeof r.el.remove === 'function') {\n            r.el.remove();\n          } else if (r.el.parentNode && typeof r.el.parentNode.removeChild === 'function') {\n            r.el.parentNode.removeChild(r.el);\n          }\n          __tovaStyleRefs.delete(id);\n        }\n      }\n    };\n    if (!currentOwner._cleanups) currentOwner._cleanups = [];\n    currentOwner._cleanups.push(cleanup);\n  }\n}\n\n// Load a remote font stylesheet with reference counting.\n// When the last component using a font unmounts, the <link> is removed.\nconst __tovaFontRefs = new Map(); // id → { el, count }\nexport function __tova_load_font(id, url) {\n  const ref = __tovaFontRefs.get(id);\n  if (ref) {\n    ref.count++;\n  } else {\n    const link = document.createElement('link');\n    link.rel = 'stylesheet';\n    link.href = url;\n    link.dataset.tovaFont = id;\n    document.head.appendChild(link);\n    __tovaFontRefs.set(id, { el: link, count: 1 });\n  }\n  // Register cleanup on the current owner so unmount decrements the ref count\n  if (currentOwner) {\n    let cleaned = false;\n    const cleanup = () => {\n      if (cleaned) return;\n      cleaned = true;\n      const r = __tovaFontRefs.get(id);\n      if (r) {\n        r.count--;\n        if (r.count <= 0) {\n          if (typeof r.el.remove === 'function') {\n            r.el.remove();\n          } else if (r.el.parentNode && typeof r.el.parentNode.removeChild === 'function') {\n            r.el.parentNode.removeChild(r.el);\n          }\n          __tovaFontRefs.delete(id);\n        }\n      }\n    };\n    if (!currentOwner._cleanups) currentOwner._cleanups = [];\n    currentOwner._cleanups.push(cleanup);\n  }\n}\n\nexport function tova_el(tag, props = {}, children = []) {\n  return { __tova: true, tag, props, children };\n}\n\nexport function tova_fragment(children) {\n  return { __tova: true, tag: '__fragment', props: {}, children };\n}\n\n// ─── Transitions ──────────────────────────────────────────\n// CSS transition directives for mount/unmount animations.\n// Usage: tova_transition(vnode, \"fade\", { duration: 300 })\n\nconst TRANSITION_DEFAULTS = {\n  fade: { duration: 200, easing: 'ease' },\n  slide: { duration: 300, easing: 'ease-out', axis: 'y' },\n  scale: { duration: 200, easing: 'ease' },\n  fly: { duration: 300, easing: 'ease-out', x: 0, y: -20 },\n};\n\nfunction getTransitionCSS(name, config, phase) {\n  const opts = { ...TRANSITION_DEFAULTS[name], ...config };\n  const dur = opts.duration + 'ms';\n  const ease = opts.easing;\n\n  switch (name) {\n    case 'fade':\n      if (phase === 'enter-from' || phase === 'leave-to') {\n        return { opacity: '0', transition: `opacity ${dur} ${ease}` };\n      }\n      return { opacity: '1', transition: `opacity ${dur} ${ease}` };\n\n    case 'slide': {\n      const axis = opts.axis || 'y';\n      const prop = axis === 'x' ? 'translateX' : 'translateY';\n      const dist = (opts.distance || 20) + 'px';\n      if (phase === 'enter-from' || phase === 'leave-to') {\n        return { transform: `${prop}(${dist})`, opacity: '0', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n      }\n      return { transform: `${prop}(0)`, opacity: '1', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n    }\n\n    case 'scale':\n      if (phase === 'enter-from' || phase === 'leave-to') {\n        return { transform: 'scale(0)', opacity: '0', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n      }\n      return { transform: 'scale(1)', opacity: '1', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n\n    case 'fly': {\n      const x = (opts.x || 0) + 'px';\n      const y = (opts.y || -20) + 'px';\n      if (phase === 'enter-from' || phase === 'leave-to') {\n        return { transform: `translate(${x}, ${y})`, opacity: '0', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n      }\n      return { transform: 'translate(0, 0)', opacity: '1', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n    }\n\n    default:\n      return {};\n  }\n}\n\nexport function tova_transition(vnode, nameOrConfig, config = {}) {\n  if (!vnode || !vnode.__tova) return vnode;\n\n  // Directional transitions: tova_transition(vnode, { in: {...}, out: {...} })\n  if (typeof nameOrConfig === 'object' && nameOrConfig !== null && !nameOrConfig.__tova && (nameOrConfig.in || nameOrConfig.out)) {\n    vnode._transition = { directional: true, in: nameOrConfig.in, out: nameOrConfig.out };\n    return vnode;\n  }\n\n  // Custom transition function: tova_transition(vnode, myTransitionFn, config)\n  if (typeof nameOrConfig === 'function') {\n    vnode._transition = { custom: nameOrConfig, config };\n    return vnode;\n  }\n\n  // Built-in transition: tova_transition(vnode, \"fade\", config)\n  vnode._transition = { name: nameOrConfig, config };\n  return vnode;\n}\n\n// ─── TransitionGroup ──────────────────────────────────────\n// Animates enter, leave, and move for keyed list items.\n// Usage: TransitionGroup({ name: \"fade\", tag: \"ul\", children: items.map(i => ...) })\n// Each child MUST have a `key` prop.\n// Supports FLIP-based move animations when items reorder.\n\nexport function TransitionGroup({ name = 'fade', tag = 'div', config = {}, children, ...rest }) {\n  const transName = name;\n  const transConfig = config;\n  const childList = Array.isArray(children) ? children : (children ? [children] : []);\n\n  // Annotate each child vnode with the transition\n  const annotated = childList.map(child => {\n    if (child && child.__tova && !child._transition) {\n      child._transition = { name: transName, config: transConfig };\n    }\n    return child;\n  });\n\n  // Wrap in a container element (default <div>)\n  const wrapper = tova_el(tag, { ...rest, 'data-tova-transition-group': '' }, annotated);\n  wrapper._transitionGroup = { name: transName, config: transConfig };\n  return wrapper;\n}\n\n// ─── Actions ──────────────────────────────────────────────\n// use: directive support. Calls actionFn(el, param) after render.\n// Returns the wrapped vnode. The action lifecycle (update/destroy) is managed.\n\nexport function __tova_action(vnode, actionFn, param) {\n  if (!vnode || !vnode.__tova) return vnode;\n  if (!vnode._actions) vnode._actions = [];\n  vnode._actions.push({ fn: actionFn, param });\n  return vnode;\n}\n\n// Apply enter transition to a DOM element after render\nfunction applyEnterTransition(el, trans) {\n  if (!trans) return;\n\n  // Custom transition function\n  if (trans.custom) {\n    const result = trans.custom(el, trans.config || {}, 'enter');\n    if (result && typeof result === 'object' && !result.then) {\n      Object.assign(el.style, result);\n    }\n    return;\n  }\n\n  // Directional: use 'in' config for enter\n  const name = trans.directional ? (trans.in ? trans.in.name : null) : trans.name;\n  const config = trans.directional ? (trans.in ? trans.in.config : {}) : trans.config;\n  if (!name) return;\n\n  const fromStyles = getTransitionCSS(name, config, 'enter-from');\n  const toStyles = getTransitionCSS(name, config, 'enter-to');\n\n  // Set initial state\n  Object.assign(el.style, fromStyles);\n\n  // Force reflow, then apply target state\n  void el.offsetHeight;\n  Object.assign(el.style, toStyles);\n}\n\n// Apply leave transition and return a Promise that resolves when done\nfunction applyLeaveTransition(el, trans) {\n  if (!trans) return Promise.resolve();\n\n  // Custom transition function\n  if (trans.custom) {\n    const result = trans.custom(el, trans.config || {}, 'leave');\n    if (result && typeof result.then === 'function') {\n      // Race with timeout to prevent leaked promises from custom transitions\n      const dur = (trans.config && trans.config.duration) || 5000;\n      return Promise.race([result, new Promise(r => setTimeout(r, dur + 100))]);\n    }\n    if (result && typeof result === 'object') {\n      Object.assign(el.style, result);\n    }\n    const dur = (trans.config && trans.config.duration) || 200;\n    return new Promise(resolve => setTimeout(resolve, dur));\n  }\n\n  // Directional: use 'out' config for leave\n  const name = trans.directional ? (trans.out ? trans.out.name : null) : trans.name;\n  const config = trans.directional ? (trans.out ? trans.out.config : {}) : trans.config;\n  if (!name) return Promise.resolve();\n\n  const duration = (config && config.duration) || TRANSITION_DEFAULTS[name]?.duration || 200;\n  const toStyles = getTransitionCSS(name, config, 'leave-to');\n  Object.assign(el.style, toStyles);\n\n  return new Promise(resolve => {\n    const handler = () => {\n      el.removeEventListener('transitionend', handler);\n      resolve();\n    };\n    el.addEventListener('transitionend', handler);\n    // Fallback timeout in case transitionend doesn't fire\n    setTimeout(resolve, duration + 50);\n  });\n}\n\n// Inject a key prop into a vnode for keyed reconciliation\nexport function tova_keyed(key, vnode) {\n  if (vnode && vnode.__tova) {\n    vnode.props = { ...vnode.props, key };\n  }\n  return vnode;\n}\n\n// Flatten nested arrays and vnodes into a flat list of vnodes\nfunction flattenVNodes(children) {\n  const result = [];\n  for (const child of children) {\n    if (child === null || child === undefined) {\n      continue;\n    } else if (Array.isArray(child)) {\n      result.push(...flattenVNodes(child));\n    } else {\n      result.push(child);\n    }\n  }\n  return result;\n}\n\n// ─── Marker-based DOM helpers ─────────────────────────────\n// Instead of wrapping dynamic blocks/fragments in <span style=\"display:contents\">,\n// we use comment node markers. A marker's __tovaNodes tracks its content nodes.\n// Content nodes have __tovaOwner pointing to their owning marker.\n\n// Recursively dispose ownership roots attached to a DOM subtree\nfunction disposeNode(node) {\n  if (!node) return;\n  if (node.__tovaRoot) {\n    node.__tovaRoot();\n    node.__tovaRoot = null;\n  }\n  // If this is a marker, dispose and remove its content nodes\n  if (node.__tovaNodes) {\n    for (const cn of node.__tovaNodes) {\n      disposeNode(cn);\n      if (cn.parentNode) cn.parentNode.removeChild(cn);\n    }\n    node.__tovaNodes = [];\n  }\n  if (node.childNodes) {\n    for (const child of Array.from(node.childNodes)) {\n      disposeNode(child);\n    }\n  }\n}\n\n// Check if a node is transitively owned by a marker (walks __tovaOwner chain)\nfunction isOwnedBy(node, marker) {\n  let owner = node.__tovaOwner;\n  while (owner) {\n    if (owner === marker) return true;\n    owner = owner.__tovaOwner;\n  }\n  return false;\n}\n\n// Get logical children of a parent element (skips marker content nodes)\nfunction getLogicalChildren(parent) {\n  const logical = [];\n  for (let i = 0; i < parent.childNodes.length; i++) {\n    const node = parent.childNodes[i];\n    if (!node.__tovaOwner) {\n      logical.push(node);\n    }\n  }\n  return logical;\n}\n\n// Find the first DOM sibling after all of a marker's content\nfunction nextSiblingAfterMarker(marker) {\n  if (!marker.__tovaNodes || marker.__tovaNodes.length === 0) {\n    return marker.nextSibling;\n  }\n  let last = marker.__tovaNodes[marker.__tovaNodes.length - 1];\n  // If last content is itself a marker, recurse to find physical end\n  while (last && last.__tovaNodes && last.__tovaNodes.length > 0) {\n    last = last.__tovaNodes[last.__tovaNodes.length - 1];\n  }\n  return last ? last.nextSibling : marker.nextSibling;\n}\n\n// Remove a logical node (marker + its content, or a regular node) from the DOM\nfunction removeLogicalNode(parent, node) {\n  disposeNode(node);\n  if (node.parentNode === parent) parent.removeChild(node);\n}\n\n// Insert rendered result (could be single node or DocumentFragment) before ref,\n// setting __tovaOwner on top-level inserted nodes. Returns array of inserted nodes.\nfunction insertRendered(parent, rendered, ref, owner) {\n  if (rendered.nodeType === 11) {\n    const nodes = Array.from(rendered.childNodes);\n    for (const n of nodes) {\n      if (!n.__tovaOwner) n.__tovaOwner = owner;\n    }\n    parent.insertBefore(rendered, ref);\n    return nodes;\n  }\n  if (!rendered.__tovaOwner) rendered.__tovaOwner = owner;\n  parent.insertBefore(rendered, ref);\n  return [rendered];\n}\n\n// Clear a marker's content from the DOM and reset __tovaNodes\nfunction clearMarkerContent(marker) {\n  for (const node of marker.__tovaNodes) {\n    // If element has a leave transition, animate out before removing\n    if (node.__tovaTransition && node.nodeType === 1) {\n      const el = node;\n      applyLeaveTransition(el, el.__tovaTransition).then(() => {\n        disposeNode(el);\n        if (el.parentNode) el.parentNode.removeChild(el);\n      }).catch(() => {\n        disposeNode(el);\n        if (el.parentNode) el.parentNode.removeChild(el);\n      });\n    } else {\n      disposeNode(node);\n      if (node.parentNode) node.parentNode.removeChild(node);\n    }\n  }\n  marker.__tovaNodes = [];\n}\n\n// ─── Render ───────────────────────────────────────────────\n\n// Create real DOM nodes from a vnode (with fine-grained reactive bindings).\n// Returns a single DOM node for elements/text, or a DocumentFragment for\n// markers (dynamic blocks, fragments) containing [marker, ...content].\nexport function render(vnode) {\n  if (vnode === null || vnode === undefined) {\n    return document.createTextNode('');\n  }\n\n  // Reactive dynamic block (JSXIf, JSXFor, reactive text, etc.)\n  if (typeof vnode === 'function') {\n    const marker = document.createComment('');\n    marker.__tovaDynamic = true;\n    marker.__tovaNodes = [];\n\n    const frag = document.createDocumentFragment();\n    frag.appendChild(marker);\n\n    createEffect(() => {\n      const val = vnode();\n      const parent = marker.parentNode;\n      const ref = nextSiblingAfterMarker(marker);\n\n      // Array: keyed or positional reconciliation within marker range\n      if (Array.isArray(val)) {\n        const flat = flattenVNodes(val);\n        const hasKeys = flat.some(c => getKey(c) != null);\n        if (hasKeys) {\n          patchKeyedInMarker(marker, flat);\n        } else {\n          patchPositionalInMarker(marker, flat);\n        }\n        return;\n      }\n\n      // Text: optimize single text node update in place\n      if (val == null || typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean') {\n        const text = val == null ? '' : String(val);\n        if (marker.__tovaNodes.length === 1 && marker.__tovaNodes[0].nodeType === 3) {\n          if (marker.__tovaNodes[0].textContent !== text) {\n            marker.__tovaNodes[0].textContent = text;\n          }\n          return;\n        }\n        clearMarkerContent(marker);\n        const textNode = document.createTextNode(text);\n        textNode.__tovaOwner = marker;\n        parent.insertBefore(textNode, ref);\n        marker.__tovaNodes = [textNode];\n        return;\n      }\n\n      // Vnode or other: clear and re-render\n      clearMarkerContent(marker);\n      if (val && val.__tova) {\n        const rendered = render(val);\n        marker.__tovaNodes = insertRendered(parent, rendered, ref, marker);\n      } else {\n        const textNode = document.createTextNode(String(val));\n        textNode.__tovaOwner = marker;\n        parent.insertBefore(textNode, ref);\n        marker.__tovaNodes = [textNode];\n      }\n    });\n\n    return frag;\n  }\n\n  if (typeof vnode === 'string' || typeof vnode === 'number' || typeof vnode === 'boolean') {\n    return document.createTextNode(String(vnode));\n  }\n\n  if (Array.isArray(vnode)) {\n    const fragment = document.createDocumentFragment();\n    for (const child of vnode) {\n      fragment.appendChild(render(child));\n    }\n    return fragment;\n  }\n\n  if (!vnode.__tova) {\n    return document.createTextNode(String(vnode));\n  }\n\n  // Fragment — marker + children (no wrapper element)\n  if (vnode.tag === '__fragment') {\n    const marker = document.createComment('');\n    marker.__tovaFragment = true;\n    marker.__tovaNodes = [];\n    marker.__vnode = vnode;\n\n    const frag = document.createDocumentFragment();\n    frag.appendChild(marker);\n\n    for (const child of flattenVNodes(vnode.children)) {\n      const rendered = render(child);\n      const inserted = insertRendered(frag, rendered, null, marker);\n      marker.__tovaNodes.push(...inserted);\n    }\n\n    return frag;\n  }\n\n  // Dynamic reactive node (ErrorBoundary, Dynamic component, etc.)\n  if (vnode.tag === '__dynamic' && typeof vnode.compute === 'function') {\n    const marker = document.createComment('');\n    marker.__tovaDynamic = true;\n    marker.__tovaNodes = [];\n\n    const frag = document.createDocumentFragment();\n    frag.appendChild(marker);\n\n    let prevDispose = null;\n    const errHandler = vnode._errorHandler || null;\n    createEffect(() => {\n      if (errHandler) pushErrorHandler(errHandler);\n      try {\n        const inner = vnode.compute();\n        const parent = marker.parentNode;\n        const ref = nextSiblingAfterMarker(marker);\n\n        if (prevDispose) {\n          prevDispose();\n          prevDispose = null;\n        }\n        clearMarkerContent(marker);\n\n        createRoot((dispose) => {\n          prevDispose = dispose;\n          const rendered = render(inner);\n          marker.__tovaNodes = insertRendered(parent, rendered, ref, marker);\n        });\n      } catch (e) {\n        if (errHandler) {\n          errHandler(e);\n        } else if (currentErrorHandler) {\n          currentErrorHandler(e);\n        } else {\n          console.error('Uncaught error during render:', e);\n        }\n      } finally {\n        if (errHandler) popErrorHandler();\n      }\n    });\n\n    return frag;\n  }\n\n  // Portal — render children into a different DOM target\n  if (vnode.tag === '__portal') {\n    const placeholder = document.createComment('portal');\n    const targetSelector = vnode.props.target;\n    const portalNodes = [];\n    queueMicrotask(() => {\n      const targetEl = typeof targetSelector === 'string'\n        ? document.querySelector(targetSelector)\n        : targetSelector;\n      if (targetEl) {\n        for (const child of flattenVNodes(vnode.children)) {\n          const rendered = render(child);\n          targetEl.appendChild(rendered);\n          portalNodes.push(rendered);\n        }\n      }\n    });\n    // Register cleanup: remove portal children when component unmounts\n    if (currentOwner && !currentOwner._disposed) {\n      if (!currentOwner._cleanups) currentOwner._cleanups = [];\n      currentOwner._cleanups.push(() => {\n        for (const node of portalNodes) {\n          disposeNode(node);\n          if (node.parentNode) node.parentNode.removeChild(node);\n        }\n        portalNodes.length = 0;\n      });\n    }\n    return placeholder;\n  }\n\n  // Element\n  const el = document.createElement(vnode.tag);\n  applyReactiveProps(el, vnode.props);\n\n  // Set data-tova-component attribute for DevTools\n  if (vnode._componentName) {\n    el.setAttribute('data-tova-component', vnode._componentName);\n    if (__devtools_hooks && __devtools_hooks.onComponentRender) {\n      __devtools_hooks.onComponentRender(vnode._componentName, el, 0);\n    }\n  }\n\n  // Render children\n  for (const child of flattenVNodes(vnode.children)) {\n    el.appendChild(render(child));\n  }\n\n  // Store vnode reference for patching\n  el.__vnode = vnode;\n\n  // Apply enter transition if present\n  if (vnode._transition) {\n    el.__tovaTransition = vnode._transition;\n    applyEnterTransition(el, vnode._transition);\n  }\n\n  // Apply use: actions if present\n  if (vnode._actions && vnode._actions.length > 0) {\n    for (const action of vnode._actions) {\n      const paramValue = typeof action.param === 'function' ? action.param() : action.param;\n      const result = action.fn(el, paramValue);\n      if (result) {\n        // If param is reactive, set up effect for updates\n        if (typeof action.param === 'function') {\n          createEffect(() => {\n            const newVal = action.param();\n            if (result.update) result.update(newVal);\n          });\n        }\n        // Register destroy on cleanup\n        if (result.destroy) {\n          if (currentOwner && !currentOwner._disposed) {\n            currentOwner._cleanups.push(result.destroy);\n          }\n        }\n      }\n    }\n  }\n\n  return el;\n}\n\n// Apply reactive props — function-valued props get their own effect\nfunction applyReactiveProps(el, props) {\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'ref') {\n      if (typeof value === 'object' && value !== null && 'current' in value) {\n        value.current = el;\n      } else if (typeof value === 'function') {\n        value(el);\n      }\n    } else if (key.startsWith('on')) {\n      const eventName = key.slice(2).toLowerCase();\n      if (typeof value === 'object' && value !== null && value.handler) {\n        el.addEventListener(eventName, value.handler, value.options);\n        if (!el.__handlers) el.__handlers = {};\n        el.__handlers[eventName] = value.handler;\n        el.__handlerOptions = el.__handlerOptions || {};\n        el.__handlerOptions[eventName] = value.options;\n      } else {\n        el.addEventListener(eventName, value);\n        if (!el.__handlers) el.__handlers = {};\n        el.__handlers[eventName] = value;\n      }\n    } else if (key === 'key') {\n      // Skip\n    } else if (typeof value === 'function' && !key.startsWith('on')) {\n      // Reactive prop — create effect for fine-grained updates\n      createEffect(() => {\n        const val = value();\n        applyPropValue(el, key, val);\n      });\n    } else {\n      applyPropValue(el, key, value);\n    }\n  }\n}\n\nfunction applyPropValue(el, key, val) {\n  if (key === 'className') {\n    if (el.className !== val) el.className = val || '';\n  } else if (key === 'dangerouslySetInnerHTML') {\n    // Explicit unsafe HTML injection — requires {__html: \"...\"} format\n    const html = typeof val === 'object' && val !== null ? val.__html || '' : '';\n    if (__DEV__ && html) {\n      console.warn('Tova: dangerouslySetInnerHTML bypasses XSS protection. Ensure content is sanitized.');\n    }\n    if (el.innerHTML !== html) el.innerHTML = html;\n  } else if (key === 'innerHTML') {\n    // Blocked: use dangerouslySetInnerHTML instead\n    if (__DEV__) {\n      console.error('Tova: innerHTML is not allowed. Use dangerouslySetInnerHTML={{__html: value}} to acknowledge XSS risk.');\n    }\n  } else if (key === 'value') {\n    if (el !== document.activeElement && el.value !== val) {\n      el.value = val;\n    }\n  } else if (key === 'checked') {\n    el.checked = !!val;\n  } else if (key === 'disabled' || key === 'readOnly' || key === 'hidden') {\n    el[key] = !!val;\n  } else if (key === 'style' && typeof val === 'object') {\n    // Delta update: only remove properties that were in previous style but not in new\n    if (el.__prevStyle) {\n      for (const prop of Object.keys(el.__prevStyle)) {\n        if (!(prop in val)) el.style.removeProperty(prop);\n      }\n    }\n    el.__prevStyle = { ...val };\n    Object.assign(el.style, val);\n  } else {\n    const s = val == null ? '' : String(val);\n    if (el.getAttribute(key) !== s) {\n      el.setAttribute(key, s);\n    }\n  }\n}\n\n// Apply/update props on a DOM element (used by patcher for full-tree mode)\nfunction applyProps(el, newProps, oldProps) {\n  // Remove old props that are no longer present\n  for (const key of Object.keys(oldProps)) {\n    if (!(key in newProps)) {\n      if (key.startsWith('on')) {\n        const eventName = key.slice(2).toLowerCase();\n        if (el.__handlers && el.__handlers[eventName]) {\n          el.removeEventListener(eventName, el.__handlers[eventName]);\n          delete el.__handlers[eventName];\n        }\n      } else if (key === 'className') {\n        el.className = '';\n      } else if (key === 'style') {\n        el.removeAttribute('style');\n      } else {\n        el.removeAttribute(key);\n      }\n    }\n  }\n\n  // Apply new props\n  for (const [key, value] of Object.entries(newProps)) {\n    if (key === 'className') {\n      const val = typeof value === 'function' ? value() : value;\n      if (el.className !== val) el.className = val;\n    } else if (key === 'ref') {\n      if (typeof value === 'object' && value !== null && 'current' in value) {\n        value.current = el;\n      } else if (typeof value === 'function') {\n        value(el);\n      }\n    } else if (key.startsWith('on')) {\n      const eventName = key.slice(2).toLowerCase();\n      if (typeof value === 'object' && value !== null && value.handler) {\n        const oldHandler = el.__handlers && el.__handlers[eventName];\n        if (oldHandler !== value.handler) {\n          const oldOpts = el.__handlerOptions && el.__handlerOptions[eventName];\n          if (oldHandler) el.removeEventListener(eventName, oldHandler, oldOpts);\n          el.addEventListener(eventName, value.handler, value.options);\n          if (!el.__handlers) el.__handlers = {};\n          el.__handlers[eventName] = value.handler;\n          el.__handlerOptions = el.__handlerOptions || {};\n          el.__handlerOptions[eventName] = value.options;\n        }\n      } else {\n        const oldHandler = el.__handlers && el.__handlers[eventName];\n        if (oldHandler !== value) {\n          if (oldHandler) el.removeEventListener(eventName, oldHandler);\n          el.addEventListener(eventName, value);\n          if (!el.__handlers) el.__handlers = {};\n          el.__handlers[eventName] = value;\n        }\n      }\n    } else if (key === 'style' && typeof value === 'object') {\n      Object.assign(el.style, value);\n    } else if (key === 'key') {\n      // Skip\n    } else if (key === 'value') {\n      const val = typeof value === 'function' ? value() : value;\n      if (el !== document.activeElement && el.value !== val) {\n        el.value = val;\n      }\n    } else if (key === 'checked') {\n      el.checked = !!value;\n    } else {\n      const val = typeof value === 'function' ? value() : value;\n      if (el.getAttribute(key) !== String(val)) {\n        el.setAttribute(key, val);\n      }\n    }\n  }\n}\n\n// ─── Longest Increasing Subsequence (O(n log n)) ────────\n// Used by keyed reconciliation to minimize DOM moves.\n\nfunction longestIncreasingSubsequence(arr) {\n  const n = arr.length;\n  if (n === 0) return [];\n\n  // tails[i] = index in arr of smallest tail element for IS of length i+1\n  const tails = [];\n  // parent[i] = index in arr of predecessor of arr[i] in the LIS\n  const parent = new Array(n).fill(-1);\n  // indices[i] = index in arr of tails[i]\n  const indices = [];\n\n  for (let i = 0; i < n; i++) {\n    const val = arr[i];\n    if (val < 0) continue; // skip removed items (marker -1)\n\n    // Binary search for the insertion point\n    let lo = 0, hi = tails.length;\n    while (lo < hi) {\n      const mid = (lo + hi) >> 1;\n      if (tails[mid] < val) lo = mid + 1;\n      else hi = mid;\n    }\n\n    tails[lo] = val;\n    indices[lo] = i;\n\n    if (lo > 0) {\n      parent[i] = indices[lo - 1];\n    }\n  }\n\n  // Reconstruct\n  const result = new Array(tails.length);\n  let k = indices[tails.length - 1];\n  for (let i = tails.length - 1; i >= 0; i--) {\n    result[i] = k;\n    k = parent[k];\n  }\n\n  return result;\n}\n\n// ─── Keyed Reconciliation ────────────────────────────────\n\nfunction getKey(vnode) {\n  if (vnode && vnode.__tova && vnode.props) return vnode.props.key;\n  return undefined;\n}\n\nfunction getNodeKey(node) {\n  if (node && node.__vnode && node.__vnode.props) return node.__vnode.props.key;\n  return undefined;\n}\n\n// Keyed reconciliation within a marker's content range\nfunction patchKeyedInMarker(marker, newVNodes) {\n  const parent = marker.parentNode;\n  const oldNodes = [...marker.__tovaNodes];\n  const oldKeyMap = new Map();\n\n  for (const node of oldNodes) {\n    const key = getNodeKey(node);\n    if (key != null) oldKeyMap.set(key, node);\n  }\n\n  const newNodes = [];\n  const usedOld = new Set();\n\n  for (const newChild of newVNodes) {\n    const key = getKey(newChild);\n\n    if (key != null && oldKeyMap.has(key)) {\n      const oldNode = oldKeyMap.get(key);\n      usedOld.add(oldNode);\n\n      if (oldNode.nodeType === 1 && newChild.__tova &&\n          oldNode.tagName.toLowerCase() === newChild.tag.toLowerCase()) {\n        const oldVNode = oldNode.__vnode || { props: {}, children: [] };\n        applyProps(oldNode, newChild.props, oldVNode.props);\n        patchChildrenOfElement(oldNode, flattenVNodes(newChild.children));\n        oldNode.__vnode = newChild;\n        newNodes.push(oldNode);\n      } else {\n        const node = render(newChild);\n        // render may return Fragment — collect nodes\n        if (node.nodeType === 11) {\n          const nodes = Array.from(node.childNodes);\n          for (const n of nodes) { if (!n.__tovaOwner) n.__tovaOwner = marker; }\n          parent.insertBefore(node, nextSiblingAfterMarker(marker));\n          newNodes.push(...nodes);\n        } else {\n          if (!node.__tovaOwner) node.__tovaOwner = marker;\n          newNodes.push(node);\n        }\n      }\n    } else {\n      const node = render(newChild);\n      if (node.nodeType === 11) {\n        const nodes = Array.from(node.childNodes);\n        for (const n of nodes) { if (!n.__tovaOwner) n.__tovaOwner = marker; }\n        parent.insertBefore(node, nextSiblingAfterMarker(marker));\n        newNodes.push(...nodes);\n      } else {\n        if (!node.__tovaOwner) node.__tovaOwner = marker;\n        newNodes.push(node);\n      }\n    }\n  }\n\n  // Remove unused old nodes\n  for (const node of oldNodes) {\n    if (!usedOld.has(node)) {\n      disposeNode(node);\n      if (node.parentNode === parent) parent.removeChild(node);\n    }\n  }\n\n  // LIS-based reorder: compute old positions, find LIS, only move non-LIS nodes\n  const oldPosMap = new Map();\n  for (let i = 0; i < oldNodes.length; i++) {\n    oldPosMap.set(oldNodes[i], i);\n  }\n  const positions = newNodes.map(n => oldPosMap.has(n) ? oldPosMap.get(n) : -1);\n  const lisIndices = new Set(longestIncreasingSubsequence(positions));\n\n  // Insert nodes: only move nodes not in the LIS\n  let cursor = marker.nextSibling;\n  for (let i = 0; i < newNodes.length; i++) {\n    const node = newNodes[i];\n    if (lisIndices.has(i) && node === cursor) {\n      cursor = node.nextSibling;\n    } else {\n      parent.insertBefore(node, cursor);\n    }\n  }\n\n  marker.__tovaNodes = newNodes;\n}\n\n// Positional reconciliation within a marker's content range\nfunction patchPositionalInMarker(marker, newChildren) {\n  const parent = marker.parentNode;\n  const oldNodes = [...marker.__tovaNodes];\n  const oldCount = oldNodes.length;\n  const newCount = newChildren.length;\n\n  // Patch in place (skip identical vnodes)\n  const patchCount = Math.min(oldCount, newCount);\n  for (let i = 0; i < patchCount; i++) {\n    if (oldNodes[i] === newChildren[i]) continue;\n    patchSingle(parent, oldNodes[i], newChildren[i]);\n  }\n\n  // Append new children\n  const ref = nextSiblingAfterMarker(marker);\n  for (let i = oldCount; i < newCount; i++) {\n    const rendered = render(newChildren[i]);\n    const inserted = insertRendered(parent, rendered, ref, marker);\n    oldNodes.push(...inserted);\n  }\n\n  // Remove excess children\n  for (let i = newCount; i < oldCount; i++) {\n    disposeNode(oldNodes[i]);\n    if (oldNodes[i].parentNode === parent) parent.removeChild(oldNodes[i]);\n  }\n\n  marker.__tovaNodes = oldNodes.slice(0, newCount);\n}\n\n// Keyed reconciliation for children of an element (not marker-based)\nfunction patchKeyedChildren(parent, newVNodes) {\n  const logical = getLogicalChildren(parent);\n  const oldKeyMap = new Map();\n\n  for (const node of logical) {\n    const key = getNodeKey(node);\n    if (key != null) oldKeyMap.set(key, node);\n  }\n\n  const newNodes = [];\n  const usedOld = new Set();\n\n  for (const newChild of newVNodes) {\n    const key = getKey(newChild);\n\n    if (key != null && oldKeyMap.has(key)) {\n      const oldNode = oldKeyMap.get(key);\n      usedOld.add(oldNode);\n\n      if (oldNode.nodeType === 1 && newChild.__tova &&\n          oldNode.tagName.toLowerCase() === newChild.tag.toLowerCase()) {\n        const oldVNode = oldNode.__vnode || { props: {}, children: [] };\n        applyProps(oldNode, newChild.props, oldVNode.props);\n        patchChildrenOfElement(oldNode, flattenVNodes(newChild.children));\n        oldNode.__vnode = newChild;\n        newNodes.push(oldNode);\n      } else {\n        newNodes.push(render(newChild));\n      }\n    } else {\n      newNodes.push(render(newChild));\n    }\n  }\n\n  // Remove unused old logical nodes\n  for (const node of logical) {\n    if (!usedOld.has(node) && node.parentNode === parent) {\n      removeLogicalNode(parent, node);\n    }\n  }\n\n  // LIS-based reorder for element children\n  const logicalAfterRemove = getLogicalChildren(parent);\n  const oldPosMap = new Map();\n  for (let i = 0; i < logicalAfterRemove.length; i++) {\n    oldPosMap.set(logicalAfterRemove[i], i);\n  }\n  const positions = newNodes.map(n => oldPosMap.has(n) ? oldPosMap.get(n) : -1);\n  const lisIndices = new Set(longestIncreasingSubsequence(positions));\n\n  for (let i = 0; i < newNodes.length; i++) {\n    const expected = newNodes[i];\n    if (!lisIndices.has(i)) {\n      const logicalNow = getLogicalChildren(parent);\n      const current = logicalNow[i];\n      if (current !== expected) {\n        parent.insertBefore(expected, current || null);\n      }\n    }\n  }\n}\n\n// Positional reconciliation for children of an element\nfunction patchPositionalChildren(parent, newChildren) {\n  const logical = getLogicalChildren(parent);\n  const oldCount = logical.length;\n  const newCount = newChildren.length;\n\n  for (let i = 0; i < Math.min(oldCount, newCount); i++) {\n    patchSingle(parent, logical[i], newChildren[i]);\n  }\n\n  for (let i = oldCount; i < newCount; i++) {\n    parent.appendChild(render(newChildren[i]));\n  }\n\n  // Remove excess logical children\n  const currentLogical = getLogicalChildren(parent);\n  while (currentLogical.length > newCount) {\n    const node = currentLogical.pop();\n    removeLogicalNode(parent, node);\n  }\n}\n\n// Patch children of a regular element\nfunction patchChildrenOfElement(el, newChildren) {\n  const hasKeys = newChildren.some(c => getKey(c) != null);\n  if (hasKeys) {\n    patchKeyedChildren(el, newChildren);\n  } else {\n    patchPositionalChildren(el, newChildren);\n  }\n}\n\n// Patch a single logical node in place\nfunction patchSingle(parent, existing, newVNode) {\n  if (!existing) {\n    parent.appendChild(render(newVNode));\n    return;\n  }\n\n  if (newVNode === null || newVNode === undefined) {\n    removeLogicalNode(parent, existing);\n    return;\n  }\n\n  // Function vnode — replace with new dynamic block\n  if (typeof newVNode === 'function') {\n    const rendered = render(newVNode);\n    if (existing.__tovaNodes) {\n      // Existing is a marker — clear its content and replace\n      clearMarkerContent(existing);\n      parent.replaceChild(rendered, existing);\n    } else {\n      disposeNode(existing);\n      parent.replaceChild(rendered, existing);\n    }\n    return;\n  }\n\n  // Text\n  if (typeof newVNode === 'string' || typeof newVNode === 'number' || typeof newVNode === 'boolean') {\n    const text = String(newVNode);\n    if (existing.nodeType === 3) {\n      if (existing.textContent !== text) existing.textContent = text;\n    } else {\n      removeLogicalNode(parent, existing);\n      parent.insertBefore(document.createTextNode(text), null);\n    }\n    return;\n  }\n\n  if (!newVNode.__tova) {\n    const text = String(newVNode);\n    if (existing.nodeType === 3) {\n      if (existing.textContent !== text) existing.textContent = text;\n    } else {\n      removeLogicalNode(parent, existing);\n      parent.insertBefore(document.createTextNode(text), null);\n    }\n    return;\n  }\n\n  // Fragment — patch marker content\n  if (newVNode.tag === '__fragment') {\n    if (existing.__tovaFragment) {\n      // Patch children within the marker range\n      const oldNodes = [...existing.__tovaNodes];\n      const newChildren = flattenVNodes(newVNode.children);\n      // Simple approach: clear and re-render fragment content\n      clearMarkerContent(existing);\n      const ref = nextSiblingAfterMarker(existing);\n      for (const child of newChildren) {\n        const rendered = render(child);\n        const inserted = insertRendered(parent, rendered, ref, existing);\n        existing.__tovaNodes.push(...inserted);\n      }\n      existing.__vnode = newVNode;\n      return;\n    }\n    removeLogicalNode(parent, existing);\n    parent.appendChild(render(newVNode));\n    return;\n  }\n\n  // Element — patch in place\n  if (existing.nodeType === 1 && newVNode.tag &&\n      existing.tagName.toLowerCase() === newVNode.tag.toLowerCase()) {\n    const oldVNode = existing.__vnode || { props: {}, children: [] };\n    applyProps(existing, newVNode.props, oldVNode.props);\n    patchChildrenOfElement(existing, flattenVNodes(newVNode.children));\n    existing.__vnode = newVNode;\n    return;\n  }\n\n  // Different type — full replace\n  removeLogicalNode(parent, existing);\n  parent.appendChild(render(newVNode));\n}\n\n// ─── Hydration (SSR) ─────────────────────────────────────\n// SSR renders flat HTML without markers. Hydration attaches reactivity\n// to existing DOM nodes and inserts markers for dynamic blocks.\n\n// Dev-mode hydration mismatch detection\nfunction checkHydrationMismatch(domNode, vnode) {\n  if (!__DEV__) return;\n  if (!domNode || !vnode || !vnode.__tova) return;\n\n  const props = vnode.props || {};\n\n  // Check className\n  if (props.className !== undefined) {\n    const expected = typeof props.className === 'function' ? props.className() : props.className;\n    const actual = domNode.className || '';\n    if (expected && actual !== expected) {\n      console.warn(`Tova hydration mismatch: <${vnode.tag}> class expected \"${expected}\" but got \"${actual}\"`);\n    }\n  }\n\n  // Check attributes\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'key' || key === 'ref' || key === 'className' || key.startsWith('on')) continue;\n    if (typeof value === 'function') continue; // reactive props — skip static check\n\n    if (domNode.getAttribute) {\n      const attrName = key === 'className' ? 'class' : key;\n      const actual = domNode.getAttribute(attrName);\n      const expected = String(value);\n      if (actual !== null && actual !== expected) {\n        console.warn(`Tova hydration mismatch: <${vnode.tag}> attribute \"${key}\" expected \"${expected}\" but got \"${actual}\"`);\n      }\n    }\n  }\n}\n\n// Check if a DOM node is an SSR marker comment (<!--tova-s:ID-->)\nfunction isSSRMarker(node) {\n  return node && node.nodeType === 8 && typeof node.data === 'string' && node.data.startsWith('tova-s:');\n}\n\n// Find the closing SSR marker and collect content nodes between them\nfunction collectSSRMarkerContent(startMarker) {\n  const id = startMarker.data.replace('tova-s:', '');\n  const closingText = `/tova-s:${id}`;\n  const content = [];\n  let cursor = startMarker.nextSibling;\n  while (cursor) {\n    if (cursor.nodeType === 8 && cursor.data === closingText) {\n      return { content, endMarker: cursor };\n    }\n    content.push(cursor);\n    cursor = cursor.nextSibling;\n  }\n  return { content, endMarker: null };\n}\n\nfunction hydrateVNode(domNode, vnode) {\n  if (!domNode) return null;\n  if (vnode === null || vnode === undefined) return domNode;\n\n  // Function vnode (reactive text, JSXIf, JSXFor)\n  if (typeof vnode === 'function') {\n    if (domNode.nodeType === 3) {\n      // Dev-mode: warn if text content differs\n      if (__DEV__) {\n        const val = vnode();\n        const expected = val == null ? '' : String(val);\n        if (domNode.textContent !== expected) {\n          console.warn(`Tova hydration mismatch: text expected \"${expected}\" but got \"${domNode.textContent}\"`);\n        }\n      }\n      // Reactive text: attach effect to existing text node\n      domNode.__tovaReactive = true;\n      createEffect(() => {\n        const val = vnode();\n        const text = val == null ? '' : String(val);\n        if (domNode.textContent !== text) domNode.textContent = text;\n      });\n      return domNode.nextSibling;\n    }\n    // Complex dynamic block: insert marker-based render, replace SSR node\n    const parent = domNode.parentNode;\n    const next = domNode.nextSibling;\n    const rendered = render(vnode);\n    parent.replaceChild(rendered, domNode);\n    return next;\n  }\n\n  // Primitive text — already correct from SSR\n  if (typeof vnode === 'string' || typeof vnode === 'number' || typeof vnode === 'boolean') {\n    if (__DEV__ && domNode.nodeType === 3) {\n      const expected = String(vnode);\n      if (domNode.textContent !== expected) {\n        console.warn(`Tova hydration mismatch: text expected \"${expected}\" but got \"${domNode.textContent}\"`);\n      }\n    }\n    return domNode.nextSibling;\n  }\n\n  // Array\n  if (Array.isArray(vnode)) {\n    let cursor = domNode;\n    for (const child of flattenVNodes(vnode)) {\n      if (!cursor) break;\n      cursor = hydrateVNode(cursor, child);\n    }\n    return cursor;\n  }\n\n  if (!vnode.__tova) return domNode.nextSibling;\n\n  // Fragment — children rendered inline in SSR (no wrapper)\n  if (vnode.tag === '__fragment') {\n    const children = flattenVNodes(vnode.children);\n    let cursor = domNode;\n    for (const child of children) {\n      if (!cursor) break;\n      cursor = hydrateVNode(cursor, child);\n    }\n    return cursor;\n  }\n\n  // Dynamic node — SSR marker-aware hydration\n  if (vnode.tag === '__dynamic' && typeof vnode.compute === 'function') {\n    // Check if current domNode is an SSR marker (<!--tova-s:ID-->)\n    if (isSSRMarker(domNode)) {\n      const { content, endMarker } = collectSSRMarkerContent(domNode);\n      const parent = domNode.parentNode;\n\n      // Remove SSR markers and content, replace with reactive marker\n      const afterEnd = endMarker ? endMarker.nextSibling : null;\n      for (const node of content) {\n        if (node.parentNode === parent) parent.removeChild(node);\n      }\n      if (endMarker && endMarker.parentNode === parent) parent.removeChild(endMarker);\n\n      const rendered = render(vnode);\n      parent.replaceChild(rendered, domNode);\n      return afterEnd;\n    }\n\n    // No SSR marker — fall back to standard behavior\n    const parent = domNode.parentNode;\n    const next = domNode.nextSibling;\n    const rendered = render(vnode);\n    parent.replaceChild(rendered, domNode);\n    return next;\n  }\n\n  // Element — attach event handlers, reactive props, refs\n  if (domNode.nodeType === 1 && domNode.tagName.toLowerCase() === vnode.tag.toLowerCase()) {\n    if (__DEV__) checkHydrationMismatch(domNode, vnode);\n    hydrateProps(domNode, vnode.props);\n    domNode.__vnode = vnode;\n\n    const children = flattenVNodes(vnode.children || []);\n    let cursor = domNode.firstChild;\n    for (const child of children) {\n      if (!cursor) break;\n      cursor = hydrateVNode(cursor, child);\n    }\n    return domNode.nextSibling;\n  }\n\n  // Tag mismatch — fall back to full render\n  if (__DEV__) {\n    const expectedTag = vnode.tag || '(unknown)';\n    const actualTag = domNode.tagName ? domNode.tagName.toLowerCase() : `nodeType:${domNode.nodeType}`;\n    console.warn(`Tova hydration mismatch: expected <${expectedTag}> but got <${actualTag}>, falling back to full render`);\n  }\n  const parent = domNode.parentNode;\n  const next = domNode.nextSibling;\n  const rendered = render(vnode);\n  parent.replaceChild(rendered, domNode);\n  return next;\n}\n\nfunction hydrateProps(el, props) {\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'ref') {\n      if (typeof value === 'object' && value !== null && 'current' in value) {\n        value.current = el;\n      } else if (typeof value === 'function') {\n        value(el);\n      }\n    } else if (key.startsWith('on')) {\n      const eventName = key.slice(2).toLowerCase();\n      if (typeof value === 'object' && value !== null && value.handler) {\n        el.addEventListener(eventName, value.handler, value.options);\n        if (!el.__handlers) el.__handlers = {};\n        el.__handlers[eventName] = value.handler;\n        el.__handlerOptions = el.__handlerOptions || {};\n        el.__handlerOptions[eventName] = value.options;\n      } else {\n        el.addEventListener(eventName, value);\n        if (!el.__handlers) el.__handlers = {};\n        el.__handlers[eventName] = value;\n      }\n    } else if (key === 'key') {\n      // Skip\n    } else if (typeof value === 'function' && !key.startsWith('on')) {\n      createEffect(() => {\n        const val = value();\n        applyPropValue(el, key, val);\n      });\n    }\n  }\n}\n\nexport function hydrate(component, container) {\n  if (!container) {\n    console.error('Tova: Hydration target not found');\n    return;\n  }\n\n  const startTime = typeof performance !== 'undefined' ? performance.now() : 0;\n\n  const result = createRoot(() => {\n    const vnode = typeof component === 'function' ? component() : component;\n    if (container.firstChild) {\n      hydrateVNode(container.firstChild, vnode);\n    }\n  });\n\n  // Dispatch hydration completion event\n  const duration = typeof performance !== 'undefined' ? performance.now() - startTime : 0;\n  if (typeof CustomEvent !== 'undefined' && typeof container.dispatchEvent === 'function') {\n    container.dispatchEvent(new CustomEvent('tova:hydrated', { detail: { duration }, bubbles: true }));\n  }\n\n  if (__devtools_hooks && __devtools_hooks.onHydrate) {\n    __devtools_hooks.onHydrate({ duration });\n  }\n\n  return result;\n}\n\nexport function mount(component, container) {\n  if (!container) {\n    console.error('Tova: Mount target not found');\n    return;\n  }\n\n  const result = createRoot((dispose) => {\n    const vnode = typeof component === 'function' ? component() : component;\n    if (typeof container.replaceChildren === 'function') {\n      container.replaceChildren();\n    } else {\n      while (container.firstChild) container.removeChild(container.firstChild);\n    }\n    container.appendChild(render(vnode));\n    return dispose;\n  });\n\n  if (__devtools_hooks && __devtools_hooks.onMount) {\n    __devtools_hooks.onMount();\n  }\n\n  return result;\n}\n\n// ─── Progressive Hydration ──────────────────────────────────\n// Hydrate a component only when it becomes visible in the viewport.\n\nexport function hydrateWhenVisible(component, domNode, options = {}) {\n  if (typeof IntersectionObserver === 'undefined') {\n    // Fallback: hydrate immediately\n    return hydrate(component, domNode);\n  }\n\n  const { rootMargin = '200px' } = options;\n  let hydrated = false;\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting && !hydrated) {\n          hydrated = true;\n          observer.disconnect();\n          hydrate(component, domNode);\n        }\n      }\n    },\n    { rootMargin },\n  );\n\n  observer.observe(domNode);\n\n  return () => {\n    observer.disconnect();\n  };\n}\n\n// ─── Form Handling ──────────────────────────────────────────\n// Reactive form primitives with field-level validation.\n// Usage:\n//   const form = createForm({\n//     fields: { email: { initial: '', validate: (v) => v.includes('@') ? null : 'Invalid email' } },\n//     onSubmit: async (values) => { await server.register(values); }\n//   });\n//   <input bind:value={form.field('email').value} />\n//   {form.field('email').error()}\n//   <button on:click={form.submit} disabled={form.submitting()}>Submit</button>\n\nexport function createForm({ fields = {}, onSubmit, validateOnChange = true, validateOnBlur = true }) {\n  const fieldSignals = {};\n  const errorSignals = {};\n  const touchedSignals = {};\n  const [submitting, setSubmitting] = createSignal(false);\n  const [submitError, setSubmitError] = createSignal(null);\n  const [submitCount, setSubmitCount] = createSignal(0);\n\n  // Initialize field signals\n  for (const [name, config] of Object.entries(fields)) {\n    const initial = config.initial !== undefined ? config.initial : '';\n    const [value, setValue] = createSignal(initial);\n    const [error, setError] = createSignal(null);\n    const [touched, setTouched] = createSignal(false);\n    fieldSignals[name] = { value, setValue, validate: config.validate || null, initial };\n    errorSignals[name] = { error, setError };\n    touchedSignals[name] = { touched, setTouched };\n  }\n\n  function validateField(name) {\n    const f = fieldSignals[name];\n    const e = errorSignals[name];\n    if (!f || !e || !f.validate) return null;\n    const err = f.validate(f.value());\n    e.setError(err);\n    return err;\n  }\n\n  function validateAll() {\n    let hasErrors = false;\n    for (const name of Object.keys(fieldSignals)) {\n      const err = validateField(name);\n      if (err) hasErrors = true;\n    }\n    return !hasErrors;\n  }\n\n  function field(name) {\n    const f = fieldSignals[name];\n    const e = errorSignals[name];\n    const t = touchedSignals[name];\n    if (!f) throw new Error(`Tova form: unknown field \"${name}\"`);\n    return {\n      value: f.value,\n      error: e.error,\n      touched: t.touched,\n      set(val) {\n        f.setValue(val);\n        if (validateOnChange && t.touched()) validateField(name);\n      },\n      blur() {\n        t.setTouched(true);\n        if (validateOnBlur) validateField(name);\n      },\n      validate() { return validateField(name); },\n    };\n  }\n\n  function values() {\n    const result = {};\n    for (const [name, f] of Object.entries(fieldSignals)) {\n      result[name] = f.value();\n    }\n    return result;\n  }\n\n  function reset() {\n    for (const [name, f] of Object.entries(fieldSignals)) {\n      f.setValue(f.initial);\n      errorSignals[name].setError(null);\n      touchedSignals[name].setTouched(false);\n    }\n    setSubmitError(null);\n  }\n\n  async function submit(e) {\n    if (e && typeof e.preventDefault === 'function') e.preventDefault();\n    // Touch all fields\n    for (const name of Object.keys(touchedSignals)) {\n      touchedSignals[name].setTouched(true);\n    }\n    if (!validateAll()) return;\n    if (!onSubmit) return;\n    setSubmitting(true);\n    setSubmitError(null);\n    setSubmitCount(c => c + 1);\n    try {\n      await onSubmit(values());\n    } catch (err) {\n      setSubmitError(err);\n    } finally {\n      setSubmitting(false);\n    }\n  }\n\n  const isValid = createComputed(() => {\n    for (const name of Object.keys(errorSignals)) {\n      if (errorSignals[name].error()) return false;\n    }\n    return true;\n  });\n\n  const isDirty = createComputed(() => {\n    for (const [name, f] of Object.entries(fieldSignals)) {\n      if (f.value() !== f.initial) return true;\n    }\n    return false;\n  });\n\n  return {\n    field,\n    values,\n    reset,\n    submit,\n    submitting,\n    submitError,\n    submitCount,\n    isValid,\n    isDirty,\n    validate: validateAll,\n  };\n}\n";
+export const REACTIVITY_SOURCE = "// Fine-grained reactivity system for Tova (signals-based)\n\nconst __DEV__ = typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';\n\n// ─── DevTools hooks (zero-cost when disabled) ────────────\nlet __devtools_hooks = null;\nexport function __enableDevTools(hooks) {\n  __devtools_hooks = hooks;\n}\n\nlet currentEffect = null;\nconst effectStack = [];\n\n// ─── Ownership System ─────────────────────────────────────\nlet currentOwner = null;\nconst ownerStack = [];\n\n// ─── Batching ────────────────────────────────────────────\n// Default: synchronous flush after each setter (backward compatible).\n// Inside batch(): effects are deferred and flushed once when batch ends.\n// This means setA(1); setB(2) causes 2 runs by default, but\n// batch(() => { setA(1); setB(2); }) causes only 1 run.\n\nlet pendingEffects = new Set();\nlet batchDepth = 0;\nlet flushing = false;\n\n// Reusable array for flush cycle — avoids allocation on every flush\nlet _flushBuf = [];\n\n// Reset module-level mutable state for test isolation.\n// Bun runs all test files in a single process, so Maps like __tovaStyleRefs\n// accumulate entries across files. Call this between tests to prevent pollution.\nexport function __resetForTesting() {\n  if (typeof __tovaStyleRefs !== 'undefined') __tovaStyleRefs.clear();\n  if (typeof __tovaFontRefs !== 'undefined') __tovaFontRefs.clear();\n  __cspNonce = null;\n  __tovaHeadTags.length = 0;\n  pendingEffects.clear();\n  currentEffect = null;\n  currentOwner = null;\n  effectStack.length = 0;\n  ownerStack.length = 0;\n  batchDepth = 0;\n  flushing = false;\n  _flushBuf.length = 0;\n  __devtools_hooks = null;\n  __errorBoundaryIdCounter = 0;\n  currentErrorHandler = null;\n}\n\nfunction flush() {\n  if (flushing) return; // prevent re-entrant flush\n  flushing = true;\n  let iterations = 0;\n  try {\n    while (pendingEffects.size > 0) {\n      if (++iterations > 100) {\n        console.error('Tova: Possible infinite loop in reactive updates (>100 flush iterations). Aborting.');\n        pendingEffects.clear();\n        break;\n      }\n\n      // Invoke onBeforeUpdate callbacks for owners that have pending effects\n      const ownersNotified = new Set();\n      for (const effect of pendingEffects) {\n        const owner = effect._owner;\n        if (owner && owner._beforeUpdate && !ownersNotified.has(owner)) {\n          ownersNotified.add(owner);\n          for (const cb of owner._beforeUpdate) {\n            try { cb(); } catch (e) { console.error('Tova: onBeforeUpdate error:', e); }\n          }\n        }\n      }\n\n      const toRun = pendingEffects;\n      pendingEffects = new Set();\n      // Sort by depth (parents first) to avoid redundant child re-runs\n      // Reuse buffer to reduce GC pressure\n      if (toRun.size > 1) {\n        _flushBuf.length = 0;\n        for (const effect of toRun) _flushBuf.push(effect);\n        _flushBuf.sort((a, b) => (a._depth || 0) - (b._depth || 0));\n        for (let i = 0; i < _flushBuf.length; i++) {\n          if (!_flushBuf[i]._disposed) {\n            _flushBuf[i]();\n          }\n        }\n        _flushBuf.length = 0;\n      } else {\n        for (const effect of toRun) {\n          if (!effect._disposed) {\n            effect();\n          }\n        }\n      }\n    }\n  } finally {\n    flushing = false;\n  }\n}\n\nexport function batch(fn) {\n  batchDepth++;\n  try {\n    fn();\n  } finally {\n    batchDepth--;\n    if (batchDepth === 0) {\n      flush();\n    }\n  }\n}\n\n// ─── Ownership Root ──────────────────────────────────────\n\nexport function createRoot(fn) {\n  const root = {\n    _children: [],\n    _disposed: false,\n    _cleanups: [],\n    _contexts: null,\n    _owner: currentOwner,\n    dispose() {\n      if (root._disposed) return;\n      root._disposed = true;\n      // Dispose children in reverse order (skip already-disposed)\n      for (let i = root._children.length - 1; i >= 0; i--) {\n        const child = root._children[i];\n        if (!child._disposed && typeof child.dispose === 'function') child.dispose();\n      }\n      root._children.length = 0;\n      // Run cleanups in reverse order\n      for (let i = root._cleanups.length - 1; i >= 0; i--) {\n        try { root._cleanups[i](); } catch (e) { console.error('Tova: root cleanup error:', e); }\n      }\n      root._cleanups.length = 0;\n    }\n  };\n  ownerStack.push(currentOwner);\n  currentOwner = root;\n  try {\n    return fn(root.dispose.bind(root));\n  } finally {\n    currentOwner = ownerStack.pop();\n  }\n}\n\n// ─── Dependency Cleanup ──────────────────────────────────\n\nfunction cleanupDeps(subscriber) {\n  if (subscriber._deps) {\n    for (const depSet of subscriber._deps) {\n      depSet.delete(subscriber);\n    }\n    subscriber._deps.clear();\n  }\n}\n\nfunction trackDep(subscriber, subscriberSet) {\n  subscriberSet.add(subscriber);\n  if (!subscriber._deps) subscriber._deps = new Set();\n  subscriber._deps.add(subscriberSet);\n}\n\n// ─── Signals ─────────────────────────────────────────────\n\nexport function createSignal(initialValue, name) {\n  let value = initialValue;\n  const subscribers = new Set();\n  let signalId = null;\n\n  if (__devtools_hooks) {\n    signalId = __devtools_hooks.onSignalCreate(\n      () => value,\n      (v) => setter(v),\n      name,\n    );\n  }\n\n  function getter() {\n    if (currentEffect) {\n      trackDep(currentEffect, subscribers);\n    }\n    return value;\n  }\n\n  function setter(newValue) {\n    if (typeof newValue === 'function') {\n      newValue = newValue(value);\n    }\n    if (value !== newValue) {\n      const oldValue = value;\n      value = newValue;\n      if (__devtools_hooks && signalId != null) {\n        __devtools_hooks.onSignalUpdate(signalId, oldValue, newValue);\n      }\n      for (const sub of subscribers) {\n        if (sub._isComputed) {\n          sub(); // propagate dirty flags synchronously through computed graph\n        } else {\n          pendingEffects.add(sub);\n        }\n      }\n      if (batchDepth === 0) {\n        flush();\n      }\n    }\n  }\n\n  return [getter, setter];\n}\n\n// ─── Effects ─────────────────────────────────────────────\n\nfunction runCleanups(effect) {\n  if (effect._cleanup) {\n    try { effect._cleanup(); } catch (e) { console.error('Tova: cleanup error:', e); }\n    effect._cleanup = null;\n  }\n  if (effect._cleanups && effect._cleanups.length > 0) {\n    for (const cb of effect._cleanups) {\n      try { cb(); } catch (e) { console.error('Tova: cleanup error:', e); }\n    }\n    effect._cleanups = [];\n  }\n}\n\nexport function createEffect(fn) {\n  function effect() {\n    if (effect._running) return;\n    if (effect._disposed) return;\n    effect._running = true;\n\n    // Run cleanups from previous execution\n    runCleanups(effect);\n\n    // Remove from all previous dependency subscriber sets\n    cleanupDeps(effect);\n\n    effectStack.push(effect);\n    currentEffect = effect;\n    const startTime = __devtools_hooks && typeof performance !== 'undefined' ? performance.now() : 0;\n    try {\n      const result = fn();\n      // If effect returns a function, use as cleanup\n      if (typeof result === 'function') {\n        effect._cleanup = result;\n      }\n    } catch (e) {\n      console.error('Tova: Error in effect:', e);\n      if (currentErrorHandler) {\n        currentErrorHandler(e);\n      }\n    } finally {\n      if (__devtools_hooks) {\n        const duration = typeof performance !== 'undefined' ? performance.now() - startTime : 0;\n        __devtools_hooks.onEffectRun(effect, duration);\n      }\n      effectStack.pop();\n      currentEffect = effectStack[effectStack.length - 1] || null;\n      effect._running = false;\n    }\n  }\n\n  effect._deps = new Set();\n  effect._running = false;\n  effect._disposed = false;\n  effect._cleanup = null;\n  effect._cleanups = [];\n  effect._owner = currentOwner;\n  // Compute depth for priority scheduling (parents flush before children)\n  effect._depth = currentOwner ? (currentOwner._depth || 0) + 1 : 0;\n\n  if (__devtools_hooks) {\n    __devtools_hooks.onEffectCreate(effect);\n  }\n\n  if (currentOwner && !currentOwner._disposed) {\n    currentOwner._children.push(effect);\n  }\n\n  effect.dispose = function () {\n    effect._disposed = true;\n    runCleanups(effect);\n    cleanupDeps(effect);\n    pendingEffects.delete(effect);\n  };\n\n  // Run immediately (synchronous first run)\n  effect();\n  return effect;\n}\n\n// ─── Computed (lazy/pull-based for glitch-free reads) ────\n\nexport function createComputed(fn) {\n  let value;\n  let dirty = true;\n  const subscribers = new Set();\n\n  // notify is called synchronously when a source signal changes.\n  // It marks the computed dirty and propagates to downstream subscribers.\n  function notify() {\n    if (!dirty) {\n      dirty = true;\n      notify._dirty = true;\n      for (const sub of subscribers) {\n        if (sub._isComputed) {\n          if (!sub._dirty) sub(); // skip already-dirty computeds\n        } else {\n          pendingEffects.add(sub);\n        }\n      }\n    }\n  }\n\n  notify._deps = new Set();\n  notify._disposed = false;\n  notify._isComputed = true;\n  notify._owner = currentOwner;\n\n  if (currentOwner && !currentOwner._disposed) {\n    currentOwner._children.push(notify);\n  }\n\n  notify.dispose = function () {\n    notify._disposed = true;\n    cleanupDeps(notify);\n  };\n\n  function recompute() {\n    cleanupDeps(notify);\n\n    effectStack.push(notify);\n    currentEffect = notify;\n    try {\n      value = fn();\n      dirty = false;\n      notify._dirty = false;\n    } finally {\n      effectStack.pop();\n      currentEffect = effectStack[effectStack.length - 1] || null;\n    }\n  }\n\n  // Initial computation\n  recompute();\n\n  function getter() {\n    if (currentEffect) {\n      trackDep(currentEffect, subscribers);\n    }\n    if (dirty) {\n      recompute();\n    }\n    return value;\n  }\n\n  return getter;\n}\n\n// ─── Lifecycle Hooks ─────────────────────────────────────\n\nexport function onMount(fn) {\n  const owner = currentOwner;\n  queueMicrotask(() => {\n    if (owner && owner._disposed) return;\n    const result = fn();\n    if (typeof result === 'function' && owner && !owner._disposed) {\n      owner._cleanups.push(result);\n    }\n  });\n}\n\nexport function onUnmount(fn) {\n  if (currentOwner && !currentOwner._disposed) {\n    currentOwner._cleanups.push(fn);\n  }\n}\n\nexport function onCleanup(fn) {\n  if (currentEffect) {\n    if (!currentEffect._cleanups) currentEffect._cleanups = [];\n    currentEffect._cleanups.push(fn);\n  }\n}\n\nexport function onBeforeUpdate(fn) {\n  if (currentOwner && !currentOwner._disposed) {\n    if (!currentOwner._beforeUpdate) currentOwner._beforeUpdate = [];\n    currentOwner._beforeUpdate.push(fn);\n  }\n}\n\n// ─── Untrack ─────────────────────────────────────────────\n// Run a function without tracking any signal reads (opt out of reactivity)\n\nexport function untrack(fn) {\n  const prev = currentEffect;\n  currentEffect = null;\n  try {\n    return fn();\n  } finally {\n    currentEffect = prev;\n  }\n}\n\n// ─── Watch ───────────────────────────────────────────────\n// Watch a reactive expression, calling callback with (newValue, oldValue)\n// Returns a dispose function to stop watching.\n\nexport function watch(getter, callback, options = {}) {\n  let oldValue = undefined;\n  let initialized = false;\n\n  const effect = createEffect(() => {\n    const newValue = getter();\n    if (initialized) {\n      untrack(() => callback(newValue, oldValue));\n    } else if (options.immediate) {\n      untrack(() => callback(newValue, undefined));\n    }\n    oldValue = newValue;\n    initialized = true;\n  });\n\n  return effect.dispose ? effect.dispose.bind(effect) : () => {\n    effect._disposed = true;\n    runCleanups(effect);\n    cleanupDeps(effect);\n    pendingEffects.delete(effect);\n  };\n}\n\n// ─── Refs ────────────────────────────────────────────────\n\nexport function createRef(initialValue) {\n  return { current: initialValue !== undefined ? initialValue : null };\n}\n\n// ─── Error Boundaries ────────────────────────────────────\n\n// Stack-based error handler for correct nested boundary propagation\nconst errorHandlerStack = [];\nlet currentErrorHandler = null;\n\nfunction pushErrorHandler(handler) {\n  errorHandlerStack.push(currentErrorHandler);\n  currentErrorHandler = handler;\n}\n\nfunction popErrorHandler() {\n  currentErrorHandler = errorHandlerStack.pop() || null;\n}\n\n// Component name tracking for stack traces\nconst componentNameStack = [];\n\nexport function pushComponentName(name) {\n  componentNameStack.push(name);\n}\n\nexport function popComponentName() {\n  componentNameStack.pop();\n}\n\nfunction buildComponentStack() {\n  return [...componentNameStack].reverse();\n}\n\nexport function createErrorBoundary(options = {}) {\n  const { onError, onReset } = options;\n  const [error, setError] = createSignal(null);\n\n  function run(fn) {\n    pushErrorHandler((e) => {\n      const stack = buildComponentStack();\n      if (e && typeof e === 'object') e.__tovaComponentStack = stack;\n      setError(e);\n      if (onError) onError({ error: e, componentStack: stack });\n    });\n    try {\n      return fn();\n    } catch (e) {\n      const stack = buildComponentStack();\n      if (e && typeof e === 'object') e.__tovaComponentStack = stack;\n      setError(e);\n      if (onError) onError({ error: e, componentStack: stack });\n      return null;\n    } finally {\n      popErrorHandler();\n    }\n  }\n\n  function reset() {\n    setError(null);\n    if (onReset) onReset();\n  }\n\n  return { error, run, reset };\n}\n\nlet __errorBoundaryIdCounter = 0;\n\nexport function ErrorBoundary({ fallback, children, onError, onReset, onErrorCleared, retry = 0 }) {\n  const [error, setError] = createSignal(null);\n  const [retryCount, setRetryCount] = createSignal(0);\n  const boundaryId = ++__errorBoundaryIdCounter;\n  let lastErrorId = 0;\n\n  function handleError(e) {\n    const stack = buildComponentStack();\n    const errorId = `EB${boundaryId}-${++lastErrorId}`;\n\n    if (e && typeof e === 'object') {\n      e.__tovaComponentStack = stack;\n      e.__tovaErrorId = errorId;\n    }\n\n    if (retryCount() < retry) {\n      setRetryCount(c => c + 1);\n      setError(null); // clear to re-trigger render\n      return;\n    }\n    setError(e);\n    if (onError) onError({ error: e, componentStack: stack, errorId, retryCount: retryCount() });\n  }\n\n  function resetBoundary() {\n    setRetryCount(0);\n    setError(null);\n    if (onReset) onReset();\n  }\n\n  // Return a reactive wrapper that switches between children and fallback\n  const childContent = children && children.length === 1 ? children[0] : tova_fragment(children || []);\n\n  const vnode = {\n    __tova: true,\n    tag: '__dynamic',\n    props: {},\n    children: [],\n    _fallback: fallback,\n    _componentName: 'ErrorBoundary',\n    _errorHandler: handleError, // Active during __dynamic effect render cycle\n    compute: () => {\n      const err = error();\n      if (err) {\n        // Render fallback — if fallback itself throws, propagate to parent boundary\n        try {\n          const errorId = err && typeof err === 'object' ? err.__tovaErrorId : null;\n          return typeof fallback === 'function'\n            ? fallback({\n                error: err,\n                errorId,\n                retryCount: retryCount(),\n                componentStack: err && typeof err === 'object' ? err.__tovaComponentStack : [],\n                reset: resetBoundary,\n              })\n            : fallback;\n        } catch (fallbackError) {\n          // Fallback threw — propagate to parent error boundary\n          if (currentErrorHandler) {\n            currentErrorHandler(fallbackError);\n          }\n          return null;\n        }\n      }\n      // Children rendered successfully — fire onErrorCleared if we recovered from an error\n      if (onErrorCleared && lastErrorId > 0 && retryCount() === 0) {\n        queueMicrotask(() => onErrorCleared());\n      }\n      return childContent;\n    },\n  };\n\n  return vnode;\n}\n\n// Built-in ErrorInfo component — renders a formatted error display\n// Usage: <ErrorBoundary fallback={fn(props) ErrorInfo(props)} />\nexport function ErrorInfo({ error, errorId, componentStack, reset, retryCount }) {\n  const message = error instanceof Error ? error.message : String(error);\n  const stackTrace = error instanceof Error && error.stack ? error.stack : '';\n  const compStack = (componentStack || []).join(' > ');\n\n  const children = [\n    tova_el('h3', { style: { margin: '0 0 8px 0', color: '#e53e3e' } }, ['Something went wrong']),\n    tova_el('p', { style: { margin: '4px 0', fontFamily: 'monospace', fontSize: '14px' } }, [message]),\n  ];\n\n  if (compStack) {\n    children.push(\n      tova_el('p', { style: { margin: '4px 0', fontSize: '12px', color: '#718096' } }, [\n        'Component: ', compStack\n      ])\n    );\n  }\n\n  if (errorId) {\n    children.push(\n      tova_el('p', { style: { margin: '4px 0', fontSize: '11px', color: '#a0aec0' } }, [\n        'Error ID: ', errorId\n      ])\n    );\n  }\n\n  if (stackTrace) {\n    children.push(\n      tova_el('details', { style: { marginTop: '8px', fontSize: '12px' } }, [\n        tova_el('summary', { style: { cursor: 'pointer', color: '#4a5568' } }, ['Stack trace']),\n        tova_el('pre', { style: { margin: '4px 0', padding: '8px', background: '#1a202c', color: '#e2e8f0', borderRadius: '4px', overflow: 'auto', fontSize: '11px', maxHeight: '200px' } }, [stackTrace]),\n      ])\n    );\n  }\n\n  if (reset) {\n    children.push(\n      tova_el('button', {\n        style: { marginTop: '8px', padding: '6px 16px', background: '#3182ce', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '13px' },\n        onClick: reset,\n      }, [retryCount > 0 ? 'Retry again' : 'Try again'])\n    );\n  }\n\n  return tova_el('div', {\n    style: { padding: '16px', border: '1px solid #fed7d7', borderRadius: '8px', background: '#fff5f5', color: '#2d3748', fontFamily: 'system-ui, -apple-system, sans-serif' },\n    role: 'alert',\n  }, children);\n}\n\n// ─── Dynamic Component ──────────────────────────────────\n// Renders a component dynamically based on a reactive signal.\n// Usage: Dynamic({ component: mySignal, ...props })\n\nexport function Dynamic({ component, ...rest }) {\n  return {\n    __tova: true,\n    tag: '__dynamic',\n    props: {},\n    children: [],\n    compute: () => {\n      const comp = typeof component === 'function' && !component.__tova ? component() : component;\n      if (!comp) return null;\n      if (typeof comp === 'function') {\n        return comp(rest);\n      }\n      return comp;\n    },\n  };\n}\n\n// ─── Portal ─────────────────────────────────────────────\n// Renders children into a different DOM target.\n// Usage: Portal({ target: \"#modal-root\", children })\n// Cleans up children from the target when the component unmounts.\n\nexport function Portal({ target, children }) {\n  return {\n    __tova: true,\n    tag: '__portal',\n    props: { target },\n    children: children || [],\n    _portalCleanup: true, // Signal to render() to register cleanup\n  };\n}\n\n// ─── Suspense ────────────────────────────────────────────\n// Renders fallback while any child lazy() component is loading.\n// Usage: Suspense({ fallback: loadingEl, children: [LazyComp(props)] })\n\nconst SuspenseContext = createContext(null);\n\nexport function Suspense({ fallback, children }) {\n  const [pending, setPending] = createSignal(0);\n  const childContent = children && children.length === 1 ? children[0] : tova_fragment(children || []);\n\n  const boundary = {\n    register() {\n      setPending(p => p + 1);\n    },\n    resolve() {\n      setPending(p => Math.max(0, p - 1));\n    },\n  };\n\n  return {\n    __tova: true,\n    tag: '__dynamic',\n    props: {},\n    children: [],\n    compute: () => {\n      provide(SuspenseContext, boundary);\n      if (pending() > 0) {\n        return typeof fallback === 'function' ? fallback() : fallback;\n      }\n      return childContent;\n    },\n  };\n}\n\n// ─── Lazy ───────────────────────────────────────────────\n// Async component loading with optional fallback.\n// Usage: const LazyComp = lazy(() => import('./HeavyComponent.js'))\n\nexport function lazy(loader) {\n  let resolved = null;\n  let loadError = null;\n  let promise = null;\n  // Signal is shared across all renders of this lazy component (not per-call)\n  const [tick, setTick] = createSignal(0);\n\n  return function LazyWrapper(props) {\n    if (resolved) {\n      return resolved(props);\n    }\n\n    // Check for Suspense boundary\n    const suspense = inject(SuspenseContext);\n\n    if (!promise) {\n      if (suspense) suspense.register();\n      promise = loader()\n        .then(mod => {\n          resolved = mod.default || mod;\n          if (suspense) suspense.resolve();\n          setTick(1);\n        })\n        .catch(e => {\n          loadError = e;\n          if (suspense) suspense.resolve();\n          setTick(1);\n        });\n    }\n\n    return {\n      __tova: true,\n      tag: '__dynamic',\n      props: {},\n      children: [],\n      compute: () => {\n        tick(); // Track for reactivity\n        if (loadError) return tova_el('span', { className: 'tova-error' }, [String(loadError)]);\n        if (resolved) return resolved(props);\n        // Fallback while loading (individual or Suspense-level)\n        return props && props.fallback ? props.fallback : null;\n      },\n    };\n  };\n}\n\n// ─── Context (Provide/Inject) ────────────────────────────\n// Tree-based: values are stored on the ownership tree, inject walks up.\n\nexport function createContext(defaultValue) {\n  const id = Symbol('context');\n  return { _id: id, _default: defaultValue };\n}\n\nexport function provide(context, value) {\n  const owner = currentOwner;\n  if (owner) {\n    if (!owner._contexts) owner._contexts = new Map();\n    owner._contexts.set(context._id, value);\n  }\n}\n\nexport function inject(context) {\n  let owner = currentOwner;\n  while (owner) {\n    if (owner._contexts && owner._contexts.has(context._id)) {\n      return owner._contexts.get(context._id);\n    }\n    owner = owner._owner;\n  }\n  return context._default;\n}\n\n// ─── Head Component ──────────────────────────────────────\n// Declarative document head management.\n// Usage: Head({ children: [tova_el('title', {}, ['My Page']), tova_el('meta', {name: 'description', content: '...'})] })\n// Components can render <Head> to set title, meta, link, and script tags in <head>.\n// When the component unmounts, its head contributions are removed.\n\nconst __tovaHeadTags = [];\n\nexport function Head({ children }) {\n  if (typeof document === 'undefined') return null;\n\n  const addedElements = [];\n  const childList = Array.isArray(children) ? children : [children];\n\n  for (const child of childList) {\n    if (!child || !child.__tova) continue;\n    const tag = child.tag;\n    const props = child.props || {};\n    const text = child.children && child.children.length > 0 ? child.children.join('') : null;\n\n    if (tag === 'title') {\n      // Special case: update document.title directly\n      const prevTitle = document.title;\n      document.title = text || '';\n      addedElements.push({ type: 'title', prev: prevTitle });\n    } else {\n      const el = document.createElement(tag);\n      for (const [key, val] of Object.entries(props)) {\n        if (key.startsWith('on') || key === 'key' || key === 'ref') continue;\n        const attrName = key === 'className' ? 'class' : key;\n        const attrVal = typeof val === 'function' ? val() : val;\n        if (attrVal !== false && attrVal != null) {\n          el.setAttribute(attrName, String(attrVal));\n        }\n      }\n      if (text) el.textContent = text;\n      document.head.appendChild(el);\n      addedElements.push({ type: 'element', el });\n    }\n  }\n\n  // Register cleanup: remove added elements when component unmounts\n  if (currentOwner) {\n    const cleanup = () => {\n      for (const item of addedElements) {\n        if (item.type === 'element') {\n          if (typeof item.el.remove === 'function') {\n            item.el.remove();\n          } else if (item.el.parentNode && typeof item.el.parentNode.removeChild === 'function') {\n            item.el.parentNode.removeChild(item.el);\n          }\n        } else if (item.type === 'title') {\n          document.title = item.prev;\n        }\n      }\n    };\n    if (!currentOwner._cleanups) currentOwner._cleanups = [];\n    currentOwner._cleanups.push(cleanup);\n  }\n\n  return null; // Head renders nothing in the component tree\n}\n\n// ─── createResource ──────────────────────────────────────\n// Async data fetching primitive integrated with signals.\n// Usage: const [data, { loading, error, refetch }] = createResource(fetcher)\n// Usage with source: const [data, { loading, error, refetch }] = createResource(sourceSignal, fetcher)\n// When source changes, fetcher is re-invoked automatically.\n\nexport function createResource(sourceOrFetcher, maybeFetcher) {\n  let source, fetcher;\n  if (typeof maybeFetcher === 'function') {\n    source = sourceOrFetcher;\n    fetcher = maybeFetcher;\n  } else {\n    source = null;\n    fetcher = sourceOrFetcher;\n  }\n\n  const [data, setData] = createSignal(undefined);\n  const [loading, setLoading] = createSignal(false);\n  const [error, setError] = createSignal(undefined);\n  let version = 0; // Guards against stale responses\n\n  function doFetch(sourceVal) {\n    const currentVersion = ++version;\n    setLoading(true);\n    setError(undefined);\n    try {\n      const result = source ? fetcher(sourceVal) : fetcher();\n      if (result && typeof result.then === 'function') {\n        result.then(\n          (val) => {\n            if (currentVersion === version) {\n              setData(() => val);\n              setLoading(false);\n            }\n          },\n          (err) => {\n            if (currentVersion === version) {\n              setError(() => err);\n              setLoading(false);\n            }\n          },\n        );\n      } else {\n        // Synchronous fetcher\n        if (currentVersion === version) {\n          setData(() => result);\n          setLoading(false);\n        }\n      }\n    } catch (err) {\n      if (currentVersion === version) {\n        setError(() => err);\n        setLoading(false);\n      }\n    }\n  }\n\n  function refetch() {\n    const sourceVal = source ? (typeof source === 'function' ? source() : source) : undefined;\n    doFetch(sourceVal);\n  }\n\n  // If source is provided, track it reactively\n  if (source) {\n    createEffect(() => {\n      const sourceVal = typeof source === 'function' ? source() : source;\n      if (sourceVal !== undefined && sourceVal !== null && sourceVal !== false) {\n        doFetch(sourceVal);\n      }\n    });\n  } else {\n    // Fetch immediately\n    doFetch();\n  }\n\n  return [data, { loading, error, refetch, mutate: setData }];\n}\n\n// ─── DOM Rendering ────────────────────────────────────────\n\n// CSP nonce — set via configureCSP({ nonce: '...' }) or auto-detected from\n// <meta name=\"csp-nonce\" content=\"...\">. Used for style tags to comply with\n// Content-Security-Policy headers.\nlet __cspNonce = null;\n\nexport function configureCSP(options) {\n  if (options && options.nonce) __cspNonce = options.nonce;\n}\n\nfunction getCSPNonce() {\n  if (__cspNonce) return __cspNonce;\n  if (typeof document !== 'undefined' && typeof document.querySelector === 'function') {\n    const meta = document.querySelector('meta[name=\"csp-nonce\"]');\n    if (meta) {\n      __cspNonce = meta.getAttribute('content');\n      return __cspNonce;\n    }\n  }\n  return null;\n}\n\n// Inject scoped CSS into the page with reference counting.\n// Style tags are created on first use and removed when no component instances reference them.\n// Supports CSP nonce for Content-Security-Policy compliance.\nconst __tovaStyleRefs = new Map(); // id → { el, count }\nexport function tova_inject_css(id, css) {\n  const ref = __tovaStyleRefs.get(id);\n  if (ref) {\n    ref.count++;\n  } else {\n    const style = document.createElement('style');\n    style.setAttribute('data-tova-style', id);\n    const nonce = getCSPNonce();\n    if (nonce) style.setAttribute('nonce', nonce);\n    style.textContent = css;\n    document.head.appendChild(style);\n    __tovaStyleRefs.set(id, { el: style, count: 1 });\n  }\n  // Register cleanup on the current owner so unmount decrements the ref count\n  if (currentOwner) {\n    let cleaned = false;\n    const cleanup = () => {\n      if (cleaned) return;\n      cleaned = true;\n      const r = __tovaStyleRefs.get(id);\n      if (r) {\n        r.count--;\n        if (r.count <= 0) {\n          if (typeof r.el.remove === 'function') {\n            r.el.remove();\n          } else if (r.el.parentNode && typeof r.el.parentNode.removeChild === 'function') {\n            r.el.parentNode.removeChild(r.el);\n          }\n          __tovaStyleRefs.delete(id);\n        }\n      }\n    };\n    if (!currentOwner._cleanups) currentOwner._cleanups = [];\n    currentOwner._cleanups.push(cleanup);\n  }\n}\n\n// Load a remote font stylesheet with reference counting.\n// When the last component using a font unmounts, the <link> is removed.\nconst __tovaFontRefs = new Map(); // id → { el, count }\nexport function __tova_load_font(id, url) {\n  const ref = __tovaFontRefs.get(id);\n  if (ref) {\n    ref.count++;\n  } else {\n    const link = document.createElement('link');\n    link.rel = 'stylesheet';\n    link.href = url;\n    link.dataset.tovaFont = id;\n    document.head.appendChild(link);\n    __tovaFontRefs.set(id, { el: link, count: 1 });\n  }\n  // Register cleanup on the current owner so unmount decrements the ref count\n  if (currentOwner) {\n    let cleaned = false;\n    const cleanup = () => {\n      if (cleaned) return;\n      cleaned = true;\n      const r = __tovaFontRefs.get(id);\n      if (r) {\n        r.count--;\n        if (r.count <= 0) {\n          if (typeof r.el.remove === 'function') {\n            r.el.remove();\n          } else if (r.el.parentNode && typeof r.el.parentNode.removeChild === 'function') {\n            r.el.parentNode.removeChild(r.el);\n          }\n          __tovaFontRefs.delete(id);\n        }\n      }\n    };\n    if (!currentOwner._cleanups) currentOwner._cleanups = [];\n    currentOwner._cleanups.push(cleanup);\n  }\n}\n\nexport function tova_el(tag, props = {}, children = []) {\n  return { __tova: true, tag, props, children };\n}\n\nexport function tova_fragment(children) {\n  return { __tova: true, tag: '__fragment', props: {}, children };\n}\n\n// ─── Transitions ──────────────────────────────────────────\n// CSS transition directives for mount/unmount animations.\n// Usage: tova_transition(vnode, \"fade\", { duration: 300 })\n\nconst TRANSITION_DEFAULTS = {\n  fade: { duration: 200, easing: 'ease' },\n  slide: { duration: 300, easing: 'ease-out', axis: 'y' },\n  scale: { duration: 200, easing: 'ease' },\n  fly: { duration: 300, easing: 'ease-out', x: 0, y: -20 },\n};\n\nfunction getTransitionCSS(name, config, phase) {\n  const opts = { ...TRANSITION_DEFAULTS[name], ...config };\n  const dur = opts.duration + 'ms';\n  const ease = opts.easing;\n\n  switch (name) {\n    case 'fade':\n      if (phase === 'enter-from' || phase === 'leave-to') {\n        return { opacity: '0', transition: `opacity ${dur} ${ease}` };\n      }\n      return { opacity: '1', transition: `opacity ${dur} ${ease}` };\n\n    case 'slide': {\n      const axis = opts.axis || 'y';\n      const prop = axis === 'x' ? 'translateX' : 'translateY';\n      const dist = (opts.distance || 20) + 'px';\n      if (phase === 'enter-from' || phase === 'leave-to') {\n        return { transform: `${prop}(${dist})`, opacity: '0', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n      }\n      return { transform: `${prop}(0)`, opacity: '1', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n    }\n\n    case 'scale':\n      if (phase === 'enter-from' || phase === 'leave-to') {\n        return { transform: 'scale(0)', opacity: '0', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n      }\n      return { transform: 'scale(1)', opacity: '1', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n\n    case 'fly': {\n      const x = (opts.x || 0) + 'px';\n      const y = (opts.y || -20) + 'px';\n      if (phase === 'enter-from' || phase === 'leave-to') {\n        return { transform: `translate(${x}, ${y})`, opacity: '0', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n      }\n      return { transform: 'translate(0, 0)', opacity: '1', transition: `transform ${dur} ${ease}, opacity ${dur} ${ease}` };\n    }\n\n    default:\n      return {};\n  }\n}\n\nexport function tova_transition(vnode, nameOrConfig, config = {}) {\n  if (!vnode || !vnode.__tova) return vnode;\n\n  // Directional transitions: tova_transition(vnode, { in: {...}, out: {...} })\n  if (typeof nameOrConfig === 'object' && nameOrConfig !== null && !nameOrConfig.__tova && (nameOrConfig.in || nameOrConfig.out)) {\n    vnode._transition = { directional: true, in: nameOrConfig.in, out: nameOrConfig.out };\n    return vnode;\n  }\n\n  // Custom transition function: tova_transition(vnode, myTransitionFn, config)\n  if (typeof nameOrConfig === 'function') {\n    vnode._transition = { custom: nameOrConfig, config };\n    return vnode;\n  }\n\n  // Built-in transition: tova_transition(vnode, \"fade\", config)\n  vnode._transition = { name: nameOrConfig, config };\n  return vnode;\n}\n\n// ─── TransitionGroup ──────────────────────────────────────\n// Animates enter, leave, and move for keyed list items.\n// Usage: TransitionGroup({ name: \"fade\", tag: \"ul\", children: items.map(i => ...) })\n// Each child MUST have a `key` prop.\n// Supports FLIP-based move animations when items reorder.\n\nexport function TransitionGroup({ name = 'fade', tag = 'div', config = {}, children, ...rest }) {\n  const transName = name;\n  const transConfig = config;\n  const childList = Array.isArray(children) ? children : (children ? [children] : []);\n\n  // Annotate each child vnode with the transition\n  const annotated = childList.map(child => {\n    if (child && child.__tova && !child._transition) {\n      child._transition = { name: transName, config: transConfig };\n    }\n    return child;\n  });\n\n  // Wrap in a container element (default <div>)\n  const wrapper = tova_el(tag, { ...rest, 'data-tova-transition-group': '' }, annotated);\n  wrapper._transitionGroup = { name: transName, config: transConfig };\n  return wrapper;\n}\n\n// ─── Actions ──────────────────────────────────────────────\n// use: directive support. Calls actionFn(el, param) after render.\n// Returns the wrapped vnode. The action lifecycle (update/destroy) is managed.\n\nexport function __tova_action(vnode, actionFn, param) {\n  if (!vnode || !vnode.__tova) return vnode;\n  if (!vnode._actions) vnode._actions = [];\n  vnode._actions.push({ fn: actionFn, param });\n  return vnode;\n}\n\n// Apply enter transition to a DOM element after render\nfunction applyEnterTransition(el, trans) {\n  if (!trans) return;\n\n  // Custom transition function\n  if (trans.custom) {\n    const result = trans.custom(el, trans.config || {}, 'enter');\n    if (result && typeof result === 'object' && !result.then) {\n      Object.assign(el.style, result);\n    }\n    return;\n  }\n\n  // Directional: use 'in' config for enter\n  const name = trans.directional ? (trans.in ? trans.in.name : null) : trans.name;\n  const config = trans.directional ? (trans.in ? trans.in.config : {}) : trans.config;\n  if (!name) return;\n\n  const fromStyles = getTransitionCSS(name, config, 'enter-from');\n  const toStyles = getTransitionCSS(name, config, 'enter-to');\n\n  // Set initial state\n  Object.assign(el.style, fromStyles);\n\n  // Force reflow, then apply target state\n  void el.offsetHeight;\n  Object.assign(el.style, toStyles);\n}\n\n// Apply leave transition and return a Promise that resolves when done\nfunction applyLeaveTransition(el, trans) {\n  if (!trans) return Promise.resolve();\n\n  // Custom transition function\n  if (trans.custom) {\n    const result = trans.custom(el, trans.config || {}, 'leave');\n    if (result && typeof result.then === 'function') {\n      // Race with timeout to prevent leaked promises from custom transitions\n      const dur = (trans.config && trans.config.duration) || 5000;\n      return Promise.race([result, new Promise(r => setTimeout(r, dur + 100))]);\n    }\n    if (result && typeof result === 'object') {\n      Object.assign(el.style, result);\n    }\n    const dur = (trans.config && trans.config.duration) || 200;\n    return new Promise(resolve => setTimeout(resolve, dur));\n  }\n\n  // Directional: use 'out' config for leave\n  const name = trans.directional ? (trans.out ? trans.out.name : null) : trans.name;\n  const config = trans.directional ? (trans.out ? trans.out.config : {}) : trans.config;\n  if (!name) return Promise.resolve();\n\n  const duration = (config && config.duration) || TRANSITION_DEFAULTS[name]?.duration || 200;\n  const toStyles = getTransitionCSS(name, config, 'leave-to');\n  Object.assign(el.style, toStyles);\n\n  return new Promise(resolve => {\n    const handler = () => {\n      el.removeEventListener('transitionend', handler);\n      resolve();\n    };\n    el.addEventListener('transitionend', handler);\n    // Fallback timeout in case transitionend doesn't fire\n    setTimeout(resolve, duration + 50);\n  });\n}\n\n// Inject a key prop into a vnode for keyed reconciliation\nexport function tova_keyed(key, vnode) {\n  if (vnode && vnode.__tova) {\n    vnode.props = { ...vnode.props, key };\n  }\n  return vnode;\n}\n\n// Flatten nested arrays and vnodes into a flat list of vnodes\nfunction flattenVNodes(children) {\n  const result = [];\n  for (const child of children) {\n    if (child === null || child === undefined) {\n      continue;\n    } else if (Array.isArray(child)) {\n      result.push(...flattenVNodes(child));\n    } else {\n      result.push(child);\n    }\n  }\n  return result;\n}\n\n// ─── Marker-based DOM helpers ─────────────────────────────\n// Instead of wrapping dynamic blocks/fragments in <span style=\"display:contents\">,\n// we use comment node markers. A marker's __tovaNodes tracks its content nodes.\n// Content nodes have __tovaOwner pointing to their owning marker.\n\n// Recursively dispose ownership roots attached to a DOM subtree\nfunction disposeNode(node) {\n  if (!node) return;\n  if (node.__tovaRoot) {\n    node.__tovaRoot();\n    node.__tovaRoot = null;\n  }\n  // If this is a marker, dispose and remove its content nodes\n  if (node.__tovaNodes) {\n    for (const cn of node.__tovaNodes) {\n      disposeNode(cn);\n      if (cn.parentNode) cn.parentNode.removeChild(cn);\n    }\n    node.__tovaNodes = [];\n  }\n  if (node.childNodes) {\n    for (const child of Array.from(node.childNodes)) {\n      disposeNode(child);\n    }\n  }\n}\n\n// Check if a node is transitively owned by a marker (walks __tovaOwner chain)\nfunction isOwnedBy(node, marker) {\n  let owner = node.__tovaOwner;\n  while (owner) {\n    if (owner === marker) return true;\n    owner = owner.__tovaOwner;\n  }\n  return false;\n}\n\n// Get logical children of a parent element (skips marker content nodes)\nfunction getLogicalChildren(parent) {\n  const logical = [];\n  for (let i = 0; i < parent.childNodes.length; i++) {\n    const node = parent.childNodes[i];\n    if (!node.__tovaOwner) {\n      logical.push(node);\n    }\n  }\n  return logical;\n}\n\n// Find the first DOM sibling after all of a marker's content\nfunction nextSiblingAfterMarker(marker) {\n  if (!marker.__tovaNodes || marker.__tovaNodes.length === 0) {\n    return marker.nextSibling;\n  }\n  let last = marker.__tovaNodes[marker.__tovaNodes.length - 1];\n  // If last content is itself a marker, recurse to find physical end\n  while (last && last.__tovaNodes && last.__tovaNodes.length > 0) {\n    last = last.__tovaNodes[last.__tovaNodes.length - 1];\n  }\n  return last ? last.nextSibling : marker.nextSibling;\n}\n\n// Remove a logical node (marker + its content, or a regular node) from the DOM\nfunction removeLogicalNode(parent, node) {\n  disposeNode(node);\n  if (node.parentNode === parent) parent.removeChild(node);\n}\n\n// Insert rendered result (could be single node or DocumentFragment) before ref,\n// setting __tovaOwner on top-level inserted nodes. Returns array of inserted nodes.\nfunction insertRendered(parent, rendered, ref, owner) {\n  if (rendered.nodeType === 11) {\n    const nodes = Array.from(rendered.childNodes);\n    for (const n of nodes) {\n      if (!n.__tovaOwner) n.__tovaOwner = owner;\n    }\n    parent.insertBefore(rendered, ref);\n    return nodes;\n  }\n  if (!rendered.__tovaOwner) rendered.__tovaOwner = owner;\n  parent.insertBefore(rendered, ref);\n  return [rendered];\n}\n\n// Clear a marker's content from the DOM and reset __tovaNodes\nfunction clearMarkerContent(marker) {\n  for (const node of marker.__tovaNodes) {\n    // If element has a leave transition, animate out before removing\n    if (node.__tovaTransition && node.nodeType === 1) {\n      const el = node;\n      applyLeaveTransition(el, el.__tovaTransition).then(() => {\n        disposeNode(el);\n        if (el.parentNode) el.parentNode.removeChild(el);\n      }).catch(() => {\n        disposeNode(el);\n        if (el.parentNode) el.parentNode.removeChild(el);\n      });\n    } else {\n      disposeNode(node);\n      if (node.parentNode) node.parentNode.removeChild(node);\n    }\n  }\n  marker.__tovaNodes = [];\n}\n\n// ─── Render ───────────────────────────────────────────────\n\n// Create real DOM nodes from a vnode (with fine-grained reactive bindings).\n// Returns a single DOM node for elements/text, or a DocumentFragment for\n// markers (dynamic blocks, fragments) containing [marker, ...content].\nexport function render(vnode) {\n  if (vnode === null || vnode === undefined) {\n    return document.createTextNode('');\n  }\n\n  // Reactive dynamic block (JSXIf, JSXFor, reactive text, etc.)\n  if (typeof vnode === 'function') {\n    const marker = document.createComment('');\n    marker.__tovaDynamic = true;\n    marker.__tovaNodes = [];\n\n    const frag = document.createDocumentFragment();\n    frag.appendChild(marker);\n\n    createEffect(() => {\n      const val = vnode();\n      const parent = marker.parentNode;\n      const ref = nextSiblingAfterMarker(marker);\n\n      // Array: keyed or positional reconciliation within marker range\n      if (Array.isArray(val)) {\n        const flat = flattenVNodes(val);\n        const hasKeys = flat.some(c => getKey(c) != null);\n        if (hasKeys) {\n          patchKeyedInMarker(marker, flat);\n        } else {\n          patchPositionalInMarker(marker, flat);\n        }\n        return;\n      }\n\n      // Text: optimize single text node update in place\n      if (val == null || typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean') {\n        const text = val == null ? '' : String(val);\n        if (marker.__tovaNodes.length === 1 && marker.__tovaNodes[0].nodeType === 3) {\n          if (marker.__tovaNodes[0].textContent !== text) {\n            marker.__tovaNodes[0].textContent = text;\n          }\n          return;\n        }\n        clearMarkerContent(marker);\n        const textNode = document.createTextNode(text);\n        textNode.__tovaOwner = marker;\n        parent.insertBefore(textNode, ref);\n        marker.__tovaNodes = [textNode];\n        return;\n      }\n\n      // Vnode or other: clear and re-render\n      clearMarkerContent(marker);\n      if (val && val.__tova) {\n        const rendered = render(val);\n        marker.__tovaNodes = insertRendered(parent, rendered, ref, marker);\n      } else {\n        const textNode = document.createTextNode(String(val));\n        textNode.__tovaOwner = marker;\n        parent.insertBefore(textNode, ref);\n        marker.__tovaNodes = [textNode];\n      }\n    });\n\n    return frag;\n  }\n\n  if (typeof vnode === 'string' || typeof vnode === 'number' || typeof vnode === 'boolean') {\n    return document.createTextNode(String(vnode));\n  }\n\n  if (Array.isArray(vnode)) {\n    const fragment = document.createDocumentFragment();\n    for (const child of vnode) {\n      fragment.appendChild(render(child));\n    }\n    return fragment;\n  }\n\n  if (!vnode.__tova) {\n    return document.createTextNode(String(vnode));\n  }\n\n  // Fragment — marker + children (no wrapper element)\n  if (vnode.tag === '__fragment') {\n    const marker = document.createComment('');\n    marker.__tovaFragment = true;\n    marker.__tovaNodes = [];\n    marker.__vnode = vnode;\n\n    const frag = document.createDocumentFragment();\n    frag.appendChild(marker);\n\n    for (const child of flattenVNodes(vnode.children)) {\n      const rendered = render(child);\n      const inserted = insertRendered(frag, rendered, null, marker);\n      marker.__tovaNodes.push(...inserted);\n    }\n\n    return frag;\n  }\n\n  // Dynamic reactive node (ErrorBoundary, Dynamic component, etc.)\n  if (vnode.tag === '__dynamic' && typeof vnode.compute === 'function') {\n    const marker = document.createComment('');\n    marker.__tovaDynamic = true;\n    marker.__tovaNodes = [];\n\n    const frag = document.createDocumentFragment();\n    frag.appendChild(marker);\n\n    let prevDispose = null;\n    const errHandler = vnode._errorHandler || null;\n    createEffect(() => {\n      if (errHandler) pushErrorHandler(errHandler);\n      try {\n        const inner = vnode.compute();\n        const parent = marker.parentNode;\n        const ref = nextSiblingAfterMarker(marker);\n\n        if (prevDispose) {\n          prevDispose();\n          prevDispose = null;\n        }\n        clearMarkerContent(marker);\n\n        createRoot((dispose) => {\n          prevDispose = dispose;\n          const rendered = render(inner);\n          marker.__tovaNodes = insertRendered(parent, rendered, ref, marker);\n        });\n      } catch (e) {\n        if (errHandler) {\n          errHandler(e);\n        } else if (currentErrorHandler) {\n          currentErrorHandler(e);\n        } else {\n          console.error('Uncaught error during render:', e);\n        }\n      } finally {\n        if (errHandler) popErrorHandler();\n      }\n    });\n\n    return frag;\n  }\n\n  // Portal — render children into a different DOM target\n  if (vnode.tag === '__portal') {\n    const placeholder = document.createComment('portal');\n    const targetSelector = vnode.props.target;\n    const portalNodes = [];\n    queueMicrotask(() => {\n      const targetEl = typeof targetSelector === 'string'\n        ? document.querySelector(targetSelector)\n        : targetSelector;\n      if (targetEl) {\n        for (const child of flattenVNodes(vnode.children)) {\n          const rendered = render(child);\n          targetEl.appendChild(rendered);\n          portalNodes.push(rendered);\n        }\n      }\n    });\n    // Register cleanup: remove portal children when component unmounts\n    if (currentOwner && !currentOwner._disposed) {\n      if (!currentOwner._cleanups) currentOwner._cleanups = [];\n      currentOwner._cleanups.push(() => {\n        for (const node of portalNodes) {\n          disposeNode(node);\n          if (node.parentNode) node.parentNode.removeChild(node);\n        }\n        portalNodes.length = 0;\n      });\n    }\n    return placeholder;\n  }\n\n  // Element\n  const el = document.createElement(vnode.tag);\n  applyReactiveProps(el, vnode.props);\n\n  // Set data-tova-component attribute for DevTools\n  if (vnode._componentName) {\n    el.setAttribute('data-tova-component', vnode._componentName);\n    if (__devtools_hooks && __devtools_hooks.onComponentRender) {\n      __devtools_hooks.onComponentRender(vnode._componentName, el, 0);\n    }\n  }\n\n  // Render children\n  for (const child of flattenVNodes(vnode.children)) {\n    el.appendChild(render(child));\n  }\n\n  // Store vnode reference for patching\n  el.__vnode = vnode;\n\n  // Apply enter transition if present\n  if (vnode._transition) {\n    el.__tovaTransition = vnode._transition;\n    applyEnterTransition(el, vnode._transition);\n  }\n\n  // Apply use: actions if present\n  if (vnode._actions && vnode._actions.length > 0) {\n    for (const action of vnode._actions) {\n      const paramValue = typeof action.param === 'function' ? action.param() : action.param;\n      const result = action.fn(el, paramValue);\n      if (result) {\n        // If param is reactive, set up effect for updates\n        if (typeof action.param === 'function') {\n          createEffect(() => {\n            const newVal = action.param();\n            if (result.update) result.update(newVal);\n          });\n        }\n        // Register destroy on cleanup\n        if (result.destroy) {\n          if (currentOwner && !currentOwner._disposed) {\n            currentOwner._cleanups.push(result.destroy);\n          }\n        }\n      }\n    }\n  }\n\n  return el;\n}\n\n// Apply reactive props — function-valued props get their own effect\nfunction applyReactiveProps(el, props) {\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'ref') {\n      if (typeof value === 'object' && value !== null && 'current' in value) {\n        value.current = el;\n      } else if (typeof value === 'function') {\n        value(el);\n      }\n    } else if (key.startsWith('on')) {\n      const eventName = key.slice(2).toLowerCase();\n      if (typeof value === 'object' && value !== null && value.handler) {\n        el.addEventListener(eventName, value.handler, value.options);\n        if (!el.__handlers) el.__handlers = {};\n        el.__handlers[eventName] = value.handler;\n        el.__handlerOptions = el.__handlerOptions || {};\n        el.__handlerOptions[eventName] = value.options;\n      } else {\n        el.addEventListener(eventName, value);\n        if (!el.__handlers) el.__handlers = {};\n        el.__handlers[eventName] = value;\n      }\n    } else if (key === 'key') {\n      // Skip\n    } else if (typeof value === 'function' && !key.startsWith('on')) {\n      // Reactive prop — create effect for fine-grained updates\n      createEffect(() => {\n        const val = value();\n        applyPropValue(el, key, val);\n      });\n    } else {\n      applyPropValue(el, key, value);\n    }\n  }\n}\n\nfunction applyPropValue(el, key, val) {\n  if (key === 'className') {\n    if (el.className !== val) el.className = val || '';\n  } else if (key === 'dangerouslySetInnerHTML') {\n    // Explicit unsafe HTML injection — requires {__html: \"...\"} format\n    const html = typeof val === 'object' && val !== null ? val.__html || '' : '';\n    if (__DEV__ && html) {\n      console.warn('Tova: dangerouslySetInnerHTML bypasses XSS protection. Ensure content is sanitized.');\n    }\n    if (el.innerHTML !== html) el.innerHTML = html;\n  } else if (key === 'innerHTML') {\n    // Blocked: use dangerouslySetInnerHTML instead\n    if (__DEV__) {\n      console.error('Tova: innerHTML is not allowed. Use dangerouslySetInnerHTML={{__html: value}} to acknowledge XSS risk.');\n    }\n  } else if (key === 'value') {\n    if (el !== document.activeElement && el.value !== val) {\n      el.value = val;\n    }\n  } else if (key === 'checked') {\n    el.checked = !!val;\n  } else if (key === 'disabled' || key === 'readOnly' || key === 'hidden') {\n    el[key] = !!val;\n  } else if (key === 'style' && typeof val === 'object') {\n    // Delta update: only remove properties that were in previous style but not in new\n    if (el.__prevStyle) {\n      for (const prop of Object.keys(el.__prevStyle)) {\n        if (!(prop in val)) el.style.removeProperty(prop);\n      }\n    }\n    el.__prevStyle = { ...val };\n    Object.assign(el.style, val);\n  } else {\n    const s = val == null ? '' : String(val);\n    if (el.getAttribute(key) !== s) {\n      el.setAttribute(key, s);\n    }\n  }\n}\n\n// Apply/update props on a DOM element (used by patcher for full-tree mode)\nfunction applyProps(el, newProps, oldProps) {\n  // Remove old props that are no longer present\n  for (const key of Object.keys(oldProps)) {\n    if (!(key in newProps)) {\n      if (key.startsWith('on')) {\n        const eventName = key.slice(2).toLowerCase();\n        if (el.__handlers && el.__handlers[eventName]) {\n          el.removeEventListener(eventName, el.__handlers[eventName]);\n          delete el.__handlers[eventName];\n        }\n      } else if (key === 'className') {\n        el.className = '';\n      } else if (key === 'style') {\n        el.removeAttribute('style');\n      } else {\n        el.removeAttribute(key);\n      }\n    }\n  }\n\n  // Apply new props\n  for (const [key, value] of Object.entries(newProps)) {\n    if (key === 'className') {\n      const val = typeof value === 'function' ? value() : value;\n      if (el.className !== val) el.className = val;\n    } else if (key === 'ref') {\n      if (typeof value === 'object' && value !== null && 'current' in value) {\n        value.current = el;\n      } else if (typeof value === 'function') {\n        value(el);\n      }\n    } else if (key.startsWith('on')) {\n      const eventName = key.slice(2).toLowerCase();\n      if (typeof value === 'object' && value !== null && value.handler) {\n        const oldHandler = el.__handlers && el.__handlers[eventName];\n        if (oldHandler !== value.handler) {\n          const oldOpts = el.__handlerOptions && el.__handlerOptions[eventName];\n          if (oldHandler) el.removeEventListener(eventName, oldHandler, oldOpts);\n          el.addEventListener(eventName, value.handler, value.options);\n          if (!el.__handlers) el.__handlers = {};\n          el.__handlers[eventName] = value.handler;\n          el.__handlerOptions = el.__handlerOptions || {};\n          el.__handlerOptions[eventName] = value.options;\n        }\n      } else {\n        const oldHandler = el.__handlers && el.__handlers[eventName];\n        if (oldHandler !== value) {\n          if (oldHandler) el.removeEventListener(eventName, oldHandler);\n          el.addEventListener(eventName, value);\n          if (!el.__handlers) el.__handlers = {};\n          el.__handlers[eventName] = value;\n        }\n      }\n    } else if (key === 'style' && typeof value === 'object') {\n      Object.assign(el.style, value);\n    } else if (key === 'key') {\n      // Skip\n    } else if (key === 'value') {\n      const val = typeof value === 'function' ? value() : value;\n      if (el !== document.activeElement && el.value !== val) {\n        el.value = val;\n      }\n    } else if (key === 'checked') {\n      el.checked = !!value;\n    } else {\n      const val = typeof value === 'function' ? value() : value;\n      if (el.getAttribute(key) !== String(val)) {\n        el.setAttribute(key, val);\n      }\n    }\n  }\n}\n\n// ─── Longest Increasing Subsequence (O(n log n)) ────────\n// Used by keyed reconciliation to minimize DOM moves.\n\nfunction longestIncreasingSubsequence(arr) {\n  const n = arr.length;\n  if (n === 0) return [];\n\n  // tails[i] = index in arr of smallest tail element for IS of length i+1\n  const tails = [];\n  // parent[i] = index in arr of predecessor of arr[i] in the LIS\n  const parent = new Array(n).fill(-1);\n  // indices[i] = index in arr of tails[i]\n  const indices = [];\n\n  for (let i = 0; i < n; i++) {\n    const val = arr[i];\n    if (val < 0) continue; // skip removed items (marker -1)\n\n    // Binary search for the insertion point\n    let lo = 0, hi = tails.length;\n    while (lo < hi) {\n      const mid = (lo + hi) >> 1;\n      if (tails[mid] < val) lo = mid + 1;\n      else hi = mid;\n    }\n\n    tails[lo] = val;\n    indices[lo] = i;\n\n    if (lo > 0) {\n      parent[i] = indices[lo - 1];\n    }\n  }\n\n  // Reconstruct\n  const result = new Array(tails.length);\n  let k = indices[tails.length - 1];\n  for (let i = tails.length - 1; i >= 0; i--) {\n    result[i] = k;\n    k = parent[k];\n  }\n\n  return result;\n}\n\n// ─── Keyed Reconciliation ────────────────────────────────\n\nfunction getKey(vnode) {\n  if (vnode && vnode.__tova && vnode.props) return vnode.props.key;\n  return undefined;\n}\n\nfunction getNodeKey(node) {\n  if (node && node.__vnode && node.__vnode.props) return node.__vnode.props.key;\n  return undefined;\n}\n\n// Keyed reconciliation within a marker's content range\nfunction patchKeyedInMarker(marker, newVNodes) {\n  const parent = marker.parentNode;\n  const oldNodes = [...marker.__tovaNodes];\n  const oldKeyMap = new Map();\n\n  for (const node of oldNodes) {\n    const key = getNodeKey(node);\n    if (key != null) oldKeyMap.set(key, node);\n  }\n\n  const newNodes = [];\n  const usedOld = new Set();\n\n  for (const newChild of newVNodes) {\n    const key = getKey(newChild);\n\n    if (key != null && oldKeyMap.has(key)) {\n      const oldNode = oldKeyMap.get(key);\n      usedOld.add(oldNode);\n\n      if (oldNode.nodeType === 1 && newChild.__tova &&\n          oldNode.tagName.toLowerCase() === newChild.tag.toLowerCase()) {\n        const oldVNode = oldNode.__vnode || { props: {}, children: [] };\n        applyProps(oldNode, newChild.props, oldVNode.props);\n        patchChildrenOfElement(oldNode, flattenVNodes(newChild.children));\n        oldNode.__vnode = newChild;\n        newNodes.push(oldNode);\n      } else {\n        const node = render(newChild);\n        // render may return Fragment — collect nodes\n        if (node.nodeType === 11) {\n          const nodes = Array.from(node.childNodes);\n          for (const n of nodes) { if (!n.__tovaOwner) n.__tovaOwner = marker; }\n          parent.insertBefore(node, nextSiblingAfterMarker(marker));\n          newNodes.push(...nodes);\n        } else {\n          if (!node.__tovaOwner) node.__tovaOwner = marker;\n          newNodes.push(node);\n        }\n      }\n    } else {\n      const node = render(newChild);\n      if (node.nodeType === 11) {\n        const nodes = Array.from(node.childNodes);\n        for (const n of nodes) { if (!n.__tovaOwner) n.__tovaOwner = marker; }\n        parent.insertBefore(node, nextSiblingAfterMarker(marker));\n        newNodes.push(...nodes);\n      } else {\n        if (!node.__tovaOwner) node.__tovaOwner = marker;\n        newNodes.push(node);\n      }\n    }\n  }\n\n  // Remove unused old nodes\n  for (const node of oldNodes) {\n    if (!usedOld.has(node)) {\n      disposeNode(node);\n      if (node.parentNode === parent) parent.removeChild(node);\n    }\n  }\n\n  // LIS-based reorder: compute old positions, find LIS, only move non-LIS nodes\n  const oldPosMap = new Map();\n  for (let i = 0; i < oldNodes.length; i++) {\n    oldPosMap.set(oldNodes[i], i);\n  }\n  const positions = newNodes.map(n => oldPosMap.has(n) ? oldPosMap.get(n) : -1);\n  const lisIndices = new Set(longestIncreasingSubsequence(positions));\n\n  // Insert nodes: only move nodes not in the LIS\n  let cursor = marker.nextSibling;\n  for (let i = 0; i < newNodes.length; i++) {\n    const node = newNodes[i];\n    if (lisIndices.has(i) && node === cursor) {\n      cursor = node.nextSibling;\n    } else {\n      parent.insertBefore(node, cursor);\n    }\n  }\n\n  marker.__tovaNodes = newNodes;\n}\n\n// Positional reconciliation within a marker's content range\nfunction patchPositionalInMarker(marker, newChildren) {\n  const parent = marker.parentNode;\n  const oldNodes = [...marker.__tovaNodes];\n  const oldCount = oldNodes.length;\n  const newCount = newChildren.length;\n\n  // Patch in place (skip identical vnodes)\n  const patchCount = Math.min(oldCount, newCount);\n  for (let i = 0; i < patchCount; i++) {\n    if (oldNodes[i] === newChildren[i]) continue;\n    patchSingle(parent, oldNodes[i], newChildren[i]);\n  }\n\n  // Append new children\n  const ref = nextSiblingAfterMarker(marker);\n  for (let i = oldCount; i < newCount; i++) {\n    const rendered = render(newChildren[i]);\n    const inserted = insertRendered(parent, rendered, ref, marker);\n    oldNodes.push(...inserted);\n  }\n\n  // Remove excess children\n  for (let i = newCount; i < oldCount; i++) {\n    disposeNode(oldNodes[i]);\n    if (oldNodes[i].parentNode === parent) parent.removeChild(oldNodes[i]);\n  }\n\n  marker.__tovaNodes = oldNodes.slice(0, newCount);\n}\n\n// Keyed reconciliation for children of an element (not marker-based)\nfunction patchKeyedChildren(parent, newVNodes) {\n  const logical = getLogicalChildren(parent);\n  const oldKeyMap = new Map();\n\n  for (const node of logical) {\n    const key = getNodeKey(node);\n    if (key != null) oldKeyMap.set(key, node);\n  }\n\n  const newNodes = [];\n  const usedOld = new Set();\n\n  for (const newChild of newVNodes) {\n    const key = getKey(newChild);\n\n    if (key != null && oldKeyMap.has(key)) {\n      const oldNode = oldKeyMap.get(key);\n      usedOld.add(oldNode);\n\n      if (oldNode.nodeType === 1 && newChild.__tova &&\n          oldNode.tagName.toLowerCase() === newChild.tag.toLowerCase()) {\n        const oldVNode = oldNode.__vnode || { props: {}, children: [] };\n        applyProps(oldNode, newChild.props, oldVNode.props);\n        patchChildrenOfElement(oldNode, flattenVNodes(newChild.children));\n        oldNode.__vnode = newChild;\n        newNodes.push(oldNode);\n      } else {\n        newNodes.push(render(newChild));\n      }\n    } else {\n      newNodes.push(render(newChild));\n    }\n  }\n\n  // Remove unused old logical nodes\n  for (const node of logical) {\n    if (!usedOld.has(node) && node.parentNode === parent) {\n      removeLogicalNode(parent, node);\n    }\n  }\n\n  // LIS-based reorder for element children\n  const logicalAfterRemove = getLogicalChildren(parent);\n  const oldPosMap = new Map();\n  for (let i = 0; i < logicalAfterRemove.length; i++) {\n    oldPosMap.set(logicalAfterRemove[i], i);\n  }\n  const positions = newNodes.map(n => oldPosMap.has(n) ? oldPosMap.get(n) : -1);\n  const lisIndices = new Set(longestIncreasingSubsequence(positions));\n\n  for (let i = 0; i < newNodes.length; i++) {\n    const expected = newNodes[i];\n    if (!lisIndices.has(i)) {\n      const logicalNow = getLogicalChildren(parent);\n      const current = logicalNow[i];\n      if (current !== expected) {\n        parent.insertBefore(expected, current || null);\n      }\n    }\n  }\n}\n\n// Positional reconciliation for children of an element\nfunction patchPositionalChildren(parent, newChildren) {\n  const logical = getLogicalChildren(parent);\n  const oldCount = logical.length;\n  const newCount = newChildren.length;\n\n  for (let i = 0; i < Math.min(oldCount, newCount); i++) {\n    patchSingle(parent, logical[i], newChildren[i]);\n  }\n\n  for (let i = oldCount; i < newCount; i++) {\n    parent.appendChild(render(newChildren[i]));\n  }\n\n  // Remove excess logical children\n  const currentLogical = getLogicalChildren(parent);\n  while (currentLogical.length > newCount) {\n    const node = currentLogical.pop();\n    removeLogicalNode(parent, node);\n  }\n}\n\n// Patch children of a regular element\nfunction patchChildrenOfElement(el, newChildren) {\n  const hasKeys = newChildren.some(c => getKey(c) != null);\n  if (hasKeys) {\n    patchKeyedChildren(el, newChildren);\n  } else {\n    patchPositionalChildren(el, newChildren);\n  }\n}\n\n// Patch a single logical node in place\nfunction patchSingle(parent, existing, newVNode) {\n  if (!existing) {\n    parent.appendChild(render(newVNode));\n    return;\n  }\n\n  if (newVNode === null || newVNode === undefined) {\n    removeLogicalNode(parent, existing);\n    return;\n  }\n\n  // Function vnode — replace with new dynamic block\n  if (typeof newVNode === 'function') {\n    const rendered = render(newVNode);\n    if (existing.__tovaNodes) {\n      // Existing is a marker — clear its content and replace\n      clearMarkerContent(existing);\n      parent.replaceChild(rendered, existing);\n    } else {\n      disposeNode(existing);\n      parent.replaceChild(rendered, existing);\n    }\n    return;\n  }\n\n  // Text\n  if (typeof newVNode === 'string' || typeof newVNode === 'number' || typeof newVNode === 'boolean') {\n    const text = String(newVNode);\n    if (existing.nodeType === 3) {\n      if (existing.textContent !== text) existing.textContent = text;\n    } else {\n      removeLogicalNode(parent, existing);\n      parent.insertBefore(document.createTextNode(text), null);\n    }\n    return;\n  }\n\n  if (!newVNode.__tova) {\n    const text = String(newVNode);\n    if (existing.nodeType === 3) {\n      if (existing.textContent !== text) existing.textContent = text;\n    } else {\n      removeLogicalNode(parent, existing);\n      parent.insertBefore(document.createTextNode(text), null);\n    }\n    return;\n  }\n\n  // Fragment — patch marker content\n  if (newVNode.tag === '__fragment') {\n    if (existing.__tovaFragment) {\n      // Patch children within the marker range\n      const oldNodes = [...existing.__tovaNodes];\n      const newChildren = flattenVNodes(newVNode.children);\n      // Simple approach: clear and re-render fragment content\n      clearMarkerContent(existing);\n      const ref = nextSiblingAfterMarker(existing);\n      for (const child of newChildren) {\n        const rendered = render(child);\n        const inserted = insertRendered(parent, rendered, ref, existing);\n        existing.__tovaNodes.push(...inserted);\n      }\n      existing.__vnode = newVNode;\n      return;\n    }\n    removeLogicalNode(parent, existing);\n    parent.appendChild(render(newVNode));\n    return;\n  }\n\n  // Element — patch in place\n  if (existing.nodeType === 1 && newVNode.tag &&\n      existing.tagName.toLowerCase() === newVNode.tag.toLowerCase()) {\n    const oldVNode = existing.__vnode || { props: {}, children: [] };\n    applyProps(existing, newVNode.props, oldVNode.props);\n    patchChildrenOfElement(existing, flattenVNodes(newVNode.children));\n    existing.__vnode = newVNode;\n    return;\n  }\n\n  // Different type — full replace\n  removeLogicalNode(parent, existing);\n  parent.appendChild(render(newVNode));\n}\n\n// ─── Hydration (SSR) ─────────────────────────────────────\n// SSR renders flat HTML without markers. Hydration attaches reactivity\n// to existing DOM nodes and inserts markers for dynamic blocks.\n\n// Dev-mode hydration mismatch detection\nfunction checkHydrationMismatch(domNode, vnode) {\n  if (!__DEV__) return;\n  if (!domNode || !vnode || !vnode.__tova) return;\n\n  const props = vnode.props || {};\n\n  // Check className\n  if (props.className !== undefined) {\n    const expected = typeof props.className === 'function' ? props.className() : props.className;\n    const actual = domNode.className || '';\n    if (expected && actual !== expected) {\n      console.warn(`Tova hydration mismatch: <${vnode.tag}> class expected \"${expected}\" but got \"${actual}\"`);\n    }\n  }\n\n  // Check attributes\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'key' || key === 'ref' || key === 'className' || key.startsWith('on')) continue;\n    if (typeof value === 'function') continue; // reactive props — skip static check\n\n    if (domNode.getAttribute) {\n      const attrName = key === 'className' ? 'class' : key;\n      const actual = domNode.getAttribute(attrName);\n      const expected = String(value);\n      if (actual !== null && actual !== expected) {\n        console.warn(`Tova hydration mismatch: <${vnode.tag}> attribute \"${key}\" expected \"${expected}\" but got \"${actual}\"`);\n      }\n    }\n  }\n}\n\n// Check if a DOM node is an SSR marker comment (<!--tova-s:ID-->)\nfunction isSSRMarker(node) {\n  return node && node.nodeType === 8 && typeof node.data === 'string' && node.data.startsWith('tova-s:');\n}\n\n// Find the closing SSR marker and collect content nodes between them\nfunction collectSSRMarkerContent(startMarker) {\n  const id = startMarker.data.replace('tova-s:', '');\n  const closingText = `/tova-s:${id}`;\n  const content = [];\n  let cursor = startMarker.nextSibling;\n  while (cursor) {\n    if (cursor.nodeType === 8 && cursor.data === closingText) {\n      return { content, endMarker: cursor };\n    }\n    content.push(cursor);\n    cursor = cursor.nextSibling;\n  }\n  return { content, endMarker: null };\n}\n\nfunction hydrateVNode(domNode, vnode) {\n  if (!domNode) return null;\n  if (vnode === null || vnode === undefined) return domNode;\n\n  // Function vnode (reactive text, JSXIf, JSXFor)\n  if (typeof vnode === 'function') {\n    if (domNode.nodeType === 3) {\n      // Dev-mode: warn if text content differs\n      if (__DEV__) {\n        const val = vnode();\n        const expected = val == null ? '' : String(val);\n        if (domNode.textContent !== expected) {\n          console.warn(`Tova hydration mismatch: text expected \"${expected}\" but got \"${domNode.textContent}\"`);\n        }\n      }\n      // Reactive text: attach effect to existing text node\n      domNode.__tovaReactive = true;\n      createEffect(() => {\n        const val = vnode();\n        const text = val == null ? '' : String(val);\n        if (domNode.textContent !== text) domNode.textContent = text;\n      });\n      return domNode.nextSibling;\n    }\n    // Complex dynamic block: insert marker-based render, replace SSR node\n    const parent = domNode.parentNode;\n    const next = domNode.nextSibling;\n    const rendered = render(vnode);\n    parent.replaceChild(rendered, domNode);\n    return next;\n  }\n\n  // Primitive text — already correct from SSR\n  if (typeof vnode === 'string' || typeof vnode === 'number' || typeof vnode === 'boolean') {\n    if (__DEV__ && domNode.nodeType === 3) {\n      const expected = String(vnode);\n      if (domNode.textContent !== expected) {\n        console.warn(`Tova hydration mismatch: text expected \"${expected}\" but got \"${domNode.textContent}\"`);\n      }\n    }\n    return domNode.nextSibling;\n  }\n\n  // Array\n  if (Array.isArray(vnode)) {\n    let cursor = domNode;\n    for (const child of flattenVNodes(vnode)) {\n      if (!cursor) break;\n      cursor = hydrateVNode(cursor, child);\n    }\n    return cursor;\n  }\n\n  if (!vnode.__tova) return domNode.nextSibling;\n\n  // Fragment — children rendered inline in SSR (no wrapper)\n  if (vnode.tag === '__fragment') {\n    const children = flattenVNodes(vnode.children);\n    let cursor = domNode;\n    for (const child of children) {\n      if (!cursor) break;\n      cursor = hydrateVNode(cursor, child);\n    }\n    return cursor;\n  }\n\n  // Dynamic node — SSR marker-aware hydration\n  if (vnode.tag === '__dynamic' && typeof vnode.compute === 'function') {\n    // Check if current domNode is an SSR marker (<!--tova-s:ID-->)\n    if (isSSRMarker(domNode)) {\n      const { content, endMarker } = collectSSRMarkerContent(domNode);\n      const parent = domNode.parentNode;\n\n      // Remove SSR markers and content, replace with reactive marker\n      const afterEnd = endMarker ? endMarker.nextSibling : null;\n      for (const node of content) {\n        if (node.parentNode === parent) parent.removeChild(node);\n      }\n      if (endMarker && endMarker.parentNode === parent) parent.removeChild(endMarker);\n\n      const rendered = render(vnode);\n      parent.replaceChild(rendered, domNode);\n      return afterEnd;\n    }\n\n    // No SSR marker — fall back to standard behavior\n    const parent = domNode.parentNode;\n    const next = domNode.nextSibling;\n    const rendered = render(vnode);\n    parent.replaceChild(rendered, domNode);\n    return next;\n  }\n\n  // Element — attach event handlers, reactive props, refs\n  if (domNode.nodeType === 1 && domNode.tagName.toLowerCase() === vnode.tag.toLowerCase()) {\n    if (__DEV__) checkHydrationMismatch(domNode, vnode);\n    hydrateProps(domNode, vnode.props);\n    domNode.__vnode = vnode;\n\n    const children = flattenVNodes(vnode.children || []);\n    let cursor = domNode.firstChild;\n    for (const child of children) {\n      if (!cursor) break;\n      cursor = hydrateVNode(cursor, child);\n    }\n    return domNode.nextSibling;\n  }\n\n  // Tag mismatch — fall back to full render\n  if (__DEV__) {\n    const expectedTag = vnode.tag || '(unknown)';\n    const actualTag = domNode.tagName ? domNode.tagName.toLowerCase() : `nodeType:${domNode.nodeType}`;\n    console.warn(`Tova hydration mismatch: expected <${expectedTag}> but got <${actualTag}>, falling back to full render`);\n  }\n  const parent = domNode.parentNode;\n  const next = domNode.nextSibling;\n  const rendered = render(vnode);\n  parent.replaceChild(rendered, domNode);\n  return next;\n}\n\nfunction hydrateProps(el, props) {\n  for (const [key, value] of Object.entries(props)) {\n    if (key === 'ref') {\n      if (typeof value === 'object' && value !== null && 'current' in value) {\n        value.current = el;\n      } else if (typeof value === 'function') {\n        value(el);\n      }\n    } else if (key.startsWith('on')) {\n      const eventName = key.slice(2).toLowerCase();\n      if (typeof value === 'object' && value !== null && value.handler) {\n        el.addEventListener(eventName, value.handler, value.options);\n        if (!el.__handlers) el.__handlers = {};\n        el.__handlers[eventName] = value.handler;\n        el.__handlerOptions = el.__handlerOptions || {};\n        el.__handlerOptions[eventName] = value.options;\n      } else {\n        el.addEventListener(eventName, value);\n        if (!el.__handlers) el.__handlers = {};\n        el.__handlers[eventName] = value;\n      }\n    } else if (key === 'key') {\n      // Skip\n    } else if (typeof value === 'function' && !key.startsWith('on')) {\n      createEffect(() => {\n        const val = value();\n        applyPropValue(el, key, val);\n      });\n    }\n  }\n}\n\nexport function hydrate(component, container) {\n  if (!container) {\n    console.error('Tova: Hydration target not found');\n    return;\n  }\n\n  const startTime = typeof performance !== 'undefined' ? performance.now() : 0;\n\n  const result = createRoot(() => {\n    const vnode = typeof component === 'function' ? component() : component;\n    if (container.firstChild) {\n      hydrateVNode(container.firstChild, vnode);\n    }\n  });\n\n  // Dispatch hydration completion event\n  const duration = typeof performance !== 'undefined' ? performance.now() - startTime : 0;\n  if (typeof CustomEvent !== 'undefined' && typeof container.dispatchEvent === 'function') {\n    container.dispatchEvent(new CustomEvent('tova:hydrated', { detail: { duration }, bubbles: true }));\n  }\n\n  if (__devtools_hooks && __devtools_hooks.onHydrate) {\n    __devtools_hooks.onHydrate({ duration });\n  }\n\n  return result;\n}\n\nexport function mount(component, container) {\n  if (!container) {\n    console.error('Tova: Mount target not found');\n    return;\n  }\n\n  const result = createRoot((dispose) => {\n    const vnode = typeof component === 'function' ? component() : component;\n    if (typeof container.replaceChildren === 'function') {\n      container.replaceChildren();\n    } else {\n      while (container.firstChild) container.removeChild(container.firstChild);\n    }\n    container.appendChild(render(vnode));\n    return dispose;\n  });\n\n  if (__devtools_hooks && __devtools_hooks.onMount) {\n    __devtools_hooks.onMount();\n  }\n\n  return result;\n}\n\n// ─── Progressive Hydration ──────────────────────────────────\n// Hydrate a component only when it becomes visible in the viewport.\n\nexport function hydrateWhenVisible(component, domNode, options = {}) {\n  if (typeof IntersectionObserver === 'undefined') {\n    // Fallback: hydrate immediately\n    return hydrate(component, domNode);\n  }\n\n  const { rootMargin = '200px' } = options;\n  let hydrated = false;\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting && !hydrated) {\n          hydrated = true;\n          observer.disconnect();\n          hydrate(component, domNode);\n        }\n      }\n    },\n    { rootMargin },\n  );\n\n  observer.observe(domNode);\n\n  return () => {\n    observer.disconnect();\n  };\n}\n\n// ─── Form Handling ──────────────────────────────────────────\n// Reactive form primitives with field-level validation.\n// Usage:\n//   const form = createForm({\n//     fields: { email: { initial: '', validate: (v) => v.includes('@') ? null : 'Invalid email' } },\n//     onSubmit: async (values) => { await server.register(values); }\n//   });\n//   <input bind:value={form.field('email').value} />\n//   {form.field('email').error()}\n//   <button on:click={form.submit} disabled={form.submitting()}>Submit</button>\n\nexport function createForm({ fields = {}, onSubmit, validateOnChange = true, validateOnBlur = true }) {\n  const fieldSignals = {};\n  const errorSignals = {};\n  const touchedSignals = {};\n  const [submitting, setSubmitting] = createSignal(false);\n  const [submitError, setSubmitError] = createSignal(null);\n  const [submitCount, setSubmitCount] = createSignal(0);\n\n  // Initialize field signals\n  for (const [name, config] of Object.entries(fields)) {\n    const initial = config.initial !== undefined ? config.initial : '';\n    const [value, setValue] = createSignal(initial);\n    const [error, setError] = createSignal(null);\n    const [touched, setTouched] = createSignal(false);\n    fieldSignals[name] = { value, setValue, validate: config.validate || null, initial };\n    errorSignals[name] = { error, setError };\n    touchedSignals[name] = { touched, setTouched };\n  }\n\n  function validateField(name) {\n    const f = fieldSignals[name];\n    const e = errorSignals[name];\n    if (!f || !e || !f.validate) return null;\n    const err = f.validate(f.value());\n    e.setError(err);\n    return err;\n  }\n\n  function validateAll() {\n    let hasErrors = false;\n    for (const name of Object.keys(fieldSignals)) {\n      const err = validateField(name);\n      if (err) hasErrors = true;\n    }\n    return !hasErrors;\n  }\n\n  function field(name) {\n    const f = fieldSignals[name];\n    const e = errorSignals[name];\n    const t = touchedSignals[name];\n    if (!f) throw new Error(`Tova form: unknown field \"${name}\"`);\n    return {\n      value: f.value,\n      error: e.error,\n      touched: t.touched,\n      set(val) {\n        f.setValue(val);\n        if (validateOnChange && t.touched()) validateField(name);\n      },\n      blur() {\n        t.setTouched(true);\n        if (validateOnBlur) validateField(name);\n      },\n      validate() { return validateField(name); },\n    };\n  }\n\n  function values() {\n    const result = {};\n    for (const [name, f] of Object.entries(fieldSignals)) {\n      result[name] = f.value();\n    }\n    return result;\n  }\n\n  function reset() {\n    for (const [name, f] of Object.entries(fieldSignals)) {\n      f.setValue(f.initial);\n      errorSignals[name].setError(null);\n      touchedSignals[name].setTouched(false);\n    }\n    setSubmitError(null);\n  }\n\n  async function submit(e) {\n    if (e && typeof e.preventDefault === 'function') e.preventDefault();\n    // Touch all fields\n    for (const name of Object.keys(touchedSignals)) {\n      touchedSignals[name].setTouched(true);\n    }\n    if (!validateAll()) return;\n    if (!onSubmit) return;\n    setSubmitting(true);\n    setSubmitError(null);\n    setSubmitCount(c => c + 1);\n    try {\n      await onSubmit(values());\n    } catch (err) {\n      setSubmitError(err);\n    } finally {\n      setSubmitting(false);\n    }\n  }\n\n  const isValid = createComputed(() => {\n    for (const name of Object.keys(errorSignals)) {\n      if (errorSignals[name].error()) return false;\n    }\n    return true;\n  });\n\n  const isDirty = createComputed(() => {\n    for (const [name, f] of Object.entries(fieldSignals)) {\n      if (f.value() !== f.initial) return true;\n    }\n    return false;\n  });\n\n  return {\n    field,\n    values,\n    reset,\n    submit,\n    submitting,\n    submitError,\n    submitCount,\n    isValid,\n    isDirty,\n    validate: validateAll,\n  };\n}\n";
 
 export const RPC_SOURCE = "// RPC bridge — client calls to server functions are auto-routed via HTTP\n// Includes CSRF protection, request timeouts, and interceptor middleware.\n\n// ─── Configuration ────────────────────────────────────────\n\nconst _config = {\n  base: typeof window !== 'undefined' ? (window.__TOVA_RPC_BASE || '') : 'http://localhost:3000',\n  timeout: 30000, // 30s default timeout\n  csrfHeader: 'X-Tova-CSRF',\n  csrfToken: null, // auto-detected from meta tag or set manually\n  credentials: 'same-origin', // fetch credentials mode\n};\n\n// Interceptor chains — each is { request?: fn, response?: fn, error?: fn }\nconst _interceptors = [];\n\n// ─── CSRF Token Management ────────────────────────────────\n\nfunction getCSRFToken() {\n  if (_config.csrfToken) return _config.csrfToken;\n  // Auto-detect from <meta name=\"csrf-token\" content=\"...\"> (server-rendered)\n  if (typeof document !== 'undefined') {\n    const meta = document.querySelector('meta[name=\"csrf-token\"]');\n    if (meta) {\n      _config.csrfToken = meta.getAttribute('content');\n      return _config.csrfToken;\n    }\n  }\n  return null;\n}\n\n// ─── Core RPC Function ────────────────────────────────────\n\nexport async function rpc(functionName, args = []) {\n  const url = `${_config.base}/rpc/${functionName}`;\n\n  // Convert positional args to object if needed\n  let body;\n  if (args.length === 1 && typeof args[0] === 'object' && !Array.isArray(args[0])) {\n    body = args[0];\n  } else if (args.length > 0) {\n    body = { __args: args };\n  } else {\n    body = {};\n  }\n\n  // Build headers\n  const headers = { 'Content-Type': 'application/json' };\n  let csrf = getCSRFToken();\n  if (!csrf && _csrfReadyPromise) {\n    await _csrfReadyPromise;\n    csrf = getCSRFToken();\n  }\n  if (csrf) {\n    headers[_config.csrfHeader] = csrf;\n  }\n\n  // Build request options\n  let requestOptions = {\n    method: 'POST',\n    headers,\n    body: JSON.stringify(body),\n    credentials: _config.credentials,\n  };\n\n  // Run request interceptors\n  for (const interceptor of _interceptors) {\n    if (interceptor.request) {\n      const result = interceptor.request({ url, functionName, args, options: requestOptions });\n      if (result && typeof result === 'object') {\n        requestOptions = { ...requestOptions, ...result };\n      }\n    }\n  }\n\n  // AbortController for timeout\n  const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;\n  if (controller) {\n    requestOptions.signal = controller.signal;\n  }\n  const timeoutId = controller && _config.timeout > 0\n    ? setTimeout(() => controller.abort(), _config.timeout)\n    : null;\n\n  try {\n    const response = await fetch(url, requestOptions);\n\n    if (timeoutId) clearTimeout(timeoutId);\n\n    if (!response.ok) {\n      const errorText = await response.text();\n      const err = new Error(`RPC call to '${functionName}' failed: ${response.status} ${errorText}`);\n      err.status = response.status;\n      err.functionName = functionName;\n\n      // Run error interceptors\n      for (const interceptor of _interceptors) {\n        if (interceptor.error) {\n          const handled = interceptor.error(err, { url, functionName, args, response });\n          if (handled === false) return undefined; // Interceptor suppressed the error\n        }\n      }\n\n      throw err;\n    }\n\n    let data = await response.json();\n\n    // Run response interceptors\n    for (const interceptor of _interceptors) {\n      if (interceptor.response) {\n        const transformed = interceptor.response(data, { url, functionName, args, response });\n        if (transformed !== undefined) data = transformed;\n      }\n    }\n\n    return data.result;\n  } catch (error) {\n    if (timeoutId) clearTimeout(timeoutId);\n\n    // Wrap AbortError as timeout\n    if (error.name === 'AbortError') {\n      const err = new Error(`RPC call to '${functionName}' timed out after ${_config.timeout}ms`);\n      err.code = 'TIMEOUT';\n      err.functionName = functionName;\n\n      for (const interceptor of _interceptors) {\n        if (interceptor.error) {\n          const handled = interceptor.error(err, { url, functionName, args });\n          if (handled === false) return undefined;\n        }\n      }\n\n      throw err;\n    }\n\n    if (error.message && error.message.includes('RPC call')) throw error;\n    throw new Error(`RPC call to '${functionName}' failed: ${error.message}`);\n  }\n}\n\n// ─── Configuration API ────────────────────────────────────\n\nexport function configureRPC(options) {\n  if (typeof options === 'string') {\n    // Backward compat: configureRPC('http://...')\n    _config.base = options;\n    if (typeof window !== 'undefined') window.__TOVA_RPC_BASE = options;\n    return;\n  }\n  if (options.baseUrl !== undefined) {\n    _config.base = options.baseUrl;\n    if (typeof window !== 'undefined') window.__TOVA_RPC_BASE = options.baseUrl;\n  }\n  if (options.timeout !== undefined) _config.timeout = options.timeout;\n  if (options.csrfToken !== undefined) _config.csrfToken = options.csrfToken;\n  if (options.csrfHeader !== undefined) _config.csrfHeader = options.csrfHeader;\n  if (options.credentials !== undefined) _config.credentials = options.credentials;\n}\n\n// ─── Interceptor API ──────────────────────────────────────\n// Usage:\n//   const unsub = addRPCInterceptor({\n//     request({ url, functionName, args, options }) {\n//       options.headers['Authorization'] = 'Bearer ' + token;\n//       return options;\n//     },\n//     response(data, { functionName }) { ... },\n//     error(err, { functionName }) { ... },\n//   });\n//   unsub(); // remove interceptor\n\nexport function addRPCInterceptor(interceptor) {\n  _interceptors.push(interceptor);\n  return () => {\n    const idx = _interceptors.indexOf(interceptor);\n    if (idx !== -1) _interceptors.splice(idx, 1);\n  };\n}\n\n// ─── Set CSRF Token ───────────────────────────────────────\n\nexport function setCSRFToken(token) {\n  _config.csrfToken = token;\n}\n\n// ─── CSRF Ready Promise ──────────────────────────────────\n// When auth is enabled, the CSRF token fetch is async. Store the promise\n// so rpc() can await it before the first request if no token is available yet.\n\nlet _csrfReadyPromise = null;\n\nexport function setCsrfReady(promise) {\n  _csrfReadyPromise = promise;\n}\n";
 

package/src/runtime/reactivity.js

@@ -365,6 +365,7 @@ export function createComputed(fn) {
 export function onMount(fn) {
   const owner = currentOwner;
   queueMicrotask(() => {
+    if (owner && owner._disposed) return;
     const result = fn();
     if (typeof result === 'function' && owner && !owner._disposed) {
       owner._cleanups.push(result);

package/src/stdlib/core.js

@@ -82,11 +82,21 @@ export function flat_map(arr, fn) {
 }
 
 export function min(arr) {
-  return Math.min(...arr);
+  if (!arr || arr.length === 0) return null;
+  let m = arr[0];
+  for (let i = 1; i < arr.length; i++) {
+    if (arr[i] < m) m = arr[i];
+  }
+  return m;
 }
 
 export function max(arr) {
-  return Math.max(...arr);
+  if (!arr || arr.length === 0) return null;
+  let m = arr[0];
+  for (let i = 1; i < arr.length; i++) {
+    if (arr[i] > m) m = arr[i];
+  }
+  return m;
 }
 
 export function any(arr, fn) {

package/src/stdlib/inline.js

@@ -113,7 +113,7 @@ export const BUILTIN_FUNCTIONS = {
   unique: `function unique(arr) { return [...new Set(arr)]; }`,
   group_by: `function group_by(arr, fn) { const r = {}; for (const v of arr) { const k = fn(v); if (!r[k]) r[k] = []; r[k].push(v); } return r; }`,
   chunk: `function chunk(arr, n) { const r = []; for (let i = 0; i < arr.length; i += n) r.push(arr.slice(i, i + n)); return r; }`,
-  flatten: `function flatten(arr) { return arr.flat(); }`,
+  flatten: `function flatten(arr) { return arr.flat(Infinity); }`,
   take: `function take(arr, n) { return arr.slice(0, n); }`,
   drop: `function drop(arr, n) { return arr.slice(n); }`,
   first: `function first(arr) { return arr.length > 0 ? arr[0] : null; }`,
@@ -520,7 +520,7 @@ Table.prototype = { get rows() { return this._rows.length; }, get columns() { re
   compose: `function compose(...fns) { return (x) => fns.reduceRight((v, fn) => fn(v), x); }`,
   pipe_fn: `function pipe_fn(...fns) { return (x) => fns.reduce((v, fn) => fn(v), x); }`,
   identity: `function identity(x) { return x; }`,
-  memoize: `function memoize(fn) { const cache = new Map(); return function(...args) { const key = JSON.stringify(args); if (cache.has(key)) return cache.get(key); const result = fn.apply(this, args); cache.set(key, result); return result; }; }`,
+  memoize: `function memoize(fn) { const cache = new Map(); const keys = []; const maxSize = 1000; return function(...args) { const key = JSON.stringify(args); if (cache.has(key)) return cache.get(key); const result = fn.apply(this, args); if (cache.size >= maxSize) { const oldest = keys.shift(); cache.delete(oldest); } cache.set(key, result); keys.push(key); return result; }; }`,
   debounce: `function debounce(fn, ms) { let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), ms); }; }`,
   throttle: `function throttle(fn, ms) { let last = 0; return function(...args) { const now = Date.now(); if (now - last >= ms) { last = now; return fn.apply(this, args); } }; }`,
   once: `function once(fn) { let called = false, result; return function(...args) { if (!called) { called = true; result = fn.apply(this, args); } return result; }; }`,
@@ -561,7 +561,7 @@ Table.prototype = { get rows() { return this._rows.length; }, get columns() { re
 
   // ── Regex (with compiled regex cache) ─────────────────
   __regex_cache: `const __reCache = new Map(); function __re(p, f) { const k = p + '\\0' + (f || ''); let r = __reCache.get(k); if (!r) { r = new RegExp(p, f); __reCache.set(k, r); if (__reCache.size > 1000) { const first = __reCache.keys().next().value; __reCache.delete(first); } } return r; }`,
-  regex_test: `function regex_test(s, pattern, flags) { return __re(pattern, flags).test(s); }`,
+  regex_test: `function regex_test(s, pattern, flags) { const r = __re(pattern, flags); r.lastIndex = 0; return r.test(s); }`,
   regex_match: `function regex_match(s, pattern, flags) { const m = s.match(__re(pattern, flags)); if (!m) return Err('No match'); return Ok({ match: m[0], index: m.index, groups: m.slice(1) }); }`,
   regex_find_all: `function regex_find_all(s, pattern, flags) { const re = __re(pattern, (flags || '') + (flags && flags.includes('g') ? '' : 'g')); const results = []; let m; re.lastIndex = 0; while ((m = re.exec(s)) !== null) { results.push({ match: m[0], index: m.index, groups: m.slice(1) }); } return results; }`,
   regex_replace: `function regex_replace(s, pattern, replacement, flags) { return s.replace(__re(pattern, flags || 'g'), replacement); }`,

package/src/stdlib/math.js

@@ -36,7 +36,7 @@ export function factorial(n) { if (n < 0) return null; if (n <= 1) return 1; let
 
 export function hypot(a, b) { return Math.hypot(a, b); }
 export function lerp(a, b, t) { return a + (b - a) * t; }
-export function divmod(a, b) { return [Math.floor(a / b), a % b]; }
+export function divmod(a, b) { const q = Math.floor(a / b); return [q, a - q * b]; }
 export function avg(arr) { return arr.length === 0 ? 0 : arr.reduce((a, b) => a + b, 0) / arr.length; }
 
 // ── Statistics ────────────────────────────────────────────

package/src/version.js

@@ -1,2 +1,2 @@
 // Auto-generated by scripts/embed-runtime.js — do not edit
-export const VERSION = "0.9.11";
+export const VERSION = "0.9.13";