From f5c594b9af18bb99363f866e30dce1bd1c10d848 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sun, 22 Feb 2026 21:30:21 +0100
Subject: [PATCH 1/5] feat: Add download button component and install size
 types

---
 app/components/Button/Base.vue            |  11 +-
 app/components/Package/DownloadButton.vue | 225 ++++++++++++++++++++++
 app/pages/package/[[org]]/[name].vue      |  21 +-
 i18n/locales/en.json                      |   5 +
 i18n/schema.json                          |  15 ++
 lunaria/files/en-GB.json                  |   5 +
 lunaria/files/en-US.json                  |   5 +
 server/utils/dependency-resolver.ts       |   4 +-
 server/utils/install-size.ts              |  27 +--
 shared/types/index.ts                     |   1 +
 shared/types/install-size.ts              |  26 +++
 11 files changed, 307 insertions(+), 38 deletions(-)
 create mode 100644 app/components/Package/DownloadButton.vue
 create mode 100644 shared/types/install-size.ts

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index b16ac583b..e30cb1a03 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -5,7 +5,7 @@ const props = withDefaults(
   defineProps<{
     disabled?: boolean
     type?: 'button' | 'submit'
-    variant?: 'primary' | 'secondary'
+    variant?: 'primary' | 'secondary' | 'subtle'
     size?: 'small' | 'medium'
     ariaKeyshortcuts?: string
     block?: boolean
@@ -30,16 +30,21 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group gap-x-1 items-center justify-center font-mono border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,
       'text-sm px-4 py-2': size === 'medium',
-      'text-xs px-2 py-0.5': size === 'small',
+      'text-xs px-2 py-0.5': size === 'small' && variant !== 'subtle',
+      'text-xs px-2 py-2': size === 'small' && variant === 'subtle',
+      'border-border': variant !== 'subtle',
+      'border-border-subtle': variant === 'subtle',
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant === 'primary',
+      'bg-bg-subtle text-fg-muted hover:enabled:(text-fg border-border-hover) focus-visible:enabled:(text-fg border-border-hover) active:enabled:scale-95':
+        variant === 'subtle',
     }"
     :type="props.type"
     :disabled="
diff --git a/app/components/Package/DownloadButton.vue b/app/components/Package/DownloadButton.vue
new file mode 100644
index 000000000..754b24519
--- /dev/null
+++ b/app/components/Package/DownloadButton.vue
@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import type { SlimPackumentVersion, InstallSizeResult } from '#shared/types'
+import { onClickOutside, useEventListener } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    packageName: string
+    version: SlimPackumentVersion
+    installSize: InstallSizeResult | null
+    size?: 'small' | 'medium'
+  }>(),
+  {
+    size: 'medium',
+  },
+)
+
+const triggerRef = useTemplateRef('triggerRef')
+const listRef = useTemplateRef('listRef')
+const isOpen = shallowRef(false)
+const highlightedIndex = shallowRef(-1)
+const dropdownPosition = shallowRef<{ top: number; right: number } | null>(null)
+
+const menuId = useId()
+const menuItems = computed(() => [
+  { id: 'package', label: $t('package.download.package'), icon: 'i-lucide:package' },
+  { id: 'dependencies', label: $t('package.download.dependencies'), icon: 'i-lucide:list-tree' },
+])
+
+function getDropdownStyle(): Record<string, string> {
+  if (!dropdownPosition.value) return {}
+  return {
+    top: `${dropdownPosition.value.top}px`,
+    right: `${document.documentElement.clientWidth - dropdownPosition.value.right}px`,
+  }
+}
+
+function toggle() {
+  if (isOpen.value) {
+    close()
+  } else {
+    const rect = triggerRef.value?.$el?.getBoundingClientRect()
+    if (rect) {
+      dropdownPosition.value = {
+        top: rect.bottom + 4,
+        right: rect.right,
+      }
+    }
+    isOpen.value = true
+    highlightedIndex.value = 0
+  }
+}
+
+function close() {
+  isOpen.value = false
+  highlightedIndex.value = -1
+}
+
+onClickOutside(listRef, close, { ignore: [triggerRef] })
+
+function handleKeydown(event: KeyboardEvent) {
+  if (!isOpen.value) {
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      toggle()
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      highlightedIndex.value = (highlightedIndex.value + 1) % menuItems.value.length
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      highlightedIndex.value =
+        highlightedIndex.value <= 0 ? menuItems.value.length - 1 : highlightedIndex.value - 1
+      break
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      handleAction(menuItems.value[highlightedIndex.value]?.id)
+      break
+    case 'Escape':
+      event.preventDefault()
+      close()
+      triggerRef.value?.$el?.focus()
+      break
+    case 'Tab':
+      close()
+      break
+  }
+}
+
+function handleAction(id: string | undefined) {
+  if (id === 'package') {
+    downloadPackage()
+  } else if (id === 'dependencies') {
+    downloadDependenciesScript()
+  }
+  close()
+}
+
+function downloadPackage() {
+  const tarballUrl = props.version.dist.tarball
+  if (!tarballUrl) return
+
+  const link = document.createElement('a')
+  link.href = tarballUrl
+  link.download = `${props.packageName}-${props.version.version}.tgz`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+function downloadDependenciesScript() {
+  if (!props.installSize) return
+
+  const lines = [
+    '#!/bin/bash',
+    `# Download dependencies for ${props.packageName}@${props.version.version}`,
+    'mkdir -p node_modules',
+    '',
+  ]
+
+  // Add root package
+  const rootTarball = (props.version.dist as any).tarball
+  if (rootTarball) {
+    lines.push(`# ${props.packageName}@${props.version.version}`)
+    lines.push(
+      `curl -L ${rootTarball} -o ${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`,
+    )
+  }
+
+  // Add dependencies
+  props.installSize.dependencies.forEach((dep: any) => {
+    lines.push(`# ${dep.name}@${dep.version}`)
+    lines.push(`curl -L ${dep.tarballUrl} -o ${dep.name.replace(/\//g, '__')}-${dep.version}.tgz`)
+  })
+
+  const blob = new Blob([lines.join('\n')], { type: 'text/x-shellscript' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `download-${props.packageName.replace(/\//g, '__')}-deps.sh`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
+const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
+
+useEventListener('scroll', () => isOpen.value && close(), { passive: true })
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <ButtonBase
+    ref="triggerRef"
+    v-bind="$attrs"
+    type="button"
+    :variant="size === 'small' ? 'subtle' : 'secondary'"
+    :size="size"
+    classicon="i-lucide:download"
+    :aria-expanded="isOpen"
+    aria-haspopup="menu"
+    :aria-controls="menuId"
+    @click="toggle"
+    @keydown="handleKeydown"
+  >
+    {{ $t('package.download.button') }}
+    <span
+      class="i-lucide:chevron-down ms-1"
+      :class="[
+        size === 'small' ? 'w-3 h-3' : 'w-3.5 h-3.5',
+        { 'rotate-180': isOpen },
+        prefersReducedMotion ? '' : 'transition-transform duration-200',
+      ]"
+      aria-hidden="true"
+    />
+  </ButtonBase>
+
+  <Teleport to="body">
+    <Transition
+      :enter-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-150'"
+      :enter-from-class="prefersReducedMotion ? '' : 'opacity-0'"
+      enter-to-class="opacity-100"
+      :leave-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-100'"
+      leave-from-class="opacity-100"
+      :leave-to-class="prefersReducedMotion ? '' : 'opacity-0'"
+    >
+      <div
+        v-if="isOpen"
+        :id="menuId"
+        ref="listRef"
+        role="menu"
+        :style="getDropdownStyle()"
+        class="fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50 py-1 w-64 overscroll-contain"
+        @keydown="handleKeydown"
+      >
+        <button
+          v-for="(item, index) in menuItems"
+          :key="item.id"
+          role="menuitem"
+          type="button"
+          class="w-full flex items-center gap-2 px-3 py-2 text-sm text-fg-muted transition-colors duration-150"
+          :class="[
+            highlightedIndex === index
+              ? 'bg-bg-elevated text-fg'
+              : 'hover:bg-bg-elevated hover:text-fg',
+          ]"
+          @click="handleAction(item.id)"
+          @mouseenter="highlightedIndex = index"
+        >
+          <span :class="item.icon" class="w-4 h-4" aria-hidden="true" />
+          {{ item.label }}
+        </button>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index de6c114d9..791b3f359 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -7,6 +7,7 @@ import type {
   ReadmeResponse,
   ReadmeMarkdownResponse,
   SkillsListResponse,
+  InstallSizeResult,
 } from '#shared/types'
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import type { IconClass } from '~/types'
@@ -159,13 +160,6 @@ const { data: jsrInfo } = useLazyFetch<JsrPackageInfo>(() => `/api/jsr/${package
 })
 
 // Fetch total install size (lazy, can be slow for large dependency trees)
-interface InstallSizeResult {
-  package: string
-  version: string
-  selfSize: number
-  totalSize: number
-  dependencyCount: number
-}
 const {
   data: installSize,
   status: installSizeStatus,
@@ -1147,8 +1141,17 @@ 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 && installSize"
+              :package-name="pkg.name"
+              :version="displayVersion"
+              :install-size="installSize"
+              size="small"
+            />
+            <PackageManagerSelect />
+          </div>
         </div>
         <div>
           <div
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index bd30ad861..b0c95593d 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -462,6 +462,11 @@
       "b": "{size} B",
       "kb": "{size} kB",
       "mb": "{size} MB"
+    },
+    "download": {
+      "button": "Download",
+      "package": "Download Package (.tgz)",
+      "dependencies": "Download Dependencies (.sh)"
     }
   },
   "connector": {
diff --git a/i18n/schema.json b/i18n/schema.json
index 5511972b1..b074d488d 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1392,6 +1392,21 @@
             }
           },
           "additionalProperties": false
+        },
+        "download": {
+          "type": "object",
+          "properties": {
+            "button": {
+              "type": "string"
+            },
+            "package": {
+              "type": "string"
+            },
+            "dependencies": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
         }
       },
       "additionalProperties": false
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index ddfa1c6a7..38ccc7ec6 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -461,6 +461,11 @@
       "b": "{size} B",
       "kb": "{size} kB",
       "mb": "{size} MB"
+    },
+    "download": {
+      "button": "Download",
+      "package": "Download Package (.tgz)",
+      "dependencies": "Download Dependencies (.sh)"
     }
   },
   "connector": {
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 42c9f3f20..04478c4e6 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -461,6 +461,11 @@
       "b": "{size} B",
       "kb": "{size} kB",
       "mb": "{size} MB"
+    },
+    "download": {
+      "button": "Download",
+      "package": "Download Package (.tgz)",
+      "dependencies": "Download Dependencies (.sh)"
     }
   },
   "connector": {
diff --git a/server/utils/dependency-resolver.ts b/server/utils/dependency-resolver.ts
index 2b89a3c87..323e2e341 100644
--- a/server/utils/dependency-resolver.ts
+++ b/server/utils/dependency-resolver.ts
@@ -107,6 +107,7 @@ export interface ResolvedPackage {
   name: string
   version: string
   size: number
+  tarballUrl: string
   optional: boolean
   /** Depth level (only when trackDepth is enabled) */
   depth?: DependencyDepth
@@ -161,13 +162,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
diff --git a/server/utils/install-size.ts b/server/utils/install-size.ts
index 7705af450..b3075ceb8 100644
--- a/server/utils/install-size.ts
+++ b/server/utils/install-size.ts
@@ -1,28 +1,4 @@
-/**
- * Result of install size calculation
- */
-export interface InstallSizeResult {
-  /** Package name */
-  package: string
-  /** Package version */
-  version: string
-  /** Unpacked size of the package itself (bytes) */
-  selfSize: number
-  /** Total unpacked size including all dependencies (bytes) */
-  totalSize: number
-  /** Number of dependencies (including transitive) */
-  dependencyCount: number
-  /** Breakdown of dependency sizes */
-  dependencies: DependencySize[]
-}
-
-export interface DependencySize {
-  name: string
-  version: string
-  size: number
-  /** True if this is an optional dependency */
-  optional?: boolean
-}
+import type { InstallSizeResult, DependencySize } from '#shared/types'
 
 /**
  * Calculate the total install size for a package.
@@ -53,6 +29,7 @@ export const calculateInstallSize = defineCachedFunction(
         name: dep.name,
         version: dep.version,
         size: dep.size,
+        tarballUrl: dep.tarballUrl,
         optional: dep.optional || undefined,
       })
       totalSize += dep.size
diff --git a/shared/types/index.ts b/shared/types/index.ts
index 88e28afe0..be4274d32 100644
--- a/shared/types/index.ts
+++ b/shared/types/index.ts
@@ -9,3 +9,4 @@ export * from './i18n-status'
 export * from './comparison'
 export * from './skills'
 export * from './version-downloads'
+export * from './install-size'
diff --git a/shared/types/install-size.ts b/shared/types/install-size.ts
new file mode 100644
index 000000000..f3cb8efb0
--- /dev/null
+++ b/shared/types/install-size.ts
@@ -0,0 +1,26 @@
+/**
+ * Result of install size calculation
+ */
+export interface InstallSizeResult {
+  /** Package name */
+  package: string
+  /** Package version */
+  version: string
+  /** Unpacked size of the package itself (bytes) */
+  selfSize: number
+  /** Total unpacked size including all dependencies (bytes) */
+  totalSize: number
+  /** Number of dependencies (including transitive) */
+  dependencyCount: number
+  /** Breakdown of dependency sizes */
+  dependencies: DependencySize[]
+}
+
+export interface DependencySize {
+  name: string
+  version: string
+  size: number
+  tarballUrl: string
+  /** True if this is an optional dependency */
+  optional?: boolean
+}

From b21c8ac773f49c323e42c8a80a10c0129e925199 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sun, 22 Feb 2026 21:31:04 +0100
Subject: [PATCH 2/5] fix: Update function to use correct translation function

---
 app/components/Package/DownloadButton.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/DownloadButton.vue b/app/components/Package/DownloadButton.vue
index 754b24519..6179eb3c3 100644
--- a/app/components/Package/DownloadButton.vue
+++ b/app/components/Package/DownloadButton.vue
@@ -20,10 +20,11 @@ const isOpen = shallowRef(false)
 const highlightedIndex = shallowRef(-1)
 const dropdownPosition = shallowRef<{ top: number; right: number } | null>(null)
 
+const { t } = useI18n()
 const menuId = useId()
 const menuItems = computed(() => [
-  { id: 'package', label: $t('package.download.package'), icon: 'i-lucide:package' },
-  { id: 'dependencies', label: $t('package.download.dependencies'), icon: 'i-lucide:list-tree' },
+  { id: 'package', label: t('package.download.package'), icon: 'i-lucide:package' },
+  { id: 'dependencies', label: t('package.download.dependencies'), icon: 'i-lucide:list-tree' },
 ])
 
 function getDropdownStyle(): Record<string, string> {

From b3419bdce4c38c02e78d607bd3bcacb0f736abfb Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sun, 22 Feb 2026 21:40:57 +0100
Subject: [PATCH 3/5] feat: Add tarball URLs for dependencies

---
 .../server/utils/dependency-analysis.spec.ts  | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/test/unit/server/utils/dependency-analysis.spec.ts b/test/unit/server/utils/dependency-analysis.spec.ts
index 4eda0fa98..d60333f66 100644
--- a/test/unit/server/utils/dependency-analysis.spec.ts
+++ b/test/unit/server/utils/dependency-analysis.spec.ts
@@ -101,6 +101,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'direct' as const,
             path: ['test-pkg@1.0.0', 'dep-a@2.0.0'],
+            tarballUrl: 'https://example.com/dep-a-2.0.0.tgz',
           },
         ],
       ])
@@ -127,6 +128,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['vuln-pkg@1.0.0'],
+            tarballUrl: 'https://example.com/vuln-pkg-1.0.0.tgz',
           },
         ],
       ])
@@ -181,6 +183,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['root@1.0.0'],
+            tarballUrl: 'https://example.com/root-1.0.0.tgz',
           },
         ],
         [
@@ -192,6 +195,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'transitive' as const,
             path: ['root@1.0.0', 'middle@1.5.0', 'vuln-dep@2.0.0'],
+            tarballUrl: 'https://example.com/vuln-dep-2.0.0.tgz',
           },
         ],
       ])
@@ -231,6 +235,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['root@1.0.0'],
+            tarballUrl: 'https://example.com/root-1.0.0.tgz',
           },
         ],
         [
@@ -242,6 +247,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'direct' as const,
             path: ['root@1.0.0', 'direct-dep@1.0.0'],
+            tarballUrl: 'https://example.com/direct-dep-1.0.0.tgz',
           },
         ],
         [
@@ -253,6 +259,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'transitive' as const,
             path: ['root@1.0.0', 'direct-dep@1.0.0', 'transitive-dep@1.0.0'],
+            tarballUrl: 'https://example.com/transitive-dep-1.0.0.tgz',
           },
         ],
       ])
@@ -490,6 +497,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['root@1.0.0'],
+            tarballUrl: 'https://example.com/root-1.0.0.tgz',
           },
         ],
         [
@@ -502,6 +510,7 @@ describe('dependency-analysis', () => {
             depth: 'direct' as const,
             path: ['root@1.0.0', 'deprecated-pkg@2.0.0'],
             deprecated: 'This package is deprecated. Use new-pkg instead.',
+            tarballUrl: 'https://example.com/deprecated-pkg-2.0.0.tgz',
           },
         ],
       ])
@@ -531,6 +540,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['root@1.0.0'],
+            tarballUrl: 'https://example.com/root-1.0.0.tgz',
           },
         ],
       ])
@@ -554,6 +564,7 @@ describe('dependency-analysis', () => {
             depth: 'root' as const,
             path: ['root@1.0.0'],
             deprecated: 'Root is deprecated',
+            tarballUrl: 'https://example.com/root-1.0.0.tgz',
           },
         ],
         [
@@ -566,6 +577,7 @@ describe('dependency-analysis', () => {
             depth: 'transitive' as const,
             path: ['root@1.0.0', 'direct-dep@1.0.0', 'transitive-dep@1.0.0'],
             deprecated: 'Transitive is deprecated',
+            tarballUrl: 'https://example.com/transitive-dep-1.0.0.tgz',
           },
         ],
         [
@@ -578,6 +590,7 @@ describe('dependency-analysis', () => {
             depth: 'direct' as const,
             path: ['root@1.0.0', 'direct-dep@1.0.0'],
             deprecated: 'Direct is deprecated',
+            tarballUrl: 'https://example.com/direct-dep-1.0.0.tgz',
           },
         ],
       ])
@@ -606,6 +619,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['minimist@1.0.0'],
+            tarballUrl: 'https://example.com/minimist-1.0.0.tgz',
           },
         ],
       ])
@@ -669,6 +683,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['next@16.0.0-beta.0'],
+            tarballUrl: 'https://example.com/next-16.0.0-beta.0.tgz',
           },
         ],
       ])
@@ -732,6 +747,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['example@1.5.0'],
+            tarballUrl: 'https://example.com/example-1.5.0.tgz',
           },
         ],
       ])
@@ -794,6 +810,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['example@3.4.6'],
+            tarballUrl: 'https://example.com/example-3.4.6.tgz',
           },
         ],
       ])
@@ -904,6 +921,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['root@1.0.0'],
+            tarballUrl: 'https://example.com/root-1.0.0.tgz',
           },
         ],
         [
@@ -915,6 +933,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'direct' as const,
             path: ['root@1.0.0', 'vuln-pkg@1.0.0'],
+            tarballUrl: 'https://example.com/vuln-pkg-1.0.0.tgz',
           },
         ],
         [
@@ -927,6 +946,7 @@ describe('dependency-analysis', () => {
             depth: 'direct' as const,
             path: ['root@1.0.0', 'deprecated-pkg@1.0.0'],
             deprecated: 'Use something else',
+            tarballUrl: 'https://example.com/deprecated-pkg-1.0.0.tgz',
           },
         ],
       ])

From 07261cbd3ce7b6fabd87b142f8ecba782193349e Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Mon, 23 Feb 2026 11:34:55 +0100
Subject: [PATCH 4/5] style: Add tarball URLs to test dependencies

---
 test/unit/server/utils/dependency-analysis.spec.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/test/unit/server/utils/dependency-analysis.spec.ts b/test/unit/server/utils/dependency-analysis.spec.ts
index d60333f66..3d5bae34f 100644
--- a/test/unit/server/utils/dependency-analysis.spec.ts
+++ b/test/unit/server/utils/dependency-analysis.spec.ts
@@ -57,6 +57,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['test-pkg@1.0.0'],
+            tarballUrl: 'https://example.com/test-pkg-1.0.0.tgz',
           },
         ],
       ])
@@ -90,6 +91,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['test-pkg@1.0.0'],
+            tarballUrl: 'https://example.com/test-pkg-1.0.0.tgz',
           },
         ],
         [
@@ -328,6 +330,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['pkg@1.0.0'],
+            tarballUrl: 'https://example.com/pkg-1.0.0.tgz',
           },
         ],
       ])
@@ -369,6 +372,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['pkg@1.0.0'],
+            tarballUrl: 'https://example.com/pkg-1.0.0.tgz',
           },
         ],
       ])
@@ -411,6 +415,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['pkg@1.0.0'],
+            tarballUrl: 'https://example.com/pkg-1.0.0.tgz',
           },
         ],
       ])
@@ -452,6 +457,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['pkg@1.0.0'],
+            tarballUrl: 'https://example.com/pkg-1.0.0.tgz',
           },
         ],
       ])
@@ -879,6 +885,7 @@ describe('dependency-analysis', () => {
             optional: false,
             depth: 'root' as const,
             path: ['pkg@1.0.0'],
+            tarballUrl: 'https://example.com/pkg-1.0.0.tgz',
           },
         ],
       ])

From dafc47565ed2246fba229b8f8359c5dffc21f23d Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Tue, 24 Feb 2026 21:19:40 +0100
Subject: [PATCH 5/5] feat(Button, PackageDownloadButton): Add async download
 functionality

---
 app/components/Button/Base.vue            |  6 ++--
 app/components/Package/DownloadButton.vue | 40 ++++++++++++++++-------
 test/nuxt/a11y.spec.ts                    | 18 ++++++++++
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index e30cb1a03..67f012b93 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -39,11 +39,11 @@ defineExpose({
       'text-xs px-2 py-2': size === 'small' && variant === 'subtle',
       'border-border': variant !== 'subtle',
       'border-border-subtle': variant === 'subtle',
-      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
+      'bg-transparent text-fg hover:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
-      'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
+      'text-bg bg-fg hover:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant === 'primary',
-      'bg-bg-subtle text-fg-muted hover:enabled:(text-fg border-border-hover) focus-visible:enabled:(text-fg border-border-hover) active:enabled:scale-95':
+      'bg-bg-subtle text-fg-muted hover:enabled:(text-fg border-border-hover) active:enabled:scale-95':
         variant === 'subtle',
     }"
     :type="props.type"
diff --git a/app/components/Package/DownloadButton.vue b/app/components/Package/DownloadButton.vue
index 6179eb3c3..f618d7a4a 100644
--- a/app/components/Package/DownloadButton.vue
+++ b/app/components/Package/DownloadButton.vue
@@ -102,16 +102,31 @@ function handleAction(id: string | undefined) {
   close()
 }
 
-function downloadPackage() {
+async function downloadPackage() {
   const tarballUrl = props.version.dist.tarball
   if (!tarballUrl) return
 
-  const link = document.createElement('a')
-  link.href = tarballUrl
-  link.download = `${props.packageName}-${props.version.version}.tgz`
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
+  try {
+    const response = await fetch(tarballUrl)
+    const blob = await response.blob()
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error('Failed to download package:', error)
+    // Fallback to direct link for non-CORS or other issues, though download attribute may be ignored
+    const link = document.createElement('a')
+    link.href = tarballUrl
+    link.download = `${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
 }
 
 function downloadDependenciesScript() {
@@ -125,18 +140,21 @@ function downloadDependenciesScript() {
   ]
 
   // Add root package
-  const rootTarball = (props.version.dist as any).tarball
+  const rootTarball = props.version.dist.tarball
   if (rootTarball) {
     lines.push(`# ${props.packageName}@${props.version.version}`)
     lines.push(
-      `curl -L ${rootTarball} -o ${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`,
+      `curl -L "${rootTarball}" -o "${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz"`,
     )
   }
 
   // Add dependencies
-  props.installSize.dependencies.forEach((dep: any) => {
+  props.installSize.dependencies.forEach(dep => {
+    if (!dep.tarballUrl) return
     lines.push(`# ${dep.name}@${dep.version}`)
-    lines.push(`curl -L ${dep.tarballUrl} -o ${dep.name.replace(/\//g, '__')}-${dep.version}.tgz`)
+    lines.push(
+      `curl -L "${dep.tarballUrl}" -o "${dep.name.replace(/\//g, '__')}-${dep.version}.tgz"`,
+    )
   })
 
   const blob = new Blob([lines.join('\n')], { type: 'text/x-shellscript' })
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 7e863f986..72af6a93c 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -160,6 +160,7 @@ import {
   PackageListControls,
   PackageListToolbar,
   PackageMaintainers,
+  PackageDownloadButton,
   PackageManagerSelect,
   PackageMetricsBadges,
   PackagePlaygrounds,
@@ -2509,6 +2510,23 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  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,
+          installSize: null,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })
 
 function applyTheme(colorMode: string, bgTheme: string | null) {