Merge upstream/main into vt/commands

Resolve conflict in app/pages/[...package].vue by combining:
- Branch features: interactive copy button with group/installcmd hover state
- Upstream improvements: overflow-x-auto, min-w-0, shrink-0 for responsive behavior

Author: vinnymac

app/assets/main.css

@@ -157,6 +157,16 @@ button {
   top: 0;
 }
 
+/* Shiki theme colors */
+html.light .shiki,
+html.light .shiki span {
+  color: var(--shiki-light) !important;
+  background-color: var(--shiki-light-bg) !important;
+  font-style: var(--shiki-light-font-style) !important;
+  font-weight: var(--shiki-light-font-weight) !important;
+  text-decoration: var(--shiki-light-text-decoration) !important;
+}
+
 /* README prose styling */
 .readme-content {
   color: var(--fg-muted);
@@ -238,7 +248,7 @@ button {
 .readme-content pre,
 .readme-content .shiki {
   background: oklch(0.145 0 0) !important;
-  border: 1px solid oklch(0.2686 0 0);
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 1rem;
   overflow-x: auto;

app/components/AccentColorPicker.vue

@@ -5,7 +5,7 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 </script>
 
 <template>
-  <div role="listbox" aria-label="Accent colors" class="flex items-center justify-between">
+  <div role="listbox" aria-label="Accent colors" class="flex items-center gap-4">
     <button
       v-for="color in accentColors"
       :key="color.id"

app/components/AppFooter.vue

@@ -89,6 +89,14 @@ onMounted(() => {
         <!-- On mobile, show disclaimer here instead of tagline -->
         <p class="text-xs text-fg-muted m-0 sm:hidden">{{ $t('non_affiliation_disclaimer') }}</p>
         <div class="flex items-center gap-4 sm:gap-6">
+          <a
+            href="https://docs.npmx.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link-subtle font-mono text-xs min-h-11 min-w- flex items-center"
+          >
+            {{ $t('footer.docs') }}
+          </a>
           <a
             href="https://repo.npmx.dev"
             target="_blank"

app/components/AppHeader.vue

@@ -11,6 +11,18 @@ withDefaults(
 )
 
 const { isConnected, npmUser } = useConnector()
+
+const router = useRouter()
+onKeyStroke(',', e => {
+  // 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()
+  router.push('/settings')
+})
 </script>
 
 <template>
@@ -64,9 +76,19 @@ const { isConnected, npmUser } = useConnector()
 
       <!-- Right: User status + GitHub -->
       <div class="flex-shrink-0 flex items-center gap-6">
-        <ClientOnly>
-          <SettingsMenu />
-        </ClientOnly>
+        <NuxtLink
+          to="/settings"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-2"
+          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"
+            aria-hidden="true"
+          >
+            ,
+          </kbd>
+        </NuxtLink>
 
         <div v-if="showConnector">
           <ConnectorStatus />

app/components/PackageDownloadAnalytics.vue

@@ -191,6 +191,16 @@ function safeMax(a: string, b: string): string {
   return a.localeCompare(b) >= 0 ? a : b
 }
 
+function extractDates(dateLabel: string) {
+  if (typeof dateLabel !== 'string') return []
+
+  const parts = dateLabel.trim().split(/\s+/).filter(Boolean)
+
+  if (parts.length < 2) return []
+
+  return [parts[0], parts[parts.length - 1]]
+}
+
 /**
  * Two-phase state:
  * - selectedGranularity: immediate UI
@@ -448,17 +458,26 @@ const config = computed(() => ({
       },
       callbacks: {
         img: ({ imageUri }: { imageUri: string }) => {
-          loadFile(imageUri, `${packageName}-${selectedGranularity.value}.png`)
+          loadFile(
+            imageUri,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.png`,
+          )
         },
         csv: (csvStr: string) => {
           const blob = new Blob([csvStr.replace('data:text/csv;charset=utf-8,', '')])
           const url = URL.createObjectURL(blob)
-          loadFile(url, `${packageName}-${selectedGranularity.value}.csv`)
+          loadFile(
+            url,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.csv`,
+          )
           URL.revokeObjectURL(url)
         },
         svg: ({ blob }: { blob: Blob }) => {
           const url = URL.createObjectURL(blob)
-          loadFile(url, `${packageName}-${selectedGranularity.value}.svg`)
+          loadFile(
+            url,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.svg`,
+          )
           URL.revokeObjectURL(url)
         },
       },
@@ -512,6 +531,13 @@ const config = computed(() => ({
     },
     zoom: {
       maxWidth: 500,
+      customFormat:
+        displayedGranularity.value !== 'weekly'
+          ? undefined
+          : ({ absoluteIndex, side }: { absoluteIndex: number; side: 'left' | 'right' }) => {
+              const parts = extractDates(chartData.value.dates[absoluteIndex] ?? '')
+              return side === 'left' ? parts[0] : parts.at(-1)
+            },
       highlightColor: isDarkMode.value ? '#2A2A2A' : '#E1E5E8',
       minimap: {
         show: true,