From 884033fb98677379ec82ab2239ffecb665efb924 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Thu, 5 Feb 2026 10:11:55 +0100
Subject: [PATCH 1/2] feat(ui): display all engines in Compatibility section
 and make common ones pretty

This PR makes Compatibility section more generic, making it display any engine that is actually set in packument. On top of that, it makes the list prettier by not displaying raw machine-oriented data but icons and labels for most popular engines.
---
 app/components/Package/Compatibility.vue | 52 +++++++++++++++++-------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/app/components/Package/Compatibility.vue b/app/components/Package/Compatibility.vue
index aac4b0b0dd..73ff43a7e6 100644
--- a/app/components/Package/Compatibility.vue
+++ b/app/components/Package/Compatibility.vue
@@ -1,28 +1,50 @@
 <script setup lang="ts">
 const props = defineProps<{
-  engines?: {
-    node?: string
-    npm?: string
-  }
+  engines?: Record<string, string>
 }>()
+
+const engineNames: Record<string, string> = {
+  bun: 'Bun',
+  node: 'Node.js',
+  npm: 'npm',
+}
+
+// Map engine name to icon class
+const engineIcons: Record<string, string> = {
+  bun: 'i-simple-icons:bun',
+  node: 'i-simple-icons:nodedotjs',
+  npm: 'i-simple-icons:npm',
+}
+
+function getName(engine: string): string {
+  return engineNames[engine] || engine
+}
+
+function getIcon(engine: string): string {
+  return engineIcons[engine] || 'i-carbon:code'
+}
 </script>
 <template>
   <CollapsibleSection
-    v-if="engines && (engines.node || engines.npm)"
+    v-if="engines && Object.keys(engines).length"
     :title="$t('package.compatibility')"
     id="compatibility"
   >
     <dl class="space-y-2">
-      <div v-if="engines.node" class="flex justify-between gap-4 py-1">
-        <dt class="text-fg-muted text-sm shrink-0">node</dt>
-        <dd class="font-mono text-sm text-fg text-end" :title="engines.node">
-          {{ engines.node }}
-        </dd>
-      </div>
-      <div v-if="engines.npm" class="flex justify-between gap-4 py-1">
-        <dt class="text-fg-muted text-sm shrink-0">npm</dt>
-        <dd class="font-mono text-sm text-fg text-end" :title="engines.npm">
-          {{ engines.npm }}
+      <div
+        v-for="(version, engine) in engines"
+        :key="engine"
+        class="flex justify-between gap-4 py-1"
+      >
+        <dt class="flex items-center gap-2 text-fg-muted text-sm shrink-0">
+          <span
+            :class="[getIcon(engine), 'inline-block w-4 h-4 shrink-0 text-fg-muted']"
+            aria-hidden="true"
+          />
+          {{ getName(engine) }}
+        </dt>
+        <dd class="font-mono text-sm text-fg text-end" :title="version">
+          {{ version }}
         </dd>
       </div>
     </dl>

From 473bcc7e23cc85e5a1b840181c1f786e870bd8c6 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Thu, 5 Feb 2026 10:23:13 +0100
Subject: [PATCH 2/2] CR fixes

---
 app/components/Package/Compatibility.vue        |  9 +++++++--
 shared/utils/package-analysis.ts                | 12 ++----------
 test/unit/shared/utils/package-analysis.spec.ts |  7 ++++++-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/components/Package/Compatibility.vue b/app/components/Package/Compatibility.vue
index 73ff43a7e6..a5eff166cb 100644
--- a/app/components/Package/Compatibility.vue
+++ b/app/components/Package/Compatibility.vue
@@ -23,16 +23,21 @@ function getName(engine: string): string {
 function getIcon(engine: string): string {
   return engineIcons[engine] || 'i-carbon:code'
 }
+
+const sortedEngines = computed(() => {
+  const entries = Object.entries(props.engines ?? {})
+  return entries.sort(([a], [b]) => a.localeCompare(b))
+})
 </script>
 <template>
   <CollapsibleSection
-    v-if="engines && Object.keys(engines).length"
+    v-if="sortedEngines.length"
     :title="$t('package.compatibility')"
     id="compatibility"
   >
     <dl class="space-y-2">
       <div
-        v-for="(version, engine) in engines"
+        v-for="[engine, version] in sortedEngines"
         :key="engine"
         class="flex justify-between gap-4 py-1"
       >
diff --git a/shared/utils/package-analysis.ts b/shared/utils/package-analysis.ts
index f4a767220f..864038bca1 100644
--- a/shared/utils/package-analysis.ts
+++ b/shared/utils/package-analysis.ts
@@ -12,10 +12,7 @@ export type TypesStatus =
 export interface PackageAnalysis {
   moduleFormat: ModuleFormat
   types: TypesStatus
-  engines?: {
-    node?: string
-    npm?: string
-  }
+  engines?: Record<string, string>
   /** Associated create-* package if it exists */
   createPackage?: CreatePackageInfo
 }
@@ -306,12 +303,7 @@ export function analyzePackage(
   return {
     moduleFormat,
     types,
-    engines: pkg.engines
-      ? {
-          node: pkg.engines.node,
-          npm: pkg.engines.npm,
-        }
-      : undefined,
+    engines: pkg.engines,
     createPackage: options?.createPackage,
   }
 }
diff --git a/test/unit/shared/utils/package-analysis.spec.ts b/test/unit/shared/utils/package-analysis.spec.ts
index 1aeae30ce8..2dc3b4de1d 100644
--- a/test/unit/shared/utils/package-analysis.spec.ts
+++ b/test/unit/shared/utils/package-analysis.spec.ts
@@ -217,12 +217,17 @@ describe('analyzePackage', () => {
       name: 'test',
       main: 'index.js',
       engines: {
+        bun: '>=1.0.0',
         node: '>=18',
         npm: '>=9',
       },
     })
 
-    expect(result.engines).toEqual({ node: '>=18', npm: '>=9' })
+    expect(result.engines).toEqual({
+      bun: '>=1.0.0',
+      node: '>=18',
+      npm: '>=9',
+    })
   })
 
   it('detects @types package when typesPackage info is provided', () => {