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..d399d794ba
--- /dev/null
+++ b/app/composables/useInstallSizeDiff.ts
@@ -0,0 +1,115 @@
+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, () => toValue(packageName)],
+      ([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 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
+    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 b6cc958ee3..2a53cf33f8 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": "Significant 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 f9216cb26b..bd944ac87d 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": "Significant 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 c889c5287a..13a074d6ab 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": "Significant 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/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) {
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..1ee34f7d6a
--- /dev/null
+++ b/test/nuxt/composables/use-install-size-diff.spec.ts
@@ -0,0 +1,256 @@
+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': name,
+    'name': name,
+    'dist-tags': { latest: '1.0.0', ...distTags },
+    'time': { created: '2020-01-01', ...time },
+    'versions': {},
+    'requestedVersion': null,
+  } as SlimPackument
+}
+
+function createInstallSize(
+  name: string,
+  overrides: Partial<InstallSizeResult> = {},
+): InstallSizeResult {
+  return {
+    package: name,
+    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('test'))
+    vi.stubGlobal('$fetch', fetchSpy)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  describe('comparisonVersion', () => {
+    it('selects the semver-previous stable version', () => {
+      const pkg = createPackage('test', {
+        '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('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('test', {
+        '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(
+        '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' },
+      )
+
+      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(
+        '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('test', { '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('test', { '1.0.0': '2020-01-01' })
+      const current = createInstallSize('test', { 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('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('pkg-no-threshold', {
+          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('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('pkg-size-only', {
+          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('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('pkg-deps-only', {
+          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('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('pkg-both', { 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('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)
+
+      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('my-pkg', { '1.0.0': '2020-01-01' })
+
+      useInstallSizeDiff('my-pkg', '1.0.0', pkg, null)
+
+      expect(fetchSpy).not.toHaveBeenCalled()
+    })
+  })
+})