@feathersdev/websites 0.0.1

package/app/components/DocsSearchModal.vue

@@ -0,0 +1,831 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+
+const props = defineProps<{
+  modelValue: boolean
+  /** Array of Nuxt Content collection names to search. If not provided, auto-detects from route. */
+  collections?: string[]
+  /** Display name for the search (e.g., "Feathers Docs"). If not provided, auto-generates. */
+  searchLabel?: string
+  /** Array of doc paths to show as popular/featured when search is empty */
+  popularPaths?: string[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const route = useRoute()
+
+// Modal state
+const isOpen = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+// Search state
+const searchQuery = ref('')
+const searchResults = ref<SearchResult[]>([])
+const isSearching = ref(false)
+const selectedIndex = ref(0)
+const searchInput = ref<HTMLInputElement>()
+const resultsContainer = ref<HTMLElement>()
+
+// Filter state
+type FilterType = 'all' | 'heading' | 'code' | 'content'
+const activeFilter = ref<FilterType>('all')
+
+const filters: { value: FilterType; label: string; icon: string }[] = [
+  { value: 'all', label: 'All', icon: 'heroicons:squares-2x2' },
+  { value: 'heading', label: 'Headings', icon: 'heroicons:hashtag' },
+  { value: 'code', label: 'Code', icon: 'heroicons:code-bracket' },
+  { value: 'content', label: 'Content', icon: 'heroicons:document-text' },
+]
+
+// Popular content
+interface PopularDoc {
+  doc: Doc
+  collection: string
+}
+const popularDocs = ref<PopularDoc[]>([])
+const isLoadingPopular = ref(false)
+
+async function loadPopularDocs() {
+  if (popularDocs.value.length > 0) return // Already loaded
+
+  isLoadingPopular.value = true
+  try {
+    // If popularPaths provided, load those specific docs
+    if (props.popularPaths && props.popularPaths.length > 0) {
+      const docs: PopularDoc[] = []
+
+      // Search for each path across all collections
+      for (const path of props.popularPaths) {
+        for (const collectionName of docsCollections.value) {
+          try {
+            const allDocs = (await queryCollection(collectionName).all()) as Doc[]
+            const found = allDocs.find((doc) => doc.path === path)
+            if (found) {
+              docs.push({ doc: found, collection: collectionName })
+              break // Found it, move to next path
+            }
+          } catch {
+            // Collection might not exist, continue
+          }
+        }
+      }
+
+      popularDocs.value = docs
+    } else {
+      // Fallback: load first 6 docs from all collections
+      const allDocs: PopularDoc[] = []
+
+      for (const collectionName of docsCollections.value) {
+        const docs = (await queryCollection(collectionName).all()) as Doc[]
+        allDocs.push(...docs.map((doc) => ({ doc, collection: collectionName })))
+      }
+
+      popularDocs.value = allDocs.slice(0, 6)
+    }
+  } catch (error) {
+    console.error('Error loading popular docs:', error)
+  } finally {
+    isLoadingPopular.value = false
+  }
+}
+
+// Types
+type MinimarkElement = string | [string, Record<string, unknown> | null, ...MinimarkElement[]]
+
+interface DocBody {
+  type?: string
+  value?: MinimarkElement[]
+}
+
+interface Doc {
+  path: string
+  title: string
+  description?: string
+  body?: DocBody
+}
+
+interface SearchableContent {
+  type: 'title' | 'description' | 'heading' | 'code' | 'paragraph'
+  text: string
+  level?: number
+  language?: string
+  anchor?: string
+}
+
+interface SearchResult {
+  doc: Doc
+  matches: SearchMatch[]
+  score: number
+  collection: string
+}
+
+interface SearchMatch {
+  type: SearchableContent['type']
+  text: string
+  context: string
+  level?: number
+  language?: string
+  anchor?: string
+}
+
+// Determine which docs collections to search based on prop or current route
+const docsCollections = computed(() => {
+  if (props.collections && props.collections.length > 0) return props.collections
+
+  // Auto-detect from route (single collection)
+  const productSlug = route.path.split('/')[1]
+  if (productSlug === 'feathers') return ['feathersDocs']
+  if (productSlug === 'pinion') return ['pinionDocs']
+  if (productSlug === 'auth') return ['authDocs']
+  if (productSlug === 'lofi') return ['lofiDocs']
+  return ['docs'] // default for talon.codes
+})
+
+// Map collection names to display labels
+const collectionLabels: Record<string, string> = {
+  docs: 'Docs',
+  feathersDocs: 'Feathers',
+  pinionDocs: 'Pinion',
+  authDocs: 'Auth',
+  lofiDocs: 'LoFi',
+}
+
+function getCollectionLabel(collection: string): string {
+  return collectionLabels[collection] || collection
+}
+
+const productName = computed(() => {
+  if (props.searchLabel) return props.searchLabel
+
+  // Auto-generate from collections or route
+  if (docsCollections.value.length > 1) return 'All Docs'
+
+  const slug = route.path.split('/')[1]
+  if (!slug || slug === 'docs') return 'Docs'
+  return slug.charAt(0).toUpperCase() + slug.slice(1)
+})
+
+// Extract text from minimark node recursively
+// Minimark format: [tag, props, ...children] or plain string
+function extractTextFromMinimark(node: MinimarkElement): string {
+  if (!node) return ''
+  if (typeof node === 'string') return node
+
+  // Minimark array format: [tag, props, ...children]
+  if (Array.isArray(node)) {
+    const [, , ...children] = node
+    // Skip the tag and props, just extract text from children
+    return children.map(extractTextFromMinimark).join('')
+  }
+
+  return ''
+}
+
+// Parse minimark AST to extract searchable content with categories
+// Minimark format: { type: "minimark", value: [...nodes] }
+// Each node is: [tag, props, ...children] or a string
+function extractSearchableContent(body: DocBody | undefined): SearchableContent[] {
+  const content: SearchableContent[] = []
+
+  function walkNode(node: MinimarkElement, parentTag?: string) {
+    if (!node) return
+
+    // Plain string content
+    if (typeof node === 'string') return
+
+    // Minimark array format: [tag, props, ...children]
+    if (Array.isArray(node)) {
+      const [tag, props, ...children] = node
+      const tagLower = typeof tag === 'string' ? tag.toLowerCase() : ''
+      const nodeProps = props as Record<string, string> | null
+
+      // Headings
+      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagLower)) {
+        const level = parseInt(tagLower.charAt(1))
+        const text = children.map(extractTextFromMinimark).join('')
+        const anchor = nodeProps?.id || ''
+        if (text.trim()) {
+          content.push({ type: 'heading', text: text.trim(), level, anchor })
+        }
+      }
+      // Code blocks - pre tag has `code` property in props with raw content
+      else if (tagLower === 'pre') {
+        const codeText = nodeProps?.code || children.map(extractTextFromMinimark).join('')
+        const language = nodeProps?.language || ''
+        if (codeText.trim()) {
+          content.push({ type: 'code', text: codeText.trim(), language })
+        }
+        // Don't recurse into code blocks
+        return
+      }
+      // Inline code
+      else if (tagLower === 'code' && parentTag !== 'pre') {
+        const text = children.map(extractTextFromMinimark).join('')
+        if (text.trim()) {
+          content.push({ type: 'code', text: text.trim() })
+        }
+        return
+      }
+      // Paragraphs
+      else if (tagLower === 'p') {
+        const text = children.map(extractTextFromMinimark).join('')
+        if (text.trim()) {
+          content.push({ type: 'paragraph', text: text.trim() })
+        }
+      }
+      // List items
+      else if (tagLower === 'li') {
+        const text = children.map(extractTextFromMinimark).join('')
+        if (text.trim()) {
+          content.push({ type: 'paragraph', text: text.trim() })
+        }
+      }
+
+      // Recurse into children
+      children.forEach((child) => walkNode(child, tagLower))
+    }
+  }
+
+  // Minimark body structure: { type: "minimark", value: [...] }
+  if (body?.type === 'minimark' && Array.isArray(body.value)) {
+    body.value.forEach((node) => walkNode(node))
+  }
+
+  return content
+}
+
+// Calculate relevance score for a match
+function calculateScore(matchType: SearchableContent['type'], level?: number): number {
+  const scores: Record<string, number> = {
+    title: 100,
+    description: 20,
+    heading: level && level <= 2 ? 40 : 30,
+    code: 25,
+    paragraph: 10,
+  }
+  return scores[matchType] || 5
+}
+
+// Fuzzy match function - returns score (0 = no match, higher = better match)
+// Stricter matching: requires characters to be close together
+function fuzzyMatch(text: string, query: string): { score: number; indices: number[] } {
+  const textLower = text.toLowerCase()
+  const queryLower = query.toLowerCase()
+
+  // Exact substring match gets highest score
+  if (textLower.includes(queryLower)) {
+    const index = textLower.indexOf(queryLower)
+    const indices = Array.from({ length: query.length }, (_, i) => index + i)
+    return { score: 100 + query.length * 10, indices }
+  }
+
+  // For fuzzy matching, require matches to be close together
+  // Max gap between consecutive matched characters
+  const maxGap = 8
+
+  let bestScore = 0
+  let bestIndices: number[] = []
+
+  // Try starting from different positions
+  for (let startPos = 0; startPos < textLower.length - query.length; startPos++) {
+    let score = 0
+    let textIndex = startPos
+    let lastMatchIndex = -1
+    const indices: number[] = []
+    let valid = true
+
+    for (let i = 0; i < queryLower.length; i++) {
+      const char = queryLower[i]
+      let found = false
+      const searchEnd =
+        lastMatchIndex === -1 ? textLower.length : Math.min(textLower.length, lastMatchIndex + maxGap + 1)
+
+      while (textIndex < searchEnd) {
+        if (textLower[textIndex] === char) {
+          indices.push(textIndex)
+          found = true
+
+          // Big bonus for consecutive matches
+          if (lastMatchIndex !== -1 && textIndex === lastMatchIndex + 1) {
+            score += 20
+          }
+          // Bonus for close matches
+          else if (lastMatchIndex !== -1 && textIndex <= lastMatchIndex + 3) {
+            score += 8
+          }
+
+          // Bonus for camelCase boundaries
+          if (
+            textIndex > 0 &&
+            text[textIndex - 1] === text[textIndex - 1].toLowerCase() &&
+            text[textIndex] === text[textIndex].toUpperCase()
+          ) {
+            score += 15
+          }
+          // Bonus for word boundaries
+          else if (textIndex === 0 || /[\s_\-.]/.test(text[textIndex - 1])) {
+            score += 12
+          }
+
+          score += 1
+          lastMatchIndex = textIndex
+          textIndex++
+          break
+        }
+        textIndex++
+      }
+
+      if (!found) {
+        valid = false
+        break
+      }
+    }
+
+    if (valid && score > bestScore) {
+      bestScore = score
+      bestIndices = indices
+    }
+  }
+
+  // Require minimum quality - most chars should be consecutive or very close
+  const minScore = query.length * 8
+  if (bestScore < minScore) {
+    return { score: 0, indices: [] }
+  }
+
+  return { score: bestScore, indices: bestIndices }
+}
+
+// Escape HTML characters
+function escapeHtml(str: string): string {
+  const div = document.createElement('div')
+  div.textContent = str
+  return div.innerHTML
+}
+
+// Highlight matches in text (supports both exact and fuzzy)
+function highlightMatch(text: string, query: string): string {
+  if (!query) return escapeHtml(text)
+
+  const { indices } = fuzzyMatch(text, query)
+
+  if (indices.length === 0) {
+    return escapeHtml(text)
+  }
+
+  // Build highlighted string by marking matched character positions
+  let result = ''
+  let inHighlight = false
+  for (let i = 0; i < text.length; i++) {
+    const isMatch = indices.includes(i)
+
+    if (isMatch && !inHighlight) {
+      result += '<mark class="bg-yellow-400/80 text-neutral rounded px-0.5">'
+      inHighlight = true
+    } else if (!isMatch && inHighlight) {
+      result += '</mark>'
+      inHighlight = false
+    }
+
+    result += escapeHtml(text[i])
+  }
+
+  if (inHighlight) {
+    result += '</mark>'
+  }
+
+  return result
+}
+
+// Get context around match
+function getMatchContext(text: string, query: string, contextLength = 60): string {
+  const { indices } = fuzzyMatch(text, query)
+
+  if (indices.length === 0) return text.slice(0, contextLength * 2)
+
+  // Use the first matched character as the center point
+  const firstMatch = indices[0]
+  const lastMatch = indices[indices.length - 1]
+
+  const start = Math.max(0, firstMatch - contextLength)
+  const end = Math.min(text.length, lastMatch + contextLength)
+
+  let context = text.slice(start, end)
+  if (start > 0) context = '...' + context
+  if (end < text.length) context = context + '...'
+
+  return context
+}
+
+// Debounced search function
+const searchDocs = useDebounceFn(async () => {
+  if (!searchQuery.value || searchQuery.value.length < 2) {
+    searchResults.value = []
+    return
+  }
+
+  isSearching.value = true
+  selectedIndex.value = 0
+
+  try {
+    const results: SearchResult[] = []
+
+    // Search across all configured collections
+    for (const collectionName of docsCollections.value) {
+      const allDocs = (await queryCollection(collectionName).all()) as Doc[]
+
+      for (const doc of allDocs) {
+        const matches: SearchMatch[] = []
+        let totalScore = 0
+
+        // Check title with fuzzy match
+        const titleMatch = doc.title ? fuzzyMatch(doc.title, searchQuery.value) : { score: 0, indices: [] }
+        if (titleMatch.score > 0) {
+          totalScore += titleMatch.score
+          matches.push({
+            type: 'title',
+            text: doc.title,
+            context: doc.title,
+          })
+        }
+
+        // Check description with fuzzy match
+        const descMatch = doc.description ? fuzzyMatch(doc.description, searchQuery.value) : { score: 0, indices: [] }
+        if (descMatch.score > 0) {
+          totalScore += descMatch.score * 0.5 // Weight description lower
+          matches.push({
+            type: 'description',
+            text: doc.description,
+            context: getMatchContext(doc.description, searchQuery.value),
+          })
+        }
+
+        // Parse body AST for categorized content
+        if (doc.body) {
+          const contentItems = extractSearchableContent(doc.body)
+
+          for (const item of contentItems) {
+            // Apply filter
+            if (activeFilter.value !== 'all') {
+              if (activeFilter.value === 'heading' && item.type !== 'heading') continue
+              if (activeFilter.value === 'code' && item.type !== 'code') continue
+              if (activeFilter.value === 'content' && item.type !== 'paragraph') continue
+            }
+
+            const itemMatch = fuzzyMatch(item.text, searchQuery.value)
+            if (itemMatch.score > 0) {
+              const typeScore = calculateScore(item.type, item.level)
+              totalScore += itemMatch.score * (typeScore / 100)
+
+              matches.push({
+                type: item.type,
+                text: item.text,
+                context: getMatchContext(item.text, searchQuery.value),
+                level: item.level,
+                language: item.language,
+                anchor: item.anchor,
+              })
+            }
+          }
+        }
+
+        // Add bonus for multiple matches
+        if (matches.length > 1) {
+          totalScore += matches.length * 5
+        }
+
+        if (matches.length > 0) {
+          results.push({
+            doc,
+            matches: matches.slice(0, 5), // Limit matches per doc
+            score: totalScore,
+            collection: collectionName,
+          })
+        }
+      }
+    }
+
+    // Sort by score descending
+    results.sort((a, b) => b.score - a.score)
+
+    searchResults.value = results.slice(0, 20) // Limit to 20 results
+  } catch (error) {
+    console.error('Search error:', error)
+    searchResults.value = []
+  } finally {
+    isSearching.value = false
+  }
+}, 300)
+
+// Watch for search query changes and filter changes
+watch([searchQuery, activeFilter], () => {
+  searchDocs()
+})
+
+// Focus input when modal opens
+watch(isOpen, (open) => {
+  if (open) {
+    nextTick(() => {
+      searchInput.value?.focus()
+    })
+    loadPopularDocs()
+  } else {
+    // Reset state when closing
+    searchQuery.value = ''
+    searchResults.value = []
+    selectedIndex.value = 0
+    activeFilter.value = 'all'
+  }
+})
+
+// Keyboard navigation
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    isOpen.value = false
+    return
+  }
+
+  // Cmd/Ctrl + Left/Right to navigate filters
+  if ((event.metaKey || event.ctrlKey) && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+    event.preventDefault()
+    const currentIndex = filters.findIndex((f) => f.value === activeFilter.value)
+    if (event.key === 'ArrowLeft' && currentIndex > 0) {
+      activeFilter.value = filters[currentIndex - 1].value
+    } else if (event.key === 'ArrowRight' && currentIndex < filters.length - 1) {
+      activeFilter.value = filters[currentIndex + 1].value
+    }
+    return
+  }
+
+  // Determine which list we're navigating (search results or popular docs)
+  const isShowingPopular = !searchQuery.value || searchQuery.value.length < 2
+  const currentList = isShowingPopular ? popularDocs.value : searchResults.value
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    if (selectedIndex.value < currentList.length - 1) {
+      selectedIndex.value++
+      scrollToSelected()
+    }
+    return
+  }
+
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    if (selectedIndex.value > 0) {
+      selectedIndex.value--
+      scrollToSelected()
+    }
+    return
+  }
+
+  if (event.key === 'Enter' && currentList.length > 0) {
+    event.preventDefault()
+    event.stopPropagation()
+    if (isShowingPopular) {
+      navigateToDoc(popularDocs.value[selectedIndex.value].doc.path)
+    } else {
+      navigateToResult(searchResults.value[selectedIndex.value])
+    }
+  }
+}
+
+function scrollToSelected() {
+  nextTick(() => {
+    const selected = resultsContainer.value?.querySelector('[data-selected="true"]')
+    selected?.scrollIntoView({ block: 'nearest' })
+  })
+}
+
+async function navigateToResult(result: SearchResult) {
+  isOpen.value = false
+  await nextTick()
+  // If there's a heading match with anchor, navigate to that section
+  const headingMatch = result.matches.find((m) => m.type === 'heading' && m.anchor)
+  const path = headingMatch?.anchor ? `${result.doc.path}#${headingMatch.anchor}` : result.doc.path
+  await navigateTo(path)
+}
+
+function closeModal() {
+  isOpen.value = false
+}
+
+async function navigateToDoc(path: string) {
+  isOpen.value = false
+  await nextTick()
+  await navigateTo(path)
+}
+
+// Filter to get only content matches (skip title/description since title is shown separately)
+function getContentMatches(matches: SearchMatch[]): SearchMatch[] {
+  return matches.filter((m) => m.type !== 'title' && m.type !== 'description')
+}
+
+// Get icon for match type
+function getMatchIcon(match: SearchMatch): string {
+  if (match.type === 'heading') {
+    // Different icons for different heading levels
+    if (match.level === 1) return 'heroicons:bookmark'
+    if (match.level === 2) return 'heroicons:hashtag'
+    return 'heroicons:minus'
+  }
+  if (match.type === 'code') return 'heroicons:code-bracket'
+  if (match.type === 'paragraph') return 'heroicons:bars-3-bottom-left'
+  return 'heroicons:document-text'
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Modal v-model="isOpen" @click.self="closeModal">
+      <ModalBox class="w-full max-w-2xl max-h-[80vh] flex flex-col p-0">
+        <!-- Search Header -->
+        <div v-auto-animate class="p-4 border-b border-base-300">
+          <div class="relative">
+            <Icon
+              name="heroicons:magnifying-glass"
+              class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-base-content/50"
+            />
+            <input
+              ref="searchInput"
+              v-model="searchQuery"
+              type="text"
+              :placeholder="`Search ${productName} docs...`"
+              class="input input-bordered w-full pl-10 pr-10"
+              @keydown="handleKeydown"
+            />
+            <div v-if="isSearching" class="absolute right-3 top-1/2 -translate-y-1/2">
+              <LoadingSpinner sm />
+            </div>
+            <Button
+              v-else-if="searchQuery"
+              ghost
+              xs
+              circle
+              class="absolute right-3 top-1/2 -translate-y-1/2"
+              @click="searchQuery = ''"
+            >
+              <Icon name="heroicons:x-mark" class="w-4 h-4" />
+            </Button>
+          </div>
+          <!-- Filters -->
+          <Flex v-if="searchQuery.length >= 2" class="gap-1 mt-3">
+            <Button
+              v-for="filter in filters"
+              :key="filter.value"
+              xs
+              :primary="activeFilter === filter.value"
+              :ghost="activeFilter !== filter.value"
+              class="gap-1"
+              @click="activeFilter = filter.value"
+            >
+              <Icon :name="filter.icon" class="w-3 h-3" />
+              {{ filter.label }}
+            </Button>
+          </Flex>
+
+          <Flex class="gap-3 mt-2">
+            <Text xs class="flex items-center gap-1 text-base-content/50">
+              <Kbd xs>↑</Kbd>
+              <Kbd xs>↓</Kbd>
+              navigate
+            </Text>
+            <Text xs class="flex items-center gap-1 text-base-content/50">
+              <Kbd xs>↵</Kbd>
+              select
+            </Text>
+            <Text v-if="searchQuery.length >= 2" xs class="flex items-center gap-1 text-base-content/50">
+              <Kbd xs>⌘</Kbd>
+              <Kbd xs>←</Kbd>
+              <Kbd xs>→</Kbd>
+              filter
+            </Text>
+            <Text xs class="flex items-center gap-1 text-base-content/50">
+              <Kbd xs>esc</Kbd>
+              close
+            </Text>
+          </Flex>
+        </div>
+
+        <!-- Search Results -->
+        <div ref="resultsContainer" class="flex-1 overflow-y-auto">
+          <!-- Popular content when no search query -->
+          <div v-if="!searchQuery || searchQuery.length < 2" class="p-4">
+            <Text xs semibold class="text-base-content/50 uppercase tracking-wide mb-3">Popular</Text>
+            <div v-if="isLoadingPopular" class="text-center py-4">
+              <LoadingSpinner sm />
+            </div>
+            <ul v-else class="space-y-1">
+              <li v-for="(item, index) in popularDocs" :key="item.doc.path" :data-selected="index === selectedIndex">
+                <a
+                  :href="item.doc.path"
+                  class="flex items-center gap-2 p-2 rounded-lg transition-colors cursor-pointer"
+                  :class="index === selectedIndex ? 'bg-base-200' : 'hover:bg-base-200/50'"
+                  @click.prevent="navigateToDoc(item.doc.path)"
+                  @mouseenter="selectedIndex = index"
+                >
+                  <Icon name="heroicons:document-text" class="w-4 h-4 text-base-content/50 shrink-0" />
+                  <Text sm class="grow">{{ item.doc.title }}</Text>
+                  <span
+                    v-if="docsCollections.length > 1"
+                    class="text-xs px-1.5 py-0.5 rounded bg-base-300 text-base-content/70"
+                  >
+                    {{ getCollectionLabel(item.collection) }}
+                  </span>
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Loading state -->
+          <div v-else-if="isSearching && searchResults.length === 0" class="p-8 text-center">
+            <LoadingSpinner lg />
+          </div>
+
+          <!-- No results -->
+          <Flex
+            v-else-if="!isSearching && searchResults.length === 0 && searchQuery.length >= 2"
+            col
+            class="p-8 text-center text-base-content/50"
+          >
+            <Icon name="heroicons:face-frown" class="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <Text>No results found for "{{ searchQuery }}"</Text>
+          </Flex>
+
+          <!-- Results list -->
+          <ul v-else class="py-2">
+            <li
+              v-for="(result, index) in searchResults"
+              :key="result.doc.path"
+              :data-selected="index === selectedIndex"
+              class="px-2"
+            >
+              <a
+                :href="result.doc.path"
+                class="block p-3 rounded-lg cursor-pointer transition-colors"
+                :class="index === selectedIndex ? 'bg-base-200' : 'hover:bg-base-200/50'"
+                @click.prevent="navigateToResult(result)"
+                @mouseenter="selectedIndex = index"
+              >
+                <!-- Document title -->
+                <Flex class="gap-2 mb-1 items-center">
+                  <Icon
+                    :name="getMatchIcon(getContentMatches(result.matches)[0] || result.matches[0])"
+                    class="w-4 h-4 text-base-content/50 shrink-0"
+                  />
+                  <Text medium>{{ result.doc.title }}</Text>
+                  <span
+                    v-if="docsCollections.length > 1"
+                    class="text-xs px-1.5 py-0.5 rounded bg-base-300 text-base-content/70"
+                  >
+                    {{ getCollectionLabel(result.collection) }}
+                  </span>
+                </Flex>
+
+                <!-- Match previews (skip title/description, show content matches) -->
+                <div class="space-y-1 ml-6">
+                  <template v-for="(match, mIndex) in getContentMatches(result.matches)" :key="mIndex">
+                    <div
+                      v-if="mIndex < 2"
+                      class="text-sm text-base-content/70 line-clamp-1"
+                      v-html="highlightMatch(match.context, searchQuery)"
+                    />
+                  </template>
+                  <Text v-if="getContentMatches(result.matches).length > 2" xs class="text-base-content/50">
+                    +{{ getContentMatches(result.matches).length - 2 }} more matches
+                  </Text>
+                  <!-- Show description as fallback if no content matches -->
+                  <div
+                    v-if="getContentMatches(result.matches).length === 0 && result.doc.description"
+                    class="text-sm text-base-content/70 line-clamp-1"
+                    v-html="highlightMatch(result.doc.description, searchQuery)"
+                  />
+                </div>
+
+                <!-- Path -->
+                <Text xs class="text-base-content/40 mt-2 ml-6">
+                  {{ result.doc.path }}
+                </Text>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </ModalBox>
+    </Modal>
+  </Teleport>
+</template>
+
+<style scoped>
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>