Merge branch 'main' of github.com:nulfrost/npmx.dev into refactor/modal-a11y

Author: nulfrost

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Daniel Roe
+Copyright (c) 2026 npmx team and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

app/components/AppHeader.vue

@@ -185,7 +185,7 @@ onKeyStroke(
         <!-- Mobile: Menu button (always visible, toggles menu) -->
         <button
           type="button"
-          class="sm:hidden p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           :aria-label="showMobileMenu ? $t('common.close') : $t('nav.open_menu')"
           :aria-expanded="showMobileMenu"
           @click="showMobileMenu = !showMobileMenu"

app/components/PackageTableRow.vue

@@ -17,8 +17,7 @@ const emit = defineEmits<{
 const pkg = computed(() => props.result.package)
 const score = computed(() => props.result.score)
 
-// Get the best available date: prefer result.updated (from packument), fall back to package.date
-const updatedDate = computed(() => props.result.updated ?? props.result.package.date)
+const updatedDate = computed(() => props.result.package.date)
 
 function formatDownloads(count?: number): string {
   if (count === undefined) return '-'

app/components/PackageVulnerabilityTree.vue

@@ -7,17 +7,11 @@ const props = defineProps<{
   version: string
 }>()
 
-const {
-  data: vulnTree,
-  status,
-  fetch: fetchVulnTree,
-} = useDependencyAnalysis(
+const { data: vulnTree, status } = useDependencyAnalysis(
   () => props.packageName,
   () => props.version,
 )
 
-onMounted(() => fetchVulnTree())
-
 const isExpanded = shallowRef(false)
 const showAllPackages = shallowRef(false)
 const showAllVulnerabilities = shallowRef(false)

app/components/Toggle.client.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string
+  description?: string
+}>()
+
+const checked = defineModel<boolean>({
+  default: false,
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    class="w-full flex items-center justify-between gap-4 group"
+    role="switch"
+    :aria-checked="checked"
+    @click="checked = !checked"
+  >
+    <span v-if="label" class="text-sm text-fg font-medium text-start">
+      {{ label }}
+    </span>
+    <span
+      class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
+      :class="checked ? 'bg-accent' : 'bg-bg border border-border'"
+      aria-hidden="true"
+    >
+      <span
+        class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
+        :class="checked ? 'bg-bg' : 'bg-fg-muted'"
+      />
+    </span>
+  </button>
+  <p v-if="description" class="text-sm text-fg-muted">
+    {{ description }}
+  </p>
+</template>
+
+<style scoped>
+button[aria-checked='false'] > span:last-of-type > span {
+  translate: 0;
+}
+button[aria-checked='true'] > span:last-of-type > span {
+  translate: calc(100%);
+}
+html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
+  translate: calc(-100%);
+}
+</style>

app/components/Toggle.server.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div class="w-full flex items-center justify-between gap-4">
+    <span v-if="label" class="text-sm text-fg font-medium text-start">
+      {{ label }}
+    </span>
+    <span class="skeleton block h-6 w-11 shrink-0 rounded-full" />
+  </div>
+  <p v-if="description" class="text-sm text-fg-muted">
+    {{ description }}
+  </p>
+</template>

app/composables/useCachedFetch.ts

@@ -34,14 +34,10 @@ export function useCachedFetch(): CachedFetchFunction {
   if (import.meta.client) {
     return async <T = unknown>(
       url: string,
-      options: {
-        method?: string
-        body?: unknown
-        headers?: Record<string, string>
-      } = {},
+      options: Parameters<typeof $fetch>[1] = {},
       _ttl?: number,
     ): Promise<CachedFetchResult<T>> => {
-      const data = (await $fetch(url, options as Parameters<typeof $fetch>[1])) as T
+      const data = (await $fetch<T>(url, options)) as T
       return { data, isStale: false, cachedAt: null }
     }
   }
@@ -59,14 +55,10 @@ export function useCachedFetch(): CachedFetchFunction {
   // (shouldn't happen in normal operation)
   return async <T = unknown>(
     url: string,
-    options: {
-      method?: string
-      body?: unknown
-      headers?: Record<string, string>
-    } = {},
+    options: Parameters<typeof $fetch>[1] = {},
     _ttl?: number,
   ): Promise<CachedFetchResult<T>> => {
-    const data = (await $fetch(url, options as Parameters<typeof $fetch>[1])) as T
+    const data = (await $fetch<T>(url, options)) as T
     return { data, isStale: false, cachedAt: null }
   }
 }

app/composables/useDependencyAnalysis.ts

@@ -1,5 +1,3 @@
-import type { VulnerabilityTreeResult } from '#shared/types/dependency-analysis'
-
 /**
  * Shared composable for dependency analysis data (vulnerabilities, deprecated packages).
  * Fetches once and caches the result so multiple components can use it.
@@ -9,44 +7,8 @@ export function useDependencyAnalysis(
   packageName: MaybeRefOrGetter<string>,
   version: MaybeRefOrGetter<string>,
 ) {
-  // Build a stable key from the current values
-  const name = toValue(packageName)
-  const ver = toValue(version)
-  const key = `dep-analysis:v1:${name}@${ver}`
-
-  // Use useState for SSR-safe caching across components
-  const data = useState<VulnerabilityTreeResult | null>(key, () => null)
-  const status = useState<'idle' | 'pending' | 'success' | 'error'>(`${key}:status`, () => 'idle')
-  const error = useState<Error | null>(`${key}:error`, () => null)
-
-  async function fetch() {
-    const pkgName = toValue(packageName)
-    const pkgVersion = toValue(version)
-
-    if (!pkgName || !pkgVersion) return
-
-    // Already fetched or fetching
-    if (status.value === 'success' || status.value === 'pending') return
-
-    status.value = 'pending'
-    error.value = null
-
-    try {
-      const result = await $fetch<VulnerabilityTreeResult>(
-        `/api/registry/vulnerabilities/${encodePackageName(pkgName)}/v/${pkgVersion}`,
-      )
-      data.value = result
-      status.value = 'success'
-    } catch (e) {
-      error.value = e instanceof Error ? e : new Error('Failed to fetch dependency analysis')
-      status.value = 'error'
-    }
-  }
-
-  return {
-    data: readonly(data),
-    status: readonly(status),
-    error: readonly(error),
-    fetch,
-  }
+  return useFetch(
+    () =>
+      `/api/registry/vulnerabilities/${encodePackageName(toValue(packageName))}/v/${toValue(version)}`,
+  )
 }

app/composables/useNpmRegistry.ts

@@ -185,9 +185,11 @@ export function usePackage(
 
   const asyncData = useLazyAsyncData(
     () => `package:${toValue(name)}:${toValue(requestedVersion) ?? ''}`,
-    async () => {
+    async (_nuxtApp, { signal }) => {
       const encodedName = encodePackageName(toValue(name))
-      const { data: r, isStale } = await cachedFetch<Packument>(`${NPM_REGISTRY}/${encodedName}`)
+      const { data: r, isStale } = await cachedFetch<Packument>(`${NPM_REGISTRY}/${encodedName}`, {
+        signal,
+      })
       const reqVer = toValue(requestedVersion)
       const pkg = transformPackument(r, reqVer)
       const resolvedVersion = getResolvedVersion(pkg, reqVer)
@@ -233,10 +235,11 @@ export function usePackageDownloads(
 
   const asyncData = useLazyAsyncData(
     () => `downloads:${toValue(name)}:${toValue(period)}`,
-    async () => {
+    async (_nuxtApp, { signal }) => {
       const encodedName = encodePackageName(toValue(name))
       const { data, isStale } = await cachedFetch<NpmDownloadCount>(
         `${NPM_API}/downloads/point/${toValue(period)}/${encodedName}`,
+        { signal },
       )
       return { ...data, isStale }
     },
@@ -306,7 +309,7 @@ export function useNpmSearch(
 
   const asyncData = useLazyAsyncData(
     () => `search:incremental:${toValue(query)}`,
-    async () => {
+    async (_nuxtApp, { signal }) => {
       const q = toValue(query)
       if (!q.trim()) {
         return emptySearchResponse
@@ -325,7 +328,7 @@ export function useNpmSearch(
 
       const { data: response, isStale } = await cachedFetch<NpmSearchResponse>(
         `${NPM_REGISTRY}/-/v1/search?${params.toString()}`,
-        {},
+        { signal },
         60,
       )
 
@@ -509,7 +512,7 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
 
   const asyncData = useLazyAsyncData(
     () => `org-packages:${toValue(orgName)}`,
-    async () => {
+    async (_nuxtApp, { signal }) => {
       const org = toValue(orgName)
       if (!org) {
         return emptySearchResponse
@@ -520,6 +523,7 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
       try {
         const { data } = await cachedFetch<Record<string, string>>(
           `${NPM_REGISTRY}/-/org/${encodeURIComponent(org)}/package`,
+          { signal },
         )
         packageNames = Object.keys(data)
       } catch (err) {
@@ -553,6 +557,7 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
                   const encoded = encodePackageName(name)
                   const { data: pkg } = await cachedFetch<MinimalPackument>(
                     `${NPM_REGISTRY}/${encoded}`,
+                    { signal },
                   )
                   return pkg
                 } catch {