From 220a1369a0b8102b6db81ad1d5ef83c8d89b9c04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B6=B5=E6=9D=B0?=
 <87105391+floatDreamWithSong@users.noreply.github.com>
Date: Mon, 9 Mar 2026 23:41:04 +0800
Subject: [PATCH 1/4] feat: add zero direct dependencies banner for package
 detail page

---
 .../Package/ZeroDirectDependencies.vue           | 16 ++++++++++++++++
 app/pages/package/[[org]]/[name].vue             |  8 ++++++++
 i18n/locales/en.json                             |  4 +++-
 i18n/locales/zh-CN.json                          |  4 +++-
 i18n/schema.json                                 |  6 ++++++
 test/nuxt/a11y.spec.ts                           |  9 +++++++++
 6 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 app/components/Package/ZeroDirectDependencies.vue

diff --git a/app/components/Package/ZeroDirectDependencies.vue b/app/components/Package/ZeroDirectDependencies.vue
new file mode 100644
index 0000000000..39aa351341
--- /dev/null
+++ b/app/components/Package/ZeroDirectDependencies.vue
@@ -0,0 +1,16 @@
+<template>
+  <section aria-labelledby="zero-direct-deps-heading" class="relative">
+    <div
+      role="status"
+      class="border border-emerald-600/40 bg-emerald-500/10 rounded-lg px-3 py-2 text-base text-emerald-800 dark:text-emerald-400"
+    >
+      <h2 id="zero-direct-deps-heading" class="font-medium mb-1 flex items-center gap-2">
+        <span class="i-lucide:circle-check-big w-4 h-4" aria-hidden="true" />
+        {{ $t('package.dependencies.zero_direct_banner_title') }}
+      </h2>
+      <p class="text-sm m-0 mt-1">
+        {{ $t('package.dependencies.zero_direct_banner_desc') }}
+      </p>
+    </div>
+  </section>
+</template>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index a57774f110..3aee079723 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -456,6 +456,12 @@ const hasDependencies = computed(() => {
   )
 })
 
+const hasZeroDirectDependencies = computed(
+  () =>
+    !displayVersion.value?.dependencies ||
+    Object.keys(displayVersion.value.dependencies).length === 0,
+)
+
 // Vulnerability count for the stats banner
 const vulnCount = computed(() => vulnTree.value?.totalCounts.total ?? 0)
 const hasVulnerabilities = computed(() => vulnCount.value > 0)
@@ -1384,6 +1390,8 @@ const showSkeleton = shallowRef(false)
         <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
         <!-- Size / dependency increase notice -->
         <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
+        <!-- Positive signal: no direct runtime dependencies -->
+        <PackageZeroDirectDependencies v-if="hasZeroDirectDependencies" />
         <!-- Vulnerability scan -->
         <ClientOnly>
           <PackageVulnerabilityTree
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index a31fc67cf9..5c1f0490ea 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -413,7 +413,9 @@
       "outdated_major": "{count} major version behind (latest: {latest}) | {count} major versions behind (latest: {latest})",
       "outdated_minor": "{count} minor version behind (latest: {latest}) | {count} minor versions behind (latest: {latest})",
       "outdated_patch": "Patch update available (latest: {latest})",
-      "has_replacement": "This dependency has suggested replacements"
+      "has_replacement": "This dependency has suggested replacements",
+      "zero_direct_banner_title": "0 direct dependencies",
+      "zero_direct_banner_desc": "This package has no direct dependencies."
     },
     "peer_dependencies": {
       "title": "Peer Dependency ({count}) | Peer Dependencies ({count})",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 0f6dc9b60a..27c22d61aa 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -403,7 +403,9 @@
       "outdated_major": "落后 {count} 个主要版本（最新：{latest}）",
       "outdated_minor": "落后 {count} 个次要版本（最新：{latest}）",
       "outdated_patch": "有可用的补丁更新（最新：{latest}）",
-      "has_replacement": "该依赖有推荐的替代包。"
+      "has_replacement": "该依赖有推荐的替代包。",
+      "zero_direct_banner_title": "0 个直接依赖",
+      "zero_direct_banner_desc": "该包没有任何直接依赖。"
     },
     "peer_dependencies": {
       "title": "对等依赖（{count} 个）",
diff --git a/i18n/schema.json b/i18n/schema.json
index 353f2774f7..10735e8f13 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1245,6 +1245,12 @@
             },
             "has_replacement": {
               "type": "string"
+            },
+            "zero_direct_banner_title": {
+              "type": "string"
+            },
+            "zero_direct_banner_desc": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 9a079f91c8..736b7a8bf3 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -229,6 +229,7 @@ import PackageTrendsChart from '~/components/Package/TrendsChart.vue'
 import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
 import PackageLikeCard from '~/components/Package/LikeCard.vue'
 import SizeIncrease from '~/components/Package/SizeIncrease.vue'
+import PackageZeroDirectDependencies from '~/components/Package/ZeroDirectDependencies.vue'
 
 describe('component accessibility audits', () => {
   describe('DateTime', () => {
@@ -3529,6 +3530,14 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('PackageZeroDirectDependencies', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageZeroDirectDependencies)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })
 
 function applyTheme(colorMode: string, bgTheme: string | null) {

From fea7666af9e32c19aa0e8f39405632a5b37c3cb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B6=B5=E6=9D=B0?=
 <87105391+floatDreamWithSong@users.noreply.github.com>
Date: Tue, 10 Mar 2026 09:41:03 +0800
Subject: [PATCH 2/4] fix: improve zero direct dependencies messaging for
 clarity

---
 app/components/Package/ZeroDirectDependencies.vue | 1 -
 app/pages/package/[[org]]/[name].vue              | 5 +++--
 i18n/locales/en.json                              | 2 +-
 i18n/locales/zh-CN.json                           | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/Package/ZeroDirectDependencies.vue b/app/components/Package/ZeroDirectDependencies.vue
index 39aa351341..c69e20a8e2 100644
--- a/app/components/Package/ZeroDirectDependencies.vue
+++ b/app/components/Package/ZeroDirectDependencies.vue
@@ -1,7 +1,6 @@
 <template>
   <section aria-labelledby="zero-direct-deps-heading" class="relative">
     <div
-      role="status"
       class="border border-emerald-600/40 bg-emerald-500/10 rounded-lg px-3 py-2 text-base text-emerald-800 dark:text-emerald-400"
     >
       <h2 id="zero-direct-deps-heading" class="font-medium mb-1 flex items-center gap-2">
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 3aee079723..dc18dc2b24 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -458,8 +458,9 @@ const hasDependencies = computed(() => {
 
 const hasZeroDirectDependencies = computed(
   () =>
-    !displayVersion.value?.dependencies ||
-    Object.keys(displayVersion.value.dependencies).length === 0,
+    displayVersion.value &&
+    (!displayVersion.value.dependencies ||
+      Object.keys(displayVersion.value.dependencies).length === 0),
 )
 
 // Vulnerability count for the stats banner
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 5c1f0490ea..f157d5df7d 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -415,7 +415,7 @@
       "outdated_patch": "Patch update available (latest: {latest})",
       "has_replacement": "This dependency has suggested replacements",
       "zero_direct_banner_title": "0 direct dependencies",
-      "zero_direct_banner_desc": "This package has no direct dependencies."
+      "zero_direct_banner_desc": "This package can help keep node_modules smaller and reduce the risk of upcoming security issues."
     },
     "peer_dependencies": {
       "title": "Peer Dependency ({count}) | Peer Dependencies ({count})",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 27c22d61aa..23d2908f32 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -405,7 +405,7 @@
       "outdated_patch": "有可用的补丁更新（最新：{latest}）",
       "has_replacement": "该依赖有推荐的替代包。",
       "zero_direct_banner_title": "0 个直接依赖",
-      "zero_direct_banner_desc": "该包没有任何直接依赖。"
+      "zero_direct_banner_desc": "这个包有利于你维护更小体积的 node_modules ，并降低未来安全问题的风险。"
     },
     "peer_dependencies": {
       "title": "对等依赖（{count} 个）",

From f526ea577a83b2636c4874b11d3049d8d91aab2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B6=B5=E6=9D=B0?=
 <87105391+floatDreamWithSong@users.noreply.github.com>
Date: Tue, 10 Mar 2026 13:47:58 +0800
Subject: [PATCH 3/4] fix: include optional dependencies check for zero direct
 dependencies

---
 app/pages/package/[[org]]/[name].vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index dc18dc2b24..148b7d538d 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -460,7 +460,9 @@ const hasZeroDirectDependencies = computed(
   () =>
     displayVersion.value &&
     (!displayVersion.value.dependencies ||
-      Object.keys(displayVersion.value.dependencies).length === 0),
+      Object.keys(displayVersion.value.dependencies).length === 0) &&
+    (!displayVersion.value.optionalDependencies ||
+      Object.keys(displayVersion.value.optionalDependencies).length === 0),
 )
 
 // Vulnerability count for the stats banner

From 61b7a3bad8d7b669d6a96df9b682bd6ccf6b438d Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Tue, 10 Mar 2026 05:59:10 +0000
Subject: [PATCH 4/4] refactor: rename component and translation keys

---
 ...rectDependencies.vue => ZeroDependencies.vue} |  4 ++--
 app/pages/package/[[org]]/[name].vue             |  2 +-
 i18n/locales/en.json                             |  6 ++++--
 i18n/locales/zh-CN.json                          |  6 ++++--
 i18n/schema.json                                 | 16 +++++++++++-----
 test/nuxt/a11y.spec.ts                           |  6 +++---
 6 files changed, 25 insertions(+), 15 deletions(-)
 rename app/components/Package/{ZeroDirectDependencies.vue => ZeroDependencies.vue} (78%)

diff --git a/app/components/Package/ZeroDirectDependencies.vue b/app/components/Package/ZeroDependencies.vue
similarity index 78%
rename from app/components/Package/ZeroDirectDependencies.vue
rename to app/components/Package/ZeroDependencies.vue
index c69e20a8e2..e6cf393acc 100644
--- a/app/components/Package/ZeroDirectDependencies.vue
+++ b/app/components/Package/ZeroDependencies.vue
@@ -5,10 +5,10 @@
     >
       <h2 id="zero-direct-deps-heading" class="font-medium mb-1 flex items-center gap-2">
         <span class="i-lucide:circle-check-big w-4 h-4" aria-hidden="true" />
-        {{ $t('package.dependencies.zero_direct_banner_title') }}
+        {{ $t('package.dependencies.zero_dependencies.title') }}
       </h2>
       <p class="text-sm m-0 mt-1">
-        {{ $t('package.dependencies.zero_direct_banner_desc') }}
+        {{ $t('package.dependencies.zero_dependencies.description') }}
       </p>
     </div>
   </section>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 148b7d538d..411f09217f 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1394,7 +1394,7 @@ const showSkeleton = shallowRef(false)
         <!-- Size / dependency increase notice -->
         <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
         <!-- Positive signal: no direct runtime dependencies -->
-        <PackageZeroDirectDependencies v-if="hasZeroDirectDependencies" />
+        <PackageZeroDependencies v-if="hasZeroDirectDependencies" />
         <!-- Vulnerability scan -->
         <ClientOnly>
           <PackageVulnerabilityTree
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index f157d5df7d..412ca5407b 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -414,8 +414,10 @@
       "outdated_minor": "{count} minor version behind (latest: {latest}) | {count} minor versions behind (latest: {latest})",
       "outdated_patch": "Patch update available (latest: {latest})",
       "has_replacement": "This dependency has suggested replacements",
-      "zero_direct_banner_title": "0 direct dependencies",
-      "zero_direct_banner_desc": "This package can help keep node_modules smaller and reduce the risk of upcoming security issues."
+      "zero_dependencies": {
+        "title": "0 dependencies",
+        "description": "This package can help keep node_modules smaller and reduce the risk of upcoming security issues."
+      }
     },
     "peer_dependencies": {
       "title": "Peer Dependency ({count}) | Peer Dependencies ({count})",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 23d2908f32..451ffe96d5 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -404,8 +404,10 @@
       "outdated_minor": "落后 {count} 个次要版本（最新：{latest}）",
       "outdated_patch": "有可用的补丁更新（最新：{latest}）",
       "has_replacement": "该依赖有推荐的替代包。",
-      "zero_direct_banner_title": "0 个直接依赖",
-      "zero_direct_banner_desc": "这个包有利于你维护更小体积的 node_modules ，并降低未来安全问题的风险。"
+      "zero_dependencies": {
+        "title": "0 个直接依赖",
+        "description": "这个包有利于你维护更小体积的 node_modules ，并降低未来安全问题的风险。"
+      }
     },
     "peer_dependencies": {
       "title": "对等依赖（{count} 个）",
diff --git a/i18n/schema.json b/i18n/schema.json
index 10735e8f13..72f8b56f0e 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1246,11 +1246,17 @@
             "has_replacement": {
               "type": "string"
             },
-            "zero_direct_banner_title": {
-              "type": "string"
-            },
-            "zero_direct_banner_desc": {
-              "type": "string"
+            "zero_dependencies": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
             }
           },
           "additionalProperties": false
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 736b7a8bf3..9e131bae9c 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -229,7 +229,7 @@ import PackageTrendsChart from '~/components/Package/TrendsChart.vue'
 import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
 import PackageLikeCard from '~/components/Package/LikeCard.vue'
 import SizeIncrease from '~/components/Package/SizeIncrease.vue'
-import PackageZeroDirectDependencies from '~/components/Package/ZeroDirectDependencies.vue'
+import PackageZeroDependencies from '~/components/Package/ZeroDependencies.vue'
 
 describe('component accessibility audits', () => {
   describe('DateTime', () => {
@@ -3531,9 +3531,9 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('PackageZeroDirectDependencies', () => {
+  describe('PackageZeroDependencies', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(PackageZeroDirectDependencies)
+      const component = await mountSuspended(PackageZeroDependencies)
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })