affora 0.1.0

package/rules/shadcn-baseui.js

@@ -0,0 +1,169 @@
+// shadcn — BASE UI era (the default primitive since July 2026). Empirically
+// probed on base-ui.com: the SELECT trigger is button[aria-haspopup="listbox"]
+// with data-placeholder when unset — NOT role="combobox" as under Radix — which
+// is exactly why this is a separate variant file. Menus keep the same ARIA
+// surface; portal cleanup loses the data-radix-* markers. Tabs / accordion /
+// switch detection is ARIA-level and identical across eras, duplicated here so
+// each variant file stands alone (a rules file is data, not a library).
+({
+  baseui_select: {
+    find: () => [...document.querySelectorAll('button[aria-haspopup="listbox"]')],
+    extract: (el) => {
+      const owned = el.getAttribute('aria-controls');
+      let box = owned && document.getElementById(owned);
+      if (!box) box = document.querySelector('[role="listbox"]');
+      const opts = box ? [...box.querySelectorAll('[role="option"]')]
+        .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 PointerEvent('pointerdown', { bubbles: true }));
+        el.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
+        el.click();
+        return 'retry';
+      }
+      const isPlaceholder = el.hasAttribute('data-placeholder');
+      const current = rsRendered(el);
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      return { label: rsLabel(el), opts, current, isPlaceholder, box,
+               id: el.getAttribute('id') || '' };
+    },
+    render: (d) => {
+      const id = d.id || ('rs-' + (++window.__rsSeq));
+      const sel = !d.isPlaceholder && d.opts.some(o => o.label === d.current) ? 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}">
+          ${sel ? '' : `<option value="" selected>${rsEsc(d.current || 'Select…')}</option>`}
+          ${d.opts.map(o => `<option value="${rsEsc(o.value)}"${o.label === sel ? ' selected' : ''}>${rsEsc(o.label)}</option>`).join('')}
+        </select>
+      </div>`;
+    },
+    removes: (d) => d.box ? [d.box] : [],
+    // Base UI positions the popup in a floating wrapper without radix markers;
+    // removing the listbox itself is the safe, era-neutral cleanup.
+    after: (d) => { if (d.box && d.box.isConnected) d.box.remove(); },
+  },
+
+  baseui_menu: {
+    find: () => [...document.querySelectorAll('button[aria-haspopup="menu"]')]
+      // 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"]');
+      const items = box ? [...box.querySelectorAll('[role^="menuitem"]')]
+        .map(o => ({ label: rsRendered(o),
+                     // the anchor is often a child or ancestor of the menu item
+                     href: (o.matches('a[href]') ? o : (o.querySelector('a[href]')
+                            || o.closest('a[href]')) || {}).href || '' }))
+        .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.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+        el.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
+        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.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) => {
+      if (d.box && d.box.isConnected) d.box.remove();
+      d.orig.style.display = 'none';
+      d.orig.removeAttribute('data-rs-done');
+      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"]')]
+              .find(m => rsRendered(m) === want);
+            if (it) it.click();
+            else document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+          }, 120);
+        });
+      });
+    },
+  },
+
+  // ARIA-level families shared across eras (same shapes as the radix file).
+  baseui_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('[role="tablist"]')]
+      .filter(t => t.querySelector('[role="tab"][aria-controls]')),
+    extract: (el) => {
+      const trigs = [...el.querySelectorAll('[role="tab"]')];
+      const st = el.__rsCap || (el.__rsCap = { caps: {} });
+      let missing = null;
+      trigs.forEach(t => {
+        const key = rsRendered(t);
+        const panel = document.getElementById(t.getAttribute('aria-controls') || '');
+        if (panel && rsRendered(panel)) st.caps[key] = { title: key, html: panel.innerHTML, panel };
+        else if (!(key in st.caps) && !missing) missing = t;
+      });
+      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.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+          missing.focus();
+          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()),
+  },
+
+  baseui_switch: {
+    find: () => [...document.querySelectorAll('button[role="switch"]')],
+    extract: (el) => ({
+      label: rsLabel(el) || rsRendered(el) || 'Toggle',
+      checked: el.getAttribute('aria-checked') === 'true',
+      orig: el,
+    }),
+    render: (d) => {
+      const id = 'rs-' + (++window.__rsSeq);
+      return `<div class="rs rs-field" data-rs-switch>
+        <label class="rs-label" for="${id}">${rsEsc(d.label)}</label>
+        <input type="checkbox" id="${id}"${d.checked ? ' checked' : ''}>
+      </div>`;
+    },
+    after: (d, holder) => {
+      d.orig.style.display = 'none';
+      d.orig.removeAttribute('data-rs-done');
+      holder.appendChild(d.orig);
+      holder.querySelector('input[type="checkbox"]')
+        .addEventListener('change', () => d.orig.click());
+    },
+  },
+})

package/rules/shadcn-radix.js

@@ -0,0 +1,289 @@
+// shadcn — RADIX era (the default primitive until July 2026; every widget rides
+// @radix-ui). Its defining hostility: a trigger
+// <button role="combobox" aria-expanded="false"> whose options DO NOT EXIST in
+// the DOM until the portal opens — the reason it scores in the benchmark's bottom
+// tier. Passive extraction can only skip, so this rule probes: it opens the
+// portal (the page's own interaction), harvests the options the page itself
+// renders, closes it, and replaces trigger+portal with a native select. Every
+// option label comes from the page; nothing is guessed.
+({
+  radix_select: {
+    find: () => [...document.querySelectorAll('button[role="combobox"]')],
+    extract: (el) => {
+      // Radix links trigger to the portalled listbox via aria-controls once open.
+      const owned = el.getAttribute('aria-controls');
+      const box = owned && document.getElementById(owned);
+      const opts = box ? [...box.querySelectorAll('[role="option"]')]
+        .map(o => ({ value: o.getAttribute('data-value') || rsRendered(o),
+                     label: rsRendered(o) })).filter(o => o.label) : [];
+      if (!opts.length) {
+        // Phase 1: not open yet. Open it and wait for the mutation pass.
+        // Guard so a select that never yields options doesn't loop forever.
+        const tries = +(el.getAttribute('data-rs-probe') || 0);
+        if (tries >= 3) return null;               // give up -> honest skip
+        el.setAttribute('data-rs-probe', String(tries + 1));
+        el.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+        el.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
+        el.click();
+        return 'retry';
+      }
+      // Phase 2: harvest, then close the portal before it is orphaned.
+      const label = rsLabel(el);
+      const current = rsRendered(el);              // the trigger shows the value
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      return { label, opts, current, box, trigger: el,
+               id: el.getAttribute('id') || '' };
+    },
+    render: (d) => {
+      const id = d.id || ('rs-' + (++window.__rsSeq));
+      const sel = d.opts.some(o => o.label === d.current) ? 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}">
+          ${sel ? '' : `<option value="" selected>${rsEsc(d.current || 'Select…')}</option>`}
+          ${d.opts.map(o => `<option value="${rsEsc(o.value)}"${o.label === sel ? ' selected' : ''}>${rsEsc(o.label)}</option>`).join('')}
+        </select>
+      </div>`;
+    },
+    // the portalled listbox is consumed by the swap, not left floating
+    removes: (d) => d.box ? [d.box] : [],
+    after: (d, holder) => {
+      // Remove only the listbox, never Radix's positioning wrapper: that wrapper
+      // can contain more than the widget, and removing it took a site's whole
+      // navigation once.
+      if (d.box && d.box.isConnected) d.box.remove();
+      // SHADOW-DRIVE the trigger. Without this the replacement displays a choice
+      // the application never receives: React holds the state, the rebuilt <select>
+      // has no connection to it, and a user or agent selects an option that changes
+      // nothing. Parity saw the trigger as lost and was right to; effect parity
+      // could not see it at all, because it only exercises controls both arms name
+      // and a replaced trigger is by definition not one of those.
+      if (!d.trigger) return;
+      d.trigger.style.display = 'none';
+      d.trigger.setAttribute('data-rs-done', '');
+      holder.appendChild(d.trigger);
+      const shown = holder.querySelector('select.rs-select');
+      if (!shown) return;
+      shown.addEventListener('change', () => {
+        const want = shown.selectedOptions[0] && shown.selectedOptions[0].textContent.trim();
+        if (!want) return;
+        // Drive the real widget the way a person would: open it, then choose.
+        d.trigger.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+        d.trigger.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
+        d.trigger.click();
+        setTimeout(() => {
+          const opt = [...document.querySelectorAll('[role="option"]')]
+            .find(o => rsRendered(o) === want);
+          if (opt) opt.click();
+          else document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        }, 140);
+      });
+    },
+  },
+
+  // ── DropdownMenu: portal probing like the select, but items may be ACTIONS.
+  // Read items are rendered as real links; action items shadow-drive the original
+  // trigger (open the real menu, click the real item) so behaviour is preserved.
+  radix_menu: {
+    find: () => [...document.querySelectorAll('button[aria-haspopup="menu"]')]
+      // 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');
+      const box = owned && document.getElementById(owned);
+      const items = box ? [...box.querySelectorAll('[role^="menuitem"]')]
+        .map(o => ({ label: rsRendered(o),
+                     // the anchor is often a child or ancestor of the menu item
+                     href: (o.matches('a[href]') ? o : (o.querySelector('a[href]')
+                            || o.closest('a[href]')) || {}).href || '' }))
+        .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.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+        el.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
+        el.click();
+        return 'retry';
+      }
+      const label = rsRendered(el) || rsLabel(el);
+      // A menu holds more than its items: a heading, an account name, an email, a
+      // separator caption. Harvesting only [role^=menuitem] deleted 'shadcn',
+      // 'm@example.com' and 'Toggle columns' from a page that shows all three.
+      const captions = [...box.children]
+        .filter(c => !c.matches('[role^="menuitem"],[role="separator"]'))
+        .map(c => rsRendered(c)).filter(Boolean)
+        .filter(t => !items.some(i => i.label === t));
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      return { label, items, captions, box, orig: el };
+    },
+    render: (d) => `<div class="rs rs-field" data-rs-menu>
+        <span class="rs-label">${rsEsc(d.label)}</span>
+        ${(d.captions || []).map(c => `<p class="rs-label">${rsEsc(c)}</p>`).join('')}
+        <ul class="rs-pages-list">${d.items.map((i, n) =>
+          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) => {
+      // Remove ONLY the menu we harvested. Removing Radix's positioning wrapper
+      // took whatever else it contained: on ui.shadcn.com that was the site's main
+      // navigation, and every /docs/... destination vanished while the faithfulness
+      // check stayed green because the words were still elsewhere on the page.
+      // Capability is not text.
+      if (d.box && d.box.isConnected) d.box.remove();
+      // shadow-drive: the original trigger rides along hidden; an action item
+      // re-opens the real menu and clicks the real item, so React state is real
+      d.orig.style.display = 'none';
+      d.orig.removeAttribute('data-rs-done');
+      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"]')]
+              .find(m => rsRendered(m) === want);
+            if (it) it.click();
+            else document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+          }, 120);
+        });
+      });
+    },
+  },
+
+  // ── Tabs: the inactive panel NODE exists but its content is unmounted, so a
+  // passive read sees an empty region. Probe: click each tab once, harvesting
+  // panels as they mount; when all are captured, replace with plain sections.
+  radix_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('[role="tablist"]')]
+      .filter(t => t.querySelector('[role="tab"][aria-controls]')),
+    extract: (el) => {
+      const trigs = [...el.querySelectorAll('[role="tab"]')];
+      const st = el.__rsCap || (el.__rsCap = { caps: {}, active0: null });
+      let missing = null;
+      trigs.forEach(t => {
+        const key = rsRendered(t);
+        if (t.getAttribute('data-state') === 'active' && st.active0 === null) st.active0 = key;
+        const panel = document.getElementById(t.getAttribute('aria-controls') || '');
+        if (panel && rsRendered(panel)) st.caps[key] = { title: key, html: panel.innerHTML, panel };
+        else if (!(key in st.caps) && !missing) missing = t;
+      });
+      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.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+          missing.focus();
+          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()),
+  },
+
+  // ── Accordion: same unmounted-content shape as tabs, different markup — a
+  // container of >= 2 button[aria-expanded][aria-controls] triggers.
+  radix_accordion: {
+    // flattening: the tab/section controls exist to reveal content this
+    // output reveals structurally, so they are subsumed, not lost
+    subsumes: true,
+    // Some shadcn accordions ship WITHOUT aria-controls (the arm we measure
+    // does), so association falls back to structure: the trigger's item wraps
+    // both the button and its content region.
+    find: () => {
+      const trigs = [...document.querySelectorAll('button[aria-expanded]')]
+        .filter(b => !b.closest('[role="tablist"]') && !b.getAttribute('aria-haspopup')
+                  && b.getAttribute('role') !== 'combobox');
+      const roots = new Set();
+      trigs.forEach(t => {
+        let r = t.parentElement;
+        for (let i = 0; r && i < 4; i++, r = r.parentElement) {
+          if ([...r.querySelectorAll(':scope button[aria-expanded]')].length >= 2) {
+            roots.add(r); return;
+          }
+        }
+      });
+      return [...roots];
+    },
+    extract: (el) => {
+      const trigs = [...el.querySelectorAll('button[aria-expanded]')];
+      const panelOf = (t) => {
+        const id = t.getAttribute('aria-controls');
+        if (id && document.getElementById(id)) return document.getElementById(id);
+        // structural: the nearest wrapper that also holds a non-trigger block
+        let item = t.parentElement;
+        for (let i = 0; item && i < 3; i++, item = item.parentElement) {
+          const cand = [...item.children].find(c => c !== t && !c.contains(t)
+            && !c.querySelector('button[aria-expanded]'));
+          if (cand) return cand;
+        }
+        return null;
+      };
+      const st = el.__rsCap || (el.__rsCap = { caps: {} });
+      let missing = null;
+      trigs.forEach(t => {
+        const key = rsRendered(t);
+        const panel = panelOf(t);
+        if (panel && rsRendered(panel)) st.caps[key] = { title: key, html: panel.innerHTML, panel };
+        else if (!(key in st.caps) && !missing) missing = t;
+      });
+      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 secs = trigs.map(t => st.caps[rsRendered(t)]).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">${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()),
+  },
+
+  // ── Switch: a button pretending to be a checkbox. Replace with a real one that
+  // shadow-drives the original, so React state stays the truth.
+  radix_switch: {
+    find: () => [...document.querySelectorAll('button[role="switch"]')],
+    extract: (el) => ({
+      label: rsLabel(el) || rsRendered(el) || 'Toggle',
+      checked: el.getAttribute('aria-checked') === 'true',
+      orig: el,
+    }),
+    render: (d) => {
+      const id = 'rs-' + (++window.__rsSeq);
+      return `<div class="rs rs-field" data-rs-switch>
+        <label class="rs-label" for="${id}">${rsEsc(d.label)}</label>
+        <input type="checkbox" id="${id}"${d.checked ? ' checked' : ''}>
+      </div>`;
+    },
+    after: (d, holder) => {
+      d.orig.style.display = 'none';
+      d.orig.removeAttribute('data-rs-done');
+      holder.appendChild(d.orig);
+      const box = holder.querySelector('input[type="checkbox"]');
+      box.addEventListener('change', () => d.orig.click());
+    },
+  },
+})