feat: dependency sizes

[Mopsgamer]

🔗 Linked issue

Resolves #2401

Caution

This is a prototype. This PR may change significantly at any time. To avoid wasting time on potentially obsolete code, please use the issue thread for functional suggestions rather than performing a detailed code review.

🧭 Context

This PR adds a new UI component to the DEPENDENCIES section of the sidebar to provide better visibility into package sizes. It allows users to view both the own and total sizes for each first-level dependency.

An icon has been added next to the version of each direct dependency; hovering over it reveals a tooltip with the package's size breakdown.

_{Note: Some issues are visible.}

📚 Description

A sliced bar component has been implemented to visualize dependency sizes.

• The bar represents direct dependencies and does not consider devDependencies.
• Slices are clickable; information is displayed via tooltips on hover.
• Tooltips show the package name, total size, own size, and the percentage of the total package size.
• Slices for bundled dependencies and the 'own size' slice are represented in blue.
• The 'own size' slice displays the size metric without an associated package name.
• Standard direct dependencies use black for the light theme or a light color for the dark theme.
• Small dependencies are automatically grouped into a single slice to maintain layout clarity.
• A very transparent gray slice exists for edge-case sizes that have not been discovered or loaded.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 11, 2026 1:02pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 11, 2026 1:02pm
npmx-lunaria	Ignored		Apr 11, 2026 1:02pm

[github-actions]

Hello! Thank you for opening your first PR to npmx, @Mopsgamer! 🚀

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/Package/Dependencies.vue	27.02%	43 Missing and 11 partials ⚠️
app/pages/package/[[org]]/[name].vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds optional props to the Dependencies component: packageSize?: InstallSizeResult | null and bundledDependencies?: boolean | string[]. It implements a client-only useAsyncData flow that resolves each dependency version, fetches per-dependency install-size from /api/registry/install-size/<name>/v/<resolvedVersion> with cancellation support, and aggregates results into sizereqData. The component computes per-dependency percentages (visible vs others using a threshold), detects bundled dependencies, and renders a horizontal stacked bar plus per-dependency tooltips and loading spinners. The package page now passes installSize and a normalized bundledDependencies value into the component.

Possibly related PRs

• feat: show a warning when significant size increase #1673 — Adds the InstallSizeResult types and shared install-size composables/APIs that this PR consumes.
• feat: switch dependency icons to be tappable tooltips #1471 — Touches the same Dependencies.vue tooltip/interaction markup and UI elements; overlaps on dependency tooltip behaviour.
• feat: add package download button #1586 — Extends install-size handling on the package page (including passing install-size into page components), touching the same data surface used here.

Suggested reviewers

• danielroe
• ghostdevv

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR implements the core objectives from #2401: displaying total unpacked size for dependencies with a visual distribution bar and per-dependency size information via tooltips.
Out of Scope Changes check	✅ Passed	All changes are scoped to implementing the size visualization feature. Dependencies.vue adds the visualization component, and package page updates pass necessary props—no unrelated changes detected.
Description check	✅ Passed	The pull request description clearly relates to the changeset, detailing the addition of a size visualization component for package dependencies with specific UI features and functionality.

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

✨ 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 and usage tips.}

[coderabbitai]

Actionable comments posted: 4

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: dc166ab1-08f1-4e47-87e2-f2182761254a

📥 Commits

Reviewing files that changed from the base of the PR and between 4123e8d and f6aa690.

📒 Files selected for processing (2)

• app/components/Package/Dependencies.vue
• app/pages/package/[[org]]/[name].vue