feat(ui): add e18e module replacement recommendations to `/compare` page (#801)

app/components/Compare/ComparisonGrid.vue

···
 <script setup lang="ts">
-defineProps<{
-  /** Number of columns (2-4) */
-  columns: number
-  /** Column headers (package names or version numbers) */
-  headers: string[]
+import type { ModuleReplacement } from 'module-replacements'
+
+export interface ComparisonGridColumn {
+  /** Display text (e.g. "lodash@4.17.21") */
+  header: string
+  /** Module replacement data for this package (if available) */
+  replacement?: ModuleReplacement | null
+}
+
+const props = defineProps<{
+  /** Column definitions for each package being compared */
+  columns: ComparisonGridColumn[]
+  /** Whether to show the "no dependency" baseline as the last column */
+  showNoDependency?: boolean
 }>()
+
+/** Total column count including the optional no-dep column */
+const totalColumns = computed(() => props.columns.length + (props.showNoDependency ? 1 : 0))
+
+/** Compute plain-text tooltip for a replacement column */
+function getReplacementTooltip(col: ComparisonGridColumn): string {
+  if (!col.replacement) return ''
+
+  return [$t('package.replacement.title'), $t('package.replacement.learn_more_above')].join(' ')
+}
 </script>
 
 <template>
   <div class="overflow-x-auto">
     <div
       class="comparison-grid"
-      :class="[columns === 4 ? 'min-w-[800px]' : 'min-w-[600px]', `columns-${columns}`]"
-      :style="{ '--columns': columns }"
+      :class="[totalColumns === 4 ? 'min-w-[800px]' : 'min-w-[600px]', `columns-${totalColumns}`]"
+      :style="{ '--columns': totalColumns }"
     >
       <!-- Header row -->
       <div class="comparison-header">
         <div class="comparison-label" />
+
+        <!-- Package columns -->
         <div
-          v-for="(header, index) in headers"
-          :key="index"
+          v-for="col in columns"
+          :key="col.header"
           class="comparison-cell comparison-cell-header"
         >
-          <NuxtLink
-            :to="`/package/${header}`"
-            class="link-subtle font-mono text-sm font-medium text-fg truncate"
-            :title="header"
+          <span class="inline-flex items-center gap-1.5 truncate">
+            <NuxtLink
+              :to="`/package/${col.header}`"
+              class="link-subtle font-mono text-sm font-medium text-fg truncate"
+              :title="col.header"
+            >
+              {{ col.header }}
+            </NuxtLink>
+            <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
+              <span
+                class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                role="img"
+                :aria-label="$t('package.replacement.title')"
+              />
+            </TooltipApp>
+          </span>
+        </div>
+
+        <!-- "No dep" column (always last) -->
+        <div
+          v-if="showNoDependency"
+          class="comparison-cell comparison-cell-header comparison-cell-nodep"
+        >
+          <span
+            class="inline-flex items-center gap-1.5 text-sm font-medium text-accent italic truncate"
           >
-            {{ header }}
-          </NuxtLink>
+            {{ $t('compare.no_dependency.label') }}
+            <TooltipApp interactive position="bottom">
+              <span
+                class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                role="img"
+                :aria-label="$t('compare.no_dependency.tooltip_title')"
+              />
+              <template #content>
+                <p class="text-sm font-medium text-fg mb-1">
+                  {{ $t('compare.no_dependency.tooltip_title') }}
+                </p>
+                <p class="text-xs text-fg-muted">
+                  <i18n-t keypath="compare.no_dependency.tooltip_description" tag="span">
+                    <template #link>
+                      <a
+                        href="https://e18e.dev/docs/replacements/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-accent hover:underline"
+                        >{{ $t('compare.no_dependency.e18e_community') }}</a
+                      >
+                    </template>
+                  </i18n-t>
+                </p>
+              </template>
+            </TooltipApp>
+          </span>
         </div>
       </div>
 
···
   background: var(--color-bg-subtle);
   border-bottom: 1px solid var(--color-border);
   text-align: center;
+}
+
+/* "No dep" column styling */
+.comparison-header > .comparison-cell-header.comparison-cell-nodep {
+  background: linear-gradient(
+    135deg,
+    var(--color-bg-subtle) 0%,
+    color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-subtle)) 100%
+  );
+  border-bottom-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
 }
 
 /* First header cell rounded top-start */

app/components/Compare/PackageSelector.vue

···
 <script setup lang="ts">
+import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
+
 const packages = defineModel<string[]>({ required: true })
 
 const props = defineProps<{
···
 
 const isSearching = computed(() => status.value === 'pending')
 
+// Trigger strings for "What Would James Do?" typeahead Easter egg
+// Intentionally not localized
+const EASTER_EGG_TRIGGERS = new Set([
+  'no dep',
+  'none',
+  'vanilla',
+  'diy',
+  'zero',
+  'nothing',
+  '0',
+  "don't",
+  'native',
+  'use the platform',
+])
+
+// Check if "no dependency" option should show in typeahead
+const showNoDependencyOption = computed(() => {
+  if (packages.value.includes(NO_DEPENDENCY_ID)) return false
+  const input = inputValue.value.toLowerCase().trim()
+  if (!input) return false
+  return EASTER_EGG_TRIGGERS.has(input)
+})
+
 // Filter out already selected packages
 const filteredResults = computed(() => {
   if (!searchData.value?.objects) return []
···
   if (packages.value.length >= maxPackages.value) return
   if (packages.value.includes(name)) return
 
-  packages.value = [...packages.value, name]
+  // Keep NO_DEPENDENCY_ID always last
+  if (name === NO_DEPENDENCY_ID) {
+    packages.value = [...packages.value, name]
+  } else if (packages.value.includes(NO_DEPENDENCY_ID)) {
+    // Insert before the no-dep entry
+    const withoutNoDep = packages.value.filter(p => p !== NO_DEPENDENCY_ID)
+    packages.value = [...withoutNoDep, name, NO_DEPENDENCY_ID]
+  } else {
+    packages.value = [...packages.value, name]
+  }
   inputValue.value = ''
 }
 
···
         :key="pkg"
         class="inline-flex items-center gap-2 px-3 py-1.5 bg-bg-subtle border border-border rounded-md"
       >
+        <!-- No dependency display -->
+        <template v-if="pkg === NO_DEPENDENCY_ID">
+          <span class="text-sm text-accent italic flex items-center gap-1.5">
+            <span class="i-carbon:clean w-3.5 h-3.5" aria-hidden="true" />
+            {{ $t('compare.no_dependency.label') }}
+          </span>
+        </template>
         <NuxtLink
+          v-else
           :to="`/package/${pkg}`"
           class="font-mono text-sm text-fg hover:text-accent transition-colors"
         >
···
         </NuxtLink>
         <button
           type="button"
-          class="text-fg-subtle hover:text-fg transition-colors focus-visible:outline-accent/70 rounded"
-          :aria-label="$t('compare.selector.remove_package', { package: pkg })"
+          class="text-fg-subtle hover:text-fg transition-colors rounded"
+          :aria-label="
+            $t('compare.selector.remove_package', {
+              package: pkg === NO_DEPENDENCY_ID ? $t('compare.no_dependency.label') : pkg,
+            })
+          "
           @click="removePackage(pkg)"
         >
           <span class="i-carbon:close flex items-center w-3.5 h-3.5" aria-hidden="true" />
···
         leave-to-class="opacity-0"
       >
         <div
-          v-if="isInputFocused && (filteredResults.length > 0 || isSearching)"
+          v-if="
+            isInputFocused && (filteredResults.length > 0 || isSearching || showNoDependencyOption)
+          "
           class="absolute top-full inset-x-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto"
         >
+          <!-- No dependency option (easter egg with James) -->
+          <button
+            v-if="showNoDependencyOption"
+            type="button"
+            class="w-full text-start px-4 py-2.5 hover:bg-bg-muted transition-colors focus-visible:outline-none focus-visible:bg-bg-muted border-b border-border/50"
+            :aria-label="$t('compare.no_dependency.add_column')"
+            @click="addPackage(NO_DEPENDENCY_ID)"
+          >
+            <div class="text-sm text-accent italic flex items-center gap-2">
+              <span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
+              {{ $t('compare.no_dependency.typeahead_title') }}
+            </div>
+            <div class="text-xs text-fg-muted truncate mt-0.5">
+              {{ $t('compare.no_dependency.typeahead_description') }}
+            </div>
+          </button>
+
           <div v-if="isSearching" class="px-4 py-3 text-sm text-fg-muted">
             {{ $t('compare.selector.searching') }}
           </div>
···
             v-for="result in filteredResults"
             :key="result.name"
             type="button"
-            class="w-full text-left px-4 py-2.5 hover:bg-bg-muted transition-colors focus-visible:outline-none focus-visible:bg-bg-muted"
+            class="w-full text-start px-4 py-2.5 hover:bg-bg-muted transition-colors focus-visible:outline-none focus-visible:bg-bg-muted"
             @click="addPackage(result.name)"
           >
             <div class="font-mono text-sm text-fg">{{ result.name }}</div>
···
 
     <!-- Hint -->
     <p class="text-xs text-fg-subtle">
-      {{ $t('compare.selector.packages_selected', { count: packages.length, max: maxPackages }) }}
+      {{
+        $t('compare.selector.packages_selected', {
+          count: packages.length,
+          max: maxPackages,
+        })
+      }}
       <span v-if="packages.length < 2">{{ $t('compare.selector.add_hint') }}</span>
     </p>
   </div>

app/components/Compare/ReplacementSuggestion.vue

···
+<script setup lang="ts">
+import type { ModuleReplacement } from 'module-replacements'
+
+const props = defineProps<{
+  packageName: string
+  replacement: ModuleReplacement
+  /** Whether this suggestion should show the "no dep" action (native/simple) or just info (documented) */
+  variant: 'nodep' | 'info'
+  /** Whether to show the action button (defaults to true) */
+  showAction?: boolean
+}>()
+
+const emit = defineEmits<{
+  addNoDep: []
+}>()
+
+const docUrl = computed(() => {
+  if (props.replacement.type !== 'documented' || !props.replacement.docPath) return null
+  // TODO(serhalp): Once the e18e docs site is complete, link there instead
+  return `https://github.com/es-tooling/module-replacements/blob/main/docs/modules/${props.replacement.docPath}.md`
+})
+</script>
+
+<template>
+  <div
+    class="flex items-start gap-2 px-3 py-2 rounded-lg text-sm"
+    :class="
+      variant === 'nodep'
+        ? 'bg-amber-500/10 border border-amber-600/30 text-amber-700 dark:text-amber-400'
+        : 'bg-blue-500/10 border border-blue-600/30 text-blue-700 dark:text-blue-400'
+    "
+  >
+    <span
+      class="w-4 h-4 flex-shrink-0 mt-0.5"
+      :class="variant === 'nodep' ? 'i-carbon:idea' : 'i-carbon:information'"
+    />
+    <div class="min-w-0 flex-1">
+      <p class="font-medium">{{ packageName }}: {{ $t('package.replacement.title') }}</p>
+      <p class="text-xs mt-0.5 opacity-80">
+        <template v-if="replacement.type === 'native'">
+          {{
+            $t('package.replacement.native', {
+              replacement: replacement.replacement,
+              nodeVersion: replacement.nodeVersion,
+            })
+          }}
+        </template>
+        <template v-else-if="replacement.type === 'simple'">
+          {{
+            $t('package.replacement.simple', {
+              replacement: replacement.replacement,
+              community: $t('package.replacement.community'),
+            })
+          }}
+        </template>
+        <template v-else-if="replacement.type === 'documented'">
+          {{
+            $t('package.replacement.documented', {
+              community: $t('package.replacement.community'),
+            })
+          }}
+        </template>
+      </p>
+    </div>
+
+    <!-- No dependency action button -->
+    <button
+      v-if="variant === 'nodep' && showAction !== false"
+      type="button"
+      class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-amber-500/20 hover:bg-amber-500/30 rounded transition-colors"
+      :aria-label="$t('compare.no_dependency.add_column')"
+      @click="emit('addNoDep')"
+    >
+      {{ $t('package.replacement.consider_no_dep') }}
+    </button>
+
+    <!-- Info link -->
+    <a
+      v-else-if="docUrl"
+      :href="docUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-blue-500/20 hover:bg-blue-500/30 rounded transition-colors inline-flex items-center gap-1"
+    >
+      {{ $t('package.replacement.learn_more') }}
+      <span class="i-carbon:launch w-3 h-3" />
+    </a>
+  </div>
+</template>

app/components/Package/Replacement.vue

···
   replacement: ModuleReplacement
 }>()
 
-const message = computed<[string, { replacement?: string; nodeVersion?: string }]>(() => {
+const message = computed<
+  [string, { replacement?: string; nodeVersion?: string; community?: string }]
+>(() => {
   switch (props.replacement.type) {
     case 'native':
       return [
···
         'package.replacement.simple',
         {
           replacement: props.replacement.replacement,
+          community: $t('package.replacement.community'),
         },
       ]
     case 'documented':
-      return ['package.replacement.documented', {}]
+      return [
+        'package.replacement.documented',
+        {
+          community: $t('package.replacement.community'),
+        },
+      ]
     case 'none':
       return ['package.replacement.none', {}]
   }

app/components/Tooltip/App.vue

···
 <script setup lang="ts">
 const props = defineProps<{
-  /** Tooltip text */
-  text: string
+  /** Tooltip text (optional when using content slot) */
+  text?: string
   /** Position: 'top' | 'bottom' | 'left' | 'right' */
   position?: 'top' | 'bottom' | 'left' | 'right'
+  /** Enable interactive tooltip (pointer events + hide delay for clickable content) */
+  interactive?: boolean
 }>()
 
 const isVisible = shallowRef(false)
 const tooltipId = useId()
+const hideTimeout = shallowRef<ReturnType<typeof setTimeout> | null>(null)
 
 function show() {
+  if (hideTimeout.value) {
+    clearTimeout(hideTimeout.value)
+    hideTimeout.value = null
+  }
   isVisible.value = true
 }
 
 function hide() {
-  isVisible.value = false
+  if (props.interactive) {
+    // Delay hide so cursor can travel from trigger to tooltip
+    hideTimeout.value = setTimeout(() => {
+      isVisible.value = false
+    }, 150)
+  } else {
+    isVisible.value = false
+  }
 }
+
+const tooltipAttrs = computed(() => {
+  const attrs: Record<string, unknown> = { role: 'tooltip', id: tooltipId }
+  if (props.interactive) {
+    attrs.onMouseenter = show
+    attrs.onMouseleave = hide
+  }
+  return attrs
+})
 </script>
 
 <template>
···
     :text
     :isVisible
     :position
-    :tooltip-attr="{ role: 'tooltip', id: tooltipId }"
+    :interactive
+    :tooltip-attr="tooltipAttrs"
     @mouseenter="show"
     @mouseleave="hide"
     @focusin="show"
     @focusout="hide"
     :aria-describedby="isVisible ? tooltipId : undefined"
-    ><slot
-  /></TooltipBase>
+  >
+    <slot />
+    <template v-if="$slots.content" #content>
+      <slot name="content" />
+    </template>
+  </TooltipBase>
 </template>

app/components/Tooltip/Base.vue

···
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 
 const props = defineProps<{
-  /** Tooltip text */
-  text: string
+  /** Tooltip text (optional when using content slot) */
+  text?: string
   /** Position: 'top' | 'bottom' | 'left' | 'right' */
   position?: 'top' | 'bottom' | 'left' | 'right'
   /** is tooltip visible */
   isVisible: boolean
+  /** Allow pointer events on tooltip (for interactive content like links) */
+  interactive?: boolean
   /** attributes for tooltip element */
   tooltipAttr?: HTMLAttributes
 }>()
···
         <div
           v-if="props.isVisible"
           ref="tooltipRef"
-          class="px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-pre-line z-[100] pointer-events-none"
+          class="px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-pre-line break-words max-w-xs z-[100]"
+          :class="{ 'pointer-events-none': !interactive }"
           :style="floatingStyles"
           v-bind="tooltipAttr"
         >
-          {{ text }}
+          <slot name="content">{{ text }}</slot>
         </div>
       </Transition>
     </Teleport>

app/composables/useCompareReplacements.ts

···
+import type { ModuleReplacement } from 'module-replacements'
+
+export interface ReplacementSuggestion {
+  forPackage: string
+  replacement: ModuleReplacement
+}
+
+/**
+ * Replacement types that suggest "no dependency" (can be replaced with native code or inline).
+ */
+const NO_DEP_REPLACEMENT_TYPES = ['native', 'simple'] as const
+
+/**
+ * Replacement types that are informational only.
+ * These suggest alternative packages exist but don't fit the "no dependency" pattern.
+ */
+const INFO_REPLACEMENT_TYPES = ['documented'] as const
+
+/**
+ * Composable for fetching module replacement suggestions for packages in comparison.
+ * Returns replacements split into "no dep" (actionable) and informational categories.
+ */
+export function useCompareReplacements(packageNames: MaybeRefOrGetter<string[]>) {
+  const packages = computed(() => toValue(packageNames))
+
+  // Cache replacement data by package name
+  const replacements = shallowRef(new Map<string, ModuleReplacement | null>())
+  const loading = shallowRef(false)
+
+  // Fetch replacements for all packages
+  async function fetchReplacements(names: string[]) {
+    if (names.length === 0) return
+
+    // Filter out packages we've already checked
+    const namesToCheck = names.filter(name => !replacements.value.has(name))
+    if (namesToCheck.length === 0) return
+
+    loading.value = true
+
+    try {
+      const results = await Promise.all(
+        namesToCheck.map(async name => {
+          try {
+            const replacement = await $fetch<ModuleReplacement | null>(`/api/replacements/${name}`)
+            return { name, replacement }
+          } catch {
+            return { name, replacement: null }
+          }
+        }),
+      )
+
+      const newReplacements = new Map(replacements.value)
+      for (const { name, replacement } of results) {
+        newReplacements.set(name, replacement)
+      }
+      replacements.value = newReplacements
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // Watch for package changes and fetch replacements
+  if (import.meta.client) {
+    watch(
+      packages,
+      newPackages => {
+        fetchReplacements(newPackages)
+      },
+      { immediate: true },
+    )
+  }
+
+  // Build suggestions from replacements
+  const allSuggestions = computed(() => {
+    const result: ReplacementSuggestion[] = []
+
+    for (const pkg of packages.value) {
+      const replacement = replacements.value.get(pkg)
+      if (!replacement) continue
+
+      result.push({ forPackage: pkg, replacement })
+    }
+
+    return result
+  })
+
+  // Suggestions that prompt adding the "no dep" column (native, simple)
+  const noDepSuggestions = computed(() =>
+    allSuggestions.value.filter(s =>
+      (NO_DEP_REPLACEMENT_TYPES as readonly string[]).includes(s.replacement.type),
+    ),
+  )
+
+  // Informational suggestions that don't prompt "no dep" (documented)
+  const infoSuggestions = computed(() =>
+    allSuggestions.value.filter(s =>
+      (INFO_REPLACEMENT_TYPES as readonly string[]).includes(s.replacement.type),
+    ),
+  )
+
+  return {
+    replacements: readonly(replacements),
+    noDepSuggestions: readonly(noDepSuggestions),
+    infoSuggestions: readonly(infoSuggestions),
+    loading: readonly(loading),
+  }
+}

app/composables/usePackageComparison.ts

···
 import { formatBytes } from '~/utils/formatters'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
 
+/** Special identifier for the "What Would James Do?" comparison column */
+export const NO_DEPENDENCY_ID = '__no_dependency__'
+
+/**
+ * Special display values for the "no dependency" column.
+ * These are explicit markers that get special rendering treatment.
+ */
+export const NoDependencyDisplay = {
+  /** Display as "–" (en-dash) */
+  DASH: '__display_dash__',
+  /** Display as "Up to you!" with good status */
+  UP_TO_YOU: '__display_up_to_you__',
+} as const
+
 export interface PackageComparisonData {
   package: ComparisonPackage
   downloads?: number
···
   }
   /** Whether this is a binary-only package (CLI without library entry points) */
   isBinaryOnly?: boolean
+  /** Marks this as the "no dependency" column for special display */
+  isNoDependency?: boolean
 }
 
 /**
···
       return
     }
 
-    // Only fetch packages not already cached
-    const namesToFetch = names.filter(name => !cache.value.has(name))
+    // Handle "no dependency" column - add to cache immediately
+    if (names.includes(NO_DEPENDENCY_ID) && !cache.value.has(NO_DEPENDENCY_ID)) {
+      const newCache = new Map(cache.value)
+      newCache.set(NO_DEPENDENCY_ID, createNoDependencyData())
+      cache.value = newCache
+    }
+
+    // Only fetch packages not already cached (excluding "no dep" which has no remote data)
+    const namesToFetch = names.filter(name => name !== NO_DEPENDENCY_ID && !cache.value.has(name))
 
     if (namesToFetch.length === 0) {
       status.value = 'success'
···
               $fetch<{ downloads: number }>(
                 `https://api.npmjs.org/downloads/point/last-week/${encodePackageName(name)}`,
               ).catch(() => null),
-              $fetch<PackageAnalysisResponse>(`/api/registry/analysis/${name}`).catch(() => null),
-              $fetch<VulnerabilityTreeResult>(`/api/registry/vulnerabilities/${name}`).catch(
-                () => null,
-              ),
+              $fetch<PackageAnalysisResponse>(
+                `/api/registry/analysis/${encodePackageName(name)}`,
+              ).catch(() => null),
+              $fetch<VulnerabilityTreeResult>(
+                `/api/registry/vulnerabilities/${encodePackageName(name)}`,
+              ).catch(() => null),
             ])
 
             const versionData = pkgData.versions[latestVersion]
···
               selfSize: number
               totalSize: number
               dependencyCount: number
-            }>(`/api/registry/install-size/${name}`)
+            }>(`/api/registry/install-size/${encodePackageName(name)}`)
 
             // Update cache with install size
             const existing = cache.value.get(name)
···
   }
 }
 
+/**
+ * Creates mock data for the "What Would James Do?" comparison column.
+ * This represents the baseline of having no dependency at all.
+ *
+ * Uses explicit display markers (NoDependencyDisplay) instead of undefined
+ * to clearly indicate intentional special values vs missing data.
+ */
+function createNoDependencyData(): PackageComparisonData {
+  return {
+    package: {
+      name: NO_DEPENDENCY_ID,
+      version: '',
+      description: undefined,
+    },
+    isNoDependency: true,
+    downloads: undefined,
+    packageSize: 0,
+    directDeps: 0,
+    installSize: {
+      selfSize: 0,
+      totalSize: 0,
+      dependencyCount: 0,
+    },
+    analysis: undefined,
+    vulnerabilities: undefined,
+    metadata: {
+      license: NoDependencyDisplay.DASH,
+      lastUpdated: NoDependencyDisplay.UP_TO_YOU,
+      engines: undefined,
+      deprecated: undefined,
+    },
+  }
+}
+
+/**
+ * Converts a special display marker to its FacetValue representation.
+ */
+function resolveNoDependencyDisplay(
+  marker: string,
+  t: (key: string) => string,
+): { display: string; status: FacetValue['status'] } | null {
+  switch (marker) {
+    case NoDependencyDisplay.DASH:
+      return { display: '–', status: 'neutral' }
+    case NoDependencyDisplay.UP_TO_YOU:
+      return { display: t('compare.facets.values.up_to_you'), status: 'good' }
+    default:
+      return null
+  }
+}
+
 function computeFacetValue(
   facet: ComparisonFacet,
   data: PackageComparisonData,
   t: (key: string, params?: Record<string, unknown>) => string,
 ): FacetValue | null {
+  const { isNoDependency } = data
+
   switch (facet) {
     case 'downloads': {
-      if (data.downloads === undefined) return null
+      if (data.downloads === undefined) {
+        if (isNoDependency) return { raw: 0, display: '–', status: 'neutral' }
+        return null
+      }
       return {
         raw: data.downloads,
         display: formatCompactNumber(data.downloads),
···
       }
     }
     case 'packageSize': {
-      if (!data.packageSize) return null
+      // A size of zero is valid
+      if (data.packageSize == null) return null
       return {
         raw: data.packageSize,
         display: formatBytes(data.packageSize),
···
       }
     }
     case 'installSize': {
-      if (!data.installSize) return null
+      // A size of zero is valid
+      if (data.installSize == null) return null
       return {
         raw: data.installSize.totalSize,
         display: formatBytes(data.installSize.totalSize),
···
       }
     }
     case 'moduleFormat': {
-      if (!data.analysis) return null
+      if (!data.analysis) {
+        if (isNoDependency)
+          return {
+            raw: 'up-to-you',
+            display: t('compare.facets.values.up_to_you'),
+            status: 'good',
+          }
+        return null
+      }
       const format = data.analysis.moduleFormat
       return {
         raw: format,
···
           tooltip: t('compare.facets.binary_only_tooltip'),
         }
       }
-      if (!data.analysis) return null
+      if (!data.analysis) {
+        if (isNoDependency)
+          return {
+            raw: 'up-to-you',
+            display: t('compare.facets.values.up_to_you'),
+            status: 'good',
+          }
+        return null
+      }
       const types = data.analysis.types
       return {
         raw: types.kind,
···
     case 'engines': {
       const engines = data.metadata?.engines
       if (!engines?.node) {
-        return { raw: null, display: t('compare.facets.values.any'), status: 'neutral' }
+        if (isNoDependency)
+          return {
+            raw: 'up-to-you',
+            display: t('compare.facets.values.up_to_you'),
+            status: 'good',
+          }
+        return {
+          raw: null,
+          display: t('compare.facets.values.any'),
+          status: 'neutral',
+        }
       }
       return {
         raw: engines.node,
···
       }
     }
     case 'vulnerabilities': {
-      if (!data.vulnerabilities) return null
+      if (!data.vulnerabilities) {
+        if (isNoDependency)
+          return {
+            raw: 'up-to-you',
+            display: t('compare.facets.values.up_to_you'),
+            status: 'good',
+          }
+        return null
+      }
       const count = data.vulnerabilities.count
       const sev = data.vulnerabilities.severity
       return {
···
       }
     }
     case 'lastUpdated': {
-      if (!data.metadata?.lastUpdated) return null
-      const date = new Date(data.metadata.lastUpdated)
+      const lastUpdated = data.metadata?.lastUpdated
+      const resolved = lastUpdated ? resolveNoDependencyDisplay(lastUpdated, t) : null
+      if (resolved) return { raw: 0, ...resolved }
+      if (!lastUpdated) return null
+      const date = new Date(lastUpdated)
       return {
         raw: date.getTime(),
-        display: data.metadata.lastUpdated,
+        display: lastUpdated,
         status: isStale(date) ? 'warning' : 'neutral',
         type: 'date',
       }
     }
     case 'license': {
       const license = data.metadata?.license
+      const resolved = license ? resolveNoDependencyDisplay(license, t) : null
+      if (resolved) return { raw: null, ...resolved }
       if (!license) {
-        return { raw: null, display: t('compare.facets.values.unknown'), status: 'warning' }
+        if (isNoDependency) return { raw: null, display: '–', status: 'neutral' }
+        return {
+          raw: null,
+          display: t('compare.facets.values.unknown'),
+          status: 'warning',
+        }
       }
       return {
         raw: license,
···
     }
     case 'dependencies': {
       const depCount = data.directDeps
-      if (depCount === null) return null
+      if (depCount == null) return null
       return {
         raw: depCount,
         display: String(depCount),
···
         status: isDeprecated ? 'bad' : 'good',
       }
     }
-    // Coming soon facets
     case 'totalDependencies': {
       if (!data.installSize) return null
       const totalDepCount = data.installSize.dependencyCount

app/pages/compare.vue

···
 <script setup lang="ts">
+import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
 import { useRouteQuery } from '@vueuse/router'
 
 definePageMeta({
···
 // Fetch comparison data
 const { packagesData, status, getFacetValues, isFacetLoading, isColumnLoading } =
   usePackageComparison(packages)
+
+// Fetch module replacement suggestions
+const { noDepSuggestions, infoSuggestions, replacements } = useCompareReplacements(packages)
+
+// Whether the "no dependency" baseline column is active
+const showNoDependency = computed(() => packages.value.includes(NO_DEPENDENCY_ID))
+
+// Build column definitions for real packages only (no-dep is handled separately by the grid)
+const gridColumns = computed(() =>
+  packages.value
+    .map((pkg, i) => ({ pkg, originalIndex: i }))
+    .filter(({ pkg }) => pkg !== NO_DEPENDENCY_ID)
+    .map(({ pkg, originalIndex }) => {
+      const data = packagesData.value?.[originalIndex]
+      const header = data
+        ? data.package.version
+          ? `${data.package.name}@${data.package.version}`
+          : data.package.name
+        : pkg
+      return {
+        header,
+        replacement: replacements.value.get(pkg) ?? null,
+      }
+    }),
+)
+
+// Whether we can add the no-dep column (not already added and have room)
+const canAddNoDep = computed(
+  () => packages.value.length < 4 && !packages.value.includes(NO_DEPENDENCY_ID),
+)
+
+// Add "no dependency" column to comparison
+function addNoDep() {
+  if (packages.value.length >= 4) return
+  if (packages.value.includes(NO_DEPENDENCY_ID)) return
+  packages.value = [...packages.value, NO_DEPENDENCY_ID]
+}
 
 // Get loading state for each column
 const columnLoading = computed(() => packages.value.map((_, i) => isColumnLoading(i)))
···
 // Check if we have enough packages to compare
 const canCompare = computed(() => packages.value.length >= 2)
 
-// Get headers for the grid
-const gridHeaders = computed(() => {
-  if (!packagesData.value) return packages.value
-  return packagesData.value.map((p, i) =>
-    p ? `${p.package.name}@${p.package.version}` : (packages.value[i] ?? ''),
-  )
-})
+// Extract headers from columns for facet rows
+const gridHeaders = computed(() => gridColumns.value.map(col => col.header))
 
 useSeoMeta({
   title: () =>
···
           {{ $t('compare.packages.section_packages') }}
         </h2>
         <ComparePackageSelector v-model="packages" :max="4" />
+
+        <!-- "No dep" replacement suggestions (native, simple) -->
+        <div v-if="noDepSuggestions.length > 0" class="mt-3 space-y-2">
+          <CompareReplacementSuggestion
+            v-for="suggestion in noDepSuggestions"
+            :key="suggestion.forPackage"
+            :package-name="suggestion.forPackage"
+            :replacement="suggestion.replacement"
+            variant="nodep"
+            :show-action="canAddNoDep"
+            @add-no-dep="addNoDep"
+          />
+        </div>
+
+        <!-- Informational replacement suggestions (documented) -->
+        <div v-if="infoSuggestions.length > 0" class="mt-3 space-y-2">
+          <CompareReplacementSuggestion
+            v-for="suggestion in infoSuggestions"
+            :key="suggestion.forPackage"
+            :package-name="suggestion.forPackage"
+            :replacement="suggestion.replacement"
+            variant="info"
+          />
+        </div>
       </section>
 
       <!-- Facet selector -->
···
         <div v-else-if="packagesData && packagesData.some(p => p !== null)">
           <!-- Desktop: Grid layout -->
           <div class="hidden md:block overflow-x-auto">
-            <CompareComparisonGrid :columns="packages.length" :headers="gridHeaders">
+            <CompareComparisonGrid :columns="gridColumns" :show-no-dependency="showNoDependency">
               <CompareFacetRow
                 v-for="facet in selectedFacets"
                 :key="facet.id"
···
             {{ $t('package.downloads.title') }}
           </h2>
 
-          <CompareLineChart :packages />
+          <CompareLineChart :packages="packages.filter(p => p !== NO_DEPENDENCY_ID)" />
         </div>
 
         <div v-else class="text-center py-12" role="alert">

i18n/locales/en.json

···
       "documented": "The {community} has flagged this package as having more performant alternatives.",
       "none": "This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.",
       "learn_more": "Learn more",
+      "learn_more_above": "Learn more above.",
       "mdn": "MDN",
-      "community": "community"
+      "community": "community",
+      "consider_no_dep": "+ Consider no dep?"
     },
     "stats": {
       "license": "License",
···
       "loading_versions": "Loading versions...",
       "select_version": "Select version"
     },
+    "no_dependency": {
+      "label": "(No dependency)",
+      "typeahead_title": "What Would James Do?",
+      "typeahead_description": "Compare against not using a dependency! e18e approved.",
+      "tooltip_title": "You might not need a dependency",
+      "tooltip_description": "Compare against not using a dependency! The {link} maintains a list of packages that can be replaced with native APIs or simpler alternatives.",
+      "e18e_community": "e18e community",
+      "add_column": "Add no dependency column to comparison"
+    },
     "facets": {
       "group_label": "Comparison facets",
       "all": "all",
···
         "not_deprecated": "No",
         "types_included": "Included",
         "types_none": "None",
-        "vulnerabilities_summary": "{count} ({critical}C/{high}H)"
+        "vulnerabilities_summary": "{count} ({critical}C/{high}H)",
+        "up_to_you": "Up to you!"
       }
     }
   }

i18n/locales/fr-FR.json

···
       "documented": "La {community} a signalé que ce paquet a des alternatives plus performantes.",
       "none": "Ce paquet a été signalé comme n'étant plus nécessaire, et sa fonctionnalité est probablement disponible nativement dans tous les moteurs.",
       "learn_more": "En savoir plus",
+      "learn_more_above": "En savoir plus ci-dessus.",
       "mdn": "MDN",
-      "community": "communauté"
+      "community": "communauté",
+      "consider_no_dep": "+ Envisager sans dépendance ?"
     },
     "stats": {
       "license": "Licence",
···
       "loading_versions": "Chargement des versions...",
       "select_version": "Sélectionner une version"
     },
+    "no_dependency": {
+      "label": "(Sans dépendance)",
+      "typeahead_title": "Et sans dépendance ?",
+      "typeahead_description": "Comparer avec l'absence de dépendance ! Approuvé par e18e.",
+      "tooltip_title": "Vous n'avez peut-être pas besoin d'une dépendance",
+      "tooltip_description": "Comparer avec l'absence de dépendance ! La {link} maintient une liste de paquets pouvant être remplacés par des API natives ou des alternatives plus simples.",
+      "e18e_community": "communauté e18e",
+      "add_column": "Ajouter la colonne sans dépendance à la comparaison"
+    },
     "facets": {
       "group_label": "Facettes de comparaison",
       "all": "tout",
···
         "not_deprecated": "Non",
         "types_included": "Inclus",
         "types_none": "Aucun",
-        "vulnerabilities_summary": "{count} ({critical}C/{high}H)"
+        "vulnerabilities_summary": "{count} ({critical}C/{high}H)",
+        "up_to_you": "À vous de décider !"
       }
     }
   }

lunaria/files/en-GB.json

···
       "documented": "The {community} has flagged this package as having more performant alternatives.",
       "none": "This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.",
       "learn_more": "Learn more",
+      "learn_more_above": "Learn more above.",
       "mdn": "MDN",
-      "community": "community"
+      "community": "community",
+      "consider_no_dep": "+ Consider no dep?"
     },
     "stats": {
       "license": "License",
···
       "loading_versions": "Loading versions...",
       "select_version": "Select version"
     },
+    "no_dependency": {
+      "label": "(No dependency)",
+      "typeahead_title": "What Would James Do?",
+      "typeahead_description": "Compare against not using a dependency! e18e approved.",
+      "tooltip_title": "You might not need a dependency",
+      "tooltip_description": "Compare against not using a dependency! The {link} maintains a list of packages that can be replaced with native APIs or simpler alternatives.",
+      "e18e_community": "e18e community",
+      "add_column": "Add no dependency column to comparison"
+    },
     "facets": {
       "group_label": "Comparison facets",
       "all": "all",
···
         "not_deprecated": "No",
         "types_included": "Included",
         "types_none": "None",
-        "vulnerabilities_summary": "{count} ({critical}C/{high}H)"
+        "vulnerabilities_summary": "{count} ({critical}C/{high}H)",
+        "up_to_you": "Up to you!"
       }
     }
   }

lunaria/files/en-US.json

···
       "documented": "The {community} has flagged this package as having more performant alternatives.",
       "none": "This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.",
       "learn_more": "Learn more",
+      "learn_more_above": "Learn more above.",
       "mdn": "MDN",
-      "community": "community"
+      "community": "community",
+      "consider_no_dep": "+ Consider no dep?"
     },
     "stats": {
       "license": "License",
···
       "loading_versions": "Loading versions...",
       "select_version": "Select version"
     },
+    "no_dependency": {
+      "label": "(No dependency)",
+      "typeahead_title": "What Would James Do?",
+      "typeahead_description": "Compare against not using a dependency! e18e approved.",
+      "tooltip_title": "You might not need a dependency",
+      "tooltip_description": "Compare against not using a dependency! The {link} maintains a list of packages that can be replaced with native APIs or simpler alternatives.",
+      "e18e_community": "e18e community",
+      "add_column": "Add no dependency column to comparison"
+    },
     "facets": {
       "group_label": "Comparison facets",
       "all": "all",
···
         "not_deprecated": "No",
         "types_included": "Included",
         "types_none": "None",
-        "vulnerabilities_summary": "{count} ({critical}C/{high}H)"
+        "vulnerabilities_summary": "{count} ({critical}C/{high}H)",
+        "up_to_you": "Up to you!"
       }
     }
   }

lunaria/files/fr-FR.json

···
       "documented": "La {community} a signalé que ce paquet a des alternatives plus performantes.",
       "none": "Ce paquet a été signalé comme n'étant plus nécessaire, et sa fonctionnalité est probablement disponible nativement dans tous les moteurs.",
       "learn_more": "En savoir plus",
+      "learn_more_above": "En savoir plus ci-dessus.",
       "mdn": "MDN",
-      "community": "communauté"
+      "community": "communauté",
+      "consider_no_dep": "+ Envisager sans dépendance ?"
     },
     "stats": {
       "license": "Licence",
···
       "loading_versions": "Chargement des versions...",
       "select_version": "Sélectionner une version"
     },
+    "no_dependency": {
+      "label": "(Sans dépendance)",
+      "typeahead_title": "Et sans dépendance ?",
+      "typeahead_description": "Comparer avec l'absence de dépendance ! Approuvé par e18e.",
+      "tooltip_title": "Vous n'avez peut-être pas besoin d'une dépendance",
+      "tooltip_description": "Comparer avec l'absence de dépendance ! La {link} maintient une liste de paquets pouvant être remplacés par des API natives ou des alternatives plus simples.",
+      "e18e_community": "communauté e18e",
+      "add_column": "Ajouter la colonne sans dépendance à la comparaison"
+    },
     "facets": {
       "group_label": "Facettes de comparaison",
       "all": "tout",
···
         "not_deprecated": "Non",
         "types_included": "Inclus",
         "types_none": "Aucun",
-        "vulnerabilities_summary": "{count} ({critical}C/{high}H)"
+        "vulnerabilities_summary": "{count} ({critical}C/{high}H)",
+        "up_to_you": "À vous de décider !"
       }
     }
   }

test/e2e/interactions.spec.ts

···
 import { expect, test } from './test-utils'
 
+test.describe('Compare Page', () => {
+  test('no-dep column renders separately from package columns', async ({ page, goto }) => {
+    await goto('/compare?packages=vue,__no_dependency__', { waitUntil: 'hydration' })
+
+    const grid = page.locator('.comparison-grid')
+    await expect(grid).toBeVisible({ timeout: 15000 })
+
+    // Should have the no-dep column with special styling
+    const noDepColumn = grid.locator('.comparison-cell-nodep')
+    await expect(noDepColumn).toBeVisible()
+
+    // The no-dep column should not contain a link
+    await expect(noDepColumn.locator('a')).toHaveCount(0)
+  })
+
+  test('no-dep column is always last even when packages are added after', async ({
+    page,
+    goto,
+  }) => {
+    // Start with vue and no-dep
+    await goto('/compare?packages=vue,__no_dependency__', { waitUntil: 'hydration' })
+
+    const grid = page.locator('.comparison-grid')
+    await expect(grid).toBeVisible({ timeout: 15000 })
+
+    // Add another package via the input
+    const input = page.locator('#package-search')
+    await input.fill('nuxt')
+
+    // Wait for search results and click on nuxt
+    const nuxtOption = page.locator('button:has-text("nuxt")').first()
+    await expect(nuxtOption).toBeVisible({ timeout: 10000 })
+    await nuxtOption.click()
+
+    // URL should have no-dep at the end, not in the middle
+    await expect(page).toHaveURL(/packages=vue,nuxt,__no_dependency__/)
+
+    // Verify column order in the grid: vue, nuxt, then no-dep
+    const headerLinks = grid.locator('.comparison-cell-header a.truncate')
+    await expect(headerLinks).toHaveCount(2)
+    await expect(headerLinks.nth(0)).toContainText('vue')
+    await expect(headerLinks.nth(1)).toContainText('nuxt')
+
+    // No-dep should still be visible as the last column
+    const noDepColumn = grid.locator('.comparison-cell-nodep')
+    await expect(noDepColumn).toBeVisible()
+  })
+})
+
 test.describe('Search Pages', () => {
   test('/search?q=vue → keyboard navigation (arrow keys + enter)', async ({ page, goto }) => {
     await goto('/search?q=vue', { waitUntil: 'hydration' })

test/nuxt/a11y.spec.ts

···
   CompareFacetSelector,
   CompareLineChart,
   ComparePackageSelector,
+  CompareReplacementSuggestion,
   DateTime,
   DependencyPathPopup,
   FilterChips,
···
     it('should have no accessibility violations with 2 columns', async () => {
       const component = await mountSuspended(CompareComparisonGrid, {
         props: {
-          columns: 2,
-          headers: ['vue', 'react'],
+          columns: [{ header: 'vue' }, { header: 'react' }],
         },
         slots: {
           default: '<div>Grid content</div>',
···
     it('should have no accessibility violations with 3 columns', async () => {
       const component = await mountSuspended(CompareComparisonGrid, {
         props: {
-          columns: 3,
-          headers: ['vue', 'react', 'angular'],
+          columns: [{ header: 'vue' }, { header: 'react' }, { header: 'angular' }],
         },
         slots: {
           default: '<div>Grid content</div>',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with no-dependency column', async () => {
+      const component = await mountSuspended(CompareComparisonGrid, {
+        props: {
+          columns: [{ header: 'vue' }, { header: 'react' }],
+          showNoDependency: true,
+        },
+        slots: {
+          default: '<div>Grid content</div>',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CompareReplacementSuggestion', () => {
+    it('should have no accessibility violations for nodep variant with native replacement', async () => {
+      const component = await mountSuspended(CompareReplacementSuggestion, {
+        props: {
+          packageName: 'array-includes',
+          replacement: {
+            type: 'native',
+            moduleName: 'array-includes',
+            nodeVersion: '6.0.0',
+            replacement: 'Array.prototype.includes',
+            mdnPath: 'Global_Objects/Array/includes',
+          },
+          variant: 'nodep',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for nodep variant with simple replacement', async () => {
+      const component = await mountSuspended(CompareReplacementSuggestion, {
+        props: {
+          packageName: 'is-even',
+          replacement: {
+            type: 'simple',
+            moduleName: 'is-even',
+            replacement: 'Use (n % 2) === 0',
+          },
+          variant: 'nodep',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for info variant with documented replacement', async () => {
+      const component = await mountSuspended(CompareReplacementSuggestion, {
+        props: {
+          packageName: 'moment',
+          replacement: {
+            type: 'documented',
+            moduleName: 'moment',
+            docPath: 'moment',
+          },
+          variant: 'info',
         },
       })
       const results = await runAxe(component)

test/nuxt/components/compare/ComparisonGrid.spec.ts

···
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import ComparisonGrid from '~/components/Compare/ComparisonGrid.vue'
 
+function cols(...headers: string[]) {
+  return headers.map(header => ({ header }))
+}
+
 describe('ComparisonGrid', () => {
   describe('header rendering', () => {
     it('renders column headers', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
-          columns: 2,
-          headers: ['lodash@4.17.21', 'underscore@1.13.6'],
+          columns: cols('lodash@4.17.21', 'underscore@1.13.6'),
         },
       })
       expect(component.text()).toContain('lodash@4.17.21')
···
     it('renders correct number of header cells', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
-          columns: 3,
-          headers: ['pkg1', 'pkg2', 'pkg3'],
+          columns: cols('pkg1', 'pkg2', 'pkg3'),
         },
       })
       const headerCells = component.findAll('.comparison-cell-header')
       expect(headerCells.length).toBe(3)
     })
 
+    it('adds no-dep column when showNoDependency is true', async () => {
+      const component = await mountSuspended(ComparisonGrid, {
+        props: {
+          columns: cols('vue', 'react'),
+          showNoDependency: true,
+        },
+      })
+      const headerCells = component.findAll('.comparison-cell-header')
+      expect(headerCells.length).toBe(3)
+      expect(component.find('.comparison-cell-nodep').exists()).toBe(true)
+    })
+
     it('truncates long header text with title attribute', async () => {
       const longName = 'very-long-package-name@1.0.0-beta.1'
       const component = await mountSuspended(ComparisonGrid, {
         props: {
-          columns: 2,
-          headers: [longName, 'short'],
+          columns: cols(longName, 'short'),
         },
       })
-      const spans = component.findAll('.truncate')
-      const longSpan = spans.find(s => s.text() === longName)
-      expect(longSpan?.attributes('title')).toBe(longName)
+      const links = component.findAll('a.truncate')
+      const longLink = links.find(a => a.text() === longName)
+      expect(longLink?.attributes('title')).toBe(longName)
     })
   })
 
···
     it('applies columns-2 class for 2 columns', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
-          columns: 2,
-          headers: ['a', 'b'],
+          columns: cols('a', 'b'),
         },
       })
       expect(component.find('.columns-2').exists()).toBe(true)
     })
 
-    it('applies columns-3 class for 3 columns', async () => {
+    it('applies columns-3 class for 2 packages + no-dep', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
-          columns: 3,
-          headers: ['a', 'b', 'c'],
+          columns: cols('a', 'b'),
+          showNoDependency: true,
         },
       })
       expect(component.find('.columns-3').exists()).toBe(true)
···
     it('applies columns-4 class for 4 columns', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
-          columns: 4,
-          headers: ['a', 'b', 'c', 'd'],
+          columns: cols('a', 'b', 'c', 'd'),
         },
       })
       expect(component.find('.columns-4').exists()).toBe(true)
···
     it('sets min-width for 4 columns to 800px', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
-          columns: 4,
-          headers: ['a', 'b', 'c', 'd'],
+          columns: cols('a', 'b', 'c', 'd'),
         },
       })
       expect(component.find('.min-w-\\[800px\\]').exists()).toBe(true)
···
     it('sets min-width for 2-3 columns to 600px', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
-          columns: 2,
-          headers: ['a', 'b'],
+          columns: cols('a', 'b'),
         },
       })
       expect(component.find('.min-w-\\[600px\\]').exists()).toBe(true)
···
     it('sets --columns CSS variable', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
-          columns: 3,
-          headers: ['a', 'b', 'c'],
+          columns: cols('a', 'b', 'c'),
         },
       })
       const grid = component.find('.comparison-grid')
···
     it('renders default slot content', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
-          columns: 2,
-          headers: ['a', 'b'],
+          columns: cols('a', 'b'),
         },
         slots: {
           default: '<div class="test-row">Row content</div>',

test/nuxt/composables/use-compare-replacements.spec.ts

···
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import type { ModuleReplacement } from 'module-replacements'
+import type { ReplacementSuggestion } from '~/composables/useCompareReplacements'
+
+/**
+ * Helper to test useCompareReplacements by wrapping it in a component.
+ */
+async function useCompareReplacementsInComponent(packageNames: string[]) {
+  const capturedNoDepSuggestions = ref<ReplacementSuggestion[]>([])
+  const capturedInfoSuggestions = ref<ReplacementSuggestion[]>([])
+  const capturedLoading = ref(false)
+  const capturedReplacements = ref(new Map<string, ModuleReplacement | null>())
+
+  const WrapperComponent = defineComponent({
+    setup() {
+      const { noDepSuggestions, infoSuggestions, loading, replacements } =
+        useCompareReplacements(packageNames)
+
+      watchEffect(() => {
+        capturedNoDepSuggestions.value = [...noDepSuggestions.value]
+        capturedInfoSuggestions.value = [...infoSuggestions.value]
+        capturedLoading.value = loading.value
+        capturedReplacements.value = new Map(replacements.value)
+      })
+
+      return () => h('div')
+    },
+  })
+
+  await mountSuspended(WrapperComponent)
+
+  return {
+    noDepSuggestions: capturedNoDepSuggestions,
+    infoSuggestions: capturedInfoSuggestions,
+    loading: capturedLoading,
+    replacements: capturedReplacements,
+  }
+}
+
+describe('useCompareReplacements', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  describe('suggestion categorization', () => {
+    it('categorizes native replacements as no dep suggestions', async () => {
+      vi.stubGlobal(
+        '$fetch',
+        vi.fn().mockImplementation((url: string) => {
+          if (url.includes('/api/replacements/array-includes')) {
+            return Promise.resolve({
+              type: 'native',
+              moduleName: 'array-includes',
+              nodeVersion: '6.0.0',
+              replacement: 'Array.prototype.includes',
+              mdnPath: 'Global_Objects/Array/includes',
+              category: 'native',
+            } satisfies ModuleReplacement)
+          }
+          return Promise.resolve(null)
+        }),
+      )
+
+      const { noDepSuggestions, infoSuggestions } = await useCompareReplacementsInComponent([
+        'array-includes',
+      ])
+
+      await vi.waitFor(() => {
+        expect(noDepSuggestions.value).toHaveLength(1)
+      })
+
+      expect(noDepSuggestions.value[0]?.forPackage).toBe('array-includes')
+      expect(noDepSuggestions.value[0]?.replacement.type).toBe('native')
+      expect(infoSuggestions.value).toHaveLength(0)
+    })
+
+    it('categorizes simple replacements as no dep suggestions', async () => {
+      vi.stubGlobal(
+        '$fetch',
+        vi.fn().mockImplementation((url: string) => {
+          if (url.includes('/api/replacements/is-even')) {
+            return Promise.resolve({
+              type: 'simple',
+              moduleName: 'is-even',
+              replacement: 'Use (n % 2) === 0',
+              category: 'micro-utilities',
+            } satisfies ModuleReplacement)
+          }
+          return Promise.resolve(null)
+        }),
+      )
+
+      const { noDepSuggestions, infoSuggestions } = await useCompareReplacementsInComponent([
+        'is-even',
+      ])
+
+      await vi.waitFor(() => {
+        expect(noDepSuggestions.value).toHaveLength(1)
+      })
+
+      expect(noDepSuggestions.value[0]?.forPackage).toBe('is-even')
+      expect(noDepSuggestions.value[0]?.replacement.type).toBe('simple')
+      expect(infoSuggestions.value).toHaveLength(0)
+    })
+
+    it('categorizes documented replacements as info suggestions', async () => {
+      vi.stubGlobal(
+        '$fetch',
+        vi.fn().mockImplementation((url: string) => {
+          if (url.includes('/api/replacements/moment')) {
+            return Promise.resolve({
+              type: 'documented',
+              moduleName: 'moment',
+              docPath: 'moment',
+              category: 'preferred',
+            } satisfies ModuleReplacement)
+          }
+          return Promise.resolve(null)
+        }),
+      )
+
+      const { noDepSuggestions, infoSuggestions } = await useCompareReplacementsInComponent([
+        'moment',
+      ])
+
+      await vi.waitFor(() => {
+        expect(infoSuggestions.value).toHaveLength(1)
+      })
+
+      expect(infoSuggestions.value[0]?.forPackage).toBe('moment')
+      expect(infoSuggestions.value[0]?.replacement.type).toBe('documented')
+      expect(noDepSuggestions.value).toHaveLength(0)
+    })
+
+    it('correctly splits multiple packages into no dep and info categories', async () => {
+      vi.stubGlobal(
+        '$fetch',
+        vi.fn().mockImplementation((url: string) => {
+          if (url.includes('/api/replacements/is-odd')) {
+            return Promise.resolve({
+              type: 'simple',
+              moduleName: 'is-odd',
+              replacement: 'Use (n % 2) !== 0',
+              category: 'micro-utilities',
+            } satisfies ModuleReplacement)
+          }
+          if (url.includes('/api/replacements/lodash')) {
+            return Promise.resolve({
+              type: 'documented',
+              moduleName: 'lodash',
+              docPath: 'lodash-underscore',
+              category: 'preferred',
+            } satisfies ModuleReplacement)
+          }
+          if (url.includes('/api/replacements/array-map')) {
+            return Promise.resolve({
+              type: 'native',
+              moduleName: 'array-map',
+              nodeVersion: '0.10.0',
+              replacement: 'Array.prototype.map',
+              mdnPath: 'Global_Objects/Array/map',
+              category: 'native',
+            } satisfies ModuleReplacement)
+          }
+          return Promise.resolve(null)
+        }),
+      )
+
+      const { noDepSuggestions, infoSuggestions } = await useCompareReplacementsInComponent([
+        'is-odd',
+        'lodash',
+        'array-map',
+      ])
+
+      await vi.waitFor(() => {
+        expect(noDepSuggestions.value).toHaveLength(2)
+        expect(infoSuggestions.value).toHaveLength(1)
+      })
+
+      // no dep should have simple and native
+      const noDepTypes = noDepSuggestions.value.map(s => s.replacement.type)
+      expect(noDepTypes).toContain('simple')
+      expect(noDepTypes).toContain('native')
+
+      // Info should have documented
+      expect(infoSuggestions.value[0]?.replacement.type).toBe('documented')
+    })
+  })
+
+  describe('packages without replacements', () => {
+    it('does not include packages with no replacement data', async () => {
+      vi.stubGlobal(
+        '$fetch',
+        vi.fn().mockImplementation((url: string) => {
+          if (url.includes('/api/replacements/react')) {
+            return Promise.resolve(null) // No replacement for react
+          }
+          return Promise.resolve(null)
+        }),
+      )
+
+      const { noDepSuggestions, infoSuggestions, replacements } =
+        await useCompareReplacementsInComponent(['react'])
+
+      await vi.waitFor(() => {
+        expect(replacements.value.has('react')).toBe(true)
+      })
+
+      expect(noDepSuggestions.value).toHaveLength(0)
+      expect(infoSuggestions.value).toHaveLength(0)
+    })
+
+    it('handles fetch errors gracefully', async () => {
+      vi.stubGlobal(
+        '$fetch',
+        vi.fn().mockImplementation(() => {
+          return Promise.reject(new Error('Network error'))
+        }),
+      )
+
+      const { noDepSuggestions, infoSuggestions, replacements } =
+        await useCompareReplacementsInComponent(['some-package'])
+
+      await vi.waitFor(() => {
+        expect(replacements.value.has('some-package')).toBe(true)
+      })
+
+      expect(replacements.value.get('some-package')).toBeNull()
+      expect(noDepSuggestions.value).toHaveLength(0)
+      expect(infoSuggestions.value).toHaveLength(0)
+    })
+  })
+
+  describe('caching', () => {
+    it('caches replacement data and does not refetch', async () => {
+      const fetchMock = vi.fn().mockImplementation((url: string) => {
+        if (url.includes('/api/replacements/is-even')) {
+          return Promise.resolve({
+            type: 'simple',
+            moduleName: 'is-even',
+            replacement: 'Use (n % 2) === 0',
+            category: 'micro-utilities',
+          } satisfies ModuleReplacement)
+        }
+        return Promise.resolve(null)
+      })
+
+      vi.stubGlobal('$fetch', fetchMock)
+
+      const { noDepSuggestions } = await useCompareReplacementsInComponent(['is-even'])
+
+      await vi.waitFor(() => {
+        expect(noDepSuggestions.value).toHaveLength(1)
+      })
+
+      // Check that fetch was called exactly once for is-even
+      const isEvenCalls = fetchMock.mock.calls.filter(
+        (call: unknown[]) => typeof call[0] === 'string' && call[0].includes('is-even'),
+      )
+      expect(isEvenCalls).toHaveLength(1)
+    })
+  })
+})