chore(deps): upgrade vite-plus to 1.1.0

.gitignore

@@ -55,3 +55,4 @@ storybook-static
 .agents
 .vscode/mcp.json
 AGENTS.md
+.vitest/

app/components/Chart/SplitSparkline.vue

@@ -59,7 +59,7 @@ const { colors } = useColors(rootEl)
 
 const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
-const selectedIndex = ref<number | undefined | null>(null)
+const selectedIndex = ref<number | undefined>()
 const isInteracting = ref(false)
 
 function isLargeSeries(seriesIndex: number): boolean {
@@ -149,7 +149,7 @@ function startInteraction() {
 
 function resetHover() {
   isInteracting.value = false
-  selectedIndex.value = null
+  selectedIndex.value = undefined
   step.value += 1 // required to reset all chart instances
 }
 
@@ -175,6 +175,7 @@ const configs = computed(() => {
       : (lightenColor(seriesColor, 0.5) ?? seriesColor) // palette uses hex colours
 
     return {
+      useCursorPointer: true,
       a11y: {
         translations: {
           keyboardNavigation: $t(
@@ -230,6 +231,7 @@ const configs = computed(() => {
         },
         line: {
           color: seriesColor,
+          strokeWidth: 1,
           dashIndices,
           dashArray: 3,
           cutNullValues: false,
@@ -252,14 +254,24 @@ const configs = computed(() => {
         },
         padding: {
           left: 0,
-          right: 0,
+          right: 24,
           top: 0,
           bottom: 0,
         },
+        // Drag to zoom
+        zoom: {
+          show: true,
+          resetButton: {
+            title: $t('package.trends.sparkline_zoom_reset.title'),
+            ariaLabel: $t('package.trends.sparkline_zoom_reset.aria_label'),
+          },
+        },
       },
     }
   })
 })
+
+const zoomState = ref<any>(null)
 </script>
 
 <template>
@@ -308,6 +320,7 @@ const configs = computed(() => {
         </div>
         <VueUiSparkline
           v-if="datasets[i]"
+          v-model:zoom-state="zoomState"
           :key="`${i}_${step}`"
           :config
           :dataset="datasets[i]"

app/components/Package/TrendsChart.vue

@@ -26,6 +26,7 @@ import {
   nullifyZeroValues,
   isMissingDownloadValue,
   isLargeDownloadSeries,
+  MULTI_PACKAGE_MODE_TOP_PADDING,
 } from '#shared/utils/trends-chart'
 import { downloadFileLink } from '~/utils/download'
 import { useCopyChartPng } from '~/composables/useCopyChartPng'
@@ -1299,10 +1300,13 @@ const chartHeight = computed(() => {
   if (isMobile.value) {
     return 950
   }
+
+  const additionalHeight = isMultiPackageMode.value ? MULTI_PACKAGE_MODE_TOP_PADDING : 0
+
   if (props.hideControls) {
-    return 460
+    return 460 + additionalHeight
   }
-  return 600
+  return 600 + additionalHeight
 })
 
 const { start } = useTimeoutFn(
@@ -1490,6 +1494,15 @@ const chartConfig = computed<VueUiXyConfig>(() => {
           strokeWidth: 1,
           strokeDasharray: 3,
         },
+        dragToZoom: {
+          show: true,
+          selection: {
+            fill: accent.value,
+            fillOpacity: isDarkMode.value ? 0.05 : 0.08,
+            stroke: accent.value,
+            strokeDasharray: 3,
+          },
+        },
       },
     },
   }

app/components/Package/WeeklyDownloadStats.vue

@@ -325,6 +325,14 @@ const config = computed<VueUiSparklineConfig>(() => {
         top: 0,
         bottom: 0,
       },
+      // Drag to zoom
+      zoom: {
+        show: true,
+        resetButton: {
+          title: $t('package.trends.sparkline_zoom_reset.title'),
+          ariaLabel: $t('package.trends.sparkline_zoom_reset.aria_label'),
+        },
+      },
     },
   }
 })

docs/content/index.md

@@ -30,6 +30,7 @@ links:
 
 ::u-page-section{title="What you can do"}
 #features
+
 :::u-page-feature{icon="i-lucide:search" to="/guide/features" title="Search packages" description="Fast package search with instant results, infinite scroll, and keyboard navigation."}
 :::
 
@@ -59,4 +60,5 @@ links:
 
 :::u-page-feature{icon="i-lucide:accessibility" to="/guide/features" title="Use assistive technology" description="Keyboard-friendly, screen-reader-aware, responsive UI backed by automated accessibility checks."}
 :::
+
 ::

i18n/locales/en.json

@@ -834,6 +834,10 @@
         "copy_url": "Copy this URL to embed the chart into your website",
         "preview": "Preview",
         "tip": "If startDate and endDate are not provided in the URL, the graph will display the last 12 months by default."
+      },
+      "sparkline_zoom_reset": {
+        "title": "Reset zoom · double-click chart or press Esc",
+        "aria_label": "Reset zoom"
       }
     },
     "downloads": {

i18n/locales/fr-FR.json

@@ -98,6 +98,7 @@
     "current": "actuel",
     "here": "vous êtes ici",
     "connected": "connecté",
+    "keyboard_shortcuts": {},
     "state": {
       "on": "activé",
       "off": "désactivé"
@@ -203,6 +204,14 @@
     "links": "Liens",
     "tap_to_search": "Toucher pour rechercher"
   },
+  "tools": {
+    "deps_stats": {}
+  },
+  "deps_stats": {
+    "upload": {},
+    "dependencies": {},
+    "stats": {}
+  },
   "blog": {
     "title": "Blog",
     "heading": "blog",
@@ -229,6 +238,9 @@
       "more_replies": "{count} réponse supplémentaire... | {count} réponses supplémentaires..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "paramètres",
     "tagline": "personnalisez votre expérience npmx",
@@ -284,6 +296,7 @@
       "slate": "Ardoise",
       "black": "Noir"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Activer les raccourcis clavier",
     "keyboard_shortcuts_enabled_description": "Les raccourcis clavier peuvent être désactivés s'ils entrent en conflit avec d'autres raccourcis du navigateur ou du système",
     "enable_code_ligatures": "Activer les ligatures de code",
@@ -485,6 +498,7 @@
       "title": "Exécuter",
       "locally": "Exécuter localement"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "Aucun README disponible.",
@@ -717,6 +731,10 @@
         "copy_url": "Copiez cette URL pour intégrer le graphique à votre site web",
         "preview": "Aperçu",
         "tip": "Par défaut, si startDate et endDate ne sont pas renseignés, la période couvre les 12 derniers mois."
+      },
+      "sparkline_zoom_reset": {
+        "title": "Réinitialiser le zoom · double-cliquez sur le graphique ou appuyez sur Esc",
+        "aria_label": "Réinitialiser le zoom"
       }
     },
     "downloads": {
@@ -1229,6 +1247,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "connexion",
     "account": "Compte",
@@ -1403,6 +1440,7 @@
           "label": "Étoiles GitHub",
           "description": "Nombre d’étoiles du dépôt GitHub"
         },
+        "githubForks": {},
         "githubIssues": {
           "label": "Issues GitHub",
           "description": "Nombre d’issues ouvertes sur GitHub"