@zenithbuild/core 1.1.0 → 1.2.1

package/compiler/transform/fragmentLowering.ts

@@ -57,11 +57,6 @@ function lowerNode(
             return lowerExpressionNode(node, filePath, expressions)
 
         case 'element': {
-            // Check if this is a <for> element directive
-            if (node.tag === 'for') {
-                return lowerForElement(node, filePath, expressions)
-            }
-            
             // Check if this is an <html-content> element directive
             if (node.tag === 'html-content') {
                 return lowerHtmlContentElement(node, filePath, expressions)
@@ -287,95 +282,6 @@ function lowerInlineFragment(
     return node
 }
 
-/**
- * Lower <for> element directive to LoopFragmentNode
- * 
- * Syntax: <for each="item" in="items">...body...</for>
- * Or:     <for each="item, index" in="items">...body...</for>
- * 
- * This is compile-time sugar for {items.map(item => ...)}
- */
-function lowerForElement(
-    node: import('../ir/types').ElementNode,
-    filePath: string,
-    expressions: ExpressionIR[]
-): LoopFragmentNode {
-    // Extract 'each' and 'in' attributes
-    const eachAttr = node.attributes.find(a => a.name === 'each')
-    const inAttr = node.attributes.find(a => a.name === 'in')
-    
-    if (!eachAttr || typeof eachAttr.value !== 'string') {
-        throw new InvariantError(
-            'ZEN001',
-            `<for> element requires an 'each' attribute specifying the item variable`,
-            'Usage: <for each="item" in="items">...body...</for>',
-            filePath,
-            node.location.line,
-            node.location.column
-        )
-    }
-    
-    if (!inAttr || typeof inAttr.value !== 'string') {
-        throw new InvariantError(
-            'ZEN001',
-            `<for> element requires an 'in' attribute specifying the source array`,
-            'Usage: <for each="item" in="items">...body...</for>',
-            filePath,
-            node.location.line,
-            node.location.column
-        )
-    }
-    
-    // Parse item variable (may include index: "item, index" or "item, i")
-    const eachValue = eachAttr.value.trim()
-    let itemVar: string
-    let indexVar: string | undefined
-    
-    if (eachValue.includes(',')) {
-        const parts = eachValue.split(',').map(p => p.trim())
-        itemVar = parts[0]!
-        indexVar = parts[1]
-    } else {
-        itemVar = eachValue
-    }
-    
-    const source = inAttr.value.trim()
-    
-    // Create loop context for the body
-    const loopVariables = [itemVar]
-    if (indexVar) {
-        loopVariables.push(indexVar)
-    }
-    
-    const bodyLoopContext: LoopContext = {
-        variables: node.loopContext
-            ? [...node.loopContext.variables, ...loopVariables]
-            : loopVariables,
-        mapSource: source
-    }
-    
-    // Lower children with loop context
-    const body = node.children.map(child => {
-        // Recursively lower children
-        const lowered = lowerNode(child, filePath, expressions)
-        // Attach loop context to children that need it
-        if ('loopContext' in lowered) {
-            return { ...lowered, loopContext: bodyLoopContext }
-        }
-        return lowered
-    })
-    
-    return {
-        type: 'loop-fragment',
-        source,
-        itemVar,
-        indexVar,
-        body,
-        location: node.location,
-        loopContext: bodyLoopContext
-    }
-}
-
 /**
  * Lower <html-content> element directive
  * 

package/compiler/transform/transformNode.ts

@@ -126,7 +126,8 @@ export function transformNode(
       }
 
       case 'loop-fragment': {
-        // Loop fragment: {items.map(item => <li>...</li>)} or <for each="item" in="items">
+        // Loop fragment: {items.map(item => <li>...</li>)}
+        // .map() is compile-time sugar, lowered to LoopFragmentNode
         // For SSR/SSG, we render one instance of the body as a template
         // The runtime will hydrate and expand this for each actual item
         const loopNode = node as LoopFragmentNode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenithbuild/core",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Core library for the Zenith framework",
   "license": "MIT",
   "type": "module",
@@ -77,4 +77,4 @@
     "parse5": "^8.0.0",
     "picocolors": "^1.1.1"
   }
-}
+}

package/runtime/client-runtime.ts

@@ -309,80 +309,461 @@ export function getExpression(id: string): ((state: any) => any) | undefined {
 // Hydration Functions
 // ============================================
 
-const bindings: Array<{ node: Element; type: string; expressionId: string; attributeName?: string }> = [];
+// ============================================
+// Hydration & Binding System
+// ============================================
 
-export function hydrate(state: any, container?: Element | Document): void {
-    const root = container || document;
+interface BaseBinding {
+    node: Node;
+    type: 'text' | 'attribute' | 'html' | 'conditional' | 'optional' | 'loop';
+    id: string; // Binding/Expression ID
+}
 
-    // Clear existing bindings
-    bindings.length = 0;
+interface TextBinding extends BaseBinding {
+    type: 'text';
+    node: Text;
+}
 
-    // Find all text expression placeholders
-    const textPlaceholders = root.querySelectorAll('[data-zen-text]');
-    textPlaceholders.forEach((node) => {
-        const expressionId = node.getAttribute('data-zen-text');
-        if (!expressionId) return;
+interface AttributeBinding extends BaseBinding {
+    type: 'attribute';
+    node: Element;
+    attrName: string;
+}
 
-        bindings.push({ node: node as Element, type: 'text', expressionId });
-        updateTextBinding(node as Element, expressionId, state);
-    });
+interface HtmlBinding extends BaseBinding {
+    type: 'html';
+    node: Element;
+}
 
-    // Find attribute bindings
-    const attrSelectors = ['class', 'style', 'src', 'href', 'disabled', 'checked'];
-    for (const attr of attrSelectors) {
-        const attrPlaceholders = root.querySelectorAll(`[data-zen-attr-${attr}]`);
-        attrPlaceholders.forEach((node) => {
-            const expressionId = node.getAttribute(`data-zen-attr-${attr}`);
-            if (!expressionId) return;
+interface ConditionalBinding extends BaseBinding {
+    type: 'conditional';
+    node: Element; // The container div with data-zen-cond
+    trueBranch?: Node[]; // Cached true branch nodes
+    falseBranch?: Node[]; // Cached false branch nodes
+    currentBranch: boolean | null; // true, false, or null (uninitialized)
+}
 
-            bindings.push({ node: node as Element, type: 'attribute', expressionId, attributeName: attr });
-            updateAttributeBinding(node as Element, attr, expressionId, state);
-        });
+interface OptionalBinding extends BaseBinding {
+    type: 'optional';
+    node: Element; // The container div with data-zen-opt
+    content?: Node[]; // Cached content nodes
+    isVisible: boolean | null;
+}
+
+interface LoopBinding extends BaseBinding {
+    type: 'loop';
+    node: Element; // The container div with data-zen-loop
+    template: Node[]; // THe template nodes (cloned from initial content)
+    items: any[]; // Current items list
+    itemBindings: Binding[][]; // Bindings for each item
+    itemVar: string;
+    indexVar: string | null;
+    sourceExpr: string;
+}
+
+type Binding = TextBinding | AttributeBinding | HtmlBinding | ConditionalBinding | OptionalBinding | LoopBinding;
+
+// Root bindings for the application
+const rootBindings: Binding[] = [];
+
+/**
+ * Recursive Hydration (Tree Walker)
+ * 
+ * Scans the DOM tree for bindings, respecting scope boundaries.
+ * Returns a list of bindings found in this subtree (excluding those inside child scopes like loops).
+ */
+
+/**
+ * Manual recursive traversal to better handle skipping subtrees
+ */
+function scanBindings(node: Node, bindings: Binding[]): void {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as Element;
+
+        // Check for Loop - Stop traversal into children if found
+        if (element.hasAttribute('data-zen-loop')) {
+            const id = element.getAttribute('data-zen-loop')!;
+            const source = element.getAttribute('data-zen-source')!;
+            const itemVar = element.getAttribute('data-zen-item')!;
+            const indexVar = element.getAttribute('data-zen-index');
+
+            // Capture template from initial content (SSR)
+            // Note: For client-side nav, this might modify `element` immediately?
+            // For now assume standard hydration of SSR content
+            const template = Array.from(element.childNodes).map(n => n.cloneNode(true));
+
+            // The loop binding itself manages the children. 
+            // We do NOT scan children here. The loop update() will scan/hydrate instances.
+
+            // Clear initial SSR content so we can re-render fresh? 
+            // Or try to hydrate existing? Hydrating lists is hard (keys etc).
+            // Simplest safe fix: Clear and re-render.
+            element.innerHTML = '';
+
+            bindings.push({
+                type: 'loop',
+                node: element,
+                id,
+                sourceExpr: source,
+                itemVar,
+                indexVar,
+                template,
+                items: [],
+                itemBindings: []
+            } as LoopBinding);
+
+            return; // STOP recursion into loop children
+        }
+
+        // Check for Conditional - Stop recursion?
+        // Actually, conditional blocks contain children we WANT to bind if they are currently visible.
+        // But if we toggle, we need to re-scan.
+        // So ConditionalBinding should manage its children.
+        if (element.hasAttribute('data-zen-cond')) {
+            const id = element.getAttribute('data-zen-cond')!;
+            // We assume the true/false branches are initially present as separate containers
+            // OR `data-zen-cond-true` / `data-zen-cond-false` markers?
+            // The compiler output:
+            // <div data_zen_cond="id" data_zen_cond_true style="display:contents">...</div>
+            // <div data_zen_cond="id" data_zen_cond_false style="display:none">...</div>
+            // These are siblings usually? Or nested?
+            // Wait, compiler generates TWO divs.
+            // <div data-zen-cond="id" ...true> and <div data-zen-cond="id" ...false>
+            // Each is a separate binding effectively?
+            // If they share the same ID, they are part of the same logic.
+            // Scanning will find both. We can treat them as independent toggle-able areas?
+
+            // Actually, simpler to treat them as ConditionalBinding.
+            // But we need to know which branch it is.
+            const isTrueBranch = element.hasAttribute('data-zen-cond-true');
+
+            // For now, let's treat them as distinct bindings that listen to the same expression
+            // and toggle visibility.
+            // We DO want to scan their children because they might be visible.
+
+            // Optimization: If display:none, maybe don't scan yet? 
+            // But we want to be ready to show.
+
+            // Let's implement ConditionalBinding to manage visibility AND recurse.
+            bindings.push({
+                type: 'conditional',
+                node: element,
+                id,
+                currentBranch: null, // Force update
+
+            } as any); // Simplification: Just toggle display
+            // NO, wait. If we hide it, we shouldn't update its children's bindings if they depend on ephemeral state?
+            // Actually, simplest is just toggle binding.
+            // Let's rely on standard attribute binding?
+            // No, standard attribute binding doesn't handle children.
+
+            // Revisiting the compiler:
+            // It's just a div with an ID. The logic is "If cond is true, show TrueDiv, hide FalseDiv".
+            // So we can have a Binding that just toggles 'style.display'.
+            // And we CONTINUE scanning children.
+        }
+
+        // Optional? Same.
+
+        // Bind attributes
+        const attrSelectors = ['class', 'style', 'src', 'href', 'disabled', 'checked', 'value', 'placeholder'];
+        for (const attr of attrSelectors) {
+            const attrKey = `data-zen-attr-${attr}`;
+            if (element.hasAttribute(attrKey)) {
+                bindings.push({
+                    type: 'attribute',
+                    node: element,
+                    id: element.getAttribute(attrKey)!,
+                    attrName: attr
+                });
+            }
+        }
+
+        // Bind HTML
+        if (element.hasAttribute('data-zen-html')) {
+            bindings.push({
+                type: 'html',
+                node: element,
+                id: element.getAttribute('data-zen-html')!
+            });
+        }
+
+        // Bind Events
+        bindEventsHelpers(element);
     }
 
-    // Bind event handlers
-    bindEvents(root);
+    // Check Text Nodes
+    if (node.nodeType === Node.TEXT_NODE) {
+        // Text nodes can't have attributes, so we look at parent?
+        // No, Zenith compiler puts `data-zen-text="id"` on the PARENT element usually?
+        // Or strictly on the element wrapping the text?
+        // Compiler: <span data-zen-text="id"></span> or similar.
+        // Wait, `transformNode` for text binding:
+        // Returns `<!--binding:id-->`? No.
+        // It returns a TextNode in IR. `generateBindings` validates "Text binding must have target 'data-zen-text'".
+        // `transformNode`: if binding exists, it sets `data-zen-text` attribute on the element?
+        // Wait, text nodes don't have attributes.
+        // The compiler wraps text in a generic element or expects the parent?
+        // Usually framework puts it on the parent element.
+        // Let's check `parseTemplate.ts` or `transformNode.ts`...
+        // Assuming the element with `data-zen-text` owns the text content.
+    }
 
-    // Trigger mount
-    triggerMount();
+    // Check parent for Text Binding (on Element)
+    if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node as Element;
+        if (el.hasAttribute('data-zen-text')) {
+            bindings.push({
+                type: 'text',
+                node: el.firstChild as Text || el.appendChild(document.createTextNode('')), // Ensure text node exists
+                id: el.getAttribute('data-zen-text')!
+            } as TextBinding);
+            // We don't skip children here, but usually text binding replaces content.
+        }
+    }
+
+    // Recurse to children (unless stopped above)
+    let child = node.firstChild;
+    while (child) {
+        scanBindings(child, bindings);
+        child = child.nextSibling;
+    }
 }
 
-function updateTextBinding(node: Element, expressionId: string, state: any): void {
-    const expression = expressionRegistry.get(expressionId);
-    if (!expression) {
-        console.warn(`[Zenith] Expression ${expressionId} not found`);
-        return;
+function bindEventsHelpers(element: Element) {
+    const eventTypes = ['click', 'change', 'input', 'submit', 'focus', 'blur', 'keyup', 'keydown'];
+    for (const eventType of eventTypes) {
+        const attr = `data-zen-${eventType}`;
+        if (element.hasAttribute(attr)) {
+            // We attach handler immediately?
+            // Handler needs to access runtime state.
+            // We'll use a closure that calls the global/scoped handler at runtime.
+            const handlerName = element.getAttribute(attr)!;
+
+            // Remove old
+            const oldHandler = (element as any)[`__zen_${eventType}`];
+            if (oldHandler) element.removeEventListener(eventType, oldHandler);
+
+            // Add new
+            const handler = (e: Event) => dispatchEvent(e, handlerName, element);
+            (element as any)[`__zen_${eventType}`] = handler;
+            element.addEventListener(eventType, handler);
+        }
+    }
+}
+
+function dispatchEvent(event: Event, handlerName: string, element: Element) {
+    // We need to find the SCOPE.
+    // Event handler might be looking for `item` (loop variable).
+    // This is tricky with standard DOM events.
+    // We attach scope info to the DOM element?
+    // When LoopBinding creates nodes, it should attach `_zen_scope` property to the root of the item?
+
+    // Finding scope: traverse up to find an element with `_zen_scope`.
+    let target = element as any;
+    let scope = {};
+
+    while (target) {
+        if (target._zen_scope) {
+            scope = { ...target._zen_scope, ...scope }; // Merge scopes (inner wins? No, inner is more specific)
+            // Actually, prototype chain or Object.assign?
+            // List items usually have unique props.
+            // Let's accumulate.
+            // For a simple hierarchy: Global < LoopItem.
+            // We start matching from Global? No.
+            // The handler execution needs the collected scope.
+            break; // Assuming flat scope per loop item for now or merge?
+        }
+        target = target.parentNode;
     }
 
+    // Global scopes
+    // We don't easily have access to the *current* global state passed to update() here, 
+    // unless we store it globally.
+    // `expressionRegistry` handlers take `state`.
+    // We need to fetch the latest state? 
+    // Zenith signals usually read current value directly.
+    // But `expression(state)` pattern implies pure function of state.
+
+    // For events: usually they call a function. `increment()`.
+    // That function access signals/state directly.
+    // BUT if it uses arguments like `doSomething(item)`, `item` comes from scope.
+
+    // Only expressions registered in registry need `state` passed?
+    // If `handlerName` is in `__ZENITH_EXPRESSIONS__`, calling it requires state.
+    // Which state? One with loop vars.
+
+    // HACK: for now, we rely on the fact that most handlers are simple fn calls.
+    // If they are expressions expecting args, we assume they are bound or don't need args?
+    // Wait, `<button onclick="remove(item)">`.
+    // Compiler lower this to an expression: `(state) => remove(state.item)`.
+    // So we DO need to pass the scope-enriched state to the handler if it's an expression.
+
+    const handlerFunc = (window as any)[handlerName] || (window as any).__ZENITH_EXPRESSIONS__?.get(handlerName);
+
+    if (typeof handlerFunc === 'function') {
+        // Determine effective state
+        // We might need a global `getLastState()` or similar if strictly functional.
+        // Or we pass `scope` (which has item) as the state?
+        // If generic state is required, we are in trouble without a global reference.
+        // Let's assume `window.__zenith_last_state` is available or similar?
+        // Added `window.__zenith_currentState` in update().
+
+        const globalState = (window as any).__zenith_currentState || {};
+        const effectiveState = { ...globalState, ...scope };
+
+        handlerFunc(event, element, effectiveState); // Pass state as 3rd arg? Or 1st?
+        // Expression signature: (state) => ...
+        // Event handler signature: (e, el) => ...
+        // Conflict.
+        // Zenith compiler usually generates `(state) => (e) => ...` or similar for events?
+        // Or the expression IS the handler body?
+        // If it's `(state) => ...`, we call it to get the result.
+        // If result is function, call it with event?
+
+        // Let's try calling with state. If it returns function, call that.
+        try {
+            const result = handlerFunc(effectiveState);
+            if (typeof result === 'function') {
+                result(event, element);
+            }
+        } catch (e) {
+            // It might be a direct event handler (e) => ...
+            handlerFunc(event, element);
+        }
+    }
+}
+
+export function hydrate(state: any, container?: Element | Document): void {
+    const root = container || document;
+    // Clear global bindings
+    rootBindings.length = 0;
+
+    // Store initial state for events
+    (window as any).__zenith_currentState = state;
+
+    scanBindings(root, rootBindings);
+
+    // Initial update
+    updateBindings(rootBindings, state);
+    triggerMount();
+}
+
+/**
+ * Update Loop Logic
+ */
+function updateLoop(binding: LoopBinding, state: any) {
+    const { node, id, sourceExpr, itemVar, indexVar, template } = binding;
+
+    // 1. Evaluate Source
+    const expr = expressionRegistry.get(sourceExpr);
+    if (!expr) return;
+
+    let list = [];
     try {
-        const result = expression(state);
-        if (result === null || result === undefined || result === false) {
-            node.textContent = '';
-        } else if (typeof result === 'string') {
-            if (result.trim().startsWith('<') && result.trim().endsWith('>')) {
-                node.innerHTML = result;
-            } else {
-                node.textContent = result;
+        list = expr(state) || [];
+    } catch (e) { console.error('Loop source error', e); }
+
+    if (!Array.isArray(list)) list = [];
+
+    // 2. Reconcile (Naive: Clear and Re-render)
+    // Optimization: Reuse existing items?
+    // For Patch 1.1.0, let's keep it simple and safe: Full Re-render.
+    // Ideally we diff.
+
+    // Detect if nothing changed? (Deep equals or ref check)
+    if (binding.items === list) {
+        // Same reference, assumes no change? 
+        // In mutable state (Proxy), the array might be same ref but mutated.
+        // We probably should re-render or at least re-update children.
+        // Let's fall through.
+    }
+    binding.items = list;
+
+    node.innerHTML = '';
+    binding.itemBindings = []; // Clear child bindings
+
+    list.forEach((item, index) => {
+        // Create Scope
+        const scope = { [itemVar]: item };
+        if (indexVar) scope[indexVar] = index;
+
+        // Clone Template
+        const fragment = document.createDocumentFragment();
+        template.forEach(n => fragment.appendChild(n.cloneNode(true)));
+
+        // Mark Scope on Root Elements of Item
+        // (Used for event delegation)
+        Array.from(fragment.childNodes).forEach((child: any) => {
+            if (child.nodeType === 1) child._zen_scope = scope;
+        });
+
+        // Hydrate this instance (collect bindings)
+        const instanceBindings: Binding[] = [];
+        // Scan fragment BEFORE appending? Or after?
+        // Appending first is easier for traversal, but we want to bind to the specific nodes.
+        scanBindings(fragment, instanceBindings);
+        binding.itemBindings.push(instanceBindings);
+
+        node.appendChild(fragment);
+
+        // Initial Update for this instance
+        updateBindings(instanceBindings, { ...state, ...scope });
+    });
+}
+
+function updateBindings(bindingsList: Binding[], state: any) {
+    for (const binding of bindingsList) {
+        if (binding.type === 'text') {
+            const expr = expressionRegistry.get(binding.id);
+            if (expr) {
+                try { binding.node.textContent = String(expr(state) ?? ''); }
+                catch (e) { }
             }
-        } else if (result instanceof Node) {
-            node.innerHTML = '';
-            node.appendChild(result);
-        } else if (Array.isArray(result)) {
-            node.innerHTML = '';
-            const fragment = document.createDocumentFragment();
-            result.flat(Infinity).forEach(item => {
-                if (item instanceof Node) fragment.appendChild(item);
-                else if (item != null && item !== false) fragment.appendChild(document.createTextNode(String(item)));
-            });
-            node.appendChild(fragment);
-        } else {
-            node.textContent = String(result);
+        } else if (binding.type === 'attribute') {
+            updateAttributeBinding(binding.node, binding.attrName, binding.id, state);
+        } else if (binding.type === 'html') {
+            const expr = expressionRegistry.get(binding.id);
+            if (expr) {
+                try {
+                    const val = expr(state);
+                    binding.node.innerHTML = String(val ?? '');
+                } catch (e) { }
+            }
+        } else if (binding.type === 'conditional' || binding.type === 'optional') {
+            // Toggle display based on truthiness
+            const expr = expressionRegistry.get(binding.id);
+            if (expr) {
+                const val = !!expr(state);
+                // Check if inverted (data-zen-cond-false)
+                const isInverse = (binding.node as Element).hasAttribute('data-zen-cond-false');
+                const shouldShow = isInverse ? !val : val;
+
+                (binding.node as HTMLElement).style.display = shouldShow ? 'contents' : 'none';
+            }
+        } else if (binding.type === 'loop') {
+            updateLoop(binding as LoopBinding, state);
         }
-    } catch (error) {
-        console.error(`[Zenith] Error evaluating expression ${expressionId}:`, error);
     }
 }
 
+export function update(state: any): void {
+    (window as any).__zenith_currentState = state;
+    updateBindings(rootBindings, state);
+}
+
+export function cleanup(container?: Element | Document): void {
+    rootBindings.length = 0;
+    rootBindings.length = 0;
+    triggerUnmount();
+}
+
+// ... existing helper functions (updateAttributeBinding, bindEvents) need slight adjustments or imports?
+// We need to keep updateAttributeBinding available.
+
+// REUSING EXISTING updateAttributeBinding from previous implementation
+// (Need to make sure it's defined or moved)
+
 function updateAttributeBinding(element: Element, attrName: string, expressionId: string, state: any): void {
     const expression = expressionRegistry.get(expressionId);
     if (!expression) return;
@@ -413,77 +794,18 @@ function updateAttributeBinding(element: Element, attrName: string, expressionId
     }
 }
 
-export function update(state: any): void {
-    for (const binding of bindings) {
-        if (binding.type === 'text') {
-            updateTextBinding(binding.node, binding.expressionId, state);
-        } else if (binding.type === 'attribute' && binding.attributeName) {
-            updateAttributeBinding(binding.node, binding.attributeName, binding.expressionId, state);
-        }
-    }
-}
-
 export function bindEvents(container: Element | Document): void {
-    const eventTypes = ['click', 'change', 'input', 'submit', 'focus', 'blur', 'keyup', 'keydown'];
-
-    for (const eventType of eventTypes) {
-        const elements = container.querySelectorAll(`[data-zen-${eventType}]`);
-
-        elements.forEach((element) => {
-            const handlerName = element.getAttribute(`data-zen-${eventType}`);
-            if (!handlerName) return;
-
-            // Remove existing handler if any
-            const handlerKey = `__zen_${eventType}_handler`;
-            const existingHandler = (element as any)[handlerKey];
-            if (existingHandler) {
-                element.removeEventListener(eventType, existingHandler);
-            }
-
-            // Create new handler
-            const handler = (event: Event) => {
-                try {
-                    // Try window first, then expression registry
-                    let handlerFunc = (window as any)[handlerName];
-                    if (typeof handlerFunc !== 'function') {
-                        handlerFunc = (window as any).__ZENITH_EXPRESSIONS__?.get(handlerName);
-                    }
-
-                    if (typeof handlerFunc === 'function') {
-                        handlerFunc(event, element);
-                    } else {
-                        console.warn(`[Zenith] Event handler "${handlerName}" not found`);
-                    }
-                } catch (error) {
-                    console.error(`[Zenith] Error executing handler "${handlerName}":`, error);
-                }
-            };
-
-            (element as any)[handlerKey] = handler;
-            element.addEventListener(eventType, handler);
-        });
+    // Legacy support or external call?
+    // Our scanBindings() handles events.
+    // If called manually, we traverse?
+    if (container.nodeType === Node.ELEMENT_NODE) {
+        bindEventsHelpers(container as Element);
+        // And children...
+        const all = (container as Element).querySelectorAll('*');
+        all.forEach(el => bindEventsHelpers(el));
     }
 }
 
-export function cleanup(container?: Element | Document): void {
-    const root = container || document;
-    const eventTypes = ['click', 'change', 'input', 'submit', 'focus', 'blur', 'keyup', 'keydown'];
-
-    for (const eventType of eventTypes) {
-        const elements = root.querySelectorAll(`[data-zen-${eventType}]`);
-        elements.forEach((element) => {
-            const handlerKey = `__zen_${eventType}_handler`;
-            const handler = (element as any)[handlerKey];
-            if (handler) {
-                element.removeEventListener(eventType, handler);
-                delete (element as any)[handlerKey];
-            }
-        });
-    }
-
-    bindings.length = 0;
-    triggerUnmount();
-}
 
 // ============================================
 // Plugin Runtime Data Access