Merge branch 'main' into feature/provenance

Author: AscaL

.github/workflows/ci.yml

@@ -11,6 +11,11 @@ on:
     branches:
       - main
 
+# cancel in-progress runs on new commits to same PR (gitub.event.number)
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
 permissions:
   contents: read
 
@@ -134,4 +139,4 @@ jobs:
         run: pnpm install
 
       - name: 🔍 Check for unused code
-        run: pnpm knip:production
+        run: pnpm knip

CONTRIBUTING.md

@@ -105,6 +105,12 @@ The connector will check your npm authentication, generate a connection token, a
 
 ## Code style
 
+When committing changes, try to keep an eye out for unintended formatting updates. These can make a pull request look noisier than it really is and slow down the review process. Sometimes IDEs automatically reformat files on save, which can unintentionally introduce extra changes.
+
+To help with this, the project uses `oxfmt` to handle formatting via a pre-commit hook. The hook will automatically reformat files when needed. If something can’t be fixed automatically, it will let you know what needs to be updated before you can commit.
+
+If you want to get ahead of any formatting issues, you can also run `pnpm lint:fix` before committing to fix formatting across the whole project.
+
 ### Typescript
 
 - We care about good types – never cast things to `any` 💪
@@ -369,13 +375,17 @@ We recommend the [i18n-ally](https://marketplace.visualstudio.com/items?itemName
 
 The extension is included in our workspace recommendations, so VSCode should prompt you to install it.
 
-### Formatting with locale
+### Formatting numbers and dates
 
-When formatting numbers or dates that should respect the user's locale, pass the locale:
+Use vue-i18n's built-in formatters for locale-aware formatting:
 
-```typescript
-const { locale } = useI18n()
-const formatted = formatNumber(12345, locale.value) // "12,345" in en-US
+```vue
+<template>
+  <p>{{ $n(12345) }}</p>
+  <!-- "12,345" in en-US, "12 345" in fr-FR -->
+  <p>{{ $d(new Date()) }}</p>
+  <!-- locale-aware date -->
+</template>
 ```
 
 ## Testing

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Daniel Roe
+Copyright (c) 2026 npmx team and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

app/components/AppFooter.vue

@@ -13,18 +13,16 @@ const isHome = computed(() => route.name === 'index')
           <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
           <BuildEnvironment v-if="!isHome" footer />
         </div>
-        <div class="flex items-center gap-3 sm:gap-6">
-          <NuxtLink
-            to="/about"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
-          >
+        <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
+        <div class="hidden sm:flex items-center gap-6">
+          <NuxtLink to="/about" class="link-subtle font-mono text-xs min-h-11 flex items-center">
             {{ $t('footer.about') }}
           </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.docs') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -33,7 +31,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://repo.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.source') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -42,7 +40,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://social.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.social') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -51,7 +49,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://chat.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.chat') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />

app/components/AppHeader.vue

@@ -11,6 +11,53 @@ withDefaults(
 const { isConnected, npmUser } = useConnector()
 
 const showFullSearch = shallowRef(false)
+const showMobileMenu = shallowRef(false)
+
+// On mobile, clicking logo+search button expands search
+const route = useRoute()
+const isMobile = useIsMobile()
+const isSearchExpandedManually = shallowRef(false)
+const searchBoxRef = shallowRef<{ focus: () => void } | null>(null)
+
+// On search page, always show search expanded on mobile
+const isOnHomePage = computed(() => route.name === 'index')
+const isOnSearchPage = computed(() => route.name === 'search')
+const isSearchExpanded = computed(() => isOnSearchPage.value || isSearchExpandedManually.value)
+
+function expandMobileSearch() {
+  isSearchExpandedManually.value = true
+  nextTick(() => {
+    searchBoxRef.value?.focus()
+  })
+}
+
+watch(
+  isOnSearchPage,
+  visible => {
+    if (!visible) return
+
+    searchBoxRef.value?.focus()
+    nextTick(() => {
+      searchBoxRef.value?.focus()
+    })
+  },
+  { flush: 'sync' },
+)
+
+function handleSearchBlur() {
+  showFullSearch.value = false
+  // Collapse expanded search on mobile after blur (with delay for click handling)
+  // But don't collapse if we're on the search page
+  if (isMobile.value && !isOnSearchPage.value) {
+    setTimeout(() => {
+      isSearchExpandedManually.value = false
+    }, 150)
+  }
+}
+
+function handleSearchFocus() {
+  showFullSearch.value = true
+}
 
 onKeyStroke(
   ',',
@@ -26,49 +73,91 @@ onKeyStroke(
   },
   { dedupe: true },
 )
+
+onKeyStroke(
+  'c',
+  e => {
+    // Allow more specific handlers to take precedence
+    if (e.defaultPrevented) return
+
+    // Don't trigger if user is typing in an input
+    const target = e.target as HTMLElement
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+      return
+    }
+
+    e.preventDefault()
+    navigateTo('/compare')
+  },
+  { dedupe: true },
+)
 </script>
 
 <template>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="container h-14 flex items-center justify-start"
+      class="container min-h-14 flex items-center gap-2"
+      :class="isOnHomePage ? 'justify-end' : 'justify-between'"
     >
-      <!-- Start: Logo -->
-      <div :class="{ 'hidden sm:block': showFullSearch }" class="flex-shrink-0">
-        <div v-if="showLogo">
-          <NuxtLink
-            to="/"
-            :aria-label="$t('header.home')"
-            dir="ltr"
-            class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
-          >
-            <img
-              aria-hidden="true"
-              :alt="$t('alt_logo')"
-              src="/logo.svg"
-              width="96"
-              height="96"
-              class="w-8 h-8 rounded-lg"
-            />
-            <span>npmx</span>
-          </NuxtLink>
-        </div>
-        <!-- Spacer when logo is hidden -->
-        <span v-else class="w-1" />
+      <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
+      <button
+        v-if="!isSearchExpanded && !isOnHomePage"
+        type="button"
+        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+        :aria-label="$t('nav.tap_to_search')"
+        @click="expandMobileSearch"
+      >
+        <img
+          aria-hidden="true"
+          :alt="$t('alt_logo')"
+          src="/logo.svg"
+          width="96"
+          height="96"
+          class="w-8 h-8 rounded-lg"
+        />
+        <span class="i-carbon:search w-4 h-4 text-fg-subtle" aria-hidden="true" />
+      </button>
+
+      <!-- Desktop: Logo (navigates home) -->
+      <div v-if="showLogo" class="hidden sm:flex flex-shrink-0 items-center">
+        <NuxtLink
+          to="/"
+          :aria-label="$t('header.home')"
+          dir="ltr"
+          class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+        >
+          <img
+            aria-hidden="true"
+            :alt="$t('alt_logo')"
+            src="/logo.svg"
+            width="96"
+            height="96"
+            class="w-8 h-8 rounded-lg"
+          />
+          <span>npmx</span>
+        </NuxtLink>
       </div>
+      <!-- Spacer when logo is hidden on desktop -->
+      <span v-else class="hidden sm:block w-1" />
 
       <!-- Center: Search bar + nav items -->
-      <div class="flex-1 flex items-center justify-center md:gap-6 mx-2">
-        <!-- Search bar (shown on all pages except home) -->
+      <div
+        class="flex-1 flex items-center justify-center md:gap-6"
+        :class="{ 'hidden sm:flex': !isSearchExpanded }"
+      >
+        <!-- Search bar (hidden on mobile unless expanded) -->
         <SearchBox
-          :inputClass="showFullSearch ? '' : 'max-w[6rem]'"
-          @focus="showFullSearch = true"
-          @blur="showFullSearch = false"
+          ref="searchBoxRef"
+          :inputClass="isSearchExpanded ? 'w-full' : ''"
+          :class="{ 'max-w-md': !isSearchExpanded }"
+          @focus="handleSearchFocus"
+          @blur="handleSearchBlur"
         />
         <ul
-          :class="{ 'hidden sm:flex': showFullSearch }"
-          class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0"
+          v-if="!isSearchExpanded"
+          :class="{ hidden: showFullSearch }"
+          class="hidden sm:flex items-center gap-4 sm:gap-6 list-none m-0 p-0"
         >
           <!-- Packages dropdown (when connected) -->
           <li v-if="isConnected && npmUser" class="flex items-center">
@@ -82,34 +171,61 @@ onKeyStroke(
         </ul>
       </div>
 
-      <!-- End: User status + GitHub -->
-      <div
-        :class="{ 'hidden sm:flex': showFullSearch }"
-        class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0"
-      >
+      <!-- End: Desktop nav items + Mobile menu button -->
+      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6">
+        <!-- Desktop: Compare link -->
         <NuxtLink
-          to="/about"
-          class="sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          to="/compare"
+          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          aria-keyshortcuts="c"
         >
-          {{ $t('footer.about') }}
+          {{ $t('nav.compare') }}
+          <kbd
+            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+            aria-hidden="true"
+          >
+            c
+          </kbd>
         </NuxtLink>
 
+        <!-- Desktop: Settings link -->
         <NuxtLink
           to="/settings"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           aria-keyshortcuts=","
         >
           {{ $t('nav.settings') }}
           <kbd
-            class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
             aria-hidden="true"
           >
             ,
           </kbd>
         </NuxtLink>
 
-        <HeaderAccountMenu />
+        <!-- Desktop: Account menu -->
+        <div class="hidden sm:block">
+          <HeaderAccountMenu />
+        </div>
+
+        <!-- Mobile: Menu button (always visible, toggles menu) -->
+        <button
+          type="button"
+          class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          :aria-label="showMobileMenu ? $t('common.close') : $t('nav.open_menu')"
+          :aria-expanded="showMobileMenu"
+          @click="showMobileMenu = !showMobileMenu"
+        >
+          <span
+            class="w-6 h-6 inline-block"
+            :class="showMobileMenu ? 'i-carbon:close' : 'i-carbon:menu'"
+            aria-hidden="true"
+          />
+        </button>
       </div>
     </nav>
+
+    <!-- Mobile menu -->
+    <MobileMenu v-model:open="showMobileMenu" />
   </header>
 </template>

app/components/BuildEnvironment.vue

@@ -13,7 +13,7 @@ const buildInfo = useAppConfig().buildInfo
     :class="footer ? 'mt-4 justify-start' : 'mb-8 justify-center'"
     style="animation-delay: 0.05s"
   >
-    <i18n-t keypath="built_at">
+    <i18n-t keypath="built_at" scope="global">
       <NuxtTime :datetime="buildInfo.time" :locale="locale" relative />
     </i18n-t>
     <span>&middot;</span>

app/components/CollapsibleSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { shallowRef, computed } from 'vue'
 
 interface Props {
   title: string
@@ -19,7 +19,7 @@ const buttonId = `${props.id}-collapsible-button`
 const contentId = `${props.id}-collapsible-content`
 const headingId = `${props.id}-heading`
 
-const isOpen = ref(true)
+const isOpen = shallowRef(true)
 
 onPrehydrate(() => {
   const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
@@ -123,7 +123,7 @@ useHead({
       :id="contentId"
       class="grid ms-6 transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
     >
-      <div class="min-h-0">
+      <div class="min-h-0 min-w-0">
         <slot />
       </div>
     </div>