@12ui/design 0.2.51 → 0.2.53

package/prototype-kit/build.mjs

@@ -4,7 +4,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { parseHTML } from 'linkedom';
 import { resolveDropdownAction } from './lib/actions.mjs';
-import { restoreActionPointerReachability, selectUniqueActionOwners } from './lib/action-target.mjs';
+import { selectUniqueActionOwners, sourceInertActionReason } from './lib/action-target.mjs';
 import {
   HOLDING_SHELL_ATTRIBUTE,
   holdingBlockGeometry,
@@ -157,6 +157,7 @@ const report = {
   unbound: [],
   invalidDropdowns: [],
   actionDemotions: [],
+  inertActionCandidates: [],
   duplicateActionOwners: [],
   shellSizeDelta: [],
   shellAmbiguities: model.shellAmbiguities || [],
@@ -242,12 +243,20 @@ function actionsFor(s) {
 }
 
 function bindAction(el, action) {
+  const inertReason = sourceInertActionReason(el);
+  if (inertReason) {
+    for (const attribute of ['data-proto-action', 'data-proto-target', 'data-proto-options', 'data-proto-label', 'data-proto-modal']) {
+      el.removeAttribute(attribute);
+    }
+    el.setAttribute('data-proto-inert', inertReason);
+    return { bound: false, reason: inertReason };
+  }
   el.setAttribute('data-proto-action', action.action);
   if (action.target) el.setAttribute('data-proto-target', action.target);
   if (action.options) el.setAttribute('data-proto-options', JSON.stringify(action.options));
   if (action.labelId) el.setAttribute('data-proto-label', action.labelId);
   if (action.modal) el.setAttribute('data-proto-modal', JSON.stringify(action.modal));
-  restoreActionPointerReachability(el);
+  return { bound: true, reason: null };
 }
 
 const stateActions = new Map(states.map((state) => [state.stateId, actionsFor(state)]));
@@ -321,7 +330,12 @@ for (const u of units) {
         else report.unbound.push({ state: s.stateId, id, action: a.action });
         continue;
       }
-      bindAction(el, a);
+      const binding = bindAction(el, a);
+      if (!binding.bound) {
+        report.inertActionCandidates.push({ state: s.stateId, id, action: a.action, reason: binding.reason });
+        report.counts.none++;
+        continue;
+      }
       report.counts[a.action]++;
       allActions[id] = a;
     }
@@ -342,13 +356,33 @@ for (const u of units) {
         : [...el.querySelectorAll('.text')].find((t) => !t.closest('button'))
         || (el.textContent.trim() && [...el.children].every((c) => !c.children.length) ? el : null);
       if (!textEl || textEl.closest('button')) continue;
+      const fieldInertReason = sourceInertActionReason(el);
+      if (fieldInertReason) {
+        el.setAttribute('data-proto-inert', fieldInertReason);
+        report.inertActionCandidates.push({ state: s.stateId, id: el.id, action: 'field', reason: fieldInertReason });
+        continue;
+      }
       el.setAttribute('data-proto-field', textEl.id);
       el.setAttribute('data-proto-submit', /search/i.test(f.id + f.placeholder) ? 'Search' : 'Send');
       // a sibling send/submit button under the same parent submits the field
       const parent = el.parentElement;
       const send = parent && [...parent.querySelectorAll('button')].find((b) => /send|submit|go$|search|arrow/.test(b.id) && !b.textContent.trim());
       // bind the button's container too: the icon often sits beside (not inside) the button and swallows the click
-      if (send) (send.parentElement && send.parentElement !== parent ? send.parentElement : send).setAttribute('data-proto-submit-for', textEl.id);
+      if (send) {
+        const submitOwner = send.parentElement && send.parentElement !== parent ? send.parentElement : send;
+        // Check the native button itself, not just the (possibly promoted)
+        // owner: closest() only walks UPWARD, so a submitOwner check alone
+        // misses a disabled attribute sitting directly on `send` when the
+        // owner is its parent wrapper. Checking `send` covers `send` AND
+        // everything above it, submitOwner included.
+        const submitInertReason = sourceInertActionReason(send);
+        if (submitInertReason) {
+          submitOwner.setAttribute('data-proto-inert', submitInertReason);
+          report.inertActionCandidates.push({ state: s.stateId, id: submitOwner.id || send.id, action: 'field-submit', reason: submitInertReason });
+        } else {
+          submitOwner.setAttribute('data-proto-submit-for', textEl.id);
+        }
+      }
       fieldCount++; report.counts.field++;
     }
     // content layer
@@ -359,14 +393,17 @@ for (const u of units) {
   const unitRegions = new Set(u.states.flatMap((state) => state.shell.map((item) => item.region)));
   for (const region of unitRegions) for (const [id, action] of canonicalShellActions[region] || []) {
     const elements = shellElementsForSourceId(document, id);
+    let bound = false;
     for (const element of elements) {
       const scope = element.closest('.ly-band[data-ly-band]') || document;
       const labelId = action.labelId
         ? shellElementsForSourceId(scope, action.labelId)[0]?.id || action.labelId
         : null;
-      bindAction(element, labelId ? { ...action, labelId } : action);
+      const binding = bindAction(element, labelId ? { ...action, labelId } : action);
+      if (binding.bound) bound = true;
+      else report.inertActionCandidates.push({ unit: u.id, region, id: element.id || id, action: action.action, reason: binding.reason });
     }
-    if (elements.length && !allActions[id]) {
+    if (bound && !allActions[id]) {
       allActions[id] = action;
       report.shellActionRemaps++;
     }
@@ -378,7 +415,11 @@ for (const u of units) {
     for (const el of targets) {
       const tgt = n.target ? (unitOf(n.target)?.id === u.id ? null : fileOf(n.target)) : holdingFile(n.text);
       if (!tgt) { el.removeAttribute('data-proto-action'); continue; }
-      el.setAttribute('data-proto-action', 'navigate'); el.setAttribute('data-proto-target', tgt);
+      const binding = bindAction(el, { action: 'navigate', target: tgt });
+      if (!binding.bound) {
+        report.inertActionCandidates.push({ unit: u.id, id: el.id || n.rowId, action: 'navigate', reason: binding.reason });
+        continue;
+      }
       for (const d of el.querySelectorAll('[data-proto-action]')) { d.removeAttribute('data-proto-action'); d.removeAttribute('data-proto-target'); delete allActions[d.id]; }
       allActions[n.rowId] = { action: 'navigate', target: tgt, nav: true };
     }
@@ -609,7 +650,11 @@ for (const u of units) {
       const targets = elements.length > 0 ? elements : shellElementsForSourceId(document, n.id);
       for (const el of targets) {
         const tgt = n.holding === hslug ? null : n.target ? fileOf(n.target) : holdingFile(n.text);
-        if (tgt) { el.setAttribute('data-proto-action', 'navigate'); el.setAttribute('data-proto-target', tgt); for (const d of el.querySelectorAll('[data-proto-action]')) d.removeAttribute('data-proto-action'); }
+        if (tgt) {
+          const binding = bindAction(el, { action: 'navigate', target: tgt });
+          if (binding.bound) for (const d of el.querySelectorAll('[data-proto-action]')) d.removeAttribute('data-proto-action');
+          else report.inertActionCandidates.push({ holding: hslug, id: el.id || n.rowId, action: 'navigate', reason: binding.reason });
+        }
       }
     }
     document.title = htitle;
@@ -629,5 +674,5 @@ fs.writeFileSync(path.join(outDir, 'index.html'), `<!doctype html><meta http-equ
 const manifestHoldings = review
   ? [...usedHoldings.entries()].map(([holding, title]) => [holding.replace(/\.html$/, ''), title])
   : [...usedHoldings.entries()];
-fs.writeFileSync(path.join(outDir, 'proto-manifest.json'), JSON.stringify({ units: report.units, nav: navRows.map((n) => ({ text: n.text, target: n.target, holding: n.holding, rowId: n.rowId })), holdings: manifestHoldings, counts: report.counts, unbound: report.unbound, invalidDropdowns: report.invalidDropdowns, ...(report.actionDemotions.length > 0 ? { actionDemotions: report.actionDemotions } : {}), ...(report.duplicateActionOwners.length > 0 ? { duplicateActionOwners: report.duplicateActionOwners } : {}), shellSizeDelta: report.shellSizeDelta, shellAmbiguities: report.shellAmbiguities, suppressedShellOverlaps: report.suppressedShellOverlaps, skippedShellTransplants: report.skippedShellTransplants, replacedShellActions: report.replacedShellActions, shellActionRemaps: report.shellActionRemaps, scriptDirections: states.map(({ stateId, scriptDirection, writingMode }) => ({ stateId, scriptDirection, writingMode })), canonicalShell: model.canonicalShell, canonicalShellPage: report.canonicalShellPage, shellConsistency: report.shellConsistency, ...(review ? { review } : {}) }, null, 1));
+fs.writeFileSync(path.join(outDir, 'proto-manifest.json'), JSON.stringify({ units: report.units, nav: navRows.map((n) => ({ text: n.text, target: n.target, holding: n.holding, rowId: n.rowId })), holdings: manifestHoldings, counts: report.counts, unbound: report.unbound, invalidDropdowns: report.invalidDropdowns, ...(report.actionDemotions.length > 0 ? { actionDemotions: report.actionDemotions } : {}), ...(report.inertActionCandidates.length > 0 ? { inertActionCandidates: report.inertActionCandidates } : {}), ...(report.duplicateActionOwners.length > 0 ? { duplicateActionOwners: report.duplicateActionOwners } : {}), shellSizeDelta: report.shellSizeDelta, shellAmbiguities: report.shellAmbiguities, suppressedShellOverlaps: report.suppressedShellOverlaps, skippedShellTransplants: report.skippedShellTransplants, replacedShellActions: report.replacedShellActions, shellActionRemaps: report.shellActionRemaps, scriptDirections: states.map(({ stateId, scriptDirection, writingMode }) => ({ stateId, scriptDirection, writingMode })), canonicalShell: model.canonicalShell, canonicalShellPage: report.canonicalShellPage, shellConsistency: report.shellConsistency, ...(review ? { review } : {}) }, null, 1));
 console.error('counts', JSON.stringify(report.counts), 'unbound', report.unbound.length);

package/prototype-kit/lib/action-target.mjs

@@ -1,12 +1,38 @@
-/** Restore pointer reachability only when the selected action target explicitly
- * disables it. The model-selected element remains the action owner. */
-export function restoreActionPointerReachability(element) {
-  if (element.style.getPropertyValue('pointer-events').trim().toLowerCase() !== 'none') {
-    return false;
+const SOURCE_INERT_ATTRIBUTES = [
+  ['disabled', 'disabled'],
+  ['inert', 'inert'],
+  ['hidden', 'hidden'],
+  ['data-proto-demoted', 'demoted'],
+  // The converter's own canonical marker for a non-native control it
+  // deliberately left presentational (unresolved anchor/role control) —
+  // see workers/api/src/conversionPackage/siteAuthoredControls.ts. This is
+  // a real source-declared inert state, not a model artifact, and must be
+  // checked here alongside the native disabled/inert/hidden cases.
+  ['data-12ui-presentational-control', 'presentational-control'],
+];
+
+// WAI-ARIA 1.2: aria-disabled="true" on an ancestor disables the element and
+// ALL focusable descendants — a nearer descendant's own aria-disabled="false"
+// does not cancel it. closest('[aria-disabled]') stops at the first match
+// regardless of its value, so it can find a descendant's "false" and miss a
+// "true" further up. Walk the whole ancestor chain instead.
+function ariaDisabledAncestor(element) {
+  for (let node = element; node; node = node.parentElement) {
+    const value = node.getAttribute && node.getAttribute('aria-disabled');
+    if (value != null && value.trim().toLowerCase() === 'true') return node;
+  }
+  return null;
+}
+
+/** A source-declared inert state outranks a model-selected action. The builder
+ * records the rejected selection, while the browser runtime repairs only the
+ * targets that survive this boundary and its own action validation. */
+export function sourceInertActionReason(element) {
+  for (const [attribute, reason] of SOURCE_INERT_ATTRIBUTES) {
+    if (element.closest(`[${attribute}]`)) return reason;
   }
-  element.style.setProperty('pointer-events', 'auto');
-  element.setAttribute('data-proto-pointer-restored', 'true');
-  return true;
+  if (ariaDisabledAncestor(element)) return 'aria-disabled';
+  return null;
 }
 
 /**

package/prototype-kit/lib/runtime-check.mjs

@@ -23,9 +23,8 @@ function configuredWidths(protoDir, file) {
   }
 }
 
-async function smokeInteraction(page, selector, assertion) {
-  const locator = page.locator(selector).first();
-  if (!await locator.count()) return { present: false, ok: true };
+async function smokeInteraction(page, locator, assertion, index) {
+  const id = await locator.getAttribute('id');
   let reviewClearanceAdded = false;
   try {
     reviewClearanceAdded = await locator.evaluate((element) => {
@@ -49,7 +48,7 @@ async function smokeInteraction(page, selector, assertion) {
     // the gate measures whether the action is reachable anywhere in the
     // scrollable page, rather than only at its initial occluded position.
     await locator.evaluate((element) => element.scrollIntoView({ block: 'center', inline: 'nearest' }));
-    const point = await locator.evaluate((element) => {
+    const hitTest = await locator.evaluate((element) => {
       const rect = element.getBoundingClientRect();
       const insetX = Math.min(8, rect.width / 4);
       const insetY = Math.min(8, rect.height / 4);
@@ -60,22 +59,26 @@ async function smokeInteraction(page, selector, assertion) {
         [rect.left + insetX, rect.bottom - insetY],
         [rect.right - insetX, rect.bottom - insetY],
       ];
+      const receivers = [];
       for (const [x, y] of points) {
         const receiver = document.elementFromPoint(x, y);
-        if (receiver?.closest('[data-proto-action]') === element) return { x, y };
+        receivers.push(receiver?.id || receiver?.tagName?.toLowerCase() || null);
+        if (receiver?.closest('[data-proto-runtime-bound]') === element) {
+          return { point: { x, y }, receivers, pointerEvents: getComputedStyle(element).pointerEvents };
+        }
       }
-      return null;
+      return { point: null, receivers, pointerEvents: getComputedStyle(element).pointerEvents };
     });
-    if (!point) return { present: true, ok: false, error: 'no pointer-reachable point' };
+    if (!hitTest.point) return { id, index, present: true, ok: false, ...hitTest, error: 'no pointer-reachable point' };
     // A real pointer lands on the rendered child and bubbles to its action
     // wrapper. locator.click() rejects that valid shape as "intercepted".
-    await page.mouse.click(point.x, point.y);
+    await page.mouse.click(hitTest.point.x, hitTest.point.y);
     const opened = await page.locator(assertion).count();
     const ok = opened === 1;
     await page.keyboard.press('Escape');
-    return { present: true, ok, point, opened };
+    return { id, index, present: true, ok, ...hitTest, opened };
   } catch (error) {
-    return { present: true, ok: false, error: errorText(error) };
+    return { id, index, present: true, ok: false, error: errorText(error) };
   } finally {
     if (reviewClearanceAdded) {
       await page.locator('[data-proto-runtime-clearance="true"]').evaluateAll((nodes) => nodes.forEach((node) => node.remove())).catch(() => null);
@@ -83,6 +86,22 @@ async function smokeInteraction(page, selector, assertion) {
   }
 }
 
+async function smokeInteractions(page, action, assertion) {
+  const locators = page.locator(`[data-proto-runtime-bound="${action}"]`);
+  const count = await locators.count();
+  if (count === 0) return { present: false, ok: true, probed: 0, probes: [] };
+  const probes = [];
+  for (let index = 0; index < count; index++) {
+    probes.push(await smokeInteraction(page, locators.nth(index), assertion, index));
+  }
+  return {
+    present: true,
+    ok: probes.every((probe) => probe.ok),
+    probed: probes.length,
+    probes,
+  };
+}
+
 async function checkDeepLinkBack(browser, url, pageFile) {
   const page = await browser.newPage({ viewport: { width: 1536, height: 1024 } });
   try {
@@ -426,8 +445,8 @@ export async function checkRuntime({ browser, baseUrl, relativeProtoPath, protoD
             if (!fs.existsSync(targetPath)) brokenTargets.push({ page: file, target, reason: 'missing file' });
             else if (hash && !fs.readFileSync(targetPath, 'utf8').includes(`id="${hash}"`)) brokenTargets.push({ page: file, target, reason: 'missing anchor' });
           }
-          dropdown = await smokeInteraction(page, '[data-proto-action="dropdown"]', '.proto-menu');
-          modal = await smokeInteraction(page, '[data-proto-action="modal"]', '.proto-modal');
+          dropdown = await smokeInteractions(page, 'dropdown', '.proto-menu');
+          modal = await smokeInteractions(page, 'modal', '.proto-modal');
         }
         viewports.push({ width, ok: pageErrors.length === 0 && composition.ok && shellState.ok, pageErrors, consoleErrors, composition, shellState });
       } catch (error) {

package/prototype-kit/polish/ground-probe.mjs

@@ -44,7 +44,10 @@ export function shadowGradientProfile(data, info, x, want) {
 export async function probeSeams(page, seams, baselineDocumentHeight) {
   const failures = []; let probes = 0; let toleratedShadowGradients = 0;
   const height = await page.evaluate(() => document.documentElement.scrollHeight);
-  const expected = (baselineDocumentHeight || 0) + seams.reduce((n, s) => n + s.addition, 0);
+  const declaredExpectedHeights = [...new Set(seams.map((seam) => seam.expectedDocumentHeight).filter(Number.isFinite))];
+  if (declaredExpectedHeights.length > 1) failures.push({ kind: 'document-height-declaration', declared: declaredExpectedHeights });
+  const expected = declaredExpectedHeights[0]
+    ?? (baselineDocumentHeight || 0) + seams.reduce((n, s) => n + s.addition, 0);
   if (baselineDocumentHeight && Math.abs(height - expected) > 1) failures.push({ kind: 'document-height', expected, actual: height });
   const floor = await page.evaluate(() => ({
     body: getComputedStyle(document.body).backgroundColor,

package/prototype-kit/polish/measure.mjs

@@ -25,11 +25,11 @@ export function pageMetricsScript() {
       return c;
     };
     const kindOf = (el) => isText(el) ? 'text' : (el.tagName === 'BUTTON' || el.classList.contains('button')) ? 'button' : el.classList.contains('icon') ? 'icon' : (el.tagName === 'IMG' || el.classList.contains('image')) ? 'image' : el.classList.contains('badge') ? 'badge' : el.classList.contains('divider') ? 'divider' : 'box';
-    const sameKind = (A, B) => { const ka = kindOf(A.el), kb = kindOf(B.el); if (ka !== kb) return false; if (ka === 'text') return Math.abs(parseFloat(getComputedStyle(A.el).fontSize) - parseFloat(getComputedStyle(B.el).fontSize)) < 1 && Math.abs(A.r.h - B.r.h) < 3; if (ka === 'box') return Math.abs(A.r.h - B.r.h) <= 4 || Math.abs(A.r.w - B.r.w) <= 4; return Math.abs(A.r.h - B.r.h) < 3; };
+    const sameKind = (A, B) => { const ka = kindOf(A.el), kb = kindOf(B.el); if (ka !== kb) return false; if (ka === 'text') return Math.abs(Number.parseFloat(getComputedStyle(A.el).fontSize) - Number.parseFloat(getComputedStyle(B.el).fontSize)) < 1 && Math.abs(A.r.h - B.r.h) < 3; if (ka === 'box') return Math.abs(A.r.h - B.r.h) <= 4 || Math.abs(A.r.w - B.r.w) <= 4; return Math.abs(A.r.h - B.r.h) < 3; };
     const imageBacked = (el, r) => { let a = el.parentElement; while (a) { if (getComputedStyle(a).backgroundImage !== 'none') return true; a = a.parentElement; } const s = secOf(el); for (const im of s.querySelectorAll('img, .image, .decoration, .chart, svg, canvas, video')) { const ir = im.getBoundingClientRect(); if (ir.width && ir.height && Math.min(ir.right, r.right) - Math.max(ir.left, r.left) > 0 && Math.min(ir.bottom, r.bottom) - Math.max(ir.top, r.top) > 0) return true; } return false; };
     const visible = (el) => {
       const cs = getComputedStyle(el);
-      if (cs.display === 'none' || cs.visibility === 'hidden' || parseFloat(cs.opacity) === 0) return false;
+      if (cs.display === 'none' || cs.visibility === 'hidden' || Number.parseFloat(cs.opacity) === 0) return false;
       const r = el.getBoundingClientRect();
       return r.width > 0 && r.height > 0;
     };
@@ -54,7 +54,7 @@ export function pageMetricsScript() {
       .filter((el) => visible(el) && !el.closest('#proto-overlay-root') && !el.querySelector('.text, .paragraph') && !(el.matches('button, .button') && el.closest('.proto-notice, .proto-holding-block')));
     const containers = qsa('div[id], button[id], aside[id], header[id], footer[id], nav[id], article[id], form[id], main[id]')
       .filter((el) => visible(el) && !el.closest('#proto-overlay-root'));
-    const parseRgb = (s) => { const m = s && s.match(/rgba?\(([^)]+)\)/); if (!m) return null; const p = m[1].split(',').map(parseFloat); return { r: p[0], g: p[1], b: p[2], a: p[3] === undefined ? 1 : p[3] }; };
+    const parseRgb = (s) => { const m = s && s.match(/rgba?\(([^)]+)\)/); if (!m) return null; const p = m[1].split(',').map(Number.parseFloat); return { r: p[0], g: p[1], b: p[2], a: p[3] === undefined ? 1 : p[3] }; };
     const lum = (c) => { const f = (v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }; return 0.2126 * f(c.r) + 0.7152 * f(c.g) + 0.0722 * f(c.b); };
     // what is actually painted under the text: walk the hit-test stack at the text centre
     const effectiveBg = (el) => {
@@ -88,7 +88,7 @@ export function pageMetricsScript() {
       let a = el.parentElement, esc = null;
       while (a && a !== sec) {
         const cs2 = getComputedStyle(a); const bg = parseRgb(cs2.backgroundColor);
-        if ((bg && bg.a > 0.5) || parseFloat(cs2.borderTopWidth) > 0) {
+        if ((bg && bg.a > 0.5) || Number.parseFloat(cs2.borderTopWidth) > 0) {
           const ar = rel(a.getBoundingClientRect(), el);
           const over = Math.max(t.r - ar.r, ar.x - t.x, t.b - ar.b, ar.y - t.y);
           if (over > 1.5) esc = { kind: 'escape', px: +over.toFixed(1), container: a.id, ...box };
@@ -248,7 +248,7 @@ export function pageMetricsScript() {
         let la = hr.left, ra = hr.right;
         for (const b of boxes) { if (b === host || g.some((x) => b === x.el || b.contains(x.el))) continue; const br = b.getBoundingClientRect(); if (!br.width || br.top >= bottom || br.bottom <= top) continue; if (br.right <= left + 1) la = Math.max(la, br.right); if (br.left >= right - 1) ra = Math.min(ra, br.left); }
         const li = left - la, ri = ra - right;
-        const expL = parseFloat(host.getAttribute('data-proto-fit-left')), expR = parseFloat(host.getAttribute('data-proto-fit-right'));
+        const expL = Number.parseFloat(host.getAttribute('data-proto-fit-left')), expR = Number.parseFloat(host.getAttribute('data-proto-fit-right'));
         let bad = false;
         const partial = host.hasAttribute('data-proto-fit-partial');
         // a partial re-centre (ink stopped at the box edge) is judged as 'no worse than the donor', not as centred
@@ -264,7 +264,7 @@ export function pageMetricsScript() {
     out.rail = [];
     {
       const INK = '.text, .paragraph, h1, h2, h3, h4, h5, h6, .icon, img, .image, .badge, button, .button';
-      const paintedBox = (el) => { const cs = getComputedStyle(el); const bg = parseRgb(cs.backgroundColor); return (bg && bg.a > 0.5) || parseFloat(cs.borderLeftWidth) > 0; };
+      const paintedBox = (el) => { const cs = getComputedStyle(el); const bg = parseRgb(cs.backgroundColor); return (bg && bg.a > 0.5) || Number.parseFloat(cs.borderLeftWidth) > 0; };
       for (const sec of scope) {
         const sb = sec.getBoundingClientRect();
         const edgeOf = (el) => { const r = el.getBoundingClientRect(); let left = paintedBox(el) ? r.left : Infinity, right = paintedBox(el) ? r.right : -Infinity; for (const k of [...(el.matches(INK) ? [el] : []), ...el.querySelectorAll(INK)]) { if (!visible(k)) continue; const kr = k.getBoundingClientRect(); if (kr.left - sb.left <= 2) continue; left = Math.min(left, kr.left); right = Math.max(right, kr.right); } for (const k of el.querySelectorAll('[id]:not(.text):not(.icon):not(img):not(button)')) { if (!visible(k) || !paintedBox(k)) continue; const kr = k.getBoundingClientRect(); if (kr.left - sb.left <= 2 || kr.width < 40) continue; left = Math.min(left, kr.left); right = Math.max(right, kr.right); } return Number.isFinite(left) ? { left: left - sb.left, right: right - sb.left } : null; };