Skip to content

feat(cli): flag overlapping text blocks in inspect#1436

Open
LeopoldTr wants to merge 1 commit into
heygen-com:mainfrom
LeopoldTr:feat/inspect-content-overlap
Open

feat(cli): flag overlapping text blocks in inspect#1436
LeopoldTr wants to merge 1 commit into
heygen-com:mainfrom
LeopoldTr:feat/inspect-content-overlap

Conversation

@LeopoldTr

Copy link
Copy Markdown

Problem

hyperframes inspect compares each element against its container (overflow, clipping). It never compares two siblings against each other, so two text blocks that collide — each sitting perfectly inside its own box — render unreadable yet the audit stays green. Stacked headings, a caption landing on a title, two labels animating into the same spot: all invisible to the current checks.

Solution

Add a content_overlap check. After the overflow passes, it collects the solid text blocks (visible, text-bearing, not watermark-faint) and reports any pair whose text boxes intersect by more than a fifth of the smaller box. The finding names both blocks (selector + containerSelector), is rated error (same as clipped_text — both make text unreadable), and carries a fix hint.

Exemptions keep it quiet on intentional design:

  • Watermark-style text (colour alpha < 0.35) is decorative and skipped.
  • Nested text (one block inside the other) is never a collision.
  • Opt out of deliberate stacking with data-layout-allow-overlap, mirroring the existing data-layout-allow-overflow / data-layout-ignore escape hatches (documented in docs/packages/cli.mdx).

The check reuses the audit's existing visibility, text-rect, and selector helpers, and runs alongside the overflow passes in __hyperframesLayoutAudit — no extra Chrome launch or timeline pass.

Testing

  • New unit tests in layout-audit.browser.test.ts: flags two overlapping blocks (asserts both selectors), ignores sub-threshold overlap, ignores low-alpha watermark text, and respects the opt-out.
  • Full @hyperframes/cli suite green (771 tests); typecheck, oxlint, oxfmt, and the fallow audit gate all pass.

Note

Independent of #1435 (text occlusion) — both extend the same audit but touch disjoint logic and can land in either order.

The layout audit compares each element against its container, so two text
blocks that collide with each other — neither overflowing its own box —
render unreadable yet pass clean. Add a content_overlap check that pairs up
the solid text blocks and reports any two whose boxes intersect by more than
a fifth of the smaller box. Watermark-style text (low colour alpha) is
decorative and exempt; opt out of intentional stacking with
data-layout-allow-overlap.

Co-authored-by: Miguel Ángel <miguel07alm@protonmail.com>
@miguel-heygen

Copy link
Copy Markdown
Collaborator

@LeopoldTr sign the commit to merge it pls

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants