HS: MutationObserver mock + on mutation dispatch (+7 tests)

Parser: parse-on-feat now consumes `of FILTER` after `mutation` event-name,
where FILTER is `attributes`/`childList`/`characterData` ident or `@a [or @b]*`
attr-token chain. Emits :of-filter dict on parts. Compiler: scan-on threads
of-filter-info; mutation event-name emits `(do (hs-on …) (hs-on-mutation-attach!
TARGET MODE ATTRS))`. Runtime: hs-on-mutation-attach! constructs a real
MutationObserver with config matched to filter and dispatches "mutation" event
with records detail. Runner: HsMutationObserver mock with global registry;
prototype hooks on El.setAttribute/appendChild/removeChild/_setInnerHTML fire
matching observers synchronously, with __hsMutationActive guard preventing
recursion. Generator: dropped 7 mutation tests from skip-list, added
evaluate(setAttribute) and evaluate(appendChild) body patterns.

hs-upstream-on: 36/70 → 43/70. Smoke 0-195 unchanged at 170/195.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

tests/hs-run-filtered.js

@@ -375,7 +375,115 @@ globalThis.prompt = function(_msg){
 };
 globalThis.Event=Ev; globalThis.CustomEvent=Ev; globalThis.NodeList=Array; globalThis.HTMLCollection=Array;
 globalThis.getComputedStyle=(e)=>e?e.style:{}; globalThis.requestAnimationFrame=(f)=>{f();return 0;};
-globalThis.cancelAnimationFrame=()=>{}; globalThis.MutationObserver=class{observe(){}disconnect(){}};
+globalThis.cancelAnimationFrame=()=>{};
+// HsMutationObserver — cluster-32 mutation mock. Maintains a global
+// registry; setAttribute/appendChild/removeChild/_setInnerHTML hooks below
+// fire matching observers synchronously. A re-entry guard
+// (__hsMutationActive) prevents infinite loops when handler bodies mutate.
+globalThis.__hsMutationRegistry = [];
+globalThis.__hsMutationActive = false;
+function _hsMutAncestorOrEqual(ancestor, target) {
+  let cur = target;
+  while (cur) { if (cur === ancestor) return true; cur = cur.parentElement; }
+  return false;
+}
+function _hsMutMatches(reg, rec) {
+  const o = reg.opts;
+  if (!_hsMutAncestorOrEqual(reg.target, rec.target)) return false;
+  if (rec.type === 'attributes') {
+    if (!o.attributes) return false;
+    if (o.attributeFilter && o.attributeFilter.length > 0) {
+      if (!o.attributeFilter.includes(rec.attributeName)) return false;
+    }
+    return true;
+  }
+  if (rec.type === 'childList') return !!o.childList;
+  if (rec.type === 'characterData') return !!o.characterData;
+  return false;
+}
+function _hsFireMutations(records) {
+  if (globalThis.__hsMutationActive) return;
+  if (!records || records.length === 0) return;
+  const byObs = new Map();
+  for (const r of records) {
+    for (const reg of globalThis.__hsMutationRegistry) {
+      if (!_hsMutMatches(reg, r)) continue;
+      if (!byObs.has(reg.observer)) byObs.set(reg.observer, []);
+      byObs.get(reg.observer).push(r);
+    }
+  }
+  if (byObs.size === 0) return;
+  globalThis.__hsMutationActive = true;
+  try {
+    for (const [obs, recs] of byObs) {
+      try { obs._cb(recs, obs); } catch (e) {}
+    }
+  } finally {
+    globalThis.__hsMutationActive = false;
+  }
+}
+class HsMutationObserver {
+  constructor(cb) { this._cb = cb; this._regs = []; }
+  observe(el, opts) {
+    if (!el) return;
+    // opts is an SX dict: read fields directly. attributeFilter is an SX list
+    // ({_type:'list', items:[...]}) OR a JS array.
+    let af = opts && opts.attributeFilter;
+    if (af && af._type === 'list') af = af.items;
+    const o = {
+      attributes: !!(opts && opts.attributes),
+      childList: !!(opts && opts.childList),
+      characterData: !!(opts && opts.characterData),
+      subtree: !!(opts && opts.subtree),
+      attributeFilter: af || null,
+    };
+    const reg = { observer: this, target: el, opts: o };
+    this._regs.push(reg);
+    globalThis.__hsMutationRegistry.push(reg);
+  }
+  disconnect() {
+    for (const r of this._regs) {
+      const i = globalThis.__hsMutationRegistry.indexOf(r);
+      if (i >= 0) globalThis.__hsMutationRegistry.splice(i, 1);
+    }
+    this._regs = [];
+  }
+  takeRecords() { return []; }
+}
+globalThis.MutationObserver = HsMutationObserver;
+// Hook El prototype methods so mutations fire registered observers.
+// Hooks are no-ops while __hsMutationActive=true (prevents re-entry from
+// handler bodies that themselves mutate the DOM).
+(function _hookElForMutations() {
+  const _setAttr = El.prototype.setAttribute;
+  El.prototype.setAttribute = function(n, v) {
+    const r = _setAttr.call(this, n, v);
+    if (globalThis.__hsMutationRegistry.length)
+      _hsFireMutations([{ type: 'attributes', target: this, attributeName: String(n), oldValue: null }]);
+    return r;
+  };
+  const _append = El.prototype.appendChild;
+  El.prototype.appendChild = function(c) {
+    const r = _append.call(this, c);
+    if (globalThis.__hsMutationRegistry.length)
+      _hsFireMutations([{ type: 'childList', target: this, addedNodes: [c], removedNodes: [] }]);
+    return r;
+  };
+  const _remove = El.prototype.removeChild;
+  El.prototype.removeChild = function(c) {
+    const r = _remove.call(this, c);
+    if (globalThis.__hsMutationRegistry.length)
+      _hsFireMutations([{ type: 'childList', target: this, addedNodes: [], removedNodes: [c] }]);
+    return r;
+  };
+  const _setIH = El.prototype._setInnerHTML;
+  El.prototype._setInnerHTML = function(html) {
+    const r = _setIH.call(this, html);
+    if (globalThis.__hsMutationRegistry.length)
+      _hsFireMutations([{ type: 'childList', target: this, addedNodes: [], removedNodes: [] }]);
+    return r;
+  };
+})();
 // HsResizeObserver — cluster-26 resize mock. Keeps a per-element callback
 // registry so code that observes via `new ResizeObserver(cb)` still works,
 // but HS's `on resize` uses the plain `resize` DOM event dispatched by the
@@ -571,6 +679,8 @@ for(let i=startTest;i<Math.min(endTest,testCount);i++){
   _body.children=[];_body.childNodes=[];_body.innerHTML='';_body.textContent='';
   globalThis.__test_selection='';
   globalThis.__hsCookieStore.clear();
+  globalThis.__hsMutationRegistry.length = 0;
+  globalThis.__hsMutationActive = false;
   globalThis.__currentHsTestName = name;
 
   // Enable step limit for timeout protection

tests/playwright/generate-sx-tests.py

@@ -114,13 +114,6 @@ SKIP_TEST_NAMES = {
     "can filter events based on count range",
     "can filter events based on unbounded count range",
     "can mix ranges",
-    "can listen for general mutations",
-    "can listen for attribute mutations",
-    "can listen for specific attribute mutations",
-    "can listen for childList mutations",
-    "can listen for multiple mutations",
-    "can listen for multiple mutations 2",
-    "can listen for attribute mutations on other elements",
     "each behavior installation has its own event queue",
     "can catch exceptions thrown in js functions",
     "can catch exceptions thrown in hyperscript functions",
@@ -1166,6 +1159,32 @@ def parse_dev_body(body, elements, var_names):
                 ops.append(f'(if (dom-has-class? {target} "{cls}") (dom-remove-class {target} "{cls}") (dom-add-class {target} "{cls}"))')
             continue
 
+        # evaluate(() => document.querySelector(SEL).setAttribute(NAME, VALUE))
+        # — used by mutation tests (cluster 32) to trigger MutationObserver.
+        m = re.match(
+            r'''evaluate\(\s*\(\)\s*=>\s*document\.querySelector\(\s*([\'"])([^\'"]+)\1\s*\)'''
+            r'''\.setAttribute\(\s*([\'"])([\w-]+)\3\s*,\s*([\'"])([^\'"]*)\5\s*\)\s*\)\s*$''',
+            stmt_na, re.DOTALL,
+        )
+        if m and seen_html:
+            sel = re.sub(r'^#work-area\s+', '', m.group(2))
+            target = selector_to_sx(sel, elements, var_names)
+            ops.append(f'(dom-set-attr {target} "{m.group(4)}" "{m.group(6)}")')
+            continue
+
+        # evaluate(() => document.querySelector(SEL).appendChild(document.createElement(TAG)))
+        # — used by mutation childList tests (cluster 32).
+        m = re.match(
+            r'''evaluate\(\s*\(\)\s*=>\s*document\.querySelector\(\s*([\'"])([^\'"]+)\1\s*\)'''
+            r'''\.appendChild\(\s*document\.createElement\(\s*([\'"])([\w-]+)\3\s*\)\s*\)\s*\)\s*$''',
+            stmt_na, re.DOTALL,
+        )
+        if m and seen_html:
+            sel = re.sub(r'^#work-area\s+', '', m.group(2))
+            target = selector_to_sx(sel, elements, var_names)
+            ops.append(f'(dom-append {target} (dom-create-element "{m.group(4)}"))')
+            continue
+
         # evaluate(() => { var range = document.createRange();
         #   var textNode = document.getElementById(ID).firstChild;
         #   range.setStart(textNode, N); range.setEnd(textNode, M);