feat(ui): support takumi v2 og images

[harlan-zw]

🔗 Linked issue

N/A

🧭 Context

While checking out the live site a few OG image routes were visibly broken. The regressions showed up as shifted absolute overlays, black repo icons, and unstable package compare output.

https://npmx.dev/package-code/takumi-js/v/1.8.7

📚 Description

While fixing this I figured we just upgrade to latest og image / takumi versions.

• Upgrades nuxt-og-image to 6.7.2 and Takumi packages to 2.0.0-rc.5.
• Updates the OG layout and package template for Takumi v2 rendering, including static provider icon classes and explicit absolute offsets.
• Adds fixture coverage for the broken takumi-js nested tree case and the compare-package snapshot, then refreshes the affected OG snapshots.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Jul 6, 2026 12:15am
npmx.dev	Ready	Preview, Comment	Jul 6, 2026 12:15am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Jul 6, 2026 12:15am

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The changes update OG image rendering, change OgLayout's root class, bump takumi and nuxt-og-image dependencies, and refactor the e2e snapshot test suite with new registry, downloads, and jsDelivr fixtures.

Changes

OG image rendering, fixtures, and dependency updates

Layer / File(s)	Summary
Compare stats stable sort app/components/OgImage/Compare.takumi.vue	Non-summary tier package stats are now sorted by downloads descending with a secondary tie-breaker preserving original displayPackages order.
Package header, provider icons, and panel layout app/components/OgImage/Package.takumi.vue	Adds a versionLabel computed value for header rendering, replaces the repoProviderIcon helper with an explicit provider-to-icon template chain, and switches right-side panel alignment from a force-right-8 class to inline right: 2rem styles.
OgLayout root class change app/components/OgLayout.vue	Changes the root wrapper class from flex to block.
Dependency updates package.json	Bumps @takumi-rs/core and @takumi-rs/wasm to 2.0.0-rc.5 and nuxt-og-image to ^6.7.2.
E2E OG snapshot tests and npm fixtures test/e2e/og-image.spec.ts, test/fixtures/npm-registry/packuments/*, test/fixtures/npm-api/downloads/*, test/fixtures/jsdelivr/takumi-js.json	Refactors the snapshot test to a data-driven TEST_CASES list covering nine scenarios, updates snapshot naming and adds maxDiffPixelRatio: 0.02, and introduces new fixtures for react, svelte, and takumi-js package data.

Possibly related PRs

• npmx-dev/npmx.dev#2717: Both PRs modify the repository/provider icon rendering logic in app/components/OgImage/Package.takumi.vue.

Suggested reviewers: serhalp

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title is concise and accurately states the main change: adding Takumi v2 OG image support.
Description check	✅ Passed	The description is clearly related to the changeset and matches the OG image fixes and upgrades.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[harlan-zw]

fwiw i deduped the oxc-parser version, which saves about ~8mb (~72 deps) as latest og image introduced a new version

[ghostdevv]

oxc-parser: 0.138.0
I worry we'll forget about this and it'll break things, or it'll just break things

[harlan-zw]

i can revert it, it will just cause an extra ~8mb (~72 deps), we need oxc-parser to release a stable so the minors can be deduped

The transforms are build-time, so errors should surface via the build, bumping this is a maintenance concern, though, so I'd leave it for you to decide