docs: universal usernames page with interactive resolution diagram

[HAPPYS1NGH]

Two commits that were left on the previous branch after PR #10 merged.

Universal usernames page

New overview/make-usernames-universal.mdx: a product with its own username suffix can give those identities ENS names any wallet already resolves, without moving its registry to Ethereum. Covers both parent options — register a .eth name, or import a DNS domain you already own with DNSSEC — and states plainly that they resolve identically, so the choice is branding, not mechanics. Examples use happy.brand / happy.brand.eth / happy.brand.id throughout.

Interactive CCIP-Read diagram

snippets/flow-explainer.jsx, an animated walkthrough of one lookup embedded in that page:

• Six beats from resolve() through the signed response, showing the payload at each hop.
• Two toggles that both leave the path unchanged, which is the point of the card: parent name (.eth vs imported DNS) and records (onchain contract vs your own API).
• Step 3 reads exactly one store, never both. No fan-out, no merge. The unselected store stays on the canvas but muted, so the either/or reads without drawing a path nobody takes.
• Arrow controls with a position readout rather than anonymous dots, and a beat-keyed timer so a manual step gets a full beat instead of being cut short by an auto-advance already in flight.

Layout, palette and type were tuned against the real stylesheet at the actual docs column width: one hue per party with the accent reserved for motion, every group label the same distance above its own box, and the infrastructure box tightened so its padding matches on both sides.

Worth knowing for future snippets

container-type on the card element makes Chrome resolve every fill: var(--fx-*) inside the SVG to black — the custom properties still inherit and non-paint properties still apply, so it presents as a rendering bug rather than a cascade one. There is a comment on .fx in custom.css to stop it being re-added.

Styles live in custom.css because Mintlify strips <style> tags injected from snippets.

Also included

9c7f5ce — ENS Components section: developer-guide/sdks/ens-components.mdx, a changelog entry, and the matching docs.json nav.

Checks

• Snippet parses clean (tsc --jsx preserve).
• All four toggle combinations rendered headless against the real CSS, wide and at the 720px docs column: no collisions, nothing escapes the infrastructure box, no horizontal page scroll.
• No credentials or keys in the diff.

🤖 Generated with Claude Code

https://claude.ai/code/session_011M5cz2owGrUz9ab9eEVyNg