perf: use focus to navigate search results (#587)

app/components/PackageCard.vue

···
   /** Whether to show the publisher username */
   showPublisher?: boolean
   prefetch?: boolean
-  selected?: boolean
   index?: number
   /** Search query for highlighting exact matches */
   searchQuery?: string
···
   const name = props.result.package.name.toLowerCase()
   return query === name
 })
-
-const emit = defineEmits<{
-  focus: [index: number]
-}>()
 </script>
 
 <template>
   <article
-    class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+    class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
-      'bg-bg-muted border-border-hover': selected,
       'border-accent/30 bg-accent/5': isExactMatch,
     }"
   >
···
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
           class="decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
           :data-result-index="index"
-          @focus="index != null && emit('focus', index)"
-          @mouseenter="index != null && emit('focus', index)"
           >{{ result.package.name }}</NuxtLink
         >
         <span

app/components/PackageList.vue

···
   pageSize?: PageSize
   /** Initial page to scroll to (1-indexed) */
   initialPage?: number
-  /** Selected result index (for keyboard navigation) */
-  selectedIndex?: number
   /** Search query for highlighting exact matches */
   searchQuery?: string
   /** View mode: cards or table */
···
   'loadMore': []
   /** Emitted when the visible page changes */
   'pageChange': [page: number]
-  /** Emitted when a result is hovered/focused */
-  'select': [index: number]
   /** Emitted when sort option changes (table view) */
   'update:sortOption': [option: SortOption]
   /** Emitted when a keyword is clicked */
···
         :results="displayedResults"
         :columns="columns"
         v-model:sort-option="sortOption"
-        :selected-index="selectedIndex"
         :is-loading="isLoading"
-        @select="emit('select', $event)"
         @click-keyword="emit('clickKeyword', $event)"
       />
     </template>
···
                 :result="item as NpmSearchResult"
                 :heading-level="headingLevel"
                 :show-publisher="showPublisher"
-                :selected="index === (selectedIndex ?? -1)"
                 :index="index"
                 :search-query="searchQuery"
                 class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
                 :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
-                @focus="emit('select', $event)"
               />
             </div>
           </template>
···
                   :result="item"
                   :heading-level="headingLevel"
                   :show-publisher="showPublisher"
-                  :selected="index === (selectedIndex ?? -1)"
                   :index="index"
                   :search-query="searchQuery"
                 />
···
             :result="item"
             :heading-level="headingLevel"
             :show-publisher="showPublisher"
-            :selected="index === (selectedIndex ?? -1)"
             :index="index"
             :search-query="searchQuery"
             class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
             :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
-            @focus="emit('select', $event)"
           />
         </li>
       </ol>

app/components/PackageTable.vue

···
 const props = defineProps<{
   results: NpmSearchResult[]
   columns: ColumnConfig[]
-  selectedIndex?: number
   isLoading?: boolean
 }>()
 
 const sortOption = defineModel<SortOption>('sortOption')
 
 const emit = defineEmits<{
-  select: [index: number]
   clickKeyword: [keyword: string]
 }>()
 
···
             :key="result.package.name"
             :result="result"
             :columns="columns"
-            :selected="selectedIndex === index"
             :index="index"
-            @focus="emit('select', index)"
             @click-keyword="emit('clickKeyword', $event)"
           />
         </template>

app/components/PackageTableRow.vue

···
 const props = defineProps<{
   result: NpmSearchResult
   columns: ColumnConfig[]
-  selected?: boolean
   index?: number
 }>()
 
 const emit = defineEmits<{
-  focus: []
   clickKeyword: [keyword: string]
 }>()
 
···
 
 <template>
   <tr
-    class="border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
-    :class="{ 'bg-bg-muted': selected }"
+    class="border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
     tabindex="0"
-    @focus="emit('focus')"
+    :data-result-index="index"
   >
     <!-- Name (always visible) -->
     <td class="py-2 px-3">

app/components/SearchSuggestionCard.vue

···
   type: 'user' | 'org'
   /** The name (username or org name) */
   name: string
-  /** Whether this suggestion is currently selected (keyboard nav) */
-  selected?: boolean
   /** Whether this is an exact match for the query */
   isExactMatch?: boolean
   /** Index for keyboard navigation */
   index?: number
-}>()
-
-const emit = defineEmits<{
-  focus: [index: number]
 }>()
 </script>
 
 <template>
   <article
-    class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+    class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
-      'bg-bg-muted border-border-hover': selected,
       'border-accent/30 bg-accent/5': isExactMatch,
     }"
   >
···
       :to="type === 'user' ? `/~${name}` : `/@${name}`"
       :data-suggestion-index="index"
       class="flex items-center gap-4 focus-visible:outline-none after:content-[''] after:absolute after:inset-0"
-      @focus="index != null && emit('focus', index)"
-      @mouseenter="index != null && emit('focus', index)"
     >
       <!-- Avatar placeholder -->
       <div

app/pages/search.vue

···
 // The actual search query (from URL, used for API calls)
 const query = computed(() => (route.query.q as string) ?? '')
 
-const selectedIndex = shallowRef(0)
 const packageListRef = useTemplateRef('packageListRef')
 
 // Track if page just loaded (for hiding "Searching..." during view transition)
···
 watch(query, () => {
   currentPage.value = 1
   hasInteracted.value = true
-})
-
-// Reset selection when query changes (new search)
-watch(query, () => {
-  selectedIndex.value = 0
 })
 
 // Check if current query could be a valid package name
···
   return null
 })
 
-/**
- * Selection uses negative indices for suggestions, positive for packages
- * -2 = first suggestion, -1 = second suggestion, 0+ = package indices
- */
 const suggestionCount = computed(() => validatedSuggestions.value.length)
 const totalSelectableCount = computed(() => suggestionCount.value + resultCount.value)
 
-/** Unified selected index: negative for suggestions, 0+ for packages */
-const unifiedSelectedIndex = shallowRef(0)
-const userHasNavigated = shallowRef(false)
-
-/** Convert unified index to suggestion index (0-based) or null */
-function toSuggestionIndex(unified: number): number | null {
-  if (unified < 0 && unified >= -suggestionCount.value) {
-    return suggestionCount.value + unified
-  }
-  return null
-}
-
-/** Convert unified index to package index or null */
-function toPackageIndex(unified: number): number | null {
-  if (unified >= 0 && unified < resultCount.value) {
-    return unified
-  }
-  return null
-}
-
-/** Clamp unified index to valid range */
-function clampUnifiedIndex(next: number): number {
-  const min = -suggestionCount.value
-  const max = Math.max(0, resultCount.value - 1)
-  if (totalSelectableCount.value <= 0) return 0
-  return Math.max(min, Math.min(max, next))
+/**
+ * Get all focusable result elements in DOM order (suggestions first, then packages)
+ */
+function getFocusableElements(): HTMLElement[] {
+  const suggestions = Array.from(
+    document.querySelectorAll<HTMLElement>('[data-suggestion-index]'),
+  ).sort((a, b) => {
+    const aIdx = Number.parseInt(a.dataset.suggestionIndex ?? '0', 10)
+    const bIdx = Number.parseInt(b.dataset.suggestionIndex ?? '0', 10)
+    return aIdx - bIdx
+  })
+  const packages = Array.from(document.querySelectorAll<HTMLElement>('[data-result-index]')).sort(
+    (a, b) => {
+      const aIdx = Number.parseInt(a.dataset.resultIndex ?? '0', 10)
+      const bIdx = Number.parseInt(b.dataset.resultIndex ?? '0', 10)
+      return aIdx - bIdx
+    },
+  )
+  return [...suggestions, ...packages]
 }
 
-// Keep legacy selectedIndex in sync for PackageList
-watch(unifiedSelectedIndex, unified => {
-  const pkgIndex = toPackageIndex(unified)
-  selectedIndex.value = pkgIndex ?? -1
-})
-
-// Initialize selection to exact match when results load
-watch(
-  [visibleResults, validatedSuggestions, exactMatchType],
-  () => {
-    if (userHasNavigated.value) {
-      unifiedSelectedIndex.value = clampUnifiedIndex(unifiedSelectedIndex.value)
-      return
-    }
-
-    if (exactMatchType.value === 'package') {
-      // Find the exact match package index
-      const q = query.value.trim().toLowerCase()
-      const idx =
-        visibleResults.value?.objects.findIndex(r => r.package.name.toLowerCase() === q) ?? -1
-      if (idx >= 0) {
-        unifiedSelectedIndex.value = idx
-        return
-      }
-    }
-    if (exactMatchType.value === 'org') {
-      // Select the org suggestion
-      const orgIdx = validatedSuggestions.value.findIndex(s => s.type === 'org')
-      if (orgIdx >= 0) {
-        unifiedSelectedIndex.value = -(suggestionCount.value - orgIdx)
-        return
-      }
-    }
-    if (exactMatchType.value === 'user') {
-      // Select the user suggestion
-      const userIdx = validatedSuggestions.value.findIndex(s => s.type === 'user')
-      if (userIdx >= 0) {
-        unifiedSelectedIndex.value = -(suggestionCount.value - userIdx)
-        return
-      }
-    }
-    // Default to first item (first suggestion if any, else first package)
-    unifiedSelectedIndex.value = suggestionCount.value > 0 ? -suggestionCount.value : 0
-  },
-  { immediate: true },
-)
-
-// Reset selection and navigation flag when query changes
-watch(query, () => {
-  userHasNavigated.value = false
-  // Will be re-initialized by the watch above when results load
-  unifiedSelectedIndex.value = 0
-})
-
-function scrollToSelectedItem() {
-  const pkgIndex = toPackageIndex(unifiedSelectedIndex.value)
-  if (pkgIndex !== null) {
-    packageListRef.value?.scrollToIndex(pkgIndex)
-  }
+/**
+ * Focus an element and scroll it into view
+ */
+function focusElement(el: HTMLElement) {
+  el.focus()
+  el.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
 }
 
 function handleResultsKeydown(e: KeyboardEvent) {
   if (totalSelectableCount.value <= 0) return
 
+  const elements = getFocusableElements()
+  if (elements.length === 0) return
+
+  const currentIndex = elements.findIndex(el => el === document.activeElement)
+
   if (e.key === 'ArrowDown') {
     e.preventDefault()
-    userHasNavigated.value = true
-    unifiedSelectedIndex.value = clampUnifiedIndex(unifiedSelectedIndex.value + 1)
-    scrollToSelectedItem()
+    const nextIndex = currentIndex < 0 ? 0 : Math.min(currentIndex + 1, elements.length - 1)
+    const el = elements[nextIndex]
+    if (el) focusElement(el)
     return
   }
 
   if (e.key === 'ArrowUp') {
     e.preventDefault()
-    userHasNavigated.value = true
-    unifiedSelectedIndex.value = clampUnifiedIndex(unifiedSelectedIndex.value - 1)
-    scrollToSelectedItem()
+    const nextIndex = currentIndex < 0 ? 0 : Math.max(currentIndex - 1, 0)
+    const el = elements[nextIndex]
+    if (el) focusElement(el)
     return
   }
 
   if (e.key === 'Enter') {
-    if (!resultsMatchQuery.value) return
-
-    const suggIdx = toSuggestionIndex(unifiedSelectedIndex.value)
-    const pkgIdx = toPackageIndex(unifiedSelectedIndex.value)
-
-    if (suggIdx !== null) {
-      const el = document.querySelector<HTMLElement>(`[data-suggestion-index="${suggIdx}"]`)
-      if (el) {
-        e.preventDefault()
-        el.click()
-      }
-    } else if (pkgIdx !== null) {
-      const el = document.querySelector<HTMLElement>(`[data-result-index="${pkgIdx}"]`)
-      if (el) {
+    // Browser handles Enter on focused links naturally, but handle for non-link elements
+    if (document.activeElement && elements.includes(document.activeElement as HTMLElement)) {
+      const el = document.activeElement as HTMLElement
+      // Only prevent default and click if it's not already a link (links handle Enter natively)
+      if (el.tagName !== 'A') {
         e.preventDefault()
         el.click()
       }
···
 
 onKeyDown(['ArrowDown', 'ArrowUp', 'Enter'], handleResultsKeydown)
 
-function handleSuggestionSelect(index: number) {
-  // Convert suggestion index to unified index
-  unifiedSelectedIndex.value = -(suggestionCount.value - index)
-}
-
-function handlePackageSelect(index: number) {
-  if (index < 0) return
-  unifiedSelectedIndex.value = index
-}
-
 useSeoMeta({
   title: () => (query.value ? `Search: ${query.value} - npmx` : 'Search Packages - npmx'),
 })
···
               :type="suggestion.type"
               :name="suggestion.name"
               :index="idx"
-              :selected="toSuggestionIndex(unifiedSelectedIndex) === idx"
               :is-exact-match="
                 (exactMatchType === 'org' && suggestion.type === 'org') ||
                 (exactMatchType === 'user' && suggestion.type === 'user')
               "
-              @focus="handleSuggestionSelect"
             />
           </div>
 
···
                 :type="suggestion.type"
                 :name="suggestion.name"
                 :index="idx"
-                :selected="toSuggestionIndex(unifiedSelectedIndex) === idx"
                 :is-exact-match="
                   (exactMatchType === 'org' && suggestion.type === 'org') ||
                   (exactMatchType === 'user' && suggestion.type === 'user')
                 "
-                @focus="handleSuggestionSelect"
               />
             </div>
 
···
             v-if="displayResults.length > 0"
             ref="packageListRef"
             :results="displayResults"
-            :selected-index="selectedIndex"
             :search-query="query"
             heading-level="h2"
             show-publisher
···
             :current-page="currentPage"
             @load-more="loadMore"
             @page-change="handlePageChange"
-            @select="handlePackageSelect"
             @click-keyword="toggleKeyword"
           />