From 99833647ed93f7a9e193f6b5dc5e64067e1b04ce Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Thu, 19 Mar 2026 21:32:29 -0400
Subject: [PATCH] feat(ui): add command palette for quick navigation and
 actions

---
 CONTRIBUTING.md                               |   9 +
 app/app.vue                                   |   2 +
 app/components/AppFooter.vue                  |  10 +
 app/components/AppHeader.vue                  |  22 +-
 app/components/CommandPalette.client.vue      | 478 +++++++++++++
 app/components/Diff/ViewerPanel.vue           |  30 +
 app/components/Header/MobileMenu.client.vue   |  28 +
 app/components/Package/DownloadButton.vue     |  36 +-
 app/components/Package/ExternalLinks.vue      |  99 +++
 app/components/Package/Header.vue             |  50 +-
 app/components/Package/Playgrounds.vue        |  15 +
 app/components/Package/SkillsCard.vue         |  23 +-
 app/components/Settings/AccentColorPicker.vue |  10 +-
 app/components/Settings/BgThemePicker.vue     |  14 +-
 app/components/Terminal/Install.vue           |  81 +++
 app/composables/useCommandPalette.ts          | 312 +++++++++
 app/composables/useCommandPaletteCommands.ts  | 220 ++++++
 .../useCommandPaletteGlobalCommands.ts        | 643 ++++++++++++++++++
 .../useCommandPalettePackageCommands.ts       | 154 +++++
 .../useCommandPalettePackageVersions.ts       |  39 ++
 .../useCommandPaletteVersionCommands.ts       |  63 ++
 app/composables/usePlatformModifierKey.ts     |  30 +
 app/composables/useSettings.ts                |  20 +-
 app/pages/compare.vue                         |  71 ++
 .../[packageName]/v/[versionRange].vue        |  21 +
 .../v/[version]/[...filePath].vue             |  92 +++
 app/pages/package-docs/[...path].vue          |  21 +
 app/pages/package/[[org]]/[name].vue          |  22 +
 app/pages/profile/[identity]/index.vue        |  44 ++
 app/types/command-palette.ts                  |  85 +++
 app/utils/package-download.ts                 |  42 ++
 docs/content/2.guide/1.features.md            |   4 +
 docs/content/2.guide/2.keyboard-shortcuts.md  |  28 +-
 docs/content/index.md                         |   2 +-
 i18n/locales/en.json                          | 103 +++
 i18n/locales/fr-FR.json                       | 109 ++-
 i18n/schema.json                              | 309 +++++++++
 test/nuxt/a11y.spec.ts                        |  38 ++
 test/nuxt/app/utils/package-download.spec.ts  | 131 ++++
 test/nuxt/components/CommandPalette.spec.ts   | 296 ++++++++
 .../use-command-palette-commands.spec.ts      | 500 ++++++++++++++
 ...e-command-palette-package-versions.spec.ts | 121 ++++
 .../composables/use-command-palette.spec.ts   | 183 +++++
 43 files changed, 4544 insertions(+), 66 deletions(-)
 create mode 100644 app/components/CommandPalette.client.vue
 create mode 100644 app/composables/useCommandPalette.ts
 create mode 100644 app/composables/useCommandPaletteCommands.ts
 create mode 100644 app/composables/useCommandPaletteGlobalCommands.ts
 create mode 100644 app/composables/useCommandPalettePackageCommands.ts
 create mode 100644 app/composables/useCommandPalettePackageVersions.ts
 create mode 100644 app/composables/useCommandPaletteVersionCommands.ts
 create mode 100644 app/composables/usePlatformModifierKey.ts
 create mode 100644 app/types/command-palette.ts
 create mode 100644 app/utils/package-download.ts
 create mode 100644 test/nuxt/app/utils/package-download.spec.ts
 create mode 100644 test/nuxt/components/CommandPalette.spec.ts
 create mode 100644 test/nuxt/composables/use-command-palette-commands.spec.ts
 create mode 100644 test/nuxt/composables/use-command-palette-package-versions.spec.ts
 create mode 100644 test/nuxt/composables/use-command-palette.spec.ts

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index cc6afeb794..d5a8d71742 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -42,6 +42,7 @@ This focus helps guide our project decisions as a community and what we choose t
   - [Naming conventions](#naming-conventions)
   - [Vue components](#vue-components)
   - [Internal linking](#internal-linking)
+  - [Command palette](#command-palette)
   - [Cursor and navigation](#cursor-and-navigation)
 - [RTL Support](#rtl-support)
 - [Localization (i18n)](#localization-i18n)
@@ -400,6 +401,14 @@ For package links, use the auto-imported `packageRoute()` utility from `app/util
 > [!IMPORTANT]
 > Never construct package URLs as strings. The route structure uses separate `org` and `name` params, and `packageRoute()` handles the splitting correctly.
 
+### Command palette
+
+The command palette is a first-class navigation surface. When you add a new user-facing capability to the app, you should also register a corresponding command palette entry for it whenever that action or destination makes sense outside its immediate UI.
+
+- Add global entries in the command palette composables.
+- Add page- or component-scoped entries from the page/component that owns the capability.
+- Prefer palette entries for actions users may reasonably want to trigger from the keyboard or jump to directly.
+
 #### Available route names
 
 | Route name        | URL pattern                       | Parameters                |
diff --git a/app/app.vue b/app/app.vue
index 5916e3e328..9a90d2b0b9 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -144,6 +144,8 @@ if (import.meta.client) {
       <NuxtPage />
     </div>
 
+    <CommandPalette />
+
     <AppFooter />
 
     <ScrollToTop />
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 6955352350..75e725d2fa 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -5,6 +5,7 @@ const route = useRoute()
 const isHome = computed(() => route.name === 'index')
 
 const discord = useDiscordLink()
+const { commandPaletteShortcutLabel } = usePlatformModifierKey()
 const modalRef = useTemplateRef('modalRef')
 const showModal = () => modalRef.value?.showModal?.()
 const closeModal = () => modalRef.value?.close?.()
@@ -52,10 +53,19 @@ const closeModal = () => modalRef.value?.close?.()
               :modalTitle="$t('footer.keyboard_shortcuts')"
               class="w-auto max-w-lg"
             >
+              <p class="mb-4 text-sm leading-relaxed text-fg-muted">
+                {{
+                  $t('shortcuts.command_palette_description', { ctrlKey: $t('shortcuts.ctrl_key') })
+                }}
+              </p>
               <p class="mb-2 font-mono text-fg-subtle">
                 {{ $t('shortcuts.section.global') }}
               </p>
               <ul class="mb-6 flex flex-col gap-2">
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">{{ commandPaletteShortcutLabel }}</kbd>
+                  <span>{{ $t('shortcuts.command_palette') }}</span>
+                </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">/</kbd>
                   <span>{{ $t('shortcuts.focus_search') }}</span>
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 8f0cb2290c..fc3f29631d 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -6,6 +6,8 @@ import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
 const keyboardShortcuts = useKeyboardShortcuts()
 const discord = useDiscordLink()
+const { open: openCommandPalette } = useCommandPalette()
+const { commandPaletteShortcutLabel } = usePlatformModifierKey()
 
 withDefaults(
   defineProps<{
@@ -258,6 +260,24 @@ onKeyStroke(
       <!-- Spacer when logo is hidden on desktop -->
       <span v-else class="hidden sm:block w-1" />
 
+      <ButtonBase
+        type="button"
+        variant="secondary"
+        class="hidden lg:inline-flex shrink-0 gap-2 px-2.5 me-3"
+        :aria-label="$t('shortcuts.command_palette')"
+        :title="$t('shortcuts.command_palette_description', { ctrlKey: $t('shortcuts.ctrl_key') })"
+        @click="openCommandPalette"
+      >
+        <span>{{ $t('command_palette.quick_actions') }}</span>
+        <span class="inline-flex items-center gap-1 text-xs text-fg-subtle">
+          <kbd
+            class="inline-flex items-center justify-center rounded border border-border bg-bg-muted px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
+          >
+            {{ commandPaletteShortcutLabel }}
+          </kbd>
+        </span>
+      </ButtonBase>
+
       <!-- Center: Search bar + nav items -->
       <div
         class="flex-1 flex items-center md:gap-6"
@@ -293,7 +313,7 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="hidden sm:flex flex-shrink-0">
+      <div class="hidden sm:flex flex-shrink-0 items-center gap-2">
         <!-- Desktop: Explore link -->
         <LinkBase
           v-for="link in desktopLinks"
diff --git a/app/components/CommandPalette.client.vue b/app/components/CommandPalette.client.vue
new file mode 100644
index 0000000000..75bd802a7d
--- /dev/null
+++ b/app/components/CommandPalette.client.vue
@@ -0,0 +1,478 @@
+<script setup lang="ts">
+import type { CommandPaletteCommand, CommandPaletteLinkCommand } from '~/types/command-palette'
+
+const { announcement, isOpen, query, close, toggle, setView, view } = useCommandPalette()
+const {
+  groupedCommands,
+  flatCommands,
+  hasResults,
+  submitSearchQuery,
+  trailingCommands,
+  trimmedQuery,
+  viewMeta,
+} = useCommandPaletteCommands()
+const keyboardShortcuts = useKeyboardShortcuts()
+const route = useRoute()
+
+const modalRef = useTemplateRef<{
+  showModal: () => void
+  close: () => void
+}>('modalRef')
+const inputRef = useTemplateRef<{
+  focus: () => void
+}>('inputRef')
+const nuxtLinkComponent = resolveComponent('NuxtLink')
+
+const activeIndex = shallowRef(-1)
+const previouslyFocused = shallowRef<HTMLElement | null>(null)
+
+const dialogId = 'command-palette-modal'
+const inputId = `${dialogId}-input`
+const descriptionId = `${dialogId}-description`
+const statusId = `${dialogId}-status`
+const announcementId = `${dialogId}-announcement`
+const resultsId = `${dialogId}-results`
+
+const inputDescribedBy = computed(() => `${descriptionId} ${statusId}`)
+const statusContextLabel = computed(() =>
+  view.value === 'root' ? $t('command_palette.title') : viewMeta.value.placeholder,
+)
+
+const statusMessage = computed(() => {
+  const count = flatCommands.value.length
+
+  if (!count && trimmedQuery.value) {
+    return $t('command_palette.status.no_matches_search_in_context', {
+      context: statusContextLabel.value,
+      query: trimmedQuery.value,
+    })
+  }
+
+  if (trimmedQuery.value) {
+    return $t(
+      'command_palette.status.matching_in_context',
+      { context: statusContextLabel.value, count },
+      count,
+    )
+  }
+
+  return $t(
+    'command_palette.status.available_in_context',
+    { context: statusContextLabel.value, count },
+    count,
+  )
+})
+
+const commandIndexMap = computed(() => {
+  return new Map(flatCommands.value.map((command, index) => [command.id, index]))
+})
+
+function getDialog() {
+  return document.querySelector<HTMLDialogElement>(`#${dialogId}`)
+}
+
+function getInputElement() {
+  return document.querySelector<HTMLInputElement>(`#${inputId}`)
+}
+
+function isInputEventTarget(target: EventTarget | null) {
+  const input = getInputElement()
+  return !!input && (target === input || document.activeElement === input)
+}
+
+function getCommandElements() {
+  return Array.from(getDialog()?.querySelectorAll<HTMLElement>('[data-command-item="true"]') ?? [])
+}
+
+function getCommandElement(commandId: string) {
+  return getCommandElements().find(element => element.dataset.commandId === commandId) ?? null
+}
+
+function focusInput() {
+  inputRef.value?.focus()
+}
+
+function focusCommand(index: number) {
+  const elements = getCommandElements()
+  const element = elements[index]
+  if (!element) return
+
+  activeIndex.value = index
+  element.focus()
+}
+
+async function handleCommandSelect(command: CommandPaletteCommand) {
+  if (isLinkCommand(command)) {
+    const element = getCommandElement(command.id)
+    if (element) {
+      element.click()
+      return
+    }
+
+    close()
+    if ('to' in command) {
+      await navigateTo(command.to)
+      return
+    }
+
+    await navigateTo(command.href, { external: true })
+    return
+  }
+
+  await command.action()
+}
+
+function isLinkCommand(command: CommandPaletteCommand): command is CommandPaletteLinkCommand {
+  return command.to != null || command.href != null
+}
+
+function getCommandComponent(command: CommandPaletteCommand) {
+  if (command.to) return nuxtLinkComponent
+  if (command.href) return 'a'
+  return 'button'
+}
+
+function getCommandAttrs(command: CommandPaletteCommand) {
+  if (command.to) {
+    return {
+      to: command.to,
+    }
+  }
+
+  if (command.href) {
+    return {
+      href: command.href,
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    }
+  }
+
+  return {
+    type: 'button' as const,
+  }
+}
+
+function handleCommandClick(command: CommandPaletteCommand) {
+  if (isLinkCommand(command)) {
+    close()
+    return
+  }
+
+  void handleCommandSelect(command)
+}
+
+function handleGlobalKeydown(event: KeyboardEvent) {
+  if (event.isComposing) return
+
+  const isToggleShortcut =
+    event.key.toLowerCase() === 'k' &&
+    (event.metaKey || event.ctrlKey) &&
+    !event.altKey &&
+    !event.shiftKey
+
+  if (isToggleShortcut) {
+    if (!keyboardShortcuts.value) return
+
+    event.preventDefault()
+    toggle()
+    return
+  }
+
+  if (!isOpen.value) return
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    const currentIndex = getCommandElements().findIndex(el => el === document.activeElement)
+    const nextIndex =
+      currentIndex < 0 ? 0 : Math.min(currentIndex + 1, flatCommands.value.length - 1)
+    focusCommand(nextIndex)
+    return
+  }
+
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    const currentIndex = getCommandElements().findIndex(el => el === document.activeElement)
+    if (currentIndex <= 0) {
+      activeIndex.value = -1
+      focusInput()
+      return
+    }
+
+    focusCommand(currentIndex - 1)
+    return
+  }
+
+  if (
+    event.key === 'ArrowLeft' &&
+    viewMeta.value.canGoBack &&
+    !query.value &&
+    !event.altKey &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.shiftKey &&
+    isInputEventTarget(event.target)
+  ) {
+    event.preventDefault()
+    handleBack()
+    return
+  }
+
+  if (event.key === 'Enter' && isInputEventTarget(event.target)) {
+    const firstCommand = flatCommands.value[0]
+    if (!firstCommand) {
+      if (!trimmedQuery.value) return
+
+      event.preventDefault()
+      void submitSearchQuery()
+      return
+    }
+
+    event.preventDefault()
+    void handleCommandSelect(firstCommand)
+  }
+}
+
+function handleDialogClose() {
+  if (isOpen.value) {
+    close()
+    return
+  }
+
+  activeIndex.value = -1
+  previouslyFocused.value?.focus()
+  previouslyFocused.value = null
+}
+
+function handleBack() {
+  setView('root')
+}
+
+watch(
+  isOpen,
+  async open => {
+    const dialog = getDialog()
+
+    if (open) {
+      previouslyFocused.value =
+        document.activeElement instanceof HTMLElement ? document.activeElement : null
+      await nextTick()
+      if (!dialog?.open) {
+        modalRef.value?.showModal()
+      }
+      await nextTick()
+      focusInput()
+      activeIndex.value = -1
+      return
+    }
+
+    if (dialog?.open) {
+      modalRef.value?.close()
+      return
+    }
+
+    activeIndex.value = -1
+    previouslyFocused.value?.focus()
+    previouslyFocused.value = null
+  },
+  { flush: 'post' },
+)
+
+watch(
+  () => route.fullPath,
+  () => {
+    if (isOpen.value) {
+      close()
+    }
+  },
+)
+
+watch(query, () => {
+  activeIndex.value = -1
+})
+
+useEventListener(document, 'keydown', handleGlobalKeydown)
+</script>
+
+<template>
+  <div>
+    <p :id="announcementId" class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+      {{ announcement }}
+    </p>
+
+    <Modal
+      ref="modalRef"
+      :id="dialogId"
+      :modalTitle="$t('command_palette.title')"
+      :modalSubtitle="viewMeta.subtitle"
+      class="mx-auto mb-0 mt-4 max-w-[48rem] overflow-hidden p-0 sm:mt-[10vh]"
+      @close="handleDialogClose"
+    >
+      <div v-if="isOpen" class="-mx-6 -mt-6">
+        <p :id="descriptionId" class="sr-only">
+          {{ $t('command_palette.instructions') }}
+        </p>
+        <p :id="statusId" class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+          {{ statusMessage }}
+        </p>
+
+        <div class="border-b border-border/70 bg-bg-subtle/60 px-4 py-4 sm:px-5">
+          <button
+            v-if="viewMeta.canGoBack"
+            type="button"
+            class="mb-3 inline-flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 py-1.5 text-sm text-fg-muted lowercase transition-colors duration-150 hover:border-border/70 hover:bg-bg hover:text-fg focus-visible:outline-accent/70"
+            @click="handleBack"
+          >
+            <span
+              class="i-lucide:arrow-left rtl-flip inline-block h-3.5 w-3.5"
+              aria-hidden="true"
+            />
+            {{ $t('command_palette.back') }}
+          </button>
+          <label :for="inputId" class="sr-only">{{ $t('command_palette.input_label') }}</label>
+          <InputBase
+            :id="inputId"
+            ref="inputRef"
+            v-model="query"
+            type="text"
+            :placeholder="viewMeta.placeholder"
+            no-correct
+            size="lg"
+            class="w-full"
+            :aria-describedby="inputDescribedBy"
+            :aria-controls="resultsId"
+          />
+        </div>
+
+        <div
+          :id="resultsId"
+          class="max-h-[60vh] overflow-y-auto bg-bg-muted/30 px-2 py-2 sm:px-3 sm:py-3"
+          :aria-label="$t('command_palette.results_label')"
+          role="region"
+        >
+          <div
+            v-if="!hasResults"
+            class="mx-1 rounded-xl border border-border/70 bg-bg-subtle/70 px-4 py-8 text-center sm:mx-0"
+          >
+            <p class="text-base text-fg-muted lowercase">
+              {{ $t('command_palette.empty') }}
+            </p>
+            <p v-if="trimmedQuery" class="mt-2 text-sm text-fg-subtle">
+              {{ $t('command_palette.empty_search_hint', { query: trimmedQuery }) }}
+            </p>
+          </div>
+
+          <div v-else class="flex flex-col gap-3">
+            <section
+              v-for="group in groupedCommands"
+              :key="group.id"
+              :aria-labelledby="`${dialogId}-group-${group.id}`"
+              class="rounded-xl border border-border/70 bg-bg-subtle/70 p-1 sm:p-1.5"
+            >
+              <h3
+                :id="`${dialogId}-group-${group.id}`"
+                class="px-3 pb-2 pt-2 text-sm uppercase tracking-[0.14em] text-fg-subtle"
+              >
+                {{ group.label }}
+              </h3>
+
+              <ul class="m-0 flex list-none flex-col gap-1 p-0">
+                <li v-for="command in group.items" :key="command.id">
+                  <component
+                    :is="getCommandComponent(command)"
+                    v-bind="getCommandAttrs(command)"
+                    class="block min-h-12 w-full rounded-lg border border-transparent px-3 py-2 text-start no-underline text-inherit transition-colors duration-150 hover:border-border/80 hover:bg-bg focus-visible:outline-accent/70"
+                    :class="
+                      activeIndex === (commandIndexMap.get(command.id) ?? -1)
+                        ? 'border-border/80 bg-bg'
+                        : ''
+                    "
+                    data-command-item="true"
+                    :data-command-id="command.id"
+                    :aria-current="command.active ? 'true' : undefined"
+                    @click="handleCommandClick(command)"
+                    @focus="activeIndex = commandIndexMap.get(command.id) ?? -1"
+                    @mouseenter="activeIndex = commandIndexMap.get(command.id) ?? -1"
+                  >
+                    <span class="flex items-center gap-3">
+                      <span
+                        class="inline-block h-4 w-4 shrink-0 text-fg-subtle"
+                        :class="command.iconClass"
+                        aria-hidden="true"
+                      />
+                      <span class="min-w-0 flex-1">
+                        <span class="block truncate text-base text-fg lowercase">
+                          {{ command.label }}
+                        </span>
+                      </span>
+                      <span
+                        v-if="command.badge"
+                        class="hidden rounded-lg border border-border/70 bg-bg px-2.5 py-1 text-sm text-fg-muted lowercase sm:inline-flex"
+                      >
+                        {{ command.badge }}
+                      </span>
+                      <span
+                        v-if="command.active"
+                        class="hidden rounded-lg border border-accent/30 bg-accent/10 px-2.5 py-1 text-sm text-accent lowercase sm:inline-flex"
+                      >
+                        {{ command.activeLabel || $t('command_palette.current') }}
+                      </span>
+                      <span
+                        v-if="command.previewColor"
+                        class="inline-block h-3.5 w-3.5 shrink-0 rounded-full border border-border/70"
+                        data-command-preview="true"
+                        :style="{ backgroundColor: command.previewColor }"
+                        aria-hidden="true"
+                      />
+                      <span
+                        v-if="'href' in command"
+                        class="i-lucide:external-link inline-block h-3.5 w-3.5 shrink-0 text-fg-subtle"
+                        aria-hidden="true"
+                      />
+                      <span v-if="'href' in command" class="sr-only">
+                        {{ $t('command_palette.links.external') }}
+                      </span>
+                    </span>
+                  </component>
+                </li>
+              </ul>
+            </section>
+
+            <ul v-if="trailingCommands.length" class="m-0 flex list-none flex-col gap-1 p-0">
+              <li v-for="command in trailingCommands" :key="command.id">
+                <component
+                  :is="getCommandComponent(command)"
+                  v-bind="getCommandAttrs(command)"
+                  class="block min-h-12 w-full rounded-xl border border-border/70 bg-bg-subtle/70 px-3 py-2 text-start no-underline text-inherit transition-colors duration-150 hover:border-border/80 hover:bg-bg focus-visible:outline-accent/70"
+                  :class="
+                    activeIndex === (commandIndexMap.get(command.id) ?? -1)
+                      ? 'border-border/80 bg-bg'
+                      : ''
+                  "
+                  data-command-item="true"
+                  :data-command-id="command.id"
+                  :aria-current="command.active ? 'true' : undefined"
+                  @click="handleCommandClick(command)"
+                  @focus="activeIndex = commandIndexMap.get(command.id) ?? -1"
+                  @mouseenter="activeIndex = commandIndexMap.get(command.id) ?? -1"
+                >
+                  <span class="flex items-center gap-3">
+                    <span
+                      class="inline-block h-4 w-4 shrink-0 text-fg-subtle"
+                      :class="command.iconClass"
+                      aria-hidden="true"
+                    />
+                    <span class="min-w-0 flex-1">
+                      <span class="block truncate text-base text-fg lowercase">
+                        {{ command.label }}
+                      </span>
+                    </span>
+                  </span>
+                </component>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
diff --git a/app/components/Diff/ViewerPanel.vue b/app/components/Diff/ViewerPanel.vue
index 76b10a3ca2..7ecd94e7b6 100644
--- a/app/components/Diff/ViewerPanel.vue
+++ b/app/components/Diff/ViewerPanel.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
 
 const bytesFormatter = useBytesFormatter()
 
@@ -86,6 +87,35 @@ const charEditPercent = computed(() => calcPercent(inlineMaxCharEdits.value, 0,
 function getCodeUrl(version: string): string {
   return `/package-code/${props.packageName}/v/${version}/${props.file.path}`
 }
+
+useCommandPaletteContextCommands(
+  computed((): CommandPaletteContextCommandInput[] => [
+    {
+      id: 'diff-toggle-merge-modified-lines',
+      group: 'actions',
+      label: $t('command_palette.diff.merge_modified_lines'),
+      keywords: [props.packageName, props.file.path],
+      iconClass: 'i-lucide:git-compare',
+      badge: mergeModifiedLines.value
+        ? $t('command_palette.state.on')
+        : $t('command_palette.state.off'),
+      action: () => {
+        mergeModifiedLines.value = !mergeModifiedLines.value
+      },
+    },
+    {
+      id: 'diff-toggle-word-wrap',
+      group: 'actions',
+      label: $t('command_palette.diff.word_wrap'),
+      keywords: [props.packageName, props.file.path],
+      iconClass: 'i-lucide:align-justify',
+      badge: wordWrap.value ? $t('command_palette.state.on') : $t('command_palette.state.off'),
+      action: () => {
+        wordWrap.value = !wordWrap.value
+      },
+    },
+  ]),
+)
 </script>
 
 <template>
diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
index 49c51497f5..1df73f8056 100644
--- a/app/components/Header/MobileMenu.client.vue
+++ b/app/components/Header/MobileMenu.client.vue
@@ -8,6 +8,7 @@ const { links } = defineProps<{
   links: NavigationConfigWithGroups
 }>()
 
+const { open: openCommandPalette } = useCommandPalette()
 const { isConnected, npmUser, avatar: npmAvatar } = useConnector()
 const { user: atprotoUser } = useAtproto()
 
@@ -18,6 +19,13 @@ function closeMenu() {
   isOpen.value = false
 }
 
+function handleOpenCommandPalette() {
+  closeMenu()
+  nextTick(() => {
+    openCommandPalette()
+  })
+}
+
 function handleShowConnector() {
   const connectorModal = document.querySelector<HTMLDialogElement>('#connector-modal')
   if (connectorModal) {
@@ -174,6 +182,26 @@ onUnmounted(deactivate)
               </button>
             </div>
 
+            <div class="px-2 py-2">
+              <span
+                class="px-3 py-2 block font-mono text-xs text-fg-subtle uppercase tracking-wider"
+              >
+                {{ $t('command_palette.title') }}
+              </span>
+
+              <button
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+                :aria-label="$t('shortcuts.command_palette')"
+                @click="handleOpenCommandPalette"
+              >
+                <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
+                  <span class="i-lucide:command w-3 h-3 text-fg-muted" aria-hidden="true" />
+                </span>
+                <span class="flex-1">{{ $t('command_palette.quick_actions') }}</span>
+              </button>
+            </div>
+
             <!-- Divider -->
             <div class="mx-4 my-2 border-t border-border" />
 
diff --git a/app/components/Package/DownloadButton.vue b/app/components/Package/DownloadButton.vue
index 9ad1e47cd3..dd4a246605 100644
--- a/app/components/Package/DownloadButton.vue
+++ b/app/components/Package/DownloadButton.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { SlimPackumentVersion } from '#shared/types'
+import { downloadPackageTarball } from '~/utils/package-download'
 
 const props = defineProps<{
   packageName: string
@@ -8,42 +9,15 @@ const props = defineProps<{
 
 const loading = shallowRef(false)
 
-async function getDownloadUrl(tarballUrl: string) {
-  try {
-    const response = await fetch(tarballUrl)
-    if (!response.ok) {
-      throw new Error(`Failed to fetch tarball (${response.status})`)
-    }
-    const blob = await response.blob()
-    return URL.createObjectURL(blob)
-  } catch (error) {
-    // oxlint-disable-next-line no-console -- error logging
-    console.error('failed to fetch tarball', { cause: error })
-    return null
-  }
-}
-
 async function downloadPackage() {
-  const tarballUrl = props.version.dist.tarball
-  if (!tarballUrl) return
-
   if (loading.value) return
   loading.value = true
 
-  const downloadUrl = await getDownloadUrl(tarballUrl)
-
-  const link = document.createElement('a')
-  link.href = downloadUrl ?? tarballUrl
-  link.download = `${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-
-  if (downloadUrl) {
-    URL.revokeObjectURL(downloadUrl)
+  try {
+    await downloadPackageTarball(props.packageName, props.version)
+  } finally {
+    loading.value = false
   }
-
-  loading.value = false
 }
 </script>
 
diff --git a/app/components/Package/ExternalLinks.vue b/app/components/Package/ExternalLinks.vue
index 4ec1ab3f08..b4c08aa52e 100644
--- a/app/components/Package/ExternalLinks.vue
+++ b/app/components/Package/ExternalLinks.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { IconClass } from '~/types'
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
 
 const props = defineProps<{
   pkg: SlimPackument
@@ -41,6 +42,104 @@ const repoProviderIcon = computed((): IconClass => {
   if (!provider) return 'i-simple-icons:github'
   return PROVIDER_ICONS[provider] ?? 'i-lucide:code'
 })
+
+const repositoryCommandLabel = computed(() => {
+  if (!repoRef.value) {
+    return $t('package.links.repo')
+  }
+
+  const provider = repoRef.value.provider ? ` (${repoRef.value.provider})` : ''
+  return `${$t('package.links.repo')}${provider}: ${repoRef.value.owner}/${repoRef.value.repo}`
+})
+
+useCommandPaletteContextCommands(
+  computed(() => {
+    const commands: CommandPaletteContextCommandInput[] = []
+    const packageKeywords = [props.pkg.name]
+
+    if (repositoryUrl.value) {
+      commands.push({
+        id: 'package-link-repo',
+        group: 'links',
+        label: repositoryCommandLabel.value,
+        keywords: [
+          ...packageKeywords,
+          $t('package.links.repo'),
+          repoRef.value?.provider ?? '',
+          repoRef.value ? `${repoRef.value.owner}/${repoRef.value.repo}` : '',
+        ],
+        iconClass: repoProviderIcon.value,
+        href: repositoryUrl.value,
+      })
+    }
+
+    if (repositoryUrl.value && starsLink.value) {
+      commands.push({
+        id: 'package-link-stars',
+        group: 'links',
+        label: $t('command_palette.package_links.stars'),
+        keywords: [...packageKeywords, $t('command_palette.package_links.stars')],
+        iconClass: 'i-lucide:star',
+        href: starsLink.value,
+      })
+    }
+
+    if (forksLink.value) {
+      commands.push({
+        id: 'package-link-forks',
+        group: 'links',
+        label: $t('command_palette.package_links.forks'),
+        keywords: [...packageKeywords, $t('command_palette.package_links.forks')],
+        iconClass: 'i-lucide:git-fork',
+        href: forksLink.value,
+      })
+    }
+
+    if (homepageUrl.value) {
+      commands.push({
+        id: 'package-link-homepage',
+        group: 'links',
+        label: $t('package.links.homepage'),
+        keywords: [...packageKeywords, $t('package.links.homepage')],
+        iconClass: 'i-lucide:link',
+        href: homepageUrl.value,
+      })
+    }
+
+    if (displayVersion.value?.bugs?.url) {
+      commands.push({
+        id: 'package-link-issues',
+        group: 'links',
+        label: $t('package.links.issues'),
+        keywords: [...packageKeywords, $t('package.links.issues')],
+        iconClass: 'i-lucide:circle-alert',
+        href: displayVersion.value!.bugs!.url!,
+      })
+    }
+
+    commands.push({
+      id: 'package-link-npm',
+      group: 'links',
+      label: 'npm',
+      keywords: [...packageKeywords, $t('common.view_on.npm')],
+      iconClass: 'i-simple-icons:npm',
+      href: `https://www.npmjs.com/package/${props.pkg.name}`,
+    })
+
+    if (props.jsrInfo?.exists && props.jsrInfo.url) {
+      commands.push({
+        id: 'package-link-jsr',
+        group: 'links',
+        label: $t('package.links.jsr'),
+        keywords: [...packageKeywords, $t('package.links.jsr')],
+        iconClass: 'i-simple-icons:jsr',
+        href: props.jsrInfo.url,
+      })
+    }
+
+    return commands
+  }),
+)
 </script>
 
 <template>
diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index 7cf6b4c8bc..16138671c6 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
 import { SCROLL_TO_TOP_THRESHOLD } from '~/composables/useScrollToTop'
 import { isEditableElement } from '~/utils/input'
 
@@ -61,6 +62,14 @@ const { y: scrollY } = useScroll(window)
 const showScrollToTop = computed(() => scrollY.value > SCROLL_TO_TOP_THRESHOLD)
 
 const packageName = computed(() => props.pkg?.name ?? '')
+const fundingUrl = computed(() => {
+  let funding = props.displayVersion?.funding
+  if (Array.isArray(funding)) funding = funding[0]
+
+  if (!funding) return null
+
+  return typeof funding === 'string' ? funding : funding.url
+})
 
 const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
   source: packageName,
@@ -72,6 +81,38 @@ function hasProvenance(version: PackumentVersion | null): boolean {
   return !!(version.dist as { attestations?: unknown }).attestations
 }
 
+useCommandPaletteContextCommands(
+  computed((): CommandPaletteContextCommandInput[] => {
+    if (!packageName.value) return []
+
+    const commands: CommandPaletteContextCommandInput[] = [
+      {
+        id: 'package-copy-name',
+        group: 'package',
+        label: $t('package.copy_name'),
+        keywords: [packageName.value],
+        iconClass: 'i-lucide:copy',
+        action: () => {
+          copyPkgName()
+        },
+      },
+    ]
+
+    if (fundingUrl.value) {
+      commands.push({
+        id: 'package-link-funding',
+        group: 'links',
+        label: $t('package.links.fund'),
+        keywords: [packageName.value, $t('package.links.fund')],
+        iconClass: 'i-lucide:heart',
+        href: fundingUrl.value,
+      })
+    }
+
+    return commands
+  }),
+)
+
 const router = useRouter()
 // Docs URL: use our generated API docs
 const docsLink = computed(() => {
@@ -173,15 +214,6 @@ onKeyStroke(
   },
   { dedupe: true },
 )
-
-const fundingUrl = computed(() => {
-  let funding = props.displayVersion?.funding
-  if (Array.isArray(funding)) funding = funding[0]
-
-  if (!funding) return null
-
-  return typeof funding === 'string' ? funding : funding.url
-})
 </script>
 
 <template>
diff --git a/app/components/Package/Playgrounds.vue b/app/components/Package/Playgrounds.vue
index d98ee537cb..d6b6dd425b 100644
--- a/app/components/Package/Playgrounds.vue
+++ b/app/components/Package/Playgrounds.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
+
 const props = defineProps<{
   links: PlaygroundLink[]
 }>()
@@ -115,6 +117,19 @@ function focusMenuItem(index: number) {
   const items = menuRef.value?.querySelectorAll<HTMLElement>('[role="menuitem"]')
   items?.[index]?.focus()
 }
+
+useCommandPaletteContextCommands(
+  computed((): CommandPaletteContextCommandInput[] =>
+    props.links.map(link => ({
+      id: `package-playground:${link.url}`,
+      group: 'links',
+      label: link.label,
+      keywords: [link.providerName, $t('package.playgrounds.title')],
+      iconClass: getIcon(link.provider),
+      href: link.url,
+    })),
+  ),
+)
 </script>
 
 <template>
diff --git a/app/components/Package/SkillsCard.vue b/app/components/Package/SkillsCard.vue
index 1a83c3828f..d1d4d0baad 100644
--- a/app/components/Package/SkillsCard.vue
+++ b/app/components/Package/SkillsCard.vue
@@ -1,11 +1,32 @@
 <script setup lang="ts">
-defineProps<{
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
+
+const props = defineProps<{
   skills: SkillListItem[]
   packageName: string
   version?: string
 }>()
 
 const skillsModal = useModal('skills-modal')
+
+useCommandPaletteContextCommands(
+  computed((): CommandPaletteContextCommandInput[] => {
+    if (!props.skills.length) return []
+
+    return [
+      {
+        id: 'package-skills-modal',
+        group: 'package',
+        label: $t('package.skills.title'),
+        keywords: [props.packageName, $t('package.skills.title')],
+        iconClass: 'i-custom:agent-skills',
+        action: () => {
+          skillsModal.open()
+        },
+      },
+    ]
+  }),
+)
 </script>
 
 <template>
diff --git a/app/components/Settings/AccentColorPicker.vue b/app/components/Settings/AccentColorPicker.vue
index 6d0d4ad217..61ecede2b8 100644
--- a/app/components/Settings/AccentColorPicker.vue
+++ b/app/components/Settings/AccentColorPicker.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useAccentColor } from '~/composables/useSettings'
+import { DEFAULT_ACCENT_COLOR_OPTION_ID, useAccentColor } from '~/composables/useSettings'
 
-const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
+const { accentColors, selectedAccentColorOptionId, setAccentColor } = useAccentColor()
 
 onPrehydrate(el => {
   const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
-  const defaultId = 'sky'
-  const id = settings.accentColorId
+  const defaultId = DEFAULT_ACCENT_COLOR_OPTION_ID
+  const id = settings.accentColorId ?? defaultId
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
     if (input) {
@@ -42,7 +42,7 @@ onPrehydrate(el => {
         name="accent-color"
         class="sr-only"
         :value="color.id"
-        :checked="selectedAccentColor === color.id || (!selectedAccentColor && color.id === 'sky')"
+        :checked="selectedAccentColorOptionId === color.id"
         :aria-label="color.label"
         @change="setAccentColor(color.id)"
       />
diff --git a/app/components/Settings/BgThemePicker.vue b/app/components/Settings/BgThemePicker.vue
index cdc8efb6a7..482c940e28 100644
--- a/app/components/Settings/BgThemePicker.vue
+++ b/app/components/Settings/BgThemePicker.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-const { backgroundThemes, selectedBackgroundTheme, setBackgroundTheme } = useBackgroundTheme()
+import { DEFAULT_BACKGROUND_THEME_OPTION_ID, useBackgroundTheme } from '~/composables/useSettings'
+
+const { backgroundThemes, selectedBackgroundThemeOptionId, setBackgroundTheme } =
+  useBackgroundTheme()
 
 onPrehydrate(el => {
   const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
-  const defaultId = 'neutral'
-  const id = settings.preferredBackgroundTheme
+  const defaultId = DEFAULT_BACKGROUND_THEME_OPTION_ID
+  const id = settings.preferredBackgroundTheme ?? defaultId
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
     if (input) {
@@ -39,10 +42,7 @@ onPrehydrate(el => {
         name="background-theme"
         class="sr-only"
         :value="theme.id"
-        :checked="
-          selectedBackgroundTheme === theme.id ||
-          (!selectedBackgroundTheme && theme.id === 'neutral')
-        "
+        :checked="selectedBackgroundThemeOptionId === theme.id"
         :aria-label="theme.label"
         @change="setBackgroundTheme(theme.id)"
       />
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index f1fbe7fd2f..8fb68a05f9 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -2,6 +2,7 @@
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import type { DevDependencySuggestion } from '#shared/utils/dev-dependency'
 import type { PackageManagerId } from '~/utils/install-command'
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
 
 const props = defineProps<{
   packageName: string
@@ -123,6 +124,86 @@ const copyDevInstallCommand = () =>
       dev: true,
     }),
   )
+
+useCommandPaletteContextCommands(
+  computed((): CommandPaletteContextCommandInput[] => {
+    const commands: CommandPaletteContextCommandInput[] = [
+      {
+        id: 'package-copy-install',
+        group: 'package',
+        label: $t('package.get_started.copy_command'),
+        keywords: [props.packageName],
+        iconClass: 'i-lucide:copy',
+        action: () => {
+          copyInstallCommand()
+        },
+      },
+    ]
+
+    if (devDependencySuggestion.value.recommended) {
+      commands.push({
+        id: 'package-copy-dev-install',
+        group: 'package',
+        label: $t('package.get_started.copy_dev_command'),
+        keywords: [props.packageName],
+        iconClass: 'i-lucide:copy-plus',
+        action: () => {
+          copyDevInstallCommand()
+        },
+      })
+    }
+
+    if (props.executableInfo?.hasExecutable) {
+      commands.push({
+        id: 'package-copy-run',
+        group: 'package',
+        label: $t('command_palette.package_actions.copy_run'),
+        keywords: [props.packageName, $t('package.run.locally')],
+        iconClass: 'i-lucide:terminal-square',
+        action: () => {
+          copyRunCommand(props.executableInfo?.primaryCommand)
+        },
+      })
+    }
+
+    if (props.createPackageInfo) {
+      commands.push({
+        id: 'package-copy-create',
+        group: 'package',
+        label: $t('package.create.copy_command'),
+        keywords: [props.packageName, props.createPackageInfo.packageName],
+        iconClass: 'i-lucide:wand-sparkles',
+        action: () => {
+          copyCreateCommand()
+        },
+      })
+    }
+
+    if (props.typesPackageName && showTypesInInstall.value) {
+      commands.push({
+        id: 'package-view-types',
+        group: 'package',
+        label: $t('package.get_started.view_types', { package: props.typesPackageName }),
+        keywords: [props.packageName, props.typesPackageName],
+        iconClass: 'i-lucide:arrow-right',
+        to: packageRoute(props.typesPackageName!),
+      })
+    }
+
+    if (props.createPackageInfo) {
+      commands.push({
+        id: 'package-open-create-info',
+        group: 'package',
+        label: props.createPackageInfo.packageName,
+        keywords: [props.packageName, props.createPackageInfo.packageName],
+        iconClass: 'i-lucide:info',
+        to: packageRoute(props.createPackageInfo.packageName),
+      })
+    }
+
+    return commands
+  }),
+)
 </script>
 
 <template>
diff --git a/app/composables/useCommandPalette.ts b/app/composables/useCommandPalette.ts
new file mode 100644
index 0000000000..2af67ef04b
--- /dev/null
+++ b/app/composables/useCommandPalette.ts
@@ -0,0 +1,312 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type {
+  CommandPaletteContextCommand,
+  CommandPaletteContextCommandInput,
+  CommandPaletteCommand,
+  CommandPaletteGroup,
+  CommandPalettePackageContext,
+  CommandPaletteView,
+} from '~/types/command-palette'
+
+const actionRegistry = new Map<string, () => void | Promise<void>>()
+const actionIdsByScopeId = new Map<string, string[]>()
+const packageContextOpenRegistry = new Map<string, () => void | Promise<void>>()
+const queryOverrideRegistry = new Map<string, (query: string) => CommandPaletteCommand[] | null>()
+
+function stripContextCommandAction(
+  command: CommandPaletteContextCommandInput,
+  actionId: string,
+): CommandPaletteContextCommand {
+  if ('action' in command) {
+    const { action: _action, ...commandWithoutAction } = command
+    return {
+      ...commandWithoutAction,
+      actionId,
+    }
+  }
+
+  return {
+    ...command,
+    actionId,
+  }
+}
+
+export function useCommandPalette() {
+  const isOpen = useState('command-palette:is-open', () => false)
+  const query = useState('command-palette:query', () => '')
+  const view = useState<CommandPaletteView>('command-palette:view', () => 'root')
+  const announcement = useState('command-palette:announcement', () => '')
+  const packageContext = useState<CommandPalettePackageContext | null>(
+    'command-palette:package-context',
+    () => null,
+  )
+  const packageContextScopeId = useState<string | null>(
+    'command-palette:package-context-scope-id',
+    () => null,
+  )
+  const contextCommands = useState<
+    Array<{ scopeId: string; commands: CommandPaletteContextCommand[] }>
+  >('command-palette:context-commands', () => [])
+  const queryOverrides = useState<Array<{ scopeId: string; group: CommandPaletteGroup }>>(
+    'command-palette:query-overrides',
+    () => [],
+  )
+
+  function open() {
+    isOpen.value = true
+
+    if (import.meta.client) {
+      const scopeId = packageContextScopeId.value
+      if (!scopeId) return
+
+      const onOpen = packageContextOpenRegistry.get(scopeId)
+      if (!onOpen) return
+
+      void Promise.resolve(onOpen()).catch(() => {})
+    }
+  }
+
+  function close() {
+    isOpen.value = false
+    query.value = ''
+    view.value = 'root'
+  }
+
+  function toggle() {
+    if (isOpen.value) {
+      close()
+      return
+    }
+
+    open()
+  }
+
+  function setView(nextView: CommandPaletteView) {
+    view.value = nextView
+    query.value = ''
+  }
+
+  function announce(message: string) {
+    if (!message) return
+
+    if (import.meta.client && announcement.value === message) {
+      announcement.value = ''
+      queueMicrotask(() => {
+        announcement.value = message
+      })
+      return
+    }
+
+    announcement.value = message
+  }
+
+  function setPackageContext(context: CommandPalettePackageContext, scopeId?: string) {
+    packageContext.value = context
+    packageContextScopeId.value = scopeId ?? null
+  }
+
+  function clearPackageContext(scopeId?: string) {
+    if (scopeId && packageContextScopeId.value !== scopeId) return
+
+    packageContext.value = null
+    packageContextScopeId.value = null
+  }
+
+  function setContextCommands(commands: CommandPaletteContextCommand[], scopeId: string) {
+    const nextEntries = contextCommands.value.filter(entry => entry.scopeId !== scopeId)
+    if (commands.length > 0) {
+      nextEntries.push({ scopeId, commands })
+    }
+    contextCommands.value = nextEntries
+  }
+
+  function clearContextCommands(scopeId: string) {
+    contextCommands.value = contextCommands.value.filter(entry => entry.scopeId !== scopeId)
+  }
+
+  function registerContextCommandActions(
+    scopeId: string,
+    commands: Array<{ actionId: string; action: () => void | Promise<void> }>,
+  ) {
+    const previousActionIds = actionIdsByScopeId.get(scopeId) ?? []
+    previousActionIds.forEach(actionId => {
+      actionRegistry.delete(actionId)
+    })
+
+    const nextActionIds: string[] = []
+    commands.forEach(command => {
+      actionRegistry.set(command.actionId, command.action)
+      nextActionIds.push(command.actionId)
+    })
+    actionIdsByScopeId.set(scopeId, nextActionIds)
+  }
+
+  function clearContextCommandActions(scopeId: string) {
+    const actionIds = actionIdsByScopeId.get(scopeId) ?? []
+    actionIds.forEach(actionId => {
+      actionRegistry.delete(actionId)
+    })
+    actionIdsByScopeId.delete(scopeId)
+  }
+
+  function resolveContextCommandAction(actionId: string) {
+    return actionRegistry.get(actionId)
+  }
+
+  function setPackageContextOnOpen(scopeId: string, onOpen: () => void | Promise<void>) {
+    packageContextOpenRegistry.set(scopeId, onOpen)
+  }
+
+  function clearPackageContextOnOpen(scopeId: string) {
+    packageContextOpenRegistry.delete(scopeId)
+  }
+
+  function setQueryOverride(
+    scopeId: string,
+    group: CommandPaletteGroup,
+    resolve: (query: string) => CommandPaletteCommand[] | null,
+  ) {
+    queryOverrideRegistry.set(`${scopeId}:${group}`, resolve)
+    queryOverrides.value = [
+      ...queryOverrides.value.filter(
+        entry => !(entry.scopeId === scopeId && entry.group === group),
+      ),
+      { scopeId, group },
+    ]
+  }
+
+  function clearQueryOverride(scopeId: string, group: CommandPaletteGroup) {
+    queryOverrideRegistry.delete(`${scopeId}:${group}`)
+    queryOverrides.value = queryOverrides.value.filter(
+      entry => !(entry.scopeId === scopeId && entry.group === group),
+    )
+  }
+
+  function resolveQueryOverride(scopeId: string, group: CommandPaletteGroup) {
+    return queryOverrideRegistry.get(`${scopeId}:${group}`)
+  }
+
+  return {
+    isOpen,
+    query,
+    view,
+    announcement,
+    packageContext,
+    contextCommands,
+    queryOverrides,
+    open,
+    close,
+    toggle,
+    setView,
+    announce,
+    setPackageContext,
+    clearPackageContext,
+    setContextCommands,
+    clearContextCommands,
+    registerContextCommandActions,
+    clearContextCommandActions,
+    resolveContextCommandAction,
+    setPackageContextOnOpen,
+    clearPackageContextOnOpen,
+    setQueryOverride,
+    clearQueryOverride,
+    resolveQueryOverride,
+  }
+}
+
+export function useCommandPalettePackageContext(
+  context: MaybeRefOrGetter<CommandPalettePackageContext | null>,
+  options?: {
+    onOpen?: () => void | Promise<void>
+  },
+) {
+  const {
+    setPackageContext,
+    clearPackageContext,
+    setPackageContextOnOpen,
+    clearPackageContextOnOpen,
+  } = useCommandPalette()
+  const scopeId = useId()
+
+  if (import.meta.client && options?.onOpen) {
+    setPackageContextOnOpen(scopeId, options.onOpen)
+  }
+
+  watchEffect(() => {
+    const value = toValue(context)
+    if (value) {
+      setPackageContext(value, scopeId)
+      return
+    }
+
+    clearPackageContext(scopeId)
+  })
+
+  onScopeDispose(() => {
+    clearPackageContext(scopeId)
+    if (import.meta.client) {
+      clearPackageContextOnOpen(scopeId)
+    }
+  })
+}
+
+export function useCommandPaletteContextCommands(
+  commands: MaybeRefOrGetter<CommandPaletteContextCommandInput[]>,
+) {
+  const {
+    setContextCommands,
+    clearContextCommands,
+    registerContextCommandActions,
+    clearContextCommandActions,
+  } = useCommandPalette()
+  const scopeId = useId()
+
+  watch(
+    () => toValue(commands),
+    value => {
+      const serializedCommands = value.map((command, index) =>
+        stripContextCommandAction(command, `${scopeId}:${index}`),
+      )
+
+      setContextCommands(serializedCommands, scopeId)
+
+      if (import.meta.client) {
+        registerContextCommandActions(
+          scopeId,
+          value.flatMap((command, index) =>
+            command.action != null
+              ? [
+                  {
+                    actionId: `${scopeId}:${index}`,
+                    action: command.action,
+                  },
+                ]
+              : [],
+          ),
+        )
+      }
+    },
+    { immediate: true },
+  )
+
+  onScopeDispose(() => {
+    clearContextCommands(scopeId)
+    if (import.meta.client) {
+      clearContextCommandActions(scopeId)
+    }
+  })
+}
+
+export function useCommandPaletteQueryOverride(
+  group: CommandPaletteGroup,
+  resolve: (query: string) => CommandPaletteCommand[] | null,
+) {
+  const { setQueryOverride, clearQueryOverride } = useCommandPalette()
+  const scopeId = useId()
+
+  setQueryOverride(scopeId, group, resolve)
+
+  onScopeDispose(() => {
+    clearQueryOverride(scopeId, group)
+  })
+}
diff --git a/app/composables/useCommandPaletteCommands.ts b/app/composables/useCommandPaletteCommands.ts
new file mode 100644
index 0000000000..4e3989dd2f
--- /dev/null
+++ b/app/composables/useCommandPaletteCommands.ts
@@ -0,0 +1,220 @@
+// @unocss-include
+
+import type {
+  CommandPaletteCommand,
+  CommandPaletteCommandGroup,
+  CommandPaletteGroup,
+} from '~/types/command-palette'
+import { useFuse } from '@vueuse/integrations/useFuse'
+
+const GROUP_ORDER: CommandPaletteGroup[] = [
+  'actions',
+  'language',
+  'package',
+  'navigation',
+  'connections',
+  'links',
+  'settings',
+  'help',
+  'npmx',
+  'versions',
+]
+
+export function useCommandPaletteCommands() {
+  const { t } = useI18n()
+  const {
+    close,
+    packageContext,
+    query,
+    view,
+    contextCommands,
+    queryOverrides,
+    resolveContextCommandAction,
+    resolveQueryOverride,
+  } = useCommandPalette()
+
+  function closeThen(run: () => void | Promise<void>) {
+    return async () => {
+      close()
+      await run()
+    }
+  }
+
+  function groupLabel(group: CommandPaletteGroup): string {
+    const packageName = packageContext.value?.packageName
+
+    switch (group) {
+      case 'actions':
+        return t('command_palette.groups.actions')
+      case 'help':
+        return t('command_palette.groups.help')
+      case 'language':
+        return t('command_palette.groups.language')
+      case 'package':
+        return packageName
+          ? t('command_palette.groups.package_with_name', { name: packageName })
+          : t('command_palette.groups.package')
+      case 'navigation':
+        return t('command_palette.groups.navigation')
+      case 'connections':
+        return t('command_palette.groups.connections')
+      case 'links':
+        return t('command_palette.groups.links')
+      case 'settings':
+        return t('nav.settings')
+      case 'npmx':
+        return t('command_palette.groups.npmx')
+      case 'versions':
+        return packageName
+          ? t('command_palette.groups.versions_with_name', { name: packageName })
+          : t('command_palette.groups.versions')
+    }
+  }
+
+  async function submitSearchQuery() {
+    const trimmedQuery = query.value.trim()
+    if (!trimmedQuery) return
+
+    close()
+    await navigateTo({
+      name: 'search',
+      query: {
+        q: trimmedQuery,
+      },
+    })
+  }
+
+  const trimmedQuery = computed(() => query.value.trim())
+  const { globalCommands, viewDefinitions } = useCommandPaletteGlobalCommands({
+    submitSearchQuery,
+  })
+  const currentViewDefinition = computed(() =>
+    view.value === 'root' ? null : viewDefinitions.value[view.value],
+  )
+  const rootSearchCommands = computed<CommandPaletteCommand[]>(() =>
+    Object.values(viewDefinitions.value).flatMap(definition => definition.rootSearchCommands ?? []),
+  )
+
+  const registeredCommands = computed<CommandPaletteCommand[]>(() =>
+    contextCommands.value.flatMap(entry =>
+      entry.commands.map((command): CommandPaletteCommand => {
+        if (command.to != null) {
+          return { ...command, to: command.to }
+        }
+
+        if (command.href != null) {
+          return { ...command, href: command.href }
+        }
+
+        return {
+          ...command,
+          action: closeThen(async () => {
+            const action = resolveContextCommandAction(command.actionId)
+            if (action) {
+              await action()
+            }
+          }),
+        }
+      }),
+    ),
+  )
+
+  const rootViewCommands = computed<CommandPaletteCommand[]>(() => [
+    ...globalCommands.value,
+    ...registeredCommands.value,
+  ])
+  const trailingSearchCommand = computed<CommandPaletteCommand | null>(() => {
+    if (view.value !== 'root' || !trimmedQuery.value) return null
+
+    const searchCommand = rootViewCommands.value.find(command => command.id === 'search')
+    if (!searchCommand) return null
+
+    return {
+      ...searchCommand,
+      label: t('command_palette.actions.search_for', { query: trimmedQuery.value }),
+      keywords: [...searchCommand.keywords, trimmedQuery.value],
+    }
+  })
+
+  const commands = computed(() => {
+    const base =
+      view.value !== 'root'
+        ? (currentViewDefinition.value?.commands ?? [])
+        : trimmedQuery.value
+          ? [
+              ...rootViewCommands.value.filter(command => command.id !== 'search'),
+              ...rootSearchCommands.value,
+            ]
+          : rootViewCommands.value
+
+    return base.map(command => ({
+      ...command,
+      keywords: [...command.keywords, groupLabel(command.group)],
+    }))
+  })
+
+  const { results } = useFuse(query, commands, {
+    fuseOptions: {
+      keys: ['label', 'keywords'],
+      threshold: 0.3,
+      ignoreLocation: true,
+      ignoreDiacritics: true,
+    },
+    matchAllWhenSearchEmpty: true,
+  })
+
+  const matchedCommands = computed(() => {
+    let nextCommands = results.value.map(result => result.item)
+
+    queryOverrides.value.forEach(({ scopeId, group }) => {
+      const resolve = resolveQueryOverride(scopeId, group)
+      if (!resolve) return
+      const overrideCommands = resolve(trimmedQuery.value)
+      if (overrideCommands == null) return
+      overrideCommands.forEach(command => {
+        if (command.action != null) {
+          command.action = closeThen(command.action)
+        }
+      })
+      nextCommands = [
+        ...nextCommands.filter(command => command.group !== group),
+        ...overrideCommands,
+      ]
+    })
+
+    return nextCommands
+  })
+  const trailingCommands = computed<CommandPaletteCommand[]>(() =>
+    trailingSearchCommand.value ? [trailingSearchCommand.value] : [],
+  )
+  const groupedCommands = computed<CommandPaletteCommandGroup[]>(() =>
+    GROUP_ORDER.map(group => {
+      const items = matchedCommands.value.filter(command => command.group === group)
+
+      return {
+        id: group,
+        label: groupLabel(group),
+        items,
+      }
+    }).filter(group => group.items.length > 0),
+  )
+
+  const flatCommands = computed(() => [
+    ...groupedCommands.value.flatMap(group => group.items),
+    ...trailingCommands.value,
+  ])
+
+  return {
+    groupedCommands,
+    flatCommands,
+    trailingCommands,
+    hasResults: computed(() => flatCommands.value.length > 0),
+    viewMeta: computed(() => ({
+      canGoBack: view.value !== 'root',
+      placeholder: currentViewDefinition.value?.placeholder ?? t('command_palette.placeholder'),
+      subtitle: currentViewDefinition.value?.subtitle ?? t('command_palette.subtitle'),
+    })),
+    submitSearchQuery,
+    trimmedQuery,
+  }
+}
diff --git a/app/composables/useCommandPaletteGlobalCommands.ts b/app/composables/useCommandPaletteGlobalCommands.ts
new file mode 100644
index 0000000000..e4d52cfe0e
--- /dev/null
+++ b/app/composables/useCommandPaletteGlobalCommands.ts
@@ -0,0 +1,643 @@
+// @unocss-include
+import type { CommandPaletteCommand, CommandPaletteView } from '~/types/command-palette'
+import {
+  DISCORD_BUILDERS_URL,
+  DISCORD_COMMUNITY_URL,
+  NPMX_DOCS_SITE,
+} from '#shared/utils/constants'
+
+interface UseCommandPaletteGlobalCommandsOptions {
+  submitSearchQuery: () => Promise<void>
+}
+
+type CommandPaletteSubview = Exclude<CommandPaletteView, 'root'>
+
+interface CommandPaletteViewDefinition {
+  commands: CommandPaletteCommand[]
+  placeholder: string
+  rootSearchCommands?: CommandPaletteCommand[]
+  subtitle: string
+}
+
+function addSearchKeyword(keywords: Set<string>, keyword: string | null) {
+  if (!keyword) return
+
+  const trimmedValue = keyword.trim()
+  if (!trimmedValue) return
+
+  keywords.add(trimmedValue)
+}
+
+function getLocaleDisplayName(displayLocale: string, code: string) {
+  try {
+    return new Intl.DisplayNames([displayLocale], { type: 'language' }).of(code) ?? null
+  } catch {
+    return null
+  }
+}
+
+function getLocaleSearchKeywords(
+  code: string,
+  label: string,
+  activeLocale: string,
+  t: ReturnType<typeof useI18n>['t'],
+) {
+  const keywords = new Set<string>()
+  const baseCode = code.split('-')[0] ?? code
+
+  addSearchKeyword(keywords, code)
+  addSearchKeyword(keywords, baseCode)
+  addSearchKeyword(keywords, label)
+  addSearchKeyword(keywords, t('settings.language'))
+
+  addSearchKeyword(keywords, getLocaleDisplayName(activeLocale, code))
+  addSearchKeyword(keywords, getLocaleDisplayName('en', code))
+  addSearchKeyword(keywords, getLocaleDisplayName(code, code))
+
+  if (code !== baseCode) addSearchKeyword(keywords, getLocaleDisplayName(activeLocale, baseCode))
+  if (code !== baseCode) addSearchKeyword(keywords, getLocaleDisplayName('en', baseCode))
+  if (code !== baseCode) addSearchKeyword(keywords, getLocaleDisplayName(baseCode, baseCode))
+
+  return [...keywords]
+}
+
+function activeLabel(isCurrentRoute: boolean, label: string) {
+  return isCurrentRoute ? label : null
+}
+
+function withRootSearchLabel(command: CommandPaletteCommand, label: string): CommandPaletteCommand {
+  return {
+    ...command,
+    id: `root-${command.id}`,
+    label,
+  }
+}
+
+export function useCommandPaletteGlobalCommands({
+  submitSearchQuery,
+}: UseCommandPaletteGlobalCommandsOptions) {
+  const { locale, locales, setLocale, t } = useI18n()
+  const route = useRoute()
+  const colorMode = useColorMode()
+  const { accentColors, selectedAccentColorOptionId, setAccentColor } = useAccentColor()
+  const { backgroundThemes, selectedBackgroundThemeOptionId, setBackgroundTheme } =
+    useBackgroundTheme()
+  const connectorModal = useModal('connector-modal')
+  const authModal = useModal('auth-modal')
+  const keyboardShortcutsModal = useModal('keyboard-shortcuts-modal')
+  const { settings } = useSettings()
+  const { isConnected: isNpmConnected, npmUser, disconnect: disconnectNpm } = useConnector()
+  const { user: atprotoUser, logout } = useAtproto()
+  const { announce, close, setView } = useCommandPalette()
+
+  function closeThen(run: () => void | Promise<void>) {
+    return async () => {
+      close()
+      await run()
+    }
+  }
+
+  function runThenAnnounce(run: () => void | Promise<void>, getMessage: () => string) {
+    return async () => {
+      await run()
+      close()
+      announce(getMessage())
+    }
+  }
+
+  const currentLocaleLabel = computed(() => {
+    const current = locales.value.find(entry =>
+      typeof entry === 'string' ? entry === locale.value : entry.code === locale.value,
+    )
+
+    if (!current) return locale.value
+    return typeof current === 'string' ? current : (current.name ?? current.code)
+  })
+  const currentAccentColorLabel = computed(() => {
+    const activeAccentColorId = selectedAccentColorOptionId.value
+    const activeAccentColor = accentColors.value.find(color => color.id === activeAccentColorId)
+
+    if (!activeAccentColor) return activeAccentColorId
+    return activeAccentColor.id === 'neutral'
+      ? t('settings.accent_colors.neutral')
+      : activeAccentColor.label
+  })
+  const currentAccentColorPreview = computed(() => {
+    const activeAccentColorId = selectedAccentColorOptionId.value
+    return accentColors.value.find(color => color.id === activeAccentColorId)?.value ?? null
+  })
+  const currentBackgroundThemeLabel = computed(() => {
+    const activeBackgroundThemeId = selectedBackgroundThemeOptionId.value
+    return (
+      backgroundThemes.value.find(theme => theme.id === activeBackgroundThemeId)?.label ??
+      activeBackgroundThemeId
+    )
+  })
+  const currentBackgroundThemePreview = computed(() => {
+    const activeBackgroundThemeId = selectedBackgroundThemeOptionId.value
+    return backgroundThemes.value.find(theme => theme.id === activeBackgroundThemeId)?.value ?? null
+  })
+  const localeCommands = computed<CommandPaletteCommand[]>(() =>
+    locales.value.map(entry => {
+      const code = typeof entry === 'string' ? entry : entry.code
+      const label = typeof entry === 'string' ? entry : (entry.name ?? entry.code)
+
+      return {
+        id: `locale:${code}`,
+        group: 'language' as const,
+        label,
+        keywords: getLocaleSearchKeywords(code, label, locale.value, t),
+        iconClass: 'i-lucide:languages',
+        active: code === locale.value,
+        activeLabel: code === locale.value ? t('command_palette.current') : null,
+        action: runThenAnnounce(
+          async () => {
+            await setLocale(code)
+          },
+          () =>
+            t('command_palette.announcements.language_changed', {
+              language: label,
+            }),
+        ),
+      }
+    }),
+  )
+  const accentColorCommands = computed<CommandPaletteCommand[]>(() => {
+    const activeAccentColorId = selectedAccentColorOptionId.value
+
+    return accentColors.value.map(color => ({
+      id: `accent-color:${color.id}`,
+      group: 'settings' as const,
+      label: color.id === 'neutral' ? t('settings.clear_accent') : color.label,
+      keywords: [color.label, color.id, t('settings.accent_colors.label'), t('settings.theme')],
+      iconClass: 'i-lucide:palette',
+      previewColor: color.value,
+      active: color.id === activeAccentColorId,
+      activeLabel: color.id === activeAccentColorId ? t('command_palette.current') : null,
+      action: runThenAnnounce(
+        () => {
+          setAccentColor(color.id)
+        },
+        () =>
+          t('command_palette.announcements.accent_color_changed', {
+            color: color.id === 'neutral' ? t('settings.clear_accent') : color.label,
+          }),
+      ),
+    }))
+  })
+  const backgroundThemeCommands = computed<CommandPaletteCommand[]>(() => {
+    const activeBackgroundThemeId = selectedBackgroundThemeOptionId.value
+
+    return backgroundThemes.value.map(theme => ({
+      id: `background-theme:${theme.id}`,
+      group: 'settings' as const,
+      label: theme.label,
+      keywords: [theme.label, theme.id, t('settings.background_themes.label'), t('settings.theme')],
+      iconClass: 'i-lucide:swatch-book',
+      previewColor: theme.value,
+      active: theme.id === activeBackgroundThemeId,
+      activeLabel: theme.id === activeBackgroundThemeId ? t('command_palette.current') : null,
+      action: runThenAnnounce(
+        () => {
+          setBackgroundTheme(theme.id)
+        },
+        () =>
+          t('command_palette.announcements.background_theme_changed', {
+            theme: theme.label,
+          }),
+      ),
+    }))
+  })
+
+  const globalCommands = computed<CommandPaletteCommand[]>(() => {
+    const items: CommandPaletteCommand[] = [
+      {
+        id: 'search',
+        group: 'navigation',
+        label: t('command_palette.actions.search'),
+        keywords: [t('search.title_packages'), t('search.label')],
+        iconClass: 'i-lucide:search',
+        action: submitSearchQuery,
+      },
+      {
+        id: 'keyboard-shortcuts',
+        group: 'help',
+        label: t('command_palette.actions.keyboard_shortcuts'),
+        keywords: [t('footer.keyboard_shortcuts'), t('shortcuts.show_kbd_hints')],
+        iconClass: 'i-lucide:command',
+        action: closeThen(() => {
+          keyboardShortcutsModal.open()
+        }),
+      },
+      {
+        id: 'language',
+        group: 'settings',
+        label: t('settings.language'),
+        keywords: [t('settings.sections.language'), currentLocaleLabel.value, locale.value],
+        iconClass: 'i-lucide:languages',
+        badge: currentLocaleLabel.value,
+        action: async () => {
+          setView('languages')
+        },
+      },
+      {
+        id: 'relative-dates',
+        group: 'settings',
+        label: t('settings.relative_dates'),
+        keywords: [t('settings.sections.display'), t('package.stats.published')],
+        iconClass: 'i-lucide:calendar-days',
+        badge: settings.value.relativeDates
+          ? t('command_palette.state.on')
+          : t('command_palette.state.off'),
+        action: runThenAnnounce(
+          () => {
+            settings.value.relativeDates = !settings.value.relativeDates
+          },
+          () =>
+            settings.value.relativeDates
+              ? t('command_palette.announcements.relative_dates_on')
+              : t('command_palette.announcements.relative_dates_off'),
+        ),
+      },
+      {
+        id: 'home',
+        group: 'navigation',
+        label: t('command_palette.navigation.home'),
+        keywords: [t('header.home')],
+        iconClass: 'i-lucide:house',
+        active: route.name === 'index',
+        activeLabel: activeLabel(route.name === 'index', t('command_palette.here')),
+        to: { name: 'index' },
+      },
+      {
+        id: 'compare',
+        group: 'navigation',
+        label: t('nav.compare'),
+        keywords: [t('shortcuts.compare')],
+        iconClass: 'i-lucide:git-compare',
+        active: route.name === 'compare',
+        activeLabel: activeLabel(route.name === 'compare', t('command_palette.here')),
+        to: { name: 'compare' },
+      },
+      {
+        id: 'settings',
+        group: 'navigation',
+        label: t('nav.settings'),
+        keywords: [t('shortcuts.settings')],
+        iconClass: 'i-lucide:settings',
+        active: route.name === 'settings',
+        activeLabel: activeLabel(route.name === 'settings', t('command_palette.here')),
+        to: { name: 'settings' },
+      },
+      {
+        id: 'about',
+        group: 'npmx',
+        label: t('footer.about'),
+        keywords: [t('footer.about')],
+        iconClass: 'i-lucide:info',
+        active: route.name === 'about',
+        activeLabel: activeLabel(route.name === 'about', t('command_palette.here')),
+        to: { name: 'about' },
+      },
+      {
+        id: 'blog',
+        group: 'npmx',
+        label: t('footer.blog'),
+        keywords: [t('blog.title')],
+        iconClass: 'i-lucide:notebook-pen',
+        active: `${route.name ?? ''}`.startsWith('blog'),
+        activeLabel: activeLabel(
+          `${route.name ?? ''}`.startsWith('blog'),
+          t('command_palette.here'),
+        ),
+        to: { name: 'blog' },
+      },
+      {
+        id: 'privacy',
+        group: 'npmx',
+        label: t('privacy_policy.title'),
+        keywords: [t('privacy_policy.title')],
+        iconClass: 'i-lucide:shield-check',
+        active: route.name === 'privacy',
+        activeLabel: activeLabel(route.name === 'privacy', t('command_palette.here')),
+        to: { name: 'privacy' },
+      },
+      {
+        id: 'accessibility',
+        group: 'npmx',
+        label: t('a11y.title'),
+        keywords: [t('a11y.footer_title')],
+        iconClass: 'i-custom:a11y',
+        active: route.name === 'accessibility',
+        activeLabel: activeLabel(route.name === 'accessibility', t('command_palette.here')),
+        to: { name: 'accessibility' },
+      },
+      {
+        id: 'npm-connection',
+        group: 'connections',
+        label:
+          isNpmConnected.value && npmUser.value
+            ? t('command_palette.connections.npm_connected', { username: npmUser.value })
+            : t('command_palette.connections.npm_connect'),
+        keywords: [t('account_menu.npm_cli')],
+        iconClass: 'i-lucide:terminal',
+        badge: isNpmConnected.value ? t('command_palette.connected') : null,
+        action: closeThen(() => {
+          connectorModal.open()
+        }),
+      },
+      {
+        id: 'atproto-connection',
+        group: 'connections',
+        label: atprotoUser.value?.handle
+          ? t('command_palette.connections.atmosphere_connected', {
+              handle: atprotoUser.value.handle,
+            })
+          : t('command_palette.connections.atmosphere_connect'),
+        keywords: [t('account_menu.atmosphere')],
+        iconClass: 'i-lucide:at-sign',
+        badge: atprotoUser.value ? t('command_palette.connected') : null,
+        action: closeThen(() => {
+          authModal.open()
+        }),
+      },
+      {
+        id: 'help-docs-link',
+        group: 'help',
+        label: t('footer.docs'),
+        keywords: [t('footer.docs')],
+        iconClass: 'i-lucide:file-text',
+        href: NPMX_DOCS_SITE,
+      },
+      {
+        id: 'chat-link',
+        group: 'help',
+        label: t('footer.chat'),
+        keywords: [t('footer.chat')],
+        iconClass: 'i-lucide:message-circle',
+        href: DISCORD_COMMUNITY_URL,
+      },
+      {
+        id: 'docs-link',
+        group: 'npmx',
+        label: t('footer.docs'),
+        keywords: [t('footer.docs')],
+        iconClass: 'i-lucide:file-text',
+        href: NPMX_DOCS_SITE,
+      },
+      {
+        id: 'npmx-chat-link',
+        group: 'npmx',
+        label: t('footer.chat'),
+        keywords: [t('footer.chat')],
+        iconClass: 'i-lucide:message-circle',
+        href: DISCORD_COMMUNITY_URL,
+      },
+      {
+        id: 'builders-chat-link',
+        group: 'npmx',
+        label: t('footer.builders_chat'),
+        keywords: [t('footer.builders_chat')],
+        iconClass: 'i-lucide:message-circle',
+        href: DISCORD_BUILDERS_URL,
+      },
+      {
+        id: 'source-link',
+        group: 'npmx',
+        label: t('footer.source'),
+        keywords: [t('footer.source')],
+        iconClass: 'i-simple-icons:github',
+        href: 'https://repo.npmx.dev',
+      },
+      {
+        id: 'social-link',
+        group: 'npmx',
+        label: t('footer.social'),
+        keywords: [t('footer.social')],
+        iconClass: 'i-simple-icons:bluesky',
+        href: 'https://social.npmx.dev',
+      },
+      {
+        id: 'theme-system',
+        group: 'settings',
+        label: t('command_palette.theme.system'),
+        keywords: [t('settings.theme_system'), t('settings.theme')],
+        iconClass: 'i-lucide:monitor',
+        active: colorMode.preference === 'system',
+        action: runThenAnnounce(
+          () => {
+            colorMode.preference = 'system'
+          },
+          () =>
+            t('command_palette.announcements.theme_changed', {
+              theme: t('settings.theme_system'),
+            }),
+        ),
+      },
+      {
+        id: 'theme-light',
+        group: 'settings',
+        label: t('command_palette.theme.light'),
+        keywords: [t('settings.theme_light'), t('settings.theme')],
+        iconClass: 'i-lucide:sun',
+        active: colorMode.preference === 'light',
+        action: runThenAnnounce(
+          () => {
+            colorMode.preference = 'light'
+          },
+          () =>
+            t('command_palette.announcements.theme_changed', {
+              theme: t('settings.theme_light'),
+            }),
+        ),
+      },
+      {
+        id: 'theme-dark',
+        group: 'settings',
+        label: t('command_palette.theme.dark'),
+        keywords: [t('settings.theme_dark'), t('settings.theme')],
+        iconClass: 'i-lucide:moon',
+        active: colorMode.preference === 'dark',
+        action: runThenAnnounce(
+          () => {
+            colorMode.preference = 'dark'
+          },
+          () =>
+            t('command_palette.announcements.theme_changed', {
+              theme: t('settings.theme_dark'),
+            }),
+        ),
+      },
+      {
+        id: 'accent-colors',
+        group: 'settings',
+        label: t('settings.accent_colors.label'),
+        keywords: [
+          t('settings.accent_colors.label'),
+          currentAccentColorLabel.value,
+          t('settings.theme'),
+        ],
+        iconClass: 'i-lucide:palette',
+        badge: currentAccentColorLabel.value,
+        previewColor: currentAccentColorPreview.value,
+        action: async () => {
+          setView('accent-colors')
+        },
+      },
+      {
+        id: 'background-themes',
+        group: 'settings',
+        label: t('settings.background_themes.label'),
+        keywords: [
+          t('settings.background_themes.label'),
+          currentBackgroundThemeLabel.value,
+          t('settings.theme'),
+        ],
+        iconClass: 'i-lucide:swatch-book',
+        badge: currentBackgroundThemeLabel.value,
+        previewColor: currentBackgroundThemePreview.value,
+        action: async () => {
+          setView('background-themes')
+        },
+      },
+    ]
+
+    const npmUsername = npmUser.value
+    if (isNpmConnected.value && npmUsername) {
+      items.push(
+        {
+          id: 'npm-disconnect',
+          group: 'connections',
+          label: t('command_palette.connections.npm_disconnect'),
+          keywords: [
+            npmUsername,
+            t('command_palette.connections.npm_connected', { username: npmUsername }),
+          ],
+          iconClass: 'i-lucide:plug-zap',
+          action: closeThen(() => {
+            disconnectNpm()
+          }),
+        },
+        {
+          id: 'my-packages',
+          group: 'navigation',
+          label: t('command_palette.navigation.packages', { username: npmUsername }),
+          keywords: [npmUsername, t('header.packages')],
+          iconClass: 'i-lucide:boxes',
+          active: route.name === '~username' && route.params.username?.toString() === npmUsername,
+          activeLabel: activeLabel(
+            route.name === '~username' && route.params.username?.toString() === npmUsername,
+            t('command_palette.here'),
+          ),
+          to: {
+            name: '~username',
+            params: {
+              username: npmUsername,
+            },
+          },
+        },
+        {
+          id: 'my-orgs',
+          group: 'navigation',
+          label: t('command_palette.navigation.orgs', { username: npmUsername }),
+          keywords: [npmUsername, t('header.orgs')],
+          iconClass: 'i-lucide:users',
+          active:
+            route.name === '~username-orgs' && route.params.username?.toString() === npmUsername,
+          activeLabel: activeLabel(
+            route.name === '~username-orgs' && route.params.username?.toString() === npmUsername,
+            t('command_palette.here'),
+          ),
+          to: {
+            name: '~username-orgs',
+            params: {
+              username: npmUsername,
+            },
+          },
+        },
+      )
+    }
+
+    const atprotoProfile = atprotoUser.value
+    if (atprotoProfile != null) {
+      items.push(
+        {
+          id: 'atproto-disconnect',
+          group: 'connections',
+          label: t('command_palette.connections.atmosphere_disconnect'),
+          keywords: [
+            atprotoProfile.handle,
+            t('command_palette.connections.atmosphere_connected', {
+              handle: atprotoProfile.handle,
+            }),
+          ],
+          iconClass: 'i-lucide:log-out',
+          action: closeThen(async () => {
+            await logout()
+          }),
+        },
+        {
+          id: 'my-profile',
+          group: 'navigation',
+          label: t('command_palette.navigation.profile', { handle: atprotoProfile.handle }),
+          keywords: [atprotoProfile.handle, t('account_menu.atmosphere')],
+          iconClass: 'i-lucide:user',
+          active:
+            route.name === 'profile-identity' &&
+            route.params.identity?.toString() === atprotoProfile.handle,
+          activeLabel: activeLabel(
+            route.name === 'profile-identity' &&
+              route.params.identity?.toString() === atprotoProfile.handle,
+            t('command_palette.here'),
+          ),
+          to: {
+            name: 'profile-identity',
+            params: {
+              identity: atprotoProfile.handle,
+            },
+          },
+        },
+      )
+    }
+
+    return items
+  })
+
+  const viewDefinitions = computed<Record<CommandPaletteSubview, CommandPaletteViewDefinition>>(
+    () => ({
+      'languages': {
+        commands: [
+          ...localeCommands.value,
+          {
+            id: 'language-help-translate',
+            group: 'links',
+            label: t('command_palette.actions.help_translate'),
+            keywords: [t('settings.help_translate'), t('settings.language')],
+            iconClass: 'i-lucide:languages',
+            href: 'https://i18n.npmx.dev/',
+          },
+        ],
+        placeholder: t('settings.language'),
+        rootSearchCommands: localeCommands.value.map(command =>
+          withRootSearchLabel(command, `${t('settings.language')}: ${command.label}`),
+        ),
+        subtitle: t('command_palette.subtitle_languages'),
+      },
+      'accent-colors': {
+        commands: accentColorCommands.value,
+        placeholder: t('settings.accent_colors.label'),
+        subtitle: t('settings.accent_colors.label'),
+      },
+      'background-themes': {
+        commands: backgroundThemeCommands.value,
+        placeholder: t('settings.background_themes.label'),
+        subtitle: t('settings.background_themes.label'),
+      },
+    }),
+  )
+
+  return {
+    globalCommands,
+    viewDefinitions,
+  }
+}
diff --git a/app/composables/useCommandPalettePackageCommands.ts b/app/composables/useCommandPalettePackageCommands.ts
new file mode 100644
index 0000000000..4f3098c383
--- /dev/null
+++ b/app/composables/useCommandPalettePackageCommands.ts
@@ -0,0 +1,154 @@
+// @unocss-include
+import type { MaybeRefOrGetter } from 'vue'
+import type {
+  CommandPaletteContextCommandInput,
+  CommandPalettePackageContext,
+} from '~/types/command-palette'
+import { downloadPackageTarball } from '~/utils/package-download'
+
+function activeLabel(isCurrentRoute: boolean, label: string) {
+  return isCurrentRoute ? label : null
+}
+
+export function useCommandPalettePackageCommands(
+  context: MaybeRefOrGetter<CommandPalettePackageContext | null>,
+) {
+  const { t } = useI18n()
+  const route = useRoute()
+
+  function isCurrentPackageCompare(packageName: string) {
+    const packages = route.query.packages
+    if (typeof packages !== 'string') return false
+
+    return packages
+      .split(',')
+      .map(pkg => pkg.trim())
+      .includes(packageName)
+  }
+
+  useCommandPaletteContextCommands(
+    computed((): CommandPaletteContextCommandInput[] => {
+      const resolvedContext = toValue(context)
+      if (!resolvedContext?.resolvedVersion) return []
+
+      const docsLink = {
+        name: 'docs' as const,
+        params: {
+          path: [resolvedContext.packageName, 'v', resolvedContext.resolvedVersion] satisfies [
+            string,
+            string,
+            string,
+          ],
+        },
+      }
+      const splitName = resolvedContext.packageName.split('/')
+      const codeLink = {
+        name: 'code' as const,
+        params: {
+          org: splitName.length === 2 ? splitName[0] : undefined,
+          packageName: splitName.length === 2 ? splitName[1]! : splitName[0]!,
+          version: resolvedContext.resolvedVersion,
+          filePath: '',
+        },
+      }
+
+      const commands: CommandPaletteContextCommandInput[] = [
+        {
+          id: 'package-main',
+          group: 'package',
+          label: t('command_palette.package.main'),
+          keywords: [resolvedContext.packageName, t('shortcuts.open_main')],
+          iconClass: 'i-lucide:package',
+          active: ['package', 'package-version'].includes(`${route.name ?? ''}`),
+          activeLabel: activeLabel(
+            ['package', 'package-version'].includes(`${route.name ?? ''}`),
+            t('command_palette.here'),
+          ),
+          to: packageRoute(resolvedContext.packageName, resolvedContext.resolvedVersion),
+        },
+        {
+          id: 'package-docs',
+          group: 'package',
+          label: t('command_palette.package.docs'),
+          keywords: [resolvedContext.packageName, t('shortcuts.open_docs')],
+          iconClass: 'i-lucide:file-text',
+          active: route.name === 'docs',
+          activeLabel: activeLabel(route.name === 'docs', t('command_palette.here')),
+          to: docsLink,
+        },
+        {
+          id: 'package-code',
+          group: 'package',
+          label: t('command_palette.package.code'),
+          keywords: [resolvedContext.packageName, t('shortcuts.open_code_view')],
+          iconClass: 'i-lucide:code',
+          active: route.name === 'code',
+          activeLabel: activeLabel(route.name === 'code', t('command_palette.here')),
+          to: codeLink,
+        },
+        {
+          id: 'package-compare',
+          group: 'package',
+          label: t('command_palette.package.compare'),
+          keywords: [resolvedContext.packageName, t('shortcuts.compare_from_package')],
+          iconClass: 'i-lucide:git-compare',
+          active: route.name === 'compare' && isCurrentPackageCompare(resolvedContext.packageName),
+          activeLabel: activeLabel(
+            route.name === 'compare' && isCurrentPackageCompare(resolvedContext.packageName),
+            t('command_palette.here'),
+          ),
+          to: {
+            name: 'compare',
+            query: {
+              packages: resolvedContext.packageName,
+            },
+          },
+        },
+      ]
+
+      if (resolvedContext.tarballUrl) {
+        commands.push({
+          id: 'package-download',
+          group: 'package',
+          label: t('command_palette.package.download'),
+          keywords: [
+            resolvedContext.packageName,
+            t('package.download.button'),
+            t('package.download.tarball'),
+          ],
+          iconClass: 'i-lucide:download',
+          action: () => {
+            void downloadPackageTarball(resolvedContext.packageName, {
+              version: resolvedContext.resolvedVersion!,
+              dist: {
+                tarball: resolvedContext.tarballUrl!,
+              },
+            })
+          },
+        })
+      }
+
+      if (
+        resolvedContext.latestVersion &&
+        resolvedContext.latestVersion !== resolvedContext.resolvedVersion
+      ) {
+        commands.push({
+          id: 'package-diff',
+          group: 'package',
+          label: t('command_palette.package.diff'),
+          keywords: [resolvedContext.packageName, t('shortcuts.open_diff')],
+          iconClass: 'i-lucide:git-compare',
+          active: route.name === 'diff',
+          activeLabel: activeLabel(route.name === 'diff', t('command_palette.here')),
+          to: diffRoute(
+            resolvedContext.packageName,
+            resolvedContext.resolvedVersion!,
+            resolvedContext.latestVersion!,
+          ),
+        })
+      }
+
+      return commands
+    }),
+  )
+}
diff --git a/app/composables/useCommandPalettePackageVersions.ts b/app/composables/useCommandPalettePackageVersions.ts
new file mode 100644
index 0000000000..021a4556f4
--- /dev/null
+++ b/app/composables/useCommandPalettePackageVersions.ts
@@ -0,0 +1,39 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { fetchAllPackageVersions } from '~/utils/npm/api'
+
+export function useCommandPalettePackageVersions(
+  packageName: MaybeRefOrGetter<string | null | undefined>,
+) {
+  const versions = shallowRef<string[] | null>(null)
+  let versionsPromise: Promise<void> | null = null
+
+  watch(
+    () => toValue(packageName),
+    () => {
+      versions.value = null
+      versionsPromise = null
+    },
+  )
+
+  async function ensureLoaded() {
+    const resolvedPackageName = toValue(packageName)
+    if (!resolvedPackageName || versions.value) return
+    if (versionsPromise) return versionsPromise
+
+    versionsPromise = fetchAllPackageVersions(resolvedPackageName)
+      .then(allVersions => {
+        if (toValue(packageName) !== resolvedPackageName) return
+        versions.value = allVersions.map(version => version.version)
+      })
+      .finally(() => {
+        versionsPromise = null
+      })
+
+    return versionsPromise
+  }
+
+  return {
+    ensureLoaded,
+    versions,
+  }
+}
diff --git a/app/composables/useCommandPaletteVersionCommands.ts b/app/composables/useCommandPaletteVersionCommands.ts
new file mode 100644
index 0000000000..ecc676e50f
--- /dev/null
+++ b/app/composables/useCommandPaletteVersionCommands.ts
@@ -0,0 +1,63 @@
+// @unocss-include
+import type { MaybeRefOrGetter } from 'vue'
+import type {
+  CommandPaletteCommand,
+  CommandPaletteContextCommandInput,
+  CommandPalettePackageContext,
+} from '~/types/command-palette'
+import { compare, satisfies, validRange } from 'semver'
+
+function getSortedVersions(context: CommandPalettePackageContext) {
+  return [...context.versions].sort((a, b) => {
+    if (a === context.resolvedVersion) return -1
+    if (b === context.resolvedVersion) return 1
+    return compare(b, a)
+  })
+}
+
+function createVersionCommands(
+  context: CommandPalettePackageContext,
+  t: ReturnType<typeof useI18n>['t'],
+  versions = getSortedVersions(context),
+  urlPattern?: string | null,
+): CommandPaletteCommand[] {
+  return versions.map(version => ({
+    id: `version:${version}`,
+    group: 'versions' as const,
+    label: t('command_palette.version.label', { version }),
+    keywords: [context.packageName, version, t('command_palette.groups.versions')],
+    iconClass: 'i-lucide:tag',
+    active: version === context.resolvedVersion,
+    to: urlPattern?.replace('{version}', version) ?? packageRoute(context.packageName, version),
+  }))
+}
+
+export function useCommandPaletteVersionCommands(
+  context: MaybeRefOrGetter<CommandPalettePackageContext | null>,
+  urlPattern?: MaybeRefOrGetter<string | null | undefined>,
+) {
+  const { t } = useI18n()
+
+  useCommandPaletteContextCommands(
+    computed((): CommandPaletteContextCommandInput[] => {
+      const resolvedContext = toValue(context)
+      if (!resolvedContext?.resolvedVersion) return []
+
+      return createVersionCommands(resolvedContext, t, undefined, toValue(urlPattern))
+    }),
+  )
+
+  useCommandPaletteQueryOverride('versions', query => {
+    const resolvedContext = toValue(context)
+    if (!resolvedContext?.resolvedVersion || !query) return null
+
+    const semverRange = validRange(query)
+    if (!semverRange) return null
+
+    const matchingVersions = getSortedVersions(resolvedContext).filter(version =>
+      satisfies(version, semverRange, { includePrerelease: true }),
+    )
+
+    return createVersionCommands(resolvedContext, t, matchingVersions, toValue(urlPattern))
+  })
+}
diff --git a/app/composables/usePlatformModifierKey.ts b/app/composables/usePlatformModifierKey.ts
new file mode 100644
index 0000000000..d56c2cc590
--- /dev/null
+++ b/app/composables/usePlatformModifierKey.ts
@@ -0,0 +1,30 @@
+function detectApplePlatform() {
+  if (!import.meta.client) return false
+
+  const nav = navigator as Navigator & {
+    userAgentData?: {
+      platform?: string
+    }
+  }
+
+  const platform = nav.userAgentData?.platform ?? nav.platform ?? ''
+  const userAgent = navigator.userAgent ?? ''
+
+  return /Mac|iPhone|iPad|iPod/i.test(platform) || /Mac|iPhone|iPad|iPod/i.test(userAgent)
+}
+
+export function usePlatformModifierKey() {
+  const isApplePlatform = useState('platform:is-apple', detectApplePlatform)
+
+  if (import.meta.client) {
+    onMounted(() => {
+      isApplePlatform.value = detectApplePlatform()
+    })
+  }
+
+  return {
+    isApplePlatform: computed(() => isApplePlatform.value),
+    primaryModifierKeyLabel: computed(() => (isApplePlatform.value ? '⌘' : 'Ctrl')),
+    commandPaletteShortcutLabel: computed(() => (isApplePlatform.value ? '⌘ K' : 'Ctrl+K')),
+  }
+}
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index a79c746c20..c666815a59 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -74,6 +74,12 @@ const DEFAULT_SETTINGS: AppSettings = {
   },
 }
 
+export const DEFAULT_ACCENT_COLOR_ID = DEFAULT_SETTINGS.accentColorId
+export const DEFAULT_BACKGROUND_THEME_ID = DEFAULT_SETTINGS.preferredBackgroundTheme
+export const DEFAULT_ACCENT_COLOR_OPTION_ID: AccentColorId = DEFAULT_ACCENT_COLOR_ID ?? 'neutral'
+export const DEFAULT_BACKGROUND_THEME_OPTION_ID: BackgroundThemeId =
+  DEFAULT_BACKGROUND_THEME_ID ?? 'neutral'
+
 const STORAGE_KEY = 'npmx-settings'
 
 // Shared settings instance (singleton per app)
@@ -159,17 +165,22 @@ export function useAccentColor() {
   })
 
   function setAccentColor(id: AccentColorId | null) {
-    if (id) {
-      document.documentElement.style.setProperty('--accent-color', `var(--swatch-${id})`)
+    const accentColorId = id === 'neutral' ? DEFAULT_ACCENT_COLOR_ID : id
+
+    if (accentColorId) {
+      document.documentElement.style.setProperty('--accent-color', `var(--swatch-${accentColorId})`)
     } else {
       document.documentElement.style.removeProperty('--accent-color')
     }
-    settings.value.accentColorId = id
+    settings.value.accentColorId = accentColorId
   }
 
   return {
     accentColors,
     selectedAccentColor: computed(() => settings.value.accentColorId),
+    selectedAccentColorOptionId: computed(
+      () => settings.value.accentColorId ?? DEFAULT_ACCENT_COLOR_OPTION_ID,
+    ),
     setAccentColor,
   }
 }
@@ -233,6 +244,9 @@ export function useBackgroundTheme() {
   return {
     backgroundThemes,
     selectedBackgroundTheme: computed(() => settings.value.preferredBackgroundTheme),
+    selectedBackgroundThemeOptionId: computed(
+      () => settings.value.preferredBackgroundTheme ?? DEFAULT_BACKGROUND_THEME_OPTION_ID,
+    ),
     setBackgroundTheme,
   }
 }
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index db383e0e03..f71e06bde3 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -2,6 +2,7 @@
 import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
 import { useRouteQuery } from '@vueuse/router'
 import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
 
 definePageMeta({
   name: 'compare',
@@ -78,6 +79,7 @@ const columnLoading = computed(() => packages.value.map((_, i) => isColumnLoadin
 const canCompare = computed(() => packages.value.length >= 2)
 
 const comparisonView = ref<'table' | 'charts'>('table')
+const hasChartableFacets = computed(() => selectedFacets.value.some(facet => facet.chartable))
 
 // Extract headers from columns for facet rows
 const gridHeaders = computed(() =>
@@ -135,6 +137,75 @@ function exportComparisonDataAsMarkdown() {
   copy(markdown)
 }
 
+useCommandPaletteContextCommands(
+  computed((): CommandPaletteContextCommandInput[] => {
+    const commands: CommandPaletteContextCommandInput[] = [
+      {
+        id: 'compare-select-all',
+        group: 'actions',
+        label: $t('compare.facets.select_all'),
+        keywords: [$t('compare.packages.section_facets')],
+        iconClass: 'i-lucide:list-checks',
+        action: () => {
+          selectAll()
+        },
+      },
+      {
+        id: 'compare-deselect-all',
+        group: 'actions',
+        label: $t('compare.facets.deselect_all'),
+        keywords: [$t('compare.packages.section_facets')],
+        iconClass: 'i-lucide:list-x',
+        action: () => {
+          deselectAll()
+        },
+      },
+    ]
+
+    if (packagesData.value && packagesData.value.some(p => p !== null)) {
+      commands.push({
+        id: 'compare-copy-markdown',
+        group: 'actions',
+        label: $t('compare.packages.copy_as_markdown'),
+        keywords: [$t('compare.packages.section_comparison')],
+        iconClass: 'i-lucide:copy',
+        action: () => {
+          exportComparisonDataAsMarkdown()
+        },
+      })
+    }
+
+    if (canCompare.value && hasChartableFacets.value) {
+      commands.push(
+        {
+          id: 'compare-view-table',
+          group: 'actions',
+          label: $t('compare.packages.table_view'),
+          keywords: [$t('compare.packages.section_comparison')],
+          iconClass: 'i-lucide:table',
+          active: comparisonView.value === 'table',
+          action: () => {
+            comparisonView.value = 'table'
+          },
+        },
+        {
+          id: 'compare-view-charts',
+          group: 'actions',
+          label: $t('compare.packages.charts_view'),
+          keywords: [$t('compare.packages.section_comparison')],
+          iconClass: 'i-lucide:chart-bar-decreasing',
+          active: comparisonView.value === 'charts',
+          action: () => {
+            comparisonView.value = 'charts'
+          },
+        },
+      )
+    }
+
+    return commands
+  }),
+)
+
 useSeoMeta({
   title: () =>
     packages.value.length > 0
diff --git a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
index 11b96df102..1bc6ac2c94 100644
--- a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
+++ b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
@@ -28,6 +28,25 @@ const toVersion = computed(() => versionRange.value?.to ?? '')
 
 const router = useRouter()
 const { data: pkg } = usePackage(packageName)
+const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
+  useCommandPalettePackageVersions(packageName)
+
+const commandPalettePackageContext = computed(() => {
+  const packageData = pkg.value
+  if (!packageData) return null
+
+  return {
+    packageName: packageData.name,
+    resolvedVersion: fromVersion.value || packageData['dist-tags']?.latest || null,
+    latestVersion: packageData['dist-tags']?.latest ?? null,
+    versions: commandPaletteVersions.value ?? Object.keys(packageData.versions ?? {}),
+  }
+})
+
+useCommandPalettePackageContext(commandPalettePackageContext, {
+  onOpen: ensureCommandPaletteVersionsLoaded,
+})
+useCommandPalettePackageCommands(commandPalettePackageContext)
 
 const { data: compare, status: compareStatus } = useFetch<CompareResponse>(
   () => `/api/registry/compare/${packageName.value}/v/${fromVersion.value}...${toVersion.value}`,
@@ -109,6 +128,8 @@ const toVersionUrlPattern = computed(() => {
   return normalizeRoutePath(diffRoute(packageName.value, fromVersion.value, '{version}'))
 })
 
+useCommandPaletteVersionCommands(commandPalettePackageContext, fromVersionUrlPattern)
+
 useSeoMeta({
   title: () => {
     if (fromVersion.value && toVersion.value) {
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index 3fbdcfe994..db91182bd9 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
+
 definePageMeta({
   name: 'code',
   path: '/package-code/:org?/:packageName/v/:version/:filePath(.*)?',
@@ -47,6 +49,25 @@ function getCodeUrl(args: {
 
 // Fetch package data for version list
 const { data: pkg } = usePackage(packageName)
+const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
+  useCommandPalettePackageVersions(packageName)
+
+const commandPalettePackageContext = computed(() => {
+  const packageData = pkg.value
+  if (!packageData) return null
+
+  return {
+    packageName: packageData.name,
+    resolvedVersion: version.value ?? packageData['dist-tags']?.latest ?? null,
+    latestVersion: packageData['dist-tags']?.latest ?? null,
+    versions: commandPaletteVersions.value ?? Object.keys(packageData.versions ?? {}),
+  }
+})
+
+useCommandPalettePackageContext(commandPalettePackageContext, {
+  onOpen: ensureCommandPaletteVersionsLoaded,
+})
+useCommandPalettePackageCommands(commandPalettePackageContext)
 
 // URL pattern for version selector - includes file path if present
 const versionUrlPattern = computed(() =>
@@ -58,6 +79,8 @@ const versionUrlPattern = computed(() =>
   }),
 )
 
+useCommandPaletteVersionCommands(commandPalettePackageContext, versionUrlPattern)
+
 // Fetch file tree
 const { data: fileTree, status: treeStatus } = useFetch<PackageFileTreeResponse>(
   () => `/api/registry/files/${packageName.value}/v/${version.value}`,
@@ -310,6 +333,75 @@ defineOgImageComponent('Default', {
   description: () => pkg.value?.license ?? '',
   primaryColor: '#60a5fa',
 })
+
+useCommandPaletteContextCommands(
+  computed((): CommandPaletteContextCommandInput[] => {
+    if (!isViewingFile.value || isBinaryFile.value || !fileContent.value) return []
+
+    const commands: CommandPaletteContextCommandInput[] = [
+      {
+        id: 'code-copy-link',
+        group: 'actions',
+        label: $t('code.copy_link'),
+        keywords: [packageName.value, filePath.value ?? ''],
+        iconClass: 'i-lucide:link',
+        action: () => {
+          copyPermalinkUrl()
+        },
+      },
+      {
+        id: 'code-copy-file',
+        group: 'actions',
+        label: $t('command_palette.code.copy_file'),
+        keywords: [packageName.value, filePath.value ?? '', $t('common.copy')],
+        iconClass: 'i-lucide:file',
+        action: () => {
+          copyFileContent()
+        },
+      },
+    ]
+
+    if (filePath.value) {
+      commands.push({
+        id: 'code-open-raw',
+        group: 'links',
+        label: $t('code.raw'),
+        keywords: [packageName.value, filePath.value],
+        iconClass: 'i-lucide:file-output',
+        href: `https://cdn.jsdelivr.net/npm/${packageName.value}@${version.value}/${filePath.value}`,
+      })
+    }
+
+    if (fileContent.value.markdownHtml) {
+      commands.push(
+        {
+          id: 'code-markdown-preview',
+          group: 'actions',
+          label: $t('code.markdown_view_mode.preview'),
+          keywords: [packageName.value, filePath.value ?? ''],
+          iconClass: 'i-lucide:eye',
+          active: markdownViewMode.value === 'preview',
+          action: () => {
+            markdownViewMode.value = 'preview'
+          },
+        },
+        {
+          id: 'code-markdown-source',
+          group: 'actions',
+          label: $t('code.markdown_view_mode.code'),
+          keywords: [packageName.value, filePath.value ?? ''],
+          iconClass: 'i-lucide:code',
+          active: markdownViewMode.value === 'code',
+          action: () => {
+            markdownViewMode.value = 'code'
+          },
+        },
+      )
+    }
+
+    return commands
+  }),
+)
 </script>
 
 <template>
diff --git a/app/pages/package-docs/[...path].vue b/app/pages/package-docs/[...path].vue
index 37cf258219..31aba3bd52 100644
--- a/app/pages/package-docs/[...path].vue
+++ b/app/pages/package-docs/[...path].vue
@@ -38,6 +38,8 @@ if (import.meta.server && packageName.value) {
 }
 
 const { data: pkg } = usePackage(packageName)
+const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
+  useCommandPalettePackageVersions(packageName)
 
 const latestVersion = computed(() => pkg.value?.['dist-tags']?.latest ?? null)
 
@@ -69,6 +71,23 @@ watch(
 
 const resolvedVersion = computed(() => requestedVersion.value ?? latestVersion.value)
 
+const commandPalettePackageContext = computed(() => {
+  const packageData = pkg.value
+  if (!packageData) return null
+
+  return {
+    packageName: packageData.name,
+    resolvedVersion: resolvedVersion.value ?? packageData['dist-tags']?.latest ?? null,
+    latestVersion: packageData['dist-tags']?.latest ?? null,
+    versions: commandPaletteVersions.value ?? Object.keys(packageData.versions ?? {}),
+  }
+})
+
+useCommandPalettePackageContext(commandPalettePackageContext, {
+  onOpen: ensureCommandPaletteVersionsLoaded,
+})
+useCommandPalettePackageCommands(commandPalettePackageContext)
+
 const docsUrl = computed(() => {
   if (!packageName.value || !resolvedVersion.value) return null
   return `/api/registry/docs/${packageName.value}/v/${resolvedVersion.value}`
@@ -104,6 +123,8 @@ const versionUrlPattern = computed(
   () => `/package-docs/${pkg.value?.name || packageName.value}/v/{version}`,
 )
 
+useCommandPaletteVersionCommands(commandPalettePackageContext, versionUrlPattern)
+
 const pageTitle = computed(() => {
   if (!packageName.value) return t('package.docs.page_title')
   if (!resolvedVersion.value) return t('package.docs.page_title_name', { name: packageName.value })
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 83b0f2b86b..5bf46df982 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -200,6 +200,26 @@ const {
 } = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value)
 
 const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg, installSize)
+const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
+  useCommandPalettePackageVersions(packageName)
+
+const commandPalettePackageContext = computed(() => {
+  const packageData = pkg.value
+  if (!packageData) return null
+
+  return {
+    packageName: packageData.name,
+    resolvedVersion: resolvedVersion.value ?? packageData['dist-tags']?.latest ?? null,
+    latestVersion: packageData['dist-tags']?.latest ?? null,
+    versions: commandPaletteVersions.value ?? Object.keys(packageData.versions ?? {}),
+    tarballUrl: packageData.requestedVersion?.dist.tarball ?? null,
+  }
+})
+
+useCommandPalettePackageContext(commandPalettePackageContext, {
+  onOpen: ensureCommandPaletteVersionsLoaded,
+})
+useCommandPalettePackageCommands(commandPalettePackageContext)
 
 // Detect two hydration scenarios where the external _payload.json is missing:
 //
@@ -460,6 +480,8 @@ const versionUrlPattern = computed(
   () => `/package/${pkg.value?.name || packageName.value}/v/{version}`,
 )
 
+useCommandPaletteVersionCommands(commandPalettePackageContext, versionUrlPattern)
+
 const dependencyCount = computed(() => getDependencyCount(displayVersion.value))
 
 const numberFormatter = useNumberFormatter()
diff --git a/app/pages/profile/[identity]/index.vue b/app/pages/profile/[identity]/index.vue
index fbf4b258cd..f0acf5cec2 100644
--- a/app/pages/profile/[identity]/index.vue
+++ b/app/pages/profile/[identity]/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { updateProfile as updateProfileUtil } from '~/utils/atproto/profile'
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
 
 const route = useRoute('profile-identity')
 const identity = computed(() => route.params.identity)
@@ -94,6 +95,49 @@ const inviteUrl = computed(() => {
   return `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`
 })
 
+useCommandPaletteContextCommands(
+  computed((): CommandPaletteContextCommandInput[] => {
+    const commands: CommandPaletteContextCommandInput[] = []
+
+    if (user.value?.handle === profile.value.handle && !isEditing.value) {
+      commands.push({
+        id: 'profile-edit',
+        group: 'actions',
+        label: $t('common.edit'),
+        keywords: [profile.value.handle ?? identity.value, $t('profile.display_name')],
+        iconClass: 'i-lucide:square-pen',
+        action: () => {
+          isEditing.value = true
+        },
+      })
+    }
+
+    if (profile.value.website) {
+      commands.push({
+        id: 'profile-website',
+        group: 'links',
+        label: $t('profile.website'),
+        keywords: [profile.value.website, profile.value.handle ?? identity.value],
+        iconClass: 'i-lucide:link',
+        href: profile.value.website,
+      })
+    }
+
+    if (showInviteSection.value) {
+      commands.push({
+        id: 'profile-share-invite',
+        group: 'actions',
+        label: $t('profile.invite.share_button'),
+        keywords: [profile.value.handle ?? identity.value, $t('profile.invite.message')],
+        iconClass: 'i-lucide:send',
+        href: inviteUrl.value,
+      })
+    }
+
+    return commands
+  }),
+)
+
 useSeoMeta({
   title: () => $t('profile.seo_title', { handle: identity.value }),
   description: () => $t('profile.seo_description', { handle: identity.value }),
diff --git a/app/types/command-palette.ts b/app/types/command-palette.ts
new file mode 100644
index 0000000000..656cb03356
--- /dev/null
+++ b/app/types/command-palette.ts
@@ -0,0 +1,85 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export type CommandPaletteGroup =
+  | 'actions'
+  | 'help'
+  | 'language'
+  | 'package'
+  | 'navigation'
+  | 'connections'
+  | 'links'
+  | 'settings'
+  | 'npmx'
+  | 'versions'
+
+export type CommandPaletteView = 'root' | 'languages' | 'accent-colors' | 'background-themes'
+
+interface CommandPaletteCommandBase {
+  id: string
+  group: CommandPaletteGroup
+  label: string
+  keywords: string[]
+  iconClass: string
+  badge?: string | null
+  previewColor?: string | null
+  active?: boolean
+  activeLabel?: string | null
+}
+
+export type CommandPaletteActionCommand = CommandPaletteCommandBase & {
+  action: () => void | Promise<void>
+  to?: never
+  href?: never
+}
+
+export type CommandPaletteRouteCommand = CommandPaletteCommandBase & {
+  to: RouteLocationRaw | string
+  action?: never
+  href?: never
+}
+
+export type CommandPaletteHrefCommand = CommandPaletteCommandBase & {
+  href: string
+  action?: never
+  to?: never
+}
+
+export type CommandPaletteLinkCommand = CommandPaletteRouteCommand | CommandPaletteHrefCommand
+
+export type CommandPaletteCommand =
+  | CommandPaletteActionCommand
+  | CommandPaletteRouteCommand
+  | CommandPaletteHrefCommand
+
+export interface CommandPaletteCommandGroup {
+  id: CommandPaletteGroup
+  label: string
+  items: CommandPaletteCommand[]
+}
+
+export type CommandPaletteContextCommand =
+  | (CommandPaletteCommandBase & {
+      actionId: string
+      to?: never
+      href?: never
+    })
+  | (CommandPaletteCommandBase & {
+      actionId: string
+      to: RouteLocationRaw | string
+      href?: never
+    })
+  | (CommandPaletteCommandBase & {
+      actionId: string
+      href: string
+      to?: never
+    })
+
+export type CommandPaletteContextCommandInput = CommandPaletteCommand
+
+export interface CommandPalettePackageContext {
+  packageName: string
+  resolvedVersion: string | null
+  latestVersion: string | null
+  versions: string[]
+  tarballUrl?: string | null
+}
diff --git a/app/utils/package-download.ts b/app/utils/package-download.ts
new file mode 100644
index 0000000000..e3c5d34cb6
--- /dev/null
+++ b/app/utils/package-download.ts
@@ -0,0 +1,42 @@
+interface DownloadablePackageVersion {
+  version: string
+  dist: {
+    tarball?: string | null
+  }
+}
+
+async function getDownloadUrl(tarballUrl: string) {
+  try {
+    const response = await fetch(tarballUrl)
+    if (!response.ok) {
+      throw new Error(`Failed to fetch tarball (${response.status})`)
+    }
+    const blob = await response.blob()
+    return URL.createObjectURL(blob)
+  } catch (error) {
+    // oxlint-disable-next-line no-console -- error logging
+    console.error('failed to fetch tarball', { cause: error })
+    return null
+  }
+}
+
+export async function downloadPackageTarball(
+  packageName: string,
+  version: DownloadablePackageVersion,
+) {
+  const tarballUrl = version.dist.tarball
+  if (!tarballUrl) return
+
+  const downloadUrl = await getDownloadUrl(tarballUrl)
+
+  const link = document.createElement('a')
+  link.href = downloadUrl ?? tarballUrl
+  link.download = `${packageName.replace(/\//g, '__')}-${version.version}.tgz`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+
+  if (downloadUrl) {
+    URL.revokeObjectURL(downloadUrl)
+  }
+}
diff --git a/docs/content/2.guide/1.features.md b/docs/content/2.guide/1.features.md
index d15505da57..8e58bff53a 100644
--- a/docs/content/2.guide/1.features.md
+++ b/docs/content/2.guide/1.features.md
@@ -9,6 +9,10 @@ npmx.dev provides a comprehensive set of features for browsing npm packages.
 
 ## Browse packages
 
+### Command palette
+
+Open the command palette with `⌘K` on macOS, or `Ctrl+K` on Windows and Linux, to jump between major pages, switch settings, and open package-specific views without reaching for the mouse.
+
 ### View package details
 
 Each package page displays:
diff --git a/docs/content/2.guide/2.keyboard-shortcuts.md b/docs/content/2.guide/2.keyboard-shortcuts.md
index da0df3c6fe..f0268a2880 100644
--- a/docs/content/2.guide/2.keyboard-shortcuts.md
+++ b/docs/content/2.guide/2.keyboard-shortcuts.md
@@ -7,14 +7,28 @@ navigation:
 
 npmx.dev supports keyboard navigation for faster browsing.
 
+## Command palette
+
+Press `⌘K` on macOS, or `Ctrl+K` on Windows and Linux, to open the command palette from anywhere in the app.
+
+The command palette lets you:
+
+- Jump between major pages like home, compare, settings, and docs
+- Open package-specific surfaces like the main page, docs, code, and diff views
+- Switch settings such as language, accent color, and background theme
+- Open external resources like docs, chat, source, and package links
+
+You can also open it from the `jump to...` button in the app header or from the mobile menu if you prefer a visible entry point.
+
 ## Global shortcuts
 
-| Key | Action                   |
-| --- | ------------------------ |
-| `/` | Focus search bar         |
-| `?` | Highlight keyboard hints |
-| `,` | Open settings            |
-| `c` | Open compare             |
+| Key                                    | Action                   |
+| -------------------------------------- | ------------------------ |
+| macOS: `⌘K`<br>Windows/Linux: `Ctrl+K` | Open command palette     |
+| `/`                                    | Focus search bar         |
+| `?`                                    | Highlight keyboard hints |
+| `,`                                    | Open settings            |
+| `c`                                    | Open compare             |
 
 ::tip
 These shortcuts work anywhere on the site. Press `/` from any page to quickly search for a package.
@@ -31,6 +45,8 @@ These shortcuts work anywhere on the site. Press `/` from any page to quickly se
 
 | Key | Action           |
 | --- | ---------------- |
+| `m` | Open main page   |
 | `.` | Open code viewer |
 | `d` | Open docs        |
+| `f` | Open diff view   |
 | `c` | Compare package  |
diff --git a/docs/content/index.md b/docs/content/index.md
index 1367a8cc22..e7c8e3ab14 100644
--- a/docs/content/index.md
+++ b/docs/content/index.md
@@ -39,7 +39,7 @@ links:
 :::u-page-feature{icon="i-lucide:link" to="/guide/url-structure" title="Use familiar URLs" description="Replace npmjs.com with npmx.dev in any URL and it just works."}
 :::
 
-:::u-page-feature{icon="i-lucide:keyboard" to="/guide/keyboard-shortcuts" title="Navigate with keyboard" description="Press / to search, . for code viewer, arrow keys to navigate results."}
+:::u-page-feature{icon="i-lucide:keyboard" to="/guide/keyboard-shortcuts" title="Navigate with keyboard" description="Open the command palette with ⌘K on macOS or Ctrl+K on Windows and Linux, press / to search, and use arrow keys to move fast."}
 :::
 
 :::u-page-feature{icon="i-lucide:shield-check" to="/guide/features" title="Check security" description="Vulnerability warnings from OSV database and provenance indicators for verified builds."}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 02c1af000f..da5beea006 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -27,6 +27,9 @@
       "search": "Search",
       "package": "Package"
     },
+    "ctrl_key": "Ctrl",
+    "command_palette": "Open command palette",
+    "command_palette_description": "Use the command palette to jump between pages, package views, settings, and external links without leaving the keyboard. On macOS, press ⌘K. On Windows and Linux, press {ctrlKey}+K.",
     "focus_search": "Focus search",
     "show_kbd_hints": "Highlight keyboard hints",
     "settings": "Open settings",
@@ -75,6 +78,105 @@
     "instant_search_turn_off": "turn off",
     "instant_search_advisory": "{label} {state} — {action}"
   },
+  "command_palette": {
+    "title": "command palette",
+    "quick_actions": "jump to...",
+    "subtitle": "navigate across npmx and switch settings quickly",
+    "subtitle_languages": "choose a language or help improve translations",
+    "instructions": "Type to filter commands. Use the arrow keys to move through results and Enter to run a command.",
+    "input_label": "Command palette search",
+    "results_label": "Command results",
+    "placeholder": "type a command...",
+    "back": "Back",
+    "empty": "No matching commands",
+    "empty_search_hint": "Press Enter to search for \"{query}\".",
+    "current": "current",
+    "here": "you are here",
+    "connected": "connected",
+    "state": {
+      "on": "on",
+      "off": "off"
+    },
+    "groups": {
+      "actions": "Actions",
+      "help": "Help",
+      "language": "Language",
+      "connections": "Connections",
+      "navigation": "Navigation",
+      "links": "Links",
+      "npmx": "npmx",
+      "package": "Package",
+      "package_with_name": "Package ({name})",
+      "versions": "Versions",
+      "versions_with_name": "Versions of {name}"
+    },
+    "actions": {
+      "search": "Search",
+      "search_for": "Search for \"{query}\"",
+      "keyboard_shortcuts": "Keyboard shortcuts",
+      "help_translate": "Help translate"
+    },
+    "connections": {
+      "npm_connect": "Connect to npm CLI",
+      "npm_connected": "npm CLI (~{username})",
+      "npm_disconnect": "Disconnect npm CLI",
+      "atmosphere_connect": "Connect to Atmosphere",
+      "atmosphere_connected": "atmosphere ({'@'}{handle})",
+      "atmosphere_disconnect": "Disconnect Atmosphere"
+    },
+    "navigation": {
+      "home": "home",
+      "packages": "packages (~{username})",
+      "orgs": "orgs (~{username})",
+      "profile": "profile ({'@'}{handle})"
+    },
+    "links": {
+      "external": "External link"
+    },
+    "package_links": {
+      "stars": "Repository stars",
+      "forks": "Repository forks"
+    },
+    "theme": {
+      "system": "Use system theme",
+      "light": "Use light theme",
+      "dark": "Use dark theme"
+    },
+    "package": {
+      "main": "Package page",
+      "docs": "Docs",
+      "code": "Code",
+      "diff": "Diff",
+      "compare": "Compare this package",
+      "download": "Download tarball"
+    },
+    "package_actions": {
+      "copy_run": "Copy run command"
+    },
+    "code": {
+      "copy_file": "Copy file contents"
+    },
+    "diff": {
+      "merge_modified_lines": "Merge modified lines",
+      "word_wrap": "Word wrap"
+    },
+    "version": {
+      "label": "{version}"
+    },
+    "status": {
+      "available_in_context": "{context}. No commands available | {context}. 1 command available | {context}. {count} commands available",
+      "matching_in_context": "{context}. No matching commands | {context}. 1 matching command | {context}. {count} matching commands",
+      "no_matches_search_in_context": "{context}. No matching commands. Press Enter to search for \"{query}\"."
+    },
+    "announcements": {
+      "language_changed": "Language set to {language}.",
+      "relative_dates_on": "Relative dates on.",
+      "relative_dates_off": "Relative dates off.",
+      "theme_changed": "Theme set to {theme}.",
+      "accent_color_changed": "Accent color set to {color}.",
+      "background_theme_changed": "Background shade set to {theme}."
+    }
+  },
   "nav": {
     "main_navigation": "Main",
     "popular_packages": "Popular packages",
@@ -150,6 +252,7 @@
     "translation_status": "Check global translation status",
     "accent_colors": {
       "label": "Accent colors",
+      "neutral": "Neutral",
       "sky": "Sky",
       "coral": "Coral",
       "amber": "Amber",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 767146115b..807b027886 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -27,6 +27,9 @@
       "search": "Recherche",
       "package": "Paquet"
     },
+    "ctrl_key": "Ctrl",
+    "command_palette": "Ouvrir la palette de commandes",
+    "command_palette_description": "Utilisez la palette de commandes pour passer entre les pages, les vues de paquet, les paramètres et les liens externes sans quitter le clavier. Sur macOS, appuyez sur ⌘K. Sous Windows et Linux, appuyez sur {ctrlKey}+K.",
     "focus_search": "Aller à la recherche",
     "show_kbd_hints": "Afficher les raccourcis clavier",
     "settings": "Ouvrir les paramètres",
@@ -36,7 +39,9 @@
     "go_to_result": "Ouvrir le résultat",
     "open_code_view": "Ouvrir la vue code",
     "open_docs": "Ouvrir la doc",
-    "disable_shortcuts": "Vous pouvez désactiver les raccourcis clavier dans {settings}."
+    "disable_shortcuts": "Vous pouvez désactiver les raccourcis clavier dans {settings}.",
+    "open_main": "Ouvrir la page principale",
+    "open_diff": "Ouvrir les différences de version"
   },
   "search": {
     "label": "Rechercher des paquets npm",
@@ -73,6 +78,105 @@
     "instant_search_turn_off": "désactiver",
     "instant_search_advisory": "{label} {state} — {action}"
   },
+  "command_palette": {
+    "title": "palette de commandes",
+    "quick_actions": "aller à...",
+    "subtitle": "naviguez dans npmx et changez rapidement les paramètres",
+    "subtitle_languages": "choisissez une langue ou aidez à améliorer les traductions",
+    "instructions": "Tapez pour filtrer les commandes. Utilisez les flèches pour parcourir les résultats et Entrée pour lancer une commande.",
+    "input_label": "Recherche dans la palette de commandes",
+    "results_label": "Résultats de la palette de commandes",
+    "placeholder": "tapez une commande...",
+    "back": "Retour",
+    "empty": "Aucune commande correspondante",
+    "empty_search_hint": "Appuyez sur Entrée pour rechercher « {query} ».",
+    "current": "actuel",
+    "here": "vous êtes ici",
+    "connected": "connecté",
+    "state": {
+      "on": "activé",
+      "off": "désactivé"
+    },
+    "groups": {
+      "actions": "Actions",
+      "help": "Aide",
+      "language": "Langue",
+      "connections": "Connexions",
+      "navigation": "Navigation",
+      "links": "Liens",
+      "npmx": "npmx",
+      "package": "Paquet",
+      "package_with_name": "Paquet ({name})",
+      "versions": "Versions",
+      "versions_with_name": "Versions de {name}"
+    },
+    "actions": {
+      "search": "Recherche",
+      "search_for": "Rechercher « {query} »",
+      "keyboard_shortcuts": "Raccourcis clavier",
+      "help_translate": "Aider à traduire"
+    },
+    "connections": {
+      "npm_connect": "Se connecter avec npm CLI",
+      "npm_connected": "CLI npm (~{username})",
+      "npm_disconnect": "Se déconnecter de npm CLI",
+      "atmosphere_connect": "Se connecter à Atmosphere",
+      "atmosphere_connected": "atmosphere ({'@'}{handle})",
+      "atmosphere_disconnect": "Se déconnecter d’Atmosphere"
+    },
+    "navigation": {
+      "home": "accueil",
+      "packages": "paquets (~{username})",
+      "orgs": "organisations (~{username})",
+      "profile": "profil ({'@'}{handle})"
+    },
+    "links": {
+      "external": "Lien externe"
+    },
+    "package_links": {
+      "stars": "Étoiles du dépôt",
+      "forks": "Forks du dépôt"
+    },
+    "theme": {
+      "system": "Utiliser le thème du système",
+      "light": "Utiliser le thème clair",
+      "dark": "Utiliser le thème sombre"
+    },
+    "package": {
+      "main": "Page du paquet",
+      "docs": "Doc",
+      "code": "Code",
+      "diff": "Diff",
+      "compare": "Comparer ce paquet",
+      "download": "Télécharger le tarball"
+    },
+    "package_actions": {
+      "copy_run": "Copier la commande d'exécution"
+    },
+    "code": {
+      "copy_file": "Copier le contenu du fichier"
+    },
+    "diff": {
+      "merge_modified_lines": "Fusionner les lignes modifiées",
+      "word_wrap": "Retour automatique à la ligne"
+    },
+    "version": {
+      "label": "{version}"
+    },
+    "status": {
+      "available_in_context": "{context}. Aucune commande disponible | {context}. 1 commande disponible | {context}. {count} commandes disponibles",
+      "matching_in_context": "{context}. Aucune commande correspondante | {context}. 1 commande correspondante | {context}. {count} commandes correspondantes",
+      "no_matches_search_in_context": "{context}. Aucune commande correspondante. Appuyez sur Entrée pour rechercher « {query} »."
+    },
+    "announcements": {
+      "language_changed": "Langue {language}.",
+      "relative_dates_on": "Dates relatives activées.",
+      "relative_dates_off": "Dates relatives désactivées.",
+      "theme_changed": "Thème {theme}.",
+      "accent_color_changed": "Couleur d’accentuation {color}.",
+      "background_theme_changed": "Couleur d’arrière-plan {theme}."
+    }
+  },
   "nav": {
     "main_navigation": "Barre de navigation",
     "popular_packages": "Paquets populaires",
@@ -143,7 +247,8 @@
     "language": "Langue de l'interface",
     "help_translate": "Aidez-nous à traduire npmx",
     "accent_colors": {
-      "label": "Couleurs d'accentuation",
+      "label": "Couleurs d’accentuation",
+      "neutral": "Neutre",
       "sky": "Ciel",
       "coral": "Corail",
       "amber": "Ambre",
diff --git a/i18n/schema.json b/i18n/schema.json
index 885bd6eb5e..6b5acdb79a 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -85,6 +85,15 @@
           },
           "additionalProperties": false
         },
+        "ctrl_key": {
+          "type": "string"
+        },
+        "command_palette": {
+          "type": "string"
+        },
+        "command_palette_description": {
+          "type": "string"
+        },
         "focus_search": {
           "type": "string"
         },
@@ -229,6 +238,303 @@
       },
       "additionalProperties": false
     },
+    "command_palette": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string"
+        },
+        "quick_actions": {
+          "type": "string"
+        },
+        "subtitle": {
+          "type": "string"
+        },
+        "subtitle_languages": {
+          "type": "string"
+        },
+        "instructions": {
+          "type": "string"
+        },
+        "input_label": {
+          "type": "string"
+        },
+        "results_label": {
+          "type": "string"
+        },
+        "placeholder": {
+          "type": "string"
+        },
+        "back": {
+          "type": "string"
+        },
+        "empty": {
+          "type": "string"
+        },
+        "empty_search_hint": {
+          "type": "string"
+        },
+        "current": {
+          "type": "string"
+        },
+        "here": {
+          "type": "string"
+        },
+        "connected": {
+          "type": "string"
+        },
+        "state": {
+          "type": "object",
+          "properties": {
+            "on": {
+              "type": "string"
+            },
+            "off": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "groups": {
+          "type": "object",
+          "properties": {
+            "actions": {
+              "type": "string"
+            },
+            "help": {
+              "type": "string"
+            },
+            "language": {
+              "type": "string"
+            },
+            "connections": {
+              "type": "string"
+            },
+            "navigation": {
+              "type": "string"
+            },
+            "links": {
+              "type": "string"
+            },
+            "npmx": {
+              "type": "string"
+            },
+            "package": {
+              "type": "string"
+            },
+            "package_with_name": {
+              "type": "string"
+            },
+            "versions": {
+              "type": "string"
+            },
+            "versions_with_name": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "actions": {
+          "type": "object",
+          "properties": {
+            "search": {
+              "type": "string"
+            },
+            "search_for": {
+              "type": "string"
+            },
+            "keyboard_shortcuts": {
+              "type": "string"
+            },
+            "help_translate": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "connections": {
+          "type": "object",
+          "properties": {
+            "npm_connect": {
+              "type": "string"
+            },
+            "npm_connected": {
+              "type": "string"
+            },
+            "npm_disconnect": {
+              "type": "string"
+            },
+            "atmosphere_connect": {
+              "type": "string"
+            },
+            "atmosphere_connected": {
+              "type": "string"
+            },
+            "atmosphere_disconnect": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "navigation": {
+          "type": "object",
+          "properties": {
+            "home": {
+              "type": "string"
+            },
+            "packages": {
+              "type": "string"
+            },
+            "orgs": {
+              "type": "string"
+            },
+            "profile": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "links": {
+          "type": "object",
+          "properties": {
+            "external": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "package_links": {
+          "type": "object",
+          "properties": {
+            "stars": {
+              "type": "string"
+            },
+            "forks": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "theme": {
+          "type": "object",
+          "properties": {
+            "system": {
+              "type": "string"
+            },
+            "light": {
+              "type": "string"
+            },
+            "dark": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "package": {
+          "type": "object",
+          "properties": {
+            "main": {
+              "type": "string"
+            },
+            "docs": {
+              "type": "string"
+            },
+            "code": {
+              "type": "string"
+            },
+            "diff": {
+              "type": "string"
+            },
+            "compare": {
+              "type": "string"
+            },
+            "download": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "package_actions": {
+          "type": "object",
+          "properties": {
+            "copy_run": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "code": {
+          "type": "object",
+          "properties": {
+            "copy_file": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "diff": {
+          "type": "object",
+          "properties": {
+            "merge_modified_lines": {
+              "type": "string"
+            },
+            "word_wrap": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "version": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "status": {
+          "type": "object",
+          "properties": {
+            "available_in_context": {
+              "type": "string"
+            },
+            "matching_in_context": {
+              "type": "string"
+            },
+            "no_matches_search_in_context": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "announcements": {
+          "type": "object",
+          "properties": {
+            "language_changed": {
+              "type": "string"
+            },
+            "relative_dates_on": {
+              "type": "string"
+            },
+            "relative_dates_off": {
+              "type": "string"
+            },
+            "theme_changed": {
+              "type": "string"
+            },
+            "accent_color_changed": {
+              "type": "string"
+            },
+            "background_theme_changed": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
+    },
     "nav": {
       "type": "object",
       "properties": {
@@ -454,6 +760,9 @@
             "label": {
               "type": "string"
             },
+            "neutral": {
+              "type": "string"
+            },
             "sky": {
               "type": "string"
             },
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index d5827c61ee..076c968207 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -238,6 +238,7 @@ import {
 // Server variant components must be imported directly to test the server-side render
 // The #components import automatically provides the client variant
 import LogoNuxt from '~/assets/logos/oss-partners/nuxt.svg'
+import CommandPaletteComponent from '~/components/CommandPalette.client.vue'
 import HeaderAccountMenuServer from '~/components/Header/AccountMenu.server.vue'
 import ToggleServer from '~/components/Settings/Toggle.server.vue'
 import SearchProviderToggleServer from '~/components/SearchProviderToggle.server.vue'
@@ -475,6 +476,43 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('CommandPalette', () => {
+    let commandPalette: ReturnType<typeof useCommandPalette> | null = null
+
+    const CommandPaletteHarness = defineComponent({
+      name: 'CommandPaletteHarness',
+      setup() {
+        commandPalette = useCommandPalette()
+
+        onMounted(() => {
+          commandPalette?.open()
+        })
+
+        onBeforeUnmount(() => {
+          commandPalette?.close()
+          commandPalette?.clearPackageContext()
+        })
+
+        return () => h('div', [h(CommandPaletteComponent)])
+      },
+    })
+
+    afterEach(() => {
+      commandPalette?.close()
+      commandPalette?.clearPackageContext()
+      commandPalette = null
+    })
+
+    it('should have no accessibility violations when open', async () => {
+      const component = await mountSuspended(CommandPaletteHarness)
+      await nextTick()
+      await nextTick()
+
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('TagStatic', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TagStatic, {
diff --git a/test/nuxt/app/utils/package-download.spec.ts b/test/nuxt/app/utils/package-download.spec.ts
new file mode 100644
index 0000000000..f90086f431
--- /dev/null
+++ b/test/nuxt/app/utils/package-download.spec.ts
@@ -0,0 +1,131 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { downloadPackageTarball } from '~/utils/package-download'
+
+describe('downloadPackageTarball', () => {
+  let originalCreateObjectURL!: typeof URL.createObjectURL
+  let originalRevokeObjectURL!: typeof URL.revokeObjectURL
+
+  let clickSpy: ReturnType<typeof vi.spyOn>
+  let appendSpy: ReturnType<typeof vi.spyOn>
+  let removeSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    originalCreateObjectURL = URL.createObjectURL
+    originalRevokeObjectURL = URL.revokeObjectURL
+    clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    appendSpy = vi.spyOn(document.body, 'appendChild')
+    removeSpy = vi.spyOn(document.body, 'removeChild')
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      writable: true,
+      value: originalCreateObjectURL,
+    })
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      writable: true,
+      value: originalRevokeObjectURL,
+    })
+  })
+
+  it('downloads fetched tarballs through an object URL and revokes it afterwards', async () => {
+    const blob = new Blob(['package'])
+    const createObjectURL = vi.fn(() => 'blob:download')
+    const revokeObjectURL = vi.fn()
+
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => ({
+        ok: true,
+        blob: async () => blob,
+      })),
+    )
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      writable: true,
+      value: createObjectURL,
+    })
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      writable: true,
+      value: revokeObjectURL,
+    })
+
+    await downloadPackageTarball('@scope/pkg', {
+      version: '1.2.3',
+      dist: {
+        tarball: 'https://registry.npmjs.org/@scope/pkg/-/pkg-1.2.3.tgz',
+      },
+    })
+
+    const anchor = appendSpy.mock.calls[0]?.[0]
+
+    expect(fetch).toHaveBeenCalledWith('https://registry.npmjs.org/@scope/pkg/-/pkg-1.2.3.tgz')
+    expect(createObjectURL).toHaveBeenCalledWith(blob)
+    expect(anchor).toBeInstanceOf(HTMLAnchorElement)
+    expect((anchor as HTMLAnchorElement).href).toBe('blob:download')
+    expect((anchor as HTMLAnchorElement).download).toBe('@scope__pkg-1.2.3.tgz')
+    expect(removeSpy).toHaveBeenCalledWith(anchor)
+    expect(clickSpy).toHaveBeenCalledTimes(1)
+    expect(document.body.contains(anchor as Node)).toBe(false)
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:download')
+  })
+
+  it('falls back to the remote tarball URL when fetching fails', async () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => {
+        throw new Error('network down')
+      }),
+    )
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      writable: true,
+      value: vi.fn(),
+    })
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      writable: true,
+      value: vi.fn(),
+    })
+
+    await downloadPackageTarball('vue', {
+      version: '3.5.0',
+      dist: {
+        tarball: 'https://registry.npmjs.org/vue/-/vue-3.5.0.tgz',
+      },
+    })
+
+    const anchor = appendSpy.mock.calls[0]?.[0]
+
+    expect(anchor).toBeInstanceOf(HTMLAnchorElement)
+    expect((anchor as HTMLAnchorElement).href).toBe(
+      'https://registry.npmjs.org/vue/-/vue-3.5.0.tgz',
+    )
+    expect(removeSpy).toHaveBeenCalledWith(anchor)
+    expect(clickSpy).toHaveBeenCalledTimes(1)
+    expect(URL.createObjectURL).not.toHaveBeenCalled()
+    expect(URL.revokeObjectURL).not.toHaveBeenCalled()
+    expect(consoleError).toHaveBeenCalled()
+  })
+
+  it('returns early when the version has no tarball URL', async () => {
+    vi.stubGlobal('fetch', vi.fn())
+
+    await downloadPackageTarball('vue', {
+      version: '3.5.0',
+      dist: {},
+    })
+
+    expect(fetch).not.toHaveBeenCalled()
+    expect(appendSpy).not.toHaveBeenCalled()
+    expect(removeSpy).not.toHaveBeenCalled()
+    expect(clickSpy).not.toHaveBeenCalled()
+  })
+})
diff --git a/test/nuxt/components/CommandPalette.spec.ts b/test/nuxt/components/CommandPalette.spec.ts
new file mode 100644
index 0000000000..acb732a155
--- /dev/null
+++ b/test/nuxt/components/CommandPalette.spec.ts
@@ -0,0 +1,296 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { CommandPalette } from '#components'
+
+let commandPalette: ReturnType<typeof useCommandPalette> | null = null
+let currentWrapper: Awaited<ReturnType<typeof mountSuspended>> | null = null
+let mountTarget: HTMLDivElement | null = null
+
+const CommandPaletteHarness = defineComponent({
+  name: 'CommandPaletteHarness',
+  props: {
+    autoOpen: {
+      type: Boolean,
+      default: true,
+    },
+    includeTrigger: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    commandPalette = useCommandPalette()
+
+    onMounted(() => {
+      if (props.autoOpen) {
+        commandPalette?.open()
+      }
+    })
+
+    onBeforeUnmount(() => {
+      commandPalette?.close()
+      commandPalette?.clearPackageContext()
+    })
+
+    return () =>
+      h('div', [
+        props.includeTrigger
+          ? h('button', { id: 'palette-trigger', type: 'button' }, 'Open')
+          : null,
+        h(CommandPalette),
+      ])
+  },
+})
+
+async function flushPalette() {
+  await nextTick()
+  await nextTick()
+}
+
+async function mountPalette(options?: { autoOpen?: boolean; includeTrigger?: boolean }) {
+  mountTarget = document.createElement('div')
+  document.body.appendChild(mountTarget)
+
+  currentWrapper = await mountSuspended(CommandPaletteHarness, {
+    attachTo: mountTarget,
+    props: {
+      autoOpen: options?.autoOpen ?? true,
+      includeTrigger: options?.includeTrigger ?? false,
+    },
+  })
+
+  await flushPalette()
+
+  return currentWrapper
+}
+
+afterEach(() => {
+  currentWrapper?.unmount()
+  currentWrapper = null
+  mountTarget?.remove()
+  mountTarget = null
+  if (commandPalette) {
+    commandPalette.announcement.value = ''
+  }
+  commandPalette?.close()
+  commandPalette?.clearPackageContext()
+  useSettings().settings.value.keyboardShortcuts = true
+  commandPalette = null
+})
+
+describe('CommandPalette', () => {
+  it('connects the input to an existing description, live status, and results region', async () => {
+    await mountPalette()
+
+    const input = document.getElementById('command-palette-modal-input')
+    const description = document.getElementById('command-palette-modal-description')
+    const status = document.getElementById('command-palette-modal-status')
+    const results = document.getElementById('command-palette-modal-results')
+
+    expect(input).not.toBeNull()
+    expect(description?.textContent).toBeTruthy()
+    expect(status?.getAttribute('role')).toBe('status')
+    expect(status?.getAttribute('aria-live')).toBe('polite')
+    expect(results?.getAttribute('role')).toBe('region')
+
+    expect(input?.getAttribute('aria-describedby')).toContain('command-palette-modal-description')
+    expect(input?.getAttribute('aria-describedby')).toContain('command-palette-modal-status')
+    expect(input?.getAttribute('aria-controls')).toBe('command-palette-modal-results')
+  })
+
+  it('updates the live region when the query changes', async () => {
+    await mountPalette()
+
+    const status = document.getElementById('command-palette-modal-status')
+    expect(status).not.toBeNull()
+    const initialStatus = status?.textContent
+
+    commandPalette!.query.value = 'dark'
+    await nextTick()
+
+    expect(status?.textContent).not.toBe(initialStatus)
+  })
+
+  it('announces the active subview in the live status region', async () => {
+    await mountPalette()
+
+    const status = document.getElementById('command-palette-modal-status')
+    expect(status?.textContent).toContain('command palette')
+
+    commandPalette!.setView('languages')
+    await flushPalette()
+    expect(status?.textContent).toMatch(/Language|choose a language/i)
+
+    commandPalette!.setView('accent-colors')
+    await flushPalette()
+    expect(status?.textContent).toContain('Accent colors')
+  })
+
+  it('updates the input placeholder for palette subviews', async () => {
+    await mountPalette()
+
+    const input = document.getElementById('command-palette-modal-input')
+    expect(input?.getAttribute('placeholder')).toBe('type a command...')
+
+    commandPalette!.setView('languages')
+    await nextTick()
+    expect(input?.getAttribute('placeholder')).toBe('Language')
+
+    commandPalette!.setView('accent-colors')
+    await nextTick()
+    expect(input?.getAttribute('placeholder')).toBe('Accent colors')
+
+    commandPalette!.setView('background-themes')
+    await nextTick()
+    expect(input?.getAttribute('placeholder')).toBe('Background shade')
+  })
+
+  it('renders navigation and external commands as links', async () => {
+    await mountPalette()
+
+    const settingsLink = document.querySelector('a[data-command-item="true"][href$="/settings"]')
+    const chatLink = document.querySelector(
+      'a[data-command-item="true"][href="https://chat.npmx.dev"]',
+    )
+
+    expect(settingsLink?.tagName).toBe('A')
+    expect(chatLink?.tagName).toBe('A')
+    expect(chatLink?.getAttribute('target')).toBe('_blank')
+  })
+
+  it('renders color previews for the current accent color and background shade on the root view', async () => {
+    await mountPalette()
+
+    const accentPreview = document.querySelector(
+      '[data-command-id="accent-colors"] [data-command-preview="true"]',
+    )
+    const backgroundPreview = document.querySelector(
+      '[data-command-id="background-themes"] [data-command-preview="true"]',
+    )
+
+    expect(accentPreview).not.toBeNull()
+    expect(backgroundPreview).not.toBeNull()
+  })
+
+  it('announces setting changes after the palette closes', async () => {
+    await mountPalette()
+
+    const relativeDatesCommand = document.querySelector<HTMLElement>(
+      '[data-command-id="relative-dates"]',
+    )
+    const announcer = document.getElementById('command-palette-modal-announcement')
+
+    relativeDatesCommand?.click()
+    await flushPalette()
+
+    expect(commandPalette?.isOpen.value).toBe(false)
+    expect(announcer?.textContent).toBe('Relative dates on.')
+  })
+
+  it('toggles with the global keyboard shortcut only when shortcuts are enabled', async () => {
+    const { settings } = useSettings()
+    await mountPalette({ autoOpen: false })
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ctrlKey: true, key: 'k' }))
+    await flushPalette()
+
+    expect(commandPalette?.isOpen.value).toBe(true)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ctrlKey: true, key: 'k' }))
+    await flushPalette()
+
+    expect(commandPalette?.isOpen.value).toBe(false)
+
+    settings.value.keyboardShortcuts = false
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ctrlKey: true, key: 'k' }))
+    await flushPalette()
+
+    expect(commandPalette?.isOpen.value).toBe(false)
+  })
+
+  it('moves focus through commands with the arrow keys', async () => {
+    await mountPalette()
+
+    const input = document.getElementById('command-palette-modal-input')
+    const commands = Array.from(
+      document.querySelectorAll<HTMLElement>('[data-command-item="true"]'),
+    )
+
+    expect(document.activeElement).toBe(input)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'ArrowDown' }))
+    await nextTick()
+    expect(document.activeElement).toBe(commands[0])
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'ArrowDown' }))
+    await nextTick()
+    expect(document.activeElement).toBe(commands[1])
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'ArrowUp' }))
+    await nextTick()
+    expect(document.activeElement).toBe(commands[0])
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'ArrowUp' }))
+    await nextTick()
+    expect(document.activeElement).toBe(input)
+  })
+
+  it('returns to the root view with ArrowLeft only when the input is empty', async () => {
+    await mountPalette()
+
+    const input = document.getElementById('command-palette-modal-input') as HTMLInputElement | null
+
+    commandPalette!.setView('languages')
+    await flushPalette()
+    input?.focus()
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'ArrowLeft' }))
+    await flushPalette()
+    expect(input?.getAttribute('placeholder')).toBe('type a command...')
+
+    commandPalette!.setView('languages')
+    commandPalette!.query.value = 'fr'
+    await flushPalette()
+    input?.focus()
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'ArrowLeft' }))
+    await flushPalette()
+    expect(input?.getAttribute('placeholder')).toBe('Language')
+  })
+
+  it('matches commands by their group label', async () => {
+    await mountPalette()
+
+    commandPalette!.query.value = 'Settings'
+    await flushPalette()
+
+    const commands = Array.from(
+      document.querySelectorAll<HTMLElement>('[data-command-item="true"]'),
+    )
+    const commandIds = commands.map(el => el.getAttribute('data-command-id'))
+
+    expect(commandIds).toContain('relative-dates')
+    expect(commandIds).toContain('accent-colors')
+    expect(commandIds).toContain('background-themes')
+  })
+
+  it('closes on route changes and restores focus to the previous element', async () => {
+    await mountPalette({ autoOpen: false, includeTrigger: true })
+
+    const trigger = document.getElementById('palette-trigger') as HTMLButtonElement | null
+    trigger?.focus()
+
+    commandPalette!.open()
+    await flushPalette()
+
+    expect(commandPalette?.isOpen.value).toBe(true)
+
+    await navigateTo('/settings')
+    await vi.waitFor(() => {
+      expect(commandPalette?.isOpen.value).toBe(false)
+    })
+    await flushPalette()
+
+    expect(document.activeElement).toBe(trigger)
+  })
+})
diff --git a/test/nuxt/composables/use-command-palette-commands.spec.ts b/test/nuxt/composables/use-command-palette-commands.spec.ts
new file mode 100644
index 0000000000..98dfe99d2a
--- /dev/null
+++ b/test/nuxt/composables/use-command-palette-commands.spec.ts
@@ -0,0 +1,500 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { computed, defineComponent, h, ref, watchEffect, type Ref } from 'vue'
+import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
+import { downloadPackageTarball } from '~/utils/package-download'
+import type {
+  CommandPaletteCommand,
+  CommandPaletteCommandGroup,
+  CommandPaletteContextCommandInput,
+  CommandPalettePackageContext,
+  CommandPaletteView,
+} from '~/types/command-palette'
+
+vi.mock('~/utils/package-download', () => ({
+  downloadPackageTarball: vi.fn(),
+}))
+
+const mockConnectorState = ref<{
+  connected: boolean
+  npmUser: string | null
+}>({
+  connected: false,
+  npmUser: null,
+})
+
+const mockAtprotoHandle = ref<string | null>(null)
+const mockDisconnectNpm = vi.fn()
+const mockLogout = vi.fn(async () => {})
+
+mockNuxtImport('useConnector', () => {
+  return () => ({
+    isConnected: computed(() => mockConnectorState.value.connected),
+    npmUser: computed(() => mockConnectorState.value.npmUser),
+    disconnect: mockDisconnectNpm,
+  })
+})
+
+mockNuxtImport('useAtproto', () => {
+  return () => ({
+    user: computed(() => (mockAtprotoHandle.value ? { handle: mockAtprotoHandle.value } : null)),
+    logout: mockLogout,
+  })
+})
+
+async function captureCommandPalette(options?: {
+  route?: string
+  query?: string
+  colorMode?: 'system' | 'light' | 'dark'
+  view?: CommandPaletteView
+  npmUser?: string | null
+  atprotoHandle?: string | null
+  packageContext?: CommandPalettePackageContext | null
+  versionUrlPattern?: string
+  contextCommands?: CommandPaletteContextCommandInput[]
+}) {
+  const groupedCommands = ref<CommandPaletteCommandGroup[]>([]) as Ref<CommandPaletteCommandGroup[]>
+  const flatCommands = ref<CommandPaletteCommand[]>([]) as Ref<CommandPaletteCommand[]>
+  const routePath = ref('') as Ref<string>
+  let submitSearchQuery!: () => Promise<void>
+
+  mockConnectorState.value = {
+    connected: !!options?.npmUser,
+    npmUser: options?.npmUser ?? null,
+  }
+  mockAtprotoHandle.value = options?.atprotoHandle ?? null
+
+  const WrapperComponent = defineComponent({
+    setup() {
+      const { query, setPackageContext, clearPackageContext, setView } = useCommandPalette()
+      const colorMode = useColorMode()
+      const route = useRoute()
+
+      colorMode.preference = options?.colorMode ?? 'system'
+      setView(options?.view ?? 'root')
+      query.value = options?.query ?? ''
+
+      if (options?.packageContext) {
+        setPackageContext(options.packageContext)
+        useCommandPalettePackageCommands(() => options.packageContext ?? null)
+        useCommandPaletteVersionCommands(
+          () => options.packageContext ?? null,
+          () => options.versionUrlPattern,
+        )
+      } else {
+        clearPackageContext()
+      }
+
+      if (options?.contextCommands) {
+        useCommandPaletteContextCommands(options.contextCommands)
+      }
+
+      const commands = useCommandPaletteCommands()
+      submitSearchQuery = commands.submitSearchQuery
+
+      watchEffect(() => {
+        groupedCommands.value = commands.groupedCommands.value
+        flatCommands.value = commands.flatCommands.value
+        routePath.value = route.fullPath
+      })
+
+      return () => h('div')
+    },
+  })
+
+  const wrapper = await mountSuspended(WrapperComponent, {
+    route: options?.route ?? '/',
+  })
+
+  return {
+    wrapper,
+    groupedCommands,
+    flatCommands,
+    routePath,
+    submitSearchQuery,
+  }
+}
+
+afterEach(() => {
+  const commandPalette = useCommandPalette()
+  commandPalette.close()
+  commandPalette.clearPackageContext()
+  commandPalette.contextCommands.value = []
+  commandPalette.queryOverrides.value = []
+  mockConnectorState.value = {
+    connected: false,
+    npmUser: null,
+  }
+  mockAtprotoHandle.value = null
+  vi.clearAllMocks()
+})
+
+describe('useCommandPaletteCommands', () => {
+  it('includes synchronous built-in, link, and settings commands', async () => {
+    const { wrapper, groupedCommands, flatCommands } = await captureCommandPalette()
+
+    expect(groupedCommands.value.map(group => group.id)).toEqual([
+      'navigation',
+      'connections',
+      'settings',
+      'help',
+      'npmx',
+    ])
+    expect(flatCommands.value.find(command => command.id === 'search')?.label).toBe('Search')
+    expect(flatCommands.value.find(command => command.id === 'language')?.label).toBe('Language')
+    expect(flatCommands.value.find(command => command.id === 'keyboard-shortcuts')?.group).toBe(
+      'help',
+    )
+    expect(flatCommands.value.find(command => command.id === 'help-docs-link')).toBeTruthy()
+    expect(flatCommands.value.find(command => command.id === 'chat-link')?.group).toBe('help')
+    expect(flatCommands.value.find(command => command.id === 'npmx-chat-link')?.group).toBe('npmx')
+    expect(flatCommands.value.find(command => command.id === 'builders-chat-link')?.group).toBe(
+      'npmx',
+    )
+    expect(flatCommands.value.find(command => command.id === 'about')?.group).toBe('npmx')
+    expect(flatCommands.value.find(command => command.id === 'blog')?.group).toBe('npmx')
+    expect(flatCommands.value.find(command => command.id === 'privacy')?.group).toBe('npmx')
+    expect(flatCommands.value.find(command => command.id === 'accessibility')?.group).toBe('npmx')
+    expect(flatCommands.value.find(command => command.id === 'settings')?.to).toEqual({
+      name: 'settings',
+    })
+    expect(flatCommands.value.find(command => command.id === 'chat-link')?.href).toBe(
+      'https://chat.npmx.dev',
+    )
+    expect(flatCommands.value.find(command => command.id === 'relative-dates')?.badge).toBe('off')
+    expect(flatCommands.value.find(command => command.id === 'settings')?.label).toBe('settings')
+    expect(flatCommands.value.find(command => command.id === 'theme-system')?.active).toBe(true)
+    expect(flatCommands.value.find(command => command.id === 'theme-dark')).toBeTruthy()
+    expect(flatCommands.value.find(command => command.id === 'accent-colors')?.badge).toBe(
+      'Neutral',
+    )
+    expect(flatCommands.value.find(command => command.id === 'background-themes')?.badge).toBe(
+      'Neutral',
+    )
+
+    wrapper.unmount()
+  })
+
+  it('filters commands locally with Fuse', async () => {
+    const { wrapper, groupedCommands, flatCommands } = await captureCommandPalette({
+      query: 'dark',
+    })
+
+    expect(groupedCommands.value.some(group => group.id === 'settings')).toBe(true)
+    expect(flatCommands.value.some(command => command.id === 'theme-dark')).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('surfaces matching locale commands on the root palette', async () => {
+    const { wrapper, groupedCommands, flatCommands } = await captureCommandPalette({
+      query: 'français',
+    })
+
+    expect(groupedCommands.value.map(group => group.id)).toContain('language')
+    expect(flatCommands.value.find(command => command.id === 'root-locale:fr-FR')?.label).toBe(
+      'Language: Français',
+    )
+
+    wrapper.unmount()
+  })
+
+  it('matches commands with diacritics when the query omits them', async () => {
+    const { wrapper, flatCommands } = await captureCommandPalette({
+      query: 'francais',
+    })
+
+    expect(flatCommands.value.some(command => command.id === 'root-locale:fr-FR')).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('adds package commands and keeps versions grouped last', async () => {
+    const { wrapper, groupedCommands, flatCommands } = await captureCommandPalette({
+      route: '/package/vue',
+      packageContext: {
+        packageName: 'vue',
+        resolvedVersion: '3.4.0',
+        latestVersion: '3.5.0',
+        versions: ['3.3.0', '3.5.0', '3.4.0'],
+        tarballUrl: 'https://registry.npmjs.org/vue/-/vue-3.4.0.tgz',
+      },
+    })
+
+    expect(groupedCommands.value.map(group => group.id)).toEqual([
+      'package',
+      'navigation',
+      'connections',
+      'settings',
+      'help',
+      'npmx',
+      'versions',
+    ])
+    expect(flatCommands.value.find(command => command.id === 'package-diff')).toBeTruthy()
+    expect(flatCommands.value.find(command => command.id === 'package-download')).toBeTruthy()
+    expect(flatCommands.value.find(command => command.id === 'package-main')?.to).toBeTruthy()
+    expect(groupedCommands.value.at(-1)?.id).toBe('versions')
+    expect(groupedCommands.value.at(-1)?.items[0]?.id).toBe('version:3.4.0')
+    expect(groupedCommands.value.at(-1)?.items[0]?.active).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('submits the current query to the search page', async () => {
+    const { wrapper, routePath, submitSearchQuery } = await captureCommandPalette({
+      query: 'webpack',
+    })
+
+    await submitSearchQuery()
+
+    await vi.waitFor(() => {
+      expect(routePath.value).toBe('/search?q=webpack')
+    })
+
+    wrapper.unmount()
+  })
+
+  it('wires the package download action to the tarball helper and closes the palette', async () => {
+    const { wrapper, flatCommands } = await captureCommandPalette({
+      route: '/package/vue',
+      packageContext: {
+        packageName: 'vue',
+        resolvedVersion: '3.4.0',
+        latestVersion: '3.5.0',
+        versions: ['3.3.0', '3.5.0', '3.4.0'],
+        tarballUrl: 'https://registry.npmjs.org/vue/-/vue-3.4.0.tgz',
+      },
+    })
+    const commandPalette = useCommandPalette()
+    commandPalette.open()
+
+    await flatCommands.value.find(command => command.id === 'package-download')?.action?.()
+
+    expect(downloadPackageTarball).toHaveBeenCalledWith('vue', {
+      version: '3.4.0',
+      dist: {
+        tarball: 'https://registry.npmjs.org/vue/-/vue-3.4.0.tgz',
+      },
+    })
+    expect(commandPalette.isOpen.value).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it('adds npm account commands and disconnect support when npm is connected', async () => {
+    const { wrapper, flatCommands } = await captureCommandPalette({
+      route: '/~alice/orgs',
+      npmUser: 'alice',
+    })
+    const commandPalette = useCommandPalette()
+    commandPalette.open()
+
+    expect(flatCommands.value.find(command => command.id === 'npm-disconnect')).toBeTruthy()
+    expect(flatCommands.value.find(command => command.id === 'my-packages')?.to).toEqual({
+      name: '~username',
+      params: {
+        username: 'alice',
+      },
+    })
+    expect(flatCommands.value.find(command => command.id === 'my-orgs')?.active).toBe(true)
+
+    await flatCommands.value.find(command => command.id === 'npm-disconnect')?.action?.()
+
+    expect(mockDisconnectNpm).toHaveBeenCalledTimes(1)
+    expect(commandPalette.isOpen.value).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it('adds atproto account commands and disconnect support when a profile is connected', async () => {
+    const { wrapper, flatCommands } = await captureCommandPalette({
+      route: '/profile/alice.bsky.social',
+      atprotoHandle: 'alice.bsky.social',
+    })
+    const commandPalette = useCommandPalette()
+    commandPalette.open()
+
+    expect(flatCommands.value.find(command => command.id === 'atproto-disconnect')).toBeTruthy()
+    expect(flatCommands.value.find(command => command.id === 'my-profile')?.active).toBe(true)
+
+    await flatCommands.value.find(command => command.id === 'atproto-disconnect')?.action?.()
+
+    expect(mockLogout).toHaveBeenCalledTimes(1)
+    expect(commandPalette.isOpen.value).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it('filters only version commands when the query is a valid semver range', async () => {
+    const { wrapper, groupedCommands, flatCommands } = await captureCommandPalette({
+      route: '/package/vue',
+      query: '^3.4.0',
+      packageContext: {
+        packageName: 'vue',
+        resolvedVersion: '3.4.2',
+        latestVersion: '4.0.0',
+        versions: ['4.0.0', '3.5.0', '3.4.2', '3.3.0'],
+      },
+    })
+
+    expect(flatCommands.value.find(command => command.id === 'search')).toBeTruthy()
+    expect(
+      groupedCommands.value.find(group => group.id === 'versions')?.items.map(item => item.id),
+    ).toEqual(['version:3.4.2', 'version:3.5.0'])
+    expect(flatCommands.value.find(command => command.id === 'version:3.4.2')?.label).toBe('3.4.2')
+
+    wrapper.unmount()
+  })
+
+  it('keeps version navigation on the current surface when a version URL pattern is provided', async () => {
+    const { wrapper, flatCommands, routePath } = await captureCommandPalette({
+      route: '/package-code/vue/v/3.4.2/src/index.ts',
+      packageContext: {
+        packageName: 'vue',
+        resolvedVersion: '3.4.2',
+        latestVersion: '4.0.0',
+        versions: ['4.0.0', '3.5.0', '3.4.2'],
+      },
+      versionUrlPattern: '/package-code/vue/v/{version}/src/index.ts',
+    })
+
+    const versionCommand = flatCommands.value.find(command => command.id === 'version:3.5.0')
+
+    expect(versionCommand && 'to' in versionCommand).toBe(true)
+    if (!versionCommand || !('to' in versionCommand)) {
+      throw new Error('Expected version command to use `to` navigation')
+    }
+
+    await navigateTo(versionCommand.to)
+
+    await vi.waitFor(() => {
+      expect(routePath.value).toBe('/package-code/vue/v/3.5.0/src/index.ts')
+    })
+
+    wrapper.unmount()
+  })
+
+  it('keeps the search action available when a query is present', async () => {
+    const { wrapper, flatCommands } = await captureCommandPalette({
+      query: 'webpack',
+    })
+
+    expect(flatCommands.value.find(command => command.id === 'search')).toBeTruthy()
+    expect(flatCommands.value.at(-1)?.id).toBe('search')
+    expect(flatCommands.value.at(-1)?.label).toBe('Search for "webpack"')
+
+    wrapper.unmount()
+  })
+
+  it('shows language commands on the language subpage', async () => {
+    const { wrapper, groupedCommands, flatCommands } = await captureCommandPalette({
+      view: 'languages',
+    })
+
+    expect(groupedCommands.value.map(group => group.id)).toEqual(['language', 'links'])
+    expect(flatCommands.value.find(command => command.id === 'language-help-translate')?.href).toBe(
+      'https://i18n.npmx.dev/',
+    )
+    expect(flatCommands.value.some(command => command.id.startsWith('locale:'))).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('shows accent color commands on the accent color subpage', async () => {
+    const { wrapper, groupedCommands, flatCommands } = await captureCommandPalette({
+      view: 'accent-colors',
+    })
+
+    expect(groupedCommands.value.map(group => group.id)).toEqual(['settings'])
+    expect(flatCommands.value.find(command => command.id === 'accent-color:neutral')?.active).toBe(
+      true,
+    )
+    expect(flatCommands.value.find(command => command.id === 'accent-color:coral')).toBeTruthy()
+
+    wrapper.unmount()
+  })
+
+  it('shows background theme commands on the background theme subpage', async () => {
+    const { wrapper, groupedCommands, flatCommands } = await captureCommandPalette({
+      view: 'background-themes',
+    })
+
+    expect(groupedCommands.value.map(group => group.id)).toEqual(['settings'])
+    expect(
+      flatCommands.value.find(command => command.id === 'background-theme:neutral')?.active,
+    ).toBe(true)
+    expect(flatCommands.value.find(command => command.id === 'background-theme:stone')).toBeTruthy()
+
+    wrapper.unmount()
+  })
+
+  it('includes registered page context commands', async () => {
+    const action = vi.fn()
+    const { wrapper, groupedCommands, flatCommands } = await captureCommandPalette({
+      contextCommands: [
+        {
+          id: 'context-copy',
+          group: 'package',
+          label: 'Copy thing',
+          keywords: ['thing'],
+          iconClass: 'i-lucide:copy',
+          action,
+        },
+      ],
+    })
+
+    expect(groupedCommands.value.map(group => group.id)).toContain('package')
+
+    await flatCommands.value.find(command => command.id === 'context-copy')?.action!()
+    expect(action).toHaveBeenCalledTimes(1)
+
+    wrapper.unmount()
+  })
+
+  it('builds scoped package links and detects compare routes with multiple packages', async () => {
+    const { wrapper, flatCommands } = await captureCommandPalette({
+      route: '/compare?packages=react,%20@scope/pkg',
+      packageContext: {
+        packageName: '@scope/pkg',
+        resolvedVersion: '1.0.0',
+        latestVersion: '2.0.0',
+        versions: ['2.0.0', '1.0.0'],
+      },
+    })
+
+    expect(flatCommands.value.find(command => command.id === 'package-compare')?.active).toBe(true)
+    expect(flatCommands.value.find(command => command.id === 'package-code')?.to).toEqual({
+      name: 'code',
+      params: {
+        org: '@scope',
+        packageName: 'pkg',
+        version: '1.0.0',
+        filePath: '',
+      },
+    })
+    expect(flatCommands.value.find(command => command.id === 'package-docs')?.to).toEqual({
+      name: 'docs',
+      params: {
+        path: ['@scope/pkg', 'v', '1.0.0'],
+      },
+    })
+
+    wrapper.unmount()
+  })
+
+  it('omits diff and download commands when package metadata does not support them', async () => {
+    const { wrapper, flatCommands } = await captureCommandPalette({
+      route: '/package/vue',
+      packageContext: {
+        packageName: 'vue',
+        resolvedVersion: '3.5.0',
+        latestVersion: '3.5.0',
+        versions: ['3.5.0'],
+      },
+    })
+
+    expect(flatCommands.value.find(command => command.id === 'package-download')).toBeUndefined()
+    expect(flatCommands.value.find(command => command.id === 'package-diff')).toBeUndefined()
+
+    wrapper.unmount()
+  })
+})
diff --git a/test/nuxt/composables/use-command-palette-package-versions.spec.ts b/test/nuxt/composables/use-command-palette-package-versions.spec.ts
new file mode 100644
index 0000000000..c0152b46cb
--- /dev/null
+++ b/test/nuxt/composables/use-command-palette-package-versions.spec.ts
@@ -0,0 +1,121 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+
+const mockFetchAllPackageVersions = vi.fn()
+
+vi.mock('~/utils/npm/api', () => ({
+  fetchAllPackageVersions: (...args: unknown[]) => mockFetchAllPackageVersions(...args),
+}))
+
+async function capturePackageVersions(initialPackageName: string | null) {
+  const { useCommandPalettePackageVersions } =
+    await import('~/composables/useCommandPalettePackageVersions')
+
+  const packageName = ref(initialPackageName)
+  let result!: ReturnType<typeof useCommandPalettePackageVersions>
+
+  const wrapper = mount(
+    defineComponent({
+      name: 'CommandPalettePackageVersionsHarness',
+      setup() {
+        result = useCommandPalettePackageVersions(() => packageName.value)
+        return () => h('div')
+      },
+    }),
+  )
+
+  await nextTick()
+
+  return {
+    wrapper,
+    packageName,
+    result,
+  }
+}
+
+afterEach(() => {
+  mockFetchAllPackageVersions.mockReset()
+})
+
+describe('useCommandPalettePackageVersions', () => {
+  it('dedupes concurrent loads for the same package', async () => {
+    let resolveFetch!: (value: Array<{ version: string }>) => void
+    mockFetchAllPackageVersions.mockImplementation(
+      () =>
+        new Promise<Array<{ version: string }>>(resolve => {
+          resolveFetch = resolve
+        }),
+    )
+
+    const { wrapper, result } = await capturePackageVersions('vue')
+
+    const firstLoad = result.ensureLoaded()
+    const secondLoad = result.ensureLoaded()
+
+    expect(mockFetchAllPackageVersions).toHaveBeenCalledTimes(1)
+    expect(mockFetchAllPackageVersions).toHaveBeenCalledWith('vue')
+
+    resolveFetch([{ version: '3.5.0' }])
+    await Promise.all([firstLoad, secondLoad])
+
+    expect(result.versions.value).toEqual(['3.5.0'])
+
+    wrapper.unmount()
+  })
+
+  it('resets cached versions when the package changes', async () => {
+    mockFetchAllPackageVersions
+      .mockResolvedValueOnce([{ version: '3.5.0' }])
+      .mockResolvedValueOnce([{ version: '19.0.0' }])
+
+    const { wrapper, packageName, result } = await capturePackageVersions('vue')
+
+    await result.ensureLoaded()
+    expect(result.versions.value).toEqual(['3.5.0'])
+
+    packageName.value = 'react'
+    await nextTick()
+
+    expect(result.versions.value).toBeNull()
+
+    await result.ensureLoaded()
+
+    expect(mockFetchAllPackageVersions).toHaveBeenNthCalledWith(2, 'react')
+    expect(result.versions.value).toEqual(['19.0.0'])
+
+    wrapper.unmount()
+  })
+
+  it('ignores stale async results after the package name changes', async () => {
+    const pendingFetches = new Map<string, (value: Array<{ version: string }>) => void>()
+    mockFetchAllPackageVersions.mockImplementation(
+      (packageName: string) =>
+        new Promise<Array<{ version: string }>>(resolve => {
+          pendingFetches.set(packageName, resolve)
+        }),
+    )
+
+    const { wrapper, packageName, result } = await capturePackageVersions('vue')
+
+    const vueLoad = result.ensureLoaded()
+
+    packageName.value = 'react'
+    await nextTick()
+
+    const reactLoad = result.ensureLoaded()
+
+    pendingFetches.get('vue')?.([{ version: '3.5.0' }])
+    await vueLoad
+    await nextTick()
+
+    expect(result.versions.value).toBeNull()
+
+    pendingFetches.get('react')?.([{ version: '19.0.0' }])
+    await reactLoad
+
+    expect(result.versions.value).toEqual(['19.0.0'])
+
+    wrapper.unmount()
+  })
+})
diff --git a/test/nuxt/composables/use-command-palette.spec.ts b/test/nuxt/composables/use-command-palette.spec.ts
new file mode 100644
index 0000000000..d3cd57daca
--- /dev/null
+++ b/test/nuxt/composables/use-command-palette.spec.ts
@@ -0,0 +1,183 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { defineComponent, h, nextTick, ref, type PropType } from 'vue'
+import type { CommandPalettePackageContext } from '~/types/command-palette'
+
+const packageA = {
+  packageName: 'alpha',
+  resolvedVersion: '1.0.0',
+  latestVersion: '1.1.0',
+  versions: ['1.0.0', '1.1.0'],
+}
+
+const packageB = {
+  packageName: 'beta',
+  resolvedVersion: '2.0.0',
+  latestVersion: '2.1.0',
+  versions: ['2.0.0', '2.1.0'],
+}
+
+afterEach(() => {
+  const commandPalette = useCommandPalette()
+  commandPalette.close()
+  commandPalette.clearPackageContext()
+  commandPalette.contextCommands.value = []
+  commandPalette.queryOverrides.value = []
+})
+
+describe('useCommandPalettePackageContext', () => {
+  it('keeps the newer package context when an older scope unmounts later', async () => {
+    const showAlpha = ref(true)
+    const showBeta = ref(false)
+    let commandPalette!: ReturnType<typeof useCommandPalette>
+
+    const ContextOwner = defineComponent({
+      name: 'ContextOwner',
+      props: {
+        context: {
+          type: Object as PropType<CommandPalettePackageContext>,
+          required: true,
+        },
+      },
+      setup(props) {
+        useCommandPalettePackageContext(() => props.context)
+        return () => h('div')
+      },
+    })
+
+    const Harness = defineComponent({
+      name: 'CommandPaletteContextHarness',
+      setup() {
+        commandPalette = useCommandPalette()
+        return () =>
+          h('div', [
+            showAlpha.value ? h(ContextOwner, { context: packageA }) : null,
+            showBeta.value ? h(ContextOwner, { context: packageB }) : null,
+          ])
+      },
+    })
+
+    const wrapper = await mountSuspended(Harness)
+
+    expect(commandPalette.packageContext.value?.packageName).toBe('alpha')
+
+    showBeta.value = true
+    await nextTick()
+
+    expect(commandPalette.packageContext.value?.packageName).toBe('beta')
+
+    showAlpha.value = false
+    await nextTick()
+
+    expect(commandPalette.packageContext.value?.packageName).toBe('beta')
+
+    wrapper.unmount()
+  })
+
+  it('runs the active package context onOpen hook when the palette opens', async () => {
+    const showAlpha = ref(true)
+    const showBeta = ref(false)
+    const onOpenAlpha = vi.fn()
+    const onOpenBeta = vi.fn()
+    let commandPalette!: ReturnType<typeof useCommandPalette>
+
+    const ContextOwner = defineComponent({
+      name: 'ContextOwner',
+      props: {
+        context: {
+          type: Object as PropType<CommandPalettePackageContext>,
+          required: true,
+        },
+        onOpen: {
+          type: Function as PropType<() => void | Promise<void>>,
+          required: true,
+        },
+      },
+      setup(props) {
+        useCommandPalettePackageContext(() => props.context, {
+          onOpen: props.onOpen,
+        })
+        return () => h('div')
+      },
+    })
+
+    const Harness = defineComponent({
+      name: 'CommandPaletteContextOpenHarness',
+      setup() {
+        commandPalette = useCommandPalette()
+        return () =>
+          h('div', [
+            showAlpha.value ? h(ContextOwner, { context: packageA, onOpen: onOpenAlpha }) : null,
+            showBeta.value ? h(ContextOwner, { context: packageB, onOpen: onOpenBeta }) : null,
+          ])
+      },
+    })
+
+    const wrapper = await mountSuspended(Harness)
+
+    commandPalette.open()
+    await nextTick()
+
+    expect(onOpenAlpha).toHaveBeenCalledTimes(1)
+    expect(onOpenBeta).not.toHaveBeenCalled()
+
+    commandPalette.close()
+    showBeta.value = true
+    await nextTick()
+
+    commandPalette.open()
+    await nextTick()
+
+    expect(onOpenAlpha).toHaveBeenCalledTimes(1)
+    expect(onOpenBeta).toHaveBeenCalledTimes(1)
+
+    wrapper.unmount()
+  })
+
+  it('clears scoped commands and query overrides when a package scope unmounts', async () => {
+    const showContext = ref(true)
+    let commandPalette!: ReturnType<typeof useCommandPalette>
+
+    const ContextOwner = defineComponent({
+      name: 'CommandPaletteScopedCommandsHarness',
+      setup() {
+        useCommandPalettePackageContext(() => packageA)
+        useCommandPaletteVersionCommands(() => packageA)
+        useCommandPaletteContextCommands([
+          {
+            id: 'context-copy',
+            group: 'package',
+            label: 'Copy thing',
+            keywords: ['thing'],
+            iconClass: 'i-lucide:copy',
+            action: () => {},
+          },
+        ])
+        return () => h('div')
+      },
+    })
+
+    const Harness = defineComponent({
+      name: 'CommandPaletteScopedCommandsRootHarness',
+      setup() {
+        commandPalette = useCommandPalette()
+        return () => h('div', [showContext.value ? h(ContextOwner) : null])
+      },
+    })
+
+    const wrapper = await mountSuspended(Harness)
+
+    expect(commandPalette.packageContext.value?.packageName).toBe('alpha')
+    expect(commandPalette.contextCommands.value.length).toBeGreaterThan(0)
+    expect(commandPalette.queryOverrides.value.map(entry => entry.group)).toEqual(['versions'])
+
+    showContext.value = false
+    await nextTick()
+
+    expect(commandPalette.packageContext.value).toBeNull()
+    expect(commandPalette.contextCommands.value).toEqual([])
+    expect(commandPalette.queryOverrides.value).toEqual([])
+
+    wrapper.unmount()
+  })
+})