Merge branch 'main' into fix-peer-deps

Author: brenoepics

.github/workflows/ci.yml

@@ -139,4 +139,4 @@ jobs:
         run: pnpm install
 
       - name: 🔍 Check for unused code
-        run: pnpm knip:production
+        run: pnpm knip

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Daniel Roe
+Copyright (c) 2026 npmx team and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

app/components/AppHeader.vue

@@ -20,6 +20,7 @@ const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = shallowRef<{ focus: () => void } | null>(null)
 
 // On search page, always show search expanded on mobile
+const isOnHomePage = computed(() => route.name === 'index')
 const isOnSearchPage = computed(() => route.name === 'search')
 const isSearchExpanded = computed(() => isOnSearchPage.value || isSearchExpandedManually.value)
 
@@ -72,17 +73,36 @@ onKeyStroke(
   },
   { dedupe: true },
 )
+
+onKeyStroke(
+  'c',
+  e => {
+    // Allow more specific handlers to take precedence
+    if (e.defaultPrevented) return
+
+    // Don't trigger if user is typing in an input
+    const target = e.target as HTMLElement
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+      return
+    }
+
+    e.preventDefault()
+    navigateTo('/compare')
+  },
+  { dedupe: true },
+)
 </script>
 
 <template>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="container min-h-14 flex items-center justify-between gap-2"
+      class="container min-h-14 flex items-center gap-2"
+      :class="isOnHomePage ? 'justify-end' : 'justify-between'"
     >
       <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
       <button
-        v-if="!isSearchExpanded"
+        v-if="!isSearchExpanded && !isOnHomePage"
         type="button"
         class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
         :aria-label="$t('nav.tap_to_search')"
@@ -156,10 +176,16 @@ onKeyStroke(
         <!-- Desktop: Compare link -->
         <NuxtLink
           to="/compare"
-          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          aria-keyshortcuts="c"
         >
-          <span class="i-carbon:compare w-4 h-4" aria-hidden="true" />
           {{ $t('nav.compare') }}
+          <kbd
+            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+            aria-hidden="true"
+          >
+            c
+          </kbd>
         </NuxtLink>
 
         <!-- Desktop: Settings link -->
@@ -185,7 +211,7 @@ onKeyStroke(
         <!-- Mobile: Menu button (always visible, toggles menu) -->
         <button
           type="button"
-          class="sm:hidden p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           :aria-label="showMobileMenu ? $t('common.close') : $t('nav.open_menu')"
           :aria-expanded="showMobileMenu"
           @click="showMobileMenu = !showMobileMenu"

app/components/CollapsibleSection.vue

@@ -123,7 +123,7 @@ useHead({
       :id="contentId"
       class="grid ms-6 transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
     >
-      <div class="min-h-0">
+      <div class="min-h-0 min-w-0">
         <slot />
       </div>
     </div>

app/components/MarkdownText.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { decodeHtmlEntities } from '~/utils/formatters'
+
 const props = defineProps<{
   text: string
   /** When true, renders link text without the anchor tag (useful when inside another link) */
@@ -21,8 +23,11 @@ function stripMarkdownImages(text: string): string {
 
 // Strip HTML tags and escape remaining HTML to prevent XSS
 function stripAndEscapeHtml(text: string): string {
-  // First strip markdown image badges
-  let stripped = stripMarkdownImages(text)
+  // First decode any HTML entities in the input
+  let stripped = decodeHtmlEntities(text)
+
+  // Then strip markdown image badges
+  stripped = stripMarkdownImages(stripped)
 
   // Then strip actual HTML tags (keep their text content)
   // Only match tags that start with a letter or / (to avoid matching things like "a < b > c")

app/components/OgImage/Package.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-withDefaults(
+import { computed, toRefs } from 'vue'
+
+const props = withDefaults(
   defineProps<{
     name: string
     version: string
+    stars: number
     downloads?: string
     license?: string
     primaryColor?: string
@@ -13,6 +16,15 @@ withDefaults(
     primaryColor: '#60a5fa',
   },
 )
+
+const { name, version, stars, downloads, license, primaryColor } = toRefs(props)
+
+const formattedStars = computed(() =>
+  Intl.NumberFormat('en', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(stars.value),
+)
 </script>
 
 <template>
@@ -88,6 +100,18 @@ withDefaults(
           </span>
         </span>
         <span v-if="license"> • {{ license }}</span>
+        <span class="flex items-center gap-2">
+          <span>•</span>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px">
+            <path
+              fill="currentColor"
+              d="m16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1zM16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z"
+            />
+          </svg>
+          <span>
+            {{ formattedStars }}
+          </span>
+        </span>
       </div>
     </div>
 

app/components/PackageCard.vue

@@ -7,7 +7,6 @@ const props = defineProps<{
   /** Whether to show the publisher username */
   showPublisher?: boolean
   prefetch?: boolean
-  selected?: boolean
   index?: number
   /** Search query for highlighting exact matches */
   searchQuery?: string
@@ -20,17 +19,12 @@ const isExactMatch = computed(() => {
   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,
     }"
   >
@@ -50,8 +44,6 @@ const emit = defineEmits<{
           :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

@@ -29,8 +29,6 @@ const props = defineProps<{
   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 */
@@ -48,8 +46,6 @@ const emit = defineEmits<{
   '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 */
@@ -153,9 +149,7 @@ defineExpose({
         :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>
@@ -179,12 +173,10 @@ defineExpose({
                 :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>
@@ -199,7 +191,6 @@ defineExpose({
                   :result="item"
                   :heading-level="headingLevel"
                   :show-publisher="showPublisher"
-                  :selected="index === (selectedIndex ?? -1)"
                   :index="index"
                   :search-query="searchQuery"
                 />
@@ -230,12 +221,10 @@ defineExpose({
             :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/PackagePlaygrounds.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PlaygroundLink } from '#shared/types'
+import { decodeHtmlEntities } from '~/utils/formatters'
 
 const props = defineProps<{
   links: PlaygroundLink[]
@@ -126,7 +127,7 @@ function focusMenuItem(index: number) {
             :class="[getIcon(firstLink.provider), getColor(firstLink.provider), 'w-4 h-4 shrink-0']"
             aria-hidden="true"
           />
-          <span class="truncate text-fg-muted">{{ firstLink.label }}</span>
+          <span class="truncate text-fg-muted">{{ decodeHtmlEntities(firstLink.label) }}</span>
         </a>
       </AppTooltip>
 
@@ -182,7 +183,7 @@ function focusMenuItem(index: number) {
                 :class="[getIcon(link.provider), getColor(link.provider), 'w-4 h-4 shrink-0']"
                 aria-hidden="true"
               />
-              <span class="truncate">{{ link.label }}</span>
+              <span class="truncate">{{ decodeHtmlEntities(link.label) }}</span>
             </a>
           </AppTooltip>
         </div>

app/components/PackageTable.vue

@@ -6,14 +6,12 @@ import { buildSortOption, parseSortOption, toggleDirection } from '#shared/types
 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]
 }>()
 
@@ -318,9 +316,7 @@ function getColumnLabelKey(id: ColumnId): string {
             :key="result.package.name"
             :result="result"
             :columns="columns"
-            :selected="selectedIndex === index"
             :index="index"
-            @focus="emit('select', index)"
             @click-keyword="emit('clickKeyword', $event)"
           />
         </template>