From 3bf1ff1e7ad116fdf517a6580e225b912eee9618 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Fri, 13 Mar 2026 16:26:15 +0800
Subject: [PATCH 01/27] feat: add basic version page with mock data

---
 app/components/Package/Versions.vue           |  37 ++-
 app/pages/package/[[org]]/[name].vue          |   6 +-
 app/pages/package/[[org]]/[name]/versions.vue | 299 ++++++++++++++++++
 3 files changed, 331 insertions(+), 11 deletions(-)
 create mode 100644 app/pages/package/[[org]]/[name]/versions.vue

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index c6df34a7e4..6f802d541a 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -95,6 +95,14 @@ function versionRoute(version: string): RouteLocationRaw {
   return packageRoute(props.packageName, version)
 }
 
+// Route to the full versions history page
+const versionsPageRoute = computed((): RouteLocationRaw => {
+  const [org, name = ''] = props.packageName.startsWith('@')
+    ? props.packageName.split('/')
+    : ['', props.packageName]
+  return { name: 'package-versions', params: { org, name } }
+})
+
 // Version to tags lookup (supports multiple tags per version)
 const versionToTags = computed(() => buildVersionToTagsMap(props.distTags))
 
@@ -521,15 +529,26 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
     id="versions"
   >
     <template #actions>
-      <ButtonBase
-        variant="secondary"
-        class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 -m-1 p-1 rounded"
-        :title="$t('package.downloads.community_distribution')"
-        classicon="i-lucide:file-stack"
-        @click="openDistributionModal"
-      >
-        <span class="sr-only">{{ $t('package.downloads.community_distribution') }}</span>
-      </ButtonBase>
+      <div class="flex items-center gap-3">
+        <LinkBase
+          :to="versionsPageRoute"
+          variant="button-secondary"
+          class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 p-1 rounded"
+          title="View all versions"
+          classicon="i-lucide:history"
+        >
+          <span class="sr-only">View all versions</span>
+        </LinkBase>
+        <ButtonBase
+          variant="secondary"
+          class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 -m-1 p-1 rounded"
+          :title="$t('package.downloads.community_distribution')"
+          classicon="i-lucide:file-stack"
+          @click="openDistributionModal"
+        >
+          <span class="sr-only">{{ $t('package.downloads.community_distribution') }}</span>
+        </ButtonBase>
+      </div>
     </template>
     <div class="space-y-0.5 min-w-0">
       <!-- Semver range filter -->
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 3af5415e5f..65f3c02440 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -207,6 +207,7 @@ const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg,
 //    → Preserve the server-rendered DOM, don't flash to skeleton.
 const nuxtApp = useNuxtApp()
 const route = useRoute()
+const isVersionsRoute = computed(() => route.name === 'package-versions')
 const hasEmptyPayload =
   import.meta.client &&
   nuxtApp.payload.serverRendered &&
@@ -516,7 +517,8 @@ const showSkeleton = shallowRef(false)
 </script>
 
 <template>
-  <DevOnly>
+  <NuxtPage v-if="isVersionsRoute" />
+  <DevOnly v-else>
     <ButtonBase
       class="fixed bottom-4 inset-is-4 z-50 shadow-lg rounded-full! px-3! py-2!"
       classicon="i-simple-icons:skeleton"
@@ -528,7 +530,7 @@ const showSkeleton = shallowRef(false)
       <span class="text-xs">Skeleton</span>
     </ButtonBase>
   </DevOnly>
-  <main class="flex-1 pb-8">
+  <main v-if="!isVersionsRoute" class="flex-1 pb-8">
     <!-- Scenario 1: SPA fallback — show skeleton (no real content to preserve) -->
     <!-- Scenario 2: SSR with missing payload — preserve server DOM, skip skeleton -->
     <PackageSkeleton
diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
new file mode 100644
index 0000000000..e4a98fb25b
--- /dev/null
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import { compare } from 'semver'
+import { buildVersionToTagsMap, buildTaggedVersionRows } from '~/utils/versions'
+
+definePageMeta({
+  name: 'package-versions',
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const packageName = computed(() => {
+  const { org, name } = route.params as { org?: string; name: string }
+  return org ? `${org}/${name}` : (name as string)
+})
+
+// ─── Mock data ────────────────────────────────────────────────────────────────
+// TODO: Replace with real data from usePackage() / fetchAllPackageVersions()
+
+interface VersionEntry {
+  version: string
+  time: string
+  deprecated?: string
+  hasProvenance: boolean
+}
+
+const mockDistTags: Record<string, string> = {
+  'latest': '7.26.3',
+  'next': '8.0.0-alpha.16',
+  'babel-7': '7.26.3',
+}
+
+const mockVersions: VersionEntry[] = [
+  { version: '8.0.0-alpha.16', time: '2024-12-15T10:00:00Z', hasProvenance: true },
+  { version: '8.0.0-alpha.15', time: '2024-11-20T10:00:00Z', hasProvenance: true },
+  { version: '8.0.0-alpha.14', time: '2024-10-30T10:00:00Z', hasProvenance: true },
+  { version: '8.0.0-alpha.13', time: '2024-10-01T10:00:00Z', hasProvenance: false },
+  { version: '7.26.3', time: '2024-12-10T10:00:00Z', hasProvenance: true },
+  { version: '7.26.2', time: '2024-11-28T10:00:00Z', hasProvenance: true },
+  { version: '7.26.1', time: '2024-11-14T10:00:00Z', hasProvenance: true },
+  { version: '7.26.0', time: '2024-10-25T10:00:00Z', hasProvenance: true },
+  { version: '7.25.9', time: '2024-10-15T10:00:00Z', hasProvenance: true },
+  { version: '7.25.8', time: '2024-09-20T10:00:00Z', hasProvenance: true },
+  { version: '7.25.7', time: '2024-08-15T10:00:00Z', hasProvenance: false },
+  { version: '7.25.6', time: '2024-07-20T10:00:00Z', hasProvenance: false },
+  { version: '7.25.5', time: '2024-06-10T10:00:00Z', hasProvenance: false },
+  { version: '7.25.4', time: '2024-05-20T10:00:00Z', hasProvenance: false },
+  { version: '7.25.3', time: '2024-04-15T10:00:00Z', hasProvenance: false },
+  { version: '7.25.2', time: '2024-03-20T10:00:00Z', hasProvenance: false },
+  { version: '7.25.1', time: '2024-03-05T10:00:00Z', hasProvenance: false },
+  { version: '7.25.0', time: '2024-02-20T10:00:00Z', hasProvenance: false },
+  { version: '7.24.7', time: '2024-03-01T10:00:00Z', hasProvenance: false },
+  { version: '7.24.6', time: '2024-02-10T10:00:00Z', hasProvenance: false },
+  { version: '7.24.5', time: '2024-01-25T10:00:00Z', hasProvenance: false },
+  { version: '7.24.4', time: '2024-01-10T10:00:00Z', hasProvenance: false },
+  { version: '7.24.0', time: '2023-12-20T10:00:00Z', hasProvenance: false },
+  { version: '7.23.6', time: '2023-12-15T10:00:00Z', hasProvenance: false },
+  { version: '7.23.5', time: '2023-11-10T10:00:00Z', hasProvenance: false },
+  { version: '7.23.0', time: '2023-09-05T10:00:00Z', hasProvenance: false },
+  { version: '7.22.5', time: '2023-07-08T10:00:00Z', hasProvenance: false },
+  { version: '7.22.0', time: '2023-05-16T10:00:00Z', hasProvenance: false },
+  { version: '7.0.0', time: '2018-08-27T10:00:00Z', hasProvenance: false },
+  {
+    version: '6.26.0',
+    time: '2018-03-14T10:00:00Z',
+    hasProvenance: false,
+    deprecated: 'Use @babel/types 7.x or later',
+  },
+  {
+    version: '6.25.0',
+    time: '2018-01-10T10:00:00Z',
+    hasProvenance: false,
+    deprecated: 'Use @babel/types 7.x or later',
+  },
+  {
+    version: '6.24.1',
+    time: '2017-09-12T10:00:00Z',
+    hasProvenance: false,
+    deprecated: 'Use @babel/types 7.x or later',
+  },
+]
+
+// ─── Derived data ─────────────────────────────────────────────────────────────
+
+const versionToTagsMap = computed(() => buildVersionToTagsMap(mockDistTags))
+
+const sortedVersions = computed(() =>
+  [...mockVersions]
+    .sort((a, b) => compare(b.version, a.version))
+    .map(v => ({ ...v, tags: versionToTagsMap.value.get(v.version) })),
+)
+
+const tagRows = computed(() => buildTaggedVersionRows(mockDistTags))
+
+function getVersionTime(version: string): string | undefined {
+  return mockVersions.find(v => v.version === version)?.time
+}
+
+// ─── Jump to version ──────────────────────────────────────────────────────────
+
+const jumpVersion = ref('')
+const jumpError = ref('')
+
+function navigateToVersion() {
+  const v = jumpVersion.value.trim()
+  if (!v) return
+  if (!mockVersions.some(mv => mv.version === v)) {
+    jumpError.value = `Version "${v}" not found`
+    return
+  }
+  jumpError.value = ''
+  router.push(packageRoute(packageName.value, v))
+}
+</script>
+
+<template>
+  <main class="container flex-1 w-full py-8">
+    <div class="max-w-3xl mx-auto">
+      <!-- Back link -->
+      <div class="mb-6">
+        <LinkBase :to="packageRoute(packageName)" classicon="i-lucide:arrow-left" class="text-sm">
+          <span class="font-mono" dir="ltr">{{ packageName }}</span>
+        </LinkBase>
+      </div>
+
+      <!-- Page heading -->
+      <h1 class="font-mono text-2xl sm:text-3xl font-medium mb-8" dir="ltr">
+        {{ packageName }}
+        <span class="text-fg-muted font-normal text-lg sm:text-2xl ms-2">· Version History</span>
+      </h1>
+
+      <!-- ── Current Tags ─────────────────────────────────────────────────── -->
+      <section class="mb-10">
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3 ps-1">Current Tags</h2>
+        <div class="rounded-lg border border-border overflow-hidden">
+          <table class="w-full">
+            <thead>
+              <tr class="border-b border-border bg-bg-subtle">
+                <th
+                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider w-1/3"
+                >
+                  Tag
+                </th>
+                <th
+                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider w-1/3"
+                >
+                  Version
+                </th>
+                <th
+                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider hidden sm:table-cell"
+                >
+                  Published
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="row in tagRows"
+                :key="row.id"
+                class="border-b border-border last:border-0 hover:bg-bg-subtle transition-colors"
+              >
+                <td class="px-4 py-3">
+                  <div class="flex items-center gap-1.5 flex-wrap">
+                    <span
+                      v-for="tag in row.tags"
+                      :key="tag"
+                      class="text-4xs font-semibold uppercase tracking-wide"
+                      :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                    >
+                      {{ tag }}
+                    </span>
+                  </div>
+                </td>
+                <td class="px-4 py-3">
+                  <LinkBase
+                    :to="packageRoute(packageName, row.version)"
+                    class="font-mono text-sm"
+                    dir="ltr"
+                  >
+                    {{ row.version }}
+                  </LinkBase>
+                </td>
+                <td class="px-4 py-3 hidden sm:table-cell">
+                  <DateTime
+                    v-if="getVersionTime(row.version)"
+                    :datetime="getVersionTime(row.version)!"
+                    class="text-xs text-fg-subtle"
+                    year="numeric"
+                    month="short"
+                    day="numeric"
+                  />
+                  <span v-else class="text-xs text-fg-subtle">—</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- ── Version History ──────────────────────────────────────────────── -->
+      <section>
+        <!-- Header + jump-to-version -->
+        <div class="flex flex-wrap items-center justify-between gap-3 mb-4 ps-1">
+          <h2 class="text-xs text-fg-subtle uppercase tracking-wider">
+            Version History
+            <span class="text-fg-subtle ms-1 normal-case font-normal tracking-normal">
+              ({{ sortedVersions.length }})
+            </span>
+          </h2>
+          <div class="flex items-center gap-2">
+            <InputBase
+              v-model="jumpVersion"
+              type="text"
+              placeholder="e.g. 7.26.0"
+              :aria-label="'Jump to version'"
+              size="small"
+              class="w-36 sm:w-44 font-mono"
+              @keydown.enter="navigateToVersion"
+            />
+            <ButtonBase
+              variant="secondary"
+              size="small"
+              classicon="i-lucide:arrow-right"
+              :disabled="!jumpVersion.trim()"
+              @click="navigateToVersion"
+            >
+              Go
+            </ButtonBase>
+          </div>
+        </div>
+        <p v-if="jumpError" role="alert" class="text-red-500 dark:text-red-400 text-xs mb-3 ps-1">
+          {{ jumpError }}
+        </p>
+
+        <!-- Version list -->
+        <div class="rounded-lg border border-border overflow-hidden">
+          <div
+            v-for="v in sortedVersions"
+            :key="v.version"
+            class="flex items-center gap-3 px-4 py-2.5 border-b border-border last:border-0 hover:bg-bg-subtle transition-colors group relative"
+          >
+            <!-- Version + badges -->
+            <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
+              <LinkBase
+                :to="packageRoute(packageName, v.version)"
+                class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
+                :class="v.deprecated ? 'text-red-700 dark:text-red-400' : ''"
+                :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
+                dir="ltr"
+              >
+                {{ v.version }}
+              </LinkBase>
+
+              <!-- Dist-tags -->
+              <div v-if="v.tags?.length" class="flex items-center gap-1 flex-wrap relative z-10">
+                <span
+                  v-for="tag in v.tags"
+                  :key="tag"
+                  class="text-4xs font-semibold uppercase tracking-wide"
+                  :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                >
+                  {{ tag }}
+                </span>
+              </div>
+
+              <!-- Deprecated label -->
+              <span
+                v-if="v.deprecated"
+                class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                :title="v.deprecated"
+              >
+                deprecated
+              </span>
+            </div>
+
+            <!-- Right side: date + provenance -->
+            <div class="flex items-center gap-3 shrink-0 relative z-10">
+              <DateTime
+                v-if="v.time"
+                :datetime="v.time"
+                class="text-xs text-fg-subtle hidden sm:block"
+                year="numeric"
+                month="short"
+                day="numeric"
+              />
+              <ProvenanceBadge
+                v-if="v.hasProvenance"
+                :package-name="packageName"
+                :version="v.version"
+                compact
+                :linked="false"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </main>
+</template>

From 1373fdf59972db3cd48d7d3fd531584a23560852 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Wed, 11 Mar 2026 12:15:55 +0800
Subject: [PATCH 02/27] feat: update page layout

---
 app/pages/package/[[org]]/[name]/versions.vue | 65 +++++++++++--------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index e4a98fb25b..c641e31e4e 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { PackageVersionInfo } from '#shared/types'
 import { compare } from 'semver'
 import { buildVersionToTagsMap, buildTaggedVersionRows } from '~/utils/versions'
 
@@ -14,23 +15,24 @@ const packageName = computed(() => {
   return org ? `${org}/${name}` : (name as string)
 })
 
-// ─── Mock data ────────────────────────────────────────────────────────────────
-// TODO: Replace with real data from usePackage() / fetchAllPackageVersions()
+const orgName = computed(() => {
+  const name = packageName.value
+  if (!name.startsWith('@')) return null
+  const match = name.match(/^@([^/]+)\//)
+  return match ? match[1] : null
+})
 
-interface VersionEntry {
-  version: string
-  time: string
-  deprecated?: string
-  hasProvenance: boolean
-}
+// ─── Mock data ────────────────────────────────────────────────────────────────
+// TODO: Replace distTags with pkg['dist-tags'] from usePackage()
+// TODO: Replace versionHistory with data from useAllPackageVersions()
 
-const mockDistTags: Record<string, string> = {
+const distTags: Record<string, string> = {
   'latest': '7.26.3',
   'next': '8.0.0-alpha.16',
   'babel-7': '7.26.3',
 }
 
-const mockVersions: VersionEntry[] = [
+const versionHistory: PackageVersionInfo[] = [
   { version: '8.0.0-alpha.16', time: '2024-12-15T10:00:00Z', hasProvenance: true },
   { version: '8.0.0-alpha.15', time: '2024-11-20T10:00:00Z', hasProvenance: true },
   { version: '8.0.0-alpha.14', time: '2024-10-30T10:00:00Z', hasProvenance: true },
@@ -82,18 +84,18 @@ const mockVersions: VersionEntry[] = [
 
 // ─── Derived data ─────────────────────────────────────────────────────────────
 
-const versionToTagsMap = computed(() => buildVersionToTagsMap(mockDistTags))
+const versionToTagsMap = computed(() => buildVersionToTagsMap(distTags))
 
 const sortedVersions = computed(() =>
-  [...mockVersions]
+  [...versionHistory]
     .sort((a, b) => compare(b.version, a.version))
     .map(v => ({ ...v, tags: versionToTagsMap.value.get(v.version) })),
 )
 
-const tagRows = computed(() => buildTaggedVersionRows(mockDistTags))
+const tagRows = computed(() => buildTaggedVersionRows(distTags))
 
 function getVersionTime(version: string): string | undefined {
-  return mockVersions.find(v => v.version === version)?.time
+  return versionHistory.find(v => v.version === version)?.time
 }
 
 // ─── Jump to version ──────────────────────────────────────────────────────────
@@ -104,7 +106,7 @@ const jumpError = ref('')
 function navigateToVersion() {
   const v = jumpVersion.value.trim()
   if (!v) return
-  if (!mockVersions.some(mv => mv.version === v)) {
+  if (!versionHistory.some(entry => entry.version === v)) {
     jumpError.value = `Version "${v}" not found`
     return
   }
@@ -114,21 +116,28 @@ function navigateToVersion() {
 </script>
 
 <template>
-  <main class="container flex-1 w-full py-8">
-    <div class="max-w-3xl mx-auto">
-      <!-- Back link -->
-      <div class="mb-6">
-        <LinkBase :to="packageRoute(packageName)" classicon="i-lucide:arrow-left" class="text-sm">
-          <span class="font-mono" dir="ltr">{{ packageName }}</span>
-        </LinkBase>
+  <main class="flex-1 flex flex-col">
+    <!-- Header (same pattern as code/docs pages) -->
+    <header class="border-b border-border bg-bg sticky top-14 z-20">
+      <div class="container py-4">
+        <div class="flex items-center gap-2 min-w-0">
+          <NuxtLink
+            :to="packageRoute(packageName)"
+            class="font-mono text-lg font-medium hover:text-fg-muted transition-colors min-w-0 truncate"
+            :title="packageName"
+            dir="ltr"
+          >
+            <span v-if="orgName" class="text-fg-muted">@{{ orgName }}/</span
+            >{{ orgName ? packageName.replace(`@${orgName}/`, '') : packageName }}
+          </NuxtLink>
+          <span class="text-fg-subtle shrink-0">/</span>
+          <span class="font-mono text-sm text-fg-muted shrink-0">Version History</span>
+        </div>
       </div>
+    </header>
 
-      <!-- Page heading -->
-      <h1 class="font-mono text-2xl sm:text-3xl font-medium mb-8" dir="ltr">
-        {{ packageName }}
-        <span class="text-fg-muted font-normal text-lg sm:text-2xl ms-2">· Version History</span>
-      </h1>
-
+    <!-- Content -->
+    <div class="container max-w-3xl py-8">
       <!-- ── Current Tags ─────────────────────────────────────────────────── -->
       <section class="mb-10">
         <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3 ps-1">Current Tags</h2>

From ff2c7a8badeb340e2716c5224010196fd8b4563b Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Wed, 11 Mar 2026 12:32:30 +0800
Subject: [PATCH 03/27] feat: tweaks layout

---
 app/pages/package/[[org]]/[name]/versions.vue | 200 +++++++++++++-----
 1 file changed, 148 insertions(+), 52 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index c641e31e4e..69cba909ba 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -25,6 +25,7 @@ const orgName = computed(() => {
 // ─── Mock data ────────────────────────────────────────────────────────────────
 // TODO: Replace distTags with pkg['dist-tags'] from usePackage()
 // TODO: Replace versionHistory with data from useAllPackageVersions()
+// TODO: Replace mockChangelogs with real changelog data (e.g. GitHub releases or CHANGELOG.md)
 
 const distTags: Record<string, string> = {
   'latest': '7.26.3',
@@ -82,6 +83,39 @@ const versionHistory: PackageVersionInfo[] = [
   },
 ]
 
+// Changelog entries keyed by version. In production this would come from GitHub
+// releases or a CHANGELOG.md parsed from the package files.
+const mockChangelogs: Record<string, string[]> = {
+  '8.0.0-alpha.16': [
+    'Added support for TypeScript 5.x type imports in builder helpers',
+    'Improved error messages for invalid AST node transformations',
+    'Fixed incorrect location tracking for template literals inside tagged expressions',
+    'Resolved memory leak in recursive type visitor traversal',
+  ],
+  '7.26.3': [
+    'Fixed edge case in identifier validation for private class fields (#16421)',
+    'Corrected span calculation for async generator function expressions',
+  ],
+  '7.26.0': [
+    'Added assert keyword support for import assertions (Stage 3 proposal)',
+    'New createTypeAnnotation builder helper for programmatic AST construction',
+    'Fixed inconsistent behavior in optional chaining type narrowing',
+    'Corrected position data for JSX fragment children with whitespace',
+  ],
+  '7.25.0': [
+    'Introduced satisfies operator support (TypeScript 4.9)',
+    'Added experimental decorator metadata helpers behind a flag',
+    'Removed deprecated isType aliases — use isTSType instead',
+    'Improved clone performance for large ASTs by ~18%',
+  ],
+  '7.0.0': [
+    'Package renamed from babel-types to @babel/types',
+    'All APIs now use ES module syntax',
+    'Dropped support for Node.js < 6',
+    'Removed all deprecated v5 builder aliases',
+  ],
+}
+
 // ─── Derived data ─────────────────────────────────────────────────────────────
 
 const versionToTagsMap = computed(() => buildVersionToTagsMap(distTags))
@@ -89,7 +123,11 @@ const versionToTagsMap = computed(() => buildVersionToTagsMap(distTags))
 const sortedVersions = computed(() =>
   [...versionHistory]
     .sort((a, b) => compare(b.version, a.version))
-    .map(v => ({ ...v, tags: versionToTagsMap.value.get(v.version) })),
+    .map(v => ({
+      ...v,
+      tags: versionToTagsMap.value.get(v.version),
+      changelog: mockChangelogs[v.version] ?? null,
+    })),
 )
 
 const tagRows = computed(() => buildTaggedVersionRows(distTags))
@@ -98,6 +136,19 @@ function getVersionTime(version: string): string | undefined {
   return versionHistory.find(v => v.version === version)?.time
 }
 
+// ─── Changelog expand/collapse ────────────────────────────────────────────────
+
+const expandedChangelogs = ref<Set<string>>(new Set())
+
+function toggleChangelog(version: string) {
+  if (expandedChangelogs.value.has(version)) {
+    expandedChangelogs.value.delete(version)
+  } else {
+    expandedChangelogs.value.add(version)
+  }
+  expandedChangelogs.value = new Set(expandedChangelogs.value)
+}
+
 // ─── Jump to version ──────────────────────────────────────────────────────────
 
 const jumpVersion = ref('')
@@ -137,26 +188,26 @@ function navigateToVersion() {
     </header>
 
     <!-- Content -->
-    <div class="container max-w-3xl py-8">
+    <div class="container py-8 flex flex-col lg:flex-row gap-8 items-start">
       <!-- ── Current Tags ─────────────────────────────────────────────────── -->
-      <section class="mb-10">
+      <section class="w-full lg:w-72 shrink-0">
         <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3 ps-1">Current Tags</h2>
         <div class="rounded-lg border border-border overflow-hidden">
           <table class="w-full">
             <thead>
               <tr class="border-b border-border bg-bg-subtle">
                 <th
-                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider w-1/3"
+                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider"
                 >
                   Tag
                 </th>
                 <th
-                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider w-1/3"
+                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider"
                 >
                   Version
                 </th>
                 <th
-                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider hidden sm:table-cell"
+                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider hidden sm:table-cell lg:hidden xl:table-cell"
                 >
                   Published
                 </th>
@@ -189,7 +240,7 @@ function navigateToVersion() {
                     {{ row.version }}
                   </LinkBase>
                 </td>
-                <td class="px-4 py-3 hidden sm:table-cell">
+                <td class="px-4 py-3 hidden sm:table-cell lg:hidden xl:table-cell">
                   <DateTime
                     v-if="getVersionTime(row.version)"
                     :datetime="getVersionTime(row.version)!"
@@ -207,7 +258,7 @@ function navigateToVersion() {
       </section>
 
       <!-- ── Version History ──────────────────────────────────────────────── -->
-      <section>
+      <section class="flex-1 min-w-0">
         <!-- Header + jump-to-version -->
         <div class="flex flex-wrap items-center justify-between gap-3 mb-4 ps-1">
           <h2 class="text-xs text-fg-subtle uppercase tracking-wider">
@@ -246,59 +297,104 @@ function navigateToVersion() {
           <div
             v-for="v in sortedVersions"
             :key="v.version"
-            class="flex items-center gap-3 px-4 py-2.5 border-b border-border last:border-0 hover:bg-bg-subtle transition-colors group relative"
+            class="border-b border-border last:border-0"
           >
-            <!-- Version + badges -->
-            <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
-              <LinkBase
-                :to="packageRoute(packageName, v.version)"
-                class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
-                :class="v.deprecated ? 'text-red-700 dark:text-red-400' : ''"
-                :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
-                dir="ltr"
-              >
-                {{ v.version }}
-              </LinkBase>
+            <!-- Version row -->
+            <div
+              class="flex items-center gap-3 px-4 py-2.5 hover:bg-bg-subtle transition-colors group relative"
+            >
+              <!-- Version + badges -->
+              <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
+                <LinkBase
+                  :to="packageRoute(packageName, v.version)"
+                  class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
+                  :class="v.deprecated ? 'text-red-700 dark:text-red-400' : ''"
+                  :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
+                  dir="ltr"
+                >
+                  {{ v.version }}
+                </LinkBase>
 
-              <!-- Dist-tags -->
-              <div v-if="v.tags?.length" class="flex items-center gap-1 flex-wrap relative z-10">
+                <!-- Dist-tags -->
+                <div v-if="v.tags?.length" class="flex items-center gap-1 flex-wrap relative z-10">
+                  <span
+                    v-for="tag in v.tags"
+                    :key="tag"
+                    class="text-4xs font-semibold uppercase tracking-wide"
+                    :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                  >
+                    {{ tag }}
+                  </span>
+                </div>
+
+                <!-- Deprecated label -->
                 <span
-                  v-for="tag in v.tags"
-                  :key="tag"
-                  class="text-4xs font-semibold uppercase tracking-wide"
-                  :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                  v-if="v.deprecated"
+                  class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                  :title="v.deprecated"
                 >
-                  {{ tag }}
+                  deprecated
                 </span>
               </div>
 
-              <!-- Deprecated label -->
-              <span
-                v-if="v.deprecated"
-                class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
-                :title="v.deprecated"
-              >
-                deprecated
-              </span>
+              <!-- Right side: date + provenance + changelog toggle -->
+              <div class="flex items-center gap-3 shrink-0 relative z-10">
+                <DateTime
+                  v-if="v.time"
+                  :datetime="v.time"
+                  class="text-xs text-fg-subtle hidden sm:block"
+                  year="numeric"
+                  month="short"
+                  day="numeric"
+                />
+                <ProvenanceBadge
+                  v-if="v.hasProvenance"
+                  :package-name="packageName"
+                  :version="v.version"
+                  compact
+                  :linked="false"
+                />
+                <!-- Changelog toggle button -->
+                <button
+                  v-if="v.changelog"
+                  type="button"
+                  class="flex items-center gap-1 text-xs text-fg-subtle hover:text-fg transition-colors rounded focus-visible:outline-accent/70"
+                  :aria-expanded="expandedChangelogs.has(v.version)"
+                  @click.stop="toggleChangelog(v.version)"
+                >
+                  <span
+                    class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 motion-reduce:transition-none"
+                    :class="{ 'rotate-90': expandedChangelogs.has(v.version) }"
+                    aria-hidden="true"
+                  />
+                  <span class="hidden sm:inline">Changelog</span>
+                </button>
+              </div>
             </div>
 
-            <!-- Right side: date + provenance -->
-            <div class="flex items-center gap-3 shrink-0 relative z-10">
-              <DateTime
-                v-if="v.time"
-                :datetime="v.time"
-                class="text-xs text-fg-subtle hidden sm:block"
-                year="numeric"
-                month="short"
-                day="numeric"
-              />
-              <ProvenanceBadge
-                v-if="v.hasProvenance"
-                :package-name="packageName"
-                :version="v.version"
-                compact
-                :linked="false"
-              />
+            <!-- Changelog expansion -->
+            <div
+              v-if="v.changelog"
+              class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+              :class="expandedChangelogs.has(v.version) ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
+            >
+              <div class="overflow-hidden min-h-0">
+                <div class="px-4 pb-4 pt-3 border-t border-border bg-bg-subtle">
+                  <ul class="space-y-1.5 list-none m-0 p-0">
+                    <li
+                      v-for="(entry, i) in v.changelog"
+                      :key="i"
+                      class="flex items-start gap-2 text-sm text-fg-muted"
+                    >
+                      <span
+                        class="i-lucide:minus w-3.5 h-3.5 mt-0.5 text-fg-subtle shrink-0"
+                        aria-hidden="true"
+                      />
+                      {{ entry }}
+                    </li>
+                  </ul>
+                </div>
+              </div>
             </div>
           </div>
         </div>

From 55c8117db6c2289a1d41145dabefca0a802bc5ef Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Wed, 11 Mar 2026 13:39:45 +0800
Subject: [PATCH 04/27] refactor: tweaks the layout

---
 app/pages/package/[[org]]/[name]/versions.vue | 819 ++++++++++++------
 1 file changed, 555 insertions(+), 264 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index 69cba909ba..e3b526e35d 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -25,95 +25,256 @@ const orgName = computed(() => {
 // ─── Mock data ────────────────────────────────────────────────────────────────
 // TODO: Replace distTags with pkg['dist-tags'] from usePackage()
 // TODO: Replace versionHistory with data from useAllPackageVersions()
-// TODO: Replace mockChangelogs with real changelog data (e.g. GitHub releases or CHANGELOG.md)
+// TODO: Replace mockChangelogs with pre-rendered HTML from the server
+//       (GitHub releases body or CHANGELOG.md, parsed server-side like README)
 
 const distTags: Record<string, string> = {
-  'latest': '7.26.3',
-  'next': '8.0.0-alpha.16',
-  'babel-7': '7.26.3',
+  latest: '3.4.21',
+  next: '3.5.0-beta.3',
+  beta: '3.5.0-beta.3',
+  rc: '3.5.0-rc.1',
+  alpha: '3.5.0-alpha.5',
+  csp: '3.4.21',
+  legacy: '2.7.16',
 }
 
 const versionHistory: PackageVersionInfo[] = [
-  { version: '8.0.0-alpha.16', time: '2024-12-15T10:00:00Z', hasProvenance: true },
-  { version: '8.0.0-alpha.15', time: '2024-11-20T10:00:00Z', hasProvenance: true },
-  { version: '8.0.0-alpha.14', time: '2024-10-30T10:00:00Z', hasProvenance: true },
-  { version: '8.0.0-alpha.13', time: '2024-10-01T10:00:00Z', hasProvenance: false },
-  { version: '7.26.3', time: '2024-12-10T10:00:00Z', hasProvenance: true },
-  { version: '7.26.2', time: '2024-11-28T10:00:00Z', hasProvenance: true },
-  { version: '7.26.1', time: '2024-11-14T10:00:00Z', hasProvenance: true },
-  { version: '7.26.0', time: '2024-10-25T10:00:00Z', hasProvenance: true },
-  { version: '7.25.9', time: '2024-10-15T10:00:00Z', hasProvenance: true },
-  { version: '7.25.8', time: '2024-09-20T10:00:00Z', hasProvenance: true },
-  { version: '7.25.7', time: '2024-08-15T10:00:00Z', hasProvenance: false },
-  { version: '7.25.6', time: '2024-07-20T10:00:00Z', hasProvenance: false },
-  { version: '7.25.5', time: '2024-06-10T10:00:00Z', hasProvenance: false },
-  { version: '7.25.4', time: '2024-05-20T10:00:00Z', hasProvenance: false },
-  { version: '7.25.3', time: '2024-04-15T10:00:00Z', hasProvenance: false },
-  { version: '7.25.2', time: '2024-03-20T10:00:00Z', hasProvenance: false },
-  { version: '7.25.1', time: '2024-03-05T10:00:00Z', hasProvenance: false },
-  { version: '7.25.0', time: '2024-02-20T10:00:00Z', hasProvenance: false },
-  { version: '7.24.7', time: '2024-03-01T10:00:00Z', hasProvenance: false },
-  { version: '7.24.6', time: '2024-02-10T10:00:00Z', hasProvenance: false },
-  { version: '7.24.5', time: '2024-01-25T10:00:00Z', hasProvenance: false },
-  { version: '7.24.4', time: '2024-01-10T10:00:00Z', hasProvenance: false },
-  { version: '7.24.0', time: '2023-12-20T10:00:00Z', hasProvenance: false },
-  { version: '7.23.6', time: '2023-12-15T10:00:00Z', hasProvenance: false },
-  { version: '7.23.5', time: '2023-11-10T10:00:00Z', hasProvenance: false },
-  { version: '7.23.0', time: '2023-09-05T10:00:00Z', hasProvenance: false },
-  { version: '7.22.5', time: '2023-07-08T10:00:00Z', hasProvenance: false },
-  { version: '7.22.0', time: '2023-05-16T10:00:00Z', hasProvenance: false },
-  { version: '7.0.0', time: '2018-08-27T10:00:00Z', hasProvenance: false },
+  { version: '3.5.0-beta.3', time: '2024-12-18T10:00:00Z', hasProvenance: true },
+  { version: '3.5.0-rc.1', time: '2024-12-10T10:00:00Z', hasProvenance: true },
+  { version: '3.5.0-alpha.5', time: '2024-11-28T10:00:00Z', hasProvenance: true },
+  { version: '3.5.0-alpha.4', time: '2024-11-10T10:00:00Z', hasProvenance: false },
+  { version: '3.5.0-alpha.3', time: '2024-10-22T10:00:00Z', hasProvenance: false },
+  { version: '3.4.21', time: '2024-12-05T10:00:00Z', hasProvenance: true },
+  { version: '3.4.20', time: '2024-11-20T10:00:00Z', hasProvenance: true },
+  { version: '3.4.19', time: '2024-11-08T10:00:00Z', hasProvenance: true },
+  { version: '3.4.18', time: '2024-10-25T10:00:00Z', hasProvenance: true },
+  { version: '3.4.17', time: '2024-10-01T10:00:00Z', hasProvenance: true },
+  { version: '3.4.0', time: '2024-02-15T10:00:00Z', hasProvenance: false },
+  { version: '3.3.13', time: '2024-01-10T10:00:00Z', hasProvenance: false },
+  { version: '3.3.0', time: '2023-05-11T10:00:00Z', hasProvenance: false },
+  { version: '3.2.47', time: '2023-03-30T10:00:00Z', hasProvenance: false },
+  { version: '3.0.0', time: '2022-09-29T10:00:00Z', hasProvenance: false },
+  { version: '2.7.16', time: '2023-12-08T10:00:00Z', hasProvenance: false },
+  { version: '2.7.15', time: '2023-09-12T10:00:00Z', hasProvenance: false },
+  { version: '2.7.14', time: '2023-06-01T10:00:00Z', hasProvenance: false },
+  { version: '2.7.0', time: '2022-07-01T10:00:00Z', hasProvenance: false },
+  { version: '2.6.14', time: '2022-03-14T10:00:00Z', hasProvenance: false },
   {
-    version: '6.26.0',
-    time: '2018-03-14T10:00:00Z',
+    version: '2.5.22',
+    time: '2018-03-20T10:00:00Z',
     hasProvenance: false,
-    deprecated: 'Use @babel/types 7.x or later',
+    deprecated: 'Use vue@2.6.x or later',
   },
   {
-    version: '6.25.0',
-    time: '2018-01-10T10:00:00Z',
+    version: '2.5.0',
+    time: '2017-10-13T10:00:00Z',
     hasProvenance: false,
-    deprecated: 'Use @babel/types 7.x or later',
-  },
-  {
-    version: '6.24.1',
-    time: '2017-09-12T10:00:00Z',
-    hasProvenance: false,
-    deprecated: 'Use @babel/types 7.x or later',
+    deprecated: 'Use vue@2.6.x or later',
   },
+  { version: '1.0.28', time: '2016-12-15T10:00:00Z', hasProvenance: false },
 ]
 
-// Changelog entries keyed by version. In production this would come from GitHub
-// releases or a CHANGELOG.md parsed from the package files.
-const mockChangelogs: Record<string, string[]> = {
-  '8.0.0-alpha.16': [
-    'Added support for TypeScript 5.x type imports in builder helpers',
-    'Improved error messages for invalid AST node transformations',
-    'Fixed incorrect location tracking for template literals inside tagged expressions',
-    'Resolved memory leak in recursive type visitor traversal',
-  ],
-  '7.26.3': [
-    'Fixed edge case in identifier validation for private class fields (#16421)',
-    'Corrected span calculation for async generator function expressions',
-  ],
-  '7.26.0': [
-    'Added assert keyword support for import assertions (Stage 3 proposal)',
-    'New createTypeAnnotation builder helper for programmatic AST construction',
-    'Fixed inconsistent behavior in optional chaining type narrowing',
-    'Corrected position data for JSX fragment children with whitespace',
-  ],
-  '7.25.0': [
-    'Introduced satisfies operator support (TypeScript 4.9)',
-    'Added experimental decorator metadata helpers behind a flag',
-    'Removed deprecated isType aliases — use isTSType instead',
-    'Improved clone performance for large ASTs by ~18%',
-  ],
-  '7.0.0': [
-    'Package renamed from babel-types to @babel/types',
-    'All APIs now use ES module syntax',
-    'Dropped support for Node.js < 6',
-    'Removed all deprecated v5 builder aliases',
-  ],
+// Changelog markdown strings keyed by version.
+// In production these would be pre-rendered HTML from the server
+// (e.g. GitHub release body or CHANGELOG.md, parsed like README).
+const mockChangelogs: Record<string, string> = {
+  '3.5.0-beta.3': `### Bug Fixes
+
+- Fixed \`v-model\` not triggering update when used with custom modifier on the same component
+- Resolved hydration mismatch for \`<Suspense>\` with async setup components
+
+### Performance
+
+- Reduced scheduler flush cost for large component trees with many watchers`,
+
+  '3.5.0-rc.1': `## Vue 3.5 RC
+
+The API is now stable. This release candidate is intended for final testing before the stable release.
+
+### New Features
+
+- \`useTemplateRef()\` — reactive ref bound to a template element by string key
+- \`useId()\` — SSR-safe unique ID generation for accessibility attributes
+- Deferred \`<Suspense>\` — suspense boundary no longer blocks parent tree rendering
+
+### Breaking Changes
+
+> **Note:** These only affect experimental APIs that were previously behind flags.
+
+- Removed \`v-memo\` on component root nodes — use it on inner elements instead
+- \`defineModel()\` local mutation now requires explicit \`local\` option
+
+**Full Changelog**: [v3.4.21...v3.5.0-rc.1](https://github.com/vuejs/core/compare/v3.4.21...v3.5.0-rc.1)`,
+
+  '3.4.21': `### Bug Fixes
+
+- Fixed \`<KeepAlive>\` failing to restore scroll position on re-activation (#10156)
+- Corrected \`shallowReadonly\` not preserving array identity on nested access
+- Fixed compiler warning for \`v-bind\` shorthand used on \`<slot>\` elements
+
+**Full Changelog**: [v3.4.20...v3.4.21](https://github.com/vuejs/core/compare/v3.4.20...v3.4.21)`,
+
+  '3.4.0': `## Vue 3.4 — "Slam Dunk"
+
+### New Features
+
+- **Reactivity transform removed** — the experimental \`$ref\` sugar has been dropped; use \`ref()\` directly
+- **\`v-bind\` shorthand** — \`:foo\` can now be written as just \`:foo\` when binding a same-name prop
+- **\`defineModel()\` stable** — two-way binding macro is now stable and no longer requires opt-in
+- **Parser rewrite** — the template compiler's parser is 2× faster and produces better error messages
+
+### Breaking Changes
+
+- \`app.config.compilerOptions.isCustomElement\` now receives the full element tag with namespace prefix
+- \`@vue/reactivity\` no longer exports \`deferredComputed\` — use \`computed\` with a scheduler instead
+
+\`\`\`ts
+// Before
+const double = deferredComputed(() => count.value * 2)
+
+// After
+const double = computed(() => count.value * 2, { scheduler: queueMicrotask })
+\`\`\`
+
+**Full Changelog**: [v3.3.13...v3.4.0](https://github.com/vuejs/core/compare/v3.3.13...v3.4.0)`,
+
+  '3.0.0': `## Vue 3.0 — "One Piece"
+
+The first stable release of Vue 3. Rebuilt from the ground up with the Composition API, TypeScript, and a new reactivity system.
+
+### Highlights
+
+- **Composition API** — \`setup()\`, \`ref()\`, \`reactive()\`, \`computed()\`, \`watch()\`
+- **Fragments** — components can now have multiple root nodes
+- **Teleport** — render content in a different part of the DOM
+- **Suspense** — coordinate async dependency resolution in component trees
+- **Improved TypeScript support** — full type inference for component props and emits
+- **Tree-shakeable** — global APIs are now ES module exports
+
+### Migration
+
+Vue 3 is not backwards compatible with Vue 2. See the [Migration Guide](https://v3-migration.vuejs.org/) for a full list of breaking changes.
+
+**Full Changelog**: [github.com/vuejs/core](https://github.com/vuejs/core/blob/main/CHANGELOG.md)`,
+}
+
+// ─── Markdown rendering ───────────────────────────────────────────────────────
+// Minimal block-level markdown parser for changelog content.
+// Handles headings, lists, paragraphs, blockquotes, and inline formatting.
+// In production this would be replaced by server-rendered HTML (like README).
+
+function parseInline(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    .replace(
+      /\[([^\]]+)\]\((https?:[^)]+)\)/g,
+      '<a href="$2" target="_blank" rel="nofollow noreferrer noopener">$1</a>',
+    )
+}
+
+function parseChangelogMarkdown(markdown: string): string {
+  const lines = markdown.split('\n')
+  const out: string[] = []
+  let inList = false
+  let inBlockquote = false
+  let inCodeBlock = false
+  let codeLang = ''
+  let codeLines: string[] = []
+
+  const flushList = () => {
+    if (inList) {
+      out.push('</ul>')
+      inList = false
+    }
+  }
+  const flushBlockquote = () => {
+    if (inBlockquote) {
+      out.push('</blockquote>')
+      inBlockquote = false
+    }
+  }
+
+  for (const line of lines) {
+    // Code block fence
+    if (line.startsWith('```')) {
+      if (inCodeBlock) {
+        out.push(
+          `<pre><code${codeLang ? ` class="language-${codeLang}"` : ''}>${codeLines.map(l => l.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')).join('\n')}</code></pre>`,
+        )
+        inCodeBlock = false
+        codeLines = []
+        codeLang = ''
+      } else {
+        flushList()
+        flushBlockquote()
+        inCodeBlock = true
+        codeLang = line.slice(3).trim()
+      }
+      continue
+    }
+    if (inCodeBlock) {
+      codeLines.push(line)
+      continue
+    }
+
+    const trimmed = line.trim()
+
+    // Blank line
+    if (!trimmed) {
+      flushList()
+      flushBlockquote()
+      continue
+    }
+
+    // Blockquote
+    if (trimmed.startsWith('> ')) {
+      flushList()
+      if (!inBlockquote) {
+        out.push('<blockquote>')
+        inBlockquote = true
+      }
+      out.push(`<p>${parseInline(trimmed.slice(2))}</p>`)
+      continue
+    }
+    flushBlockquote()
+
+    // Headings
+    const h2 = trimmed.match(/^## (.+)/)
+    const h3 = trimmed.match(/^### (.+)/)
+    if (h2) {
+      flushList()
+      out.push(`<h2>${parseInline(h2[1]!)}</h2>`)
+      continue
+    }
+    if (h3) {
+      flushList()
+      out.push(`<h3>${parseInline(h3[1]!)}</h3>`)
+      continue
+    }
+
+    // List item
+    const li = trimmed.match(/^[-*] (.+)/)
+    if (li) {
+      if (!inList) {
+        out.push('<ul>')
+        inList = true
+      }
+      out.push(`<li>${parseInline(li[1]!)}</li>`)
+      continue
+    }
+
+    // Paragraph
+    flushList()
+    out.push(`<p>${parseInline(trimmed)}</p>`)
+  }
+
+  flushList()
+  flushBlockquote()
+  return out.join('\n')
 }
 
 // ─── Derived data ─────────────────────────────────────────────────────────────
@@ -126,7 +287,7 @@ const sortedVersions = computed(() =>
     .map(v => ({
       ...v,
       tags: versionToTagsMap.value.get(v.version),
-      changelog: mockChangelogs[v.version] ?? null,
+      hasChangelog: v.version in mockChangelogs,
     })),
 )
 
@@ -136,17 +297,18 @@ function getVersionTime(version: string): string | undefined {
   return versionHistory.find(v => v.version === version)?.time
 }
 
-// ─── Changelog expand/collapse ────────────────────────────────────────────────
+// ─── Changelog side panel ─────────────────────────────────────────────────────
+
+const selectedChangelogVersion = ref<string | null>(null)
 
-const expandedChangelogs = ref<Set<string>>(new Set())
+const selectedChangelogHtml = computed(() => {
+  if (!selectedChangelogVersion.value) return ''
+  const raw = mockChangelogs[selectedChangelogVersion.value]
+  return raw ? parseChangelogMarkdown(raw) : ''
+})
 
 function toggleChangelog(version: string) {
-  if (expandedChangelogs.value.has(version)) {
-    expandedChangelogs.value.delete(version)
-  } else {
-    expandedChangelogs.value.add(version)
-  }
-  expandedChangelogs.value = new Set(expandedChangelogs.value)
+  selectedChangelogVersion.value = selectedChangelogVersion.value === version ? null : version
 }
 
 // ─── Jump to version ──────────────────────────────────────────────────────────
@@ -158,19 +320,23 @@ function navigateToVersion() {
   const v = jumpVersion.value.trim()
   if (!v) return
   if (!versionHistory.some(entry => entry.version === v)) {
-    jumpError.value = `Version "${v}" not found`
+    jumpError.value = `"${v}" not found`
     return
   }
   jumpError.value = ''
   router.push(packageRoute(packageName.value, v))
 }
+
+watch(jumpVersion, () => {
+  jumpError.value = ''
+})
 </script>
 
 <template>
   <main class="flex-1 flex flex-col">
-    <!-- Header (same pattern as code/docs pages) -->
+    <!-- Header -->
     <header class="border-b border-border bg-bg sticky top-14 z-20">
-      <div class="container py-4">
+      <div class="container py-3 flex items-center justify-between gap-4">
         <div class="flex items-center gap-2 min-w-0">
           <NuxtLink
             :to="packageRoute(packageName)"
@@ -184,95 +350,13 @@ function navigateToVersion() {
           <span class="text-fg-subtle shrink-0">/</span>
           <span class="font-mono text-sm text-fg-muted shrink-0">Version History</span>
         </div>
-      </div>
-    </header>
-
-    <!-- Content -->
-    <div class="container py-8 flex flex-col lg:flex-row gap-8 items-start">
-      <!-- ── Current Tags ─────────────────────────────────────────────────── -->
-      <section class="w-full lg:w-72 shrink-0">
-        <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3 ps-1">Current Tags</h2>
-        <div class="rounded-lg border border-border overflow-hidden">
-          <table class="w-full">
-            <thead>
-              <tr class="border-b border-border bg-bg-subtle">
-                <th
-                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider"
-                >
-                  Tag
-                </th>
-                <th
-                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider"
-                >
-                  Version
-                </th>
-                <th
-                  class="text-start px-4 py-2.5 text-xs text-fg-subtle font-medium uppercase tracking-wider hidden sm:table-cell lg:hidden xl:table-cell"
-                >
-                  Published
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="row in tagRows"
-                :key="row.id"
-                class="border-b border-border last:border-0 hover:bg-bg-subtle transition-colors"
-              >
-                <td class="px-4 py-3">
-                  <div class="flex items-center gap-1.5 flex-wrap">
-                    <span
-                      v-for="tag in row.tags"
-                      :key="tag"
-                      class="text-4xs font-semibold uppercase tracking-wide"
-                      :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
-                    >
-                      {{ tag }}
-                    </span>
-                  </div>
-                </td>
-                <td class="px-4 py-3">
-                  <LinkBase
-                    :to="packageRoute(packageName, row.version)"
-                    class="font-mono text-sm"
-                    dir="ltr"
-                  >
-                    {{ row.version }}
-                  </LinkBase>
-                </td>
-                <td class="px-4 py-3 hidden sm:table-cell lg:hidden xl:table-cell">
-                  <DateTime
-                    v-if="getVersionTime(row.version)"
-                    :datetime="getVersionTime(row.version)!"
-                    class="text-xs text-fg-subtle"
-                    year="numeric"
-                    month="short"
-                    day="numeric"
-                  />
-                  <span v-else class="text-xs text-fg-subtle">—</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <!-- ── Version History ──────────────────────────────────────────────── -->
-      <section class="flex-1 min-w-0">
-        <!-- Header + jump-to-version -->
-        <div class="flex flex-wrap items-center justify-between gap-3 mb-4 ps-1">
-          <h2 class="text-xs text-fg-subtle uppercase tracking-wider">
-            Version History
-            <span class="text-fg-subtle ms-1 normal-case font-normal tracking-normal">
-              ({{ sortedVersions.length }})
-            </span>
-          </h2>
+        <div class="flex flex-col items-end gap-1 shrink-0">
           <div class="flex items-center gap-2">
             <InputBase
               v-model="jumpVersion"
               type="text"
-              placeholder="e.g. 7.26.0"
-              :aria-label="'Jump to version'"
+              placeholder="Jump to version…"
+              aria-label="Jump to version"
               size="small"
               class="w-36 sm:w-44 font-mono"
               @keydown.enter="navigateToVersion"
@@ -287,113 +371,249 @@ function navigateToVersion() {
               Go
             </ButtonBase>
           </div>
+          <p
+            v-if="jumpError"
+            role="alert"
+            class="text-red-500 dark:text-red-400 text-xs leading-none"
+          >
+            {{ jumpError }}
+          </p>
+        </div>
+      </div>
+    </header>
+
+    <!-- Content -->
+    <div class="container py-8 space-y-8">
+      <!-- ── Current Tags ───────────────────────────────────────────────────── -->
+      <section class="space-y-3">
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider ps-1">Current Tags</h2>
+
+        <!-- Latest — featured card -->
+        <div
+          v-if="tagRows[0]"
+          class="rounded-lg border border-accent/40 bg-accent/5 px-5 py-4 relative flex items-center justify-between gap-4 hover:bg-accent/8 transition-colors"
+        >
+          <!-- Left: tags + version -->
+          <div>
+            <div class="flex items-center gap-2 mb-1.5 flex-wrap">
+              <span class="text-3xs font-bold uppercase tracking-widest text-accent">latest</span>
+              <span
+                v-for="tag in tagRows[0].tags.filter(t => t !== 'latest')"
+                :key="tag"
+                class="text-3xs font-semibold uppercase tracking-wide text-fg-subtle"
+                >{{ tag }}</span
+              >
+            </div>
+            <LinkBase
+              :to="packageRoute(packageName, tagRows[0].version)"
+              class="font-mono text-2xl font-semibold tracking-tight after:absolute after:inset-0 after:content-['']"
+              dir="ltr"
+              >{{ tagRows[0].version }}</LinkBase
+            >
+          </div>
+          <!-- Right: date + provenance -->
+          <div class="flex flex-col items-end gap-1.5 shrink-0 relative z-10">
+            <ProvenanceBadge
+              v-if="versionHistory.find(v => v.version === tagRows[0].version)?.hasProvenance"
+              :package-name="packageName"
+              :version="tagRows[0].version"
+              compact
+              :linked="false"
+            />
+            <DateTime
+              v-if="getVersionTime(tagRows[0].version)"
+              :datetime="getVersionTime(tagRows[0].version)!"
+              class="text-xs text-fg-subtle"
+              year="numeric"
+              month="short"
+              day="numeric"
+            />
+          </div>
         </div>
-        <p v-if="jumpError" role="alert" class="text-red-500 dark:text-red-400 text-xs mb-3 ps-1">
-          {{ jumpError }}
-        </p>
 
-        <!-- Version list -->
-        <div class="rounded-lg border border-border overflow-hidden">
+        <!-- Other tags — compact list (hidden when only latest exists) -->
+        <div v-if="tagRows.length > 1" class="rounded-lg border border-border overflow-hidden">
           <div
-            v-for="v in sortedVersions"
-            :key="v.version"
-            class="border-b border-border last:border-0"
+            v-for="row in tagRows.slice(1)"
+            :key="row.id"
+            class="flex items-center gap-4 px-4 py-2.5 border-b border-border last:border-0 hover:bg-bg-subtle transition-colors relative"
           >
-            <!-- Version row -->
-            <div
-              class="flex items-center gap-3 px-4 py-2.5 hover:bg-bg-subtle transition-colors group relative"
+            <!-- Tag labels -->
+            <div class="w-28 shrink-0 flex flex-wrap gap-x-1.5 gap-y-0.5">
+              <span
+                v-for="tag in row.tags"
+                :key="tag"
+                class="text-3xs font-semibold uppercase tracking-wide text-fg-subtle"
+                >{{ tag }}</span
+              >
+            </div>
+
+            <!-- Version -->
+            <LinkBase
+              :to="packageRoute(packageName, row.version)"
+              class="font-mono text-sm flex-1 min-w-0 after:absolute after:inset-0 after:content-['']"
+              dir="ltr"
             >
-              <!-- Version + badges -->
-              <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
-                <LinkBase
-                  :to="packageRoute(packageName, v.version)"
-                  class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
-                  :class="v.deprecated ? 'text-red-700 dark:text-red-400' : ''"
-                  :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
-                  dir="ltr"
-                >
-                  {{ v.version }}
-                </LinkBase>
+              {{ row.version }}
+            </LinkBase>
+
+            <!-- Date -->
+            <DateTime
+              v-if="getVersionTime(row.version)"
+              :datetime="getVersionTime(row.version)!"
+              class="text-xs text-fg-subtle shrink-0 hidden sm:block"
+              year="numeric"
+              month="short"
+              day="numeric"
+            />
 
-                <!-- Dist-tags -->
-                <div v-if="v.tags?.length" class="flex items-center gap-1 flex-wrap relative z-10">
+            <!-- Provenance -->
+            <ProvenanceBadge
+              v-if="versionHistory.find(v => v.version === row.version)?.hasProvenance"
+              :package-name="packageName"
+              :version="row.version"
+              compact
+              :linked="false"
+              class="relative z-10 shrink-0"
+            />
+          </div>
+        </div>
+      </section>
+
+      <!-- ── Version History ───────────────────────────────────────────────── -->
+      <section>
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3 ps-1">
+          Version History
+          <span class="ms-1 normal-case font-normal tracking-normal">
+            ({{ sortedVersions.length }})
+          </span>
+        </h2>
+
+        <!-- List + changelog side panel -->
+        <div class="flex items-start">
+          <!-- Version list -->
+          <div class="flex-1 min-w-0 rounded-lg border border-border overflow-hidden">
+            <div
+              v-for="v in sortedVersions"
+              :key="v.version"
+              class="border-b border-border last:border-0 transition-colors"
+              :class="selectedChangelogVersion === v.version ? 'bg-bg-subtle' : ''"
+            >
+              <div
+                class="flex items-center gap-3 px-4 py-2.5 group relative"
+                :class="selectedChangelogVersion === v.version ? '' : 'hover:bg-bg-subtle'"
+              >
+                <!-- Version + badges -->
+                <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
+                  <LinkBase
+                    :to="packageRoute(packageName, v.version)"
+                    class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
+                    :class="v.deprecated ? 'text-red-700 dark:text-red-400' : ''"
+                    :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
+                    dir="ltr"
+                  >
+                    {{ v.version }}
+                  </LinkBase>
+                  <div
+                    v-if="v.tags?.length"
+                    class="flex items-center gap-1 flex-wrap relative z-10"
+                  >
+                    <span
+                      v-for="tag in v.tags"
+                      :key="tag"
+                      class="text-4xs font-semibold uppercase tracking-wide"
+                      :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                    >
+                      {{ tag }}
+                    </span>
+                  </div>
                   <span
-                    v-for="tag in v.tags"
-                    :key="tag"
-                    class="text-4xs font-semibold uppercase tracking-wide"
-                    :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                    v-if="v.deprecated"
+                    class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                    :title="v.deprecated"
                   >
-                    {{ tag }}
+                    deprecated
                   </span>
                 </div>
 
-                <!-- Deprecated label -->
-                <span
-                  v-if="v.deprecated"
-                  class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
-                  :title="v.deprecated"
-                >
-                  deprecated
-                </span>
-              </div>
-
-              <!-- Right side: date + provenance + changelog toggle -->
-              <div class="flex items-center gap-3 shrink-0 relative z-10">
-                <DateTime
-                  v-if="v.time"
-                  :datetime="v.time"
-                  class="text-xs text-fg-subtle hidden sm:block"
-                  year="numeric"
-                  month="short"
-                  day="numeric"
-                />
-                <ProvenanceBadge
-                  v-if="v.hasProvenance"
-                  :package-name="packageName"
-                  :version="v.version"
-                  compact
-                  :linked="false"
-                />
-                <!-- Changelog toggle button -->
-                <button
-                  v-if="v.changelog"
-                  type="button"
-                  class="flex items-center gap-1 text-xs text-fg-subtle hover:text-fg transition-colors rounded focus-visible:outline-accent/70"
-                  :aria-expanded="expandedChangelogs.has(v.version)"
-                  @click.stop="toggleChangelog(v.version)"
-                >
-                  <span
-                    class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 motion-reduce:transition-none"
-                    :class="{ 'rotate-90': expandedChangelogs.has(v.version) }"
-                    aria-hidden="true"
+                <!-- Right side -->
+                <div class="flex items-center gap-3 shrink-0 relative z-10">
+                  <DateTime
+                    v-if="v.time"
+                    :datetime="v.time"
+                    class="text-xs text-fg-subtle hidden sm:block"
+                    year="numeric"
+                    month="short"
+                    day="numeric"
                   />
-                  <span class="hidden sm:inline">Changelog</span>
-                </button>
+                  <ProvenanceBadge
+                    v-if="v.hasProvenance"
+                    :package-name="packageName"
+                    :version="v.version"
+                    compact
+                    :linked="false"
+                  />
+                  <button
+                    v-if="v.hasChangelog"
+                    type="button"
+                    class="flex items-center gap-1 text-xs transition-colors rounded focus-visible:outline-accent/70"
+                    :class="
+                      selectedChangelogVersion === v.version
+                        ? 'text-fg'
+                        : 'text-fg-subtle hover:text-fg'
+                    "
+                    :aria-expanded="selectedChangelogVersion === v.version"
+                    :aria-pressed="selectedChangelogVersion === v.version"
+                    @click.stop="toggleChangelog(v.version)"
+                  >
+                    <span
+                      class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 motion-reduce:transition-none"
+                      :class="{ 'rotate-90': selectedChangelogVersion === v.version }"
+                      aria-hidden="true"
+                    />
+                    <span class="hidden sm:inline">Changelog</span>
+                  </button>
+                </div>
               </div>
             </div>
+          </div>
 
-            <!-- Changelog expansion -->
-            <div
-              v-if="v.changelog"
-              class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
-              :class="expandedChangelogs.has(v.version) ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
-            >
-              <div class="overflow-hidden min-h-0">
-                <div class="px-4 pb-4 pt-3 border-t border-border bg-bg-subtle">
-                  <ul class="space-y-1.5 list-none m-0 p-0">
-                    <li
-                      v-for="(entry, i) in v.changelog"
-                      :key="i"
-                      class="flex items-start gap-2 text-sm text-fg-muted"
-                    >
-                      <span
-                        class="i-lucide:minus w-3.5 h-3.5 mt-0.5 text-fg-subtle shrink-0"
-                        aria-hidden="true"
-                      />
-                      {{ entry }}
-                    </li>
-                  </ul>
+          <!-- Changelog side panel -->
+          <div
+            class="overflow-hidden shrink-0 transition-[width] duration-200 ease-out motion-reduce:transition-none"
+            :class="selectedChangelogVersion ? 'w-[28rem] ms-6' : 'w-0'"
+          >
+            <!-- Fixed-width inner keeps content from squishing during animation -->
+            <div class="w-[28rem] sticky top-28">
+              <div class="rounded-lg border border-border overflow-hidden">
+                <!-- Panel header -->
+                <div
+                  class="flex items-center justify-between px-4 py-2.5 bg-bg-subtle border-b border-border"
+                >
+                  <div class="flex items-center gap-2 min-w-0">
+                    <span
+                      class="i-lucide:scroll-text w-3.5 h-3.5 text-fg-subtle shrink-0"
+                      aria-hidden="true"
+                    />
+                    <span class="font-mono text-sm font-medium truncate" dir="ltr">
+                      v{{ selectedChangelogVersion }}
+                    </span>
+                  </div>
+                  <button
+                    type="button"
+                    class="text-fg-subtle hover:text-fg transition-colors rounded focus-visible:outline-accent/70 shrink-0 ms-2"
+                    aria-label="Close changelog"
+                    @click="selectedChangelogVersion = null"
+                  >
+                    <span class="i-lucide:x w-3.5 h-3.5" aria-hidden="true" />
+                  </button>
                 </div>
+
+                <!-- Panel body — scrollable for long content -->
+                <div
+                  class="changelog-body overflow-y-auto max-h-[calc(100vh-12rem)] px-4 py-3 text-sm"
+                  v-html="selectedChangelogHtml"
+                />
               </div>
             </div>
           </div>
@@ -402,3 +622,74 @@ function navigateToVersion() {
     </div>
   </main>
 </template>
+
+<style scoped>
+/* Changelog panel prose styles — mirrors readme.vue conventions */
+.changelog-body {
+  color: var(--fg-muted);
+  line-height: 1.6;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.changelog-body :deep(h2) {
+  @apply font-mono font-medium text-fg text-base mt-4 mb-2 pb-1.5 border-b border-border;
+}
+.changelog-body :deep(h2:first-child) {
+  @apply mt-0;
+}
+.changelog-body :deep(h3) {
+  @apply font-mono font-medium text-fg text-sm mt-3 mb-1.5;
+}
+.changelog-body :deep(h3:first-child) {
+  @apply mt-0;
+}
+
+.changelog-body :deep(p) {
+  @apply mb-2 last:mb-0;
+}
+
+.changelog-body :deep(ul) {
+  @apply mb-2 ps-4 space-y-1 last:mb-0;
+  list-style-type: disc;
+}
+.changelog-body :deep(li::marker) {
+  color: var(--border-hover);
+}
+
+.changelog-body :deep(blockquote) {
+  @apply border-s-2 border-border ps-3 my-2 text-fg-subtle italic;
+}
+
+.changelog-body :deep(code) {
+  @apply font-mono text-xs;
+  font-size: 0.8em;
+  background: var(--bg-muted);
+  padding: 0.15em 0.35em;
+  border-radius: 3px;
+  border: 1px solid var(--border);
+}
+
+.changelog-body :deep(pre) {
+  @apply rounded-md border border-border overflow-x-auto p-3 my-2;
+  background: var(--bg-subtle);
+}
+.changelog-body :deep(pre code) {
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-size: 0.8rem;
+  color: var(--fg);
+}
+
+.changelog-body :deep(a) {
+  @apply underline underline-offset-2 decoration-1 decoration-fg/30 transition-colors duration-150;
+}
+.changelog-body :deep(a:hover) {
+  @apply decoration-accent text-accent;
+}
+
+.changelog-body :deep(strong) {
+  @apply font-semibold text-fg;
+}
+</style>

From 16833e0266758f7ef14e91037dfe2bb7e0311dfa Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Wed, 11 Mar 2026 14:41:30 +0800
Subject: [PATCH 05/27] refactor: tweaks layout

---
 app/pages/package/[[org]]/[name]/versions.vue | 39 +++++++++++++++----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index e3b526e35d..fa03e22a6b 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -383,15 +383,17 @@ watch(jumpVersion, () => {
     </header>
 
     <!-- Content -->
-    <div class="container py-8 space-y-8">
+    <div class="max-w-6xl mx-auto py-8 space-y-8">
       <!-- ── Current Tags ───────────────────────────────────────────────────── -->
       <section class="space-y-3">
-        <h2 class="text-xs text-fg-subtle uppercase tracking-wider ps-1">Current Tags</h2>
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider px-4 sm:px-6 ps-1">
+          Current Tags
+        </h2>
 
         <!-- Latest — featured card -->
         <div
           v-if="tagRows[0]"
-          class="rounded-lg border border-accent/40 bg-accent/5 px-5 py-4 relative flex items-center justify-between gap-4 hover:bg-accent/8 transition-colors"
+          class="border-y sm:rounded-lg sm:border border-accent/40 bg-accent/5 px-5 py-4 relative flex items-center justify-between gap-4 hover:bg-accent/8 transition-colors"
         >
           <!-- Left: tags + version -->
           <div>
@@ -432,7 +434,10 @@ watch(jumpVersion, () => {
         </div>
 
         <!-- Other tags — compact list (hidden when only latest exists) -->
-        <div v-if="tagRows.length > 1" class="rounded-lg border border-border overflow-hidden">
+        <div
+          v-if="tagRows.length > 1"
+          class="border-y sm:rounded-lg sm:border border-border sm:overflow-hidden"
+        >
           <div
             v-for="row in tagRows.slice(1)"
             :key="row.id"
@@ -482,7 +487,7 @@ watch(jumpVersion, () => {
 
       <!-- ── Version History ───────────────────────────────────────────────── -->
       <section>
-        <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3 ps-1">
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3 px-4 sm:px-6 ps-1">
           Version History
           <span class="ms-1 normal-case font-normal tracking-normal">
             ({{ sortedVersions.length }})
@@ -492,7 +497,9 @@ watch(jumpVersion, () => {
         <!-- List + changelog side panel -->
         <div class="flex items-start">
           <!-- Version list -->
-          <div class="flex-1 min-w-0 rounded-lg border border-border overflow-hidden">
+          <div
+            class="flex-1 min-w-0 border-y sm:border border-border sm:rounded-lg sm:overflow-hidden"
+          >
             <div
               v-for="v in sortedVersions"
               :key="v.version"
@@ -575,12 +582,28 @@ watch(jumpVersion, () => {
                   </button>
                 </div>
               </div>
+
+              <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
+              <div
+                v-if="v.hasChangelog"
+                class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+                :class="
+                  selectedChangelogVersion === v.version ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+                "
+              >
+                <div class="overflow-hidden">
+                  <div
+                    class="changelog-body border-t border-border px-4 py-3 text-sm"
+                    v-html="selectedChangelogVersion === v.version ? selectedChangelogHtml : ''"
+                  />
+                </div>
+              </div>
             </div>
           </div>
 
-          <!-- Changelog side panel -->
+          <!-- Changelog side panel (desktop only) -->
           <div
-            class="overflow-hidden shrink-0 transition-[width] duration-200 ease-out motion-reduce:transition-none"
+            class="hidden sm:block overflow-hidden shrink-0 transition-[width] duration-200 ease-out motion-reduce:transition-none"
             :class="selectedChangelogVersion ? 'w-[28rem] ms-6' : 'w-0'"
           >
             <!-- Fixed-width inner keeps content from squishing during animation -->

From cdc2b3e80ece82dbd86a9ecb70983fdd7ebceee1 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Wed, 11 Mar 2026 15:34:19 +0800
Subject: [PATCH 06/27] feat: use sticky card

---
 app/pages/package/[[org]]/[name]/versions.vue | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index fa03e22a6b..539f860e51 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -383,7 +383,7 @@ watch(jumpVersion, () => {
     </header>
 
     <!-- Content -->
-    <div class="max-w-6xl mx-auto py-8 space-y-8">
+    <div class="container w-full py-8 space-y-8">
       <!-- ── Current Tags ───────────────────────────────────────────────────── -->
       <section class="space-y-3">
         <h2 class="text-xs text-fg-subtle uppercase tracking-wider px-4 sm:px-6 ps-1">
@@ -495,7 +495,7 @@ watch(jumpVersion, () => {
         </h2>
 
         <!-- List + changelog side panel -->
-        <div class="flex items-start">
+        <div class="flex">
           <!-- Version list -->
           <div
             class="flex-1 min-w-0 border-y sm:border border-border sm:rounded-lg sm:overflow-hidden"
@@ -544,7 +544,8 @@ watch(jumpVersion, () => {
                 </div>
 
                 <!-- Right side -->
-                <div class="flex items-center gap-3 shrink-0 relative z-10">
+                <div class="flex items-center gap-2 shrink-0 relative z-10">
+                  <!-- Metadata: date + provenance -->
                   <DateTime
                     v-if="v.time"
                     :datetime="v.time"
@@ -560,24 +561,29 @@ watch(jumpVersion, () => {
                     compact
                     :linked="false"
                   />
+
+                  <!-- Divider -->
+                  <span
+                    v-if="v.hasChangelog"
+                    class="w-px h-3.5 bg-border shrink-0 hidden sm:block"
+                    aria-hidden="true"
+                  />
+
+                  <!-- Changelog toggle button -->
                   <button
                     v-if="v.hasChangelog"
                     type="button"
-                    class="flex items-center gap-1 text-xs transition-colors rounded focus-visible:outline-accent/70"
+                    class="flex items-center gap-1.5 text-xs px-2 py-1 rounded border transition-colors focus-visible:outline-accent/70"
                     :class="
                       selectedChangelogVersion === v.version
-                        ? 'text-fg'
-                        : 'text-fg-subtle hover:text-fg'
+                        ? 'border-accent/50 bg-accent/8 text-accent'
+                        : 'border-border text-fg-subtle hover:text-fg hover:border-border-hover'
                     "
                     :aria-expanded="selectedChangelogVersion === v.version"
-                    :aria-pressed="selectedChangelogVersion === v.version"
+                    :aria-label="`Toggle changelog for v${v.version}`"
                     @click.stop="toggleChangelog(v.version)"
                   >
-                    <span
-                      class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 motion-reduce:transition-none"
-                      :class="{ 'rotate-90': selectedChangelogVersion === v.version }"
-                      aria-hidden="true"
-                    />
+                    <span class="i-lucide:scroll-text w-3.5 h-3.5 shrink-0" aria-hidden="true" />
                     <span class="hidden sm:inline">Changelog</span>
                   </button>
                 </div>
@@ -603,11 +609,11 @@ watch(jumpVersion, () => {
 
           <!-- Changelog side panel (desktop only) -->
           <div
-            class="hidden sm:block overflow-hidden shrink-0 transition-[width] duration-200 ease-out motion-reduce:transition-none"
+            class="hidden sm:block overflow-clip shrink-0 transition-[width] duration-200 ease-out motion-reduce:transition-none"
             :class="selectedChangelogVersion ? 'w-[28rem] ms-6' : 'w-0'"
           >
             <!-- Fixed-width inner keeps content from squishing during animation -->
-            <div class="w-[28rem] sticky top-28">
+            <div class="w-[28rem] sticky top-34">
               <div class="rounded-lg border border-border overflow-hidden">
                 <!-- Panel header -->
                 <div

From 2a4a4e8fdb3a4221bfe7b9b8ee88d1f4c3d60224 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Thu, 12 Mar 2026 16:11:13 +0800
Subject: [PATCH 07/27] chore: clean up mock changelog

---
 app/pages/package/[[org]]/[name]/versions.vue | 339 +++---------------
 1 file changed, 40 insertions(+), 299 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index 539f860e51..d61f641eb5 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -74,207 +74,9 @@ const versionHistory: PackageVersionInfo[] = [
   { version: '1.0.28', time: '2016-12-15T10:00:00Z', hasProvenance: false },
 ]
 
-// Changelog markdown strings keyed by version.
-// In production these would be pre-rendered HTML from the server
-// (e.g. GitHub release body or CHANGELOG.md, parsed like README).
+// TODO: Replace with pre-rendered HTML from the server
 const mockChangelogs: Record<string, string> = {
-  '3.5.0-beta.3': `### Bug Fixes
-
-- Fixed \`v-model\` not triggering update when used with custom modifier on the same component
-- Resolved hydration mismatch for \`<Suspense>\` with async setup components
-
-### Performance
-
-- Reduced scheduler flush cost for large component trees with many watchers`,
-
-  '3.5.0-rc.1': `## Vue 3.5 RC
-
-The API is now stable. This release candidate is intended for final testing before the stable release.
-
-### New Features
-
-- \`useTemplateRef()\` — reactive ref bound to a template element by string key
-- \`useId()\` — SSR-safe unique ID generation for accessibility attributes
-- Deferred \`<Suspense>\` — suspense boundary no longer blocks parent tree rendering
-
-### Breaking Changes
-
-> **Note:** These only affect experimental APIs that were previously behind flags.
-
-- Removed \`v-memo\` on component root nodes — use it on inner elements instead
-- \`defineModel()\` local mutation now requires explicit \`local\` option
-
-**Full Changelog**: [v3.4.21...v3.5.0-rc.1](https://github.com/vuejs/core/compare/v3.4.21...v3.5.0-rc.1)`,
-
-  '3.4.21': `### Bug Fixes
-
-- Fixed \`<KeepAlive>\` failing to restore scroll position on re-activation (#10156)
-- Corrected \`shallowReadonly\` not preserving array identity on nested access
-- Fixed compiler warning for \`v-bind\` shorthand used on \`<slot>\` elements
-
-**Full Changelog**: [v3.4.20...v3.4.21](https://github.com/vuejs/core/compare/v3.4.20...v3.4.21)`,
-
-  '3.4.0': `## Vue 3.4 — "Slam Dunk"
-
-### New Features
-
-- **Reactivity transform removed** — the experimental \`$ref\` sugar has been dropped; use \`ref()\` directly
-- **\`v-bind\` shorthand** — \`:foo\` can now be written as just \`:foo\` when binding a same-name prop
-- **\`defineModel()\` stable** — two-way binding macro is now stable and no longer requires opt-in
-- **Parser rewrite** — the template compiler's parser is 2× faster and produces better error messages
-
-### Breaking Changes
-
-- \`app.config.compilerOptions.isCustomElement\` now receives the full element tag with namespace prefix
-- \`@vue/reactivity\` no longer exports \`deferredComputed\` — use \`computed\` with a scheduler instead
-
-\`\`\`ts
-// Before
-const double = deferredComputed(() => count.value * 2)
-
-// After
-const double = computed(() => count.value * 2, { scheduler: queueMicrotask })
-\`\`\`
-
-**Full Changelog**: [v3.3.13...v3.4.0](https://github.com/vuejs/core/compare/v3.3.13...v3.4.0)`,
-
-  '3.0.0': `## Vue 3.0 — "One Piece"
-
-The first stable release of Vue 3. Rebuilt from the ground up with the Composition API, TypeScript, and a new reactivity system.
-
-### Highlights
-
-- **Composition API** — \`setup()\`, \`ref()\`, \`reactive()\`, \`computed()\`, \`watch()\`
-- **Fragments** — components can now have multiple root nodes
-- **Teleport** — render content in a different part of the DOM
-- **Suspense** — coordinate async dependency resolution in component trees
-- **Improved TypeScript support** — full type inference for component props and emits
-- **Tree-shakeable** — global APIs are now ES module exports
-
-### Migration
-
-Vue 3 is not backwards compatible with Vue 2. See the [Migration Guide](https://v3-migration.vuejs.org/) for a full list of breaking changes.
-
-**Full Changelog**: [github.com/vuejs/core](https://github.com/vuejs/core/blob/main/CHANGELOG.md)`,
-}
-
-// ─── Markdown rendering ───────────────────────────────────────────────────────
-// Minimal block-level markdown parser for changelog content.
-// Handles headings, lists, paragraphs, blockquotes, and inline formatting.
-// In production this would be replaced by server-rendered HTML (like README).
-
-function parseInline(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/`([^`]+)`/g, '<code>$1</code>')
-    .replace(
-      /\[([^\]]+)\]\((https?:[^)]+)\)/g,
-      '<a href="$2" target="_blank" rel="nofollow noreferrer noopener">$1</a>',
-    )
-}
-
-function parseChangelogMarkdown(markdown: string): string {
-  const lines = markdown.split('\n')
-  const out: string[] = []
-  let inList = false
-  let inBlockquote = false
-  let inCodeBlock = false
-  let codeLang = ''
-  let codeLines: string[] = []
-
-  const flushList = () => {
-    if (inList) {
-      out.push('</ul>')
-      inList = false
-    }
-  }
-  const flushBlockquote = () => {
-    if (inBlockquote) {
-      out.push('</blockquote>')
-      inBlockquote = false
-    }
-  }
-
-  for (const line of lines) {
-    // Code block fence
-    if (line.startsWith('```')) {
-      if (inCodeBlock) {
-        out.push(
-          `<pre><code${codeLang ? ` class="language-${codeLang}"` : ''}>${codeLines.map(l => l.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')).join('\n')}</code></pre>`,
-        )
-        inCodeBlock = false
-        codeLines = []
-        codeLang = ''
-      } else {
-        flushList()
-        flushBlockquote()
-        inCodeBlock = true
-        codeLang = line.slice(3).trim()
-      }
-      continue
-    }
-    if (inCodeBlock) {
-      codeLines.push(line)
-      continue
-    }
-
-    const trimmed = line.trim()
-
-    // Blank line
-    if (!trimmed) {
-      flushList()
-      flushBlockquote()
-      continue
-    }
-
-    // Blockquote
-    if (trimmed.startsWith('> ')) {
-      flushList()
-      if (!inBlockquote) {
-        out.push('<blockquote>')
-        inBlockquote = true
-      }
-      out.push(`<p>${parseInline(trimmed.slice(2))}</p>`)
-      continue
-    }
-    flushBlockquote()
-
-    // Headings
-    const h2 = trimmed.match(/^## (.+)/)
-    const h3 = trimmed.match(/^### (.+)/)
-    if (h2) {
-      flushList()
-      out.push(`<h2>${parseInline(h2[1]!)}</h2>`)
-      continue
-    }
-    if (h3) {
-      flushList()
-      out.push(`<h3>${parseInline(h3[1]!)}</h3>`)
-      continue
-    }
-
-    // List item
-    const li = trimmed.match(/^[-*] (.+)/)
-    if (li) {
-      if (!inList) {
-        out.push('<ul>')
-        inList = true
-      }
-      out.push(`<li>${parseInline(li[1]!)}</li>`)
-      continue
-    }
-
-    // Paragraph
-    flushList()
-    out.push(`<p>${parseInline(trimmed)}</p>`)
-  }
-
-  flushList()
-  flushBlockquote()
-  return out.join('\n')
+  '3.5.0-beta.3': 'Hello world',
 }
 
 // ─── Derived data ─────────────────────────────────────────────────────────────
@@ -301,15 +103,14 @@ function getVersionTime(version: string): string | undefined {
 
 const selectedChangelogVersion = ref<string | null>(null)
 
-const selectedChangelogHtml = computed(() => {
+const selectedChangelogContent = computed(() => {
   if (!selectedChangelogVersion.value) return ''
-  const raw = mockChangelogs[selectedChangelogVersion.value]
-  return raw ? parseChangelogMarkdown(raw) : ''
+  return mockChangelogs[selectedChangelogVersion.value] ?? ''
 })
 
-function toggleChangelog(version: string) {
-  selectedChangelogVersion.value = selectedChangelogVersion.value === version ? null : version
-}
+// function toggleChangelog(version: string) {
+//   selectedChangelogVersion.value = selectedChangelogVersion.value === version ? null : version
+// }
 
 // ─── Jump to version ──────────────────────────────────────────────────────────
 
@@ -416,7 +217,7 @@ watch(jumpVersion, () => {
           <!-- Right: date + provenance -->
           <div class="flex flex-col items-end gap-1.5 shrink-0 relative z-10">
             <ProvenanceBadge
-              v-if="versionHistory.find(v => v.version === tagRows[0].version)?.hasProvenance"
+              v-if="versionHistory.find(v => v.version === tagRows?.[0]?.version)?.hasProvenance"
               :package-name="packageName"
               :version="tagRows[0].version"
               compact
@@ -545,6 +346,32 @@ watch(jumpVersion, () => {
 
                 <!-- Right side -->
                 <div class="flex items-center gap-2 shrink-0 relative z-10">
+                  <!-- Changelog toggle button -->
+                  <!-- TODO(atriiy): changelog would be implemented later -->
+                  <!-- <button
+                    v-if="v.hasChangelog"
+                    type="button"
+                    class="flex items-center gap-1.5 text-xs px-2 py-1 rounded border transition-colors focus-visible:outline-accent/70"
+                    :class="
+                      selectedChangelogVersion === v.version
+                        ? 'border-accent/50 bg-accent/8 text-accent'
+                        : 'border-border text-fg-subtle hover:text-fg hover:border-border-hover'
+                    "
+                    :aria-expanded="selectedChangelogVersion === v.version"
+                    :aria-label="`Toggle changelog for v${v.version}`"
+                    @click.stop="toggleChangelog(v.version)"
+                  >
+                    <span class="i-lucide:scroll-text w-3.5 h-3.5 shrink-0" aria-hidden="true" />
+                    <span class="hidden sm:inline">Changelog</span>
+                  </button> -->
+
+                  <!-- Divider -->
+                  <span
+                    v-if="v.hasChangelog"
+                    class="w-px h-3.5 bg-border shrink-0 hidden sm:block"
+                    aria-hidden="true"
+                  />
+
                   <!-- Metadata: date + provenance -->
                   <DateTime
                     v-if="v.time"
@@ -561,31 +388,6 @@ watch(jumpVersion, () => {
                     compact
                     :linked="false"
                   />
-
-                  <!-- Divider -->
-                  <span
-                    v-if="v.hasChangelog"
-                    class="w-px h-3.5 bg-border shrink-0 hidden sm:block"
-                    aria-hidden="true"
-                  />
-
-                  <!-- Changelog toggle button -->
-                  <button
-                    v-if="v.hasChangelog"
-                    type="button"
-                    class="flex items-center gap-1.5 text-xs px-2 py-1 rounded border transition-colors focus-visible:outline-accent/70"
-                    :class="
-                      selectedChangelogVersion === v.version
-                        ? 'border-accent/50 bg-accent/8 text-accent'
-                        : 'border-border text-fg-subtle hover:text-fg hover:border-border-hover'
-                    "
-                    :aria-expanded="selectedChangelogVersion === v.version"
-                    :aria-label="`Toggle changelog for v${v.version}`"
-                    @click.stop="toggleChangelog(v.version)"
-                  >
-                    <span class="i-lucide:scroll-text w-3.5 h-3.5 shrink-0" aria-hidden="true" />
-                    <span class="hidden sm:inline">Changelog</span>
-                  </button>
                 </div>
               </div>
 
@@ -598,10 +400,9 @@ watch(jumpVersion, () => {
                 "
               >
                 <div class="overflow-hidden">
-                  <div
-                    class="changelog-body border-t border-border px-4 py-3 text-sm"
-                    v-html="selectedChangelogVersion === v.version ? selectedChangelogHtml : ''"
-                  />
+                  <div class="changelog-body border-t border-border px-4 py-3 text-sm">
+                    {{ selectedChangelogVersion === v.version ? selectedChangelogContent : '' }}
+                  </div>
                 </div>
               </div>
             </div>
@@ -641,8 +442,9 @@ watch(jumpVersion, () => {
                 <!-- Panel body — scrollable for long content -->
                 <div
                   class="changelog-body overflow-y-auto max-h-[calc(100vh-12rem)] px-4 py-3 text-sm"
-                  v-html="selectedChangelogHtml"
-                />
+                >
+                  {{ selectedChangelogContent }}
+                </div>
               </div>
             </div>
           </div>
@@ -660,65 +462,4 @@ watch(jumpVersion, () => {
   overflow-wrap: break-word;
   word-break: break-word;
 }
-
-.changelog-body :deep(h2) {
-  @apply font-mono font-medium text-fg text-base mt-4 mb-2 pb-1.5 border-b border-border;
-}
-.changelog-body :deep(h2:first-child) {
-  @apply mt-0;
-}
-.changelog-body :deep(h3) {
-  @apply font-mono font-medium text-fg text-sm mt-3 mb-1.5;
-}
-.changelog-body :deep(h3:first-child) {
-  @apply mt-0;
-}
-
-.changelog-body :deep(p) {
-  @apply mb-2 last:mb-0;
-}
-
-.changelog-body :deep(ul) {
-  @apply mb-2 ps-4 space-y-1 last:mb-0;
-  list-style-type: disc;
-}
-.changelog-body :deep(li::marker) {
-  color: var(--border-hover);
-}
-
-.changelog-body :deep(blockquote) {
-  @apply border-s-2 border-border ps-3 my-2 text-fg-subtle italic;
-}
-
-.changelog-body :deep(code) {
-  @apply font-mono text-xs;
-  font-size: 0.8em;
-  background: var(--bg-muted);
-  padding: 0.15em 0.35em;
-  border-radius: 3px;
-  border: 1px solid var(--border);
-}
-
-.changelog-body :deep(pre) {
-  @apply rounded-md border border-border overflow-x-auto p-3 my-2;
-  background: var(--bg-subtle);
-}
-.changelog-body :deep(pre code) {
-  background: transparent;
-  border: none;
-  padding: 0;
-  font-size: 0.8rem;
-  color: var(--fg);
-}
-
-.changelog-body :deep(a) {
-  @apply underline underline-offset-2 decoration-1 decoration-fg/30 transition-colors duration-150;
-}
-.changelog-body :deep(a:hover) {
-  @apply decoration-accent text-accent;
-}
-
-.changelog-body :deep(strong) {
-  @apply font-semibold text-fg;
-}
 </style>

From 793ee16a190ac63c27e41bd9a16fd72f717a232e Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Thu, 12 Mar 2026 18:09:59 +0800
Subject: [PATCH 08/27] feat: fetch versions data

---
 .../npm/usePackageVersionHistory.ts           | 26 ++++++
 app/pages/package/[[org]]/[name]/versions.vue | 84 ++++---------------
 2 files changed, 43 insertions(+), 67 deletions(-)
 create mode 100644 app/composables/npm/usePackageVersionHistory.ts

diff --git a/app/composables/npm/usePackageVersionHistory.ts b/app/composables/npm/usePackageVersionHistory.ts
new file mode 100644
index 0000000000..edf0457610
--- /dev/null
+++ b/app/composables/npm/usePackageVersionHistory.ts
@@ -0,0 +1,26 @@
+import type { PackageVersionInfo } from '#shared/types'
+import { getVersions } from 'fast-npm-meta'
+import { compare } from 'semver'
+
+export function usePackageVersionHistory(name: MaybeRefOrGetter<string>) {
+  return useLazyAsyncData(
+    () => `package-versions:${toValue(name)}`,
+    async () => {
+      const data = await getVersions(toValue(name), { metadata: true })
+
+      const versions: PackageVersionInfo[] = Object.entries(data.versionsMeta)
+        .map(([version, meta]) => ({
+          version,
+          time: meta.time,
+          hasProvenance: meta.provenance === 'trustedPublisher' || meta.provenance === true,
+          deprecated: meta.deprecated,
+        }))
+        .sort((a, b) => compare(b.version, a.version))
+
+      return {
+        distTags: data.distTags as Record<string, string>,
+        versions,
+      }
+    },
+  )
+}
diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index d61f641eb5..b0bcfdc151 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { PackageVersionInfo } from '#shared/types'
-import { compare } from 'semver'
 import { buildVersionToTagsMap, buildTaggedVersionRows } from '~/utils/versions'
 
 definePageMeta({
@@ -22,81 +20,33 @@ const orgName = computed(() => {
   return match ? match[1] : null
 })
 
-// ─── Mock data ────────────────────────────────────────────────────────────────
-// TODO: Replace distTags with pkg['dist-tags'] from usePackage()
-// TODO: Replace versionHistory with data from useAllPackageVersions()
-// TODO: Replace mockChangelogs with pre-rendered HTML from the server
-//       (GitHub releases body or CHANGELOG.md, parsed server-side like README)
+// ─── Data ─────────────────────────────────────────────────────────────────────
 
-const distTags: Record<string, string> = {
-  latest: '3.4.21',
-  next: '3.5.0-beta.3',
-  beta: '3.5.0-beta.3',
-  rc: '3.5.0-rc.1',
-  alpha: '3.5.0-alpha.5',
-  csp: '3.4.21',
-  legacy: '2.7.16',
-}
+const { data: versionHistoryData } = usePackageVersionHistory(packageName)
 
-const versionHistory: PackageVersionInfo[] = [
-  { version: '3.5.0-beta.3', time: '2024-12-18T10:00:00Z', hasProvenance: true },
-  { version: '3.5.0-rc.1', time: '2024-12-10T10:00:00Z', hasProvenance: true },
-  { version: '3.5.0-alpha.5', time: '2024-11-28T10:00:00Z', hasProvenance: true },
-  { version: '3.5.0-alpha.4', time: '2024-11-10T10:00:00Z', hasProvenance: false },
-  { version: '3.5.0-alpha.3', time: '2024-10-22T10:00:00Z', hasProvenance: false },
-  { version: '3.4.21', time: '2024-12-05T10:00:00Z', hasProvenance: true },
-  { version: '3.4.20', time: '2024-11-20T10:00:00Z', hasProvenance: true },
-  { version: '3.4.19', time: '2024-11-08T10:00:00Z', hasProvenance: true },
-  { version: '3.4.18', time: '2024-10-25T10:00:00Z', hasProvenance: true },
-  { version: '3.4.17', time: '2024-10-01T10:00:00Z', hasProvenance: true },
-  { version: '3.4.0', time: '2024-02-15T10:00:00Z', hasProvenance: false },
-  { version: '3.3.13', time: '2024-01-10T10:00:00Z', hasProvenance: false },
-  { version: '3.3.0', time: '2023-05-11T10:00:00Z', hasProvenance: false },
-  { version: '3.2.47', time: '2023-03-30T10:00:00Z', hasProvenance: false },
-  { version: '3.0.0', time: '2022-09-29T10:00:00Z', hasProvenance: false },
-  { version: '2.7.16', time: '2023-12-08T10:00:00Z', hasProvenance: false },
-  { version: '2.7.15', time: '2023-09-12T10:00:00Z', hasProvenance: false },
-  { version: '2.7.14', time: '2023-06-01T10:00:00Z', hasProvenance: false },
-  { version: '2.7.0', time: '2022-07-01T10:00:00Z', hasProvenance: false },
-  { version: '2.6.14', time: '2022-03-14T10:00:00Z', hasProvenance: false },
-  {
-    version: '2.5.22',
-    time: '2018-03-20T10:00:00Z',
-    hasProvenance: false,
-    deprecated: 'Use vue@2.6.x or later',
-  },
-  {
-    version: '2.5.0',
-    time: '2017-10-13T10:00:00Z',
-    hasProvenance: false,
-    deprecated: 'Use vue@2.6.x or later',
-  },
-  { version: '1.0.28', time: '2016-12-15T10:00:00Z', hasProvenance: false },
-]
-
-// TODO: Replace with pre-rendered HTML from the server
-const mockChangelogs: Record<string, string> = {
-  '3.5.0-beta.3': 'Hello world',
-}
+// TODO: Replace mockChangelogs with pre-rendered HTML from the server
+//       (GitHub releases body or CHANGELOG.md, parsed server-side like README)
+const mockChangelogs: Record<string, string> = {}
 
 // ─── Derived data ─────────────────────────────────────────────────────────────
 
-const versionToTagsMap = computed(() => buildVersionToTagsMap(distTags))
+const distTags = computed(() => versionHistoryData.value?.distTags ?? {})
+const versionHistory = computed(() => versionHistoryData.value?.versions ?? [])
+
+const versionToTagsMap = computed(() => buildVersionToTagsMap(distTags.value))
 
 const sortedVersions = computed(() =>
-  [...versionHistory]
-    .sort((a, b) => compare(b.version, a.version))
-    .map(v => ({
-      ...v,
-      tags: versionToTagsMap.value.get(v.version),
-      hasChangelog: v.version in mockChangelogs,
-    })),
+  versionHistory.value.map(v => ({
+    ...v,
+    tags: versionToTagsMap.value.get(v.version),
+    hasChangelog: v.version in mockChangelogs,
+  })),
 )
 
-const tagRows = computed(() => buildTaggedVersionRows(distTags))
+const tagRows = computed(() => buildTaggedVersionRows(distTags.value))
 
 function getVersionTime(version: string): string | undefined {
-  return versionHistory.find(v => v.version === version)?.time
+  return versionHistory.value.find(v => v.version === version)?.time
 }
 
 // ─── Changelog side panel ─────────────────────────────────────────────────────
@@ -120,7 +70,7 @@ const jumpError = ref('')
 function navigateToVersion() {
   const v = jumpVersion.value.trim()
   if (!v) return
-  if (!versionHistory.some(entry => entry.version === v)) {
+  if (!versionHistory.value.some(entry => entry.version === v)) {
     jumpError.value = `"${v}" not found`
     return
   }

From 71a566c74a94955e716167daeb1851482b7184e6 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Thu, 12 Mar 2026 18:43:38 +0800
Subject: [PATCH 09/27] feat: grouped versions

---
 app/pages/package/[[org]]/[name]/versions.vue | 249 +++++++++++-------
 1 file changed, 161 insertions(+), 88 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index b0bcfdc151..6696407b77 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { buildVersionToTagsMap, buildTaggedVersionRows } from '~/utils/versions'
+import {
+  buildVersionToTagsMap,
+  buildTaggedVersionRows,
+  getVersionGroupKey,
+  getVersionGroupLabel,
+} from '~/utils/versions'
 
 definePageMeta({
   name: 'package-versions',
@@ -49,6 +54,41 @@ function getVersionTime(version: string): string | undefined {
   return versionHistory.value.find(v => v.version === version)?.time
 }
 
+// ─── Version groups ───────────────────────────────────────────────────────────
+
+const expandedGroups = ref(new Set<string>())
+
+const versionGroups = computed(() => {
+  const byKey = new Map<string, typeof sortedVersions.value>()
+  for (const v of sortedVersions.value) {
+    const key = getVersionGroupKey(v.version)
+    if (!byKey.has(key)) byKey.set(key, [])
+    byKey.get(key)!.push(v)
+  }
+
+  return Array.from(byKey.keys())
+    .sort((a, b) => {
+      const [aMajor, aMinor] = a.split('.').map(Number)
+      const [bMajor, bMinor] = b.split('.').map(Number)
+      if (aMajor !== bMajor) return (bMajor ?? 0) - (aMajor ?? 0)
+      return (bMinor ?? -1) - (aMinor ?? -1)
+    })
+    .map(groupKey => ({
+      groupKey,
+      label: getVersionGroupLabel(groupKey),
+      versions: byKey.get(groupKey)!,
+    }))
+})
+
+function toggleGroup(groupKey: string) {
+  if (expandedGroups.value.has(groupKey)) {
+    expandedGroups.value.delete(groupKey)
+  } else {
+    expandedGroups.value.add(groupKey)
+  }
+  expandedGroups.value = new Set(expandedGroups.value)
+}
+
 // ─── Changelog side panel ─────────────────────────────────────────────────────
 
 const selectedChangelogVersion = ref<string | null>(null)
@@ -247,111 +287,144 @@ watch(jumpVersion, () => {
 
         <!-- List + changelog side panel -->
         <div class="flex">
-          <!-- Version list -->
+          <!-- Version list (grouped by major) -->
           <div
             class="flex-1 min-w-0 border-y sm:border border-border sm:rounded-lg sm:overflow-hidden"
           >
             <div
-              v-for="v in sortedVersions"
-              :key="v.version"
-              class="border-b border-border last:border-0 transition-colors"
-              :class="selectedChangelogVersion === v.version ? 'bg-bg-subtle' : ''"
+              v-for="group in versionGroups"
+              :key="group.groupKey"
+              class="border-b border-border last:border-0"
             >
-              <div
-                class="flex items-center gap-3 px-4 py-2.5 group relative"
-                :class="selectedChangelogVersion === v.version ? '' : 'hover:bg-bg-subtle'"
+              <!-- Group header -->
+              <button
+                type="button"
+                class="flex items-center gap-3 px-4 py-2.5 w-full text-start hover:bg-bg-subtle transition-colors"
+                :aria-expanded="expandedGroups.has(group.groupKey)"
+                :aria-label="`${expandedGroups.has(group.groupKey) ? 'Collapse' : 'Expand'} ${group.label}`"
+                @click="toggleGroup(group.groupKey)"
               >
-                <!-- Version + badges -->
-                <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
-                  <LinkBase
-                    :to="packageRoute(packageName, v.version)"
-                    class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
-                    :class="v.deprecated ? 'text-red-700 dark:text-red-400' : ''"
-                    :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
-                    dir="ltr"
-                  >
-                    {{ v.version }}
-                  </LinkBase>
-                  <div
-                    v-if="v.tags?.length"
-                    class="flex items-center gap-1 flex-wrap relative z-10"
-                  >
-                    <span
-                      v-for="tag in v.tags"
-                      :key="tag"
-                      class="text-4xs font-semibold uppercase tracking-wide"
-                      :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
-                    >
-                      {{ tag }}
-                    </span>
-                  </div>
-                  <span
-                    v-if="v.deprecated"
-                    class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
-                    :title="v.deprecated"
-                  >
-                    deprecated
-                  </span>
-                </div>
-
-                <!-- Right side -->
-                <div class="flex items-center gap-2 shrink-0 relative z-10">
-                  <!-- Changelog toggle button -->
-                  <!-- TODO(atriiy): changelog would be implemented later -->
-                  <!-- <button
-                    v-if="v.hasChangelog"
-                    type="button"
-                    class="flex items-center gap-1.5 text-xs px-2 py-1 rounded border transition-colors focus-visible:outline-accent/70"
-                    :class="
-                      selectedChangelogVersion === v.version
-                        ? 'border-accent/50 bg-accent/8 text-accent'
-                        : 'border-border text-fg-subtle hover:text-fg hover:border-border-hover'
-                    "
-                    :aria-expanded="selectedChangelogVersion === v.version"
-                    :aria-label="`Toggle changelog for v${v.version}`"
-                    @click.stop="toggleChangelog(v.version)"
-                  >
-                    <span class="i-lucide:scroll-text w-3.5 h-3.5 shrink-0" aria-hidden="true" />
-                    <span class="hidden sm:inline">Changelog</span>
-                  </button> -->
-
-                  <!-- Divider -->
+                <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
                   <span
-                    v-if="v.hasChangelog"
-                    class="w-px h-3.5 bg-border shrink-0 hidden sm:block"
+                    class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
+                    :class="expandedGroups.has(group.groupKey) ? 'rotate-90' : ''"
                     aria-hidden="true"
                   />
-
-                  <!-- Metadata: date + provenance -->
+                </span>
+                <span class="font-mono text-sm font-medium">{{ group.label }}</span>
+                <span class="text-xs text-fg-subtle">({{ group.versions.length }})</span>
+                <span class="ms-auto flex items-center gap-3 shrink-0">
+                  <span class="font-mono text-xs text-fg-muted" dir="ltr">{{
+                    group.versions[0]?.version
+                  }}</span>
                   <DateTime
-                    v-if="v.time"
-                    :datetime="v.time"
+                    v-if="group.versions[0]?.time"
+                    :datetime="group.versions[0].time"
                     class="text-xs text-fg-subtle hidden sm:block"
                     year="numeric"
                     month="short"
                     day="numeric"
                   />
-                  <ProvenanceBadge
-                    v-if="v.hasProvenance"
-                    :package-name="packageName"
-                    :version="v.version"
-                    compact
-                    :linked="false"
-                  />
-                </div>
-              </div>
+                </span>
+              </button>
 
-              <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
+              <!-- Expanded versions -->
               <div
-                v-if="v.hasChangelog"
-                class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
-                :class="
-                  selectedChangelogVersion === v.version ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
-                "
+                class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+                :class="expandedGroups.has(group.groupKey) ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
               >
-                <div class="overflow-hidden">
-                  <div class="changelog-body border-t border-border px-4 py-3 text-sm">
-                    {{ selectedChangelogVersion === v.version ? selectedChangelogContent : '' }}
+                <div class="overflow-hidden border-t border-border">
+                  <div
+                    v-for="v in group.versions"
+                    :key="v.version"
+                    class="border-b border-border last:border-0 transition-colors"
+                    :class="selectedChangelogVersion === v.version ? 'bg-bg-subtle' : ''"
+                  >
+                    <div
+                      class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
+                      :class="selectedChangelogVersion === v.version ? '' : 'hover:bg-bg-subtle'"
+                    >
+                      <!-- Version + badges -->
+                      <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
+                        <LinkBase
+                          :to="packageRoute(packageName, v.version)"
+                          class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
+                          :class="v.deprecated ? 'text-red-700 dark:text-red-400' : ''"
+                          :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
+                          dir="ltr"
+                        >
+                          {{ v.version }}
+                        </LinkBase>
+                        <div
+                          v-if="v.tags?.length"
+                          class="flex items-center gap-1 flex-wrap relative z-10"
+                        >
+                          <span
+                            v-for="tag in v.tags"
+                            :key="tag"
+                            class="text-4xs font-semibold uppercase tracking-wide"
+                            :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                          >
+                            {{ tag }}
+                          </span>
+                        </div>
+                        <span
+                          v-if="v.deprecated"
+                          class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                          :title="v.deprecated"
+                        >
+                          deprecated
+                        </span>
+                      </div>
+
+                      <!-- Right side -->
+                      <div class="flex items-center gap-2 shrink-0 relative z-10">
+                        <!-- TODO(atriiy): changelog would be implemented later -->
+
+                        <!-- Divider -->
+                        <span
+                          v-if="v.hasChangelog"
+                          class="w-px h-3.5 bg-border shrink-0 hidden sm:block"
+                          aria-hidden="true"
+                        />
+
+                        <!-- Metadata: date + provenance -->
+                        <DateTime
+                          v-if="v.time"
+                          :datetime="v.time"
+                          class="text-xs text-fg-subtle hidden sm:block"
+                          year="numeric"
+                          month="short"
+                          day="numeric"
+                        />
+                        <ProvenanceBadge
+                          v-if="v.hasProvenance"
+                          :package-name="packageName"
+                          :version="v.version"
+                          compact
+                          :linked="false"
+                        />
+                      </div>
+                    </div>
+
+                    <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
+                    <div
+                      v-if="v.hasChangelog"
+                      class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+                      :class="
+                        selectedChangelogVersion === v.version
+                          ? 'grid-rows-[1fr]'
+                          : 'grid-rows-[0fr]'
+                      "
+                    >
+                      <div class="overflow-hidden">
+                        <div class="changelog-body border-t border-border px-4 py-3 text-sm">
+                          {{
+                            selectedChangelogVersion === v.version ? selectedChangelogContent : ''
+                          }}
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>

From 5343facddeabbb97752f88d224eb16731b07119e Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Fri, 13 Mar 2026 10:59:41 +0800
Subject: [PATCH 10/27] feat: use map to avoid O(n) searching

---
 app/pages/package/[[org]]/[name]/versions.vue | 170 +++++++++---------
 1 file changed, 81 insertions(+), 89 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index 6696407b77..e0e43706f2 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -50,8 +50,10 @@ const sortedVersions = computed(() =>
 
 const tagRows = computed(() => buildTaggedVersionRows(distTags.value))
 
+const versionByKey = computed(() => new Map(versionHistory.value.map(v => [v.version, v])))
+
 function getVersionTime(version: string): string | undefined {
-  return versionHistory.value.find(v => v.version === version)?.time
+  return versionByKey.value.get(version)?.time
 }
 
 // ─── Version groups ───────────────────────────────────────────────────────────
@@ -86,7 +88,6 @@ function toggleGroup(groupKey: string) {
   } else {
     expandedGroups.value.add(groupKey)
   }
-  expandedGroups.value = new Set(expandedGroups.value)
 }
 
 // ─── Changelog side panel ─────────────────────────────────────────────────────
@@ -207,7 +208,7 @@ watch(jumpVersion, () => {
           <!-- Right: date + provenance -->
           <div class="flex flex-col items-end gap-1.5 shrink-0 relative z-10">
             <ProvenanceBadge
-              v-if="versionHistory.find(v => v.version === tagRows?.[0]?.version)?.hasProvenance"
+              v-if="versionByKey.get(tagRows[0].version)?.hasProvenance"
               :package-name="packageName"
               :version="tagRows[0].version"
               compact
@@ -265,7 +266,7 @@ watch(jumpVersion, () => {
 
             <!-- Provenance -->
             <ProvenanceBadge
-              v-if="versionHistory.find(v => v.version === row.version)?.hasProvenance"
+              v-if="versionByKey.get(row.version)?.hasProvenance"
               :package-name="packageName"
               :version="row.version"
               compact
@@ -329,100 +330,91 @@ watch(jumpVersion, () => {
               </button>
 
               <!-- Expanded versions -->
-              <div
-                class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
-                :class="expandedGroups.has(group.groupKey) ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
-              >
-                <div class="overflow-hidden border-t border-border">
+              <div v-show="expandedGroups.has(group.groupKey)" class="border-t border-border">
+                <div
+                  v-for="v in group.versions"
+                  :key="v.version"
+                  class="border-b border-border last:border-0 transition-colors"
+                  :class="selectedChangelogVersion === v.version ? 'bg-bg-subtle' : ''"
+                >
                   <div
-                    v-for="v in group.versions"
-                    :key="v.version"
-                    class="border-b border-border last:border-0 transition-colors"
-                    :class="selectedChangelogVersion === v.version ? 'bg-bg-subtle' : ''"
+                    class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
+                    :class="selectedChangelogVersion === v.version ? '' : 'hover:bg-bg-subtle'"
                   >
-                    <div
-                      class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
-                      :class="selectedChangelogVersion === v.version ? '' : 'hover:bg-bg-subtle'"
-                    >
-                      <!-- Version + badges -->
-                      <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
-                        <LinkBase
-                          :to="packageRoute(packageName, v.version)"
-                          class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
-                          :class="v.deprecated ? 'text-red-700 dark:text-red-400' : ''"
-                          :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
-                          dir="ltr"
-                        >
-                          {{ v.version }}
-                        </LinkBase>
-                        <div
-                          v-if="v.tags?.length"
-                          class="flex items-center gap-1 flex-wrap relative z-10"
-                        >
-                          <span
-                            v-for="tag in v.tags"
-                            :key="tag"
-                            class="text-4xs font-semibold uppercase tracking-wide"
-                            :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
-                          >
-                            {{ tag }}
-                          </span>
-                        </div>
+                    <!-- Version + badges -->
+                    <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
+                      <LinkBase
+                        :to="packageRoute(packageName, v.version)"
+                        class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
+                        :class="v.deprecated ? 'text-red-700 dark:text-red-400' : ''"
+                        :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
+                        dir="ltr"
+                      >
+                        {{ v.version }}
+                      </LinkBase>
+                      <div
+                        v-if="v.tags?.length"
+                        class="flex items-center gap-1 flex-wrap relative z-10"
+                      >
                         <span
-                          v-if="v.deprecated"
-                          class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
-                          :title="v.deprecated"
+                          v-for="tag in v.tags"
+                          :key="tag"
+                          class="text-4xs font-semibold uppercase tracking-wide"
+                          :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
                         >
-                          deprecated
+                          {{ tag }}
                         </span>
                       </div>
+                      <span
+                        v-if="v.deprecated"
+                        class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                        :title="v.deprecated"
+                      >
+                        deprecated
+                      </span>
+                    </div>
 
-                      <!-- Right side -->
-                      <div class="flex items-center gap-2 shrink-0 relative z-10">
-                        <!-- TODO(atriiy): changelog would be implemented later -->
-
-                        <!-- Divider -->
-                        <span
-                          v-if="v.hasChangelog"
-                          class="w-px h-3.5 bg-border shrink-0 hidden sm:block"
-                          aria-hidden="true"
-                        />
-
-                        <!-- Metadata: date + provenance -->
-                        <DateTime
-                          v-if="v.time"
-                          :datetime="v.time"
-                          class="text-xs text-fg-subtle hidden sm:block"
-                          year="numeric"
-                          month="short"
-                          day="numeric"
-                        />
-                        <ProvenanceBadge
-                          v-if="v.hasProvenance"
-                          :package-name="packageName"
-                          :version="v.version"
-                          compact
-                          :linked="false"
-                        />
-                      </div>
+                    <!-- Right side -->
+                    <div class="flex items-center gap-2 shrink-0 relative z-10">
+                      <!-- TODO(atriiy): changelog would be implemented later -->
+
+                      <!-- Divider -->
+                      <span
+                        v-if="v.hasChangelog"
+                        class="w-px h-3.5 bg-border shrink-0 hidden sm:block"
+                        aria-hidden="true"
+                      />
+
+                      <!-- Metadata: date + provenance -->
+                      <DateTime
+                        v-if="v.time"
+                        :datetime="v.time"
+                        class="text-xs text-fg-subtle hidden sm:block"
+                        year="numeric"
+                        month="short"
+                        day="numeric"
+                      />
+                      <ProvenanceBadge
+                        v-if="v.hasProvenance"
+                        :package-name="packageName"
+                        :version="v.version"
+                        compact
+                        :linked="false"
+                      />
                     </div>
+                  </div>
 
-                    <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
-                    <div
-                      v-if="v.hasChangelog"
-                      class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
-                      :class="
-                        selectedChangelogVersion === v.version
-                          ? 'grid-rows-[1fr]'
-                          : 'grid-rows-[0fr]'
-                      "
-                    >
-                      <div class="overflow-hidden">
-                        <div class="changelog-body border-t border-border px-4 py-3 text-sm">
-                          {{
-                            selectedChangelogVersion === v.version ? selectedChangelogContent : ''
-                          }}
-                        </div>
+                  <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
+                  <div
+                    v-if="v.hasChangelog"
+                    class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+                    :class="
+                      selectedChangelogVersion === v.version ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+                    "
+                  >
+                    <div class="overflow-hidden">
+                      <div class="changelog-body border-t border-border px-4 py-3 text-sm">
+                        {{ selectedChangelogVersion === v.version ? selectedChangelogContent : '' }}
                       </div>
                     </div>
                   </div>

From 5d305d17c586237efc0add825fd92a1cc9c62926 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Fri, 13 Mar 2026 12:06:22 +0800
Subject: [PATCH 11/27] perf: init loading for basic data, and lazy full
 loading when expanding

---
 app/pages/package/[[org]]/[name]/versions.vue | 256 ++++++++++--------
 1 file changed, 148 insertions(+), 108 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index e0e43706f2..654884562b 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { getVersions } from 'fast-npm-meta'
 import {
   buildVersionToTagsMap,
   buildTaggedVersionRows,
   getVersionGroupKey,
   getVersionGroupLabel,
 } from '~/utils/versions'
+import { fetchAllPackageVersions } from '~/utils/npm/api'
 
 definePageMeta({
   name: 'package-versions',
@@ -25,45 +27,65 @@ const orgName = computed(() => {
   return match ? match[1] : null
 })
 
-// ─── Data ─────────────────────────────────────────────────────────────────────
+// ─── Phase 1: lightweight fetch (page load) ───────────────────────────────────
+// Fetches only version strings, dist-tags, and publish times — no deprecated/provenance metadata.
+// Enough to render the "Current Tags" section and all group headers immediately.
+
+const { data: versionSummary } = useLazyAsyncData(
+  () => `package-version-summary:${packageName.value}`,
+  async () => {
+    const data = await getVersions(packageName.value)
+    return {
+      distTags: data.distTags as Record<string, string>,
+      versions: data.versions,
+      time: data.time as Record<string, string>,
+    }
+  },
+)
 
-const { data: versionHistoryData } = usePackageVersionHistory(packageName)
+const distTags = computed(() => versionSummary.value?.distTags ?? {})
+const versionStrings = computed(() => versionSummary.value?.versions ?? [])
+const versionTimes = computed(() => versionSummary.value?.time ?? {})
 
-// TODO: Replace mockChangelogs with pre-rendered HTML from the server
-//       (GitHub releases body or CHANGELOG.md, parsed server-side like README)
-const mockChangelogs: Record<string, string> = {}
+// ─── Phase 2: full metadata (loaded on first group expand) ────────────────────
+// Fetches deprecated status, provenance, and exact times needed for version rows.
 
-// ─── Derived data ─────────────────────────────────────────────────────────────
+const fullVersionMap = ref<Map<
+  string,
+  { time?: string; deprecated?: string; hasProvenance: boolean }
+> | null>(null)
+const hasLoadedFull = ref(false)
 
-const distTags = computed(() => versionHistoryData.value?.distTags ?? {})
-const versionHistory = computed(() => versionHistoryData.value?.versions ?? [])
+async function ensureFullDataLoaded() {
+  if (hasLoadedFull.value) return
+  const versions = await fetchAllPackageVersions(packageName.value)
+  fullVersionMap.value = new Map(versions.map(v => [v.version, v]))
+  hasLoadedFull.value = true
+}
 
-const versionToTagsMap = computed(() => buildVersionToTagsMap(distTags.value))
+// ─── Derived data ─────────────────────────────────────────────────────────────
 
-const sortedVersions = computed(() =>
-  versionHistory.value.map(v => ({
-    ...v,
-    tags: versionToTagsMap.value.get(v.version),
-    hasChangelog: v.version in mockChangelogs,
-  })),
-)
+// TODO: Replace mockChangelogs with pre-rendered HTML from the server
+//       (GitHub releases body or CHANGELOG.md, parsed server-side like README)
+const mockChangelogs: Record<string, string> = {}
 
+const versionToTagsMap = computed(() => buildVersionToTagsMap(distTags.value))
 const tagRows = computed(() => buildTaggedVersionRows(distTags.value))
 
-const versionByKey = computed(() => new Map(versionHistory.value.map(v => [v.version, v])))
-
 function getVersionTime(version: string): string | undefined {
-  return versionByKey.value.get(version)?.time
+  return versionTimes.value[version]
 }
 
 // ─── Version groups ───────────────────────────────────────────────────────────
 
 const expandedGroups = ref(new Set<string>())
+const renderedGroups = ref(new Set<string>())
+const loadingGroup = ref<string | null>(null)
 
 const versionGroups = computed(() => {
-  const byKey = new Map<string, typeof sortedVersions.value>()
-  for (const v of sortedVersions.value) {
-    const key = getVersionGroupKey(v.version)
+  const byKey = new Map<string, string[]>()
+  for (const v of versionStrings.value) {
+    const key = getVersionGroupKey(v)
     if (!byKey.has(key)) byKey.set(key, [])
     byKey.get(key)!.push(v)
   }
@@ -82,12 +104,21 @@ const versionGroups = computed(() => {
     }))
 })
 
-function toggleGroup(groupKey: string) {
+async function toggleGroup(groupKey: string) {
   if (expandedGroups.value.has(groupKey)) {
     expandedGroups.value.delete(groupKey)
-  } else {
-    expandedGroups.value.add(groupKey)
+    return
   }
+  if (!hasLoadedFull.value) {
+    loadingGroup.value = groupKey
+    try {
+      await ensureFullDataLoaded()
+    } finally {
+      loadingGroup.value = null
+    }
+  }
+  renderedGroups.value.add(groupKey)
+  expandedGroups.value.add(groupKey)
 }
 
 // ─── Changelog side panel ─────────────────────────────────────────────────────
@@ -111,7 +142,7 @@ const jumpError = ref('')
 function navigateToVersion() {
   const v = jumpVersion.value.trim()
   if (!v) return
-  if (!versionHistory.value.some(entry => entry.version === v)) {
+  if (!versionStrings.value.includes(v)) {
     jumpError.value = `"${v}" not found`
     return
   }
@@ -208,7 +239,7 @@ watch(jumpVersion, () => {
           <!-- Right: date + provenance -->
           <div class="flex flex-col items-end gap-1.5 shrink-0 relative z-10">
             <ProvenanceBadge
-              v-if="versionByKey.get(tagRows[0].version)?.hasProvenance"
+              v-if="fullVersionMap?.get(tagRows[0].version)?.hasProvenance"
               :package-name="packageName"
               :version="tagRows[0].version"
               compact
@@ -266,7 +297,7 @@ watch(jumpVersion, () => {
 
             <!-- Provenance -->
             <ProvenanceBadge
-              v-if="versionByKey.get(row.version)?.hasProvenance"
+              v-if="fullVersionMap?.get(row.version)?.hasProvenance"
               :package-name="packageName"
               :version="row.version"
               compact
@@ -282,7 +313,7 @@ watch(jumpVersion, () => {
         <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3 px-4 sm:px-6 ps-1">
           Version History
           <span class="ms-1 normal-case font-normal tracking-normal">
-            ({{ sortedVersions.length }})
+            ({{ versionStrings.length }})
           </span>
         </h2>
 
@@ -307,6 +338,12 @@ watch(jumpVersion, () => {
               >
                 <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
                   <span
+                    v-if="loadingGroup === group.groupKey"
+                    class="i-svg-spinners:ring-resize w-3 h-3"
+                    aria-hidden="true"
+                  />
+                  <span
+                    v-else
                     class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
                     :class="expandedGroups.has(group.groupKey) ? 'rotate-90' : ''"
                     aria-hidden="true"
@@ -316,11 +353,11 @@ watch(jumpVersion, () => {
                 <span class="text-xs text-fg-subtle">({{ group.versions.length }})</span>
                 <span class="ms-auto flex items-center gap-3 shrink-0">
                   <span class="font-mono text-xs text-fg-muted" dir="ltr">{{
-                    group.versions[0]?.version
+                    group.versions[0]
                   }}</span>
                   <DateTime
-                    v-if="group.versions[0]?.time"
-                    :datetime="group.versions[0].time"
+                    v-if="getVersionTime(group.versions[0])"
+                    :datetime="getVersionTime(group.versions[0])!"
                     class="text-xs text-fg-subtle hidden sm:block"
                     year="numeric"
                     month="short"
@@ -331,94 +368,97 @@ watch(jumpVersion, () => {
 
               <!-- Expanded versions -->
               <div v-show="expandedGroups.has(group.groupKey)" class="border-t border-border">
-                <div
-                  v-for="v in group.versions"
-                  :key="v.version"
-                  class="border-b border-border last:border-0 transition-colors"
-                  :class="selectedChangelogVersion === v.version ? 'bg-bg-subtle' : ''"
-                >
+                <template v-if="renderedGroups.has(group.groupKey)">
                   <div
-                    class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
-                    :class="selectedChangelogVersion === v.version ? '' : 'hover:bg-bg-subtle'"
+                    v-for="v in group.versions"
+                    :key="v"
+                    class="border-b border-border last:border-0 transition-colors"
+                    :class="selectedChangelogVersion === v ? 'bg-bg-subtle' : ''"
                   >
-                    <!-- Version + badges -->
-                    <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
-                      <LinkBase
-                        :to="packageRoute(packageName, v.version)"
-                        class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
-                        :class="v.deprecated ? 'text-red-700 dark:text-red-400' : ''"
-                        :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
-                        dir="ltr"
-                      >
-                        {{ v.version }}
-                      </LinkBase>
-                      <div
-                        v-if="v.tags?.length"
-                        class="flex items-center gap-1 flex-wrap relative z-10"
-                      >
+                    <div
+                      class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
+                      :class="selectedChangelogVersion === v ? '' : 'hover:bg-bg-subtle'"
+                    >
+                      <!-- Version + badges -->
+                      <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
+                        <LinkBase
+                          :to="packageRoute(packageName, v)"
+                          class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
+                          :class="
+                            fullVersionMap?.get(v)?.deprecated
+                              ? 'text-red-700 dark:text-red-400'
+                              : ''
+                          "
+                          :classicon="
+                            fullVersionMap?.get(v)?.deprecated
+                              ? 'i-lucide:octagon-alert'
+                              : undefined
+                          "
+                          dir="ltr"
+                        >
+                          {{ v }}
+                        </LinkBase>
+                        <div
+                          v-if="versionToTagsMap.get(v)?.length"
+                          class="flex items-center gap-1 flex-wrap relative z-10"
+                        >
+                          <span
+                            v-for="tag in versionToTagsMap.get(v)"
+                            :key="tag"
+                            class="text-4xs font-semibold uppercase tracking-wide"
+                            :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                          >
+                            {{ tag }}
+                          </span>
+                        </div>
                         <span
-                          v-for="tag in v.tags"
-                          :key="tag"
-                          class="text-4xs font-semibold uppercase tracking-wide"
-                          :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                          v-if="fullVersionMap?.get(v)?.deprecated"
+                          class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                          :title="fullVersionMap.get(v)!.deprecated"
                         >
-                          {{ tag }}
+                          deprecated
                         </span>
                       </div>
-                      <span
-                        v-if="v.deprecated"
-                        class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
-                        :title="v.deprecated"
-                      >
-                        deprecated
-                      </span>
-                    </div>
 
-                    <!-- Right side -->
-                    <div class="flex items-center gap-2 shrink-0 relative z-10">
-                      <!-- TODO(atriiy): changelog would be implemented later -->
-
-                      <!-- Divider -->
-                      <span
-                        v-if="v.hasChangelog"
-                        class="w-px h-3.5 bg-border shrink-0 hidden sm:block"
-                        aria-hidden="true"
-                      />
-
-                      <!-- Metadata: date + provenance -->
-                      <DateTime
-                        v-if="v.time"
-                        :datetime="v.time"
-                        class="text-xs text-fg-subtle hidden sm:block"
-                        year="numeric"
-                        month="short"
-                        day="numeric"
-                      />
-                      <ProvenanceBadge
-                        v-if="v.hasProvenance"
-                        :package-name="packageName"
-                        :version="v.version"
-                        compact
-                        :linked="false"
-                      />
+                      <!-- Right side -->
+                      <div class="flex items-center gap-2 shrink-0 relative z-10">
+                        <!-- TODO(atriiy): changelog would be implemented later -->
+
+                        <!-- Metadata: date + provenance -->
+                        <DateTime
+                          v-if="getVersionTime(v)"
+                          :datetime="getVersionTime(v)!"
+                          class="text-xs text-fg-subtle hidden sm:block"
+                          year="numeric"
+                          month="short"
+                          day="numeric"
+                        />
+                        <ProvenanceBadge
+                          v-if="fullVersionMap?.get(v)?.hasProvenance"
+                          :package-name="packageName"
+                          :version="v"
+                          compact
+                          :linked="false"
+                        />
+                      </div>
                     </div>
-                  </div>
 
-                  <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
-                  <div
-                    v-if="v.hasChangelog"
-                    class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
-                    :class="
-                      selectedChangelogVersion === v.version ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
-                    "
-                  >
-                    <div class="overflow-hidden">
-                      <div class="changelog-body border-t border-border px-4 py-3 text-sm">
-                        {{ selectedChangelogVersion === v.version ? selectedChangelogContent : '' }}
+                    <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
+                    <div
+                      v-if="v in mockChangelogs"
+                      class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+                      :class="
+                        selectedChangelogVersion === v ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+                      "
+                    >
+                      <div class="overflow-hidden">
+                        <div class="changelog-body border-t border-border px-4 py-3 text-sm">
+                          {{ selectedChangelogVersion === v ? selectedChangelogContent : '' }}
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
+                </template>
               </div>
             </div>
           </div>

From 016f47bd43945ab9310af4032fea3522bee66dd3 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Fri, 13 Mar 2026 13:09:09 +0800
Subject: [PATCH 12/27] feat: use virtual rendering

---
 app/pages/package/[[org]]/[name]/versions.vue | 295 ++++++++++--------
 1 file changed, 161 insertions(+), 134 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index 654884562b..9c9849149e 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { WindowVirtualizer } from 'virtua/vue'
 import { getVersions } from 'fast-npm-meta'
 import {
   buildVersionToTagsMap,
@@ -54,13 +55,11 @@ const fullVersionMap = ref<Map<
   string,
   { time?: string; deprecated?: string; hasProvenance: boolean }
 > | null>(null)
-const hasLoadedFull = ref(false)
 
 async function ensureFullDataLoaded() {
-  if (hasLoadedFull.value) return
+  if (fullVersionMap.value) return
   const versions = await fetchAllPackageVersions(packageName.value)
   fullVersionMap.value = new Map(versions.map(v => [v.version, v]))
-  hasLoadedFull.value = true
 }
 
 // ─── Derived data ─────────────────────────────────────────────────────────────
@@ -79,7 +78,6 @@ function getVersionTime(version: string): string | undefined {
 // ─── Version groups ───────────────────────────────────────────────────────────
 
 const expandedGroups = ref(new Set<string>())
-const renderedGroups = ref(new Set<string>())
 const loadingGroup = ref<string | null>(null)
 
 const versionGroups = computed(() => {
@@ -105,11 +103,15 @@ const versionGroups = computed(() => {
 })
 
 async function toggleGroup(groupKey: string) {
+  console.log('toggleGroup', groupKey)
   if (expandedGroups.value.has(groupKey)) {
     expandedGroups.value.delete(groupKey)
     return
   }
-  if (!hasLoadedFull.value) {
+  expandedGroups.value.add(groupKey)
+  console.log('toggleGroup expanded', fullVersionMap.value)
+  console.log('toggleGroup expanded', !fullVersionMap.value)
+  if (!fullVersionMap.value) {
     loadingGroup.value = groupKey
     try {
       await ensureFullDataLoaded()
@@ -117,10 +119,32 @@ async function toggleGroup(groupKey: string) {
       loadingGroup.value = null
     }
   }
-  renderedGroups.value.add(groupKey)
-  expandedGroups.value.add(groupKey)
 }
 
+// ─── Flat list for virtual rendering ──────────────────────────────────────────
+
+type FlatItem =
+  | { type: 'header'; groupKey: string; label: string; versions: string[] }
+  | { type: 'version'; version: string; groupKey: string }
+
+const flatItems = computed<FlatItem[]>(() => {
+  const items: FlatItem[] = []
+  for (const group of versionGroups.value) {
+    items.push({
+      type: 'header',
+      groupKey: group.groupKey,
+      label: group.label,
+      versions: group.versions,
+    })
+    if (expandedGroups.value.has(group.groupKey)) {
+      for (const version of group.versions) {
+        items.push({ type: 'version', version, groupKey: group.groupKey })
+      }
+    }
+  }
+  return items
+})
+
 // ─── Changelog side panel ─────────────────────────────────────────────────────
 
 const selectedChangelogVersion = ref<string | null>(null)
@@ -319,148 +343,151 @@ watch(jumpVersion, () => {
 
         <!-- List + changelog side panel -->
         <div class="flex">
-          <!-- Version list (grouped by major) -->
+          <!-- Version list (grouped by major, virtualized) -->
           <div
             class="flex-1 min-w-0 border-y sm:border border-border sm:rounded-lg sm:overflow-hidden"
           >
-            <div
-              v-for="group in versionGroups"
-              :key="group.groupKey"
-              class="border-b border-border last:border-0"
-            >
-              <!-- Group header -->
-              <button
-                type="button"
-                class="flex items-center gap-3 px-4 py-2.5 w-full text-start hover:bg-bg-subtle transition-colors"
-                :aria-expanded="expandedGroups.has(group.groupKey)"
-                :aria-label="`${expandedGroups.has(group.groupKey) ? 'Collapse' : 'Expand'} ${group.label}`"
-                @click="toggleGroup(group.groupKey)"
-              >
-                <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
-                  <span
-                    v-if="loadingGroup === group.groupKey"
-                    class="i-svg-spinners:ring-resize w-3 h-3"
-                    aria-hidden="true"
-                  />
-                  <span
-                    v-else
-                    class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
-                    :class="expandedGroups.has(group.groupKey) ? 'rotate-90' : ''"
-                    aria-hidden="true"
-                  />
-                </span>
-                <span class="font-mono text-sm font-medium">{{ group.label }}</span>
-                <span class="text-xs text-fg-subtle">({{ group.versions.length }})</span>
-                <span class="ms-auto flex items-center gap-3 shrink-0">
-                  <span class="font-mono text-xs text-fg-muted" dir="ltr">{{
-                    group.versions[0]
-                  }}</span>
-                  <DateTime
-                    v-if="getVersionTime(group.versions[0])"
-                    :datetime="getVersionTime(group.versions[0])!"
-                    class="text-xs text-fg-subtle hidden sm:block"
-                    year="numeric"
-                    month="short"
-                    day="numeric"
-                  />
-                </span>
-              </button>
-
-              <!-- Expanded versions -->
-              <div v-show="expandedGroups.has(group.groupKey)" class="border-t border-border">
-                <template v-if="renderedGroups.has(group.groupKey)">
+            <WindowVirtualizer :data="flatItems">
+              <template #default="{ item, index }">
+                <!-- ── Group header ── -->
+                <button
+                  v-if="item.type === 'header'"
+                  type="button"
+                  class="flex items-center gap-3 px-4 py-2.5 w-full text-start hover:bg-bg-subtle transition-colors"
+                  :class="index < flatItems.length - 1 ? 'border-b border-border' : ''"
+                  :aria-expanded="expandedGroups.has(item.groupKey)"
+                  :aria-label="`${expandedGroups.has(item.groupKey) ? 'Collapse' : 'Expand'} ${item.label}`"
+                  @click="toggleGroup(item.groupKey)"
+                >
+                  <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
+                    <span
+                      v-if="loadingGroup === item.groupKey"
+                      class="i-svg-spinners:ring-resize w-3 h-3"
+                      aria-hidden="true"
+                    />
+                    <span
+                      v-else
+                      class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
+                      :class="expandedGroups.has(item.groupKey) ? 'rotate-90' : ''"
+                      aria-hidden="true"
+                    />
+                  </span>
+                  <span class="font-mono text-sm font-medium">{{ item.label }}</span>
+                  <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
+                  <span class="ms-auto flex items-center gap-3 shrink-0">
+                    <span class="font-mono text-xs text-fg-muted" dir="ltr">{{
+                      item.versions[0]
+                    }}</span>
+                    <DateTime
+                      v-if="getVersionTime(item.versions[0])"
+                      :datetime="getVersionTime(item.versions[0])!"
+                      class="text-xs text-fg-subtle hidden sm:block"
+                      year="numeric"
+                      month="short"
+                      day="numeric"
+                    />
+                  </span>
+                </button>
+
+                <!-- ── Version row ── -->
+                <div
+                  v-else
+                  class="transition-colors"
+                  :class="[
+                    index < flatItems.length - 1 ? 'border-b border-border' : '',
+                    selectedChangelogVersion === item.version ? 'bg-bg-subtle' : '',
+                  ]"
+                >
                   <div
-                    v-for="v in group.versions"
-                    :key="v"
-                    class="border-b border-border last:border-0 transition-colors"
-                    :class="selectedChangelogVersion === v ? 'bg-bg-subtle' : ''"
+                    class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
+                    :class="selectedChangelogVersion === item.version ? '' : 'hover:bg-bg-subtle'"
                   >
-                    <div
-                      class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
-                      :class="selectedChangelogVersion === v ? '' : 'hover:bg-bg-subtle'"
-                    >
-                      <!-- Version + badges -->
-                      <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
-                        <LinkBase
-                          :to="packageRoute(packageName, v)"
-                          class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
-                          :class="
-                            fullVersionMap?.get(v)?.deprecated
-                              ? 'text-red-700 dark:text-red-400'
-                              : ''
-                          "
-                          :classicon="
-                            fullVersionMap?.get(v)?.deprecated
-                              ? 'i-lucide:octagon-alert'
-                              : undefined
-                          "
-                          dir="ltr"
-                        >
-                          {{ v }}
-                        </LinkBase>
-                        <div
-                          v-if="versionToTagsMap.get(v)?.length"
-                          class="flex items-center gap-1 flex-wrap relative z-10"
-                        >
-                          <span
-                            v-for="tag in versionToTagsMap.get(v)"
-                            :key="tag"
-                            class="text-4xs font-semibold uppercase tracking-wide"
-                            :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
-                          >
-                            {{ tag }}
-                          </span>
-                        </div>
+                    <!-- Version + badges -->
+                    <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
+                      <LinkBase
+                        :to="packageRoute(packageName, item.version)"
+                        :prefetch="false"
+                        class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
+                        :class="
+                          fullVersionMap?.get(item.version)?.deprecated
+                            ? 'text-red-700 dark:text-red-400'
+                            : ''
+                        "
+                        :classicon="
+                          fullVersionMap?.get(item.version)?.deprecated
+                            ? 'i-lucide:octagon-alert'
+                            : undefined
+                        "
+                        dir="ltr"
+                      >
+                        {{ item.version }}
+                      </LinkBase>
+                      <div
+                        v-if="versionToTagsMap.get(item.version)?.length"
+                        class="flex items-center gap-1 flex-wrap relative z-10"
+                      >
                         <span
-                          v-if="fullVersionMap?.get(v)?.deprecated"
-                          class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
-                          :title="fullVersionMap.get(v)!.deprecated"
+                          v-for="tag in versionToTagsMap.get(item.version)"
+                          :key="tag"
+                          class="text-4xs font-semibold uppercase tracking-wide"
+                          :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
                         >
-                          deprecated
+                          {{ tag }}
                         </span>
                       </div>
+                      <span
+                        v-if="fullVersionMap?.get(item.version)?.deprecated"
+                        class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                        :title="fullVersionMap.get(item.version)!.deprecated"
+                      >
+                        deprecated
+                      </span>
+                    </div>
 
-                      <!-- Right side -->
-                      <div class="flex items-center gap-2 shrink-0 relative z-10">
-                        <!-- TODO(atriiy): changelog would be implemented later -->
-
-                        <!-- Metadata: date + provenance -->
-                        <DateTime
-                          v-if="getVersionTime(v)"
-                          :datetime="getVersionTime(v)!"
-                          class="text-xs text-fg-subtle hidden sm:block"
-                          year="numeric"
-                          month="short"
-                          day="numeric"
-                        />
-                        <ProvenanceBadge
-                          v-if="fullVersionMap?.get(v)?.hasProvenance"
-                          :package-name="packageName"
-                          :version="v"
-                          compact
-                          :linked="false"
-                        />
-                      </div>
+                    <!-- Right side -->
+                    <div class="flex items-center gap-2 shrink-0 relative z-10">
+                      <!-- TODO(atriiy): changelog would be implemented later -->
+
+                      <!-- Metadata: date + provenance -->
+                      <DateTime
+                        v-if="getVersionTime(item.version)"
+                        :datetime="getVersionTime(item.version)!"
+                        class="text-xs text-fg-subtle hidden sm:block"
+                        year="numeric"
+                        month="short"
+                        day="numeric"
+                      />
+                      <ProvenanceBadge
+                        v-if="fullVersionMap?.get(item.version)?.hasProvenance"
+                        :package-name="packageName"
+                        :version="item.version"
+                        compact
+                        :linked="false"
+                      />
                     </div>
+                  </div>
 
-                    <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
-                    <div
-                      v-if="v in mockChangelogs"
-                      class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
-                      :class="
-                        selectedChangelogVersion === v ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
-                      "
-                    >
-                      <div class="overflow-hidden">
-                        <div class="changelog-body border-t border-border px-4 py-3 text-sm">
-                          {{ selectedChangelogVersion === v ? selectedChangelogContent : '' }}
-                        </div>
+                  <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
+                  <div
+                    v-if="item.version in mockChangelogs"
+                    class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+                    :class="
+                      selectedChangelogVersion === item.version
+                        ? 'grid-rows-[1fr]'
+                        : 'grid-rows-[0fr]'
+                    "
+                  >
+                    <div class="overflow-hidden">
+                      <div class="changelog-body border-t border-border px-4 py-3 text-sm">
+                        {{
+                          selectedChangelogVersion === item.version ? selectedChangelogContent : ''
+                        }}
                       </div>
                     </div>
                   </div>
-                </template>
-              </div>
-            </div>
+                </div>
+              </template>
+            </WindowVirtualizer>
           </div>
 
           <!-- Changelog side panel (desktop only) -->

From 036127378efcf926a70faa3b3aab5b1dfbf0773a Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Fri, 13 Mar 2026 13:28:02 +0800
Subject: [PATCH 13/27] perf: use shallowRef for deep data structure

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

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index 9c9849149e..c428158bbe 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -42,6 +42,7 @@ const { data: versionSummary } = useLazyAsyncData(
       time: data.time as Record<string, string>,
     }
   },
+  { deep: false },
 )
 
 const distTags = computed(() => versionSummary.value?.distTags ?? {})
@@ -51,7 +52,7 @@ const versionTimes = computed(() => versionSummary.value?.time ?? {})
 // ─── Phase 2: full metadata (loaded on first group expand) ────────────────────
 // Fetches deprecated status, provenance, and exact times needed for version rows.
 
-const fullVersionMap = ref<Map<
+const fullVersionMap = shallowRef<Map<
   string,
   { time?: string; deprecated?: string; hasProvenance: boolean }
 > | null>(null)

From bdffaf30e2de13739b61189e16af90232974636e Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Fri, 13 Mar 2026 20:07:47 +0800
Subject: [PATCH 14/27] feat: fallback for ssr

---
 app/pages/package/[[org]]/[name]/versions.vue | 288 ++++++++++--------
 1 file changed, 164 insertions(+), 124 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index c428158bbe..ce56f86828 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -13,6 +13,9 @@ definePageMeta({
   name: 'package-versions',
 })
 
+/** Number of flat items (headers + version rows) to render statically during SSR */
+const SSR_COUNT = 20
+
 const route = useRoute()
 const router = useRouter()
 
@@ -334,7 +337,7 @@ watch(jumpVersion, () => {
       </section>
 
       <!-- ── Version History ───────────────────────────────────────────────── -->
-      <section>
+      <section v-if="versionGroups.length > 0">
         <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3 px-4 sm:px-6 ps-1">
           Version History
           <span class="ms-1 normal-case font-normal tracking-normal">
@@ -348,147 +351,184 @@ watch(jumpVersion, () => {
           <div
             class="flex-1 min-w-0 border-y sm:border border-border sm:rounded-lg sm:overflow-hidden"
           >
-            <WindowVirtualizer :data="flatItems">
-              <template #default="{ item, index }">
-                <!-- ── Group header ── -->
-                <button
-                  v-if="item.type === 'header'"
-                  type="button"
-                  class="flex items-center gap-3 px-4 py-2.5 w-full text-start hover:bg-bg-subtle transition-colors"
-                  :class="index < flatItems.length - 1 ? 'border-b border-border' : ''"
-                  :aria-expanded="expandedGroups.has(item.groupKey)"
-                  :aria-label="`${expandedGroups.has(item.groupKey) ? 'Collapse' : 'Expand'} ${item.label}`"
-                  @click="toggleGroup(item.groupKey)"
-                >
-                  <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
-                    <span
-                      v-if="loadingGroup === item.groupKey"
-                      class="i-svg-spinners:ring-resize w-3 h-3"
-                      aria-hidden="true"
-                    />
-                    <span
-                      v-else
-                      class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
-                      :class="expandedGroups.has(item.groupKey) ? 'rotate-90' : ''"
-                      aria-hidden="true"
-                    />
-                  </span>
-                  <span class="font-mono text-sm font-medium">{{ item.label }}</span>
-                  <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
-                  <span class="ms-auto flex items-center gap-3 shrink-0">
-                    <span class="font-mono text-xs text-fg-muted" dir="ltr">{{
-                      item.versions[0]
-                    }}</span>
-                    <DateTime
-                      v-if="getVersionTime(item.versions[0])"
-                      :datetime="getVersionTime(item.versions[0])!"
-                      class="text-xs text-fg-subtle hidden sm:block"
-                      year="numeric"
-                      month="short"
-                      day="numeric"
-                    />
-                  </span>
-                </button>
+            <ClientOnly>
+              <WindowVirtualizer :data="flatItems">
+                <template #default="{ item, index }">
+                  <!-- ── Group header ── -->
+                  <button
+                    v-if="item.type === 'header'"
+                    type="button"
+                    class="flex items-center gap-3 px-4 py-2.5 w-full text-start hover:bg-bg-subtle transition-colors"
+                    :class="index < flatItems.length - 1 ? 'border-b border-border' : ''"
+                    :aria-expanded="expandedGroups.has(item.groupKey)"
+                    :aria-label="`${expandedGroups.has(item.groupKey) ? 'Collapse' : 'Expand'} ${item.label}`"
+                    @click="toggleGroup(item.groupKey)"
+                  >
+                    <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
+                      <span
+                        v-if="loadingGroup === item.groupKey"
+                        class="i-svg-spinners:ring-resize w-3 h-3"
+                        aria-hidden="true"
+                      />
+                      <span
+                        v-else
+                        class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
+                        :class="expandedGroups.has(item.groupKey) ? 'rotate-90' : ''"
+                        aria-hidden="true"
+                      />
+                    </span>
+                    <span class="font-mono text-sm font-medium">{{ item.label }}</span>
+                    <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
+                    <span class="ms-auto flex items-center gap-3 shrink-0">
+                      <span class="font-mono text-xs text-fg-muted" dir="ltr">{{
+                        item.versions[0]
+                      }}</span>
+                      <DateTime
+                        v-if="getVersionTime(item.versions[0])"
+                        :datetime="getVersionTime(item.versions[0])!"
+                        class="text-xs text-fg-subtle hidden sm:block"
+                        year="numeric"
+                        month="short"
+                        day="numeric"
+                      />
+                    </span>
+                  </button>
 
-                <!-- ── Version row ── -->
-                <div
-                  v-else
-                  class="transition-colors"
-                  :class="[
-                    index < flatItems.length - 1 ? 'border-b border-border' : '',
-                    selectedChangelogVersion === item.version ? 'bg-bg-subtle' : '',
-                  ]"
-                >
+                  <!-- ── Version row ── -->
                   <div
-                    class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
-                    :class="selectedChangelogVersion === item.version ? '' : 'hover:bg-bg-subtle'"
+                    v-else
+                    class="transition-colors"
+                    :class="[
+                      index < flatItems.length - 1 ? 'border-b border-border' : '',
+                      selectedChangelogVersion === item.version ? 'bg-bg-subtle' : '',
+                    ]"
                   >
-                    <!-- Version + badges -->
-                    <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
-                      <LinkBase
-                        :to="packageRoute(packageName, item.version)"
-                        :prefetch="false"
-                        class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
-                        :class="
-                          fullVersionMap?.get(item.version)?.deprecated
-                            ? 'text-red-700 dark:text-red-400'
-                            : ''
-                        "
-                        :classicon="
-                          fullVersionMap?.get(item.version)?.deprecated
-                            ? 'i-lucide:octagon-alert'
-                            : undefined
-                        "
-                        dir="ltr"
-                      >
-                        {{ item.version }}
-                      </LinkBase>
-                      <div
-                        v-if="versionToTagsMap.get(item.version)?.length"
-                        class="flex items-center gap-1 flex-wrap relative z-10"
-                      >
+                    <div
+                      class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
+                      :class="selectedChangelogVersion === item.version ? '' : 'hover:bg-bg-subtle'"
+                    >
+                      <!-- Version + badges -->
+                      <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
+                        <LinkBase
+                          :to="packageRoute(packageName, item.version)"
+                          :prefetch="false"
+                          class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
+                          :class="
+                            fullVersionMap?.get(item.version)?.deprecated
+                              ? 'text-red-700 dark:text-red-400'
+                              : ''
+                          "
+                          :classicon="
+                            fullVersionMap?.get(item.version)?.deprecated
+                              ? 'i-lucide:octagon-alert'
+                              : undefined
+                          "
+                          dir="ltr"
+                        >
+                          {{ item.version }}
+                        </LinkBase>
+                        <div
+                          v-if="versionToTagsMap.get(item.version)?.length"
+                          class="flex items-center gap-1 flex-wrap relative z-10"
+                        >
+                          <span
+                            v-for="tag in versionToTagsMap.get(item.version)"
+                            :key="tag"
+                            class="text-4xs font-semibold uppercase tracking-wide"
+                            :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                          >
+                            {{ tag }}
+                          </span>
+                        </div>
                         <span
-                          v-for="tag in versionToTagsMap.get(item.version)"
-                          :key="tag"
-                          class="text-4xs font-semibold uppercase tracking-wide"
-                          :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                          v-if="fullVersionMap?.get(item.version)?.deprecated"
+                          class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                          :title="fullVersionMap.get(item.version)!.deprecated"
                         >
-                          {{ tag }}
+                          deprecated
                         </span>
                       </div>
-                      <span
-                        v-if="fullVersionMap?.get(item.version)?.deprecated"
-                        class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
-                        :title="fullVersionMap.get(item.version)!.deprecated"
-                      >
-                        deprecated
-                      </span>
+
+                      <!-- Right side -->
+                      <div class="flex items-center gap-2 shrink-0 relative z-10">
+                        <!-- TODO(atriiy): changelog would be implemented later -->
+
+                        <!-- Metadata: date + provenance -->
+                        <DateTime
+                          v-if="getVersionTime(item.version)"
+                          :datetime="getVersionTime(item.version)!"
+                          class="text-xs text-fg-subtle hidden sm:block"
+                          year="numeric"
+                          month="short"
+                          day="numeric"
+                        />
+                        <ProvenanceBadge
+                          v-if="fullVersionMap?.get(item.version)?.hasProvenance"
+                          :package-name="packageName"
+                          :version="item.version"
+                          compact
+                          :linked="false"
+                        />
+                      </div>
                     </div>
 
-                    <!-- Right side -->
-                    <div class="flex items-center gap-2 shrink-0 relative z-10">
-                      <!-- TODO(atriiy): changelog would be implemented later -->
+                    <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
+                    <div
+                      v-if="item.version in mockChangelogs"
+                      class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+                      :class="
+                        selectedChangelogVersion === item.version
+                          ? 'grid-rows-[1fr]'
+                          : 'grid-rows-[0fr]'
+                      "
+                    >
+                      <div class="overflow-hidden">
+                        <div class="changelog-body border-t border-border px-4 py-3 text-sm">
+                          {{
+                            selectedChangelogVersion === item.version
+                              ? selectedChangelogContent
+                              : ''
+                          }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </WindowVirtualizer>
 
-                      <!-- Metadata: date + provenance -->
+              <!-- SSR fallback: static list of first group headers -->
+              <template #fallback>
+                <div>
+                  <button
+                    v-for="item in versionGroups.slice(0, SSR_COUNT)"
+                    :key="item.groupKey"
+                    type="button"
+                    class="flex items-center gap-3 px-4 py-2.5 w-full text-start border-b border-border"
+                    :aria-expanded="false"
+                    :aria-label="`Expand ${item.label}`"
+                  >
+                    <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
+                      <span class="i-lucide:chevron-right w-3 h-3 rtl-flip" aria-hidden="true" />
+                    </span>
+                    <span class="font-mono text-sm font-medium">{{ item.label }}</span>
+                    <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
+                    <span class="ms-auto flex items-center gap-3 shrink-0">
+                      <span class="font-mono text-xs text-fg-muted" dir="ltr">{{
+                        item.versions[0]
+                      }}</span>
                       <DateTime
-                        v-if="getVersionTime(item.version)"
-                        :datetime="getVersionTime(item.version)!"
+                        v-if="getVersionTime(item.versions[0] ?? '')"
+                        :datetime="getVersionTime(item.versions[0] ?? '')!"
                         class="text-xs text-fg-subtle hidden sm:block"
                         year="numeric"
                         month="short"
                         day="numeric"
                       />
-                      <ProvenanceBadge
-                        v-if="fullVersionMap?.get(item.version)?.hasProvenance"
-                        :package-name="packageName"
-                        :version="item.version"
-                        compact
-                        :linked="false"
-                      />
-                    </div>
-                  </div>
-
-                  <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
-                  <div
-                    v-if="item.version in mockChangelogs"
-                    class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
-                    :class="
-                      selectedChangelogVersion === item.version
-                        ? 'grid-rows-[1fr]'
-                        : 'grid-rows-[0fr]'
-                    "
-                  >
-                    <div class="overflow-hidden">
-                      <div class="changelog-body border-t border-border px-4 py-3 text-sm">
-                        {{
-                          selectedChangelogVersion === item.version ? selectedChangelogContent : ''
-                        }}
-                      </div>
-                    </div>
-                  </div>
+                    </span>
+                  </button>
                 </div>
               </template>
-            </WindowVirtualizer>
+            </ClientOnly>
           </div>
 
           <!-- Changelog side panel (desktop only) -->

From 879a7d4775394fcd608e7c1c08b9176319138674 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Fri, 13 Mar 2026 20:21:34 +0800
Subject: [PATCH 15/27] feat: support filtering

---
 app/pages/package/[[org]]/[name]/versions.vue | 103 +++++++++---------
 1 file changed, 50 insertions(+), 53 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index ce56f86828..8d8b529c8c 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { WindowVirtualizer } from 'virtua/vue'
 import { getVersions } from 'fast-npm-meta'
+import { validRange } from 'semver'
 import {
   buildVersionToTagsMap,
   buildTaggedVersionRows,
+  filterVersions,
   getVersionGroupKey,
   getVersionGroupLabel,
 } from '~/utils/versions'
@@ -17,7 +19,6 @@ definePageMeta({
 const SSR_COUNT = 20
 
 const route = useRoute()
-const router = useRouter()
 
 const packageName = computed(() => {
   const { org, name } = route.params as { org?: string; name: string }
@@ -125,6 +126,33 @@ async function toggleGroup(groupKey: string) {
   }
 }
 
+// ─── Version filter ───────────────────────────────────────────────────────────
+
+const versionFilter = ref('')
+const isFilterActive = computed(() => versionFilter.value.trim() !== '')
+
+const filteredVersionSet = computed(() => {
+  const trimmed = versionFilter.value.trim()
+  if (!trimmed) return null
+  // Try semver range first (e.g. "^2.0.0", ">=1 <3")
+  if (validRange(trimmed)) {
+    return filterVersions(versionStrings.value, trimmed)
+  }
+  // Fallback: substring match (e.g. "2.4", "beta")
+  const lower = trimmed.toLowerCase()
+  return new Set(versionStrings.value.filter(v => v.toLowerCase().includes(lower)))
+})
+
+const filteredGroups = computed(() => {
+  if (!isFilterActive.value || !filteredVersionSet.value) return versionGroups.value
+  return versionGroups.value
+    .map(group => ({
+      ...group,
+      versions: group.versions.filter(v => filteredVersionSet.value!.has(v)),
+    }))
+    .filter(group => group.versions.length > 0)
+})
+
 // ─── Flat list for virtual rendering ──────────────────────────────────────────
 
 type FlatItem =
@@ -133,14 +161,14 @@ type FlatItem =
 
 const flatItems = computed<FlatItem[]>(() => {
   const items: FlatItem[] = []
-  for (const group of versionGroups.value) {
+  for (const group of filteredGroups.value) {
     items.push({
       type: 'header',
       groupKey: group.groupKey,
       label: group.label,
       versions: group.versions,
     })
-    if (expandedGroups.value.has(group.groupKey)) {
+    if (expandedGroups.value.has(group.groupKey) || isFilterActive.value) {
       for (const version of group.versions) {
         items.push({ type: 'version', version, groupKey: group.groupKey })
       }
@@ -161,26 +189,6 @@ const selectedChangelogContent = computed(() => {
 // function toggleChangelog(version: string) {
 //   selectedChangelogVersion.value = selectedChangelogVersion.value === version ? null : version
 // }
-
-// ─── Jump to version ──────────────────────────────────────────────────────────
-
-const jumpVersion = ref('')
-const jumpError = ref('')
-
-function navigateToVersion() {
-  const v = jumpVersion.value.trim()
-  if (!v) return
-  if (!versionStrings.value.includes(v)) {
-    jumpError.value = `"${v}" not found`
-    return
-  }
-  jumpError.value = ''
-  router.push(packageRoute(packageName.value, v))
-}
-
-watch(jumpVersion, () => {
-  jumpError.value = ''
-})
 </script>
 
 <template>
@@ -201,35 +209,14 @@ watch(jumpVersion, () => {
           <span class="text-fg-subtle shrink-0">/</span>
           <span class="font-mono text-sm text-fg-muted shrink-0">Version History</span>
         </div>
-        <div class="flex flex-col items-end gap-1 shrink-0">
-          <div class="flex items-center gap-2">
-            <InputBase
-              v-model="jumpVersion"
-              type="text"
-              placeholder="Jump to version…"
-              aria-label="Jump to version"
-              size="small"
-              class="w-36 sm:w-44 font-mono"
-              @keydown.enter="navigateToVersion"
-            />
-            <ButtonBase
-              variant="secondary"
-              size="small"
-              classicon="i-lucide:arrow-right"
-              :disabled="!jumpVersion.trim()"
-              @click="navigateToVersion"
-            >
-              Go
-            </ButtonBase>
-          </div>
-          <p
-            v-if="jumpError"
-            role="alert"
-            class="text-red-500 dark:text-red-400 text-xs leading-none"
-          >
-            {{ jumpError }}
-          </p>
-        </div>
+        <InputBase
+          v-model="versionFilter"
+          type="text"
+          placeholder="Filter versions…"
+          aria-label="Filter versions"
+          size="small"
+          class="w-36 sm:w-44 font-mono"
+        />
       </div>
     </header>
 
@@ -345,8 +332,18 @@ watch(jumpVersion, () => {
           </span>
         </h2>
 
+        <!-- No filter matches -->
+        <div
+          v-if="isFilterActive && filteredGroups.length === 0"
+          class="px-1 py-4 text-sm text-fg-subtle"
+          role="status"
+          aria-live="polite"
+        >
+          No versions match <span class="font-mono">{{ versionFilter }}</span>
+        </div>
+
         <!-- List + changelog side panel -->
-        <div class="flex">
+        <div v-else class="flex">
           <!-- Version list (grouped by major, virtualized) -->
           <div
             class="flex-1 min-w-0 border-y sm:border border-border sm:rounded-lg sm:overflow-hidden"

From 758947171d240d5f5fe8cec9f910334c4a1833da Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Fri, 13 Mar 2026 20:38:44 +0800
Subject: [PATCH 16/27] feat: tweaks versions' order

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

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index 8d8b529c8c..c61b07ae56 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { WindowVirtualizer } from 'virtua/vue'
 import { getVersions } from 'fast-npm-meta'
-import { validRange } from 'semver'
+import { compare, validRange } from 'semver'
 import {
   buildVersionToTagsMap,
   buildTaggedVersionRows,
@@ -103,7 +103,7 @@ const versionGroups = computed(() => {
     .map(groupKey => ({
       groupKey,
       label: getVersionGroupLabel(groupKey),
-      versions: byKey.get(groupKey)!,
+      versions: byKey.get(groupKey)!.sort((a, b) => compare(b, a)),
     }))
 })
 

From fede892463c3f342ed1784467fc948abadd07038 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Fri, 13 Mar 2026 20:44:39 +0800
Subject: [PATCH 17/27] chore: clean up

---
 .../npm/usePackageVersionHistory.ts           | 26 -------------------
 1 file changed, 26 deletions(-)
 delete mode 100644 app/composables/npm/usePackageVersionHistory.ts

diff --git a/app/composables/npm/usePackageVersionHistory.ts b/app/composables/npm/usePackageVersionHistory.ts
deleted file mode 100644
index edf0457610..0000000000
--- a/app/composables/npm/usePackageVersionHistory.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { PackageVersionInfo } from '#shared/types'
-import { getVersions } from 'fast-npm-meta'
-import { compare } from 'semver'
-
-export function usePackageVersionHistory(name: MaybeRefOrGetter<string>) {
-  return useLazyAsyncData(
-    () => `package-versions:${toValue(name)}`,
-    async () => {
-      const data = await getVersions(toValue(name), { metadata: true })
-
-      const versions: PackageVersionInfo[] = Object.entries(data.versionsMeta)
-        .map(([version, meta]) => ({
-          version,
-          time: meta.time,
-          hasProvenance: meta.provenance === 'trustedPublisher' || meta.provenance === true,
-          deprecated: meta.deprecated,
-        }))
-        .sort((a, b) => compare(b.version, a.version))
-
-      return {
-        distTags: data.distTags as Record<string, string>,
-        versions,
-      }
-    },
-  )
-}

From 7aa08d5fd78888d1840be3f7a934570905e5d7bf Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Fri, 13 Mar 2026 21:15:00 +0800
Subject: [PATCH 18/27] test: fix test of PackageVersions

---
 test/nuxt/components/PackageVersions.spec.ts | 53 ++++++++++++++++----
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/test/nuxt/components/PackageVersions.spec.ts b/test/nuxt/components/PackageVersions.spec.ts
index 510ac48259..8b66ea90e7 100644
--- a/test/nuxt/components/PackageVersions.spec.ts
+++ b/test/nuxt/components/PackageVersions.spec.ts
@@ -72,10 +72,15 @@ describe('PackageVersions', () => {
         },
       })
 
-      // Find version links (exclude anchor links that start with # and external links)
+      // Find version links (exclude anchor links, external links, and action buttons like "View all versions")
       const versionLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
+        .filter(
+          a =>
+            !a.attributes('href')?.startsWith('#') &&
+            a.attributes('target') !== '_blank' &&
+            a.attributes('title') !== 'View all versions',
+        )
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.text()).toBe('2.0.0')
     })
@@ -92,10 +97,15 @@ describe('PackageVersions', () => {
         },
       })
 
-      // Find version links (exclude anchor links that start with # and external links)
+      // Find version links (exclude anchor links, external links, and action buttons like "View all versions")
       const versionLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
+        .filter(
+          a =>
+            !a.attributes('href')?.startsWith('#') &&
+            a.attributes('target') !== '_blank' &&
+            a.attributes('title') !== 'View all versions',
+        )
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.text()).toBe('1.0.0')
     })
@@ -234,7 +244,12 @@ describe('PackageVersions', () => {
       // Find version links (exclude anchor links that start with # and external links)
       const versionLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
+        .filter(
+          a =>
+            !a.attributes('href')?.startsWith('#') &&
+            a.attributes('target') !== '_blank' &&
+            a.attributes('title') !== 'View all versions',
+        )
       const versions = versionLinks.map(l => l.text())
       // Should be sorted by version descending
       expect(versions[0]).toBe('2.0.0')
@@ -257,7 +272,12 @@ describe('PackageVersions', () => {
       // Find version links (exclude anchor links that start with # and external links)
       const versionLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
+        .filter(
+          a =>
+            !a.attributes('href')?.startsWith('#') &&
+            a.attributes('target') !== '_blank' &&
+            a.attributes('title') !== 'View all versions',
+        )
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.classes()).toContain('text-red-800')
     })
@@ -277,7 +297,12 @@ describe('PackageVersions', () => {
       // Find version links (exclude anchor links that start with # and external links)
       const versionLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
+        .filter(
+          a =>
+            !a.attributes('href')?.startsWith('#') &&
+            a.attributes('target') !== '_blank' &&
+            a.attributes('title') !== 'View all versions',
+        )
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.attributes('title')).toContain('deprecated')
     })
@@ -609,7 +634,12 @@ describe('PackageVersions', () => {
       // Count visible version links (excluding anchor links that start with # and external links)
       const visibleLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
+        .filter(
+          a =>
+            !a.attributes('href')?.startsWith('#') &&
+            a.attributes('target') !== '_blank' &&
+            a.attributes('title') !== 'View all versions',
+        )
       // Should have max 10 visible links in the main section
       expect(visibleLinks.length).toBeLessThanOrEqual(10)
     })
@@ -1015,7 +1045,12 @@ describe('PackageVersions', () => {
       // Find version links (exclude anchor and external links)
       const versionLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
+        .filter(
+          a =>
+            !a.attributes('href')?.startsWith('#') &&
+            a.attributes('target') !== '_blank' &&
+            a.attributes('title') !== 'View all versions',
+        )
       const versions = versionLinks.map(l => l.text())
       expect(versions).not.toContain('3.0.0')
     })

From 4a816e738fd11b49abf4efbf438f479c34574ebd Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Sat, 14 Mar 2026 11:34:49 +0800
Subject: [PATCH 19/27] fix: fix virtual window rendering issue

---
 app/pages/package/[[org]]/[name]/versions.vue | 266 +++++++++---------
 1 file changed, 139 insertions(+), 127 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index c61b07ae56..d0183fed22 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -156,21 +156,27 @@ const filteredGroups = computed(() => {
 // ─── Flat list for virtual rendering ──────────────────────────────────────────
 
 type FlatItem =
-  | { type: 'header'; groupKey: string; label: string; versions: string[] }
-  | { type: 'version'; version: string; groupKey: string }
+  | { type: 'header'; key: string; groupKey: string; label: string; versions: string[] }
+  | { type: 'version'; key: string; version: string; groupKey: string }
 
 const flatItems = computed<FlatItem[]>(() => {
   const items: FlatItem[] = []
   for (const group of filteredGroups.value) {
     items.push({
       type: 'header',
+      key: `header:${group.groupKey}`,
       groupKey: group.groupKey,
       label: group.label,
       versions: group.versions,
     })
     if (expandedGroups.value.has(group.groupKey) || isFilterActive.value) {
       for (const version of group.versions) {
-        items.push({ type: 'version', version, groupKey: group.groupKey })
+        items.push({
+          type: 'version',
+          key: `version:${version}`,
+          version,
+          groupKey: group.groupKey,
+        })
       }
     }
   }
@@ -351,141 +357,147 @@ const selectedChangelogContent = computed(() => {
             <ClientOnly>
               <WindowVirtualizer :data="flatItems">
                 <template #default="{ item, index }">
-                  <!-- ── Group header ── -->
-                  <button
-                    v-if="item.type === 'header'"
-                    type="button"
-                    class="flex items-center gap-3 px-4 py-2.5 w-full text-start hover:bg-bg-subtle transition-colors"
-                    :class="index < flatItems.length - 1 ? 'border-b border-border' : ''"
-                    :aria-expanded="expandedGroups.has(item.groupKey)"
-                    :aria-label="`${expandedGroups.has(item.groupKey) ? 'Collapse' : 'Expand'} ${item.label}`"
-                    @click="toggleGroup(item.groupKey)"
-                  >
-                    <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
-                      <span
-                        v-if="loadingGroup === item.groupKey"
-                        class="i-svg-spinners:ring-resize w-3 h-3"
-                        aria-hidden="true"
-                      />
-                      <span
-                        v-else
-                        class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
-                        :class="expandedGroups.has(item.groupKey) ? 'rotate-90' : ''"
-                        aria-hidden="true"
-                      />
-                    </span>
-                    <span class="font-mono text-sm font-medium">{{ item.label }}</span>
-                    <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
-                    <span class="ms-auto flex items-center gap-3 shrink-0">
-                      <span class="font-mono text-xs text-fg-muted" dir="ltr">{{
-                        item.versions[0]
-                      }}</span>
-                      <DateTime
-                        v-if="getVersionTime(item.versions[0])"
-                        :datetime="getVersionTime(item.versions[0])!"
-                        class="text-xs text-fg-subtle hidden sm:block"
-                        year="numeric"
-                        month="short"
-                        day="numeric"
-                      />
-                    </span>
-                  </button>
-
-                  <!-- ── Version row ── -->
-                  <div
-                    v-else
-                    class="transition-colors"
-                    :class="[
-                      index < flatItems.length - 1 ? 'border-b border-border' : '',
-                      selectedChangelogVersion === item.version ? 'bg-bg-subtle' : '',
-                    ]"
-                  >
-                    <div
-                      class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
-                      :class="selectedChangelogVersion === item.version ? '' : 'hover:bg-bg-subtle'"
+                  <div :key="item.key">
+                    <!-- ── Group header ── -->
+                    <button
+                      v-if="item.type === 'header'"
+                      type="button"
+                      class="flex items-center gap-3 px-4 py-2.5 w-full text-start hover:bg-bg-subtle transition-colors"
+                      :class="index < flatItems.length - 1 ? 'border-b border-border' : ''"
+                      :aria-expanded="expandedGroups.has(item.groupKey)"
+                      :aria-label="`${expandedGroups.has(item.groupKey) ? 'Collapse' : 'Expand'} ${item.label}`"
+                      @click="toggleGroup(item.groupKey)"
                     >
-                      <!-- Version + badges -->
-                      <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
-                        <LinkBase
-                          :to="packageRoute(packageName, item.version)"
-                          :prefetch="false"
-                          class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
-                          :class="
-                            fullVersionMap?.get(item.version)?.deprecated
-                              ? 'text-red-700 dark:text-red-400'
-                              : ''
-                          "
-                          :classicon="
-                            fullVersionMap?.get(item.version)?.deprecated
-                              ? 'i-lucide:octagon-alert'
-                              : undefined
-                          "
-                          dir="ltr"
-                        >
-                          {{ item.version }}
-                        </LinkBase>
-                        <div
-                          v-if="versionToTagsMap.get(item.version)?.length"
-                          class="flex items-center gap-1 flex-wrap relative z-10"
-                        >
-                          <span
-                            v-for="tag in versionToTagsMap.get(item.version)"
-                            :key="tag"
-                            class="text-4xs font-semibold uppercase tracking-wide"
-                            :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
-                          >
-                            {{ tag }}
-                          </span>
-                        </div>
+                      <span
+                        class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0"
+                      >
                         <span
-                          v-if="fullVersionMap?.get(item.version)?.deprecated"
-                          class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
-                          :title="fullVersionMap.get(item.version)!.deprecated"
-                        >
-                          deprecated
-                        </span>
-                      </div>
-
-                      <!-- Right side -->
-                      <div class="flex items-center gap-2 shrink-0 relative z-10">
-                        <!-- TODO(atriiy): changelog would be implemented later -->
-
-                        <!-- Metadata: date + provenance -->
+                          v-if="loadingGroup === item.groupKey"
+                          class="i-svg-spinners:ring-resize w-3 h-3"
+                          aria-hidden="true"
+                        />
+                        <span
+                          v-else
+                          class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
+                          :class="expandedGroups.has(item.groupKey) ? 'rotate-90' : ''"
+                          aria-hidden="true"
+                        />
+                      </span>
+                      <span class="font-mono text-sm font-medium">{{ item.label }}</span>
+                      <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
+                      <span class="ms-auto flex items-center gap-3 shrink-0">
+                        <span class="font-mono text-xs text-fg-muted" dir="ltr">{{
+                          item.versions[0]
+                        }}</span>
                         <DateTime
-                          v-if="getVersionTime(item.version)"
-                          :datetime="getVersionTime(item.version)!"
+                          v-if="getVersionTime(item.versions[0])"
+                          :datetime="getVersionTime(item.versions[0])!"
                           class="text-xs text-fg-subtle hidden sm:block"
                           year="numeric"
                           month="short"
                           day="numeric"
                         />
-                        <ProvenanceBadge
-                          v-if="fullVersionMap?.get(item.version)?.hasProvenance"
-                          :package-name="packageName"
-                          :version="item.version"
-                          compact
-                          :linked="false"
-                        />
-                      </div>
-                    </div>
+                      </span>
+                    </button>
 
-                    <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
+                    <!-- ── Version row ── -->
                     <div
-                      v-if="item.version in mockChangelogs"
-                      class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
-                      :class="
-                        selectedChangelogVersion === item.version
-                          ? 'grid-rows-[1fr]'
-                          : 'grid-rows-[0fr]'
-                      "
+                      v-else
+                      class="transition-colors"
+                      :class="[
+                        index < flatItems.length - 1 ? 'border-b border-border' : '',
+                        selectedChangelogVersion === item.version ? 'bg-bg-subtle' : '',
+                      ]"
                     >
-                      <div class="overflow-hidden">
-                        <div class="changelog-body border-t border-border px-4 py-3 text-sm">
-                          {{
-                            selectedChangelogVersion === item.version
-                              ? selectedChangelogContent
-                              : ''
-                          }}
+                      <div
+                        class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
+                        :class="
+                          selectedChangelogVersion === item.version ? '' : 'hover:bg-bg-subtle'
+                        "
+                      >
+                        <!-- Version + badges -->
+                        <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
+                          <LinkBase
+                            :to="packageRoute(packageName, item.version)"
+                            :prefetch="false"
+                            class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
+                            :class="
+                              fullVersionMap?.get(item.version)?.deprecated
+                                ? 'text-red-700 dark:text-red-400'
+                                : ''
+                            "
+                            :classicon="
+                              fullVersionMap?.get(item.version)?.deprecated
+                                ? 'i-lucide:octagon-alert'
+                                : undefined
+                            "
+                            dir="ltr"
+                          >
+                            {{ item.version }}
+                          </LinkBase>
+                          <div
+                            v-if="versionToTagsMap.get(item.version)?.length"
+                            class="flex items-center gap-1 flex-wrap relative z-10"
+                          >
+                            <span
+                              v-for="tag in versionToTagsMap.get(item.version)"
+                              :key="tag"
+                              class="text-4xs font-semibold uppercase tracking-wide"
+                              :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                            >
+                              {{ tag }}
+                            </span>
+                          </div>
+                          <span
+                            v-if="fullVersionMap?.get(item.version)?.deprecated"
+                            class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                            :title="fullVersionMap.get(item.version)!.deprecated"
+                          >
+                            deprecated
+                          </span>
+                        </div>
+
+                        <!-- Right side -->
+                        <div class="flex items-center gap-2 shrink-0 relative z-10">
+                          <!-- TODO(atriiy): changelog would be implemented later -->
+
+                          <!-- Metadata: date + provenance -->
+                          <DateTime
+                            v-if="getVersionTime(item.version)"
+                            :datetime="getVersionTime(item.version)!"
+                            class="text-xs text-fg-subtle hidden sm:block"
+                            year="numeric"
+                            month="short"
+                            day="numeric"
+                          />
+                          <ProvenanceBadge
+                            v-if="fullVersionMap?.get(item.version)?.hasProvenance"
+                            :package-name="packageName"
+                            :version="item.version"
+                            compact
+                            :linked="false"
+                          />
+                        </div>
+                      </div>
+
+                      <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
+                      <div
+                        v-if="item.version in mockChangelogs"
+                        class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+                        :class="
+                          selectedChangelogVersion === item.version
+                            ? 'grid-rows-[1fr]'
+                            : 'grid-rows-[0fr]'
+                        "
+                      >
+                        <div class="overflow-hidden">
+                          <div class="changelog-body border-t border-border px-4 py-3 text-sm">
+                            {{
+                              selectedChangelogVersion === item.version
+                                ? selectedChangelogContent
+                                : ''
+                            }}
+                          </div>
                         </div>
                       </div>
                     </div>

From a233df690c219e7139efc207f0a77a73e980c481 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Sat, 14 Mar 2026 11:44:13 +0800
Subject: [PATCH 20/27] fix: fix hltml lint errors

---
 app/pages/package/[[org]]/[name]/versions.vue | 31 +++++++------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index d0183fed22..47b7bb8681 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -108,14 +108,11 @@ const versionGroups = computed(() => {
 })
 
 async function toggleGroup(groupKey: string) {
-  console.log('toggleGroup', groupKey)
   if (expandedGroups.value.has(groupKey)) {
     expandedGroups.value.delete(groupKey)
     return
   }
   expandedGroups.value.add(groupKey)
-  console.log('toggleGroup expanded', fullVersionMap.value)
-  console.log('toggleGroup expanded', !fullVersionMap.value)
   if (!fullVersionMap.value) {
     loadingGroup.value = groupKey
     try {
@@ -205,7 +202,7 @@ const selectedChangelogContent = computed(() => {
         <div class="flex items-center gap-2 min-w-0">
           <NuxtLink
             :to="packageRoute(packageName)"
-            class="font-mono text-lg font-medium hover:text-fg-muted transition-colors min-w-0 truncate"
+            class="text-lg font-medium hover:text-fg-muted transition-colors min-w-0 truncate"
             :title="packageName"
             dir="ltr"
           >
@@ -213,7 +210,7 @@ const selectedChangelogContent = computed(() => {
             >{{ orgName ? packageName.replace(`@${orgName}/`, '') : packageName }}
           </NuxtLink>
           <span class="text-fg-subtle shrink-0">/</span>
-          <span class="font-mono text-sm text-fg-muted shrink-0">Version History</span>
+          <h1 class="text-sm text-fg-muted shrink-0">Version History</h1>
         </div>
         <InputBase
           v-model="versionFilter"
@@ -221,7 +218,7 @@ const selectedChangelogContent = computed(() => {
           placeholder="Filter versions…"
           aria-label="Filter versions"
           size="small"
-          class="w-36 sm:w-44 font-mono"
+          class="w-36 sm:w-44"
         />
       </div>
     </header>
@@ -252,7 +249,7 @@ const selectedChangelogContent = computed(() => {
             </div>
             <LinkBase
               :to="packageRoute(packageName, tagRows[0].version)"
-              class="font-mono text-2xl font-semibold tracking-tight after:absolute after:inset-0 after:content-['']"
+              class="text-2xl font-semibold tracking-tight after:absolute after:inset-0 after:content-['']"
               dir="ltr"
               >{{ tagRows[0].version }}</LinkBase
             >
@@ -300,7 +297,7 @@ const selectedChangelogContent = computed(() => {
             <!-- Version -->
             <LinkBase
               :to="packageRoute(packageName, row.version)"
-              class="font-mono text-sm flex-1 min-w-0 after:absolute after:inset-0 after:content-['']"
+              class="text-sm flex-1 min-w-0 after:absolute after:inset-0 after:content-['']"
               dir="ltr"
             >
               {{ row.version }}
@@ -345,7 +342,7 @@ const selectedChangelogContent = computed(() => {
           role="status"
           aria-live="polite"
         >
-          No versions match <span class="font-mono">{{ versionFilter }}</span>
+          No versions match {{ versionFilter }}
         </div>
 
         <!-- List + changelog side panel -->
@@ -383,12 +380,10 @@ const selectedChangelogContent = computed(() => {
                           aria-hidden="true"
                         />
                       </span>
-                      <span class="font-mono text-sm font-medium">{{ item.label }}</span>
+                      <span class="text-sm font-medium">{{ item.label }}</span>
                       <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
                       <span class="ms-auto flex items-center gap-3 shrink-0">
-                        <span class="font-mono text-xs text-fg-muted" dir="ltr">{{
-                          item.versions[0]
-                        }}</span>
+                        <span class="text-xs text-fg-muted" dir="ltr">{{ item.versions[0] }}</span>
                         <DateTime
                           v-if="getVersionTime(item.versions[0])"
                           :datetime="getVersionTime(item.versions[0])!"
@@ -420,7 +415,7 @@ const selectedChangelogContent = computed(() => {
                           <LinkBase
                             :to="packageRoute(packageName, item.version)"
                             :prefetch="false"
-                            class="font-mono text-sm after:absolute after:inset-0 after:content-['']"
+                            class="text-sm after:absolute after:inset-0 after:content-['']"
                             :class="
                               fullVersionMap?.get(item.version)?.deprecated
                                 ? 'text-red-700 dark:text-red-400'
@@ -519,12 +514,10 @@ const selectedChangelogContent = computed(() => {
                     <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
                       <span class="i-lucide:chevron-right w-3 h-3 rtl-flip" aria-hidden="true" />
                     </span>
-                    <span class="font-mono text-sm font-medium">{{ item.label }}</span>
+                    <span class="text-sm font-medium">{{ item.label }}</span>
                     <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
                     <span class="ms-auto flex items-center gap-3 shrink-0">
-                      <span class="font-mono text-xs text-fg-muted" dir="ltr">{{
-                        item.versions[0]
-                      }}</span>
+                      <span class="text-xs text-fg-muted" dir="ltr">{{ item.versions[0] }}</span>
                       <DateTime
                         v-if="getVersionTime(item.versions[0] ?? '')"
                         :datetime="getVersionTime(item.versions[0] ?? '')!"
@@ -557,7 +550,7 @@ const selectedChangelogContent = computed(() => {
                       class="i-lucide:scroll-text w-3.5 h-3.5 text-fg-subtle shrink-0"
                       aria-hidden="true"
                     />
-                    <span class="font-mono text-sm font-medium truncate" dir="ltr">
+                    <span class="text-sm font-medium truncate" dir="ltr">
                       v{{ selectedChangelogVersion }}
                     </span>
                   </div>

From c39d5913ffb8b9e0f00df3b906c6e731f8bce58c Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Sat, 14 Mar 2026 12:26:33 +0800
Subject: [PATCH 21/27] refactor: optimize type and css

---
 app/pages/package/[[org]]/[name]/versions.vue | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index 47b7bb8681..f08be98fea 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -18,19 +18,13 @@ definePageMeta({
 /** Number of flat items (headers + version rows) to render statically during SSR */
 const SSR_COUNT = 20
 
-const route = useRoute()
+const route = useRoute('package-versions')
 
 const packageName = computed(() => {
-  const { org, name } = route.params as { org?: string; name: string }
-  return org ? `${org}/${name}` : (name as string)
-})
-
-const orgName = computed(() => {
-  const name = packageName.value
-  if (!name.startsWith('@')) return null
-  const match = name.match(/^@([^/]+)\//)
-  return match ? match[1] : null
+  const { org, name } = route.params
+  return org ? `${org}/${name}` : name
 })
+const orgName = computed(() => route.params.org?.replace('@', '') ?? null)
 
 // ─── Phase 1: lightweight fetch (page load) ───────────────────────────────────
 // Fetches only version strings, dist-tags, and publish times — no deprecated/provenance metadata.
@@ -349,7 +343,7 @@ const selectedChangelogContent = computed(() => {
         <div v-else class="flex">
           <!-- Version list (grouped by major, virtualized) -->
           <div
-            class="flex-1 min-w-0 border-y sm:border border-border sm:rounded-lg sm:overflow-hidden"
+            class="flex-1 min-w-0 self-start border-y sm:border border-border sm:rounded-lg sm:overflow-hidden"
           >
             <ClientOnly>
               <WindowVirtualizer :data="flatItems">
@@ -507,7 +501,7 @@ const selectedChangelogContent = computed(() => {
                     v-for="item in versionGroups.slice(0, SSR_COUNT)"
                     :key="item.groupKey"
                     type="button"
-                    class="flex items-center gap-3 px-4 py-2.5 w-full text-start border-b border-border"
+                    class="flex items-center gap-3 px-4 py-2.5 w-full text-start border-b border-border last:border-b-0"
                     :aria-expanded="false"
                     :aria-label="`Expand ${item.label}`"
                   >
@@ -580,7 +574,6 @@ const selectedChangelogContent = computed(() => {
 </template>
 
 <style scoped>
-/* Changelog panel prose styles — mirrors readme.vue conventions */
 .changelog-body {
   color: var(--fg-muted);
   line-height: 1.6;

From 9b7412c6b844c45c64cf7607842358492bc39baa Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Sat, 14 Mar 2026 12:48:16 +0800
Subject: [PATCH 22/27] feat: searching animation and transition

---
 app/pages/package/[[org]]/[name]/versions.vue | 68 ++++++++++++++++---
 1 file changed, 57 insertions(+), 11 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index f08be98fea..f1345ec22a 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -362,17 +362,27 @@ const selectedChangelogContent = computed(() => {
                       <span
                         class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0"
                       >
-                        <span
-                          v-if="loadingGroup === item.groupKey"
-                          class="i-svg-spinners:ring-resize w-3 h-3"
-                          aria-hidden="true"
-                        />
-                        <span
-                          v-else
-                          class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
-                          :class="expandedGroups.has(item.groupKey) ? 'rotate-90' : ''"
-                          aria-hidden="true"
-                        />
+                        <Transition name="icon-swap" mode="out-in">
+                          <span
+                            v-if="loadingGroup === item.groupKey"
+                            key="loading"
+                            class="i-svg-spinners:ring-resize w-3 h-3"
+                            aria-hidden="true"
+                          />
+                          <span
+                            v-else-if="isFilterActive"
+                            key="search"
+                            class="i-lucide:search w-3 h-3 animate-searching"
+                            aria-hidden="true"
+                          />
+                          <span
+                            v-else
+                            key="chevron"
+                            class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
+                            :class="expandedGroups.has(item.groupKey) ? 'rotate-90' : ''"
+                            aria-hidden="true"
+                          />
+                        </Transition>
                       </span>
                       <span class="text-sm font-medium">{{ item.label }}</span>
                       <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
@@ -574,6 +584,42 @@ const selectedChangelogContent = computed(() => {
 </template>
 
 <style scoped>
+.icon-swap-enter-active {
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.icon-swap-leave-active {
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+  animation: none !important;
+}
+
+.icon-swap-enter-from {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+.icon-swap-leave-to {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+@keyframes searching {
+  from {
+    transform: rotate(0deg) translateY(-2px) rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg) translateY(-2px) rotate(-360deg);
+  }
+}
+
+.animate-searching {
+  animation: searching 1.2s linear infinite;
+}
+
 .changelog-body {
   color: var(--fg-muted);
   line-height: 1.6;

From 35919a044419b7a371b15b6145cf286a5aed083b Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Sat, 14 Mar 2026 13:48:38 +0800
Subject: [PATCH 23/27] test: add tests for package version page

---
 test/nuxt/pages/PackageVersionsPage.spec.ts | 186 ++++++++++++++++++++
 1 file changed, 186 insertions(+)
 create mode 100644 test/nuxt/pages/PackageVersionsPage.spec.ts

diff --git a/test/nuxt/pages/PackageVersionsPage.spec.ts b/test/nuxt/pages/PackageVersionsPage.spec.ts
new file mode 100644
index 0000000000..9e9e1c4a13
--- /dev/null
+++ b/test/nuxt/pages/PackageVersionsPage.spec.ts
@@ -0,0 +1,186 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import type * as FastNpmMeta from 'fast-npm-meta'
+import type * as NpmApi from '~/utils/npm/api'
+import VersionsPage from '~/pages/package/[[org]]/[name]/versions.vue'
+
+// ── Mocks ─────────────────────────────────────────────────────────────────────
+
+// Phase 1: lightweight version summary (page load)
+const mockGetVersions = vi.fn()
+vi.mock('fast-npm-meta', async importOriginal => {
+  const actual = await importOriginal<typeof FastNpmMeta>()
+  return {
+    ...actual,
+    getVersions: (...args: unknown[]) => mockGetVersions(...args),
+  }
+})
+
+// Phase 2: full metadata (loaded on first group expand)
+const mockFetchAllPackageVersions = vi.fn()
+vi.mock('~/utils/npm/api', async importOriginal => {
+  const actual = await importOriginal<typeof NpmApi>()
+  return {
+    ...actual,
+    fetchAllPackageVersions: (...args: unknown[]) => mockFetchAllPackageVersions(...args),
+  }
+})
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function makeVersionData(
+  versions: string[],
+  distTags: Record<string, string>,
+  time?: Record<string, string>,
+) {
+  return {
+    distTags,
+    versions,
+    time:
+      time ??
+      Object.fromEntries(versions.map((v, i) => [v, new Date(2024, 0, 15 - i).toISOString()])),
+  }
+}
+
+async function mountPage(route = '/package/test-package/versions') {
+  return mountSuspended(VersionsPage, { route })
+}
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('package versions page', () => {
+  beforeEach(() => {
+    mockGetVersions.mockReset()
+    mockFetchAllPackageVersions.mockReset()
+    clearNuxtData()
+  })
+
+  describe('basic rendering', () => {
+    it('renders the package name in the header', async () => {
+      mockGetVersions.mockResolvedValue(makeVersionData(['1.0.0'], { latest: '1.0.0' }))
+      const component = await mountPage()
+      await vi.waitFor(() => expect(component.text()).toContain('test-package'))
+    })
+
+    it('renders "Version History" section with total count', async () => {
+      mockGetVersions.mockResolvedValue(makeVersionData(['2.0.0', '1.0.0'], { latest: '2.0.0' }))
+      const component = await mountPage()
+      await vi.waitFor(() => {
+        expect(component.text()).toContain('Version History')
+        expect(component.text()).toContain('(2)')
+      })
+    })
+  })
+
+  describe('current tags section', () => {
+    it('renders latest version in the featured card', async () => {
+      mockGetVersions.mockResolvedValue(makeVersionData(['2.0.0', '1.0.0'], { latest: '2.0.0' }))
+      const component = await mountPage()
+      await vi.waitFor(() => {
+        expect(component.text()).toContain('latest')
+        expect(component.text()).toContain('2.0.0')
+      })
+    })
+
+    it('renders non-latest dist-tags in compact list', async () => {
+      mockGetVersions.mockResolvedValue(
+        makeVersionData(['2.0.0', '1.0.0', '1.0.0-beta.1'], {
+          latest: '2.0.0',
+          stable: '1.0.0',
+          beta: '1.0.0-beta.1',
+        }),
+      )
+      const component = await mountPage()
+      await vi.waitFor(() => {
+        expect(component.text()).toContain('stable')
+        expect(component.text()).toContain('beta')
+      })
+    })
+  })
+
+  describe('version history groups', () => {
+    it('renders group headers for each major version', async () => {
+      mockGetVersions.mockResolvedValue(
+        makeVersionData(['2.1.0', '2.0.0', '1.0.0'], { latest: '2.1.0' }),
+      )
+      const component = await mountPage()
+      await vi.waitFor(() => {
+        expect(component.text()).toContain('2.x')
+        expect(component.text()).toContain('1.x')
+      })
+    })
+
+    it('groups 0.x versions by major.minor (not just major)', async () => {
+      mockGetVersions.mockResolvedValue(
+        makeVersionData(['0.10.1', '0.10.0', '0.9.0'], { latest: '0.10.1' }),
+      )
+      const component = await mountPage()
+      await vi.waitFor(() => {
+        expect(component.text()).toContain('0.10.x')
+        expect(component.text()).toContain('0.9.x')
+      })
+    })
+  })
+
+  describe('group expand / collapse', () => {
+    it('expands a group and shows version rows on click', async () => {
+      mockGetVersions.mockResolvedValue(makeVersionData(['1.1.0', '1.0.0'], { latest: '1.1.0' }))
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '1.1.0', time: '2024-01-15T00:00:00.000Z', hasProvenance: false },
+        { version: '1.0.0', time: '2024-01-10T00:00:00.000Z', hasProvenance: false },
+      ])
+      const component = await mountPage()
+      await vi.waitFor(() => expect(component.text()).toContain('1.x'))
+
+      const header = component.find('button[aria-expanded="false"]')
+      await header.trigger('click')
+
+      await vi.waitFor(() => {
+        expect(header.attributes('aria-expanded')).toBe('true')
+      })
+    })
+
+    it('only fetches full metadata once across multiple group expansions', async () => {
+      mockGetVersions.mockResolvedValue(makeVersionData(['2.0.0', '1.0.0'], { latest: '2.0.0' }))
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '2.0.0', time: '2024-01-15T00:00:00.000Z', hasProvenance: false },
+        { version: '1.0.0', time: '2024-01-10T00:00:00.000Z', hasProvenance: false },
+      ])
+      const component = await mountPage()
+      await vi.waitFor(() => {
+        expect(component.findAll('button[aria-expanded="false"]').length).toBeGreaterThanOrEqual(2)
+      })
+
+      const [first, second] = component.findAll('button[aria-expanded="false"]')
+      await first!.trigger('click')
+      await vi.waitFor(() => expect(mockFetchAllPackageVersions).toHaveBeenCalledTimes(1))
+
+      await second!.trigger('click')
+      expect(mockFetchAllPackageVersions).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('version filter', () => {
+    it('filters groups by substring match', async () => {
+      // Use versions where the filter string "1.0" is unique to the 1.x group
+      mockGetVersions.mockResolvedValue(
+        makeVersionData(['3.0.0', '2.0.0', '1.0.0'], { latest: '3.0.0' }),
+      )
+      const component = await mountPage()
+      await vi.waitFor(() => {
+        expect(component.text()).toContain('1.x')
+        expect(component.text()).toContain('2.x')
+        expect(component.text()).toContain('3.x')
+      })
+
+      const input = component.find('input[placeholder="Filter versions\u2026"]')
+      await input.setValue('1.0')
+
+      await vi.waitFor(() => {
+        expect(component.text()).toContain('1.x')
+        expect(component.text()).not.toContain('2.x')
+        expect(component.text()).not.toContain('3.x')
+      })
+    })
+  })
+})

From cba049c43b6e654b839c72cb5e37df5b1a1e9b75 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Sat, 14 Mar 2026 14:01:48 +0800
Subject: [PATCH 24/27] chore: move hard coded text to i18n file

---
 app/components/Package/Versions.vue           |  4 ++--
 app/pages/package/[[org]]/[name]/versions.vue | 22 +++++++++++--------
 i18n/locales/en.json                          |  9 +++++++-
 i18n/schema.json                              | 21 ++++++++++++++++++
 4 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 6f802d541a..f7544f1cc4 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -534,10 +534,10 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
           :to="versionsPageRoute"
           variant="button-secondary"
           class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 p-1 rounded"
-          title="View all versions"
+          :title="$t('package.versions.view_all_versions')"
           classicon="i-lucide:history"
         >
-          <span class="sr-only">View all versions</span>
+          <span class="sr-only">{{ $t('package.versions.view_all_versions') }}</span>
         </LinkBase>
         <ButtonBase
           variant="secondary"
diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index f1345ec22a..cf3e51f01a 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -204,13 +204,13 @@ const selectedChangelogContent = computed(() => {
             >{{ orgName ? packageName.replace(`@${orgName}/`, '') : packageName }}
           </NuxtLink>
           <span class="text-fg-subtle shrink-0">/</span>
-          <h1 class="text-sm text-fg-muted shrink-0">Version History</h1>
+          <h1 class="text-sm text-fg-muted shrink-0">{{ $t('package.versions.page_title') }}</h1>
         </div>
         <InputBase
           v-model="versionFilter"
           type="text"
-          placeholder="Filter versions…"
-          aria-label="Filter versions"
+          :placeholder="$t('package.versions.version_filter_placeholder')"
+          :aria-label="$t('package.versions.version_filter_label')"
           size="small"
           class="w-36 sm:w-44"
         />
@@ -222,7 +222,7 @@ const selectedChangelogContent = computed(() => {
       <!-- ── Current Tags ───────────────────────────────────────────────────── -->
       <section class="space-y-3">
         <h2 class="text-xs text-fg-subtle uppercase tracking-wider px-4 sm:px-6 ps-1">
-          Current Tags
+          {{ $t('package.versions.current_tags') }}
         </h2>
 
         <!-- Latest — featured card -->
@@ -323,7 +323,7 @@ const selectedChangelogContent = computed(() => {
       <!-- ── Version History ───────────────────────────────────────────────── -->
       <section v-if="versionGroups.length > 0">
         <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3 px-4 sm:px-6 ps-1">
-          Version History
+          {{ $t('package.versions.page_title') }}
           <span class="ms-1 normal-case font-normal tracking-normal">
             ({{ versionStrings.length }})
           </span>
@@ -336,7 +336,7 @@ const selectedChangelogContent = computed(() => {
           role="status"
           aria-live="polite"
         >
-          No versions match {{ versionFilter }}
+          {{ $t('package.versions.no_match_filter', { filter: versionFilter }) }}
         </div>
 
         <!-- List + changelog side panel -->
@@ -356,7 +356,11 @@ const selectedChangelogContent = computed(() => {
                       class="flex items-center gap-3 px-4 py-2.5 w-full text-start hover:bg-bg-subtle transition-colors"
                       :class="index < flatItems.length - 1 ? 'border-b border-border' : ''"
                       :aria-expanded="expandedGroups.has(item.groupKey)"
-                      :aria-label="`${expandedGroups.has(item.groupKey) ? 'Collapse' : 'Expand'} ${item.label}`"
+                      :aria-label="
+                        expandedGroups.has(item.groupKey)
+                          ? $t('package.versions.collapse', { tag: item.label })
+                          : $t('package.versions.expand', { tag: item.label })
+                      "
                       @click="toggleGroup(item.groupKey)"
                     >
                       <span
@@ -513,7 +517,7 @@ const selectedChangelogContent = computed(() => {
                     type="button"
                     class="flex items-center gap-3 px-4 py-2.5 w-full text-start border-b border-border last:border-b-0"
                     :aria-expanded="false"
-                    :aria-label="`Expand ${item.label}`"
+                    :aria-label="$t('package.versions.expand', { tag: item.label })"
                   >
                     <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
                       <span class="i-lucide:chevron-right w-3 h-3 rtl-flip" aria-hidden="true" />
@@ -561,7 +565,7 @@ const selectedChangelogContent = computed(() => {
                   <button
                     type="button"
                     class="text-fg-subtle hover:text-fg transition-colors rounded focus-visible:outline-accent/70 shrink-0 ms-2"
-                    aria-label="Close changelog"
+                    :aria-label="$t('package.versions.close_changelog')"
                     @click="selectedChangelogVersion = null"
                   >
                     <span class="i-lucide:x w-3.5 h-3.5" aria-hidden="true" />
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 1734b74958..d114b563ff 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -378,6 +378,7 @@
       "all_covered": "All versions are covered by tags above",
       "deprecated_title": "{version} (deprecated)",
       "view_all": "View {count} version | View all {count} versions",
+      "view_all_versions": "View all versions",
       "distribution_title": "Semver Group",
       "distribution_modal_title": "Versions",
       "distribution_range_date_same_year": "from {from} to {to}, {endYear}",
@@ -402,7 +403,13 @@
       "copy_alt": {
         "per_version_analysis": "{version} version was downloaded {downloads} times",
         "general_description": "Bar chart showing per-version downloads for {versions_count} {semver_grouping_mode} versions of the {package_name} package, {date_range_label} from the {first_version} version to the {last_version} version. The most downloaded version is {max_downloaded_version} with {max_version_downloads} downloads. {per_version_analysis}. {watermark}."
-      }
+      },
+      "page_title": "Version History",
+      "current_tags": "Current Tags",
+      "version_filter_placeholder": "Filter versions…",
+      "version_filter_label": "Filter versions",
+      "no_match_filter": "No versions match {filter}",
+      "close_changelog": "Close changelog"
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",
diff --git a/i18n/schema.json b/i18n/schema.json
index fb0cc69fb5..458ee3593d 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1138,6 +1138,9 @@
             "view_all": {
               "type": "string"
             },
+            "view_all_versions": {
+              "type": "string"
+            },
             "distribution_title": {
               "type": "string"
             },
@@ -1212,6 +1215,24 @@
                 }
               },
               "additionalProperties": false
+            },
+            "page_title": {
+              "type": "string"
+            },
+            "current_tags": {
+              "type": "string"
+            },
+            "version_filter_placeholder": {
+              "type": "string"
+            },
+            "version_filter_label": {
+              "type": "string"
+            },
+            "no_match_filter": {
+              "type": "string"
+            },
+            "close_changelog": {
+              "type": "string"
             }
           },
           "additionalProperties": false

From f06902857473738eb960b552b444d73b19f22a8f Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Sat, 14 Mar 2026 14:44:54 +0800
Subject: [PATCH 25/27] feat: use debounce for filtering

---
 app/pages/package/[[org]]/[name]/versions.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index cf3e51f01a..cd391e0cd2 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -119,7 +119,8 @@ async function toggleGroup(groupKey: string) {
 
 // ─── Version filter ───────────────────────────────────────────────────────────
 
-const versionFilter = ref('')
+const versionFilterInput = ref('')
+const versionFilter = refDebounced(versionFilterInput, 100)
 const isFilterActive = computed(() => versionFilter.value.trim() !== '')
 
 const filteredVersionSet = computed(() => {
@@ -137,10 +138,11 @@ const filteredVersionSet = computed(() => {
 const filteredGroups = computed(() => {
   if (!isFilterActive.value || !filteredVersionSet.value) return versionGroups.value
   return versionGroups.value
-    .map(group => ({
-      ...group,
-      versions: group.versions.filter(v => filteredVersionSet.value!.has(v)),
-    }))
+    .map(group =>
+      Object.assign({}, group, {
+        versions: group.versions.filter(v => filteredVersionSet.value!.has(v)),
+      }),
+    )
     .filter(group => group.versions.length > 0)
 })
 
@@ -207,7 +209,7 @@ const selectedChangelogContent = computed(() => {
           <h1 class="text-sm text-fg-muted shrink-0">{{ $t('package.versions.page_title') }}</h1>
         </div>
         <InputBase
-          v-model="versionFilter"
+          v-model="versionFilterInput"
           type="text"
           :placeholder="$t('package.versions.version_filter_placeholder')"
           :aria-label="$t('package.versions.version_filter_label')"

From 6f5c1b8ae7db65557f5bee0bed25797a447bad6c Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Sat, 14 Mar 2026 15:08:43 +0800
Subject: [PATCH 26/27] test: use data-testid

---
 app/components/Package/Versions.vue          |  1 +
 test/nuxt/components/PackageVersions.spec.ts | 18 +++++++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index f7544f1cc4..4d03bd56d7 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -536,6 +536,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
           class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 p-1 rounded"
           :title="$t('package.versions.view_all_versions')"
           classicon="i-lucide:history"
+          data-testid="view-all-versions-link"
         >
           <span class="sr-only">{{ $t('package.versions.view_all_versions') }}</span>
         </LinkBase>
diff --git a/test/nuxt/components/PackageVersions.spec.ts b/test/nuxt/components/PackageVersions.spec.ts
index 8b66ea90e7..d95a1fde33 100644
--- a/test/nuxt/components/PackageVersions.spec.ts
+++ b/test/nuxt/components/PackageVersions.spec.ts
@@ -72,14 +72,14 @@ describe('PackageVersions', () => {
         },
       })
 
-      // Find version links (exclude anchor links, external links, and action buttons like "View all versions")
+      // Find version links (exclude anchor links, external links, and action buttons)
       const versionLinks = component
         .findAll('a')
         .filter(
           a =>
             !a.attributes('href')?.startsWith('#') &&
             a.attributes('target') !== '_blank' &&
-            a.attributes('title') !== 'View all versions',
+            !a.attributes('data-testid')?.includes('view-all-versions'),
         )
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.text()).toBe('2.0.0')
@@ -97,14 +97,14 @@ describe('PackageVersions', () => {
         },
       })
 
-      // Find version links (exclude anchor links, external links, and action buttons like "View all versions")
+      // Find version links (exclude anchor links, external links, and action buttons)
       const versionLinks = component
         .findAll('a')
         .filter(
           a =>
             !a.attributes('href')?.startsWith('#') &&
             a.attributes('target') !== '_blank' &&
-            a.attributes('title') !== 'View all versions',
+            !a.attributes('data-testid')?.includes('view-all-versions'),
         )
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.text()).toBe('1.0.0')
@@ -248,7 +248,7 @@ describe('PackageVersions', () => {
           a =>
             !a.attributes('href')?.startsWith('#') &&
             a.attributes('target') !== '_blank' &&
-            a.attributes('title') !== 'View all versions',
+            !a.attributes('data-testid')?.includes('view-all-versions'),
         )
       const versions = versionLinks.map(l => l.text())
       // Should be sorted by version descending
@@ -276,7 +276,7 @@ describe('PackageVersions', () => {
           a =>
             !a.attributes('href')?.startsWith('#') &&
             a.attributes('target') !== '_blank' &&
-            a.attributes('title') !== 'View all versions',
+            !a.attributes('data-testid')?.includes('view-all-versions'),
         )
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.classes()).toContain('text-red-800')
@@ -301,7 +301,7 @@ describe('PackageVersions', () => {
           a =>
             !a.attributes('href')?.startsWith('#') &&
             a.attributes('target') !== '_blank' &&
-            a.attributes('title') !== 'View all versions',
+            !a.attributes('data-testid')?.includes('view-all-versions'),
         )
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.attributes('title')).toContain('deprecated')
@@ -638,7 +638,7 @@ describe('PackageVersions', () => {
           a =>
             !a.attributes('href')?.startsWith('#') &&
             a.attributes('target') !== '_blank' &&
-            a.attributes('title') !== 'View all versions',
+            !a.attributes('data-testid')?.includes('view-all-versions'),
         )
       // Should have max 10 visible links in the main section
       expect(visibleLinks.length).toBeLessThanOrEqual(10)
@@ -1049,7 +1049,7 @@ describe('PackageVersions', () => {
           a =>
             !a.attributes('href')?.startsWith('#') &&
             a.attributes('target') !== '_blank' &&
-            a.attributes('title') !== 'View all versions',
+            !a.attributes('data-testid')?.includes('view-all-versions'),
         )
       const versions = versionLinks.map(l => l.text())
       expect(versions).not.toContain('3.0.0')

From bba438000bfd3cb1acc09c3073664dc9dcb24104 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdF@gmail.com>
Date: Sat, 14 Mar 2026 15:23:13 +0800
Subject: [PATCH 27/27] chore: remove all changelog related code

---
 app/pages/package/[[org]]/[name].vue          |   1 +
 app/pages/package/[[org]]/[name]/versions.vue | 390 +++++++-----------
 i18n/locales/en.json                          |   3 +-
 i18n/schema.json                              |   3 -
 4 files changed, 149 insertions(+), 248 deletions(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 65f3c02440..af2852a582 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -207,6 +207,7 @@ const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg,
 //    → Preserve the server-rendered DOM, don't flash to skeleton.
 const nuxtApp = useNuxtApp()
 const route = useRoute()
+// Gates template rendering only — data fetches intentionally still run.
 const isVersionsRoute = computed(() => route.name === 'package-versions')
 const hasEmptyPayload =
   import.meta.client &&
diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index cd391e0cd2..4f5d527d9a 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -63,10 +63,6 @@ async function ensureFullDataLoaded() {
 
 // ─── Derived data ─────────────────────────────────────────────────────────────
 
-// TODO: Replace mockChangelogs with pre-rendered HTML from the server
-//       (GitHub releases body or CHANGELOG.md, parsed server-side like README)
-const mockChangelogs: Record<string, string> = {}
-
 const versionToTagsMap = computed(() => buildVersionToTagsMap(distTags.value))
 const tagRows = computed(() => buildTaggedVersionRows(distTags.value))
 
@@ -176,18 +172,8 @@ const flatItems = computed<FlatItem[]>(() => {
   return items
 })
 
-// ─── Changelog side panel ─────────────────────────────────────────────────────
-
-const selectedChangelogVersion = ref<string | null>(null)
-
-const selectedChangelogContent = computed(() => {
-  if (!selectedChangelogVersion.value) return ''
-  return mockChangelogs[selectedChangelogVersion.value] ?? ''
-})
-
-// function toggleChangelog(version: string) {
-//   selectedChangelogVersion.value = selectedChangelogVersion.value === version ? null : version
-// }
+// TODO(atriiy): implement changelog side panel
+// Show GitHub release notes or parsed CHANGELOG.md content per version
 </script>
 
 <template>
@@ -341,196 +327,58 @@ const selectedChangelogContent = computed(() => {
           {{ $t('package.versions.no_match_filter', { filter: versionFilter }) }}
         </div>
 
-        <!-- List + changelog side panel -->
-        <div v-else class="flex">
-          <!-- Version list (grouped by major, virtualized) -->
-          <div
-            class="flex-1 min-w-0 self-start border-y sm:border border-border sm:rounded-lg sm:overflow-hidden"
-          >
-            <ClientOnly>
-              <WindowVirtualizer :data="flatItems">
-                <template #default="{ item, index }">
-                  <div :key="item.key">
-                    <!-- ── Group header ── -->
-                    <button
-                      v-if="item.type === 'header'"
-                      type="button"
-                      class="flex items-center gap-3 px-4 py-2.5 w-full text-start hover:bg-bg-subtle transition-colors"
-                      :class="index < flatItems.length - 1 ? 'border-b border-border' : ''"
-                      :aria-expanded="expandedGroups.has(item.groupKey)"
-                      :aria-label="
-                        expandedGroups.has(item.groupKey)
-                          ? $t('package.versions.collapse', { tag: item.label })
-                          : $t('package.versions.expand', { tag: item.label })
-                      "
-                      @click="toggleGroup(item.groupKey)"
-                    >
-                      <span
-                        class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0"
-                      >
-                        <Transition name="icon-swap" mode="out-in">
-                          <span
-                            v-if="loadingGroup === item.groupKey"
-                            key="loading"
-                            class="i-svg-spinners:ring-resize w-3 h-3"
-                            aria-hidden="true"
-                          />
-                          <span
-                            v-else-if="isFilterActive"
-                            key="search"
-                            class="i-lucide:search w-3 h-3 animate-searching"
-                            aria-hidden="true"
-                          />
-                          <span
-                            v-else
-                            key="chevron"
-                            class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
-                            :class="expandedGroups.has(item.groupKey) ? 'rotate-90' : ''"
-                            aria-hidden="true"
-                          />
-                        </Transition>
-                      </span>
-                      <span class="text-sm font-medium">{{ item.label }}</span>
-                      <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
-                      <span class="ms-auto flex items-center gap-3 shrink-0">
-                        <span class="text-xs text-fg-muted" dir="ltr">{{ item.versions[0] }}</span>
-                        <DateTime
-                          v-if="getVersionTime(item.versions[0])"
-                          :datetime="getVersionTime(item.versions[0])!"
-                          class="text-xs text-fg-subtle hidden sm:block"
-                          year="numeric"
-                          month="short"
-                          day="numeric"
-                        />
-                      </span>
-                    </button>
-
-                    <!-- ── Version row ── -->
-                    <div
-                      v-else
-                      class="transition-colors"
-                      :class="[
-                        index < flatItems.length - 1 ? 'border-b border-border' : '',
-                        selectedChangelogVersion === item.version ? 'bg-bg-subtle' : '',
-                      ]"
-                    >
-                      <div
-                        class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative"
-                        :class="
-                          selectedChangelogVersion === item.version ? '' : 'hover:bg-bg-subtle'
-                        "
-                      >
-                        <!-- Version + badges -->
-                        <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
-                          <LinkBase
-                            :to="packageRoute(packageName, item.version)"
-                            :prefetch="false"
-                            class="text-sm after:absolute after:inset-0 after:content-['']"
-                            :class="
-                              fullVersionMap?.get(item.version)?.deprecated
-                                ? 'text-red-700 dark:text-red-400'
-                                : ''
-                            "
-                            :classicon="
-                              fullVersionMap?.get(item.version)?.deprecated
-                                ? 'i-lucide:octagon-alert'
-                                : undefined
-                            "
-                            dir="ltr"
-                          >
-                            {{ item.version }}
-                          </LinkBase>
-                          <div
-                            v-if="versionToTagsMap.get(item.version)?.length"
-                            class="flex items-center gap-1 flex-wrap relative z-10"
-                          >
-                            <span
-                              v-for="tag in versionToTagsMap.get(item.version)"
-                              :key="tag"
-                              class="text-4xs font-semibold uppercase tracking-wide"
-                              :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
-                            >
-                              {{ tag }}
-                            </span>
-                          </div>
-                          <span
-                            v-if="fullVersionMap?.get(item.version)?.deprecated"
-                            class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
-                            :title="fullVersionMap.get(item.version)!.deprecated"
-                          >
-                            deprecated
-                          </span>
-                        </div>
-
-                        <!-- Right side -->
-                        <div class="flex items-center gap-2 shrink-0 relative z-10">
-                          <!-- TODO(atriiy): changelog would be implemented later -->
-
-                          <!-- Metadata: date + provenance -->
-                          <DateTime
-                            v-if="getVersionTime(item.version)"
-                            :datetime="getVersionTime(item.version)!"
-                            class="text-xs text-fg-subtle hidden sm:block"
-                            year="numeric"
-                            month="short"
-                            day="numeric"
-                          />
-                          <ProvenanceBadge
-                            v-if="fullVersionMap?.get(item.version)?.hasProvenance"
-                            :package-name="packageName"
-                            :version="item.version"
-                            compact
-                            :linked="false"
-                          />
-                        </div>
-                      </div>
-
-                      <!-- Mobile inline changelog (below the row, sm and up uses side panel) -->
-                      <div
-                        v-if="item.version in mockChangelogs"
-                        class="grid sm:hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
-                        :class="
-                          selectedChangelogVersion === item.version
-                            ? 'grid-rows-[1fr]'
-                            : 'grid-rows-[0fr]'
-                        "
-                      >
-                        <div class="overflow-hidden">
-                          <div class="changelog-body border-t border-border px-4 py-3 text-sm">
-                            {{
-                              selectedChangelogVersion === item.version
-                                ? selectedChangelogContent
-                                : ''
-                            }}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </WindowVirtualizer>
-
-              <!-- SSR fallback: static list of first group headers -->
-              <template #fallback>
-                <div>
+        <div
+          v-else
+          class="flex-1 min-w-0 self-start border-y sm:border border-border sm:rounded-lg sm:overflow-hidden"
+        >
+          <ClientOnly>
+            <WindowVirtualizer :data="flatItems">
+              <template #default="{ item, index }">
+                <div :key="item.key">
+                  <!-- ── Group header ── -->
                   <button
-                    v-for="item in versionGroups.slice(0, SSR_COUNT)"
-                    :key="item.groupKey"
+                    v-if="item.type === 'header'"
                     type="button"
-                    class="flex items-center gap-3 px-4 py-2.5 w-full text-start border-b border-border last:border-b-0"
-                    :aria-expanded="false"
-                    :aria-label="$t('package.versions.expand', { tag: item.label })"
+                    class="flex items-center gap-3 px-4 py-2.5 w-full text-start hover:bg-bg-subtle transition-colors"
+                    :class="index < flatItems.length - 1 ? 'border-b border-border' : ''"
+                    :aria-expanded="expandedGroups.has(item.groupKey)"
+                    :aria-label="
+                      expandedGroups.has(item.groupKey)
+                        ? $t('package.versions.collapse', { tag: item.label })
+                        : $t('package.versions.expand', { tag: item.label })
+                    "
+                    @click="toggleGroup(item.groupKey)"
                   >
                     <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
-                      <span class="i-lucide:chevron-right w-3 h-3 rtl-flip" aria-hidden="true" />
+                      <Transition name="icon-swap" mode="out-in">
+                        <span
+                          v-if="loadingGroup === item.groupKey"
+                          key="loading"
+                          class="i-svg-spinners:ring-resize w-3 h-3"
+                          aria-hidden="true"
+                        />
+                        <span
+                          v-else-if="isFilterActive"
+                          key="search"
+                          class="i-lucide:search w-3 h-3 animate-searching"
+                          aria-hidden="true"
+                        />
+                        <span
+                          v-else
+                          key="chevron"
+                          class="i-lucide:chevron-right w-3 h-3 transition-transform duration-200 rtl-flip"
+                          :class="expandedGroups.has(item.groupKey) ? 'rotate-90' : ''"
+                          aria-hidden="true"
+                        />
+                      </Transition>
                     </span>
                     <span class="text-sm font-medium">{{ item.label }}</span>
                     <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
                     <span class="ms-auto flex items-center gap-3 shrink-0">
                       <span class="text-xs text-fg-muted" dir="ltr">{{ item.versions[0] }}</span>
                       <DateTime
-                        v-if="getVersionTime(item.versions[0] ?? '')"
-                        :datetime="getVersionTime(item.versions[0] ?? '')!"
+                        v-if="getVersionTime(item.versions[0])"
+                        :datetime="getVersionTime(item.versions[0])!"
                         class="text-xs text-fg-subtle hidden sm:block"
                         year="numeric"
                         month="short"
@@ -538,51 +386,114 @@ const selectedChangelogContent = computed(() => {
                       />
                     </span>
                   </button>
-                </div>
-              </template>
-            </ClientOnly>
-          </div>
 
-          <!-- Changelog side panel (desktop only) -->
-          <div
-            class="hidden sm:block overflow-clip shrink-0 transition-[width] duration-200 ease-out motion-reduce:transition-none"
-            :class="selectedChangelogVersion ? 'w-[28rem] ms-6' : 'w-0'"
-          >
-            <!-- Fixed-width inner keeps content from squishing during animation -->
-            <div class="w-[28rem] sticky top-34">
-              <div class="rounded-lg border border-border overflow-hidden">
-                <!-- Panel header -->
-                <div
-                  class="flex items-center justify-between px-4 py-2.5 bg-bg-subtle border-b border-border"
-                >
-                  <div class="flex items-center gap-2 min-w-0">
-                    <span
-                      class="i-lucide:scroll-text w-3.5 h-3.5 text-fg-subtle shrink-0"
-                      aria-hidden="true"
-                    />
-                    <span class="text-sm font-medium truncate" dir="ltr">
-                      v{{ selectedChangelogVersion }}
-                    </span>
-                  </div>
-                  <button
-                    type="button"
-                    class="text-fg-subtle hover:text-fg transition-colors rounded focus-visible:outline-accent/70 shrink-0 ms-2"
-                    :aria-label="$t('package.versions.close_changelog')"
-                    @click="selectedChangelogVersion = null"
+                  <!-- ── Version row ── -->
+                  <div
+                    v-else
+                    class="transition-colors"
+                    :class="index < flatItems.length - 1 ? 'border-b border-border' : ''"
                   >
-                    <span class="i-lucide:x w-3.5 h-3.5" aria-hidden="true" />
-                  </button>
-                </div>
+                    <div
+                      class="flex items-center gap-3 px-4 ps-11 py-2.5 group relative hover:bg-bg-subtle"
+                    >
+                      <!-- Version + badges -->
+                      <div class="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
+                        <LinkBase
+                          :to="packageRoute(packageName, item.version)"
+                          :prefetch="false"
+                          class="text-sm after:absolute after:inset-0 after:content-['']"
+                          :class="
+                            fullVersionMap?.get(item.version)?.deprecated
+                              ? 'text-red-700 dark:text-red-400'
+                              : ''
+                          "
+                          :classicon="
+                            fullVersionMap?.get(item.version)?.deprecated
+                              ? 'i-lucide:octagon-alert'
+                              : undefined
+                          "
+                          dir="ltr"
+                        >
+                          {{ item.version }}
+                        </LinkBase>
+                        <div
+                          v-if="versionToTagsMap.get(item.version)?.length"
+                          class="flex items-center gap-1 flex-wrap relative z-10"
+                        >
+                          <span
+                            v-for="tag in versionToTagsMap.get(item.version)"
+                            :key="tag"
+                            class="text-4xs font-semibold uppercase tracking-wide"
+                            :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                          >
+                            {{ tag }}
+                          </span>
+                        </div>
+                        <span
+                          v-if="fullVersionMap?.get(item.version)?.deprecated"
+                          class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                          :title="fullVersionMap.get(item.version)!.deprecated"
+                        >
+                          deprecated
+                        </span>
+                      </div>
 
-                <!-- Panel body — scrollable for long content -->
-                <div
-                  class="changelog-body overflow-y-auto max-h-[calc(100vh-12rem)] px-4 py-3 text-sm"
-                >
-                  {{ selectedChangelogContent }}
+                      <!-- Right side -->
+                      <div class="flex items-center gap-2 shrink-0 relative z-10">
+                        <!-- Metadata: date + provenance -->
+                        <DateTime
+                          v-if="getVersionTime(item.version)"
+                          :datetime="getVersionTime(item.version)!"
+                          class="text-xs text-fg-subtle hidden sm:block"
+                          year="numeric"
+                          month="short"
+                          day="numeric"
+                        />
+                        <ProvenanceBadge
+                          v-if="fullVersionMap?.get(item.version)?.hasProvenance"
+                          :package-name="packageName"
+                          :version="item.version"
+                          compact
+                          :linked="false"
+                        />
+                      </div>
+                    </div>
+                  </div>
                 </div>
+              </template>
+            </WindowVirtualizer>
+
+            <!-- SSR fallback: static list of first group headers -->
+            <template #fallback>
+              <div>
+                <button
+                  v-for="item in versionGroups.slice(0, SSR_COUNT)"
+                  :key="item.groupKey"
+                  type="button"
+                  class="flex items-center gap-3 px-4 py-2.5 w-full text-start border-b border-border last:border-b-0"
+                  :aria-expanded="false"
+                  :aria-label="$t('package.versions.expand', { tag: item.label })"
+                >
+                  <span class="w-4 h-4 flex items-center justify-center text-fg-subtle shrink-0">
+                    <span class="i-lucide:chevron-right w-3 h-3 rtl-flip" aria-hidden="true" />
+                  </span>
+                  <span class="text-sm font-medium">{{ item.label }}</span>
+                  <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
+                  <span class="ms-auto flex items-center gap-3 shrink-0">
+                    <span class="text-xs text-fg-muted" dir="ltr">{{ item.versions[0] }}</span>
+                    <DateTime
+                      v-if="getVersionTime(item.versions[0] ?? '')"
+                      :datetime="getVersionTime(item.versions[0] ?? '')!"
+                      class="text-xs text-fg-subtle hidden sm:block"
+                      year="numeric"
+                      month="short"
+                      day="numeric"
+                    />
+                  </span>
+                </button>
               </div>
-            </div>
-          </div>
+            </template>
+          </ClientOnly>
         </div>
       </section>
     </div>
@@ -625,11 +536,4 @@ const selectedChangelogContent = computed(() => {
 .animate-searching {
   animation: searching 1.2s linear infinite;
 }
-
-.changelog-body {
-  color: var(--fg-muted);
-  line-height: 1.6;
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
 </style>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index d114b563ff..277f121be4 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -408,8 +408,7 @@
       "current_tags": "Current Tags",
       "version_filter_placeholder": "Filter versions…",
       "version_filter_label": "Filter versions",
-      "no_match_filter": "No versions match {filter}",
-      "close_changelog": "Close changelog"
+      "no_match_filter": "No versions match {filter}"
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",
diff --git a/i18n/schema.json b/i18n/schema.json
index 458ee3593d..96922412cc 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1230,9 +1230,6 @@
             },
             "no_match_filter": {
               "type": "string"
-            },
-            "close_changelog": {
-              "type": "string"
             }
           },
           "additionalProperties": false