fix: small fixes

Author: danielroe

app/components/diff/ViewerPanel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { FileDiffResponse, FileChange, DiffHunk } from '#shared/types'
 import { createDiff, insertSkipBlocks, countDiffStats } from '#shared/utils/diff'
+import { onClickOutside } from '@vueuse/core'
 import { motion } from 'motion-v'
 
 const props = defineProps<{
@@ -16,6 +17,10 @@ const maxDiffDistance = ref(30)
 const inlineMaxCharEdits = ref(2)
 const wordWrap = ref(false)
 const showOptions = ref(false)
+const optionsDropdownRef = useTemplateRef('optionsDropdownRef')
+onClickOutside(optionsDropdownRef, () => {
+  showOptions.value = false
+})
 const loading = ref(true)
 const loadError = ref<Error | null>(null)
 const diff = ref<FileDiffResponse | null>(null)
@@ -192,8 +197,8 @@ function getStepMarks(min: number, max: number, step: number): number[] {
   return marks
 }
 
-const changeRatioMarks = computed(() => getStepMarks(0, 1, 0.01))
-const diffDistanceMarks = computed(() => getStepMarks(1, 60, 1))
+const changeRatioMarks = computed(() => getStepMarks(0, 1, 0.1))
+const diffDistanceMarks = computed(() => getStepMarks(1, 60, 10))
 const charEditMarks = computed(() => [] as number[]) // no dots for char edits slider
 const changeRatioPercent = computed(() => calcPercent(maxChangeRatio.value, 0, 1))
 const diffDistancePercent = computed(() => calcPercent(maxDiffDistance.value, 1, 60))
@@ -260,7 +265,7 @@ function getCodeUrl(version: string): string {
 
       <div class="flex items-center gap-2 shrink-0">
         <!-- Options dropdown -->
-        <div class="relative">
+        <div ref="optionsDropdownRef" class="relative">
           <button
             type="button"
             class="px-2 py-1 text-xs text-fg-muted hover:text-fg bg-bg-muted border border-border rounded transition-colors flex items-center gap-1.5"
@@ -278,7 +283,7 @@ function getCodeUrl(version: string): string {
           <!-- Dropdown menu -->
           <motion.div
             v-if="showOptions"
-            class="absolute right-0 top-full mt-2 z-20 p-4 bg-bg-elevated border border-border shadow-2xl overflow-auto"
+            class="absolute inset-ie-0 top-full mt-2 z-20 p-4 bg-bg-elevated border border-border shadow-2xl overflow-auto"
             :style="{
               width: mergeModifiedLines
                 ? 'min(420px, calc(100vw - 24px))'

server/api/registry/compare-file/[...pkg].get.ts

@@ -3,33 +3,14 @@ import { PackageFileDiffQuerySchema } from '#shared/schemas/package'
 import type { FileDiffResponse, DiffHunk } from '#shared/types'
 import { CACHE_MAX_AGE_ONE_YEAR } from '#shared/utils/constants'
 import { createDiff, insertSkipBlocks, countDiffStats } from '#server/utils/diff'
+import { parseVersionRange } from '#server/utils/compare'
 
 const CACHE_VERSION = 1
 const DIFF_TIMEOUT = 15000 // 15 sec
 
 /** Maximum file size for diffing (250KB - smaller than viewing since we diff two files) */
 const MAX_DIFF_FILE_SIZE = 250 * 1024
 
-/**
- * Parse the version range from the URL.
- * Supports formats like: "1.0.0...2.0.0" or "1.0.0..2.0.0"
- */
-function parseVersionRange(versionRange: string): { from: string; to: string } | null {
-  // Try triple dot first (GitHub style)
-  let parts = versionRange.split('...')
-  if (parts.length === 2) {
-    return { from: parts[0]!, to: parts[1]! }
-  }
-
-  // Try double dot
-  parts = versionRange.split('..')
-  if (parts.length === 2) {
-    return { from: parts[0]!, to: parts[1]! }
-  }
-
-  return null
-}
-
 /**
  * Fetch file content from jsDelivr with size check
  */
@@ -241,7 +222,13 @@ export default defineCachedEventHandler(
     getKey: event => {
       const pkg = getRouterParam(event, 'pkg') ?? ''
       const query = getQuery(event)
-      const optionsKey = `${query.mergeModifiedLines}:${query.maxChangeRatio}:${query.maxDiffDistance}:${query.inlineMaxCharEdits}`
+      // Normalize option values to prevent cache pollution from arbitrary floats.
+      // These match the parsing logic used in the handler body.
+      const merge = query.mergeModifiedLines !== 'false'
+      const ratio = Math.round((parseFloat(query.maxChangeRatio as string) || 0.45) * 100)
+      const distance = parseInt(query.maxDiffDistance as string, 10) || 30
+      const charEdits = parseInt(query.inlineMaxCharEdits as string, 10) || 2
+      const optionsKey = `${merge}:${ratio}:${distance}:${charEdits}`
       return `compare-file:v${CACHE_VERSION}:${pkg.replace(/\/+$/, '').trim()}:${optionsKey}`
     },
   },

server/api/registry/compare/[...pkg].get.ts

@@ -2,7 +2,7 @@ import * as v from 'valibot'
 import { PackageCompareQuerySchema } from '#shared/schemas/package'
 import type { CompareResponse } from '#shared/types'
 import { CACHE_MAX_AGE_ONE_YEAR } from '#shared/utils/constants'
-import { buildCompareResponse } from '#server/utils/compare'
+import { buildCompareResponse, parseVersionRange } from '#server/utils/compare'
 
 const CACHE_VERSION = 1
 const COMPARE_TIMEOUT = 8000 // 8 seconds
@@ -25,26 +25,6 @@ async function fetchPackageJson(
   }
 }
 
-/**
- * Parse the version range from the URL.
- * Supports formats like: "1.0.0...2.0.0" or "1.0.0..2.0.0"
- */
-function parseVersionRange(versionRange: string): { from: string; to: string } | null {
-  // Try triple dot first (GitHub style)
-  let parts = versionRange.split('...')
-  if (parts.length === 2) {
-    return { from: parts[0]!, to: parts[1]! }
-  }
-
-  // Try double dot
-  parts = versionRange.split('..')
-  if (parts.length === 2) {
-    return { from: parts[0]!, to: parts[1]! }
-  }
-
-  return null
-}
-
 /**
  * Compare two package versions and return differences.
  *

server/utils/compare.ts

@@ -1,6 +1,19 @@
 import { diff as semverDiff } from 'semver'
 import type { PackageFileTree, DependencyChange, FileChange, CompareResponse } from '#shared/types'
 
+/**
+ * Parse a version range from a URL segment.
+ * Supports formats like: "1.0.0...2.0.0" (triple dot, GitHub style)
+ */
+export function parseVersionRange(versionRange: string): { from: string; to: string } | null {
+  const parts = versionRange.split('...')
+  if (parts.length === 2) {
+    return { from: parts[0]!, to: parts[1]! }
+  }
+
+  return null
+}
+
 /** Maximum number of files to include in comparison */
 const MAX_FILES_COMPARE = 1000
 

shared/utils/diff.ts

@@ -374,6 +374,17 @@ export function countDiffStats(hunks: (DiffHunk | DiffSkipBlock)[]): {
       for (const line of hunk.lines) {
         if (line.type === 'insert') additions++
         else if (line.type === 'delete') deletions++
+        else if (line.type === 'normal') {
+          // Merged modified lines have type 'normal' but contain inline
+          // insert/delete segments. Count them as both an addition and deletion.
+          const hasInlineChanges = line.content.some(
+            seg => seg.type === 'insert' || seg.type === 'delete',
+          )
+          if (hasInlineChanges) {
+            additions++
+            deletions++
+          }
+        }
       }
     }
   }