From 2af401151606cb5768acb9fd5d661a9dcaab1b05 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 1 Apr 2026 10:33:21 +0100
Subject: [PATCH 1/9] chore: disallow crawlers by default

---
 public/robots.txt | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/robots.txt b/public/robots.txt
index bdd4add700..1efdb87b4f 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,5 +1,19 @@
-User-agent: *
-Allow: /
+Allow: /$
+Allow: /about$
+Allow: /accessibility$
+Allow: /blog
+Allow: /brand$
+Allow: /pds$
+Allow: /privacy$
+Allow: /translation-status$
+Allow: /recharging$
+Allow: /__og-image__/*
+Allow: /opensearch.xml$
+
+Disallow: /
+
+# User-agent: *
+# Allow: /
 
 # Search pages: infinite query-param combinations
 Disallow: /search

From 2ca79ab8e20fe0335bc804c79d68f01e50af822f Mon Sep 17 00:00:00 2001
From: Alex Savelyev <91429106+alexdln@users.noreply.github.com>
Date: Wed, 1 Apr 2026 18:23:05 +0100
Subject: [PATCH 2/9] feat: apply April research results (#2353)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 app/assets/main.css    | 193 +++++++++++++++++++++--------------------
 app/pages/index.vue    |  10 +++
 app/pages/settings.vue |   6 +-
 vercel.json            |   4 +
 4 files changed, 117 insertions(+), 96 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 8897b7da18..1d279645bb 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -5,83 +5,84 @@
   box-sizing: border-box;
 }
 
-:root:not([data-theme='light']),
-:root[data-theme='dark'] {
-  /* background colors */
-  --bg: var(--bg-color, oklch(0.171 0 0));
-  --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0));
-  --bg-muted: var(--bg-muted-color, oklch(0.236 0 0));
-  --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0));
-
-  /* text colors */
-  --fg: oklch(0.982 0 0);
-  --fg-muted: oklch(0.749 0 0);
-  --fg-subtle: oklch(0.673 0 0);
-
-  /* border, separator colors */
-  --border: oklch(0.269 0 0);
-  --border-subtle: oklch(0.239 0 0);
-  --border-hover: oklch(0.371 0 0);
-
-  /* accent color, set by user from settings */
-  --accent: var(--accent-color, oklch(0.787 0.128 230.318));
-  --accent-muted: var(--accent-color, oklch(0.922 0 0));
-
-  /* accent colors */
-  --swatch-sky: oklch(0.787 0.128 230.318);
-  --swatch-coral: oklch(0.704 0.177 14.75);
-  --swatch-amber: oklch(0.828 0.165 84.429);
-  --swatch-emerald: oklch(0.792 0.153 166.95);
-  --swatch-violet: oklch(0.78 0.148 286.067);
-  --swatch-magenta: oklch(0.78 0.15 330);
-  --swatch-neutral: oklch(1 0 0);
-
-  /* syntax highlighting colors */
-  --syntax-fn: oklch(0.727 0.137 299.149);
-  --syntax-str: oklch(0.829 0.088 252.458);
-  --syntax-kw: oklch(0.721 0.162 15.494);
-  --syntax-comment: oklch(0.551 0.019 250.976);
-
-  /* badge colors for background & text */
-  --badge-orange: oklch(0.67 0.185 55);
-  --badge-yellow: oklch(0.588 0.183 91);
-  --badge-green: oklch(0.566 0.202 165);
-  --badge-cyan: oklch(0.571 0.181 210);
-  --badge-blue: oklch(0.579 0.191 252);
-  --badge-indigo: oklch(0.573 0.262 276.966);
-  --badge-purple: oklch(0.495 0.172 295);
-  --badge-pink: oklch(0.584 0.189 343);
-}
-
-:root[data-theme='dark'][data-bg-theme='slate'] {
-  --bg: oklch(0.151 0.018 264.695);
-  --bg-subtle: oklch(0.179 0.015 262.421);
-  --bg-muted: oklch(0.214 0.018 261.234);
-  --bg-elevated: oklch(0.259 0.021 260.031);
-}
-
-:root[data-theme='dark'][data-bg-theme='zinc'] {
-  --bg: oklch(0.158 0.005 285.823);
-  --bg-subtle: oklch(0.188 0.005 285.894);
-  --bg-muted: oklch(0.219 0.005 285.929);
-  --bg-elevated: oklch(0.256 0.006 286.033);
-}
-
-:root[data-theme='dark'][data-bg-theme='stone'] {
-  --bg: oklch(0.164 0.004 89.25);
-  --bg-subtle: oklch(0.198 0.008 89.321);
-  --bg-muted: oklch(0.228 0.015 89.386);
-  --bg-elevated: oklch(0.252 0.018 84.298);
-}
-
-:root[data-theme='dark'][data-bg-theme='black'] {
-  --bg: oklch(0 0 0);
-  --bg-subtle: oklch(0.148 0 0);
-  --bg-muted: oklch(0.204 0 0);
-  --bg-elevated: oklch(0.264 0 0);
-}
-
-:root[data-theme='light'] {
+/* :root:not([data-theme='light']), */
+/* :root[data-theme='dark'] { */
+/* background colors */
+/* --bg: var(--bg-color, oklch(0.171 0 0)); */
+/* --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0)); */
+/* --bg-muted: var(--bg-muted-color, oklch(0.236 0 0)); */
+/* --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0)); */
+
+/* text colors */
+/* --fg: oklch(0.982 0 0); */
+/* --fg-muted: oklch(0.749 0 0); */
+/* --fg-subtle: oklch(0.673 0 0); */
+
+/* border, separator colors */
+/* --border: oklch(0.269 0 0); */
+/* --border-subtle: oklch(0.239 0 0); */
+/* --border-hover: oklch(0.371 0 0); */
+
+/* accent color, set by user from settings */
+/* --accent: var(--accent-color, oklch(0.787 0.128 230.318)); */
+/* --accent-muted: var(--accent-color, oklch(0.922 0 0)); */
+
+/* accent colors */
+/* --swatch-sky: oklch(0.787 0.128 230.318); */
+/* --swatch-coral: oklch(0.704 0.177 14.75); */
+/* --swatch-amber: oklch(0.828 0.165 84.429); */
+/* --swatch-emerald: oklch(0.792 0.153 166.95); */
+/* --swatch-violet: oklch(0.78 0.148 286.067); */
+/* --swatch-magenta: oklch(0.78 0.15 330); */
+/* --swatch-neutral: oklch(1 0 0); */
+
+/* syntax highlighting colors */
+/* --syntax-fn: oklch(0.727 0.137 299.149); */
+/* --syntax-str: oklch(0.829 0.088 252.458); */
+/* --syntax-kw: oklch(0.721 0.162 15.494); */
+/* --syntax-comment: oklch(0.551 0.019 250.976); */
+
+/* badge colors for background & text */
+/* --badge-orange: oklch(0.67 0.185 55); */
+/* --badge-yellow: oklch(0.588 0.183 91); */
+/* --badge-green: oklch(0.566 0.202 165); */
+/* --badge-cyan: oklch(0.571 0.181 210); */
+/* --badge-blue: oklch(0.579 0.191 252); */
+/* --badge-indigo: oklch(0.573 0.262 276.966); */
+/* --badge-purple: oklch(0.495 0.172 295); */
+/* --badge-pink: oklch(0.584 0.189 343); */
+/* } */
+
+/* :root[data-theme='dark'][data-bg-theme='slate'] { */
+/* --bg: oklch(0.151 0.018 264.695); */
+/* --bg-subtle: oklch(0.179 0.015 262.421); */
+/* --bg-muted: oklch(0.214 0.018 261.234); */
+/* --bg-elevated: oklch(0.259 0.021 260.031); */
+/* } */
+
+/* :root[data-theme='dark'][data-bg-theme='zinc'] { */
+/* --bg: oklch(0.158 0.005 285.823); */
+/* --bg-subtle: oklch(0.188 0.005 285.894); */
+/* --bg-muted: oklch(0.219 0.005 285.929); */
+/* --bg-elevated: oklch(0.256 0.006 286.033); */
+/* } */
+
+/* :root[data-theme='dark'][data-bg-theme='stone'] { */
+/* --bg: oklch(0.164 0.004 89.25); */
+/* --bg-subtle: oklch(0.198 0.008 89.321); */
+/* --bg-muted: oklch(0.228 0.015 89.386); */
+/* --bg-elevated: oklch(0.252 0.018 84.298); */
+/* } */
+
+/* :root[data-theme='dark'][data-bg-theme='black'] { */
+/* --bg: oklch(0 0 0); */
+/* --bg-subtle: oklch(0.148 0 0); */
+/* --bg-muted: oklch(0.204 0 0); */
+/* --bg-elevated: oklch(0.264 0 0); */
+/* } */
+
+/* :root[data-theme='light'] { */
+:root {
   --bg: var(--bg-color, oklch(1 0 0));
   --bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
   --bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
@@ -122,45 +123,50 @@
   --badge-cyan: oklch(0.571 0.181 210);
 }
 
-:root[data-theme='light'][data-bg-theme='slate'] {
+/* :root[data-theme='light'][data-bg-theme='slate'] { */
+:root[data-bg-theme='slate'] {
   --bg: oklch(1 0 0);
   --bg-subtle: oklch(0.982 0.008 269.62);
   --bg-muted: oklch(0.96 0.008 261.234);
   --bg-elevated: oklch(0.943 0.012 255.52);
 }
 
-:root[data-theme='light'][data-bg-theme='zinc'] {
+/* :root[data-theme='light'][data-bg-theme='zinc'] { */
+:root[data-bg-theme='zinc'] {
   --bg: oklch(1 0 0);
   --bg-subtle: oklch(0.979 0.004 286.53);
   --bg-muted: oklch(0.958 0.004 286.39);
   --bg-elevated: oklch(0.939 0.004 286.32);
 }
 
-:root[data-theme='light'][data-bg-theme='stone'] {
+/* :root[data-theme='light'][data-bg-theme='stone'] { */
+:root[data-bg-theme='stone'] {
   --bg: oklch(1 0 0);
   --bg-subtle: oklch(0.979 0.004 88.762);
   --bg-muted: oklch(0.958 0.005 88.743);
   --bg-elevated: oklch(0.943 0.005 88.731);
 }
 
-:root[data-theme='light'][data-bg-theme='black'] {
+/* :root[data-theme='light'][data-bg-theme='black'] { */
+:root[data-bg-theme='black'] {
   --bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0));
 }
 
 @media (prefers-contrast: more) {
-  :root[data-theme='dark'] {
-    /* text colors */
-    --fg: oklch(1 0 0);
-    --fg-muted: oklch(0.769 0 0);
-    --fg-subtle: oklch(0.693 0 0);
+  /* :root[data-theme='dark'] { */
+  /* text colors */
+  /* --fg: oklch(1 0 0); */
+  /* --fg-muted: oklch(0.769 0 0); */
+  /* --fg-subtle: oklch(0.693 0 0); */
 
-    /* border, separator colors */
-    --border: oklch(0.769 0 0);
-    --border-subtle: oklch(0.739 0 0);
-    --border-hover: oklch(0.771 0 0);
-  }
+  /* border, separator colors */
+  /* --border: oklch(0.769 0 0); */
+  /* --border-subtle: oklch(0.739 0 0); */
+  /* --border-hover: oklch(0.771 0 0); */
+  /* } */
 
-  :root[data-theme='light'] {
+  /* :root[data-theme='light'] { */
+  :root {
     /* text colors */
     --fg: oklch(0 0 0);
     --fg-muted: oklch(0.329 0 0);
@@ -275,7 +281,8 @@ dd {
 }
 
 /* Shiki theme colors */
-html.light .shiki {
+/* html.light .shiki { */
+html .shiki {
   color: var(--shiki-light) !important;
   background-color: var(--shiki-light-bg) !important;
 
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 48c5575b00..2f094d3a1a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -92,6 +92,16 @@ defineOgImageComponent('Default', {
         </search>
 
         <BuildEnvironment class="mt-4" />
+        <p class="max-w-3xl mx-auto text-center">
+          <b>Update:</b>
+          We’ve completed our user experience research and carefully reviewed the results. To
+          deliver the best possible experience, we’ve decided to <b>remove the dark theme</b>. We’re
+          committed to making decisions based on what works best for our users and are glad we took
+          the time to validate this through
+          <a href="/theme-research" target="_blank" rel="noopener noreferrer" class="underline"
+            >user research</a
+          >. Thank you for participating 🤍
+        </p>
       </header>
 
       <nav
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index e90faf551f..6181fd58a5 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -2,7 +2,7 @@
 const router = useRouter()
 const { settings } = useSettings()
 const { locale: currentLocale, locales, setLocale: setNuxti18nLocale } = useI18n()
-const colorMode = useColorMode()
+// const colorMode = useColorMode()
 const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
 
@@ -66,7 +66,7 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
           </h2>
           <div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-6">
             <!-- Theme selector -->
-            <div class="space-y-2">
+            <!-- <div class="space-y-2">
               <label for="theme-select" class="block text-sm text-fg font-medium">
                 {{ $t('settings.theme') }}
               </label>
@@ -82,7 +82,7 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
                   { label: $t('settings.theme_dark'), value: 'dark' },
                 ]"
               />
-            </div>
+            </div> -->
 
             <!-- Accent colors -->
             <div class="space-y-3">
diff --git a/vercel.json b/vercel.json
index 351f0d4bf9..dad531ee02 100644
--- a/vercel.json
+++ b/vercel.json
@@ -2,6 +2,10 @@
   "$schema": "https://openapi.vercel.sh/vercel.json",
   "trailingSlash": false,
   "redirects": [
+    {
+      "source": "/theme-research",
+      "destination": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+    },
     {
       "source": "/(.*)",
       "has": [

From 6b5b8474b10a93b7aeee7dea7fb1b77df1b7600d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <hello@nicr.dev>
Date: Wed, 1 Apr 2026 23:13:49 +0200
Subject: [PATCH 3/9] feat: add logo to OAuth metadata (#2355)

---
 server/utils/atproto/oauth.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/utils/atproto/oauth.ts b/server/utils/atproto/oauth.ts
index 58152fd2b1..ae9ba489d2 100644
--- a/server/utils/atproto/oauth.ts
+++ b/server/utils/atproto/oauth.ts
@@ -41,11 +41,11 @@ export function getOauthClientMetadata(pkAlg: string | undefined = undefined): O
     ? webUriSchema.parse(`${clientUri}/.well-known/jwks.json`)
     : undefined
 
-  // If anything changes here, please make sure to also update /shared/schemas/oauth.ts to match
   return {
     client_name: 'npmx.dev',
     client_id,
     client_uri: clientUri,
+    logo_uri: webUriSchema.parse(`${clientUri}/logo-icon.svg`),
     scope,
     redirect_uris: [redirect_uri],
     grant_types: ['authorization_code', 'refresh_token'],

From a28563bf350ea2b14fa986abdfc2f3be1cebb565 Mon Sep 17 00:00:00 2001
From: Felix Schneider <99918022+trueberryless@users.noreply.github.com>
Date: Thu, 2 Apr 2026 02:38:30 +0200
Subject: [PATCH 4/9] feat(docs): add favicon (#2330)

---
 docs/public/favicon.ico | Bin 0 -> 504 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 docs/public/favicon.ico

diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..462aaa384183fd78a4096555c95eaaaf1326a486
GIT binary patch
literal 504
zcmZQzU<5(~0|p?;!SINYfkBLcfuS?N&z+Y`iVMi(_4IHF0@6Sg3<ex*Kr)=^XFHJM
zEbxddW?*1`0m6)1tAnzEW=!#PaSW-L^LEzR+!h0Y)}7~sMP2e*<aX@f>C0?9n;KoH
zsn@_2R>U9Ek;Xr*St#{y^V^BvKBx#VJ^S1<|JbJX%AYbS*&O-D3jZi9(pS30AY<Fv
zVWzaJuxCHh2WE!;YmJZUZJjtW56Y)^s54CWWp|XFsJgX{VYWlVS>`Q#Y@Joi3odwQ
zE#=EzD}KNG)PYSp$M?PWmrQ;#b;8zb%s!V@xE-?JHm6URQNEkO;8+ENo@yY2m!|xl
z;&)F^-sU~<x9&SbjqLBbVut5)*gItZK4VyUtuv0n>GhSU(@Y8L{kQskVVICSH-mRV
zHjEI6dM<MDdkN!&%ikBUHxztY7Ns7=*mCV;YRIG6#l8)bCW~)nyrEV6TW$)&1Nr%(
ztKU0vGR&(;-^(;{SBi@#1D^@&f-R+s%GkWV+Gb2_EWRIXRB`3R0nuxnv-C<@OO@Ca
z+`=Q(vlypD7%dWYSgEQU#aOV{nB{fXE%#obRSSReHuxDiTr&UJ@j|U?cIlLT7j3=m
qvkd;*yxCY*b0hih=MC*4wah9EVp63uGOB@*#^CAd=d#Wzp$PzHPR9=b

literal 0
HcmV?d00001


From 88e4db0318a3aa80727f791a91ec158ed3ac4df8 Mon Sep 17 00:00:00 2001
From: Alec Lloyd Probert <55991794+graphieros@users.noreply.github.com>
Date: Thu, 2 Apr 2026 06:30:26 +0200
Subject: [PATCH 5/9] chore: use built-in vue-data-ui pattern component (#2359)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 app/components/Chart/PatternSlot.vue     |  32 --
 app/components/Chart/SplitSparkline.vue  |  34 +-
 app/components/Compare/FacetBarChart.vue |  28 +-
 app/utils/charts.ts                      | 378 +----------------------
 package.json                             |   2 +-
 pnpm-lock.yaml                           |  10 +-
 test/nuxt/a11y.spec.ts                   |  18 --
 test/unit/app/utils/charts.spec.ts       | 252 ---------------
 8 files changed, 55 insertions(+), 699 deletions(-)
 delete mode 100644 app/components/Chart/PatternSlot.vue

diff --git a/app/components/Chart/PatternSlot.vue b/app/components/Chart/PatternSlot.vue
deleted file mode 100644
index ed0ae0a1fe..0000000000
--- a/app/components/Chart/PatternSlot.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-/**
- * This component is designed to create various patterns from seeds, and included
- * inside vue-data-ui charts in the #pattern slots.
- * Using patterns helps users with vision deficency (like achromatopsia) to distinguish
- * series in the context of data visualisation.
- */
-import { computed } from 'vue'
-import { createSeededSvgPattern, type ChartPatternSlotProps } from '~/utils/charts'
-
-const props = defineProps<ChartPatternSlotProps>()
-
-const pattern = computed(() =>
-  createSeededSvgPattern(props.seed, {
-    foregroundColor: props.foregroundColor,
-    backgroundColor: props.color ?? props.fallbackColor,
-    minimumSize: props.minSize,
-    maximumSize: props.maxSize,
-  }),
-)
-</script>
-
-<template>
-  <pattern
-    :id
-    patternUnits="userSpaceOnUse"
-    :width="pattern.width"
-    :height="pattern.height"
-    :patternTransform="`rotate(${pattern.rotation})`"
-    v-html="pattern.contentMarkup"
-  />
-</template>
diff --git a/app/components/Chart/SplitSparkline.vue b/app/components/Chart/SplitSparkline.vue
index f3c5537e8e..583f36a909 100644
--- a/app/components/Chart/SplitSparkline.vue
+++ b/app/components/Chart/SplitSparkline.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
+import { VueUiPatternSeed } from 'vue-data-ui/vue-ui-pattern-seed'
 import { useCssVariables } from '~/composables/useColors'
 import {
   type VueUiSparklineConfig,
@@ -7,6 +8,7 @@ import {
   type VueUiXyDatasetItem,
 } from 'vue-data-ui'
 import { getPalette, lightenColor } from 'vue-data-ui/utils'
+import { CHART_PATTERN_CONFIG } from '~/utils/charts'
 
 import('vue-data-ui/style.css')
 
@@ -194,19 +196,37 @@ const configs = computed(() => {
     <ClientOnly v-for="(config, i) in configs" :key="`config_${i}`">
       <div @mouseleave="resetHover" @keydown.esc="resetHover" class="w-full max-w-[400px] mx-auto">
         <div class="flex gap-2 place-items-center">
-          <div class="h-3 w-3">
-            <svg viewBox="0 0 2 2" class="w-full">
+          <div class="h-5 w-5">
+            <svg viewBox="0 0 30 30" class="w-full">
+              <defs>
+                <VueUiPatternSeed
+                  v-if="i != 0"
+                  :id="`marker_${i}`"
+                  :seed="i"
+                  :foreground-color="colors.bg!"
+                  :background-color="
+                    dataset?.[i]?.color ??
+                    palette[i] ??
+                    palette[i % palette.length] ??
+                    palette[0] ??
+                    'transparent'
+                  "
+                  :max-size="CHART_PATTERN_CONFIG.maxSize"
+                  :min-size="CHART_PATTERN_CONFIG.minSize"
+                  :disambiguator="CHART_PATTERN_CONFIG.disambiguator"
+                />
+              </defs>
               <rect
                 x="0"
                 y="0"
-                width="2"
-                height="2"
-                rx="0.3"
-                :fill="dataset?.[i]?.color ?? palette[i]"
+                width="30"
+                height="30"
+                rx="3"
+                :fill="i === 0 ? (dataset?.[0]?.color ?? palette[0]) : `url(#marker_${i})`"
               />
             </svg>
           </div>
-          {{ applyEllipsis(dataset?.[i]?.name ?? '', 28) }}
+          {{ applyEllipsis(dataset?.[i]?.name ?? '', 27) }}
         </div>
         <VueUiSparkline
           :key="`${i}_${step}`"
diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index bc097ae986..67bed343e6 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { VueUiHorizontalBar } from 'vue-data-ui/vue-ui-horizontal-bar'
+import { VueUiPatternSeed } from 'vue-data-ui/vue-ui-pattern-seed'
 import type { VueUiHorizontalBarConfig, VueUiHorizontalBarDatasetItem } from 'vue-data-ui'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
-import { createChartPatternSlotMarkup } from '~/utils/charts'
+import { createPatternDef } from 'vue-data-ui/utils'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
 
 import {
@@ -12,6 +13,7 @@ import {
   sanitise,
   applyEllipsis,
   copyAltTextForCompareFacetBarChart,
+  CHART_PATTERN_CONFIG,
 } from '~/utils/charts'
 
 import('vue-data-ui/style.css')
@@ -227,14 +229,15 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
             const patternId = `tooltip-pattern-${safeSeriesIndex}`
             const usePattern = safeSeriesIndex !== 0
 
-            const patternMarkup = usePattern
-              ? createChartPatternSlotMarkup({
+            const patternDef = usePattern
+              ? createPatternDef({
                   id: patternId,
                   seed: safeSeriesIndex,
                   foregroundColor: colors.value.bg!,
-                  fallbackColor: 'transparent',
-                  maxSize: 24,
-                  minSize: 16,
+                  backgroundColor: 'transparent',
+                  maxSize: CHART_PATTERN_CONFIG.maxSize,
+                  minSize: CHART_PATTERN_CONFIG.minSize,
+                  disambiguator: CHART_PATTERN_CONFIG.disambiguator,
                 })
               : ''
 
@@ -252,9 +255,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
               <div class="grid grid-cols-[12px_minmax(0,1fr)_max-content] items-center gap-x-3">
                 <div class="w-3 h-3">
                   <svg viewBox="0 0 20 20" class="w-full h-full" aria-hidden="true">
-                    <defs>
-                      ${patternMarkup}
-                    </defs>
+                    ${patternDef}
                     ${markerMarkup}
                   </svg>
                 </div>
@@ -286,14 +287,15 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
         </template>
 
         <template #pattern="{ patternId, seriesIndex }">
-          <ChartPatternSlot
+          <VueUiPatternSeed
             v-if="seriesIndex != 0"
             :id="patternId"
             :seed="seriesIndex"
             :foreground-color="colors.bg!"
-            fallback-color="transparent"
-            :max-size="24"
-            :min-size="16"
+            background-color="transparent"
+            :max-size="CHART_PATTERN_CONFIG.maxSize"
+            :min-size="CHART_PATTERN_CONFIG.minSize"
+            :disambiguator="CHART_PATTERN_CONFIG.disambiguator"
           />
         </template>
 
diff --git a/app/utils/charts.ts b/app/utils/charts.ts
index b11c8775bd..6997b8c025 100644
--- a/app/utils/charts.ts
+++ b/app/utils/charts.ts
@@ -722,377 +722,13 @@ export function applyEllipsis(text: string, maxLength = 45) {
   return text.slice(0, maxLength) + '...'
 }
 
-// a11y pattern generation
-export type SvgPatternType =
-  | 'diagonalLines'
-  | 'verticalLines'
-  | 'horizontalLines'
-  | 'crosshatch'
-  | 'dots'
-  | 'grid'
-  | 'zigzag'
-
-export type SeededSvgPatternOptions = {
-  foregroundColor?: string
-  backgroundColor?: string
-  minimumSize?: number
-  maximumSize?: number
-}
-
-export type SeededSvgPatternResult = {
-  width: number
-  height: number
-  rotation: number
-  patternType: SvgPatternType
-  contentMarkup: string
-}
-
-type NonEmptyReadonlyArray<T> = readonly [T, ...T[]]
-
 /**
- * Generates a deterministic 32-bit unsigned integer hash from a string.
- *
- * This function is based on the FNV-1a hashing algorithm. It is used to
- * transform any string input into a stable numeric seed suitable for
- * deterministic pseudo-random number generation.
- *
- * The same input string will always produce the same output number.
- *
- * @param value - The input string to hash.
- * @returns A 32-bit unsigned integer hash.
- */
-export function createSeedNumber(value: string): number {
-  let hashValue = 2166136261
-  for (let index = 0; index < value.length; index += 1) {
-    hashValue ^= value.charCodeAt(index)
-    hashValue = Math.imul(hashValue, 16777619)
-  }
-  return hashValue >>> 0
-}
-
-/**
- * Creates a deterministic pseudo-random number generator (PRNG) based on a numeric seed.
- *
- * This function implements a fast, non-cryptographic PRNG similar to Mulberry32.
- * It produces a reproducible sequence of numbers in the range [0, 1), meaning
- * the same seed will always generate the same sequence.
- *
- * The returned function maintains internal state and should be called repeatedly
- * to obtain successive pseudo-random values.
- *
- * @param seedNumber - 32 bit integer seed
- * @returns A function that returns a pseudo rand number between 0 (inclusive) and 1 (exclusive).
- *
- * @example
- * const random = createDeterministicRandomGenerator(12345)
- * const a = random() // always the same for seed 12345
- * const b = random()
+ * Constants shared among chart components using seeded patterns with the <VueUiPatternSeed> component.
+ * Important: `disambiguator` can be any number, and is used to cycle through different pattern sets. Its
+ * value was chosen for the diversity of its motifs.
  */
-function createDeterministicRandomGenerator(seedNumber: number): () => number {
-  // Ensure the seed is treated as an unsigned 32 bit int
-  let state = seedNumber >>> 0
-
-  return function generateRandomNumber(): number {
-    // Advance internal state using a constant
-    state += 0x6d2b79f5
-    let intermediateValue = state
-
-    // First mixing step:
-    // - XOR with a right shifted version of itself
-    // - Multiply with a derived value to further scramble bits
-    intermediateValue = Math.imul(
-      intermediateValue ^ (intermediateValue >>> 15),
-      intermediateValue | 1,
-    )
-
-    // Second mixing step:
-    // - Combine current value with another transformed version of itself
-    // - Multiply again to increase entropy and spread bits
-    intermediateValue ^=
-      intermediateValue +
-      Math.imul(intermediateValue ^ (intermediateValue >>> 7), intermediateValue | 61)
-
-    // Final step:
-    // - Final XOR with shifted value for additional scrambling
-    // - Convert to unsigned 32 bit int
-    // - Normalize to a float in range 0 to 1
-    return ((intermediateValue ^ (intermediateValue >>> 14)) >>> 0) / 4294967296
-  }
-}
-
-function pickValue<T>(values: NonEmptyReadonlyArray<T>, generateRandomNumber: () => number): T {
-  const selectedIndex = Math.floor(generateRandomNumber() * values.length)
-  const selectedValue = values[selectedIndex]
-  if (selectedValue === undefined) {
-    throw new Error('pickValue requires a non-empty array')
-  }
-  return selectedValue
-}
-
-function escapeSvgAttribute(value: string): string {
-  return value
-    .replace(/&/g, '&amp;')
-    .replace(/"/g, '&quot;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-}
-
-function createLineElement(
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number,
-  stroke: string,
-  strokeWidth: number,
-  opacity: number,
-): string {
-  const safeStroke = escapeSvgAttribute(stroke)
-  return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${safeStroke}" stroke-width="${strokeWidth}" opacity="${opacity}" shape-rendering="crispEdges" stroke-linecap="round" stroke-linejoin="round" />`
-}
-
-function createCircleElement(
-  centerX: number,
-  centerY: number,
-  radius: number,
-  fill: string,
-  opacity: number,
-): string {
-  const safeFill = escapeSvgAttribute(fill)
-  return `<circle cx="${centerX}" cy="${centerY}" r="${radius}" fill="${safeFill}" opacity="${opacity}" />`
-}
-
-function createPathElement(
-  pathData: string,
-  fill: string,
-  stroke: string,
-  strokeWidth: number,
-  opacity: number,
-): string {
-  const safeFill = escapeSvgAttribute(fill)
-  const safeStroke = escapeSvgAttribute(stroke)
-  return `<path d="${pathData}" fill="${safeFill}" stroke="${safeStroke}" stroke-width="${strokeWidth}" opacity="${opacity}" stroke-linecap="round" stroke-linejoin="round" />`
-}
-
-function toNonEmptyReadonlyArray<T>(values: readonly T[]): NonEmptyReadonlyArray<T> {
-  if (values.length === 0) {
-    throw new Error('Expected a non-empty array')
-  }
-
-  return values as NonEmptyReadonlyArray<T>
-}
-
-export function createSeededSvgPattern(
-  seed: string | number,
-  options?: SeededSvgPatternOptions,
-): SeededSvgPatternResult {
-  const normalizedSeed = String(seed)
-  const foregroundColor = options?.foregroundColor ?? '#111111'
-  const backgroundColor = options?.backgroundColor ?? 'transparent'
-  const minimumSize = options?.minimumSize ?? 8
-  const maximumSize = options?.maximumSize ?? 20
-
-  if (
-    !Number.isFinite(minimumSize) ||
-    !Number.isFinite(maximumSize) ||
-    minimumSize <= 0 ||
-    maximumSize <= 0 ||
-    minimumSize > maximumSize
-  ) {
-    throw new RangeError(
-      'minimumSize and maximumSize must be finite, positive, and minimumSize must not exceed maximumSize',
-    )
-  }
-
-  const seedNumber = createSeedNumber(normalizedSeed)
-  const generateRandomNumber = createDeterministicRandomGenerator(seedNumber)
-
-  const patternType = pickValue(
-    [
-      'diagonalLines',
-      'verticalLines',
-      'horizontalLines',
-      'crosshatch',
-      'dots',
-      'grid',
-      'zigzag',
-    ] as const,
-    generateRandomNumber,
-  )
-
-  const availableSizes: number[] = []
-  for (let size = minimumSize; size <= maximumSize; size += 2) {
-    availableSizes.push(size)
-  }
-
-  const tileSize = pickValue(toNonEmptyReadonlyArray(availableSizes), generateRandomNumber)
-  const gap = pickValue([2, 3, 4, 5, 6] as const, generateRandomNumber)
-  const strokeWidth = pickValue([1, 1.25, 1.5, 1.75, 2] as const, generateRandomNumber)
-  const opacity = pickValue([0.7, 0.8, 0.9, 1] as const, generateRandomNumber)
-  const rotation = pickValue([0, 15, 30, 45, 60, 75, 90, 120, 135] as const, generateRandomNumber)
-
-  let contentMarkup = ''
-
-  switch (patternType) {
-    case 'diagonalLines': {
-      contentMarkup = [
-        createLineElement(
-          -tileSize,
-          tileSize,
-          tileSize,
-          -tileSize,
-          foregroundColor,
-          strokeWidth,
-          opacity,
-        ),
-        createLineElement(0, tileSize, tileSize, 0, foregroundColor, strokeWidth, opacity),
-        createLineElement(0, tileSize * 2, tileSize * 2, 0, foregroundColor, strokeWidth, opacity),
-      ].join('')
-      break
-    }
-
-    case 'verticalLines': {
-      const positions = [0, gap + strokeWidth, (gap + strokeWidth) * 2]
-      contentMarkup = positions
-        .map(x => createLineElement(x, 0, x, tileSize, foregroundColor, strokeWidth, opacity))
-        .join('')
-      break
-    }
-
-    case 'horizontalLines': {
-      const positions = [0, gap + strokeWidth, (gap + strokeWidth) * 2]
-      contentMarkup = positions
-        .map(y => createLineElement(0, y, tileSize, y, foregroundColor, strokeWidth, opacity))
-        .join('')
-      break
-    }
-
-    case 'crosshatch': {
-      contentMarkup = [
-        createLineElement(
-          0,
-          tileSize / 2,
-          tileSize,
-          tileSize / 2,
-          foregroundColor,
-          strokeWidth,
-          opacity,
-        ),
-        createLineElement(
-          tileSize / 2,
-          0,
-          tileSize / 2,
-          tileSize,
-          foregroundColor,
-          strokeWidth,
-          opacity,
-        ),
-        createLineElement(0, 0, tileSize, tileSize, foregroundColor, strokeWidth * 0.75, opacity),
-        createLineElement(tileSize, 0, 0, tileSize, foregroundColor, strokeWidth * 0.75, opacity),
-      ].join('')
-      break
-    }
-
-    case 'dots': {
-      const radius = Math.max(1, tileSize / 12)
-      contentMarkup = [
-        createCircleElement(tileSize / 4, tileSize / 4, radius, foregroundColor, opacity),
-        createCircleElement((tileSize * 3) / 4, tileSize / 4, radius, foregroundColor, opacity),
-        createCircleElement(tileSize / 4, (tileSize * 3) / 4, radius, foregroundColor, opacity),
-        createCircleElement(
-          (tileSize * 3) / 4,
-          (tileSize * 3) / 4,
-          radius,
-          foregroundColor,
-          opacity,
-        ),
-      ].join('')
-      break
-    }
-
-    case 'grid': {
-      contentMarkup = [
-        createLineElement(0, 0, tileSize, 0, foregroundColor, strokeWidth, opacity),
-        createLineElement(0, 0, 0, tileSize, foregroundColor, strokeWidth, opacity),
-        createLineElement(
-          0,
-          tileSize / 2,
-          tileSize,
-          tileSize / 2,
-          foregroundColor,
-          strokeWidth * 0.8,
-          opacity,
-        ),
-        createLineElement(
-          tileSize / 2,
-          0,
-          tileSize / 2,
-          tileSize,
-          foregroundColor,
-          strokeWidth * 0.8,
-          opacity,
-        ),
-      ].join('')
-      break
-    }
-
-    case 'zigzag': {
-      const midPoint = tileSize / 2
-      const pathData = `M 0 ${midPoint} L ${tileSize / 4} 0 L ${tileSize / 2} ${midPoint} L ${(tileSize * 3) / 4} ${tileSize} L ${tileSize} ${midPoint}`
-      contentMarkup = createPathElement(pathData, 'none', foregroundColor, strokeWidth, opacity)
-      break
-    }
-  }
-
-  if (backgroundColor !== 'transparent') {
-    const safeBackgroundColor = escapeSvgAttribute(backgroundColor)
-    contentMarkup = `<rect x="0" y="0" width="${tileSize}" height="${tileSize}" fill="${safeBackgroundColor}" />${contentMarkup}`
-  }
-
-  return {
-    width: tileSize,
-    height: tileSize,
-    rotation,
-    patternType,
-    contentMarkup,
-  }
-}
-
-export type ChartPatternSlotProps = {
-  id: string
-  seed: string | number
-  color?: string
-  foregroundColor: string
-  fallbackColor: string
-  maxSize: number
-  minSize: number
-}
-
-// Equivalent of the PatternSlot.vue component, to be used inside tooltip.customFormat in chart configs
-export function createChartPatternSlotMarkup({
-  id,
-  seed,
-  color,
-  foregroundColor,
-  fallbackColor,
-  maxSize,
-  minSize,
-}: ChartPatternSlotProps) {
-  const pattern = createSeededSvgPattern(seed, {
-    foregroundColor,
-    backgroundColor: color ?? fallbackColor,
-    minimumSize: minSize,
-    maximumSize: maxSize,
-  })
-
-  return `
-    <pattern
-      id="${id}"
-      patternUnits="userSpaceOnUse"
-      width="${pattern.width}"
-      height="${pattern.height}"
-      patternTransform="rotate(${pattern.rotation})"
-    >
-      ${pattern.contentMarkup}
-    </pattern>
-  `
+export const CHART_PATTERN_CONFIG = {
+  disambiguator: 1,
+  minSize: 16,
+  maxSize: 24,
 }
diff --git a/package.json b/package.json
index cc29a66be3..e70bf14bda 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.1.12",
     "vue": "3.5.30",
-    "vue-data-ui": "3.17.1"
+    "vue-data-ui": "3.17.3"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25ffb6f791..0413588f5d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -235,8 +235,8 @@ importers:
         specifier: 3.5.30
         version: 3.5.30(typescript@6.0.2)
       vue-data-ui:
-        specifier: 3.17.1
-        version: 3.17.1(vue@3.5.30(typescript@6.0.2))
+        specifier: 3.17.3
+        version: 3.17.3(vue@3.5.30(typescript@6.0.2))
     devDependencies:
       '@e18e/eslint-plugin':
         specifier: 0.3.0
@@ -10721,8 +10721,8 @@ packages:
   vue-component-type-helpers@3.2.6:
     resolution: {integrity: sha512-O02tnvIfOQVmnvoWwuSydwRoHjZVt8UEBR+2p4rT35p8GAy5VTlWP8o5qXfJR/GWCN0nVZoYWsVUvx2jwgdBmQ==}
 
-  vue-data-ui@3.17.1:
-    resolution: {integrity: sha512-MRSWzNXQQpfWQq5GMaxwNoOFYnHEj5sAui19HaA9rT5eHdgAAgwqJS1Gzx+7XBqNcYmW4MK/3qzX8KH0BbiiQQ==}
+  vue-data-ui@3.17.3:
+    resolution: {integrity: sha512-Adfyb/x2Jy0BdpGgugckK44/XRW43lVChqsJuM3cVdx9x87A9Q4sDfH2HjAxLH2BWIeQcEgkI6ozXf8m/97tHw==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -23600,7 +23600,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.6: {}
 
-  vue-data-ui@3.17.1(vue@3.5.30(typescript@6.0.2)):
+  vue-data-ui@3.17.3(vue@3.5.30(typescript@6.0.2)):
     dependencies:
       vue: 3.5.30(typescript@6.0.2)
 
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 09f2f1f048..05eff409b0 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -144,7 +144,6 @@ import {
   LandingLogo,
   LinkBase,
   CallToAction,
-  ChartPatternSlot,
   CodeDirectoryListing,
   CodeFileTree,
   CodeMobileTreeDrawer,
@@ -2261,23 +2260,6 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('ChartPatternSlot', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(ChartPatternSlot, {
-        props: {
-          id: 'perennius',
-          seed: 1,
-          foregroundColor: 'black',
-          fallbackColor: 'transparent',
-          maxSize: 24,
-          minSize: 16,
-        },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
   describe('CopyToClipboardButton', () => {
     it('should have no accessibility violations in default state', async () => {
       const component = await mountSuspended(CopyToClipboardButton, {
diff --git a/test/unit/app/utils/charts.spec.ts b/test/unit/app/utils/charts.spec.ts
index 6a82d7e82a..72c3d6c998 100644
--- a/test/unit/app/utils/charts.spec.ts
+++ b/test/unit/app/utils/charts.spec.ts
@@ -15,9 +15,6 @@ import {
   sanitise,
   insertLineBreaks,
   applyEllipsis,
-  createSeedNumber,
-  createSeededSvgPattern,
-  createChartPatternSlotMarkup,
   type TrendLineConfig,
   type TrendLineDataset,
   type VersionsBarConfig,
@@ -1402,252 +1399,3 @@ describe('applyEllipsis', () => {
     expect(applyEllipsis('you need to touch grass', 13)).toBe('you need to t...')
   })
 })
-
-describe('createSeedNumber', () => {
-  it('returns the same hash for the same input', () => {
-    expect(createSeedNumber('react')).toBe(createSeedNumber('react'))
-    expect(createSeedNumber('vue')).toBe(createSeedNumber('vue'))
-  })
-
-  it('returns different hashes for different inputs', () => {
-    expect(createSeedNumber('react')).not.toBe(createSeedNumber('vue'))
-    expect(createSeedNumber('svelte')).not.toBe(createSeedNumber('solid'))
-  })
-
-  it('returns a 32 bit unsigned integer', () => {
-    const result = createSeedNumber('react')
-    expect(Number.isInteger(result)).toBe(true)
-    expect(result).toBeGreaterThanOrEqual(0)
-    expect(result).toBeLessThanOrEqual(4294967295)
-  })
-
-  it('handles an empty string', () => {
-    const result = createSeedNumber('')
-    expect(Number.isInteger(result)).toBe(true)
-    expect(result).toBeGreaterThanOrEqual(0)
-    expect(result).toBeLessThanOrEqual(4294967295)
-  })
-
-  it('is case sensitive', () => {
-    expect(createSeedNumber('react')).not.toBe(createSeedNumber('React'))
-  })
-})
-
-describe('createSeededSvgPattern', () => {
-  it('returns deterministic output for the same seed', () => {
-    const first = createSeededSvgPattern('react')
-    const second = createSeededSvgPattern('react')
-    expect(first).toEqual(second)
-  })
-
-  it('returns different output for different seeds', () => {
-    const first = createSeededSvgPattern('react')
-    const second = createSeededSvgPattern('vue')
-    expect(second).not.toEqual(first)
-  })
-
-  it('returns a valid pattern object shape', () => {
-    const result = createSeededSvgPattern('react')
-    expect(typeof result.width).toBe('number')
-    expect(typeof result.height).toBe('number')
-    expect(typeof result.rotation).toBe('number')
-    expect(typeof result.patternType).toBe('string')
-    expect(typeof result.contentMarkup).toBe('string')
-  })
-
-  it('uses default options when none are provided', () => {
-    const result = createSeededSvgPattern('react')
-    expect(result.width).toBeGreaterThanOrEqual(8)
-    expect(result.width).toBeLessThanOrEqual(20)
-    expect(result.height).toBe(result.width)
-    expect(result.contentMarkup.length).toBeGreaterThan(0)
-  })
-
-  it('uses the provided foreground and background colors', () => {
-    const result = createSeededSvgPattern('react', {
-      foregroundColor: '#ff0000',
-      backgroundColor: '#00ff00',
-    })
-    expect(result.contentMarkup).toContain('#ff0000')
-    expect(result.contentMarkup).toContain('#00ff00')
-    expect(result.contentMarkup).toContain('<rect x="0" y="0"')
-  })
-
-  it('does not inject a background rect when backgroundColor is transparent', () => {
-    const result = createSeededSvgPattern('react', {
-      backgroundColor: 'transparent',
-    })
-    expect(result.contentMarkup).not.toContain('<rect x="0" y="0"')
-  })
-
-  it('respects the provided size range', () => {
-    const result = createSeededSvgPattern('react', {
-      minimumSize: 10,
-      maximumSize: 16,
-    })
-    expect(result.width).toBeGreaterThanOrEqual(10)
-    expect(result.width).toBeLessThanOrEqual(16)
-    expect(result.height).toBe(result.width)
-  })
-
-  it('always returns one of the supported pattern types', () => {
-    const allowedPatternTypes = [
-      'diagonalLines',
-      'verticalLines',
-      'horizontalLines',
-      'crosshatch',
-      'dots',
-      'grid',
-      'zigzag',
-    ]
-    const result = createSeededSvgPattern('react')
-    expect(allowedPatternTypes).toContain(result.patternType)
-  })
-
-  it('returns a supported rotation value', () => {
-    const allowedRotations = [0, 15, 30, 45, 60, 75, 90, 120, 135]
-    const result = createSeededSvgPattern('react')
-    expect(allowedRotations).toContain(result.rotation)
-  })
-
-  it('returns svg markup matching the selected pattern type', () => {
-    const seeds = [
-      'react',
-      'vue',
-      'svelte',
-      'solid',
-      'angular',
-      'ember',
-      'preact',
-      'lit',
-      'alpine',
-      'nuxt',
-      'next',
-      'astro',
-      'qwik',
-      'backbone',
-    ]
-
-    const expectedTagByPatternType: Record<
-      ReturnType<typeof createSeededSvgPattern>['patternType'],
-      string
-    > = {
-      diagonalLines: '<line',
-      verticalLines: '<line',
-      horizontalLines: '<line',
-      crosshatch: '<line',
-      dots: '<circle',
-      grid: '<line',
-      zigzag: '<path',
-    }
-
-    for (const seed of seeds) {
-      const result = createSeededSvgPattern(seed)
-      const expectedTag = expectedTagByPatternType[result.patternType]
-      expect(result.contentMarkup).toContain(expectedTag)
-    }
-  })
-
-  it('accepts numeric seeds', () => {
-    const result = createSeededSvgPattern(12345)
-    expect(typeof result.width).toBe('number')
-    expect(typeof result.contentMarkup).toBe('string')
-    expect(result.contentMarkup.length).toBeGreaterThan(0)
-  })
-
-  it('returns deterministic output for equivalent numeric and string seeds', () => {
-    const numericSeedResult = createSeededSvgPattern(12345)
-    const stringSeedResult = createSeededSvgPattern('12345')
-    expect(numericSeedResult).toEqual(stringSeedResult)
-  })
-})
-
-describe('createChartPatternSlotMarkup', () => {
-  it('returns a pattern element with the provided id', () => {
-    const result = createChartPatternSlotMarkup({
-      id: 'pattern-1',
-      seed: 7,
-      color: '#ff0000',
-      foregroundColor: '#ffffff',
-      fallbackColor: 'transparent',
-      maxSize: 24,
-      minSize: 16,
-    })
-
-    expect(result).toContain('<pattern')
-    expect(result).toContain('id="pattern-1"')
-    expect(result).toContain('patternUnits="userSpaceOnUse"')
-    expect(result).toContain('</pattern>')
-  })
-
-  it('includes width, height, rotation, and content markup from the generated pattern', () => {
-    const generatedPattern = createSeededSvgPattern(1, {
-      foregroundColor: '#000',
-      backgroundColor: 'transparent',
-      minimumSize: 16,
-      maximumSize: 24,
-    })
-
-    const result = createChartPatternSlotMarkup({
-      id: 'pattern-1',
-      seed: 1,
-      foregroundColor: '#000',
-      fallbackColor: 'transparent',
-      maxSize: 24,
-      minSize: 16,
-    })
-
-    expect(result).toContain(`width="${generatedPattern.width}"`)
-    expect(result).toContain(`height="${generatedPattern.height}"`)
-    expect(result).toContain(`patternTransform="rotate(${generatedPattern.rotation})"`)
-    expect(result).toContain(generatedPattern.contentMarkup)
-  })
-
-  it('is deterministic for the same inputs', () => {
-    const first = createChartPatternSlotMarkup({
-      id: 'pattern-stable',
-      seed: 'nuxt',
-      color: '#00ff00',
-      foregroundColor: '#000000',
-      fallbackColor: 'transparent',
-      maxSize: 40,
-      minSize: 10,
-    })
-
-    const second = createChartPatternSlotMarkup({
-      id: 'pattern-stable',
-      seed: 'nuxt',
-      color: '#00ff00',
-      foregroundColor: '#000000',
-      fallbackColor: 'transparent',
-      maxSize: 40,
-      minSize: 10,
-    })
-
-    expect(first).toBe(second)
-  })
-
-  it('changes when the id changes', () => {
-    const first = createChartPatternSlotMarkup({
-      id: 'pattern-a',
-      seed: 1,
-      color: '#00ff00',
-      foregroundColor: '#000000',
-      fallbackColor: 'transparent',
-      maxSize: 40,
-      minSize: 10,
-    })
-
-    const second = createChartPatternSlotMarkup({
-      id: 'pattern-b',
-      seed: 2,
-      color: '#00ff00',
-      foregroundColor: '#000000',
-      fallbackColor: 'transparent',
-      maxSize: 40,
-      minSize: 10,
-    })
-
-    expect(first).not.toBe(second)
-  })
-})

From 95c2aae90923665f74c91e80de3de1b3e426999a Mon Sep 17 00:00:00 2001
From: Alex Korytskyi <alexander.korytskyi@gmail.com>
Date: Thu, 2 Apr 2026 07:22:54 +0100
Subject: [PATCH 6/9] fix: package code page improvements (#2217)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Alex Savelyev <91429106+alexdln@users.noreply.github.com>
Co-authored-by: Vordgi <sasha2822222@gmail.com>
---
 app/components/Code/DirectoryListing.vue      |   1 +
 app/components/Code/Header.vue                | 265 ++++++++++++++++
 app/components/Code/MobileTreeDrawer.vue      |  17 +-
 app/components/Code/SkeletonLoader.vue        |  33 ++
 app/components/Code/Viewer.vue                |   2 +-
 app/composables/useSettings.ts                |  17 ++
 .../v/[version]/[...filePath].vue             | 277 ++++++-----------
 i18n/locales/ar.json                          |   2 -
 i18n/locales/az-AZ.json                       |   2 -
 i18n/locales/bg-BG.json                       |   2 -
 i18n/locales/bn-IN.json                       |   2 -
 i18n/locales/cs-CZ.json                       |   2 -
 i18n/locales/de.json                          |   9 +-
 i18n/locales/en.json                          |  10 +-
 i18n/locales/es.json                          |   2 -
 i18n/locales/fr-FR.json                       |   2 -
 i18n/locales/hi-IN.json                       | 283 +++++++++---------
 i18n/locales/hu-HU.json                       |   2 -
 i18n/locales/id-ID.json                       |   4 +-
 i18n/locales/it-IT.json                       |   2 -
 i18n/locales/ja-JP.json                       |   2 -
 i18n/locales/kn-IN.json                       |   2 -
 i18n/locales/mr-IN.json                       |  36 +--
 i18n/locales/nb-NO.json                       |   2 -
 i18n/locales/ne-NP.json                       |   2 -
 i18n/locales/pl-PL.json                       |   2 -
 i18n/locales/pt-BR.json                       |   2 -
 i18n/locales/ru-RU.json                       |   2 -
 i18n/locales/ta-IN.json                       |   2 -
 i18n/locales/te-IN.json                       |   2 -
 i18n/locales/tr-TR.json                       |   2 -
 i18n/locales/uk-UA.json                       |   2 -
 i18n/locales/vi-VN.json                       |   2 -
 i18n/locales/zh-CN.json                       |   2 -
 i18n/locales/zh-TW.json                       |   2 -
 i18n/schema.json                              |  16 +-
 test/nuxt/a11y.spec.ts                        |  40 +++
 uno.config.ts                                 |   1 +
 38 files changed, 616 insertions(+), 441 deletions(-)
 create mode 100644 app/components/Code/Header.vue
 create mode 100644 app/components/Code/SkeletonLoader.vue

diff --git a/app/components/Code/DirectoryListing.vue b/app/components/Code/DirectoryListing.vue
index 624a69ef8e..f9b8521a5a 100644
--- a/app/components/Code/DirectoryListing.vue
+++ b/app/components/Code/DirectoryListing.vue
@@ -58,6 +58,7 @@ const bytesFormatter = useBytesFormatter()
   <div class="directory-listing">
     <!-- Empty state -->
     <div v-if="currentContents.length === 0" class="py-20 text-center text-fg-muted">
+      <span class="i-lucide:folder-open w-12 h-12 text-fg-subtle mx-auto mb-4"> </span>
       <p>{{ $t('code.no_files') }}</p>
     </div>
 
diff --git a/app/components/Code/Header.vue b/app/components/Code/Header.vue
new file mode 100644
index 0000000000..35f96acaf6
--- /dev/null
+++ b/app/components/Code/Header.vue
@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import type { PackageFileContentResponse } from '#shared/types/npm-registry'
+
+interface BreadcrumbItem {
+  name: string
+  path: string
+}
+
+const props = defineProps<{
+  filePath?: string | null
+  loading: boolean
+  isViewingFile: boolean
+  isBinaryFile: boolean
+  fileContent: PackageFileContentResponse | null | undefined
+  markdownViewMode: 'preview' | 'code'
+  selectedLines: { start: number; end: number } | null
+  getCodeUrlWithPath: (path?: string) => string
+  packageName: string
+  version: string
+}>()
+
+const emit = defineEmits<{
+  'update:markdownViewMode': [value: 'preview' | 'code']
+  'mobile-tree-drawer-toggle': []
+}>()
+
+const { toggleCodeContainer } = useCodeContainer()
+
+const markdownViewModes = [
+  {
+    key: 'preview' as const,
+    label: $t('code.markdown_view_mode.preview'),
+    icon: 'i-lucide:eye',
+  },
+  {
+    key: 'code' as const,
+    label: $t('code.markdown_view_mode.code'),
+    icon: 'i-lucide:code',
+  },
+]
+
+// Build breadcrumb path segments
+const breadcrumbs = computed<{
+  items: BreadcrumbItem[]
+  current: string
+}>(() => {
+  const parts = props.filePath?.split('/').filter(Boolean) ?? []
+  const result: {
+    items: BreadcrumbItem[]
+    current: string
+  } = {
+    items: [],
+    current: parts.at(-1) ?? '',
+  }
+
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i]
+    if (part) {
+      result.items.push({
+        name: part,
+        path: parts.slice(0, i + 1).join('/'),
+      })
+    }
+  }
+
+  return result
+})
+
+const { copied: fileContentCopied, copy: copyFileContent } = useClipboard({
+  source: () => props.fileContent?.content || '',
+  copiedDuring: 2000,
+})
+
+// Copy link to current line(s)
+const { copied: permalinkCopied, copy: copyPermalink } = useClipboard({ copiedDuring: 2000 })
+
+function copyPermalinkUrl() {
+  const url = new URL(window.location.href)
+  copyPermalink(url.toString())
+}
+
+// Path dropdown (mobile breadcrumb collapse)
+const isPathDropdownOpen = shallowRef(false)
+const pathDropdownButtonRef = useTemplateRef('pathDropdownButtonRef')
+const pathDropdownListRef = useTemplateRef<HTMLElement>('pathDropdownListRef')
+
+function togglePathDropdown(forceClose?: boolean) {
+  if (forceClose) {
+    isPathDropdownOpen.value = false
+    return
+  }
+
+  isPathDropdownOpen.value = !isPathDropdownOpen.value
+}
+
+onClickOutside(pathDropdownListRef, () => togglePathDropdown(true), {
+  ignore: [pathDropdownButtonRef],
+})
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isPathDropdownOpen.value) {
+    togglePathDropdown(true)
+  }
+})
+</script>
+
+<template>
+  <div
+    class="sticky flex-split h-11 max-md:(h-20 top-32 flex-col items-start) z-5 top-25 gap-0 bg-bg-subtle border-b border-border px-2 py-1 text-nowrap max-w-full"
+  >
+    <div class="flex items-center w-full h-full relative">
+      <!-- Breadcrumb navigation -->
+      <nav
+        :aria-label="$t('code.file_path')"
+        class="flex items-center gap-0.5 font-mono text-sm overflow-x-auto"
+        dir="ltr"
+      >
+        <NuxtLink
+          v-if="filePath"
+          :to="getCodeUrlWithPath()"
+          class="text-fg-muted hover:text-fg transition-colors shrink-0"
+        >
+          ~
+        </NuxtLink>
+        <span class="max-md:hidden">
+          <template v-for="crumb in breadcrumbs.items" :key="crumb.path">
+            <span class="text-fg-subtle">/</span>
+            <NuxtLink
+              :to="getCodeUrlWithPath(crumb.path)"
+              class="text-fg-muted hover:text-fg transition-colors"
+            >
+              {{ crumb.name }}
+            </NuxtLink>
+          </template>
+        </span>
+        <!-- Show dropdown with path elements on small screens -->
+        <span v-if="breadcrumbs.items.length" class="md:hidden">
+          <span class="text-fg-subtle">/</span>
+          <span ref="pathDropdownButtonRef">
+            <ButtonBase
+              size="sm"
+              class="px-2 py-1 mx-1"
+              :aria-label="$t('code.open_path_dropdown')"
+              :aria-expanded="isPathDropdownOpen"
+              aria-haspopup="true"
+              @click="togglePathDropdown()"
+            >
+              ...
+            </ButtonBase>
+          </span>
+        </span>
+        <template v-if="breadcrumbs.current">
+          <span class="text-fg-subtle">/</span>
+          <span class="text-fg">{{ breadcrumbs.current }}</span>
+        </template>
+      </nav>
+      <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="isPathDropdownOpen"
+          ref="pathDropdownListRef"
+          class="absolute top-8 z-50 bg-bg-subtle border border-border rounded-lg shadow-lg py-1 min-w-65 max-w-full font-mono text-sm"
+        >
+          <NuxtLink
+            v-for="(crumb, index) in breadcrumbs.items"
+            :key="crumb.path"
+            :to="getCodeUrlWithPath(crumb.path)"
+            class="flex items-start px-3 py-1 text-fg-muted hover:text-fg hover:bg-bg-muted transition-colors"
+            @click="togglePathDropdown(false)"
+          >
+            <span
+              v-for="level in index"
+              :key="level"
+              aria-hidden="true"
+              class="relative h-5 w-4 shrink-0"
+            >
+              <!-- add └ mark to better visualize nested folders) -->
+              <template v-if="level === index">
+                <span class="absolute top-0 bottom-1/2 inset-is-2 w-px bg-fg-subtle/50" />
+                <span class="absolute top-1/2 inset-is-2 inset-ie-0 h-px bg-fg-subtle/50" />
+              </template>
+            </span>
+            <span :class="{ 'ps-1': index > 0 }" class="min-w-0 break-all"
+              >{{ crumb.name }}<span class="text-fg-subtle">/</span></span
+            >
+          </NuxtLink>
+        </div>
+      </Transition>
+    </div>
+    <div class="flex max-md:(w-full justify-between border-border border-t pt-1)">
+      <!-- Toggle button (mobile only) -->
+      <ButtonBase
+        class="md:hidden px-2"
+        :aria-label="$t('code.toggle_tree')"
+        @click="emit('mobile-tree-drawer-toggle')"
+        classicon="i-lucide:folder-code"
+      />
+      <div class="flex items-center gap-2">
+        <template v-if="isViewingFile && !isBinaryFile && fileContent">
+          <div
+            v-if="fileContent?.markdownHtml"
+            class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
+            role="tablist"
+            aria-label="Markdown view mode selector"
+          >
+            <button
+              v-for="mode in markdownViewModes"
+              :key="mode.key"
+              role="tab"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 inline-flex items-center gap-1.5"
+              :class="
+                markdownViewMode === mode.key
+                  ? 'bg-bg-muted shadow text-fg'
+                  : 'text-fg-subtle hover:text-fg'
+              "
+              :aria-selected="markdownViewMode === mode.key"
+              @click="emit('update:markdownViewMode', mode.key)"
+            >
+              {{ mode.label }}
+            </button>
+          </div>
+          <TooltipApp :text="$t('code.copy_link')" position="top">
+            <ButtonBase
+              v-if="selectedLines"
+              class="py-1 px-3"
+              :classicon="permalinkCopied ? 'i-lucide:check' : 'i-lucide:file-braces-corner'"
+              :aria-label="$t('code.copy_link')"
+              @click="copyPermalinkUrl"
+            />
+          </TooltipApp>
+          <TooltipApp :text="$t('code.copy_content')" position="top">
+            <ButtonBase
+              v-if="!!fileContent?.content"
+              class="px-3"
+              :classicon="fileContentCopied ? 'i-lucide:check' : 'i-lucide:copy'"
+              :aria-label="$t('code.copy_content')"
+              @click="copyFileContent()"
+            />
+          </TooltipApp>
+          <TooltipApp :text="$t('code.open_raw_file')" position="top">
+            <LinkBase
+              variant="button-secondary"
+              :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+              class="px-3"
+              :aria-label="$t('code.open_raw_file')"
+            />
+          </TooltipApp>
+        </template>
+        <TooltipApp :text="$t('code.toggle_container')" position="top">
+          <ButtonBase
+            class="px-3 max-xl:hidden"
+            :disabled="loading"
+            classicon="i-lucide:unfold-horizontal [.container-full>&]:i-lucide:fold-horizontal"
+            :aria-label="$t('code.toggle_container')"
+            @click="toggleCodeContainer()"
+          />
+        </TooltipApp>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/Code/MobileTreeDrawer.vue b/app/components/Code/MobileTreeDrawer.vue
index ecdf1f4f4e..dd524bf635 100644
--- a/app/components/Code/MobileTreeDrawer.vue
+++ b/app/components/Code/MobileTreeDrawer.vue
@@ -22,18 +22,17 @@ watch(
 const isLocked = useScrollLock(document)
 // Prevent body scroll when drawer is open
 watch(isOpen, open => (isLocked.value = open))
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+defineExpose({
+  toggle,
+})
 </script>
 
 <template>
-  <!-- Toggle button (mobile only) -->
-  <ButtonBase
-    variant="primary"
-    class="md:hidden fixed bottom-9 inset-ie-4 z-45"
-    :aria-label="$t('code.toggle_tree')"
-    @click="isOpen = !isOpen"
-    :classicon="isOpen ? 'i-lucide:x' : 'i-lucide:folder'"
-  />
-
   <!-- Backdrop -->
   <Transition
     enter-active-class="transition-opacity duration-200"
diff --git a/app/components/Code/SkeletonLoader.vue b/app/components/Code/SkeletonLoader.vue
new file mode 100644
index 0000000000..38f7196204
--- /dev/null
+++ b/app/components/Code/SkeletonLoader.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="flex min-h-full" role="status" aria-busy="true" :aria-label="$t('common.loading')">
+    <!-- Fake line numbers column -->
+    <div class="shrink-0 bg-bg-subtle border-ie border-border w-14 py-0">
+      <div v-for="n in 20" :key="n" class="px-3 h-6 flex items-center justify-end">
+        <SkeletonInline class="w-4 h-3 rounded-sm" />
+      </div>
+    </div>
+    <!-- Fake code content -->
+    <div class="flex-1 p-4 space-y-1.5">
+      <SkeletonBlock class="h-4 w-32 rounded-sm" />
+      <SkeletonBlock class="h-4 w-48 rounded-sm" />
+      <SkeletonBlock class="h-4 w-24 rounded-sm" />
+      <div class="h-4" />
+      <SkeletonBlock class="h-4 w-64 rounded-sm" />
+      <SkeletonBlock class="h-4 w-56 rounded-sm" />
+      <SkeletonBlock class="h-4 w-40 rounded-sm" />
+      <SkeletonBlock class="h-4 w-72 rounded-sm" />
+      <div class="h-4" />
+      <SkeletonBlock class="h-4 w-36 rounded-sm" />
+      <SkeletonBlock class="h-4 w-52 rounded-sm" />
+      <SkeletonBlock class="h-4 w-44 rounded-sm" />
+      <SkeletonBlock class="h-4 w-28 rounded-sm" />
+      <div class="h-4" />
+      <SkeletonBlock class="h-4 w-60 rounded-sm" />
+      <SkeletonBlock class="h-4 w-48 rounded-sm" />
+      <SkeletonBlock class="h-4 w-32 rounded-sm" />
+      <SkeletonBlock class="h-4 w-56 rounded-sm" />
+      <SkeletonBlock class="h-4 w-40 rounded-sm" />
+      <SkeletonBlock class="h-4 w-24 rounded-sm" />
+    </div>
+  </div>
+</template>
diff --git a/app/components/Code/Viewer.vue b/app/components/Code/Viewer.vue
index 90bcf0c221..5edf96eb84 100644
--- a/app/components/Code/Viewer.vue
+++ b/app/components/Code/Viewer.vue
@@ -86,7 +86,7 @@ watch(
 </script>
 
 <template>
-  <div class="code-viewer flex min-h-full max-w-full">
+  <div class="code-viewer flex min-h-full max-w-full overflow-x-auto">
     <!-- Line numbers column -->
     <div
       class="line-numbers shrink-0 bg-bg-subtle border-ie border-solid border-border text-end select-none relative"
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index a79c746c20..533c03042b 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -38,6 +38,7 @@ export interface AppSettings {
     /** Automatically open the web auth page in the browser */
     autoOpenURL: boolean
   }
+  codeContainerFull: boolean
   sidebar: {
     collapsed: string[]
   }
@@ -63,6 +64,7 @@ const DEFAULT_SETTINGS: AppSettings = {
   connector: {
     autoOpenURL: false,
   },
+  codeContainerFull: false,
   sidebar: {
     collapsed: [],
   },
@@ -236,3 +238,18 @@ export function useBackgroundTheme() {
     setBackgroundTheme,
   }
 }
+
+export function useCodeContainer() {
+  const { settings } = useSettings()
+
+  const codeContainerFull = computed(() => settings.value.codeContainerFull)
+
+  function toggleCodeContainer() {
+    settings.value.codeContainerFull = !settings.value.codeContainerFull
+  }
+
+  return {
+    codeContainerFull,
+    toggleCodeContainer,
+  }
+}
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index 3fbdcfe994..fc2bb60c63 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+// Maximum file size we'll try to load (500KB) - must match server
+const MAX_FILE_SIZE = 500 * 1024
+
 definePageMeta({
   name: 'code',
   path: '/package-code/:org?/:packageName/v/:version/:filePath(.*)?',
@@ -12,6 +15,10 @@ definePageMeta({
 
 const route = useRoute('code')
 
+const mobileFileTreeRef = useTemplateRef('mobileFileTreeRef')
+
+const { codeContainerFull } = useCodeContainer()
+
 // Parse package name, version, and file path from URL
 // Patterns:
 //   /code/nuxt/v/4.2.0 → packageName: "nuxt", version: "4.2.0", filePath: null (show tree)
@@ -95,25 +102,26 @@ const currentNode = computed(() => {
   return lastFound
 })
 
-const isViewingFile = computed(() => currentNode.value?.type === 'file')
-
-// Maximum file size we'll try to load (500KB) - must match server
-const MAX_FILE_SIZE = 500 * 1024
+const isViewingFile = computed<boolean>(() => currentNode.value?.type === 'file')
 
 // Estimate binary file based on mime type
-const isBinaryFile = computed(() => {
+const isBinaryFile = computed<boolean>(() => {
+  if (!isViewingFile.value) return false
+
   const contentType = fileContent.value?.contentType
   if (!contentType) return false
   return isBinaryContentType(contentType)
 })
 
-const isFileTooLarge = computed(() => {
+const isFileTooLarge = computed<boolean>(() => {
+  if (!isViewingFile.value) return false
+
   const size = currentNode.value?.size
   return size !== undefined && size > MAX_FILE_SIZE
 })
 
 // Fetch file content when a file is selected (and not too large)
-const fileContentUrl = computed(() => {
+const fileContentUrl = computed<string | null>(() => {
   // Don't fetch if no file path, file tree not loaded, file is too large, or it's a directory
   if (!filePath.value || !fileTree.value || isFileTooLarge.value || !isViewingFile.value) {
     return null
@@ -127,6 +135,19 @@ const {
   execute: fetchFileContent,
 } = useFetch<PackageFileContentResponse>(() => fileContentUrl.value!, { immediate: false })
 
+// Loading skeleton state
+const isLoading = computed<boolean>(() => {
+  if (!isViewingFile.value) {
+    return treeStatus.value !== 'success' && treeStatus.value !== 'error'
+  }
+
+  return !fileStatus.value || fileStatus.value === 'pending' || fileStatus.value === 'idle'
+})
+
+function toggleMobileTreeDrawer(): void {
+  mobileFileTreeRef.value?.toggle()
+}
+
 watch(
   fileContentUrl,
   url => {
@@ -185,24 +206,6 @@ watch(fileContent, () => {
   nextTick(scrollToLine)
 })
 
-// Build breadcrumb path segments
-const breadcrumbs = computed(() => {
-  const parts = filePath.value?.split('/').filter(Boolean) ?? []
-  const result: { name: string; path: string }[] = []
-
-  for (let i = 0; i < parts.length; i++) {
-    const part = parts[i]
-    if (part) {
-      result.push({
-        name: part,
-        path: parts.slice(0, i + 1).join('/'),
-      })
-    }
-  }
-
-  return result
-})
-
 // Navigation helper - build URL for a path
 function getCurrentCodeUrlWithPath(path?: string): string {
   return getCodeUrl({
@@ -236,36 +239,10 @@ function handleLineClick(lineNum: number, event: MouseEvent) {
   currentHash.value = newHash
 }
 
-// Copy link to current line(s)
-const { copied: permalinkCopied, copy: copyPermalink } = useClipboard({ copiedDuring: 2000 })
-function copyPermalinkUrl() {
-  const url = new URL(window.location.href)
-  copyPermalink(url.toString())
-}
-
-const { copied: fileContentCopied, copy: copyFileContent } = useClipboard({
-  source: () => fileContent.value?.content || '',
-  copiedDuring: 2000,
-})
-
 // Canonical URL for this code page
 const canonicalUrl = computed(() => `https://npmx.dev${getCodeUrl(route.params)}`)
 
-// Toggle markdown view mode
-const markdownViewModes = [
-  {
-    key: 'preview',
-    label: $t('code.markdown_view_mode.preview'),
-    icon: 'i-lucide:eye',
-  },
-  {
-    key: 'code',
-    label: $t('code.markdown_view_mode.code'),
-    icon: 'i-lucide:code',
-  },
-] as const
-
-const markdownViewMode = shallowRef<(typeof markdownViewModes)[number]['key']>('preview')
+const markdownViewMode = shallowRef<'preview' | 'code'>('preview')
 
 const bytesFormatter = useBytesFormatter()
 
@@ -310,6 +287,15 @@ defineOgImageComponent('Default', {
   description: () => pkg.value?.license ?? '',
   primaryColor: '#60a5fa',
 })
+
+onPrehydrate(el => {
+  const settingsSaved = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const container = el.querySelector('#code-page-container')
+
+  if (settingsSaved?.codeContainerFull === true && container) {
+    container.classList.add('container-full')
+  }
+})
 </script>
 
 <template>
@@ -346,113 +332,51 @@ defineOgImageComponent('Default', {
     </div>
 
     <!-- Main content: file tree + file viewer -->
-    <div v-else-if="fileTree" class="flex flex-1" dir="ltr">
+    <div
+      v-else-if="!!fileTree"
+      id="code-page-container"
+      class="w-full container grid grid-cols-[18rem_1fr] max-lg:grid-cols-[16rem_1fr] max-md:grid-cols-[1fr] border-border border-x px-0 mx-auto transition-[max-width] duration-300"
+      :class="codeContainerFull ? 'container-full' : ''"
+      dir="ltr"
+    >
       <!-- File tree sidebar - sticky with internal scroll -->
       <aside
-        class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-25 self-start h-[calc(100vh-7rem)] overflow-y-auto"
+        class="sticky top-25 w-64 lg:w-72 hidden md:block h-[calc(100vh-10.5rem)] shrink-0 self-start bg-bg-subtle border-ie border-border"
       >
-        <CodeFileTree
-          :tree="fileTree.tree"
-          :current-path="filePath ?? ''"
-          :base-url="getCurrentCodeUrlWithPath()"
-          :base-route="route"
-        />
+        <div class="h-[calc(100vh-10.5rem)] overflow-y-auto">
+          <CodeFileTree
+            :tree="fileTree.tree"
+            :current-path="filePath ?? ''"
+            :base-url="getCurrentCodeUrlWithPath()"
+            :base-route="route"
+          />
+        </div>
       </aside>
 
       <!-- File content / Directory listing - sticky with internal scroll on desktop -->
-      <div class="flex-1 min-w-0 self-start">
-        <div
-          class="sticky z-5 top-25 bg-bg border-b border-border px-4 py-2 flex items-center justify-between gap-2 text-nowrap overflow-x-auto max-w-full"
-        >
-          <div class="flex items-center gap-2">
-            <div
-              v-if="fileContent?.markdownHtml"
-              class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
-              role="tablist"
-              aria-label="Markdown view mode selector"
-            >
-              <button
-                v-for="mode in markdownViewModes"
-                :key="mode.key"
-                role="tab"
-                class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-accent/70 inline-flex items-center gap-1.5"
-                :class="
-                  markdownViewMode === mode.key
-                    ? 'bg-bg shadow text-fg border-border'
-                    : 'text-fg-subtle hover:text-fg border-transparent'
-                "
-                :aria-selected="markdownViewMode === mode.key"
-                @click="markdownViewMode = mode.key"
-              >
-                <span class="inline-block h-3 w-3" :class="mode.icon" aria-hidden="true" />
-                {{ mode.label }}
-              </button>
-            </div>
-            <!-- Breadcrumb navigation -->
-            <nav
-              :aria-label="$t('code.file_path')"
-              class="flex items-center gap-0.5 font-mono text-sm overflow-x-auto"
-              dir="ltr"
-            >
-              <NuxtLink
-                v-if="filePath"
-                :to="getCurrentCodeUrlWithPath()"
-                class="text-fg-muted hover:text-fg transition-colors shrink-0"
-              >
-                {{ $t('code.root') }}
-              </NuxtLink>
-              <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
-                  v-if="i < breadcrumbs.length - 1"
-                  :to="getCurrentCodeUrlWithPath(crumb.path)"
-                  class="text-fg-muted hover:text-fg transition-colors"
-                >
-                  {{ crumb.name }}
-                </NuxtLink>
-                <span v-else class="text-fg">{{ crumb.name }}</span>
-              </template>
-            </nav>
-          </div>
-          <div class="flex items-center gap-2" v-if="isViewingFile && !isBinaryFile && fileContent">
-            <button
-              v-if="selectedLines"
-              type="button"
-              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 active:scale-95"
-              @click="copyPermalinkUrl"
-            >
-              {{ permalinkCopied ? $t('common.copied') : $t('code.copy_link') }}
-            </button>
-            <button
-              v-if="!!fileContent?.content"
-              type="button"
-              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 capitalize"
-              @click="copyFileContent()"
-            >
-              <span
-                class="w-3 h-3"
-                :class="fileContentCopied ? 'i-lucide:check' : 'i-lucide:file'"
-              />
-              {{ fileContentCopied ? $t('common.copied') : $t('common.copy') }}
-            </button>
-            <a
-              :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-              target="_blank"
-              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"
-            >
-              {{ $t('code.raw') }}
-              <span class="i-lucide:external-link w-3 h-3" />
-            </a>
-          </div>
-        </div>
+      <div class="flex-1 grid grid-rows-[auto_1fr_auto] h-full min-h-full min-w-0 self-start">
+        <CodeHeader
+          :file-path="filePath"
+          :loading="isLoading"
+          :is-viewing-file="isViewingFile"
+          :is-binary-file="isBinaryFile"
+          :file-content="fileContent"
+          v-model:markdown-view-mode="markdownViewMode"
+          :selected-lines="selectedLines"
+          :get-code-url-with-path="getCurrentCodeUrlWithPath"
+          :package-name="packageName"
+          :version="version"
+          @mobile-tree-drawer-toggle="toggleMobileTreeDrawer()"
+        />
+        <!-- Loading file/directory content -->
+        <CodeSkeletonLoader v-if="isLoading" />
+
         <!-- File viewer -->
-        <template v-if="isViewingFile && !isBinaryFile && fileContent">
+        <template v-else-if="isViewingFile && !isBinaryFile && fileContent">
           <div
             v-if="fileContent.markdownHtml"
             v-show="markdownViewMode === 'preview'"
-            class="flex justify-center p-4"
+            class="flex min-h-full overflow-x-auto justify-center p-4"
           >
             <Readme :html="fileContent.markdownHtml.html" />
           </div>
@@ -462,10 +386,12 @@ defineOgImageComponent('Default', {
             :html="fileContent.html"
             :lines="fileContent.lines"
             :selected-lines="selectedLines"
+            class="flex-1"
             @line-click="handleLineClick"
           />
-          <div class="sticky bottom-0 bg-bg border-t border-border px-4 py-1">
-            <div class="flex items-center gap-3 text-sm justify-end">
+          <!-- Bottom status bar -->
+          <div class="sticky flex-auto bottom-0 bg-bg-subtle border-t border-border px-4 py-1">
+            <div class="flex items-center h-5 font-mono gap-3 text-sm justify-end">
               <span class="text-fg-muted" dir="auto">{{
                 $t('code.lines', { count: fileContent.lines })
               }}</span>
@@ -477,7 +403,7 @@ defineOgImageComponent('Default', {
         </template>
 
         <!-- Binary file warning -->
-        <div v-else-if="isViewingFile && isBinaryFile" class="py-20 text-center">
+        <div v-else-if="isBinaryFile" class="py-20 text-center">
           <div class="i-lucide:binary w-12 h-12 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.binary_file') }}</p>
           <p class="text-fg-subtle text-sm mb-4">
@@ -496,7 +422,7 @@ defineOgImageComponent('Default', {
         </div>
 
         <!-- File too large warning -->
-        <div v-else-if="isViewingFile && isFileTooLarge" class="py-20 text-center">
+        <div v-else-if="isFileTooLarge" class="py-20 text-center">
           <div class="i-lucide:file-text w-12 h-12 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.file_too_large') }}</p>
           <p class="text-fg-subtle text-sm mb-4">
@@ -512,44 +438,6 @@ defineOgImageComponent('Default', {
           </LinkBase>
         </div>
 
-        <!-- Loading file content -->
-        <div
-          v-else-if="filePath && fileStatus === 'pending'"
-          class="flex min-h-full"
-          aria-busy="true"
-          :aria-label="$t('common.loading')"
-        >
-          <!-- Fake line numbers column -->
-          <div class="shrink-0 bg-bg-subtle border-ie border-border w-14 py-0">
-            <div v-for="n in 20" :key="n" class="px-3 h-6 flex items-center justify-end">
-              <SkeletonInline class="w-4 h-3 rounded-sm" />
-            </div>
-          </div>
-          <!-- Fake code content -->
-          <div class="flex-1 p-4 space-y-1.5">
-            <SkeletonBlock class="h-4 w-32 rounded-sm" />
-            <SkeletonBlock class="h-4 w-48 rounded-sm" />
-            <SkeletonBlock class="h-4 w-24 rounded-sm" />
-            <div class="h-4" />
-            <SkeletonBlock class="h-4 w-64 rounded-sm" />
-            <SkeletonBlock class="h-4 w-56 rounded-sm" />
-            <SkeletonBlock class="h-4 w-40 rounded-sm" />
-            <SkeletonBlock class="h-4 w-72 rounded-sm" />
-            <div class="h-4" />
-            <SkeletonBlock class="h-4 w-36 rounded-sm" />
-            <SkeletonBlock class="h-4 w-52 rounded-sm" />
-            <SkeletonBlock class="h-4 w-44 rounded-sm" />
-            <SkeletonBlock class="h-4 w-28 rounded-sm" />
-            <div class="h-4" />
-            <SkeletonBlock class="h-4 w-60 rounded-sm" />
-            <SkeletonBlock class="h-4 w-48 rounded-sm" />
-            <SkeletonBlock class="h-4 w-32 rounded-sm" />
-            <SkeletonBlock class="h-4 w-56 rounded-sm" />
-            <SkeletonBlock class="h-4 w-40 rounded-sm" />
-            <SkeletonBlock class="h-4 w-24 rounded-sm" />
-          </div>
-        </div>
-
         <!-- Error loading file -->
         <div v-else-if="filePath && fileStatus === 'error'" class="py-20 text-center" role="alert">
           <div class="i-lucide:circle-alert w-8 h-8 mx-auto text-fg-subtle mb-4" />
@@ -580,6 +468,7 @@ defineOgImageComponent('Default', {
       <Teleport to="body">
         <CodeMobileTreeDrawer
           v-if="fileTree"
+          ref="mobileFileTreeRef"
           :tree="fileTree.tree"
           :current-path="filePath ?? ''"
           :base-url="getCurrentCodeUrlWithPath()"
@@ -589,3 +478,9 @@ defineOgImageComponent('Default', {
     </ClientOnly>
   </main>
 </template>
+
+<style>
+.container-full.container-full {
+  @apply max-w-full border-0;
+}
+</style>
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
index 0edd42dcad..131d42deca 100644
--- a/i18n/locales/ar.json
+++ b/i18n/locales/ar.json
@@ -651,12 +651,10 @@
   "code": {
     "files_label": "الملفات",
     "no_files": "لا توجد ملفات في هذا المجلد",
-    "root": "الجذر",
     "lines": "{count} سطر",
     "toggle_tree": "إظهار/إخفاء شجرة الملفات",
     "close_tree": "إغلاق شجرة الملفات",
     "copy_link": "نسخ الرابط",
-    "raw": "خام (Raw)",
     "view_raw": "عرض الملف الخام (Raw)",
     "file_too_large": "الملف كبير جدًا للمعاينة",
     "file_size_warning": "{size} يتجاوز حد 500KB للتظليل النحوي (syntax highlighting)",
diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
index 85894165eb..48856ad81b 100644
--- a/i18n/locales/az-AZ.json
+++ b/i18n/locales/az-AZ.json
@@ -755,12 +755,10 @@
   "code": {
     "files_label": "Fayllar",
     "no_files": "Bu qovluqda fayl yoxdur",
-    "root": "kök",
     "lines": "{count} sətir",
     "toggle_tree": "Fayl ağacını keçir",
     "close_tree": "Fayl ağacını bağla",
     "copy_link": "Linki kopyala",
-    "raw": "Xam",
     "view_raw": "Xam faylı göstər",
     "file_too_large": "Fayl önbaxış üçün çox böyükdür",
     "file_size_warning": "{size} sintaksis vurğulama üçün 500KB limitini keçir",
diff --git a/i18n/locales/bg-BG.json b/i18n/locales/bg-BG.json
index 032d82a6e5..41053f59bb 100644
--- a/i18n/locales/bg-BG.json
+++ b/i18n/locales/bg-BG.json
@@ -716,12 +716,10 @@
   "code": {
     "files_label": "Файлове",
     "no_files": "Няма файлове в тази директория",
-    "root": "root",
     "lines": "{count} ред | {count} реда",
     "toggle_tree": "Превключване на дървото с файлове",
     "close_tree": "Затваряне на дървото с файлове",
     "copy_link": "Копиране на връзка",
-    "raw": "Raw",
     "view_raw": "Преглед на raw файл",
     "file_too_large": "Файлът е твърде голям за преглед",
     "file_size_warning": "{size} надвишава лимита от 500KB за синтактично оцветяване",
diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
index 39d19eec65..ff7cf7ee7f 100644
--- a/i18n/locales/bn-IN.json
+++ b/i18n/locales/bn-IN.json
@@ -545,12 +545,10 @@
   "code": {
     "files_label": "ফাইলগুলি",
     "no_files": "এই ডাইরেক্টরিতে কোনো ফাইল নেই",
-    "root": "রুট",
     "lines": "{count}টি লাইন",
     "toggle_tree": "ফাইল ট্রি টগল করুন",
     "close_tree": "ফাইল ট্রি বন্ধ করুন",
     "copy_link": "লিঙ্ক কপি করুন",
-    "raw": "রও",
     "view_raw": "রও ফাইল দেখুন",
     "file_too_large": "প্রিভিউ-র জন্য ফাইল খুব বড়",
     "file_size_warning": "{size} সিনট্যাক্স হাইলাইটিং-এর জন্য 500KB সীমার চেয়ে বেশি",
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index 638904c4fb..36f96c81c1 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -767,12 +767,10 @@
   "code": {
     "files_label": "Soubory",
     "no_files": "Žádné soubory v této složce",
-    "root": "kořen",
     "lines": "{count} řádků",
     "toggle_tree": "Přepnout strom souborů",
     "close_tree": "Zavřít strom souborů",
     "copy_link": "Kopírovat odkaz",
-    "raw": "Raw",
     "view_raw": "Zobrazit raw soubor",
     "file_too_large": "Soubor je příliš velký pro náhled",
     "file_size_warning": "{size} překračuje limit 500KB pro zvýraznění syntaxe",
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 4a17bed86d..34958fcfe3 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -821,12 +821,10 @@
   "code": {
     "files_label": "Dateien",
     "no_files": "Keine Dateien in diesem Verzeichnis",
-    "root": "Wurzel",
     "lines": "{count} Zeile | {count} Zeilen",
     "toggle_tree": "Dateibaum umschalten",
     "close_tree": "Dateibaum schließen",
     "copy_link": "Link kopieren",
-    "raw": "Roh",
     "view_raw": "Rohdatei anzeigen",
     "file_too_large": "Datei zu groß für Vorschau",
     "file_size_warning": "{size} überschreitet das 500KB-Limit für Syntax-Highlighting",
@@ -1462,5 +1460,12 @@
     "selection": "0 ausgewählt | 1 ausgewählt | {count} ausgewählt",
     "shortcut": "Drücke „{key}“, um Aktionen zu fokussieren",
     "button_close_aria_label": "Aktionsleiste schließen"
+  },
+  "logo_menu": {},
+  "brand": {
+    "logos": {},
+    "customize": {},
+    "typography": {},
+    "guidelines": {}
   }
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 16c891ae47..66f0eb39b5 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -825,13 +825,15 @@
   "code": {
     "files_label": "Files",
     "no_files": "No files in this directory",
-    "root": "root",
     "lines": "{count} line | {count} lines",
     "toggle_tree": "Toggle file tree",
     "close_tree": "Close file tree",
+    "copy_content": "Copy file content",
     "copy_link": "Copy link",
-    "raw": "Raw",
     "view_raw": "View raw file",
+    "toggle_container": "Toggle code container width",
+    "open_raw_file": "Open raw file",
+    "open_path_dropdown": "Open path segments dropdown",
     "file_too_large": "File too large to preview",
     "file_size_warning": "{size} exceeds the 500KB limit for syntax highlighting",
     "failed_to_load": "Failed to load file",
@@ -846,8 +848,8 @@
       "size": "Size"
     },
     "markdown_view_mode": {
-      "preview": "preview",
-      "code": "code"
+      "preview": "Preview",
+      "code": "Code"
     },
     "file_path": "File path",
     "binary_file": "Binary file",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 3fe046fe23..78a50b980d 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -772,12 +772,10 @@
   "code": {
     "files_label": "Archivos",
     "no_files": "No hay archivos en este directorio",
-    "root": "raíz",
     "lines": "{count} líneas",
     "toggle_tree": "Alternar árbol de archivos",
     "close_tree": "Cerrar árbol de archivos",
     "copy_link": "Copiar enlace",
-    "raw": "Crudo",
     "view_raw": "Ver archivo crudo",
     "file_too_large": "Archivo demasiado grande para previsualizar",
     "file_size_warning": "{size} excede el límite de 500KB para resaltado de sintaxis",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index f6c17d5b9c..91666df4fa 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -825,12 +825,10 @@
   "code": {
     "files_label": "Fichiers",
     "no_files": "Aucun fichier dans ce répertoire",
-    "root": "racine",
     "lines": "{count} lignes",
     "toggle_tree": "Basculer l'arborescence",
     "close_tree": "Fermer l'arborescence",
     "copy_link": "Copier le lien",
-    "raw": "Brut",
     "view_raw": "Voir le fichier brut",
     "file_too_large": "Fichier trop volumineux pour l'aperçu",
     "file_size_warning": "{size} dépasse la limite de 500 Ko pour la coloration syntaxique",
diff --git a/i18n/locales/hi-IN.json b/i18n/locales/hi-IN.json
index 56873fa206..f50667807e 100644
--- a/i18n/locales/hi-IN.json
+++ b/i18n/locales/hi-IN.json
@@ -13,11 +13,11 @@
   "trademark_disclaimer": "npm, npm, Inc. का पंजीकृत ट्रेडमार्क है। यह साइट npm, Inc. से संबद्ध नहीं है।",
   "footer": {
     "about": "हमारे बारे में जानकारी",
+    "blog": "ब्लॉग",
     "docs": "दस्तावेज़",
     "source": "स्रोत",
     "social": "सोशल",
     "chat": "चैट",
-    "blog": "ब्लॉग",
     "builders_chat": "बिल्डर्स",
     "keyboard_shortcuts": "कीबोर्ड शॉर्टकट"
   },
@@ -46,13 +46,21 @@
     "button": "खोजें",
     "searching": "खोज रहे हैं...",
     "found_packages": "कोई पैकेज नहीं मिला | 1 पैकेज मिला | {count} पैकेज मिले",
+    "found_packages_sorted": "कोई परिणाम नहीं मिला | शीर्ष {count} परिणाम क्रमबद्ध किया जा रहा है | शीर्ष {count} परिणाम क्रमबद्ध किए जा रहे हैं",
     "updating": "(अद्यतन हो रहा है...)",
     "no_results": "\"{query}\" के लिए कोई पैकेज नहीं मिला",
+    "rate_limited": "npm की rate limit लग गई है, कुछ देर बाद फिर प्रयास करें",
+    "title": "खोज",
+    "title_search": "खोज: {search}",
+    "title_packages": "पैकेज खोजें",
+    "meta_description": "'{search}' के लिए खोज परिणाम",
+    "meta_description_packages": "npm पैकेज खोजें",
     "not_taken": "{name} उपलब्ध है",
     "claim_prompt": "npm पर इस पैकेज नाम को दावा करें",
     "claim_button": "\"{name}\" दावा करें",
     "want_to_claim": "इस पैकेज नाम को दावा करना चाहते हैं?",
     "start_typing": "पैकेज खोजने के लिए टाइप करना शुरू करें",
+    "algolia_disclaimer": "Algolia द्वारा संचालित",
     "exact_match": "सटीक",
     "suggestion": {
       "user": "उपभोक्ता",
@@ -60,14 +68,6 @@
       "view_user_packages": "इस उपभोक्ता के पैकेज देखें",
       "view_org_packages": "इस संगठन के पैकेज देखें"
     },
-    "found_packages_sorted": "कोई परिणाम नहीं मिला | शीर्ष {count} परिणाम क्रमबद्ध किया जा रहा है | शीर्ष {count} परिणाम क्रमबद्ध किए जा रहे हैं",
-    "rate_limited": "npm की rate limit लग गई है, कुछ देर बाद फिर प्रयास करें",
-    "title": "खोज",
-    "title_search": "खोज: {search}",
-    "title_packages": "पैकेज खोजें",
-    "meta_description": "'{search}' के लिए खोज परिणाम",
-    "meta_description_packages": "npm पैकेज खोजें",
-    "algolia_disclaimer": "Algolia द्वारा संचालित",
     "instant_search": "तुरंत खोज",
     "instant_search_on": "चालू",
     "instant_search_off": "बंद",
@@ -88,9 +88,15 @@
     "tap_to_search": "खोजने के लिए टैप करें"
   },
   "blog": {
+    "title": "ब्लॉग",
+    "heading": "ब्लॉग",
+    "meta_description": "npmx समुदाय से अंतर्दृष्टि और अपडेट",
     "author": {
       "view_profile": "Bluesky पर {name} की प्रोफ़ाइल देखें"
     },
+    "draft_badge": "मसौदा",
+    "draft_banner": "यह एक अप्रकाशित मसौदा है। यह अधूरा हो सकता है या इसमें अशुद्धियाँ हो सकती हैं।",
+    "no_posts": "कोई पोस्ट नहीं मिली।",
     "atproto": {
       "view_on_bluesky": "Bluesky पर देखें",
       "reply_on_bluesky": "Bluesky पर जवाब दें",
@@ -105,13 +111,7 @@
       "like_count": "{count} लाइक | {count} लाइक्स",
       "repost_count": "{count} रिपोस्ट | {count} रिपोस्ट",
       "more_replies": "{count} और जवाब... | {count} और जवाब..."
-    },
-    "title": "ब्लॉग",
-    "heading": "ब्लॉग",
-    "meta_description": "npmx समुदाय से अंतर्दृष्टि और अपडेट",
-    "draft_badge": "मसौदा",
-    "draft_banner": "यह एक अप्रकाशित मसौदा है। यह अधूरा हो सकता है या इसमें अशुद्धियाँ हो सकती हैं।",
-    "no_posts": "कोई पोस्ट नहीं मिली।"
+    }
   },
   "settings": {
     "title": "सेटिंग्स",
@@ -120,8 +120,8 @@
     "sections": {
       "appearance": "स्वरूप",
       "display": "प्रदर्शन",
-      "language": "भाषा",
       "search": "खोज सुविधाएँ",
+      "language": "भाषा",
       "keyboard_shortcuts": "कीबोर्ड शॉर्टकट"
     },
     "data_source": {
@@ -132,17 +132,22 @@
       "algolia": "Algolia",
       "algolia_description": "तेज़ खोज, org और user पेजों के लिए Algolia का उपयोग करता है।"
     },
+    "instant_search": "तुरंत खोज",
+    "instant_search_description": "खोज पेज पर ले जाता है और आपके टाइप करते ही परिणाम अपडेट करता है।",
     "relative_dates": "सापेक्ष तिथियाँ",
     "include_types": "इंस्टॉल में {'@'}types शामिल करें",
     "include_types_description": "अनटाइप्ड पैकेज के लिए इंस्टॉल कमांड में {'@'}types पैकेज जोड़ें",
     "hide_platform_packages": "खोज में प्लेटफ़ॉर्म-विशिष्ट पैकेज छिपाएं",
     "hide_platform_packages_description": "परिणामों से {'@'}esbuild/linux-x64 जैसे नेटिव बाइनरी पैकेज छिपाएं",
+    "enable_graph_pulse_loop": "मिनी ग्राफ़ पर pulse प्रभाव का लूपिंग सक्षम करें",
+    "enable_graph_pulse_loop_description": "साप्ताहिक डाउनलोड ग्राफ़ पर लगातार pulse animation सक्रिय करें। यह animation कुछ उपयोगकर्ताओं के लिए विचलित करने वाला हो सकता है।",
     "theme": "थीम",
     "theme_light": "लाइट",
     "theme_dark": "डार्क",
     "theme_system": "सिस्टम",
     "language": "भाषा",
     "help_translate": "npmx का अनुवाद करने में मदद करें",
+    "translation_status": "वैश्विक अनुवाद स्थिति देखें",
     "accent_colors": {
       "label": "एक्सेंट रंग",
       "sky": "आसमानी",
@@ -162,11 +167,6 @@
       "slate": "स्लेट",
       "black": "काला"
     },
-    "instant_search": "तुरंत खोज",
-    "instant_search_description": "खोज पेज पर ले जाता है और आपके टाइप करते ही परिणाम अपडेट करता है।",
-    "enable_graph_pulse_loop": "मिनी ग्राफ़ पर pulse प्रभाव का लूपिंग सक्षम करें",
-    "enable_graph_pulse_loop_description": "साप्ताहिक डाउनलोड ग्राफ़ पर लगातार pulse animation सक्रिय करें। यह animation कुछ उपयोगकर्ताओं के लिए विचलित करने वाला हो सकता है।",
-    "translation_status": "वैश्विक अनुवाद स्थिति देखें",
     "keyboard_shortcuts_enabled": "कीबोर्ड शॉर्टकट सक्षम करें",
     "keyboard_shortcuts_enabled_description": "यदि कीबोर्ड शॉर्टकट अन्य ब्राउज़र या सिस्टम शॉर्टकट से टकराते हैं, तो उन्हें बंद किया जा सकता है"
   },
@@ -192,6 +192,7 @@
     "end_of_results": "परिणाम समाप्त",
     "try_again": "पुनः प्रयास करें",
     "close": "बंद करें",
+    "or": "या",
     "retry": "पुनः प्रयास",
     "copy": "कॉपी करें",
     "copied": "कॉपी हो गया!",
@@ -206,6 +207,10 @@
       "members": "सदस्य"
     },
     "scroll_to_top": "शीर्ष पर स्क्रॉल करें",
+    "cancel": "रद्द करें",
+    "save": "सहेजें",
+    "edit": "संपादित करें",
+    "error": "त्रुटि",
     "view_on": {
       "npm": "npm पर देखें",
       "github": "GitHub पर देखें",
@@ -220,30 +225,11 @@
       "sourcehut": "SourceHut पर देखें",
       "tangled": "Tangled पर देखें"
     },
-    "or": "या",
-    "cancel": "रद्द करें",
-    "save": "सहेजें",
-    "edit": "संपादित करें",
-    "error": "त्रुटि",
     "collapse": "संक्षिप्त करें",
     "expand": "विस्तृत करें"
   },
   "profile": {
-    "invite": {
-      "message": "ऐसा नहीं लगता कि वे अभी npmx का उपयोग कर रहे हैं। क्या आप उन्हें इसके बारे में बताना चाहते हैं?",
-      "share_button": "Bluesky पर साझा करें",
-      "compose_text": "Hey {'@'}{handle}! Have you checked out npmx.dev yet? It's a browser for the npm registry that's fast, modern, and open-source.\nhttps://npmx.dev"
-    },
-    "display_name": "प्रदर्शित नाम",
-    "description": "विवरण",
-    "no_description": "कोई विवरण नहीं",
-    "website": "वेबसाइट",
-    "website_placeholder": "https://example.com",
-    "likes": "लाइक्स",
-    "seo_title": "{handle} - npmx",
-    "seo_description": "{handle} द्वारा npmx प्रोफ़ाइल",
-    "not_found": "प्रोफ़ाइल नहीं मिली",
-    "not_found_message": "{handle} की प्रोफ़ाइल नहीं मिल सकी।"
+    "invite": {}
   },
   "package": {
     "not_found": "पैकेज नहीं मिला",
@@ -271,9 +257,9 @@
       "documented": "{community} ने इस पैकेज को अधिक प्रदर्शनकारी विकल्पों के रूप में फ़्लैग किया है।",
       "none": "यह पैकेज अब आवश्यक नहीं होने के रूप में फ़्लैग किया गया है, और इसकी कार्यक्षमता सभी इंजनों में नेटिवली उपलब्ध होने की संभावना है।",
       "learn_more": "और जानें",
+      "learn_more_above": "ऊपर और जानें।",
       "mdn": "MDN",
       "community": "समुदाय",
-      "learn_more_above": "ऊपर और जानें।",
       "consider_no_dep": "+ बिना निर्भरता पर विचार करें?"
     },
     "stats": {
@@ -281,14 +267,14 @@
       "deps": "निर्भरता",
       "install_size": "इंस्टॉल साइज़",
       "vulns": "कमजोरियाँ",
+      "published": "प्रकाशित",
+      "published_tooltip": "{package}{'@'}{version} के प्रकाशित होने की तिथि",
       "view_dependency_graph": "निर्भरता ग्राफ़ देखें",
       "inspect_dependency_tree": "निर्भरता ट्री का निरीक्षण करें",
       "size_tooltip": {
         "unpacked": "{size} अनपैक्ड साइज़ (यह पैकेज)",
         "total": "{size} कुल अनपैक्ड साइज़ (linux-x64 के लिए सभी {count} निर्भरता सहित)"
-      },
-      "published": "प्रकाशित",
-      "published_tooltip": "{package}{'@'}{version} के प्रकाशित होने की तिथि"
+      }
     },
     "skills": {
       "title": "एजेंट स्किल्स",
@@ -309,6 +295,7 @@
       "skills_cli": "skills CLI"
     },
     "links": {
+      "main": "मुख्य",
       "repo": "रिपो",
       "homepage": "मुखपृष्ठ",
       "issues": "मसले",
@@ -317,7 +304,6 @@
       "docs": "दस्तावेज़",
       "fund": "दान करें",
       "compare": "तुलना करें",
-      "main": "मुख्य",
       "compare_this_package": "इस पैकेज की तुलना करें"
     },
     "likes": {
@@ -325,10 +311,10 @@
       "unlike": "इस पैकेज को अनलाइक करें"
     },
     "docs": {
-      "not_available": "दस्तावेज़ उपलब्ध नहीं",
-      "not_available_detail": "हम इस संस्करण के लिए दस्तावेज़ जेनरेट नहीं कर सके।",
       "contents": "सामग्री",
       "default_not_available": "इस संस्करण के लिए दस्तावेज़ उपलब्ध नहीं हैं।",
+      "not_available": "दस्तावेज़ उपलब्ध नहीं",
+      "not_available_detail": "हम इस संस्करण के लिए दस्तावेज़ जेनरेट नहीं कर सके।",
       "page_title": "API Docs - npmx",
       "page_title_name": "{name} docs - npmx",
       "page_title_version": "{name} docs - npmx",
@@ -339,9 +325,9 @@
       "title": "शुरू करें",
       "pm_label": "पैकेज मैनेजर",
       "copy_command": "इंस्टॉल कमांड कॉपी करें",
-      "view_types": "{package} देखें",
       "copy_dev_command": "dev इंस्टॉल कमांड कॉपी करें",
-      "dev_dependency_hint": "आमतौर पर dev dependency के रूप में इंस्टॉल किया जाता है"
+      "dev_dependency_hint": "आमतौर पर dev dependency के रूप में इंस्टॉल किया जाता है",
+      "view_types": "{package} देखें"
     },
     "create": {
       "title": "नया प्रोजेक्ट बनाएं",
@@ -355,6 +341,7 @@
     "readme": {
       "title": "रीडमी",
       "no_readme": "कोई README उपलब्ध नहीं है।",
+      "toc_title": "रूपरेखा",
       "callout": {
         "note": "नोट",
         "tip": "सुझाव",
@@ -362,7 +349,6 @@
         "warning": "चेतावनी",
         "caution": "सावधानी"
       },
-      "toc_title": "रूपरेखा",
       "copy_as_markdown": "README को Markdown के रूप में कॉपी करें"
     },
     "provenance_section": {
@@ -390,10 +376,10 @@
     "compatibility": "संगतता",
     "card": {
       "publisher": "प्रकाशक",
+      "published": "प्रकाशित",
       "weekly_downloads": "साप्ताहिक डाउनलोड्स",
       "keywords": "कीवर्ड्स",
       "license": "अनुज्ञप्ति",
-      "published": "प्रकाशित",
       "select": "पैकेज चुनें",
       "select_maximum": "अधिकतम {count} पैकेज चुने जा सकते हैं"
     },
@@ -410,10 +396,6 @@
       "all_covered": "सभी संस्करण ऊपर के टैग्स द्वारा कवर किए गए हैं",
       "deprecated_title": "{version} (डेप्रीकेटेड)",
       "view_all": "{count} संस्करण देखें | सभी {count} संस्करण देखें",
-      "copy_alt": {
-        "per_version_analysis": "{version} संस्करण {downloads} बार डाउनलोड किया गया था",
-        "general_description": "बार चार्ट {package_name} पैकेज के {versions_count} {semver_grouping_mode} संस्करणों के प्रति-संस्करण डाउनलोड दिखाता है, {date_range_label} {first_version} संस्करण से {last_version} संस्करण तक। सबसे अधिक डाउनलोड किया गया संस्करण {max_downloaded_version} है, जिसके {max_version_downloads} डाउनलोड हैं। {per_version_analysis}. {watermark}."
-      },
       "view_all_versions": "सभी संस्करण देखें",
       "distribution_title": "Semver समूह",
       "distribution_modal_title": "संस्करण",
@@ -438,6 +420,10 @@
       "filter_tooltip": "{link} का उपयोग करके संस्करण फ़िल्टर करें। उदाहरण के लिए, ^3.0.0 सभी 3.x संस्करण दिखाता है।",
       "filter_tooltip_link": "semver range",
       "no_matches": "इस range से कोई संस्करण मेल नहीं खाता",
+      "copy_alt": {
+        "per_version_analysis": "{version} संस्करण {downloads} बार डाउनलोड किया गया था",
+        "general_description": "बार चार्ट {package_name} पैकेज के {versions_count} {semver_grouping_mode} संस्करणों के प्रति-संस्करण डाउनलोड दिखाता है, {date_range_label} {first_version} संस्करण से {last_version} संस्करण तक। सबसे अधिक डाउनलोड किया गया संस्करण {max_downloaded_version} है, जिसके {max_version_downloads} डाउनलोड हैं। {per_version_analysis}. {watermark}."
+      },
       "page_title": "संस्करण इतिहास",
       "current_tags": "वर्तमान टैग्स",
       "version_filter_placeholder": "संस्करण फ़िल्टर करें…",
@@ -482,6 +468,12 @@
       "maintainer_template": "{avatar} {char126}{name}"
     },
     "trends": {
+      "chart_assistive_text": {
+        "keyboard_navigation_horizontal": "डेटा बिंदुओं के बीच जाने के लिए बाएँ और दाएँ तीर कुंजियों का उपयोग करें।",
+        "keyboard_navigation_vertical": "डेटा बिंदुओं के बीच जाने के लिए ऊपर और नीचे तीर कुंजियों का उपयोग करें।",
+        "table_available": "इस चार्ट के लिए नीचे एक डेटा तालिका उपलब्ध है।",
+        "table_caption": "चार्ट डेटा तालिका"
+      },
       "granularity": "ग्रैन्युलैरिटी",
       "granularity_daily": "दैनिक",
       "granularity_weekly": "साप्ताहिक",
@@ -494,33 +486,6 @@
       "date_range_multiline": "{start}\nसे {end}",
       "download_file": "{fileType} डाउनलोड करें",
       "toggle_annotator": "एनोटेटर टॉगल करें",
-      "items": {
-        "downloads": "डाउनलोड्स",
-        "likes": "लाइक्स",
-        "contributors": "योगदानकर्ता"
-      },
-      "copy_alt": {
-        "trend_none": "लगभग स्थिर",
-        "trend_strong": "मज़बूत",
-        "trend_weak": "कमज़ोर",
-        "trend_undefined": "अपरिभाषित (पर्याप्त डेटा नहीं)",
-        "button_label": "वैकल्पिक पाठ कॉपी करें",
-        "watermark": "नीचे की ओर एक वॉटरमार्क लिखा है \"./npmx a fast, modern browser for the npm registry\"",
-        "analysis": "{package_name} {start_value} से शुरू होता है और {end_value} पर समाप्त होता है, जो प्रति समय अंतराल {downloads_slope} डाउनलोड की ढलान के साथ {trend} रुझान दिखाता है",
-        "estimation": "अंतिम मान वर्तमान अवधि के आंशिक डेटा पर आधारित एक अनुमान है।",
-        "estimations": "अंतिम मान वर्तमान अवधि के आंशिक डेटा पर आधारित अनुमान हैं।",
-        "compare": "इनके लिए पैकेज डाउनलोड तुलना रेखा चार्ट: {packages}।",
-        "single_package": "{package} पैकेज के लिए डाउनलोड रेखा चार्ट।",
-        "general_description": "Y अक्ष डाउनलोड की संख्या दर्शाता है। X अक्ष {start_date} से {end_date} तक की तारीख सीमा दर्शाता है, जिसमें {granularity} समय अवधि है।{estimation_notice} {packages_analysis}. {watermark}.",
-        "facet_bar_general_description": "इनके लिए क्षैतिज बार चार्ट: {packages}, {facet} की तुलना करते हुए ({description})। {facet_analysis} {watermark}.",
-        "facet_bar_analysis": "{package_name} का मान {value} है।"
-      },
-      "chart_assistive_text": {
-        "keyboard_navigation_horizontal": "डेटा बिंदुओं के बीच जाने के लिए बाएँ और दाएँ तीर कुंजियों का उपयोग करें।",
-        "keyboard_navigation_vertical": "डेटा बिंदुओं के बीच जाने के लिए ऊपर और नीचे तीर कुंजियों का उपयोग करें।",
-        "table_available": "इस चार्ट के लिए नीचे एक डेटा तालिका उपलब्ध है।",
-        "table_caption": "चार्ट डेटा तालिका"
-      },
       "toggle_stack_mode": "स्टैक मोड टॉगल करें",
       "open_options": "विकल्प खोलें",
       "close_options": "विकल्प बंद करें",
@@ -530,6 +495,11 @@
       "facet": "फेसेट",
       "title": "रुझान",
       "contributors_skip": "Contributors में नहीं दिखाया गया (कोई GitHub repo नहीं):",
+      "items": {
+        "downloads": "डाउनलोड्स",
+        "likes": "लाइक्स",
+        "contributors": "योगदानकर्ता"
+      },
       "data_correction": "डेटा सुधार",
       "average_window": "औसत विंडो",
       "smoothing": "स्मूदिंग",
@@ -541,7 +511,23 @@
       "known_anomalies_range_named": "{packageName}: {start} से {end} तक",
       "known_anomalies_none": "इस पैकेज के लिए कोई ज्ञात विसंगति नहीं। | इन पैकेजों के लिए कोई ज्ञात विसंगति नहीं।",
       "known_anomalies_contribute": "विसंगति डेटा में योगदान दें",
-      "apply_correction": "सुधार लागू करें"
+      "apply_correction": "सुधार लागू करें",
+      "copy_alt": {
+        "trend_none": "लगभग स्थिर",
+        "trend_strong": "मज़बूत",
+        "trend_weak": "कमज़ोर",
+        "trend_undefined": "अपरिभाषित (पर्याप्त डेटा नहीं)",
+        "button_label": "वैकल्पिक पाठ कॉपी करें",
+        "watermark": "नीचे की ओर एक वॉटरमार्क लिखा है \"./npmx a fast, modern browser for the npm registry\"",
+        "analysis": "{package_name} {start_value} से शुरू होता है और {end_value} पर समाप्त होता है, जो प्रति समय अंतराल {downloads_slope} डाउनलोड की ढलान के साथ {trend} रुझान दिखाता है",
+        "estimation": "अंतिम मान वर्तमान अवधि के आंशिक डेटा पर आधारित एक अनुमान है।",
+        "estimations": "अंतिम मान वर्तमान अवधि के आंशिक डेटा पर आधारित अनुमान हैं।",
+        "compare": "इनके लिए पैकेज डाउनलोड तुलना रेखा चार्ट: {packages}।",
+        "single_package": "{package} पैकेज के लिए डाउनलोड रेखा चार्ट।",
+        "general_description": "Y अक्ष डाउनलोड की संख्या दर्शाता है। X अक्ष {start_date} से {end_date} तक की तारीख सीमा दर्शाता है, जिसमें {granularity} समय अवधि है।{estimation_notice} {packages_analysis}. {watermark}.",
+        "facet_bar_general_description": "इनके लिए क्षैतिज बार चार्ट: {packages}, {facet} की तुलना करते हुए ({description})। {facet_analysis} {watermark}.",
+        "facet_bar_analysis": "{package_name} का मान {value} है।"
+      }
     },
     "downloads": {
       "title": "साप्ताहिक डाउनलोड्स",
@@ -563,11 +549,11 @@
       "esm": "ES Modules समर्थित",
       "cjs": "CommonJS समर्थित",
       "no_esm": "ES Modules समर्थन नहीं",
+      "wasm": "WebAssembly है",
       "types_label": "टाइप्स",
       "types_included": "टाइप्स शामिल हैं",
       "types_available": "टाइप्स {package} के माध्यम से उपलब्ध",
-      "no_types": "कोई TypeScript टाइप्स नहीं",
-      "wasm": "WebAssembly है"
+      "no_types": "कोई TypeScript टाइप्स नहीं"
     },
     "license": {
       "view_spdx": "SPDX पर अनुज्ञप्ति टेक्स्ट देखें",
@@ -629,9 +615,9 @@
     },
     "sort": {
       "downloads": "सबसे अधिक डाउनलोड किए गए",
+      "published": "हाल ही में प्रकाशित",
       "name_asc": "नाम (A-Z)",
-      "name_desc": "नाम (Z-A)",
-      "published": "हाल ही में प्रकाशित"
+      "name_desc": "नाम (Z-A)"
     },
     "size": {
       "b": "{size} B",
@@ -678,7 +664,9 @@
       "otp_placeholder": "OTP कोड दर्ज करें...",
       "otp_label": "वन-टाइम पासवर्ड",
       "retry_otp": "OTP के साथ पुनः प्रयास करें",
+      "retry_web_auth": "वेब प्रमाणीकरण के साथ पुनः प्रयास करें",
       "retrying": "पुनः प्रयास कर रहे हैं...",
+      "open_web_auth": "वेब प्रमाणीकरण लिंक खोलें",
       "approve_operation": "ऑपरेशन स्वीकृत करें",
       "remove_operation": "ऑपरेशन हटाएं",
       "approve_all": "सभी स्वीकृत करें",
@@ -686,9 +674,7 @@
       "executing": "निष्पादित हो रहा है...",
       "log": "लॉग",
       "log_label": "पूर्ण ऑपरेशन्स लॉग",
-      "remove_from_log": "लॉग से हटाएं",
-      "retry_web_auth": "वेब प्रमाणीकरण के साथ पुनः प्रयास करें",
-      "open_web_auth": "वेब प्रमाणीकरण लिंक खोलें"
+      "remove_from_log": "लॉग से हटाएं"
     }
   },
   "org": {
@@ -802,6 +788,7 @@
       "invalid_name": "अमान्य पैकेज नाम:",
       "available": "यह नाम उपलब्ध है!",
       "taken": "यह नाम पहले से लिया जा चुका है।",
+      "missing_permission": "आपके पास scope {'@'}{scope} में पैकेज जोड़ने की अनुमति नहीं है।",
       "similar_warning": "समान पैकेज मौजूद हैं - npm इस नाम को अस्वीकार कर सकता है:",
       "related": "संबंधित पैकेज:",
       "scope_warning_title": "इसके बजाय स्कोप्ड पैकेज का उपयोग करने पर विचार करें",
@@ -814,19 +801,16 @@
       "publishing": "प्रकाशित हो रहा है...",
       "checking": "उपलब्धता जाँच रहे हैं...",
       "failed_to_check": "नाम उपलब्धता जाँचने में विफल",
-      "failed_to_claim": "पैकेज दावा करने में विफल",
-      "missing_permission": "आपके पास scope {'@'}{scope} में पैकेज जोड़ने की अनुमति नहीं है।"
+      "failed_to_claim": "पैकेज दावा करने में विफल"
     }
   },
   "code": {
     "files_label": "फ़ाइलें",
     "no_files": "इस डायरेक्टरी में कोई फ़ाइलें नहीं",
-    "root": "रूट",
     "lines": "{count} पंक्तियाँ",
     "toggle_tree": "फ़ाइल ट्री टॉगल करें",
     "close_tree": "फ़ाइल ट्री बंद करें",
     "copy_link": "लिंक कॉपी करें",
-    "raw": "रॉ",
     "view_raw": "रॉ फ़ाइल देखें",
     "file_too_large": "फ़ाइल पूर्वावलोकन के लिए बहुत बड़ी है",
     "file_size_warning": "{size} सिंटैक्स हाइलाइटिंग के लिए 500KB सीमा से अधिक है",
@@ -909,6 +893,8 @@
       "secure": "चेतावनियों के बिना",
       "insecure": "चेतावनियों के साथ"
     },
+    "view_selected": "चयनित देखें",
+    "clear_selected_label": "चयन साफ़ करें",
     "sort": {
       "label": "पैकेज क्रमबद्ध करें",
       "toggle_direction": "क्रमबद्ध दिशा टॉगल करें",
@@ -919,8 +905,8 @@
       "downloads_day": "डाउनलोड्स/दिन",
       "downloads_month": "डाउनलोड्स/महीना",
       "downloads_year": "डाउनलोड्स/वर्ष",
-      "name": "नाम",
-      "published": "अंतिम प्रकाशन"
+      "published": "अंतिम प्रकाशन",
+      "name": "नाम"
     },
     "columns": {
       "title": "कॉलम्स",
@@ -931,10 +917,10 @@
       "version": "संस्करण",
       "description": "विवरण",
       "downloads": "डाउनलोड्स/सप्ताह",
+      "published": "अंतिम प्रकाशन",
       "maintainers": "अनुरक्षक",
       "keywords": "कीवर्ड्स",
       "security": "सुरक्षा",
-      "published": "अंतिम प्रकाशन",
       "selection": "पैकेज चुनें"
     },
     "view_mode": {
@@ -962,9 +948,7 @@
       "security_warning": "सुरक्षा चेतावनी",
       "secure": "सुरक्षित",
       "no_packages": "कोई पैकेज नहीं मिले"
-    },
-    "view_selected": "चयनित देखें",
-    "clear_selected_label": "चयन साफ़ करें"
+    }
   },
   "about": {
     "title": "हमारे बारे में जानकारी",
@@ -1098,11 +1082,11 @@
       "section_packages": "पैकेज",
       "section_facets": "फेसेट्स",
       "section_comparison": "तुलना",
+      "copy_as_markdown": "तालिका कॉपी करें",
       "loading": "पैकेज डेटा लोड हो रहा है...",
       "error": "पैकेज डेटा लोड करने में विफल। कृपया पुनः प्रयास करें।",
       "empty_title": "तुलना करने के लिए पैकेज चुनें",
       "empty_description": "उनके मेट्रिक्स की साथ-साथ तुलना देखने के लिए ऊपर कम से कम 2 पैकेज खोजें और जोड़ें।",
-      "copy_as_markdown": "तालिका कॉपी करें",
       "table_view": "तालिका",
       "charts_view": "चार्ट्स",
       "bar_chart_nav_hint": "↑ ↓ का उपयोग करें",
@@ -1132,6 +1116,7 @@
       "coming_soon": "जल्द आ रहा है",
       "select_all": "सभी फेसेट्स चुनें",
       "deselect_all": "सभी फेसेट्स अचयनित करें",
+      "binary_only_tooltip": "यह पैकेज binaries दिखाता है और exports नहीं",
       "categories": {
         "performance": "प्रदर्शन",
         "health": "स्वास्थ्य",
@@ -1205,24 +1190,7 @@
       },
       "trends": {
         "title": "रुझानों की तुलना करें"
-      },
-      "binary_only_tooltip": "यह पैकेज binaries दिखाता है और exports नहीं"
-    },
-    "version_invalid_url_format": {
-      "hint": "अमान्य तुलना URL. यह प्रारूप उपयोग करें: {0}",
-      "from_version": "from",
-      "to_version": "to"
-    },
-    "file_filter_option": {
-      "all": "सभी ({count})",
-      "added": "जोड़ी गई ({count})",
-      "removed": "हटाई गई ({count})",
-      "modified": "संशोधित ({count})"
-    },
-    "filter": {
-      "added": "जोड़ी गई",
-      "removed": "हटाई गई",
-      "modified": "संशोधित"
+      }
     },
     "file_changes": "फ़ाइल परिवर्तन",
     "files_count": "{count} फ़ाइल | {count} फ़ाइलें",
@@ -1234,6 +1202,11 @@
     "comparing_versions_label": "संस्करणों की तुलना की जा रही है...",
     "version_back_to_package": "पैकेज पर वापस जाएं",
     "version_error_message": "संस्करणों की तुलना करने में विफल।",
+    "version_invalid_url_format": {
+      "hint": "अमान्य तुलना URL. यह प्रारूप उपयोग करें: {0}",
+      "from_version": "from",
+      "to_version": "to"
+    },
     "version_selector_title": "संस्करण से तुलना करें",
     "summary": "सारांश",
     "deps_count": "{count} निर्भरता | {count} निर्भरताएँ",
@@ -1242,10 +1215,21 @@
     "peer_dependencies": "पीयर निर्भरताएँ",
     "optional_dependencies": "वैकल्पिक निर्भरताएँ",
     "no_dependency_changes": "निर्भरता में कोई परिवर्तन नहीं",
+    "file_filter_option": {
+      "all": "सभी ({count})",
+      "added": "जोड़ी गई ({count})",
+      "removed": "हटाई गई ({count})",
+      "modified": "संशोधित ({count})"
+    },
     "search_files_placeholder": "फ़ाइलें खोजें...",
     "no_files_all": "कोई फ़ाइल नहीं",
     "no_files_search": "\"{query}\" से मेल खाती कोई फ़ाइल नहीं",
     "no_files_filtered": "कोई {filter} फ़ाइल नहीं",
+    "filter": {
+      "added": "जोड़ी गई",
+      "removed": "हटाई गई",
+      "modified": "संशोधित"
+    },
     "files_button": "फ़ाइलें",
     "select_file_prompt": "उसका diff देखने के लिए sidebar से एक फ़ाइल चुनें",
     "close_files_panel": "फ़ाइल पैनल बंद करें",
@@ -1263,6 +1247,8 @@
     "word_wrap": "वर्ड रैप"
   },
   "pds": {
+    "title": "npmx.social",
+    "meta_description": "npmx समुदाय के लिए आधिकारिक AT Protocol Personal Data Server (PDS)।",
     "join": {
       "title": "समुदाय से जुड़ें",
       "description": "चाहे आप atmosphere पर अपना पहला खाता बना रहे हों या किसी मौजूदा खाते को migrate कर रहे हों, आपका यहाँ स्वागत है। आप अपना handle, पोस्ट या followers खोए बिना अपने वर्तमान खाते को migrate कर सकते हैं।",
@@ -1286,11 +1272,12 @@
       "empty": "दिखाने के लिए कोई समुदाय सदस्य नहीं है।",
       "view_profile": "{handle} की प्रोफ़ाइल देखें",
       "new_accounts": "...और {count} जो atmosphere पर नए हैं"
-    },
-    "title": "npmx.social",
-    "meta_description": "npmx समुदाय के लिए आधिकारिक AT Protocol Personal Data Server (PDS)।"
+    }
   },
   "privacy_policy": {
+    "title": "गोपनीयता नीति",
+    "last_updated": "अंतिम अद्यतन: {date}",
+    "welcome": "{app} में आपका स्वागत है। हम आपकी गोपनीयता की रक्षा के लिए प्रतिबद्ध हैं। यह नीति बताती है कि हम कौन-सा डेटा एकत्र करते हैं, उसका उपयोग कैसे करते हैं, और आपकी जानकारी से जुड़े आपके अधिकार क्या हैं।",
     "cookies": {
       "what_are": {
         "title": "कुकीज़ क्या हैं?",
@@ -1365,12 +1352,12 @@
     "changes": {
       "title": "इस नीति में बदलाव",
       "p1": "हम समय-समय पर इस गोपनीयता नीति को अपडेट कर सकते हैं। किसी भी बदलाव को इस पेज पर अद्यतन संशोधन तिथि के साथ प्रकाशित किया जाएगा।"
-    },
-    "title": "गोपनीयता नीति",
-    "last_updated": "अंतिम अद्यतन: {date}",
-    "welcome": "{app} में आपका स्वागत है। हम आपकी गोपनीयता की रक्षा के लिए प्रतिबद्ध हैं। यह नीति बताती है कि हम कौन-सा डेटा एकत्र करते हैं, उसका उपयोग कैसे करते हैं, और आपकी जानकारी से जुड़े आपके अधिकार क्या हैं।"
+    }
   },
   "a11y": {
+    "title": "सुगम्यता",
+    "footer_title": "a11y",
+    "welcome": "हम चाहते हैं कि {app} अधिक से अधिक लोगों के लिए उपयोगी हो।",
     "approach": {
       "title": "हमारा दृष्टिकोण",
       "p1": "हम Web Content Accessibility Guidelines (WCAG) 2.2 का पालन करने का प्रयास करते हैं और सुविधाएँ बनाते समय उन्हें संदर्भ के रूप में उपयोग करते हैं। हम WCAG के किसी भी स्तर के पूर्ण अनुरूप होने का दावा नहीं करते — सुगम्यता एक सतत प्रक्रिया है और अभी भी बहुत काम बाकी है।",
@@ -1395,19 +1382,9 @@
       "title": "प्रतिक्रिया",
       "p1": "यदि आपको {app} पर कोई accessibility बाधा दिखाई दे, तो कृपया हमारे {link} पर issue खोलकर हमें बताएं। हम ऐसी रिपोर्टों को गंभीरता से लेते हैं और उन्हें ठीक करने का पूरा प्रयास करेंगे।",
       "link": "GitHub रिपॉजिटरी"
-    },
-    "title": "सुगम्यता",
-    "footer_title": "a11y",
-    "welcome": "हम चाहते हैं कि {app} अधिक से अधिक लोगों के लिए उपयोगी हो।"
+    }
   },
   "translation_status": {
-    "table": {
-      "file": "फ़ाइल",
-      "status": "स्थिति",
-      "error": "फ़ाइल सूची लोड करते समय त्रुटि।",
-      "empty": "कोई फ़ाइल नहीं मिली",
-      "file_link": "GitHub पर {file} ({lang}) संपादित करें"
-    },
     "title": "अनुवाद स्थिति",
     "generated_at": "निर्माण तिथि: {date}",
     "welcome": "यदि आप नीचे सूचीबद्ध भाषाओं में से किसी एक में {npmx} का अनुवाद करने में हमारी मदद करना चाहते हैं, तो आप सही जगह पर हैं! यह अपने-आप अपडेट होने वाला पेज हमेशा वह सारी सामग्री दिखाता है, जिसमें इस समय आपकी मदद की ज़रूरत है।",
@@ -1421,13 +1398,14 @@
     "complete_text": "यह अनुवाद पूरा हो चुका है, शानदार काम!",
     "missing_text": "गायब",
     "missing_keys": "कोई अनुवाद गायब नहीं है | अनुवाद गायब है | अनुवाद गायब हैं",
-    "progress_label": "{locale} के लिए प्रगति स्थिति"
-  },
-  "action_bar": {
-    "title": "एक्शन बार",
-    "selection": "0 चयनित | 1 चयनित | {count} चयनित",
-    "shortcut": "क्रियाओं पर फ़ोकस करने के लिए \"{key}\" दबाएँ",
-    "button_close_aria_label": "एक्शन बार बंद करें"
+    "progress_label": "{locale} के लिए प्रगति स्थिति",
+    "table": {
+      "file": "फ़ाइल",
+      "status": "स्थिति",
+      "error": "फ़ाइल सूची लोड करते समय त्रुटि।",
+      "empty": "कोई फ़ाइल नहीं मिली",
+      "file_link": "GitHub पर {file} ({lang}) संपादित करें"
+    }
   },
   "vacations": {
     "title": "छुट्टी पर",
@@ -1462,5 +1440,18 @@
         "all": "सभी"
       }
     }
+  },
+  "action_bar": {
+    "title": "एक्शन बार",
+    "selection": "0 चयनित | 1 चयनित | {count} चयनित",
+    "shortcut": "क्रियाओं पर फ़ोकस करने के लिए \"{key}\" दबाएँ",
+    "button_close_aria_label": "एक्शन बार बंद करें"
+  },
+  "logo_menu": {},
+  "brand": {
+    "logos": {},
+    "customize": {},
+    "typography": {},
+    "guidelines": {}
   }
 }
diff --git a/i18n/locales/hu-HU.json b/i18n/locales/hu-HU.json
index b81921f621..0a0b19980c 100644
--- a/i18n/locales/hu-HU.json
+++ b/i18n/locales/hu-HU.json
@@ -716,12 +716,10 @@
   "code": {
     "files_label": "Fájlok",
     "no_files": "Nincsenek fájlok ebben a könyvtárban",
-    "root": "gyökér",
     "lines": "{count} sor | {count} sor",
     "toggle_tree": "Fájlfa kapcsolása",
     "close_tree": "Fájlfa bezárása",
     "copy_link": "Link másolása",
-    "raw": "Nyers",
     "view_raw": "Nyers fájl megtekintése",
     "file_too_large": "A fájl túl nagy az előnézethez",
     "file_size_warning": "{size} meghaladja az 500KB-os limitet a szintaxis alapú formázáshoz",
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index 7383879d8c..ba25f6037d 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -825,12 +825,10 @@
   "code": {
     "files_label": "Berkas",
     "no_files": "Tidak ada file di direktori ini",
-    "root": "root",
     "lines": "{count} baris",
     "toggle_tree": "Ganti file tree",
     "close_tree": "Tutup file tree",
     "copy_link": "Salin tautan",
-    "raw": "Raw",
     "view_raw": "Lihat file mentah",
     "file_too_large": "Berkas terlalu besar untuk pratinjau",
     "file_size_warning": "{size} melebihi batas 500KB untuk penyorotan sintaksis",
@@ -1493,8 +1491,8 @@
       "mark_light_alt": "Logo mark npmx dengan titik dan garis di latar terang",
       "on_dark": "di latar gelap",
       "on_light": "di latar terang",
-      "download_png": "PNG",
       "download_svg": "SVG",
+      "download_png": "PNG",
       "download_svg_aria": "Unduh {name} sebagai SVG",
       "download_png_aria": "Unduh {name} sebagai PNG"
     },
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
index d96207920b..8335afc24d 100644
--- a/i18n/locales/it-IT.json
+++ b/i18n/locales/it-IT.json
@@ -634,12 +634,10 @@
   "code": {
     "files_label": "File",
     "no_files": "Nessun file in questa directory",
-    "root": "root",
     "lines": "{count} riga | {count} righe",
     "toggle_tree": "Attiva/disattiva albero dei file",
     "close_tree": "Chiudi albero dei file",
     "copy_link": "Copia link",
-    "raw": "Raw",
     "view_raw": "Visualizza file raw",
     "file_too_large": "File troppo grande per visualizzare l'anteprima",
     "file_size_warning": "{size} supera il limite di 500 KB per l'evidenziatore di sintassi",
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index 2270f6c5d3..2d21d1fb99 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -769,12 +769,10 @@
   "code": {
     "files_label": "ファイル",
     "no_files": "このディレクトリにファイルはありません",
-    "root": "ルート",
     "lines": "{count} 行",
     "toggle_tree": "ファイルツリーを切り替え",
     "close_tree": "ファイルツリーを閉じる",
     "copy_link": "リンクをコピー",
-    "raw": "RAW",
     "view_raw": "RAWファイルを表示",
     "file_too_large": "ファイルが大きすぎるためプレビューできません",
     "file_size_warning": "{size} は構文強調表示の制限である500KBを超えています",
diff --git a/i18n/locales/kn-IN.json b/i18n/locales/kn-IN.json
index f8ec04fa88..a78955fe25 100644
--- a/i18n/locales/kn-IN.json
+++ b/i18n/locales/kn-IN.json
@@ -546,12 +546,10 @@
   "code": {
     "files_label": "ಫೈಲ್‌ಗಳು",
     "no_files": "ಈ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಯಾವುದೇ ಫೈಲ್‌ಗಳಿಲ್ಲ",
-    "root": "ಮೂಲ",
     "lines": "{count} ಸಾಲುಗಳು",
     "toggle_tree": "ಫೈಲ್ ಮರವನ್ನು ಟಾಗಲ್ ಮಾಡಿ",
     "close_tree": "ಫೈಲ್ ಮರ ಮುಚ್ಚಿ",
     "copy_link": "ಲಿಂಕ್ ನಕಲಿಸಿ",
-    "raw": "ರಾ",
     "view_raw": "ರಾ ಫೈಲ್ ನೋಡಿ",
     "file_too_large": "ಪೂರ್ವದೃಶ್ಯಕ್ಕಾಗಿ ಫೈಲ್ ತುಂಬಾ ದೊಡ್ಡದು",
     "file_size_warning": "{size} ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟಿಂಗ್‌ಗೆ 500KB ಮಿತಿಯನ್ನು ಮೀರಿದೆ",
diff --git a/i18n/locales/mr-IN.json b/i18n/locales/mr-IN.json
index c2684b5a49..0bd6ea360e 100644
--- a/i18n/locales/mr-IN.json
+++ b/i18n/locales/mr-IN.json
@@ -22,23 +22,7 @@
     "keyboard_shortcuts": "कीबोर्ड शॉर्टकट"
   },
   "shortcuts": {
-    "section": {
-      "global": "जागतिक",
-      "search": "शोध",
-      "package": "पॅकेज"
-    },
-    "focus_search": "शोधावर फोकस करा",
-    "show_kbd_hints": "कीबोर्ड सूचनांना ठळक करा",
-    "settings": "सेटिंग्ज उघडा",
-    "compare": "तुलना उघडा",
-    "compare_from_package": "तुलना उघडा (सध्याच्या पॅकेजसह पूर्वभरलेले)",
-    "navigate_results": "परिणामांमध्ये फिरा",
-    "go_to_result": "परिणामाकडे जा",
-    "open_code_view": "कोड दृश्य उघडा",
-    "open_docs": "दस्तऐवज उघडा",
-    "disable_shortcuts": "तुम्ही {settings} मध्ये कीबोर्ड शॉर्टकट अक्षम करू शकता.",
-    "open_main": "मुख्य माहिती उघडा",
-    "open_diff": "आवृत्तीतील फरक उघडा"
+    "section": {}
   },
   "search": {
     "label": "npm पॅकेजेस शोधा",
@@ -229,21 +213,7 @@
     "expand": "विस्तृत करा"
   },
   "profile": {
-    "display_name": "प्रदर्शन नाव",
-    "description": "वर्णन",
-    "no_description": "वर्णन नाही",
-    "website": "वेबसाइट",
-    "website_placeholder": "https://example.com",
-    "likes": "पसंती",
-    "seo_title": "{handle} - npmx",
-    "seo_description": "{handle} द्वारे npmx प्रोफाइल",
-    "not_found": "प्रोफाइल सापडले नाही",
-    "not_found_message": "{handle} साठीचे प्रोफाइल सापडले नाही.",
-    "invite": {
-      "message": "ते अजून npmx वापरत आहेत असे दिसत नाही. त्यांना याबद्दल सांगायचे का?",
-      "share_button": "Bluesky वर शेअर करा",
-      "compose_text": "अहो {'@'}{handle}! तुम्ही अजून npmx.dev पाहिले आहे का? हा npm नोंदणीसाठी जलद, आधुनिक आणि मुक्त-स्रोत ब्राउझर आहे.\nhttps://npmx.dev"
-    }
+    "invite": {}
   },
   "package": {
     "not_found": "पॅकेज सापडले नाही",
@@ -815,12 +785,10 @@
   "code": {
     "files_label": "फायली",
     "no_files": "कोणत्याही फाइल्स उपलब्ध नाहीत",
-    "root": "मूळ",
     "lines": "{count} ओळी",
     "toggle_tree": "फाइल ट्री टॉगल करा",
     "close_tree": "फाइल ट्री बंद करा",
     "copy_link": "लिंक कॉपी करा",
-    "raw": "कच्चा",
     "view_raw": "कच्ची फाइल पहा",
     "file_too_large": "पूर्वावलोकनासाठी फाइल खूप मोठी आहे",
     "file_size_warning": "{size} हे सिंटॅक्स हायलाइटिंगसाठीच्या 500KB मर्यादेपेक्षा जास्त आहे",
diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
index cb919c567b..221ad00dd5 100644
--- a/i18n/locales/nb-NO.json
+++ b/i18n/locales/nb-NO.json
@@ -822,12 +822,10 @@
   "code": {
     "files_label": "Filer",
     "no_files": "Ingen filer i denne mappen",
-    "root": "rot",
     "lines": "{count} linje | {count} linjer",
     "toggle_tree": "Veksle filtre",
     "close_tree": "Lukk filtre",
     "copy_link": "Kopier lenke",
-    "raw": "Rå",
     "view_raw": "Vis råfil",
     "file_too_large": "Filen er for stor til å forhåndsvises",
     "file_size_warning": "{size} overstiger grensen på 500KB for syntaksmarkering",
diff --git a/i18n/locales/ne-NP.json b/i18n/locales/ne-NP.json
index 58b5a3ffe9..0d16b488c4 100644
--- a/i18n/locales/ne-NP.json
+++ b/i18n/locales/ne-NP.json
@@ -531,12 +531,10 @@
   "code": {
     "files_label": "फाइलहरू",
     "no_files": "यो डाइरेक्टरीमा कुनै फाइल छैन",
-    "root": "root",
     "lines": "{count} लाइन",
     "toggle_tree": "फाइल ट्री टगल",
     "close_tree": "फाइल ट्री बन्द",
     "copy_link": "लिङ्क कपी",
-    "raw": "Raw",
     "view_raw": "raw फाइल हेर्नुहोस्",
     "file_too_large": "प्रिभ्यू गर्न फाइल धेरै ठूलो छ",
     "file_size_warning": "syntax highlighting का लागि 500KB सीमा भन्दा {size} ठूलो छ",
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index 15d071ae0a..c2b59412df 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -769,12 +769,10 @@
   "code": {
     "files_label": "Pliki",
     "no_files": "Brak plików w tym katalogu",
-    "root": "root",
     "lines": "{count} wierszy",
     "toggle_tree": "Przełącz drzewo plików",
     "close_tree": "Zamknij drzewo plików",
     "copy_link": "Kopiuj link",
-    "raw": "Surowe",
     "view_raw": "Zobacz surowy plik",
     "file_too_large": "Plik jest zbyt duży, aby wyświetlić podgląd",
     "file_size_warning": "{size} przekracza limit 500KB dla podświetlania składni",
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index f0fef7d598..962638896c 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -780,12 +780,10 @@
   "code": {
     "files_label": "Arquivos",
     "no_files": "Nenhum arquivo neste diretório",
-    "root": "raiz",
     "lines": "{count} linhas",
     "toggle_tree": "Alternar árvore de arquivos",
     "close_tree": "Fechar árvore de arquivos",
     "copy_link": "Copiar link",
-    "raw": "Bruto",
     "view_raw": "Ver arquivo bruto",
     "file_too_large": "Arquivo muito grande para visualizar",
     "file_size_warning": "{size} excede o limite de 500KB para destaque de sintaxe",
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index a52805c443..a906b02bd3 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -825,12 +825,10 @@
   "code": {
     "files_label": "Файлы",
     "no_files": "В этой директории нет файлов",
-    "root": "корневая директория",
     "lines": "{count} строк",
     "toggle_tree": "Переключить дерево файлов",
     "close_tree": "Закрыть дерево файлов",
     "copy_link": "Скопировать ссылку",
-    "raw": "Raw",
     "view_raw": "Посмотреть исходный файл",
     "file_too_large": "Файл слишком большой для предпросмотра",
     "file_size_warning": "{size} превышает лимит в 500 КБ для подсветки синтаксиса",
diff --git a/i18n/locales/ta-IN.json b/i18n/locales/ta-IN.json
index 0f566ebfef..96a41eb17d 100644
--- a/i18n/locales/ta-IN.json
+++ b/i18n/locales/ta-IN.json
@@ -626,12 +626,10 @@
   "code": {
     "files_label": "கோப்புகள்",
     "no_files": "இந்த கோப்பகத்தில் கோப்புகள் இல்லை",
-    "root": "மூலம்",
     "lines": "{count} வரி | {count} வரிகள்",
     "toggle_tree": "கோப்பு மரத்தை நிலைமாற்று",
     "close_tree": "கோப்பு மரத்தை மூடு",
     "copy_link": "இணைப்பை நகலெடு",
-    "raw": "மூலம்",
     "view_raw": "மூல கோப்பைக் காண்க",
     "file_too_large": "முன்னோட்டமிட கோப்பு மிகப்பெரியது",
     "file_size_warning": "{size} தொடரியல் சிறப்பித்தலுக்கான 500KB வரம்பை மீறுகிறது",
diff --git a/i18n/locales/te-IN.json b/i18n/locales/te-IN.json
index 18dd0d5646..ab580f63b4 100644
--- a/i18n/locales/te-IN.json
+++ b/i18n/locales/te-IN.json
@@ -546,12 +546,10 @@
   "code": {
     "files_label": "ఫైల్‌లు",
     "no_files": "ఈ డైరెక్టరీలో ఫైల్‌లు లేవు",
-    "root": "రూట్",
     "lines": "{count} పంక్తులు",
     "toggle_tree": "ఫైల్ ట్రీని టాగుల్ చేయండి",
     "close_tree": "ఫైల్ ట్రీని మూసివేయండి",
     "copy_link": "లింక్‌ను కాపీ చేయండి",
-    "raw": "రా",
     "view_raw": "రా ఫైల్‌ను వీక్షించండి",
     "file_too_large": "ఫైల్ ప్రివ్యూ కోసం చాలా పెద్దది",
     "file_size_warning": "{size} సింటాక్స్ హైలైటింగ్ కోసం 500KB పరిమితి కంటే ఎక్కువ",
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index 47ac20eb2b..8d686950a3 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -755,12 +755,10 @@
   "code": {
     "files_label": "Dosyalar",
     "no_files": "Bu klasörde dosya yok",
-    "root": "kök",
     "lines": "{count} satır",
     "toggle_tree": "Dosya ağacını değiştir",
     "close_tree": "Dosya ağacını kapat",
     "copy_link": "Bağlantıyı kopyala",
-    "raw": "Ham",
     "view_raw": "Ham dosyayı göster",
     "file_too_large": "Dosya önizleme için çok büyük",
     "file_size_warning": "{size} sözdizimi vurgulama için 500KB limitini aşıyor",
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index eb7037f0d0..b9a8ab6b19 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -822,12 +822,10 @@
   "code": {
     "files_label": "Файли",
     "no_files": "Немає файлів у цій папці",
-    "root": "корінь",
     "lines": "{count} рядків",
     "toggle_tree": "Переключити дерево файлів",
     "close_tree": "Закрити дерево файлів",
     "copy_link": "Копіювати посилання",
-    "raw": "Необроблено",
     "view_raw": "Переглянути необроблений файл",
     "file_too_large": "Файл занадто великий для попереду",
     "file_size_warning": "{size} перевищує ліміт 500KB для виділення синтаксису",
diff --git a/i18n/locales/vi-VN.json b/i18n/locales/vi-VN.json
index 362f1831f7..80e6477da8 100644
--- a/i18n/locales/vi-VN.json
+++ b/i18n/locales/vi-VN.json
@@ -822,12 +822,10 @@
   "code": {
     "files_label": "Tệp",
     "no_files": "Không có tệp nào trong thư mục này",
-    "root": "gốc",
     "lines": "{count} dòng | {count} dòng",
     "toggle_tree": "Bật/tắt cây thư mục",
     "close_tree": "Đóng cây thư mục",
     "copy_link": "Sao chép liên kết",
-    "raw": "Thô",
     "view_raw": "Xem tệp thô",
     "file_too_large": "Tệp quá lớn để xem trước",
     "file_size_warning": "{size} vượt quá giới hạn 500KB để tô màu cú pháp (syntax highlight)",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 865e40a93f..49b5457f27 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -783,12 +783,10 @@
   "code": {
     "files_label": "文件",
     "no_files": "这个目录中没有文件",
-    "root": "根目录",
     "lines": "{count} 行",
     "toggle_tree": "切换文件树",
     "close_tree": "关闭文件树",
     "copy_link": "复制链接",
-    "raw": "原始文件",
     "view_raw": "查看原始文件",
     "file_too_large": "文件过大，无法预览",
     "file_size_warning": "{size} 超出了 500KB 的语法高亮限制",
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index d7e467d582..352d6e0b71 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -783,12 +783,10 @@
   "code": {
     "files_label": "檔案",
     "no_files": "此目錄中沒有檔案",
-    "root": "根目錄",
     "lines": "{count} 行",
     "toggle_tree": "切換檔案樹",
     "close_tree": "關閉檔案樹",
     "copy_link": "複製連結",
-    "raw": "原始",
     "view_raw": "檢視原始檔",
     "file_too_large": "檔案太大無法預覽",
     "file_size_warning": "{size} 超過 500KB 的語法高亮限制",
diff --git a/i18n/schema.json b/i18n/schema.json
index 01c96fd953..35f289f1fb 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -2479,9 +2479,6 @@
         "no_files": {
           "type": "string"
         },
-        "root": {
-          "type": "string"
-        },
         "lines": {
           "type": "string"
         },
@@ -2491,15 +2488,24 @@
         "close_tree": {
           "type": "string"
         },
-        "copy_link": {
+        "copy_content": {
           "type": "string"
         },
-        "raw": {
+        "copy_link": {
           "type": "string"
         },
         "view_raw": {
           "type": "string"
         },
+        "toggle_container": {
+          "type": "string"
+        },
+        "open_raw_file": {
+          "type": "string"
+        },
+        "open_path_dropdown": {
+          "type": "string"
+        },
         "file_too_large": {
           "type": "string"
         },
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 05eff409b0..46bba7bba1 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -146,7 +146,9 @@ import {
   CallToAction,
   CodeDirectoryListing,
   CodeFileTree,
+  CodeHeader,
   CodeMobileTreeDrawer,
+  CodeSkeletonLoader,
   CodeViewer,
   CopyToClipboardButton,
   CollapsibleSection,
@@ -1255,6 +1257,44 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('CodeHeader', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(CodeHeader, {
+        props: {
+          filePath: 'misc/true.js',
+          loading: false,
+          isViewingFile: true,
+          isBinaryFile: false,
+          fileContent: {
+            package: 'vite',
+            version: '1.0.0',
+            path: 'misc/true.js',
+            language: 'javascript',
+            contentType: 'application/javascript',
+            content: 'const x = 1;',
+            html: '<pre><code><span class="line">const x = 1;</span></code></pre>',
+            lines: 1,
+          },
+          markdownViewMode: 'preview',
+          selectedLines: null,
+          getCodeUrlWithPath: (path = '') => `/package-code/vite/v/1.0.0/${path}`,
+          packageName: 'vite',
+          version: '1.0.0',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CodeSkeletonLoader', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(CodeSkeletonLoader)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('CodeViewer', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(CodeViewer, {
diff --git a/uno.config.ts b/uno.config.ts
index fae3f45785..76bb1269af 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -140,6 +140,7 @@ export default defineConfig({
     // Layout
     ['container', 'max-w-6xl mx-auto px-4 sm:px-6'],
     ['container-sm', 'max-w-5xl mx-auto px-4 sm:px-6'],
+    ['flex-split', 'flex items-center justify-between'],
 
     // Focus states - subtle but accessible
     ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/50 ring-offset-2)'],

From d3f60cbe92793e86e7e0d1b479005743f4ad8921 Mon Sep 17 00:00:00 2001
From: Alex Savelyev <91429106+alexdln@users.noreply.github.com>
Date: Thu, 2 Apr 2026 09:07:47 +0100
Subject: [PATCH 7/9] chore: restore color modes (#2361)

---
 app/assets/main.css    | 191 ++++++++++++++++++++---------------------
 app/pages/index.vue    |  10 ---
 app/pages/settings.vue |   6 +-
 vercel.json            |   4 -
 4 files changed, 95 insertions(+), 116 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 1d279645bb..23d41a7c98 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -5,84 +5,83 @@
   box-sizing: border-box;
 }
 
-/* :root:not([data-theme='light']), */
-/* :root[data-theme='dark'] { */
-/* background colors */
-/* --bg: var(--bg-color, oklch(0.171 0 0)); */
-/* --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0)); */
-/* --bg-muted: var(--bg-muted-color, oklch(0.236 0 0)); */
-/* --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0)); */
-
-/* text colors */
-/* --fg: oklch(0.982 0 0); */
-/* --fg-muted: oklch(0.749 0 0); */
-/* --fg-subtle: oklch(0.673 0 0); */
-
-/* border, separator colors */
-/* --border: oklch(0.269 0 0); */
-/* --border-subtle: oklch(0.239 0 0); */
-/* --border-hover: oklch(0.371 0 0); */
-
-/* accent color, set by user from settings */
-/* --accent: var(--accent-color, oklch(0.787 0.128 230.318)); */
-/* --accent-muted: var(--accent-color, oklch(0.922 0 0)); */
-
-/* accent colors */
-/* --swatch-sky: oklch(0.787 0.128 230.318); */
-/* --swatch-coral: oklch(0.704 0.177 14.75); */
-/* --swatch-amber: oklch(0.828 0.165 84.429); */
-/* --swatch-emerald: oklch(0.792 0.153 166.95); */
-/* --swatch-violet: oklch(0.78 0.148 286.067); */
-/* --swatch-magenta: oklch(0.78 0.15 330); */
-/* --swatch-neutral: oklch(1 0 0); */
-
-/* syntax highlighting colors */
-/* --syntax-fn: oklch(0.727 0.137 299.149); */
-/* --syntax-str: oklch(0.829 0.088 252.458); */
-/* --syntax-kw: oklch(0.721 0.162 15.494); */
-/* --syntax-comment: oklch(0.551 0.019 250.976); */
-
-/* badge colors for background & text */
-/* --badge-orange: oklch(0.67 0.185 55); */
-/* --badge-yellow: oklch(0.588 0.183 91); */
-/* --badge-green: oklch(0.566 0.202 165); */
-/* --badge-cyan: oklch(0.571 0.181 210); */
-/* --badge-blue: oklch(0.579 0.191 252); */
-/* --badge-indigo: oklch(0.573 0.262 276.966); */
-/* --badge-purple: oklch(0.495 0.172 295); */
-/* --badge-pink: oklch(0.584 0.189 343); */
-/* } */
-
-/* :root[data-theme='dark'][data-bg-theme='slate'] { */
-/* --bg: oklch(0.151 0.018 264.695); */
-/* --bg-subtle: oklch(0.179 0.015 262.421); */
-/* --bg-muted: oklch(0.214 0.018 261.234); */
-/* --bg-elevated: oklch(0.259 0.021 260.031); */
-/* } */
-
-/* :root[data-theme='dark'][data-bg-theme='zinc'] { */
-/* --bg: oklch(0.158 0.005 285.823); */
-/* --bg-subtle: oklch(0.188 0.005 285.894); */
-/* --bg-muted: oklch(0.219 0.005 285.929); */
-/* --bg-elevated: oklch(0.256 0.006 286.033); */
-/* } */
-
-/* :root[data-theme='dark'][data-bg-theme='stone'] { */
-/* --bg: oklch(0.164 0.004 89.25); */
-/* --bg-subtle: oklch(0.198 0.008 89.321); */
-/* --bg-muted: oklch(0.228 0.015 89.386); */
-/* --bg-elevated: oklch(0.252 0.018 84.298); */
-/* } */
-
-/* :root[data-theme='dark'][data-bg-theme='black'] { */
-/* --bg: oklch(0 0 0); */
-/* --bg-subtle: oklch(0.148 0 0); */
-/* --bg-muted: oklch(0.204 0 0); */
-/* --bg-elevated: oklch(0.264 0 0); */
-/* } */
-
-/* :root[data-theme='light'] { */
-:root {
+:root:not([data-theme='light']),
+:root[data-theme='dark'] {
+  /* background colors */
+  --bg: var(--bg-color, oklch(0.171 0 0));
+  --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0));
+  --bg-muted: var(--bg-muted-color, oklch(0.236 0 0));
+  --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0));
+
+  /* text colors */
+  --fg: oklch(0.982 0 0);
+  --fg-muted: oklch(0.749 0 0);
+  --fg-subtle: oklch(0.673 0 0);
+
+  /* border, separator colors */
+  --border: oklch(0.269 0 0);
+  --border-subtle: oklch(0.239 0 0);
+  --border-hover: oklch(0.371 0 0);
+
+  /* accent color, set by user from settings */
+  --accent: var(--accent-color, oklch(0.787 0.128 230.318));
+  --accent-muted: var(--accent-color, oklch(0.922 0 0));
+
+  /* accent colors */
+  --swatch-sky: oklch(0.787 0.128 230.318);
+  --swatch-coral: oklch(0.704 0.177 14.75);
+  --swatch-amber: oklch(0.828 0.165 84.429);
+  --swatch-emerald: oklch(0.792 0.153 166.95);
+  --swatch-violet: oklch(0.78 0.148 286.067);
+  --swatch-magenta: oklch(0.78 0.15 330);
+  --swatch-neutral: oklch(1 0 0);
+
+  /* syntax highlighting colors */
+  --syntax-fn: oklch(0.727 0.137 299.149);
+  --syntax-str: oklch(0.829 0.088 252.458);
+  --syntax-kw: oklch(0.721 0.162 15.494);
+  --syntax-comment: oklch(0.551 0.019 250.976);
+
+  /* badge colors for background & text */
+  --badge-orange: oklch(0.67 0.185 55);
+  --badge-yellow: oklch(0.588 0.183 91);
+  --badge-green: oklch(0.566 0.202 165);
+  --badge-cyan: oklch(0.571 0.181 210);
+  --badge-blue: oklch(0.579 0.191 252);
+  --badge-indigo: oklch(0.573 0.262 276.966);
+  --badge-purple: oklch(0.495 0.172 295);
+  --badge-pink: oklch(0.584 0.189 343);
+}
+
+:root[data-theme='dark'][data-bg-theme='slate'] {
+  --bg: oklch(0.151 0.018 264.695);
+  --bg-subtle: oklch(0.179 0.015 262.421);
+  --bg-muted: oklch(0.214 0.018 261.234);
+  --bg-elevated: oklch(0.259 0.021 260.031);
+}
+
+:root[data-theme='dark'][data-bg-theme='zinc'] {
+  --bg: oklch(0.158 0.005 285.823);
+  --bg-subtle: oklch(0.188 0.005 285.894);
+  --bg-muted: oklch(0.219 0.005 285.929);
+  --bg-elevated: oklch(0.256 0.006 286.033);
+}
+
+:root[data-theme='dark'][data-bg-theme='stone'] {
+  --bg: oklch(0.164 0.004 89.25);
+  --bg-subtle: oklch(0.198 0.008 89.321);
+  --bg-muted: oklch(0.228 0.015 89.386);
+  --bg-elevated: oklch(0.252 0.018 84.298);
+}
+
+:root[data-theme='dark'][data-bg-theme='black'] {
+  --bg: oklch(0 0 0);
+  --bg-subtle: oklch(0.148 0 0);
+  --bg-muted: oklch(0.204 0 0);
+  --bg-elevated: oklch(0.264 0 0);
+}
+
+:root[data-theme='light'] {
   --bg: var(--bg-color, oklch(1 0 0));
   --bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
   --bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
@@ -123,50 +122,44 @@
   --badge-cyan: oklch(0.571 0.181 210);
 }
 
-/* :root[data-theme='light'][data-bg-theme='slate'] { */
-:root[data-bg-theme='slate'] {
+:root[data-theme='light'][data-bg-theme='slate'] {
   --bg: oklch(1 0 0);
   --bg-subtle: oklch(0.982 0.008 269.62);
   --bg-muted: oklch(0.96 0.008 261.234);
   --bg-elevated: oklch(0.943 0.012 255.52);
 }
 
-/* :root[data-theme='light'][data-bg-theme='zinc'] { */
-:root[data-bg-theme='zinc'] {
+:root[data-theme='light'][data-bg-theme='zinc'] {
   --bg: oklch(1 0 0);
   --bg-subtle: oklch(0.979 0.004 286.53);
   --bg-muted: oklch(0.958 0.004 286.39);
   --bg-elevated: oklch(0.939 0.004 286.32);
 }
 
-/* :root[data-theme='light'][data-bg-theme='stone'] { */
-:root[data-bg-theme='stone'] {
+:root[data-theme='light'][data-bg-theme='stone'] {
   --bg: oklch(1 0 0);
   --bg-subtle: oklch(0.979 0.004 88.762);
   --bg-muted: oklch(0.958 0.005 88.743);
   --bg-elevated: oklch(0.943 0.005 88.731);
 }
 
-/* :root[data-theme='light'][data-bg-theme='black'] { */
-:root[data-bg-theme='black'] {
+:root[data-theme='light'][data-bg-theme='black'] {
   --bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0));
 }
 
 @media (prefers-contrast: more) {
-  /* :root[data-theme='dark'] { */
-  /* text colors */
-  /* --fg: oklch(1 0 0); */
-  /* --fg-muted: oklch(0.769 0 0); */
-  /* --fg-subtle: oklch(0.693 0 0); */
-
-  /* border, separator colors */
-  /* --border: oklch(0.769 0 0); */
-  /* --border-subtle: oklch(0.739 0 0); */
-  /* --border-hover: oklch(0.771 0 0); */
-  /* } */
+  :root[data-theme='dark'] {
+    /* text colors */
+    --fg: oklch(1 0 0);
+    --fg-muted: oklch(0.769 0 0);
+    --fg-subtle: oklch(0.693 0 0);
+    /* border, separator colors */
+    --border: oklch(0.769 0 0);
+    --border-subtle: oklch(0.739 0 0);
+    --border-hover: oklch(0.771 0 0);
+  }
 
-  /* :root[data-theme='light'] { */
-  :root {
+  :root[data-theme='light'] {
     /* text colors */
     --fg: oklch(0 0 0);
     --fg-muted: oklch(0.329 0 0);
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 2f094d3a1a..48c5575b00 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -92,16 +92,6 @@ defineOgImageComponent('Default', {
         </search>
 
         <BuildEnvironment class="mt-4" />
-        <p class="max-w-3xl mx-auto text-center">
-          <b>Update:</b>
-          We’ve completed our user experience research and carefully reviewed the results. To
-          deliver the best possible experience, we’ve decided to <b>remove the dark theme</b>. We’re
-          committed to making decisions based on what works best for our users and are glad we took
-          the time to validate this through
-          <a href="/theme-research" target="_blank" rel="noopener noreferrer" class="underline"
-            >user research</a
-          >. Thank you for participating 🤍
-        </p>
       </header>
 
       <nav
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 6181fd58a5..e90faf551f 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -2,7 +2,7 @@
 const router = useRouter()
 const { settings } = useSettings()
 const { locale: currentLocale, locales, setLocale: setNuxti18nLocale } = useI18n()
-// const colorMode = useColorMode()
+const colorMode = useColorMode()
 const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
 
@@ -66,7 +66,7 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
           </h2>
           <div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-6">
             <!-- Theme selector -->
-            <!-- <div class="space-y-2">
+            <div class="space-y-2">
               <label for="theme-select" class="block text-sm text-fg font-medium">
                 {{ $t('settings.theme') }}
               </label>
@@ -82,7 +82,7 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
                   { label: $t('settings.theme_dark'), value: 'dark' },
                 ]"
               />
-            </div> -->
+            </div>
 
             <!-- Accent colors -->
             <div class="space-y-3">
diff --git a/vercel.json b/vercel.json
index dad531ee02..351f0d4bf9 100644
--- a/vercel.json
+++ b/vercel.json
@@ -2,10 +2,6 @@
   "$schema": "https://openapi.vercel.sh/vercel.json",
   "trailingSlash": false,
   "redirects": [
-    {
-      "source": "/theme-research",
-      "destination": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-    },
     {
       "source": "/(.*)",
       "has": [

From 4991268b68568a307cb609df8c1cdcd1ca0ce701 Mon Sep 17 00:00:00 2001
From: Julien Dargelos <juliendargelos@users.noreply.github.com>
Date: Fri, 3 Apr 2026 11:44:48 +0200
Subject: [PATCH 8/9] feat(i18n): add missing french translation (fr-FR)
 (#2368)

---
 i18n/locales/fr-FR.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 91666df4fa..cd8c0e9605 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -1485,5 +1485,6 @@
       "message": "Pour un usage commercial, veuillez nous contacter.",
       "discord_link_text": "Discussion Discord"
     }
-  }
+  },
+  "alt_logo_kawaii": "Une version mignonne, arrondie et colorée du logo npmx."
 }

From 1d1f450641bf779991e20bb17f26afb1d5ff4612 Mon Sep 17 00:00:00 2001
From: Alex Savelyev <91429106+alexdln@users.noreply.github.com>
Date: Fri, 3 Apr 2026 12:14:18 +0100
Subject: [PATCH 9/9] fix: correct code colors (#2362)

---
 app/assets/main.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 23d41a7c98..8897b7da18 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -153,6 +153,7 @@
     --fg: oklch(1 0 0);
     --fg-muted: oklch(0.769 0 0);
     --fg-subtle: oklch(0.693 0 0);
+
     /* border, separator colors */
     --border: oklch(0.769 0 0);
     --border-subtle: oklch(0.739 0 0);
@@ -274,8 +275,7 @@ dd {
 }
 
 /* Shiki theme colors */
-/* html.light .shiki { */
-html .shiki {
+html.light .shiki {
   color: var(--shiki-light) !important;
   background-color: var(--shiki-light-bg) !important;