From e7e612dedc93f0a4f4a238ebdc694b4f251e71c8 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:37:43 +0000
Subject: [PATCH 1/6] feat: show a warning when significant size increase

When viewing a package, this shows a warning box making the user aware
that the number of dependencies or the install size significantly
increased.

It sets the thresholds as:

- Significant size increase = 25%
- Significant dependency count increase = >5
---
 app/components/Package/SizeIncrease.vue       |  45 ++++
 app/composables/useInstallSizeDiff.ts         | 111 +++++++++
 app/pages/package/[[org]]/[name].vue          |  13 +-
 i18n/locales/en.json                          |   7 +
 i18n/schema.json                              |  21 ++
 lunaria/files/en-GB.json                      |   7 +
 lunaria/files/en-US.json                      |   7 +
 server/utils/install-size.ts                  |  26 ---
 shared/types/index.ts                         |   1 +
 shared/types/install-size.ts                  |  22 ++
 .../composables/use-install-size-diff.spec.ts | 216 ++++++++++++++++++
 11 files changed, 443 insertions(+), 33 deletions(-)
 create mode 100644 app/components/Package/SizeIncrease.vue
 create mode 100644 app/composables/useInstallSizeDiff.ts
 create mode 100644 shared/types/install-size.ts
 create mode 100644 test/nuxt/composables/use-install-size-diff.spec.ts

diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
new file mode 100644
index 0000000000..3f8dbeecd1
--- /dev/null
+++ b/app/components/Package/SizeIncrease.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { InstallSizeDiff } from '~/composables/useInstallSizeDiff'
+
+const props = defineProps<{
+  diff: InstallSizeDiff
+}>()
+
+const bytesFormatter = useBytesFormatter()
+const numberFormatter = useNumberFormatter()
+
+const sizePercent = computed(() => Math.round(props.diff.sizeRatio * 100))
+</script>
+
+<template>
+  <div
+    class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-800 dark:text-amber-400"
+  >
+    <h2 class="font-medium mb-1 flex items-center gap-2">
+      <span class="i-lucide:trending-up w-4 h-4" aria-hidden="true" />
+      {{
+        diff.sizeThresholdExceeded && diff.depThresholdExceeded
+          ? $t('package.size_increase.title_both', { version: diff.comparisonVersion })
+          : diff.sizeThresholdExceeded
+            ? $t('package.size_increase.title_size', { version: diff.comparisonVersion })
+            : $t('package.size_increase.title_deps', { version: diff.comparisonVersion })
+      }}
+    </h2>
+    <p class="text-sm m-0 mt-1">
+      <i18n-t v-if="diff.sizeThresholdExceeded" keypath="package.size_increase.size" scope="global">
+        <template #percent
+          ><strong>{{ sizePercent }}%</strong></template
+        >
+        <template #size
+          ><strong>{{ bytesFormatter.format(diff.sizeIncrease) }}</strong></template
+        >
+      </i18n-t>
+      <template v-if="diff.sizeThresholdExceeded && diff.depThresholdExceeded"> · </template>
+      <i18n-t v-if="diff.depThresholdExceeded" keypath="package.size_increase.deps" scope="global">
+        <template #count
+          ><strong>+{{ numberFormatter.format(diff.depDiff) }}</strong></template
+        >
+      </i18n-t>
+    </p>
+  </div>
+</template>
diff --git a/app/composables/useInstallSizeDiff.ts b/app/composables/useInstallSizeDiff.ts
new file mode 100644
index 0000000000..76c300f942
--- /dev/null
+++ b/app/composables/useInstallSizeDiff.ts
@@ -0,0 +1,111 @@
+import { compare, prerelease, valid } from 'semver'
+import type { InstallSizeResult, SlimPackument } from '#shared/types'
+
+export interface InstallSizeDiff {
+  comparisonVersion: string
+  sizeRatio: number
+  sizeIncrease: number
+  currentSize: number
+  previousSize: number
+  depDiff: number
+  currentDeps: number
+  previousDeps: number
+  sizeThresholdExceeded: boolean
+  depThresholdExceeded: boolean
+}
+
+const SIZE_INCREASE_THRESHOLD = 0.25
+const DEP_INCREASE_THRESHOLD = 5
+
+function getComparisonVersion(pkg: SlimPackument, resolvedVersion: string): string | null {
+  const isCurrentPrerelease = prerelease(resolvedVersion) !== null
+
+  if (isCurrentPrerelease) {
+    const latest = pkg['dist-tags']?.latest
+    if (!latest || latest === resolvedVersion) return null
+    return latest
+  }
+
+  // Find the previous version in time that was stable
+  const stableVersions = Object.keys(pkg.time)
+    .filter(v => v !== 'modified' && v !== 'created' && valid(v) !== null && prerelease(v) === null)
+    .sort((a, b) => compare(a, b))
+
+  const currentIdx = stableVersions.indexOf(resolvedVersion)
+  if (currentIdx <= 0) return null
+
+  return stableVersions[currentIdx - 1]!
+}
+
+export function useInstallSizeDiff(
+  packageName: MaybeRefOrGetter<string>,
+  resolvedVersion: MaybeRefOrGetter<string | null | undefined>,
+  pkg: MaybeRefOrGetter<SlimPackument | null | undefined>,
+  currentInstallSize: MaybeRefOrGetter<InstallSizeResult | null | undefined>,
+) {
+  const comparisonVersion = computed<string | null>(() => {
+    const pkgVal = toValue(pkg)
+    const version = toValue(resolvedVersion)
+    if (!pkgVal || !version) return null
+    return getComparisonVersion(pkgVal, version)
+  })
+
+  const {
+    data: comparisonInstallSize,
+    status: comparisonStatus,
+    execute: fetchComparisonSize,
+  } = useLazyFetch<InstallSizeResult | null>(
+    () => {
+      const v = comparisonVersion.value
+      if (!v) return ''
+      return `/api/registry/install-size/${toValue(packageName)}/v/${v}`
+    },
+    {
+      server: false,
+      immediate: false,
+      default: () => null,
+    },
+  )
+
+  if (import.meta.client) {
+    watch(
+      comparisonVersion,
+      v => {
+        if (v) fetchComparisonSize()
+      },
+      { immediate: true },
+    )
+  }
+
+  const diff = computed<InstallSizeDiff | null>(() => {
+    const current = toValue(currentInstallSize)
+    const previous = comparisonInstallSize.value
+    const cv = comparisonVersion.value
+
+    if (!current || !previous || !cv) return null
+
+    const sizeRatio =
+      previous.totalSize > 0 ? (current.totalSize - previous.totalSize) / previous.totalSize : 0
+    const depDiff = current.dependencyCount - previous.dependencyCount
+
+    const sizeThresholdExceeded = sizeRatio > SIZE_INCREASE_THRESHOLD
+    const depThresholdExceeded = depDiff > DEP_INCREASE_THRESHOLD
+
+    if (!sizeThresholdExceeded && !depThresholdExceeded) return null
+
+    return {
+      comparisonVersion: cv,
+      sizeRatio,
+      sizeIncrease: current.totalSize - previous.totalSize,
+      currentSize: current.totalSize,
+      previousSize: previous.totalSize,
+      depDiff,
+      currentDeps: current.dependencyCount,
+      previousDeps: previous.dependencyCount,
+      sizeThresholdExceeded,
+      depThresholdExceeded,
+    }
+  })
+
+  return { diff, comparisonVersion, comparisonStatus }
+}
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 1d81f70eba..1553b0f049 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type {
+  InstallSizeResult,
   NpmVersionDist,
   PackageVersionInfo,
   PackumentVersion,
@@ -19,6 +20,7 @@ import { detectPublishSecurityDowngradeForVersion } from '~/utils/publish-securi
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
+import { useInstallSizeDiff } from '~/composables/useInstallSizeDiff'
 import type { RouteLocationRaw } from 'vue-router'
 
 defineOgImageComponent('Package', {
@@ -182,13 +184,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,
@@ -255,6 +250,8 @@ const {
   error,
 } = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value)
 
+const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg, installSize)
+
 // Detect two hydration scenarios where the external _payload.json is missing:
 //
 // 1. SPA fallback (200.html): No real content was server-rendered.
@@ -1333,6 +1330,8 @@ const showSkeleton = shallowRef(false)
       <div class="space-y-6" :class="$style.areaVulns">
         <!-- Bad package warning -->
         <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
+        <!-- Size / dependency increase notice -->
+        <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
         <!-- Vulnerability scan -->
         <ClientOnly>
           <PackageVulnerabilityTree
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 3e4354e485..9066340d46 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -157,6 +157,13 @@
       "version": "This version has been deprecated.",
       "no_reason": "No reason provided"
     },
+    "size_increase": {
+      "title_size": "Significant size increase since v{version}",
+      "title_deps": "Significant dependency count increase since v{version}",
+      "title_both": "Singificant size and dependency increase since v{version}",
+      "size": "Install size increased by {percent} ({size} larger)",
+      "deps": "{count} more dependencies"
+    },
     "replacement": {
       "title": "You might not need this dependency.",
       "native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",
diff --git a/i18n/schema.json b/i18n/schema.json
index aa7681bc31..911d445c5f 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -475,6 +475,27 @@
           },
           "additionalProperties": false
         },
+        "size_increase": {
+          "type": "object",
+          "properties": {
+            "title_size": {
+              "type": "string"
+            },
+            "title_deps": {
+              "type": "string"
+            },
+            "title_both": {
+              "type": "string"
+            },
+            "size": {
+              "type": "string"
+            },
+            "deps": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
         "replacement": {
           "type": "object",
           "properties": {
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 4ca9ba59df..a18dc09ecc 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -156,6 +156,13 @@
       "version": "This version has been deprecated.",
       "no_reason": "No reason provided"
     },
+    "size_increase": {
+      "title_size": "Significant size increase since v{version}",
+      "title_deps": "Significant dependency count increase since v{version}",
+      "title_both": "Singificant size and dependency increase since v{version}",
+      "size": "Install size increased by {percent} ({size} larger)",
+      "deps": "{count} more dependencies"
+    },
     "replacement": {
       "title": "You might not need this dependency.",
       "native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 69a66c3f7f..86e0902b0b 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -156,6 +156,13 @@
       "version": "This version has been deprecated.",
       "no_reason": "No reason provided"
     },
+    "size_increase": {
+      "title_size": "Significant size increase since v{version}",
+      "title_deps": "Significant dependency count increase since v{version}",
+      "title_both": "Singificant size and dependency increase since v{version}",
+      "size": "Install size increased by {percent} ({size} larger)",
+      "deps": "{count} more dependencies"
+    },
     "replacement": {
       "title": "You might not need this dependency.",
       "native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",
diff --git a/server/utils/install-size.ts b/server/utils/install-size.ts
index 7705af450c..544fff16d6 100644
--- a/server/utils/install-size.ts
+++ b/server/utils/install-size.ts
@@ -1,29 +1,3 @@
-/**
- * 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
-}
-
 /**
  * Calculate the total install size for a package.
  *
diff --git a/shared/types/index.ts b/shared/types/index.ts
index 88e28afe06..be4274d324 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 0000000000..4d87347912
--- /dev/null
+++ b/shared/types/install-size.ts
@@ -0,0 +1,22 @@
+export interface DependencySize {
+  name: string
+  version: string
+  size: number
+  /** True if this is an optional dependency */
+  optional?: boolean
+}
+
+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[]
+}
diff --git a/test/nuxt/composables/use-install-size-diff.spec.ts b/test/nuxt/composables/use-install-size-diff.spec.ts
new file mode 100644
index 0000000000..b8ed3912bb
--- /dev/null
+++ b/test/nuxt/composables/use-install-size-diff.spec.ts
@@ -0,0 +1,216 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { SlimPackument, InstallSizeResult } from '#shared/types'
+
+function createPackage(
+  time: Record<string, string>,
+  distTags: Record<string, string> = {},
+): SlimPackument {
+  return {
+    '_id': 'test',
+    'name': 'test',
+    'dist-tags': { latest: '1.0.0', ...distTags },
+    'time': { created: '2020-01-01', ...time },
+    'versions': {},
+    'requestedVersion': null,
+  } as SlimPackument
+}
+
+function createInstallSize(overrides: Partial<InstallSizeResult> = {}): InstallSizeResult {
+  return {
+    package: 'test',
+    version: '1.0.0',
+    selfSize: 1000,
+    totalSize: 5000,
+    dependencyCount: 3,
+    dependencies: [],
+    ...overrides,
+  }
+}
+
+describe('useInstallSizeDiff', () => {
+  let fetchSpy: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    fetchSpy = vi.fn().mockResolvedValue(createInstallSize())
+    vi.stubGlobal('$fetch', fetchSpy)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  describe('comparisonVersion', () => {
+    it('selects the semver-previous stable version', () => {
+      const pkg = createPackage({
+        '1.0.0': '2020-01-01',
+        '1.1.0': '2021-01-01',
+        '1.2.0': '2022-01-01',
+      })
+
+      const { comparisonVersion } = useInstallSizeDiff('test', '1.2.0', pkg, null)
+      expect(comparisonVersion.value).toBe('1.1.0')
+    })
+
+    it('returns null for the first ever stable version', () => {
+      const pkg = createPackage({ '1.0.0': '2020-01-01' })
+
+      const { comparisonVersion } = useInstallSizeDiff('test', '1.0.0', pkg, null)
+      expect(comparisonVersion.value).toBeNull()
+    })
+
+    it('skips prerelease versions when finding previous stable', () => {
+      const pkg = createPackage({
+        '1.0.0': '2020-01-01',
+        '2.0.0-beta.1': '2021-01-01',
+        '2.0.0-beta.2': '2021-06-01',
+        '2.0.0': '2022-01-01',
+      })
+
+      const { comparisonVersion } = useInstallSizeDiff('test', '2.0.0', pkg, null)
+      expect(comparisonVersion.value).toBe('1.0.0')
+    })
+
+    it('uses the latest dist-tag for a prerelease version', () => {
+      const pkg = createPackage(
+        { '1.0.0': '2020-01-01', '2.0.0-beta.1': '2021-01-01' },
+        { latest: '1.0.0', next: '2.0.0-beta.1' },
+      )
+
+      const { comparisonVersion } = useInstallSizeDiff('test', '2.0.0-beta.1', pkg, null)
+      expect(comparisonVersion.value).toBe('1.0.0')
+    })
+
+    it('returns null when the prerelease version is already latest', () => {
+      const pkg = createPackage({ '2.0.0-beta.1': '2021-01-01' }, { latest: '2.0.0-beta.1' })
+
+      const { comparisonVersion } = useInstallSizeDiff('test', '2.0.0-beta.1', pkg, null)
+      expect(comparisonVersion.value).toBeNull()
+    })
+
+    it('returns null for a prerelease when there is no latest tag', () => {
+      const pkg = createPackage({ '2.0.0-beta.1': '2021-01-01' }, {})
+      pkg['dist-tags'] = {}
+
+      const { comparisonVersion } = useInstallSizeDiff('test', '2.0.0-beta.1', pkg, null)
+      expect(comparisonVersion.value).toBeNull()
+    })
+  })
+
+  describe('diff', () => {
+    it('returns null when no comparison version exists', () => {
+      const pkg = createPackage({ '1.0.0': '2020-01-01' })
+      const current = createInstallSize({ version: '1.0.0' })
+
+      const { diff } = useInstallSizeDiff('test', '1.0.0', pkg, current)
+
+      expect(diff.value).toBeNull()
+      expect(fetchSpy).not.toHaveBeenCalled()
+    })
+
+    it('returns null when both thresholds are not met', async () => {
+      const pkg = createPackage({ '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
+      const current = createInstallSize({ version: '1.1.0', totalSize: 5100, dependencyCount: 4 })
+      fetchSpy.mockResolvedValue(
+        createInstallSize({ version: '1.0.0', totalSize: 5000, dependencyCount: 3 }),
+      )
+
+      const { diff } = useInstallSizeDiff('pkg-no-threshold', '1.1.0', pkg, current)
+
+      await vi.waitFor(() => expect(fetchSpy).toHaveBeenCalled())
+      expect(diff.value).toBeNull()
+    })
+
+    it('sets sizeThresholdExceeded when size increased by more than 25%', async () => {
+      const pkg = createPackage({ '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
+      const current = createInstallSize({ version: '1.1.0', totalSize: 7000, dependencyCount: 4 })
+      fetchSpy.mockResolvedValue(
+        createInstallSize({ version: '1.0.0', totalSize: 5000, dependencyCount: 3 }),
+      )
+
+      const { diff } = useInstallSizeDiff('pkg-size-only', '1.1.0', pkg, current)
+
+      await vi.waitFor(() => expect(diff.value).not.toBeNull())
+      expect(diff.value).toEqual({
+        comparisonVersion: '1.0.0',
+        sizeRatio: 0.4,
+        sizeIncrease: 2000,
+        currentSize: 7000,
+        previousSize: 5000,
+        depDiff: 1,
+        currentDeps: 4,
+        previousDeps: 3,
+        sizeThresholdExceeded: true,
+        depThresholdExceeded: false,
+      })
+    })
+
+    it('sets depThresholdExceeded when more than 5 dependencies were added', async () => {
+      const pkg = createPackage({ '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
+      const current = createInstallSize({ version: '1.1.0', totalSize: 5100, dependencyCount: 10 })
+      fetchSpy.mockResolvedValue(
+        createInstallSize({ version: '1.0.0', totalSize: 5000, dependencyCount: 3 }),
+      )
+
+      const { diff } = useInstallSizeDiff('pkg-deps-only', '1.1.0', pkg, current)
+
+      await vi.waitFor(() => expect(diff.value).not.toBeNull())
+      expect(diff.value).toEqual({
+        comparisonVersion: '1.0.0',
+        sizeRatio: 0.02,
+        sizeIncrease: 100,
+        currentSize: 5100,
+        previousSize: 5000,
+        depDiff: 7,
+        currentDeps: 10,
+        previousDeps: 3,
+        sizeThresholdExceeded: false,
+        depThresholdExceeded: true,
+      })
+    })
+
+    it('returns correct diff values', async () => {
+      const pkg = createPackage({ '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
+      const current = createInstallSize({ version: '1.1.0', totalSize: 10000, dependencyCount: 15 })
+      fetchSpy.mockResolvedValue(
+        createInstallSize({ version: '1.0.0', totalSize: 5000, dependencyCount: 5 }),
+      )
+
+      const { diff } = useInstallSizeDiff('pkg-both', '1.1.0', pkg, current)
+
+      await vi.waitFor(() => expect(diff.value).not.toBeNull())
+      expect(diff.value).toEqual({
+        comparisonVersion: '1.0.0',
+        sizeRatio: 1, // 100% increase
+        sizeIncrease: 5000,
+        currentSize: 10000,
+        previousSize: 5000,
+        depDiff: 10,
+        currentDeps: 15,
+        previousDeps: 5,
+        sizeThresholdExceeded: true,
+        depThresholdExceeded: true,
+      })
+    })
+  })
+
+  describe('fetch behavior', () => {
+    it('calls the correct API endpoint for the comparison version', async () => {
+      const pkg = createPackage({ '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
+      const current = createInstallSize({ version: '1.1.0', totalSize: 7000 })
+      fetchSpy.mockResolvedValue(createInstallSize({ version: '1.0.0', totalSize: 5000 }))
+
+      useInstallSizeDiff('my-pkg', '1.1.0', pkg, current)
+
+      await vi.waitFor(() => expect(fetchSpy).toHaveBeenCalled())
+      expect(fetchSpy.mock.calls[0]?.[0]).toBe('/api/registry/install-size/my-pkg/v/1.0.0')
+    })
+
+    it('does not fetch when there is no comparison version', () => {
+      const pkg = createPackage({ '1.0.0': '2020-01-01' })
+
+      useInstallSizeDiff('my-pkg', '1.0.0', pkg, null)
+
+      expect(fetchSpy).not.toHaveBeenCalled()
+    })
+  })
+})

From 219fe628f7e5ed1da4f4cf2a8c5defd6e432e178 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:54:12 +0000
Subject: [PATCH 2/6] test: add a11y test

---
 test/nuxt/a11y.spec.ts | 66 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index e3ef8e09c3..b12fe604ae 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -204,6 +204,7 @@ import HeaderAccountMenuServer from '~/components/Header/AccountMenu.server.vue'
 import ToggleServer from '~/components/Settings/Toggle.server.vue'
 import SearchProviderToggleServer from '~/components/SearchProviderToggle.server.vue'
 import PackageTrendsChart from '~/components/Package/TrendsChart.vue'
+import SizeIncrease from '~/components/Package/SizeIncrease.vue'
 
 describe('component accessibility audits', () => {
   describe('DateTime', () => {
@@ -2615,6 +2616,71 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('SizeIncrease', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(SizeIncrease, {
+        props: {
+          diff: {
+            comparisonVersion: '1.0.0',
+            sizeRatio: 1,
+            sizeIncrease: 200,
+            currentSize: 400,
+            previousSize: 200,
+            depDiff: 5,
+            currentDeps: 10,
+            previousDeps: 5,
+            sizeThresholdExceeded: true,
+            depThresholdExceeded: true,
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with only size increase', async () => {
+      const component = await mountSuspended(SizeIncrease, {
+        props: {
+          diff: {
+            comparisonVersion: '1.0.0',
+            sizeRatio: 1,
+            sizeIncrease: 200,
+            currentSize: 400,
+            previousSize: 200,
+            depDiff: 0,
+            currentDeps: 5,
+            previousDeps: 5,
+            sizeThresholdExceeded: true,
+            depThresholdExceeded: false,
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with only dependency increase', async () => {
+      const component = await mountSuspended(SizeIncrease, {
+        props: {
+          diff: {
+            comparisonVersion: '1.0.0',
+            sizeRatio: 0,
+            sizeIncrease: 0,
+            currentSize: 200,
+            previousSize: 200,
+            depDiff: 5,
+            currentDeps: 10,
+            previousDeps: 5,
+            sizeThresholdExceeded: false,
+            depThresholdExceeded: true,
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })
 
 function applyTheme(colorMode: string, bgTheme: string | null) {

From 39e1194fddfc585c962bb7271e204a8c8ac68edf Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:58:04 +0000
Subject: [PATCH 3/6] chore: fix spelling

---
 i18n/locales/en.json     | 2 +-
 lunaria/files/en-GB.json | 2 +-
 lunaria/files/en-US.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 9066340d46..1a290c5a60 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -160,7 +160,7 @@
     "size_increase": {
       "title_size": "Significant size increase since v{version}",
       "title_deps": "Significant dependency count increase since v{version}",
-      "title_both": "Singificant size and dependency increase since v{version}",
+      "title_both": "Significant size and dependency increase since v{version}",
       "size": "Install size increased by {percent} ({size} larger)",
       "deps": "{count} more dependencies"
     },
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index a18dc09ecc..6b481eefc4 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -159,7 +159,7 @@
     "size_increase": {
       "title_size": "Significant size increase since v{version}",
       "title_deps": "Significant dependency count increase since v{version}",
-      "title_both": "Singificant size and dependency increase since v{version}",
+      "title_both": "Significant size and dependency increase since v{version}",
       "size": "Install size increased by {percent} ({size} larger)",
       "deps": "{count} more dependencies"
     },
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 86e0902b0b..4e40642d55 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -159,7 +159,7 @@
     "size_increase": {
       "title_size": "Significant size increase since v{version}",
       "title_deps": "Significant dependency count increase since v{version}",
-      "title_both": "Singificant size and dependency increase since v{version}",
+      "title_both": "Significant size and dependency increase since v{version}",
       "size": "Install size increased by {percent} ({size} larger)",
       "deps": "{count} more dependencies"
     },

From 8f0c28fed907a14da81cbf8aa0b7805882605722 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:02:31 +0000
Subject: [PATCH 4/6] chore: race condition fun

---
 app/composables/useInstallSizeDiff.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/composables/useInstallSizeDiff.ts b/app/composables/useInstallSizeDiff.ts
index 76c300f942..8efbffcbb8 100644
--- a/app/composables/useInstallSizeDiff.ts
+++ b/app/composables/useInstallSizeDiff.ts
@@ -69,8 +69,8 @@ export function useInstallSizeDiff(
 
   if (import.meta.client) {
     watch(
-      comparisonVersion,
-      v => {
+      [comparisonVersion, () => toValue(packageName)],
+      ([v]) => {
         if (v) fetchComparisonSize()
       },
       { immediate: true },
@@ -83,6 +83,7 @@ export function useInstallSizeDiff(
     const cv = comparisonVersion.value
 
     if (!current || !previous || !cv) return null
+    if (previous.version !== cv || previous.package !== toValue(packageName)) return null
 
     const sizeRatio =
       previous.totalSize > 0 ? (current.totalSize - previous.totalSize) / previous.totalSize : 0

From 96f43bb2d9f169bc71d5b56505065aa324d18dc6 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:11:40 +0000
Subject: [PATCH 5/6] chore: fix em up

---
 .../composables/use-install-size-diff.spec.ts | 96 +++++++++++++------
 1 file changed, 68 insertions(+), 28 deletions(-)

diff --git a/test/nuxt/composables/use-install-size-diff.spec.ts b/test/nuxt/composables/use-install-size-diff.spec.ts
index b8ed3912bb..1ee34f7d6a 100644
--- a/test/nuxt/composables/use-install-size-diff.spec.ts
+++ b/test/nuxt/composables/use-install-size-diff.spec.ts
@@ -2,12 +2,13 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { SlimPackument, InstallSizeResult } from '#shared/types'
 
 function createPackage(
+  name: string,
   time: Record<string, string>,
   distTags: Record<string, string> = {},
 ): SlimPackument {
   return {
-    '_id': 'test',
-    'name': 'test',
+    '_id': name,
+    'name': name,
     'dist-tags': { latest: '1.0.0', ...distTags },
     'time': { created: '2020-01-01', ...time },
     'versions': {},
@@ -15,9 +16,12 @@ function createPackage(
   } as SlimPackument
 }
 
-function createInstallSize(overrides: Partial<InstallSizeResult> = {}): InstallSizeResult {
+function createInstallSize(
+  name: string,
+  overrides: Partial<InstallSizeResult> = {},
+): InstallSizeResult {
   return {
-    package: 'test',
+    package: name,
     version: '1.0.0',
     selfSize: 1000,
     totalSize: 5000,
@@ -31,7 +35,7 @@ describe('useInstallSizeDiff', () => {
   let fetchSpy: ReturnType<typeof vi.fn>
 
   beforeEach(() => {
-    fetchSpy = vi.fn().mockResolvedValue(createInstallSize())
+    fetchSpy = vi.fn().mockResolvedValue(createInstallSize('test'))
     vi.stubGlobal('$fetch', fetchSpy)
   })
 
@@ -41,7 +45,7 @@ describe('useInstallSizeDiff', () => {
 
   describe('comparisonVersion', () => {
     it('selects the semver-previous stable version', () => {
-      const pkg = createPackage({
+      const pkg = createPackage('test', {
         '1.0.0': '2020-01-01',
         '1.1.0': '2021-01-01',
         '1.2.0': '2022-01-01',
@@ -52,14 +56,14 @@ describe('useInstallSizeDiff', () => {
     })
 
     it('returns null for the first ever stable version', () => {
-      const pkg = createPackage({ '1.0.0': '2020-01-01' })
+      const pkg = createPackage('test', { '1.0.0': '2020-01-01' })
 
       const { comparisonVersion } = useInstallSizeDiff('test', '1.0.0', pkg, null)
       expect(comparisonVersion.value).toBeNull()
     })
 
     it('skips prerelease versions when finding previous stable', () => {
-      const pkg = createPackage({
+      const pkg = createPackage('test', {
         '1.0.0': '2020-01-01',
         '2.0.0-beta.1': '2021-01-01',
         '2.0.0-beta.2': '2021-06-01',
@@ -72,6 +76,7 @@ describe('useInstallSizeDiff', () => {
 
     it('uses the latest dist-tag for a prerelease version', () => {
       const pkg = createPackage(
+        'test',
         { '1.0.0': '2020-01-01', '2.0.0-beta.1': '2021-01-01' },
         { latest: '1.0.0', next: '2.0.0-beta.1' },
       )
@@ -81,14 +86,18 @@ describe('useInstallSizeDiff', () => {
     })
 
     it('returns null when the prerelease version is already latest', () => {
-      const pkg = createPackage({ '2.0.0-beta.1': '2021-01-01' }, { latest: '2.0.0-beta.1' })
+      const pkg = createPackage(
+        'test',
+        { '2.0.0-beta.1': '2021-01-01' },
+        { latest: '2.0.0-beta.1' },
+      )
 
       const { comparisonVersion } = useInstallSizeDiff('test', '2.0.0-beta.1', pkg, null)
       expect(comparisonVersion.value).toBeNull()
     })
 
     it('returns null for a prerelease when there is no latest tag', () => {
-      const pkg = createPackage({ '2.0.0-beta.1': '2021-01-01' }, {})
+      const pkg = createPackage('test', { '2.0.0-beta.1': '2021-01-01' }, {})
       pkg['dist-tags'] = {}
 
       const { comparisonVersion } = useInstallSizeDiff('test', '2.0.0-beta.1', pkg, null)
@@ -98,8 +107,8 @@ describe('useInstallSizeDiff', () => {
 
   describe('diff', () => {
     it('returns null when no comparison version exists', () => {
-      const pkg = createPackage({ '1.0.0': '2020-01-01' })
-      const current = createInstallSize({ version: '1.0.0' })
+      const pkg = createPackage('test', { '1.0.0': '2020-01-01' })
+      const current = createInstallSize('test', { version: '1.0.0' })
 
       const { diff } = useInstallSizeDiff('test', '1.0.0', pkg, current)
 
@@ -108,10 +117,21 @@ describe('useInstallSizeDiff', () => {
     })
 
     it('returns null when both thresholds are not met', async () => {
-      const pkg = createPackage({ '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
-      const current = createInstallSize({ version: '1.1.0', totalSize: 5100, dependencyCount: 4 })
+      const pkg = createPackage('pkg-no-threshold', {
+        '1.0.0': '2020-01-01',
+        '1.1.0': '2021-01-01',
+      })
+      const current = createInstallSize('pkg-no-threshold', {
+        version: '1.1.0',
+        totalSize: 5100,
+        dependencyCount: 4,
+      })
       fetchSpy.mockResolvedValue(
-        createInstallSize({ version: '1.0.0', totalSize: 5000, dependencyCount: 3 }),
+        createInstallSize('pkg-no-threshold', {
+          version: '1.0.0',
+          totalSize: 5000,
+          dependencyCount: 3,
+        }),
       )
 
       const { diff } = useInstallSizeDiff('pkg-no-threshold', '1.1.0', pkg, current)
@@ -121,10 +141,18 @@ describe('useInstallSizeDiff', () => {
     })
 
     it('sets sizeThresholdExceeded when size increased by more than 25%', async () => {
-      const pkg = createPackage({ '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
-      const current = createInstallSize({ version: '1.1.0', totalSize: 7000, dependencyCount: 4 })
+      const pkg = createPackage('pkg-size-only', { '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
+      const current = createInstallSize('pkg-size-only', {
+        version: '1.1.0',
+        totalSize: 7000,
+        dependencyCount: 4,
+      })
       fetchSpy.mockResolvedValue(
-        createInstallSize({ version: '1.0.0', totalSize: 5000, dependencyCount: 3 }),
+        createInstallSize('pkg-size-only', {
+          version: '1.0.0',
+          totalSize: 5000,
+          dependencyCount: 3,
+        }),
       )
 
       const { diff } = useInstallSizeDiff('pkg-size-only', '1.1.0', pkg, current)
@@ -145,10 +173,18 @@ describe('useInstallSizeDiff', () => {
     })
 
     it('sets depThresholdExceeded when more than 5 dependencies were added', async () => {
-      const pkg = createPackage({ '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
-      const current = createInstallSize({ version: '1.1.0', totalSize: 5100, dependencyCount: 10 })
+      const pkg = createPackage('pkg-deps-only', { '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
+      const current = createInstallSize('pkg-deps-only', {
+        version: '1.1.0',
+        totalSize: 5100,
+        dependencyCount: 10,
+      })
       fetchSpy.mockResolvedValue(
-        createInstallSize({ version: '1.0.0', totalSize: 5000, dependencyCount: 3 }),
+        createInstallSize('pkg-deps-only', {
+          version: '1.0.0',
+          totalSize: 5000,
+          dependencyCount: 3,
+        }),
       )
 
       const { diff } = useInstallSizeDiff('pkg-deps-only', '1.1.0', pkg, current)
@@ -169,10 +205,14 @@ describe('useInstallSizeDiff', () => {
     })
 
     it('returns correct diff values', async () => {
-      const pkg = createPackage({ '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
-      const current = createInstallSize({ version: '1.1.0', totalSize: 10000, dependencyCount: 15 })
+      const pkg = createPackage('pkg-both', { '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
+      const current = createInstallSize('pkg-both', {
+        version: '1.1.0',
+        totalSize: 10000,
+        dependencyCount: 15,
+      })
       fetchSpy.mockResolvedValue(
-        createInstallSize({ version: '1.0.0', totalSize: 5000, dependencyCount: 5 }),
+        createInstallSize('pkg-both', { version: '1.0.0', totalSize: 5000, dependencyCount: 5 }),
       )
 
       const { diff } = useInstallSizeDiff('pkg-both', '1.1.0', pkg, current)
@@ -195,9 +235,9 @@ describe('useInstallSizeDiff', () => {
 
   describe('fetch behavior', () => {
     it('calls the correct API endpoint for the comparison version', async () => {
-      const pkg = createPackage({ '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
-      const current = createInstallSize({ version: '1.1.0', totalSize: 7000 })
-      fetchSpy.mockResolvedValue(createInstallSize({ version: '1.0.0', totalSize: 5000 }))
+      const pkg = createPackage('my-pkg', { '1.0.0': '2020-01-01', '1.1.0': '2021-01-01' })
+      const current = createInstallSize('my-pkg', { version: '1.1.0', totalSize: 7000 })
+      fetchSpy.mockResolvedValue(createInstallSize('my-pkg', { version: '1.0.0', totalSize: 5000 }))
 
       useInstallSizeDiff('my-pkg', '1.1.0', pkg, current)
 
@@ -206,7 +246,7 @@ describe('useInstallSizeDiff', () => {
     })
 
     it('does not fetch when there is no comparison version', () => {
-      const pkg = createPackage({ '1.0.0': '2020-01-01' })
+      const pkg = createPackage('my-pkg', { '1.0.0': '2020-01-01' })
 
       useInstallSizeDiff('my-pkg', '1.0.0', pkg, null)
 

From 70486cac1db4142c06273d543ce54572688d7734 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 26 Feb 2026 22:15:56 +0000
Subject: [PATCH 6/6] fix: validate current install size staleness during
 navigation

---
 app/composables/useInstallSizeDiff.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/composables/useInstallSizeDiff.ts b/app/composables/useInstallSizeDiff.ts
index 8efbffcbb8..d399d794ba 100644
--- a/app/composables/useInstallSizeDiff.ts
+++ b/app/composables/useInstallSizeDiff.ts
@@ -83,7 +83,10 @@ export function useInstallSizeDiff(
     const cv = comparisonVersion.value
 
     if (!current || !previous || !cv) return null
-    if (previous.version !== cv || previous.package !== toValue(packageName)) return null
+    const name = toValue(packageName)
+    const version = toValue(resolvedVersion)
+    if (previous.version !== cv || previous.package !== name) return null
+    if (current.version !== version || current.package !== name) return null
 
     const sizeRatio =
       previous.totalSize > 0 ? (current.totalSize - previous.totalSize) / previous.totalSize : 0