fix: improve badge text measurement accuracy

This PR improves badge appearance by using a more accurate method to measure text width. Instead of relying on a predefined character width, it utilizes the Canvas API to measure the actual width of the text, resulting in better alignment and spacing for badges with varying character widths.

Speaking in code, this is how the old and new methods compare:
{ label: 'iiiiiiiiii', leftWidthOld: 86, leftWidth: 41 }
{ label: 'wwwwwwwwww', leftWidthOld: 86, leftWidth: 97 }

Author: wojtekmaj

package.json

@@ -60,6 +60,7 @@
     "@iconify-json/vscode-icons": "1.2.40",
     "@intlify/shared": "11.2.8",
     "@lunariajs/core": "https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@f07e1a3",
+    "@napi-rs/canvas": "0.1.92",
     "@nuxt/a11y": "1.0.0-alpha.1",
     "@nuxt/fonts": "0.13.0",
     "@nuxt/scripts": "0.13.2",

pnpm-lock.yaml

@@ -1,4 +1,5 @@
 import * as v from 'valibot'
+import { createCanvas, type SKRSContext2D } from '@napi-rs/canvas'
 import { hash } from 'ohash'
 import { createError, getRouterParam, getQuery, setHeader } from 'h3'
 import { PackageRouteParamsSchema } from '#shared/schemas/package'
@@ -34,15 +35,47 @@ const COLORS = {
   white: '#ffffff',
 }
 
-const DEFAULT_CHAR_WIDTH = 7
-const CHARS_WIDTH = {
-  engines: 5.5,
+const CHAR_WIDTH = 7
+
+const BADGE_PADDING_X = 8
+const MIN_BADGE_TEXT_WIDTH = 40
+
+const BADGE_FONT_SHORTHAND = 'normal normal 400 11px Geist, system-ui, -apple-system, sans-serif'
+
+let cachedCanvasContext: SKRSContext2D | null | undefined
+
+function getCanvasContext(): SKRSContext2D | null {
+  if (cachedCanvasContext !== undefined) {
+    return cachedCanvasContext
+  }
+
+  try {
+    cachedCanvasContext = createCanvas(1, 1).getContext('2d')
+  } catch {
+    cachedCanvasContext = null
+  }
+
+  return cachedCanvasContext
 }
 
-function measureTextWidth(text: string, charWidth?: number): number {
-  charWidth ??= DEFAULT_CHAR_WIDTH
-  const paddingX = 8
-  return Math.max(40, Math.round(text.length * charWidth) + paddingX * 2)
+function fallbackMeasureTextWidth(text: string): number {
+  return Math.max(MIN_BADGE_TEXT_WIDTH, Math.round(text.length * CHAR_WIDTH) + BADGE_PADDING_X * 2)
+}
+
+function measureTextWidth(text: string): number {
+  const context = getCanvasContext()
+
+  if (context) {
+    context.font = BADGE_FONT_SHORTHAND
+
+    const measuredWidth = context.measureText(text).width
+
+    if (!Number.isNaN(measuredWidth)) {
+      return Math.max(MIN_BADGE_TEXT_WIDTH, Math.ceil(measuredWidth) + BADGE_PADDING_X * 2)
+    }
+  }
+
+  return fallbackMeasureTextWidth(text)
 }
 
 function formatBytes(bytes: number): string {
@@ -296,10 +329,7 @@ export default defineCachedEventHandler(
       const finalLabelColor = rawLabelColor?.startsWith('#') ? rawLabelColor : `#${rawLabelColor}`
 
       const leftWidth = finalLabel.trim().length === 0 ? 0 : measureTextWidth(finalLabel)
-      const rightWidth = measureTextWidth(
-        finalValue,
-        CHARS_WIDTH[strategyKey as keyof typeof CHARS_WIDTH],
-      )
+      const rightWidth = measureTextWidth(finalValue)
       const totalWidth = leftWidth + rightWidth
       const height = 20