feat: add zero dependencies banner on the package page

app/components/Package/ZeroDependencies.vue

@@ -0,0 +1,15 @@
+<template>
+  <section aria-labelledby="zero-direct-deps-heading" class="relative">
+    <div
+      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_dependencies.title') }}
+      </h2>
+      <p class="text-sm m-0 mt-1">
+        {{ $t('package.dependencies.zero_dependencies.description') }}
+      </p>
+    </div>
+  </section>
+</template>

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

@@ -456,6 +456,15 @@ const hasDependencies = computed(() => {
   )
 })
 
+const hasZeroDirectDependencies = computed(
+  () =>
+    displayVersion.value &&
+    (!displayVersion.value.dependencies ||
+      Object.keys(displayVersion.value.dependencies).length === 0) &&
+    (!displayVersion.value.optionalDependencies ||
+      Object.keys(displayVersion.value.optionalDependencies).length === 0),
+)
+
 // Vulnerability count for the stats banner
 const vulnCount = computed(() => vulnTree.value?.totalCounts.total ?? 0)
 const hasVulnerabilities = computed(() => vulnCount.value > 0)
@@ -1384,6 +1393,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 -->
+        <PackageZeroDependencies v-if="hasZeroDirectDependencies" />
         <!-- Vulnerability scan -->
         <ClientOnly>
           <PackageVulnerabilityTree

i18n/locales/en.json

@@ -413,7 +413,11 @@
       "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_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})",

i18n/locales/zh-CN.json

@@ -403,7 +403,11 @@
       "outdated_major": "落后 {count} 个主要版本（最新：{latest}）",
       "outdated_minor": "落后 {count} 个次要版本（最新：{latest}）",
       "outdated_patch": "有可用的补丁更新（最新：{latest}）",
-      "has_replacement": "该依赖有推荐的替代包。"
+      "has_replacement": "该依赖有推荐的替代包。",
+      "zero_dependencies": {
+        "title": "0 个直接依赖",
+        "description": "这个包有利于你维护更小体积的 node_modules ，并降低未来安全问题的风险。"
+      }
     },
     "peer_dependencies": {
       "title": "对等依赖（{count} 个）",

i18n/schema.json

@@ -1245,6 +1245,18 @@
             },
             "has_replacement": {
               "type": "string"
+            },
+            "zero_dependencies": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
             }
           },
           "additionalProperties": false

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 PackageZeroDependencies from '~/components/Package/ZeroDependencies.vue'
 
 describe('component accessibility audits', () => {
   describe('DateTime', () => {
@@ -3529,6 +3530,14 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('PackageZeroDependencies', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageZeroDependencies)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })
 
 function applyTheme(colorMode: string, bgTheme: string | null) {