@mintjamsinc/ichigojs 0.1.86 → 0.1.87

package/dist/ichigo.umd.js

@@ -6734,1117 +6734,1235 @@
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
     /**
-     * Utility class for analyzing JavaScript expressions to extract variable and function dependencies.
-     */
-    class ExpressionUtils {
-        /**
-         * Extracts variable and function names used in the expression.
-         * @param expression The expression string to analyze.
-         * @param functionDependencies A dictionary mapping function names to their dependencies.
-         * @param options Optional parsing options.
-         *   - asScript: If true, parse the input as a Script (allows multi-statement source with semicolons,
-         *     declarations, control-flow, etc.). If false/omitted, parse as a single expression (the default,
-         *     for backward compatibility with interpolation and binding directives).
-         * @returns An array of identifier names.
-         */
-        static extractIdentifiers(expression, functionDependencies, options) {
-            const identifiers = new Set();
-            // In expression mode we wrap in parens so acorn parses the source as a single expression.
-            // In script mode we parse as a Program so that multi-statement bodies (e.g. "a=1; b=2") work.
-            const source = options?.asScript ? expression : `(${expression})`;
-            const ast = parse(source, { ecmaVersion: "latest" });
-            // Use walk.full instead of walk.simple to visit ALL nodes including assignment LHS
-            full(ast, (node) => {
-                if (node.type === 'Identifier') {
-                    identifiers.add(node.name);
-                    // Check if the identifier is a function name
-                    if (functionDependencies[node.name]) {
-                        // If it is, add its dependencies to the list of identifiers
-                        for (const dependency of functionDependencies[node.name]) {
-                            identifiers.add(dependency);
-                        }
-                    }
-                }
-                else if (node.type === 'MemberExpression') {
-                    // Reconstruct chain parts from a MemberExpression (e.g. a.b.c). Each part
-                    // carries its own separator so that the chain is spelled the way the reactive
-                    // proxy reports changes: array indices in brackets, properties after a dot
-                    // (e.g. "items[0].name").
-                    const parts = [];
-                    let cur = node;
-                    while (cur) {
-                        // property part (right side)
-                        if (cur.property) {
-                            if (!cur.computed && cur.property.type === 'Identifier') {
-                                parts.unshift(`.${cur.property.name}`);
-                            }
-                            else if (cur.computed && cur.property.type === 'Literal' && typeof cur.property.value === 'number') {
-                                parts.unshift(`[${cur.property.value}]`);
-                            }
-                            else if (cur.computed && cur.property.type === 'Literal') {
-                                parts.unshift(`.${String(cur.property.value)}`);
-                            }
-                            else if (cur.computed) {
-                                // e.g. items[i] or items[i + 1]: the index is only known when the
-                                // expression runs, so "[*]" stands for any index or key. Identifiers
-                                // inside the index expression are visited separately by walk.full.
-                                parts.unshift('[*]');
-                            }
-                        }
-                        // object part (left side)
-                        if (cur.object) {
-                            if (cur.object.type === 'Identifier') {
-                                parts.unshift(cur.object.name);
-                                break;
-                            }
-                            else if (cur.object.type === 'ThisExpression') {
-                                // For `this.x` or `this.a.b` we don't want to include 'this' itself.
-                                // Stop unwrapping here; we'll drop a leading 'this' later.
-                                break;
-                            }
-                            else if (cur.object.type === 'MemberExpression') {
-                                // continue unwrapping
-                                cur = cur.object;
-                            }
-                            else {
-                                // other object types (CallExpression, etc.) — stop here
-                                break;
-                            }
-                        }
-                        else {
-                            break;
-                        }
-                    }
-                    // A chain that does not start at a name (e.g. `this.a.b` or `f().b`) begins
-                    // with its first property; one that begins with an index names no binding.
-                    if (parts.length > 0 && parts[0].startsWith('.')) {
-                        parts[0] = parts[0].substring(1);
-                    }
-                    if (parts.length > 0 && !parts[0].startsWith('[')) {
-                        // Add progressive chains: 'a', 'a.b', 'a.b[0]', 'a.b[0].c'
-                        for (let i = 0; i < parts.length; i++) {
-                            const chain = parts.slice(0, i + 1).join('');
-                            identifiers.add(chain);
-                            // Also apply functionDependencies lookup for the chain key
-                            if (functionDependencies[chain]) {
-                                for (const dependency of functionDependencies[chain]) {
-                                    identifiers.add(dependency);
-                                }
-                            }
-                        }
-                    }
-                }
-            });
-            return Array.from(identifiers);
-        }
-        /**
-         * Returns the binding name an identifier chain starts with
-         * (e.g. "items" for "items[0].name" or "user.name").
-         * @param identifier An identifier or member chain returned by extractIdentifiers.
-         * @returns The left-most name of the chain.
-         */
-        static baseIdentifier(identifier) {
-            const end = identifier.search(/[.[]/);
-            return end === -1 ? identifier : identifier.substring(0, end);
-        }
-        /**
-         * Analyzes the dependencies of functions in the provided dictionary.
-         * @param functions A dictionary mapping function names to their implementations.
-         * @returns A dictionary mapping function names to arrays of their dependencies.
-         */
-        static analyzeFunctionDependencies(functions) {
-            const functionDependencies = {};
-            // First pass: collect direct dependencies for each function
-            for (const [funcName, func] of Object.entries(functions)) {
-                try {
-                    let source = func.toString();
-                    // Handle different function formats
-                    // Arrow function: () => expr or (args) => { ... }
-                    // Method shorthand: methodName() { ... }
-                    // Function expression: function() { ... }
-                    // Detect function type more accurately
-                    const isArrowFunction = /^\s*(\([^)]*\)|[a-zA-Z_$][a-zA-Z0-9_$]*)\s*=>/.test(source);
-                    const isFunctionExpression = source.startsWith('function');
-                    const isAsyncFunction = source.startsWith('async');
-                    // If it's a method shorthand (e.g., "methodName() { ... }" or "async methodName() { ... }"), convert to function expression
-                    if (!isFunctionExpression && !isArrowFunction) {
-                        // It's likely a method shorthand, convert to function expression
-                        if (isAsyncFunction) {
-                            // Remove 'async' prefix and add 'async function' prefix
-                            source = `async function ${source.substring(5).trim()}`;
-                        }
-                        else {
-                            source = `function ${source}`;
-                        }
-                    }
-                    // Wrap in parentheses for parsing
-                    source = `(${source})`;
-                    const ast = parse(source, { ecmaVersion: "latest" });
-                    const dependencies = new Set();
-                    const declaredVariables = new Set();
-                    const thisAliases = new Set();
-                    // First, collect all declared variables (const, let, var, function params, etc.)
-                    ancestor(ast, {
-                        VariableDeclarator(node) {
-                            if (node.id.type === 'Identifier') {
-                                declaredVariables.add(node.id.name);
-                                // Detect aliases assigned from `this`, e.g. `let vm = this;`
-                                if (node.init && node.init.type === 'ThisExpression') {
-                                    thisAliases.add(node.id.name);
-                                }
-                            }
-                        },
-                        FunctionDeclaration(node) {
-                            if (node.id && node.id.type === 'Identifier') {
-                                declaredVariables.add(node.id.name);
-                            }
-                            // Add function parameters
-                            node.params.forEach((param) => {
-                                if (param.type === 'Identifier') {
-                                    declaredVariables.add(param.name);
-                                }
-                            });
-                        },
-                        FunctionExpression(node, ancestors) {
-                            // Only process the outermost function (skip nested functions)
-                            const functionAncestors = ancestors.filter((n) => n.type === 'FunctionExpression' ||
-                                n.type === 'FunctionDeclaration' ||
-                                n.type === 'ArrowFunctionExpression');
-                            if (functionAncestors.length === 1) {
-                                // Add function parameters of the main function
-                                node.params.forEach((param) => {
-                                    if (param.type === 'Identifier') {
-                                        declaredVariables.add(param.name);
-                                    }
-                                });
-                            }
-                        },
-                        ArrowFunctionExpression(node, ancestors) {
-                            // Only process the outermost function (skip nested functions)
-                            const functionAncestors = ancestors.filter((n) => n.type === 'FunctionExpression' ||
-                                n.type === 'FunctionDeclaration' ||
-                                n.type === 'ArrowFunctionExpression');
-                            if (functionAncestors.length === 1) {
-                                // Add function parameters of the main function
-                                node.params.forEach((param) => {
-                                    if (param.type === 'Identifier') {
-                                        declaredVariables.add(param.name);
-                                    }
-                                });
-                            }
-                        }
-                    });
-                    // Then, collect identifiers that are not declared within the function
-                    simple(ast, {
-                        Identifier(node) {
-                            // Skip the function name itself, declared variables, and common globals
-                            if (node.name !== funcName && !declaredVariables.has(node.name)) {
-                                dependencies.add(node.name);
-                            }
-                        },
-                        MemberExpression(node) {
-                            // Handle 'this.propertyName' patterns and aliases like 'vm.x' when 'vm = this'
-                            if (node.property.type === 'Identifier') {
-                                if (node.object.type === 'ThisExpression') {
-                                    dependencies.add(node.property.name);
-                                }
-                                else if (node.object.type === 'Identifier' && thisAliases.has(node.object.name)) {
-                                    dependencies.add(node.property.name);
-                                }
-                            }
-                        }
-                    });
-                    functionDependencies[funcName] = Array.from(dependencies);
-                }
-                catch (error) {
-                    console.warn(`Failed to analyze function '${funcName}':`, error);
-                    // If parsing fails, assume no dependencies
-                    functionDependencies[funcName] = [];
-                }
-            }
-            // Second pass: resolve each function's transitive reactive dependencies.
-            //
-            // A function's direct dependency list mixes two kinds of identifiers: references to other
-            // functions (call edges) and references to reactive data properties (the values we actually
-            // care about). We want, for every function, the full set of reactive properties reachable by
-            // following call edges to any depth.
-            //
-            // Functions are free to reference each other cyclically — a poller that reschedules itself
-            // (`scheduleOperationPoll` -> `pollOperation` -> `scheduleOperationPoll`), a pair of mutually
-            // recursive helpers, or any state machine. This is valid JavaScript, so the resolver must not
-            // treat it as an error. Every function in a cycle (more precisely, a strongly connected
-            // component) is reachable from the others, so they all share the same transitive dependency
-            // set: the union of every member's direct reactive dependencies.
-            //
-            // A depth-first walk that bails out on back-edges cannot compute that correctly — it drops the
-            // dependencies contributed around the cycle and caches incomplete, traversal-order-dependent
-            // results, which would silently break reactivity for any computed that reads reactive data
-            // through a cyclic method. We instead split each function's direct dependencies into reactive
-            // properties and call edges, then propagate reactive properties along call edges until the sets
-            // stop growing (a fixpoint). This converges regardless of cycles and yields the exact transitive
-            // closure for every function, including those participating in a cycle.
-            const directReactive = {};
-            const callEdges = {};
-            for (const funcName of Object.keys(functions)) {
-                const reactive = new Set();
-                const edges = [];
-                for (const dep of functionDependencies[funcName] || []) {
-                    if (dep === funcName)
-                        continue; // Skip self-references.
-                    if (functions[dep]) {
-                        edges.push(dep); // Call edge to another function.
-                    }
-                    else {
-                        reactive.add(dep); // Reactive data property (terminal dependency).
-                    }
-                }
-                directReactive[funcName] = reactive;
-                callEdges[funcName] = edges;
-            }
-            // Seed each function with its own direct reactive dependencies, then propagate along call edges
-            // until no set changes. Each pass can only add properties, and the universe of properties is
-            // finite, so the loop is guaranteed to terminate.
-            const resolved = {};
-            for (const funcName of Object.keys(functions)) {
-                resolved[funcName] = new Set(directReactive[funcName]);
-            }
-            let changed = true;
-            while (changed) {
-                changed = false;
-                for (const funcName of Object.keys(functions)) {
-                    const target = resolved[funcName];
-                    for (const edge of callEdges[funcName]) {
-                        for (const dep of resolved[edge]) {
-                            if (!target.has(dep)) {
-                                target.add(dep);
-                                changed = true;
-                            }
-                        }
-                    }
-                }
-            }
-            const resolvedDependencies = {};
-            for (const funcName of Object.keys(functions)) {
-                resolvedDependencies[funcName] = Array.from(resolved[funcName]);
-            }
-            return resolvedDependencies;
-        }
-        /**
-         * Rewrites an expression to replace identifiers with 'this.identifier'.
-         * This allows direct property access and assignment without using 'with' statement.
-         * Uses AST parsing to accurately identify which identifiers to replace.
-         * @param expression The original expression string.
-         * @param identifiers The list of identifiers that are available in bindings.
-         * @returns The rewritten expression.
-         */
-        static rewriteExpression(expression, identifiers, options) {
-            // Reserved words and built-in objects that should not be prefixed with 'this.'
-            const reserved = new Set([
-                'event', '$event', '$ctx', '$newValue',
-                'true', 'false', 'null', 'undefined', 'NaN', 'Infinity',
-                'Math', 'Date', 'String', 'Number', 'Boolean', 'Array', 'Object',
-                'JSON', 'console', 'window', 'document', 'navigator',
-                'parseInt', 'parseFloat', 'isNaN', 'isFinite',
-                'encodeURI', 'decodeURI', 'encodeURIComponent', 'decodeURIComponent'
-            ]);
-            // Extract ALL identifiers from the expression (including assignment left-hand side)
-            // This is necessary because the passed 'identifiers' parameter only includes
-            // identifiers that are used (right-hand side), not assigned to (left-hand side)
-            let allIdentifiersInExpression;
-            try {
-                allIdentifiersInExpression = ExpressionUtils.extractIdentifiers(expression, {}, options);
-            }
-            catch (error) {
-                console.warn('[ichigo.js] Failed to extract identifiers from expression:', expression, error);
-                return expression;
-            }
-            // Create a Set of identifiers available in bindings (from data, computed, methods)
-            // We need to know which identifiers are valid binding properties
-            const bindingIdentifiers = new Set(identifiers.filter(id => !reserved.has(id)));
-            // For assignment expressions, we also need to include the left-hand side identifier
-            // even if it's not in the tracking identifiers (because it's being assigned, not read)
-            for (const id of allIdentifiersInExpression) {
-                if (!reserved.has(id)) {
-                    bindingIdentifiers.add(id);
-                }
-            }
-            if (bindingIdentifiers.size === 0) {
-                return expression;
-            }
-            try {
-                // Build a map of positions to replace: { start: number, end: number, name: string, asThisAlias?: boolean }[]
-                const replacements = [];
-                // In script mode we must not wrap in parens (that would make multi-statement input invalid).
-                // Offsets from the parser therefore refer directly to the original expression, so no shift.
-                const asScript = options?.asScript === true;
-                const source = asScript ? expression : `(${expression})`;
-                const offsetShift = asScript ? 0 : 1;
-                const parsedAst = parse(source, { ecmaVersion: 'latest' });
-                // Track identifiers that are locally declared within the handler body (let/const/var, function
-                // params) so we don't rewrite them to `this.xxx`. Additionally detect `this` aliases such as
-                // `let vm = this;` so that `vm.x` can be rewritten to `this.x` even though `vm` is locally declared.
-                const locallyDeclared = new Set();
-                const thisAliases = new Set();
-                if (asScript) {
-                    full(parsedAst, (node) => {
-                        if (node.type === 'VariableDeclarator' && node.id?.type === 'Identifier') {
-                            locallyDeclared.add(node.id.name);
-                            if (node.init && node.init.type === 'ThisExpression') {
-                                thisAliases.add(node.id.name);
-                            }
-                        }
-                        else if (node.type === 'FunctionDeclaration' && node.id?.type === 'Identifier') {
-                            locallyDeclared.add(node.id.name);
-                        }
-                    });
-                }
-                // Collect all identifier nodes that should be replaced
-                // Use walk.fullAncestor to visit ALL nodes (including assignment LHS) while tracking ancestors
-                fullAncestor(parsedAst, (node, _state, ancestors) => {
-                    if (node.type !== 'Identifier') {
-                        return;
-                    }
-                    // Skip if not in our identifier set
-                    if (!bindingIdentifiers.has(node.name)) {
-                        return;
-                    }
-                    // Locally declared identifiers must not be rewritten to `this.xxx`. The one
-                    // exception is a `this`-alias (e.g. `let vm = this;`): when such an alias is
-                    // used as the OBJECT of a MemberExpression (`vm.x`), we replace just the
-                    // object with `this` so that `vm.x` becomes `this.x`. In every other position
-                    // (the declaration LHS, a bare reference such as `console.log(vm)`, an
-                    // argument, etc.) the alias must be left untouched — rewriting it to
-                    // `this.vm` would either produce a syntax error (`let this.vm = this;`) or
-                    // change the meaning at runtime.
-                    // walk.fullAncestor includes the visited node itself as the last entry of
-                    // `ancestors`, so the actual parent node is at length - 2.
-                    const parentNode = ancestors.length >= 2 ? ancestors[ancestors.length - 2] : undefined;
-                    const isAliasAsMemberObject = parentNode?.type === 'MemberExpression' && parentNode.object === node;
-                    if (locallyDeclared.has(node.name)) {
-                        if (!thisAliases.has(node.name) || !isAliasAsMemberObject) {
-                            return;
-                        }
-                        replacements.push({
-                            start: node.start - offsetShift,
-                            end: node.end - offsetShift,
-                            name: node.name,
-                            asThisAlias: true
-                        });
-                        return;
-                    }
-                    // Skip identifiers that are the property (not the object) of a non-computed
-                    // member access (e.g., the `prop` in `obj.prop`).
-                    if (parentNode?.type === 'MemberExpression' && !parentNode.computed && parentNode.property === node) {
-                        return;
-                    }
-                    // Add to replacements list (adjust for the wrapping parentheses in expression mode)
-                    replacements.push({
-                        start: node.start - offsetShift,
-                        end: node.end - offsetShift,
-                        name: node.name
-                    });
-                });
-                // Sort replacements by start position (descending) to replace from end to start
-                replacements.sort((a, b) => b.start - a.start);
-                // Apply replacements
-                let result = expression;
-                for (const replacement of replacements) {
-                    const insertion = replacement.asThisAlias ? 'this' : `this.${replacement.name}`;
-                    result = result.substring(0, replacement.start) + insertion + result.substring(replacement.end);
-                }
-                return result;
-            }
-            catch (error) {
-                // If AST parsing fails, fall back to the original expression
-                console.warn('Failed to rewrite expression:', expression, error);
-                return expression;
-            }
-        }
-    }
-
-    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
-    /**
-     * A centralized expression evaluator that normalizes expression evaluation across all directives.
-     *
-     * This class provides:
-     * - Consistent identifier extraction and binding resolution
-     * - Unified global object whitelisting (Math, Date, JSON, etc.)
-     * - Expression caching for performance
-     * - Centralized error handling
-     * - Support for custom expression rewriting (for VOnDirective)
-     *
-     * Example usage:
-     * ```typescript
-     * const evaluator = ExpressionEvaluator.create(
-     *   "count + 1",
-     *   bindings,
-     *   functionDependencies
-     * );
-     * const result = evaluator.evaluate();
-     * ```
+     * Utility class for creating reactive proxies that automatically track changes.
      */
-    class ExpressionEvaluator {
-        /**
-         * Cache for compiled expression functions.
-         * Key: expression string
-         * Value: compiled function
-         */
-        static cache = new Map();
-        /**
-         * Global objects that are whitelisted for use in expressions.
-         * These objects are available to all expressions for convenience and compatibility.
-         */
-        static GLOBAL_WHITELIST = {
-            Math,
-            Date,
-            JSON,
-            Array,
-            Object,
-            String,
-            Number,
-            Boolean,
-            parseInt,
-            parseFloat,
-            isNaN,
-            isFinite,
-            encodeURI,
-            decodeURI,
-            encodeURIComponent,
-            decodeURIComponent
-        };
-        /**
-         * The original expression string.
-         */
-        expression;
-        /**
-         * The identifiers extracted from the expression.
-         */
-        identifiers;
-        // The original extracted identifiers (may include member chains like 'a.b')
-        originalIdentifiers;
-        /**
-         * The bindings to use for evaluating the expression.
-         */
-        bindings;
-        /**
-         * The compiled function for evaluating the expression.
-         */
-        evaluatorFunc;
-        /**
-         * Additional context variables (e.g., 'event', '$ctx').
-         */
-        additionalContext;
-        /**
-         * Private constructor. Use ExpressionEvaluator.create() to create instances.
-         */
-        constructor(expression, bindings, identifiers, originalIdentifiers, evaluatorFunc, additionalContext) {
-            this.expression = expression;
-            this.bindings = bindings;
-            this.identifiers = identifiers;
-            this.originalIdentifiers = originalIdentifiers;
-            this.evaluatorFunc = evaluatorFunc;
-            this.additionalContext = additionalContext;
-        }
-        /**
-         * Creates an ExpressionEvaluator instance.
-         *
-         * @param expression The expression string to evaluate.
-         * @param bindings The bindings to use for evaluating the expression.
-         * @param functionDependencies A dictionary mapping function names to their dependencies.
-         * @param options Optional configuration for the evaluator.
-         * @returns An ExpressionEvaluator instance.
-         */
-        static create(expression, bindings, functionDependencies, options) {
-            // Extract identifiers from the expression (may include member chains like 'a.b')
-            const extractedIdentifiers = ExpressionUtils.extractIdentifiers(expression, functionDependencies);
-            // For compilation we must only pass simple identifier names (no dots).
-            // Use the base (left-most) segment of member chains and preserve order.
-            const baseIdentifiers = [];
-            for (const id of extractedIdentifiers) {
-                const base = ExpressionUtils.baseIdentifier(id);
-                if (!baseIdentifiers.includes(base)) {
-                    baseIdentifiers.push(base);
-                }
-            }
-            // Apply custom rewrite if provided (used by VOnDirective)
-            let processedExpression = expression;
-            if (options?.rewriteExpression) {
-                // Pass the original extracted identifiers (may include member chains)
-                processedExpression = options.rewriteExpression(expression, extractedIdentifiers);
-            }
-            // Build cache key including options that affect compilation
-            const cacheKey = JSON.stringify({
-                expr: processedExpression,
-                additionalCtx: options?.additionalContext ? Object.keys(options.additionalContext).sort() : []
-            });
-            // Check cache
-            let evaluatorFunc = this.cache.get(cacheKey);
-            if (!evaluatorFunc) {
-                // Compile the expression using base identifiers (no dots)
-                evaluatorFunc = this.compileExpression(processedExpression, baseIdentifiers, options);
-                // Cache the compiled function
-                this.cache.set(cacheKey, evaluatorFunc);
-            }
-            return new ExpressionEvaluator(expression, bindings, baseIdentifiers, extractedIdentifiers, evaluatorFunc, options?.additionalContext);
-        }
+    class ReactiveProxy {
         /**
-         * Compiles an expression into a function.
-         *
-         * @param expression The expression string to compile.
-         * @param identifiers The identifiers extracted from the expression.
-         * @param options Optional configuration.
-         * @returns A compiled function.
+         * A WeakMap to store the proxy for each target object and path combination.
+         * This prevents creating multiple proxies for the same object accessed from different paths.
          */
-        static compileExpression(expression, identifiers, options) {
-            // Build parameter list: globals first, then identifiers (base names), then additional context
-            // Filter out identifiers that are already in the global whitelist to avoid duplicate parameters
-            const globalKeys = new Set(Object.keys(ExpressionEvaluator.GLOBAL_WHITELIST));
-            const filteredIdentifiers = identifiers.filter(id => !globalKeys.has(id));
-            const params = [
-                ...Object.keys(ExpressionEvaluator.GLOBAL_WHITELIST),
-                ...filteredIdentifiers
-            ];
-            // Add additional context parameters if provided
-            if (options?.additionalContext) {
-                params.push(...Object.keys(options.additionalContext));
-            }
-            const args = params.join(", ");
-            const funcBody = `return (${expression});`;
-            try {
-                // Create the function with error handling
-                return new Function(args, funcBody);
-            }
-            catch (error) {
-                throw new Error(`Failed to compile expression: ${expression}\nError: ${error}`);
-            }
-        }
+        static proxyCache = new WeakMap();
         /**
-         * Evaluates the expression with the current bindings.
-         *
-         * @returns The result of the expression evaluation.
+         * A WeakMap to track which objects are proxies, mapping proxy -> original target.
+         * This prevents double-wrapping of already proxied objects.
          */
-        evaluate() {
-            try {
-                // Build arguments: globals first, then identifiers, then additional context
-                // Filter out identifiers that are already in the global whitelist to match compileExpression
-                const globalKeys = new Set(Object.keys(ExpressionEvaluator.GLOBAL_WHITELIST));
-                const filteredIdentifiers = this.identifiers.filter(id => !globalKeys.has(id));
-                const values = [
-                    // Global whitelist values
-                    ...Object.values(ExpressionEvaluator.GLOBAL_WHITELIST),
-                    // Identifier values from bindings (excluding globals)
-                    ...filteredIdentifiers.map(id => this.bindings.get(id))
-                ];
-                // Add additional context values if provided
-                if (this.additionalContext) {
-                    values.push(...Object.values(this.additionalContext));
-                }
-                // Call the compiled function with the gathered values
-                return this.evaluatorFunc(...values);
-            }
-            catch (error) {
-                console.error(`[ichigo.js] Error evaluating expression: ${this.expression}`, error);
-                throw error;
-            }
-        }
+        static proxyToTarget = new WeakMap();
         /**
-         * Evaluates the expression and returns the result as a boolean.
-         *
-         * @returns The boolean result of the expression evaluation.
+         * A WeakSet to track objects marked as "raw" (non-reactive).
+         * These objects will not be wrapped with Proxy.
          */
-        evaluateAsBoolean() {
-            return Boolean(this.evaluate());
-        }
+        static rawObjects = new WeakSet();
         /**
-         * Gets the list of identifiers extracted from the expression.
+         * A WeakMap to store the path for each proxy object.
+         * This allows retrieving the source path of an object for computed property mapping.
          */
-        get dependentIdentifiers() {
-            // Return the original extracted identifiers (may include member chains like 'a.b')
-            return this.originalIdentifiers;
-        }
+        static proxyPaths = new WeakMap();
         /**
-         * Clears the expression cache.
-         * This should be called sparingly, as it will force recompilation of all expressions.
+         * Dispatchers per (target, path). Every target reached while walking a proxy
+         * subtree registers an entry pointing at the same dispatcher as the outermost
+         * proxy of that subtree, so callers can look up the dispatcher from any
+         * intermediate proxy when subscribing.
          */
-        static clearCache() {
-            this.cache.clear();
-        }
-    }
-
-    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
-    /**
-     * Directive for binding dynamic attributes to DOM elements.
-     * The `v-bind` directive allows you to bind HTML attributes to expressions in your data model.
-     * The syntax for using the `v-bind` directive is `v-bind:attribute="expression"`, where `attribute` is the name of the HTML attribute you want to bind (e.g., `src`, `href`, `class`, etc.), and `expression` is a JavaScript expression that evaluates to the value you want to assign to that attribute.
-     * Example usage:
-     *     <img v-bind:src="imageSrc" />
-     * The value of `imageSrc` should be defined in the component's data object.
-     * When the value of `imageSrc` changes, the `src` attribute of the `<img>` element will automatically update to reflect the new value.
-     * This directive is particularly useful for dynamically updating attributes based on user interactions or other data changes in your application.
-     * It helps keep the DOM in sync with the underlying data model, making it easier to build reactive user interfaces.
-     * The `v-bind` directive can also be used with shorthand syntax using a colon (:).
-     * For example, `:src="imageSrc"` is equivalent to `v-bind:src="imageSrc"`.
-     * This shorthand syntax is often used for brevity and improved readability in templates.
-     * Overall, the `v-bind` directive is a powerful tool for creating dynamic and responsive web applications by allowing seamless integration between the data model and the DOM.
-     */
-    class VBindDirective {
+        static dispatchers = new WeakMap();
         /**
-         * The virtual node to which this directive is applied.
+         * A Map to store path aliases.
+         * Key: alias path (e.g., "editingNestedStep.steps")
+         * Value: source path (e.g., "routes[0].steps[0].steps")
+         * This allows mapping variable names to their actual source paths for dependency tracking.
          */
-        #vNode;
+        static pathAliases = new Map();
         /**
-         * The expression evaluator for this directive.
+         * Compiled patterns for identifiers that contain a "[*]" index, keyed by the
+         * identifier and whether descendants of the path also match.
          */
-        #evaluator;
+        static pathPatterns = new Map();
         /**
-         * The name of the attribute to bind (e.g., "src", "class", "style").
+         * The set collecting the paths read through any proxy while track() runs, or
+         * undefined when no expression is being tracked.
          */
-        #attributeName;
+        static tracker;
         /**
-         * The original expression string from the directive.
+         * Whether a property key is spelled as an array index ("0", "12") rather than a
+         * property name. Both the proxy and the expression analyzer decide between
+         * "items[0]" and "items.name" with this test alone, so a numeric key on a plain
+         * object and a numeric key on an array get the same spelling.
+         *
+         * @param key The property key as a string.
+         * @returns True if the key is a canonical non-negative integer.
          */
-        #expression;
+        static isIndexKey(key) {
+            return /^(?:0|[1-9]\d*)$/.test(key);
+        }
         /**
-         * The set of class names managed by this directive (used when binding to the "class" attribute).
-         * This helps in tracking which classes were added by this directive to avoid conflicts with other class manipulations.
+         * Appends a property key to a source path the way change paths are reported:
+         * an index in brackets ("items[0]"), a name after a dot ("user.name").
+         *
+         * @param path The path of the containing object, or "" for a root binding.
+         * @param key The property key being appended.
+         * @returns The joined path.
          */
-        #managedClasses = new Set();
+        static joinPath(path, key) {
+            const keyStr = String(key);
+            if (!path) {
+                return keyStr;
+            }
+            return this.isIndexKey(keyStr) ? `${path}[${keyStr}]` : `${path}.${keyStr}`;
+        }
         /**
-         * The set of style properties managed by this directive (used when binding to the "style" attribute).
-         * This helps in tracking which styles were added by this directive to avoid conflicts with other style manipulations.
+         * Runs fn while recording, into paths, the source path of every property read
+         * through a reactive proxy. Nested calls record into the innermost set only;
+         * the previous set is restored when fn returns or throws.
+         *
+         * @param paths The set that receives the paths read.
+         * @param fn The function to run.
+         * @returns The value fn returns.
          */
-        #managedStyles = new Set();
+        static track(paths, fn) {
+            const previous = this.tracker;
+            this.tracker = paths;
+            try {
+                return fn();
+            }
+            finally {
+                this.tracker = previous;
+            }
+        }
         /**
-         * @param context The context for parsing the directive.
+         * The `Object.prototype.toString` tags of the *only* value types we deeply
+         * proxy. Everything else is returned untouched (raw).
+         *
+         * Rationale: a Proxy can only safely intercept plain data containers. Built-in
+         * and host objects — `Date`, `RegExp`, `File`, `Blob`, `FileList`, `Promise`,
+         * `WeakMap`/`WeakSet`, typed arrays, DOM nodes, etc. — carry private internal
+         * slots, and invoking their native methods with a Proxy as the `this`/receiver
+         * throws "Illegal invocation". They must therefore never be wrapped. This is an
+         * allow-list rather than a deny-list so that *every* such exotic type is
+         * excluded by default, not just the handful we happened to enumerate.
+         *
+         * Plain user-defined class instances report `[object Object]` (unless they set
+         * `Symbol.toStringTag`) and so remain reactive, preserving prior behaviour.
+         * `Map`/`Set` stay reactive because the proxy specially wraps their mutation
+         * methods (see the `get` trap); `WeakMap`/`WeakSet` are intentionally excluded
+         * since they cannot be wrapped that way and would break the same as `File`.
+         *
+         * Callers that want a plain object kept non-reactive can still opt out
+         * explicitly via {@link markRaw}.
          */
-        constructor(context) {
-            this.#vNode = context.vNode;
-            // Extract the attribute name from the directive
-            // e.g., "v-bind:src" -> "src", ":href" -> "href"
-            const attrName = context.attribute.name;
-            if (attrName.startsWith('v-bind:')) {
-                this.#attributeName = attrName.substring(7);
+        static REACTIVE_TYPE_TAGS = new Set([
+            '[object Object]',
+            '[object Array]',
+            '[object Arguments]',
+            '[object Map]',
+            '[object Set]',
+        ]);
+        /**
+         * Whether the given non-null object value is one we deeply proxy.
+         * See {@link REACTIVE_TYPE_TAGS} for the reasoning.
+         */
+        static isReactivable(value) {
+            return this.REACTIVE_TYPE_TAGS.has(Object.prototype.toString.call(value));
+        }
+        /**
+         * Creates a reactive proxy for the given object.
+         * The proxy will call the onChange callback whenever a property is modified.
+         *
+         * @param target The object to make reactive.
+         * @param onChange Callback function to call when the object changes. Receives the full path of the changed property.
+         * @param path The current path in the object tree (used internally for nested objects).
+         * @param inheritedDispatcher Internal: the dispatcher inherited from an enclosing create() call when wrapping a nested target. External callers must omit this.
+         * @returns A reactive proxy of the target object.
+         */
+        static create(target, onChange, path = '', inheritedDispatcher) {
+            // If the target is not an object or is null, return it as-is
+            if (typeof target !== 'object' || target === null) {
+                return target;
             }
-            else if (attrName.startsWith(':')) {
-                this.#attributeName = attrName.substring(1);
+            // Don't wrap objects marked as raw (non-reactive)
+            if (this.rawObjects.has(target)) {
+                return target;
             }
-            // Parse the expression and create the evaluator
-            this.#expression = context.attribute.value;
-            if (this.#expression && context.vNode.bindings) {
-                this.#evaluator = ExpressionEvaluator.create(this.#expression, context.vNode.bindings, context.vNode.vApplication.functionDependencies);
+            // Only deeply proxy plain data containers; return every built-in/host
+            // object (Date, File, Blob, Promise, WeakMap, DOM nodes, …) as-is, since
+            // their native methods break when invoked through a Proxy receiver.
+            if (!this.isReactivable(target)) {
+                return target;
+            }
+            // Check if the target is already a proxy - if so, return it as-is to prevent double-wrapping
+            if (this.proxyToTarget.has(target)) {
+                return target;
+            }
+            // Resolve (and register) the dispatcher for this (target, path).
+            // Nested create() calls inherit the dispatcher from the enclosing call so
+            // that a single dispatcher fans out changes at any depth of the subtree.
+            const dispatcher = this.resolveDispatcher(target, path, inheritedDispatcher);
+            if (onChange) {
+                dispatcher.listeners.add(onChange);
+            }
+            // Check if we already have a proxy for this target with this path
+            let pathMap = this.proxyCache.get(target);
+            if (pathMap) {
+                const existingProxy = pathMap.get(path);
+                if (existingProxy) {
+                    return existingProxy;
+                }
+            }
+            else {
+                pathMap = new Map();
+                this.proxyCache.set(target, pathMap);
+            }
+            // Create the proxy with path captured in closure
+            const proxy = new Proxy(target, {
+                get(obj, key, receiver) {
+                    const value = Reflect.get(obj, key);
+                    // Record the read for an expression being tracked (see track()).
+                    // Function-valued members (push, Map#get, …) are accesses to behaviour,
+                    // not data, so they are left out.
+                    if (ReactiveProxy.tracker && typeof key !== 'symbol' && typeof value !== 'function') {
+                        ReactiveProxy.tracker.add(ReactiveProxy.joinPath(path, key));
+                    }
+                    // If the value is an object or array, make it reactive too
+                    if (typeof value === 'object' && value !== null) {
+                        // Don't wrap objects marked as raw (non-reactive)
+                        if (ReactiveProxy.rawObjects.has(value)) {
+                            return value;
+                        }
+                        // Only deeply proxy plain data containers; hand back built-in
+                        // and host objects (Date, File, Blob, Promise, WeakMap, DOM
+                        // nodes, …) untouched so their native methods keep working.
+                        if (!ReactiveProxy.isReactivable(value)) {
+                            return value;
+                        }
+                        // Build the nested path
+                        const nestedPath = ReactiveProxy.joinPath(path, key);
+                        return ReactiveProxy.create(value, undefined, nestedPath, dispatcher);
+                    }
+                    // If the value is a function, we need to wrap it to ensure that any mutations it performs also trigger onChange
+                    if (typeof value === 'function') {
+                        // For arrays, we only want to wrap mutation methods, not read methods like 'slice', 'concat', etc.
+                        if (Array.isArray(obj)) {
+                            const arrayMutationMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
+                            if (!arrayMutationMethods.includes(key)) {
+                                return value;
+                            }
+                            return function (...args) {
+                                const result = value.apply(this === receiver ? obj : this, args);
+                                ReactiveProxy.dispatch(dispatcher, path || undefined);
+                                return result;
+                            };
+                        }
+                        // For Map, we only want to wrap mutation methods, not read methods like 'get' or 'has'
+                        if (obj.constructor.name === 'Map') {
+                            const mapMutationMethods = ['set', 'delete', 'clear'];
+                            return function (...args) {
+                                const result = value.apply(this === receiver ? obj : this, args);
+                                if (mapMutationMethods.includes(key)) {
+                                    ReactiveProxy.dispatch(dispatcher, path || undefined);
+                                }
+                                return result;
+                            };
+                        }
+                        // For Set, we only want to wrap mutation methods, not read methods like 'has'
+                        if (obj.constructor.name === 'Set') {
+                            const setMutationMethods = ['add', 'delete', 'clear'];
+                            return function (...args) {
+                                const result = value.apply(this === receiver ? obj : this, args);
+                                if (setMutationMethods.includes(key)) {
+                                    ReactiveProxy.dispatch(dispatcher, path || undefined);
+                                }
+                                return result;
+                            };
+                        }
+                    }
+                    return value;
+                },
+                set(obj, key, value) {
+                    const oldValue = Reflect.get(obj, key);
+                    const result = Reflect.set(obj, key, value);
+                    // Only trigger onChange if the value actually changed
+                    if (oldValue !== value) {
+                        ReactiveProxy.dispatch(dispatcher, ReactiveProxy.joinPath(path, key));
+                    }
+                    return result;
+                },
+                deleteProperty(obj, key) {
+                    const result = Reflect.deleteProperty(obj, key);
+                    ReactiveProxy.dispatch(dispatcher, ReactiveProxy.joinPath(path, key));
+                    return result;
+                }
+            });
+            // Cache the proxy for this path
+            pathMap.set(path, proxy);
+            // Track that this proxy wraps the target to prevent double-wrapping
+            this.proxyToTarget.set(proxy, target);
+            // Store the path for this proxy (for computed property mapping)
+            if (path) {
+                this.proxyPaths.set(proxy, path);
             }
-            // Remove the directive attribute from the element
-            this.#vNode.node.removeAttribute(context.attribute.name);
-        }
-        /**
-         * @inheritdoc
-         */
-        get name() {
-            return StandardDirectiveName.V_BIND;
-        }
-        /**
-         * @inheritdoc
-         */
-        get vNode() {
-            return this.#vNode;
+            return proxy;
         }
         /**
-         * @inheritdoc
+         * Looks up the dispatcher associated with (target, path), or installs a new one.
+         * When called for a nested target during proxy walking, the enclosing dispatcher
+         * is reused so a single subtree fans out changes through one notification path.
          */
-        get needsAnchor() {
-            return false;
+        static resolveDispatcher(target, path, inheritedDispatcher) {
+            let pathMap = this.dispatchers.get(target);
+            if (!pathMap) {
+                pathMap = new Map();
+                this.dispatchers.set(target, pathMap);
+            }
+            const existing = pathMap.get(path);
+            if (existing) {
+                return existing;
+            }
+            const dispatcher = inheritedDispatcher ?? { listeners: new Set() };
+            pathMap.set(path, dispatcher);
+            return dispatcher;
         }
         /**
-         * @inheritdoc
+         * Invokes every listener attached to the dispatcher.
+         * Iterates a snapshot of the listener set so unsubscribing during dispatch is safe.
          */
-        get bindingsPreparer() {
-            return undefined;
+        static dispatch(dispatcher, changedPath) {
+            if (dispatcher.listeners.size === 0) {
+                return;
+            }
+            const snapshot = Array.from(dispatcher.listeners);
+            for (const listener of snapshot) {
+                listener(changedPath);
+            }
         }
         /**
-         * @inheritdoc
+         * Subscribes a listener to changes inside the subtree of an existing reactive proxy.
+         *
+         * The listener is scoped by the proxy's source path: only changes at or below that
+         * path are delivered, which lets a child component receive notifications when the
+         * nested contents of a prop change even though the prop reference itself is unchanged.
+         *
+         * @param proxyOrTarget A proxy returned from create(), or the underlying target object.
+         * @param listener Called with the full source path of every relevant change.
+         * @returns A function that removes the subscription.
          */
-        get domUpdater() {
-            const identifiers = this.#evaluator?.dependentIdentifiers ?? [];
-            // Create an updater that handles the attribute binding
-            const updater = {
-                get dependentIdentifiers() {
-                    return identifiers;
-                },
-                applyToDOM: () => {
-                    this.#render();
+        static subscribe(proxyOrTarget, listener) {
+            if (typeof proxyOrTarget !== 'object' || proxyOrTarget === null) {
+                return () => { };
+            }
+            const target = (this.proxyToTarget.get(proxyOrTarget) ?? proxyOrTarget);
+            const scopePath = this.proxyPaths.get(proxyOrTarget) ?? '';
+            const pathMap = this.dispatchers.get(target);
+            const dispatcher = pathMap?.get(scopePath);
+            if (!dispatcher) {
+                return () => { };
+            }
+            const wrapper = scopePath
+                ? (changedPath) => {
+                    if (changedPath === scopePath ||
+                        (typeof changedPath === 'string' && (changedPath.startsWith(scopePath + '.') ||
+                            changedPath.startsWith(scopePath + '[')))) {
+                        listener(changedPath);
+                    }
                 }
+                : listener;
+            dispatcher.listeners.add(wrapper);
+            return () => {
+                dispatcher.listeners.delete(wrapper);
             };
-            return updater;
-        }
-        /**
-         * @inheritdoc
-         */
-        get templatize() {
-            return false;
-        }
-        /**
-         * @inheritdoc
-         */
-        get dependentIdentifiers() {
-            return this.#evaluator?.dependentIdentifiers ?? [];
         }
         /**
-         * Indicates if this directive is binding the "key" attribute.
-         * The "key" attribute is special and is used for optimizing rendering of lists.
-         * If this directive is binding the "key" attribute, it will be handled by the VForDirective.
+         * Checks if the given object is a reactive proxy.
+         *
+         * @param obj The object to check.
+         * @returns True if the object is a reactive proxy, false otherwise.
          */
-        get isKey() {
-            return (this.#attributeName === 'key');
+        static isReactive(obj) {
+            return this.proxyCache.has(obj);
         }
         /**
-         * Indicates if this directive is binding the "options" attribute or any of its sub-properties (e.g., "options.intersection").
-         * The "options" attribute is special and is used for passing options to certain directives like VIntersectionDirective.
+         * Unwraps a reactive proxy to get the original object.
+         * If the object is not a proxy, returns it as-is.
+         *
+         * @param obj The object to unwrap.
+         * @returns The original object.
          */
-        get isOptions() {
-            return (this.#attributeName === 'options' || this.#attributeName?.startsWith('options.') === true);
+        static unwrap(obj) {
+            // This is a simplified implementation
+            // In a full implementation, we'd need to store a reverse mapping
+            return obj;
         }
         /**
-         * Gets the name of the attribute being bound (e.g., "src", "class", "options", "options.intersection").
+         * Marks an object as "raw" (non-reactive).
+         * Objects marked as raw will not be wrapped with Proxy when accessed from reactive objects.
+         * This is useful for objects that should not be reactive, such as:
+         * - Objects with private fields (class instances with # fields)
+         * - Third-party library instances
+         * - Objects used only for method calls
+         *
+         * @param obj The object to mark as raw.
+         * @returns The same object (for chaining).
          */
-        get attributeName() {
-            return this.#attributeName;
+        static markRaw(obj) {
+            if (typeof obj === 'object' && obj !== null) {
+                this.rawObjects.add(obj);
+            }
+            return obj;
         }
         /**
-         * Gets the original expression string from the directive.
+         * Checks if an object is marked as raw (non-reactive).
+         *
+         * @param obj The object to check.
+         * @returns True if the object is marked as raw, false otherwise.
          */
-        get expression() {
-            return this.#expression;
+        static isRaw(obj) {
+            return typeof obj === 'object' && obj !== null && this.rawObjects.has(obj);
         }
         /**
-         * Evaluates the bound expression and returns the current value.
-         * Returns undefined when no evaluator is available (e.g., empty expression).
+         * Gets the source path for a proxy object.
+         * This is used to map computed property values back to their source paths.
+         * For example, if a computed property returns `model.elements[0]`,
+         * this method returns "model.elements[0]" for that object.
+         *
+         * @param obj The proxy object to get the path for.
+         * @returns The source path, or undefined if not found.
          */
-        evaluate() {
-            return this.#evaluator?.evaluate();
+        static getPath(obj) {
+            if (typeof obj !== 'object' || obj === null) {
+                return undefined;
+            }
+            return this.proxyPaths.get(obj);
         }
         /**
-         * @inheritdoc
+         * Registers a path alias.
+         * This is used when a variable is assigned to reference an existing reactive object.
+         * For example, when `editingNestedStep = routes[0].steps[0]`, this creates an alias
+         * so that changes to "routes[0].steps[0].steps" also match "editingNestedStep.steps".
+         *
+         * @param aliasPath The alias path (e.g., "editingNestedStep")
+         * @param sourcePath The source path (e.g., "routes[0].steps[0]")
          */
-        get onMount() {
-            // A constant expression (e.g. :label="'Apple'") has no reactive
-            // identifiers, so the identifier-driven update cycle never applies it.
-            // Render it once at mount instead.
-            if (this.#evaluator && this.#evaluator.dependentIdentifiers.length === 0) {
-                return () => {
-                    this.#render();
-                };
+        static registerPathAlias(aliasPath, sourcePath) {
+            if (aliasPath && sourcePath && aliasPath !== sourcePath) {
+                this.pathAliases.set(aliasPath, sourcePath);
             }
-            return undefined;
         }
         /**
-         * @inheritdoc
+         * Unregisters a path alias.
+         *
+         * @param aliasPath The alias path to remove
          */
-        get onMounted() {
-            return undefined;
+        static unregisterPathAlias(aliasPath) {
+            // Remove all aliases that start with the given path
+            for (const key of this.pathAliases.keys()) {
+                if (key === aliasPath || key.startsWith(aliasPath + '.') || key.startsWith(aliasPath + '[')) {
+                    this.pathAliases.delete(key);
+                }
+            }
         }
         /**
-         * @inheritdoc
+         * Resolves an alias path to its source path.
+         * Also handles nested paths (e.g., "editingNestedStep.steps" -> "routes[0].steps[0].steps").
+         *
+         * @param aliasPath The alias path to resolve
+         * @returns The source path, or undefined if no alias exists
          */
-        get onUpdate() {
+        static resolvePathAlias(aliasPath) {
+            // Direct match
+            if (this.pathAliases.has(aliasPath)) {
+                return this.pathAliases.get(aliasPath);
+            }
+            // Check if this is a nested path of an aliased variable
+            // e.g., "editingNestedStep.steps" when "editingNestedStep" is aliased
+            for (const [alias, source] of this.pathAliases.entries()) {
+                if (aliasPath.startsWith(alias + '.') || aliasPath.startsWith(alias + '[')) {
+                    const suffix = aliasPath.substring(alias.length);
+                    return source + suffix;
+                }
+            }
             return undefined;
         }
         /**
-         * @inheritdoc
+         * Checks if a change path matches an identifier, considering path aliases.
+         * For example, if "editingNestedStep" is aliased to "routes[0].steps[0]",
+         * then a change to "routes[0].steps[0].steps" should match "editingNestedStep.steps".
+         *
+         * @param changePath The path that was changed (e.g., "routes[0].steps[0].steps")
+         * @param identifier The identifier to check (e.g., "editingNestedStep.steps")
+         * @returns True if the change path matches the identifier
          */
-        get onUpdated() {
-            return undefined;
+        static doesChangeMatchIdentifier(changePath, identifier) {
+            // Direct match
+            if (this.pathMatches(changePath, identifier)) {
+                return true;
+            }
+            // Check if the change path is the resolved identifier or lies below it
+            // (handles cases like array item changes)
+            const resolvedIdentifier = this.resolvePathAlias(identifier);
+            if (resolvedIdentifier && this.pathMatches(changePath, resolvedIdentifier, true)) {
+                return true;
+            }
+            return false;
         }
         /**
-         * @inheritdoc
+         * Checks whether a change path names the location an identifier refers to.
+         * A "[*]" index in the identifier (e.g. "items[*].name" for `items[i].name`)
+         * stands for an index known only when the expression runs and matches any
+         * one index or key.
+         *
+         * @param changePath The path that was changed (e.g., "items[2].name")
+         * @param identifier The identifier to check (e.g., "items[*].name")
+         * @param descendants Whether a change below the identifier also matches
+         * @returns True if the change path matches the identifier
          */
-        get onUnmount() {
-            return undefined;
+        static pathMatches(changePath, identifier, descendants = false) {
+            if (changePath === identifier) {
+                return true;
+            }
+            if (!identifier.includes('[*]')) {
+                return descendants && (changePath.startsWith(identifier + '.') || changePath.startsWith(identifier + '['));
+            }
+            const cacheKey = descendants ? identifier + ' ' : identifier;
+            let pattern = this.pathPatterns.get(cacheKey);
+            if (!pattern) {
+                const source = identifier
+                    .split('[*]')
+                    .map(part => part.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+                    .join('(?:\\[[^\\]]*\\]|\\.[^.[]+)');
+                pattern = new RegExp(`^${source}${descendants ? '(?:[.[].*)?' : ''}$`);
+                this.pathPatterns.set(cacheKey, pattern);
+            }
+            return pattern.test(changePath);
         }
+    }
+
+    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    /**
+     * Utility class for analyzing JavaScript expressions to extract variable and function dependencies.
+     */
+    class ExpressionUtils {
         /**
-         * @inheritdoc
+         * Extracts variable and function names used in the expression.
+         * @param expression The expression string to analyze.
+         * @param functionDependencies A dictionary mapping function names to their dependencies.
+         * @param options Optional parsing options.
+         *   - asScript: If true, parse the input as a Script (allows multi-statement source with semicolons,
+         *     declarations, control-flow, etc.). If false/omitted, parse as a single expression (the default,
+         *     for backward compatibility with interpolation and binding directives).
+         * @returns An array of identifier names.
          */
-        get onUnmounted() {
-            return undefined;
+        static extractIdentifiers(expression, functionDependencies, options) {
+            const identifiers = new Set();
+            // In expression mode we wrap in parens so acorn parses the source as a single expression.
+            // In script mode we parse as a Program so that multi-statement bodies (e.g. "a=1; b=2") work.
+            const source = options?.asScript ? expression : `(${expression})`;
+            const ast = parse(source, { ecmaVersion: "latest" });
+            // Use walk.full instead of walk.simple to visit ALL nodes including assignment LHS
+            full(ast, (node) => {
+                if (node.type === 'Identifier') {
+                    identifiers.add(node.name);
+                    // Check if the identifier is a function name
+                    if (functionDependencies[node.name]) {
+                        // If it is, add its dependencies to the list of identifiers
+                        for (const dependency of functionDependencies[node.name]) {
+                            identifiers.add(dependency);
+                        }
+                    }
+                }
+                else if (node.type === 'MemberExpression') {
+                    // Reconstruct chain parts from a MemberExpression (e.g. a.b.c). Each part
+                    // carries its own separator so that the chain is spelled the way the reactive
+                    // proxy reports changes: array indices in brackets, properties after a dot
+                    // (e.g. "items[0].name").
+                    const parts = [];
+                    let cur = node;
+                    while (cur) {
+                        // property part (right side)
+                        if (cur.property) {
+                            if (!cur.computed && cur.property.type === 'Identifier') {
+                                parts.unshift(`.${cur.property.name}`);
+                            }
+                            else if (cur.computed && cur.property.type === 'Literal') {
+                                // items[0] and items["0"] both name an index; labels['a-b'] names a key.
+                                const key = String(cur.property.value);
+                                parts.unshift(ReactiveProxy.isIndexKey(key) ? `[${key}]` : `.${key}`);
+                            }
+                            else if (cur.computed) {
+                                // e.g. items[i] or items[i + 1]: the index is only known when the
+                                // expression runs, so "[*]" stands for any index or key. Identifiers
+                                // inside the index expression are visited separately by walk.full.
+                                parts.unshift('[*]');
+                            }
+                        }
+                        // object part (left side)
+                        if (cur.object) {
+                            if (cur.object.type === 'Identifier') {
+                                parts.unshift(cur.object.name);
+                                break;
+                            }
+                            else if (cur.object.type === 'ThisExpression') {
+                                // For `this.x` or `this.a.b` we don't want to include 'this' itself.
+                                // Stop unwrapping here; we'll drop a leading 'this' later.
+                                break;
+                            }
+                            else if (cur.object.type === 'MemberExpression') {
+                                // continue unwrapping
+                                cur = cur.object;
+                            }
+                            else {
+                                // other object types (CallExpression, etc.) — stop here
+                                break;
+                            }
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                    // A chain that does not start at a name (e.g. `this.a.b` or `f().b`) begins
+                    // with its first property; one that begins with an index names no binding.
+                    if (parts.length > 0 && parts[0].startsWith('.')) {
+                        parts[0] = parts[0].substring(1);
+                    }
+                    if (parts.length > 0 && !parts[0].startsWith('[')) {
+                        // Add progressive chains: 'a', 'a.b', 'a.b[0]', 'a.b[0].c'
+                        for (let i = 0; i < parts.length; i++) {
+                            const chain = parts.slice(0, i + 1).join('');
+                            identifiers.add(chain);
+                            // Also apply functionDependencies lookup for the chain key
+                            if (functionDependencies[chain]) {
+                                for (const dependency of functionDependencies[chain]) {
+                                    identifiers.add(dependency);
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            return Array.from(identifiers);
         }
         /**
-         * @inheritdoc
+         * Returns the binding name an identifier chain starts with
+         * (e.g. "items" for "items[0].name" or "user.name").
+         * @param identifier An identifier or member chain returned by extractIdentifiers.
+         * @returns The left-most name of the chain.
          */
-        destroy() {
-            // Do nothing. No special cleanup needed.
+        static baseIdentifier(identifier) {
+            const end = identifier.search(/[.[]/);
+            return end === -1 ? identifier : identifier.substring(0, end);
         }
         /**
-         * Renders the bound attribute by evaluating the expression and updating the DOM element.
+         * Analyzes the dependencies of functions in the provided dictionary.
+         * @param functions A dictionary mapping function names to their implementations.
+         * @returns A dictionary mapping function names to arrays of their dependencies.
          */
-        #render() {
-            // Do nothing for special attributes
-            if (this.isKey || this.isOptions) {
-                return;
-            }
-            const element = this.#vNode.node;
-            const attributeName = this.#attributeName;
-            // If there's no evaluator or attribute name, do nothing
-            if (!this.#evaluator || !attributeName) {
-                return;
-            }
-            // Evaluate the expression to get the value
-            const value = this.#evaluator.evaluate();
-            // Handle different attribute types
-            if (attributeName === 'class') {
-                this.#updateClass(element, value);
-            }
-            else if (attributeName === 'style') {
-                this.#updateStyle(element, value);
+        static analyzeFunctionDependencies(functions) {
+            const functionDependencies = {};
+            // First pass: collect direct dependencies for each function
+            for (const [funcName, func] of Object.entries(functions)) {
+                try {
+                    let source = func.toString();
+                    // Handle different function formats
+                    // Arrow function: () => expr or (args) => { ... }
+                    // Method shorthand: methodName() { ... }
+                    // Function expression: function() { ... }
+                    // Detect function type more accurately
+                    const isArrowFunction = /^\s*(\([^)]*\)|[a-zA-Z_$][a-zA-Z0-9_$]*)\s*=>/.test(source);
+                    const isFunctionExpression = source.startsWith('function');
+                    const isAsyncFunction = source.startsWith('async');
+                    // If it's a method shorthand (e.g., "methodName() { ... }" or "async methodName() { ... }"), convert to function expression
+                    if (!isFunctionExpression && !isArrowFunction) {
+                        // It's likely a method shorthand, convert to function expression
+                        if (isAsyncFunction) {
+                            // Remove 'async' prefix and add 'async function' prefix
+                            source = `async function ${source.substring(5).trim()}`;
+                        }
+                        else {
+                            source = `function ${source}`;
+                        }
+                    }
+                    // Wrap in parentheses for parsing
+                    source = `(${source})`;
+                    const ast = parse(source, { ecmaVersion: "latest" });
+                    const dependencies = new Set();
+                    const declaredVariables = new Set();
+                    const thisAliases = new Set();
+                    // First, collect all declared variables (const, let, var, function params, etc.)
+                    ancestor(ast, {
+                        VariableDeclarator(node) {
+                            if (node.id.type === 'Identifier') {
+                                declaredVariables.add(node.id.name);
+                                // Detect aliases assigned from `this`, e.g. `let vm = this;`
+                                if (node.init && node.init.type === 'ThisExpression') {
+                                    thisAliases.add(node.id.name);
+                                }
+                            }
+                        },
+                        FunctionDeclaration(node) {
+                            if (node.id && node.id.type === 'Identifier') {
+                                declaredVariables.add(node.id.name);
+                            }
+                            // Add function parameters
+                            node.params.forEach((param) => {
+                                if (param.type === 'Identifier') {
+                                    declaredVariables.add(param.name);
+                                }
+                            });
+                        },
+                        FunctionExpression(node, ancestors) {
+                            // Only process the outermost function (skip nested functions)
+                            const functionAncestors = ancestors.filter((n) => n.type === 'FunctionExpression' ||
+                                n.type === 'FunctionDeclaration' ||
+                                n.type === 'ArrowFunctionExpression');
+                            if (functionAncestors.length === 1) {
+                                // Add function parameters of the main function
+                                node.params.forEach((param) => {
+                                    if (param.type === 'Identifier') {
+                                        declaredVariables.add(param.name);
+                                    }
+                                });
+                            }
+                        },
+                        ArrowFunctionExpression(node, ancestors) {
+                            // Only process the outermost function (skip nested functions)
+                            const functionAncestors = ancestors.filter((n) => n.type === 'FunctionExpression' ||
+                                n.type === 'FunctionDeclaration' ||
+                                n.type === 'ArrowFunctionExpression');
+                            if (functionAncestors.length === 1) {
+                                // Add function parameters of the main function
+                                node.params.forEach((param) => {
+                                    if (param.type === 'Identifier') {
+                                        declaredVariables.add(param.name);
+                                    }
+                                });
+                            }
+                        }
+                    });
+                    // Then, collect identifiers that are not declared within the function
+                    simple(ast, {
+                        Identifier(node) {
+                            // Skip the function name itself, declared variables, and common globals
+                            if (node.name !== funcName && !declaredVariables.has(node.name)) {
+                                dependencies.add(node.name);
+                            }
+                        },
+                        MemberExpression(node) {
+                            // Handle 'this.propertyName' patterns and aliases like 'vm.x' when 'vm = this'
+                            if (node.property.type === 'Identifier') {
+                                if (node.object.type === 'ThisExpression') {
+                                    dependencies.add(node.property.name);
+                                }
+                                else if (node.object.type === 'Identifier' && thisAliases.has(node.object.name)) {
+                                    dependencies.add(node.property.name);
+                                }
+                            }
+                        }
+                    });
+                    functionDependencies[funcName] = Array.from(dependencies);
+                }
+                catch (error) {
+                    console.warn(`Failed to analyze function '${funcName}':`, error);
+                    // If parsing fails, assume no dependencies
+                    functionDependencies[funcName] = [];
+                }
             }
-            else if (this.#isCustomElementProperty(element, attributeName, value)) {
-                // Custom elements: set objects/arrays (and declared props) as properties
-                // so complex values are not serialized to strings via setAttribute.
-                // HTML attributes are lowercased by the browser, so resolve to the
-                // actual camelCase property name declared on the custom element.
-                const propName = this.#resolveCustomElementPropertyName(element, attributeName);
-                element[propName] = value;
+            // Second pass: resolve each function's transitive reactive dependencies.
+            //
+            // A function's direct dependency list mixes two kinds of identifiers: references to other
+            // functions (call edges) and references to reactive data properties (the values we actually
+            // care about). We want, for every function, the full set of reactive properties reachable by
+            // following call edges to any depth.
+            //
+            // Functions are free to reference each other cyclically — a poller that reschedules itself
+            // (`scheduleOperationPoll` -> `pollOperation` -> `scheduleOperationPoll`), a pair of mutually
+            // recursive helpers, or any state machine. This is valid JavaScript, so the resolver must not
+            // treat it as an error. Every function in a cycle (more precisely, a strongly connected
+            // component) is reachable from the others, so they all share the same transitive dependency
+            // set: the union of every member's direct reactive dependencies.
+            //
+            // A depth-first walk that bails out on back-edges cannot compute that correctly — it drops the
+            // dependencies contributed around the cycle and caches incomplete, traversal-order-dependent
+            // results, which would silently break reactivity for any computed that reads reactive data
+            // through a cyclic method. We instead split each function's direct dependencies into reactive
+            // properties and call edges, then propagate reactive properties along call edges until the sets
+            // stop growing (a fixpoint). This converges regardless of cycles and yields the exact transitive
+            // closure for every function, including those participating in a cycle.
+            const directReactive = {};
+            const callEdges = {};
+            for (const funcName of Object.keys(functions)) {
+                const reactive = new Set();
+                const edges = [];
+                for (const dep of functionDependencies[funcName] || []) {
+                    if (dep === funcName)
+                        continue; // Skip self-references.
+                    if (functions[dep]) {
+                        edges.push(dep); // Call edge to another function.
+                    }
+                    else {
+                        reactive.add(dep); // Reactive data property (terminal dependency).
+                    }
+                }
+                directReactive[funcName] = reactive;
+                callEdges[funcName] = edges;
             }
-            else if (this.#isDOMProperty(attributeName)) {
-                this.#updateProperty(element, attributeName, value);
+            // Seed each function with its own direct reactive dependencies, then propagate along call edges
+            // until no set changes. Each pass can only add properties, and the universe of properties is
+            // finite, so the loop is guaranteed to terminate.
+            const resolved = {};
+            for (const funcName of Object.keys(functions)) {
+                resolved[funcName] = new Set(directReactive[funcName]);
             }
-            else if (this.#isBooleanAttribute(attributeName)) {
-                this.#updateBooleanAttribute(element, attributeName, value);
+            let changed = true;
+            while (changed) {
+                changed = false;
+                for (const funcName of Object.keys(functions)) {
+                    const target = resolved[funcName];
+                    for (const edge of callEdges[funcName]) {
+                        for (const dep of resolved[edge]) {
+                            if (!target.has(dep)) {
+                                target.add(dep);
+                                changed = true;
+                            }
+                        }
+                    }
+                }
             }
-            else {
-                this.#updateAttribute(element, attributeName, value);
+            const resolvedDependencies = {};
+            for (const funcName of Object.keys(functions)) {
+                resolvedDependencies[funcName] = Array.from(resolved[funcName]);
             }
+            return resolvedDependencies;
         }
         /**
-         * Updates the class attribute with support for string, array, and object formats.
+         * Rewrites an expression to replace identifiers with 'this.identifier'.
+         * This allows direct property access and assignment without using 'with' statement.
+         * Uses AST parsing to accurately identify which identifiers to replace.
+         * @param expression The original expression string.
+         * @param identifiers The list of identifiers that are available in bindings.
+         * @returns The rewritten expression.
          */
-        #updateClass(element, value) {
-            // Determine the new set of classes to apply
-            let newClasses = [];
-            if (typeof value === 'string') {
-                newClasses = value.split(/\s+/).filter(Boolean);
+        static rewriteExpression(expression, identifiers, options) {
+            // Reserved words and built-in objects that should not be prefixed with 'this.'
+            const reserved = new Set([
+                'event', '$event', '$ctx', '$newValue',
+                'true', 'false', 'null', 'undefined', 'NaN', 'Infinity',
+                'Math', 'Date', 'String', 'Number', 'Boolean', 'Array', 'Object',
+                'JSON', 'console', 'window', 'document', 'navigator',
+                'parseInt', 'parseFloat', 'isNaN', 'isFinite',
+                'encodeURI', 'decodeURI', 'encodeURIComponent', 'decodeURIComponent'
+            ]);
+            // Extract ALL identifiers from the expression (including assignment left-hand side)
+            // This is necessary because the passed 'identifiers' parameter only includes
+            // identifiers that are used (right-hand side), not assigned to (left-hand side)
+            let allIdentifiersInExpression;
+            try {
+                allIdentifiersInExpression = ExpressionUtils.extractIdentifiers(expression, {}, options);
             }
-            else if (Array.isArray(value)) {
-                // Flatten array elements that may contain strings or objects
-                newClasses = value
-                    .filter(Boolean)
-                    .flatMap(cls => {
-                    if (typeof cls === 'string') {
-                        return cls.split(/\s+/).filter(Boolean);
-                    }
-                    else if (typeof cls === 'object' && cls !== null) {
-                        // Handle object format within array: { className: condition }
-                        // Keys may contain space-separated class names
-                        return Object.keys(cls).filter(key => cls[key]).flatMap(key => key.split(/\s+/).filter(Boolean));
-                    }
-                    return [];
-                });
+            catch (error) {
+                console.warn('[ichigo.js] Failed to extract identifiers from expression:', expression, error);
+                return expression;
             }
-            else if (typeof value === 'object' && value !== null) {
-                // Keys may contain space-separated class names
-                newClasses = Object.keys(value).filter(key => value[key]).flatMap(key => key.split(/\s+/).filter(Boolean));
+            // Create a Set of identifiers available in bindings (from data, computed, methods)
+            // We need to know which identifiers are valid binding properties
+            const bindingIdentifiers = new Set(identifiers.filter(id => !reserved.has(id)));
+            // For assignment expressions, we also need to include the left-hand side identifier
+            // even if it's not in the tracking identifiers (because it's being assigned, not read)
+            for (const id of allIdentifiersInExpression) {
+                if (!reserved.has(id)) {
+                    bindingIdentifiers.add(id);
+                }
             }
-            // Remove previously managed classes
-            this.#managedClasses.forEach(cls => element.classList.remove(cls));
-            // Add newly managed classes
-            newClasses.forEach(cls => element.classList.add(cls));
-            // Update managed classes list
-            this.#managedClasses = new Set(newClasses);
-        }
-        /**
-         * Updates the style attribute with support for object format.
-         */
-        #updateStyle(element, value) {
-            let newStyles = [];
-            if (typeof value === 'string') {
-                // Directly set the style string
-                element.style.cssText = value;
-                // Extract managed properties
-                newStyles = value.split(';').map(s => s.split(':')[0].trim()).filter(Boolean);
+            if (bindingIdentifiers.size === 0) {
+                return expression;
             }
-            else if (typeof value === 'object' && value !== null) {
-                // Remove all previously managed properties
-                this.#managedStyles.forEach(prop => {
-                    element.style.removeProperty(this.#camelToKebab(prop));
-                });
-                // Add newly managed properties
-                for (const key in value) {
-                    if (Object.prototype.hasOwnProperty.call(value, key)) {
-                        const cssKey = this.#camelToKebab(key);
-                        const cssValue = value[key];
-                        if (cssValue != null) {
-                            element.style.setProperty(cssKey, String(cssValue));
-                            newStyles.push(key);
+            try {
+                // Build a map of positions to replace: { start: number, end: number, name: string, asThisAlias?: boolean }[]
+                const replacements = [];
+                // In script mode we must not wrap in parens (that would make multi-statement input invalid).
+                // Offsets from the parser therefore refer directly to the original expression, so no shift.
+                const asScript = options?.asScript === true;
+                const source = asScript ? expression : `(${expression})`;
+                const offsetShift = asScript ? 0 : 1;
+                const parsedAst = parse(source, { ecmaVersion: 'latest' });
+                // Track identifiers that are locally declared within the handler body (let/const/var, function
+                // params) so we don't rewrite them to `this.xxx`. Additionally detect `this` aliases such as
+                // `let vm = this;` so that `vm.x` can be rewritten to `this.x` even though `vm` is locally declared.
+                const locallyDeclared = new Set();
+                const thisAliases = new Set();
+                if (asScript) {
+                    full(parsedAst, (node) => {
+                        if (node.type === 'VariableDeclarator' && node.id?.type === 'Identifier') {
+                            locallyDeclared.add(node.id.name);
+                            if (node.init && node.init.type === 'ThisExpression') {
+                                thisAliases.add(node.id.name);
+                            }
+                        }
+                        else if (node.type === 'FunctionDeclaration' && node.id?.type === 'Identifier') {
+                            locallyDeclared.add(node.id.name);
+                        }
+                    });
+                }
+                // Collect all identifier nodes that should be replaced
+                // Use walk.fullAncestor to visit ALL nodes (including assignment LHS) while tracking ancestors
+                fullAncestor(parsedAst, (node, _state, ancestors) => {
+                    if (node.type !== 'Identifier') {
+                        return;
+                    }
+                    // Skip if not in our identifier set
+                    if (!bindingIdentifiers.has(node.name)) {
+                        return;
+                    }
+                    // Locally declared identifiers must not be rewritten to `this.xxx`. The one
+                    // exception is a `this`-alias (e.g. `let vm = this;`): when such an alias is
+                    // used as the OBJECT of a MemberExpression (`vm.x`), we replace just the
+                    // object with `this` so that `vm.x` becomes `this.x`. In every other position
+                    // (the declaration LHS, a bare reference such as `console.log(vm)`, an
+                    // argument, etc.) the alias must be left untouched — rewriting it to
+                    // `this.vm` would either produce a syntax error (`let this.vm = this;`) or
+                    // change the meaning at runtime.
+                    // walk.fullAncestor includes the visited node itself as the last entry of
+                    // `ancestors`, so the actual parent node is at length - 2.
+                    const parentNode = ancestors.length >= 2 ? ancestors[ancestors.length - 2] : undefined;
+                    const isAliasAsMemberObject = parentNode?.type === 'MemberExpression' && parentNode.object === node;
+                    if (locallyDeclared.has(node.name)) {
+                        if (!thisAliases.has(node.name) || !isAliasAsMemberObject) {
+                            return;
                         }
+                        replacements.push({
+                            start: node.start - offsetShift,
+                            end: node.end - offsetShift,
+                            name: node.name,
+                            asThisAlias: true
+                        });
+                        return;
+                    }
+                    // Skip identifiers that are the property (not the object) of a non-computed
+                    // member access (e.g., the `prop` in `obj.prop`).
+                    if (parentNode?.type === 'MemberExpression' && !parentNode.computed && parentNode.property === node) {
+                        return;
                     }
+                    // Add to replacements list (adjust for the wrapping parentheses in expression mode)
+                    replacements.push({
+                        start: node.start - offsetShift,
+                        end: node.end - offsetShift,
+                        name: node.name
+                    });
+                });
+                // Sort replacements by start position (descending) to replace from end to start
+                replacements.sort((a, b) => b.start - a.start);
+                // Apply replacements
+                let result = expression;
+                for (const replacement of replacements) {
+                    const insertion = replacement.asThisAlias ? 'this' : `this.${replacement.name}`;
+                    result = result.substring(0, replacement.start) + insertion + result.substring(replacement.end);
                 }
+                return result;
+            }
+            catch (error) {
+                // If AST parsing fails, fall back to the original expression
+                console.warn('Failed to rewrite expression:', expression, error);
+                return expression;
             }
-            // Update managed properties list
-            this.#managedStyles = new Set(newStyles);
         }
+    }
+
+    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    /**
+     * A centralized expression evaluator that normalizes expression evaluation across all directives.
+     *
+     * This class provides:
+     * - Consistent identifier extraction and binding resolution
+     * - Unified global object whitelisting (Math, Date, JSON, etc.)
+     * - Expression caching for performance
+     * - Centralized error handling
+     * - Support for custom expression rewriting (for VOnDirective)
+     *
+     * Example usage:
+     * ```typescript
+     * const evaluator = ExpressionEvaluator.create(
+     *   "count + 1",
+     *   bindings,
+     *   functionDependencies
+     * );
+     * const result = evaluator.evaluate();
+     * ```
+     */
+    class ExpressionEvaluator {
         /**
-         * Converts camelCase to kebab-case for CSS properties.
+         * Cache for compiled expression functions.
+         * Key: expression string
+         * Value: compiled function
          */
-        #camelToKebab(str) {
-            return str.replace(/([A-Z])/g, '-$1').toLowerCase();
-        }
+        static cache = new Map();
         /**
-         * Returns true when the target is a custom element and the binding should be
-         * delivered as a property rather than an HTML attribute.
-         *
-         * Three conditions trigger property delivery:
-         *  1. The value is an object or array — serialising these to a string attribute
-         *     would lose type information.
-         *  2. The element exposes a matching property accessor (e.g. a prop declared via
-         *     defineComponent), even when the value is a primitive.
-         *  3. The element declares a matching prop in its static _props (case-insensitive
-         *     and kebab-case → camelCase tolerant), so primitive values reach the
-         *     reactive binding via the generated setter instead of being lost as a
-         *     plain HTML attribute that no attributeChangedCallback observes.
+         * Global objects that are whitelisted for use in expressions.
+         * These objects are available to all expressions for convenience and compatibility.
          */
-        #isCustomElementProperty(element, name, value) {
-            if (!element.tagName.includes('-')) {
-                return false;
-            }
-            const isObjectOrArray = Array.isArray(value) || (typeof value === 'object' && value !== null);
-            if (isObjectOrArray || name in element) {
-                return true;
-            }
-            return this.#findDeclaredProp(element, name) !== undefined;
-        }
+        static GLOBAL_WHITELIST = {
+            Math,
+            Date,
+            JSON,
+            Array,
+            Object,
+            String,
+            Number,
+            Boolean,
+            parseInt,
+            parseFloat,
+            isNaN,
+            isFinite,
+            encodeURI,
+            decodeURI,
+            encodeURIComponent,
+            decodeURIComponent
+        };
         /**
-         * Resolves the actual property name on a custom element for a given
-         * (lowercased) HTML attribute name.  HTML attributes are always lowercase,
-         * but custom element props are typically camelCase.  This method checks the
-         * element's declared _props (set by defineComponent) for a case-insensitive
-         * match against both the raw attribute name and its kebab-case → camelCase
-         * conversion (so `user-name` resolves to `userName`), falling back to the
-         * original name when no match is found.
+         * The original expression string.
          */
-        #resolveCustomElementPropertyName(element, name) {
-            // Fast path: exact match already exists
-            if (name in element) {
-                return name;
-            }
-            return this.#findDeclaredProp(element, name) ?? name;
+        expression;
+        /**
+         * The identifiers extracted from the expression.
+         */
+        identifiers;
+        // The original extracted identifiers (may include member chains like 'a.b')
+        originalIdentifiers;
+        /**
+         * The bindings to use for evaluating the expression.
+         */
+        bindings;
+        /**
+         * The compiled function for evaluating the expression.
+         */
+        evaluatorFunc;
+        /**
+         * Additional context variables (e.g., 'event', '$ctx').
+         */
+        additionalContext;
+        /**
+         * Whether any identifier has an index known only at run time ("items[*].name").
+         * Only then are the paths read during evaluation worth recording.
+         */
+        hasDynamicIndex;
+        /**
+         * The source paths read through reactive proxies during the last evaluation,
+         * or undefined before the first evaluation and when nothing is recorded.
+         */
+        trackedPathSet;
+        /**
+         * Private constructor. Use ExpressionEvaluator.create() to create instances.
+         */
+        constructor(expression, bindings, identifiers, originalIdentifiers, evaluatorFunc, additionalContext) {
+            this.expression = expression;
+            this.bindings = bindings;
+            this.identifiers = identifiers;
+            this.originalIdentifiers = originalIdentifiers;
+            this.evaluatorFunc = evaluatorFunc;
+            this.additionalContext = additionalContext;
+            this.hasDynamicIndex = originalIdentifiers.some(id => id.includes('[*]'));
         }
         /**
-         * Looks up a declared prop on a custom element constructor whose name matches
-         * the given attribute name, treating the comparison as case-insensitive and
-         * tolerant of kebab-case → camelCase conversion.  Returns the canonical prop
-         * name (as declared) when a match is found, or undefined otherwise.
+         * Creates an ExpressionEvaluator instance.
+         *
+         * @param expression The expression string to evaluate.
+         * @param bindings The bindings to use for evaluating the expression.
+         * @param functionDependencies A dictionary mapping function names to their dependencies.
+         * @param options Optional configuration for the evaluator.
+         * @returns An ExpressionEvaluator instance.
          */
-        #findDeclaredProp(element, name) {
-            const props = element.constructor._props;
-            if (!Array.isArray(props)) {
-                return undefined;
+        static create(expression, bindings, functionDependencies, options) {
+            // Extract identifiers from the expression (may include member chains like 'a.b')
+            const extractedIdentifiers = ExpressionUtils.extractIdentifiers(expression, functionDependencies);
+            // For compilation we must only pass simple identifier names (no dots).
+            // Use the base (left-most) segment of member chains and preserve order.
+            const baseIdentifiers = [];
+            for (const id of extractedIdentifiers) {
+                const base = ExpressionUtils.baseIdentifier(id);
+                if (!baseIdentifiers.includes(base)) {
+                    baseIdentifiers.push(base);
+                }
             }
-            const lowerName = name.toLowerCase();
-            const camelLower = this.#kebabToCamel(lowerName).toLowerCase();
-            return props.find(p => {
-                const lowerProp = p.toLowerCase();
-                return lowerProp === lowerName || lowerProp === camelLower;
+            // Apply custom rewrite if provided (used by VOnDirective)
+            let processedExpression = expression;
+            if (options?.rewriteExpression) {
+                // Pass the original extracted identifiers (may include member chains)
+                processedExpression = options.rewriteExpression(expression, extractedIdentifiers);
+            }
+            // Build cache key including options that affect compilation
+            const cacheKey = JSON.stringify({
+                expr: processedExpression,
+                additionalCtx: options?.additionalContext ? Object.keys(options.additionalContext).sort() : []
             });
+            // Check cache
+            let evaluatorFunc = this.cache.get(cacheKey);
+            if (!evaluatorFunc) {
+                // Compile the expression using base identifiers (no dots)
+                evaluatorFunc = this.compileExpression(processedExpression, baseIdentifiers, options);
+                // Cache the compiled function
+                this.cache.set(cacheKey, evaluatorFunc);
+            }
+            return new ExpressionEvaluator(expression, bindings, baseIdentifiers, extractedIdentifiers, evaluatorFunc, options?.additionalContext);
         }
         /**
-         * Converts kebab-case to camelCase (e.g. `user-name` → `userName`).
+         * Compiles an expression into a function.
+         *
+         * @param expression The expression string to compile.
+         * @param identifiers The identifiers extracted from the expression.
+         * @param options Optional configuration.
+         * @returns A compiled function.
          */
-        #kebabToCamel(str) {
-            return str.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+        static compileExpression(expression, identifiers, options) {
+            // Build parameter list: globals first, then identifiers (base names), then additional context
+            // Filter out identifiers that are already in the global whitelist to avoid duplicate parameters
+            const globalKeys = new Set(Object.keys(ExpressionEvaluator.GLOBAL_WHITELIST));
+            const filteredIdentifiers = identifiers.filter(id => !globalKeys.has(id));
+            const params = [
+                ...Object.keys(ExpressionEvaluator.GLOBAL_WHITELIST),
+                ...filteredIdentifiers
+            ];
+            // Add additional context parameters if provided
+            if (options?.additionalContext) {
+                params.push(...Object.keys(options.additionalContext));
+            }
+            const args = params.join(", ");
+            const funcBody = `return (${expression});`;
+            try {
+                // Create the function with error handling
+                return new Function(args, funcBody);
+            }
+            catch (error) {
+                throw new Error(`Failed to compile expression: ${expression}\nError: ${error}`);
+            }
         }
         /**
-         * Checks if the attribute should be set as a DOM property.
+         * Evaluates the expression with the current bindings.
+         *
+         * @returns The result of the expression evaluation.
          */
-        #isDOMProperty(name) {
-            const domProperties = ['value', 'checked', 'selected', 'innerHTML', 'textContent'];
-            return domProperties.includes(name);
+        evaluate() {
+            try {
+                // Build arguments: globals first, then identifiers, then additional context
+                // Filter out identifiers that are already in the global whitelist to match compileExpression
+                const globalKeys = new Set(Object.keys(ExpressionEvaluator.GLOBAL_WHITELIST));
+                const filteredIdentifiers = this.identifiers.filter(id => !globalKeys.has(id));
+                const values = [
+                    // Global whitelist values
+                    ...Object.values(ExpressionEvaluator.GLOBAL_WHITELIST),
+                    // Identifier values from bindings (excluding globals)
+                    ...filteredIdentifiers.map(id => this.bindings.get(id))
+                ];
+                // Add additional context values if provided
+                if (this.additionalContext) {
+                    values.push(...Object.values(this.additionalContext));
+                }
+                // Call the compiled function with the gathered values. When an index is
+                // known only at run time, record which concrete paths this evaluation
+                // read so that change matching can be narrowed to them (see trackedPaths).
+                if (!this.hasDynamicIndex) {
+                    return this.evaluatorFunc(...values);
+                }
+                const paths = new Set();
+                this.trackedPathSet = undefined;
+                const result = ReactiveProxy.track(paths, () => this.evaluatorFunc(...values));
+                this.trackedPathSet = paths;
+                return result;
+            }
+            catch (error) {
+                console.error(`[ichigo.js] Error evaluating expression: ${this.expression}`, error);
+                throw error;
+            }
         }
         /**
-         * Checks if the attribute is a boolean attribute.
+         * The source paths read through reactive proxies during the last evaluation,
+         * recorded only for an expression with a run-time index ("items[i].name").
+         * Each evaluation replaces the previous set, so a path read for a former
+         * index value is dropped as soon as the expression runs with the new one.
+         * Undefined before the first evaluation and for expressions without such an index.
          */
-        #isBooleanAttribute(name) {
-            const booleanAttributes = [
-                'disabled', 'readonly', 'required', 'checked', 'selected',
-                'multiple', 'autofocus', 'autoplay', 'controls', 'loop',
-                'muted', 'open', 'hidden'
-            ];
-            return booleanAttributes.includes(name);
+        get trackedPaths() {
+            return this.trackedPathSet;
         }
         /**
-         * Updates a DOM property.
-         * For value-like properties (value, textContent, innerHTML), null/undefined is converted to empty string
-         * to match Vue.js behavior and prevent "undefined" from being displayed.
+         * Evaluates the expression and returns the result as a boolean.
+         *
+         * @returns The boolean result of the expression evaluation.
          */
-        #updateProperty(element, name, value) {
-            if (value == null && (name === 'value' || name === 'textContent' || name === 'innerHTML')) {
-                element[name] = '';
-                if (name === 'value') {
-                    element._value = null;
-                }
-            }
-            else {
-                element[name] = value;
-                if (name === 'value') {
-                    // Store the original typed value so that v-model on radio buttons
-                    // can preserve the type (e.g., boolean false instead of string "false").
-                    element._value = value;
-                }
-            }
+        evaluateAsBoolean() {
+            return Boolean(this.evaluate());
         }
         /**
-         * Updates a boolean attribute.
+         * Gets the list of identifiers extracted from the expression.
          */
-        #updateBooleanAttribute(element, name, value) {
-            if (value) {
-                element.setAttribute(name, '');
-            }
-            else {
-                element.removeAttribute(name);
-            }
+        get dependentIdentifiers() {
+            // Return the original extracted identifiers (may include member chains like 'a.b')
+            return this.originalIdentifiers;
         }
         /**
-         * Updates a regular attribute.
-         * An attribute that already holds the value is left alone: setting `src` on
-         * an <iframe>, even to the same URL, loads its page again.
+         * Clears the expression cache.
+         * This should be called sparingly, as it will force recompilation of all expressions.
          */
-        #updateAttribute(element, name, value) {
-            if (value == null || value === false) {
-                if (element.hasAttribute(name)) {
-                    element.removeAttribute(name);
-                }
-            }
-            else {
-                const text = String(value);
-                if (element.getAttribute(name) !== text) {
-                    element.setAttribute(name, text);
-                }
-            }
+        static clearCache() {
+            this.cache.clear();
         }
     }
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
     /**
-     * Directive for rendering components.
-     * Usage: <div v-component="componentId" :options="props"></div>
-     *
-     * The :options binding is used to pass properties to the component.
-     * Example:
-     *   <div v-component="my-component" :options="{message: 'Hello'}"></div>
+     * Directive for binding dynamic attributes to DOM elements.
+     * The `v-bind` directive allows you to bind HTML attributes to expressions in your data model.
+     * The syntax for using the `v-bind` directive is `v-bind:attribute="expression"`, where `attribute` is the name of the HTML attribute you want to bind (e.g., `src`, `href`, `class`, etc.), and `expression` is a JavaScript expression that evaluates to the value you want to assign to that attribute.
+     * Example usage:
+     *     <img v-bind:src="imageSrc" />
+     * The value of `imageSrc` should be defined in the component's data object.
+     * When the value of `imageSrc` changes, the `src` attribute of the `<img>` element will automatically update to reflect the new value.
+     * This directive is particularly useful for dynamically updating attributes based on user interactions or other data changes in your application.
+     * It helps keep the DOM in sync with the underlying data model, making it easier to build reactive user interfaces.
+     * The `v-bind` directive can also be used with shorthand syntax using a colon (:).
+     * For example, `:src="imageSrc"` is equivalent to `v-bind:src="imageSrc"`.
+     * This shorthand syntax is often used for brevity and improved readability in templates.
+     * Overall, the `v-bind` directive is a powerful tool for creating dynamic and responsive web applications by allowing seamless integration between the data model and the DOM.
      */
-    class VComponentDirective {
+    class VBindDirective {
         /**
          * The virtual node to which this directive is applied.
          */
         #vNode;
         /**
-         * The component ID to render.
+         * The expression evaluator for this directive.
          */
-        #componentId;
+        #evaluator;
         /**
-         * The application instance for the component.
+         * The name of the attribute to bind (e.g., "src", "class", "style").
+         */
+        #attributeName;
+        /**
+         * The original expression string from the directive.
+         */
+        #expression;
+        /**
+         * The set of class names managed by this directive (used when binding to the "class" attribute).
+         * This helps in tracking which classes were added by this directive to avoid conflicts with other class manipulations.
+         */
+        #managedClasses = new Set();
+        /**
+         * The set of style properties managed by this directive (used when binding to the "style" attribute).
+         * This helps in tracking which styles were added by this directive to avoid conflicts with other style manipulations.
+         */
+        #managedStyles = new Set();
+        /**
+         * @param context The context for parsing the directive.
          */
-        #componentApp;
         constructor(context) {
             this.#vNode = context.vNode;
-            this.#componentId = context.attribute.value.trim();
+            // Extract the attribute name from the directive
+            // e.g., "v-bind:src" -> "src", ":href" -> "href"
+            const attrName = context.attribute.name;
+            if (attrName.startsWith('v-bind:')) {
+                this.#attributeName = attrName.substring(7);
+            }
+            else if (attrName.startsWith(':')) {
+                this.#attributeName = attrName.substring(1);
+            }
+            // Parse the expression and create the evaluator
+            this.#expression = context.attribute.value;
+            if (this.#expression && context.vNode.bindings) {
+                this.#evaluator = ExpressionEvaluator.create(this.#expression, context.vNode.bindings, context.vNode.vApplication.functionDependencies);
+            }
             // Remove the directive attribute from the element
             this.#vNode.node.removeAttribute(context.attribute.name);
         }
@@ -7852,7 +7970,7 @@
          * @inheritdoc
          */
         get name() {
-            return StandardDirectiveName.V_COMPONENT;
+            return StandardDirectiveName.V_BIND;
         }
         /**
          * @inheritdoc
@@ -7864,7 +7982,7 @@
          * @inheritdoc
          */
         get needsAnchor() {
-            return true;
+            return false;
         }
         /**
          * @inheritdoc
@@ -7876,10 +7994,15 @@
          * @inheritdoc
          */
         get domUpdater() {
-            // Create and return the DOM updater
+            const identifiers = this.#evaluator?.dependentIdentifiers ?? [];
+            const evaluator = this.#evaluator;
+            // Create an updater that handles the attribute binding
             const updater = {
                 get dependentIdentifiers() {
-                    return [];
+                    return identifiers;
+                },
+                get trackedPaths() {
+                    return evaluator?.trackedPaths;
                 },
                 applyToDOM: () => {
                     this.#render();
@@ -7891,18 +8014,60 @@
          * @inheritdoc
          */
         get templatize() {
-            return true;
+            return false;
         }
         /**
          * @inheritdoc
          */
         get dependentIdentifiers() {
-            return [];
+            return this.#evaluator?.dependentIdentifiers ?? [];
+        }
+        /**
+         * Indicates if this directive is binding the "key" attribute.
+         * The "key" attribute is special and is used for optimizing rendering of lists.
+         * If this directive is binding the "key" attribute, it will be handled by the VForDirective.
+         */
+        get isKey() {
+            return (this.#attributeName === 'key');
+        }
+        /**
+         * Indicates if this directive is binding the "options" attribute or any of its sub-properties (e.g., "options.intersection").
+         * The "options" attribute is special and is used for passing options to certain directives like VIntersectionDirective.
+         */
+        get isOptions() {
+            return (this.#attributeName === 'options' || this.#attributeName?.startsWith('options.') === true);
+        }
+        /**
+         * Gets the name of the attribute being bound (e.g., "src", "class", "options", "options.intersection").
+         */
+        get attributeName() {
+            return this.#attributeName;
+        }
+        /**
+         * Gets the original expression string from the directive.
+         */
+        get expression() {
+            return this.#expression;
+        }
+        /**
+         * Evaluates the bound expression and returns the current value.
+         * Returns undefined when no evaluator is available (e.g., empty expression).
+         */
+        evaluate() {
+            return this.#evaluator?.evaluate();
         }
         /**
          * @inheritdoc
          */
         get onMount() {
+            // A constant expression (e.g. :label="'Apple'") has no reactive
+            // identifiers, so the identifier-driven update cycle never applies it.
+            // Render it once at mount instead.
+            if (this.#evaluator && this.#evaluator.dependentIdentifiers.length === 0) {
+                return () => {
+                    this.#render();
+                };
+            }
             return undefined;
         }
         /**
@@ -7939,529 +8104,449 @@
          * @inheritdoc
          */
         destroy() {
-            if (!this.#componentApp) {
-                // Not rendered, no action needed
+            // Do nothing. No special cleanup needed.
+        }
+        /**
+         * Renders the bound attribute by evaluating the expression and updating the DOM element.
+         */
+        #render() {
+            // Do nothing for special attributes
+            if (this.isKey || this.isOptions) {
                 return;
             }
-            // Get the component's root VNode
-            const componentVNode = this.#componentApp.rootVNode;
-            // Destroy component application first (calls @unmount hooks while DOM is still accessible)
-            this.#componentApp.unmount();
-            // Remove the component's root node from the DOM
-            if (componentVNode?.node.parentNode) {
-                componentVNode.node.parentNode.removeChild(componentVNode.node);
+            const element = this.#vNode.node;
+            const attributeName = this.#attributeName;
+            // If there's no evaluator or attribute name, do nothing
+            if (!this.#evaluator || !attributeName) {
+                return;
+            }
+            // Evaluate the expression to get the value
+            const value = this.#evaluator.evaluate();
+            // Handle different attribute types
+            if (attributeName === 'class') {
+                this.#updateClass(element, value);
+            }
+            else if (attributeName === 'style') {
+                this.#updateStyle(element, value);
+            }
+            else if (this.#isCustomElementProperty(element, attributeName, value)) {
+                // Custom elements: set objects/arrays (and declared props) as properties
+                // so complex values are not serialized to strings via setAttribute.
+                // HTML attributes are lowercased by the browser, so resolve to the
+                // actual camelCase property name declared on the custom element.
+                const propName = this.#resolveCustomElementPropertyName(element, attributeName);
+                element[propName] = value;
+            }
+            else if (this.#isDOMProperty(attributeName)) {
+                this.#updateProperty(element, attributeName, value);
+            }
+            else if (this.#isBooleanAttribute(attributeName)) {
+                this.#updateBooleanAttribute(element, attributeName, value);
+            }
+            else {
+                this.#updateAttribute(element, attributeName, value);
             }
-            this.#componentApp = undefined;
         }
         /**
-         * Renders the component.
+         * Updates the class attribute with support for string, array, and object formats.
          */
-        #render() {
-            if (this.#componentApp) {
-                // Already rendered, no action needed
-                return;
+        #updateClass(element, value) {
+            // Determine the new set of classes to apply
+            let newClasses = [];
+            if (typeof value === 'string') {
+                newClasses = value.split(/\s+/).filter(Boolean);
             }
-            // Clone the component's template and replace the original node
-            const clone = this.#cloneNode();
-            this.#vNode.anchorNode?.parentNode?.insertBefore(clone, this.#vNode.anchorNode.nextSibling);
-            // Get properties from :options or :options.component directive
-            let properties = {};
-            const optionsDirective = this.#vNode.directiveManager?.optionsDirective('component');
-            if (optionsDirective && optionsDirective.expression && this.#vNode.bindings) {
-                // Evaluate the options expression using ExpressionEvaluator
-                const evaluator = ExpressionEvaluator.create(optionsDirective.expression, this.#vNode.bindings, this.#vNode.vApplication.functionDependencies);
-                const result = evaluator.evaluate();
-                if (typeof result === 'object' && result !== null) {
-                    properties = result;
-                }
+            else if (Array.isArray(value)) {
+                // Flatten array elements that may contain strings or objects
+                newClasses = value
+                    .filter(Boolean)
+                    .flatMap(cls => {
+                    if (typeof cls === 'string') {
+                        return cls.split(/\s+/).filter(Boolean);
+                    }
+                    else if (typeof cls === 'object' && cls !== null) {
+                        // Handle object format within array: { className: condition }
+                        // Keys may contain space-separated class names
+                        return Object.keys(cls).filter(key => cls[key]).flatMap(key => key.split(/\s+/).filter(Boolean));
+                    }
+                    return [];
+                });
             }
-            // Get component definition from the application's component registry
-            const component = this.#vNode.vApplication.componentRegistry.get(this.#componentId);
-            if (!component) {
-                throw new Error(`Component '${this.#componentId}' not found in registry`);
+            else if (typeof value === 'object' && value !== null) {
+                // Keys may contain space-separated class names
+                newClasses = Object.keys(value).filter(key => value[key]).flatMap(key => key.split(/\s+/).filter(Boolean));
             }
-            // Create component instance
-            const instance = component.createInstance(properties);
-            // Create and mount child application using the parent application's registries
-            this.#componentApp = this.#vNode.vApplication.createChildApp(instance);
-            this.#componentApp.mount(clone);
+            // Remove previously managed classes
+            this.#managedClasses.forEach(cls => element.classList.remove(cls));
+            // Add newly managed classes
+            newClasses.forEach(cls => element.classList.add(cls));
+            // Update managed classes list
+            this.#managedClasses = new Set(newClasses);
         }
         /**
-         * Clones the component's template and returns the root element.
-         * @returns The cloned root HTMLElement of the component.
-         * @throws Error if the component or its template is not found.
+         * Updates the style attribute with support for object format.
          */
-        #cloneNode() {
-            // Get component definition from the application's component registry
-            const component = this.#vNode.vApplication.componentRegistry.get(this.#componentId);
-            if (!component) {
-                throw new Error(`Component '${this.#componentId}' not found in registry`);
-            }
-            // Get template element
-            const finalTemplateID = component.templateID || component.id;
-            const templateElement = document.querySelector(`#${finalTemplateID}`);
-            if (!templateElement || !(templateElement instanceof HTMLTemplateElement)) {
-                throw new Error(`Template element '#${finalTemplateID}' not found`);
+        #updateStyle(element, value) {
+            let newStyles = [];
+            if (typeof value === 'string') {
+                // Directly set the style string
+                element.style.cssText = value;
+                // Extract managed properties
+                newStyles = value.split(';').map(s => s.split(':')[0].trim()).filter(Boolean);
             }
-            // Clone template content
-            const fragment = templateElement.content.cloneNode(true);
-            const childNodes = Array.from(fragment.childNodes);
-            // Find the first element node
-            for (const node of childNodes) {
-                if (node.nodeType === Node.ELEMENT_NODE) {
-                    return node;
+            else if (typeof value === 'object' && value !== null) {
+                // Remove all previously managed properties
+                this.#managedStyles.forEach(prop => {
+                    element.style.removeProperty(this.#camelToKebab(prop));
+                });
+                // Add newly managed properties
+                for (const key in value) {
+                    if (Object.prototype.hasOwnProperty.call(value, key)) {
+                        const cssKey = this.#camelToKebab(key);
+                        const cssValue = value[key];
+                        if (cssValue != null) {
+                            element.style.setProperty(cssKey, String(cssValue));
+                            newStyles.push(key);
+                        }
+                    }
                 }
             }
-            throw new Error(`No element found in template '#${finalTemplateID}'`);
+            // Update managed properties list
+            this.#managedStyles = new Set(newStyles);
         }
-    }
-
-    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
-    /**
-     * Utility class for creating reactive proxies that automatically track changes.
-     */
-    class ReactiveProxy {
-        /**
-         * A WeakMap to store the proxy for each target object and path combination.
-         * This prevents creating multiple proxies for the same object accessed from different paths.
-         */
-        static proxyCache = new WeakMap();
-        /**
-         * A WeakMap to track which objects are proxies, mapping proxy -> original target.
-         * This prevents double-wrapping of already proxied objects.
-         */
-        static proxyToTarget = new WeakMap();
-        /**
-         * A WeakSet to track objects marked as "raw" (non-reactive).
-         * These objects will not be wrapped with Proxy.
-         */
-        static rawObjects = new WeakSet();
         /**
-         * A WeakMap to store the path for each proxy object.
-         * This allows retrieving the source path of an object for computed property mapping.
+         * Converts camelCase to kebab-case for CSS properties.
          */
-        static proxyPaths = new WeakMap();
+        #camelToKebab(str) {
+            return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+        }
         /**
-         * Dispatchers per (target, path). Every target reached while walking a proxy
-         * subtree registers an entry pointing at the same dispatcher as the outermost
-         * proxy of that subtree, so callers can look up the dispatcher from any
-         * intermediate proxy when subscribing.
+         * Returns true when the target is a custom element and the binding should be
+         * delivered as a property rather than an HTML attribute.
+         *
+         * Three conditions trigger property delivery:
+         *  1. The value is an object or array — serialising these to a string attribute
+         *     would lose type information.
+         *  2. The element exposes a matching property accessor (e.g. a prop declared via
+         *     defineComponent), even when the value is a primitive.
+         *  3. The element declares a matching prop in its static _props (case-insensitive
+         *     and kebab-case → camelCase tolerant), so primitive values reach the
+         *     reactive binding via the generated setter instead of being lost as a
+         *     plain HTML attribute that no attributeChangedCallback observes.
          */
-        static dispatchers = new WeakMap();
+        #isCustomElementProperty(element, name, value) {
+            if (!element.tagName.includes('-')) {
+                return false;
+            }
+            const isObjectOrArray = Array.isArray(value) || (typeof value === 'object' && value !== null);
+            if (isObjectOrArray || name in element) {
+                return true;
+            }
+            return this.#findDeclaredProp(element, name) !== undefined;
+        }
         /**
-         * A Map to store path aliases.
-         * Key: alias path (e.g., "editingNestedStep.steps")
-         * Value: source path (e.g., "routes[0].steps[0].steps")
-         * This allows mapping variable names to their actual source paths for dependency tracking.
+         * Resolves the actual property name on a custom element for a given
+         * (lowercased) HTML attribute name.  HTML attributes are always lowercase,
+         * but custom element props are typically camelCase.  This method checks the
+         * element's declared _props (set by defineComponent) for a case-insensitive
+         * match against both the raw attribute name and its kebab-case → camelCase
+         * conversion (so `user-name` resolves to `userName`), falling back to the
+         * original name when no match is found.
          */
-        static pathAliases = new Map();
+        #resolveCustomElementPropertyName(element, name) {
+            // Fast path: exact match already exists
+            if (name in element) {
+                return name;
+            }
+            return this.#findDeclaredProp(element, name) ?? name;
+        }
         /**
-         * Compiled patterns for identifiers that contain a "[*]" index, keyed by the
-         * identifier and whether descendants of the path also match.
+         * Looks up a declared prop on a custom element constructor whose name matches
+         * the given attribute name, treating the comparison as case-insensitive and
+         * tolerant of kebab-case → camelCase conversion.  Returns the canonical prop
+         * name (as declared) when a match is found, or undefined otherwise.
          */
-        static pathPatterns = new Map();
+        #findDeclaredProp(element, name) {
+            const props = element.constructor._props;
+            if (!Array.isArray(props)) {
+                return undefined;
+            }
+            const lowerName = name.toLowerCase();
+            const camelLower = this.#kebabToCamel(lowerName).toLowerCase();
+            return props.find(p => {
+                const lowerProp = p.toLowerCase();
+                return lowerProp === lowerName || lowerProp === camelLower;
+            });
+        }
         /**
-         * The `Object.prototype.toString` tags of the *only* value types we deeply
-         * proxy. Everything else is returned untouched (raw).
-         *
-         * Rationale: a Proxy can only safely intercept plain data containers. Built-in
-         * and host objects — `Date`, `RegExp`, `File`, `Blob`, `FileList`, `Promise`,
-         * `WeakMap`/`WeakSet`, typed arrays, DOM nodes, etc. — carry private internal
-         * slots, and invoking their native methods with a Proxy as the `this`/receiver
-         * throws "Illegal invocation". They must therefore never be wrapped. This is an
-         * allow-list rather than a deny-list so that *every* such exotic type is
-         * excluded by default, not just the handful we happened to enumerate.
-         *
-         * Plain user-defined class instances report `[object Object]` (unless they set
-         * `Symbol.toStringTag`) and so remain reactive, preserving prior behaviour.
-         * `Map`/`Set` stay reactive because the proxy specially wraps their mutation
-         * methods (see the `get` trap); `WeakMap`/`WeakSet` are intentionally excluded
-         * since they cannot be wrapped that way and would break the same as `File`.
-         *
-         * Callers that want a plain object kept non-reactive can still opt out
-         * explicitly via {@link markRaw}.
+         * Converts kebab-case to camelCase (e.g. `user-name` → `userName`).
          */
-        static REACTIVE_TYPE_TAGS = new Set([
-            '[object Object]',
-            '[object Array]',
-            '[object Arguments]',
-            '[object Map]',
-            '[object Set]',
-        ]);
+        #kebabToCamel(str) {
+            return str.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+        }
         /**
-         * Whether the given non-null object value is one we deeply proxy.
-         * See {@link REACTIVE_TYPE_TAGS} for the reasoning.
+         * Checks if the attribute should be set as a DOM property.
          */
-        static isReactivable(value) {
-            return this.REACTIVE_TYPE_TAGS.has(Object.prototype.toString.call(value));
+        #isDOMProperty(name) {
+            const domProperties = ['value', 'checked', 'selected', 'innerHTML', 'textContent'];
+            return domProperties.includes(name);
         }
         /**
-         * Creates a reactive proxy for the given object.
-         * The proxy will call the onChange callback whenever a property is modified.
-         *
-         * @param target The object to make reactive.
-         * @param onChange Callback function to call when the object changes. Receives the full path of the changed property.
-         * @param path The current path in the object tree (used internally for nested objects).
-         * @param inheritedDispatcher Internal: the dispatcher inherited from an enclosing create() call when wrapping a nested target. External callers must omit this.
-         * @returns A reactive proxy of the target object.
+         * Checks if the attribute is a boolean attribute.
          */
-        static create(target, onChange, path = '', inheritedDispatcher) {
-            // If the target is not an object or is null, return it as-is
-            if (typeof target !== 'object' || target === null) {
-                return target;
-            }
-            // Don't wrap objects marked as raw (non-reactive)
-            if (this.rawObjects.has(target)) {
-                return target;
-            }
-            // Only deeply proxy plain data containers; return every built-in/host
-            // object (Date, File, Blob, Promise, WeakMap, DOM nodes, …) as-is, since
-            // their native methods break when invoked through a Proxy receiver.
-            if (!this.isReactivable(target)) {
-                return target;
-            }
-            // Check if the target is already a proxy - if so, return it as-is to prevent double-wrapping
-            if (this.proxyToTarget.has(target)) {
-                return target;
-            }
-            // Resolve (and register) the dispatcher for this (target, path).
-            // Nested create() calls inherit the dispatcher from the enclosing call so
-            // that a single dispatcher fans out changes at any depth of the subtree.
-            const dispatcher = this.resolveDispatcher(target, path, inheritedDispatcher);
-            if (onChange) {
-                dispatcher.listeners.add(onChange);
-            }
-            // Check if we already have a proxy for this target with this path
-            let pathMap = this.proxyCache.get(target);
-            if (pathMap) {
-                const existingProxy = pathMap.get(path);
-                if (existingProxy) {
-                    return existingProxy;
+        #isBooleanAttribute(name) {
+            const booleanAttributes = [
+                'disabled', 'readonly', 'required', 'checked', 'selected',
+                'multiple', 'autofocus', 'autoplay', 'controls', 'loop',
+                'muted', 'open', 'hidden'
+            ];
+            return booleanAttributes.includes(name);
+        }
+        /**
+         * Updates a DOM property.
+         * For value-like properties (value, textContent, innerHTML), null/undefined is converted to empty string
+         * to match Vue.js behavior and prevent "undefined" from being displayed.
+         */
+        #updateProperty(element, name, value) {
+            if (value == null && (name === 'value' || name === 'textContent' || name === 'innerHTML')) {
+                element[name] = '';
+                if (name === 'value') {
+                    element._value = null;
                 }
             }
             else {
-                pathMap = new Map();
-                this.proxyCache.set(target, pathMap);
-            }
-            // Create the proxy with path captured in closure
-            const proxy = new Proxy(target, {
-                get(obj, key, receiver) {
-                    const value = Reflect.get(obj, key);
-                    // If the value is an object or array, make it reactive too
-                    if (typeof value === 'object' && value !== null) {
-                        // Don't wrap objects marked as raw (non-reactive)
-                        if (ReactiveProxy.rawObjects.has(value)) {
-                            return value;
-                        }
-                        // Only deeply proxy plain data containers; hand back built-in
-                        // and host objects (Date, File, Blob, Promise, WeakMap, DOM
-                        // nodes, …) untouched so their native methods keep working.
-                        if (!ReactiveProxy.isReactivable(value)) {
-                            return value;
-                        }
-                        // Build the nested path
-                        const keyStr = String(key);
-                        const nestedPath = path ? (Array.isArray(obj) ? `${path}[${keyStr}]` : `${path}.${keyStr}`) : keyStr;
-                        return ReactiveProxy.create(value, undefined, nestedPath, dispatcher);
-                    }
-                    // If the value is a function, we need to wrap it to ensure that any mutations it performs also trigger onChange
-                    if (typeof value === 'function') {
-                        // For arrays, we only want to wrap mutation methods, not read methods like 'slice', 'concat', etc.
-                        if (Array.isArray(obj)) {
-                            const arrayMutationMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
-                            if (!arrayMutationMethods.includes(key)) {
-                                return value;
-                            }
-                            return function (...args) {
-                                const result = value.apply(this === receiver ? obj : this, args);
-                                ReactiveProxy.dispatch(dispatcher, path || undefined);
-                                return result;
-                            };
-                        }
-                        // For Map, we only want to wrap mutation methods, not read methods like 'get' or 'has'
-                        if (obj.constructor.name === 'Map') {
-                            const mapMutationMethods = ['set', 'delete', 'clear'];
-                            return function (...args) {
-                                const result = value.apply(this === receiver ? obj : this, args);
-                                if (mapMutationMethods.includes(key)) {
-                                    ReactiveProxy.dispatch(dispatcher, path || undefined);
-                                }
-                                return result;
-                            };
-                        }
-                        // For Set, we only want to wrap mutation methods, not read methods like 'has'
-                        if (obj.constructor.name === 'Set') {
-                            const setMutationMethods = ['add', 'delete', 'clear'];
-                            return function (...args) {
-                                const result = value.apply(this === receiver ? obj : this, args);
-                                if (setMutationMethods.includes(key)) {
-                                    ReactiveProxy.dispatch(dispatcher, path || undefined);
-                                }
-                                return result;
-                            };
-                        }
-                    }
-                    return value;
-                },
-                set(obj, key, value) {
-                    const oldValue = Reflect.get(obj, key);
-                    const result = Reflect.set(obj, key, value);
-                    // Only trigger onChange if the value actually changed
-                    if (oldValue !== value) {
-                        const keyStr = String(key);
-                        const fullPath = path ? (Array.isArray(obj) ? `${path}[${keyStr}]` : `${path}.${keyStr}`) : keyStr;
-                        ReactiveProxy.dispatch(dispatcher, fullPath);
-                    }
-                    return result;
-                },
-                deleteProperty(obj, key) {
-                    const result = Reflect.deleteProperty(obj, key);
-                    const keyStr = String(key);
-                    const fullPath = path ? (Array.isArray(obj) ? `${path}[${keyStr}]` : `${path}.${keyStr}`) : keyStr;
-                    ReactiveProxy.dispatch(dispatcher, fullPath);
-                    return result;
+                element[name] = value;
+                if (name === 'value') {
+                    // Store the original typed value so that v-model on radio buttons
+                    // can preserve the type (e.g., boolean false instead of string "false").
+                    element._value = value;
                 }
-            });
-            // Cache the proxy for this path
-            pathMap.set(path, proxy);
-            // Track that this proxy wraps the target to prevent double-wrapping
-            this.proxyToTarget.set(proxy, target);
-            // Store the path for this proxy (for computed property mapping)
-            if (path) {
-                this.proxyPaths.set(proxy, path);
             }
-            return proxy;
         }
         /**
-         * Looks up the dispatcher associated with (target, path), or installs a new one.
-         * When called for a nested target during proxy walking, the enclosing dispatcher
-         * is reused so a single subtree fans out changes through one notification path.
+         * Updates a boolean attribute.
          */
-        static resolveDispatcher(target, path, inheritedDispatcher) {
-            let pathMap = this.dispatchers.get(target);
-            if (!pathMap) {
-                pathMap = new Map();
-                this.dispatchers.set(target, pathMap);
+        #updateBooleanAttribute(element, name, value) {
+            if (value) {
+                element.setAttribute(name, '');
             }
-            const existing = pathMap.get(path);
-            if (existing) {
-                return existing;
+            else {
+                element.removeAttribute(name);
             }
-            const dispatcher = inheritedDispatcher ?? { listeners: new Set() };
-            pathMap.set(path, dispatcher);
-            return dispatcher;
         }
         /**
-         * Invokes every listener attached to the dispatcher.
-         * Iterates a snapshot of the listener set so unsubscribing during dispatch is safe.
+         * Updates a regular attribute.
+         * An attribute that already holds the value is left alone: setting `src` on
+         * an <iframe>, even to the same URL, loads its page again.
          */
-        static dispatch(dispatcher, changedPath) {
-            if (dispatcher.listeners.size === 0) {
-                return;
+        #updateAttribute(element, name, value) {
+            if (value == null || value === false) {
+                if (element.hasAttribute(name)) {
+                    element.removeAttribute(name);
+                }
             }
-            const snapshot = Array.from(dispatcher.listeners);
-            for (const listener of snapshot) {
-                listener(changedPath);
+            else {
+                const text = String(value);
+                if (element.getAttribute(name) !== text) {
+                    element.setAttribute(name, text);
+                }
             }
         }
+    }
+
+    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    /**
+     * Directive for rendering components.
+     * Usage: <div v-component="componentId" :options="props"></div>
+     *
+     * The :options binding is used to pass properties to the component.
+     * Example:
+     *   <div v-component="my-component" :options="{message: 'Hello'}"></div>
+     */
+    class VComponentDirective {
         /**
-         * Subscribes a listener to changes inside the subtree of an existing reactive proxy.
-         *
-         * The listener is scoped by the proxy's source path: only changes at or below that
-         * path are delivered, which lets a child component receive notifications when the
-         * nested contents of a prop change even though the prop reference itself is unchanged.
-         *
-         * @param proxyOrTarget A proxy returned from create(), or the underlying target object.
-         * @param listener Called with the full source path of every relevant change.
-         * @returns A function that removes the subscription.
+         * The virtual node to which this directive is applied.
          */
-        static subscribe(proxyOrTarget, listener) {
-            if (typeof proxyOrTarget !== 'object' || proxyOrTarget === null) {
-                return () => { };
-            }
-            const target = (this.proxyToTarget.get(proxyOrTarget) ?? proxyOrTarget);
-            const scopePath = this.proxyPaths.get(proxyOrTarget) ?? '';
-            const pathMap = this.dispatchers.get(target);
-            const dispatcher = pathMap?.get(scopePath);
-            if (!dispatcher) {
-                return () => { };
-            }
-            const wrapper = scopePath
-                ? (changedPath) => {
-                    if (changedPath === scopePath ||
-                        (typeof changedPath === 'string' && (changedPath.startsWith(scopePath + '.') ||
-                            changedPath.startsWith(scopePath + '[')))) {
-                        listener(changedPath);
-                    }
+        #vNode;
+        /**
+         * The component ID to render.
+         */
+        #componentId;
+        /**
+         * The application instance for the component.
+         */
+        #componentApp;
+        constructor(context) {
+            this.#vNode = context.vNode;
+            this.#componentId = context.attribute.value.trim();
+            // Remove the directive attribute from the element
+            this.#vNode.node.removeAttribute(context.attribute.name);
+        }
+        /**
+         * @inheritdoc
+         */
+        get name() {
+            return StandardDirectiveName.V_COMPONENT;
+        }
+        /**
+         * @inheritdoc
+         */
+        get vNode() {
+            return this.#vNode;
+        }
+        /**
+         * @inheritdoc
+         */
+        get needsAnchor() {
+            return true;
+        }
+        /**
+         * @inheritdoc
+         */
+        get bindingsPreparer() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get domUpdater() {
+            // Create and return the DOM updater
+            const updater = {
+                get dependentIdentifiers() {
+                    return [];
+                },
+                applyToDOM: () => {
+                    this.#render();
                 }
-                : listener;
-            dispatcher.listeners.add(wrapper);
-            return () => {
-                dispatcher.listeners.delete(wrapper);
             };
+            return updater;
         }
         /**
-         * Checks if the given object is a reactive proxy.
-         *
-         * @param obj The object to check.
-         * @returns True if the object is a reactive proxy, false otherwise.
+         * @inheritdoc
          */
-        static isReactive(obj) {
-            return this.proxyCache.has(obj);
+        get templatize() {
+            return true;
         }
         /**
-         * Unwraps a reactive proxy to get the original object.
-         * If the object is not a proxy, returns it as-is.
-         *
-         * @param obj The object to unwrap.
-         * @returns The original object.
+         * @inheritdoc
          */
-        static unwrap(obj) {
-            // This is a simplified implementation
-            // In a full implementation, we'd need to store a reverse mapping
-            return obj;
+        get dependentIdentifiers() {
+            return [];
+        }
+        /**
+         * @inheritdoc
+         */
+        get onMount() {
+            return undefined;
         }
         /**
-         * Marks an object as "raw" (non-reactive).
-         * Objects marked as raw will not be wrapped with Proxy when accessed from reactive objects.
-         * This is useful for objects that should not be reactive, such as:
-         * - Objects with private fields (class instances with # fields)
-         * - Third-party library instances
-         * - Objects used only for method calls
-         *
-         * @param obj The object to mark as raw.
-         * @returns The same object (for chaining).
+         * @inheritdoc
          */
-        static markRaw(obj) {
-            if (typeof obj === 'object' && obj !== null) {
-                this.rawObjects.add(obj);
-            }
-            return obj;
+        get onMounted() {
+            return undefined;
         }
         /**
-         * Checks if an object is marked as raw (non-reactive).
-         *
-         * @param obj The object to check.
-         * @returns True if the object is marked as raw, false otherwise.
+         * @inheritdoc
          */
-        static isRaw(obj) {
-            return typeof obj === 'object' && obj !== null && this.rawObjects.has(obj);
+        get onUpdate() {
+            return undefined;
         }
         /**
-         * Gets the source path for a proxy object.
-         * This is used to map computed property values back to their source paths.
-         * For example, if a computed property returns `model.elements[0]`,
-         * this method returns "model.elements[0]" for that object.
-         *
-         * @param obj The proxy object to get the path for.
-         * @returns The source path, or undefined if not found.
+         * @inheritdoc
          */
-        static getPath(obj) {
-            if (typeof obj !== 'object' || obj === null) {
-                return undefined;
-            }
-            return this.proxyPaths.get(obj);
+        get onUpdated() {
+            return undefined;
         }
         /**
-         * Registers a path alias.
-         * This is used when a variable is assigned to reference an existing reactive object.
-         * For example, when `editingNestedStep = routes[0].steps[0]`, this creates an alias
-         * so that changes to "routes[0].steps[0].steps" also match "editingNestedStep.steps".
-         *
-         * @param aliasPath The alias path (e.g., "editingNestedStep")
-         * @param sourcePath The source path (e.g., "routes[0].steps[0]")
+         * @inheritdoc
          */
-        static registerPathAlias(aliasPath, sourcePath) {
-            if (aliasPath && sourcePath && aliasPath !== sourcePath) {
-                this.pathAliases.set(aliasPath, sourcePath);
-            }
+        get onUnmount() {
+            return undefined;
         }
         /**
-         * Unregisters a path alias.
-         *
-         * @param aliasPath The alias path to remove
+         * @inheritdoc
          */
-        static unregisterPathAlias(aliasPath) {
-            // Remove all aliases that start with the given path
-            for (const key of this.pathAliases.keys()) {
-                if (key === aliasPath || key.startsWith(aliasPath + '.') || key.startsWith(aliasPath + '[')) {
-                    this.pathAliases.delete(key);
-                }
-            }
+        get onUnmounted() {
+            return undefined;
         }
         /**
-         * Resolves an alias path to its source path.
-         * Also handles nested paths (e.g., "editingNestedStep.steps" -> "routes[0].steps[0].steps").
-         *
-         * @param aliasPath The alias path to resolve
-         * @returns The source path, or undefined if no alias exists
+         * @inheritdoc
          */
-        static resolvePathAlias(aliasPath) {
-            // Direct match
-            if (this.pathAliases.has(aliasPath)) {
-                return this.pathAliases.get(aliasPath);
+        destroy() {
+            if (!this.#componentApp) {
+                // Not rendered, no action needed
+                return;
             }
-            // Check if this is a nested path of an aliased variable
-            // e.g., "editingNestedStep.steps" when "editingNestedStep" is aliased
-            for (const [alias, source] of this.pathAliases.entries()) {
-                if (aliasPath.startsWith(alias + '.') || aliasPath.startsWith(alias + '[')) {
-                    const suffix = aliasPath.substring(alias.length);
-                    return source + suffix;
-                }
+            // Get the component's root VNode
+            const componentVNode = this.#componentApp.rootVNode;
+            // Destroy component application first (calls @unmount hooks while DOM is still accessible)
+            this.#componentApp.unmount();
+            // Remove the component's root node from the DOM
+            if (componentVNode?.node.parentNode) {
+                componentVNode.node.parentNode.removeChild(componentVNode.node);
             }
-            return undefined;
+            this.#componentApp = undefined;
         }
         /**
-         * Checks if a change path matches an identifier, considering path aliases.
-         * For example, if "editingNestedStep" is aliased to "routes[0].steps[0]",
-         * then a change to "routes[0].steps[0].steps" should match "editingNestedStep.steps".
-         *
-         * @param changePath The path that was changed (e.g., "routes[0].steps[0].steps")
-         * @param identifier The identifier to check (e.g., "editingNestedStep.steps")
-         * @returns True if the change path matches the identifier
+         * Renders the component.
          */
-        static doesChangeMatchIdentifier(changePath, identifier) {
-            // Direct match
-            if (this.pathMatches(changePath, identifier)) {
-                return true;
+        #render() {
+            if (this.#componentApp) {
+                // Already rendered, no action needed
+                return;
             }
-            // Check if the change path is the resolved identifier or lies below it
-            // (handles cases like array item changes)
-            const resolvedIdentifier = this.resolvePathAlias(identifier);
-            if (resolvedIdentifier && this.pathMatches(changePath, resolvedIdentifier, true)) {
-                return true;
+            // Clone the component's template and replace the original node
+            const clone = this.#cloneNode();
+            this.#vNode.anchorNode?.parentNode?.insertBefore(clone, this.#vNode.anchorNode.nextSibling);
+            // Get properties from :options or :options.component directive
+            let properties = {};
+            const optionsDirective = this.#vNode.directiveManager?.optionsDirective('component');
+            if (optionsDirective && optionsDirective.expression && this.#vNode.bindings) {
+                // Evaluate the options expression using ExpressionEvaluator
+                const evaluator = ExpressionEvaluator.create(optionsDirective.expression, this.#vNode.bindings, this.#vNode.vApplication.functionDependencies);
+                const result = evaluator.evaluate();
+                if (typeof result === 'object' && result !== null) {
+                    properties = result;
+                }
             }
-            return false;
+            // Get component definition from the application's component registry
+            const component = this.#vNode.vApplication.componentRegistry.get(this.#componentId);
+            if (!component) {
+                throw new Error(`Component '${this.#componentId}' not found in registry`);
+            }
+            // Create component instance
+            const instance = component.createInstance(properties);
+            // Create and mount child application using the parent application's registries
+            this.#componentApp = this.#vNode.vApplication.createChildApp(instance);
+            this.#componentApp.mount(clone);
         }
         /**
-         * Checks whether a change path names the location an identifier refers to.
-         * A "[*]" index in the identifier (e.g. "items[*].name" for `items[i].name`)
-         * stands for an index known only when the expression runs and matches any
-         * one index or key.
-         *
-         * @param changePath The path that was changed (e.g., "items[2].name")
-         * @param identifier The identifier to check (e.g., "items[*].name")
-         * @param descendants Whether a change below the identifier also matches
-         * @returns True if the change path matches the identifier
+         * Clones the component's template and returns the root element.
+         * @returns The cloned root HTMLElement of the component.
+         * @throws Error if the component or its template is not found.
          */
-        static pathMatches(changePath, identifier, descendants = false) {
-            if (changePath === identifier) {
-                return true;
+        #cloneNode() {
+            // Get component definition from the application's component registry
+            const component = this.#vNode.vApplication.componentRegistry.get(this.#componentId);
+            if (!component) {
+                throw new Error(`Component '${this.#componentId}' not found in registry`);
             }
-            if (!identifier.includes('[*]')) {
-                return descendants && (changePath.startsWith(identifier + '.') || changePath.startsWith(identifier + '['));
+            // Get template element
+            const finalTemplateID = component.templateID || component.id;
+            const templateElement = document.querySelector(`#${finalTemplateID}`);
+            if (!templateElement || !(templateElement instanceof HTMLTemplateElement)) {
+                throw new Error(`Template element '#${finalTemplateID}' not found`);
             }
-            const cacheKey = descendants ? identifier + ' ' : identifier;
-            let pattern = this.pathPatterns.get(cacheKey);
-            if (!pattern) {
-                const source = identifier
-                    .split('[*]')
-                    .map(part => part.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
-                    .join('(?:\\[[^\\]]*\\]|\\.[^.[]+)');
-                pattern = new RegExp(`^${source}${descendants ? '(?:[.[].*)?' : ''}$`);
-                this.pathPatterns.set(cacheKey, pattern);
+            // Clone template content
+            const fragment = templateElement.content.cloneNode(true);
+            const childNodes = Array.from(fragment.childNodes);
+            // Find the first element node
+            for (const node of childNodes) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    return node;
+                }
             }
-            return pattern.test(changePath);
+            throw new Error(`No element found in template '#${finalTemplateID}'`);
         }
     }
 
@@ -8492,6 +8577,13 @@
          * The set of changed identifiers.
          */
         #changes = new Set();
+        /**
+         * On the root bindings: every descendant scope (a v-for row, a component) that
+         * recorded a change since the last clearChanges(). The root clears their change
+         * sets together with its own at the end of the update cycle, so a loop variable
+         * set when a row was created does not count as changed in every later cycle.
+         */
+        #dirtyScopes;
         /**
          * Cache for array lengths to detect length changes when the same object reference is used.
          */
@@ -8634,7 +8726,7 @@
                                 for (const part of changedPath?.split('.') || []) {
                                     path = path ? `${path}.${part}` : part;
                                     this.#logger?.debug(`Binding changed: ${path}`);
-                                    this.#changes.add(path);
+                                    this.#addChange(path);
                                 }
                                 if (!this.#suppressOnChange) {
                                     this.#onChange?.(changedPath);
@@ -8674,7 +8766,7 @@
                             for (const part of changedPath.split('.')) {
                                 path = path ? `${path}.${part}` : part;
                                 this.#logger?.debug(`Binding changed (external): ${path}`);
-                                this.#changes.add(path);
+                                this.#addChange(path);
                             }
                             if (!this.#suppressOnChange) {
                                 this.#onChange?.(changedPath);
@@ -8701,7 +8793,7 @@
                             const newValuePreview = newValueString.length > 100 ? `${newValueString.substring(0, 100)}...` : newValueString;
                             this.#logger.debug(`Binding set on ${target === obj ? 'local' : 'parent'}: ${key}: ${oldValuePreview} -> ${newValuePreview}`);
                         }
-                        this.#changes.add(key);
+                        this.#addChange(key);
                         if (!this.#suppressOnChange) {
                             this.#onChange?.(key);
                         }
@@ -8716,7 +8808,7 @@
                         this.#externalSubscriptions.delete(key);
                     }
                     this.#logger?.debug(`Binding deleted: ${key}`);
-                    this.#changes.add(key);
+                    this.#addChange(key);
                     this.#onChange?.(key);
                     return result;
                 }
@@ -8757,6 +8849,27 @@
          */
         clearChanges() {
             this.#changes.clear();
+            if (this.#dirtyScopes) {
+                for (const scope of this.#dirtyScopes) {
+                    scope.#changes.clear();
+                }
+                this.#dirtyScopes.clear();
+            }
+        }
+        /**
+         * Records a changed identifier on this scope and, for a non-root scope, registers the
+         * scope with the root so that the change is cleared at the end of the update cycle.
+         */
+        #addChange(key) {
+            this.#changes.add(key);
+            if (!this.#parent) {
+                return;
+            }
+            let root = this;
+            while (root.#parent) {
+                root = root.#parent;
+            }
+            (root.#dirtyScopes ??= new Set()).add(this);
         }
         /**
          * Sets a binding value.
@@ -8932,7 +9045,7 @@
          * @param key The identifier to mark as changed.
          */
         markChanged(key) {
-            this.#changes.add(key);
+            this.#addChange(key);
         }
         /**
          * Resolves a local path alias for the given identifier by walking up the bindings chain.
@@ -8979,6 +9092,54 @@
             // Fall back to global alias resolution (computed properties, etc.)
             return ReactiveProxy.doesChangeMatchIdentifier(changePath, identifier);
         }
+        /**
+         * Checks whether any of the changes affects an expression with the given identifiers.
+         *
+         * An identifier with a run-time index ("frames[*].url" for frames[i].url) normally
+         * matches a change at any index. When trackedPaths holds the paths the expression read
+         * during its last evaluation, the identifier is narrowed to the concrete paths among
+         * them ("frames[0].url"), so a write to another element is ignored. When no recorded
+         * path fits the identifier (not evaluated yet, a raw object, a short-circuited read),
+         * the identifier keeps matching every index.
+         *
+         * @param changes The change paths of the current update cycle.
+         * @param identifiers The identifiers the expression depends on.
+         * @param trackedPaths The paths read during the expression's last evaluation, if recorded.
+         * @returns True if some change matches some identifier.
+         */
+        isAffected(changes, identifiers, trackedPaths) {
+            if (changes.length === 0) {
+                return false;
+            }
+            for (const identifier of identifiers) {
+                const candidates = this.#concretePaths(identifier, trackedPaths) ?? [identifier];
+                for (const candidate of candidates) {
+                    if (changes.some(change => this.doesChangeMatchIdentifier(change, candidate))) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+        /**
+         * Returns the recorded paths that an identifier with a run-time index stood for during
+         * the last evaluation, or undefined when the identifier has no such index or nothing
+         * recorded fits it. The identifier is tried both as spelled and resolved through path
+         * aliases, since recorded paths are source paths.
+         */
+        #concretePaths(identifier, trackedPaths) {
+            if (!trackedPaths || trackedPaths.size === 0 || !identifier.includes('[*]')) {
+                return undefined;
+            }
+            const resolved = this.resolveAlias(identifier);
+            const paths = [];
+            for (const path of trackedPaths) {
+                if (ReactiveProxy.pathMatches(path, identifier) || (resolved !== undefined && ReactiveProxy.pathMatches(path, resolved))) {
+                    paths.push(path);
+                }
+            }
+            return paths.length > 0 ? paths : undefined;
+        }
     }
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
@@ -9173,10 +9334,14 @@
          */
         get domUpdater() {
             const identifiers = this.dependentIdentifiers;
+            const directive = this;
             const updater = {
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return directive.#collectTrackedPaths();
+                },
                 applyToDOM: () => {
                     this.#refresh();
                 }
@@ -9199,6 +9364,21 @@
             }
             return Array.from(ids);
         }
+        /**
+         * The paths the prop expressions read during their last evaluation, united across
+         * props, or undefined when no prop expression has a run-time index.
+         */
+        #collectTrackedPaths() {
+            let paths;
+            for (const prop of this.#props) {
+                const tracked = prop.evaluator?.trackedPaths;
+                if (tracked) {
+                    paths ??= new Set();
+                    tracked.forEach(path => paths.add(path));
+                }
+            }
+            return paths;
+        }
         /**
          * @inheritdoc
          *
@@ -10004,6 +10184,11 @@
          * The function used to evaluate the text with current bindings.
          */
         #evaluate;
+        /**
+         * The source paths read through reactive proxies during the last evaluation,
+         * recorded only when some expression has a run-time index ("items[i].name").
+         */
+        #trackedPaths;
         /**
          * Constructs a VTextEvaluator instance.
          * @param text The text containing embedded expressions in the form of {{...}}.
@@ -10044,8 +10229,10 @@
                     func: new Function(args, funcBody)
                 };
             });
+            // Only an expression with an index known at run time needs its reads recorded
+            const hasDynamicIndex = this.#identifiers.some(id => id.includes('[*]'));
             // Create a function to reconstruct the text with evaluated expressions
-            this.#evaluate = (bindings) => {
+            const evaluateText = (bindings) => {
                 let result = text;
                 evaluators.forEach((evaluator, i) => {
                     // Build values for baseArgs (no dots) in the same order as function parameters
@@ -10063,6 +10250,15 @@
                 });
                 return result;
             };
+            this.#evaluate = hasDynamicIndex
+                ? (bindings) => {
+                    const paths = new Set();
+                    this.#trackedPaths = undefined;
+                    const result = ReactiveProxy.track(paths, () => evaluateText(bindings));
+                    this.#trackedPaths = paths;
+                    return result;
+                }
+                : evaluateText;
         }
         /**
          * Checks if the given text contains any expressions in the form of {{...}}.
@@ -10079,6 +10275,14 @@
         get identifiers() {
             return this.#identifiers;
         }
+        /**
+         * The source paths read through reactive proxies during the last evaluation.
+         * Recorded only when an expression has a run-time index ("items[i].name");
+         * undefined before the first evaluation and for texts without such an index.
+         */
+        get trackedPaths() {
+            return this.#trackedPaths;
+        }
         /**
          * Evaluates the text with the provided bindings and returns the resulting string.
          * @param bindings The bindings to use for evaluating the expressions.
@@ -10568,7 +10772,7 @@
             if (this.#nodeType === Node.TEXT_NODE && this.#textEvaluator) {
                 // If this is a text node with a text evaluator, update its content if needed
                 // Check if any of the identifiers are in the changed identifiers (considering path aliases)
-                const changed = this.#textEvaluator.identifiers.some(id => changes.some(change => this.bindings.doesChangeMatchIdentifier(change, id)));
+                const changed = this.bindings.isAffected(changes, this.#textEvaluator.identifiers, this.#textEvaluator.trackedPaths);
                 // If the text node has changed, update its content
                 if (changed) {
                     const text = this.#node;
@@ -10591,7 +10795,7 @@
                     }
                     // Prepare bindings for each preparer if relevant identifiers have changed
                     for (const preparer of this.#directiveManager.bindingsPreparers) {
-                        const changed = preparer.dependentIdentifiers.some(id => changes.some(change => this.bindings.doesChangeMatchIdentifier(change, id)));
+                        const changed = this.bindings.isAffected(changes, preparer.dependentIdentifiers, preparer.trackedPaths);
                         if (changed) {
                             preparer.prepareBindings();
                         }
@@ -10600,7 +10804,7 @@
                 // Apply DOM updaters from directives, if any
                 if (this.#directiveManager?.domUpdaters) {
                     for (const updater of this.#directiveManager.domUpdaters) {
-                        const changed = updater.dependentIdentifiers.some(id => changes.some(change => this.bindings.doesChangeMatchIdentifier(change, id)));
+                        const changed = this.bindings.isAffected(changes, updater.dependentIdentifiers, updater.trackedPaths);
                         if (changed) {
                             updater.applyToDOM();
                         }
@@ -10853,6 +11057,21 @@
         get allDependentIdentifiers() {
             return this.#allDependentIdentifiers;
         }
+        /**
+         * The paths the conditions of the chain read during their last evaluation, united
+         * across directives, or undefined when no condition has a run-time index.
+         */
+        get trackedPaths() {
+            let paths;
+            for (const directive of this.#directives) {
+                const tracked = directive.trackedPaths;
+                if (tracked) {
+                    paths ??= new Set();
+                    tracked.forEach(path => paths.add(path));
+                }
+            }
+            return paths;
+        }
         /**
          * Adds a directive (v-else-if or v-else) to the conditional context.
          * @param directive The directive to add.
@@ -11049,11 +11268,15 @@
          */
         get domUpdater() {
             const identifiers = this.#conditionalContext.allDependentIdentifiers;
+            const conditionalContext = this.#conditionalContext;
             // Create an updater that handles the conditional rendering
             const updater = {
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return conditionalContext.trackedPaths;
+                },
                 applyToDOM: () => {
                     this.#render();
                 }
@@ -11072,6 +11295,13 @@
         get dependentIdentifiers() {
             return this.#evaluator?.dependentIdentifiers ?? [];
         }
+        /**
+         * The paths the condition read during its last evaluation, when it has an index
+         * known only at run time (see ExpressionEvaluator.trackedPaths).
+         */
+        get trackedPaths() {
+            return this.#evaluator?.trackedPaths;
+        }
         /**
          * The context for managing related conditional directives (v-if, v-else-if, v-else).
          */
@@ -11438,11 +11668,15 @@
          */
         get domUpdater() {
             const identifiers = this.#sourceEvaluator?.dependentIdentifiers ?? [];
+            const sourceEvaluator = this.#sourceEvaluator;
             // Create and return the DOM updater
             const updater = {
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return sourceEvaluator?.trackedPaths;
+                },
                 applyToDOM: () => {
                     this.#render();
                 }
@@ -12162,6 +12396,9 @@
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return evaluator.trackedPaths;
+                },
                 applyToDOM: () => {
                     const element = vNode.node;
                     const htmlContent = evaluator.evaluate() ?? '';
@@ -12588,6 +12825,9 @@
                 get dependentIdentifiers() {
                     return self.#collectDependentIdentifiers();
                 },
+                get trackedPaths() {
+                    return self.#evaluator?.trackedPaths;
+                },
                 applyToDOM: () => {
                     self.#render();
                 }
@@ -13986,6 +14226,9 @@
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return evaluator.trackedPaths;
+                },
                 applyToDOM() {
                     const shouldRender = evaluator.evaluateAsBoolean();
                     if (shouldRender) {
@@ -14153,6 +14396,9 @@
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return evaluator.trackedPaths;
+                },
                 applyToDOM() {
                     const element = vNode.node;
                     element.textContent = toDisplayString(evaluator.evaluate());
@@ -14315,6 +14561,9 @@
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return evaluator.trackedPaths;
+                },
                 applyToDOM: () => {
                     const value = evaluator.evaluateAsBoolean();
                     const previous = this.#previousValue;