From ceef757fcc804a40dec0bacd4ce406fa67b1101b Mon Sep 17 00:00:00 2001
From: Rshig <90143161+rshigg@users.noreply.github.com>
Date: Thu, 29 Jan 2026 18:00:27 -0500
Subject: [PATCH 1/2] feat: add collapsible sections to the package page

---
 app/components/CollapsibleSection.vue         |  81 ++
 app/components/PackageAccessControlsList.vue  | 309 ++++++++
 app/components/PackageDependenciesList.vue    |  66 ++
 .../PackageDownloadStatsContent.vue           | 225 ++++++
 app/components/PackageInstallScriptsList.vue  | 108 +++
 app/components/PackageMaintainersList.vue     | 243 ++++++
 .../PackageOptionalDependenciesList.vue       |  56 ++
 .../PackagePeerDependenciesList.vue           |  75 ++
 app/components/PackagePlaygroundsList.vue     | 186 +++++
 app/components/PackageVersionsList.vue        | 724 ++++++++++++++++++
 app/pages/[...package].vue                    | 259 ++++---
 11 files changed, 2228 insertions(+), 104 deletions(-)
 create mode 100644 app/components/CollapsibleSection.vue
 create mode 100644 app/components/PackageAccessControlsList.vue
 create mode 100644 app/components/PackageDependenciesList.vue
 create mode 100644 app/components/PackageDownloadStatsContent.vue
 create mode 100644 app/components/PackageInstallScriptsList.vue
 create mode 100644 app/components/PackageMaintainersList.vue
 create mode 100644 app/components/PackageOptionalDependenciesList.vue
 create mode 100644 app/components/PackagePeerDependenciesList.vue
 create mode 100644 app/components/PackagePlaygroundsList.vue
 create mode 100644 app/components/PackageVersionsList.vue

diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
new file mode 100644
index 000000000..06bd5db31
--- /dev/null
+++ b/app/components/CollapsibleSection.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+defineProps<{
+  id: string
+}>()
+</script>
+
+<template>
+  <section
+    :id="id"
+    :aria-labelledby="id + '-title'"
+    class="group relative collapsible-section scroll-mt-20"
+  >
+    <a
+      :href="`#${id}`"
+      class="section-anchor p-1 col-start-2 col-span-1 row-start-1 self-start opacity-0 rounded text-fg-subtle transition-opacity hover:text-accent focus:opacity-100 group-hover:opacity-100 motion-reduce:opacity-100"
+      aria-label="Link to section"
+      data-anchor
+    >
+      <span class="i-carbon-link block size-full" />
+    </a>
+    <details open class="col-span-full row-start-1">
+      <summary
+        :id="id + '-title'"
+        class="collapsible-header flex items-center justify-between transition-all motion-reduce:pr-7 group-hover:pr-7 group-has-[[data-anchor]:focus]:pr-7"
+      >
+        <div
+          class="text-xs text-fg-subtle uppercase tracking-wider inline-flex items-center gap-1.5 group-hover:text-fg"
+        >
+          <slot name="title" />
+        </div>
+        <span
+          class="collapsible-arrow i-carbon-chevron-down size-5 text-fg-subtle transition-all opacity-0 group-hover:opacity-100 max-lg:opacity-100 motion-reduce:opacity-100"
+        />
+      </summary>
+      <div class="py-2">
+        <slot />
+      </div>
+    </details>
+  </section>
+</template>
+
+<style scoped>
+.collapsible-section {
+  --header-height: 1.5rem;
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.collapsible-header {
+  position: relative;
+  height: var(--header-height);
+  cursor: pointer;
+  list-style: none;
+  &::-webkit-details-marker {
+    display: none;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -0.25rem -0.25rem -0.25rem -0.5rem;
+    border-radius: 0.5rem;
+    background-color: var(--bg-subtle);
+    opacity: 0;
+    transition: opacity 150ms;
+    z-index: -1;
+  }
+}
+
+.collapsible-section:hover .collapsible-header::before {
+  opacity: 1;
+}
+
+details:not([open]) .collapsible-arrow {
+  transform: rotate(-90deg);
+}
+
+.section-anchor {
+  width: var(--header-height);
+  height: var(--header-height);
+}
+</style>
diff --git a/app/components/PackageAccessControlsList.vue b/app/components/PackageAccessControlsList.vue
new file mode 100644
index 000000000..418efe239
--- /dev/null
+++ b/app/components/PackageAccessControlsList.vue
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import type { NewOperation } from '~/composables/useConnector'
+import { buildScopeTeam } from '~/utils/npm'
+
+const props = defineProps<{
+  packageName: string
+}>()
+
+const {
+  isConnected,
+  lastExecutionTime,
+  listOrgTeams,
+  listPackageCollaborators,
+  addOperation,
+  error: connectorError,
+} = useConnector()
+
+// Extract org name from scoped package (e.g., "@nuxt/kit" -> "nuxt")
+const orgName = computed(() => {
+  if (!props.packageName.startsWith('@')) return null
+  const match = props.packageName.match(/^@([^/]+)\//)
+  return match ? match[1] : null
+})
+
+// Data
+const collaborators = shallowRef<Record<string, 'read-only' | 'read-write'>>({})
+const teams = shallowRef<string[]>([])
+const isLoadingCollaborators = shallowRef(false)
+const isLoadingTeams = shallowRef(false)
+const error = shallowRef<string | null>(null)
+
+// Grant access form
+const showGrantAccess = shallowRef(false)
+const selectedTeam = shallowRef('')
+const permission = shallowRef<'read-only' | 'read-write'>('read-only')
+const isGranting = shallowRef(false)
+
+// Computed collaborator list with type detection
+const collaboratorList = computed(() => {
+  return Object.entries(collaborators.value)
+    .map(([name, perm]) => {
+      // Check if this looks like a team (org:team format) or user
+      const isTeam = name.includes(':')
+      return {
+        name,
+        permission: perm,
+        isTeam,
+        displayName: isTeam ? name.split(':')[1] : name,
+      }
+    })
+    .sort((a, b) => {
+      // Teams first, then users
+      if (a.isTeam !== b.isTeam) return a.isTeam ? -1 : 1
+      return a.name.localeCompare(b.name)
+    })
+})
+
+// Load collaborators
+async function loadCollaborators() {
+  if (!isConnected.value) return
+
+  isLoadingCollaborators.value = true
+  error.value = null
+
+  try {
+    const result = await listPackageCollaborators(props.packageName)
+    if (result) {
+      collaborators.value = result
+    } else {
+      error.value = connectorError.value || 'Failed to load collaborators'
+    }
+  } finally {
+    isLoadingCollaborators.value = false
+  }
+}
+
+// Load teams for dropdown
+async function loadTeams() {
+  if (!isConnected.value || !orgName.value) return
+
+  isLoadingTeams.value = true
+
+  try {
+    const result = await listOrgTeams(orgName.value)
+    if (result) {
+      // Teams come as "org:team" format, extract just the team name
+      teams.value = result.map((t: string) => t.replace(`${orgName.value}:`, ''))
+    }
+  } finally {
+    isLoadingTeams.value = false
+  }
+}
+
+// Grant access
+async function handleGrantAccess() {
+  if (!selectedTeam.value || !orgName.value) return
+
+  isGranting.value = true
+  try {
+    const scopeTeam = buildScopeTeam(orgName.value, selectedTeam.value)
+    const operation: NewOperation = {
+      type: 'access:grant',
+      params: {
+        permission: permission.value,
+        scopeTeam,
+        pkg: props.packageName,
+      },
+      description: `Grant ${permission.value} access to ${scopeTeam} for ${props.packageName}`,
+      command: `npm access grant ${permission.value} ${scopeTeam} ${props.packageName}`,
+    }
+
+    await addOperation(operation)
+    selectedTeam.value = ''
+    showGrantAccess.value = false
+  } finally {
+    isGranting.value = false
+  }
+}
+
+// Revoke access
+async function handleRevokeAccess(collaboratorName: string) {
+  // For teams, we use the full org:team format
+  // For users... actually npm access revoke only works for teams
+  // Users get access via maintainers/owners which is managed separately
+
+  const operation: NewOperation = {
+    type: 'access:revoke',
+    params: {
+      scopeTeam: collaboratorName,
+      pkg: props.packageName,
+    },
+    description: `Revoke ${collaboratorName} access to ${props.packageName}`,
+    command: `npm access revoke ${collaboratorName} ${props.packageName}`,
+  }
+
+  await addOperation(operation)
+}
+
+// Reload when package changes
+watch(
+  () => [isConnected.value, props.packageName, lastExecutionTime.value],
+  ([connected]) => {
+    if (connected && orgName.value) {
+      loadCollaborators()
+      loadTeams()
+    }
+  },
+  { immediate: true },
+)
+
+// Expose visibility check for parent
+const canShow = computed(() => isConnected.value && orgName.value)
+defineExpose({ canShow })
+</script>
+
+<template>
+  <div v-if="canShow">
+    <div class="flex items-center justify-end mb-3 -mt-3">
+      <button
+        type="button"
+        class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        :aria-label="$t('package.access.refresh')"
+        :disabled="isLoadingCollaborators"
+        @click="loadCollaborators"
+      >
+        <span
+          class="i-carbon-renew block w-3.5 h-3.5"
+          :class="{ 'motion-safe:animate-spin': isLoadingCollaborators }"
+          aria-hidden="true"
+        />
+      </button>
+    </div>
+
+    <!-- Loading state -->
+    <div v-if="isLoadingCollaborators && collaboratorList.length === 0" class="py-4 text-center">
+      <span
+        class="i-carbon-rotate-180 block w-4 h-4 text-fg-muted animate-spin mx-auto"
+        aria-hidden="true"
+      />
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="text-xs text-red-400 mb-2" role="alert">
+      {{ error }}
+    </div>
+
+    <!-- Collaborators list -->
+    <ul
+      v-if="collaboratorList.length > 0"
+      class="space-y-1 mb-3"
+      :aria-label="$t('package.access.list_label')"
+    >
+      <li
+        v-for="collab in collaboratorList"
+        :key="collab.name"
+        class="flex items-center justify-between py-1"
+      >
+        <div class="flex items-center gap-2 min-w-0">
+          <span
+            v-if="collab.isTeam"
+            class="i-carbon-group w-3.5 h-3.5 text-fg-subtle shrink-0"
+            aria-hidden="true"
+          />
+          <span
+            v-else
+            class="i-carbon-user w-3.5 h-3.5 text-fg-subtle shrink-0"
+            aria-hidden="true"
+          />
+          <span class="font-mono text-sm text-fg-muted truncate">
+            {{ collab.isTeam ? collab.displayName : `@${collab.name}` }}
+          </span>
+          <span
+            class="px-1 py-0.5 font-mono text-xs rounded shrink-0"
+            :class="
+              collab.permission === 'read-write'
+                ? 'bg-green-500/20 text-green-400'
+                : 'bg-fg-subtle/20 text-fg-muted'
+            "
+          >
+            {{
+              collab.permission === 'read-write' ? $t('package.access.rw') : $t('package.access.ro')
+            }}
+          </span>
+        </div>
+        <!-- Only show revoke for teams (users are managed via owners) -->
+        <button
+          v-if="collab.isTeam"
+          type="button"
+          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          :aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
+          @click="handleRevokeAccess(collab.name)"
+        >
+          <span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
+        </button>
+        <span v-else class="text-xs text-fg-subtle"> {{ $t('package.access.owner') }} </span>
+      </li>
+    </ul>
+
+    <p v-else-if="!isLoadingCollaborators && !error" class="text-xs text-fg-subtle mb-3">
+      {{ $t('package.access.no_access') }}
+    </p>
+
+    <!-- Grant access form -->
+    <div v-if="showGrantAccess">
+      <form class="space-y-2" @submit.prevent="handleGrantAccess">
+        <div class="flex items-center gap-2">
+          <label for="grant-team-select" class="sr-only">{{
+            $t('package.access.select_team_label')
+          }}</label>
+          <select
+            id="grant-team-select"
+            v-model="selectedTeam"
+            name="grant-team"
+            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            :disabled="isLoadingTeams"
+          >
+            <option value="" disabled>
+              {{
+                isLoadingTeams
+                  ? $t('package.access.loading_teams')
+                  : $t('package.access.select_team')
+              }}
+            </option>
+            <option v-for="team in teams" :key="team" :value="team">
+              {{ orgName }}:{{ team }}
+            </option>
+          </select>
+        </div>
+        <div class="flex items-center gap-2">
+          <label for="grant-permission-select" class="sr-only">{{
+            $t('package.access.permission_label')
+          }}</label>
+          <select
+            id="grant-permission-select"
+            v-model="permission"
+            name="grant-permission"
+            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          >
+            <option value="read-only">{{ $t('package.access.permission.read_only') }}</option>
+            <option value="read-write">{{ $t('package.access.permission.read_write') }}</option>
+          </select>
+          <button
+            type="submit"
+            :disabled="!selectedTeam || isGranting"
+            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          >
+            {{ isGranting ? '...' : $t('package.access.grant_button') }}
+          </button>
+          <button
+            type="button"
+            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            :aria-label="$t('package.access.cancel_grant')"
+            @click="showGrantAccess = false"
+          >
+            <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
+      </form>
+    </div>
+    <button
+      v-else
+      type="button"
+      class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      @click="showGrantAccess = true"
+    >
+      {{ $t('package.access.grant_access') }}
+    </button>
+  </div>
+</template>
diff --git a/app/components/PackageDependenciesList.vue b/app/components/PackageDependenciesList.vue
new file mode 100644
index 000000000..e71ebb41e
--- /dev/null
+++ b/app/components/PackageDependenciesList.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const props = defineProps<{
+  dependencies: Record<string, string>
+}>()
+
+// Fetch outdated info for dependencies
+const outdatedDeps = useOutdatedDependencies(() => props.dependencies)
+
+// Expanded state
+const depsExpanded = shallowRef(false)
+
+// Sort dependencies alphabetically
+const sortedDependencies = computed(() => {
+  if (!props.dependencies) return []
+  return Object.entries(props.dependencies).sort(([a], [b]) => a.localeCompare(b))
+})
+</script>
+
+<template>
+  <div v-if="sortedDependencies.length > 0">
+    <ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
+      <li
+        v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
+        :key="dep"
+        class="flex items-center justify-between py-1 text-sm gap-2"
+      >
+        <NuxtLink
+          :to="{ name: 'package', params: { package: dep.split('/') } }"
+          class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
+        >
+          {{ dep }}
+        </NuxtLink>
+        <span class="flex items-center gap-1">
+          <span
+            v-if="outdatedDeps[dep]"
+            class="shrink-0"
+            :class="getVersionClass(outdatedDeps[dep])"
+            :title="getOutdatedTooltip(outdatedDeps[dep])"
+            aria-hidden="true"
+          >
+            <span class="i-carbon-warning-alt w-3 h-3 block" />
+          </span>
+          <NuxtLink
+            :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
+            class="font-mono text-xs text-right truncate"
+            :class="getVersionClass(outdatedDeps[dep])"
+            :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
+          >
+            {{ version }}
+          </NuxtLink>
+          <span v-if="outdatedDeps[dep]" class="sr-only">
+            ({{ getOutdatedTooltip(outdatedDeps[dep]) }})
+          </span>
+        </span>
+      </li>
+    </ul>
+    <button
+      v-if="sortedDependencies.length > 10 && !depsExpanded"
+      type="button"
+      class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      @click="depsExpanded = true"
+    >
+      {{ $t('package.dependencies.show_all', { count: sortedDependencies.length }) }}
+    </button>
+  </div>
+</template>
diff --git a/app/components/PackageDownloadStatsContent.vue b/app/components/PackageDownloadStatsContent.vue
new file mode 100644
index 000000000..b314075be
--- /dev/null
+++ b/app/components/PackageDownloadStatsContent.vue
@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
+
+const { packageName } = defineProps<{
+  packageName: string
+}>()
+
+const showModal = ref(false)
+
+const { data: packument } = usePackage(() => packageName)
+const createdIso = computed(() => packument.value?.time?.created ?? null)
+
+const { fetchPackageDownloadEvolution } = useCharts()
+
+const { accentColors, selectedAccentColor } = useAccentColor()
+
+const colorMode = useColorMode()
+
+const resolvedMode = ref<'light' | 'dark'>('light')
+
+onMounted(() => {
+  resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
+})
+
+watch(
+  () => colorMode.value,
+  value => {
+    resolvedMode.value = value === 'dark' ? 'dark' : 'light'
+  },
+  { flush: 'sync' },
+)
+
+const isDarkMode = computed(() => resolvedMode.value === 'dark')
+
+const accentColorValueById = computed<Record<string, string>>(() => {
+  const map: Record<string, string> = {}
+  for (const item of accentColors) {
+    map[item.id] = item.value
+  }
+  return map
+})
+
+const accent = computed(() => {
+  const id = selectedAccentColor.value
+  return id ? (oklchToHex(accentColorValueById.value[id]!) ?? '#8A8A8A') : '#8A8A8A'
+})
+
+const pulseColor = computed(() => {
+  if (!selectedAccentColor.value) {
+    return isDarkMode.value ? '#BFBFBF' : '#E0E0E0'
+  }
+  return isDarkMode.value ? accent.value : lightenHex(accent.value, 0.5)
+})
+
+const weeklyDownloads = ref<WeeklyDownloadPoint[]>([])
+
+async function loadWeeklyDownloads() {
+  if (!import.meta.client) return
+
+  try {
+    const result = await fetchPackageDownloadEvolution(
+      () => packageName,
+      () => createdIso.value,
+      () => ({ granularity: 'week' as const, weeks: 52 }),
+    )
+    weeklyDownloads.value = (result as WeeklyDownloadPoint[]) ?? []
+  } catch {
+    weeklyDownloads.value = []
+  }
+}
+
+onMounted(() => {
+  loadWeeklyDownloads()
+})
+
+watch(
+  () => packageName,
+  () => loadWeeklyDownloads(),
+)
+
+const dataset = computed(() =>
+  weeklyDownloads.value.map(d => ({
+    value: d?.downloads ?? 0,
+    period: $t('package.downloads.date_range', {
+      start: d.weekStart ?? '-',
+      end: d.weekEnd ?? '-',
+    }),
+  })),
+)
+
+const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '')
+
+// oklh or css variables are not supported by vue-data-ui (for now)
+const config = computed(() => {
+  return {
+    theme: 'dark',
+    style: {
+      backgroundColor: 'transparent',
+      animation: { show: false },
+      area: {
+        color: '#6A6A6A',
+        useGradient: false,
+        opacity: 10,
+      },
+      dataLabel: {
+        offsetX: -10,
+        fontSize: 28,
+        bold: false,
+        color: isDarkMode.value ? '#8a8a8a' : '#696969',
+      },
+      line: {
+        color: isDarkMode.value ? '#4a4a4a' : '#525252',
+        pulse: {
+          show: true,
+          loop: true, // runs only once if false
+          radius: 2,
+          color: pulseColor.value,
+          easing: 'ease-in-out',
+          trail: {
+            show: true,
+            length: 6,
+          },
+        },
+      },
+      plot: {
+        radius: 6,
+        stroke: isDarkMode.value ? '#FAFAFA' : '#0A0A0A',
+      },
+      title: {
+        text: lastDatapoint.value,
+        fontSize: 12,
+        color: isDarkMode.value ? '#8a8a8a' : '#696969',
+        bold: false,
+      },
+      verticalIndicator: {
+        strokeDasharray: 0,
+        color: isDarkMode.value ? '#FAFAFA' : '#525252',
+      },
+    },
+  }
+})
+</script>
+
+<template>
+  <div>
+    <div class="w-full overflow-hidden">
+      <ClientOnly>
+        <VueUiSparkline class="w-full max-w-xs" :dataset :config />
+        <template #fallback>
+          <!-- Skeleton matching sparkline layout: title row + chart with data label -->
+          <div class="min-h-[100px]">
+            <!-- Title row: date range (24px height) -->
+            <div class="h-6 flex items-center pl-3">
+              <span class="skeleton h-3 w-36" />
+            </div>
+            <!-- Chart area: data label left, sparkline right -->
+            <div class="aspect-[500/80] flex items-center">
+              <!-- Data label (covers ~42% width) -->
+              <div class="w-[42%] flex items-center pl-0.5">
+                <span class="skeleton h-7 w-24" />
+              </div>
+              <!-- Sparkline area (~58% width) -->
+              <div class="flex-1 flex items-end gap-0.5 h-4/5 pr-3">
+                <span
+                  v-for="i in 16"
+                  :key="i"
+                  class="skeleton flex-1 rounded-sm"
+                  :style="{ height: `${25 + ((i * 7) % 50)}%` }"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+      </ClientOnly>
+    </div>
+
+    <button
+      type="button"
+      @click="showModal = true"
+      class="link-subtle font-mono text-sm w-full flex justify-end items-center gap-1.5 shrink-0 mt-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+      :title="$t('package.downloads.analyze')"
+    >
+      <span class="i-carbon-data-analytics w-4 h-4" aria-hidden="true" />
+      <span>{{ $t('package.downloads.analyze') }}</span>
+    </button>
+
+    <ChartModal v-model:open="showModal">
+      <template #title>{{ $t('package.downloads.modal_title') }}</template>
+
+      <PackageDownloadAnalytics
+        :weeklyDownloads="weeklyDownloads"
+        :inModal="true"
+        :packageName="packageName"
+        :createdIso="createdIso"
+      />
+
+      <template #after="{ close }">
+        <div class="sm:hidden flex justify-center">
+          <button
+            type="button"
+            @click="close"
+            class="w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
+            :aria-label="$t('common.close')"
+          >
+            <span class="w-5 h-5 i-carbon-close" aria-hidden="true" />
+          </button>
+        </div>
+      </template>
+    </ChartModal>
+  </div>
+</template>
+
+<style>
+/** Overrides */
+.vue-ui-sparkline-title span {
+  padding: 0 !important;
+  letter-spacing: 0.04rem;
+}
+.vue-ui-sparkline text {
+  font-family:
+    Geist Mono,
+    monospace !important;
+}
+</style>
diff --git a/app/components/PackageInstallScriptsList.vue b/app/components/PackageInstallScriptsList.vue
new file mode 100644
index 000000000..5e737891c
--- /dev/null
+++ b/app/components/PackageInstallScriptsList.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+const props = defineProps<{
+  packageName: string
+  installScripts: {
+    scripts: ('preinstall' | 'install' | 'postinstall')[]
+    content?: Record<string, string>
+    npxDependencies: Record<string, string>
+  }
+}>()
+
+const outdatedNpxDeps = useOutdatedDependencies(() => props.installScripts.npxDependencies)
+const hasNpxDeps = computed(() => Object.keys(props.installScripts.npxDependencies).length > 0)
+const sortedNpxDeps = computed(() => {
+  return Object.entries(props.installScripts.npxDependencies).sort(([a], [b]) => a.localeCompare(b))
+})
+
+const isExpanded = shallowRef(false)
+</script>
+
+<template>
+  <div>
+    <!-- Script list: name as label, content below -->
+    <dl class="space-y-2 m-0">
+      <div v-for="scriptName in installScripts.scripts" :key="scriptName">
+        <dt class="font-mono text-xs text-fg-muted">{{ scriptName }}</dt>
+        <dd
+          tabindex="0"
+          class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          :title="installScripts.content?.[scriptName]"
+        >
+          {{ installScripts.content?.[scriptName] || $t('package.install_scripts.script_label') }}
+        </dd>
+      </div>
+    </dl>
+
+    <!-- npx packages (expandable) -->
+    <div v-if="hasNpxDeps" class="mt-3">
+      <button
+        type="button"
+        class="flex items-center gap-1.5 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+        :aria-expanded="isExpanded"
+        aria-controls="npx-packages-details"
+        @click="isExpanded = !isExpanded"
+      >
+        <span
+          class="i-carbon-chevron-right w-3 h-3 transition-transform duration-200"
+          :class="{ 'rotate-90': isExpanded }"
+          aria-hidden="true"
+        />
+        {{
+          $t(
+            'package.install_scripts.npx_packages',
+            { count: sortedNpxDeps.length },
+            sortedNpxDeps.length,
+          )
+        }}
+      </button>
+
+      <ul
+        v-show="isExpanded"
+        id="npx-packages-details"
+        class="mt-2 space-y-1 list-none m-0 p-0 pl-4"
+      >
+        <li
+          v-for="[dep, version] in sortedNpxDeps"
+          :key="dep"
+          class="flex items-center justify-between py-0.5 text-sm gap-2"
+        >
+          <NuxtLink
+            :to="{ name: 'package', params: { package: dep.split('/') } }"
+            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
+          >
+            {{ dep }}
+          </NuxtLink>
+          <span class="flex items-center gap-1">
+            <span
+              v-if="
+                outdatedNpxDeps[dep] &&
+                outdatedNpxDeps[dep].resolved !== outdatedNpxDeps[dep].latest
+              "
+              class="shrink-0"
+              :class="getVersionClass(outdatedNpxDeps[dep])"
+              :title="getOutdatedTooltip(outdatedNpxDeps[dep])"
+              aria-hidden="true"
+            >
+              <span class="i-carbon-warning-alt w-3 h-3 block" />
+            </span>
+            <span
+              class="font-mono text-xs text-right truncate"
+              :class="getVersionClass(outdatedNpxDeps[dep])"
+              :title="
+                outdatedNpxDeps[dep]
+                  ? outdatedNpxDeps[dep].resolved === outdatedNpxDeps[dep].latest
+                    ? $t('package.install_scripts.currently', {
+                        version: outdatedNpxDeps[dep].latest,
+                      })
+                    : getOutdatedTooltip(outdatedNpxDeps[dep])
+                  : version
+              "
+            >
+              {{ version }}
+            </span>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/components/PackageMaintainersList.vue b/app/components/PackageMaintainersList.vue
new file mode 100644
index 000000000..9d8c2bcb0
--- /dev/null
+++ b/app/components/PackageMaintainersList.vue
@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import type { NewOperation } from '~/composables/useConnector'
+
+const props = defineProps<{
+  packageName: string
+  maintainers?: Array<{ name?: string; email?: string }>
+}>()
+
+const {
+  isConnected,
+  lastExecutionTime,
+  npmUser,
+  addOperation,
+  listPackageCollaborators,
+  listTeamUsers,
+} = useConnector()
+
+const showAddOwner = shallowRef(false)
+const newOwnerUsername = shallowRef('')
+const isAdding = shallowRef(false)
+
+// Show admin controls when connected (let npm CLI handle permission errors)
+const canManageOwners = computed(() => isConnected.value)
+
+// Extract org name from scoped package
+const orgName = computed(() => {
+  if (!props.packageName.startsWith('@')) return null
+  const match = props.packageName.match(/^@([^/]+)\//)
+  return match ? match[1] : null
+})
+
+// Access data: who has access and via what
+const collaborators = shallowRef<Record<string, 'read-only' | 'read-write'>>({})
+const teamMembers = ref<Record<string, string[]>>({}) // team -> members
+const isLoadingAccess = shallowRef(false)
+
+// Compute access source for each maintainer
+const maintainerAccess = computed(() => {
+  if (!props.maintainers) return []
+
+  return props.maintainers.map(maintainer => {
+    const name = maintainer.name
+    if (!name) return { ...maintainer, accessVia: [] as string[] }
+
+    const accessVia: string[] = []
+
+    // Check if they're a direct owner (in collaborators as a user, not team)
+    if (collaborators.value[name]) {
+      accessVia.push('owner')
+    }
+
+    // Check which teams they're in that have access
+    for (const [collab, _perm] of Object.entries(collaborators.value)) {
+      // Teams are in format "org:team"
+      if (collab.includes(':')) {
+        const teamName = collab.split(':')[1]
+        const members = teamMembers.value[collab]
+        if (members?.includes(name)) {
+          accessVia.push(teamName || collab)
+        }
+      }
+    }
+
+    // If no specific access found, they're likely an owner
+    if (accessVia.length === 0) {
+      accessVia.push('owner')
+    }
+
+    return { ...maintainer, accessVia }
+  })
+})
+
+// Load access information
+async function loadAccessInfo() {
+  if (!isConnected.value) return
+
+  isLoadingAccess.value = true
+
+  try {
+    // Get collaborators (teams and users with access)
+    const collabResult = await listPackageCollaborators(props.packageName)
+    if (collabResult) {
+      collaborators.value = collabResult
+
+      // For each team collaborator, load its members
+      const teamPromises: Promise<void>[] = []
+      for (const collab of Object.keys(collabResult)) {
+        if (collab.includes(':')) {
+          teamPromises.push(
+            listTeamUsers(collab).then((members: string[] | null) => {
+              if (members) {
+                teamMembers.value[collab] = members
+              }
+            }),
+          )
+        }
+      }
+      await Promise.all(teamPromises)
+    }
+  } finally {
+    isLoadingAccess.value = false
+  }
+}
+
+async function handleAddOwner() {
+  if (!newOwnerUsername.value.trim()) return
+
+  isAdding.value = true
+  try {
+    const username = newOwnerUsername.value.trim().replace(/^@/, '')
+    const operation: NewOperation = {
+      type: 'owner:add',
+      params: {
+        user: username,
+        pkg: props.packageName,
+      },
+      description: `Add @${username} as owner of ${props.packageName}`,
+      command: `npm owner add ${username} ${props.packageName}`,
+    }
+
+    await addOperation(operation)
+    newOwnerUsername.value = ''
+    showAddOwner.value = false
+  } finally {
+    isAdding.value = false
+  }
+}
+
+async function handleRemoveOwner(username: string) {
+  const operation: NewOperation = {
+    type: 'owner:rm',
+    params: {
+      user: username,
+      pkg: props.packageName,
+    },
+    description: `Remove @${username} from ${props.packageName}`,
+    command: `npm owner rm ${username} ${props.packageName}`,
+  }
+
+  await addOperation(operation)
+}
+
+// Load access info when connected and for scoped packages
+watch(
+  [isConnected, () => props.packageName, lastExecutionTime],
+  ([connected]) => {
+    if (connected && orgName.value) {
+      loadAccessInfo()
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div v-if="maintainers?.length">
+    <ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.maintainers.list_label')">
+      <li
+        v-for="maintainer in maintainerAccess.slice(0, canManageOwners ? undefined : 5)"
+        :key="maintainer.name ?? maintainer.email"
+        class="flex items-center justify-between gap-2"
+      >
+        <div class="flex items-center gap-2 min-w-0">
+          <NuxtLink
+            v-if="maintainer.name"
+            :to="{ name: '~username', params: { username: maintainer.name } }"
+            class="link-subtle font-mono text-sm shrink-0"
+          >
+            @{{ maintainer.name }}
+          </NuxtLink>
+          <span v-else class="font-mono text-sm text-fg-muted">{{ maintainer.email }}</span>
+
+          <!-- Access source badges -->
+          <span
+            v-if="isConnected && maintainer.accessVia?.length && !isLoadingAccess"
+            class="text-xs text-fg-subtle truncate"
+          >
+            {{ $t('package.maintainers.via', { teams: maintainer.accessVia.join(', ') }) }}
+          </span>
+          <span
+            v-if="canManageOwners && maintainer.name === npmUser"
+            class="text-xs text-fg-subtle shrink-0"
+            >{{ $t('package.maintainers.you') }}</span
+          >
+        </div>
+
+        <!-- Remove button (only when can manage and not self) -->
+        <button
+          v-if="canManageOwners && maintainer.name && maintainer.name !== npmUser"
+          type="button"
+          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          :aria-label="$t('package.maintainers.remove_owner', { name: maintainer.name })"
+          @click="handleRemoveOwner(maintainer.name)"
+        >
+          <span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
+        </button>
+      </li>
+    </ul>
+
+    <!-- Add owner form (only when can manage) -->
+    <div v-if="canManageOwners" class="mt-3">
+      <div v-if="showAddOwner">
+        <form class="flex items-center gap-2" @submit.prevent="handleAddOwner">
+          <label for="add-owner-username" class="sr-only">{{
+            $t('package.maintainers.username_to_add')
+          }}</label>
+          <input
+            id="add-owner-username"
+            v-model="newOwnerUsername"
+            type="text"
+            name="add-owner-username"
+            :placeholder="$t('package.maintainers.username_placeholder')"
+            v-bind="noCorrect"
+            class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          />
+          <button
+            type="submit"
+            :disabled="!newOwnerUsername.trim() || isAdding"
+            class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          >
+            {{ isAdding ? '...' : $t('package.maintainers.add_button') }}
+          </button>
+          <button
+            type="button"
+            class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            :aria-label="$t('package.maintainers.cancel_add')"
+            @click="showAddOwner = false"
+          >
+            <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
+          </button>
+        </form>
+      </div>
+      <button
+        v-else
+        type="button"
+        class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        @click="showAddOwner = true"
+      >
+        {{ $t('package.maintainers.add_owner') }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/PackageOptionalDependenciesList.vue b/app/components/PackageOptionalDependenciesList.vue
new file mode 100644
index 000000000..524b093c2
--- /dev/null
+++ b/app/components/PackageOptionalDependenciesList.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const props = defineProps<{
+  optionalDependencies: Record<string, string>
+}>()
+
+// Expanded state
+const optionalDepsExpanded = shallowRef(false)
+
+// Sort optional dependencies alphabetically
+const sortedOptionalDependencies = computed(() => {
+  if (!props.optionalDependencies) return []
+  return Object.entries(props.optionalDependencies).sort(([a], [b]) => a.localeCompare(b))
+})
+</script>
+
+<template>
+  <div v-if="sortedOptionalDependencies.length > 0">
+    <ul
+      class="space-y-1 list-none m-0 p-0"
+      :aria-label="$t('package.optional_dependencies.list_label')"
+    >
+      <li
+        v-for="[dep, version] in sortedOptionalDependencies.slice(
+          0,
+          optionalDepsExpanded ? undefined : 10,
+        )"
+        :key="dep"
+        class="flex items-center justify-between py-1 text-sm gap-2"
+      >
+        <NuxtLink
+          :to="{ name: 'package', params: { package: dep.split('/') } }"
+          class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
+        >
+          {{ dep }}
+        </NuxtLink>
+        <NuxtLink
+          :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
+          class="font-mono text-xs text-fg-subtle max-w-[50%] text-right truncate"
+          :title="version"
+        >
+          {{ version }}
+        </NuxtLink>
+      </li>
+    </ul>
+    <button
+      v-if="sortedOptionalDependencies.length > 10 && !optionalDepsExpanded"
+      type="button"
+      class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      @click="optionalDepsExpanded = true"
+    >
+      {{
+        $t('package.optional_dependencies.show_all', { count: sortedOptionalDependencies.length })
+      }}
+    </button>
+  </div>
+</template>
diff --git a/app/components/PackagePeerDependenciesList.vue b/app/components/PackagePeerDependenciesList.vue
new file mode 100644
index 000000000..d5f657e55
--- /dev/null
+++ b/app/components/PackagePeerDependenciesList.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const props = defineProps<{
+  peerDependencies: Record<string, string>
+  peerDependenciesMeta?: Record<string, { optional?: boolean }>
+}>()
+
+// Expanded state
+const peerDepsExpanded = shallowRef(false)
+
+// Sort peer dependencies alphabetically, with required first then optional
+const sortedPeerDependencies = computed(() => {
+  if (!props.peerDependencies) return []
+
+  return Object.entries(props.peerDependencies)
+    .map(([name, version]) => ({
+      name,
+      version,
+      optional: props.peerDependenciesMeta?.[name]?.optional ?? false,
+    }))
+    .sort((a, b) => {
+      // Required first, then optional
+      if (a.optional !== b.optional) return a.optional ? 1 : -1
+      return a.name.localeCompare(b.name)
+    })
+})
+</script>
+
+<template>
+  <div v-if="sortedPeerDependencies.length > 0">
+    <ul
+      class="space-y-1 list-none m-0 p-0"
+      :aria-label="$t('package.peer_dependencies.list_label')"
+    >
+      <li
+        v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
+        :key="peer.name"
+        class="flex items-center justify-between py-1 text-sm gap-2"
+      >
+        <div class="flex items-center gap-2 min-w-0">
+          <NuxtLink
+            :to="{ name: 'package', params: { package: peer.name.split('/') } }"
+            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
+          >
+            {{ peer.name }}
+          </NuxtLink>
+          <span
+            v-if="peer.optional"
+            class="px-1 py-0.5 font-mono text-[10px] text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
+            :title="$t('package.dependencies.optional')"
+          >
+            {{ $t('package.dependencies.optional') }}
+          </span>
+        </div>
+        <NuxtLink
+          :to="{
+            name: 'package',
+            params: { package: [...peer.name.split('/'), 'v', peer.version] },
+          }"
+          class="font-mono text-xs text-fg-subtle max-w-[40%] text-right truncate"
+          :title="peer.version"
+        >
+          {{ peer.version }}
+        </NuxtLink>
+      </li>
+    </ul>
+    <button
+      v-if="sortedPeerDependencies.length > 10 && !peerDepsExpanded"
+      type="button"
+      class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      @click="peerDepsExpanded = true"
+    >
+      {{ $t('package.peer_dependencies.show_all', { count: sortedPeerDependencies.length }) }}
+    </button>
+  </div>
+</template>
diff --git a/app/components/PackagePlaygroundsList.vue b/app/components/PackagePlaygroundsList.vue
new file mode 100644
index 000000000..daa54cd3f
--- /dev/null
+++ b/app/components/PackagePlaygroundsList.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { PlaygroundLink } from '#shared/types'
+
+const props = defineProps<{
+  links: PlaygroundLink[]
+}>()
+
+// Map provider id to icon class
+const providerIcons: Record<string, string> = {
+  'stackblitz': 'i-simple-icons-stackblitz',
+  'codesandbox': 'i-simple-icons-codesandbox',
+  'codepen': 'i-simple-icons-codepen',
+  'replit': 'i-simple-icons-replit',
+  'gitpod': 'i-simple-icons-gitpod',
+  'vue-playground': 'i-simple-icons-vuedotjs',
+  'nuxt-new': 'i-simple-icons-nuxtdotjs',
+  'vite-new': 'i-simple-icons-vite',
+  'jsfiddle': 'i-carbon-code',
+}
+
+// Map provider id to color class
+const providerColors: Record<string, string> = {
+  'stackblitz': 'text-provider-stackblitz',
+  'codesandbox': 'text-provider-codesandbox',
+  'codepen': 'text-provider-codepen',
+  'replit': 'text-provider-replit',
+  'gitpod': 'text-provider-gitpod',
+  'vue-playground': 'text-provider-vue',
+  'nuxt-new': 'text-provider-nuxt',
+  'vite-new': 'text-provider-vite',
+  'jsfiddle': 'text-provider-jsfiddle',
+}
+
+function getIcon(provider: string): string {
+  return providerIcons[provider] || 'i-carbon-play'
+}
+
+function getColor(provider: string): string {
+  return providerColors[provider] || 'text-fg-muted'
+}
+
+// Dropdown state
+const isOpen = shallowRef(false)
+const dropdownRef = useTemplateRef('dropdownRef')
+const menuRef = useTemplateRef('menuRef')
+const focusedIndex = shallowRef(-1)
+
+onClickOutside(dropdownRef, () => {
+  isOpen.value = false
+})
+
+// Single vs multiple
+const hasSingleLink = computed(() => props.links.length === 1)
+const hasMultipleLinks = computed(() => props.links.length > 1)
+const firstLink = computed(() => props.links[0])
+
+function closeDropdown() {
+  isOpen.value = false
+  focusedIndex.value = -1
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (!isOpen.value) {
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      isOpen.value = true
+      focusedIndex.value = 0
+      nextTick(() => focusMenuItem(0))
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'Escape':
+      event.preventDefault()
+      closeDropdown()
+      break
+    case 'ArrowDown':
+      event.preventDefault()
+      focusedIndex.value = (focusedIndex.value + 1) % props.links.length
+      focusMenuItem(focusedIndex.value)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      focusedIndex.value = focusedIndex.value <= 0 ? props.links.length - 1 : focusedIndex.value - 1
+      focusMenuItem(focusedIndex.value)
+      break
+    case 'Home':
+      event.preventDefault()
+      focusedIndex.value = 0
+      focusMenuItem(0)
+      break
+    case 'End':
+      event.preventDefault()
+      focusedIndex.value = props.links.length - 1
+      focusMenuItem(props.links.length - 1)
+      break
+    case 'Tab':
+      closeDropdown()
+      break
+  }
+}
+
+function focusMenuItem(index: number) {
+  const items = menuRef.value?.querySelectorAll<HTMLElement>('[role="menuitem"]')
+  items?.[index]?.focus()
+}
+</script>
+
+<template>
+  <div v-if="links.length > 0" ref="dropdownRef" class="relative">
+    <!-- Single link: direct button -->
+    <AppTooltip v-if="hasSingleLink && firstLink" :text="firstLink.providerName" class="w-full">
+      <a
+        :href="firstLink.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+      >
+        <span
+          :class="[getIcon(firstLink.provider), getColor(firstLink.provider), 'w-4 h-4 shrink-0']"
+          aria-hidden="true"
+        />
+        <span class="truncate text-fg-muted">{{ firstLink.label }}</span>
+      </a>
+    </AppTooltip>
+
+    <!-- Multiple links: dropdown button -->
+    <button
+      v-if="hasMultipleLinks"
+      type="button"
+      aria-haspopup="true"
+      :aria-expanded="isOpen"
+      class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+      @click="isOpen = !isOpen"
+      @keydown="handleKeydown"
+    >
+      <span class="flex items-center gap-2">
+        <span class="i-carbon-play w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
+        <span class="text-fg-muted"
+          >{{ $t('package.playgrounds.choose') }} ({{ links.length }})</span
+        >
+      </span>
+      <span
+        class="i-carbon-chevron-down w-3 h-3 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none"
+        :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
+      />
+    </button>
+
+    <!-- Dropdown menu -->
+    <Transition
+      enter-active-class="transition duration-150 ease-out motion-reduce:transition-none"
+      enter-from-class="opacity-0 scale-95 motion-reduce:scale-100"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition duration-100 ease-in motion-reduce:transition-none"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95 motion-reduce:scale-100"
+    >
+      <div
+        v-if="isOpen && hasMultipleLinks"
+        ref="menuRef"
+        role="menu"
+        class="absolute top-full left-0 right-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 overflow-visible"
+        @keydown="handleKeydown"
+      >
+        <AppTooltip v-for="link in links" :key="link.url" :text="link.providerName" class="block">
+          <a
+            :href="link.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            role="menuitem"
+            class="flex items-center gap-2 px-3 py-2 text-sm font-mono text-fg-muted hover:text-fg hover:bg-bg-muted focus-visible:outline-none focus-visible:text-fg focus-visible:bg-bg-muted transition-colors duration-150"
+            @click="closeDropdown"
+          >
+            <span
+              :class="[getIcon(link.provider), getColor(link.provider), 'w-4 h-4 shrink-0']"
+              aria-hidden="true"
+            />
+            <span class="truncate">{{ link.label }}</span>
+          </a>
+        </AppTooltip>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/app/components/PackageVersionsList.vue b/app/components/PackageVersionsList.vue
new file mode 100644
index 000000000..04f41a9e9
--- /dev/null
+++ b/app/components/PackageVersionsList.vue
@@ -0,0 +1,724 @@
+<script setup lang="ts">
+import type { PackumentVersion, PackageVersionInfo } from '#shared/types'
+import type { RouteLocationRaw } from 'vue-router'
+import { compare } from 'semver'
+import {
+  buildVersionToTagsMap,
+  filterExcludedTags,
+  getPrereleaseChannel,
+  getVersionGroupKey,
+  getVersionGroupLabel,
+  isSameVersionGroup,
+} from '~/utils/versions'
+import { fetchAllPackageVersions } from '~/composables/useNpmRegistry'
+
+const props = defineProps<{
+  packageName: string
+  versions: Record<string, PackumentVersion>
+  distTags: Record<string, string>
+  time: Record<string, string>
+}>()
+
+/** Maximum number of dist-tag rows to show before collapsing into "Other versions" */
+const MAX_VISIBLE_TAGS = 10
+
+/** A version with its metadata */
+interface VersionDisplay {
+  version: string
+  time?: string
+  tags?: string[]
+  hasProvenance: boolean
+  deprecated?: string
+}
+
+// Check if a version has provenance/attestations
+function hasProvenance(version: PackumentVersion | undefined): boolean {
+  if (!version?.dist) return false
+  const dist = version.dist as { attestations?: unknown }
+  return !!dist.attestations
+}
+
+// Build route object for package version link
+function versionRoute(version: string): RouteLocationRaw {
+  return {
+    name: 'package',
+    params: { package: [...props.packageName.split('/'), 'v', version] },
+  }
+}
+
+// Version to tags lookup (supports multiple tags per version)
+const versionToTags = computed(() => buildVersionToTagsMap(props.distTags))
+
+// All tag rows derived from props (SSR-safe)
+// Deduplicates so each version appears only once, with all its tags
+const allTagRows = computed(() => {
+  // Group tags by version with their metadata
+  const versionMap = new Map<
+    string,
+    { tags: string[]; versionData: PackumentVersion | undefined }
+  >()
+  for (const [tag, version] of Object.entries(props.distTags)) {
+    const existing = versionMap.get(version)
+    if (existing) {
+      existing.tags.push(tag)
+    } else {
+      versionMap.set(version, {
+        tags: [tag],
+        versionData: props.versions[version],
+      })
+    }
+  }
+
+  // Sort tags within each version: 'latest' first, then alphabetically
+  for (const entry of versionMap.values()) {
+    entry.tags.sort((a, b) => {
+      if (a === 'latest') return -1
+      if (b === 'latest') return 1
+      return a.localeCompare(b)
+    })
+  }
+
+  // Convert to rows, using the first (most important) tag as the primary
+  return Array.from(versionMap.entries())
+    .map(([version, { tags, versionData }]) => ({
+      id: `version:${version}`,
+      tag: tags[0]!, // Primary tag for expand/collapse logic
+      tags, // All tags for this version
+      primaryVersion: {
+        version,
+        time: props.time[version],
+        tags,
+        hasProvenance: hasProvenance(versionData),
+        deprecated: versionData?.deprecated,
+      } as VersionDisplay,
+    }))
+    .sort((a, b) => compare(b.primaryVersion.version, a.primaryVersion.version))
+})
+
+// Check if the whole package is deprecated (latest version is deprecated)
+const isPackageDeprecated = computed(() => {
+  const latestVersion = props.distTags.latest
+  if (!latestVersion) return false
+  return !!props.versions[latestVersion]?.deprecated
+})
+
+// Visible tag rows: limited to MAX_VISIBLE_TAGS
+// If package is NOT deprecated, filter out deprecated tags from visible list
+const visibleTagRows = computed(() => {
+  const rows = isPackageDeprecated.value
+    ? allTagRows.value
+    : allTagRows.value.filter(row => !row.primaryVersion.deprecated)
+  return rows.slice(0, MAX_VISIBLE_TAGS)
+})
+
+// Hidden tag rows (all other tags) - shown in "Other versions"
+const hiddenTagRows = computed(() =>
+  allTagRows.value.filter(row => !visibleTagRows.value.includes(row)),
+)
+
+// Client-side state for expansion and loaded versions
+const expandedTags = ref<Set<string>>(new Set())
+const tagVersions = ref<Map<string, VersionDisplay[]>>(new Map())
+const loadingTags = ref<Set<string>>(new Set())
+
+const otherVersionsExpanded = shallowRef(false)
+const expandedMajorGroups = ref<Set<string>>(new Set())
+const otherMajorGroups = shallowRef<
+  Array<{ groupKey: string; label: string; versions: VersionDisplay[] }>
+>([])
+const otherVersionsLoading = shallowRef(false)
+
+// Cached full version list (local to component instance)
+const allVersionsCache = shallowRef<PackageVersionInfo[] | null>(null)
+const loadingVersions = shallowRef(false)
+const hasLoadedAll = shallowRef(false)
+
+// Load all versions using shared function
+async function loadAllVersions(): Promise<PackageVersionInfo[]> {
+  if (allVersionsCache.value) return allVersionsCache.value
+
+  if (loadingVersions.value) {
+    await new Promise<void>(resolve => {
+      const unwatch = watch(allVersionsCache, val => {
+        if (val) {
+          unwatch()
+          resolve()
+        }
+      })
+    })
+    return allVersionsCache.value!
+  }
+
+  loadingVersions.value = true
+  try {
+    const versions = await fetchAllPackageVersions(props.packageName)
+    allVersionsCache.value = versions
+    hasLoadedAll.value = true
+    return versions
+  } finally {
+    loadingVersions.value = false
+  }
+}
+
+// Process loaded versions
+function processLoadedVersions(allVersions: PackageVersionInfo[]) {
+  const distTags = props.distTags
+
+  // For each tag, find versions in its channel (same major + same prerelease channel)
+  const claimedVersions = new Set<string>()
+
+  for (const row of allTagRows.value) {
+    const tagVersion = distTags[row.tag]
+    if (!tagVersion) continue
+
+    const tagChannel = getPrereleaseChannel(tagVersion)
+
+    // Find all versions in the same version group + prerelease channel
+    // For 0.x versions, this means same major.minor; for 1.x+, same major
+    const channelVersions = allVersions
+      .filter(v => {
+        const vChannel = getPrereleaseChannel(v.version)
+        return isSameVersionGroup(v.version, tagVersion) && vChannel === tagChannel
+      })
+      .sort((a, b) => compare(b.version, a.version))
+      .map(v => ({
+        version: v.version,
+        time: v.time,
+        tags: versionToTags.value.get(v.version),
+        hasProvenance: v.hasProvenance,
+        deprecated: v.deprecated,
+      }))
+
+    tagVersions.value.set(row.tag, channelVersions)
+
+    for (const v of channelVersions) {
+      claimedVersions.add(v.version)
+    }
+  }
+
+  // Group unclaimed versions by version group key
+  // For 0.x versions, group by major.minor (e.g., "0.9", "0.10")
+  // For 1.x+, group by major (e.g., "1", "2")
+  const byGroupKey = new Map<string, VersionDisplay[]>()
+
+  for (const v of allVersions) {
+    if (claimedVersions.has(v.version)) continue
+
+    const groupKey = getVersionGroupKey(v.version)
+    if (!byGroupKey.has(groupKey)) {
+      byGroupKey.set(groupKey, [])
+    }
+    byGroupKey.get(groupKey)!.push({
+      version: v.version,
+      time: v.time,
+      tags: versionToTags.value.get(v.version),
+      hasProvenance: v.hasProvenance,
+      deprecated: v.deprecated,
+    })
+  }
+
+  // Sort within each group
+  for (const versions of byGroupKey.values()) {
+    versions.sort((a, b) => compare(b.version, a.version))
+  }
+
+  // Build groups sorted by group key descending
+  // Sort: "2", "1", "0.10", "0.9" (numerically descending)
+  const sortedGroupKeys = Array.from(byGroupKey.keys()).sort((a, b) => {
+    const [aMajor, aMinor] = a.split('.').map(Number)
+    const [bMajor, bMinor] = b.split('.').map(Number)
+    if (aMajor !== bMajor) return (bMajor ?? 0) - (aMajor ?? 0)
+    return (bMinor ?? -1) - (aMinor ?? -1)
+  })
+  otherMajorGroups.value = sortedGroupKeys.map(groupKey => ({
+    groupKey,
+    label: getVersionGroupLabel(groupKey),
+    versions: byGroupKey.get(groupKey)!,
+  }))
+  expandedMajorGroups.value.clear()
+}
+
+// Expand a tag row
+async function expandTagRow(tag: string) {
+  if (expandedTags.value.has(tag)) {
+    expandedTags.value.delete(tag)
+    expandedTags.value = new Set(expandedTags.value)
+    return
+  }
+
+  if (!hasLoadedAll.value) {
+    loadingTags.value.add(tag)
+    loadingTags.value = new Set(loadingTags.value)
+    try {
+      const allVersions = await loadAllVersions()
+      processLoadedVersions(allVersions)
+    } catch (error) {
+      // oxlint-disable-next-line no-console -- error logging
+      console.error('Failed to load versions:', error)
+    } finally {
+      loadingTags.value.delete(tag)
+      loadingTags.value = new Set(loadingTags.value)
+    }
+  }
+
+  expandedTags.value.add(tag)
+  expandedTags.value = new Set(expandedTags.value)
+}
+
+// Expand "Other versions" section
+async function expandOtherVersions() {
+  if (otherVersionsExpanded.value) {
+    otherVersionsExpanded.value = false
+    return
+  }
+
+  if (!hasLoadedAll.value) {
+    otherVersionsLoading.value = true
+    try {
+      const allVersions = await loadAllVersions()
+      processLoadedVersions(allVersions)
+    } catch (error) {
+      // oxlint-disable-next-line no-console -- error logging
+      console.error('Failed to load versions:', error)
+    } finally {
+      otherVersionsLoading.value = false
+    }
+  }
+
+  otherVersionsExpanded.value = true
+}
+
+// Toggle a version group
+function toggleMajorGroup(groupKey: string) {
+  if (expandedMajorGroups.value.has(groupKey)) {
+    expandedMajorGroups.value.delete(groupKey)
+  } else {
+    expandedMajorGroups.value.add(groupKey)
+  }
+}
+
+// Get versions for a tag (from loaded data or empty)
+function getTagVersions(tag: string): VersionDisplay[] {
+  return tagVersions.value.get(tag) ?? []
+}
+</script>
+
+<template>
+  <div v-if="allTagRows.length > 0" class="space-y-0.5 min-w-0">
+    <!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
+    <div v-for="row in visibleTagRows" :key="row.id">
+      <div class="flex items-center gap-2">
+        <!-- Expand button (only if there are more versions to show) -->
+        <button
+          v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
+          type="button"
+          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
+          :aria-expanded="expandedTags.has(row.tag)"
+          :aria-label="
+            expandedTags.has(row.tag)
+              ? $t('package.versions.collapse', { tag: row.tag })
+              : $t('package.versions.expand', { tag: row.tag })
+          "
+          @click="expandTagRow(row.tag)"
+        >
+          <span
+            v-if="loadingTags.has(row.tag)"
+            class="i-carbon-rotate-180 w-3 h-3 motion-safe:animate-spin"
+            data-testid="loading-spinner"
+            aria-hidden="true"
+          />
+          <span
+            v-else
+            class="w-3 h-3 transition-transform duration-200"
+            :class="expandedTags.has(row.tag) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
+            aria-hidden="true"
+          />
+        </button>
+        <span v-else class="w-4" />
+
+        <!-- Version info -->
+        <div class="flex-1 py-1.5 min-w-0">
+          <div class="flex items-center justify-between gap-2">
+            <NuxtLink
+              :to="versionRoute(row.primaryVersion.version)"
+              class="font-mono text-sm transition-colors duration-200 truncate"
+              :class="
+                row.primaryVersion.deprecated
+                  ? 'text-red-400 hover:text-red-300'
+                  : 'text-fg-muted hover:text-fg'
+              "
+              :title="
+                row.primaryVersion.deprecated
+                  ? $t('package.versions.deprecated_title', {
+                      version: row.primaryVersion.version,
+                    })
+                  : row.primaryVersion.version
+              "
+            >
+              {{ row.primaryVersion.version }}
+            </NuxtLink>
+            <div class="flex items-center gap-2 shrink-0">
+              <DateTime
+                v-if="row.primaryVersion.time"
+                :datetime="row.primaryVersion.time"
+                year="numeric"
+                month="short"
+                day="numeric"
+                class="text-xs text-fg-subtle"
+              />
+              <ProvenanceBadge
+                v-if="row.primaryVersion.hasProvenance"
+                :package-name="packageName"
+                :version="row.primaryVersion.version"
+                compact
+              />
+            </div>
+          </div>
+          <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
+            <span
+              v-for="tag in row.tags"
+              :key="tag"
+              class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
+              :title="tag"
+            >
+              {{ tag }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Expanded versions -->
+      <div
+        v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
+        class="ml-4 pl-2 border-l border-border space-y-0.5"
+      >
+        <div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
+          <div class="flex items-center justify-between gap-2">
+            <NuxtLink
+              :to="versionRoute(v.version)"
+              class="font-mono text-xs transition-colors duration-200 truncate"
+              :class="
+                v.deprecated
+                  ? 'text-red-400 hover:text-red-300'
+                  : 'text-fg-subtle hover:text-fg-muted'
+              "
+              :title="
+                v.deprecated
+                  ? $t('package.versions.deprecated_title', { version: v.version })
+                  : v.version
+              "
+            >
+              {{ v.version }}
+            </NuxtLink>
+            <div class="flex items-center gap-2 shrink-0">
+              <DateTime
+                v-if="v.time"
+                :datetime="v.time"
+                class="text-[10px] text-fg-subtle"
+                year="numeric"
+                month="short"
+                day="numeric"
+              />
+              <ProvenanceBadge
+                v-if="v.hasProvenance"
+                :package-name="packageName"
+                :version="v.version"
+                compact
+              />
+            </div>
+          </div>
+          <div
+            v-if="v.tags?.length && filterExcludedTags(v.tags, row.tags).length"
+            class="flex items-center gap-1 mt-0.5"
+          >
+            <span
+              v-for="tag in filterExcludedTags(v.tags, row.tags)"
+              :key="tag"
+              class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
+              :title="tag"
+            >
+              {{ tag }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Other versions section -->
+    <div class="pt-1">
+      <button
+        type="button"
+        class="flex items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
+        :aria-expanded="otherVersionsExpanded"
+        :aria-label="
+          otherVersionsExpanded
+            ? $t('package.versions.collapse_other')
+            : $t('package.versions.expand_other')
+        "
+        @click="expandOtherVersions"
+      >
+        <span
+          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors"
+        >
+          <span
+            v-if="otherVersionsLoading"
+            class="i-carbon-rotate-180 w-3 h-3 motion-safe:animate-spin"
+            data-testid="loading-spinner"
+            aria-hidden="true"
+          />
+          <span
+            v-else
+            class="w-3 h-3 transition-transform duration-200"
+            :class="otherVersionsExpanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
+            aria-hidden="true"
+          />
+        </span>
+        <span class="text-xs text-fg-muted py-1.5">
+          {{ $t('package.versions.other_versions') }}
+          <span v-if="hiddenTagRows.length > 0" class="text-fg-subtle">
+            ({{ $t('package.versions.more_tagged', { count: hiddenTagRows.length }) }})
+          </span>
+        </span>
+      </button>
+
+      <!-- Expanded other versions -->
+      <div v-if="otherVersionsExpanded" class="ml-4 pl-2 border-l border-border space-y-0.5">
+        <!-- Hidden tag rows (overflow from visible tags) -->
+        <div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
+          <div class="flex items-center justify-between gap-2">
+            <NuxtLink
+              :to="versionRoute(row.primaryVersion.version)"
+              class="font-mono text-xs transition-colors duration-200 truncate"
+              :class="
+                row.primaryVersion.deprecated
+                  ? 'text-red-400 hover:text-red-300'
+                  : 'text-fg-muted hover:text-fg'
+              "
+              :title="
+                row.primaryVersion.deprecated
+                  ? $t('package.versions.deprecated_title', {
+                      version: row.primaryVersion.version,
+                    })
+                  : row.primaryVersion.version
+              "
+            >
+              {{ row.primaryVersion.version }}
+            </NuxtLink>
+            <div class="flex items-center gap-2 shrink-0">
+              <DateTime
+                v-if="row.primaryVersion.time"
+                :datetime="row.primaryVersion.time"
+                class="text-[10px] text-fg-subtle"
+                year="numeric"
+                month="short"
+                day="numeric"
+              />
+            </div>
+          </div>
+          <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
+            <span
+              v-for="tag in row.tags"
+              :key="tag"
+              class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
+              :title="tag"
+            >
+              {{ tag }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Version groups (untagged versions) -->
+        <template v-if="otherMajorGroups.length > 0">
+          <div v-for="group in otherMajorGroups" :key="group.groupKey">
+            <!-- Version group header -->
+            <div v-if="group.versions.length > 1" class="py-1">
+              <div class="flex items-center justify-between gap-2">
+                <div class="flex items-center gap-2 min-w-0">
+                  <button
+                    type="button"
+                    class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
+                    :aria-expanded="expandedMajorGroups.has(group.groupKey)"
+                    :aria-label="
+                      expandedMajorGroups.has(group.groupKey)
+                        ? $t('package.versions.collapse_major', { major: group.label })
+                        : $t('package.versions.expand_major', { major: group.label })
+                    "
+                    @click="toggleMajorGroup(group.groupKey)"
+                  >
+                    <span
+                      class="w-3 h-3 transition-transform duration-200"
+                      :class="
+                        expandedMajorGroups.has(group.groupKey)
+                          ? 'i-carbon-chevron-down'
+                          : 'i-carbon-chevron-right'
+                      "
+                      aria-hidden="true"
+                    />
+                  </button>
+                  <NuxtLink
+                    v-if="group.versions[0]?.version"
+                    :to="versionRoute(group.versions[0]?.version)"
+                    class="font-mono text-xs transition-colors duration-200 truncate"
+                    :class="
+                      group.versions[0]?.deprecated
+                        ? 'text-red-400 hover:text-red-300'
+                        : 'text-fg-muted hover:text-fg'
+                    "
+                    :title="
+                      group.versions[0]?.deprecated
+                        ? $t('package.versions.deprecated_title', {
+                            version: group.versions[0]?.version,
+                          })
+                        : group.versions[0]?.version
+                    "
+                  >
+                    {{ group.versions[0]?.version }}
+                  </NuxtLink>
+                </div>
+                <div class="flex items-center gap-2 shrink-0">
+                  <DateTime
+                    v-if="group.versions[0]?.time"
+                    :datetime="group.versions[0]?.time"
+                    class="text-[10px] text-fg-subtle"
+                    year="numeric"
+                    month="short"
+                    day="numeric"
+                  />
+                  <ProvenanceBadge
+                    v-if="group.versions[0]?.hasProvenance"
+                    :package-name="packageName"
+                    :version="group.versions[0]?.version"
+                    compact
+                  />
+                </div>
+              </div>
+              <div
+                v-if="group.versions[0]?.tags?.length"
+                class="flex items-center gap-1 ml-5 flex-wrap"
+              >
+                <span
+                  v-for="tag in group.versions[0].tags"
+                  :key="tag"
+                  class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
+                  :title="tag"
+                >
+                  {{ tag }}
+                </span>
+              </div>
+            </div>
+            <!-- Single version (no expand needed) -->
+            <div v-else class="py-1">
+              <div class="flex items-center justify-between gap-2">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span class="w-4 shrink-0" />
+                  <NuxtLink
+                    v-if="group.versions[0]?.version"
+                    :to="versionRoute(group.versions[0]?.version)"
+                    class="font-mono text-xs transition-colors duration-200 truncate"
+                    :class="
+                      group.versions[0]?.deprecated
+                        ? 'text-red-400 hover:text-red-300'
+                        : 'text-fg-muted hover:text-fg'
+                    "
+                    :title="
+                      group.versions[0]?.deprecated
+                        ? $t('package.versions.deprecated_title', {
+                            version: group.versions[0]?.version,
+                          })
+                        : group.versions[0]?.version
+                    "
+                  >
+                    {{ group.versions[0]?.version }}
+                  </NuxtLink>
+                </div>
+                <div class="flex items-center gap-2 shrink-0">
+                  <DateTime
+                    v-if="group.versions[0]?.time"
+                    :datetime="group.versions[0]?.time"
+                    class="text-[10px] text-fg-subtle"
+                    year="numeric"
+                    month="short"
+                    day="numeric"
+                  />
+                  <ProvenanceBadge
+                    v-if="group.versions[0]?.hasProvenance"
+                    :package-name="packageName"
+                    :version="group.versions[0]?.version"
+                    compact
+                  />
+                </div>
+              </div>
+              <div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ml-5">
+                <span
+                  v-for="tag in group.versions[0].tags"
+                  :key="tag"
+                  class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
+                >
+                  {{ tag }}
+                </span>
+              </div>
+            </div>
+
+            <!-- Version group versions -->
+            <div
+              v-if="expandedMajorGroups.has(group.groupKey) && group.versions.length > 1"
+              class="ml-6 space-y-0.5"
+            >
+              <div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
+                <div class="flex items-center justify-between gap-2">
+                  <NuxtLink
+                    :to="versionRoute(v.version)"
+                    class="font-mono text-xs transition-colors duration-200 truncate"
+                    :class="
+                      v.deprecated
+                        ? 'text-red-400 hover:text-red-300'
+                        : 'text-fg-subtle hover:text-fg-muted'
+                    "
+                    :title="
+                      v.deprecated
+                        ? $t('package.versions.deprecated_title', { version: v.version })
+                        : v.version
+                    "
+                  >
+                    {{ v.version }}
+                  </NuxtLink>
+                  <div class="flex items-center gap-2 shrink-0">
+                    <DateTime
+                      v-if="v.time"
+                      :datetime="v.time"
+                      class="text-[10px] text-fg-subtle"
+                      year="numeric"
+                      month="short"
+                      day="numeric"
+                    />
+                    <ProvenanceBadge
+                      v-if="v.hasProvenance"
+                      :package-name="packageName"
+                      :version="v.version"
+                      compact
+                    />
+                  </div>
+                </div>
+                <div v-if="v.tags?.length" class="flex items-center gap-1 mt-0.5">
+                  <span
+                    v-for="tag in v.tags"
+                    :key="tag"
+                    class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
+                  >
+                    {{ tag }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <div
+          v-else-if="hasLoadedAll && hiddenTagRows.length === 0"
+          class="py-1 text-xs text-fg-subtle"
+        >
+          {{ $t('package.versions.all_covered') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 17de5aceb..56c9ae2cc 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -887,63 +887,32 @@ function handleClick(event: MouseEvent) {
         </ClientOnly>
       </div>
 
-      <!-- README -->
-      <section id="readme" class="area-readme min-w-0 scroll-mt-20">
-        <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-4">
-          <a
-            href="#readme"
-            class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-          >
-            {{ $t('package.readme.title') }}
-            <span
-              class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-              aria-hidden="true"
-            />
-          </a>
-        </h2>
-        <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
-        <div
-          v-if="readmeData?.html"
-          class="readme-content prose prose-invert max-w-[70ch]"
-          v-html="readmeData.html"
-          @click="handleClick"
-        />
-        <p v-else class="text-fg-subtle italic">
-          {{ $t('package.readme.no_readme') }}
-          <a v-if="repositoryUrl" :href="repositoryUrl" rel="noopener noreferrer" class="link">{{
-            $t('package.readme.view_on_github')
-          }}</a>
-        </p>
-      </section>
-
-      <div class="area-sidebar">
+      <div class="area-sidebar self-start">
         <!-- Sidebar -->
-        <aside class="sticky top-20 space-y-6 sm:space-y-8 min-w-0 overflow-hidden">
-          <!-- Maintainers (with admin actions when connected) -->
-          <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
+        <aside class="sticky top-20 px-2 py-1 space-y-4 sm:space-y-6 min-w-0 overflow-hidden">
+          <!-- Maintainers -->
+          <CollapsibleSection v-if="pkg.maintainers?.length" id="maintainers">
+            <template #title>
+              <h2>{{ $t('package.maintainers.title') }}</h2>
+            </template>
+            <PackageMaintainersList :package-name="pkg.name" :maintainers="pkg.maintainers" />
+          </CollapsibleSection>
 
-          <!-- Team access controls (for scoped packages when connected) -->
+          <!-- Access Controls -->
           <ClientOnly>
-            <PackageAccessControls :package-name="pkg.name" />
+            <CollapsibleSection v-if="pkg.name.startsWith('@')" id="access">
+              <template #title>
+                <h2>{{ $t('package.access.title') }}</h2>
+              </template>
+              <PackageAccessControlsList :package-name="pkg.name" />
+            </CollapsibleSection>
           </ClientOnly>
 
           <!-- Keywords -->
-          <section id="keywords" v-if="displayVersion?.keywords?.length" class="scroll-mt-20">
-            <h2
-              id="keywords-heading"
-              class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
-            >
-              <a
-                href="#keywords"
-                class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-              >
-                {{ $t('package.keywords_title') }}
-                <span
-                  class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-                  aria-hidden="true"
-                />
-              </a>
-            </h2>
+          <CollapsibleSection v-if="displayVersion?.keywords?.length" id="keywords">
+            <template #title>
+              <h2>{{ $t('package.keywords_title') }}</h2>
+            </template>
             <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
               <li v-for="keyword in displayVersion.keywords.slice(0, 15)" :key="keyword">
                 <NuxtLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }" class="tag">
@@ -951,83 +920,156 @@ function handleClick(event: MouseEvent) {
                 </NuxtLink>
               </li>
             </ul>
-          </section>
+          </CollapsibleSection>
 
-          <!-- Download stats -->
-          <PackageWeeklyDownloadStats :packageName />
+          <!-- Download Stats -->
+          <CollapsibleSection id="downloads">
+            <template #title>
+              <h2>{{ $t('package.downloads.title') }}</h2>
+            </template>
+            <PackageDownloadStatsContent :package-name="packageName" />
+          </CollapsibleSection>
 
-          <!-- Playground links -->
-          <PackagePlaygrounds
-            v-if="readmeData?.playgroundLinks?.length"
-            :links="readmeData.playgroundLinks"
-          />
+          <!-- Playgrounds -->
+          <CollapsibleSection v-if="readmeData?.playgroundLinks?.length" id="playgrounds">
+            <template #title>
+              <h2>{{ $t('package.playgrounds.title') }}</h2>
+            </template>
+            <PackagePlaygroundsList :links="readmeData.playgroundLinks" />
+          </CollapsibleSection>
 
-          <section
+          <!-- Compatibility -->
+          <CollapsibleSection
+            v-if="displayVersion?.engines?.node || displayVersion?.engines?.npm"
             id="compatibility"
-            v-if="
-              displayVersion?.engines && (displayVersion.engines.node || displayVersion.engines.npm)
-            "
-            class="scroll-mt-20"
           >
-            <h2
-              id="compatibility-heading"
-              class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
-            >
-              <a
-                href="#compatibility"
-                class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-              >
-                {{ $t('package.compatibility') }}
-                <span
-                  class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-                  aria-hidden="true"
-                />
-              </a>
-            </h2>
+            <template #title>
+              <h2>{{ $t('package.compatibility') }}</h2>
+            </template>
             <dl class="space-y-2">
-              <div v-if="displayVersion.engines.node" class="flex justify-between gap-4 py-1">
+              <div v-if="displayVersion.engines?.node" class="flex justify-between gap-4 py-1">
                 <dt class="text-fg-muted text-sm shrink-0">node</dt>
                 <dd class="font-mono text-sm text-fg text-end" :title="displayVersion.engines.node">
                   {{ displayVersion.engines.node }}
                 </dd>
               </div>
-              <div v-if="displayVersion.engines.npm" class="flex justify-between gap-4 py-1">
+              <div v-if="displayVersion.engines?.npm" class="flex justify-between gap-4 py-1">
                 <dt class="text-fg-muted text-sm shrink-0">npm</dt>
                 <dd class="font-mono text-sm text-fg text-end" :title="displayVersion.engines.npm">
                   {{ displayVersion.engines.npm }}
                 </dd>
               </div>
             </dl>
-          </section>
+          </CollapsibleSection>
 
-          <!-- Versions (grouped by release channel) -->
-          <PackageVersions
+          <!-- Versions -->
+          <CollapsibleSection
             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"
-          />
+            id="versions"
+          >
+            <template #title>
+              <h2>{{ $t('package.versions.title') }}</h2>
+            </template>
+            <PackageVersionsList
+              :package-name="pkg.name"
+              :versions="pkg.versions"
+              :dist-tags="pkg['dist-tags'] ?? {}"
+              :time="pkg.time"
+            />
+          </CollapsibleSection>
 
           <!-- Install Scripts Warning -->
-          <PackageInstallScripts
-            v-if="displayVersion?.installScripts"
-            :package-name="pkg.name"
-            :install-scripts="displayVersion.installScripts"
-          />
+          <CollapsibleSection v-if="displayVersion?.installScripts" id="install-scripts">
+            <template #title>
+              <span class="i-carbon-warning-alt text-yellow-500 size-3" />
+              <h2>{{ $t('package.install_scripts.title') }}</h2>
+            </template>
+            <PackageInstallScriptsList
+              :package-name="pkg.name"
+              :install-scripts="displayVersion.installScripts"
+            />
+          </CollapsibleSection>
 
           <!-- Dependencies -->
-          <PackageDependencies
-            v-if="hasDependencies && displayVersion"
-            :package-name="pkg.name"
-            :version="displayVersion.version"
-            :dependencies="displayVersion.dependencies"
-            :peer-dependencies="displayVersion.peerDependencies"
-            :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
-            :optional-dependencies="displayVersion.optionalDependencies"
-          />
+          <CollapsibleSection v-if="displayVersion?.dependencies" id="dependencies">
+            <template #title>
+              <h2>
+                {{
+                  $t('package.dependencies.title', {
+                    count: Object.keys(displayVersion.dependencies).length,
+                  })
+                }}
+              </h2>
+            </template>
+            <PackageDependenciesList :dependencies="displayVersion.dependencies" />
+          </CollapsibleSection>
+
+          <!-- Peer Dependencies -->
+          <CollapsibleSection v-if="displayVersion?.peerDependencies" id="peer-dependencies">
+            <template #title>
+              <h2>
+                {{
+                  $t('package.peer_dependencies.title', {
+                    count: Object.keys(displayVersion.peerDependencies).length,
+                  })
+                }}
+              </h2>
+            </template>
+            <PackagePeerDependenciesList
+              :peer-dependencies="displayVersion.peerDependencies"
+              :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
+            />
+          </CollapsibleSection>
+
+          <!-- Optional Dependencies -->
+          <CollapsibleSection
+            v-if="displayVersion?.optionalDependencies"
+            id="optional-dependencies"
+          >
+            <template #title>
+              <h2>
+                {{
+                  $t('package.optional_dependencies.title', {
+                    count: Object.keys(displayVersion.optionalDependencies).length,
+                  })
+                }}
+              </h2>
+            </template>
+            <PackageOptionalDependenciesList
+              :optional-dependencies="displayVersion.optionalDependencies"
+            />
+          </CollapsibleSection>
         </aside>
       </div>
+
+      <!-- README -->
+      <section id="readme" class="area-readme min-w-0 scroll-mt-20">
+        <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-4">
+          <a
+            href="#readme"
+            class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
+          >
+            {{ $t('package.readme.title') }}
+            <span
+              class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+              aria-hidden="true"
+            />
+          </a>
+        </h2>
+        <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
+        <div
+          v-if="readmeData?.html"
+          class="readme-content prose prose-invert max-w-[70ch]"
+          v-html="readmeData.html"
+          @click="handleClick"
+        />
+        <p v-else class="text-fg-subtle italic">
+          {{ $t('package.readme.no_readme') }}
+          <a v-if="repositoryUrl" :href="repositoryUrl" rel="noopener noreferrer" class="link">{{
+            $t('package.readme.view_on_github')
+          }}</a>
+        </p>
+      </section>
     </article>
 
     <!-- Error state -->
@@ -1049,9 +1091,9 @@ function handleClick(event: MouseEvent) {
 .package-page {
   display: grid;
   gap: 2rem;
+  grid-auto-rows: min-content;
 
   /* Mobile: single column, sidebar above readme */
-  grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
     'header'
     'install'
@@ -1076,11 +1118,20 @@ function handleClick(event: MouseEvent) {
 @media (min-width: 1280px) {
   .package-page {
     grid-template-columns: 1fr 20rem;
+    /* Use min-content for top rows, 1fr for readme to absorb any extra sidebar height */
+    grid-template-rows: repeat(3, min-content) 1fr;
     grid-template-areas:
       'header  sidebar'
       'install sidebar'
       'vulns   sidebar'
       'readme  sidebar';
+
+    &:not(:has(.area-vulns)) {
+      /* If there is no vulnerabilities section we don't want extra space above the readme */
+      .area-readme {
+        grid-row: vulns / readme;
+      }
+    }
   }
 }
 

From 22b823e83bd7b43088ee2548f8007b9d9a794148 Mon Sep 17 00:00:00 2001
From: Rshig <90143161+rshigg@users.noreply.github.com>
Date: Sat, 31 Jan 2026 10:31:20 -0500
Subject: [PATCH 2/2] consolidate PackageDependencies components

---
 app/components/CollapsibleSection.vue         |   2 +-
 app/components/PackageDependenciesList.vue    | 116 +++++++++++++-----
 .../PackageOptionalDependenciesList.vue       |  56 ---------
 .../PackagePeerDependenciesList.vue           |  75 -----------
 app/pages/[...package].vue                    |  19 +--
 5 files changed, 98 insertions(+), 170 deletions(-)
 delete mode 100644 app/components/PackageOptionalDependenciesList.vue
 delete mode 100644 app/components/PackagePeerDependenciesList.vue

diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 06bd5db31..886b78171 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -18,7 +18,7 @@ defineProps<{
     >
       <span class="i-carbon-link block size-full" />
     </a>
-    <details open class="col-span-full row-start-1">
+    <details open class="col-span-full row-start-1 open:pb-2">
       <summary
         :id="id + '-title'"
         class="collapsible-header flex items-center justify-between transition-all motion-reduce:pr-7 group-hover:pr-7 group-has-[[data-anchor]:focus]:pr-7"
diff --git a/app/components/PackageDependenciesList.vue b/app/components/PackageDependenciesList.vue
index e71ebb41e..abe94f755 100644
--- a/app/components/PackageDependenciesList.vue
+++ b/app/components/PackageDependenciesList.vue
@@ -1,66 +1,120 @@
 <script setup lang="ts">
-const props = defineProps<{
-  dependencies: Record<string, string>
-}>()
+const { t } = useI18n()
 
-// Fetch outdated info for dependencies
-const outdatedDeps = useOutdatedDependencies(() => props.dependencies)
+const props = defineProps<
+  | {
+      type: 'dependencies' | 'optional'
+      dependencies: Record<string, string>
+    }
+  | {
+      type: 'peer'
+      dependencies: Record<string, string>
+      meta: Record<string, { optional?: boolean }>
+    }
+>()
+
+// Only fetch outdated info for regular dependencies
+const outdatedDeps =
+  props.type === 'dependencies' ? useOutdatedDependencies(() => props.dependencies) : null
 
 // Expanded state
-const depsExpanded = shallowRef(false)
+const expanded = shallowRef(false)
 
-// Sort dependencies alphabetically
+// Sort dependencies
 const sortedDependencies = computed(() => {
   if (!props.dependencies) return []
-  return Object.entries(props.dependencies).sort(([a], [b]) => a.localeCompare(b))
+
+  const entries = Object.entries(props.dependencies).map(([name, version]) => {
+    const outdated = outdatedDeps?.value?.[name] ?? null
+    return {
+      name,
+      version,
+      optional: props.type === 'peer' && !!props.meta?.[name]?.optional,
+      outdated,
+      versionClass: outdated ? getVersionClass(outdated) : 'text-fg-subtle',
+      versionTooltip: outdated ? getOutdatedTooltip(outdated, t) : version,
+    }
+  })
+
+  // Peer deps: required first, then optional; others: alphabetical
+  // Since non-peer deps always have optional=false, we can use the same sort for all
+  return entries.sort((a, b) => {
+    if (a.optional !== b.optional) return a.optional ? 1 : -1
+    return a.name.localeCompare(b.name)
+  })
+})
+
+// i18n key prefix based on type
+const i18nPrefix = computed(() => {
+  switch (props.type) {
+    case 'peer':
+      return 'package.peer_dependencies'
+    case 'optional':
+      return 'package.optional_dependencies'
+    default:
+    case 'dependencies':
+      return 'package.dependencies'
+  }
 })
 </script>
 
 <template>
   <div v-if="sortedDependencies.length > 0">
-    <ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
+    <ul class="space-y-1 list-none m-0 p-0" :aria-label="$t(`${i18nPrefix}.list_label`)">
       <li
-        v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
-        :key="dep"
+        v-for="dep in sortedDependencies.slice(0, expanded ? undefined : 10)"
+        :key="dep.name"
         class="flex items-center justify-between py-1 text-sm gap-2"
       >
-        <NuxtLink
-          :to="{ name: 'package', params: { package: dep.split('/') } }"
-          class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
-        >
-          {{ dep }}
-        </NuxtLink>
+        <div class="flex items-center gap-2 min-w-0">
+          <NuxtLink
+            :to="{ name: 'package', params: { package: dep.name.split('/') } }"
+            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
+          >
+            {{ dep.name }}
+          </NuxtLink>
+          <!-- Optional badge for peer dependencies -->
+          <span
+            v-if="props.type === 'peer' && dep.optional"
+            class="px-1 py-0.5 font-mono text-[10px] text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
+            :title="$t('package.dependencies.optional')"
+          >
+            {{ $t('package.dependencies.optional') }}
+          </span>
+        </div>
         <span class="flex items-center gap-1">
+          <!-- Outdated warning for regular dependencies -->
           <span
-            v-if="outdatedDeps[dep]"
+            v-if="dep.outdated"
             class="shrink-0"
-            :class="getVersionClass(outdatedDeps[dep])"
-            :title="getOutdatedTooltip(outdatedDeps[dep])"
+            :class="dep.versionClass"
+            :title="dep.versionTooltip"
             aria-hidden="true"
           >
             <span class="i-carbon-warning-alt w-3 h-3 block" />
           </span>
           <NuxtLink
-            :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
-            class="font-mono text-xs text-right truncate"
-            :class="getVersionClass(outdatedDeps[dep])"
-            :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
+            :to="{
+              name: 'package',
+              params: { package: [...dep.name.split('/'), 'v', dep.version] },
+            }"
+            class="font-mono text-xs text-end truncate"
+            :class="dep.versionClass"
+            :title="dep.versionTooltip"
           >
-            {{ version }}
+            {{ dep.version }}
           </NuxtLink>
-          <span v-if="outdatedDeps[dep]" class="sr-only">
-            ({{ getOutdatedTooltip(outdatedDeps[dep]) }})
-          </span>
+          <span v-if="dep.outdated" class="sr-only"> ({{ dep.versionTooltip }}) </span>
         </span>
       </li>
     </ul>
     <button
-      v-if="sortedDependencies.length > 10 && !depsExpanded"
+      v-if="sortedDependencies.length > 10 && !expanded"
       type="button"
       class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-      @click="depsExpanded = true"
+      @click="expanded = true"
     >
-      {{ $t('package.dependencies.show_all', { count: sortedDependencies.length }) }}
+      {{ $t(`${i18nPrefix}.show_all`, { count: sortedDependencies.length }) }}
     </button>
   </div>
 </template>
diff --git a/app/components/PackageOptionalDependenciesList.vue b/app/components/PackageOptionalDependenciesList.vue
deleted file mode 100644
index 524b093c2..000000000
--- a/app/components/PackageOptionalDependenciesList.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  optionalDependencies: Record<string, string>
-}>()
-
-// Expanded state
-const optionalDepsExpanded = shallowRef(false)
-
-// Sort optional dependencies alphabetically
-const sortedOptionalDependencies = computed(() => {
-  if (!props.optionalDependencies) return []
-  return Object.entries(props.optionalDependencies).sort(([a], [b]) => a.localeCompare(b))
-})
-</script>
-
-<template>
-  <div v-if="sortedOptionalDependencies.length > 0">
-    <ul
-      class="space-y-1 list-none m-0 p-0"
-      :aria-label="$t('package.optional_dependencies.list_label')"
-    >
-      <li
-        v-for="[dep, version] in sortedOptionalDependencies.slice(
-          0,
-          optionalDepsExpanded ? undefined : 10,
-        )"
-        :key="dep"
-        class="flex items-center justify-between py-1 text-sm gap-2"
-      >
-        <NuxtLink
-          :to="{ name: 'package', params: { package: dep.split('/') } }"
-          class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
-        >
-          {{ dep }}
-        </NuxtLink>
-        <NuxtLink
-          :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
-          class="font-mono text-xs text-fg-subtle max-w-[50%] text-right truncate"
-          :title="version"
-        >
-          {{ version }}
-        </NuxtLink>
-      </li>
-    </ul>
-    <button
-      v-if="sortedOptionalDependencies.length > 10 && !optionalDepsExpanded"
-      type="button"
-      class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-      @click="optionalDepsExpanded = true"
-    >
-      {{
-        $t('package.optional_dependencies.show_all', { count: sortedOptionalDependencies.length })
-      }}
-    </button>
-  </div>
-</template>
diff --git a/app/components/PackagePeerDependenciesList.vue b/app/components/PackagePeerDependenciesList.vue
deleted file mode 100644
index d5f657e55..000000000
--- a/app/components/PackagePeerDependenciesList.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  peerDependencies: Record<string, string>
-  peerDependenciesMeta?: Record<string, { optional?: boolean }>
-}>()
-
-// Expanded state
-const peerDepsExpanded = shallowRef(false)
-
-// Sort peer dependencies alphabetically, with required first then optional
-const sortedPeerDependencies = computed(() => {
-  if (!props.peerDependencies) return []
-
-  return Object.entries(props.peerDependencies)
-    .map(([name, version]) => ({
-      name,
-      version,
-      optional: props.peerDependenciesMeta?.[name]?.optional ?? false,
-    }))
-    .sort((a, b) => {
-      // Required first, then optional
-      if (a.optional !== b.optional) return a.optional ? 1 : -1
-      return a.name.localeCompare(b.name)
-    })
-})
-</script>
-
-<template>
-  <div v-if="sortedPeerDependencies.length > 0">
-    <ul
-      class="space-y-1 list-none m-0 p-0"
-      :aria-label="$t('package.peer_dependencies.list_label')"
-    >
-      <li
-        v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
-        :key="peer.name"
-        class="flex items-center justify-between py-1 text-sm gap-2"
-      >
-        <div class="flex items-center gap-2 min-w-0">
-          <NuxtLink
-            :to="{ name: 'package', params: { package: peer.name.split('/') } }"
-            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
-          >
-            {{ peer.name }}
-          </NuxtLink>
-          <span
-            v-if="peer.optional"
-            class="px-1 py-0.5 font-mono text-[10px] text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
-            :title="$t('package.dependencies.optional')"
-          >
-            {{ $t('package.dependencies.optional') }}
-          </span>
-        </div>
-        <NuxtLink
-          :to="{
-            name: 'package',
-            params: { package: [...peer.name.split('/'), 'v', peer.version] },
-          }"
-          class="font-mono text-xs text-fg-subtle max-w-[40%] text-right truncate"
-          :title="peer.version"
-        >
-          {{ peer.version }}
-        </NuxtLink>
-      </li>
-    </ul>
-    <button
-      v-if="sortedPeerDependencies.length > 10 && !peerDepsExpanded"
-      type="button"
-      class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-      @click="peerDepsExpanded = true"
-    >
-      {{ $t('package.peer_dependencies.show_all', { count: sortedPeerDependencies.length }) }}
-    </button>
-  </div>
-</template>
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 56c9ae2cc..e8728d954 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -889,7 +889,7 @@ function handleClick(event: MouseEvent) {
 
       <div class="area-sidebar self-start">
         <!-- Sidebar -->
-        <aside class="sticky top-20 px-2 py-1 space-y-4 sm:space-y-6 min-w-0 overflow-hidden">
+        <aside class="sticky top-20 px-2 py-1 space-y-2 sm:space-y-4 min-w-0 overflow-hidden">
           <!-- Maintainers -->
           <CollapsibleSection v-if="pkg.maintainers?.length" id="maintainers">
             <template #title>
@@ -1001,7 +1001,10 @@ function handleClick(event: MouseEvent) {
                 }}
               </h2>
             </template>
-            <PackageDependenciesList :dependencies="displayVersion.dependencies" />
+            <PackageDependenciesList
+              type="dependencies"
+              :dependencies="displayVersion.dependencies"
+            />
           </CollapsibleSection>
 
           <!-- Peer Dependencies -->
@@ -1015,9 +1018,10 @@ function handleClick(event: MouseEvent) {
                 }}
               </h2>
             </template>
-            <PackagePeerDependenciesList
-              :peer-dependencies="displayVersion.peerDependencies"
-              :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
+            <PackageDependenciesList
+              type="peer"
+              :dependencies="displayVersion.peerDependencies"
+              :meta="displayVersion.peerDependenciesMeta ?? {}"
             />
           </CollapsibleSection>
 
@@ -1035,8 +1039,9 @@ function handleClick(event: MouseEvent) {
                 }}
               </h2>
             </template>
-            <PackageOptionalDependenciesList
-              :optional-dependencies="displayVersion.optionalDependencies"
+            <PackageDependenciesList
+              type="optional"
+              :dependencies="displayVersion.optionalDependencies"
             />
           </CollapsibleSection>
         </aside>