diff --git a/app/assets/main.css b/app/assets/main.css
index bbc667d53f..8897b7da18 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -114,7 +114,7 @@
 
   --badge-blue: oklch(0.579 0.191 252);
   --badge-yellow: oklch(0.588 0.183 91);
-  --badge-green: oklch(0.566 0.202 165);
+  --badge-green: oklch(0.49 0.15 161.08);
   --badge-indigo: oklch(0.457 0.24 277.023);
   --badge-purple: oklch(0.495 0.172 295);
   --badge-orange: oklch(0.67 0.185 55);
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 818168f1ba..d0cb8c6337 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -88,13 +88,21 @@ const closeModal = () => modalRef.value?.close?.()
               </p>
               <ul class="mb-8 flex flex-col gap-2">
                 <li class="flex gap-2 items-center">
-                  <kbd class="kbd">.</kbd>
-                  <span>{{ $t('shortcuts.open_code_view') }}</span>
+                  <kbd class="kbd">m</kbd>
+                  <span>{{ $t('shortcuts.open_main') }}</span>
                 </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">d</kbd>
                   <span>{{ $t('shortcuts.open_docs') }}</span>
                 </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">.</kbd>
+                  <span>{{ $t('shortcuts.open_code_view') }}</span>
+                </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">f</kbd>
+                  <span>{{ $t('shortcuts.open_diff') }}</span>
+                </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">c</kbd>
                   <span>{{ $t('shortcuts.compare_from_package') }}</span>
diff --git a/app/components/Code/MobileTreeDrawer.vue b/app/components/Code/MobileTreeDrawer.vue
index 17f8b23b78..192178e9b6 100644
--- a/app/components/Code/MobileTreeDrawer.vue
+++ b/app/components/Code/MobileTreeDrawer.vue
@@ -29,7 +29,7 @@ watch(isOpen, open => (isLocked.value = open))
   <!-- Toggle button (mobile only) -->
   <ButtonBase
     variant="primary"
-    class="md:hidden fixed bottom-4 inset-ie-4 z-45"
+    class="md:hidden fixed bottom-9 inset-ie-4 z-45"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
     :classicon="isOpen ? 'i-lucide:x' : 'i-lucide:folder'"
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 5bc5328364..ba62e47ca8 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -124,7 +124,7 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
     <kbd
       v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
       data-kbd-hint
-      class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      class="ms-2 hidden sm:inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
       {{ ariaKeyshortcuts }}
diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index b0fb55425d..141310089b 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { PackumentVersion, ProvenanceDetails, SlimVersion } from '#shared/types'
+import type { PackumentVersion, ProvenanceDetails, SlimVersion, SlimPackument } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import { SCROLL_TO_TOP_THRESHOLD } from '~/composables/useScrollToTop'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
+import { isEditableElement } from '~/utils/input'
 
 const props = defineProps<{
-  pkg: { name: string } | null
+  pkg?: Pick<SlimPackument, 'name' | 'versions' | 'dist-tags'> | null
   resolvedVersion?: string | null
-  displayVersion: PackumentVersion | null
-  latestVersion: SlimVersion | null
-  provenanceData: ProvenanceDetails | null
-  provenanceStatus: string
-  docsLink: RouteLocationRaw | null
-  codeLink: RouteLocationRaw | null
-  isBinaryOnly: boolean
+  displayVersion?: PackumentVersion | null
+  latestVersion?: SlimVersion | null
+  provenanceData?: ProvenanceDetails | null
+  provenanceStatus?: string | null
+  page: 'main' | 'docs' | 'code' | 'diff'
+  versionUrlPattern: string
 }>()
 
 const { requestedVersion, orgName } = usePackageRoute()
@@ -74,16 +74,113 @@ const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
   copiedDuring: 2000,
 })
 
-const { copied: copiedVersion, copy: copyVersion } = useClipboard({
-  source: () => props.resolvedVersion ?? '',
-  copiedDuring: 2000,
-})
-
 function hasProvenance(version: PackumentVersion | null): boolean {
   if (!version?.dist) return false
   return !!(version.dist as { attestations?: unknown }).attestations
 }
 
+const router = useRouter()
+// Docs URL: use our generated API docs
+const docsLink = computed(() => {
+  if (!props.resolvedVersion) return null
+
+  return {
+    name: 'docs' as const,
+    params: {
+      path: [props.pkg?.name ?? '', 'v', props.resolvedVersion] satisfies [string, string, string],
+    },
+  }
+})
+
+const codeLink = computed((): RouteLocationRaw | null => {
+  if (props.pkg == null || props.resolvedVersion == null) {
+    return null
+  }
+  const split = props.pkg.name.split('/')
+  return {
+    name: 'code',
+    params: {
+      org: split.length === 2 ? split[0] : undefined,
+      packageName: split.length === 2 ? split[1]! : split[0]!,
+      version: props.resolvedVersion,
+      filePath: '',
+    },
+  }
+})
+
+const mainLink = computed((): RouteLocationRaw | null => {
+  if (props.pkg == null || props.resolvedVersion == null) {
+    return null
+  }
+  return packageRoute(props.pkg.name, props.resolvedVersion)
+})
+
+const diffLink = computed((): RouteLocationRaw | null => {
+  if (
+    props.pkg == null ||
+    props.resolvedVersion == null ||
+    props.latestVersion == null ||
+    props.latestVersion.version === props.resolvedVersion
+  ) {
+    return null
+  }
+  return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
+})
+
+const keyboardShortcuts = useKeyboardShortcuts()
+
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, '.') && !isEditableElement(e.target),
+  e => {
+    if (codeLink.value === null) return
+    e.preventDefault()
+
+    navigateTo(codeLink.value)
+  },
+  { dedupe: true },
+)
+
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'm') && !isEditableElement(e.target),
+  e => {
+    if (mainLink.value === null) return
+    e.preventDefault()
+
+    navigateTo(mainLink.value)
+  },
+  { dedupe: true },
+)
+
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'd') && !isEditableElement(e.target),
+  e => {
+    if (!docsLink.value) return
+    e.preventDefault()
+    navigateTo(docsLink.value)
+  },
+  { dedupe: true },
+)
+
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'c') && !isEditableElement(e.target),
+  e => {
+    if (!props.pkg) return
+    e.preventDefault()
+    router.push({ name: 'compare', query: { packages: props.pkg.name } })
+  },
+  { dedupe: true },
+)
+
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'f') && !isEditableElement(e.target),
+  e => {
+    if (diffLink.value === null) return
+    e.preventDefault()
+    navigateTo(diffLink.value)
+  },
+  { dedupe: true },
+)
+
 //atproto
 // TODO: Maybe set this where it's not loaded here every load?
 const { user } = useAtproto()
@@ -151,13 +248,9 @@ const likeAction = async () => {
 
 <template>
   <!-- Package header -->
-  <header
-    class="sticky top-14 z-1 bg-bg py-2 border-border"
-    ref="header"
-    :class="[$style.packageHeader, { 'border-b': isHeaderPinned }]"
-  >
+  <header class="bg-bg pt-5 w-full container">
     <!-- Package name and version -->
-    <div class="flex items-baseline gap-x-2 gap-y-1 sm:gap-x-3 flex-wrap min-w-0">
+    <div class="flex items-baseline justify-between gap-x-2 gap-y-1 flex-wrap min-w-0">
       <CopyToClipboardButton
         :copied="copiedPkgName"
         :copy-text="$t('package.copy_name')"
@@ -165,7 +258,7 @@ const likeAction = async () => {
         @click="copyPkgName()"
       >
         <h1
-          class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
+          class="font-mono text-lg sm:text-3xl font-medium min-w-0 break-words"
           :title="pkg?.name"
           dir="ltr"
         >
@@ -178,84 +271,8 @@ const likeAction = async () => {
           </span>
         </h1>
       </CopyToClipboardButton>
-
-      <CopyToClipboardButton
-        v-if="resolvedVersion"
-        :copied="copiedVersion"
-        :copy-text="$t('package.copy_version')"
-        class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"
-        @click="copyVersion()"
-      >
-        <!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
-        <template v-if="requestedVersion && resolvedVersion !== requestedVersion">
-          <span class="font-mono text-fg-muted text-sm" dir="ltr">{{ requestedVersion }}</span>
-          <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-        </template>
-
-        <LinkBase
-          v-if="requestedVersion && resolvedVersion !== requestedVersion"
-          :to="packageRoute(packageName, resolvedVersion)"
-          :title="$t('package.view_permalink')"
-          dir="ltr"
-          >{{ resolvedVersion }}</LinkBase
-        >
-        <span dir="ltr" v-else>v{{ resolvedVersion }}</span>
-
-        <template v-if="hasProvenance(displayVersion)">
-          <TooltipApp
-            :text="
-              provenanceData && provenanceStatus !== 'pending'
-                ? $t('package.provenance_section.built_and_signed_on', {
-                    provider: provenanceData.providerLabel,
-                  })
-                : $t('package.verified_provenance')
-            "
-            position="bottom"
-            strategy="fixed"
-          >
-            <LinkBase
-              variant="button-secondary"
-              size="small"
-              to="#provenance"
-              :aria-label="$t('package.provenance_section.view_more_details')"
-              classicon="i-lucide:shield-check"
-            />
-          </TooltipApp>
-        </template>
-        <span
-          v-if="requestedVersion && latestVersion && resolvedVersion !== latestVersion.version"
-          class="text-fg-subtle text-sm shrink-0"
-          >{{ $t('package.not_latest') }}</span
-        >
-      </CopyToClipboardButton>
-
-      <!-- Docs + Code + Compare — inline on desktop, floating bottom bar on mobile -->
-      <ButtonGroup
-        v-if="resolvedVersion"
-        as="nav"
-        :aria-label="$t('package.navigation')"
-        class="hidden sm:flex max-sm:flex max-sm:fixed max-sm:z-40 max-sm:inset-is-1/2 max-sm:-translate-x-1/2 max-sm:rtl:translate-x-1/2 max-sm:bg-[--bg]/90 max-sm:backdrop-blur-md max-sm:border max-sm:border-border max-sm:rounded-md max-sm:shadow-md ms-auto"
-        :style="navExtraOffsetStyle"
-        :class="$style.packageNav"
-      >
-        <LinkBase
-          variant="button-secondary"
-          v-if="docsLink"
-          :to="docsLink"
-          aria-keyshortcuts="d"
-          classicon="i-lucide:file-text"
-        >
-          <span class="max-sm:sr-only">{{ $t('package.links.docs') }}</span>
-        </LinkBase>
-        <LinkBase
-          v-if="codeLink"
-          variant="button-secondary"
-          :to="codeLink"
-          aria-keyshortcuts="."
-          classicon="i-lucide:code"
-        >
-          <span class="max-sm:sr-only">{{ $t('package.links.code') }}</span>
-        </LinkBase>
+      <!-- Package metrics -->
+      <div class="flex gap-2 flex-wrap items-stretch">
         <LinkBase
           variant="button-secondary"
           :to="{ name: 'compare', query: { packages: packageName } }"
@@ -264,35 +281,6 @@ const likeAction = async () => {
         >
           <span class="max-sm:sr-only">{{ $t('package.links.compare') }}</span>
         </LinkBase>
-        <LinkBase
-          v-if="displayVersion && latestVersion && displayVersion.version !== latestVersion.version"
-          variant="button-secondary"
-          :to="diffRoute(packageName, displayVersion.version, latestVersion.version)"
-          classicon="i-lucide:diff"
-          :title="$t('compare.compare_versions_title')"
-        >
-          <span class="max-sm:sr-only">{{ $t('compare.compare_versions') }}</span>
-        </LinkBase>
-        <ButtonBase
-          v-if="showScrollToTop"
-          variant="secondary"
-          :aria-label="$t('common.scroll_to_top')"
-          @click="scrollToTop"
-          classicon="i-lucide:arrow-up"
-          class="sm:p-2.75"
-        />
-      </ButtonGroup>
-
-      <!-- Package metrics -->
-      <div class="basis-full flex gap-2 sm:gap-3 flex-wrap items-stretch">
-        <PackageMetricsBadges
-          v-if="resolvedVersion"
-          :package-name="packageName"
-          :version="resolvedVersion"
-          :is-binary="isBinaryOnly"
-          class="self-baseline"
-        />
-
         <!-- Package likes -->
         <TooltipApp
           :text="
@@ -308,7 +296,7 @@ const likeAction = async () => {
         >
           <ButtonBase
             @click="likeAction"
-            size="small"
+            size="medium"
             :aria-label="
               likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
             "
@@ -330,6 +318,120 @@ const likeAction = async () => {
       </div>
     </div>
   </header>
+  <div
+    ref="header"
+    class="w-full bg-bg sticky top-14 z-50 border-b border-border pt-2"
+    :class="[$style.packageHeader]"
+    data-testid="package-subheader"
+  >
+    <div
+      class="w-full container flex flex-col md:flex-row-reverse items-baseline justify-between gap-x-2 gap-y-1 flex-wrap"
+    >
+      <div
+        class="flex items-center max-md:justify-between max-md:w-full max-md:flex-row-reverse gap-2"
+      >
+        <ButtonBase
+          variant="secondary"
+          :aria-label="$t('common.scroll_to_top')"
+          @click="scrollToTop"
+          classicon="i-lucide:arrow-up"
+          :class="showScrollToTop ? '' : 'opacity-0 pointer-events-none select-none'"
+          class="py-1.5 px-2.5 sm:me-2"
+          :tabindex="showScrollToTop ? 0 : -1"
+        />
+        <div class="flex-inline items-center flex-nowrap gap-1 font-mono text-fg-muted">
+          <template v-if="displayVersion && hasProvenance(displayVersion)">
+            <TooltipApp
+              :text="
+                provenanceData && provenanceStatus !== 'pending'
+                  ? $t('package.provenance_section.built_and_signed_on', {
+                      provider: provenanceData.providerLabel,
+                    })
+                  : $t('package.verified_provenance')
+              "
+              position="bottom"
+              strategy="fixed"
+            >
+              <LinkBase
+                variant="button-secondary"
+                :to="packageRoute(packageName, resolvedVersion, '#provenance')"
+                :aria-label="$t('package.provenance_section.view_more_details')"
+                classicon="i-lucide:shield-check"
+                class="py-1.25 px-2 me-2"
+              />
+            </TooltipApp>
+          </template>
+          <!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
+          <template v-if="requestedVersion && resolvedVersion !== requestedVersion">
+            <TooltipApp
+              :text="requestedVersion"
+              position="bottom"
+              strategy="fixed"
+              class="vertical-middle"
+            >
+              <span class="i-lucide:cable rtl-flip min-w-3 w-3 h-3 mx-1" aria-hidden="true" />
+            </TooltipApp>
+          </template>
+          <!-- Version selector -->
+          <VersionSelector
+            v-if="resolvedVersion && pkg?.versions && pkg?.['dist-tags']"
+            :package-name="packageName"
+            :current-version="resolvedVersion"
+            :versions="pkg.versions"
+            :dist-tags="pkg['dist-tags']"
+            :url-pattern="versionUrlPattern"
+            position-class="max-md:inset-is-0 md:inset-ie-0"
+          />
+        </div>
+      </div>
+      <!-- Docs + Code — inline on desktop, floating bottom bar on mobile -->
+      <nav
+        v-if="resolvedVersion"
+        :aria-label="$t('package.navigation')"
+        class="flex gap-4 me-auto -mb-px max-w-full overflow-x-auto"
+        :style="navExtraOffsetStyle"
+        :class="$style.packageNav"
+      >
+        <LinkBase
+          v-if="mainLink"
+          :to="mainLink"
+          aria-keyshortcuts="m"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 lowercase"
+          :class="page === 'main' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.main') }}
+        </LinkBase>
+        <LinkBase
+          v-if="docsLink"
+          :to="docsLink"
+          aria-keyshortcuts="d"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          :class="page === 'docs' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.docs') }}
+        </LinkBase>
+        <LinkBase
+          v-if="codeLink"
+          :to="codeLink"
+          aria-keyshortcuts="."
+          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          :class="page === 'code' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.code') }}
+        </LinkBase>
+        <LinkBase
+          v-if="diffLink"
+          :to="diffLink"
+          :title="$t('compare.compare_versions_title')"
+          aria-keyshortcuts="f"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          :class="page === 'diff' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('compare.compare_versions') }}
+        </LinkBase>
+      </nav>
+    </div>
+  </div>
 </template>
 
 <style module>
@@ -343,11 +445,16 @@ const likeAction = async () => {
   word-break: break-word;
 }
 
-@media (max-width: 639.9px) {
-  .packageNav {
-    bottom: calc(1.25rem + var(--package-nav-extra, 0px) + env(safe-area-inset-bottom, 0px));
-  }
+.packageNav {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
 
+.packageNav::-webkit-scrollbar {
+  display: none;
+}
+
+@media (max-width: 639.9px) {
   .packageNav > :global(a kbd) {
     display: none;
   }
diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
index 910a25aade..a6b33c619e 100644
--- a/app/components/Package/ManagerSelect.vue
+++ b/app/components/Package/ManagerSelect.vue
@@ -144,6 +144,7 @@ function handleKeydown(event: KeyboardEvent) {
         :id="listboxId"
         ref="listRef"
         role="listbox"
+        data-testid="package-manager-dropdown"
         :aria-activedescendant="
           highlightedIndex >= 0
             ? `${listboxId}-${packageManagers[highlightedIndex]?.id}`
diff --git a/app/components/Package/Sidebar.vue b/app/components/Package/Sidebar.vue
index 32c3f755ba..9733e6bd99 100644
--- a/app/components/Package/Sidebar.vue
+++ b/app/components/Package/Sidebar.vue
@@ -23,6 +23,10 @@ const offset = computed(() => {
     ? content.value.offsetTop
     : container.value.offsetHeight - content.value.offsetTop - content.value.offsetHeight
 })
+const packageHeaderHeight = usePackageHeaderHeight()
+const stickyStyle = computed(() =>
+  direction.value === 'up' ? { top: `${56 + packageHeaderHeight.value}px` } : { bottom: `32px` },
+)
 
 const style = computed(() => {
   return direction.value === 'down'
@@ -42,6 +46,7 @@ const style = computed(() => {
     <div
       ref="content"
       class="sticky w-full group-data-[direction=up]:(self-start top-30 xl:top-14) group-data-[direction=down]:(self-end bottom-8)"
+      :style="stickyStyle"
     >
       <slot />
     </div>
diff --git a/app/components/Package/Skeleton.vue b/app/components/Package/Skeleton.vue
index 061767735b..ca1e784fad 100644
--- a/app/components/Package/Skeleton.vue
+++ b/app/components/Package/Skeleton.vue
@@ -1,51 +1,45 @@
 <script setup lang="ts"></script>
 
 <template>
+  <!-- Package header — matches area-header in [...name].vue -->
+  <header class="bg-[--bg] pt-5 pb-1 w-full container">
+    <div class="min-w-0">
+      <!-- Package name -->
+      <div class="min-w-0 flex items-center gap-2 justify-between">
+        <h1 class="font-mono text-2xl sm:text-3xl font-medium">
+          <SkeletonInline class="block! h-9 w-48" />
+        </h1>
+        <div class="flex gap-1">
+          <!-- Compare placeholder -->
+          <SkeletonBlock class="w-9 md:w-40 h-9 rounded self-baseline" />
+          <!-- Likes button placeholder -->
+          <SkeletonBlock class="w-14 h-9 rounded self-baseline" />
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="sticky top-14 z-1 pt-3 bg-bg border-b border-border w-full">
+    <div class="w-full container flex flex-col md:flex-row-reverse flex-wrap gap-2 justify-between">
+      <!-- Version -->
+      <span class="inline-flex items-baseline font-mono text-base sm:text-lg shrink-0">
+        <SkeletonInline class="h-6 w-20" />
+      </span>
+      <!-- Docs + Code + Compare nav placeholder (hidden on mobile) -->
+      <div class="flex items-center gap-0.5 p-0.5">
+        <SkeletonInline class="h-7 w-22 rounded" />
+        <SkeletonInline class="h-7 w-20 rounded" />
+        <SkeletonInline class="h-7 w-26 rounded" />
+      </div>
+    </div>
+  </div>
   <article
     aria-busy="true"
     :aria-label="$t('package.skeleton.loading')"
-    class="package-page motion-safe:animate-fade-in"
+    class="package-page motion-safe:animate-fade-in container w-full"
   >
-    <!-- Package header — matches area-header in [...name].vue -->
-    <header class="area-header sticky top-14 z-1 bg-[--bg] py-2">
-      <div class="flex items-baseline gap-x-2 gap-y-1 sm:gap-x-3 flex-wrap min-w-0">
-        <!-- Package name -->
-        <div class="min-w-0">
-          <h1 class="font-mono text-2xl sm:text-3xl font-medium">
-            <SkeletonInline class="h-9 w-48" />
-          </h1>
-        </div>
-        <!-- Version -->
-        <span class="inline-flex items-baseline font-mono text-base sm:text-lg shrink-0">
-          <SkeletonInline class="h-6 w-20" />
-        </span>
-
-        <!-- Docs + Code + Compare nav placeholder (hidden on mobile) -->
-        <div
-          class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
-        >
-          <SkeletonInline class="h-7 w-22 rounded" />
-          <SkeletonInline class="h-7 w-20 rounded" />
-          <SkeletonInline class="h-7 w-26 rounded" />
-        </div>
-
-        <!-- Metrics badges + likes — matches basis-full flex row -->
-        <div class="basis-full flex gap-2 sm:gap-3 flex-wrap items-stretch">
-          <!-- Badge row (Types, ESM, CJS, CJS-ghost) -->
-          <div class="flex items-center gap-1.5 self-baseline">
-            <SkeletonBlock class="w-16 h-5.5 rounded" />
-            <SkeletonBlock class="w-13 h-5.5 rounded" />
-            <SkeletonBlock class="w-13 h-5.5 rounded" />
-            <SkeletonBlock class="w-13 h-5.5 rounded bg-bg-subtle" />
-          </div>
-          <!-- Likes button placeholder -->
-          <SkeletonBlock class="w-14 h-5.5 rounded self-baseline" />
-        </div>
-      </div>
-    </header>
-
     <!-- Package details — matches area-details in [...name].vue -->
-    <section class="area-details">
+    <section class="area-details pt-4">
       <div class="mb-4">
         <!-- Description -->
         <div class="max-w-2xl">
@@ -65,6 +59,17 @@
           <li><SkeletonInline class="h-5 w-16" /></li>
           <li><SkeletonInline class="h-5 w-10" /></li>
         </ul>
+
+        <!-- Metrics badges + likes — matches basis-full flex row -->
+        <div class="basis-full flex gap-2 sm:gap-3 flex-wrap items-stretch mt-4">
+          <!-- Badge row (Types, ESM, CJS, CJS-ghost) -->
+          <div class="flex items-center gap-1.5 self-baseline">
+            <SkeletonBlock class="w-16 h-5.5 rounded" />
+            <SkeletonBlock class="w-13 h-5.5 rounded" />
+            <SkeletonBlock class="w-13 h-5.5 rounded" />
+            <SkeletonBlock class="w-13 h-5.5 rounded bg-bg-subtle" />
+          </div>
+        </div>
       </div>
 
       <!-- Stats grid — matches dl in [...name].vue -->
@@ -198,9 +203,9 @@
     <!-- Sidebar — matches area-sidebar in [...name].vue -->
     <div class="area-sidebar">
       <div
-        class="sticky top-30 xl:top-14 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(pt-2 max-h-[calc(100dvh-6rem)])"
+        class="sticky top-30 xl:top-14 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(max-h-[calc(100dvh-6rem)])"
       >
-        <div class="flex flex-col gap-4 sm:gap-6 xl:(pt-2)">
+        <div class="flex flex-col gap-4 sm:gap-6 xl:pt-4">
           <!-- Download stats — matches CollapsibleSection + sparkline skeleton -->
           <section>
             <div class="flex items-center justify-between mb-3 px-1">
@@ -382,7 +387,6 @@
   /* Mobile: single column, sidebar above readme */
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
-    'header'
     'details'
     'install'
     'vulns'
@@ -390,12 +394,11 @@
     'readme';
 }
 
-/* Tablet/medium: header/install/vulns full width, readme+sidebar side by side */
+/* Tablet/medium: install/vulns full width, readme+sidebar side by side */
 @media (min-width: 1024px) {
   .package-page {
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
-      'header  header'
       'details details'
       'install install'
       'vulns   vulns'
@@ -409,7 +412,6 @@
   .package-page {
     grid-template-columns: 1fr 20rem;
     grid-template-areas:
-      'header  sidebar'
       'details sidebar'
       'install sidebar'
       'vulns   sidebar'
@@ -417,10 +419,6 @@
   }
 }
 
-.area-header {
-  grid-area: header;
-}
-
 .area-details {
   grid-area: details;
 }
@@ -441,39 +439,4 @@
 .area-sidebar {
   grid-area: sidebar;
 }
-
-/* Sidebar scrollbar: hidden by default, shown on hover/focus */
-@media (min-width: 1024px) {
-  .sidebar-scroll {
-    scrollbar-gutter: stable;
-    scrollbar-width: 8px;
-    scrollbar-color: transparent transparent;
-  }
-
-  .sidebar-scroll::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  .sidebar-scroll::-webkit-scrollbar-track,
-  .sidebar-scroll::-webkit-scrollbar-thumb {
-    background: transparent;
-  }
-
-  .sidebar-scroll:hover,
-  .sidebar-scroll:focus-within {
-    scrollbar-color: var(--border) transparent;
-  }
-
-  .sidebar-scroll:hover::-webkit-scrollbar-thumb,
-  .sidebar-scroll:focus-within::-webkit-scrollbar-thumb {
-    background-color: var(--border);
-    border-radius: 9999px;
-  }
-
-  .sidebar-scroll:hover::-webkit-scrollbar-track,
-  .sidebar-scroll:focus-within::-webkit-scrollbar-track {
-    background: transparent;
-  }
-}
 </style>
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
index 5a0867ee8a..46d29d8624 100644
--- a/app/components/VersionSelector.vue
+++ b/app/components/VersionSelector.vue
@@ -11,14 +11,21 @@ import {
 } from '~/utils/versions'
 import { fetchAllPackageVersions } from '~/utils/npm/api'
 
-const props = defineProps<{
-  packageName: string
-  currentVersion: string
-  versions: Record<string, unknown>
-  distTags: Record<string, string>
-  /** URL pattern for navigation. Use {version} as placeholder. */
-  urlPattern: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    packageName: string
+    currentVersion: string
+    versions: Record<string, unknown>
+    distTags: Record<string, string>
+    /** URL pattern for navigation. Use {version} as placeholder. */
+    urlPattern: string
+    /** class for the position of the dropdown, default is inset-is-0 */
+    positionClass?: string | null
+  }>(),
+  {
+    positionClass: 'inset-is-0',
+  },
+)
 
 const isOpen = shallowRef(false)
 const dropdownRef = useTemplateRef('dropdownRef')
@@ -472,19 +479,20 @@ watch(
       type="button"
       aria-haspopup="listbox"
       :aria-expanded="isOpen"
-      class="flex items-center gap-1.5 text-fg-subtle font-mono text-sm hover:text-fg transition-[color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded"
+      class="break-all text-start text-fg-subtle font-mono text-sm hover:text-fg transition-[color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded"
       @click="isOpen = !isOpen"
       @keydown="handleButtonKeydown"
+      data-testid="version-selector-button"
     >
-      <span dir="ltr">{{ currentVersion }}</span>
+      <span dir="ltr" class="me-1.5">{{ currentVersion }}</span>
       <span
         v-if="currentVersion === latestVersion"
-        class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium"
+        class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium me-1.5"
       >
         latest
       </span>
       <span
-        class="i-lucide:chevron-down w-3.5 h-3.5 transition-[transform] duration-200 motion-reduce:transition-none"
+        class="i-lucide:chevron-down w-3.5 h-3.5 transition-[transform] duration-200 motion-reduce:transition-none vertical-middle"
         :class="{ 'rotate-180': isOpen }"
         aria-hidden="true"
       />
@@ -506,7 +514,8 @@ watch(
         :aria-activedescendant="
           focusedIndex >= 0 ? `version-${flatItems[focusedIndex]?.version?.version}` : undefined
         "
-        class="absolute top-full inset-is-0 mt-2 min-w-[220px] bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-fg-subtle/10 z-50 py-1 max-h-[400px] overflow-y-auto overscroll-contain focus-visible:outline-none"
+        class="absolute top-full mt-2 min-w-[220px] max-w-[calc(100vw-40px)] bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-fg-subtle/10 z-50 py-1 max-h-[400px] overflow-y-auto overscroll-contain focus-visible:outline-none"
+        :class="positionClass"
         @keydown="handleListboxKeydown"
       >
         <!-- Version groups -->
diff --git a/app/components/diff/MobileSidebarDrawer.vue b/app/components/diff/MobileSidebarDrawer.vue
index 9fb48e5f7f..087bd4f6c8 100644
--- a/app/components/diff/MobileSidebarDrawer.vue
+++ b/app/components/diff/MobileSidebarDrawer.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import type { CompareResponse, FileChange } from '#shared/types'
+import type { SlimPackument } from '#shared/types'
 
 const props = defineProps<{
   compare: CompareResponse
   groupedDeps: Map<string, CompareResponse['dependencyChanges']>
   allChanges: FileChange[]
+  pkg?: Pick<SlimPackument, 'versions' | 'dist-tags'> | null
+  packageName: string
+  toVersion: string
+  toVersionUrlPattern: string
 }>()
 
 const selectedFile = defineModel<FileChange | null>('selectedFile', { default: null })
@@ -53,30 +58,43 @@ watch(open, value => {
       v-if="open"
       class="md:hidden fixed inset-y-0 inset-is-0 z-50 w-72 max-w-[85vw] bg-bg-subtle border-ie border-border overflow-y-auto flex flex-col"
     >
-      <div
-        class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-between gap-2"
-      >
-        <div class="text-xs font-mono text-fg-muted flex items-center gap-2">
-          <span class="flex items-center gap-1">
-            <span class="text-green-500">+{{ props.compare.stats.filesAdded }}</span>
-            <span class="text-fg-subtle">/</span>
-            <span class="text-red-500">-{{ props.compare.stats.filesRemoved }}</span>
-            <span class="text-fg-subtle">/</span>
-            <span class="text-yellow-500">~{{ props.compare.stats.filesModified }}</span>
-          </span>
-          <span class="text-fg-subtle">•</span>
-          <span>{{
-            $t('compare.files_count', { count: props.allChanges.length }, props.allChanges.length)
-          }}</span>
+      <div class="sticky top-0 bg-bg-subtle border-b border-border z-50">
+        <div class="flex items-center justify-between gap-2 py-2 px-4">
+          <div class="text-xs font-mono text-fg-muted flex items-center gap-2">
+            <span class="flex items-center gap-1">
+              <span class="text-green-500">+{{ props.compare.stats.filesAdded }}</span>
+              <span class="text-fg-subtle">/</span>
+              <span class="text-red-500">-{{ props.compare.stats.filesRemoved }}</span>
+              <span class="text-fg-subtle">/</span>
+              <span class="text-yellow-500">~{{ props.compare.stats.filesModified }}</span>
+            </span>
+            <span class="text-fg-subtle">•</span>
+            <span>{{
+              $t('compare.files_count', { count: props.allChanges.length }, props.allChanges.length)
+            }}</span>
+          </div>
+          <button
+            type="button"
+            class="text-fg-muted hover:text-fg transition-colors"
+            :aria-label="$t('compare.close_files_panel')"
+            @click="open = false"
+          >
+            <span class="i-lucide:x w-5 h-5" />
+          </button>
+        </div>
+        <div v-if="pkg?.versions && pkg?.['dist-tags']" class="py-2 border-t border-border px-4">
+          <p class="text-xs font-medium text-fg mb-1 flex items-center gap-1.5">
+            <span class="block i-lucide-git-compare-arrows w-3.5 h-3.5" />
+            {{ $t('compare.version_selector_title') }}
+          </p>
+          <VersionSelector
+            :package-name="packageName"
+            :current-version="toVersion"
+            :versions="pkg.versions"
+            :dist-tags="pkg['dist-tags']"
+            :url-pattern="toVersionUrlPattern"
+          />
         </div>
-        <button
-          type="button"
-          class="text-fg-muted hover:text-fg transition-colors"
-          :aria-label="$t('compare.close_files_panel')"
-          @click="open = false"
-        >
-          <span class="i-lucide:x w-5 h-5" />
-        </button>
       </div>
 
       <DiffSidebarPanel
diff --git a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
index 0413adeffb..614ef18a9d 100644
--- a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
+++ b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CompareResponse, FileChange } from '#shared/types'
+import type { RouteLocationRaw } from 'vue-router'
 import { diffRoute, packageRoute } from '~/utils/router'
 
 definePageMeta({
@@ -90,12 +91,24 @@ const groupedDeps = computed(() => {
   }
   return groups
 })
+// Keep latestVersion for comparison (to show "(latest)" badge)
+const latestVersionDetailed = computed(() => {
+  if (!pkg.value) return null
+  const latestTag = pkg.value['dist-tags']?.latest
+  if (!latestTag) return null
+  return pkg.value.versions[latestTag] ?? null
+})
+
+const normalizeRoutePath = (route: RouteLocationRaw) => {
+  const resolvedHref = router.resolve(route).href
+  return resolvedHref.replace(/%7B/g, '{').replace(/%7D/g, '}')
+}
 
 const fromVersionUrlPattern = computed(() => {
-  return router.resolve(diffRoute(packageName.value, '{version}', toVersion.value)).href
+  return normalizeRoutePath(diffRoute(packageName.value, '{version}', toVersion.value))
 })
 const toVersionUrlPattern = computed(() => {
-  return router.resolve(diffRoute(packageName.value, fromVersion.value, '{version}')).href
+  return normalizeRoutePath(diffRoute(packageName.value, fromVersion.value, '{version}'))
 })
 
 useSeoMeta({
@@ -112,53 +125,14 @@ useSeoMeta({
 
 <template>
   <main class="flex-1 flex flex-col min-h-0">
-    <!-- Header -->
-    <header class="border-b border-border bg-bg sticky top-14 z-20">
-      <div class="container py-4">
-        <!-- Package info -->
-        <div class="flex items-center gap-2 mb-3 flex-wrap min-w-0">
-          <NuxtLink
-            :to="packageRoute(packageName)"
-            class="font-mono text-lg font-medium hover:text-fg transition-colors min-w-0 truncate"
-          >
-            {{ packageName }}
-          </NuxtLink>
-          <span class="text-fg-subtle">/</span>
-          <span class="font-mono text-sm text-fg-muted">compare</span>
-        </div>
-
-        <!-- Version selectors -->
-        <div class="flex items-center gap-3 flex-wrap">
-          <div class="flex items-center gap-2">
-            <span class="text-xs text-fg-subtle uppercase tracking-wide">From</span>
-            <VersionSelector
-              v-if="pkg?.versions && pkg?.['dist-tags']"
-              :package-name="packageName"
-              :current-version="fromVersion"
-              :versions="pkg.versions"
-              :dist-tags="pkg['dist-tags']"
-              :url-pattern="fromVersionUrlPattern"
-            />
-            <span v-else class="font-mono text-sm text-fg-muted">{{ fromVersion }}</span>
-          </div>
-
-          <span class="i-lucide:arrow-right w-4 h-4 text-fg-subtle" />
-
-          <div class="flex items-center gap-2">
-            <span class="text-xs text-fg-subtle uppercase tracking-wide">To</span>
-            <VersionSelector
-              v-if="pkg?.versions && pkg?.['dist-tags']"
-              :package-name="packageName"
-              :current-version="toVersion"
-              :versions="pkg.versions"
-              :dist-tags="pkg['dist-tags']"
-              :url-pattern="toVersionUrlPattern"
-            />
-            <span v-else class="font-mono text-sm text-fg-muted">{{ toVersion }}</span>
-          </div>
-        </div>
-      </div>
-    </header>
+    <PackageHeader
+      :pkg="pkg"
+      :resolved-version="fromVersion"
+      :display-version="pkg?.requestedVersion"
+      :latest-version="latestVersionDetailed"
+      :version-url-pattern="fromVersionUrlPattern"
+      page="diff"
+    />
 
     <!-- Error: invalid route -->
     <div v-if="!versionRange" class="container py-20 text-center">
@@ -186,6 +160,19 @@ useSeoMeta({
       <aside
         class="hidden md:flex w-80 border-ie border-border bg-bg-subtle flex-col shrink-0 min-h-0"
       >
+        <div v-if="pkg?.versions && pkg?.['dist-tags']" class="px-3 py-2 border-b border-border">
+          <p class="text-xs font-medium text-fg mb-1 flex items-center gap-1.5">
+            <span class="block i-lucide-git-compare-arrows w-3.5 h-3.5" />
+            {{ $t('compare.version_selector_title') }}
+          </p>
+          <VersionSelector
+            :package-name="packageName"
+            :current-version="toVersion"
+            :versions="pkg.versions"
+            :dist-tags="pkg['dist-tags']"
+            :url-pattern="toVersionUrlPattern"
+          />
+        </div>
         <DiffSidebarPanel
           :compare="compare"
           :grouped-deps="groupedDeps"
@@ -255,6 +242,10 @@ useSeoMeta({
           v-model:selected-file="selectedFile"
           v-model:file-filter="fileFilter"
           v-model:open="mobileDrawerOpen"
+          :pkg="pkg"
+          :package-name="packageName"
+          :to-version="toVersion"
+          :to-version-url-pattern="toVersionUrlPattern"
         />
       </Teleport>
     </ClientOnly>
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index cb1d3955d1..e355279345 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -219,14 +219,6 @@ function getCurrentCodeUrlWithPath(path?: string): string {
   })
 }
 
-// Extract org name from scoped package
-const orgName = computed(() => {
-  const name = packageName.value
-  if (!name.startsWith('@')) return null
-  const match = name.match(/^@([^/]+)\//)
-  return match ? match[1] : null
-})
-
 // Line number click handler - update URL hash without scrolling
 function handleLineClick(lineNum: number, event: MouseEvent) {
   let newHash: string
@@ -264,14 +256,6 @@ const { copied: fileContentCopied, copy: copyFileContent } = useClipboard({
   copiedDuring: 2000,
 })
 
-// Scroll to top of file content
-const contentContainer = useTemplateRef('contentContainer')
-function scrollToTop() {
-  if (contentContainer.value) {
-    contentContainer.value.scrollTo({ top: 0, behavior: 'smooth' })
-  }
-}
-
 // Canonical URL for this code page
 const canonicalUrl = computed(() => `https://npmx.dev${getCodeUrl(route.params)}`)
 
@@ -293,6 +277,14 @@ const markdownViewMode = shallowRef<(typeof markdownViewModes)[number]['key']>('
 
 const bytesFormatter = useBytesFormatter()
 
+// Keep latestVersion for comparison (to show "(latest)" badge)
+const latestVersion = computed(() => {
+  if (!pkg.value) return null
+  const latestTag = pkg.value['dist-tags']?.latest
+  if (!latestTag) return null
+  return pkg.value.versions[latestTag] ?? null
+})
+
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
 })
@@ -330,69 +322,14 @@ defineOgImageComponent('Default', {
 
 <template>
   <main class="flex-1 flex flex-col">
-    <!-- Header -->
-    <header class="border-b border-border bg-bg sticky top-14 z-20">
-      <div class="container py-4">
-        <!-- Package info and navigation -->
-        <div class="flex items-center gap-2 mb-3 flex-wrap min-w-0">
-          <NuxtLink
-            :to="packageRoute(packageName, version)"
-            class="font-mono text-lg font-medium hover:text-fg transition-colors min-w-0 truncate max-w-[60vw] sm:max-w-none"
-            :title="packageName"
-          >
-            <span v-if="orgName" class="text-fg-muted">@{{ orgName }}/</span
-            >{{ orgName ? packageName.replace(`@${orgName}/`, '') : packageName }}
-          </NuxtLink>
-          <!-- Version selector -->
-          <VersionSelector
-            v-if="version && pkg?.versions && pkg?.['dist-tags']"
-            :package-name="packageName"
-            :current-version="version"
-            :versions="pkg.versions"
-            :dist-tags="pkg['dist-tags']"
-            :url-pattern="versionUrlPattern"
-          />
-          <span
-            v-else-if="version"
-            class="px-2 py-0.5 font-mono text-sm bg-bg-muted border border-border rounded truncate max-w-32 sm:max-w-48"
-            :title="`v${version}`"
-          >
-            v{{ version }}
-          </span>
-          <span class="text-fg-subtle shrink-0">/</span>
-          <span class="font-mono text-sm text-fg-muted shrink-0">{{
-            $t('package.links.code')
-          }}</span>
-        </div>
-
-        <!-- Breadcrumb navigation -->
-        <nav
-          :aria-label="$t('code.file_path')"
-          class="flex items-center gap-1 font-mono text-sm overflow-x-auto"
-          dir="ltr"
-        >
-          <NuxtLink
-            v-if="filePath"
-            :to="getCurrentCodeUrlWithPath()"
-            class="text-fg-muted hover:text-fg transition-colors shrink-0"
-          >
-            {{ $t('code.root') }}
-          </NuxtLink>
-          <span v-else class="text-fg shrink-0">{{ $t('code.root') }}</span>
-          <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
-            <span class="text-fg-subtle">/</span>
-            <NuxtLink
-              v-if="i < breadcrumbs.length - 1"
-              :to="getCurrentCodeUrlWithPath(crumb.path)"
-              class="text-fg-muted hover:text-fg transition-colors"
-            >
-              {{ crumb.name }}
-            </NuxtLink>
-            <span v-else class="text-fg">{{ crumb.name }}</span>
-          </template>
-        </nav>
-      </div>
-    </header>
+    <PackageHeader
+      :pkg="pkg"
+      :resolved-version="version"
+      :display-version="pkg?.requestedVersion"
+      :latest-version="latestVersion"
+      :version-url-pattern="versionUrlPattern"
+      page="code"
+    />
 
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
@@ -420,7 +357,7 @@ defineOgImageComponent('Default', {
     <div v-else-if="fileTree" class="flex flex-1" dir="ltr">
       <!-- File tree sidebar - sticky with internal scroll -->
       <aside
-        class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
+        class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-25 self-start h-[calc(100vh-7rem)] overflow-y-auto"
       >
         <CodeFileTree
           :tree="fileTree.tree"
@@ -431,87 +368,95 @@ defineOgImageComponent('Default', {
       </aside>
 
       <!-- File content / Directory listing - sticky with internal scroll on desktop -->
-      <div
-        class="flex-1 min-w-0 overflow-x-hidden sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
-        ref="contentContainer"
-      >
-        <!-- File viewer -->
-        <template v-if="isViewingFile && !isBinaryFile && fileContent">
-          <div
-            class="sticky z-10 top-0 bg-bg border-b border-border px-4 py-2 flex items-center justify-between"
-          >
-            <div class="flex items-center gap-2">
-              <div
-                v-if="fileContent.markdownHtml"
-                class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
-                role="tablist"
-                aria-label="Markdown view mode selector"
-              >
-                <button
-                  v-for="mode in markdownViewModes"
-                  :key="mode.key"
-                  role="tab"
-                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-accent/70 inline-flex items-center gap-1.5"
-                  :class="
-                    markdownViewMode === mode.key
-                      ? 'bg-bg shadow text-fg border-border'
-                      : 'text-fg-subtle hover:text-fg border-transparent'
-                  "
-                  @click="markdownViewMode = mode.key"
-                >
-                  <span class="inline-block h-3 w-3" :class="mode.icon" aria-hidden="true" />
-                  {{ mode.label }}
-                </button>
-              </div>
-              <div class="flex items-center gap-3 text-sm">
-                <span class="text-fg-muted" dir="auto">{{
-                  $t('code.lines', { count: fileContent.lines })
-                }}</span>
-                <span v-if="currentNode?.size" class="text-fg-subtle">{{
-                  bytesFormatter.format(currentNode.size)
-                }}</span>
-              </div>
-            </div>
-            <div class="flex items-center gap-2">
-              <button
-                type="button"
-                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors items-center inline-flex gap-1"
-                @click="scrollToTop"
-              >
-                <span class="i-lucide:arrow-up w-3 h-3" />
-                {{ $t('code.scroll_to_top') }}
-              </button>
-              <button
-                v-if="selectedLines"
-                type="button"
-                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors active:scale-95"
-                @click="copyPermalinkUrl"
-              >
-                {{ permalinkCopied ? $t('common.copied') : $t('code.copy_link') }}
-              </button>
+      <div class="flex-1 min-w-0 self-start">
+        <div
+          class="sticky z-10 top-25 bg-bg border-b border-border px-4 py-2 flex items-center justify-between gap-2 text-nowrap overflow-x-auto max-w-full"
+        >
+          <div class="flex items-center gap-2">
+            <div
+              v-if="fileContent?.markdownHtml"
+              class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
+              role="tablist"
+              aria-label="Markdown view mode selector"
+            >
               <button
-                v-if="!!fileContent?.content"
-                type="button"
-                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1 capitalize"
-                @click="copyFileContent()"
+                v-for="mode in markdownViewModes"
+                :key="mode.key"
+                role="tab"
+                class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-accent/70 inline-flex items-center gap-1.5"
+                :class="
+                  markdownViewMode === mode.key
+                    ? 'bg-bg shadow text-fg border-border'
+                    : 'text-fg-subtle hover:text-fg border-transparent'
+                "
+                :aria-selected="markdownViewMode === mode.key"
+                @click="markdownViewMode = mode.key"
               >
-                <span
-                  class="w-3 h-3"
-                  :class="fileContentCopied ? 'i-lucide:check' : 'i-lucide:file'"
-                />
-                {{ fileContentCopied ? $t('common.copied') : $t('common.copy') }}
+                <span class="inline-block h-3 w-3" :class="mode.icon" aria-hidden="true" />
+                {{ mode.label }}
               </button>
-              <a
-                :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1"
-              >
-                {{ $t('code.raw') }}
-                <span class="i-lucide:external-link w-3 h-3" />
-              </a>
             </div>
+            <!-- Breadcrumb navigation -->
+            <nav
+              :aria-label="$t('code.file_path')"
+              class="flex items-center gap-0.5 font-mono text-sm overflow-x-auto"
+              dir="ltr"
+            >
+              <NuxtLink
+                v-if="filePath"
+                :to="getCurrentCodeUrlWithPath()"
+                class="text-fg-muted hover:text-fg transition-colors shrink-0"
+              >
+                {{ $t('code.root') }}
+              </NuxtLink>
+              <span v-else class="text-fg shrink-0">{{ $t('code.root') }}</span>
+              <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
+                <span class="text-fg-subtle">/</span>
+                <NuxtLink
+                  v-if="i < breadcrumbs.length - 1"
+                  :to="getCurrentCodeUrlWithPath(crumb.path)"
+                  class="text-fg-muted hover:text-fg transition-colors"
+                >
+                  {{ crumb.name }}
+                </NuxtLink>
+                <span v-else class="text-fg">{{ crumb.name }}</span>
+              </template>
+            </nav>
+          </div>
+          <div class="flex items-center gap-2" v-if="isViewingFile && !isBinaryFile && fileContent">
+            <button
+              v-if="selectedLines"
+              type="button"
+              class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors active:scale-95"
+              @click="copyPermalinkUrl"
+            >
+              {{ permalinkCopied ? $t('common.copied') : $t('code.copy_link') }}
+            </button>
+            <button
+              v-if="!!fileContent?.content"
+              type="button"
+              class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1 capitalize"
+              @click="copyFileContent()"
+            >
+              <span
+                class="w-3 h-3"
+                :class="fileContentCopied ? 'i-lucide:check' : 'i-lucide:file'"
+              />
+              {{ fileContentCopied ? $t('common.copied') : $t('common.copy') }}
+            </button>
+            <a
+              :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1"
+            >
+              {{ $t('code.raw') }}
+              <span class="i-lucide:external-link w-3 h-3" />
+            </a>
           </div>
+        </div>
+        <!-- File viewer -->
+        <template v-if="isViewingFile && !isBinaryFile && fileContent">
           <div
             v-if="fileContent.markdownHtml"
             v-show="markdownViewMode === 'preview'"
@@ -527,6 +472,16 @@ defineOgImageComponent('Default', {
             :selected-lines="selectedLines"
             @line-click="handleLineClick"
           />
+          <div class="sticky bottom-0 bg-bg border-t border-border px-4 py-1">
+            <div class="flex items-center gap-3 text-sm justify-end">
+              <span class="text-fg-muted" dir="auto">{{
+                $t('code.lines', { count: fileContent.lines })
+              }}</span>
+              <span v-if="currentNode?.size" class="text-fg-subtle">{{
+                bytesFormatter.format(currentNode.size)
+              }}</span>
+            </div>
+          </div>
         </template>
 
         <!-- Binary file warning -->
diff --git a/app/pages/package-docs/[...path].vue b/app/pages/package-docs/[...path].vue
index 07e6dbe922..d04b6c6578 100644
--- a/app/pages/package-docs/[...path].vue
+++ b/app/pages/package-docs/[...path].vue
@@ -93,6 +93,17 @@ const { data: docsData, status: docsStatus } = useLazyFetch<DocsResponse>(
     }),
   },
 )
+// Keep latestVersion for comparison (to show "(latest)" badge)
+const latestVersionDetailed = computed(() => {
+  if (!pkg.value) return null
+  const latestTag = pkg.value['dist-tags']?.latest
+  if (!latestTag) return null
+  return pkg.value.versions[latestTag] ?? null
+})
+
+const versionUrlPattern = computed(
+  () => `/package-docs/${pkg.value?.name || packageName.value}/v/{version}`,
+)
 
 const pageTitle = computed(() => {
   if (!packageName.value) return 'API Docs - npmx'
@@ -119,49 +130,25 @@ const showLoading = computed(
   () => docsStatus.value === 'pending' || (docsStatus.value === 'idle' && docsUrl.value !== null),
 )
 const showEmptyState = computed(() => docsData.value?.status !== 'ok')
+
+const packageHeaderHeight = usePackageHeaderHeight()
+const stickyStyle = computed(() => {
+  return {
+    '--combined-header-height': `${56 + (packageHeaderHeight.value || 44)}px`,
+  }
+})
 </script>
 
 <template>
-  <div class="docs-page flex-1 flex flex-col">
-    <!-- Visually hidden h1 for accessibility -->
-    <h1 class="sr-only">{{ packageName }} API Documentation</h1>
-
-    <!-- Sticky header - positioned below AppHeader -->
-    <header
-      aria-label="Package documentation header"
-      class="docs-header sticky z-10 border-b border-border"
-    >
-      <div class="absolute inset-0 bg-bg/90 backdrop-blur" />
-      <div class="relative px-4 sm:px-6 lg:px-8 py-4 z-1">
-        <div class="flex items-center justify-between gap-4">
-          <div class="flex items-center gap-3 min-w-0">
-            <NuxtLink
-              v-if="packageName"
-              :to="packageRoute(packageName)"
-              class="font-mono text-lg sm:text-xl font-semibold text-fg hover:text-fg-muted transition-colors truncate"
-            >
-              {{ packageName }}
-            </NuxtLink>
-            <VersionSelector
-              v-if="resolvedVersion && pkg?.versions && pkg?.['dist-tags']"
-              :package-name="packageName"
-              :current-version="resolvedVersion"
-              :versions="pkg.versions"
-              :dist-tags="pkg['dist-tags']"
-              :url-pattern="`/package-docs/${packageName}/v/{version}`"
-            />
-            <span v-else-if="resolvedVersion" class="text-fg-subtle font-mono text-sm shrink-0">
-              {{ resolvedVersion }}
-            </span>
-          </div>
-          <div class="flex items-center gap-3 shrink-0">
-            <span class="text-xs px-2 py-1 rounded badge-green border border-badge-green/50">
-              API Docs
-            </span>
-          </div>
-        </div>
-      </div>
-    </header>
+  <div class="docs-page flex-1 flex flex-col" :style="stickyStyle">
+    <PackageHeader
+      :pkg="pkg"
+      :resolved-version="resolvedVersion"
+      :display-version="pkg?.requestedVersion"
+      :latest-version="latestVersionDetailed"
+      :version-url-pattern="versionUrlPattern"
+      page="docs"
+    />
 
     <div class="flex" dir="ltr">
       <!-- Sidebar TOC -->
@@ -213,13 +200,6 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 </template>
 
 <style>
-/* Layout constants - must match AppHeader height */
-.docs-page {
-  --app-header-height: 57px;
-  --docs-header-height: 57px;
-  --combined-header-height: calc(var(--app-header-height) + var(--docs-header-height));
-}
-
 .docs-header {
   top: var(--app-header-height);
 }
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 92ee712790..42b1d8cbcd 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -14,12 +14,10 @@ import type { IconClass } from '~/types'
 import { assertValidPackageName } from '#shared/utils/npm'
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
-import { isEditableElement } from '~/utils/input'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
 import { detectPublishSecurityDowngradeForVersion } from '~/utils/publish-security'
 import { useInstallSizeDiff } from '~/composables/useInstallSizeDiff'
 import { useViewOnGitProvider } from '~/composables/useViewOnGitProvider'
-import type { RouteLocationRaw } from 'vue-router'
 
 defineOgImageComponent('Package', {
   name: () => packageName.value,
@@ -27,12 +25,10 @@ defineOgImageComponent('Package', {
   primaryColor: '#60a5fa',
 })
 
-const router = useRouter()
-
 const readmeHeader = useTemplateRef('readmeHeader')
 const isReadmeHeaderPinned = shallowRef(false)
 const packageHeaderHeight = usePackageHeaderHeight()
-const readmeStickyTop = computed(() => `${56 + packageHeaderHeight.value}px`)
+const readmeStickyTop = computed(() => `${56 + (packageHeaderHeight.value || 44)}px`)
 
 function isStickyPinned(el: HTMLElement | null): boolean {
   if (!el) return false
@@ -449,18 +445,6 @@ const homepageUrl = computed(() => {
   return homepage
 })
 
-// Docs URL: use our generated API docs
-const docsLink = computed(() => {
-  if (!resolvedVersion.value) return null
-
-  return {
-    name: 'docs' as const,
-    params: {
-      path: [pkg.value!.name, 'v', resolvedVersion.value] satisfies [string, string, string],
-    },
-  }
-})
-
 const fundingUrl = computed(() => {
   let funding = displayVersion.value?.funding
   if (Array.isArray(funding)) funding = funding[0]
@@ -533,6 +517,11 @@ const canonicalUrl = computed(() => {
   return requestedVersion.value ? `${base}/v/${requestedVersion.value}` : base
 })
 
+// URL pattern for version selector - includes file path if present
+const versionUrlPattern = computed(
+  () => `/package/${pkg.value?.name || packageName.value}/v/{version}`,
+)
+
 const dependencyCount = computed(() => getDependencyCount(displayVersion.value))
 
 const numberFormatter = useNumberFormatter()
@@ -552,54 +541,6 @@ useSeoMeta({
   twitterDescription: () => pkg.value?.description ?? '',
 })
 
-const codeLink = computed((): RouteLocationRaw | null => {
-  if (pkg.value == null || resolvedVersion.value == null) {
-    return null
-  }
-  const split = pkg.value.name.split('/')
-  return {
-    name: 'code',
-    params: {
-      org: split.length === 2 ? split[0] : undefined,
-      packageName: split.length === 2 ? split[1]! : split[0]!,
-      version: resolvedVersion.value,
-      filePath: '',
-    },
-  }
-})
-
-const keyboardShortcuts = useKeyboardShortcuts()
-
-onKeyStroke(
-  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, '.') && !isEditableElement(e.target),
-  e => {
-    if (codeLink.value === null) return
-    e.preventDefault()
-
-    navigateTo(codeLink.value)
-  },
-  { dedupe: true },
-)
-
-onKeyStroke(
-  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'd') && !isEditableElement(e.target),
-  e => {
-    if (!docsLink.value) return
-    e.preventDefault()
-    navigateTo(docsLink.value)
-  },
-  { dedupe: true },
-)
-
-onKeyStroke(
-  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'c') && !isEditableElement(e.target),
-  e => {
-    if (!pkg.value) return
-    e.preventDefault()
-    router.push({ name: 'compare', query: { packages: pkg.value.name } })
-  },
-)
-
 const showSkeleton = shallowRef(false)
 </script>
 
@@ -616,7 +557,7 @@ const showSkeleton = shallowRef(false)
       <span class="text-xs">Skeleton</span>
     </ButtonBase>
   </DevOnly>
-  <main class="container flex-1 w-full py-8">
+  <main 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
@@ -635,11 +576,12 @@ const showSkeleton = shallowRef(false)
         (hasServerContentOnly && serverRenderedHtml && (!pkg || readmeData?.defaultValue))
       "
       id="package-article"
+      class="container w-full"
       :class="$style.packagePage"
       v-html="serverRenderedHtml"
     />
 
-    <article v-else-if="pkg" id="package-article" :class="$style.packagePage">
+    <template v-else-if="pkg">
       <PackageHeader
         :pkg="pkg"
         :resolved-version="resolvedVersion"
@@ -647,617 +589,591 @@ const showSkeleton = shallowRef(false)
         :latest-version="latestVersion"
         :provenance-data="provenanceData"
         :provenance-status="provenanceStatus"
-        :is-binary-only="isBinaryOnly"
-        :docs-link="docsLink"
-        :code-link="codeLink"
         :class="$style.areaHeader"
+        page="main"
+        :version-url-pattern="versionUrlPattern"
       />
-
-      <!-- Package details -->
-      <section :class="$style.areaDetails">
-        <div class="mb-4">
-          <!-- Description container with min-height to prevent CLS -->
-          <div class="max-w-2xl">
-            <p v-if="pkgDescription" class="text-fg-muted text-base m-0">
-              <span v-html="pkgDescription" />
-            </p>
-            <p v-else class="text-fg-subtle text-base m-0 italic">
-              {{ $t('package.no_description') }}
-            </p>
-          </div>
-
-          <!-- External links -->
-          <ul
-            class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3 text-sm"
-          >
-            <li v-if="repositoryUrl">
-              <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon">
-                <span v-if="repoRef">
-                  {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
-                </span>
-                <span v-else>{{ $t('package.links.repo') }}</span>
-              </LinkBase>
-            </li>
-            <li v-if="repositoryUrl && repoMeta && starsLink">
-              <LinkBase :to="starsLink" classicon="i-lucide:star">
-                {{ compactNumberFormatter.format(stars) }}
-              </LinkBase>
-            </li>
-            <li v-if="forks && forksLink">
-              <LinkBase :to="forksLink" classicon="i-lucide:git-fork">
-                {{ compactNumberFormatter.format(forks) }}
-              </LinkBase>
-            </li>
-            <li class="basis-full sm:hidden" />
-            <li v-if="homepageUrl">
-              <LinkBase :to="homepageUrl" classicon="i-lucide:link">
-                {{ $t('package.links.homepage') }}
-              </LinkBase>
-            </li>
-            <li v-if="displayVersion?.bugs?.url">
-              <LinkBase :to="displayVersion.bugs.url" classicon="i-lucide:circle-alert">
-                {{ $t('package.links.issues') }}
-              </LinkBase>
-            </li>
-            <li>
-              <LinkBase
-                :to="`https://www.npmjs.com/package/${pkg.name}`"
-                :title="$t('common.view_on.npm')"
-                classicon="i-simple-icons:npm"
-              >
-                npm
-              </LinkBase>
-            </li>
-            <li v-if="jsrInfo?.exists && jsrInfo.url">
-              <LinkBase
-                :to="jsrInfo.url"
-                :title="$t('badges.jsr.title')"
-                classicon="i-simple-icons:jsr"
-              >
-                {{ $t('package.links.jsr') }}
-              </LinkBase>
-            </li>
-            <li v-if="fundingUrl">
-              <LinkBase :to="fundingUrl" classicon="i-lucide:heart">
-                {{ $t('package.links.fund') }}
-              </LinkBase>
-            </li>
-            <!-- Mobile-only: Docs + Code + Compare links -->
-            <li v-if="docsLink && displayVersion" class="sm:hidden">
-              <LinkBase :to="docsLink" classicon="i-lucide:file-text">
-                {{ $t('package.links.docs') }}
-              </LinkBase>
-            </li>
-            <li v-if="resolvedVersion && codeLink" class="sm:hidden">
-              <LinkBase :to="codeLink" classicon="i-lucide:code">
-                {{ $t('package.links.code') }}
-              </LinkBase>
-            </li>
-            <li class="sm:hidden">
-              <LinkBase
-                :to="{ name: 'compare', query: { packages: pkg.name } }"
-                classicon="i-lucide:git-compare"
-              >
-                {{ $t('package.links.compare') }}
-              </LinkBase>
-            </li>
-            <li
-              v-if="
-                displayVersion && latestVersion && displayVersion.version !== latestVersion.version
-              "
-              class="sm:hidden"
+      <article id="package-article" :class="$style.packagePage" class="container w-full">
+        <!-- Package details -->
+        <section :class="$style.areaDetails">
+          <div class="mb-4 pt-4">
+            <!-- Description container with min-height to prevent CLS -->
+            <div class="max-w-2xl">
+              <p v-if="pkgDescription" class="text-fg-muted text-base m-0">
+                <span v-html="pkgDescription" />
+              </p>
+              <p v-else class="text-fg-subtle text-base m-0 italic">
+                {{ $t('package.no_description') }}
+              </p>
+            </div>
+
+            <!-- External links -->
+            <ul
+              class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3 text-sm"
             >
-              <NuxtLink
-                :to="diffRoute(pkg.name, displayVersion.version, latestVersion.version)"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
-                <span class="i-lucide:diff w-4 h-4" aria-hidden="true" />
-                {{ $t('compare.compare_versions') }}
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-
-        <div
-          v-if="deprecationNotice"
-          class="border border-red-700 dark:border-red-400 bg-red-400/10 rounded-lg px-3 py-2 text-base text-red-700 dark:text-red-400"
-        >
-          <h2 class="font-medium mb-2">
-            {{
-              deprecationNotice.type === 'package'
-                ? $t('package.deprecation.package')
-                : $t('package.deprecation.version')
-            }}
-          </h2>
-          <p v-if="deprecationNoticeMessage" class="text-base m-0">
-            <span v-html="deprecationNoticeMessage" />
-          </p>
-          <p v-else class="text-base m-0 italic">
-            {{ $t('package.deprecation.no_reason') }}
-          </p>
-        </div>
-
-        <!-- Stats grid -->
-        <dl
-          class="grid grid-cols-2 sm:grid-cols-7 md:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-b border-border"
-        >
-          <div class="space-y-1 sm:col-span-2">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-              {{ $t('package.stats.license') }}
-            </dt>
-            <dd class="font-mono text-sm text-fg">
-              <LicenseDisplay v-if="pkg.license" :license="pkg.license" />
-              <span v-else>{{ $t('package.license.none') }}</span>
-            </dd>
-          </div>
-
-          <div class="space-y-1 sm:col-span-2">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-              {{ $t('package.stats.deps') }}
-            </dt>
-            <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
-              <span class="flex items-center gap-1">
-                <!-- Direct deps (muted) -->
-                <span class="text-fg-muted">{{ numberFormatter.format(dependencyCount) }}</span>
-
-                <!-- Separator and total transitive deps -->
-                <template v-if="dependencyCount > 0 && dependencyCount !== totalDepsCount">
-                  <span class="text-fg-subtle">/</span>
-
-                  <ClientOnly>
-                    <span
-                      v-if="
-                        vulnTreeStatus === 'pending' ||
-                        (installSizeStatus === 'pending' && !vulnTree)
-                      "
-                      class="inline-flex items-center gap-1 text-fg-subtle"
-                    >
-                      <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
-                    </span>
-                    <span v-else-if="totalDepsCount !== null">{{
-                      numberFormatter.format(totalDepsCount)
-                    }}</span>
-                    <span v-else class="text-fg-subtle">-</span>
-                    <template #fallback>
-                      <span class="text-fg-subtle">-</span>
-                    </template>
-                  </ClientOnly>
-                </template>
-              </span>
-              <ButtonGroup v-if="dependencyCount > 0" class="ms-auto">
+              <li v-if="repositoryUrl">
+                <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon">
+                  <span v-if="repoRef">
+                    {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
+                  </span>
+                  <span v-else>{{ $t('package.links.repo') }}</span>
+                </LinkBase>
+              </li>
+              <li v-if="repositoryUrl && repoMeta && starsLink">
+                <LinkBase :to="starsLink" classicon="i-lucide:star">
+                  {{ compactNumberFormatter.format(stars) }}
+                </LinkBase>
+              </li>
+              <li v-if="forks && forksLink">
+                <LinkBase :to="forksLink" classicon="i-lucide:git-fork">
+                  {{ compactNumberFormatter.format(forks) }}
+                </LinkBase>
+              </li>
+              <li class="basis-full sm:hidden" />
+              <li v-if="homepageUrl">
+                <LinkBase :to="homepageUrl" classicon="i-lucide:link">
+                  {{ $t('package.links.homepage') }}
+                </LinkBase>
+              </li>
+              <li v-if="displayVersion?.bugs?.url">
+                <LinkBase :to="displayVersion.bugs.url" classicon="i-lucide:circle-alert">
+                  {{ $t('package.links.issues') }}
+                </LinkBase>
+              </li>
+              <li>
                 <LinkBase
-                  variant="button-secondary"
-                  size="small"
-                  :to="`https://npmgraph.js.org/?q=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
-                  :title="$t('package.stats.view_dependency_graph')"
-                  classicon="i-lucide:network -rotate-90"
+                  :to="`https://www.npmjs.com/package/${pkg.name}`"
+                  :title="$t('common.view_on.npm')"
+                  classicon="i-simple-icons:npm"
                 >
-                  <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
+                  npm
                 </LinkBase>
-
+              </li>
+              <li v-if="jsrInfo?.exists && jsrInfo.url">
                 <LinkBase
-                  variant="button-secondary"
-                  size="small"
-                  :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
-                  :title="$t('package.stats.inspect_dependency_tree')"
-                  classicon="i-lucide:table"
+                  :to="jsrInfo.url"
+                  :title="$t('badges.jsr.title')"
+                  classicon="i-simple-icons:jsr"
                 >
-                  <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
+                  {{ $t('package.links.jsr') }}
+                </LinkBase>
+              </li>
+              <li v-if="fundingUrl">
+                <LinkBase :to="fundingUrl" classicon="i-lucide:heart">
+                  {{ $t('package.links.fund') }}
                 </LinkBase>
-              </ButtonGroup>
-            </dd>
+              </li>
+            </ul>
+            <PackageMetricsBadges
+              v-if="resolvedVersion"
+              :package-name="packageName"
+              :version="resolvedVersion"
+              :is-binary="isBinaryOnly"
+              class="self-baseline mt-4"
+            />
           </div>
 
-          <div class="space-y-1 sm:col-span-3">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
-              {{ $t('package.stats.install_size') }}
-              <TooltipApp v-if="sizeTooltip" :text="sizeTooltip" interactive>
-                <span
-                  tabindex="0"
-                  class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-subtle cursor-help focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
-                >
-                  <span class="i-lucide:info w-3 h-3" aria-hidden="true" />
+          <div
+            v-if="deprecationNotice"
+            class="border border-red-700 dark:border-red-400 bg-red-400/10 rounded-lg px-3 py-2 text-base text-red-700 dark:text-red-400"
+          >
+            <h2 class="font-medium mb-2">
+              {{
+                deprecationNotice.type === 'package'
+                  ? $t('package.deprecation.package')
+                  : $t('package.deprecation.version')
+              }}
+            </h2>
+            <p v-if="deprecationNoticeMessage" class="text-base m-0">
+              <span v-html="deprecationNoticeMessage" />
+            </p>
+            <p v-else class="text-base m-0 italic">
+              {{ $t('package.deprecation.no_reason') }}
+            </p>
+          </div>
+
+          <!-- Stats grid -->
+          <dl
+            class="grid grid-cols-2 sm:grid-cols-7 md:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-b border-border"
+          >
+            <div class="space-y-1 sm:col-span-2">
+              <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+                {{ $t('package.stats.license') }}
+              </dt>
+              <dd class="font-mono text-sm text-fg">
+                <LicenseDisplay v-if="pkg.license" :license="pkg.license" />
+                <span v-else>{{ $t('package.license.none') }}</span>
+              </dd>
+            </div>
+
+            <div class="space-y-1 sm:col-span-2">
+              <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+                {{ $t('package.stats.deps') }}
+              </dt>
+              <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
+                <span class="flex items-center gap-1">
+                  <!-- Direct deps (muted) -->
+                  <span class="text-fg-muted">{{ numberFormatter.format(dependencyCount) }}</span>
+
+                  <!-- Separator and total transitive deps -->
+                  <template v-if="dependencyCount > 0 && dependencyCount !== totalDepsCount">
+                    <span class="text-fg-subtle">/</span>
+
+                    <ClientOnly>
+                      <span
+                        v-if="
+                          vulnTreeStatus === 'pending' ||
+                          (installSizeStatus === 'pending' && !vulnTree)
+                        "
+                        class="inline-flex items-center gap-1 text-fg-subtle"
+                      >
+                        <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
+                      </span>
+                      <span v-else-if="totalDepsCount !== null">{{
+                        numberFormatter.format(totalDepsCount)
+                      }}</span>
+                      <span v-else class="text-fg-subtle">-</span>
+                      <template #fallback>
+                        <span class="text-fg-subtle">-</span>
+                      </template>
+                    </ClientOnly>
+                  </template>
                 </span>
-              </TooltipApp>
-            </dt>
-            <dd class="font-mono text-sm text-fg">
-              <!-- Package size (greyed out) -->
-              <span class="text-fg-muted" dir="ltr">
-                <span v-if="displayVersion?.dist?.unpackedSize">
-                  {{ bytesFormatter.format(displayVersion.dist.unpackedSize) }}
+                <ButtonGroup v-if="dependencyCount > 0" class="ms-auto">
+                  <LinkBase
+                    variant="button-secondary"
+                    size="small"
+                    :to="`https://npmgraph.js.org/?q=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
+                    :title="$t('package.stats.view_dependency_graph')"
+                    classicon="i-lucide:network -rotate-90"
+                  >
+                    <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
+                  </LinkBase>
+
+                  <LinkBase
+                    variant="button-secondary"
+                    size="small"
+                    :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
+                    :title="$t('package.stats.inspect_dependency_tree')"
+                    classicon="i-lucide:table"
+                  >
+                    <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
+                  </LinkBase>
+                </ButtonGroup>
+              </dd>
+            </div>
+
+            <div class="space-y-1 sm:col-span-3">
+              <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
+                {{ $t('package.stats.install_size') }}
+                <TooltipApp v-if="sizeTooltip" :text="sizeTooltip" interactive>
+                  <span
+                    tabindex="0"
+                    class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-subtle cursor-help focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
+                  >
+                    <span class="i-lucide:info w-3 h-3" aria-hidden="true" />
+                  </span>
+                </TooltipApp>
+              </dt>
+              <dd class="font-mono text-sm text-fg">
+                <!-- Package size (greyed out) -->
+                <span class="text-fg-muted" dir="ltr">
+                  <span v-if="displayVersion?.dist?.unpackedSize">
+                    {{ bytesFormatter.format(displayVersion.dist.unpackedSize) }}
+                  </span>
+                  <span v-else>-</span>
                 </span>
-                <span v-else>-</span>
-              </span>
-
-              <!-- Separator and install size -->
-              <template v-if="displayVersion?.dist?.unpackedSize !== installSize?.totalSize">
-                <span class="text-fg-subtle mx-1">/</span>
 
+                <!-- Separator and install size -->
+                <template v-if="displayVersion?.dist?.unpackedSize !== installSize?.totalSize">
+                  <span class="text-fg-subtle mx-1">/</span>
+
+                  <span
+                    v-if="installSizeStatus === 'pending'"
+                    class="inline-flex items-center gap-1 text-fg-subtle"
+                  >
+                    <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
+                  </span>
+                  <span v-else-if="installSize?.totalSize" dir="ltr">
+                    {{ bytesFormatter.format(installSize.totalSize) }}
+                  </span>
+                  <span v-else class="text-fg-subtle">-</span>
+                </template>
+              </dd>
+            </div>
+
+            <!-- Vulnerabilities count -->
+            <div class="space-y-1 sm:col-span-2">
+              <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+                {{ $t('package.stats.vulns') }}
+              </dt>
+              <dd class="font-mono text-sm text-fg">
                 <span
-                  v-if="installSizeStatus === 'pending'"
+                  v-if="vulnTreeStatus === 'pending' || vulnTreeStatus === 'idle'"
                   class="inline-flex items-center gap-1 text-fg-subtle"
                 >
                   <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
                 </span>
-                <span v-else-if="installSize?.totalSize" dir="ltr">
-                  {{ bytesFormatter.format(installSize.totalSize) }}
+                <span v-else-if="vulnTreeStatus === 'success'">
+                  <span v-if="hasVulnerabilities" class="text-amber-700 dark:text-amber-500">
+                    {{ numberFormatter.format(vulnCount) }}
+                  </span>
+                  <span v-else class="inline-flex items-center gap-1 text-fg-muted">
+                    <span class="i-lucide:check w-3 h-3" aria-hidden="true" />
+                    {{ numberFormatter.format(0) }}
+                  </span>
                 </span>
                 <span v-else class="text-fg-subtle">-</span>
-              </template>
-            </dd>
-          </div>
+              </dd>
+            </div>
 
-          <!-- Vulnerabilities count -->
-          <div class="space-y-1 sm:col-span-2">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-              {{ $t('package.stats.vulns') }}
-            </dt>
-            <dd class="font-mono text-sm text-fg">
-              <span
-                v-if="vulnTreeStatus === 'pending' || vulnTreeStatus === 'idle'"
-                class="inline-flex items-center gap-1 text-fg-subtle"
+            <div
+              v-if="resolvedVersion && pkg.time?.[resolvedVersion]"
+              class="space-y-1 sm:col-span-2"
+            >
+              <dt
+                class="text-xs text-fg-subtle uppercase tracking-wider"
+                :title="
+                  $t('package.stats.published_tooltip', {
+                    package: pkg.name,
+                    version: resolvedVersion,
+                  })
+                "
               >
-                <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
-              </span>
-              <span v-else-if="vulnTreeStatus === 'success'">
-                <span v-if="hasVulnerabilities" class="text-amber-700 dark:text-amber-500">
-                  {{ numberFormatter.format(vulnCount) }}
-                </span>
-                <span v-else class="inline-flex items-center gap-1 text-fg-muted">
-                  <span class="i-lucide:check w-3 h-3" aria-hidden="true" />
-                  {{ numberFormatter.format(0) }}
-                </span>
-              </span>
-              <span v-else class="text-fg-subtle">-</span>
-            </dd>
+                {{ $t('package.stats.published') }}
+              </dt>
+              <dd class="font-mono text-sm text-fg">
+                <DateTime :datetime="pkg.time[resolvedVersion]!" date-style="medium" />
+              </dd>
+            </div>
+          </dl>
+
+          <!-- Skills Modal -->
+          <ClientOnly>
+            <PackageSkillsModal
+              :skills="skillsData?.skills ?? []"
+              :package-name="pkg.name"
+              :version="resolvedVersion || undefined"
+            />
+          </ClientOnly>
+        </section>
+
+        <!-- Binary-only packages: Show only execute command (no install) -->
+        <section v-if="isBinaryOnly" class="scroll-mt-20" :class="$style.areaInstall">
+          <div class="flex flex-wrap items-center justify-between mb-3">
+            <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
+              {{ $t('package.run.title') }}
+            </h2>
+            <!-- Package manager dropdown -->
+            <PackageManagerSelect />
+          </div>
+          <div>
+            <TerminalExecute
+              :package-name="pkg.name"
+              :jsr-info="jsrInfo"
+              :is-create-package="isCreatePkg"
+            />
           </div>
+        </section>
 
-          <div
-            v-if="resolvedVersion && pkg.time?.[resolvedVersion]"
-            class="space-y-1 sm:col-span-2"
-          >
-            <dt
-              class="text-xs text-fg-subtle uppercase tracking-wider"
-              :title="
-                $t('package.stats.published_tooltip', {
-                  package: pkg.name,
-                  version: resolvedVersion,
-                })
-              "
+        <!-- Regular packages: Install command with optional run command -->
+        <section v-else id="get-started" class="scroll-mt-20" :class="$style.areaInstall">
+          <div class="flex flex-wrap items-center justify-between mb-3">
+            <h2
+              id="get-started-heading"
+              class="group text-xs text-fg-subtle uppercase tracking-wider"
             >
-              {{ $t('package.stats.published') }}
-            </dt>
-            <dd class="font-mono text-sm text-fg">
-              <DateTime :datetime="pkg.time[resolvedVersion]!" date-style="medium" />
-            </dd>
-          </div>
-        </dl>
-
-        <!-- Skills Modal -->
-        <ClientOnly>
-          <PackageSkillsModal
-            :skills="skillsData?.skills ?? []"
-            :package-name="pkg.name"
-            :version="resolvedVersion || undefined"
-          />
-        </ClientOnly>
-      </section>
-
-      <!-- Binary-only packages: Show only execute command (no install) -->
-      <section v-if="isBinaryOnly" class="scroll-mt-20" :class="$style.areaInstall">
-        <div class="flex flex-wrap items-center justify-between mb-3">
-          <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ $t('package.run.title') }}
-          </h2>
-          <!-- Package manager dropdown -->
-          <PackageManagerSelect />
-        </div>
-        <div>
-          <TerminalExecute
-            :package-name="pkg.name"
-            :jsr-info="jsrInfo"
-            :is-create-package="isCreatePkg"
-          />
-        </div>
-      </section>
-
-      <!-- Regular packages: Install command with optional run command -->
-      <section v-else id="get-started" class="scroll-mt-20" :class="$style.areaInstall">
-        <div class="flex flex-wrap items-center justify-between mb-3">
-          <h2
-            id="get-started-heading"
-            class="group text-xs text-fg-subtle uppercase tracking-wider"
-          >
-            <LinkBase to="#get-started">
-              {{ $t('package.get_started.title') }}
-            </LinkBase>
-          </h2>
-          <!-- Package manager dropdown -->
-          <PackageManagerSelect />
-        </div>
-        <div>
-          <div
-            v-if="publishSecurityDowngrade"
-            role="alert"
-            class="mb-4 rounded-lg border border-amber-600/40 bg-amber-500/10 px-4 py-3 text-amber-700 dark:text-amber-400"
-          >
-            <h3 class="m-0 flex items-center gap-2 font-mono text-sm font-medium">
-              <span class="i-lucide:circle-alert w-4 h-4 shrink-0" aria-hidden="true" />
-              {{ $t('package.security_downgrade.title') }}
-            </h3>
-            <p class="mt-2 mb-0 text-sm">
-              <i18n-t
-                v-if="
-                  publishSecurityDowngrade.downgradedTrustLevel === 'none' &&
-                  publishSecurityDowngrade.trustedTrustLevel === 'provenance'
-                "
-                keypath="package.security_downgrade.description_to_none_provenance"
-                tag="span"
-                scope="global"
-              >
-                <template #provenance>
-                  <a
-                    href="https://docs.npmjs.com/generating-provenance-statements"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                    >{{ $t('package.security_downgrade.provenance_link_text')
-                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
-                  /></a>
-                </template>
-              </i18n-t>
-              <i18n-t
-                v-else-if="
-                  publishSecurityDowngrade.downgradedTrustLevel === 'none' &&
-                  publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
-                "
-                keypath="package.security_downgrade.description_to_none_trustedPublisher"
-                tag="span"
-                scope="global"
-              >
-                <template #trustedPublishing>
-                  <a
-                    href="https://docs.npmjs.com/trusted-publishers"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                    >{{ $t('package.security_downgrade.trusted_publishing_link_text')
-                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
-                  /></a>
-                </template>
-              </i18n-t>
-              <i18n-t
-                v-else-if="
-                  publishSecurityDowngrade.downgradedTrustLevel === 'provenance' &&
-                  publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
-                "
-                keypath="package.security_downgrade.description_to_provenance_trustedPublisher"
-                tag="span"
-                scope="global"
-              >
-                <template #provenance>
-                  <a
-                    href="https://docs.npmjs.com/generating-provenance-statements"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                    >{{ $t('package.security_downgrade.provenance_link_text')
-                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
-                  /></a>
-                </template>
-                <template #trustedPublishing>
-                  <a
-                    href="https://docs.npmjs.com/trusted-publishers"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                    >{{ $t('package.security_downgrade.trusted_publishing_link_text')
-                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
-                  /></a>
-                </template>
-              </i18n-t>
-              {{ ' ' }}
-              <template v-if="downgradeFallbackInstallText">
-                {{ downgradeFallbackInstallText }}
-              </template>
-            </p>
+              <LinkBase to="#get-started">
+                {{ $t('package.get_started.title') }}
+              </LinkBase>
+            </h2>
+            <!-- Package manager dropdown -->
+            <PackageManagerSelect />
           </div>
-          <TerminalInstall
-            :package-name="pkg.name"
-            :requested-version="resolvedVersion"
-            :install-version-override="installVersionOverride"
-            :jsr-info="jsrInfo"
-            :dev-dependency-suggestion="packageAnalysis?.devDependencySuggestion"
-            :types-package-name="typesPackageName"
-            :executable-info="executableInfo"
-            :create-package-info="createPackageInfo"
-          />
-        </div>
-      </section>
-
-      <div class="space-y-6" :class="$style.areaVulns">
-        <!-- Bad package warning -->
-        <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
-        <!-- Size / dependency increase notice -->
-        <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
-        <!-- Vulnerability scan -->
-        <ClientOnly>
-          <PackageVulnerabilityTree
-            v-if="resolvedVersion"
-            :package-name="pkg.name"
-            :version="resolvedVersion"
-          />
-          <PackageDeprecatedTree
-            v-if="resolvedVersion"
-            :package-name="pkg.name"
-            :version="resolvedVersion"
-            class="mt-3"
-          />
-        </ClientOnly>
-      </div>
-
-      <!-- README -->
-      <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
-        <div
-          ref="readmeHeader"
-          class="flex sticky z-10 flex-wrap items-center justify-between mb-3 py-2 -mx-1 px-2 transition-shadow duration-200"
-          :class="{ 'bg-bg border-border border-b': isReadmeHeaderPinned }"
-          :style="{ top: readmeStickyTop }"
-        >
-          <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
-            <LinkBase to="#readme">
-              {{ $t('package.readme.title') }}
-            </LinkBase>
-          </h2>
-          <div class="flex gap-2">
-            <!-- Copy readme as Markdown button -->
-            <TooltipApp
-              v-if="readmeData?.mdExists"
-              :text="$t('package.readme.copy_as_markdown')"
-              position="bottom"
+          <div>
+            <div
+              v-if="publishSecurityDowngrade"
+              role="alert"
+              class="mb-4 rounded-lg border border-amber-600/40 bg-amber-500/10 px-4 py-3 text-amber-700 dark:text-amber-400"
             >
-              <ButtonBase
-                @mouseenter="prefetchReadmeMarkdown"
-                @focus="prefetchReadmeMarkdown"
-                @click="copyReadmeHandler()"
-                :aria-pressed="copiedReadme"
-                :aria-label="
-                  copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
-                "
-                :classicon="copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'"
-              >
-                {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
-              </ButtonBase>
-            </TooltipApp>
-            <ReadmeTocDropdown
-              v-if="readmeData?.toc && readmeData.toc.length > 1"
-              :toc="readmeData.toc"
-              :active-id="activeTocId"
+              <h3 class="m-0 flex items-center gap-2 font-mono text-sm font-medium">
+                <span class="i-lucide:circle-alert w-4 h-4 shrink-0" aria-hidden="true" />
+                {{ $t('package.security_downgrade.title') }}
+              </h3>
+              <p class="mt-2 mb-0 text-sm">
+                <i18n-t
+                  v-if="
+                    publishSecurityDowngrade.downgradedTrustLevel === 'none' &&
+                    publishSecurityDowngrade.trustedTrustLevel === 'provenance'
+                  "
+                  keypath="package.security_downgrade.description_to_none_provenance"
+                  tag="span"
+                  scope="global"
+                >
+                  <template #provenance>
+                    <a
+                      href="https://docs.npmjs.com/generating-provenance-statements"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
+                      >{{ $t('package.security_downgrade.provenance_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                    /></a>
+                  </template>
+                </i18n-t>
+                <i18n-t
+                  v-else-if="
+                    publishSecurityDowngrade.downgradedTrustLevel === 'none' &&
+                    publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
+                  "
+                  keypath="package.security_downgrade.description_to_none_trustedPublisher"
+                  tag="span"
+                  scope="global"
+                >
+                  <template #trustedPublishing>
+                    <a
+                      href="https://docs.npmjs.com/trusted-publishers"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
+                      >{{ $t('package.security_downgrade.trusted_publishing_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                    /></a>
+                  </template>
+                </i18n-t>
+                <i18n-t
+                  v-else-if="
+                    publishSecurityDowngrade.downgradedTrustLevel === 'provenance' &&
+                    publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
+                  "
+                  keypath="package.security_downgrade.description_to_provenance_trustedPublisher"
+                  tag="span"
+                  scope="global"
+                >
+                  <template #provenance>
+                    <a
+                      href="https://docs.npmjs.com/generating-provenance-statements"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
+                      >{{ $t('package.security_downgrade.provenance_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                    /></a>
+                  </template>
+                  <template #trustedPublishing>
+                    <a
+                      href="https://docs.npmjs.com/trusted-publishers"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
+                      >{{ $t('package.security_downgrade.trusted_publishing_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                    /></a>
+                  </template>
+                </i18n-t>
+                {{ ' ' }}
+                <template v-if="downgradeFallbackInstallText">
+                  {{ downgradeFallbackInstallText }}
+                </template>
+              </p>
+            </div>
+            <TerminalInstall
+              :package-name="pkg.name"
+              :requested-version="resolvedVersion"
+              :install-version-override="installVersionOverride"
+              :jsr-info="jsrInfo"
+              :dev-dependency-suggestion="packageAnalysis?.devDependencySuggestion"
+              :types-package-name="typesPackageName"
+              :executable-info="executableInfo"
+              :create-package-info="createPackageInfo"
             />
           </div>
-        </div>
+        </section>
 
-        <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
-        <Readme v-if="readmeData?.html" :html="readmeData.html" />
-        <p v-else class="text-fg-muted italic">
-          {{ $t('package.readme.no_readme') }}
-          <a
-            v-if="repositoryUrl"
-            :href="repositoryUrl"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link text-fg underline underline-offset-4 decoration-fg-subtle hover:(decoration-fg text-fg) transition-colors duration-200"
-          >
-            {{ viewOnGitProvider }}</a
-          >
-        </p>
+        <div class="space-y-6" :class="$style.areaVulns">
+          <!-- Bad package warning -->
+          <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
+          <!-- Size / dependency increase notice -->
+          <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
+          <!-- Vulnerability scan -->
+          <ClientOnly>
+            <PackageVulnerabilityTree
+              v-if="resolvedVersion"
+              :package-name="pkg.name"
+              :version="resolvedVersion"
+            />
+            <PackageDeprecatedTree
+              v-if="resolvedVersion"
+              :package-name="pkg.name"
+              :version="resolvedVersion"
+              class="mt-3"
+            />
+          </ClientOnly>
+        </div>
 
-        <section
-          v-if="hasProvenance(displayVersion) && isMounted"
-          id="provenance"
-          class="scroll-mt-20"
-        >
+        <!-- README -->
+        <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
           <div
-            v-if="provenanceStatus === 'pending'"
-            class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
+            ref="readmeHeader"
+            class="flex [@media(min-height:800px)]:sticky z-10 flex-wrap items-center justify-between mb-3 py-2 -mx-1 px-2 transition-shadow duration-200"
+            :class="{ 'bg-bg border-border border-b': isReadmeHeaderPinned }"
+            :style="{ top: readmeStickyTop }"
           >
-            <span class="i-svg-spinners:ring-resize w-4 h-4" aria-hidden="true" />
-            <span>{{ $t('package.provenance_section.title') }}…</span>
+            <h2 id="readme-heading" class="group text-fg-subtle uppercase font-medium">
+              <LinkBase to="#readme">
+                {{ $t('package.readme.title') }}
+              </LinkBase>
+            </h2>
+            <div class="flex gap-2">
+              <!-- Copy readme as Markdown button -->
+              <TooltipApp
+                v-if="readmeData?.mdExists"
+                :text="$t('package.readme.copy_as_markdown')"
+                position="bottom"
+              >
+                <ButtonBase
+                  @mouseenter="prefetchReadmeMarkdown"
+                  @focus="prefetchReadmeMarkdown"
+                  @click="copyReadmeHandler()"
+                  :aria-pressed="copiedReadme"
+                  :aria-label="
+                    copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
+                  "
+                  :classicon="copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'"
+                >
+                  {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
+                </ButtonBase>
+              </TooltipApp>
+              <ReadmeTocDropdown
+                v-if="readmeData?.toc && readmeData.toc.length > 1"
+                :toc="readmeData.toc"
+                :active-id="activeTocId"
+              />
+            </div>
           </div>
-          <PackageProvenanceSection
-            v-else-if="provenanceData"
-            :details="provenanceData"
-            class="mt-8"
-          />
-          <!-- Error state: provenance exists but details failed to load -->
-          <div
-            v-else-if="provenanceStatus === 'error'"
-            class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
+
+          <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
+          <Readme v-if="readmeData?.html" :html="readmeData.html" />
+          <p v-else class="text-fg-muted italic">
+            {{ $t('package.readme.no_readme') }}
+            <a
+              v-if="repositoryUrl"
+              :href="repositoryUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="link text-fg underline underline-offset-4 decoration-fg-subtle hover:(decoration-fg text-fg) transition-colors duration-200"
+            >
+              {{ viewOnGitProvider }}</a
+            >
+          </p>
+
+          <section
+            v-if="hasProvenance(displayVersion) && isMounted"
+            id="provenance"
+            class="scroll-mt-20"
           >
-            <span class="i-lucide:circle-alert w-4 h-4" aria-hidden="true" />
-            <span>{{ $t('package.provenance_section.error_loading') }}</span>
-          </div>
+            <div
+              v-if="provenanceStatus === 'pending'"
+              class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
+            >
+              <span class="i-svg-spinners:ring-resize w-4 h-4" aria-hidden="true" />
+              <span>{{ $t('package.provenance_section.title') }}…</span>
+            </div>
+            <PackageProvenanceSection
+              v-else-if="provenanceData"
+              :details="provenanceData"
+              class="mt-8"
+            />
+            <!-- Error state: provenance exists but details failed to load -->
+            <div
+              v-else-if="provenanceStatus === 'error'"
+              class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
+            >
+              <span class="i-lucide:circle-alert w-4 h-4" aria-hidden="true" />
+              <span>{{ $t('package.provenance_section.error_loading') }}</span>
+            </div>
+          </section>
         </section>
-      </section>
 
-      <PackageSidebar :class="$style.areaSidebar">
-        <div class="flex flex-col gap-4 sm:gap-6 xl:(pt-2)">
-          <!-- Team access controls (for scoped packages when connected) -->
-          <ClientOnly>
-            <PackageAccessControls :package-name="pkg.name" />
-            <template #fallback>
-              <!-- Show skeleton loaders when SSR or access controls are loading -->
-            </template>
-          </ClientOnly>
+        <PackageSidebar :class="$style.areaSidebar">
+          <div class="flex flex-col gap-4 sm:gap-6 xl:pt-4">
+            <!-- Team access controls (for scoped packages when connected) -->
+            <ClientOnly>
+              <PackageAccessControls :package-name="pkg.name" />
+              <template #fallback>
+                <!-- Show skeleton loaders when SSR or access controls are loading -->
+              </template>
+            </ClientOnly>
+
+            <!-- Agent Skills -->
+            <ClientOnly>
+              <PackageSkillsCard
+                v-if="skillsData?.skills?.length"
+                :skills="skillsData.skills"
+                :package-name="pkg.name"
+                :version="resolvedVersion || undefined"
+              />
+              <template #fallback>
+                <!-- Show skeleton loaders when SSR or access controls are loading -->
+              </template>
+            </ClientOnly>
 
-          <!-- Agent Skills -->
-          <ClientOnly>
-            <PackageSkillsCard
-              v-if="skillsData?.skills?.length"
-              :skills="skillsData.skills"
+            <!-- Download stats -->
+            <PackageWeeklyDownloadStats
+              :packageName
+              :createdIso="pkg?.time?.created ?? null"
+              :repoRef="repoRef"
+            />
+
+            <!-- Playground links -->
+            <PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
+
+            <PackageCompatibility :engines="displayVersion?.engines" />
+
+            <!-- Versions (grouped by release channel) -->
+            <PackageVersions
+              v-if="pkg.versions && Object.keys(pkg.versions).length > 0"
               :package-name="pkg.name"
-              :version="resolvedVersion || undefined"
+              :versions="pkg.versions"
+              :dist-tags="pkg['dist-tags'] ?? {}"
+              :time="pkg.time"
+              :selected-version="resolvedVersion ?? pkg['dist-tags']?.['latest']"
             />
-            <template #fallback>
-              <!-- Show skeleton loaders when SSR or access controls are loading -->
-            </template>
-          </ClientOnly>
 
-          <!-- Download stats -->
-          <PackageWeeklyDownloadStats
-            :packageName
-            :createdIso="pkg?.time?.created ?? null"
-            :repoRef="repoRef"
-          />
-
-          <!-- Playground links -->
-          <PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
-
-          <PackageCompatibility :engines="displayVersion?.engines" />
-
-          <!-- Versions (grouped by release channel) -->
-          <PackageVersions
-            v-if="pkg.versions && Object.keys(pkg.versions).length > 0"
-            :package-name="pkg.name"
-            :versions="pkg.versions"
-            :dist-tags="pkg['dist-tags'] ?? {}"
-            :time="pkg.time"
-            :selected-version="resolvedVersion ?? pkg['dist-tags']?.['latest']"
-          />
-
-          <!-- Install Scripts Warning -->
-          <PackageInstallScripts
-            v-if="displayVersion?.installScripts"
-            :package-name="pkg.name"
-            :version="displayVersion.version"
-            :install-scripts="displayVersion.installScripts"
-          />
-
-          <!-- Dependencies -->
-          <PackageDependencies
-            v-if="hasDependencies && resolvedVersion && displayVersion"
-            :package-name="pkg.name"
-            :version="resolvedVersion"
-            :dependencies="displayVersion.dependencies"
-            :peer-dependencies="displayVersion.peerDependencies"
-            :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
-            :optional-dependencies="displayVersion.optionalDependencies"
-          />
-
-          <!-- Keywords -->
-          <PackageKeywords :keywords="displayVersion?.keywords" />
-
-          <!-- Maintainers (with admin actions when connected) -->
-          <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
-        </div>
-      </PackageSidebar>
-    </article>
+            <!-- Install Scripts Warning -->
+            <PackageInstallScripts
+              v-if="displayVersion?.installScripts"
+              :package-name="pkg.name"
+              :version="displayVersion.version"
+              :install-scripts="displayVersion.installScripts"
+            />
+
+            <!-- Dependencies -->
+            <PackageDependencies
+              v-if="hasDependencies && resolvedVersion && displayVersion"
+              :package-name="pkg.name"
+              :version="resolvedVersion"
+              :dependencies="displayVersion.dependencies"
+              :peer-dependencies="displayVersion.peerDependencies"
+              :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
+              :optional-dependencies="displayVersion.optionalDependencies"
+            />
+
+            <!-- Keywords -->
+            <PackageKeywords :keywords="displayVersion?.keywords" />
+
+            <!-- Maintainers (with admin actions when connected) -->
+            <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
+          </div>
+        </PackageSidebar>
+      </article>
+    </template>
 
     <!-- Error state -->
     <div
       v-else-if="status === 'error'"
       role="alert"
-      class="flex flex-col items-center py-20 text-center"
+      class="flex flex-col items-center py-20 text-center container w-full"
     >
       <h1 class="font-mono text-2xl font-medium mb-4">
         {{ $t('package.not_found') }}
@@ -1278,12 +1194,10 @@ const showSkeleton = shallowRef(false)
   gap: 2rem;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  max-width: 100%;
 
   /* Mobile: single column, sidebar above readme */
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
-    'header'
     'details'
     'install'
     'vulns'
@@ -1291,12 +1205,11 @@ const showSkeleton = shallowRef(false)
     'readme';
 }
 
-/* Tablet/medium: header/install/vulns full width, readme+sidebar side by side */
+/* Tablet/medium: install/vulns full width, readme+sidebar side by side */
 @media (min-width: 1024px) {
   .packagePage {
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
-      'header  header'
       'details details'
       'install install'
       'vulns   vulns'
@@ -1310,7 +1223,6 @@ const showSkeleton = shallowRef(false)
   .packagePage {
     grid-template-columns: 1fr 20rem;
     grid-template-areas:
-      'header  sidebar'
       'details sidebar'
       'install sidebar'
       'vulns   sidebar'
@@ -1324,10 +1236,6 @@ const showSkeleton = shallowRef(false)
   min-width: 0;
 }
 
-.areaHeader {
-  grid-area: header;
-}
-
 .areaDetails {
   grid-area: details;
 }
diff --git a/app/utils/router.ts b/app/utils/router.ts
index 0e7362a8fa..0c22d92860 100644
--- a/app/utils/router.ts
+++ b/app/utils/router.ts
@@ -1,6 +1,10 @@
 import type { RouteLocationRaw } from 'vue-router'
 
-export function packageRoute(packageName: string, version?: string | null): RouteLocationRaw {
+export function packageRoute(
+  packageName: string,
+  version?: string | null,
+  hash?: string,
+): RouteLocationRaw {
   const [org, name = ''] = packageName.startsWith('@') ? packageName.split('/') : ['', packageName]
 
   if (version) {
@@ -12,6 +16,7 @@ export function packageRoute(packageName: string, version?: string | null): Rout
         // remove spaces to be correctly resolved by router
         version: version.replace(/\s+/g, ''),
       },
+      hash,
     }
   }
 
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
index f29b3137d6..1e34d310d0 100644
--- a/i18n/locales/ar.json
+++ b/i18n/locales/ar.json
@@ -149,12 +149,9 @@
     "not_found": "لم يتم العثور على الحزمة",
     "not_found_message": "تعذّر العثور على الحزمة.",
     "no_description": "لا يوجد وصف",
-    "not_latest": "(ليست الأحدث)",
     "verified_provenance": "مصدر موثّق",
-    "view_permalink": "عرض الرابط الدائم لهذا الإصدار",
     "navigation": "تصفح الحزمة",
     "copy_name": "نسخ اسم الحزمة",
-    "copy_version": "نسخ إصدار الحزمة",
     "deprecation": {
       "package": "تم إهمال هذه الحزمة.",
       "version": "تم إهمال هذا الإصدار.",
diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
index e0d7893f73..1341675d91 100644
--- a/i18n/locales/az-AZ.json
+++ b/i18n/locales/az-AZ.json
@@ -216,12 +216,9 @@
     "not_found": "Paket Tapılmadı",
     "not_found_message": "Paket tapıla bilmədi.",
     "no_description": "Təsvir verilməyib",
-    "not_latest": "(son deyil)",
     "verified_provenance": "Təsdiqlənmiş mənşə",
-    "view_permalink": "Bu versiya üçün daimi keçidə bax",
     "navigation": "Paket",
     "copy_name": "Paket adını kopyala",
-    "copy_version": "Paket versiyasını kopyala",
     "deprecation": {
       "package": "Bu paket köhnəlmişdir.",
       "version": "Bu versiya köhnəlmişdir.",
@@ -777,8 +774,7 @@
       "preview": "önbaxış",
       "code": "kod"
     },
-    "file_path": "Fayl yolu",
-    "scroll_to_top": "Yuxarı qayıt"
+    "file_path": "Fayl yolu"
   },
   "badges": {
     "provenance": {
@@ -1142,11 +1138,11 @@
         "title": "Trendləri Müqayisə Et"
       }
     },
-    "file_too_large": "Fayl müqayisə üçün çox böyükdür",
-    "file_size_warning": "{size} müqayisə üçün 250KB limitini keçir",
     "file_changes": "Fayl Dəyişiklikləri",
     "files_count": "{count} fayl",
     "lines_hidden": "{count} sətir gizlədilib",
+    "file_too_large": "Fayl müqayisə üçün çox böyükdür",
+    "file_size_warning": "{size} müqayisə üçün 250KB limitini keçir",
     "compare_versions": "fərq",
     "compare_versions_title": "Versiyaları müqayisə et",
     "summary": "Xülasə",
diff --git a/i18n/locales/bg-BG.json b/i18n/locales/bg-BG.json
index c2865f990f..08738ef1b4 100644
--- a/i18n/locales/bg-BG.json
+++ b/i18n/locales/bg-BG.json
@@ -179,12 +179,9 @@
     "not_found": "Пакетът не е намерен",
     "not_found_message": "Пакетът не може да бъде намерен.",
     "no_description": "Няма предоставено описание",
-    "not_latest": "(не е последна)",
     "verified_provenance": "Потвърден произход",
-    "view_permalink": "Преглед на постоянна връзка за тази версия",
     "navigation": "Пакет",
     "copy_name": "Копиране на името на пакета",
-    "copy_version": "Копиране на версията на пакета",
     "deprecation": {
       "package": "Този пакет е остарял.",
       "version": "Тази версия е остаряла.",
@@ -738,8 +735,7 @@
       "preview": "преглед",
       "code": "код"
     },
-    "file_path": "Път към файл",
-    "scroll_to_top": "Към началото"
+    "file_path": "Път към файл"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
index 1700971fb7..3888c49dee 100644
--- a/i18n/locales/bn-IN.json
+++ b/i18n/locales/bn-IN.json
@@ -116,9 +116,7 @@
     "not_found": "প্যাকেজ পাওয়া যায়নি",
     "not_found_message": "প্যাকেজ পাওয়া যায়নি।",
     "no_description": "কোনো বর্ণনা দেওয়া হয়নি",
-    "not_latest": "(সর্বশেষ নয়)",
     "verified_provenance": "যাচাইকৃত প্রোভেন্স",
-    "view_permalink": "এই ভার্সনের পার্মালিংক দেখুন",
     "navigation": "প্যাকেজ",
     "copy_name": "প্যাকেজের নাম কপি করুন",
     "deprecation": {
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index 59aae4e8d7..040004c767 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -226,12 +226,9 @@
     "not_found": "Balíček nenalezen",
     "not_found_message": "Balíček nebyl nalezen.",
     "no_description": "Není k dispozici žádný popis",
-    "not_latest": "(není nejnovější)",
     "verified_provenance": "Ověřený původ",
-    "view_permalink": "Zobrazit trvalý odkaz na tuto verzi",
     "navigation": "Navigace balíčku",
     "copy_name": "Zkopírovat název balíčku",
-    "copy_version": "Zkopírovat verzi balíčku",
     "deprecation": {
       "package": "Tento balíček byl označen jako zastaralý.",
       "version": "Tato verze byla označena jako zastaralá.",
@@ -789,8 +786,7 @@
       "preview": "náhled",
       "code": "kód"
     },
-    "file_path": "Cesta k souboru",
-    "scroll_to_top": "Posunout nahoru"
+    "file_path": "Cesta k souboru"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index eb81ebdec8..b7f7e7c8f3 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -216,12 +216,9 @@
     "not_found": "Paket nicht gefunden",
     "not_found_message": "Das Paket konnte nicht gefunden werden.",
     "no_description": "Keine Beschreibung vorhanden",
-    "not_latest": "(nicht aktuell)",
     "verified_provenance": "Verifizierte Herkunft",
-    "view_permalink": "Permalink für diese Version anzeigen",
     "navigation": "Paket",
     "copy_name": "Paketnamen kopieren",
-    "copy_version": "Paketversion kopieren",
     "deprecation": {
       "package": "Dieses Paket ist veraltet.",
       "version": "Diese Version ist veraltet.",
@@ -777,8 +774,7 @@
       "preview": "Vorschau",
       "code": "Code"
     },
-    "file_path": "Dateipfad",
-    "scroll_to_top": "Nach oben scrollen"
+    "file_path": "Dateipfad"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index c187265c73..1734b74958 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -36,7 +36,9 @@
     "go_to_result": "Go to result",
     "open_code_view": "Open code view",
     "open_docs": "Open docs",
-    "disable_shortcuts": "You can disable keyboard shortcuts in {settings}."
+    "disable_shortcuts": "You can disable keyboard shortcuts in {settings}.",
+    "open_main": "Open main information",
+    "open_diff": "Open version differences"
   },
   "search": {
     "label": "Search npm packages",
@@ -226,12 +228,9 @@
     "not_found": "Package Not Found",
     "not_found_message": "The package could not be found.",
     "no_description": "No description provided",
-    "not_latest": "(not latest)",
     "verified_provenance": "Verified provenance",
-    "view_permalink": "View permalink for this version",
     "navigation": "Package",
     "copy_name": "Copy package name",
-    "copy_version": "Copy package version",
     "deprecation": {
       "package": "This package has been deprecated.",
       "version": "This version has been deprecated.",
@@ -288,6 +287,7 @@
       "view_source": "View source"
     },
     "links": {
+      "main": "main",
       "repo": "repo",
       "homepage": "homepage",
       "issues": "issues",
@@ -792,7 +792,6 @@
       "code": "code"
     },
     "file_path": "File path",
-    "scroll_to_top": "Scroll to top",
     "binary_file": "Binary file",
     "binary_rendering_warning": "File type not supported for preview."
   },
@@ -1167,6 +1166,7 @@
     "file_size_warning": "{size} exceeds the 250KB limit for comparison",
     "compare_versions": "diff",
     "compare_versions_title": "Compare with latest version",
+    "version_selector_title": "Compare with version",
     "summary": "Summary",
     "deps_count": "{count} dep | {count} deps",
     "dependencies": "Dependencies",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 87f719488c..248932ded5 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -179,12 +179,9 @@
     "not_found": "Paquete no encontrado",
     "not_found_message": "No se pudo encontrar el paquete.",
     "no_description": "Sin descripción proporcionada",
-    "not_latest": "(no es la última versión)",
     "verified_provenance": "Procedencia verificada",
-    "view_permalink": "Ver enlace permanente para esta versión",
     "navigation": "Navegación del paquete",
     "copy_name": "Copiar nombre del paquete",
-    "copy_version": "Copiar versión del paquete",
     "deprecation": {
       "package": "Este paquete está obsoleto.",
       "version": "Esta versión está obsoleta.",
@@ -738,8 +735,7 @@
       "preview": "vista previa",
       "code": "código"
     },
-    "file_path": "Ruta del archivo",
-    "scroll_to_top": "Volver arriba"
+    "file_path": "Ruta del archivo"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index add6ac7b0b..1bf5ff4cb1 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -216,12 +216,9 @@
     "not_found": "Paquet introuvable",
     "not_found_message": "Le paquet n'a pas pu être trouvé.",
     "no_description": "Aucune description fournie",
-    "not_latest": "(pas la dernière)",
     "verified_provenance": "Provenance vérifiée",
-    "view_permalink": "Voir le lien permanent pour cette version",
     "navigation": "Paquet",
     "copy_name": "Copier le nom du paquet",
-    "copy_version": "Copier le numéro de version du paquet",
     "deprecation": {
       "package": "Ce paquet a été déprécié.",
       "version": "Cette version a été dépréciée.",
@@ -779,8 +776,7 @@
       "preview": "aperçu",
       "code": "code"
     },
-    "file_path": "Chemin du fichier",
-    "scroll_to_top": "Remonter en haut"
+    "file_path": "Chemin du fichier"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/hi-IN.json b/i18n/locales/hi-IN.json
index 603e7d7b93..cd1660e067 100644
--- a/i18n/locales/hi-IN.json
+++ b/i18n/locales/hi-IN.json
@@ -117,9 +117,7 @@
     "not_found": "पैकेज नहीं मिला",
     "not_found_message": "पैकेज नहीं मिल सका।",
     "no_description": "कोई विवरण प्रदान नहीं किया गया",
-    "not_latest": "(नवीनतम नहीं)",
     "verified_provenance": "सत्यापित प्रोवेनेंस",
-    "view_permalink": "इस संस्करण का परमालिंक देखें",
     "navigation": "पैकेज",
     "copy_name": "पैकेज नाम अनुकरण करें",
     "deprecation": {
diff --git a/i18n/locales/hu-HU.json b/i18n/locales/hu-HU.json
index 87b645f334..602fb8fc82 100644
--- a/i18n/locales/hu-HU.json
+++ b/i18n/locales/hu-HU.json
@@ -179,12 +179,9 @@
     "not_found": "Csomag Nem Található",
     "not_found_message": "A csomag nem található.",
     "no_description": "Nincs leírás",
-    "not_latest": "(nem a legfrissebb)",
     "verified_provenance": "Hitelesített eredet",
-    "view_permalink": "Verzió permalinkjének megtekintése",
     "navigation": "Csomag",
     "copy_name": "Csomagnév másolása",
-    "copy_version": "Csomag verziójának másolása",
     "deprecation": {
       "package": "Ez a csomag elavult (deprecated).",
       "version": "Ez a verzió elavult (deprecated).",
@@ -738,8 +735,7 @@
       "preview": "előnézet",
       "code": "kód"
     },
-    "file_path": "Fájl elérési útja",
-    "scroll_to_top": "Görgetés a tetejére"
+    "file_path": "Fájl elérési útja"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index a45e1d7b20..718a3c67de 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -226,12 +226,9 @@
     "not_found": "Paket Tidak Ditemukan",
     "not_found_message": "Paket tidak dapat ditemukan.",
     "no_description": "Tidak ada deskripsi",
-    "not_latest": "(bukan versi terbaru)",
     "verified_provenance": "Provenans terverifikasi",
-    "view_permalink": "Lihat permalink untuk versi ini",
     "navigation": "Paket",
     "copy_name": "Salin nama paket",
-    "copy_version": "Salin versi paket",
     "deprecation": {
       "package": "Paket ini telah usang (deprecated).",
       "version": "Versi ini telah usang (deprecated).",
@@ -468,8 +465,8 @@
       },
       "data_correction": "Koreksi data",
       "average_window": "Rata-rata jendela",
-      "prediction": "Prediksi tren",
       "smoothing": "Penghalusan",
+      "prediction": "Prediksi tren",
       "known_anomalies": "Anomali yang diketahui",
       "known_anomalies_description": "Menyisipkan lonjakan unduhan yang diketahui akibat bot atau masalah CI.",
       "known_anomalies_ranges": "Batas anomali",
@@ -792,7 +789,6 @@
       "code": "kode"
     },
     "file_path": "Jalur berkas",
-    "scroll_to_top": "Kembali ke atas",
     "binary_file": "File biner",
     "binary_rendering_warning": "File ini adalah file biner dan tidak dapat ditampilkan sebagai teks."
   },
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
index 8648542dbf..5155400809 100644
--- a/i18n/locales/it-IT.json
+++ b/i18n/locales/it-IT.json
@@ -149,12 +149,9 @@
     "not_found": "Pacchetto Non Trovato",
     "not_found_message": "Impossibile trovare il pacchetto.",
     "no_description": "Nessuna descrizione fornita",
-    "not_latest": "(non recente)",
     "verified_provenance": "Provenienza verificata",
-    "view_permalink": "Vedi il link permanente per questa versione",
     "navigation": "Pacchetto",
     "copy_name": "Copia nome pacchetto",
-    "copy_version": "Copia versione pacchetto",
     "deprecation": {
       "package": "Questo pacchetto è stato deprecato.",
       "version": "Questa versione è stata deprecata.",
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index ff5d8ca528..408cc7433a 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -216,12 +216,9 @@
     "not_found": "パッケージが見つかりません",
     "not_found_message": "パッケージが見つかりませんでした。",
     "no_description": "説明はありません",
-    "not_latest": "（最新ではありません）",
     "verified_provenance": "検証済みprovenance",
-    "view_permalink": "このバージョンのパーマリンクを表示",
     "navigation": "パッケージナビゲーション",
     "copy_name": "パッケージ名をコピー",
-    "copy_version": "パッケージのバージョンをコピー",
     "deprecation": {
       "package": "このパッケージは非推奨になりました。",
       "version": "このバージョンは非推奨になりました。",
@@ -777,8 +774,7 @@
       "preview": "プレビュー",
       "code": "コード"
     },
-    "file_path": "ファイルパス",
-    "scroll_to_top": "トップへスクロール"
+    "file_path": "ファイルパス"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/kn-IN.json b/i18n/locales/kn-IN.json
index af41145ff4..23ac3c680a 100644
--- a/i18n/locales/kn-IN.json
+++ b/i18n/locales/kn-IN.json
@@ -117,9 +117,7 @@
     "not_found": "ಪ್ಯಾಕೇಜ್ ಕಂಡುಬಂದಿಲ್ಲ",
     "not_found_message": "ಪ್ಯಾಕೇಜ್ ಕಂಡುಬಂದಿಲ್ಲ.",
     "no_description": "ವಿವರಣೆ ನೀಡಲಾಗಿಲ್ಲ",
-    "not_latest": "(ಇದು ಇತ್ತೀಚಿನದು ಅಲ್ಲ)",
     "verified_provenance": "ಪರಿಶೀಲಿತ ಮೂಲ (Provenance)",
-    "view_permalink": "ಈ ಆವೃತ್ತಿಯ ಶಾಶ್ವತ ಲಿಂಕ್ ನೋಡಿ",
     "navigation": "ಪ್ಯಾಕೇಜ್",
     "copy_name": "ಪ್ಯಾಕೇಜ್ ಹೆಸರನ್ನು ನಕಲಿಸಿ",
     "deprecation": {
diff --git a/i18n/locales/mr-IN.json b/i18n/locales/mr-IN.json
index ed0b989ded..5c1692f0d7 100644
--- a/i18n/locales/mr-IN.json
+++ b/i18n/locales/mr-IN.json
@@ -114,9 +114,7 @@
     "not_found": "पॅकेज सापडले नाही",
     "not_found_message": "पॅकेज सापडले नाही.",
     "no_description": "कोणतेही वर्णन प्रदान केलेले नाही",
-    "not_latest": "(नवीनतम नाही)",
     "verified_provenance": "सत्यापित उत्पत्ती",
-    "view_permalink": "या आवृत्तीसाठी परमालिंक पहा",
     "navigation": "पॅकेज",
     "copy_name": "पॅकेज नाव कॉपी करा",
     "deprecation": {
diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
index a8736fcb9c..94658e4eb4 100644
--- a/i18n/locales/nb-NO.json
+++ b/i18n/locales/nb-NO.json
@@ -148,9 +148,7 @@
     "not_found": "Pakke ikke funnet",
     "not_found_message": "Pakken kunne ikke finnes.",
     "no_description": "Ingen beskrivelse gitt",
-    "not_latest": "(ikke nyeste)",
     "verified_provenance": "Verifisert opprinnelse",
-    "view_permalink": "Vis permalenke for denne versjonen",
     "navigation": "Pakke",
     "copy_name": "Kopier pakkenavn",
     "deprecation": {
diff --git a/i18n/locales/ne-NP.json b/i18n/locales/ne-NP.json
index c29f249374..dc1e7710d6 100644
--- a/i18n/locales/ne-NP.json
+++ b/i18n/locales/ne-NP.json
@@ -117,9 +117,7 @@
     "not_found": "प्याकेज फेला परेन",
     "not_found_message": "प्याकेज फेला पार्न सकिएन।",
     "no_description": "विवरण उपलब्ध छैन",
-    "not_latest": "(नवीनतम होइन)",
     "verified_provenance": "प्रमाणित प्रुभेनेन्स",
-    "view_permalink": "यस संस्करणको पर्मालिङ्क हेर्नुहोस्",
     "navigation": "प्याकेज",
     "copy_name": "प्याकेज नाम कपी गर्नुहोस्",
     "deprecation": {
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index 601b98abbf..eaf990fc5e 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -226,12 +226,9 @@
     "not_found": "Nie znaleziono pakietu",
     "not_found_message": "Nie udało się znaleźć pakietu.",
     "no_description": "Brak opisu",
-    "not_latest": "(nie najnowsza)",
     "verified_provenance": "Zweryfikowane pochodzenie",
-    "view_permalink": "Zobacz stały link do tej wersji",
     "navigation": "Pakiet",
     "copy_name": "Kopiuj nazwę pakietu",
-    "copy_version": "Kopiuj wersję pakietu",
     "deprecation": {
       "package": "Ten pakiet został oznaczony jako przestarzały.",
       "version": "Ta wersja została oznaczona jako przestarzała.",
@@ -791,8 +788,7 @@
       "preview": "podgląd",
       "code": "kod"
     },
-    "file_path": "Ścieżka pliku",
-    "scroll_to_top": "Wróć do góry"
+    "file_path": "Ścieżka pliku"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index e625bc277f..cd9a3793f7 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -118,9 +118,7 @@
     "not_found": "Pacote não encontrado",
     "not_found_message": "O pacote não pôde ser encontrado.",
     "no_description": "Nenhuma descrição fornecida",
-    "not_latest": "(não é a mais recente)",
     "verified_provenance": "Proveniência verificada",
-    "view_permalink": "Ver link permanente para esta versão",
     "navigation": "Pacote",
     "copy_name": "Copiar nome do pacote",
     "deprecation": {
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 11e6c3336a..fa486ef7cb 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -216,12 +216,9 @@
     "not_found": "Пакет не найден",
     "not_found_message": "Пакет не удалось найти.",
     "no_description": "Описание отсутствует",
-    "not_latest": "(не последняя)",
     "verified_provenance": "Подтвержденное происхождение",
-    "view_permalink": "Посмотреть постоянную ссылку на эту версию",
     "navigation": "Навигация по пакету",
     "copy_name": "Скопировать имя пакета",
-    "copy_version": "Скопировать версию пакета",
     "deprecation": {
       "package": "Этот пакет устарел.",
       "version": "Эта версия устарела.",
@@ -777,8 +774,7 @@
       "preview": "превью",
       "code": "код"
     },
-    "file_path": "Путь к файлу",
-    "scroll_to_top": "Прокрутить наверх"
+    "file_path": "Путь к файлу"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/ta-IN.json b/i18n/locales/ta-IN.json
index 15533bd844..0eb176818f 100644
--- a/i18n/locales/ta-IN.json
+++ b/i18n/locales/ta-IN.json
@@ -148,9 +148,7 @@
     "not_found": "தொகுப்பு கிடைக்கவில்லை",
     "not_found_message": "தொகுப்பைக் கண்டுபிடிக்க இயலவில்லை.",
     "no_description": "விளக்கம் வழங்கப்படவில்லை",
-    "not_latest": "(சமீபத்தியது அல்ல)",
     "verified_provenance": "சரிபார்க்கப்பட்ட மூலநிலை",
-    "view_permalink": "இந்தப் பதிப்பின் நிரந்தர இணைப்பைக் காண்க",
     "navigation": "தொகுப்பு",
     "copy_name": "தொகுப்புப் பெயரை நகலெடு",
     "deprecation": {
diff --git a/i18n/locales/te-IN.json b/i18n/locales/te-IN.json
index 967e06ed27..c2d82b8d3e 100644
--- a/i18n/locales/te-IN.json
+++ b/i18n/locales/te-IN.json
@@ -117,9 +117,7 @@
     "not_found": "ప్యాకేజ్ కనుగొనబడలేదు",
     "not_found_message": "ప్యాకేజ్ కనుగొనబడలేదు.",
     "no_description": "వివరణ అందించబడలేదు",
-    "not_latest": "(తాజాది కాదు)",
     "verified_provenance": "ధృవీకరించబడిన ప్రోవెనెన్స్",
-    "view_permalink": "ఈ వెర్షన్ యొక్క పర్మాలింక్‌ను వీక్షించండి",
     "navigation": "ప్యాకేజ్",
     "copy_name": "ప్యాకేజ్ పేరును కాపీ చేయండి",
     "deprecation": {
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index a761262ae4..3e74fd6ef5 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -216,12 +216,9 @@
     "not_found": "Paket Bulunamadı",
     "not_found_message": "Paket bulunamadı.",
     "no_description": "Açıklama verilmemiş",
-    "not_latest": "(en son değil)",
     "verified_provenance": "Doğrulanmış köken",
-    "view_permalink": "Bu sürüm için kalıcı bağlantıya bak",
     "navigation": "Paket",
     "copy_name": "Paket adını kopyala",
-    "copy_version": "Paket sürümünü kopyala",
     "deprecation": {
       "package": "Bu paket kullanımdan kaldırılmıştır.",
       "version": "Bu sürüm kullanımdan kaldırılmıştır.",
@@ -777,8 +774,7 @@
       "preview": "önizleme",
       "code": "kod"
     },
-    "file_path": "Dosya yolu",
-    "scroll_to_top": "Yukarı dön"
+    "file_path": "Dosya yolu"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index 1c46738e7b..357da5cb77 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -216,12 +216,9 @@
     "not_found": "Пакет не знайдено",
     "not_found_message": "Пакет не вдалося знайти.",
     "no_description": "Опис не надано",
-    "not_latest": "(не найновіший)",
     "verified_provenance": "Перевірене походження",
-    "view_permalink": "Переглянути постійне посилання на цю версію",
     "navigation": "Пакет",
     "copy_name": "Скопіювати назву пакета",
-    "copy_version": "Скопіювати версію пакета",
     "deprecation": {
       "package": "Цей пакет більше не підтримується.",
       "version": "Ця версія більше не підтримується.",
@@ -777,8 +774,7 @@
       "preview": "попередній перегляд",
       "code": "код"
     },
-    "file_path": "Шлях до файлу",
-    "scroll_to_top": "Прокрутити вгору"
+    "file_path": "Шлях до файлу"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 4e91d82823..766c056268 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -216,12 +216,9 @@
     "not_found": "未找到包",
     "not_found_message": "找不到此包。",
     "no_description": "未提供描述",
-    "not_latest": "（非最新）",
     "verified_provenance": "已验证来源",
-    "view_permalink": "查看此版本的链接",
     "navigation": "包导航",
     "copy_name": "复制包名",
-    "copy_version": "复制版本号",
     "deprecation": {
       "package": "此包已废弃。",
       "version": "此版本已废弃。",
@@ -777,8 +774,7 @@
       "preview": "预览",
       "code": "代码"
     },
-    "file_path": "文件路径",
-    "scroll_to_top": "滚动到顶部"
+    "file_path": "文件路径"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index 231abb7f48..4b6fd68ee1 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -179,12 +179,9 @@
     "not_found": "找不到套件",
     "not_found_message": "找不到此套件。",
     "no_description": "未提供描述",
-    "not_latest": "（非最新）",
     "verified_provenance": "已驗證的來源",
-    "view_permalink": "檢視此版本的永久連結",
     "navigation": "套件導覽",
     "copy_name": "複製套件名稱",
-    "copy_version": "複製套件版本",
     "deprecation": {
       "package": "此套件已被棄用。",
       "version": "此版本已被棄用。",
@@ -737,8 +734,7 @@
       "preview": "預覽",
       "code": "程式碼"
     },
-    "file_path": "檔案路徑",
-    "scroll_to_top": "回到頂端"
+    "file_path": "檔案路徑"
   },
   "badges": {
     "provenance": {
diff --git a/i18n/schema.json b/i18n/schema.json
index 1ee624a990..fb0cc69fb5 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -114,6 +114,12 @@
         },
         "disable_shortcuts": {
           "type": "string"
+        },
+        "open_main": {
+          "type": "string"
+        },
+        "open_diff": {
+          "type": "string"
         }
       },
       "additionalProperties": false
@@ -682,24 +688,15 @@
         "no_description": {
           "type": "string"
         },
-        "not_latest": {
-          "type": "string"
-        },
         "verified_provenance": {
           "type": "string"
         },
-        "view_permalink": {
-          "type": "string"
-        },
         "navigation": {
           "type": "string"
         },
         "copy_name": {
           "type": "string"
         },
-        "copy_version": {
-          "type": "string"
-        },
         "deprecation": {
           "type": "object",
           "properties": {
@@ -868,6 +865,9 @@
         "links": {
           "type": "object",
           "properties": {
+            "main": {
+              "type": "string"
+            },
             "repo": {
               "type": "string"
             },
@@ -2380,9 +2380,6 @@
         "file_path": {
           "type": "string"
         },
-        "scroll_to_top": {
-          "type": "string"
-        },
         "binary_file": {
           "type": "string"
         },
@@ -3505,6 +3502,9 @@
         "compare_versions_title": {
           "type": "string"
         },
+        "version_selector_title": {
+          "type": "string"
+        },
         "summary": {
           "type": "string"
         },
diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index 15f00ee4ce..8615df22d5 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -61,67 +61,6 @@ test.describe('Create Command', () => {
     })
   })
 
-  test.describe('Copy Functionality', () => {
-    test('hovering create command shows copy button', async ({ page, goto }) => {
-      await goto('/package/vite', { waitUntil: 'hydration' })
-
-      await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
-
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
-        timeout: 15000,
-      })
-
-      // Find the create command container (wait longer for API response)
-      const createCommandContainer = page.locator('.group\\/createcmd').first()
-      await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
-
-      // Copy button should initially be hidden (opacity-0)
-      const copyButton = createCommandContainer.locator('button')
-      await expect(copyButton).toHaveCSS('opacity', '0')
-
-      // Hover over the container
-      await createCommandContainer.hover()
-
-      // Copy button should become visible
-      await expect(copyButton).toHaveCSS('opacity', '1')
-    })
-
-    test('clicking copy button copies create command and shows confirmation', async ({
-      page,
-      goto,
-      context,
-    }) => {
-      // Grant clipboard permissions
-      await context.grantPermissions(['clipboard-read', 'clipboard-write'])
-
-      await goto('/package/vite', { waitUntil: 'hydration' })
-      await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
-
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
-        timeout: 15000,
-      })
-
-      const createCommandContainer = page.locator('.group\\/createcmd').first()
-      await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
-
-      await createCommandContainer.hover()
-
-      // Click the copy button
-      const copyButton = createCommandContainer.locator('button')
-      await copyButton.click()
-
-      // Button text should change to "copied!"
-      await expect(copyButton).toContainText(/copied/i)
-
-      // Verify clipboard content contains the create command
-      const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
-      expect(clipboardContent).toMatch(/create vite/i)
-
-      await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
-      await expect(copyButton).not.toContainText(/copied/i)
-    })
-  })
-
   test.describe('Install Command Copy', () => {
     test('hovering install command shows copy button', async ({ page, goto }) => {
       await goto('/package/is-odd', { waitUntil: 'hydration' })
diff --git a/test/e2e/docs.spec.ts b/test/e2e/docs.spec.ts
index f95a233515..267ed6ad69 100644
--- a/test/e2e/docs.spec.ts
+++ b/test/e2e/docs.spec.ts
@@ -10,10 +10,7 @@ test.describe('API Documentation Pages', () => {
 
     // Header should show package name and version
     await expect(page.locator('header').getByText('ufo')).toBeVisible()
-    await expect(page.locator('header').getByText('1.6.3')).toBeVisible()
-
-    // API Docs badge should be visible
-    await expect(page.locator('text=API Docs')).toBeVisible()
+    await expect(page.locator('[data-testid="package-subheader"]').getByText('1.6.3')).toBeVisible()
 
     // Should have documentation content
     const docsContent = page.locator('.docs-content')
@@ -73,17 +70,6 @@ test.describe('API Documentation Pages', () => {
     await expect(page).toHaveURL(/\/package-docs\/ufo\/v\//)
   })
 
-  test('package link in header navigates to package page', async ({ page, goto }) => {
-    await goto('/package-docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
-
-    // Click on package name in header
-    const packageLink = page.locator('header a').filter({ hasText: 'ufo' })
-    await packageLink.click()
-
-    // Should navigate to package page (URL ends with /ufo)
-    await expect(page).toHaveURL(/\/package\/ufo$/)
-  })
-
   test('docs page handles package gracefully when types unavailable', async ({ page, goto }) => {
     // Use a simple JS package - the page should load without crashing
     // regardless of whether it has types or shows an error state
@@ -108,7 +94,9 @@ test.describe('Version Selector', () => {
     await goto('/package-docs/ufo/v/1.6.3', { waitUntil: 'hydration' })
 
     // Find and click the version selector button (wait for it to be visible)
-    const versionButton = page.locator('header button').filter({ hasText: '1.6.3' })
+    const versionButton = page
+      .locator('[data-testid="package-subheader"] button')
+      .filter({ hasText: '1.6.3' })
     await expect(versionButton).toBeVisible({ timeout: 10000 })
 
     await versionButton.click()
@@ -126,7 +114,9 @@ test.describe('Version Selector', () => {
     await goto('/package-docs/ufo/v/1.6.3', { waitUntil: 'hydration' })
 
     // Find and click the version selector button (wait for it to be visible)
-    const versionButton = page.locator('header button').filter({ hasText: '1.6.3' })
+    const versionButton = page
+      .locator('[data-testid="package-subheader"] button')
+      .filter({ hasText: '1.6.3' })
     await expect(versionButton).toBeVisible({ timeout: 10000 })
 
     await versionButton.click()
@@ -160,7 +150,9 @@ test.describe('Version Selector', () => {
     await goto('/package-docs/ufo/v/1.6.3', { waitUntil: 'hydration' })
 
     // Wait for version button to be visible
-    const versionButton = page.locator('header button').filter({ hasText: '1.6.3' })
+    const versionButton = page
+      .locator('[data-testid="package-subheader"] button')
+      .filter({ hasText: '1.6.3' })
     await expect(versionButton).toBeVisible({ timeout: 10000 })
 
     await versionButton.click()
diff --git a/test/e2e/package-manager-select.spec.ts b/test/e2e/package-manager-select.spec.ts
index e5a185f741..8b418dae28 100644
--- a/test/e2e/package-manager-select.spec.ts
+++ b/test/e2e/package-manager-select.spec.ts
@@ -6,12 +6,12 @@ test.describe('Package Page', () => {
 
     await expect(page.locator('h1')).toContainText('vue', { timeout: 15000 })
 
-    const packageManagerButton = page.locator('button[aria-haspopup="listbox"]').first()
+    const packageManagerButton = page.locator('article button[aria-haspopup="listbox"]').first()
     await expect(packageManagerButton).toBeVisible()
 
     // Open dropdown
     await packageManagerButton.click()
-    const packageManagerDropdown = page.locator('[role="listbox"]')
+    const packageManagerDropdown = page.locator('[data-testid="package-manager-dropdown"]')
     await expect(packageManagerDropdown).toBeVisible({ timeout: 5000 })
 
     // Arrow keys navigate the listbox
diff --git a/test/e2e/url-compatibility.spec.ts b/test/e2e/url-compatibility.spec.ts
index b555d7605e..ce5e403bcd 100644
--- a/test/e2e/url-compatibility.spec.ts
+++ b/test/e2e/url-compatibility.spec.ts
@@ -8,7 +8,11 @@ test.describe('npmjs.com URL Compatibility', () => {
       // Should show package name
       await expect(page.locator('h1')).toContainText('vue')
       // Should have version badge
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible()
+      await expect(
+        page
+          .locator('[data-testid="version-selector-button"]')
+          .locator('text=/\\d+\\.\\d+\\.\\d+/'),
+      ).toBeVisible()
     })
 
     test('/package/@nuxt/kit → scoped package page', async ({ page, goto }) => {
@@ -24,7 +28,9 @@ test.describe('npmjs.com URL Compatibility', () => {
       // Should show package name
       await expect(page.locator('h1')).toContainText('vue')
       // Should show the specific version
-      await expect(page.locator('text=v3.5.27')).toBeVisible()
+      await expect(
+        page.locator('[data-testid="version-selector-button"]').locator('text=3.5.27'),
+      ).toBeVisible()
     })
 
     test('/package/@nuxt/kit/v/3.20.0 → scoped package specific version', async ({
@@ -36,7 +42,7 @@ test.describe('npmjs.com URL Compatibility', () => {
       // Should show scoped package name
       await expect(page.locator('h1')).toContainText('@nuxt/kit')
       // Should show the specific version (or "not latest" indicator)
-      await expect(page.locator('text=v3.20.0').first()).toBeVisible()
+      await expect(page.locator('text=3.20.0').first()).toBeVisible()
     })
 
     test('/package/nonexistent-pkg-12345 → 404 handling', async ({ page, goto }) => {
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 452a7c931b..28cdabb10d 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -731,7 +731,11 @@ describe('component accessibility audits', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageHeader, {
         props: {
-          pkg: { name: 'vue' },
+          pkg: {
+            'name': 'vue',
+            'dist-tags': {},
+            'versions': {},
+          },
           resolvedVersion: '3.5.0',
           displayVersion: {
             _id: '1234567890',
@@ -747,9 +751,8 @@ describe('component accessibility audits', () => {
           latestVersion: { version: '3.5.0', tags: [] },
           provenanceData: null,
           provenanceStatus: 'idle',
-          docsLink: null,
-          codeLink: null,
-          isBinaryOnly: false,
+          page: 'docs',
+          versionUrlPattern: '/package/vue/v/{version}',
         },
       })
       const results = await runAxe(component)
@@ -3416,6 +3419,9 @@ describe('component accessibility audits', () => {
           groupedDeps: new Map(),
           allChanges: mockAllChanges,
           open: false,
+          packageName: 'nuxt',
+          toVersion: '3.0.0',
+          toVersionUrlPattern: 'https://npmx.dev/package/nuxt/v/3.0.0',
         },
       })
       const results = await runAxe(component)
@@ -3429,6 +3435,9 @@ describe('component accessibility audits', () => {
           groupedDeps: new Map(),
           allChanges: mockAllChanges,
           open: true,
+          packageName: 'nuxt',
+          toVersion: '3.0.0',
+          toVersionUrlPattern: 'https://npmx.dev/package/nuxt/v/3.0.0',
         },
       })
       const results = await runAxe(component)