From 37b9f6197024db333f263ce931143a6dbb903894 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Mon, 9 Feb 2026 21:48:28 +0100
Subject: [PATCH 1/7] feat: add permalink to downloads modal

---
 app/components/Package/DownloadAnalytics.vue  | 30 +++++++++----------
 .../Package/WeeklyDownloadStats.vue           | 26 ++++++++++++----
 app/composables/useCharts.ts                  | 18 ++++-------
 app/types/chart.ts                            | 24 +++++++++++++++
 4 files changed, 66 insertions(+), 32 deletions(-)
 create mode 100644 app/types/chart.ts

diff --git a/app/components/Package/DownloadAnalytics.vue b/app/components/Package/DownloadAnalytics.vue
index eee26a2b6..a296d3415 100644
--- a/app/components/Package/DownloadAnalytics.vue
+++ b/app/components/Package/DownloadAnalytics.vue
@@ -5,6 +5,15 @@ import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
+import type {
+  ChartTimeGranularity,
+  DailyDownloadPoint,
+  DateRangeFields,
+  EvolutionData,
+  MonthlyDownloadPoint,
+  WeeklyDownloadPoint,
+  YearlyDownloadPoint,
+} from '~/types/chart'
 
 const props = defineProps<{
   // For single package downloads history
@@ -100,18 +109,6 @@ const accent = computed(() => {
 const mobileBreakpointWidth = 640
 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
 
-type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
-type EvolutionData =
-  | DailyDownloadPoint[]
-  | WeeklyDownloadPoint[]
-  | MonthlyDownloadPoint[]
-  | YearlyDownloadPoint[]
-
-type DateRangeFields = {
-  startDate?: string
-  endDate?: string
-}
-
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null
 }
@@ -314,7 +311,10 @@ const effectivePackageNames = computed<string[]>(() => {
   return single ? [single] : []
 })
 
-const selectedGranularity = shallowRef<ChartTimeGranularity>('weekly')
+const selectedGranularity = defineModel<ChartTimeGranularity>('granularity', {
+  default: 'weekly',
+})
+
 const displayedGranularity = shallowRef<ChartTimeGranularity>('weekly')
 
 const isEndDateOnPeriodEnd = computed(() => {
@@ -344,8 +344,8 @@ const shouldRenderEstimationOverlay = computed(
   () => !pending.value && isEstimationGranularity.value,
 )
 
-const startDate = shallowRef<string>('') // YYYY-MM-DD
-const endDate = shallowRef<string>('') // YYYY-MM-DD
+const startDate = defineModel<string>('startDate', { default: '' })
+const endDate = defineModel<string>('endDate', { default: '' })
 const hasUserEditedDates = shallowRef(false)
 
 /**
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index a7627afc2..e7a17ad6e 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
 import { useCssVariables } from '~/composables/useColors'
+import type { ChartTimeGranularity, WeeklyDownloadPoint } from '~/types/chart'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
 
 const props = defineProps<{
@@ -10,10 +11,19 @@ const props = defineProps<{
 
 const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
-const isChartModalOpen = shallowRef(false)
+
+const modal = useRouteQuery<'downloads' | undefined>('modal')
+const granularity = useRouteQuery<ChartTimeGranularity | undefined>('granularity')
+const startDate = useRouteQuery<string | undefined>('start')
+const endDate = useRouteQuery<string | undefined>('end')
+
+const isChartModalOpen = computed<boolean>(() => modal.value === 'downloads')
 
 function handleModalClose() {
-  isChartModalOpen.value = false
+  modal.value = undefined
+  granularity.value = undefined
+  startDate.value = undefined
+  endDate.value = undefined
   hasChartModalTransitioned.value = false
 }
 
@@ -93,7 +103,7 @@ const hasWeeklyDownloads = computed(() => weeklyDownloads.value.length > 0)
 async function openChartModal() {
   if (!hasWeeklyDownloads.value) return
 
-  isChartModalOpen.value = true
+  modal.value = 'downloads'
   hasChartModalTransitioned.value = false
   // ensure the component renders before opening the dialog
   await nextTick()
@@ -119,8 +129,11 @@ async function loadWeeklyDownloads() {
   }
 }
 
-onMounted(() => {
-  loadWeeklyDownloads()
+onMounted(async () => {
+  await loadWeeklyDownloads()
+  if (isChartModalOpen.value && hasWeeklyDownloads.value) {
+    openChartModal()
+  }
 })
 
 watch(
@@ -287,6 +300,9 @@ const config = computed(() => {
         :inModal="true"
         :packageName="props.packageName"
         :createdIso="createdIso"
+        v-model:granularity="granularity"
+        v-model:startDate="startDate"
+        v-model:endDate="endDate"
       />
     </Transition>
 
diff --git a/app/composables/useCharts.ts b/app/composables/useCharts.ts
index 68bfbe857..777822311 100644
--- a/app/composables/useCharts.ts
+++ b/app/composables/useCharts.ts
@@ -1,23 +1,17 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
+import type {
+  DailyDownloadPoint,
+  MonthlyDownloadPoint,
+  WeeklyDownloadPoint,
+  YearlyDownloadPoint,
+} from '~/types/chart'
 import { fetchNpmDownloadsRange } from '~/utils/npm/api'
 
 export type PackumentLikeForTime = {
   time?: Record<string, string>
 }
 
-export type DailyDownloadPoint = { downloads: number; day: string; timestamp: number }
-export type WeeklyDownloadPoint = {
-  downloads: number
-  weekKey: string
-  weekStart: string
-  weekEnd: string
-  timestampStart: number
-  timestampEnd: number
-}
-export type MonthlyDownloadPoint = { downloads: number; month: string; timestamp: number }
-export type YearlyDownloadPoint = { downloads: number; year: string; timestamp: number }
-
 type PackageDownloadEvolutionOptionsBase = {
   startDate?: string
   endDate?: string
diff --git a/app/types/chart.ts b/app/types/chart.ts
new file mode 100644
index 000000000..09614632b
--- /dev/null
+++ b/app/types/chart.ts
@@ -0,0 +1,24 @@
+export type DailyDownloadPoint = { downloads: number; day: string; timestamp: number }
+export type WeeklyDownloadPoint = {
+  downloads: number
+  weekKey: string
+  weekStart: string
+  weekEnd: string
+  timestampStart: number
+  timestampEnd: number
+}
+export type MonthlyDownloadPoint = { downloads: number; month: string; timestamp: number }
+export type YearlyDownloadPoint = { downloads: number; year: string; timestamp: number }
+
+export type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
+
+export type EvolutionData =
+  | DailyDownloadPoint[]
+  | WeeklyDownloadPoint[]
+  | MonthlyDownloadPoint[]
+  | YearlyDownloadPoint[]
+
+export type DateRangeFields = {
+  startDate?: string
+  endDate?: string
+}

From fdf8719c4c43e137c3eebb66a9e5b67dc58afb0b Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Tue, 10 Feb 2026 16:03:33 +0100
Subject: [PATCH 2/7] refactor: add new types

---
 app/types/chart.ts | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/types/chart.ts b/app/types/chart.ts
index 09614632b..e68927837 100644
--- a/app/types/chart.ts
+++ b/app/types/chart.ts
@@ -1,24 +1,24 @@
-export type DailyDownloadPoint = { downloads: number; day: string; timestamp: number }
-export type WeeklyDownloadPoint = {
-  downloads: number
+export type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
+
+export type DateRangeFields = {
+  startDate?: string
+  endDate?: string
+}
+
+export type DailyDataPoint = { value: number; day: string; timestamp: number }
+export type WeeklyDataPoint = {
+  value: number
   weekKey: string
   weekStart: string
   weekEnd: string
   timestampStart: number
   timestampEnd: number
 }
-export type MonthlyDownloadPoint = { downloads: number; month: string; timestamp: number }
-export type YearlyDownloadPoint = { downloads: number; year: string; timestamp: number }
-
-export type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
+export type MonthlyDataPoint = { value: number; month: string; timestamp: number }
+export type YearlyDataPoint = { value: number; year: string; timestamp: number }
 
 export type EvolutionData =
-  | DailyDownloadPoint[]
-  | WeeklyDownloadPoint[]
-  | MonthlyDownloadPoint[]
-  | YearlyDownloadPoint[]
-
-export type DateRangeFields = {
-  startDate?: string
-  endDate?: string
-}
+  | DailyDataPoint[]
+  | WeeklyDataPoint[]
+  | MonthlyDataPoint[]
+  | YearlyDataPoint[]

From e70eaacd49f03434b53380c3fe589ff42fada367 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Tue, 10 Feb 2026 16:06:24 +0100
Subject: [PATCH 3/7] refactor: types

---
 app/composables/useCharts.ts | 6 +-----
 app/types/chart.ts           | 5 +++++
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/composables/useCharts.ts b/app/composables/useCharts.ts
index c75301546..4fa33a7c9 100644
--- a/app/composables/useCharts.ts
+++ b/app/composables/useCharts.ts
@@ -2,6 +2,7 @@ import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
 import type {
   DailyDataPoint,
+  EvolutionOptionsBase,
   MonthlyDataPoint,
   WeeklyDataPoint,
   YearlyDataPoint,
@@ -12,11 +13,6 @@ export type PackumentLikeForTime = {
   time?: Record<string, string>
 }
 
-type EvolutionOptionsBase = {
-  startDate?: string
-  endDate?: string
-}
-
 export type EvolutionOptionsDay = EvolutionOptionsBase & {
   granularity: 'day'
 }
diff --git a/app/types/chart.ts b/app/types/chart.ts
index e68927837..894d97ca6 100644
--- a/app/types/chart.ts
+++ b/app/types/chart.ts
@@ -22,3 +22,8 @@ export type EvolutionData =
   | WeeklyDataPoint[]
   | MonthlyDataPoint[]
   | YearlyDataPoint[]
+
+export type EvolutionOptionsBase = {
+  startDate?: string
+  endDate?: string
+}

From 687b62d9c6a91bc2d6952f6c55b11cb4fc5fc7ea Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Tue, 10 Feb 2026 16:10:06 +0100
Subject: [PATCH 4/7] refactor: move sharable types

---
 app/components/Package/TrendsChart.vue |  1 +
 app/composables/useCharts.ts           | 26 ++------------------------
 app/types/chart.ts                     | 23 +++++++++++++++++++++++
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 75f7ab8c5..b8b9dcbfa 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -10,6 +10,7 @@ import type {
   DailyDataPoint,
   DateRangeFields,
   EvolutionData,
+  EvolutionOptions,
   MonthlyDataPoint,
   WeeklyDataPoint,
   YearlyDataPoint,
diff --git a/app/composables/useCharts.ts b/app/composables/useCharts.ts
index 4fa33a7c9..2fa34eedf 100644
--- a/app/composables/useCharts.ts
+++ b/app/composables/useCharts.ts
@@ -2,7 +2,8 @@ import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
 import type {
   DailyDataPoint,
-  EvolutionOptionsBase,
+  DailyRawPoint,
+  EvolutionOptions,
   MonthlyDataPoint,
   WeeklyDataPoint,
   YearlyDataPoint,
@@ -13,29 +14,6 @@ export type PackumentLikeForTime = {
   time?: Record<string, string>
 }
 
-export type EvolutionOptionsDay = EvolutionOptionsBase & {
-  granularity: 'day'
-}
-export type EvolutionOptionsWeek = EvolutionOptionsBase & {
-  granularity: 'week'
-  weeks?: number
-}
-export type EvolutionOptionsMonth = EvolutionOptionsBase & {
-  granularity: 'month'
-  months?: number
-}
-export type EvolutionOptionsYear = EvolutionOptionsBase & {
-  granularity: 'year'
-}
-
-export type EvolutionOptions =
-  | EvolutionOptionsDay
-  | EvolutionOptionsWeek
-  | EvolutionOptionsMonth
-  | EvolutionOptionsYear
-
-type DailyRawPoint = { day: string; value: number }
-
 function toIsoDateString(date: Date): string {
   return date.toISOString().slice(0, 10)
 }
diff --git a/app/types/chart.ts b/app/types/chart.ts
index 894d97ca6..2cd15b1ee 100644
--- a/app/types/chart.ts
+++ b/app/types/chart.ts
@@ -27,3 +27,26 @@ export type EvolutionOptionsBase = {
   startDate?: string
   endDate?: string
 }
+
+export type EvolutionOptionsDay = EvolutionOptionsBase & {
+  granularity: 'day'
+}
+export type EvolutionOptionsWeek = EvolutionOptionsBase & {
+  granularity: 'week'
+  weeks?: number
+}
+export type EvolutionOptionsMonth = EvolutionOptionsBase & {
+  granularity: 'month'
+  months?: number
+}
+export type EvolutionOptionsYear = EvolutionOptionsBase & {
+  granularity: 'year'
+}
+
+export type EvolutionOptions =
+  | EvolutionOptionsDay
+  | EvolutionOptionsWeek
+  | EvolutionOptionsMonth
+  | EvolutionOptionsYear
+
+export type DailyRawPoint = { day: string; value: number }

From a1ffda0c4a9b63267d01d794a4654a894007b694 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Tue, 10 Feb 2026 17:18:09 +0100
Subject: [PATCH 5/7] feat: use useRouteQuery

---
 app/components/Package/TrendsChart.vue        | 46 +++++++++++++++++--
 .../Package/WeeklyDownloadStats.vue           | 46 +++++++++++++------
 2 files changed, 73 insertions(+), 19 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index b8b9dcbfa..23a4e591a 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -36,7 +36,9 @@ const props = defineProps<{
 
   /** When true, shows facet selector (e.g. Downloads / Likes). */
   showFacetSelector?: boolean
+  permalink?: boolean
 }>()
+const emit = defineEmits(['update:startDate', 'update:endDate'])
 
 const { locale } = useI18n()
 const { accentColors, selectedAccentColor } = useAccentColor()
@@ -318,9 +320,20 @@ const effectivePackageNames = computed<string[]>(() => {
   return single ? [single] : []
 })
 
-const selectedGranularity = defineModel<ChartTimeGranularity>('granularity', {
-  default: DEFAULT_GRANULARITY,
+const granularityLocal = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
+const granularityRoute = useRouteQuery<ChartTimeGranularity>('granularity', DEFAULT_GRANULARITY)
+
+const selectedGranularity = computed({
+  get: () => (props.permalink ? granularityRoute.value : granularityLocal.value),
+  set: (value: ChartTimeGranularity) => {
+    if (props.permalink) {
+      granularityRoute.value = value
+    } else {
+      granularityLocal.value = value
+    }
+  },
 })
+
 const displayedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
 
 const isEndDateOnPeriodEnd = computed(() => {
@@ -350,8 +363,33 @@ const shouldRenderEstimationOverlay = computed(
   () => !pending.value && isEstimationGranularity.value,
 )
 
-const startDate = defineModel<string>('startDate', { default: '' })
-const endDate = defineModel<string>('endDate', { default: '' })
+const startDateLocal = shallowRef<string>('')
+const endDateLocal = shallowRef<string>('')
+const startDateRoute = useRouteQuery<string>('start', '')
+const endDateRoute = useRouteQuery<string>('end', '')
+
+const startDate = computed({
+  get: () => (props.permalink ? startDateRoute.value : startDateLocal.value),
+  set: (value: string) => {
+    if (props.permalink) {
+      startDateRoute.value = value
+    } else {
+      startDateLocal.value = value
+    }
+  },
+})
+
+const endDate = computed({
+  get: () => (props.permalink ? endDateRoute.value : endDateLocal.value),
+  set: (value: string) => {
+    if (props.permalink) {
+      endDateRoute.value = value
+    } else {
+      endDateLocal.value = value
+    }
+  },
+})
+
 const hasUserEditedDates = shallowRef(false)
 
 /**
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 5feedcf9a..23e1ab4b7 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
 import { useCssVariables } from '~/composables/useColors'
-import type { ChartTimeGranularity, WeeklyDataPoint } from '~/types/chart'
+import type { WeeklyDataPoint } from '~/types/chart'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
 
 const props = defineProps<{
@@ -9,22 +9,27 @@ const props = defineProps<{
   createdIso: string | null
 }>()
 
+const router = useRouter()
+const route = useRoute()
+
 const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
 
-const modal = useRouteQuery<'downloads' | undefined>('modal')
-const granularity = useRouteQuery<ChartTimeGranularity | undefined>('granularity')
-const startDate = useRouteQuery<string | undefined>('start')
-const endDate = useRouteQuery<string | undefined>('end')
-
-const isChartModalOpen = computed<boolean>(() => modal.value === 'downloads')
+const isChartModalOpen = shallowRef<boolean>(false)
 
 function handleModalClose() {
-  modal.value = undefined
-  granularity.value = undefined
-  startDate.value = undefined
-  endDate.value = undefined
+  isChartModalOpen.value = false
   hasChartModalTransitioned.value = false
+
+  router.replace({
+    query: {
+      ...route.query,
+      modal: undefined,
+      granularity: undefined,
+      end: undefined,
+      start: undefined,
+    },
+  })
 }
 
 function handleModalTransitioned() {
@@ -103,8 +108,16 @@ const hasWeeklyDownloads = computed(() => weeklyDownloads.value.length > 0)
 async function openChartModal() {
   if (!hasWeeklyDownloads.value) return
 
-  modal.value = 'downloads'
+  isChartModalOpen.value = true
   hasChartModalTransitioned.value = false
+
+  await router.replace({
+    query: {
+      ...route.query,
+      modal: 'chart',
+    },
+  })
+
   // ensure the component renders before opening the dialog
   await nextTick()
   await nextTick()
@@ -131,6 +144,11 @@ async function loadWeeklyDownloads() {
 
 onMounted(async () => {
   await loadWeeklyDownloads()
+
+  if (route.query.modal === 'chart') {
+    isChartModalOpen.value = true
+  }
+
   if (isChartModalOpen.value && hasWeeklyDownloads.value) {
     openChartModal()
   }
@@ -296,9 +314,7 @@ const config = computed(() => {
         :inModal="true"
         :packageName="props.packageName"
         :createdIso="createdIso"
-        v-model:granularity="granularity"
-        v-model:startDate="startDate"
-        v-model:endDate="endDate"
+        permalink
         show-facet-selector
       />
     </Transition>

From 66291d91ebe46e0a2876c275a344328337cd80b3 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Tue, 10 Feb 2026 18:41:35 +0100
Subject: [PATCH 6/7] refactor: create composable for permalinkValue handling

---
 app/components/Package/TrendsChart.vue | 46 ++++++--------------------
 app/composables/usePermalinkValue.ts   | 26 +++++++++++++++
 2 files changed, 36 insertions(+), 36 deletions(-)
 create mode 100644 app/composables/usePermalinkValue.ts

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 23a4e591a..d6ef491b7 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -320,19 +320,13 @@ const effectivePackageNames = computed<string[]>(() => {
   return single ? [single] : []
 })
 
-const granularityLocal = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
-const granularityRoute = useRouteQuery<ChartTimeGranularity>('granularity', DEFAULT_GRANULARITY)
-
-const selectedGranularity = computed({
-  get: () => (props.permalink ? granularityRoute.value : granularityLocal.value),
-  set: (value: ChartTimeGranularity) => {
-    if (props.permalink) {
-      granularityRoute.value = value
-    } else {
-      granularityLocal.value = value
-    }
+const selectedGranularity = usePermalinkValue<ChartTimeGranularity>(
+  'granularity',
+  DEFAULT_GRANULARITY,
+  {
+    permanent: props.permalink,
   },
-})
+)
 
 const displayedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
 
@@ -363,31 +357,11 @@ const shouldRenderEstimationOverlay = computed(
   () => !pending.value && isEstimationGranularity.value,
 )
 
-const startDateLocal = shallowRef<string>('')
-const endDateLocal = shallowRef<string>('')
-const startDateRoute = useRouteQuery<string>('start', '')
-const endDateRoute = useRouteQuery<string>('end', '')
-
-const startDate = computed({
-  get: () => (props.permalink ? startDateRoute.value : startDateLocal.value),
-  set: (value: string) => {
-    if (props.permalink) {
-      startDateRoute.value = value
-    } else {
-      startDateLocal.value = value
-    }
-  },
+const startDate = usePermalinkValue<string>('start', '', {
+  permanent: props.permalink,
 })
-
-const endDate = computed({
-  get: () => (props.permalink ? endDateRoute.value : endDateLocal.value),
-  set: (value: string) => {
-    if (props.permalink) {
-      endDateRoute.value = value
-    } else {
-      endDateLocal.value = value
-    }
-  },
+const endDate = usePermalinkValue<string>('end', '', {
+  permanent: props.permalink,
 })
 
 const hasUserEditedDates = shallowRef(false)
diff --git a/app/composables/usePermalinkValue.ts b/app/composables/usePermalinkValue.ts
new file mode 100644
index 000000000..33927e8f7
--- /dev/null
+++ b/app/composables/usePermalinkValue.ts
@@ -0,0 +1,26 @@
+/**
+ * Creates a computed property that uses route query parameters by default,
+ * with an option to use local state instead.
+ */
+export function usePermalinkValue<T extends string | number = string>(
+  queryKey: string,
+  defaultValue: T = '' as T,
+  options: { permanent?: boolean } = {},
+): WritableComputedRef<T> {
+  const { permanent = true } = options
+  const localValue = shallowRef<T>(defaultValue)
+  const routeValue = useRouteQuery<T>(queryKey, defaultValue)
+
+  const parmalinkValue = computed({
+    get: () => (permanent ? routeValue.value : localValue.value),
+    set: (value: T) => {
+      if (permanent) {
+        routeValue.value = value
+      } else {
+        localValue.value = value
+      }
+    },
+  })
+
+  return parmalinkValue
+}

From f8dca0e8aa3c95f894a23d76afe0d4f5498921ac Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Tue, 10 Feb 2026 19:14:51 +0100
Subject: [PATCH 7/7] feat: add permalink facet

---
 app/components/Package/TrendsChart.vue         | 4 +++-
 app/components/Package/WeeklyDownloadStats.vue | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index d6ef491b7..5d2a941fe 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -588,7 +588,9 @@ const METRICS = computed<MetricDef[]>(() => [
   },
 ])
 
-const selectedMetric = shallowRef<MetricId>(DEFAULT_METRIC_ID)
+const selectedMetric = usePermalinkValue<MetricId>('facet', DEFAULT_METRIC_ID, {
+  permanent: props.permalink,
+})
 
 // Per-metric state keyed by metric id
 const metricStates = reactive<
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 23e1ab4b7..7bf6c2521 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -28,6 +28,7 @@ function handleModalClose() {
       granularity: undefined,
       end: undefined,
       start: undefined,
+      facet: undefined,
     },
   })
 }