From 45e8b970073b0cbbebfb65609b17e540c4e24962 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Thu, 23 Apr 2026 12:19:43 +0530
Subject: [PATCH 01/28] feat: add Keytrace profile composable and API
 integration

Co-authored-by: Copilot <copilot@github.com>
---
 app/components/AccountItem.vue           | 368 +++++++++++++++++++++++
 app/components/Compare/FacetSelector.vue |  32 +-
 app/components/LinkedAccounts.vue        |  51 ++++
 app/components/ProfileHeader.vue         |  71 +++++
 app/composables/useKeytraceProfile.ts    |  54 ++++
 app/pages/profile/[identity]/index.vue   |  41 ++-
 i18n/locales/ar-EG.json                  |   5 +-
 i18n/locales/ar.json                     |   5 +-
 i18n/locales/az-AZ.json                  |   5 +-
 i18n/locales/bg-BG.json                  |   5 +-
 i18n/locales/bn-IN.json                  |   5 +-
 i18n/locales/cs-CZ.json                  |   5 +-
 i18n/locales/de-AT.json                  |   5 +
 i18n/locales/de-DE.json                  |   7 +-
 i18n/locales/de.json                     |   5 +-
 i18n/locales/en-GB.json                  |   5 +
 i18n/locales/en.json                     |   3 +
 i18n/locales/es-419.json                 |   5 +-
 i18n/locales/es.json                     |   5 +-
 i18n/locales/fr-FR.json                  |   5 +-
 i18n/locales/hi-IN.json                  |   5 +-
 i18n/locales/hu-HU.json                  |   5 +-
 i18n/locales/id-ID.json                  |   5 +-
 i18n/locales/it-IT.json                  |   5 +-
 i18n/locales/ja-JP.json                  |   5 +-
 i18n/locales/kn-IN.json                  |   5 +-
 i18n/locales/mr-IN.json                  |   5 +-
 i18n/locales/nb-NO.json                  |   5 +-
 i18n/locales/ne-NP.json                  |   5 +-
 i18n/locales/nl.json                     |   5 +-
 i18n/locales/pl-PL.json                  |   5 +-
 i18n/locales/pt-BR.json                  |   5 +-
 i18n/locales/ru-RU.json                  |   5 +-
 i18n/locales/sr-Latn-RS.json             |   5 +-
 i18n/locales/ta-IN.json                  |   5 +-
 i18n/locales/te-IN.json                  |   5 +-
 i18n/locales/tr-TR.json                  |   5 +-
 i18n/locales/uk-UA.json                  |   5 +-
 i18n/locales/vi-VN.json                  |   5 +-
 i18n/locales/zh-CN.json                  |   5 +-
 i18n/locales/zh-TW.json                  |   5 +-
 i18n/schema.json                         |   9 +
 server/api/keytrace/[domain].ts          | 125 ++++++++
 server/api/keytrace/reverify.post.ts     |  30 ++
 shared/types/keytrace.ts                 |  50 +++
 45 files changed, 948 insertions(+), 58 deletions(-)
 create mode 100644 app/components/AccountItem.vue
 create mode 100644 app/components/LinkedAccounts.vue
 create mode 100644 app/components/ProfileHeader.vue
 create mode 100644 app/composables/useKeytraceProfile.ts
 create mode 100644 server/api/keytrace/[domain].ts
 create mode 100644 server/api/keytrace/reverify.post.ts
 create mode 100644 shared/types/keytrace.ts

diff --git a/app/components/AccountItem.vue b/app/components/AccountItem.vue
new file mode 100644
index 0000000000..25ac23b149
--- /dev/null
+++ b/app/components/AccountItem.vue
@@ -0,0 +1,368 @@
+<script setup lang="ts">
+import type {
+  KeytraceAccount,
+  KeytraceReverifyRequest,
+  KeytraceReverifyResponse,
+  KeytraceVerificationStatus,
+} from '#shared/types/keytrace'
+
+const props = defineProps<{
+  account: KeytraceAccount
+}>()
+
+const platformLabelMap: Record<string, string> = {
+  github: 'GitHub',
+  npm: 'npm',
+  mastodon: 'Mastodon',
+  discord: 'Discord',
+  orcid: 'ORCID',
+}
+
+const platformIconMap: Record<string, string> = {
+  github: 'i-simple-icons:github',
+  npm: 'i-simple-icons:npm',
+  mastodon: 'i-simple-icons:mastodon',
+  discord: 'i-simple-icons:discord',
+  orcid: 'i-simple-icons:orcid',
+}
+
+const proofMethodLabelMap: Record<KeytraceAccount['proofMethod'], string> = {
+  dns: 'DNS',
+  github: 'GitHub',
+  npm: 'npm',
+  mastodon: 'Mastodon',
+  pgp: 'PGP',
+  other: 'other',
+}
+
+const statusLabelMap: Record<KeytraceAccount['status'], string> = {
+  verified: 'Verified',
+  unverified: 'Unverified',
+  stale: 'Stale',
+  failed: 'Failed',
+}
+
+const statusClassMap: Record<KeytraceAccount['status'], string> = {
+  verified: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30',
+  unverified: 'bg-yellow-500/15 text-yellow-300 border-yellow-500/30',
+  stale: 'bg-orange-500/15 text-orange-300 border-orange-500/30',
+  failed: 'bg-red-500/15 text-red-300 border-red-500/30',
+}
+
+const platformLabel = computed(() => {
+  const normalizedPlatform = props.account.platform.toLowerCase()
+  return platformLabelMap[normalizedPlatform] ?? props.account.platform
+})
+
+const platformIconClass = computed(() => {
+  const normalizedPlatform = props.account.platform.toLowerCase()
+  return platformIconMap[normalizedPlatform] ?? 'i-lucide:user-round'
+})
+
+const accountDisplayName = computed(() => props.account.displayName || props.account.username)
+const accountAvatar = computed(() => props.account.avatar)
+
+const localStatus = ref<KeytraceVerificationStatus>(props.account.status)
+const localLastCheckedAt = ref(props.account.lastCheckedAt)
+const localFailureReason = ref(props.account.failureReason)
+const isReverifying = ref(false)
+const reverifyError = ref<string | null>(null)
+const panelVisible = ref(false)
+const currentVerificationStep = ref(-1)
+const reverifyTimeoutId = ref<ReturnType<typeof setTimeout> | null>(null)
+
+const verificationSteps = [
+  'Matching service provider',
+  'Fetching proof',
+  'Checking for DID',
+  'Server verification',
+]
+
+function getErrorMessage(error: unknown): string {
+  if (typeof error === 'string') {
+    return error
+  }
+
+  if (error && typeof error === 'object') {
+    const maybeError = error as {
+      message?: unknown
+      statusMessage?: unknown
+      data?: { message?: unknown }
+    }
+
+    if (typeof maybeError.data?.message === 'string' && maybeError.data.message.trim()) {
+      return maybeError.data.message
+    }
+
+    if (typeof maybeError.statusMessage === 'string' && maybeError.statusMessage.trim()) {
+      return maybeError.statusMessage
+    }
+
+    if (typeof maybeError.message === 'string' && maybeError.message.trim()) {
+      return maybeError.message
+    }
+  }
+
+  return 'Unknown error'
+}
+
+watch(
+  () => props.account,
+  account => {
+    localStatus.value = account.status
+    localLastCheckedAt.value = account.lastCheckedAt
+    localFailureReason.value = account.failureReason
+  },
+  { immediate: true },
+)
+
+const statusLabel = computed(() => statusLabelMap[localStatus.value])
+const statusClasses = computed(() => statusClassMap[localStatus.value])
+const proofMethodLabel = computed(() => proofMethodLabelMap[props.account.proofMethod])
+
+const shouldShowFailureReason = computed(
+  () =>
+    !!localFailureReason.value &&
+    (localStatus.value === 'failed' ||
+      localStatus.value === 'stale' ||
+      localStatus.value === 'unverified'),
+)
+
+function closeReverifyPanel() {
+  panelVisible.value = false
+}
+
+function cancelReverifyTimeout() {
+  if (reverifyTimeoutId.value) {
+    clearTimeout(reverifyTimeoutId.value)
+    reverifyTimeoutId.value = null
+  }
+}
+
+onUnmounted(() => {
+  cancelReverifyTimeout()
+})
+
+async function reverifyAccount() {
+  cancelReverifyTimeout()
+  isReverifying.value = true
+  reverifyError.value = null
+  panelVisible.value = true
+  currentVerificationStep.value = -1
+
+  const runStep = async (stepIndex: number) => {
+    currentVerificationStep.value = stepIndex
+    await new Promise(resolve => setTimeout(resolve, 220))
+  }
+
+  try {
+    const body: KeytraceReverifyRequest = {
+      platform: props.account.platform,
+      username: props.account.username,
+      url: props.account.url,
+    }
+
+    const responsePromise = $fetch<KeytraceReverifyResponse>('/api/keytrace/reverify', {
+      method: 'POST',
+      body,
+    })
+
+    await runStep(0)
+    await runStep(1)
+    await runStep(2)
+    await runStep(3)
+
+    const response = await responsePromise
+
+    localStatus.value = response.status
+    localLastCheckedAt.value = response.lastCheckedAt
+    localFailureReason.value = response.failureReason
+    currentVerificationStep.value = verificationSteps.length
+  } catch (error) {
+    // oxlint-disable-next-line no-console -- log reverify failures for observability
+    console.error('[keytrace] reverify failed', error)
+    const errorMessage = getErrorMessage(error)
+    localFailureReason.value = errorMessage
+    reverifyError.value = `Re-verification failed: ${errorMessage}`
+  } finally {
+    isReverifying.value = false
+
+    const closeDelay = reverifyError.value ? 3000 : 1000
+    reverifyTimeoutId.value = setTimeout(() => {
+      closeReverifyPanel()
+      reverifyTimeoutId.value = null
+    }, closeDelay)
+  }
+}
+function getStepState(stepIndex: number): 'done' | 'active' | 'idle' {
+  if (currentVerificationStep.value > stepIndex) {
+    return 'done'
+  }
+
+  if (
+    currentVerificationStep.value === stepIndex &&
+    (isReverifying.value || !!reverifyError.value)
+  ) {
+    return 'active'
+  }
+
+  if (currentVerificationStep.value >= verificationSteps.length) {
+    return 'done'
+  }
+
+  return 'idle'
+}
+
+function formatDate(value: string): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return 'Unknown date'
+  }
+
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    timeZone: 'UTC',
+  }).format(date)
+}
+</script>
+
+<template>
+  <li class="rounded-md border border-border bg-bg-subtle px-3 py-3 sm:px-4">
+    <div class="flex items-start justify-between gap-3">
+      <div class="min-w-0">
+        <div class="flex items-center gap-3 min-w-0">
+          <LinkBase
+            v-if="account.url"
+            :to="account.url"
+            noUnderline
+            class="inline-flex items-center gap-3 min-w-0 hover:text-accent"
+          >
+            <div
+              class="size-10 rounded-full border border-border overflow-hidden bg-bg-muted shrink-0 flex items-center justify-center"
+            >
+              <img
+                v-if="accountAvatar"
+                :src="accountAvatar"
+                :alt="accountDisplayName"
+                class="w-full h-full object-cover"
+              />
+              <span v-else :class="platformIconClass" class="size-4" aria-hidden="true" />
+            </div>
+            <p class="font-mono text-base sm:text-lg font-medium min-w-0 break-words">
+              {{ accountDisplayName }}
+            </p>
+          </LinkBase>
+
+          <div v-else class="inline-flex items-center gap-3 min-w-0">
+            <div
+              class="size-10 rounded-full border border-border overflow-hidden bg-bg-muted shrink-0 flex items-center justify-center"
+            >
+              <img
+                v-if="accountAvatar"
+                :src="accountAvatar"
+                :alt="accountDisplayName"
+                class="w-full h-full object-cover"
+              />
+              <span v-else :class="platformIconClass" class="size-4" aria-hidden="true" />
+            </div>
+            <p class="font-mono text-base sm:text-lg font-medium min-w-0 break-words">
+              {{ accountDisplayName }}
+            </p>
+          </div>
+
+          <span
+            class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-mono"
+            :class="statusClasses"
+          >
+            {{ statusLabel }}
+          </span>
+        </div>
+
+        <p class="mt-2 text-sm text-fg-muted min-w-0 break-words">
+          via {{ proofMethodLabel }}
+          <span aria-hidden="true" class="mx-1">&middot;</span>
+          Added {{ formatDate(account.addedAt) }}
+          <span aria-hidden="true" class="mx-1">&middot;</span>
+          Last checked {{ formatDate(localLastCheckedAt) }}
+        </p>
+
+        <p v-if="shouldShowFailureReason" class="mt-2 text-sm text-fg-muted min-w-0 break-words">
+          {{ localFailureReason }}
+        </p>
+      </div>
+
+      <div class="flex flex-col items-end gap-2 shrink-0">
+        <div class="flex items-center gap-2">
+          <TooltipBase
+            :is-visible="panelVisible || isReverifying"
+            position="bottom"
+            :offset="8"
+            interactive
+            :tooltip-attr="{ 'role': 'dialog', 'aria-label': 'Re-verify claim' }"
+          >
+            <ButtonBase
+              size="sm"
+              :disabled="isReverifying"
+              :classicon="isReverifying ? 'i-lucide:loader-circle' : 'i-lucide:refresh-cw'"
+              @click="reverifyAccount"
+            >
+              {{ isReverifying ? 'Checking...' : 'Re-verify' }}
+            </ButtonBase>
+
+            <template #content>
+              <div class="w-72 max-w-full p-2 sm:p-3">
+                <p class="font-mono text-sm font-medium">Re-verify Claim</p>
+                <p class="text-sm text-fg-subtle mt-1">{{ platformLabel }}</p>
+
+                <ul class="mt-3 space-y-2">
+                  <li
+                    v-for="(stepLabel, stepIndex) in verificationSteps"
+                    :key="stepLabel"
+                    class="flex items-center gap-2 text-sm"
+                    :class="{
+                      'text-fg': getStepState(stepIndex) === 'done',
+                      'text-fg-subtle': getStepState(stepIndex) === 'idle',
+                    }"
+                  >
+                    <span
+                      class="size-4 inline-flex items-center justify-center rounded-full border"
+                      :class="{
+                        'border-emerald-400/60 text-emerald-300':
+                          getStepState(stepIndex) === 'done',
+                        'border-accent/70 text-accent': getStepState(stepIndex) === 'active',
+                        'border-border text-fg-subtle': getStepState(stepIndex) === 'idle',
+                      }"
+                    >
+                      <span
+                        v-if="getStepState(stepIndex) === 'done'"
+                        class="i-lucide:check size-3"
+                        aria-hidden="true"
+                      />
+                      <span
+                        v-else-if="getStepState(stepIndex) === 'active'"
+                        class="i-lucide:loader-circle size-3 animate-spin"
+                        aria-hidden="true"
+                      />
+                      <span v-else class="size-2 rounded-full bg-current/70" aria-hidden="true" />
+                    </span>
+                    <span>{{ stepLabel }}</span>
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </TooltipBase>
+        </div>
+
+        <p
+          v-if="reverifyError"
+          class="text-sm text-red-300 min-w-0 break-words text-end"
+          role="alert"
+        >
+          {{ reverifyError }}
+        </p>
+      </div>
+    </div>
+  </li>
+</template>
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index 7ce289779c..a66d6116e0 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -101,30 +101,30 @@ function deselectAllFacet(category: string) {
         :aria-labelledby="`facet-category-label-${category}`"
         data-facet-category-facets
       >
-        <ButtonBase
+        <label
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
-          size="sm"
-          role="checkbox"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
-          :disabled="facet.comingSoon"
-          :aria-checked="isFacetSelected(facet.id)"
-          :aria-label="facet.label"
-          class="gap-1 px-1.5 rounded transition-colors text-fg-subtle bg-bg-subtle border-border-subtle enabled:hover:(text-fg-muted border-border) aria-checked:(text-fg-muted bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50)) focus-visible:outline-accent/70 disabled:(text-fg-subtle/50 bg-bg-subtle border-border-subtle)"
-          @click="!facet.comingSoon && toggleFacet(facet.id)"
-          :classicon="
-            facet.comingSoon
-              ? undefined
-              : isFacetSelected(facet.id)
-                ? 'i-lucide:check'
-                : 'i-lucide:plus'
-          "
+          class="inline-flex items-center gap-1 px-1.5 rounded border transition-colors text-fg-subtle bg-bg-subtle border-border-subtle hover:(text-fg-muted border-border) has-[:checked]:(text-fg-muted bg-fg/10 border-fg/20 hover:(bg-fg/20 text-fg/50)) has-[:focus-visible]:(outline outline-accent/70)"
+          :class="facet.comingSoon ? 'cursor-not-allowed text-fg-subtle/50 bg-bg-subtle border-border-subtle hover:(text-fg-subtle/50 border-border-subtle)' : 'cursor-pointer'"
         >
+          <input
+            type="checkbox"
+            class="sr-only"
+            :checked="isFacetSelected(facet.id)"
+            :disabled="facet.comingSoon"
+            @change="toggleFacet(facet.id)"
+          />
+          <span
+            v-if="!facet.comingSoon"
+            aria-hidden="true"
+            :class="isFacetSelected(facet.id) ? 'i-lucide:check' : 'i-lucide:plus'"
+          />
           {{ facet.label }}
           <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
-        </ButtonBase>
+        </label>
       </div>
     </div>
   </div>
diff --git a/app/components/LinkedAccounts.vue b/app/components/LinkedAccounts.vue
new file mode 100644
index 0000000000..994be8d3d7
--- /dev/null
+++ b/app/components/LinkedAccounts.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { KeytraceAccount } from '#shared/types/keytrace'
+
+const statusLegend = [
+  { label: 'Verified', className: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30' },
+  { label: 'Unverified', className: 'bg-yellow-500/15 text-yellow-300 border-yellow-500/30' },
+  { label: 'Stale', className: 'bg-orange-500/15 text-orange-300 border-orange-500/30' },
+  { label: 'Failed', className: 'bg-red-500/15 text-red-300 border-red-500/30' },
+]
+
+const props = defineProps<{
+  accounts: KeytraceAccount[]
+  loading?: boolean
+}>()
+
+const verifiedCount = computed(
+  () => props.accounts.filter(account => account.status === 'verified').length,
+)
+</script>
+
+<template>
+  <section class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6">
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <h2 class="font-mono text-xl sm:text-2xl font-medium">Linked Accounts</h2>
+      <p class="text-sm text-fg-muted">{{ verifiedCount }}/{{ accounts.length }} verified</p>
+    </div>
+
+    <div class="mt-3 flex flex-wrap gap-2" aria-label="Verification status legend">
+      <span
+        v-for="item in statusLegend"
+        :key="item.label"
+        class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-mono"
+        :class="item.className"
+      >
+        {{ item.label }}
+      </span>
+    </div>
+
+    <div v-if="loading" class="mt-4 space-y-2">
+      <SkeletonBlock v-for="index in 3" :key="index" class="h-20 rounded-md" />
+    </div>
+
+    <p v-else-if="!accounts.length" class="mt-4 text-fg-muted">No linked accounts</p>
+
+    <ul v-else class="mt-4 space-y-2">
+      <li v-for="account in accounts" :key="`${account.platform}-${account.username}`">
+        <AccountItem :account="account" />
+      </li>
+    </ul>
+  </section>
+</template>
diff --git a/app/components/ProfileHeader.vue b/app/components/ProfileHeader.vue
new file mode 100644
index 0000000000..921de318ed
--- /dev/null
+++ b/app/components/ProfileHeader.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { KeytraceProfile } from '#shared/types/keytrace'
+
+const props = defineProps<{
+  profile?: KeytraceProfile
+  loading?: boolean
+}>()
+
+const showAvatar = ref(true)
+
+const initials = computed(() => {
+  const source = props.profile?.name?.trim()
+  if (!source) {
+    return '?'
+  }
+
+  return source
+    .split(' ')
+    .map(part => part[0] ?? '')
+    .join('')
+    .slice(0, 2)
+    .toUpperCase()
+})
+
+watch(
+  () => props.profile?.avatar,
+  () => {
+    showAvatar.value = true
+  },
+)
+
+function onAvatarError() {
+  // oxlint-disable-next-line no-console -- keep avatar load failures observable during development
+  console.warn('[keytrace] profile avatar failed to load')
+  showAvatar.value = false
+}
+</script>
+
+<template>
+  <section class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6">
+    <div v-if="loading" class="flex items-center gap-4">
+      <SkeletonBlock class="h-16 w-16 rounded-full" />
+      <div class="flex-1 space-y-2">
+        <SkeletonBlock class="h-6 w-40 rounded" />
+        <SkeletonBlock class="h-4 w-full rounded" />
+      </div>
+    </div>
+
+    <div v-else-if="profile" class="flex items-start gap-4">
+      <div
+        class="h-16 w-16 rounded-full bg-bg-muted border border-border overflow-hidden flex items-center justify-center shrink-0"
+      >
+        <img
+          v-if="profile.avatar && showAvatar"
+          :src="profile.avatar"
+          :alt="profile.name || 'Profile avatar'"
+          class="h-full w-full object-cover"
+          @error="onAvatarError"
+        />
+        <span v-else class="font-mono text-fg-subtle" aria-hidden="true">{{ initials }}</span>
+      </div>
+
+      <div class="min-w-0">
+        <h2 class="font-mono text-xl sm:text-2xl font-medium min-w-0 break-words">
+          {{ profile.name || 'Unknown Profile' }}
+        </h2>
+        <p class="mt-2 text-fg-muted min-w-0 break-words">{{ profile.description }}</p>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/composables/useKeytraceProfile.ts b/app/composables/useKeytraceProfile.ts
new file mode 100644
index 0000000000..58787a1dab
--- /dev/null
+++ b/app/composables/useKeytraceProfile.ts
@@ -0,0 +1,54 @@
+import type { KeytraceAccount, KeytraceResponse } from "#shared/types/keytrace";
+
+const statusPriority: Record<KeytraceAccount["status"], number> = {
+  verified: 0,
+  unverified: 1,
+  stale: 2,
+  failed: 3,
+};
+
+export function useKeytraceProfile(domain: MaybeRefOrGetter<string>) {
+  const asyncData = useFetch<KeytraceResponse>(
+    () => `/api/keytrace/${encodeURIComponent(toValue(domain))}`,
+    {
+      default: () => ({
+        profile: {
+          name: "",
+          avatar: "",
+          description: "",
+        },
+        accounts: [],
+      }),
+    },
+  );
+
+  const profile = computed(() => asyncData.data.value?.profile);
+  const accounts = computed(() => asyncData.data.value?.accounts ?? []);
+
+  const sortedAccounts = computed(() =>
+    [...accounts.value].sort((a, b) => {
+      const statusSort = statusPriority[a.status] - statusPriority[b.status];
+      if (statusSort !== 0) {
+        return statusSort;
+      }
+
+      return a.platform.localeCompare(b.platform);
+    }),
+  );
+
+  const verifiedAccounts = computed(() =>
+    sortedAccounts.value.filter((account) => account.status === "verified"),
+  );
+
+  const nonVerifiedAccounts = computed(() =>
+    sortedAccounts.value.filter((account) => account.status !== "verified"),
+  );
+
+  return {
+    profile,
+    accounts: sortedAccounts,
+    verifiedAccounts,
+    nonVerifiedAccounts,
+    loading: asyncData.pending,
+  };
+}
diff --git a/app/pages/profile/[identity]/index.vue b/app/pages/profile/[identity]/index.vue
index 61ca0f69eb..284a70e76a 100644
--- a/app/pages/profile/[identity]/index.vue
+++ b/app/pages/profile/[identity]/index.vue
@@ -2,6 +2,7 @@
 import { updateProfile as updateProfileUtil } from '~/utils/atproto/profile'
 import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
 import { getSafeHttpUrl } from '#shared/utils/url'
+import { useKeytraceProfile } from '~/composables/useKeytraceProfile'
 
 const route = useRoute('profile-identity')
 const identity = computed(() => route.params.identity)
@@ -97,6 +98,12 @@ const inviteUrl = computed(() => {
 })
 const safeProfileWebsiteUrl = computed(() => getSafeHttpUrl(profile.value.website))
 
+const {
+  profile: keytraceProfile,
+  accounts: keytraceAccounts,
+  loading: keytraceLoading,
+} = useKeytraceProfile(identity)
+
 useCommandPaletteContextCommands(
   computed((): CommandPaletteContextCommandInput[] => {
     const commands: CommandPaletteContextCommandInput[] = []
@@ -232,20 +239,34 @@ defineOgImage(
       </div>
     </header>
 
+    <section class="mb-8 space-y-4">
+      <ProfileHeader :profile="keytraceProfile" :loading="keytraceLoading" />
+      <LinkedAccounts :accounts="keytraceAccounts" :loading="keytraceLoading" />
+    </section>
+
     <section class="flex flex-col gap-8">
-      <h2
-        class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
-        :title="$t('profile.likes')"
-        dir="ltr"
-      >
-        {{ $t('profile.likes') }}
-        <span v-if="likes">({{ likes.records?.length ?? 0 }})</span>
-      </h2>
+      <div class="flex flex-col gap-2">
+        <h2
+          class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
+          :title="$t('profile.likes')"
+          dir="ltr"
+        >
+          {{ $t('profile.likes') }}
+          <span v-if="likes">({{ likes.records?.length ?? 0 }})</span>
+        </h2>
+        <p class="text-fg-muted text-sm">{{ $t('profile.public_interests_description') }}</p>
+      </div>
       <div v-if="status === 'pending'" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <SkeletonBlock v-for="i in 4" :key="i" class="h-16 rounded-lg" />
       </div>
-      <div v-else-if="status === 'error'">
-        <p>{{ $t('common.error') }}</p>
+      <div v-else-if="status === 'error'" class="p-4 bg-bg-subtle border border-border rounded-lg">
+        <p class="font-mono text-sm">{{ $t('profile.likes_error') }}</p>
+      </div>
+      <div
+        v-else-if="!likes?.records?.length"
+        class="p-4 bg-bg-subtle border border-border rounded-lg"
+      >
+        <p class="font-mono text-sm text-fg-muted">{{ $t('profile.likes_empty') }}</p>
       </div>
       <div v-else-if="likes?.records" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <PackageLikeCard v-for="like in likes.records" :packageUrl="like.value.subjectRef" />
diff --git a/i18n/locales/ar-EG.json b/i18n/locales/ar-EG.json
index 18682843b5..83ce5e2dcb 100644
--- a/i18n/locales/ar-EG.json
+++ b/i18n/locales/ar-EG.json
@@ -113,7 +113,10 @@
       "message": "انضم إليّ على npmx",
       "share_button": "دعوة صديق",
       "compose_text": "جرّب npmx، المتصفح السريع لحزم npm!"
-    }
+    },
+    "public_interests_description": "اهتمامات الحزم العامة وإشارات النشاط.",
+    "likes_error": "تعذّر تحميل الحزم المُعجَب بها.",
+    "likes_empty": "لا توجد حزم مُعجَب بها بعد."
   },
   "package": {
     "size_increase": {
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
index 179ed6251f..ad72cb012e 100644
--- a/i18n/locales/ar.json
+++ b/i18n/locales/ar.json
@@ -155,7 +155,10 @@
     }
   },
   "profile": {
-    "invite": {}
+    "invite": {},
+    "public_interests_description": "اهتمامات الحزم العامة وإشارات النشاط.",
+    "likes_error": "تعذر تحميل الحزم المفضلة.",
+    "likes_empty": "لا توجد حزم مفضلة بعد."
   },
   "package": {
     "not_found": "لم يتم العثور على الحزمة",
diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
index 93c9a8117a..d21379292f 100644
--- a/i18n/locales/az-AZ.json
+++ b/i18n/locales/az-AZ.json
@@ -214,7 +214,10 @@
       "message": "Deyəsən onlar hələ npmx istifadə etmirlər. Onlara bu barədə demək istəyirsiniz?",
       "share_button": "Bluesky-da paylaş",
       "compose_text": "Salam {'@'}{handle}! npmx.dev-i yoxlamısan? Bu, npm reyestri üçün sürətli, müasir və açıq mənbəli brauzerdir.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Açıq paket maraqları və fəaliyyət siqnalları.",
+    "likes_error": "Bəyənilən paketlər yüklənə bilmədi.",
+    "likes_empty": "Hələ bəyənilən paket yoxdur."
   },
   "package": {
     "not_found": "Paket Tapılmadı",
diff --git a/i18n/locales/bg-BG.json b/i18n/locales/bg-BG.json
index f937b02e1e..daa106948f 100644
--- a/i18n/locales/bg-BG.json
+++ b/i18n/locales/bg-BG.json
@@ -177,7 +177,10 @@
       "message": "Изглежда, че все още не използват npmx. Искате ли да им кажете за него?",
       "share_button": "Споделете в Bluesky",
       "compose_text": "Здравей {'@'}{handle}! Проверил ли си npmx.dev? Това е браузър за npm регистъра - бърз, модерен и с отворен код.\\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Публични интереси към пакети и сигнали за активност.",
+    "likes_error": "Неуспешно зареждане на харесани пакети.",
+    "likes_empty": "Все още няма харесани пакети."
   },
   "package": {
     "not_found": "Пакетът не е намерен",
diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
index 3712252621..883027ec71 100644
--- a/i18n/locales/bn-IN.json
+++ b/i18n/locales/bn-IN.json
@@ -121,7 +121,10 @@
     }
   },
   "profile": {
-    "invite": {}
+    "invite": {},
+    "public_interests_description": "পাবলিক প্যাকেজ আগ্রহ এবং কার্যকলাপ সংকেত।",
+    "likes_error": "পছন্দের প্যাকেজগুলি লোড করা যায়নি।",
+    "likes_empty": "এখনও কোনো পছন্দের প্যাকেজ নেই।"
   },
   "package": {
     "not_found": "প্যাকেজ পাওয়া যায়নি",
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index b5ffca3a02..84cbc676be 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -359,7 +359,10 @@
       "message": "Zdá se, že ještě nepoužívají npmx. Chcete jim o tom říct?",
       "share_button": "Sdílet na Bluesky",
       "compose_text": "Ahoj {'@'}{handle}! Viděl jsi už npmx.dev? Je to prohlížeč pro npm registr, který je rychlý, moderní a open-source.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Veřejné zájmy o balíčky a signály aktivity.",
+    "likes_error": "Nepodařilo se načíst oblíbené balíčky.",
+    "likes_empty": "Zatím žádné oblíbené balíčky."
   },
   "package": {
     "not_found": "Balíček nenalezen",
diff --git a/i18n/locales/de-AT.json b/i18n/locales/de-AT.json
index 458cf38f23..daeddeec95 100644
--- a/i18n/locales/de-AT.json
+++ b/i18n/locales/de-AT.json
@@ -21,5 +21,10 @@
     "instant_search_turn_on": "Schnellsuche aktivieren",
     "instant_search_turn_off": "Schnellsuche deaktivieren",
     "instant_search_advisory": "Die Schnellsuche sendet bei jedem Tastendruck eine Anfrage."
+  },
+  "profile": {
+    "public_interests_description": "Öffentliche Paketinteressen und Aktivitätssignale.",
+    "likes_error": "Beliebte Pakete konnten nicht geladen werden.",
+    "likes_empty": "Noch keine beliebten Pakete vorhanden."
   }
 }
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index 0618235d76..f439792e96 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -1,3 +1,8 @@
 {
-  "$schema": "../schema.json"
+  "$schema": "../schema.json",
+  "profile": {
+    "public_interests_description": "Öffentliche Paketinteressen und Aktivitätssignale.",
+    "likes_error": "Gelikte Pakete konnten nicht geladen werden.",
+    "likes_empty": "Noch keine gelikten Pakete."
+  }
 }
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index e805f32888..1a29179809 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -358,7 +358,10 @@
       "message": "Es sieht nicht so aus, als ob sie npmx schon benutzen. Möchtest du ihnen davon erzählen?",
       "share_button": "Auf Bluesky teilen",
       "compose_text": "Hey {'@'}{handle}! Hast du schon npmx.dev ausprobiert? Es ist ein Browser für die npm Registry, der schnell, modern und Open-Source ist.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Öffentliche Paketinteressen und Aktivitätssignale.",
+    "likes_error": "Gelikte Pakete konnten nicht geladen werden.",
+    "likes_empty": "Noch keine gelikten Pakete."
   },
   "package": {
     "not_found": "Paket nicht gefunden",
diff --git a/i18n/locales/en-GB.json b/i18n/locales/en-GB.json
index cd250a7f15..127ed8f8ef 100644
--- a/i18n/locales/en-GB.json
+++ b/i18n/locales/en-GB.json
@@ -45,5 +45,10 @@
       "error": "Failed to load organisations",
       "empty": "No organisations found"
     }
+  },
+  "profile": {
+    "public_interests_description": "Public package interests and activity signals.",
+    "likes_error": "Could not load liked packages.",
+    "likes_empty": "No liked packages yet."
   }
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 9c132582da..5e31a60a21 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -355,6 +355,9 @@
     "website": "Website",
     "website_placeholder": "https://example.com",
     "likes": "Likes",
+    "public_interests_description": "Public package interests and activity signals.",
+    "likes_error": "Could not load liked packages.",
+    "likes_empty": "No liked packages yet.",
     "seo_title": "{handle} - npmx",
     "seo_description": "npmx profile by {handle}",
     "not_found": "Profile Not Found",
diff --git a/i18n/locales/es-419.json b/i18n/locales/es-419.json
index aff49a7df8..ad0eae137c 100644
--- a/i18n/locales/es-419.json
+++ b/i18n/locales/es-419.json
@@ -43,7 +43,10 @@
     "invite": {
       "message": "Parece que aún no usa npmx. ¿Quieres contarle?",
       "compose_text": "¡Hola {'@'}{handle}! ¿Has probado ya npmx.dev? Es un navegador para el registro de npm rápido, moderno y de código abierto.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Intereses de paquetes públicos y señales de actividad.",
+    "likes_error": "No se pudieron cargar los paquetes favoritos.",
+    "likes_empty": "Aún no hay paquetes favoritos."
   },
   "package": {
     "readme": {
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 9bcb7263fc..a723b3e57c 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -244,7 +244,10 @@
       "message": "Parece que aún no usa npmx. ¿Quieres contárselo?",
       "share_button": "Compartir en Bluesky",
       "compose_text": "¡Hola {'@'}{handle}! ¿Has probado ya npmx.dev? Es un navegador para el registro de npm rápido, moderno y de código abierto.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Intereses públicos en paquetes y señales de actividad.",
+    "likes_error": "No se pudieron cargar los paquetes que te gustan.",
+    "likes_empty": "Aún no hay paquetes que te gusten."
   },
   "package": {
     "not_found": "Paquete no encontrado",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 0e40fa415b..01c18381a0 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -360,7 +360,10 @@
       "message": "Il semblerait qu'ils n'utilisent pas encore npmx. Vous voulez leur en parler ?",
       "share_button": "Partager sur Bluesky",
       "compose_text": "Salut {'@'}{handle} ! As-tu déjà testé npmx.dev ? C'est un navigateur pour le registre npm : rapide, moderne et open source.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Intérêts publics pour les paquets et signaux d'activité.",
+    "likes_error": "Impossible de charger les paquets aimés.",
+    "likes_empty": "Aucun paquet aimé pour le moment."
   },
   "package": {
     "not_found": "Paquet introuvable",
diff --git a/i18n/locales/hi-IN.json b/i18n/locales/hi-IN.json
index ea702a7728..18391f03c2 100644
--- a/i18n/locales/hi-IN.json
+++ b/i18n/locales/hi-IN.json
@@ -229,7 +229,10 @@
     "expand": "विस्तृत करें"
   },
   "profile": {
-    "invite": {}
+    "invite": {},
+    "public_interests_description": "सार्वजनिक पैकेज रुचियाँ और गतिविधि संकेत।",
+    "likes_error": "पसंद किए गए पैकेज लोड नहीं हो सके।",
+    "likes_empty": "अभी तक कोई पसंद किए गए पैकेज नहीं।"
   },
   "package": {
     "not_found": "पैकेज नहीं मिला",
diff --git a/i18n/locales/hu-HU.json b/i18n/locales/hu-HU.json
index c14948a6e1..0b391fa6f2 100644
--- a/i18n/locales/hu-HU.json
+++ b/i18n/locales/hu-HU.json
@@ -177,7 +177,10 @@
       "message": "Úgy tűnik, hogy még nem használja az npmx-et. Szeretnéd megtudatni vele?",
       "share_button": "Megosztás a Bluesky-on",
       "compose_text": "Halló {'@'}{handle}! Már próbáltad az npmx.dev-et? Egy gyors, modern és nyílt forráskódú böngésző az npm regiszterhez.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Nyilvános csomagérdeklődések és aktivitási jelek.",
+    "likes_error": "Nem sikerült betölteni a kedvelt csomagokat.",
+    "likes_empty": "Még nincsenek kedvelt csomagok."
   },
   "package": {
     "not_found": "Csomag Nem Található",
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index 9646ca17b1..717b761a39 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -244,7 +244,10 @@
       "message": "Sepertinya mereka belum menggunakan npmx. Ingin memberi tahu mereka?",
       "share_button": "Bagikan di Bluesky",
       "compose_text": "Hai {'@'}{handle}! Sudah pernah mencoba npmx.dev? Ini adalah browser untuk npm registry yang cepat, modern, dan open-source.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Minat paket publik dan sinyal aktivitas.",
+    "likes_error": "Gagal memuat paket yang disukai.",
+    "likes_empty": "Belum ada paket yang disukai."
   },
   "package": {
     "not_found": "Paket Tidak Ditemukan",
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
index b19efca8db..dfbb4c95d1 100644
--- a/i18n/locales/it-IT.json
+++ b/i18n/locales/it-IT.json
@@ -155,7 +155,10 @@
     }
   },
   "profile": {
-    "invite": {}
+    "invite": {},
+    "public_interests_description": "Interessi dei pacchetti pubblici e segnali di attività.",
+    "likes_error": "Impossibile caricare i pacchetti preferiti.",
+    "likes_empty": "Nessun pacchetto preferito ancora."
   },
   "package": {
     "not_found": "Pacchetto Non Trovato",
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index 72397e4907..63e51d154a 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -224,7 +224,10 @@
       "message": "まだnpmxを利用していないようです。npmxを紹介しますか？",
       "share_button": "Blueskyで共有",
       "compose_text": "{'@'}{handle} さん、npmx.devはもうチェックしましたか？ 高速でモダンなオープンソースのnpmレジストリブラウザです。\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "公開パッケージの関心事とアクティビティシグナル。",
+    "likes_error": "いいねしたパッケージを読み込めませんでした。",
+    "likes_empty": "いいねしたパッケージはまだありません。"
   },
   "package": {
     "not_found": "パッケージが見つかりません",
diff --git a/i18n/locales/kn-IN.json b/i18n/locales/kn-IN.json
index 2111c4dd23..d8d81eb9e7 100644
--- a/i18n/locales/kn-IN.json
+++ b/i18n/locales/kn-IN.json
@@ -122,7 +122,10 @@
     }
   },
   "profile": {
-    "invite": {}
+    "invite": {},
+    "public_interests_description": "ಸಾರ್ವಜನಿಕ ಪ್ಯಾಕೇಜ್ ಆಸಕ್ತಿಗಳು ಮತ್ತು ಚಟುವಟಿಕೆ ಸಂಕೇತಗಳು.",
+    "likes_error": "ಇಷ್ಟಪಟ್ಟ ಪ್ಯಾಕೇಜುಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲ.",
+    "likes_empty": "ಇನ್ನೂ ಇಷ್ಟಪಟ್ಟ ಪ್ಯಾಕೇಜುಗಳಿಲ್ಲ."
   },
   "package": {
     "not_found": "ಪ್ಯಾಕೇಜ್ ಕಂಡುಬಂದಿಲ್ಲ",
diff --git a/i18n/locales/mr-IN.json b/i18n/locales/mr-IN.json
index 57c36430e0..7bee21b07b 100644
--- a/i18n/locales/mr-IN.json
+++ b/i18n/locales/mr-IN.json
@@ -213,7 +213,10 @@
     "expand": "विस्तृत करा"
   },
   "profile": {
-    "invite": {}
+    "invite": {},
+    "public_interests_description": "सार्वजनिक पॅकेज आवडी आणि क्रियाकलाप संकेत.",
+    "likes_error": "आवडलेल्या पॅकेजेस लोड करता आल्या नाहीत.",
+    "likes_empty": "अद्याप आवडलेली कोणतीही पॅकेजेस नाहीत."
   },
   "package": {
     "not_found": "पॅकेज सापडले नाही",
diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
index 1d6351607a..749c355749 100644
--- a/i18n/locales/nb-NO.json
+++ b/i18n/locales/nb-NO.json
@@ -358,7 +358,10 @@
       "message": "Det ser ikke ut som de bruker npmx ennå. Vil du fortelle dem om det?",
       "share_button": "Del på Bluesky",
       "compose_text": "Hei {'@'}{handle}! Har du sjekket ut npmx.dev ennå? Det er en leser for npm-registeret som er rask, moderne og åpen kildekode.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Offentlige pakkeinteresser og aktivitetssignaler.",
+    "likes_error": "Kunne ikke laste likte pakker.",
+    "likes_empty": "Ingen likte pakker ennå."
   },
   "package": {
     "not_found": "Pakke ikke funnet",
diff --git a/i18n/locales/ne-NP.json b/i18n/locales/ne-NP.json
index 60b7dec1f1..c348e2fe17 100644
--- a/i18n/locales/ne-NP.json
+++ b/i18n/locales/ne-NP.json
@@ -122,7 +122,10 @@
     }
   },
   "profile": {
-    "invite": {}
+    "invite": {},
+    "public_interests_description": "सार्वजनिक प्याकेज रुचिहरू र गतिविधि संकेतहरू।",
+    "likes_error": "मनपरेका प्याकेजहरू लोड गर्न सकिएन।",
+    "likes_empty": "अहिले सम्म मनपरेका प्याकेजहरू छैनन्।"
   },
   "package": {
     "not_found": "प्याकेज फेला परेन",
diff --git a/i18n/locales/nl.json b/i18n/locales/nl.json
index 85e5f13c1a..45634a2503 100644
--- a/i18n/locales/nl.json
+++ b/i18n/locales/nl.json
@@ -358,7 +358,10 @@
       "message": "Het lijkt erop dat ze npmx nog niet gebruiken. Wilt u ze hierop wijzen",
       "share_button": "Deel op Bluesky",
       "compose_text": "Hallo {'@'}{handle}! Hebt u npmx.dev al bekeken? Het is een browser voor het npm register die snel, modern en open source is.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Openbare pakketinteresses en activiteitssignalen.",
+    "likes_error": "Kon gelikete pakketten niet laden.",
+    "likes_empty": "Nog geen gelikete pakketten."
   },
   "package": {
     "not_found": "Pakket niet gevonden",
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index f4acd249ed..85cfd34c32 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -224,7 +224,10 @@
       "message": "Wygląda na to, że jeszcze nie korzystają z npmx. Chcesz ich powiadomić?",
       "share_button": "Podziel się na Bluesky",
       "compose_text": "Hej {'@'}{handle}! Czy znasz już npmx.dev? To szybka, nowoczesna przeglądarka rejestru npm z otwartym kodem źródłowym.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Publiczne zainteresowania pakietami i sygnały aktywności.",
+    "likes_error": "Nie udało się wczytać polubionych pakietów.",
+    "likes_empty": "Brak polubionych pakietów."
   },
   "package": {
     "not_found": "Nie znaleziono pakietu",
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index 935b61c5ec..a32f720e61 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -355,7 +355,10 @@
       "message": "Parece que eles ainda não estão usando o npmx. Quer contar a eles sobre isso?",
       "share_button": "Compartilhar no Bluesky",
       "compose_text": "Olá, {'@'}{handle}! Você já conferiu npmx.dev? É um navegador para o registro npm rápido, moderno e de código aberto.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Interesses públicos de pacotes e sinais de atividade.",
+    "likes_error": "Não foi possível carregar os pacotes curtidos.",
+    "likes_empty": "Nenhum pacote curtido ainda."
   },
   "package": {
     "not_found": "Pacote não encontrado",
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 66dc858a5a..bc9adaa933 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -360,7 +360,10 @@
       "message": "Похоже, этот пользователь ещё не пользуется npmx. Хотите рассказать ему о проекте?",
       "share_button": "Поделиться в Bluesky",
       "compose_text": "Привет, {'@'}{handle}! Уже смотрел npmx.dev? Это быстрый, современный и open-source браузер для реестра npm.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Публичные интересы к пакетам и сигналы активности.",
+    "likes_error": "Не удалось загрузить понравившиеся пакеты.",
+    "likes_empty": "Понравившихся пакетов пока нет."
   },
   "package": {
     "not_found": "Пакет не найден",
diff --git a/i18n/locales/sr-Latn-RS.json b/i18n/locales/sr-Latn-RS.json
index c015089b8c..e7c98216c7 100644
--- a/i18n/locales/sr-Latn-RS.json
+++ b/i18n/locales/sr-Latn-RS.json
@@ -244,7 +244,10 @@
       "message": "Izgleda da još uvek ne koriste npmx. Želite li da im kažete nešto više o tome?",
       "share_button": "Podelite na Bluesky-u",
       "compose_text": "Hej {'@'}{handle}! Da li ste već pogledali npmx.dev? To je pretraživač za npm registar koji je brz, moderan i otvorenog koda.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Javna interesovanja za pakete i signali aktivnosti.",
+    "likes_error": "Nije moguće učitati omiljene pakete.",
+    "likes_empty": "Još nema omiljenih paketa."
   },
   "package": {
     "not_found": "Paket nije pronađen",
diff --git a/i18n/locales/ta-IN.json b/i18n/locales/ta-IN.json
index e8b657110c..fd8b7cdbf1 100644
--- a/i18n/locales/ta-IN.json
+++ b/i18n/locales/ta-IN.json
@@ -154,7 +154,10 @@
     }
   },
   "profile": {
-    "invite": {}
+    "invite": {},
+    "public_interests_description": "பொதுப் தொகுப்பு விருப்பங்கள் மற்றும் செயல்பாட்டு சிக்னல்கள்.",
+    "likes_error": "விரும்பிய தொகுப்புகளை ஏற்ற முடியவில்லை.",
+    "likes_empty": "இன்னும் விரும்பிய தொகுப்புகள் இல்லை."
   },
   "package": {
     "not_found": "தொகுப்பு கிடைக்கவில்லை",
diff --git a/i18n/locales/te-IN.json b/i18n/locales/te-IN.json
index 7e92347d2e..3b1fd100ae 100644
--- a/i18n/locales/te-IN.json
+++ b/i18n/locales/te-IN.json
@@ -122,7 +122,10 @@
     }
   },
   "profile": {
-    "invite": {}
+    "invite": {},
+    "public_interests_description": "Public package interests and activity signals.",
+    "likes_error": "Could not load liked packages.",
+    "likes_empty": "No liked packages yet."
   },
   "package": {
     "not_found": "ప్యాకేజ్ కనుగొనబడలేదు",
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index 963fed0027..959564eac2 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -214,7 +214,10 @@
       "message": "npmx'i deneyin - npm için daha iyi bir paket tarayıcısı",
       "share_button": "Paylaş",
       "compose_text": "npmx'i deneyin - npm için daha iyi bir paket tarayıcısı: {url}"
-    }
+    },
+    "public_interests_description": "Genel paket ilgi alanları ve aktivite sinyalleri.",
+    "likes_error": "Beğenilen paketler yüklenemedi.",
+    "likes_empty": "Henüz beğenilen paket yok."
   },
   "package": {
     "not_found": "Paket Bulunamadı",
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index 336c409e1b..b229774241 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -244,7 +244,10 @@
       "message": "Схоже, вони ще не користуються npmx. Хочете розповісти їм про нього?",
       "share_button": "Поділитися в Bluesky",
       "compose_text": "Привіт, {'@'}{handle}! Ти вже перевірив npmx.dev? Це швидкий сучасний браузер для реєстру npm з відкритим кодом.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Публічні інтереси до пакетів та сигнали активності.",
+    "likes_error": "Не вдалося завантажити вподобані пакети.",
+    "likes_empty": "Вподобаних пакетів поки немає."
   },
   "package": {
     "not_found": "Пакет не знайдено",
diff --git a/i18n/locales/vi-VN.json b/i18n/locales/vi-VN.json
index d9a5698fa2..10721d5f92 100644
--- a/i18n/locales/vi-VN.json
+++ b/i18n/locales/vi-VN.json
@@ -244,7 +244,10 @@
       "message": "Có vẻ họ chưa dùng npmx. Bạn có muốn giới thiệu cho họ không?",
       "share_button": "Chia sẻ trên Bluesky",
       "compose_text": "Chào {'@'}{handle}! Bạn đã thử npmx.dev chưa? Đây là trình duyệt cho npm registry, nhanh, hiện đại và mã nguồn mở.\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "Sở thích package công khai và tín hiệu hoạt động.",
+    "likes_error": "Không thể tải các package đã thích.",
+    "likes_empty": "Chưa có package nào được thích."
   },
   "package": {
     "not_found": "Không tìm thấy gói",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 559283c623..9b99aee730 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -359,7 +359,10 @@
       "message": "看起来他们还没有使用 npmx，去邀请一下？",
       "share_button": "分享到 Bluesky",
       "compose_text": "嗨 {'@'}{handle}！您用过 npmx.dev 吗？它是一个快速、现代且开源的 npm registry 浏览器。\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "公开的包兴趣和活动信号。",
+    "likes_error": "无法加载喜欢的包。",
+    "likes_empty": "还没有喜欢的包。"
   },
   "package": {
     "not_found": "未找到包",
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index 623e3955fe..7843986523 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -357,7 +357,10 @@
       "message": "看起來對方還沒在用 npmx。要不要跟他們分享一下？",
       "share_button": "分享到 Bluesky",
       "compose_text": "Hey {'@'}{handle}！你用過 npmx.dev 了嗎？它是 npm Registry 的瀏覽器，快速、現代，而且是開源的。\nhttps://npmx.dev"
-    }
+    },
+    "public_interests_description": "公開套件興趣與活動訊號。",
+    "likes_error": "無法載入喜歡的套件。",
+    "likes_empty": "目前尚無喜歡的套件。"
   },
   "package": {
     "not_found": "找不到套件",
diff --git a/i18n/schema.json b/i18n/schema.json
index f06f2f53a8..3f7d803d9a 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1069,6 +1069,15 @@
         "likes": {
           "type": "string"
         },
+        "likes_error": {
+          "type": "string"
+        },
+        "likes_empty": {
+          "type": "string"
+        },
+        "public_interests_description": {
+          "type": "string"
+        },
         "seo_title": {
           "type": "string"
         },
diff --git a/server/api/keytrace/[domain].ts b/server/api/keytrace/[domain].ts
new file mode 100644
index 0000000000..b2781daa39
--- /dev/null
+++ b/server/api/keytrace/[domain].ts
@@ -0,0 +1,125 @@
+import type { KeytraceResponse } from "#shared/types/keytrace";
+
+const MOCK_KEYTRACE_PROFILES: Record<string, KeytraceResponse> = {
+  "npmx.dev": {
+    profile: {
+      name: "npmx Team",
+      avatar: "https://api.dicebear.com/9.x/shapes/svg?seed=npmx",
+      banner:
+        "https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=1400&q=80",
+      description:
+        "Open source developers building better tooling around package discovery.",
+    },
+    accounts: [
+      {
+        platform: "github",
+        username: "npmx-dev",
+        displayName: "npmx-dev",
+        avatar: "https://avatars.githubusercontent.com/u/178563400?v=4",
+        url: "https://github.com/npmx-dev",
+        status: "verified",
+        proofMethod: "github",
+        addedAt: "2026-03-10T12:00:00.000Z",
+        lastCheckedAt: "2026-04-20T09:30:00.000Z",
+      },
+      {
+        platform: "npm",
+        username: "npmx",
+        displayName: "npmx",
+        avatar: "https://api.dicebear.com/9.x/identicon/svg?seed=npmx",
+        url: "https://www.npmjs.com/~npmx",
+        status: "stale",
+        proofMethod: "npm",
+        addedAt: "2026-02-18T15:20:00.000Z",
+        lastCheckedAt: "2026-03-05T08:00:00.000Z",
+        failureReason: "Proof has not been re-verified recently.",
+      },
+      {
+        platform: "mastodon",
+        username: "@npmx@fosstodon.org",
+        displayName: "npmx",
+        avatar:
+          "https://api.dicebear.com/9.x/identicon/svg?seed=fosstodon-npmx",
+        url: "https://fosstodon.org/@npmx",
+        status: "failed",
+        proofMethod: "mastodon",
+        addedAt: "2026-01-22T11:40:00.000Z",
+        lastCheckedAt: "2026-04-19T22:15:00.000Z",
+        failureReason:
+          "Linked proof URL could not be resolved during verification.",
+      },
+    ],
+  },
+  "empty.dev": {
+    profile: {
+      name: "Empty Developer",
+      avatar: "https://api.dicebear.com/9.x/initials/svg?seed=empty.dev",
+      description: "A profile with no linked accounts yet.",
+    },
+    accounts: [],
+  },
+};
+
+function domainToDisplayName(domain: string): string {
+  const firstSegment = domain.split(".")[0] || domain;
+  return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1);
+}
+
+function buildFallbackProfile(domain: string): KeytraceResponse {
+  return {
+    profile: {
+      name: `${domainToDisplayName(domain)} Developer`,
+      avatar: `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`,
+      description: `Mock identity profile for ${domain}.`,
+    },
+    accounts: [
+      {
+        platform: "github",
+        username: domain,
+        displayName: domain,
+        avatar: `https://api.dicebear.com/9.x/identicon/svg?seed=github-${encodeURIComponent(domain)}`,
+        url: `https://github.com/${domain}`,
+        status: "verified",
+        proofMethod: "github",
+        addedAt: "2026-04-01T10:00:00.000Z",
+        lastCheckedAt: "2026-04-21T10:00:00.000Z",
+      },
+      {
+        platform: "npm",
+        username: domain,
+        displayName: domain,
+        avatar: `https://api.dicebear.com/9.x/identicon/svg?seed=npm-${encodeURIComponent(domain)}`,
+        url: `https://www.npmjs.com/~${domain}`,
+        status: "unverified",
+        proofMethod: "npm",
+        addedAt: "2026-04-01T10:00:00.000Z",
+        lastCheckedAt: "2026-04-01T10:00:00.000Z",
+        failureReason: "Proof exists but has not been verified yet.",
+      },
+      {
+        platform: "mastodon",
+        username: `@${domain}@mastodon.social`,
+        displayName: domain,
+        avatar: `https://api.dicebear.com/9.x/identicon/svg?seed=mastodon-${encodeURIComponent(domain)}`,
+        url: `https://mastodon.social/@${encodeURIComponent(domain)}`,
+        status: "stale",
+        proofMethod: "mastodon",
+        addedAt: "2026-04-01T10:00:00.000Z",
+        lastCheckedAt: "2026-04-08T10:00:00.000Z",
+        failureReason: "Verification check is out of date.",
+      },
+    ],
+  };
+}
+
+export default defineEventHandler((event) => {
+  const domain = getRouterParam(event, "domain")?.trim().toLowerCase();
+  if (!domain) {
+    throw createError({
+      statusCode: 400,
+      message: "Domain is required",
+    });
+  }
+
+  return MOCK_KEYTRACE_PROFILES[domain] ?? buildFallbackProfile(domain);
+});
diff --git a/server/api/keytrace/reverify.post.ts b/server/api/keytrace/reverify.post.ts
new file mode 100644
index 0000000000..9030cd85b2
--- /dev/null
+++ b/server/api/keytrace/reverify.post.ts
@@ -0,0 +1,30 @@
+import type {
+  KeytraceReverifyRequest,
+  KeytraceReverifyResponse,
+} from "#shared/types/keytrace";
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody<KeytraceReverifyRequest>(event);
+
+  const platform = body?.platform?.trim().toLowerCase();
+  const username = body?.username?.trim();
+
+  if (!platform || !username) {
+    throw createError({
+      statusCode: 400,
+      message: "platform and username are required",
+    });
+  }
+
+  const lastCheckedAt = new Date().toISOString();
+
+  // TODO: Implement per-platform proof verification for KeytraceReverifyResponse
+  // construction here (including mastodon and npm short-username logic), ideally
+  // via a verifyProofForPlatform(platform, username, proofData) helper.
+  const response: KeytraceReverifyResponse = {
+    status: "unverified",
+    lastCheckedAt,
+    failureReason: "Proof verification is not implemented yet.",
+  };
+  return response;
+});
diff --git a/shared/types/keytrace.ts b/shared/types/keytrace.ts
new file mode 100644
index 0000000000..859974ff42
--- /dev/null
+++ b/shared/types/keytrace.ts
@@ -0,0 +1,50 @@
+export type KeytraceProfile = {
+  name: string;
+  avatar: string;
+  banner?: string;
+  description: string;
+};
+
+export type KeytraceVerificationStatus =
+  | "verified"
+  | "unverified"
+  | "stale"
+  | "failed";
+
+export type KeytraceProofMethod =
+  | "dns"
+  | "github"
+  | "npm"
+  | "mastodon"
+  | "pgp"
+  | "other";
+
+export type KeytraceAccount = {
+  platform: string;
+  username: string;
+  displayName?: string;
+  avatar?: string;
+  url?: string;
+  status: KeytraceVerificationStatus;
+  proofMethod: KeytraceProofMethod;
+  addedAt: string;
+  lastCheckedAt: string;
+  failureReason?: string;
+};
+
+export type KeytraceResponse = {
+  profile: KeytraceProfile;
+  accounts: KeytraceAccount[];
+};
+
+export type KeytraceReverifyRequest = {
+  platform: string;
+  username: string;
+  url?: string;
+};
+
+export type KeytraceReverifyResponse = {
+  status: KeytraceVerificationStatus;
+  lastCheckedAt: string;
+  failureReason?: string;
+};

From 5043d74f9e028c6395e411f78b67b817bc8cf4ef Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Thu, 23 Apr 2026 12:22:05 +0530
Subject: [PATCH 02/28] fix: refactor code by formatting the components and
 types

---
 app/components/Compare/FacetSelector.vue |   6 +-
 app/composables/useKeytraceProfile.ts    |  36 +++---
 server/api/keytrace/[domain].ts          | 135 +++++++++++------------
 server/api/keytrace/reverify.post.ts     |  29 +++--
 shared/types/keytrace.ts                 |  68 +++++-------
 5 files changed, 131 insertions(+), 143 deletions(-)

diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index a66d6116e0..3a30a603c6 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -106,7 +106,11 @@ function deselectAllFacet(category: string) {
           :key="facet.id"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
           class="inline-flex items-center gap-1 px-1.5 rounded border transition-colors text-fg-subtle bg-bg-subtle border-border-subtle hover:(text-fg-muted border-border) has-[:checked]:(text-fg-muted bg-fg/10 border-fg/20 hover:(bg-fg/20 text-fg/50)) has-[:focus-visible]:(outline outline-accent/70)"
-          :class="facet.comingSoon ? 'cursor-not-allowed text-fg-subtle/50 bg-bg-subtle border-border-subtle hover:(text-fg-subtle/50 border-border-subtle)' : 'cursor-pointer'"
+          :class="
+            facet.comingSoon
+              ? 'cursor-not-allowed text-fg-subtle/50 bg-bg-subtle border-border-subtle hover:(text-fg-subtle/50 border-border-subtle)'
+              : 'cursor-pointer'
+          "
         >
           <input
             type="checkbox"
diff --git a/app/composables/useKeytraceProfile.ts b/app/composables/useKeytraceProfile.ts
index 58787a1dab..3235040027 100644
--- a/app/composables/useKeytraceProfile.ts
+++ b/app/composables/useKeytraceProfile.ts
@@ -1,11 +1,11 @@
-import type { KeytraceAccount, KeytraceResponse } from "#shared/types/keytrace";
+import type { KeytraceAccount, KeytraceResponse } from '#shared/types/keytrace'
 
-const statusPriority: Record<KeytraceAccount["status"], number> = {
+const statusPriority: Record<KeytraceAccount['status'], number> = {
   verified: 0,
   unverified: 1,
   stale: 2,
   failed: 3,
-};
+}
 
 export function useKeytraceProfile(domain: MaybeRefOrGetter<string>) {
   const asyncData = useFetch<KeytraceResponse>(
@@ -13,36 +13,36 @@ export function useKeytraceProfile(domain: MaybeRefOrGetter<string>) {
     {
       default: () => ({
         profile: {
-          name: "",
-          avatar: "",
-          description: "",
+          name: '',
+          avatar: '',
+          description: '',
         },
         accounts: [],
       }),
     },
-  );
+  )
 
-  const profile = computed(() => asyncData.data.value?.profile);
-  const accounts = computed(() => asyncData.data.value?.accounts ?? []);
+  const profile = computed(() => asyncData.data.value?.profile)
+  const accounts = computed(() => asyncData.data.value?.accounts ?? [])
 
   const sortedAccounts = computed(() =>
     [...accounts.value].sort((a, b) => {
-      const statusSort = statusPriority[a.status] - statusPriority[b.status];
+      const statusSort = statusPriority[a.status] - statusPriority[b.status]
       if (statusSort !== 0) {
-        return statusSort;
+        return statusSort
       }
 
-      return a.platform.localeCompare(b.platform);
+      return a.platform.localeCompare(b.platform)
     }),
-  );
+  )
 
   const verifiedAccounts = computed(() =>
-    sortedAccounts.value.filter((account) => account.status === "verified"),
-  );
+    sortedAccounts.value.filter(account => account.status === 'verified'),
+  )
 
   const nonVerifiedAccounts = computed(() =>
-    sortedAccounts.value.filter((account) => account.status !== "verified"),
-  );
+    sortedAccounts.value.filter(account => account.status !== 'verified'),
+  )
 
   return {
     profile,
@@ -50,5 +50,5 @@ export function useKeytraceProfile(domain: MaybeRefOrGetter<string>) {
     verifiedAccounts,
     nonVerifiedAccounts,
     loading: asyncData.pending,
-  };
+  }
 }
diff --git a/server/api/keytrace/[domain].ts b/server/api/keytrace/[domain].ts
index b2781daa39..2b2e20e478 100644
--- a/server/api/keytrace/[domain].ts
+++ b/server/api/keytrace/[domain].ts
@@ -1,68 +1,65 @@
-import type { KeytraceResponse } from "#shared/types/keytrace";
+import type { KeytraceResponse } from '#shared/types/keytrace'
 
 const MOCK_KEYTRACE_PROFILES: Record<string, KeytraceResponse> = {
-  "npmx.dev": {
+  'npmx.dev': {
     profile: {
-      name: "npmx Team",
-      avatar: "https://api.dicebear.com/9.x/shapes/svg?seed=npmx",
+      name: 'npmx Team',
+      avatar: 'https://api.dicebear.com/9.x/shapes/svg?seed=npmx',
       banner:
-        "https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=1400&q=80",
-      description:
-        "Open source developers building better tooling around package discovery.",
+        'https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=1400&q=80',
+      description: 'Open source developers building better tooling around package discovery.',
     },
     accounts: [
       {
-        platform: "github",
-        username: "npmx-dev",
-        displayName: "npmx-dev",
-        avatar: "https://avatars.githubusercontent.com/u/178563400?v=4",
-        url: "https://github.com/npmx-dev",
-        status: "verified",
-        proofMethod: "github",
-        addedAt: "2026-03-10T12:00:00.000Z",
-        lastCheckedAt: "2026-04-20T09:30:00.000Z",
+        platform: 'github',
+        username: 'npmx-dev',
+        displayName: 'npmx-dev',
+        avatar: 'https://avatars.githubusercontent.com/u/178563400?v=4',
+        url: 'https://github.com/npmx-dev',
+        status: 'verified',
+        proofMethod: 'github',
+        addedAt: '2026-03-10T12:00:00.000Z',
+        lastCheckedAt: '2026-04-20T09:30:00.000Z',
       },
       {
-        platform: "npm",
-        username: "npmx",
-        displayName: "npmx",
-        avatar: "https://api.dicebear.com/9.x/identicon/svg?seed=npmx",
-        url: "https://www.npmjs.com/~npmx",
-        status: "stale",
-        proofMethod: "npm",
-        addedAt: "2026-02-18T15:20:00.000Z",
-        lastCheckedAt: "2026-03-05T08:00:00.000Z",
-        failureReason: "Proof has not been re-verified recently.",
+        platform: 'npm',
+        username: 'npmx',
+        displayName: 'npmx',
+        avatar: 'https://api.dicebear.com/9.x/identicon/svg?seed=npmx',
+        url: 'https://www.npmjs.com/~npmx',
+        status: 'stale',
+        proofMethod: 'npm',
+        addedAt: '2026-02-18T15:20:00.000Z',
+        lastCheckedAt: '2026-03-05T08:00:00.000Z',
+        failureReason: 'Proof has not been re-verified recently.',
       },
       {
-        platform: "mastodon",
-        username: "@npmx@fosstodon.org",
-        displayName: "npmx",
-        avatar:
-          "https://api.dicebear.com/9.x/identicon/svg?seed=fosstodon-npmx",
-        url: "https://fosstodon.org/@npmx",
-        status: "failed",
-        proofMethod: "mastodon",
-        addedAt: "2026-01-22T11:40:00.000Z",
-        lastCheckedAt: "2026-04-19T22:15:00.000Z",
-        failureReason:
-          "Linked proof URL could not be resolved during verification.",
+        platform: 'mastodon',
+        username: '@npmx@fosstodon.org',
+        displayName: 'npmx',
+        avatar: 'https://api.dicebear.com/9.x/identicon/svg?seed=fosstodon-npmx',
+        url: 'https://fosstodon.org/@npmx',
+        status: 'failed',
+        proofMethod: 'mastodon',
+        addedAt: '2026-01-22T11:40:00.000Z',
+        lastCheckedAt: '2026-04-19T22:15:00.000Z',
+        failureReason: 'Linked proof URL could not be resolved during verification.',
       },
     ],
   },
-  "empty.dev": {
+  'empty.dev': {
     profile: {
-      name: "Empty Developer",
-      avatar: "https://api.dicebear.com/9.x/initials/svg?seed=empty.dev",
-      description: "A profile with no linked accounts yet.",
+      name: 'Empty Developer',
+      avatar: 'https://api.dicebear.com/9.x/initials/svg?seed=empty.dev',
+      description: 'A profile with no linked accounts yet.',
     },
     accounts: [],
   },
-};
+}
 
 function domainToDisplayName(domain: string): string {
-  const firstSegment = domain.split(".")[0] || domain;
-  return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1);
+  const firstSegment = domain.split('.')[0] || domain
+  return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1)
 }
 
 function buildFallbackProfile(domain: string): KeytraceResponse {
@@ -74,52 +71,52 @@ function buildFallbackProfile(domain: string): KeytraceResponse {
     },
     accounts: [
       {
-        platform: "github",
+        platform: 'github',
         username: domain,
         displayName: domain,
         avatar: `https://api.dicebear.com/9.x/identicon/svg?seed=github-${encodeURIComponent(domain)}`,
         url: `https://github.com/${domain}`,
-        status: "verified",
-        proofMethod: "github",
-        addedAt: "2026-04-01T10:00:00.000Z",
-        lastCheckedAt: "2026-04-21T10:00:00.000Z",
+        status: 'verified',
+        proofMethod: 'github',
+        addedAt: '2026-04-01T10:00:00.000Z',
+        lastCheckedAt: '2026-04-21T10:00:00.000Z',
       },
       {
-        platform: "npm",
+        platform: 'npm',
         username: domain,
         displayName: domain,
         avatar: `https://api.dicebear.com/9.x/identicon/svg?seed=npm-${encodeURIComponent(domain)}`,
         url: `https://www.npmjs.com/~${domain}`,
-        status: "unverified",
-        proofMethod: "npm",
-        addedAt: "2026-04-01T10:00:00.000Z",
-        lastCheckedAt: "2026-04-01T10:00:00.000Z",
-        failureReason: "Proof exists but has not been verified yet.",
+        status: 'unverified',
+        proofMethod: 'npm',
+        addedAt: '2026-04-01T10:00:00.000Z',
+        lastCheckedAt: '2026-04-01T10:00:00.000Z',
+        failureReason: 'Proof exists but has not been verified yet.',
       },
       {
-        platform: "mastodon",
+        platform: 'mastodon',
         username: `@${domain}@mastodon.social`,
         displayName: domain,
         avatar: `https://api.dicebear.com/9.x/identicon/svg?seed=mastodon-${encodeURIComponent(domain)}`,
         url: `https://mastodon.social/@${encodeURIComponent(domain)}`,
-        status: "stale",
-        proofMethod: "mastodon",
-        addedAt: "2026-04-01T10:00:00.000Z",
-        lastCheckedAt: "2026-04-08T10:00:00.000Z",
-        failureReason: "Verification check is out of date.",
+        status: 'stale',
+        proofMethod: 'mastodon',
+        addedAt: '2026-04-01T10:00:00.000Z',
+        lastCheckedAt: '2026-04-08T10:00:00.000Z',
+        failureReason: 'Verification check is out of date.',
       },
     ],
-  };
+  }
 }
 
-export default defineEventHandler((event) => {
-  const domain = getRouterParam(event, "domain")?.trim().toLowerCase();
+export default defineEventHandler(event => {
+  const domain = getRouterParam(event, 'domain')?.trim().toLowerCase()
   if (!domain) {
     throw createError({
       statusCode: 400,
-      message: "Domain is required",
-    });
+      message: 'Domain is required',
+    })
   }
 
-  return MOCK_KEYTRACE_PROFILES[domain] ?? buildFallbackProfile(domain);
-});
+  return MOCK_KEYTRACE_PROFILES[domain] ?? buildFallbackProfile(domain)
+})
diff --git a/server/api/keytrace/reverify.post.ts b/server/api/keytrace/reverify.post.ts
index 9030cd85b2..a85341aa16 100644
--- a/server/api/keytrace/reverify.post.ts
+++ b/server/api/keytrace/reverify.post.ts
@@ -1,30 +1,27 @@
-import type {
-  KeytraceReverifyRequest,
-  KeytraceReverifyResponse,
-} from "#shared/types/keytrace";
+import type { KeytraceReverifyRequest, KeytraceReverifyResponse } from '#shared/types/keytrace'
 
-export default defineEventHandler(async (event) => {
-  const body = await readBody<KeytraceReverifyRequest>(event);
+export default defineEventHandler(async event => {
+  const body = await readBody<KeytraceReverifyRequest>(event)
 
-  const platform = body?.platform?.trim().toLowerCase();
-  const username = body?.username?.trim();
+  const platform = body?.platform?.trim().toLowerCase()
+  const username = body?.username?.trim()
 
   if (!platform || !username) {
     throw createError({
       statusCode: 400,
-      message: "platform and username are required",
-    });
+      message: 'platform and username are required',
+    })
   }
 
-  const lastCheckedAt = new Date().toISOString();
+  const lastCheckedAt = new Date().toISOString()
 
   // TODO: Implement per-platform proof verification for KeytraceReverifyResponse
   // construction here (including mastodon and npm short-username logic), ideally
   // via a verifyProofForPlatform(platform, username, proofData) helper.
   const response: KeytraceReverifyResponse = {
-    status: "unverified",
+    status: 'unverified',
     lastCheckedAt,
-    failureReason: "Proof verification is not implemented yet.",
-  };
-  return response;
-});
+    failureReason: 'Proof verification is not implemented yet.',
+  }
+  return response
+})
diff --git a/shared/types/keytrace.ts b/shared/types/keytrace.ts
index 859974ff42..2219e732ad 100644
--- a/shared/types/keytrace.ts
+++ b/shared/types/keytrace.ts
@@ -1,50 +1,40 @@
 export type KeytraceProfile = {
-  name: string;
-  avatar: string;
-  banner?: string;
-  description: string;
-};
+  name: string
+  avatar: string
+  banner?: string
+  description: string
+}
 
-export type KeytraceVerificationStatus =
-  | "verified"
-  | "unverified"
-  | "stale"
-  | "failed";
+export type KeytraceVerificationStatus = 'verified' | 'unverified' | 'stale' | 'failed'
 
-export type KeytraceProofMethod =
-  | "dns"
-  | "github"
-  | "npm"
-  | "mastodon"
-  | "pgp"
-  | "other";
+export type KeytraceProofMethod = 'dns' | 'github' | 'npm' | 'mastodon' | 'pgp' | 'other'
 
 export type KeytraceAccount = {
-  platform: string;
-  username: string;
-  displayName?: string;
-  avatar?: string;
-  url?: string;
-  status: KeytraceVerificationStatus;
-  proofMethod: KeytraceProofMethod;
-  addedAt: string;
-  lastCheckedAt: string;
-  failureReason?: string;
-};
+  platform: string
+  username: string
+  displayName?: string
+  avatar?: string
+  url?: string
+  status: KeytraceVerificationStatus
+  proofMethod: KeytraceProofMethod
+  addedAt: string
+  lastCheckedAt: string
+  failureReason?: string
+}
 
 export type KeytraceResponse = {
-  profile: KeytraceProfile;
-  accounts: KeytraceAccount[];
-};
+  profile: KeytraceProfile
+  accounts: KeytraceAccount[]
+}
 
 export type KeytraceReverifyRequest = {
-  platform: string;
-  username: string;
-  url?: string;
-};
+  platform: string
+  username: string
+  url?: string
+}
 
 export type KeytraceReverifyResponse = {
-  status: KeytraceVerificationStatus;
-  lastCheckedAt: string;
-  failureReason?: string;
-};
+  status: KeytraceVerificationStatus
+  lastCheckedAt: string
+  failureReason?: string
+}

From d44a19971e91c5b372f0466ec0aef1a9ab1c705a Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Thu, 23 Apr 2026 13:37:57 +0530
Subject: [PATCH 03/28] test: fix unit test

---
 test/nuxt/a11y.spec.ts | 63 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index aa16620760..e81af4c8d6 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -271,6 +271,9 @@ import FacetScatterChart from '~/components/Compare/FacetScatterChart.vue'
 import PackageLikeCard from '~/components/Package/LikeCard.vue'
 import SizeIncrease from '~/components/Package/SizeIncrease.vue'
 import Likes from '~/components/Package/Likes.vue'
+import AccountItem from '~/components/AccountItem.vue'
+import LinkedAccounts from '~/components/LinkedAccounts.vue'
+import ProfileHeader from '~/components/ProfileHeader.vue'
 import type { VueUiXyDatasetItem } from 'vue-data-ui'
 
 describe('component accessibility audits', () => {
@@ -904,6 +907,66 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('ProfileHeader', () => {
+    it('should have no accessibility violations with profile data', async () => {
+      const component = await mountSuspended(ProfileHeader, {
+        props: {
+          profile: {
+            name: 'npmx Team',
+            avatar: 'https://api.dicebear.com/9.x/shapes/svg?seed=npmx',
+            description: 'Open source maintainers',
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('LinkedAccounts', () => {
+    it('should have no accessibility violations with account list', async () => {
+      const component = await mountSuspended(LinkedAccounts, {
+        props: {
+          accounts: [
+            {
+              platform: 'github',
+              username: 'npmx-dev',
+              displayName: 'npmx-dev',
+              status: 'verified',
+              proofMethod: 'github',
+              addedAt: '2026-04-01T10:00:00.000Z',
+              lastCheckedAt: '2026-04-21T10:00:00.000Z',
+              url: 'https://github.com/npmx-dev',
+            },
+          ],
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('AccountItem', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AccountItem, {
+        props: {
+          account: {
+            platform: 'github',
+            username: 'npmx-dev',
+            displayName: 'npmx-dev',
+            status: 'verified',
+            proofMethod: 'github',
+            addedAt: '2026-04-01T10:00:00.000Z',
+            lastCheckedAt: '2026-04-21T10:00:00.000Z',
+            url: 'https://github.com/npmx-dev',
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('PackageHeader', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageHeader, {

From 67f45f3d2b330380d72dedefc143ffe7e60f0c2e Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Thu, 23 Apr 2026 14:57:29 +0530
Subject: [PATCH 04/28] refactor: fix failed components test, remove error
 translations from locale files

---
 app/components/AccountItem.vue           |  4 ++--
 app/components/Compare/FacetSelector.vue | 17 +++++++----------
 i18n/locales/ar-EG.json                  |  1 -
 i18n/locales/az-AZ.json                  |  1 -
 i18n/locales/bg-BG.json                  |  1 -
 i18n/locales/cs-CZ.json                  |  1 -
 i18n/locales/de.json                     |  1 -
 i18n/locales/en.json                     |  1 -
 i18n/locales/es.json                     |  1 -
 i18n/locales/fr-FR.json                  |  1 -
 i18n/locales/hi-IN.json                  |  1 -
 i18n/locales/hu-HU.json                  |  1 -
 i18n/locales/id-ID.json                  |  1 -
 i18n/locales/ja-JP.json                  |  1 -
 i18n/locales/mr-IN.json                  |  1 -
 i18n/locales/nb-NO.json                  |  1 -
 i18n/locales/nl.json                     |  1 -
 i18n/locales/pl-PL.json                  |  1 -
 i18n/locales/pt-BR.json                  |  1 -
 i18n/locales/ru-RU.json                  |  1 -
 i18n/locales/sr-Latn-RS.json             |  1 -
 i18n/locales/tr-TR.json                  |  1 -
 i18n/locales/uk-UA.json                  |  1 -
 i18n/locales/vi-VN.json                  |  1 -
 i18n/locales/zh-CN.json                  |  1 -
 i18n/locales/zh-TW.json                  |  1 -
 26 files changed, 9 insertions(+), 36 deletions(-)

diff --git a/app/components/AccountItem.vue b/app/components/AccountItem.vue
index 25ac23b149..5e151bbc83 100644
--- a/app/components/AccountItem.vue
+++ b/app/components/AccountItem.vue
@@ -229,7 +229,7 @@ function formatDate(value: string): string {
 </script>
 
 <template>
-  <li class="rounded-md border border-border bg-bg-subtle px-3 py-3 sm:px-4">
+  <div class="rounded-md border border-border bg-bg-subtle px-3 py-3 sm:px-4">
     <div class="flex items-start justify-between gap-3">
       <div class="min-w-0">
         <div class="flex items-center gap-3 min-w-0">
@@ -364,5 +364,5 @@ function formatDate(value: string): string {
         </p>
       </div>
     </div>
-  </li>
+  </div>
 </template>
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index 3a30a603c6..da093c47f3 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -101,24 +101,21 @@ function deselectAllFacet(category: string) {
         :aria-labelledby="`facet-category-label-${category}`"
         data-facet-category-facets
       >
-        <label
+        <button
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
+          role="checkbox"
+          :aria-checked="isFacetSelected(facet.id)"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
-          class="inline-flex items-center gap-1 px-1.5 rounded border transition-colors text-fg-subtle bg-bg-subtle border-border-subtle hover:(text-fg-muted border-border) has-[:checked]:(text-fg-muted bg-fg/10 border-fg/20 hover:(bg-fg/20 text-fg/50)) has-[:focus-visible]:(outline outline-accent/70)"
+          :disabled="facet.comingSoon"
+          class="inline-flex items-center gap-1 px-1.5 rounded border transition-colors text-fg-subtle bg-bg-subtle border-border-subtle hover:(text-fg-muted border-border) aria-checked:(text-fg-muted bg-fg/10 border-fg/20 hover:(bg-fg/20 text-fg/50)) focus-visible:(outline outline-accent/70)"
           :class="
             facet.comingSoon
               ? 'cursor-not-allowed text-fg-subtle/50 bg-bg-subtle border-border-subtle hover:(text-fg-subtle/50 border-border-subtle)'
               : 'cursor-pointer'
           "
+          @click="toggleFacet(facet.id)"
         >
-          <input
-            type="checkbox"
-            class="sr-only"
-            :checked="isFacetSelected(facet.id)"
-            :disabled="facet.comingSoon"
-            @change="toggleFacet(facet.id)"
-          />
           <span
             v-if="!facet.comingSoon"
             aria-hidden="true"
@@ -128,7 +125,7 @@ function deselectAllFacet(category: string) {
           <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
-        </label>
+        </button>
       </div>
     </div>
   </div>
diff --git a/i18n/locales/ar-EG.json b/i18n/locales/ar-EG.json
index 83ce5e2dcb..19a25e964e 100644
--- a/i18n/locales/ar-EG.json
+++ b/i18n/locales/ar-EG.json
@@ -82,7 +82,6 @@
     "cancel": "إلغاء",
     "save": "حفظ",
     "edit": "تعديل",
-    "error": "خطأ",
     "view_on": {
       "gitlab": "عرض على GitLab",
       "bitbucket": "عرض على Bitbucket",
diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
index d21379292f..b2d7fc3897 100644
--- a/i18n/locales/az-AZ.json
+++ b/i18n/locales/az-AZ.json
@@ -193,7 +193,6 @@
     "cancel": "Ləğv et",
     "save": "Saxla",
     "edit": "Redaktə et",
-    "error": "Xəta",
     "view_on": {
       "npm": "npm-də bax",
       "github": "GitHub-da bax"
diff --git a/i18n/locales/bg-BG.json b/i18n/locales/bg-BG.json
index daa106948f..03ec65790c 100644
--- a/i18n/locales/bg-BG.json
+++ b/i18n/locales/bg-BG.json
@@ -156,7 +156,6 @@
     "cancel": "Отказ",
     "save": "Запазване",
     "edit": "Редактиране",
-    "error": "Грешка",
     "view_on": {
       "npm": "преглед в npm",
       "github": "Преглед в GitHub"
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index 84cbc676be..67bea763db 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -323,7 +323,6 @@
     "cancel": "Zrušit",
     "save": "Uložit",
     "edit": "Upravit",
-    "error": "Chyba",
     "view_on": {
       "npm": "Zobrazit na npm",
       "github": "Zobrazit na GitHubu",
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 1a29179809..e191cee94b 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -322,7 +322,6 @@
     "cancel": "Abbrechen",
     "save": "Speichern",
     "edit": "Bearbeiten",
-    "error": "Fehler",
     "view_on": {
       "npm": "Auf npm ansehen",
       "github": "Auf GitHub ansehen",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 5e31a60a21..924e5eaa74 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -327,7 +327,6 @@
     "cancel": "Cancel",
     "save": "Save",
     "edit": "Edit",
-    "error": "Error",
     "view_on": {
       "npm": "View on npm",
       "github": "View on GitHub",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index a723b3e57c..ddce4c624b 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -211,7 +211,6 @@
     "cancel": "Cancelar",
     "save": "Guardar",
     "edit": "Editar",
-    "error": "Error",
     "view_on": {
       "npm": "ver en npm",
       "github": "Ver en GitHub",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 01c18381a0..2c814d635a 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -324,7 +324,6 @@
     "cancel": "Annuler",
     "save": "Enregistrer",
     "edit": "Modifier",
-    "error": "Erreur",
     "view_on": {
       "npm": "voir sur npm",
       "github": "Voir sur GitHub",
diff --git a/i18n/locales/hi-IN.json b/i18n/locales/hi-IN.json
index 18391f03c2..dff0bb6943 100644
--- a/i18n/locales/hi-IN.json
+++ b/i18n/locales/hi-IN.json
@@ -210,7 +210,6 @@
     "cancel": "रद्द करें",
     "save": "सहेजें",
     "edit": "संपादित करें",
-    "error": "त्रुटि",
     "view_on": {
       "npm": "npm पर देखें",
       "github": "GitHub पर देखें",
diff --git a/i18n/locales/hu-HU.json b/i18n/locales/hu-HU.json
index 0b391fa6f2..f7eb646ef1 100644
--- a/i18n/locales/hu-HU.json
+++ b/i18n/locales/hu-HU.json
@@ -156,7 +156,6 @@
     "cancel": "Mégse",
     "save": "Mentés",
     "edit": "Szerkesztés",
-    "error": "Hiba",
     "view_on": {
       "npm": "megtekintés npm-en",
       "github": "Megtekintés GitHubon"
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index 717b761a39..73dcae1fdf 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -211,7 +211,6 @@
     "cancel": "Batal",
     "save": "Simpan",
     "edit": "Edit",
-    "error": "Kesalahan",
     "view_on": {
       "npm": "lihat di npm",
       "github": "Lihat di GitHub",
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index 63e51d154a..69ba897b2c 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -193,7 +193,6 @@
     "cancel": "キャンセル",
     "save": "保存",
     "edit": "編集",
-    "error": "エラー",
     "view_on": {
       "npm": "npmで表示",
       "github": "GitHubで表示",
diff --git a/i18n/locales/mr-IN.json b/i18n/locales/mr-IN.json
index 7bee21b07b..ed80793975 100644
--- a/i18n/locales/mr-IN.json
+++ b/i18n/locales/mr-IN.json
@@ -194,7 +194,6 @@
     "cancel": "रद्द करा",
     "save": "जतन करा",
     "edit": "संपादित करा",
-    "error": "त्रुटी",
     "view_on": {
       "npm": "npm वर पहा",
       "github": "GitHub वर पहा",
diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
index 749c355749..1b21b3d59f 100644
--- a/i18n/locales/nb-NO.json
+++ b/i18n/locales/nb-NO.json
@@ -322,7 +322,6 @@
     "cancel": "Avbryt",
     "save": "Lagre",
     "edit": "Rediger",
-    "error": "Feil",
     "view_on": {
       "npm": "vis på npm",
       "github": "Vis på GitHub",
diff --git a/i18n/locales/nl.json b/i18n/locales/nl.json
index 45634a2503..4b820c60c9 100644
--- a/i18n/locales/nl.json
+++ b/i18n/locales/nl.json
@@ -322,7 +322,6 @@
     "cancel": "Annuleer",
     "save": "Opslaan",
     "edit": "Wijzigen",
-    "error": "Fout",
     "view_on": {
       "npm": "Bekijk op npm",
       "github": "Bekijk op GitHub",
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index 85cfd34c32..a009daea5b 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -193,7 +193,6 @@
     "cancel": "Anuluj",
     "save": "Zapisz",
     "edit": "Edytuj",
-    "error": "Błąd",
     "view_on": {
       "npm": "zobacz na npm",
       "github": "Zobacz w GitHub",
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index a32f720e61..6e0e05ec30 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -319,7 +319,6 @@
     "cancel": "Cancelar",
     "save": "Salvar",
     "edit": "Editar",
-    "error": "Erro",
     "view_on": {
       "npm": "Ver no npm",
       "github": "Ver no GitHub",
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index bc9adaa933..55bbb22597 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -324,7 +324,6 @@
     "cancel": "Отменить",
     "save": "Сохранить",
     "edit": "Изменить",
-    "error": "Ошибка",
     "view_on": {
       "npm": "Открыть на npm",
       "github": "Открыть на GitHub",
diff --git a/i18n/locales/sr-Latn-RS.json b/i18n/locales/sr-Latn-RS.json
index e7c98216c7..299f8e922d 100644
--- a/i18n/locales/sr-Latn-RS.json
+++ b/i18n/locales/sr-Latn-RS.json
@@ -211,7 +211,6 @@
     "cancel": "Otkažite",
     "save": "Sačuvajte",
     "edit": "Uredite",
-    "error": "Greška",
     "view_on": {
       "npm": "pogledajte na npm-u",
       "github": "Pogledajte na GitHub-u",
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index 959564eac2..5508d468d3 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -193,7 +193,6 @@
     "cancel": "İptal",
     "save": "Kaydet",
     "edit": "Düzenle",
-    "error": "Hata",
     "view_on": {
       "npm": "npm'de görüntüle",
       "github": "GitHub'da görüntüle"
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index b229774241..cf78807113 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -211,7 +211,6 @@
     "cancel": "Скасувати",
     "save": "Зберегти",
     "edit": "Редагувати",
-    "error": "Помилка",
     "view_on": {
       "npm": "Переглянути на npm",
       "github": "Переглянути на GitHub",
diff --git a/i18n/locales/vi-VN.json b/i18n/locales/vi-VN.json
index 10721d5f92..73950927c7 100644
--- a/i18n/locales/vi-VN.json
+++ b/i18n/locales/vi-VN.json
@@ -211,7 +211,6 @@
     "cancel": "Hủy",
     "save": "Lưu",
     "edit": "Chỉnh sửa",
-    "error": "Lỗi",
     "view_on": {
       "npm": "xem trên npm",
       "github": "Xem trên GitHub",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 9b99aee730..6854700b65 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -323,7 +323,6 @@
     "cancel": "取消",
     "save": "保存",
     "edit": "编辑",
-    "error": "加载出错",
     "view_on": {
       "npm": "在 npm 上查看",
       "github": "在 GitHub 上查看",
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index 7843986523..4b17ac1cb4 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -322,7 +322,6 @@
     "cancel": "取消",
     "save": "儲存",
     "edit": "編輯",
-    "error": "錯誤",
     "view_on": {
       "npm": "在 npm 上檢視",
       "github": "在 GitHub 上檢視",

From e72233afe7c78a1b74b226798b66fa2b125e9e3d Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Thu, 23 Apr 2026 14:59:54 +0530
Subject: [PATCH 05/28] Update i18n schema after removing unused common.error
 key

---
 i18n/schema.json | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/i18n/schema.json b/i18n/schema.json
index 3f7d803d9a..a3505b4897 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -985,9 +985,6 @@
         "edit": {
           "type": "string"
         },
-        "error": {
-          "type": "string"
-        },
         "view_on": {
           "type": "object",
           "properties": {
@@ -1069,13 +1066,13 @@
         "likes": {
           "type": "string"
         },
-        "likes_error": {
+        "public_interests_description": {
           "type": "string"
         },
-        "likes_empty": {
+        "likes_error": {
           "type": "string"
         },
-        "public_interests_description": {
+        "likes_empty": {
           "type": "string"
         },
         "seo_title": {

From 1e2c977de9648c79d114ac2fcbe6b449d5439278 Mon Sep 17 00:00:00 2001
From: Bittu kumar <bk8379903@gmail.com>
Date: Thu, 23 Apr 2026 15:09:23 +0530
Subject: [PATCH 06/28] Update i18n/locales/de-AT.json

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 i18n/locales/de-AT.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/i18n/locales/de-AT.json b/i18n/locales/de-AT.json
index daeddeec95..1e748e02cf 100644
--- a/i18n/locales/de-AT.json
+++ b/i18n/locales/de-AT.json
@@ -24,7 +24,7 @@
   },
   "profile": {
     "public_interests_description": "Öffentliche Paketinteressen und Aktivitätssignale.",
-    "likes_error": "Beliebte Pakete konnten nicht geladen werden.",
-    "likes_empty": "Noch keine beliebten Pakete vorhanden."
+    "likes_error": "Mit „Gefällt mir" markierte Pakete konnten nicht geladen werden.",
+    "likes_empty": "Noch keine mit „Gefällt mir" markierten Pakete."
   }
 }

From eaf0536790415ed700f18a560fa65267c02d7006 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Thu, 23 Apr 2026 20:27:58 +0530
Subject: [PATCH 07/28] fix: failed e2e test

---
 app/components/AccountItem.vue    |  8 ++---
 app/components/LinkedAccounts.vue | 49 ++++++++++++++++++++++++-------
 app/components/ProfileHeader.vue  |  4 +--
 i18n/locales/en.json              | 14 +++++++++
 i18n/schema.json                  | 42 ++++++++++++++++++++++++++
 5 files changed, 101 insertions(+), 16 deletions(-)

diff --git a/app/components/AccountItem.vue b/app/components/AccountItem.vue
index 5e151bbc83..6b747dac50 100644
--- a/app/components/AccountItem.vue
+++ b/app/components/AccountItem.vue
@@ -167,6 +167,9 @@ async function reverifyAccount() {
       body,
     })
 
+    // Attach rejection handler to prevent unhandled promise rejection warnings
+    responsePromise.catch(() => {})
+
     await runStep(0)
     await runStep(1)
     await runStep(2)
@@ -199,10 +202,7 @@ function getStepState(stepIndex: number): 'done' | 'active' | 'idle' {
     return 'done'
   }
 
-  if (
-    currentVerificationStep.value === stepIndex &&
-    (isReverifying.value || !!reverifyError.value)
-  ) {
+  if (currentVerificationStep.value === stepIndex && isReverifying.value && !reverifyError.value) {
     return 'active'
   }
 
diff --git a/app/components/LinkedAccounts.vue b/app/components/LinkedAccounts.vue
index 994be8d3d7..3d2165b2d8 100644
--- a/app/components/LinkedAccounts.vue
+++ b/app/components/LinkedAccounts.vue
@@ -1,12 +1,27 @@
 <script setup lang="ts">
 import type { KeytraceAccount } from '#shared/types/keytrace'
+import { useI18n } from 'vue-i18n'
 
-const statusLegend = [
-  { label: 'Verified', className: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30' },
-  { label: 'Unverified', className: 'bg-yellow-500/15 text-yellow-300 border-yellow-500/30' },
-  { label: 'Stale', className: 'bg-orange-500/15 text-orange-300 border-orange-500/30' },
-  { label: 'Failed', className: 'bg-red-500/15 text-red-300 border-red-500/30' },
-]
+const { t } = useI18n()
+
+const statusLegend = computed(() => [
+  {
+    label: t('profile.linked_accounts.status.verified'),
+    className: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30',
+  },
+  {
+    label: t('profile.linked_accounts.status.unverified'),
+    className: 'bg-yellow-500/15 text-yellow-300 border-yellow-500/30',
+  },
+  {
+    label: t('profile.linked_accounts.status.stale'),
+    className: 'bg-orange-500/15 text-orange-300 border-orange-500/30',
+  },
+  {
+    label: t('profile.linked_accounts.status.failed'),
+    className: 'bg-red-500/15 text-red-300 border-red-500/30',
+  },
+])
 
 const props = defineProps<{
   accounts: KeytraceAccount[]
@@ -21,11 +36,23 @@ const verifiedCount = computed(
 <template>
   <section class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6">
     <div class="flex flex-wrap items-center justify-between gap-3">
-      <h2 class="font-mono text-xl sm:text-2xl font-medium">Linked Accounts</h2>
-      <p class="text-sm text-fg-muted">{{ verifiedCount }}/{{ accounts.length }} verified</p>
+      <h2 class="font-mono text-xl sm:text-2xl font-medium">
+        {{ $t('profile.linked_accounts.title') }}
+      </h2>
+      <p class="text-sm text-fg-muted">
+        {{
+          $t('profile.linked_accounts.verified_summary', {
+            verified: verifiedCount,
+            total: accounts.length,
+          })
+        }}
+      </p>
     </div>
 
-    <div class="mt-3 flex flex-wrap gap-2" aria-label="Verification status legend">
+    <div
+      class="mt-3 flex flex-wrap gap-2"
+      :aria-label="$t('profile.linked_accounts.legend_aria_label')"
+    >
       <span
         v-for="item in statusLegend"
         :key="item.label"
@@ -40,7 +67,9 @@ const verifiedCount = computed(
       <SkeletonBlock v-for="index in 3" :key="index" class="h-20 rounded-md" />
     </div>
 
-    <p v-else-if="!accounts.length" class="mt-4 text-fg-muted">No linked accounts</p>
+    <p v-else-if="!accounts.length" class="mt-4 text-fg-muted">
+      {{ $t('profile.linked_accounts.empty') }}
+    </p>
 
     <ul v-else class="mt-4 space-y-2">
       <li v-for="account in accounts" :key="`${account.platform}-${account.username}`">
diff --git a/app/components/ProfileHeader.vue b/app/components/ProfileHeader.vue
index 921de318ed..39576f7059 100644
--- a/app/components/ProfileHeader.vue
+++ b/app/components/ProfileHeader.vue
@@ -53,7 +53,7 @@ function onAvatarError() {
         <img
           v-if="profile.avatar && showAvatar"
           :src="profile.avatar"
-          :alt="profile.name || 'Profile avatar'"
+          :alt="profile.name || $t('profile.avatar_alt')"
           class="h-full w-full object-cover"
           @error="onAvatarError"
         />
@@ -62,7 +62,7 @@ function onAvatarError() {
 
       <div class="min-w-0">
         <h2 class="font-mono text-xl sm:text-2xl font-medium min-w-0 break-words">
-          {{ profile.name || 'Unknown Profile' }}
+          {{ profile.name || $t('profile.unknown_profile') }}
         </h2>
         <p class="mt-2 text-fg-muted min-w-0 break-words">{{ profile.description }}</p>
       </div>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 924e5eaa74..facc4de7bf 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -365,6 +365,20 @@
       "message": "It doesn't look like they're using npmx yet. Want to tell them about it?",
       "share_button": "Share on 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"
+    },
+    "avatar_alt": "Profile avatar",
+    "unknown_profile": "Unknown profile",
+    "linked_accounts": {
+      "status": {
+        "verified": "Verified",
+        "unverified": "Unverified",
+        "stale": "Stale",
+        "failed": "Failed"
+      },
+      "title": "Linked Accounts",
+      "verified_summary": "Verified accounts",
+      "legend_aria_label": "Account verification status legend",
+      "empty": "No linked accounts"
     }
   },
   "package": {
diff --git a/i18n/schema.json b/i18n/schema.json
index a3505b4897..2999f84ca3 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1101,6 +1101,48 @@
             }
           },
           "additionalProperties": false
+        },
+        "avatar_alt": {
+          "type": "string"
+        },
+        "unknown_profile": {
+          "type": "string"
+        },
+        "linked_accounts": {
+          "type": "object",
+          "properties": {
+            "status": {
+              "type": "object",
+              "properties": {
+                "verified": {
+                  "type": "string"
+                },
+                "unverified": {
+                  "type": "string"
+                },
+                "stale": {
+                  "type": "string"
+                },
+                "failed": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            },
+            "title": {
+              "type": "string"
+            },
+            "verified_summary": {
+              "type": "string"
+            },
+            "legend_aria_label": {
+              "type": "string"
+            },
+            "empty": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
         }
       },
       "additionalProperties": false

From ad9e42820147c548ed7903d240cee1be8ce5443a Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Thu, 23 Apr 2026 20:45:31 +0530
Subject: [PATCH 08/28] fix: failed test

---
 app/components/LinkedAccounts.vue |  1 -
 i18n/locales/de-AT.json           | 18 ++++++++++++++++--
 i18n/locales/de-DE.json           | 16 +++++++++++++++-
 i18n/locales/de.json              | 16 +++++++++++++++-
 4 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/app/components/LinkedAccounts.vue b/app/components/LinkedAccounts.vue
index 3d2165b2d8..a015c843e3 100644
--- a/app/components/LinkedAccounts.vue
+++ b/app/components/LinkedAccounts.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { KeytraceAccount } from '#shared/types/keytrace'
-import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
diff --git a/i18n/locales/de-AT.json b/i18n/locales/de-AT.json
index 1e748e02cf..0c9a9790a7 100644
--- a/i18n/locales/de-AT.json
+++ b/i18n/locales/de-AT.json
@@ -24,7 +24,21 @@
   },
   "profile": {
     "public_interests_description": "Öffentliche Paketinteressen und Aktivitätssignale.",
-    "likes_error": "Mit „Gefällt mir" markierte Pakete konnten nicht geladen werden.",
-    "likes_empty": "Noch keine mit „Gefällt mir" markierten Pakete."
+    "likes_error": "Gelikte Pakete konnten nicht geladen werden.",
+    "likes_empty": "Noch keine gelikten Pakete.",
+    "avatar_alt": "Profilavatar",
+    "unknown_profile": "Unbekanntes Profil",
+    "linked_accounts": {
+      "status": {
+        "verified": "Verifiziert",
+        "unverified": "Nicht verifiziert",
+        "stale": "Veraltet",
+        "failed": "Fehlgeschlagen"
+      },
+      "title": "Verknüpfte Konten",
+      "verified_summary": "Verifizierte Konten",
+      "legend_aria_label": "Legende zum Verifizierungsstatus von Konten",
+      "empty": "Keine verknüpften Konten"
+    }
   }
 }
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index f439792e96..f952d62314 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -3,6 +3,20 @@
   "profile": {
     "public_interests_description": "Öffentliche Paketinteressen und Aktivitätssignale.",
     "likes_error": "Gelikte Pakete konnten nicht geladen werden.",
-    "likes_empty": "Noch keine gelikten Pakete."
+    "likes_empty": "Noch keine gelikten Pakete.",
+    "avatar_alt": "Profilavatar",
+    "unknown_profile": "Unbekanntes Profil",
+    "linked_accounts": {
+      "status": {
+        "verified": "Verifiziert",
+        "unverified": "Nicht verifiziert",
+        "stale": "Veraltet",
+        "failed": "Fehlgeschlagen"
+      },
+      "title": "Verknüpfte Konten",
+      "verified_summary": "Verifizierte Konten",
+      "legend_aria_label": "Legende zum Verifizierungsstatus von Konten",
+      "empty": "Keine verknüpften Konten"
+    }
   }
 }
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index e191cee94b..79c38e2bbd 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -360,7 +360,21 @@
     },
     "public_interests_description": "Öffentliche Paketinteressen und Aktivitätssignale.",
     "likes_error": "Gelikte Pakete konnten nicht geladen werden.",
-    "likes_empty": "Noch keine gelikten Pakete."
+    "likes_empty": "Noch keine gelikten Pakete.",
+    "avatar_alt": "Profilavatar",
+    "unknown_profile": "Unbekanntes Profil",
+    "linked_accounts": {
+      "status": {
+        "verified": "Verifiziert",
+        "unverified": "Nicht verifiziert",
+        "stale": "Veraltet",
+        "failed": "Fehlgeschlagen"
+      },
+      "title": "Verknüpfte Konten",
+      "verified_summary": "Verifizierte Konten",
+      "legend_aria_label": "Legende zum Verifizierungsstatus von Konten",
+      "empty": "Keine verknüpften Konten"
+    }
   },
   "package": {
     "not_found": "Paket nicht gefunden",

From bb5b2e91d2fe4d07ae46dd82566b96e336ad1e1a Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Fri, 24 Apr 2026 03:44:07 +0530
Subject: [PATCH 09/28] feat(keytrace): integrate real claims + reverify flow

---
 app/components/AccountItem.vue         |   2 +
 app/components/LinkedAccounts.vue      |   3 +-
 app/components/ProfileHeader.vue       |  11 +
 app/pages/profile/[identity]/index.vue |   6 +-
 package.json                           |   1 +
 pnpm-lock.yaml                         |   9 +
 server/api/keytrace/[domain].ts        | 292 ++++++++++++++++---------
 server/api/keytrace/reverify.post.ts   | 111 ++++++++--
 shared/types/keytrace.ts               |  69 +++---
 9 files changed, 353 insertions(+), 151 deletions(-)

diff --git a/app/components/AccountItem.vue b/app/components/AccountItem.vue
index 6b747dac50..2c4bcb204c 100644
--- a/app/components/AccountItem.vue
+++ b/app/components/AccountItem.vue
@@ -7,6 +7,7 @@ import type {
 } from '#shared/types/keytrace'
 
 const props = defineProps<{
+  identity: string
   account: KeytraceAccount
 }>()
 
@@ -157,6 +158,7 @@ async function reverifyAccount() {
 
   try {
     const body: KeytraceReverifyRequest = {
+      identity: props.identity,
       platform: props.account.platform,
       username: props.account.username,
       url: props.account.url,
diff --git a/app/components/LinkedAccounts.vue b/app/components/LinkedAccounts.vue
index a015c843e3..6bc36c035e 100644
--- a/app/components/LinkedAccounts.vue
+++ b/app/components/LinkedAccounts.vue
@@ -23,6 +23,7 @@ const statusLegend = computed(() => [
 ])
 
 const props = defineProps<{
+  identity: string
   accounts: KeytraceAccount[]
   loading?: boolean
 }>()
@@ -72,7 +73,7 @@ const verifiedCount = computed(
 
     <ul v-else class="mt-4 space-y-2">
       <li v-for="account in accounts" :key="`${account.platform}-${account.username}`">
-        <AccountItem :account="account" />
+        <AccountItem :account="account" :identity="identity" />
       </li>
     </ul>
   </section>
diff --git a/app/components/ProfileHeader.vue b/app/components/ProfileHeader.vue
index 39576f7059..2e1200e64b 100644
--- a/app/components/ProfileHeader.vue
+++ b/app/components/ProfileHeader.vue
@@ -38,6 +38,17 @@ function onAvatarError() {
 
 <template>
   <section class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6">
+    <div
+      v-if="!loading && profile?.banner"
+      class="-m-4 sm:-m-6 mb-4 sm:mb-6 h-28 sm:h-36 overflow-hidden rounded-t-lg border-b border-border"
+    >
+      <img
+        :src="profile.banner"
+        :alt="profile.name || $t('profile.unknown_profile')"
+        class="h-full w-full object-cover"
+      />
+    </div>
+
     <div v-if="loading" class="flex items-center gap-4">
       <SkeletonBlock class="h-16 w-16 rounded-full" />
       <div class="flex-1 space-y-2">
diff --git a/app/pages/profile/[identity]/index.vue b/app/pages/profile/[identity]/index.vue
index 284a70e76a..c5f48a1ef0 100644
--- a/app/pages/profile/[identity]/index.vue
+++ b/app/pages/profile/[identity]/index.vue
@@ -241,7 +241,11 @@ defineOgImage(
 
     <section class="mb-8 space-y-4">
       <ProfileHeader :profile="keytraceProfile" :loading="keytraceLoading" />
-      <LinkedAccounts :accounts="keytraceAccounts" :loading="keytraceLoading" />
+      <LinkedAccounts
+        :identity="identity"
+        :accounts="keytraceAccounts"
+        :loading="keytraceLoading"
+      />
     </section>
 
     <section class="flex flex-col gap-8">
diff --git a/package.json b/package.json
index a69d2bd921..019d5f6c3f 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "@iconify-json/svg-spinners": "1.2.4",
     "@iconify-json/vscode-icons": "1.2.45",
     "@intlify/shared": "11.3.0",
+    "@keytrace/claims": "1.4.0",
     "@lunariajs/core": "https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@904b935",
     "@napi-rs/canvas": "0.1.97",
     "@nuxt/a11y": "1.0.0-alpha.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 673b6bcedb..17c743729e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
       '@intlify/shared':
         specifier: 11.3.0
         version: 11.3.0
+      '@keytrace/claims':
+        specifier: 1.4.0
+        version: 1.4.0
       '@lunariajs/core':
         specifier: https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@904b935
         version: https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@904b935
@@ -2091,6 +2094,10 @@ packages:
   '@jsr/std__path@1.1.4':
     resolution: {integrity: sha512-SK4u9H6NVTfolhPdlvdYXfNFefy1W04AEHWJydryYbk+xqzNiVmr5o7TLJLJFqwHXuwMRhwrn+mcYeUfS0YFaA==, tarball: https://npm.jsr.io/~/11/@jsr/std__path/1.1.4.tgz}
 
+  '@keytrace/claims@1.4.0':
+    resolution: {integrity: sha512-XeojwXFFnvhPsDI7f99e2KCvk8gDC5ztKxRBplB+Zx5OmfcaBovX+DZJODZsxz3b1r4ZITBDOjZD8gftgpAZyw==}
+    engines: {node: '>=18'}
+
   '@kwsites/file-exists@1.1.1':
     resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
 
@@ -13325,6 +13332,8 @@ snapshots:
     dependencies:
       '@jsr/std__internal': 1.0.12
 
+  '@keytrace/claims@1.4.0': {}
+
   '@kwsites/file-exists@1.1.1':
     dependencies:
       debug: 4.4.3
diff --git a/server/api/keytrace/[domain].ts b/server/api/keytrace/[domain].ts
index 2b2e20e478..3733504e31 100644
--- a/server/api/keytrace/[domain].ts
+++ b/server/api/keytrace/[domain].ts
@@ -1,122 +1,210 @@
-import type { KeytraceResponse } from '#shared/types/keytrace'
+import {
+  getClaimsForHandle,
+  type ClaimVerificationResult,
+} from "@keytrace/claims";
+import type {
+  KeytraceProofMethod,
+  KeytraceResponse,
+} from "#shared/types/keytrace";
 
-const MOCK_KEYTRACE_PROFILES: Record<string, KeytraceResponse> = {
-  'npmx.dev': {
-    profile: {
-      name: 'npmx Team',
-      avatar: 'https://api.dicebear.com/9.x/shapes/svg?seed=npmx',
-      banner:
-        'https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=1400&q=80',
-      description: 'Open source developers building better tooling around package discovery.',
-    },
-    accounts: [
-      {
-        platform: 'github',
-        username: 'npmx-dev',
-        displayName: 'npmx-dev',
-        avatar: 'https://avatars.githubusercontent.com/u/178563400?v=4',
-        url: 'https://github.com/npmx-dev',
-        status: 'verified',
-        proofMethod: 'github',
-        addedAt: '2026-03-10T12:00:00.000Z',
-        lastCheckedAt: '2026-04-20T09:30:00.000Z',
-      },
-      {
-        platform: 'npm',
-        username: 'npmx',
-        displayName: 'npmx',
-        avatar: 'https://api.dicebear.com/9.x/identicon/svg?seed=npmx',
-        url: 'https://www.npmjs.com/~npmx',
-        status: 'stale',
-        proofMethod: 'npm',
-        addedAt: '2026-02-18T15:20:00.000Z',
-        lastCheckedAt: '2026-03-05T08:00:00.000Z',
-        failureReason: 'Proof has not been re-verified recently.',
-      },
-      {
-        platform: 'mastodon',
-        username: '@npmx@fosstodon.org',
-        displayName: 'npmx',
-        avatar: 'https://api.dicebear.com/9.x/identicon/svg?seed=fosstodon-npmx',
-        url: 'https://fosstodon.org/@npmx',
-        status: 'failed',
-        proofMethod: 'mastodon',
-        addedAt: '2026-01-22T11:40:00.000Z',
-        lastCheckedAt: '2026-04-19T22:15:00.000Z',
-        failureReason: 'Linked proof URL could not be resolved during verification.',
-      },
-    ],
-  },
-  'empty.dev': {
+function domainToDisplayName(domain: string): string {
+  const firstSegment = domain.split(".")[0] || domain;
+  return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1);
+}
+
+function buildFallbackProfile(domain: string): KeytraceResponse {
+  return {
     profile: {
-      name: 'Empty Developer',
-      avatar: 'https://api.dicebear.com/9.x/initials/svg?seed=empty.dev',
-      description: 'A profile with no linked accounts yet.',
+      name: `${domainToDisplayName(domain)} Developer`,
+      avatar: `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`,
+      description: `No Keytrace claims found for ${domain}.`,
     },
     accounts: [],
-  },
-}
-
-function domainToDisplayName(domain: string): string {
-  const firstSegment = domain.split('.')[0] || domain
-  return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1)
+  };
 }
 
-function buildFallbackProfile(domain: string): KeytraceResponse {
+function buildServiceUnavailableProfile(domain: string): KeytraceResponse {
   return {
     profile: {
       name: `${domainToDisplayName(domain)} Developer`,
       avatar: `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`,
-      description: `Mock identity profile for ${domain}.`,
+      description:
+        "Keytrace is temporarily unavailable. Please try again shortly.",
     },
-    accounts: [
-      {
-        platform: 'github',
-        username: domain,
-        displayName: domain,
-        avatar: `https://api.dicebear.com/9.x/identicon/svg?seed=github-${encodeURIComponent(domain)}`,
-        url: `https://github.com/${domain}`,
-        status: 'verified',
-        proofMethod: 'github',
-        addedAt: '2026-04-01T10:00:00.000Z',
-        lastCheckedAt: '2026-04-21T10:00:00.000Z',
-      },
-      {
-        platform: 'npm',
-        username: domain,
-        displayName: domain,
-        avatar: `https://api.dicebear.com/9.x/identicon/svg?seed=npm-${encodeURIComponent(domain)}`,
-        url: `https://www.npmjs.com/~${domain}`,
-        status: 'unverified',
-        proofMethod: 'npm',
-        addedAt: '2026-04-01T10:00:00.000Z',
-        lastCheckedAt: '2026-04-01T10:00:00.000Z',
-        failureReason: 'Proof exists but has not been verified yet.',
-      },
-      {
-        platform: 'mastodon',
-        username: `@${domain}@mastodon.social`,
-        displayName: domain,
-        avatar: `https://api.dicebear.com/9.x/identicon/svg?seed=mastodon-${encodeURIComponent(domain)}`,
-        url: `https://mastodon.social/@${encodeURIComponent(domain)}`,
-        status: 'stale',
-        proofMethod: 'mastodon',
-        addedAt: '2026-04-01T10:00:00.000Z',
-        lastCheckedAt: '2026-04-08T10:00:00.000Z',
-        failureReason: 'Verification check is out of date.',
+    accounts: [],
+  };
+}
+
+// Map Keytrace claim types to our platform names
+function mapPlatformType(type: string): string {
+  const platformMap: Record<string, string> = {
+    github: "github",
+    dns: "dns",
+    activitypub: "mastodon",
+    bsky: "bluesky",
+    npm: "npm",
+    tangled: "tangled",
+    pgp: "pgp",
+    twitter: "twitter",
+    linkedin: "linkedin",
+    instagram: "instagram",
+    reddit: "reddit",
+    hackernews: "hackernews",
+    orcid: "orcid",
+    itchio: "itchio",
+    discord: "discord",
+    steam: "steam",
+  };
+  return platformMap[type] || type;
+}
+
+const allowedProofMethods = new Set<KeytraceProofMethod>([
+  "dns",
+  "github",
+  "npm",
+  "mastodon",
+  "pgp",
+  "other",
+]);
+
+function mapProofMethod(type: string): KeytraceProofMethod {
+  const mappedType = mapPlatformType(type);
+  return allowedProofMethods.has(mappedType as KeytraceProofMethod)
+    ? (mappedType as KeytraceProofMethod)
+    : "other";
+}
+
+const STALE_THRESHOLD_DAYS = 30;
+
+function getOptionalClaimField(
+  claim: ClaimVerificationResult,
+  key: string,
+): string | undefined {
+  const rawClaim = claim.claim as unknown as Record<string, unknown>;
+  const value = rawClaim[key];
+  return typeof value === "string" ? value : undefined;
+}
+
+function isStaleIsoDate(isoDate: string | undefined): boolean {
+  if (!isoDate) {
+    return false;
+  }
+
+  const timestamp = Date.parse(isoDate);
+  if (Number.isNaN(timestamp)) {
+    return false;
+  }
+
+  return Date.now() - timestamp > STALE_THRESHOLD_DAYS * 24 * 60 * 60 * 1000;
+}
+
+function mapVerificationStatus(
+  claim: ClaimVerificationResult,
+): "verified" | "unverified" | "stale" | "failed" {
+  const rawStatus = getOptionalClaimField(claim, "status");
+  const lastVerifiedAt = getOptionalClaimField(claim, "lastVerifiedAt");
+
+  if (rawStatus === "failed" || rawStatus === "retracted") {
+    return "failed";
+  }
+
+  if (rawStatus === "verified") {
+    return isStaleIsoDate(lastVerifiedAt) ? "stale" : "verified";
+  }
+
+  if (claim.error) {
+    return "failed";
+  }
+
+  if (claim.verified) {
+    return isStaleIsoDate(lastVerifiedAt) ? "stale" : "verified";
+  }
+
+  return "unverified";
+}
+
+// Convert Keytrace claims to our account format
+function mapClaimsToAccounts(
+  claims: ClaimVerificationResult[],
+): KeytraceResponse["accounts"] {
+  return claims.map((claim) => ({
+    platform: mapPlatformType(claim.type),
+    username: claim.identity.subject,
+    displayName: claim.identity.displayName || claim.identity.subject,
+    avatar: claim.identity.avatarUrl || undefined,
+    url: claim.identity.profileUrl || undefined,
+    status: mapVerificationStatus(claim),
+    proofMethod: mapProofMethod(claim.type),
+    addedAt: claim.claim.createdAt,
+    lastCheckedAt:
+      getOptionalClaimField(claim, "lastVerifiedAt") ||
+      claim.claim.retractedAt ||
+      claim.claim.createdAt,
+    failureReason: claim.error || undefined,
+  }));
+}
+
+type KeytraceFetchResult =
+  | { kind: "success"; data: KeytraceResponse }
+  | { kind: "no-claims" }
+  | { kind: "error"; error: unknown };
+
+// Fetch real Keytrace profile data
+async function fetchKeytraceProfile(
+  domain: string,
+): Promise<KeytraceFetchResult> {
+  try {
+    const result = await getClaimsForHandle(domain);
+
+    if (!result.claims || result.claims.length === 0) {
+      return { kind: "no-claims" };
+    }
+
+    // Build profile from first claim's identity (they all belong to the same DID)
+    const firstClaim = result.claims[0];
+    if (!firstClaim) {
+      return { kind: "no-claims" };
+    }
+
+    return {
+      kind: "success",
+      data: {
+        profile: {
+          name: firstClaim.identity.displayName || domainToDisplayName(domain),
+          avatar:
+            firstClaim.identity.avatarUrl ||
+            `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`,
+          description: `Identity profile for ${domain}`,
+        },
+        accounts: mapClaimsToAccounts(result.claims),
       },
-    ],
+    };
+  } catch (error) {
+    console.error("Failed to fetch Keytrace profile:", error);
+    return { kind: "error", error };
   }
 }
 
-export default defineEventHandler(event => {
-  const domain = getRouterParam(event, 'domain')?.trim().toLowerCase()
+export default defineEventHandler(async (event) => {
+  const domain = getRouterParam(event, "domain")?.trim().toLowerCase();
   if (!domain) {
     throw createError({
       statusCode: 400,
-      message: 'Domain is required',
-    })
+      message: "Domain is required",
+    });
+  }
+
+  // Try to fetch real Keytrace data
+  const keytraceData = await fetchKeytraceProfile(domain);
+
+  if (keytraceData.kind === "success") {
+    return keytraceData.data;
+  }
+
+  if (keytraceData.kind === "no-claims") {
+    return buildFallbackProfile(domain);
   }
 
-  return MOCK_KEYTRACE_PROFILES[domain] ?? buildFallbackProfile(domain)
-})
+  // If Keytrace is unavailable and mock mode isn't allowed, return a neutral profile.
+  return buildServiceUnavailableProfile(domain);
+});
diff --git a/server/api/keytrace/reverify.post.ts b/server/api/keytrace/reverify.post.ts
index a85341aa16..f511050edb 100644
--- a/server/api/keytrace/reverify.post.ts
+++ b/server/api/keytrace/reverify.post.ts
@@ -1,27 +1,102 @@
-import type { KeytraceReverifyRequest, KeytraceReverifyResponse } from '#shared/types/keytrace'
+import {
+  getClaimsForHandle,
+  type ClaimVerificationResult,
+} from "@keytrace/claims";
+import type {
+  KeytraceReverifyRequest,
+  KeytraceReverifyResponse,
+} from "#shared/types/keytrace";
 
-export default defineEventHandler(async event => {
-  const body = await readBody<KeytraceReverifyRequest>(event)
+function mapPlatformToClaimType(platform: string): string {
+  if (platform === "mastodon") {
+    return "activitypub";
+  }
+  return platform;
+}
 
-  const platform = body?.platform?.trim().toLowerCase()
-  const username = body?.username?.trim()
+function getOptionalClaimField(
+  claim: ClaimVerificationResult,
+  key: string,
+): string | undefined {
+  const rawClaim = claim.claim as unknown as Record<string, unknown>;
+  const value = rawClaim[key];
+  return typeof value === "string" ? value : undefined;
+}
 
-  if (!platform || !username) {
+function mapReverifyStatus(
+  claim: ClaimVerificationResult,
+): KeytraceReverifyResponse["status"] {
+  const rawStatus = getOptionalClaimField(claim, "status");
+  if (rawStatus === "failed" || rawStatus === "retracted" || claim.error) {
+    return "failed";
+  }
+  if (rawStatus === "verified" || claim.verified) {
+    return "verified";
+  }
+  return "unverified";
+}
+
+function matchesAccount(
+  claim: ClaimVerificationResult,
+  claimType: string,
+  username: string,
+  url?: string,
+): boolean {
+  if (claim.type !== claimType) {
+    return false;
+  }
+
+  const normalizedSubject = claim.identity.subject.toLowerCase();
+  const normalizedUsername = username.toLowerCase();
+  if (normalizedSubject === normalizedUsername) {
+    return true;
+  }
+
+  const profileUrl = (claim.identity.profileUrl || "").toLowerCase();
+  const normalizedUrl = (url || "").toLowerCase();
+  if (normalizedUrl && profileUrl && profileUrl === normalizedUrl) {
+    return true;
+  }
+
+  return false;
+}
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody<KeytraceReverifyRequest>(event);
+
+  const identity = body?.identity?.trim().toLowerCase();
+  const platform = body?.platform?.trim().toLowerCase();
+  const username = body?.username?.trim();
+
+  if (!identity || !platform || !username) {
     throw createError({
       statusCode: 400,
-      message: 'platform and username are required',
-    })
+      message: "identity, platform and username are required",
+    });
   }
 
-  const lastCheckedAt = new Date().toISOString()
+  const result = await getClaimsForHandle(identity);
+  const claimType = mapPlatformToClaimType(platform);
+  const matchedClaim = result.claims.find((claim) =>
+    matchesAccount(claim, claimType, username, body?.url),
+  );
 
-  // TODO: Implement per-platform proof verification for KeytraceReverifyResponse
-  // construction here (including mastodon and npm short-username logic), ideally
-  // via a verifyProofForPlatform(platform, username, proofData) helper.
-  const response: KeytraceReverifyResponse = {
-    status: 'unverified',
-    lastCheckedAt,
-    failureReason: 'Proof verification is not implemented yet.',
+  if (!matchedClaim) {
+    return {
+      status: "unverified",
+      lastCheckedAt: new Date().toISOString(),
+      failureReason: "No matching Keytrace claim found for this account.",
+    };
   }
-  return response
-})
+
+  const response: KeytraceReverifyResponse = {
+    status: mapReverifyStatus(matchedClaim),
+    lastCheckedAt:
+      getOptionalClaimField(matchedClaim, "lastVerifiedAt") ||
+      matchedClaim.claim.retractedAt ||
+      matchedClaim.claim.createdAt,
+    failureReason: matchedClaim.error || undefined,
+  };
+
+  return response;
+});
diff --git a/shared/types/keytrace.ts b/shared/types/keytrace.ts
index 2219e732ad..67f5c18a80 100644
--- a/shared/types/keytrace.ts
+++ b/shared/types/keytrace.ts
@@ -1,40 +1,51 @@
 export type KeytraceProfile = {
-  name: string
-  avatar: string
-  banner?: string
-  description: string
-}
+  name: string;
+  avatar: string;
+  banner?: string;
+  description: string;
+};
 
-export type KeytraceVerificationStatus = 'verified' | 'unverified' | 'stale' | 'failed'
+export type KeytraceVerificationStatus =
+  | "verified"
+  | "unverified"
+  | "stale"
+  | "failed";
 
-export type KeytraceProofMethod = 'dns' | 'github' | 'npm' | 'mastodon' | 'pgp' | 'other'
+export type KeytraceProofMethod =
+  | "dns"
+  | "github"
+  | "npm"
+  | "mastodon"
+  | "pgp"
+  | "other";
 
 export type KeytraceAccount = {
-  platform: string
-  username: string
-  displayName?: string
-  avatar?: string
-  url?: string
-  status: KeytraceVerificationStatus
-  proofMethod: KeytraceProofMethod
-  addedAt: string
-  lastCheckedAt: string
-  failureReason?: string
-}
+  platform: string;
+  username: string;
+  displayName?: string;
+  avatar?: string;
+  url?: string;
+  status: KeytraceVerificationStatus;
+  proofMethod: KeytraceProofMethod;
+  addedAt: string;
+  lastCheckedAt: string;
+  failureReason?: string;
+};
 
 export type KeytraceResponse = {
-  profile: KeytraceProfile
-  accounts: KeytraceAccount[]
-}
+  profile: KeytraceProfile;
+  accounts: KeytraceAccount[];
+};
 
 export type KeytraceReverifyRequest = {
-  platform: string
-  username: string
-  url?: string
-}
+  identity: string;
+  platform: string;
+  username: string;
+  url?: string;
+};
 
 export type KeytraceReverifyResponse = {
-  status: KeytraceVerificationStatus
-  lastCheckedAt: string
-  failureReason?: string
-}
+  status: KeytraceVerificationStatus;
+  lastCheckedAt: string;
+  failureReason?: string;
+};

From 0fbd549cbb4f6e9bcccdd35b1d9a3c514d909a32 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Fri, 24 Apr 2026 03:44:40 +0530
Subject: [PATCH 10/28] refactor: standardize code formatting and improve
 readability across keytrace files

Co-authored-by: Copilot <copilot@github.com>
---
 server/api/keytrace/[domain].ts      | 174 ++++++++++++---------------
 server/api/keytrace/reverify.post.ts |  95 +++++++--------
 shared/types/keytrace.ts             |  70 +++++------
 3 files changed, 152 insertions(+), 187 deletions(-)

diff --git a/server/api/keytrace/[domain].ts b/server/api/keytrace/[domain].ts
index 3733504e31..e35bda0d59 100644
--- a/server/api/keytrace/[domain].ts
+++ b/server/api/keytrace/[domain].ts
@@ -1,15 +1,9 @@
-import {
-  getClaimsForHandle,
-  type ClaimVerificationResult,
-} from "@keytrace/claims";
-import type {
-  KeytraceProofMethod,
-  KeytraceResponse,
-} from "#shared/types/keytrace";
+import { getClaimsForHandle, type ClaimVerificationResult } from '@keytrace/claims'
+import type { KeytraceProofMethod, KeytraceResponse } from '#shared/types/keytrace'
 
 function domainToDisplayName(domain: string): string {
-  const firstSegment = domain.split(".")[0] || domain;
-  return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1);
+  const firstSegment = domain.split('.')[0] || domain
+  return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1)
 }
 
 function buildFallbackProfile(domain: string): KeytraceResponse {
@@ -20,7 +14,7 @@ function buildFallbackProfile(domain: string): KeytraceResponse {
       description: `No Keytrace claims found for ${domain}.`,
     },
     accounts: [],
-  };
+  }
 }
 
 function buildServiceUnavailableProfile(domain: string): KeytraceResponse {
@@ -28,106 +22,100 @@ function buildServiceUnavailableProfile(domain: string): KeytraceResponse {
     profile: {
       name: `${domainToDisplayName(domain)} Developer`,
       avatar: `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`,
-      description:
-        "Keytrace is temporarily unavailable. Please try again shortly.",
+      description: 'Keytrace is temporarily unavailable. Please try again shortly.',
     },
     accounts: [],
-  };
+  }
 }
 
 // Map Keytrace claim types to our platform names
 function mapPlatformType(type: string): string {
   const platformMap: Record<string, string> = {
-    github: "github",
-    dns: "dns",
-    activitypub: "mastodon",
-    bsky: "bluesky",
-    npm: "npm",
-    tangled: "tangled",
-    pgp: "pgp",
-    twitter: "twitter",
-    linkedin: "linkedin",
-    instagram: "instagram",
-    reddit: "reddit",
-    hackernews: "hackernews",
-    orcid: "orcid",
-    itchio: "itchio",
-    discord: "discord",
-    steam: "steam",
-  };
-  return platformMap[type] || type;
+    github: 'github',
+    dns: 'dns',
+    activitypub: 'mastodon',
+    bsky: 'bluesky',
+    npm: 'npm',
+    tangled: 'tangled',
+    pgp: 'pgp',
+    twitter: 'twitter',
+    linkedin: 'linkedin',
+    instagram: 'instagram',
+    reddit: 'reddit',
+    hackernews: 'hackernews',
+    orcid: 'orcid',
+    itchio: 'itchio',
+    discord: 'discord',
+    steam: 'steam',
+  }
+  return platformMap[type] || type
 }
 
 const allowedProofMethods = new Set<KeytraceProofMethod>([
-  "dns",
-  "github",
-  "npm",
-  "mastodon",
-  "pgp",
-  "other",
-]);
+  'dns',
+  'github',
+  'npm',
+  'mastodon',
+  'pgp',
+  'other',
+])
 
 function mapProofMethod(type: string): KeytraceProofMethod {
-  const mappedType = mapPlatformType(type);
+  const mappedType = mapPlatformType(type)
   return allowedProofMethods.has(mappedType as KeytraceProofMethod)
     ? (mappedType as KeytraceProofMethod)
-    : "other";
+    : 'other'
 }
 
-const STALE_THRESHOLD_DAYS = 30;
+const STALE_THRESHOLD_DAYS = 30
 
-function getOptionalClaimField(
-  claim: ClaimVerificationResult,
-  key: string,
-): string | undefined {
-  const rawClaim = claim.claim as unknown as Record<string, unknown>;
-  const value = rawClaim[key];
-  return typeof value === "string" ? value : undefined;
+function getOptionalClaimField(claim: ClaimVerificationResult, key: string): string | undefined {
+  const rawClaim = claim.claim as unknown as Record<string, unknown>
+  const value = rawClaim[key]
+  return typeof value === 'string' ? value : undefined
 }
 
 function isStaleIsoDate(isoDate: string | undefined): boolean {
   if (!isoDate) {
-    return false;
+    return false
   }
 
-  const timestamp = Date.parse(isoDate);
+  const timestamp = Date.parse(isoDate)
   if (Number.isNaN(timestamp)) {
-    return false;
+    return false
   }
 
-  return Date.now() - timestamp > STALE_THRESHOLD_DAYS * 24 * 60 * 60 * 1000;
+  return Date.now() - timestamp > STALE_THRESHOLD_DAYS * 24 * 60 * 60 * 1000
 }
 
 function mapVerificationStatus(
   claim: ClaimVerificationResult,
-): "verified" | "unverified" | "stale" | "failed" {
-  const rawStatus = getOptionalClaimField(claim, "status");
-  const lastVerifiedAt = getOptionalClaimField(claim, "lastVerifiedAt");
+): 'verified' | 'unverified' | 'stale' | 'failed' {
+  const rawStatus = getOptionalClaimField(claim, 'status')
+  const lastVerifiedAt = getOptionalClaimField(claim, 'lastVerifiedAt')
 
-  if (rawStatus === "failed" || rawStatus === "retracted") {
-    return "failed";
+  if (rawStatus === 'failed' || rawStatus === 'retracted') {
+    return 'failed'
   }
 
-  if (rawStatus === "verified") {
-    return isStaleIsoDate(lastVerifiedAt) ? "stale" : "verified";
+  if (rawStatus === 'verified') {
+    return isStaleIsoDate(lastVerifiedAt) ? 'stale' : 'verified'
   }
 
   if (claim.error) {
-    return "failed";
+    return 'failed'
   }
 
   if (claim.verified) {
-    return isStaleIsoDate(lastVerifiedAt) ? "stale" : "verified";
+    return isStaleIsoDate(lastVerifiedAt) ? 'stale' : 'verified'
   }
 
-  return "unverified";
+  return 'unverified'
 }
 
 // Convert Keytrace claims to our account format
-function mapClaimsToAccounts(
-  claims: ClaimVerificationResult[],
-): KeytraceResponse["accounts"] {
-  return claims.map((claim) => ({
+function mapClaimsToAccounts(claims: ClaimVerificationResult[]): KeytraceResponse['accounts'] {
+  return claims.map(claim => ({
     platform: mapPlatformType(claim.type),
     username: claim.identity.subject,
     displayName: claim.identity.displayName || claim.identity.subject,
@@ -137,37 +125,35 @@ function mapClaimsToAccounts(
     proofMethod: mapProofMethod(claim.type),
     addedAt: claim.claim.createdAt,
     lastCheckedAt:
-      getOptionalClaimField(claim, "lastVerifiedAt") ||
+      getOptionalClaimField(claim, 'lastVerifiedAt') ||
       claim.claim.retractedAt ||
       claim.claim.createdAt,
     failureReason: claim.error || undefined,
-  }));
+  }))
 }
 
 type KeytraceFetchResult =
-  | { kind: "success"; data: KeytraceResponse }
-  | { kind: "no-claims" }
-  | { kind: "error"; error: unknown };
+  | { kind: 'success'; data: KeytraceResponse }
+  | { kind: 'no-claims' }
+  | { kind: 'error'; error: unknown }
 
 // Fetch real Keytrace profile data
-async function fetchKeytraceProfile(
-  domain: string,
-): Promise<KeytraceFetchResult> {
+async function fetchKeytraceProfile(domain: string): Promise<KeytraceFetchResult> {
   try {
-    const result = await getClaimsForHandle(domain);
+    const result = await getClaimsForHandle(domain)
 
     if (!result.claims || result.claims.length === 0) {
-      return { kind: "no-claims" };
+      return { kind: 'no-claims' }
     }
 
     // Build profile from first claim's identity (they all belong to the same DID)
-    const firstClaim = result.claims[0];
+    const firstClaim = result.claims[0]
     if (!firstClaim) {
-      return { kind: "no-claims" };
+      return { kind: 'no-claims' }
     }
 
     return {
-      kind: "success",
+      kind: 'success',
       data: {
         profile: {
           name: firstClaim.identity.displayName || domainToDisplayName(domain),
@@ -178,33 +164,33 @@ async function fetchKeytraceProfile(
         },
         accounts: mapClaimsToAccounts(result.claims),
       },
-    };
+    }
   } catch (error) {
-    console.error("Failed to fetch Keytrace profile:", error);
-    return { kind: "error", error };
+    console.error('Failed to fetch Keytrace profile:', error)
+    return { kind: 'error', error }
   }
 }
 
-export default defineEventHandler(async (event) => {
-  const domain = getRouterParam(event, "domain")?.trim().toLowerCase();
+export default defineEventHandler(async event => {
+  const domain = getRouterParam(event, 'domain')?.trim().toLowerCase()
   if (!domain) {
     throw createError({
       statusCode: 400,
-      message: "Domain is required",
-    });
+      message: 'Domain is required',
+    })
   }
 
   // Try to fetch real Keytrace data
-  const keytraceData = await fetchKeytraceProfile(domain);
+  const keytraceData = await fetchKeytraceProfile(domain)
 
-  if (keytraceData.kind === "success") {
-    return keytraceData.data;
+  if (keytraceData.kind === 'success') {
+    return keytraceData.data
   }
 
-  if (keytraceData.kind === "no-claims") {
-    return buildFallbackProfile(domain);
+  if (keytraceData.kind === 'no-claims') {
+    return buildFallbackProfile(domain)
   }
 
   // If Keytrace is unavailable and mock mode isn't allowed, return a neutral profile.
-  return buildServiceUnavailableProfile(domain);
-});
+  return buildServiceUnavailableProfile(domain)
+})
diff --git a/server/api/keytrace/reverify.post.ts b/server/api/keytrace/reverify.post.ts
index f511050edb..fe2d4eb3cd 100644
--- a/server/api/keytrace/reverify.post.ts
+++ b/server/api/keytrace/reverify.post.ts
@@ -1,39 +1,28 @@
-import {
-  getClaimsForHandle,
-  type ClaimVerificationResult,
-} from "@keytrace/claims";
-import type {
-  KeytraceReverifyRequest,
-  KeytraceReverifyResponse,
-} from "#shared/types/keytrace";
+import { getClaimsForHandle, type ClaimVerificationResult } from '@keytrace/claims'
+import type { KeytraceReverifyRequest, KeytraceReverifyResponse } from '#shared/types/keytrace'
 
 function mapPlatformToClaimType(platform: string): string {
-  if (platform === "mastodon") {
-    return "activitypub";
+  if (platform === 'mastodon') {
+    return 'activitypub'
   }
-  return platform;
+  return platform
 }
 
-function getOptionalClaimField(
-  claim: ClaimVerificationResult,
-  key: string,
-): string | undefined {
-  const rawClaim = claim.claim as unknown as Record<string, unknown>;
-  const value = rawClaim[key];
-  return typeof value === "string" ? value : undefined;
+function getOptionalClaimField(claim: ClaimVerificationResult, key: string): string | undefined {
+  const rawClaim = claim.claim as unknown as Record<string, unknown>
+  const value = rawClaim[key]
+  return typeof value === 'string' ? value : undefined
 }
 
-function mapReverifyStatus(
-  claim: ClaimVerificationResult,
-): KeytraceReverifyResponse["status"] {
-  const rawStatus = getOptionalClaimField(claim, "status");
-  if (rawStatus === "failed" || rawStatus === "retracted" || claim.error) {
-    return "failed";
+function mapReverifyStatus(claim: ClaimVerificationResult): KeytraceReverifyResponse['status'] {
+  const rawStatus = getOptionalClaimField(claim, 'status')
+  if (rawStatus === 'failed' || rawStatus === 'retracted' || claim.error) {
+    return 'failed'
   }
-  if (rawStatus === "verified" || claim.verified) {
-    return "verified";
+  if (rawStatus === 'verified' || claim.verified) {
+    return 'verified'
   }
-  return "unverified";
+  return 'unverified'
 }
 
 function matchesAccount(
@@ -43,60 +32,60 @@ function matchesAccount(
   url?: string,
 ): boolean {
   if (claim.type !== claimType) {
-    return false;
+    return false
   }
 
-  const normalizedSubject = claim.identity.subject.toLowerCase();
-  const normalizedUsername = username.toLowerCase();
+  const normalizedSubject = claim.identity.subject.toLowerCase()
+  const normalizedUsername = username.toLowerCase()
   if (normalizedSubject === normalizedUsername) {
-    return true;
+    return true
   }
 
-  const profileUrl = (claim.identity.profileUrl || "").toLowerCase();
-  const normalizedUrl = (url || "").toLowerCase();
+  const profileUrl = (claim.identity.profileUrl || '').toLowerCase()
+  const normalizedUrl = (url || '').toLowerCase()
   if (normalizedUrl && profileUrl && profileUrl === normalizedUrl) {
-    return true;
+    return true
   }
 
-  return false;
+  return false
 }
 
-export default defineEventHandler(async (event) => {
-  const body = await readBody<KeytraceReverifyRequest>(event);
+export default defineEventHandler(async event => {
+  const body = await readBody<KeytraceReverifyRequest>(event)
 
-  const identity = body?.identity?.trim().toLowerCase();
-  const platform = body?.platform?.trim().toLowerCase();
-  const username = body?.username?.trim();
+  const identity = body?.identity?.trim().toLowerCase()
+  const platform = body?.platform?.trim().toLowerCase()
+  const username = body?.username?.trim()
 
   if (!identity || !platform || !username) {
     throw createError({
       statusCode: 400,
-      message: "identity, platform and username are required",
-    });
+      message: 'identity, platform and username are required',
+    })
   }
 
-  const result = await getClaimsForHandle(identity);
-  const claimType = mapPlatformToClaimType(platform);
-  const matchedClaim = result.claims.find((claim) =>
+  const result = await getClaimsForHandle(identity)
+  const claimType = mapPlatformToClaimType(platform)
+  const matchedClaim = result.claims.find(claim =>
     matchesAccount(claim, claimType, username, body?.url),
-  );
+  )
 
   if (!matchedClaim) {
     return {
-      status: "unverified",
+      status: 'unverified',
       lastCheckedAt: new Date().toISOString(),
-      failureReason: "No matching Keytrace claim found for this account.",
-    };
+      failureReason: 'No matching Keytrace claim found for this account.',
+    }
   }
 
   const response: KeytraceReverifyResponse = {
     status: mapReverifyStatus(matchedClaim),
     lastCheckedAt:
-      getOptionalClaimField(matchedClaim, "lastVerifiedAt") ||
+      getOptionalClaimField(matchedClaim, 'lastVerifiedAt') ||
       matchedClaim.claim.retractedAt ||
       matchedClaim.claim.createdAt,
     failureReason: matchedClaim.error || undefined,
-  };
+  }
 
-  return response;
-});
+  return response
+})
diff --git a/shared/types/keytrace.ts b/shared/types/keytrace.ts
index 67f5c18a80..437c079ff5 100644
--- a/shared/types/keytrace.ts
+++ b/shared/types/keytrace.ts
@@ -1,51 +1,41 @@
 export type KeytraceProfile = {
-  name: string;
-  avatar: string;
-  banner?: string;
-  description: string;
-};
+  name: string
+  avatar: string
+  banner?: string
+  description: string
+}
 
-export type KeytraceVerificationStatus =
-  | "verified"
-  | "unverified"
-  | "stale"
-  | "failed";
+export type KeytraceVerificationStatus = 'verified' | 'unverified' | 'stale' | 'failed'
 
-export type KeytraceProofMethod =
-  | "dns"
-  | "github"
-  | "npm"
-  | "mastodon"
-  | "pgp"
-  | "other";
+export type KeytraceProofMethod = 'dns' | 'github' | 'npm' | 'mastodon' | 'pgp' | 'other'
 
 export type KeytraceAccount = {
-  platform: string;
-  username: string;
-  displayName?: string;
-  avatar?: string;
-  url?: string;
-  status: KeytraceVerificationStatus;
-  proofMethod: KeytraceProofMethod;
-  addedAt: string;
-  lastCheckedAt: string;
-  failureReason?: string;
-};
+  platform: string
+  username: string
+  displayName?: string
+  avatar?: string
+  url?: string
+  status: KeytraceVerificationStatus
+  proofMethod: KeytraceProofMethod
+  addedAt: string
+  lastCheckedAt: string
+  failureReason?: string
+}
 
 export type KeytraceResponse = {
-  profile: KeytraceProfile;
-  accounts: KeytraceAccount[];
-};
+  profile: KeytraceProfile
+  accounts: KeytraceAccount[]
+}
 
 export type KeytraceReverifyRequest = {
-  identity: string;
-  platform: string;
-  username: string;
-  url?: string;
-};
+  identity: string
+  platform: string
+  username: string
+  url?: string
+}
 
 export type KeytraceReverifyResponse = {
-  status: KeytraceVerificationStatus;
-  lastCheckedAt: string;
-  failureReason?: string;
-};
+  status: KeytraceVerificationStatus
+  lastCheckedAt: string
+  failureReason?: string
+}

From 5edfbe7123b505e5978e42fe0947abcdc6ad41c6 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Fri, 24 Apr 2026 20:54:13 +0530
Subject: [PATCH 11/28] fix: type check error

---
 test/nuxt/a11y.spec.ts | 5281 ++++++++++++++++++++--------------------
 1 file changed, 2685 insertions(+), 2596 deletions(-)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index e81af4c8d6..90561ee3c7 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -1,33 +1,41 @@
-import type { ColumnConfig, FilterChip } from '#shared/types/preferences'
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import type { VueWrapper } from '@vue/test-utils'
-import 'axe-core'
-import type { AxeResults, RunOptions } from 'axe-core'
-import { afterEach, beforeEach, describe, expect, it, type MockInstance, vi } from 'vitest'
+import type { ColumnConfig, FilterChip } from "#shared/types/preferences";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import type { VueWrapper } from "@vue/test-utils";
+import "axe-core";
+import type { AxeResults, RunOptions } from "axe-core";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  type MockInstance,
+  vi,
+} from "vitest";
 
 // axe-core is a UMD module that exposes itself as window.axe in the browser
 declare const axe: {
-  run: (context: Element, options?: RunOptions) => Promise<AxeResults>
-}
+  run: (context: Element, options?: RunOptions) => Promise<AxeResults>;
+};
 
 // Track mounted containers for cleanup
-const mountedContainers: HTMLElement[] = []
+const mountedContainers: HTMLElement[] = [];
 
 const axeRunOptions: RunOptions = {
   // Only compute violations to reduce work per run
-  resultTypes: ['violations'],
+  resultTypes: ["violations"],
   // Disable rules that don't apply to isolated component testing
   rules: {
     // These rules check page-level concerns that don't apply to isolated components
-    'landmark-one-main': { enabled: false },
-    'region': { enabled: false },
-    'page-has-heading-one': { enabled: false },
+    "landmark-one-main": { enabled: false },
+    region: { enabled: false },
+    "page-has-heading-one": { enabled: false },
     // Duplicate landmarks are expected when testing multiple header/footer components
-    'landmark-no-duplicate-banner': { enabled: false },
-    'landmark-no-duplicate-contentinfo': { enabled: false },
-    'landmark-no-duplicate-main': { enabled: false },
+    "landmark-no-duplicate-banner": { enabled: false },
+    "landmark-no-duplicate-contentinfo": { enabled: false },
+    "landmark-no-duplicate-main": { enabled: false },
   },
-}
+};
 
 /**
  * Run axe accessibility audit on a mounted component.
@@ -35,37 +43,39 @@ const axeRunOptions: RunOptions = {
  */
 async function runAxe(wrapper: VueWrapper): Promise<AxeResults> {
   // Create an isolated container for this test
-  const container = document.createElement('div')
-  container.id = `test-container-${Date.now()}`
-  document.body.appendChild(container)
-  mountedContainers.push(container)
+  const container = document.createElement("div");
+  container.id = `test-container-${Date.now()}`;
+  document.body.appendChild(container);
+  mountedContainers.push(container);
 
   // Clone the element into our isolated container
-  const el = wrapper.element.cloneNode(true) as HTMLElement
-  container.appendChild(el)
+  const el = wrapper.element.cloneNode(true) as HTMLElement;
+  container.appendChild(el);
 
   // Run axe only on the isolated container
-  return axe.run(container, axeRunOptions)
+  return axe.run(container, axeRunOptions);
 }
 
-async function runAxeElements(elements: Array<Element | null | undefined>): Promise<AxeResults> {
-  const container = document.createElement('div')
-  container.id = `test-container-${Date.now()}`
-  document.body.appendChild(container)
-  mountedContainers.push(container)
+async function runAxeElements(
+  elements: Array<Element | null | undefined>,
+): Promise<AxeResults> {
+  const container = document.createElement("div");
+  container.id = `test-container-${Date.now()}`;
+  document.body.appendChild(container);
+  mountedContainers.push(container);
 
   for (const element of elements) {
-    if (!element) continue
-    container.appendChild(element.cloneNode(true))
+    if (!element) continue;
+    container.appendChild(element.cloneNode(true));
   }
 
-  return axe.run(container, axeRunOptions)
+  return axe.run(container, axeRunOptions);
 }
 
 // --- Console warning assertion --------------------------------------------------
 // Fail any test that emits unexpected console.warn calls. This catches issues
 // like missing/invalid props that would otherwise silently pass.
-let warnSpy: MockInstance
+let warnSpy: MockInstance;
 
 // Patterns that are expected and safe to ignore in the test environment.
 const allowedWarnings: RegExp[] = [
@@ -77,41 +87,43 @@ const allowedWarnings: RegExp[] = [
   // DiffFileTree instances), this triggers a duplicate expose() call on the
   // inner wrapper. The warning does not affect test correctness.
   /expose\(\) should be called only once/,
-]
+];
 
 beforeEach(() => {
-  warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-})
+  warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+});
 
 afterEach(() => {
   // Collect unexpected warnings
   const unexpected = warnSpy.mock.calls.filter(
-    args => !allowedWarnings.some(re => re.test(String(args[0]))),
-  )
-  warnSpy.mockRestore()
+    (args) => !allowedWarnings.some((re) => re.test(String(args[0]))),
+  );
+  warnSpy.mockRestore();
 
   if (unexpected.length > 0) {
-    const msgs = unexpected.map(args => args.map(String).join(' ')).join('\n')
-    throw new Error(`Test emitted unexpected console.warn:\n${msgs}`)
+    const msgs = unexpected
+      .map((args) => args.map(String).join(" "))
+      .join("\n");
+    throw new Error(`Test emitted unexpected console.warn:\n${msgs}`);
   }
-})
+});
 
 // Clean up mounted containers after each test
 afterEach(() => {
   for (const container of mountedContainers) {
-    container.remove()
+    container.remove();
   }
-  mountedContainers.length = 0
-})
+  mountedContainers.length = 0;
+});
 
 // VueUiXy is imported directly in <script setup>, so global stubs cannot override it.
 // We mock the module itself to prevent vue-data-ui from mounting charts during tests
 // (it relies on DOM measurements and causes runtime errors in Vitest / Playwright).
 // This render-function stub avoids the Vue runtime-compiler warning and keeps slots working.
-vi.mock('vue-data-ui/vue-ui-xy', () => {
+vi.mock("vue-data-ui/vue-ui-xy", () => {
   return {
     VueUiXy: defineComponent({
-      name: 'VueUiXy',
+      name: "VueUiXy",
       inheritAttrs: false,
       // Declare the props VueUiXy receives so they don't fall through to attrs.
       // Spreading `dataset` onto a DOM element triggers a Vue warning because
@@ -121,17 +133,22 @@ vi.mock('vue-data-ui/vue-ui-xy', () => {
         config: { type: Object, default: () => ({}) },
       },
       setup(_, { slots }) {
-        return () => h('div', { 'data-test-id': 'vue-ui-xy-stub' }, slots.default?.() ?? [])
+        return () =>
+          h(
+            "div",
+            { "data-test-id": "vue-ui-xy-stub" },
+            slots.default?.() ?? [],
+          );
       },
     }),
-  }
-})
+  };
+});
 
-vi.mock('~/composables/useCanGoBack', () => {
+vi.mock("~/composables/useCanGoBack", () => {
   return {
     useCanGoBack: () => shallowRef(true),
-  }
-})
+  };
+});
 
 // Import components from #components where possible
 // For server/client variants, we need to import directly to test the specific variant
@@ -256,590 +273,602 @@ import {
   TabList,
   TabItem,
   TabPanel,
-} from '#components'
+} from "#components";
 
 // Server variant components must be imported directly to test the server-side render
 // The #components import automatically provides the client variant
-import LogoNuxt from '~/assets/logos/oss-partners/nuxt.svg'
-import CommandPaletteComponent from '~/components/CommandPalette.client.vue'
-import HeaderAccountMenuServer from '~/components/Header/AccountMenu.server.vue'
-import ToggleServer from '~/components/Settings/Toggle.server.vue'
-import SearchProviderToggleServer from '~/components/SearchProviderToggle.server.vue'
-import PackageTrendsChart from '~/components/Package/TrendsChart.vue'
-import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
-import FacetScatterChart from '~/components/Compare/FacetScatterChart.vue'
-import PackageLikeCard from '~/components/Package/LikeCard.vue'
-import SizeIncrease from '~/components/Package/SizeIncrease.vue'
-import Likes from '~/components/Package/Likes.vue'
-import AccountItem from '~/components/AccountItem.vue'
-import LinkedAccounts from '~/components/LinkedAccounts.vue'
-import ProfileHeader from '~/components/ProfileHeader.vue'
-import type { VueUiXyDatasetItem } from 'vue-data-ui'
-
-describe('component accessibility audits', () => {
-  describe('DateTime', () => {
-    it('should have no accessibility violations with ISO string datetime', async () => {
+import LogoNuxt from "~/assets/logos/oss-partners/nuxt.svg";
+import CommandPaletteComponent from "~/components/CommandPalette.client.vue";
+import HeaderAccountMenuServer from "~/components/Header/AccountMenu.server.vue";
+import ToggleServer from "~/components/Settings/Toggle.server.vue";
+import SearchProviderToggleServer from "~/components/SearchProviderToggle.server.vue";
+import PackageTrendsChart from "~/components/Package/TrendsChart.vue";
+import FacetBarChart from "~/components/Compare/FacetBarChart.vue";
+import FacetScatterChart from "~/components/Compare/FacetScatterChart.vue";
+import PackageLikeCard from "~/components/Package/LikeCard.vue";
+import SizeIncrease from "~/components/Package/SizeIncrease.vue";
+import Likes from "~/components/Package/Likes.vue";
+import AccountItem from "~/components/AccountItem.vue";
+import LinkedAccounts from "~/components/LinkedAccounts.vue";
+import ProfileHeader from "~/components/ProfileHeader.vue";
+import type { VueUiXyDatasetItem } from "vue-data-ui";
+
+describe("component accessibility audits", () => {
+  describe("DateTime", () => {
+    it("should have no accessibility violations with ISO string datetime", async () => {
       const component = await mountSuspended(DateTime, {
-        props: { datetime: '2024-01-15T12:00:00.000Z' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { datetime: "2024-01-15T12:00:00.000Z" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with Date object', async () => {
+    it("should have no accessibility violations with Date object", async () => {
       const component = await mountSuspended(DateTime, {
-        props: { datetime: new Date('2024-01-15T12:00:00.000Z') },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { datetime: new Date("2024-01-15T12:00:00.000Z") },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with custom title', async () => {
+    it("should have no accessibility violations with custom title", async () => {
       const component = await mountSuspended(DateTime, {
         props: {
-          datetime: '2024-01-15T12:00:00.000Z',
-          title: 'Last updated on January 15, 2024',
+          datetime: "2024-01-15T12:00:00.000Z",
+          title: "Last updated on January 15, 2024",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with dateStyle', async () => {
+    it("should have no accessibility violations with dateStyle", async () => {
       const component = await mountSuspended(DateTime, {
         props: {
-          datetime: '2024-01-15T12:00:00.000Z',
-          dateStyle: 'medium',
+          datetime: "2024-01-15T12:00:00.000Z",
+          dateStyle: "medium",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with individual date parts', async () => {
+    it("should have no accessibility violations with individual date parts", async () => {
       const component = await mountSuspended(DateTime, {
         props: {
-          datetime: '2024-01-15T12:00:00.000Z',
-          year: 'numeric',
-          month: 'short',
-          day: 'numeric',
-        },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('AppHeader', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(AppHeader)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations without logo', async () => {
+          datetime: "2024-01-15T12:00:00.000Z",
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+        },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("AppHeader", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(AppHeader);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations without logo", async () => {
       const component = await mountSuspended(AppHeader, {
         props: { showLogo: false },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations without connector', async () => {
+    it("should have no accessibility violations without connector", async () => {
       const component = await mountSuspended(AppHeader, {
         props: { showConnector: false },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('LandingIntroHeader', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(LandingIntroHeader)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('Noodles', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(NoodleKawaiiLogo)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(NoodleArtemisLogo)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('AppFooter', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(AppFooter)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('AppLogo', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(AppLogo)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with custom class', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("LandingIntroHeader", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(LandingIntroHeader);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("Noodles", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(NoodleKawaiiLogo);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(NoodleArtemisLogo);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("AppFooter", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(AppFooter);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("AppLogo", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(AppLogo);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations with custom class", async () => {
       const component = await mountSuspended(AppLogo, {
-        props: { class: 'h-6 w-6 text-accent' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('AppMark', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(AppMark)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with custom class', async () => {
+        props: { class: "h-6 w-6 text-accent" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("AppMark", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(AppMark);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations with custom class", async () => {
       const component = await mountSuspended(AppMark, {
-        props: { class: 'h-6 w-6 text-accent' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('AboutLogoImg', () => {
-    it('should have no accessibility violations with string src', async () => {
+        props: { class: "h-6 w-6 text-accent" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("AboutLogoImg", () => {
+    it("should have no accessibility violations with string src", async () => {
       const component = await mountSuspended(AboutLogoImg, {
         props: {
           src: LogoNuxt,
-          alt: 'Nuxt logo',
+          alt: "Nuxt logo",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with dark/light src', async () => {
+    it("should have no accessibility violations with dark/light src", async () => {
       const component = await mountSuspended(AboutLogoImg, {
         props: {
           src: {
             dark: LogoNuxt,
-            light: 'auto',
+            light: "auto",
           },
-          alt: 'Nuxt logo',
+          alt: "Nuxt logo",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('AboutLogoList', () => {
-    it('should have no accessibility violations with direct logo items', async () => {
+  describe("AboutLogoList", () => {
+    it("should have no accessibility violations with direct logo items", async () => {
       const component = await mountSuspended(AboutLogoList, {
         props: {
           list: [
             {
-              name: 'Nuxt',
-              url: 'https://nuxt.com',
+              name: "Nuxt",
+              url: "https://nuxt.com",
               logo: LogoNuxt,
             },
             {
-              name: 'Nuxt',
-              url: 'https://nuxt.com',
+              name: "Nuxt",
+              url: "https://nuxt.com",
               logo: {
                 dark: LogoNuxt,
-                light: 'auto',
+                light: "auto",
               },
             },
           ],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with grouped items', async () => {
+    it("should have no accessibility violations with grouped items", async () => {
       const component = await mountSuspended(AboutLogoList, {
         props: {
           list: [
             {
-              name: 'OSS Partners',
+              name: "OSS Partners",
               items: [
                 {
-                  name: 'Nuxt',
-                  url: 'https://nuxt.com',
+                  name: "Nuxt",
+                  url: "https://nuxt.com",
                   logo: LogoNuxt,
                 },
                 {
-                  name: 'Nuxt',
-                  url: 'https://nuxt.com',
+                  name: "Nuxt",
+                  url: "https://nuxt.com",
                   logo: {
                     dark: LogoNuxt,
-                    light: 'auto',
+                    light: "auto",
                   },
                 },
               ],
             },
           ],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('BaseCard', () => {
-    it('should have no accessibility violations', async () => {
+  describe("BaseCard", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(BaseCard, {
-        slots: { default: '<p>Card content</p>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        slots: { default: "<p>Card content</p>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with exact match highlight', async () => {
+    it("should have no accessibility violations with exact match highlight", async () => {
       const component = await mountSuspended(BaseCard, {
         props: { isExactMatch: true },
-        slots: { default: '<p>Exact match content</p>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('BackButton', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(BackButton)
-      expect(component.find('button').exists()).toBe(true)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('CommandPalette', () => {
-    let commandPalette: ReturnType<typeof useCommandPalette> | null = null
+        slots: { default: "<p>Exact match content</p>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("BackButton", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(BackButton);
+      expect(component.find("button").exists()).toBe(true);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("CommandPalette", () => {
+    let commandPalette: ReturnType<typeof useCommandPalette> | null = null;
 
     const CommandPaletteHarness = defineComponent({
-      name: 'CommandPaletteHarness',
+      name: "CommandPaletteHarness",
       setup() {
-        commandPalette = useCommandPalette()
+        commandPalette = useCommandPalette();
 
         onMounted(() => {
-          commandPalette?.open()
-        })
+          commandPalette?.open();
+        });
 
         onBeforeUnmount(() => {
-          commandPalette?.close()
-          commandPalette?.clearPackageContext()
-        })
+          commandPalette?.close();
+          commandPalette?.clearPackageContext();
+        });
 
-        return () => h('div', [h(CommandPaletteComponent)])
+        return () => h("div", [h(CommandPaletteComponent)]);
       },
-    })
+    });
 
     afterEach(() => {
-      commandPalette?.close()
-      commandPalette?.clearPackageContext()
-      commandPalette = null
-    })
-
-    it('should have no accessibility violations when open', async () => {
-      const wrapper = await mountSuspended(CommandPaletteHarness)
-      await nextTick()
-      await nextTick()
-
-      const dialog = document.getElementById('command-palette-modal')
-      const announcer = wrapper.element.querySelector('#command-palette-modal-announcement')
-
-      expect(dialog).not.toBeNull()
-      expect(announcer).not.toBeNull()
-
-      const results = await runAxeElements([announcer, dialog])
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('TagStatic', () => {
-    it('should have no accessibility violations', async () => {
+      commandPalette?.close();
+      commandPalette?.clearPackageContext();
+      commandPalette = null;
+    });
+
+    it("should have no accessibility violations when open", async () => {
+      const wrapper = await mountSuspended(CommandPaletteHarness);
+      await nextTick();
+      await nextTick();
+
+      const dialog = document.getElementById("command-palette-modal");
+      const announcer = wrapper.element.querySelector(
+        "#command-palette-modal-announcement",
+      );
+
+      expect(dialog).not.toBeNull();
+      expect(announcer).not.toBeNull();
+
+      const results = await runAxeElements([announcer, dialog]);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("TagStatic", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(TagStatic, {
-        slots: { default: 'Tag content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('ButtonBase', () => {
-    it('should have no accessibility violations', async () => {
+        slots: { default: "Tag content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("ButtonBase", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(ButtonBase, {
-        slots: { default: 'Button content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        slots: { default: "Button content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for disabled state', async () => {
+    it("should have no accessibility violations for disabled state", async () => {
       const component = await mountSuspended(ButtonBase, {
         props: { disabled: true },
-        slots: { default: 'Button content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        slots: { default: "Button content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations as primary button', async () => {
+    it("should have no accessibility violations as primary button", async () => {
       const component = await mountSuspended(ButtonBase, {
-        props: { variant: 'primary' },
-        slots: { default: 'Button content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with size small', async () => {
+        props: { variant: "primary" },
+        slots: { default: "Button content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations with size small", async () => {
       const component = await mountSuspended(ButtonBase, {
-        props: { size: 'sm' },
-        slots: { default: 'Button content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('LinkBase', () => {
-    it('should have no accessibility violations', async () => {
+        props: { size: "sm" },
+        slots: { default: "Button content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("LinkBase", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com' },
-        slots: { default: 'Button link content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { to: "http://example.com" },
+        slots: { default: "Button link content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
     it("should have no accessibility violations when it's the current link", async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', current: true },
-        slots: { default: 'Button link content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations when disabled (plain text)', async () => {
+        props: { to: "http://example.com", current: true },
+        slots: { default: "Button link content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations when disabled (plain text)", async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', disabled: true },
-        slots: { default: 'Button link content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations as secondary button', async () => {
+        props: { to: "http://example.com", disabled: true },
+        slots: { default: "Button link content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations as secondary button", async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', disabled: true, variant: 'button-secondary' },
-        slots: { default: 'Button link content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations as primary button', async () => {
+        props: {
+          to: "http://example.com",
+          disabled: true,
+          variant: "button-secondary",
+        },
+        slots: { default: "Button link content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations as primary button", async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', disabled: true, variant: 'button-primary' },
-        slots: { default: 'Button link content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations as small button', async () => {
+        props: {
+          to: "http://example.com",
+          disabled: true,
+          variant: "button-primary",
+        },
+        slots: { default: "Button link content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations as small button", async () => {
       const component = await mountSuspended(LinkBase, {
         props: {
-          to: 'http://example.com',
+          to: "http://example.com",
           disabled: true,
-          variant: 'button-secondary',
-          size: 'sm',
-        },
-        slots: { default: 'Button link content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('Likes', () => {
-    it('should have no accessibility violations', async () => {
+          variant: "button-secondary",
+          size: "sm",
+        },
+        slots: { default: "Button link content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("Likes", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(Likes, {
-        props: { packageName: 'svelte' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('TagRadioButton', () => {
-    it('should have no accessibility violations', async () => {
+        props: { packageName: "svelte" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("TagRadioButton", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(TagRadioButton, {
-        props: { value: 'option1', modelValue: 'option2' },
-        slots: { default: 'Tag content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations when checked', async () => {
+        props: { value: "option1", modelValue: "option2" },
+        slots: { default: "Tag content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations when checked", async () => {
       const component = await mountSuspended(TagRadioButton, {
-        props: { value: 'option1', modelValue: 'option1' },
-        slots: { default: 'Tag content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations when disabled', async () => {
+        props: { value: "option1", modelValue: "option1" },
+        slots: { default: "Tag content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations when disabled", async () => {
       const component = await mountSuspended(TagRadioButton, {
-        props: { value: 'option1', modelValue: 'option2', disabled: true },
-        slots: { default: 'Tag content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('TooltipApp', () => {
-    it('should have no accessibility violations', async () => {
+        props: { value: "option1", modelValue: "option2", disabled: true },
+        slots: { default: "Tag content" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("TooltipApp", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(TooltipApp, {
-        props: { text: 'Tooltip content' },
-        slots: { default: '<button>Trigger</button>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('TooltipAnnounce', () => {
-    it('should have no accessibility violations', async () => {
+        props: { text: "Tooltip content" },
+        slots: { default: "<button>Trigger</button>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("TooltipAnnounce", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(TooltipAnnounce, {
-        props: { text: 'Tooltip content', isVisible: true },
-        slots: { default: '<button>Trigger</button>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('LoadingSpinner', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(LoadingSpinner)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with custom text', async () => {
+        props: { text: "Tooltip content", isVisible: true },
+        slots: { default: "<button>Trigger</button>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("LoadingSpinner", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(LoadingSpinner);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations with custom text", async () => {
       const component = await mountSuspended(LoadingSpinner, {
-        props: { text: 'Fetching data...' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('ProvenanceBadge', () => {
-    it('should have no accessibility violations without link', async () => {
-      const component = await mountSuspended(ProvenanceBadge)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with link', async () => {
+        props: { text: "Fetching data..." },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("ProvenanceBadge", () => {
+    it("should have no accessibility violations without link", async () => {
+      const component = await mountSuspended(ProvenanceBadge);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations with link", async () => {
       const component = await mountSuspended(ProvenanceBadge, {
         props: {
-          provider: 'github',
-          packageName: 'vue',
-          version: '3.0.0',
+          provider: "github",
+          packageName: "vue",
+          version: "3.0.0",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations in compact mode', async () => {
+    it("should have no accessibility violations in compact mode", async () => {
       const component = await mountSuspended(ProvenanceBadge, {
         props: {
-          provider: 'github',
-          packageName: 'vue',
-          version: '3.0.0',
+          provider: "github",
+          packageName: "vue",
+          version: "3.0.0",
           compact: true,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageSkeleton', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(PackageSkeleton)
-      const results = await runAxe(component)
+  describe("PackageSkeleton", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(PackageSkeleton);
+      const results = await runAxe(component);
       // PackageSkeleton uses empty h1/h2 elements as skeleton placeholders.
       // These are expected since the component represents a loading state.
       // The real content will have proper heading text when loaded.
       // Filter out 'empty-heading' violations as they're expected for skeleton components.
-      const violations = results.violations.filter(v => v.id !== 'empty-heading')
-      expect(violations).toEqual([])
-    })
-  })
-
-  describe('PackageExternalLinks', () => {
-    it('should have no accessibility violations', async () => {
+      const violations = results.violations.filter(
+        (v) => v.id !== "empty-heading",
+      );
+      expect(violations).toEqual([]);
+    });
+  });
+
+  describe("PackageExternalLinks", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageExternalLinks, {
         props: {
           pkg: {
-            '_id': 'react',
-            'name': 'react',
-            'dist-tags': { latest: '18.2.0' },
-            'time': {
-              'created': '2013-01-31T01:07:45.050Z',
-              'modified': '2024-03-14T00:00:00.000Z',
-              '18.2.0': '2024-03-14T00:00:00.000Z',
+            _id: "react",
+            name: "react",
+            "dist-tags": { latest: "18.2.0" },
+            time: {
+              created: "2013-01-31T01:07:45.050Z",
+              modified: "2024-03-14T00:00:00.000Z",
+              "18.2.0": "2024-03-14T00:00:00.000Z",
             },
-            'requestedVersion': {
-              version: '18.2.0',
-              _npmVersion: '18.2.0',
-              homepage: 'https://react.dev',
+            requestedVersion: {
+              version: "18.2.0",
+              _npmVersion: "18.2.0",
+              homepage: "https://react.dev",
               repository: {
-                type: 'git',
-                url: 'https://github.com/facebook/react.git',
+                type: "git",
+                url: "https://github.com/facebook/react.git",
               },
               bugs: {
-                url: 'https://github.com/facebook/react/issues',
+                url: "https://github.com/facebook/react/issues",
               },
-              funding: 'https://github.com/sponsors/facebook',
+              funding: "https://github.com/sponsors/facebook",
               dist: {
-                shasum: 'abc123def456',
-                tarball: 'https://registry.npmjs.org/react/-/react-18.2.0.tgz',
+                shasum: "abc123def456",
+                tarball: "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
                 signatures: [],
               },
               deprecated: undefined,
               keywords: [],
-              license: 'MIT',
-              name: 'react',
-              time: '2024-03-14T00:00:00.000Z',
-              _id: 'react@18.2.0',
+              license: "MIT",
+              name: "react",
+              time: "2024-03-14T00:00:00.000Z",
+              _id: "react@18.2.0",
             },
-            'versions': {
-              '18.2.0': {
-                version: '18.2.0',
+            versions: {
+              "18.2.0": {
+                version: "18.2.0",
                 hasProvenance: false,
                 tags: [],
               },
@@ -847,264 +876,266 @@ describe('component accessibility audits', () => {
           },
           jsrInfo: {
             exists: true,
-            url: 'https://jsr.io/@react/react',
+            url: "https://jsr.io/@react/react",
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageCard', () => {
+  describe("PackageCard", () => {
     const mockResult = {
       package: {
-        name: 'vue',
-        version: '3.5.0',
-        description: 'The progressive JavaScript framework',
-        date: '2024-01-15T00:00:00.000Z',
-        keywords: ['framework', 'frontend', 'reactive'],
+        name: "vue",
+        version: "3.5.0",
+        description: "The progressive JavaScript framework",
+        date: "2024-01-15T00:00:00.000Z",
+        keywords: ["framework", "frontend", "reactive"],
         links: {},
         publisher: {
-          username: 'yyx990803',
+          username: "yyx990803",
         },
       },
       searchScore: 100000,
-    }
+    };
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageCard, {
         props: { result: mockResult },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with h2 heading', async () => {
+    it("should have no accessibility violations with h2 heading", async () => {
       const component = await mountSuspended(PackageCard, {
-        props: { result: mockResult, headingLevel: 'h2' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { result: mockResult, headingLevel: "h2" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations showing publisher', async () => {
+    it("should have no accessibility violations showing publisher", async () => {
       const component = await mountSuspended(PackageCard, {
         props: { result: mockResult, showPublisher: true },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('PackageLikeCard', () => {
-    it('should have no accessibility violations', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("PackageLikeCard", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageLikeCard, {
-        props: { packageUrl: 'https://npmx.dev/package/vue' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('ProfileHeader', () => {
-    it('should have no accessibility violations with profile data', async () => {
+        props: { packageUrl: "https://npmx.dev/package/vue" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("ProfileHeader", () => {
+    it("should have no accessibility violations with profile data", async () => {
       const component = await mountSuspended(ProfileHeader, {
         props: {
           profile: {
-            name: 'npmx Team',
-            avatar: 'https://api.dicebear.com/9.x/shapes/svg?seed=npmx',
-            description: 'Open source maintainers',
+            name: "npmx Team",
+            avatar: "https://api.dicebear.com/9.x/shapes/svg?seed=npmx",
+            description: "Open source maintainers",
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('LinkedAccounts', () => {
-    it('should have no accessibility violations with account list', async () => {
+  describe("LinkedAccounts", () => {
+    it("should have no accessibility violations with account list", async () => {
       const component = await mountSuspended(LinkedAccounts, {
         props: {
+          identity: "npmx.dev",
           accounts: [
             {
-              platform: 'github',
-              username: 'npmx-dev',
-              displayName: 'npmx-dev',
-              status: 'verified',
-              proofMethod: 'github',
-              addedAt: '2026-04-01T10:00:00.000Z',
-              lastCheckedAt: '2026-04-21T10:00:00.000Z',
-              url: 'https://github.com/npmx-dev',
+              platform: "github",
+              username: "npmx-dev",
+              displayName: "npmx-dev",
+              status: "verified",
+              proofMethod: "github",
+              addedAt: "2026-04-01T10:00:00.000Z",
+              lastCheckedAt: "2026-04-21T10:00:00.000Z",
+              url: "https://github.com/npmx-dev",
             },
           ],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('AccountItem', () => {
-    it('should have no accessibility violations', async () => {
+  describe("AccountItem", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(AccountItem, {
         props: {
+          identity: "npmx.dev",
           account: {
-            platform: 'github',
-            username: 'npmx-dev',
-            displayName: 'npmx-dev',
-            status: 'verified',
-            proofMethod: 'github',
-            addedAt: '2026-04-01T10:00:00.000Z',
-            lastCheckedAt: '2026-04-21T10:00:00.000Z',
-            url: 'https://github.com/npmx-dev',
+            platform: "github",
+            username: "npmx-dev",
+            displayName: "npmx-dev",
+            status: "verified",
+            proofMethod: "github",
+            addedAt: "2026-04-01T10:00:00.000Z",
+            lastCheckedAt: "2026-04-21T10:00:00.000Z",
+            url: "https://github.com/npmx-dev",
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageHeader', () => {
-    it('should have no accessibility violations', async () => {
+  describe("PackageHeader", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageHeader, {
         props: {
           pkg: {
-            'name': 'vue',
-            'dist-tags': {},
-            'versions': {},
+            name: "vue",
+            "dist-tags": {},
+            versions: {},
           },
-          resolvedVersion: '3.5.0',
+          resolvedVersion: "3.5.0",
           displayVersion: {
-            _id: '1234567890',
-            _npmVersion: '3.5.0',
-            name: 'vue',
-            version: '3.5.0',
+            _id: "1234567890",
+            _npmVersion: "3.5.0",
+            name: "vue",
+            version: "3.5.0",
             dist: {
-              shasum: '1234567890',
+              shasum: "1234567890",
               signatures: [],
-              tarball: 'https://npmx.dev/package/vue/tarball',
+              tarball: "https://npmx.dev/package/vue/tarball",
             },
           },
-          latestVersion: { version: '3.5.0', tags: [] },
+          latestVersion: { version: "3.5.0", tags: [] },
           provenanceData: null,
-          provenanceStatus: 'idle',
-          page: 'docs',
-          versionUrlPattern: '/package/vue/v/{version}',
+          provenanceStatus: "idle",
+          page: "docs",
+          versionUrlPattern: "/package/vue/v/{version}",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
   // Note: PackageWeeklyDownloadStats tests are skipped because vue-data-ui VueUiSparkline
   // component has issues in the test environment (requires DOM measurements that aren't
   // available during SSR-like test mounting).
 
-  describe('PackageChartModal', () => {
-    it('should have no accessibility violations when closed', async () => {
+  describe("PackageChartModal", () => {
+    it("should have no accessibility violations when closed", async () => {
       const component = await mountSuspended(PackageChartModal, {
-        props: { open: false, title: 'Downloads' },
-        slots: { default: '<div>Chart content</div>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { open: false, title: "Downloads" },
+        slots: { default: "<div>Chart content</div>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
     // Note: Testing the open state is challenging because native <dialog>.showModal()
     // requires the element to be in the DOM and connected, which doesn't work well
     // with the test environment's cloning approach. The dialog accessibility is
     // inherently provided by the native <dialog> element with aria-labelledby.
-  })
+  });
 
-  describe('PackageTrendsChart', () => {
+  describe("PackageTrendsChart", () => {
     const mockWeeklyDownloads = [
       {
         value: 1000,
-        weekKey: '2024-W01',
-        weekStart: '2024-01-01',
-        weekEnd: '2024-01-07',
+        weekKey: "2024-W01",
+        weekStart: "2024-01-01",
+        weekEnd: "2024-01-07",
         timestampStart: 1704067200,
         timestampEnd: 1704585600,
       },
       {
         value: 1200,
-        weekKey: '2024-W02',
-        weekStart: '2024-01-08',
-        weekEnd: '2024-01-14',
+        weekKey: "2024-W02",
+        weekStart: "2024-01-08",
+        weekEnd: "2024-01-14",
         timestampStart: 1704672000,
         timestampEnd: 1705190400,
       },
       {
         value: 1500,
-        weekKey: '2024-W03',
-        weekStart: '2024-01-15',
-        weekEnd: '2024-01-21',
+        weekKey: "2024-W03",
+        weekStart: "2024-01-15",
+        weekEnd: "2024-01-21",
         timestampStart: 1705276800,
         timestampEnd: 1705795200,
       },
-    ]
+    ];
 
-    it('should have no accessibility violations (non-modal)', async () => {
+    it("should have no accessibility violations (non-modal)", async () => {
       const wrapper = await mountSuspended(PackageTrendsChart, {
         props: {
           weeklyDownloads: mockWeeklyDownloads,
-          packageName: 'vue',
-          createdIso: '2020-01-01T00:00:00.000Z',
+          packageName: "vue",
+          createdIso: "2020-01-01T00:00:00.000Z",
           inModal: false,
         },
-      })
+      });
 
-      const results = await runAxe(wrapper)
-      expect(results.violations).toEqual([])
-    })
+      const results = await runAxe(wrapper);
+      expect(results.violations).toEqual([]);
+    });
 
-    describe('FacetBarChart', () => {
-      it('should have no accessibility violations', async () => {
+    describe("FacetBarChart", () => {
+      it("should have no accessibility violations", async () => {
         const wrapper = await mountSuspended(FacetBarChart, {
           props: {
             values: [
-              { raw: 100, display: '100 MB' },
-              { raw: 50, display: '50 MB' },
+              { raw: 100, display: "100 MB" },
+              { raw: 50, display: "50 MB" },
             ],
-            packages: ['nuxt', 'vue'],
-            label: 'Package Size',
-            description: 'Size of the package itself (unpacked)',
+            packages: ["nuxt", "vue"],
+            label: "Package Size",
+            description: "Size of the package itself (unpacked)",
           },
-        })
-        const results = await runAxe(wrapper)
-        expect(results.violations).toEqual([])
-      })
-    })
-
-    describe('FacetScatterChart', () => {
-      it('should have no accessibility violations', async () => {
+        });
+        const results = await runAxe(wrapper);
+        expect(results.violations).toEqual([]);
+      });
+    });
+
+    describe("FacetScatterChart", () => {
+      it("should have no accessibility violations", async () => {
         const wrapper = await mountSuspended(FacetScatterChart, {
           props: {
             packagesData: [
               {
                 package: {
-                  name: 'vue',
-                  version: '3.5.32',
+                  name: "vue",
+                  version: "3.5.32",
                 },
                 downloads: 10979552,
                 packageSize: 2480183,
                 directDeps: 5,
                 analysis: {
-                  package: 'vue',
-                  version: '3.5.32',
+                  package: "vue",
+                  version: "3.5.32",
                   devDependencySuggestion: {
                     recommended: false,
                   },
-                  moduleFormat: 'dual',
+                  moduleFormat: "dual",
                   types: {
-                    kind: 'included',
+                    kind: "included",
                   },
                   createPackage: {
-                    packageName: 'create-vue',
+                    packageName: "create-vue",
                   },
                 },
                 vulnerabilities: {
@@ -1117,37 +1148,37 @@ describe('component accessibility audits', () => {
                   },
                 },
                 metadata: {
-                  license: 'MIT',
-                  lastUpdated: '2026-04-03T05:41:39.680Z',
+                  license: "MIT",
+                  lastUpdated: "2026-04-03T05:41:39.680Z",
                 },
                 isBinaryOnly: false,
                 totalLikes: 85,
               },
               {
                 package: {
-                  name: 'svelte',
-                  version: '5.55.1',
+                  name: "svelte",
+                  version: "5.55.1",
                 },
                 downloads: 4378382,
                 packageSize: 2823272,
                 directDeps: 16,
                 analysis: {
-                  package: 'svelte',
-                  version: '5.55.1',
+                  package: "svelte",
+                  version: "5.55.1",
                   devDependencySuggestion: {
                     recommended: false,
                   },
-                  moduleFormat: 'dual',
+                  moduleFormat: "dual",
                   types: {
-                    kind: 'included',
+                    kind: "included",
                   },
                   engines: {
-                    node: '>=18',
+                    node: ">=18",
                   },
                   createPackage: {
-                    packageName: 'create-svelte',
+                    packageName: "create-svelte",
                     deprecated:
-                      'create-svelte has been deprecated - please use https://www.npmjs.com/package/sv instead',
+                      "create-svelte has been deprecated - please use https://www.npmjs.com/package/sv instead",
                   },
                 },
                 vulnerabilities: {
@@ -1160,82 +1191,82 @@ describe('component accessibility audits', () => {
                   },
                 },
                 metadata: {
-                  license: 'MIT',
-                  lastUpdated: '2026-03-29T20:58:44.673Z',
+                  license: "MIT",
+                  lastUpdated: "2026-03-29T20:58:44.673Z",
                   engines: {
-                    node: '>=18',
+                    node: ">=18",
                   },
                 },
                 isBinaryOnly: false,
                 totalLikes: 191,
               },
             ],
-            packages: ['vue', 'svelte'],
+            packages: ["vue", "svelte"],
           },
-        })
-        const results = await runAxe(wrapper)
-        expect(results.violations).toEqual([])
-      })
+        });
+        const results = await runAxe(wrapper);
+        expect(results.violations).toEqual([]);
+      });
 
-      it('should have no accessibility violations with empty data', async () => {
+      it("should have no accessibility violations with empty data", async () => {
         const wrapper = await mountSuspended(FacetScatterChart, {
           props: {
             packagesData: [],
             packages: [],
           },
-        })
+        });
 
-        const results = await runAxe(wrapper)
-        expect(results.violations).toEqual([])
-      })
-    })
+        const results = await runAxe(wrapper);
+        expect(results.violations).toEqual([]);
+      });
+    });
 
-    it('should have no accessibility violations with empty data', async () => {
+    it("should have no accessibility violations with empty data", async () => {
       const wrapper = await mountSuspended(PackageTrendsChart, {
         props: {
           weeklyDownloads: [],
-          packageName: 'vue',
+          packageName: "vue",
           createdIso: null,
           inModal: false,
         },
-      })
+      });
 
-      const results = await runAxe(wrapper)
-      expect(results.violations).toEqual([])
-    })
-  })
+      const results = await runAxe(wrapper);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('ChartSplitSparkline', () => {
+  describe("ChartSplitSparkline", () => {
     const dataset = [
       {
-        color: 'oklch(0.7025 0.132 160.37)',
-        name: 'vue',
+        color: "oklch(0.7025 0.132 160.37)",
+        name: "vue",
         series: [100_000, 200_000, 150_000],
-        type: 'line',
+        type: "line",
         dashIndices: [],
       },
       {
-        color: 'oklch(0.6917 0.1865 35.04)',
-        name: 'svelte',
+        color: "oklch(0.6917 0.1865 35.04)",
+        name: "svelte",
         series: [100_000, 200_000, 150_000],
-        type: 'line',
+        type: "line",
         dashIndices: [],
       },
     ] as Array<
       VueUiXyDatasetItem & {
-        color?: string
-        series: number[]
-        dashIndices?: number[]
+        color?: string;
+        series: number[];
+        dashIndices?: number[];
       }
-    >
-    const dates = [1743465600000, 1744070400000, 1744675200000]
+    >;
+    const dates = [1743465600000, 1744070400000, 1744675200000];
     const datetimeFormatterOptions = {
-      year: 'yyyy-MM-dd',
-      month: 'yyyy-MM-dd',
-      day: 'yyyy-MM-dd',
-    }
+      year: "yyyy-MM-dd",
+      month: "yyyy-MM-dd",
+      day: "yyyy-MM-dd",
+    };
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(ChartSplitSparkline, {
         props: {
           dataset,
@@ -1243,12 +1274,12 @@ describe('component accessibility audits', () => {
           datetimeFormatterOptions,
           showLastDatapointEstimation: false,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when empty', async () => {
+    it("should have no accessibility violations when empty", async () => {
       const component = await mountSuspended(ChartSplitSparkline, {
         props: {
           dataset: [],
@@ -1256,877 +1287,888 @@ describe('component accessibility audits', () => {
           datetimeFormatterOptions,
           showLastDatapointEstimation: false,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('TabRoot + TabList + TabItem + TabPanel', () => {
+  describe("TabRoot + TabList + TabItem + TabPanel", () => {
     function createTabsFixture(modelValue: string, idPrefix: string) {
       return defineComponent({
         setup() {
           return () =>
             h(TabRoot, { modelValue, idPrefix }, () => [
-              h(TabList, { ariaLabel: 'Test tabs' }, () => [
-                h(TabItem, { value: 'first' }, () => 'First'),
-                h(TabItem, { value: 'second' }, () => 'Second'),
+              h(TabList, { ariaLabel: "Test tabs" }, () => [
+                h(TabItem, { value: "first" }, () => "First"),
+                h(TabItem, { value: "second" }, () => "Second"),
               ]),
-              h(TabPanel, { value: 'first' }, () => 'First content'),
-              h(TabPanel, { value: 'second' }, () => 'Second content'),
-            ])
+              h(TabPanel, { value: "first" }, () => "First content"),
+              h(TabPanel, { value: "second" }, () => "Second content"),
+            ]);
         },
-      })
+      });
     }
 
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(createTabsFixture('first', 'a11y-test'))
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with second tab selected', async () => {
-      const component = await mountSuspended(createTabsFixture('second', 'a11y-test2'))
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('PackagePlaygrounds', () => {
-    it('should have no accessibility violations with single link', async () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(
+        createTabsFixture("first", "a11y-test"),
+      );
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations with second tab selected", async () => {
+      const component = await mountSuspended(
+        createTabsFixture("second", "a11y-test2"),
+      );
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("PackagePlaygrounds", () => {
+    it("should have no accessibility violations with single link", async () => {
       const links = [
         {
-          provider: 'stackblitz',
-          providerName: 'StackBlitz',
-          label: 'Open in StackBlitz',
-          url: 'https://stackblitz.com/example',
+          provider: "stackblitz",
+          providerName: "StackBlitz",
+          label: "Open in StackBlitz",
+          url: "https://stackblitz.com/example",
         },
-      ]
+      ];
       const component = await mountSuspended(PackagePlaygrounds, {
         props: { links },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with multiple links', async () => {
+    it("should have no accessibility violations with multiple links", async () => {
       const links = [
         {
-          provider: 'stackblitz',
-          providerName: 'StackBlitz',
-          label: 'Open in StackBlitz',
-          url: 'https://stackblitz.com/example',
+          provider: "stackblitz",
+          providerName: "StackBlitz",
+          label: "Open in StackBlitz",
+          url: "https://stackblitz.com/example",
         },
         {
-          provider: 'codesandbox',
-          providerName: 'CodeSandbox',
-          label: 'Open in CodeSandbox',
-          url: 'https://codesandbox.io/example',
+          provider: "codesandbox",
+          providerName: "CodeSandbox",
+          label: "Open in CodeSandbox",
+          url: "https://codesandbox.io/example",
         },
-      ]
+      ];
       const component = await mountSuspended(PackagePlaygrounds, {
         props: { links },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with empty links', async () => {
+    it("should have no accessibility violations with empty links", async () => {
       const component = await mountSuspended(PackagePlaygrounds, {
         props: { links: [] },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('PackageDependencies', () => {
-    it('should have no accessibility violations without dependencies', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("PackageDependencies", () => {
+    it("should have no accessibility violations without dependencies", async () => {
       const component = await mountSuspended(PackageDependencies, {
-        props: { packageName: 'test-package', version: '1.0.0' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { packageName: "test-package", version: "1.0.0" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with dependencies', async () => {
+    it("should have no accessibility violations with dependencies", async () => {
       const component = await mountSuspended(PackageDependencies, {
         props: {
-          packageName: 'test-package',
-          version: '1.0.0',
+          packageName: "test-package",
+          version: "1.0.0",
           dependencies: {
-            vue: '^3.0.0',
-            lodash: '^4.17.0',
+            vue: "^3.0.0",
+            lodash: "^4.17.0",
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with peer dependencies', async () => {
+    it("should have no accessibility violations with peer dependencies", async () => {
       const component = await mountSuspended(PackageDependencies, {
         props: {
-          packageName: 'test-package',
-          version: '1.0.0',
+          packageName: "test-package",
+          version: "1.0.0",
           peerDependencies: {
-            vue: '^3.0.0',
+            vue: "^3.0.0",
           },
           peerDependenciesMeta: {
             vue: { optional: true },
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageVersions', () => {
-    it('should have no accessibility violations', async () => {
+  describe("PackageVersions", () => {
+    it("should have no accessibility violations", async () => {
       // Minimal mock data satisfying SlimVersion type
       const mockVersion = {
-        version: '3.5.0',
+        version: "3.5.0",
         deprecated: undefined,
         tags: undefined,
-      }
+      };
       const component = await mountSuspended(PackageVersions, {
         props: {
-          packageName: 'vue',
+          packageName: "vue",
           versions: {
-            '3.5.0': mockVersion,
-            '3.4.0': { ...mockVersion, version: '3.4.0' },
+            "3.5.0": mockVersion,
+            "3.4.0": { ...mockVersion, version: "3.4.0" },
           },
           distTags: {
-            latest: '3.5.0',
-            next: '3.4.0',
+            latest: "3.5.0",
+            next: "3.4.0",
           },
           time: {
-            '3.5.0': '2024-01-15T00:00:00.000Z',
-            '3.4.0': '2024-01-01T00:00:00.000Z',
+            "3.5.0": "2024-01-15T00:00:00.000Z",
+            "3.4.0": "2024-01-01T00:00:00.000Z",
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageListControls', () => {
-    it('should have no accessibility violations', async () => {
+  describe("PackageListControls", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageListControls, {
         props: {
-          filter: '',
-          sort: 'downloads',
+          filter: "",
+          sort: "downloads",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with filter active', async () => {
+    it("should have no accessibility violations with filter active", async () => {
       const component = await mountSuspended(PackageListControls, {
         props: {
-          filter: 'vue',
-          sort: 'downloads',
+          filter: "vue",
+          sort: "downloads",
           totalCount: 100,
           filteredCount: 10,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageMaintainers', () => {
-    it('should have no accessibility violations without maintainers', async () => {
+  describe("PackageMaintainers", () => {
+    it("should have no accessibility violations without maintainers", async () => {
       const component = await mountSuspended(PackageMaintainers, {
-        props: { packageName: 'vue' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { packageName: "vue" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with maintainers', async () => {
+    it("should have no accessibility violations with maintainers", async () => {
       const component = await mountSuspended(PackageMaintainers, {
         props: {
-          packageName: 'vue',
+          packageName: "vue",
           maintainers: [
-            { name: 'yyx990803', email: 'evan@vuejs.org' },
-            { name: 'posva', email: 'posva@example.com' },
+            { name: "yyx990803", email: "evan@vuejs.org" },
+            { name: "posva", email: "posva@example.com" },
           ],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageCompatibility', () => {
-    it('should have no accessibility violations without engines', async () => {
+  describe("PackageCompatibility", () => {
+    it("should have no accessibility violations without engines", async () => {
       const component = await mountSuspended(PackageCompatibility, {
         props: {},
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with engines', async () => {
+    it("should have no accessibility violations with engines", async () => {
       const component = await mountSuspended(PackageCompatibility, {
         props: {
           engines: {
-            node: '>=14',
-            npm: '>=10',
+            node: ">=14",
+            npm: ">=10",
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageKeywords', () => {
-    it('should have no accessibility violations without keywords', async () => {
+  describe("PackageKeywords", () => {
+    it("should have no accessibility violations without keywords", async () => {
       const component = await mountSuspended(PackageKeywords, {
         props: {},
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with keywords', async () => {
+    it("should have no accessibility violations with keywords", async () => {
       const component = await mountSuspended(PackageKeywords, {
         props: {
-          keywords: ['keyword1', 'keyword2'],
+          keywords: ["keyword1", "keyword2"],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('CodeHeader', () => {
-    it('should have no accessibility violations', async () => {
+  describe("CodeHeader", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(CodeHeader, {
         props: {
-          filePath: 'misc/true.js',
+          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;',
+            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',
+          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 () => {
+          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, {
         props: {
           html: '<pre><code><span class="line">const x = 1;</span></code></pre>',
           lines: 1,
           selectedLines: null,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with selected lines', async () => {
+    it("should have no accessibility violations with selected lines", async () => {
       const component = await mountSuspended(CodeViewer, {
         props: {
           html: '<pre><code><span class="line">const x = 1;</span><span class="line">const y = 2;</span></code></pre>',
           lines: 2,
           selectedLines: { start: 1, end: 1 },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('CodeDirectoryListing', () => {
+  describe("CodeDirectoryListing", () => {
     const mockTree = [
-      { name: 'src', type: 'directory' as const, path: 'src', children: [] },
-      { name: 'index.js', type: 'file' as const, path: 'index.js', size: 1024 },
+      { name: "src", type: "directory" as const, path: "src", children: [] },
+      { name: "index.js", type: "file" as const, path: "index.js", size: 1024 },
       {
-        name: 'package.json',
-        type: 'file' as const,
-        path: 'package.json',
+        name: "package.json",
+        type: "file" as const,
+        path: "package.json",
         size: 512,
       },
-    ]
+    ];
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(CodeDirectoryListing, {
         props: {
           tree: mockTree,
-          currentPath: '',
-          baseUrl: '/package-code/vue',
+          currentPath: "",
+          baseUrl: "/package-code/vue",
           baseRoute: {
-            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
+            params: { packageName: "vue", version: "3.0.0", filePath: "" },
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with nested path', async () => {
+    it("should have no accessibility violations with nested path", async () => {
       const component = await mountSuspended(CodeDirectoryListing, {
         props: {
           tree: mockTree,
-          currentPath: 'src',
-          baseUrl: '/package-code/vue',
+          currentPath: "src",
+          baseUrl: "/package-code/vue",
           baseRoute: {
-            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
+            params: { packageName: "vue", version: "3.0.0", filePath: "" },
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('CodeFileTree', () => {
+  describe("CodeFileTree", () => {
     const mockTree = [
       {
-        name: 'src',
-        type: 'directory' as const,
-        path: 'src',
-        children: [{ name: 'index.ts', type: 'file' as const, path: 'src/index.ts' }],
+        name: "src",
+        type: "directory" as const,
+        path: "src",
+        children: [
+          { name: "index.ts", type: "file" as const, path: "src/index.ts" },
+        ],
       },
-      { name: 'package.json', type: 'file' as const, path: 'package.json' },
-    ]
+      { name: "package.json", type: "file" as const, path: "package.json" },
+    ];
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(CodeFileTree, {
         props: {
           tree: mockTree,
-          currentPath: '',
-          baseUrl: '/package-code/vue',
+          currentPath: "",
+          baseUrl: "/package-code/vue",
           baseRoute: {
-            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
+            params: { packageName: "vue", version: "3.0.0", filePath: "" },
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with selected file', async () => {
+    it("should have no accessibility violations with selected file", async () => {
       const component = await mountSuspended(CodeFileTree, {
         props: {
           tree: mockTree,
-          currentPath: 'src/index.ts',
-          baseUrl: '/package-code/vue',
+          currentPath: "src/index.ts",
+          baseUrl: "/package-code/vue",
           baseRoute: {
-            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
+            params: { packageName: "vue", version: "3.0.0", filePath: "" },
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('HeaderConnectorModal', () => {
-    it('should have no accessibility violations when closed', async () => {
+  describe("HeaderConnectorModal", () => {
+    it("should have no accessibility violations when closed", async () => {
       const component = await mountSuspended(HeaderConnectorModal, {
         props: { open: false },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when open (disconnected)', async () => {
+    it("should have no accessibility violations when open (disconnected)", async () => {
       const component = await mountSuspended(HeaderConnectorModal, {
         props: { open: true },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('HeaderAccountMenu.server', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(HeaderAccountMenuServer)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('HeaderAccountMenu', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(HeaderAccountMenu)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('PackageClaimPackageModal', () => {
-    it('should have no accessibility violations when closed', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("HeaderAccountMenu.server", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(HeaderAccountMenuServer);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("HeaderAccountMenu", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(HeaderAccountMenu);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("PackageClaimPackageModal", () => {
+    it("should have no accessibility violations when closed", async () => {
       const component = await mountSuspended(PackageClaimPackageModal, {
         props: {
-          packageName: 'test-package',
+          packageName: "test-package",
           packageScope: undefined,
           canPublishToScope: true,
           open: false,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when open', async () => {
+    it("should have no accessibility violations when open", async () => {
       const component = await mountSuspended(PackageClaimPackageModal, {
         props: {
-          packageName: 'test-package',
+          packageName: "test-package",
           packageScope: undefined,
           canPublishToScope: true,
           open: true,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageProvenanceSection', () => {
-    it('should have no accessibility violations with minimal details', async () => {
+  describe("PackageProvenanceSection", () => {
+    it("should have no accessibility violations with minimal details", async () => {
       const component = await mountSuspended(PackageProvenanceSection, {
         props: {
           details: {
-            provider: 'github',
-            providerLabel: 'GitHub Actions',
+            provider: "github",
+            providerLabel: "GitHub Actions",
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with full details', async () => {
+    it("should have no accessibility violations with full details", async () => {
       const component = await mountSuspended(PackageProvenanceSection, {
         props: {
           details: {
-            provider: 'github',
-            providerLabel: 'GitHub Actions',
-            buildSummaryUrl: 'https://github.com/owner/repo/actions/runs/123',
-            sourceCommitUrl: 'https://github.com/owner/repo/commit/abc123',
-            sourceCommitSha: 'abc123def456',
-            buildFileUrl: 'https://github.com/owner/repo/blob/main/.github/workflows/release.yml',
-            buildFilePath: '.github/workflows/release.yml',
-            publicLedgerUrl: 'https://search.sigstore.dev/example',
+            provider: "github",
+            providerLabel: "GitHub Actions",
+            buildSummaryUrl: "https://github.com/owner/repo/actions/runs/123",
+            sourceCommitUrl: "https://github.com/owner/repo/commit/abc123",
+            sourceCommitSha: "abc123def456",
+            buildFileUrl:
+              "https://github.com/owner/repo/blob/main/.github/workflows/release.yml",
+            buildFilePath: ".github/workflows/release.yml",
+            publicLedgerUrl: "https://search.sigstore.dev/example",
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('OrgOperationsQueue', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(OrgOperationsQueue)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('PackageList', () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("OrgOperationsQueue", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(OrgOperationsQueue);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("PackageList", () => {
     const mockResults = [
       {
         package: {
-          name: 'vue',
-          version: '3.5.0',
-          description: 'The progressive JavaScript framework',
-          date: '2024-01-15T00:00:00.000Z',
-          keywords: ['framework'],
+          name: "vue",
+          version: "3.5.0",
+          description: "The progressive JavaScript framework",
+          date: "2024-01-15T00:00:00.000Z",
+          keywords: ["framework"],
           links: {},
-          publisher: { username: 'yyx990803' },
+          publisher: { username: "yyx990803" },
         },
         searchScore: 100000,
       },
       {
         package: {
-          name: 'react',
-          version: '18.2.0',
-          description: 'React is a JavaScript library for building user interfaces.',
-          date: '2024-01-10T00:00:00.000Z',
-          keywords: ['react'],
+          name: "react",
+          version: "18.2.0",
+          description:
+            "React is a JavaScript library for building user interfaces.",
+          date: "2024-01-10T00:00:00.000Z",
+          keywords: ["react"],
           links: {},
-          publisher: { username: 'fb' },
+          publisher: { username: "fb" },
         },
         searchScore: 90000,
       },
-    ]
+    ];
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageList, {
         props: { results: mockResults },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with empty results', async () => {
+    it("should have no accessibility violations with empty results", async () => {
       const component = await mountSuspended(PackageList, {
         props: { results: [] },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when loading', async () => {
+    it("should have no accessibility violations when loading", async () => {
       const component = await mountSuspended(PackageList, {
         props: {
           results: mockResults,
           isLoading: true,
           hasMore: true,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageMetricsBadges', () => {
-    it('should have no accessibility violations', async () => {
+  describe("PackageMetricsBadges", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageMetricsBadges, {
-        props: { packageName: 'vue' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { packageName: "vue" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with version', async () => {
+    it("should have no accessibility violations with version", async () => {
       const component = await mountSuspended(PackageMetricsBadges, {
         props: {
-          packageName: 'vue',
-          version: '3.5.0',
+          packageName: "vue",
+          version: "3.5.0",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageAccessControls', () => {
-    it('should have no accessibility violations', async () => {
+  describe("PackageAccessControls", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageAccessControls, {
-        props: { packageName: '@nuxt/kit' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { packageName: "@nuxt/kit" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for unscoped package', async () => {
+    it("should have no accessibility violations for unscoped package", async () => {
       // Unscoped packages don't show the access controls section
       const component = await mountSuspended(PackageAccessControls, {
-        props: { packageName: 'vue' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('OrgMembersPanel', () => {
-    it('should have no accessibility violations', async () => {
+        props: { packageName: "vue" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("OrgMembersPanel", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(OrgMembersPanel, {
-        props: { orgName: 'nuxt' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('OrgTeamsPanel', () => {
-    it('should have no accessibility violations', async () => {
+        props: { orgName: "nuxt" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("OrgTeamsPanel", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(OrgTeamsPanel, {
-        props: { orgName: 'nuxt' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('CodeMobileTreeDrawer', () => {
+        props: { orgName: "nuxt" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("CodeMobileTreeDrawer", () => {
     const mockTree = [
       {
-        name: 'src',
-        type: 'directory' as const,
-        path: 'src',
-        children: [{ name: 'index.ts', type: 'file' as const, path: 'src/index.ts' }],
+        name: "src",
+        type: "directory" as const,
+        path: "src",
+        children: [
+          { name: "index.ts", type: "file" as const, path: "src/index.ts" },
+        ],
       },
-      { name: 'package.json', type: 'file' as const, path: 'package.json' },
-    ]
+      { name: "package.json", type: "file" as const, path: "package.json" },
+    ];
 
-    it('should have no accessibility violations when closed', async () => {
+    it("should have no accessibility violations when closed", async () => {
       const component = await mountSuspended(CodeMobileTreeDrawer, {
         props: {
           tree: mockTree,
-          currentPath: '',
-          baseUrl: '/package-code/vue',
+          currentPath: "",
+          baseUrl: "/package-code/vue",
           baseRoute: {
-            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
+            params: { packageName: "vue", version: "3.0.0", filePath: "" },
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('ColumnPicker', () => {
+  describe("ColumnPicker", () => {
     const mockColumns: ColumnConfig[] = [
-      { id: 'name', visible: true, sortable: true },
-      { id: 'version', visible: true, sortable: false },
-      { id: 'downloads', visible: false, sortable: true },
-    ]
+      { id: "name", visible: true, sortable: true },
+      { id: "version", visible: true, sortable: false },
+      { id: "downloads", visible: false, sortable: true },
+    ];
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(ColumnPicker, {
         props: { columns: mockColumns },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('FilterChips', () => {
-    it('should have no accessibility violations with chips', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("FilterChips", () => {
+    it("should have no accessibility violations with chips", async () => {
       const chips: FilterChip[] = [
-        { id: 'text', type: 'text', label: 'Search', value: 'react' },
-        { id: 'keyword', type: 'keywords', label: 'Keyword', value: 'hooks' },
-      ]
+        { id: "text", type: "text", label: "Search", value: "react" },
+        { id: "keyword", type: "keywords", label: "Keyword", value: "hooks" },
+      ];
       const component = await mountSuspended(FilterChips, {
         props: { chips },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with empty chips', async () => {
+    it("should have no accessibility violations with empty chips", async () => {
       const component = await mountSuspended(FilterChips, {
         props: { chips: [] },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('FilterPanel', () => {
+  describe("FilterPanel", () => {
     const defaultFilters = {
-      text: '',
-      searchScope: 'name' as const,
-      downloadRange: 'any' as const,
-      updatedWithin: 'any' as const,
-      security: 'all' as const,
+      text: "",
+      searchScope: "name" as const,
+      downloadRange: "any" as const,
+      updatedWithin: "any" as const,
+      security: "all" as const,
       keywords: [],
-    }
+    };
 
-    it('should have no accessibility violations (collapsed)', async () => {
+    it("should have no accessibility violations (collapsed)", async () => {
       const component = await mountSuspended(FilterPanel, {
         props: { filters: defaultFilters },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with active filters', async () => {
+    it("should have no accessibility violations with active filters", async () => {
       const component = await mountSuspended(FilterPanel, {
         props: {
           filters: {
             ...defaultFilters,
-            text: 'react',
-            keywords: ['hooks'],
+            text: "react",
+            keywords: ["hooks"],
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageListToolbar', () => {
+  describe("PackageListToolbar", () => {
     const defaultFilters = {
-      text: '',
-      searchScope: 'name' as const,
-      downloadRange: 'any' as const,
-      updatedWithin: 'any' as const,
-      security: 'all' as const,
+      text: "",
+      searchScope: "name" as const,
+      downloadRange: "any" as const,
+      updatedWithin: "any" as const,
+      security: "all" as const,
       keywords: [],
-    }
+    };
 
     const mockColumns: ColumnConfig[] = [
-      { id: 'name', visible: true, sortable: true },
-      { id: 'version', visible: true, sortable: false },
-    ]
+      { id: "name", visible: true, sortable: true },
+      { id: "version", visible: true, sortable: false },
+    ];
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageListToolbar, {
         props: {
           filters: defaultFilters,
-          sortOption: 'downloads-week-desc',
-          viewMode: 'cards',
+          sortOption: "downloads-week-desc",
+          viewMode: "cards",
           columns: mockColumns,
-          paginationMode: 'infinite',
+          paginationMode: "infinite",
           pageSize: 25,
           totalCount: 100,
           filteredCount: 100,
           activeFilters: [],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations in search context', async () => {
+    it("should have no accessibility violations in search context", async () => {
       const component = await mountSuspended(PackageListToolbar, {
         props: {
           filters: defaultFilters,
-          sortOption: 'relevance-desc',
-          viewMode: 'cards',
+          sortOption: "relevance-desc",
+          viewMode: "cards",
           columns: mockColumns,
-          paginationMode: 'infinite',
+          paginationMode: "infinite",
           pageSize: 25,
           totalCount: 100,
           filteredCount: 100,
           activeFilters: [],
           searchContext: true,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should total package count in paginated mode', async () => {
+    it("should total package count in paginated mode", async () => {
       const component = await mountSuspended(PackageListToolbar, {
         props: {
           filters: defaultFilters,
-          sortOption: 'downloads-week-desc',
-          viewMode: 'table',
+          sortOption: "downloads-week-desc",
+          viewMode: "table",
           columns: mockColumns,
-          paginationMode: 'paginated',
+          paginationMode: "paginated",
           pageSize: 25,
           totalCount: 9544,
           filteredCount: 9544,
           activeFilters: [],
         },
-      })
+      });
 
-      const html = component.html()
-      expect(html).toContain('25 of 9,544')
-    })
-  })
+      const html = component.html();
+      expect(html).toContain("25 of 9,544");
+    });
+  });
 
-  describe('PackageTable', () => {
+  describe("PackageTable", () => {
     const mockResults = [
       {
         package: {
-          name: 'vue',
-          version: '3.5.0',
-          description: 'The progressive JavaScript framework',
-          date: '2024-01-15T00:00:00.000Z',
-          keywords: ['framework'],
+          name: "vue",
+          version: "3.5.0",
+          description: "The progressive JavaScript framework",
+          date: "2024-01-15T00:00:00.000Z",
+          keywords: ["framework"],
           links: {},
-          publisher: { username: 'yyx990803' },
+          publisher: { username: "yyx990803" },
         },
         searchScore: 100000,
       },
-    ]
+    ];
 
     const mockColumns: ColumnConfig[] = [
-      { id: 'name', visible: true, sortable: true },
-      { id: 'version', visible: true, sortable: false },
-      { id: 'description', visible: true, sortable: false },
-      { id: 'downloads', visible: true, sortable: true },
-    ]
+      { id: "name", visible: true, sortable: true },
+      { id: "version", visible: true, sortable: false },
+      { id: "description", visible: true, sortable: false },
+      { id: "downloads", visible: true, sortable: true },
+    ];
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageTable, {
         props: {
           results: mockResults,
           columns: mockColumns,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with empty results', async () => {
+    it("should have no accessibility violations with empty results", async () => {
       const component = await mountSuspended(PackageTable, {
         props: {
           results: [],
           columns: mockColumns,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when loading', async () => {
+    it("should have no accessibility violations when loading", async () => {
       const component = await mountSuspended(PackageTable, {
         props: {
           results: [],
           columns: mockColumns,
           isLoading: true,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageTableRow', () => {
+  describe("PackageTableRow", () => {
     const mockResult = {
       package: {
-        name: 'lodash',
-        version: '4.17.21',
-        description: 'A modern JavaScript utility library',
-        date: '2024-01-01T00:00:00.000Z',
-        keywords: ['utility', 'modules'],
+        name: "lodash",
+        version: "4.17.21",
+        description: "A modern JavaScript utility library",
+        date: "2024-01-01T00:00:00.000Z",
+        keywords: ["utility", "modules"],
         links: {},
-        publisher: { username: 'jdalton' },
-        maintainers: [{ username: 'jdalton', email: 'test@test.com' }],
+        publisher: { username: "jdalton" },
+        maintainers: [{ username: "jdalton", email: "test@test.com" }],
       },
       downloads: { weekly: 50000000 },
-      updated: '2024-01-01T00:00:00.000Z',
+      updated: "2024-01-01T00:00:00.000Z",
       searchScore: 99999,
-    }
+    };
 
     const mockColumns: ColumnConfig[] = [
-      { id: 'name', visible: true, sortable: true },
-      { id: 'version', visible: true, sortable: false },
-      { id: 'description', visible: true, sortable: false },
-    ]
+      { id: "name", visible: true, sortable: true },
+      { id: "version", visible: true, sortable: false },
+      { id: "description", visible: true, sortable: false },
+    ];
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       // PackageTableRow needs to be wrapped in a table structure
       const component = await mountSuspended(PackageTableRow, {
         props: {
@@ -2139,136 +2181,142 @@ describe('component accessibility audits', () => {
           },
         },
         attachTo: (() => {
-          const table = document.createElement('table')
-          const tbody = document.createElement('tbody')
-          table.appendChild(tbody)
-          document.body.appendChild(table)
-          return tbody
+          const table = document.createElement("table");
+          const tbody = document.createElement("tbody");
+          table.appendChild(tbody);
+          document.body.appendChild(table);
+          return tbody;
         })(),
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('PaginationControls', () => {
-    it('should have no accessibility violations in infinite mode', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("PaginationControls", () => {
+    it("should have no accessibility violations in infinite mode", async () => {
       const component = await mountSuspended(PaginationControls, {
         props: {
-          mode: 'infinite',
+          mode: "infinite",
           pageSize: 25,
           currentPage: 1,
           totalItems: 100,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations in paginated mode', async () => {
+    it("should have no accessibility violations in paginated mode", async () => {
       const component = await mountSuspended(PaginationControls, {
         props: {
-          mode: 'paginated',
+          mode: "paginated",
           pageSize: 25,
           currentPage: 1,
           totalItems: 100,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with multiple pages', async () => {
+    it("should have no accessibility violations with multiple pages", async () => {
       const component = await mountSuspended(PaginationControls, {
         props: {
-          mode: 'paginated',
+          mode: "paginated",
           pageSize: 10,
           currentPage: 5,
           totalItems: 200,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('ViewModeToggle', () => {
-    it('should have no accessibility violations in cards mode', async () => {
+  describe("ViewModeToggle", () => {
+    it("should have no accessibility violations in cards mode", async () => {
       const component = await mountSuspended(ViewModeToggle, {
-        props: { modelValue: 'cards' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { modelValue: "cards" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations in table mode', async () => {
+    it("should have no accessibility violations in table mode", async () => {
       const component = await mountSuspended(ViewModeToggle, {
-        props: { modelValue: 'table' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('PackageVulnerabilityTree', () => {
-    it('should have no accessibility violations in idle state', async () => {
+        props: { modelValue: "table" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("PackageVulnerabilityTree", () => {
+    it("should have no accessibility violations in idle state", async () => {
       const component = await mountSuspended(PackageVulnerabilityTree, {
         props: {
-          packageName: 'vue',
-          version: '3.5.0',
+          packageName: "vue",
+          version: "3.5.0",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageDeprecatedTree', () => {
-    it('should have no accessibility violations in idle state', async () => {
+  describe("PackageDeprecatedTree", () => {
+    it("should have no accessibility violations in idle state", async () => {
       const component = await mountSuspended(PackageDeprecatedTree, {
         props: {
-          packageName: 'vue',
-          version: '3.5.0',
+          packageName: "vue",
+          version: "3.5.0",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('DependencyPathPopup', () => {
-    it('should have no accessibility violations with short path', async () => {
+  describe("DependencyPathPopup", () => {
+    it("should have no accessibility violations with short path", async () => {
       const component = await mountSuspended(DependencyPathPopup, {
         props: {
-          path: ['root@1.0.0', 'vuln-dep@2.0.0'],
+          path: ["root@1.0.0", "vuln-dep@2.0.0"],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with deep path', async () => {
+    it("should have no accessibility violations with deep path", async () => {
       const component = await mountSuspended(DependencyPathPopup, {
         props: {
-          path: ['root@1.0.0', 'dep-a@1.0.0', 'dep-b@2.0.0', 'dep-c@3.0.0', 'vulnerable-pkg@4.0.0'],
+          path: [
+            "root@1.0.0",
+            "dep-a@1.0.0",
+            "dep-b@2.0.0",
+            "dep-c@3.0.0",
+            "vulnerable-pkg@4.0.0",
+          ],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
   // Compare feature components
-  describe('CompareFacetSelector', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(CompareFacetSelector)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('CompareLineChart', () => {
-    it('should have no accessibility violations with no packages', async () => {
+  describe("CompareFacetSelector", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(CompareFacetSelector);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("CompareLineChart", () => {
+    it("should have no accessibility violations with no packages", async () => {
       const component = await mountSuspended(CompareLineChart, {
         props: { packages: [] },
         global: {
@@ -2278,14 +2326,14 @@ describe('component accessibility audits', () => {
             },
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with packages selected', async () => {
+    it("should have no accessibility violations with packages selected", async () => {
       const component = await mountSuspended(CompareLineChart, {
-        props: { packages: ['vue', 'react'] },
+        props: { packages: ["vue", "react"] },
         global: {
           stubs: {
             TrendsChart: {
@@ -2293,524 +2341,526 @@ describe('component accessibility audits', () => {
             },
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('ComparePackageSelector', () => {
-    it('should have no accessibility violations with no packages', async () => {
+  describe("ComparePackageSelector", () => {
+    it("should have no accessibility violations with no packages", async () => {
       const component = await mountSuspended(ComparePackageSelector, {
         props: { modelValue: [] },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with packages selected', async () => {
+    it("should have no accessibility violations with packages selected", async () => {
       const component = await mountSuspended(ComparePackageSelector, {
-        props: { modelValue: ['vue', 'react'] },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { modelValue: ["vue", "react"] },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations at max packages', async () => {
+    it("should have no accessibility violations at max packages", async () => {
       const component = await mountSuspended(ComparePackageSelector, {
-        props: { modelValue: ['vue', 'react', 'angular', 'svelte'], max: 4 },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('CompareFacetRow', () => {
-    it('should have no accessibility violations with basic values', async () => {
+        props: { modelValue: ["vue", "react", "angular", "svelte"], max: 4 },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("CompareFacetRow", () => {
+    it("should have no accessibility violations with basic values", async () => {
       const component = await mountSuspended(CompareFacetRow, {
         props: {
-          label: 'Downloads',
-          description: 'Weekly download count',
+          label: "Downloads",
+          description: "Weekly download count",
           values: [
-            { raw: 1000, display: '1,000' },
-            { raw: 2000, display: '2,000' },
+            { raw: 1000, display: "1,000" },
+            { raw: 2000, display: "2,000" },
           ],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when loading', async () => {
+    it("should have no accessibility violations when loading", async () => {
       const component = await mountSuspended(CompareFacetRow, {
         props: {
-          label: 'Install Size',
-          description: 'Total install size',
+          label: "Install Size",
+          description: "Total install size",
           values: [null, null],
           loading: true,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('CompareComparisonGrid', () => {
-    it('should have no accessibility violations with 2 columns', async () => {
+  describe("CompareComparisonGrid", () => {
+    it("should have no accessibility violations with 2 columns", async () => {
       const component = await mountSuspended(CompareComparisonGrid, {
         props: {
-          columns: [{ name: 'vue' }, { name: 'react' }],
+          columns: [{ name: "vue" }, { name: "react" }],
         },
         slots: {
-          default: '<div>Grid content</div>',
+          default: "<div>Grid content</div>",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with 3 columns', async () => {
+    it("should have no accessibility violations with 3 columns", async () => {
       const component = await mountSuspended(CompareComparisonGrid, {
         props: {
-          columns: [{ name: 'vue' }, { name: 'react' }, { name: 'angular' }],
+          columns: [{ name: "vue" }, { name: "react" }, { name: "angular" }],
         },
         slots: {
-          default: '<div>Grid content</div>',
+          default: "<div>Grid content</div>",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with no-dependency column', async () => {
+    it("should have no accessibility violations with no-dependency column", async () => {
       const component = await mountSuspended(CompareComparisonGrid, {
         props: {
-          columns: [{ name: 'vue' }, { name: 'react' }],
+          columns: [{ name: "vue" }, { name: "react" }],
           showNoDependency: true,
         },
         slots: {
-          default: '<div>Grid content</div>',
+          default: "<div>Grid content</div>",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('CompareReplacementSuggestion', () => {
-    it('should have no accessibility violations for nodep variant with native replacement', async () => {
+  describe("CompareReplacementSuggestion", () => {
+    it("should have no accessibility violations for nodep variant with native replacement", async () => {
       const component = await mountSuspended(CompareReplacementSuggestion, {
         props: {
-          packageName: 'array-includes',
+          packageName: "array-includes",
           mapping: {
-            type: 'module',
-            moduleName: 'array-includes',
-            replacements: ['Array.prototype.includes'],
+            type: "module",
+            moduleName: "array-includes",
+            replacements: ["Array.prototype.includes"],
           },
           replacement: {
-            id: 'Array.prototype.includes',
-            type: 'native',
+            id: "Array.prototype.includes",
+            type: "native",
             url: {
-              type: 'mdn',
-              id: 'Web/JavaScript/Reference/Global_Objects/Array/includes',
+              type: "mdn",
+              id: "Web/JavaScript/Reference/Global_Objects/Array/includes",
             },
             webFeatureId: {
-              featureId: 'array-includes',
-              compatKey: 'javascript.builtins.Array.includes',
+              featureId: "array-includes",
+              compatKey: "javascript.builtins.Array.includes",
             },
             engines: [
-              { engine: 'chrome', minVersion: '47' },
-              { engine: 'edge', minVersion: '14' },
-              { engine: 'firefox', minVersion: '43' },
-              { engine: 'safari', minVersion: '9' },
-              { engine: 'nodejs', minVersion: '6.0.0' },
+              { engine: "chrome", minVersion: "47" },
+              { engine: "edge", minVersion: "14" },
+              { engine: "firefox", minVersion: "43" },
+              { engine: "safari", minVersion: "9" },
+              { engine: "nodejs", minVersion: "6.0.0" },
             ],
           },
-          variant: 'nodep',
+          variant: "nodep",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for nodep variant with simple replacement', async () => {
+    it("should have no accessibility violations for nodep variant with simple replacement", async () => {
       const component = await mountSuspended(CompareReplacementSuggestion, {
         props: {
-          packageName: 'is-even',
+          packageName: "is-even",
           mapping: {
-            type: 'module',
-            moduleName: 'is-even',
-            replacements: ['snippet::is-even'],
+            type: "module",
+            moduleName: "is-even",
+            replacements: ["snippet::is-even"],
           },
           replacement: {
-            id: 'snippet::is-even',
-            type: 'simple',
-            description: 'You can use the modulo operator to check if a number is even.',
-            example: '(n % 2) === 0',
+            id: "snippet::is-even",
+            type: "simple",
+            description:
+              "You can use the modulo operator to check if a number is even.",
+            example: "(n % 2) === 0",
           },
-          variant: 'nodep',
+          variant: "nodep",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for info variant with documented replacement', async () => {
+    it("should have no accessibility violations for info variant with documented replacement", async () => {
       const component = await mountSuspended(CompareReplacementSuggestion, {
         props: {
-          packageName: 'moment',
+          packageName: "moment",
           mapping: {
-            type: 'module',
-            moduleName: 'moment',
-            replacements: ['day.js', 'date-fns', 'luxon', 'Date'],
-            url: { type: 'e18e', id: 'moment' },
+            type: "module",
+            moduleName: "moment",
+            replacements: ["day.js", "date-fns", "luxon", "Date"],
+            url: { type: "e18e", id: "moment" },
           },
           replacement: {
-            id: 'day.js',
-            type: 'documented',
-            url: { type: 'e18e', id: 'moment' },
-            replacementModule: 'day.js',
+            id: "day.js",
+            type: "documented",
+            url: { type: "e18e", id: "moment" },
+            replacementModule: "day.js",
           },
-          variant: 'info',
-        },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('PackageManagerSelect', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(PackageManagerSelect)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('CompareFacetCard', () => {
-    it('should have no accessibility violations with numeric values', async () => {
+          variant: "info",
+        },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("PackageManagerSelect", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(PackageManagerSelect);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("CompareFacetCard", () => {
+    it("should have no accessibility violations with numeric values", async () => {
       const component = await mountSuspended(CompareFacetCard, {
         props: {
-          label: 'Downloads',
-          description: 'Weekly download count',
+          label: "Downloads",
+          description: "Weekly download count",
           values: [
-            { raw: 1000, display: '1,000' },
-            { raw: 2000, display: '2,000' },
+            { raw: 1000, display: "1,000" },
+            { raw: 2000, display: "2,000" },
           ],
-          headers: ['vue', 'react'],
+          headers: ["vue", "react"],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when loading', async () => {
+    it("should have no accessibility violations when loading", async () => {
       const component = await mountSuspended(CompareFacetCard, {
         props: {
-          label: 'Install Size',
+          label: "Install Size",
           values: [null, null],
-          headers: ['vue', 'react'],
+          headers: ["vue", "react"],
           facetLoading: true,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('SettingsAccentColorPicker', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(SettingsAccentColorPicker)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('SettingsBgThemePicker', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(SettingsBgThemePicker)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('TooltipBase', () => {
-    it('should have no accessibility violations when hidden', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("SettingsAccentColorPicker", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(SettingsAccentColorPicker);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("SettingsBgThemePicker", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(SettingsBgThemePicker);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("TooltipBase", () => {
+    it("should have no accessibility violations when hidden", async () => {
       const component = await mountSuspended(TooltipBase, {
-        props: { text: 'Tooltip text', isVisible: false },
-        slots: { default: '<button>Trigger</button>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations when visible', async () => {
+        props: { text: "Tooltip text", isVisible: false },
+        slots: { default: "<button>Trigger</button>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations when visible", async () => {
       const component = await mountSuspended(TooltipBase, {
-        props: { text: 'Tooltip text', isVisible: true },
-        slots: { default: '<button>Trigger</button>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('BuildEnvironment', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(BuildEnvironment)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations in footer mode', async () => {
+        props: { text: "Tooltip text", isVisible: true },
+        slots: { default: "<button>Trigger</button>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("BuildEnvironment", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(BuildEnvironment);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations in footer mode", async () => {
       const component = await mountSuspended(BuildEnvironment, {
         props: { footer: true },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('CallToAction', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(CallToAction)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('CopyToClipboardButton', () => {
-    it('should have no accessibility violations in default state', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("CallToAction", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(CallToAction);
+      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, {
         props: { copied: false },
-        slots: { default: '<code>npm install vue</code>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        slots: { default: "<code>npm install vue</code>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations in copied state', async () => {
+    it("should have no accessibility violations in copied state", async () => {
       const component = await mountSuspended(CopyToClipboardButton, {
         props: { copied: true },
-        slots: { default: '<code>npm install vue</code>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('CollapsibleSection', () => {
-    it('should have no accessibility violations', async () => {
+        slots: { default: "<code>npm install vue</code>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("CollapsibleSection", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(CollapsibleSection, {
-        props: { title: 'Section Title', id: 'test-section' },
-        slots: { default: '<p>Section content</p>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with custom heading level', async () => {
+        props: { title: "Section Title", id: "test-section" },
+        slots: { default: "<p>Section content</p>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations with custom heading level", async () => {
       const component = await mountSuspended(CollapsibleSection, {
         props: {
-          title: 'Section Title',
-          id: 'test-section',
-          headingLevel: 'h3',
+          title: "Section Title",
+          id: "test-section",
+          headingLevel: "h3",
         },
-        slots: { default: '<p>Section content</p>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        slots: { default: "<p>Section content</p>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when loading', async () => {
+    it("should have no accessibility violations when loading", async () => {
       const component = await mountSuspended(CollapsibleSection, {
-        props: { title: 'Section Title', id: 'test-section', isLoading: true },
-        slots: { default: '<p>Loading content...</p>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('TerminalExecute', () => {
-    it('should have no accessibility violations', async () => {
+        props: { title: "Section Title", id: "test-section", isLoading: true },
+        slots: { default: "<p>Loading content...</p>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("TerminalExecute", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(TerminalExecute, {
-        props: { packageName: 'create-vite' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { packageName: "create-vite" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for create package', async () => {
+    it("should have no accessibility violations for create package", async () => {
       const component = await mountSuspended(TerminalExecute, {
-        props: { packageName: 'create-vite', isCreatePackage: true },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('TerminalInstall', () => {
-    it('should have no accessibility violations', async () => {
+        props: { packageName: "create-vite", isCreatePackage: true },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("TerminalInstall", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(TerminalInstall, {
-        props: { packageName: 'vue' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { packageName: "vue" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with version', async () => {
+    it("should have no accessibility violations with version", async () => {
       const component = await mountSuspended(TerminalInstall, {
-        props: { packageName: 'vue', requestedVersion: '3.5.0' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { packageName: "vue", requestedVersion: "3.5.0" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with types package', async () => {
+    it("should have no accessibility violations with types package", async () => {
       const component = await mountSuspended(TerminalInstall, {
-        props: { packageName: 'lodash', typesPackageName: '@types/lodash' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { packageName: "lodash", typesPackageName: "@types/lodash" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with executable info', async () => {
+    it("should have no accessibility violations with executable info", async () => {
       const component = await mountSuspended(TerminalInstall, {
         props: {
-          packageName: 'eslint',
-          executableInfo: { hasExecutable: true, primaryCommand: 'eslint' },
+          packageName: "eslint",
+          executableInfo: { hasExecutable: true, primaryCommand: "eslint" },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('LicenseDisplay', () => {
-    it('should have no accessibility violations with simple license', async () => {
+  describe("LicenseDisplay", () => {
+    it("should have no accessibility violations with simple license", async () => {
       const component = await mountSuspended(LicenseDisplay, {
-        props: { license: 'MIT' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { license: "MIT" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with compound license', async () => {
+    it("should have no accessibility violations with compound license", async () => {
       const component = await mountSuspended(LicenseDisplay, {
-        props: { license: 'MIT OR Apache-2.0' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('PackageInstallScripts', () => {
-    it('should have no accessibility violations', async () => {
+        props: { license: "MIT OR Apache-2.0" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("PackageInstallScripts", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageInstallScripts, {
         props: {
-          packageName: 'esbuild',
-          version: '0.25.0',
+          packageName: "esbuild",
+          version: "0.25.0",
           installScripts: {
-            scripts: ['postinstall'],
-            content: { postinstall: 'node install.js' },
+            scripts: ["postinstall"],
+            content: { postinstall: "node install.js" },
             npxDependencies: {},
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with npx dependencies', async () => {
+    it("should have no accessibility violations with npx dependencies", async () => {
       const component = await mountSuspended(PackageInstallScripts, {
         props: {
-          packageName: 'husky',
-          version: '9.1.0',
+          packageName: "husky",
+          version: "9.1.0",
           installScripts: {
-            scripts: ['postinstall'],
-            content: { postinstall: 'husky install' },
-            npxDependencies: { husky: '^9.0.0' },
+            scripts: ["postinstall"],
+            content: { postinstall: "husky install" },
+            npxDependencies: { husky: "^9.0.0" },
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('AuthorAvatar', () => {
-    it('should have no accessibility violations with fallback text', async () => {
+  describe("AuthorAvatar", () => {
+    it("should have no accessibility violations with fallback text", async () => {
       const component = await mountSuspended(AuthorAvatar, {
         props: {
           author: {
-            name: 'Daniel Roe',
-            blueskyHandle: 'danielroe.dev',
+            name: "Daniel Roe",
+            blueskyHandle: "danielroe.dev",
             avatar: null,
-            profileUrl: 'https://bsky.app/profile/danielroe.dev',
+            profileUrl: "https://bsky.app/profile/danielroe.dev",
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('AuthorList', () => {
-    it('should have no accessibility violations', async () => {
+  describe("AuthorList", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(AuthorList, {
         props: {
           authors: [
             {
-              name: 'Daniel Roe',
-              blueskyHandle: 'danielroe.dev',
+              name: "Daniel Roe",
+              blueskyHandle: "danielroe.dev",
               avatar: null,
-              profileUrl: 'https://bsky.app/profile/danielroe.dev',
+              profileUrl: "https://bsky.app/profile/danielroe.dev",
             },
-            { name: 'Salma Alam-Naylor', avatar: null, profileUrl: null },
+            { name: "Salma Alam-Naylor", avatar: null, profileUrl: null },
           ],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('BlogPostWrapper', () => {
-    it('should have no accessibility violations', async () => {
+  describe("BlogPostWrapper", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(BlogPostWrapper, {
         props: {
           frontmatter: {
-            authors: [{ name: 'Daniel Roe', blueskyHandle: 'danielroe.dev' }],
-            title: 'Building Accessible Vue Components',
-            date: '2024-06-15',
-            description: 'A guide to building accessible components in Vue.js applications.',
-            path: '/blog/building-accessible-vue-components',
-            slug: 'building-accessible-vue-components',
+            authors: [{ name: "Daniel Roe", blueskyHandle: "danielroe.dev" }],
+            title: "Building Accessible Vue Components",
+            date: "2024-06-15",
+            description:
+              "A guide to building accessible components in Vue.js applications.",
+            path: "/blog/building-accessible-vue-components",
+            slug: "building-accessible-vue-components",
           },
         },
-        slots: { default: '<p>Blog post content here.</p>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+        slots: { default: "<p>Blog post content here.</p>" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('BlueskyComment', () => {
-    it('should have no accessibility violations', async () => {
+  describe("BlueskyComment", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(BlueskyComment, {
         props: {
           comment: {
-            uri: 'at://did:plc:2gkh62xvzokhlf6li4ol3b3d/app.bsky.feed.post/3mcg7k75fdc2k',
-            cid: 'bafyreigincphooxt7zox3blbocf6hnczzv36fkuj2zi5iuzpjgq6gk6pju',
+            uri: "at://did:plc:2gkh62xvzokhlf6li4ol3b3d/app.bsky.feed.post/3mcg7k75fdc2k",
+            cid: "bafyreigincphooxt7zox3blbocf6hnczzv36fkuj2zi5iuzpjgq6gk6pju",
             author: {
-              did: 'did:plc:2gkh62xvzokhlf6li4ol3b3d',
-              handle: 'patak.cat',
-              displayName: 'patak',
+              did: "did:plc:2gkh62xvzokhlf6li4ol3b3d",
+              handle: "patak.cat",
+              displayName: "patak",
               avatar:
-                'https://cdn.bsky.app/img/avatar/plain/did:plc:2gkh62xvzokhlf6li4ol3b3d/bafkreifgzl4e5jqlakd77ajvnilsb5tufsv24h2sxfwmitkzxrh3sk6mhq@jpeg',
+                "https://cdn.bsky.app/img/avatar/plain/did:plc:2gkh62xvzokhlf6li4ol3b3d/bafkreifgzl4e5jqlakd77ajvnilsb5tufsv24h2sxfwmitkzxrh3sk6mhq@jpeg",
             },
-            text: 'our kids will need these new stories, thanks for writing this Daniel',
-            createdAt: '2026-01-14T23:22:05.257Z',
+            text: "our kids will need these new stories, thanks for writing this Daniel",
+            createdAt: "2026-01-14T23:22:05.257Z",
             likeCount: 13,
             replyCount: 0,
             repostCount: 0,
@@ -2818,986 +2868,998 @@ describe('component accessibility audits', () => {
           },
           depth: 0,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('BlueskyComments', () => {
-    it('should have no accessibility violations', async () => {
+  describe("BlueskyComments", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(BlueskyComments, {
         props: {
-          postUri: 'at://did:plc:jbeaa5kdaladzwq3r7f5xgwe/app.bsky.feed.post/3mcg6svsgsm2k',
+          postUri:
+            "at://did:plc:jbeaa5kdaladzwq3r7f5xgwe/app.bsky.feed.post/3mcg6svsgsm2k",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('BlogPostListCard', () => {
-    it('should have no accessibility violations', async () => {
+  describe("BlogPostListCard", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(BlogPostListCard, {
         props: {
           authors: [
             {
-              name: 'Daniel Roe',
-              blueskyHandle: 'danielroe.dev',
+              name: "Daniel Roe",
+              blueskyHandle: "danielroe.dev",
               avatar: null,
-              profileUrl: 'https://bsky.app/profile/danielroe.dev',
+              profileUrl: "https://bsky.app/profile/danielroe.dev",
             },
           ],
-          title: 'Building Accessible Vue Components',
-          topics: ['accessibility', 'vue'],
-          excerpt: 'A guide to building accessible components in Vue.js applications.',
-          published: '2024-06-15',
-          path: 'alpha-release',
+          title: "Building Accessible Vue Components",
+          topics: ["accessibility", "vue"],
+          excerpt:
+            "A guide to building accessible components in Vue.js applications.",
+          published: "2024-06-15",
+          path: "alpha-release",
           index: 0,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('BlogPostFederatedArticles', () => {
-    it('should have no accessibility violations', async () => {
+  describe("BlogPostFederatedArticles", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(BlogPostFederatedArticles, {
         props: {
-          headline: 'Read more on Bluesky',
+          headline: "Read more on Bluesky",
           articles: [
             {
-              url: 'https://example.com/post-1',
-              title: 'Federated Testing Patterns',
-              description: 'How to keep accessibility checks simple and maintainable.',
-              authorHandle: 'danielroe.dev',
+              url: "https://example.com/post-1",
+              title: "Federated Testing Patterns",
+              description:
+                "How to keep accessibility checks simple and maintainable.",
+              authorHandle: "danielroe.dev",
             },
             {
-              url: 'https://example.com/post-2',
-              title: 'Composable Data in Vue',
-              description: 'Practical patterns for data composition in Vue components.',
-              authorHandle: 'salma.dev',
+              url: "https://example.com/post-2",
+              title: "Composable Data in Vue",
+              description:
+                "Practical patterns for data composition in Vue components.",
+              authorHandle: "salma.dev",
             },
           ],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageReplacement', () => {
-    it('should have no accessibility violations for native replacement', async () => {
+  describe("PackageReplacement", () => {
+    it("should have no accessibility violations for native replacement", async () => {
       const component = await mountSuspended(PackageReplacement, {
         props: {
           mapping: {
-            type: 'module',
-            moduleName: 'array-every',
-            replacements: ['Array.prototype.every'],
+            type: "module",
+            moduleName: "array-every",
+            replacements: ["Array.prototype.every"],
           },
           replacement: {
-            id: 'Array.prototype.every',
-            type: 'native',
+            id: "Array.prototype.every",
+            type: "native",
             url: {
-              type: 'mdn',
-              id: 'Web/JavaScript/Reference/Global_Objects/Array/every',
+              type: "mdn",
+              id: "Web/JavaScript/Reference/Global_Objects/Array/every",
             },
             engines: [
-              { engine: 'nodejs', minVersion: '0.10.0' },
-              { engine: 'chrome', minVersion: '1' },
+              { engine: "nodejs", minVersion: "0.10.0" },
+              { engine: "chrome", minVersion: "1" },
             ],
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for simple replacement', async () => {
+    it("should have no accessibility violations for simple replacement", async () => {
       const component = await mountSuspended(PackageReplacement, {
         props: {
           mapping: {
-            type: 'module',
-            moduleName: 'is-even',
-            replacements: ['snippet::is-even'],
+            type: "module",
+            moduleName: "is-even",
+            replacements: ["snippet::is-even"],
           },
           replacement: {
-            id: 'snippet::is-even',
-            type: 'simple',
-            description: 'You can use the modulo operator to check if a number is even.',
-            example: '(n % 2) === 0',
+            id: "snippet::is-even",
+            type: "simple",
+            description:
+              "You can use the modulo operator to check if a number is even.",
+            example: "(n % 2) === 0",
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageSidebar', () => {
-    it('should have no accessibility violations with slot content', async () => {
+  describe("PackageSidebar", () => {
+    it("should have no accessibility violations with slot content", async () => {
       const component = await mountSuspended(PackageSidebar, {
         slots: {
-          default: () => h('div', 'Sidebar content'),
+          default: () => h("div", "Sidebar content"),
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageSkillsCard', () => {
-    it('should have no accessibility violations with skills', async () => {
+  describe("PackageSkillsCard", () => {
+    it("should have no accessibility violations with skills", async () => {
       const component = await mountSuspended(PackageSkillsCard, {
         props: {
-          packageName: 'vue',
+          packageName: "vue",
           skills: [
             {
-              name: 'Vue Components',
-              description: 'Create Vue components',
-              dirName: 'vue-components',
+              name: "Vue Components",
+              description: "Create Vue components",
+              dirName: "vue-components",
             },
           ],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should render nothing when no skills', async () => {
+    it("should render nothing when no skills", async () => {
       const component = await mountSuspended(PackageSkillsCard, {
         props: {
-          packageName: 'vue',
+          packageName: "vue",
           skills: [],
         },
-      })
+      });
       // Empty skills array means the component renders nothing
-      expect(component.html()).toBe('<!--v-if-->')
-    })
-  })
+      expect(component.html()).toBe("<!--v-if-->");
+    });
+  });
 
-  describe('Readme', () => {
-    it('should have no accessibility violations with slot content', async () => {
+  describe("Readme", () => {
+    it("should have no accessibility violations with slot content", async () => {
       const component = await mountSuspended(Readme, {
         props: {
-          html: '<h3>README</h3><p>Some content</p>',
+          html: "<h3>README</h3><p>Some content</p>",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('ReadmeTocDropdown', () => {
+  describe("ReadmeTocDropdown", () => {
     const mockToc = [
-      { text: 'Installation', id: 'installation', depth: 2 },
-      { text: 'Usage', id: 'usage', depth: 2 },
-      { text: 'Basic Usage', id: 'basic-usage', depth: 3 },
-      { text: 'Advanced Usage', id: 'advanced-usage', depth: 3 },
-      { text: 'API', id: 'api', depth: 2 },
-    ]
-
-    it('should have no accessibility violations', async () => {
+      { text: "Installation", id: "installation", depth: 2 },
+      { text: "Usage", id: "usage", depth: 2 },
+      { text: "Basic Usage", id: "basic-usage", depth: 3 },
+      { text: "Advanced Usage", id: "advanced-usage", depth: 3 },
+      { text: "API", id: "api", depth: 2 },
+    ];
+
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(ReadmeTocDropdown, {
         props: { toc: mockToc },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with active item', async () => {
+    it("should have no accessibility violations with active item", async () => {
       const component = await mountSuspended(ReadmeTocDropdown, {
         props: {
           toc: mockToc,
-          activeId: 'usage',
+          activeId: "usage",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with nested active item', async () => {
+    it("should have no accessibility violations with nested active item", async () => {
       const component = await mountSuspended(ReadmeTocDropdown, {
         props: {
           toc: mockToc,
-          activeId: 'basic-usage',
+          activeId: "basic-usage",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with empty toc', async () => {
+    it("should have no accessibility violations with empty toc", async () => {
       const component = await mountSuspended(ReadmeTocDropdown, {
         props: { toc: [] },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('HeaderSearchBox', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(HeaderSearchBox)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('InputBase', () => {
-    it('should have no accessibility violations (with aria-label)', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("HeaderSearchBox", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(HeaderSearchBox);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("InputBase", () => {
+    it("should have no accessibility violations (with aria-label)", async () => {
       const component = await mountSuspended(InputBase, {
-        attrs: { 'aria-label': 'Search input' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        attrs: { "aria-label": "Search input" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with placeholder', async () => {
+    it("should have no accessibility violations with placeholder", async () => {
       const component = await mountSuspended(InputBase, {
-        attrs: { 'placeholder': 'Search...', 'aria-label': 'Search' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        attrs: { placeholder: "Search...", "aria-label": "Search" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when disabled', async () => {
+    it("should have no accessibility violations when disabled", async () => {
       const component = await mountSuspended(InputBase, {
-        attrs: { 'disabled': '', 'aria-label': 'Disabled input' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        attrs: { disabled: "", "aria-label": "Disabled input" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with size small', async () => {
+    it("should have no accessibility violations with size small", async () => {
       const component = await mountSuspended(InputBase, {
-        props: { size: 'sm' },
-        attrs: { 'aria-label': 'Small input' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with size large', async () => {
+        props: { size: "sm" },
+        attrs: { "aria-label": "Small input" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations with size large", async () => {
       const component = await mountSuspended(InputBase, {
-        props: { size: 'lg' },
-        attrs: { 'aria-label': 'Large input' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with noCorrect false', async () => {
+        props: { size: "lg" },
+        attrs: { "aria-label": "Large input" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations with noCorrect false", async () => {
       const component = await mountSuspended(InputBase, {
         props: { noCorrect: false },
-        attrs: { 'aria-label': 'Input with corrections' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('SelectBase', () => {
-    it('should have no accessibility violations with options and aria-label', async () => {
+        attrs: { "aria-label": "Input with corrections" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("SelectBase", () => {
+    it("should have no accessibility violations with options and aria-label", async () => {
       const component = await mountSuspended(SelectBase, {
-        attrs: { 'aria-label': 'Choose option' },
+        attrs: { "aria-label": "Choose option" },
         slots: {
           default:
             '<option value="option1">option 1</option><option value="option2">option 2</option>',
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when disabled', async () => {
+    it("should have no accessibility violations when disabled", async () => {
       const component = await mountSuspended(SelectBase, {
         props: { disabled: true },
-        attrs: { 'aria-label': 'Disabled select' },
+        attrs: { "aria-label": "Disabled select" },
         slots: { default: '<option value="option1">option 1</option>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with size small', async () => {
+    it("should have no accessibility violations with size small", async () => {
       const component = await mountSuspended(SelectBase, {
-        props: { size: 'sm' },
-        attrs: { 'aria-label': 'Small select' },
+        props: { size: "sm" },
+        attrs: { "aria-label": "Small select" },
         slots: { default: '<option value="option1">option 1</option>' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('SelectField', () => {
-    it('should have no accessibility violations with label and items', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("SelectField", () => {
+    it("should have no accessibility violations with label and items", async () => {
       const component = await mountSuspended(SelectField, {
         props: {
-          id: 'a11y-select-1',
-          label: 'Choose one',
+          id: "a11y-select-1",
+          label: "Choose one",
           items: [
-            { label: 'Option 1', value: 'option1' },
-            { label: 'Option 2', value: 'option2' },
+            { label: "Option 1", value: "option1" },
+            { label: "Option 2", value: "option2" },
           ],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with hiddenLabel', async () => {
+    it("should have no accessibility violations with hiddenLabel", async () => {
       const component = await mountSuspended(SelectField, {
         props: {
-          id: 'a11y-select-2',
-          label: 'Hidden',
+          id: "a11y-select-2",
+          label: "Hidden",
           hiddenLabel: true,
-          items: [{ label: 'Option 1', value: 'option1' }],
+          items: [{ label: "Option 1", value: "option1" }],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when disabled', async () => {
+    it("should have no accessibility violations when disabled", async () => {
       const component = await mountSuspended(SelectField, {
         props: {
-          id: 'a11y-select-3',
-          selectAttrs: { 'aria-label': 'Disabled select' },
-          items: [{ label: 'Option 1', value: 'option1' }],
+          id: "a11y-select-3",
+          selectAttrs: { "aria-label": "Disabled select" },
+          items: [{ label: "Option 1", value: "option1" }],
           disabled: true,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with size small', async () => {
+    it("should have no accessibility violations with size small", async () => {
       const component = await mountSuspended(SelectField, {
         props: {
-          id: 'a11y-select-4',
-          selectAttrs: { 'aria-label': 'Disabled select' },
-          items: [{ label: 'Option 1', value: 'option1' }],
-          size: 'sm',
-        },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('SearchSuggestionCard', () => {
-    it('should have no accessibility violations for user suggestion', async () => {
+          id: "a11y-select-4",
+          selectAttrs: { "aria-label": "Disabled select" },
+          items: [{ label: "Option 1", value: "option1" }],
+          size: "sm",
+        },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("SearchSuggestionCard", () => {
+    it("should have no accessibility violations for user suggestion", async () => {
       const component = await mountSuspended(SearchSuggestionCard, {
-        props: { type: 'user', name: 'testuser' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { type: "user", name: "testuser" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for org suggestion', async () => {
+    it("should have no accessibility violations for org suggestion", async () => {
       const component = await mountSuspended(SearchSuggestionCard, {
-        props: { type: 'org', name: 'testorg' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { type: "org", name: "testorg" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for exact match', async () => {
+    it("should have no accessibility violations for exact match", async () => {
       const component = await mountSuspended(SearchSuggestionCard, {
-        props: { type: 'user', name: 'exactuser', isExactMatch: true },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('InstantSearch', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(InstantSearch)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('SearchProviderToggle', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(SearchProviderToggle)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('SearchProviderToggle.server', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(SearchProviderToggleServer)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('Toggle.server', () => {
-    it('should have no accessibility violations', async () => {
+        props: { type: "user", name: "exactuser", isExactMatch: true },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("InstantSearch", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(InstantSearch);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("SearchProviderToggle", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(SearchProviderToggle);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("SearchProviderToggle.server", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(SearchProviderToggleServer);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("Toggle.server", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(ToggleServer, {
-        props: { label: 'Enable feature' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { label: "Enable feature" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with description', async () => {
+    it("should have no accessibility violations with description", async () => {
       const component = await mountSuspended(ToggleServer, {
         props: {
-          label: 'Enable feature',
-          description: 'This enables the feature',
+          label: "Enable feature",
+          description: "This enables the feature",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('Toggle', () => {
-    it('should have no accessibility violations', async () => {
+  describe("Toggle", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(SettingsToggle, {
-        props: { label: 'Enable feature', modelValue: false },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { label: "Enable feature", modelValue: false },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with description', async () => {
+    it("should have no accessibility violations with description", async () => {
       const component = await mountSuspended(SettingsToggle, {
         props: {
-          label: 'Enable feature',
-          description: 'This enables the feature',
+          label: "Enable feature",
+          description: "This enables the feature",
           modelValue: false,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when checked', async () => {
+    it("should have no accessibility violations when checked", async () => {
       const component = await mountSuspended(SettingsToggle, {
-        props: { label: 'Enable feature', modelValue: true },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('VersionSelector', () => {
+        props: { label: "Enable feature", modelValue: true },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("VersionSelector", () => {
     const mockVersions = {
-      '3.5.0': {},
-      '3.4.0': {},
-      '3.3.0': {},
-    }
+      "3.5.0": {},
+      "3.4.0": {},
+      "3.3.0": {},
+    };
     const mockDistTags = {
-      latest: '3.5.0',
-      next: '3.4.0',
-    }
+      latest: "3.5.0",
+      next: "3.4.0",
+    };
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(VersionSelector, {
         props: {
-          packageName: 'vue',
-          currentVersion: '3.5.0',
+          packageName: "vue",
+          currentVersion: "3.5.0",
           versions: mockVersions,
           distTags: mockDistTags,
-          urlPattern: '/package/vue/v/{version}',
+          urlPattern: "/package/vue/v/{version}",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with non-latest version', async () => {
+    it("should have no accessibility violations with non-latest version", async () => {
       const component = await mountSuspended(VersionSelector, {
         props: {
-          packageName: 'vue',
-          currentVersion: '3.4.0',
+          packageName: "vue",
+          currentVersion: "3.4.0",
           versions: mockVersions,
           distTags: mockDistTags,
-          urlPattern: '/package/vue/v/{version}',
+          urlPattern: "/package/vue/v/{version}",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('BlueskyPostEmbed', () => {
-    it('should have no accessibility violations in pending state', async () => {
+  describe("BlueskyPostEmbed", () => {
+    it("should have no accessibility violations in pending state", async () => {
       const component = await mountSuspended(BlueskyPostEmbed, {
         props: {
-          uri: 'at://did:plc:u5zp7npt5kpueado77kuihyz/app.bsky.feed.post/3mejzn5mrcc2g',
+          uri: "at://did:plc:u5zp7npt5kpueado77kuihyz/app.bsky.feed.post/3mejzn5mrcc2g",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('UserAvatar', () => {
-    it('should have no accessibility violations', async () => {
+  describe("UserAvatar", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(UserAvatar, {
-        props: { username: 'testuser', size: 'lg' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { username: "testuser", size: "lg" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with short username', async () => {
+    it("should have no accessibility violations with short username", async () => {
       const component = await mountSuspended(UserAvatar, {
-        props: { username: 'a', size: 'lg' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+        props: { username: "a", size: "lg" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with long username', async () => {
+    it("should have no accessibility violations with long username", async () => {
       const component = await mountSuspended(UserAvatar, {
-        props: { username: 'verylongusernameexample', size: 'lg' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations in all sizes', async () => {
-      const sizes = ['xs', 'lg'] as const
+        props: { username: "verylongusernameexample", size: "lg" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations in all sizes", async () => {
+      const sizes = ["xs", "lg"] as const;
       for (const size of sizes) {
         const component = await mountSuspended(UserAvatar, {
-          props: { username: 'testuser', size },
-        })
-        const results = await runAxe(component)
-        expect(results.violations).toEqual([])
+          props: { username: "testuser", size },
+        });
+        const results = await runAxe(component);
+        expect(results.violations).toEqual([]);
       }
-    })
-  })
+    });
+  });
 
-  describe('PackageDownloadButton', () => {
-    it('should have no accessibility violations', async () => {
+  describe("PackageDownloadButton", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageDownloadButton, {
         props: {
-          packageName: 'vue',
+          packageName: "vue",
           version: {
-            version: '3.5.0',
-            dist: { tarball: 'https://registry.npmjs.org/vue/-/vue-3.5.0.tgz' },
+            version: "3.5.0",
+            dist: { tarball: "https://registry.npmjs.org/vue/-/vue-3.5.0.tgz" },
           } as any,
           dependencies: null,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
   // Diff components
-  describe('DiffFileTree', () => {
+  describe("DiffFileTree", () => {
     const mockFiles = [
-      { path: 'src/index.ts', type: 'modified' as const },
-      { path: 'src/utils/helper.ts', type: 'added' as const },
-      { path: 'README.md', type: 'modified' as const },
-      { path: 'old-file.js', type: 'removed' as const },
-    ]
+      { path: "src/index.ts", type: "modified" as const },
+      { path: "src/utils/helper.ts", type: "added" as const },
+      { path: "README.md", type: "modified" as const },
+      { path: "old-file.js", type: "removed" as const },
+    ];
 
-    it('should have no accessibility violations with files', async () => {
+    it("should have no accessibility violations with files", async () => {
       const component = await mountSuspended(DiffFileTree, {
         props: {
           files: mockFiles,
           selectedPath: null,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with selected file', async () => {
+    it("should have no accessibility violations with selected file", async () => {
       const component = await mountSuspended(DiffFileTree, {
         props: {
           files: mockFiles,
-          selectedPath: 'src/index.ts',
+          selectedPath: "src/index.ts",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with empty files', async () => {
+    it("should have no accessibility violations with empty files", async () => {
       const component = await mountSuspended(DiffFileTree, {
         props: {
           files: [],
           selectedPath: null,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('DiffLine', () => {
-    it('should have no accessibility violations for normal line', async () => {
+  describe("DiffLine", () => {
+    it("should have no accessibility violations for normal line", async () => {
       const component = await mountSuspended(DiffLine, {
         props: {
           line: {
-            type: 'normal',
+            type: "normal",
             oldLineNumber: 1,
             newLineNumber: 1,
-            content: [{ value: 'const x = 1;', type: 'normal' }],
+            content: [{ value: "const x = 1;", type: "normal" }],
           },
         },
         global: {
           provide: {
             diffContext: {
-              fileStatus: computed(() => 'modify'),
-              language: computed(() => 'typescript'),
+              fileStatus: computed(() => "modify"),
+              language: computed(() => "typescript"),
               enableShiki: computed(() => false),
               wordWrap: computed(() => false),
             },
           },
         },
         attachTo: (() => {
-          const table = document.createElement('table')
-          const tbody = document.createElement('tbody')
-          table.appendChild(tbody)
-          document.body.appendChild(table)
-          return tbody
+          const table = document.createElement("table");
+          const tbody = document.createElement("tbody");
+          table.appendChild(tbody);
+          document.body.appendChild(table);
+          return tbody;
         })(),
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for insert line', async () => {
+    it("should have no accessibility violations for insert line", async () => {
       const component = await mountSuspended(DiffLine, {
         props: {
           line: {
-            type: 'insert',
+            type: "insert",
             newLineNumber: 5,
-            content: [{ value: 'const newVar = true;', type: 'insert' }],
+            content: [{ value: "const newVar = true;", type: "insert" }],
           },
         },
         global: {
           provide: {
             diffContext: {
-              fileStatus: computed(() => 'modify'),
-              language: computed(() => 'typescript'),
+              fileStatus: computed(() => "modify"),
+              language: computed(() => "typescript"),
               enableShiki: computed(() => false),
               wordWrap: computed(() => false),
             },
           },
         },
         attachTo: (() => {
-          const table = document.createElement('table')
-          const tbody = document.createElement('tbody')
-          table.appendChild(tbody)
-          document.body.appendChild(table)
-          return tbody
+          const table = document.createElement("table");
+          const tbody = document.createElement("tbody");
+          table.appendChild(tbody);
+          document.body.appendChild(table);
+          return tbody;
         })(),
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for delete line', async () => {
+    it("should have no accessibility violations for delete line", async () => {
       const component = await mountSuspended(DiffLine, {
         props: {
           line: {
-            type: 'delete',
+            type: "delete",
             oldLineNumber: 3,
-            content: [{ value: 'const oldVar = false;', type: 'delete' }],
+            content: [{ value: "const oldVar = false;", type: "delete" }],
           },
         },
         global: {
           provide: {
             diffContext: {
-              fileStatus: computed(() => 'modify'),
-              language: computed(() => 'typescript'),
+              fileStatus: computed(() => "modify"),
+              language: computed(() => "typescript"),
               enableShiki: computed(() => false),
               wordWrap: computed(() => false),
             },
           },
         },
         attachTo: (() => {
-          const table = document.createElement('table')
-          const tbody = document.createElement('tbody')
-          table.appendChild(tbody)
-          document.body.appendChild(table)
-          return tbody
+          const table = document.createElement("table");
+          const tbody = document.createElement("tbody");
+          table.appendChild(tbody);
+          document.body.appendChild(table);
+          return tbody;
         })(),
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with word-level diff segments', async () => {
+    it("should have no accessibility violations with word-level diff segments", async () => {
       const component = await mountSuspended(DiffLine, {
         props: {
           line: {
-            type: 'insert',
+            type: "insert",
             newLineNumber: 10,
             content: [
-              { value: 'const ', type: 'normal' },
-              { value: 'newName', type: 'insert' },
-              { value: ' = 1;', type: 'normal' },
+              { value: "const ", type: "normal" },
+              { value: "newName", type: "insert" },
+              { value: " = 1;", type: "normal" },
             ],
           },
         },
         global: {
           provide: {
             diffContext: {
-              fileStatus: computed(() => 'modify'),
-              language: computed(() => 'typescript'),
+              fileStatus: computed(() => "modify"),
+              language: computed(() => "typescript"),
               enableShiki: computed(() => false),
               wordWrap: computed(() => false),
             },
           },
         },
         attachTo: (() => {
-          const table = document.createElement('table')
-          const tbody = document.createElement('tbody')
-          table.appendChild(tbody)
-          document.body.appendChild(table)
-          return tbody
+          const table = document.createElement("table");
+          const tbody = document.createElement("tbody");
+          table.appendChild(tbody);
+          document.body.appendChild(table);
+          return tbody;
         })(),
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('DiffHunk', () => {
+  describe("DiffHunk", () => {
     const mockHunk = {
-      type: 'hunk' as const,
-      content: '@@ -1,5 +1,6 @@',
+      type: "hunk" as const,
+      content: "@@ -1,5 +1,6 @@",
       oldStart: 1,
       oldLines: 5,
       newStart: 1,
       newLines: 6,
       lines: [
         {
-          type: 'normal' as const,
+          type: "normal" as const,
           oldLineNumber: 1,
           newLineNumber: 1,
-          content: [{ value: 'const a = 1;', type: 'normal' as const }],
+          content: [{ value: "const a = 1;", type: "normal" as const }],
         },
         {
-          type: 'delete' as const,
+          type: "delete" as const,
           oldLineNumber: 2,
-          content: [{ value: 'const b = 2;', type: 'delete' as const }],
+          content: [{ value: "const b = 2;", type: "delete" as const }],
         },
         {
-          type: 'insert' as const,
+          type: "insert" as const,
           newLineNumber: 2,
-          content: [{ value: 'const b = 3;', type: 'insert' as const }],
+          content: [{ value: "const b = 3;", type: "insert" as const }],
         },
       ],
-    }
+    };
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(DiffHunk, {
         props: { hunk: mockHunk },
         global: {
           provide: {
             diffContext: {
-              fileStatus: computed(() => 'modify'),
-              language: computed(() => 'typescript'),
+              fileStatus: computed(() => "modify"),
+              language: computed(() => "typescript"),
               enableShiki: computed(() => false),
               wordWrap: computed(() => false),
             },
           },
         },
         attachTo: (() => {
-          const table = document.createElement('table')
-          const tbody = document.createElement('tbody')
-          table.appendChild(tbody)
-          document.body.appendChild(table)
-          return tbody
+          const table = document.createElement("table");
+          const tbody = document.createElement("tbody");
+          table.appendChild(tbody);
+          document.body.appendChild(table);
+          return tbody;
         })(),
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('DiffSkipBlock', () => {
-    it('should have no accessibility violations', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("DiffSkipBlock", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(DiffSkipBlock, {
         props: {
           count: 25,
         },
         attachTo: (() => {
-          const table = document.createElement('table')
-          const tbody = document.createElement('tbody')
-          table.appendChild(tbody)
-          document.body.appendChild(table)
-          return tbody
+          const table = document.createElement("table");
+          const tbody = document.createElement("tbody");
+          table.appendChild(tbody);
+          document.body.appendChild(table);
+          return tbody;
         })(),
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with custom content', async () => {
+    it("should have no accessibility violations with custom content", async () => {
       const component = await mountSuspended(DiffSkipBlock, {
         props: {
           count: 50,
-          content: '50 unchanged lines',
+          content: "50 unchanged lines",
         },
         attachTo: (() => {
-          const table = document.createElement('table')
-          const tbody = document.createElement('tbody')
-          table.appendChild(tbody)
-          document.body.appendChild(table)
-          return tbody
+          const table = document.createElement("table");
+          const tbody = document.createElement("tbody");
+          table.appendChild(tbody);
+          document.body.appendChild(table);
+          return tbody;
         })(),
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('DiffTable', () => {
+  describe("DiffTable", () => {
     const mockHunks = [
       {
-        type: 'hunk' as const,
-        content: '@@ -1,3 +1,4 @@',
+        type: "hunk" as const,
+        content: "@@ -1,3 +1,4 @@",
         oldStart: 1,
         oldLines: 3,
         newStart: 1,
         newLines: 4,
         lines: [
           {
-            type: 'normal' as const,
+            type: "normal" as const,
             oldLineNumber: 1,
             newLineNumber: 1,
-            content: [{ value: 'line 1', type: 'normal' as const }],
+            content: [{ value: "line 1", type: "normal" as const }],
           },
           {
-            type: 'insert' as const,
+            type: "insert" as const,
             newLineNumber: 2,
-            content: [{ value: 'new line', type: 'insert' as const }],
+            content: [{ value: "new line", type: "insert" as const }],
           },
         ],
       },
-    ]
+    ];
 
-    it('should have no accessibility violations for modify type', async () => {
+    it("should have no accessibility violations for modify type", async () => {
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: mockHunks,
-          type: 'modify',
-          fileName: 'test.ts',
+          type: "modify",
+          fileName: "test.ts",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for add type', async () => {
+    it("should have no accessibility violations for add type", async () => {
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: mockHunks,
-          type: 'add',
-          fileName: 'new-file.ts',
+          type: "add",
+          fileName: "new-file.ts",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for delete type', async () => {
+    it("should have no accessibility violations for delete type", async () => {
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: mockHunks,
-          type: 'delete',
-          fileName: 'removed.ts',
+          type: "delete",
+          fileName: "removed.ts",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with skip blocks', async () => {
+    it("should have no accessibility violations with skip blocks", async () => {
       const hunksWithSkip = [
         ...mockHunks,
-        { type: 'skip' as const, count: 20, content: '20 lines hidden' },
+        { type: "skip" as const, count: 20, content: "20 lines hidden" },
         {
-          type: 'hunk' as const,
-          content: '@@ -25,3 +26,3 @@',
+          type: "hunk" as const,
+          content: "@@ -25,3 +26,3 @@",
           oldStart: 25,
           oldLines: 3,
           newStart: 26,
           newLines: 3,
           lines: [
             {
-              type: 'normal' as const,
+              type: "normal" as const,
               oldLineNumber: 25,
               newLineNumber: 26,
-              content: [{ value: 'line 25', type: 'normal' as const }],
+              content: [{ value: "line 25", type: "normal" as const }],
             },
           ],
         },
-      ]
+      ];
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: hunksWithSkip,
-          type: 'modify',
-          fileName: 'large-file.ts',
+          type: "modify",
+          fileName: "large-file.ts",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with word wrap enabled', async () => {
+    it("should have no accessibility violations with word wrap enabled", async () => {
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: mockHunks,
-          type: 'modify',
-          fileName: 'test.ts',
+          type: "modify",
+          fileName: "test.ts",
           wordWrap: true,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with empty hunks', async () => {
+    it("should have no accessibility violations with empty hunks", async () => {
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: [],
-          type: 'modify',
-          fileName: 'empty.ts',
+          type: "modify",
+          fileName: "empty.ts",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('DiffSidebarPanel', () => {
+  describe("DiffSidebarPanel", () => {
     const mockCompare = {
-      package: 'test-package',
-      from: '1.0.0',
-      to: '2.0.0',
+      package: "test-package",
+      from: "1.0.0",
+      to: "2.0.0",
       packageJson: { from: {}, to: {} },
       files: {
-        added: [{ path: 'new.ts', type: 'added' as const, newSize: 100 }],
-        removed: [{ path: 'old.ts', type: 'removed' as const, oldSize: 50 }],
-        modified: [{ path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 }],
+        added: [{ path: "new.ts", type: "added" as const, newSize: 100 }],
+        removed: [{ path: "old.ts", type: "removed" as const, oldSize: 50 }],
+        modified: [
+          {
+            path: "changed.ts",
+            type: "modified" as const,
+            oldSize: 200,
+            newSize: 250,
+          },
+        ],
       },
       dependencyChanges: [
         {
-          name: 'lodash',
-          section: 'dependencies' as const,
-          from: '^4.0.0',
-          to: '^4.1.0',
-          type: 'updated' as const,
-          semverDiff: 'minor' as const,
+          name: "lodash",
+          section: "dependencies" as const,
+          from: "^4.0.0",
+          to: "^4.1.0",
+          type: "updated" as const,
+          semverDiff: "minor" as const,
         },
       ],
       stats: {
@@ -3808,43 +3870,48 @@ describe('component accessibility audits', () => {
         filesModified: 1,
       },
       meta: {},
-    }
+    };
 
     const mockAllChanges = [
-      { path: 'new.ts', type: 'added' as const, newSize: 100 },
-      { path: 'old.ts', type: 'removed' as const, oldSize: 50 },
-      { path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 },
-    ]
+      { path: "new.ts", type: "added" as const, newSize: 100 },
+      { path: "old.ts", type: "removed" as const, oldSize: 50 },
+      {
+        path: "changed.ts",
+        type: "modified" as const,
+        oldSize: 200,
+        newSize: 250,
+      },
+    ];
 
     const mockGroupedDeps = new Map([
       [
-        'dependencies',
+        "dependencies",
         [
           {
-            name: 'lodash',
-            section: 'dependencies' as const,
-            from: '^4.0.0',
-            to: '^4.1.0',
-            type: 'updated' as const,
-            semverDiff: 'minor' as const,
+            name: "lodash",
+            section: "dependencies" as const,
+            from: "^4.0.0",
+            to: "^4.1.0",
+            type: "updated" as const,
+            semverDiff: "minor" as const,
           },
         ],
       ],
-    ])
+    ]);
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(DiffSidebarPanel, {
         props: {
           compare: mockCompare,
           groupedDeps: mockGroupedDeps,
           allChanges: mockAllChanges,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with selected file', async () => {
+    it("should have no accessibility violations with selected file", async () => {
       const component = await mountSuspended(DiffSidebarPanel, {
         props: {
           compare: mockCompare,
@@ -3852,67 +3919,74 @@ describe('component accessibility audits', () => {
           allChanges: mockAllChanges,
           selectedFile: mockAllChanges[0],
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with file filter', async () => {
+    it("should have no accessibility violations with file filter", async () => {
       const component = await mountSuspended(DiffSidebarPanel, {
         props: {
           compare: mockCompare,
           groupedDeps: mockGroupedDeps,
           allChanges: mockAllChanges,
-          fileFilter: 'added',
+          fileFilter: "added",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with warnings', async () => {
+    it("should have no accessibility violations with warnings", async () => {
       const compareWithWarnings = {
         ...mockCompare,
-        meta: { warnings: ['Some files were truncated'] },
-      }
+        meta: { warnings: ["Some files were truncated"] },
+      };
       const component = await mountSuspended(DiffSidebarPanel, {
         props: {
           compare: compareWithWarnings,
           groupedDeps: mockGroupedDeps,
           allChanges: mockAllChanges,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with no dependency changes', async () => {
+    it("should have no accessibility violations with no dependency changes", async () => {
       const compareNoDeps = {
         ...mockCompare,
         dependencyChanges: [],
-      }
+      };
       const component = await mountSuspended(DiffSidebarPanel, {
         props: {
           compare: compareNoDeps,
           groupedDeps: new Map(),
           allChanges: mockAllChanges,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('DiffMobileSidebarDrawer', () => {
+  describe("DiffMobileSidebarDrawer", () => {
     const mockCompare = {
-      package: 'test-package',
-      from: '1.0.0',
-      to: '2.0.0',
+      package: "test-package",
+      from: "1.0.0",
+      to: "2.0.0",
       packageJson: { from: {}, to: {} },
       files: {
-        added: [{ path: 'new.ts', type: 'added' as const, newSize: 100 }],
+        added: [{ path: "new.ts", type: "added" as const, newSize: 100 }],
         removed: [],
-        modified: [{ path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 }],
+        modified: [
+          {
+            path: "changed.ts",
+            type: "modified" as const,
+            oldSize: 200,
+            newSize: 250,
+          },
+        ],
       },
       dependencyChanges: [],
       stats: {
@@ -3923,113 +3997,118 @@ describe('component accessibility audits', () => {
         filesModified: 1,
       },
       meta: {},
-    }
+    };
 
     const mockAllChanges = [
-      { path: 'new.ts', type: 'added' as const, newSize: 100 },
-      { path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 },
-    ]
+      { path: "new.ts", type: "added" as const, newSize: 100 },
+      {
+        path: "changed.ts",
+        type: "modified" as const,
+        oldSize: 200,
+        newSize: 250,
+      },
+    ];
 
-    it('should have no accessibility violations when closed', async () => {
+    it("should have no accessibility violations when closed", async () => {
       const component = await mountSuspended(DiffMobileSidebarDrawer, {
         props: {
           compare: mockCompare,
           groupedDeps: new Map(),
           allChanges: mockAllChanges,
           open: false,
-          packageName: 'nuxt',
-          toVersion: '3.0.0',
-          toVersionUrlPattern: 'https://npmx.dev/package/nuxt/v/3.0.0',
+          packageName: "nuxt",
+          toVersion: "3.0.0",
+          toVersionUrlPattern: "https://npmx.dev/package/nuxt/v/3.0.0",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations when open', async () => {
+    it("should have no accessibility violations when open", async () => {
       const component = await mountSuspended(DiffMobileSidebarDrawer, {
         props: {
           compare: mockCompare,
           groupedDeps: new Map(),
           allChanges: mockAllChanges,
           open: true,
-          packageName: 'nuxt',
-          toVersion: '3.0.0',
-          toVersionUrlPattern: 'https://npmx.dev/package/nuxt/v/3.0.0',
+          packageName: "nuxt",
+          toVersion: "3.0.0",
+          toVersionUrlPattern: "https://npmx.dev/package/nuxt/v/3.0.0",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('DiffViewerPanel', () => {
+  describe("DiffViewerPanel", () => {
     const mockFile = {
-      path: 'src/index.ts',
-      type: 'modified' as const,
+      path: "src/index.ts",
+      type: "modified" as const,
       oldSize: 500,
       newSize: 600,
-    }
+    };
 
     // Note: DiffViewerPanel fetches content from CDN, so we test the initial/loading states
     // Full diff rendering tests would require mocking fetch
 
-    it('should have no accessibility violations in loading state', async () => {
+    it("should have no accessibility violations in loading state", async () => {
       const component = await mountSuspended(DiffViewerPanel, {
         props: {
-          packageName: 'test-package',
-          fromVersion: '1.0.0',
-          toVersion: '2.0.0',
+          packageName: "test-package",
+          fromVersion: "1.0.0",
+          toVersion: "2.0.0",
           file: mockFile,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for added file', async () => {
+    it("should have no accessibility violations for added file", async () => {
       const addedFile = {
-        path: 'src/new-feature.ts',
-        type: 'added' as const,
+        path: "src/new-feature.ts",
+        type: "added" as const,
         newSize: 200,
-      }
+      };
       const component = await mountSuspended(DiffViewerPanel, {
         props: {
-          packageName: 'test-package',
-          fromVersion: '1.0.0',
-          toVersion: '2.0.0',
+          packageName: "test-package",
+          fromVersion: "1.0.0",
+          toVersion: "2.0.0",
           file: addedFile,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations for removed file', async () => {
+    it("should have no accessibility violations for removed file", async () => {
       const removedFile = {
-        path: 'src/deprecated.ts',
-        type: 'removed' as const,
+        path: "src/deprecated.ts",
+        type: "removed" as const,
         oldSize: 300,
-      }
+      };
       const component = await mountSuspended(DiffViewerPanel, {
         props: {
-          packageName: 'test-package',
-          fromVersion: '1.0.0',
-          toVersion: '2.0.0',
+          packageName: "test-package",
+          fromVersion: "1.0.0",
+          toVersion: "2.0.0",
           file: removedFile,
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('SizeIncrease', () => {
-    it('should have no accessibility violations', async () => {
+  describe("SizeIncrease", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(SizeIncrease, {
         props: {
           diff: {
-            comparisonVersion: '1.0.0',
+            comparisonVersion: "1.0.0",
             sizeRatio: 1,
             sizeIncrease: 200,
             currentSize: 400,
@@ -4041,16 +4120,16 @@ describe('component accessibility audits', () => {
             depThresholdExceeded: true,
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with only size increase', async () => {
+    it("should have no accessibility violations with only size increase", async () => {
       const component = await mountSuspended(SizeIncrease, {
         props: {
           diff: {
-            comparisonVersion: '1.0.0',
+            comparisonVersion: "1.0.0",
             sizeRatio: 1,
             sizeIncrease: 200,
             currentSize: 400,
@@ -4062,16 +4141,16 @@ describe('component accessibility audits', () => {
             depThresholdExceeded: false,
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations with only dependency increase', async () => {
+    it("should have no accessibility violations with only dependency increase", async () => {
       const component = await mountSuspended(SizeIncrease, {
         props: {
           diff: {
-            comparisonVersion: '1.0.0',
+            comparisonVersion: "1.0.0",
             sizeRatio: 0,
             sizeIncrease: 0,
             currentSize: 200,
@@ -4083,296 +4162,306 @@ describe('component accessibility audits', () => {
             depThresholdExceeded: true,
           },
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('PackageActionBar', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(PackageActionBar)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('PackageSelectionView', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(PackageSelectionView)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations changing view mode', async () => {
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("PackageActionBar", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(PackageActionBar);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("PackageSelectionView", () => {
+    it("should have no accessibility violations", async () => {
+      const component = await mountSuspended(PackageSelectionView);
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations changing view mode", async () => {
       const component = await mountSuspended(PackageSelectionView, {
         props: {
-          viewMode: 'table',
+          viewMode: "table",
         },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('PackageSelectionCheckbox', () => {
-    it('should have no accessibility violations when disabled', async () => {
+  describe("PackageSelectionCheckbox", () => {
+    it("should have no accessibility violations when disabled", async () => {
       const component = await mountSuspended(PackageSelectionCheckbox, {
         props: {
-          packageName: 'nuxt',
+          packageName: "nuxt",
           checked: false,
           disabled: true,
         },
-      })
+      });
 
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
 
-    it('should have no accessibility violations', async () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(PackageSelectionCheckbox, {
         props: {
-          packageName: 'nuxt',
+          packageName: "nuxt",
           checked: false,
         },
-      })
+      });
 
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
 
-  describe('Alert', () => {
-    it('should have no accessibility violations for warning variant', async () => {
+  describe("Alert", () => {
+    it("should have no accessibility violations for warning variant", async () => {
       const component = await mountSuspended(Alert, {
-        props: { variant: 'warning', title: 'Warning title' },
-        slots: { default: 'This is a warning message.' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations for error variant', async () => {
+        props: { variant: "warning", title: "Warning title" },
+        slots: { default: "This is a warning message." },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations for error variant", async () => {
       const component = await mountSuspended(Alert, {
-        props: { variant: 'error', title: 'Error title' },
-        slots: { default: 'This is an error message.' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations without title', async () => {
+        props: { variant: "error", title: "Error title" },
+        slots: { default: "This is an error message." },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+
+    it("should have no accessibility violations without title", async () => {
       const component = await mountSuspended(Alert, {
-        props: { variant: 'warning' },
-        slots: { default: 'This is a warning message.' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
-  describe('ProgressBar', () => {
-    it('should have no accessibility violations', async () => {
+        props: { variant: "warning" },
+        slots: { default: "This is a warning message." },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+
+  describe("ProgressBar", () => {
+    it("should have no accessibility violations", async () => {
       const component = await mountSuspended(ProgressBar, {
-        props: { val: 99, label: 'Progress status for en' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-})
+        props: { val: 99, label: "Progress status for en" },
+      });
+      const results = await runAxe(component);
+      expect(results.violations).toEqual([]);
+    });
+  });
+});
 
 function applyTheme(colorMode: string, bgTheme: string | null) {
-  document.documentElement.dataset.theme = colorMode
-  document.documentElement.classList.add(colorMode)
-  if (bgTheme) document.documentElement.dataset.bgTheme = bgTheme
+  document.documentElement.dataset.theme = colorMode;
+  document.documentElement.classList.add(colorMode);
+  if (bgTheme) document.documentElement.dataset.bgTheme = bgTheme;
 }
 
-describe('background theme accessibility', () => {
+describe("background theme accessibility", () => {
   const pairs = [
-    ['light', 'neutral'],
-    ['dark', 'neutral'],
-    ['light', 'stone'],
-    ['dark', 'stone'],
-    ['light', 'zinc'],
-    ['dark', 'zinc'],
-    ['light', 'slate'],
-    ['dark', 'slate'],
-    ['light', 'black'],
-    ['dark', 'black'],
-  ] as const
+    ["light", "neutral"],
+    ["dark", "neutral"],
+    ["light", "stone"],
+    ["dark", "stone"],
+    ["light", "zinc"],
+    ["dark", "zinc"],
+    ["light", "slate"],
+    ["dark", "slate"],
+    ["light", "black"],
+    ["dark", "black"],
+  ] as const;
 
   afterEach(() => {
-    document.documentElement.removeAttribute('data-theme')
-    document.documentElement.removeAttribute('data-bg-theme')
-    document.documentElement.classList.remove('light', 'dark')
-  })
+    document.documentElement.removeAttribute("data-theme");
+    document.documentElement.removeAttribute("data-bg-theme");
+    document.documentElement.classList.remove("light", "dark");
+  });
 
   const packageResult = {
     package: {
-      name: 'vue',
-      version: '3.5.0',
-      description: 'Framework',
-      date: '2024-01-15T00:00:00.000Z',
+      name: "vue",
+      version: "3.5.0",
+      description: "Framework",
+      date: "2024-01-15T00:00:00.000Z",
       keywords: [],
       links: {},
-      publisher: { username: 'evan' },
+      publisher: { username: "evan" },
     },
     searchScore: 100000,
-  }
+  };
 
   const components = [
     {
-      name: 'AlertWarning',
+      name: "AlertWarning",
       mount: () =>
         mountSuspended(Alert, {
-          props: { variant: 'warning', title: 'Warning title' },
-          slots: { default: '<p>Warning body</p>' },
+          props: { variant: "warning", title: "Warning title" },
+          slots: { default: "<p>Warning body</p>" },
         }),
     },
     {
-      name: 'AlertError',
+      name: "AlertError",
       mount: () =>
         mountSuspended(Alert, {
-          props: { variant: 'error', title: 'Error title' },
-          slots: { default: '<p>Error body</p>' },
+          props: { variant: "error", title: "Error title" },
+          slots: { default: "<p>Error body</p>" },
         }),
     },
-    { name: 'AppHeader', mount: () => mountSuspended(AppHeader) },
-    { name: 'AppFooter', mount: () => mountSuspended(AppFooter) },
-    { name: 'HeaderSearchBox', mount: () => mountSuspended(HeaderSearchBox) },
+    { name: "AppHeader", mount: () => mountSuspended(AppHeader) },
+    { name: "AppFooter", mount: () => mountSuspended(AppFooter) },
+    { name: "HeaderSearchBox", mount: () => mountSuspended(HeaderSearchBox) },
     {
-      name: 'LoadingSpinner',
-      mount: () => mountSuspended(LoadingSpinner, { props: { text: 'Loading...' } }),
+      name: "LoadingSpinner",
+      mount: () =>
+        mountSuspended(LoadingSpinner, { props: { text: "Loading..." } }),
     },
     {
-      name: 'SettingsToggle',
+      name: "SettingsToggle",
       mount: () =>
         mountSuspended(SettingsToggle, {
-          props: { label: 'Feature', description: 'Desc', modelValue: false },
+          props: { label: "Feature", description: "Desc", modelValue: false },
         }),
     },
     {
-      name: 'SettingsBgThemePicker',
+      name: "SettingsBgThemePicker",
       mount: () => mountSuspended(SettingsBgThemePicker),
     },
     {
-      name: 'ProvenanceBadge',
+      name: "ProvenanceBadge",
       mount: () =>
         mountSuspended(ProvenanceBadge, {
-          props: { provider: 'github', packageName: 'vue', version: '3.0.0' },
+          props: { provider: "github", packageName: "vue", version: "3.0.0" },
         }),
     },
     {
-      name: 'TerminalInstall',
-      mount: () => mountSuspended(TerminalInstall, { props: { packageName: 'vue' } }),
+      name: "TerminalInstall",
+      mount: () =>
+        mountSuspended(TerminalInstall, { props: { packageName: "vue" } }),
     },
     {
-      name: 'LicenseDisplay',
-      mount: () => mountSuspended(LicenseDisplay, { props: { license: 'MIT' } }),
+      name: "LicenseDisplay",
+      mount: () =>
+        mountSuspended(LicenseDisplay, { props: { license: "MIT" } }),
     },
     {
-      name: 'DateTime',
+      name: "DateTime",
       mount: () =>
         mountSuspended(DateTime, {
-          props: { datetime: '2024-01-15T12:00:00.000Z' },
+          props: { datetime: "2024-01-15T12:00:00.000Z" },
         }),
     },
     {
-      name: 'ViewModeToggle',
-      mount: () => mountSuspended(ViewModeToggle, { props: { modelValue: 'cards' } }),
+      name: "ViewModeToggle",
+      mount: () =>
+        mountSuspended(ViewModeToggle, { props: { modelValue: "cards" } }),
     },
     {
-      name: 'TooltipApp',
+      name: "TooltipApp",
       mount: () =>
         mountSuspended(TooltipApp, {
-          props: { text: 'Tooltip' },
-          slots: { default: '<button>Trigger</button>' },
+          props: { text: "Tooltip" },
+          slots: { default: "<button>Trigger</button>" },
         }),
     },
     {
-      name: 'CollapsibleSection',
+      name: "CollapsibleSection",
       mount: () =>
         mountSuspended(CollapsibleSection, {
-          props: { title: 'Title', id: 'section' },
-          slots: { default: '<p>Content</p>' },
+          props: { title: "Title", id: "section" },
+          slots: { default: "<p>Content</p>" },
         }),
     },
     {
-      name: 'FilterChips',
+      name: "FilterChips",
       mount: () =>
         mountSuspended(FilterChips, {
           props: {
-            chips: [{ id: 'text', type: 'text', label: 'Search', value: 'react' }] as FilterChip[],
+            chips: [
+              { id: "text", type: "text", label: "Search", value: "react" },
+            ] as FilterChip[],
           },
         }),
     },
     {
-      name: 'PackageCard',
-      mount: () => mountSuspended(PackageCard, { props: { result: packageResult } }),
+      name: "PackageCard",
+      mount: () =>
+        mountSuspended(PackageCard, { props: { result: packageResult } }),
     },
     {
-      name: 'PackageList',
-      mount: () => mountSuspended(PackageList, { props: { results: [packageResult] } }),
+      name: "PackageList",
+      mount: () =>
+        mountSuspended(PackageList, { props: { results: [packageResult] } }),
     },
-  ]
+  ];
 
   /**
    * For performance, we pool axe runs for each theme combination, optimistically assuming no
    * violations will occur. If violations are found in the pooled run, we re-run axe on individual
    * components for precise results.
    */
-  const pooledResults = new Map<string, Promise<AxeResults>>()
+  const pooledResults = new Map<string, Promise<AxeResults>>();
 
   function getPooledResults(colorMode: string, bgTheme: string) {
-    const key = `${colorMode}:${bgTheme}`
-    const cached = pooledResults.get(key)
-    if (cached) return cached
+    const key = `${colorMode}:${bgTheme}`;
+    const cached = pooledResults.get(key);
+    if (cached) return cached;
 
     const promise = (async () => {
-      const wrappers = await Promise.all(components.map(({ mount }) => mount()))
-      const poolContainer = document.createElement('div')
-      poolContainer.id = `a11y-theme-pool-${colorMode}-${bgTheme}`
-      document.body.appendChild(poolContainer)
-      mountedContainers.push(poolContainer)
+      const wrappers = await Promise.all(
+        components.map(({ mount }) => mount()),
+      );
+      const poolContainer = document.createElement("div");
+      poolContainer.id = `a11y-theme-pool-${colorMode}-${bgTheme}`;
+      document.body.appendChild(poolContainer);
+      mountedContainers.push(poolContainer);
 
       try {
         for (const wrapper of wrappers) {
-          const el = wrapper.element.cloneNode(true) as HTMLElement
-          poolContainer.appendChild(el)
+          const el = wrapper.element.cloneNode(true) as HTMLElement;
+          poolContainer.appendChild(el);
         }
 
-        await nextTick()
-        return await axe.run(poolContainer, axeRunOptions)
+        await nextTick();
+        return await axe.run(poolContainer, axeRunOptions);
       } finally {
         for (const wrapper of wrappers) {
-          wrapper.unmount()
+          wrapper.unmount();
         }
       }
-    })()
+    })();
 
-    pooledResults.set(key, promise)
-    return promise
+    pooledResults.set(key, promise);
+    return promise;
   }
 
   for (const { name, mount } of components) {
     describe(`${name} colors`, () => {
       for (const [colorMode, bgTheme] of pairs) {
         it(`${colorMode}/${bgTheme}`, async () => {
-          applyTheme(colorMode, bgTheme)
+          applyTheme(colorMode, bgTheme);
 
-          const pooled = await getPooledResults(colorMode, bgTheme)
-          if (pooled.violations.length === 0) return
+          const pooled = await getPooledResults(colorMode, bgTheme);
+          if (pooled.violations.length === 0) return;
 
-          const wrapper = await mount()
+          const wrapper = await mount();
           try {
-            const results = await runAxe(wrapper)
-            expect(results.violations).toEqual([])
+            const results = await runAxe(wrapper);
+            expect(results.violations).toEqual([]);
           } finally {
-            wrapper.unmount()
+            wrapper.unmount();
           }
-        })
+        });
       }
-    })
+    });
   }
-})
+});

From 3978f759d6481ca8410fddb995a7953d69eb8871 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 24 Apr 2026 15:25:54 +0000
Subject: [PATCH 12/28] [autofix.ci] apply automated fixes

---
 test/nuxt/a11y.spec.ts | 5259 ++++++++++++++++++++--------------------
 1 file changed, 2602 insertions(+), 2657 deletions(-)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 90561ee3c7..c56fafd720 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -1,41 +1,33 @@
-import type { ColumnConfig, FilterChip } from "#shared/types/preferences";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import type { VueWrapper } from "@vue/test-utils";
-import "axe-core";
-import type { AxeResults, RunOptions } from "axe-core";
-import {
-  afterEach,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  type MockInstance,
-  vi,
-} from "vitest";
+import type { ColumnConfig, FilterChip } from '#shared/types/preferences'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import type { VueWrapper } from '@vue/test-utils'
+import 'axe-core'
+import type { AxeResults, RunOptions } from 'axe-core'
+import { afterEach, beforeEach, describe, expect, it, type MockInstance, vi } from 'vitest'
 
 // axe-core is a UMD module that exposes itself as window.axe in the browser
 declare const axe: {
-  run: (context: Element, options?: RunOptions) => Promise<AxeResults>;
-};
+  run: (context: Element, options?: RunOptions) => Promise<AxeResults>
+}
 
 // Track mounted containers for cleanup
-const mountedContainers: HTMLElement[] = [];
+const mountedContainers: HTMLElement[] = []
 
 const axeRunOptions: RunOptions = {
   // Only compute violations to reduce work per run
-  resultTypes: ["violations"],
+  resultTypes: ['violations'],
   // Disable rules that don't apply to isolated component testing
   rules: {
     // These rules check page-level concerns that don't apply to isolated components
-    "landmark-one-main": { enabled: false },
-    region: { enabled: false },
-    "page-has-heading-one": { enabled: false },
+    'landmark-one-main': { enabled: false },
+    'region': { enabled: false },
+    'page-has-heading-one': { enabled: false },
     // Duplicate landmarks are expected when testing multiple header/footer components
-    "landmark-no-duplicate-banner": { enabled: false },
-    "landmark-no-duplicate-contentinfo": { enabled: false },
-    "landmark-no-duplicate-main": { enabled: false },
+    'landmark-no-duplicate-banner': { enabled: false },
+    'landmark-no-duplicate-contentinfo': { enabled: false },
+    'landmark-no-duplicate-main': { enabled: false },
   },
-};
+}
 
 /**
  * Run axe accessibility audit on a mounted component.
@@ -43,39 +35,37 @@ const axeRunOptions: RunOptions = {
  */
 async function runAxe(wrapper: VueWrapper): Promise<AxeResults> {
   // Create an isolated container for this test
-  const container = document.createElement("div");
-  container.id = `test-container-${Date.now()}`;
-  document.body.appendChild(container);
-  mountedContainers.push(container);
+  const container = document.createElement('div')
+  container.id = `test-container-${Date.now()}`
+  document.body.appendChild(container)
+  mountedContainers.push(container)
 
   // Clone the element into our isolated container
-  const el = wrapper.element.cloneNode(true) as HTMLElement;
-  container.appendChild(el);
+  const el = wrapper.element.cloneNode(true) as HTMLElement
+  container.appendChild(el)
 
   // Run axe only on the isolated container
-  return axe.run(container, axeRunOptions);
+  return axe.run(container, axeRunOptions)
 }
 
-async function runAxeElements(
-  elements: Array<Element | null | undefined>,
-): Promise<AxeResults> {
-  const container = document.createElement("div");
-  container.id = `test-container-${Date.now()}`;
-  document.body.appendChild(container);
-  mountedContainers.push(container);
+async function runAxeElements(elements: Array<Element | null | undefined>): Promise<AxeResults> {
+  const container = document.createElement('div')
+  container.id = `test-container-${Date.now()}`
+  document.body.appendChild(container)
+  mountedContainers.push(container)
 
   for (const element of elements) {
-    if (!element) continue;
-    container.appendChild(element.cloneNode(true));
+    if (!element) continue
+    container.appendChild(element.cloneNode(true))
   }
 
-  return axe.run(container, axeRunOptions);
+  return axe.run(container, axeRunOptions)
 }
 
 // --- Console warning assertion --------------------------------------------------
 // Fail any test that emits unexpected console.warn calls. This catches issues
 // like missing/invalid props that would otherwise silently pass.
-let warnSpy: MockInstance;
+let warnSpy: MockInstance
 
 // Patterns that are expected and safe to ignore in the test environment.
 const allowedWarnings: RegExp[] = [
@@ -87,43 +77,41 @@ const allowedWarnings: RegExp[] = [
   // DiffFileTree instances), this triggers a duplicate expose() call on the
   // inner wrapper. The warning does not affect test correctness.
   /expose\(\) should be called only once/,
-];
+]
 
 beforeEach(() => {
-  warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-});
+  warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+})
 
 afterEach(() => {
   // Collect unexpected warnings
   const unexpected = warnSpy.mock.calls.filter(
-    (args) => !allowedWarnings.some((re) => re.test(String(args[0]))),
-  );
-  warnSpy.mockRestore();
+    args => !allowedWarnings.some(re => re.test(String(args[0]))),
+  )
+  warnSpy.mockRestore()
 
   if (unexpected.length > 0) {
-    const msgs = unexpected
-      .map((args) => args.map(String).join(" "))
-      .join("\n");
-    throw new Error(`Test emitted unexpected console.warn:\n${msgs}`);
+    const msgs = unexpected.map(args => args.map(String).join(' ')).join('\n')
+    throw new Error(`Test emitted unexpected console.warn:\n${msgs}`)
   }
-});
+})
 
 // Clean up mounted containers after each test
 afterEach(() => {
   for (const container of mountedContainers) {
-    container.remove();
+    container.remove()
   }
-  mountedContainers.length = 0;
-});
+  mountedContainers.length = 0
+})
 
 // VueUiXy is imported directly in <script setup>, so global stubs cannot override it.
 // We mock the module itself to prevent vue-data-ui from mounting charts during tests
 // (it relies on DOM measurements and causes runtime errors in Vitest / Playwright).
 // This render-function stub avoids the Vue runtime-compiler warning and keeps slots working.
-vi.mock("vue-data-ui/vue-ui-xy", () => {
+vi.mock('vue-data-ui/vue-ui-xy', () => {
   return {
     VueUiXy: defineComponent({
-      name: "VueUiXy",
+      name: 'VueUiXy',
       inheritAttrs: false,
       // Declare the props VueUiXy receives so they don't fall through to attrs.
       // Spreading `dataset` onto a DOM element triggers a Vue warning because
@@ -133,22 +121,17 @@ vi.mock("vue-data-ui/vue-ui-xy", () => {
         config: { type: Object, default: () => ({}) },
       },
       setup(_, { slots }) {
-        return () =>
-          h(
-            "div",
-            { "data-test-id": "vue-ui-xy-stub" },
-            slots.default?.() ?? [],
-          );
+        return () => h('div', { 'data-test-id': 'vue-ui-xy-stub' }, slots.default?.() ?? [])
       },
     }),
-  };
-});
+  }
+})
 
-vi.mock("~/composables/useCanGoBack", () => {
+vi.mock('~/composables/useCanGoBack', () => {
   return {
     useCanGoBack: () => shallowRef(true),
-  };
-});
+  }
+})
 
 // Import components from #components where possible
 // For server/client variants, we need to import directly to test the specific variant
@@ -273,602 +256,598 @@ import {
   TabList,
   TabItem,
   TabPanel,
-} from "#components";
+} from '#components'
 
 // Server variant components must be imported directly to test the server-side render
 // The #components import automatically provides the client variant
-import LogoNuxt from "~/assets/logos/oss-partners/nuxt.svg";
-import CommandPaletteComponent from "~/components/CommandPalette.client.vue";
-import HeaderAccountMenuServer from "~/components/Header/AccountMenu.server.vue";
-import ToggleServer from "~/components/Settings/Toggle.server.vue";
-import SearchProviderToggleServer from "~/components/SearchProviderToggle.server.vue";
-import PackageTrendsChart from "~/components/Package/TrendsChart.vue";
-import FacetBarChart from "~/components/Compare/FacetBarChart.vue";
-import FacetScatterChart from "~/components/Compare/FacetScatterChart.vue";
-import PackageLikeCard from "~/components/Package/LikeCard.vue";
-import SizeIncrease from "~/components/Package/SizeIncrease.vue";
-import Likes from "~/components/Package/Likes.vue";
-import AccountItem from "~/components/AccountItem.vue";
-import LinkedAccounts from "~/components/LinkedAccounts.vue";
-import ProfileHeader from "~/components/ProfileHeader.vue";
-import type { VueUiXyDatasetItem } from "vue-data-ui";
-
-describe("component accessibility audits", () => {
-  describe("DateTime", () => {
-    it("should have no accessibility violations with ISO string datetime", async () => {
+import LogoNuxt from '~/assets/logos/oss-partners/nuxt.svg'
+import CommandPaletteComponent from '~/components/CommandPalette.client.vue'
+import HeaderAccountMenuServer from '~/components/Header/AccountMenu.server.vue'
+import ToggleServer from '~/components/Settings/Toggle.server.vue'
+import SearchProviderToggleServer from '~/components/SearchProviderToggle.server.vue'
+import PackageTrendsChart from '~/components/Package/TrendsChart.vue'
+import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
+import FacetScatterChart from '~/components/Compare/FacetScatterChart.vue'
+import PackageLikeCard from '~/components/Package/LikeCard.vue'
+import SizeIncrease from '~/components/Package/SizeIncrease.vue'
+import Likes from '~/components/Package/Likes.vue'
+import AccountItem from '~/components/AccountItem.vue'
+import LinkedAccounts from '~/components/LinkedAccounts.vue'
+import ProfileHeader from '~/components/ProfileHeader.vue'
+import type { VueUiXyDatasetItem } from 'vue-data-ui'
+
+describe('component accessibility audits', () => {
+  describe('DateTime', () => {
+    it('should have no accessibility violations with ISO string datetime', async () => {
       const component = await mountSuspended(DateTime, {
-        props: { datetime: "2024-01-15T12:00:00.000Z" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { datetime: '2024-01-15T12:00:00.000Z' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with Date object", async () => {
+    it('should have no accessibility violations with Date object', async () => {
       const component = await mountSuspended(DateTime, {
-        props: { datetime: new Date("2024-01-15T12:00:00.000Z") },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { datetime: new Date('2024-01-15T12:00:00.000Z') },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with custom title", async () => {
+    it('should have no accessibility violations with custom title', async () => {
       const component = await mountSuspended(DateTime, {
         props: {
-          datetime: "2024-01-15T12:00:00.000Z",
-          title: "Last updated on January 15, 2024",
+          datetime: '2024-01-15T12:00:00.000Z',
+          title: 'Last updated on January 15, 2024',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with dateStyle", async () => {
+    it('should have no accessibility violations with dateStyle', async () => {
       const component = await mountSuspended(DateTime, {
         props: {
-          datetime: "2024-01-15T12:00:00.000Z",
-          dateStyle: "medium",
+          datetime: '2024-01-15T12:00:00.000Z',
+          dateStyle: 'medium',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with individual date parts", async () => {
+    it('should have no accessibility violations with individual date parts', async () => {
       const component = await mountSuspended(DateTime, {
         props: {
-          datetime: "2024-01-15T12:00:00.000Z",
-          year: "numeric",
-          month: "short",
-          day: "numeric",
-        },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("AppHeader", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(AppHeader);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations without logo", async () => {
+          datetime: '2024-01-15T12:00:00.000Z',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('AppHeader', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AppHeader)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations without logo', async () => {
       const component = await mountSuspended(AppHeader, {
         props: { showLogo: false },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations without connector", async () => {
+    it('should have no accessibility violations without connector', async () => {
       const component = await mountSuspended(AppHeader, {
         props: { showConnector: false },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("LandingIntroHeader", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(LandingIntroHeader);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("Noodles", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(NoodleKawaiiLogo);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(NoodleArtemisLogo);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("AppFooter", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(AppFooter);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("AppLogo", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(AppLogo);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations with custom class", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('LandingIntroHeader', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(LandingIntroHeader)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('Noodles', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(NoodleKawaiiLogo)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(NoodleArtemisLogo)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('AppFooter', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AppFooter)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('AppLogo', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AppLogo)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with custom class', async () => {
       const component = await mountSuspended(AppLogo, {
-        props: { class: "h-6 w-6 text-accent" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("AppMark", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(AppMark);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations with custom class", async () => {
+        props: { class: 'h-6 w-6 text-accent' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('AppMark', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AppMark)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with custom class', async () => {
       const component = await mountSuspended(AppMark, {
-        props: { class: "h-6 w-6 text-accent" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("AboutLogoImg", () => {
-    it("should have no accessibility violations with string src", async () => {
+        props: { class: 'h-6 w-6 text-accent' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('AboutLogoImg', () => {
+    it('should have no accessibility violations with string src', async () => {
       const component = await mountSuspended(AboutLogoImg, {
         props: {
           src: LogoNuxt,
-          alt: "Nuxt logo",
+          alt: 'Nuxt logo',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with dark/light src", async () => {
+    it('should have no accessibility violations with dark/light src', async () => {
       const component = await mountSuspended(AboutLogoImg, {
         props: {
           src: {
             dark: LogoNuxt,
-            light: "auto",
+            light: 'auto',
           },
-          alt: "Nuxt logo",
+          alt: 'Nuxt logo',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("AboutLogoList", () => {
-    it("should have no accessibility violations with direct logo items", async () => {
+  describe('AboutLogoList', () => {
+    it('should have no accessibility violations with direct logo items', async () => {
       const component = await mountSuspended(AboutLogoList, {
         props: {
           list: [
             {
-              name: "Nuxt",
-              url: "https://nuxt.com",
+              name: 'Nuxt',
+              url: 'https://nuxt.com',
               logo: LogoNuxt,
             },
             {
-              name: "Nuxt",
-              url: "https://nuxt.com",
+              name: 'Nuxt',
+              url: 'https://nuxt.com',
               logo: {
                 dark: LogoNuxt,
-                light: "auto",
+                light: 'auto',
               },
             },
           ],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with grouped items", async () => {
+    it('should have no accessibility violations with grouped items', async () => {
       const component = await mountSuspended(AboutLogoList, {
         props: {
           list: [
             {
-              name: "OSS Partners",
+              name: 'OSS Partners',
               items: [
                 {
-                  name: "Nuxt",
-                  url: "https://nuxt.com",
+                  name: 'Nuxt',
+                  url: 'https://nuxt.com',
                   logo: LogoNuxt,
                 },
                 {
-                  name: "Nuxt",
-                  url: "https://nuxt.com",
+                  name: 'Nuxt',
+                  url: 'https://nuxt.com',
                   logo: {
                     dark: LogoNuxt,
-                    light: "auto",
+                    light: 'auto',
                   },
                 },
               ],
             },
           ],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("BaseCard", () => {
-    it("should have no accessibility violations", async () => {
+  describe('BaseCard', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(BaseCard, {
-        slots: { default: "<p>Card content</p>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        slots: { default: '<p>Card content</p>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with exact match highlight", async () => {
+    it('should have no accessibility violations with exact match highlight', async () => {
       const component = await mountSuspended(BaseCard, {
         props: { isExactMatch: true },
-        slots: { default: "<p>Exact match content</p>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("BackButton", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(BackButton);
-      expect(component.find("button").exists()).toBe(true);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("CommandPalette", () => {
-    let commandPalette: ReturnType<typeof useCommandPalette> | null = null;
+        slots: { default: '<p>Exact match content</p>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('BackButton', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(BackButton)
+      expect(component.find('button').exists()).toBe(true)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CommandPalette', () => {
+    let commandPalette: ReturnType<typeof useCommandPalette> | null = null
 
     const CommandPaletteHarness = defineComponent({
-      name: "CommandPaletteHarness",
+      name: 'CommandPaletteHarness',
       setup() {
-        commandPalette = useCommandPalette();
+        commandPalette = useCommandPalette()
 
         onMounted(() => {
-          commandPalette?.open();
-        });
+          commandPalette?.open()
+        })
 
         onBeforeUnmount(() => {
-          commandPalette?.close();
-          commandPalette?.clearPackageContext();
-        });
+          commandPalette?.close()
+          commandPalette?.clearPackageContext()
+        })
 
-        return () => h("div", [h(CommandPaletteComponent)]);
+        return () => h('div', [h(CommandPaletteComponent)])
       },
-    });
+    })
 
     afterEach(() => {
-      commandPalette?.close();
-      commandPalette?.clearPackageContext();
-      commandPalette = null;
-    });
-
-    it("should have no accessibility violations when open", async () => {
-      const wrapper = await mountSuspended(CommandPaletteHarness);
-      await nextTick();
-      await nextTick();
-
-      const dialog = document.getElementById("command-palette-modal");
-      const announcer = wrapper.element.querySelector(
-        "#command-palette-modal-announcement",
-      );
-
-      expect(dialog).not.toBeNull();
-      expect(announcer).not.toBeNull();
-
-      const results = await runAxeElements([announcer, dialog]);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("TagStatic", () => {
-    it("should have no accessibility violations", async () => {
+      commandPalette?.close()
+      commandPalette?.clearPackageContext()
+      commandPalette = null
+    })
+
+    it('should have no accessibility violations when open', async () => {
+      const wrapper = await mountSuspended(CommandPaletteHarness)
+      await nextTick()
+      await nextTick()
+
+      const dialog = document.getElementById('command-palette-modal')
+      const announcer = wrapper.element.querySelector('#command-palette-modal-announcement')
+
+      expect(dialog).not.toBeNull()
+      expect(announcer).not.toBeNull()
+
+      const results = await runAxeElements([announcer, dialog])
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('TagStatic', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TagStatic, {
-        slots: { default: "Tag content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("ButtonBase", () => {
-    it("should have no accessibility violations", async () => {
+        slots: { default: 'Tag content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('ButtonBase', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(ButtonBase, {
-        slots: { default: "Button content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        slots: { default: 'Button content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for disabled state", async () => {
+    it('should have no accessibility violations for disabled state', async () => {
       const component = await mountSuspended(ButtonBase, {
         props: { disabled: true },
-        slots: { default: "Button content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        slots: { default: 'Button content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations as primary button", async () => {
+    it('should have no accessibility violations as primary button', async () => {
       const component = await mountSuspended(ButtonBase, {
-        props: { variant: "primary" },
-        slots: { default: "Button content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations with size small", async () => {
+        props: { variant: 'primary' },
+        slots: { default: 'Button content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with size small', async () => {
       const component = await mountSuspended(ButtonBase, {
-        props: { size: "sm" },
-        slots: { default: "Button content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("LinkBase", () => {
-    it("should have no accessibility violations", async () => {
+        props: { size: 'sm' },
+        slots: { default: 'Button content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('LinkBase', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: "http://example.com" },
-        slots: { default: "Button link content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { to: 'http://example.com' },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
     it("should have no accessibility violations when it's the current link", async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: "http://example.com", current: true },
-        slots: { default: "Button link content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations when disabled (plain text)", async () => {
+        props: { to: 'http://example.com', current: true },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when disabled (plain text)', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: "http://example.com", disabled: true },
-        slots: { default: "Button link content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations as secondary button", async () => {
+        props: { to: 'http://example.com', disabled: true },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations as secondary button', async () => {
       const component = await mountSuspended(LinkBase, {
         props: {
-          to: "http://example.com",
+          to: 'http://example.com',
           disabled: true,
-          variant: "button-secondary",
+          variant: 'button-secondary',
         },
-        slots: { default: "Button link content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations as primary button", async () => {
+    it('should have no accessibility violations as primary button', async () => {
       const component = await mountSuspended(LinkBase, {
         props: {
-          to: "http://example.com",
+          to: 'http://example.com',
           disabled: true,
-          variant: "button-primary",
+          variant: 'button-primary',
         },
-        slots: { default: "Button link content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations as small button", async () => {
+    it('should have no accessibility violations as small button', async () => {
       const component = await mountSuspended(LinkBase, {
         props: {
-          to: "http://example.com",
+          to: 'http://example.com',
           disabled: true,
-          variant: "button-secondary",
-          size: "sm",
-        },
-        slots: { default: "Button link content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("Likes", () => {
-    it("should have no accessibility violations", async () => {
+          variant: 'button-secondary',
+          size: 'sm',
+        },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('Likes', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(Likes, {
-        props: { packageName: "svelte" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("TagRadioButton", () => {
-    it("should have no accessibility violations", async () => {
+        props: { packageName: 'svelte' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('TagRadioButton', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TagRadioButton, {
-        props: { value: "option1", modelValue: "option2" },
-        slots: { default: "Tag content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations when checked", async () => {
+        props: { value: 'option1', modelValue: 'option2' },
+        slots: { default: 'Tag content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when checked', async () => {
       const component = await mountSuspended(TagRadioButton, {
-        props: { value: "option1", modelValue: "option1" },
-        slots: { default: "Tag content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations when disabled", async () => {
+        props: { value: 'option1', modelValue: 'option1' },
+        slots: { default: 'Tag content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when disabled', async () => {
       const component = await mountSuspended(TagRadioButton, {
-        props: { value: "option1", modelValue: "option2", disabled: true },
-        slots: { default: "Tag content" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("TooltipApp", () => {
-    it("should have no accessibility violations", async () => {
+        props: { value: 'option1', modelValue: 'option2', disabled: true },
+        slots: { default: 'Tag content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('TooltipApp', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TooltipApp, {
-        props: { text: "Tooltip content" },
-        slots: { default: "<button>Trigger</button>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("TooltipAnnounce", () => {
-    it("should have no accessibility violations", async () => {
+        props: { text: 'Tooltip content' },
+        slots: { default: '<button>Trigger</button>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('TooltipAnnounce', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TooltipAnnounce, {
-        props: { text: "Tooltip content", isVisible: true },
-        slots: { default: "<button>Trigger</button>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("LoadingSpinner", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(LoadingSpinner);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations with custom text", async () => {
+        props: { text: 'Tooltip content', isVisible: true },
+        slots: { default: '<button>Trigger</button>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('LoadingSpinner', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(LoadingSpinner)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with custom text', async () => {
       const component = await mountSuspended(LoadingSpinner, {
-        props: { text: "Fetching data..." },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("ProvenanceBadge", () => {
-    it("should have no accessibility violations without link", async () => {
-      const component = await mountSuspended(ProvenanceBadge);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations with link", async () => {
+        props: { text: 'Fetching data...' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('ProvenanceBadge', () => {
+    it('should have no accessibility violations without link', async () => {
+      const component = await mountSuspended(ProvenanceBadge)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with link', async () => {
       const component = await mountSuspended(ProvenanceBadge, {
         props: {
-          provider: "github",
-          packageName: "vue",
-          version: "3.0.0",
+          provider: 'github',
+          packageName: 'vue',
+          version: '3.0.0',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations in compact mode", async () => {
+    it('should have no accessibility violations in compact mode', async () => {
       const component = await mountSuspended(ProvenanceBadge, {
         props: {
-          provider: "github",
-          packageName: "vue",
-          version: "3.0.0",
+          provider: 'github',
+          packageName: 'vue',
+          version: '3.0.0',
           compact: true,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageSkeleton", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(PackageSkeleton);
-      const results = await runAxe(component);
+  describe('PackageSkeleton', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageSkeleton)
+      const results = await runAxe(component)
       // PackageSkeleton uses empty h1/h2 elements as skeleton placeholders.
       // These are expected since the component represents a loading state.
       // The real content will have proper heading text when loaded.
       // Filter out 'empty-heading' violations as they're expected for skeleton components.
-      const violations = results.violations.filter(
-        (v) => v.id !== "empty-heading",
-      );
-      expect(violations).toEqual([]);
-    });
-  });
-
-  describe("PackageExternalLinks", () => {
-    it("should have no accessibility violations", async () => {
+      const violations = results.violations.filter(v => v.id !== 'empty-heading')
+      expect(violations).toEqual([])
+    })
+  })
+
+  describe('PackageExternalLinks', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageExternalLinks, {
         props: {
           pkg: {
-            _id: "react",
-            name: "react",
-            "dist-tags": { latest: "18.2.0" },
-            time: {
-              created: "2013-01-31T01:07:45.050Z",
-              modified: "2024-03-14T00:00:00.000Z",
-              "18.2.0": "2024-03-14T00:00:00.000Z",
+            '_id': 'react',
+            'name': 'react',
+            'dist-tags': { latest: '18.2.0' },
+            'time': {
+              'created': '2013-01-31T01:07:45.050Z',
+              'modified': '2024-03-14T00:00:00.000Z',
+              '18.2.0': '2024-03-14T00:00:00.000Z',
             },
-            requestedVersion: {
-              version: "18.2.0",
-              _npmVersion: "18.2.0",
-              homepage: "https://react.dev",
+            'requestedVersion': {
+              version: '18.2.0',
+              _npmVersion: '18.2.0',
+              homepage: 'https://react.dev',
               repository: {
-                type: "git",
-                url: "https://github.com/facebook/react.git",
+                type: 'git',
+                url: 'https://github.com/facebook/react.git',
               },
               bugs: {
-                url: "https://github.com/facebook/react/issues",
+                url: 'https://github.com/facebook/react/issues',
               },
-              funding: "https://github.com/sponsors/facebook",
+              funding: 'https://github.com/sponsors/facebook',
               dist: {
-                shasum: "abc123def456",
-                tarball: "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+                shasum: 'abc123def456',
+                tarball: 'https://registry.npmjs.org/react/-/react-18.2.0.tgz',
                 signatures: [],
               },
               deprecated: undefined,
               keywords: [],
-              license: "MIT",
-              name: "react",
-              time: "2024-03-14T00:00:00.000Z",
-              _id: "react@18.2.0",
+              license: 'MIT',
+              name: 'react',
+              time: '2024-03-14T00:00:00.000Z',
+              _id: 'react@18.2.0',
             },
-            versions: {
-              "18.2.0": {
-                version: "18.2.0",
+            'versions': {
+              '18.2.0': {
+                version: '18.2.0',
                 hasProvenance: false,
                 tags: [],
               },
@@ -876,266 +855,266 @@ describe("component accessibility audits", () => {
           },
           jsrInfo: {
             exists: true,
-            url: "https://jsr.io/@react/react",
+            url: 'https://jsr.io/@react/react',
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageCard", () => {
+  describe('PackageCard', () => {
     const mockResult = {
       package: {
-        name: "vue",
-        version: "3.5.0",
-        description: "The progressive JavaScript framework",
-        date: "2024-01-15T00:00:00.000Z",
-        keywords: ["framework", "frontend", "reactive"],
+        name: 'vue',
+        version: '3.5.0',
+        description: 'The progressive JavaScript framework',
+        date: '2024-01-15T00:00:00.000Z',
+        keywords: ['framework', 'frontend', 'reactive'],
         links: {},
         publisher: {
-          username: "yyx990803",
+          username: 'yyx990803',
         },
       },
       searchScore: 100000,
-    };
+    }
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageCard, {
         props: { result: mockResult },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with h2 heading", async () => {
+    it('should have no accessibility violations with h2 heading', async () => {
       const component = await mountSuspended(PackageCard, {
-        props: { result: mockResult, headingLevel: "h2" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { result: mockResult, headingLevel: 'h2' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations showing publisher", async () => {
+    it('should have no accessibility violations showing publisher', async () => {
       const component = await mountSuspended(PackageCard, {
         props: { result: mockResult, showPublisher: true },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("PackageLikeCard", () => {
-    it("should have no accessibility violations", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageLikeCard', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageLikeCard, {
-        props: { packageUrl: "https://npmx.dev/package/vue" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("ProfileHeader", () => {
-    it("should have no accessibility violations with profile data", async () => {
+        props: { packageUrl: 'https://npmx.dev/package/vue' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('ProfileHeader', () => {
+    it('should have no accessibility violations with profile data', async () => {
       const component = await mountSuspended(ProfileHeader, {
         props: {
           profile: {
-            name: "npmx Team",
-            avatar: "https://api.dicebear.com/9.x/shapes/svg?seed=npmx",
-            description: "Open source maintainers",
+            name: 'npmx Team',
+            avatar: 'https://api.dicebear.com/9.x/shapes/svg?seed=npmx',
+            description: 'Open source maintainers',
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("LinkedAccounts", () => {
-    it("should have no accessibility violations with account list", async () => {
+  describe('LinkedAccounts', () => {
+    it('should have no accessibility violations with account list', async () => {
       const component = await mountSuspended(LinkedAccounts, {
         props: {
-          identity: "npmx.dev",
+          identity: 'npmx.dev',
           accounts: [
             {
-              platform: "github",
-              username: "npmx-dev",
-              displayName: "npmx-dev",
-              status: "verified",
-              proofMethod: "github",
-              addedAt: "2026-04-01T10:00:00.000Z",
-              lastCheckedAt: "2026-04-21T10:00:00.000Z",
-              url: "https://github.com/npmx-dev",
+              platform: 'github',
+              username: 'npmx-dev',
+              displayName: 'npmx-dev',
+              status: 'verified',
+              proofMethod: 'github',
+              addedAt: '2026-04-01T10:00:00.000Z',
+              lastCheckedAt: '2026-04-21T10:00:00.000Z',
+              url: 'https://github.com/npmx-dev',
             },
           ],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("AccountItem", () => {
-    it("should have no accessibility violations", async () => {
+  describe('AccountItem', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(AccountItem, {
         props: {
-          identity: "npmx.dev",
+          identity: 'npmx.dev',
           account: {
-            platform: "github",
-            username: "npmx-dev",
-            displayName: "npmx-dev",
-            status: "verified",
-            proofMethod: "github",
-            addedAt: "2026-04-01T10:00:00.000Z",
-            lastCheckedAt: "2026-04-21T10:00:00.000Z",
-            url: "https://github.com/npmx-dev",
+            platform: 'github',
+            username: 'npmx-dev',
+            displayName: 'npmx-dev',
+            status: 'verified',
+            proofMethod: 'github',
+            addedAt: '2026-04-01T10:00:00.000Z',
+            lastCheckedAt: '2026-04-21T10:00:00.000Z',
+            url: 'https://github.com/npmx-dev',
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageHeader", () => {
-    it("should have no accessibility violations", async () => {
+  describe('PackageHeader', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageHeader, {
         props: {
           pkg: {
-            name: "vue",
-            "dist-tags": {},
-            versions: {},
+            'name': 'vue',
+            'dist-tags': {},
+            'versions': {},
           },
-          resolvedVersion: "3.5.0",
+          resolvedVersion: '3.5.0',
           displayVersion: {
-            _id: "1234567890",
-            _npmVersion: "3.5.0",
-            name: "vue",
-            version: "3.5.0",
+            _id: '1234567890',
+            _npmVersion: '3.5.0',
+            name: 'vue',
+            version: '3.5.0',
             dist: {
-              shasum: "1234567890",
+              shasum: '1234567890',
               signatures: [],
-              tarball: "https://npmx.dev/package/vue/tarball",
+              tarball: 'https://npmx.dev/package/vue/tarball',
             },
           },
-          latestVersion: { version: "3.5.0", tags: [] },
+          latestVersion: { version: '3.5.0', tags: [] },
           provenanceData: null,
-          provenanceStatus: "idle",
-          page: "docs",
-          versionUrlPattern: "/package/vue/v/{version}",
+          provenanceStatus: 'idle',
+          page: 'docs',
+          versionUrlPattern: '/package/vue/v/{version}',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
   // Note: PackageWeeklyDownloadStats tests are skipped because vue-data-ui VueUiSparkline
   // component has issues in the test environment (requires DOM measurements that aren't
   // available during SSR-like test mounting).
 
-  describe("PackageChartModal", () => {
-    it("should have no accessibility violations when closed", async () => {
+  describe('PackageChartModal', () => {
+    it('should have no accessibility violations when closed', async () => {
       const component = await mountSuspended(PackageChartModal, {
-        props: { open: false, title: "Downloads" },
-        slots: { default: "<div>Chart content</div>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { open: false, title: 'Downloads' },
+        slots: { default: '<div>Chart content</div>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
     // Note: Testing the open state is challenging because native <dialog>.showModal()
     // requires the element to be in the DOM and connected, which doesn't work well
     // with the test environment's cloning approach. The dialog accessibility is
     // inherently provided by the native <dialog> element with aria-labelledby.
-  });
+  })
 
-  describe("PackageTrendsChart", () => {
+  describe('PackageTrendsChart', () => {
     const mockWeeklyDownloads = [
       {
         value: 1000,
-        weekKey: "2024-W01",
-        weekStart: "2024-01-01",
-        weekEnd: "2024-01-07",
+        weekKey: '2024-W01',
+        weekStart: '2024-01-01',
+        weekEnd: '2024-01-07',
         timestampStart: 1704067200,
         timestampEnd: 1704585600,
       },
       {
         value: 1200,
-        weekKey: "2024-W02",
-        weekStart: "2024-01-08",
-        weekEnd: "2024-01-14",
+        weekKey: '2024-W02',
+        weekStart: '2024-01-08',
+        weekEnd: '2024-01-14',
         timestampStart: 1704672000,
         timestampEnd: 1705190400,
       },
       {
         value: 1500,
-        weekKey: "2024-W03",
-        weekStart: "2024-01-15",
-        weekEnd: "2024-01-21",
+        weekKey: '2024-W03',
+        weekStart: '2024-01-15',
+        weekEnd: '2024-01-21',
         timestampStart: 1705276800,
         timestampEnd: 1705795200,
       },
-    ];
+    ]
 
-    it("should have no accessibility violations (non-modal)", async () => {
+    it('should have no accessibility violations (non-modal)', async () => {
       const wrapper = await mountSuspended(PackageTrendsChart, {
         props: {
           weeklyDownloads: mockWeeklyDownloads,
-          packageName: "vue",
-          createdIso: "2020-01-01T00:00:00.000Z",
+          packageName: 'vue',
+          createdIso: '2020-01-01T00:00:00.000Z',
           inModal: false,
         },
-      });
+      })
 
-      const results = await runAxe(wrapper);
-      expect(results.violations).toEqual([]);
-    });
+      const results = await runAxe(wrapper)
+      expect(results.violations).toEqual([])
+    })
 
-    describe("FacetBarChart", () => {
-      it("should have no accessibility violations", async () => {
+    describe('FacetBarChart', () => {
+      it('should have no accessibility violations', async () => {
         const wrapper = await mountSuspended(FacetBarChart, {
           props: {
             values: [
-              { raw: 100, display: "100 MB" },
-              { raw: 50, display: "50 MB" },
+              { raw: 100, display: '100 MB' },
+              { raw: 50, display: '50 MB' },
             ],
-            packages: ["nuxt", "vue"],
-            label: "Package Size",
-            description: "Size of the package itself (unpacked)",
+            packages: ['nuxt', 'vue'],
+            label: 'Package Size',
+            description: 'Size of the package itself (unpacked)',
           },
-        });
-        const results = await runAxe(wrapper);
-        expect(results.violations).toEqual([]);
-      });
-    });
-
-    describe("FacetScatterChart", () => {
-      it("should have no accessibility violations", async () => {
+        })
+        const results = await runAxe(wrapper)
+        expect(results.violations).toEqual([])
+      })
+    })
+
+    describe('FacetScatterChart', () => {
+      it('should have no accessibility violations', async () => {
         const wrapper = await mountSuspended(FacetScatterChart, {
           props: {
             packagesData: [
               {
                 package: {
-                  name: "vue",
-                  version: "3.5.32",
+                  name: 'vue',
+                  version: '3.5.32',
                 },
                 downloads: 10979552,
                 packageSize: 2480183,
                 directDeps: 5,
                 analysis: {
-                  package: "vue",
-                  version: "3.5.32",
+                  package: 'vue',
+                  version: '3.5.32',
                   devDependencySuggestion: {
                     recommended: false,
                   },
-                  moduleFormat: "dual",
+                  moduleFormat: 'dual',
                   types: {
-                    kind: "included",
+                    kind: 'included',
                   },
                   createPackage: {
-                    packageName: "create-vue",
+                    packageName: 'create-vue',
                   },
                 },
                 vulnerabilities: {
@@ -1148,37 +1127,37 @@ describe("component accessibility audits", () => {
                   },
                 },
                 metadata: {
-                  license: "MIT",
-                  lastUpdated: "2026-04-03T05:41:39.680Z",
+                  license: 'MIT',
+                  lastUpdated: '2026-04-03T05:41:39.680Z',
                 },
                 isBinaryOnly: false,
                 totalLikes: 85,
               },
               {
                 package: {
-                  name: "svelte",
-                  version: "5.55.1",
+                  name: 'svelte',
+                  version: '5.55.1',
                 },
                 downloads: 4378382,
                 packageSize: 2823272,
                 directDeps: 16,
                 analysis: {
-                  package: "svelte",
-                  version: "5.55.1",
+                  package: 'svelte',
+                  version: '5.55.1',
                   devDependencySuggestion: {
                     recommended: false,
                   },
-                  moduleFormat: "dual",
+                  moduleFormat: 'dual',
                   types: {
-                    kind: "included",
+                    kind: 'included',
                   },
                   engines: {
-                    node: ">=18",
+                    node: '>=18',
                   },
                   createPackage: {
-                    packageName: "create-svelte",
+                    packageName: 'create-svelte',
                     deprecated:
-                      "create-svelte has been deprecated - please use https://www.npmjs.com/package/sv instead",
+                      'create-svelte has been deprecated - please use https://www.npmjs.com/package/sv instead',
                   },
                 },
                 vulnerabilities: {
@@ -1191,82 +1170,82 @@ describe("component accessibility audits", () => {
                   },
                 },
                 metadata: {
-                  license: "MIT",
-                  lastUpdated: "2026-03-29T20:58:44.673Z",
+                  license: 'MIT',
+                  lastUpdated: '2026-03-29T20:58:44.673Z',
                   engines: {
-                    node: ">=18",
+                    node: '>=18',
                   },
                 },
                 isBinaryOnly: false,
                 totalLikes: 191,
               },
             ],
-            packages: ["vue", "svelte"],
+            packages: ['vue', 'svelte'],
           },
-        });
-        const results = await runAxe(wrapper);
-        expect(results.violations).toEqual([]);
-      });
+        })
+        const results = await runAxe(wrapper)
+        expect(results.violations).toEqual([])
+      })
 
-      it("should have no accessibility violations with empty data", async () => {
+      it('should have no accessibility violations with empty data', async () => {
         const wrapper = await mountSuspended(FacetScatterChart, {
           props: {
             packagesData: [],
             packages: [],
           },
-        });
+        })
 
-        const results = await runAxe(wrapper);
-        expect(results.violations).toEqual([]);
-      });
-    });
+        const results = await runAxe(wrapper)
+        expect(results.violations).toEqual([])
+      })
+    })
 
-    it("should have no accessibility violations with empty data", async () => {
+    it('should have no accessibility violations with empty data', async () => {
       const wrapper = await mountSuspended(PackageTrendsChart, {
         props: {
           weeklyDownloads: [],
-          packageName: "vue",
+          packageName: 'vue',
           createdIso: null,
           inModal: false,
         },
-      });
+      })
 
-      const results = await runAxe(wrapper);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      const results = await runAxe(wrapper)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("ChartSplitSparkline", () => {
+  describe('ChartSplitSparkline', () => {
     const dataset = [
       {
-        color: "oklch(0.7025 0.132 160.37)",
-        name: "vue",
+        color: 'oklch(0.7025 0.132 160.37)',
+        name: 'vue',
         series: [100_000, 200_000, 150_000],
-        type: "line",
+        type: 'line',
         dashIndices: [],
       },
       {
-        color: "oklch(0.6917 0.1865 35.04)",
-        name: "svelte",
+        color: 'oklch(0.6917 0.1865 35.04)',
+        name: 'svelte',
         series: [100_000, 200_000, 150_000],
-        type: "line",
+        type: 'line',
         dashIndices: [],
       },
     ] as Array<
       VueUiXyDatasetItem & {
-        color?: string;
-        series: number[];
-        dashIndices?: number[];
+        color?: string
+        series: number[]
+        dashIndices?: number[]
       }
-    >;
-    const dates = [1743465600000, 1744070400000, 1744675200000];
+    >
+    const dates = [1743465600000, 1744070400000, 1744675200000]
     const datetimeFormatterOptions = {
-      year: "yyyy-MM-dd",
-      month: "yyyy-MM-dd",
-      day: "yyyy-MM-dd",
-    };
+      year: 'yyyy-MM-dd',
+      month: 'yyyy-MM-dd',
+      day: 'yyyy-MM-dd',
+    }
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(ChartSplitSparkline, {
         props: {
           dataset,
@@ -1274,12 +1253,12 @@ describe("component accessibility audits", () => {
           datetimeFormatterOptions,
           showLastDatapointEstimation: false,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when empty", async () => {
+    it('should have no accessibility violations when empty', async () => {
       const component = await mountSuspended(ChartSplitSparkline, {
         props: {
           dataset: [],
@@ -1287,888 +1266,877 @@ describe("component accessibility audits", () => {
           datetimeFormatterOptions,
           showLastDatapointEstimation: false,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("TabRoot + TabList + TabItem + TabPanel", () => {
+  describe('TabRoot + TabList + TabItem + TabPanel', () => {
     function createTabsFixture(modelValue: string, idPrefix: string) {
       return defineComponent({
         setup() {
           return () =>
             h(TabRoot, { modelValue, idPrefix }, () => [
-              h(TabList, { ariaLabel: "Test tabs" }, () => [
-                h(TabItem, { value: "first" }, () => "First"),
-                h(TabItem, { value: "second" }, () => "Second"),
+              h(TabList, { ariaLabel: 'Test tabs' }, () => [
+                h(TabItem, { value: 'first' }, () => 'First'),
+                h(TabItem, { value: 'second' }, () => 'Second'),
               ]),
-              h(TabPanel, { value: "first" }, () => "First content"),
-              h(TabPanel, { value: "second" }, () => "Second content"),
-            ]);
+              h(TabPanel, { value: 'first' }, () => 'First content'),
+              h(TabPanel, { value: 'second' }, () => 'Second content'),
+            ])
         },
-      });
+      })
     }
 
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(
-        createTabsFixture("first", "a11y-test"),
-      );
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations with second tab selected", async () => {
-      const component = await mountSuspended(
-        createTabsFixture("second", "a11y-test2"),
-      );
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("PackagePlaygrounds", () => {
-    it("should have no accessibility violations with single link", async () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(createTabsFixture('first', 'a11y-test'))
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with second tab selected', async () => {
+      const component = await mountSuspended(createTabsFixture('second', 'a11y-test2'))
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackagePlaygrounds', () => {
+    it('should have no accessibility violations with single link', async () => {
       const links = [
         {
-          provider: "stackblitz",
-          providerName: "StackBlitz",
-          label: "Open in StackBlitz",
-          url: "https://stackblitz.com/example",
+          provider: 'stackblitz',
+          providerName: 'StackBlitz',
+          label: 'Open in StackBlitz',
+          url: 'https://stackblitz.com/example',
         },
-      ];
+      ]
       const component = await mountSuspended(PackagePlaygrounds, {
         props: { links },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with multiple links", async () => {
+    it('should have no accessibility violations with multiple links', async () => {
       const links = [
         {
-          provider: "stackblitz",
-          providerName: "StackBlitz",
-          label: "Open in StackBlitz",
-          url: "https://stackblitz.com/example",
+          provider: 'stackblitz',
+          providerName: 'StackBlitz',
+          label: 'Open in StackBlitz',
+          url: 'https://stackblitz.com/example',
         },
         {
-          provider: "codesandbox",
-          providerName: "CodeSandbox",
-          label: "Open in CodeSandbox",
-          url: "https://codesandbox.io/example",
+          provider: 'codesandbox',
+          providerName: 'CodeSandbox',
+          label: 'Open in CodeSandbox',
+          url: 'https://codesandbox.io/example',
         },
-      ];
+      ]
       const component = await mountSuspended(PackagePlaygrounds, {
         props: { links },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with empty links", async () => {
+    it('should have no accessibility violations with empty links', async () => {
       const component = await mountSuspended(PackagePlaygrounds, {
         props: { links: [] },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("PackageDependencies", () => {
-    it("should have no accessibility violations without dependencies", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageDependencies', () => {
+    it('should have no accessibility violations without dependencies', async () => {
       const component = await mountSuspended(PackageDependencies, {
-        props: { packageName: "test-package", version: "1.0.0" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { packageName: 'test-package', version: '1.0.0' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with dependencies", async () => {
+    it('should have no accessibility violations with dependencies', async () => {
       const component = await mountSuspended(PackageDependencies, {
         props: {
-          packageName: "test-package",
-          version: "1.0.0",
+          packageName: 'test-package',
+          version: '1.0.0',
           dependencies: {
-            vue: "^3.0.0",
-            lodash: "^4.17.0",
+            vue: '^3.0.0',
+            lodash: '^4.17.0',
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with peer dependencies", async () => {
+    it('should have no accessibility violations with peer dependencies', async () => {
       const component = await mountSuspended(PackageDependencies, {
         props: {
-          packageName: "test-package",
-          version: "1.0.0",
+          packageName: 'test-package',
+          version: '1.0.0',
           peerDependencies: {
-            vue: "^3.0.0",
+            vue: '^3.0.0',
           },
           peerDependenciesMeta: {
             vue: { optional: true },
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageVersions", () => {
-    it("should have no accessibility violations", async () => {
+  describe('PackageVersions', () => {
+    it('should have no accessibility violations', async () => {
       // Minimal mock data satisfying SlimVersion type
       const mockVersion = {
-        version: "3.5.0",
+        version: '3.5.0',
         deprecated: undefined,
         tags: undefined,
-      };
+      }
       const component = await mountSuspended(PackageVersions, {
         props: {
-          packageName: "vue",
+          packageName: 'vue',
           versions: {
-            "3.5.0": mockVersion,
-            "3.4.0": { ...mockVersion, version: "3.4.0" },
+            '3.5.0': mockVersion,
+            '3.4.0': { ...mockVersion, version: '3.4.0' },
           },
           distTags: {
-            latest: "3.5.0",
-            next: "3.4.0",
+            latest: '3.5.0',
+            next: '3.4.0',
           },
           time: {
-            "3.5.0": "2024-01-15T00:00:00.000Z",
-            "3.4.0": "2024-01-01T00:00:00.000Z",
+            '3.5.0': '2024-01-15T00:00:00.000Z',
+            '3.4.0': '2024-01-01T00:00:00.000Z',
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageListControls", () => {
-    it("should have no accessibility violations", async () => {
+  describe('PackageListControls', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageListControls, {
         props: {
-          filter: "",
-          sort: "downloads",
+          filter: '',
+          sort: 'downloads',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with filter active", async () => {
+    it('should have no accessibility violations with filter active', async () => {
       const component = await mountSuspended(PackageListControls, {
         props: {
-          filter: "vue",
-          sort: "downloads",
+          filter: 'vue',
+          sort: 'downloads',
           totalCount: 100,
           filteredCount: 10,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageMaintainers", () => {
-    it("should have no accessibility violations without maintainers", async () => {
+  describe('PackageMaintainers', () => {
+    it('should have no accessibility violations without maintainers', async () => {
       const component = await mountSuspended(PackageMaintainers, {
-        props: { packageName: "vue" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { packageName: 'vue' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with maintainers", async () => {
+    it('should have no accessibility violations with maintainers', async () => {
       const component = await mountSuspended(PackageMaintainers, {
         props: {
-          packageName: "vue",
+          packageName: 'vue',
           maintainers: [
-            { name: "yyx990803", email: "evan@vuejs.org" },
-            { name: "posva", email: "posva@example.com" },
+            { name: 'yyx990803', email: 'evan@vuejs.org' },
+            { name: 'posva', email: 'posva@example.com' },
           ],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageCompatibility", () => {
-    it("should have no accessibility violations without engines", async () => {
+  describe('PackageCompatibility', () => {
+    it('should have no accessibility violations without engines', async () => {
       const component = await mountSuspended(PackageCompatibility, {
         props: {},
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with engines", async () => {
+    it('should have no accessibility violations with engines', async () => {
       const component = await mountSuspended(PackageCompatibility, {
         props: {
           engines: {
-            node: ">=14",
-            npm: ">=10",
+            node: '>=14',
+            npm: '>=10',
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageKeywords", () => {
-    it("should have no accessibility violations without keywords", async () => {
+  describe('PackageKeywords', () => {
+    it('should have no accessibility violations without keywords', async () => {
       const component = await mountSuspended(PackageKeywords, {
         props: {},
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with keywords", async () => {
+    it('should have no accessibility violations with keywords', async () => {
       const component = await mountSuspended(PackageKeywords, {
         props: {
-          keywords: ["keyword1", "keyword2"],
+          keywords: ['keyword1', 'keyword2'],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("CodeHeader", () => {
-    it("should have no accessibility violations", async () => {
+  describe('CodeHeader', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(CodeHeader, {
         props: {
-          filePath: "misc/true.js",
+          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;",
+            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",
+          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 () => {
+          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, {
         props: {
           html: '<pre><code><span class="line">const x = 1;</span></code></pre>',
           lines: 1,
           selectedLines: null,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with selected lines", async () => {
+    it('should have no accessibility violations with selected lines', async () => {
       const component = await mountSuspended(CodeViewer, {
         props: {
           html: '<pre><code><span class="line">const x = 1;</span><span class="line">const y = 2;</span></code></pre>',
           lines: 2,
           selectedLines: { start: 1, end: 1 },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("CodeDirectoryListing", () => {
+  describe('CodeDirectoryListing', () => {
     const mockTree = [
-      { name: "src", type: "directory" as const, path: "src", children: [] },
-      { name: "index.js", type: "file" as const, path: "index.js", size: 1024 },
+      { name: 'src', type: 'directory' as const, path: 'src', children: [] },
+      { name: 'index.js', type: 'file' as const, path: 'index.js', size: 1024 },
       {
-        name: "package.json",
-        type: "file" as const,
-        path: "package.json",
+        name: 'package.json',
+        type: 'file' as const,
+        path: 'package.json',
         size: 512,
       },
-    ];
+    ]
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(CodeDirectoryListing, {
         props: {
           tree: mockTree,
-          currentPath: "",
-          baseUrl: "/package-code/vue",
+          currentPath: '',
+          baseUrl: '/package-code/vue',
           baseRoute: {
-            params: { packageName: "vue", version: "3.0.0", filePath: "" },
+            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with nested path", async () => {
+    it('should have no accessibility violations with nested path', async () => {
       const component = await mountSuspended(CodeDirectoryListing, {
         props: {
           tree: mockTree,
-          currentPath: "src",
-          baseUrl: "/package-code/vue",
+          currentPath: 'src',
+          baseUrl: '/package-code/vue',
           baseRoute: {
-            params: { packageName: "vue", version: "3.0.0", filePath: "" },
+            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("CodeFileTree", () => {
+  describe('CodeFileTree', () => {
     const mockTree = [
       {
-        name: "src",
-        type: "directory" as const,
-        path: "src",
-        children: [
-          { name: "index.ts", type: "file" as const, path: "src/index.ts" },
-        ],
+        name: 'src',
+        type: 'directory' as const,
+        path: 'src',
+        children: [{ name: 'index.ts', type: 'file' as const, path: 'src/index.ts' }],
       },
-      { name: "package.json", type: "file" as const, path: "package.json" },
-    ];
+      { name: 'package.json', type: 'file' as const, path: 'package.json' },
+    ]
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(CodeFileTree, {
         props: {
           tree: mockTree,
-          currentPath: "",
-          baseUrl: "/package-code/vue",
+          currentPath: '',
+          baseUrl: '/package-code/vue',
           baseRoute: {
-            params: { packageName: "vue", version: "3.0.0", filePath: "" },
+            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with selected file", async () => {
+    it('should have no accessibility violations with selected file', async () => {
       const component = await mountSuspended(CodeFileTree, {
         props: {
           tree: mockTree,
-          currentPath: "src/index.ts",
-          baseUrl: "/package-code/vue",
+          currentPath: 'src/index.ts',
+          baseUrl: '/package-code/vue',
           baseRoute: {
-            params: { packageName: "vue", version: "3.0.0", filePath: "" },
+            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("HeaderConnectorModal", () => {
-    it("should have no accessibility violations when closed", async () => {
+  describe('HeaderConnectorModal', () => {
+    it('should have no accessibility violations when closed', async () => {
       const component = await mountSuspended(HeaderConnectorModal, {
         props: { open: false },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when open (disconnected)", async () => {
+    it('should have no accessibility violations when open (disconnected)', async () => {
       const component = await mountSuspended(HeaderConnectorModal, {
         props: { open: true },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("HeaderAccountMenu.server", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(HeaderAccountMenuServer);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("HeaderAccountMenu", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(HeaderAccountMenu);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("PackageClaimPackageModal", () => {
-    it("should have no accessibility violations when closed", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('HeaderAccountMenu.server', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(HeaderAccountMenuServer)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('HeaderAccountMenu', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(HeaderAccountMenu)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageClaimPackageModal', () => {
+    it('should have no accessibility violations when closed', async () => {
       const component = await mountSuspended(PackageClaimPackageModal, {
         props: {
-          packageName: "test-package",
+          packageName: 'test-package',
           packageScope: undefined,
           canPublishToScope: true,
           open: false,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when open", async () => {
+    it('should have no accessibility violations when open', async () => {
       const component = await mountSuspended(PackageClaimPackageModal, {
         props: {
-          packageName: "test-package",
+          packageName: 'test-package',
           packageScope: undefined,
           canPublishToScope: true,
           open: true,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageProvenanceSection", () => {
-    it("should have no accessibility violations with minimal details", async () => {
+  describe('PackageProvenanceSection', () => {
+    it('should have no accessibility violations with minimal details', async () => {
       const component = await mountSuspended(PackageProvenanceSection, {
         props: {
           details: {
-            provider: "github",
-            providerLabel: "GitHub Actions",
+            provider: 'github',
+            providerLabel: 'GitHub Actions',
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with full details", async () => {
+    it('should have no accessibility violations with full details', async () => {
       const component = await mountSuspended(PackageProvenanceSection, {
         props: {
           details: {
-            provider: "github",
-            providerLabel: "GitHub Actions",
-            buildSummaryUrl: "https://github.com/owner/repo/actions/runs/123",
-            sourceCommitUrl: "https://github.com/owner/repo/commit/abc123",
-            sourceCommitSha: "abc123def456",
-            buildFileUrl:
-              "https://github.com/owner/repo/blob/main/.github/workflows/release.yml",
-            buildFilePath: ".github/workflows/release.yml",
-            publicLedgerUrl: "https://search.sigstore.dev/example",
+            provider: 'github',
+            providerLabel: 'GitHub Actions',
+            buildSummaryUrl: 'https://github.com/owner/repo/actions/runs/123',
+            sourceCommitUrl: 'https://github.com/owner/repo/commit/abc123',
+            sourceCommitSha: 'abc123def456',
+            buildFileUrl: 'https://github.com/owner/repo/blob/main/.github/workflows/release.yml',
+            buildFilePath: '.github/workflows/release.yml',
+            publicLedgerUrl: 'https://search.sigstore.dev/example',
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("OrgOperationsQueue", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(OrgOperationsQueue);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("PackageList", () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('OrgOperationsQueue', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(OrgOperationsQueue)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageList', () => {
     const mockResults = [
       {
         package: {
-          name: "vue",
-          version: "3.5.0",
-          description: "The progressive JavaScript framework",
-          date: "2024-01-15T00:00:00.000Z",
-          keywords: ["framework"],
+          name: 'vue',
+          version: '3.5.0',
+          description: 'The progressive JavaScript framework',
+          date: '2024-01-15T00:00:00.000Z',
+          keywords: ['framework'],
           links: {},
-          publisher: { username: "yyx990803" },
+          publisher: { username: 'yyx990803' },
         },
         searchScore: 100000,
       },
       {
         package: {
-          name: "react",
-          version: "18.2.0",
-          description:
-            "React is a JavaScript library for building user interfaces.",
-          date: "2024-01-10T00:00:00.000Z",
-          keywords: ["react"],
+          name: 'react',
+          version: '18.2.0',
+          description: 'React is a JavaScript library for building user interfaces.',
+          date: '2024-01-10T00:00:00.000Z',
+          keywords: ['react'],
           links: {},
-          publisher: { username: "fb" },
+          publisher: { username: 'fb' },
         },
         searchScore: 90000,
       },
-    ];
+    ]
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageList, {
         props: { results: mockResults },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with empty results", async () => {
+    it('should have no accessibility violations with empty results', async () => {
       const component = await mountSuspended(PackageList, {
         props: { results: [] },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when loading", async () => {
+    it('should have no accessibility violations when loading', async () => {
       const component = await mountSuspended(PackageList, {
         props: {
           results: mockResults,
           isLoading: true,
           hasMore: true,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageMetricsBadges", () => {
-    it("should have no accessibility violations", async () => {
+  describe('PackageMetricsBadges', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageMetricsBadges, {
-        props: { packageName: "vue" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { packageName: 'vue' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with version", async () => {
+    it('should have no accessibility violations with version', async () => {
       const component = await mountSuspended(PackageMetricsBadges, {
         props: {
-          packageName: "vue",
-          version: "3.5.0",
+          packageName: 'vue',
+          version: '3.5.0',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageAccessControls", () => {
-    it("should have no accessibility violations", async () => {
+  describe('PackageAccessControls', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageAccessControls, {
-        props: { packageName: "@nuxt/kit" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { packageName: '@nuxt/kit' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for unscoped package", async () => {
+    it('should have no accessibility violations for unscoped package', async () => {
       // Unscoped packages don't show the access controls section
       const component = await mountSuspended(PackageAccessControls, {
-        props: { packageName: "vue" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("OrgMembersPanel", () => {
-    it("should have no accessibility violations", async () => {
+        props: { packageName: 'vue' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('OrgMembersPanel', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(OrgMembersPanel, {
-        props: { orgName: "nuxt" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("OrgTeamsPanel", () => {
-    it("should have no accessibility violations", async () => {
+        props: { orgName: 'nuxt' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('OrgTeamsPanel', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(OrgTeamsPanel, {
-        props: { orgName: "nuxt" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("CodeMobileTreeDrawer", () => {
+        props: { orgName: 'nuxt' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CodeMobileTreeDrawer', () => {
     const mockTree = [
       {
-        name: "src",
-        type: "directory" as const,
-        path: "src",
-        children: [
-          { name: "index.ts", type: "file" as const, path: "src/index.ts" },
-        ],
+        name: 'src',
+        type: 'directory' as const,
+        path: 'src',
+        children: [{ name: 'index.ts', type: 'file' as const, path: 'src/index.ts' }],
       },
-      { name: "package.json", type: "file" as const, path: "package.json" },
-    ];
+      { name: 'package.json', type: 'file' as const, path: 'package.json' },
+    ]
 
-    it("should have no accessibility violations when closed", async () => {
+    it('should have no accessibility violations when closed', async () => {
       const component = await mountSuspended(CodeMobileTreeDrawer, {
         props: {
           tree: mockTree,
-          currentPath: "",
-          baseUrl: "/package-code/vue",
+          currentPath: '',
+          baseUrl: '/package-code/vue',
           baseRoute: {
-            params: { packageName: "vue", version: "3.0.0", filePath: "" },
+            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("ColumnPicker", () => {
+  describe('ColumnPicker', () => {
     const mockColumns: ColumnConfig[] = [
-      { id: "name", visible: true, sortable: true },
-      { id: "version", visible: true, sortable: false },
-      { id: "downloads", visible: false, sortable: true },
-    ];
+      { id: 'name', visible: true, sortable: true },
+      { id: 'version', visible: true, sortable: false },
+      { id: 'downloads', visible: false, sortable: true },
+    ]
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(ColumnPicker, {
         props: { columns: mockColumns },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("FilterChips", () => {
-    it("should have no accessibility violations with chips", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('FilterChips', () => {
+    it('should have no accessibility violations with chips', async () => {
       const chips: FilterChip[] = [
-        { id: "text", type: "text", label: "Search", value: "react" },
-        { id: "keyword", type: "keywords", label: "Keyword", value: "hooks" },
-      ];
+        { id: 'text', type: 'text', label: 'Search', value: 'react' },
+        { id: 'keyword', type: 'keywords', label: 'Keyword', value: 'hooks' },
+      ]
       const component = await mountSuspended(FilterChips, {
         props: { chips },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with empty chips", async () => {
+    it('should have no accessibility violations with empty chips', async () => {
       const component = await mountSuspended(FilterChips, {
         props: { chips: [] },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("FilterPanel", () => {
+  describe('FilterPanel', () => {
     const defaultFilters = {
-      text: "",
-      searchScope: "name" as const,
-      downloadRange: "any" as const,
-      updatedWithin: "any" as const,
-      security: "all" as const,
+      text: '',
+      searchScope: 'name' as const,
+      downloadRange: 'any' as const,
+      updatedWithin: 'any' as const,
+      security: 'all' as const,
       keywords: [],
-    };
+    }
 
-    it("should have no accessibility violations (collapsed)", async () => {
+    it('should have no accessibility violations (collapsed)', async () => {
       const component = await mountSuspended(FilterPanel, {
         props: { filters: defaultFilters },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with active filters", async () => {
+    it('should have no accessibility violations with active filters', async () => {
       const component = await mountSuspended(FilterPanel, {
         props: {
           filters: {
             ...defaultFilters,
-            text: "react",
-            keywords: ["hooks"],
+            text: 'react',
+            keywords: ['hooks'],
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageListToolbar", () => {
+  describe('PackageListToolbar', () => {
     const defaultFilters = {
-      text: "",
-      searchScope: "name" as const,
-      downloadRange: "any" as const,
-      updatedWithin: "any" as const,
-      security: "all" as const,
+      text: '',
+      searchScope: 'name' as const,
+      downloadRange: 'any' as const,
+      updatedWithin: 'any' as const,
+      security: 'all' as const,
       keywords: [],
-    };
+    }
 
     const mockColumns: ColumnConfig[] = [
-      { id: "name", visible: true, sortable: true },
-      { id: "version", visible: true, sortable: false },
-    ];
+      { id: 'name', visible: true, sortable: true },
+      { id: 'version', visible: true, sortable: false },
+    ]
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageListToolbar, {
         props: {
           filters: defaultFilters,
-          sortOption: "downloads-week-desc",
-          viewMode: "cards",
+          sortOption: 'downloads-week-desc',
+          viewMode: 'cards',
           columns: mockColumns,
-          paginationMode: "infinite",
+          paginationMode: 'infinite',
           pageSize: 25,
           totalCount: 100,
           filteredCount: 100,
           activeFilters: [],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations in search context", async () => {
+    it('should have no accessibility violations in search context', async () => {
       const component = await mountSuspended(PackageListToolbar, {
         props: {
           filters: defaultFilters,
-          sortOption: "relevance-desc",
-          viewMode: "cards",
+          sortOption: 'relevance-desc',
+          viewMode: 'cards',
           columns: mockColumns,
-          paginationMode: "infinite",
+          paginationMode: 'infinite',
           pageSize: 25,
           totalCount: 100,
           filteredCount: 100,
           activeFilters: [],
           searchContext: true,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should total package count in paginated mode", async () => {
+    it('should total package count in paginated mode', async () => {
       const component = await mountSuspended(PackageListToolbar, {
         props: {
           filters: defaultFilters,
-          sortOption: "downloads-week-desc",
-          viewMode: "table",
+          sortOption: 'downloads-week-desc',
+          viewMode: 'table',
           columns: mockColumns,
-          paginationMode: "paginated",
+          paginationMode: 'paginated',
           pageSize: 25,
           totalCount: 9544,
           filteredCount: 9544,
           activeFilters: [],
         },
-      });
+      })
 
-      const html = component.html();
-      expect(html).toContain("25 of 9,544");
-    });
-  });
+      const html = component.html()
+      expect(html).toContain('25 of 9,544')
+    })
+  })
 
-  describe("PackageTable", () => {
+  describe('PackageTable', () => {
     const mockResults = [
       {
         package: {
-          name: "vue",
-          version: "3.5.0",
-          description: "The progressive JavaScript framework",
-          date: "2024-01-15T00:00:00.000Z",
-          keywords: ["framework"],
+          name: 'vue',
+          version: '3.5.0',
+          description: 'The progressive JavaScript framework',
+          date: '2024-01-15T00:00:00.000Z',
+          keywords: ['framework'],
           links: {},
-          publisher: { username: "yyx990803" },
+          publisher: { username: 'yyx990803' },
         },
         searchScore: 100000,
       },
-    ];
+    ]
 
     const mockColumns: ColumnConfig[] = [
-      { id: "name", visible: true, sortable: true },
-      { id: "version", visible: true, sortable: false },
-      { id: "description", visible: true, sortable: false },
-      { id: "downloads", visible: true, sortable: true },
-    ];
+      { id: 'name', visible: true, sortable: true },
+      { id: 'version', visible: true, sortable: false },
+      { id: 'description', visible: true, sortable: false },
+      { id: 'downloads', visible: true, sortable: true },
+    ]
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageTable, {
         props: {
           results: mockResults,
           columns: mockColumns,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with empty results", async () => {
+    it('should have no accessibility violations with empty results', async () => {
       const component = await mountSuspended(PackageTable, {
         props: {
           results: [],
           columns: mockColumns,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when loading", async () => {
+    it('should have no accessibility violations when loading', async () => {
       const component = await mountSuspended(PackageTable, {
         props: {
           results: [],
           columns: mockColumns,
           isLoading: true,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageTableRow", () => {
+  describe('PackageTableRow', () => {
     const mockResult = {
       package: {
-        name: "lodash",
-        version: "4.17.21",
-        description: "A modern JavaScript utility library",
-        date: "2024-01-01T00:00:00.000Z",
-        keywords: ["utility", "modules"],
+        name: 'lodash',
+        version: '4.17.21',
+        description: 'A modern JavaScript utility library',
+        date: '2024-01-01T00:00:00.000Z',
+        keywords: ['utility', 'modules'],
         links: {},
-        publisher: { username: "jdalton" },
-        maintainers: [{ username: "jdalton", email: "test@test.com" }],
+        publisher: { username: 'jdalton' },
+        maintainers: [{ username: 'jdalton', email: 'test@test.com' }],
       },
       downloads: { weekly: 50000000 },
-      updated: "2024-01-01T00:00:00.000Z",
+      updated: '2024-01-01T00:00:00.000Z',
       searchScore: 99999,
-    };
+    }
 
     const mockColumns: ColumnConfig[] = [
-      { id: "name", visible: true, sortable: true },
-      { id: "version", visible: true, sortable: false },
-      { id: "description", visible: true, sortable: false },
-    ];
+      { id: 'name', visible: true, sortable: true },
+      { id: 'version', visible: true, sortable: false },
+      { id: 'description', visible: true, sortable: false },
+    ]
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       // PackageTableRow needs to be wrapped in a table structure
       const component = await mountSuspended(PackageTableRow, {
         props: {
@@ -2181,142 +2149,136 @@ describe("component accessibility audits", () => {
           },
         },
         attachTo: (() => {
-          const table = document.createElement("table");
-          const tbody = document.createElement("tbody");
-          table.appendChild(tbody);
-          document.body.appendChild(table);
-          return tbody;
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
         })(),
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("PaginationControls", () => {
-    it("should have no accessibility violations in infinite mode", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PaginationControls', () => {
+    it('should have no accessibility violations in infinite mode', async () => {
       const component = await mountSuspended(PaginationControls, {
         props: {
-          mode: "infinite",
+          mode: 'infinite',
           pageSize: 25,
           currentPage: 1,
           totalItems: 100,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations in paginated mode", async () => {
+    it('should have no accessibility violations in paginated mode', async () => {
       const component = await mountSuspended(PaginationControls, {
         props: {
-          mode: "paginated",
+          mode: 'paginated',
           pageSize: 25,
           currentPage: 1,
           totalItems: 100,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with multiple pages", async () => {
+    it('should have no accessibility violations with multiple pages', async () => {
       const component = await mountSuspended(PaginationControls, {
         props: {
-          mode: "paginated",
+          mode: 'paginated',
           pageSize: 10,
           currentPage: 5,
           totalItems: 200,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("ViewModeToggle", () => {
-    it("should have no accessibility violations in cards mode", async () => {
+  describe('ViewModeToggle', () => {
+    it('should have no accessibility violations in cards mode', async () => {
       const component = await mountSuspended(ViewModeToggle, {
-        props: { modelValue: "cards" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { modelValue: 'cards' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations in table mode", async () => {
+    it('should have no accessibility violations in table mode', async () => {
       const component = await mountSuspended(ViewModeToggle, {
-        props: { modelValue: "table" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("PackageVulnerabilityTree", () => {
-    it("should have no accessibility violations in idle state", async () => {
+        props: { modelValue: 'table' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageVulnerabilityTree', () => {
+    it('should have no accessibility violations in idle state', async () => {
       const component = await mountSuspended(PackageVulnerabilityTree, {
         props: {
-          packageName: "vue",
-          version: "3.5.0",
+          packageName: 'vue',
+          version: '3.5.0',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageDeprecatedTree", () => {
-    it("should have no accessibility violations in idle state", async () => {
+  describe('PackageDeprecatedTree', () => {
+    it('should have no accessibility violations in idle state', async () => {
       const component = await mountSuspended(PackageDeprecatedTree, {
         props: {
-          packageName: "vue",
-          version: "3.5.0",
+          packageName: 'vue',
+          version: '3.5.0',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("DependencyPathPopup", () => {
-    it("should have no accessibility violations with short path", async () => {
+  describe('DependencyPathPopup', () => {
+    it('should have no accessibility violations with short path', async () => {
       const component = await mountSuspended(DependencyPathPopup, {
         props: {
-          path: ["root@1.0.0", "vuln-dep@2.0.0"],
+          path: ['root@1.0.0', 'vuln-dep@2.0.0'],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with deep path", async () => {
+    it('should have no accessibility violations with deep path', async () => {
       const component = await mountSuspended(DependencyPathPopup, {
         props: {
-          path: [
-            "root@1.0.0",
-            "dep-a@1.0.0",
-            "dep-b@2.0.0",
-            "dep-c@3.0.0",
-            "vulnerable-pkg@4.0.0",
-          ],
+          path: ['root@1.0.0', 'dep-a@1.0.0', 'dep-b@2.0.0', 'dep-c@3.0.0', 'vulnerable-pkg@4.0.0'],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
   // Compare feature components
-  describe("CompareFacetSelector", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(CompareFacetSelector);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("CompareLineChart", () => {
-    it("should have no accessibility violations with no packages", async () => {
+  describe('CompareFacetSelector', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(CompareFacetSelector)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CompareLineChart', () => {
+    it('should have no accessibility violations with no packages', async () => {
       const component = await mountSuspended(CompareLineChart, {
         props: { packages: [] },
         global: {
@@ -2326,14 +2288,14 @@ describe("component accessibility audits", () => {
             },
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with packages selected", async () => {
+    it('should have no accessibility violations with packages selected', async () => {
       const component = await mountSuspended(CompareLineChart, {
-        props: { packages: ["vue", "react"] },
+        props: { packages: ['vue', 'react'] },
         global: {
           stubs: {
             TrendsChart: {
@@ -2341,526 +2303,524 @@ describe("component accessibility audits", () => {
             },
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("ComparePackageSelector", () => {
-    it("should have no accessibility violations with no packages", async () => {
+  describe('ComparePackageSelector', () => {
+    it('should have no accessibility violations with no packages', async () => {
       const component = await mountSuspended(ComparePackageSelector, {
         props: { modelValue: [] },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with packages selected", async () => {
+    it('should have no accessibility violations with packages selected', async () => {
       const component = await mountSuspended(ComparePackageSelector, {
-        props: { modelValue: ["vue", "react"] },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { modelValue: ['vue', 'react'] },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations at max packages", async () => {
+    it('should have no accessibility violations at max packages', async () => {
       const component = await mountSuspended(ComparePackageSelector, {
-        props: { modelValue: ["vue", "react", "angular", "svelte"], max: 4 },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("CompareFacetRow", () => {
-    it("should have no accessibility violations with basic values", async () => {
+        props: { modelValue: ['vue', 'react', 'angular', 'svelte'], max: 4 },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CompareFacetRow', () => {
+    it('should have no accessibility violations with basic values', async () => {
       const component = await mountSuspended(CompareFacetRow, {
         props: {
-          label: "Downloads",
-          description: "Weekly download count",
+          label: 'Downloads',
+          description: 'Weekly download count',
           values: [
-            { raw: 1000, display: "1,000" },
-            { raw: 2000, display: "2,000" },
+            { raw: 1000, display: '1,000' },
+            { raw: 2000, display: '2,000' },
           ],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when loading", async () => {
+    it('should have no accessibility violations when loading', async () => {
       const component = await mountSuspended(CompareFacetRow, {
         props: {
-          label: "Install Size",
-          description: "Total install size",
+          label: 'Install Size',
+          description: 'Total install size',
           values: [null, null],
           loading: true,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("CompareComparisonGrid", () => {
-    it("should have no accessibility violations with 2 columns", async () => {
+  describe('CompareComparisonGrid', () => {
+    it('should have no accessibility violations with 2 columns', async () => {
       const component = await mountSuspended(CompareComparisonGrid, {
         props: {
-          columns: [{ name: "vue" }, { name: "react" }],
+          columns: [{ name: 'vue' }, { name: 'react' }],
         },
         slots: {
-          default: "<div>Grid content</div>",
+          default: '<div>Grid content</div>',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with 3 columns", async () => {
+    it('should have no accessibility violations with 3 columns', async () => {
       const component = await mountSuspended(CompareComparisonGrid, {
         props: {
-          columns: [{ name: "vue" }, { name: "react" }, { name: "angular" }],
+          columns: [{ name: 'vue' }, { name: 'react' }, { name: 'angular' }],
         },
         slots: {
-          default: "<div>Grid content</div>",
+          default: '<div>Grid content</div>',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with no-dependency column", async () => {
+    it('should have no accessibility violations with no-dependency column', async () => {
       const component = await mountSuspended(CompareComparisonGrid, {
         props: {
-          columns: [{ name: "vue" }, { name: "react" }],
+          columns: [{ name: 'vue' }, { name: 'react' }],
           showNoDependency: true,
         },
         slots: {
-          default: "<div>Grid content</div>",
+          default: '<div>Grid content</div>',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("CompareReplacementSuggestion", () => {
-    it("should have no accessibility violations for nodep variant with native replacement", async () => {
+  describe('CompareReplacementSuggestion', () => {
+    it('should have no accessibility violations for nodep variant with native replacement', async () => {
       const component = await mountSuspended(CompareReplacementSuggestion, {
         props: {
-          packageName: "array-includes",
+          packageName: 'array-includes',
           mapping: {
-            type: "module",
-            moduleName: "array-includes",
-            replacements: ["Array.prototype.includes"],
+            type: 'module',
+            moduleName: 'array-includes',
+            replacements: ['Array.prototype.includes'],
           },
           replacement: {
-            id: "Array.prototype.includes",
-            type: "native",
+            id: 'Array.prototype.includes',
+            type: 'native',
             url: {
-              type: "mdn",
-              id: "Web/JavaScript/Reference/Global_Objects/Array/includes",
+              type: 'mdn',
+              id: 'Web/JavaScript/Reference/Global_Objects/Array/includes',
             },
             webFeatureId: {
-              featureId: "array-includes",
-              compatKey: "javascript.builtins.Array.includes",
+              featureId: 'array-includes',
+              compatKey: 'javascript.builtins.Array.includes',
             },
             engines: [
-              { engine: "chrome", minVersion: "47" },
-              { engine: "edge", minVersion: "14" },
-              { engine: "firefox", minVersion: "43" },
-              { engine: "safari", minVersion: "9" },
-              { engine: "nodejs", minVersion: "6.0.0" },
+              { engine: 'chrome', minVersion: '47' },
+              { engine: 'edge', minVersion: '14' },
+              { engine: 'firefox', minVersion: '43' },
+              { engine: 'safari', minVersion: '9' },
+              { engine: 'nodejs', minVersion: '6.0.0' },
             ],
           },
-          variant: "nodep",
+          variant: 'nodep',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for nodep variant with simple replacement", async () => {
+    it('should have no accessibility violations for nodep variant with simple replacement', async () => {
       const component = await mountSuspended(CompareReplacementSuggestion, {
         props: {
-          packageName: "is-even",
+          packageName: 'is-even',
           mapping: {
-            type: "module",
-            moduleName: "is-even",
-            replacements: ["snippet::is-even"],
+            type: 'module',
+            moduleName: 'is-even',
+            replacements: ['snippet::is-even'],
           },
           replacement: {
-            id: "snippet::is-even",
-            type: "simple",
-            description:
-              "You can use the modulo operator to check if a number is even.",
-            example: "(n % 2) === 0",
+            id: 'snippet::is-even',
+            type: 'simple',
+            description: 'You can use the modulo operator to check if a number is even.',
+            example: '(n % 2) === 0',
           },
-          variant: "nodep",
+          variant: 'nodep',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for info variant with documented replacement", async () => {
+    it('should have no accessibility violations for info variant with documented replacement', async () => {
       const component = await mountSuspended(CompareReplacementSuggestion, {
         props: {
-          packageName: "moment",
+          packageName: 'moment',
           mapping: {
-            type: "module",
-            moduleName: "moment",
-            replacements: ["day.js", "date-fns", "luxon", "Date"],
-            url: { type: "e18e", id: "moment" },
+            type: 'module',
+            moduleName: 'moment',
+            replacements: ['day.js', 'date-fns', 'luxon', 'Date'],
+            url: { type: 'e18e', id: 'moment' },
           },
           replacement: {
-            id: "day.js",
-            type: "documented",
-            url: { type: "e18e", id: "moment" },
-            replacementModule: "day.js",
+            id: 'day.js',
+            type: 'documented',
+            url: { type: 'e18e', id: 'moment' },
+            replacementModule: 'day.js',
           },
-          variant: "info",
-        },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("PackageManagerSelect", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(PackageManagerSelect);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("CompareFacetCard", () => {
-    it("should have no accessibility violations with numeric values", async () => {
+          variant: 'info',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageManagerSelect', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageManagerSelect)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CompareFacetCard', () => {
+    it('should have no accessibility violations with numeric values', async () => {
       const component = await mountSuspended(CompareFacetCard, {
         props: {
-          label: "Downloads",
-          description: "Weekly download count",
+          label: 'Downloads',
+          description: 'Weekly download count',
           values: [
-            { raw: 1000, display: "1,000" },
-            { raw: 2000, display: "2,000" },
+            { raw: 1000, display: '1,000' },
+            { raw: 2000, display: '2,000' },
           ],
-          headers: ["vue", "react"],
+          headers: ['vue', 'react'],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when loading", async () => {
+    it('should have no accessibility violations when loading', async () => {
       const component = await mountSuspended(CompareFacetCard, {
         props: {
-          label: "Install Size",
+          label: 'Install Size',
           values: [null, null],
-          headers: ["vue", "react"],
+          headers: ['vue', 'react'],
           facetLoading: true,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("SettingsAccentColorPicker", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(SettingsAccentColorPicker);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("SettingsBgThemePicker", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(SettingsBgThemePicker);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("TooltipBase", () => {
-    it("should have no accessibility violations when hidden", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('SettingsAccentColorPicker', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(SettingsAccentColorPicker)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('SettingsBgThemePicker', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(SettingsBgThemePicker)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('TooltipBase', () => {
+    it('should have no accessibility violations when hidden', async () => {
       const component = await mountSuspended(TooltipBase, {
-        props: { text: "Tooltip text", isVisible: false },
-        slots: { default: "<button>Trigger</button>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations when visible", async () => {
+        props: { text: 'Tooltip text', isVisible: false },
+        slots: { default: '<button>Trigger</button>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when visible', async () => {
       const component = await mountSuspended(TooltipBase, {
-        props: { text: "Tooltip text", isVisible: true },
-        slots: { default: "<button>Trigger</button>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("BuildEnvironment", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(BuildEnvironment);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations in footer mode", async () => {
+        props: { text: 'Tooltip text', isVisible: true },
+        slots: { default: '<button>Trigger</button>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('BuildEnvironment', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(BuildEnvironment)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations in footer mode', async () => {
       const component = await mountSuspended(BuildEnvironment, {
         props: { footer: true },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("CallToAction", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(CallToAction);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("CopyToClipboardButton", () => {
-    it("should have no accessibility violations in default state", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CallToAction', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(CallToAction)
+      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, {
         props: { copied: false },
-        slots: { default: "<code>npm install vue</code>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        slots: { default: '<code>npm install vue</code>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations in copied state", async () => {
+    it('should have no accessibility violations in copied state', async () => {
       const component = await mountSuspended(CopyToClipboardButton, {
         props: { copied: true },
-        slots: { default: "<code>npm install vue</code>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("CollapsibleSection", () => {
-    it("should have no accessibility violations", async () => {
+        slots: { default: '<code>npm install vue</code>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CollapsibleSection', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(CollapsibleSection, {
-        props: { title: "Section Title", id: "test-section" },
-        slots: { default: "<p>Section content</p>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations with custom heading level", async () => {
+        props: { title: 'Section Title', id: 'test-section' },
+        slots: { default: '<p>Section content</p>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with custom heading level', async () => {
       const component = await mountSuspended(CollapsibleSection, {
         props: {
-          title: "Section Title",
-          id: "test-section",
-          headingLevel: "h3",
+          title: 'Section Title',
+          id: 'test-section',
+          headingLevel: 'h3',
         },
-        slots: { default: "<p>Section content</p>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        slots: { default: '<p>Section content</p>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when loading", async () => {
+    it('should have no accessibility violations when loading', async () => {
       const component = await mountSuspended(CollapsibleSection, {
-        props: { title: "Section Title", id: "test-section", isLoading: true },
-        slots: { default: "<p>Loading content...</p>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("TerminalExecute", () => {
-    it("should have no accessibility violations", async () => {
+        props: { title: 'Section Title', id: 'test-section', isLoading: true },
+        slots: { default: '<p>Loading content...</p>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('TerminalExecute', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TerminalExecute, {
-        props: { packageName: "create-vite" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { packageName: 'create-vite' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for create package", async () => {
+    it('should have no accessibility violations for create package', async () => {
       const component = await mountSuspended(TerminalExecute, {
-        props: { packageName: "create-vite", isCreatePackage: true },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("TerminalInstall", () => {
-    it("should have no accessibility violations", async () => {
+        props: { packageName: 'create-vite', isCreatePackage: true },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('TerminalInstall', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TerminalInstall, {
-        props: { packageName: "vue" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { packageName: 'vue' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with version", async () => {
+    it('should have no accessibility violations with version', async () => {
       const component = await mountSuspended(TerminalInstall, {
-        props: { packageName: "vue", requestedVersion: "3.5.0" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { packageName: 'vue', requestedVersion: '3.5.0' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with types package", async () => {
+    it('should have no accessibility violations with types package', async () => {
       const component = await mountSuspended(TerminalInstall, {
-        props: { packageName: "lodash", typesPackageName: "@types/lodash" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { packageName: 'lodash', typesPackageName: '@types/lodash' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with executable info", async () => {
+    it('should have no accessibility violations with executable info', async () => {
       const component = await mountSuspended(TerminalInstall, {
         props: {
-          packageName: "eslint",
-          executableInfo: { hasExecutable: true, primaryCommand: "eslint" },
+          packageName: 'eslint',
+          executableInfo: { hasExecutable: true, primaryCommand: 'eslint' },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("LicenseDisplay", () => {
-    it("should have no accessibility violations with simple license", async () => {
+  describe('LicenseDisplay', () => {
+    it('should have no accessibility violations with simple license', async () => {
       const component = await mountSuspended(LicenseDisplay, {
-        props: { license: "MIT" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { license: 'MIT' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with compound license", async () => {
+    it('should have no accessibility violations with compound license', async () => {
       const component = await mountSuspended(LicenseDisplay, {
-        props: { license: "MIT OR Apache-2.0" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("PackageInstallScripts", () => {
-    it("should have no accessibility violations", async () => {
+        props: { license: 'MIT OR Apache-2.0' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageInstallScripts', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageInstallScripts, {
         props: {
-          packageName: "esbuild",
-          version: "0.25.0",
+          packageName: 'esbuild',
+          version: '0.25.0',
           installScripts: {
-            scripts: ["postinstall"],
-            content: { postinstall: "node install.js" },
+            scripts: ['postinstall'],
+            content: { postinstall: 'node install.js' },
             npxDependencies: {},
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with npx dependencies", async () => {
+    it('should have no accessibility violations with npx dependencies', async () => {
       const component = await mountSuspended(PackageInstallScripts, {
         props: {
-          packageName: "husky",
-          version: "9.1.0",
+          packageName: 'husky',
+          version: '9.1.0',
           installScripts: {
-            scripts: ["postinstall"],
-            content: { postinstall: "husky install" },
-            npxDependencies: { husky: "^9.0.0" },
+            scripts: ['postinstall'],
+            content: { postinstall: 'husky install' },
+            npxDependencies: { husky: '^9.0.0' },
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("AuthorAvatar", () => {
-    it("should have no accessibility violations with fallback text", async () => {
+  describe('AuthorAvatar', () => {
+    it('should have no accessibility violations with fallback text', async () => {
       const component = await mountSuspended(AuthorAvatar, {
         props: {
           author: {
-            name: "Daniel Roe",
-            blueskyHandle: "danielroe.dev",
+            name: 'Daniel Roe',
+            blueskyHandle: 'danielroe.dev',
             avatar: null,
-            profileUrl: "https://bsky.app/profile/danielroe.dev",
+            profileUrl: 'https://bsky.app/profile/danielroe.dev',
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("AuthorList", () => {
-    it("should have no accessibility violations", async () => {
+  describe('AuthorList', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(AuthorList, {
         props: {
           authors: [
             {
-              name: "Daniel Roe",
-              blueskyHandle: "danielroe.dev",
+              name: 'Daniel Roe',
+              blueskyHandle: 'danielroe.dev',
               avatar: null,
-              profileUrl: "https://bsky.app/profile/danielroe.dev",
+              profileUrl: 'https://bsky.app/profile/danielroe.dev',
             },
-            { name: "Salma Alam-Naylor", avatar: null, profileUrl: null },
+            { name: 'Salma Alam-Naylor', avatar: null, profileUrl: null },
           ],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("BlogPostWrapper", () => {
-    it("should have no accessibility violations", async () => {
+  describe('BlogPostWrapper', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(BlogPostWrapper, {
         props: {
           frontmatter: {
-            authors: [{ name: "Daniel Roe", blueskyHandle: "danielroe.dev" }],
-            title: "Building Accessible Vue Components",
-            date: "2024-06-15",
-            description:
-              "A guide to building accessible components in Vue.js applications.",
-            path: "/blog/building-accessible-vue-components",
-            slug: "building-accessible-vue-components",
+            authors: [{ name: 'Daniel Roe', blueskyHandle: 'danielroe.dev' }],
+            title: 'Building Accessible Vue Components',
+            date: '2024-06-15',
+            description: 'A guide to building accessible components in Vue.js applications.',
+            path: '/blog/building-accessible-vue-components',
+            slug: 'building-accessible-vue-components',
           },
         },
-        slots: { default: "<p>Blog post content here.</p>" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+        slots: { default: '<p>Blog post content here.</p>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("BlueskyComment", () => {
-    it("should have no accessibility violations", async () => {
+  describe('BlueskyComment', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(BlueskyComment, {
         props: {
           comment: {
-            uri: "at://did:plc:2gkh62xvzokhlf6li4ol3b3d/app.bsky.feed.post/3mcg7k75fdc2k",
-            cid: "bafyreigincphooxt7zox3blbocf6hnczzv36fkuj2zi5iuzpjgq6gk6pju",
+            uri: 'at://did:plc:2gkh62xvzokhlf6li4ol3b3d/app.bsky.feed.post/3mcg7k75fdc2k',
+            cid: 'bafyreigincphooxt7zox3blbocf6hnczzv36fkuj2zi5iuzpjgq6gk6pju',
             author: {
-              did: "did:plc:2gkh62xvzokhlf6li4ol3b3d",
-              handle: "patak.cat",
-              displayName: "patak",
+              did: 'did:plc:2gkh62xvzokhlf6li4ol3b3d',
+              handle: 'patak.cat',
+              displayName: 'patak',
               avatar:
-                "https://cdn.bsky.app/img/avatar/plain/did:plc:2gkh62xvzokhlf6li4ol3b3d/bafkreifgzl4e5jqlakd77ajvnilsb5tufsv24h2sxfwmitkzxrh3sk6mhq@jpeg",
+                'https://cdn.bsky.app/img/avatar/plain/did:plc:2gkh62xvzokhlf6li4ol3b3d/bafkreifgzl4e5jqlakd77ajvnilsb5tufsv24h2sxfwmitkzxrh3sk6mhq@jpeg',
             },
-            text: "our kids will need these new stories, thanks for writing this Daniel",
-            createdAt: "2026-01-14T23:22:05.257Z",
+            text: 'our kids will need these new stories, thanks for writing this Daniel',
+            createdAt: '2026-01-14T23:22:05.257Z',
             likeCount: 13,
             replyCount: 0,
             repostCount: 0,
@@ -2868,985 +2828,980 @@ describe("component accessibility audits", () => {
           },
           depth: 0,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("BlueskyComments", () => {
-    it("should have no accessibility violations", async () => {
+  describe('BlueskyComments', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(BlueskyComments, {
         props: {
-          postUri:
-            "at://did:plc:jbeaa5kdaladzwq3r7f5xgwe/app.bsky.feed.post/3mcg6svsgsm2k",
+          postUri: 'at://did:plc:jbeaa5kdaladzwq3r7f5xgwe/app.bsky.feed.post/3mcg6svsgsm2k',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("BlogPostListCard", () => {
-    it("should have no accessibility violations", async () => {
+  describe('BlogPostListCard', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(BlogPostListCard, {
         props: {
           authors: [
             {
-              name: "Daniel Roe",
-              blueskyHandle: "danielroe.dev",
+              name: 'Daniel Roe',
+              blueskyHandle: 'danielroe.dev',
               avatar: null,
-              profileUrl: "https://bsky.app/profile/danielroe.dev",
+              profileUrl: 'https://bsky.app/profile/danielroe.dev',
             },
           ],
-          title: "Building Accessible Vue Components",
-          topics: ["accessibility", "vue"],
-          excerpt:
-            "A guide to building accessible components in Vue.js applications.",
-          published: "2024-06-15",
-          path: "alpha-release",
+          title: 'Building Accessible Vue Components',
+          topics: ['accessibility', 'vue'],
+          excerpt: 'A guide to building accessible components in Vue.js applications.',
+          published: '2024-06-15',
+          path: 'alpha-release',
           index: 0,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("BlogPostFederatedArticles", () => {
-    it("should have no accessibility violations", async () => {
+  describe('BlogPostFederatedArticles', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(BlogPostFederatedArticles, {
         props: {
-          headline: "Read more on Bluesky",
+          headline: 'Read more on Bluesky',
           articles: [
             {
-              url: "https://example.com/post-1",
-              title: "Federated Testing Patterns",
-              description:
-                "How to keep accessibility checks simple and maintainable.",
-              authorHandle: "danielroe.dev",
+              url: 'https://example.com/post-1',
+              title: 'Federated Testing Patterns',
+              description: 'How to keep accessibility checks simple and maintainable.',
+              authorHandle: 'danielroe.dev',
             },
             {
-              url: "https://example.com/post-2",
-              title: "Composable Data in Vue",
-              description:
-                "Practical patterns for data composition in Vue components.",
-              authorHandle: "salma.dev",
+              url: 'https://example.com/post-2',
+              title: 'Composable Data in Vue',
+              description: 'Practical patterns for data composition in Vue components.',
+              authorHandle: 'salma.dev',
             },
           ],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageReplacement", () => {
-    it("should have no accessibility violations for native replacement", async () => {
+  describe('PackageReplacement', () => {
+    it('should have no accessibility violations for native replacement', async () => {
       const component = await mountSuspended(PackageReplacement, {
         props: {
           mapping: {
-            type: "module",
-            moduleName: "array-every",
-            replacements: ["Array.prototype.every"],
+            type: 'module',
+            moduleName: 'array-every',
+            replacements: ['Array.prototype.every'],
           },
           replacement: {
-            id: "Array.prototype.every",
-            type: "native",
+            id: 'Array.prototype.every',
+            type: 'native',
             url: {
-              type: "mdn",
-              id: "Web/JavaScript/Reference/Global_Objects/Array/every",
+              type: 'mdn',
+              id: 'Web/JavaScript/Reference/Global_Objects/Array/every',
             },
             engines: [
-              { engine: "nodejs", minVersion: "0.10.0" },
-              { engine: "chrome", minVersion: "1" },
+              { engine: 'nodejs', minVersion: '0.10.0' },
+              { engine: 'chrome', minVersion: '1' },
             ],
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for simple replacement", async () => {
+    it('should have no accessibility violations for simple replacement', async () => {
       const component = await mountSuspended(PackageReplacement, {
         props: {
           mapping: {
-            type: "module",
-            moduleName: "is-even",
-            replacements: ["snippet::is-even"],
+            type: 'module',
+            moduleName: 'is-even',
+            replacements: ['snippet::is-even'],
           },
           replacement: {
-            id: "snippet::is-even",
-            type: "simple",
-            description:
-              "You can use the modulo operator to check if a number is even.",
-            example: "(n % 2) === 0",
+            id: 'snippet::is-even',
+            type: 'simple',
+            description: 'You can use the modulo operator to check if a number is even.',
+            example: '(n % 2) === 0',
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageSidebar", () => {
-    it("should have no accessibility violations with slot content", async () => {
+  describe('PackageSidebar', () => {
+    it('should have no accessibility violations with slot content', async () => {
       const component = await mountSuspended(PackageSidebar, {
         slots: {
-          default: () => h("div", "Sidebar content"),
+          default: () => h('div', 'Sidebar content'),
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageSkillsCard", () => {
-    it("should have no accessibility violations with skills", async () => {
+  describe('PackageSkillsCard', () => {
+    it('should have no accessibility violations with skills', async () => {
       const component = await mountSuspended(PackageSkillsCard, {
         props: {
-          packageName: "vue",
+          packageName: 'vue',
           skills: [
             {
-              name: "Vue Components",
-              description: "Create Vue components",
-              dirName: "vue-components",
+              name: 'Vue Components',
+              description: 'Create Vue components',
+              dirName: 'vue-components',
             },
           ],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should render nothing when no skills", async () => {
+    it('should render nothing when no skills', async () => {
       const component = await mountSuspended(PackageSkillsCard, {
         props: {
-          packageName: "vue",
+          packageName: 'vue',
           skills: [],
         },
-      });
+      })
       // Empty skills array means the component renders nothing
-      expect(component.html()).toBe("<!--v-if-->");
-    });
-  });
+      expect(component.html()).toBe('<!--v-if-->')
+    })
+  })
 
-  describe("Readme", () => {
-    it("should have no accessibility violations with slot content", async () => {
+  describe('Readme', () => {
+    it('should have no accessibility violations with slot content', async () => {
       const component = await mountSuspended(Readme, {
         props: {
-          html: "<h3>README</h3><p>Some content</p>",
+          html: '<h3>README</h3><p>Some content</p>',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("ReadmeTocDropdown", () => {
+  describe('ReadmeTocDropdown', () => {
     const mockToc = [
-      { text: "Installation", id: "installation", depth: 2 },
-      { text: "Usage", id: "usage", depth: 2 },
-      { text: "Basic Usage", id: "basic-usage", depth: 3 },
-      { text: "Advanced Usage", id: "advanced-usage", depth: 3 },
-      { text: "API", id: "api", depth: 2 },
-    ];
-
-    it("should have no accessibility violations", async () => {
+      { text: 'Installation', id: 'installation', depth: 2 },
+      { text: 'Usage', id: 'usage', depth: 2 },
+      { text: 'Basic Usage', id: 'basic-usage', depth: 3 },
+      { text: 'Advanced Usage', id: 'advanced-usage', depth: 3 },
+      { text: 'API', id: 'api', depth: 2 },
+    ]
+
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(ReadmeTocDropdown, {
         props: { toc: mockToc },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with active item", async () => {
+    it('should have no accessibility violations with active item', async () => {
       const component = await mountSuspended(ReadmeTocDropdown, {
         props: {
           toc: mockToc,
-          activeId: "usage",
+          activeId: 'usage',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with nested active item", async () => {
+    it('should have no accessibility violations with nested active item', async () => {
       const component = await mountSuspended(ReadmeTocDropdown, {
         props: {
           toc: mockToc,
-          activeId: "basic-usage",
+          activeId: 'basic-usage',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with empty toc", async () => {
+    it('should have no accessibility violations with empty toc', async () => {
       const component = await mountSuspended(ReadmeTocDropdown, {
         props: { toc: [] },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("HeaderSearchBox", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(HeaderSearchBox);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("InputBase", () => {
-    it("should have no accessibility violations (with aria-label)", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('HeaderSearchBox', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(HeaderSearchBox)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('InputBase', () => {
+    it('should have no accessibility violations (with aria-label)', async () => {
       const component = await mountSuspended(InputBase, {
-        attrs: { "aria-label": "Search input" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        attrs: { 'aria-label': 'Search input' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with placeholder", async () => {
+    it('should have no accessibility violations with placeholder', async () => {
       const component = await mountSuspended(InputBase, {
-        attrs: { placeholder: "Search...", "aria-label": "Search" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        attrs: { 'placeholder': 'Search...', 'aria-label': 'Search' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when disabled", async () => {
+    it('should have no accessibility violations when disabled', async () => {
       const component = await mountSuspended(InputBase, {
-        attrs: { disabled: "", "aria-label": "Disabled input" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        attrs: { 'disabled': '', 'aria-label': 'Disabled input' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with size small", async () => {
+    it('should have no accessibility violations with size small', async () => {
       const component = await mountSuspended(InputBase, {
-        props: { size: "sm" },
-        attrs: { "aria-label": "Small input" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations with size large", async () => {
+        props: { size: 'sm' },
+        attrs: { 'aria-label': 'Small input' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with size large', async () => {
       const component = await mountSuspended(InputBase, {
-        props: { size: "lg" },
-        attrs: { "aria-label": "Large input" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations with noCorrect false", async () => {
+        props: { size: 'lg' },
+        attrs: { 'aria-label': 'Large input' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with noCorrect false', async () => {
       const component = await mountSuspended(InputBase, {
         props: { noCorrect: false },
-        attrs: { "aria-label": "Input with corrections" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("SelectBase", () => {
-    it("should have no accessibility violations with options and aria-label", async () => {
+        attrs: { 'aria-label': 'Input with corrections' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('SelectBase', () => {
+    it('should have no accessibility violations with options and aria-label', async () => {
       const component = await mountSuspended(SelectBase, {
-        attrs: { "aria-label": "Choose option" },
+        attrs: { 'aria-label': 'Choose option' },
         slots: {
           default:
             '<option value="option1">option 1</option><option value="option2">option 2</option>',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when disabled", async () => {
+    it('should have no accessibility violations when disabled', async () => {
       const component = await mountSuspended(SelectBase, {
         props: { disabled: true },
-        attrs: { "aria-label": "Disabled select" },
+        attrs: { 'aria-label': 'Disabled select' },
         slots: { default: '<option value="option1">option 1</option>' },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with size small", async () => {
+    it('should have no accessibility violations with size small', async () => {
       const component = await mountSuspended(SelectBase, {
-        props: { size: "sm" },
-        attrs: { "aria-label": "Small select" },
+        props: { size: 'sm' },
+        attrs: { 'aria-label': 'Small select' },
         slots: { default: '<option value="option1">option 1</option>' },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("SelectField", () => {
-    it("should have no accessibility violations with label and items", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('SelectField', () => {
+    it('should have no accessibility violations with label and items', async () => {
       const component = await mountSuspended(SelectField, {
         props: {
-          id: "a11y-select-1",
-          label: "Choose one",
+          id: 'a11y-select-1',
+          label: 'Choose one',
           items: [
-            { label: "Option 1", value: "option1" },
-            { label: "Option 2", value: "option2" },
+            { label: 'Option 1', value: 'option1' },
+            { label: 'Option 2', value: 'option2' },
           ],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with hiddenLabel", async () => {
+    it('should have no accessibility violations with hiddenLabel', async () => {
       const component = await mountSuspended(SelectField, {
         props: {
-          id: "a11y-select-2",
-          label: "Hidden",
+          id: 'a11y-select-2',
+          label: 'Hidden',
           hiddenLabel: true,
-          items: [{ label: "Option 1", value: "option1" }],
+          items: [{ label: 'Option 1', value: 'option1' }],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when disabled", async () => {
+    it('should have no accessibility violations when disabled', async () => {
       const component = await mountSuspended(SelectField, {
         props: {
-          id: "a11y-select-3",
-          selectAttrs: { "aria-label": "Disabled select" },
-          items: [{ label: "Option 1", value: "option1" }],
+          id: 'a11y-select-3',
+          selectAttrs: { 'aria-label': 'Disabled select' },
+          items: [{ label: 'Option 1', value: 'option1' }],
           disabled: true,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with size small", async () => {
+    it('should have no accessibility violations with size small', async () => {
       const component = await mountSuspended(SelectField, {
         props: {
-          id: "a11y-select-4",
-          selectAttrs: { "aria-label": "Disabled select" },
-          items: [{ label: "Option 1", value: "option1" }],
-          size: "sm",
-        },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("SearchSuggestionCard", () => {
-    it("should have no accessibility violations for user suggestion", async () => {
+          id: 'a11y-select-4',
+          selectAttrs: { 'aria-label': 'Disabled select' },
+          items: [{ label: 'Option 1', value: 'option1' }],
+          size: 'sm',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('SearchSuggestionCard', () => {
+    it('should have no accessibility violations for user suggestion', async () => {
       const component = await mountSuspended(SearchSuggestionCard, {
-        props: { type: "user", name: "testuser" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { type: 'user', name: 'testuser' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for org suggestion", async () => {
+    it('should have no accessibility violations for org suggestion', async () => {
       const component = await mountSuspended(SearchSuggestionCard, {
-        props: { type: "org", name: "testorg" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { type: 'org', name: 'testorg' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for exact match", async () => {
+    it('should have no accessibility violations for exact match', async () => {
       const component = await mountSuspended(SearchSuggestionCard, {
-        props: { type: "user", name: "exactuser", isExactMatch: true },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("InstantSearch", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(InstantSearch);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("SearchProviderToggle", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(SearchProviderToggle);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("SearchProviderToggle.server", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(SearchProviderToggleServer);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("Toggle.server", () => {
-    it("should have no accessibility violations", async () => {
+        props: { type: 'user', name: 'exactuser', isExactMatch: true },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('InstantSearch', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(InstantSearch)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('SearchProviderToggle', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(SearchProviderToggle)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('SearchProviderToggle.server', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(SearchProviderToggleServer)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('Toggle.server', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(ToggleServer, {
-        props: { label: "Enable feature" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { label: 'Enable feature' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with description", async () => {
+    it('should have no accessibility violations with description', async () => {
       const component = await mountSuspended(ToggleServer, {
         props: {
-          label: "Enable feature",
-          description: "This enables the feature",
+          label: 'Enable feature',
+          description: 'This enables the feature',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("Toggle", () => {
-    it("should have no accessibility violations", async () => {
+  describe('Toggle', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(SettingsToggle, {
-        props: { label: "Enable feature", modelValue: false },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { label: 'Enable feature', modelValue: false },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with description", async () => {
+    it('should have no accessibility violations with description', async () => {
       const component = await mountSuspended(SettingsToggle, {
         props: {
-          label: "Enable feature",
-          description: "This enables the feature",
+          label: 'Enable feature',
+          description: 'This enables the feature',
           modelValue: false,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when checked", async () => {
+    it('should have no accessibility violations when checked', async () => {
       const component = await mountSuspended(SettingsToggle, {
-        props: { label: "Enable feature", modelValue: true },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("VersionSelector", () => {
+        props: { label: 'Enable feature', modelValue: true },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('VersionSelector', () => {
     const mockVersions = {
-      "3.5.0": {},
-      "3.4.0": {},
-      "3.3.0": {},
-    };
+      '3.5.0': {},
+      '3.4.0': {},
+      '3.3.0': {},
+    }
     const mockDistTags = {
-      latest: "3.5.0",
-      next: "3.4.0",
-    };
+      latest: '3.5.0',
+      next: '3.4.0',
+    }
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(VersionSelector, {
         props: {
-          packageName: "vue",
-          currentVersion: "3.5.0",
+          packageName: 'vue',
+          currentVersion: '3.5.0',
           versions: mockVersions,
           distTags: mockDistTags,
-          urlPattern: "/package/vue/v/{version}",
+          urlPattern: '/package/vue/v/{version}',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with non-latest version", async () => {
+    it('should have no accessibility violations with non-latest version', async () => {
       const component = await mountSuspended(VersionSelector, {
         props: {
-          packageName: "vue",
-          currentVersion: "3.4.0",
+          packageName: 'vue',
+          currentVersion: '3.4.0',
           versions: mockVersions,
           distTags: mockDistTags,
-          urlPattern: "/package/vue/v/{version}",
+          urlPattern: '/package/vue/v/{version}',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("BlueskyPostEmbed", () => {
-    it("should have no accessibility violations in pending state", async () => {
+  describe('BlueskyPostEmbed', () => {
+    it('should have no accessibility violations in pending state', async () => {
       const component = await mountSuspended(BlueskyPostEmbed, {
         props: {
-          uri: "at://did:plc:u5zp7npt5kpueado77kuihyz/app.bsky.feed.post/3mejzn5mrcc2g",
+          uri: 'at://did:plc:u5zp7npt5kpueado77kuihyz/app.bsky.feed.post/3mejzn5mrcc2g',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("UserAvatar", () => {
-    it("should have no accessibility violations", async () => {
+  describe('UserAvatar', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(UserAvatar, {
-        props: { username: "testuser", size: "lg" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { username: 'testuser', size: 'lg' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with short username", async () => {
+    it('should have no accessibility violations with short username', async () => {
       const component = await mountSuspended(UserAvatar, {
-        props: { username: "a", size: "lg" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+        props: { username: 'a', size: 'lg' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with long username", async () => {
+    it('should have no accessibility violations with long username', async () => {
       const component = await mountSuspended(UserAvatar, {
-        props: { username: "verylongusernameexample", size: "lg" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations in all sizes", async () => {
-      const sizes = ["xs", "lg"] as const;
+        props: { username: 'verylongusernameexample', size: 'lg' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations in all sizes', async () => {
+      const sizes = ['xs', 'lg'] as const
       for (const size of sizes) {
         const component = await mountSuspended(UserAvatar, {
-          props: { username: "testuser", size },
-        });
-        const results = await runAxe(component);
-        expect(results.violations).toEqual([]);
+          props: { username: 'testuser', size },
+        })
+        const results = await runAxe(component)
+        expect(results.violations).toEqual([])
       }
-    });
-  });
+    })
+  })
 
-  describe("PackageDownloadButton", () => {
-    it("should have no accessibility violations", async () => {
+  describe('PackageDownloadButton', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageDownloadButton, {
         props: {
-          packageName: "vue",
+          packageName: 'vue',
           version: {
-            version: "3.5.0",
-            dist: { tarball: "https://registry.npmjs.org/vue/-/vue-3.5.0.tgz" },
+            version: '3.5.0',
+            dist: { tarball: 'https://registry.npmjs.org/vue/-/vue-3.5.0.tgz' },
           } as any,
           dependencies: null,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
   // Diff components
-  describe("DiffFileTree", () => {
+  describe('DiffFileTree', () => {
     const mockFiles = [
-      { path: "src/index.ts", type: "modified" as const },
-      { path: "src/utils/helper.ts", type: "added" as const },
-      { path: "README.md", type: "modified" as const },
-      { path: "old-file.js", type: "removed" as const },
-    ];
+      { path: 'src/index.ts', type: 'modified' as const },
+      { path: 'src/utils/helper.ts', type: 'added' as const },
+      { path: 'README.md', type: 'modified' as const },
+      { path: 'old-file.js', type: 'removed' as const },
+    ]
 
-    it("should have no accessibility violations with files", async () => {
+    it('should have no accessibility violations with files', async () => {
       const component = await mountSuspended(DiffFileTree, {
         props: {
           files: mockFiles,
           selectedPath: null,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with selected file", async () => {
+    it('should have no accessibility violations with selected file', async () => {
       const component = await mountSuspended(DiffFileTree, {
         props: {
           files: mockFiles,
-          selectedPath: "src/index.ts",
+          selectedPath: 'src/index.ts',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with empty files", async () => {
+    it('should have no accessibility violations with empty files', async () => {
       const component = await mountSuspended(DiffFileTree, {
         props: {
           files: [],
           selectedPath: null,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("DiffLine", () => {
-    it("should have no accessibility violations for normal line", async () => {
+  describe('DiffLine', () => {
+    it('should have no accessibility violations for normal line', async () => {
       const component = await mountSuspended(DiffLine, {
         props: {
           line: {
-            type: "normal",
+            type: 'normal',
             oldLineNumber: 1,
             newLineNumber: 1,
-            content: [{ value: "const x = 1;", type: "normal" }],
+            content: [{ value: 'const x = 1;', type: 'normal' }],
           },
         },
         global: {
           provide: {
             diffContext: {
-              fileStatus: computed(() => "modify"),
-              language: computed(() => "typescript"),
+              fileStatus: computed(() => 'modify'),
+              language: computed(() => 'typescript'),
               enableShiki: computed(() => false),
               wordWrap: computed(() => false),
             },
           },
         },
         attachTo: (() => {
-          const table = document.createElement("table");
-          const tbody = document.createElement("tbody");
-          table.appendChild(tbody);
-          document.body.appendChild(table);
-          return tbody;
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
         })(),
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for insert line", async () => {
+    it('should have no accessibility violations for insert line', async () => {
       const component = await mountSuspended(DiffLine, {
         props: {
           line: {
-            type: "insert",
+            type: 'insert',
             newLineNumber: 5,
-            content: [{ value: "const newVar = true;", type: "insert" }],
+            content: [{ value: 'const newVar = true;', type: 'insert' }],
           },
         },
         global: {
           provide: {
             diffContext: {
-              fileStatus: computed(() => "modify"),
-              language: computed(() => "typescript"),
+              fileStatus: computed(() => 'modify'),
+              language: computed(() => 'typescript'),
               enableShiki: computed(() => false),
               wordWrap: computed(() => false),
             },
           },
         },
         attachTo: (() => {
-          const table = document.createElement("table");
-          const tbody = document.createElement("tbody");
-          table.appendChild(tbody);
-          document.body.appendChild(table);
-          return tbody;
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
         })(),
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for delete line", async () => {
+    it('should have no accessibility violations for delete line', async () => {
       const component = await mountSuspended(DiffLine, {
         props: {
           line: {
-            type: "delete",
+            type: 'delete',
             oldLineNumber: 3,
-            content: [{ value: "const oldVar = false;", type: "delete" }],
+            content: [{ value: 'const oldVar = false;', type: 'delete' }],
           },
         },
         global: {
           provide: {
             diffContext: {
-              fileStatus: computed(() => "modify"),
-              language: computed(() => "typescript"),
+              fileStatus: computed(() => 'modify'),
+              language: computed(() => 'typescript'),
               enableShiki: computed(() => false),
               wordWrap: computed(() => false),
             },
           },
         },
         attachTo: (() => {
-          const table = document.createElement("table");
-          const tbody = document.createElement("tbody");
-          table.appendChild(tbody);
-          document.body.appendChild(table);
-          return tbody;
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
         })(),
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with word-level diff segments", async () => {
+    it('should have no accessibility violations with word-level diff segments', async () => {
       const component = await mountSuspended(DiffLine, {
         props: {
           line: {
-            type: "insert",
+            type: 'insert',
             newLineNumber: 10,
             content: [
-              { value: "const ", type: "normal" },
-              { value: "newName", type: "insert" },
-              { value: " = 1;", type: "normal" },
+              { value: 'const ', type: 'normal' },
+              { value: 'newName', type: 'insert' },
+              { value: ' = 1;', type: 'normal' },
             ],
           },
         },
         global: {
           provide: {
             diffContext: {
-              fileStatus: computed(() => "modify"),
-              language: computed(() => "typescript"),
+              fileStatus: computed(() => 'modify'),
+              language: computed(() => 'typescript'),
               enableShiki: computed(() => false),
               wordWrap: computed(() => false),
             },
           },
         },
         attachTo: (() => {
-          const table = document.createElement("table");
-          const tbody = document.createElement("tbody");
-          table.appendChild(tbody);
-          document.body.appendChild(table);
-          return tbody;
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
         })(),
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("DiffHunk", () => {
+  describe('DiffHunk', () => {
     const mockHunk = {
-      type: "hunk" as const,
-      content: "@@ -1,5 +1,6 @@",
+      type: 'hunk' as const,
+      content: '@@ -1,5 +1,6 @@',
       oldStart: 1,
       oldLines: 5,
       newStart: 1,
       newLines: 6,
       lines: [
         {
-          type: "normal" as const,
+          type: 'normal' as const,
           oldLineNumber: 1,
           newLineNumber: 1,
-          content: [{ value: "const a = 1;", type: "normal" as const }],
+          content: [{ value: 'const a = 1;', type: 'normal' as const }],
         },
         {
-          type: "delete" as const,
+          type: 'delete' as const,
           oldLineNumber: 2,
-          content: [{ value: "const b = 2;", type: "delete" as const }],
+          content: [{ value: 'const b = 2;', type: 'delete' as const }],
         },
         {
-          type: "insert" as const,
+          type: 'insert' as const,
           newLineNumber: 2,
-          content: [{ value: "const b = 3;", type: "insert" as const }],
+          content: [{ value: 'const b = 3;', type: 'insert' as const }],
         },
       ],
-    };
+    }
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(DiffHunk, {
         props: { hunk: mockHunk },
         global: {
           provide: {
             diffContext: {
-              fileStatus: computed(() => "modify"),
-              language: computed(() => "typescript"),
+              fileStatus: computed(() => 'modify'),
+              language: computed(() => 'typescript'),
               enableShiki: computed(() => false),
               wordWrap: computed(() => false),
             },
           },
         },
         attachTo: (() => {
-          const table = document.createElement("table");
-          const tbody = document.createElement("tbody");
-          table.appendChild(tbody);
-          document.body.appendChild(table);
-          return tbody;
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
         })(),
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("DiffSkipBlock", () => {
-    it("should have no accessibility violations", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DiffSkipBlock', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(DiffSkipBlock, {
         props: {
           count: 25,
         },
         attachTo: (() => {
-          const table = document.createElement("table");
-          const tbody = document.createElement("tbody");
-          table.appendChild(tbody);
-          document.body.appendChild(table);
-          return tbody;
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
         })(),
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with custom content", async () => {
+    it('should have no accessibility violations with custom content', async () => {
       const component = await mountSuspended(DiffSkipBlock, {
         props: {
           count: 50,
-          content: "50 unchanged lines",
+          content: '50 unchanged lines',
         },
         attachTo: (() => {
-          const table = document.createElement("table");
-          const tbody = document.createElement("tbody");
-          table.appendChild(tbody);
-          document.body.appendChild(table);
-          return tbody;
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
         })(),
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("DiffTable", () => {
+  describe('DiffTable', () => {
     const mockHunks = [
       {
-        type: "hunk" as const,
-        content: "@@ -1,3 +1,4 @@",
+        type: 'hunk' as const,
+        content: '@@ -1,3 +1,4 @@',
         oldStart: 1,
         oldLines: 3,
         newStart: 1,
         newLines: 4,
         lines: [
           {
-            type: "normal" as const,
+            type: 'normal' as const,
             oldLineNumber: 1,
             newLineNumber: 1,
-            content: [{ value: "line 1", type: "normal" as const }],
+            content: [{ value: 'line 1', type: 'normal' as const }],
           },
           {
-            type: "insert" as const,
+            type: 'insert' as const,
             newLineNumber: 2,
-            content: [{ value: "new line", type: "insert" as const }],
+            content: [{ value: 'new line', type: 'insert' as const }],
           },
         ],
       },
-    ];
+    ]
 
-    it("should have no accessibility violations for modify type", async () => {
+    it('should have no accessibility violations for modify type', async () => {
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: mockHunks,
-          type: "modify",
-          fileName: "test.ts",
+          type: 'modify',
+          fileName: 'test.ts',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for add type", async () => {
+    it('should have no accessibility violations for add type', async () => {
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: mockHunks,
-          type: "add",
-          fileName: "new-file.ts",
+          type: 'add',
+          fileName: 'new-file.ts',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for delete type", async () => {
+    it('should have no accessibility violations for delete type', async () => {
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: mockHunks,
-          type: "delete",
-          fileName: "removed.ts",
+          type: 'delete',
+          fileName: 'removed.ts',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with skip blocks", async () => {
+    it('should have no accessibility violations with skip blocks', async () => {
       const hunksWithSkip = [
         ...mockHunks,
-        { type: "skip" as const, count: 20, content: "20 lines hidden" },
+        { type: 'skip' as const, count: 20, content: '20 lines hidden' },
         {
-          type: "hunk" as const,
-          content: "@@ -25,3 +26,3 @@",
+          type: 'hunk' as const,
+          content: '@@ -25,3 +26,3 @@',
           oldStart: 25,
           oldLines: 3,
           newStart: 26,
           newLines: 3,
           lines: [
             {
-              type: "normal" as const,
+              type: 'normal' as const,
               oldLineNumber: 25,
               newLineNumber: 26,
-              content: [{ value: "line 25", type: "normal" as const }],
+              content: [{ value: 'line 25', type: 'normal' as const }],
             },
           ],
         },
-      ];
+      ]
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: hunksWithSkip,
-          type: "modify",
-          fileName: "large-file.ts",
+          type: 'modify',
+          fileName: 'large-file.ts',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with word wrap enabled", async () => {
+    it('should have no accessibility violations with word wrap enabled', async () => {
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: mockHunks,
-          type: "modify",
-          fileName: "test.ts",
+          type: 'modify',
+          fileName: 'test.ts',
           wordWrap: true,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with empty hunks", async () => {
+    it('should have no accessibility violations with empty hunks', async () => {
       const component = await mountSuspended(DiffTable, {
         props: {
           hunks: [],
-          type: "modify",
-          fileName: "empty.ts",
+          type: 'modify',
+          fileName: 'empty.ts',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("DiffSidebarPanel", () => {
+  describe('DiffSidebarPanel', () => {
     const mockCompare = {
-      package: "test-package",
-      from: "1.0.0",
-      to: "2.0.0",
+      package: 'test-package',
+      from: '1.0.0',
+      to: '2.0.0',
       packageJson: { from: {}, to: {} },
       files: {
-        added: [{ path: "new.ts", type: "added" as const, newSize: 100 }],
-        removed: [{ path: "old.ts", type: "removed" as const, oldSize: 50 }],
+        added: [{ path: 'new.ts', type: 'added' as const, newSize: 100 }],
+        removed: [{ path: 'old.ts', type: 'removed' as const, oldSize: 50 }],
         modified: [
           {
-            path: "changed.ts",
-            type: "modified" as const,
+            path: 'changed.ts',
+            type: 'modified' as const,
             oldSize: 200,
             newSize: 250,
           },
@@ -3854,12 +3809,12 @@ describe("component accessibility audits", () => {
       },
       dependencyChanges: [
         {
-          name: "lodash",
-          section: "dependencies" as const,
-          from: "^4.0.0",
-          to: "^4.1.0",
-          type: "updated" as const,
-          semverDiff: "minor" as const,
+          name: 'lodash',
+          section: 'dependencies' as const,
+          from: '^4.0.0',
+          to: '^4.1.0',
+          type: 'updated' as const,
+          semverDiff: 'minor' as const,
         },
       ],
       stats: {
@@ -3870,48 +3825,48 @@ describe("component accessibility audits", () => {
         filesModified: 1,
       },
       meta: {},
-    };
+    }
 
     const mockAllChanges = [
-      { path: "new.ts", type: "added" as const, newSize: 100 },
-      { path: "old.ts", type: "removed" as const, oldSize: 50 },
+      { path: 'new.ts', type: 'added' as const, newSize: 100 },
+      { path: 'old.ts', type: 'removed' as const, oldSize: 50 },
       {
-        path: "changed.ts",
-        type: "modified" as const,
+        path: 'changed.ts',
+        type: 'modified' as const,
         oldSize: 200,
         newSize: 250,
       },
-    ];
+    ]
 
     const mockGroupedDeps = new Map([
       [
-        "dependencies",
+        'dependencies',
         [
           {
-            name: "lodash",
-            section: "dependencies" as const,
-            from: "^4.0.0",
-            to: "^4.1.0",
-            type: "updated" as const,
-            semverDiff: "minor" as const,
+            name: 'lodash',
+            section: 'dependencies' as const,
+            from: '^4.0.0',
+            to: '^4.1.0',
+            type: 'updated' as const,
+            semverDiff: 'minor' as const,
           },
         ],
       ],
-    ]);
+    ])
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(DiffSidebarPanel, {
         props: {
           compare: mockCompare,
           groupedDeps: mockGroupedDeps,
           allChanges: mockAllChanges,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with selected file", async () => {
+    it('should have no accessibility violations with selected file', async () => {
       const component = await mountSuspended(DiffSidebarPanel, {
         props: {
           compare: mockCompare,
@@ -3919,70 +3874,70 @@ describe("component accessibility audits", () => {
           allChanges: mockAllChanges,
           selectedFile: mockAllChanges[0],
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with file filter", async () => {
+    it('should have no accessibility violations with file filter', async () => {
       const component = await mountSuspended(DiffSidebarPanel, {
         props: {
           compare: mockCompare,
           groupedDeps: mockGroupedDeps,
           allChanges: mockAllChanges,
-          fileFilter: "added",
+          fileFilter: 'added',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with warnings", async () => {
+    it('should have no accessibility violations with warnings', async () => {
       const compareWithWarnings = {
         ...mockCompare,
-        meta: { warnings: ["Some files were truncated"] },
-      };
+        meta: { warnings: ['Some files were truncated'] },
+      }
       const component = await mountSuspended(DiffSidebarPanel, {
         props: {
           compare: compareWithWarnings,
           groupedDeps: mockGroupedDeps,
           allChanges: mockAllChanges,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with no dependency changes", async () => {
+    it('should have no accessibility violations with no dependency changes', async () => {
       const compareNoDeps = {
         ...mockCompare,
         dependencyChanges: [],
-      };
+      }
       const component = await mountSuspended(DiffSidebarPanel, {
         props: {
           compare: compareNoDeps,
           groupedDeps: new Map(),
           allChanges: mockAllChanges,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("DiffMobileSidebarDrawer", () => {
+  describe('DiffMobileSidebarDrawer', () => {
     const mockCompare = {
-      package: "test-package",
-      from: "1.0.0",
-      to: "2.0.0",
+      package: 'test-package',
+      from: '1.0.0',
+      to: '2.0.0',
       packageJson: { from: {}, to: {} },
       files: {
-        added: [{ path: "new.ts", type: "added" as const, newSize: 100 }],
+        added: [{ path: 'new.ts', type: 'added' as const, newSize: 100 }],
         removed: [],
         modified: [
           {
-            path: "changed.ts",
-            type: "modified" as const,
+            path: 'changed.ts',
+            type: 'modified' as const,
             oldSize: 200,
             newSize: 250,
           },
@@ -3997,118 +3952,118 @@ describe("component accessibility audits", () => {
         filesModified: 1,
       },
       meta: {},
-    };
+    }
 
     const mockAllChanges = [
-      { path: "new.ts", type: "added" as const, newSize: 100 },
+      { path: 'new.ts', type: 'added' as const, newSize: 100 },
       {
-        path: "changed.ts",
-        type: "modified" as const,
+        path: 'changed.ts',
+        type: 'modified' as const,
         oldSize: 200,
         newSize: 250,
       },
-    ];
+    ]
 
-    it("should have no accessibility violations when closed", async () => {
+    it('should have no accessibility violations when closed', async () => {
       const component = await mountSuspended(DiffMobileSidebarDrawer, {
         props: {
           compare: mockCompare,
           groupedDeps: new Map(),
           allChanges: mockAllChanges,
           open: false,
-          packageName: "nuxt",
-          toVersion: "3.0.0",
-          toVersionUrlPattern: "https://npmx.dev/package/nuxt/v/3.0.0",
+          packageName: 'nuxt',
+          toVersion: '3.0.0',
+          toVersionUrlPattern: 'https://npmx.dev/package/nuxt/v/3.0.0',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations when open", async () => {
+    it('should have no accessibility violations when open', async () => {
       const component = await mountSuspended(DiffMobileSidebarDrawer, {
         props: {
           compare: mockCompare,
           groupedDeps: new Map(),
           allChanges: mockAllChanges,
           open: true,
-          packageName: "nuxt",
-          toVersion: "3.0.0",
-          toVersionUrlPattern: "https://npmx.dev/package/nuxt/v/3.0.0",
+          packageName: 'nuxt',
+          toVersion: '3.0.0',
+          toVersionUrlPattern: 'https://npmx.dev/package/nuxt/v/3.0.0',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("DiffViewerPanel", () => {
+  describe('DiffViewerPanel', () => {
     const mockFile = {
-      path: "src/index.ts",
-      type: "modified" as const,
+      path: 'src/index.ts',
+      type: 'modified' as const,
       oldSize: 500,
       newSize: 600,
-    };
+    }
 
     // Note: DiffViewerPanel fetches content from CDN, so we test the initial/loading states
     // Full diff rendering tests would require mocking fetch
 
-    it("should have no accessibility violations in loading state", async () => {
+    it('should have no accessibility violations in loading state', async () => {
       const component = await mountSuspended(DiffViewerPanel, {
         props: {
-          packageName: "test-package",
-          fromVersion: "1.0.0",
-          toVersion: "2.0.0",
+          packageName: 'test-package',
+          fromVersion: '1.0.0',
+          toVersion: '2.0.0',
           file: mockFile,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for added file", async () => {
+    it('should have no accessibility violations for added file', async () => {
       const addedFile = {
-        path: "src/new-feature.ts",
-        type: "added" as const,
+        path: 'src/new-feature.ts',
+        type: 'added' as const,
         newSize: 200,
-      };
+      }
       const component = await mountSuspended(DiffViewerPanel, {
         props: {
-          packageName: "test-package",
-          fromVersion: "1.0.0",
-          toVersion: "2.0.0",
+          packageName: 'test-package',
+          fromVersion: '1.0.0',
+          toVersion: '2.0.0',
           file: addedFile,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations for removed file", async () => {
+    it('should have no accessibility violations for removed file', async () => {
       const removedFile = {
-        path: "src/deprecated.ts",
-        type: "removed" as const,
+        path: 'src/deprecated.ts',
+        type: 'removed' as const,
         oldSize: 300,
-      };
+      }
       const component = await mountSuspended(DiffViewerPanel, {
         props: {
-          packageName: "test-package",
-          fromVersion: "1.0.0",
-          toVersion: "2.0.0",
+          packageName: 'test-package',
+          fromVersion: '1.0.0',
+          toVersion: '2.0.0',
           file: removedFile,
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("SizeIncrease", () => {
-    it("should have no accessibility violations", async () => {
+  describe('SizeIncrease', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(SizeIncrease, {
         props: {
           diff: {
-            comparisonVersion: "1.0.0",
+            comparisonVersion: '1.0.0',
             sizeRatio: 1,
             sizeIncrease: 200,
             currentSize: 400,
@@ -4120,16 +4075,16 @@ describe("component accessibility audits", () => {
             depThresholdExceeded: true,
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with only size increase", async () => {
+    it('should have no accessibility violations with only size increase', async () => {
       const component = await mountSuspended(SizeIncrease, {
         props: {
           diff: {
-            comparisonVersion: "1.0.0",
+            comparisonVersion: '1.0.0',
             sizeRatio: 1,
             sizeIncrease: 200,
             currentSize: 400,
@@ -4141,16 +4096,16 @@ describe("component accessibility audits", () => {
             depThresholdExceeded: false,
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations with only dependency increase", async () => {
+    it('should have no accessibility violations with only dependency increase', async () => {
       const component = await mountSuspended(SizeIncrease, {
         props: {
           diff: {
-            comparisonVersion: "1.0.0",
+            comparisonVersion: '1.0.0',
             sizeRatio: 0,
             sizeIncrease: 0,
             currentSize: 200,
@@ -4162,306 +4117,296 @@ describe("component accessibility audits", () => {
             depThresholdExceeded: true,
           },
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("PackageActionBar", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(PackageActionBar);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("PackageSelectionView", () => {
-    it("should have no accessibility violations", async () => {
-      const component = await mountSuspended(PackageSelectionView);
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations changing view mode", async () => {
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageActionBar', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageActionBar)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageSelectionView', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageSelectionView)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations changing view mode', async () => {
       const component = await mountSuspended(PackageSelectionView, {
         props: {
-          viewMode: "table",
+          viewMode: 'table',
         },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("PackageSelectionCheckbox", () => {
-    it("should have no accessibility violations when disabled", async () => {
+  describe('PackageSelectionCheckbox', () => {
+    it('should have no accessibility violations when disabled', async () => {
       const component = await mountSuspended(PackageSelectionCheckbox, {
         props: {
-          packageName: "nuxt",
+          packageName: 'nuxt',
           checked: false,
           disabled: true,
         },
-      });
+      })
 
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
 
-    it("should have no accessibility violations", async () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageSelectionCheckbox, {
         props: {
-          packageName: "nuxt",
+          packageName: 'nuxt',
           checked: false,
         },
-      });
+      })
 
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 
-  describe("Alert", () => {
-    it("should have no accessibility violations for warning variant", async () => {
+  describe('Alert', () => {
+    it('should have no accessibility violations for warning variant', async () => {
       const component = await mountSuspended(Alert, {
-        props: { variant: "warning", title: "Warning title" },
-        slots: { default: "This is a warning message." },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations for error variant", async () => {
+        props: { variant: 'warning', title: 'Warning title' },
+        slots: { default: 'This is a warning message.' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for error variant', async () => {
       const component = await mountSuspended(Alert, {
-        props: { variant: "error", title: "Error title" },
-        slots: { default: "This is an error message." },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-
-    it("should have no accessibility violations without title", async () => {
+        props: { variant: 'error', title: 'Error title' },
+        slots: { default: 'This is an error message.' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations without title', async () => {
       const component = await mountSuspended(Alert, {
-        props: { variant: "warning" },
-        slots: { default: "This is a warning message." },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-
-  describe("ProgressBar", () => {
-    it("should have no accessibility violations", async () => {
+        props: { variant: 'warning' },
+        slots: { default: 'This is a warning message.' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('ProgressBar', () => {
+    it('should have no accessibility violations', async () => {
       const component = await mountSuspended(ProgressBar, {
-        props: { val: 99, label: "Progress status for en" },
-      });
-      const results = await runAxe(component);
-      expect(results.violations).toEqual([]);
-    });
-  });
-});
+        props: { val: 99, label: 'Progress status for en' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+})
 
 function applyTheme(colorMode: string, bgTheme: string | null) {
-  document.documentElement.dataset.theme = colorMode;
-  document.documentElement.classList.add(colorMode);
-  if (bgTheme) document.documentElement.dataset.bgTheme = bgTheme;
+  document.documentElement.dataset.theme = colorMode
+  document.documentElement.classList.add(colorMode)
+  if (bgTheme) document.documentElement.dataset.bgTheme = bgTheme
 }
 
-describe("background theme accessibility", () => {
+describe('background theme accessibility', () => {
   const pairs = [
-    ["light", "neutral"],
-    ["dark", "neutral"],
-    ["light", "stone"],
-    ["dark", "stone"],
-    ["light", "zinc"],
-    ["dark", "zinc"],
-    ["light", "slate"],
-    ["dark", "slate"],
-    ["light", "black"],
-    ["dark", "black"],
-  ] as const;
+    ['light', 'neutral'],
+    ['dark', 'neutral'],
+    ['light', 'stone'],
+    ['dark', 'stone'],
+    ['light', 'zinc'],
+    ['dark', 'zinc'],
+    ['light', 'slate'],
+    ['dark', 'slate'],
+    ['light', 'black'],
+    ['dark', 'black'],
+  ] as const
 
   afterEach(() => {
-    document.documentElement.removeAttribute("data-theme");
-    document.documentElement.removeAttribute("data-bg-theme");
-    document.documentElement.classList.remove("light", "dark");
-  });
+    document.documentElement.removeAttribute('data-theme')
+    document.documentElement.removeAttribute('data-bg-theme')
+    document.documentElement.classList.remove('light', 'dark')
+  })
 
   const packageResult = {
     package: {
-      name: "vue",
-      version: "3.5.0",
-      description: "Framework",
-      date: "2024-01-15T00:00:00.000Z",
+      name: 'vue',
+      version: '3.5.0',
+      description: 'Framework',
+      date: '2024-01-15T00:00:00.000Z',
       keywords: [],
       links: {},
-      publisher: { username: "evan" },
+      publisher: { username: 'evan' },
     },
     searchScore: 100000,
-  };
+  }
 
   const components = [
     {
-      name: "AlertWarning",
+      name: 'AlertWarning',
       mount: () =>
         mountSuspended(Alert, {
-          props: { variant: "warning", title: "Warning title" },
-          slots: { default: "<p>Warning body</p>" },
+          props: { variant: 'warning', title: 'Warning title' },
+          slots: { default: '<p>Warning body</p>' },
         }),
     },
     {
-      name: "AlertError",
+      name: 'AlertError',
       mount: () =>
         mountSuspended(Alert, {
-          props: { variant: "error", title: "Error title" },
-          slots: { default: "<p>Error body</p>" },
+          props: { variant: 'error', title: 'Error title' },
+          slots: { default: '<p>Error body</p>' },
         }),
     },
-    { name: "AppHeader", mount: () => mountSuspended(AppHeader) },
-    { name: "AppFooter", mount: () => mountSuspended(AppFooter) },
-    { name: "HeaderSearchBox", mount: () => mountSuspended(HeaderSearchBox) },
+    { name: 'AppHeader', mount: () => mountSuspended(AppHeader) },
+    { name: 'AppFooter', mount: () => mountSuspended(AppFooter) },
+    { name: 'HeaderSearchBox', mount: () => mountSuspended(HeaderSearchBox) },
     {
-      name: "LoadingSpinner",
-      mount: () =>
-        mountSuspended(LoadingSpinner, { props: { text: "Loading..." } }),
+      name: 'LoadingSpinner',
+      mount: () => mountSuspended(LoadingSpinner, { props: { text: 'Loading...' } }),
     },
     {
-      name: "SettingsToggle",
+      name: 'SettingsToggle',
       mount: () =>
         mountSuspended(SettingsToggle, {
-          props: { label: "Feature", description: "Desc", modelValue: false },
+          props: { label: 'Feature', description: 'Desc', modelValue: false },
         }),
     },
     {
-      name: "SettingsBgThemePicker",
+      name: 'SettingsBgThemePicker',
       mount: () => mountSuspended(SettingsBgThemePicker),
     },
     {
-      name: "ProvenanceBadge",
+      name: 'ProvenanceBadge',
       mount: () =>
         mountSuspended(ProvenanceBadge, {
-          props: { provider: "github", packageName: "vue", version: "3.0.0" },
+          props: { provider: 'github', packageName: 'vue', version: '3.0.0' },
         }),
     },
     {
-      name: "TerminalInstall",
-      mount: () =>
-        mountSuspended(TerminalInstall, { props: { packageName: "vue" } }),
+      name: 'TerminalInstall',
+      mount: () => mountSuspended(TerminalInstall, { props: { packageName: 'vue' } }),
     },
     {
-      name: "LicenseDisplay",
-      mount: () =>
-        mountSuspended(LicenseDisplay, { props: { license: "MIT" } }),
+      name: 'LicenseDisplay',
+      mount: () => mountSuspended(LicenseDisplay, { props: { license: 'MIT' } }),
     },
     {
-      name: "DateTime",
+      name: 'DateTime',
       mount: () =>
         mountSuspended(DateTime, {
-          props: { datetime: "2024-01-15T12:00:00.000Z" },
+          props: { datetime: '2024-01-15T12:00:00.000Z' },
         }),
     },
     {
-      name: "ViewModeToggle",
-      mount: () =>
-        mountSuspended(ViewModeToggle, { props: { modelValue: "cards" } }),
+      name: 'ViewModeToggle',
+      mount: () => mountSuspended(ViewModeToggle, { props: { modelValue: 'cards' } }),
     },
     {
-      name: "TooltipApp",
+      name: 'TooltipApp',
       mount: () =>
         mountSuspended(TooltipApp, {
-          props: { text: "Tooltip" },
-          slots: { default: "<button>Trigger</button>" },
+          props: { text: 'Tooltip' },
+          slots: { default: '<button>Trigger</button>' },
         }),
     },
     {
-      name: "CollapsibleSection",
+      name: 'CollapsibleSection',
       mount: () =>
         mountSuspended(CollapsibleSection, {
-          props: { title: "Title", id: "section" },
-          slots: { default: "<p>Content</p>" },
+          props: { title: 'Title', id: 'section' },
+          slots: { default: '<p>Content</p>' },
         }),
     },
     {
-      name: "FilterChips",
+      name: 'FilterChips',
       mount: () =>
         mountSuspended(FilterChips, {
           props: {
-            chips: [
-              { id: "text", type: "text", label: "Search", value: "react" },
-            ] as FilterChip[],
+            chips: [{ id: 'text', type: 'text', label: 'Search', value: 'react' }] as FilterChip[],
           },
         }),
     },
     {
-      name: "PackageCard",
-      mount: () =>
-        mountSuspended(PackageCard, { props: { result: packageResult } }),
+      name: 'PackageCard',
+      mount: () => mountSuspended(PackageCard, { props: { result: packageResult } }),
     },
     {
-      name: "PackageList",
-      mount: () =>
-        mountSuspended(PackageList, { props: { results: [packageResult] } }),
+      name: 'PackageList',
+      mount: () => mountSuspended(PackageList, { props: { results: [packageResult] } }),
     },
-  ];
+  ]
 
   /**
    * For performance, we pool axe runs for each theme combination, optimistically assuming no
    * violations will occur. If violations are found in the pooled run, we re-run axe on individual
    * components for precise results.
    */
-  const pooledResults = new Map<string, Promise<AxeResults>>();
+  const pooledResults = new Map<string, Promise<AxeResults>>()
 
   function getPooledResults(colorMode: string, bgTheme: string) {
-    const key = `${colorMode}:${bgTheme}`;
-    const cached = pooledResults.get(key);
-    if (cached) return cached;
+    const key = `${colorMode}:${bgTheme}`
+    const cached = pooledResults.get(key)
+    if (cached) return cached
 
     const promise = (async () => {
-      const wrappers = await Promise.all(
-        components.map(({ mount }) => mount()),
-      );
-      const poolContainer = document.createElement("div");
-      poolContainer.id = `a11y-theme-pool-${colorMode}-${bgTheme}`;
-      document.body.appendChild(poolContainer);
-      mountedContainers.push(poolContainer);
+      const wrappers = await Promise.all(components.map(({ mount }) => mount()))
+      const poolContainer = document.createElement('div')
+      poolContainer.id = `a11y-theme-pool-${colorMode}-${bgTheme}`
+      document.body.appendChild(poolContainer)
+      mountedContainers.push(poolContainer)
 
       try {
         for (const wrapper of wrappers) {
-          const el = wrapper.element.cloneNode(true) as HTMLElement;
-          poolContainer.appendChild(el);
+          const el = wrapper.element.cloneNode(true) as HTMLElement
+          poolContainer.appendChild(el)
         }
 
-        await nextTick();
-        return await axe.run(poolContainer, axeRunOptions);
+        await nextTick()
+        return await axe.run(poolContainer, axeRunOptions)
       } finally {
         for (const wrapper of wrappers) {
-          wrapper.unmount();
+          wrapper.unmount()
         }
       }
-    })();
+    })()
 
-    pooledResults.set(key, promise);
-    return promise;
+    pooledResults.set(key, promise)
+    return promise
   }
 
   for (const { name, mount } of components) {
     describe(`${name} colors`, () => {
       for (const [colorMode, bgTheme] of pairs) {
         it(`${colorMode}/${bgTheme}`, async () => {
-          applyTheme(colorMode, bgTheme);
+          applyTheme(colorMode, bgTheme)
 
-          const pooled = await getPooledResults(colorMode, bgTheme);
-          if (pooled.violations.length === 0) return;
+          const pooled = await getPooledResults(colorMode, bgTheme)
+          if (pooled.violations.length === 0) return
 
-          const wrapper = await mount();
+          const wrapper = await mount()
           try {
-            const results = await runAxe(wrapper);
-            expect(results.violations).toEqual([]);
+            const results = await runAxe(wrapper)
+            expect(results.violations).toEqual([])
           } finally {
-            wrapper.unmount();
+            wrapper.unmount()
           }
-        });
+        })
       }
-    });
+    })
   }
-});
+})

From 14f92a3082294ca929e8905d4da9bee6b643d9ec Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Fri, 24 Apr 2026 22:38:23 +0530
Subject: [PATCH 13/28] fix: implement coderabbit suggestions

---
 app/components/AccountItem.vue         |  19 ++-
 app/pages/profile/[identity]/index.vue |   1 -
 i18n/locales/en.json                   |   2 +-
 server/api/keytrace/[domain].ts        | 175 +++++++++----------------
 server/api/keytrace/reverify.post.ts   | 130 ++++++++++--------
 server/utils/keytrace.ts               |  93 +++++++++++++
 shared/types/keytrace.ts               |   1 +
 7 files changed, 241 insertions(+), 180 deletions(-)
 create mode 100644 server/utils/keytrace.ts

diff --git a/app/components/AccountItem.vue b/app/components/AccountItem.vue
index 2c4bcb204c..fa52c82351 100644
--- a/app/components/AccountItem.vue
+++ b/app/components/AccountItem.vue
@@ -11,6 +11,8 @@ const props = defineProps<{
   account: KeytraceAccount
 }>()
 
+const { t } = useI18n()
+
 const platformLabelMap: Record<string, string> = {
   github: 'GitHub',
   npm: 'npm',
@@ -36,11 +38,11 @@ const proofMethodLabelMap: Record<KeytraceAccount['proofMethod'], string> = {
   other: 'other',
 }
 
-const statusLabelMap: Record<KeytraceAccount['status'], string> = {
-  verified: 'Verified',
-  unverified: 'Unverified',
-  stale: 'Stale',
-  failed: 'Failed',
+const statusLabelMap: Record<KeytraceAccount['status'], { key: string; fallback: string }> = {
+  verified: { key: 'profile.linked_accounts.status.verified', fallback: 'Verified' },
+  unverified: { key: 'profile.linked_accounts.status.unverified', fallback: 'Unverified' },
+  stale: { key: 'profile.linked_accounts.status.stale', fallback: 'Stale' },
+  failed: { key: 'profile.linked_accounts.status.failed', fallback: 'Failed' },
 }
 
 const statusClassMap: Record<KeytraceAccount['status'], string> = {
@@ -117,7 +119,12 @@ watch(
   { immediate: true },
 )
 
-const statusLabel = computed(() => statusLabelMap[localStatus.value])
+const statusLabel = computed(() => {
+  const statusEntry = statusLabelMap[localStatus.value]
+  const translatedStatus = t(statusEntry.key)
+
+  return translatedStatus === statusEntry.key ? statusEntry.fallback : translatedStatus
+})
 const statusClasses = computed(() => statusClassMap[localStatus.value])
 const proofMethodLabel = computed(() => proofMethodLabelMap[props.account.proofMethod])
 
diff --git a/app/pages/profile/[identity]/index.vue b/app/pages/profile/[identity]/index.vue
index c5f48a1ef0..84b35cda18 100644
--- a/app/pages/profile/[identity]/index.vue
+++ b/app/pages/profile/[identity]/index.vue
@@ -2,7 +2,6 @@
 import { updateProfile as updateProfileUtil } from '~/utils/atproto/profile'
 import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
 import { getSafeHttpUrl } from '#shared/utils/url'
-import { useKeytraceProfile } from '~/composables/useKeytraceProfile'
 
 const route = useRoute('profile-identity')
 const identity = computed(() => route.params.identity)
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index facc4de7bf..2beaa7051b 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -376,7 +376,7 @@
         "failed": "Failed"
       },
       "title": "Linked Accounts",
-      "verified_summary": "Verified accounts",
+      "verified_summary": "{verified}/{total} verified",
       "legend_aria_label": "Account verification status legend",
       "empty": "No linked accounts"
     }
diff --git a/server/api/keytrace/[domain].ts b/server/api/keytrace/[domain].ts
index e35bda0d59..52e82b7bdc 100644
--- a/server/api/keytrace/[domain].ts
+++ b/server/api/keytrace/[domain].ts
@@ -1,9 +1,20 @@
-import { getClaimsForHandle, type ClaimVerificationResult } from '@keytrace/claims'
-import type { KeytraceProofMethod, KeytraceResponse } from '#shared/types/keytrace'
+import {
+  getClaimsForHandle,
+  type ClaimVerificationResult,
+} from "@keytrace/claims";
+import type {
+  KeytraceProofMethod,
+  KeytraceResponse,
+} from "#shared/types/keytrace";
+import {
+  getOptionalClaimField,
+  mapKeytraceVerificationStatus,
+  mapClaimTypeToPlatform,
+} from "#server/utils/keytrace";
 
 function domainToDisplayName(domain: string): string {
-  const firstSegment = domain.split('.')[0] || domain
-  return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1)
+  const firstSegment = domain.split(".")[0] || domain;
+  return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1);
 }
 
 function buildFallbackProfile(domain: string): KeytraceResponse {
@@ -14,7 +25,7 @@ function buildFallbackProfile(domain: string): KeytraceResponse {
       description: `No Keytrace claims found for ${domain}.`,
     },
     accounts: [],
-  }
+  };
 }
 
 function buildServiceUnavailableProfile(domain: string): KeytraceResponse {
@@ -22,138 +33,74 @@ function buildServiceUnavailableProfile(domain: string): KeytraceResponse {
     profile: {
       name: `${domainToDisplayName(domain)} Developer`,
       avatar: `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`,
-      description: 'Keytrace is temporarily unavailable. Please try again shortly.',
+      description:
+        "Keytrace is temporarily unavailable. Please try again shortly.",
     },
     accounts: [],
-  }
-}
-
-// Map Keytrace claim types to our platform names
-function mapPlatformType(type: string): string {
-  const platformMap: Record<string, string> = {
-    github: 'github',
-    dns: 'dns',
-    activitypub: 'mastodon',
-    bsky: 'bluesky',
-    npm: 'npm',
-    tangled: 'tangled',
-    pgp: 'pgp',
-    twitter: 'twitter',
-    linkedin: 'linkedin',
-    instagram: 'instagram',
-    reddit: 'reddit',
-    hackernews: 'hackernews',
-    orcid: 'orcid',
-    itchio: 'itchio',
-    discord: 'discord',
-    steam: 'steam',
-  }
-  return platformMap[type] || type
+  };
 }
 
 const allowedProofMethods = new Set<KeytraceProofMethod>([
-  'dns',
-  'github',
-  'npm',
-  'mastodon',
-  'pgp',
-  'other',
-])
+  "dns",
+  "github",
+  "npm",
+  "mastodon",
+  "pgp",
+  "other",
+]);
 
 function mapProofMethod(type: string): KeytraceProofMethod {
-  const mappedType = mapPlatformType(type)
+  const mappedType = mapClaimTypeToPlatform(type);
   return allowedProofMethods.has(mappedType as KeytraceProofMethod)
     ? (mappedType as KeytraceProofMethod)
-    : 'other'
-}
-
-const STALE_THRESHOLD_DAYS = 30
-
-function getOptionalClaimField(claim: ClaimVerificationResult, key: string): string | undefined {
-  const rawClaim = claim.claim as unknown as Record<string, unknown>
-  const value = rawClaim[key]
-  return typeof value === 'string' ? value : undefined
-}
-
-function isStaleIsoDate(isoDate: string | undefined): boolean {
-  if (!isoDate) {
-    return false
-  }
-
-  const timestamp = Date.parse(isoDate)
-  if (Number.isNaN(timestamp)) {
-    return false
-  }
-
-  return Date.now() - timestamp > STALE_THRESHOLD_DAYS * 24 * 60 * 60 * 1000
-}
-
-function mapVerificationStatus(
-  claim: ClaimVerificationResult,
-): 'verified' | 'unverified' | 'stale' | 'failed' {
-  const rawStatus = getOptionalClaimField(claim, 'status')
-  const lastVerifiedAt = getOptionalClaimField(claim, 'lastVerifiedAt')
-
-  if (rawStatus === 'failed' || rawStatus === 'retracted') {
-    return 'failed'
-  }
-
-  if (rawStatus === 'verified') {
-    return isStaleIsoDate(lastVerifiedAt) ? 'stale' : 'verified'
-  }
-
-  if (claim.error) {
-    return 'failed'
-  }
-
-  if (claim.verified) {
-    return isStaleIsoDate(lastVerifiedAt) ? 'stale' : 'verified'
-  }
-
-  return 'unverified'
+    : "other";
 }
 
 // Convert Keytrace claims to our account format
-function mapClaimsToAccounts(claims: ClaimVerificationResult[]): KeytraceResponse['accounts'] {
-  return claims.map(claim => ({
-    platform: mapPlatformType(claim.type),
+function mapClaimsToAccounts(
+  claims: ClaimVerificationResult[],
+): KeytraceResponse["accounts"] {
+  return claims.map((claim) => ({
+    platform: mapClaimTypeToPlatform(claim.type),
     username: claim.identity.subject,
     displayName: claim.identity.displayName || claim.identity.subject,
     avatar: claim.identity.avatarUrl || undefined,
     url: claim.identity.profileUrl || undefined,
-    status: mapVerificationStatus(claim),
+    status: mapKeytraceVerificationStatus(claim),
     proofMethod: mapProofMethod(claim.type),
     addedAt: claim.claim.createdAt,
     lastCheckedAt:
-      getOptionalClaimField(claim, 'lastVerifiedAt') ||
+      getOptionalClaimField(claim, "lastVerifiedAt") ||
       claim.claim.retractedAt ||
       claim.claim.createdAt,
     failureReason: claim.error || undefined,
-  }))
+  }));
 }
 
 type KeytraceFetchResult =
-  | { kind: 'success'; data: KeytraceResponse }
-  | { kind: 'no-claims' }
-  | { kind: 'error'; error: unknown }
+  | { kind: "success"; data: KeytraceResponse }
+  | { kind: "no-claims" }
+  | { kind: "error"; error: unknown };
 
 // Fetch real Keytrace profile data
-async function fetchKeytraceProfile(domain: string): Promise<KeytraceFetchResult> {
+async function fetchKeytraceProfile(
+  domain: string,
+): Promise<KeytraceFetchResult> {
   try {
-    const result = await getClaimsForHandle(domain)
+    const result = await getClaimsForHandle(domain);
 
     if (!result.claims || result.claims.length === 0) {
-      return { kind: 'no-claims' }
+      return { kind: "no-claims" };
     }
 
     // Build profile from first claim's identity (they all belong to the same DID)
-    const firstClaim = result.claims[0]
+    const firstClaim = result.claims[0];
     if (!firstClaim) {
-      return { kind: 'no-claims' }
+      return { kind: "no-claims" };
     }
 
     return {
-      kind: 'success',
+      kind: "success",
       data: {
         profile: {
           name: firstClaim.identity.displayName || domainToDisplayName(domain),
@@ -164,33 +111,33 @@ async function fetchKeytraceProfile(domain: string): Promise<KeytraceFetchResult
         },
         accounts: mapClaimsToAccounts(result.claims),
       },
-    }
+    };
   } catch (error) {
-    console.error('Failed to fetch Keytrace profile:', error)
-    return { kind: 'error', error }
+    console.error("Failed to fetch Keytrace profile:", error);
+    return { kind: "error", error };
   }
 }
 
-export default defineEventHandler(async event => {
-  const domain = getRouterParam(event, 'domain')?.trim().toLowerCase()
+export default defineEventHandler(async (event) => {
+  const domain = getRouterParam(event, "domain")?.trim().toLowerCase();
   if (!domain) {
     throw createError({
       statusCode: 400,
-      message: 'Domain is required',
-    })
+      message: "Domain is required",
+    });
   }
 
   // Try to fetch real Keytrace data
-  const keytraceData = await fetchKeytraceProfile(domain)
+  const keytraceData = await fetchKeytraceProfile(domain);
 
-  if (keytraceData.kind === 'success') {
-    return keytraceData.data
+  if (keytraceData.kind === "success") {
+    return keytraceData.data;
   }
 
-  if (keytraceData.kind === 'no-claims') {
-    return buildFallbackProfile(domain)
+  if (keytraceData.kind === "no-claims") {
+    return buildFallbackProfile(domain);
   }
 
   // If Keytrace is unavailable and mock mode isn't allowed, return a neutral profile.
-  return buildServiceUnavailableProfile(domain)
-})
+  return buildServiceUnavailableProfile(domain);
+});
diff --git a/server/api/keytrace/reverify.post.ts b/server/api/keytrace/reverify.post.ts
index fe2d4eb3cd..deae1fd0ab 100644
--- a/server/api/keytrace/reverify.post.ts
+++ b/server/api/keytrace/reverify.post.ts
@@ -1,28 +1,27 @@
-import { getClaimsForHandle, type ClaimVerificationResult } from '@keytrace/claims'
-import type { KeytraceReverifyRequest, KeytraceReverifyResponse } from '#shared/types/keytrace'
+import {
+  getClaimsForHandle,
+  type ClaimVerificationResult,
+} from "@keytrace/claims";
+import type {
+  KeytraceReverifyRequest,
+  KeytraceReverifyResponse,
+} from "#shared/types/keytrace";
+import {
+  getOptionalClaimField,
+  mapPlatformToClaimType,
+  mapKeytraceVerificationStatus,
+} from "#server/utils/keytrace";
 
-function mapPlatformToClaimType(platform: string): string {
-  if (platform === 'mastodon') {
-    return 'activitypub'
-  }
-  return platform
-}
-
-function getOptionalClaimField(claim: ClaimVerificationResult, key: string): string | undefined {
-  const rawClaim = claim.claim as unknown as Record<string, unknown>
-  const value = rawClaim[key]
-  return typeof value === 'string' ? value : undefined
+function mapReverifyStatus(
+  claim: ClaimVerificationResult,
+): KeytraceReverifyResponse["status"] {
+  return mapKeytraceVerificationStatus(claim);
 }
 
-function mapReverifyStatus(claim: ClaimVerificationResult): KeytraceReverifyResponse['status'] {
-  const rawStatus = getOptionalClaimField(claim, 'status')
-  if (rawStatus === 'failed' || rawStatus === 'retracted' || claim.error) {
-    return 'failed'
-  }
-  if (rawStatus === 'verified' || claim.verified) {
-    return 'verified'
-  }
-  return 'unverified'
+function getReverifyLastCheckedAt(claim: ClaimVerificationResult): string {
+  return (
+    getOptionalClaimField(claim, "lastVerifiedAt") || claim.claim.createdAt
+  );
 }
 
 function matchesAccount(
@@ -32,60 +31,75 @@ function matchesAccount(
   url?: string,
 ): boolean {
   if (claim.type !== claimType) {
-    return false
+    return false;
   }
 
-  const normalizedSubject = claim.identity.subject.toLowerCase()
-  const normalizedUsername = username.toLowerCase()
+  const normalizedSubject = claim.identity.subject.toLowerCase();
+  const normalizedUsername = username.toLowerCase();
   if (normalizedSubject === normalizedUsername) {
-    return true
+    return true;
   }
 
-  const profileUrl = (claim.identity.profileUrl || '').toLowerCase()
-  const normalizedUrl = (url || '').toLowerCase()
+  const profileUrl = (claim.identity.profileUrl || "").toLowerCase();
+  const normalizedUrl = (url || "").toLowerCase();
   if (normalizedUrl && profileUrl && profileUrl === normalizedUrl) {
-    return true
+    return true;
   }
 
-  return false
+  return false;
 }
 
-export default defineEventHandler(async event => {
-  const body = await readBody<KeytraceReverifyRequest>(event)
+export default defineEventHandler(async (event) => {
+  const body = await readBody<KeytraceReverifyRequest>(event);
 
-  const identity = body?.identity?.trim().toLowerCase()
-  const platform = body?.platform?.trim().toLowerCase()
-  const username = body?.username?.trim()
+  const identity = body?.identity?.trim().toLowerCase();
+  const platform = body?.platform?.trim().toLowerCase();
+  const username = body?.username?.trim();
 
   if (!identity || !platform || !username) {
     throw createError({
       statusCode: 400,
-      message: 'identity, platform and username are required',
-    })
+      message: "identity, platform and username are required",
+    });
   }
 
-  const result = await getClaimsForHandle(identity)
-  const claimType = mapPlatformToClaimType(platform)
-  const matchedClaim = result.claims.find(claim =>
-    matchesAccount(claim, claimType, username, body?.url),
-  )
+  try {
+    const result = await getClaimsForHandle(identity);
+    const claimType = mapPlatformToClaimType(platform);
+    const matchedClaim = result.claims.find((claim) =>
+      matchesAccount(claim, claimType, username, body?.url),
+    );
 
-  if (!matchedClaim) {
-    return {
-      status: 'unverified',
-      lastCheckedAt: new Date().toISOString(),
-      failureReason: 'No matching Keytrace claim found for this account.',
+    if (!matchedClaim) {
+      return {
+        status: "unverified",
+        lastCheckedAt: new Date().toISOString(),
+        failureReason: "No matching Keytrace claim found for this account.",
+      };
     }
-  }
 
-  const response: KeytraceReverifyResponse = {
-    status: mapReverifyStatus(matchedClaim),
-    lastCheckedAt:
-      getOptionalClaimField(matchedClaim, 'lastVerifiedAt') ||
-      matchedClaim.claim.retractedAt ||
-      matchedClaim.claim.createdAt,
-    failureReason: matchedClaim.error || undefined,
-  }
+    const response: KeytraceReverifyResponse = {
+      status: mapReverifyStatus(matchedClaim),
+      lastCheckedAt: getReverifyLastCheckedAt(matchedClaim),
+      failureReason: matchedClaim.error || undefined,
+    };
+
+    if (matchedClaim.claim.retractedAt) {
+      response.status = "unverified";
+      response.retractedAt = matchedClaim.claim.retractedAt;
+      response.failureReason =
+        response.failureReason || "Keytrace claim was retracted.";
+    }
 
-  return response
-})
+    return response;
+  } catch (error) {
+    console.error("[keytrace] reverify failed", error);
+
+    return {
+      status: "unverified",
+      lastCheckedAt: new Date().toISOString(),
+      failureReason:
+        "Keytrace is temporarily unavailable. Please try again shortly.",
+    };
+  }
+});
diff --git a/server/utils/keytrace.ts b/server/utils/keytrace.ts
new file mode 100644
index 0000000000..5f8491afd4
--- /dev/null
+++ b/server/utils/keytrace.ts
@@ -0,0 +1,93 @@
+import type { ClaimVerificationResult } from "@keytrace/claims";
+import type { KeytraceVerificationStatus } from "#shared/types/keytrace";
+
+const STALE_THRESHOLD_DAYS = 30;
+
+const platformToClaimTypeMap: Record<string, string> = {
+  github: "github",
+  dns: "dns",
+  mastodon: "activitypub",
+  bluesky: "bsky",
+  npm: "npm",
+  tangled: "tangled",
+  pgp: "pgp",
+  twitter: "twitter",
+  linkedin: "linkedin",
+  instagram: "instagram",
+  reddit: "reddit",
+  hackernews: "hackernews",
+  orcid: "orcid",
+  itchio: "itchio",
+  discord: "discord",
+  steam: "steam",
+};
+
+const claimTypeToPlatformMap: Record<string, string> = {
+  github: "github",
+  dns: "dns",
+  activitypub: "mastodon",
+  bsky: "bluesky",
+  npm: "npm",
+  tangled: "tangled",
+  pgp: "pgp",
+  twitter: "twitter",
+  linkedin: "linkedin",
+  instagram: "instagram",
+  reddit: "reddit",
+  hackernews: "hackernews",
+  orcid: "orcid",
+  itchio: "itchio",
+  discord: "discord",
+  steam: "steam",
+};
+
+export function mapPlatformToClaimType(platform: string): string {
+  return platformToClaimTypeMap[platform] || platform;
+}
+
+export function mapClaimTypeToPlatform(type: string): string {
+  return claimTypeToPlatformMap[type] || type;
+}
+
+export function getOptionalClaimField(
+  claim: ClaimVerificationResult,
+  key: string,
+): string | undefined {
+  const rawClaim = claim.claim as unknown as Record<string, unknown>;
+  const value = rawClaim[key];
+  return typeof value === "string" ? value : undefined;
+}
+
+export function isStaleIsoDate(isoDate: string | undefined): boolean {
+  if (!isoDate) {
+    return false;
+  }
+
+  const timestamp = Date.parse(isoDate);
+  if (Number.isNaN(timestamp)) {
+    return false;
+  }
+
+  return Date.now() - timestamp > STALE_THRESHOLD_DAYS * 24 * 60 * 60 * 1000;
+}
+
+export function mapKeytraceVerificationStatus(
+  claim: ClaimVerificationResult,
+): KeytraceVerificationStatus {
+  const rawStatus = getOptionalClaimField(claim, "status");
+  const lastVerifiedAt = getOptionalClaimField(claim, "lastVerifiedAt");
+
+  if (rawStatus === "failed" || rawStatus === "retracted") {
+    return "failed";
+  }
+
+  if (rawStatus === "verified" || claim.verified) {
+    return isStaleIsoDate(lastVerifiedAt) ? "stale" : "verified";
+  }
+
+  if (claim.error) {
+    return "failed";
+  }
+
+  return "unverified";
+}
diff --git a/shared/types/keytrace.ts b/shared/types/keytrace.ts
index 437c079ff5..dbc04d2fdf 100644
--- a/shared/types/keytrace.ts
+++ b/shared/types/keytrace.ts
@@ -38,4 +38,5 @@ export type KeytraceReverifyResponse = {
   status: KeytraceVerificationStatus
   lastCheckedAt: string
   failureReason?: string
+  retractedAt?: string
 }

From d3825f4c481bb0da7379c3f9fff67a15c613d5cd Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Fri, 24 Apr 2026 22:39:05 +0530
Subject: [PATCH 14/28] feat: fix formatting issue

---
 server/api/keytrace/[domain].ts |  99 +++++++++++++----------------
 server/utils/keytrace.ts        | 108 ++++++++++++++++----------------
 2 files changed, 98 insertions(+), 109 deletions(-)

diff --git a/server/api/keytrace/[domain].ts b/server/api/keytrace/[domain].ts
index 52e82b7bdc..9314910704 100644
--- a/server/api/keytrace/[domain].ts
+++ b/server/api/keytrace/[domain].ts
@@ -1,20 +1,14 @@
-import {
-  getClaimsForHandle,
-  type ClaimVerificationResult,
-} from "@keytrace/claims";
-import type {
-  KeytraceProofMethod,
-  KeytraceResponse,
-} from "#shared/types/keytrace";
+import { getClaimsForHandle, type ClaimVerificationResult } from '@keytrace/claims'
+import type { KeytraceProofMethod, KeytraceResponse } from '#shared/types/keytrace'
 import {
   getOptionalClaimField,
   mapKeytraceVerificationStatus,
   mapClaimTypeToPlatform,
-} from "#server/utils/keytrace";
+} from '#server/utils/keytrace'
 
 function domainToDisplayName(domain: string): string {
-  const firstSegment = domain.split(".")[0] || domain;
-  return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1);
+  const firstSegment = domain.split('.')[0] || domain
+  return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1)
 }
 
 function buildFallbackProfile(domain: string): KeytraceResponse {
@@ -25,7 +19,7 @@ function buildFallbackProfile(domain: string): KeytraceResponse {
       description: `No Keytrace claims found for ${domain}.`,
     },
     accounts: [],
-  };
+  }
 }
 
 function buildServiceUnavailableProfile(domain: string): KeytraceResponse {
@@ -33,34 +27,31 @@ function buildServiceUnavailableProfile(domain: string): KeytraceResponse {
     profile: {
       name: `${domainToDisplayName(domain)} Developer`,
       avatar: `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`,
-      description:
-        "Keytrace is temporarily unavailable. Please try again shortly.",
+      description: 'Keytrace is temporarily unavailable. Please try again shortly.',
     },
     accounts: [],
-  };
+  }
 }
 
 const allowedProofMethods = new Set<KeytraceProofMethod>([
-  "dns",
-  "github",
-  "npm",
-  "mastodon",
-  "pgp",
-  "other",
-]);
+  'dns',
+  'github',
+  'npm',
+  'mastodon',
+  'pgp',
+  'other',
+])
 
 function mapProofMethod(type: string): KeytraceProofMethod {
-  const mappedType = mapClaimTypeToPlatform(type);
+  const mappedType = mapClaimTypeToPlatform(type)
   return allowedProofMethods.has(mappedType as KeytraceProofMethod)
     ? (mappedType as KeytraceProofMethod)
-    : "other";
+    : 'other'
 }
 
 // Convert Keytrace claims to our account format
-function mapClaimsToAccounts(
-  claims: ClaimVerificationResult[],
-): KeytraceResponse["accounts"] {
-  return claims.map((claim) => ({
+function mapClaimsToAccounts(claims: ClaimVerificationResult[]): KeytraceResponse['accounts'] {
+  return claims.map(claim => ({
     platform: mapClaimTypeToPlatform(claim.type),
     username: claim.identity.subject,
     displayName: claim.identity.displayName || claim.identity.subject,
@@ -70,37 +61,35 @@ function mapClaimsToAccounts(
     proofMethod: mapProofMethod(claim.type),
     addedAt: claim.claim.createdAt,
     lastCheckedAt:
-      getOptionalClaimField(claim, "lastVerifiedAt") ||
+      getOptionalClaimField(claim, 'lastVerifiedAt') ||
       claim.claim.retractedAt ||
       claim.claim.createdAt,
     failureReason: claim.error || undefined,
-  }));
+  }))
 }
 
 type KeytraceFetchResult =
-  | { kind: "success"; data: KeytraceResponse }
-  | { kind: "no-claims" }
-  | { kind: "error"; error: unknown };
+  | { kind: 'success'; data: KeytraceResponse }
+  | { kind: 'no-claims' }
+  | { kind: 'error'; error: unknown }
 
 // Fetch real Keytrace profile data
-async function fetchKeytraceProfile(
-  domain: string,
-): Promise<KeytraceFetchResult> {
+async function fetchKeytraceProfile(domain: string): Promise<KeytraceFetchResult> {
   try {
-    const result = await getClaimsForHandle(domain);
+    const result = await getClaimsForHandle(domain)
 
     if (!result.claims || result.claims.length === 0) {
-      return { kind: "no-claims" };
+      return { kind: 'no-claims' }
     }
 
     // Build profile from first claim's identity (they all belong to the same DID)
-    const firstClaim = result.claims[0];
+    const firstClaim = result.claims[0]
     if (!firstClaim) {
-      return { kind: "no-claims" };
+      return { kind: 'no-claims' }
     }
 
     return {
-      kind: "success",
+      kind: 'success',
       data: {
         profile: {
           name: firstClaim.identity.displayName || domainToDisplayName(domain),
@@ -111,33 +100,33 @@ async function fetchKeytraceProfile(
         },
         accounts: mapClaimsToAccounts(result.claims),
       },
-    };
+    }
   } catch (error) {
-    console.error("Failed to fetch Keytrace profile:", error);
-    return { kind: "error", error };
+    console.error('Failed to fetch Keytrace profile:', error)
+    return { kind: 'error', error }
   }
 }
 
-export default defineEventHandler(async (event) => {
-  const domain = getRouterParam(event, "domain")?.trim().toLowerCase();
+export default defineEventHandler(async event => {
+  const domain = getRouterParam(event, 'domain')?.trim().toLowerCase()
   if (!domain) {
     throw createError({
       statusCode: 400,
-      message: "Domain is required",
-    });
+      message: 'Domain is required',
+    })
   }
 
   // Try to fetch real Keytrace data
-  const keytraceData = await fetchKeytraceProfile(domain);
+  const keytraceData = await fetchKeytraceProfile(domain)
 
-  if (keytraceData.kind === "success") {
-    return keytraceData.data;
+  if (keytraceData.kind === 'success') {
+    return keytraceData.data
   }
 
-  if (keytraceData.kind === "no-claims") {
-    return buildFallbackProfile(domain);
+  if (keytraceData.kind === 'no-claims') {
+    return buildFallbackProfile(domain)
   }
 
   // If Keytrace is unavailable and mock mode isn't allowed, return a neutral profile.
-  return buildServiceUnavailableProfile(domain);
-});
+  return buildServiceUnavailableProfile(domain)
+})
diff --git a/server/utils/keytrace.ts b/server/utils/keytrace.ts
index 5f8491afd4..4448994538 100644
--- a/server/utils/keytrace.ts
+++ b/server/utils/keytrace.ts
@@ -1,93 +1,93 @@
-import type { ClaimVerificationResult } from "@keytrace/claims";
-import type { KeytraceVerificationStatus } from "#shared/types/keytrace";
+import type { ClaimVerificationResult } from '@keytrace/claims'
+import type { KeytraceVerificationStatus } from '#shared/types/keytrace'
 
-const STALE_THRESHOLD_DAYS = 30;
+const STALE_THRESHOLD_DAYS = 30
 
 const platformToClaimTypeMap: Record<string, string> = {
-  github: "github",
-  dns: "dns",
-  mastodon: "activitypub",
-  bluesky: "bsky",
-  npm: "npm",
-  tangled: "tangled",
-  pgp: "pgp",
-  twitter: "twitter",
-  linkedin: "linkedin",
-  instagram: "instagram",
-  reddit: "reddit",
-  hackernews: "hackernews",
-  orcid: "orcid",
-  itchio: "itchio",
-  discord: "discord",
-  steam: "steam",
-};
+  github: 'github',
+  dns: 'dns',
+  mastodon: 'activitypub',
+  bluesky: 'bsky',
+  npm: 'npm',
+  tangled: 'tangled',
+  pgp: 'pgp',
+  twitter: 'twitter',
+  linkedin: 'linkedin',
+  instagram: 'instagram',
+  reddit: 'reddit',
+  hackernews: 'hackernews',
+  orcid: 'orcid',
+  itchio: 'itchio',
+  discord: 'discord',
+  steam: 'steam',
+}
 
 const claimTypeToPlatformMap: Record<string, string> = {
-  github: "github",
-  dns: "dns",
-  activitypub: "mastodon",
-  bsky: "bluesky",
-  npm: "npm",
-  tangled: "tangled",
-  pgp: "pgp",
-  twitter: "twitter",
-  linkedin: "linkedin",
-  instagram: "instagram",
-  reddit: "reddit",
-  hackernews: "hackernews",
-  orcid: "orcid",
-  itchio: "itchio",
-  discord: "discord",
-  steam: "steam",
-};
+  github: 'github',
+  dns: 'dns',
+  activitypub: 'mastodon',
+  bsky: 'bluesky',
+  npm: 'npm',
+  tangled: 'tangled',
+  pgp: 'pgp',
+  twitter: 'twitter',
+  linkedin: 'linkedin',
+  instagram: 'instagram',
+  reddit: 'reddit',
+  hackernews: 'hackernews',
+  orcid: 'orcid',
+  itchio: 'itchio',
+  discord: 'discord',
+  steam: 'steam',
+}
 
 export function mapPlatformToClaimType(platform: string): string {
-  return platformToClaimTypeMap[platform] || platform;
+  return platformToClaimTypeMap[platform] || platform
 }
 
 export function mapClaimTypeToPlatform(type: string): string {
-  return claimTypeToPlatformMap[type] || type;
+  return claimTypeToPlatformMap[type] || type
 }
 
 export function getOptionalClaimField(
   claim: ClaimVerificationResult,
   key: string,
 ): string | undefined {
-  const rawClaim = claim.claim as unknown as Record<string, unknown>;
-  const value = rawClaim[key];
-  return typeof value === "string" ? value : undefined;
+  const rawClaim = claim.claim as unknown as Record<string, unknown>
+  const value = rawClaim[key]
+  return typeof value === 'string' ? value : undefined
 }
 
 export function isStaleIsoDate(isoDate: string | undefined): boolean {
   if (!isoDate) {
-    return false;
+    return false
   }
 
-  const timestamp = Date.parse(isoDate);
+  const timestamp = Date.parse(isoDate)
   if (Number.isNaN(timestamp)) {
-    return false;
+    return false
   }
 
-  return Date.now() - timestamp > STALE_THRESHOLD_DAYS * 24 * 60 * 60 * 1000;
+  return Date.now() - timestamp > STALE_THRESHOLD_DAYS * 24 * 60 * 60 * 1000
 }
 
 export function mapKeytraceVerificationStatus(
   claim: ClaimVerificationResult,
 ): KeytraceVerificationStatus {
-  const rawStatus = getOptionalClaimField(claim, "status");
-  const lastVerifiedAt = getOptionalClaimField(claim, "lastVerifiedAt");
+  const rawStatus = getOptionalClaimField(claim, 'status')
+  const lastVerifiedAt = getOptionalClaimField(claim, 'lastVerifiedAt')
 
-  if (rawStatus === "failed" || rawStatus === "retracted") {
-    return "failed";
+  if (rawStatus === 'failed' || rawStatus === 'retracted') {
+    return 'failed'
   }
 
-  if (rawStatus === "verified" || claim.verified) {
-    return isStaleIsoDate(lastVerifiedAt) ? "stale" : "verified";
+  if (rawStatus === 'verified' || claim.verified) {
+    return isStaleIsoDate(lastVerifiedAt) ? 'stale' : 'verified'
   }
 
   if (claim.error) {
-    return "failed";
+    return 'failed'
   }
 
-  return "unverified";
+  return 'unverified'
 }

From c7717a5142ed0d41816f75e1ab54bb01db2e4f31 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 24 Apr 2026 17:10:46 +0000
Subject: [PATCH 15/28] [autofix.ci] apply automated fixes

---
 server/api/keytrace/reverify.post.ts | 88 ++++++++++++----------------
 1 file changed, 38 insertions(+), 50 deletions(-)

diff --git a/server/api/keytrace/reverify.post.ts b/server/api/keytrace/reverify.post.ts
index deae1fd0ab..b46a4fca08 100644
--- a/server/api/keytrace/reverify.post.ts
+++ b/server/api/keytrace/reverify.post.ts
@@ -1,27 +1,17 @@
-import {
-  getClaimsForHandle,
-  type ClaimVerificationResult,
-} from "@keytrace/claims";
-import type {
-  KeytraceReverifyRequest,
-  KeytraceReverifyResponse,
-} from "#shared/types/keytrace";
+import { getClaimsForHandle, type ClaimVerificationResult } from '@keytrace/claims'
+import type { KeytraceReverifyRequest, KeytraceReverifyResponse } from '#shared/types/keytrace'
 import {
   getOptionalClaimField,
   mapPlatformToClaimType,
   mapKeytraceVerificationStatus,
-} from "#server/utils/keytrace";
+} from '#server/utils/keytrace'
 
-function mapReverifyStatus(
-  claim: ClaimVerificationResult,
-): KeytraceReverifyResponse["status"] {
-  return mapKeytraceVerificationStatus(claim);
+function mapReverifyStatus(claim: ClaimVerificationResult): KeytraceReverifyResponse['status'] {
+  return mapKeytraceVerificationStatus(claim)
 }
 
 function getReverifyLastCheckedAt(claim: ClaimVerificationResult): string {
-  return (
-    getOptionalClaimField(claim, "lastVerifiedAt") || claim.claim.createdAt
-  );
+  return getOptionalClaimField(claim, 'lastVerifiedAt') || claim.claim.createdAt
 }
 
 function matchesAccount(
@@ -31,75 +21,73 @@ function matchesAccount(
   url?: string,
 ): boolean {
   if (claim.type !== claimType) {
-    return false;
+    return false
   }
 
-  const normalizedSubject = claim.identity.subject.toLowerCase();
-  const normalizedUsername = username.toLowerCase();
+  const normalizedSubject = claim.identity.subject.toLowerCase()
+  const normalizedUsername = username.toLowerCase()
   if (normalizedSubject === normalizedUsername) {
-    return true;
+    return true
   }
 
-  const profileUrl = (claim.identity.profileUrl || "").toLowerCase();
-  const normalizedUrl = (url || "").toLowerCase();
+  const profileUrl = (claim.identity.profileUrl || '').toLowerCase()
+  const normalizedUrl = (url || '').toLowerCase()
   if (normalizedUrl && profileUrl && profileUrl === normalizedUrl) {
-    return true;
+    return true
   }
 
-  return false;
+  return false
 }
 
-export default defineEventHandler(async (event) => {
-  const body = await readBody<KeytraceReverifyRequest>(event);
+export default defineEventHandler(async event => {
+  const body = await readBody<KeytraceReverifyRequest>(event)
 
-  const identity = body?.identity?.trim().toLowerCase();
-  const platform = body?.platform?.trim().toLowerCase();
-  const username = body?.username?.trim();
+  const identity = body?.identity?.trim().toLowerCase()
+  const platform = body?.platform?.trim().toLowerCase()
+  const username = body?.username?.trim()
 
   if (!identity || !platform || !username) {
     throw createError({
       statusCode: 400,
-      message: "identity, platform and username are required",
-    });
+      message: 'identity, platform and username are required',
+    })
   }
 
   try {
-    const result = await getClaimsForHandle(identity);
-    const claimType = mapPlatformToClaimType(platform);
-    const matchedClaim = result.claims.find((claim) =>
+    const result = await getClaimsForHandle(identity)
+    const claimType = mapPlatformToClaimType(platform)
+    const matchedClaim = result.claims.find(claim =>
       matchesAccount(claim, claimType, username, body?.url),
-    );
+    )
 
     if (!matchedClaim) {
       return {
-        status: "unverified",
+        status: 'unverified',
         lastCheckedAt: new Date().toISOString(),
-        failureReason: "No matching Keytrace claim found for this account.",
-      };
+        failureReason: 'No matching Keytrace claim found for this account.',
+      }
     }
 
     const response: KeytraceReverifyResponse = {
       status: mapReverifyStatus(matchedClaim),
       lastCheckedAt: getReverifyLastCheckedAt(matchedClaim),
       failureReason: matchedClaim.error || undefined,
-    };
+    }
 
     if (matchedClaim.claim.retractedAt) {
-      response.status = "unverified";
-      response.retractedAt = matchedClaim.claim.retractedAt;
-      response.failureReason =
-        response.failureReason || "Keytrace claim was retracted.";
+      response.status = 'unverified'
+      response.retractedAt = matchedClaim.claim.retractedAt
+      response.failureReason = response.failureReason || 'Keytrace claim was retracted.'
     }
 
-    return response;
+    return response
   } catch (error) {
-    console.error("[keytrace] reverify failed", error);
+    console.error('[keytrace] reverify failed', error)
 
     return {
-      status: "unverified",
+      status: 'unverified',
       lastCheckedAt: new Date().toISOString(),
-      failureReason:
-        "Keytrace is temporarily unavailable. Please try again shortly.",
-    };
+      failureReason: 'Keytrace is temporarily unavailable. Please try again shortly.',
+    }
   }
-});
+})

From 333db1e8e59e1f98605d8e3e8b141d4b85e892c6 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Sun, 26 Apr 2026 20:22:57 +0530
Subject: [PATCH 16/28] fix: remove this explanation and undo FacetSelector
 component changes

---
 app/components/Compare/FacetSelector.vue | 27 ++++++++++++------------
 app/pages/profile/[identity]/index.vue   |  1 -
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index da093c47f3..cfcaaa23fb 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -101,32 +101,31 @@ function deselectAllFacet(category: string) {
         :aria-labelledby="`facet-category-label-${category}`"
         data-facet-category-facets
       >
-        <button
+        <ButtonBase
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
+          size="sm"
           role="checkbox"
-          :aria-checked="isFacetSelected(facet.id)"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
           :disabled="facet.comingSoon"
-          class="inline-flex items-center gap-1 px-1.5 rounded border transition-colors text-fg-subtle bg-bg-subtle border-border-subtle hover:(text-fg-muted border-border) aria-checked:(text-fg-muted bg-fg/10 border-fg/20 hover:(bg-fg/20 text-fg/50)) focus-visible:(outline outline-accent/70)"
-          :class="
+          :aria-checked="isFacetSelected(facet.id)"
+          :aria-label="facet.label"
+          class="gap-1 px-1.5 rounded transition-colors text-fg-subtle bg-bg-subtle border-border-subtle enabled:hover:(text-fg-muted border-border) aria-checked:(text-fg-muted bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50)) focus-visible:outline-accent/70 disabled:(text-fg-subtle/50 bg-bg-subtle border-border-subtle)"
+          @click="!facet.comingSoon && toggleFacet(facet.id)"
+          :classicon="
             facet.comingSoon
-              ? 'cursor-not-allowed text-fg-subtle/50 bg-bg-subtle border-border-subtle hover:(text-fg-subtle/50 border-border-subtle)'
-              : 'cursor-pointer'
+              ? undefined
+              : isFacetSelected(facet.id)
+                ? 'i-lucide:check'
+                : 'i-lucide:plus'
           "
-          @click="toggleFacet(facet.id)"
         >
-          <span
-            v-if="!facet.comingSoon"
-            aria-hidden="true"
-            :class="isFacetSelected(facet.id) ? 'i-lucide:check' : 'i-lucide:plus'"
-          />
           {{ facet.label }}
           <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
-        </button>
+        </ButtonBase>
       </div>
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/app/pages/profile/[identity]/index.vue b/app/pages/profile/[identity]/index.vue
index 84b35cda18..805a7d1c37 100644
--- a/app/pages/profile/[identity]/index.vue
+++ b/app/pages/profile/[identity]/index.vue
@@ -257,7 +257,6 @@ defineOgImage(
           {{ $t('profile.likes') }}
           <span v-if="likes">({{ likes.records?.length ?? 0 }})</span>
         </h2>
-        <p class="text-fg-muted text-sm">{{ $t('profile.public_interests_description') }}</p>
       </div>
       <div v-if="status === 'pending'" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <SkeletonBlock v-for="i in 4" :key="i" class="h-16 rounded-lg" />

From 4af28eeb63c76d61ffacfc495d3c0bb00c0e3eee Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Sun, 26 Apr 2026 20:23:29 +0530
Subject: [PATCH 17/28] fix: format issue

---
 app/components/Compare/FacetSelector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index cfcaaa23fb..7ce289779c 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -128,4 +128,4 @@ function deselectAllFacet(category: string) {
       </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>

From da82dca9a97e601573453630429c301cd2fb84dd Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Sun, 26 Apr 2026 20:43:41 +0530
Subject: [PATCH 18/28] bug: removed unuse translation

---
 i18n/locales/ar-EG.json      | 1 -
 i18n/locales/ar.json         | 1 -
 i18n/locales/az-AZ.json      | 1 -
 i18n/locales/bg-BG.json      | 1 -
 i18n/locales/bn-IN.json      | 1 -
 i18n/locales/cs-CZ.json      | 1 -
 i18n/locales/de-AT.json      | 1 -
 i18n/locales/de-DE.json      | 1 -
 i18n/locales/de.json         | 1 -
 i18n/locales/en-GB.json      | 1 -
 i18n/locales/en.json         | 1 -
 i18n/locales/es-419.json     | 1 -
 i18n/locales/es.json         | 1 -
 i18n/locales/fr-FR.json      | 1 -
 i18n/locales/hi-IN.json      | 1 -
 i18n/locales/hu-HU.json      | 1 -
 i18n/locales/id-ID.json      | 1 -
 i18n/locales/it-IT.json      | 1 -
 i18n/locales/ja-JP.json      | 1 -
 i18n/locales/kn-IN.json      | 1 -
 i18n/locales/mr-IN.json      | 1 -
 i18n/locales/nb-NO.json      | 1 -
 i18n/locales/ne-NP.json      | 1 -
 i18n/locales/nl.json         | 1 -
 i18n/locales/pl-PL.json      | 1 -
 i18n/locales/pt-BR.json      | 1 -
 i18n/locales/ru-RU.json      | 1 -
 i18n/locales/sr-Latn-RS.json | 1 -
 i18n/locales/ta-IN.json      | 1 -
 i18n/locales/te-IN.json      | 1 -
 i18n/locales/tr-TR.json      | 1 -
 i18n/locales/uk-UA.json      | 1 -
 i18n/locales/vi-VN.json      | 1 -
 i18n/locales/zh-CN.json      | 1 -
 i18n/locales/zh-TW.json      | 1 -
 i18n/schema.json             | 3 ---
 36 files changed, 38 deletions(-)

diff --git a/i18n/locales/ar-EG.json b/i18n/locales/ar-EG.json
index 19a25e964e..b072fd4842 100644
--- a/i18n/locales/ar-EG.json
+++ b/i18n/locales/ar-EG.json
@@ -113,7 +113,6 @@
       "share_button": "دعوة صديق",
       "compose_text": "جرّب npmx، المتصفح السريع لحزم npm!"
     },
-    "public_interests_description": "اهتمامات الحزم العامة وإشارات النشاط.",
     "likes_error": "تعذّر تحميل الحزم المُعجَب بها.",
     "likes_empty": "لا توجد حزم مُعجَب بها بعد."
   },
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
index ad72cb012e..31bc7749cf 100644
--- a/i18n/locales/ar.json
+++ b/i18n/locales/ar.json
@@ -156,7 +156,6 @@
   },
   "profile": {
     "invite": {},
-    "public_interests_description": "اهتمامات الحزم العامة وإشارات النشاط.",
     "likes_error": "تعذر تحميل الحزم المفضلة.",
     "likes_empty": "لا توجد حزم مفضلة بعد."
   },
diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
index b2d7fc3897..da00b06ba9 100644
--- a/i18n/locales/az-AZ.json
+++ b/i18n/locales/az-AZ.json
@@ -214,7 +214,6 @@
       "share_button": "Bluesky-da paylaş",
       "compose_text": "Salam {'@'}{handle}! npmx.dev-i yoxlamısan? Bu, npm reyestri üçün sürətli, müasir və açıq mənbəli brauzerdir.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Açıq paket maraqları və fəaliyyət siqnalları.",
     "likes_error": "Bəyənilən paketlər yüklənə bilmədi.",
     "likes_empty": "Hələ bəyənilən paket yoxdur."
   },
diff --git a/i18n/locales/bg-BG.json b/i18n/locales/bg-BG.json
index 03ec65790c..467fced6b9 100644
--- a/i18n/locales/bg-BG.json
+++ b/i18n/locales/bg-BG.json
@@ -177,7 +177,6 @@
       "share_button": "Споделете в Bluesky",
       "compose_text": "Здравей {'@'}{handle}! Проверил ли си npmx.dev? Това е браузър за npm регистъра - бърз, модерен и с отворен код.\\nhttps://npmx.dev"
     },
-    "public_interests_description": "Публични интереси към пакети и сигнали за активност.",
     "likes_error": "Неуспешно зареждане на харесани пакети.",
     "likes_empty": "Все още няма харесани пакети."
   },
diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
index 883027ec71..33729ed174 100644
--- a/i18n/locales/bn-IN.json
+++ b/i18n/locales/bn-IN.json
@@ -122,7 +122,6 @@
   },
   "profile": {
     "invite": {},
-    "public_interests_description": "পাবলিক প্যাকেজ আগ্রহ এবং কার্যকলাপ সংকেত।",
     "likes_error": "পছন্দের প্যাকেজগুলি লোড করা যায়নি।",
     "likes_empty": "এখনও কোনো পছন্দের প্যাকেজ নেই।"
   },
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index 67bea763db..91840b95d9 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -359,7 +359,6 @@
       "share_button": "Sdílet na Bluesky",
       "compose_text": "Ahoj {'@'}{handle}! Viděl jsi už npmx.dev? Je to prohlížeč pro npm registr, který je rychlý, moderní a open-source.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Veřejné zájmy o balíčky a signály aktivity.",
     "likes_error": "Nepodařilo se načíst oblíbené balíčky.",
     "likes_empty": "Zatím žádné oblíbené balíčky."
   },
diff --git a/i18n/locales/de-AT.json b/i18n/locales/de-AT.json
index 0c9a9790a7..93a3bd30ce 100644
--- a/i18n/locales/de-AT.json
+++ b/i18n/locales/de-AT.json
@@ -23,7 +23,6 @@
     "instant_search_advisory": "Die Schnellsuche sendet bei jedem Tastendruck eine Anfrage."
   },
   "profile": {
-    "public_interests_description": "Öffentliche Paketinteressen und Aktivitätssignale.",
     "likes_error": "Gelikte Pakete konnten nicht geladen werden.",
     "likes_empty": "Noch keine gelikten Pakete.",
     "avatar_alt": "Profilavatar",
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index f952d62314..cc07f7170e 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -1,7 +1,6 @@
 {
   "$schema": "../schema.json",
   "profile": {
-    "public_interests_description": "Öffentliche Paketinteressen und Aktivitätssignale.",
     "likes_error": "Gelikte Pakete konnten nicht geladen werden.",
     "likes_empty": "Noch keine gelikten Pakete.",
     "avatar_alt": "Profilavatar",
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 79c38e2bbd..e980559ea2 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -358,7 +358,6 @@
       "share_button": "Auf Bluesky teilen",
       "compose_text": "Hey {'@'}{handle}! Hast du schon npmx.dev ausprobiert? Es ist ein Browser für die npm Registry, der schnell, modern und Open-Source ist.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Öffentliche Paketinteressen und Aktivitätssignale.",
     "likes_error": "Gelikte Pakete konnten nicht geladen werden.",
     "likes_empty": "Noch keine gelikten Pakete.",
     "avatar_alt": "Profilavatar",
diff --git a/i18n/locales/en-GB.json b/i18n/locales/en-GB.json
index 127ed8f8ef..09c69c0e03 100644
--- a/i18n/locales/en-GB.json
+++ b/i18n/locales/en-GB.json
@@ -47,7 +47,6 @@
     }
   },
   "profile": {
-    "public_interests_description": "Public package interests and activity signals.",
     "likes_error": "Could not load liked packages.",
     "likes_empty": "No liked packages yet."
   }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 2beaa7051b..8e4c1f6deb 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -354,7 +354,6 @@
     "website": "Website",
     "website_placeholder": "https://example.com",
     "likes": "Likes",
-    "public_interests_description": "Public package interests and activity signals.",
     "likes_error": "Could not load liked packages.",
     "likes_empty": "No liked packages yet.",
     "seo_title": "{handle} - npmx",
diff --git a/i18n/locales/es-419.json b/i18n/locales/es-419.json
index ad0eae137c..fce9151ed6 100644
--- a/i18n/locales/es-419.json
+++ b/i18n/locales/es-419.json
@@ -44,7 +44,6 @@
       "message": "Parece que aún no usa npmx. ¿Quieres contarle?",
       "compose_text": "¡Hola {'@'}{handle}! ¿Has probado ya npmx.dev? Es un navegador para el registro de npm rápido, moderno y de código abierto.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Intereses de paquetes públicos y señales de actividad.",
     "likes_error": "No se pudieron cargar los paquetes favoritos.",
     "likes_empty": "Aún no hay paquetes favoritos."
   },
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index ddce4c624b..1586180d9c 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -244,7 +244,6 @@
       "share_button": "Compartir en Bluesky",
       "compose_text": "¡Hola {'@'}{handle}! ¿Has probado ya npmx.dev? Es un navegador para el registro de npm rápido, moderno y de código abierto.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Intereses públicos en paquetes y señales de actividad.",
     "likes_error": "No se pudieron cargar los paquetes que te gustan.",
     "likes_empty": "Aún no hay paquetes que te gusten."
   },
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 2c814d635a..448df305b1 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -360,7 +360,6 @@
       "share_button": "Partager sur Bluesky",
       "compose_text": "Salut {'@'}{handle} ! As-tu déjà testé npmx.dev ? C'est un navigateur pour le registre npm : rapide, moderne et open source.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Intérêts publics pour les paquets et signaux d'activité.",
     "likes_error": "Impossible de charger les paquets aimés.",
     "likes_empty": "Aucun paquet aimé pour le moment."
   },
diff --git a/i18n/locales/hi-IN.json b/i18n/locales/hi-IN.json
index dff0bb6943..ba58005b1e 100644
--- a/i18n/locales/hi-IN.json
+++ b/i18n/locales/hi-IN.json
@@ -229,7 +229,6 @@
   },
   "profile": {
     "invite": {},
-    "public_interests_description": "सार्वजनिक पैकेज रुचियाँ और गतिविधि संकेत।",
     "likes_error": "पसंद किए गए पैकेज लोड नहीं हो सके।",
     "likes_empty": "अभी तक कोई पसंद किए गए पैकेज नहीं।"
   },
diff --git a/i18n/locales/hu-HU.json b/i18n/locales/hu-HU.json
index f7eb646ef1..f2a2bb74ab 100644
--- a/i18n/locales/hu-HU.json
+++ b/i18n/locales/hu-HU.json
@@ -177,7 +177,6 @@
       "share_button": "Megosztás a Bluesky-on",
       "compose_text": "Halló {'@'}{handle}! Már próbáltad az npmx.dev-et? Egy gyors, modern és nyílt forráskódú böngésző az npm regiszterhez.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Nyilvános csomagérdeklődések és aktivitási jelek.",
     "likes_error": "Nem sikerült betölteni a kedvelt csomagokat.",
     "likes_empty": "Még nincsenek kedvelt csomagok."
   },
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index 73dcae1fdf..b96137c96c 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -244,7 +244,6 @@
       "share_button": "Bagikan di Bluesky",
       "compose_text": "Hai {'@'}{handle}! Sudah pernah mencoba npmx.dev? Ini adalah browser untuk npm registry yang cepat, modern, dan open-source.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Minat paket publik dan sinyal aktivitas.",
     "likes_error": "Gagal memuat paket yang disukai.",
     "likes_empty": "Belum ada paket yang disukai."
   },
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
index dfbb4c95d1..da169b7504 100644
--- a/i18n/locales/it-IT.json
+++ b/i18n/locales/it-IT.json
@@ -156,7 +156,6 @@
   },
   "profile": {
     "invite": {},
-    "public_interests_description": "Interessi dei pacchetti pubblici e segnali di attività.",
     "likes_error": "Impossibile caricare i pacchetti preferiti.",
     "likes_empty": "Nessun pacchetto preferito ancora."
   },
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index 69ba897b2c..79f498916c 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -224,7 +224,6 @@
       "share_button": "Blueskyで共有",
       "compose_text": "{'@'}{handle} さん、npmx.devはもうチェックしましたか？ 高速でモダンなオープンソースのnpmレジストリブラウザです。\nhttps://npmx.dev"
     },
-    "public_interests_description": "公開パッケージの関心事とアクティビティシグナル。",
     "likes_error": "いいねしたパッケージを読み込めませんでした。",
     "likes_empty": "いいねしたパッケージはまだありません。"
   },
diff --git a/i18n/locales/kn-IN.json b/i18n/locales/kn-IN.json
index d8d81eb9e7..084628b057 100644
--- a/i18n/locales/kn-IN.json
+++ b/i18n/locales/kn-IN.json
@@ -123,7 +123,6 @@
   },
   "profile": {
     "invite": {},
-    "public_interests_description": "ಸಾರ್ವಜನಿಕ ಪ್ಯಾಕೇಜ್ ಆಸಕ್ತಿಗಳು ಮತ್ತು ಚಟುವಟಿಕೆ ಸಂಕೇತಗಳು.",
     "likes_error": "ಇಷ್ಟಪಟ್ಟ ಪ್ಯಾಕೇಜುಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲ.",
     "likes_empty": "ಇನ್ನೂ ಇಷ್ಟಪಟ್ಟ ಪ್ಯಾಕೇಜುಗಳಿಲ್ಲ."
   },
diff --git a/i18n/locales/mr-IN.json b/i18n/locales/mr-IN.json
index ed80793975..3f7a802b7d 100644
--- a/i18n/locales/mr-IN.json
+++ b/i18n/locales/mr-IN.json
@@ -213,7 +213,6 @@
   },
   "profile": {
     "invite": {},
-    "public_interests_description": "सार्वजनिक पॅकेज आवडी आणि क्रियाकलाप संकेत.",
     "likes_error": "आवडलेल्या पॅकेजेस लोड करता आल्या नाहीत.",
     "likes_empty": "अद्याप आवडलेली कोणतीही पॅकेजेस नाहीत."
   },
diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
index 1b21b3d59f..79f07386ba 100644
--- a/i18n/locales/nb-NO.json
+++ b/i18n/locales/nb-NO.json
@@ -358,7 +358,6 @@
       "share_button": "Del på Bluesky",
       "compose_text": "Hei {'@'}{handle}! Har du sjekket ut npmx.dev ennå? Det er en leser for npm-registeret som er rask, moderne og åpen kildekode.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Offentlige pakkeinteresser og aktivitetssignaler.",
     "likes_error": "Kunne ikke laste likte pakker.",
     "likes_empty": "Ingen likte pakker ennå."
   },
diff --git a/i18n/locales/ne-NP.json b/i18n/locales/ne-NP.json
index c348e2fe17..d76a7e7235 100644
--- a/i18n/locales/ne-NP.json
+++ b/i18n/locales/ne-NP.json
@@ -123,7 +123,6 @@
   },
   "profile": {
     "invite": {},
-    "public_interests_description": "सार्वजनिक प्याकेज रुचिहरू र गतिविधि संकेतहरू।",
     "likes_error": "मनपरेका प्याकेजहरू लोड गर्न सकिएन।",
     "likes_empty": "अहिले सम्म मनपरेका प्याकेजहरू छैनन्।"
   },
diff --git a/i18n/locales/nl.json b/i18n/locales/nl.json
index 4b820c60c9..dc88b57c84 100644
--- a/i18n/locales/nl.json
+++ b/i18n/locales/nl.json
@@ -358,7 +358,6 @@
       "share_button": "Deel op Bluesky",
       "compose_text": "Hallo {'@'}{handle}! Hebt u npmx.dev al bekeken? Het is een browser voor het npm register die snel, modern en open source is.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Openbare pakketinteresses en activiteitssignalen.",
     "likes_error": "Kon gelikete pakketten niet laden.",
     "likes_empty": "Nog geen gelikete pakketten."
   },
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index a009daea5b..f031246b0e 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -224,7 +224,6 @@
       "share_button": "Podziel się na Bluesky",
       "compose_text": "Hej {'@'}{handle}! Czy znasz już npmx.dev? To szybka, nowoczesna przeglądarka rejestru npm z otwartym kodem źródłowym.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Publiczne zainteresowania pakietami i sygnały aktywności.",
     "likes_error": "Nie udało się wczytać polubionych pakietów.",
     "likes_empty": "Brak polubionych pakietów."
   },
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index 6e0e05ec30..419d408722 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -355,7 +355,6 @@
       "share_button": "Compartilhar no Bluesky",
       "compose_text": "Olá, {'@'}{handle}! Você já conferiu npmx.dev? É um navegador para o registro npm rápido, moderno e de código aberto.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Interesses públicos de pacotes e sinais de atividade.",
     "likes_error": "Não foi possível carregar os pacotes curtidos.",
     "likes_empty": "Nenhum pacote curtido ainda."
   },
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 55bbb22597..4a9776d06c 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -360,7 +360,6 @@
       "share_button": "Поделиться в Bluesky",
       "compose_text": "Привет, {'@'}{handle}! Уже смотрел npmx.dev? Это быстрый, современный и open-source браузер для реестра npm.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Публичные интересы к пакетам и сигналы активности.",
     "likes_error": "Не удалось загрузить понравившиеся пакеты.",
     "likes_empty": "Понравившихся пакетов пока нет."
   },
diff --git a/i18n/locales/sr-Latn-RS.json b/i18n/locales/sr-Latn-RS.json
index 299f8e922d..1460ee31af 100644
--- a/i18n/locales/sr-Latn-RS.json
+++ b/i18n/locales/sr-Latn-RS.json
@@ -244,7 +244,6 @@
       "share_button": "Podelite na Bluesky-u",
       "compose_text": "Hej {'@'}{handle}! Da li ste već pogledali npmx.dev? To je pretraživač za npm registar koji je brz, moderan i otvorenog koda.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Javna interesovanja za pakete i signali aktivnosti.",
     "likes_error": "Nije moguće učitati omiljene pakete.",
     "likes_empty": "Još nema omiljenih paketa."
   },
diff --git a/i18n/locales/ta-IN.json b/i18n/locales/ta-IN.json
index fd8b7cdbf1..fd5231ece7 100644
--- a/i18n/locales/ta-IN.json
+++ b/i18n/locales/ta-IN.json
@@ -155,7 +155,6 @@
   },
   "profile": {
     "invite": {},
-    "public_interests_description": "பொதுப் தொகுப்பு விருப்பங்கள் மற்றும் செயல்பாட்டு சிக்னல்கள்.",
     "likes_error": "விரும்பிய தொகுப்புகளை ஏற்ற முடியவில்லை.",
     "likes_empty": "இன்னும் விரும்பிய தொகுப்புகள் இல்லை."
   },
diff --git a/i18n/locales/te-IN.json b/i18n/locales/te-IN.json
index 3b1fd100ae..5686a70a35 100644
--- a/i18n/locales/te-IN.json
+++ b/i18n/locales/te-IN.json
@@ -123,7 +123,6 @@
   },
   "profile": {
     "invite": {},
-    "public_interests_description": "Public package interests and activity signals.",
     "likes_error": "Could not load liked packages.",
     "likes_empty": "No liked packages yet."
   },
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index 5508d468d3..630f8b6e31 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -214,7 +214,6 @@
       "share_button": "Paylaş",
       "compose_text": "npmx'i deneyin - npm için daha iyi bir paket tarayıcısı: {url}"
     },
-    "public_interests_description": "Genel paket ilgi alanları ve aktivite sinyalleri.",
     "likes_error": "Beğenilen paketler yüklenemedi.",
     "likes_empty": "Henüz beğenilen paket yok."
   },
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index cf78807113..1cc61049bb 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -244,7 +244,6 @@
       "share_button": "Поділитися в Bluesky",
       "compose_text": "Привіт, {'@'}{handle}! Ти вже перевірив npmx.dev? Це швидкий сучасний браузер для реєстру npm з відкритим кодом.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Публічні інтереси до пакетів та сигнали активності.",
     "likes_error": "Не вдалося завантажити вподобані пакети.",
     "likes_empty": "Вподобаних пакетів поки немає."
   },
diff --git a/i18n/locales/vi-VN.json b/i18n/locales/vi-VN.json
index 73950927c7..461d32fb43 100644
--- a/i18n/locales/vi-VN.json
+++ b/i18n/locales/vi-VN.json
@@ -244,7 +244,6 @@
       "share_button": "Chia sẻ trên Bluesky",
       "compose_text": "Chào {'@'}{handle}! Bạn đã thử npmx.dev chưa? Đây là trình duyệt cho npm registry, nhanh, hiện đại và mã nguồn mở.\nhttps://npmx.dev"
     },
-    "public_interests_description": "Sở thích package công khai và tín hiệu hoạt động.",
     "likes_error": "Không thể tải các package đã thích.",
     "likes_empty": "Chưa có package nào được thích."
   },
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 6854700b65..83394d1486 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -359,7 +359,6 @@
       "share_button": "分享到 Bluesky",
       "compose_text": "嗨 {'@'}{handle}！您用过 npmx.dev 吗？它是一个快速、现代且开源的 npm registry 浏览器。\nhttps://npmx.dev"
     },
-    "public_interests_description": "公开的包兴趣和活动信号。",
     "likes_error": "无法加载喜欢的包。",
     "likes_empty": "还没有喜欢的包。"
   },
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index 4b17ac1cb4..9ed82a60d4 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -357,7 +357,6 @@
       "share_button": "分享到 Bluesky",
       "compose_text": "Hey {'@'}{handle}！你用過 npmx.dev 了嗎？它是 npm Registry 的瀏覽器，快速、現代，而且是開源的。\nhttps://npmx.dev"
     },
-    "public_interests_description": "公開套件興趣與活動訊號。",
     "likes_error": "無法載入喜歡的套件。",
     "likes_empty": "目前尚無喜歡的套件。"
   },
diff --git a/i18n/schema.json b/i18n/schema.json
index 2999f84ca3..b6b1689dc9 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1066,9 +1066,6 @@
         "likes": {
           "type": "string"
         },
-        "public_interests_description": {
-          "type": "string"
-        },
         "likes_error": {
           "type": "string"
         },

From 4ceeaa5e8d9ed2a838b321ad774fc34652be6585 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Mon, 27 Apr 2026 01:22:28 +0530
Subject: [PATCH 19/28] refactor: remove ProfileHeader component and simplify
 profile loading logic

---
 app/components/ProfileHeader.vue       | 82 --------------------------
 app/pages/profile/[identity]/index.vue |  9 +--
 server/api/keytrace/[domain].ts        | 66 ++++++++++++++++-----
 3 files changed, 53 insertions(+), 104 deletions(-)
 delete mode 100644 app/components/ProfileHeader.vue

diff --git a/app/components/ProfileHeader.vue b/app/components/ProfileHeader.vue
deleted file mode 100644
index 2e1200e64b..0000000000
--- a/app/components/ProfileHeader.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import type { KeytraceProfile } from '#shared/types/keytrace'
-
-const props = defineProps<{
-  profile?: KeytraceProfile
-  loading?: boolean
-}>()
-
-const showAvatar = ref(true)
-
-const initials = computed(() => {
-  const source = props.profile?.name?.trim()
-  if (!source) {
-    return '?'
-  }
-
-  return source
-    .split(' ')
-    .map(part => part[0] ?? '')
-    .join('')
-    .slice(0, 2)
-    .toUpperCase()
-})
-
-watch(
-  () => props.profile?.avatar,
-  () => {
-    showAvatar.value = true
-  },
-)
-
-function onAvatarError() {
-  // oxlint-disable-next-line no-console -- keep avatar load failures observable during development
-  console.warn('[keytrace] profile avatar failed to load')
-  showAvatar.value = false
-}
-</script>
-
-<template>
-  <section class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6">
-    <div
-      v-if="!loading && profile?.banner"
-      class="-m-4 sm:-m-6 mb-4 sm:mb-6 h-28 sm:h-36 overflow-hidden rounded-t-lg border-b border-border"
-    >
-      <img
-        :src="profile.banner"
-        :alt="profile.name || $t('profile.unknown_profile')"
-        class="h-full w-full object-cover"
-      />
-    </div>
-
-    <div v-if="loading" class="flex items-center gap-4">
-      <SkeletonBlock class="h-16 w-16 rounded-full" />
-      <div class="flex-1 space-y-2">
-        <SkeletonBlock class="h-6 w-40 rounded" />
-        <SkeletonBlock class="h-4 w-full rounded" />
-      </div>
-    </div>
-
-    <div v-else-if="profile" class="flex items-start gap-4">
-      <div
-        class="h-16 w-16 rounded-full bg-bg-muted border border-border overflow-hidden flex items-center justify-center shrink-0"
-      >
-        <img
-          v-if="profile.avatar && showAvatar"
-          :src="profile.avatar"
-          :alt="profile.name || $t('profile.avatar_alt')"
-          class="h-full w-full object-cover"
-          @error="onAvatarError"
-        />
-        <span v-else class="font-mono text-fg-subtle" aria-hidden="true">{{ initials }}</span>
-      </div>
-
-      <div class="min-w-0">
-        <h2 class="font-mono text-xl sm:text-2xl font-medium min-w-0 break-words">
-          {{ profile.name || $t('profile.unknown_profile') }}
-        </h2>
-        <p class="mt-2 text-fg-muted min-w-0 break-words">{{ profile.description }}</p>
-      </div>
-    </div>
-  </section>
-</template>
diff --git a/app/pages/profile/[identity]/index.vue b/app/pages/profile/[identity]/index.vue
index 805a7d1c37..043d6cde62 100644
--- a/app/pages/profile/[identity]/index.vue
+++ b/app/pages/profile/[identity]/index.vue
@@ -97,11 +97,7 @@ const inviteUrl = computed(() => {
 })
 const safeProfileWebsiteUrl = computed(() => getSafeHttpUrl(profile.value.website))
 
-const {
-  profile: keytraceProfile,
-  accounts: keytraceAccounts,
-  loading: keytraceLoading,
-} = useKeytraceProfile(identity)
+const { accounts: keytraceAccounts, loading: keytraceLoading } = useKeytraceProfile(identity)
 
 useCommandPaletteContextCommands(
   computed((): CommandPaletteContextCommandInput[] => {
@@ -238,8 +234,7 @@ defineOgImage(
       </div>
     </header>
 
-    <section class="mb-8 space-y-4">
-      <ProfileHeader :profile="keytraceProfile" :loading="keytraceLoading" />
+    <section class="mb-8">
       <LinkedAccounts
         :identity="identity"
         :accounts="keytraceAccounts"
diff --git a/server/api/keytrace/[domain].ts b/server/api/keytrace/[domain].ts
index 9314910704..fabea9bd4e 100644
--- a/server/api/keytrace/[domain].ts
+++ b/server/api/keytrace/[domain].ts
@@ -5,28 +5,62 @@ import {
   mapKeytraceVerificationStatus,
   mapClaimTypeToPlatform,
 } from '#server/utils/keytrace'
+import { toProxiedImageUrl } from '#server/utils/image-proxy'
+import { getSafeHttpUrl } from '#shared/utils/url'
 
 function domainToDisplayName(domain: string): string {
   const firstSegment = domain.split('.')[0] || domain
   return firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1)
 }
 
-function buildFallbackProfile(domain: string): KeytraceResponse {
+function buildDefaultAvatarUrl(domain: string, imageProxySecret: string): string {
+  const rawFallbackAvatar = `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`
+  return toProxiedImageUrl(rawFallbackAvatar, imageProxySecret)
+}
+
+function buildSeededAvatarUrl(seed: string, imageProxySecret: string): string {
+  const rawFallbackAvatar = `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(seed)}`
+  return toProxiedImageUrl(rawFallbackAvatar, imageProxySecret)
+}
+
+function toProfileAvatarUrl(rawAvatarUrl: string | undefined, domain: string, imageProxySecret: string): string {
+  const safeAvatarUrl = getSafeHttpUrl(rawAvatarUrl)
+  if (!safeAvatarUrl) {
+    return buildDefaultAvatarUrl(domain, imageProxySecret)
+  }
+
+  return toProxiedImageUrl(safeAvatarUrl, imageProxySecret)
+}
+
+function toAccountAvatarUrl(
+  rawAvatarUrl: string | undefined,
+  imageProxySecret: string,
+  fallbackSeed: string,
+): string {
+  const safeAvatarUrl = getSafeHttpUrl(rawAvatarUrl)
+  if (!safeAvatarUrl) {
+    return buildSeededAvatarUrl(fallbackSeed, imageProxySecret)
+  }
+
+  return toProxiedImageUrl(safeAvatarUrl, imageProxySecret)
+}
+
+function buildFallbackProfile(domain: string, imageProxySecret: string): KeytraceResponse {
   return {
     profile: {
       name: `${domainToDisplayName(domain)} Developer`,
-      avatar: `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`,
+      avatar: buildDefaultAvatarUrl(domain, imageProxySecret),
       description: `No Keytrace claims found for ${domain}.`,
     },
     accounts: [],
   }
 }
 
-function buildServiceUnavailableProfile(domain: string): KeytraceResponse {
+function buildServiceUnavailableProfile(domain: string, imageProxySecret: string): KeytraceResponse {
   return {
     profile: {
       name: `${domainToDisplayName(domain)} Developer`,
-      avatar: `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`,
+      avatar: buildDefaultAvatarUrl(domain, imageProxySecret),
       description: 'Keytrace is temporarily unavailable. Please try again shortly.',
     },
     accounts: [],
@@ -50,13 +84,16 @@ function mapProofMethod(type: string): KeytraceProofMethod {
 }
 
 // Convert Keytrace claims to our account format
-function mapClaimsToAccounts(claims: ClaimVerificationResult[]): KeytraceResponse['accounts'] {
+function mapClaimsToAccounts(
+  claims: ClaimVerificationResult[],
+  imageProxySecret: string,
+): KeytraceResponse['accounts'] {
   return claims.map(claim => ({
     platform: mapClaimTypeToPlatform(claim.type),
     username: claim.identity.subject,
     displayName: claim.identity.displayName || claim.identity.subject,
-    avatar: claim.identity.avatarUrl || undefined,
-    url: claim.identity.profileUrl || undefined,
+    avatar: toAccountAvatarUrl(claim.identity.avatarUrl, imageProxySecret, claim.identity.subject),
+    url: getSafeHttpUrl(claim.identity.profileUrl) || undefined,
     status: mapKeytraceVerificationStatus(claim),
     proofMethod: mapProofMethod(claim.type),
     addedAt: claim.claim.createdAt,
@@ -74,7 +111,7 @@ type KeytraceFetchResult =
   | { kind: 'error'; error: unknown }
 
 // Fetch real Keytrace profile data
-async function fetchKeytraceProfile(domain: string): Promise<KeytraceFetchResult> {
+async function fetchKeytraceProfile(domain: string, imageProxySecret: string): Promise<KeytraceFetchResult> {
   try {
     const result = await getClaimsForHandle(domain)
 
@@ -93,12 +130,10 @@ async function fetchKeytraceProfile(domain: string): Promise<KeytraceFetchResult
       data: {
         profile: {
           name: firstClaim.identity.displayName || domainToDisplayName(domain),
-          avatar:
-            firstClaim.identity.avatarUrl ||
-            `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`,
+          avatar: toProfileAvatarUrl(firstClaim.identity.avatarUrl, domain, imageProxySecret),
           description: `Identity profile for ${domain}`,
         },
-        accounts: mapClaimsToAccounts(result.claims),
+        accounts: mapClaimsToAccounts(result.claims, imageProxySecret),
       },
     }
   } catch (error) {
@@ -108,6 +143,7 @@ async function fetchKeytraceProfile(domain: string): Promise<KeytraceFetchResult
 }
 
 export default defineEventHandler(async event => {
+  const { imageProxySecret } = useRuntimeConfig(event)
   const domain = getRouterParam(event, 'domain')?.trim().toLowerCase()
   if (!domain) {
     throw createError({
@@ -117,16 +153,16 @@ export default defineEventHandler(async event => {
   }
 
   // Try to fetch real Keytrace data
-  const keytraceData = await fetchKeytraceProfile(domain)
+  const keytraceData = await fetchKeytraceProfile(domain, imageProxySecret)
 
   if (keytraceData.kind === 'success') {
     return keytraceData.data
   }
 
   if (keytraceData.kind === 'no-claims') {
-    return buildFallbackProfile(domain)
+    return buildFallbackProfile(domain, imageProxySecret)
   }
 
   // If Keytrace is unavailable and mock mode isn't allowed, return a neutral profile.
-  return buildServiceUnavailableProfile(domain)
+  return buildServiceUnavailableProfile(domain, imageProxySecret)
 })

From 1c96b93b84f659aecf4db26088122140705316eb Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Mon, 27 Apr 2026 01:27:37 +0530
Subject: [PATCH 20/28] refactor: simplify avatar URL building and improve
 function formatting

---
 server/api/keytrace/[domain].ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/server/api/keytrace/[domain].ts b/server/api/keytrace/[domain].ts
index fabea9bd4e..3fe34ded03 100644
--- a/server/api/keytrace/[domain].ts
+++ b/server/api/keytrace/[domain].ts
@@ -14,8 +14,7 @@ function domainToDisplayName(domain: string): string {
 }
 
 function buildDefaultAvatarUrl(domain: string, imageProxySecret: string): string {
-  const rawFallbackAvatar = `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(domain)}`
-  return toProxiedImageUrl(rawFallbackAvatar, imageProxySecret)
+  return buildSeededAvatarUrl(domain, imageProxySecret)
 }
 
 function buildSeededAvatarUrl(seed: string, imageProxySecret: string): string {
@@ -23,7 +22,11 @@ function buildSeededAvatarUrl(seed: string, imageProxySecret: string): string {
   return toProxiedImageUrl(rawFallbackAvatar, imageProxySecret)
 }
 
-function toProfileAvatarUrl(rawAvatarUrl: string | undefined, domain: string, imageProxySecret: string): string {
+function toProfileAvatarUrl(
+  rawAvatarUrl: string | undefined,
+  domain: string,
+  imageProxySecret: string,
+): string {
   const safeAvatarUrl = getSafeHttpUrl(rawAvatarUrl)
   if (!safeAvatarUrl) {
     return buildDefaultAvatarUrl(domain, imageProxySecret)
@@ -56,7 +59,10 @@ function buildFallbackProfile(domain: string, imageProxySecret: string): Keytrac
   }
 }
 
-function buildServiceUnavailableProfile(domain: string, imageProxySecret: string): KeytraceResponse {
+function buildServiceUnavailableProfile(
+  domain: string,
+  imageProxySecret: string,
+): KeytraceResponse {
   return {
     profile: {
       name: `${domainToDisplayName(domain)} Developer`,
@@ -111,7 +117,10 @@ type KeytraceFetchResult =
   | { kind: 'error'; error: unknown }
 
 // Fetch real Keytrace profile data
-async function fetchKeytraceProfile(domain: string, imageProxySecret: string): Promise<KeytraceFetchResult> {
+async function fetchKeytraceProfile(
+  domain: string,
+  imageProxySecret: string,
+): Promise<KeytraceFetchResult> {
   try {
     const result = await getClaimsForHandle(domain)
 

From 45496f33cb5ae4c1c00ba9d86bb977900e124ea1 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Mon, 27 Apr 2026 01:38:56 +0530
Subject: [PATCH 21/28] refactor: remove unused ProfileHeader component and
 related accessibility tests

---
 i18n/locales/en.json   |  2 --
 test/nuxt/a11y.spec.ts | 17 -----------------
 2 files changed, 19 deletions(-)

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 8e4c1f6deb..bad836caf6 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -365,8 +365,6 @@
       "share_button": "Share on 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"
     },
-    "avatar_alt": "Profile avatar",
-    "unknown_profile": "Unknown profile",
     "linked_accounts": {
       "status": {
         "verified": "Verified",
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index c56fafd720..d483dc8996 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -273,7 +273,6 @@ import SizeIncrease from '~/components/Package/SizeIncrease.vue'
 import Likes from '~/components/Package/Likes.vue'
 import AccountItem from '~/components/AccountItem.vue'
 import LinkedAccounts from '~/components/LinkedAccounts.vue'
-import ProfileHeader from '~/components/ProfileHeader.vue'
 import type { VueUiXyDatasetItem } from 'vue-data-ui'
 
 describe('component accessibility audits', () => {
@@ -915,22 +914,6 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('ProfileHeader', () => {
-    it('should have no accessibility violations with profile data', async () => {
-      const component = await mountSuspended(ProfileHeader, {
-        props: {
-          profile: {
-            name: 'npmx Team',
-            avatar: 'https://api.dicebear.com/9.x/shapes/svg?seed=npmx',
-            description: 'Open source maintainers',
-          },
-        },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
   describe('LinkedAccounts', () => {
     it('should have no accessibility violations with account list', async () => {
       const component = await mountSuspended(LinkedAccounts, {

From 355c60090547e389f25a97ec22d29250a87df85f Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 26 Apr 2026 20:10:16 +0000
Subject: [PATCH 22/28] [autofix.ci] apply automated fixes

---
 i18n/locales/de.json | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index e980559ea2..087ad3abbf 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -349,6 +349,8 @@
     "website": "Website",
     "website_placeholder": "https://beispiel.de",
     "likes": "Likes",
+    "likes_error": "Gelikte Pakete konnten nicht geladen werden.",
+    "likes_empty": "Noch keine gelikten Pakete.",
     "seo_title": "{handle} - npmx",
     "seo_description": "npmx-Profil von {handle}",
     "not_found": "Profil nicht gefunden",
@@ -358,10 +360,6 @@
       "share_button": "Auf Bluesky teilen",
       "compose_text": "Hey {'@'}{handle}! Hast du schon npmx.dev ausprobiert? Es ist ein Browser für die npm Registry, der schnell, modern und Open-Source ist.\nhttps://npmx.dev"
     },
-    "likes_error": "Gelikte Pakete konnten nicht geladen werden.",
-    "likes_empty": "Noch keine gelikten Pakete.",
-    "avatar_alt": "Profilavatar",
-    "unknown_profile": "Unbekanntes Profil",
     "linked_accounts": {
       "status": {
         "verified": "Verifiziert",
@@ -394,6 +392,7 @@
       "size": "Installationsgröße um {percent} gestiegen ({size} größer)",
       "deps": "{count} zusätzliche Abhängigkeiten"
     },
+    "size_decrease": {},
     "replacement": {
       "title": "Du brauchst diese Abhängigkeit vielleicht nicht.",
       "native": "Dies kann durch {replacement} ersetzt werden, verfügbar seit Node {nodeVersion}.",
@@ -571,6 +570,7 @@
       "current_tags": "Aktuelle Tags",
       "no_match_filter": "Keine Versionen entsprechen {filter}"
     },
+    "timeline": {},
     "dependencies": {
       "title": "Abhängigkeit ({count}) | Abhängigkeiten ({count})",
       "list_label": "Paketabhängigkeiten",
@@ -1331,7 +1331,10 @@
         "vulnerabilities": {
           "label": "Sicherheitslücken",
           "description": "Bekannte Sicherheitsrisiken"
-        }
+        },
+        "githubStars": {},
+        "githubIssues": {},
+        "createdAt": {}
       },
       "values": {
         "any": "Beliebig",

From aa3bd18c848e04934f900f8c2a7cefb605206652 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Mon, 27 Apr 2026 01:43:34 +0530
Subject: [PATCH 23/28] refactor: remove unused avatar_alt and unknown_profile
 properties from schema

---
 i18n/schema.json | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/i18n/schema.json b/i18n/schema.json
index b6b1689dc9..2bcf4101d2 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1099,12 +1099,6 @@
           },
           "additionalProperties": false
         },
-        "avatar_alt": {
-          "type": "string"
-        },
-        "unknown_profile": {
-          "type": "string"
-        },
         "linked_accounts": {
           "type": "object",
           "properties": {

From 9e066c487398232589e67a3daba1ff36de1dce2a Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Thu, 4 Jun 2026 19:48:40 +0530
Subject: [PATCH 24/28] fix: correct likes_empty message formatting in bn-IN
 and nl locales

---
 i18n/locales/bn-IN.json | 2 +-
 i18n/locales/nl.json    | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
index 6ba8ba806b..7603513191 100644
--- a/i18n/locales/bn-IN.json
+++ b/i18n/locales/bn-IN.json
@@ -354,7 +354,7 @@
   },
   "profile": {
     "likes_error": "পছন্দের প্যাকেজগুলি লোড করা যায়নি।",
-    "likes_empty": "এখনও কোনো পছন্দের প্যাকেজ নেই।"
+    "likes_empty": "এখনও কোনো পছন্দের প্যাকেজ নেই।",
     "display_name": "প্রদর্শনের নাম",
     "description": "বর্ণনা",
     "no_description": "কোনো বর্ণনা দেওয়া হয়নি",
diff --git a/i18n/locales/nl.json b/i18n/locales/nl.json
index 1ce4e7ab8c..13db86af5a 100644
--- a/i18n/locales/nl.json
+++ b/i18n/locales/nl.json
@@ -365,11 +365,10 @@
     "invite": {
       "message": "Het lijkt erop dat ze npmx nog niet gebruiken. Wilt u ze hierop wijzen",
       "share_button": "Deel op Bluesky",
+      "compose_text": "Hallo {'@'}{handle}! Hebt u npmx.dev al bekeken? Het is een browser voor het npm-register die snel, modern en open source is.\nhttps://npmx.dev"
     },
     "likes_error": "Kon gelikete pakketten niet laden.",
     "likes_empty": "Nog geen gelikete pakketten."
-      "compose_text": "Hallo {'@'}{handle}! Hebt u npmx.dev al bekeken? Het is een browser voor het npm-register die snel, modern en open source is.\nhttps://npmx.dev"
-    }
   },
   "package": {
     "not_found": "Pakket niet gevonden",

From 1463b4951151909773c69356285e6c40f566346d Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 4 Jun 2026 14:20:22 +0000
Subject: [PATCH 25/28] [autofix.ci] apply automated fixes

---
 i18n/locales/bn-IN.json | 324 ++++++++++++++++++++--------------------
 i18n/locales/pt-PT.json |  14 +-
 i18n/locales/ro-RO.json |   4 +-
 3 files changed, 177 insertions(+), 165 deletions(-)

diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
index 7603513191..ce6cfbbcc8 100644
--- a/i18n/locales/bn-IN.json
+++ b/i18n/locales/bn-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": "কীবোর্ড শর্টকাটস",
     "brand": "ব্র্যান্ড",
@@ -331,7 +331,6 @@
     "cancel": "বাতিল করুন",
     "save": "সংরক্ষণ করুন",
     "edit": "সম্পাদনা করুন",
-    "error": "ত্রুটি",
     "view_on": {
       "npm": "npm এ দেখুন",
       "github": "GitHub এ দেখুন",
@@ -353,14 +352,14 @@
     "expand_with_name": "{name} বিস্তৃত করুন"
   },
   "profile": {
-    "likes_error": "পছন্দের প্যাকেজগুলি লোড করা যায়নি।",
-    "likes_empty": "এখনও কোনো পছন্দের প্যাকেজ নেই।",
     "display_name": "প্রদর্শনের নাম",
     "description": "বর্ণনা",
     "no_description": "কোনো বর্ণনা দেওয়া হয়নি",
     "website": "ওয়েবসাইট",
     "website_placeholder": "https://example.com",
     "likes": "পছন্দ",
+    "likes_error": "পছন্দের প্যাকেজগুলি লোড করা যায়নি।",
+    "likes_empty": "এখনও কোনো পছন্দের প্যাকেজ নেই।",
     "seo_title": "{handle} - npmx",
     "seo_description": "{handle} দ্বারা npmx প্রোফাইল",
     "not_found": "প্রোফাইল পাওয়া যায়নি",
@@ -369,6 +368,9 @@
       "message": "তারা এখনও npmx ব্যবহার করছে বলে মনে হচ্ছে না। এটা সম্পর্কে তাদের বলতে চান?",
       "share_button": "Bluesky এ শেয়ার করুন",
       "compose_text": "আরে {'@'}{handle}! আপনি কি এখনও npmx.dev চেক আউট করেছেন? এটি npm রেজিস্ট্রির জন্য একটি ব্রাউজার যা দ্রুত, আধুনিক এবং ওপেন সোর্স।\nhttps://npmx.dev"
+    },
+    "linked_accounts": {
+      "status": {}
     }
   },
   "package": {
@@ -464,10 +466,10 @@
       "top_rank_link_label": "পছন্দ লিডারবোর্ড দেখুন. এই প্যাকেজটি #{rank} র‌্যাঙ্ক করা হয়েছে."
     },
     "docs": {
-      "not_available": "ডকুমেন্টেশন উপলব্ধ নেই",
-      "not_available_detail": "আমরা এই ভার্সনের জন্য ডকুমেন্টেশন তৈরি করতে পারিনি।",
       "contents": "বিষয়বস্তু",
       "default_not_available": "এই ভার্সনের জন্য ডকুমেন্টেশন উপলব্ধ নয়।",
+      "not_available": "ডকুমেন্টেশন উপলব্ধ নেই",
+      "not_available_detail": "আমরা এই ভার্সনের জন্য ডকুমেন্টেশন তৈরি করতে পারিনি।",
       "page_title": "API ডকুমেন্টেশন - npmx",
       "page_title_name": "{name} ডকুমেন্টেশন - npmx",
       "page_title_version": "{name} ডকুমেন্টেশন - npmx",
@@ -478,9 +480,9 @@
       "title": "শুরু করুন",
       "pm_label": "প্যাকেজ ম্যানেজার",
       "copy_command": "ইনস্টল কমান্ড কপি করুন",
-      "view_types": "{package} দেখুন",
       "copy_dev_command": "ডেভ ইনস্টল কমান্ড কপি করুন",
-      "dev_dependency_hint": "সাধারণত ডেভ ডিপেনডেন্সি হিসেবে ইনস্টল করা হয়"
+      "dev_dependency_hint": "সাধারণত ডেভ ডিপেনডেন্সি হিসেবে ইনস্টল করা হয়",
+      "view_types": "{package} দেখুন"
     },
     "create": {
       "title": "নতুন প্রকল্প তৈরি করুন",
@@ -494,6 +496,7 @@
     "readme": {
       "title": "রিডমি",
       "no_readme": "README উপলব্ধ নেই।",
+      "toc_title": "আউটলাইন",
       "callout": {
         "note": "দ্রষ্টব্য",
         "tip": "টিপ",
@@ -501,7 +504,6 @@
         "warning": "সতর্কতা",
         "caution": "সতর্কতা"
       },
-      "toc_title": "আউটলাইন",
       "copy_as_markdown": "মার্কডাউন হিসাবে README কপি করুন",
       "error_loading": "README বিশদ লোড করতে ব্যর্থ হয়েছে৷"
     },
@@ -530,10 +532,10 @@
     "compatibility": "সামঞ্জস্য",
     "card": {
       "publisher": "প্রকাশক",
+      "published": "প্রকাশিত",
       "weekly_downloads": "সাপ্তাহিক ডাউনলোড",
       "keywords": "কীওয়ার্ড",
       "license": "লাইসেন্স",
-      "published": "প্রকাশিত",
       "select": "প্যাকেজ নির্বাচন করুন",
       "select_maximum": "সর্বোচ্চ {count}টি প্যাকেজ নির্বাচন করা যাবে"
     },
@@ -550,10 +552,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} ভার্সনের প্রতি-ভার্সন ডাউনলোড দেখানো বার চার্ট, {first_version} ভার্সন থেকে {last_version} ভার্সন পর্যন্ত, {date_range_label} সময়সীমায়। সবচেয়ে বেশি ডাউনলোড হওয়া ভার্সন হলো {max_downloaded_version}, যার ডাউনলোড সংখ্যা {max_version_downloads}। {per_version_analysis}। {watermark}।"
-      },
       "view_all_versions": "সব ভার্সন দেখুন",
       "distribution_title": "Semver গ্রুপ",
       "distribution_modal_title": "ভার্সনসমূহ",
@@ -581,10 +579,43 @@
       "license_change_warning": "আগের ভার্সনের পর থেকে লাইসেন্স পরিবর্তিত হয়েছে।",
       "license_change_record": "এই প্যাকেজের লাইসেন্স \"{from}\" থেকে \"{to}\" তে পরিবর্তিত হয়েছে।",
       "no_matches": "এই পরিসরের সাথে কোনো ভার্সন মেলেনি",
+      "copy_alt": {
+        "per_version_analysis": "{version} ভার্সনটি {downloads} বার ডাউনলোড করা হয়েছে",
+        "general_description": "{package_name} প্যাকেজের {versions_count}টি {semver_grouping_mode} ভার্সনের প্রতি-ভার্সন ডাউনলোড দেখানো বার চার্ট, {first_version} ভার্সন থেকে {last_version} ভার্সন পর্যন্ত, {date_range_label} সময়সীমায়। সবচেয়ে বেশি ডাউনলোড হওয়া ভার্সন হলো {max_downloaded_version}, যার ডাউনলোড সংখ্যা {max_version_downloads}। {per_version_analysis}। {watermark}।"
+      },
       "page_title": "ভার্সন ইতিহাস",
       "current_tags": "বর্তমান ট্যাগসমূহ",
       "no_match_filter": "{filter} এর সাথে কোনো ভার্সন মেলেনি"
     },
+    "timeline": {
+      "load_more": "আরো লোড করুন",
+      "load_error": "টাইমলাইন লোড করা যায়নি। অনুগ্রহ করে পরে আবার চেষ্টা করুন।",
+      "size_increase": "ইনস্টল সাইজ {percent}% বৃদ্ধি পেয়েছে ({size})",
+      "size_decrease": "ইনস্টল সাইজ {percent}% কমেছে ({size})",
+      "dep_increase": "{count}টি ডিপেনডেন্সি যোগ হয়েছে",
+      "dep_decrease": "{count}টি ডিপেনডেন্সি সরানো হয়েছে",
+      "license_change": "লাইসেন্স {from} থেকে {to} এ পরিবর্তিত হয়েছে",
+      "esm_added": "মডিউল টাইপ ESM এ পরিবর্তিত হয়েছে",
+      "esm_removed": "মডিউল টাইপ ESM থেকে CJS এ পরিবর্তিত হয়েছে",
+      "types_added": "TypeScript টাইপ যোগ করা হয়েছে",
+      "types_removed": "TypeScript টাইপ সরানো হয়েছে",
+      "trusted_publisher_added": "বিশ্বস্ত প্রকাশনা সক্রিয় করা হয়েছে",
+      "trusted_publisher_removed": "বিশ্বস্ত প্রকাশনা সরানো হয়েছে",
+      "provenance_added": "প্রোভেন্যান্স সক্রিয় করা হয়েছে",
+      "provenance_removed": "প্রোভেন্যান্স সরানো হয়েছে",
+      "chart": {
+        "tab_aria_label": "মেট্রিক নির্বাচন",
+        "base_scale": "y-অক্ষ শূন্য থেকে শুরু করুন",
+        "zoom": "জুম",
+        "reset_minimap": "মিনিম্যাপ রিসেট করুন",
+        "ordered_versions": "শুধুমাত্র স্থিতিশীল",
+        "copy_alt": {
+          "key_changes": "মূল পরিবর্তনসমূহ: {version_events}।",
+          "version_events": "ভার্সন {version}: {events}",
+          "general_description": "{package} প্যাকেজের {metric} প্রদর্শনকারী লাইন চার্ট, {first} ভার্সন থেকে {last} ভার্সন পর্যন্ত। {first} ভার্সনে {metric} এর মান {first_value}, এবং {last} ভার্সনে {last_value} ({overall_progress_percentage}% সামগ্রিক পরিবর্তন)। {key_changes} {watermark}।"
+        }
+      }
+    },
     "dependencies": {
       "title": "নির্ভরতা ({count})",
       "list_label": "প্যাকেজ নির্ভরতা",
@@ -623,6 +654,15 @@
       "maintainer_template": "{avatar} {char126}{name}"
     },
     "trends": {
+      "chart_assistive_text": {
+        "keyboard_navigation_horizontal": "ডেটা পয়েন্টগুলোর মধ্যে যেতে বাম এবং ডান অ্যারো কী ব্যবহার করুন।",
+        "keyboard_navigation_vertical": "ডেটা পয়েন্টগুলোর মধ্যে যেতে উপরে এবং নিচের অ্যারো কী ব্যবহার করুন।",
+        "table_available": "এই চার্টের জন্য একটি ডেটা টেবিল নিচে উপলব্ধ রয়েছে।",
+        "table_caption": "চার্ট ডেটা টেবিল"
+      },
+      "chart_view_toggle": "ভিউ পরিবর্তন করুন",
+      "chart_view_combined": "সমন্বিত ভিউ",
+      "chart_view_split": "বিভক্ত ভিউ",
       "granularity": "বিস্তৃতি",
       "granularity_daily": "দৈনিক",
       "granularity_weekly": "সাপ্তাহিক",
@@ -635,36 +675,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": "চার্ট ডেটা টেবিল"
-      },
-      "chart_view_toggle": "ভিউ পরিবর্তন করুন",
-      "chart_view_combined": "সমন্বিত ভিউ",
-      "chart_view_split": "বিভক্ত ভিউ",
       "toggle_stack_mode": "স্ট্যাক মোড পরিবর্তন করুন",
       "open_options": "অপশন খুলুন",
       "close_options": "অপশন বন্ধ করুন",
@@ -674,6 +684,11 @@
       "facet": "বিভাগ",
       "title": "প্রবণতা",
       "contributors_skip": "Contributors-এ দেখানো হয়নি (GitHub রিপোজিটরি নেই):",
+      "items": {
+        "downloads": "ডাউনলোড",
+        "likes": "পছন্দ",
+        "contributors": "অবদানকারী"
+      },
       "data_correction": "ডেটা সংশোধন",
       "average_window": "গড় উইন্ডো",
       "smoothing": "মসৃণকরণ",
@@ -685,7 +700,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": "সাপ্তাহিক ডাউনলোড",
@@ -707,11 +738,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 এ লাইসেন্স টেক্সট দেখুন",
@@ -773,9 +804,9 @@
     },
     "sort": {
       "downloads": "সবচেয়ে বেশি ডাউনলোডকৃত",
+      "published": "সম্প্রতি প্রকাশিত",
       "name_asc": "নাম (A-Z)",
-      "name_desc": "নাম (Z-A)",
-      "published": "সম্প্রতি প্রকাশিত"
+      "name_desc": "নাম (Z-A)"
     },
     "size": {
       "b": "{size} B",
@@ -785,35 +816,16 @@
     "download": {
       "button": "ডাউনলোড",
       "tarball": ".tar.gz হিসেবে টারবল ডাউনলোড করুন"
-    },
-    "timeline": {
-      "load_more": "আরো লোড করুন",
-      "load_error": "টাইমলাইন লোড করা যায়নি। অনুগ্রহ করে পরে আবার চেষ্টা করুন।",
-      "size_increase": "ইনস্টল সাইজ {percent}% বৃদ্ধি পেয়েছে ({size})",
-      "size_decrease": "ইনস্টল সাইজ {percent}% কমেছে ({size})",
-      "dep_increase": "{count}টি ডিপেনডেন্সি যোগ হয়েছে",
-      "dep_decrease": "{count}টি ডিপেনডেন্সি সরানো হয়েছে",
-      "license_change": "লাইসেন্স {from} থেকে {to} এ পরিবর্তিত হয়েছে",
-      "esm_added": "মডিউল টাইপ ESM এ পরিবর্তিত হয়েছে",
-      "esm_removed": "মডিউল টাইপ ESM থেকে CJS এ পরিবর্তিত হয়েছে",
-      "types_added": "TypeScript টাইপ যোগ করা হয়েছে",
-      "types_removed": "TypeScript টাইপ সরানো হয়েছে",
-      "trusted_publisher_added": "বিশ্বস্ত প্রকাশনা সক্রিয় করা হয়েছে",
-      "trusted_publisher_removed": "বিশ্বস্ত প্রকাশনা সরানো হয়েছে",
-      "provenance_added": "প্রোভেন্যান্স সক্রিয় করা হয়েছে",
-      "provenance_removed": "প্রোভেন্যান্স সরানো হয়েছে",
-      "chart": {
-        "tab_aria_label": "মেট্রিক নির্বাচন",
-        "base_scale": "y-অক্ষ শূন্য থেকে শুরু করুন",
-        "zoom": "জুম",
-        "reset_minimap": "মিনিম্যাপ রিসেট করুন",
-        "ordered_versions": "শুধুমাত্র স্থিতিশীল",
-        "copy_alt": {
-          "key_changes": "মূল পরিবর্তনসমূহ: {version_events}।",
-          "version_events": "ভার্সন {version}: {events}",
-          "general_description": "{package} প্যাকেজের {metric} প্রদর্শনকারী লাইন চার্ট, {first} ভার্সন থেকে {last} ভার্সন পর্যন্ত। {first} ভার্সনে {metric} এর মান {first_value}, এবং {last} ভার্সনে {last_value} ({overall_progress_percentage}% সামগ্রিক পরিবর্তন)। {key_changes} {watermark}।"
-        }
-      }
+    }
+  },
+  "leaderboard": {
+    "likes": {
+      "title": "লাইক লিডারবোর্ড",
+      "description": "বর্তমানে npmx-এর সবচেয়ে বেশি লাইক পাওয়া ১০টি প্যাকেজ।",
+      "rank": "র‍্যাঙ্ক",
+      "likes": "লাইক",
+      "unavailable_title": "এখনও কোনো লাইক লিডারবোর্ড নেই",
+      "unavailable_description": "এই মুহূর্তে দেখানোর মতো কোনো লাইক লিডারবোর্ড নেই।"
     }
   },
   "connector": {
@@ -851,7 +863,9 @@
       "otp_placeholder": "OTP কোড দিন...",
       "otp_label": "একবার ব্যবহারের পাসওয়ার্ড",
       "retry_otp": "OTP দিয়ে আবার চেষ্টা করুন",
+      "retry_web_auth": "ওয়েব অথ দিয়ে আবার চেষ্টা করুন",
       "retrying": "আবার চেষ্টা করা হচ্ছে...",
+      "open_web_auth": "ওয়েব অথ লিংক খুলুন",
       "approve_operation": "অপারেশন অনুমোদন করুন",
       "remove_operation": "অপারেশন সরান",
       "approve_all": "সব অনুমোদন করুন",
@@ -859,9 +873,7 @@
       "executing": "চালানো হচ্ছে...",
       "log": "লগ",
       "log_label": "সম্পূর্ণ অপারেশন লগ",
-      "remove_from_log": "লগ থেকে সরান",
-      "retry_web_auth": "ওয়েব অথ দিয়ে আবার চেষ্টা করুন",
-      "open_web_auth": "ওয়েব অথ লিংক খুলুন"
+      "remove_from_log": "লগ থেকে সরান"
     }
   },
   "org": {
@@ -975,6 +987,7 @@
       "invalid_name": "অবৈধ প্যাকেজ নাম:",
       "available": "এই নামটি উপলব্ধ!",
       "taken": "এই নামটি ইতিমধ্যে নেওয়া হয়েছে।",
+      "missing_permission": "আপনার কাছে {'@'}{scope} স্কোপে প্যাকেজ যোগ করার অনুমতি নেই।",
       "similar_warning": "সমান প্যাকেজ রয়েছে - npm এই নামটি প্রত্যাখ্যান করতে পারে:",
       "related": "সংশ্লিষ্ট প্যাকেজ:",
       "scope_warning_title": "পরিবর্তে স্কোপড প্যাকেজ ব্যবহার বিবেচনা করুন",
@@ -987,8 +1000,7 @@
       "publishing": "প্রকাশ করা হচ্ছে...",
       "checking": "প্রাপ্যতা যাচাই করা হচ্ছে...",
       "failed_to_check": "নামের প্রাপ্যতা যাচাই করতে ব্যর্থ",
-      "failed_to_claim": "প্যাকেজ দাবি করতে ব্যর্থ",
-      "missing_permission": "আপনার কাছে {'@'}{scope} স্কোপে প্যাকেজ যোগ করার অনুমতি নেই।"
+      "failed_to_claim": "প্যাকেজ দাবি করতে ব্যর্থ"
     }
   },
   "code": {
@@ -997,8 +1009,12 @@
     "lines": "{count}টি লাইন",
     "toggle_tree": "ফাইল ট্রি টগল করুন",
     "close_tree": "ফাইল ট্রি বন্ধ করুন",
+    "copy_content": "ফাইল কন্টেন্ট কপি করুন",
     "copy_link": "লিঙ্ক কপি করুন",
     "view_raw": "রও ফাইল দেখুন",
+    "toggle_container": "কোড কন্টেইনার প্রস্থ টগল করুন",
+    "open_raw_file": "রও ফাইল খুলুন",
+    "open_path_dropdown": "পাথ সেগমেন্টস ড্রপডাউন খুলুন",
     "file_too_large": "প্রিভিউ-র জন্য ফাইল খুব বড়",
     "file_size_warning": "{size} সিনট্যাক্স হাইলাইটিং-এর জন্য 500KB সীমার চেয়ে বেশি",
     "failed_to_load": "ফাইল লোড করতে ব্যর্থ",
@@ -1017,10 +1033,6 @@
       "code": "কোড"
     },
     "file_path": "ফাইল পাথ",
-    "copy_content": "ফাইল কন্টেন্ট কপি করুন",
-    "toggle_container": "কোড কন্টেইনার প্রস্থ টগল করুন",
-    "open_raw_file": "রও ফাইল খুলুন",
-    "open_path_dropdown": "পাথ সেগমেন্টস ড্রপডাউন খুলুন",
     "binary_file": "বাইনারি ফাইল",
     "binary_rendering_warning": "ফাইল টাইপ \"{contentType}\" প্রিভিউয়ের জন্য সমর্থিত নয়."
   },
@@ -1084,6 +1096,8 @@
       "secure": "সতর্কতা ছাড়া",
       "insecure": "সতর্কতা সহ"
     },
+    "view_selected": "নির্বাচিত দেখুন",
+    "clear_selected_label": "নির্বাচিত সাফ করুন",
     "sort": {
       "label": "প্যাকেজগুলি সাজান",
       "toggle_direction": "ক্রম দিক টগল করুন",
@@ -1094,8 +1108,8 @@
       "downloads_day": "ডাউনলোড/দিন",
       "downloads_month": "ডাউনলোড/মাস",
       "downloads_year": "ডাউনলোড/বছর",
-      "name": "নাম",
-      "published": "সর্বশেষ প্রকাশিত"
+      "published": "সর্বশেষ প্রকাশিত",
+      "name": "নাম"
     },
     "columns": {
       "title": "কলাম",
@@ -1106,10 +1120,10 @@
       "version": "ভার্সন",
       "description": "বর্ণনা",
       "downloads": "ডাউনলোড/সপ্তাহ",
+      "published": "সর্বশেষ প্রকাশিত",
       "maintainers": "রক্ষণাবেক্ষণকারী",
       "keywords": "কীওয়ার্ড",
       "security": "নিরাপত্তা",
-      "published": "সর্বশেষ প্রকাশিত",
       "selection": "প্যাকেজ নির্বাচন করুন"
     },
     "view_mode": {
@@ -1137,9 +1151,7 @@
       "security_warning": "নিরাপত্তা সতর্কতা",
       "secure": "নিরাপদ",
       "no_packages": "কোনো প্যাকেজ পাওয়া যায়নি"
-    },
-    "view_selected": "নির্বাচিত দেখুন",
-    "clear_selected_label": "নির্বাচিত সাফ করুন"
+    }
   },
   "about": {
     "title": "আমাদের সম্পর্কে",
@@ -1272,11 +1284,11 @@
       "section_packages": "প্যাকেজ",
       "section_facets": "ফ্যাসেট",
       "section_comparison": "তুলনা",
+      "copy_as_markdown": "মার্কডাউন হিসেবে কপি করুন",
       "loading": "প্যাকেজ ডেটা লোড হচ্ছে...",
       "error": "প্যাকেজ ডেটা লোড করতে ব্যর্থ। অনুগ্রহ করে আবার চেষ্টা করুন।",
       "empty_title": "তুলনা করার জন্য প্যাকেজ নির্বাচন করুন",
       "empty_description": "তাদের মেট্রিক্স পাশাপাশি তুলনা দেখতে উপরে কমপক্ষে ২টি প্যাকেজ অনুসন্ধান করে যোগ করুন।",
-      "copy_as_markdown": "মার্কডাউন হিসেবে কপি করুন",
       "table_view": "টেবিল",
       "charts_view": "চার্ট",
       "no_chartable_data": "নির্বাচিত ফ্যাসেটগুলোর জন্য কোনো চার্টযোগ্য ডেটা উপলব্ধ নেই।",
@@ -1292,6 +1304,17 @@
       "packages_selected": "{count}/{max}টি প্যাকেজ নির্বাচিত।",
       "add_hint": "তুলনা করার জন্য কমপক্ষে ২টি প্যাকেজ যোগ করুন।"
     },
+    "scatter_chart": {
+      "title": "{x} বনাম {y} তুলনা করুন",
+      "freshness_score": "নতুনত্ব স্কোর",
+      "copy_alt": {
+        "analysis": "{package}: {x_name} ({x_value}) এবং {y_name} ({y_value})",
+        "description": "{packages}টি প্যাকেজের জন্য {x_name} বনাম {y_name} এর স্ক্যাটার প্লট চার্ট। {analysis}. {watermark}"
+      },
+      "filename": "{x}-vs-{y}-scatter-chart",
+      "x_axis": "X-অক্ষ ↦",
+      "y_axis": "Y-অক্ষ ↥"
+    },
     "no_dependency": {
       "label": "(কোনো নির্ভরতা নেই)",
       "typeahead_title": "জেমস কী করতেন?",
@@ -1304,9 +1327,14 @@
     "facets": {
       "all": "সব",
       "none": "কিছু না",
+      "select_all_category_facets": "{category}-এর সব ফ্যাসেট নির্বাচন করুন",
+      "deselect_all_category_facets": "{category}-এর সব ফ্যাসেট নির্বাচন বাতিল করুন",
+      "selected_all_category_facets": "{category}-এর সব ফ্যাসেট নির্বাচন করা হয়েছে",
+      "deselected_all_category_facets": "{category}-এর সব ফ্যাসেট নির্বাচন বাতিল করা হয়েছে",
       "coming_soon": "শীঘ্রই আসছে",
       "select_all": "সব ফ্যাসেট নির্বাচন করুন",
       "deselect_all": "সব ফ্যাসেট অনির্বাচিত করুন",
+      "binary_only_tooltip": "এই প্যাকেজটি বাইনারি সরবরাহ করে এবং কোনো এক্সপোর্ট নেই",
       "categories": {
         "performance": "কর্মক্ষমতা",
         "health": "স্বাস্থ্য",
@@ -1392,39 +1420,7 @@
       },
       "trends": {
         "title": "প্রবণতা তুলনা করুন"
-      },
-      "select_all_category_facets": "{category}-এর সব ফ্যাসেট নির্বাচন করুন",
-      "deselect_all_category_facets": "{category}-এর সব ফ্যাসেট নির্বাচন বাতিল করুন",
-      "selected_all_category_facets": "{category}-এর সব ফ্যাসেট নির্বাচন করা হয়েছে",
-      "deselected_all_category_facets": "{category}-এর সব ফ্যাসেট নির্বাচন বাতিল করা হয়েছে",
-      "binary_only_tooltip": "এই প্যাকেজটি বাইনারি সরবরাহ করে এবং কোনো এক্সপোর্ট নেই"
-    },
-    "version_invalid_url_format": {
-      "hint": "অবৈধ তুলনা URL। এই ফরম্যাট ব্যবহার করুন: {0}",
-      "from_version": "থেকে",
-      "to_version": "পর্যন্ত"
-    },
-    "file_filter_option": {
-      "all": "সব ({count})",
-      "added": "যোগ করা হয়েছে ({count})",
-      "removed": "মুছে ফেলা হয়েছে ({count})",
-      "modified": "পরিবর্তিত ({count})"
-    },
-    "filter": {
-      "added": "যোগ করা",
-      "removed": "মুছে ফেলা",
-      "modified": "পরিবর্তিত"
-    },
-    "scatter_chart": {
-      "title": "{x} বনাম {y} তুলনা করুন",
-      "freshness_score": "নতুনত্ব স্কোর",
-      "copy_alt": {
-        "analysis": "{package}: {x_name} ({x_value}) এবং {y_name} ({y_value})",
-        "description": "{packages}টি প্যাকেজের জন্য {x_name} বনাম {y_name} এর স্ক্যাটার প্লট চার্ট। {analysis}. {watermark}"
-      },
-      "filename": "{x}-vs-{y}-scatter-chart",
-      "x_axis": "X-অক্ষ ↦",
-      "y_axis": "Y-অক্ষ ↥"
+      }
     },
     "file_changes": "ফাইল পরিবর্তন",
     "files_count": "{count}টি ফাইল | {count}টি ফাইল",
@@ -1436,6 +1432,11 @@
     "comparing_versions_label": "সংস্করণ তুলনা করা হচ্ছে...",
     "version_back_to_package": "প্যাকেজে ফিরে যান",
     "version_error_message": "সংস্করণ তুলনা ব্যর্থ হয়েছে।",
+    "version_invalid_url_format": {
+      "hint": "অবৈধ তুলনা URL। এই ফরম্যাট ব্যবহার করুন: {0}",
+      "from_version": "থেকে",
+      "to_version": "পর্যন্ত"
+    },
     "version_selector_title": "সংস্করণের সাথে তুলনা করুন",
     "summary": "সারাংশ",
     "deps_count": "{count}টি নির্ভরতা | {count}টি নির্ভরতা",
@@ -1444,10 +1445,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": "ডিফ দেখতে সাইডবার থেকে একটি ফাইল নির্বাচন করুন",
     "close_files_panel": "ফাইল প্যানেল বন্ধ করুন",
@@ -1465,6 +1477,8 @@
     "word_wrap": "লাইন মোড়ানো"
   },
   "pds": {
+    "title": "npmx.social",
+    "meta_description": "npmx কমিউনিটির জন্য অফিসিয়াল AT Protocol Personal Data Server (PDS)।",
     "join": {
       "title": "কমিউনিটিতে যোগ দিন",
       "description": "আপনি অ্যাটমোসফিয়ারে প্রথম অ্যাকাউন্ট তৈরি করছেন বা বিদ্যমান অ্যাকাউন্ট স্থানান্তর করছেন—আপনি এখানে স্বাগতম। আপনি আপনার বর্তমান অ্যাকাউন্ট হ্যান্ডেল, পোস্ট বা ফলোয়ার হারানো ছাড়াই স্থানান্তর করতে পারেন।",
@@ -1488,11 +1502,12 @@
       "empty": "দেখানোর মতো কোনো কমিউনিটি সদস্য নেই।",
       "view_profile": "{handle}-এর প্রোফাইল দেখুন",
       "new_accounts": "...এছাড়া আরও {count}টি নতুন অ্যাকাউন্ট অ্যাটমোসফিয়ারে যুক্ত হয়েছে"
-    },
-    "title": "npmx.social",
-    "meta_description": "npmx কমিউনিটির জন্য অফিসিয়াল AT Protocol Personal Data Server (PDS)।"
+    }
   },
   "privacy_policy": {
+    "title": "প্রাইভেসি পলিসি",
+    "last_updated": "সর্বশেষ আপডেট: {date}",
+    "welcome": "{app}-এ স্বাগতম। আমরা আপনার গোপনীয়তা রক্ষায় প্রতিশ্রুতিবদ্ধ। এই নীতিতে আমরা কী ডেটা সংগ্রহ করি, কীভাবে ব্যবহার করি এবং আপনার ডেটা সম্পর্কিত অধিকার ব্যাখ্যা করা হয়েছে।",
     "cookies": {
       "what_are": {
         "title": "কুকি কী?",
@@ -1567,12 +1582,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 স্তরের পূর্ণ সম্মতি দাবি করি না—অ্যাক্সেসিবিলিটি একটি চলমান প্রক্রিয়া এবং সবসময় উন্নতির সুযোগ থাকে।",
@@ -1597,19 +1612,9 @@
       "title": "প্রতিক্রিয়া",
       "p1": "{app}-এ যদি আপনি কোনো অ্যাক্সেসিবিলিটি সমস্যা পান, অনুগ্রহ করে আমাদের {link}-এ ইস্যু খুলে জানান। আমরা এসব রিপোর্ট গুরুত্ব সহকারে নেই এবং সমাধানের সর্বোচ্চ চেষ্টা করি।",
       "link": "GitHub রিপোজিটরি"
-    },
-    "title": "অ্যাক্সেসিবিলিটি",
-    "footer_title": "a11y",
-    "welcome": "আমরা চাই {app} যত বেশি সম্ভব মানুষের জন্য ব্যবহারযোগ্য হোক।"
+    }
   },
   "translation_status": {
-    "table": {
-      "file": "ফাইল",
-      "status": "অবস্থা",
-      "error": "ফাইল তালিকা লোড করার সময় ত্রুটি হয়েছে।",
-      "empty": "কোনো ফাইল পাওয়া যায়নি",
-      "file_link": "{file} ({lang}) GitHub-এ সম্পাদনা করুন"
-    },
     "title": "অনুবাদ অবস্থা",
     "generated_at": "উৎপাদনের তারিখ: {date}",
     "welcome": "{npmx}-কে বিভিন্ন ভাষায় অনুবাদ করতে সাহায্য করতে আগ্রহী হলে আপনি সঠিক জায়গায় এসেছেন! এই স্বয়ংক্রিয়ভাবে আপডেট হওয়া পেজটি বর্তমানে যেসব কনটেন্টে সাহায্য দরকার তা দেখায়।",
@@ -1623,22 +1628,13 @@
     "complete_text": "এই অনুবাদ সম্পূর্ণ হয়েছে, দারুণ কাজ!",
     "missing_text": "অনুপস্থিত",
     "missing_keys": "কোনো অনুবাদ অনুপস্থিত নেই | অনুপস্থিত অনুবাদ | অনুপস্থিত অনুবাদসমূহ",
-    "progress_label": "{locale}-এর জন্য অগ্রগতির অবস্থা"
-  },
-  "action_bar": {
-    "title": "অ্যাকশন বার",
-    "selection": "০টি নির্বাচিত | ১টি নির্বাচিত | {count}টি নির্বাচিত",
-    "shortcut": "\"{key}\" চাপুন অ্যাকশন ফোকাস করতে",
-    "button_close_aria_label": "অ্যাকশন বার বন্ধ করুন"
-  },
-  "leaderboard": {
-    "likes": {
-      "title": "লাইক লিডারবোর্ড",
-      "description": "বর্তমানে npmx-এর সবচেয়ে বেশি লাইক পাওয়া ১০টি প্যাকেজ।",
-      "rank": "র‍্যাঙ্ক",
-      "likes": "লাইক",
-      "unavailable_title": "এখনও কোনো লাইক লিডারবোর্ড নেই",
-      "unavailable_description": "এই মুহূর্তে দেখানোর মতো কোনো লাইক লিডারবোর্ড নেই।"
+    "progress_label": "{locale}-এর জন্য অগ্রগতির অবস্থা",
+    "table": {
+      "file": "ফাইল",
+      "status": "অবস্থা",
+      "error": "ফাইল তালিকা লোড করার সময় ত্রুটি হয়েছে।",
+      "empty": "কোনো ফাইল পাওয়া যায়নি",
+      "file_link": "{file} ({lang}) GitHub-এ সম্পাদনা করুন"
     }
   },
   "vacations": {
@@ -1675,6 +1671,12 @@
       }
     }
   },
+  "action_bar": {
+    "title": "অ্যাকশন বার",
+    "selection": "০টি নির্বাচিত | ১টি নির্বাচিত | {count}টি নির্বাচিত",
+    "shortcut": "\"{key}\" চাপুন অ্যাকশন ফোকাস করতে",
+    "button_close_aria_label": "অ্যাকশন বার বন্ধ করুন"
+  },
   "logo_menu": {
     "copy_svg": "SVG হিসেবে লোগো কপি করুন",
     "copied": "কপি হয়েছে!",
diff --git a/i18n/locales/pt-PT.json b/i18n/locales/pt-PT.json
index 683ce28ae6..54879ed305 100644
--- a/i18n/locales/pt-PT.json
+++ b/i18n/locales/pt-PT.json
@@ -328,7 +328,6 @@
     "cancel": "Cancelar",
     "save": "Guardar",
     "edit": "Editar",
-    "error": "Erro",
     "view_on": {
       "npm": "Ver no npm",
       "github": "Ver no GitHub",
@@ -364,6 +363,9 @@
       "message": "Parece que ainda não estão a usar o npmx. Queres contar-lhes sobre isso?",
       "share_button": "Partilhar no Bluesky",
       "compose_text": "Olá, {'@'}{handle}! Já conheces o npmx.dev? É um navegador para o registo npm rápido, moderno e de código aberto.\nhttps://npmx.dev"
+    },
+    "linked_accounts": {
+      "status": {}
     }
   },
   "package": {
@@ -591,7 +593,10 @@
       "trusted_publisher_added": "Publicação de confiança ativada",
       "trusted_publisher_removed": "Publicação de confiança removida",
       "provenance_added": "Proveniência ativada",
-      "provenance_removed": "Proveniência removida"
+      "provenance_removed": "Proveniência removida",
+      "chart": {
+        "copy_alt": {}
+      }
     },
     "dependencies": {
       "title": "Dependência ({count}) | Dependências ({count})",
@@ -1704,5 +1709,8 @@
       "discord_link_text": "chat.npmx.dev"
     }
   },
-  "alt_logo_kawaii": "Uma versão fofa, arredondada e colorida do logótipo do npmx."
+  "alt_logo_kawaii": "Uma versão fofa, arredondada e colorida do logótipo do npmx.",
+  "changelog": {
+    "error": {}
+  }
 }
diff --git a/i18n/locales/ro-RO.json b/i18n/locales/ro-RO.json
index 07e880b329..627ddcc17a 100644
--- a/i18n/locales/ro-RO.json
+++ b/i18n/locales/ro-RO.json
@@ -328,7 +328,6 @@
     "cancel": "Anulează",
     "save": "Salvează",
     "edit": "Editează",
-    "error": "Eroare",
     "view_on": {
       "npm": "Vizualizează pe npm",
       "github": "Vizualizează pe GitHub",
@@ -364,6 +363,9 @@
       "message": "Se pare că încă nu folosesc npmx. Vrei să le spui despre asta?",
       "share_button": "Partajează pe Bluesky",
       "compose_text": "Salut {'@'}{handle}! Ai vizitat deja npmx.dev? Este un browser pentru registrul npm, rapid, modern și open-source.\nhttps://npmx.dev"
+    },
+    "linked_accounts": {
+      "status": {}
     }
   },
   "package": {

From afc5034948886df2125f9a5803a93be8ead7a2a2 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Thu, 4 Jun 2026 22:30:54 +0530
Subject: [PATCH 26/28] feat: add support for Bluesky platform in account
 linking and localization

---
 app/components/AccountItem.vue    |  3 ++
 app/components/LinkedAccounts.vue | 54 +++++++++++++++++++++++++------
 i18n/locales/bn-IN.json           | 12 ++++++-
 i18n/locales/de-AT.json           |  7 +++-
 i18n/locales/de-DE.json           |  7 +++-
 i18n/locales/de.json              |  5 +++
 i18n/locales/en.json              |  5 +++
 i18n/locales/pt-PT.json           |  7 +++-
 i18n/locales/ro-RO.json           |  7 +++-
 i18n/schema.json                  | 15 +++++++++
 server/api/keytrace/[domain].ts   |  1 +
 shared/types/keytrace.ts          |  2 +-
 12 files changed, 110 insertions(+), 15 deletions(-)

diff --git a/app/components/AccountItem.vue b/app/components/AccountItem.vue
index fa52c82351..a442156bef 100644
--- a/app/components/AccountItem.vue
+++ b/app/components/AccountItem.vue
@@ -17,6 +17,7 @@ const platformLabelMap: Record<string, string> = {
   github: 'GitHub',
   npm: 'npm',
   mastodon: 'Mastodon',
+  bluesky: 'Bluesky',
   discord: 'Discord',
   orcid: 'ORCID',
 }
@@ -25,6 +26,7 @@ const platformIconMap: Record<string, string> = {
   github: 'i-simple-icons:github',
   npm: 'i-simple-icons:npm',
   mastodon: 'i-simple-icons:mastodon',
+  bluesky: 'i-simple-icons:bluesky',
   discord: 'i-simple-icons:discord',
   orcid: 'i-simple-icons:orcid',
 }
@@ -34,6 +36,7 @@ const proofMethodLabelMap: Record<KeytraceAccount['proofMethod'], string> = {
   github: 'GitHub',
   npm: 'npm',
   mastodon: 'Mastodon',
+  bluesky: 'Bluesky',
   pgp: 'PGP',
   other: 'other',
 }
diff --git a/app/components/LinkedAccounts.vue b/app/components/LinkedAccounts.vue
index 6bc36c035e..b0fd2f86e9 100644
--- a/app/components/LinkedAccounts.vue
+++ b/app/components/LinkedAccounts.vue
@@ -5,19 +5,19 @@ const { t } = useI18n()
 
 const statusLegend = computed(() => [
   {
-    label: t('profile.linked_accounts.status.verified'),
+    labelKey: 'profile.linked_accounts.status.verified',
     className: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30',
   },
   {
-    label: t('profile.linked_accounts.status.unverified'),
+    labelKey: 'profile.linked_accounts.status.unverified',
     className: 'bg-yellow-500/15 text-yellow-300 border-yellow-500/30',
   },
   {
-    label: t('profile.linked_accounts.status.stale'),
+    labelKey: 'profile.linked_accounts.status.stale',
     className: 'bg-orange-500/15 text-orange-300 border-orange-500/30',
   },
   {
-    label: t('profile.linked_accounts.status.failed'),
+    labelKey: 'profile.linked_accounts.status.failed',
     className: 'bg-red-500/15 text-red-300 border-red-500/30',
   },
 ])
@@ -36,9 +36,45 @@ const verifiedCount = computed(
 <template>
   <section class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6">
     <div class="flex flex-wrap items-center justify-between gap-3">
-      <h2 class="font-mono text-xl sm:text-2xl font-medium">
-        {{ $t('profile.linked_accounts.title') }}
-      </h2>
+      <div class="flex items-center gap-2">
+        <h2 class="font-mono text-xl sm:text-2xl font-medium">
+          {{ $t('profile.linked_accounts.title') }}
+        </h2>
+        <TooltipBase position="bottom" :offset="8" interactive>
+          <template #trigger>
+            <button
+              type="button"
+              class="size-6 rounded-full flex items-center justify-center text-fg-muted hover:text-fg"
+              :aria-label="$t('profile.linked_accounts.legend_info_title')"
+            >
+              <span class="i-lucide:info size-4" aria-hidden="true" />
+            </button>
+          </template>
+          <template #content>
+            <div class="p-3 max-w-xs text-sm">
+              <p class="font-medium">{{ $t('profile.linked_accounts.legend_info_title') }}</p>
+              <ul class="mt-2 text-fg-muted space-y-1 list-none p-0">
+                <li>
+                  <strong>{{ $t('profile.linked_accounts.status.verified') }}</strong
+                  >: {{ $t('profile.linked_accounts.legend_verified') }}
+                </li>
+                <li>
+                  <strong>{{ $t('profile.linked_accounts.status.unverified') }}</strong
+                  >: {{ $t('profile.linked_accounts.legend_unverified') }}
+                </li>
+                <li>
+                  <strong>{{ $t('profile.linked_accounts.status.stale') }}</strong
+                  >: {{ $t('profile.linked_accounts.legend_stale') }}
+                </li>
+                <li>
+                  <strong>{{ $t('profile.linked_accounts.status.failed') }}</strong
+                  >: {{ $t('profile.linked_accounts.legend_failed') }}
+                </li>
+              </ul>
+            </div>
+          </template>
+        </TooltipBase>
+      </div>
       <p class="text-sm text-fg-muted">
         {{
           $t('profile.linked_accounts.verified_summary', {
@@ -55,11 +91,11 @@ const verifiedCount = computed(
     >
       <span
         v-for="item in statusLegend"
-        :key="item.label"
+        :key="item.labelKey"
         class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-mono"
         :class="item.className"
       >
-        {{ item.label }}
+        {{ $t(item.labelKey) }}
       </span>
     </div>
 
diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
index ce6cfbbcc8..950f774f7e 100644
--- a/i18n/locales/bn-IN.json
+++ b/i18n/locales/bn-IN.json
@@ -370,7 +370,17 @@
       "compose_text": "আরে {'@'}{handle}! আপনি কি এখনও npmx.dev চেক আউট করেছেন? এটি npm রেজিস্ট্রির জন্য একটি ব্রাউজার যা দ্রুত, আধুনিক এবং ওপেন সোর্স।\nhttps://npmx.dev"
     },
     "linked_accounts": {
-      "status": {}
+      "status": {
+        "verified": "যাচাইকৃত",
+        "unverified": "যাচাইকৃত নয়",
+        "stale": "পুরানো",
+        "failed": "ব্যর্থ"
+      },
+      "legend_info_title": "ব্যাজগুলোর অর্থ",
+      "legend_verified": "দাবিটি যাচাই করা হয়েছে এবং অ্যাকাউন্টটি নিশ্চিত করা হয়েছে।",
+      "legend_unverified": "আমরা দাবিটি নিশ্চিত করতে পারিনি — অ্যাকাউন্টটি পুনরায় যাচাই করার চেষ্টা করুন।",
+      "legend_stale": "সর্বশেষ যাচাইটি পুরানো; অবস্থা আপডেট করতে পুনরায় যাচাই করুন।",
+      "legend_failed": "যাচাই ব্যর্থ হয়েছে (বিস্তারিত দেখুন)। অ্যাকাউন্টে \"পুনরায় যাচাই করুন\" ক্লিক করে পুনরায় পরীক্ষা করার চেষ্টা করতে পারেন।"
     }
   },
   "package": {
diff --git a/i18n/locales/de-AT.json b/i18n/locales/de-AT.json
index 93a3bd30ce..34b42e1e03 100644
--- a/i18n/locales/de-AT.json
+++ b/i18n/locales/de-AT.json
@@ -37,7 +37,12 @@
       "title": "Verknüpfte Konten",
       "verified_summary": "Verifizierte Konten",
       "legend_aria_label": "Legende zum Verifizierungsstatus von Konten",
-      "empty": "Keine verknüpften Konten"
+      "empty": "Keine verknüpften Konten",
+      "legend_info_title": "Bedeutung der Abzeichen",
+      "legend_verified": "Die Angabe wurde überprüft und das Konto wurde bestätigt.",
+      "legend_unverified": "Die Angabe konnte nicht bestätigt werden – versuche, das Konto erneut zu verifizieren.",
+      "legend_stale": "Die letzte Verifizierung ist veraltet; verifiziere das Konto erneut, um den Status zu aktualisieren.",
+      "legend_failed": "Die Verifizierung ist fehlgeschlagen (siehe Details). Du kannst beim Konto auf „Erneut verifizieren“ klicken, um einen neuen Prüfversuch zu starten."
     }
   }
 }
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index cc07f7170e..174330ff11 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -15,7 +15,12 @@
       "title": "Verknüpfte Konten",
       "verified_summary": "Verifizierte Konten",
       "legend_aria_label": "Legende zum Verifizierungsstatus von Konten",
-      "empty": "Keine verknüpften Konten"
+      "empty": "Keine verknüpften Konten",
+      "legend_info_title": "Was die Badges bedeuten",
+      "legend_verified": "Der Nachweis wurde geprüft und das Konto bestätigt.",
+      "legend_unverified": "Der Nachweis konnte nicht bestätigt werden — versuche, das Konto erneut zu verifizieren.",
+      "legend_stale": "Die letzte Verifizierung ist veraltet; verifiziere erneut, um den Status zu aktualisieren.",
+      "legend_failed": "Die Verifizierung ist fehlgeschlagen (siehe Details). Du kannst beim Konto auf \"Erneut verifizieren\" klicken, um es erneut zu prüfen."
     }
   }
 }
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index b90229b460..cd9ed21734 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -369,6 +369,11 @@
       },
       "title": "Verknüpfte Konten",
       "verified_summary": "Verifizierte Konten",
+      "legend_info_title": "Was die Badges bedeuten",
+      "legend_verified": "Der Nachweis wurde geprüft und das Konto bestätigt.",
+      "legend_unverified": "Der Nachweis konnte nicht bestätigt werden — versuche, das Konto erneut zu verifizieren.",
+      "legend_stale": "Die letzte Verifizierung ist veraltet; verifiziere erneut, um den Status zu aktualisieren.",
+      "legend_failed": "Die Verifizierung ist fehlgeschlagen (siehe Details). Du kannst beim Konto auf „\"Erneut verifizieren\" klicken, um es erneut zu prüfen.",
       "legend_aria_label": "Legende zum Verifizierungsstatus von Konten",
       "empty": "Keine verknüpften Konten"
     }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 578eade2a3..676807e5ef 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -379,6 +379,11 @@
       "title": "Linked Accounts",
       "verified_summary": "{verified}/{total} verified",
       "legend_aria_label": "Account verification status legend",
+      "legend_info_title": "What the badges mean",
+      "legend_verified": "The claim has been checked and the account is confirmed.",
+      "legend_unverified": "We couldn't confirm the claim — try re-verifying the account.",
+      "legend_stale": "The last verification is outdated; re-verify to refresh the status.",
+      "legend_failed": "Verification failed (see details). You can click \"Re-verify\" on the account to attempt a fresh check.",
       "empty": "No linked accounts"
     }
   },
diff --git a/i18n/locales/pt-PT.json b/i18n/locales/pt-PT.json
index 54879ed305..c4620bb3d3 100644
--- a/i18n/locales/pt-PT.json
+++ b/i18n/locales/pt-PT.json
@@ -365,7 +365,12 @@
       "compose_text": "Olá, {'@'}{handle}! Já conheces o npmx.dev? É um navegador para o registo npm rápido, moderno e de código aberto.\nhttps://npmx.dev"
     },
     "linked_accounts": {
-      "status": {}
+      "status": {},
+      "legend_info_title": "O significado dos distintivos",
+      "legend_verified": "A reivindicação foi verificada e a conta foi confirmada.",
+      "legend_unverified": "Não foi possível confirmar a reivindicação — tente verificar novamente a conta.",
+      "legend_stale": "A última verificação está desatualizada; volte a verificar para atualizar o estado.",
+      "legend_failed": "A verificação falhou (consulte os detalhes). Pode clicar em \"Verificar novamente\" na conta para tentar uma nova verificação."
     }
   },
   "package": {
diff --git a/i18n/locales/ro-RO.json b/i18n/locales/ro-RO.json
index 627ddcc17a..62f29c46f6 100644
--- a/i18n/locales/ro-RO.json
+++ b/i18n/locales/ro-RO.json
@@ -365,7 +365,12 @@
       "compose_text": "Salut {'@'}{handle}! Ai vizitat deja npmx.dev? Este un browser pentru registrul npm, rapid, modern și open-source.\nhttps://npmx.dev"
     },
     "linked_accounts": {
-      "status": {}
+      "status": {},
+      "legend_info_title": "Ce înseamnă insignele",
+      "legend_verified": "Declarația a fost verificată, iar contul este confirmat.",
+      "legend_unverified": "Nu am putut confirma declarația — încearcă să reverifici contul.",
+      "legend_stale": "Ultima verificare este învechită; reverifică pentru a actualiza starea.",
+      "legend_failed": "Verificarea a eșuat (vezi detaliile). Poți face clic pe „Reverifică” în cont pentru a încerca o nouă verificare."
     }
   },
   "package": {
diff --git a/i18n/schema.json b/i18n/schema.json
index a142eb01d1..a70bc78510 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1138,6 +1138,21 @@
             "verified_summary": {
               "type": "string"
             },
+            "legend_info_title": {
+              "type": "string"
+            },
+            "legend_verified": {
+              "type": "string"
+            },
+            "legend_unverified": {
+              "type": "string"
+            },
+            "legend_stale": {
+              "type": "string"
+            },
+            "legend_failed": {
+              "type": "string"
+            },
             "legend_aria_label": {
               "type": "string"
             },
diff --git a/server/api/keytrace/[domain].ts b/server/api/keytrace/[domain].ts
index 3fe34ded03..0ea5c494e2 100644
--- a/server/api/keytrace/[domain].ts
+++ b/server/api/keytrace/[domain].ts
@@ -78,6 +78,7 @@ const allowedProofMethods = new Set<KeytraceProofMethod>([
   'github',
   'npm',
   'mastodon',
+  'bluesky',
   'pgp',
   'other',
 ])
diff --git a/shared/types/keytrace.ts b/shared/types/keytrace.ts
index dbc04d2fdf..dfd1f26ad3 100644
--- a/shared/types/keytrace.ts
+++ b/shared/types/keytrace.ts
@@ -7,7 +7,7 @@ export type KeytraceProfile = {
 
 export type KeytraceVerificationStatus = 'verified' | 'unverified' | 'stale' | 'failed'
 
-export type KeytraceProofMethod = 'dns' | 'github' | 'npm' | 'mastodon' | 'pgp' | 'other'
+export type KeytraceProofMethod = 'dns' | 'github' | 'npm' | 'mastodon' | 'pgp' | 'bluesky' | 'other'
 
 export type KeytraceAccount = {
   platform: string

From 8539630ecca81bd34e5c41d3ee3d4f6748785008 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Thu, 4 Jun 2026 22:31:42 +0530
Subject: [PATCH 27/28] style: format KeytraceProofMethod for improved
 readability

---
 shared/types/keytrace.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/shared/types/keytrace.ts b/shared/types/keytrace.ts
index dfd1f26ad3..76d9ede744 100644
--- a/shared/types/keytrace.ts
+++ b/shared/types/keytrace.ts
@@ -7,7 +7,14 @@ export type KeytraceProfile = {
 
 export type KeytraceVerificationStatus = 'verified' | 'unverified' | 'stale' | 'failed'
 
-export type KeytraceProofMethod = 'dns' | 'github' | 'npm' | 'mastodon' | 'pgp' | 'bluesky' | 'other'
+export type KeytraceProofMethod =
+  | 'dns'
+  | 'github'
+  | 'npm'
+  | 'mastodon'
+  | 'pgp'
+  | 'bluesky'
+  | 'other'
 
 export type KeytraceAccount = {
   platform: string

From 388e2d1a5752897cb080942082d76833ee3a8318 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Thu, 4 Jun 2026 22:49:27 +0530
Subject: [PATCH 28/28] fix: type check error and i18n error

---
 app/components/LinkedAccounts.vue | 37 ++++++++++++++++++++++---------
 i18n/schema.json                  |  6 ++---
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/app/components/LinkedAccounts.vue b/app/components/LinkedAccounts.vue
index b0fd2f86e9..b64723021c 100644
--- a/app/components/LinkedAccounts.vue
+++ b/app/components/LinkedAccounts.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import type { KeytraceAccount } from '#shared/types/keytrace'
 
-const { t } = useI18n()
+const legendTooltipVisible = ref(false)
+
+function showLegendTooltip() {
+  legendTooltipVisible.value = true
+}
+
+function hideLegendTooltip() {
+  legendTooltipVisible.value = false
+}
 
 const statusLegend = computed(() => [
   {
@@ -40,16 +48,23 @@ const verifiedCount = computed(
         <h2 class="font-mono text-xl sm:text-2xl font-medium">
           {{ $t('profile.linked_accounts.title') }}
         </h2>
-        <TooltipBase position="bottom" :offset="8" interactive>
-          <template #trigger>
-            <button
-              type="button"
-              class="size-6 rounded-full flex items-center justify-center text-fg-muted hover:text-fg"
-              :aria-label="$t('profile.linked_accounts.legend_info_title')"
-            >
-              <span class="i-lucide:info size-4" aria-hidden="true" />
-            </button>
-          </template>
+        <TooltipBase
+          :is-visible="legendTooltipVisible"
+          position="bottom"
+          :offset="8"
+          interactive
+          @mouseenter="showLegendTooltip"
+          @mouseleave="hideLegendTooltip"
+          @focusin="showLegendTooltip"
+          @focusout="hideLegendTooltip"
+        >
+          <button
+            type="button"
+            class="size-6 rounded-full flex items-center justify-center text-fg-muted hover:text-fg"
+            :aria-label="$t('profile.linked_accounts.legend_info_title')"
+          >
+            <span class="i-lucide:info size-4" aria-hidden="true" />
+          </button>
           <template #content>
             <div class="p-3 max-w-xs text-sm">
               <p class="font-medium">{{ $t('profile.linked_accounts.legend_info_title') }}</p>
diff --git a/i18n/schema.json b/i18n/schema.json
index a70bc78510..269fdce0f0 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1138,6 +1138,9 @@
             "verified_summary": {
               "type": "string"
             },
+            "legend_aria_label": {
+              "type": "string"
+            },
             "legend_info_title": {
               "type": "string"
             },
@@ -1153,9 +1156,6 @@
             "legend_failed": {
               "type": "string"
             },
-            "legend_aria_label": {
-              "type": "string"
-            },
             "empty": {
               "type": "string"
             }