From 9d520258e5e533c08f19a727b08210b5cd13d223 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 3 Apr 2026 20:11:21 +0100
Subject: [PATCH 1/5] chore: refactor header shortcuts

Just a simplification since these are getting lengthy and repetitive
already.
---
 app/components/Package/Header.vue | 72 +++++++++----------------------
 1 file changed, 20 insertions(+), 52 deletions(-)

diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index 7cf6b4c8bc..ebc187e3ef 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -72,7 +72,6 @@ function hasProvenance(version: PackumentVersion | null): boolean {
   return !!(version.dist as { attestations?: unknown }).attestations
 }
 
-const router = useRouter()
 // Docs URL: use our generated API docs
 const docsLink = computed(() => {
   if (!props.resolvedVersion) return null
@@ -122,57 +121,26 @@ const diffLink = computed((): RouteLocationRaw | null => {
 
 const keyboardShortcuts = useKeyboardShortcuts()
 
-onKeyStroke(
-  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, '.') && !isEditableElement(e.target),
-  e => {
-    if (codeLink.value === null) return
-    e.preventDefault()
-
-    navigateTo(codeLink.value)
-  },
-  { dedupe: true },
-)
-
-onKeyStroke(
-  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'm') && !isEditableElement(e.target),
-  e => {
-    if (mainLink.value === null) return
-    e.preventDefault()
-
-    navigateTo(mainLink.value)
-  },
-  { dedupe: true },
-)
-
-onKeyStroke(
-  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'd') && !isEditableElement(e.target),
-  e => {
-    if (!docsLink.value) return
-    e.preventDefault()
-    navigateTo(docsLink.value)
-  },
-  { dedupe: true },
-)
-
-onKeyStroke(
-  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'c') && !isEditableElement(e.target),
-  e => {
-    if (!props.pkg) return
-    e.preventDefault()
-    router.push({ name: 'compare', query: { packages: props.pkg.name } })
-  },
-  { dedupe: true },
-)
-
-onKeyStroke(
-  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'f') && !isEditableElement(e.target),
-  e => {
-    if (diffLink.value === null) return
-    e.preventDefault()
-    navigateTo(diffLink.value)
-  },
-  { dedupe: true },
-)
+const shortcuts: [string, () => RouteLocationRaw | null | false | undefined][] = [
+  ['.', () => codeLink.value],
+  ['m', () => mainLink.value],
+  ['d', () => docsLink.value],
+  ['c', () => props.pkg && { name: 'compare' as const, query: { packages: props.pkg.name } }],
+  ['f', () => diffLink.value],
+]
+
+for (const [key, getTarget] of shortcuts) {
+  onKeyStroke(
+    e => keyboardShortcuts.value && isKeyWithoutModifiers(e, key) && !isEditableElement(e.target),
+    e => {
+      const target = getTarget()
+      if (!target) return
+      e.preventDefault()
+      navigateTo(target)
+    },
+    { dedupe: true },
+  )
+}
 
 const fundingUrl = computed(() => {
   let funding = props.displayVersion?.funding

From dc6195e1567e97718ad2aef201465ff39ead780d Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 3 Apr 2026 22:53:33 +0100
Subject: [PATCH 2/5] feat: try extract shortcuts

---
 app/app.vue                       |  2 ++
 app/components/AppHeader.vue      | 22 +++------------
 app/components/Package/Header.vue | 31 +++++---------------
 app/composables/useShortcuts.ts   | 47 +++++++++++++++++++++++++++++++
 4 files changed, 60 insertions(+), 42 deletions(-)
 create mode 100644 app/composables/useShortcuts.ts

diff --git a/app/app.vue b/app/app.vue
index 5916e3e328..26c409c88f 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -50,6 +50,8 @@ if (import.meta.server) {
 const keyboardShortcuts = useKeyboardShortcuts()
 const { settings } = useSettings()
 
+initKeyShortcuts()
+
 onKeyDown(
   '/',
   e => {
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 1ccfc31d40..3c9b520aff 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { LinkBase } from '#components'
 import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
-import { isEditableElement } from '~/utils/input'
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
-const keyboardShortcuts = useKeyboardShortcuts()
 const discord = useDiscordLink()
 
 withDefaults(
@@ -200,22 +198,10 @@ function handleSearchFocus() {
   showFullSearch.value = true
 }
 
-onKeyStroke(
-  e => {
-    if (!keyboardShortcuts.value || isEditableElement(e.target)) {
-      return
-    }
-
-    for (const link of desktopLinks.value) {
-      if (link.to && link.keyshortcut && isKeyWithoutModifiers(e, link.keyshortcut)) {
-        e.preventDefault()
-        navigateTo(link.to)
-        break
-      }
-    }
-  },
-  { dedupe: true },
-)
+useShortcuts({
+  c: () => ({ name: 'compare' }),
+  ',': () => ({ name: 'settings' }),
+})
 </script>
 
 <template>
diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index ebc187e3ef..9d6caf2dd2 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { RouteLocationRaw } from 'vue-router'
 import { SCROLL_TO_TOP_THRESHOLD } from '~/composables/useScrollToTop'
-import { isEditableElement } from '~/utils/input'
 
 const props = defineProps<{
   pkg?: Pick<SlimPackument, 'name' | 'versions' | 'dist-tags'> | null
@@ -119,28 +117,13 @@ const diffLink = computed((): RouteLocationRaw | null => {
   return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
 })
 
-const keyboardShortcuts = useKeyboardShortcuts()
-
-const shortcuts: [string, () => RouteLocationRaw | null | false | undefined][] = [
-  ['.', () => codeLink.value],
-  ['m', () => mainLink.value],
-  ['d', () => docsLink.value],
-  ['c', () => props.pkg && { name: 'compare' as const, query: { packages: props.pkg.name } }],
-  ['f', () => diffLink.value],
-]
-
-for (const [key, getTarget] of shortcuts) {
-  onKeyStroke(
-    e => keyboardShortcuts.value && isKeyWithoutModifiers(e, key) && !isEditableElement(e.target),
-    e => {
-      const target = getTarget()
-      if (!target) return
-      e.preventDefault()
-      navigateTo(target)
-    },
-    { dedupe: true },
-  )
-}
+useShortcuts({
+  '.': () => codeLink.value,
+  'm': () => mainLink.value,
+  'd': () => docsLink.value,
+  'c': () => props.pkg && { name: 'compare' as const, query: { packages: props.pkg.name } },
+  'f': () => diffLink.value,
+})
 
 const fundingUrl = computed(() => {
   let funding = props.displayVersion?.funding
diff --git a/app/composables/useShortcuts.ts b/app/composables/useShortcuts.ts
new file mode 100644
index 0000000000..818a2ec43f
--- /dev/null
+++ b/app/composables/useShortcuts.ts
@@ -0,0 +1,47 @@
+import type { RouteLocationRaw } from 'vue-router'
+import { isEditableElement, isKeyWithoutModifiers } from '~/utils/input'
+
+type ShortcutTarget = RouteLocationRaw | null | false | undefined
+type ShortcutTargetFactory = () => ShortcutTarget
+
+const registry = new Map<string, ShortcutTargetFactory[]>()
+
+export function initKeyShortcuts() {
+  const keyboardShortcuts = useKeyboardShortcuts()
+
+  onKeyStroke(
+    e => !e.repeat && keyboardShortcuts.value && !isEditableElement(e.target),
+    e => {
+      for (const [key, stack] of registry) {
+        if (!isKeyWithoutModifiers(e, key)) continue
+        const getTarget = stack.at(-1)
+        if (!getTarget) continue
+        const target = getTarget()
+        if (!target) return
+        e.preventDefault()
+        navigateTo(target)
+        return
+      }
+    },
+  )
+}
+
+export function useShortcuts(map: Record<string, () => ShortcutTarget>) {
+  if (!import.meta.client) return
+
+  for (const [key, fn] of Object.entries(map)) {
+    const entry = registry.get(key) ?? []
+    if (entry.includes(fn)) continue
+    entry.push(fn)
+    registry.set(key, entry)
+  }
+
+  onScopeDispose(() => {
+    for (const [key, fn] of Object.entries(map)) {
+      const stack = registry.get(key)
+      if (!stack) continue
+      const idx = stack.lastIndexOf(fn)
+      if (idx !== -1) stack.splice(idx, 1)
+    }
+  })
+}

From 3b214f881fcf8200e3d7729b9046f713e6f7d678 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 3 Apr 2026 21:57:32 +0000
Subject: [PATCH 3/5] [autofix.ci] apply automated fixes

---
 app/components/AppHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 3c9b520aff..7d0ffeda71 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -199,7 +199,7 @@ function handleSearchFocus() {
 }
 
 useShortcuts({
-  c: () => ({ name: 'compare' }),
+  'c': () => ({ name: 'compare' }),
   ',': () => ({ name: 'settings' }),
 })
 </script>

From b7250d1401f6f33adfd15ab8fff164644c6be9f3 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Sat, 4 Apr 2026 19:04:33 +0100
Subject: [PATCH 4/5] chore: add missing import

---
 app/components/Package/Header.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index 9d6caf2dd2..e0aeab97be 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
 import { SCROLL_TO_TOP_THRESHOLD } from '~/composables/useScrollToTop'
 
 const props = defineProps<{

From b369d3cc6ad92f32418dc81c6295fdd3d5e97ebd Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Sat, 4 Apr 2026 20:03:18 +0100
Subject: [PATCH 5/5] chore: remove unused `false` type

---
 app/composables/useShortcuts.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/composables/useShortcuts.ts b/app/composables/useShortcuts.ts
index 818a2ec43f..c1ac793265 100644
--- a/app/composables/useShortcuts.ts
+++ b/app/composables/useShortcuts.ts
@@ -1,7 +1,7 @@
 import type { RouteLocationRaw } from 'vue-router'
 import { isEditableElement, isKeyWithoutModifiers } from '~/utils/input'
 
-type ShortcutTarget = RouteLocationRaw | null | false | undefined
+type ShortcutTarget = RouteLocationRaw | null | undefined
 type ShortcutTargetFactory = () => ShortcutTarget
 
 const registry = new Map<string, ShortcutTargetFactory[]>()