North-star reference re-captured with the pinned fonts, the video iframe slot and cover markers

[thejackshelton]

What changed (T034, after fonts wiring #29/#39 and the Lato ruling)

• Fonts. Chrome renders the reference with the north star's pinned font map: Lato 2.015 Regular and Bold, and sans-serif as Dragon Sans (Inter 4.1), injected from the vendored bytes as T033 §1.3 states.
  • The map moved into the new tools/font-map.ts, so check.ts and the capture can't disagree. check.ts throws if its font list drifts from the map.
  • The pixel manifest records the map, each face's sha256 and the rewrite.
• Font key. It goes from f2115f3b (Helvetica) to f159ba87: Lato-Regular, Lato-Bold, Inter-Regular and ZapfDingbatsITC. The last is the one host fallback left, for U+275A, which neither pinned face has; symbol fallback is TXT1d's job.
• Video slot. The placeholder is captured as REPL-a's iframe slot.
  • The tree's video-placeholder node is now el: iframe, with the embed src (the controller's playerVars plus enablejsapi=1; host-dependent origin/widgetid are left out).
  • The embed URL is served a local stand-in, labelled as one: empty HTML with the slot's dark color-scheme, so the out-of-process frame is transparent and the capture is deterministic.
  • Any other request now fails the capture instead of being dropped silently.
• Covers. Each cover gains nine flat marker squares where REPL-a's flat-image sample grid lands. Each reaches 25 source px from its centre: the 9 px filter support of the smallest cover drawn, plus 16.
• Size. 100 captures, 27.63 MB, plus 0.17 MB of covers.

Passed (macOS)

• north-star:capture three times: byte-identical
• north-star:check twice: byte-identical
• pnpm typecheck
• pnpm test: 143 files, 3028 tests
• No device run is needed; the north-star device lane is T018.

Test changes, with reasons

• north-star-tree.test now compares the tree with withVideoIframe(freeStateHtml(...)). The tree models the DOM after the IFrame API runs, which is what the reference captures; the intent is unchanged.
• north-star-reference.test gains checks for:
  • the font map and face sha256s;
  • pinned-face-only text, apart from the U+275A host fallback;
  • the iframe slot at the placeholder box, with its stand-in row;
  • flat marker patches wider than the smallest drawn cover's filter support.

north-star-check.json on master gains one DRAGON_UNSUPPORTED_ELEMENT and one DRAGON_UNSUPPORTED_ATTRIBUTE (the iframe src) per target. These are true diagnostics until REPL-a, which supports the iframe, lands.

🤖 Generated with Claude Code

Note

Re-capture north-star music-player reference with pinned fonts, iframe video slot, and cover markers

Regenerates the music-player Chrome reference captures against a pinned font stack, a local YouTube embed stand-in, and marker patches on the generated cover images.

• Introduces the shared font map in font-map.ts with pinned Inter/Lato face sources; capture-chrome.ts injects them as data URLs, rewrites generic font families, and fails the capture on refused requests or font-rewrite mismatches.
• Adds the withVideoIframe transformer in snapshot.ts to replace the video placeholder with an iframe at a fixed embed URL, routed to a local dark-scheme stand-in instead of the live YouTube document.
• Adds nine flat marker patches at fixed sampling locations in generated cover PNGs via cover-png.ts.
• Regenerates all browser snapshot fixtures and screenshots across the iOS and Android device captures to record Inter/Lato fonts, updated text geometry, a library-button scrollbar-color transition record, and the new cover hashes.
• Extends the parity north-star tests in north-star-reference.test.ts to verify font provenance, iframe transformation, embed stand-in metadata, and marker geometry.
• Behavioral Change: tree/fixture.json represents the YouTube slot as an iframe instead of a div, and captured text metrics and element geometry change to match the pinned fonts. Regenerate local captures before comparing against these fixtures.

^{Macroscope summarized 46a20b4.}

[macroscopeapp]

🟡 Medium tools/snapshot.ts:102

withVideoIframe emits an extra > after the replacement, so the captured DOM contains a visible text node after the video slot and its layout no longer matches the fixture. PLACEHOLDER stops at </div instead of the complete </div> tag; include the closing > in the placeholder.

Suggested change

	const PLACEHOLDER = '<div class="youtube-player-target" data-dragon-id="video-placeholder"></div';
	const PLACEHOLDER = '<div class="youtube-player-target" data-dragon-id="video-placeholder"></div>';

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file @examples/music-player/tools/snapshot.ts around line 102:

`withVideoIframe` emits an extra `>` after the replacement, so the captured DOM contains a visible text node after the video slot and its layout no longer matches the fixture. `PLACEHOLDER` stops at `</div` instead of the complete `</div>` tag; include the closing `>` in the placeholder.

[thejackshelton]

This one doesn't apply. snapshot.html breaks its lines inside tags (line 19 ends with ...></div and the next line starts with >), so the placeholder's </div is followed by \n>, and after the swap that \n> closes </iframe: the result is ...></iframe\n></div\n> with no stray >. The suggested ></div> occurs 0 times in snapshot.html, so withVideoIframe would throw on every capture. To pin it, 46a20b4 adds a test in north-star-reference.test.ts that parses the swapped snapshot and checks the frame host's only child is the childless iframe (class, decoded src, id), that swapping the div back gives snapshot.html byte for byte, and that no capture records a text node in the video slot area; with an extra > planted after </iframe that test fails. A comment in snapshot.ts now says why the placeholder ends at </div.

[macroscopeapp]

Approvability

Verdict: Approved at 46a20b4

Macroscope's review found this PR approvable — This PR recaptures and strengthens the north-star reference harness with pinned fonts, a deterministic iframe stand-in, and image markers; it does not modify production runtime behavior. The reported iframe substitution concern is covered by tests that verify the exact DOM shape and absence of stray text.

^{You can add or adjust custom eligibility rules. Learn more.}