zero-query 0.9.7 → 0.9.8

package/dist/zquery.js

@@ -1,5 +1,5 @@
 /**
- * zQuery (zeroQuery) v0.9.7
+ * zQuery (zeroQuery) v0.9.8
  * Lightweight Frontend Library
  * https://github.com/tonywied17/zero-query
  * (c) 2026 Anthony Wiedman - MIT License
@@ -353,2338 +353,2351 @@ function effect(fn) {
   };
 }
 
-// --- src/core.js -------------------------------------------------
+// --- src/diff.js -------------------------------------------------
 /**
- * zQuery Core — Selector engine & chainable DOM collection
- * 
- * Extends the quick-ref pattern (Id, Class, Classes, Children)
- * into a full jQuery-like chainable wrapper with modern APIs.
+ * zQuery Diff — Lightweight DOM morphing engine
+ *
+ * Patches an existing DOM tree to match new HTML without destroying nodes
+ * that haven't changed. Preserves focus, scroll positions, third-party
+ * widget state, video playback, and other live DOM state.
+ *
+ * Approach: walk old and new trees in parallel, reconcile node by node.
+ * Keyed elements (via `z-key`) get matched across position changes.
+ *
+ * Performance advantages over virtual DOM (React/Angular):
+ *   - No virtual tree allocation or diffing — works directly on real DOM
+ *   - Skips unchanged subtrees via fast isEqualNode() check
+ *   - z-skip attribute to opt out of diffing entire subtrees
+ *   - Reuses a single template element for HTML parsing (zero GC pressure)
+ *   - Keyed reconciliation uses LIS (Longest Increasing Subsequence) to
+ *     minimize DOM moves — same algorithm as Vue 3 / ivi
+ *   - Minimal attribute diffing with early bail-out
  */
 
-
 // ---------------------------------------------------------------------------
-// ZQueryCollection — wraps an array of elements with chainable methods
+// Reusable template element — avoids per-call allocation
 // ---------------------------------------------------------------------------
-class ZQueryCollection {
-  constructor(elements) {
-    this.elements = Array.isArray(elements) ? elements : (elements ? [elements] : []);
-    this.length = this.elements.length;
-    this.elements.forEach((el, i) => { this[i] = el; });
-  }
+let _tpl = null;
 
-  // --- Iteration -----------------------------------------------------------
+function _getTemplate() {
+  if (!_tpl) _tpl = document.createElement('template');
+  return _tpl;
+}
 
-  each(fn) {
-    this.elements.forEach((el, i) => fn.call(el, i, el));
-    return this;
-  }
+// ---------------------------------------------------------------------------
+// morph(existingRoot, newHTML) — patch existing DOM to match newHTML
+// ---------------------------------------------------------------------------
 
-  map(fn) {
-    return this.elements.map((el, i) => fn.call(el, i, el));
-  }
+/**
+ * Morph an existing DOM element's children to match new HTML.
+ * Only touches nodes that actually differ.
+ *
+ * @param {Element} rootEl — The live DOM container to patch
+ * @param {string} newHTML — The desired HTML string
+ */
+function morph(rootEl, newHTML) {
+  const start = typeof window !== 'undefined' && window.__zqMorphHook ? performance.now() : 0;
+  const tpl = _getTemplate();
+  tpl.innerHTML = newHTML;
+  const newRoot = tpl.content;
 
-  forEach(fn) {
-    this.elements.forEach((el, i) => fn(el, i, this.elements));
-    return this;
-  }
+  // Move children into a wrapper for consistent handling.
+  // We move (not clone) from the template — cheaper than cloning.
+  const tempDiv = document.createElement('div');
+  while (newRoot.firstChild) tempDiv.appendChild(newRoot.firstChild);
 
-  first() { return this.elements[0] || null; }
-  last()  { return this.elements[this.length - 1] || null; }
-  eq(i)   { return new ZQueryCollection(this.elements[i] ? [this.elements[i]] : []); }
-  toArray(){ return [...this.elements]; }
+  _morphChildren(rootEl, tempDiv);
 
-  [Symbol.iterator]() { return this.elements[Symbol.iterator](); }
+  if (start) window.__zqMorphHook(rootEl, performance.now() - start);
+}
 
-  // --- Traversal -----------------------------------------------------------
+/**
+ * Morph a single element in place — diffs attributes and children
+ * without replacing the node reference. Useful for replaceWith-style
+ * updates where you want to keep the element identity when the tag
+ * name matches.
+ *
+ * If the new HTML produces a different tag, falls back to native replace.
+ *
+ * @param {Element} oldEl — The live DOM element to patch
+ * @param {string} newHTML — HTML string for the replacement element
+ * @returns {Element} — The resulting element (same ref if morphed, new if replaced)
+ */
+function morphElement(oldEl, newHTML) {
+  const start = typeof window !== 'undefined' && window.__zqMorphHook ? performance.now() : 0;
+  const tpl = _getTemplate();
+  tpl.innerHTML = newHTML;
+  const newEl = tpl.content.firstElementChild;
+  if (!newEl) return oldEl;
 
-  find(selector) {
-    const found = [];
-    this.elements.forEach(el => found.push(...el.querySelectorAll(selector)));
-    return new ZQueryCollection(found);
+  // Same tag — morph in place (preserves identity, event listeners, refs)
+  if (oldEl.nodeName === newEl.nodeName) {
+    _morphAttributes(oldEl, newEl);
+    _morphChildren(oldEl, newEl);
+    if (start) window.__zqMorphHook(oldEl, performance.now() - start);
+    return oldEl;
   }
 
-  parent() {
-    const parents = [...new Set(this.elements.map(el => el.parentElement).filter(Boolean))];
-    return new ZQueryCollection(parents);
-  }
+  // Different tag — must replace (can't morph <div> into <span>)
+  const clone = newEl.cloneNode(true);
+  oldEl.parentNode.replaceChild(clone, oldEl);
+  if (start) window.__zqMorphHook(clone, performance.now() - start);
+  return clone;
+}
 
-  closest(selector) {
-    return new ZQueryCollection(
-      this.elements.map(el => el.closest(selector)).filter(Boolean)
-    );
-  }
+// Aliases for the concat build — core.js imports these as _morph / _morphElement,
+// but the build strips `import … as` lines, so the aliases must exist at runtime.
+const _morph = morph;
+const _morphElement = morphElement;
 
-  children(selector) {
-    const kids = [];
-    this.elements.forEach(el => {
-      kids.push(...(selector
-        ? el.querySelectorAll(`:scope > ${selector}`)
-        : el.children));
-    });
-    return new ZQueryCollection([...kids]);
-  }
+/**
+ * Reconcile children of `oldParent` to match `newParent`.
+ *
+ * @param {Element} oldParent — live DOM parent
+ * @param {Element} newParent — desired state parent
+ */
+function _morphChildren(oldParent, newParent) {
+  // Snapshot live NodeLists into arrays — childNodes is live and
+  // mutates during insertBefore/removeChild. Using a for loop to push
+  // avoids spread operator overhead for large child lists.
+  const oldCN = oldParent.childNodes;
+  const newCN = newParent.childNodes;
+  const oldLen = oldCN.length;
+  const newLen = newCN.length;
+  const oldChildren = new Array(oldLen);
+  const newChildren = new Array(newLen);
+  for (let i = 0; i < oldLen; i++) oldChildren[i] = oldCN[i];
+  for (let i = 0; i < newLen; i++) newChildren[i] = newCN[i];
 
-  siblings(selector) {
-    const sibs = [];
-    this.elements.forEach(el => {
-      if (!el.parentElement) return;
-      const all = [...el.parentElement.children].filter(c => c !== el);
-      sibs.push(...(selector ? all.filter(c => c.matches(selector)) : all));
-    });
-    return new ZQueryCollection(sibs);
-  }
+  // Scan for keyed elements — only build maps if keys exist
+  let hasKeys = false;
+  let oldKeyMap, newKeyMap;
 
-  next(selector)  {
-    const els = this.elements.map(el => el.nextElementSibling).filter(Boolean);
-    return new ZQueryCollection(selector ? els.filter(el => el.matches(selector)) : els);
+  for (let i = 0; i < oldLen; i++) {
+    if (_getKey(oldChildren[i]) != null) { hasKeys = true; break; }
   }
-
-  prev(selector)  {
-    const els = this.elements.map(el => el.previousElementSibling).filter(Boolean);
-    return new ZQueryCollection(selector ? els.filter(el => el.matches(selector)) : els);
+  if (!hasKeys) {
+    for (let i = 0; i < newLen; i++) {
+      if (_getKey(newChildren[i]) != null) { hasKeys = true; break; }
+    }
   }
 
-  nextAll(selector) {
-    const result = [];
-    this.elements.forEach(el => {
-      let sib = el.nextElementSibling;
-      while (sib) {
-        if (!selector || sib.matches(selector)) result.push(sib);
-        sib = sib.nextElementSibling;
-      }
-    });
-    return new ZQueryCollection(result);
+  if (hasKeys) {
+    oldKeyMap = new Map();
+    newKeyMap = new Map();
+    for (let i = 0; i < oldLen; i++) {
+      const key = _getKey(oldChildren[i]);
+      if (key != null) oldKeyMap.set(key, i);
+    }
+    for (let i = 0; i < newLen; i++) {
+      const key = _getKey(newChildren[i]);
+      if (key != null) newKeyMap.set(key, i);
+    }
+    _morphChildrenKeyed(oldParent, oldChildren, newChildren, oldKeyMap, newKeyMap);
+  } else {
+    _morphChildrenUnkeyed(oldParent, oldChildren, newChildren);
   }
+}
 
-  nextUntil(selector, filter) {
-    const result = [];
-    this.elements.forEach(el => {
-      let sib = el.nextElementSibling;
-      while (sib) {
-        if (selector && sib.matches(selector)) break;
-        if (!filter || sib.matches(filter)) result.push(sib);
-        sib = sib.nextElementSibling;
-      }
-    });
-    return new ZQueryCollection(result);
+/**
+ * Unkeyed reconciliation — positional matching.
+ */
+function _morphChildrenUnkeyed(oldParent, oldChildren, newChildren) {
+  const oldLen = oldChildren.length;
+  const newLen = newChildren.length;
+  const minLen = oldLen < newLen ? oldLen : newLen;
+
+  // Morph overlapping range
+  for (let i = 0; i < minLen; i++) {
+    _morphNode(oldParent, oldChildren[i], newChildren[i]);
   }
 
-  prevAll(selector) {
-    const result = [];
-    this.elements.forEach(el => {
-      let sib = el.previousElementSibling;
-      while (sib) {
-        if (!selector || sib.matches(selector)) result.push(sib);
-        sib = sib.previousElementSibling;
-      }
-    });
-    return new ZQueryCollection(result);
+  // Append new nodes
+  if (newLen > oldLen) {
+    for (let i = oldLen; i < newLen; i++) {
+      oldParent.appendChild(newChildren[i].cloneNode(true));
+    }
   }
 
-  prevUntil(selector, filter) {
-    const result = [];
-    this.elements.forEach(el => {
-      let sib = el.previousElementSibling;
-      while (sib) {
-        if (selector && sib.matches(selector)) break;
-        if (!filter || sib.matches(filter)) result.push(sib);
-        sib = sib.previousElementSibling;
-      }
-    });
-    return new ZQueryCollection(result);
+  // Remove excess old nodes (iterate backwards to avoid index shifting)
+  if (oldLen > newLen) {
+    for (let i = oldLen - 1; i >= newLen; i--) {
+      oldParent.removeChild(oldChildren[i]);
+    }
   }
+}
 
-  parents(selector) {
-    const result = [];
-    this.elements.forEach(el => {
-      let parent = el.parentElement;
-      while (parent) {
-        if (!selector || parent.matches(selector)) result.push(parent);
-        parent = parent.parentElement;
-      }
-    });
-    return new ZQueryCollection([...new Set(result)]);
-  }
-
-  parentsUntil(selector, filter) {
-    const result = [];
-    this.elements.forEach(el => {
-      let parent = el.parentElement;
-      while (parent) {
-        if (selector && parent.matches(selector)) break;
-        if (!filter || parent.matches(filter)) result.push(parent);
-        parent = parent.parentElement;
-      }
-    });
-    return new ZQueryCollection([...new Set(result)]);
-  }
-
-  contents() {
-    const result = [];
-    this.elements.forEach(el => result.push(...el.childNodes));
-    return new ZQueryCollection(result);
-  }
+/**
+ * Keyed reconciliation — match by z-key, reorder with minimal moves
+ * using Longest Increasing Subsequence (LIS) to find the maximum set
+ * of nodes that are already in the correct relative order, then only
+ * move the remaining nodes.
+ */
+function _morphChildrenKeyed(oldParent, oldChildren, newChildren, oldKeyMap, newKeyMap) {
+  const consumed = new Set();
+  const newLen = newChildren.length;
+  const matched = new Array(newLen);
 
-  filter(selector) {
-    if (typeof selector === 'function') {
-      return new ZQueryCollection(this.elements.filter(selector));
+  // Step 1: Match new children to old children by key
+  for (let i = 0; i < newLen; i++) {
+    const key = _getKey(newChildren[i]);
+    if (key != null && oldKeyMap.has(key)) {
+      const oldIdx = oldKeyMap.get(key);
+      matched[i] = oldChildren[oldIdx];
+      consumed.add(oldIdx);
+    } else {
+      matched[i] = null;
     }
-    return new ZQueryCollection(this.elements.filter(el => el.matches(selector)));
   }
 
-  not(selector) {
-    if (typeof selector === 'function') {
-      return new ZQueryCollection(this.elements.filter((el, i) => !selector.call(el, i, el)));
+  // Step 2: Remove old keyed nodes not in the new tree
+  for (let i = oldChildren.length - 1; i >= 0; i--) {
+    if (!consumed.has(i)) {
+      const key = _getKey(oldChildren[i]);
+      if (key != null && !newKeyMap.has(key)) {
+        oldParent.removeChild(oldChildren[i]);
+      }
     }
-    return new ZQueryCollection(this.elements.filter(el => !el.matches(selector)));
-  }
-
-  has(selector) {
-    return new ZQueryCollection(this.elements.filter(el => el.querySelector(selector)));
   }
 
-  is(selector) {
-    if (typeof selector === 'function') {
-      return this.elements.some((el, i) => selector.call(el, i, el));
+  // Step 3: Build index array for LIS of matched old indices.
+  // This finds the largest set of keyed nodes already in order,
+  // so we only need to move the rest — O(n log n) instead of O(n²).
+  const oldIndices = [];      // Maps new-position → old-position (or -1)
+  for (let i = 0; i < newLen; i++) {
+    if (matched[i]) {
+      const key = _getKey(newChildren[i]);
+      oldIndices.push(oldKeyMap.get(key));
+    } else {
+      oldIndices.push(-1);
     }
-    return this.elements.some(el => el.matches(selector));
   }
 
-  slice(start, end) {
-    return new ZQueryCollection(this.elements.slice(start, end));
-  }
+  const lisSet = _lis(oldIndices);
 
-  add(selector, context) {
-    const toAdd = (selector instanceof ZQueryCollection)
-      ? selector.elements
-      : (selector instanceof Node)
-        ? [selector]
-        : Array.from((context || document).querySelectorAll(selector));
-    return new ZQueryCollection([...this.elements, ...toAdd]);
+  // Step 4: Insert / reorder / morph — walk new children forward,
+  // using LIS to decide which nodes stay in place.
+  let cursor = oldParent.firstChild;
+  const unkeyedOld = [];
+  for (let i = 0; i < oldChildren.length; i++) {
+    if (!consumed.has(i) && _getKey(oldChildren[i]) == null) {
+      unkeyedOld.push(oldChildren[i]);
+    }
   }
+  let unkeyedIdx = 0;
 
-  get(index) {
-    if (index === undefined) return [...this.elements];
-    return index < 0 ? this.elements[this.length + index] : this.elements[index];
-  }
+  for (let i = 0; i < newLen; i++) {
+    const newNode = newChildren[i];
+    const newKey = _getKey(newNode);
+    let oldNode = matched[i];
 
-  index(selector) {
-    if (selector === undefined) {
-      const el = this.first();
-      if (!el || !el.parentElement) return -1;
-      return Array.from(el.parentElement.children).indexOf(el);
+    if (!oldNode && newKey == null) {
+      oldNode = unkeyedOld[unkeyedIdx++] || null;
     }
-    const target = (typeof selector === 'string')
-      ? document.querySelector(selector)
-      : selector;
-    return this.elements.indexOf(target);
-  }
-
-  // --- Classes -------------------------------------------------------------
 
-  addClass(...names) {
-    // Fast path: single class, no spaces — avoids flatMap + regex split allocation
-    if (names.length === 1 && names[0].indexOf(' ') === -1) {
-      const c = names[0];
-      for (let i = 0; i < this.elements.length; i++) this.elements[i].classList.add(c);
-      return this;
+    if (oldNode) {
+      // If this node is NOT part of the LIS, it needs to be moved
+      if (!lisSet.has(i)) {
+        oldParent.insertBefore(oldNode, cursor);
+      }
+      // Capture next sibling BEFORE _morphNode — if _morphNode calls
+      // replaceChild, oldNode is removed and nextSibling becomes stale.
+      const nextSib = oldNode.nextSibling;
+      _morphNode(oldParent, oldNode, newNode);
+      cursor = nextSib;
+    } else {
+      // Insert new node
+      const clone = newNode.cloneNode(true);
+      if (cursor) {
+        oldParent.insertBefore(clone, cursor);
+      } else {
+        oldParent.appendChild(clone);
+      }
     }
-    const classes = names.flatMap(n => n.split(/\s+/));
-    for (let i = 0; i < this.elements.length; i++) this.elements[i].classList.add(...classes);
-    return this;
   }
 
-  removeClass(...names) {
-    if (names.length === 1 && names[0].indexOf(' ') === -1) {
-      const c = names[0];
-      for (let i = 0; i < this.elements.length; i++) this.elements[i].classList.remove(c);
-      return this;
+  // Remove remaining unkeyed old nodes
+  while (unkeyedIdx < unkeyedOld.length) {
+    const leftover = unkeyedOld[unkeyedIdx++];
+    if (leftover.parentNode === oldParent) {
+      oldParent.removeChild(leftover);
     }
-    const classes = names.flatMap(n => n.split(/\s+/));
-    for (let i = 0; i < this.elements.length; i++) this.elements[i].classList.remove(...classes);
-    return this;
   }
 
-  toggleClass(...args) {
-    const force = typeof args[args.length - 1] === 'boolean' ? args.pop() : undefined;
-    // Fast path: single class, no spaces
-    if (args.length === 1 && args[0].indexOf(' ') === -1) {
-      const c = args[0];
-      for (let i = 0; i < this.elements.length; i++) {
-        force !== undefined ? this.elements[i].classList.toggle(c, force) : this.elements[i].classList.toggle(c);
-      }
-      return this;
-    }
-    const classes = args.flatMap(n => n.split(/\s+/));
-    for (let i = 0; i < this.elements.length; i++) {
-      const el = this.elements[i];
-      for (let j = 0; j < classes.length; j++) {
-        force !== undefined ? el.classList.toggle(classes[j], force) : el.classList.toggle(classes[j]);
+  // Remove any remaining keyed old nodes that weren't consumed
+  for (let i = 0; i < oldChildren.length; i++) {
+    if (!consumed.has(i)) {
+      const node = oldChildren[i];
+      if (node.parentNode === oldParent && _getKey(node) != null && !newKeyMap.has(_getKey(node))) {
+        oldParent.removeChild(node);
       }
     }
-    return this;
   }
+}
 
-  hasClass(name) {
-    return this.first()?.classList.contains(name) || false;
-  }
+/**
+ * Compute the Longest Increasing Subsequence of an index array.
+ * Returns a Set of positions (in the input) that form the LIS.
+ * Entries with value -1 (unmatched) are excluded.
+ *
+ * O(n log n) — same algorithm used by Vue 3 and ivi.
+ *
+ * @param {number[]} arr — array of old-tree indices (-1 = unmatched)
+ * @returns {Set<number>} — positions in arr belonging to the LIS
+ */
+function _lis(arr) {
+  const len = arr.length;
+  const result = new Set();
+  if (len === 0) return result;
 
-  // --- Attributes ----------------------------------------------------------
+  // tails[i] = index in arr of the smallest tail element for LIS of length i+1
+  const tails = [];
+  // prev[i] = predecessor index in arr for the LIS ending at arr[i]
+  const prev = new Array(len).fill(-1);
+  const tailIndices = []; // parallel to tails: actual positions
 
-  attr(name, value) {
-    if (typeof name === 'object' && name !== null) {
-      return this.each((_, el) => {
-        for (const [k, v] of Object.entries(name)) el.setAttribute(k, v);
-      });
-    }
-    if (value === undefined) return this.first()?.getAttribute(name);
-    return this.each((_, el) => el.setAttribute(name, value));
-  }
+  for (let i = 0; i < len; i++) {
+    if (arr[i] === -1) continue;
+    const val = arr[i];
 
-  removeAttr(name) {
-    return this.each((_, el) => el.removeAttribute(name));
-  }
+    // Binary search for insertion point in tails
+    let lo = 0, hi = tails.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (tails[mid] < val) lo = mid + 1;
+      else hi = mid;
+    }
 
-  prop(name, value) {
-    if (value === undefined) return this.first()?.[name];
-    return this.each((_, el) => { el[name] = value; });
+    tails[lo] = val;
+    tailIndices[lo] = i;
+    prev[i] = lo > 0 ? tailIndices[lo - 1] : -1;
   }
 
-  data(key, value) {
-    if (value === undefined) {
-      if (key === undefined) return this.first()?.dataset;
-      const raw = this.first()?.dataset[key];
-      try { return JSON.parse(raw); } catch { return raw; }
-    }
-    return this.each((_, el) => { el.dataset[key] = typeof value === 'object' ? JSON.stringify(value) : value; });
+  // Reconstruct: walk backwards from the last element of LIS
+  let k = tailIndices[tails.length - 1];
+  for (let i = tails.length - 1; i >= 0; i--) {
+    result.add(k);
+    k = prev[k];
   }
 
-  // --- CSS / Dimensions ----------------------------------------------------
+  return result;
+}
 
-  css(props, value) {
-    if (typeof props === 'string' && value !== undefined) {
-      return this.each((_, el) => { el.style[props] = value; });
-    }
-    if (typeof props === 'string') {
-      const el = this.first();
-      return el ? getComputedStyle(el)[props] : undefined;
-    }
-    return this.each((_, el) => Object.assign(el.style, props));
+/**
+ * Morph a single node in place.
+ */
+function _morphNode(parent, oldNode, newNode) {
+  // Text / comment nodes — just update content
+  if (oldNode.nodeType === 3 || oldNode.nodeType === 8) {
+    if (newNode.nodeType === oldNode.nodeType) {
+      if (oldNode.nodeValue !== newNode.nodeValue) {
+        oldNode.nodeValue = newNode.nodeValue;
+      }
+      return;
+    }
+    // Different node types — replace
+    parent.replaceChild(newNode.cloneNode(true), oldNode);
+    return;
   }
 
-  width()  { return this.first()?.getBoundingClientRect().width; }
-  height() { return this.first()?.getBoundingClientRect().height; }
-
-  offset() {
-    const r = this.first()?.getBoundingClientRect();
-    return r ? { top: r.top + window.scrollY, left: r.left + window.scrollX, width: r.width, height: r.height } : null;
+  // Different node types or tag names — replace entirely
+  if (oldNode.nodeType !== newNode.nodeType ||
+      oldNode.nodeName !== newNode.nodeName) {
+    parent.replaceChild(newNode.cloneNode(true), oldNode);
+    return;
   }
 
-  position() {
-    const el = this.first();
-    return el ? { top: el.offsetTop, left: el.offsetLeft } : null;
-  }
+  // Both are elements — diff attributes then recurse children
+  if (oldNode.nodeType === 1) {
+    // z-skip: developer opt-out — skip diffing this subtree entirely.
+    // Useful for third-party widgets, canvas, video, or large static content.
+    if (oldNode.hasAttribute('z-skip')) return;
 
-  scrollTop(value) {
-    if (value === undefined) {
-      const el = this.first();
-      return el === window ? window.scrollY : el?.scrollTop;
-    }
-    return this.each((_, el) => {
-      if (el === window) window.scrollTo(window.scrollX, value);
-      else el.scrollTop = value;
-    });
-  }
+    // Fast bail-out: if the elements are identical, skip everything.
+    // isEqualNode() is a native C++ comparison — much faster than walking
+    // attributes + children in JS when trees haven't changed.
+    if (oldNode.isEqualNode(newNode)) return;
 
-  scrollLeft(value) {
-    if (value === undefined) {
-      const el = this.first();
-      return el === window ? window.scrollX : el?.scrollLeft;
+    _morphAttributes(oldNode, newNode);
+
+    // Special elements: don't recurse into their children
+    const tag = oldNode.nodeName;
+    if (tag === 'INPUT') {
+      _syncInputValue(oldNode, newNode);
+      return;
+    }
+    if (tag === 'TEXTAREA') {
+      if (oldNode.value !== newNode.textContent) {
+        oldNode.value = newNode.textContent || '';
+      }
+      return;
+    }
+    if (tag === 'SELECT') {
+      _morphChildren(oldNode, newNode);
+      if (oldNode.value !== newNode.value) {
+        oldNode.value = newNode.value;
+      }
+      return;
     }
-    return this.each((_, el) => {
-      if (el === window) window.scrollTo(value, window.scrollY);
-      else el.scrollLeft = value;
-    });
-  }
 
-  innerWidth() {
-    const el = this.first();
-    return el?.clientWidth;
+    // Generic element — recurse children
+    _morphChildren(oldNode, newNode);
   }
+}
 
-  innerHeight() {
-    const el = this.first();
-    return el?.clientHeight;
+/**
+ * Sync attributes from newEl onto oldEl.
+ * Uses a single pass: build a set of new attribute names, iterate
+ * old attrs for removals, then apply new attrs.
+ */
+function _morphAttributes(oldEl, newEl) {
+  const newAttrs = newEl.attributes;
+  const oldAttrs = oldEl.attributes;
+  const newLen = newAttrs.length;
+  const oldLen = oldAttrs.length;
+
+  // Fast path: if both have same number of attributes, check if they're identical
+  if (newLen === oldLen) {
+    let same = true;
+    for (let i = 0; i < newLen; i++) {
+      const na = newAttrs[i];
+      if (oldEl.getAttribute(na.name) !== na.value) { same = false; break; }
+    }
+    if (same) {
+      // Also verify no extra old attrs (names mismatch)
+      for (let i = 0; i < oldLen; i++) {
+        if (!newEl.hasAttribute(oldAttrs[i].name)) { same = false; break; }
+      }
+    }
+    if (same) return;
   }
 
-  outerWidth(includeMargin = false) {
-    const el = this.first();
-    if (!el) return undefined;
-    let w = el.offsetWidth;
-    if (includeMargin) {
-      const style = getComputedStyle(el);
-      w += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+  // Build set of new attr names for O(1) lookup during removal pass
+  const newNames = new Set();
+  for (let i = 0; i < newLen; i++) {
+    const attr = newAttrs[i];
+    newNames.add(attr.name);
+    if (oldEl.getAttribute(attr.name) !== attr.value) {
+      oldEl.setAttribute(attr.name, attr.value);
     }
-    return w;
   }
 
-  outerHeight(includeMargin = false) {
-    const el = this.first();
-    if (!el) return undefined;
-    let h = el.offsetHeight;
-    if (includeMargin) {
-      const style = getComputedStyle(el);
-      h += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+  // Remove stale attributes — snapshot names first because oldAttrs
+  // is a live NamedNodeMap that mutates on removeAttribute().
+  const oldNames = new Array(oldLen);
+  for (let i = 0; i < oldLen; i++) oldNames[i] = oldAttrs[i].name;
+  for (let i = oldNames.length - 1; i >= 0; i--) {
+    if (!newNames.has(oldNames[i])) {
+      oldEl.removeAttribute(oldNames[i]);
     }
-    return h;
   }
+}
 
-  // --- Content -------------------------------------------------------------
+/**
+ * Sync input element value, checked, disabled states.
+ *
+ * Only updates the value when the new HTML explicitly carries a `value`
+ * attribute.  Templates that use z-model manage values through reactive
+ * state + _bindModels — the morph engine should not interfere by wiping
+ * a live input's content to '' just because the template has no `value`
+ * attr.  This prevents the wipe-then-restore cycle that resets cursor
+ * position on every keystroke.
+ */
+function _syncInputValue(oldEl, newEl) {
+  const type = (oldEl.type || '').toLowerCase();
 
-  html(content) {
-    if (content === undefined) return this.first()?.innerHTML;
-    // Auto-morph: if the element already has children, use the diff engine
-    // to patch the DOM (preserves focus, scroll, state, keyed reorder via LIS).
-    // Empty elements get raw innerHTML for fast first-paint — same strategy
-    // the component system uses (first render = innerHTML, updates = morph).
-    return this.each((_, el) => {
-      if (el.childNodes.length > 0) {
-        _morph(el, content);
-      } else {
-        el.innerHTML = content;
-      }
-    });
+  if (type === 'checkbox' || type === 'radio') {
+    if (oldEl.checked !== newEl.checked) oldEl.checked = newEl.checked;
+  } else {
+    const newVal = newEl.getAttribute('value');
+    if (newVal !== null && oldEl.value !== newVal) {
+      oldEl.value = newVal;
+    }
   }
 
-  morph(content) {
-    return this.each((_, el) => { _morph(el, content); });
-  }
+  // Sync disabled
+  if (oldEl.disabled !== newEl.disabled) oldEl.disabled = newEl.disabled;
+}
 
-  text(content) {
-    if (content === undefined) return this.first()?.textContent;
-    return this.each((_, el) => { el.textContent = content; });
-  }
+/**
+ * Get the reconciliation key from a node.
+ *
+ * Priority: z-key attribute → id attribute → data-id / data-key.
+ * Auto-detected keys use a `\0` prefix to avoid collisions with
+ * explicit z-key values.
+ *
+ * This means the LIS-optimised keyed path activates automatically
+ * whenever elements carry `id` or `data-id` / `data-key` attributes
+ * — no extra markup required.
+ *
+ * @returns {string|null}
+ */
+function _getKey(node) {
+  if (node.nodeType !== 1) return null;
 
-  val(value) {
-    if (value === undefined) return this.first()?.value;
-    return this.each((_, el) => { el.value = value; });
-  }
+  // Explicit z-key — highest priority
+  const zk = node.getAttribute('z-key');
+  if (zk) return zk;
 
-  // --- DOM Manipulation ----------------------------------------------------
+  // Auto-key: id attribute (unique by spec)
+  if (node.id) return '\0id:' + node.id;
 
-  append(content) {
-    return this.each((_, el) => {
-      if (typeof content === 'string') el.insertAdjacentHTML('beforeend', content);
-      else if (content instanceof ZQueryCollection) content.each((__, c) => el.appendChild(c));
-      else if (content instanceof Node) el.appendChild(content);
-    });
+  // Auto-key: data-id or data-key attributes
+  const ds = node.dataset;
+  if (ds) {
+    if (ds.id)  return '\0data-id:'  + ds.id;
+    if (ds.key) return '\0data-key:' + ds.key;
   }
 
-  prepend(content) {
-    return this.each((_, el) => {
-      if (typeof content === 'string') el.insertAdjacentHTML('afterbegin', content);
-      else if (content instanceof Node) el.insertBefore(content, el.firstChild);
-    });
+  return null;
+}
+
+// --- src/core.js -------------------------------------------------
+/**
+ * zQuery Core — Selector engine & chainable DOM collection
+ * 
+ * Extends the quick-ref pattern (Id, Class, Classes, Children)
+ * into a full jQuery-like chainable wrapper with modern APIs.
+ */
+
+
+// ---------------------------------------------------------------------------
+// ZQueryCollection — wraps an array of elements with chainable methods
+// ---------------------------------------------------------------------------
+class ZQueryCollection {
+  constructor(elements) {
+    this.elements = Array.isArray(elements) ? elements : (elements ? [elements] : []);
+    this.length = this.elements.length;
+    this.elements.forEach((el, i) => { this[i] = el; });
   }
 
-  after(content) {
-    return this.each((_, el) => {
-      if (typeof content === 'string') el.insertAdjacentHTML('afterend', content);
-      else if (content instanceof Node) el.parentNode.insertBefore(content, el.nextSibling);
-    });
+  // --- Iteration -----------------------------------------------------------
+
+  each(fn) {
+    this.elements.forEach((el, i) => fn.call(el, i, el));
+    return this;
   }
 
-  before(content) {
-    return this.each((_, el) => {
-      if (typeof content === 'string') el.insertAdjacentHTML('beforebegin', content);
-      else if (content instanceof Node) el.parentNode.insertBefore(content, el);
-    });
+  map(fn) {
+    return this.elements.map((el, i) => fn.call(el, i, el));
   }
 
-  wrap(wrapper) {
-    return this.each((_, el) => {
-      const w = typeof wrapper === 'string' ? createFragment(wrapper).firstElementChild : wrapper.cloneNode(true);
-      if (!w || !el.parentNode) return;
-      el.parentNode.insertBefore(w, el);
-      w.appendChild(el);
-    });
+  forEach(fn) {
+    this.elements.forEach((el, i) => fn(el, i, this.elements));
+    return this;
   }
 
-  remove() {
-    return this.each((_, el) => el.remove());
+  first() { return this.elements[0] || null; }
+  last()  { return this.elements[this.length - 1] || null; }
+  eq(i)   { return new ZQueryCollection(this.elements[i] ? [this.elements[i]] : []); }
+  toArray(){ return [...this.elements]; }
+
+  [Symbol.iterator]() { return this.elements[Symbol.iterator](); }
+
+  // --- Traversal -----------------------------------------------------------
+
+  find(selector) {
+    const found = [];
+    this.elements.forEach(el => found.push(...el.querySelectorAll(selector)));
+    return new ZQueryCollection(found);
   }
 
-  empty() {
-    // textContent = '' clears all children without invoking the HTML parser
-    return this.each((_, el) => { el.textContent = ''; });
+  parent() {
+    const parents = [...new Set(this.elements.map(el => el.parentElement).filter(Boolean))];
+    return new ZQueryCollection(parents);
   }
 
-  clone(deep = true) {
-    return new ZQueryCollection(this.elements.map(el => el.cloneNode(deep)));
+  closest(selector) {
+    return new ZQueryCollection(
+      this.elements.map(el => el.closest(selector)).filter(Boolean)
+    );
   }
 
-  replaceWith(content) {
-    return this.each((_, el) => {
-      if (typeof content === 'string') {
-        // Auto-morph: diff attributes + children when the tag name matches
-        // instead of destroying and re-creating the element.
-        _morphElement(el, content);
-      } else if (content instanceof Node) {
-        el.parentNode.replaceChild(content, el);
-      }
+  children(selector) {
+    const kids = [];
+    this.elements.forEach(el => {
+      kids.push(...(selector
+        ? el.querySelectorAll(`:scope > ${selector}`)
+        : el.children));
     });
+    return new ZQueryCollection([...kids]);
   }
 
-  appendTo(target) {
-    const dest = typeof target === 'string' ? document.querySelector(target) : target instanceof ZQueryCollection ? target.first() : target;
-    if (dest) this.each((_, el) => dest.appendChild(el));
-    return this;
+  siblings(selector) {
+    const sibs = [];
+    this.elements.forEach(el => {
+      if (!el.parentElement) return;
+      const all = [...el.parentElement.children].filter(c => c !== el);
+      sibs.push(...(selector ? all.filter(c => c.matches(selector)) : all));
+    });
+    return new ZQueryCollection(sibs);
   }
 
-  prependTo(target) {
-    const dest = typeof target === 'string' ? document.querySelector(target) : target instanceof ZQueryCollection ? target.first() : target;
-    if (dest) this.each((_, el) => dest.insertBefore(el, dest.firstChild));
-    return this;
+  next(selector)  {
+    const els = this.elements.map(el => el.nextElementSibling).filter(Boolean);
+    return new ZQueryCollection(selector ? els.filter(el => el.matches(selector)) : els);
   }
 
-  insertAfter(target) {
-    const ref = typeof target === 'string' ? document.querySelector(target) : target instanceof ZQueryCollection ? target.first() : target;
-    if (ref && ref.parentNode) this.each((_, el) => ref.parentNode.insertBefore(el, ref.nextSibling));
-    return this;
+  prev(selector)  {
+    const els = this.elements.map(el => el.previousElementSibling).filter(Boolean);
+    return new ZQueryCollection(selector ? els.filter(el => el.matches(selector)) : els);
   }
 
-  insertBefore(target) {
-    const ref = typeof target === 'string' ? document.querySelector(target) : target instanceof ZQueryCollection ? target.first() : target;
-    if (ref && ref.parentNode) this.each((_, el) => ref.parentNode.insertBefore(el, ref));
-    return this;
+  nextAll(selector) {
+    const result = [];
+    this.elements.forEach(el => {
+      let sib = el.nextElementSibling;
+      while (sib) {
+        if (!selector || sib.matches(selector)) result.push(sib);
+        sib = sib.nextElementSibling;
+      }
+    });
+    return new ZQueryCollection(result);
   }
 
-  replaceAll(target) {
-    const targets = typeof target === 'string'
-      ? Array.from(document.querySelectorAll(target))
-      : target instanceof ZQueryCollection ? target.elements : [target];
-    targets.forEach((t, i) => {
-      const nodes = i === 0 ? this.elements : this.elements.map(el => el.cloneNode(true));
-      nodes.forEach(el => t.parentNode.insertBefore(el, t));
-      t.remove();
+  nextUntil(selector, filter) {
+    const result = [];
+    this.elements.forEach(el => {
+      let sib = el.nextElementSibling;
+      while (sib) {
+        if (selector && sib.matches(selector)) break;
+        if (!filter || sib.matches(filter)) result.push(sib);
+        sib = sib.nextElementSibling;
+      }
     });
-    return this;
+    return new ZQueryCollection(result);
   }
 
-  unwrap(selector) {
+  prevAll(selector) {
+    const result = [];
     this.elements.forEach(el => {
-      const parent = el.parentElement;
-      if (!parent || parent === document.body) return;
-      if (selector && !parent.matches(selector)) return;
-      parent.replaceWith(...parent.childNodes);
+      let sib = el.previousElementSibling;
+      while (sib) {
+        if (!selector || sib.matches(selector)) result.push(sib);
+        sib = sib.previousElementSibling;
+      }
     });
-    return this;
+    return new ZQueryCollection(result);
   }
 
-  wrapAll(wrapper) {
-    const w = typeof wrapper === 'string' ? createFragment(wrapper).firstElementChild : wrapper.cloneNode(true);
-    const first = this.first();
-    if (!first) return this;
-    first.parentNode.insertBefore(w, first);
-    this.each((_, el) => w.appendChild(el));
-    return this;
+  prevUntil(selector, filter) {
+    const result = [];
+    this.elements.forEach(el => {
+      let sib = el.previousElementSibling;
+      while (sib) {
+        if (selector && sib.matches(selector)) break;
+        if (!filter || sib.matches(filter)) result.push(sib);
+        sib = sib.previousElementSibling;
+      }
+    });
+    return new ZQueryCollection(result);
   }
 
-  wrapInner(wrapper) {
-    return this.each((_, el) => {
-      const w = typeof wrapper === 'string' ? createFragment(wrapper).firstElementChild : wrapper.cloneNode(true);
-      while (el.firstChild) w.appendChild(el.firstChild);
-      el.appendChild(w);
+  parents(selector) {
+    const result = [];
+    this.elements.forEach(el => {
+      let parent = el.parentElement;
+      while (parent) {
+        if (!selector || parent.matches(selector)) result.push(parent);
+        parent = parent.parentElement;
+      }
     });
+    return new ZQueryCollection([...new Set(result)]);
   }
 
-  detach() {
-    return this.each((_, el) => el.remove());
+  parentsUntil(selector, filter) {
+    const result = [];
+    this.elements.forEach(el => {
+      let parent = el.parentElement;
+      while (parent) {
+        if (selector && parent.matches(selector)) break;
+        if (!filter || parent.matches(filter)) result.push(parent);
+        parent = parent.parentElement;
+      }
+    });
+    return new ZQueryCollection([...new Set(result)]);
   }
 
-  // --- Visibility ----------------------------------------------------------
-
-  show(display = '') {
-    return this.each((_, el) => { el.style.display = display; });
+  contents() {
+    const result = [];
+    this.elements.forEach(el => result.push(...el.childNodes));
+    return new ZQueryCollection(result);
   }
 
-  hide() {
-    return this.each((_, el) => { el.style.display = 'none'; });
+  filter(selector) {
+    if (typeof selector === 'function') {
+      return new ZQueryCollection(this.elements.filter(selector));
+    }
+    return new ZQueryCollection(this.elements.filter(el => el.matches(selector)));
   }
 
-  toggle(display = '') {
-    return this.each((_, el) => {
-      // Check inline style first (cheap) before forcing layout via getComputedStyle
-      const hidden = el.style.display === 'none' || (el.style.display !== '' ? false : getComputedStyle(el).display === 'none');
-      el.style.display = hidden ? display : 'none';
-    });
+  not(selector) {
+    if (typeof selector === 'function') {
+      return new ZQueryCollection(this.elements.filter((el, i) => !selector.call(el, i, el)));
+    }
+    return new ZQueryCollection(this.elements.filter(el => !el.matches(selector)));
   }
 
-  // --- Events --------------------------------------------------------------
-
-  on(event, selectorOrHandler, handler) {
-    // Support multiple events: "click mouseenter"
-    const events = event.split(/\s+/);
-    return this.each((_, el) => {
-      events.forEach(evt => {
-        if (typeof selectorOrHandler === 'function') {
-          el.addEventListener(evt, selectorOrHandler);
-        } else if (typeof selectorOrHandler === 'string') {
-          // Delegated event — store wrapper so off() can remove it
-          const wrapper = (e) => {
-            if (!e.target || typeof e.target.closest !== 'function') return;
-            const target = e.target.closest(selectorOrHandler);
-            if (target && el.contains(target)) handler.call(target, e);
-          };
-          wrapper._zqOriginal = handler;
-          wrapper._zqSelector = selectorOrHandler;
-          el.addEventListener(evt, wrapper);
-          // Track delegated handlers for removal
-          if (!el._zqDelegated) el._zqDelegated = [];
-          el._zqDelegated.push({ evt, wrapper });
-        }
-      });
-    });
+  has(selector) {
+    return new ZQueryCollection(this.elements.filter(el => el.querySelector(selector)));
   }
 
-  off(event, handler) {
-    const events = event.split(/\s+/);
-    return this.each((_, el) => {
-      events.forEach(evt => {
-        // Try direct removal first
-        el.removeEventListener(evt, handler);
-        // Also check delegated handlers
-        if (el._zqDelegated) {
-          el._zqDelegated = el._zqDelegated.filter(d => {
-            if (d.evt === evt && d.wrapper._zqOriginal === handler) {
-              el.removeEventListener(evt, d.wrapper);
-              return false;
-            }
-            return true;
-          });
-        }
-      });
-    });
+  is(selector) {
+    if (typeof selector === 'function') {
+      return this.elements.some((el, i) => selector.call(el, i, el));
+    }
+    return this.elements.some(el => el.matches(selector));
   }
 
-  one(event, handler) {
-    return this.each((_, el) => {
-      el.addEventListener(event, handler, { once: true });
-    });
+  slice(start, end) {
+    return new ZQueryCollection(this.elements.slice(start, end));
   }
 
-  trigger(event, detail) {
-    return this.each((_, el) => {
-      el.dispatchEvent(new CustomEvent(event, { detail, bubbles: true, cancelable: true }));
-    });
+  add(selector, context) {
+    const toAdd = (selector instanceof ZQueryCollection)
+      ? selector.elements
+      : (selector instanceof Node)
+        ? [selector]
+        : Array.from((context || document).querySelectorAll(selector));
+    return new ZQueryCollection([...this.elements, ...toAdd]);
   }
 
-  // Convenience event shorthands
-  click(fn)   { return fn ? this.on('click', fn) : this.trigger('click'); }
-  submit(fn)  { return fn ? this.on('submit', fn) : this.trigger('submit'); }
-  focus()     { this.first()?.focus(); return this; }
-  blur()      { this.first()?.blur(); return this; }
-  hover(enterFn, leaveFn) {
-    this.on('mouseenter', enterFn);
-    return this.on('mouseleave', leaveFn || enterFn);
+  get(index) {
+    if (index === undefined) return [...this.elements];
+    return index < 0 ? this.elements[this.length + index] : this.elements[index];
   }
 
-  // --- Animation -----------------------------------------------------------
-
-  animate(props, duration = 300, easing = 'ease') {
-    // Empty collection — resolve immediately
-    if (this.length === 0) return Promise.resolve(this);
-    return new Promise(resolve => {
-      let resolved = false;
-      const count = { done: 0 };
-      const listeners = [];
-      this.each((_, el) => {
-        el.style.transition = `all ${duration}ms ${easing}`;
-        requestAnimationFrame(() => {
-          Object.assign(el.style, props);
-          const onEnd = () => {
-            el.removeEventListener('transitionend', onEnd);
-            el.style.transition = '';
-            if (!resolved && ++count.done >= this.length) {
-              resolved = true;
-              resolve(this);
-            }
-          };
-          el.addEventListener('transitionend', onEnd);
-          listeners.push({ el, onEnd });
-        });
-      });
-      // Fallback in case transitionend doesn't fire
-      setTimeout(() => {
-        if (!resolved) {
-          resolved = true;
-          // Clean up any remaining transitionend listeners
-          for (const { el, onEnd } of listeners) {
-            el.removeEventListener('transitionend', onEnd);
-            el.style.transition = '';
-          }
-          resolve(this);
-        }
-      }, duration + 50);
-    });
+  index(selector) {
+    if (selector === undefined) {
+      const el = this.first();
+      if (!el || !el.parentElement) return -1;
+      return Array.from(el.parentElement.children).indexOf(el);
+    }
+    const target = (typeof selector === 'string')
+      ? document.querySelector(selector)
+      : selector;
+    return this.elements.indexOf(target);
   }
 
-  fadeIn(duration = 300) {
-    return this.css({ opacity: '0', display: '' }).animate({ opacity: '1' }, duration);
-  }
+  // --- Classes -------------------------------------------------------------
 
-  fadeOut(duration = 300) {
-    return this.animate({ opacity: '0' }, duration).then(col => col.hide());
+  addClass(...names) {
+    // Fast path: single class, no spaces — avoids flatMap + regex split allocation
+    if (names.length === 1 && names[0].indexOf(' ') === -1) {
+      const c = names[0];
+      for (let i = 0; i < this.elements.length; i++) this.elements[i].classList.add(c);
+      return this;
+    }
+    const classes = names.flatMap(n => n.split(/\s+/));
+    for (let i = 0; i < this.elements.length; i++) this.elements[i].classList.add(...classes);
+    return this;
   }
 
-  fadeToggle(duration = 300) {
-    return Promise.all(this.elements.map(el => {
-      const cs = getComputedStyle(el);
-      const visible = cs.opacity !== '0' && cs.display !== 'none';
-      const col = new ZQueryCollection([el]);
-      return visible ? col.fadeOut(duration) : col.fadeIn(duration);
-    })).then(() => this);
+  removeClass(...names) {
+    if (names.length === 1 && names[0].indexOf(' ') === -1) {
+      const c = names[0];
+      for (let i = 0; i < this.elements.length; i++) this.elements[i].classList.remove(c);
+      return this;
+    }
+    const classes = names.flatMap(n => n.split(/\s+/));
+    for (let i = 0; i < this.elements.length; i++) this.elements[i].classList.remove(...classes);
+    return this;
   }
 
-  fadeTo(duration, opacity) {
-    return this.animate({ opacity: String(opacity) }, duration);
+  toggleClass(...args) {
+    const force = typeof args[args.length - 1] === 'boolean' ? args.pop() : undefined;
+    // Fast path: single class, no spaces
+    if (args.length === 1 && args[0].indexOf(' ') === -1) {
+      const c = args[0];
+      for (let i = 0; i < this.elements.length; i++) {
+        force !== undefined ? this.elements[i].classList.toggle(c, force) : this.elements[i].classList.toggle(c);
+      }
+      return this;
+    }
+    const classes = args.flatMap(n => n.split(/\s+/));
+    for (let i = 0; i < this.elements.length; i++) {
+      const el = this.elements[i];
+      for (let j = 0; j < classes.length; j++) {
+        force !== undefined ? el.classList.toggle(classes[j], force) : el.classList.toggle(classes[j]);
+      }
+    }
+    return this;
   }
 
-  slideDown(duration = 300) {
-    return this.each((_, el) => {
-      el.style.display = '';
-      el.style.overflow = 'hidden';
-      const h = el.scrollHeight + 'px';
-      el.style.maxHeight = '0';
-      el.style.transition = `max-height ${duration}ms ease`;
-      requestAnimationFrame(() => { el.style.maxHeight = h; });
-      setTimeout(() => { el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration);
-    });
+  hasClass(name) {
+    return this.first()?.classList.contains(name) || false;
   }
 
-  slideUp(duration = 300) {
-    return this.each((_, el) => {
-      el.style.overflow = 'hidden';
-      el.style.maxHeight = el.scrollHeight + 'px';
-      el.style.transition = `max-height ${duration}ms ease`;
-      requestAnimationFrame(() => { el.style.maxHeight = '0'; });
-      setTimeout(() => { el.style.display = 'none'; el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration);
-    });
-  }
+  // --- Attributes ----------------------------------------------------------
 
-  slideToggle(duration = 300) {
-    return this.each((_, el) => {
-      if (el.style.display === 'none' || getComputedStyle(el).display === 'none') {
-        el.style.display = '';
-        el.style.overflow = 'hidden';
-        const h = el.scrollHeight + 'px';
-        el.style.maxHeight = '0';
-        el.style.transition = `max-height ${duration}ms ease`;
-        requestAnimationFrame(() => { el.style.maxHeight = h; });
-        setTimeout(() => { el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration);
-      } else {
-        el.style.overflow = 'hidden';
-        el.style.maxHeight = el.scrollHeight + 'px';
-        el.style.transition = `max-height ${duration}ms ease`;
-        requestAnimationFrame(() => { el.style.maxHeight = '0'; });
-        setTimeout(() => { el.style.display = 'none'; el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration);
-      }
-    });
+  attr(name, value) {
+    if (typeof name === 'object' && name !== null) {
+      return this.each((_, el) => {
+        for (const [k, v] of Object.entries(name)) el.setAttribute(k, v);
+      });
+    }
+    if (value === undefined) return this.first()?.getAttribute(name);
+    return this.each((_, el) => el.setAttribute(name, value));
   }
 
-  // --- Form helpers --------------------------------------------------------
-
-  serialize() {
-    const form = this.first();
-    if (!form || form.tagName !== 'FORM') return '';
-    return new URLSearchParams(new FormData(form)).toString();
+  removeAttr(name) {
+    return this.each((_, el) => el.removeAttribute(name));
   }
 
-  serializeObject() {
-    const form = this.first();
-    if (!form || form.tagName !== 'FORM') return {};
-    const obj = {};
-    new FormData(form).forEach((v, k) => {
-      if (obj[k] !== undefined) {
-        if (!Array.isArray(obj[k])) obj[k] = [obj[k]];
-        obj[k].push(v);
-      } else {
-        obj[k] = v;
-      }
-    });
-    return obj;
+  prop(name, value) {
+    if (value === undefined) return this.first()?.[name];
+    return this.each((_, el) => { el[name] = value; });
   }
-}
 
+  data(key, value) {
+    if (value === undefined) {
+      if (key === undefined) return this.first()?.dataset;
+      const raw = this.first()?.dataset[key];
+      try { return JSON.parse(raw); } catch { return raw; }
+    }
+    return this.each((_, el) => { el.dataset[key] = typeof value === 'object' ? JSON.stringify(value) : value; });
+  }
 
-// ---------------------------------------------------------------------------
-// Helper — create document fragment from HTML string
-// ---------------------------------------------------------------------------
-function createFragment(html) {
-  const tpl = document.createElement('template');
-  tpl.innerHTML = html.trim();
-  return tpl.content;
-}
-
+  // --- CSS / Dimensions ----------------------------------------------------
 
-// ---------------------------------------------------------------------------
-// $() — main selector / creator (returns ZQueryCollection, like jQuery)
-// ---------------------------------------------------------------------------
-function query(selector, context) {
-  // null / undefined
-  if (!selector) return new ZQueryCollection([]);
+  css(props, value) {
+    if (typeof props === 'string' && value !== undefined) {
+      return this.each((_, el) => { el.style[props] = value; });
+    }
+    if (typeof props === 'string') {
+      const el = this.first();
+      return el ? getComputedStyle(el)[props] : undefined;
+    }
+    return this.each((_, el) => Object.assign(el.style, props));
+  }
 
-  // Already a collection — return as-is
-  if (selector instanceof ZQueryCollection) return selector;
+  width()  { return this.first()?.getBoundingClientRect().width; }
+  height() { return this.first()?.getBoundingClientRect().height; }
 
-  // DOM element or Window — wrap in collection
-  if (selector instanceof Node || selector === window) {
-    return new ZQueryCollection([selector]);
+  offset() {
+    const r = this.first()?.getBoundingClientRect();
+    return r ? { top: r.top + window.scrollY, left: r.left + window.scrollX, width: r.width, height: r.height } : null;
   }
 
-  // NodeList / HTMLCollection / Array — wrap in collection
-  if (selector instanceof NodeList || selector instanceof HTMLCollection || Array.isArray(selector)) {
-    return new ZQueryCollection(Array.from(selector));
+  position() {
+    const el = this.first();
+    return el ? { top: el.offsetTop, left: el.offsetLeft } : null;
   }
 
-  // HTML string → create elements, wrap in collection
-  if (typeof selector === 'string' && selector.trim().startsWith('<')) {
-    const fragment = createFragment(selector);
-    return new ZQueryCollection([...fragment.childNodes].filter(n => n.nodeType === 1));
+  scrollTop(value) {
+    if (value === undefined) {
+      const el = this.first();
+      return el === window ? window.scrollY : el?.scrollTop;
+    }
+    return this.each((_, el) => {
+      if (el === window) window.scrollTo(window.scrollX, value);
+      else el.scrollTop = value;
+    });
   }
 
-  // CSS selector string → querySelectorAll (collection)
-  if (typeof selector === 'string') {
-    const root = context
-      ? (typeof context === 'string' ? document.querySelector(context) : context)
-      : document;
-    return new ZQueryCollection([...root.querySelectorAll(selector)]);
+  scrollLeft(value) {
+    if (value === undefined) {
+      const el = this.first();
+      return el === window ? window.scrollX : el?.scrollLeft;
+    }
+    return this.each((_, el) => {
+      if (el === window) window.scrollTo(value, window.scrollY);
+      else el.scrollLeft = value;
+    });
   }
 
-  return new ZQueryCollection([]);
-}
+  innerWidth() {
+    const el = this.first();
+    return el?.clientWidth;
+  }
 
+  innerHeight() {
+    const el = this.first();
+    return el?.clientHeight;
+  }
 
-// ---------------------------------------------------------------------------
-// $.all() — collection selector (returns ZQueryCollection for CSS selectors)
-// ---------------------------------------------------------------------------
-function queryAll(selector, context) {
-  // null / undefined
-  if (!selector) return new ZQueryCollection([]);
+  outerWidth(includeMargin = false) {
+    const el = this.first();
+    if (!el) return undefined;
+    let w = el.offsetWidth;
+    if (includeMargin) {
+      const style = getComputedStyle(el);
+      w += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+    }
+    return w;
+  }
 
-  // Already a collection
-  if (selector instanceof ZQueryCollection) return selector;
+  outerHeight(includeMargin = false) {
+    const el = this.first();
+    if (!el) return undefined;
+    let h = el.offsetHeight;
+    if (includeMargin) {
+      const style = getComputedStyle(el);
+      h += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+    }
+    return h;
+  }
 
-  // DOM element or Window
-  if (selector instanceof Node || selector === window) {
-    return new ZQueryCollection([selector]);
+  // --- Content -------------------------------------------------------------
+
+  html(content) {
+    if (content === undefined) return this.first()?.innerHTML;
+    // Auto-morph: if the element already has children, use the diff engine
+    // to patch the DOM (preserves focus, scroll, state, keyed reorder via LIS).
+    // Empty elements get raw innerHTML for fast first-paint — same strategy
+    // the component system uses (first render = innerHTML, updates = morph).
+    return this.each((_, el) => {
+      if (el.childNodes.length > 0) {
+        _morph(el, content);
+      } else {
+        el.innerHTML = content;
+      }
+    });
   }
 
-  // NodeList / HTMLCollection / Array
-  if (selector instanceof NodeList || selector instanceof HTMLCollection || Array.isArray(selector)) {
-    return new ZQueryCollection(Array.from(selector));
+  morph(content) {
+    return this.each((_, el) => { _morph(el, content); });
   }
 
-  // HTML string → create elements
-  if (typeof selector === 'string' && selector.trim().startsWith('<')) {
-    const fragment = createFragment(selector);
-    return new ZQueryCollection([...fragment.childNodes].filter(n => n.nodeType === 1));
+  text(content) {
+    if (content === undefined) return this.first()?.textContent;
+    return this.each((_, el) => { el.textContent = content; });
   }
 
-  // CSS selector string → querySelectorAll (collection)
-  if (typeof selector === 'string') {
-    const root = context
-      ? (typeof context === 'string' ? document.querySelector(context) : context)
-      : document;
-    return new ZQueryCollection([...root.querySelectorAll(selector)]);
+  val(value) {
+    if (value === undefined) return this.first()?.value;
+    return this.each((_, el) => { el.value = value; });
   }
 
-  return new ZQueryCollection([]);
-}
+  // --- DOM Manipulation ----------------------------------------------------
 
+  append(content) {
+    return this.each((_, el) => {
+      if (typeof content === 'string') el.insertAdjacentHTML('beforeend', content);
+      else if (content instanceof ZQueryCollection) content.each((__, c) => el.appendChild(c));
+      else if (content instanceof Node) el.appendChild(content);
+    });
+  }
 
-// ---------------------------------------------------------------------------
-// Quick-ref shortcuts, on $ namespace)
-// ---------------------------------------------------------------------------
-query.id       = (id) => document.getElementById(id);
-query.class    = (name) => document.querySelector(`.${name}`);
-query.classes  = (name) => new ZQueryCollection(Array.from(document.getElementsByClassName(name)));
-query.tag      = (name) => new ZQueryCollection(Array.from(document.getElementsByTagName(name)));
-Object.defineProperty(query, 'name', {
-  value: (name) => new ZQueryCollection(Array.from(document.getElementsByName(name))),
-  writable: true, configurable: true
-});
-query.children = (parentId) => {
-  const p = document.getElementById(parentId);
-  return new ZQueryCollection(p ? Array.from(p.children) : []);
-};
-query.qs  = (sel, ctx = document) => ctx.querySelector(sel);
-query.qsa = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));
+  prepend(content) {
+    return this.each((_, el) => {
+      if (typeof content === 'string') el.insertAdjacentHTML('afterbegin', content);
+      else if (content instanceof Node) el.insertBefore(content, el.firstChild);
+    });
+  }
 
-// Create element shorthand — returns ZQueryCollection for chaining
-query.create = (tag, attrs = {}, ...children) => {
-  const el = document.createElement(tag);
-  for (const [k, v] of Object.entries(attrs)) {
-    if (k === 'class') el.className = v;
-    else if (k === 'style' && typeof v === 'object') Object.assign(el.style, v);
-    else if (k.startsWith('on') && typeof v === 'function') el.addEventListener(k.slice(2).toLowerCase(), v);
-    else if (k === 'data' && typeof v === 'object') Object.entries(v).forEach(([dk, dv]) => { el.dataset[dk] = dv; });
-    else el.setAttribute(k, v);
+  after(content) {
+    return this.each((_, el) => {
+      if (typeof content === 'string') el.insertAdjacentHTML('afterend', content);
+      else if (content instanceof Node) el.parentNode.insertBefore(content, el.nextSibling);
+    });
   }
-  children.flat().forEach(child => {
-    if (typeof child === 'string') el.appendChild(document.createTextNode(child));
-    else if (child instanceof Node) el.appendChild(child);
-  });
-  return new ZQueryCollection(el);
-};
 
-// DOM ready
-query.ready = (fn) => {
-  if (document.readyState !== 'loading') fn();
-  else document.addEventListener('DOMContentLoaded', fn);
-};
+  before(content) {
+    return this.each((_, el) => {
+      if (typeof content === 'string') el.insertAdjacentHTML('beforebegin', content);
+      else if (content instanceof Node) el.parentNode.insertBefore(content, el);
+    });
+  }
 
-// Global event listeners — supports direct, delegated, and target-bound forms
-//   $.on('keydown', handler)           → direct listener on document
-//   $.on('click', '.btn', handler)     → delegated via closest()
-//   $.on('scroll', window, handler)    → direct listener on target
-query.on = (event, selectorOrHandler, handler) => {
-  if (typeof selectorOrHandler === 'function') {
-    // 2-arg: direct document listener (keydown, resize, etc.)
-    document.addEventListener(event, selectorOrHandler);
-    return;
+  wrap(wrapper) {
+    return this.each((_, el) => {
+      const w = typeof wrapper === 'string' ? createFragment(wrapper).firstElementChild : wrapper.cloneNode(true);
+      if (!w || !el.parentNode) return;
+      el.parentNode.insertBefore(w, el);
+      w.appendChild(el);
+    });
   }
-  // EventTarget (window, element, etc.) — direct listener on target
-  if (typeof selectorOrHandler === 'object' && typeof selectorOrHandler.addEventListener === 'function') {
-    selectorOrHandler.addEventListener(event, handler);
-    return;
+
+  remove() {
+    return this.each((_, el) => el.remove());
   }
-  // 3-arg string: delegated
-  document.addEventListener(event, (e) => {
-    if (!e.target || typeof e.target.closest !== 'function') return;
-    const target = e.target.closest(selectorOrHandler);
-    if (target) handler.call(target, e);
-  });
-};
 
-// Remove a direct global listener
-query.off = (event, handler) => {
-  document.removeEventListener(event, handler);
-};
+  empty() {
+    // textContent = '' clears all children without invoking the HTML parser
+    return this.each((_, el) => { el.textContent = ''; });
+  }
 
-// Extend collection prototype (like $.fn in jQuery)
-query.fn = ZQueryCollection.prototype;
-
-// --- src/expression.js -------------------------------------------
-/**
- * zQuery Expression Parser — CSP-safe expression evaluator
- *
- * Replaces `new Function()` / `eval()` with a hand-written parser that
- * evaluates expressions safely without violating Content Security Policy.
- *
- * Supports:
- *   - Property access:       user.name, items[0], items[i]
- *   - Method calls:          items.length, str.toUpperCase()
- *   - Arithmetic:            a + b, count * 2, i % 2
- *   - Comparison:            a === b, count > 0, x != null
- *   - Logical:               a && b, a || b, !a
- *   - Ternary:               a ? b : c
- *   - Typeof:                typeof x
- *   - Unary:                 -a, +a, !a
- *   - Literals:              42, 'hello', "world", true, false, null, undefined
- *   - Template literals:     `Hello ${name}`
- *   - Array literals:        [1, 2, 3]
- *   - Object literals:       { foo: 'bar', baz: 1 }
- *   - Grouping:              (a + b) * c
- *   - Nullish coalescing:    a ?? b
- *   - Optional chaining:     a?.b, a?.[b], a?.()
- *   - Arrow functions:       x => x.id, (a, b) => a + b
- */
+  clone(deep = true) {
+    return new ZQueryCollection(this.elements.map(el => el.cloneNode(deep)));
+  }
 
-// Token types
-const T = {
-  NUM: 1, STR: 2, IDENT: 3, OP: 4, PUNC: 5, TMPL: 6, EOF: 7
-};
+  replaceWith(content) {
+    return this.each((_, el) => {
+      if (typeof content === 'string') {
+        // Auto-morph: diff attributes + children when the tag name matches
+        // instead of destroying and re-creating the element.
+        _morphElement(el, content);
+      } else if (content instanceof Node) {
+        el.parentNode.replaceChild(content, el);
+      }
+    });
+  }
 
-// Operator precedence (higher = binds tighter)
-const PREC = {
-  '??': 2,
-  '||': 3,
-  '&&': 4,
-  '==': 8, '!=': 8, '===': 8, '!==': 8,
-  '<': 9, '>': 9, '<=': 9, '>=': 9, 'instanceof': 9, 'in': 9,
-  '+': 11, '-': 11,
-  '*': 12, '/': 12, '%': 12,
-};
+  appendTo(target) {
+    const dest = typeof target === 'string' ? document.querySelector(target) : target instanceof ZQueryCollection ? target.first() : target;
+    if (dest) this.each((_, el) => dest.appendChild(el));
+    return this;
+  }
 
-const KEYWORDS = new Set([
-  'true', 'false', 'null', 'undefined', 'typeof', 'instanceof', 'in',
-  'new', 'void'
-]);
-
-// ---------------------------------------------------------------------------
-// Tokenizer
-// ---------------------------------------------------------------------------
-function tokenize(expr) {
-  const tokens = [];
-  let i = 0;
-  const len = expr.length;
-
-  while (i < len) {
-    const ch = expr[i];
-
-    // Whitespace
-    if (ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r') { i++; continue; }
-
-    // Numbers
-    if ((ch >= '0' && ch <= '9') || (ch === '.' && i + 1 < len && expr[i + 1] >= '0' && expr[i + 1] <= '9')) {
-      let num = '';
-      if (ch === '0' && i + 1 < len && (expr[i + 1] === 'x' || expr[i + 1] === 'X')) {
-        num = '0x'; i += 2;
-        while (i < len && /[0-9a-fA-F]/.test(expr[i])) num += expr[i++];
-      } else {
-        while (i < len && ((expr[i] >= '0' && expr[i] <= '9') || expr[i] === '.')) num += expr[i++];
-        if (i < len && (expr[i] === 'e' || expr[i] === 'E')) {
-          num += expr[i++];
-          if (i < len && (expr[i] === '+' || expr[i] === '-')) num += expr[i++];
-          while (i < len && expr[i] >= '0' && expr[i] <= '9') num += expr[i++];
-        }
-      }
-      tokens.push({ t: T.NUM, v: Number(num) });
-      continue;
-    }
-
-    // Strings
-    if (ch === "'" || ch === '"') {
-      const quote = ch;
-      let str = '';
-      i++;
-      while (i < len && expr[i] !== quote) {
-        if (expr[i] === '\\' && i + 1 < len) {
-          const esc = expr[++i];
-          if (esc === 'n') str += '\n';
-          else if (esc === 't') str += '\t';
-          else if (esc === 'r') str += '\r';
-          else if (esc === '\\') str += '\\';
-          else if (esc === quote) str += quote;
-          else str += esc;
-        } else {
-          str += expr[i];
-        }
-        i++;
-      }
-      i++; // closing quote
-      tokens.push({ t: T.STR, v: str });
-      continue;
-    }
+  prependTo(target) {
+    const dest = typeof target === 'string' ? document.querySelector(target) : target instanceof ZQueryCollection ? target.first() : target;
+    if (dest) this.each((_, el) => dest.insertBefore(el, dest.firstChild));
+    return this;
+  }
 
-    // Template literals
-    if (ch === '`') {
-      const parts = []; // alternating: string, expr, string, expr, ...
-      let str = '';
-      i++;
-      while (i < len && expr[i] !== '`') {
-        if (expr[i] === '$' && i + 1 < len && expr[i + 1] === '{') {
-          parts.push(str);
-          str = '';
-          i += 2;
-          let depth = 1;
-          let inner = '';
-          while (i < len && depth > 0) {
-            if (expr[i] === '{') depth++;
-            else if (expr[i] === '}') { depth--; if (depth === 0) break; }
-            inner += expr[i++];
-          }
-          i++; // closing }
-          parts.push({ expr: inner });
-        } else {
-          if (expr[i] === '\\' && i + 1 < len) { str += expr[++i]; }
-          else str += expr[i];
-          i++;
-        }
-      }
-      i++; // closing backtick
-      parts.push(str);
-      tokens.push({ t: T.TMPL, v: parts });
-      continue;
-    }
+  insertAfter(target) {
+    const ref = typeof target === 'string' ? document.querySelector(target) : target instanceof ZQueryCollection ? target.first() : target;
+    if (ref && ref.parentNode) this.each((_, el) => ref.parentNode.insertBefore(el, ref.nextSibling));
+    return this;
+  }
 
-    // Identifiers & keywords
-    if ((ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z') || ch === '_' || ch === '$') {
-      let ident = '';
-      while (i < len && /[\w$]/.test(expr[i])) ident += expr[i++];
-      tokens.push({ t: T.IDENT, v: ident });
-      continue;
-    }
+  insertBefore(target) {
+    const ref = typeof target === 'string' ? document.querySelector(target) : target instanceof ZQueryCollection ? target.first() : target;
+    if (ref && ref.parentNode) this.each((_, el) => ref.parentNode.insertBefore(el, ref));
+    return this;
+  }
 
-    // Multi-char operators
-    const two = expr.slice(i, i + 3);
-    if (two === '===' || two === '!==' || two === '?.') {
-      if (two === '?.') {
-        tokens.push({ t: T.OP, v: '?.' });
-        i += 2;
-      } else {
-        tokens.push({ t: T.OP, v: two });
-        i += 3;
-      }
-      continue;
-    }
-    const pair = expr.slice(i, i + 2);
-    if (pair === '==' || pair === '!=' || pair === '<=' || pair === '>=' ||
-        pair === '&&' || pair === '||' || pair === '??' || pair === '?.' ||
-        pair === '=>') {
-      tokens.push({ t: T.OP, v: pair });
-      i += 2;
-      continue;
-    }
+  replaceAll(target) {
+    const targets = typeof target === 'string'
+      ? Array.from(document.querySelectorAll(target))
+      : target instanceof ZQueryCollection ? target.elements : [target];
+    targets.forEach((t, i) => {
+      const nodes = i === 0 ? this.elements : this.elements.map(el => el.cloneNode(true));
+      nodes.forEach(el => t.parentNode.insertBefore(el, t));
+      t.remove();
+    });
+    return this;
+  }
 
-    // Single char operators and punctuation
-    if ('+-*/%'.includes(ch)) {
-      tokens.push({ t: T.OP, v: ch });
-      i++; continue;
-    }
-    if ('<>=!'.includes(ch)) {
-      tokens.push({ t: T.OP, v: ch });
-      i++; continue;
-    }
-    // Spread operator: ...
-    if (ch === '.' && i + 2 < len && expr[i + 1] === '.' && expr[i + 2] === '.') {
-      tokens.push({ t: T.OP, v: '...' });
-      i += 3; continue;
-    }
-    if ('()[]{},.?:'.includes(ch)) {
-      tokens.push({ t: T.PUNC, v: ch });
-      i++; continue;
-    }
+  unwrap(selector) {
+    this.elements.forEach(el => {
+      const parent = el.parentElement;
+      if (!parent || parent === document.body) return;
+      if (selector && !parent.matches(selector)) return;
+      parent.replaceWith(...parent.childNodes);
+    });
+    return this;
+  }
 
-    // Unknown — skip
-    i++;
+  wrapAll(wrapper) {
+    const w = typeof wrapper === 'string' ? createFragment(wrapper).firstElementChild : wrapper.cloneNode(true);
+    const first = this.first();
+    if (!first) return this;
+    first.parentNode.insertBefore(w, first);
+    this.each((_, el) => w.appendChild(el));
+    return this;
   }
 
-  tokens.push({ t: T.EOF, v: null });
-  return tokens;
-}
+  wrapInner(wrapper) {
+    return this.each((_, el) => {
+      const w = typeof wrapper === 'string' ? createFragment(wrapper).firstElementChild : wrapper.cloneNode(true);
+      while (el.firstChild) w.appendChild(el.firstChild);
+      el.appendChild(w);
+    });
+  }
 
-// ---------------------------------------------------------------------------
-// Parser — Pratt (precedence climbing)
-// ---------------------------------------------------------------------------
-class Parser {
-  constructor(tokens, scope) {
-    this.tokens = tokens;
-    this.pos = 0;
-    this.scope = scope;
+  detach() {
+    return this.each((_, el) => el.remove());
   }
 
-  peek() { return this.tokens[this.pos]; }
-  next() { return this.tokens[this.pos++]; }
+  // --- Visibility ----------------------------------------------------------
 
-  expect(type, val) {
-    const t = this.next();
-    if (t.t !== type || (val !== undefined && t.v !== val)) {
-      throw new Error(`Expected ${val || type} but got ${t.v}`);
-    }
-    return t;
+  show(display = '') {
+    return this.each((_, el) => { el.style.display = display; });
   }
 
-  match(type, val) {
-    const t = this.peek();
-    if (t.t === type && (val === undefined || t.v === val)) {
-      return this.next();
-    }
-    return null;
+  hide() {
+    return this.each((_, el) => { el.style.display = 'none'; });
   }
 
-  // Main entry
-  parse() {
-    const result = this.parseExpression(0);
-    return result;
+  toggle(display = '') {
+    return this.each((_, el) => {
+      // Check inline style first (cheap) before forcing layout via getComputedStyle
+      const hidden = el.style.display === 'none' || (el.style.display !== '' ? false : getComputedStyle(el).display === 'none');
+      el.style.display = hidden ? display : 'none';
+    });
   }
 
-  // Precedence climbing
-  parseExpression(minPrec) {
-    let left = this.parseUnary();
+  // --- Events --------------------------------------------------------------
 
-    while (true) {
-      const tok = this.peek();
+  on(event, selectorOrHandler, handler) {
+    // Support multiple events: "click mouseenter"
+    const events = event.split(/\s+/);
+    return this.each((_, el) => {
+      events.forEach(evt => {
+        if (typeof selectorOrHandler === 'function') {
+          el.addEventListener(evt, selectorOrHandler);
+        } else if (typeof selectorOrHandler === 'string') {
+          // Delegated event — store wrapper so off() can remove it
+          const wrapper = (e) => {
+            if (!e.target || typeof e.target.closest !== 'function') return;
+            const target = e.target.closest(selectorOrHandler);
+            if (target && el.contains(target)) handler.call(target, e);
+          };
+          wrapper._zqOriginal = handler;
+          wrapper._zqSelector = selectorOrHandler;
+          el.addEventListener(evt, wrapper);
+          // Track delegated handlers for removal
+          if (!el._zqDelegated) el._zqDelegated = [];
+          el._zqDelegated.push({ evt, wrapper });
+        }
+      });
+    });
+  }
 
-      // Ternary
-      if (tok.t === T.PUNC && tok.v === '?') {
-        // Distinguish ternary ? from optional chaining ?.
-        if (this.tokens[this.pos + 1]?.v !== '.') {
-          if (1 <= minPrec) break; // ternary has very low precedence
-          this.next(); // consume ?
-          const truthy = this.parseExpression(0);
-          this.expect(T.PUNC, ':');
-          const falsy = this.parseExpression(0);
-          left = { type: 'ternary', cond: left, truthy, falsy };
-          continue;
+  off(event, handler) {
+    const events = event.split(/\s+/);
+    return this.each((_, el) => {
+      events.forEach(evt => {
+        // Try direct removal first
+        el.removeEventListener(evt, handler);
+        // Also check delegated handlers
+        if (el._zqDelegated) {
+          el._zqDelegated = el._zqDelegated.filter(d => {
+            if (d.evt === evt && d.wrapper._zqOriginal === handler) {
+              el.removeEventListener(evt, d.wrapper);
+              return false;
+            }
+            return true;
+          });
         }
-      }
-
-      // Binary operators
-      if (tok.t === T.OP && tok.v in PREC) {
-        const prec = PREC[tok.v];
-        if (prec <= minPrec) break;
-        this.next();
-        const right = this.parseExpression(prec);
-        left = { type: 'binary', op: tok.v, left, right };
-        continue;
-      }
-
-      // instanceof and in as binary operators
-      if (tok.t === T.IDENT && (tok.v === 'instanceof' || tok.v === 'in') && PREC[tok.v] > minPrec) {
-        const prec = PREC[tok.v];
-        this.next();
-        const right = this.parseExpression(prec);
-        left = { type: 'binary', op: tok.v, left, right };
-        continue;
-      }
-
-      break;
-    }
-
-    return left;
+      });
+    });
   }
 
-  parseUnary() {
-    const tok = this.peek();
-
-    // typeof
-    if (tok.t === T.IDENT && tok.v === 'typeof') {
-      this.next();
-      const arg = this.parseUnary();
-      return { type: 'typeof', arg };
-    }
-
-    // void
-    if (tok.t === T.IDENT && tok.v === 'void') {
-      this.next();
-      this.parseUnary(); // evaluate but discard
-      return { type: 'literal', value: undefined };
-    }
-
-    // !expr
-    if (tok.t === T.OP && tok.v === '!') {
-      this.next();
-      const arg = this.parseUnary();
-      return { type: 'not', arg };
-    }
-
-    // -expr, +expr
-    if (tok.t === T.OP && (tok.v === '-' || tok.v === '+')) {
-      this.next();
-      const arg = this.parseUnary();
-      return { type: 'unary', op: tok.v, arg };
-    }
-
-    return this.parsePostfix();
+  one(event, handler) {
+    return this.each((_, el) => {
+      el.addEventListener(event, handler, { once: true });
+    });
   }
 
-  parsePostfix() {
-    let left = this.parsePrimary();
+  trigger(event, detail) {
+    return this.each((_, el) => {
+      el.dispatchEvent(new CustomEvent(event, { detail, bubbles: true, cancelable: true }));
+    });
+  }
 
-    while (true) {
-      const tok = this.peek();
+  // Convenience event shorthands
+  click(fn)   { return fn ? this.on('click', fn) : this.trigger('click'); }
+  submit(fn)  { return fn ? this.on('submit', fn) : this.trigger('submit'); }
+  focus()     { this.first()?.focus(); return this; }
+  blur()      { this.first()?.blur(); return this; }
+  hover(enterFn, leaveFn) {
+    this.on('mouseenter', enterFn);
+    return this.on('mouseleave', leaveFn || enterFn);
+  }
 
-      // Property access: a.b
-      if (tok.t === T.PUNC && tok.v === '.') {
-        this.next();
-        const prop = this.next();
-        left = { type: 'member', obj: left, prop: prop.v, computed: false };
-        // Check for method call: a.b()
-        if (this.peek().t === T.PUNC && this.peek().v === '(') {
-          left = this._parseCall(left);
-        }
-        continue;
-      }
+  // --- Animation -----------------------------------------------------------
 
-      // Optional chaining: a?.b, a?.[b], a?.()
-      if (tok.t === T.OP && tok.v === '?.') {
-        this.next();
-        const next = this.peek();
-        if (next.t === T.PUNC && next.v === '[') {
-          // a?.[expr]
-          this.next();
-          const prop = this.parseExpression(0);
-          this.expect(T.PUNC, ']');
-          left = { type: 'optional_member', obj: left, prop, computed: true };
-        } else if (next.t === T.PUNC && next.v === '(') {
-          // a?.()
-          left = { type: 'optional_call', callee: left, args: this._parseArgs() };
-        } else {
-          // a?.b
-          const prop = this.next();
-          left = { type: 'optional_member', obj: left, prop: prop.v, computed: false };
-          if (this.peek().t === T.PUNC && this.peek().v === '(') {
-            left = this._parseCall(left);
+  animate(props, duration = 300, easing = 'ease') {
+    // Empty collection — resolve immediately
+    if (this.length === 0) return Promise.resolve(this);
+    return new Promise(resolve => {
+      let resolved = false;
+      const count = { done: 0 };
+      const listeners = [];
+      this.each((_, el) => {
+        el.style.transition = `all ${duration}ms ${easing}`;
+        requestAnimationFrame(() => {
+          Object.assign(el.style, props);
+          const onEnd = () => {
+            el.removeEventListener('transitionend', onEnd);
+            el.style.transition = '';
+            if (!resolved && ++count.done >= this.length) {
+              resolved = true;
+              resolve(this);
+            }
+          };
+          el.addEventListener('transitionend', onEnd);
+          listeners.push({ el, onEnd });
+        });
+      });
+      // Fallback in case transitionend doesn't fire
+      setTimeout(() => {
+        if (!resolved) {
+          resolved = true;
+          // Clean up any remaining transitionend listeners
+          for (const { el, onEnd } of listeners) {
+            el.removeEventListener('transitionend', onEnd);
+            el.style.transition = '';
           }
+          resolve(this);
         }
-        continue;
-      }
-
-      // Computed access: a[b]
-      if (tok.t === T.PUNC && tok.v === '[') {
-        this.next();
-        const prop = this.parseExpression(0);
-        this.expect(T.PUNC, ']');
-        left = { type: 'member', obj: left, prop, computed: true };
-        // Check for method call: a[b]()
-        if (this.peek().t === T.PUNC && this.peek().v === '(') {
-          left = this._parseCall(left);
-        }
-        continue;
-      }
-
-      // Function call: fn()
-      if (tok.t === T.PUNC && tok.v === '(') {
-        left = this._parseCall(left);
-        continue;
-      }
+      }, duration + 50);
+    });
+  }
 
-      break;
-    }
+  fadeIn(duration = 300) {
+    return this.css({ opacity: '0', display: '' }).animate({ opacity: '1' }, duration);
+  }
 
-    return left;
+  fadeOut(duration = 300) {
+    return this.animate({ opacity: '0' }, duration).then(col => col.hide());
   }
 
-  _parseCall(callee) {
-    const args = this._parseArgs();
-    return { type: 'call', callee, args };
+  fadeToggle(duration = 300) {
+    return Promise.all(this.elements.map(el => {
+      const cs = getComputedStyle(el);
+      const visible = cs.opacity !== '0' && cs.display !== 'none';
+      const col = new ZQueryCollection([el]);
+      return visible ? col.fadeOut(duration) : col.fadeIn(duration);
+    })).then(() => this);
   }
 
-  _parseArgs() {
-    this.expect(T.PUNC, '(');
-    const args = [];
-    while (!(this.peek().t === T.PUNC && this.peek().v === ')') && this.peek().t !== T.EOF) {
-      if (this.peek().t === T.OP && this.peek().v === '...') {
-        this.next();
-        args.push({ type: 'spread', arg: this.parseExpression(0) });
-      } else {
-        args.push(this.parseExpression(0));
-      }
-      if (this.peek().t === T.PUNC && this.peek().v === ',') this.next();
-    }
-    this.expect(T.PUNC, ')');
-    return args;
+  fadeTo(duration, opacity) {
+    return this.animate({ opacity: String(opacity) }, duration);
   }
 
-  parsePrimary() {
-    const tok = this.peek();
+  slideDown(duration = 300) {
+    return this.each((_, el) => {
+      el.style.display = '';
+      el.style.overflow = 'hidden';
+      const h = el.scrollHeight + 'px';
+      el.style.maxHeight = '0';
+      el.style.transition = `max-height ${duration}ms ease`;
+      requestAnimationFrame(() => { el.style.maxHeight = h; });
+      setTimeout(() => { el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration);
+    });
+  }
 
-    // Number literal
-    if (tok.t === T.NUM) {
-      this.next();
-      return { type: 'literal', value: tok.v };
-    }
+  slideUp(duration = 300) {
+    return this.each((_, el) => {
+      el.style.overflow = 'hidden';
+      el.style.maxHeight = el.scrollHeight + 'px';
+      el.style.transition = `max-height ${duration}ms ease`;
+      requestAnimationFrame(() => { el.style.maxHeight = '0'; });
+      setTimeout(() => { el.style.display = 'none'; el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration);
+    });
+  }
 
-    // String literal
-    if (tok.t === T.STR) {
-      this.next();
-      return { type: 'literal', value: tok.v };
-    }
-
-    // Template literal
-    if (tok.t === T.TMPL) {
-      this.next();
-      return { type: 'template', parts: tok.v };
-    }
-
-    // Arrow function with parens: () =>, (a) =>, (a, b) =>
-    // or regular grouping: (expr)
-    if (tok.t === T.PUNC && tok.v === '(') {
-      const savedPos = this.pos;
-      this.next(); // consume (
-      const params = [];
-      let couldBeArrow = true;
-
-      if (this.peek().t === T.PUNC && this.peek().v === ')') {
-        // () => ... — no params
+  slideToggle(duration = 300) {
+    return this.each((_, el) => {
+      if (el.style.display === 'none' || getComputedStyle(el).display === 'none') {
+        el.style.display = '';
+        el.style.overflow = 'hidden';
+        const h = el.scrollHeight + 'px';
+        el.style.maxHeight = '0';
+        el.style.transition = `max-height ${duration}ms ease`;
+        requestAnimationFrame(() => { el.style.maxHeight = h; });
+        setTimeout(() => { el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration);
       } else {
-        while (couldBeArrow) {
-          const p = this.peek();
-          if (p.t === T.IDENT && !KEYWORDS.has(p.v)) {
-            params.push(this.next().v);
-            if (this.peek().t === T.PUNC && this.peek().v === ',') {
-              this.next();
-            } else {
-              break;
-            }
-          } else {
-            couldBeArrow = false;
-          }
-        }
+        el.style.overflow = 'hidden';
+        el.style.maxHeight = el.scrollHeight + 'px';
+        el.style.transition = `max-height ${duration}ms ease`;
+        requestAnimationFrame(() => { el.style.maxHeight = '0'; });
+        setTimeout(() => { el.style.display = 'none'; el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration);
       }
+    });
+  }
 
-      if (couldBeArrow && this.peek().t === T.PUNC && this.peek().v === ')') {
-        this.next(); // consume )
-        if (this.peek().t === T.OP && this.peek().v === '=>') {
-          this.next(); // consume =>
-          const body = this.parseExpression(0);
-          return { type: 'arrow', params, body };
-        }
-      }
+  // --- Form helpers --------------------------------------------------------
 
-      // Not an arrow — restore and parse as grouping
-      this.pos = savedPos;
-      this.next(); // consume (
-      const expr = this.parseExpression(0);
-      this.expect(T.PUNC, ')');
-      return expr;
-    }
+  serialize() {
+    const form = this.first();
+    if (!form || form.tagName !== 'FORM') return '';
+    return new URLSearchParams(new FormData(form)).toString();
+  }
 
-    // Array literal
-    if (tok.t === T.PUNC && tok.v === '[') {
-      this.next();
-      const elements = [];
-      while (!(this.peek().t === T.PUNC && this.peek().v === ']') && this.peek().t !== T.EOF) {
-        if (this.peek().t === T.OP && this.peek().v === '...') {
-          this.next();
-          elements.push({ type: 'spread', arg: this.parseExpression(0) });
-        } else {
-          elements.push(this.parseExpression(0));
-        }
-        if (this.peek().t === T.PUNC && this.peek().v === ',') this.next();
+  serializeObject() {
+    const form = this.first();
+    if (!form || form.tagName !== 'FORM') return {};
+    const obj = {};
+    new FormData(form).forEach((v, k) => {
+      if (obj[k] !== undefined) {
+        if (!Array.isArray(obj[k])) obj[k] = [obj[k]];
+        obj[k].push(v);
+      } else {
+        obj[k] = v;
       }
-      this.expect(T.PUNC, ']');
-      return { type: 'array', elements };
-    }
+    });
+    return obj;
+  }
+}
 
-    // Object literal
-    if (tok.t === T.PUNC && tok.v === '{') {
-      this.next();
-      const properties = [];
-      while (!(this.peek().t === T.PUNC && this.peek().v === '}') && this.peek().t !== T.EOF) {
-        // Spread in object: { ...obj }
-        if (this.peek().t === T.OP && this.peek().v === '...') {
-          this.next();
-          properties.push({ spread: true, value: this.parseExpression(0) });
-          if (this.peek().t === T.PUNC && this.peek().v === ',') this.next();
-          continue;
-        }
 
-        const keyTok = this.next();
-        let key;
-        if (keyTok.t === T.IDENT || keyTok.t === T.STR) key = keyTok.v;
-        else if (keyTok.t === T.NUM) key = String(keyTok.v);
-        else throw new Error('Invalid object key: ' + keyTok.v);
+// ---------------------------------------------------------------------------
+// Helper — create document fragment from HTML string
+// ---------------------------------------------------------------------------
+function createFragment(html) {
+  const tpl = document.createElement('template');
+  tpl.innerHTML = html.trim();
+  return tpl.content;
+}
 
-        // Shorthand property: { foo } means { foo: foo }
-        if (this.peek().t === T.PUNC && (this.peek().v === ',' || this.peek().v === '}')) {
-          properties.push({ key, value: { type: 'ident', name: key } });
-        } else {
-          this.expect(T.PUNC, ':');
-          properties.push({ key, value: this.parseExpression(0) });
-        }
-        if (this.peek().t === T.PUNC && this.peek().v === ',') this.next();
-      }
-      this.expect(T.PUNC, '}');
-      return { type: 'object', properties };
-    }
 
-    // Identifiers & keywords
-    if (tok.t === T.IDENT) {
-      this.next();
+// ---------------------------------------------------------------------------
+// $() — main selector / creator (returns ZQueryCollection, like jQuery)
+// ---------------------------------------------------------------------------
+function query(selector, context) {
+  // null / undefined
+  if (!selector) return new ZQueryCollection([]);
 
-      // Keywords
-      if (tok.v === 'true') return { type: 'literal', value: true };
-      if (tok.v === 'false') return { type: 'literal', value: false };
-      if (tok.v === 'null') return { type: 'literal', value: null };
-      if (tok.v === 'undefined') return { type: 'literal', value: undefined };
+  // Already a collection — return as-is
+  if (selector instanceof ZQueryCollection) return selector;
 
-      // new keyword
-      if (tok.v === 'new') {
-        let classExpr = this.parsePrimary();
-        // Handle member access (e.g. ns.MyClass) without consuming call args
-        while (this.peek().t === T.PUNC && this.peek().v === '.') {
-          this.next();
-          const prop = this.next();
-          classExpr = { type: 'member', obj: classExpr, prop: prop.v, computed: false };
-        }
-        let args = [];
-        if (this.peek().t === T.PUNC && this.peek().v === '(') {
-          args = this._parseArgs();
-        }
-        return { type: 'new', callee: classExpr, args };
-      }
+  // DOM element or Window — wrap in collection
+  if (selector instanceof Node || selector === window) {
+    return new ZQueryCollection([selector]);
+  }
 
-      // Arrow function: x => expr
-      if (this.peek().t === T.OP && this.peek().v === '=>') {
-        this.next(); // consume =>
-        const body = this.parseExpression(0);
-        return { type: 'arrow', params: [tok.v], body };
-      }
+  // NodeList / HTMLCollection / Array — wrap in collection
+  if (selector instanceof NodeList || selector instanceof HTMLCollection || Array.isArray(selector)) {
+    return new ZQueryCollection(Array.from(selector));
+  }
 
-      return { type: 'ident', name: tok.v };
-    }
+  // HTML string → create elements, wrap in collection
+  if (typeof selector === 'string' && selector.trim().startsWith('<')) {
+    const fragment = createFragment(selector);
+    return new ZQueryCollection([...fragment.childNodes].filter(n => n.nodeType === 1));
+  }
 
-    // Fallback — return undefined for unparseable
-    this.next();
-    return { type: 'literal', value: undefined };
+  // CSS selector string → querySelectorAll (collection)
+  if (typeof selector === 'string') {
+    const root = context
+      ? (typeof context === 'string' ? document.querySelector(context) : context)
+      : document;
+    return new ZQueryCollection([...root.querySelectorAll(selector)]);
   }
+
+  return new ZQueryCollection([]);
 }
 
+
 // ---------------------------------------------------------------------------
-// Evaluator — walks the AST, resolves against scope
+// $.all() — collection selector (returns ZQueryCollection for CSS selectors)
 // ---------------------------------------------------------------------------
+function queryAll(selector, context) {
+  // null / undefined
+  if (!selector) return new ZQueryCollection([]);
 
-/** Safe property access whitelist for built-in prototypes */
-const SAFE_ARRAY_METHODS = new Set([
-  'length', 'map', 'filter', 'find', 'findIndex', 'some', 'every',
-  'reduce', 'reduceRight', 'forEach', 'includes', 'indexOf', 'lastIndexOf',
-  'join', 'slice', 'concat', 'flat', 'flatMap', 'reverse', 'sort',
-  'fill', 'keys', 'values', 'entries', 'at', 'toString',
-]);
-
-const SAFE_STRING_METHODS = new Set([
-  'length', 'charAt', 'charCodeAt', 'includes', 'indexOf', 'lastIndexOf',
-  'slice', 'substring', 'trim', 'trimStart', 'trimEnd', 'toLowerCase',
-  'toUpperCase', 'split', 'replace', 'replaceAll', 'match', 'search',
-  'startsWith', 'endsWith', 'padStart', 'padEnd', 'repeat', 'at',
-  'toString', 'valueOf',
-]);
-
-const SAFE_NUMBER_METHODS = new Set([
-  'toFixed', 'toPrecision', 'toString', 'valueOf',
-]);
+  // Already a collection
+  if (selector instanceof ZQueryCollection) return selector;
 
-const SAFE_OBJECT_METHODS = new Set([
-  'hasOwnProperty', 'toString', 'valueOf',
-]);
+  // DOM element or Window
+  if (selector instanceof Node || selector === window) {
+    return new ZQueryCollection([selector]);
+  }
 
-const SAFE_MATH_PROPS = new Set([
-  'PI', 'E', 'LN2', 'LN10', 'LOG2E', 'LOG10E', 'SQRT2', 'SQRT1_2',
-  'abs', 'ceil', 'floor', 'round', 'trunc', 'max', 'min', 'pow',
-  'sqrt', 'sign', 'random', 'log', 'log2', 'log10',
-]);
+  // NodeList / HTMLCollection / Array
+  if (selector instanceof NodeList || selector instanceof HTMLCollection || Array.isArray(selector)) {
+    return new ZQueryCollection(Array.from(selector));
+  }
 
-const SAFE_JSON_PROPS = new Set(['parse', 'stringify']);
+  // HTML string → create elements
+  if (typeof selector === 'string' && selector.trim().startsWith('<')) {
+    const fragment = createFragment(selector);
+    return new ZQueryCollection([...fragment.childNodes].filter(n => n.nodeType === 1));
+  }
 
-/**
- * Check if property access is safe
- */
-function _isSafeAccess(obj, prop) {
-  // Never allow access to dangerous properties
-  const BLOCKED = new Set([
-    'constructor', '__proto__', 'prototype', '__defineGetter__',
-    '__defineSetter__', '__lookupGetter__', '__lookupSetter__',
-    'call', 'apply', 'bind',
-  ]);
-  if (typeof prop === 'string' && BLOCKED.has(prop)) return false;
+  // CSS selector string → querySelectorAll (collection)
+  if (typeof selector === 'string') {
+    const root = context
+      ? (typeof context === 'string' ? document.querySelector(context) : context)
+      : document;
+    return new ZQueryCollection([...root.querySelectorAll(selector)]);
+  }
 
-  // Always allow plain object/function property access and array index access
-  if (obj !== null && obj !== undefined && (typeof obj === 'object' || typeof obj === 'function')) return true;
-  if (typeof obj === 'string') return SAFE_STRING_METHODS.has(prop);
-  if (typeof obj === 'number') return SAFE_NUMBER_METHODS.has(prop);
-  return false;
+  return new ZQueryCollection([]);
 }
 
-function evaluate(node, scope) {
-  if (!node) return undefined;
-
-  switch (node.type) {
-    case 'literal':
-      return node.value;
 
-    case 'ident': {
-      const name = node.name;
-      // Check scope layers in order
-      for (const layer of scope) {
-        if (layer && typeof layer === 'object' && name in layer) {
-          return layer[name];
-        }
-      }
-      // Built-in globals (safe ones only)
-      if (name === 'Math') return Math;
-      if (name === 'JSON') return JSON;
-      if (name === 'Date') return Date;
-      if (name === 'Array') return Array;
-      if (name === 'Object') return Object;
-      if (name === 'String') return String;
-      if (name === 'Number') return Number;
-      if (name === 'Boolean') return Boolean;
-      if (name === 'parseInt') return parseInt;
-      if (name === 'parseFloat') return parseFloat;
-      if (name === 'isNaN') return isNaN;
-      if (name === 'isFinite') return isFinite;
-      if (name === 'Infinity') return Infinity;
-      if (name === 'NaN') return NaN;
-      if (name === 'encodeURIComponent') return encodeURIComponent;
-      if (name === 'decodeURIComponent') return decodeURIComponent;
-      if (name === 'console') return console;
-      if (name === 'Map') return Map;
-      if (name === 'Set') return Set;
-      if (name === 'RegExp') return RegExp;
-      if (name === 'Error') return Error;
-      if (name === 'URL') return URL;
-      if (name === 'URLSearchParams') return URLSearchParams;
-      return undefined;
-    }
+// ---------------------------------------------------------------------------
+// Quick-ref shortcuts, on $ namespace)
+// ---------------------------------------------------------------------------
+query.id       = (id) => document.getElementById(id);
+query.class    = (name) => document.querySelector(`.${name}`);
+query.classes  = (name) => new ZQueryCollection(Array.from(document.getElementsByClassName(name)));
+query.tag      = (name) => new ZQueryCollection(Array.from(document.getElementsByTagName(name)));
+Object.defineProperty(query, 'name', {
+  value: (name) => new ZQueryCollection(Array.from(document.getElementsByName(name))),
+  writable: true, configurable: true
+});
+query.children = (parentId) => {
+  const p = document.getElementById(parentId);
+  return new ZQueryCollection(p ? Array.from(p.children) : []);
+};
+query.qs  = (sel, ctx = document) => ctx.querySelector(sel);
+query.qsa = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));
 
-    case 'template': {
-      // Template literal with interpolation
-      let result = '';
-      for (const part of node.parts) {
-        if (typeof part === 'string') {
-          result += part;
-        } else if (part && part.expr) {
-          result += String(safeEval(part.expr, scope) ?? '');
-        }
-      }
-      return result;
-    }
+// Create element shorthand — returns ZQueryCollection for chaining
+query.create = (tag, attrs = {}, ...children) => {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs)) {
+    if (k === 'class') el.className = v;
+    else if (k === 'style' && typeof v === 'object') Object.assign(el.style, v);
+    else if (k.startsWith('on') && typeof v === 'function') el.addEventListener(k.slice(2).toLowerCase(), v);
+    else if (k === 'data' && typeof v === 'object') Object.entries(v).forEach(([dk, dv]) => { el.dataset[dk] = dv; });
+    else el.setAttribute(k, v);
+  }
+  children.flat().forEach(child => {
+    if (typeof child === 'string') el.appendChild(document.createTextNode(child));
+    else if (child instanceof Node) el.appendChild(child);
+  });
+  return new ZQueryCollection(el);
+};
 
-    case 'member': {
-      const obj = evaluate(node.obj, scope);
-      if (obj == null) return undefined;
-      const prop = node.computed ? evaluate(node.prop, scope) : node.prop;
-      if (!_isSafeAccess(obj, prop)) return undefined;
-      return obj[prop];
-    }
+// DOM ready
+query.ready = (fn) => {
+  if (document.readyState !== 'loading') fn();
+  else document.addEventListener('DOMContentLoaded', fn);
+};
 
-    case 'optional_member': {
-      const obj = evaluate(node.obj, scope);
-      if (obj == null) return undefined;
-      const prop = node.computed ? evaluate(node.prop, scope) : node.prop;
-      if (!_isSafeAccess(obj, prop)) return undefined;
-      return obj[prop];
-    }
+// Global event listeners — supports direct, delegated, and target-bound forms
+//   $.on('keydown', handler)           → direct listener on document
+//   $.on('click', '.btn', handler)     → delegated via closest()
+//   $.on('scroll', window, handler)    → direct listener on target
+query.on = (event, selectorOrHandler, handler) => {
+  if (typeof selectorOrHandler === 'function') {
+    // 2-arg: direct document listener (keydown, resize, etc.)
+    document.addEventListener(event, selectorOrHandler);
+    return;
+  }
+  // EventTarget (window, element, etc.) — direct listener on target
+  if (typeof selectorOrHandler === 'object' && typeof selectorOrHandler.addEventListener === 'function') {
+    selectorOrHandler.addEventListener(event, handler);
+    return;
+  }
+  // 3-arg string: delegated
+  document.addEventListener(event, (e) => {
+    if (!e.target || typeof e.target.closest !== 'function') return;
+    const target = e.target.closest(selectorOrHandler);
+    if (target) handler.call(target, e);
+  });
+};
 
-    case 'call': {
-      const result = _resolveCall(node, scope, false);
-      return result;
-    }
+// Remove a direct global listener
+query.off = (event, handler) => {
+  document.removeEventListener(event, handler);
+};
 
-    case 'optional_call': {
-      const calleeNode = node.callee;
-      const args = _evalArgs(node.args, scope);
-      // Method call: obj?.method() — bind `this` to obj
-      if (calleeNode.type === 'member' || calleeNode.type === 'optional_member') {
-        const obj = evaluate(calleeNode.obj, scope);
-        if (obj == null) return undefined;
-        const prop = calleeNode.computed ? evaluate(calleeNode.prop, scope) : calleeNode.prop;
-        if (!_isSafeAccess(obj, prop)) return undefined;
-        const fn = obj[prop];
-        if (typeof fn !== 'function') return undefined;
-        return fn.apply(obj, args);
-      }
-      const callee = evaluate(calleeNode, scope);
-      if (callee == null) return undefined;
-      if (typeof callee !== 'function') return undefined;
-      return callee(...args);
-    }
+// Extend collection prototype (like $.fn in jQuery)
+query.fn = ZQueryCollection.prototype;
+
+// --- src/expression.js -------------------------------------------
+/**
+ * zQuery Expression Parser — CSP-safe expression evaluator
+ *
+ * Replaces `new Function()` / `eval()` with a hand-written parser that
+ * evaluates expressions safely without violating Content Security Policy.
+ *
+ * Supports:
+ *   - Property access:       user.name, items[0], items[i]
+ *   - Method calls:          items.length, str.toUpperCase()
+ *   - Arithmetic:            a + b, count * 2, i % 2
+ *   - Comparison:            a === b, count > 0, x != null
+ *   - Logical:               a && b, a || b, !a
+ *   - Ternary:               a ? b : c
+ *   - Typeof:                typeof x
+ *   - Unary:                 -a, +a, !a
+ *   - Literals:              42, 'hello', "world", true, false, null, undefined
+ *   - Template literals:     `Hello ${name}`
+ *   - Array literals:        [1, 2, 3]
+ *   - Object literals:       { foo: 'bar', baz: 1 }
+ *   - Grouping:              (a + b) * c
+ *   - Nullish coalescing:    a ?? b
+ *   - Optional chaining:     a?.b, a?.[b], a?.()
+ *   - Arrow functions:       x => x.id, (a, b) => a + b
+ */
 
-    case 'new': {
-      const Ctor = evaluate(node.callee, scope);
-      if (typeof Ctor !== 'function') return undefined;
-      // Only allow safe constructors
-      if (Ctor === Date || Ctor === Array || Ctor === Map || Ctor === Set ||
-          Ctor === RegExp || Ctor === Error || Ctor === URL || Ctor === URLSearchParams) {
-        const args = _evalArgs(node.args, scope);
-        return new Ctor(...args);
-      }
-      return undefined;
-    }
+// Token types
+const T = {
+  NUM: 1, STR: 2, IDENT: 3, OP: 4, PUNC: 5, TMPL: 6, EOF: 7
+};
 
-    case 'binary':
-      return _evalBinary(node, scope);
+// Operator precedence (higher = binds tighter)
+const PREC = {
+  '??': 2,
+  '||': 3,
+  '&&': 4,
+  '==': 8, '!=': 8, '===': 8, '!==': 8,
+  '<': 9, '>': 9, '<=': 9, '>=': 9, 'instanceof': 9, 'in': 9,
+  '+': 11, '-': 11,
+  '*': 12, '/': 12, '%': 12,
+};
 
-    case 'unary': {
-      const val = evaluate(node.arg, scope);
-      return node.op === '-' ? -val : +val;
-    }
+const KEYWORDS = new Set([
+  'true', 'false', 'null', 'undefined', 'typeof', 'instanceof', 'in',
+  'new', 'void'
+]);
 
-    case 'not':
-      return !evaluate(node.arg, scope);
+// ---------------------------------------------------------------------------
+// Tokenizer
+// ---------------------------------------------------------------------------
+function tokenize(expr) {
+  const tokens = [];
+  let i = 0;
+  const len = expr.length;
 
-    case 'typeof': {
-      try {
-        return typeof evaluate(node.arg, scope);
-      } catch {
-        return 'undefined';
-      }
-    }
+  while (i < len) {
+    const ch = expr[i];
 
-    case 'ternary': {
-      const cond = evaluate(node.cond, scope);
-      return cond ? evaluate(node.truthy, scope) : evaluate(node.falsy, scope);
+    // Whitespace
+    if (ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r') { i++; continue; }
+
+    // Numbers
+    if ((ch >= '0' && ch <= '9') || (ch === '.' && i + 1 < len && expr[i + 1] >= '0' && expr[i + 1] <= '9')) {
+      let num = '';
+      if (ch === '0' && i + 1 < len && (expr[i + 1] === 'x' || expr[i + 1] === 'X')) {
+        num = '0x'; i += 2;
+        while (i < len && /[0-9a-fA-F]/.test(expr[i])) num += expr[i++];
+      } else {
+        while (i < len && ((expr[i] >= '0' && expr[i] <= '9') || expr[i] === '.')) num += expr[i++];
+        if (i < len && (expr[i] === 'e' || expr[i] === 'E')) {
+          num += expr[i++];
+          if (i < len && (expr[i] === '+' || expr[i] === '-')) num += expr[i++];
+          while (i < len && expr[i] >= '0' && expr[i] <= '9') num += expr[i++];
+        }
+      }
+      tokens.push({ t: T.NUM, v: Number(num) });
+      continue;
     }
 
-    case 'array': {
-      const arr = [];
-      for (const e of node.elements) {
-        if (e.type === 'spread') {
-          const iterable = evaluate(e.arg, scope);
-          if (iterable != null && typeof iterable[Symbol.iterator] === 'function') {
-            for (const v of iterable) arr.push(v);
-          }
+    // Strings
+    if (ch === "'" || ch === '"') {
+      const quote = ch;
+      let str = '';
+      i++;
+      while (i < len && expr[i] !== quote) {
+        if (expr[i] === '\\' && i + 1 < len) {
+          const esc = expr[++i];
+          if (esc === 'n') str += '\n';
+          else if (esc === 't') str += '\t';
+          else if (esc === 'r') str += '\r';
+          else if (esc === '\\') str += '\\';
+          else if (esc === quote) str += quote;
+          else str += esc;
         } else {
-          arr.push(evaluate(e, scope));
+          str += expr[i];
         }
+        i++;
       }
-      return arr;
+      i++; // closing quote
+      tokens.push({ t: T.STR, v: str });
+      continue;
     }
 
-    case 'object': {
-      const obj = {};
-      for (const prop of node.properties) {
-        if (prop.spread) {
-          const source = evaluate(prop.value, scope);
-          if (source != null && typeof source === 'object') {
-            Object.assign(obj, source);
+    // Template literals
+    if (ch === '`') {
+      const parts = []; // alternating: string, expr, string, expr, ...
+      let str = '';
+      i++;
+      while (i < len && expr[i] !== '`') {
+        if (expr[i] === '$' && i + 1 < len && expr[i + 1] === '{') {
+          parts.push(str);
+          str = '';
+          i += 2;
+          let depth = 1;
+          let inner = '';
+          while (i < len && depth > 0) {
+            if (expr[i] === '{') depth++;
+            else if (expr[i] === '}') { depth--; if (depth === 0) break; }
+            inner += expr[i++];
           }
+          i++; // closing }
+          parts.push({ expr: inner });
         } else {
-          obj[prop.key] = evaluate(prop.value, scope);
+          if (expr[i] === '\\' && i + 1 < len) { str += expr[++i]; }
+          else str += expr[i];
+          i++;
         }
       }
-      return obj;
+      i++; // closing backtick
+      parts.push(str);
+      tokens.push({ t: T.TMPL, v: parts });
+      continue;
     }
 
-    case 'arrow': {
-      const paramNames = node.params;
-      const bodyNode = node.body;
-      const closedScope = scope;
-      return function(...args) {
-        const arrowScope = {};
-        paramNames.forEach((name, i) => { arrowScope[name] = args[i]; });
-        return evaluate(bodyNode, [arrowScope, ...closedScope]);
-      };
+    // Identifiers & keywords
+    if ((ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z') || ch === '_' || ch === '$') {
+      let ident = '';
+      while (i < len && /[\w$]/.test(expr[i])) ident += expr[i++];
+      tokens.push({ t: T.IDENT, v: ident });
+      continue;
     }
 
-    default:
-      return undefined;
-  }
-}
-
-/**
- * Evaluate a list of argument AST nodes, flattening any spread elements.
- */
-function _evalArgs(argNodes, scope) {
-  const result = [];
-  for (const a of argNodes) {
-    if (a.type === 'spread') {
-      const iterable = evaluate(a.arg, scope);
-      if (iterable != null && typeof iterable[Symbol.iterator] === 'function') {
-        for (const v of iterable) result.push(v);
+    // Multi-char operators
+    const two = expr.slice(i, i + 3);
+    if (two === '===' || two === '!==' || two === '?.') {
+      if (two === '?.') {
+        tokens.push({ t: T.OP, v: '?.' });
+        i += 2;
+      } else {
+        tokens.push({ t: T.OP, v: two });
+        i += 3;
       }
-    } else {
-      result.push(evaluate(a, scope));
+      continue;
+    }
+    const pair = expr.slice(i, i + 2);
+    if (pair === '==' || pair === '!=' || pair === '<=' || pair === '>=' ||
+        pair === '&&' || pair === '||' || pair === '??' || pair === '?.' ||
+        pair === '=>') {
+      tokens.push({ t: T.OP, v: pair });
+      i += 2;
+      continue;
     }
-  }
-  return result;
-}
 
-/**
- * Resolve and execute a function call safely.
- */
-function _resolveCall(node, scope) {
-  const callee = node.callee;
-  const args = _evalArgs(node.args, scope);
+    // Single char operators and punctuation
+    if ('+-*/%'.includes(ch)) {
+      tokens.push({ t: T.OP, v: ch });
+      i++; continue;
+    }
+    if ('<>=!'.includes(ch)) {
+      tokens.push({ t: T.OP, v: ch });
+      i++; continue;
+    }
+    // Spread operator: ...
+    if (ch === '.' && i + 2 < len && expr[i + 1] === '.' && expr[i + 2] === '.') {
+      tokens.push({ t: T.OP, v: '...' });
+      i += 3; continue;
+    }
+    if ('()[]{},.?:'.includes(ch)) {
+      tokens.push({ t: T.PUNC, v: ch });
+      i++; continue;
+    }
 
-  // Method call: obj.method() — bind `this` to obj
-  if (callee.type === 'member' || callee.type === 'optional_member') {
-    const obj = evaluate(callee.obj, scope);
-    if (obj == null) return undefined;
-    const prop = callee.computed ? evaluate(callee.prop, scope) : callee.prop;
-    if (!_isSafeAccess(obj, prop)) return undefined;
-    const fn = obj[prop];
-    if (typeof fn !== 'function') return undefined;
-    return fn.apply(obj, args);
+    // Unknown — skip
+    i++;
   }
 
-  // Direct call: fn(args)
-  const fn = evaluate(callee, scope);
-  if (typeof fn !== 'function') return undefined;
-  return fn(...args);
+  tokens.push({ t: T.EOF, v: null });
+  return tokens;
 }
 
-/**
- * Evaluate binary expression.
- */
-function _evalBinary(node, scope) {
-  // Short-circuit for logical ops
-  if (node.op === '&&') {
-    const left = evaluate(node.left, scope);
-    return left ? evaluate(node.right, scope) : left;
-  }
-  if (node.op === '||') {
-    const left = evaluate(node.left, scope);
-    return left ? left : evaluate(node.right, scope);
-  }
-  if (node.op === '??') {
-    const left = evaluate(node.left, scope);
-    return left != null ? left : evaluate(node.right, scope);
+// ---------------------------------------------------------------------------
+// Parser — Pratt (precedence climbing)
+// ---------------------------------------------------------------------------
+class Parser {
+  constructor(tokens, scope) {
+    this.tokens = tokens;
+    this.pos = 0;
+    this.scope = scope;
   }
 
-  const left = evaluate(node.left, scope);
-  const right = evaluate(node.right, scope);
+  peek() { return this.tokens[this.pos]; }
+  next() { return this.tokens[this.pos++]; }
 
-  switch (node.op) {
-    case '+': return left + right;
-    case '-': return left - right;
-    case '*': return left * right;
-    case '/': return left / right;
-    case '%': return left % right;
-    case '==': return left == right;
-    case '!=': return left != right;
-    case '===': return left === right;
-    case '!==': return left !== right;
-    case '<': return left < right;
-    case '>': return left > right;
-    case '<=': return left <= right;
-    case '>=': return left >= right;
-    case 'instanceof': return left instanceof right;
-    case 'in': return left in right;
-    default: return undefined;
+  expect(type, val) {
+    const t = this.next();
+    if (t.t !== type || (val !== undefined && t.v !== val)) {
+      throw new Error(`Expected ${val || type} but got ${t.v}`);
+    }
+    return t;
   }
-}
 
+  match(type, val) {
+    const t = this.peek();
+    if (t.t === type && (val === undefined || t.v === val)) {
+      return this.next();
+    }
+    return null;
+  }
 
-// ---------------------------------------------------------------------------
-// Public API
-// ---------------------------------------------------------------------------
-
-/**
- * Safely evaluate a JS expression string against scope layers.
- *
- * @param {string} expr — expression string
- * @param {object[]} scope — array of scope objects, checked in order
- *   Typical: [loopVars, state, { props, refs, $ }]
- * @returns {*} — evaluation result, or undefined on error
- */
+  // Main entry
+  parse() {
+    const result = this.parseExpression(0);
+    return result;
+  }
 
-// AST cache (LRU) — avoids re-tokenizing and re-parsing the same expression.
-// Uses Map insertion-order: on hit, delete + re-set moves entry to the end.
-// Eviction removes the least-recently-used (first) entry when at capacity.
-const _astCache = new Map();
-const _AST_CACHE_MAX = 512;
+  // Precedence climbing
+  parseExpression(minPrec) {
+    let left = this.parseUnary();
 
-function safeEval(expr, scope) {
-  try {
-    const trimmed = expr.trim();
-    if (!trimmed) return undefined;
+    while (true) {
+      const tok = this.peek();
 
-    // Fast path for simple identifiers: "count", "name", "visible"
-    // Avoids full tokenize→parse→evaluate overhead for the most common case.
-    if (/^[a-zA-Z_$][\w$]*$/.test(trimmed)) {
-      for (const layer of scope) {
-        if (layer && typeof layer === 'object' && trimmed in layer) {
-          return layer[trimmed];
+      // Ternary
+      if (tok.t === T.PUNC && tok.v === '?') {
+        // Distinguish ternary ? from optional chaining ?.
+        if (this.tokens[this.pos + 1]?.v !== '.') {
+          if (1 <= minPrec) break; // ternary has very low precedence
+          this.next(); // consume ?
+          const truthy = this.parseExpression(0);
+          this.expect(T.PUNC, ':');
+          const falsy = this.parseExpression(0);
+          left = { type: 'ternary', cond: left, truthy, falsy };
+          continue;
         }
       }
-      // Fall through to full parser for built-in globals (Math, JSON, etc.)
-    }
 
-    // Check AST cache (LRU: move to end on hit)
-    let ast = _astCache.get(trimmed);
-    if (ast) {
-      _astCache.delete(trimmed);
-      _astCache.set(trimmed, ast);
-    } else {
-      const tokens = tokenize(trimmed);
-      const parser = new Parser(tokens, scope);
-      ast = parser.parse();
+      // Binary operators
+      if (tok.t === T.OP && tok.v in PREC) {
+        const prec = PREC[tok.v];
+        if (prec <= minPrec) break;
+        this.next();
+        const right = this.parseExpression(prec);
+        left = { type: 'binary', op: tok.v, left, right };
+        continue;
+      }
 
-      // Evict oldest entries when cache is full
-      if (_astCache.size >= _AST_CACHE_MAX) {
-        const first = _astCache.keys().next().value;
-        _astCache.delete(first);
+      // instanceof and in as binary operators
+      if (tok.t === T.IDENT && (tok.v === 'instanceof' || tok.v === 'in') && PREC[tok.v] > minPrec) {
+        const prec = PREC[tok.v];
+        this.next();
+        const right = this.parseExpression(prec);
+        left = { type: 'binary', op: tok.v, left, right };
+        continue;
       }
-      _astCache.set(trimmed, ast);
-    }
 
-    return evaluate(ast, scope);
-  } catch (err) {
-    if (typeof console !== 'undefined' && console.debug) {
-      console.debug(`[zQuery EXPR_EVAL] Failed to evaluate: "${expr}"`, err.message);
+      break;
     }
-    return undefined;
+
+    return left;
   }
-}
-
-// --- src/diff.js -------------------------------------------------
-/**
- * zQuery Diff — Lightweight DOM morphing engine
- *
- * Patches an existing DOM tree to match new HTML without destroying nodes
- * that haven't changed. Preserves focus, scroll positions, third-party
- * widget state, video playback, and other live DOM state.
- *
- * Approach: walk old and new trees in parallel, reconcile node by node.
- * Keyed elements (via `z-key`) get matched across position changes.
- *
- * Performance advantages over virtual DOM (React/Angular):
- *   - No virtual tree allocation or diffing — works directly on real DOM
- *   - Skips unchanged subtrees via fast isEqualNode() check
- *   - z-skip attribute to opt out of diffing entire subtrees
- *   - Reuses a single template element for HTML parsing (zero GC pressure)
- *   - Keyed reconciliation uses LIS (Longest Increasing Subsequence) to
- *     minimize DOM moves — same algorithm as Vue 3 / ivi
- *   - Minimal attribute diffing with early bail-out
- */
 
-// ---------------------------------------------------------------------------
-// Reusable template element — avoids per-call allocation
-// ---------------------------------------------------------------------------
-let _tpl = null;
+  parseUnary() {
+    const tok = this.peek();
 
-function _getTemplate() {
-  if (!_tpl) _tpl = document.createElement('template');
-  return _tpl;
-}
+    // typeof
+    if (tok.t === T.IDENT && tok.v === 'typeof') {
+      this.next();
+      const arg = this.parseUnary();
+      return { type: 'typeof', arg };
+    }
 
-// ---------------------------------------------------------------------------
-// morph(existingRoot, newHTML) — patch existing DOM to match newHTML
-// ---------------------------------------------------------------------------
+    // void
+    if (tok.t === T.IDENT && tok.v === 'void') {
+      this.next();
+      this.parseUnary(); // evaluate but discard
+      return { type: 'literal', value: undefined };
+    }
 
-/**
- * Morph an existing DOM element's children to match new HTML.
- * Only touches nodes that actually differ.
- *
- * @param {Element} rootEl — The live DOM container to patch
- * @param {string} newHTML — The desired HTML string
- */
-function morph(rootEl, newHTML) {
-  const start = typeof window !== 'undefined' && window.__zqMorphHook ? performance.now() : 0;
-  const tpl = _getTemplate();
-  tpl.innerHTML = newHTML;
-  const newRoot = tpl.content;
+    // !expr
+    if (tok.t === T.OP && tok.v === '!') {
+      this.next();
+      const arg = this.parseUnary();
+      return { type: 'not', arg };
+    }
 
-  // Move children into a wrapper for consistent handling.
-  // We move (not clone) from the template — cheaper than cloning.
-  const tempDiv = document.createElement('div');
-  while (newRoot.firstChild) tempDiv.appendChild(newRoot.firstChild);
+    // -expr, +expr
+    if (tok.t === T.OP && (tok.v === '-' || tok.v === '+')) {
+      this.next();
+      const arg = this.parseUnary();
+      return { type: 'unary', op: tok.v, arg };
+    }
 
-  _morphChildren(rootEl, tempDiv);
+    return this.parsePostfix();
+  }
 
-  if (start) window.__zqMorphHook(rootEl, performance.now() - start);
-}
+  parsePostfix() {
+    let left = this.parsePrimary();
 
-/**
- * Morph a single element in place — diffs attributes and children
- * without replacing the node reference. Useful for replaceWith-style
- * updates where you want to keep the element identity when the tag
- * name matches.
- *
- * If the new HTML produces a different tag, falls back to native replace.
- *
- * @param {Element} oldEl — The live DOM element to patch
- * @param {string} newHTML — HTML string for the replacement element
- * @returns {Element} — The resulting element (same ref if morphed, new if replaced)
- */
-function morphElement(oldEl, newHTML) {
-  const start = typeof window !== 'undefined' && window.__zqMorphHook ? performance.now() : 0;
-  const tpl = _getTemplate();
-  tpl.innerHTML = newHTML;
-  const newEl = tpl.content.firstElementChild;
-  if (!newEl) return oldEl;
+    while (true) {
+      const tok = this.peek();
 
-  // Same tag — morph in place (preserves identity, event listeners, refs)
-  if (oldEl.nodeName === newEl.nodeName) {
-    _morphAttributes(oldEl, newEl);
-    _morphChildren(oldEl, newEl);
-    if (start) window.__zqMorphHook(oldEl, performance.now() - start);
-    return oldEl;
-  }
+      // Property access: a.b
+      if (tok.t === T.PUNC && tok.v === '.') {
+        this.next();
+        const prop = this.next();
+        left = { type: 'member', obj: left, prop: prop.v, computed: false };
+        // Check for method call: a.b()
+        if (this.peek().t === T.PUNC && this.peek().v === '(') {
+          left = this._parseCall(left);
+        }
+        continue;
+      }
 
-  // Different tag — must replace (can't morph <div> into <span>)
-  const clone = newEl.cloneNode(true);
-  oldEl.parentNode.replaceChild(clone, oldEl);
-  if (start) window.__zqMorphHook(clone, performance.now() - start);
-  return clone;
-}
+      // Optional chaining: a?.b, a?.[b], a?.()
+      if (tok.t === T.OP && tok.v === '?.') {
+        this.next();
+        const next = this.peek();
+        if (next.t === T.PUNC && next.v === '[') {
+          // a?.[expr]
+          this.next();
+          const prop = this.parseExpression(0);
+          this.expect(T.PUNC, ']');
+          left = { type: 'optional_member', obj: left, prop, computed: true };
+        } else if (next.t === T.PUNC && next.v === '(') {
+          // a?.()
+          left = { type: 'optional_call', callee: left, args: this._parseArgs() };
+        } else {
+          // a?.b
+          const prop = this.next();
+          left = { type: 'optional_member', obj: left, prop: prop.v, computed: false };
+          if (this.peek().t === T.PUNC && this.peek().v === '(') {
+            left = this._parseCall(left);
+          }
+        }
+        continue;
+      }
 
-/**
- * Reconcile children of `oldParent` to match `newParent`.
- *
- * @param {Element} oldParent — live DOM parent
- * @param {Element} newParent — desired state parent
- */
-function _morphChildren(oldParent, newParent) {
-  // Snapshot live NodeLists into arrays — childNodes is live and
-  // mutates during insertBefore/removeChild. Using a for loop to push
-  // avoids spread operator overhead for large child lists.
-  const oldCN = oldParent.childNodes;
-  const newCN = newParent.childNodes;
-  const oldLen = oldCN.length;
-  const newLen = newCN.length;
-  const oldChildren = new Array(oldLen);
-  const newChildren = new Array(newLen);
-  for (let i = 0; i < oldLen; i++) oldChildren[i] = oldCN[i];
-  for (let i = 0; i < newLen; i++) newChildren[i] = newCN[i];
+      // Computed access: a[b]
+      if (tok.t === T.PUNC && tok.v === '[') {
+        this.next();
+        const prop = this.parseExpression(0);
+        this.expect(T.PUNC, ']');
+        left = { type: 'member', obj: left, prop, computed: true };
+        // Check for method call: a[b]()
+        if (this.peek().t === T.PUNC && this.peek().v === '(') {
+          left = this._parseCall(left);
+        }
+        continue;
+      }
+
+      // Function call: fn()
+      if (tok.t === T.PUNC && tok.v === '(') {
+        left = this._parseCall(left);
+        continue;
+      }
 
-  // Scan for keyed elements — only build maps if keys exist
-  let hasKeys = false;
-  let oldKeyMap, newKeyMap;
+      break;
+    }
 
-  for (let i = 0; i < oldLen; i++) {
-    if (_getKey(oldChildren[i]) != null) { hasKeys = true; break; }
+    return left;
   }
-  if (!hasKeys) {
-    for (let i = 0; i < newLen; i++) {
-      if (_getKey(newChildren[i]) != null) { hasKeys = true; break; }
-    }
+
+  _parseCall(callee) {
+    const args = this._parseArgs();
+    return { type: 'call', callee, args };
   }
 
-  if (hasKeys) {
-    oldKeyMap = new Map();
-    newKeyMap = new Map();
-    for (let i = 0; i < oldLen; i++) {
-      const key = _getKey(oldChildren[i]);
-      if (key != null) oldKeyMap.set(key, i);
-    }
-    for (let i = 0; i < newLen; i++) {
-      const key = _getKey(newChildren[i]);
-      if (key != null) newKeyMap.set(key, i);
+  _parseArgs() {
+    this.expect(T.PUNC, '(');
+    const args = [];
+    while (!(this.peek().t === T.PUNC && this.peek().v === ')') && this.peek().t !== T.EOF) {
+      if (this.peek().t === T.OP && this.peek().v === '...') {
+        this.next();
+        args.push({ type: 'spread', arg: this.parseExpression(0) });
+      } else {
+        args.push(this.parseExpression(0));
+      }
+      if (this.peek().t === T.PUNC && this.peek().v === ',') this.next();
     }
-    _morphChildrenKeyed(oldParent, oldChildren, newChildren, oldKeyMap, newKeyMap);
-  } else {
-    _morphChildrenUnkeyed(oldParent, oldChildren, newChildren);
+    this.expect(T.PUNC, ')');
+    return args;
   }
-}
 
-/**
- * Unkeyed reconciliation — positional matching.
- */
-function _morphChildrenUnkeyed(oldParent, oldChildren, newChildren) {
-  const oldLen = oldChildren.length;
-  const newLen = newChildren.length;
-  const minLen = oldLen < newLen ? oldLen : newLen;
+  parsePrimary() {
+    const tok = this.peek();
 
-  // Morph overlapping range
-  for (let i = 0; i < minLen; i++) {
-    _morphNode(oldParent, oldChildren[i], newChildren[i]);
-  }
+    // Number literal
+    if (tok.t === T.NUM) {
+      this.next();
+      return { type: 'literal', value: tok.v };
+    }
 
-  // Append new nodes
-  if (newLen > oldLen) {
-    for (let i = oldLen; i < newLen; i++) {
-      oldParent.appendChild(newChildren[i].cloneNode(true));
+    // String literal
+    if (tok.t === T.STR) {
+      this.next();
+      return { type: 'literal', value: tok.v };
     }
-  }
 
-  // Remove excess old nodes (iterate backwards to avoid index shifting)
-  if (oldLen > newLen) {
-    for (let i = oldLen - 1; i >= newLen; i--) {
-      oldParent.removeChild(oldChildren[i]);
+    // Template literal
+    if (tok.t === T.TMPL) {
+      this.next();
+      return { type: 'template', parts: tok.v };
     }
-  }
-}
 
-/**
- * Keyed reconciliation — match by z-key, reorder with minimal moves
- * using Longest Increasing Subsequence (LIS) to find the maximum set
- * of nodes that are already in the correct relative order, then only
- * move the remaining nodes.
- */
-function _morphChildrenKeyed(oldParent, oldChildren, newChildren, oldKeyMap, newKeyMap) {
-  const consumed = new Set();
-  const newLen = newChildren.length;
-  const matched = new Array(newLen);
+    // Arrow function with parens: () =>, (a) =>, (a, b) =>
+    // or regular grouping: (expr)
+    if (tok.t === T.PUNC && tok.v === '(') {
+      const savedPos = this.pos;
+      this.next(); // consume (
+      const params = [];
+      let couldBeArrow = true;
 
-  // Step 1: Match new children to old children by key
-  for (let i = 0; i < newLen; i++) {
-    const key = _getKey(newChildren[i]);
-    if (key != null && oldKeyMap.has(key)) {
-      const oldIdx = oldKeyMap.get(key);
-      matched[i] = oldChildren[oldIdx];
-      consumed.add(oldIdx);
-    } else {
-      matched[i] = null;
-    }
-  }
+      if (this.peek().t === T.PUNC && this.peek().v === ')') {
+        // () => ... — no params
+      } else {
+        while (couldBeArrow) {
+          const p = this.peek();
+          if (p.t === T.IDENT && !KEYWORDS.has(p.v)) {
+            params.push(this.next().v);
+            if (this.peek().t === T.PUNC && this.peek().v === ',') {
+              this.next();
+            } else {
+              break;
+            }
+          } else {
+            couldBeArrow = false;
+          }
+        }
+      }
 
-  // Step 2: Remove old keyed nodes not in the new tree
-  for (let i = oldChildren.length - 1; i >= 0; i--) {
-    if (!consumed.has(i)) {
-      const key = _getKey(oldChildren[i]);
-      if (key != null && !newKeyMap.has(key)) {
-        oldParent.removeChild(oldChildren[i]);
+      if (couldBeArrow && this.peek().t === T.PUNC && this.peek().v === ')') {
+        this.next(); // consume )
+        if (this.peek().t === T.OP && this.peek().v === '=>') {
+          this.next(); // consume =>
+          const body = this.parseExpression(0);
+          return { type: 'arrow', params, body };
+        }
       }
+
+      // Not an arrow — restore and parse as grouping
+      this.pos = savedPos;
+      this.next(); // consume (
+      const expr = this.parseExpression(0);
+      this.expect(T.PUNC, ')');
+      return expr;
     }
-  }
 
-  // Step 3: Build index array for LIS of matched old indices.
-  // This finds the largest set of keyed nodes already in order,
-  // so we only need to move the rest — O(n log n) instead of O(n²).
-  const oldIndices = [];      // Maps new-position → old-position (or -1)
-  for (let i = 0; i < newLen; i++) {
-    if (matched[i]) {
-      const key = _getKey(newChildren[i]);
-      oldIndices.push(oldKeyMap.get(key));
-    } else {
-      oldIndices.push(-1);
+    // Array literal
+    if (tok.t === T.PUNC && tok.v === '[') {
+      this.next();
+      const elements = [];
+      while (!(this.peek().t === T.PUNC && this.peek().v === ']') && this.peek().t !== T.EOF) {
+        if (this.peek().t === T.OP && this.peek().v === '...') {
+          this.next();
+          elements.push({ type: 'spread', arg: this.parseExpression(0) });
+        } else {
+          elements.push(this.parseExpression(0));
+        }
+        if (this.peek().t === T.PUNC && this.peek().v === ',') this.next();
+      }
+      this.expect(T.PUNC, ']');
+      return { type: 'array', elements };
     }
-  }
 
-  const lisSet = _lis(oldIndices);
+    // Object literal
+    if (tok.t === T.PUNC && tok.v === '{') {
+      this.next();
+      const properties = [];
+      while (!(this.peek().t === T.PUNC && this.peek().v === '}') && this.peek().t !== T.EOF) {
+        // Spread in object: { ...obj }
+        if (this.peek().t === T.OP && this.peek().v === '...') {
+          this.next();
+          properties.push({ spread: true, value: this.parseExpression(0) });
+          if (this.peek().t === T.PUNC && this.peek().v === ',') this.next();
+          continue;
+        }
 
-  // Step 4: Insert / reorder / morph — walk new children forward,
-  // using LIS to decide which nodes stay in place.
-  let cursor = oldParent.firstChild;
-  const unkeyedOld = [];
-  for (let i = 0; i < oldChildren.length; i++) {
-    if (!consumed.has(i) && _getKey(oldChildren[i]) == null) {
-      unkeyedOld.push(oldChildren[i]);
+        const keyTok = this.next();
+        let key;
+        if (keyTok.t === T.IDENT || keyTok.t === T.STR) key = keyTok.v;
+        else if (keyTok.t === T.NUM) key = String(keyTok.v);
+        else throw new Error('Invalid object key: ' + keyTok.v);
+
+        // Shorthand property: { foo } means { foo: foo }
+        if (this.peek().t === T.PUNC && (this.peek().v === ',' || this.peek().v === '}')) {
+          properties.push({ key, value: { type: 'ident', name: key } });
+        } else {
+          this.expect(T.PUNC, ':');
+          properties.push({ key, value: this.parseExpression(0) });
+        }
+        if (this.peek().t === T.PUNC && this.peek().v === ',') this.next();
+      }
+      this.expect(T.PUNC, '}');
+      return { type: 'object', properties };
     }
-  }
-  let unkeyedIdx = 0;
 
-  for (let i = 0; i < newLen; i++) {
-    const newNode = newChildren[i];
-    const newKey = _getKey(newNode);
-    let oldNode = matched[i];
+    // Identifiers & keywords
+    if (tok.t === T.IDENT) {
+      this.next();
 
-    if (!oldNode && newKey == null) {
-      oldNode = unkeyedOld[unkeyedIdx++] || null;
-    }
+      // Keywords
+      if (tok.v === 'true') return { type: 'literal', value: true };
+      if (tok.v === 'false') return { type: 'literal', value: false };
+      if (tok.v === 'null') return { type: 'literal', value: null };
+      if (tok.v === 'undefined') return { type: 'literal', value: undefined };
 
-    if (oldNode) {
-      // If this node is NOT part of the LIS, it needs to be moved
-      if (!lisSet.has(i)) {
-        oldParent.insertBefore(oldNode, cursor);
-      }
-      // Capture next sibling BEFORE _morphNode — if _morphNode calls
-      // replaceChild, oldNode is removed and nextSibling becomes stale.
-      const nextSib = oldNode.nextSibling;
-      _morphNode(oldParent, oldNode, newNode);
-      cursor = nextSib;
-    } else {
-      // Insert new node
-      const clone = newNode.cloneNode(true);
-      if (cursor) {
-        oldParent.insertBefore(clone, cursor);
-      } else {
-        oldParent.appendChild(clone);
+      // new keyword
+      if (tok.v === 'new') {
+        let classExpr = this.parsePrimary();
+        // Handle member access (e.g. ns.MyClass) without consuming call args
+        while (this.peek().t === T.PUNC && this.peek().v === '.') {
+          this.next();
+          const prop = this.next();
+          classExpr = { type: 'member', obj: classExpr, prop: prop.v, computed: false };
+        }
+        let args = [];
+        if (this.peek().t === T.PUNC && this.peek().v === '(') {
+          args = this._parseArgs();
+        }
+        return { type: 'new', callee: classExpr, args };
       }
-    }
-  }
-
-  // Remove remaining unkeyed old nodes
-  while (unkeyedIdx < unkeyedOld.length) {
-    const leftover = unkeyedOld[unkeyedIdx++];
-    if (leftover.parentNode === oldParent) {
-      oldParent.removeChild(leftover);
-    }
-  }
 
-  // Remove any remaining keyed old nodes that weren't consumed
-  for (let i = 0; i < oldChildren.length; i++) {
-    if (!consumed.has(i)) {
-      const node = oldChildren[i];
-      if (node.parentNode === oldParent && _getKey(node) != null && !newKeyMap.has(_getKey(node))) {
-        oldParent.removeChild(node);
+      // Arrow function: x => expr
+      if (this.peek().t === T.OP && this.peek().v === '=>') {
+        this.next(); // consume =>
+        const body = this.parseExpression(0);
+        return { type: 'arrow', params: [tok.v], body };
       }
+
+      return { type: 'ident', name: tok.v };
     }
+
+    // Fallback — return undefined for unparseable
+    this.next();
+    return { type: 'literal', value: undefined };
   }
 }
 
+// ---------------------------------------------------------------------------
+// Evaluator — walks the AST, resolves against scope
+// ---------------------------------------------------------------------------
+
+/** Safe property access whitelist for built-in prototypes */
+const SAFE_ARRAY_METHODS = new Set([
+  'length', 'map', 'filter', 'find', 'findIndex', 'some', 'every',
+  'reduce', 'reduceRight', 'forEach', 'includes', 'indexOf', 'lastIndexOf',
+  'join', 'slice', 'concat', 'flat', 'flatMap', 'reverse', 'sort',
+  'fill', 'keys', 'values', 'entries', 'at', 'toString',
+]);
+
+const SAFE_STRING_METHODS = new Set([
+  'length', 'charAt', 'charCodeAt', 'includes', 'indexOf', 'lastIndexOf',
+  'slice', 'substring', 'trim', 'trimStart', 'trimEnd', 'toLowerCase',
+  'toUpperCase', 'split', 'replace', 'replaceAll', 'match', 'search',
+  'startsWith', 'endsWith', 'padStart', 'padEnd', 'repeat', 'at',
+  'toString', 'valueOf',
+]);
+
+const SAFE_NUMBER_METHODS = new Set([
+  'toFixed', 'toPrecision', 'toString', 'valueOf',
+]);
+
+const SAFE_OBJECT_METHODS = new Set([
+  'hasOwnProperty', 'toString', 'valueOf',
+]);
+
+const SAFE_MATH_PROPS = new Set([
+  'PI', 'E', 'LN2', 'LN10', 'LOG2E', 'LOG10E', 'SQRT2', 'SQRT1_2',
+  'abs', 'ceil', 'floor', 'round', 'trunc', 'max', 'min', 'pow',
+  'sqrt', 'sign', 'random', 'log', 'log2', 'log10',
+]);
+
+const SAFE_JSON_PROPS = new Set(['parse', 'stringify']);
+
 /**
- * Compute the Longest Increasing Subsequence of an index array.
- * Returns a Set of positions (in the input) that form the LIS.
- * Entries with value -1 (unmatched) are excluded.
- *
- * O(n log n) — same algorithm used by Vue 3 and ivi.
- *
- * @param {number[]} arr — array of old-tree indices (-1 = unmatched)
- * @returns {Set<number>} — positions in arr belonging to the LIS
+ * Check if property access is safe
  */
-function _lis(arr) {
-  const len = arr.length;
-  const result = new Set();
-  if (len === 0) return result;
+function _isSafeAccess(obj, prop) {
+  // Never allow access to dangerous properties
+  const BLOCKED = new Set([
+    'constructor', '__proto__', 'prototype', '__defineGetter__',
+    '__defineSetter__', '__lookupGetter__', '__lookupSetter__',
+    'call', 'apply', 'bind',
+  ]);
+  if (typeof prop === 'string' && BLOCKED.has(prop)) return false;
 
-  // tails[i] = index in arr of the smallest tail element for LIS of length i+1
-  const tails = [];
-  // prev[i] = predecessor index in arr for the LIS ending at arr[i]
-  const prev = new Array(len).fill(-1);
-  const tailIndices = []; // parallel to tails: actual positions
+  // Always allow plain object/function property access and array index access
+  if (obj !== null && obj !== undefined && (typeof obj === 'object' || typeof obj === 'function')) return true;
+  if (typeof obj === 'string') return SAFE_STRING_METHODS.has(prop);
+  if (typeof obj === 'number') return SAFE_NUMBER_METHODS.has(prop);
+  return false;
+}
 
-  for (let i = 0; i < len; i++) {
-    if (arr[i] === -1) continue;
-    const val = arr[i];
+function evaluate(node, scope) {
+  if (!node) return undefined;
 
-    // Binary search for insertion point in tails
-    let lo = 0, hi = tails.length;
-    while (lo < hi) {
-      const mid = (lo + hi) >> 1;
-      if (tails[mid] < val) lo = mid + 1;
-      else hi = mid;
+  switch (node.type) {
+    case 'literal':
+      return node.value;
+
+    case 'ident': {
+      const name = node.name;
+      // Check scope layers in order
+      for (const layer of scope) {
+        if (layer && typeof layer === 'object' && name in layer) {
+          return layer[name];
+        }
+      }
+      // Built-in globals (safe ones only)
+      if (name === 'Math') return Math;
+      if (name === 'JSON') return JSON;
+      if (name === 'Date') return Date;
+      if (name === 'Array') return Array;
+      if (name === 'Object') return Object;
+      if (name === 'String') return String;
+      if (name === 'Number') return Number;
+      if (name === 'Boolean') return Boolean;
+      if (name === 'parseInt') return parseInt;
+      if (name === 'parseFloat') return parseFloat;
+      if (name === 'isNaN') return isNaN;
+      if (name === 'isFinite') return isFinite;
+      if (name === 'Infinity') return Infinity;
+      if (name === 'NaN') return NaN;
+      if (name === 'encodeURIComponent') return encodeURIComponent;
+      if (name === 'decodeURIComponent') return decodeURIComponent;
+      if (name === 'console') return console;
+      if (name === 'Map') return Map;
+      if (name === 'Set') return Set;
+      if (name === 'RegExp') return RegExp;
+      if (name === 'Error') return Error;
+      if (name === 'URL') return URL;
+      if (name === 'URLSearchParams') return URLSearchParams;
+      return undefined;
     }
 
-    tails[lo] = val;
-    tailIndices[lo] = i;
-    prev[i] = lo > 0 ? tailIndices[lo - 1] : -1;
-  }
+    case 'template': {
+      // Template literal with interpolation
+      let result = '';
+      for (const part of node.parts) {
+        if (typeof part === 'string') {
+          result += part;
+        } else if (part && part.expr) {
+          result += String(safeEval(part.expr, scope) ?? '');
+        }
+      }
+      return result;
+    }
 
-  // Reconstruct: walk backwards from the last element of LIS
-  let k = tailIndices[tails.length - 1];
-  for (let i = tails.length - 1; i >= 0; i--) {
-    result.add(k);
-    k = prev[k];
-  }
+    case 'member': {
+      const obj = evaluate(node.obj, scope);
+      if (obj == null) return undefined;
+      const prop = node.computed ? evaluate(node.prop, scope) : node.prop;
+      if (!_isSafeAccess(obj, prop)) return undefined;
+      return obj[prop];
+    }
 
-  return result;
-}
+    case 'optional_member': {
+      const obj = evaluate(node.obj, scope);
+      if (obj == null) return undefined;
+      const prop = node.computed ? evaluate(node.prop, scope) : node.prop;
+      if (!_isSafeAccess(obj, prop)) return undefined;
+      return obj[prop];
+    }
 
-/**
- * Morph a single node in place.
- */
-function _morphNode(parent, oldNode, newNode) {
-  // Text / comment nodes — just update content
-  if (oldNode.nodeType === 3 || oldNode.nodeType === 8) {
-    if (newNode.nodeType === oldNode.nodeType) {
-      if (oldNode.nodeValue !== newNode.nodeValue) {
-        oldNode.nodeValue = newNode.nodeValue;
+    case 'call': {
+      const result = _resolveCall(node, scope, false);
+      return result;
+    }
+
+    case 'optional_call': {
+      const calleeNode = node.callee;
+      const args = _evalArgs(node.args, scope);
+      // Method call: obj?.method() — bind `this` to obj
+      if (calleeNode.type === 'member' || calleeNode.type === 'optional_member') {
+        const obj = evaluate(calleeNode.obj, scope);
+        if (obj == null) return undefined;
+        const prop = calleeNode.computed ? evaluate(calleeNode.prop, scope) : calleeNode.prop;
+        if (!_isSafeAccess(obj, prop)) return undefined;
+        const fn = obj[prop];
+        if (typeof fn !== 'function') return undefined;
+        return fn.apply(obj, args);
       }
-      return;
+      const callee = evaluate(calleeNode, scope);
+      if (callee == null) return undefined;
+      if (typeof callee !== 'function') return undefined;
+      return callee(...args);
     }
-    // Different node types — replace
-    parent.replaceChild(newNode.cloneNode(true), oldNode);
-    return;
-  }
 
-  // Different node types or tag names — replace entirely
-  if (oldNode.nodeType !== newNode.nodeType ||
-      oldNode.nodeName !== newNode.nodeName) {
-    parent.replaceChild(newNode.cloneNode(true), oldNode);
-    return;
-  }
+    case 'new': {
+      const Ctor = evaluate(node.callee, scope);
+      if (typeof Ctor !== 'function') return undefined;
+      // Only allow safe constructors
+      if (Ctor === Date || Ctor === Array || Ctor === Map || Ctor === Set ||
+          Ctor === RegExp || Ctor === Error || Ctor === URL || Ctor === URLSearchParams) {
+        const args = _evalArgs(node.args, scope);
+        return new Ctor(...args);
+      }
+      return undefined;
+    }
 
-  // Both are elements — diff attributes then recurse children
-  if (oldNode.nodeType === 1) {
-    // z-skip: developer opt-out — skip diffing this subtree entirely.
-    // Useful for third-party widgets, canvas, video, or large static content.
-    if (oldNode.hasAttribute('z-skip')) return;
+    case 'binary':
+      return _evalBinary(node, scope);
 
-    // Fast bail-out: if the elements are identical, skip everything.
-    // isEqualNode() is a native C++ comparison — much faster than walking
-    // attributes + children in JS when trees haven't changed.
-    if (oldNode.isEqualNode(newNode)) return;
+    case 'unary': {
+      const val = evaluate(node.arg, scope);
+      return node.op === '-' ? -val : +val;
+    }
 
-    _morphAttributes(oldNode, newNode);
+    case 'not':
+      return !evaluate(node.arg, scope);
+
+    case 'typeof': {
+      try {
+        return typeof evaluate(node.arg, scope);
+      } catch {
+        return 'undefined';
+      }
+    }
 
-    // Special elements: don't recurse into their children
-    const tag = oldNode.nodeName;
-    if (tag === 'INPUT') {
-      _syncInputValue(oldNode, newNode);
-      return;
+    case 'ternary': {
+      const cond = evaluate(node.cond, scope);
+      return cond ? evaluate(node.truthy, scope) : evaluate(node.falsy, scope);
     }
-    if (tag === 'TEXTAREA') {
-      if (oldNode.value !== newNode.textContent) {
-        oldNode.value = newNode.textContent || '';
+
+    case 'array': {
+      const arr = [];
+      for (const e of node.elements) {
+        if (e.type === 'spread') {
+          const iterable = evaluate(e.arg, scope);
+          if (iterable != null && typeof iterable[Symbol.iterator] === 'function') {
+            for (const v of iterable) arr.push(v);
+          }
+        } else {
+          arr.push(evaluate(e, scope));
+        }
       }
-      return;
+      return arr;
     }
-    if (tag === 'SELECT') {
-      _morphChildren(oldNode, newNode);
-      if (oldNode.value !== newNode.value) {
-        oldNode.value = newNode.value;
+
+    case 'object': {
+      const obj = {};
+      for (const prop of node.properties) {
+        if (prop.spread) {
+          const source = evaluate(prop.value, scope);
+          if (source != null && typeof source === 'object') {
+            Object.assign(obj, source);
+          }
+        } else {
+          obj[prop.key] = evaluate(prop.value, scope);
+        }
       }
-      return;
+      return obj;
     }
 
-    // Generic element — recurse children
-    _morphChildren(oldNode, newNode);
+    case 'arrow': {
+      const paramNames = node.params;
+      const bodyNode = node.body;
+      const closedScope = scope;
+      return function(...args) {
+        const arrowScope = {};
+        paramNames.forEach((name, i) => { arrowScope[name] = args[i]; });
+        return evaluate(bodyNode, [arrowScope, ...closedScope]);
+      };
+    }
+
+    default:
+      return undefined;
   }
 }
 
 /**
- * Sync attributes from newEl onto oldEl.
- * Uses a single pass: build a set of new attribute names, iterate
- * old attrs for removals, then apply new attrs.
+ * Evaluate a list of argument AST nodes, flattening any spread elements.
  */
-function _morphAttributes(oldEl, newEl) {
-  const newAttrs = newEl.attributes;
-  const oldAttrs = oldEl.attributes;
-  const newLen = newAttrs.length;
-  const oldLen = oldAttrs.length;
-
-  // Fast path: if both have same number of attributes, check if they're identical
-  if (newLen === oldLen) {
-    let same = true;
-    for (let i = 0; i < newLen; i++) {
-      const na = newAttrs[i];
-      if (oldEl.getAttribute(na.name) !== na.value) { same = false; break; }
-    }
-    if (same) {
-      // Also verify no extra old attrs (names mismatch)
-      for (let i = 0; i < oldLen; i++) {
-        if (!newEl.hasAttribute(oldAttrs[i].name)) { same = false; break; }
+function _evalArgs(argNodes, scope) {
+  const result = [];
+  for (const a of argNodes) {
+    if (a.type === 'spread') {
+      const iterable = evaluate(a.arg, scope);
+      if (iterable != null && typeof iterable[Symbol.iterator] === 'function') {
+        for (const v of iterable) result.push(v);
       }
+    } else {
+      result.push(evaluate(a, scope));
     }
-    if (same) return;
   }
+  return result;
+}
 
-  // Build set of new attr names for O(1) lookup during removal pass
-  const newNames = new Set();
-  for (let i = 0; i < newLen; i++) {
-    const attr = newAttrs[i];
-    newNames.add(attr.name);
-    if (oldEl.getAttribute(attr.name) !== attr.value) {
-      oldEl.setAttribute(attr.name, attr.value);
-    }
-  }
+/**
+ * Resolve and execute a function call safely.
+ */
+function _resolveCall(node, scope) {
+  const callee = node.callee;
+  const args = _evalArgs(node.args, scope);
 
-  // Remove stale attributes — snapshot names first because oldAttrs
-  // is a live NamedNodeMap that mutates on removeAttribute().
-  const oldNames = new Array(oldLen);
-  for (let i = 0; i < oldLen; i++) oldNames[i] = oldAttrs[i].name;
-  for (let i = oldNames.length - 1; i >= 0; i--) {
-    if (!newNames.has(oldNames[i])) {
-      oldEl.removeAttribute(oldNames[i]);
-    }
+  // Method call: obj.method() — bind `this` to obj
+  if (callee.type === 'member' || callee.type === 'optional_member') {
+    const obj = evaluate(callee.obj, scope);
+    if (obj == null) return undefined;
+    const prop = callee.computed ? evaluate(callee.prop, scope) : callee.prop;
+    if (!_isSafeAccess(obj, prop)) return undefined;
+    const fn = obj[prop];
+    if (typeof fn !== 'function') return undefined;
+    return fn.apply(obj, args);
   }
+
+  // Direct call: fn(args)
+  const fn = evaluate(callee, scope);
+  if (typeof fn !== 'function') return undefined;
+  return fn(...args);
 }
 
 /**
- * Sync input element value, checked, disabled states.
+ * Evaluate binary expression.
  */
-function _syncInputValue(oldEl, newEl) {
-  const type = (oldEl.type || '').toLowerCase();
-
-  if (type === 'checkbox' || type === 'radio') {
-    if (oldEl.checked !== newEl.checked) oldEl.checked = newEl.checked;
-  } else {
-    if (oldEl.value !== (newEl.getAttribute('value') || '')) {
-      oldEl.value = newEl.getAttribute('value') || '';
-    }
+function _evalBinary(node, scope) {
+  // Short-circuit for logical ops
+  if (node.op === '&&') {
+    const left = evaluate(node.left, scope);
+    return left ? evaluate(node.right, scope) : left;
+  }
+  if (node.op === '||') {
+    const left = evaluate(node.left, scope);
+    return left ? left : evaluate(node.right, scope);
+  }
+  if (node.op === '??') {
+    const left = evaluate(node.left, scope);
+    return left != null ? left : evaluate(node.right, scope);
   }
 
-  // Sync disabled
-  if (oldEl.disabled !== newEl.disabled) oldEl.disabled = newEl.disabled;
+  const left = evaluate(node.left, scope);
+  const right = evaluate(node.right, scope);
+
+  switch (node.op) {
+    case '+': return left + right;
+    case '-': return left - right;
+    case '*': return left * right;
+    case '/': return left / right;
+    case '%': return left % right;
+    case '==': return left == right;
+    case '!=': return left != right;
+    case '===': return left === right;
+    case '!==': return left !== right;
+    case '<': return left < right;
+    case '>': return left > right;
+    case '<=': return left <= right;
+    case '>=': return left >= right;
+    case 'instanceof': return left instanceof right;
+    case 'in': return left in right;
+    default: return undefined;
+  }
 }
 
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
 /**
- * Get the reconciliation key from a node.
- *
- * Priority: z-key attribute → id attribute → data-id / data-key.
- * Auto-detected keys use a `\0` prefix to avoid collisions with
- * explicit z-key values.
- *
- * This means the LIS-optimised keyed path activates automatically
- * whenever elements carry `id` or `data-id` / `data-key` attributes
- * — no extra markup required.
+ * Safely evaluate a JS expression string against scope layers.
  *
- * @returns {string|null}
+ * @param {string} expr — expression string
+ * @param {object[]} scope — array of scope objects, checked in order
+ *   Typical: [loopVars, state, { props, refs, $ }]
+ * @returns {*} — evaluation result, or undefined on error
  */
-function _getKey(node) {
-  if (node.nodeType !== 1) return null;
 
-  // Explicit z-key — highest priority
-  const zk = node.getAttribute('z-key');
-  if (zk) return zk;
+// AST cache (LRU) — avoids re-tokenizing and re-parsing the same expression.
+// Uses Map insertion-order: on hit, delete + re-set moves entry to the end.
+// Eviction removes the least-recently-used (first) entry when at capacity.
+const _astCache = new Map();
+const _AST_CACHE_MAX = 512;
 
-  // Auto-key: id attribute (unique by spec)
-  if (node.id) return '\0id:' + node.id;
+function safeEval(expr, scope) {
+  try {
+    const trimmed = expr.trim();
+    if (!trimmed) return undefined;
 
-  // Auto-key: data-id or data-key attributes
-  const ds = node.dataset;
-  if (ds) {
-    if (ds.id)  return '\0data-id:'  + ds.id;
-    if (ds.key) return '\0data-key:' + ds.key;
-  }
+    // Fast path for simple identifiers: "count", "name", "visible"
+    // Avoids full tokenize→parse→evaluate overhead for the most common case.
+    if (/^[a-zA-Z_$][\w$]*$/.test(trimmed)) {
+      for (const layer of scope) {
+        if (layer && typeof layer === 'object' && trimmed in layer) {
+          return layer[trimmed];
+        }
+      }
+      // Fall through to full parser for built-in globals (Math, JSON, etc.)
+    }
 
-  return null;
+    // Check AST cache (LRU: move to end on hit)
+    let ast = _astCache.get(trimmed);
+    if (ast) {
+      _astCache.delete(trimmed);
+      _astCache.set(trimmed, ast);
+    } else {
+      const tokens = tokenize(trimmed);
+      const parser = new Parser(tokens, scope);
+      ast = parser.parse();
+
+      // Evict oldest entries when cache is full
+      if (_astCache.size >= _AST_CACHE_MAX) {
+        const first = _astCache.keys().next().value;
+        _astCache.delete(first);
+      }
+      _astCache.set(trimmed, ast);
+    }
+
+    return evaluate(ast, scope);
+  } catch (err) {
+    if (typeof console !== 'undefined' && console.debug) {
+      console.debug(`[zQuery EXPR_EVAL] Failed to evaluate: "${expr}"`, err.message);
+    }
+    return undefined;
+  }
 }
 
 // --- src/component.js --------------------------------------------
@@ -3191,11 +3204,14 @@ class Component {
     this._bindRefs();
     this._bindModels();
 
-    // Restore focus if the morph replaced the focused element
+    // Restore focus if the morph replaced the focused element.
+    // Always restore selectionRange — even when the element is still
+    // the activeElement — because _bindModels or morph attribute syncing
+    // can alter the value and move the cursor.
     if (_focusInfo) {
       const el = this._el.querySelector(_focusInfo.selector);
-      if (el && el !== document.activeElement) {
-        el.focus();
+      if (el) {
+        if (el !== document.activeElement) el.focus();
         try {
           if (_focusInfo.start !== null && _focusInfo.start !== undefined) {
             el.setSelectionRange(_focusInfo.start, _focusInfo.end, _focusInfo.dir);
@@ -5836,9 +5852,10 @@ $.guardCallback  = guardCallback;
 $.validate       = validate;
 
 // --- Meta ------------------------------------------------------------------
-$.version = '0.9.7';
-$.libSize = '~100 KB';
-$.meta    = {};                // populated at build time by CLI bundler
+$.version   = '0.9.8';
+$.libSize   = '~101 KB';
+$.unitTests = {"passed":1733,"failed":0,"total":1733,"suites":489,"duration":2847,"ok":true};
+$.meta      = {};              // populated at build time by CLI bundler
 
 $.noConflict = () => {
   if (typeof window !== 'undefined' && window.$ === $) {