npmx-dev · thealxlabs · Mar 22, 2026 · Mar 22, 2026 · Mar 22, 2026 · Mar 22, 2026
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
@@ -20,27 +20,19 @@ const closeModal = () => modalRef.value?.close?.()
           </p>
           <BuildEnvironment v-if="!isHome" footer />
         </div>
-        <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
-        <div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
-          <div class="flex items-center gap-5">
-            <LinkBase :to="{ name: 'about' }">
-              {{ $t('footer.about') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'blog' }">
-              {{ $t('footer.blog') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'privacy' }">
-              {{ $t('privacy_policy.title') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'accessibility' }">
-              {{ $t('a11y.footer_title') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'translation-status' }">
-              {{ $t('translation_status.title') }}
-            </LinkBase>
+        <!-- Desktop: Show all links in columns. Mobile: Links are in MobileMenu -->
+        <div class="hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-1 min-h-11 text-xs">
+          <!-- Column 1: Product -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
+              $t('footer.product')
+            }}</span>
+            <LinkBase :to="{ name: 'about' }">{{ $t('footer.about') }}</LinkBase>
+            <LinkBase :to="{ name: 'blog' }">{{ $t('footer.blog') }}</LinkBase>
+            <LinkBase :to="NPMX_DOCS_SITE">{{ $t('footer.docs') }}</LinkBase>
             <button
               type="button"
-              class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+              class="text-start cursor-pointer inline-flex gap-x-1 items-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
               @click.prevent="showModal"
               aria-haspopup="dialog"
             >
@@ -126,19 +118,27 @@ const closeModal = () => modalRef.value?.close?.()
               </p>
             </Modal>
           </div>
-          <div class="flex items-center gap-5">
-            <LinkBase :to="NPMX_DOCS_SITE">
-              {{ $t('footer.docs') }}
-            </LinkBase>
-            <LinkBase to="https://repo.npmx.dev">
-              {{ $t('footer.source') }}
-            </LinkBase>
-            <LinkBase to="https://social.npmx.dev">
-              {{ $t('footer.social') }}
-            </LinkBase>
-            <LinkBase :to="discord.url">
-              {{ discord.label }}
-            </LinkBase>
+
+          <!-- Column 2: Legal & Info -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
+              $t('footer.legal')
+            }}</span>
+            <LinkBase :to="{ name: 'privacy' }">{{ $t('privacy_policy.title') }}</LinkBase>
+            <LinkBase :to="{ name: 'accessibility' }">{{ $t('a11y.footer_title') }}</LinkBase>
+            <LinkBase :to="{ name: 'translation-status' }">{{
+              $t('translation_status.title')
+            }}</LinkBase>
+          </div>
+
+          <!-- Column 3: Community -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
+              $t('footer.community')
+            }}</span>
+            <LinkBase to="https://repo.npmx.dev">{{ $t('footer.source') }}</LinkBase>
+            <LinkBase to="https://social.npmx.dev">{{ $t('footer.social') }}</LinkBase>
+            <LinkBase :to="discord.url">{{ discord.label }}</LinkBase>
           </div>
         </div>
       </div>

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
@@ -151,6 +151,7 @@ const route = useRoute()
 const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
+const searchContainerRef = useTemplateRef('searchContainerRef')
 
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')
@@ -188,6 +189,12 @@ function handleSearchBlur() {
   }
 }
 
+onClickOutside(searchContainerRef, () => {
+  if (isMobile.value && !isOnSearchPage.value) {
+    isSearchExpandedManually.value = false
+  }
+})
+
 function handleSearchFocus() {
   showFullSearch.value = true
 }
@@ -215,7 +222,7 @@ onKeyStroke(
     <div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="relative container min-h-14 flex items-center gap-2 z-1 justify-end"
+      class="relative container min-h-14 flex items-center gap-2 justify-end"
     >
       <!-- Mobile: Logo (navigates home) -->
       <NuxtLink
@@ -260,6 +267,7 @@ onKeyStroke(
 
       <!-- Center: Search bar + nav items -->
       <div
+        ref="searchContainerRef"
         class="flex-1 flex items-center md:gap-6"
         :class="{
           'hidden sm:flex': !isSearchExpanded,
@@ -277,7 +285,7 @@ onKeyStroke(
         />
         <ul
           v-if="!isSearchExpanded && isConnected && npmUser"
-          :class="{ hidden: showFullSearch }"
+          :class="{ 'invisible pointer-events-none': showFullSearch }"
           class="hidden sm:flex items-center gap-4 sm:gap-6 list-none m-0 p-0"
         >
           <!-- Packages dropdown (when connected) -->

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
@@ -44,7 +44,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 cursor-pointer disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,

diff --git a/app/components/Code/Viewer.vue b/app/components/Code/Viewer.vue
@@ -3,6 +3,7 @@ const props = defineProps<{
   html: string
   lines: number
   selectedLines: { start: number; end: number } | null
+  wordWrap?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -113,9 +114,17 @@ watch(
     </div>
 
     <!-- Code content -->
-    <div class="code-content flex-1 overflow-x-auto min-w-0">
+    <div
+      class="code-content flex-1 min-w-0"
+      :class="wordWrap ? 'overflow-x-hidden' : 'overflow-x-auto'"
+    >
       <!-- eslint-disable vue/no-v-html -- HTML is generated server-side by Shiki -->
-      <div ref="codeRef" class="code-lines min-w-full w-fit" v-html="html" />
+      <div
+        ref="codeRef"
+        class="code-lines min-w-full w-fit"
+        :class="{ 'word-wrap': wordWrap }"
+        v-html="html"
+      />
       <!-- eslint-enable vue/no-v-html -->
     </div>
   </div>
@@ -155,6 +164,21 @@ watch(
   transition: background-color 0.1s;
 }
 
+.code-content.word-wrap-active :deep(.line),
+.code-content:has(.word-wrap) :deep(.line) {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  max-height: none;
+  overflow: visible;
+}
+
+.code-lines.word-wrap :deep(.line) {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  max-height: none;
+  overflow: visible;
+}
+
 /* Highlighted lines in code content - extend full width with negative margin */
 .code-content :deep(.line.highlighted) {
   @apply bg-yellow-500/20;

diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { shallowRef, computed } from 'vue'
-import { LinkBase } from '#components'
 
 interface Props {
   title: string
@@ -104,14 +103,18 @@ useHead({
           />
         </button>
 
-        <span>
-          <LinkBase :to="`#${id}`">
-            {{ title }}
-          </LinkBase>
+        <button
+          type="button"
+          class="text-start focus-visible:outline-accent/70 rounded"
+          :aria-expanded="isOpen"
+          :aria-controls="contentId"
+          @click="toggle"
-        <button
-          type="button"
-          class="text-start focus-visible:outline-accent/70 rounded"
-          :aria-label="`${isOpen ? 'Collapse' : 'Expand'} ${title}`"
-          @click="toggle"
+        <button
+          type="button"
+          class="text-start focus-visible:outline-accent/70 rounded"
+          :aria-expanded="isOpen"
+          :aria-controls="contentId"
+          :aria-label="ariaLabel"
+          `@click`="toggle"
-        <button
-          type="button"
-          class="text-start focus-visible:outline-accent/70 rounded"
-          :aria-label="`${isOpen ? 'Collapse' : 'Expand'} ${title}`"
-          @click="toggle"
+        <button
+          type="button"
+          class="text-start focus-visible:outline-accent/70 rounded"
+          :aria-expanded="isOpen"
+          :aria-controls="contentId"
+          :aria-label="ariaLabel"
+          `@click`="toggle"
+        >
+          {{ title }}
           <span v-if="subtitle" class="block text-2xs normal-case tracking-normal">{{
             subtitle
           }}</span>
-        </span>
+        </button>
       </component>
 
       <!-- Actions slot for buttons or other elements -->

diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
@@ -327,23 +327,31 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
       </VueUiHorizontalBar>
 
       <template #fallback>
-        <div class="flex flex-col gap-2 justify-center items-center mb-2">
-          <SkeletonInline class="h-4 w-16" />
-          <SkeletonInline class="h-4 w-28" />
+        <div class="flex flex-col gap-2 justify-center items-center mb-4" aria-hidden="true">
+          <SkeletonInline class="h-4 w-20 rounded" />
+          <SkeletonInline class="h-3 w-36 rounded" />
         </div>
-        <div class="flex flex-col gap-1">
-          <SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
+        <div class="flex flex-col gap-2 px-2" aria-hidden="true">
+          <div v-for="(pkg, i) in packages" :key="pkg" class="flex items-center gap-3">
+            <SkeletonInline class="h-3 shrink-0" :style="{ width: `${40 + ((i * 17) % 40)}%` }" />
+            <SkeletonInline class="h-7 flex-1 rounded" />
+          </div>
         </div>
       </template>
     </ClientOnly>
 
     <template v-else>
-      <div class="flex flex-col gap-2 justify-center items-center mb-2">
-        <SkeletonInline class="h-4 w-16" />
-        <SkeletonInline class="h-4 w-28" />
+      <!-- Title skeleton -->
+      <div class="flex flex-col gap-2 justify-center items-center mb-4" aria-hidden="true">
+        <SkeletonInline class="h-4 w-20 rounded" />
+        <SkeletonInline class="h-3 w-36 rounded" />
       </div>
-      <div class="flex flex-col gap-1">
-        <SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
+      <!-- Bar skeletons with varying widths for visual realism -->
+      <div class="flex flex-col gap-2 px-2" aria-hidden="true">
+        <div v-for="(pkg, i) in packages" :key="pkg" class="flex items-center gap-3">
+          <SkeletonInline class="h-3 shrink-0" :style="{ width: `${40 + ((i * 17) % 40)}%` }" />
+          <SkeletonInline class="h-7 flex-1 rounded" />
+        </div>
       </div>
     </template>
   </div>

diff --git a/app/components/CopyToClipboardButton.vue b/app/components/CopyToClipboardButton.vue
@@ -16,8 +16,12 @@ const props = defineProps<{
 
 const buttonCopyText = computed(() => props.copyText || $t('common.copy'))
 const buttonCopiedText = computed(() => props.copiedText || $t('common.copied'))
-const buttonAriaLabelCopy = computed(() => props.ariaLabelCopy || $t('common.copy'))
-const buttonAriaLabelCopied = computed(() => props.ariaLabelCopied || $t('common.copied'))
+const buttonAriaLabelCopy = computed(
+  () => props.ariaLabelCopy || props.copyText || $t('common.copy'),
+)
+const buttonAriaLabelCopied = computed(
+  () => props.ariaLabelCopied || props.copiedText || $t('common.copied'),
+)
 
 const emit = defineEmits<{
   click: []
@@ -85,8 +89,17 @@ function handleClick() {
 }
 
 @media (hover: none) {
+  /* On touch devices show the button statically (no hover possible) */
   .copyButton {
-    display: none;
+    clip: auto;
+    clip-path: none;
+    height: auto;
+    overflow: visible;
+    width: auto;
+    opacity: 1;
+    translate: none;
+    pointer-events: auto;
+    transition: none;
   }
 }
 </style>