Merge branch 'main' into docs/dev-cache-busting

Author: danielroe

app/components/Package/TrendsChart.vue

@@ -1410,7 +1410,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
     chart: {
       height: isMobile.value ? 950 : 600,
       backgroundColor: colors.value.bg,
-      padding: { bottom: displayedGranularity.value === 'yearly' ? 84 : 64, right: 100 }, // padding right is set to leave space of last datapoint label(s)
+      padding: { bottom: displayedGranularity.value === 'yearly' ? 84 : 64, right: 128 }, // padding right is set to leave space of last datapoint label(s)
       userOptions: {
         buttons: {
           pdf: false,
@@ -1682,7 +1682,11 @@ watch(selectedMetric, value => {
     </h2>
 
     <!-- Chart panel (active metric) -->
-    <div role="region" aria-labelledby="trends-chart-title" class="min-h-[260px]">
+    <div
+      role="region"
+      aria-labelledby="trends-chart-title"
+      :class="isMobile === false && width > 0 ? 'min-h-[567px]' : 'min-h-[260px]'"
+    >
       <ClientOnly v-if="chartData.dataset">
         <div :data-pending="pending" :data-minimap-visible="maxDatapoints > 6">
           <VueUiXy

app/components/Package/WeeklyDownloadStats.vue

@@ -264,7 +264,7 @@ const config = computed<VueUiSparklineConfig>(() => {
 </script>
 
 <template>
-  <div class="space-y-8">
+  <div class="space-y-8 h-[110px] motion-safe:h-[140px]">
     <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
       <template #actions>
         <ButtonBase
@@ -307,6 +307,10 @@ const config = computed<VueUiSparklineConfig>(() => {
                     <SkeletonInline class="h-px w-full" />
                   </div>
                 </div>
+                <!-- Animation toggle placeholder -->
+                <div class="w-full hidden motion-safe:flex flex-1 items-end justify-end">
+                  <SkeletonInline class="h-[20px] w-30" />
+                </div>
               </div>
             </template>
           </ClientOnly>
@@ -351,10 +355,7 @@ const config = computed<VueUiSparklineConfig>(() => {
 
     <!-- This placeholder bears the same dimensions as the PackageTrendsChart component -->
     <!-- Avoids CLS when the dialog has transitioned -->
-    <div
-      v-if="!hasChartModalTransitioned"
-      class="w-full aspect-[390/634.5] sm:aspect-[718/622.797]"
-    />
+    <div v-if="!hasChartModalTransitioned" class="w-full aspect-[390/634.5] sm:aspect-[718/647]" />
   </PackageChartModal>
 </template>
 

app/components/ScrollToTop.client.vue

@@ -3,42 +3,32 @@ const route = useRoute()
 
 // Pages where scroll-to-top should NOT be shown
 const excludedRoutes = new Set(['index', 'code'])
+const isPackagePage = computed(() => route.name === 'package' || route.name === 'package-version')
 
-const isActive = computed(() => !excludedRoutes.has(route.name as string))
+const isActive = computed(() => !excludedRoutes.has(route.name as string) && !isPackagePage.value)
 
 const isMounted = useMounted()
-const isVisible = shallowRef(false)
-const scrollThreshold = 300
+const { scrollToTop, isTouchDeviceClient } = useScrollToTop()
+
+const { y: scrollTop } = useScroll(window)
+const isVisible = computed(() => {
+  if (supportsScrollStateQueries.value) return false
+  return scrollTop.value > SCROLL_TO_TOP_THRESHOLD
+})
 const { isSupported: supportsScrollStateQueries } = useCssSupports(
   'container-type',
   'scroll-state',
   { ssrValue: false },
 )
-
-function onScroll() {
-  if (!supportsScrollStateQueries.value) {
-    return
-  }
-  isVisible.value = window.scrollY > scrollThreshold
-}
-
-function scrollToTop() {
-  window.scrollTo({ top: 0, behavior: 'smooth' })
-}
-
-useEventListener('scroll', onScroll, { passive: true })
-
-onMounted(() => {
-  onScroll()
-})
+const shouldShowButton = computed(() => isActive.value && isTouchDeviceClient.value)
 </script>
 
 <template>
   <!-- When CSS scroll-state is supported, use CSS-only visibility -->
   <button
-    v-if="isActive && supportsScrollStateQueries"
+    v-if="shouldShowButton && supportsScrollStateQueries"
     type="button"
-    class="scroll-to-top-css fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+    class="scroll-to-top-css fixed bottom-4 inset-ie-4 z-50 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 active:scale-95"
     :aria-label="$t('common.scroll_to_top')"
     @click="scrollToTop"
   >
@@ -56,11 +46,11 @@ onMounted(() => {
     leave-to-class="opacity-0 translate-y-2"
   >
     <button
-      v-if="isActive && isMounted && isVisible"
+      v-if="shouldShowButton && isMounted && isVisible"
       type="button"
-      class="fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+      class="fixed bottom-4 inset-ie-4 z-50 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 active:scale-95"
       :aria-label="$t('common.scroll_to_top')"
-      @click="scrollToTop"
+      @click="() => scrollToTop()"
     >
       <span class="i-lucide:arrow-up w-5 h-5" aria-hidden="true" />
     </button>

app/composables/npm/useResolvedVersion.ts

@@ -4,15 +4,17 @@ export function useResolvedVersion(
   packageName: MaybeRefOrGetter<string>,
   requestedVersion: MaybeRefOrGetter<string | null>,
 ) {
-  return useFetch(
-    () => {
+  return useAsyncData(
+    () => `resolved-version:${toValue(packageName)}:${toValue(requestedVersion) ?? 'latest'}`,
+    async () => {
       const version = toValue(requestedVersion)
-      return version
-        ? `https://npm.antfu.dev/${toValue(packageName)}@${version}`
-        : `https://npm.antfu.dev/${toValue(packageName)}`
-    },
-    {
-      transform: (data: ResolvedPackageVersion) => data.version,
+      const name = toValue(packageName)
+      const url = version
+        ? `https://npm.antfu.dev/${name}@${version}`
+        : `https://npm.antfu.dev/${name}`
+      const data = await $fetch<ResolvedPackageVersion>(url)
+      return data.version
     },
+    { default: () => null },
   )
 }

app/composables/useScrollToTop.ts

@@ -0,0 +1,93 @@
+// Easing function for the scroll animation
+const easeOutQuad = (t: number) => t * (2 - t)
+
+export const SCROLL_TO_TOP_THRESHOLD = 300
+const SCROLL_TO_TOP_DURATION = 500
+
+/**
+ * Scroll to the top of the page with a smooth animation.
+ * @param options - Configuration options for the scroll animation.
+ * @returns An object containing the scrollToTop function and a cancel function.
+ */
+export const useScrollToTop = createSharedComposable(function useScrollToTop() {
+  // Check if prefers-reduced-motion is enabled
+  const preferReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
+
+  /**
+   * Active requestAnimationFrame id for the current auto-scroll animation
+   */
+  let rafId: number | null = null
+  const isScrolling = ref(false)
+
+  /**
+   * Stop any in-flight auto-scroll before starting a new one.
+   */
+  function cancel() {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+    isScrolling.value = false
+  }
+
+  // Cancel scroll on user interaction
+  const onInteraction = () => {
+    if (isScrolling.value) {
+      cancel()
+    }
+  }
+
+  if (import.meta.client) {
+    const listenerOptions = { passive: true }
+    useEventListener(window, 'wheel', onInteraction, listenerOptions)
+    useEventListener(window, 'touchstart', onInteraction, listenerOptions)
+    useEventListener(window, 'mousedown', onInteraction, listenerOptions)
+  }
+
+  function scrollToTop() {
+    cancel()
+
+    if (preferReducedMotion.value) {
+      window.scrollTo({ top: 0, behavior: 'instant' })
+      return
+    }
+
+    const start = window.scrollY
+    if (start <= 0) return
+
+    isScrolling.value = true
+
+    const startTime = performance.now()
+    const change = -start
+
+    // Start the frame-by-frame scroll animation.
+    function animate() {
+      const elapsed = performance.now() - startTime
+      const t = Math.min(elapsed / SCROLL_TO_TOP_DURATION, 1)
+      const y = start + change * easeOutQuad(t)
+
+      window.scrollTo({ top: y })
+
+      if (t < 1 && isScrolling.value) {
+        rafId = requestAnimationFrame(animate)
+      } else {
+        cancel()
+      }
+    }
+
+    rafId = requestAnimationFrame(animate)
+  }
+
+  tryOnScopeDispose(cancel)
+
+  const isTouchDeviceClient = shallowRef(false)
+  onMounted(() => {
+    isTouchDeviceClient.value = isTouchDevice()
+  })
+
+  return {
+    scrollToTop,
+    cancel,
+    isTouchDeviceClient,
+  }
+})

app/pages/package/[[org]]/[name].vue

@@ -195,18 +195,9 @@ const { data: skillsData } = useLazyFetch<SkillsListResponse>(
 const { data: packageAnalysis } = usePackageAnalysis(packageName, requestedVersion)
 const { data: moduleReplacement } = useModuleReplacement(packageName)
 
-const {
-  data: resolvedVersion,
-  status: versionStatus,
-  error: versionError,
-} = await useResolvedVersion(packageName, requestedVersion)
-
-if (
-  versionStatus.value === 'error' &&
-  versionError.value?.statusCode &&
-  versionError.value.statusCode >= 400 &&
-  versionError.value.statusCode < 500
-) {
+const { data: resolvedVersion } = await useResolvedVersion(packageName, requestedVersion)
+
+if (resolvedVersion.value === null) {
   throw createError({
     statusCode: 404,
     statusMessage: $t('package.not_found'),
@@ -251,6 +242,13 @@ const { copied: copiedVersion, copy: copyVersion } = useClipboard({
   copiedDuring: 2000,
 })
 
+const { scrollToTop, isTouchDeviceClient } = useScrollToTop()
+
+const { y: scrollY } = useScroll(window)
+const showScrollToTop = computed(
+  () => isTouchDeviceClient.value && scrollY.value > SCROLL_TO_TOP_THRESHOLD,
+)
+
 // Fetch dependency analysis (lazy, client-side)
 // This is the same composable used by PackageVulnerabilityTree and PackageDeprecatedTree
 const { data: vulnTree, status: vulnTreeStatus } = useDependencyAnalysis(
@@ -786,26 +784,37 @@ const showSkeleton = shallowRef(false)
               :to="docsLink"
               aria-keyshortcuts="d"
               classicon="i-lucide:file-text"
+              :title="$t('package.links.docs')"
             >
-              {{ $t('package.links.docs') }}
+              <span class="max-sm:sr-only">{{ $t('package.links.docs') }}</span>
             </LinkBase>
             <LinkBase
               v-if="codeLink"
               variant="button-secondary"
               :to="codeLink"
               aria-keyshortcuts="."
               classicon="i-lucide:code"
+              :title="$t('package.links.code')"
             >
-              {{ $t('package.links.code') }}
+              <span class="max-sm:sr-only">{{ $t('package.links.code') }}</span>
             </LinkBase>
             <LinkBase
               variant="button-secondary"
               :to="{ name: 'compare', query: { packages: pkg.name } }"
               aria-keyshortcuts="c"
               classicon="i-lucide:git-compare"
+              :title="$t('package.links.compare')"
             >
-              {{ $t('package.links.compare') }}
+              <span class="max-sm:sr-only">{{ $t('package.links.compare') }}</span>
             </LinkBase>
+            <ButtonBase
+              v-if="showScrollToTop"
+              variant="secondary"
+              :title="$t('common.scroll_to_top')"
+              :aria-label="$t('common.scroll_to_top')"
+              @click="() => scrollToTop()"
+              classicon="i-lucide:arrow-up"
+            />
           </ButtonGroup>
 
           <!-- Package metrics -->

nuxt.config.ts

@@ -135,13 +135,10 @@ export default defineNuxtConfig({
       },
     },
     // pages
-    '/package/:name': getISRConfig(60, { fallback: 'html' }),
+    '/package/**': getISRConfig(60, { fallback: 'html' }),
     '/package/:name/_payload.json': getISRConfig(60, { fallback: 'json' }),
-    '/package/:name/v/:version': getISRConfig(60, { fallback: 'html' }),
     '/package/:name/v/:version/_payload.json': getISRConfig(60, { fallback: 'json' }),
-    '/package/:org/:name': getISRConfig(60, { fallback: 'html' }),
     '/package/:org/:name/_payload.json': getISRConfig(60, { fallback: 'json' }),
-    '/package/:org/:name/v/:version': getISRConfig(60, { fallback: 'html' }),
     '/package/:org/:name/v/:version/_payload.json': getISRConfig(60, { fallback: 'json' }),
     // infinite cache (versioned - doesn't change)
     '/package-code/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },

package.json

@@ -109,7 +109,7 @@
     "virtua": "0.48.6",
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
-    "vue": "3.5.28",
+    "vue": "3.5.29",
     "vue-data-ui": "3.15.6"
   },
   "devDependencies": {