Merge branch 'main' of https://github.com/npmx-dev/npmx.dev into feat/number-locale-formatting

Author: DDeenis

app/components/Button/Base.vue

@@ -25,6 +25,7 @@ const el = useTemplateRef('el')
 
 defineExpose({
   focus: () => el.value?.focus(),
+  getBoundingClientRect: () => el.value?.getBoundingClientRect(),
 })
 </script>
 

app/components/Code/DirectoryListing.vue

@@ -75,16 +75,15 @@ const bytesFormatter = useBytesFormatter()
           v-if="parentPath !== null"
           class="border-b border-border hover:bg-bg-subtle transition-colors"
         >
-          <td class="py-2 px-4">
+          <td colspan="2">
             <NuxtLink
               :to="getCodeRoute(parentPath || undefined)"
-              class="flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
+              class="flex items-center gap-2 py-2 px-4 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
             >
               <span class="i-carbon:folder w-4 h-4 text-yellow-600" />
               <span>..</span>
             </NuxtLink>
           </td>
-          <td />
         </tr>
 
         <!-- Directory/file rows -->
@@ -93,25 +92,26 @@ const bytesFormatter = useBytesFormatter()
           :key="node.path"
           class="border-b border-border hover:bg-bg-subtle transition-colors"
         >
-          <td class="py-2 px-4">
+          <td colspan="2">
             <NuxtLink
               :to="getCodeRoute(node.path)"
-              class="flex items-center gap-2 font-mono text-sm hover:text-fg transition-colors"
+              class="flex items-center gap-2 py-2 px-4 font-mono text-sm hover:text-fg transition-colors"
               :class="node.type === 'directory' ? 'text-fg' : 'text-fg-muted'"
             >
               <span
                 v-if="node.type === 'directory'"
                 class="i-carbon:folder w-4 h-4 text-yellow-600"
               />
               <span v-else class="w-4 h-4" :class="getFileIcon(node.name)" />
-              <span>{{ node.name }}</span>
+              <span class="flex-1">{{ node.name }}</span>
+              <span
+                v-if="node.type === 'file' && node.size"
+                class="text-end font-mono text-xs text-fg-subtle"
+              >
+                {{ bytesFormatter.format(node.size) }}
+              </span>
             </NuxtLink>
           </td>
-          <td class="py-2 px-4 text-end font-mono text-xs text-fg-subtle">
-            <span v-if="node.type === 'file' && node.size">
-              {{ bytesFormatter.format(node.size) }}
-            </span>
-          </td>
         </tr>
       </tbody>
     </table>

app/components/Code/Viewer.vue

@@ -16,6 +16,11 @@ const lineNumbers = computed(() => {
   return Array.from({ length: props.lines }, (_, i) => i + 1)
 })
 
+// Used for CSS calculation of line number column width
+const lineDigits = computed(() => {
+  return String(props.lines).length
+})
+
 // Check if a line is selected
 function isLineSelected(lineNum: number): boolean {
   if (!props.selectedLines) return false
@@ -55,10 +60,11 @@ watch(
 </script>
 
 <template>
-  <div class="code-viewer flex min-h-full">
+  <div class="code-viewer flex min-h-full max-w-full">
     <!-- Line numbers column -->
     <div
-      class="line-numbers shrink-0 bg-bg-subtle border-ie border-border text-end select-none"
+      class="line-numbers shrink-0 bg-bg-subtle border-ie border-solid border-border text-end select-none relative"
+      :style="{ '--line-digits': lineDigits }"
       aria-hidden="true"
     >
       <a
@@ -94,7 +100,8 @@ watch(
 }
 
 .line-numbers {
-  min-width: 3.5rem;
+  /* 1ch per digit + 1.5rem (px-3 * 2) padding */
+  min-width: calc(var(--line-digits) * 1ch + 1.5rem);
 }
 
 .code-content :deep(pre) {

app/components/ReadmeTocDropdown.vue

@@ -79,8 +79,8 @@ function toggle() {
   if (isOpen.value) {
     close()
   } else {
-    if (triggerRef.value) {
-      const rect = triggerRef.value.getBoundingClientRect()
+    const rect = triggerRef.value?.getBoundingClientRect()
+    if (rect) {
       dropdownPosition.value = {
         top: rect.bottom + 4,
         right: rect.right,
@@ -145,18 +145,18 @@ function handleKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <button
+  <ButtonBase
     ref="triggerRef"
     type="button"
-    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70 hover:text-fg"
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.readme.toc_title')"
     :aria-controls="listboxId"
     @click="toggle"
     @keydown="handleKeydown"
+    classicon="i-carbon:list"
+    class="px-2.5 flex items-center"
   >
-    <span class="i-carbon:list w-3.5 h-3.5" aria-hidden="true" />
     <span
       class="i-carbon:chevron-down w-3 h-3"
       :class="[
@@ -165,7 +165,7 @@ function handleKeydown(event: KeyboardEvent) {
       ]"
       aria-hidden="true"
     />
-  </button>
+  </ButtonBase>
 
   <Teleport to="body">
     <Transition

app/pages/package-code/[...path].vue

@@ -409,7 +409,7 @@ defineOgImageComponent('Default', {
 
       <!-- File content / Directory listing - sticky with internal scroll on desktop -->
       <div
-        class="flex-1 min-w-0 md:sticky md:top-28 md:self-start md:h-[calc(100vh-7rem)] md:overflow-y-auto"
+        class="flex-1 min-w-0 overflow-x-hidden sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
       >
         <!-- File viewer -->
         <template v-if="isViewingFile && fileContent">

modules/lunaria.ts

@@ -1,9 +1,9 @@
-import process from 'node:process'
 import { defineNuxtModule, useNuxt } from 'nuxt/kit'
 import { execSync } from 'node:child_process'
 import { join } from 'node:path'
 import { existsSync, mkdirSync } from 'node:fs'
 import { isCI, isTest } from 'std-env'
+import { getEnv } from '../config/env.ts'
 
 export default defineNuxtModule({
   meta: {
@@ -33,9 +33,10 @@ export default defineNuxtModule({
             cwd: nuxt.options.rootDir,
           })
         } catch (e) {
-          // do not throw when building for staging
-          const env = process.env.VERCEL_ENV
-          if (!isCI || (env && env === 'production')) {
+          // Always throw in local dev.
+          // In CI, only throw if building for production.
+          const { env } = await getEnv(!isCI)
+          if (env === 'dev' || env === 'release') {
             throw e
           }
         }