Merge origin/main into dwells-feat-docs-wasm-attempt

Author: danielroe

CONTRIBUTING.md

@@ -214,7 +214,7 @@ npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization.
 
 ### Approach
 
-- All user-facing strings should use translation keys via `$t()` in templates or `t()` in script
+- All user-facing strings should use translation keys via `$t()` in templates and script
 - Translation files live in `i18n/locales/` (e.g., `en.json`)
 - We use the `no_prefix` strategy (no `/en/` or `/fr/` in URLs)
 - Locale preference is stored in cookies and respected on subsequent visits
@@ -233,8 +233,9 @@ npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization.
    Or in script:
 
    ```typescript
-   const { t } = useI18n()
-   const message = t('my.translation.key')
+   <script setup lang="ts">
+   const message = computed(() => $t('my.translation.key'))
+   </script>
    ```
 
 3. For dynamic values, use interpolation:

app/app.vue

@@ -4,6 +4,9 @@ import { useEventListener } from '@vueuse/core'
 const route = useRoute()
 const router = useRouter()
 
+// Initialize accent color before hydration to prevent flash
+initAccentOnPrehydrate()
+
 const isHomepage = computed(() => route.path === '/')
 
 useHead({

app/components/AccentColorPicker.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useAccentColor } from '~/composables/useSettings'
+
+const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
+</script>
+
+<template>
+  <div role="listbox" aria-label="Accent colors" class="flex items-center justify-between">
+    <button
+      v-for="color in accentColors"
+      :key="color.id"
+      type="button"
+      role="option"
+      :aria-selected="selectedAccentColor === color.id"
+      :aria-label="color.name"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring aria-selected:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
+      :style="{ backgroundColor: color.value }"
+      @click="setAccentColor(color.id)"
+    />
+    <button
+      type="button"
+      aria-label="Clear accent color"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring flex items-center justify-center bg-accent-fallback"
+      @click="setAccentColor(null)"
+    >
+      <span class="i-carbon-error size-4 text-bg" aria-hidden="true" />
+    </button>
+  </div>
+</template>

app/components/AppFooter.vue

@@ -137,7 +137,12 @@ onMounted(() => {
     z-index: 40;
     /* Hidden by default (translated off-screen) */
     transform: translateY(100%);
-    transition: transform 0.3s ease-out;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .footer-scroll-state {
+      transition: transform 0.3s ease-out;
+    }
   }
 
   /* Show footer when user can scroll up (meaning they've scrolled down) */

app/components/AppHeader.vue

@@ -27,7 +27,7 @@ const { isConnected, npmUser } = useConnector()
           :aria-label="$t('header.home')"
           class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
         >
-          <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
+          <span class="text-accent"><span class="-tracking-0.2em">.</span>/</span>npmx
         </NuxtLink>
         <!-- Spacer when logo is hidden -->
         <span v-else class="w-1" />

app/components/ClaimPackageModal.vue

@@ -8,8 +8,6 @@ const props = defineProps<{
 
 const open = defineModel<boolean>('open', { default: false })
 
-const { t } = useI18n()
-
 const {
   isConnected,
   state,
@@ -34,7 +32,7 @@ async function checkAvailability() {
   try {
     checkResult.value = await checkPackageName(props.packageName)
   } catch (err) {
-    publishError.value = err instanceof Error ? err.message : t('claim.modal.failed_to_check')
+    publishError.value = err instanceof Error ? err.message : $t('claim.modal.failed_to_check')
   } finally {
     isChecking.value = false
   }
@@ -84,7 +82,7 @@ async function handleClaim() {
       connectorModalOpen.value = true
     }
   } catch (err) {
-    publishError.value = err instanceof Error ? err.message : t('claim.modal.failed_to_claim')
+    publishError.value = err instanceof Error ? err.message : $t('claim.modal.failed_to_claim')
   } finally {
     isPublishing.value = false
   }
@@ -171,7 +169,7 @@ const connectorModalOpen = shallowRef(false)
 
             <!-- Loading state -->
             <div v-if="isChecking" class="py-8 text-center">
-              <LoadingSpinner :text="t('claim.modal.checking')" />
+              <LoadingSpinner :text="$t('claim.modal.checking')" />
             </div>
 
             <!-- Success state -->

app/components/ConnectorStatus.client.vue

@@ -12,12 +12,10 @@ const {
 const showModal = shallowRef(false)
 const showTooltip = shallowRef(false)
 
-const { t } = useI18n()
-
 const tooltipText = computed(() => {
-  if (isConnecting.value) return t('connector.status.connecting')
-  if (isConnected.value) return t('connector.status.connected')
-  return t('connector.status.connect_cli')
+  if (isConnecting.value) return $t('connector.status.connecting')
+  if (isConnected.value) return $t('connector.status.connected')
+  return $t('connector.status.connect_cli')
 })
 
 const statusColor = computed(() => {
@@ -31,9 +29,9 @@ const operationCount = computed(() => activeOperations.value.length)
 
 const ariaLabel = computed(() => {
   if (error.value) return error.value
-  if (isConnecting.value) return t('connector.status.aria_connecting')
-  if (isConnected.value) return t('connector.status.aria_connected')
-  return t('connector.status.aria_click_to_connect')
+  if (isConnecting.value) return $t('connector.status.aria_connecting')
+  if (isConnected.value) return $t('connector.status.aria_connected')
+  return $t('connector.status.aria_click_to_connect')
 })
 </script>
 
@@ -62,7 +60,7 @@ const ariaLabel = computed(() => {
       <img
         v-if="isConnected && avatar"
         :src="avatar"
-        :alt="t('connector.status.avatar_alt', { user: npmUser })"
+        :alt="$t('connector.status.avatar_alt', { user: npmUser })"
         width="24"
         height="24"
         class="w-6 h-6 rounded-full"

app/components/HeaderOrgsDropdown.vue

@@ -3,7 +3,6 @@ const props = defineProps<{
   username: string
 }>()
 
-const { t } = useI18n()
 const { listUserOrgs } = useConnector()
 
 const isOpen = ref(false)
@@ -23,11 +22,11 @@ async function loadOrgs() {
       // Already sorted alphabetically by server, take top 10
       orgs.value = orgList.slice(0, 10)
     } else {
-      error.value = t('header.orgs_dropdown.error')
+      error.value = $t('header.orgs_dropdown.error')
     }
     hasLoaded.value = true
   } catch {
-    error.value = t('header.orgs_dropdown.error')
+    error.value = $t('header.orgs_dropdown.error')
   } finally {
     isLoading.value = false
   }
@@ -62,7 +61,7 @@ function handleKeydown(event: KeyboardEvent) {
       :to="`/~${username}/orgs`"
       class="link-subtle font-mono text-sm inline-flex items-center gap-1"
     >
-      {{ t('header.orgs') }}
+      {{ $t('header.orgs') }}
       <span
         class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
@@ -80,16 +79,16 @@ function handleKeydown(event: KeyboardEvent) {
         <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
           <div class="px-3 py-2 border-b border-border">
             <span class="font-mono text-xs text-fg-subtle">{{
-              t('header.orgs_dropdown.title')
+              $t('header.orgs_dropdown.title')
             }}</span>
           </div>
 
           <div v-if="isLoading" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.orgs_dropdown.loading') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.orgs_dropdown.loading') }}</span>
           </div>
 
           <div v-else-if="error" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.orgs_dropdown.error') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.orgs_dropdown.error') }}</span>
           </div>
 
           <ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
@@ -104,15 +103,15 @@ function handleKeydown(event: KeyboardEvent) {
           </ul>
 
           <div v-else class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.orgs_dropdown.empty') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.orgs_dropdown.empty') }}</span>
           </div>
 
           <div class="px-3 py-2 border-t border-border">
             <NuxtLink
               :to="`/~${username}/orgs`"
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
-              {{ t('header.orgs_dropdown.view_all') }}
+              {{ $t('header.orgs_dropdown.view_all') }}
               <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>

app/components/HeaderPackagesDropdown.vue

@@ -3,7 +3,6 @@ const props = defineProps<{
   username: string
 }>()
 
-const { t } = useI18n()
 const { listUserPackages } = useConnector()
 
 const isOpen = ref(false)
@@ -23,11 +22,11 @@ async function loadPackages() {
       // Sort alphabetically and take top 10
       packages.value = Object.keys(pkgMap).sort().slice(0, 10)
     } else {
-      error.value = t('header.packages_dropdown.error')
+      error.value = $t('header.packages_dropdown.error')
     }
     hasLoaded.value = true
   } catch {
-    error.value = t('header.packages_dropdown.error')
+    error.value = $t('header.packages_dropdown.error')
   } finally {
     isLoading.value = false
   }
@@ -62,7 +61,7 @@ function handleKeydown(event: KeyboardEvent) {
       :to="`/~${username}`"
       class="link-subtle font-mono text-sm inline-flex items-center gap-1"
     >
-      {{ t('header.packages') }}
+      {{ $t('header.packages') }}
       <span
         class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
@@ -80,16 +79,16 @@ function handleKeydown(event: KeyboardEvent) {
         <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
           <div class="px-3 py-2 border-b border-border">
             <span class="font-mono text-xs text-fg-subtle">{{
-              t('header.packages_dropdown.title')
+              $t('header.packages_dropdown.title')
             }}</span>
           </div>
 
           <div v-if="isLoading" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.packages_dropdown.loading') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.packages_dropdown.loading') }}</span>
           </div>
 
           <div v-else-if="error" class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.packages_dropdown.error') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.packages_dropdown.error') }}</span>
           </div>
 
           <ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
@@ -104,15 +103,15 @@ function handleKeydown(event: KeyboardEvent) {
           </ul>
 
           <div v-else class="px-3 py-4 text-center">
-            <span class="text-fg-muted text-sm">{{ t('header.packages_dropdown.empty') }}</span>
+            <span class="text-fg-muted text-sm">{{ $t('header.packages_dropdown.empty') }}</span>
           </div>
 
           <div class="px-3 py-2 border-t border-border">
             <NuxtLink
               :to="`/~${username}`"
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
-              {{ t('header.packages_dropdown.view_all') }}
+              {{ $t('header.packages_dropdown.view_all') }}
               <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>

app/components/LoadingSpinner.vue

@@ -3,13 +3,13 @@ defineProps<{
   /** Text to display next to the spinner */
   text?: string
 }>()
-
-const { t } = useI18n()
 </script>
 
 <template>
   <div aria-busy="true" class="flex items-center gap-3 text-fg-muted font-mono text-sm py-8">
-    <span class="w-4 h-4 border-2 border-fg-subtle border-t-fg rounded-full animate-spin" />
-    {{ text ?? t('common.loading') }}
+    <span
+      class="w-4 h-4 border-2 border-fg-subtle border-t-fg rounded-full motion-safe:animate-spin"
+    />
+    {{ text ?? $t('common.loading') }}
   </div>
 </template>