search.vue

<script setup lang="ts">
import type { FilterChip, SortKey } from '#shared/types/preferences'
import { parseSortOption, PROVIDER_SORT_KEYS } from '#shared/types/preferences'
import { onKeyDown } from '@vueuse/core'
import { debounce } from 'perfect-debounce'
import { isValidNewPackageName } from '~/utils/package-name'
import { isPlatformSpecificPackage } from '~/utils/platform-packages'
import { normalizeSearchParam } from '#shared/utils/url'

definePageMeta({
  preserveScrollOnQuery: true,
})

const route = useRoute()

const { selectedPackages, showSelectionView, openSelectionView, closeSelectionView } =
  usePackageSelection()

watch(selectedPackages, packages => {
  if (packages.length === 0) {
    closeSelectionView()
  }
})

// Preferences (persisted to localStorage)
const {
  viewMode,
  paginationMode,
  pageSize: preferredPageSize,
  columns,
  toggleColumn,
  resetColumns,
} = usePackageListPreferences()

// Debounced URL update for page (less aggressive to avoid too many URL changes)
//Use History API directly to update URL without triggering Router's scroll-to-top
const updateUrlPage = debounce((page: number) => {
  const url = new URL(window.location.href)
  if (page > 1) {
    url.searchParams.set('page', page.toString())
  } else {
    url.searchParams.delete('page')
  }
  // This updates the address bar "silently"
  window.history.replaceState(window.history.state, '', url)
}, 500)

const {
  model: searchQuery,
  committedModel: committedQuery,
  provider: searchProvider,
} = useGlobalSearch()
const query = computed(() => searchQuery.value)

// Track if page just loaded (for hiding "Searching..." during view transition)
const hasInteracted = shallowRef(false)
onMounted(() => {
  // Small delay to let view transition complete
  setTimeout(() => {
    hasInteracted.value = true
  }, 300)
})

// Infinite scroll / pagination state
const pageSize = 25
const currentPage = shallowRef(1)

// Get initial page from URL (for scroll restoration on reload)
const initialPage = computed(() => {
  const p = Number.parseInt(normalizeSearchParam(route.query.page), 10)
  return Number.isNaN(p) ? 1 : Math.max(1, p)
})

// Initialize current page from URL on mount
onMounted(() => {
  if (initialPage.value > 1) {
    currentPage.value = initialPage.value
  }
})

// Results to display (directly from incremental search)
const rawVisibleResults = computed(() => results.value)

// Settings for platform package filtering
const { settings } = useSettings()

/**
 * Reorder results to put exact package name match at the top,
 * and optionally filter out platform-specific packages.
 */
const visibleResults = computed(() => {
  const raw = rawVisibleResults.value
  if (!raw) return raw

  let objects = raw.objects

  // Filter out platform-specific packages if setting is enabled
  if (settings.value.hidePlatformPackages) {
    objects = objects.filter(r => !isPlatformSpecificPackage(r.package.name))
  }

  const q = query.value.trim().toLowerCase()
  if (!q) {
    return objects === raw.objects ? raw : { ...raw, objects }
  }

  // Find exact match index
  const exactIdx = objects.findIndex(r => r.package.name.toLowerCase() === q)
  if (exactIdx <= 0) {
    return objects === raw.objects ? raw : { ...raw, objects }
  }

  // Move exact match to top
  const reordered = [...objects]
  const [exactMatch] = reordered.splice(exactIdx, 1)
  if (exactMatch) {
    reordered.unshift(exactMatch)
  }

  return {
    ...raw,
    objects: reordered,
  }
})

// Use structured filters for client-side refinement of search results
const resultsArray = computed(() => visibleResults.value?.objects ?? [])

// All possible non-relevance sort keys
const ALL_SORT_KEYS: SortKey[] = [
  'downloads-week',
  'downloads-day',
  'downloads-month',
  'downloads-year',
  'updated',
  'name',
]

// Disable sort keys the current provider can't meaningfully sort by
const disabledSortKeys = computed<SortKey[]>(() => {
  const supported = PROVIDER_SORT_KEYS[searchProvider.value]
  return ALL_SORT_KEYS.filter(k => !supported.has(k))
})

// Minimal structured filters usage for search context (no client-side filtering)
const {
  filters,
  sortOption,
  availableKeywords,
  activeFilters,
  setTextFilter,
  setSearchScope,
  setDownloadRange,
  setSecurity,
  setUpdatedWithin,
  toggleKeyword,
  clearFilter,
  clearAllFilters,
} = useStructuredFilters({
  packages: resultsArray,
  initialSort: 'relevance-desc', // Default to search relevance
  searchQueryModel: searchQuery,
})

const isRelevanceSort = computed(
  () => sortOption.value === 'relevance-desc' || sortOption.value === 'relevance-asc',
)

// Maximum eager-load sizes per provider for client-side sorting.
// Algolia supports up to 1000 with offset/length pagination.
// npm supports pagination via `from` parameter (no hard cap, but diminishing relevance).
const EAGER_LOAD_SIZE = { algolia: 500, npm: 500 } as const

// Calculate how many results we need based on current page and preferred page size
const requestedSize = computed(() => {
  const base = Math.max(pageSize, currentPage.value * preferredPageSize.value)
  // When sorting by something other than relevance, fetch a large batch
  // so client-side sorting operates on a meaningful pool of matching results
  if (!isRelevanceSort.value) {
    const cap = EAGER_LOAD_SIZE[searchProvider.value]
    return Math.max(base, cap)
  }
  return base
})

// Reset to relevance sort when switching to a provider that doesn't support the current sort key
watch(searchProvider, provider => {
  const { key } = parseSortOption(sortOption.value)
  const supported = PROVIDER_SORT_KEYS[provider]
  if (!supported.has(key)) {
    sortOption.value = 'relevance-desc'
  }
})

// Use incremental search with client-side caching + org/user suggestions
// committedQuery only updates on Enter when instant search is off, otherwise tracks query as user types
const {
  data: results,
  status,
  isLoadingMore,
  hasMore,
  fetchMore,
  isRateLimited,
  suggestions: validatedSuggestions,
  packageAvailability,
} = useSearch(
  committedQuery,
  searchProvider,
  () => ({
    size: requestedSize.value,
  }),
  { suggestions: true },
)

// Client-side sorted results for display
// The search API already handles text filtering, so we only need to sort.
const displayResults = computed(() => {
  if (isRelevanceSort.value) {
    return resultsArray.value
  }

  // Sort the fetched results client-side — neither Algolia nor npm support
  // arbitrary sort orders server-side, so we fetch a large batch and sort here
  const { key, direction } = parseSortOption(sortOption.value)
  const multiplier = direction === 'asc' ? 1 : -1

  return [...resultsArray.value].sort((a, b) => {
    let diff: number
    switch (key) {
      case 'downloads-week':
      case 'downloads-day':
      case 'downloads-month':
      case 'downloads-year':
        diff = (a.downloads?.weekly ?? 0) - (b.downloads?.weekly ?? 0)
        break
      case 'updated':
        diff = Date.parse(a.package.date) - Date.parse(b.package.date)
        break
      case 'name':
        diff = a.package.name.localeCompare(b.package.name)
        break
      default:
        diff = 0
    }
    return diff * multiplier
  })
})

const resultCount = computed(() => displayResults.value.length)

/**
 * The effective total for display and pagination purposes.
 * When sorting by non-relevance, we're working with a fetched subset (e.g. 250),
 * not the full Algolia total (e.g. 92,324). Show the actual working set size.
 */
const effectiveTotal = computed(() => {
  if (isRelevanceSort.value) {
    return visibleResults.value?.total ?? 0
  }
  // When sorting, the total is the number of results we actually fetched and sorted
  return displayResults.value.length
})

// Handle filter chip removal
function handleClearFilter(chip: FilterChip) {
  clearFilter(chip)
}

// Should we show the loading spinner?
const showSearching = computed(() => {
  // Don't show during initial page load (view transition)
  if (!hasInteracted.value) return false
  // Show if pending and no results yet
  return status.value === 'pending' && displayResults.value.length === 0
})

// Load more when triggered by infinite scroll
async function loadMore() {
  if (isLoadingMore.value || !hasMore.value) return
  // Increase requested size to trigger fetch
  currentPage.value++
  await fetchMore(requestedSize.value)
}
onBeforeUnmount(() => {
  updateUrlPage.cancel()
})

// Update URL when page changes from scrolling
function handlePageChange(page: number) {
  updateUrlPage(page)
}

// Reset page when query changes
watch(query, (newQuery, oldQuery) => {
  if (newQuery.trim() === (oldQuery || '').trim()) return
  currentPage.value = 1
  hasInteracted.value = true
})

// Check if current query could be a valid package name
const isValidPackageName = computed(() => isValidNewPackageName(query.value.trim()))

// Get connector state
const { isConnected, npmUser, listOrgUsers } = useConnector()

// Check if this is a scoped package and extract scope
const packageScope = computed(() => {
  const q = query.value.trim()
  if (!q.startsWith('@')) return null
  const match = q.match(/^@([^/]+)\//)
  return match ? match[1] : null
})

// Track org membership for scoped packages
const orgMembership = ref<Record<string, boolean>>({})

// Check org membership when scope changes
watch(
  [packageScope, isConnected, npmUser],
  async ([scope, connected, user]) => {
    if (!scope || !connected || !user) return
    // Skip if already checked
    if (scope in orgMembership.value) return

    try {
      const users = await listOrgUsers(scope)
      // Check if current user is in the org's user list
      if (users && user in users) {
        orgMembership.value[scope] = true
      } else {
        orgMembership.value[scope] = false
      }
    } catch {
      orgMembership.value[scope] = false
    }
  },
  { immediate: true },
)

// Check if user can publish to scope (either their username or an org they're a member of)
const canPublishToScope = computed(() => {
  const scope = packageScope.value
  if (!scope) return true // Unscoped package
  if (!npmUser.value) return false
  // Can publish if scope matches username
  if (scope.toLowerCase() === npmUser.value.toLowerCase()) return true
  // Can publish if user is a member of the org
  return orgMembership.value[scope] === true
})

// Show claim prompt when valid name, available, either not connected or connected and has permission
const showClaimPrompt = computed(() => {
  if (!isValidPackageName.value) return false
  if (isConnected.value && !canPublishToScope.value) return false

  const avail = packageAvailability.value

  // Confirmed: availability result matches current committed query
  if (avail?.available === true && avail.name === committedQuery.value.trim()) return true

  // Pending: a new fetch is in flight — keep the claim visible if the last known
  // result was "available" so it doesn't flicker until new data arrives
  if (status.value === 'pending' && avail?.available === true) return true

  return false
})

const claimPackageModalRef = useTemplateRef('claimPackageModalRef')

/** Check if there's an exact package match in results */
const hasExactPackageMatch = computed(() => {
  const q = query.value.trim().toLowerCase()
  if (!q || !visibleResults.value) return false
  return visibleResults.value.objects.some(r => r.package.name.toLowerCase() === q)
})

/** Check if query is an exact org match (e.g., @nuxt matches org nuxt) */
const isExactOrgQuery = computed(() => {
  const q = query.value.trim()
  if (!q.startsWith('@') || q.includes('/')) return false
  const orgName = q.slice(1).toLowerCase()
  return validatedSuggestions.value.some(
    s => s.type === 'org' && s.name.toLowerCase() === orgName && s.exists,
  )
})

/** Determine which item should be highlighted as exact match */
const exactMatchType = computed<'package' | 'org' | 'user' | null>(() => {
  // Package match takes priority
  if (hasExactPackageMatch.value) return 'package'
  // Then org match for @org queries
  if (isExactOrgQuery.value) return 'org'
  // Could extend to user matches for ~user queries
  const q = query.value.trim()
  if (q.startsWith('~')) {
    const userName = q.slice(1).toLowerCase()
    if (
      validatedSuggestions.value.some(
        s => s.type === 'user' && s.name.toLowerCase() === userName && s.exists,
      )
    ) {
      return 'user'
    }
  }
  return null
})

const suggestionCount = computed(() => validatedSuggestions.value.length)
const totalSelectableCount = computed(() => suggestionCount.value + resultCount.value)

const resultsContainerRef = useTemplateRef<HTMLElement>('resultsContainerRef')
const isVisible = (el: HTMLElement) => el.getClientRects().length > 0
const focusableElements = shallowRef<HTMLElement[]>([])
let focusableElementsObserver: MutationObserver | null = null
let refreshFocusableElementsFrame: number | null = null

/**
 * Cache all keyboard-focusable result elements in DOM order.
 * DOM order already matches our navigation order: suggestions first, then packages.
 */
function refreshFocusableElements() {
  const root = resultsContainerRef.value
  if (!root) {
    focusableElements.value = []
    return
  }

  focusableElements.value = Array.from(
    root.querySelectorAll<HTMLElement>('[data-suggestion-index], [data-result-index]'),
  ).filter(isVisible)
}

function scheduleFocusableElementsRefresh() {
  if (!import.meta.client) return
  if (refreshFocusableElementsFrame != null) return

  refreshFocusableElementsFrame = window.requestAnimationFrame(() => {
    refreshFocusableElementsFrame = null
    refreshFocusableElements()
  })
}

function stopObservingFocusableElements() {
  focusableElementsObserver?.disconnect()
  focusableElementsObserver = null
  if (refreshFocusableElementsFrame != null) {
    window.cancelAnimationFrame(refreshFocusableElementsFrame)
    refreshFocusableElementsFrame = null
  }
  focusableElements.value = []
}

function startObservingFocusableElements() {
  stopObservingFocusableElements()

  const root = resultsContainerRef.value
  if (!root || !import.meta.client) return

  focusableElementsObserver = new MutationObserver(() => {
    scheduleFocusableElementsRefresh()
  })

  focusableElementsObserver.observe(root, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['class', 'style', 'hidden', 'aria-hidden'],
  })

  // Perform an initial synchronous refresh so focusableElements is populated
  // before any immediate key handling (ArrowUp/ArrowDown) occurs.
  refreshFocusableElements()
}

/**
 * Focus an element and scroll it into view
 */
function focusElement(el: HTMLElement) {
  el.focus()
  el.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
}

// Navigate to package page
async function navigateToPackage(packageName: string) {
  await navigateTo(packageRoute(packageName))
}

// Track the input value when user pressed Enter (for navigating when results arrive)
const pendingEnterQuery = shallowRef<string | null>(null)

// Watch for results to navigate when Enter was pressed before results arrived
watch(displayResults, newResults => {
  if (!pendingEnterQuery.value) return

  // Check if input is still focused (user hasn't started navigating or clicked elsewhere)
  if (document.activeElement?.tagName !== 'INPUT') {
    pendingEnterQuery.value = null
    return
  }

  // Navigate if first result matches the query that was entered
  const firstResult = newResults[0]
  // eslint-disable-next-line no-console
  console.log('[search] watcher fired', {
    pending: pendingEnterQuery.value,
    firstResult: firstResult?.package.name,
  })
  if (firstResult?.package.name === pendingEnterQuery.value) {
    pendingEnterQuery.value = null
    navigateToPackage(firstResult.package.name)
  }
})

watch(resultsContainerRef, () => {
  startObservingFocusableElements()
})

watch(
  [
    suggestionCount,
    resultCount,
    viewMode,
    paginationMode,
    currentPage,
    showSelectionView,
    isRateLimited,
    committedQuery,
  ],
  () => {
    nextTick(() => {
      if (!resultsContainerRef.value) {
        return
      }
      scheduleFocusableElementsRefresh()
    })
  },
  { flush: 'post' },
)

/**
 * Focus the header search input
 */
function focusSearchInput() {
  const searchInput = document.querySelector<HTMLInputElement>(
    'input[type="search"], input[name="q"]',
  )
  searchInput?.focus()
}

const keyboardShortcuts = useKeyboardShortcuts()

function handleResultsKeydown(e: KeyboardEvent) {
  if (!keyboardShortcuts.value) {
    return
  }
  // If the active element is an input, navigate to exact match or wait for results
  if (e.key === 'Enter' && document.activeElement?.tagName === 'INPUT') {
    // Get value directly from input (not from route query, which may be debounced)
    const inputValue = (document.activeElement as HTMLInputElement).value.trim()
    if (!inputValue) return

    // When instantSearch is off, commit the query so search starts
    committedQuery.value = inputValue

    // Check if first result matches the input value exactly
    const firstResult = displayResults.value[0]
    if (firstResult?.package.name === inputValue) {
      pendingEnterQuery.value = null
      return navigateToPackage(firstResult.package.name)
    }

    // No match yet - store input value, watcher will handle navigation when results arrive
    pendingEnterQuery.value = inputValue
    return
  }

  if (totalSelectableCount.value <= 0) return

  const elements = focusableElements.value
  if (elements.length === 0) return

  const currentIndex = elements.findIndex(el => el === document.activeElement)

  if (e.key === 'ArrowDown') {
    e.preventDefault()
    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()
    // At first result or no result focused: return focus to search input
    if (currentIndex <= 0) {
      focusSearchInput()
      return
    }
    const nextIndex = currentIndex - 1
    const el = elements[nextIndex]
    if (el) focusElement(el)
    return
  }

  if (e.key === 'Enter') {
    // 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)

onMounted(() => {
  startObservingFocusableElements()
})

useSeoMeta({
  title: () =>
    `${query.value ? $t('search.title_search', { search: query.value }) : $t('search.title_packages')} - npmx`,
  ogTitle: () =>
    `${query.value ? $t('search.title_search', { search: query.value }) : $t('search.title_packages')} - npmx`,
  twitterTitle: () =>
    `${query.value ? $t('search.title_search', { search: query.value }) : $t('search.title_packages')} - npmx`,
  description: () =>
    query.value
      ? $t('search.meta_description', { search: query.value })
      : $t('search.meta_description_packages'),
  ogDescription: () =>
    query.value
      ? $t('search.meta_description', { search: query.value })
      : $t('search.meta_description_packages'),
  twitterDescription: () =>
    query.value
      ? $t('search.meta_description', { search: query.value })
      : $t('search.meta_description_packages'),
})

defineOgImageComponent('Default', {
  title: () =>
    `${query.value ? $t('search.title_search', { search: query.value }) : $t('search.title_packages')} - npmx`,
  description: () =>
    query.value
      ? $t('search.meta_description', { search: query.value })
      : $t('search.meta_description_packages'),
  primaryColor: '#60a5fa',
})

// -----------------------------------
// Live region debouncing logic
// -----------------------------------
const isMobile = useIsMobile()

// Evaluate the text that should be announced to screen readers
const rawLiveRegionMessage = computed(() => {
  if (isRateLimited.value) {
    return $t('search.rate_limited')
  }

  // If status is pending, no update phrase needed yet
  if (status.value === 'pending') {
    return ''
  }

  if (visibleResults.value && displayResults.value.length > 0) {
    if (viewMode.value === 'table' || paginationMode.value === 'paginated') {
      const pSize = Math.min(preferredPageSize.value, effectiveTotal.value)

      return $t(
        'filters.count.showing_paginated',
        {
          pageSize: pSize.toString(),
          count: $n(effectiveTotal.value),
        },
        effectiveTotal.value,
      )
    }

    if (isRelevanceSort.value) {
      return $t(
        'search.found_packages',
        { count: $n(visibleResults.value.total) },
        visibleResults.value.total,
      )
    }

    return $t(
      'search.found_packages_sorted',
      { count: $n(effectiveTotal.value) },
      effectiveTotal.value,
    )
  }

  if (status.value === 'success' || status.value === 'error') {
    if (displayResults.value.length === 0 && query.value) {
      return $t('search.no_results', { query: query.value })
    }
  }

  return ''
})

const debouncedLiveRegionMessage = ref('')

const updateLiveRegionMobile = debounce((val: string) => {
  debouncedLiveRegionMessage.value = val
}, 700)

const updateLiveRegionDesktop = debounce((val: string) => {
  debouncedLiveRegionMessage.value = val
}, 250)

watch(
  rawLiveRegionMessage,
  newVal => {
    if (!newVal) {
      updateLiveRegionMobile.cancel()
      updateLiveRegionDesktop.cancel()
      debouncedLiveRegionMessage.value = ''
      return
    }

    if (isMobile.value) {
      updateLiveRegionDesktop.cancel()
      updateLiveRegionMobile(newVal)
    } else {
      updateLiveRegionMobile.cancel()
      updateLiveRegionDesktop(newVal)
    }
  },
  { immediate: true },
)

onBeforeUnmount(() => {
  stopObservingFocusableElements()
  updateLiveRegionMobile.cancel()
  updateLiveRegionDesktop.cancel()
})
</script>

<template>
  <PackageActionBar v-if="!showSelectionView" />

  <main class="flex-1 py-8 search-page" :class="{ 'overflow-x-hidden': viewMode !== 'table' }">
    <div class="container-sm">
      <div class="flex items-center justify-between gap-4 mb-4">
        <h1 class="font-mono text-2xl sm:text-3xl font-medium">
          {{ $t('search.title') }}
        </h1>
        <button
          v-if="showSelectionView"
          type="button"
          class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
          @click="closeSelectionView"
          :aria-label="$t('nav.back')"
        >
          <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
          <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
        </button>
        <SearchProviderToggle v-else />
      </div>

      <PackageSelectionView
        v-if="showSelectionView && selectedPackages.length"
        :view-mode="viewMode"
      />

      <section v-else-if="committedQuery" ref="resultsContainerRef" class="results-layout">
        <LoadingSpinner v-if="showSearching" :text="$t('search.searching')" />

        <div
          v-show="
            results ||
            displayResults.length > 0 ||
            isRateLimited ||
            status === 'error' ||
            status === 'success'
          "
        >
          <Transition
            enter-active-class="motion-safe:animate-slide-up motion-safe:animate-fill-both"
            leave-active-class="motion-safe:transition-[opacity,transform] motion-safe:duration-200 motion-safe:ease-out"
            leave-to-class="opacity-0 motion-safe:-translate-y-1.5"
          >
            <div
              v-if="validatedSuggestions.length > 0 && displayResults.length > 0"
              class="mb-6 space-y-3"
            >
              <SearchSuggestionCard
                v-for="(suggestion, idx) in validatedSuggestions"
                :key="`${suggestion.type}-${suggestion.name}`"
                :type="suggestion.type"
                :name="suggestion.name"
                :index="idx"
                :is-exact-match="
                  (exactMatchType === 'org' && suggestion.type === 'org') ||
                  (exactMatchType === 'user' && suggestion.type === 'user')
                "
              />
            </div>
          </Transition>

          <div
            v-if="showClaimPrompt && visibleResults && displayResults.length > 0"
            class="mb-6 p-4 bg-bg-subtle border border-border rounded-lg sm:flex hidden flex-row sm:items-center gap-3 sm:gap-4"
          >
            <div class="flex-1 min-w-0">
              <p class="font-mono text-sm text-fg">
                {{ $t('search.not_taken', { name: query }) }}
              </p>
              <p class="text-xs text-fg-muted mt-0.5">{{ $t('search.claim_prompt') }}</p>
            </div>
            <button
              type="button"
              class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-[color,background-color,opacity] motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-accent/70 disabled:opacity-85 disabled:cursor-not-allowed"
              :disabled="status === 'pending'"
              @click="claimPackageModalRef?.open()"
            >
              {{ $t('search.claim_button', { name: query }) }}
            </button>
          </div>

          <div v-if="isRateLimited" class="py-12">
            <p class="text-fg-muted font-mono mb-6 text-center">
              {{ $t('search.rate_limited') }}
            </p>
          </div>

          <div v-else-if="visibleResults && displayResults.length > 0" class="mb-6">
            <PackageListToolbar
              :filters="filters"
              v-model:sort-option="sortOption"
              v-model:view-mode="viewMode"
              :columns="columns"
              v-model:pagination-mode="paginationMode"
              v-model:page-size="preferredPageSize"
              :total-count="effectiveTotal"
              :filtered-count="displayResults.length"
              :available-keywords="availableKeywords"
              :active-filters="activeFilters"
              :disabled-sort-keys="disabledSortKeys"
              search-context
              @toggle-column="toggleColumn"
              @toggle-selection="openSelectionView"
              @reset-columns="resetColumns"
              @clear-filter="handleClearFilter"
              @clear-all-filters="clearAllFilters"
              @update:text="setTextFilter"
              @update:search-scope="setSearchScope"
              @update:download-range="setDownloadRange"
              @update:security="setSecurity"
              @update:updated-within="setUpdatedWithin"
              @toggle-keyword="toggleKeyword"
            />
            <p
              v-if="viewMode === 'cards' && paginationMode === 'infinite'"
              class="text-fg-muted text-sm mt-4 font-mono"
            >
              <template v-if="isRelevanceSort">
                {{
                  $t(
                    'search.found_packages',
                    { count: $n(visibleResults.total) },
                    visibleResults.total,
                  )
                }}
              </template>
              <template v-else>
                {{
                  $t('search.found_packages_sorted', { count: $n(effectiveTotal) }, effectiveTotal)
                }}
              </template>
              <span aria-hidden="true" v-if="status === 'pending'" class="text-fg-subtle">
                {{ $t('search.updating') }}
              </span>
            </p>
            <p
              v-if="viewMode === 'table' || paginationMode === 'paginated'"
              class="text-fg-muted text-sm mt-4 font-mono"
            >
              {{
                $t(
                  'filters.count.showing_paginated',
                  {
                    pageSize: $n(Math.min(preferredPageSize, effectiveTotal)),
                    count: $n(effectiveTotal),
                  },
                  effectiveTotal,
                )
              }}
            </p>
          </div>

          <div v-else-if="status === 'success' || status === 'error'" class="py-12">
            <p class="text-fg-muted font-mono mb-6 text-center">
              {{ $t('search.no_results', { query }) }}
            </p>

            <Transition
              enter-active-class="motion-safe:animate-slide-up motion-safe:animate-fill-both"
              leave-active-class="motion-safe:transition-[opacity,transform] motion-safe:duration-200 motion-safe:ease-out"
              leave-to-class="opacity-0 motion-safe:-translate-y-1.5"
            >
              <div v-if="validatedSuggestions.length > 0" class="max-w-md mx-auto mb-6 space-y-3">
                <SearchSuggestionCard
                  v-for="(suggestion, idx) in validatedSuggestions"
                  :key="`${suggestion.type}-${suggestion.name}`"
                  :type="suggestion.type"
                  :name="suggestion.name"
                  :index="idx"
                  :is-exact-match="
                    (exactMatchType === 'org' && suggestion.type === 'org') ||
                    (exactMatchType === 'user' && suggestion.type === 'user')
                  "
                />
              </div>
            </Transition>

            <div v-if="showClaimPrompt" class="max-w-md mx-auto text-center hidden sm:block">
              <div class="p-4 bg-bg-subtle border border-border rounded-lg">
                <p class="text-sm text-fg-muted mb-3">{{ $t('search.want_to_claim') }}</p>
                <button
                  type="button"
                  class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-accent/70"
                  @click="claimPackageModalRef?.open()"
                >
                  {{ $t('search.claim_button', { name: query }) }}
                </button>
              </div>
            </div>
          </div>

          <PackageList
            v-show="displayResults.length > 0 && !isRateLimited"
            :results="displayResults"
            :search-query="query"
            :filters="filters"
            search-context
            heading-level="h2"
            show-publisher
            :has-more="hasMore"
            :is-loading="isLoadingMore"
            :page-size="preferredPageSize"
            :initial-page="initialPage"
            :view-mode="viewMode"
            :columns="columns"
            v-model:sort-option="sortOption"
            :pagination-mode="paginationMode"
            :current-page="currentPage"
            @load-more="loadMore"
            @page-change="handlePageChange"
            @click-keyword="toggleKeyword"
          />

          <PaginationControls
            v-if="displayResults.length > 0 && !isRateLimited"
            v-model:mode="paginationMode"
            v-model:page-size="preferredPageSize"
            v-model:current-page="currentPage"
            :total-items="effectiveTotal"
            :view-mode="viewMode"
          />
        </div>
      </section>

      <section v-else class="py-20 text-center">
        <p class="text-fg-subtle font-mono text-sm">{{ $t('search.start_typing') }}</p>
      </section>
    </div>

    <PackageClaimPackageModal
      ref="claimPackageModalRef"
      :package-name="query"
      :package-scope="packageScope"
      :can-publish-to-scope="canPublishToScope"
    />

    <div role="status" class="sr-only">
      {{ debouncedLiveRegionMessage }}
    </div>
  </main>
</template>

<style scoped>
.results-layout {
  min-height: 50vh;
  overflow-anchor: none;
}
</style>