@mintjamsinc/ichigojs 0.1.85 → 0.1.87

package/dist/ichigo.cjs

@@ -6732,6 +6732,507 @@
       if (node.value) { c(node.value, st, "Expression"); }
     };
 
+    // 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.
+         */
+        static proxyPaths = new WeakMap();
+        /**
+         * 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 dispatchers = new WeakMap();
+        /**
+         * 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.
+         */
+        static pathAliases = new Map();
+        /**
+         * Compiled patterns for identifiers that contain a "[*]" index, keyed by the
+         * identifier and whether descendants of the path also match.
+         */
+        static pathPatterns = new Map();
+        /**
+         * The set collecting the paths read through any proxy while track() runs, or
+         * undefined when no expression is being tracked.
+         */
+        static tracker;
+        /**
+         * 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.
+         */
+        static isIndexKey(key) {
+            return /^(?:0|[1-9]\d*)$/.test(key);
+        }
+        /**
+         * 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.
+         */
+        static joinPath(path, key) {
+            const keyStr = String(key);
+            if (!path) {
+                return keyStr;
+            }
+            return this.isIndexKey(keyStr) ? `${path}[${keyStr}]` : `${path}.${keyStr}`;
+        }
+        /**
+         * 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.
+         */
+        static track(paths, fn) {
+            const previous = this.tracker;
+            this.tracker = paths;
+            try {
+                return fn();
+            }
+            finally {
+                this.tracker = previous;
+            }
+        }
+        /**
+         * 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}.
+         */
+        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;
+            }
+            // 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;
+                }
+            }
+            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);
+            }
+            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.
+         */
+        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;
+        }
+        /**
+         * Invokes every listener attached to the dispatcher.
+         * Iterates a snapshot of the listener set so unsubscribing during dispatch is safe.
+         */
+        static dispatch(dispatcher, changedPath) {
+            if (dispatcher.listeners.size === 0) {
+                return;
+            }
+            const snapshot = Array.from(dispatcher.listeners);
+            for (const listener of snapshot) {
+                listener(changedPath);
+            }
+        }
+        /**
+         * 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.
+         */
+        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);
+            };
+        }
+        /**
+         * 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.
+         */
+        static isReactive(obj) {
+            return this.proxyCache.has(obj);
+        }
+        /**
+         * 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.
+         */
+        static unwrap(obj) {
+            // This is a simplified implementation
+            // In a full implementation, we'd need to store a reverse mapping
+            return obj;
+        }
+        /**
+         * 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).
+         */
+        static markRaw(obj) {
+            if (typeof obj === 'object' && obj !== null) {
+                this.rawObjects.add(obj);
+            }
+            return obj;
+        }
+        /**
+         * 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.
+         */
+        static isRaw(obj) {
+            return typeof obj === 'object' && obj !== null && this.rawObjects.has(obj);
+        }
+        /**
+         * 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.
+         */
+        static getPath(obj) {
+            if (typeof obj !== 'object' || obj === null) {
+                return undefined;
+            }
+            return this.proxyPaths.get(obj);
+        }
+        /**
+         * 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]")
+         */
+        static registerPathAlias(aliasPath, sourcePath) {
+            if (aliasPath && sourcePath && aliasPath !== sourcePath) {
+                this.pathAliases.set(aliasPath, sourcePath);
+            }
+        }
+        /**
+         * Unregisters a path alias.
+         *
+         * @param aliasPath The alias path to remove
+         */
+        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);
+                }
+            }
+        }
+        /**
+         * 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
+         */
+        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;
+        }
+        /**
+         * 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
+         */
+        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;
+        }
+        /**
+         * 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
+         */
+        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.
@@ -6766,28 +7267,28 @@
                     }
                 }
                 else if (node.type === 'MemberExpression') {
-                    // Reconstruct chain parts from a MemberExpression (e.g. a.b.c)
+                    // 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;
-                    let stop = false;
-                    while (cur && !stop) {
+                    while (cur) {
                         // property part (right side)
                         if (cur.property) {
                             if (!cur.computed && cur.property.type === 'Identifier') {
-                                parts.unshift(cur.property.name);
+                                parts.unshift(`.${cur.property.name}`);
                             }
                             else if (cur.computed && cur.property.type === 'Literal') {
-                                parts.unshift(String(cur.property.value));
-                            }
-                            else if (cur.computed && cur.property.type === 'Identifier') {
-                                // e.g. obj[prop] -> include the prop identifier (it will also be added separately)
-                                parts.unshift(cur.property.name);
+                                // 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 {
-                                // unknown property shape (e.g. expression) — stop adding chain here
-                                // inner expressions will be visited separately by walk.full
-                                stop = true;
-                                break;
+                            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)
@@ -6807,7 +7308,6 @@
                             }
                             else {
                                 // other object types (CallExpression, etc.) — stop here
-                                stop = true;
                                 break;
                             }
                         }
@@ -6815,10 +7315,15 @@
                             break;
                         }
                     }
-                    if (parts.length > 0) {
-                        // Add progressive chains: 'a', 'a.b', 'a.b.c'
+                    // 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('.');
+                            const chain = parts.slice(0, i + 1).join('');
                             identifiers.add(chain);
                             // Also apply functionDependencies lookup for the chain key
                             if (functionDependencies[chain]) {
@@ -6832,6 +7337,16 @@
             });
             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.
@@ -7118,718 +7633,336 @@
                         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();
-     * ```
-     */
-    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 = id.split('.')[0];
-                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);
-        }
-        /**
-         * 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.
-         */
-        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}`);
-            }
-        }
-        /**
-         * Evaluates the expression with the current bindings.
-         *
-         * @returns The result of the expression evaluation.
-         */
-        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));
+                    // 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);
                 }
-                // Call the compiled function with the gathered values
-                return this.evaluatorFunc(...values);
+                return result;
             }
             catch (error) {
-                console.error(`[ichigo.js] Error evaluating expression: ${this.expression}`, error);
-                throw error;
+                // If AST parsing fails, fall back to the original expression
+                console.warn('Failed to rewrite expression:', expression, error);
+                return expression;
             }
         }
-        /**
-         * Evaluates the expression and returns the result as a boolean.
-         *
-         * @returns The boolean result of the expression evaluation.
-         */
-        evaluateAsBoolean() {
-            return Boolean(this.evaluate());
-        }
-        /**
-         * Gets the list of identifiers extracted from the expression.
-         */
-        get dependentIdentifiers() {
-            // Return the original extracted identifiers (may include member chains like 'a.b')
-            return this.originalIdentifiers;
-        }
-        /**
-         * Clears the expression cache.
-         * This should be called sparingly, as it will force recompilation of all expressions.
-         */
-        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.
+     * 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:
-     *     <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.
+     * ```typescript
+     * const evaluator = ExpressionEvaluator.create(
+     *   "count + 1",
+     *   bindings,
+     *   functionDependencies
+     * );
+     * const result = evaluator.evaluate();
+     * ```
      */
-    class VBindDirective {
-        /**
-         * The virtual node to which this directive is applied.
-         */
-        #vNode;
-        /**
-         * The expression evaluator for this directive.
-         */
-        #evaluator;
-        /**
-         * 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.
-         */
-        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);
-            }
-            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);
-        }
-        /**
-         * @inheritdoc
-         */
-        get name() {
-            return StandardDirectiveName.V_BIND;
-        }
-        /**
-         * @inheritdoc
-         */
-        get vNode() {
-            return this.#vNode;
-        }
-        /**
-         * @inheritdoc
-         */
-        get needsAnchor() {
-            return false;
-        }
-        /**
-         * @inheritdoc
-         */
-        get bindingsPreparer() {
-            return undefined;
-        }
-        /**
-         * @inheritdoc
-         */
-        get domUpdater() {
-            const identifiers = this.#evaluator?.dependentIdentifiers ?? [];
-            // Create an updater that handles the attribute binding
-            const updater = {
-                get dependentIdentifiers() {
-                    return identifiers;
-                },
-                applyToDOM: () => {
-                    this.#render();
-                }
-            };
-            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.
-         */
-        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;
-        }
+    class ExpressionEvaluator {
         /**
-         * @inheritdoc
+         * Cache for compiled expression functions.
+         * Key: expression string
+         * Value: compiled function
          */
-        get onMounted() {
-            return undefined;
-        }
+        static cache = new Map();
         /**
-         * @inheritdoc
+         * Global objects that are whitelisted for use in expressions.
+         * These objects are available to all expressions for convenience and compatibility.
          */
-        get onUpdate() {
-            return undefined;
-        }
+        static GLOBAL_WHITELIST = {
+            Math,
+            Date,
+            JSON,
+            Array,
+            Object,
+            String,
+            Number,
+            Boolean,
+            parseInt,
+            parseFloat,
+            isNaN,
+            isFinite,
+            encodeURI,
+            decodeURI,
+            encodeURIComponent,
+            decodeURIComponent
+        };
         /**
-         * @inheritdoc
+         * The original expression string.
          */
-        get onUpdated() {
-            return undefined;
-        }
+        expression;
         /**
-         * @inheritdoc
+         * The identifiers extracted from the expression.
          */
-        get onUnmount() {
-            return undefined;
-        }
+        identifiers;
+        // The original extracted identifiers (may include member chains like 'a.b')
+        originalIdentifiers;
         /**
-         * @inheritdoc
+         * The bindings to use for evaluating the expression.
          */
-        get onUnmounted() {
-            return undefined;
-        }
+        bindings;
         /**
-         * @inheritdoc
+         * The compiled function for evaluating the expression.
          */
-        destroy() {
-            // Do nothing. No special cleanup needed.
-        }
+        evaluatorFunc;
         /**
-         * Renders the bound attribute by evaluating the expression and updating the DOM element.
+         * Additional context variables (e.g., 'event', '$ctx').
          */
-        #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);
-            }
-            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);
-            }
-        }
+        additionalContext;
         /**
-         * Updates the class attribute with support for string, array, and object formats.
+         * Whether any identifier has an index known only at run time ("items[*].name").
+         * Only then are the paths read during evaluation worth recording.
          */
-        #updateClass(element, value) {
-            // Determine the new set of classes to apply
-            let newClasses = [];
-            if (typeof value === 'string') {
-                newClasses = value.split(/\s+/).filter(Boolean);
-            }
-            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 [];
-                });
-            }
-            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));
-            }
-            // 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);
-        }
+        hasDynamicIndex;
         /**
-         * Updates the style attribute with support for object format.
+         * The source paths read through reactive proxies during the last evaluation,
+         * or undefined before the first evaluation and when nothing is recorded.
          */
-        #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);
-            }
-            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);
-                        }
-                    }
-                }
-            }
-            // Update managed properties list
-            this.#managedStyles = new Set(newStyles);
-        }
+        trackedPathSet;
         /**
-         * Converts camelCase to kebab-case for CSS properties.
+         * Private constructor. Use ExpressionEvaluator.create() to create instances.
          */
-        #camelToKebab(str) {
-            return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+        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('[*]'));
         }
         /**
-         * Returns true when the target is a custom element and the binding should be
-         * delivered as a property rather than an HTML attribute.
+         * Creates an ExpressionEvaluator instance.
          *
-         * 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.
+         * @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.
          */
-        #isCustomElementProperty(element, name, value) {
-            if (!element.tagName.includes('-')) {
-                return false;
+        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 isObjectOrArray = Array.isArray(value) || (typeof value === 'object' && value !== null);
-            if (isObjectOrArray || name in element) {
-                return true;
+            // 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);
             }
-            return this.#findDeclaredProp(element, name) !== undefined;
-        }
-        /**
-         * 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.
-         */
-        #resolveCustomElementPropertyName(element, name) {
-            // Fast path: exact match already exists
-            if (name in element) {
-                return name;
+            // 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 this.#findDeclaredProp(element, name) ?? name;
+            return new ExpressionEvaluator(expression, bindings, baseIdentifiers, extractedIdentifiers, evaluatorFunc, options?.additionalContext);
         }
         /**
-         * 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.
+         * 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.
          */
-        #findDeclaredProp(element, name) {
-            const props = element.constructor._props;
-            if (!Array.isArray(props)) {
-                return undefined;
+        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}`);
             }
-            const lowerName = name.toLowerCase();
-            const camelLower = this.#kebabToCamel(lowerName).toLowerCase();
-            return props.find(p => {
-                const lowerProp = p.toLowerCase();
-                return lowerProp === lowerName || lowerProp === camelLower;
-            });
-        }
-        /**
-         * Converts kebab-case to camelCase (e.g. `user-name` → `userName`).
-         */
-        #kebabToCamel(str) {
-            return str.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
         }
         /**
-         * 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);
         }
@@ -7837,7 +7970,7 @@
          * @inheritdoc
          */
         get name() {
-            return StandardDirectiveName.V_COMPONENT;
+            return StandardDirectiveName.V_BIND;
         }
         /**
          * @inheritdoc
@@ -7849,7 +7982,7 @@
          * @inheritdoc
          */
         get needsAnchor() {
-            return true;
+            return false;
         }
         /**
          * @inheritdoc
@@ -7861,10 +7994,15 @@
          * @inheritdoc
          */
         get domUpdater() {
-            // Create and return the DOM updater
+            const identifiers = this.#evaluator?.dependentIdentifiers ?? [];
+            const evaluator = this.#evaluator;
+            // Create an updater that handles the attribute binding
             const updater = {
                 get dependentIdentifiers() {
-                    return [];
+                    return identifiers;
+                },
+                get trackedPaths() {
+                    return evaluator?.trackedPaths;
                 },
                 applyToDOM: () => {
                     this.#render();
@@ -7876,18 +8014,60 @@
          * @inheritdoc
          */
         get templatize() {
-            return true;
+            return false;
         }
         /**
          * @inheritdoc
          */
         get dependentIdentifiers() {
-            return [];
+            return this.#evaluator?.dependentIdentifiers ?? [];
+        }
+        /**
+         * Indicates if this directive is binding the "key" attribute.
+         * The "key" attribute is special and is used for optimizing rendering of lists.
+         * If this directive is binding the "key" attribute, it will be handled by the VForDirective.
+         */
+        get isKey() {
+            return (this.#attributeName === 'key');
+        }
+        /**
+         * Indicates if this directive is binding the "options" attribute or any of its sub-properties (e.g., "options.intersection").
+         * The "options" attribute is special and is used for passing options to certain directives like VIntersectionDirective.
+         */
+        get isOptions() {
+            return (this.#attributeName === 'options' || this.#attributeName?.startsWith('options.') === true);
+        }
+        /**
+         * Gets the name of the attribute being bound (e.g., "src", "class", "options", "options.intersection").
+         */
+        get attributeName() {
+            return this.#attributeName;
+        }
+        /**
+         * Gets the original expression string from the directive.
+         */
+        get expression() {
+            return this.#expression;
+        }
+        /**
+         * Evaluates the bound expression and returns the current value.
+         * Returns undefined when no evaluator is available (e.g., empty expression).
+         */
+        evaluate() {
+            return this.#evaluator?.evaluate();
         }
         /**
          * @inheritdoc
          */
         get onMount() {
+            // A constant expression (e.g. :label="'Apple'") has no reactive
+            // identifiers, so the identifier-driven update cycle never applies it.
+            // Render it once at mount instead.
+            if (this.#evaluator && this.#evaluator.dependentIdentifiers.length === 0) {
+                return () => {
+                    this.#render();
+                };
+            }
             return undefined;
         }
         /**
@@ -7924,501 +8104,449 @@
          * @inheritdoc
          */
         destroy() {
-            if (!this.#componentApp) {
-                // Not rendered, no action needed
+            // Do nothing. No special cleanup needed.
+        }
+        /**
+         * Renders the bound attribute by evaluating the expression and updating the DOM element.
+         */
+        #render() {
+            // Do nothing for special attributes
+            if (this.isKey || this.isOptions) {
                 return;
             }
-            // Get the component's root VNode
-            const componentVNode = this.#componentApp.rootVNode;
-            // Destroy component application first (calls @unmount hooks while DOM is still accessible)
-            this.#componentApp.unmount();
-            // Remove the component's root node from the DOM
-            if (componentVNode?.node.parentNode) {
-                componentVNode.node.parentNode.removeChild(componentVNode.node);
+            const element = this.#vNode.node;
+            const attributeName = this.#attributeName;
+            // If there's no evaluator or attribute name, do nothing
+            if (!this.#evaluator || !attributeName) {
+                return;
+            }
+            // Evaluate the expression to get the value
+            const value = this.#evaluator.evaluate();
+            // Handle different attribute types
+            if (attributeName === 'class') {
+                this.#updateClass(element, value);
+            }
+            else if (attributeName === 'style') {
+                this.#updateStyle(element, value);
+            }
+            else if (this.#isCustomElementProperty(element, attributeName, value)) {
+                // Custom elements: set objects/arrays (and declared props) as properties
+                // so complex values are not serialized to strings via setAttribute.
+                // HTML attributes are lowercased by the browser, so resolve to the
+                // actual camelCase property name declared on the custom element.
+                const propName = this.#resolveCustomElementPropertyName(element, attributeName);
+                element[propName] = value;
+            }
+            else if (this.#isDOMProperty(attributeName)) {
+                this.#updateProperty(element, attributeName, value);
+            }
+            else if (this.#isBooleanAttribute(attributeName)) {
+                this.#updateBooleanAttribute(element, attributeName, value);
+            }
+            else {
+                this.#updateAttribute(element, attributeName, value);
             }
-            this.#componentApp = undefined;
         }
         /**
-         * Renders the component.
+         * Updates the class attribute with support for string, array, and object formats.
          */
-        #render() {
-            if (this.#componentApp) {
-                // Already rendered, no action needed
-                return;
+        #updateClass(element, value) {
+            // Determine the new set of classes to apply
+            let newClasses = [];
+            if (typeof value === 'string') {
+                newClasses = value.split(/\s+/).filter(Boolean);
             }
-            // Clone the component's template and replace the original node
-            const clone = this.#cloneNode();
-            this.#vNode.anchorNode?.parentNode?.insertBefore(clone, this.#vNode.anchorNode.nextSibling);
-            // Get properties from :options or :options.component directive
-            let properties = {};
-            const optionsDirective = this.#vNode.directiveManager?.optionsDirective('component');
-            if (optionsDirective && optionsDirective.expression && this.#vNode.bindings) {
-                // Evaluate the options expression using ExpressionEvaluator
-                const evaluator = ExpressionEvaluator.create(optionsDirective.expression, this.#vNode.bindings, this.#vNode.vApplication.functionDependencies);
-                const result = evaluator.evaluate();
-                if (typeof result === 'object' && result !== null) {
-                    properties = result;
-                }
+            else if (Array.isArray(value)) {
+                // Flatten array elements that may contain strings or objects
+                newClasses = value
+                    .filter(Boolean)
+                    .flatMap(cls => {
+                    if (typeof cls === 'string') {
+                        return cls.split(/\s+/).filter(Boolean);
+                    }
+                    else if (typeof cls === 'object' && cls !== null) {
+                        // Handle object format within array: { className: condition }
+                        // Keys may contain space-separated class names
+                        return Object.keys(cls).filter(key => cls[key]).flatMap(key => key.split(/\s+/).filter(Boolean));
+                    }
+                    return [];
+                });
             }
-            // Get component definition from the application's component registry
-            const component = this.#vNode.vApplication.componentRegistry.get(this.#componentId);
-            if (!component) {
-                throw new Error(`Component '${this.#componentId}' not found in registry`);
+            else if (typeof value === 'object' && value !== null) {
+                // Keys may contain space-separated class names
+                newClasses = Object.keys(value).filter(key => value[key]).flatMap(key => key.split(/\s+/).filter(Boolean));
             }
-            // Create component instance
-            const instance = component.createInstance(properties);
-            // Create and mount child application using the parent application's registries
-            this.#componentApp = this.#vNode.vApplication.createChildApp(instance);
-            this.#componentApp.mount(clone);
+            // Remove previously managed classes
+            this.#managedClasses.forEach(cls => element.classList.remove(cls));
+            // Add newly managed classes
+            newClasses.forEach(cls => element.classList.add(cls));
+            // Update managed classes list
+            this.#managedClasses = new Set(newClasses);
         }
         /**
-         * Clones the component's template and returns the root element.
-         * @returns The cloned root HTMLElement of the component.
-         * @throws Error if the component or its template is not found.
+         * Updates the style attribute with support for object format.
          */
-        #cloneNode() {
-            // Get component definition from the application's component registry
-            const component = this.#vNode.vApplication.componentRegistry.get(this.#componentId);
-            if (!component) {
-                throw new Error(`Component '${this.#componentId}' not found in registry`);
-            }
-            // Get template element
-            const finalTemplateID = component.templateID || component.id;
-            const templateElement = document.querySelector(`#${finalTemplateID}`);
-            if (!templateElement || !(templateElement instanceof HTMLTemplateElement)) {
-                throw new Error(`Template element '#${finalTemplateID}' not found`);
+        #updateStyle(element, value) {
+            let newStyles = [];
+            if (typeof value === 'string') {
+                // Directly set the style string
+                element.style.cssText = value;
+                // Extract managed properties
+                newStyles = value.split(';').map(s => s.split(':')[0].trim()).filter(Boolean);
             }
-            // Clone template content
-            const fragment = templateElement.content.cloneNode(true);
-            const childNodes = Array.from(fragment.childNodes);
-            // Find the first element node
-            for (const node of childNodes) {
-                if (node.nodeType === Node.ELEMENT_NODE) {
-                    return node;
+            else if (typeof value === 'object' && value !== null) {
+                // Remove all previously managed properties
+                this.#managedStyles.forEach(prop => {
+                    element.style.removeProperty(this.#camelToKebab(prop));
+                });
+                // Add newly managed properties
+                for (const key in value) {
+                    if (Object.prototype.hasOwnProperty.call(value, key)) {
+                        const cssKey = this.#camelToKebab(key);
+                        const cssValue = value[key];
+                        if (cssValue != null) {
+                            element.style.setProperty(cssKey, String(cssValue));
+                            newStyles.push(key);
+                        }
+                    }
                 }
             }
-            throw new Error(`No element found in template '#${finalTemplateID}'`);
+            // Update managed properties list
+            this.#managedStyles = new Set(newStyles);
         }
-    }
-
-    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
-    /**
-     * Utility class for creating reactive proxies that automatically track changes.
-     */
-    class ReactiveProxy {
         /**
-         * A WeakMap to store the proxy for each target object and path combination.
-         * This prevents creating multiple proxies for the same object accessed from different paths.
+         * Converts camelCase to kebab-case for CSS properties.
          */
-        static proxyCache = new WeakMap();
+        #camelToKebab(str) {
+            return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+        }
         /**
-         * A WeakMap to track which objects are proxies, mapping proxy -> original target.
-         * This prevents double-wrapping of already proxied objects.
+         * 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 proxyToTarget = 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 WeakSet to track objects marked as "raw" (non-reactive).
-         * These objects will not be wrapped with Proxy.
+         * 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 rawObjects = new WeakSet();
+        #resolveCustomElementPropertyName(element, name) {
+            // Fast path: exact match already exists
+            if (name in element) {
+                return name;
+            }
+            return this.#findDeclaredProp(element, name) ?? name;
+        }
         /**
-         * A WeakMap to store the path for each proxy object.
-         * This allows retrieving the source path of an object for computed property mapping.
+         * 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 proxyPaths = new WeakMap();
+        #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;
+            });
+        }
         /**
-         * 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.
+         * Converts kebab-case to camelCase (e.g. `user-name` → `userName`).
          */
-        static dispatchers = new WeakMap();
+        #kebabToCamel(str) {
+            return str.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+        }
         /**
-         * 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.
+         * Checks if the attribute should be set as a DOM property.
          */
-        static pathAliases = new Map();
+        #isDOMProperty(name) {
+            const domProperties = ['value', 'checked', 'selected', 'innerHTML', 'textContent'];
+            return domProperties.includes(name);
+        }
         /**
-         * 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}.
+         * Checks if the attribute is a boolean attribute.
          */
-        static REACTIVE_TYPE_TAGS = new Set([
-            '[object Object]',
-            '[object Array]',
-            '[object Arguments]',
-            '[object Map]',
-            '[object Set]',
-        ]);
+        #isBooleanAttribute(name) {
+            const booleanAttributes = [
+                'disabled', 'readonly', 'required', 'checked', 'selected',
+                'multiple', 'autofocus', 'autoplay', 'controls', 'loop',
+                'muted', 'open', 'hidden'
+            ];
+            return booleanAttributes.includes(name);
+        }
         /**
-         * Whether the given non-null object value is one we deeply proxy.
-         * See {@link REACTIVE_TYPE_TAGS} for the reasoning.
+         * 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.
          */
-        static isReactivable(value) {
-            return this.REACTIVE_TYPE_TAGS.has(Object.prototype.toString.call(value));
+        #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;
+                }
+            }
         }
         /**
-         * 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.
+         * Updates 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;
+        #updateBooleanAttribute(element, name, value) {
+            if (value) {
+                element.setAttribute(name, '');
             }
-            // 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);
+            else {
+                element.removeAttribute(name);
             }
-            // 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;
+        }
+        /**
+         * 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.
+         */
+        #updateAttribute(element, name, value) {
+            if (value == null || value === false) {
+                if (element.hasAttribute(name)) {
+                    element.removeAttribute(name);
                 }
             }
             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;
+                const text = String(value);
+                if (element.getAttribute(name) !== text) {
+                    element.setAttribute(name, text);
                 }
-            });
-            // 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;
         }
+    }
+
+    // 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 {
         /**
-         * 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.
+         * The virtual node to which this directive is applied.
          */
-        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;
+        #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);
         }
         /**
-         * Invokes every listener attached to the dispatcher.
-         * Iterates a snapshot of the listener set so unsubscribing during dispatch is safe.
+         * @inheritdoc
          */
-        static dispatch(dispatcher, changedPath) {
-            if (dispatcher.listeners.size === 0) {
-                return;
-            }
-            const snapshot = Array.from(dispatcher.listeners);
-            for (const listener of snapshot) {
-                listener(changedPath);
-            }
+        get name() {
+            return StandardDirectiveName.V_COMPONENT;
         }
         /**
-         * 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.
+         * @inheritdoc
          */
-        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);
-                    }
+        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;
+        }
+        /**
+         * @inheritdoc
+         */
+        get templatize() {
+            return true;
         }
         /**
-         * 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 dependentIdentifiers() {
+            return [];
         }
         /**
-         * 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 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;
+        }
+        /**
+         * @inheritdoc
+         */
+        destroy() {
+            if (!this.#componentApp) {
+                // Not rendered, no action needed
+                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);
             }
+            this.#componentApp = 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
+         * Renders the component.
          */
-        static resolvePathAlias(aliasPath) {
-            // Direct match
-            if (this.pathAliases.has(aliasPath)) {
-                return this.pathAliases.get(aliasPath);
+        #render() {
+            if (this.#componentApp) {
+                // Already 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;
+            // 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 undefined;
+            // 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 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
+         * 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 doesChangeMatchIdentifier(changePath, identifier) {
-            // Direct match
-            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`);
             }
-            // Check if the identifier has an alias that matches
-            const resolvedIdentifier = this.resolvePathAlias(identifier);
-            if (resolvedIdentifier && changePath === resolvedIdentifier) {
-                return true;
+            // 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`);
             }
-            // Check if change path starts with the resolved identifier
-            // (handles cases like array item changes)
-            if (resolvedIdentifier) {
-                if (changePath.startsWith(resolvedIdentifier + '.') ||
-                    changePath.startsWith(resolvedIdentifier + '[')) {
-                    return true;
+            // 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 false;
+            throw new Error(`No element found in template '#${finalTemplateID}'`);
         }
     }
 
@@ -8449,6 +8577,13 @@
          * The set of changed identifiers.
          */
         #changes = new Set();
+        /**
+         * On the root bindings: every descendant scope (a v-for row, a component) that
+         * recorded a change since the last clearChanges(). The root clears their change
+         * sets together with its own at the end of the update cycle, so a loop variable
+         * set when a row was created does not count as changed in every later cycle.
+         */
+        #dirtyScopes;
         /**
          * Cache for array lengths to detect length changes when the same object reference is used.
          */
@@ -8591,7 +8726,7 @@
                                 for (const part of changedPath?.split('.') || []) {
                                     path = path ? `${path}.${part}` : part;
                                     this.#logger?.debug(`Binding changed: ${path}`);
-                                    this.#changes.add(path);
+                                    this.#addChange(path);
                                 }
                                 if (!this.#suppressOnChange) {
                                     this.#onChange?.(changedPath);
@@ -8631,7 +8766,7 @@
                             for (const part of changedPath.split('.')) {
                                 path = path ? `${path}.${part}` : part;
                                 this.#logger?.debug(`Binding changed (external): ${path}`);
-                                this.#changes.add(path);
+                                this.#addChange(path);
                             }
                             if (!this.#suppressOnChange) {
                                 this.#onChange?.(changedPath);
@@ -8658,7 +8793,7 @@
                             const newValuePreview = newValueString.length > 100 ? `${newValueString.substring(0, 100)}...` : newValueString;
                             this.#logger.debug(`Binding set on ${target === obj ? 'local' : 'parent'}: ${key}: ${oldValuePreview} -> ${newValuePreview}`);
                         }
-                        this.#changes.add(key);
+                        this.#addChange(key);
                         if (!this.#suppressOnChange) {
                             this.#onChange?.(key);
                         }
@@ -8673,7 +8808,7 @@
                         this.#externalSubscriptions.delete(key);
                     }
                     this.#logger?.debug(`Binding deleted: ${key}`);
-                    this.#changes.add(key);
+                    this.#addChange(key);
                     this.#onChange?.(key);
                     return result;
                 }
@@ -8714,6 +8849,27 @@
          */
         clearChanges() {
             this.#changes.clear();
+            if (this.#dirtyScopes) {
+                for (const scope of this.#dirtyScopes) {
+                    scope.#changes.clear();
+                }
+                this.#dirtyScopes.clear();
+            }
+        }
+        /**
+         * Records a changed identifier on this scope and, for a non-root scope, registers the
+         * scope with the root so that the change is cleared at the end of the update cycle.
+         */
+        #addChange(key) {
+            this.#changes.add(key);
+            if (!this.#parent) {
+                return;
+            }
+            let root = this;
+            while (root.#parent) {
+                root = root.#parent;
+            }
+            (root.#dirtyScopes ??= new Set()).add(this);
         }
         /**
          * Sets a binding value.
@@ -8889,7 +9045,7 @@
          * @param key The identifier to mark as changed.
          */
         markChanged(key) {
-            this.#changes.add(key);
+            this.#addChange(key);
         }
         /**
          * Resolves a local path alias for the given identifier by walking up the bindings chain.
@@ -8915,18 +9071,15 @@
          * global aliases (computed properties etc.).
          */
         doesChangeMatchIdentifier(changePath, identifier) {
-            // Direct match
-            if (changePath === identifier) {
+            // Direct match (an index "[*]" in the identifier matches any index)
+            if (ReactiveProxy.pathMatches(changePath, identifier)) {
                 return true;
             }
             // Resolve via local (scoped) alias chain
             const resolved = this.resolveAlias(identifier);
             if (resolved) {
-                if (changePath === resolved) {
-                    return true;
-                }
-                // changePath is a descendant of resolved (e.g. "files[0].isModified" for resolved "files[0]")
-                if (changePath.startsWith(resolved + '.') || changePath.startsWith(resolved + '[')) {
+                // changePath is resolved itself or a descendant of it (e.g. "files[0].isModified" for resolved "files[0]")
+                if (ReactiveProxy.pathMatches(changePath, resolved, true)) {
                     return true;
                 }
                 // changePath is an ancestor of resolved (e.g. "files" for resolved "files[0].isModified")
@@ -8939,6 +9092,54 @@
             // Fall back to global alias resolution (computed properties, etc.)
             return ReactiveProxy.doesChangeMatchIdentifier(changePath, identifier);
         }
+        /**
+         * Checks whether any of the changes affects an expression with the given identifiers.
+         *
+         * An identifier with a run-time index ("frames[*].url" for frames[i].url) normally
+         * matches a change at any index. When trackedPaths holds the paths the expression read
+         * during its last evaluation, the identifier is narrowed to the concrete paths among
+         * them ("frames[0].url"), so a write to another element is ignored. When no recorded
+         * path fits the identifier (not evaluated yet, a raw object, a short-circuited read),
+         * the identifier keeps matching every index.
+         *
+         * @param changes The change paths of the current update cycle.
+         * @param identifiers The identifiers the expression depends on.
+         * @param trackedPaths The paths read during the expression's last evaluation, if recorded.
+         * @returns True if some change matches some identifier.
+         */
+        isAffected(changes, identifiers, trackedPaths) {
+            if (changes.length === 0) {
+                return false;
+            }
+            for (const identifier of identifiers) {
+                const candidates = this.#concretePaths(identifier, trackedPaths) ?? [identifier];
+                for (const candidate of candidates) {
+                    if (changes.some(change => this.doesChangeMatchIdentifier(change, candidate))) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+        /**
+         * Returns the recorded paths that an identifier with a run-time index stood for during
+         * the last evaluation, or undefined when the identifier has no such index or nothing
+         * recorded fits it. The identifier is tried both as spelled and resolved through path
+         * aliases, since recorded paths are source paths.
+         */
+        #concretePaths(identifier, trackedPaths) {
+            if (!trackedPaths || trackedPaths.size === 0 || !identifier.includes('[*]')) {
+                return undefined;
+            }
+            const resolved = this.resolveAlias(identifier);
+            const paths = [];
+            for (const path of trackedPaths) {
+                if (ReactiveProxy.pathMatches(path, identifier) || (resolved !== undefined && ReactiveProxy.pathMatches(path, resolved))) {
+                    paths.push(path);
+                }
+            }
+            return paths.length > 0 ? paths : undefined;
+        }
     }
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
@@ -9133,10 +9334,14 @@
          */
         get domUpdater() {
             const identifiers = this.dependentIdentifiers;
+            const directive = this;
             const updater = {
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return directive.#collectTrackedPaths();
+                },
                 applyToDOM: () => {
                     this.#refresh();
                 }
@@ -9159,6 +9364,21 @@
             }
             return Array.from(ids);
         }
+        /**
+         * The paths the prop expressions read during their last evaluation, united across
+         * props, or undefined when no prop expression has a run-time index.
+         */
+        #collectTrackedPaths() {
+            let paths;
+            for (const prop of this.#props) {
+                const tracked = prop.evaluator?.trackedPaths;
+                if (tracked) {
+                    paths ??= new Set();
+                    tracked.forEach(path => paths.add(path));
+                }
+            }
+            return paths;
+        }
         /**
          * @inheritdoc
          *
@@ -9964,6 +10184,11 @@
          * The function used to evaluate the text with current bindings.
          */
         #evaluate;
+        /**
+         * The source paths read through reactive proxies during the last evaluation,
+         * recorded only when some expression has a run-time index ("items[i].name").
+         */
+        #trackedPaths;
         /**
          * Constructs a VTextEvaluator instance.
          * @param text The text containing embedded expressions in the form of {{...}}.
@@ -9991,7 +10216,7 @@
                 // Build base parameter names (no dots), preserving order of first appearance
                 const baseArgs = [];
                 for (const id of ids) {
-                    const base = id.split('.')[0];
+                    const base = ExpressionUtils.baseIdentifier(id);
                     if (!baseArgs.includes(base)) {
                         baseArgs.push(base);
                     }
@@ -10004,8 +10229,10 @@
                     func: new Function(args, funcBody)
                 };
             });
+            // Only an expression with an index known at run time needs its reads recorded
+            const hasDynamicIndex = this.#identifiers.some(id => id.includes('[*]'));
             // Create a function to reconstruct the text with evaluated expressions
-            this.#evaluate = (bindings) => {
+            const evaluateText = (bindings) => {
                 let result = text;
                 evaluators.forEach((evaluator, i) => {
                     // Build values for baseArgs (no dots) in the same order as function parameters
@@ -10023,6 +10250,15 @@
                 });
                 return result;
             };
+            this.#evaluate = hasDynamicIndex
+                ? (bindings) => {
+                    const paths = new Set();
+                    this.#trackedPaths = undefined;
+                    const result = ReactiveProxy.track(paths, () => evaluateText(bindings));
+                    this.#trackedPaths = paths;
+                    return result;
+                }
+                : evaluateText;
         }
         /**
          * Checks if the given text contains any expressions in the form of {{...}}.
@@ -10039,6 +10275,14 @@
         get identifiers() {
             return this.#identifiers;
         }
+        /**
+         * The source paths read through reactive proxies during the last evaluation.
+         * Recorded only when an expression has a run-time index ("items[i].name");
+         * undefined before the first evaluation and for texts without such an index.
+         */
+        get trackedPaths() {
+            return this.#trackedPaths;
+        }
         /**
          * Evaluates the text with the provided bindings and returns the resulting string.
          * @param bindings The bindings to use for evaluating the expressions.
@@ -10528,7 +10772,7 @@
             if (this.#nodeType === Node.TEXT_NODE && this.#textEvaluator) {
                 // If this is a text node with a text evaluator, update its content if needed
                 // Check if any of the identifiers are in the changed identifiers (considering path aliases)
-                const changed = this.#textEvaluator.identifiers.some(id => changes.some(change => this.bindings.doesChangeMatchIdentifier(change, id)));
+                const changed = this.bindings.isAffected(changes, this.#textEvaluator.identifiers, this.#textEvaluator.trackedPaths);
                 // If the text node has changed, update its content
                 if (changed) {
                     const text = this.#node;
@@ -10551,7 +10795,7 @@
                     }
                     // Prepare bindings for each preparer if relevant identifiers have changed
                     for (const preparer of this.#directiveManager.bindingsPreparers) {
-                        const changed = preparer.dependentIdentifiers.some(id => changes.some(change => this.bindings.doesChangeMatchIdentifier(change, id)));
+                        const changed = this.bindings.isAffected(changes, preparer.dependentIdentifiers, preparer.trackedPaths);
                         if (changed) {
                             preparer.prepareBindings();
                         }
@@ -10560,7 +10804,7 @@
                 // Apply DOM updaters from directives, if any
                 if (this.#directiveManager?.domUpdaters) {
                     for (const updater of this.#directiveManager.domUpdaters) {
-                        const changed = updater.dependentIdentifiers.some(id => changes.some(change => this.bindings.doesChangeMatchIdentifier(change, id)));
+                        const changed = this.bindings.isAffected(changes, updater.dependentIdentifiers, updater.trackedPaths);
                         if (changed) {
                             updater.applyToDOM();
                         }
@@ -10813,6 +11057,21 @@
         get allDependentIdentifiers() {
             return this.#allDependentIdentifiers;
         }
+        /**
+         * The paths the conditions of the chain read during their last evaluation, united
+         * across directives, or undefined when no condition has a run-time index.
+         */
+        get trackedPaths() {
+            let paths;
+            for (const directive of this.#directives) {
+                const tracked = directive.trackedPaths;
+                if (tracked) {
+                    paths ??= new Set();
+                    tracked.forEach(path => paths.add(path));
+                }
+            }
+            return paths;
+        }
         /**
          * Adds a directive (v-else-if or v-else) to the conditional context.
          * @param directive The directive to add.
@@ -11009,11 +11268,15 @@
          */
         get domUpdater() {
             const identifiers = this.#conditionalContext.allDependentIdentifiers;
+            const conditionalContext = this.#conditionalContext;
             // Create an updater that handles the conditional rendering
             const updater = {
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return conditionalContext.trackedPaths;
+                },
                 applyToDOM: () => {
                     this.#render();
                 }
@@ -11032,6 +11295,13 @@
         get dependentIdentifiers() {
             return this.#evaluator?.dependentIdentifiers ?? [];
         }
+        /**
+         * The paths the condition read during its last evaluation, when it has an index
+         * known only at run time (see ExpressionEvaluator.trackedPaths).
+         */
+        get trackedPaths() {
+            return this.#evaluator?.trackedPaths;
+        }
         /**
          * The context for managing related conditional directives (v-if, v-else-if, v-else).
          */
@@ -11398,11 +11668,15 @@
          */
         get domUpdater() {
             const identifiers = this.#sourceEvaluator?.dependentIdentifiers ?? [];
+            const sourceEvaluator = this.#sourceEvaluator;
             // Create and return the DOM updater
             const updater = {
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return sourceEvaluator?.trackedPaths;
+                },
                 applyToDOM: () => {
                     this.#render();
                 }
@@ -12122,6 +12396,9 @@
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return evaluator.trackedPaths;
+                },
                 applyToDOM: () => {
                     const element = vNode.node;
                     const htmlContent = evaluator.evaluate() ?? '';
@@ -12336,7 +12613,7 @@
                     const identifiers = optionsDirective.dependentIdentifiers;
                     const baseArgs = [];
                     for (const id of identifiers) {
-                        const base = id.split('.')[0];
+                        const base = ExpressionUtils.baseIdentifier(id);
                         if (!baseArgs.includes(base))
                             baseArgs.push(base);
                     }
@@ -12416,7 +12693,7 @@
                 // Note: inline expressions receive entries and $ctx as parameters
                 const baseArgs = [];
                 for (const id of identifiers) {
-                    const base = id.split('.')[0];
+                    const base = ExpressionUtils.baseIdentifier(id);
                     if (!baseArgs.includes(base))
                         baseArgs.push(base);
                 }
@@ -12548,6 +12825,9 @@
                 get dependentIdentifiers() {
                     return self.#collectDependentIdentifiers();
                 },
+                get trackedPaths() {
+                    return self.#evaluator?.trackedPaths;
+                },
                 applyToDOM: () => {
                     self.#render();
                 }
@@ -13554,7 +13834,7 @@
                     const identifiers = optionsDirective.dependentIdentifiers;
                     const baseArgs = [];
                     for (const id of identifiers) {
-                        const base = id.split('.')[0];
+                        const base = ExpressionUtils.baseIdentifier(id);
                         if (!baseArgs.includes(base))
                             baseArgs.push(base);
                     }
@@ -13642,7 +13922,7 @@
                 // Note: inline expressions receive entries, observer, options, and $ctx as parameters
                 const baseArgs = [];
                 for (const id of identifiers) {
-                    const base = id.split('.')[0];
+                    const base = ExpressionUtils.baseIdentifier(id);
                     if (!baseArgs.includes(base))
                         baseArgs.push(base);
                 }
@@ -13775,7 +14055,7 @@
                     const identifiers = optionsDirective.dependentIdentifiers;
                     const baseArgs = [];
                     for (const id of identifiers) {
-                        const base = id.split('.')[0];
+                        const base = ExpressionUtils.baseIdentifier(id);
                         if (!baseArgs.includes(base))
                             baseArgs.push(base);
                     }
@@ -13855,7 +14135,7 @@
                 // Note: inline expressions receive entries and $ctx as parameters
                 const baseArgs = [];
                 for (const id of identifiers) {
-                    const base = id.split('.')[0];
+                    const base = ExpressionUtils.baseIdentifier(id);
                     if (!baseArgs.includes(base))
                         baseArgs.push(base);
                 }
@@ -13946,6 +14226,9 @@
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return evaluator.trackedPaths;
+                },
                 applyToDOM() {
                     const shouldRender = evaluator.evaluateAsBoolean();
                     if (shouldRender) {
@@ -14113,6 +14396,9 @@
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return evaluator.trackedPaths;
+                },
                 applyToDOM() {
                     const element = vNode.node;
                     element.textContent = toDisplayString(evaluator.evaluate());
@@ -14275,6 +14561,9 @@
                 get dependentIdentifiers() {
                     return identifiers;
                 },
+                get trackedPaths() {
+                    return evaluator.trackedPaths;
+                },
                 applyToDOM: () => {
                     const value = evaluator.evaluateAsBoolean();
                     const previous = this.#previousValue;