Merge branch 'main' into fix-types-badge

Author: gameroman

app/components/BackButton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const router = useRouter()
+const canGoBack = useCanGoBack()
+</script>
+
+<template>
+  <button
+    v-if="canGoBack"
+    type="button"
+    class="inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+    @click="router.back()"
+  >
+    <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+    <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
+  </button>
+</template>

app/components/Package/DownloadButton.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { SlimPackumentVersion } from '#shared/types'
+
+const props = defineProps<{
+  packageName: string
+  version: SlimPackumentVersion
+}>()
+
+const loading = shallowRef(false)
+
+async function getDownloadUrl(tarballUrl: string) {
+  try {
+    const response = await fetch(tarballUrl)
+    if (!response.ok) {
+      throw new Error(`Failed to fetch tarball (${response.status})`)
+    }
+    const blob = await response.blob()
+    return URL.createObjectURL(blob)
+  } catch (error) {
+    // oxlint-disable-next-line no-console -- error logging
+    console.error('failed to fetch tarball', { cause: error })
+    return null
+  }
+}
+
+async function downloadPackage() {
+  const tarballUrl = props.version.dist.tarball
+  if (!tarballUrl) return
+
+  if (loading.value) return
+  loading.value = true
+
+  const downloadUrl = await getDownloadUrl(tarballUrl)
+
+  const link = document.createElement('a')
+  link.href = downloadUrl ?? tarballUrl
+  link.download = `${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+
+  if (downloadUrl) {
+    URL.revokeObjectURL(downloadUrl)
+  }
+
+  loading.value = false
+}
+</script>
+
+<template>
+  <TooltipApp :text="$t('package.download.tarball')">
+    <ButtonBase
+      ref="triggerRef"
+      v-bind="$attrs"
+      type="button"
+      @click="downloadPackage"
+      :disabled="loading"
+      class="border-border-subtle bg-bg-subtle! text-xs text-fg-muted hover:enabled:(text-fg border-border-hover)"
+    >
+      <span
+        class="size-[1em]"
+        aria-hidden="true"
+        :class="loading ? 'i-lucide:loader-circle animate-spin' : 'i-lucide:download'"
+      />
+      {{ $t('package.download.button') }}
+    </ButtonBase>
+  </TooltipApp>
+</template>

app/components/Package/ExternalLinks.vue

@@ -23,15 +23,6 @@ const homepageUrl = computed(() => {
   return homepage
 })
 
-const fundingUrl = computed(() => {
-  let funding = displayVersion.value?.funding
-  if (Array.isArray(funding)) funding = funding[0]
-
-  if (!funding) return null
-
-  return typeof funding === 'string' ? funding : funding.url
-})
-
 const PROVIDER_ICONS: Record<string, IconClass> = {
   github: 'i-simple-icons:github',
   gitlab: 'i-simple-icons:gitlab',
@@ -97,10 +88,5 @@ const repoProviderIcon = computed((): IconClass => {
         {{ $t('package.links.jsr') }}
       </LinkBase>
     </li>
-    <li v-if="fundingUrl">
-      <LinkBase :to="fundingUrl" classicon="i-lucide:heart">
-        {{ $t('package.links.fund') }}
-      </LinkBase>
-    </li>
   </ul>
 </template>

app/components/Package/Header.vue

@@ -241,6 +241,15 @@ const likeAction = async () => {
     isLikeActionPending.value = false
   }
 }
+
+const fundingUrl = computed(() => {
+  let funding = props.displayVersion?.funding
+  if (Array.isArray(funding)) funding = funding[0]
+
+  if (!funding) return null
+
+  return typeof funding === 'string' ? funding : funding.url
+})
 </script>
 
 <template>
@@ -276,7 +285,7 @@ const likeAction = async () => {
           aria-keyshortcuts="c"
           classicon="i-lucide:git-compare"
         >
-          <span class="max-sm:sr-only">{{ $t('package.links.compare') }}</span>
+          <span class="max-sm:sr-only">{{ $t('package.links.compare_this_package') }}</span>
         </LinkBase>
         <!-- Package likes -->
         <TooltipApp
@@ -312,6 +321,15 @@ const likeAction = async () => {
             </span>
           </ButtonBase>
         </TooltipApp>
+
+        <LinkBase
+          variant="button-secondary"
+          v-if="fundingUrl"
+          :to="fundingUrl"
+          classicon="i-lucide:handshake text-accent"
+        >
+          <span class="max-sm:sr-only">{{ $t('package.links.fund') }}</span>
+        </LinkBase>
       </div>
     </div>
   </header>

app/components/Package/Skeleton.vue

@@ -2,24 +2,24 @@
 
 <template>
   <!-- Package header — matches area-header in [...name].vue -->
-  <header class="bg-[--bg] pt-5 pb-1 w-full container">
-    <div class="min-w-0">
-      <!-- Package name -->
-      <div class="min-w-0 flex items-center gap-2 justify-between">
-        <h1 class="font-mono text-2xl sm:text-3xl font-medium">
-          <SkeletonInline class="block! h-9 w-48" />
-        </h1>
-        <div class="flex gap-1">
-          <!-- Compare placeholder -->
-          <SkeletonBlock class="w-9 md:w-40 h-9 rounded self-baseline" />
-          <!-- Likes button placeholder -->
-          <SkeletonBlock class="w-14 h-9 rounded self-baseline" />
-        </div>
+  <header class="bg-bg pt-6 pb-2 pb-1 w-full container">
+    <!-- Package name -->
+    <div class="flex items-baseline justify-between gap-x-2 gap-y-1 flex-wrap min-w-0">
+      <h1 class="font-mono text-2xl sm:text-3xl font-medium">
+        <SkeletonInline class="block! h-9 w-48" />
+      </h1>
+      <div class="flex gap-2 flex-wrap items-stretch">
+        <!-- Compare placeholder -->
+        <SkeletonBlock class="w-9 md:w-36 h-9 rounded" />
+        <!-- Likes button placeholder -->
+        <SkeletonBlock class="w-14 h-9 rounded" />
+        <!-- Fund link placeholder -->
+        <SkeletonBlock class="w-22 h-9 rounded self-baseline" />
       </div>
     </div>
   </header>
 
-  <div class="sticky top-14 z-1 pt-3 bg-bg border-b border-border w-full">
+  <div class="w-full bg-bg sticky top-14 z-10 border-b border-border pt-2">
     <div class="w-full container flex flex-col md:flex-row-reverse flex-wrap gap-2 justify-between">
       <!-- Version -->
       <span class="inline-flex items-baseline font-mono text-base sm:text-lg shrink-0">
@@ -132,8 +132,11 @@
         <h2 class="text-xs font-mono text-fg-subtle uppercase tracking-wider">
           {{ $t('package.get_started.title') }}
         </h2>
-        <!-- Package manager select placeholder -->
-        <SkeletonInline class="h-7 w-24 rounded" />
+        <!-- Download button + Package manager select placeholder -->
+        <div class="flex items-center gap-2">
+          <SkeletonInline class="h-7 w-24 rounded" />
+          <SkeletonInline class="h-7 w-24 rounded" />
+        </div>
       </div>
       <!-- Terminal-style install command — matches TerminalInstall.vue -->
       <div class="bg-bg-subtle border border-border rounded-lg overflow-hidden">
@@ -176,7 +179,7 @@
     <!-- Sidebar — matches area-sidebar in [...name].vue -->
     <div class="area-sidebar">
       <div
-        class="sticky top-30 xl:top-14 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(max-h-[calc(100dvh-6rem)])"
+        class="space-y-6 sm:space-y-8 min-w-0 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(max-h-[calc(100dvh-6rem)])"
       >
         <div class="flex flex-col gap-4 sm:gap-6 xl:pt-4">
           <!-- Download stats — matches CollapsibleSection + sparkline skeleton -->

app/components/Settings/AccentColorPicker.vue

@@ -29,7 +29,7 @@ onPrehydrate(el => {
   <fieldset
     class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
   >
-    <legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
+    <legend class="sr-only">{{ $t('settings.accent_colors.label') }}</legend>
     <label
       v-for="color in accentColors"
       :key="color.id"
@@ -43,7 +43,7 @@ onPrehydrate(el => {
         class="sr-only"
         :value="color.id"
         :checked="selectedAccentColor === color.id || (!selectedAccentColor && color.id === 'sky')"
-        :aria-label="color.id === 'neutral' ? $t('settings.clear_accent') : color.name"
+        :aria-label="color.label"
         @change="setAccentColor(color.id)"
       />
       <span v-if="color.id === 'neutral'" class="i-lucide:ban size-4 text-bg" aria-hidden="true" />

app/components/Settings/BgThemePicker.vue

@@ -27,7 +27,7 @@ onPrehydrate(el => {
   <fieldset
     class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
   >
-    <legend class="sr-only">{{ $t('settings.background_themes') }}</legend>
+    <legend class="sr-only">{{ $t('settings.background_themes.label') }}</legend>
     <label
       v-for="theme in backgroundThemes"
       :key="theme.id"
@@ -43,7 +43,7 @@ onPrehydrate(el => {
           selectedBackgroundTheme === theme.id ||
           (!selectedBackgroundTheme && theme.id === 'neutral')
         "
-        :aria-label="theme.name"
+        :aria-label="theme.label"
         @change="setBackgroundTheme(theme.id)"
       />
     </label>

app/composables/useSettings.ts

@@ -135,14 +135,25 @@ export const useKeyboardShortcuts = createSharedComposable(function useKeyboardS
 export function useAccentColor() {
   const { settings } = useSettings()
   const colorMode = useColorMode()
+  const { t } = useI18n()
+
+  const accentColorLabels = computed<Record<AccentColorId, string>>(() => ({
+    sky: t('settings.accent_colors.sky'),
+    coral: t('settings.accent_colors.coral'),
+    amber: t('settings.accent_colors.amber'),
+    emerald: t('settings.accent_colors.emerald'),
+    violet: t('settings.accent_colors.violet'),
+    magenta: t('settings.accent_colors.magenta'),
+    neutral: t('settings.clear_accent'),
+  }))
 
   const accentColors = computed(() => {
     const isDark = colorMode.value === 'dark'
     const colors = isDark ? ACCENT_COLORS.dark : ACCENT_COLORS.light
 
     return Object.entries(colors).map(([id, value]) => ({
       id: id as AccentColorId,
-      name: id,
+      label: accentColorLabels.value[id as AccentColorId],
       value,
     }))
   })
@@ -190,12 +201,24 @@ export function useSearchProvider() {
 }
 
 export function useBackgroundTheme() {
-  const backgroundThemes = Object.entries(BACKGROUND_THEMES).map(([id, value]) => ({
-    id: id as BackgroundThemeId,
-    name: id,
-    value,
+  const { t } = useI18n()
+
+  const bgThemeLabels = computed<Record<BackgroundThemeId, string>>(() => ({
+    neutral: t('settings.background_themes.neutral'),
+    stone: t('settings.background_themes.stone'),
+    zinc: t('settings.background_themes.zinc'),
+    slate: t('settings.background_themes.slate'),
+    black: t('settings.background_themes.black'),
   }))
 
+  const backgroundThemes = computed(() =>
+    Object.entries(BACKGROUND_THEMES).map(([id, value]) => ({
+      id: id as BackgroundThemeId,
+      label: bgThemeLabels.value[id as BackgroundThemeId],
+      value,
+    })),
+  )
+
   const { settings } = useSettings()
 
   function setBackgroundTheme(id: BackgroundThemeId | null) {

app/pages/about.vue

@@ -3,9 +3,6 @@ import type { Role } from '#server/api/contributors.get'
 import { SPONSORS } from '~/assets/logos/sponsors'
 import { OSS_PARTNERS } from '~/assets/logos/oss-partners'
 
-const router = useRouter()
-const canGoBack = useCanGoBack()
-
 useSeoMeta({
   title: () => `${$t('about.title')} - npmx`,
   ogTitle: () => `${$t('about.title')} - npmx`,
@@ -57,15 +54,7 @@ const roleLabels = computed(
           <h1 class="font-mono text-3xl sm:text-4xl font-medium">
             {{ $t('about.heading') }}
           </h1>
-          <button
-            type="button"
-            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
-            @click="router.back()"
-            v-if="canGoBack"
-          >
-            <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>
+          <BackButton />
         </div>
         <p class="text-fg-muted text-lg">
           {{ $t('tagline') }}

app/pages/accessibility.vue

@@ -12,9 +12,6 @@ defineOgImageComponent('Default', {
   title: () => $t('a11y.title'),
   description: () => $t('a11y.welcome', { app: 'npmx' }),
 })
-
-const router = useRouter()
-const canGoBack = useCanGoBack()
 </script>
 
 <template>
@@ -25,15 +22,7 @@ const canGoBack = useCanGoBack()
           <h1 class="font-mono text-3xl sm:text-4xl font-medium">
             {{ $t('a11y.title') }}
           </h1>
-          <button
-            type="button"
-            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"
-            @click="router.back()"
-            v-if="canGoBack"
-          >
-            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-            <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
-          </button>
+          <BackButton />
         </div>
       </header>