fix(check): name a color-graded video by its own selector in layout findings - #7699

Context: I've been using HyperFrames every day for the past two weeks to make Korean Shorts and long-form videos, and it's been great to work with. This PR is one of a batch of fixes for things I ran into along the way, so you'll see several PRs from me at once — sorry for the pile-up, and thanks for your patience. Each one is reproduced on current main, independent of the others, and can be reviewed, merged or closed on its own.

What

When a layout finding lands on a color-graded <video>, check now names the video the author wrote (#c1-v) instead of the canvas the runtime paints the grade into (#__hf_color_grading_c1-v). The finding's data attributes and source file come from the video too.

Why

A Short had a slight punch-in (scale: 1.06) on a graded video inside its scene's overflow: hidden root. check reported:

⚠ t=3.763, 6.272s container_overflow #__hf_color_grading_c1-v inside #h-c1 > div:nth-of-type(1) overflowed left 19.44px, right 45.36px, bottom 57.24px — Element extends outside a clipping layout container.
      Fix: Resize/reposition the child or container, or mark intentional overflow with data-layout-allow-overflow.

#__hf_color_grading_c1-v does not exist in the source. The runtime inserts it next to the video when data-color-grading is set. The hint says to put data-layout-allow-overflow on the element, and an author or agent cannot tell where that goes. The flag does work on the <video>: hasAllowOverflowFlag already resolves the canvas to its video through authoredElement (#5963). Only the name in the finding was wrong. The JSON had the same problem: dataAttributes listed data-hf-color-grading-canvas and data-hf-ignore, and the video's own attributes were missing.

Related work

• fix(cli): check audits a color-graded video's canvas as the video it shows #5963 taught check to read a graded video's canvas as the video (flags, ignore, occlusion). This PR applies the same mapping to the reported name.
• No open issue or PR covers this. I searched "color grading overflow", "__hf_color_grading" and "allow-overflow color grading".

How

packages/cli/src/commands/layout-audit.browser.js: uniqueSelectorFor starts from authoredElement(subject). That helper maps a [data-hf-color-grading-canvas] stand-in to the element before it and returns every other element unchanged. uniqueSelectorFor names every layout finding, so all rules now name the authored video, not only container_overflow. The rect is still the canvas's, which covers the same box as the video.

Test plan

Unit (packages/cli/src/commands/layout-audit.browser.test.ts): the existing container_overflow case for a graded video inside a clipping wrapper now expects selector #clip (the video), not #art (the canvas). On main (affa03b6) with the fix stashed it fails with expected [ '#art' ] to deeply equal [ '#clip' ]. With the fix, layout-audit.browser, layout-audit.video-alpha.browser, contrast-occlusion.browser and layoutAudit pass: 319 tests. The branch is rebased onto 49623307 (#7680 also touched layout-audit.browser.js, and the rebase was clean). After the rebase, layout-audit.browser.test.ts passes 220 tests.

Real CLI on the original project (three graded clips with scale punch-ins inside overflow: hidden scene roots), hyperframes check --no-cache:

main affa03b6
  ⚠ t=3.763, 6.272s container_overflow #__hf_color_grading_c1-v inside #h-c1 > div:nth-of-type(1) overflowed left 19.44px, right 45.36px, bottom 57.24px …
  ⚠ t=8.781, 11.29, 13.799s container_overflow #__hf_color_grading_c2-v inside #h-c2 > div:nth-of-type(1) …
  ℹ t=21.326s container_overflow #__hf_color_grading_p3-v inside #h-p3 > div:nth-of-type(1) …

this branch
  ⚠ t=3.763, 6.272s container_overflow #c1-v inside #h-c1 > div:nth-of-type(1) overflowed left 19.44px, right 45.36px, bottom 57.24px …
  ⚠ t=8.781, 11.29, 13.799s container_overflow #c2-v inside #h-c2 > div:nth-of-type(1) …
  ℹ t=21.326s container_overflow #p3-v inside #h-p3 > div:nth-of-type(1) …

After adding data-layout-allow-overflow to <video id="c1-v">, both builds drop the c1 finding, so the flag already worked. In --json, main lists the other two as #__hf_color_grading_c2-v with dataAttributes data-hf-color-grading-canvas, data-hf-ignore, …. This branch lists them as #c2-v with data-color-grading, data-duration, data-has-audio, …, and sourceFile is compositions/c2.html on both.

Gates: oxlint and oxfmt are clean. fallow audit --base origin/main reports no issues. The comment ratchet passes, and the lefthook typecheck passes.