Merge branch 'main' into sb-translation-status-page

Author: cylewaitforit

.env.example

@@ -1,5 +1,5 @@
-#secure password, can use openssl rand -hex 32
+# secure password, can use `openssl rand -hex 32`
 NUXT_SESSION_PASSWORD=""
 
-#HMAC secret for image-proxy and OG image URL signing, can use openssl rand -hex 32
-NUXT_IMAGE_PROXY_SECRET=""
+# HMAC secret for image-proxy and OG image URL signing, can use `openssl rand -hex 32`
+NUXT_IMAGE_PROXY_SECRET=""

.github/workflows/ci.yml

@@ -114,6 +114,9 @@ jobs:
     steps:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
+      - name: 👑 Fix Git ownership
+        run: git config --global --add safe.directory /__w/npmx.dev/npmx.dev
+
       - uses: voidzero-dev/setup-vp@8ecb39174989ce55af90f45cf55b02738599831d # v1
         with:
           node-version: lts/*

.github/workflows/dependency-diff.yml

@@ -35,7 +35,8 @@ jobs:
         with:
           mode: artifact
           detect-replacements: 'true'
-          duplicate-threshold: '4'
+          # Too noisy. Disabling until this can report on duplicate CHANGES in this PR.
+          duplicate-threshold: '999'
           dependency-threshold: '15'
           size-threshold: '200000'
 

.github/workflows/stale.yml

@@ -0,0 +1,41 @@
+name: Stale Issues and PRs
+
+on:
+  schedule:
+    # Run daily at 2 AM UTC
+    - cron: '0 2 * * *'
+  workflow_dispatch: # Allow manual trigger
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  stale-bugs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f
+        with:
+          days-before-issue-stale: 30
+          days-before-issue-close: 7
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          remove-stale-when-updated: true
+          only-issue-types: 'bug'
+          stale-issue-label: 'stale'
+          close-issue-label: 'stale'
+          operations-per-run: 500
+
+  stale-prs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f
+        with:
+          days-before-issue-stale: -1
+          days-before-issue-close: -1
+          days-before-pr-stale: 30
+          days-before-pr-close: 7
+          remove-stale-when-updated: true
+          stale-pr-label: 'stale'
+          close-pr-label: 'stale'
+          operations-per-run: 500

.nuxtrc

@@ -1 +1 @@
-setups.@nuxt/test-utils="4.0.0"
+setups.@nuxt/test-utils="4.0.2"

.storybook/main.ts

@@ -5,8 +5,7 @@ import { resolve } from 'node:path'
 const config = {
   stories: [
     // List welcome first in sidebar
-    '../.storybook/docs/welcome.mdx',
-    '../.storybook/docs/*.mdx',
+    '../app/storybook/welcome.mdx',
     '../app/**/*.@(mdx|stories.@(js|ts))',
   ],
   addons: [

CONTRIBUTING.md

@@ -348,7 +348,7 @@ Ideally, extract utilities into separate files so they can be unit tested. 🙏
 
 ### Internal linking
 
-Always use **object syntax with named routes** for internal navigation. This makes links resilient to URL structure changes and provides type safety via `unplugin-vue-router`.
+Always use **object syntax with named routes** for internal navigation. This makes links resilient to URL structure changes and provides type safety with the [typedPages Nuxt option](https://nuxt.com/docs/4.x/guide/going-further/experimental-features#typedpages).
 
 ```vue
 <!-- Good: named route -->

app/components/Brand/Customize.vue

@@ -75,8 +75,7 @@ async function downloadCustomPng() {
   if (!svg) return
   pngLoading.value = true
 
-  const blob = new Blob([svg], { type: 'image/svg+xml' })
-  const url = URL.createObjectURL(blob)
+  const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
 
   try {
     await document.fonts.ready
@@ -108,7 +107,6 @@ async function downloadCustomPng() {
       }, 'image/png')
     })
   } finally {
-    URL.revokeObjectURL(url)
     pngLoading.value = false
   }
 }
@@ -145,24 +143,30 @@ async function downloadCustomPng() {
           <span class="text-sm font-mono text-fg-muted shrink-0">{{
             $t('brand.customize.accent_label')
           }}</span>
-          <div class="flex items-center gap-1.5" role="radiogroup">
-            <ButtonBase
+          <div class="flex items-center gap-1.5">
+            <label
               v-for="color in pickerColors"
               :key="color.id"
-              role="radio"
-              :aria-checked="activeAccentId === color.id"
-              :aria-label="color.label"
-              class="!w-6 !h-6 !rounded-full !border-2 !p-0 !min-w-0 transition-all duration-150 motion-reduce:transition-none"
+              class="relative w-6 h-6 rounded-full border-2 cursor-pointer duration-150 motion-reduce:transition-none focus-within:ring-2 focus-within:ring-fg focus-within:ring-offset-2 focus-within:ring-offset-bg"
               :class="
                 activeAccentId === color.id
-                  ? '!border-fg scale-110'
+                  ? 'border-fg scale-110'
                   : color.id === 'neutral'
-                    ? '!border-border hover:!border-border-hover'
-                    : '!border-transparent hover:!border-border-hover'
+                    ? 'border-border hover:border-border-hover'
+                    : 'border-transparent hover:border-border-hover'
               "
               :style="{ backgroundColor: color.value }"
-              @click="customAccent = color.id"
-            />
+            >
+              <input
+                type="radio"
+                name="brand-customize-accent"
+                :value="color.id"
+                :checked="activeAccentId === color.id"
+                :aria-label="color.label"
+                class="sr-only"
+                @change="customAccent = color.id"
+              />
+            </label>
           </div>
         </fieldset>
 
@@ -172,40 +176,33 @@ async function downloadCustomPng() {
             <span class="text-sm font-mono text-fg-muted">{{
               $t('brand.customize.bg_label')
             }}</span>
-            <div
-              class="flex items-center border border-border rounded-md overflow-hidden"
-              role="radiogroup"
-            >
-              <ButtonBase
-                size="md"
-                role="radio"
-                :aria-checked="customBgDark"
-                :aria-label="$t('brand.logos.on_dark')"
-                class="!border-none !rounded-none motion-reduce:transition-none"
-                :class="
-                  customBgDark
-                    ? 'bg-bg-muted text-fg'
-                    : 'bg-transparent text-fg-muted hover:text-fg'
-                "
-                @click="customBgDark = true"
+            <div class="flex items-center border border-border rounded-md overflow-hidden">
+              <label
+                class="px-3 py-1.5 text-sm font-mono cursor-pointer motion-reduce:transition-none focus-within:bg-fg/10"
+                :class="customBgDark ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
               >
+                <input
+                  v-model="customBgDark"
+                  type="radio"
+                  name="brand-customize-bg"
+                  :value="true"
+                  class="sr-only"
+                />
                 {{ $t('brand.logos.on_dark') }}
-              </ButtonBase>
-              <ButtonBase
-                size="md"
-                role="radio"
-                :aria-checked="!customBgDark"
-                :aria-label="$t('brand.logos.on_light')"
-                class="!border-none !rounded-none border-is border-is-border motion-reduce:transition-none"
-                :class="
-                  !customBgDark
-                    ? 'bg-bg-muted text-fg'
-                    : 'bg-transparent text-fg-muted hover:text-fg'
-                "
-                @click="customBgDark = false"
+              </label>
+              <label
+                class="px-3 py-1.5 text-sm font-mono cursor-pointer border-is border-is-border motion-reduce:transition-none focus-within:bg-fg/10"
+                :class="!customBgDark ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
               >
+                <input
+                  v-model="customBgDark"
+                  type="radio"
+                  name="brand-customize-bg"
+                  :value="false"
+                  class="sr-only"
+                />
                 {{ $t('brand.logos.on_light') }}
-              </ButtonBase>
+              </label>
             </div>
           </div>
 

app/components/Chart/SplitSparkline.vue

@@ -31,9 +31,7 @@ const props = defineProps<{
 
 const { locale } = useI18n()
 const colorMode = useColorMode()
-const numberFormatter = useNumberFormatter({
-  maximumFractionDigits: 0,
-})
+const numberFormatter = useNumberFormatter()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 const palette = getPalette('')

app/components/Package/TrendsChart.vue

@@ -1540,7 +1540,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
           const rows = items
             .map((d: Record<string, any>) => {
               const label = String(d?.name ?? '').trim()
-              const raw = Math.round(Number(d?.value ?? 0))
+              const raw = Number(d?.value ?? 0)
               const v = compactNumberFormatter.value.format(Number.isFinite(raw) ? raw : 0)
 
               if (!hasMultipleItems) {