From f6029b4af7863df988808223edfdcd051a67b8dd 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 1/3] feat(ui): add command palette for quick navigation and
 actions

---
 app/app.vue                                   |   2 +
 app/components/AppFooter.vue                  |   8 +
 app/components/AppHeader.vue                  |  22 +-
 app/components/CommandPalette.client.vue      | 453 +++++++++++++
 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/Terminal/Install.vue           |  81 +++
 app/components/diff/ViewerPanel.vue           |  30 +
 app/composables/useCommandPalette.ts          | 298 +++++++++
 app/composables/useCommandPaletteCommands.ts  | 213 ++++++
 .../useCommandPaletteGlobalCommands.ts        | 608 ++++++++++++++++++
 .../useCommandPalettePackageCommands.ts       | 130 ++++
 .../useCommandPalettePackageVersions.ts       |  39 ++
 .../useCommandPaletteVersionCommands.ts       |  62 ++
 app/composables/usePlatformModifierKey.ts     |  30 +
 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          |  21 +
 app/pages/profile/[identity]/index.vue        |  44 ++
 app/types/command-palette.ts                  |  76 +++
 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                          |  92 +++
 i18n/locales/fr-FR.json                       |  96 ++-
 i18n/schema.json                              | 276 ++++++++
 test/nuxt/a11y.spec.ts                        |  38 ++
 test/nuxt/components/CommandPalette.spec.ts   | 103 +++
 .../use-command-palette-commands.spec.ts      | 297 +++++++++
 .../composables/use-command-palette.spec.ts   | 132 ++++
 uno.config.ts                                 |  32 +
 35 files changed, 3590 insertions(+), 19 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 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.spec.ts

diff --git a/app/app.vue b/app/app.vue
index 5916e3e32..9a90d2b0b 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 695535235..b8b2c9fa0 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,17 @@ 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') }}
+              </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 8f0cb2290..31a31f771 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')"
+        @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 000000000..3c4704acd
--- /dev/null
+++ b/app/components/CommandPalette.client.vue
@@ -0,0 +1,453 @@
+<script setup lang="ts">
+import type { CommandPaletteCommand } from '~/types/command-palette'
+
+const { isOpen, query, close, toggle, setView } = 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 resultsId = `${dialogId}-results`
+
+const inputDescribedBy = computed(() => `${descriptionId} ${statusId}`)
+
+const statusMessage = computed(() => {
+  const count = flatCommands.value.length
+
+  if (!count && trimmedQuery.value) {
+    return $t('command_palette.status.no_matches_search', { query: trimmedQuery.value })
+  }
+
+  if (trimmedQuery.value) {
+    return $t('command_palette.status.matching', { count }, count)
+  }
+
+  return $t('command_palette.status.available', { 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) {
+  return !!(command.to || command.href)
+}
+
+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>
+  <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">
+        {{ 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="large"
+          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"
+                      :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>
+</template>
diff --git a/app/components/Package/ExternalLinks.vue b/app/components/Package/ExternalLinks.vue
index 4ec1ab3f0..b4c08aa52 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 7cf6b4c8b..16138671c 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 d98ee537c..d6b6dd425 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 1a83c3828..d1d4d0baa 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/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 162dc84ec..caa378ea4 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/components/diff/ViewerPanel.vue b/app/components/diff/ViewerPanel.vue
index 76b10a3ca..7ecd94e7b 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/composables/useCommandPalette.ts b/app/composables/useCommandPalette.ts
new file mode 100644
index 000000000..1ae238c4b
--- /dev/null
+++ b/app/composables/useCommandPalette.ts
@@ -0,0 +1,298 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type {
+  CommandPaletteContextCommand,
+  CommandPaletteContextCommandInput,
+  CommandPaletteCommand,
+  CommandPaletteGroup,
+  CommandPalettePackageContext,
+  CommandPaletteView,
+} from '~/types/command-palette'
+
+const commandPaletteActionRegistry = new Map<string, () => void | Promise<void>>()
+const commandPaletteActionIdsByScopeId = new Map<string, string[]>()
+const commandPalettePackageContextOpenRegistry = new Map<string, () => void | Promise<void>>()
+const commandPaletteQueryOverrideRegistry = new Map<
+  string,
+  (query: string) => CommandPaletteCommand[] | null
+>()
+
+function stripContextCommandAction(
+  command: CommandPaletteContextCommandInput,
+  actionId: string,
+): CommandPaletteContextCommand {
+  if ('action' in command) {
+    const { action: _action, ...serializedCommand } = command
+    return {
+      ...serializedCommand,
+      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 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 = commandPalettePackageContextOpenRegistry.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 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 = commandPaletteActionIdsByScopeId.get(scopeId) ?? []
+    previousActionIds.forEach(actionId => {
+      commandPaletteActionRegistry.delete(actionId)
+    })
+
+    const nextActionIds: string[] = []
+    commands.forEach(command => {
+      commandPaletteActionRegistry.set(command.actionId, command.action)
+      nextActionIds.push(command.actionId)
+    })
+    commandPaletteActionIdsByScopeId.set(scopeId, nextActionIds)
+  }
+
+  function clearContextCommandActions(scopeId: string) {
+    const actionIds = commandPaletteActionIdsByScopeId.get(scopeId) ?? []
+    actionIds.forEach(actionId => {
+      commandPaletteActionRegistry.delete(actionId)
+    })
+    commandPaletteActionIdsByScopeId.delete(scopeId)
+  }
+
+  function resolveContextCommandAction(actionId: string) {
+    return commandPaletteActionRegistry.get(actionId)
+  }
+
+  function setPackageContextOnOpen(scopeId: string, onOpen: () => void | Promise<void>) {
+    commandPalettePackageContextOpenRegistry.set(scopeId, onOpen)
+  }
+
+  function clearPackageContextOnOpen(scopeId: string) {
+    commandPalettePackageContextOpenRegistry.delete(scopeId)
+  }
+
+  function setQueryOverride(
+    scopeId: string,
+    group: CommandPaletteGroup,
+    resolve: (query: string) => CommandPaletteCommand[] | null,
+  ) {
+    commandPaletteQueryOverrideRegistry.set(`${scopeId}:${group}`, resolve)
+    queryOverrides.value = [
+      ...queryOverrides.value.filter(
+        entry => !(entry.scopeId === scopeId && entry.group === group),
+      ),
+      { scopeId, group },
+    ]
+  }
+
+  function clearQueryOverride(scopeId: string, group: CommandPaletteGroup) {
+    commandPaletteQueryOverrideRegistry.delete(`${scopeId}:${group}`)
+    queryOverrides.value = queryOverrides.value.filter(
+      entry => !(entry.scopeId === scopeId && entry.group === group),
+    )
+  }
+
+  function resolveQueryOverride(scopeId: string, group: CommandPaletteGroup) {
+    return commandPaletteQueryOverrideRegistry.get(`${scopeId}:${group}`)
+  }
+
+  return {
+    isOpen,
+    query,
+    view,
+    packageContext,
+    contextCommands,
+    queryOverrides,
+    open,
+    close,
+    toggle,
+    setView,
+    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 000000000..8f66cb1e1
--- /dev/null
+++ b/app/composables/useCommandPaletteCommands.ts
@@ -0,0 +1,213 @@
+// @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(() =>
+    view.value !== 'root'
+      ? (currentViewDefinition.value?.commands ?? [])
+      : trimmedQuery.value
+        ? [
+            ...rootViewCommands.value.filter(command => command.id !== 'search'),
+            ...rootSearchCommands.value,
+          ]
+        : rootViewCommands.value,
+  )
+
+  const { results } = useFuse(query, commands, {
+    fuseOptions: {
+      keys: ['label', 'keywords'],
+      threshold: 0.3,
+      ignoreLocation: 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 000000000..5e071e25d
--- /dev/null
+++ b/app/composables/useCommandPaletteGlobalCommands.ts
@@ -0,0 +1,608 @@
+import type { CommandPaletteCommand } from '~/types/command-palette'
+import {
+  DISCORD_BUILDERS_URL,
+  DISCORD_COMMUNITY_URL,
+  NPMX_DOCS_SITE,
+} from '#shared/utils/constants'
+import type { CommandPaletteView } from '~/types/command-palette'
+
+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>, value: string | null | undefined) {
+  if (!value) return
+
+  const trimmedValue = value.trim()
+  if (!trimmedValue) return
+
+  keywords.add(trimmedValue)
+
+  const foldedValue = trimmedValue.normalize('NFKD').replace(/[\u0300-\u036f]/g, '')
+  if (foldedValue !== trimmedValue) {
+    keywords.add(foldedValue)
+  }
+}
+
+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'))
+
+  ;[
+    getLocaleDisplayName(activeLocale, code),
+    getLocaleDisplayName('en', code),
+    getLocaleDisplayName(code, code),
+    code === baseCode ? null : getLocaleDisplayName(activeLocale, baseCode),
+    code === baseCode ? null : getLocaleDisplayName('en', baseCode),
+    code === baseCode ? null : getLocaleDisplayName(baseCode, baseCode),
+  ].forEach(value => addSearchKeyword(keywords, value))
+
+  return [...keywords]
+}
+
+function activeLabel(isCurrentRoute: boolean, label: string) {
+  return isCurrentRoute ? label : null
+}
+
+function withRootSearchLabel(command: CommandPaletteCommand, label: string): CommandPaletteCommand {
+  const commandBase = {
+    id: `root-${command.id}`,
+    group: command.group,
+    label,
+    keywords: command.keywords,
+    iconClass: command.iconClass,
+    badge: command.badge,
+    active: command.active,
+    activeLabel: command.activeLabel,
+  }
+
+  if (command.to != null) {
+    return {
+      ...commandBase,
+      to: command.to,
+    }
+  }
+
+  if (command.href != null) {
+    return {
+      ...commandBase,
+      href: command.href,
+    }
+  }
+
+  return {
+    ...commandBase,
+    action: command.action!,
+  }
+}
+
+export function useCommandPaletteGlobalCommands({
+  submitSearchQuery,
+}: UseCommandPaletteGlobalCommandsOptions) {
+  const { locale, locales, setLocale, t } = useI18n()
+  const route = useRoute()
+  const colorMode = useColorMode()
+  const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
+  const { backgroundThemes, selectedBackgroundTheme, 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 { close, setView } = useCommandPalette()
+
+  function closeThen(run: () => void | Promise<void>) {
+    return async () => {
+      close()
+      await run()
+    }
+  }
+
+  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 = selectedAccentColor.value ?? 'sky'
+    const activeAccentColor = accentColors.value.find(color => color.id === activeAccentColorId)
+
+    if (!activeAccentColor) return activeAccentColorId
+    return activeAccentColor.id === 'neutral' ? t('settings.clear_accent') : activeAccentColor.label
+  })
+  const currentBackgroundThemeLabel = computed(() => {
+    const activeBackgroundThemeId = selectedBackgroundTheme.value ?? 'neutral'
+    return (
+      backgroundThemes.value.find(theme => theme.id === activeBackgroundThemeId)?.label ??
+      activeBackgroundThemeId
+    )
+  })
+  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: closeThen(async () => {
+          await setLocale(code)
+        }),
+      }
+    }),
+  )
+  const accentColorCommands = computed<CommandPaletteCommand[]>(() => {
+    const activeAccentColorId = selectedAccentColor.value ?? 'sky'
+
+    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: closeThen(() => {
+        setAccentColor(color.id)
+      }),
+    }))
+  })
+  const backgroundThemeCommands = computed<CommandPaletteCommand[]>(() => {
+    const activeBackgroundThemeId = selectedBackgroundTheme.value ?? 'neutral'
+
+    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: closeThen(() => {
+        setBackgroundTheme(theme.id)
+      }),
+    }))
+  })
+
+  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: closeThen(() => {
+          settings.value.relativeDates = !settings.value.relativeDates
+        }),
+      },
+      {
+        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: closeThen(() => {
+          colorMode.preference = '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: closeThen(() => {
+          colorMode.preference = '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: closeThen(() => {
+          colorMode.preference = '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,
+        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,
+        action: async () => {
+          setView('background-themes')
+        },
+      },
+    ]
+
+    if (isNpmConnected.value && npmUser.value) {
+      items.push(
+        {
+          id: 'npm-disconnect',
+          group: 'connections',
+          label: t('command_palette.connections.npm_disconnect'),
+          keywords: [
+            npmUser.value,
+            t('command_palette.connections.npm_connected', { username: npmUser.value }),
+          ],
+          iconClass: 'i-lucide:plug-zap',
+          action: closeThen(() => {
+            disconnectNpm()
+          }),
+        },
+        {
+          id: 'my-packages',
+          group: 'navigation',
+          label: t('command_palette.navigation.packages', { username: npmUser.value }),
+          keywords: [npmUser.value, t('header.packages')],
+          iconClass: 'i-lucide:boxes',
+          active: route.name === '~username' && route.params.username?.toString() === npmUser.value,
+          activeLabel: activeLabel(
+            route.name === '~username' && route.params.username?.toString() === npmUser.value,
+            t('command_palette.here'),
+          ),
+          to: {
+            name: '~username',
+            params: {
+              username: npmUser.value!,
+            },
+          },
+        },
+        {
+          id: 'my-orgs',
+          group: 'navigation',
+          label: t('command_palette.navigation.orgs', { username: npmUser.value }),
+          keywords: [npmUser.value, t('header.orgs')],
+          iconClass: 'i-lucide:users',
+          active:
+            route.name === '~username-orgs' && route.params.username?.toString() === npmUser.value,
+          activeLabel: activeLabel(
+            route.name === '~username-orgs' && route.params.username?.toString() === npmUser.value,
+            t('command_palette.here'),
+          ),
+          to: {
+            name: '~username-orgs',
+            params: {
+              username: npmUser.value!,
+            },
+          },
+        },
+      )
+    }
+
+    if (atprotoUser.value != null) {
+      items.push(
+        {
+          id: 'atproto-disconnect',
+          group: 'connections',
+          label: t('command_palette.connections.atmosphere_disconnect'),
+          keywords: [
+            atprotoUser.value.handle,
+            t('command_palette.connections.atmosphere_connected', {
+              handle: atprotoUser.value.handle,
+            }),
+          ],
+          iconClass: 'i-lucide:log-out',
+          action: closeThen(async () => {
+            await logout()
+          }),
+        },
+        {
+          id: 'my-profile',
+          group: 'navigation',
+          label: t('command_palette.navigation.profile', { handle: atprotoUser.value.handle }),
+          keywords: [atprotoUser.value.handle, t('account_menu.atmosphere')],
+          iconClass: 'i-lucide:user',
+          active:
+            route.name === 'profile-identity' &&
+            route.params.identity?.toString() === atprotoUser.value.handle,
+          activeLabel: activeLabel(
+            route.name === 'profile-identity' &&
+              route.params.identity?.toString() === atprotoUser.value.handle,
+            t('command_palette.here'),
+          ),
+          to: {
+            name: 'profile-identity',
+            params: {
+              identity: atprotoUser.value!.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 000000000..1670ebd51
--- /dev/null
+++ b/app/composables/useCommandPalettePackageCommands.ts
@@ -0,0 +1,130 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type {
+  CommandPaletteContextCommandInput,
+  CommandPalettePackageContext,
+} from '~/types/command-palette'
+
+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.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 000000000..021a4556f
--- /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 000000000..0e895d9bf
--- /dev/null
+++ b/app/composables/useCommandPaletteVersionCommands.ts
@@ -0,0 +1,62 @@
+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 000000000..d56c2cc59
--- /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/pages/compare.vue b/app/pages/compare.vue
index c67a38371..ef9d4d49d 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 11b96df10..1bc6ac2c9 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 3fbdcfe99..db91182bd 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 37cf25821..31aba3bd5 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 309e16db7..7c4c3d5ce 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -200,6 +200,25 @@ 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 ?? {}),
+  }
+})
+
+useCommandPalettePackageContext(commandPalettePackageContext, {
+  onOpen: ensureCommandPaletteVersionsLoaded,
+})
+useCommandPalettePackageCommands(commandPalettePackageContext)
 
 // Detect two hydration scenarios where the external _payload.json is missing:
 //
@@ -460,6 +479,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 fbf4b258c..f0acf5cec 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 000000000..d3434a254
--- /dev/null
+++ b/app/types/command-palette.ts
@@ -0,0 +1,76 @@
+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 CommandPaletteCommand =
+  | (CommandPaletteCommandBase & {
+      action: () => void | Promise<void>
+      to?: never
+      href?: never
+    })
+  | (CommandPaletteCommandBase & {
+      to: RouteLocationRaw | string
+      action?: never
+      href?: never
+    })
+  | (CommandPaletteCommandBase & {
+      href: string
+      action?: never
+      to?: never
+    })
+
+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[]
+}
diff --git a/docs/content/2.guide/1.features.md b/docs/content/2.guide/1.features.md
index d15505da5..bb2260f81 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` or `Ctrl+K` 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 da0df3c6f..4b5bc2dbc 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` or `Ctrl+K` 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 click the command palette button in the app header if you prefer a visible entry point.
+
 ## Global shortcuts
 
-| Key | Action                   |
-| --- | ------------------------ |
-| `/` | Focus search bar         |
-| `?` | Highlight keyboard hints |
-| `,` | Open settings            |
-| `c` | Open compare             |
+| Key             | Action                   |
+| --------------- | ------------------------ |
+| `⌘K` / `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 1367a8cc2..85a3f891e 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 or Ctrl+K, 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 02c1af000..4aa059145 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -27,6 +27,8 @@
       "search": "Search",
       "package": "Package"
     },
+    "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.",
     "focus_search": "Focus search",
     "show_kbd_hints": "Highlight keyboard hints",
     "settings": "Open settings",
@@ -75,6 +77,96 @@
     "instant_search_turn_off": "turn off",
     "instant_search_advisory": "{label} {state} — {action}"
   },
+  "command_palette": {
+    "title": "command palette",
+    "quick_actions": "quick actions",
+    "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"
+    },
+    "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": "No commands available | 1 command available | {count} commands available",
+      "matching": "No matching commands | 1 matching command | {count} matching commands",
+      "no_matches_search": "No matching commands. Press Enter to search for \"{query}\"."
+    }
+  },
   "nav": {
     "main_navigation": "Main",
     "popular_packages": "Popular packages",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 767146115..3eaa382df 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -27,6 +27,8 @@
       "search": "Recherche",
       "package": "Paquet"
     },
+    "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 réglages et les liens externes sans quitter le clavier.",
     "focus_search": "Aller à la recherche",
     "show_kbd_hints": "Afficher les raccourcis clavier",
     "settings": "Ouvrir les paramètres",
@@ -36,7 +38,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 +77,96 @@
     "instant_search_turn_off": "désactiver",
     "instant_search_advisory": "{label} {state} — {action}"
   },
+  "command_palette": {
+    "title": "palette de commandes",
+    "quick_actions": "actions rapides",
+    "subtitle": "naviguez dans npmx et changez rapidement les réglages",
+    "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": "Connecter le CLI npm",
+      "npm_connected": "CLI npm (~{username})",
+      "npm_disconnect": "Déconnecter le CLI npm",
+      "atmosphere_connect": "Connecter Atmosphere",
+      "atmosphere_connected": "atmosphere ({'@'}{handle})",
+      "atmosphere_disconnect": "Déconnecter 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"
+    },
+    "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 à la ligne"
+    },
+    "version": {
+      "label": "{version}"
+    },
+    "status": {
+      "available": "Aucune commande disponible | 1 commande disponible | {count} commandes disponibles",
+      "matching": "Aucune commande correspondante | 1 commande correspondante | {count} commandes correspondantes",
+      "no_matches_search": "Aucune commande correspondante. Appuyez sur Entrée pour rechercher « {query} »."
+    }
+  },
   "nav": {
     "main_navigation": "Barre de navigation",
     "popular_packages": "Paquets populaires",
diff --git a/i18n/schema.json b/i18n/schema.json
index 885bd6eb5..8b0c5afac 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -85,6 +85,12 @@
           },
           "additionalProperties": false
         },
+        "command_palette": {
+          "type": "string"
+        },
+        "command_palette_description": {
+          "type": "string"
+        },
         "focus_search": {
           "type": "string"
         },
@@ -229,6 +235,276 @@
       },
       "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"
+            }
+          },
+          "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": {
+              "type": "string"
+            },
+            "matching": {
+              "type": "string"
+            },
+            "no_matches_search": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
+    },
     "nav": {
       "type": "object",
       "properties": {
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 5e2c97a7d..444962ecd 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/components/CommandPalette.spec.ts b/test/nuxt/components/CommandPalette.spec.ts
new file mode 100644
index 000000000..c47715816
--- /dev/null
+++ b/test/nuxt/components/CommandPalette.spec.ts
@@ -0,0 +1,103 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { afterEach, describe, expect, it } from 'vitest'
+import { CommandPalette } from '#components'
+
+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(CommandPalette)])
+  },
+})
+
+afterEach(() => {
+  commandPalette?.close()
+  commandPalette?.clearPackageContext()
+  commandPalette = null
+})
+
+describe('CommandPalette', () => {
+  it('connects the input to an existing description, live status, and results region', async () => {
+    await mountSuspended(CommandPaletteHarness)
+    await nextTick()
+    await nextTick()
+
+    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 mountSuspended(CommandPaletteHarness)
+    await nextTick()
+    await nextTick()
+
+    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('updates the input placeholder for palette subviews', async () => {
+    await mountSuspended(CommandPaletteHarness)
+    await nextTick()
+    await nextTick()
+
+    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 mountSuspended(CommandPaletteHarness)
+    await nextTick()
+    await nextTick()
+
+    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')
+  })
+})
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 000000000..7d7586e89
--- /dev/null
+++ b/test/nuxt/composables/use-command-palette-commands.spec.ts
@@ -0,0 +1,297 @@
+import { describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, ref, watchEffect, type Ref } from 'vue'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import type {
+  CommandPaletteCommand,
+  CommandPaletteCommandGroup,
+  CommandPaletteContextCommandInput,
+  CommandPalettePackageContext,
+  CommandPaletteView,
+} from '~/types/command-palette'
+
+async function captureCommandPalette(options?: {
+  route?: string
+  query?: string
+  colorMode?: 'system' | 'light' | 'dark'
+  view?: CommandPaletteView
+  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>
+
+  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,
+  }
+}
+
+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('Sky')
+    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: 'francais',
+    })
+
+    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('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'],
+      },
+    })
+
+    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-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('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:sky')?.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()
+  })
+})
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 000000000..a3f2e9579
--- /dev/null
+++ b/test/nuxt/composables/use-command-palette.spec.ts
@@ -0,0 +1,132 @@
+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(() => {
+  useCommandPalette().clearPackageContext()
+})
+
+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()
+  })
+})
diff --git a/uno.config.ts b/uno.config.ts
index fae3f4578..05974c99d 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -21,7 +21,39 @@ const customIcons = {
     '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="6" r="1"/><path d="m9 18 3-5 3 5"/><path d="m8 10 8 0"/><path d="M12 10v4"/></svg>',
 }
 
+const commandPaletteIconClasses = [
+  'i-lucide:search',
+  'i-lucide:command',
+  'i-lucide:calendar-days',
+  'i-lucide:house',
+  'i-lucide:git-compare',
+  'i-lucide:settings',
+  'i-lucide:info',
+  'i-lucide:notebook-pen',
+  'i-lucide:shield-check',
+  'i-custom:a11y',
+  'i-lucide:terminal',
+  'i-lucide:at-sign',
+  'i-lucide:file-text',
+  'i-simple-icons:github',
+  'i-simple-icons:bluesky',
+  'i-lucide:message-circle',
+  'i-lucide:monitor',
+  'i-lucide:sun',
+  'i-lucide:moon',
+  'i-lucide:palette',
+  'i-lucide:swatch-book',
+  'i-lucide:boxes',
+  'i-lucide:users',
+  'i-lucide:user',
+  'i-lucide:package',
+  'i-lucide:code',
+  'i-lucide:tag',
+]
+
 export default defineConfig({
+  // XXX(serhalp): Fix this properly before merging PR. Temporary solution.
+  safelist: commandPaletteIconClasses,
   presets: [
     presetWind4(),
     presetIcons({

From 2667fdae5012e692f822f906094e033f8999a695 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sat, 21 Mar 2026 22:41:03 -0400
Subject: [PATCH 2/3] feat: add command palette download tarball action

---
 app/components/Package/DownloadButton.vue     | 36 +++-------------
 .../useCommandPalettePackageCommands.ts       | 23 ++++++++++
 app/pages/package/[[org]]/[name].vue          |  1 +
 app/types/command-palette.ts                  |  1 +
 app/utils/package-download.ts                 | 42 +++++++++++++++++++
 i18n/locales/en.json                          |  3 +-
 i18n/locales/fr-FR.json                       |  3 +-
 i18n/schema.json                              |  3 ++
 .../use-command-palette-commands.spec.ts      |  2 +
 9 files changed, 81 insertions(+), 33 deletions(-)
 create mode 100644 app/utils/package-download.ts

diff --git a/app/components/Package/DownloadButton.vue b/app/components/Package/DownloadButton.vue
index 9ad1e47cd..dd4a24660 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/composables/useCommandPalettePackageCommands.ts b/app/composables/useCommandPalettePackageCommands.ts
index 1670ebd51..56047bf13 100644
--- a/app/composables/useCommandPalettePackageCommands.ts
+++ b/app/composables/useCommandPalettePackageCommands.ts
@@ -3,6 +3,7 @@ import type {
   CommandPaletteContextCommandInput,
   CommandPalettePackageContext,
 } from '~/types/command-palette'
+import { downloadPackageTarball } from '~/utils/package-download'
 
 function activeLabel(isCurrentRoute: boolean, label: string) {
   return isCurrentRoute ? label : null
@@ -104,6 +105,28 @@ export function useCommandPalettePackageCommands(
         },
       ]
 
+      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
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 7c4c3d5ce..699aad386 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -212,6 +212,7 @@ const commandPalettePackageContext = computed(() => {
     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,
   }
 })
 
diff --git a/app/types/command-palette.ts b/app/types/command-palette.ts
index d3434a254..197870768 100644
--- a/app/types/command-palette.ts
+++ b/app/types/command-palette.ts
@@ -73,4 +73,5 @@ export interface CommandPalettePackageContext {
   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 000000000..e3c5d34cb
--- /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/i18n/locales/en.json b/i18n/locales/en.json
index 4aa059145..21b0be531 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -146,7 +146,8 @@
       "docs": "Docs",
       "code": "Code",
       "diff": "Diff",
-      "compare": "Compare this package"
+      "compare": "Compare this package",
+      "download": "Download tarball"
     },
     "package_actions": {
       "copy_run": "Copy run command"
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 3eaa382df..0373fc7ff 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -146,7 +146,8 @@
       "docs": "Doc",
       "code": "Code",
       "diff": "Diff",
-      "compare": "Comparer ce paquet"
+      "compare": "Comparer ce paquet",
+      "download": "Télécharger le tarball"
     },
     "package_actions": {
       "copy_run": "Copier la commande d'exécution"
diff --git a/i18n/schema.json b/i18n/schema.json
index 8b0c5afac..53e9a60f1 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -444,6 +444,9 @@
             },
             "compare": {
               "type": "string"
+            },
+            "download": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/test/nuxt/composables/use-command-palette-commands.spec.ts b/test/nuxt/composables/use-command-palette-commands.spec.ts
index 7d7586e89..d77974293 100644
--- a/test/nuxt/composables/use-command-palette-commands.spec.ts
+++ b/test/nuxt/composables/use-command-palette-commands.spec.ts
@@ -150,6 +150,7 @@ describe('useCommandPaletteCommands', () => {
         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',
       },
     })
 
@@ -163,6 +164,7 @@ describe('useCommandPaletteCommands', () => {
       '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')

From 49684688370354e2c1cfb51b84c6075d1750085a Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sat, 21 Mar 2026 23:12:10 -0400
Subject: [PATCH 3/3] refactor: properly ensure cmd palette icons are included

---
 .../useCommandPaletteGlobalCommands.ts        |  1 +
 .../useCommandPalettePackageCommands.ts       |  1 +
 .../useCommandPaletteVersionCommands.ts       |  1 +
 uno.config.ts                                 | 32 -------------------
 4 files changed, 3 insertions(+), 32 deletions(-)

diff --git a/app/composables/useCommandPaletteGlobalCommands.ts b/app/composables/useCommandPaletteGlobalCommands.ts
index 5e071e25d..2b8ad91f4 100644
--- a/app/composables/useCommandPaletteGlobalCommands.ts
+++ b/app/composables/useCommandPaletteGlobalCommands.ts
@@ -1,3 +1,4 @@
+// @unocss-include
 import type { CommandPaletteCommand } from '~/types/command-palette'
 import {
   DISCORD_BUILDERS_URL,
diff --git a/app/composables/useCommandPalettePackageCommands.ts b/app/composables/useCommandPalettePackageCommands.ts
index 56047bf13..4f3098c38 100644
--- a/app/composables/useCommandPalettePackageCommands.ts
+++ b/app/composables/useCommandPalettePackageCommands.ts
@@ -1,3 +1,4 @@
+// @unocss-include
 import type { MaybeRefOrGetter } from 'vue'
 import type {
   CommandPaletteContextCommandInput,
diff --git a/app/composables/useCommandPaletteVersionCommands.ts b/app/composables/useCommandPaletteVersionCommands.ts
index 0e895d9bf..ecc676e50 100644
--- a/app/composables/useCommandPaletteVersionCommands.ts
+++ b/app/composables/useCommandPaletteVersionCommands.ts
@@ -1,3 +1,4 @@
+// @unocss-include
 import type { MaybeRefOrGetter } from 'vue'
 import type {
   CommandPaletteCommand,
diff --git a/uno.config.ts b/uno.config.ts
index 05974c99d..fae3f4578 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -21,39 +21,7 @@ const customIcons = {
     '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="6" r="1"/><path d="m9 18 3-5 3 5"/><path d="m8 10 8 0"/><path d="M12 10v4"/></svg>',
 }
 
-const commandPaletteIconClasses = [
-  'i-lucide:search',
-  'i-lucide:command',
-  'i-lucide:calendar-days',
-  'i-lucide:house',
-  'i-lucide:git-compare',
-  'i-lucide:settings',
-  'i-lucide:info',
-  'i-lucide:notebook-pen',
-  'i-lucide:shield-check',
-  'i-custom:a11y',
-  'i-lucide:terminal',
-  'i-lucide:at-sign',
-  'i-lucide:file-text',
-  'i-simple-icons:github',
-  'i-simple-icons:bluesky',
-  'i-lucide:message-circle',
-  'i-lucide:monitor',
-  'i-lucide:sun',
-  'i-lucide:moon',
-  'i-lucide:palette',
-  'i-lucide:swatch-book',
-  'i-lucide:boxes',
-  'i-lucide:users',
-  'i-lucide:user',
-  'i-lucide:package',
-  'i-lucide:code',
-  'i-lucide:tag',
-]
-
 export default defineConfig({
-  // XXX(serhalp): Fix this properly before merging PR. Temporary solution.
-  safelist: commandPaletteIconClasses,
   presets: [
     presetWind4(),
     presetIcons({