Merge branch 'main' into feat/add-input-component

Author: alexdln

.gitignore

@@ -40,5 +40,7 @@ test-results/
 # generated files
 shared/types/lexicons
 
+**/__screenshots__/**
+
 # output
 .vercel

app/components/Compare/FacetSelector.vue

@@ -29,12 +29,12 @@ function isCategoryNoneSelected(category: string): boolean {
     <div v-for="category in categoryOrder" :key="category">
       <!-- Category header with all/none buttons -->
       <div class="flex items-center gap-2 mb-2">
-        <span class="text-[10px] text-fg-subtle uppercase tracking-wider">
+        <span class="text-3xs text-fg-subtle uppercase tracking-wider">
           {{ getCategoryLabel(category) }}
         </span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
+          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :class="
             isCategoryAllSelected(category)
               ? 'text-fg-muted'
@@ -48,10 +48,10 @@ function isCategoryNoneSelected(category: string): boolean {
         >
           {{ $t('compare.facets.all') }}
         </button>
-        <span class="text-[10px] text-fg-muted/40">/</span>
+        <span class="text-2xs text-fg-muted/40">/</span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
+          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :class="
             isCategoryNoneSelected(category)
               ? 'text-fg-muted'
@@ -94,7 +94,7 @@ function isCategoryNoneSelected(category: string): boolean {
             aria-hidden="true"
           />
           {{ facet.label }}
-          <span v-if="facet.comingSoon" class="text-[9px]"
+          <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
         </button>

app/components/DependencyPathPopup.vue

@@ -68,7 +68,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
     <!-- Path badge button -->
     <button
       type="button"
-      class="path-badge font-mono text-[10px] px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 cursor-pointer transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
+      class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 cursor-pointer transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
       :aria-expanded="isOpen"
       @click.stop="togglePopup"
     >

app/components/Header/AccountMenu.client.vue

@@ -120,7 +120,7 @@ function openAuthModal() {
       <!-- Operation count badge (when npm connected with pending ops) -->
       <span
         v-if="isNpmConnected && operationCount > 0"
-        class="absolute -top-1 -inset-ie-1 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-[10px] rounded-full"
+        class="absolute -top-1 -inset-ie-1 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-3xs rounded-full"
         :class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
         aria-hidden="true"
       >

app/components/Org/OperationsQueue.vue

@@ -322,7 +322,7 @@ watch(isExecuting, executing => {
             <!-- Show error output for failed operations -->
             <pre
               v-if="op.status === 'failed' && op.result?.stderr"
-              class="mt-1 text-red-400/70 whitespace-pre-wrap text-[11px]"
+              class="mt-1 text-red-400/70 whitespace-pre-wrap text-2xs"
               >{{ op.result.stderr }}</pre
             >
           </div>