Merge branch 'npmx-dev:main' into feat/changelog-1

Author: WilcoSp

app/components/CallToAction.vue

@@ -25,6 +25,18 @@ const socialLinks = computed(() => [
     ctaKey: $t('about.get_involved.follow.cta'),
   },
 ])
+
+function handleCardClick(event: MouseEvent) {
+  if ((event.target as HTMLElement).closest(':any-link')) return
+  if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return
+
+  const selection = window.getSelection()
+  if (selection && selection.type === 'Range') return
+
+  const card = event.currentTarget as HTMLElement
+  const link = card.querySelector('a')
+  link?.click()
+}
 </script>
 
 <template>
@@ -37,15 +49,16 @@ const socialLinks = computed(() => [
       <div
         v-for="link in socialLinks"
         :key="link.id"
-        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
+        @click="handleCardClick"
+        class="cursor-pointer group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
       >
-        <h3 class="z-1 flex gap-2">
+        <h3 class="flex gap-2">
           <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
             {{ link.titleKey }}
           </span>
         </h3>
-        <p class="z-1 text-sm text-fg-muted leading-relaxed">
+        <p class="text-sm text-fg-muted leading-relaxed">
           {{ link.descriptionKey }}
         </p>
         <a
@@ -56,7 +69,6 @@ const socialLinks = computed(() => [
         >
           {{ link.ctaKey }}
           <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-          <span class="absolute z-0 inset-0" aria-hidden="true" />
         </a>
       </div>
     </div>

app/components/Code/DirectoryListing.vue

@@ -120,10 +120,7 @@ const bytesFormatter = useBytesFormatter()
               </svg>
               <span class="w-full flex justify-self-stretch items-center gap-2">
                 <span class="flex-1">{{ node.name }}</span>
-                <span
-                  v-if="node.type === 'file' && node.size"
-                  class="text-end text-xs text-fg-subtle"
-                >
+                <span v-if="typeof node.size === 'number'" class="text-end text-xs text-fg-subtle">
                   {{ bytesFormatter.format(node.size) }}
                 </span>
               </span>

app/components/Compare/PackageSelector.vue

@@ -105,14 +105,20 @@ function handleKeydown(e: KeyboardEvent) {
     case 'ArrowDown':
       e.preventDefault()
       if (count === 0) return
-      highlightedIndex.value = Math.min(highlightedIndex.value + 1, count - 1)
+      if (highlightedIndex.value < count - 1) {
+        highlightedIndex.value++
+      } else {
+        highlightedIndex.value = 0
+      }
       break
 
     case 'ArrowUp':
       e.preventDefault()
       if (count === 0) return
       if (highlightedIndex.value > 0) {
         highlightedIndex.value--
+      } else {
+        highlightedIndex.value = count - 1
       }
       break
 

app/components/Package/ClaimPackageModal.vue

@@ -3,6 +3,8 @@ import { checkPackageName } from '~/utils/package-name'
 
 const props = defineProps<{
   packageName: string
+  packageScope?: string | null
+  canPublishToScope: boolean
 }>()
 
 const {
@@ -221,9 +223,19 @@ const previewPackageJson = computed(() => {
       </div>
 
       <!-- Availability status -->
-      <div v-if="checkResult.valid">
+      <template v-if="checkResult.valid">
         <div
-          v-if="checkResult.available"
+          v-if="isConnected && !canPublishToScope"
+          class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"
+        >
+          <span class="i-lucide:x text-red-500 w-5 h-5" aria-hidden="true" />
+          <p class="font-mono text-sm text-fg">
+            {{ $t('claim.modal.missing_permission', { scope: packageScope }) }}
+          </p>
+        </div>
+
+        <div
+          v-else-if="checkResult.available"
           class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
         >
           <span class="i-lucide:check text-green-500 w-5 h-5" aria-hidden="true" />
@@ -237,10 +249,10 @@ const previewPackageJson = computed(() => {
           <span class="i-lucide:x text-red-500 w-5 h-5" aria-hidden="true" />
           <p class="font-mono text-sm text-fg">{{ $t('claim.modal.taken') }}</p>
         </div>
-      </div>
+      </template>
 
       <!-- Similar packages warning -->
-      <div v-if="checkResult.similarPackages?.length && checkResult.available">
+      <template v-if="checkResult.similarPackages?.length && checkResult.available">
         <div
           :class="
             hasDangerousSimilarPackages
@@ -290,7 +302,7 @@ const previewPackageJson = computed(() => {
             </li>
           </ul>
         </div>
-      </div>
+      </template>
 
       <!-- Error message -->
       <div
@@ -336,7 +348,7 @@ const previewPackageJson = computed(() => {
         </div>
 
         <!-- Claim button -->
-        <div v-else class="space-y-3">
+        <div v-else-if="isConnected && canPublishToScope" class="space-y-3">
           <p class="text-sm text-fg-muted">
             {{ $t('claim.modal.publish_hint') }}
           </p>

app/components/Package/Table.vue

@@ -193,7 +193,7 @@ function getColumnLabel(id: ColumnId): string {
               <template v-if="isSortable('downloads')">
                 <span
                   v-if="isColumnSorted('downloads')"
-                  class="i-lucide:caret-down w-3 h-3"
+                  class="i-lucide:chevron-down w-3 h-3"
                   :class="getSortDirection('downloads') === 'asc' ? 'rotate-180' : ''"
                   aria-hidden="true"
                 />
@@ -231,7 +231,7 @@ function getColumnLabel(id: ColumnId): string {
               <template v-if="isSortable('updated')">
                 <span
                   v-if="isColumnSorted('updated')"
-                  class="i-lucide:caret-down w-3 h-3"
+                  class="i-lucide:chevron-down w-3 h-3"
                   :class="getSortDirection('updated') === 'asc' ? 'rotate-180' : ''"
                   aria-hidden="true"
                 />

app/components/Package/WeeklyDownloadStats.vue

@@ -362,6 +362,7 @@ const config = computed(() => {
 .vue-ui-sparkline-title span {
   padding: 0 !important;
   letter-spacing: 0.04rem;
+  @apply font-mono;
 }
 
 .vue-ui-sparkline text {

app/components/ReadmeTocDropdown.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { TocItem } from '#shared/types/readme'
 import { onClickOutside, useEventListener } from '@vueuse/core'
+import { decodeHtmlEntities } from '~/utils/formatters'
 
 const props = defineProps<{
   toc: TocItem[]
@@ -201,7 +202,7 @@ function handleKeydown(event: KeyboardEvent) {
             @click="select()"
             @mouseenter="highlightedIndex = getIndex(node.id)"
           >
-            <span class="truncate">{{ node.text }}</span>
+            <span class="truncate">{{ decodeHtmlEntities(node.text) }}</span>
           </NuxtLink>
 
           <template v-for="child in node.children" :key="child.id">
@@ -219,7 +220,7 @@ function handleKeydown(event: KeyboardEvent) {
               @click="select()"
               @mouseenter="highlightedIndex = getIndex(child.id)"
             >
-              <span class="truncate">{{ child.text }}</span>
+              <span class="truncate">{{ decodeHtmlEntities(child.text) }}</span>
             </NuxtLink>
 
             <NuxtLink
@@ -240,7 +241,7 @@ function handleKeydown(event: KeyboardEvent) {
               @click="select()"
               @mouseenter="highlightedIndex = getIndex(grandchild.id)"
             >
-              <span class="truncate">{{ grandchild.text }}</span>
+              <span class="truncate">{{ decodeHtmlEntities(grandchild.text) }}</span>
             </NuxtLink>
           </template>
         </template>

app/composables/useNumberFormatter.ts

@@ -16,19 +16,21 @@ export const useBytesFormatter = () => {
   const decimalNumberFormatter = useNumberFormatter({
     maximumFractionDigits: 1,
   })
+  const KB = 1000
+  const MB = 1000 * 1000
 
   return {
     format: (bytes: number) => {
-      if (bytes < 1024)
+      if (bytes < KB)
         return t('package.size.b', {
           size: decimalNumberFormatter.value.format(bytes),
         })
-      if (bytes < 1024 * 1024)
+      if (bytes < MB)
         return t('package.size.kb', {
-          size: decimalNumberFormatter.value.format(bytes / 1024),
+          size: decimalNumberFormatter.value.format(bytes / KB),
         })
       return t('package.size.mb', {
-        size: decimalNumberFormatter.value.format(bytes / (1024 * 1024)),
+        size: decimalNumberFormatter.value.format(bytes / MB),
       })
     },
   }

app/pages/search.vue

@@ -332,14 +332,13 @@ const canPublishToScope = computed(() => {
   return orgMembership.value[scope] === true
 })
 
-// Show claim prompt when valid name, available, connected, and has permission
+// Show claim prompt when valid name, available, either not connected or connected and has permission
 const showClaimPrompt = computed(() => {
   return (
-    isConnected.value &&
     isValidPackageName.value &&
     packageAvailability.value?.available === true &&
     packageAvailability.value.name === query.value.trim() &&
-    canPublishToScope.value &&
+    (!isConnected.value || (isConnected.value && canPublishToScope.value)) &&
     status.value !== 'pending'
   )
 })
@@ -569,7 +568,7 @@ defineOgImageComponent('Default', {
           <!-- Claim prompt - shown at top when valid name but no exact match -->
           <div
             v-if="showClaimPrompt && visibleResults.total > 0"
-            class="mb-6 p-4 bg-bg-subtle border border-border rounded-lg flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4"
+            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">
@@ -687,7 +686,7 @@ defineOgImageComponent('Default', {
             </div>
 
             <!-- Offer to claim the package name if it's valid -->
-            <div v-if="showClaimPrompt" class="max-w-md mx-auto text-center">
+            <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
@@ -741,6 +740,11 @@ defineOgImageComponent('Default', {
     </div>
 
     <!-- Claim package modal -->
-    <PackageClaimPackageModal ref="claimPackageModalRef" :package-name="query" />
+    <PackageClaimPackageModal
+      ref="claimPackageModalRef"
+      :package-name="query"
+      :package-scope="packageScope"
+      :can-publish-to-scope="canPublishToScope"
+    />
   </main>
 </template>