From 9f63facda1eabe668a9e2e0b1c059fa7935852be Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Tue, 27 Jan 2026 10:35:50 +0100
Subject: [PATCH 01/13] feat: add i18n for the index page

---
 app/components/AppFooter.vue    |  12 +-
 app/components/AppHeader.vue    |   2 +-
 app/components/SettingsMenu.vue |  10 +-
 app/pages/index.vue             |  18 +-
 i18n/locales/en.json            |  30 ++
 nuxt.config.ts                  |   7 +
 package.json                    |   1 +
 pnpm-lock.yaml                  | 913 ++++++++++++++++++++++++++++----
 8 files changed, 863 insertions(+), 130 deletions(-)
 create mode 100644 i18n/locales/en.json

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index cba4d974d1..04a604d3b2 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -85,35 +85,35 @@ onMounted(() => {
   >
     <div class="container py-2 sm:py-6 flex flex-col gap-1 sm:gap-3 text-fg-subtle text-sm">
       <div class="flex flex-row items-center justify-between gap-2 sm:gap-4">
-        <p class="font-mono m-0 hidden sm:block">a better browser for the npm registry</p>
+        <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>
         <!-- On mobile, show disclaimer here instead of tagline -->
-        <p class="text-xs text-fg-muted m-0 sm:hidden">not affiliated with npm, Inc.</p>
+        <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://repo.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w- flex items-center"
           >
-            source
+            {{ $t('footer.source') }}
           </a>
           <a
             href="https://social.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
           >
-            social
+            {{ $t('footer.social') }}
           </a>
           <a
             href="https://chat.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
           >
-            chat
+            {{ $t('footer.chat') }}
           </a>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-left m-0 hidden sm:block">
-        npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.
+        {{ $t('trademark_disclaimer') }}
       </p>
     </div>
   </footer>
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 869b2d7cbb..6731c8443b 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -32,7 +32,7 @@ withDefaults(
             class="link-subtle font-mono text-sm inline-flex items-center gap-2"
             aria-keyshortcuts="/"
           >
-            search
+            {{ $t('nav.search') }}
             <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"
diff --git a/app/components/SettingsMenu.vue b/app/components/SettingsMenu.vue
index 3643bffd5c..3caead6c44 100644
--- a/app/components/SettingsMenu.vue
+++ b/app/components/SettingsMenu.vue
@@ -46,12 +46,12 @@ onKeyStroke(',', e => {
       class="link-subtle font-mono text-sm inline-flex items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
       :aria-expanded="isOpen"
       aria-haspopup="menu"
-      aria-label="Settings"
+      :aria-label="$t('nav.settings')"
       aria-keyshortcuts=","
       @click="toggle"
     >
       <span class="i-carbon-settings w-4 h-4 sm:hidden" aria-hidden="true" />
-      <span class="hidden sm:inline">settings</span>
+      <span class="hidden sm:inline">{{ $t('nav.settings') }}</span>
       <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"
@@ -76,7 +76,7 @@ onKeyStroke(',', e => {
         class="absolute right-0 top-full mt-2 w-64 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden"
       >
         <div class="px-3 py-2 border-b border-border">
-          <h2 class="text-xs text-fg-subtle uppercase tracking-wider">Settings</h2>
+          <h2 class="text-xs text-fg-subtle uppercase tracking-wider">{{ $t('nav.settings') }}</h2>
         </div>
 
         <div class="p-2 space-y-1">
@@ -88,7 +88,7 @@ onKeyStroke(',', e => {
             :aria-checked="settings.relativeDates"
             @click="settings.relativeDates = !settings.relativeDates"
           >
-            <span class="text-sm text-fg select-none">Relative dates</span>
+            <span class="text-sm text-fg select-none">{{ $t('settings.relative_dates') }}</span>
             <span
               class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none"
               :class="settings.relativeDates ? 'bg-fg' : 'bg-bg-subtle'"
@@ -111,7 +111,7 @@ onKeyStroke(',', e => {
             :aria-checked="settings.includeTypesInInstall"
             @click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
           >
-            <span class="text-sm text-fg select-none">Include @types in install</span>
+            <span class="text-sm text-fg select-none">{{ $t('settings.include_types') }}</span>
             <span
               class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none"
               :class="settings.includeTypesInInstall ? 'bg-fg' : 'bg-bg-subtle'"
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 2c25c1931d..f449eacb50 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -10,10 +10,10 @@ function handleSearch() {
   })
 }
 
+const { t } = useI18n()
 useSeoMeta({
-  title: 'npmx - Package Browser for the npm Registry',
-  description:
-    'A better browser for the npm registry. Search, browse, and explore packages with a modern interface.',
+  title: t('seo.home.title'),
+  description: t('seo.home.description'),
 })
 
 defineOgImageComponent('Default')
@@ -34,7 +34,7 @@ defineOgImageComponent('Default')
         class="text-fg-muted text-lg sm:text-xl max-w-md mb-12 animate-slide-up animate-fill-both"
         style="animation-delay: 0.1s"
       >
-        a better browser for the npm registry
+        {{ $t('tagline') }}
       </p>
 
       <!-- Search form with micro-interactions -->
@@ -43,7 +43,9 @@ defineOgImageComponent('Default')
         style="animation-delay: 0.2s"
       >
         <form role="search" class="relative" @submit.prevent="handleSearch">
-          <label for="home-search" class="sr-only">Search npm packages</label>
+          <label for="home-search" class="sr-only">
+            {{ $t('search.label') }}
+          </label>
 
           <!-- Search input with glow effect on focus -->
           <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
@@ -64,7 +66,7 @@ defineOgImageComponent('Default')
                 v-model="searchQuery"
                 type="search"
                 name="q"
-                placeholder="search packages..."
+                :placeholder="$t('search.placeholder')"
                 autocomplete="off"
                 class="w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-all duration-300 focus:(border-border-hover outline-none)"
                 @input="handleSearch"
@@ -76,7 +78,7 @@ defineOgImageComponent('Default')
                 type="submit"
                 class="absolute right-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 active:scale-95"
               >
-                search
+                {{ $t('search.button') }}
               </button>
             </div>
           </div>
@@ -86,7 +88,7 @@ defineOgImageComponent('Default')
 
     <!-- Popular packages -->
     <nav
-      aria-label="Popular packages"
+      :aria-label="$t('nav.popular_packages')"
       class="pb-20 text-center animate-fade-in animate-fill-both"
       style="animation-delay: 0.3s"
     >
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
new file mode 100644
index 0000000000..9ae94fde7e
--- /dev/null
+++ b/i18n/locales/en.json
@@ -0,0 +1,30 @@
+{
+  "seo": {
+    "home": {
+      "title": "npmx - Package Browser for the npm Registry",
+      "description": "A better browser for the npm registry. Search, browse, and explore packages with a modern interface."
+    }
+  },
+  "tagline": "a better browser for the npm registry",
+  "non_affiliation_disclaimer": "not affiliated with npm, Inc.",
+  "trademark_disclaimer": "npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.",
+  "footer": {
+    "source": "source",
+    "social": "social",
+    "chat": "chat"
+  },
+  "search": {
+    "label": "Search npm packages",
+    "placeholder": "search packages...",
+    "button": "search"
+  },
+  "nav": {
+    "popular_packages": "Popular packages",
+    "search": "search",
+    "settings": "settings"
+  },
+  "settings": {
+    "relative_dates": "Relative dates",
+    "include_types": "Include {'@'}types in install"
+  }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1a3b48b316..93eb3bca40 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,6 +16,7 @@ export default defineNuxtConfig({
     '@nuxt/test-utils',
     '@vite-pwa/nuxt',
     '@vueuse/nuxt',
+    '@nuxtjs/i18n',
   ],
 
   devtools: { enabled: true },
@@ -131,4 +132,10 @@ export default defineNuxtConfig({
       ],
     },
   },
+
+  i18n: {
+    defaultLocale: 'en',
+    strategy: 'no_prefix',
+    locales: [{ code: 'en', name: 'English', file: 'en.json' }],
+  },
 })
diff --git a/package.json b/package.json
index 84cffd3407..a3a4f5db05 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@nuxt/fonts": "^0.13.0",
     "@nuxt/scripts": "^0.13.2",
     "@nuxtjs/html-validator": "^2.1.0",
+    "@nuxtjs/i18n": "10.2.1",
     "@shikijs/langs": "^3.21.0",
     "@shikijs/themes": "^3.21.0",
     "@vueuse/core": "^14.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e969de7362..bd1ea698b9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,6 +33,9 @@ importers:
       '@nuxtjs/html-validator':
         specifier: ^2.1.0
         version: 2.1.0(@voidzero-dev/vite-plus-test@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@25.0.10)(esbuild@0.27.2)(happy-dom@20.3.5)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.46.0)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2))(magicast@0.5.1)
+      '@nuxtjs/i18n':
+        specifier: 10.2.1
+        version: 10.2.1(@vue/compiler-dom@3.5.27)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(magicast@0.5.1)(rollup@4.56.0)(vue@3.5.27(typescript@5.9.3))
       '@shikijs/langs':
         specifier: ^3.21.0
         version: 3.21.0
@@ -1400,6 +1403,73 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@intlify/bundle-utils@11.0.3':
+    resolution: {integrity: sha512-dURCDz1rQXwAb1+Hv4NDit6aZSRaAt4zUYBPEeaDCe3FSs8dMtdF6kEvgd9JwsYFSTAHcvbTs2CqwBjjt9Ltsw==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@intlify/core-base@11.2.8':
+    resolution: {integrity: sha512-nBq6Y1tVkjIUsLsdOjDSJj4AsjvD0UG3zsg9Fyc+OivwlA/oMHSKooUy9tpKj0HqZ+NWFifweHavdljlBLTwdA==}
+    engines: {node: '>= 16'}
+
+  '@intlify/core@11.2.8':
+    resolution: {integrity: sha512-su9kRlQAkG+SBP5cufTYmwPnqjur8etZVa2lnR80CgE5JqA0pXwGUF7W08dR/a6T2oDoYPh53/S8O0CGbfx1qg==}
+    engines: {node: '>= 16'}
+
+  '@intlify/h3@0.7.4':
+    resolution: {integrity: sha512-BtL5+U3Dd9Qz6so+ArOMQWZ+nV21rOqqYUXnqwvW6J3VUXr66A9+9+vUFb/NAQvOU4kdfkO3c/9LMRGU9WZ8vw==}
+    engines: {node: '>= 20'}
+
+  '@intlify/message-compiler@11.2.8':
+    resolution: {integrity: sha512-A5n33doOjmHsBtCN421386cG1tWp5rpOjOYPNsnpjIJbQ4POF0QY2ezhZR9kr0boKwaHjbOifvyQvHj2UTrDFQ==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@11.2.8':
+    resolution: {integrity: sha512-l6e4NZyUgv8VyXXH4DbuucFOBmxLF56C/mqh2tvApbzl2Hrhi1aTDcuv5TKdxzfHYmpO3UB0Cz04fgDT9vszfw==}
+    engines: {node: '>= 16'}
+
+  '@intlify/unplugin-vue-i18n@11.0.3':
+    resolution: {integrity: sha512-iQuik0nXfdVZ5ab+IEyBFEuvMQ213zfbUpBXaEdHPk8DV+qB2CT/SdFuDhfUDRRBZc/e0qoLlfmc9urhnRYVWw==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue: ^3.2.25
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@intlify/utils@0.13.0':
+    resolution: {integrity: sha512-8i3uRdAxCGzuHwfmHcVjeLQBtysQB2aXl/ojoagDut5/gY5lvWCQ2+cnl2TiqE/fXj/D8EhWG/SLKA7qz4a3QA==}
+    engines: {node: '>= 18'}
+
+  '@intlify/vue-i18n-extensions@8.0.0':
+    resolution: {integrity: sha512-w0+70CvTmuqbskWfzeYhn0IXxllr6mU+IeM2MU0M+j9OW64jkrvqY+pYFWrUnIIC9bEdij3NICruicwd5EgUuQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      '@intlify/shared': ^9.0.0 || ^10.0.0 || ^11.0.0
+      '@vue/compiler-dom': ^3.0.0
+      vue: ^3.0.0
+      vue-i18n: ^9.0.0 || ^10.0.0 || ^11.0.0
+    peerDependenciesMeta:
+      '@intlify/shared':
+        optional: true
+      '@vue/compiler-dom':
+        optional: true
+      vue:
+        optional: true
+      vue-i18n:
+        optional: true
+
   '@ioredis/commands@1.5.0':
     resolution: {integrity: sha512-eUgLqrMf8nJkZxT24JvVRrQya1vZkQh8BBeYNwGDqa5I0VUi8ACx7uFvAaLxintokpTenkK6DASvo/bvNbBGow==}
 
@@ -1449,6 +1519,11 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@miyaneee/rollup-plugin-json5@1.2.0':
+    resolution: {integrity: sha512-JjTIaXZp9WzhUHpElrqPnl1AzBi/rvRs065F71+aTmlqvTMVkdbjZ8vfFl4nRlgJy+TPBw69ZK4pwFdmOAt4aA==}
+    peerDependencies:
+      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
+
   '@napi-rs/wasm-runtime@1.1.1':
     resolution: {integrity: sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==}
 
@@ -1635,6 +1710,10 @@ packages:
   '@nuxtjs/html-validator@2.1.0':
     resolution: {integrity: sha512-ldo8ioSsH3OEumtgwDMokTxlhjgO9FxjJWViAxisq5l/wjvaVX8SYTQ02wjtQcQQPSvS6BwgypAp400RlyFHng==}
 
+  '@nuxtjs/i18n@10.2.1':
+    resolution: {integrity: sha512-/CHAIpYbFgobxeMsnKcD8xBUHxBpqipRMjaI3ol9MVZKscJM+IetYdNL9lGNFdEtlxzkV8COxnoa60rE4sPjuQ==}
+    engines: {node: '>=20.11.1'}
+
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
@@ -1769,48 +1848,96 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@oxc-parser/binding-android-arm64@0.95.0':
+    resolution: {integrity: sha512-dZyxhhvJigwWL1wgnLlqyEiSeuqO0WdDH9H+if0dPcBM4fKa5fjVkaUcJT1jBMcBTnkjxMwTXYZy5TK60N0fjg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
   '@oxc-parser/binding-darwin-arm64@0.110.0':
     resolution: {integrity: sha512-jPBsXPc8hwmsUQyLMg7a5Ll/j/8rWCDFoB8WzLP6C0qQKX0zWQxbfSdLFg9GGNPuRo8J8ma9WfBQN5RmbFxNJA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
+  '@oxc-parser/binding-darwin-arm64@0.95.0':
+    resolution: {integrity: sha512-zun9+V33kyCtNec9oUSWwb0qi3fB8pXwum1yGFECPEr55g/CrWju6/Jv4hwwNBeW2tK9Ch/PRstEtYmOLMhHpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@oxc-parser/binding-darwin-x64@0.110.0':
     resolution: {integrity: sha512-jt5G1eZj4sdMGc7Q0c6kfPRmqY1Mn3yzo6xuRr8EXozkh93O8KGFflABY7t56WIrmP+cloaCQkLcjlm6vdhzcQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
+  '@oxc-parser/binding-darwin-x64@0.95.0':
+    resolution: {integrity: sha512-9djMQ/t6Ns/UXtziwUe562uVJMbhtuLtCj+Xav+HMVT/rhV9gWO8PQOG7AwDLUBjJanItsrfqrGtqhNxtZ701w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@oxc-parser/binding-freebsd-x64@0.110.0':
     resolution: {integrity: sha512-VJ7Hwf4dg7uf8b/DrLEhE6lgnNTfBZbTqXQBG3n0oCBoreE1c5aWf1la+o7fJjjTpACRts/vAZ2ngFNNqEFpJw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
+  '@oxc-parser/binding-freebsd-x64@0.95.0':
+    resolution: {integrity: sha512-GK6k0PgCVkkeRZtHgcosCYbXIRySpJpuPw/OInfLGFh8f3x9gp2l8Fbcfx+YO+ZOHFBCd2NNedGqw8wMgouxfA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.110.0':
     resolution: {integrity: sha512-w3OZ0pLKktM7k4qEbVj3dHnCvSMFnWugYxHfhpwncYUOxwDNL3mw++EOIrw997QYiEuJ+H6Od8K6mbj1p6Ae8w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.95.0':
+    resolution: {integrity: sha512-+g/lFITtyHHEk69cunOHuiT5cX+mpUTcbGYNe8suguZ7FqgNwai+PnGv0ctCvtgxBPVfckfUK8c3RvFKo+vi/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm-musleabihf@0.110.0':
     resolution: {integrity: sha512-BIaoW4W6QKb8Q6p3DErDtsAuDRAnr0W+gtwo7fQQkbAJpoPII0ZJXZn+tcQGCyNGKWSsilRNWHyd/XZfXXXpzw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm-musleabihf@0.95.0':
+    resolution: {integrity: sha512-SXNasDtPw8ycNV7VEvFxb4LETmykvWKUhHR7K3us818coXYpDj54P8WEx8hJobP/9skuuiFuKHmtYLdjX8wntA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm64-gnu@0.110.0':
     resolution: {integrity: sha512-3EQDJze28t0HdxXjMKBU6utNscXJePg2YV0Kd/ZnHx24VcIyfkNH6NKzBh0NeaWHovDTkpzYHPtF2tOevtbbfw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.95.0':
+    resolution: {integrity: sha512-0LzebARTU0ROfD6pDK4h1pFn+09meErCZ0MA2TaW08G72+GNneEsksPufOuI+9AxVSRa+jKE3fu0wavvhZgSkg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm64-musl@0.110.0':
     resolution: {integrity: sha512-5xwm1hPrGGvjCVtTWNGJ39MmQGnyipoIDShneGBgSrnDh0XX+COAO7AZKajgNipqgNq5rGEItpzFkMtSDyx0bQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm64-musl@0.95.0':
+    resolution: {integrity: sha512-Pvi1lGe/G+mJZ3hUojMP/aAHAzHA25AEtVr8/iuz7UV72t/15NOgJYr9kELMUMNjPqpr3vKUgXTFmTtAxp11Qw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-ppc64-gnu@0.110.0':
     resolution: {integrity: sha512-I8Xop7z+enuvW1xe0AcRQ9XqFNkUYgeXusyGjCyW6TstRb62P90h+nL1AoGaUMy0E0518DJam5vRYVRgXaAzYg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1823,6 +1950,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-riscv64-gnu@0.95.0':
+    resolution: {integrity: sha512-pUEVHIOVNDfhk4sTlLhn6mrNENhE4/dAwemxIfqpcSyBlYG0xYZND1F3jjR2yWY6DakXZ6VSuDbtiv1LPNlOLw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-riscv64-musl@0.110.0':
     resolution: {integrity: sha512-ylJIuJyMzAqR191QeCwZLEkyo4Sx817TNILjNhT0W1EDQusGicOYKSsGXM/2DHCNYGcidV+MQ8pUVzNeVmuM6g==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1835,18 +1968,36 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@oxc-parser/binding-linux-s390x-gnu@0.95.0':
+    resolution: {integrity: sha512-5+olaepHTE3J/+w7g0tr3nocvv5BKilAJnzj4L8tWBCLEZbL6olJcGVoldUO+3cgg1SO1xJywP5BuLhT0mDUDw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
   '@oxc-parser/binding-linux-x64-gnu@0.110.0':
     resolution: {integrity: sha512-+e6ws5JLpFehdK+wh6q8icx1iM3Ao+9dtItVWFcRiXxSvGcIlS9viWcMvXKrmcsyVDUf81dnvuMSBigNslxhIQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-x64-gnu@0.95.0':
+    resolution: {integrity: sha512-8huzHlK/N98wrnYKxIcYsK8ZGBWomQchu/Mzi6m+CtbhjWOv9DmK0jQ2fUWImtluQVpTwS0uZT06d3g7XIkJrA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-x64-musl@0.110.0':
     resolution: {integrity: sha512-6DiYhVdXKOzB01+j/tyrB6/d2o6b4XYFQvcbBRNbVHIimS6nl992y3V3mGG3NaA+uCZAzhT3M3btTdKAxE4A3A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-x64-musl@0.95.0':
+    resolution: {integrity: sha512-bWnrLfGDcx/fab0+UQnFbVFbiykof/btImbYf+cI2pU/1Egb2x+OKSmM5Qt0nEUiIpM5fgJmYXxTopybSZOKYA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
   '@oxc-parser/binding-openharmony-arm64@0.110.0':
     resolution: {integrity: sha512-U9KEK7tXdHrXl2eZpoHYGWj31ZSvdGiaXwjkJzeRN0elt89PXi+VcryRh6BAFbEz1EQpTteyMDwDXMgJVWM85A==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1858,12 +2009,23 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@oxc-parser/binding-wasm32-wasi@0.95.0':
+    resolution: {integrity: sha512-0JLyqkZu1HnQIZ4e5LBGOtzqua1QwFEUOoMSycdoerXqayd4LK2b7WMfAx8eCIf+jGm1Uj6f3R00nlsx8g1faQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
   '@oxc-parser/binding-win32-arm64-msvc@0.110.0':
     resolution: {integrity: sha512-ZW393ysGT5oZeGJRyw2JAz4tIfyTjVCSxuZoh8e+7J7e0QPDH/SAmyxJXb/aMxarIVa3OcYZ5p/Q6eooHZ0i1Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.95.0':
+    resolution: {integrity: sha512-RWvaA6s1SYlBj9CxwHfNn0CRlkPdv9fEUAXfZkGQPdP5e1ppIaO2KYE0sUov/zzp9hPTMMsTMHl4dcIbb+pHCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@oxc-parser/binding-win32-ia32-msvc@0.110.0':
     resolution: {integrity: sha512-NM50LT1PEnlMlw+z/TFVkWaDOF/s5DRHbU3XhEESNhDDT9qYA8N9B1V/FYxVr1ngu28JGK2HtkjpWKlKoF4E2Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1876,6 +2038,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@oxc-parser/binding-win32-x64-msvc@0.95.0':
+    resolution: {integrity: sha512-BQpgl7rDjFvCIHudmUR0dCwc4ylBYZl4CPVinlD3NhkMif4WD5dADckoo5ES/KOpFyvwcbKZX+grP63cjHi26g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@oxc-project/runtime@0.110.0':
     resolution: {integrity: sha512-4t5lYmPneAGKGN7zDhK2iQrn+Ax3DXLCNqVr3z6K2VqemKWfQTlLyzjgjilxZmwFAKe65qI4WG7Bsj05UgUHaA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1883,6 +2051,9 @@ packages:
   '@oxc-project/types@0.110.0':
     resolution: {integrity: sha512-6Ct21OIlrEnFEJk5LT4e63pk3btsI6/TusD/GStLi7wYlGJNOl1GI9qvXAnRAxQU9zqA2Oz+UwhfTOU2rPZVow==}
 
+  '@oxc-project/types@0.95.0':
+    resolution: {integrity: sha512-vACy7vhpMPhjEJhULNxrdR0D943TkA/MigMpJCHmBHvMXxRStRi/dPtTlfQ3uDwWSzRpT8z+7ImjZVf8JWBocQ==}
+
   '@oxc-transform/binding-android-arm-eabi@0.110.0':
     resolution: {integrity: sha512-sE9dxvqqAax1YYJ3t7j+h5ZSI9jl6dYuDfngl6ieZUrIy5P89/8JKVgAzgp8o3wQSo7ndpJvYsi1K4ZqrmbP7w==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1895,48 +2066,96 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@oxc-transform/binding-android-arm64@0.95.0':
+    resolution: {integrity: sha512-eW+BCgRWOsMrDiz7FEV7BjAmaF9lGIc2ueGdRUYjRUMq4f5FSGS7gMBTYDxajdoIB3L5Gnksh1CWkIlgg95UVA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
   '@oxc-transform/binding-darwin-arm64@0.110.0':
     resolution: {integrity: sha512-oeSeHnL4Z4cMXtc8V0/rwoVn0dgwlS9q0j6LcHn9dIhtFEdp3W0iSBF8YmMQA+E7sILeLDjsHmHE4Kp0sOScXw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
+  '@oxc-transform/binding-darwin-arm64@0.95.0':
+    resolution: {integrity: sha512-OUUaYZVss8tyDZZ7TGr2vnH3+i3Ouwsx0frQRGkiePNatXxaJJ3NS5+Kwgi9hh3WryXaQz2hWji4AM2RHYE7Cg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@oxc-transform/binding-darwin-x64@0.110.0':
     resolution: {integrity: sha512-nL9K5x7OuZydobAGPylsEW9d4APs2qEkIBLMgQPA+kY8dtVD3IR87QsTbs4l4DBQYyun/+ay6qVCDlxqxdX2Jg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
+  '@oxc-transform/binding-darwin-x64@0.95.0':
+    resolution: {integrity: sha512-49UPEgIlgWUndwcP3LH6dvmOewZ92DxCMpFMo11JhUlmNJxA3sjVImEBRB56/tJ+XF+xnya9kB1oCW4yRY+mRw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@oxc-transform/binding-freebsd-x64@0.110.0':
     resolution: {integrity: sha512-GS29zXXirDQhZEUq8xKJ1azAWMuUy3Ih3W5Bc5ddk12LRthO5wRLFcKIyeHpAXCoXymQ+LmxbMtbPf84GPxouw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
+  '@oxc-transform/binding-freebsd-x64@0.95.0':
+    resolution: {integrity: sha512-lNKrHKaDEm8pbKlVbn0rv2L97O0lbA0Tsrxx4GF/HhmdW+NgwGU1pMzZ4tB2QcylbqgKxOB+v9luebHyh1jfgA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
   '@oxc-transform/binding-linux-arm-gnueabihf@0.110.0':
     resolution: {integrity: sha512-glzDHak8ISyZJemCUi7RCvzNSl+MQ1ly9RceT2qRufhUsvNZ4C/2QLJ1HJwd2N6E88bO4laYn+RofdRzNnGGEA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@oxc-transform/binding-linux-arm-gnueabihf@0.95.0':
+    resolution: {integrity: sha512-+VWcLeeizI8IjU+V+o8AmzPuIMiTrGr0vrmXU3CEsV05MrywCuJU+f6ilPs3JBKno9VIwqvRpHB/z39sQabHWg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-transform/binding-linux-arm-musleabihf@0.110.0':
     resolution: {integrity: sha512-8JThvgJ2FRoTVfbp7e4wqeZqCZbtudM06SfZmNzND9kPNu/LVYygIR+72RWs+xm4bWkuYHg/islo/boNPtMT5Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@oxc-transform/binding-linux-arm-musleabihf@0.95.0':
+    resolution: {integrity: sha512-a59xPw84t6VwlvNEGcmuw3feGcKcWOC7uB8oePJ/BVSAV1yayLoB3k6JASwLTZ7N/PNPNUhcw1jDxowgAfBJfg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-transform/binding-linux-arm64-gnu@0.110.0':
     resolution: {integrity: sha512-IRh21Ub/g4bkHoErZ0AUWMlWfoZaS0A6EaOVtbcY70RSYIMlrsbjiFwJCzM+b/1DD1rXbH5tsGcH7GweTbfRqg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
+  '@oxc-transform/binding-linux-arm64-gnu@0.95.0':
+    resolution: {integrity: sha512-NLdrFuEHlmbiC1M1WESFV4luUcB/84GXi+cbnRXhgMjIW/CThRVJ989eTJy59QivkVlLcJSKTiKiKCt0O6TTlQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@oxc-transform/binding-linux-arm64-musl@0.110.0':
     resolution: {integrity: sha512-e5JN94/oy+wevk76q+LMr+2klTTcO60uXa+Wkq558Ms7mdF2TvkKFI++d/JeiuIwJLTi/BxQ4qdT5FWcsHM/ug==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
+  '@oxc-transform/binding-linux-arm64-musl@0.95.0':
+    resolution: {integrity: sha512-GL0ffCPW8JlFI0/jeSgCY665yDdojHxA0pbYG+k8oEHOWCYZUZK9AXL+r0oerNEWYJ8CRB+L5Yq87ZtU/YUitw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@oxc-transform/binding-linux-ppc64-gnu@0.110.0':
     resolution: {integrity: sha512-Y3/Tnnz1GvDpmv8FXBIKtdZPsdZklOEPdrL6NHrN5i2u54BOkybFaDSptgWF53wOrJlTrcmAVSE6fRKK9XCM2Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1949,6 +2168,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@oxc-transform/binding-linux-riscv64-gnu@0.95.0':
+    resolution: {integrity: sha512-tbH7LaClSmN3YFVo1UjMSe7D6gkb5f+CMIbj9i873UUZomVRmAjC4ygioObfzM+sj/tX0WoTXx5L1YOfQkHL6Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
   '@oxc-transform/binding-linux-riscv64-musl@0.110.0':
     resolution: {integrity: sha512-JOUSYFfHjBUs7xp2FHmZHb8eTYD/oEu0NklS6JgUauqnoXZHiTLPLVW2o2uVCqldnabYHcomuwI2iqVFYJNhTw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1961,18 +2186,36 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@oxc-transform/binding-linux-s390x-gnu@0.95.0':
+    resolution: {integrity: sha512-8jMqiURWa0iTiPMg7BWaln89VdhhWzNlPyKM90NaFVVhBIKCr2UEhrQWdpBw/E9C8uWf/4VabBEhfPMK+0yS4w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
   '@oxc-transform/binding-linux-x64-gnu@0.110.0':
     resolution: {integrity: sha512-YQ2joGWCVDZVEU2cD/r/w49hVjDm/Qu1BvC/7zs8LvprzdLS/HyMXGF2oA0puw0b+AqgYaz3bhwKB2xexHyITQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
+  '@oxc-transform/binding-linux-x64-gnu@0.95.0':
+    resolution: {integrity: sha512-D5ULJ2uWipsTgfvHIvqmnGkCtB3Fyt2ZN7APRjVO+wLr+HtmnaWddKsLdrRWX/m/6nQ2xQdoQekdJrokYK9LtQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
   '@oxc-transform/binding-linux-x64-musl@0.110.0':
     resolution: {integrity: sha512-fkjr5qE632ULmNgvFXWDR/8668WxERz3tU7TQFp6JebPBneColitjSkdx6VKNVXEoMmQnOvBIGeP5tUNT384oA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
+  '@oxc-transform/binding-linux-x64-musl@0.95.0':
+    resolution: {integrity: sha512-DmCGU+FzRezES5wVAGVimZGzYIjMOapXbWpxuz8M8p3nMrfdBEQ5/tpwBp2vRlIohhABy4vhHJByl4c64ENCGQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
   '@oxc-transform/binding-openharmony-arm64@0.110.0':
     resolution: {integrity: sha512-HWH9Zj+lMrdSTqFRCZsvDWMz7OnMjbdGsm3xURXWfRZpuaz0bVvyuZNDQXc4FyyhRDsemICaJbU1bgeIpUJDGw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1984,12 +2227,23 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@oxc-transform/binding-wasm32-wasi@0.95.0':
+    resolution: {integrity: sha512-tSo1EU4Whd1gXyae7cwSDouhppkuz6Jkd5LY8Uch9VKsHVSRhDLDW19Mq6VSwtyPxDPTJnJ2jYJWm+n8SYXiXQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
   '@oxc-transform/binding-win32-arm64-msvc@0.110.0':
     resolution: {integrity: sha512-9VTwpXCZs7xkV+mKhQ62dVk7KLnLXtEUxNS2T4nLz3iMl1IJbA4h5oltK0JoobtiUAnbkV53QmMVGW8+Nh3bDQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
+  '@oxc-transform/binding-win32-arm64-msvc@0.95.0':
+    resolution: {integrity: sha512-6eaxlgj+J5n8zgJTSugqdPLBtKGRqvxYLcvHN8b+U9hVhF/2HG/JCOrcSYV/XgWGNPQiaRVzpR3hGhmFro9QTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@oxc-transform/binding-win32-ia32-msvc@0.110.0':
     resolution: {integrity: sha512-5y0fzuNON7/F2hh2P94vANFaRPJ/3DI1hVl5rseCT8VUVqOGIjWaza0YS/D1g6t1WwycW2LWDMi2raOKoWU5GQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2002,6 +2256,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@oxc-transform/binding-win32-x64-msvc@0.95.0':
+    resolution: {integrity: sha512-Y8JY79A7fTuBjEXZFu+mHbHzgsV3uJDUuUKeGffpOwI1ayOGCKeBJTiMhksYkiir1xS+DkGLEz73+xse9Is9rw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@oxfmt/darwin-arm64@0.26.0':
     resolution: {integrity: sha512-AAGc+8CffkiWeVgtWf4dPfQwHEE5c/j/8NWH7VGVxxJRCZFdmWcqCXprvL2H6qZFewvDLrFbuSPRCqYCpYGaTQ==}
     cpu: [arm64]
@@ -2475,6 +2735,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/plugin-yaml@4.1.2':
+    resolution: {integrity: sha512-RpupciIeZMUqhgFE97ba0s98mOFS7CWzN3EJNhJkqSv9XLlWYtwVdtE6cDw6ASOF/sZVFS7kRJXftaqM2Vakdw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/pluginutils@3.1.0':
     resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
     engines: {node: '>= 8.0.0'}
@@ -2740,6 +3009,36 @@ packages:
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
+  '@typescript-eslint/project-service@8.54.0':
+    resolution: {integrity: sha512-YPf+rvJ1s7MyiWM4uTRhE4DvBXrEV+d8oC3P9Y2eT7S+HBS0clybdMIPnhiATi9vZOYDc7OQ1L/i6ga6NFYK/g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@8.54.0':
+    resolution: {integrity: sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.54.0':
+    resolution: {integrity: sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@8.54.0':
+    resolution: {integrity: sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.54.0':
+    resolution: {integrity: sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/visitor-keys@8.54.0':
+    resolution: {integrity: sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
@@ -3988,6 +4287,11 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -4018,6 +4322,15 @@ packages:
     resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   esquery@1.7.0:
     resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
@@ -4806,6 +5119,10 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonc-eslint-parser@2.4.2:
+    resolution: {integrity: sha512-1e4qoRgnn448pRuMvKGsFFymUCquZV0mpGgOyIKNgD3JVDTsVJyRBGH/Fm0tBb8WsWGgmB1mDe6/yJMQM37DUA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   jsonfile@6.2.0:
     resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
 
@@ -5221,6 +5538,9 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  nuxt-define@1.0.0:
+    resolution: {integrity: sha512-CYZ2WjU+KCyCDVzjYUM4eEpMF0rkPmkpiFrybTqqQCRpUbPt2h3snswWIpFPXTi+osRCY6Og0W/XLAQgDL4FfQ==}
+
   nuxt-og-image@5.1.13:
     resolution: {integrity: sha512-H9kqGlmcEb9agWURwT5iFQjbr7Ec7tcQHZZaYSpC/JXKq2/dFyRyAoo6oXTk6ob20dK9aNjkJDcX2XmgZy67+w==}
     engines: {node: '>=18.0.0'}
@@ -5319,10 +5639,23 @@ packages:
     resolution: {integrity: sha512-GijUR3K1Ln/QwMyYXRsBtOyzqGaCs9ce5pOug1UtrMg8dSiE7VuuRuIcyYD4nyJbasat3K0YljiKt/PSFPdSBA==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
+  oxc-parser@0.95.0:
+    resolution: {integrity: sha512-Te8fE/SmiiKWIrwBwxz5Dod87uYvsbcZ9JAL5ylPg1DevyKgTkxCXnPEaewk1Su2qpfNmry5RHoN+NywWFCG+A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
   oxc-transform@0.110.0:
     resolution: {integrity: sha512-/fymQNzzUoKZweH0nC5yvbI2eR0yWYusT9TEKDYVgOgYrf9Qmdez9lUFyvxKR9ycx+PTHi/reIOzqf3wkShQsw==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
+  oxc-transform@0.95.0:
+    resolution: {integrity: sha512-SmS5aThb5K0SoUZgzGbikNBjrGHfOY4X5TEqBlaZb1uy5YgXbUSbpakpZJ13yW36LNqy8Im5+y+sIk5dlzpZ/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-walker@0.5.2:
+    resolution: {integrity: sha512-XYoZqWwApSKUmSDEFeOKdy3Cdh95cOcSU8f7yskFWE4Rl3cfL5uwyY+EV7Brk9mdNLy+t5SseJajd6g7KncvlA==}
+    peerDependencies:
+      oxc-parser: '>=0.72.0'
+
   oxc-walker@0.7.0:
     resolution: {integrity: sha512-54B4KUhrzbzc4sKvKwVYm7E2PgeROpGba0/2nlNZMqfDyca+yOor5IMb4WLGBatGDT0nkzYdYuzylg7n3YfB7A==}
     peerDependencies:
@@ -6302,6 +6635,10 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
+  tosource@2.0.0-alpha.3:
+    resolution: {integrity: sha512-KAB2lrSS48y91MzFPFuDg4hLbvDiyTjOVgaK7Erw+5AmZXNq4sFRVn8r6yxSLuNs15PaokrDRpS61ERY9uZOug==}
+    engines: {node: '>=10'}
+
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -6327,6 +6664,12 @@ packages:
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
+  ts-api-utils@2.4.0:
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
   tsdown@0.20.1:
     resolution: {integrity: sha512-Wo1BzqNQVZ6SFQV8rjQBwMmNubO+yV3F+vp2WNTjEaS4S5CT1C1dHtUbeFMrCEasZpGy5w6TshpehNnfTe8QBQ==}
     engines: {node: '>=20.19.0'}
@@ -6507,6 +6850,15 @@ packages:
     resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
     engines: {node: '>=20.19.0'}
 
+  unplugin-vue-router@0.16.2:
+    resolution: {integrity: sha512-lE6ZjnHaXfS2vFI/PSEwdKcdOo5RwAbCKUnPBIN9YwLgSWas3x+qivzQvJa/uxhKzJldE6WK43aDKjGj9Rij9w==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.5.17
+      vue-router: ^4.6.0
+    peerDependenciesMeta:
+      vue-router:
+        optional: true
+
   unplugin-vue-router@0.19.2:
     resolution: {integrity: sha512-u5dgLBarxE5cyDK/hzJGfpCTLIAyiTXGlo85COuD4Nssj6G7NxS+i9mhCWz/1p/ud1eMwdcUbTXehQe41jYZUA==}
     peerDependencies:
@@ -6812,6 +7164,12 @@ packages:
   vue-flow-layout@0.2.0:
     resolution: {integrity: sha512-zKgsWWkXq0xrus7H4Mc+uFs1ESrmdTXlO0YNbR6wMdPaFvosL3fMB8N7uTV308UhGy9UvTrGhIY7mVz9eN+L0Q==}
 
+  vue-i18n@11.2.8:
+    resolution: {integrity: sha512-vJ123v/PXCZntd6Qj5Jumy7UBmIuE92VrtdX+AXr+1WzdBHojiBxnAxdfctUFL+/JIN+VQH4BhsfTtiGsvVObg==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      vue: ^3.0.0
+
   vue-router@4.6.4:
     resolution: {integrity: sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==}
     peerDependencies:
@@ -7013,6 +7371,10 @@ packages:
     resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
     engines: {node: '>=18'}
 
+  yaml-eslint-parser@1.3.2:
+    resolution: {integrity: sha512-odxVsHAkZYYglR30aPYRY4nUGJnoJ2y1ww2HDvZALo0BDETv9kWbi16J52eHs+PWRNmF4ub6nZqfVOeesOvntg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+
   yaml@2.8.2:
     resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
     engines: {node: '>= 14.6'}
@@ -8050,10 +8412,8 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
-    optional: true
 
-  '@eslint-community/regexpp@4.12.2':
-    optional: true
+  '@eslint-community/regexpp@4.12.2': {}
 
   '@eslint/config-array@0.21.1':
     dependencies:
@@ -8062,17 +8422,14 @@ snapshots:
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   '@eslint/config-helpers@0.4.2':
     dependencies:
       '@eslint/core': 0.17.0
-    optional: true
 
   '@eslint/core@0.17.0':
     dependencies:
       '@types/json-schema': 7.0.15
-    optional: true
 
   '@eslint/eslintrc@3.3.3':
     dependencies:
@@ -8087,19 +8444,15 @@ snapshots:
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
-  '@eslint/js@9.39.2':
-    optional: true
+  '@eslint/js@9.39.2': {}
 
-  '@eslint/object-schema@2.1.7':
-    optional: true
+  '@eslint/object-schema@2.1.7': {}
 
   '@eslint/plugin-kit@0.4.1':
     dependencies:
       '@eslint/core': 0.17.0
       levn: 0.4.1
-    optional: true
 
   '@exodus/bytes@1.9.0':
     optional: true
@@ -8108,20 +8461,16 @@ snapshots:
     dependencies:
       kleur: 4.1.5
 
-  '@humanfs/core@0.19.1':
-    optional: true
+  '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
     dependencies:
       '@humanfs/core': 0.19.1
       '@humanwhocodes/retry': 0.4.3
-    optional: true
 
-  '@humanwhocodes/module-importer@1.0.1':
-    optional: true
+  '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@humanwhocodes/retry@0.4.3':
-    optional: true
+  '@humanwhocodes/retry@0.4.3': {}
 
   '@iconify-json/carbon@1.2.18':
     dependencies:
@@ -8243,40 +8592,111 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
-  '@ioredis/commands@1.5.0': {}
-
-  '@isaacs/balanced-match@4.0.1': {}
-
-  '@isaacs/brace-expansion@5.0.0':
+  '@intlify/bundle-utils@11.0.3(vue-i18n@11.2.8(vue@3.5.27(typescript@5.9.3)))':
     dependencies:
-      '@isaacs/balanced-match': 4.0.1
+      '@intlify/message-compiler': 11.2.8
+      '@intlify/shared': 11.2.8
+      acorn: 8.15.0
+      esbuild: 0.25.12
+      escodegen: 2.1.0
+      estree-walker: 2.0.2
+      jsonc-eslint-parser: 2.4.2
+      source-map-js: 1.2.1
+      yaml-eslint-parser: 1.3.2
+    optionalDependencies:
+      vue-i18n: 11.2.8(vue@3.5.27(typescript@5.9.3))
 
-  '@isaacs/cliui@8.0.2':
+  '@intlify/core-base@11.2.8':
     dependencies:
-      string-width: 5.1.2
-      string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.2
-      strip-ansi-cjs: strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: wrap-ansi@7.0.0
+      '@intlify/message-compiler': 11.2.8
+      '@intlify/shared': 11.2.8
 
-  '@isaacs/fs-minipass@4.0.1':
+  '@intlify/core@11.2.8':
     dependencies:
-      minipass: 7.1.2
+      '@intlify/core-base': 11.2.8
+      '@intlify/shared': 11.2.8
 
-  '@jridgewell/gen-mapping@0.3.13':
+  '@intlify/h3@0.7.4':
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.31
+      '@intlify/core': 11.2.8
+      '@intlify/utils': 0.13.0
 
-  '@jridgewell/remapping@2.3.5':
+  '@intlify/message-compiler@11.2.8':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
+      '@intlify/shared': 11.2.8
+      source-map-js: 1.2.1
 
-  '@jridgewell/resolve-uri@3.1.2': {}
+  '@intlify/shared@11.2.8': {}
 
-  '@jridgewell/source-map@0.3.11':
+  '@intlify/unplugin-vue-i18n@11.0.3(@vue/compiler-dom@3.5.27)(eslint@9.39.2(jiti@2.6.1))(rollup@4.56.0)(typescript@5.9.3)(vue-i18n@11.2.8(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      '@intlify/bundle-utils': 11.0.3(vue-i18n@11.2.8(vue@3.5.27(typescript@5.9.3)))
+      '@intlify/shared': 11.2.8
+      '@intlify/vue-i18n-extensions': 8.0.0(@intlify/shared@11.2.8)(@vue/compiler-dom@3.5.27)(vue-i18n@11.2.8(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))
+      '@rollup/pluginutils': 5.3.0(rollup@4.56.0)
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      pathe: 2.0.3
+      picocolors: 1.1.1
+      unplugin: 2.3.11
+      vue: 3.5.27(typescript@5.9.3)
+    optionalDependencies:
+      vue-i18n: 11.2.8(vue@3.5.27(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/compiler-dom'
+      - eslint
+      - rollup
+      - supports-color
+      - typescript
+
+  '@intlify/utils@0.13.0': {}
+
+  '@intlify/vue-i18n-extensions@8.0.0(@intlify/shared@11.2.8)(@vue/compiler-dom@3.5.27)(vue-i18n@11.2.8(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@babel/parser': 7.28.6
+    optionalDependencies:
+      '@intlify/shared': 11.2.8
+      '@vue/compiler-dom': 3.5.27
+      vue: 3.5.27(typescript@5.9.3)
+      vue-i18n: 11.2.8(vue@3.5.27(typescript@5.9.3))
+
+  '@ioredis/commands@1.5.0': {}
+
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.0':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/source-map@0.3.11':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
@@ -8309,6 +8729,12 @@ snapshots:
       - encoding
       - supports-color
 
+  '@miyaneee/rollup-plugin-json5@1.2.0(rollup@4.56.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.56.0)
+      json5: 2.2.3
+      rollup: 4.56.0
+
   '@napi-rs/wasm-runtime@1.1.1':
     dependencies:
       '@emnapi/core': 1.8.1
@@ -8832,6 +9258,64 @@ snapshots:
       - magicast
       - vitest
 
+  '@nuxtjs/i18n@10.2.1(@vue/compiler-dom@3.5.27)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(magicast@0.5.1)(rollup@4.56.0)(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@intlify/core': 11.2.8
+      '@intlify/h3': 0.7.4
+      '@intlify/shared': 11.2.8
+      '@intlify/unplugin-vue-i18n': 11.0.3(@vue/compiler-dom@3.5.27)(eslint@9.39.2(jiti@2.6.1))(rollup@4.56.0)(typescript@5.9.3)(vue-i18n@11.2.8(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))
+      '@intlify/utils': 0.13.0
+      '@miyaneee/rollup-plugin-json5': 1.2.0(rollup@4.56.0)
+      '@nuxt/kit': 4.3.0(magicast@0.5.1)
+      '@rollup/plugin-yaml': 4.1.2(rollup@4.56.0)
+      '@vue/compiler-sfc': 3.5.27
+      defu: 6.1.4
+      devalue: 5.6.2
+      h3: 1.15.5
+      knitwork: 1.3.0
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      nuxt-define: 1.0.0
+      ohash: 2.0.11
+      oxc-parser: 0.95.0
+      oxc-transform: 0.95.0
+      oxc-walker: 0.5.2(oxc-parser@0.95.0)
+      pathe: 2.0.3
+      typescript: 5.9.3
+      ufo: 1.6.3
+      unplugin: 2.3.11
+      unplugin-vue-router: 0.16.2(@vue/compiler-sfc@3.5.27)(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))
+      unstorage: 1.17.4(db0@0.3.4)(ioredis@5.9.2)
+      vue-i18n: 11.2.8(vue@3.5.27(typescript@5.9.3))
+      vue-router: 4.6.4(vue@3.5.27(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - '@vue/compiler-dom'
+      - aws4fetch
+      - db0
+      - eslint
+      - idb-keyval
+      - ioredis
+      - magicast
+      - petite-vue-i18n
+      - rollup
+      - supports-color
+      - uploadthing
+      - vue
+
   '@one-ini/wasm@0.1.1': {}
 
   '@oxc-minify/binding-android-arm-eabi@0.110.0':
@@ -8902,45 +9386,81 @@ snapshots:
   '@oxc-parser/binding-android-arm64@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-android-arm64@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-darwin-arm64@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-darwin-arm64@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-darwin-x64@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-darwin-x64@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-freebsd-x64@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-freebsd-x64@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm-musleabihf@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm-musleabihf@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-gnu@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-musl@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-musl@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-linux-ppc64-gnu@0.110.0':
     optional: true
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-linux-riscv64-gnu@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-linux-riscv64-musl@0.110.0':
     optional: true
 
   '@oxc-parser/binding-linux-s390x-gnu@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-linux-s390x-gnu@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-gnu@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-gnu@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-musl@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-musl@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-openharmony-arm64@0.110.0':
     optional: true
 
@@ -8949,64 +9469,113 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.1.1
     optional: true
 
+  '@oxc-parser/binding-wasm32-wasi@0.95.0':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.1
+    optional: true
+
   '@oxc-parser/binding-win32-arm64-msvc@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-win32-ia32-msvc@0.110.0':
     optional: true
 
   '@oxc-parser/binding-win32-x64-msvc@0.110.0':
     optional: true
 
+  '@oxc-parser/binding-win32-x64-msvc@0.95.0':
+    optional: true
+
   '@oxc-project/runtime@0.110.0': {}
 
   '@oxc-project/types@0.110.0': {}
 
+  '@oxc-project/types@0.95.0': {}
+
   '@oxc-transform/binding-android-arm-eabi@0.110.0':
     optional: true
 
   '@oxc-transform/binding-android-arm64@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-android-arm64@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-darwin-arm64@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-darwin-arm64@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-darwin-x64@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-darwin-x64@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-freebsd-x64@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-freebsd-x64@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-linux-arm-gnueabihf@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-linux-arm-gnueabihf@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-linux-arm-musleabihf@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-linux-arm-musleabihf@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-linux-arm64-gnu@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-linux-arm64-gnu@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-linux-arm64-musl@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-linux-arm64-musl@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-linux-ppc64-gnu@0.110.0':
     optional: true
 
   '@oxc-transform/binding-linux-riscv64-gnu@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-linux-riscv64-gnu@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-linux-riscv64-musl@0.110.0':
     optional: true
 
   '@oxc-transform/binding-linux-s390x-gnu@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-linux-s390x-gnu@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-linux-x64-gnu@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-linux-x64-gnu@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-linux-x64-musl@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-linux-x64-musl@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-openharmony-arm64@0.110.0':
     optional: true
 
@@ -9015,15 +9584,26 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.1.1
     optional: true
 
+  '@oxc-transform/binding-wasm32-wasi@0.95.0':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.1
+    optional: true
+
   '@oxc-transform/binding-win32-arm64-msvc@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-win32-arm64-msvc@0.95.0':
+    optional: true
+
   '@oxc-transform/binding-win32-ia32-msvc@0.110.0':
     optional: true
 
   '@oxc-transform/binding-win32-x64-msvc@0.110.0':
     optional: true
 
+  '@oxc-transform/binding-win32-x64-msvc@0.95.0':
+    optional: true
+
   '@oxfmt/darwin-arm64@0.26.0':
     optional: true
 
@@ -9366,6 +9946,14 @@ snapshots:
     optionalDependencies:
       rollup: 4.56.0
 
+  '@rollup/plugin-yaml@4.1.2(rollup@4.56.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.56.0)
+      js-yaml: 4.1.1
+      tosource: 2.0.0-alpha.3
+    optionalDependencies:
+      rollup: 4.56.0
+
   '@rollup/pluginutils@3.1.0(rollup@2.79.2)':
     dependencies:
       '@types/estree': 0.0.39
@@ -9601,6 +10189,46 @@ snapshots:
     dependencies:
       '@types/node': 24.10.9
 
+  '@typescript-eslint/project-service@8.54.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.54.0
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.54.0':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/visitor-keys': 8.54.0
+
+  '@typescript-eslint/tsconfig-utils@8.54.0(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@typescript-eslint/types@8.54.0': {}
+
+  '@typescript-eslint/typescript-estree@8.54.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/visitor-keys': 8.54.0
+      debug: 4.4.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.54.0':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      eslint-visitor-keys: 4.2.1
+
   '@ungap/structured-clone@1.3.0': {}
 
   '@unhead/vue@2.1.2(vue@3.5.27(typescript@5.9.3))':
@@ -10259,7 +10887,6 @@ snapshots:
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
-    optional: true
 
   acorn@8.15.0: {}
 
@@ -10280,7 +10907,6 @@ snapshots:
       fast-json-stable-stringify: 2.1.0
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
-    optional: true
 
   ajv@8.17.1:
     dependencies:
@@ -10335,8 +10961,7 @@ snapshots:
       - bare-abort-controller
       - react-native-b4a
 
-  argparse@2.0.1:
-    optional: true
+  argparse@2.0.1: {}
 
   array-buffer-byte-length@1.0.2:
     dependencies:
@@ -10455,7 +11080,6 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
       concat-map: 0.0.1
-    optional: true
 
   brace-expansion@2.0.2:
     dependencies:
@@ -10526,8 +11150,7 @@ snapshots:
       call-bind-apply-helpers: 1.0.2
       get-intrinsic: 1.3.0
 
-  callsites@3.1.0:
-    optional: true
+  callsites@3.1.0: {}
 
   camelize@1.0.1: {}
 
@@ -10546,7 +11169,6 @@ snapshots:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
-    optional: true
 
   character-entities-html4@2.1.0: {}
 
@@ -10638,8 +11260,7 @@ snapshots:
       normalize-path: 3.0.0
       readable-stream: 4.7.0
 
-  concat-map@0.0.1:
-    optional: true
+  concat-map@0.0.1: {}
 
   confbox@0.1.8: {}
 
@@ -10835,8 +11456,7 @@ snapshots:
       decode-bmp: 0.2.1
       to-data-view: 1.1.0
 
-  deep-is@0.1.4:
-    optional: true
+  deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
 
@@ -11121,6 +11741,14 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -11130,13 +11758,10 @@ snapshots:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
-    optional: true
 
-  eslint-visitor-keys@3.4.3:
-    optional: true
+  eslint-visitor-keys@3.4.3: {}
 
-  eslint-visitor-keys@4.2.1:
-    optional: true
+  eslint-visitor-keys@4.2.1: {}
 
   eslint@9.39.2(jiti@2.6.1):
     dependencies:
@@ -11178,19 +11803,24 @@ snapshots:
       jiti: 2.6.1
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   espree@10.4.0:
     dependencies:
       acorn: 8.15.0
       acorn-jsx: 5.3.2(acorn@8.15.0)
       eslint-visitor-keys: 4.2.1
-    optional: true
+
+  espree@9.6.1:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 3.4.3
+
+  esprima@4.0.1: {}
 
   esquery@1.7.0:
     dependencies:
       estraverse: 5.3.0
-    optional: true
 
   esrecurse@4.3.0:
     dependencies:
@@ -11269,8 +11899,7 @@ snapshots:
 
   fast-json-stable-stringify@2.1.0: {}
 
-  fast-levenshtein@2.0.6:
-    optional: true
+  fast-levenshtein@2.0.6: {}
 
   fast-npm-meta@0.4.8: {}
 
@@ -11293,7 +11922,6 @@ snapshots:
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
-    optional: true
 
   file-uri-to-path@1.0.0: {}
 
@@ -11309,16 +11937,13 @@ snapshots:
     dependencies:
       locate-path: 6.0.0
       path-exists: 4.0.0
-    optional: true
 
   flat-cache@4.0.1:
     dependencies:
       flatted: 3.3.3
       keyv: 4.5.4
-    optional: true
 
-  flatted@3.3.3:
-    optional: true
+  flatted@3.3.3: {}
 
   fontaine@0.7.0:
     dependencies:
@@ -11507,7 +12132,6 @@ snapshots:
   glob-parent@6.0.2:
     dependencies:
       is-glob: 4.0.3
-    optional: true
 
   glob-to-regexp@0.4.1: {}
 
@@ -11541,8 +12165,7 @@ snapshots:
 
   globals@11.12.0: {}
 
-  globals@14.0.0:
-    optional: true
+  globals@14.0.0: {}
 
   globalthis@1.0.4:
     dependencies:
@@ -11722,8 +12345,7 @@ snapshots:
 
   ieee754@1.2.1: {}
 
-  ignore@5.3.2:
-    optional: true
+  ignore@5.3.2: {}
 
   ignore@7.0.5: {}
 
@@ -11735,7 +12357,6 @@ snapshots:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
-    optional: true
 
   import-without-cache@0.2.5: {}
 
@@ -11747,8 +12368,7 @@ snapshots:
       unplugin: 2.3.11
       unplugin-utils: 0.2.5
 
-  imurmurhash@0.1.4:
-    optional: true
+  imurmurhash@0.1.4: {}
 
   inherits@2.0.4: {}
 
@@ -12012,7 +12632,6 @@ snapshots:
   js-yaml@4.1.1:
     dependencies:
       argparse: 2.0.1
-    optional: true
 
   jsdom@27.4.0:
     dependencies:
@@ -12045,23 +12664,27 @@ snapshots:
 
   jsesc@3.1.0: {}
 
-  json-buffer@3.0.1:
-    optional: true
+  json-buffer@3.0.1: {}
 
   json-parse-even-better-errors@2.3.1: {}
 
-  json-schema-traverse@0.4.1:
-    optional: true
+  json-schema-traverse@0.4.1: {}
 
   json-schema-traverse@1.0.0: {}
 
   json-schema@0.4.0: {}
 
-  json-stable-stringify-without-jsonify@1.0.1:
-    optional: true
+  json-stable-stringify-without-jsonify@1.0.1: {}
 
   json5@2.2.3: {}
 
+  jsonc-eslint-parser@2.4.2:
+    dependencies:
+      acorn: 8.15.0
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      semver: 7.7.3
+
   jsonfile@6.2.0:
     dependencies:
       universalify: 2.0.1
@@ -12073,7 +12696,6 @@ snapshots:
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
-    optional: true
 
   kleur@3.0.3: {}
 
@@ -12098,7 +12720,6 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
       type-check: 0.4.0
-    optional: true
 
   lighthouse-logger@2.0.2:
     dependencies:
@@ -12214,7 +12835,6 @@ snapshots:
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
-    optional: true
 
   lodash.debounce@4.0.8: {}
 
@@ -12224,8 +12844,7 @@ snapshots:
 
   lodash.memoize@4.1.2: {}
 
-  lodash.merge@4.6.2:
-    optional: true
+  lodash.merge@4.6.2: {}
 
   lodash.sortby@4.7.0: {}
 
@@ -12354,7 +12973,6 @@ snapshots:
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12
-    optional: true
 
   minimatch@5.1.6:
     dependencies:
@@ -12401,8 +13019,7 @@ snapshots:
 
   nanotar@0.2.0: {}
 
-  natural-compare@1.4.0:
-    optional: true
+  natural-compare@1.4.0: {}
 
   neo-async@2.6.2: {}
 
@@ -12549,6 +13166,8 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  nuxt-define@1.0.0: {}
+
   nuxt-og-image@5.1.13(@unhead/vue@2.1.2(vue@3.5.27(typescript@5.9.3)))(magicast@0.5.1)(unstorage@1.17.4(db0@0.3.4)(ioredis@5.9.2))(vite@8.0.0-beta.10(@types/node@25.0.10)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3)):
     dependencies:
       '@nuxt/devtools-kit': 3.1.1(magicast@0.5.1)(vite@8.0.0-beta.10(@types/node@25.0.10)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
@@ -12812,7 +13431,6 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
       word-wrap: 1.2.5
-    optional: true
 
   own-keys@1.0.1:
     dependencies:
@@ -12868,6 +13486,26 @@ snapshots:
       '@oxc-parser/binding-win32-ia32-msvc': 0.110.0
       '@oxc-parser/binding-win32-x64-msvc': 0.110.0
 
+  oxc-parser@0.95.0:
+    dependencies:
+      '@oxc-project/types': 0.95.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm64': 0.95.0
+      '@oxc-parser/binding-darwin-arm64': 0.95.0
+      '@oxc-parser/binding-darwin-x64': 0.95.0
+      '@oxc-parser/binding-freebsd-x64': 0.95.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.95.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.95.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.95.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.95.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.95.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.95.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.95.0
+      '@oxc-parser/binding-linux-x64-musl': 0.95.0
+      '@oxc-parser/binding-wasm32-wasi': 0.95.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.95.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.95.0
+
   oxc-transform@0.110.0:
     optionalDependencies:
       '@oxc-transform/binding-android-arm-eabi': 0.110.0
@@ -12891,6 +13529,29 @@ snapshots:
       '@oxc-transform/binding-win32-ia32-msvc': 0.110.0
       '@oxc-transform/binding-win32-x64-msvc': 0.110.0
 
+  oxc-transform@0.95.0:
+    optionalDependencies:
+      '@oxc-transform/binding-android-arm64': 0.95.0
+      '@oxc-transform/binding-darwin-arm64': 0.95.0
+      '@oxc-transform/binding-darwin-x64': 0.95.0
+      '@oxc-transform/binding-freebsd-x64': 0.95.0
+      '@oxc-transform/binding-linux-arm-gnueabihf': 0.95.0
+      '@oxc-transform/binding-linux-arm-musleabihf': 0.95.0
+      '@oxc-transform/binding-linux-arm64-gnu': 0.95.0
+      '@oxc-transform/binding-linux-arm64-musl': 0.95.0
+      '@oxc-transform/binding-linux-riscv64-gnu': 0.95.0
+      '@oxc-transform/binding-linux-s390x-gnu': 0.95.0
+      '@oxc-transform/binding-linux-x64-gnu': 0.95.0
+      '@oxc-transform/binding-linux-x64-musl': 0.95.0
+      '@oxc-transform/binding-wasm32-wasi': 0.95.0
+      '@oxc-transform/binding-win32-arm64-msvc': 0.95.0
+      '@oxc-transform/binding-win32-x64-msvc': 0.95.0
+
+  oxc-walker@0.5.2(oxc-parser@0.95.0):
+    dependencies:
+      magic-regexp: 0.10.0
+      oxc-parser: 0.95.0
+
   oxc-walker@0.7.0(oxc-parser@0.110.0):
     dependencies:
       magic-regexp: 0.10.0
@@ -12933,12 +13594,10 @@ snapshots:
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
-    optional: true
 
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
-    optional: true
 
   package-json-from-dist@1.0.1: {}
 
@@ -12949,7 +13608,6 @@ snapshots:
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
-    optional: true
 
   parse-css-color@0.2.1:
     dependencies:
@@ -12978,8 +13636,7 @@ snapshots:
 
   path-browserify@1.0.1: {}
 
-  path-exists@4.0.0:
-    optional: true
+  path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
 
@@ -13201,8 +13858,7 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  prelude-ls@1.2.1:
-    optional: true
+  prelude-ls@1.2.1: {}
 
   prettier@3.8.1: {}
 
@@ -13341,8 +13997,7 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
-  resolve-from@4.0.0:
-    optional: true
+  resolve-from@4.0.0: {}
 
   resolve-from@5.0.0: {}
 
@@ -13847,8 +14502,7 @@ snapshots:
 
   strip-final-newline@4.0.0: {}
 
-  strip-json-comments@3.1.1:
-    optional: true
+  strip-json-comments@3.1.1: {}
 
   strip-literal@3.1.0:
     dependencies:
@@ -13980,6 +14634,8 @@ snapshots:
 
   toidentifier@1.0.1: {}
 
+  tosource@2.0.0-alpha.3: {}
+
   totalist@3.0.1: {}
 
   tough-cookie@6.0.0:
@@ -14002,6 +14658,10 @@ snapshots:
 
   trim-lines@3.0.1: {}
 
+  ts-api-utils@2.4.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
   tsdown@0.20.1(typescript@5.9.3)(vue-tsc@3.2.2(typescript@5.9.3)):
     dependencies:
       ansis: 4.2.0
@@ -14042,7 +14702,6 @@ snapshots:
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
-    optional: true
 
   type-fest@0.16.0: {}
 
@@ -14245,6 +14904,31 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.3
 
+  unplugin-vue-router@0.16.2(@vue/compiler-sfc@3.5.27)(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      '@babel/generator': 7.28.6
+      '@vue-macros/common': 3.1.2(vue@3.5.27(typescript@5.9.3))
+      '@vue/compiler-sfc': 3.5.27
+      '@vue/language-core': 3.2.2
+      ast-walker-scope: 0.8.3
+      chokidar: 4.0.3
+      json5: 2.2.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      muggle-string: 0.4.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      scule: 1.3.0
+      tinyglobby: 0.2.15
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+      yaml: 2.8.2
+    optionalDependencies:
+      vue-router: 4.6.4(vue@3.5.27(typescript@5.9.3))
+    transitivePeerDependencies:
+      - vue
+
   unplugin-vue-router@0.19.2(@vue/compiler-sfc@3.5.27)(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3)):
     dependencies:
       '@babel/generator': 7.28.6
@@ -14331,7 +15015,6 @@ snapshots:
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
-    optional: true
 
   util-deprecate@1.0.2: {}
 
@@ -14541,6 +15224,13 @@ snapshots:
 
   vue-flow-layout@0.2.0: {}
 
+  vue-i18n@11.2.8(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      '@intlify/core-base': 11.2.8
+      '@intlify/shared': 11.2.8
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.27(typescript@5.9.3)
+
   vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
@@ -14689,8 +15379,7 @@ snapshots:
     dependencies:
       isexe: 3.1.1
 
-  word-wrap@1.2.5:
-    optional: true
+  word-wrap@1.2.5: {}
 
   workbox-background-sync@7.4.0:
     dependencies:
@@ -14841,6 +15530,11 @@ snapshots:
 
   yallist@5.0.0: {}
 
+  yaml-eslint-parser@1.3.2:
+    dependencies:
+      eslint-visitor-keys: 3.4.3
+      yaml: 2.8.2
+
   yaml@2.8.2: {}
 
   yargs-parser@21.1.1: {}
@@ -14855,8 +15549,7 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 21.1.1
 
-  yocto-queue@0.1.0:
-    optional: true
+  yocto-queue@0.1.0: {}
 
   yoctocolors@2.1.2: {}
 

From e26418606de7c563513fddde216479b15bd28656 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Tue, 27 Jan 2026 11:00:21 +0100
Subject: [PATCH 02/13] feat(i18n): set detectBrowserLanguage to false

---
 nuxt.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 93eb3bca40..73b024eba3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -136,6 +136,7 @@ export default defineNuxtConfig({
   i18n: {
     defaultLocale: 'en',
     strategy: 'no_prefix',
+    detectBrowserLanguage: false,
     locales: [{ code: 'en', name: 'English', file: 'en.json' }],
   },
 })

From 01c20a7fed6d0e3f244e07d94270f8149e7d75b9 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Tue, 27 Jan 2026 17:46:05 +0800
Subject: [PATCH 03/13] feat: show license on package card (#159)

---
 app/components/PackageCard.vue | 4 ++++
 shared/types/npm-registry.ts   | 1 +
 2 files changed, 5 insertions(+)

diff --git a/app/components/PackageCard.vue b/app/components/PackageCard.vue
index 5d6945d147..6a3f44342b 100644
--- a/app/components/PackageCard.vue
+++ b/app/components/PackageCard.vue
@@ -84,6 +84,10 @@ const emit = defineEmits<{
                 />
               </dd>
             </div>
+            <div v-if="result.package.license" class="flex items-center gap-1.5">
+              <dt class="sr-only">License</dt>
+              <dd>{{ result.package.license }}</dd>
+            </div>
           </dl>
         </div>
         <!-- Mobile: downloads on separate row -->
diff --git a/shared/types/npm-registry.ts b/shared/types/npm-registry.ts
index 9b38370281..fd6715df51 100644
--- a/shared/types/npm-registry.ts
+++ b/shared/types/npm-registry.ts
@@ -147,6 +147,7 @@ export interface NpmSearchPackage {
   author?: NpmPerson
   publisher?: NpmSearchPublisher
   maintainers?: NpmPerson[]
+  license?: string
 }
 
 export interface NpmSearchScore {

From 2cb4014d3f5dec61ec5b191de29fd607de139daa Mon Sep 17 00:00:00 2001
From: Vida Xie <vida_2020@163.com>
Date: Tue, 27 Jan 2026 17:47:08 +0800
Subject: [PATCH 04/13] fix: make 'other versions' list expand correctly (#156)

---
 app/components/PackageVersions.vue | 33 ++++++++++++++++++------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/components/PackageVersions.vue b/app/components/PackageVersions.vue
index afdbe961c9..9494041e32 100644
--- a/app/components/PackageVersions.vue
+++ b/app/components/PackageVersions.vue
@@ -120,9 +120,8 @@ const tagVersions = ref<Map<string, VersionDisplay[]>>(new Map())
 const loadingTags = ref<Set<string>>(new Set())
 
 const otherVersionsExpanded = shallowRef(false)
-const otherMajorGroups = shallowRef<
-  Array<{ major: number; versions: VersionDisplay[]; expanded: boolean }>
->([])
+const expandedMajorGroups = ref<Set<number>>(new Set())
+const otherMajorGroups = shallowRef<Array<{ major: number; versions: VersionDisplay[] }>>([])
 const otherVersionsLoading = shallowRef(false)
 
 // Cached full version list (local to component instance)
@@ -222,8 +221,8 @@ function processLoadedVersions(allVersions: PackageVersionInfo[]) {
   otherMajorGroups.value = sortedMajors.map(major => ({
     major,
     versions: byMajor.get(major)!,
-    expanded: false,
   }))
+  expandedMajorGroups.value.clear()
 }
 
 // Expand a tag row
@@ -277,10 +276,11 @@ async function expandOtherVersions() {
 }
 
 // Toggle a major group
-function toggleMajorGroup(index: number) {
-  const group = otherMajorGroups.value[index]
-  if (group) {
-    group.expanded = !group.expanded
+function toggleMajorGroup(major: number) {
+  if (expandedMajorGroups.value.has(major)) {
+    expandedMajorGroups.value.delete(major)
+  } else {
+    expandedMajorGroups.value.add(major)
   }
 }
 
@@ -497,20 +497,24 @@ function getTagVersions(tag: string): VersionDisplay[] {
 
           <!-- Major version groups (untagged versions) -->
           <template v-if="otherMajorGroups.length > 0">
-            <div v-for="(group, groupIndex) in otherMajorGroups" :key="group.major">
+            <div v-for="group in otherMajorGroups" :key="group.major">
               <!-- Major group header -->
               <button
                 v-if="group.versions.length > 1"
                 type="button"
                 class="w-full text-left py-1"
-                :aria-expanded="group.expanded"
+                :aria-expanded="expandedMajorGroups.has(group.major)"
                 :title="group.versions[0]?.version"
-                @click="toggleMajorGroup(groupIndex)"
+                @click="toggleMajorGroup(group.major)"
               >
                 <div class="flex items-center gap-2">
                   <span
                     class="w-3 h-3 transition-transform duration-200 text-fg-subtle"
-                    :class="group.expanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
+                    :class="
+                      expandedMajorGroups.has(group.major)
+                        ? 'i-carbon-chevron-down'
+                        : 'i-carbon-chevron-right'
+                    "
                   />
                   <span
                     class="font-mono text-xs truncate"
@@ -567,7 +571,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
               </div>
 
               <!-- Major group versions -->
-              <div v-if="group.expanded && group.versions.length > 1" class="ml-5 space-y-0.5">
+              <div
+                v-if="expandedMajorGroups.has(group.major) && group.versions.length > 1"
+                class="ml-5 space-y-0.5"
+              >
                 <div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
                   <div class="flex items-center justify-between gap-2">
                     <NuxtLink

From 5e19e462b58231b2c225745ba30019efc8e16340 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 09:54:34 +0000
Subject: [PATCH 05/13] test: add component tests for `<PackageVersions>`

related to https://github.com/npmx-dev/npmx.dev/pull/156
---
 test/nuxt/components/PackageVersions.spec.ts | 824 +++++++++++++++++++
 1 file changed, 824 insertions(+)
 create mode 100644 test/nuxt/components/PackageVersions.spec.ts

diff --git a/test/nuxt/components/PackageVersions.spec.ts b/test/nuxt/components/PackageVersions.spec.ts
new file mode 100644
index 0000000000..d1bd5ffb7d
--- /dev/null
+++ b/test/nuxt/components/PackageVersions.spec.ts
@@ -0,0 +1,824 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import PackageVersions from '~/components/PackageVersions.vue'
+import type { PackumentVersion } from '#shared/types'
+
+// Mock the fetchAllPackageVersions function
+const mockFetchAllPackageVersions = vi.fn()
+vi.mock('~/composables/useNpmRegistry', () => ({
+  fetchAllPackageVersions: (...args: unknown[]) => mockFetchAllPackageVersions(...args),
+}))
+
+/**
+ * Helper to create a minimal PackumentVersion for testing
+ */
+function createVersion(
+  version: string,
+  options: {
+    deprecated?: string
+    hasProvenance?: boolean
+  } = {},
+): PackumentVersion {
+  const dist: Record<string, unknown> = {
+    tarball: `https://registry.npmjs.org/test-package/-/test-package-${version}.tgz`,
+    shasum: 'abc123',
+  }
+  if (options.hasProvenance) {
+    dist.attestations = { url: 'https://example.com', provenance: { predicateType: 'test' } }
+  }
+  return {
+    _id: `test-package@${version}`,
+    _npmVersion: '10.0.0',
+    name: 'test-package',
+    version,
+    dist,
+    deprecated: options.deprecated,
+  } as unknown as PackumentVersion
+}
+
+describe('PackageVersions', () => {
+  beforeEach(() => {
+    mockFetchAllPackageVersions.mockReset()
+  })
+
+  describe('basic rendering', () => {
+    it('renders the Versions heading', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      expect(component.find('#versions-heading').text()).toBe('Versions')
+    })
+
+    it('does not render when there are no dist-tags', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {},
+          distTags: {},
+          time: {},
+        },
+      })
+
+      expect(component.find('section').exists()).toBe(false)
+    })
+
+    it('renders version links with correct routes', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '2.0.0': createVersion('2.0.0'),
+          },
+          distTags: { latest: '2.0.0' },
+          time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const link = component.find('a')
+      expect(link.exists()).toBe(true)
+      expect(link.text()).toBe('2.0.0')
+    })
+
+    it('renders scoped package version links correctly', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: '@scope/test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const link = component.find('a')
+      expect(link.exists()).toBe(true)
+      expect(link.text()).toBe('1.0.0')
+    })
+  })
+
+  describe('dist-tag display', () => {
+    it('displays dist-tag labels below version', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      expect(component.text()).toContain('latest')
+    })
+
+    it('displays multiple tags for same version', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: {
+            latest: '1.0.0',
+            stable: '1.0.0',
+          },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const text = component.text()
+      expect(text).toContain('latest')
+      expect(text).toContain('stable')
+    })
+
+    it('shows "latest" tag first when multiple tags exist', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: {
+            alpha: '1.0.0',
+            latest: '1.0.0',
+            beta: '1.0.0',
+          },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Find all tag spans
+      const tagSpans = component.findAll('span').filter(span => {
+        const text = span.text()
+        return text === 'latest' || text === 'alpha' || text === 'beta'
+      })
+
+      expect(tagSpans.length).toBeGreaterThanOrEqual(3)
+      // latest should be first
+      expect(tagSpans[0]?.text()).toBe('latest')
+    })
+
+    it('sorts tag rows by version descending', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+            '2.0.0': createVersion('2.0.0'),
+            '1.5.0': createVersion('1.5.0'),
+          },
+          distTags: {
+            old: '1.0.0',
+            latest: '2.0.0',
+            stable: '1.5.0',
+          },
+          time: {
+            '1.0.0': '2024-01-01T00:00:00.000Z',
+            '1.5.0': '2024-01-10T00:00:00.000Z',
+            '2.0.0': '2024-01-15T00:00:00.000Z',
+          },
+        },
+      })
+
+      const links = component.findAll('a')
+      const versions = links.map(l => l.text())
+      // Should be sorted by version descending
+      expect(versions[0]).toBe('2.0.0')
+    })
+  })
+
+  describe('deprecated versions', () => {
+    it('applies deprecated styling to deprecated versions', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0', { deprecated: 'Use 2.0.0 instead' }),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const link = component.find('a')
+      expect(link.classes()).toContain('text-red-400')
+    })
+
+    it('shows deprecated version in title attribute', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0', { deprecated: 'Use 2.0.0 instead' }),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const link = component.find('a')
+      expect(link.attributes('title')).toContain('deprecated')
+    })
+
+    it('filters deprecated tags from visible list when package is not deprecated', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0', { deprecated: 'Old version' }),
+            '2.0.0': createVersion('2.0.0'),
+          },
+          distTags: {
+            old: '1.0.0',
+            latest: '2.0.0',
+          },
+          time: {
+            '1.0.0': '2024-01-01T00:00:00.000Z',
+            '2.0.0': '2024-01-15T00:00:00.000Z',
+          },
+        },
+      })
+
+      // The deprecated version should not appear in visible tags (only in "Other versions")
+      const visibleLinks = component.findAll('a').filter(l => l.text() === '1.0.0')
+      expect(visibleLinks.length).toBe(0)
+    })
+  })
+
+  describe('provenance badge', () => {
+    it('shows provenance badge for versions with attestations', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0', { hasProvenance: true }),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // ProvenanceBadge component should be rendered
+      const provenanceBadge = component.findComponent({ name: 'ProvenanceBadge' })
+      expect(provenanceBadge.exists()).toBe(true)
+    })
+
+    it('does not show provenance badge for versions without attestations', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0', { hasProvenance: false }),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const provenanceBadge = component.findComponent({ name: 'ProvenanceBadge' })
+      expect(provenanceBadge.exists()).toBe(false)
+    })
+  })
+
+  describe('datetime display', () => {
+    it('shows DateTime component for versions with time', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const dateTime = component.findComponent({ name: 'DateTime' })
+      expect(dateTime.exists()).toBe(true)
+    })
+  })
+
+  describe('expand/collapse tag rows', () => {
+    it('shows expand button for tag rows', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const expandButton = component.find('button[aria-expanded]')
+      expect(expandButton.exists()).toBe(true)
+      expect(expandButton.attributes('aria-expanded')).toBe('false')
+    })
+
+    it('has correct aria-label on expand button', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const expandButton = component.find('button[aria-expanded="false"]')
+      expect(expandButton.attributes('aria-label')).toBe('Expand latest')
+    })
+
+    it('loads versions and toggles expanded state on click', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '1.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+        { version: '0.9.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const expandButton = component.find('button[aria-expanded="false"]')
+      await expandButton.trigger('click')
+
+      // Wait for async operation
+      await vi.waitFor(() => {
+        expect(mockFetchAllPackageVersions).toHaveBeenCalledWith('test-package')
+      })
+    })
+
+    it('collapses when clicking expanded row', async () => {
+      // Return multiple versions so the expand button stays visible after loading
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '1.2.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+        { version: '1.1.0', time: '2024-01-12T12:00:00.000Z', hasProvenance: false },
+        { version: '1.0.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.2.0': createVersion('1.2.0'),
+          },
+          distTags: { latest: '1.2.0' },
+          time: { '1.2.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Get initial expand button
+      const expandButton = component.find('button[aria-expanded]')
+      expect(expandButton.exists()).toBe(true)
+
+      // Expand
+      await expandButton.trigger('click')
+
+      // Wait for versions to load and expansion to happen
+      await vi.waitFor(() => {
+        expect(mockFetchAllPackageVersions).toHaveBeenCalled()
+      })
+
+      // Wait for the component to update after loading
+      await vi.waitFor(
+        () => {
+          const btn = component.find('button[aria-expanded="true"]')
+          expect(btn.exists()).toBe(true)
+        },
+        { timeout: 2000 },
+      )
+
+      // Now collapse by clicking again
+      const expandedButton = component.find('button[aria-expanded="true"]')
+      await expandedButton.trigger('click')
+
+      await vi.waitFor(
+        () => {
+          const btn = component.find('button[aria-expanded="false"]')
+          expect(btn.exists()).toBe(true)
+        },
+        { timeout: 2000 },
+      )
+    })
+  })
+
+  describe('other versions section', () => {
+    it('renders "Other versions" button', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      expect(component.text()).toContain('Other versions')
+    })
+
+    it('shows count of hidden tagged versions', async () => {
+      // Create more than MAX_VISIBLE_TAGS (10) dist-tags
+      const versions: Record<string, PackumentVersion> = {}
+      const distTags: Record<string, string> = {}
+      const time: Record<string, string> = {}
+
+      for (let i = 0; i < 12; i++) {
+        const version = `1.${i}.0`
+        versions[version] = createVersion(version)
+        distTags[`tag-${i}`] = version
+        time[version] = `2024-01-${String(i + 1).padStart(2, '0')}T12:00:00.000Z`
+      }
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions,
+          distTags,
+          time,
+        },
+      })
+
+      // Should show "(2 more tagged)" for the overflow
+      expect(component.text()).toContain('more tagged')
+    })
+
+    it('expands other versions section on click', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '1.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+        { version: '0.5.0', time: '2024-01-01T12:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Find the "Other versions" button
+      const otherVersionsButton = component
+        .findAll('button')
+        .find(btn => btn.text().includes('Other versions'))
+
+      expect(otherVersionsButton?.exists()).toBe(true)
+      await otherVersionsButton!.trigger('click')
+
+      // Should call fetchAllPackageVersions
+      await vi.waitFor(() => {
+        expect(mockFetchAllPackageVersions).toHaveBeenCalledWith('test-package')
+      })
+    })
+
+    it('collapses other versions section when clicking again', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '1.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const otherVersionsButton = component
+        .findAll('button')
+        .find(btn => btn.text().includes('Other versions'))
+
+      // Expand
+      await otherVersionsButton!.trigger('click')
+      await vi.waitFor(() => {
+        expect(otherVersionsButton!.attributes('aria-expanded')).toBe('true')
+      })
+
+      // Collapse
+      await otherVersionsButton!.trigger('click')
+      await vi.waitFor(() => {
+        expect(otherVersionsButton!.attributes('aria-expanded')).toBe('false')
+      })
+    })
+  })
+
+  describe('MAX_VISIBLE_TAGS limit', () => {
+    it('limits visible tag rows to 10', async () => {
+      // Create 15 dist-tags
+      const versions: Record<string, PackumentVersion> = {}
+      const distTags: Record<string, string> = {}
+      const time: Record<string, string> = {}
+
+      for (let i = 0; i < 15; i++) {
+        const version = `${i + 1}.0.0`
+        versions[version] = createVersion(version)
+        distTags[`tag-${i}`] = version
+        time[version] = `2024-01-${String(i + 1).padStart(2, '0')}T12:00:00.000Z`
+      }
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions,
+          distTags,
+          time,
+        },
+      })
+
+      // Count visible version links (excluding "Other versions" section)
+      // The first set of links before the "Other versions" button
+      const visibleLinks = component.findAll('a')
+      // Should have max 10 visible links in the main section
+      expect(visibleLinks.length).toBeLessThanOrEqual(10)
+    })
+  })
+
+  describe('major version groups', () => {
+    it('groups unclaimed versions by major version in other versions', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '2.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+        { version: '1.1.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
+        { version: '1.0.0', time: '2024-01-05T12:00:00.000Z', hasProvenance: false },
+        { version: '0.9.0', time: '2024-01-01T12:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '2.0.0': createVersion('2.0.0'),
+          },
+          distTags: { latest: '2.0.0' },
+          time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Expand "Other versions"
+      const otherVersionsButton = component
+        .findAll('button')
+        .find(btn => btn.text().includes('Other versions'))
+
+      await otherVersionsButton!.trigger('click')
+
+      await vi.waitFor(() => {
+        // Major groups should be created for unclaimed versions
+        expect(mockFetchAllPackageVersions).toHaveBeenCalled()
+      })
+    })
+
+    it('allows expanding major version groups', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '2.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+        { version: '1.1.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
+        { version: '1.0.0', time: '2024-01-05T12:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '2.0.0': createVersion('2.0.0'),
+          },
+          distTags: { latest: '2.0.0' },
+          time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Expand "Other versions"
+      const otherVersionsButton = component
+        .findAll('button')
+        .find(btn => btn.text().includes('Other versions'))
+
+      await otherVersionsButton!.trigger('click')
+
+      // Wait for data to load and verify versions are shown
+      await vi.waitFor(() => {
+        const text = component.text()
+        expect(text.includes('1.1.0') || component.findAll('button').length > 2).toBe(true)
+      })
+    })
+  })
+
+  describe('loading states', () => {
+    it('shows loading spinner when fetching versions', async () => {
+      // Create a promise that won't resolve immediately
+      let resolvePromise: (value: unknown[]) => void
+      const loadingPromise = new Promise<unknown[]>(resolve => {
+        resolvePromise = resolve
+      })
+      mockFetchAllPackageVersions.mockReturnValue(loadingPromise)
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Click expand
+      const expandButton = component.find('button[aria-expanded]')
+      await expandButton.trigger('click')
+
+      // Should show loading spinner (animate-spin class)
+      await vi.waitFor(() => {
+        expect(component.find('.animate-spin').exists()).toBe(true)
+      })
+
+      // Resolve the promise to clean up
+      resolvePromise!([])
+    })
+
+    it('shows loading spinner for other versions when fetching', async () => {
+      let resolvePromise: (value: unknown[]) => void
+      const loadingPromise = new Promise<unknown[]>(resolve => {
+        resolvePromise = resolve
+      })
+      mockFetchAllPackageVersions.mockReturnValue(loadingPromise)
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Click "Other versions"
+      const otherVersionsButton = component
+        .findAll('button')
+        .find(btn => btn.text().includes('Other versions'))
+
+      await otherVersionsButton!.trigger('click')
+
+      // Should show loading spinner
+      await vi.waitFor(() => {
+        expect(component.find('.animate-spin').exists()).toBe(true)
+      })
+
+      // Resolve the promise to clean up
+      resolvePromise!([])
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has accessible section with labelledby', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const section = component.find('section')
+      expect(section.attributes('aria-labelledby')).toBe('versions-heading')
+    })
+
+    it('expand buttons have aria-expanded attribute', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const expandButtons = component.findAll('button[aria-expanded]')
+      expect(expandButtons.length).toBeGreaterThan(0)
+      for (const button of expandButtons) {
+        expect(['true', 'false']).toContain(button.attributes('aria-expanded'))
+      }
+    })
+
+    it('expand buttons have aria-label attribute', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const expandButton = component.find('button[aria-label]')
+      expect(expandButton.exists()).toBe(true)
+      expect(expandButton.attributes('aria-label')).toMatch(/Expand|Collapse/)
+    })
+  })
+
+  describe('error handling', () => {
+    it('handles fetch errors gracefully', async () => {
+      mockFetchAllPackageVersions.mockRejectedValue(new Error('Network error'))
+
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Click expand
+      const expandButton = component.find('button[aria-expanded]')
+      await expandButton.trigger('click')
+
+      // Wait for error to be logged
+      await vi.waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith('Failed to load versions:', expect.any(Error))
+      })
+
+      consoleSpy.mockRestore()
+    })
+  })
+
+  describe('caching behavior', () => {
+    it('only fetches versions once when expanding multiple tags', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '2.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+        { version: '1.0.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '2.0.0': createVersion('2.0.0'),
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: {
+            latest: '2.0.0',
+            stable: '1.0.0',
+          },
+          time: {
+            '2.0.0': '2024-01-15T12:00:00.000Z',
+            '1.0.0': '2024-01-10T12:00:00.000Z',
+          },
+        },
+      })
+
+      // Expand first tag row
+      const expandButtons = component.findAll('button[aria-expanded="false"]')
+      await expandButtons[0]?.trigger('click')
+
+      await vi.waitFor(() => {
+        expect(mockFetchAllPackageVersions).toHaveBeenCalledTimes(1)
+      })
+
+      // Expand second tag row - should not fetch again
+      const updatedButtons = component.findAll('button[aria-expanded="false"]')
+      if (updatedButtons[0]) {
+        await updatedButtons[0].trigger('click')
+      }
+
+      // Should still only have been called once
+      expect(mockFetchAllPackageVersions).toHaveBeenCalledTimes(1)
+    })
+  })
+})

From 26eb59e31049333dcb61b12514ea4dd98f448931 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Tue, 27 Jan 2026 05:55:54 -0500
Subject: [PATCH 06/13] feat: add user, orgs, and packages to nav (#98)

---
 app/components/AppHeader.vue                  |  76 +++---
 app/components/ConnectorStatus.client.vue     |  18 +-
 app/components/HeaderOrgsDropdown.vue         | 120 +++++++++
 app/components/HeaderPackagesDropdown.vue     | 120 +++++++++
 app/composables/useConnector.ts               |  15 ++
 .../index.vue}                                |   0
 app/pages/~[username]/orgs.vue                | 227 ++++++++++++++++++
 cli/src/npm-client.ts                         |  10 +
 cli/src/server.ts                             | 113 ++++++++-
 server/api/registry/org/[org]/packages.get.ts |  54 +++++
 test/unit/cli-server.spec.ts                  |  44 ++++
 11 files changed, 760 insertions(+), 37 deletions(-)
 create mode 100644 app/components/HeaderOrgsDropdown.vue
 create mode 100644 app/components/HeaderPackagesDropdown.vue
 rename app/pages/{~[username].vue => ~[username]/index.vue} (100%)
 create mode 100644 app/pages/~[username]/orgs.vue
 create mode 100644 server/api/registry/org/[org]/packages.get.ts

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 6731c8443b..69ddca8c1a 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -9,23 +9,29 @@ withDefaults(
     showConnector: true,
   },
 )
+
+const { isConnected, npmUser } = useConnector()
 </script>
 
 <template>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
-    <nav aria-label="Main navigation" class="container h-14 flex items-center justify-between">
-      <NuxtLink
-        v-if="showLogo"
-        to="/"
-        aria-label="npmx home"
-        class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
-      >
-        <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
-      </NuxtLink>
-      <!-- Spacer when logo is hidden -->
-      <span v-else class="w-1" />
+    <nav aria-label="Main navigation" class="container h-14 flex items-center">
+      <!-- Left: Logo -->
+      <div class="flex-shrink-0">
+        <NuxtLink
+          v-if="showLogo"
+          to="/"
+          aria-label="npmx home"
+          class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+        >
+          <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
+        </NuxtLink>
+        <!-- Spacer when logo is hidden -->
+        <span v-else class="w-1" />
+      </div>
 
-      <ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
+      <!-- Center: Main nav items -->
+      <ul class="flex-1 flex items-center justify-center gap-4 sm:gap-6 list-none m-0 p-0">
         <li class="flex items-center">
           <NuxtLink
             to="/search"
@@ -41,26 +47,38 @@ withDefaults(
             </kbd>
           </NuxtLink>
         </li>
-        <li class="flex items-center">
-          <ClientOnly>
-            <SettingsMenu />
-          </ClientOnly>
-        </li>
-        <li v-if="showConnector" class="flex items-center">
-          <ConnectorStatus />
+
+        <!-- Packages dropdown (when connected) -->
+        <li v-if="isConnected && npmUser" class="flex items-center">
+          <HeaderPackagesDropdown :username="npmUser" />
         </li>
-        <li v-else class="flex items-center">
-          <a
-            href="https://github.com/npmx-dev/npmx.dev"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-            aria-label="GitHub"
-          >
-            <span class="i-carbon-logo-github w-4 h-4" aria-hidden="true" />
-            <span class="hidden sm:inline" aria-hidden="true">github</span>
-          </a>
+
+        <!-- Orgs dropdown (when connected) -->
+        <li v-if="isConnected && npmUser" class="flex items-center">
+          <HeaderOrgsDropdown :username="npmUser" />
         </li>
       </ul>
+
+      <!-- Right: User status + GitHub -->
+      <div class="flex-shrink-0 flex items-center gap-6">
+        <ClientOnly>
+          <SettingsMenu />
+        </ClientOnly>
+
+        <div v-if="showConnector">
+          <ConnectorStatus />
+        </div>
+
+        <a
+          href="https://github.com/npmx-dev/npmx.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="link-subtle"
+          aria-label="GitHub repository"
+        >
+          <span class="i-carbon-logo-github w-5 h-5" aria-hidden="true" />
+        </a>
+      </div>
     </nav>
   </header>
 </template>
diff --git a/app/components/ConnectorStatus.client.vue b/app/components/ConnectorStatus.client.vue
index 4eb4f212cf..df2141be04 100644
--- a/app/components/ConnectorStatus.client.vue
+++ b/app/components/ConnectorStatus.client.vue
@@ -12,9 +12,8 @@ const {
 const showModal = shallowRef(false)
 const showTooltip = shallowRef(false)
 
-const statusText = computed(() => {
+const tooltipText = computed(() => {
   if (isConnecting.value) return 'connecting…'
-  if (isConnected.value && npmUser.value) return `connected as @${npmUser.value}`
   if (isConnected.value) return 'connected'
   return 'connect local CLI'
 })
@@ -37,7 +36,16 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <div class="relative">
+  <div class="relative flex items-center gap-2">
+    <!-- Username link (when connected) -->
+    <NuxtLink
+      v-if="isConnected && npmUser"
+      :to="`/~${npmUser}`"
+      class="link-subtle font-mono text-sm hidden sm:inline"
+    >
+      @{{ npmUser }}
+    </NuxtLink>
+
     <button
       type="button"
       class="relative flex items-center justify-center w-8 h-8 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
@@ -53,6 +61,8 @@ const ariaLabel = computed(() => {
         v-if="isConnected && avatar"
         :src="avatar"
         :alt="`${npmUser}'s avatar`"
+        width="24"
+        height="24"
         class="w-6 h-6 rounded-full"
       />
       <!-- Status dot (when not connected or no avatar) -->
@@ -85,7 +95,7 @@ const ariaLabel = computed(() => {
         role="tooltip"
         class="absolute right-0 top-full mt-2 px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-50"
       >
-        {{ statusText }}
+        {{ tooltipText }}
       </div>
     </Transition>
 
diff --git a/app/components/HeaderOrgsDropdown.vue b/app/components/HeaderOrgsDropdown.vue
new file mode 100644
index 0000000000..4e17eb2a97
--- /dev/null
+++ b/app/components/HeaderOrgsDropdown.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+const props = defineProps<{
+  username: string
+}>()
+
+const { listUserOrgs } = useConnector()
+
+const isOpen = ref(false)
+const isLoading = ref(false)
+const orgs = ref<string[]>([])
+const hasLoaded = ref(false)
+const error = ref<string | null>(null)
+
+async function loadOrgs() {
+  if (hasLoaded.value || isLoading.value) return
+
+  isLoading.value = true
+  error.value = null
+  try {
+    const orgList = await listUserOrgs()
+    if (orgList) {
+      // Already sorted alphabetically by server, take top 10
+      orgs.value = orgList.slice(0, 10)
+    } else {
+      error.value = 'Failed to load organizations'
+    }
+    hasLoaded.value = true
+  } catch {
+    error.value = 'Failed to load organizations'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function handleMouseEnter() {
+  isOpen.value = true
+  if (!hasLoaded.value) {
+    loadOrgs()
+  }
+}
+
+function handleMouseLeave() {
+  isOpen.value = false
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isOpen.value) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    class="relative"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @keydown="handleKeydown"
+  >
+    <NuxtLink
+      :to="`/~${username}/orgs`"
+      class="link-subtle font-mono text-sm inline-flex items-center gap-1"
+    >
+      orgs
+      <span
+        class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
+        :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
+      />
+    </NuxtLink>
+
+    <Transition
+      enter-active-class="transition-all duration-150"
+      leave-active-class="transition-all duration-100"
+      enter-from-class="opacity-0 translate-y-1"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-56 z-50">
+        <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
+          <div class="px-3 py-2 border-b border-border">
+            <span class="font-mono text-xs text-fg-subtle">Your Organizations</span>
+          </div>
+
+          <div v-if="isLoading" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">Loading…</span>
+          </div>
+
+          <div v-else-if="error" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">{{ error }}</span>
+          </div>
+
+          <ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
+            <li v-for="org in orgs" :key="org">
+              <NuxtLink
+                :to="`/@${org}`"
+                class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors"
+              >
+                @{{ org }}
+              </NuxtLink>
+            </li>
+          </ul>
+
+          <div v-else class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">No organizations found</span>
+          </div>
+
+          <div class="px-3 py-2 border-t border-border">
+            <NuxtLink
+              :to="`/~${username}/orgs`"
+              class="link-subtle font-mono text-xs inline-flex items-center gap-1"
+            >
+              View all
+              <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/app/components/HeaderPackagesDropdown.vue b/app/components/HeaderPackagesDropdown.vue
new file mode 100644
index 0000000000..d568614f24
--- /dev/null
+++ b/app/components/HeaderPackagesDropdown.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+const props = defineProps<{
+  username: string
+}>()
+
+const { listUserPackages } = useConnector()
+
+const isOpen = ref(false)
+const isLoading = ref(false)
+const packages = ref<string[]>([])
+const hasLoaded = ref(false)
+const error = ref<string | null>(null)
+
+async function loadPackages() {
+  if (hasLoaded.value || isLoading.value) return
+
+  isLoading.value = true
+  error.value = null
+  try {
+    const pkgMap = await listUserPackages()
+    if (pkgMap) {
+      // Sort alphabetically and take top 10
+      packages.value = Object.keys(pkgMap).sort().slice(0, 10)
+    } else {
+      error.value = 'Failed to load packages'
+    }
+    hasLoaded.value = true
+  } catch {
+    error.value = 'Failed to load packages'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function handleMouseEnter() {
+  isOpen.value = true
+  if (!hasLoaded.value) {
+    loadPackages()
+  }
+}
+
+function handleMouseLeave() {
+  isOpen.value = false
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isOpen.value) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    class="relative"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @keydown="handleKeydown"
+  >
+    <NuxtLink
+      :to="`/~${username}`"
+      class="link-subtle font-mono text-sm inline-flex items-center gap-1"
+    >
+      packages
+      <span
+        class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
+        :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
+      />
+    </NuxtLink>
+
+    <Transition
+      enter-active-class="transition-all duration-150"
+      leave-active-class="transition-all duration-100"
+      enter-from-class="opacity-0 translate-y-1"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-64 z-50">
+        <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
+          <div class="px-3 py-2 border-b border-border">
+            <span class="font-mono text-xs text-fg-subtle">Your Packages</span>
+          </div>
+
+          <div v-if="isLoading" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">Loading…</span>
+          </div>
+
+          <div v-else-if="error" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">{{ error }}</span>
+          </div>
+
+          <ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
+            <li v-for="pkg in packages" :key="pkg">
+              <NuxtLink
+                :to="`/${pkg}`"
+                class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
+              >
+                {{ pkg }}
+              </NuxtLink>
+            </li>
+          </ul>
+
+          <div v-else class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">No packages found</span>
+          </div>
+
+          <div class="px-3 py-2 border-t border-border">
+            <NuxtLink
+              :to="`/~${username}`"
+              class="link-subtle font-mono text-xs inline-flex items-center gap-1"
+            >
+              View all
+              <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/app/composables/useConnector.ts b/app/composables/useConnector.ts
index 1e5dcfc593..f23ba9bebf 100644
--- a/app/composables/useConnector.ts
+++ b/app/composables/useConnector.ts
@@ -350,6 +350,19 @@ export const useConnector = createSharedComposable(function useConnector() {
     return response?.success ? (response.data ?? null) : null
   }
 
+  async function listUserPackages(): Promise<Record<string, 'read-write' | 'read-only'> | null> {
+    const response =
+      await connectorFetch<ApiResponse<Record<string, 'read-write' | 'read-only'>>>(
+        '/user/packages',
+      )
+    return response?.success ? (response.data ?? null) : null
+  }
+
+  async function listUserOrgs(): Promise<string[] | null> {
+    const response = await connectorFetch<ApiResponse<string[]>>('/user/orgs')
+    return response?.success ? (response.data ?? null) : null
+  }
+
   // Computed helpers for operations
   const pendingOperations = computed(() =>
     state.value.operations.filter(op => op.status === 'pending'),
@@ -427,6 +440,8 @@ export const useConnector = createSharedComposable(function useConnector() {
     listOrgTeams,
     listTeamUsers,
     listPackageCollaborators,
+    listUserPackages,
+    listUserOrgs,
   }
 })
 
diff --git a/app/pages/~[username].vue b/app/pages/~[username]/index.vue
similarity index 100%
rename from app/pages/~[username].vue
rename to app/pages/~[username]/index.vue
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
new file mode 100644
index 0000000000..9fc35b0ceb
--- /dev/null
+++ b/app/pages/~[username]/orgs.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+const route = useRoute('~username-orgs')
+
+const username = computed(() => route.params.username)
+
+const { isConnected, npmUser, listUserOrgs, listOrgUsers } = useConnector()
+
+// Only allow viewing your own orgs page
+const isOwnProfile = computed(() => {
+  return isConnected.value && npmUser.value?.toLowerCase() === username.value.toLowerCase()
+})
+
+interface OrgInfo {
+  name: string
+  role: 'developer' | 'admin' | 'owner' | null
+  packageCount: number | null
+  isLoadingDetails: boolean
+}
+
+const isLoading = ref(true)
+const orgs = ref<OrgInfo[]>([])
+const error = ref<string | null>(null)
+
+async function loadOrgDetails(org: OrgInfo) {
+  org.isLoadingDetails = true
+
+  // Fetch package count using our server API (proxies to npm registry)
+  try {
+    const response = await $fetch<{ count: number }>(
+      `/api/registry/org/${encodeURIComponent(org.name)}/packages`,
+      { timeout: 5000 },
+    )
+    org.packageCount = response.count
+  } catch {
+    org.packageCount = null
+  }
+
+  // Fetch user's role in this org
+  try {
+    const users = await listOrgUsers(org.name)
+    if (users && npmUser.value) {
+      const lowerUser = npmUser.value.toLowerCase()
+      const entry = Object.entries(users).find(([k]) => k.toLowerCase() === lowerUser)
+      org.role = entry?.[1] ?? null
+    }
+  } catch {
+    org.role = null
+  }
+
+  org.isLoadingDetails = false
+}
+
+async function loadOrgs() {
+  if (!isOwnProfile.value) {
+    isLoading.value = false
+    return
+  }
+
+  isLoading.value = true
+  error.value = null
+
+  try {
+    const orgList = await listUserOrgs()
+    if (orgList) {
+      orgs.value = orgList.map(name => ({
+        name,
+        role: null,
+        packageCount: null,
+        isLoadingDetails: true,
+      }))
+
+      // Load details for each org in parallel
+      await Promise.all(orgs.value.map(org => loadOrgDetails(org)))
+    } else {
+      error.value = 'Failed to load organizations'
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to load organizations'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Load on mount and when connection status changes
+watch(isOwnProfile, loadOrgs, { immediate: true })
+
+function getRoleBadgeClass(role: string | null): string {
+  switch (role) {
+    case 'owner':
+      return 'bg-purple-500/20 text-purple-300'
+    case 'admin':
+      return 'bg-blue-500/20 text-blue-300'
+    case 'developer':
+      return 'bg-green-500/20 text-green-300'
+    default:
+      return 'bg-fg-subtle/20 text-fg-muted'
+  }
+}
+
+useSeoMeta({
+  title: () => `@${username.value} Organizations - npmx`,
+  description: () => `npm organizations for ${username.value}`,
+})
+</script>
+
+<template>
+  <main class="container py-8 sm:py-12 w-full">
+    <!-- Header -->
+    <header class="mb-8 pb-8 border-b border-border">
+      <div class="flex items-center gap-4 mb-4">
+        <!-- Avatar placeholder -->
+        <div
+          class="w-16 h-16 rounded-full bg-bg-muted border border-border flex items-center justify-center"
+          aria-hidden="true"
+        >
+          <span class="text-2xl text-fg-subtle font-mono">{{
+            username.charAt(0).toUpperCase()
+          }}</span>
+        </div>
+        <div>
+          <h1 class="font-mono text-2xl sm:text-3xl font-medium">@{{ username }}</h1>
+          <p class="text-fg-muted text-sm mt-1">Organizations</p>
+        </div>
+      </div>
+
+      <!-- Back link -->
+      <nav aria-label="Navigation">
+        <NuxtLink
+          :to="`/~${username}`"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+        >
+          <span class="i-carbon-arrow-left w-4 h-4" aria-hidden="true" />
+          Back to profile
+        </NuxtLink>
+      </nav>
+    </header>
+
+    <!-- Not connected state -->
+    <ClientOnly>
+      <div v-if="!isConnected" class="py-12 text-center">
+        <p class="text-fg-muted mb-4">Connect the local CLI to view your organizations.</p>
+        <p class="text-fg-subtle text-sm">
+          Run <code class="font-mono bg-bg-subtle px-1.5 py-0.5 rounded">npx @npmx.dev/cli</code> to
+          get started.
+        </p>
+      </div>
+
+      <!-- Not own profile state -->
+      <div v-else-if="!isOwnProfile" class="py-12 text-center">
+        <p class="text-fg-muted">You can only view your own organizations.</p>
+        <NuxtLink :to="`/~${npmUser}/orgs`" class="btn mt-4">View your organizations</NuxtLink>
+      </div>
+
+      <!-- Loading state -->
+      <LoadingSpinner v-else-if="isLoading" text="Loading organizations..." />
+
+      <!-- Error state -->
+      <div v-else-if="error" role="alert" class="py-12 text-center">
+        <p class="text-fg-muted mb-4">{{ error }}</p>
+        <button type="button" class="btn" @click="loadOrgs">Try again</button>
+      </div>
+
+      <!-- Empty state -->
+      <div v-else-if="orgs.length === 0" class="py-12 text-center">
+        <p class="text-fg-muted">No organizations found.</p>
+        <p class="text-fg-subtle text-sm mt-2">
+          Organizations are detected from your scoped packages.
+        </p>
+      </div>
+
+      <!-- Orgs list -->
+      <section v-else aria-label="Organizations">
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
+          {{ orgs.length }} Organization{{ orgs.length === 1 ? '' : 's' }}
+        </h2>
+
+        <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <li v-for="org in orgs" :key="org.name">
+            <NuxtLink
+              :to="`/@${org.name}`"
+              class="block p-5 bg-bg-subtle border border-border rounded-lg hover:border-fg-subtle transition-colors h-full"
+            >
+              <div class="flex items-start gap-4 mb-4">
+                <!-- Org avatar -->
+                <div
+                  class="w-14 h-14 rounded-lg bg-bg-muted border border-border flex items-center justify-center flex-shrink-0"
+                  aria-hidden="true"
+                >
+                  <span class="text-2xl text-fg-subtle font-mono">{{
+                    org.name.charAt(0).toUpperCase()
+                  }}</span>
+                </div>
+                <div class="min-w-0 flex-1">
+                  <h3 class="font-mono text-lg text-fg truncate">@{{ org.name }}</h3>
+                  <!-- Role badge -->
+                  <span
+                    v-if="org.role"
+                    class="inline-block mt-1 px-2 py-0.5 text-xs font-mono rounded"
+                    :class="getRoleBadgeClass(org.role)"
+                  >
+                    {{ org.role }}
+                  </span>
+                  <span
+                    v-else-if="org.isLoadingDetails"
+                    class="skeleton inline-block mt-1 h-5 w-16 rounded"
+                  />
+                </div>
+              </div>
+
+              <!-- Stats -->
+              <div class="flex items-center gap-4 text-sm text-fg-muted">
+                <div class="flex items-center gap-1.5">
+                  <span class="i-carbon-cube w-4 h-4" aria-hidden="true" />
+                  <span v-if="org.packageCount !== null">
+                    {{ org.packageCount }} package{{ org.packageCount === 1 ? '' : 's' }}
+                  </span>
+                  <span v-else-if="org.isLoadingDetails" class="skeleton inline-block h-4 w-20" />
+                  <span v-else class="text-fg-subtle">—</span>
+                </div>
+              </div>
+            </NuxtLink>
+          </li>
+        </ul>
+      </section>
+    </ClientOnly>
+  </main>
+</template>
diff --git a/cli/src/npm-client.ts b/cli/src/npm-client.ts
index f0a22c4aba..85f7ee2164 100644
--- a/cli/src/npm-client.ts
+++ b/cli/src/npm-client.ts
@@ -313,6 +313,16 @@ export async function accessListCollaborators(pkg: string): Promise<NpmExecResul
   return execNpm(['access', 'list', 'collaborators', pkg, '--json'], { silent: true })
 }
 
+/**
+ * Lists all packages that a user has access to publish.
+ * Uses `npm access list packages @{user} --json`
+ * Returns a map of package name to permission level
+ */
+export async function listUserPackages(user: string): Promise<NpmExecResult> {
+  validateUsername(user)
+  return execNpm(['access', 'list', 'packages', `@${user}`, '--json'], { silent: true })
+}
+
 /**
  * Initialize and publish a new package to claim the name.
  * Creates a minimal package.json in a temp directory and publishes it.
diff --git a/cli/src/server.ts b/cli/src/server.ts
index 2ff477ec7c..c4dc1d42f4 100644
--- a/cli/src/server.ts
+++ b/cli/src/server.ts
@@ -23,6 +23,7 @@ import {
   ownerAdd,
   ownerRemove,
   packageInit,
+  listUserPackages,
   type NpmExecResult,
 } from './npm-client.ts'
 import {
@@ -234,7 +235,10 @@ export function createConnectorApp(expectedToken: string) {
     }
 
     if (operation.status !== 'pending') {
-      throw new HTTPError({ statusCode: 400, message: 'Operation is not pending' })
+      throw new HTTPError({
+        statusCode: 400,
+        message: 'Operation is not pending',
+      })
     }
 
     operation.status = 'approved'
@@ -282,7 +286,10 @@ export function createConnectorApp(expectedToken: string) {
     }
 
     if (operation.status !== 'failed') {
-      throw new HTTPError({ statusCode: 400, message: 'Only failed operations can be retried' })
+      throw new HTTPError({
+        statusCode: 400,
+        message: 'Only failed operations can be retried',
+      })
     }
 
     // Reset the operation for retry
@@ -337,7 +344,11 @@ export function createConnectorApp(expectedToken: string) {
         // Dependency failed - skip this one too
         if (failedIds.has(op.dependsOn)) {
           op.status = 'failed'
-          op.result = { stdout: '', stderr: 'Skipped: dependency failed', exitCode: 1 }
+          op.result = {
+            stdout: '',
+            stderr: 'Skipped: dependency failed',
+            exitCode: 1,
+          }
           failedIds.add(op.id)
           results.push({ id: op.id, result: op.result })
           return false
@@ -410,7 +421,10 @@ export function createConnectorApp(expectedToken: string) {
 
     const operation = state.operations[index]
     if (!operation || operation.status === 'running') {
-      throw new HTTPError({ statusCode: 400, message: 'Cannot cancel running operation' })
+      throw new HTTPError({
+        statusCode: 400,
+        message: 'Cannot cancel running operation',
+      })
     }
 
     state.operations.splice(index, 1)
@@ -590,6 +604,97 @@ export function createConnectorApp(expectedToken: string) {
     }
   })
 
+  // User-specific endpoints
+
+  app.get('/user/packages', async event => {
+    const auth = event.req.headers.get('authorization')
+    if (!validateToken(auth)) {
+      throw new HTTPError({ statusCode: 401, message: 'Unauthorized' })
+    }
+
+    const npmUser = state.session.npmUser
+    if (!npmUser) {
+      return {
+        success: false,
+        error: 'Not logged in to npm',
+      } as ApiResponse
+    }
+
+    const result = await listUserPackages(npmUser)
+    if (result.exitCode !== 0) {
+      return {
+        success: false,
+        error: result.stderr || 'Failed to list user packages',
+      } as ApiResponse
+    }
+
+    try {
+      // npm access list packages returns { "packageName": "read-write" | "read-only" }
+      const packages = JSON.parse(result.stdout) as Record<string, 'read-write' | 'read-only'>
+      return {
+        success: true,
+        data: packages,
+      } as ApiResponse
+    } catch {
+      return {
+        success: false,
+        error: 'Failed to parse user packages',
+      } as ApiResponse
+    }
+  })
+
+  app.get('/user/orgs', async event => {
+    const auth = event.req.headers.get('authorization')
+    if (!validateToken(auth)) {
+      throw new HTTPError({ statusCode: 401, message: 'Unauthorized' })
+    }
+
+    const npmUser = state.session.npmUser
+    if (!npmUser) {
+      return {
+        success: false,
+        error: 'Not logged in to npm',
+      } as ApiResponse
+    }
+
+    // Get user's packages and extract org names from scoped packages
+    const result = await listUserPackages(npmUser)
+    if (result.exitCode !== 0) {
+      return {
+        success: false,
+        error: result.stderr || 'Failed to list user packages',
+      } as ApiResponse
+    }
+
+    try {
+      const packages = JSON.parse(result.stdout) as Record<string, string>
+      const orgs = new Set<string>()
+
+      // Extract org names from scoped packages (e.g., @myorg/mypackage -> myorg)
+      for (const pkgName of Object.keys(packages)) {
+        if (pkgName.startsWith('@')) {
+          const match = pkgName.match(/^@([^/]+)\//)
+          if (match && match[1]) {
+            // Exclude the user's own scope (personal packages)
+            if (match[1].toLowerCase() !== npmUser.toLowerCase()) {
+              orgs.add(match[1])
+            }
+          }
+        }
+      }
+
+      return {
+        success: true,
+        data: Array.from(orgs).sort(),
+      } as ApiResponse
+    } catch {
+      return {
+        success: false,
+        error: 'Failed to parse user orgs',
+      } as ApiResponse
+    }
+  })
+
   return app
 }
 
diff --git a/server/api/registry/org/[org]/packages.get.ts b/server/api/registry/org/[org]/packages.get.ts
new file mode 100644
index 0000000000..0a3774f824
--- /dev/null
+++ b/server/api/registry/org/[org]/packages.get.ts
@@ -0,0 +1,54 @@
+import { CACHE_MAX_AGE_ONE_HOUR } from '#shared/utils/constants'
+
+const NPM_REGISTRY = 'https://registry.npmjs.org'
+
+// Validation pattern for npm org names (alphanumeric with hyphens)
+const NPM_ORG_NAME_RE = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/i
+
+function validateOrgName(name: string): void {
+  if (!name || name.length > 50 || !NPM_ORG_NAME_RE.test(name)) {
+    throw createError({
+      statusCode: 400,
+      message: `Invalid org name: ${name}`,
+    })
+  }
+}
+
+export default defineCachedEventHandler(
+  async event => {
+    const org = getRouterParam(event, 'org')
+
+    if (!org) {
+      throw createError({
+        statusCode: 400,
+        message: 'Org name is required',
+      })
+    }
+
+    validateOrgName(org)
+
+    try {
+      const data = await $fetch<Record<string, string>>(
+        `${NPM_REGISTRY}/-/org/${encodeURIComponent(org)}/package`,
+      )
+      return {
+        packages: Object.keys(data),
+        count: Object.keys(data).length,
+      }
+    } catch {
+      // Org doesn't exist or has no packages
+      return {
+        packages: [],
+        count: 0,
+      }
+    }
+  },
+  {
+    maxAge: CACHE_MAX_AGE_ONE_HOUR,
+    swr: true,
+    getKey: event => {
+      const org = getRouterParam(event, 'org') ?? ''
+      return `org-packages:v1:${org}`
+    },
+  },
+)
diff --git a/test/unit/cli-server.spec.ts b/test/unit/cli-server.spec.ts
index cd9cebbfdf..d492b11793 100644
--- a/test/unit/cli-server.spec.ts
+++ b/test/unit/cli-server.spec.ts
@@ -29,4 +29,48 @@ describe('connector server', () => {
       expect(response.status).toBe(401)
     })
   })
+
+  describe('GET /user/packages', () => {
+    it('returns 401 without auth token', async () => {
+      const app = createConnectorApp(TEST_TOKEN)
+
+      const response = await app.fetch(new Request('http://localhost/user/packages'))
+
+      expect(response.status).toBe(401)
+    })
+
+    it('returns 401 with invalid auth token', async () => {
+      const app = createConnectorApp(TEST_TOKEN)
+
+      const response = await app.fetch(
+        new Request('http://localhost/user/packages', {
+          headers: { Authorization: 'Bearer wrong-token' },
+        }),
+      )
+
+      expect(response.status).toBe(401)
+    })
+  })
+
+  describe('GET /user/orgs', () => {
+    it('returns 401 without auth token', async () => {
+      const app = createConnectorApp(TEST_TOKEN)
+
+      const response = await app.fetch(new Request('http://localhost/user/orgs'))
+
+      expect(response.status).toBe(401)
+    })
+
+    it('returns 401 with invalid auth token', async () => {
+      const app = createConnectorApp(TEST_TOKEN)
+
+      const response = await app.fetch(
+        new Request('http://localhost/user/orgs', {
+          headers: { Authorization: 'Bearer wrong-token' },
+        }),
+      )
+
+      expect(response.status).toBe(401)
+    })
+  })
 })

From bb946d21d375e1c1f377cf2ef992d6c91080e823 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 10:02:23 +0000
Subject: [PATCH 07/13] chore: add i18n-ally extension recommendation

---
 .vscode/extensions.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 87400b48b3..c2fe9b8640 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["oxc.oxc-vscode", "Vue.volar"]
+  "recommendations": ["oxc.oxc-vscode", "Vue.volar", "lokalise.i18n-ally"]
 }

From bafaff0a6fdef77637edf9eb54b7ff082d92a12d Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 10:16:41 +0000
Subject: [PATCH 08/13] docs: update contribution guide

---
 CONTRIBUTING.md | 83 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index c13a1354eb..189f5c37a1 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -208,6 +208,89 @@ const props = defineProps<{
 
 Ideally, extract utilities into separate files so they can be unit tested. 🙏
 
+## Localization (i18n)
+
+npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization. We aim to make the UI accessible to users in their preferred language.
+
+### Approach
+
+- All user-facing strings should use translation keys via `$t()` in templates or `t()` in script
+- Translation files live in `i18n/locales/` (e.g., `en.json`)
+- We use the `no_prefix` strategy (no `/en/` or `/fr/` in URLs)
+- Locale preference is stored in cookies and respected on subsequent visits
+
+### Adding translations
+
+1. Add your translation key to `i18n/locales/en.json` first (English is the source of truth)
+2. Use the key in your component:
+
+   ```vue
+   <template>
+     <p>{{ $t('my.translation.key') }}</p>
+   </template>
+   ```
+
+   Or in script:
+
+   ```typescript
+   const { t } = useI18n()
+   const message = t('my.translation.key')
+   ```
+
+3. For dynamic values, use interpolation:
+
+   ```json
+   { "greeting": "Hello, {name}!" }
+   ```
+
+   ```vue
+   <p>{{ $t('greeting', { name: userName }) }}</p>
+   ```
+
+### Translation key conventions
+
+- Use dot notation for hierarchy: `section.subsection.key`
+- Keep keys descriptive but concise
+- Group related keys together
+- Use `common.*` for shared strings (loading, retry, close, etc.)
+- Use component-specific prefixes: `package.card.*`, `settings.*`, `nav.*`
+
+### Using i18n-ally (recommended)
+
+We recommend the [i18n-ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) VSCode extension for a better development experience:
+
+- Inline translation previews in your code
+- Auto-completion for translation keys
+- Missing translation detection
+- Easy navigation to translation files
+
+The extension is included in our workspace recommendations, so VSCode should prompt you to install it.
+
+### Adding a new locale
+
+1. Create a new JSON file in `i18n/locales/` (e.g., `fr.json`)
+2. Add the locale to `nuxt.config.ts`:
+
+   ```typescript
+   i18n: {
+     locales: [
+       { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
+       { code: 'fr', language: 'fr-FR', name: 'Francais', file: 'fr.json' },
+     ],
+   }
+   ```
+
+3. Translate all keys from `en.json`
+
+### Formatting with locale
+
+When formatting numbers or dates that should respect the user's locale, pass the locale:
+
+```typescript
+const { locale } = useI18n()
+const formatted = formatNumber(12345, locale.value) // "12,345" in en-US
+```
+
 ## Testing
 
 ### Unit tests

From e64aab52e6997ce427a53a8faa6a40902200fd40 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 10:55:01 +0000
Subject: [PATCH 09/13] feat: extract more translation keys

---
 .vscode/settings.json                     |   3 +
 app/components/AppHeader.vue              |   4 +-
 app/components/ClaimPackageModal.vue      |  66 ++--
 app/components/CodeDirectoryListing.vue   |   6 +-
 app/components/CodeMobileTreeDrawer.vue   |   6 +-
 app/components/ConnectorModal.vue         |  41 ++-
 app/components/ConnectorStatus.client.vue |  16 +-
 app/components/JsrBadge.vue               |   4 +-
 app/components/LicenseDisplay.vue         |   2 +-
 app/components/LoadingSpinner.vue         |   4 +-
 app/components/OperationsQueue.vue        |  48 ++-
 app/components/OrgMembersPanel.vue        |  82 +++--
 app/components/OrgTeamsPanel.vue          |  70 ++--
 app/components/PackageAccessControls.vue  |  44 ++-
 app/components/PackageCard.vue            |  10 +-
 app/components/PackageDependencies.vue    |  32 +-
 app/components/PackageDownloadStats.vue   |   4 +-
 app/components/PackageInstallScripts.vue  |  18 +-
 app/components/PackageList.vue            |   4 +-
 app/components/PackageListControls.vue    |  25 +-
 app/components/PackageMaintainers.vue     |  22 +-
 app/components/PackageMetricsBadges.vue   |  14 +-
 app/components/PackagePlaygrounds.vue     |   6 +-
 app/components/PackageSkeleton.vue        |  38 +-
 app/components/PackageVersions.vue        |  14 +-
 app/components/PackageVulnerabilities.vue |  25 +-
 app/components/ProvenanceBadge.vue        |  32 +-
 app/components/ScrollToTop.vue            |   4 +-
 app/components/SettingsMenu.vue           |  35 ++
 app/components/UserCombobox.vue           |  12 +-
 app/pages/@[org].vue                      |  29 +-
 app/pages/[...package].vue                |  94 +++--
 app/pages/code/[...path].vue              |  37 +-
 app/pages/index.vue                       |   4 +-
 app/pages/search.vue                      |  31 +-
 app/pages/~[username]/index.vue           |  25 +-
 app/utils/formatters.ts                   |   3 +-
 i18n/locales/en.json                      | 417 +++++++++++++++++++++-
 nuxt.config.ts                            |   3 +-
 39 files changed, 971 insertions(+), 363 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..f95a4ad2fd
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "i18n-ally.localesPaths": ["./i18n/locales"]
+}
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 69ddca8c1a..7c1468b631 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -21,7 +21,7 @@ const { isConnected, npmUser } = useConnector()
         <NuxtLink
           v-if="showLogo"
           to="/"
-          aria-label="npmx home"
+          :aria-label="$t('header.home')"
           class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
         >
           <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
@@ -74,7 +74,7 @@ const { isConnected, npmUser } = useConnector()
           target="_blank"
           rel="noopener noreferrer"
           class="link-subtle"
-          aria-label="GitHub repository"
+          :aria-label="$t('header.github')"
         >
           <span class="i-carbon-logo-github w-5 h-5" aria-hidden="true" />
         </a>
diff --git a/app/components/ClaimPackageModal.vue b/app/components/ClaimPackageModal.vue
index 26054783ad..fa918adce1 100644
--- a/app/components/ClaimPackageModal.vue
+++ b/app/components/ClaimPackageModal.vue
@@ -8,6 +8,8 @@ const props = defineProps<{
 
 const open = defineModel<boolean>('open', { default: false })
 
+const { t } = useI18n()
+
 const {
   isConnected,
   state,
@@ -32,7 +34,7 @@ async function checkAvailability() {
   try {
     checkResult.value = await checkPackageName(props.packageName)
   } catch (err) {
-    publishError.value = err instanceof Error ? err.message : 'Failed to check name availability'
+    publishError.value = err instanceof Error ? err.message : t('claim.modal.failed_to_check')
   } finally {
     isChecking.value = false
   }
@@ -82,7 +84,7 @@ async function handleClaim() {
       connectorModalOpen.value = true
     }
   } catch (err) {
-    publishError.value = err instanceof Error ? err.message : 'Failed to claim package'
+    publishError.value = err instanceof Error ? err.message : t('claim.modal.failed_to_claim')
   } finally {
     isPublishing.value = false
   }
@@ -141,7 +143,7 @@ const connectorModalOpen = shallowRef(false)
         <button
           type="button"
           class="absolute inset-0 bg-black/60 cursor-default"
-          aria-label="Close modal"
+          :aria-label="$t('claim.modal.close_modal')"
           @click="open = false"
         />
 
@@ -155,12 +157,12 @@ const connectorModalOpen = shallowRef(false)
           <div class="p-6">
             <div class="flex items-center justify-between mb-6">
               <h2 id="claim-modal-title" class="font-mono text-lg font-medium">
-                Claim Package Name
+                {{ $t('claim.modal.title') }}
               </h2>
               <button
                 type="button"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                aria-label="Close"
+                :aria-label="$t('claim.modal.close')"
                 @click="open = false"
               >
                 <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
@@ -169,7 +171,7 @@ const connectorModalOpen = shallowRef(false)
 
             <!-- Loading state -->
             <div v-if="isChecking" class="py-8 text-center">
-              <LoadingSpinner text="Checking availability…" />
+              <LoadingSpinner :text="t('claim.modal.checking')" />
             </div>
 
             <!-- Success state -->
@@ -179,16 +181,15 @@ const connectorModalOpen = shallowRef(false)
               >
                 <span class="i-carbon-checkmark-filled text-green-500 w-6 h-6" aria-hidden="true" />
                 <div>
-                  <p class="font-mono text-sm text-fg">Package claimed!</p>
+                  <p class="font-mono text-sm text-fg">{{ $t('claim.modal.success') }}</p>
                   <p class="text-xs text-fg-muted">
-                    {{ packageName }}@0.0.0 has been published to npm.
+                    {{ $t('claim.modal.success_detail', { name: packageName }) }}
                   </p>
                 </div>
               </div>
 
               <p class="text-sm text-fg-muted">
-                You can now publish new versions to this package using
-                <code class="font-mono bg-bg-subtle px-1 rounded">npm publish</code>.
+                {{ $t('claim.modal.success_hint') }}
               </p>
 
               <div class="flex gap-3">
@@ -197,14 +198,14 @@ const connectorModalOpen = shallowRef(false)
                   class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                   @click="open = false"
                 >
-                  View Package
+                  {{ $t('claim.modal.view_package') }}
                 </NuxtLink>
                 <button
                   type="button"
                   class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                   @click="open = false"
                 >
-                  Close
+                  {{ $t('claim.modal.close') }}
                 </button>
               </div>
             </div>
@@ -222,7 +223,7 @@ const connectorModalOpen = shallowRef(false)
                 class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
                 role="alert"
               >
-                <p class="font-medium mb-1">Invalid package name:</p>
+                <p class="font-medium mb-1">{{ $t('claim.modal.invalid_name') }}</p>
                 <ul class="list-disc list-inside space-y-1">
                   <li v-for="err in checkResult.validationErrors" :key="err">{{ err }}</li>
                 </ul>
@@ -234,7 +235,7 @@ const connectorModalOpen = shallowRef(false)
                 class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
                 role="alert"
               >
-                <p class="font-medium mb-1">Warnings:</p>
+                <p class="font-medium mb-1">{{ $t('common.warnings') }}</p>
                 <ul class="list-disc list-inside space-y-1">
                   <li v-for="warn in checkResult.validationWarnings" :key="warn">{{ warn }}</li>
                 </ul>
@@ -250,7 +251,7 @@ const connectorModalOpen = shallowRef(false)
                     class="i-carbon-checkmark-filled text-green-500 w-5 h-5"
                     aria-hidden="true"
                   />
-                  <p class="font-mono text-sm text-fg">This name is available!</p>
+                  <p class="font-mono text-sm text-fg">{{ $t('claim.modal.available') }}</p>
                 </div>
 
                 <div
@@ -258,7 +259,7 @@ const connectorModalOpen = shallowRef(false)
                   class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"
                 >
                   <span class="i-carbon-close-filled text-red-500 w-5 h-5" aria-hidden="true" />
-                  <p class="font-mono text-sm text-fg">This name is already taken.</p>
+                  <p class="font-mono text-sm text-fg">{{ $t('claim.modal.taken') }}</p>
                 </div>
               </div>
 
@@ -277,9 +278,9 @@ const connectorModalOpen = shallowRef(false)
                     class="text-sm font-medium mb-3"
                   >
                     <span v-if="hasDangerousSimilarPackages">
-                      Similar packages exist - npm may reject this name:
+                      {{ $t('claim.modal.similar_warning') }}
                     </span>
-                    <span v-else> Related packages: </span>
+                    <span v-else>{{ $t('claim.modal.related') }}</span>
                   </p>
                   <ul class="space-y-2">
                     <li
@@ -331,13 +332,14 @@ const connectorModalOpen = shallowRef(false)
                   v-if="!isScoped"
                   class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
                 >
-                  <p class="font-medium mb-1">Consider using a scoped package instead</p>
+                  <p class="font-medium mb-1">{{ $t('claim.modal.scope_warning_title') }}</p>
                   <p class="text-xs text-yellow-400/80">
-                    Unscoped package names are a shared resource. Only claim a name if you intend to
-                    publish and maintain a package. For personal or organizational projects, use a
-                    scoped name like
-                    <code class="font-mono">@{{ npmUser || 'username' }}/{{ packageName }}</code
-                    >.
+                    {{
+                      $t('claim.modal.scope_warning_text', {
+                        username: npmUser || 'username',
+                        name: packageName,
+                      })
+                    }}
                   </p>
                 </div>
 
@@ -346,21 +348,21 @@ const connectorModalOpen = shallowRef(false)
                   <div
                     class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
                   >
-                    <p>Connect to the local connector to claim this package name.</p>
+                    <p>{{ $t('claim.modal.connect_required') }}</p>
                   </div>
                   <button
                     type="button"
                     class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                     @click="connectorModalOpen = true"
                   >
-                    Connect to Connector
+                    {{ $t('claim.modal.connect_button') }}
                   </button>
                 </div>
 
                 <!-- Claim button -->
                 <div v-else class="space-y-3">
                   <p class="text-sm text-fg-muted">
-                    This will publish a minimal placeholder package.
+                    {{ $t('claim.modal.publish_hint') }}
                   </p>
 
                   <!-- Expandable package.json preview -->
@@ -368,7 +370,7 @@ const connectorModalOpen = shallowRef(false)
                     <summary
                       class="px-3 py-2 text-sm text-fg-muted bg-bg-subtle cursor-pointer hover:text-fg transition-colors select-none"
                     >
-                      Preview package.json
+                      {{ $t('claim.modal.preview_json') }}
                     </summary>
                     <pre class="p-3 text-xs font-mono text-fg-muted bg-[#0d0d0d] overflow-x-auto">{{
                       JSON.stringify(previewPackageJson, null, 2)
@@ -381,7 +383,9 @@ const connectorModalOpen = shallowRef(false)
                     class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                     @click="handleClaim"
                   >
-                    {{ isPublishing ? 'Publishing…' : 'Claim Package Name' }}
+                    {{
+                      isPublishing ? $t('claim.modal.publishing') : $t('claim.modal.claim_button')
+                    }}
                   </button>
                 </div>
               </div>
@@ -393,7 +397,7 @@ const connectorModalOpen = shallowRef(false)
                 class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                 @click="open = false"
               >
-                Close
+                {{ $t('claim.modal.close') }}
               </button>
             </div>
 
@@ -410,7 +414,7 @@ const connectorModalOpen = shallowRef(false)
                 class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                 @click="checkAvailability"
               >
-                Retry
+                {{ $t('claim.modal.retry') }}
               </button>
             </div>
           </div>
diff --git a/app/components/CodeDirectoryListing.vue b/app/components/CodeDirectoryListing.vue
index b515fa0d4f..431c6cbe61 100644
--- a/app/components/CodeDirectoryListing.vue
+++ b/app/components/CodeDirectoryListing.vue
@@ -48,15 +48,15 @@ function formatBytes(bytes: number): string {
   <div class="directory-listing">
     <!-- Empty state -->
     <div v-if="currentContents.length === 0" class="py-20 text-center text-fg-muted">
-      <p>No files in this directory</p>
+      <p>{{ $t('code.no_files') }}</p>
     </div>
 
     <!-- File list -->
     <table v-else class="w-full">
       <thead class="sr-only">
         <tr>
-          <th>Name</th>
-          <th>Size</th>
+          <th>{{ $t('code.table.name') }}</th>
+          <th>{{ $t('code.table.size') }}</th>
         </tr>
       </thead>
       <tbody>
diff --git a/app/components/CodeMobileTreeDrawer.vue b/app/components/CodeMobileTreeDrawer.vue
index d55e86a0ff..5d6d226aef 100644
--- a/app/components/CodeMobileTreeDrawer.vue
+++ b/app/components/CodeMobileTreeDrawer.vue
@@ -38,7 +38,7 @@ onUnmounted(() => {
   <button
     type="button"
     class="md:hidden fixed bottom-4 right-4 z-40 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
-    aria-label="Toggle file tree"
+    :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
   >
     <span class="w-5 h-5" :class="isOpen ? 'i-carbon-close' : 'i-carbon-folder'" />
@@ -72,11 +72,11 @@ onUnmounted(() => {
       <div
         class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-between"
       >
-        <span class="font-mono text-sm text-fg-muted">Files</span>
+        <span class="font-mono text-sm text-fg-muted">{{ $t('code.files_label') }}</span>
         <button
           type="button"
           class="text-fg-muted hover:text-fg transition-colors"
-          aria-label="Close file tree"
+          :aria-label="$t('code.close_tree')"
           @click="isOpen = false"
         >
           <span class="i-carbon-close w-5 h-5" />
diff --git a/app/components/ConnectorModal.vue b/app/components/ConnectorModal.vue
index a5ca92802e..064e94c8ca 100644
--- a/app/components/ConnectorModal.vue
+++ b/app/components/ConnectorModal.vue
@@ -63,7 +63,7 @@ watch(open, isOpen => {
         <button
           type="button"
           class="absolute inset-0 bg-black/60 cursor-default"
-          aria-label="Close modal"
+          :aria-label="$t('connector.modal.close_modal')"
           @click="open = false"
         />
 
@@ -78,12 +78,12 @@ watch(open, isOpen => {
           <div class="p-6">
             <div class="flex items-center justify-between mb-6">
               <h2 id="connector-modal-title" class="font-mono text-lg font-medium">
-                Local Connector
+                {{ $t('connector.modal.title') }}
               </h2>
               <button
                 type="button"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                aria-label="Close"
+                :aria-label="$t('connector.modal.close')"
                 @click="open = false"
               >
                 <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
@@ -95,9 +95,9 @@ watch(open, isOpen => {
               <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
                 <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
                 <div>
-                  <p class="font-mono text-sm text-fg">Connected</p>
+                  <p class="font-mono text-sm text-fg">{{ $t('connector.modal.connected') }}</p>
                   <p v-if="npmUser" class="font-mono text-xs text-fg-muted">
-                    Logged in as @{{ npmUser }}
+                    {{ $t('connector.modal.logged_in_as', { user: npmUser }) }}
                   </p>
                 </div>
               </div>
@@ -106,8 +106,7 @@ watch(open, isOpen => {
               <OperationsQueue />
 
               <div v-if="!hasOperations" class="text-sm text-fg-muted">
-                You can now manage packages, organizations, and teams through the npmx.dev
-                interface.
+                {{ $t('connector.modal.connected_hint') }}
               </div>
 
               <button
@@ -115,14 +114,14 @@ watch(open, isOpen => {
                 class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                 @click="handleDisconnect"
               >
-                Disconnect
+                {{ $t('connector.modal.disconnect') }}
               </button>
             </div>
 
             <!-- Disconnected state -->
             <form v-else class="space-y-4" @submit.prevent="handleConnect">
               <p class="text-sm text-fg-muted">
-                Run the connector on your machine to enable admin features:
+                {{ $t('connector.modal.run_hint') }}
               </p>
 
               <div
@@ -132,7 +131,9 @@ watch(open, isOpen => {
                 <span class="text-fg ml-2">{{ executeNpmxConnectorCommand }}</span>
                 <button
                   type="button"
-                  :aria-label="copied ? 'Copied' : 'Copy command'"
+                  :aria-label="
+                    copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
+                  "
                   class="ml-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
                   @click="copyCommand"
                 >
@@ -145,7 +146,7 @@ watch(open, isOpen => {
                 </button>
               </div>
 
-              <p class="text-sm text-fg-muted">Then paste the token shown in your terminal:</p>
+              <p class="text-sm text-fg-muted">{{ $t('connector.modal.paste_token') }}</p>
 
               <div class="space-y-3">
                 <div>
@@ -153,14 +154,14 @@ watch(open, isOpen => {
                     for="connector-token"
                     class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
                   >
-                    Token
+                    {{ $t('connector.modal.token_label') }}
                   </label>
                   <input
                     id="connector-token"
                     v-model="tokenInput"
                     type="password"
                     name="connector-token"
-                    placeholder="paste token here…"
+                    :placeholder="$t('connector.modal.token_placeholder')"
                     autocomplete="off"
                     spellcheck="false"
                     class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
@@ -171,14 +172,14 @@ watch(open, isOpen => {
                   <summary
                     class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
                   >
-                    Advanced options
+                    {{ $t('connector.modal.advanced') }}
                   </summary>
                   <div class="mt-3">
                     <label
                       for="connector-port"
                       class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
                     >
-                      Port
+                      {{ $t('connector.modal.port_label') }}
                     </label>
                     <input
                       id="connector-port"
@@ -207,9 +208,11 @@ watch(open, isOpen => {
                 role="alert"
                 class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
               >
-                <p class="font-mono text-sm text-fg font-bold">WARNING</p>
+                <p class="font-mono text-sm text-fg font-bold">
+                  {{ $t('connector.modal.warning') }}
+                </p>
                 <p class="text-sm text-fg-muted">
-                  This allows npmx to access your npm cli and any authenticated contexts.
+                  {{ $t('connector.modal.warning_text') }}
                 </p>
               </div>
 
@@ -218,7 +221,9 @@ watch(open, isOpen => {
                 :disabled="!tokenInput.trim() || isConnecting"
                 class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
               >
-                {{ isConnecting ? 'Connecting…' : 'Connect' }}
+                {{
+                  isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect')
+                }}
               </button>
             </form>
           </div>
diff --git a/app/components/ConnectorStatus.client.vue b/app/components/ConnectorStatus.client.vue
index df2141be04..a32bd0cbe8 100644
--- a/app/components/ConnectorStatus.client.vue
+++ b/app/components/ConnectorStatus.client.vue
@@ -12,10 +12,12 @@ const {
 const showModal = shallowRef(false)
 const showTooltip = shallowRef(false)
 
+const { t } = useI18n()
+
 const tooltipText = computed(() => {
-  if (isConnecting.value) return 'connecting…'
-  if (isConnected.value) return 'connected'
-  return 'connect local CLI'
+  if (isConnecting.value) return t('connector.status.connecting')
+  if (isConnected.value) return t('connector.status.connected')
+  return t('connector.status.connect_cli')
 })
 
 const statusColor = computed(() => {
@@ -29,9 +31,9 @@ const operationCount = computed(() => activeOperations.value.length)
 
 const ariaLabel = computed(() => {
   if (error.value) return error.value
-  if (isConnecting.value) return 'Connecting to local connector'
-  if (isConnected.value) return 'Connected to local connector'
-  return 'Click to connect to local connector'
+  if (isConnecting.value) return t('connector.status.aria_connecting')
+  if (isConnected.value) return t('connector.status.aria_connected')
+  return t('connector.status.aria_click_to_connect')
 })
 </script>
 
@@ -60,7 +62,7 @@ const ariaLabel = computed(() => {
       <img
         v-if="isConnected && avatar"
         :src="avatar"
-        :alt="`${npmUser}'s avatar`"
+        :alt="t('connector.status.avatar_alt', { user: npmUser })"
         width="24"
         height="24"
         class="w-6 h-6 rounded-full"
diff --git a/app/components/JsrBadge.vue b/app/components/JsrBadge.vue
index 4575e44eea..7332a8bd26 100644
--- a/app/components/JsrBadge.vue
+++ b/app/components/JsrBadge.vue
@@ -13,13 +13,13 @@ defineProps<{
     target="_blank"
     rel="noopener noreferrer"
     class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted hover:text-fg transition-colors duration-200"
-    title="also available on JSR"
+    :title="$t('badges.jsr.title')"
   >
     <span
       class="i-simple-icons-jsr shrink-0"
       :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'"
       aria-hidden="true"
     />
-    <span v-if="!compact" class="sr-only sm:not-sr-only">jsr</span>
+    <span v-if="!compact" class="sr-only sm:not-sr-only">{{ $t('badges.jsr.label') }}</span>
   </a>
 </template>
diff --git a/app/components/LicenseDisplay.vue b/app/components/LicenseDisplay.vue
index a9c57359e3..85905d955d 100644
--- a/app/components/LicenseDisplay.vue
+++ b/app/components/LicenseDisplay.vue
@@ -19,7 +19,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
         target="_blank"
         rel="noopener noreferrer"
         class="link-subtle"
-        title="View license text on SPDX"
+        :title="$t('package.license.view_spdx')"
       >
         {{ token.value }}
       </a>
diff --git a/app/components/LoadingSpinner.vue b/app/components/LoadingSpinner.vue
index 2f07bc27b5..c0ad61a048 100644
--- a/app/components/LoadingSpinner.vue
+++ b/app/components/LoadingSpinner.vue
@@ -3,11 +3,13 @@ defineProps<{
   /** Text to display next to the spinner */
   text?: string
 }>()
+
+const { t } = useI18n()
 </script>
 
 <template>
   <div aria-busy="true" class="flex items-center gap-3 text-fg-muted font-mono text-sm py-8">
     <span class="w-4 h-4 border-2 border-fg-subtle border-t-fg rounded-full animate-spin" />
-    {{ text ?? 'Loading...' }}
+    {{ text ?? t('common.loading') }}
   </div>
 </template>
diff --git a/app/components/OperationsQueue.vue b/app/components/OperationsQueue.vue
index 7461160b3f..429ec8503f 100644
--- a/app/components/OperationsQueue.vue
+++ b/app/components/OperationsQueue.vue
@@ -125,7 +125,7 @@ onUnmounted(() => {
     <!-- Header -->
     <div class="flex items-center justify-between">
       <h3 class="font-mono text-sm font-medium text-fg">
-        Operations Queue
+        {{ $t('operations.queue.title') }}
         <span v-if="hasActiveOperations" class="text-fg-muted"
           >({{ activeOperations.length }})</span
         >
@@ -135,15 +135,15 @@ onUnmounted(() => {
           v-if="hasOperations"
           type="button"
           class="px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg bg-bg-subtle border border-border rounded transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          aria-label="Clear all operations"
+          :aria-label="$t('operations.queue.clear_all')"
           @click="handleClearAll"
         >
-          clear all
+          {{ $t('operations.queue.clear_all') }}
         </button>
         <button
           type="button"
           class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          aria-label="Refresh operations"
+          :aria-label="$t('operations.queue.refresh')"
           @click="refreshState"
         >
           <span class="i-carbon-renew block w-4 h-4" aria-hidden="true" />
@@ -153,12 +153,16 @@ onUnmounted(() => {
 
     <!-- Empty state -->
     <div v-if="!hasActiveOperations && !hasCompletedOperations" class="py-8 text-center">
-      <p class="font-mono text-sm text-fg-subtle">No operations queued</p>
-      <p class="font-mono text-xs text-fg-subtle mt-1">Add operations from package or org pages</p>
+      <p class="font-mono text-sm text-fg-subtle">{{ $t('operations.queue.empty') }}</p>
+      <p class="font-mono text-xs text-fg-subtle mt-1">{{ $t('operations.queue.empty_hint') }}</p>
     </div>
 
     <!-- Active operations list -->
-    <ul v-if="hasActiveOperations" class="space-y-2" aria-label="Active operations">
+    <ul
+      v-if="hasActiveOperations"
+      class="space-y-2"
+      :aria-label="$t('operations.queue.active_label')"
+    >
       <li
         v-for="op in activeOperations"
         :key="op.id"
@@ -189,7 +193,7 @@ onUnmounted(() => {
             v-if="op.result?.requiresOtp && op.status === 'failed'"
             class="mt-1 text-xs text-amber-400"
           >
-            OTP required
+            {{ $t('operations.queue.otp_required') }}
           </p>
           <!-- Result output for completed/failed -->
           <div
@@ -211,7 +215,7 @@ onUnmounted(() => {
             v-if="op.status === 'pending'"
             type="button"
             class="p-1 text-fg-muted hover:text-green-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            aria-label="Approve operation"
+            :aria-label="$t('operations.queue.approve_operation')"
             @click="approveOperation(op.id)"
           >
             <span class="i-carbon-checkmark block w-4 h-4" aria-hidden="true" />
@@ -220,7 +224,7 @@ onUnmounted(() => {
             v-if="op.status !== 'running'"
             type="button"
             class="p-1 text-fg-muted hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            aria-label="Remove operation"
+            :aria-label="$t('operations.queue.remove_operation')"
             @click="removeOperation(op.id)"
           >
             <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
@@ -237,10 +241,12 @@ onUnmounted(() => {
     >
       <div class="flex items-center gap-2 mb-2">
         <span class="i-carbon-locked block w-4 h-4 text-amber-400 shrink-0" aria-hidden="true" />
-        <span class="font-mono text-sm text-amber-400"> Enter OTP to continue </span>
+        <span class="font-mono text-sm text-amber-400">
+          {{ $t('operations.queue.otp_prompt') }}
+        </span>
       </div>
       <form class="flex items-center gap-2" @submit.prevent="handleRetryWithOtp">
-        <label for="otp-input" class="sr-only">One-time password</label>
+        <label for="otp-input" class="sr-only">{{ $t('operations.queue.otp_label') }}</label>
         <input
           id="otp-input"
           v-model="otpInput"
@@ -248,7 +254,7 @@ onUnmounted(() => {
           name="otp-code"
           inputmode="numeric"
           pattern="[0-9]*"
-          placeholder="Enter OTP code…"
+          :placeholder="$t('operations.queue.otp_placeholder')"
           autocomplete="one-time-code"
           spellcheck="false"
           class="flex-1 px-3 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
@@ -258,7 +264,7 @@ onUnmounted(() => {
           :disabled="!otpInput.trim() || isExecuting"
           class="px-3 py-1.5 font-mono text-xs text-bg bg-amber-500 rounded transition-all duration-200 hover:bg-amber-400 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/50"
         >
-          {{ isExecuting ? 'Retrying…' : 'Retry with OTP' }}
+          {{ isExecuting ? $t('operations.queue.retrying') : $t('operations.queue.retry_otp') }}
         </button>
       </form>
     </div>
@@ -271,7 +277,7 @@ onUnmounted(() => {
         class="flex-1 px-4 py-2 font-mono text-sm text-fg bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         @click="handleApproveAll"
       >
-        Approve All ({{ pendingOperations.length }})
+        {{ $t('operations.queue.approve_all') }} ({{ pendingOperations.length }})
       </button>
       <button
         v-if="hasApprovedOperations && !hasOtpFailures"
@@ -280,7 +286,11 @@ onUnmounted(() => {
         class="flex-1 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
         @click="handleExecute()"
       >
-        {{ isExecuting ? 'Executing…' : `Execute (${approvedOperations.length})` }}
+        {{
+          isExecuting
+            ? $t('operations.queue.executing')
+            : `${$t('operations.queue.execute')} (${approvedOperations.length})`
+        }}
       </button>
     </div>
 
@@ -293,9 +303,9 @@ onUnmounted(() => {
           class="i-carbon-chevron-right block w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
           aria-hidden="true"
         />
-        Log ({{ completedOperations.length }})
+        {{ $t('operations.queue.log') }} ({{ completedOperations.length }})
       </summary>
-      <ul class="mt-2 space-y-1" aria-label="Completed operations log">
+      <ul class="mt-2 space-y-1" :aria-label="$t('operations.queue.log_label')">
         <li
           v-for="op in completedOperations"
           :key="op.id"
@@ -323,7 +333,7 @@ onUnmounted(() => {
           <button
             type="button"
             class="p-0.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            aria-label="Remove from log"
+            :aria-label="$t('operations.queue.remove_from_log')"
             @click="removeOperation(op.id)"
           >
             <span class="i-carbon-close block w-3 h-3" aria-hidden="true" />
diff --git a/app/components/OrgMembersPanel.vue b/app/components/OrgMembersPanel.vue
index b20823b5be..f3f3189268 100644
--- a/app/components/OrgMembersPanel.vue
+++ b/app/components/OrgMembersPanel.vue
@@ -10,6 +10,8 @@ const emit = defineEmits<{
   'select-team': [teamName: string]
 }>()
 
+const { t } = useI18n()
+
 const {
   isConnected,
   lastExecutionTime,
@@ -295,13 +297,13 @@ watch(lastExecutionTime, () => {
     <div class="flex items-center justify-between p-4 border-b border-border">
       <h2 id="members-heading" class="font-mono text-sm font-medium flex items-center gap-2">
         <span class="i-carbon-user-multiple w-4 h-4 text-fg-muted" aria-hidden="true" />
-        Members
+        {{ $t('org.members.title') }}
         <span v-if="memberList.length > 0" class="text-fg-muted">({{ memberList.length }})</span>
       </h2>
       <button
         type="button"
         class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-        aria-label="Refresh members"
+        :aria-label="$t('org.members.refresh')"
         :disabled="isLoading"
         @click="refreshData"
       >
@@ -320,18 +322,22 @@ watch(lastExecutionTime, () => {
           class="absolute left-2 top-1/2 -translate-y-1/2 i-carbon-search w-3.5 h-3.5 text-fg-subtle"
           aria-hidden="true"
         />
-        <label for="members-search" class="sr-only">Filter members</label>
+        <label for="members-search" class="sr-only">{{ $t('org.members.filter_label') }}</label>
         <input
           id="members-search"
           v-model="searchQuery"
           type="search"
           name="members-search"
-          placeholder="Filter members…"
+          :placeholder="$t('org.members.filter_placeholder')"
           autocomplete="off"
           class="w-full pl-7 pr-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         />
       </div>
-      <div class="flex items-center gap-1" role="group" aria-label="Filter by role">
+      <div
+        class="flex items-center gap-1"
+        role="group"
+        :aria-label="$t('org.members.filter_by_role')"
+      >
         <button
           v-for="role in ['all', 'owner', 'admin', 'developer'] as const"
           :key="role"
@@ -341,26 +347,30 @@ watch(lastExecutionTime, () => {
           :aria-pressed="filterRole === role"
           @click="filterRole = role"
         >
-          {{ role }}
+          {{ t(`org.members.role.${role}`) }}
           <span v-if="role !== 'all'" class="text-fg-subtle">({{ roleCounts[role] }})</span>
         </button>
       </div>
       <!-- Team filter -->
       <div v-if="teamNames.length > 0">
-        <label for="team-filter" class="sr-only">Filter by team</label>
+        <label for="team-filter" class="sr-only">{{ $t('org.members.filter_by_team') }}</label>
         <select
           id="team-filter"
           v-model="filterTeam"
           name="team-filter"
           class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         >
-          <option :value="null">all teams</option>
+          <option :value="null">{{ $t('org.members.all_teams') }}</option>
           <option v-for="team in teamNames" :key="team" :value="team">
             {{ team }}
           </option>
         </select>
       </div>
-      <div class="flex items-center gap-1 text-xs" role="group" aria-label="Sort by">
+      <div
+        class="flex items-center gap-1 text-xs"
+        role="group"
+        :aria-label="$t('org.members.sort_by')"
+      >
         <button
           type="button"
           class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
@@ -368,7 +378,7 @@ watch(lastExecutionTime, () => {
           :aria-pressed="sortBy === 'name'"
           @click="toggleSort('name')"
         >
-          name
+          {{ $t('common.sort.name') }}
           <span v-if="sortBy === 'name'">{{ sortOrder === 'asc' ? '↑' : '↓' }}</span>
         </button>
         <button
@@ -378,7 +388,7 @@ watch(lastExecutionTime, () => {
           :aria-pressed="sortBy === 'role'"
           @click="toggleSort('role')"
         >
-          role
+          {{ $t('common.sort.role') }}
           <span v-if="sortBy === 'role'">{{ sortOrder === 'asc' ? '↑' : '↓' }}</span>
         </button>
       </div>
@@ -390,7 +400,7 @@ watch(lastExecutionTime, () => {
         class="i-carbon-rotate-180 block w-5 h-5 text-fg-muted animate-spin mx-auto"
         aria-hidden="true"
       />
-      <p class="font-mono text-sm text-fg-muted mt-2">Loading members…</p>
+      <p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.members.loading') }}</p>
     </div>
 
     <!-- Error state -->
@@ -403,20 +413,20 @@ watch(lastExecutionTime, () => {
         class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         @click="loadMembers"
       >
-        Try again
+        {{ $t('common.try_again') }}
       </button>
     </div>
 
     <!-- Empty state -->
     <div v-else-if="memberList.length === 0" class="p-8 text-center">
-      <p class="font-mono text-sm text-fg-muted">No members found</p>
+      <p class="font-mono text-sm text-fg-muted">{{ $t('org.members.no_members') }}</p>
     </div>
 
     <!-- Members list -->
     <ul
       v-else
       class="divide-y divide-border max-h-[400px] overflow-y-auto"
-      aria-label="Organization members"
+      :aria-label="$t('org.members.list_label')"
     >
       <li
         v-for="member in filteredMembers"
@@ -440,9 +450,9 @@ watch(lastExecutionTime, () => {
           </div>
           <div class="flex items-center gap-1">
             <!-- Role selector -->
-            <label :for="`role-${member.name}`" class="sr-only"
-              >Change role for {{ member.name }}</label
-            >
+            <label :for="`role-${member.name}`" class="sr-only">{{
+              $t('org.members.change_role_for', { name: member.name })
+            }}</label>
             <select
               :id="`role-${member.name}`"
               :value="member.role"
@@ -455,15 +465,15 @@ watch(lastExecutionTime, () => {
                 )
               "
             >
-              <option value="developer">developer</option>
-              <option value="admin">admin</option>
-              <option value="owner">owner</option>
+              <option value="developer">{{ t('org.members.role.developer') }}</option>
+              <option value="admin">{{ t('org.members.role.admin') }}</option>
+              <option value="owner">{{ t('org.members.role.owner') }}</option>
             </select>
             <!-- Remove button -->
             <button
               type="button"
               class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-              :aria-label="`Remove ${member.name} from org`"
+              :aria-label="$t('org.members.remove_from_org', { name: member.name })"
               @click="handleRemoveMember(member.name)"
             >
               <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
@@ -477,7 +487,7 @@ watch(lastExecutionTime, () => {
             :key="team"
             type="button"
             class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted border border-border rounded hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            :aria-label="`View ${team} team`"
+            :aria-label="$t('org.members.view_team', { team })"
             @click="handleTeamClick(team)"
           >
             {{ team }}
@@ -488,45 +498,47 @@ watch(lastExecutionTime, () => {
 
     <!-- No results -->
     <div v-if="memberList.length > 0 && filteredMembers.length === 0" class="p-4 text-center">
-      <p class="font-mono text-sm text-fg-muted">No members match your filters</p>
+      <p class="font-mono text-sm text-fg-muted">{{ $t('org.members.no_match') }}</p>
     </div>
 
     <!-- Add member -->
     <div class="p-3 border-t border-border">
       <div v-if="showAddMember">
         <form class="space-y-2" @submit.prevent="handleAddMember">
-          <label for="new-member-username" class="sr-only">Username</label>
+          <label for="new-member-username" class="sr-only">{{
+            $t('org.members.username_label')
+          }}</label>
           <input
             id="new-member-username"
             v-model="newUsername"
             type="text"
             name="new-member-username"
-            placeholder="username…"
+            :placeholder="$t('org.members.username_placeholder')"
             autocomplete="off"
             spellcheck="false"
             class="w-full px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
           />
           <div class="flex items-center gap-2">
-            <label for="new-member-role" class="sr-only">Role</label>
+            <label for="new-member-role" class="sr-only">{{ $t('org.members.role_label') }}</label>
             <select
               id="new-member-role"
               v-model="newRole"
               name="new-member-role"
               class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
             >
-              <option value="developer">developer</option>
-              <option value="admin">admin</option>
-              <option value="owner">owner</option>
+              <option value="developer">{{ t('org.members.role.developer') }}</option>
+              <option value="admin">{{ t('org.members.role.admin') }}</option>
+              <option value="owner">{{ t('org.members.role.owner') }}</option>
             </select>
             <!-- Team selection -->
-            <label for="new-member-team" class="sr-only">Team</label>
+            <label for="new-member-team" class="sr-only">{{ $t('org.members.team_label') }}</label>
             <select
               id="new-member-team"
               v-model="newTeam"
               name="new-member-team"
               class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
             >
-              <option value="">no team</option>
+              <option value="">{{ $t('org.members.no_team') }}</option>
               <option v-for="team in teamNames" :key="team" :value="team">
                 {{ team }}
               </option>
@@ -536,12 +548,12 @@ watch(lastExecutionTime, () => {
               :disabled="!newUsername.trim() || isAddingMember"
               class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
             >
-              {{ isAddingMember ? '…' : 'add' }}
+              {{ isAddingMember ? '…' : $t('org.members.add_button') }}
             </button>
             <button
               type="button"
               class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-              aria-label="Cancel adding member"
+              :aria-label="$t('org.members.cancel_add')"
               @click="showAddMember = false"
             >
               <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
@@ -555,7 +567,7 @@ watch(lastExecutionTime, () => {
         class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         @click="showAddMember = true"
       >
-        + Add member
+        {{ $t('org.members.add_member') }}
       </button>
     </div>
   </section>
diff --git a/app/components/OrgTeamsPanel.vue b/app/components/OrgTeamsPanel.vue
index 4d81817acf..73e338afc3 100644
--- a/app/components/OrgTeamsPanel.vue
+++ b/app/components/OrgTeamsPanel.vue
@@ -264,13 +264,13 @@ watch(lastExecutionTime, () => {
     <div class="flex items-center justify-between p-4 border-b border-border">
       <h2 id="teams-heading" class="font-mono text-sm font-medium flex items-center gap-2">
         <span class="i-carbon-group w-4 h-4 text-fg-muted" aria-hidden="true" />
-        Teams
+        {{ $t('org.teams.title') }}
         <span v-if="teams.length > 0" class="text-fg-muted">({{ teams.length }})</span>
       </h2>
       <button
         type="button"
         class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-        aria-label="Refresh teams"
+        :aria-label="$t('org.teams.refresh')"
         :disabled="isLoadingTeams"
         @click="loadTeams"
       >
@@ -289,18 +289,22 @@ watch(lastExecutionTime, () => {
           class="absolute left-2 top-1/2 -translate-y-1/2 i-carbon-search w-3.5 h-3.5 text-fg-subtle"
           aria-hidden="true"
         />
-        <label for="teams-search" class="sr-only">Filter teams</label>
+        <label for="teams-search" class="sr-only">{{ $t('org.teams.filter_label') }}</label>
         <input
           id="teams-search"
           v-model="searchQuery"
           type="search"
           name="teams-search"
-          placeholder="Filter teams…"
+          :placeholder="$t('org.teams.filter_placeholder')"
           autocomplete="off"
           class="w-full pl-7 pr-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         />
       </div>
-      <div class="flex items-center gap-1 text-xs" role="group" aria-label="Sort by">
+      <div
+        class="flex items-center gap-1 text-xs"
+        role="group"
+        :aria-label="$t('org.teams.sort_by')"
+      >
         <button
           type="button"
           class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
@@ -308,7 +312,7 @@ watch(lastExecutionTime, () => {
           :aria-pressed="sortBy === 'name'"
           @click="toggleSort('name')"
         >
-          name
+          {{ $t('common.sort.name') }}
           <span v-if="sortBy === 'name'">{{ sortOrder === 'asc' ? '↑' : '↓' }}</span>
         </button>
         <button
@@ -318,7 +322,7 @@ watch(lastExecutionTime, () => {
           :aria-pressed="sortBy === 'members'"
           @click="toggleSort('members')"
         >
-          members
+          {{ $t('common.sort.members') }}
           <span v-if="sortBy === 'members'">{{ sortOrder === 'asc' ? '↑' : '↓' }}</span>
         </button>
       </div>
@@ -330,7 +334,7 @@ watch(lastExecutionTime, () => {
         class="i-carbon-rotate-180 block w-5 h-5 text-fg-muted animate-spin mx-auto"
         aria-hidden="true"
       />
-      <p class="font-mono text-sm text-fg-muted mt-2">Loading teams…</p>
+      <p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.teams.loading') }}</p>
     </div>
 
     <!-- Error state -->
@@ -343,17 +347,17 @@ watch(lastExecutionTime, () => {
         class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         @click="loadTeams"
       >
-        Try again
+        {{ $t('common.try_again') }}
       </button>
     </div>
 
     <!-- Empty state -->
     <div v-else-if="teams.length === 0" class="p-8 text-center">
-      <p class="font-mono text-sm text-fg-muted">No teams found</p>
+      <p class="font-mono text-sm text-fg-muted">{{ $t('org.teams.no_teams') }}</p>
     </div>
 
     <!-- Teams list -->
-    <ul v-else class="divide-y divide-border" aria-label="Organization teams">
+    <ul v-else class="divide-y divide-border" :aria-label="$t('org.teams.list_label')">
       <li v-for="teamName in filteredTeams" :key="teamName" class="bg-bg">
         <!-- Team header -->
         <div
@@ -376,8 +380,12 @@ watch(lastExecutionTime, () => {
             />
             <span class="font-mono text-sm text-fg">{{ teamName }}</span>
             <span v-if="teamUsers[teamName]" class="font-mono text-xs text-fg-subtle">
-              ({{ teamUsers[teamName].length }} member{{
-                teamUsers[teamName].length === 1 ? '' : 's'
+              ({{
+                $t(
+                  'org.teams.member_count',
+                  { count: teamUsers[teamName].length },
+                  teamUsers[teamName].length,
+                )
               }})
             </span>
             <span
@@ -389,7 +397,7 @@ watch(lastExecutionTime, () => {
           <button
             type="button"
             class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            :aria-label="`Delete team ${teamName}`"
+            :aria-label="$t('org.teams.delete_team', { name: teamName })"
             @click.stop="handleDestroyTeam(teamName)"
           >
             <span class="i-carbon-trash-can block w-4 h-4" aria-hidden="true" />
@@ -406,7 +414,7 @@ watch(lastExecutionTime, () => {
           <ul
             v-if="teamUsers[teamName]?.length"
             class="space-y-1 mb-2"
-            :aria-label="`Members of ${teamName}`"
+            :aria-label="$t('org.teams.members_of', { team: teamName })"
           >
             <li
               v-for="user in teamUsers[teamName]"
@@ -422,7 +430,7 @@ watch(lastExecutionTime, () => {
               <button
                 type="button"
                 class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                :aria-label="`Remove ${user} from team`"
+                :aria-label="$t('org.teams.remove_user', { user })"
                 @click="handleRemoveUser(teamName, user)"
               >
                 <span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
@@ -430,21 +438,21 @@ watch(lastExecutionTime, () => {
             </li>
           </ul>
           <p v-else-if="!isLoadingUsers[teamName]" class="font-mono text-xs text-fg-subtle py-1">
-            No members
+            {{ $t('org.teams.no_members') }}
           </p>
 
           <!-- Add user form -->
           <div v-if="showAddUserFor === teamName" class="mt-2">
             <form class="flex items-center gap-2" @submit.prevent="handleAddUser(teamName)">
-              <label :for="`add-user-${teamName}`" class="sr-only"
-                >Username to add to {{ teamName }}</label
-              >
+              <label :for="`add-user-${teamName}`" class="sr-only">{{
+                $t('org.teams.username_to_add', { team: teamName })
+              }}</label>
               <input
                 :id="`add-user-${teamName}`"
                 v-model="newUserUsername"
                 type="text"
                 :name="`add-user-${teamName}`"
-                placeholder="username…"
+                :placeholder="$t('org.teams.username_placeholder')"
                 autocomplete="off"
                 spellcheck="false"
                 class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
@@ -454,12 +462,12 @@ watch(lastExecutionTime, () => {
                 :disabled="!newUserUsername.trim() || isAddingUser"
                 class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
               >
-                {{ isAddingUser ? '…' : 'add' }}
+                {{ isAddingUser ? '…' : $t('org.teams.add_button') }}
               </button>
               <button
                 type="button"
                 class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                aria-label="Cancel adding user"
+                :aria-label="$t('org.teams.cancel_add_user')"
                 @click="showAddUserFor = null"
               >
                 <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
@@ -472,7 +480,7 @@ watch(lastExecutionTime, () => {
             class="mt-2 px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
             @click="showAddUserFor = teamName"
           >
-            + Add member
+            {{ $t('org.teams.add_member') }}
           </button>
         </div>
       </li>
@@ -480,7 +488,9 @@ watch(lastExecutionTime, () => {
 
     <!-- No results -->
     <div v-if="teams.length > 0 && filteredTeams.length === 0" class="p-4 text-center">
-      <p class="font-mono text-sm text-fg-muted">No teams match "{{ searchQuery }}"</p>
+      <p class="font-mono text-sm text-fg-muted">
+        {{ $t('org.teams.no_match', { query: searchQuery }) }}
+      </p>
     </div>
 
     <!-- Create team -->
@@ -493,13 +503,13 @@ watch(lastExecutionTime, () => {
             >
               {{ orgName }}:
             </span>
-            <label for="new-team-name" class="sr-only">Team name</label>
+            <label for="new-team-name" class="sr-only">{{ $t('org.teams.team_name_label') }}</label>
             <input
               id="new-team-name"
               v-model="newTeamName"
               type="text"
               name="new-team-name"
-              placeholder="team-name…"
+              :placeholder="$t('org.teams.team_name_placeholder')"
               autocomplete="off"
               spellcheck="false"
               class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-r text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
@@ -510,12 +520,12 @@ watch(lastExecutionTime, () => {
             :disabled="!newTeamName.trim() || isCreatingTeam"
             class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
           >
-            {{ isCreatingTeam ? '…' : 'create' }}
+            {{ isCreatingTeam ? '…' : $t('org.teams.create_button') }}
           </button>
           <button
             type="button"
             class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            aria-label="Cancel creating team"
+            :aria-label="$t('org.teams.cancel_create')"
             @click="showCreateTeam = false"
           >
             <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
@@ -528,7 +538,7 @@ watch(lastExecutionTime, () => {
         class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         @click="showCreateTeam = true"
       >
-        + Create team
+        {{ $t('org.teams.create_team') }}
       </button>
     </div>
   </section>
diff --git a/app/components/PackageAccessControls.vue b/app/components/PackageAccessControls.vue
index 13babf787e..f369629e2c 100644
--- a/app/components/PackageAccessControls.vue
+++ b/app/components/PackageAccessControls.vue
@@ -153,12 +153,12 @@ watch(
   <section v-if="isConnected && orgName" aria-labelledby="access-heading">
     <div class="flex items-center justify-between mb-3">
       <h2 id="access-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
-        Team Access
+        {{ $t('package.access.title') }}
       </h2>
       <button
         type="button"
         class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-        aria-label="Refresh team access"
+        :aria-label="$t('package.access.refresh')"
         :disabled="isLoadingCollaborators"
         @click="loadCollaborators"
       >
@@ -184,7 +184,11 @@ watch(
     </div>
 
     <!-- Collaborators list -->
-    <ul v-if="collaboratorList.length > 0" class="space-y-1 mb-3" aria-label="Team access list">
+    <ul
+      v-if="collaboratorList.length > 0"
+      class="space-y-1 mb-3"
+      :aria-label="$t('package.access.list_label')"
+    >
       <li
         v-for="collab in collaboratorList"
         :key="collab.name"
@@ -212,7 +216,9 @@ watch(
                 : 'bg-fg-subtle/20 text-fg-muted'
             "
           >
-            {{ collab.permission === 'read-write' ? 'rw' : 'ro' }}
+            {{
+              collab.permission === 'read-write' ? $t('package.access.rw') : $t('package.access.ro')
+            }}
           </span>
         </div>
         <!-- Only show revoke for teams (users are managed via owners) -->
@@ -220,24 +226,26 @@ watch(
           v-if="collab.isTeam"
           type="button"
           class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          :aria-label="`Revoke ${collab.displayName} access`"
+          :aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
           @click="handleRevokeAccess(collab.name)"
         >
           <span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
         </button>
-        <span v-else class="text-xs text-fg-subtle"> owner </span>
+        <span v-else class="text-xs text-fg-subtle"> {{ $t('package.access.owner') }} </span>
       </li>
     </ul>
 
     <p v-else-if="!isLoadingCollaborators && !error" class="text-xs text-fg-subtle mb-3">
-      No team access configured
+      {{ $t('package.access.no_access') }}
     </p>
 
     <!-- Grant access form -->
     <div v-if="showGrantAccess">
       <form class="space-y-2" @submit.prevent="handleGrantAccess">
         <div class="flex items-center gap-2">
-          <label for="grant-team-select" class="sr-only">Select team</label>
+          <label for="grant-team-select" class="sr-only">{{
+            $t('package.access.select_team_label')
+          }}</label>
           <select
             id="grant-team-select"
             v-model="selectedTeam"
@@ -246,7 +254,11 @@ watch(
             :disabled="isLoadingTeams"
           >
             <option value="" disabled>
-              {{ isLoadingTeams ? 'Loading teams…' : 'Select team' }}
+              {{
+                isLoadingTeams
+                  ? $t('package.access.loading_teams')
+                  : $t('package.access.select_team')
+              }}
             </option>
             <option v-for="team in teams" :key="team" :value="team">
               {{ orgName }}:{{ team }}
@@ -254,27 +266,29 @@ watch(
           </select>
         </div>
         <div class="flex items-center gap-2">
-          <label for="grant-permission-select" class="sr-only">Permission level</label>
+          <label for="grant-permission-select" class="sr-only">{{
+            $t('package.access.permission_label')
+          }}</label>
           <select
             id="grant-permission-select"
             v-model="permission"
             name="grant-permission"
             class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
           >
-            <option value="read-only">read-only</option>
-            <option value="read-write">read-write</option>
+            <option value="read-only">{{ $t('package.access.permission.read_only') }}</option>
+            <option value="read-write">{{ $t('package.access.permission.read_write') }}</option>
           </select>
           <button
             type="submit"
             :disabled="!selectedTeam || isGranting"
             class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
           >
-            {{ isGranting ? '…' : 'grant' }}
+            {{ isGranting ? '…' : $t('package.access.grant_button') }}
           </button>
           <button
             type="button"
             class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            aria-label="Cancel granting access"
+            :aria-label="$t('package.access.cancel_grant')"
             @click="showGrantAccess = false"
           >
             <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
@@ -288,7 +302,7 @@ watch(
       class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
       @click="showGrantAccess = true"
     >
-      + Grant team access
+      {{ $t('package.access.grant_access') }}
     </button>
   </section>
 </template>
diff --git a/app/components/PackageCard.vue b/app/components/PackageCard.vue
index 6a3f44342b..3430576f95 100644
--- a/app/components/PackageCard.vue
+++ b/app/components/PackageCard.vue
@@ -70,11 +70,11 @@ const emit = defineEmits<{
               v-if="showPublisher && result.package.publisher?.username"
               class="flex items-center gap-1.5"
             >
-              <dt class="sr-only">Publisher</dt>
+              <dt class="sr-only">{{ $t('package.card.publisher') }}</dt>
               <dd class="font-mono">@{{ result.package.publisher.username }}</dd>
             </div>
             <div v-if="result.package.date" class="flex items-center gap-1.5">
-              <dt class="sr-only">Updated</dt>
+              <dt class="sr-only">{{ $t('package.card.updated') }}</dt>
               <dd>
                 <DateTime
                   :datetime="result.package.date"
@@ -96,7 +96,7 @@ const emit = defineEmits<{
           class="sm:hidden flex items-center gap-4 mt-2 text-xs text-fg-subtle m-0"
         >
           <div class="flex items-center gap-1.5">
-            <dt class="sr-only">Weekly downloads</dt>
+            <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
             <dd class="flex items-center gap-1.5">
               <span class="i-carbon-chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
               <span class="font-mono">{{ formatNumber(result.downloads.weekly) }}/w</span>
@@ -133,7 +133,7 @@ const emit = defineEmits<{
         >
           <span class="i-carbon-chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
           <span class="font-mono text-xs">
-            {{ formatNumber(result.downloads.weekly) }} / week
+            {{ formatNumber(result.downloads.weekly) }} {{ $t('common.per_week') }}
           </span>
         </div>
       </div>
@@ -141,7 +141,7 @@ const emit = defineEmits<{
 
     <ul
       v-if="result.package.keywords?.length"
-      aria-label="Keywords"
+      :aria-label="$t('package.card.keywords')"
       class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0"
     >
       <li v-for="keyword in result.package.keywords.slice(0, 5)" :key="keyword" class="tag">
diff --git a/app/components/PackageDependencies.vue b/app/components/PackageDependencies.vue
index ccc307892a..ff920eaf5c 100644
--- a/app/components/PackageDependencies.vue
+++ b/app/components/PackageDependencies.vue
@@ -50,9 +50,9 @@ const sortedOptionalDependencies = computed(() => {
     <!-- Dependencies -->
     <section v-if="sortedDependencies.length > 0" aria-labelledby="dependencies-heading">
       <h2 id="dependencies-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
-        Dependencies ({{ sortedDependencies.length }})
+        {{ $t('package.dependencies.title', { count: sortedDependencies.length }) }}
       </h2>
-      <ul class="space-y-1 list-none m-0 p-0" aria-label="Package dependencies">
+      <ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"
@@ -94,7 +94,7 @@ const sortedOptionalDependencies = computed(() => {
         class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         @click="depsExpanded = true"
       >
-        show all {{ sortedDependencies.length }} deps
+        {{ $t('package.dependencies.show_all', { count: sortedDependencies.length }) }}
       </button>
     </section>
 
@@ -104,9 +104,12 @@ const sortedOptionalDependencies = computed(() => {
         id="peer-dependencies-heading"
         class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
       >
-        Peer Dependencies ({{ sortedPeerDependencies.length }})
+        {{ $t('package.peer_dependencies.title', { count: sortedPeerDependencies.length }) }}
       </h2>
-      <ul class="space-y-1 list-none m-0 p-0" aria-label="Package peer dependencies">
+      <ul
+        class="space-y-1 list-none m-0 p-0"
+        :aria-label="$t('package.peer_dependencies.list_label')"
+      >
         <li
           v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
           :key="peer.name"
@@ -122,9 +125,9 @@ const sortedOptionalDependencies = computed(() => {
             <span
               v-if="peer.optional"
               class="px-1 py-0.5 font-mono text-[10px] text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
-              title="Optional peer dependency"
+              :title="$t('package.dependencies.optional')"
             >
-              optional
+              {{ $t('package.dependencies.optional') }}
             </span>
           </div>
           <NuxtLink
@@ -145,7 +148,7 @@ const sortedOptionalDependencies = computed(() => {
         class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         @click="peerDepsExpanded = true"
       >
-        show all {{ sortedPeerDependencies.length }} peer deps
+        {{ $t('package.peer_dependencies.show_all', { count: sortedPeerDependencies.length }) }}
       </button>
     </section>
 
@@ -158,9 +161,14 @@ const sortedOptionalDependencies = computed(() => {
         id="optional-dependencies-heading"
         class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
       >
-        Optional Dependencies ({{ sortedOptionalDependencies.length }})
+        {{
+          $t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
+        }}
       </h2>
-      <ul class="space-y-1 list-none m-0 p-0" aria-label="Package optional dependencies">
+      <ul
+        class="space-y-1 list-none m-0 p-0"
+        :aria-label="$t('package.optional_dependencies.list_label')"
+      >
         <li
           v-for="[dep, version] in sortedOptionalDependencies.slice(
             0,
@@ -190,7 +198,9 @@ const sortedOptionalDependencies = computed(() => {
         class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         @click="optionalDepsExpanded = true"
       >
-        show all {{ sortedOptionalDependencies.length }} optional deps
+        {{
+          $t('package.optional_dependencies.show_all', { count: sortedOptionalDependencies.length })
+        }}
       </button>
     </section>
   </div>
diff --git a/app/components/PackageDownloadStats.vue b/app/components/PackageDownloadStats.vue
index 8926717bb2..f452fb1e97 100644
--- a/app/components/PackageDownloadStats.vue
+++ b/app/components/PackageDownloadStats.vue
@@ -75,7 +75,9 @@ const config = computed(() => ({
     <!-- Download stats -->
     <section>
       <div class="flex items-center justify-between mb-3">
-        <h2 class="text-xs text-fg-subtle uppercase tracking-wider">Weekly Downloads</h2>
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider">
+          {{ $t('package.downloads.title') }}
+        </h2>
       </div>
       <div class="w-full overflow-hidden">
         <ClientOnly>
diff --git a/app/components/PackageInstallScripts.vue b/app/components/PackageInstallScripts.vue
index c1c9579025..4c4a8b0204 100644
--- a/app/components/PackageInstallScripts.vue
+++ b/app/components/PackageInstallScripts.vue
@@ -8,6 +8,8 @@ const props = defineProps<{
   }
 }>()
 
+const { t } = useI18n()
+
 const outdatedNpxDeps = useOutdatedDependencies(() => props.installScripts.npxDependencies)
 const hasNpxDeps = computed(() => Object.keys(props.installScripts.npxDependencies).length > 0)
 const sortedNpxDeps = computed(() => {
@@ -24,7 +26,7 @@ const isExpanded = shallowRef(false)
       class="text-xs text-fg-subtle uppercase tracking-wider mb-3 flex items-center gap-2"
     >
       <span class="i-carbon-warning-alt w-3 h-3 text-yellow-500" aria-hidden="true" />
-      Install Scripts
+      {{ $t('package.install_scripts.title') }}
     </h2>
 
     <!-- Script list: name as label, content below -->
@@ -36,7 +38,7 @@ const isExpanded = shallowRef(false)
           class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
           :title="installScripts.content?.[scriptName]"
         >
-          {{ installScripts.content?.[scriptName] || '(script)' }}
+          {{ installScripts.content?.[scriptName] || $t('package.install_scripts.script_label') }}
         </dd>
       </div>
     </dl>
@@ -55,7 +57,13 @@ const isExpanded = shallowRef(false)
           :class="{ 'rotate-90': isExpanded }"
           aria-hidden="true"
         />
-        {{ sortedNpxDeps.length }} npx package{{ sortedNpxDeps.length !== 1 ? 's' : '' }}
+        {{
+          t(
+            'package.install_scripts.npx_packages',
+            { count: sortedNpxDeps.length },
+            sortedNpxDeps.length,
+          )
+        }}
       </button>
 
       <ul
@@ -93,7 +101,9 @@ const isExpanded = shallowRef(false)
               :title="
                 outdatedNpxDeps[dep]
                   ? outdatedNpxDeps[dep].resolved === outdatedNpxDeps[dep].latest
-                    ? `currently ${outdatedNpxDeps[dep].latest}`
+                    ? t('package.install_scripts.currently', {
+                        version: outdatedNpxDeps[dep].latest,
+                      })
                     : getOutdatedTooltip(outdatedNpxDeps[dep])
                   : version
               "
diff --git a/app/components/PackageList.vue b/app/components/PackageList.vue
index 61840109f0..f2c6a3c49f 100644
--- a/app/components/PackageList.vue
+++ b/app/components/PackageList.vue
@@ -123,7 +123,7 @@ defineExpose({
     <div v-if="isLoading" class="py-4 flex items-center justify-center">
       <div class="flex items-center gap-3 text-fg-muted font-mono text-sm">
         <span class="w-4 h-4 border-2 border-fg-subtle border-t-fg rounded-full animate-spin" />
-        Loading more...
+        {{ $t('common.loading_more') }}
       </div>
     </div>
 
@@ -132,7 +132,7 @@ defineExpose({
       v-else-if="!hasMore && results.length > 0"
       class="py-4 text-center text-fg-subtle font-mono text-sm"
     >
-      End of results
+      {{ $t('common.end_of_results') }}
     </p>
   </div>
 </template>
diff --git a/app/components/PackageListControls.vue b/app/components/PackageListControls.vue
index 1198aa896b..273731501e 100644
--- a/app/components/PackageListControls.vue
+++ b/app/components/PackageListControls.vue
@@ -19,6 +19,8 @@ const emit = defineEmits<{
   'update:sort': [value: SortOption]
 }>()
 
+const { t } = useI18n()
+
 const filterValue = computed({
   get: () => props.filter,
   set: value => emit('update:filter', value),
@@ -29,12 +31,15 @@ const sortValue = computed({
   set: value => emit('update:sort', value),
 })
 
-const sortOptions = [
-  { value: 'downloads', label: 'Most downloaded' },
-  { value: 'updated', label: 'Recently updated' },
-  { value: 'name-asc', label: 'Name (A-Z)' },
-  { value: 'name-desc', label: 'Name (Z-A)' },
-] as const
+const sortOptions = computed(
+  () =>
+    [
+      { value: 'downloads', label: t('package.sort.downloads') },
+      { value: 'updated', label: t('package.sort.updated') },
+      { value: 'name-asc', label: t('package.sort.name_asc') },
+      { value: 'name-desc', label: t('package.sort.name_desc') },
+    ] as const,
+)
 
 // Show filter count when filtering is active
 const showFilteredCount = computed(() => {
@@ -51,7 +56,7 @@ const showFilteredCount = computed(() => {
   <div class="flex flex-col sm:flex-row gap-3 mb-6">
     <!-- Filter input -->
     <div class="flex-1 relative">
-      <label for="package-filter" class="sr-only">Filter packages</label>
+      <label for="package-filter" class="sr-only">{{ $t('package.list.filter_label') }}</label>
       <div
         class="absolute h-full w-10 flex items-center justify-center text-fg-subtle pointer-events-none"
         aria-hidden="true"
@@ -62,7 +67,7 @@ const showFilteredCount = computed(() => {
         id="package-filter"
         v-model="filterValue"
         type="search"
-        :placeholder="placeholder ?? 'Filter packages...'"
+        :placeholder="placeholder ?? t('package.list.filter_placeholder')"
         autocomplete="off"
         class="w-full bg-bg-subtle border border-border rounded-lg pl-10 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
       />
@@ -70,7 +75,7 @@ const showFilteredCount = computed(() => {
 
     <!-- Sort select -->
     <div class="relative shrink-0 flex">
-      <label for="package-sort" class="sr-only">Sort packages</label>
+      <label for="package-sort" class="sr-only">{{ $t('package.list.sort_label') }}</label>
       <div class="relative">
         <select
           id="package-sort"
@@ -93,6 +98,6 @@ const showFilteredCount = computed(() => {
 
   <!-- Filtered count indicator -->
   <p v-if="showFilteredCount" class="text-fg-subtle text-xs font-mono mb-4">
-    Showing {{ filteredCount }} of {{ totalCount }} packages
+    {{ $t('package.list.showing_count', { filtered: filteredCount, total: totalCount }) }}
   </p>
 </template>
diff --git a/app/components/PackageMaintainers.vue b/app/components/PackageMaintainers.vue
index 5566954ff2..24eff66ac6 100644
--- a/app/components/PackageMaintainers.vue
+++ b/app/components/PackageMaintainers.vue
@@ -155,9 +155,9 @@ watch(
 <template>
   <section v-if="maintainers?.length" aria-labelledby="maintainers-heading">
     <h2 id="maintainers-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
-      Maintainers
+      {{ $t('package.maintainers.title') }}
     </h2>
-    <ul class="space-y-2 list-none m-0 p-0" aria-label="Package maintainers">
+    <ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.maintainers.list_label')">
       <li
         v-for="maintainer in maintainerAccess.slice(0, canManageOwners ? undefined : 5)"
         :key="maintainer.name ?? maintainer.email"
@@ -178,12 +178,12 @@ watch(
             v-if="isConnected && maintainer.accessVia?.length && !isLoadingAccess"
             class="text-xs text-fg-subtle truncate"
           >
-            via {{ maintainer.accessVia.join(', ') }}
+            {{ $t('package.maintainers.via', { teams: maintainer.accessVia.join(', ') }) }}
           </span>
           <span
             v-if="canManageOwners && maintainer.name === npmUser"
             class="text-xs text-fg-subtle shrink-0"
-            >(you)</span
+            >{{ $t('package.maintainers.you') }}</span
           >
         </div>
 
@@ -192,7 +192,7 @@ watch(
           v-if="canManageOwners && maintainer.name && maintainer.name !== npmUser"
           type="button"
           class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          :aria-label="`Remove ${maintainer.name} as owner`"
+          :aria-label="$t('package.maintainers.remove_owner', { name: maintainer.name })"
           @click="handleRemoveOwner(maintainer.name)"
         >
           <span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
@@ -204,13 +204,15 @@ watch(
     <div v-if="canManageOwners" class="mt-3">
       <div v-if="showAddOwner">
         <form class="flex items-center gap-2" @submit.prevent="handleAddOwner">
-          <label for="add-owner-username" class="sr-only">Username to add as owner</label>
+          <label for="add-owner-username" class="sr-only">{{
+            $t('package.maintainers.username_to_add')
+          }}</label>
           <input
             id="add-owner-username"
             v-model="newOwnerUsername"
             type="text"
             name="add-owner-username"
-            placeholder="username…"
+            :placeholder="$t('package.maintainers.username_placeholder')"
             autocomplete="off"
             spellcheck="false"
             class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
@@ -220,12 +222,12 @@ watch(
             :disabled="!newOwnerUsername.trim() || isAdding"
             class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
           >
-            {{ isAdding ? '…' : 'add' }}
+            {{ isAdding ? '…' : $t('package.maintainers.add_button') }}
           </button>
           <button
             type="button"
             class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            aria-label="Cancel adding owner"
+            :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
           >
             <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
@@ -238,7 +240,7 @@ watch(
         class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         @click="showAddOwner = true"
       >
-        + Add owner
+        {{ $t('package.maintainers.add_owner') }}
       </button>
     </div>
   </section>
diff --git a/app/components/PackageMetricsBadges.vue b/app/components/PackageMetricsBadges.vue
index 06931cf494..ff616dc888 100644
--- a/app/components/PackageMetricsBadges.vue
+++ b/app/components/PackageMetricsBadges.vue
@@ -25,17 +25,19 @@ const moduleFormatLabel = computed(() => {
   }
 })
 
+const { t } = useI18n()
+
 const moduleFormatTooltip = computed(() => {
   if (!analysis.value) return ''
   switch (analysis.value.moduleFormat) {
     case 'esm':
-      return 'ES Modules only'
+      return t('package.metrics.esm')
     case 'cjs':
-      return 'CommonJS only'
+      return t('package.metrics.cjs')
     case 'dual':
-      return 'Supports both CommonJS and ES Modules'
+      return t('package.metrics.dual')
     default:
-      return 'Unknown module format'
+      return t('package.metrics.unknown_format')
   }
 })
 
@@ -48,9 +50,9 @@ const typesTooltip = computed(() => {
   if (!analysis.value) return ''
   switch (analysis.value.types?.kind) {
     case 'included':
-      return 'TypeScript types included'
+      return t('package.metrics.ts_included')
     case '@types':
-      return `Types from ${analysis.value.types.packageName}`
+      return t('package.metrics.types_from', { package: analysis.value.types.packageName })
     default:
       return ''
   }
diff --git a/app/components/PackagePlaygrounds.vue b/app/components/PackagePlaygrounds.vue
index b8388bfa39..71523ebecb 100644
--- a/app/components/PackagePlaygrounds.vue
+++ b/app/components/PackagePlaygrounds.vue
@@ -110,7 +110,7 @@ function focusMenuItem(index: number) {
 <template>
   <section v-if="links.length > 0" aria-labelledby="playgrounds-heading">
     <h2 id="playgrounds-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
-      Try it out
+      {{ $t('package.playgrounds.title') }}
     </h2>
 
     <div ref="dropdownRef" class="relative">
@@ -142,7 +142,9 @@ function focusMenuItem(index: number) {
       >
         <span class="flex items-center gap-2">
           <span class="i-carbon-play w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
-          <span class="text-fg-muted">choose playground ({{ links.length }})</span>
+          <span class="text-fg-muted"
+            >{{ $t('package.playgrounds.choose') }} ({{ links.length }})</span
+          >
         </span>
         <span
           class="i-carbon-chevron-down w-3 h-3 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none"
diff --git a/app/components/PackageSkeleton.vue b/app/components/PackageSkeleton.vue
index 5410d649a1..8156340edf 100644
--- a/app/components/PackageSkeleton.vue
+++ b/app/components/PackageSkeleton.vue
@@ -1,5 +1,9 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
 <template>
-  <article aria-busy="true" aria-label="Loading package details" class="animate-fade-in">
+  <article aria-busy="true" :aria-label="t('package.skeleton.loading')" class="animate-fade-in">
     <!-- Package header - matches header in [...name].vue -->
     <header class="mb-8 pb-8 border-b border-border">
       <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-4">
@@ -26,7 +30,9 @@
       <dl class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mt-6">
         <!-- License -->
         <div class="space-y-1">
-          <dt class="text-xs text-fg-subtle uppercase tracking-wider">License</dt>
+          <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+            {{ t('package.skeleton.license') }}
+          </dt>
           <dd class="font-mono text-sm">
             <span class="skeleton inline-block h-5 w-12" />
           </dd>
@@ -34,7 +40,9 @@
 
         <!-- Weekly -->
         <div class="space-y-1">
-          <dt class="text-xs text-fg-subtle uppercase tracking-wider">Weekly</dt>
+          <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+            {{ t('package.skeleton.weekly') }}
+          </dt>
           <dd class="font-mono text-sm">
             <span class="skeleton inline-block h-5 w-20" />
           </dd>
@@ -42,7 +50,9 @@
 
         <!-- Size -->
         <div class="space-y-1">
-          <dt class="text-xs text-fg-subtle uppercase tracking-wider">Size</dt>
+          <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+            {{ t('package.skeleton.size') }}
+          </dt>
           <dd class="font-mono text-sm">
             <span class="skeleton inline-block h-5 w-16" />
           </dd>
@@ -50,7 +60,9 @@
 
         <!-- Deps -->
         <div class="space-y-1">
-          <dt class="text-xs text-fg-subtle uppercase tracking-wider">Deps</dt>
+          <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+            {{ t('package.skeleton.deps') }}
+          </dt>
           <dd class="font-mono text-sm">
             <span class="skeleton inline-block h-5 w-8" />
           </dd>
@@ -58,7 +70,9 @@
 
         <!-- Updated -->
         <div class="space-y-1 col-span-2">
-          <dt class="text-xs text-fg-subtle uppercase tracking-wider">Updated</dt>
+          <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+            {{ t('package.skeleton.updated') }}
+          </dt>
           <dd class="font-mono text-sm">
             <span class="skeleton inline-block h-5 w-28" />
           </dd>
@@ -90,7 +104,7 @@
         id="install-heading-skeleton"
         class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
       >
-        Install
+        {{ t('package.skeleton.install') }}
       </h2>
       <!-- code-block with relative positioning for copy button -->
       <div class="relative">
@@ -110,7 +124,7 @@
             id="readme-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-4"
           >
-            Readme
+            {{ t('package.skeleton.readme') }}
           </h2>
           <!-- Simulated README content -->
           <div class="space-y-4">
@@ -141,7 +155,7 @@
             id="maintainers-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
           >
-            Maintainers
+            {{ t('package.skeleton.maintainers') }}
           </h2>
           <ul class="space-y-2 list-none m-0 p-0">
             <li>
@@ -159,7 +173,7 @@
             id="keywords-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
           >
-            Keywords
+            {{ t('package.skeleton.keywords') }}
           </h2>
           <!-- flex flex-wrap gap-1.5 -->
           <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
@@ -178,7 +192,7 @@
             id="versions-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
           >
-            Versions
+            {{ t('package.skeleton.versions') }}
           </h2>
           <!-- space-y-1, each row: flex items-center justify-between py-1.5 text-sm -->
           <div class="space-y-1">
@@ -211,7 +225,7 @@
             id="dependencies-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
           >
-            Dependencies
+            {{ t('package.skeleton.dependencies') }}
           </h2>
           <!-- space-y-1, each: flex items-center justify-between py-1 text-sm -->
           <ul class="space-y-1 list-none m-0 p-0">
diff --git a/app/components/PackageVersions.vue b/app/components/PackageVersions.vue
index 9494041e32..c08e1fad4f 100644
--- a/app/components/PackageVersions.vue
+++ b/app/components/PackageVersions.vue
@@ -293,7 +293,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
 <template>
   <section v-if="allTagRows.length > 0" aria-labelledby="versions-heading" class="overflow-hidden">
     <h2 id="versions-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
-      Versions
+      {{ $t('package.versions.title') }}
     </h2>
 
     <div class="space-y-0.5 min-w-0">
@@ -306,7 +306,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
             type="button"
             class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors"
             :aria-expanded="expandedTags.has(row.tag)"
-            :aria-label="expandedTags.has(row.tag) ? `Collapse ${row.tag}` : `Expand ${row.tag}`"
+            :aria-label="
+              expandedTags.has(row.tag)
+                ? $t('package.versions.collapse', { tag: row.tag })
+                : $t('package.versions.expand', { tag: row.tag })
+            "
             @click="expandTagRow(row.tag)"
           >
             <span
@@ -444,9 +448,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
             />
           </span>
           <span class="text-xs text-fg-muted py-1.5">
-            Other versions
+            {{ $t('package.versions.other_versions') }}
             <span v-if="hiddenTagRows.length > 0" class="text-fg-subtle">
-              ({{ hiddenTagRows.length }} more tagged)
+              ({{ $t('package.versions.more_tagged', { count: hiddenTagRows.length }) }})
             </span>
           </span>
         </button>
@@ -623,7 +627,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             v-else-if="hasLoadedAll && hiddenTagRows.length === 0"
             class="py-1 text-xs text-fg-subtle"
           >
-            All versions are covered by tags above
+            {{ $t('package.versions.all_covered') }}
           </div>
         </div>
       </div>
diff --git a/app/components/PackageVulnerabilities.vue b/app/components/PackageVulnerabilities.vue
index d7f6e9025b..d284cca5b4 100644
--- a/app/components/PackageVulnerabilities.vue
+++ b/app/components/PackageVulnerabilities.vue
@@ -92,10 +92,12 @@ function getVulnerabilityUrl(vuln: OsvVulnerability): string {
   return `https://osv.dev/vulnerability/${vuln.id}`
 }
 
+const { t } = useI18n()
+
 function toVulnerabilitySummary(vuln: OsvVulnerability): VulnerabilitySummary {
   return {
     id: vuln.id,
-    summary: vuln.summary || 'No description available',
+    summary: vuln.summary || t('package.vulnerabilities.no_description'),
     severity: getSeverityLevel(vuln),
     aliases: vuln.aliases || [],
     url: getVulnerabilityUrl(vuln),
@@ -139,10 +141,12 @@ const highestSeverity = computed<OsvSeverityLevel>(() => {
 const summaryText = computed(() => {
   const counts = vulnData.value.counts
   const parts: string[] = []
-  if (counts.critical > 0) parts.push(`${counts.critical} critical`)
-  if (counts.high > 0) parts.push(`${counts.high} high`)
-  if (counts.moderate > 0) parts.push(`${counts.moderate} moderate`)
-  if (counts.low > 0) parts.push(`${counts.low} low`)
+  if (counts.critical > 0)
+    parts.push(`${counts.critical} ${t('package.vulnerabilities.severity.critical')}`)
+  if (counts.high > 0) parts.push(`${counts.high} ${t('package.vulnerabilities.severity.high')}`)
+  if (counts.moderate > 0)
+    parts.push(`${counts.moderate} ${t('package.vulnerabilities.severity.moderate')}`)
+  if (counts.low > 0) parts.push(`${counts.low} ${t('package.vulnerabilities.severity.low')}`)
   return parts.join(', ')
 })
 </script>
@@ -166,8 +170,13 @@ const summaryText = computed(() => {
         <div class="flex items-center gap-2 min-w-0">
           <span class="i-carbon-warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
           <span class="font-mono text-sm font-medium truncate">
-            {{ vulnData.counts.total }}
-            {{ vulnData.counts.total === 1 ? 'vulnerability' : 'vulnerabilities' }} found
+            {{
+              $t(
+                'package.vulnerabilities.found',
+                { count: vulnData.counts.total },
+                vulnData.counts.total,
+              )
+            }}
           </span>
         </div>
         <div class="flex items-center gap-2 shrink-0">
@@ -228,7 +237,7 @@ const summaryText = computed(() => {
                 target="_blank"
                 rel="noopener noreferrer"
                 class="shrink-0 p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                aria-label="View vulnerability details"
+                :aria-label="$t('package.vulnerabilities.view_details')"
               >
                 <span class="i-carbon-launch w-3.5 h-3.5" aria-hidden="true" />
               </a>
diff --git a/app/components/ProvenanceBadge.vue b/app/components/ProvenanceBadge.vue
index 35c313ed05..6294229d38 100644
--- a/app/components/ProvenanceBadge.vue
+++ b/app/components/ProvenanceBadge.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   /** Provider ID (e.g., "github", "gitlab") */
   provider?: string
   /** Package name for linking to npmjs.com provenance page */
@@ -12,10 +12,20 @@ defineProps<{
   linked?: boolean
 }>()
 
+const { t } = useI18n()
+
 const providerLabels: Record<string, string> = {
   github: 'GitHub Actions',
   gitlab: 'GitLab CI',
 }
+
+const title = computed(() =>
+  props.provider
+    ? t('badges.provenance.verified_via', {
+        provider: providerLabels[props.provider] ?? props.provider,
+      })
+    : t('badges.provenance.verified_title'),
+)
 </script>
 
 <template>
@@ -25,31 +35,27 @@ const providerLabels: Record<string, string> = {
     target="_blank"
     rel="noopener noreferrer"
     class="inline-flex items-center justify-center gap-1 text-xs font-mono text-fg-muted hover:text-fg transition-colors duration-200 min-w-6 min-h-6"
-    :title="
-      provider
-        ? `Verified: published via ${providerLabels[provider] ?? provider}`
-        : 'Verified provenance'
-    "
+    :title="title"
   >
     <span
       class="i-solar-shield-check-outline shrink-0"
       :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'"
     />
-    <span v-if="!compact" class="sr-only sm:not-sr-only">verified</span>
+    <span v-if="!compact" class="sr-only sm:not-sr-only">{{
+      t('badges.provenance.verified')
+    }}</span>
   </a>
   <span
     v-else
     class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted"
-    :title="
-      provider
-        ? `Verified: published via ${providerLabels[provider] ?? provider}`
-        : 'Verified provenance'
-    "
+    :title="title"
   >
     <span
       class="i-solar-shield-check-outline shrink-0"
       :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'"
     />
-    <span v-if="!compact" class="sr-only sm:not-sr-only">verified</span>
+    <span v-if="!compact" class="sr-only sm:not-sr-only">{{
+      t('badges.provenance.verified')
+    }}</span>
   </span>
 </template>
diff --git a/app/components/ScrollToTop.vue b/app/components/ScrollToTop.vue
index 96981aba13..a2840d3911 100644
--- a/app/components/ScrollToTop.vue
+++ b/app/components/ScrollToTop.vue
@@ -37,7 +37,7 @@ onMounted(() => {
     v-if="isActive && supportsScrollStateQueries"
     type="button"
     class="scroll-to-top-css fixed bottom-4 right-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
-    aria-label="Scroll to top"
+    :aria-label="$t('common.scroll_to_top')"
     @click="scrollToTop"
   >
     <span class="i-carbon-arrow-up w-5 h-5" aria-hidden="true" />
@@ -57,7 +57,7 @@ onMounted(() => {
       v-if="isActive && isMounted && isVisible"
       type="button"
       class="fixed bottom-4 right-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
-      aria-label="Scroll to top"
+      :aria-label="$t('common.scroll_to_top')"
       @click="scrollToTop"
     >
       <span class="i-carbon-arrow-up w-5 h-5" aria-hidden="true" />
diff --git a/app/components/SettingsMenu.vue b/app/components/SettingsMenu.vue
index 3caead6c44..9a857e81bb 100644
--- a/app/components/SettingsMenu.vue
+++ b/app/components/SettingsMenu.vue
@@ -2,6 +2,11 @@
 import { onKeyStroke, onClickOutside } from '@vueuse/core'
 
 const { settings } = useSettings()
+const { locale, locales, setLocale } = useI18n()
+
+const availableLocales = computed(() =>
+  locales.value.map(l => (typeof l === 'string' ? { code: l, name: l } : l)),
+)
 
 const isOpen = ref(false)
 const menuRef = useTemplateRef('menuRef')
@@ -127,6 +132,36 @@ onKeyStroke(',', e => {
               />
             </span>
           </button>
+
+          <!-- Language selector -->
+          <div class="pt-2 mt-2 border-t border-border">
+            <div class="px-2 py-1">
+              <label for="language-select" class="text-xs text-fg-subtle uppercase tracking-wider">
+                {{ $t('settings.language') }}
+              </label>
+            </div>
+            <div class="px-2 py-1">
+              <select
+                id="language-select"
+                :value="locale"
+                class="w-full bg-bg-muted border border-border rounded-md px-2 py-1.5 text-sm text-fg focus:outline-none focus:ring-2 focus:ring-fg/50 cursor-pointer"
+                @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
+              >
+                <option v-for="loc in availableLocales" :key="loc.code" :value="loc.code">
+                  {{ loc.name }}
+                </option>
+              </select>
+            </div>
+            <a
+              href="https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-fg-muted hover:text-fg transition-colors"
+            >
+              <span class="i-carbon-translate w-3.5 h-3.5" aria-hidden="true" />
+              {{ $t('settings.help_translate') }}
+            </a>
+          </div>
         </div>
       </div>
     </Transition>
diff --git a/app/components/UserCombobox.vue b/app/components/UserCombobox.vue
index 5257fcd238..2afbce1390 100644
--- a/app/components/UserCombobox.vue
+++ b/app/components/UserCombobox.vue
@@ -143,7 +143,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
       :id="inputId"
       v-model="inputValue"
       type="text"
-      :placeholder="placeholder ?? 'username…'"
+      :placeholder="placeholder ?? $t('user.combobox.default_placeholder')"
       :disabled="disabled"
       autocomplete="off"
       spellcheck="false"
@@ -176,7 +176,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
         :id="listboxId"
         ref="listRef"
         role="listbox"
-        :aria-label="label ?? 'User suggestions'"
+        :aria-label="label ?? $t('user.combobox.suggestions_label')"
         class="absolute z-50 w-full mt-1 py-1 bg-bg-elevated border border-border rounded shadow-lg max-h-48 overflow-y-auto"
       >
         <!-- Suggestions from org -->
@@ -209,8 +209,12 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
             class="i-carbon-information w-3 h-3 inline-block mr-1 align-middle"
             aria-hidden="true"
           />
-          Press Enter to add @{{ inputValue.trim().replace(/^@/, '') }}
-          <span class="text-amber-400">(will also add to org)</span>
+          {{
+            $t('user.combobox.press_enter_to_add', {
+              username: inputValue.trim().replace(/^@/, ''),
+            })
+          }}
+          <span class="text-amber-400">{{ $t('user.combobox.add_to_org_hint') }}</span>
         </li>
       </ul>
     </Transition>
diff --git a/app/pages/@[org].vue b/app/pages/@[org].vue
index a9e68aea6b..3f9d81a1ad 100644
--- a/app/pages/@[org].vue
+++ b/app/pages/@[org].vue
@@ -2,6 +2,8 @@
 import { formatNumber } from '#imports'
 import { debounce } from 'perfect-debounce'
 
+const { t } = useI18n()
+
 definePageMeta({
   name: 'org',
   alias: ['/org/:org()'],
@@ -133,7 +135,7 @@ defineOgImageComponent('Default', {
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">@{{ orgName }}</h1>
           <p v-if="status === 'success'" class="text-fg-muted text-sm mt-1">
-            {{ formatNumber(packageCount) }} public package{{ packageCount === 1 ? '' : 's' }}
+            {{ t('org.public_packages', { count: formatNumber(packageCount) }, packageCount) }}
           </p>
         </div>
       </div>
@@ -147,7 +149,7 @@ defineOgImageComponent('Default', {
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
         >
           <span class="i-carbon-cube w-4 h-4" />
-          view on npm
+          {{ t('common.view_on_npm') }}
         </a>
       </nav>
     </header>
@@ -167,7 +169,7 @@ defineOgImageComponent('Default', {
             "
             @click="activeTab = 'members'"
           >
-            Members
+            {{ t('org.page.members_tab') }}
           </button>
           <button
             type="button"
@@ -179,7 +181,7 @@ defineOgImageComponent('Default', {
             "
             @click="activeTab = 'teams'"
           >
-            Teams
+            {{ t('org.page.teams_tab') }}
           </button>
         </div>
 
@@ -190,29 +192,31 @@ defineOgImageComponent('Default', {
     </ClientOnly>
 
     <!-- Loading state -->
-    <LoadingSpinner v-if="status === 'pending'" text="Loading packages..." />
+    <LoadingSpinner v-if="status === 'pending'" :text="t('common.loading_packages')" />
 
     <!-- Error state -->
     <div v-else-if="status === 'error'" role="alert" class="py-12 text-center">
       <p class="text-fg-muted mb-4">
-        {{ error?.message ?? 'Failed to load organization packages' }}
+        {{ error?.message ?? t('org.page.failed_to_load') }}
       </p>
-      <NuxtLink to="/" class="btn"> Go back home </NuxtLink>
+      <NuxtLink to="/" class="btn">{{ t('common.go_back_home') }}</NuxtLink>
     </div>
 
     <!-- Empty state -->
     <div v-else-if="packageCount === 0" class="py-12 text-center">
       <p class="text-fg-muted font-mono">
-        No public packages found for <span class="text-fg">@{{ orgName }}</span>
+        {{ t('org.page.no_packages') }} <span class="text-fg">@{{ orgName }}</span>
       </p>
       <p class="text-fg-subtle text-sm mt-2">
-        This organization may not exist or has no public packages.
+        {{ t('org.page.no_packages_hint') }}
       </p>
     </div>
 
     <!-- Package list -->
-    <section v-else-if="packages.length > 0" aria-label="Organization packages">
-      <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">Packages</h2>
+    <section v-else-if="packages.length > 0" :aria-label="t('org.page.packages_title')">
+      <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
+        {{ t('org.page.packages_title') }}
+      </h2>
 
       <!-- Filter and sort controls -->
       <PackageListControls
@@ -228,8 +232,7 @@ defineOgImageComponent('Default', {
         v-if="filteredAndSortedPackages.length === 0"
         class="text-fg-muted py-8 text-center font-mono"
       >
-        No packages match "<span class="text-fg">{{ filterText }}</span
-        >"
+        {{ t('org.page.no_match', { query: filterText }) }}
       </p>
 
       <PackageList v-else :results="filteredAndSortedPackages" />
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 2628018718..5afc9c4c14 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -6,6 +6,8 @@ import { onKeyStroke } from '@vueuse/core'
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
 
+const { t } = useI18n()
+
 definePageMeta({
   name: 'package',
   alias: ['/package/:package(.*)*'],
@@ -456,7 +458,7 @@ defineOgImageComponent('Package', {
                   displayVersion.version !== latestVersion.version
                 "
                 class="text-fg-subtle text-sm shrink-0"
-                >(not latest)</span
+                >{{ t('package.not_latest') }}</span
               >
             </span>
 
@@ -498,7 +500,9 @@ defineOgImageComponent('Package', {
             >
               <MarkdownText :text="pkg.description" />
             </p>
-            <p v-else class="text-fg-subtle text-base m-0 italic">No description provided</p>
+            <p v-else class="text-fg-subtle text-base m-0 italic">
+              {{ t('package.no_description') }}
+            </p>
             <!-- Fade overlay with show more button - only when collapsed and overflowing -->
             <div
               v-if="pkg.description && descriptionOverflows && !descriptionExpanded"
@@ -507,10 +511,10 @@ defineOgImageComponent('Package', {
               <button
                 type="button"
                 class="font-mono text-xs text-fg-muted hover:text-fg bg-bg px-1 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                aria-label="Show full description"
+                :aria-label="t('package.show_full_description')"
                 @click="descriptionExpanded = true"
               >
-                show more
+                {{ t('common.show_more') }}
               </button>
             </div>
           </div>
@@ -523,27 +527,31 @@ defineOgImageComponent('Package', {
           <h2 class="font-medium mb-2">
             {{
               deprecationNotice.type === 'package'
-                ? 'This package has been deprecated.'
-                : 'This version has been deprecated.'
+                ? t('package.deprecation.package')
+                : t('package.deprecation.version')
             }}
           </h2>
           <p v-if="deprecationNotice.message" class="text-base m-0">
             <MarkdownText :text="deprecationNotice.message" />
           </p>
-          <p v-else class="text-base m-0 italic">No reason provided</p>
+          <p v-else class="text-base m-0 italic">{{ t('package.deprecation.no_reason') }}</p>
         </div>
 
         <!-- Stats grid -->
         <dl class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3 sm:gap-4 mt-4 sm:mt-6">
           <div v-if="pkg.license" class="space-y-1">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider">License</dt>
+            <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+              {{ t('package.stats.license') }}
+            </dt>
             <dd class="font-mono text-sm text-fg">
               <LicenseDisplay :license="pkg.license" />
             </dd>
           </div>
 
           <div v-if="downloads" class="space-y-1">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider">Weekly</dt>
+            <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+              {{ t('package.stats.weekly') }}
+            </dt>
             <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
               {{ formatNumber(downloads.downloads) }}
               <a
@@ -551,16 +559,18 @@ defineOgImageComponent('Package', {
                 target="_blank"
                 rel="noopener noreferrer"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
-                title="View download trends"
+                :title="t('package.stats.view_download_trends')"
               >
                 <span class="i-carbon-chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
-                <span class="sr-only">View download trends</span>
+                <span class="sr-only">{{ t('package.stats.view_download_trends') }}</span>
               </a>
             </dd>
           </div>
 
           <div class="space-y-1">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider">Deps</dt>
+            <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+              {{ t('package.stats.deps') }}
+            </dt>
             <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
               {{ getDependencyCount(displayVersion) }}
               <a
@@ -569,10 +579,10 @@ defineOgImageComponent('Package', {
                 target="_blank"
                 rel="noopener noreferrer"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
-                title="View dependency graph"
+                :title="t('package.stats.view_dependency_graph')"
               >
                 <span class="i-carbon-network-3 w-3.5 h-3.5 inline-block" aria-hidden="true" />
-                <span class="sr-only">View dependency graph</span>
+                <span class="sr-only">{{ t('package.stats.view_dependency_graph') }}</span>
               </a>
 
               <a
@@ -581,20 +591,20 @@ defineOgImageComponent('Package', {
                 target="_blank"
                 rel="noopener noreferrer"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
-                title="Inspect dependency tree on node-modules.dev"
+                :title="t('package.stats.inspect_dependency_tree')"
               >
                 <span
                   class="i-solar-eye-scan-outline w-3.5 h-3.5 inline-block"
                   aria-hidden="true"
                 />
-                <span class="sr-only">Inspect dependency tree</span>
+                <span class="sr-only">{{ t('package.stats.inspect_dependency_tree') }}</span>
               </a>
             </dd>
           </div>
 
           <div class="space-y-1 sm:col-span-2">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
-              Install Size
+              {{ t('package.stats.install_size') }}
               <span
                 class="i-carbon-information w-3 h-3 text-fg-subtle"
                 aria-hidden="true"
@@ -630,7 +640,9 @@ defineOgImageComponent('Package', {
           </div>
 
           <div v-if="pkg.time?.modified" class="space-y-1">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider sm:text-right">Updated</dt>
+            <dt class="text-xs text-fg-subtle uppercase tracking-wider sm:text-right">
+              {{ t('package.stats.updated') }}
+            </dt>
             <dd class="font-mono text-sm text-fg sm:text-right">
               <DateTime :datetime="pkg.time.modified" date-style="medium" />
             </dd>
@@ -651,7 +663,7 @@ defineOgImageComponent('Package', {
                 <span v-if="repoRef">
                   {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
                 </span>
-                <span v-else>repo</span>
+                <span v-else>{{ t('package.links.repo') }}</span>
               </a>
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
@@ -673,7 +685,7 @@ defineOgImageComponent('Package', {
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-carbon-link w-4 h-4" aria-hidden="true" />
-                homepage
+                {{ t('package.links.homepage') }}
               </a>
             </li>
             <li v-if="displayVersion?.bugs?.url">
@@ -684,7 +696,7 @@ defineOgImageComponent('Package', {
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-carbon-warning w-4 h-4" aria-hidden="true" />
-                issues
+                {{ t('package.links.issues') }}
               </a>
             </li>
 
@@ -698,7 +710,7 @@ defineOgImageComponent('Package', {
                 <span class="i-carbon-fork w-4 h-4" aria-hidden="true" />
                 <span>
                   {{ formatCompactNumber(forks, { decimals: 1 }) }}
-                  {{ forks === 1 ? 'fork' : 'forks' }}
+                  {{ t('package.links.forks', { count: forks }, forks) }}
                 </span>
               </a>
             </li>
@@ -709,10 +721,10 @@ defineOgImageComponent('Package', {
                 target="_blank"
                 rel="noopener noreferrer"
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-                title="Also available on JSR"
+                :title="t('badges.jsr.title')"
               >
                 <span class="i-simple-icons-jsr w-4 h-4" aria-hidden="true" />
-                jsr
+                {{ t('package.links.jsr') }}
               </a>
             </li>
             <li class="sm:flex-grow">
@@ -723,7 +735,7 @@ defineOgImageComponent('Package', {
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-simple-icons-socket w-4 h-4" aria-hidden="true" />
-                socket.dev
+                {{ t('package.links.socket') }}
               </a>
             </li>
 
@@ -736,7 +748,7 @@ defineOgImageComponent('Package', {
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
                 aria-keyshortcuts="."
               >
-                code
+                {{ t('package.links.code') }}
                 <kbd
                   class="hidden sm:inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
                   aria-hidden="true"
@@ -760,13 +772,13 @@ defineOgImageComponent('Package', {
       <section aria-labelledby="install-heading" class="mb-8">
         <div class="flex flex-wrap items-center justify-between mb-3">
           <h2 id="install-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
-            Install
+            {{ t('package.install.title') }}
           </h2>
           <!-- Package manager tabs -->
           <div
             class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border rounded-md"
             role="tablist"
-            aria-label="Package manager"
+            :aria-label="t('package.install.pm_label')"
           >
             <ClientOnly>
               <button
@@ -849,10 +861,10 @@ defineOgImageComponent('Package', {
           <button
             type="button"
             class="absolute top-3 right-3 px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-            aria-label="Copy install command"
+            :aria-label="t('package.install.copy_command')"
             @click="copyInstallCommand"
           >
-            <span aria-live="polite">{{ copied ? 'copied!' : 'copy' }}</span>
+            <span aria-live="polite">{{ copied ? t('common.copied') : t('common.copy') }}</span>
           </button>
         </div>
       </section>
@@ -863,7 +875,7 @@ defineOgImageComponent('Package', {
         <div class="lg:col-span-2 order-2 lg:order-1 min-w-0">
           <section aria-labelledby="readme-heading">
             <h2 id="readme-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
-              Readme
+              {{ t('package.readme.title') }}
             </h2>
             <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
             <div
@@ -872,9 +884,13 @@ defineOgImageComponent('Package', {
               v-html="readmeData.html"
             />
             <p v-else class="text-fg-subtle italic">
-              No README available.
-              <a v-if="repositoryUrl" :href="repositoryUrl" rel="noopener noreferrer" class="link"
-                >View on GitHub</a
+              {{ t('package.readme.no_readme') }}
+              <a
+                v-if="repositoryUrl"
+                :href="repositoryUrl"
+                rel="noopener noreferrer"
+                class="link"
+                >{{ t('package.readme.view_on_github') }}</a
               >
             </p>
           </section>
@@ -893,7 +909,7 @@ defineOgImageComponent('Package', {
           <!-- Keywords -->
           <section v-if="displayVersion?.keywords?.length" aria-labelledby="keywords-heading">
             <h2 id="keywords-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
-              Keywords
+              {{ t('package.keywords_title') }}
             </h2>
             <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
               <li v-for="keyword in displayVersion.keywords.slice(0, 15)" :key="keyword">
@@ -923,7 +939,7 @@ defineOgImageComponent('Package', {
               id="compatibility-heading"
               class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
             >
-              Compatibility
+              {{ t('package.compatibility') }}
             </h2>
             <dl class="space-y-2">
               <div v-if="displayVersion.engines.node" class="flex justify-between gap-4 py-1">
@@ -978,11 +994,11 @@ defineOgImageComponent('Package', {
 
     <!-- Error state -->
     <div v-else-if="status === 'error'" role="alert" class="py-20 text-center">
-      <h1 class="font-mono text-2xl font-medium mb-4">Package Not Found</h1>
+      <h1 class="font-mono text-2xl font-medium mb-4">{{ t('package.not_found') }}</h1>
       <p class="text-fg-muted mb-8">
-        {{ error?.message ?? 'The package could not be found.' }}
+        {{ error?.message ?? t('package.not_found_message') }}
       </p>
-      <NuxtLink to="/" class="btn"> Go back home </NuxtLink>
+      <NuxtLink to="/" class="btn">{{ t('common.go_back_home') }}</NuxtLink>
     </div>
   </main>
 </template>
diff --git a/app/pages/code/[...path].vue b/app/pages/code/[...path].vue
index dd24a6c3d3..85f8d5549d 100644
--- a/app/pages/code/[...path].vue
+++ b/app/pages/code/[...path].vue
@@ -5,6 +5,8 @@ import type {
   PackageFileContentResponse,
 } from '#shared/types'
 
+const { t } = useI18n()
+
 definePageMeta({
   name: 'code',
   alias: ['/package/code/:path(.*)*'],
@@ -306,7 +308,7 @@ useSeoMeta({
           </NuxtLink>
           <!-- Version selector -->
           <div v-if="version && availableVersions.length > 0" class="relative shrink-0">
-            <label for="version-select" class="sr-only">Select version</label>
+            <label for="version-select" class="sr-only">{{ t('code.select_version') }}</label>
             <select
               id="version-select"
               :value="version"
@@ -343,9 +345,9 @@ useSeoMeta({
             :to="getCodeUrl()"
             class="text-fg-muted hover:text-fg transition-colors shrink-0"
           >
-            root
+            {{ t('code.root') }}
           </NuxtLink>
-          <span v-else class="text-fg shrink-0">root</span>
+          <span v-else class="text-fg shrink-0">{{ t('code.root') }}</span>
           <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
             <span class="text-fg-subtle">/</span>
             <NuxtLink
@@ -363,20 +365,20 @@ useSeoMeta({
 
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
-      <p class="text-fg-muted mb-4">Version is required to browse code</p>
-      <NuxtLink :to="packageRoute()" class="btn"> Go to package </NuxtLink>
+      <p class="text-fg-muted mb-4">{{ t('code.version_required') }}</p>
+      <NuxtLink :to="packageRoute()" class="btn">{{ t('code.go_to_package') }}</NuxtLink>
     </div>
 
     <!-- Loading state -->
     <div v-else-if="treeStatus === 'pending'" class="container py-20 text-center">
       <div class="i-svg-spinners-ring-resize w-8 h-8 mx-auto text-fg-muted" />
-      <p class="mt-4 text-fg-muted">Loading file tree...</p>
+      <p class="mt-4 text-fg-muted">{{ t('code.loading_tree') }}</p>
     </div>
 
     <!-- Error state -->
     <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
-      <p class="text-fg-muted mb-4">Failed to load files for this package version</p>
-      <NuxtLink :to="packageRoute(version)" class="btn"> Back to package </NuxtLink>
+      <p class="text-fg-muted mb-4">{{ t('code.failed_to_load_tree') }}</p>
+      <NuxtLink :to="packageRoute(version)" class="btn">{{ t('code.back_to_package') }}</NuxtLink>
     </div>
 
     <!-- Main content: file tree + file viewer -->
@@ -414,7 +416,7 @@ useSeoMeta({
                 class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors"
                 @click="copyPermalink"
               >
-                Copy link
+                {{ t('code.copy_link') }}
               </button>
               <a
                 :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
@@ -422,7 +424,7 @@ useSeoMeta({
                 rel="noopener noreferrer"
                 class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1"
               >
-                Raw
+                {{ t('code.raw') }}
                 <span class="i-carbon-launch w-3 h-3" />
               </a>
             </div>
@@ -438,10 +440,9 @@ useSeoMeta({
         <!-- File too large warning -->
         <div v-else-if="isViewingFile && isFileTooLarge" class="py-20 text-center">
           <div class="i-carbon-document w-12 h-12 mx-auto text-fg-subtle mb-4" />
-          <p class="text-fg-muted mb-2">File too large to preview</p>
+          <p class="text-fg-muted mb-2">{{ t('code.file_too_large') }}</p>
           <p class="text-fg-subtle text-sm mb-4">
-            {{ formatBytes(currentNode?.size ?? 0) }} exceeds the 500KB limit for syntax
-            highlighting
+            {{ t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
           </p>
           <a
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
@@ -449,7 +450,7 @@ useSeoMeta({
             rel="noopener noreferrer"
             class="btn inline-flex items-center gap-2"
           >
-            View raw file
+            {{ t('code.view_raw') }}
             <span class="i-carbon-launch w-4 h-4" />
           </a>
         </div>
@@ -459,7 +460,7 @@ useSeoMeta({
           v-else-if="filePath && fileStatus === 'pending'"
           class="flex min-h-full"
           aria-busy="true"
-          aria-label="Loading file content"
+          :aria-label="t('common.loading')"
         >
           <!-- Fake line numbers column -->
           <div class="shrink-0 bg-bg-subtle border-r border-border w-14 py-0">
@@ -495,15 +496,15 @@ useSeoMeta({
         <!-- Error loading file -->
         <div v-else-if="filePath && fileStatus === 'error'" class="py-20 text-center" role="alert">
           <div class="i-carbon-warning-alt w-8 h-8 mx-auto text-fg-subtle mb-4" />
-          <p class="text-fg-muted mb-2">Failed to load file</p>
-          <p class="text-fg-subtle text-sm mb-4">The file may be too large or unavailable</p>
+          <p class="text-fg-muted mb-2">{{ t('code.failed_to_load') }}</p>
+          <p class="text-fg-subtle text-sm mb-4">{{ t('code.unavailable_hint') }}</p>
           <a
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
             class="btn inline-flex items-center gap-2"
           >
-            View raw file
+            {{ t('code.view_raw') }}
             <span class="i-carbon-launch w-4 h-4" />
           </a>
         </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index f449eacb50..4f1c129700 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -12,8 +12,8 @@ function handleSearch() {
 
 const { t } = useI18n()
 useSeoMeta({
-  title: t('seo.home.title'),
-  description: t('seo.home.description'),
+  title: () => t('seo.home.title'),
+  description: () => t('seo.home.description'),
 })
 
 defineOgImageComponent('Default')
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 2db17cbe61..55c5907083 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -3,6 +3,7 @@ import { formatNumber } from '#imports'
 import { debounce } from 'perfect-debounce'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
 
+const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 
@@ -345,7 +346,7 @@ defineOgImageComponent('Default', {
 
         <search>
           <form role="search" class="relative" @submit.prevent>
-            <label for="search-input" class="sr-only">Search npm packages</label>
+            <label for="search-input" class="sr-only">{{ t('search.label') }}</label>
 
             <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
               <!-- Subtle glow effect -->
@@ -366,7 +367,7 @@ defineOgImageComponent('Default', {
                   v-model="inputValue"
                   type="search"
                   name="q"
-                  placeholder="search packages…"
+                  :placeholder="t('search.placeholder')"
                   autocapitalize="off"
                   autocomplete="off"
                   autocorrect="off"
@@ -380,13 +381,13 @@ defineOgImageComponent('Default', {
                   v-show="inputValue"
                   type="button"
                   class="absolute right-3 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                  aria-label="Clear search"
+                  :aria-label="t('search.clear')"
                   @click="inputValue = ''"
                 >
                   <span class="i-carbon-close-large block w-3.5 h-3.5" aria-hidden="true" />
                 </button>
                 <!-- Hidden submit button for accessibility (form must have submit button per WCAG) -->
-                <button type="submit" class="sr-only">Search</button>
+                <button type="submit" class="sr-only">{{ t('search.button') }}</button>
               </div>
             </div>
           </form>
@@ -408,17 +409,16 @@ defineOgImageComponent('Default', {
           >
             <div class="flex-1 min-w-0">
               <p class="font-mono text-sm text-fg">
-                "<span class="text-fg font-medium">{{ query }}</span
-                >" is not taken
+                {{ t('search.not_taken', { name: query }) }}
               </p>
-              <p class="text-xs text-fg-muted mt-0.5">Claim this package name on npm</p>
+              <p class="text-xs text-fg-muted mt-0.5">{{ t('search.claim_prompt') }}</p>
             </div>
             <button
               type="button"
               class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
               @click="claimModalOpen = true"
             >
-              Claim "{{ query }}"
+              {{ t('search.claim_button', { name: query }) }}
             </button>
           </div>
 
@@ -427,27 +427,28 @@ defineOgImageComponent('Default', {
             role="status"
             class="text-fg-muted text-sm mb-6 font-mono"
           >
-            Found <span class="text-fg">{{ formatNumber(visibleResults.total) }}</span> packages
-            <span v-if="status === 'pending'" class="text-fg-subtle">(updating…)</span>
+            {{ t('search.found_packages', { count: formatNumber(visibleResults.total) }) }}
+            <span v-if="status === 'pending'" class="text-fg-subtle">{{
+              t('search.updating')
+            }}</span>
           </p>
 
           <!-- No results found -->
           <div v-else-if="status !== 'pending'" role="status" class="py-12 text-center">
             <p class="text-fg-muted font-mono mb-6">
-              No packages found for "<span class="text-fg">{{ query }}</span
-              >"
+              {{ t('search.no_results', { query }) }}
             </p>
 
             <!-- Offer to claim the package name if it's valid -->
             <div v-if="showClaimPrompt" class="max-w-md mx-auto">
               <div class="p-4 bg-bg-subtle border border-border rounded-lg">
-                <p class="text-sm text-fg-muted mb-3">Want to claim this package name?</p>
+                <p class="text-sm text-fg-muted mb-3">{{ t('search.want_to_claim') }}</p>
                 <button
                   type="button"
                   class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                   @click="claimModalOpen = true"
                 >
-                  Claim "{{ query }}"
+                  {{ t('search.claim_button', { name: query }) }}
                 </button>
               </div>
             </div>
@@ -472,7 +473,7 @@ defineOgImageComponent('Default', {
       </section>
 
       <section v-else class="py-20 text-center">
-        <p class="text-fg-subtle font-mono text-sm">Start typing to search packages</p>
+        <p class="text-fg-subtle font-mono text-sm">{{ t('search.start_typing') }}</p>
       </section>
     </div>
 
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index d7f1f3db20..273262fa85 100644
--- a/app/pages/~[username]/index.vue
+++ b/app/pages/~[username]/index.vue
@@ -2,6 +2,7 @@
 import { formatNumber } from '#imports'
 import { debounce } from 'perfect-debounce'
 
+const { t } = useI18n()
 const route = useRoute('~username')
 const router = useRouter()
 
@@ -187,7 +188,7 @@ defineOgImageComponent('Default', {
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">@{{ username }}</h1>
           <p v-if="results?.total" class="text-fg-muted text-sm mt-1">
-            {{ formatNumber(results.total) }} public package{{ results.total === 1 ? '' : 's' }}
+            {{ t('org.public_packages', { count: formatNumber(results.total) }, results.total) }}
           </p>
         </div>
       </div>
@@ -201,33 +202,38 @@ defineOgImageComponent('Default', {
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
         >
           <span class="i-carbon-cube w-4 h-4" />
-          view on npm
+          {{ t('common.view_on_npm') }}
         </a>
       </nav>
     </header>
 
     <!-- Loading state -->
-    <LoadingSpinner v-if="status === 'pending' && loadedPages === 1" text="Loading packages..." />
+    <LoadingSpinner
+      v-if="status === 'pending' && loadedPages === 1"
+      :text="t('common.loading_packages')"
+    />
 
     <!-- Error state -->
     <div v-else-if="status === 'error'" role="alert" class="py-12 text-center">
       <p class="text-fg-muted mb-4">
-        {{ error?.message ?? 'Failed to load user packages' }}
+        {{ error?.message ?? t('user.page.failed_to_load') }}
       </p>
-      <NuxtLink to="/" class="btn"> Go back home </NuxtLink>
+      <NuxtLink to="/" class="btn">{{ t('common.go_back_home') }}</NuxtLink>
     </div>
 
     <!-- Empty state -->
     <div v-else-if="results && results.total === 0" class="py-12 text-center">
       <p class="text-fg-muted font-mono">
-        No public packages found for <span class="text-fg">@{{ username }}</span>
+        {{ t('user.page.no_packages') }} <span class="text-fg">@{{ username }}</span>
       </p>
-      <p class="text-fg-subtle text-sm mt-2">This user may not exist or has no public packages.</p>
+      <p class="text-fg-subtle text-sm mt-2">{{ t('user.page.no_packages_hint') }}</p>
     </div>
 
     <!-- Package list -->
     <section v-else-if="results && packages.length > 0" aria-label="User packages">
-      <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">Packages</h2>
+      <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
+        {{ t('user.page.packages_title') }}
+      </h2>
 
       <!-- Filter and sort controls -->
       <PackageListControls
@@ -243,8 +249,7 @@ defineOgImageComponent('Default', {
         v-if="filteredAndSortedPackages.length === 0"
         class="text-fg-muted py-8 text-center font-mono"
       >
-        No packages match "<span class="text-fg">{{ filterText }}</span
-        >"
+        {{ t('user.page.no_match', { query: filterText }) }}
       </p>
 
       <PackageList
diff --git a/app/utils/formatters.ts b/app/utils/formatters.ts
index 82c50ca0ce..3569ecdda5 100644
--- a/app/utils/formatters.ts
+++ b/app/utils/formatters.ts
@@ -1,4 +1,5 @@
-export function formatNumber(num: number): string {
+export function formatNumber(num: number, _locale?: string): string {
+  // TODO: Support different locales (needs care to ensure hydration works correctly)
   return new Intl.NumberFormat('en-US').format(num)
 }
 
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 9ae94fde7e..4b9389a9b1 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -16,7 +16,16 @@
   "search": {
     "label": "Search npm packages",
     "placeholder": "search packages...",
-    "button": "search"
+    "button": "search",
+    "clear": "Clear search",
+    "found_packages": "Found {count} packages",
+    "updating": "(updating...)",
+    "no_results": "No packages found for \"{query}\"",
+    "not_taken": "{name} is not taken",
+    "claim_prompt": "Claim this package name on npm",
+    "claim_button": "Claim \"{name}\"",
+    "want_to_claim": "Want to claim this package name?",
+    "start_typing": "Start typing to search packages"
   },
   "nav": {
     "popular_packages": "Popular packages",
@@ -25,6 +34,410 @@
   },
   "settings": {
     "relative_dates": "Relative dates",
-    "include_types": "Include {'@'}types in install"
+    "include_types": "Include {'@'}types in install",
+    "language": "Language",
+    "help_translate": "Help translate npmx"
+  },
+  "common": {
+    "loading": "Loading...",
+    "loading_more": "Loading more...",
+    "loading_packages": "Loading packages...",
+    "end_of_results": "End of results",
+    "try_again": "Try again",
+    "close": "Close",
+    "retry": "Retry",
+    "copy": "copy",
+    "copied": "copied!",
+    "show_more": "show more",
+    "warnings": "Warnings:",
+    "go_back_home": "Go back home",
+    "view_on_npm": "view on npm",
+    "per_week": "/ week",
+    "sort": {
+      "name": "name",
+      "role": "role",
+      "members": "members"
+    },
+    "scroll_to_top": "Scroll to top"
+  },
+  "package": {
+    "not_found": "Package Not Found",
+    "not_found_message": "The package could not be found.",
+    "no_description": "No description provided",
+    "show_full_description": "Show full description",
+    "not_latest": "(not latest)",
+    "verified_provenance": "Verified provenance",
+    "view_permalink": "View permalink for this version",
+    "deprecation": {
+      "package": "This package has been deprecated.",
+      "version": "This version has been deprecated.",
+      "no_reason": "No reason provided"
+    },
+    "stats": {
+      "license": "License",
+      "weekly": "Weekly",
+      "deps": "Deps",
+      "install_size": "Install Size",
+      "updated": "Updated",
+      "view_download_trends": "View download trends",
+      "view_dependency_graph": "View dependency graph",
+      "inspect_dependency_tree": "Inspect dependency tree"
+    },
+    "links": {
+      "repo": "repo",
+      "homepage": "homepage",
+      "issues": "issues",
+      "forks": "{count} fork | {count} forks",
+      "jsr": "jsr",
+      "socket": "socket.dev",
+      "code": "code"
+    },
+    "install": {
+      "title": "Install",
+      "pm_label": "Package manager",
+      "copy_command": "Copy install command",
+      "view_types": "View {package}"
+    },
+    "readme": {
+      "title": "Readme",
+      "no_readme": "No README available.",
+      "view_on_github": "View on GitHub"
+    },
+    "keywords_title": "Keywords",
+    "compatibility": "Compatibility",
+    "card": {
+      "publisher": "Publisher",
+      "updated": "Updated",
+      "weekly_downloads": "Weekly downloads",
+      "keywords": "Keywords"
+    },
+    "versions": {
+      "title": "Versions",
+      "collapse": "Collapse {tag}",
+      "expand": "Expand {tag}",
+      "other_versions": "Other versions",
+      "more_tagged": "{count} more tagged",
+      "all_covered": "All versions are covered by tags above"
+    },
+    "dependencies": {
+      "title": "Dependencies ({count})",
+      "list_label": "Package dependencies",
+      "show_all": "show all {count} deps",
+      "optional": "optional"
+    },
+    "peer_dependencies": {
+      "title": "Peer Dependencies ({count})",
+      "list_label": "Package peer dependencies",
+      "show_all": "show all {count} peer deps"
+    },
+    "optional_dependencies": {
+      "title": "Optional Dependencies ({count})",
+      "list_label": "Package optional dependencies",
+      "show_all": "show all {count} optional deps"
+    },
+    "maintainers": {
+      "title": "Maintainers",
+      "list_label": "Package maintainers",
+      "you": "(you)",
+      "via": "via {teams}",
+      "remove_owner": "Remove {name} as owner",
+      "username_to_add": "Username to add as owner",
+      "username_placeholder": "username...",
+      "add_button": "add",
+      "cancel_add": "Cancel adding owner",
+      "add_owner": "+ Add owner"
+    },
+    "downloads": {
+      "title": "Weekly Downloads"
+    },
+    "install_scripts": {
+      "title": "Install Scripts",
+      "script_label": "(script)",
+      "npx_packages": "{count} npx package | {count} npx packages",
+      "currently": "currently {version}"
+    },
+    "playgrounds": {
+      "title": "Try it out",
+      "choose": "choose playground"
+    },
+    "metrics": {
+      "esm": "ES Modules only",
+      "cjs": "CommonJS only",
+      "dual": "Supports both CommonJS and ES Modules",
+      "unknown_format": "Unknown module format",
+      "ts_included": "TypeScript types included",
+      "types_from": "Types from {package}"
+    },
+    "license": {
+      "view_spdx": "View license text on SPDX"
+    },
+    "vulnerabilities": {
+      "no_description": "No description available",
+      "found": "{count} vulnerability found | {count} vulnerabilities found",
+      "no_summary": "No summary",
+      "view_details": "View vulnerability details",
+      "severity": {
+        "critical": "critical",
+        "high": "high",
+        "moderate": "moderate",
+        "low": "low"
+      }
+    },
+    "access": {
+      "title": "Team Access",
+      "refresh": "Refresh team access",
+      "list_label": "Team access list",
+      "owner": "owner",
+      "rw": "rw",
+      "ro": "ro",
+      "revoke_access": "Revoke {name} access",
+      "no_access": "No team access configured",
+      "select_team_label": "Select team",
+      "loading_teams": "Loading teams...",
+      "select_team": "Select team",
+      "permission_label": "Permission level",
+      "permission": {
+        "read_only": "read-only",
+        "read_write": "read-write"
+      },
+      "grant_button": "grant",
+      "cancel_grant": "Cancel granting access",
+      "grant_access": "+ Grant team access"
+    },
+    "list": {
+      "filter_label": "Filter packages",
+      "filter_placeholder": "Filter packages...",
+      "sort_label": "Sort packages",
+      "showing_count": "Showing {filtered} of {total} packages"
+    },
+    "skeleton": {
+      "loading": "Loading package details",
+      "license": "License",
+      "weekly": "Weekly",
+      "size": "Size",
+      "deps": "Deps",
+      "updated": "Updated",
+      "install": "Install",
+      "readme": "Readme",
+      "maintainers": "Maintainers",
+      "keywords": "Keywords",
+      "versions": "Versions",
+      "dependencies": "Dependencies"
+    },
+    "sort": {
+      "downloads": "Most downloaded",
+      "updated": "Recently updated",
+      "name_asc": "Name (A-Z)",
+      "name_desc": "Name (Z-A)"
+    }
+  },
+  "connector": {
+    "status": {
+      "connecting": "connecting...",
+      "connected_as": "connected as {'@'}{user}",
+      "connected": "connected",
+      "connect_cli": "connect local CLI",
+      "aria_connecting": "Connecting to local connector",
+      "aria_connected": "Connected to local connector",
+      "aria_click_to_connect": "Click to connect to local connector",
+      "avatar_alt": "{user}'s avatar"
+    },
+    "modal": {
+      "title": "Local Connector",
+      "close_modal": "Close modal",
+      "close": "Close",
+      "connected": "Connected",
+      "logged_in_as": "Logged in as {'@'}{user}",
+      "connected_hint": "You can now manage packages and organizations from the web UI.",
+      "disconnect": "Disconnect",
+      "run_hint": "Run the connector on your machine to enable admin features.",
+      "copy_command": "Copy command",
+      "copied": "Copied",
+      "paste_token": "Then paste the token below to connect:",
+      "token_label": "Token",
+      "token_placeholder": "paste token here...",
+      "advanced": "Advanced options",
+      "port_label": "Port",
+      "warning": "WARNING",
+      "warning_text": "This allows npmx to access your npm CLI. Only connect to sites you trust.",
+      "connect": "Connect",
+      "connecting": "Connecting..."
+    }
+  },
+  "operations": {
+    "queue": {
+      "title": "Operations Queue",
+      "clear_all": "clear all",
+      "refresh": "Refresh operations",
+      "empty": "No operations queued",
+      "empty_hint": "Add operations from package or org pages",
+      "active_label": "Active operations",
+      "otp_required": "OTP required",
+      "otp_prompt": "Enter OTP to continue",
+      "otp_placeholder": "Enter OTP code...",
+      "otp_label": "One-time password",
+      "retry_otp": "Retry with OTP",
+      "retrying": "Retrying...",
+      "approve_operation": "Approve operation",
+      "remove_operation": "Remove operation",
+      "approve_all": "Approve All",
+      "execute": "Execute",
+      "executing": "Executing...",
+      "log": "Log",
+      "log_label": "Completed operations log",
+      "remove_from_log": "Remove from log"
+    }
+  },
+  "org": {
+    "teams": {
+      "title": "Teams",
+      "refresh": "Refresh teams",
+      "filter_label": "Filter teams",
+      "filter_placeholder": "Filter teams...",
+      "sort_by": "Sort by",
+      "loading": "Loading teams...",
+      "no_teams": "No teams found",
+      "list_label": "Organization teams",
+      "delete_team": "Delete team {name}",
+      "member_count": "{count} member | {count} members",
+      "members_of": "Members of {team}",
+      "no_members": "No members",
+      "remove_user": "Remove {user} from team",
+      "username_to_add": "Username to add to {team}",
+      "username_placeholder": "username...",
+      "add_button": "add",
+      "cancel_add_user": "Cancel adding user",
+      "add_member": "+ Add member",
+      "team_name_label": "Team name",
+      "team_name_placeholder": "team-name...",
+      "create_button": "create",
+      "no_match": "No teams match \"{query}\"",
+      "cancel_create": "Cancel creating team",
+      "create_team": "+ Create team"
+    },
+    "members": {
+      "title": "Members",
+      "refresh": "Refresh members",
+      "filter_label": "Filter members",
+      "filter_placeholder": "Filter members...",
+      "filter_by_role": "Filter by role",
+      "filter_by_team": "Filter by team",
+      "all_teams": "all teams",
+      "sort_by": "Sort by",
+      "loading": "Loading members...",
+      "no_members": "No members found",
+      "list_label": "Organization members",
+      "change_role_for": "Change role for {name}",
+      "remove_from_org": "Remove {name} from org",
+      "view_team": "View {team} team",
+      "no_match": "No members match your filters",
+      "username_label": "Username",
+      "username_placeholder": "username...",
+      "role_label": "Role",
+      "role": {
+        "all": "all",
+        "developer": "developer",
+        "admin": "admin",
+        "owner": "owner"
+      },
+      "team_label": "Team",
+      "no_team": "no team",
+      "add_button": "add",
+      "cancel_add": "Cancel adding member",
+      "add_member": "+ Add member"
+    },
+    "public_packages": "{count} public package | {count} public packages",
+    "page": {
+      "packages_title": "Packages",
+      "members_tab": "Members",
+      "teams_tab": "Teams",
+      "no_packages": "No public packages found for",
+      "no_packages_hint": "This organization may not exist or has no public packages.",
+      "failed_to_load": "Failed to load organization packages",
+      "no_match": "No packages match \"{query}\""
+    }
+  },
+  "user": {
+    "combobox": {
+      "add_to_org_hint": "(will also add to org)",
+      "press_enter_to_add": "Press Enter to add {'@'}{username}",
+      "default_placeholder": "username...",
+      "suggestions_label": "User suggestions"
+    },
+    "page": {
+      "packages_title": "Packages",
+      "no_packages": "No public packages found for",
+      "no_packages_hint": "This user may not exist or has no public packages.",
+      "failed_to_load": "Failed to load user packages",
+      "no_match": "No packages match \"{query}\""
+    }
+  },
+  "claim": {
+    "modal": {
+      "title": "Claim Package Name",
+      "close_modal": "Close modal",
+      "close": "Close",
+      "success": "Package claimed!",
+      "success_detail": "{name}{'@'}0.0.0 has been published to npm.",
+      "success_hint": "You can now publish new versions to this package using npm publish.",
+      "view_package": "View Package",
+      "invalid_name": "Invalid package name:",
+      "available": "This name is available!",
+      "taken": "This name is already taken.",
+      "similar_warning": "Similar packages exist - npm may reject this name:",
+      "related": "Related packages:",
+      "scope_warning_title": "Consider using a scoped package instead",
+      "scope_warning_text": "Unscoped package names are a shared resource. Only claim a name if you intend to publish and maintain a package. For personal or organizational projects, use a scoped name like {'@'}{username}/{name}.",
+      "connect_required": "Connect to the local connector to claim this package name.",
+      "connect_button": "Connect to Connector",
+      "publish_hint": "This will publish a minimal placeholder package.",
+      "preview_json": "Preview package.json",
+      "claim_button": "Claim Package Name",
+      "publishing": "Publishing...",
+      "retry": "Retry",
+      "checking": "Checking availability...",
+      "failed_to_check": "Failed to check name availability",
+      "failed_to_claim": "Failed to claim package"
+    }
+  },
+  "code": {
+    "files_label": "Files",
+    "no_files": "No files in this directory",
+    "select_version": "Select version",
+    "root": "root",
+    "toggle_tree": "Toggle file tree",
+    "close_tree": "Close file tree",
+    "copy_link": "Copy link",
+    "raw": "Raw",
+    "view_raw": "View raw file",
+    "file_too_large": "File too large to preview",
+    "file_size_warning": "{size} exceeds the 500KB limit for syntax highlighting",
+    "load_anyway": "Load anyway",
+    "failed_to_load": "Failed to load file",
+    "unavailable_hint": "The file may be too large or unavailable",
+    "version_required": "Version is required to browse code",
+    "go_to_package": "Go to package",
+    "loading_tree": "Loading file tree...",
+    "failed_to_load_tree": "Failed to load files for this package version",
+    "back_to_package": "Back to package",
+    "table": {
+      "name": "Name",
+      "size": "Size"
+    }
+  },
+  "badges": {
+    "provenance": {
+      "verified": "verified",
+      "verified_title": "Verified provenance",
+      "verified_via": "Verified: published via {provider}"
+    },
+    "jsr": {
+      "title": "also available on JSR",
+      "label": "jsr"
+    }
+  },
+  "header": {
+    "home": "npmx home",
+    "github": "GitHub"
   }
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 73b024eba3..4ad728501e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -137,6 +137,7 @@ export default defineNuxtConfig({
     defaultLocale: 'en',
     strategy: 'no_prefix',
     detectBrowserLanguage: false,
-    locales: [{ code: 'en', name: 'English', file: 'en.json' }],
+    langDir: 'locales',
+    locales: [{ code: 'en', language: 'en-US', name: 'English', file: 'en.json' }],
   },
 })

From f43e01b84aa15f0a697e9110293df326dec3398d Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 11:05:56 +0000
Subject: [PATCH 10/13] fix: yet more keys!

---
 app/components/PackageDownloadStats.vue |  4 +++-
 app/components/PackageVersions.vue      | 26 ++++++++++++++++++++-----
 app/pages/@[org].vue                    |  6 +++---
 app/pages/[...package].vue              | 10 +++++-----
 app/pages/code/[...path].vue            |  2 +-
 app/pages/search.vue                    |  2 +-
 app/pages/~[username]/index.vue         |  2 +-
 i18n/locales/en.json                    | 16 +++++++++++----
 8 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/app/components/PackageDownloadStats.vue b/app/components/PackageDownloadStats.vue
index f452fb1e97..c823e00b41 100644
--- a/app/components/PackageDownloadStats.vue
+++ b/app/components/PackageDownloadStats.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   downloads?: Array<{
     downloads: number | null
@@ -12,7 +14,7 @@ const props = defineProps<{
 const dataset = computed(() =>
   props.downloads?.map(d => ({
     value: d?.downloads ?? 0,
-    period: `${d.weekStart ?? '-'} to ${d.weekEnd ?? '-'}`,
+    period: t('package.downloads.date_range', { start: d.weekStart ?? '-', end: d.weekEnd ?? '-' }),
   })),
 )
 
diff --git a/app/components/PackageVersions.vue b/app/components/PackageVersions.vue
index c08e1fad4f..ead68d2fbc 100644
--- a/app/components/PackageVersions.vue
+++ b/app/components/PackageVersions.vue
@@ -10,6 +10,8 @@ import {
 } from '~/utils/versions'
 import { fetchAllPackageVersions } from '~/composables/useNpmRegistry'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   packageName: string
   versions: Record<string, PackumentVersion>
@@ -340,7 +342,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 "
                 :title="
                   row.primaryVersion.deprecated
-                    ? `${row.primaryVersion.version} (deprecated)`
+                    ? t('package.versions.deprecated_title', {
+                        version: row.primaryVersion.version,
+                      })
                     : row.primaryVersion.version
                 "
               >
@@ -391,7 +395,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     ? 'text-red-400 hover:text-red-300'
                     : 'text-fg-subtle hover:text-fg-muted'
                 "
-                :title="v.deprecated ? `${v.version} (deprecated)` : v.version"
+                :title="
+                  v.deprecated
+                    ? t('package.versions.deprecated_title', { version: v.version })
+                    : v.version
+                "
               >
                 {{ v.version }}
               </NuxtLink>
@@ -470,7 +478,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 "
                 :title="
                   row.primaryVersion.deprecated
-                    ? `${row.primaryVersion.version} (deprecated)`
+                    ? t('package.versions.deprecated_title', {
+                        version: row.primaryVersion.version,
+                      })
                     : row.primaryVersion.version
                 "
               >
@@ -556,7 +566,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     "
                     :title="
                       group.versions[0].deprecated
-                        ? `${group.versions[0].version} (deprecated)`
+                        ? t('package.versions.deprecated_title', {
+                            version: group.versions[0].version,
+                          })
                         : group.versions[0].version
                     "
                   >
@@ -589,7 +601,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
                           ? 'text-red-400 hover:text-red-300'
                           : 'text-fg-subtle hover:text-fg-muted'
                       "
-                      :title="v.deprecated ? `${v.version} (deprecated)` : v.version"
+                      :title="
+                        v.deprecated
+                          ? t('package.versions.deprecated_title', { version: v.version })
+                          : v.version
+                      "
                     >
                       {{ v.version }}
                     </NuxtLink>
diff --git a/app/pages/@[org].vue b/app/pages/@[org].vue
index 3f9d81a1ad..175337326b 100644
--- a/app/pages/@[org].vue
+++ b/app/pages/@[org].vue
@@ -44,8 +44,8 @@ const { data: results, status, error } = await useOrgPackages(orgName)
 if (status.value === 'error' && error.value?.statusCode === 404) {
   throw createError({
     statusCode: 404,
-    statusMessage: 'Organization not found',
-    message: `The organization "@${orgName.value}" does not exist on npm`,
+    statusMessage: t('org.page.not_found'),
+    message: t('org.page.not_found_message', { name: orgName.value }),
   })
 }
 
@@ -222,7 +222,7 @@ defineOgImageComponent('Default', {
       <PackageListControls
         v-model:filter="filterText"
         v-model:sort="sortOption"
-        :placeholder="`Filter ${packageCount} packages...`"
+        :placeholder="t('org.page.filter_placeholder', { count: packageCount })"
         :total-count="packageCount"
         :filtered-count="filteredCount"
       />
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 5afc9c4c14..917d4331d8 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -433,7 +433,7 @@ defineOgImageComponent('Package', {
               <NuxtLink
                 v-if="resolvedVersion !== requestedVersion"
                 :to="`/${pkg.name}/v/${displayVersion.version}`"
-                title="View permalink for this version"
+                :title="t('package.view_permalink')"
                 >{{ displayVersion.version }}</NuxtLink
               >
               <span v-else>v{{ displayVersion.version }}</span>
@@ -444,7 +444,7 @@ defineOgImageComponent('Package', {
                 target="_blank"
                 rel="noopener noreferrer"
                 class="inline-flex items-center justify-center gap-1.5 text-fg-muted hover:text-fg transition-colors duration-200 min-w-6 min-h-6"
-                title="Verified provenance"
+                :title="t('package.verified_provenance')"
               >
                 <span
                   class="i-solar-shield-check-outline w-3.5 h-3.5 shrink-0"
@@ -483,11 +483,11 @@ defineOgImageComponent('Package', {
               target="_blank"
               rel="noopener noreferrer"
               class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ml-auto shrink-0 self-center"
-              title="View on npm"
+              :title="t('common.view_on_npm')"
             >
               <span class="i-carbon-logo-npm w-4 h-4" aria-hidden="true" />
               <span class="hidden sm:inline">npm</span>
-              <span class="sr-only sm:hidden">View on npm</span>
+              <span class="sr-only sm:hidden">{{ t('common.view_on_npm') }}</span>
             </a>
           </div>
 
@@ -850,7 +850,7 @@ defineOgImageComponent('Package', {
                   v-if="typesPackageName"
                   :to="`/${typesPackageName}`"
                   class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                  title="View @types package"
+                  :title="t('package.install.view_types', { package: typesPackageName })"
                 >
                   <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
                   <span class="sr-only">View {{ typesPackageName }}</span>
diff --git a/app/pages/code/[...path].vue b/app/pages/code/[...path].vue
index 85f8d5549d..319885aace 100644
--- a/app/pages/code/[...path].vue
+++ b/app/pages/code/[...path].vue
@@ -404,7 +404,7 @@ useSeoMeta({
             class="sticky top-0 bg-bg border-b border-border px-4 py-2 flex items-center justify-between"
           >
             <div class="flex items-center gap-3 text-sm">
-              <span class="text-fg-muted">{{ fileContent.lines }} lines</span>
+              <span class="text-fg-muted">{{ t('code.lines', { count: fileContent.lines }) }}</span>
               <span v-if="currentNode?.size" class="text-fg-subtle">{{
                 formatBytes(currentNode.size)
               }}</span>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 55c5907083..d9de4aae01 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -399,7 +399,7 @@ defineOgImageComponent('Default', {
     <div class="container pt-20 pb-6">
       <section v-if="query" aria-label="Search results" @keydown="handleResultsKeydown">
         <!-- Initial loading (only after user interaction, not during view transition) -->
-        <LoadingSpinner v-if="showSearching" text="Searching…" />
+        <LoadingSpinner v-if="showSearching" :text="t('search.searching')" />
 
         <div v-else-if="visibleResults">
           <!-- Claim prompt - shown at top when valid name but no exact match -->
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index 273262fa85..ba56720a77 100644
--- a/app/pages/~[username]/index.vue
+++ b/app/pages/~[username]/index.vue
@@ -239,7 +239,7 @@ defineOgImageComponent('Default', {
       <PackageListControls
         v-model:filter="filterText"
         v-model:sort="sortOption"
-        :placeholder="`Filter ${packageCount} packages...`"
+        :placeholder="t('user.page.filter_placeholder', { count: packageCount })"
         :total-count="packageCount"
         :filtered-count="filteredCount"
       />
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 4b9389a9b1..91a146ad96 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -18,6 +18,7 @@
     "placeholder": "search packages...",
     "button": "search",
     "clear": "Clear search",
+    "searching": "Searching...",
     "found_packages": "Found {count} packages",
     "updating": "(updating...)",
     "no_results": "No packages found for \"{query}\"",
@@ -117,7 +118,8 @@
       "expand": "Expand {tag}",
       "other_versions": "Other versions",
       "more_tagged": "{count} more tagged",
-      "all_covered": "All versions are covered by tags above"
+      "all_covered": "All versions are covered by tags above",
+      "deprecated_title": "{version} (deprecated)"
     },
     "dependencies": {
       "title": "Dependencies ({count})",
@@ -148,7 +150,8 @@
       "add_owner": "+ Add owner"
     },
     "downloads": {
-      "title": "Weekly Downloads"
+      "title": "Weekly Downloads",
+      "date_range": "{start} to {end}"
     },
     "install_scripts": {
       "title": "Install Scripts",
@@ -354,7 +357,10 @@
       "no_packages": "No public packages found for",
       "no_packages_hint": "This organization may not exist or has no public packages.",
       "failed_to_load": "Failed to load organization packages",
-      "no_match": "No packages match \"{query}\""
+      "no_match": "No packages match \"{query}\"",
+      "not_found": "Organization not found",
+      "not_found_message": "The organization \"{'@'}{name}\" does not exist on npm",
+      "filter_placeholder": "Filter {count} packages..."
     }
   },
   "user": {
@@ -369,7 +375,8 @@
       "no_packages": "No public packages found for",
       "no_packages_hint": "This user may not exist or has no public packages.",
       "failed_to_load": "Failed to load user packages",
-      "no_match": "No packages match \"{query}\""
+      "no_match": "No packages match \"{query}\"",
+      "filter_placeholder": "Filter {count} packages..."
     }
   },
   "claim": {
@@ -405,6 +412,7 @@
     "no_files": "No files in this directory",
     "select_version": "Select version",
     "root": "root",
+    "lines": "{count} lines",
     "toggle_tree": "Toggle file tree",
     "close_tree": "Close file tree",
     "copy_link": "Copy link",

From bda30f5dd2f090448d56f8cbfa2cbd902454b302 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 11:11:39 +0000
Subject: [PATCH 11/13] fix: extract keys for new header dropdown + orgs pages

---
 app/components/HeaderOrgsDropdown.vue     | 15 +++++----
 app/components/HeaderPackagesDropdown.vue | 15 +++++----
 app/pages/~[username]/orgs.vue            | 38 ++++++++++++++---------
 i18n/locales/en.json                      | 32 ++++++++++++++++++-
 4 files changed, 73 insertions(+), 27 deletions(-)

diff --git a/app/components/HeaderOrgsDropdown.vue b/app/components/HeaderOrgsDropdown.vue
index 4e17eb2a97..1b42168d0b 100644
--- a/app/components/HeaderOrgsDropdown.vue
+++ b/app/components/HeaderOrgsDropdown.vue
@@ -3,6 +3,7 @@ const props = defineProps<{
   username: string
 }>()
 
+const { t } = useI18n()
 const { listUserOrgs } = useConnector()
 
 const isOpen = ref(false)
@@ -61,7 +62,7 @@ function handleKeydown(event: KeyboardEvent) {
       :to="`/~${username}/orgs`"
       class="link-subtle font-mono text-sm inline-flex items-center gap-1"
     >
-      orgs
+      {{ t('header.orgs') }}
       <span
         class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
@@ -78,15 +79,17 @@ function handleKeydown(event: KeyboardEvent) {
       <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-56 z-50">
         <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
           <div class="px-3 py-2 border-b border-border">
-            <span class="font-mono text-xs text-fg-subtle">Your Organizations</span>
+            <span class="font-mono text-xs text-fg-subtle">{{
+              t('header.orgs_dropdown.title')
+            }}</span>
           </div>
 
           <div v-if="isLoading" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">Loading…</span>
+            <span class="text-fg-muted text-sm">{{ t('header.orgs_dropdown.loading') }}</span>
           </div>
 
           <div v-else-if="error" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ error }}</span>
+            <span class="text-fg-muted text-sm">{{ t('header.orgs_dropdown.error') }}</span>
           </div>
 
           <ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
@@ -101,7 +104,7 @@ function handleKeydown(event: KeyboardEvent) {
           </ul>
 
           <div v-else class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">No organizations found</span>
+            <span class="text-fg-muted text-sm">{{ t('header.orgs_dropdown.empty') }}</span>
           </div>
 
           <div class="px-3 py-2 border-t border-border">
@@ -109,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
               :to="`/~${username}/orgs`"
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
-              View all
+              {{ t('header.orgs_dropdown.view_all') }}
               <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>
diff --git a/app/components/HeaderPackagesDropdown.vue b/app/components/HeaderPackagesDropdown.vue
index d568614f24..9659b7b3ef 100644
--- a/app/components/HeaderPackagesDropdown.vue
+++ b/app/components/HeaderPackagesDropdown.vue
@@ -3,6 +3,7 @@ const props = defineProps<{
   username: string
 }>()
 
+const { t } = useI18n()
 const { listUserPackages } = useConnector()
 
 const isOpen = ref(false)
@@ -61,7 +62,7 @@ function handleKeydown(event: KeyboardEvent) {
       :to="`/~${username}`"
       class="link-subtle font-mono text-sm inline-flex items-center gap-1"
     >
-      packages
+      {{ t('header.packages') }}
       <span
         class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
@@ -78,15 +79,17 @@ function handleKeydown(event: KeyboardEvent) {
       <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-64 z-50">
         <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
           <div class="px-3 py-2 border-b border-border">
-            <span class="font-mono text-xs text-fg-subtle">Your Packages</span>
+            <span class="font-mono text-xs text-fg-subtle">{{
+              t('header.packages_dropdown.title')
+            }}</span>
           </div>
 
           <div v-if="isLoading" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">Loading…</span>
+            <span class="text-fg-muted text-sm">{{ t('header.packages_dropdown.loading') }}</span>
           </div>
 
           <div v-else-if="error" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ error }}</span>
+            <span class="text-fg-muted text-sm">{{ t('header.packages_dropdown.error') }}</span>
           </div>
 
           <ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
@@ -101,7 +104,7 @@ function handleKeydown(event: KeyboardEvent) {
           </ul>
 
           <div v-else class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">No packages found</span>
+            <span class="text-fg-muted text-sm">{{ t('header.packages_dropdown.empty') }}</span>
           </div>
 
           <div class="px-3 py-2 border-t border-border">
@@ -109,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
               :to="`/~${username}`"
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
-              View all
+              {{ t('header.packages_dropdown.view_all') }}
               <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index 9fc35b0ceb..1781e32084 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const { t } = useI18n()
 const route = useRoute('~username-orgs')
 
 const username = computed(() => route.params.username)
@@ -119,7 +120,7 @@ useSeoMeta({
         </div>
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">@{{ username }}</h1>
-          <p class="text-fg-muted text-sm mt-1">Organizations</p>
+          <p class="text-fg-muted text-sm mt-1">{{ t('user.orgs_page.title') }}</p>
         </div>
       </div>
 
@@ -130,7 +131,7 @@ useSeoMeta({
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
         >
           <span class="i-carbon-arrow-left w-4 h-4" aria-hidden="true" />
-          Back to profile
+          {{ t('user.orgs_page.back_to_profile') }}
         </NuxtLink>
       </nav>
     </header>
@@ -138,40 +139,43 @@ useSeoMeta({
     <!-- Not connected state -->
     <ClientOnly>
       <div v-if="!isConnected" class="py-12 text-center">
-        <p class="text-fg-muted mb-4">Connect the local CLI to view your organizations.</p>
+        <p class="text-fg-muted mb-4">{{ t('user.orgs_page.connect_required') }}</p>
         <p class="text-fg-subtle text-sm">
-          Run <code class="font-mono bg-bg-subtle px-1.5 py-0.5 rounded">npx @npmx.dev/cli</code> to
-          get started.
+          {{ t('user.orgs_page.connect_hint_prefix') }}
+          <code class="font-mono bg-bg-subtle px-1.5 py-0.5 rounded">npx @npmx.dev/cli</code>
+          {{ t('user.orgs_page.connect_hint_suffix') }}
         </p>
       </div>
 
       <!-- Not own profile state -->
       <div v-else-if="!isOwnProfile" class="py-12 text-center">
-        <p class="text-fg-muted">You can only view your own organizations.</p>
-        <NuxtLink :to="`/~${npmUser}/orgs`" class="btn mt-4">View your organizations</NuxtLink>
+        <p class="text-fg-muted">{{ t('user.orgs_page.own_orgs_only') }}</p>
+        <NuxtLink :to="`/~${npmUser}/orgs`" class="btn mt-4">{{
+          t('user.orgs_page.view_your_orgs')
+        }}</NuxtLink>
       </div>
 
       <!-- Loading state -->
-      <LoadingSpinner v-else-if="isLoading" text="Loading organizations..." />
+      <LoadingSpinner v-else-if="isLoading" :text="t('user.orgs_page.loading')" />
 
       <!-- Error state -->
       <div v-else-if="error" role="alert" class="py-12 text-center">
         <p class="text-fg-muted mb-4">{{ error }}</p>
-        <button type="button" class="btn" @click="loadOrgs">Try again</button>
+        <button type="button" class="btn" @click="loadOrgs">{{ t('common.try_again') }}</button>
       </div>
 
       <!-- Empty state -->
       <div v-else-if="orgs.length === 0" class="py-12 text-center">
-        <p class="text-fg-muted">No organizations found.</p>
+        <p class="text-fg-muted">{{ t('user.orgs_page.empty') }}</p>
         <p class="text-fg-subtle text-sm mt-2">
-          Organizations are detected from your scoped packages.
+          {{ t('user.orgs_page.empty_hint') }}
         </p>
       </div>
 
       <!-- Orgs list -->
-      <section v-else aria-label="Organizations">
+      <section v-else :aria-label="t('user.orgs_page.title')">
         <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
-          {{ orgs.length }} Organization{{ orgs.length === 1 ? '' : 's' }}
+          {{ t('user.orgs_page.count', { count: orgs.length }, orgs.length) }}
         </h2>
 
         <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -212,7 +216,13 @@ useSeoMeta({
                 <div class="flex items-center gap-1.5">
                   <span class="i-carbon-cube w-4 h-4" aria-hidden="true" />
                   <span v-if="org.packageCount !== null">
-                    {{ org.packageCount }} package{{ org.packageCount === 1 ? '' : 's' }}
+                    {{
+                      t(
+                        'user.orgs_page.packages_count',
+                        { count: org.packageCount },
+                        org.packageCount,
+                      )
+                    }}
                   </span>
                   <span v-else-if="org.isLoadingDetails" class="skeleton inline-block h-4 w-20" />
                   <span v-else class="text-fg-subtle">—</span>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 91a146ad96..3e16fbd8de 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -377,6 +377,20 @@
       "failed_to_load": "Failed to load user packages",
       "no_match": "No packages match \"{query}\"",
       "filter_placeholder": "Filter {count} packages..."
+    },
+    "orgs_page": {
+      "title": "Organizations",
+      "back_to_profile": "Back to profile",
+      "connect_required": "Connect the local CLI to view your organizations.",
+      "connect_hint_prefix": "Run",
+      "connect_hint_suffix": "to get started.",
+      "own_orgs_only": "You can only view your own organizations.",
+      "view_your_orgs": "View your organizations",
+      "loading": "Loading organizations...",
+      "empty": "No organizations found.",
+      "empty_hint": "Organizations are detected from your scoped packages.",
+      "count": "{count} Organization | {count} Organizations",
+      "packages_count": "{count} package | {count} packages"
     }
   },
   "claim": {
@@ -446,6 +460,22 @@
   },
   "header": {
     "home": "npmx home",
-    "github": "GitHub"
+    "github": "GitHub",
+    "packages": "packages",
+    "packages_dropdown": {
+      "title": "Your Packages",
+      "loading": "Loading...",
+      "error": "Failed to load packages",
+      "empty": "No packages found",
+      "view_all": "View all"
+    },
+    "orgs": "orgs",
+    "orgs_dropdown": {
+      "title": "Your Organizations",
+      "loading": "Loading...",
+      "error": "Failed to load organizations",
+      "empty": "No organizations found",
+      "view_all": "View all"
+    }
   }
 }

From 0655cadcfdcdc5f5307fcc23580cd95c51be1994 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 12:19:41 +0000
Subject: [PATCH 12/13] fix: workaround upstream nuxt issue

---
 nuxt.config.ts      | 14 ++++++++++++++
 shared/utils/npm.ts |  1 +
 2 files changed, 15 insertions(+)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4ad728501e..4a82b42b27 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,6 +7,20 @@ export default defineNuxtConfig({
         nuxt.options.pwa.pwaAssets.disabled = true
       }
     },
+    // Workaround for Nuxt 4.3.0 regression: https://github.com/nuxt/nuxt/issues/34140
+    // shared-imports.d.ts pulls in app composables during type-checking of shared context,
+    // but the shared context doesn't have access to auto-import globals.
+    // TODO: Remove when Nuxt fixes this upstream
+    function (_, nuxt) {
+      nuxt.hook('prepare:types', ({ sharedReferences }) => {
+        const idx = sharedReferences.findIndex(
+          ref => 'path' in ref && ref.path.endsWith('shared-imports.d.ts'),
+        )
+        if (idx !== -1) {
+          sharedReferences.splice(idx, 1)
+        }
+      })
+    },
     '@unocss/nuxt',
     '@nuxtjs/html-validator',
     '@nuxt/scripts',
diff --git a/shared/utils/npm.ts b/shared/utils/npm.ts
index 18e66763f7..ab90812212 100644
--- a/shared/utils/npm.ts
+++ b/shared/utils/npm.ts
@@ -1,3 +1,4 @@
+import { createError } from 'h3'
 import validatePackageName from 'validate-npm-package-name'
 
 /**

From e9924b698b649e9d24feba57f6e2d84ae887f0a7 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 12:31:02 +0000
Subject: [PATCH 13/13] fix: extract additional strings from merge

---
 .vscode/settings.json                     | 3 ++-
 app/components/HeaderOrgsDropdown.vue     | 4 ++--
 app/components/HeaderPackagesDropdown.vue | 4 ++--
 app/pages/~[username]/orgs.vue            | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f95a4ad2fd..f33841cbac 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-  "i18n-ally.localesPaths": ["./i18n/locales"]
+  "i18n-ally.localesPaths": ["./i18n/locales"],
+  "i18n-ally.keystyle": "nested"
 }
diff --git a/app/components/HeaderOrgsDropdown.vue b/app/components/HeaderOrgsDropdown.vue
index 1b42168d0b..35fbc8dfd7 100644
--- a/app/components/HeaderOrgsDropdown.vue
+++ b/app/components/HeaderOrgsDropdown.vue
@@ -23,11 +23,11 @@ async function loadOrgs() {
       // Already sorted alphabetically by server, take top 10
       orgs.value = orgList.slice(0, 10)
     } else {
-      error.value = 'Failed to load organizations'
+      error.value = t('header.orgs_dropdown.error')
     }
     hasLoaded.value = true
   } catch {
-    error.value = 'Failed to load organizations'
+    error.value = t('header.orgs_dropdown.error')
   } finally {
     isLoading.value = false
   }
diff --git a/app/components/HeaderPackagesDropdown.vue b/app/components/HeaderPackagesDropdown.vue
index 9659b7b3ef..4c77e50400 100644
--- a/app/components/HeaderPackagesDropdown.vue
+++ b/app/components/HeaderPackagesDropdown.vue
@@ -23,11 +23,11 @@ async function loadPackages() {
       // Sort alphabetically and take top 10
       packages.value = Object.keys(pkgMap).sort().slice(0, 10)
     } else {
-      error.value = 'Failed to load packages'
+      error.value = t('header.packages_dropdown.error')
     }
     hasLoaded.value = true
   } catch {
-    error.value = 'Failed to load packages'
+    error.value = t('header.packages_dropdown.error')
   } finally {
     isLoading.value = false
   }
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index 1781e32084..ac41e41749 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -73,10 +73,10 @@ async function loadOrgs() {
       // Load details for each org in parallel
       await Promise.all(orgs.value.map(org => loadOrgDetails(org)))
     } else {
-      error.value = 'Failed to load organizations'
+      error.value = t('header.orgs_dropdown.error')
     }
   } catch (e) {
-    error.value = e instanceof Error ? e.message : 'Failed to load organizations'
+    error.value = e instanceof Error ? e.message : t('header.orgs_dropdown.error')
   } finally {
     isLoading.value = false
   }