Merge branch 'main' into refactor-remove-class-shortcuts

Author: essenmitsosse

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["oxc.oxc-vscode", "Vue.volar", "lokalise.i18n-ally"]
+  "recommendations": ["oxc.oxc-vscode", "Vue.volar", "lokalise.i18n-ally", "antfu.unocss"]
 }

app/app.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Directions } from '@nuxtjs/i18n'
 import { useEventListener } from '@vueuse/core'
+import { isEditableElement } from '~/utils/input'
 
 const route = useRoute()
 const router = useRouter()
@@ -39,12 +40,7 @@ if (import.meta.server) {
 // "/" focuses search or navigates to search page
 // "?" highlights all keyboard shortcut elements
 function handleGlobalKeydown(e: KeyboardEvent) {
-  const target = e.target as HTMLElement
-
-  const isEditableTarget =
-    target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
-
-  if (isEditableTarget) return
+  if (isEditableElement(e.target)) return
 
   if (e.key === '/') {
     e.preventDefault()

app/components/AppHeader.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { isEditableElement } from '~/utils/input'
+
 withDefaults(
   defineProps<{
     showLogo?: boolean
@@ -62,11 +64,7 @@ function handleSearchFocus() {
 onKeyStroke(
   ',',
   e => {
-    // 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
-    }
+    if (isEditableElement(e.target)) return
 
     e.preventDefault()
     navigateTo('/settings')
@@ -79,12 +77,7 @@ onKeyStroke(
   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
-    }
+    if (isEditableElement(e.target)) return
 
     e.preventDefault()
     navigateTo('/compare')

app/components/Card.vue

@@ -9,7 +9,7 @@ defineProps<{
 
 <template>
   <article
-    class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer 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 bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer 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,

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,10 +19,6 @@ const isExactMatch = computed(() => {
   const name = props.result.package.name.toLowerCase()
   return query === name
 })
-
-const emit = defineEmits<{
-  focus: [index: number]
-}>()
 </script>
 
 <template>
@@ -38,8 +33,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/PackageMetricsBadges.vue

@@ -3,6 +3,7 @@ import { NuxtLink } from '#components'
 
 const props = defineProps<{
   packageName: string
+  isBinary?: boolean
   version?: string
 }>()
 
@@ -43,7 +44,7 @@ const typesTooltip = computed(() => {
 
 const typesHref = computed(() => {
   if (!analysis.value) return null
-  if (analysis.value.types.kind === '@types') {
+  if (analysis.value.types?.kind === '@types') {
     return `/${analysis.value.types.packageName}`
   }
   return null
@@ -53,59 +54,62 @@ const typesHref = computed(() => {
 <template>
   <ul v-if="analysis" class="flex items-center gap-1.5 list-none m-0 p-0">
     <!-- TypeScript types badge -->
-    <li>
-      <component
-        :is="typesHref ? NuxtLink : 'span'"
-        :to="typesHref"
-        class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
-        :class="[
-          hasTypes
-            ? 'text-fg-muted bg-bg-muted border border-border'
-            : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
-          typesHref
-            ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50'
-            : '',
-        ]"
-        :title="typesTooltip"
-      >
-        <span
-          class="w-3 h-3"
-          :class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
-          aria-hidden="true"
-        />
-        {{ $t('package.metrics.types_label') }}
-      </component>
+    <li v-if="!props.isBinary">
+      <AppTooltip :text="typesTooltip">
+        <component
+          :is="typesHref ? NuxtLink : 'span'"
+          :to="typesHref"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
+          :class="[
+            hasTypes
+              ? 'text-fg-muted bg-bg-muted border border-border'
+              : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
+            typesHref
+              ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50'
+              : '',
+          ]"
+        >
+          <span
+            class="w-3 h-3"
+            :class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
+            aria-hidden="true"
+          />
+          {{ $t('package.metrics.types_label') }}
+        </component>
+      </AppTooltip>
     </li>
 
     <!-- ESM badge (show with X if missing) -->
     <li>
-      <span
-        class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
-        :class="
-          hasEsm
-            ? 'text-fg-muted bg-bg-muted border border-border'
-            : 'text-fg-subtle bg-bg-subtle border border-border-subtle'
-        "
-        :title="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
-      >
+      <AppTooltip :text="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')">
         <span
-          class="w-3 h-3"
-          :class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
-          aria-hidden="true"
-        />
-        ESM
-      </span>
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
+          :class="
+            hasEsm
+              ? 'text-fg-muted bg-bg-muted border border-border'
+              : 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+          "
+        >
+          <span
+            class="w-3 h-3"
+            :class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
+            aria-hidden="true"
+          />
+          ESM
+        </span>
+      </AppTooltip>
     </li>
 
     <!-- CJS badge (only show if present) -->
     <li v-if="hasCjs">
-      <span
-        class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
-        :title="$t('package.metrics.cjs')"
-      >
-        <span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
-        CJS
-      </span>
+      <AppTooltip :text="$t('package.metrics.cjs')">
+        <span
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
+        >
+          <span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
+          CJS
+        </span>
+      </AppTooltip>
     </li>
   </ul>
 </template>