feat: add package scores display

[MhemedAbderrahmen]

Closes #875

Adds:

• If score exist score bars with smoothed percentage based coloring ( % bewteen red - orange - green )
• If not "score does not exist"
• Icon to clarify the source of the information

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 4, 2026 0:44am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 4, 2026 0:44am
npmx-lunaria	Ignored		Feb 4, 2026 0:44am

[github-actions]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
lunaria/files/en-GB.json	Localization changed, will be marked as complete. 🔄️
lunaria/files/en-US.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[codecov]

Codecov Report

❌ Patch coverage is 73.91304% with 6 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/ScoreBars.vue	70.00%	5 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds package score support: a new Vue 3 component ScoreBars displays quality, popularity and maintenance as coloured progress bars; a composable usePackageScore provides lazy fetching of NPMS scores; the package page renders the component in two locations; a server API endpoint /api/registry/score/[...pkg] fetches and caches NPMS scores and exports an NpmsScore type; i18n locales (en.json, en-GB.json, en-US.json) include scores keys; accessibility tests for the component were added.

Suggested labels

idea

Suggested reviewers

• danielroe
• Kai-ros

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, referencing issue #875 and describing the key features: score bars with percentage-based coloring, unavailable state handling, and source icon.
Linked Issues check	✅ Passed	The pull request successfully addresses all requirements from issue #875: displays package scores (quality, popularity, maintenance) using progress bars with colour-based visualisation, implements unavailable messaging, includes source attribution, and uses the NPMS API.
Out of Scope Changes check	✅ Passed	All code changes are directly related to implementing the score display feature. The refactoring of NPMS_API to a shared constant is a necessary supporting change for the new score endpoint, with no unrelated modifications.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 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

[43081j]

the badge logic also uses the npms.io, so we should move this to the constants file and reuse it

[MhemedAbderrahmen]

Indeed, this is now implemented in the last commit.

[43081j]

looks good to me

i noticed the npms.io data is pretty outdated so i have raised that separately in discord FYI