From 90ae2047d8c6cbb62251500b88af7671b3391d7b Mon Sep 17 00:00:00 2001 From: CRT Date: Fri, 2 Oct 2026 06:02:30 +0700 Subject: [PATCH] themeInvariants: controls are not empty frames (I6); a layer over the bar is not a bar hit-test failure (I4) Co-Authored-By: Claude Opus 5.5 --- packages/runtime/src/themeInvariants.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/runtime/src/themeInvariants.ts b/packages/runtime/src/themeInvariants.ts index cf5877e..085e070 100644 --- a/packages/runtime/src/themeInvariants.ts +++ b/packages/runtime/src/themeInvariants.ts @@ -168,7 +168,7 @@ export function runInvariants(doc: Document = document, opts: InvariantOptions = const frames: Element[] = []; for (const el of all) { if (!visible(el) || el.closest('#layers [data-testid="mask"]') || el.matches('[data-testid="mask"]')) continue; - if (!framed(el)) continue; + if (el.matches(MEDIA) || !framed(el)) continue; frames.push(el); const content = (el.textContent ?? '').trim() || [...el.querySelectorAll(MEDIA)].some(m => visible(m)) || [...el.querySelectorAll('*')].some(c => cs(c).backgroundImage !== 'none' && visible(c)); if (!content) add('I6', el, `empty frame ${rectOf(el)[2]}x${rectOf(el)[3]} ${cs(el).backgroundColor}`, rectOf(el)[3]); @@ -176,7 +176,8 @@ export function runInvariants(doc: Document = document, opts: InvariantOptions = for (const el of frames) { const fill = cs(el).backgroundColor; const column = el.querySelector('[data-testid="sidebarColumn"], [data-testid="primaryColumn"]'); - const inner = frames.find(f => f !== el && el.contains(f) && cs(f).backgroundColor === fill && parse(fill)![3] > 0 && /solid|inset/.test(cs(f).borderTopStyle + cs(f).boxShadow)); + // Controls (a bevelled button on a bevelled bar, a pill in a card) are not frames: only boxes nest wrongly. + const inner = frames.find(f => f !== el && el.contains(f) && !f.closest('a, button, [role="button"], [role="link"], [role="tab"], input, label') && cs(f).backgroundColor === fill && parse(fill)![3] > 0 && /solid|inset/.test(cs(f).borderTopStyle + cs(f).boxShadow)); if (column) add('I7', el, `frame holds the ${column.getAttribute('data-testid')}`); else if (inner) add('I7', el, `frame holds a frame of the same fill (${sel(inner)})`); } @@ -201,6 +202,8 @@ export function runInvariants(doc: Document = document, opts: InvariantOptions = const r = rects[i]; const x = r.left + r.width / 2, y = r.top + r.height / 2; if (x < 0 || y < 0 || x > vw || y > vh) { add('I4', item, 'item off screen'); continue; } const hit = doc.elementFromPoint(x, y); + // A layer over the bar (modal mask, menu, hover card) is I8's business, not the bar's. + if (hit?.closest('#layers')) continue; if (!hit || !(item === hit || item.contains(hit))) add('I4', item, `item not hit-testable (under ${hit ? sel(hit) : 'nothing'})`); } }