feat(ui): add ⌘+K command palette for quick nav and actions

[serhalp]

🔗 Linked issue

closes #81

supersedes stale #470

🧭 Context

npmx already exposes a ton of useful capabilities (with way more to come), but they require quite a bit of precise clicking around. We always imagined npmx as a power tool for power users. The command palette is a familiar solution to provide discoverable, fast, efficient, repeatable access to an app's capabilities.

📚 Description

This PR adds a command palette with access to every page, every action, and every capability of npmx.

It can be opened from anywhere in the app by pressing ⌘+K on macOS / Ctrl+K on Windows/Linux, or by clicking the new "quick actions" nav item in the header.

The palette includes a set of "global" commands and a composable allowing a page or component to register specific commands that should be made available when that page/component is visible.

The palette supports multi-step flows, such as "change language" → languages are listed.

I should've maybe kept this PR small and added more commands later, but... oops, I believe I covered every single page and capability:

All commands

Global commands (always available)

• navigation
  • search
  • home
  • compare
  • settings
  • my packages if npm is connected
  • my orgs if npm is connected
  • my profile if atproto is connected
• connections
  • connect to npm cli if npm not connected
  • connect to atmosphere if atproto not connected
  • disconnect npm if npm is connected
  • disconnect atmosphere if atproto is connected
• settings
  • language → second step lists all languages + "Help translate" CTA
    • note: there's some magic here to match user input on languages directly on the first screen too!
  • relative dates
  • use system theme
  • use light theme
  • use dark theme
  • accent colors → second step lists all accent colors
  • background shade -> second step lists all bg shades
• help
  • keyboard shortcuts
  • docs
  • chat
• npmx
  • about
  • blog
  • privacy
  • accessibility
  • docs
  • chat
  • builders
  • source
  • social

Package context

All pages with a package context also include:

• package ()
  • copy package name
  • package page
  • docs
  • code
  • compare this package
  • download tarball
  • diff
• versions of
  • <... every version of this package ...>

Package page

• package
  • copy install command
  • copy run command if available
  • copy create command if available
  • go to types package if available
  • go to create package if available
  • open skills modal if available
• links
  • fund if available
  • repo (): <owner/repo>
  • repo stars
  • repo forks
  • homepage
  • issues
  • npm
  • jsr if available
  • <... every playground ...>

Package code page

• actions
  • copy link
  • copy file contents
  • preview
  • code

Package diff page

• actions
  • merge modified lines on/off
  • word wrap on/off

Compare page

• select all facets
• deselect all facets
• copy table
• table
• charts

Profile page

• actions
  • edit profile if viewing profile
  • share invite
• links
  • profile-website if profile has a website

There are two behaviours worth calling out separately:

• When the user's query is a valid semver range specifier, while in a package context, the package versions listed in the palette are filtered to those that match the semver range.
• A fallback item always shows up last in the palette results: Search for "<query>". Selecting this submits a search for the user's query.

The palette has full keyboard navigation support and screen reader support.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 22, 2026 3:15am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 22, 2026 3:15am
npmx-lunaria	Ignored		Mar 22, 2026 3:15am

[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
i18n/locales/en.json	Source changed, localizations will be marked as outdated.
i18n/locales/fr-FR.json	Localization changed, will be marked as complete. 🔄️

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 68.09896% with 245 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/CommandPalette.client.vue	55.26%	46 Missing and 22 partials ⚠️
app/composables/useCommandPaletteGlobalCommands.ts	65.24%	49 Missing ⚠️
[...[org]]/[packageName]/v/[version]/[...filePath].vue](https://app.codecov.io/gh/npmx-dev/npmx.dev/pull/2159?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=npmx-dev#diff-YXBwL3BhZ2VzL3BhY2thZ2UtY29kZS9bW29yZ11dL1twYWNrYWdlTmFtZV0vdi9bdmVyc2lvbl0vWy4uLmZpbGVQYXRoXS52dWU=)	0.00%	25 Missing and 7 partials ⚠️
app/utils/package-download.ts	0.00%	17 Missing and 4 partials ⚠️
...pp/composables/useCommandPalettePackageVersions.ts	0.00%	17 Missing and 3 partials ⚠️
app/components/Terminal/Install.vue	52.94%	8 Missing ⚠️
app/pages/package/[[org]]/[name].vue	0.00%	6 Missing and 2 partials ⚠️
app/composables/useCommandPalette.ts	94.40%	5 Missing and 2 partials ⚠️
app/composables/useCommandPaletteCommands.ts	92.92%	6 Missing and 1 partial ⚠️
...pp/composables/useCommandPalettePackageCommands.ts	78.78%	6 Missing and 1 partial ⚠️
... and 8 more

📢 Thoughts on this report? Let us know!

[trueberryless]

I love it, super clean and useful! 🥳