feat: add package download button (#1586)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Philippe Serhal <philippe.serhal@gmail.com>
Co-authored-by: Willow (GHOST) <git@willow.sh>

Author: 5 people

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/Skeleton.vue

@@ -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">

app/pages/package/[[org]]/[name].vue

@@ -771,8 +771,15 @@ const showSkeleton = shallowRef(false)
                 {{ $t('package.get_started.title') }}
               </LinkBase>
             </h2>
-            <!-- Package manager dropdown -->
-            <PackageManagerSelect />
+            <!-- Package manager dropdown + Download button -->
+            <div class="flex items-center gap-2">
+              <PackageDownloadButton
+                v-if="displayVersion"
+                :package-name="pkg.name"
+                :version="displayVersion"
+              />
+              <PackageManagerSelect />
+            </div>
           </div>
           <div>
             <div

i18n/locales/en.json

@@ -630,6 +630,10 @@
       "b": "{size} B",
       "kb": "{size} kB",
       "mb": "{size} MB"
+    },
+    "download": {
+      "button": "Download",
+      "tarball": "Download Tarball as .tar.gz"
     }
   },
   "connector": {

i18n/schema.json

@@ -1896,6 +1896,18 @@
             }
           },
           "additionalProperties": false
+        },
+        "download": {
+          "type": "object",
+          "properties": {
+            "button": {
+              "type": "string"
+            },
+            "tarball": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
         }
       },
       "additionalProperties": false

server/utils/dependency-resolver.ts

@@ -98,6 +98,7 @@ export interface ResolvedPackage {
   name: string
   version: string
   size: number
+  tarballUrl: string
   optional: boolean
   /** Depth level (only when trackDepth is enabled) */
   depth?: DependencyDepth
@@ -152,13 +153,14 @@ export async function resolveDependencyTree(
         if (!matchesPlatform(versionData)) return
 
         const size = (versionData.dist as { unpackedSize?: number })?.unpackedSize ?? 0
+        const tarballUrl = versionData.dist?.tarball ?? ''
         const key = `${name}@${version}`
 
         // Build path for this package (path to parent + this package with version)
         const currentPath = [...path, `${name}@${version}`]
 
         if (!resolved.has(key)) {
-          const pkg: ResolvedPackage = { name, version, size, optional }
+          const pkg: ResolvedPackage = { name, version, size, tarballUrl, optional }
           if (options.trackDepth) {
             pkg.depth = level === 0 ? 'root' : level === 1 ? 'direct' : 'transitive'
             pkg.path = currentPath

server/utils/install-size.ts

@@ -27,6 +27,7 @@ export const calculateInstallSize = defineCachedFunction(
         name: dep.name,
         version: dep.version,
         size: dep.size,
+        tarballUrl: dep.tarballUrl,
         optional: dep.optional || undefined,
       })
       totalSize += dep.size

shared/types/install-size.ts

@@ -2,6 +2,7 @@ export interface DependencySize {
   name: string
   version: string
   size: number
+  tarballUrl: string
   /** True if this is an optional dependency */
   optional?: boolean
 }

test/nuxt/a11y.spec.ts

@@ -187,6 +187,7 @@ import {
   PackageListControls,
   PackageListToolbar,
   PackageMaintainers,
+  PackageDownloadButton,
   PackageManagerSelect,
   PackageMetricsBadges,
   PackagePlaygrounds,
@@ -2983,6 +2984,23 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('PackageDownloadButton', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageDownloadButton, {
+        props: {
+          packageName: 'vue',
+          version: {
+            version: '3.5.0',
+            dist: { tarball: 'https://registry.npmjs.org/vue/-/vue-3.5.0.tgz' },
+          } as any,
+          dependencies: null,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   // Diff components
   describe('DiffFileTree', () => {
     const mockFiles = [