From 756ab952ce532978c086d704f984cf72485c90a7 Mon Sep 17 00:00:00 2001
From: Roman <dev@rman.dev>
Date: Fri, 23 Oct 2026 17:52:55 +0100
Subject: [PATCH 1/6] fix(ui): render only the active package manager

---
 .../Package/Install/AdditionalCommands.vue    | 132 +++++-------------
 app/components/Package/Install/Dropdown.vue   |  30 +---
 2 files changed, 37 insertions(+), 125 deletions(-)

diff --git a/app/components/Package/Install/AdditionalCommands.vue b/app/components/Package/Install/AdditionalCommands.vue
index 712ddb2b3b..eba8928cb4 100644
--- a/app/components/Package/Install/AdditionalCommands.vue
+++ b/app/components/Package/Install/AdditionalCommands.vue
@@ -16,7 +16,6 @@ const props = defineProps<{
   selectedPm: PackageManagerId
 }>()
 
-// Matches the summary row's copy button style (Package/Install/Dropdown.vue) for visual consistency.
 const copyButtonClass =
   'text-fg-muted bg-bg-subtle/80 border-border transition-all duration-150 hover:scale-105 active:scale-90 select-none'
 
@@ -24,41 +23,41 @@ const devDependencySuggestion = computed(
   () => props.devDependencySuggestion ?? { recommended: false as const },
 )
 
-function getDevInstallPartsForPM(pmId: PackageManagerId) {
+function getDevInstallParts() {
   return getInstallCommandParts({
     packageName: props.packageName,
-    packageManager: pmId,
+    packageManager: props.selectedPm,
     version: props.installVersionOverride ?? props.requestedVersion,
     jsrInfo: props.jsrInfo,
     dev: true,
   })
 }
 
-function getTypesInstallPartsForPM(pmId: PackageManagerId) {
+function getTypesInstallParts() {
   if (!props.typesPackageName) return []
   return getInstallCommandParts({
     packageName: props.typesPackageName,
-    packageManager: pmId,
+    packageManager: props.selectedPm,
     jsrInfo: null,
     dev: true,
   })
 }
 
-function getRunPartsForPM(pmId: PackageManagerId, command?: string) {
+function getRunParts(command?: string) {
   return getRunCommandParts({
     packageName: props.packageName,
-    packageManager: pmId,
+    packageManager: props.selectedPm,
     jsrInfo: props.jsrInfo,
     command,
     isBinaryOnly: false,
   })
 }
 
-function getCreatePartsForPM(pmId: PackageManagerId) {
+function getCreateParts() {
   if (!props.createPackageInfo) return []
   return getExecuteCommandParts({
     packageName: props.createPackageInfo.packageName,
-    packageManager: pmId,
+    packageManager: props.selectedPm,
     jsrInfo: null,
     isCreatePackage: true,
   })
@@ -145,24 +144,15 @@ function copyCreateCommand() {
       <p class="text-xs text-fg-subtle mb-0.5 select-none">
         {{ $t('package.get_started.dev_dependency_hint') }}
       </p>
-      <code
-        class="font-mono text-sm min-w-0 block truncate tracking-tight"
-        dir="ltr"
-        v-for="pm in packageManagers"
-        :key="pm.id"
-        :data-pm-additional-cmd="pm.id"
-        ><span class="text-fg-subtle select-none">${{ ' ' }}</span
-        ><span
-          v-for="(part, i) in getDevInstallPartsForPM(pm.id)"
+      <code class="font-mono text-sm min-w-0 block truncate tracking-tight" dir="ltr">
+        <span class="text-fg-subtle select-none">$ </span>
+        <span
+          v-for="(part, i) in getDevInstallParts()"
           :key="i"
-          :class="
-            i === getDevInstallPartsForPM(pm.id).length - 1
-              ? 'text-fg font-medium'
-              : 'text-fg-muted'
-          "
+          :class="i === getDevInstallParts().length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
           >{{ i > 0 ? ' ' : '' }}{{ part }}</span
-        ></code
-      >
+        >
+      </code>
     </div>
   </div>
 
@@ -184,24 +174,15 @@ function copyCreateCommand() {
         {{ $t('package.get_started.types_label') }}
       </p>
       <div class="flex items-center gap-2 min-w-0">
-        <code
-          class="font-mono text-sm min-w-0 truncate tracking-tight"
-          dir="ltr"
-          v-for="pm in packageManagers"
-          :key="pm.id"
-          :data-pm-additional-cmd="pm.id"
-          ><span class="text-fg-subtle select-none">${{ ' ' }}</span
-          ><span
-            v-for="(part, i) in getTypesInstallPartsForPM(pm.id)"
+        <code class="font-mono text-sm min-w-0 truncate tracking-tight" dir="ltr">
+          <span class="text-fg-subtle select-none">$ </span>
+          <span
+            v-for="(part, i) in getTypesInstallParts()"
             :key="i"
-            :class="
-              i === getTypesInstallPartsForPM(pm.id).length - 1
-                ? 'text-fg font-medium'
-                : 'text-fg-muted'
-            "
+            :class="i === getTypesInstallParts().length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
             >{{ i > 0 ? ' ' : '' }}{{ part }}</span
-          ></code
-        >
+          >
+        </code>
         <NuxtLink
           :to="packageRoute(typesPackageName!)"
           class="shrink-0 text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-accent/70 rounded select-none -m-1 p-1"
@@ -231,24 +212,15 @@ function copyCreateCommand() {
     />
     <div class="min-w-0 flex-1">
       <p class="text-xs text-fg-subtle mb-0.5 select-none">{{ $t('package.run.locally') }}</p>
-      <code
-        class="font-mono text-sm min-w-0 block truncate tracking-tight"
-        dir="ltr"
-        v-for="pm in packageManagers"
-        :key="pm.id"
-        :data-pm-additional-cmd="pm.id"
-        ><span class="text-fg-subtle select-none">${{ ' ' }}</span
-        ><span
-          v-for="(part, i) in getRunPartsForPM(pm.id, executableInfo?.primaryCommand)"
+      <code class="font-mono text-sm min-w-0 block truncate tracking-tight" dir="ltr">
+        <span class="text-fg-subtle select-none">$ </span>
+        <span
+          v-for="(part, i) in getRunParts(executableInfo?.primaryCommand)"
           :key="i"
-          :class="
-            i === getRunPartsForPM(pm.id, executableInfo?.primaryCommand).length - 1
-              ? 'text-fg font-medium'
-              : 'text-fg-muted'
-          "
+          :class="i === getRunParts(executableInfo?.primaryCommand).length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
           >{{ i > 0 ? ' ' : '' }}{{ part }}</span
-        ></code
-      >
+        >
+      </code>
     </div>
   </div>
 
@@ -282,47 +254,15 @@ function copyCreateCommand() {
           </NuxtLink>
         </TooltipApp>
       </div>
-      <code
-        class="font-mono text-sm min-w-0 block truncate tracking-tight"
-        dir="ltr"
-        v-for="pm in packageManagers"
-        :key="pm.id"
-        :data-pm-additional-cmd="pm.id"
-        ><span class="text-fg-subtle select-none">${{ ' ' }}</span
-        ><span
-          v-for="(part, i) in getCreatePartsForPM(pm.id)"
+      <code class="font-mono text-sm min-w-0 block truncate tracking-tight" dir="ltr">
+        <span class="text-fg-subtle select-none">$ </span>
+        <span
+          v-for="(part, i) in getCreateParts()"
           :key="i"
-          :class="
-            i === getCreatePartsForPM(pm.id).length - 1 ? 'text-fg font-medium' : 'text-fg-muted'
-          "
+          :class="i === getCreateParts().length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
           >{{ i > 0 ? ' ' : '' }}{{ part }}</span
-        ></code
-      >
+        >
+      </code>
     </div>
   </div>
 </template>
-<style>
-/* Hide all variants by default when preference is set */
-:root[data-pm] [data-pm-additional-cmd] {
-  display: none;
-}
-
-/* Show only the matching package manager command */
-:root[data-pm='npm'] [data-pm-additional-cmd='npm'],
-:root[data-pm='pnpm'] [data-pm-additional-cmd='pnpm'],
-:root[data-pm='yarn'] [data-pm-additional-cmd='yarn'],
-:root[data-pm='bun'] [data-pm-additional-cmd='bun'],
-:root[data-pm='deno'] [data-pm-additional-cmd='deno'],
-:root[data-pm='vlt'] [data-pm-additional-cmd='vlt'],
-:root[data-pm='vp'] [data-pm-additional-cmd='vp'],
-:root[data-pm='nub'] [data-pm-additional-cmd='nub'],
-:root[data-pm='ni'] [data-pm-additional-cmd='ni'],
-:root[data-pm='upm'] [data-pm-additional-cmd='upm'] {
-  display: inline;
-}
-
-/* Fallback: when no data-pm is set (SSR initial), show npm as default */
-:root:not([data-pm]) [data-pm-additional-cmd]:not([data-pm-additional-cmd='npm']) {
-  display: none;
-}
-</style>
diff --git a/app/components/Package/Install/Dropdown.vue b/app/components/Package/Install/Dropdown.vue
index d5ebca4aef..df6706f9a9 100644
--- a/app/components/Package/Install/Dropdown.vue
+++ b/app/components/Package/Install/Dropdown.vue
@@ -137,14 +137,11 @@ onPrehydrate(el => {
             <code
               class="font-mono text-sm min-w-0 flex-1 truncate tracking-tight cursor-text select-text"
               dir="ltr"
-              v-for="pm in packageManagers"
-              :key="pm.id"
-              :data-pm-cmd="pm.id"
             >
               <span
                 v-for="(part, i) in getInstallCommandParts({
                   packageName: props.packageName,
-                  packageManager: pm.id,
+                  packageManager: selectedPM,
                   version: props.installVersionOverride ?? props.requestedVersion,
                   jsrInfo: props.jsrInfo,
                 })"
@@ -186,28 +183,3 @@ onPrehydrate(el => {
     </div>
   </section>
 </template>
-<style>
-/* Hide all variants by default when preference is set */
-:root[data-pm] [data-pm-cmd] {
-  display: none;
-}
-
-/* Show only the matching package manager command */
-:root[data-pm='npm'] [data-pm-cmd='npm'],
-:root[data-pm='pnpm'] [data-pm-cmd='pnpm'],
-:root[data-pm='yarn'] [data-pm-cmd='yarn'],
-:root[data-pm='bun'] [data-pm-cmd='bun'],
-:root[data-pm='deno'] [data-pm-cmd='deno'],
-:root[data-pm='vlt'] [data-pm-cmd='vlt'],
-:root[data-pm='vp'] [data-pm-cmd='vp'],
-:root[data-pm='nub'] [data-pm-cmd='nub'],
-:root[data-pm='ni'] [data-pm-cmd='ni'],
-:root[data-pm='upm'] [data-pm-cmd='upm'] {
-  display: inline;
-}
-
-/* Fallback: when no data-pm is set (SSR initial), show npm as default */
-:root:not([data-pm]) [data-pm-cmd]:not([data-pm-cmd='npm']) {
-  display: none;
-}
-</style>

From 6493ba169d0266ac9cd1fecf0a08d48014c86853 Mon Sep 17 00:00:00 2001
From: Roman <dev@rman.dev>
Date: Fri, 23 Oct 2026 17:57:43 +0100
Subject: [PATCH 2/6] fix

---
 app/components/Package/Install/AdditionalCommands.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/Package/Install/AdditionalCommands.vue b/app/components/Package/Install/AdditionalCommands.vue
index eba8928cb4..2d2371a5a2 100644
--- a/app/components/Package/Install/AdditionalCommands.vue
+++ b/app/components/Package/Install/AdditionalCommands.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
   selectedPm: PackageManagerId
 }>()
 
+// Matches the summary row's copy button style (Package/Install/Dropdown.vue) for visual consistency.
 const copyButtonClass =
   'text-fg-muted bg-bg-subtle/80 border-border transition-all duration-150 hover:scale-105 active:scale-90 select-none'
 

From 30aa755687bb666feb147f67e5610f1a1514f654 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 23 Oct 2026 16:59:00 +0000
Subject: [PATCH 3/6] [autofix.ci] apply automated fixes

---
 app/components/Package/Install/AdditionalCommands.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/Install/AdditionalCommands.vue b/app/components/Package/Install/AdditionalCommands.vue
index 2d2371a5a2..91a18045f1 100644
--- a/app/components/Package/Install/AdditionalCommands.vue
+++ b/app/components/Package/Install/AdditionalCommands.vue
@@ -180,7 +180,9 @@ function copyCreateCommand() {
           <span
             v-for="(part, i) in getTypesInstallParts()"
             :key="i"
-            :class="i === getTypesInstallParts().length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
+            :class="
+              i === getTypesInstallParts().length - 1 ? 'text-fg font-medium' : 'text-fg-muted'
+            "
             >{{ i > 0 ? ' ' : '' }}{{ part }}</span
           >
         </code>
@@ -218,7 +220,11 @@ function copyCreateCommand() {
         <span
           v-for="(part, i) in getRunParts(executableInfo?.primaryCommand)"
           :key="i"
-          :class="i === getRunParts(executableInfo?.primaryCommand).length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
+          :class="
+            i === getRunParts(executableInfo?.primaryCommand).length - 1
+              ? 'text-fg font-medium'
+              : 'text-fg-muted'
+          "
           >{{ i > 0 ? ' ' : '' }}{{ part }}</span
         >
       </code>

From ecaa4c06e89fc22869a6182e946b5a5fcc53f837 Mon Sep 17 00:00:00 2001
From: Roman <dev@rman.dev>
Date: Fri, 23 Oct 2026 18:15:41 +0100
Subject: [PATCH 4/6] fix tests and hydration

---
 .../Package/Install/AdditionalCommands.vue    | 40 +++++++++++++++----
 test/e2e/create-command.spec.ts               |  9 ++---
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/app/components/Package/Install/AdditionalCommands.vue b/app/components/Package/Install/AdditionalCommands.vue
index 91a18045f1..56411ce8fe 100644
--- a/app/components/Package/Install/AdditionalCommands.vue
+++ b/app/components/Package/Install/AdditionalCommands.vue
@@ -2,6 +2,7 @@
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import type { DevDependencySuggestion } from '#shared/utils/dev-dependency'
 import type { PackageManagerId } from '~/utils/install-command'
+import { getPackageManagerConfig } from '~/utils/install-command'
 
 const props = defineProps<{
   packageName: string
@@ -16,6 +17,13 @@ const props = defineProps<{
   selectedPm: PackageManagerId
 }>()
 
+const resolvedPm = computed(() => {
+  if (import.meta.server) return 'npm'
+  return props.selectedPm
+})
+
+const selectedPackageManagerConfig = computed(() => getPackageManagerConfig(resolvedPm.value))
+
 // Matches the summary row's copy button style (Package/Install/Dropdown.vue) for visual consistency.
 const copyButtonClass =
   'text-fg-muted bg-bg-subtle/80 border-border transition-all duration-150 hover:scale-105 active:scale-90 select-none'
@@ -27,7 +35,7 @@ const devDependencySuggestion = computed(
 function getDevInstallParts() {
   return getInstallCommandParts({
     packageName: props.packageName,
-    packageManager: props.selectedPm,
+    packageManager: selectedPackageManagerConfig.value.id,
     version: props.installVersionOverride ?? props.requestedVersion,
     jsrInfo: props.jsrInfo,
     dev: true,
@@ -38,7 +46,7 @@ function getTypesInstallParts() {
   if (!props.typesPackageName) return []
   return getInstallCommandParts({
     packageName: props.typesPackageName,
-    packageManager: props.selectedPm,
+    packageManager: selectedPackageManagerConfig.value.id,
     jsrInfo: null,
     dev: true,
   })
@@ -47,7 +55,7 @@ function getTypesInstallParts() {
 function getRunParts(command?: string) {
   return getRunCommandParts({
     packageName: props.packageName,
-    packageManager: props.selectedPm,
+    packageManager: selectedPackageManagerConfig.value.id,
     jsrInfo: props.jsrInfo,
     command,
     isBinaryOnly: false,
@@ -58,7 +66,7 @@ function getCreateParts() {
   if (!props.createPackageInfo) return []
   return getExecuteCommandParts({
     packageName: props.createPackageInfo.packageName,
-    packageManager: props.selectedPm,
+    packageManager: selectedPackageManagerConfig.value.id,
     jsrInfo: null,
     isCreatePackage: true,
   })
@@ -145,7 +153,11 @@ function copyCreateCommand() {
       <p class="text-xs text-fg-subtle mb-0.5 select-none">
         {{ $t('package.get_started.dev_dependency_hint') }}
       </p>
-      <code class="font-mono text-sm min-w-0 block truncate tracking-tight" dir="ltr">
+      <code
+        class="font-mono text-sm min-w-0 block truncate tracking-tight"
+        dir="ltr"
+        :data-pm-additional-cmd="selectedPackageManagerConfig.id"
+      >
         <span class="text-fg-subtle select-none">$ </span>
         <span
           v-for="(part, i) in getDevInstallParts()"
@@ -175,7 +187,11 @@ function copyCreateCommand() {
         {{ $t('package.get_started.types_label') }}
       </p>
       <div class="flex items-center gap-2 min-w-0">
-        <code class="font-mono text-sm min-w-0 truncate tracking-tight" dir="ltr">
+        <code
+          class="font-mono text-sm min-w-0 truncate tracking-tight"
+          dir="ltr"
+          :data-pm-additional-cmd="selectedPackageManagerConfig.id"
+        >
           <span class="text-fg-subtle select-none">$ </span>
           <span
             v-for="(part, i) in getTypesInstallParts()"
@@ -215,7 +231,11 @@ function copyCreateCommand() {
     />
     <div class="min-w-0 flex-1">
       <p class="text-xs text-fg-subtle mb-0.5 select-none">{{ $t('package.run.locally') }}</p>
-      <code class="font-mono text-sm min-w-0 block truncate tracking-tight" dir="ltr">
+      <code
+        class="font-mono text-sm min-w-0 block truncate tracking-tight"
+        dir="ltr"
+        :data-pm-additional-cmd="selectedPackageManagerConfig.id"
+      >
         <span class="text-fg-subtle select-none">$ </span>
         <span
           v-for="(part, i) in getRunParts(executableInfo?.primaryCommand)"
@@ -261,7 +281,11 @@ function copyCreateCommand() {
           </NuxtLink>
         </TooltipApp>
       </div>
-      <code class="font-mono text-sm min-w-0 block truncate tracking-tight" dir="ltr">
+      <code
+        class="font-mono text-sm min-w-0 block truncate tracking-tight"
+        dir="ltr"
+        :data-pm-additional-cmd="selectedPackageManagerConfig.id"
+      >
         <span class="text-fg-subtle select-none">$ </span>
         <span
           v-for="(part, i) in getCreateParts()"
diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index d375656a26..7c088cecfb 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -22,8 +22,7 @@ test.describe('Create Command', () => {
 
       const createCommandSection = page.locator('[data-testid="create-command"]').first()
       await expect(createCommandSection).toBeVisible()
-      const activePm = await page.locator('[data-pm]').first().getAttribute('data-pm')
-      const commandRow = createCommandSection.locator(`[data-pm-additional-cmd="${activePm}"]`)
+      const commandRow = createCommandSection.locator('code[data-pm-additional-cmd]')
       await expect(commandRow).toBeVisible()
       await expect(commandRow).toContainText(/create vite/i)
 
@@ -42,8 +41,7 @@ test.describe('Create Command', () => {
 
       const createCommandSection = page.locator('[data-testid="create-command"]').first()
       await expect(createCommandSection).toBeVisible()
-      const activePm = await page.locator('[data-pm]').first().getAttribute('data-pm')
-      const commandRow = createCommandSection.locator(`[data-pm-additional-cmd="${activePm}"]`)
+      const commandRow = createCommandSection.locator('code[data-pm-additional-cmd]')
       await expect(commandRow).toBeVisible()
       await expect(commandRow).toContainText(/create next-app/i)
 
@@ -63,8 +61,7 @@ test.describe('Create Command', () => {
       // nuxt has create-nuxt package, so command is "npm create nuxt"
       const createCommandSection = page.locator('[data-testid="create-command"]').first()
       await expect(createCommandSection).toBeVisible()
-      const activePm = await page.locator('[data-pm]').first().getAttribute('data-pm')
-      const commandRow = createCommandSection.locator(`[data-pm-additional-cmd="${activePm}"]`)
+      const commandRow = createCommandSection.locator('code[data-pm-additional-cmd]')
       await expect(commandRow).toBeVisible()
       await expect(commandRow).toContainText(/create nuxt/i)
     })

From bf168a8550f8ecbfedb5bb7fc18d51064d71338f Mon Sep 17 00:00:00 2001
From: Roman <dev@rman.dev>
Date: Fri, 23 Oct 2026 18:23:36 +0100
Subject: [PATCH 5/6] fix hydration

---
 app/components/Package/Install/AdditionalCommands.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/Install/AdditionalCommands.vue b/app/components/Package/Install/AdditionalCommands.vue
index 56411ce8fe..0e42a13670 100644
--- a/app/components/Package/Install/AdditionalCommands.vue
+++ b/app/components/Package/Install/AdditionalCommands.vue
@@ -17,9 +17,13 @@ const props = defineProps<{
   selectedPm: PackageManagerId
 }>()
 
+const isMounted = ref(false)
+onMounted(() => {
+  isMounted.value = true
+})
+
 const resolvedPm = computed(() => {
-  if (import.meta.server) return 'npm'
-  return props.selectedPm
+  return isMounted.value ? props.selectedPm : 'npm'
 })
 
 const selectedPackageManagerConfig = computed(() => getPackageManagerConfig(resolvedPm.value))

From 6be69a7b75456686dee623cd9a774cd70ca1e0ae Mon Sep 17 00:00:00 2001
From: Roman <dev@rman.dev>
Date: Fri, 23 Oct 2026 18:54:27 +0100
Subject: [PATCH 6/6] try again

---
 app/components/Package/Install/Dropdown.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/Install/Dropdown.vue b/app/components/Package/Install/Dropdown.vue
index df6706f9a9..43d2270d10 100644
--- a/app/components/Package/Install/Dropdown.vue
+++ b/app/components/Package/Install/Dropdown.vue
@@ -3,6 +3,7 @@ import type { JsrPackageInfo } from '#shared/types/jsr'
 import type { SlimPackumentVersion } from '#shared/types'
 import type { DevDependencySuggestion } from '#shared/utils/dev-dependency'
 import type { PublishSecurityDowngrade } from '~/utils/publish-security'
+import { getPackageManagerConfig } from '~/utils/install-command'
 
 const props = defineProps<{
   packageName: string
@@ -19,6 +20,11 @@ const props = defineProps<{
   headingId: string
 }>()
 
+const isMounted = ref(false)
+onMounted(() => {
+  isMounted.value = true
+})
+
 const { selectedPM, showTypesInInstall, copied, copyInstallCommand } = useInstallCommand(
   () => props.packageName,
   () => props.requestedVersion ?? null,
@@ -27,6 +33,12 @@ const { selectedPM, showTypesInInstall, copied, copyInstallCommand } = useInstal
   () => props.installVersionOverride ?? null,
 )
 
+const resolvedPM = computed(() => {
+  return isMounted.value ? selectedPM.value : 'npm'
+})
+
+const selectedPackageManagerConfig = computed(() => getPackageManagerConfig(resolvedPM.value))
+
 const { announce } = useCommandPalette()
 const { polite } = useAnnouncer()
 async function copyInstallCommandWithAnnounce() {
@@ -141,7 +153,7 @@ onPrehydrate(el => {
               <span
                 v-for="(part, i) in getInstallCommandParts({
                   packageName: props.packageName,
-                  packageManager: selectedPM,
+                  packageManager: selectedPackageManagerConfig.id,
                   version: props.installVersionOverride ?? props.requestedVersion,
                   jsrInfo: props.jsrInfo,
                 })"
@@ -175,7 +187,7 @@ onPrehydrate(el => {
               :show-types="showTypesInInstall"
               :executable-info="executableInfo"
               :create-package-info="createPackageInfo"
-              :selected-pm="selectedPM"
+              :selected-pm="resolvedPM"
             />
           </div>
         </div>