Merge remote-tracking branch 'origin/main' into fix/trends-date-inputs

# Conflicts:
#	app/components/Package/TrendsChart.vue

Author: danielroe

app/components/AppHeader.vue

@@ -180,7 +180,7 @@ onKeyStroke(
     for (const link of desktopLinks.value) {
       if (link.to && link.keyshortcut && isKeyWithoutModifiers(e, link.keyshortcut)) {
         e.preventDefault()
-        navigateTo(link.to.name)
+        navigateTo(link.to)
         break
       }
     }

app/components/Code/DirectoryListing.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
+import type { RouteNamedMap } from 'vue-router/auto-routes'
 import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'
 
 const props = defineProps<{
   tree: PackageFileTree[]
   currentPath: string
   baseUrl: string
-  /** Base path segments for the code route (e.g., ['nuxt', 'v', '4.2.0']) */
-  basePath: string[]
+  baseRoute: Pick<RouteNamedMap['code'], 'params'>
 }>()
 
 // Get the current directory's contents
@@ -41,13 +41,14 @@ const parentPath = computed(() => {
 
 // Build route object for a path
 function getCodeRoute(nodePath?: string): RouteLocationRaw {
-  if (!nodePath) {
-    return { name: 'code', params: { path: props.basePath as [string, ...string[]] } }
-  }
-  const pathSegments = [...props.basePath, ...nodePath.split('/')]
   return {
     name: 'code',
-    params: { path: pathSegments as [string, ...string[]] },
+    params: {
+      org: props.baseRoute.params.org,
+      packageName: props.baseRoute.params.packageName,
+      version: props.baseRoute.params.version,
+      filePath: nodePath ?? '',
+    },
   }
 }
 

app/components/Code/FileTree.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
+import type { RouteNamedMap } from 'vue-router/auto-routes'
 import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'
 
 const props = defineProps<{
   tree: PackageFileTree[]
   currentPath: string
   baseUrl: string
-  /** Base path segments for the code route (e.g., ['nuxt', 'v', '4.2.0']) */
-  basePath: string[]
+  baseRoute: Pick<RouteNamedMap['code'], 'params'>
   depth?: number
 }>()
 
@@ -23,10 +23,14 @@ function isNodeActive(node: PackageFileTree): boolean {
 
 // Build route object for a file path
 function getFileRoute(nodePath: string): RouteLocationRaw {
-  const pathSegments = [...props.basePath, ...nodePath.split('/')]
   return {
     name: 'code',
-    params: { path: pathSegments as [string, ...string[]] },
+    params: {
+      org: props.baseRoute.params.org,
+      packageName: props.baseRoute.params.packageName,
+      version: props.baseRoute.params.version,
+      filePath: nodePath ?? '',
+    },
   }
 }
 
@@ -75,7 +79,7 @@ watch(
           :tree="node.children"
           :current-path="currentPath"
           :base-url="baseUrl"
-          :base-path="basePath"
+          :base-route="baseRoute"
           :depth="depth + 1"
         />
       </template>

app/components/Code/MobileTreeDrawer.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { PackageFileTree } from '#shared/types'
+import type { RouteNamedMap } from 'vue-router/auto-routes'
 
 defineProps<{
   tree: PackageFileTree[]
   currentPath: string
   baseUrl: string
-  /** Base path segments for the code route (e.g., ['nuxt', 'v', '4.2.0']) */
-  basePath: string[]
+  baseRoute: Pick<RouteNamedMap['code'], 'params'>
 }>()
 
 const isOpen = shallowRef(false)
@@ -75,7 +75,7 @@ watch(isOpen, open => (isLocked.value = open))
         :tree="tree"
         :current-path="currentPath"
         :base-url="baseUrl"
-        :base-path="basePath"
+        :base-route="baseRoute"
       />
     </aside>
   </Transition>

app/components/Filter/Panel.vue

@@ -32,6 +32,11 @@ const { t } = useI18n()
 const isExpanded = shallowRef(false)
 const showAllKeywords = shallowRef(false)
 
+const filterText = computed({
+  get: () => props.filters.text,
+  set: value => emit('update:text', value),
+})
+
 const displayedKeywords = computed(() => {
   const keywords = props.availableKeywords ?? []
   return showAllKeywords.value ? keywords : keywords.slice(0, 20)
@@ -130,11 +135,6 @@ function getSecurityLabelKey(value: SecurityFilter): string {
   return securityLabelKeys.value[value]
 }
 
-function handleTextInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  emit('update:text', target.value)
-}
-
 // Compact summary of active filters for collapsed header using operator syntax
 const filterSummary = computed(() => {
   const parts: string[] = []
@@ -242,13 +242,12 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
           <InputBase
             id="filter-search"
             type="text"
-            :value="filters.text"
+            v-model="filterText"
             :placeholder="searchPlaceholder"
             autocomplete="off"
             class="w-full min-w-25"
             size="medium"
             no-correct
-            @input="handleTextInput"
           />
         </div>
 

app/components/Package/InstallScripts.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
+import type { RouteLocationRaw } from 'vue-router'
 
 const props = defineProps<{
   packageName: string
@@ -11,12 +12,25 @@ const props = defineProps<{
   }
 }>()
 
-function getCodeLink(filePath: string): string {
-  return `/code/${props.packageName}/v/${props.version}/${filePath}`
+function getCodeLink(filePath: string): RouteLocationRaw {
+  const split = props.packageName.split('/')
+
+  return {
+    name: 'code',
+    params: {
+      org: split.length === 2 ? split[0] : null,
+      packageName: split.length === 2 ? split[1]! : split[0]!,
+      version: props.version,
+      filePath: filePath,
+    },
+  }
 }
 
 const scriptParts = computed(() => {
-  const parts: Record<string, { prefix: string | null; filePath: string | null; link: string }> = {}
+  const parts: Record<
+    string,
+    { prefix: string | null; filePath: string | null; link: RouteLocationRaw }
+  > = {}
   for (const scriptName of props.installScripts.scripts) {
     const content = props.installScripts.content?.[scriptName]
     if (!content) continue

app/components/Package/TrendsChart.vue

@@ -6,29 +6,45 @@ import { useCssVariables } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { drawNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
+import type {
+  ChartTimeGranularity,
+  DailyDataPoint,
+  DateRangeFields,
+  EvolutionData,
+  EvolutionOptions,
+  MonthlyDataPoint,
+  WeeklyDataPoint,
+  YearlyDataPoint,
+} from '~/types/chart'
 import { DATE_INPUT_MAX } from '~/utils/input'
 
-const props = defineProps<{
-  // For single package downloads history
-  weeklyDownloads?: WeeklyDataPoint[]
-  inModal?: boolean
+const props = withDefaults(
+  defineProps<{
+    // For single package downloads history
+    weeklyDownloads?: WeeklyDataPoint[]
+    inModal?: boolean
 
-  /**
-   * Backward compatible single package mode.
-   * Used when `weeklyDownloads` is provided.
-   */
-  packageName?: string
+    /**
+     * Backward compatible single package mode.
+     * Used when `weeklyDownloads` is provided.
+     */
+    packageName?: string
 
-  /**
-   * Multi-package mode.
-   * Used when `weeklyDownloads` is not provided.
-   */
-  packageNames?: string[]
-  createdIso?: string | null
+    /**
+     * Multi-package mode.
+     * Used when `weeklyDownloads` is not provided.
+     */
+    packageNames?: string[]
+    createdIso?: string | null
 
-  /** When true, shows facet selector (e.g. Downloads / Likes). */
-  showFacetSelector?: boolean
-}>()
+    /** When true, shows facet selector (e.g. Downloads / Likes). */
+    showFacetSelector?: boolean
+    permalink?: boolean
+  }>(),
+  {
+    permalink: false,
+  },
+)
 
 const { locale } = useI18n()
 const { accentColors, selectedAccentColor } = useAccentColor()
@@ -111,14 +127,7 @@ const watermarkColors = computed(() => ({
 const mobileBreakpointWidth = 640
 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
 
-type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
 const DEFAULT_GRANULARITY: ChartTimeGranularity = 'weekly'
-type EvolutionData = DailyDataPoint[] | WeeklyDataPoint[] | MonthlyDataPoint[] | YearlyDataPoint[]
-
-type DateRangeFields = {
-  startDate?: string
-  endDate?: string
-}
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null
@@ -323,7 +332,10 @@ const effectivePackageNames = computed<string[]>(() => {
   return single ? [single] : []
 })
 
-const selectedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
+const selectedGranularity = usePermalink<ChartTimeGranularity>('granularity', DEFAULT_GRANULARITY, {
+  permanent: props.permalink,
+})
+
 const displayedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
 
 const isEndDateOnPeriodEnd = computed(() => {
@@ -353,8 +365,13 @@ const shouldRenderEstimationOverlay = computed(
   () => !pending.value && isEstimationGranularity.value,
 )
 
-const startDate = shallowRef<string>('') // YYYY-MM-DD
-const endDate = shallowRef<string>('') // YYYY-MM-DD
+const startDate = usePermalink<string>('start', '', {
+  permanent: props.permalink,
+})
+const endDate = usePermalink<string>('end', '', {
+  permanent: props.permalink,
+})
+
 const hasUserEditedDates = shallowRef(false)
 
 /**
@@ -579,7 +596,9 @@ const METRICS = computed<MetricDef[]>(() => [
   },
 ])
 
-const selectedMetric = shallowRef<MetricId>(DEFAULT_METRIC_ID)
+const selectedMetric = usePermalink<MetricId>('facet', DEFAULT_METRIC_ID, {
+  permanent: props.permalink,
+})
 
 // Per-metric state keyed by metric id
 const metricStates = reactive<