From ebc0cb35269c299a7ebb4854f841404caebf8b3c Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:49:39 -0400
Subject: [PATCH 01/22] feat: add word wrap toggle to code viewer (#2027)

---
 app/components/Code/Viewer.vue                | 20 ++++++++++++--
 .../v/[version]/[...filePath].vue             | 14 ++++++++++
 i18n/locales/en.json                          | 27 +++++++++++++++----
 3 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/app/components/Code/Viewer.vue b/app/components/Code/Viewer.vue
index 90bcf0c221..513b518f99 100644
--- a/app/components/Code/Viewer.vue
+++ b/app/components/Code/Viewer.vue
@@ -3,6 +3,7 @@ const props = defineProps<{
   html: string
   lines: number
   selectedLines: { start: number; end: number } | null
+  wordWrap?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -113,9 +114,9 @@ watch(
     </div>
 
     <!-- Code content -->
-    <div class="code-content flex-1 overflow-x-auto min-w-0">
+    <div class="code-content flex-1 min-w-0" :class="wordWrap ? 'overflow-x-hidden' : 'overflow-x-auto'">
       <!-- eslint-disable vue/no-v-html -- HTML is generated server-side by Shiki -->
-      <div ref="codeRef" class="code-lines min-w-full w-fit" v-html="html" />
+      <div ref="codeRef" class="code-lines min-w-full w-fit" :class="{ 'word-wrap': wordWrap }" v-html="html" />
       <!-- eslint-enable vue/no-v-html -->
     </div>
   </div>
@@ -155,6 +156,21 @@ watch(
   transition: background-color 0.1s;
 }
 
+.code-content.word-wrap-active :deep(.line),
+.code-content:has(.word-wrap) :deep(.line) {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  max-height: none;
+  overflow: visible;
+}
+
+.code-lines.word-wrap :deep(.line) {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  max-height: none;
+  overflow: visible;
+}
+
 /* Highlighted lines in code content - extend full width with negative margin */
 .code-content :deep(.line.highlighted) {
   @apply bg-yellow-500/20;
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index 3fbdcfe994..898eb50f2c 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -267,6 +267,8 @@ const markdownViewModes = [
 
 const markdownViewMode = shallowRef<(typeof markdownViewModes)[number]['key']>('preview')
 
+const wordWrap = shallowRef(false)
+
 const bytesFormatter = useBytesFormatter()
 
 // Keep latestVersion for comparison (to show "(latest)" badge)
@@ -416,6 +418,17 @@ defineOgImageComponent('Default', {
             </nav>
           </div>
           <div class="flex items-center gap-2" v-if="isViewingFile && !isBinaryFile && fileContent">
+            <button
+              type="button"
+              class="px-2 py-1 font-mono text-xs border rounded transition-colors inline-flex items-center gap-1"
+              :class="wordWrap ? 'bg-accent/10 text-accent border-accent/30' : 'text-fg-muted bg-bg-subtle border-border hover:text-fg hover:border-border-hover'"
+              :aria-pressed="wordWrap"
+              :title="$t('code.toggle_word_wrap')"
+              @click="wordWrap = !wordWrap"
+            >
+              <span class="i-lucide:wrap-text w-3 h-3" aria-hidden="true" />
+              {{ $t('code.toggle_word_wrap') }}
+            </button>
             <button
               v-if="selectedLines"
               type="button"
@@ -462,6 +475,7 @@ defineOgImageComponent('Default', {
             :html="fileContent.html"
             :lines="fileContent.lines"
             :selected-lines="selectedLines"
+            :word-wrap="wordWrap"
             @line-click="handleLineClick"
           />
           <div class="sticky bottom-0 bg-bg border-t border-border px-4 py-1">
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 02c1af000f..ea215a481f 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -19,7 +19,10 @@
     "social": "social",
     "chat": "chat",
     "builders_chat": "builders",
-    "keyboard_shortcuts": "keyboard shortcuts"
+    "keyboard_shortcuts": "keyboard shortcuts",
+    "product": "Product",
+    "legal": "Legal",
+    "community": "Community"
   },
   "shortcuts": {
     "section": {
@@ -207,6 +210,8 @@
       "members": "members"
     },
     "scroll_to_top": "Scroll to top",
+    "previous": "Previous",
+    "next": "Next",
     "cancel": "Cancel",
     "save": "Save",
     "edit": "Edit",
@@ -318,7 +323,8 @@
       "docs": "docs",
       "fund": "fund",
       "compare": "compare",
-      "compare_this_package": "compare this package"
+      "compare_this_package": "compare this package",
+      "dependents": "dependents"
     },
     "likes": {
       "like": "Like this package",
@@ -352,6 +358,13 @@
       "title": "Run",
       "locally": "Run locally"
     },
+    "dependents": {
+      "title": "Dependents",
+      "subtitle": "Packages that depend on {name}",
+      "count": "{count} dependent | {count} dependents",
+      "none": "No packages found that depend on {name}",
+      "error": "Failed to load dependents"
+    },
     "readme": {
       "title": "Readme",
       "no_readme": "No README available.",
@@ -454,7 +467,8 @@
       "outdated_minor": "{count} minor version behind (latest: {latest}) | {count} minor versions behind (latest: {latest})",
       "outdated_patch": "Patch update available (latest: {latest})",
       "has_replacement": "This dependency has suggested replacements",
-      "vulnerabilities_count": "{count} vulnerability | {count} vulnerabilities"
+      "vulnerabilities_count": "{count} vulnerability | {count} vulnerabilities",
+      "none": "No dependencies"
     },
     "peer_dependencies": {
       "title": "Peer Dependency ({count}) | Peer Dependencies ({count})",
@@ -564,7 +578,9 @@
     },
     "license": {
       "view_spdx": "View license text on SPDX",
-      "none": "None"
+      "none": "None",
+      "changed_badge": "changed",
+      "changed": "License changed from {latest} in the latest version"
     },
     "vulnerabilities": {
       "tree_found": "{vulns} vulnerability in {packages}/{total} packages | {vulns} vulnerabilities in {packages}/{total} packages",
@@ -840,7 +856,8 @@
     },
     "file_path": "File path",
     "binary_file": "Binary file",
-    "binary_rendering_warning": "File type \"{contentType}\" is not supported for preview."
+    "binary_rendering_warning": "File type \"{contentType}\" is not supported for preview.",
+    "toggle_word_wrap": "Word wrap"
   },
   "badges": {
     "provenance": {

From 41d2a34d564b4ca6e1b2504018d1ddc59d9c547e Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:49:43 -0400
Subject: [PATCH 02/22] fix(ui): fix dropdown z-index and search layout
 stability on focus (#2191, #2112, #1881)

---
 app/components/AppHeader.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 8f0cb2290c..76148d115f 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -151,6 +151,7 @@ const route = useRoute()
 const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
+const searchContainerRef = useTemplateRef('searchContainerRef')
 
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')
@@ -188,6 +189,12 @@ function handleSearchBlur() {
   }
 }
 
+onClickOutside(searchContainerRef, () => {
+  if (isMobile.value && !isOnSearchPage.value) {
+    isSearchExpandedManually.value = false
+  }
+})
+
 function handleSearchFocus() {
   showFullSearch.value = true
 }
@@ -215,7 +222,7 @@ onKeyStroke(
     <div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="relative container min-h-14 flex items-center gap-2 z-1 justify-end"
+      class="relative container min-h-14 flex items-center gap-2 justify-end"
     >
       <!-- Mobile: Logo (navigates home) -->
       <NuxtLink
@@ -260,6 +267,7 @@ onKeyStroke(
 
       <!-- Center: Search bar + nav items -->
       <div
+        ref="searchContainerRef"
         class="flex-1 flex items-center md:gap-6"
         :class="{
           'hidden sm:flex': !isSearchExpanded,
@@ -277,7 +285,7 @@ onKeyStroke(
         />
         <ul
           v-if="!isSearchExpanded && isConnected && npmUser"
-          :class="{ hidden: showFullSearch }"
+          :class="{ 'invisible pointer-events-none': showFullSearch }"
           class="hidden sm:flex items-center gap-4 sm:gap-6 list-none m-0 p-0"
         >
           <!-- Packages dropdown (when connected) -->

From 8e619f1f877c70991ffb306bd18982180b230012 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:49:50 -0400
Subject: [PATCH 03/22] fix: show version-specific license, no-deps empty
 state, layout stability (#2163, #2168, #2190, #1826)

---
 app/components/Package/Dependencies.vue |  8 ++++
 app/pages/package/[[org]]/[name].vue    | 50 ++++++++++++++++++++++---
 2 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 6edc71377b..2df68329c6 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -94,6 +94,14 @@ const numberFormatter = useNumberFormatter()
 
 <template>
   <div class="space-y-8">
+    <!-- Empty state when no dependencies at all -->
+    <p
+      v-if="sortedDependencies.length === 0 && sortedPeerDependencies.length === 0 && sortedOptionalDependencies.length === 0"
+      class="text-sm text-fg-subtle"
+    >
+      {{ $t('package.dependencies.none') }}
+    </p>
+
     <!-- Dependencies -->
     <CollapsibleSection
       v-if="sortedDependencies.length > 0"
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 83b0f2b86b..20072ed7c2 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -108,11 +108,27 @@ function prefetchReadmeMarkdown() {
 }
 
 async function copyReadmeHandler() {
-  await fetchReadmeMarkdown()
+  // Safari requires navigator.clipboard.write() to be called synchronously within
+  // the user gesture, but accepts a Promise inside ClipboardItem.
+  // This pattern works in Safari 13.1+, Chrome, and Firefox.
+  if (typeof ClipboardItem !== 'undefined' && navigator.clipboard?.write) {
+    const blobPromise = (async () => {
+      await fetchReadmeMarkdown()
+      const markdown = readmeMarkdownData.value?.markdown ?? ''
+      return new Blob([markdown], { type: 'text/plain' })
+    })()
+    try {
+      await navigator.clipboard.write([new ClipboardItem({ 'text/plain': blobPromise })])
+      return
+    } catch {
+      // Fall through to legacy approach
+    }
+  }
 
+  // Legacy fallback (non-Safari, or older browsers)
+  await fetchReadmeMarkdown()
   const markdown = readmeMarkdownData.value?.markdown
   if (!markdown) return
-
   await copyReadme(markdown)
 }
 
@@ -305,6 +321,17 @@ const latestVersion = computed(() => {
   return pkg.value.versions[latestTag] ?? null
 })
 
+// Detect license changes between current version and latest
+const licenseChanged = computed(() => {
+  const currentLicense = displayVersion.value?.license
+  const latestLicense = latestVersion.value?.license ?? pkg.value?.license
+  if (!currentLicense || !latestLicense) return false
+  // Normalize: compare string representations
+  const normalize = (l: unknown): string =>
+    typeof l === 'string' ? l : (l as { type?: string })?.type ?? ''
+  return normalize(currentLicense) !== normalize(latestLicense)
+})
+
 const deprecationNotice = computed(() => {
   if (!displayVersion.value?.deprecated) return null
 
@@ -582,9 +609,19 @@ const showSkeleton = shallowRef(false)
               <dt class="text-xs text-fg-subtle uppercase tracking-wider">
                 {{ $t('package.stats.license') }}
               </dt>
-              <dd class="font-mono text-sm text-fg">
-                <LicenseDisplay v-if="pkg.license" :license="pkg.license" />
+              <dd class="font-mono text-sm text-fg flex items-center gap-2 flex-wrap">
+                <LicenseDisplay v-if="displayVersion?.license ?? pkg.license" :license="displayVersion?.license ?? pkg.license" />
                 <span v-else>{{ $t('package.license.none') }}</span>
+                <TooltipApp
+                  v-if="licenseChanged"
+                  :text="$t('package.license.changed', { latest: latestVersion?.license ?? pkg.license })"
+                  position="bottom"
+                >
+                  <span class="inline-flex items-center gap-1 px-1.5 py-0.5 text-2xs font-sans rounded bg-amber-500/15 text-amber-700 dark:text-amber-400 border border-amber-500/30 cursor-help">
+                    <span class="i-lucide:triangle-alert w-3 h-3" aria-hidden="true" />
+                    {{ $t('package.license.changed_badge') }}
+                  </span>
+                </TooltipApp>
               </dd>
             </div>
 
@@ -959,7 +996,7 @@ const showSkeleton = shallowRef(false)
 
             <!-- Dependencies -->
             <PackageDependencies
-              v-if="hasDependencies && resolvedVersion && displayVersion"
+              v-if="resolvedVersion && displayVersion"
               :package-name="pkg.name"
               :version="resolvedVersion"
               :dependencies="displayVersion.dependencies"
@@ -1107,7 +1144,7 @@ const showSkeleton = shallowRef(false)
       'install sidebar'
       'vulns   sidebar'
       'readme  sidebar';
-    grid-template-rows: auto auto auto auto 1fr;
+    grid-template-rows: auto auto auto auto;
   }
 }
 
@@ -1159,6 +1196,7 @@ const showSkeleton = shallowRef(false)
 
 .areaSidebar {
   grid-area: sidebar;
+  align-self: start;
 }
 
 @media (max-width: 639.9px) {

From b23fd4bc9cfe5d0c6cd37d00c248faca785f9bcb Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:50:01 -0400
Subject: [PATCH 04/22] fix: exclude CodePen profile pages from playground
 links (#2110)

---
 server/utils/readme.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/server/utils/readme.ts b/server/utils/readme.ts
index 67345a65cd..1ad6bea6af 100644
--- a/server/utils/readme.ts
+++ b/server/utils/readme.ts
@@ -19,7 +19,8 @@ interface PlaygroundProvider {
   id: string // Provider identifier
   name: string
   domains: string[] // Associated domains
-  paths?: string[]
+  paths?: string[] // pathname must start with one of these
+  pathContains?: string[] // pathname must contain one of these
   icon?: string // Provider icon name
 }
 
@@ -44,6 +45,8 @@ const PLAYGROUND_PROVIDERS: PlaygroundProvider[] = [
     name: 'CodePen',
     domains: ['codepen.io'],
     icon: 'codepen',
+    // Only match actual pen URLs like /username/pen/id (not profile/collection pages)
+    pathContains: ['/pen/', '/full/', '/details/'],
   },
   {
     id: 'jsfiddle',
@@ -128,7 +131,8 @@ function matchPlaygroundProvider(url: string): PlaygroundProvider | null {
       for (const domain of provider.domains) {
         if (
           (hostname === domain || hostname.endsWith(`.${domain}`)) &&
-          (!provider.paths || provider.paths.some(path => parsed.pathname.startsWith(path)))
+          (!provider.paths || provider.paths.some(path => parsed.pathname.startsWith(path))) &&
+          (!provider.pathContains || provider.pathContains.some(seg => parsed.pathname.includes(seg)))
         ) {
           return provider
         }

From 516ee884d91e4986d4d364883a32f4bdac5e8b30 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:50:06 -0400
Subject: [PATCH 05/22] feat: add package dependents list page (#2036)

---
 app/components/Package/Header.vue             |  22 ++-
 .../package/[[org]]/[name]/dependents.vue     | 187 ++++++++++++++++++
 .../api/registry/dependents/[...pkg].get.ts   |  87 ++++++++
 3 files changed, 295 insertions(+), 1 deletion(-)
 create mode 100644 app/pages/package/[[org]]/[name]/dependents.vue
 create mode 100644 server/api/registry/dependents/[...pkg].get.ts

diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index 7cf6b4c8bc..bed47dd4e5 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   latestVersion?: SlimVersion | null
   provenanceData?: ProvenanceDetails | null
   provenanceStatus?: string | null
-  page: 'main' | 'docs' | 'code' | 'diff'
+  page: 'main' | 'docs' | 'code' | 'diff' | 'dependents'
   versionUrlPattern: string
 }>()
 
@@ -108,6 +108,18 @@ const mainLink = computed((): RouteLocationRaw | null => {
   return packageRoute(props.pkg.name, props.resolvedVersion)
 })
 
+const dependentsLink = computed((): RouteLocationRaw | null => {
+  if (props.pkg == null) return null
+  const split = props.pkg.name.split('/')
+  return {
+    name: 'package-dependents',
+    params: {
+      org: split.length === 2 ? split[0] : undefined,
+      name: split.length === 2 ? split[1]! : split[0]!,
+    },
+  }
+})
+
 const diffLink = computed((): RouteLocationRaw | null => {
   if (
     props.pkg == null ||
@@ -343,6 +355,14 @@ const fundingUrl = computed(() => {
         >
           {{ $t('compare.compare_versions') }}
         </LinkBase>
+        <LinkBase
+          v-if="dependentsLink"
+          :to="dependentsLink"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
+          :class="page === 'dependents' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.dependents') }}
+        </LinkBase>
       </nav>
     </div>
   </div>
diff --git a/app/pages/package/[[org]]/[name]/dependents.vue b/app/pages/package/[[org]]/[name]/dependents.vue
new file mode 100644
index 0000000000..e80de0f289
--- /dev/null
+++ b/app/pages/package/[[org]]/[name]/dependents.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'package-dependents',
+  scrollMargin: 200,
+})
+
+const route = useRoute('package-dependents')
+
+const packageName = computed(() => {
+  const { org, name } = route.params
+  return org ? `${org}/${name}` : name
+})
+
+const { data: pkg } = usePackage(packageName)
+
+const resolvedVersion = computed(() => {
+  const latest = pkg.value?.['dist-tags']?.latest
+  if (!latest) return null
+  return latest
+})
+
+const displayVersion = computed(() => {
+  if (!pkg.value || !resolvedVersion.value) return null
+  return pkg.value.versions[resolvedVersion.value] ?? null
+})
+
+const latestVersion = computed(() => displayVersion.value ?? null)
+
+const versionUrlPattern = computed(() => {
+  const split = packageName.value.split('/')
+  if (split.length === 2) {
+    return `/package/${split[0]}/${split[1]}/v/{version}`
+  }
+  return `/package/${packageName.value}/v/{version}`
+})
+
+const page = shallowRef(0)
+const PAGE_SIZE = 20
+
+interface DependentsResponse {
+  total: number
+  page: number
+  size: number
+  packages: Array<{
+    name: string
+    version: string
+    description: string | null
+    date: string | null
+    score: number
+  }>
+}
+
+const { data, status, refresh } = useLazyFetch<DependentsResponse>(
+  () => `/api/registry/dependents/${packageName.value}`,
+  {
+    query: computed(() => ({ page: page.value, size: PAGE_SIZE })),
+    watch: [page],
+  },
+)
+
+const totalPages = computed(() => {
+  if (!data.value?.total) return 0
+  return Math.ceil(data.value.total / PAGE_SIZE)
+})
+
+function prevPage() {
+  if (page.value > 0) {
+    page.value--
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+}
+
+function nextPage() {
+  if (page.value < totalPages.value - 1) {
+    page.value++
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+}
+
+const numberFormatter = useNumberFormatter()
+
+useSeoMeta({
+  title: () => `Dependents - ${packageName.value} - npmx`,
+  description: () => `Packages that depend on ${packageName.value}`,
+})
+</script>
+
+<template>
+  <main class="flex-1 pb-8">
+    <PackageHeader
+      :pkg="pkg ?? null"
+      :resolved-version="resolvedVersion"
+      :display-version="displayVersion"
+      :latest-version="latestVersion"
+      :version-url-pattern="versionUrlPattern"
+      page="dependents"
+    />
+
+    <div class="container py-6">
+      <h1 class="font-mono text-xl font-semibold mb-1">
+        {{ $t('package.dependents.title') }}
+      </h1>
+      <p class="text-sm text-fg-muted mb-6">
+        {{ $t('package.dependents.subtitle', { name: packageName }) }}
+      </p>
+
+      <!-- Loading state -->
+      <div v-if="status === 'pending'" class="space-y-2">
+        <SkeletonInline v-for="i in 10" :key="i" class="h-16 w-full rounded-md" />
+      </div>
+
+      <!-- Error state -->
+      <div v-else-if="status === 'error'" class="py-12 text-center">
+        <p class="text-fg-muted mb-4">{{ $t('package.dependents.error') }}</p>
+        <ButtonBase @click="refresh()">{{ $t('common.retry') }}</ButtonBase>
+      </div>
+
+      <!-- Empty state -->
+      <div v-else-if="!data?.packages?.length" class="py-12 text-center">
+        <span class="i-lucide:package-x w-12 h-12 mx-auto mb-4 text-fg-subtle block" />
+        <p class="text-fg-muted">{{ $t('package.dependents.none', { name: packageName }) }}</p>
+      </div>
+
+      <!-- Results -->
+      <template v-else>
+        <p class="text-xs text-fg-subtle mb-4 font-mono">
+          {{
+            $t(
+              'package.dependents.count',
+              { count: numberFormatter.format(data.total) },
+              data.total,
+            )
+          }}
+        </p>
+
+        <ul class="space-y-2 list-none m-0 p-0">
+          <li
+            v-for="dep in data.packages"
+            :key="dep.name"
+            class="border border-border rounded-md p-4 hover:border-border-hover transition-colors"
+          >
+            <div class="flex items-start justify-between gap-4">
+              <div class="min-w-0 flex-1">
+                <LinkBase
+                  :to="packageRoute(dep.name)"
+                  class="font-mono text-sm font-medium"
+                  dir="ltr"
+                >
+                  {{ dep.name }}
+                </LinkBase>
+                <p v-if="dep.description" class="text-xs text-fg-muted mt-1 line-clamp-2">
+                  {{ dep.description }}
+                </p>
+              </div>
+              <span class="font-mono text-xs text-fg-subtle shrink-0" dir="ltr">
+                {{ dep.version }}
+              </span>
+            </div>
+          </li>
+        </ul>
+
+        <!-- Pagination -->
+        <div v-if="totalPages > 1" class="flex items-center justify-between mt-6">
+          <ButtonBase
+            variant="secondary"
+            classicon="i-lucide:chevron-left"
+            :disabled="page === 0"
+            @click="prevPage"
+          >
+            {{ $t('common.previous') }}
+          </ButtonBase>
+          <span class="text-sm text-fg-muted font-mono">
+            {{ page + 1 }} / {{ totalPages }}
+          </span>
+          <ButtonBase
+            variant="secondary"
+            :disabled="page >= totalPages - 1"
+            @click="nextPage"
+          >
+            {{ $t('common.next') }}
+            <span class="i-lucide:chevron-right w-4 h-4" aria-hidden="true" />
+          </ButtonBase>
+        </div>
+      </template>
+    </div>
+  </main>
+</template>
diff --git a/server/api/registry/dependents/[...pkg].get.ts b/server/api/registry/dependents/[...pkg].get.ts
new file mode 100644
index 0000000000..d24505e9b2
--- /dev/null
+++ b/server/api/registry/dependents/[...pkg].get.ts
@@ -0,0 +1,87 @@
+import { CACHE_MAX_AGE_FIVE_MINUTES, NPM_REGISTRY } from '#shared/utils/constants'
+
+const NPM_SEARCH_BASE = 'https://registry.npmjs.org/-/v1/search'
+
+interface NpmSearchResult {
+  objects: Array<{
+    package: {
+      name: string
+      version: string
+      description?: string
+      date?: string
+      links?: {
+        npm?: string
+        homepage?: string
+        repository?: string
+      }
+    }
+    score: {
+      final: number
+    }
+    searchScore: number
+  }>
+  total: number
+  time: string
+}
+
+/**
+ * GET /api/registry/dependents/:name
+ *
+ * Returns packages that depend on the given package,
+ * using the npm search API with `dependencies:<name>` query.
+ */
+export default defineCachedEventHandler(
+  async event => {
+    const pkgSegments = getRouterParam(event, 'pkg')?.split('/') ?? []
+    const rawName = pkgSegments.join('/')
+    const packageName = decodeURIComponent(rawName)
+
+    const query = getQuery(event)
+    const page = Math.max(0, Number(query.page ?? 0))
+    const size = Math.min(50, Math.max(1, Number(query.size ?? 20)))
+    const from = page * size
+
+    if (!packageName) {
+      throw createError({ statusCode: 400, message: 'Package name is required' })
+    }
+
+    try {
+      const data = await $fetch<NpmSearchResult>(NPM_SEARCH_BASE, {
+        query: {
+          text: `dependencies:${packageName}`,
+          size,
+          from,
+        },
+      })
+
+      return {
+        total: data.total,
+        page,
+        size,
+        packages: data.objects.map(obj => ({
+          name: obj.package.name,
+          version: obj.package.version,
+          description: obj.package.description ?? null,
+          date: obj.package.date ?? null,
+          score: obj.score.final,
+        })),
+      }
+    } catch {
+      return {
+        total: 0,
+        page,
+        size,
+        packages: [],
+      }
+    }
+  },
+  {
+    maxAge: CACHE_MAX_AGE_FIVE_MINUTES,
+    swr: true,
+    getKey: event => {
+      const pkg = getRouterParam(event, 'pkg') ?? ''
+      const query = getQuery(event)
+      return `dependents:v1:${pkg}:p${query.page ?? 0}:s${query.size ?? 20}`
+    },
+  },
+)

From 662c37ff9970ba02648ed2ca5b969f36db27fbe9 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:50:10 -0400
Subject: [PATCH 06/22] fix: show copy buttons on touch devices (#1771)

---
 app/components/CopyToClipboardButton.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/components/CopyToClipboardButton.vue b/app/components/CopyToClipboardButton.vue
index f709aad730..3877e58c7d 100644
--- a/app/components/CopyToClipboardButton.vue
+++ b/app/components/CopyToClipboardButton.vue
@@ -85,8 +85,17 @@ function handleClick() {
 }
 
 @media (hover: none) {
+  /* On touch devices show the button statically (no hover possible) */
   .copyButton {
-    display: none;
+    clip: auto;
+    clip-path: none;
+    height: auto;
+    overflow: visible;
+    width: auto;
+    opacity: 1;
+    translate: none;
+    pointer-events: auto;
+    transition: none;
   }
 }
 </style>

From ca144b1d2cdc31926149734f06373b47f8392ddb Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:50:17 -0400
Subject: [PATCH 07/22] fix: improve compare bar chart skeleton loaders with
 varying widths (#2106)

---
 app/components/Compare/FacetBarChart.vue | 36 +++++++++++++++++-------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index 4b0322fd32..563442db94 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -327,23 +327,39 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
       </VueUiHorizontalBar>
 
       <template #fallback>
-        <div class="flex flex-col gap-2 justify-center items-center mb-2">
-          <SkeletonInline class="h-4 w-16" />
-          <SkeletonInline class="h-4 w-28" />
+        <div class="flex flex-col gap-2 justify-center items-center mb-4" aria-hidden="true">
+          <SkeletonInline class="h-4 w-20 rounded" />
+          <SkeletonInline class="h-3 w-36 rounded" />
         </div>
-        <div class="flex flex-col gap-1">
-          <SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
+        <div class="flex flex-col gap-2 px-2" aria-hidden="true">
+          <div
+            v-for="(pkg, i) in packages"
+            :key="pkg"
+            class="flex items-center gap-3"
+          >
+            <SkeletonInline class="h-3 shrink-0" :style="{ width: `${40 + (i * 17) % 40}%` }" />
+            <SkeletonInline class="h-7 flex-1 rounded" />
+          </div>
         </div>
       </template>
     </ClientOnly>
 
     <template v-else>
-      <div class="flex flex-col gap-2 justify-center items-center mb-2">
-        <SkeletonInline class="h-4 w-16" />
-        <SkeletonInline class="h-4 w-28" />
+      <!-- Title skeleton -->
+      <div class="flex flex-col gap-2 justify-center items-center mb-4" aria-hidden="true">
+        <SkeletonInline class="h-4 w-20 rounded" />
+        <SkeletonInline class="h-3 w-36 rounded" />
       </div>
-      <div class="flex flex-col gap-1">
-        <SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
+      <!-- Bar skeletons with varying widths for visual realism -->
+      <div class="flex flex-col gap-2 px-2" aria-hidden="true">
+        <div
+          v-for="(pkg, i) in packages"
+          :key="pkg"
+          class="flex items-center gap-3"
+        >
+          <SkeletonInline class="h-3 shrink-0" :style="{ width: `${40 + (i * 17) % 40}%` }" />
+          <SkeletonInline class="h-7 flex-1 rounded" />
+        </div>
       </div>
     </template>
   </div>

From a657927a8fb206a8cd4b68f890cb2cd57884ca2c Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:50:22 -0400
Subject: [PATCH 08/22] fix: collapsible section title now toggles instead of
 scrolling (#1518, #1392)

---
 app/components/CollapsibleSection.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 961e3502e5..97b86ca936 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -104,14 +104,17 @@ useHead({
           />
         </button>
 
-        <span>
-          <LinkBase :to="`#${id}`">
-            {{ title }}
-          </LinkBase>
+        <button
+          type="button"
+          class="text-start focus-visible:outline-accent/70 rounded"
+          :aria-label="`${isOpen ? 'Collapse' : 'Expand'} ${title}`"
+          @click="toggle"
+        >
+          {{ title }}
           <span v-if="subtitle" class="block text-2xs normal-case tracking-normal">{{
             subtitle
           }}</span>
-        </span>
+        </button>
       </component>
 
       <!-- Actions slot for buttons or other elements -->

From 13eacb04248588af772f598e6c68c7dee36a79c0 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:50:27 -0400
Subject: [PATCH 09/22] feat: reorganize footer links into
 product/legal/community columns (#1364)

---
 app/components/AppFooter.vue | 56 ++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 32 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 6955352350..250e61fd91 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -20,27 +20,17 @@ const closeModal = () => modalRef.value?.close?.()
           </p>
           <BuildEnvironment v-if="!isHome" footer />
         </div>
-        <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
-        <div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
-          <div class="flex items-center gap-5">
-            <LinkBase :to="{ name: 'about' }">
-              {{ $t('footer.about') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'blog' }">
-              {{ $t('footer.blog') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'privacy' }">
-              {{ $t('privacy_policy.title') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'accessibility' }">
-              {{ $t('a11y.footer_title') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'translation-status' }">
-              {{ $t('translation_status.title') }}
-            </LinkBase>
+        <!-- Desktop: Show all links in columns. Mobile: Links are in MobileMenu -->
+        <div class="hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-1 min-h-11 text-xs">
+          <!-- Column 1: Product -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.product') }}</span>
+            <LinkBase :to="{ name: 'about' }">{{ $t('footer.about') }}</LinkBase>
+            <LinkBase :to="{ name: 'blog' }">{{ $t('footer.blog') }}</LinkBase>
+            <LinkBase :to="NPMX_DOCS_SITE">{{ $t('footer.docs') }}</LinkBase>
             <button
               type="button"
-              class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+              class="text-start cursor-pointer inline-flex gap-x-1 items-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
               @click.prevent="showModal"
               aria-haspopup="dialog"
             >
@@ -126,19 +116,21 @@ const closeModal = () => modalRef.value?.close?.()
               </p>
             </Modal>
           </div>
-          <div class="flex items-center gap-5">
-            <LinkBase :to="NPMX_DOCS_SITE">
-              {{ $t('footer.docs') }}
-            </LinkBase>
-            <LinkBase to="https://repo.npmx.dev">
-              {{ $t('footer.source') }}
-            </LinkBase>
-            <LinkBase to="https://social.npmx.dev">
-              {{ $t('footer.social') }}
-            </LinkBase>
-            <LinkBase :to="discord.url">
-              {{ discord.label }}
-            </LinkBase>
+
+          <!-- Column 2: Legal & Info -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.legal') }}</span>
+            <LinkBase :to="{ name: 'privacy' }">{{ $t('privacy_policy.title') }}</LinkBase>
+            <LinkBase :to="{ name: 'accessibility' }">{{ $t('a11y.footer_title') }}</LinkBase>
+            <LinkBase :to="{ name: 'translation-status' }">{{ $t('translation_status.title') }}</LinkBase>
+          </div>
+
+          <!-- Column 3: Community -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.community') }}</span>
+            <LinkBase to="https://repo.npmx.dev">{{ $t('footer.source') }}</LinkBase>
+            <LinkBase to="https://social.npmx.dev">{{ $t('footer.social') }}</LinkBase>
+            <LinkBase :to="discord.url">{{ discord.label }}</LinkBase>
           </div>
         </div>
       </div>

From 6e345ad40ef7c67d3e7e89add519abec37dbd0ee Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:50:44 -0400
Subject: [PATCH 10/22] fix: add pointer cursor to ButtonBase (#1760)

---
 app/components/Button/Base.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 1a142b193f..48997ac550 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -44,7 +44,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 cursor-pointer disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,

From bd8fa38de8fa6a7345b2e6e3864a79ed86298ebc Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:50:48 -0400
Subject: [PATCH 11/22] fix: cap pagination page count to max fetchable results
 (#1923)

---
 app/pages/search.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index b306359ca7..58fac08c02 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -265,6 +265,18 @@ const effectiveTotal = computed(() => {
   return displayResults.value.length
 })
 
+/**
+ * Total items for pagination purposes.
+ * Capped by EAGER_LOAD_SIZE so that the page count only reflects pages we can
+ * actually fetch — e.g. with a 500-result cap, max pages = ceil(500 / pageSize).
+ * Without this cap, a search returning total=92,000 would show 3,680 pages but
+ * navigation beyond page 20 (at 25/page) would silently fail.
+ */
+const paginationTotal = computed(() => {
+  const cap = EAGER_LOAD_SIZE[searchProvider.value]
+  return Math.min(effectiveTotal.value, cap)
+})
+
 // Handle filter chip removal
 function handleClearFilter(chip: FilterChip) {
   clearFilter(chip)
@@ -878,7 +890,7 @@ onBeforeUnmount(() => {
             v-model:mode="paginationMode"
             v-model:page-size="preferredPageSize"
             v-model:current-page="currentPage"
-            :total-items="effectiveTotal"
+            :total-items="paginationTotal"
             :view-mode="viewMode"
           />
         </div>

From 727f3055ac048824c02b6119ed06372b4db56a16 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:54:48 -0400
Subject: [PATCH 12/22] fix: add back button to blog page (#2022)

---
 app/pages/blog/index.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index ef824f0637..d582c964ca 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -21,9 +21,12 @@ useSeoMeta({
   <main class="container w-full flex-1 py-12 sm:py-16 overflow-x-hidden">
     <article class="max-w-2xl mx-auto">
       <header class="mb-12">
-        <h1 class="font-mono text-3xl sm:text-4xl font-medium">
-          {{ $t('blog.heading') }}
-        </h1>
+        <div class="flex items-baseline justify-between gap-4 mb-4">
+          <h1 class="font-mono text-3xl sm:text-4xl font-medium">
+            {{ $t('blog.heading') }}
+          </h1>
+          <BackButton />
+        </div>
         <p class="text-fg-muted text-lg">
           {{ $t('tagline') }}
         </p>

From a7d3613426ca49f982af329a7c59ff65b400ad11 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:54:53 -0400
Subject: [PATCH 13/22] fix: link aliased dependencies to their real package
 (#2010)

---
 app/components/Package/Dependencies.vue | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 2df68329c6..fa57207673 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -90,6 +90,19 @@ function getDepVersionClass(dep: string) {
 }
 
 const numberFormatter = useNumberFormatter()
+
+/**
+ * Parses npm alias syntax: "npm:real-pkg@^1.0.0"
+ * Returns { name, range } for the real package, or null if not an alias.
+ */
+function parseNpmAlias(version: string): { name: string; range: string } | null {
+  if (!version.startsWith('npm:')) return null
+  const spec = version.slice(4) // strip 'npm:'
+  // Handle scoped packages like @scope/pkg@1.0.0 — find @ after position 0
+  const atIdx = spec.startsWith('@') ? spec.indexOf('@', 1) : spec.indexOf('@')
+  if (atIdx === -1) return { name: spec, range: '' }
+  return { name: spec.slice(0, atIdx), range: spec.slice(atIdx + 1) }
+}
 </script>
 
 <template>
@@ -122,7 +135,7 @@ const numberFormatter = useNumberFormatter()
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
+          <LinkBase :to="packageRoute(parseNpmAlias(version)?.name ?? dep)" class="block truncate" dir="ltr">
             {{ dep }}
           </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
@@ -177,7 +190,7 @@ const numberFormatter = useNumberFormatter()
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
             </LinkBase>
             <LinkBase
-              :to="packageRoute(dep, version)"
+              :to="packageRoute(parseNpmAlias(version)?.name ?? dep, parseNpmAlias(version)?.range ?? version)"
               class="block truncate"
               :class="getDepVersionClass(dep)"
               :title="getDepVersionTooltip(dep, version)"
@@ -235,7 +248,7 @@ const numberFormatter = useNumberFormatter()
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
           <div class="flex items-center gap-2 min-w-0 flex-1">
-            <LinkBase :to="packageRoute(peer.name)" class="block max-w-[70%] break-words" dir="ltr">
+            <LinkBase :to="packageRoute(parseNpmAlias(peer.version)?.name ?? peer.name)" class="block max-w-[70%] break-words" dir="ltr">
               {{ peer.name }}
             </LinkBase>
             <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -243,7 +256,7 @@ const numberFormatter = useNumberFormatter()
             </TagStatic>
           </div>
           <LinkBase
-            :to="packageRoute(peer.name, peer.version)"
+            :to="packageRoute(parseNpmAlias(peer.version)?.name ?? peer.name, parseNpmAlias(peer.version)?.range ?? peer.version)"
             class="block truncate max-w-[30%]"
             :title="peer.version"
             dir="ltr"
@@ -296,11 +309,11 @@ const numberFormatter = useNumberFormatter()
           :key="dep"
           class="flex items-baseline justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block max-w-[80%] break-words" dir="ltr">
+          <LinkBase :to="packageRoute(parseNpmAlias(version)?.name ?? dep)" class="block max-w-[80%] break-words" dir="ltr">
             {{ dep }}
           </LinkBase>
           <LinkBase
-            :to="packageRoute(dep, version)"
+            :to="packageRoute(parseNpmAlias(version)?.name ?? dep, parseNpmAlias(version)?.range ?? version)"
             class="block truncate"
             :title="version"
             dir="ltr"

From 71785d66eb36e6f01ab60470378d3cb0f55f06c7 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 13:26:25 -0400
Subject: [PATCH 14/22] fix: resolve CI failures (unused imports, type errors,
 i18n schema, a11y, component test)

---
 app/components/AppFooter.vue                  |  6 +--
 app/components/CollapsibleSection.vue         |  1 -
 app/pages/package/[[org]]/[name].vue          | 22 ++------
 .../package/[[org]]/[name]/dependents.vue     | 12 +++--
 i18n/schema.json                              | 51 +++++++++++++++++++
 .../api/registry/dependents/[...pkg].get.ts   |  2 +-
 6 files changed, 67 insertions(+), 27 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 250e61fd91..d39f252dfd 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -24,7 +24,7 @@ const closeModal = () => modalRef.value?.close?.()
         <div class="hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-1 min-h-11 text-xs">
           <!-- Column 1: Product -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.product') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.product') }}</span>
             <LinkBase :to="{ name: 'about' }">{{ $t('footer.about') }}</LinkBase>
             <LinkBase :to="{ name: 'blog' }">{{ $t('footer.blog') }}</LinkBase>
             <LinkBase :to="NPMX_DOCS_SITE">{{ $t('footer.docs') }}</LinkBase>
@@ -119,7 +119,7 @@ const closeModal = () => modalRef.value?.close?.()
 
           <!-- Column 2: Legal & Info -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.legal') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.legal') }}</span>
             <LinkBase :to="{ name: 'privacy' }">{{ $t('privacy_policy.title') }}</LinkBase>
             <LinkBase :to="{ name: 'accessibility' }">{{ $t('a11y.footer_title') }}</LinkBase>
             <LinkBase :to="{ name: 'translation-status' }">{{ $t('translation_status.title') }}</LinkBase>
@@ -127,7 +127,7 @@ const closeModal = () => modalRef.value?.close?.()
 
           <!-- Column 3: Community -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.community') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.community') }}</span>
             <LinkBase to="https://repo.npmx.dev">{{ $t('footer.source') }}</LinkBase>
             <LinkBase to="https://social.npmx.dev">{{ $t('footer.social') }}</LinkBase>
             <LinkBase :to="discord.url">{{ discord.label }}</LinkBase>
diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 97b86ca936..26654380f6 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { shallowRef, computed } from 'vue'
-import { LinkBase } from '#components'
 
 interface Props {
   title: string
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 20072ed7c2..db92508062 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -322,11 +322,11 @@ const latestVersion = computed(() => {
 })
 
 // Detect license changes between current version and latest
+// SlimVersion does not carry license, so we compare against the package-level license
 const licenseChanged = computed(() => {
   const currentLicense = displayVersion.value?.license
-  const latestLicense = latestVersion.value?.license ?? pkg.value?.license
+  const latestLicense = pkg.value?.license
   if (!currentLicense || !latestLicense) return false
-  // Normalize: compare string representations
   const normalize = (l: unknown): string =>
     typeof l === 'string' ? l : (l as { type?: string })?.type ?? ''
   return normalize(currentLicense) !== normalize(latestLicense)
@@ -394,18 +394,6 @@ const sizeTooltip = computed(() => {
   return chunks.filter(Boolean).join('\n')
 })
 
-const hasDependencies = computed(() => {
-  if (!displayVersion.value) return false
-  const deps = displayVersion.value.dependencies
-  const peerDeps = displayVersion.value.peerDependencies
-  const optionalDeps = displayVersion.value.optionalDependencies
-  return (
-    (deps && Object.keys(deps).length > 0) ||
-    (peerDeps && Object.keys(peerDeps).length > 0) ||
-    (optionalDeps && Object.keys(optionalDeps).length > 0)
-  )
-})
-
 // Vulnerability count for the stats banner
 const vulnCount = computed(() => vulnTree.value?.totalCounts.total ?? 0)
 const hasVulnerabilities = computed(() => vulnCount.value > 0)
@@ -610,14 +598,14 @@ const showSkeleton = shallowRef(false)
                 {{ $t('package.stats.license') }}
               </dt>
               <dd class="font-mono text-sm text-fg flex items-center gap-2 flex-wrap">
-                <LicenseDisplay v-if="displayVersion?.license ?? pkg.license" :license="displayVersion?.license ?? pkg.license" />
+                <LicenseDisplay v-if="displayVersion?.license ?? pkg.license" :license="(displayVersion?.license ?? pkg.license) as string" />
                 <span v-else>{{ $t('package.license.none') }}</span>
                 <TooltipApp
                   v-if="licenseChanged"
-                  :text="$t('package.license.changed', { latest: latestVersion?.license ?? pkg.license })"
+                  :text="$t('package.license.changed', { latest: pkg.license })"
                   position="bottom"
                 >
-                  <span class="inline-flex items-center gap-1 px-1.5 py-0.5 text-2xs font-sans rounded bg-amber-500/15 text-amber-700 dark:text-amber-400 border border-amber-500/30 cursor-help">
+                  <span tabindex="0" class="inline-flex items-center gap-1 px-1.5 py-0.5 text-2xs font-sans rounded bg-amber-500/15 text-amber-700 dark:text-amber-400 border border-amber-500/30 cursor-help focus-visible:outline-2 focus-visible:outline-accent/70">
                     <span class="i-lucide:triangle-alert w-3 h-3" aria-hidden="true" />
                     {{ $t('package.license.changed_badge') }}
                   </span>
diff --git a/app/pages/package/[[org]]/[name]/dependents.vue b/app/pages/package/[[org]]/[name]/dependents.vue
index e80de0f289..edf77e8a9f 100644
--- a/app/pages/package/[[org]]/[name]/dependents.vue
+++ b/app/pages/package/[[org]]/[name]/dependents.vue
@@ -19,12 +19,14 @@ const resolvedVersion = computed(() => {
   return latest
 })
 
-const displayVersion = computed(() => {
-  if (!pkg.value || !resolvedVersion.value) return null
-  return pkg.value.versions[resolvedVersion.value] ?? null
-})
+const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 
-const latestVersion = computed(() => displayVersion.value ?? null)
+const latestVersion = computed(() => {
+  if (!pkg.value) return null
+  const latestTag = pkg.value['dist-tags']?.latest
+  if (!latestTag) return null
+  return pkg.value.versions[latestTag] ?? null
+})
 
 const versionUrlPattern = computed(() => {
   const split = packageName.value.split('/')
diff --git a/i18n/schema.json b/i18n/schema.json
index 885bd6eb5e..e8a1dc4117 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -63,6 +63,15 @@
         },
         "keyboard_shortcuts": {
           "type": "string"
+        },
+        "product": {
+          "type": "string"
+        },
+        "legal": {
+          "type": "string"
+        },
+        "community": {
+          "type": "string"
         }
       },
       "additionalProperties": false
@@ -625,6 +634,12 @@
         "scroll_to_top": {
           "type": "string"
         },
+        "previous": {
+          "type": "string"
+        },
+        "next": {
+          "type": "string"
+        },
         "cancel": {
           "type": "string"
         },
@@ -960,6 +975,9 @@
             },
             "compare_this_package": {
               "type": "string"
+            },
+            "dependents": {
+              "type": "string"
             }
           },
           "additionalProperties": false
@@ -1060,6 +1078,27 @@
           },
           "additionalProperties": false
         },
+        "dependents": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "subtitle": {
+              "type": "string"
+            },
+            "count": {
+              "type": "string"
+            },
+            "none": {
+              "type": "string"
+            },
+            "error": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
         "readme": {
           "type": "object",
           "properties": {
@@ -1368,6 +1407,9 @@
             },
             "vulnerabilities_count": {
               "type": "string"
+            },
+            "none": {
+              "type": "string"
             }
           },
           "additionalProperties": false
@@ -1698,6 +1740,12 @@
             },
             "none": {
               "type": "string"
+            },
+            "changed_badge": {
+              "type": "string"
+            },
+            "changed": {
+              "type": "string"
             }
           },
           "additionalProperties": false
@@ -2526,6 +2574,9 @@
         },
         "binary_rendering_warning": {
           "type": "string"
+        },
+        "toggle_word_wrap": {
+          "type": "string"
         }
       },
       "additionalProperties": false
diff --git a/server/api/registry/dependents/[...pkg].get.ts b/server/api/registry/dependents/[...pkg].get.ts
index d24505e9b2..bb87717159 100644
--- a/server/api/registry/dependents/[...pkg].get.ts
+++ b/server/api/registry/dependents/[...pkg].get.ts
@@ -1,4 +1,4 @@
-import { CACHE_MAX_AGE_FIVE_MINUTES, NPM_REGISTRY } from '#shared/utils/constants'
+import { CACHE_MAX_AGE_FIVE_MINUTES } from '#shared/utils/constants'
 
 const NPM_SEARCH_BASE = 'https://registry.npmjs.org/-/v1/search'
 

From d704602b9eac3dbf17c5e774182ea70d82f2988c Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 22 Mar 2026 17:27:46 +0000
Subject: [PATCH 15/22] [autofix.ci] apply automated fixes

---
 app/components/AppFooter.vue                  | 16 +++++--
 app/components/Code/Viewer.vue                | 12 ++++-
 app/components/Compare/FacetBarChart.vue      | 16 ++-----
 app/components/Package/Dependencies.vue       | 45 ++++++++++++++++---
 .../v/[version]/[...filePath].vue             |  6 ++-
 app/pages/package/[[org]]/[name].vue          | 12 +++--
 .../package/[[org]]/[name]/dependents.vue     | 10 +----
 server/utils/readme.ts                        |  3 +-
 8 files changed, 82 insertions(+), 38 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index d39f252dfd..3548b118aa 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -24,7 +24,9 @@ const closeModal = () => modalRef.value?.close?.()
         <div class="hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-1 min-h-11 text-xs">
           <!-- Column 1: Product -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.product') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
+              $t('footer.product')
+            }}</span>
             <LinkBase :to="{ name: 'about' }">{{ $t('footer.about') }}</LinkBase>
             <LinkBase :to="{ name: 'blog' }">{{ $t('footer.blog') }}</LinkBase>
             <LinkBase :to="NPMX_DOCS_SITE">{{ $t('footer.docs') }}</LinkBase>
@@ -119,15 +121,21 @@ const closeModal = () => modalRef.value?.close?.()
 
           <!-- Column 2: Legal & Info -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.legal') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
+              $t('footer.legal')
+            }}</span>
             <LinkBase :to="{ name: 'privacy' }">{{ $t('privacy_policy.title') }}</LinkBase>
             <LinkBase :to="{ name: 'accessibility' }">{{ $t('a11y.footer_title') }}</LinkBase>
-            <LinkBase :to="{ name: 'translation-status' }">{{ $t('translation_status.title') }}</LinkBase>
+            <LinkBase :to="{ name: 'translation-status' }">{{
+              $t('translation_status.title')
+            }}</LinkBase>
           </div>
 
           <!-- Column 3: Community -->
           <div class="flex flex-col gap-1">
-            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{ $t('footer.community') }}</span>
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
+              $t('footer.community')
+            }}</span>
             <LinkBase to="https://repo.npmx.dev">{{ $t('footer.source') }}</LinkBase>
             <LinkBase to="https://social.npmx.dev">{{ $t('footer.social') }}</LinkBase>
             <LinkBase :to="discord.url">{{ discord.label }}</LinkBase>
diff --git a/app/components/Code/Viewer.vue b/app/components/Code/Viewer.vue
index 513b518f99..93dc5078d0 100644
--- a/app/components/Code/Viewer.vue
+++ b/app/components/Code/Viewer.vue
@@ -114,9 +114,17 @@ watch(
     </div>
 
     <!-- Code content -->
-    <div class="code-content flex-1 min-w-0" :class="wordWrap ? 'overflow-x-hidden' : 'overflow-x-auto'">
+    <div
+      class="code-content flex-1 min-w-0"
+      :class="wordWrap ? 'overflow-x-hidden' : 'overflow-x-auto'"
+    >
       <!-- eslint-disable vue/no-v-html -- HTML is generated server-side by Shiki -->
-      <div ref="codeRef" class="code-lines min-w-full w-fit" :class="{ 'word-wrap': wordWrap }" v-html="html" />
+      <div
+        ref="codeRef"
+        class="code-lines min-w-full w-fit"
+        :class="{ 'word-wrap': wordWrap }"
+        v-html="html"
+      />
       <!-- eslint-enable vue/no-v-html -->
     </div>
   </div>
diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index 563442db94..417ea4e543 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -332,12 +332,8 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
           <SkeletonInline class="h-3 w-36 rounded" />
         </div>
         <div class="flex flex-col gap-2 px-2" aria-hidden="true">
-          <div
-            v-for="(pkg, i) in packages"
-            :key="pkg"
-            class="flex items-center gap-3"
-          >
-            <SkeletonInline class="h-3 shrink-0" :style="{ width: `${40 + (i * 17) % 40}%` }" />
+          <div v-for="(pkg, i) in packages" :key="pkg" class="flex items-center gap-3">
+            <SkeletonInline class="h-3 shrink-0" :style="{ width: `${40 + ((i * 17) % 40)}%` }" />
             <SkeletonInline class="h-7 flex-1 rounded" />
           </div>
         </div>
@@ -352,12 +348,8 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
       </div>
       <!-- Bar skeletons with varying widths for visual realism -->
       <div class="flex flex-col gap-2 px-2" aria-hidden="true">
-        <div
-          v-for="(pkg, i) in packages"
-          :key="pkg"
-          class="flex items-center gap-3"
-        >
-          <SkeletonInline class="h-3 shrink-0" :style="{ width: `${40 + (i * 17) % 40}%` }" />
+        <div v-for="(pkg, i) in packages" :key="pkg" class="flex items-center gap-3">
+          <SkeletonInline class="h-3 shrink-0" :style="{ width: `${40 + ((i * 17) % 40)}%` }" />
           <SkeletonInline class="h-7 flex-1 rounded" />
         </div>
       </div>
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index fa57207673..913359c9bf 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -109,7 +109,11 @@ function parseNpmAlias(version: string): { name: string; range: string } | null
   <div class="space-y-8">
     <!-- Empty state when no dependencies at all -->
     <p
-      v-if="sortedDependencies.length === 0 && sortedPeerDependencies.length === 0 && sortedOptionalDependencies.length === 0"
+      v-if="
+        sortedDependencies.length === 0 &&
+        sortedPeerDependencies.length === 0 &&
+        sortedOptionalDependencies.length === 0
+      "
       class="text-sm text-fg-subtle"
     >
       {{ $t('package.dependencies.none') }}
@@ -135,7 +139,11 @@ function parseNpmAlias(version: string): { name: string; range: string } | null
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(parseNpmAlias(version)?.name ?? dep)" class="block truncate" dir="ltr">
+          <LinkBase
+            :to="packageRoute(parseNpmAlias(version)?.name ?? dep)"
+            class="block truncate"
+            dir="ltr"
+          >
             {{ dep }}
           </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
@@ -190,7 +198,12 @@ function parseNpmAlias(version: string): { name: string; range: string } | null
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
             </LinkBase>
             <LinkBase
-              :to="packageRoute(parseNpmAlias(version)?.name ?? dep, parseNpmAlias(version)?.range ?? version)"
+              :to="
+                packageRoute(
+                  parseNpmAlias(version)?.name ?? dep,
+                  parseNpmAlias(version)?.range ?? version,
+                )
+              "
               class="block truncate"
               :class="getDepVersionClass(dep)"
               :title="getDepVersionTooltip(dep, version)"
@@ -248,7 +261,11 @@ function parseNpmAlias(version: string): { name: string; range: string } | null
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
           <div class="flex items-center gap-2 min-w-0 flex-1">
-            <LinkBase :to="packageRoute(parseNpmAlias(peer.version)?.name ?? peer.name)" class="block max-w-[70%] break-words" dir="ltr">
+            <LinkBase
+              :to="packageRoute(parseNpmAlias(peer.version)?.name ?? peer.name)"
+              class="block max-w-[70%] break-words"
+              dir="ltr"
+            >
               {{ peer.name }}
             </LinkBase>
             <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -256,7 +273,12 @@ function parseNpmAlias(version: string): { name: string; range: string } | null
             </TagStatic>
           </div>
           <LinkBase
-            :to="packageRoute(parseNpmAlias(peer.version)?.name ?? peer.name, parseNpmAlias(peer.version)?.range ?? peer.version)"
+            :to="
+              packageRoute(
+                parseNpmAlias(peer.version)?.name ?? peer.name,
+                parseNpmAlias(peer.version)?.range ?? peer.version,
+              )
+            "
             class="block truncate max-w-[30%]"
             :title="peer.version"
             dir="ltr"
@@ -309,11 +331,20 @@ function parseNpmAlias(version: string): { name: string; range: string } | null
           :key="dep"
           class="flex items-baseline justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(parseNpmAlias(version)?.name ?? dep)" class="block max-w-[80%] break-words" dir="ltr">
+          <LinkBase
+            :to="packageRoute(parseNpmAlias(version)?.name ?? dep)"
+            class="block max-w-[80%] break-words"
+            dir="ltr"
+          >
             {{ dep }}
           </LinkBase>
           <LinkBase
-            :to="packageRoute(parseNpmAlias(version)?.name ?? dep, parseNpmAlias(version)?.range ?? version)"
+            :to="
+              packageRoute(
+                parseNpmAlias(version)?.name ?? dep,
+                parseNpmAlias(version)?.range ?? version,
+              )
+            "
             class="block truncate"
             :title="version"
             dir="ltr"
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index 898eb50f2c..50d9a746fe 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -421,7 +421,11 @@ defineOgImageComponent('Default', {
             <button
               type="button"
               class="px-2 py-1 font-mono text-xs border rounded transition-colors inline-flex items-center gap-1"
-              :class="wordWrap ? 'bg-accent/10 text-accent border-accent/30' : 'text-fg-muted bg-bg-subtle border-border hover:text-fg hover:border-border-hover'"
+              :class="
+                wordWrap
+                  ? 'bg-accent/10 text-accent border-accent/30'
+                  : 'text-fg-muted bg-bg-subtle border-border hover:text-fg hover:border-border-hover'
+              "
               :aria-pressed="wordWrap"
               :title="$t('code.toggle_word_wrap')"
               @click="wordWrap = !wordWrap"
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index db92508062..4bb2930835 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -328,7 +328,7 @@ const licenseChanged = computed(() => {
   const latestLicense = pkg.value?.license
   if (!currentLicense || !latestLicense) return false
   const normalize = (l: unknown): string =>
-    typeof l === 'string' ? l : (l as { type?: string })?.type ?? ''
+    typeof l === 'string' ? l : ((l as { type?: string })?.type ?? '')
   return normalize(currentLicense) !== normalize(latestLicense)
 })
 
@@ -598,14 +598,20 @@ const showSkeleton = shallowRef(false)
                 {{ $t('package.stats.license') }}
               </dt>
               <dd class="font-mono text-sm text-fg flex items-center gap-2 flex-wrap">
-                <LicenseDisplay v-if="displayVersion?.license ?? pkg.license" :license="(displayVersion?.license ?? pkg.license) as string" />
+                <LicenseDisplay
+                  v-if="displayVersion?.license ?? pkg.license"
+                  :license="(displayVersion?.license ?? pkg.license) as string"
+                />
                 <span v-else>{{ $t('package.license.none') }}</span>
                 <TooltipApp
                   v-if="licenseChanged"
                   :text="$t('package.license.changed', { latest: pkg.license })"
                   position="bottom"
                 >
-                  <span tabindex="0" class="inline-flex items-center gap-1 px-1.5 py-0.5 text-2xs font-sans rounded bg-amber-500/15 text-amber-700 dark:text-amber-400 border border-amber-500/30 cursor-help focus-visible:outline-2 focus-visible:outline-accent/70">
+                  <span
+                    tabindex="0"
+                    class="inline-flex items-center gap-1 px-1.5 py-0.5 text-2xs font-sans rounded bg-amber-500/15 text-amber-700 dark:text-amber-400 border border-amber-500/30 cursor-help focus-visible:outline-2 focus-visible:outline-accent/70"
+                  >
                     <span class="i-lucide:triangle-alert w-3 h-3" aria-hidden="true" />
                     {{ $t('package.license.changed_badge') }}
                   </span>
diff --git a/app/pages/package/[[org]]/[name]/dependents.vue b/app/pages/package/[[org]]/[name]/dependents.vue
index edf77e8a9f..38254b340a 100644
--- a/app/pages/package/[[org]]/[name]/dependents.vue
+++ b/app/pages/package/[[org]]/[name]/dependents.vue
@@ -171,14 +171,8 @@ useSeoMeta({
           >
             {{ $t('common.previous') }}
           </ButtonBase>
-          <span class="text-sm text-fg-muted font-mono">
-            {{ page + 1 }} / {{ totalPages }}
-          </span>
-          <ButtonBase
-            variant="secondary"
-            :disabled="page >= totalPages - 1"
-            @click="nextPage"
-          >
+          <span class="text-sm text-fg-muted font-mono"> {{ page + 1 }} / {{ totalPages }} </span>
+          <ButtonBase variant="secondary" :disabled="page >= totalPages - 1" @click="nextPage">
             {{ $t('common.next') }}
             <span class="i-lucide:chevron-right w-4 h-4" aria-hidden="true" />
           </ButtonBase>
diff --git a/server/utils/readme.ts b/server/utils/readme.ts
index 1ad6bea6af..50a8d838d2 100644
--- a/server/utils/readme.ts
+++ b/server/utils/readme.ts
@@ -132,7 +132,8 @@ function matchPlaygroundProvider(url: string): PlaygroundProvider | null {
         if (
           (hostname === domain || hostname.endsWith(`.${domain}`)) &&
           (!provider.paths || provider.paths.some(path => parsed.pathname.startsWith(path))) &&
-          (!provider.pathContains || provider.pathContains.some(seg => parsed.pathname.includes(seg)))
+          (!provider.pathContains ||
+            provider.pathContains.some(seg => parsed.pathname.includes(seg)))
         ) {
           return provider
         }

From 29974e5f3ebe7c5b135fd5b89eed36ead5dcc54c Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 13:29:00 -0400
Subject: [PATCH 16/22] fix(a11y): add aria-expanded and aria-controls to
 collapsible title button

---
 app/components/CollapsibleSection.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 26654380f6..097858f7b8 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -106,7 +106,9 @@ useHead({
         <button
           type="button"
           class="text-start focus-visible:outline-accent/70 rounded"
-          :aria-label="`${isOpen ? 'Collapse' : 'Expand'} ${title}`"
+          :aria-expanded="isOpen"
+          :aria-controls="contentId"
+          :aria-label="ariaLabel"
           @click="toggle"
         >
           {{ title }}

From 72baa25674bf82eee7e71420ea647307bacf3918 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 13:39:23 -0400
Subject: [PATCH 17/22] fix(a11y): remove redundant aria-label from collapsible
 title button

---
 app/components/CollapsibleSection.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 097858f7b8..1d83a22cda 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -108,7 +108,6 @@ useHead({
           class="text-start focus-visible:outline-accent/70 rounded"
           :aria-expanded="isOpen"
           :aria-controls="contentId"
-          :aria-label="ariaLabel"
           @click="toggle"
         >
           {{ title }}

From ece3b66a891869932d219688c42b73e7fac68a0f Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 13:57:37 -0400
Subject: [PATCH 18/22] fix(a11y): match copy button aria-label to its visible
 text

---
 app/components/CopyToClipboardButton.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/CopyToClipboardButton.vue b/app/components/CopyToClipboardButton.vue
index 3877e58c7d..10120ec614 100644
--- a/app/components/CopyToClipboardButton.vue
+++ b/app/components/CopyToClipboardButton.vue
@@ -16,8 +16,8 @@ const props = defineProps<{
 
 const buttonCopyText = computed(() => props.copyText || $t('common.copy'))
 const buttonCopiedText = computed(() => props.copiedText || $t('common.copied'))
-const buttonAriaLabelCopy = computed(() => props.ariaLabelCopy || $t('common.copy'))
-const buttonAriaLabelCopied = computed(() => props.ariaLabelCopied || $t('common.copied'))
+const buttonAriaLabelCopy = computed(() => props.ariaLabelCopy || props.copyText || $t('common.copy'))
+const buttonAriaLabelCopied = computed(() => props.ariaLabelCopied || props.copiedText || $t('common.copied'))
 
 const emit = defineEmits<{
   click: []

From 4fe414542436847a9f79fe245576b093d8e82547 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 22 Mar 2026 17:58:52 +0000
Subject: [PATCH 19/22] [autofix.ci] apply automated fixes

---
 app/components/CopyToClipboardButton.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/CopyToClipboardButton.vue b/app/components/CopyToClipboardButton.vue
index 10120ec614..8db328f6fd 100644
--- a/app/components/CopyToClipboardButton.vue
+++ b/app/components/CopyToClipboardButton.vue
@@ -16,8 +16,12 @@ const props = defineProps<{
 
 const buttonCopyText = computed(() => props.copyText || $t('common.copy'))
 const buttonCopiedText = computed(() => props.copiedText || $t('common.copied'))
-const buttonAriaLabelCopy = computed(() => props.ariaLabelCopy || props.copyText || $t('common.copy'))
-const buttonAriaLabelCopied = computed(() => props.ariaLabelCopied || props.copiedText || $t('common.copied'))
+const buttonAriaLabelCopy = computed(
+  () => props.ariaLabelCopy || props.copyText || $t('common.copy'),
+)
+const buttonAriaLabelCopied = computed(
+  () => props.ariaLabelCopied || props.copiedText || $t('common.copied'),
+)
 
 const emit = defineEmits<{
   click: []

From d2f86d2fd2812fd009643448fef0a11ed245685e Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 14:03:06 -0400
Subject: [PATCH 20/22] Update Base.vue

---
 app/components/Button/Base.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 48997ac550..00d3fa4977 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -44,7 +44,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 cursor-pointer disabled:(opacity-40 cursor-not-allowed border-transparent)"
+class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 cursor-pointer disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,

From 0f63f0e8d6cd6407e338d5394ef58cff512c95f3 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 22 Mar 2026 18:04:15 +0000
Subject: [PATCH 21/22] [autofix.ci] apply automated fixes

---
 app/components/Button/Base.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 00d3fa4977..48997ac550 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -44,7 +44,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 cursor-pointer disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 cursor-pointer disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,

From 99322d5a57e72319caac57ef3ce26bcb7b3aa1dd Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 14:26:38 -0400
Subject: [PATCH 22/22] fix(a11y): increase provenance link touch target size
 to meet 24px minimum

---
 app/components/Package/Header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index bed47dd4e5..100adc07a5 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -283,7 +283,7 @@ const fundingUrl = computed(() => {
                 :to="packageRoute(packageName, resolvedVersion, '#provenance')"
                 :aria-label="$t('package.provenance_section.view_more_details')"
                 classicon="i-lucide:shield-check"
-                class="py-1.25 px-2 me-2"
+                class="py-1.5 px-2 me-2"
               />
             </TooltipApp>
           </template>