refactor(ui): distributions of elements in package header

[MatteoGabriele]

These changes resolve several issues related to the current layout and element placement. They guarantee that the entire header experiences minimal element movement and overlaps.

The header, with its variable package name and numerous elements (version, provenance, badges, code, docs, etc.), can be very hard to maintain.
This becomes especially tricky as the screen size shrinks, causing misaligned elements.

The idea is to limit the number of variables at play:

• the package name sits alone, with only the repository star count, which is a very important metric for how users judge whether to use a library or another
• versions and badges sit right under the package name
• the description stays the same
• Various links and tabs are next to each other, which also makes more sense since the mobile view has them all together.

Notes

• The org/name has been renamed simply using the provider name to avoid long names that eat space and repetition with the header title
• The forks link has been removed. I can put it back, if everyone thinks it's very useful, but tbh, I feel it's the least important info I can get from the view, and it just takes space and visual attention.

Let me know what you think and if it needs adjustments

I've attached two videos: one with a small name and one with a longer name, to demonstrate that it works well in both cases.

Screen.Recording.2026-02-03.at.16.26.45.mov

Screen.Recording.2026-02-03.at.16.26.02.mov

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR restructures the package page header into a flex-based layout with a persistent left column. Organisation link rendering is moved inside the header and made conditional; the copy button is repositioned. Version rendering now shows requested vs resolved versions with provenance/not-latest indicators updated. External links are grouped; mobile nav items moved to a compact list; internal navigation retained for larger screens. PackageMetricsBadges remain inside ClientOnly. Public API: useRepoMeta(repositoryUrl) no longer destructures forks or forksLink (now { repoRef, stars, starsLink }). Changes: +235 / -238.

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly articulates the purpose of the changes (resolving layout and element placement issues), explains the design rationale (limiting variables at play), and provides specific details about what was changed and why.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[coderabbitai]

Actionable comments posted: 1

[codecov]

Codecov Report

❌ Patch coverage is 14.75410% with 52 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
app/pages/package/[...package].vue	14.75%	45 Missing and 7 partials ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 2

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 3, 2026 4:47pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 3, 2026 4:47pm
npmx-lunaria	Ignored		Feb 3, 2026 4:47pm

[graphieros]

Looks great !
We discussed in chat about the removal of the fork-count, which does not reach consensus.
I personally think this metric has some merit, but would not mind not having if it improves the layout.