Merge branch 'main' into module-replacements-v3

Author: gameroman

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,5 +1,7 @@
 name: "\U0001F41E Bug report"
 description: Create a report to help us improve npmx
+type: bug
+labels: ['pending triage']
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,5 +1,6 @@
 name: '🚀 Feature request'
 description: Suggest a feature that will improve npmx
+type: feature
 labels: ['pending triage']
 body:
   - type: markdown

.storybook/handlers.ts

@@ -91,3 +91,68 @@ export const pdsUsersHandler = http.get('/api/atproto/pds-users', () => {
     },
   ])
 })
+
+export const i18nStatusHandler = http.get('/lunaria/status.json', () => {
+  return HttpResponse.json({
+    generatedAt: '2026-01-22T10:07:07.000Z',
+    sourceLocale: {
+      lang: 'en',
+      label: 'English',
+      totalKeys: 500,
+    },
+    locales: [
+      {
+        lang: 'en-GB',
+        label: 'English (UK)',
+        dir: 'ltr',
+        totalKeys: 500,
+        completedKeys: 423,
+        percentComplete: 84,
+        missingKeys: [
+          'settings.background_themes.label',
+          'settings.enable_graph_pulse_loop',
+          'settings.enable_graph_pulse_loop_description',
+          'settings.data_source.algolia_description',
+          'settings.data_source.npm_description',
+          'i18n.contribute_hint',
+          'i18n.copy_keys',
+        ],
+        githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/en-GB.json',
+        githubHistoryUrl:
+          'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/en-GB.json',
+      },
+      {
+        lang: 'fr-FR',
+        label: 'Français',
+        dir: 'ltr',
+        totalKeys: 500,
+        completedKeys: 423,
+        percentComplete: 84,
+        missingKeys: [
+          'settings.background_themes.label',
+          'settings.enable_graph_pulse_loop',
+          'settings.enable_graph_pulse_loop_description',
+          'settings.data_source.algolia_description',
+          'settings.data_source.npm_description',
+          'i18n.contribute_hint',
+          'i18n.copy_keys',
+        ],
+        githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/fr-FR.json',
+        githubHistoryUrl:
+          'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/fr-FR.json',
+      },
+      {
+        lang: 'de-DE',
+        label: 'Deutsch',
+        dir: 'ltr',
+        totalKeys: 500,
+        completedKeys: 500,
+        percentComplete: 100,
+        missingKeys: [],
+        githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/de-DE.json',
+        githubHistoryUrl:
+          'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/de-DE.json',
+      },
+    ],
+  })
+})

.storybook/preview-head.html

@@ -61,3 +61,19 @@
     background-color: var(--bg, oklch(0.171 0 0)) !important;
   }
 </style>
+<script>
+  // related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26
+  // Stub Nuxt specific globals
+  // @nuxtjs/color-mode's plugin.client.js reads window[globalName] at module
+  // evaluation time — before any Storybook setup() callback runs — so the
+  // global must exist in the HTML head, not in preview.ts.
+  window.__NUXT_COLOR_MODE__ ??= {
+    preference: 'system',
+    value: 'dark',
+    getColorScheme: function () {
+      return 'dark'
+    },
+    addColorScheme: function () {},
+    removeColorScheme: function () {},
+  }
+</script>

.storybook/preview.ts

@@ -10,16 +10,6 @@ import npmxDark from './theme'
 
 initialize()
 
-// related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26
-// Stub Nuxt specific globals
-// @ts-expect-error - dynamic global name
-globalThis['__NUXT_COLOR_MODE__'] ??= {
-  preference: 'system',
-  value: 'dark',
-  getColorScheme: fn(() => 'dark'),
-  addColorScheme: fn(),
-  removeColorScheme: fn(),
-}
 // @ts-expect-error - dynamic global name
 globalThis.defineOgImageComponent = fn()
 

app/components/AppFooter.vue

@@ -120,6 +120,10 @@ const closeModal = () => modalRef.value?.close?.()
                   <kbd class="kbd">f</kbd>
                   <span>{{ $t('shortcuts.open_diff') }}</span>
                 </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">t</kbd>
+                  <span>{{ $t('shortcuts.open_timeline') }}</span>
+                </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">c</kbd>
                   <span>{{ $t('shortcuts.compare_from_package') }}</span>

app/components/Package/Header.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
   latestVersion?: SlimVersion | null
   provenanceData?: ProvenanceDetails | null
   provenanceStatus?: string | null
-  page: 'main' | 'docs' | 'code' | 'diff'
+  page: 'main' | 'docs' | 'code' | 'diff' | 'timeline'
   versionUrlPattern: string
 }>()
 
@@ -162,12 +162,26 @@ const diffLink = computed((): RouteLocationRaw | null => {
   return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
 })
 
+const timelineLink = computed((): RouteLocationRaw | null => {
+  if (props.pkg == null || props.resolvedVersion == null) return null
+  const split = props.pkg.name.split('/')
+  return {
+    name: 'timeline',
+    params: {
+      org: split.length === 2 ? split[0] : undefined,
+      packageName: split.length === 2 ? split[1]! : split[0]!,
+      version: props.resolvedVersion,
+    },
+  }
+})
+
 useShortcuts({
   '.': () => codeLink.value,
   'm': () => mainLink.value,
   'd': () => docsLink.value,
   'c': () => props.pkg && { name: 'compare' as const, query: { packages: props.pkg.name } },
   'f': () => diffLink.value,
+  't': () => timelineLink.value,
 })
 </script>
 
@@ -330,6 +344,15 @@ useShortcuts({
         >
           {{ $t('compare.compare_versions') }}
         </LinkBase>
+        <LinkBase
+          v-if="timelineLink"
+          :to="timelineLink"
+          aria-keyshortcuts="t"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
+          :class="page === 'timeline' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.timeline') }}
+        </LinkBase>
       </nav>
     </div>
   </div>

app/components/Package/TrendsChart.vue

@@ -1540,7 +1540,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
           const rows = items
             .map((d: Record<string, any>) => {
               const label = String(d?.name ?? '').trim()
-              const raw = Number(d?.value ?? 0)
+              const raw = Math.round(Number(d?.value ?? 0))
               const v = compactNumberFormatter.value.format(Number.isFinite(raw) ? raw : 0)
 
               if (!hasMultipleItems) {

app/composables/npm/usePackage.ts

@@ -86,12 +86,20 @@ export function transformPackument(
       const trustLevel = getTrustLevel(version)
       const hasProvenance = trustLevel !== 'none'
 
+      // Normalize license: some versions use { type: "MIT" } instead of "MIT"
+      let versionLicense = version.license
+      if (versionLicense && typeof versionLicense === 'object' && 'type' in versionLicense) {
+        versionLicense = (versionLicense as { type: string }).type
+      }
+
       filteredVersions[v] = {
         hasProvenance,
         trustLevel,
         version: version.version,
         deprecated: version.deprecated,
         tags: version.tags as string[],
+        license: typeof versionLicense === 'string' ? versionLicense : undefined,
+        type: typeof version.type === 'string' ? version.type : undefined,
       }
     }
   }