From 3a0543fae60a5f56ba38a8468be6c66853ed3bed Mon Sep 17 00:00:00 2001
From: alptekin isiklar <maisiklar@gmail.com>
Date: Sat, 21 Mar 2026 22:52:08 +0000
Subject: [PATCH 1/2] 1826-add a warning and info for license changes. Added
 support for TR language too.

---
 app/components/LicenseDisplay.vue    |  64 ++-
 app/composables/useLicenseChanges.ts |  80 +++
 app/pages/package/[[org]]/[name].vue | 697 ++++++++++++++++-----------
 i18n/locales/en.json                 |   3 +
 i18n/locales/tr-TR.json              |   3 +
 i18n/schema.json                     |   9 +
 6 files changed, 571 insertions(+), 285 deletions(-)
 create mode 100644 app/composables/useLicenseChanges.ts

diff --git a/app/components/LicenseDisplay.vue b/app/components/LicenseDisplay.vue
index c83cb46d35..2d9dec3847 100644
--- a/app/components/LicenseDisplay.vue
+++ b/app/components/LicenseDisplay.vue
@@ -1,13 +1,36 @@
 <script setup lang="ts">
-import { parseLicenseExpression } from '#shared/utils/spdx'
+import { parseLicenseExpression } from "#shared/utils/spdx";
+
+import { useLicenseChanges } from "~/composables/useLicenseChanges";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
-  license: string
-}>()
+  license: string;
+  packageName?: string;
+}>();
+
+const { t } = useI18n();
+
+const tokens = computed(() => parseLicenseExpression(props.license));
+const licenseChanges = useLicenseChanges(() => props.packageName);
 
-const tokens = computed(() => parseLicenseExpression(props.license))
+const changes = computed(() => licenseChanges.data.value?.changes ?? []);
 
-const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'license' && t.url))
+const licenseChangeText = computed(() =>
+  changes.value
+    .map((item) =>
+      t("package.versions.license_change_item", {
+        from: item.from,
+        to: item.to,
+        version: item.version,
+      }),
+    )
+    .join("; "),
+);
+
+const hasAnyValidLicense = computed(() =>
+  tokens.value.some((t) => t.type === "license" && t.url),
+);
 </script>
 
 <template>
@@ -21,10 +44,12 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
         class="link-subtle"
         :title="$t('package.license.view_spdx')"
       >
-        {{ token.value }}
+        {{ token.value }}!!
       </a>
       <span v-else-if="token.type === 'license'">{{ token.value }}</span>
-      <span v-else-if="token.type === 'operator'" class="text-4xs">{{ token.value }}</span>
+      <span v-else-if="token.type === 'operator'" class="text-4xs">{{
+        token.value
+      }}</span>
     </template>
     <span
       v-if="hasAnyValidLicense"
@@ -32,4 +57,29 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
       aria-hidden="true"
     />
   </span>
+  <div
+    v-if="changes.length > 0"
+    class="text-red-500 flex justify-start items-center gap-x-1"
+  >
+    <p>change!</p>
+    <TooltipApp interactive position="top">
+      <span
+        tabindex="0"
+        class="block cursor-help shrink-0 -m-2 p-2 -me-1 focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
+      >
+        <span
+          class="block i-lucide:info w-3.5 h-3.5 text-fg-subtle"
+          role="img"
+          :aria-label="$t('package.versions.license_change_help')"
+        />
+      </span>
+      <template #content>
+        <p class="text-xs text-fg-muted">
+          <i18n-t keypath="package.versions.changed_license" tag="span">
+            <template #license_change>{{ licenseChangeText }}</template>
+          </i18n-t>
+        </p>
+      </template>
+    </TooltipApp>
+  </div>
 </template>
diff --git a/app/composables/useLicenseChanges.ts b/app/composables/useLicenseChanges.ts
new file mode 100644
index 0000000000..74b0f0deab
--- /dev/null
+++ b/app/composables/useLicenseChanges.ts
@@ -0,0 +1,80 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
+
+export interface LicenseChange {
+  from: string
+  to: string
+  version: string
+}
+
+export interface LicenseChangesResult {
+  changes: LicenseChange[]
+}
+
+// Type definitions for npm registry response
+interface NpmRegistryVersion {
+  version: string
+  license?: string
+}
+
+// for registry responses of $fetch function, the type includes the key versions as well as many others too.
+interface NpmRegistryResponse {
+  versions: Record<
+    string,
+    {
+      version: string
+      license?: string
+    }
+  >
+}
+
+/**
+ * Composable to detect license changes across all versions of a package
+ */
+export function useLicenseChanges(packageName: MaybeRefOrGetter<string | null | undefined>) {
+  return useAsyncData<LicenseChangesResult>(
+    () => `license-changes:${toValue(packageName)}`,
+    async () => {
+      const name = toValue(packageName)
+      if (!name) return { changes: [] }
+
+      // Fetch full package metadata from npm registry
+      const url = `https://registry.npmjs.org/${name}`
+      const data = await $fetch<NpmRegistryResponse>(url)
+
+      const changes: LicenseChange[] = []
+      let prevLicense: string | undefined = undefined
+
+      // `data.versions` is an object with version keys
+      const versions = Object.values(data.versions) as NpmRegistryVersion[]
+
+      // Sort versions ascending to compare chronologically
+      versions.sort((a, b) => {
+        const parse = (v: string) => v.split('.').map(Number)
+        const [aMajor, aMinor, aPatch] = parse(a.version as string)
+        const [bMajor, bMinor, bPatch] = parse(b.version as string)
+        if (aMajor !== bMajor) return aMajor! - bMajor!
+        if (aMinor !== bMinor) return aMinor! - bMinor!
+        return aPatch! - bPatch!
+      })
+
+      // Detect license changes
+      for (const version of versions) {
+        const license = (version.license as string) ?? 'UNKNOWN'
+        if (prevLicense && license !== prevLicense) {
+          changes.push({
+            from: prevLicense,
+            to: license,
+            version: version.version as string,
+          })
+        }
+        prevLicense = license
+      }
+      return { changes }
+    },
+    {
+      default: () => ({ changes: [] }),
+      watch: [() => toValue(packageName)],
+    },
+  )
+}
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index a83a101243..a6d1449a10 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1,67 +1,67 @@
 <script setup lang="ts">
-import { assertValidPackageName } from '#shared/utils/npm'
-import { getDependencyCount } from '~/utils/npm/dependency-count'
+import { assertValidPackageName } from "#shared/utils/npm";
+import { getDependencyCount } from "~/utils/npm/dependency-count";
 
-defineOgImageComponent('Package', {
+defineOgImageComponent("Package", {
   name: () => packageName.value,
-  version: () => requestedVersion.value ?? '',
-  primaryColor: '#60a5fa',
-})
+  version: () => requestedVersion.value ?? "",
+  primaryColor: "#60a5fa",
+});
 
-const readmeHeader = useTemplateRef('readmeHeader')
-const isReadmeHeaderPinned = shallowRef(false)
-const packageHeaderHeight = usePackageHeaderHeight()
-const readmeStickyTop = computed(() => `${56 + (packageHeaderHeight.value || 44)}px`)
+const readmeHeader = useTemplateRef("readmeHeader");
+const isReadmeHeaderPinned = shallowRef(false);
+const packageHeaderHeight = usePackageHeaderHeight();
+const readmeStickyTop = computed(
+  () => `${56 + (packageHeaderHeight.value || 44)}px`,
+);
 
 function isStickyPinned(el: HTMLElement | null): boolean {
-  if (!el) return false
+  if (!el) return false;
 
-  const style = getComputedStyle(el)
-  const top = parseFloat(style.top) || 0
-  const rect = el.getBoundingClientRect()
+  const style = getComputedStyle(el);
+  const top = parseFloat(style.top) || 0;
+  const rect = el.getBoundingClientRect();
 
-  return Math.abs(rect.top - top) < 1
+  return Math.abs(rect.top - top) < 1;
 }
 
 function checkHeaderPosition() {
-  isReadmeHeaderPinned.value = isStickyPinned(readmeHeader.value)
+  isReadmeHeaderPinned.value = isStickyPinned(readmeHeader.value);
 }
 
-useEventListener('scroll', checkHeaderPosition, { passive: true })
-useEventListener('resize', checkHeaderPosition)
+useEventListener("scroll", checkHeaderPosition, { passive: true });
+useEventListener("resize", checkHeaderPosition);
 
 onMounted(() => {
-  checkHeaderPosition()
-})
+  checkHeaderPosition();
+});
 
-const { packageName, requestedVersion } = usePackageRoute()
+const { packageName, requestedVersion } = usePackageRoute();
 
-const { data: resolvedVersion, status: resolvedStatus } = await useResolvedVersion(
-  packageName,
-  requestedVersion,
-)
+const { data: resolvedVersion, status: resolvedStatus } =
+  await useResolvedVersion(packageName, requestedVersion);
 
 if (import.meta.server) {
-  assertValidPackageName(packageName.value)
+  assertValidPackageName(packageName.value);
 }
 
 // Fetch README for specific version if requested, otherwise latest
 const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   () => {
-    const base = `/api/registry/readme/${packageName.value}`
-    const version = resolvedVersion.value
-    return version ? `${base}/v/${version}` : base
+    const base = `/api/registry/readme/${packageName.value}`;
+    const version = resolvedVersion.value;
+    return version ? `${base}/v/${version}` : base;
   },
   {
     default: () => ({
-      html: '',
+      html: "",
       mdExists: false,
       playgroundLinks: [],
       toc: [],
       defaultValue: true,
     }),
   },
-)
+);
 
 const playgroundLinks = computed(() => [
   ...readmeData.value.playgroundLinks,
@@ -70,13 +70,13 @@ const playgroundLinks = computed(() => [
     ? [
         {
           url: pkg.value.storybook.url,
-          provider: 'storybook',
-          providerName: 'Storybook',
-          label: 'Storybook',
+          provider: "storybook",
+          providerName: "Storybook",
+          label: "Storybook",
         },
       ]
     : []),
-])
+]);
 
 const {
   data: readmeMarkdownData,
@@ -84,48 +84,51 @@ const {
   execute: fetchReadmeMarkdown,
 } = useLazyFetch<ReadmeMarkdownResponse>(
   () => {
-    const base = `/api/registry/readme/markdown/${packageName.value}`
-    const version = resolvedVersion.value
-    return version ? `${base}/v/${version}` : base
+    const base = `/api/registry/readme/markdown/${packageName.value}`;
+    const version = resolvedVersion.value;
+    return version ? `${base}/v/${version}` : base;
   },
   {
     server: false,
     immediate: false,
     default: () => ({}),
   },
-)
+);
 
 //copy README file as Markdown
 const { copied: copiedReadme, copy: copyReadme } = useClipboard({
-  source: () => '',
+  source: () => "",
   copiedDuring: 2000,
-})
+});
 
 function prefetchReadmeMarkdown() {
-  if (readmeMarkdownStatus.value === 'idle') {
-    fetchReadmeMarkdown()
+  if (readmeMarkdownStatus.value === "idle") {
+    fetchReadmeMarkdown();
   }
 }
 
 async function copyReadmeHandler() {
-  await fetchReadmeMarkdown()
+  await fetchReadmeMarkdown();
 
-  const markdown = readmeMarkdownData.value?.markdown
-  if (!markdown) return
+  const markdown = readmeMarkdownData.value?.markdown;
+  if (!markdown) return;
 
-  await copyReadme(markdown)
+  await copyReadme(markdown);
 }
 
 // Track active TOC item based on scroll position
-const tocItems = computed(() => readmeData.value?.toc ?? [])
-const { activeId: activeTocId } = useActiveTocItem(tocItems)
+const tocItems = computed(() => readmeData.value?.toc ?? []);
+const { activeId: activeTocId } = useActiveTocItem(tocItems);
 
 // Check if package exists on JSR (only for scoped packages)
-const { data: jsrInfo } = useLazyFetch<JsrPackageInfo>(() => `/api/jsr/${packageName.value}`, {
-  default: () => ({ exists: false }),
-  // Only fetch for scoped packages (JSR requirement)
-  immediate: computed(() => packageName.value.startsWith('@')).value,
-})
+const { data: jsrInfo } = useLazyFetch<JsrPackageInfo>(
+  () => `/api/jsr/${packageName.value}`,
+  {
+    default: () => ({ exists: false }),
+    // Only fetch for scoped packages (JSR requirement)
+    immediate: computed(() => packageName.value.startsWith("@")).value,
+  },
+);
 
 // Fetch total install size (lazy, can be slow for large dependency trees)
 const {
@@ -134,72 +137,83 @@ const {
   execute: fetchInstallSize,
 } = useLazyFetch<InstallSizeResult | null>(
   () => {
-    const base = `/api/registry/install-size/${packageName.value}`
-    const version = resolvedVersion.value
-    return version ? `${base}/v/${version}` : base
+    const base = `/api/registry/install-size/${packageName.value}`;
+    const version = resolvedVersion.value;
+    return version ? `${base}/v/${version}` : base;
   },
   {
     server: false,
     immediate: false,
   },
-)
+);
 
 // Trigger fetch only when we have the real resolved version
 watch(
   [resolvedVersion, resolvedStatus],
   ([version, status]) => {
-    if (version && status === 'success') {
-      fetchInstallSize()
+    if (version && status === "success") {
+      fetchInstallSize();
     }
   },
   { immediate: true },
-)
+);
 
 const { data: skillsData } = useLazyFetch<SkillsListResponse>(
   () => {
-    const base = `/skills/${packageName.value}`
-    const version = resolvedVersion.value
-    return version ? `${base}/v/${version}` : base
+    const base = `/skills/${packageName.value}`;
+    const version = resolvedVersion.value;
+    return version ? `${base}/v/${version}` : base;
   },
-  { default: () => ({ package: '', version: '', skills: [] }) },
-)
+  { default: () => ({ package: "", version: "", skills: [] }) },
+);
 
-const { data: packageAnalysis } = usePackageAnalysis(packageName, requestedVersion)
-const { data: moduleReplacement } = useModuleReplacement(packageName)
+const { data: packageAnalysis } = usePackageAnalysis(
+  packageName,
+  requestedVersion,
+);
+const { data: moduleReplacement } = useModuleReplacement(packageName);
 
 if (
   import.meta.server &&
   !resolvedVersion.value &&
-  ['success', 'error'].includes(resolvedStatus.value)
+  ["success", "error"].includes(resolvedStatus.value)
 ) {
   throw createError({
     statusCode: 404,
-    statusMessage: $t('package.not_found'),
-    message: $t('package.not_found_message'),
-  })
+    statusMessage: $t("package.not_found"),
+    message: $t("package.not_found_message"),
+  });
 }
 
 watch(
   [resolvedStatus, resolvedVersion],
   ([status, version]) => {
-    if ((!version && status === 'success') || status === 'error') {
+    if ((!version && status === "success") || status === "error") {
       showError({
         statusCode: 404,
-        statusMessage: $t('package.not_found'),
-        message: $t('package.not_found_message'),
-      })
+        statusMessage: $t("package.not_found"),
+        message: $t("package.not_found_message"),
+      });
     }
   },
   { immediate: true },
-)
+);
 
 const {
   data: pkg,
   status,
   error,
-} = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value)
+} = usePackage(
+  packageName,
+  () => resolvedVersion.value ?? requestedVersion.value,
+);
 
-const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg, installSize)
+const { diff: sizeDiff } = useInstallSizeDiff(
+  packageName,
+  resolvedVersion,
+  pkg,
+  installSize,
+);
 
 // Detect two hydration scenarios where the external _payload.json is missing:
 //
@@ -209,41 +223,45 @@ const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg,
 // 2. SSR-rendered HTML with missing payload: Content was rendered but the external _payload.json
 //    returned an ISR fallback.
 //    → Preserve the server-rendered DOM, don't flash to skeleton.
-const nuxtApp = useNuxtApp()
-const route = useRoute()
+const nuxtApp = useNuxtApp();
+const route = useRoute();
 // Gates template rendering only — data fetches intentionally still run.
 // immediate is set once at mount — skipped requests won't re-fire on navigation, leaving data permanently missing.
-const isVersionsRoute = computed(() => route.name === 'package-versions')
+const isVersionsRoute = computed(() => route.name === "package-versions");
 const hasEmptyPayload =
   import.meta.client &&
   nuxtApp.payload.serverRendered &&
-  !Object.keys(nuxtApp.payload.data ?? {}).length
-const isSpaFallback = shallowRef(nuxtApp.isHydrating && hasEmptyPayload && !nuxtApp.payload.path)
+  !Object.keys(nuxtApp.payload.data ?? {}).length;
+const isSpaFallback = shallowRef(
+  nuxtApp.isHydrating && hasEmptyPayload && !nuxtApp.payload.path,
+);
 const isHydratingWithServerContent = shallowRef(
   nuxtApp.isHydrating && hasEmptyPayload && nuxtApp.payload.path === route.path,
-)
-const hasServerContentOnly = shallowRef(hasEmptyPayload && nuxtApp.payload.path === route.path)
+);
+const hasServerContentOnly = shallowRef(
+  hasEmptyPayload && nuxtApp.payload.path === route.path,
+);
 
 // When we have server-rendered content but no payload data, capture the server
 // DOM before Vue's hydration replaces it. This lets us show the server-rendered
 // HTML as a static snapshot while data refetches, avoiding any visual flash.
 const serverRenderedHtml = shallowRef<string | null>(
   hasServerContentOnly.value
-    ? (document.getElementById('package-article')?.innerHTML ?? null)
+    ? (document.getElementById("package-article")?.innerHTML ?? null)
     : null,
-)
+);
 
 if (isSpaFallback.value || isHydratingWithServerContent.value) {
-  nuxtApp.hooks.hookOnce('app:suspense:resolve', () => {
-    isSpaFallback.value = false
-    isHydratingWithServerContent.value = false
-  })
+  nuxtApp.hooks.hookOnce("app:suspense:resolve", () => {
+    isSpaFallback.value = false;
+    isHydratingWithServerContent.value = false;
+  });
 }
 
-const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
+const displayVersion = computed(() => pkg.value?.requestedVersion ?? null);
 const versionSecurityMetadata = computed<PackageVersionInfo[]>(() => {
-  if (!pkg.value) return []
-  if (pkg.value.securityVersions?.length) return pkg.value.securityVersions
+  if (!pkg.value) return [];
+  if (pkg.value.securityVersions?.length) return pkg.value.securityVersions;
 
   return Object.entries(pkg.value.versions).map(([version, metadata]) => ({
     version,
@@ -251,21 +269,21 @@ const versionSecurityMetadata = computed<PackageVersionInfo[]>(() => {
     hasProvenance: !!metadata.hasProvenance,
     trustLevel: metadata.trustLevel,
     deprecated: metadata.deprecated,
-  }))
-})
+  }));
+});
 
 // Process package description
 const pkgDescription = useMarkdown(() => ({
-  text: pkg.value?.description ?? '',
+  text: pkg.value?.description ?? "",
   packageName: pkg.value?.name,
-}))
+}));
 
 // Fetch dependency analysis (lazy, client-side)
 // This is the same composable used by PackageVulnerabilityTree and PackageDeprecatedTree
 const { data: vulnTree, status: vulnTreeStatus } = useDependencyAnalysis(
   packageName,
-  () => resolvedVersion.value ?? '',
-)
+  () => resolvedVersion.value ?? "",
+);
 
 const {
   data: provenanceData,
@@ -273,212 +291,220 @@ const {
   execute: fetchProvenance,
 } = useLazyFetch<ProvenanceDetails | null>(
   () => {
-    const v = displayVersion.value
-    if (!v || !hasProvenance(v)) return ''
-    return `/api/registry/provenance/${packageName.value}/v/${v.version}`
+    const v = displayVersion.value;
+    if (!v || !hasProvenance(v)) return "";
+    return `/api/registry/provenance/${packageName.value}/v/${v.version}`;
   },
   {
     default: () => null,
     server: false,
     immediate: false,
   },
-)
+);
 if (import.meta.client) {
   watch(
     displayVersion,
-    v => {
-      if (v && hasProvenance(v) && provenanceStatus.value === 'idle') {
-        fetchProvenance()
+    (v) => {
+      if (v && hasProvenance(v) && provenanceStatus.value === "idle") {
+        fetchProvenance();
       }
     },
     { immediate: true },
-  )
+  );
 }
 
-const isMounted = useMounted()
+const isMounted = useMounted();
 
 // Keep latestVersion for comparison (to show "(latest)" badge)
 const latestVersion = computed(() => {
-  if (!pkg.value) return null
-  const latestTag = pkg.value['dist-tags']?.latest
-  if (!latestTag) return null
-  return pkg.value.versions[latestTag] ?? null
-})
+  if (!pkg.value) return null;
+  const latestTag = pkg.value["dist-tags"]?.latest;
+  if (!latestTag) return null;
+  return pkg.value.versions[latestTag] ?? null;
+});
 
 const deprecationNotice = computed(() => {
-  if (!displayVersion.value?.deprecated) return null
+  if (!displayVersion.value?.deprecated) return null;
 
-  const isLatestDeprecated = !!latestVersion.value?.deprecated
+  const isLatestDeprecated = !!latestVersion.value?.deprecated;
 
   // If latest is deprecated, show "package deprecated"
   if (isLatestDeprecated) {
     return {
-      type: 'package' as const,
+      type: "package" as const,
       message: displayVersion.value.deprecated,
-    }
+    };
   }
 
   // Otherwise show "version deprecated"
-  return { type: 'version' as const, message: displayVersion.value.deprecated }
-})
+  return { type: "version" as const, message: displayVersion.value.deprecated };
+});
 
 const deprecationNoticeMessage = useMarkdown(() => ({
-  text: deprecationNotice.value?.message ?? '',
-}))
+  text: deprecationNotice.value?.message ?? "",
+}));
 
 const publishSecurityDowngrade = computed(() => {
-  const currentVersion = displayVersion.value?.version
-  if (!currentVersion) return null
-  return detectPublishSecurityDowngradeForVersion(versionSecurityMetadata.value, currentVersion)
-})
+  const currentVersion = displayVersion.value?.version;
+  if (!currentVersion) return null;
+  return detectPublishSecurityDowngradeForVersion(
+    versionSecurityMetadata.value,
+    currentVersion,
+  );
+});
 
 const installVersionOverride = computed(
   () => publishSecurityDowngrade.value?.trustedVersion ?? null,
-)
+);
 
 const downgradeFallbackInstallText = computed(() => {
-  const d = publishSecurityDowngrade.value
-  if (!d?.trustedVersion) return null
-  if (d.trustedTrustLevel === 'provenance')
-    return $t('package.security_downgrade.fallback_install_provenance', {
+  const d = publishSecurityDowngrade.value;
+  if (!d?.trustedVersion) return null;
+  if (d.trustedTrustLevel === "provenance")
+    return $t("package.security_downgrade.fallback_install_provenance", {
       version: d.trustedVersion,
-    })
-  if (d.trustedTrustLevel === 'trustedPublisher')
-    return $t('package.security_downgrade.fallback_install_trustedPublisher', {
+    });
+  if (d.trustedTrustLevel === "trustedPublisher")
+    return $t("package.security_downgrade.fallback_install_trustedPublisher", {
       version: d.trustedVersion,
-    })
-  return null
-})
+    });
+  return null;
+});
 
 const sizeTooltip = computed(() => {
   const chunks = [
     displayVersion.value &&
       displayVersion.value.dist.unpackedSize &&
-      $t('package.stats.size_tooltip.unpacked', {
+      $t("package.stats.size_tooltip.unpacked", {
         size: bytesFormatter.format(displayVersion.value.dist.unpackedSize),
       }),
     installSize.value &&
       installSize.value.dependencyCount &&
-      $t('package.stats.size_tooltip.total', {
+      $t("package.stats.size_tooltip.total", {
         size: bytesFormatter.format(installSize.value.totalSize),
         count: installSize.value.dependencyCount,
       }),
-  ]
-  return chunks.filter(Boolean).join('\n')
-})
+  ];
+  return chunks.filter(Boolean).join("\n");
+});
 
 const hasDependencies = computed(() => {
-  if (!displayVersion.value) return false
-  const deps = displayVersion.value.dependencies
-  const peerDeps = displayVersion.value.peerDependencies
-  const optionalDeps = displayVersion.value.optionalDependencies
+  if (!displayVersion.value) return false;
+  const deps = displayVersion.value.dependencies;
+  const peerDeps = displayVersion.value.peerDependencies;
+  const optionalDeps = displayVersion.value.optionalDependencies;
   return (
     (deps && Object.keys(deps).length > 0) ||
     (peerDeps && Object.keys(peerDeps).length > 0) ||
     (optionalDeps && Object.keys(optionalDeps).length > 0)
-  )
-})
+  );
+});
 
 // Vulnerability count for the stats banner
-const vulnCount = computed(() => vulnTree.value?.totalCounts.total ?? 0)
-const hasVulnerabilities = computed(() => vulnCount.value > 0)
+const vulnCount = computed(() => vulnTree.value?.totalCounts.total ?? 0);
+const hasVulnerabilities = computed(() => vulnCount.value > 0);
 
 // Total transitive dependencies count (from either vuln tree or install size)
 // Subtract 1 to exclude the root package itself
 const totalDepsCount = computed(() => {
   if (vulnTree.value) {
-    return vulnTree.value.totalPackages ? vulnTree.value.totalPackages - 1 : 0
+    return vulnTree.value.totalPackages ? vulnTree.value.totalPackages - 1 : 0;
   }
   if (installSize.value) {
-    return installSize.value.dependencyCount
+    return installSize.value.dependencyCount;
   }
-  return null
-})
+  return null;
+});
 
-const { repositoryUrl } = useRepositoryUrl(displayVersion)
+const { repositoryUrl } = useRepositoryUrl(displayVersion);
 
-const { repoRef } = useRepoMeta(repositoryUrl)
+const { repoRef } = useRepoMeta(repositoryUrl);
 
-const viewOnGitProvider = useViewOnGitProvider(() => repoRef.value?.provider)
+const viewOnGitProvider = useViewOnGitProvider(() => repoRef.value?.provider);
 
 // Check if a version has provenance/attestations
 // The dist object may have attestations that aren't in the base type
 function hasProvenance(version: PackumentVersion | null): boolean {
-  if (!version?.dist) return false
-  const dist = version.dist as NpmVersionDist
-  return !!dist.attestations
+  if (!version?.dist) return false;
+  const dist = version.dist as NpmVersionDist;
+  return !!dist.attestations;
 }
 
 // Get @types package name if available (non-deprecated)
 const typesPackageName = computed(() => {
-  if (!packageAnalysis.value) return null
-  if (packageAnalysis.value.types.kind !== '@types') return null
-  if (packageAnalysis.value.types.deprecated) return null
-  return packageAnalysis.value.types.packageName
-})
+  if (!packageAnalysis.value) return null;
+  if (packageAnalysis.value.types.kind !== "@types") return null;
+  if (packageAnalysis.value.types.deprecated) return null;
+  return packageAnalysis.value.types.packageName;
+});
 
 // Executable detection for run command
 const executableInfo = computed(() => {
-  if (!displayVersion.value || !pkg.value) return null
-  return getExecutableInfo(pkg.value.name, displayVersion.value.bin)
-})
+  if (!displayVersion.value || !pkg.value) return null;
+  return getExecutableInfo(pkg.value.name, displayVersion.value.bin);
+});
 
 // Detect if package is binary-only (show only execute commands, no install)
 const isBinaryOnly = computed(() => {
-  if (!displayVersion.value || !pkg.value) return false
+  if (!displayVersion.value || !pkg.value) return false;
   return isBinaryOnlyPackage({
     name: pkg.value.name,
     bin: displayVersion.value.bin,
     main: displayVersion.value.main,
     module: displayVersion.value.module,
     exports: displayVersion.value.exports,
-  })
-})
+  });
+});
 
 // Detect if package uses create-* naming convention
 const isCreatePkg = computed(() => {
-  if (!pkg.value) return false
-  return isCreatePackage(pkg.value.name)
-})
+  if (!pkg.value) return false;
+  return isCreatePackage(pkg.value.name);
+});
 
 // Get associated create-* package info (e.g., vite -> create-vite)
 const createPackageInfo = computed(() => {
-  if (!packageAnalysis.value?.createPackage) return null
+  if (!packageAnalysis.value?.createPackage) return null;
   // Don't show if deprecated
-  if (packageAnalysis.value.createPackage.deprecated) return null
-  return packageAnalysis.value.createPackage
-})
+  if (packageAnalysis.value.createPackage.deprecated) return null;
+  return packageAnalysis.value.createPackage;
+});
 
 // Canonical URL for this package page
 const canonicalUrl = computed(() => {
-  const base = `https://npmx.dev/package/${packageName.value}`
-  return requestedVersion.value ? `${base}/v/${requestedVersion.value}` : base
-})
+  const base = `https://npmx.dev/package/${packageName.value}`;
+  return requestedVersion.value ? `${base}/v/${requestedVersion.value}` : base;
+});
 
 // URL pattern for version selector - includes file path if present
 const versionUrlPattern = computed(
   () => `/package/${pkg.value?.name || packageName.value}/v/{version}`,
-)
+);
 
-const dependencyCount = computed(() => getDependencyCount(displayVersion.value))
+const dependencyCount = computed(() =>
+  getDependencyCount(displayVersion.value),
+);
 
-const numberFormatter = useNumberFormatter()
-const bytesFormatter = useBytesFormatter()
+const numberFormatter = useNumberFormatter();
+const bytesFormatter = useBytesFormatter();
 
 useHead({
-  link: [{ rel: 'canonical', href: canonicalUrl }],
-})
+  link: [{ rel: "canonical", href: canonicalUrl }],
+});
 
 useSeoMeta({
-  title: () => (pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx'),
-  ogTitle: () => (pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx'),
-  twitterTitle: () => (pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx'),
-  description: () => pkg.value?.description ?? '',
-  ogDescription: () => pkg.value?.description ?? '',
-  twitterDescription: () => pkg.value?.description ?? '',
-})
-
-const showSkeleton = shallowRef(false)
+  title: () =>
+    pkg.value?.name ? `${pkg.value.name} - npmx` : "Package - npmx",
+  ogTitle: () =>
+    pkg.value?.name ? `${pkg.value.name} - npmx` : "Package - npmx",
+  twitterTitle: () =>
+    pkg.value?.name ? `${pkg.value.name} - npmx` : "Package - npmx",
+  description: () => pkg.value?.description ?? "",
+  ogDescription: () => pkg.value?.description ?? "",
+  twitterDescription: () => pkg.value?.description ?? "",
+});
+
+const showSkeleton = shallowRef(false);
 </script>
 
 <template>
@@ -499,7 +525,10 @@ const showSkeleton = shallowRef(false)
     <!-- Scenario 1: SPA fallback — show skeleton (no real content to preserve) -->
     <!-- Scenario 2: SSR with missing payload — preserve server DOM, skip skeleton -->
     <PackageSkeleton
-      v-if="isSpaFallback || (!hasServerContentOnly && (showSkeleton || status === 'pending'))"
+      v-if="
+        isSpaFallback ||
+        (!hasServerContentOnly && (showSkeleton || status === 'pending'))
+      "
     />
 
     <!-- During hydration without payload, show captured server HTML as a static snapshot.
@@ -511,7 +540,9 @@ const showSkeleton = shallowRef(false)
     <article
       v-else-if="
         isHydratingWithServerContent ||
-        (hasServerContentOnly && serverRenderedHtml && (!pkg || readmeData?.defaultValue))
+        (hasServerContentOnly &&
+          serverRenderedHtml &&
+          (!pkg || readmeData?.defaultValue))
       "
       id="package-article"
       class="container w-full"
@@ -531,7 +562,11 @@ const showSkeleton = shallowRef(false)
         page="main"
         :version-url-pattern="versionUrlPattern"
       />
-      <article id="package-article" :class="$style.packagePage" class="container w-full">
+      <article
+        id="package-article"
+        :class="$style.packagePage"
+        class="container w-full"
+      >
         <!-- Package details -->
         <section :class="$style.areaDetails">
           <div class="mb-4 pt-4">
@@ -541,7 +576,7 @@ const showSkeleton = shallowRef(false)
                 <span v-html="pkgDescription" />
               </p>
               <p v-else class="text-fg-subtle text-base m-0 italic">
-                {{ $t('package.no_description') }}
+                {{ $t("package.no_description") }}
               </p>
             </div>
 
@@ -561,16 +596,16 @@ const showSkeleton = shallowRef(false)
           >
             <h2 class="font-medium mb-2">
               {{
-                deprecationNotice.type === 'package'
-                  ? $t('package.deprecation.package')
-                  : $t('package.deprecation.version')
+                deprecationNotice.type === "package"
+                  ? $t("package.deprecation.package")
+                  : $t("package.deprecation.version")
               }}
             </h2>
             <p v-if="deprecationNoticeMessage" class="text-base m-0">
               <span v-html="deprecationNoticeMessage" />
             </p>
             <p v-else class="text-base m-0 italic">
-              {{ $t('package.deprecation.no_reason') }}
+              {{ $t("package.deprecation.no_reason") }}
             </p>
           </div>
 
@@ -580,25 +615,37 @@ const showSkeleton = shallowRef(false)
           >
             <div class="space-y-1 sm:col-span-2">
               <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-                {{ $t('package.stats.license') }}
+                {{ $t("package.stats.license") }}
               </dt>
               <dd class="font-mono text-sm text-fg">
-                <LicenseDisplay v-if="pkg.license" :license="pkg.license" />
-                <span v-else>{{ $t('package.license.none') }}</span>
+                <LicenseDisplay
+                  v-if="pkg.license"
+                  :license="pkg.license"
+                  :package-name="pkg.name"
+                />
+                <span v-else>{{ $t("package.license.none") }}</span>
               </dd>
             </div>
 
             <div class="space-y-1 sm:col-span-2">
               <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-                {{ $t('package.stats.deps') }}
+                {{ $t("package.stats.deps") }}
               </dt>
-              <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
+              <dd
+                class="font-mono text-sm text-fg flex items-center justify-start gap-2"
+              >
                 <span class="flex items-center gap-1">
                   <!-- Direct deps (muted) -->
-                  <span class="text-fg-muted">{{ numberFormatter.format(dependencyCount) }}</span>
+                  <span class="text-fg-muted">{{
+                    numberFormatter.format(dependencyCount)
+                  }}</span>
 
                   <!-- Total transitive deps in parens -->
-                  <template v-if="dependencyCount > 0 && dependencyCount !== totalDepsCount">
+                  <template
+                    v-if="
+                      dependencyCount > 0 && dependencyCount !== totalDepsCount
+                    "
+                  >
                     <ClientOnly>
                       <span
                         v-if="
@@ -607,7 +654,10 @@ const showSkeleton = shallowRef(false)
                         "
                         class="inline-flex items-center gap-1 text-fg-subtle"
                       >
-                        (<span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />)
+                        (<span
+                          class="i-svg-spinners:ring-resize w-3 h-3"
+                          aria-hidden="true"
+                        />)
                       </span>
                       <span v-else-if="totalDepsCount !== null"
                         ><span class="text-fg-subtle">(</span
@@ -629,7 +679,9 @@ const showSkeleton = shallowRef(false)
                     :title="$t('package.stats.view_dependency_graph')"
                     classicon="i-lucide:network -rotate-90"
                   >
-                    <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
+                    <span class="sr-only">{{
+                      $t("package.stats.view_dependency_graph")
+                    }}</span>
                   </LinkBase>
 
                   <LinkBase
@@ -639,15 +691,19 @@ const showSkeleton = shallowRef(false)
                     :title="$t('package.stats.inspect_dependency_tree')"
                     classicon="i-lucide:table"
                   >
-                    <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
+                    <span class="sr-only">{{
+                      $t("package.stats.inspect_dependency_tree")
+                    }}</span>
                   </LinkBase>
                 </ButtonGroup>
               </dd>
             </div>
 
             <div class="space-y-1 sm:col-span-3">
-              <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
-                {{ $t('package.stats.install_size') }}
+              <dt
+                class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1"
+              >
+                {{ $t("package.stats.install_size") }}
                 <TooltipApp v-if="sizeTooltip" :text="sizeTooltip" interactive>
                   <span
                     tabindex="0"
@@ -661,19 +717,29 @@ const showSkeleton = shallowRef(false)
                 <!-- Package size (greyed out) -->
                 <span class="text-fg-muted" dir="ltr">
                   <span v-if="displayVersion?.dist?.unpackedSize">
-                    {{ bytesFormatter.format(displayVersion.dist.unpackedSize) }}
+                    {{
+                      bytesFormatter.format(displayVersion.dist.unpackedSize)
+                    }}
                   </span>
                   <span v-else>-</span>
                 </span>
 
                 <!-- Total install size in parens -->
-                <template v-if="displayVersion?.dist?.unpackedSize !== installSize?.totalSize">
+                <template
+                  v-if="
+                    displayVersion?.dist?.unpackedSize !==
+                    installSize?.totalSize
+                  "
+                >
                   <span class="ms-1">
                     <span
                       v-if="installSizeStatus === 'pending'"
                       class="inline-flex items-center gap-1 text-fg-subtle"
                     >
-                      (<span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />)
+                      (<span
+                        class="i-svg-spinners:ring-resize w-3 h-3"
+                        aria-hidden="true"
+                      />)
                     </span>
                     <span v-else-if="installSize?.totalSize" dir="ltr">
                       <span class="text-fg-subtle">(</span
@@ -689,20 +755,31 @@ const showSkeleton = shallowRef(false)
             <!-- Vulnerabilities count -->
             <div class="space-y-1 sm:col-span-2">
               <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-                {{ $t('package.stats.vulns') }}
+                {{ $t("package.stats.vulns") }}
               </dt>
               <dd class="font-mono text-sm text-fg">
                 <span
-                  v-if="vulnTreeStatus === 'pending' || vulnTreeStatus === 'idle'"
+                  v-if="
+                    vulnTreeStatus === 'pending' || vulnTreeStatus === 'idle'
+                  "
                   class="inline-flex items-center gap-1 text-fg-subtle"
                 >
-                  <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
+                  <span
+                    class="i-svg-spinners:ring-resize w-3 h-3"
+                    aria-hidden="true"
+                  />
                 </span>
                 <span v-else-if="vulnTreeStatus === 'success'">
-                  <span v-if="hasVulnerabilities" class="text-amber-700 dark:text-amber-500">
+                  <span
+                    v-if="hasVulnerabilities"
+                    class="text-amber-700 dark:text-amber-500"
+                  >
                     {{ numberFormatter.format(vulnCount) }}
                   </span>
-                  <span v-else class="inline-flex items-center gap-1 text-fg-muted">
+                  <span
+                    v-else
+                    class="inline-flex items-center gap-1 text-fg-muted"
+                  >
                     <span class="i-lucide:check w-3 h-3" aria-hidden="true" />
                     {{ numberFormatter.format(0) }}
                   </span>
@@ -724,10 +801,13 @@ const showSkeleton = shallowRef(false)
                   })
                 "
               >
-                {{ $t('package.stats.published') }}
+                {{ $t("package.stats.published") }}
               </dt>
               <dd class="font-mono text-sm text-fg">
-                <DateTime :datetime="pkg.time[resolvedVersion]!" date-style="medium" />
+                <DateTime
+                  :datetime="pkg.time[resolvedVersion]!"
+                  date-style="medium"
+                />
               </dd>
             </div>
           </dl>
@@ -743,10 +823,17 @@ const showSkeleton = shallowRef(false)
         </section>
 
         <!-- Binary-only packages: Show only execute command (no install) -->
-        <section v-if="isBinaryOnly" class="scroll-mt-20" :class="$style.areaInstall">
+        <section
+          v-if="isBinaryOnly"
+          class="scroll-mt-20"
+          :class="$style.areaInstall"
+        >
           <div class="flex flex-wrap items-center justify-between mb-3">
-            <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
-              {{ $t('package.run.title') }}
+            <h2
+              id="run-heading"
+              class="text-xs text-fg-subtle uppercase tracking-wider"
+            >
+              {{ $t("package.run.title") }}
             </h2>
             <!-- Package manager dropdown -->
             <PackageManagerSelect />
@@ -761,14 +848,19 @@ const showSkeleton = shallowRef(false)
         </section>
 
         <!-- Regular packages: Install command with optional run command -->
-        <section v-else id="get-started" class="scroll-mt-20" :class="$style.areaInstall">
+        <section
+          v-else
+          id="get-started"
+          class="scroll-mt-20"
+          :class="$style.areaInstall"
+        >
           <div class="flex flex-wrap items-center justify-between mb-3">
             <h2
               id="get-started-heading"
               class="group text-xs text-fg-subtle uppercase tracking-wider"
             >
               <LinkBase to="#get-started">
-                {{ $t('package.get_started.title') }}
+                {{ $t("package.get_started.title") }}
               </LinkBase>
             </h2>
             <!-- Package manager dropdown -->
@@ -780,9 +872,14 @@ const showSkeleton = shallowRef(false)
               role="alert"
               class="mb-4 rounded-lg border border-amber-600/40 bg-amber-500/10 px-4 py-3 text-amber-700 dark:text-amber-400"
             >
-              <h3 class="m-0 flex items-center gap-2 font-mono text-sm font-medium">
-                <span class="i-lucide:circle-alert w-4 h-4 shrink-0" aria-hidden="true" />
-                {{ $t('package.security_downgrade.title') }}
+              <h3
+                class="m-0 flex items-center gap-2 font-mono text-sm font-medium"
+              >
+                <span
+                  class="i-lucide:circle-alert w-4 h-4 shrink-0"
+                  aria-hidden="true"
+                />
+                {{ $t("package.security_downgrade.title") }}
               </h3>
               <p class="mt-2 mb-0 text-sm">
                 <i18n-t
@@ -800,15 +897,18 @@ const showSkeleton = shallowRef(false)
                       target="_blank"
                       rel="noopener noreferrer"
                       class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                      >{{ $t('package.security_downgrade.provenance_link_text')
-                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                      >{{ $t("package.security_downgrade.provenance_link_text")
+                      }}<span
+                        class="i-lucide:external-link w-3 h-3"
+                        aria-hidden="true"
                     /></a>
                   </template>
                 </i18n-t>
                 <i18n-t
                   v-else-if="
                     publishSecurityDowngrade.downgradedTrustLevel === 'none' &&
-                    publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
+                    publishSecurityDowngrade.trustedTrustLevel ===
+                      'trustedPublisher'
                   "
                   keypath="package.security_downgrade.description_to_none_trustedPublisher"
                   tag="span"
@@ -820,15 +920,22 @@ const showSkeleton = shallowRef(false)
                       target="_blank"
                       rel="noopener noreferrer"
                       class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                      >{{ $t('package.security_downgrade.trusted_publishing_link_text')
-                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                      >{{
+                        $t(
+                          "package.security_downgrade.trusted_publishing_link_text",
+                        )
+                      }}<span
+                        class="i-lucide:external-link w-3 h-3"
+                        aria-hidden="true"
                     /></a>
                   </template>
                 </i18n-t>
                 <i18n-t
                   v-else-if="
-                    publishSecurityDowngrade.downgradedTrustLevel === 'provenance' &&
-                    publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
+                    publishSecurityDowngrade.downgradedTrustLevel ===
+                      'provenance' &&
+                    publishSecurityDowngrade.trustedTrustLevel ===
+                      'trustedPublisher'
                   "
                   keypath="package.security_downgrade.description_to_provenance_trustedPublisher"
                   tag="span"
@@ -840,8 +947,10 @@ const showSkeleton = shallowRef(false)
                       target="_blank"
                       rel="noopener noreferrer"
                       class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                      >{{ $t('package.security_downgrade.provenance_link_text')
-                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                      >{{ $t("package.security_downgrade.provenance_link_text")
+                      }}<span
+                        class="i-lucide:external-link w-3 h-3"
+                        aria-hidden="true"
                     /></a>
                   </template>
                   <template #trustedPublishing>
@@ -850,12 +959,17 @@ const showSkeleton = shallowRef(false)
                       target="_blank"
                       rel="noopener noreferrer"
                       class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                      >{{ $t('package.security_downgrade.trusted_publishing_link_text')
-                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                      >{{
+                        $t(
+                          "package.security_downgrade.trusted_publishing_link_text",
+                        )
+                      }}<span
+                        class="i-lucide:external-link w-3 h-3"
+                        aria-hidden="true"
                     /></a>
                   </template>
                 </i18n-t>
-                {{ ' ' }}
+                {{ " " }}
                 <template v-if="downgradeFallbackInstallText">
                   {{ downgradeFallbackInstallText }}
                 </template>
@@ -866,7 +980,9 @@ const showSkeleton = shallowRef(false)
               :requested-version="resolvedVersion"
               :install-version-override="installVersionOverride"
               :jsr-info="jsrInfo"
-              :dev-dependency-suggestion="packageAnalysis?.devDependencySuggestion"
+              :dev-dependency-suggestion="
+                packageAnalysis?.devDependencySuggestion
+              "
               :types-package-name="typesPackageName"
               :executable-info="executableInfo"
               :create-package-info="createPackageInfo"
@@ -876,7 +992,10 @@ const showSkeleton = shallowRef(false)
 
         <div class="space-y-6" :class="$style.areaVulns">
           <!-- Bad package warning -->
-          <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
+          <PackageReplacement
+            v-if="moduleReplacement"
+            :replacement="moduleReplacement"
+          />
           <!-- Size / dependency increase notice -->
           <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
           <!-- Vulnerability scan -->
@@ -926,7 +1045,10 @@ const showSkeleton = shallowRef(false)
             />
 
             <!-- Playground links -->
-            <PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
+            <PackagePlaygrounds
+              v-if="playgroundLinks.length"
+              :links="playgroundLinks"
+            />
 
             <PackageCompatibility :engines="displayVersion?.engines" />
 
@@ -937,7 +1059,9 @@ const showSkeleton = shallowRef(false)
               :versions="pkg.versions"
               :dist-tags="pkg['dist-tags'] ?? {}"
               :time="pkg.time"
-              :selected-version="resolvedVersion ?? pkg['dist-tags']?.['latest']"
+              :selected-version="
+                resolvedVersion ?? pkg['dist-tags']?.['latest']
+              "
             />
 
             <!-- Install Scripts Warning -->
@@ -963,21 +1087,31 @@ const showSkeleton = shallowRef(false)
             <PackageKeywords :keywords="displayVersion?.keywords" />
 
             <!-- Maintainers (with admin actions when connected) -->
-            <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
+            <PackageMaintainers
+              :package-name="pkg.name"
+              :maintainers="pkg.maintainers"
+            />
           </div>
         </PackageSidebar>
 
         <!-- README -->
-        <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
+        <section
+          id="readme"
+          class="min-w-0 scroll-mt-20"
+          :class="$style.areaReadme"
+        >
           <div
             ref="readmeHeader"
             class="flex [@media(min-height:800px)]:sticky z-10 flex-wrap items-center justify-between mb-3 py-2 -mx-1 px-2 transition-shadow duration-200"
             :class="{ 'bg-bg border-border border-b': isReadmeHeaderPinned }"
             :style="{ top: readmeStickyTop }"
           >
-            <h2 id="readme-heading" class="group text-fg-subtle uppercase font-medium">
+            <h2
+              id="readme-heading"
+              class="group text-fg-subtle uppercase font-medium"
+            >
               <LinkBase to="#readme">
-                {{ $t('package.readme.title') }}
+                {{ $t("package.readme.title") }}
               </LinkBase>
             </h2>
             <div class="flex gap-2">
@@ -993,11 +1127,15 @@ const showSkeleton = shallowRef(false)
                   @click="copyReadmeHandler()"
                   :aria-pressed="copiedReadme"
                   :aria-label="
-                    copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
+                    copiedReadme
+                      ? $t('common.copied')
+                      : $t('package.readme.copy_as_markdown')
+                  "
+                  :classicon="
+                    copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'
                   "
-                  :classicon="copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'"
                 >
-                  {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
+                  {{ copiedReadme ? $t("common.copied") : $t("common.copy") }}
                 </ButtonBase>
               </TooltipApp>
               <ReadmeTocDropdown
@@ -1011,7 +1149,7 @@ const showSkeleton = shallowRef(false)
           <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
           <Readme v-if="readmeData?.html" :html="readmeData.html" />
           <p v-else class="text-fg-muted italic">
-            {{ $t('package.readme.no_readme') }}
+            {{ $t("package.readme.no_readme") }}
             <a
               v-if="repositoryUrl"
               :href="repositoryUrl"
@@ -1032,8 +1170,11 @@ const showSkeleton = shallowRef(false)
               v-if="provenanceStatus === 'pending'"
               class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
             >
-              <span class="i-svg-spinners:ring-resize w-4 h-4" aria-hidden="true" />
-              <span>{{ $t('package.provenance_section.title') }}…</span>
+              <span
+                class="i-svg-spinners:ring-resize w-4 h-4"
+                aria-hidden="true"
+              />
+              <span>{{ $t("package.provenance_section.title") }}…</span>
             </div>
             <PackageProvenanceSection
               v-else-if="provenanceData"
@@ -1046,7 +1187,7 @@ const showSkeleton = shallowRef(false)
               class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
             >
               <span class="i-lucide:circle-alert w-4 h-4" aria-hidden="true" />
-              <span>{{ $t('package.provenance_section.error_loading') }}</span>
+              <span>{{ $t("package.provenance_section.error_loading") }}</span>
             </div>
           </section>
         </section>
@@ -1060,13 +1201,13 @@ const showSkeleton = shallowRef(false)
       class="flex flex-col items-center py-20 text-center container w-full"
     >
       <h1 class="font-mono text-2xl font-medium mb-4">
-        {{ $t('package.not_found') }}
+        {{ $t("package.not_found") }}
       </h1>
       <p class="text-fg-muted mb-8">
-        {{ error?.message ?? $t('package.not_found_message') }}
+        {{ error?.message ?? $t("package.not_found_message") }}
       </p>
       <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
-        $t('common.go_back_home')
+        $t("common.go_back_home")
       }}</LinkBase>
     </div>
   </main>
@@ -1082,11 +1223,11 @@ const showSkeleton = shallowRef(false)
   /* Mobile: single column, sidebar above readme */
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
-    'details'
-    'install'
-    'vulns'
-    'sidebar'
-    'readme';
+    "details"
+    "install"
+    "vulns"
+    "sidebar"
+    "readme";
 }
 
 /* Tablet/medium: install/vulns full width, readme+sidebar side by side */
@@ -1094,10 +1235,10 @@ const showSkeleton = shallowRef(false)
   .packagePage {
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
-      'details details'
-      'install sidebar'
-      'vulns   sidebar'
-      'readme  sidebar';
+      "details details"
+      "install sidebar"
+      "vulns   sidebar"
+      "readme  sidebar";
     grid-template-rows: auto auto auto auto 1fr;
   }
 }
@@ -1107,10 +1248,10 @@ const showSkeleton = shallowRef(false)
   .packagePage {
     grid-template-columns: 1fr 20rem;
     grid-template-areas:
-      'details sidebar'
-      'install sidebar'
-      'vulns   sidebar'
-      'readme  sidebar';
+      "details sidebar"
+      "install sidebar"
+      "vulns   sidebar"
+      "readme  sidebar";
   }
 }
 
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index f54f447012..3605a48203 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -431,7 +431,10 @@
       "filter_placeholder": "Filter by semver (e.g. ^3.0.0)",
       "filter_invalid": "Invalid semver range",
       "filter_help": "Semver range filter help",
+      "license_change_help": "License Change Details",
+      "license_change_item": "from {from} to {to} at version {version}",
       "filter_tooltip": "Filter versions using a {link}. For example, ^3.0.0 shows all 3.x versions.",
+      "changed_license": "The license was changed: {license_change}",
       "filter_tooltip_link": "semver range",
       "no_matches": "No versions match this range",
       "copy_alt": {
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index c1b0a40b50..2920f2d436 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -386,7 +386,10 @@
       "filter_placeholder": "Semver ile filtrele (örn. ^3.0.0)",
       "filter_invalid": "Geçersiz semver aralığı",
       "filter_help": "Semver aralığı filtresi yardımı",
+      "license_change_help": "Lisans değişikliği yardımı",
+      "license_change_item": "{version} sürümünde {from}'den {to}'ya",
       "filter_tooltip": "Sürümleri {link} kullanarak filtreleyin. Örneğin, ^3.0.0 tüm 3.x sürümlerini gösterir.",
+      "changed_license": "Lisans değişikliği gerçekleşti: {license_change}",
       "filter_tooltip_link": "semver aralığı",
       "no_matches": "Bu aralığa uygun sürüm yok",
       "copy_alt": {
diff --git a/i18n/schema.json b/i18n/schema.json
index 151a19c977..07d7b04b3e 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1297,9 +1297,18 @@
             "filter_help": {
               "type": "string"
             },
+            "license_change_help": {
+              "type": "string"
+            },
+            "license_change_item": {
+              "type": "string"
+            },
             "filter_tooltip": {
               "type": "string"
             },
+            "changed_license": {
+              "type": "string"
+            },
             "filter_tooltip_link": {
               "type": "string"
             },

From bfd955085a1ee20459ef2a21e1809d8312fb5f62 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sat, 21 Mar 2026 23:24:47 +0000
Subject: [PATCH 2/2] [autofix.ci] apply automated fixes

---
 app/components/LicenseDisplay.vue    |  41 +-
 app/pages/package/[[org]]/[name].vue | 691 +++++++++++----------------
 2 files changed, 294 insertions(+), 438 deletions(-)

diff --git a/app/components/LicenseDisplay.vue b/app/components/LicenseDisplay.vue
index 2d9dec3847..95f87dba5a 100644
--- a/app/components/LicenseDisplay.vue
+++ b/app/components/LicenseDisplay.vue
@@ -1,36 +1,34 @@
 <script setup lang="ts">
-import { parseLicenseExpression } from "#shared/utils/spdx";
+import { parseLicenseExpression } from '#shared/utils/spdx'
 
-import { useLicenseChanges } from "~/composables/useLicenseChanges";
-import { useI18n } from "vue-i18n";
+import { useLicenseChanges } from '~/composables/useLicenseChanges'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
-  license: string;
-  packageName?: string;
-}>();
+  license: string
+  packageName?: string
+}>()
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const tokens = computed(() => parseLicenseExpression(props.license));
-const licenseChanges = useLicenseChanges(() => props.packageName);
+const tokens = computed(() => parseLicenseExpression(props.license))
+const licenseChanges = useLicenseChanges(() => props.packageName)
 
-const changes = computed(() => licenseChanges.data.value?.changes ?? []);
+const changes = computed(() => licenseChanges.data.value?.changes ?? [])
 
 const licenseChangeText = computed(() =>
   changes.value
-    .map((item) =>
-      t("package.versions.license_change_item", {
+    .map(item =>
+      t('package.versions.license_change_item', {
         from: item.from,
         to: item.to,
         version: item.version,
       }),
     )
-    .join("; "),
-);
+    .join('; '),
+)
 
-const hasAnyValidLicense = computed(() =>
-  tokens.value.some((t) => t.type === "license" && t.url),
-);
+const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'license' && t.url))
 </script>
 
 <template>
@@ -47,9 +45,7 @@ const hasAnyValidLicense = computed(() =>
         {{ token.value }}!!
       </a>
       <span v-else-if="token.type === 'license'">{{ token.value }}</span>
-      <span v-else-if="token.type === 'operator'" class="text-4xs">{{
-        token.value
-      }}</span>
+      <span v-else-if="token.type === 'operator'" class="text-4xs">{{ token.value }}</span>
     </template>
     <span
       v-if="hasAnyValidLicense"
@@ -57,10 +53,7 @@ const hasAnyValidLicense = computed(() =>
       aria-hidden="true"
     />
   </span>
-  <div
-    v-if="changes.length > 0"
-    class="text-red-500 flex justify-start items-center gap-x-1"
-  >
+  <div v-if="changes.length > 0" class="text-red-500 flex justify-start items-center gap-x-1">
     <p>change!</p>
     <TooltipApp interactive position="top">
       <span
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index a6d1449a10..75a5c5f16d 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1,67 +1,67 @@
 <script setup lang="ts">
-import { assertValidPackageName } from "#shared/utils/npm";
-import { getDependencyCount } from "~/utils/npm/dependency-count";
+import { assertValidPackageName } from '#shared/utils/npm'
+import { getDependencyCount } from '~/utils/npm/dependency-count'
 
-defineOgImageComponent("Package", {
+defineOgImageComponent('Package', {
   name: () => packageName.value,
-  version: () => requestedVersion.value ?? "",
-  primaryColor: "#60a5fa",
-});
+  version: () => requestedVersion.value ?? '',
+  primaryColor: '#60a5fa',
+})
 
-const readmeHeader = useTemplateRef("readmeHeader");
-const isReadmeHeaderPinned = shallowRef(false);
-const packageHeaderHeight = usePackageHeaderHeight();
-const readmeStickyTop = computed(
-  () => `${56 + (packageHeaderHeight.value || 44)}px`,
-);
+const readmeHeader = useTemplateRef('readmeHeader')
+const isReadmeHeaderPinned = shallowRef(false)
+const packageHeaderHeight = usePackageHeaderHeight()
+const readmeStickyTop = computed(() => `${56 + (packageHeaderHeight.value || 44)}px`)
 
 function isStickyPinned(el: HTMLElement | null): boolean {
-  if (!el) return false;
+  if (!el) return false
 
-  const style = getComputedStyle(el);
-  const top = parseFloat(style.top) || 0;
-  const rect = el.getBoundingClientRect();
+  const style = getComputedStyle(el)
+  const top = parseFloat(style.top) || 0
+  const rect = el.getBoundingClientRect()
 
-  return Math.abs(rect.top - top) < 1;
+  return Math.abs(rect.top - top) < 1
 }
 
 function checkHeaderPosition() {
-  isReadmeHeaderPinned.value = isStickyPinned(readmeHeader.value);
+  isReadmeHeaderPinned.value = isStickyPinned(readmeHeader.value)
 }
 
-useEventListener("scroll", checkHeaderPosition, { passive: true });
-useEventListener("resize", checkHeaderPosition);
+useEventListener('scroll', checkHeaderPosition, { passive: true })
+useEventListener('resize', checkHeaderPosition)
 
 onMounted(() => {
-  checkHeaderPosition();
-});
+  checkHeaderPosition()
+})
 
-const { packageName, requestedVersion } = usePackageRoute();
+const { packageName, requestedVersion } = usePackageRoute()
 
-const { data: resolvedVersion, status: resolvedStatus } =
-  await useResolvedVersion(packageName, requestedVersion);
+const { data: resolvedVersion, status: resolvedStatus } = await useResolvedVersion(
+  packageName,
+  requestedVersion,
+)
 
 if (import.meta.server) {
-  assertValidPackageName(packageName.value);
+  assertValidPackageName(packageName.value)
 }
 
 // Fetch README for specific version if requested, otherwise latest
 const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   () => {
-    const base = `/api/registry/readme/${packageName.value}`;
-    const version = resolvedVersion.value;
-    return version ? `${base}/v/${version}` : base;
+    const base = `/api/registry/readme/${packageName.value}`
+    const version = resolvedVersion.value
+    return version ? `${base}/v/${version}` : base
   },
   {
     default: () => ({
-      html: "",
+      html: '',
       mdExists: false,
       playgroundLinks: [],
       toc: [],
       defaultValue: true,
     }),
   },
-);
+)
 
 const playgroundLinks = computed(() => [
   ...readmeData.value.playgroundLinks,
@@ -70,13 +70,13 @@ const playgroundLinks = computed(() => [
     ? [
         {
           url: pkg.value.storybook.url,
-          provider: "storybook",
-          providerName: "Storybook",
-          label: "Storybook",
+          provider: 'storybook',
+          providerName: 'Storybook',
+          label: 'Storybook',
         },
       ]
     : []),
-]);
+])
 
 const {
   data: readmeMarkdownData,
@@ -84,51 +84,48 @@ const {
   execute: fetchReadmeMarkdown,
 } = useLazyFetch<ReadmeMarkdownResponse>(
   () => {
-    const base = `/api/registry/readme/markdown/${packageName.value}`;
-    const version = resolvedVersion.value;
-    return version ? `${base}/v/${version}` : base;
+    const base = `/api/registry/readme/markdown/${packageName.value}`
+    const version = resolvedVersion.value
+    return version ? `${base}/v/${version}` : base
   },
   {
     server: false,
     immediate: false,
     default: () => ({}),
   },
-);
+)
 
 //copy README file as Markdown
 const { copied: copiedReadme, copy: copyReadme } = useClipboard({
-  source: () => "",
+  source: () => '',
   copiedDuring: 2000,
-});
+})
 
 function prefetchReadmeMarkdown() {
-  if (readmeMarkdownStatus.value === "idle") {
-    fetchReadmeMarkdown();
+  if (readmeMarkdownStatus.value === 'idle') {
+    fetchReadmeMarkdown()
   }
 }
 
 async function copyReadmeHandler() {
-  await fetchReadmeMarkdown();
+  await fetchReadmeMarkdown()
 
-  const markdown = readmeMarkdownData.value?.markdown;
-  if (!markdown) return;
+  const markdown = readmeMarkdownData.value?.markdown
+  if (!markdown) return
 
-  await copyReadme(markdown);
+  await copyReadme(markdown)
 }
 
 // Track active TOC item based on scroll position
-const tocItems = computed(() => readmeData.value?.toc ?? []);
-const { activeId: activeTocId } = useActiveTocItem(tocItems);
+const tocItems = computed(() => readmeData.value?.toc ?? [])
+const { activeId: activeTocId } = useActiveTocItem(tocItems)
 
 // Check if package exists on JSR (only for scoped packages)
-const { data: jsrInfo } = useLazyFetch<JsrPackageInfo>(
-  () => `/api/jsr/${packageName.value}`,
-  {
-    default: () => ({ exists: false }),
-    // Only fetch for scoped packages (JSR requirement)
-    immediate: computed(() => packageName.value.startsWith("@")).value,
-  },
-);
+const { data: jsrInfo } = useLazyFetch<JsrPackageInfo>(() => `/api/jsr/${packageName.value}`, {
+  default: () => ({ exists: false }),
+  // Only fetch for scoped packages (JSR requirement)
+  immediate: computed(() => packageName.value.startsWith('@')).value,
+})
 
 // Fetch total install size (lazy, can be slow for large dependency trees)
 const {
@@ -137,83 +134,72 @@ const {
   execute: fetchInstallSize,
 } = useLazyFetch<InstallSizeResult | null>(
   () => {
-    const base = `/api/registry/install-size/${packageName.value}`;
-    const version = resolvedVersion.value;
-    return version ? `${base}/v/${version}` : base;
+    const base = `/api/registry/install-size/${packageName.value}`
+    const version = resolvedVersion.value
+    return version ? `${base}/v/${version}` : base
   },
   {
     server: false,
     immediate: false,
   },
-);
+)
 
 // Trigger fetch only when we have the real resolved version
 watch(
   [resolvedVersion, resolvedStatus],
   ([version, status]) => {
-    if (version && status === "success") {
-      fetchInstallSize();
+    if (version && status === 'success') {
+      fetchInstallSize()
     }
   },
   { immediate: true },
-);
+)
 
 const { data: skillsData } = useLazyFetch<SkillsListResponse>(
   () => {
-    const base = `/skills/${packageName.value}`;
-    const version = resolvedVersion.value;
-    return version ? `${base}/v/${version}` : base;
+    const base = `/skills/${packageName.value}`
+    const version = resolvedVersion.value
+    return version ? `${base}/v/${version}` : base
   },
-  { default: () => ({ package: "", version: "", skills: [] }) },
-);
+  { default: () => ({ package: '', version: '', skills: [] }) },
+)
 
-const { data: packageAnalysis } = usePackageAnalysis(
-  packageName,
-  requestedVersion,
-);
-const { data: moduleReplacement } = useModuleReplacement(packageName);
+const { data: packageAnalysis } = usePackageAnalysis(packageName, requestedVersion)
+const { data: moduleReplacement } = useModuleReplacement(packageName)
 
 if (
   import.meta.server &&
   !resolvedVersion.value &&
-  ["success", "error"].includes(resolvedStatus.value)
+  ['success', 'error'].includes(resolvedStatus.value)
 ) {
   throw createError({
     statusCode: 404,
-    statusMessage: $t("package.not_found"),
-    message: $t("package.not_found_message"),
-  });
+    statusMessage: $t('package.not_found'),
+    message: $t('package.not_found_message'),
+  })
 }
 
 watch(
   [resolvedStatus, resolvedVersion],
   ([status, version]) => {
-    if ((!version && status === "success") || status === "error") {
+    if ((!version && status === 'success') || status === 'error') {
       showError({
         statusCode: 404,
-        statusMessage: $t("package.not_found"),
-        message: $t("package.not_found_message"),
-      });
+        statusMessage: $t('package.not_found'),
+        message: $t('package.not_found_message'),
+      })
     }
   },
   { immediate: true },
-);
+)
 
 const {
   data: pkg,
   status,
   error,
-} = usePackage(
-  packageName,
-  () => resolvedVersion.value ?? requestedVersion.value,
-);
+} = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value)
 
-const { diff: sizeDiff } = useInstallSizeDiff(
-  packageName,
-  resolvedVersion,
-  pkg,
-  installSize,
-);
+const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg, installSize)
 
 // Detect two hydration scenarios where the external _payload.json is missing:
 //
@@ -223,45 +209,41 @@ const { diff: sizeDiff } = useInstallSizeDiff(
 // 2. SSR-rendered HTML with missing payload: Content was rendered but the external _payload.json
 //    returned an ISR fallback.
 //    → Preserve the server-rendered DOM, don't flash to skeleton.
-const nuxtApp = useNuxtApp();
-const route = useRoute();
+const nuxtApp = useNuxtApp()
+const route = useRoute()
 // Gates template rendering only — data fetches intentionally still run.
 // immediate is set once at mount — skipped requests won't re-fire on navigation, leaving data permanently missing.
-const isVersionsRoute = computed(() => route.name === "package-versions");
+const isVersionsRoute = computed(() => route.name === 'package-versions')
 const hasEmptyPayload =
   import.meta.client &&
   nuxtApp.payload.serverRendered &&
-  !Object.keys(nuxtApp.payload.data ?? {}).length;
-const isSpaFallback = shallowRef(
-  nuxtApp.isHydrating && hasEmptyPayload && !nuxtApp.payload.path,
-);
+  !Object.keys(nuxtApp.payload.data ?? {}).length
+const isSpaFallback = shallowRef(nuxtApp.isHydrating && hasEmptyPayload && !nuxtApp.payload.path)
 const isHydratingWithServerContent = shallowRef(
   nuxtApp.isHydrating && hasEmptyPayload && nuxtApp.payload.path === route.path,
-);
-const hasServerContentOnly = shallowRef(
-  hasEmptyPayload && nuxtApp.payload.path === route.path,
-);
+)
+const hasServerContentOnly = shallowRef(hasEmptyPayload && nuxtApp.payload.path === route.path)
 
 // When we have server-rendered content but no payload data, capture the server
 // DOM before Vue's hydration replaces it. This lets us show the server-rendered
 // HTML as a static snapshot while data refetches, avoiding any visual flash.
 const serverRenderedHtml = shallowRef<string | null>(
   hasServerContentOnly.value
-    ? (document.getElementById("package-article")?.innerHTML ?? null)
+    ? (document.getElementById('package-article')?.innerHTML ?? null)
     : null,
-);
+)
 
 if (isSpaFallback.value || isHydratingWithServerContent.value) {
-  nuxtApp.hooks.hookOnce("app:suspense:resolve", () => {
-    isSpaFallback.value = false;
-    isHydratingWithServerContent.value = false;
-  });
+  nuxtApp.hooks.hookOnce('app:suspense:resolve', () => {
+    isSpaFallback.value = false
+    isHydratingWithServerContent.value = false
+  })
 }
 
-const displayVersion = computed(() => pkg.value?.requestedVersion ?? null);
+const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 const versionSecurityMetadata = computed<PackageVersionInfo[]>(() => {
-  if (!pkg.value) return [];
-  if (pkg.value.securityVersions?.length) return pkg.value.securityVersions;
+  if (!pkg.value) return []
+  if (pkg.value.securityVersions?.length) return pkg.value.securityVersions
 
   return Object.entries(pkg.value.versions).map(([version, metadata]) => ({
     version,
@@ -269,21 +251,21 @@ const versionSecurityMetadata = computed<PackageVersionInfo[]>(() => {
     hasProvenance: !!metadata.hasProvenance,
     trustLevel: metadata.trustLevel,
     deprecated: metadata.deprecated,
-  }));
-});
+  }))
+})
 
 // Process package description
 const pkgDescription = useMarkdown(() => ({
-  text: pkg.value?.description ?? "",
+  text: pkg.value?.description ?? '',
   packageName: pkg.value?.name,
-}));
+}))
 
 // Fetch dependency analysis (lazy, client-side)
 // This is the same composable used by PackageVulnerabilityTree and PackageDeprecatedTree
 const { data: vulnTree, status: vulnTreeStatus } = useDependencyAnalysis(
   packageName,
-  () => resolvedVersion.value ?? "",
-);
+  () => resolvedVersion.value ?? '',
+)
 
 const {
   data: provenanceData,
@@ -291,220 +273,212 @@ const {
   execute: fetchProvenance,
 } = useLazyFetch<ProvenanceDetails | null>(
   () => {
-    const v = displayVersion.value;
-    if (!v || !hasProvenance(v)) return "";
-    return `/api/registry/provenance/${packageName.value}/v/${v.version}`;
+    const v = displayVersion.value
+    if (!v || !hasProvenance(v)) return ''
+    return `/api/registry/provenance/${packageName.value}/v/${v.version}`
   },
   {
     default: () => null,
     server: false,
     immediate: false,
   },
-);
+)
 if (import.meta.client) {
   watch(
     displayVersion,
-    (v) => {
-      if (v && hasProvenance(v) && provenanceStatus.value === "idle") {
-        fetchProvenance();
+    v => {
+      if (v && hasProvenance(v) && provenanceStatus.value === 'idle') {
+        fetchProvenance()
       }
     },
     { immediate: true },
-  );
+  )
 }
 
-const isMounted = useMounted();
+const isMounted = useMounted()
 
 // Keep latestVersion for comparison (to show "(latest)" badge)
 const latestVersion = computed(() => {
-  if (!pkg.value) return null;
-  const latestTag = pkg.value["dist-tags"]?.latest;
-  if (!latestTag) return null;
-  return pkg.value.versions[latestTag] ?? null;
-});
+  if (!pkg.value) return null
+  const latestTag = pkg.value['dist-tags']?.latest
+  if (!latestTag) return null
+  return pkg.value.versions[latestTag] ?? null
+})
 
 const deprecationNotice = computed(() => {
-  if (!displayVersion.value?.deprecated) return null;
+  if (!displayVersion.value?.deprecated) return null
 
-  const isLatestDeprecated = !!latestVersion.value?.deprecated;
+  const isLatestDeprecated = !!latestVersion.value?.deprecated
 
   // If latest is deprecated, show "package deprecated"
   if (isLatestDeprecated) {
     return {
-      type: "package" as const,
+      type: 'package' as const,
       message: displayVersion.value.deprecated,
-    };
+    }
   }
 
   // Otherwise show "version deprecated"
-  return { type: "version" as const, message: displayVersion.value.deprecated };
-});
+  return { type: 'version' as const, message: displayVersion.value.deprecated }
+})
 
 const deprecationNoticeMessage = useMarkdown(() => ({
-  text: deprecationNotice.value?.message ?? "",
-}));
+  text: deprecationNotice.value?.message ?? '',
+}))
 
 const publishSecurityDowngrade = computed(() => {
-  const currentVersion = displayVersion.value?.version;
-  if (!currentVersion) return null;
-  return detectPublishSecurityDowngradeForVersion(
-    versionSecurityMetadata.value,
-    currentVersion,
-  );
-});
+  const currentVersion = displayVersion.value?.version
+  if (!currentVersion) return null
+  return detectPublishSecurityDowngradeForVersion(versionSecurityMetadata.value, currentVersion)
+})
 
 const installVersionOverride = computed(
   () => publishSecurityDowngrade.value?.trustedVersion ?? null,
-);
+)
 
 const downgradeFallbackInstallText = computed(() => {
-  const d = publishSecurityDowngrade.value;
-  if (!d?.trustedVersion) return null;
-  if (d.trustedTrustLevel === "provenance")
-    return $t("package.security_downgrade.fallback_install_provenance", {
+  const d = publishSecurityDowngrade.value
+  if (!d?.trustedVersion) return null
+  if (d.trustedTrustLevel === 'provenance')
+    return $t('package.security_downgrade.fallback_install_provenance', {
       version: d.trustedVersion,
-    });
-  if (d.trustedTrustLevel === "trustedPublisher")
-    return $t("package.security_downgrade.fallback_install_trustedPublisher", {
+    })
+  if (d.trustedTrustLevel === 'trustedPublisher')
+    return $t('package.security_downgrade.fallback_install_trustedPublisher', {
       version: d.trustedVersion,
-    });
-  return null;
-});
+    })
+  return null
+})
 
 const sizeTooltip = computed(() => {
   const chunks = [
     displayVersion.value &&
       displayVersion.value.dist.unpackedSize &&
-      $t("package.stats.size_tooltip.unpacked", {
+      $t('package.stats.size_tooltip.unpacked', {
         size: bytesFormatter.format(displayVersion.value.dist.unpackedSize),
       }),
     installSize.value &&
       installSize.value.dependencyCount &&
-      $t("package.stats.size_tooltip.total", {
+      $t('package.stats.size_tooltip.total', {
         size: bytesFormatter.format(installSize.value.totalSize),
         count: installSize.value.dependencyCount,
       }),
-  ];
-  return chunks.filter(Boolean).join("\n");
-});
+  ]
+  return chunks.filter(Boolean).join('\n')
+})
 
 const hasDependencies = computed(() => {
-  if (!displayVersion.value) return false;
-  const deps = displayVersion.value.dependencies;
-  const peerDeps = displayVersion.value.peerDependencies;
-  const optionalDeps = displayVersion.value.optionalDependencies;
+  if (!displayVersion.value) return false
+  const deps = displayVersion.value.dependencies
+  const peerDeps = displayVersion.value.peerDependencies
+  const optionalDeps = displayVersion.value.optionalDependencies
   return (
     (deps && Object.keys(deps).length > 0) ||
     (peerDeps && Object.keys(peerDeps).length > 0) ||
     (optionalDeps && Object.keys(optionalDeps).length > 0)
-  );
-});
+  )
+})
 
 // Vulnerability count for the stats banner
-const vulnCount = computed(() => vulnTree.value?.totalCounts.total ?? 0);
-const hasVulnerabilities = computed(() => vulnCount.value > 0);
+const vulnCount = computed(() => vulnTree.value?.totalCounts.total ?? 0)
+const hasVulnerabilities = computed(() => vulnCount.value > 0)
 
 // Total transitive dependencies count (from either vuln tree or install size)
 // Subtract 1 to exclude the root package itself
 const totalDepsCount = computed(() => {
   if (vulnTree.value) {
-    return vulnTree.value.totalPackages ? vulnTree.value.totalPackages - 1 : 0;
+    return vulnTree.value.totalPackages ? vulnTree.value.totalPackages - 1 : 0
   }
   if (installSize.value) {
-    return installSize.value.dependencyCount;
+    return installSize.value.dependencyCount
   }
-  return null;
-});
+  return null
+})
 
-const { repositoryUrl } = useRepositoryUrl(displayVersion);
+const { repositoryUrl } = useRepositoryUrl(displayVersion)
 
-const { repoRef } = useRepoMeta(repositoryUrl);
+const { repoRef } = useRepoMeta(repositoryUrl)
 
-const viewOnGitProvider = useViewOnGitProvider(() => repoRef.value?.provider);
+const viewOnGitProvider = useViewOnGitProvider(() => repoRef.value?.provider)
 
 // Check if a version has provenance/attestations
 // The dist object may have attestations that aren't in the base type
 function hasProvenance(version: PackumentVersion | null): boolean {
-  if (!version?.dist) return false;
-  const dist = version.dist as NpmVersionDist;
-  return !!dist.attestations;
+  if (!version?.dist) return false
+  const dist = version.dist as NpmVersionDist
+  return !!dist.attestations
 }
 
 // Get @types package name if available (non-deprecated)
 const typesPackageName = computed(() => {
-  if (!packageAnalysis.value) return null;
-  if (packageAnalysis.value.types.kind !== "@types") return null;
-  if (packageAnalysis.value.types.deprecated) return null;
-  return packageAnalysis.value.types.packageName;
-});
+  if (!packageAnalysis.value) return null
+  if (packageAnalysis.value.types.kind !== '@types') return null
+  if (packageAnalysis.value.types.deprecated) return null
+  return packageAnalysis.value.types.packageName
+})
 
 // Executable detection for run command
 const executableInfo = computed(() => {
-  if (!displayVersion.value || !pkg.value) return null;
-  return getExecutableInfo(pkg.value.name, displayVersion.value.bin);
-});
+  if (!displayVersion.value || !pkg.value) return null
+  return getExecutableInfo(pkg.value.name, displayVersion.value.bin)
+})
 
 // Detect if package is binary-only (show only execute commands, no install)
 const isBinaryOnly = computed(() => {
-  if (!displayVersion.value || !pkg.value) return false;
+  if (!displayVersion.value || !pkg.value) return false
   return isBinaryOnlyPackage({
     name: pkg.value.name,
     bin: displayVersion.value.bin,
     main: displayVersion.value.main,
     module: displayVersion.value.module,
     exports: displayVersion.value.exports,
-  });
-});
+  })
+})
 
 // Detect if package uses create-* naming convention
 const isCreatePkg = computed(() => {
-  if (!pkg.value) return false;
-  return isCreatePackage(pkg.value.name);
-});
+  if (!pkg.value) return false
+  return isCreatePackage(pkg.value.name)
+})
 
 // Get associated create-* package info (e.g., vite -> create-vite)
 const createPackageInfo = computed(() => {
-  if (!packageAnalysis.value?.createPackage) return null;
+  if (!packageAnalysis.value?.createPackage) return null
   // Don't show if deprecated
-  if (packageAnalysis.value.createPackage.deprecated) return null;
-  return packageAnalysis.value.createPackage;
-});
+  if (packageAnalysis.value.createPackage.deprecated) return null
+  return packageAnalysis.value.createPackage
+})
 
 // Canonical URL for this package page
 const canonicalUrl = computed(() => {
-  const base = `https://npmx.dev/package/${packageName.value}`;
-  return requestedVersion.value ? `${base}/v/${requestedVersion.value}` : base;
-});
+  const base = `https://npmx.dev/package/${packageName.value}`
+  return requestedVersion.value ? `${base}/v/${requestedVersion.value}` : base
+})
 
 // URL pattern for version selector - includes file path if present
 const versionUrlPattern = computed(
   () => `/package/${pkg.value?.name || packageName.value}/v/{version}`,
-);
+)
 
-const dependencyCount = computed(() =>
-  getDependencyCount(displayVersion.value),
-);
+const dependencyCount = computed(() => getDependencyCount(displayVersion.value))
 
-const numberFormatter = useNumberFormatter();
-const bytesFormatter = useBytesFormatter();
+const numberFormatter = useNumberFormatter()
+const bytesFormatter = useBytesFormatter()
 
 useHead({
-  link: [{ rel: "canonical", href: canonicalUrl }],
-});
+  link: [{ rel: 'canonical', href: canonicalUrl }],
+})
 
 useSeoMeta({
-  title: () =>
-    pkg.value?.name ? `${pkg.value.name} - npmx` : "Package - npmx",
-  ogTitle: () =>
-    pkg.value?.name ? `${pkg.value.name} - npmx` : "Package - npmx",
-  twitterTitle: () =>
-    pkg.value?.name ? `${pkg.value.name} - npmx` : "Package - npmx",
-  description: () => pkg.value?.description ?? "",
-  ogDescription: () => pkg.value?.description ?? "",
-  twitterDescription: () => pkg.value?.description ?? "",
-});
-
-const showSkeleton = shallowRef(false);
+  title: () => (pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx'),
+  ogTitle: () => (pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx'),
+  twitterTitle: () => (pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx'),
+  description: () => pkg.value?.description ?? '',
+  ogDescription: () => pkg.value?.description ?? '',
+  twitterDescription: () => pkg.value?.description ?? '',
+})
+
+const showSkeleton = shallowRef(false)
 </script>
 
 <template>
@@ -525,10 +499,7 @@ const showSkeleton = shallowRef(false);
     <!-- Scenario 1: SPA fallback — show skeleton (no real content to preserve) -->
     <!-- Scenario 2: SSR with missing payload — preserve server DOM, skip skeleton -->
     <PackageSkeleton
-      v-if="
-        isSpaFallback ||
-        (!hasServerContentOnly && (showSkeleton || status === 'pending'))
-      "
+      v-if="isSpaFallback || (!hasServerContentOnly && (showSkeleton || status === 'pending'))"
     />
 
     <!-- During hydration without payload, show captured server HTML as a static snapshot.
@@ -540,9 +511,7 @@ const showSkeleton = shallowRef(false);
     <article
       v-else-if="
         isHydratingWithServerContent ||
-        (hasServerContentOnly &&
-          serverRenderedHtml &&
-          (!pkg || readmeData?.defaultValue))
+        (hasServerContentOnly && serverRenderedHtml && (!pkg || readmeData?.defaultValue))
       "
       id="package-article"
       class="container w-full"
@@ -562,11 +531,7 @@ const showSkeleton = shallowRef(false);
         page="main"
         :version-url-pattern="versionUrlPattern"
       />
-      <article
-        id="package-article"
-        :class="$style.packagePage"
-        class="container w-full"
-      >
+      <article id="package-article" :class="$style.packagePage" class="container w-full">
         <!-- Package details -->
         <section :class="$style.areaDetails">
           <div class="mb-4 pt-4">
@@ -576,7 +541,7 @@ const showSkeleton = shallowRef(false);
                 <span v-html="pkgDescription" />
               </p>
               <p v-else class="text-fg-subtle text-base m-0 italic">
-                {{ $t("package.no_description") }}
+                {{ $t('package.no_description') }}
               </p>
             </div>
 
@@ -596,16 +561,16 @@ const showSkeleton = shallowRef(false);
           >
             <h2 class="font-medium mb-2">
               {{
-                deprecationNotice.type === "package"
-                  ? $t("package.deprecation.package")
-                  : $t("package.deprecation.version")
+                deprecationNotice.type === 'package'
+                  ? $t('package.deprecation.package')
+                  : $t('package.deprecation.version')
               }}
             </h2>
             <p v-if="deprecationNoticeMessage" class="text-base m-0">
               <span v-html="deprecationNoticeMessage" />
             </p>
             <p v-else class="text-base m-0 italic">
-              {{ $t("package.deprecation.no_reason") }}
+              {{ $t('package.deprecation.no_reason') }}
             </p>
           </div>
 
@@ -615,7 +580,7 @@ const showSkeleton = shallowRef(false);
           >
             <div class="space-y-1 sm:col-span-2">
               <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-                {{ $t("package.stats.license") }}
+                {{ $t('package.stats.license') }}
               </dt>
               <dd class="font-mono text-sm text-fg">
                 <LicenseDisplay
@@ -623,29 +588,21 @@ const showSkeleton = shallowRef(false);
                   :license="pkg.license"
                   :package-name="pkg.name"
                 />
-                <span v-else>{{ $t("package.license.none") }}</span>
+                <span v-else>{{ $t('package.license.none') }}</span>
               </dd>
             </div>
 
             <div class="space-y-1 sm:col-span-2">
               <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-                {{ $t("package.stats.deps") }}
+                {{ $t('package.stats.deps') }}
               </dt>
-              <dd
-                class="font-mono text-sm text-fg flex items-center justify-start gap-2"
-              >
+              <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
                 <span class="flex items-center gap-1">
                   <!-- Direct deps (muted) -->
-                  <span class="text-fg-muted">{{
-                    numberFormatter.format(dependencyCount)
-                  }}</span>
+                  <span class="text-fg-muted">{{ numberFormatter.format(dependencyCount) }}</span>
 
                   <!-- Total transitive deps in parens -->
-                  <template
-                    v-if="
-                      dependencyCount > 0 && dependencyCount !== totalDepsCount
-                    "
-                  >
+                  <template v-if="dependencyCount > 0 && dependencyCount !== totalDepsCount">
                     <ClientOnly>
                       <span
                         v-if="
@@ -654,10 +611,7 @@ const showSkeleton = shallowRef(false);
                         "
                         class="inline-flex items-center gap-1 text-fg-subtle"
                       >
-                        (<span
-                          class="i-svg-spinners:ring-resize w-3 h-3"
-                          aria-hidden="true"
-                        />)
+                        (<span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />)
                       </span>
                       <span v-else-if="totalDepsCount !== null"
                         ><span class="text-fg-subtle">(</span
@@ -679,9 +633,7 @@ const showSkeleton = shallowRef(false);
                     :title="$t('package.stats.view_dependency_graph')"
                     classicon="i-lucide:network -rotate-90"
                   >
-                    <span class="sr-only">{{
-                      $t("package.stats.view_dependency_graph")
-                    }}</span>
+                    <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
                   </LinkBase>
 
                   <LinkBase
@@ -691,19 +643,15 @@ const showSkeleton = shallowRef(false);
                     :title="$t('package.stats.inspect_dependency_tree')"
                     classicon="i-lucide:table"
                   >
-                    <span class="sr-only">{{
-                      $t("package.stats.inspect_dependency_tree")
-                    }}</span>
+                    <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
                   </LinkBase>
                 </ButtonGroup>
               </dd>
             </div>
 
             <div class="space-y-1 sm:col-span-3">
-              <dt
-                class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1"
-              >
-                {{ $t("package.stats.install_size") }}
+              <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
+                {{ $t('package.stats.install_size') }}
                 <TooltipApp v-if="sizeTooltip" :text="sizeTooltip" interactive>
                   <span
                     tabindex="0"
@@ -717,29 +665,19 @@ const showSkeleton = shallowRef(false);
                 <!-- Package size (greyed out) -->
                 <span class="text-fg-muted" dir="ltr">
                   <span v-if="displayVersion?.dist?.unpackedSize">
-                    {{
-                      bytesFormatter.format(displayVersion.dist.unpackedSize)
-                    }}
+                    {{ bytesFormatter.format(displayVersion.dist.unpackedSize) }}
                   </span>
                   <span v-else>-</span>
                 </span>
 
                 <!-- Total install size in parens -->
-                <template
-                  v-if="
-                    displayVersion?.dist?.unpackedSize !==
-                    installSize?.totalSize
-                  "
-                >
+                <template v-if="displayVersion?.dist?.unpackedSize !== installSize?.totalSize">
                   <span class="ms-1">
                     <span
                       v-if="installSizeStatus === 'pending'"
                       class="inline-flex items-center gap-1 text-fg-subtle"
                     >
-                      (<span
-                        class="i-svg-spinners:ring-resize w-3 h-3"
-                        aria-hidden="true"
-                      />)
+                      (<span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />)
                     </span>
                     <span v-else-if="installSize?.totalSize" dir="ltr">
                       <span class="text-fg-subtle">(</span
@@ -755,31 +693,20 @@ const showSkeleton = shallowRef(false);
             <!-- Vulnerabilities count -->
             <div class="space-y-1 sm:col-span-2">
               <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-                {{ $t("package.stats.vulns") }}
+                {{ $t('package.stats.vulns') }}
               </dt>
               <dd class="font-mono text-sm text-fg">
                 <span
-                  v-if="
-                    vulnTreeStatus === 'pending' || vulnTreeStatus === 'idle'
-                  "
+                  v-if="vulnTreeStatus === 'pending' || vulnTreeStatus === 'idle'"
                   class="inline-flex items-center gap-1 text-fg-subtle"
                 >
-                  <span
-                    class="i-svg-spinners:ring-resize w-3 h-3"
-                    aria-hidden="true"
-                  />
+                  <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
                 </span>
                 <span v-else-if="vulnTreeStatus === 'success'">
-                  <span
-                    v-if="hasVulnerabilities"
-                    class="text-amber-700 dark:text-amber-500"
-                  >
+                  <span v-if="hasVulnerabilities" class="text-amber-700 dark:text-amber-500">
                     {{ numberFormatter.format(vulnCount) }}
                   </span>
-                  <span
-                    v-else
-                    class="inline-flex items-center gap-1 text-fg-muted"
-                  >
+                  <span v-else class="inline-flex items-center gap-1 text-fg-muted">
                     <span class="i-lucide:check w-3 h-3" aria-hidden="true" />
                     {{ numberFormatter.format(0) }}
                   </span>
@@ -801,13 +728,10 @@ const showSkeleton = shallowRef(false);
                   })
                 "
               >
-                {{ $t("package.stats.published") }}
+                {{ $t('package.stats.published') }}
               </dt>
               <dd class="font-mono text-sm text-fg">
-                <DateTime
-                  :datetime="pkg.time[resolvedVersion]!"
-                  date-style="medium"
-                />
+                <DateTime :datetime="pkg.time[resolvedVersion]!" date-style="medium" />
               </dd>
             </div>
           </dl>
@@ -823,17 +747,10 @@ const showSkeleton = shallowRef(false);
         </section>
 
         <!-- Binary-only packages: Show only execute command (no install) -->
-        <section
-          v-if="isBinaryOnly"
-          class="scroll-mt-20"
-          :class="$style.areaInstall"
-        >
+        <section v-if="isBinaryOnly" class="scroll-mt-20" :class="$style.areaInstall">
           <div class="flex flex-wrap items-center justify-between mb-3">
-            <h2
-              id="run-heading"
-              class="text-xs text-fg-subtle uppercase tracking-wider"
-            >
-              {{ $t("package.run.title") }}
+            <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
+              {{ $t('package.run.title') }}
             </h2>
             <!-- Package manager dropdown -->
             <PackageManagerSelect />
@@ -848,19 +765,14 @@ const showSkeleton = shallowRef(false);
         </section>
 
         <!-- Regular packages: Install command with optional run command -->
-        <section
-          v-else
-          id="get-started"
-          class="scroll-mt-20"
-          :class="$style.areaInstall"
-        >
+        <section v-else id="get-started" class="scroll-mt-20" :class="$style.areaInstall">
           <div class="flex flex-wrap items-center justify-between mb-3">
             <h2
               id="get-started-heading"
               class="group text-xs text-fg-subtle uppercase tracking-wider"
             >
               <LinkBase to="#get-started">
-                {{ $t("package.get_started.title") }}
+                {{ $t('package.get_started.title') }}
               </LinkBase>
             </h2>
             <!-- Package manager dropdown -->
@@ -872,14 +784,9 @@ const showSkeleton = shallowRef(false);
               role="alert"
               class="mb-4 rounded-lg border border-amber-600/40 bg-amber-500/10 px-4 py-3 text-amber-700 dark:text-amber-400"
             >
-              <h3
-                class="m-0 flex items-center gap-2 font-mono text-sm font-medium"
-              >
-                <span
-                  class="i-lucide:circle-alert w-4 h-4 shrink-0"
-                  aria-hidden="true"
-                />
-                {{ $t("package.security_downgrade.title") }}
+              <h3 class="m-0 flex items-center gap-2 font-mono text-sm font-medium">
+                <span class="i-lucide:circle-alert w-4 h-4 shrink-0" aria-hidden="true" />
+                {{ $t('package.security_downgrade.title') }}
               </h3>
               <p class="mt-2 mb-0 text-sm">
                 <i18n-t
@@ -897,18 +804,15 @@ const showSkeleton = shallowRef(false);
                       target="_blank"
                       rel="noopener noreferrer"
                       class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                      >{{ $t("package.security_downgrade.provenance_link_text")
-                      }}<span
-                        class="i-lucide:external-link w-3 h-3"
-                        aria-hidden="true"
+                      >{{ $t('package.security_downgrade.provenance_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
                     /></a>
                   </template>
                 </i18n-t>
                 <i18n-t
                   v-else-if="
                     publishSecurityDowngrade.downgradedTrustLevel === 'none' &&
-                    publishSecurityDowngrade.trustedTrustLevel ===
-                      'trustedPublisher'
+                    publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
                   "
                   keypath="package.security_downgrade.description_to_none_trustedPublisher"
                   tag="span"
@@ -920,22 +824,15 @@ const showSkeleton = shallowRef(false);
                       target="_blank"
                       rel="noopener noreferrer"
                       class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                      >{{
-                        $t(
-                          "package.security_downgrade.trusted_publishing_link_text",
-                        )
-                      }}<span
-                        class="i-lucide:external-link w-3 h-3"
-                        aria-hidden="true"
+                      >{{ $t('package.security_downgrade.trusted_publishing_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
                     /></a>
                   </template>
                 </i18n-t>
                 <i18n-t
                   v-else-if="
-                    publishSecurityDowngrade.downgradedTrustLevel ===
-                      'provenance' &&
-                    publishSecurityDowngrade.trustedTrustLevel ===
-                      'trustedPublisher'
+                    publishSecurityDowngrade.downgradedTrustLevel === 'provenance' &&
+                    publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
                   "
                   keypath="package.security_downgrade.description_to_provenance_trustedPublisher"
                   tag="span"
@@ -947,10 +844,8 @@ const showSkeleton = shallowRef(false);
                       target="_blank"
                       rel="noopener noreferrer"
                       class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                      >{{ $t("package.security_downgrade.provenance_link_text")
-                      }}<span
-                        class="i-lucide:external-link w-3 h-3"
-                        aria-hidden="true"
+                      >{{ $t('package.security_downgrade.provenance_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
                     /></a>
                   </template>
                   <template #trustedPublishing>
@@ -959,17 +854,12 @@ const showSkeleton = shallowRef(false);
                       target="_blank"
                       rel="noopener noreferrer"
                       class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                      >{{
-                        $t(
-                          "package.security_downgrade.trusted_publishing_link_text",
-                        )
-                      }}<span
-                        class="i-lucide:external-link w-3 h-3"
-                        aria-hidden="true"
+                      >{{ $t('package.security_downgrade.trusted_publishing_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
                     /></a>
                   </template>
                 </i18n-t>
-                {{ " " }}
+                {{ ' ' }}
                 <template v-if="downgradeFallbackInstallText">
                   {{ downgradeFallbackInstallText }}
                 </template>
@@ -980,9 +870,7 @@ const showSkeleton = shallowRef(false);
               :requested-version="resolvedVersion"
               :install-version-override="installVersionOverride"
               :jsr-info="jsrInfo"
-              :dev-dependency-suggestion="
-                packageAnalysis?.devDependencySuggestion
-              "
+              :dev-dependency-suggestion="packageAnalysis?.devDependencySuggestion"
               :types-package-name="typesPackageName"
               :executable-info="executableInfo"
               :create-package-info="createPackageInfo"
@@ -992,10 +880,7 @@ const showSkeleton = shallowRef(false);
 
         <div class="space-y-6" :class="$style.areaVulns">
           <!-- Bad package warning -->
-          <PackageReplacement
-            v-if="moduleReplacement"
-            :replacement="moduleReplacement"
-          />
+          <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
           <!-- Size / dependency increase notice -->
           <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
           <!-- Vulnerability scan -->
@@ -1045,10 +930,7 @@ const showSkeleton = shallowRef(false);
             />
 
             <!-- Playground links -->
-            <PackagePlaygrounds
-              v-if="playgroundLinks.length"
-              :links="playgroundLinks"
-            />
+            <PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
 
             <PackageCompatibility :engines="displayVersion?.engines" />
 
@@ -1059,9 +941,7 @@ const showSkeleton = shallowRef(false);
               :versions="pkg.versions"
               :dist-tags="pkg['dist-tags'] ?? {}"
               :time="pkg.time"
-              :selected-version="
-                resolvedVersion ?? pkg['dist-tags']?.['latest']
-              "
+              :selected-version="resolvedVersion ?? pkg['dist-tags']?.['latest']"
             />
 
             <!-- Install Scripts Warning -->
@@ -1087,31 +967,21 @@ const showSkeleton = shallowRef(false);
             <PackageKeywords :keywords="displayVersion?.keywords" />
 
             <!-- Maintainers (with admin actions when connected) -->
-            <PackageMaintainers
-              :package-name="pkg.name"
-              :maintainers="pkg.maintainers"
-            />
+            <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
           </div>
         </PackageSidebar>
 
         <!-- README -->
-        <section
-          id="readme"
-          class="min-w-0 scroll-mt-20"
-          :class="$style.areaReadme"
-        >
+        <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
           <div
             ref="readmeHeader"
             class="flex [@media(min-height:800px)]:sticky z-10 flex-wrap items-center justify-between mb-3 py-2 -mx-1 px-2 transition-shadow duration-200"
             :class="{ 'bg-bg border-border border-b': isReadmeHeaderPinned }"
             :style="{ top: readmeStickyTop }"
           >
-            <h2
-              id="readme-heading"
-              class="group text-fg-subtle uppercase font-medium"
-            >
+            <h2 id="readme-heading" class="group text-fg-subtle uppercase font-medium">
               <LinkBase to="#readme">
-                {{ $t("package.readme.title") }}
+                {{ $t('package.readme.title') }}
               </LinkBase>
             </h2>
             <div class="flex gap-2">
@@ -1127,15 +997,11 @@ const showSkeleton = shallowRef(false);
                   @click="copyReadmeHandler()"
                   :aria-pressed="copiedReadme"
                   :aria-label="
-                    copiedReadme
-                      ? $t('common.copied')
-                      : $t('package.readme.copy_as_markdown')
-                  "
-                  :classicon="
-                    copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'
+                    copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
                   "
+                  :classicon="copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'"
                 >
-                  {{ copiedReadme ? $t("common.copied") : $t("common.copy") }}
+                  {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
                 </ButtonBase>
               </TooltipApp>
               <ReadmeTocDropdown
@@ -1149,7 +1015,7 @@ const showSkeleton = shallowRef(false);
           <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
           <Readme v-if="readmeData?.html" :html="readmeData.html" />
           <p v-else class="text-fg-muted italic">
-            {{ $t("package.readme.no_readme") }}
+            {{ $t('package.readme.no_readme') }}
             <a
               v-if="repositoryUrl"
               :href="repositoryUrl"
@@ -1170,11 +1036,8 @@ const showSkeleton = shallowRef(false);
               v-if="provenanceStatus === 'pending'"
               class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
             >
-              <span
-                class="i-svg-spinners:ring-resize w-4 h-4"
-                aria-hidden="true"
-              />
-              <span>{{ $t("package.provenance_section.title") }}…</span>
+              <span class="i-svg-spinners:ring-resize w-4 h-4" aria-hidden="true" />
+              <span>{{ $t('package.provenance_section.title') }}…</span>
             </div>
             <PackageProvenanceSection
               v-else-if="provenanceData"
@@ -1187,7 +1050,7 @@ const showSkeleton = shallowRef(false);
               class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
             >
               <span class="i-lucide:circle-alert w-4 h-4" aria-hidden="true" />
-              <span>{{ $t("package.provenance_section.error_loading") }}</span>
+              <span>{{ $t('package.provenance_section.error_loading') }}</span>
             </div>
           </section>
         </section>
@@ -1201,13 +1064,13 @@ const showSkeleton = shallowRef(false);
       class="flex flex-col items-center py-20 text-center container w-full"
     >
       <h1 class="font-mono text-2xl font-medium mb-4">
-        {{ $t("package.not_found") }}
+        {{ $t('package.not_found') }}
       </h1>
       <p class="text-fg-muted mb-8">
-        {{ error?.message ?? $t("package.not_found_message") }}
+        {{ error?.message ?? $t('package.not_found_message') }}
       </p>
       <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
-        $t("common.go_back_home")
+        $t('common.go_back_home')
       }}</LinkBase>
     </div>
   </main>
@@ -1223,11 +1086,11 @@ const showSkeleton = shallowRef(false);
   /* Mobile: single column, sidebar above readme */
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
-    "details"
-    "install"
-    "vulns"
-    "sidebar"
-    "readme";
+    'details'
+    'install'
+    'vulns'
+    'sidebar'
+    'readme';
 }
 
 /* Tablet/medium: install/vulns full width, readme+sidebar side by side */
@@ -1235,10 +1098,10 @@ const showSkeleton = shallowRef(false);
   .packagePage {
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
-      "details details"
-      "install sidebar"
-      "vulns   sidebar"
-      "readme  sidebar";
+      'details details'
+      'install sidebar'
+      'vulns   sidebar'
+      'readme  sidebar';
     grid-template-rows: auto auto auto auto 1fr;
   }
 }
@@ -1248,10 +1111,10 @@ const showSkeleton = shallowRef(false);
   .packagePage {
     grid-template-columns: 1fr 20rem;
     grid-template-areas:
-      "details sidebar"
-      "install sidebar"
-      "vulns   sidebar"
-      "readme  sidebar";
+      'details sidebar'
+      'install sidebar'
+      'vulns   sidebar'
+      'readme  sidebar';
   }
 }