tova 0.1.1 → 0.2.2

package/src/runtime/devtools.js

@@ -0,0 +1,228 @@
+// Tova DevTools — opt-in development tooling
+// Zero-cost when not enabled: all hooks gate on a single boolean check.
+
+import { __enableDevTools } from './reactivity.js';
+
+// ─── Registries ─────────────────────────────────────────────
+
+let nextId = 1;
+
+// Component registry: Map<id, { name, props, renderCount, totalRenderTime, domNode }>
+const componentRegistry = new Map();
+
+// Signal registry: Map<id, { name, getter, setter, subscriberCount }>
+const signalRegistry = new Map();
+
+// Effect registry: Map<id, { executionCount, totalTime, lastTime, deps }>
+const effectRegistry = new Map();
+
+// ─── Performance data ────────────────────────────────────────
+
+const perfData = {
+  renders: [],   // { timestamp, duration, componentId, componentName }
+  effects: [],   // { timestamp, duration, effectId }
+  signals: [],   // { timestamp, signalId, name, oldValue, newValue }
+};
+
+// ─── DevTools hooks (wired into reactivity.js) ───────────────
+
+const hooks = {
+  onSignalCreate(getter, setter, name) {
+    const id = nextId++;
+    const entry = { id, name: name || `signal_${id}`, getter, setter, subscriberCount: 0 };
+    signalRegistry.set(id, entry);
+    return id;
+  },
+
+  onSignalUpdate(id, oldValue, newValue) {
+    const entry = signalRegistry.get(id);
+    if (entry) {
+      perfData.signals.push({
+        timestamp: typeof performance !== 'undefined' ? performance.now() : Date.now(),
+        signalId: id,
+        name: entry.name,
+        oldValue,
+        newValue,
+      });
+    }
+  },
+
+  onEffectCreate(effect) {
+    const id = nextId++;
+    effectRegistry.set(id, {
+      id,
+      executionCount: 0,
+      totalTime: 0,
+      lastTime: 0,
+      deps: [],
+    });
+    effect.__devtools_id = id;
+    return id;
+  },
+
+  onEffectRun(effect, duration) {
+    const id = effect.__devtools_id;
+    if (id == null) return;
+    const entry = effectRegistry.get(id);
+    if (entry) {
+      entry.executionCount++;
+      entry.totalTime += duration;
+      entry.lastTime = duration;
+      perfData.effects.push({
+        timestamp: typeof performance !== 'undefined' ? performance.now() : Date.now(),
+        duration,
+        effectId: id,
+      });
+    }
+  },
+
+  onComponentRender(name, domNode, duration) {
+    let existing = null;
+    for (const [, comp] of componentRegistry) {
+      if (comp.name === name && comp.domNode === domNode) {
+        existing = comp;
+        break;
+      }
+    }
+
+    if (existing) {
+      existing.renderCount++;
+      existing.totalRenderTime += duration;
+    } else {
+      const id = nextId++;
+      componentRegistry.set(id, {
+        id,
+        name,
+        props: null,
+        renderCount: 1,
+        totalRenderTime: duration,
+        domNode,
+      });
+    }
+
+    perfData.renders.push({
+      timestamp: typeof performance !== 'undefined' ? performance.now() : Date.now(),
+      duration,
+      componentName: name,
+    });
+  },
+
+  onMount() {},
+  onHydrate(info) {},
+};
+
+// ─── Public API exposed on window ────────────────────────────
+
+function getComponentTree() {
+  const tree = [];
+  for (const [id, comp] of componentRegistry) {
+    tree.push({
+      id,
+      name: comp.name,
+      renderCount: comp.renderCount,
+      totalRenderTime: comp.totalRenderTime,
+    });
+  }
+  return tree;
+}
+
+function getSignal(id) {
+  const entry = signalRegistry.get(id);
+  if (!entry) return undefined;
+  return { id: entry.id, name: entry.name, value: entry.getter() };
+}
+
+function setSignal(id, value) {
+  const entry = signalRegistry.get(id);
+  if (!entry) return false;
+  entry.setter(value);
+  return true;
+}
+
+function getOwnershipTree() {
+  // Walk component registry to build a flat representation
+  const tree = [];
+  for (const [id, comp] of componentRegistry) {
+    tree.push({ id, name: comp.name, renderCount: comp.renderCount });
+  }
+  return tree;
+}
+
+function perfSummary() {
+  const totalRenders = perfData.renders.length;
+  const totalRenderTime = perfData.renders.reduce((s, r) => s + r.duration, 0);
+  const totalEffects = perfData.effects.length;
+  const totalEffectTime = perfData.effects.reduce((s, e) => s + e.duration, 0);
+  const totalSignalUpdates = perfData.signals.length;
+
+  return {
+    totalRenders,
+    totalRenderTime,
+    avgRenderTime: totalRenders ? totalRenderTime / totalRenders : 0,
+    totalEffects,
+    totalEffectTime,
+    avgEffectTime: totalEffects ? totalEffectTime / totalEffects : 0,
+    totalSignalUpdates,
+  };
+}
+
+function clearPerf() {
+  perfData.renders.length = 0;
+  perfData.effects.length = 0;
+  perfData.signals.length = 0;
+
+  for (const [, entry] of effectRegistry) {
+    entry.executionCount = 0;
+    entry.totalTime = 0;
+    entry.lastTime = 0;
+  }
+}
+
+// ─── Init ─────────────────────────────────────────────────
+
+export function initDevTools() {
+  // Wire hooks into the reactivity system
+  __enableDevTools(hooks);
+
+  // Expose on window for console access
+  if (typeof window !== 'undefined') {
+    window.__TOVA_DEVTOOLS__ = {
+      components: componentRegistry,
+      getComponentTree,
+      signals: signalRegistry,
+      getSignal,
+      setSignal,
+      effects: effectRegistry,
+      getOwnershipTree,
+    };
+
+    window.__TOVA_PERF__ = {
+      renders: perfData.renders,
+      effects: perfData.effects,
+      signals: perfData.signals,
+      summary: perfSummary,
+      clear: clearPerf,
+    };
+  }
+
+  return {
+    components: componentRegistry,
+    getComponentTree,
+    signals: signalRegistry,
+    getSignal,
+    setSignal,
+    effects: effectRegistry,
+    getOwnershipTree,
+    perf: {
+      renders: perfData.renders,
+      effects: perfData.effects,
+      signals: perfData.signals,
+      summary: perfSummary,
+      clear: clearPerf,
+    },
+  };
+}
+
+// ─── Exported for testing ─────────────────────────────────
+
+export { hooks as __devtools_hooks_internal };

package/src/runtime/embedded.js

@@ -1,8 +1,10 @@
 // Auto-generated by scripts/embed-runtime.js — do not edit
 
-export const REACTIVITY_SOURCE = "// Fine-grained reactivity system for Tova (signals-based)\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\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      const toRun = [...pendingEffects];\n      pendingEffects.clear();\n      for (const effect of toRun) {\n        if (!effect._disposed) {\n          effect();\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\n      for (let i = root._children.length - 1; i >= 0; i--) {\n        const child = root._children[i];\n        if (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) {\n  let value = initialValue;\n  const subscribers = new Set();\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      value = newValue;\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    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      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\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    // Remove from owner's children\n    if (effect._owner) {\n      const idx = effect._owner._children.indexOf(effect);\n      if (idx >= 0) effect._owner._children.splice(idx, 1);\n    }\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      for (const sub of [...subscribers]) {\n        if (sub._isComputed) {\n          sub(); // cascade dirty flags synchronously\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    if (notify._owner) {\n      const idx = notify._owner._children.indexOf(notify);\n      if (idx >= 0) notify._owner._children.splice(idx, 1);\n    }\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    } 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\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      callback(newValue, oldValue);\n    } else if (options.immediate) {\n      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\nlet currentErrorHandler = null;\n\nexport function createErrorBoundary() {\n  const [error, setError] = createSignal(null);\n\n  function run(fn) {\n    const prev = currentErrorHandler;\n    currentErrorHandler = (e) => setError(e);\n    try {\n      return fn();\n    } catch (e) {\n      setError(e);\n      return null;\n    } finally {\n      currentErrorHandler = prev;\n    }\n  }\n\n  function reset() {\n    setError(null);\n  }\n\n  return { error, run, reset };\n}\n\nexport function ErrorBoundary({ fallback, children }) {\n  const [error, setError] = createSignal(null);\n\n  const prev = currentErrorHandler;\n  currentErrorHandler = (e) => setError(e);\n\n  // Return a reactive wrapper that switches between children and fallback\n  // The __tova_dynamic marker tells the renderer to create an effect for this node\n  const childContent = children && children.length === 1 ? children[0] : tova_fragment(children || []);\n\n  currentErrorHandler = prev;\n\n  return {\n    __tova: true,\n    tag: '__dynamic',\n    props: {},\n    children: [],\n    compute: () => {\n      const err = error();\n      if (err) {\n        return typeof fallback === 'function'\n          ? fallback({ error: err, reset: () => setError(null) })\n          : fallback;\n      }\n      return childContent;\n    },\n  };\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\nexport function Portal({ target, children }) {\n  return {\n    __tova: true,\n    tag: '__portal',\n    props: { target },\n    children: children || [],\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 promise = null;\n\n  return function LazyWrapper(props) {\n    if (resolved) {\n      return resolved(props);\n    }\n\n    const [comp, setComp] = createSignal(null);\n    const [err, setErr] = createSignal(null);\n\n    if (!promise) {\n      promise = loader()\n        .then(mod => {\n          resolved = mod.default || mod;\n          setComp(() => resolved);\n        })\n        .catch(e => setErr(e));\n    }\n\n    return {\n      __tova: true,\n      tag: '__dynamic',\n      props: {},\n      children: [],\n      compute: () => {\n        const e = err();\n        if (e) return tova_el('span', { className: 'tova-error' }, [String(e)]);\n        const c = comp();\n        if (c) return c(props);\n        // Fallback while loading\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// ─── DOM Rendering ────────────────────────────────────────\n\n// Inject scoped CSS into the page (idempotent — only injects once per id)\nconst __tovaInjectedStyles = new Set();\nexport function tova_inject_css(id, css) {\n  if (__tovaInjectedStyles.has(id)) return;\n  __tovaInjectedStyles.add(id);\n  const style = document.createElement('style');\n  style.setAttribute('data-tova-style', id);\n  style.textContent = css;\n  document.head.appendChild(style);\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// 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    disposeNode(node);\n    if (node.parentNode) node.parentNode.removeChild(node);\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    createEffect(() => {\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    });\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    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          targetEl.appendChild(render(child));\n        }\n      }\n    });\n    return placeholder;\n  }\n\n  // Element\n  const el = document.createElement(vnode.tag);\n  applyReactiveProps(el, vnode.props);\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  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      el.addEventListener(eventName, value);\n      if (!el.__handlers) el.__handlers = {};\n      el.__handlers[eventName] = value;\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 === 'innerHTML' || key === 'dangerouslySetInnerHTML') {\n    const html = typeof val === 'object' && val !== null ? val.__html || '' : val || '';\n    if (el.innerHTML !== html) el.innerHTML = html;\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    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      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    } 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// ─── 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  // Arrange in correct order after marker using cursor approach\n  let cursor = marker.nextSibling;\n  for (const node of newNodes) {\n    if (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\n  const patchCount = Math.min(oldCount, newCount);\n  for (let i = 0; i < patchCount; i++) {\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, Math.max(newCount, oldCount > newCount ? newCount : oldNodes.length));\n  // Simplify: rebuild __tovaNodes from what should remain\n  if (newCount <= oldCount) {\n    marker.__tovaNodes = oldNodes.slice(0, newCount);\n  }\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  // Arrange in correct order\n  for (let i = 0; i < newNodes.length; i++) {\n    const expected = newNodes[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// 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\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      // 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    // rendered is a DocumentFragment — its children are now in parent\n    // Find the next unprocessed node\n    return next;\n  }\n\n  // Primitive text — already correct from SSR\n  if (typeof vnode === 'string' || typeof vnode === 'number' || typeof vnode === 'boolean') {\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 — replace SSR content with reactive marker\n  if (vnode.tag === '__dynamic' && typeof vnode.compute === 'function') {\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    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  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      el.addEventListener(eventName, value);\n      if (!el.__handlers) el.__handlers = {};\n      el.__handlers[eventName] = value;\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  return createRoot(() => {\n    const vnode = typeof component === 'function' ? component() : component;\n    if (container.firstChild) {\n      hydrateVNode(container.firstChild, vnode);\n    }\n  });\n}\n\nexport function mount(component, container) {\n  if (!container) {\n    console.error('Tova: Mount target not found');\n    return;\n  }\n\n  return createRoot((dispose) => {\n    const vnode = typeof component === 'function' ? component() : component;\n    container.innerHTML = '';\n    container.appendChild(render(vnode));\n    return dispose;\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\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      const toRun = [...pendingEffects];\n      pendingEffects.clear();\n      for (const effect of toRun) {\n        if (!effect._disposed) {\n          effect();\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\n      for (let i = root._children.length - 1; i >= 0; i--) {\n        const child = root._children[i];\n        if (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\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    // Remove from owner's children\n    if (effect._owner) {\n      const idx = effect._owner._children.indexOf(effect);\n      if (idx >= 0) effect._owner._children.splice(idx, 1);\n    }\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      for (const sub of [...subscribers]) {\n        if (sub._isComputed) {\n          sub(); // cascade dirty flags synchronously\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    if (notify._owner) {\n      const idx = notify._owner._children.indexOf(notify);\n      if (idx >= 0) notify._owner._children.splice(idx, 1);\n    }\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    } 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\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      callback(newValue, oldValue);\n    } else if (options.immediate) {\n      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\nexport function ErrorBoundary({ fallback, children, onError, onReset, retry = 0 }) {\n  const [error, setError] = createSignal(null);\n  const [retryCount, setRetryCount] = createSignal(0);\n\n  function handleError(e) {\n    const stack = buildComponentStack();\n    if (e && typeof e === 'object') e.__tovaComponentStack = stack;\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 });\n  }\n\n  pushErrorHandler(handleError);\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  popErrorHandler();\n\n  const vnode = {\n    __tova: true,\n    tag: '__dynamic',\n    props: {},\n    children: [],\n    _fallback: fallback,\n    _componentName: 'ErrorBoundary',\n    compute: () => {\n      const err = error();\n      if (err) {\n        // Render fallback — if fallback itself throws, propagate to parent boundary\n        try {\n          return typeof fallback === 'function'\n            ? fallback({\n                error: err,\n                reset: () => {\n                  setRetryCount(0);\n                  setError(null);\n                  if (onReset) onReset();\n                },\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      return childContent;\n    },\n  };\n\n  return vnode;\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\nexport function Portal({ target, children }) {\n  return {\n    __tova: true,\n    tag: '__portal',\n    props: { target },\n    children: children || [],\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 promise = null;\n\n  return function LazyWrapper(props) {\n    if (resolved) {\n      return resolved(props);\n    }\n\n    const [comp, setComp] = createSignal(null);\n    const [err, setErr] = createSignal(null);\n\n    if (!promise) {\n      promise = loader()\n        .then(mod => {\n          resolved = mod.default || mod;\n          setComp(() => resolved);\n        })\n        .catch(e => setErr(e));\n    }\n\n    return {\n      __tova: true,\n      tag: '__dynamic',\n      props: {},\n      children: [],\n      compute: () => {\n        const e = err();\n        if (e) return tova_el('span', { className: 'tova-error' }, [String(e)]);\n        const c = comp();\n        if (c) return c(props);\n        // Fallback while loading\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// ─── DOM Rendering ────────────────────────────────────────\n\n// Inject scoped CSS into the page (idempotent — only injects once per id)\nconst __tovaInjectedStyles = new Set();\nexport function tova_inject_css(id, css) {\n  if (__tovaInjectedStyles.has(id)) return;\n  __tovaInjectedStyles.add(id);\n  const style = document.createElement('style');\n  style.setAttribute('data-tova-style', id);\n  style.textContent = css;\n  document.head.appendChild(style);\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// 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    disposeNode(node);\n    if (node.parentNode) node.parentNode.removeChild(node);\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    createEffect(() => {\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    });\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    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          targetEl.appendChild(render(child));\n        }\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  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      el.addEventListener(eventName, value);\n      if (!el.__handlers) el.__handlers = {};\n      el.__handlers[eventName] = value;\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 === 'innerHTML' || key === 'dangerouslySetInnerHTML') {\n    const html = typeof val === 'object' && val !== null ? val.__html || '' : val || '';\n    if (el.innerHTML !== html) el.innerHTML = html;\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    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      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    } 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// ─── 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  // Arrange in correct order after marker using cursor approach\n  let cursor = marker.nextSibling;\n  for (const node of newNodes) {\n    if (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\n  const patchCount = Math.min(oldCount, newCount);\n  for (let i = 0; i < patchCount; i++) {\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, Math.max(newCount, oldCount > newCount ? newCount : oldNodes.length));\n  // Simplify: rebuild __tovaNodes from what should remain\n  if (newCount <= oldCount) {\n    marker.__tovaNodes = oldNodes.slice(0, newCount);\n  }\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  // Arrange in correct order\n  for (let i = 0; i < newNodes.length; i++) {\n    const expected = newNodes[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// 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      el.addEventListener(eventName, value);\n      if (!el.__handlers) el.__handlers = {};\n      el.__handlers[eventName] = value;\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    container.innerHTML = '';\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";
 
 export const RPC_SOURCE = "// RPC bridge — client calls to server functions are auto-routed via HTTP\n\nconst RPC_BASE = typeof window !== 'undefined'\n  ? (window.__TOVA_RPC_BASE || '')\n  : 'http://localhost:3000';\n\nexport async function rpc(functionName, args = []) {\n  const url = `${RPC_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    // Send as array, server will handle positional mapping\n    body = { __args: args };\n  } else {\n    body = {};\n  }\n\n  try {\n    const response = await fetch(url, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(body),\n    });\n\n    if (!response.ok) {\n      const errorText = await response.text();\n      throw new Error(`RPC call to '${functionName}' failed: ${response.status} ${errorText}`);\n    }\n\n    const data = await response.json();\n    return data.result;\n  } catch (error) {\n    if (error.message.includes('RPC call')) throw error;\n    throw new Error(`RPC call to '${functionName}' failed: ${error.message}`);\n  }\n}\n\n// Configure RPC base URL\nexport function configureRPC(baseUrl) {\n  if (typeof window !== 'undefined') {\n    window.__TOVA_RPC_BASE = baseUrl;\n  }\n}\n";
 
 export const ROUTER_SOURCE = "// Client-side router for Tova — integrated with the signal system\n// Route changes are reactive: components that read route() or params() auto-update.\n\nimport { createSignal, tova_el } from './reactivity.js';\n\n// ─── Route Signal ─────────────────────────────────────────\n// The route is a signal, so any component/effect that reads it\n// will automatically re-run when the route changes.\n\nconst [route, setRoute] = createSignal({\n  path: '/',\n  pattern: null,\n  component: null,\n  params: {},\n  query: {},\n});\n\nlet routeDefinitions = [];\nlet routeChangeCallbacks = [];\nlet notFoundComponent = null;\n\n// ─── Public API ───────────────────────────────────────────\n\nexport function defineRoutes(routeMap) {\n  routeDefinitions = Object.entries(routeMap).map(([path, component]) => {\n    // Special 404 route\n    if (path === '404' || path === '*') {\n      notFoundComponent = component;\n      // Catch-all '*' still gets a regex pattern for matching\n      if (path === '*') {\n        return { path, pattern: /^(.*)$/, component, isCatchAll: true };\n      }\n      return null;\n    }\n    return {\n      path,\n      pattern: pathToRegex(path),\n      component,\n      isCatchAll: false,\n    };\n  }).filter(Boolean);\n  // Match initial route\n  handleRouteChange();\n}\n\nexport function navigate(path) {\n  if (typeof window !== 'undefined') {\n    window.history.pushState({}, '', path);\n    handleRouteChange();\n  }\n}\n\nexport function getCurrentRoute() {\n  return route;  // returns the signal getter\n}\n\nexport function getParams() {\n  return () => route().params;\n}\n\nexport function getPath() {\n  return () => route().path;\n}\n\nexport function getQuery() {\n  return () => route().query;\n}\n\n// Legacy callback API (still works alongside signals)\nexport function onRouteChange(callback) {\n  routeChangeCallbacks.push(callback);\n}\n\n// ─── Router Component ─────────────────────────────────────\n// Renders the matched route's component reactively.\n// Usage: <Router /> in JSX\n\nexport function Router() {\n  const r = route();\n  if (r && r.component) {\n    return typeof r.component === 'function' ? r.component(r.params) : r.component;\n  }\n  return null;\n}\n\n// ─── Link Component ───────────────────────────────────────\n// Client-side navigation link.\n// Usage: <Link href=\"/about\">\"About\"</Link>\n\nexport function Link({ href, children, ...rest }) {\n  return tova_el('a', {\n    href,\n    onClick: (e) => {\n      e.preventDefault();\n      navigate(href);\n    },\n    ...rest,\n  }, children || []);\n}\n\n// ─── Redirect Component ──────────────────────────────────\n// Immediately navigates to a different path when rendered.\n// Usage: <Redirect to=\"/login\" />\n\nexport function Redirect({ to }) {\n  if (typeof window !== 'undefined') {\n    queueMicrotask(() => navigate(to));\n  }\n  return null;\n}\n\n// ─── Internals ────────────────────────────────────────────\n\nfunction parseQueryString(search) {\n  const query = {};\n  if (!search || search === '?') return query;\n  const str = search.startsWith('?') ? search.slice(1) : search;\n  for (const pair of str.split('&')) {\n    const [key, ...rest] = pair.split('=');\n    const value = rest.join('=');\n    if (key) {\n      query[decodeURIComponent(key)] = value !== undefined ? decodeURIComponent(value) : '';\n    }\n  }\n  return query;\n}\n\nfunction handleRouteChange() {\n  let path = '/';\n  let query = {};\n  if (typeof window !== 'undefined') {\n    path = window.location.pathname;\n    query = parseQueryString(window.location.search);\n  }\n\n  const matched = matchRoute(path);\n\n  if (matched) {\n    setRoute({ ...matched, query });\n  } else if (notFoundComponent) {\n    setRoute({ path, pattern: null, component: notFoundComponent, params: {}, query });\n  } else {\n    setRoute({ path, pattern: null, component: null, params: {}, query });\n  }\n\n  for (const cb of routeChangeCallbacks) {\n    cb(matched);\n  }\n}\n\nfunction matchRoute(path) {\n  for (const def of routeDefinitions) {\n    const match = def.pattern.exec(path);\n    if (match) {\n      const params = extractParams(def.path, match);\n      return { path: def.path, component: def.component, params };\n    }\n  }\n  return null;\n}\n\nfunction pathToRegex(path) {\n  // Handle optional parameters: :id? becomes ([^/]+)?\n  // Handle required parameters: :id becomes ([^/]+)\n  // Handle catch-all: * becomes (.*)\n  const pattern = path\n    .replace(/:([a-zA-Z_]+)\\?/g, '([^/]*)?')   // optional params\n    .replace(/:([a-zA-Z_]+)/g, '([^/]+)')        // required params\n    .replace(/\\*/g, '(.*)');                       // catch-all\n  return new RegExp(`^${pattern}$`);\n}\n\nfunction extractParams(routePath, match) {\n  const params = {};\n  // Match both required (:name) and optional (:name?) params\n  const paramNames = (routePath.match(/:([a-zA-Z_]+)\\??/g) || [])\n    .map(p => p.replace(/^:/, '').replace(/\\?$/, ''));\n  paramNames.forEach((name, index) => {\n    const val = match[index + 1];\n    if (val !== undefined && val !== '') {\n      params[name] = val;\n    }\n  });\n  return params;\n}\n\n// ─── Browser Init ─────────────────────────────────────────\n\nif (typeof window !== 'undefined') {\n  window.addEventListener('popstate', handleRouteChange);\n\n  // Intercept link clicks for client-side navigation\n  document.addEventListener('click', (e) => {\n    const link = e.target.closest('a[href]');\n    if (link && link.href.startsWith(window.location.origin)) {\n      e.preventDefault();\n      navigate(link.getAttribute('href'));\n    }\n  });\n}\n";
 
+export const DEVTOOLS_SOURCE = "// Tova DevTools — opt-in development tooling\n// Zero-cost when not enabled: all hooks gate on a single boolean check.\n\nimport { __enableDevTools } from './reactivity.js';\n\n// ─── Registries ─────────────────────────────────────────────\n\nlet nextId = 1;\n\n// Component registry: Map<id, { name, props, renderCount, totalRenderTime, domNode }>\nconst componentRegistry = new Map();\n\n// Signal registry: Map<id, { name, getter, setter, subscriberCount }>\nconst signalRegistry = new Map();\n\n// Effect registry: Map<id, { executionCount, totalTime, lastTime, deps }>\nconst effectRegistry = new Map();\n\n// ─── Performance data ────────────────────────────────────────\n\nconst perfData = {\n  renders: [],   // { timestamp, duration, componentId, componentName }\n  effects: [],   // { timestamp, duration, effectId }\n  signals: [],   // { timestamp, signalId, name, oldValue, newValue }\n};\n\n// ─── DevTools hooks (wired into reactivity.js) ───────────────\n\nconst hooks = {\n  onSignalCreate(getter, setter, name) {\n    const id = nextId++;\n    const entry = { id, name: name || `signal_${id}`, getter, setter, subscriberCount: 0 };\n    signalRegistry.set(id, entry);\n    return id;\n  },\n\n  onSignalUpdate(id, oldValue, newValue) {\n    const entry = signalRegistry.get(id);\n    if (entry) {\n      perfData.signals.push({\n        timestamp: typeof performance !== 'undefined' ? performance.now() : Date.now(),\n        signalId: id,\n        name: entry.name,\n        oldValue,\n        newValue,\n      });\n    }\n  },\n\n  onEffectCreate(effect) {\n    const id = nextId++;\n    effectRegistry.set(id, {\n      id,\n      executionCount: 0,\n      totalTime: 0,\n      lastTime: 0,\n      deps: [],\n    });\n    effect.__devtools_id = id;\n    return id;\n  },\n\n  onEffectRun(effect, duration) {\n    const id = effect.__devtools_id;\n    if (id == null) return;\n    const entry = effectRegistry.get(id);\n    if (entry) {\n      entry.executionCount++;\n      entry.totalTime += duration;\n      entry.lastTime = duration;\n      perfData.effects.push({\n        timestamp: typeof performance !== 'undefined' ? performance.now() : Date.now(),\n        duration,\n        effectId: id,\n      });\n    }\n  },\n\n  onComponentRender(name, domNode, duration) {\n    let existing = null;\n    for (const [, comp] of componentRegistry) {\n      if (comp.name === name && comp.domNode === domNode) {\n        existing = comp;\n        break;\n      }\n    }\n\n    if (existing) {\n      existing.renderCount++;\n      existing.totalRenderTime += duration;\n    } else {\n      const id = nextId++;\n      componentRegistry.set(id, {\n        id,\n        name,\n        props: null,\n        renderCount: 1,\n        totalRenderTime: duration,\n        domNode,\n      });\n    }\n\n    perfData.renders.push({\n      timestamp: typeof performance !== 'undefined' ? performance.now() : Date.now(),\n      duration,\n      componentName: name,\n    });\n  },\n\n  onMount() {},\n  onHydrate(info) {},\n};\n\n// ─── Public API exposed on window ────────────────────────────\n\nfunction getComponentTree() {\n  const tree = [];\n  for (const [id, comp] of componentRegistry) {\n    tree.push({\n      id,\n      name: comp.name,\n      renderCount: comp.renderCount,\n      totalRenderTime: comp.totalRenderTime,\n    });\n  }\n  return tree;\n}\n\nfunction getSignal(id) {\n  const entry = signalRegistry.get(id);\n  if (!entry) return undefined;\n  return { id: entry.id, name: entry.name, value: entry.getter() };\n}\n\nfunction setSignal(id, value) {\n  const entry = signalRegistry.get(id);\n  if (!entry) return false;\n  entry.setter(value);\n  return true;\n}\n\nfunction getOwnershipTree() {\n  // Walk component registry to build a flat representation\n  const tree = [];\n  for (const [id, comp] of componentRegistry) {\n    tree.push({ id, name: comp.name, renderCount: comp.renderCount });\n  }\n  return tree;\n}\n\nfunction perfSummary() {\n  const totalRenders = perfData.renders.length;\n  const totalRenderTime = perfData.renders.reduce((s, r) => s + r.duration, 0);\n  const totalEffects = perfData.effects.length;\n  const totalEffectTime = perfData.effects.reduce((s, e) => s + e.duration, 0);\n  const totalSignalUpdates = perfData.signals.length;\n\n  return {\n    totalRenders,\n    totalRenderTime,\n    avgRenderTime: totalRenders ? totalRenderTime / totalRenders : 0,\n    totalEffects,\n    totalEffectTime,\n    avgEffectTime: totalEffects ? totalEffectTime / totalEffects : 0,\n    totalSignalUpdates,\n  };\n}\n\nfunction clearPerf() {\n  perfData.renders.length = 0;\n  perfData.effects.length = 0;\n  perfData.signals.length = 0;\n\n  for (const [, entry] of effectRegistry) {\n    entry.executionCount = 0;\n    entry.totalTime = 0;\n    entry.lastTime = 0;\n  }\n}\n\n// ─── Init ─────────────────────────────────────────────────\n\nexport function initDevTools() {\n  // Wire hooks into the reactivity system\n  __enableDevTools(hooks);\n\n  // Expose on window for console access\n  if (typeof window !== 'undefined') {\n    window.__TOVA_DEVTOOLS__ = {\n      components: componentRegistry,\n      getComponentTree,\n      signals: signalRegistry,\n      getSignal,\n      setSignal,\n      effects: effectRegistry,\n      getOwnershipTree,\n    };\n\n    window.__TOVA_PERF__ = {\n      renders: perfData.renders,\n      effects: perfData.effects,\n      signals: perfData.signals,\n      summary: perfSummary,\n      clear: clearPerf,\n    };\n  }\n\n  return {\n    components: componentRegistry,\n    getComponentTree,\n    signals: signalRegistry,\n    getSignal,\n    setSignal,\n    effects: effectRegistry,\n    getOwnershipTree,\n    perf: {\n      renders: perfData.renders,\n      effects: perfData.effects,\n      signals: perfData.signals,\n      summary: perfSummary,\n      clear: clearPerf,\n    },\n  };\n}\n\n// ─── Exported for testing ─────────────────────────────────\n\nexport { hooks as __devtools_hooks_internal };\n";
+