diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
new file mode 100644
index 0000000000..de9619bca7
--- /dev/null
+++ b/app/components/Compare/FacetBarChart.vue
@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { VueUiHorizontalBar } from 'vue-data-ui/vue-ui-horizontal-bar'
+import type {
+  VueUiHorizontalBarConfig,
+  VueUiHorizontalBarDatapoint,
+  VueUiHorizontalBarDatasetItem,
+} from 'vue-data-ui'
+import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
+import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
+import {
+  loadFile,
+  insertLineBreaks,
+  sanitise,
+  applyEllipsis,
+  copyAltTextForCompareFacetBarChart,
+} from '~/utils/charts'
+
+import('vue-data-ui/style.css')
+
+const props = defineProps<{
+  values: (FacetValue | null | undefined)[]
+  packages: string[]
+  label: string
+  description: string
+  facetLoading?: boolean
+}>()
+
+const colorMode = useColorMode()
+const resolvedMode = shallowRef<'light' | 'dark'>('light')
+const rootEl = shallowRef<HTMLElement | null>(null)
+const { width } = useElementSize(rootEl)
+const { copy, copied } = useClipboard()
+
+const mobileBreakpointWidth = 640
+const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
+
+const chartKey = ref(0)
+
+const { colors } = useCssVariables(
+  [
+    '--bg',
+    '--fg',
+    '--bg-subtle',
+    '--bg-elevated',
+    '--fg-subtle',
+    '--fg-muted',
+    '--border',
+    '--border-subtle',
+  ],
+  {
+    element: rootEl,
+    watchHtmlAttributes: true,
+    watchResize: false,
+  },
+)
+
+const watermarkColors = computed(() => ({
+  fg: colors.value.fg ?? OKLCH_NEUTRAL_FALLBACK,
+  bg: colors.value.bg ?? OKLCH_NEUTRAL_FALLBACK,
+  fgSubtle: colors.value.fgSubtle ?? OKLCH_NEUTRAL_FALLBACK,
+}))
+
+onMounted(async () => {
+  rootEl.value = document.documentElement
+  resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
+})
+
+watch(
+  () => colorMode.value,
+  value => {
+    resolvedMode.value = value === 'dark' ? 'dark' : 'light'
+  },
+  { flush: 'sync' },
+)
+
+watch(
+  () => props.packages,
+  (newP, oldP) => {
+    if (newP.length !== oldP.length) return
+    chartKey.value += 1
+  },
+)
+
+const isDarkMode = computed(() => resolvedMode.value === 'dark')
+
+const dataset = computed<VueUiHorizontalBarDatasetItem[]>(() => {
+  if (props.facetLoading) return []
+  return props.packages.map((name, index) => {
+    const rawValue = props.values[index]?.raw
+    return {
+      name: insertLineBreaks(applyEllipsis(name)),
+      value: typeof rawValue === 'number' ? rawValue : 0,
+      color: isListedFramework(name) ? getFrameworkColor(name) : undefined,
+      formattedValue: props.values[index]?.display,
+    }
+  })
+})
+
+const skeletonDataset = computed(() =>
+  props.packages.map((_pkg, i) => ({
+    name: '_',
+    value: i + 1,
+    color: colors.value.border,
+  })),
+)
+
+function buildExportFilename(extension: string): string {
+  const sanitizedPackages = props.packages.map(p => sanitise(p).slice(0, 10)).join('_')
+  const comparisonLabel = sanitise($t('compare.packages.section_comparison'))
+  const facetLabel = sanitise(props.label)
+  return `${facetLabel}_${comparisonLabel}_${sanitizedPackages}.${extension}`
+}
+
+const config = computed<VueUiHorizontalBarConfig>(() => {
+  return {
+    theme: isDarkMode.value ? 'dark' : '',
+    userOptions: {
+      buttons: {
+        tooltip: false,
+        pdf: false,
+        fullscreen: false,
+        sort: false,
+        annotator: false,
+        table: false,
+        csv: false,
+        altCopy: true,
+      },
+      buttonTitle: {
+        img: $t('package.trends.download_file', { fileType: 'PNG' }),
+        svg: $t('package.trends.download_file', { fileType: 'SVG' }),
+        altCopy: $t('package.trends.copy_alt.button_label'),
+      },
+      callbacks: {
+        img: args => {
+          const imageUri = args?.imageUri
+          if (!imageUri) return
+          loadFile(imageUri, buildExportFilename('png'))
+        },
+        svg: args => {
+          const blob = args?.blob
+          if (!blob) return
+          const url = URL.createObjectURL(blob)
+          loadFile(url, buildExportFilename('svg'))
+          URL.revokeObjectURL(url)
+        },
+        altCopy: ({ dataset: dst, config: cfg }) => {
+          copyAltTextForCompareFacetBarChart({
+            dataset: dst,
+            config: {
+              ...cfg,
+              facet: props.label,
+              description: props.description,
+              copy,
+              $t,
+            },
+          })
+        },
+      },
+    },
+    skeletonDataset: skeletonDataset.value,
+    skeletonConfig: {
+      style: {
+        chart: {
+          backgroundColor: colors.value.bg,
+        },
+      },
+    },
+    style: {
+      chart: {
+        backgroundColor: colors.value.bg,
+        height: 60 * props.packages.length,
+        layout: {
+          bars: {
+            rowColor: isDarkMode.value ? colors.value.borderSubtle : colors.value.bgSubtle,
+            rowRadius: 4,
+            borderRadius: 4,
+            dataLabels: {
+              fontSize: isMobile.value ? 12 : 18,
+              percentage: { show: false },
+              offsetX: 12,
+              bold: false,
+              color: colors.value.fg,
+              value: {
+                formatter: ({ config }) => {
+                  return config?.datapoint?.formattedValue ?? '0'
+                },
+              },
+            },
+            nameLabels: {
+              fontSize: isMobile.value ? 12 : 18,
+              color: colors.value.fgSubtle,
+            },
+            underlayerColor: colors.value.bg,
+          },
+          highlighter: {
+            opacity: isMobile.value ? 0 : 5,
+          },
+        },
+        legend: {
+          show: false,
+        },
+        title: {
+          fontSize: 16,
+          bold: false,
+          text: props.label,
+          color: colors.value.fg,
+          subtitle: {
+            text: props.description,
+            fontSize: 12,
+            color: colors.value.fgSubtle,
+          },
+        },
+        tooltip: {
+          show: !isMobile.value,
+          borderColor: 'transparent',
+          backdropFilter: false,
+          backgroundColor: 'transparent',
+          customFormat: ({ datapoint }) => {
+            const name = datapoint?.name?.replace(/\n/g, '<br>')
+            return `
+            <div class="font-mono p-3 border border-border rounded-md bg-[var(--bg)]/10 backdrop-blur-md">
+              <div class="flex items-center gap-2">
+                <div class="w-3 h-3">
+                  <svg viewBox="0 0 2 2" class="w-full h-full">
+                    <rect x="0" y="0" width="2" height="2" rx="0.3" fill="${datapoint?.color}" />
+                  </svg>
+                </div>
+                <span>${name}: ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}</span>
+              </div>
+            </div>
+            `
+          },
+        },
+      },
+    },
+  }
+})
+</script>
+
+<template>
+  <div class="font-mono facet-bar">
+    <ClientOnly v-if="dataset.length">
+      <VueUiHorizontalBar :key="chartKey" :dataset :config class="[direction:ltr]">
+        <template #svg="{ svg }">
+          <!-- Inject npmx logo & tagline during SVG and PNG print -->
+          <g
+            v-if="svg.isPrintingSvg || svg.isPrintingImg"
+            v-html="
+              drawSmallNpmxLogoAndTaglineWatermark({
+                svg,
+                colors: watermarkColors,
+                translateFn: $t,
+              })
+            "
+          />
+        </template>
+
+        <template #menuIcon="{ isOpen }">
+          <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
+          <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
+        </template>
+        <template #optionCsv>
+          <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
+        </template>
+        <template #optionImg>
+          <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
+        </template>
+        <template #optionSvg>
+          <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
+        </template>
+        <template #optionAltCopy>
+          <span
+            class="w-6 h-6"
+            :class="
+              copied ? 'i-lucide:check text-accent' : 'i-lucide:person-standing text-fg-subtle'
+            "
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
+        </template>
+      </VueUiHorizontalBar>
+
+      <template #fallback>
+        <div class="flex flex-col gap-2 justify-center items-center mb-2">
+          <SkeletonInline class="h-4 w-16" />
+          <SkeletonInline class="h-4 w-28" />
+        </div>
+        <div class="flex flex-col gap-1">
+          <SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
+        </div>
+      </template>
+    </ClientOnly>
+
+    <template v-else>
+      <div class="flex flex-col gap-2 justify-center items-center mb-2">
+        <SkeletonInline class="h-4 w-16" />
+        <SkeletonInline class="h-4 w-28" />
+      </div>
+      <div class="flex flex-col gap-1">
+        <SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style>
+.facet-bar .atom-subtitle {
+  width: 80% !important;
+  margin: 0 auto;
+  height: 2rem;
+}
+</style>
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 663596da04..89d4670963 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -20,7 +20,7 @@ import type {
 import { DATE_INPUT_MAX } from '~/utils/input'
 import { applyDataCorrection } from '~/utils/chart-data-correction'
 import { applyBlocklistCorrection, getAnomaliesForPackages } from '~/utils/download-anomalies'
-import { copyAltTextForTrendLineChart } from '~/utils/charts'
+import { copyAltTextForTrendLineChart, sanitise, loadFile } from '~/utils/charts'
 
 import('vue-data-ui/style.css')
 
@@ -1085,14 +1085,6 @@ const maxDatapoints = computed(() =>
   Math.max(0, ...(chartData.value.dataset ?? []).map(d => d.series.length)),
 )
 
-const loadFile = (link: string, filename: string) => {
-  const a = document.createElement('a')
-  a.href = link
-  a.download = filename
-  a.click()
-  a.remove()
-}
-
 const datetimeFormatterOptions = computed(() => {
   return {
     daily: { year: 'yyyy-MM-dd', month: 'yyyy-MM-dd', day: 'yyyy-MM-dd' },
@@ -1113,12 +1105,6 @@ const tooltipDateFormatter = computed(() => {
   })
 })
 
-const sanitise = (value: string) =>
-  value
-    .replace(/^@/, '')
-    .replace(/[\\/:"*?<>|]/g, '-')
-    .replace(/\//g, '-')
-
 function buildExportFilename(extension: string): string {
   const g = selectedGranularity.value
   const range = `${startDate.value}_${endDate.value}`
@@ -1954,7 +1940,14 @@ watch(selectedMetric, value => {
               <!-- Inject npmx logo & tagline during SVG and PNG print -->
               <g
                 v-if="svg.isPrintingSvg || svg.isPrintingImg"
-                v-html="drawNpmxLogoAndTaglineWatermark(svg, watermarkColors, $t, 'bottom')"
+                v-html="
+                  drawNpmxLogoAndTaglineWatermark({
+                    svg,
+                    colors: watermarkColors,
+                    translateFn: $t,
+                    positioning: 'bottom',
+                  })
+                "
               />
 
               <!-- Overlay covering the chart area to hide line resizing when switching granularities recalculates VueUiXy scaleMax when estimation lines are necessary -->
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index 670b47bdf2..56322e2133 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -9,7 +9,7 @@ import {
   drawNpmxLogoAndTaglineWatermark,
 } from '~/composables/useChartWatermark'
 import TooltipApp from '~/components/Tooltip/App.vue'
-import { copyAltTextForVersionsBarChart } from '~/utils/charts'
+import { copyAltTextForVersionsBarChart, sanitise, loadFile } from '~/utils/charts'
 
 import('vue-data-ui/style.css')
 
@@ -89,20 +89,6 @@ const compactNumberFormatter = useCompactNumberFormatter()
 // Show loading indicator immediately to maintain stable layout
 const showLoadingIndicator = computed(() => pending.value)
 
-const loadFile = (link: string, filename: string) => {
-  const a = document.createElement('a')
-  a.href = link
-  a.download = filename
-  a.click()
-  a.remove()
-}
-
-const sanitise = (value: string) =>
-  value
-    .replace(/^@/, '')
-    .replace(/[\\/:"*?<>|]/g, '-')
-    .replace(/\//g, '-')
-
 const { locale } = useI18n()
 function formatDate(date: Date) {
   return date.toLocaleString(locale.value, {
@@ -469,7 +455,14 @@ const chartConfig = computed<VueUiXyConfig>(() => {
               <!-- Inject npmx logo & tagline during SVG and PNG print -->
               <g
                 v-if="svg.isPrintingSvg || svg.isPrintingImg"
-                v-html="drawNpmxLogoAndTaglineWatermark(svg, watermarkColors, $t, 'bottom')"
+                v-html="
+                  drawNpmxLogoAndTaglineWatermark({
+                    svg,
+                    colors: watermarkColors,
+                    translateFn: $t,
+                    positioning: 'bottom',
+                  })
+                "
               />
 
               <!-- Overlay covering the chart area to hide line resizing when switching granularities recalculates VueUiXy scaleMax when estimation lines are necessary -->
diff --git a/app/composables/useChartWatermark.ts b/app/composables/useChartWatermark.ts
index 0cad48d641..48e6adf96c 100644
--- a/app/composables/useChartWatermark.ts
+++ b/app/composables/useChartWatermark.ts
@@ -47,15 +47,41 @@ export function drawSvgPrintLegend(svg: Record<string, any>, colors: WatermarkCo
   return seriesNames.join('')
 }
 
+function generateWatermarkLogo({
+  x,
+  y,
+  width,
+  height,
+  fill,
+}: {
+  x: number
+  y: number
+  width: number
+  height: number
+  fill: string
+}) {
+  return `
+    <svg x="${x}" y="${y}" width="${width}" height="${height}" viewBox="0 0 330 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M22.848 97V85.288H34.752V97H22.848ZM56.4105 107.56L85.5945 25H93.2745L64.0905 107.56H56.4105ZM121.269 97V46.12H128.661L128.949 59.08L127.989 58.216C128.629 55.208 129.781 52.744 131.445 50.824C133.173 48.84 135.221 47.368 137.589 46.408C139.957 45.448 142.453 44.968 145.077 44.968C148.981 44.968 152.213 45.832 154.773 47.56C157.397 49.288 159.381 51.624 160.725 54.568C162.069 57.448 162.741 60.68 162.741 64.264V97H154.677V66.568C154.677 61.832 153.749 58.248 151.893 55.816C150.037 53.32 147.189 52.072 143.349 52.072C140.725 52.072 138.357 52.648 136.245 53.8C134.133 54.888 132.437 56.52 131.157 58.696C129.941 60.808 129.333 63.432 129.333 66.568V97H121.269ZM173.647 111.4V46.12H181.135L181.327 57.64L180.175 57.064C181.455 53.096 183.568 50.088 186.512 48.04C189.519 45.992 192.976 44.968 196.88 44.968C201.936 44.968 206.064 46.216 209.264 48.712C212.528 51.208 214.928 54.472 216.464 58.504C218 62.536 218.767 66.888 218.767 71.56C218.767 76.232 218 80.584 216.464 84.616C214.928 88.648 212.528 91.912 209.264 94.408C206.064 96.904 201.936 98.152 196.88 98.152C194.256 98.152 191.792 97.704 189.487 96.808C187.247 95.912 185.327 94.664 183.727 93.064C182.191 91.464 181.135 89.576 180.559 87.4L181.711 86.056V111.4H173.647ZM196.111 90.472C200.528 90.472 203.984 88.808 206.48 85.48C209.04 82.152 210.319 77.512 210.319 71.56C210.319 65.608 209.04 60.968 206.48 57.64C203.984 54.312 200.528 52.648 196.111 52.648C193.167 52.648 190.607 53.352 188.431 54.76C186.319 56.168 184.655 58.28 183.439 61.096C182.287 63.912 181.711 67.4 181.711 71.56C181.711 75.72 182.287 79.208 183.439 82.024C184.591 84.84 186.255 86.952 188.431 88.36C190.607 89.768 193.167 90.472 196.111 90.472ZM222.57 97V46.12H229.962L230.25 57.448L229.29 57.256C229.866 53.48 231.082 50.504 232.938 48.328C234.858 46.088 237.29 44.968 240.234 44.968C243.242 44.968 245.546 46.056 247.146 48.232C248.81 50.408 249.834 53.608 250.218 57.832H249.258C249.834 53.864 251.114 50.728 253.098 48.424C255.146 46.12 257.706 44.968 260.778 44.968C264.874 44.968 267.85 46.376 269.706 49.192C271.562 52.008 272.49 56.68 272.49 63.208V97H264.426V64.36C264.426 59.816 263.946 56.648 262.986 54.856C262.026 53 260.522 52.072 258.474 52.072C257.13 52.072 255.946 52.52 254.922 53.416C253.898 54.248 253.066 55.592 252.426 57.448C251.85 59.304 251.562 61.672 251.562 64.552V97H243.498V64.36C243.498 60.008 243.018 56.872 242.058 54.952C241.162 53.032 239.658 52.072 237.546 52.072C236.202 52.072 235.018 52.52 233.994 53.416C232.97 54.248 232.138 55.592 231.498 57.448C230.922 59.304 230.634 61.672 230.634 64.552V97H222.57ZM276.676 97L295.396 70.888L277.636 46.12H287.044L300.388 65.32L313.444 46.12H323.044L305.38 71.08L323.908 97H314.5L300.388 76.456L286.276 97H276.676Z" fill="${fill}"/>
+    </svg>
+  `
+}
+
 /**
  * Build and return npmx svg logo and tagline, to be injected during PNG & SVG exports
+ * for VueUiXy instances
  */
-export function drawNpmxLogoAndTaglineWatermark(
-  svg: Record<string, any>,
-  colors: WatermarkColors,
-  translateFn: (key: string) => string,
-  positioning: 'bottom' | 'belowDrawingArea' = 'bottom',
-) {
+export function drawNpmxLogoAndTaglineWatermark({
+  svg,
+  colors,
+  translateFn,
+  positioning = 'bottom',
+}: {
+  svg: Record<string, any>
+  colors: WatermarkColors
+  translateFn: (key: string) => string
+  positioning?: 'bottom' | 'belowDrawingArea'
+}) {
   if (!svg?.drawingArea) return ''
   const npmxLogoWidthToHeight = 2.64
   const npmxLogoWidth = 100
@@ -74,9 +100,7 @@ export function drawNpmxLogoAndTaglineWatermark(
   const watermarkX = svg.width / 2 - npmxLogoWidth / 2
 
   return `
-    <svg x="${watermarkX}" y="${watermarkY}" width="${npmxLogoWidth}" height="${npmxLogoHeight}" viewBox="0 0 330 125" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M22.848 97V85.288H34.752V97H22.848ZM56.4105 107.56L85.5945 25H93.2745L64.0905 107.56H56.4105ZM121.269 97V46.12H128.661L128.949 59.08L127.989 58.216C128.629 55.208 129.781 52.744 131.445 50.824C133.173 48.84 135.221 47.368 137.589 46.408C139.957 45.448 142.453 44.968 145.077 44.968C148.981 44.968 152.213 45.832 154.773 47.56C157.397 49.288 159.381 51.624 160.725 54.568C162.069 57.448 162.741 60.68 162.741 64.264V97H154.677V66.568C154.677 61.832 153.749 58.248 151.893 55.816C150.037 53.32 147.189 52.072 143.349 52.072C140.725 52.072 138.357 52.648 136.245 53.8C134.133 54.888 132.437 56.52 131.157 58.696C129.941 60.808 129.333 63.432 129.333 66.568V97H121.269ZM173.647 111.4V46.12H181.135L181.327 57.64L180.175 57.064C181.455 53.096 183.568 50.088 186.512 48.04C189.519 45.992 192.976 44.968 196.88 44.968C201.936 44.968 206.064 46.216 209.264 48.712C212.528 51.208 214.928 54.472 216.464 58.504C218 62.536 218.767 66.888 218.767 71.56C218.767 76.232 218 80.584 216.464 84.616C214.928 88.648 212.528 91.912 209.264 94.408C206.064 96.904 201.936 98.152 196.88 98.152C194.256 98.152 191.792 97.704 189.487 96.808C187.247 95.912 185.327 94.664 183.727 93.064C182.191 91.464 181.135 89.576 180.559 87.4L181.711 86.056V111.4H173.647ZM196.111 90.472C200.528 90.472 203.984 88.808 206.48 85.48C209.04 82.152 210.319 77.512 210.319 71.56C210.319 65.608 209.04 60.968 206.48 57.64C203.984 54.312 200.528 52.648 196.111 52.648C193.167 52.648 190.607 53.352 188.431 54.76C186.319 56.168 184.655 58.28 183.439 61.096C182.287 63.912 181.711 67.4 181.711 71.56C181.711 75.72 182.287 79.208 183.439 82.024C184.591 84.84 186.255 86.952 188.431 88.36C190.607 89.768 193.167 90.472 196.111 90.472ZM222.57 97V46.12H229.962L230.25 57.448L229.29 57.256C229.866 53.48 231.082 50.504 232.938 48.328C234.858 46.088 237.29 44.968 240.234 44.968C243.242 44.968 245.546 46.056 247.146 48.232C248.81 50.408 249.834 53.608 250.218 57.832H249.258C249.834 53.864 251.114 50.728 253.098 48.424C255.146 46.12 257.706 44.968 260.778 44.968C264.874 44.968 267.85 46.376 269.706 49.192C271.562 52.008 272.49 56.68 272.49 63.208V97H264.426V64.36C264.426 59.816 263.946 56.648 262.986 54.856C262.026 53 260.522 52.072 258.474 52.072C257.13 52.072 255.946 52.52 254.922 53.416C253.898 54.248 253.066 55.592 252.426 57.448C251.85 59.304 251.562 61.672 251.562 64.552V97H243.498V64.36C243.498 60.008 243.018 56.872 242.058 54.952C241.162 53.032 239.658 52.072 237.546 52.072C236.202 52.072 235.018 52.52 233.994 53.416C232.97 54.248 232.138 55.592 231.498 57.448C230.922 59.304 230.634 61.672 230.634 64.552V97H222.57ZM276.676 97L295.396 70.888L277.636 46.12H287.044L300.388 65.32L313.444 46.12H323.044L305.38 71.08L323.908 97H314.5L300.388 76.456L286.276 97H276.676Z" fill="${colors.fg}"/>
-    </svg>
+    ${generateWatermarkLogo({ x: watermarkX, y: watermarkY, width: npmxLogoWidth, height: npmxLogoHeight, fill: colors.fg })}
     <text
       fill="${colors.fgSubtle}"
       x="${svg.width / 2}"
@@ -88,3 +112,40 @@ export function drawNpmxLogoAndTaglineWatermark(
     </text>
   `
 }
+
+/**
+ * Build and return npmx svg logo and tagline, to be injected during PNG & SVG exports
+ * for VueUiHorizontalBar instances
+ */
+export function drawSmallNpmxLogoAndTaglineWatermark({
+  svg,
+  colors,
+  translateFn,
+  logoWidth = 36,
+}: {
+  svg: Record<string, any>
+  colors: WatermarkColors
+  translateFn: (key: string) => string
+  logoWidth?: number
+}) {
+  if (!svg.height) return
+
+  const npmxLogoWidthToHeight = 2.64
+  const npmxLogoHeight = logoWidth / npmxLogoWidthToHeight
+  const offsetX = 6
+  const watermarkY = svg.height - npmxLogoHeight
+  const taglineY = svg.height - 3
+
+  return `
+    ${generateWatermarkLogo({ x: offsetX, y: watermarkY, width: logoWidth, height: npmxLogoHeight, fill: colors.fg })}
+    <text
+      fill="${colors.fgSubtle}"
+      x="${logoWidth + offsetX * 2}"
+      y="${taglineY}"
+      font-size="8"
+      text-anchor="start"
+    >
+      ${translateFn('tagline')}
+    </text>
+  `
+}
diff --git a/app/composables/useFacetSelection.ts b/app/composables/useFacetSelection.ts
index ecb014b605..9af7befd3d 100644
--- a/app/composables/useFacetSelection.ts
+++ b/app/composables/useFacetSelection.ts
@@ -13,6 +13,7 @@ export interface FacetInfoWithLabels extends Omit<FacetInfo, 'id'> {
   id: ComparisonFacet
   label: string
   description: string
+  chartable: boolean
 }
 
 /**
@@ -24,58 +25,71 @@ export function useFacetSelection(queryParam = 'facets') {
   const { t } = useI18n()
 
   const facetLabels = computed(
-    (): Record<ComparisonFacet, { label: string; description: string }> => ({
+    (): Record<ComparisonFacet, { label: string; description: string; chartable: boolean }> => ({
       downloads: {
         label: t(`compare.facets.items.downloads.label`),
         description: t(`compare.facets.items.downloads.description`),
+        chartable: true,
       },
       totalLikes: {
         label: t(`compare.facets.items.totalLikes.label`),
         description: t(`compare.facets.items.totalLikes.description`),
+        chartable: true,
       },
       packageSize: {
         label: t(`compare.facets.items.packageSize.label`),
         description: t(`compare.facets.items.packageSize.description`),
+        chartable: true,
       },
       installSize: {
         label: t(`compare.facets.items.installSize.label`),
         description: t(`compare.facets.items.installSize.description`),
+        chartable: true,
       },
       moduleFormat: {
         label: t(`compare.facets.items.moduleFormat.label`),
         description: t(`compare.facets.items.moduleFormat.description`),
+        chartable: false,
       },
       types: {
         label: t(`compare.facets.items.types.label`),
         description: t(`compare.facets.items.types.description`),
+        chartable: false,
       },
       engines: {
         label: t(`compare.facets.items.engines.label`),
         description: t(`compare.facets.items.engines.description`),
+        chartable: false,
       },
       vulnerabilities: {
         label: t(`compare.facets.items.vulnerabilities.label`),
         description: t(`compare.facets.items.vulnerabilities.description`),
+        chartable: false,
       },
       lastUpdated: {
         label: t(`compare.facets.items.lastUpdated.label`),
         description: t(`compare.facets.items.lastUpdated.description`),
+        chartable: false,
       },
       license: {
         label: t(`compare.facets.items.license.label`),
         description: t(`compare.facets.items.license.description`),
+        chartable: false,
       },
       dependencies: {
         label: t(`compare.facets.items.dependencies.label`),
         description: t(`compare.facets.items.dependencies.description`),
+        chartable: true,
       },
       totalDependencies: {
         label: t(`compare.facets.items.totalDependencies.label`),
         description: t(`compare.facets.items.totalDependencies.description`),
+        chartable: true,
       },
       deprecated: {
         label: t(`compare.facets.items.deprecated.label`),
         description: t(`compare.facets.items.deprecated.description`),
+        chartable: false,
       },
     }),
   )
@@ -87,6 +101,7 @@ export function useFacetSelection(queryParam = 'facets') {
       ...FACET_INFO[facet],
       label: facetLabels.value[facet].label,
       description: facetLabels.value[facet].description,
+      chartable: facetLabels.value[facet].chartable,
     }
   }
 
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index e8b33ea429..e38a34657d 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
 import { useRouteQuery } from '@vueuse/router'
+import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
 
 definePageMeta({
   name: 'compare',
@@ -76,6 +77,8 @@ const columnLoading = computed(() => packages.value.map((_, i) => isColumnLoadin
 // Check if we have enough packages to compare
 const canCompare = computed(() => packages.value.length >= 2)
 
+const comparisonView = ref<'table' | 'charts'>('table')
+
 // Extract headers from columns for facet rows
 const gridHeaders = computed(() =>
   gridColumns.value.map(col => (col.version ? `${col.name}@${col.version}` : col.name)),
@@ -278,10 +281,74 @@ useSeoMeta({
         </div>
 
         <div v-else-if="packagesData && packagesData.some(p => p !== null)">
-          <!-- Desktop: Grid layout -->
-          <div class="hidden md:block overflow-x-auto">
-            <CompareComparisonGrid :columns="gridColumns" :show-no-dependency="showNoDependency">
-              <CompareFacetRow
+          <!-- View tabs -->
+          <div
+            v-if="selectedFacets.some(facet => facet.chartable)"
+            class="inline-flex items-center gap-1 rounded-md border border-border-subtle bg-bg-subtle p-0.5 mt-4"
+            role="tablist"
+            :aria-label="$t('compare.packages.section_comparison')"
+          >
+            <button
+              id="comparison-tab-table"
+              type="button"
+              role="tab"
+              :aria-selected="comparisonView === 'table' ? 'true' : 'false'"
+              aria-controls="comparison-panel-table"
+              :tabindex="comparisonView === 'table' ? -1 : 0"
+              class="flex items-center justify-center gap-x-2 rounded px-3 py-2 font-mono text-sm border border-solid transition-colors duration-150 focus-visible:outline-accent/70"
+              :class="
+                comparisonView === 'table'
+                  ? 'bg-bg border-border shadow-sm text-fg'
+                  : 'border-transparent text-fg-subtle hover:text-fg'
+              "
+              @click="comparisonView = 'table'"
+            >
+              <span class="i-lucide:table size-[1em]" aria-hidden="true" />
+              <span>{{ $t('compare.packages.table_view') }}</span>
+            </button>
+
+            <button
+              id="comparison-tab-charts"
+              type="button"
+              role="tab"
+              :aria-selected="comparisonView === 'charts' ? 'true' : 'false'"
+              aria-controls="comparison-panel-charts"
+              :tabindex="comparisonView === 'charts' ? -1 : 0"
+              class="flex items-center justify-center gap-x-2 rounded px-3 py-2 font-mono text-sm border border-solid transition-colors duration-150 focus-visible:outline-accent/70"
+              :class="
+                comparisonView === 'charts'
+                  ? 'bg-bg border-border shadow-sm text-fg'
+                  : 'border-transparent text-fg-subtle hover:text-fg'
+              "
+              @click="comparisonView = 'charts'"
+            >
+              <span class="i-lucide:chart-bar-decreasing size-[1em]" aria-hidden="true" />
+              <span>{{ $t('compare.packages.charts_view') }}</span>
+            </button>
+          </div>
+
+          <!-- Data table -->
+          <div v-show="comparisonView === 'table'" role="tabpanel">
+            <!-- Desktop: Grid layout -->
+            <div class="hidden md:block overflow-x-auto">
+              <CompareComparisonGrid :columns="gridColumns" :show-no-dependency="showNoDependency">
+                <CompareFacetRow
+                  v-for="facet in selectedFacets"
+                  :key="facet.id"
+                  :label="facet.label"
+                  :description="facet.description"
+                  :values="getFacetValues(facet.id)"
+                  :facet-loading="isFacetLoading(facet.id)"
+                  :column-loading="columnLoading"
+                  :bar="facet.id !== 'lastUpdated'"
+                  :headers="gridHeaders"
+                />
+              </CompareComparisonGrid>
+            </div>
+
+            <!-- Mobile: Card-based layout -->
+            <div class="md:hidden space-y-3">
+              <CompareFacetCard
                 v-for="facet in selectedFacets"
                 :key="facet.id"
                 :label="facet.label"
@@ -292,22 +359,26 @@ useSeoMeta({
                 :bar="facet.id !== 'lastUpdated'"
                 :headers="gridHeaders"
               />
-            </CompareComparisonGrid>
+            </div>
           </div>
 
-          <!-- Mobile: Card-based layout -->
-          <div class="md:hidden space-y-3">
-            <CompareFacetCard
-              v-for="facet in selectedFacets"
-              :key="facet.id"
-              :label="facet.label"
-              :description="facet.description"
-              :values="getFacetValues(facet.id)"
-              :facet-loading="isFacetLoading(facet.id)"
-              :column-loading="columnLoading"
-              :bar="facet.id !== 'lastUpdated'"
-              :headers="gridHeaders"
-            />
+          <!-- bar charts -->
+          <div v-if="comparisonView === 'charts'" role="tabpanel">
+            <div class="sm:grid grid-cols-2 gap-x-4">
+              <div
+                v-for="facet in selectedFacets.filter(facet => facet.chartable)"
+                :key="facet.id"
+                class="my-6"
+              >
+                <FacetBarChart
+                  :values="getFacetValues(facet.id)"
+                  :packages="packages.filter(p => p !== NO_DEPENDENCY_ID)"
+                  :label="facet.label"
+                  :description="facet.description"
+                  :facet-loading="isFacetLoading(facet.id)"
+                />
+              </div>
+            </div>
           </div>
 
           <h2
diff --git a/app/utils/charts.ts b/app/utils/charts.ts
index bb253632d5..b3dc1e6f16 100644
--- a/app/utils/charts.ts
+++ b/app/utils/charts.ts
@@ -1,5 +1,7 @@
 import type {
   AltCopyArgs,
+  VueUiHorizontalBarConfig,
+  VueUiHorizontalBarDatapoint,
   VueUiXyConfig,
   VueUiXyDatasetBarItem,
   VueUiXyDatasetLineItem,
@@ -446,6 +448,13 @@ export type VersionsBarConfig = Omit<
   'formattedDates' | 'hasEstimation' | 'formattedDatasetValues' | 'granularity'
 > & { datapointLabels: string[]; dateRangeLabel: string; semverGroupingMode: string }
 
+export type FacetBarChartConfig = VueUiHorizontalBarConfig & {
+  facet: string // translated
+  description: string // translated
+  copy: (text: string) => Promise<void>
+  $t: TrendTranslateFunction
+}
+
 // Used for TrendsChart.vue
 export function createAltTextForTrendLineChart({
   dataset,
@@ -595,3 +604,125 @@ export async function copyAltTextForVersionsBarChart({
   const altText = createAltTextForVersionsBarChart({ dataset, config })
   await config.copy(altText)
 }
+
+// Used for FacetBarChart.vue
+export function createAltTextForCompareFacetBarChart({
+  dataset,
+  config,
+}: AltCopyArgs<VueUiHorizontalBarDatapoint[], FacetBarChartConfig>) {
+  if (!dataset) return ''
+  const { facet, description, $t } = config
+
+  const packages = dataset.map(d => d.name).join(', ')
+  const facet_analysis = dataset
+    .map(d =>
+      $t('package.trends.copy_alt.facet_bar_analysis', {
+        package_name: d.name,
+        value: d.formattedValue,
+      }),
+    )
+    .join(' ')
+
+  const altText = `${config.$t('package.trends.copy_alt.facet_bar_general_description', {
+    packages,
+    facet,
+    description,
+    facet_analysis,
+    watermark: config.$t('package.trends.copy_alt.watermark'),
+  })}`
+
+  return altText
+}
+
+export async function copyAltTextForCompareFacetBarChart({
+  dataset,
+  config,
+}: AltCopyArgs<VueUiHorizontalBarDatapoint[], FacetBarChartConfig>) {
+  const altText = createAltTextForCompareFacetBarChart({ dataset, config })
+  await config.copy(altText)
+}
+
+// Used in chart context menu callbacks
+export function loadFile(link: string, filename: string) {
+  const a = document.createElement('a')
+  a.href = link
+  a.download = filename
+  a.click()
+  a.remove()
+}
+
+export function sanitise(value: string) {
+  return value
+    .replace(/^@/, '')
+    .replace(/[\\/:"*?<>|]/g, '-')
+    .replace(/\//g, '-')
+}
+
+// Create multi-line labels for long names
+export function insertLineBreaks(text: string, maxCharactersPerLine = 24) {
+  if (typeof text !== 'string') {
+    return ''
+  }
+
+  if (!Number.isInteger(maxCharactersPerLine) || maxCharactersPerLine <= 0) {
+    return text
+  }
+
+  const tokens = text.match(/\S+|\s+/g) || []
+  const lines: string[] = []
+  let currentLine = ''
+
+  const pushLine = () => {
+    const trimmedLine = currentLine.trim()
+
+    if (trimmedLine.length) {
+      lines.push(trimmedLine)
+    }
+
+    currentLine = ''
+  }
+
+  for (const token of tokens) {
+    if (/^\s+$/.test(token)) {
+      if (currentLine.length && !currentLine.endsWith(' ')) {
+        currentLine += ' '
+      }
+      continue
+    }
+
+    if (token.length > maxCharactersPerLine) {
+      pushLine()
+
+      for (let index = 0; index < token.length; index += maxCharactersPerLine) {
+        lines.push(token.slice(index, index + maxCharactersPerLine))
+      }
+      continue
+    }
+
+    const candidate = currentLine.length ? `${currentLine}${token}` : token
+
+    if (candidate.length <= maxCharactersPerLine) {
+      currentLine = candidate
+    } else {
+      pushLine()
+      currentLine = token
+    }
+  }
+
+  pushLine()
+
+  return lines.join('\n')
+}
+
+export function applyEllipsis(text: string, maxLength = 45) {
+  if (typeof text !== 'string') {
+    return ''
+  }
+  if (!Number.isInteger(maxLength) || maxLength <= 0) {
+    return text
+  }
+  if (text.length <= maxLength) {
+    return text
+  }
+  return text.slice(0, maxLength) + '...'
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 5bc57ea17e..506382973e 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -477,7 +477,9 @@
         "estimations": "The final values are estimates based on partial data for the current period.",
         "compare": "Package download comparison line chart for: {packages}.",
         "single_package": "Downloads line chart for the {package} package.",
-        "general_description": "The Y axis represents the number of downloads. The X axis represents the date range, from {start_date} to {end_date}, with a {granularity} time period.{estimation_notice} {packages_analysis}. {watermark}."
+        "general_description": "The Y axis represents the number of downloads. The X axis represents the date range, from {start_date} to {end_date}, with a {granularity} time period.{estimation_notice} {packages_analysis}. {watermark}.",
+        "facet_bar_general_description": "Horizontal bar chart for: {packages}, comparing {facet} ({description}). {facet_analysis} {watermark}.",
+        "facet_bar_analysis": "{package_name} has a value of {value}."
       }
     },
     "downloads": {
@@ -1036,7 +1038,9 @@
       "loading": "Loading package data...",
       "error": "Failed to load package data. Please try again.",
       "empty_title": "Select packages to compare",
-      "empty_description": "Search and add at least 2 packages above to see a side-by-side comparison of their metrics."
+      "empty_description": "Search and add at least 2 packages above to see a side-by-side comparison of their metrics.",
+      "table_view": "Table",
+      "charts_view": "Charts"
     },
     "selector": {
       "search_label": "Search for packages",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index bbe2af2f00..b975a5008d 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -477,7 +477,9 @@
         "estimations": "Les valeurs finales sont des estimations basées sur des données partielles pour la période en cours.",
         "compare": "Graphique en courbes comparant les téléchargements des paquets suivants : {packages}.",
         "single_package": "Graphique en courbes des téléchargements pour le paquet {package}.",
-        "general_description": "L’axe Y représente le nombre de téléchargements. L’axe X représente la plage de dates, de {start_date} à {end_date}, avec une période de temps {granularity}.{estimation_notice} {packages_analysis}. {watermark}."
+        "general_description": "L’axe Y représente le nombre de téléchargements. L’axe X représente la plage de dates, de {start_date} à {end_date}, avec une période de temps {granularity}.{estimation_notice} {packages_analysis}. {watermark}.",
+        "facet_bar_general_description": "Graphique en barres horizontales pour : {packages}, comparant {facet} ({description}). {facet_analysis} {watermark}.",
+        "facet_bar_analysis": "{package_name} a une valeur de {value}."
       }
     },
     "downloads": {
diff --git a/i18n/schema.json b/i18n/schema.json
index 4ed08a60b2..b4b3259cd5 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1437,6 +1437,12 @@
                 },
                 "general_description": {
                   "type": "string"
+                },
+                "facet_bar_general_description": {
+                  "type": "string"
+                },
+                "facet_bar_analysis": {
+                  "type": "string"
                 }
               },
               "additionalProperties": false
@@ -3114,6 +3120,12 @@
             },
             "empty_description": {
               "type": "string"
+            },
+            "table_view": {
+              "type": "string"
+            },
+            "charts_view": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/package.json b/package.json
index 7dac498e04..4d741eaaab 100644
--- a/package.json
+++ b/package.json
@@ -119,7 +119,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.0.0-g52709db6.20260226-1136",
     "vue": "3.5.29",
-    "vue-data-ui": "3.15.10"
+    "vue-data-ui": "3.15.11"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a8e32816f2..d858a07a5e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -236,8 +236,8 @@ importers:
         specifier: 3.5.29
         version: 3.5.29(typescript@5.9.3)
       vue-data-ui:
-        specifier: 3.15.10
-        version: 3.15.10(vue@3.5.29(typescript@5.9.3))
+        specifier: 3.15.11
+        version: 3.15.11(vue@3.5.29(typescript@5.9.3))
     devDependencies:
       '@e18e/eslint-plugin':
         specifier: 0.2.0
@@ -10664,8 +10664,8 @@ packages:
   vue-component-type-helpers@3.2.5:
     resolution: {integrity: sha512-tkvNr+bU8+xD/onAThIe7CHFvOJ/BO6XCOrxMzeytJq40nTfpGDJuVjyCM8ccGZKfAbGk2YfuZyDMXM56qheZQ==}
 
-  vue-data-ui@3.15.10:
-    resolution: {integrity: sha512-ssrh4imaeYF/0EzBsXi20APAHIy5+FJwazXLXwZ4KqHkYvzGqRmkM+aByBFAxHFKEYkrlvX39U3iEfKe5fVBSQ==}
+  vue-data-ui@3.15.11:
+    resolution: {integrity: sha512-yHadAo43hr5yg1HkZlhwBx1cKBB8wgq3BZVbaE/Ei54o67a4ILw3xBC5aoJoxiEf6wqxWQBVh6O4sxlRs3b/VQ==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -23502,7 +23502,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.5: {}
 
-  vue-data-ui@3.15.10(vue@3.5.29(typescript@5.9.3)):
+  vue-data-ui@3.15.11(vue@3.5.29(typescript@5.9.3)):
     dependencies:
       vue: 3.5.29(typescript@5.9.3)
 
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 2a5c18c742..3f2115b799 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -226,6 +226,7 @@ import HeaderAccountMenuServer from '~/components/Header/AccountMenu.server.vue'
 import ToggleServer from '~/components/Settings/Toggle.server.vue'
 import SearchProviderToggleServer from '~/components/SearchProviderToggle.server.vue'
 import PackageTrendsChart from '~/components/Package/TrendsChart.vue'
+import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
 import PackageLikeCard from '~/components/Package/LikeCard.vue'
 import SizeIncrease from '~/components/Package/SizeIncrease.vue'
 
@@ -786,6 +787,24 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
 
+    describe('FacetBarChart', () => {
+      it('should have no accessibility violations', async () => {
+        const wrapper = await mountSuspended(FacetBarChart, {
+          props: {
+            values: [
+              { raw: 100, display: '100 MB' },
+              { raw: 50, display: '50 MB' },
+            ],
+            packages: ['nuxt', 'vue'],
+            label: 'Package Size',
+            description: 'Size of the package itself (unpacked)',
+          },
+        })
+        const results = await runAxe(wrapper)
+        expect(results.violations).toEqual([])
+      })
+    })
+
     it('should have no accessibility violations with empty data', async () => {
       const wrapper = await mountSuspended(PackageTrendsChart, {
         props: {
diff --git a/test/unit/app/utils/charts.spec.ts b/test/unit/app/utils/charts.spec.ts
index 5fc7fba108..b57028abd5 100644
--- a/test/unit/app/utils/charts.spec.ts
+++ b/test/unit/app/utils/charts.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 import {
   sum,
   chunkIntoWeeks,
@@ -12,6 +12,10 @@ import {
   copyAltTextForTrendLineChart,
   createAltTextForVersionsBarChart,
   copyAltTextForVersionsBarChart,
+  loadFile,
+  sanitise,
+  insertLineBreaks,
+  applyEllipsis,
   type TrendLineConfig,
   type TrendLineDataset,
   type VersionsBarConfig,
@@ -1236,3 +1240,216 @@ describe('copyAltTextForVersionsBarChart', () => {
     expect(copyMock).toHaveBeenCalledWith(expected)
   })
 })
+
+describe('loadFile', () => {
+  let createElementMock: ReturnType<typeof vi.fn>
+  let clickMock: ReturnType<typeof vi.fn>
+  let removeMock: ReturnType<typeof vi.fn>
+  let originalDocument: typeof globalThis.document | undefined
+
+  beforeEach(() => {
+    clickMock = vi.fn()
+    removeMock = vi.fn()
+
+    createElementMock = vi.fn().mockReturnValue({
+      href: '',
+      download: '',
+      click: clickMock,
+      remove: removeMock,
+    })
+
+    originalDocument = globalThis.document
+
+    Object.defineProperty(globalThis, 'document', {
+      value: {
+        createElement: createElementMock,
+      },
+      configurable: true,
+      writable: true,
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+
+    Object.defineProperty(globalThis, 'document', {
+      value: originalDocument,
+      configurable: true,
+      writable: true,
+    })
+  })
+
+  it('creates an anchor element and triggers a download', () => {
+    const link = 'https://npmx.dev/file.png'
+    const filename = 'file.png'
+    loadFile(link, filename)
+    expect(createElementMock).toHaveBeenCalledWith('a')
+    const anchor = createElementMock.mock.results[0]?.value as HTMLAnchorElement
+    expect(anchor.href).toBe(link)
+    expect(anchor.download).toBe(filename)
+    expect(clickMock).toHaveBeenCalledTimes(1)
+    expect(removeMock).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('sanitise', () => {
+  it('returns the same string when no sanitisation is needed', () => {
+    expect(sanitise('nuxt-package')).toBe('nuxt-package')
+  })
+
+  it('removes a leading @ character', () => {
+    expect(sanitise('@nuxt/ui')).toBe('nuxt-ui')
+  })
+
+  it('removes only the first leading @ character', () => {
+    expect(sanitise('@@scope/package')).toBe('@scope-package')
+  })
+
+  it('replaces forward slashes with dashes', () => {
+    expect(sanitise('scope/package/name')).toBe('scope-package-name')
+  })
+
+  it('replaces backslashes with dashes', () => {
+    expect(sanitise('scope\\package\\name')).toBe('scope-package-name')
+  })
+
+  it('replaces colon characters with dashes', () => {
+    expect(sanitise('name:with:colons')).toBe('name-with-colons')
+  })
+
+  it('replaces invalid filename characters with dashes', () => {
+    expect(sanitise('na<me>:"with"*?pipes|')).toBe('na-me---with---pipes-')
+  })
+
+  it('handles scoped package names correctly', () => {
+    expect(sanitise('@scope/package')).toBe('scope-package')
+  })
+
+  it('replaces mixed invalid characters in a single string', () => {
+    expect(sanitise('@scope/package:name*test?value<foo>|bar')).toBe(
+      'scope-package-name-test-value-foo--bar',
+    )
+  })
+
+  it('returns an empty string when given an empty string', () => {
+    expect(sanitise('')).toBe('')
+  })
+})
+
+describe('insertLineBreaks', () => {
+  it('returns an empty string when text is not a string', () => {
+    expect(insertLineBreaks(null as unknown as string)).toBe('')
+    expect(insertLineBreaks(undefined as unknown as string)).toBe('')
+    expect(insertLineBreaks(42 as unknown as string)).toBe('')
+    expect(insertLineBreaks({} as unknown as string)).toBe('')
+  })
+
+  it('returns the original text when maxCharactersPerLine is not a positive integer', () => {
+    expect(insertLineBreaks('hello world', 0)).toBe('hello world')
+    expect(insertLineBreaks('hello world', -1)).toBe('hello world')
+    expect(insertLineBreaks('hello world', 2.5)).toBe('hello world')
+    expect(insertLineBreaks('hello world', Number.NaN)).toBe('hello world')
+  })
+
+  it('returns the same text when it already fits on one line', () => {
+    expect(insertLineBreaks('hello world', 24)).toBe('hello world')
+  })
+
+  it('breaks text into multiple lines on word boundaries', () => {
+    expect(insertLineBreaks('hello world again', 11)).toBe('hello world\nagain')
+  })
+
+  it('preserves a single space between words when collapsing whitespace', () => {
+    expect(insertLineBreaks('hello     world', 24)).toBe('hello world')
+  })
+
+  it('ignores leading and trailing whitespace', () => {
+    expect(insertLineBreaks('   hello world   ', 24)).toBe('hello world')
+  })
+
+  it('handles tabs and newlines as whitespace separators', () => {
+    expect(insertLineBreaks('hello\tworld\nagain', 11)).toBe('hello world\nagain')
+  })
+
+  it('starts a new line when adding a word would exceed the limit', () => {
+    expect(insertLineBreaks('one two three', 7)).toBe('one two\nthree')
+  })
+
+  it('keeps a word on the current line when it exactly matches the limit', () => {
+    expect(insertLineBreaks('abc def', 7)).toBe('abc def')
+  })
+
+  it('splits a long token into chunks when it exceeds the limit', () => {
+    expect(insertLineBreaks('abcdefghijkl', 5)).toBe('abcde\nfghij\nkl')
+  })
+
+  it('pushes the current line before splitting a long token', () => {
+    expect(insertLineBreaks('hello abcdefghij', 5)).toBe('hello\nabcde\nfghij')
+  })
+
+  it('continues building lines after a split long token', () => {
+    expect(insertLineBreaks('abcdefghij klm nop', 5)).toBe('abcde\nfghij\nklm\nnop')
+  })
+
+  it('handles multiple consecutive long tokens', () => {
+    expect(insertLineBreaks('abcdefghijk lmnopqrs', 4)).toBe('abcd\nefgh\nijk\nlmno\npqrs')
+  })
+
+  it('returns an empty string for an empty input string', () => {
+    expect(insertLineBreaks('', 24)).toBe('')
+  })
+
+  it('returns an empty string for a whitespace-only string', () => {
+    expect(insertLineBreaks('     ', 24)).toBe('')
+    expect(insertLineBreaks('\n\t  ', 24)).toBe('')
+  })
+
+  it('uses the default maxCharactersPerLine value when omitted', () => {
+    expect(insertLineBreaks('one two three four five six')).toBe('one two three four five\nsix')
+  })
+})
+
+describe('applyEllipsis', () => {
+  it('returns an empty string when text is not a string', () => {
+    expect(applyEllipsis(null as unknown as string)).toBe('')
+    expect(applyEllipsis(undefined as unknown as string)).toBe('')
+    expect(applyEllipsis(42 as unknown as string)).toBe('')
+    expect(applyEllipsis({} as unknown as string)).toBe('')
+  })
+
+  it('returns the original text when maxLength is not a positive integer', () => {
+    expect(applyEllipsis('touching grass', 0)).toBe('touching grass')
+    expect(applyEllipsis('touching grass', -1)).toBe('touching grass')
+    expect(applyEllipsis('touching grass', 2.5)).toBe('touching grass')
+    expect(applyEllipsis('touching grass', Number.NaN)).toBe('touching grass')
+  })
+
+  it('returns the original text when its length is less than maxLength', () => {
+    expect(applyEllipsis('grass', 10)).toBe('grass')
+  })
+
+  it('returns the original text when its length is equal to maxLength', () => {
+    expect(applyEllipsis('grass', 5)).toBe('grass')
+  })
+
+  it('truncates the text and appends an ellipsis when its length exceeds maxLength', () => {
+    expect(applyEllipsis('grass touching', 5)).toBe('grass...')
+  })
+
+  it('uses the default maxLength when omitted', () => {
+    const text = 'n'.repeat(46)
+    expect(applyEllipsis(text)).toBe(`${'n'.repeat(45)}...`)
+  })
+
+  it('returns an empty string for an empty input string', () => {
+    expect(applyEllipsis('')).toBe('')
+  })
+
+  it('handles maxLength equal to 1', () => {
+    expect(applyEllipsis('grass', 1)).toBe('g...')
+  })
+
+  it('preserves whitespace within the truncated portion', () => {
+    expect(applyEllipsis('you need to touch grass', 13)).toBe('you need to t...')
+  })
+})