{"version":3,"file":"eleva.cjs","sources":["../src/modules/TemplateEngine.js","../src/modules/Signal.js","../src/modules/Emitter.js","../src/modules/Renderer.js","../src/core/Eleva.js"],"sourcesContent":["\"use strict\";\n\n/**\n * @module eleva/template-engine\n * @fileoverview Expression evaluator for directive attributes and property bindings.\n */\n\n// ============================================================================\n// TYPE DEFINITIONS\n// ============================================================================\n\n// -----------------------------------------------------------------------------\n// Data Types\n// -----------------------------------------------------------------------------\n\n/**\n * Data context object for expression evaluation.\n * @typedef {Record} ContextData\n * @description Contains variables and functions available during template evaluation.\n */\n\n/**\n * JavaScript expression string to be evaluated.\n * @typedef {string} Expression\n * @description A JavaScript expression evaluated against a ContextData object.\n */\n\n/**\n * Result of evaluating an expression.\n * @typedef {unknown} EvaluationResult\n * @description Can be string, number, boolean, object, function, or any JavaScript value.\n */\n\n// -----------------------------------------------------------------------------\n// Function Types\n// -----------------------------------------------------------------------------\n\n/**\n * Compiled expression function cached for performance.\n * @typedef {(data: ContextData) => EvaluationResult} CompiledExpressionFunction\n * @description Pre-compiled function that evaluates an expression against context data.\n */\n\n/**\n * @class 🔒 TemplateEngine\n * @classdesc A minimal expression evaluator for Eleva's directive attributes.\n * Evaluates JavaScript expressions against a component's context data.\n * Used internally for `@event` handlers and `:prop` bindings.\n *\n * All methods are static and can be called directly on the class.\n *\n * @example\n * // Property access\n * TemplateEngine.evaluate(\"user.name\", { user: { name: \"John\" } });\n * // Result: \"John\"\n *\n * @example\n * // Function reference (for @event handlers)\n * TemplateEngine.evaluate(\"handleClick\", { handleClick: () => console.log(\"clicked\") });\n * // Result: [Function]\n *\n * @example\n * // Signal values (for :prop bindings)\n * TemplateEngine.evaluate(\"count.value\", { count: { value: 42 } });\n * // Result: 42\n *\n * @example\n * // Complex expressions\n * TemplateEngine.evaluate(\"items.filter(i => i.active)\", { items: [{active: true}, {active: false}] });\n * // Result: [{active: true}]\n */\nexport class TemplateEngine {\n /**\n * Cache for compiled expression functions.\n * Stores compiled Function objects keyed by expression string for O(1) lookup.\n * The cache persists for the application lifetime and is never cleared.\n * This improves performance for repeated evaluations of the same expression.\n *\n * Memory consideration: For applications with highly dynamic expressions\n * (e.g., user-generated), memory usage grows unbounded. This is typically\n * not an issue for static templates where expressions are finite.\n *\n * @static\n * @private\n * @type {Map}\n */\n static _cache = new Map();\n\n /**\n * Evaluates an expression in the context of the provided data object.\n * Used for resolving `@event` handlers and `:prop` bindings.\n * Non-string expressions are returned as-is.\n *\n * @security CRITICAL SECURITY WARNING\n * This method is NOT sandboxed. It uses `new Function()` and `with` statement,\n * allowing full access to the global scope. Potential attack vectors include:\n * - Code injection via malicious expressions\n * - XSS attacks if user input is used as expressions\n * - Access to sensitive globals (window, document, fetch, etc.)\n *\n * ONLY use with developer-defined template strings.\n * NEVER use with user-provided input or untrusted data.\n *\n * Mitigation strategies:\n * - Always sanitize any user-generated content before rendering in templates\n * - Use Content Security Policy (CSP) headers to restrict script execution\n * - Keep expressions simple (property access, method calls) - avoid complex logic\n *\n * @public\n * @static\n * @param {Expression | unknown} expression - The expression to evaluate.\n * @param {ContextData} data - The data context for evaluation.\n * @returns {EvaluationResult} The result of the evaluation, or empty string if evaluation fails.\n * @note Evaluation failures return an empty string without throwing.\n *\n * @example\n * // Property access\n * TemplateEngine.evaluate(\"user.name\", { user: { name: \"John\" } });\n * // Result: \"John\"\n *\n * @example\n * // Function reference\n * TemplateEngine.evaluate(\"increment\", { increment: () => count++ });\n * // Result: [Function]\n *\n * @example\n * // Nested property with Signal\n * TemplateEngine.evaluate(\"count.value\", { count: { value: 42 } });\n * // Result: 42\n *\n * @example\n * // Object reference (no JSON.stringify needed)\n * TemplateEngine.evaluate(\"user\", { user: { name: \"John\", age: 30 } });\n * // Result: { name: \"John\", age: 30 }\n *\n * @example\n * // Expressions\n * TemplateEngine.evaluate(\"items.length > 0\", { items: [1, 2, 3] });\n * // Result: true\n *\n * @example\n * // Failed evaluation returns empty string\n * TemplateEngine.evaluate(\"nonexistent.property\", {});\n * // Result: \"\"\n */\n static evaluate(expression, data) {\n if (typeof expression !== \"string\") return expression;\n if (!expression.trim()) return \"\";\n\n let fn = this._cache.get(expression);\n if (!fn) {\n try {\n fn = new Function(\"data\", `with(data) { return ${expression}; }`);\n this._cache.set(expression, fn);\n } catch {\n return \"\";\n }\n }\n try {\n return fn(data);\n } catch {\n return \"\";\n }\n }\n}\n","\"use strict\";\n\n/**\n * @module eleva/signal\n * @fileoverview Reactive Signal primitive for fine-grained state management and change notification.\n */\n\n// ============================================================================\n// TYPE DEFINITIONS\n// ============================================================================\n\n// -----------------------------------------------------------------------------\n// Callback Types\n// -----------------------------------------------------------------------------\n\n/**\n * Callback function invoked when a signal's value changes.\n * @template T The type of value held by the signal.\n * @callback SignalWatcher\n * @param {T} value\n * The new value of the signal.\n * @returns {void}\n */\n\n/**\n * Function to unsubscribe a watcher from a signal.\n * @callback SignalUnsubscribe\n * @returns {boolean}\n * True if the watcher was successfully removed, false if already removed.\n * Safe to call multiple times (idempotent).\n */\n\n// -----------------------------------------------------------------------------\n// Interface Types\n// -----------------------------------------------------------------------------\n\n/**\n * Interface describing the public API of a Signal.\n * @template T The type of value held by the signal.\n * @typedef {Object} SignalLike\n * @property {T} value\n * The current value of the signal.\n * @property {function(SignalWatcher): SignalUnsubscribe} watch\n * Subscribe to value changes.\n */\n\n/**\n * @class ⚡ Signal\n * @classdesc A reactive data holder that enables fine-grained reactivity in the Eleva framework.\n * Signals notify registered watchers synchronously when their value changes, enabling efficient\n * DOM updates through targeted patching rather than full re-renders.\n * Synchronous notification preserves stack traces and allows immediate value inspection.\n * Render batching is handled at the component level, not the signal level.\n * The class is generic, allowing type-safe handling of any value type T.\n *\n * @template T The type of value held by the signal.\n *\n * @example\n * // Basic usage\n * const count = new Signal(0);\n * count.watch((value) => console.log(`Count changed to: ${value}`));\n * count.value = 1; // Logs: \"Count changed to: 1\"\n *\n * @example\n * // With unsubscribe\n * const name = new Signal(\"John\");\n * const unsubscribe = name.watch((value) => console.log(value));\n * name.value = \"Jane\"; // Logs: \"Jane\"\n * unsubscribe(); // Stop watching\n * name.value = \"Bob\"; // No log output\n *\n * @example\n * // With objects\n * const position = new Signal({ x: 0, y: 0 });\n * position.value = { x: 10, y: 20 }; // Triggers watchers\n *\n * @implements {SignalLike}\n */\nexport class Signal {\n /**\n * Creates a new Signal instance with the specified initial value.\n *\n * @public\n * @constructor\n * @param {T} value - The initial value of the signal.\n *\n * @example\n * // Primitive types\n * const count = new Signal(0); // Signal\n * const name = new Signal(\"John\"); // Signal\n * const active = new Signal(true); // Signal\n *\n * @example\n * // Complex types\n * const items = new Signal([]); // Signal holding an array\n * const user = new Signal(null); // Signal holding nullable object\n */\n constructor(value) {\n /**\n * Internal storage for the signal's current value.\n * @private\n * @type {T}\n */\n this._value = value;\n /**\n * Collection of callback functions to be notified when value changes.\n * @private\n * @type {Set>}\n */\n this._watchers = new Set();\n }\n\n /**\n * Gets the current value of the signal.\n *\n * @public\n * @returns {T} The current value.\n */\n get value() {\n return this._value;\n }\n\n /**\n * Sets a new value for the signal and synchronously notifies all registered watchers if the value has changed.\n * Synchronous notification preserves stack traces and ensures immediate value consistency.\n *\n * Uses strict equality (===) for comparison. For objects/arrays, watchers are only notified\n * if the reference changes, not if properties are mutated. To trigger updates with objects,\n * assign a new reference: `signal.value = { ...signal.value, updated: true }`.\n *\n * @public\n * @param {T} newVal - The new value to set.\n * @returns {void}\n */\n set value(newVal) {\n if (this._value !== newVal) {\n this._value = newVal;\n this._notify();\n }\n }\n\n /**\n * Registers a watcher function that will be called whenever the signal's value changes.\n * The watcher will receive the new value as its argument.\n *\n * @public\n * @param {SignalWatcher} fn - The callback function to invoke on value change.\n * @returns {SignalUnsubscribe} A function to unsubscribe the watcher.\n * Returns true if watcher was removed, false if it wasn't registered.\n * Safe to call multiple times (idempotent after first call).\n *\n * @example\n * // Basic watching\n * const unsubscribe = signal.watch((value) => console.log(value));\n *\n * @example\n * // Stop watching\n * unsubscribe(); // Returns true if watcher was removed\n * unsubscribe(); // Returns false (already removed, safe to call again)\n *\n * @example\n * // Multiple watchers\n * const unsub1 = signal.watch((v) => console.log(\"Watcher 1:\", v));\n * const unsub2 = signal.watch((v) => console.log(\"Watcher 2:\", v));\n * signal.value = \"test\"; // Both watchers are called\n */\n watch(fn) {\n this._watchers.add(fn);\n return () => this._watchers.delete(fn);\n }\n\n /**\n * Synchronously notifies all registered watchers of the value change.\n * This preserves stack traces for debugging and ensures immediate\n * value consistency. Render batching is handled at the component level.\n *\n * @note If a watcher throws, subsequent watchers are NOT called.\n * The error propagates to the caller (the setter).\n *\n * @private\n * @returns {void}\n */\n _notify() {\n for (const fn of this._watchers) fn(this._value);\n }\n}\n","\"use strict\";\n\n/**\n * @module eleva/emitter\n * @fileoverview Event emitter for publish-subscribe communication between components.\n */\n\n// ============================================================================\n// TYPE DEFINITIONS\n// ============================================================================\n\n// -----------------------------------------------------------------------------\n// Callback Types\n// -----------------------------------------------------------------------------\n\n/**\n * Callback function invoked when an event is emitted.\n * @callback EventHandler\n * @param {...any} args\n * Event arguments passed to the handler.\n * @returns {void | Promise}\n */\n\n/**\n * Function to unsubscribe an event handler.\n * @callback EventUnsubscribe\n * @returns {void}\n */\n\n// -----------------------------------------------------------------------------\n// Event Types\n// -----------------------------------------------------------------------------\n\n/**\n * Event name string identifier.\n * @typedef {string} EventName\n * @description\n * Recommended convention: 'namespace:action' (e.g., 'user:login').\n * This pattern prevents naming collisions and improves code readability.\n *\n * Common namespaces:\n * - `user:` - User-related events (login, logout, update)\n * - `component:` - Component lifecycle events (mount, unmount)\n * - `router:` - Navigation events (beforeEach, afterEach)\n * - `store:` - State management events (change, error)\n * @example\n * 'user:login' // User logged in\n * 'cart:update' // Shopping cart updated\n * 'component:mount' // Component was mounted\n */\n\n// -----------------------------------------------------------------------------\n// Interface Types\n// -----------------------------------------------------------------------------\n\n/**\n * Interface describing the public API of an Emitter.\n * @typedef {Object} EmitterLike\n * @property {(event: string, handler: EventHandler) => EventUnsubscribe} on\n * Subscribe to an event.\n * @property {(event: string, handler?: EventHandler) => void} off\n * Unsubscribe from an event.\n * @property {(event: string, ...args: unknown[]) => void} emit\n * Emit an event with arguments.\n */\n\n/**\n * @class 📡 Emitter\n * @classdesc A robust event emitter that enables inter-component communication through a publish-subscribe pattern.\n * Components can emit events and listen for events from other components, facilitating loose coupling\n * and reactive updates across the application.\n * Events are handled synchronously in the order they were registered, with proper cleanup\n * of unsubscribed handlers.\n *\n * Event names should follow the format 'namespace:action' for consistency and organization.\n *\n * @example\n * // Basic usage\n * const emitter = new Emitter();\n * emitter.on('user:login', (user) => console.log(`User logged in: ${user.name}`));\n * emitter.emit('user:login', { name: 'John' }); // Logs: \"User logged in: John\"\n *\n * @example\n * // With unsubscribe\n * const unsub = emitter.on('cart:update', (items) => {\n * console.log(`Cart has ${items.length} items`);\n * });\n * emitter.emit('cart:update', [{ id: 1, name: 'Book' }]); // Logs: \"Cart has 1 items\"\n * unsub(); // Stop listening\n * emitter.emit('cart:update', []); // No log output\n *\n * @example\n * // Multiple arguments\n * emitter.on('order:placed', (orderId, amount, currency) => {\n * console.log(`Order ${orderId}: ${amount} ${currency}`);\n * });\n * emitter.emit('order:placed', 'ORD-123', 99.99, 'USD');\n *\n * @example\n * // Common event patterns\n * // Lifecycle events\n * emitter.on('component:mount', (component) => {});\n * emitter.on('component:unmount', (component) => {});\n * // Note: These lifecycle names are conventions; Eleva core does not emit them by default.\n * // State events\n * emitter.on('state:change', (newState, oldState) => {});\n * // Navigation events\n * emitter.on('router:navigate', (to, from) => {});\n *\n * @implements {EmitterLike}\n */\nexport class Emitter {\n /**\n * Creates a new Emitter instance with an empty event registry.\n *\n * @public\n * @constructor\n *\n * @example\n * const emitter = new Emitter();\n */\n constructor() {\n /**\n * Map of event names to their registered handler functions\n * @private\n * @type {Map>}\n */\n this._events = new Map();\n }\n\n /**\n * Registers an event handler for the specified event name.\n * The handler will be called with the event data when the event is emitted.\n * Event names should follow the format 'namespace:action' for consistency.\n *\n * @public\n * @param {string} event - The name of the event to listen for (e.g., 'user:login').\n * @param {EventHandler} handler - The callback function to invoke when the event occurs.\n * Note: Handlers returning Promises are NOT awaited. For async operations,\n * handle promise resolution within your handler.\n * @returns {EventUnsubscribe} A function to unsubscribe the event handler.\n *\n * @example\n * // Basic subscription\n * const unsubscribe = emitter.on('user:login', (user) => console.log(user));\n *\n * @example\n * // Handler with typed parameter\n * emitter.on('user:update', (user) => {\n * console.log(`User ${user.id}: ${user.name}`);\n * });\n *\n * @example\n * // Cleanup\n * unsubscribe(); // Stops listening for the event\n */\n on(event, handler) {\n let h = this._events.get(event);\n if (!h) this._events.set(event, (h = new Set()));\n h.add(handler);\n return () => this.off(event, handler);\n }\n\n /**\n * Removes an event handler for the specified event name.\n * Automatically cleans up empty event sets to prevent memory leaks.\n *\n * Behavior varies based on whether handler is provided:\n * - With handler: Removes only that specific handler function (O(1) Set deletion)\n * - Without handler: Removes ALL handlers for the event (O(1) Map deletion)\n *\n * @public\n * @param {string} event - The name of the event to remove handlers from.\n * @param {EventHandler} [handler] - The specific handler to remove. If omitted, all handlers are removed.\n * @returns {void}\n *\n * @example\n * // Remove a specific handler\n * const loginHandler = (user) => console.log(user);\n * emitter.on('user:login', loginHandler);\n * emitter.off('user:login', loginHandler);\n *\n * @example\n * // Remove all handlers for an event\n * emitter.off('user:login');\n */\n off(event, handler) {\n if (!this._events.has(event)) return;\n if (handler) {\n const handlers = this._events.get(event);\n handlers.delete(handler);\n if (handlers.size === 0) this._events.delete(event);\n } else {\n this._events.delete(event);\n }\n }\n\n /**\n * Emits an event with the specified data to all registered handlers.\n * Handlers are called synchronously in the order they were registered.\n * If no handlers are registered for the event, the emission is silently ignored.\n * Handlers that return promises are not awaited.\n *\n * Error propagation behavior:\n * - If a handler throws synchronously, the error propagates immediately\n * - Remaining handlers in the iteration are NOT called after an error\n * - For error-resilient emission, wrap your emit call in try/catch\n * - Async handler rejections are not caught (fire-and-forget)\n *\n * @public\n * @param {string} event - The name of the event to emit.\n * @param {...any} args - Optional arguments to pass to the event handlers.\n * @returns {void}\n * @throws {Error} If a handler throws synchronously, the error propagates to the caller.\n *\n * @example\n * // Emit an event with data\n * emitter.emit('user:login', { name: 'John', role: 'admin' });\n *\n * @example\n * // Emit an event with multiple arguments\n * emitter.emit('order:placed', 'ORD-123', 99.99, 'USD');\n *\n * @example\n * // Emit without data\n * emitter.emit('app:ready');\n */\n emit(event, ...args) {\n const handlers = this._events.get(event);\n if (handlers) for (const handler of handlers) handler(...args);\n }\n}\n","\"use strict\";\n\n/**\n * @module eleva/renderer\n * @fileoverview High-performance DOM renderer with two-pointer diffing and keyed reconciliation.\n */\n\n// ============================================================================\n// TYPE DEFINITIONS\n// ============================================================================\n\n// -----------------------------------------------------------------------------\n// Data Types\n// -----------------------------------------------------------------------------\n\n/**\n * Map of key attribute values to their corresponding DOM nodes.\n * @typedef {Map} KeyMap\n * @description Enables O(1) lookup for keyed element reconciliation.\n */\n\n// -----------------------------------------------------------------------------\n// Interface Types\n// -----------------------------------------------------------------------------\n\n/**\n * Interface describing the public API of a Renderer.\n * @typedef {Object} RendererLike\n * @property {function(HTMLElement, string): void} patchDOM\n * Patches the DOM with new HTML content.\n * @description\n * Plugins may extend renderer behavior by wrapping private methods (e.g., `_patchNode`),\n * but those hooks are not part of the public API.\n */\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\n/**\n * Properties that can diverge from attributes after user interaction.\n * These are synchronized during DOM patching to ensure element state\n * matches the rendered HTML attributes.\n *\n * - `value`: Text input, textarea, select element values\n * - `checked`: Checkbox and radio button states\n * - `selected`: Option element selection states\n *\n * @private\n * @type {string[]}\n */\nconst SYNC_PROPS = [\"value\", \"checked\", \"selected\"];\n\n/**\n * @class 🎨 Renderer\n * @classdesc A high-performance DOM renderer that implements an optimized two-pointer diffing\n * algorithm with key-based node reconciliation. The renderer efficiently updates the DOM by\n * computing the minimal set of operations needed to transform the current state to the desired state.\n *\n * Key features:\n * - Two-pointer diffing algorithm for efficient DOM updates\n * - Key-based node reconciliation for optimal list performance (O(1) lookup)\n * - Preserves DOM node identity during reordering (maintains event listeners, focus, animations)\n * - Intelligent attribute synchronization (skips Eleva event attributes)\n * - Preservation of Eleva-managed component instances and style elements\n *\n * @example\n * // Basic usage\n * const renderer = new Renderer();\n * renderer.patchDOM(container, '
Updated content
');\n *\n * @example\n * // With keyed elements for optimal list updates\n * const html = items.map(item => `
  • ${item.name}
    • `).join('');\n * renderer.patchDOM(listContainer, `
      ${html}
    `);\n *\n * @example\n * // Keyed elements preserve DOM identity during reordering\n * // Before: [A, B, C] -> After: [C, A, B]\n * // The actual DOM nodes are moved, not recreated\n * renderer.patchDOM(container, '
    C
    A
    B
    ');\n *\n * @implements {RendererLike}\n */\nexport class Renderer {\n /**\n * Creates a new Renderer instance.\n * Initializes a reusable temporary container for HTML parsing.\n *\n * Performance: The temp container is reused across all patch operations,\n * minimizing memory allocation overhead (O(1) memory per Renderer instance).\n *\n * @public\n * @constructor\n *\n * @example\n * const renderer = new Renderer();\n */\n constructor() {\n /**\n * Temporary container for parsing new HTML content.\n * Reused across patch operations to minimize memory allocation.\n * @private\n * @type {HTMLDivElement}\n */\n this._tempContainer = document.createElement(\"div\");\n }\n\n /**\n * Patches the DOM of the given container with the provided HTML string.\n * Uses an optimized two-pointer diffing algorithm to minimize DOM operations.\n * The algorithm computes the minimal set of insertions, deletions, and updates\n * needed to transform the current DOM state to match the new HTML.\n *\n * @public\n * @param {HTMLElement} container - The container element to patch.\n * @param {string} newHtml - The new HTML string to render.\n * @returns {void}\n *\n * @example\n * // Simple content update\n * renderer.patchDOM(container, '
    New content
    ');\n *\n * @example\n * // List with keyed items (optimal for reordering)\n * renderer.patchDOM(container, '
    • First
    • Second
    ');\n *\n * @example\n * // Empty the container\n * renderer.patchDOM(container, '');\n *\n * @see _diff - Low-level diffing algorithm.\n * @see _patchNode - Individual node patching.\n */\n patchDOM(container, newHtml) {\n this._tempContainer.innerHTML = newHtml;\n this._diff(container, this._tempContainer);\n // Clear tempContainer to release cloned source nodes for garbage collection.\n this._tempContainer.innerHTML = \"\";\n }\n\n /**\n * Performs a diff between two DOM nodes and patches the old node to match the new node.\n * Uses a two-pointer algorithm with key-based reconciliation for optimal performance.\n * This method modifies oldParent in-place - it is not a pure function.\n *\n * Algorithm details:\n * 1. Early exit if both nodes have no children (O(1) leaf node optimization)\n * 2. Convert NodeLists to arrays for indexed access\n * 3. Initialize two-pointer indices (oldStart/oldEnd, newStart/newEnd)\n * 4. While pointers haven't crossed:\n * a. Skip null entries (from previous moves)\n * b. If nodes match (same key+tag or same type+name): patch and advance\n * c. On mismatch: lazily build key→node map for O(1) lookup\n * d. If keyed match found: move existing node (preserves DOM identity)\n * e. Otherwise: clone and insert new node\n * 5. After loop: append remaining new nodes or remove remaining old nodes\n *\n * Complexity: O(n) for most cases, O(n²) worst case with no keys.\n * Non-keyed elements are matched by position and tag name.\n *\n * @private\n * @param {Element} oldParent - The original DOM element to update (modified in-place).\n * @param {Element} newParent - The new DOM element with desired state.\n * @returns {void}\n */\n _diff(oldParent, newParent) {\n // Early exit for leaf nodes (no children)\n if (!oldParent.firstChild && !newParent.firstChild) return;\n\n const oldChildren = Array.from(oldParent.childNodes);\n const newChildren = Array.from(newParent.childNodes);\n let oldStart = 0,\n newStart = 0;\n let oldEnd = oldChildren.length - 1;\n let newEnd = newChildren.length - 1;\n let keyMap = null;\n\n // Two-pointer algorithm with key-based reconciliation\n while (oldStart <= oldEnd && newStart <= newEnd) {\n const oldNode = oldChildren[oldStart];\n const newNode = newChildren[newStart];\n\n if (!oldNode) {\n oldStart++;\n continue;\n }\n\n if (this._isSameNode(oldNode, newNode)) {\n this._patchNode(oldNode, newNode);\n oldStart++;\n newStart++;\n } else {\n // Build key map lazily for O(1) lookup\n if (!keyMap) {\n keyMap = this._createKeyMap(oldChildren, oldStart, oldEnd);\n }\n\n const key = this._getNodeKey(newNode);\n const matchedNode = key ? keyMap.get(key) : null;\n\n // Only use matched node if tag also matches\n if (matchedNode && matchedNode.nodeName === newNode.nodeName) {\n // Move existing keyed node (preserves DOM identity)\n this._patchNode(matchedNode, newNode);\n oldParent.insertBefore(matchedNode, oldNode);\n oldChildren[oldChildren.indexOf(matchedNode)] = null;\n } else {\n // Insert new node\n oldParent.insertBefore(newNode.cloneNode(true), oldNode);\n }\n newStart++;\n }\n }\n\n // Add remaining new nodes\n if (oldStart > oldEnd) {\n const refNode = newChildren[newEnd + 1] ? oldChildren[oldStart] : null;\n for (let i = newStart; i <= newEnd; i++) {\n if (newChildren[i]) {\n oldParent.insertBefore(newChildren[i].cloneNode(true), refNode);\n }\n }\n }\n // Remove remaining old nodes\n else if (newStart > newEnd) {\n for (let i = oldStart; i <= oldEnd; i++) {\n if (oldChildren[i]) this._removeNode(oldParent, oldChildren[i]);\n }\n }\n }\n\n /**\n * Patches a single node, updating its content and attributes to match the new node.\n * Handles text nodes (nodeType 3 / Node.TEXT_NODE) by updating nodeValue,\n * and element nodes (nodeType 1 / Node.ELEMENT_NODE) by updating attributes\n * and recursively diffing children.\n *\n * Skips nodes that are managed by Eleva component instances to prevent interference\n * with nested component state.\n *\n * @private\n * @param {Node} oldNode - The original DOM node to update.\n * @param {Node} newNode - The new DOM node with desired state.\n * @returns {void}\n */\n _patchNode(oldNode, newNode) {\n // Skip nodes managed by Eleva component instances\n if (oldNode._eleva_instance) return;\n\n if (oldNode.nodeType === 3) {\n if (oldNode.nodeValue !== newNode.nodeValue) {\n oldNode.nodeValue = newNode.nodeValue;\n }\n } else if (oldNode.nodeType === 1) {\n this._updateAttributes(oldNode, newNode);\n this._diff(oldNode, newNode);\n }\n }\n\n /**\n * Removes a node from its parent, with special handling for Eleva-managed elements.\n * Style elements with the `data-e-style` attribute are preserved to maintain\n * component styles across re-renders. Without this protection, component styles\n * would be removed during DOM diffing and lost until the next full re-render.\n *\n * @note Style tags persist for the component's entire lifecycle. If the template\n * conditionally removes elements that the CSS rules target (e.g., `.foo` elements),\n * the style rules remain but simply have no matching elements. This is expected\n * behavior - styles are cleaned up when the component unmounts, not when individual\n * elements are removed.\n *\n * @private\n * @param {HTMLElement} parent - The parent element containing the node.\n * @param {Node} node - The node to remove.\n * @returns {void}\n * @see _injectStyles - Where data-e-style elements are created.\n */\n _removeNode(parent, node) {\n // Preserve Eleva-managed style elements\n if (node.nodeName === \"STYLE\" && node.hasAttribute(\"data-e-style\")) return;\n parent.removeChild(node);\n }\n\n /**\n * Updates the attributes of an element to match a new element's attributes.\n * Adds new attributes, updates changed values, and removes attributes no longer present.\n * Also syncs DOM properties that can diverge from attributes after user interaction.\n *\n * Processing order:\n * 1. Iterate new attributes, skip @ prefixed (event) attributes\n * 2. Update attribute if value changed\n * 3. Sync corresponding DOM property if writable (handles boolean conversion)\n * 4. Iterate old attributes in reverse, remove if not in new element\n * 5. Sync SYNC_PROPS (value, checked, selected) from new to old element\n *\n * @private\n * @param {Element} oldEl - The original element to update.\n * @param {Element} newEl - The new element with target attributes.\n * @returns {void}\n */\n _updateAttributes(oldEl, newEl) {\n // Add/update attributes from new element\n for (const attr of newEl.attributes) {\n // Skip event attributes (handled by Eleva's event system)\n if (attr.name[0] === \"@\") continue;\n\n if (oldEl.getAttribute(attr.name) !== attr.value) {\n oldEl.setAttribute(attr.name, attr.value);\n }\n\n // Sync property if it exists and is writable (handles value, checked, selected, disabled, etc.)\n if (attr.name in oldEl) {\n try {\n const newProp =\n typeof oldEl[attr.name] === \"boolean\"\n ? attr.value !== \"false\" // Attribute presence = true, unless explicitly \"false\"\n : attr.value;\n if (oldEl[attr.name] !== newProp) oldEl[attr.name] = newProp;\n } catch {\n continue; // Property is readonly\n }\n }\n }\n\n // Remove attributes no longer present\n for (let i = oldEl.attributes.length - 1; i >= 0; i--) {\n const name = oldEl.attributes[i].name;\n if (!newEl.hasAttribute(name)) {\n oldEl.removeAttribute(name);\n }\n }\n\n // Sync properties that can diverge from attributes via user interaction\n for (const prop of SYNC_PROPS) {\n if (prop in newEl && oldEl[prop] !== newEl[prop])\n oldEl[prop] = newEl[prop];\n }\n }\n\n /**\n * Determines if two nodes are the same for reconciliation purposes.\n * Two nodes are considered the same if:\n * - Both have keys: keys match AND tag names match\n * - Neither has keys: node types match AND node names match\n * - One has key, other doesn't: not the same\n *\n * This ensures keyed elements are only reused when both key and tag match,\n * preventing bugs like `
    ` incorrectly matching ``.\n *\n * @private\n * @param {Node} oldNode - The first node to compare.\n * @param {Node} newNode - The second node to compare.\n * @returns {boolean} True if the nodes are considered the same for reconciliation.\n */\n _isSameNode(oldNode, newNode) {\n if (!oldNode || !newNode) return false;\n\n const oldKey = this._getNodeKey(oldNode);\n const newKey = this._getNodeKey(newNode);\n\n // If both have keys, compare by key AND tag name\n if (oldKey && newKey) {\n return oldKey === newKey && oldNode.nodeName === newNode.nodeName;\n }\n\n // Otherwise, compare by type and name\n return (\n !oldKey &&\n !newKey &&\n oldNode.nodeType === newNode.nodeType &&\n oldNode.nodeName === newNode.nodeName\n );\n }\n\n /**\n * Extracts the key attribute from a node if it exists.\n * Only element nodes (nodeType === 1) can have key attributes.\n * Uses optional chaining for null-safe access.\n *\n * @private\n * @param {Node | null | undefined} node - The node to extract the key from.\n * @returns {string | null} The key attribute value, or null if not an element or no key.\n */\n _getNodeKey(node) {\n return node?.nodeType === 1 ? node.getAttribute(\"key\") : null;\n }\n\n /**\n * Creates a key map for efficient O(1) lookup of keyed elements during diffing.\n * The map is built lazily only when needed (when a mismatch occurs during diffing).\n *\n * @private\n * @param {ChildNode[]} children - The array of child nodes to map.\n * @param {number} start - The start index (inclusive) for mapping.\n * @param {number} end - The end index (inclusive) for mapping.\n * @returns {KeyMap} A Map of key strings to their corresponding DOM nodes.\n */\n _createKeyMap(children, start, end) {\n const map = new Map();\n for (let i = start; i <= end; i++) {\n const key = this._getNodeKey(children[i]);\n if (key) map.set(key, children[i]);\n }\n return map;\n }\n}\n","\"use strict\";\n\n/**\n * @module eleva\n * @fileoverview Core Eleva framework providing signal-based component lifecycle management,\n * reactive rendering, and plugin architecture.\n */\n\nimport { TemplateEngine } from \"../modules/TemplateEngine.js\";\nimport { Signal } from \"../modules/Signal.js\";\nimport { Emitter } from \"../modules/Emitter.js\";\nimport { Renderer } from \"../modules/Renderer.js\";\n\n// ============================================================================\n// TYPE DEFINITIONS\n// ============================================================================\n\n// -----------------------------------------------------------------------------\n// Configuration Types\n// -----------------------------------------------------------------------------\n\n// -----------------------------------------------------------------------------\n// Component Types\n// -----------------------------------------------------------------------------\n\n/**\n * Component definition object.\n * @typedef {Object} ComponentDefinition\n * @property {SetupFunction} [setup]\n * Optional setup function that initializes the component's state and returns reactive data.\n * @property {TemplateFunction | string} template\n * Required function or string that defines the component's HTML structure.\n * @property {StyleFunction | string} [style]\n * Optional function or string that provides CSS styles for the component.\n * Styles are preserved across DOM diffs via data-e-style markers.\n * @property {ChildrenMap} [children]\n * Optional object defining nested child components.\n */\n\n/**\n * Setup function that initializes component state.\n * @callback SetupFunction\n * @param {ComponentContext} ctx\n * The component context with props, emitter, and signal factory.\n * @returns {SetupResult | Promise}\n * Reactive data and lifecycle hooks.\n */\n\n/**\n * Data returned from setup function, may include lifecycle hooks.\n * @typedef {Record & LifecycleHooks} SetupResult\n */\n\n/**\n * Template function that returns HTML markup.\n * @callback TemplateFunction\n * @param {ComponentContext & SetupResult} ctx\n * The merged component context and setup data.\n * @returns {string | Promise}\n * HTML template string.\n */\n\n/**\n * Style function that returns CSS styles.\n * @callback StyleFunction\n * @param {ComponentContext & SetupResult} ctx\n * The merged component context and setup data.\n * @returns {string}\n * CSS styles string.\n */\n\n/**\n * Map of CSS selectors to component definitions or registered component names.\n * @typedef {Record} ChildrenMap\n */\n\n// -----------------------------------------------------------------------------\n// Context Types\n// -----------------------------------------------------------------------------\n\n/**\n * Context passed to component setup function.\n * @typedef {Object} ComponentContext\n * @property {ComponentProps} props\n * Component properties passed during mounting.\n * @property {Emitter} emitter\n * Event emitter instance for component event handling.\n * @property {SignalFactory} signal\n * Factory function to create reactive Signal instances.\n * @description\n * Plugins may extend this context with additional properties (e.g., `ctx.router`, `ctx.store`).\n * @see RouterContext - Router plugin injected context.\n * @see StoreApi - Store plugin injected context.\n */\n\n/**\n * Properties passed to a component during mounting.\n * @typedef {Record} ComponentProps\n */\n\n/**\n * Factory function to create reactive Signal instances.\n * @typedef {(initialValue: T) => Signal} SignalFactory\n */\n\n// -----------------------------------------------------------------------------\n// Lifecycle Hook Types\n// -----------------------------------------------------------------------------\n\n/**\n * Lifecycle hooks that can be returned from setup function.\n * @typedef {Object} LifecycleHooks\n * @property {LifecycleHook} [onBeforeMount]\n * Called before component mounting.\n * @property {LifecycleHook} [onMount]\n * Called after component mounting.\n * @property {LifecycleHook} [onBeforeUpdate]\n * Called before component update.\n * @property {LifecycleHook} [onUpdate]\n * Called after component update.\n * @property {UnmountHook} [onUnmount]\n * Called during component unmounting.\n */\n\n/**\n * Lifecycle hook function.\n * @callback LifecycleHook\n * @param {LifecycleHookContext} ctx\n * Context with container and component data.\n * @returns {void | Promise}\n */\n\n/**\n * Unmount hook function with cleanup resources.\n * @callback UnmountHook\n * @param {UnmountHookContext} ctx\n * Context with cleanup resources.\n * @returns {void | Promise}\n */\n\n/**\n * Context passed to lifecycle hooks.\n * @typedef {Object} LifecycleHookContext\n * @property {HTMLElement} container\n * The DOM element where the component is mounted.\n * @property {ComponentContext & SetupResult} context\n * The component's reactive state and context data.\n */\n\n/**\n * Context passed to unmount hook with cleanup resources.\n * @typedef {Object} UnmountHookContext\n * @property {HTMLElement} container\n * The DOM element where the component is mounted.\n * @property {ComponentContext & SetupResult} context\n * The component's reactive state and context data.\n * @property {CleanupResources} cleanup\n * Object containing cleanup functions and instances.\n */\n\n/**\n * Resources available for cleanup during unmount.\n * @typedef {Object} CleanupResources\n * @property {UnsubscribeFunction[]} watchers\n * Signal watcher cleanup functions.\n * @property {UnsubscribeFunction[]} listeners\n * Event listener cleanup functions.\n * @property {MountResult[]} children\n * Child component instances.\n */\n\n// -----------------------------------------------------------------------------\n// Mount Result Types\n// -----------------------------------------------------------------------------\n\n/**\n * Result of mounting a component.\n * @typedef {Object} MountResult\n * @property {HTMLElement} container\n * The DOM element where the component is mounted.\n * @property {ComponentContext & SetupResult} data\n * The component's reactive state and context data.\n * @property {UnmountFunction} unmount\n * Function to clean up and unmount the component.\n */\n\n/**\n * Function to unmount a component and clean up resources.\n * @callback UnmountFunction\n * @returns {Promise}\n */\n\n/**\n * Function to unsubscribe from events or watchers.\n * @callback UnsubscribeFunction\n * @returns {void | boolean}\n */\n\n// -----------------------------------------------------------------------------\n// Plugin Types\n// -----------------------------------------------------------------------------\n\n/**\n * Plugin interface for extending Eleva.\n * @typedef {Object} ElevaPlugin\n * @property {string} name\n * Unique identifier name for the plugin.\n * @property {string} [version]\n * Optional version string for the plugin.\n * @property {PluginInstallFunction} install\n * Function that installs the plugin.\n * @property {PluginUninstallFunction} [uninstall]\n * Optional function to uninstall the plugin.\n */\n\n/**\n * Plugin install function.\n * @callback PluginInstallFunction\n * @param {Eleva} eleva\n * The Eleva instance.\n * @param {PluginOptions} [options]\n * Plugin configuration options.\n * @returns {void | Eleva | unknown}\n */\n\n/**\n * Plugin uninstall function.\n * @callback PluginUninstallFunction\n * @param {Eleva} eleva\n * The Eleva instance.\n * @returns {void | Promise}\n */\n\n/**\n * Configuration options passed to a plugin during installation.\n * @typedef {Record} PluginOptions\n */\n\n// -----------------------------------------------------------------------------\n// Event Types\n// -----------------------------------------------------------------------------\n\n/**\n * Handler function for DOM events (e.g., click, input, submit).\n * @typedef {(event: Event) => void} DOMEventHandler\n */\n\n/**\n * Common DOM event names (prefixed with @ in templates).\n * @typedef {'click'|'submit'|'input'|'change'|'focus'|'blur'|'keydown'|'keyup'|'keypress'|'mouseenter'|'mouseleave'|'mouseover'|'mouseout'|'mousedown'|'mouseup'|'touchstart'|'touchend'|'touchmove'|'scroll'|'resize'|'load'|'error'|string} DOMEventName\n */\n\n/**\n * @class 🧩 Eleva\n * @classdesc A modern, signal-based component runtime framework that provides lifecycle hooks,\n * component styles, and plugin support. Eleva manages component registration, plugin integration,\n * event handling, and DOM rendering with a focus on performance and developer experience.\n *\n * @example\n * // Basic component creation and mounting\n * const app = new Eleva(\"myApp\");\n * app.component(\"myComponent\", {\n * setup: (ctx) => ({ count: ctx.signal(0) }),\n * template: (ctx) => `
    Hello ${ctx.props.name}
    `\n * });\n * app.mount(document.getElementById(\"app\"), \"myComponent\", { name: \"World\" });\n *\n * @example\n * // Using lifecycle hooks\n * app.component(\"lifecycleDemo\", {\n * setup: () => {\n * return {\n * onMount: ({ container, context }) => {\n * console.log('Component mounted!');\n * }\n * };\n * },\n * template: `
    Lifecycle Demo
    `\n * });\n */\nexport class Eleva {\n /**\n * Creates a new Eleva instance with the specified name.\n *\n * @public\n * @constructor\n * @param {string} name - The unique identifier name for this Eleva instance.\n * @throws {Error} If the name is not provided or is not a string.\n *\n * @example\n * const app = new Eleva(\"myApp\");\n * app.component(\"myComponent\", {\n * setup: (ctx) => ({ count: ctx.signal(0) }),\n * template: (ctx) => `
    Hello ${ctx.props.name}!
    `\n * });\n * app.mount(document.getElementById(\"app\"), \"myComponent\", { name: \"World\" });\n *\n */\n constructor(name) {\n if (!name || typeof name !== \"string\") {\n throw new Error(\"Eleva: name must be a non-empty string\");\n }\n /** @public @readonly {string} The unique identifier name for this Eleva instance */\n this.name = name;\n /** @public @readonly {Emitter} Event emitter for handling component events */\n this.emitter = new Emitter();\n /** @public @readonly {typeof Signal} Signal class for creating reactive state */\n this.signal = Signal;\n /** @public @readonly {typeof TemplateEngine} TemplateEngine class for template parsing */\n this.templateEngine = TemplateEngine;\n /** @public @readonly {Renderer} Renderer for handling DOM updates and patching */\n this.renderer = new Renderer();\n\n /** @private {Map} Registry of all component definitions by name */\n this._components = new Map();\n /** @private {Map} Collection of installed plugin instances by name */\n this._plugins = new Map();\n /** @private {number} Counter for generating unique component IDs */\n this._componentCounter = 0;\n }\n\n /**\n * Integrates a plugin with the Eleva framework.\n * The plugin's install function will be called with the Eleva instance and provided options.\n * After installation, the plugin will be available for use by components.\n *\n * @note Plugins that wrap core methods (e.g., mount) must be uninstalled in reverse order\n * of installation (LIFO - Last In, First Out) to avoid conflicts.\n *\n * @public\n * @param {ElevaPlugin} plugin - The plugin object which must have an `install` function.\n * @param {PluginOptions} [options={}] - Optional configuration options for the plugin.\n * @returns {Eleva | unknown} The Eleva instance (for method chaining) or the result returned by the plugin.\n * @throws {Error} If plugin does not have an install function.\n * @see component - Register components after installing plugins.\n * @see mount - Mount components to the DOM.\n * @example\n * app.use(myPlugin, { option1: \"value1\" });\n *\n * @example\n * // Correct uninstall order (LIFO)\n * app.use(PluginA);\n * app.use(PluginB);\n * // Uninstall in reverse order:\n * PluginB.uninstall(app);\n * PluginA.uninstall(app);\n */\n use(plugin, options = {}) {\n if (!plugin?.install || typeof plugin.install !== \"function\") {\n throw new Error(\"Eleva: plugin must have an install function\");\n }\n this._plugins.set(plugin.name, plugin);\n const result = plugin.install(this, options);\n\n return result !== undefined ? result : this;\n }\n\n /**\n * Registers a new component with the Eleva instance.\n * The component will be available for mounting using its registered name.\n *\n * @public\n * @param {string} name - The unique name of the component to register.\n * @param {ComponentDefinition} definition - The component definition including setup, template, style, and children.\n * @returns {Eleva} The Eleva instance (for method chaining).\n * @throws {Error} If name is not a non-empty string or definition has no template.\n * @see mount - Mount this component to the DOM.\n * @example\n * app.component(\"myButton\", {\n * template: (ctx) => ``,\n * style: `button { color: blue; }`\n * });\n */\n component(name, definition) {\n if (!name || typeof name !== \"string\") {\n throw new Error(\"Eleva: component name must be a non-empty string\");\n }\n if (!definition?.template) {\n throw new Error(`Eleva: component \"${name}\" must have a template`);\n }\n /** @type {Map} */\n this._components.set(name, definition);\n return this;\n }\n\n /**\n * Mounts a registered component to a DOM element.\n * This will initialize the component, set up its reactive state, and render it to the DOM.\n * If the container already has a mounted Eleva instance, it is returned as-is.\n * Unmount clears the container contents and removes the internal instance marker.\n *\n * @public\n * @async\n * @param {HTMLElement} container - The DOM element where the component will be mounted.\n * @param {string | ComponentDefinition} compName - The name of the registered component or a direct component definition.\n * @param {ComponentProps} [props={}] - Optional properties to pass to the component.\n * @returns {Promise}\n * A Promise that resolves to an object containing:\n * - container: The mounted component's container element\n * - data: The component's reactive state and context\n * - unmount: Function to clean up and unmount the component\n * @throws {Error} If container is not a DOM element or component is not registered.\n * @throws {Error} If setup function, template function, or style function throws.\n * @example\n * const instance = await app.mount(document.getElementById(\"app\"), \"myComponent\", { text: \"Click me\" });\n * // Later...\n * await instance.unmount();\n */\n async mount(container, compName, props = {}) {\n if (!container?.nodeType) {\n throw new Error(\"Eleva: container must be a DOM element\");\n }\n\n if (container._eleva_instance) return container._eleva_instance;\n\n /** @type {ComponentDefinition} */\n const definition =\n typeof compName === \"string\" ? this._components.get(compName) : compName;\n if (!definition) throw new Error(`Component \"${compName}\" not registered.`);\n\n /** @type {string} */\n const compId = `c${++this._componentCounter}`;\n\n /**\n * Destructure the component definition to access core functionality.\n * - setup: Optional function for component initialization and state management\n * - template: Required function or string that returns the component's HTML structure\n * - style: Optional function or string for component CSS styles (not auto-scoped)\n * - children: Optional object defining nested child components\n */\n const { setup, template, style, children } = definition;\n\n /** @type {ComponentContext} */\n const context = {\n props,\n emitter: this.emitter,\n /** @type {SignalFactory} */\n signal: (v) => new this.signal(v),\n };\n\n /**\n * Processes the mounting of the component.\n * This function handles:\n * 1. Merging setup data with the component context\n * 2. Setting up reactive watchers\n * 3. Rendering the component\n * 4. Managing component lifecycle\n *\n * @inner\n * @param {Record} data - Data returned from the component's setup function.\n * @returns {Promise} An object containing:\n * - container: The mounted component's container element\n * - data: The component's reactive state and context\n * - unmount: Function to clean up and unmount the component\n */\n const processMount = async (data) => {\n /** @type {ComponentContext & SetupResult} */\n const mergedContext = { ...context, ...data };\n /** @type {UnsubscribeFunction[]} */\n const watchers = [];\n /** @type {MountResult[]} */\n const childInstances = [];\n /** @type {UnsubscribeFunction[]} */\n const listeners = [];\n /** @private {boolean} Local mounted state for this component instance */\n let isMounted = false;\n\n // ========================================================================\n // Render Batching\n // ========================================================================\n\n /** @private {boolean} Flag to prevent concurrent renders */\n let renderScheduled = false;\n\n /**\n * Schedules a render using microtask batching.\n * Since signals now notify watchers synchronously, multiple signal\n * changes in the same synchronous block will each call this function,\n * but only one render will be scheduled via queueMicrotask.\n * This separates concerns: signals handle state, components handle scheduling.\n *\n * @inner\n * @private\n * @returns {void}\n */\n const scheduleRender = () => {\n if (renderScheduled) return;\n renderScheduled = true;\n queueMicrotask(async () => {\n renderScheduled = false;\n await render();\n });\n };\n\n /**\n * Renders the component by:\n * 1. Executing lifecycle hooks\n * 2. Processing the template\n * 3. Updating the DOM\n * 4. Processing events, injecting styles, and mounting child components.\n *\n * @inner\n * @private\n * @returns {Promise}\n */\n const render = async () => {\n const html =\n typeof template === \"function\"\n ? await template(mergedContext)\n : template;\n\n // Execute before hooks\n if (!isMounted) {\n await mergedContext.onBeforeMount?.({\n container,\n context: mergedContext,\n });\n } else {\n await mergedContext.onBeforeUpdate?.({\n container,\n context: mergedContext,\n });\n }\n\n this.renderer.patchDOM(container, html);\n\n // Unmount child components whose host elements were removed by patching.\n const childrenToUnmount = [];\n for (let i = childInstances.length - 1; i >= 0; i--) {\n const child = childInstances[i];\n if (!container.contains(child.container)) {\n childInstances.splice(i, 1);\n childrenToUnmount.push(child);\n }\n }\n if (childrenToUnmount.length) {\n await Promise.allSettled(\n childrenToUnmount.map((child) => child.unmount())\n );\n }\n\n this._processEvents(container, mergedContext, listeners);\n if (style) this._injectStyles(container, compId, style, mergedContext);\n if (children)\n await this._mountComponents(\n container,\n children,\n childInstances,\n mergedContext\n );\n\n // Execute after hooks\n if (!isMounted) {\n await mergedContext.onMount?.({\n container,\n context: mergedContext,\n });\n isMounted = true;\n } else {\n await mergedContext.onUpdate?.({\n container,\n context: mergedContext,\n });\n }\n };\n\n /**\n * Sets up reactive watchers for all Signal instances in the component's data.\n * When a Signal's value changes, a batched render is scheduled.\n * Multiple changes within the same frame are collapsed into one render.\n * Stores unsubscribe functions to clean up watchers when component unmounts.\n *\n * @note Signal watchers are invoked synchronously when values change.\n * Render batching is handled at the component level via queueMicrotask,\n * not at the signal level. This preserves stack traces for debugging.\n */\n for (const val of Object.values(data)) {\n if (val instanceof Signal) watchers.push(val.watch(scheduleRender));\n }\n\n await render();\n\n const instance = {\n container,\n data: mergedContext,\n /**\n * Unmounts the component, cleaning up watchers and listeners, child components, and clearing the container.\n * Removes the internal instance marker from the container when complete.\n *\n * @returns {Promise}\n */\n unmount: async () => {\n await mergedContext.onUnmount?.({\n container,\n context: mergedContext,\n cleanup: {\n watchers,\n listeners,\n children: childInstances,\n },\n });\n for (const fn of watchers) fn();\n for (const fn of listeners) fn();\n for (const child of childInstances) await child.unmount();\n container.innerHTML = \"\";\n delete container._eleva_instance;\n },\n };\n\n container._eleva_instance = instance;\n return instance;\n };\n\n // Handle asynchronous setup.\n const setupResult = typeof setup === \"function\" ? await setup(context) : {};\n return await processMount(setupResult);\n }\n\n /**\n * Processes DOM elements for event binding based on attributes starting with \"@\".\n * This method attaches event listeners directly to elements and ensures proper cleanup.\n * Bound `@event` attributes are removed after listeners are attached.\n *\n * Handler resolution order:\n * 1. Direct context property lookup (e.g., context[\"handleClick\"])\n * 2. Template expression evaluation via TemplateEngine (e.g., \"increment()\")\n *\n * @private\n * @param {HTMLElement} container - The container element in which to search for event attributes.\n * @param {ComponentContext & SetupResult} context - The merged component context and setup data.\n * @param {UnsubscribeFunction[]} listeners - Array to collect cleanup functions for each event listener.\n * @returns {void}\n * @see TemplateEngine.evaluate - Expression evaluation. fallback.\n */\n _processEvents(container, context, listeners) {\n /** @type {NodeListOf} */\n const elements = container.querySelectorAll(\"*\");\n for (const el of elements) {\n /** @type {NamedNodeMap} */\n const attrs = el.attributes;\n // Iterate backwards to safely remove attributes from live collection\n for (let i = attrs.length - 1; i >= 0; i--) {\n /** @type {Attr} */\n const attr = attrs[i];\n\n if (!attr.name.startsWith(\"@\")) continue;\n\n /** @type {keyof HTMLElementEventMap} */\n const event = attr.name.slice(1);\n /** @type {string} */\n const handlerName = attr.value;\n /** @type {DOMEventHandler} */\n const handler =\n context[handlerName] ||\n this.templateEngine.evaluate(handlerName, context);\n if (typeof handler === \"function\") {\n el.addEventListener(event, handler);\n el.removeAttribute(attr.name);\n listeners.push(() => el.removeEventListener(event, handler));\n }\n }\n }\n }\n\n /**\n * Injects styles into the component's container.\n * Styles are placed in a `