Merge branch 'main' into feat/resolve-40

Author: eryue0220

.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: [

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/Readme.vue

@@ -487,6 +487,20 @@ function handleClick(event: MouseEvent) {
   summary {
     font-size: 1rem;
     color: var(--fg-muted);
+
+    /* Markdown often wraps headings/paragraphs inside <summary>, which
+       forces them onto new lines. Inline them so the disclosure marker
+       sits next to the label while preserving heading styles. */
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6,
+    > p {
+      display: inline;
+      margin: 0;
+    }
   }
 }
 </style>

app/pages/about.stories.ts

@@ -1,7 +1,7 @@
 import About from './about.vue'
 import type { Meta, StoryObj } from '@storybook-vue/nuxt'
 import { pageDecorator } from '../../.storybook/decorators'
-import { contributorsHandler } from '../../.storybook/handlers'
+import { contributorsHandler } from '../storybook/mocks/handlers'
 
 const meta = {
   component: About,

app/pages/brand.vue

@@ -57,15 +57,16 @@ function handleSvgDownload(src: string) {
   }
 }
 
-async function handlePngDownload(logo: (typeof logos)[number]) {
-  if (pngLoading.value.has(logo.src)) return
-  pngLoading.value.add(logo.src)
+async function handlePngDownload(logo: (typeof logos)[number], variant: 'dark' | 'light' = 'dark') {
+  const src = variant === 'light' ? (logo.srcLight ?? logo.src) : logo.src
+  if (pngLoading.value.has(src)) return
+  pngLoading.value.add(src)
   try {
-    const blob = await svgToPng(logo.src, logo.width, logo.height)
-    const filename = logo.src.replace(/^\//, '').replace('.svg', '.png')
+    const blob = await svgToPng(src, logo.width, logo.height)
+    const filename = src.replace(/^\//, '').replace('.svg', '.png')
     downloadFile(blob, filename)
   } finally {
-    pngLoading.value.delete(logo.src)
+    pngLoading.value.delete(src)
   }
 }
 </script>
@@ -224,14 +225,14 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
                             name: `${logo.name()} (${$t('brand.logos.on_light')})`,
                           })
                         "
-                        :disabled="pngLoading.has(logo.src)"
-                        @click="handlePngDownload(logo)"
+                        :disabled="pngLoading.has(logo.srcLight ?? logo.src)"
+                        @click="handlePngDownload(logo, 'light')"
                       >
                         <span
                           class="size-[1em]"
                           aria-hidden="true"
                           :class="
-                            pngLoading.has(logo.src)
+                            pngLoading.has(logo.srcLight ?? logo.src)
                               ? 'i-lucide:loader-circle animate-spin'
                               : 'i-lucide:download'
                           "
@@ -246,10 +247,8 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
           </div>
         </section>
 
-        <!-- Customize Section (client-only: needs DOM for accent colors + canvas export) -->
-        <ClientOnly>
-          <BrandCustomize />
-        </ClientOnly>
+        <!-- Customize Section -->
+        <BrandCustomize />
 
         <!-- Typography Section -->
         <section aria-labelledby="brand-typography-heading">

app/pages/pds.stories.ts

@@ -1,7 +1,7 @@
 import Pds from './pds.vue'
 import type { Meta, StoryObj } from '@storybook-vue/nuxt'
 import { pageDecorator } from '../../.storybook/decorators'
-import { pdsUsersHandler } from '../../.storybook/handlers'
+import { pdsUsersHandler } from '../storybook/mocks/handlers'
 
 const meta = {
   component: Pds,

app/pages/recharging.stories.ts

@@ -1,7 +1,7 @@
 import Recharging from './recharging.vue'
 import type { Meta, StoryObj } from '@storybook-vue/nuxt'
 import { pageDecorator } from '../../.storybook/decorators'
-import { repoStatsHandler } from '../../.storybook/handlers'
+import { repoStatsHandler } from '../storybook/mocks/handlers'
 
 const meta = {
   component: Recharging,

app/pages/settings.stories.ts

@@ -2,7 +2,7 @@ import Settings from './settings.vue'
 import type { Meta, StoryObj } from '@storybook-vue/nuxt'
 import { userEvent, expect } from 'storybook/test'
 import { pageDecorator } from '../../.storybook/decorators'
-import { i18nStatusHandler } from '../../.storybook/handlers'
+import { i18nStatusHandler } from '../storybook/mocks/handlers/lunaria-status'
 
 const meta = {
   component: Settings,

app/pages/translation-status.stories.ts

@@ -0,0 +1,30 @@
+import TranslationStatus from './translation-status.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import { pageDecorator } from '../../.storybook/decorators'
+import { i18nStatusHandler } from '../storybook/mocks/handlers/lunaria-status'
+
+const meta = {
+  component: TranslationStatus,
+  parameters: {
+    layout: 'fullscreen',
+    msw: {
+      handlers: [i18nStatusHandler],
+    },
+  },
+  decorators: [pageDecorator],
+} satisfies Meta<typeof TranslationStatus>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** `/lunaria/status.json` is intercepted by MSW. Showing a variety of completion level translation statuses for a subset of locales. */
+export const Default: Story = {}
+
+/** No API response — the fetch never succeeds so `fetchStatus` stays as `'pending'`. Shows skeleton blocks in the locale list and skeleton inlines in body text. */
+export const WithoutTranslationData: Story = {
+  parameters: {
+    msw: {
+      handlers: [],
+    },
+  },
+}

app/pages/translation-status.vue

@@ -17,7 +17,6 @@ defineOgImage(
   { alt: () => `${$t('translation_status.title')} — npmx` },
 )
 
-const nuxt = useNuxtApp()
 const router = useRouter()
 const canGoBack = useCanGoBack()
 const { fetchStatus, status } = useI18nStatus()
@@ -28,14 +27,7 @@ const isLoading = computed<boolean>(
   () => fetchStatus.value === 'idle' || fetchStatus.value === 'pending',
 )
 
-const generatedAt = computed(() => {
-  const gat = status.value?.generatedAt
-  if (import.meta.client) {
-    return (nuxt.isHydrated ? new Date().toISOString() : gat) ?? new Date().toISOString()
-  }
-
-  return gat ?? new Date().toISOString()
-})
+const generatedAt = computed(() => status.value?.generatedAt)
 
 const localeEntries = computed<I18nLocaleStatus[]>(() => status.value?.locales || [])
 
@@ -68,16 +60,16 @@ ${template}`
             <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
           </button>
         </div>
-        <i18n-t
-          keypath="translation_status.generated_at"
-          tag="p"
-          scope="global"
-          class="text-fg-muted text-lg"
-        >
-          <template #date>
-            <NuxtTime :locale :datetime="generatedAt" date-style="long" time-style="medium" />
+        <p class="text-fg-muted text-lg">
+          <template v-if="isLoading || !generatedAt">
+            <SkeletonInline class="h-6 w-96" />
           </template>
-        </i18n-t>
+          <i18n-t v-else keypath="translation_status.generated_at" tag="span" scope="global">
+            <template #date>
+              <NuxtTime :locale :datetime="generatedAt" date-style="long" time-style="medium" />
+            </template>
+          </i18n-t>
+        </p>
       </header>
 
       <p class="text-fg-muted leading-relaxed mb-4">