affora 0.1.0

package/rules/magento.js

@@ -0,0 +1,325 @@
+// Magento (Luma) rules — tuned to a COMPILED storefront, i.e. the WebArena
+// shopping app. Class names here are stable theme output, not app source, which
+// is why they live in a site file: generic.js carries what needs no such
+// knowledge, and this layers the store-specific vocabulary on top.
+({
+  // A product tile in a listing. The theme buries the price in nested spans, the
+  // rating in a CSS-width bar, and the action behind an icon — facts the page HAS
+  // but does not state. The tile states them.
+  product_item: {
+    find: () => [...document.querySelectorAll('li.item.product, .product-item')],
+    extract: (el) => {
+      const nameEl = el.querySelector('.product-item-link, .product-item-name a, a.product-item-link');
+      const name = nameEl ? rsRendered(nameEl) : '';
+      const href = nameEl ? nameEl.getAttribute('href') : '';
+      if (!name || !href) return null;
+      // The RENDERED price text is what the page asserts and what an evaluator
+      // string-matches, so it is the displayed value verbatim. data-price-amount
+      // is the machine form and belongs in <data value> only — reformatting it
+      // once dropped the cents digit ($12.80 -> $12.8).
+      const pw = el.querySelector('[data-price-amount]');
+      const priceText = rsRendered(el.querySelector('.price'));
+      const priceValue = pw ? pw.getAttribute('data-price-amount')
+                            : priceText.replace(/[^\d.]/g, '');
+      // Rating: encoded as a percentage WIDTH on an inner span — a fact expressed
+      // only as geometry. Read it and say it.
+      // Take whichever node CARRIES the width. querySelector returns document
+      // order, so a selector list matching both the wrapper and the inner span
+      // hands back the wrapper — which has no width — and the rating is silently
+      // dropped from every tile: the geometry-to-text conversion this rule exists
+      // for, quietly not happening.
+      const bar = [...el.querySelectorAll('.rating-result, .rating-result > span')]
+        .find(n => /width:\s*[\d.]+%/.test(n.getAttribute('style') || ''))
+        || el.querySelector('.rating-result');
+      let rating = '', ratingRaw = '';
+      if (bar) {
+        const m = (bar.getAttribute('style') || '').match(/width:\s*([\d.]+)%/);
+        if (m) {
+          rating = (Math.round(parseFloat(m[1]) / 20 * 10) / 10) + ' of 5';
+          // Keep the page's OWN wording alongside the legible form. This theme
+          // prints "Rating: 73%", and replacing it with "3.7 of 5" deleted the
+          // assertion the page actually made — which a benchmark evaluator may
+          // string-match. Converting a unit is not licence to drop the original.
+          ratingRaw = m[1] + '%';
+        } else { const t = rsRendered(bar); if (/\d/.test(t)) rating = t; }
+      }
+      const reviews = rsRendered(el.querySelector('.reviews-actions a, .action.view'));
+      const addBtn = el.querySelector('button.tocart, .action.tocart');
+      return { name, href, priceText, priceValue, rating, ratingRaw, reviews,
+               addLabel: addBtn ? (rsRendered(addBtn) || 'Add to Cart') : '' };
+    },
+    render: (d) => `<article class="rs rs-tile">
+        <h3 class="rs-tile-name"><a href="${rsEsc(d.href)}">${rsEsc(d.name)}</a></h3>
+        ${d.priceText ? `<p class="rs-tile-price"><data value="${rsEsc(d.priceValue)}">${rsEsc(d.priceText)}</data></p>` : ''}
+        ${d.rating ? `<p class="rs-tile-rating">Rating: ${rsEsc(d.rating)}${d.ratingRaw ? ` (${rsEsc(d.ratingRaw)})` : ''}${d.reviews ? ' · ' + rsEsc(d.reviews) : ''}</p>` : ''}
+        ${d.addLabel ? `<p class="rs-tile-action">${rsEsc(d.addLabel)}</p>` : ''}
+      </article>`,
+  },
+
+  // Pagination: the current page is a fact the theme encodes only as a class.
+  // State the position in prose; keep every item's own wording VERBATIM —
+  // "You're currently reading page 1" is the page's screen-reader prose and
+  // therefore content; rewriting it to "Page 1" was itself a measured loss.
+  pagination: {
+    find: () => [...document.querySelectorAll('.pages')],
+    extract: (el) => {
+      const items = [...el.querySelectorAll('li')].map(li => {
+        const raw = rsRendered(li);
+        const m = raw.match(/(\d+)\s*$/);
+        return { label: raw, num: m ? m[1] : '',
+                 href: (li.querySelector('a') || {}).href || '',
+                 current: li.classList.contains('current') };
+      }).filter(i => i.label);
+      if (!items.length) return null;
+      const cur = items.find(i => i.current);
+      const nums = items.map(i => parseInt(i.num, 10)).filter(n => !isNaN(n));
+      return { items, current: cur ? cur.num : '',
+               last: nums.length ? Math.max(...nums) : '' };
+    },
+    render: (d) => `<nav class="rs rs-pages" aria-label="Pagination">
+        ${d.current ? `<p class="rs-pages-state">Page ${rsEsc(d.current)}${d.last ? ' of ' + rsEsc(String(d.last)) : ''}</p>` : ''}
+        <ul class="rs-pages-list">${d.items.map(i =>
+          `<li>${i.href ? `<a href="${rsEsc(i.href)}"${i.current ? ' aria-current="page"' : ''}>${rsEsc(i.label)}</a>`
+                        : `<span${i.current ? ' aria-current="page"' : ''}>${rsEsc(i.label)}</span>`}</li>`).join('')}</ul>
+      </nav>`,
+  },
+
+  // A quantity field. RE-HOMED under a real label rather than rebuilt: the
+  // rebuild dropped the original's own title, which parity caught as a lost
+  // affordance, and Magento binds validation and the add-to-cart submit to the
+  // original node — a replica with the same name would look right and fail
+  // validation silently. Stating the constraints the theme leaves to its
+  // validation config is the actual repair; the control itself was never the
+  // problem.
+  qty: {
+    find: () => [...document.querySelectorAll('input[name*="qty" i]')],
+    extract: (el) => ({
+      label: rsLabel(el) || el.getAttribute('title') || 'Quantity',
+      min: el.getAttribute('min') || '',
+      max: el.getAttribute('max') || '',
+      orig: el,
+    }),
+    render: (d) => {
+      const id = 'rs-' + (++window.__rsSeq);
+      const limits = [d.min && `at least ${rsEsc(d.min)}`, d.max && `at most ${rsEsc(d.max)}`]
+        .filter(Boolean).join(', ');
+      return `<div class="rs rs-field" data-rs-qty>
+        <label class="rs-label" for="${id}">${rsEsc(d.label)}${limits ? ` (${limits})` : ''}</label>
+      </div>`;
+    },
+    after: (d, holder) => {
+      const field = holder.querySelector('.rs-field');
+      const label = holder.querySelector('label');
+      if (!field || !label) return;
+      if (!d.orig.id) d.orig.id = label.getAttribute('for');
+      else label.setAttribute('for', d.orig.id);
+      d.orig.setAttribute('data-rs-done', '');
+      d.orig.classList.add('rs-input');
+      rsUnhide(d.orig);
+      field.appendChild(d.orig);
+    },
+  },
+
+  // The sort-direction toggle. Its accessible name is the ACTION it performs —
+  // "Set Descending Direction" — and nothing states the direction currently in
+  // effect, so an agent asked to put cheap items first cannot tell whether the
+  // listing is already ascending, and clicking the plausibly-named control
+  // reverses what it wanted. Measured across the 3x3 matrix, this single control
+  // caused nearly every L2 failure, on BOTH arms and both models (#43).
+  //
+  // The current direction is not a guess: the theme writes it into the class
+  // (`sort-asc` / `sort-desc`). Stating it adds no fact the page does not hold.
+  //
+  // The original's href is '#' — the behaviour is JavaScript — so the control is
+  // shadow-driven rather than rebuilt, and its exact wording is preserved so the
+  // page still says everything it said.
+  sort_direction: {
+    find: () => [...document.querySelectorAll('a.sorter-action, a[title*="Direction" i]')],
+    extract: (el) => {
+      const cls = String(el.className);
+      const current = /sort-asc/.test(cls) ? 'ascending'
+                    : /sort-desc/.test(cls) ? 'descending' : '';
+      if (!current) return null;              // direction unknowable: skip, never guess
+      return { current, label: rsRendered(el) || el.getAttribute('title') || '', orig: el };
+    },
+    render: (d) => `<div class="rs rs-field" data-rs-sortdir>
+        <p class="rs-label">Sort direction: ${rsEsc(d.current)}</p>
+        <button type="button" class="rs-iconbtn">${rsEsc(d.label)}</button>
+      </div>`,
+    after: (d, holder) => {
+      d.orig.style.display = 'none';
+      d.orig.setAttribute('data-rs-done', '');
+      holder.appendChild(d.orig);
+      const btn = holder.querySelector('button');
+      if (btn) btn.addEventListener('click', () => d.orig.click());
+    },
+  },
+
+  // A cart line. The row spreads one item's facts across table cells whose meaning
+  // comes from a header far above, and the quantity field's name is an opaque
+  // `cart[854][qty]` — so an agent asked to change the quantity of a NAMED product
+  // has to work out which numbered field belongs to it. The line states its own
+  // facts and labels its own field.
+  //
+  // The quantity input is SHADOW-DRIVEN rather than rebuilt: Magento's cart wires
+  // validation and the Update button to the original, and a rebuilt field with the
+  // same name would look right and update nothing.
+  cart_line: {
+    find: () => [...document.querySelectorAll('tbody.cart.item')],
+    extract: (el) => {
+      const name = rsRendered(el.querySelector('.product-item-name'));
+      if (!name) return null;
+      const link = el.querySelector('.product-item-name a');
+      const qty = el.querySelector('input[name*="qty" i]');
+      return {
+        name,
+        href: link ? link.getAttribute('href') : '',
+        price: rsRendered(el.querySelector('.col.price .price, .price')),
+        subtotal: rsRendered(el.querySelector('.col.subtotal .price, .subtotal')),
+        options: rsRendered(el.querySelector('.item-options')),
+        qty,
+        qtyValue: qty ? (qty.value || qty.getAttribute('value') || '') : '',
+      };
+    },
+    render: (d) => {
+      const id = 'rs-' + (++window.__rsSeq);
+      return `<tbody class="rs"><tr><td colspan="5">
+        <article class="rs rs-tile">
+          <h3 class="rs-tile-name">${d.href ? `<a href="${rsEsc(d.href)}">${rsEsc(d.name)}</a>` : rsEsc(d.name)}</h3>
+          ${d.options ? `<p class="rs-tile-rating">${rsEsc(d.options)}</p>` : ''}
+          ${d.price ? `<p class="rs-tile-price">Price: ${rsEsc(d.price)}</p>` : ''}
+          ${d.subtotal ? `<p class="rs-tile-price">Subtotal: ${rsEsc(d.subtotal)}</p>` : ''}
+          ${d.qty ? `<div class="rs-field"><label class="rs-label" for="${id}">Quantity of ${rsEsc(d.name)}</label></div>` : ''}
+        </article></td></tr></tbody>`;
+    },
+    after: (d, holder) => {
+      if (!d.qty) return;
+      // re-home the real field under its new label, keeping its name and handlers
+      const field = holder.querySelector('.rs-field');
+      const label = holder.querySelector('label');
+      if (!field || !label) return;
+      if (!d.qty.id) d.qty.id = label.getAttribute('for');
+      else label.setAttribute('for', d.qty.id);
+      d.qty.setAttribute('data-rs-done', '');
+      d.qty.classList.add('rs-input');
+      field.appendChild(d.qty);
+    },
+  },
+
+  // The order summary. Every figure is a table row whose label and value sit in
+  // separate cells, so the association is positional; stated as pairs it survives
+  // any reading order.
+  cart_totals: {
+    find: () => [...document.querySelectorAll('.cart-totals table, table.totals')],
+    extract: (el) => {
+      const rows = [...el.querySelectorAll('tr')].map(tr => ({
+        label: rsRendered(tr.querySelector('th')),
+        value: rsRendered(tr.querySelector('td')),
+      })).filter(r => r.label && r.value);
+      return rows.length ? { rows } : null;
+    },
+    render: (d) => `<div class="rs rs-sections"><section class="rs-section">
+        <h3 class="rs-section-title">Order summary</h3>
+        <ul class="rs-pages-list" style="flex-direction:column;align-items:flex-start">
+        ${d.rows.map(r => `<li>${rsEsc(r.label)}: ${rsEsc(r.value)}</li>`).join('')}
+        </ul></section></div>`,
+  },
+
+  // Product custom options — the reason a configurable product cannot be added
+  // from a listing at all, and nothing on either page says so. Magento marks the
+  // group required with a CSS CLASS (.field.required) while the inputs themselves
+  // report required=false, and names them opaquely (options[2255]) with the human
+  // label in a separate element. So the page holds three facts it never states in
+  // machine-readable form: what this choice is called, that it must be made, and
+  // which values are available.
+  //
+  // The radios are RE-HOMED rather than rebuilt: Magento's validation binds to the
+  // originals, and a rebuilt input with the same name would look right and fail
+  // validation silently.
+  product_options: {
+    find: () => [...document.querySelectorAll('.product-options-wrapper')],
+    extract: (el) => {
+      const groups = new Map();
+      el.querySelectorAll('input[name^="options["], select[name^="options["]').forEach(inp => {
+        const name = inp.getAttribute('name');
+        if (!groups.has(name)) groups.set(name, []);
+        groups.get(name).push(inp);
+      });
+      if (!groups.size) return null;
+      const out = [];
+      for (const [name, inputs] of groups) {
+        // The label and the requirement live on an ancestor block, not on the
+        // control, so both are read from where the theme actually puts them.
+        const block = inputs[0].closest('.product-options-wrapper > .field, .field');
+        let labelEl = null, req = false;
+        for (let n = inputs[0]; n && n !== el; n = n.parentElement) {
+          if (!labelEl) labelEl = n.querySelector(':scope > label, :scope > span.label');
+          if (n.classList && n.classList.contains('required')) req = true;
+        }
+        // fall back to the wrapper's own labelled block
+        const groupLabel = rsRendered(labelEl) ||
+          rsRendered(el.querySelector('.field.required > label, .field.required > .label')) || '';
+        const choices = inputs.map(i => ({
+          input: i,
+          label: rsRendered(i.closest('.field') || i.parentElement) ||
+                 i.getAttribute('aria-label') || i.value || '',
+        })).filter(c => c.label);
+        out.push({ name, req, label: groupLabel, choices, block });
+      }
+      return out.length ? { groups: out } : null;
+    },
+    render: (d) => `<div class="rs rs-sections" data-rs-options>` + d.groups.map((g, gi) =>
+        `<fieldset class="rs-section" data-rs-group="${gi}">
+           <legend class="rs-section-title">${rsEsc(g.label || 'Option')}${g.req ? ' (required)' : ''}</legend>
+           <p class="rs-label">Choose one of: ${rsEsc(g.choices.map(c => c.label).join(', '))}</p>
+           <div class="rs-pages-list" data-rs-choices="${gi}"></div>
+         </fieldset>`).join('') + `</div>`,
+    after: (d, holder) => {
+      d.groups.forEach((g, gi) => {
+        const slot = holder.querySelector(`[data-rs-choices="${gi}"]`);
+        if (!slot) return;
+        g.choices.forEach((c, ci) => {
+          const id = `rs-opt-${gi}-${ci}`;
+          const wrap = document.createElement('label');
+          wrap.className = 'rs-iconbtn';
+          wrap.setAttribute('for', c.input.id || id);
+          if (!c.input.id) c.input.id = id;
+          c.input.setAttribute('data-rs-done', '');
+          rsUnhide(c.input);
+          wrap.appendChild(c.input);                 // the ORIGINAL control
+          const text = document.createElement('span');
+          text.className = 'rs-iconbtn-name';
+          text.textContent = c.label;
+          wrap.appendChild(text);
+          slot.appendChild(wrap);
+        });
+      });
+    },
+  },
+
+  // The product information tabs. Magento hides the description and the reviews
+  // behind a tab strip whose panels are in the DOM but collapsed, so a question
+  // about either is answerable only after an interaction the page never advertises.
+  // Flattened into sections, with each panel's content moved rather than copied.
+  product_info_tabs: {
+    // flattening: the tab/section controls exist to reveal content this
+    // output reveals structurally, so they are subsumed, not lost
+    subsumes: true,
+    find: () => [...document.querySelectorAll('.product.data.items')],
+    extract: (el) => {
+      const secs = [...el.querySelectorAll('.data.item.title')].map(t => {
+        const link = t.querySelector('a');
+        const id = link && (link.getAttribute('href') || '').replace(/^#/, '');
+        const panel = (id && document.getElementById(id)) || t.nextElementSibling;
+        return panel && rsRendered(panel)
+          ? { title: rsRendered(t), html: panel.innerHTML, panel } : null;
+      }).filter(Boolean);
+      return secs.length >= 1 ? { secs } : null;
+    },
+    render: (d) => `<div class="rs rs-sections">` + d.secs.map(t =>
+        `<section class="rs-section"><h3 class="rs-section-title">${rsEsc(t.title)}</h3>
+         <div class="rs-section-body">${t.html}</div></section>`).join('') + `</div>`,
+    removes: (d) => d.secs.map(t => t.panel),
+    after: (d) => d.secs.forEach(t => t.panel && t.panel.isConnected && t.panel.remove()),
+  },
+})

package/rules/mui.js

@@ -0,0 +1,230 @@
+// Material UI rules — developed and verified against NATIVE MUI projects
+// (mui.com component demos; an official template as the app-scale case), never
+// against our own benchmark re-creations, which would make validation circular.
+//
+// Empirical idioms (probed on mui.com):
+//   Select    <div role="combobox" aria-haspopup="listbox"> — a DIV, unlike both
+//             shadcn eras — beside a hidden .MuiSelect-nativeInput that carries
+//             the machine value; options portal-mount on open.
+//   Tabs      [role=tab] buttons; inactive panels exist but their content is
+//             unmounted (hidden + empty) -> probe-click to harvest.
+//   Menu      trigger [aria-haspopup="menu"]; items portal-mount.
+//   Accordion content STAYS mounted (collapsed by height), so extraction is
+//             passive — the one family where MUI is kinder than Radix.
+//   Switch    wraps a REAL <input type=checkbox> already — nothing to replace;
+//             deliberately no rule.
+({
+  mui_select: {
+    // Library rules must fire on their own library. Ant Design's page-size
+    // select carries the same ARIA as MUI's, and this rule matched it, probed
+    // it, and then removed a listbox it had found by a page-wide fallback,
+    // taking Ant Design's own inner input with it: an affordance present in the
+    // shipped page and absent after the rewrite.
+    find: () => [...document.querySelectorAll('[role="combobox"][aria-haspopup="listbox"]')]
+      .filter(e => e.tagName !== 'SELECT')
+      .filter(e => e.closest('.MuiInputBase-root,.MuiSelect-root,.MuiAutocomplete-root')
+                || /\bMui[A-Z]/.test(String(e.className || ''))),
+    extract: (el) => {
+      const owned = el.getAttribute('aria-controls');
+      let box = owned && document.getElementById(owned);
+      // The fallback is scoped to MUI's own popover: a page-wide query for any
+      // listbox reaches whatever else happens to be open.
+      if (!box) box = document.querySelector('.MuiPopover-root [role="listbox"], .MuiMenu-root [role="listbox"]');
+      const opts = box ? [...box.querySelectorAll('[role="option"],li')]
+        .map(o => ({ value: o.getAttribute('data-value') || rsRendered(o),
+                     label: rsRendered(o) })).filter(o => o.label) : [];
+      if (!opts.length) {
+        const tries = +(el.getAttribute('data-rs-probe') || 0);
+        if (tries >= 3) return null;
+        el.setAttribute('data-rs-probe', String(tries + 1));
+        el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+        el.click();
+        return 'retry';
+      }
+      // the hidden native input is MUI's own machine-value carrier
+      const hidden = el.parentElement &&
+        el.parentElement.querySelector('.MuiSelect-nativeInput,input[aria-hidden="true"]');
+      const current = (hidden && hidden.value) || rsRendered(el);
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      return { label: rsLabel(el), opts, current, box,
+               name: (hidden && hidden.getAttribute('name')) || '',
+               id: el.getAttribute('id') || '' };
+    },
+    render: (d) => {
+      const id = d.id || ('rs-' + (++window.__rsSeq));
+      const sel = d.opts.find(o => o.value === d.current || o.label === d.current);
+      return `<div class="rs rs-field">
+        ${d.label ? `<label class="rs-label" for="${id}">${rsEsc(d.label)}</label>` : ''}
+        <select class="rs-select" id="${id}"${d.name ? ` name="${rsEsc(d.name)}"` : ''}>
+          ${sel ? '' : `<option value="" selected>${rsEsc(d.current || 'Select…')}</option>`}
+          ${d.opts.map(o => `<option value="${rsEsc(o.value)}"${sel && o.value === sel.value ? ' selected' : ''}>${rsEsc(o.label)}</option>`).join('')}
+        </select>
+      </div>`;
+    },
+    removes: (d) => d.box ? [d.box] : [],
+    after: (d) => {
+      // Remove ONLY the listbox we read. Reaching for a positioning wrapper —
+      // [role="presentation"] especially — takes whatever else it contains: on
+      // mui.com that was the documentation sidebar, and every /material-ui/...
+      // destination vanished while faithfulness stayed green.
+      if (d.box && d.box.isConnected) d.box.remove();
+    },
+  },
+
+  mui_menu: {
+    find: () => [...document.querySelectorAll('button[aria-haspopup="menu"],[aria-haspopup="true"]')]
+      .filter(e => e.tagName === 'BUTTON')
+      // Never probe something that NAVIGATES or opens a dialog. Probing clicks,
+      // and on a documentation site the nav and the search both look like menu
+      // triggers: clicking them replaced the page and parity reported 130 severed
+      // navigation paths for a site that worked perfectly.
+      .filter(e => e.tagName !== 'A' && !e.getAttribute('href')
+        && e.getAttribute('aria-haspopup') !== 'dialog'
+        && !e.closest('[role="search"],form[role="search"],nav')),
+    extract: (el) => {
+      const owned = el.getAttribute('aria-controls');
+      let box = owned && document.getElementById(owned);
+      if (!box) box = document.querySelector('[role="menu"]');
+      // Walk in DOM order and keep GROUP HEADERS, not only the items: MUI menus
+      // use ListSubheader ("Category 1") to group options, and emitting items
+      // alone silently drops the grouping — a real fact the faithfulness check
+      // caught on mui.com's own menu demo.
+      const items = box ? [...box.querySelectorAll(
+          '[role^="menuitem"],.MuiMenuItem-root,.MuiListSubheader-root,li')]
+        .map(o => ({
+          label: rsRendered(o),
+          href: o.getAttribute('href') || '',
+          heading: o.classList.contains('MuiListSubheader-root')
+                || (!o.getAttribute('role') && !o.classList.contains('MuiMenuItem-root')),
+        }))
+        .filter(o => o.label) : [];
+      if (!items.length) {
+        const tries = +(el.getAttribute('data-rs-probe') || 0);
+        if (tries >= 3) return null;
+        el.setAttribute('data-rs-probe', String(tries + 1));
+        el.click();
+        return 'retry';
+      }
+      const label = rsRendered(el) || rsLabel(el);
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      return { label, items, box, orig: el };
+    },
+    render: (d) => `<div class="rs rs-field" data-rs-menu>
+        <span class="rs-label">${rsEsc(d.label)}</span>
+        <ul class="rs-pages-list">${d.items.map((i, n) =>
+          i.heading ? `<li class="rs-label" role="presentation">${rsEsc(i.label)}</li>`
+          : i.href ? `<li><a href="${rsEsc(i.href)}">${rsEsc(i.label)}</a></li>`
+                   : `<li><button type="button" class="rs-iconbtn" data-rs-item="${n}">${rsEsc(i.label)}</button></li>`).join('')}</ul>
+      </div>`,
+    removes: (d) => d.box ? [d.box] : [],
+    after: (d, holder) => {
+      // only the menu we harvested; a positioning wrapper can hold the page's nav
+      if (d.box && d.box.isConnected) d.box.remove();
+      d.orig.style.display = 'none';
+      d.orig.removeAttribute('data-rs-done');
+      // its portal is gone; leaving the pointer behind dangles the reference
+      d.orig.removeAttribute('aria-controls');
+      d.orig.removeAttribute('aria-owns');
+      holder.appendChild(d.orig);
+      holder.querySelectorAll('[data-rs-item]').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const want = btn.textContent.trim();
+          d.orig.click();
+          setTimeout(() => {
+            const it = [...document.querySelectorAll('[role^="menuitem"],.MuiMenuItem-root')]
+              .find(m => rsRendered(m) === want);
+            if (it) it.click();
+            else document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+          }, 120);
+        });
+      });
+    },
+  },
+
+  mui_tabs: {
+    // flattening: the tab/section controls exist to reveal content this
+    // output reveals structurally, so they are subsumed, not lost
+    subsumes: true,
+    find: () => {
+    // A NAVIGATION switcher is not a content tab strip. Atomic CRM renders its
+    // top navigation as MUI Tabs whose tabs are links; probing one navigated
+    // the application to its root and the flattening then replaced the page,
+    // costing the rewritten arm 25 of 36 tasks it could otherwise do. The
+    // generic tabs rule has carried this guard since Magento's mobile nav.
+    const contentTabs = (el) => !el.closest('nav,[role="navigation"]')
+      && ![...el.querySelectorAll('[role="tab"]')].some(t => t.tagName === 'A' && t.getAttribute('href'));
+      return ([...document.querySelectorAll('[role="tablist"]')]).filter(contentTabs)
+    },
+    extract: (el) => {
+      const trigs = [...el.querySelectorAll('[role="tab"]')];
+      if (trigs.length < 2) return null;
+      // panels: aria-controls when wired, else index-match the page's tabpanels
+      // that belong to this tablist's container
+      const scope = el.closest('.MuiBox-root,section,div') || document;
+      const panels = [...scope.parentElement
+        ? scope.parentElement.querySelectorAll('[role="tabpanel"]')
+        : document.querySelectorAll('[role="tabpanel"]')];
+      const panelOf = (t, i) => {
+        const id = t.getAttribute('aria-controls');
+        return (id && document.getElementById(id)) || panels[i] || null;
+      };
+      const st = el.__rsCap || (el.__rsCap = { caps: {} });
+      let missing = null, missIdx = -1;
+      trigs.forEach((t, i) => {
+        const key = rsRendered(t);
+        const panel = panelOf(t, i);
+        if (panel && rsRendered(panel)) st.caps[key] = { title: key, html: panel.innerHTML, panel };
+        else if (!(key in st.caps) && !missing) { missing = t; missIdx = i; }
+      });
+      if (missing) {
+        const tries = +(el.getAttribute('data-rs-probe') || 0);
+        if (tries < trigs.length * 2 + 2) {
+          el.setAttribute('data-rs-probe', String(tries + 1));
+          missing.click();
+          return 'retry';
+        }
+      }
+      const tabs = trigs.map(t => st.caps[rsRendered(t)]).filter(Boolean);
+      return tabs.length >= 2 ? { tabs } : null;
+    },
+    render: (d) => `<div class="rs rs-sections">` + d.tabs.map(t =>
+        `<section class="rs-section"><h3 class="rs-section-title">${rsEsc(t.title)}</h3>
+         <div class="rs-section-body">${t.html}</div></section>`).join('') + `</div>`,
+    removes: (d) => d.tabs.map(t => t.panel),
+    after: (d) => d.tabs.forEach(t => t.panel && t.panel.isConnected && t.panel.remove()),
+  },
+
+  mui_accordion: {
+    // flattening: the tab/section controls exist to reveal content this
+    // output reveals structurally, so they are subsumed, not lost
+    subsumes: true,
+    // content stays mounted, so this is passive: flatten every panel that is
+    // already in the document
+    find: () => {
+      const roots = new Set();
+      document.querySelectorAll('.MuiAccordion-root').forEach(a => {
+        const g = a.parentElement;
+        if (g && [...g.children].filter(c => c.classList.contains('MuiAccordion-root')).length >= 2)
+          roots.add(g);
+      });
+      return [...roots];
+    },
+    extract: (el) => {
+      const secs = [...el.querySelectorAll('.MuiAccordion-root')].map(a => {
+        const btn = a.querySelector('[aria-expanded]');
+        const region = a.querySelector('[role="region"],.MuiCollapse-root');
+        // The panel content references the header by id (aria-labelledby).
+        // Carry that id onto the section title, or flattening orphans every
+        // one of those references — a regression in the very property this
+        // rewrite claims to improve.
+        return btn && region && rsRendered(region)
+          ? { title: rsRendered(btn), html: region.innerHTML,
+              headerId: btn.getAttribute('id') || '' } : null;
+      }).filter(Boolean);
+      return secs.length >= 2 ? { secs } : null;
+    },
+    render: (d) => `<div class="rs rs-sections">` + d.secs.map(t =>
+        `<section class="rs-section"><h3 class="rs-section-title"${t.headerId ? ` id="${rsEsc(t.headerId)}"` : ''}>${rsEsc(t.title)}</h3>
+         <div class="rs-section-body">${t.html}</div></section>`).join('') + `</div>`,
+  },
+})