@mintjamsinc/ichigojs 0.1.86 → 0.1.87

package/dist/ichigo.esm.js

@@ -6728,1117 +6728,1235 @@ base.MethodDefinition = base.PropertyDefinition = base.Property = function (node
 
 // 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);
     }
@@ -7846,7 +7964,7 @@ class VComponentDirective {
      * @inheritdoc
      */
     get name() {
-        return StandardDirectiveName.V_COMPONENT;
+        return StandardDirectiveName.V_BIND;
     }
     /**
      * @inheritdoc
@@ -7858,7 +7976,7 @@ class VComponentDirective {
      * @inheritdoc
      */
     get needsAnchor() {
-        return true;
+        return false;
     }
     /**
      * @inheritdoc
@@ -7870,10 +7988,15 @@ class VComponentDirective {
      * @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();
@@ -7885,18 +8008,60 @@ class VComponentDirective {
      * @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;
     }
     /**
@@ -7933,529 +8098,449 @@ class VComponentDirective {
      * @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}'`);
     }
 }
 
@@ -8486,6 +8571,13 @@ class VBindings {
      * 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.
      */
@@ -8628,7 +8720,7 @@ class VBindings {
                             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);
@@ -8668,7 +8760,7 @@ class VBindings {
                         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);
@@ -8695,7 +8787,7 @@ class VBindings {
                         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);
                     }
@@ -8710,7 +8802,7 @@ class VBindings {
                     this.#externalSubscriptions.delete(key);
                 }
                 this.#logger?.debug(`Binding deleted: ${key}`);
-                this.#changes.add(key);
+                this.#addChange(key);
                 this.#onChange?.(key);
                 return result;
             }
@@ -8751,6 +8843,27 @@ class VBindings {
      */
     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.
@@ -8926,7 +9039,7 @@ class VBindings {
      * @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.
@@ -8973,6 +9086,54 @@ class VBindings {
         // 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.
@@ -9167,10 +9328,14 @@ class VSlotOutletDirective {
      */
     get domUpdater() {
         const identifiers = this.dependentIdentifiers;
+        const directive = this;
         const updater = {
             get dependentIdentifiers() {
                 return identifiers;
             },
+            get trackedPaths() {
+                return directive.#collectTrackedPaths();
+            },
             applyToDOM: () => {
                 this.#refresh();
             }
@@ -9193,6 +9358,21 @@ class VSlotOutletDirective {
         }
         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
      *
@@ -9998,6 +10178,11 @@ class VTextEvaluator {
      * 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 {{...}}.
@@ -10038,8 +10223,10 @@ class VTextEvaluator {
                 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
@@ -10057,6 +10244,15 @@ class VTextEvaluator {
             });
             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 {{...}}.
@@ -10073,6 +10269,14 @@ class VTextEvaluator {
     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.
@@ -10562,7 +10766,7 @@ class VNode {
         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;
@@ -10585,7 +10789,7 @@ class VNode {
                 }
                 // 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();
                     }
@@ -10594,7 +10798,7 @@ class VNode {
             // 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();
                     }
@@ -10847,6 +11051,21 @@ class VConditionalDirectiveContext {
     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.
@@ -11043,11 +11262,15 @@ class VConditionalDirective {
      */
     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();
             }
@@ -11066,6 +11289,13 @@ class VConditionalDirective {
     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).
      */
@@ -11432,11 +11662,15 @@ class VForDirective {
      */
     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();
             }
@@ -12156,6 +12390,9 @@ class VHtmlDirective {
             get dependentIdentifiers() {
                 return identifiers;
             },
+            get trackedPaths() {
+                return evaluator.trackedPaths;
+            },
             applyToDOM: () => {
                 const element = vNode.node;
                 const htmlContent = evaluator.evaluate() ?? '';
@@ -12582,6 +12819,9 @@ class VModelDirective {
             get dependentIdentifiers() {
                 return self.#collectDependentIdentifiers();
             },
+            get trackedPaths() {
+                return self.#evaluator?.trackedPaths;
+            },
             applyToDOM: () => {
                 self.#render();
             }
@@ -13980,6 +14220,9 @@ class VShowDirective {
             get dependentIdentifiers() {
                 return identifiers;
             },
+            get trackedPaths() {
+                return evaluator.trackedPaths;
+            },
             applyToDOM() {
                 const shouldRender = evaluator.evaluateAsBoolean();
                 if (shouldRender) {
@@ -14147,6 +14390,9 @@ class VTextDirective {
             get dependentIdentifiers() {
                 return identifiers;
             },
+            get trackedPaths() {
+                return evaluator.trackedPaths;
+            },
             applyToDOM() {
                 const element = vNode.node;
                 element.textContent = toDisplayString(evaluator.evaluate());
@@ -14309,6 +14555,9 @@ class VFocusDirective {
             get dependentIdentifiers() {
                 return identifiers;
             },
+            get trackedPaths() {
+                return evaluator.trackedPaths;
+            },
             applyToDOM: () => {
                 const value = evaluator.evaluateAsBoolean();
                 const previous = this.#previousValue;