feat(hdr): z-ordered multi-layer compositing with PQ support

[vanceingalls]

Summary

Phase 1 only handled HDR video on the bottom with DOM on top. Real compositions need arbitrary z-interleaving — HDR video between DOM layers, multiple HDR videos at different z-depths, SDR video as background below HDR. This PR adds per-frame z-order analysis and layer-by-layer compositing.

What it does

Per-frame algorithm:

1. Query stacking order — queryElementStacking() asks Chrome for every timed element's z-index, bounds, opacity, visibility, and whether it's an HDR video.
2. Group into layers — groupIntoLayers() walks the z-sorted list. Each time the content type switches (DOM ↔ HDR), a new layer starts. Adjacent DOM elements merge into a single layer (fewer Chrome screenshots).
3. Composite bottom-to-top — DOM layers get Chrome alpha screenshots (with non-layer elements hidden). HDR layers get native pixel blits from pre-extracted frames. Each layer composites onto the running canvas.

Example z-order:

z=0: SDR background     → DOM layer 0 (1 screenshot)
z=1: HDR video           → HDR layer 1 (native blit)  
z=2: text overlay        → DOM layer 2 (1 screenshot)
z=3: HDR circle video    → HDR layer 3 (native blit)
z=4: logo                → DOM layer 4 (1 screenshot)

This produces 3 screenshots + 2 native blits = 5 layer operations per frame.

Also adds PQ (HDR10) support:

• buildSrgbToHdrLut("pq") — PQ OETF (SMPTE 2084) maps SDR white to ~203 nits (~58% PQ signal)
• blitRgba8OverRgb48le() now accepts transfer: "hlg" | "pq" parameter
• blitRgb48leRegion() — positioned rectangular copy with bounds clipping and optional opacity

Files changed

File	What changed
packages/engine/src/utils/layerCompositor.ts	NEW — groupIntoLayers(), CompositeLayer type
packages/engine/src/services/videoFrameInjector.ts	queryElementStacking() with effective z-index walk, ElementStackingInfo type
packages/engine/src/utils/alphaBlit.ts	PQ LUT, blitRgb48leRegion(), transfer parameter
packages/producer/src/services/renderOrchestrator.ts	Layer-driven compositing loop replacing simple two-pass

How to test

Render a composition with SDR video below HDR video below text overlays. All three should be visible at their correct z-depths.

Stack position

4 of 6 — Stacked on #288 (two-pass compositing). Generalizes the fixed two-layer model to arbitrary N-layer compositing.

🤖 Generated with Claude Code

[vanceingalls]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(hdr): shader transitions between HDR scenes + SDR rendering fixes #268
• feat(hdr): GSAP transforms and border-radius masks on HDR video #290
• feat(hdr): z-ordered multi-layer compositing with PQ support #289 👈 (View in Graphite)
• feat(engine): add HDR two-pass compositing — DOM layer + native HLG video #288
• feat(engine): add HDR video output pipeline #265
• fix(engine): normalize mixed HDR/SDR video inputs #258
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.