From 165172de96c3777d112299e7d2166de1f48d575b Mon Sep 17 00:00:00 2001
From: BlankParticle <blankparticle@gmail.com>
Date: Tue, 4 Aug 2026 13:43:23 +0530
Subject: [PATCH 1/4] feat: add copy PNG buttons to charts

- Copy chart PNG exports directly to the clipboard
- Preserve chart watermarks during clipboard export
---
 app/components/Chart/CopyPngButton.vue        | 23 ++++++++++
 app/components/Compare/FacetBarChart.vue      | 11 ++++-
 app/components/Compare/FacetScatterChart.vue  | 10 ++++-
 app/components/Package/TimelineChart.vue      | 10 +++++
 .../Package/TimelineChartDepSizeSvgSlot.vue   |  5 ++-
 .../Package/TimelineChartXySvgSlot.vue        |  3 +-
 app/components/Package/TrendsChart.vue        |  7 +++-
 .../Package/VersionDistribution.vue           | 15 ++++++-
 app/composables/useCopyChartPng.ts            | 42 +++++++++++++++++++
 i18n/locales/en.json                          |  1 +
 i18n/schema.json                              |  3 ++
 11 files changed, 120 insertions(+), 10 deletions(-)
 create mode 100644 app/components/Chart/CopyPngButton.vue
 create mode 100644 app/composables/useCopyChartPng.ts

diff --git a/app/components/Chart/CopyPngButton.vue b/app/components/Chart/CopyPngButton.vue
new file mode 100644
index 0000000000..c16747c28b
--- /dev/null
+++ b/app/components/Chart/CopyPngButton.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// Custom entry for a vue-data-ui user options menu (via the #custom-menu-before
+// slot): copies the chart's PNG export to the clipboard. See useCopyChartPng.
+defineProps<{
+  copied: boolean
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="vue-ui-user-options-button cursor-pointer"
+    :title="$t('package.trends.copy_file', { fileType: 'PNG' })"
+    :aria-label="$t('package.trends.copy_file', { fileType: 'PNG' })"
+  >
+    <span
+      class="w-6 h-6"
+      :class="copied ? 'i-lucide:check text-accent' : 'i-lucide:copy text-fg-subtle'"
+      style="pointer-events: none"
+      aria-hidden="true"
+    />
+  </button>
+</template>
diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index 181786f1f0..3e45c64fec 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -11,6 +11,7 @@ import { createPatternDef } from 'vue-data-ui/utils'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
 import { useColors } from '~/composables/useColors'
 import { downloadFileLink } from '~/utils/download'
+import { useCopyChartPng } from '~/composables/useCopyChartPng'
 
 import {
   insertLineBreaks,
@@ -35,6 +36,8 @@ const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 const { width } = useElementSize(rootEl)
 const { copy, copied } = useClipboard()
+const chartRef = useTemplateRef('chartRef')
+const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
 
 const mobileBreakpointWidth = 640
 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
@@ -271,7 +274,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
 <template>
   <div class="font-mono facet-bar">
     <ClientOnly v-if="packages.length">
-      <VueUiHorizontalBar :key="chartKey" :dataset :config class="[direction:ltr]">
+      <VueUiHorizontalBar ref="chartRef" :key="chartKey" :dataset :config class="[direction:ltr]">
         <template #hint="{ isVisible }">
           <p v-if="isVisible" class="text-accent text-xs pt-2" aria-hidden="true">
             {{ $t('compare.packages.bar_chart_nav_hint') }}
@@ -293,7 +296,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
 
         <template #svg="{ svg }">
           <g
-            v-if="svg.isPrintingSvg || svg.isPrintingImg"
+            v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
             v-html="
               drawSmallNpmxLogoAndTaglineWatermark({
                 svg,
@@ -313,6 +316,10 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
           <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
         </template>
 
+        <template #custom-menu-before>
+          <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+        </template>
+
         <template #optionImg>
           <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
         </template>
diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 69744bc41b..5029e9d2c3 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -11,6 +11,7 @@ import { buildCompareScatterChartDataset } from '~/utils/compare-scatter-chart'
 import { copyAltTextForCompareScatterChart } from '~/utils/charts'
 import { useColors } from '~/composables/useColors'
 import { downloadFileLink } from '~/utils/download'
+import { useCopyChartPng } from '~/composables/useCopyChartPng'
 
 import('vue-data-ui/style.css')
 
@@ -24,6 +25,8 @@ const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 const { width } = useElementSize(rootEl)
 const { copy, copied } = useClipboard()
+const chartRef = useTemplateRef('chartRef')
+const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
 
 const mobileBreakpointWidth = 640
 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
@@ -350,7 +353,7 @@ onMounted(async () => {
 
       <ClientOnly>
         <div class="w-full sm:max-w-[450px] order-2 sm:order-1">
-          <VueUiScatter :dataset :config :key="step">
+          <VueUiScatter ref="chartRef" :dataset :config :key="step">
             <!-- Keyboard navigation hint -->
             <template #hint="{ isVisible }">
               <p
@@ -411,7 +414,7 @@ onMounted(async () => {
             <template #svg="{ svg }">
               <!-- Watermark -->
               <g
-                v-if="svg.isPrintingSvg || svg.isPrintingImg"
+                v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
                 v-html="
                   drawSmallNpmxLogoAndTaglineWatermark({
                     svg,
@@ -455,6 +458,9 @@ onMounted(async () => {
               <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 #custom-menu-before>
+              <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+            </template>
             <template #optionImg>
               <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
             </template>
diff --git a/app/components/Package/TimelineChart.vue b/app/components/Package/TimelineChart.vue
index 5e8fccd573..d1ffee0e64 100644
--- a/app/components/Package/TimelineChart.vue
+++ b/app/components/Package/TimelineChart.vue
@@ -35,6 +35,7 @@ import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWate
 import { useColors } from '~/composables/useColors'
 import { parseStableVersion } from '~/utils/versions'
 import { downloadFileLink } from '~/utils/download'
+import { useCopyChartPng } from '~/composables/useCopyChartPng'
 import { useElementSize, useTimeoutFn } from '@vueuse/core'
 import TimelineChartDepSizeTooltip from './TimelineChartDepSizeTooltip.vue'
 import TimelineChartXyTooltip from './TimelineChartXyTooltip.vue'
@@ -355,6 +356,7 @@ const datasets = computed<{
 })
 
 const { copy, copied } = useClipboard()
+const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
 
 const colorMode = useColorMode()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
@@ -986,6 +988,7 @@ const timelineMetricTabs = computed(() => [
             :colors
             :gradientColors="E18E_GRADIENT_COLORS"
             :pauseAnimations="shouldPauseChartAnimations || loading"
+            :isCopyingPng
           />
         </template>
 
@@ -996,6 +999,9 @@ const timelineMetricTabs = computed(() => [
         <template #optionCsv>
           <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
         </template>
+        <template #custom-menu-before>
+          <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+        </template>
         <template #optionImg>
           <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
         </template>
@@ -1081,6 +1087,7 @@ const timelineMetricTabs = computed(() => [
             :activeVersionPlot="getActiveVersionDatapointBar(svg.data, svg.barWidth)"
             :colors
             :pauseAnimations="shouldPauseChartAnimations || loading"
+            :isCopyingPng
           />
         </template>
 
@@ -1101,6 +1108,9 @@ const timelineMetricTabs = computed(() => [
         <template #optionCsv>
           <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
         </template>
+        <template #custom-menu-before>
+          <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+        </template>
         <template #optionImg>
           <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
         </template>
diff --git a/app/components/Package/TimelineChartDepSizeSvgSlot.vue b/app/components/Package/TimelineChartDepSizeSvgSlot.vue
index 5a65f953a1..f1ff962682 100644
--- a/app/components/Package/TimelineChartDepSizeSvgSlot.vue
+++ b/app/components/Package/TimelineChartDepSizeSvgSlot.vue
@@ -1,18 +1,19 @@
 <script setup lang="ts">
 import type { VueUiStackbarSvgSlotProps } from 'vue-data-ui/vue-ui-stackbar'
 
-const props = defineProps<{
+defineProps<{
   svg: VueUiStackbarSvgSlotProps['svg']
   watermark?: string
   activeVersionPlot: Partial<TimelinePlotItem> | null
   colors: Record<string, string>
   pauseAnimations: boolean
+  isCopyingPng?: boolean
 }>()
 </script>
 
 <template>
   <!-- Print watermark-->
-  <g v-if="svg.isPrintingSvg || svg.isPrintingImg" v-html="watermark" />
+  <g v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng" v-html="watermark" />
 
   <g class="pointer-events-none">
     <!-- Marker for selected version -->
diff --git a/app/components/Package/TimelineChartXySvgSlot.vue b/app/components/Package/TimelineChartXySvgSlot.vue
index 8db1638a1b..ec38d6badd 100644
--- a/app/components/Package/TimelineChartXySvgSlot.vue
+++ b/app/components/Package/TimelineChartXySvgSlot.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
   colors: Record<string, string>
   gradientColors: string[]
   pauseAnimations: boolean
+  isCopyingPng?: boolean
 }>()
 
 const svgElementTransitionClass = computed(() => [
@@ -23,7 +24,7 @@ const svgElementTransitionClass = computed(() => [
 
 <template>
   <!-- Print watermark-->
-  <g v-if="svg.isPrintingSvg || svg.isPrintingImg" v-html="watermark" />
+  <g v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng" v-html="watermark" />
 
   <g class="pointer-events-none">
     <!-- Marker for selected version -->
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index bf5518d9ed..0871c8991d 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -25,6 +25,7 @@ import {
   getTrendsDatetimeFormatterOptions,
 } from '#shared/utils/trends-chart'
 import { downloadFileLink } from '~/utils/download'
+import { useCopyChartPng } from '~/composables/useCopyChartPng'
 import { createLastDatapointLabelsSvg } from '#shared/utils/download-chart-last-label'
 
 import('vue-data-ui/style.css')
@@ -71,6 +72,7 @@ const rootEl = shallowRef<HTMLElement | null>(null)
 const isZoomed = shallowRef(false)
 
 const chartRef = useTemplateRef('chartRef')
+const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
 
 function setIsZoom({ isZoom }: { isZoom: boolean }) {
   isZoomed.value = isZoom
@@ -1724,7 +1726,7 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
 
               <!-- Inject npmx logo & tagline during SVG and PNG print -->
               <g
-                v-if="svg.isPrintingSvg || svg.isPrintingImg"
+                v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
                 v-html="
                   drawNpmxLogoAndTaglineWatermark({
                     svg,
@@ -1837,6 +1839,9 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
             <template #optionCsv>
               <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
             </template>
+            <template #custom-menu-before>
+              <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+            </template>
             <template #optionImg>
               <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
             </template>
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index badad67b4c..597df64533 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -10,6 +10,7 @@ import {
 import TooltipApp from '~/components/Tooltip/App.vue'
 import { copyAltTextForVersionsBarChart, sanitise, applyEllipsis } from '~/utils/charts'
 import { downloadFileLink } from '~/utils/download'
+import { useCopyChartPng } from '~/composables/useCopyChartPng'
 
 import('vue-data-ui/style.css')
 
@@ -20,6 +21,8 @@ const props = defineProps<{
 
 const { accentColors, selectedAccentColor } = useAccentColor()
 const { copy, copied } = useClipboard()
+const chartRef = useTemplateRef('chartRef')
+const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
 
 const colorMode = useColorMode()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
@@ -449,7 +452,12 @@ const chartConfig = computed<VueUiXyConfig>(() => {
       <!-- Chart content -->
       <ClientOnly v-if="xyDataset.length > 0 && !error">
         <div class="chart-container w-full" :key="groupingMode">
-          <VueUiXy :dataset="xyDataset" :config="chartConfig" class="[direction:ltr]">
+          <VueUiXy
+            ref="chartRef"
+            :dataset="xyDataset"
+            :config="chartConfig"
+            class="[direction:ltr]"
+          >
             <!-- Keyboard navigation hint -->
             <template #hint="{ isVisible }">
               <p v-if="isVisible" class="text-accent text-xs -mt-6 text-center" aria-hidden="true">
@@ -464,7 +472,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
 
               <!-- Inject npmx logo & tagline during SVG and PNG print -->
               <g
-                v-if="svg.isPrintingSvg || svg.isPrintingImg"
+                v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
                 v-html="
                   drawNpmxLogoAndTaglineWatermark({
                     svg,
@@ -536,6 +544,9 @@ const chartConfig = computed<VueUiXyConfig>(() => {
             <template #optionCsv>
               <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
             </template>
+            <template #custom-menu-before>
+              <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+            </template>
             <template #optionImg>
               <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
             </template>
diff --git a/app/composables/useCopyChartPng.ts b/app/composables/useCopyChartPng.ts
new file mode 100644
index 0000000000..bb6bba5631
--- /dev/null
+++ b/app/composables/useCopyChartPng.ts
@@ -0,0 +1,42 @@
+import { shallowRef, nextTick, toValue, type MaybeRefOrGetter } from 'vue'
+import { useClipboardItems } from '@vueuse/core'
+
+/** The part of a vue-data-ui chart instance we need to export a PNG. */
+type ChartWithImageExport = {
+  getImage: (options?: { scale?: number }) => Promise<{ imageUri: string }>
+}
+
+/**
+ * Copy a chart's PNG export to the clipboard, next to the built-in download.
+ *
+ * `isCopyingPng` has to be added to the `#svg` slot guard next to
+ * `svg.isPrintingImg`: the chart only raises its own printing flag for the
+ * built-in export buttons, so without it the copied image would be missing the
+ * watermark that the downloaded one has.
+ */
+export function useCopyChartPng(
+  chartRef: MaybeRefOrGetter<ChartWithImageExport | null | undefined>,
+) {
+  const { copy, copied: copiedPng } = useClipboardItems()
+  const isCopyingPng = shallowRef(false)
+
+  async function copyChartPng() {
+    const chart = toValue(chartRef)
+    if (!chart) return
+
+    isCopyingPng.value = true
+    await nextTick()
+
+    const { imageUri } = await chart.getImage().finally(() => {
+      isCopyingPng.value = false
+    })
+
+    // Decode the data URI manually: fetch() on data: URIs is blocked by the CSP
+    const binary = atob(imageUri.slice(imageUri.indexOf(',') + 1))
+    const bytes = new Uint8Array(binary.length)
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+    await copy([new ClipboardItem({ 'image/png': new Blob([bytes], { type: 'image/png' }) })])
+  }
+
+  return { copiedPng, isCopyingPng, copyChartPng }
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index a09e22b59f..c6881a08ae 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -723,6 +723,7 @@
       "date_range": "{start} to {end}",
       "date_range_multiline": "{start}\nto {end}",
       "download_file": "Download {fileType}",
+      "copy_file": "Copy {fileType}",
       "toggle_annotator": "Toggle annotator",
       "toggle_stack_mode": "Toggle stack mode",
       "open_options": "Open options",
diff --git a/i18n/schema.json b/i18n/schema.json
index b7793e498c..a955b9da4e 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -2173,6 +2173,9 @@
             "download_file": {
               "type": "string"
             },
+            "copy_file": {
+              "type": "string"
+            },
             "toggle_annotator": {
               "type": "string"
             },

From b1a3a7d41e19f88bc41d72ca532f7738492cf8cb Mon Sep 17 00:00:00 2001
From: BlankParticle <blankparticle@gmail.com>
Date: Tue, 4 Aug 2026 14:10:09 +0530
Subject: [PATCH 2/4] test: add a11y tests

---
 test/nuxt/a11y.spec.ts | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 0dc102ac11..10b0b5e674 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -275,6 +275,7 @@ import {
   PackageExternalLinks,
   LicenseChangeWarning,
   ChartSplitSparkline,
+  ChartCopyPngButton,
   TabRoot,
   TabList,
   TabItem,
@@ -1425,6 +1426,35 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('ChartCopyPngButton', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(ChartCopyPngButton, {
+        props: { copied: false },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations in the copied state', async () => {
+      const component = await mountSuspended(ChartCopyPngButton, {
+        props: { copied: true },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should expose an accessible name, since the button is icon-only', async () => {
+      const component = await mountSuspended(ChartCopyPngButton, {
+        props: { copied: false },
+      })
+      const button = component.get('button')
+      expect(button.attributes('aria-label')).toBeTruthy()
+      expect(button.attributes('type')).toBe('button')
+      // The icon carries no text, so it must not be announced
+      expect(component.get('span').attributes('aria-hidden')).toBe('true')
+    })
+  })
+
   describe('TabRoot + TabList + TabItem + TabPanel', () => {
     // oxlint-disable-next-line unicorn/consistent-function-scoping
     function createTabsFixture(modelValue: string, idPrefix: string) {

From bb69071b33ce506595a692862101ea1e590ac12a Mon Sep 17 00:00:00 2001
From: BlankParticle <blankparticle@gmail.com>
Date: Tue, 4 Aug 2026 14:34:40 +0530
Subject: [PATCH 3/4] fix: apply suggestions

---
 app/components/Chart/CopyPngButton.vue        | 67 ++++++++++++++++++-
 app/components/Compare/FacetBarChart.vue      |  2 +-
 app/components/Compare/FacetScatterChart.vue  |  6 +-
 app/components/Package/TimelineChart.vue      |  4 +-
 app/components/Package/TrendsChart.vue        |  6 +-
 .../Package/VersionDistribution.vue           |  6 +-
 app/composables/useCopyChartPng.ts            | 33 ++++++---
 test/nuxt/a11y.spec.ts                        | 24 ++++++-
 8 files changed, 125 insertions(+), 23 deletions(-)

diff --git a/app/components/Chart/CopyPngButton.vue b/app/components/Chart/CopyPngButton.vue
index c16747c28b..35ff290681 100644
--- a/app/components/Chart/CopyPngButton.vue
+++ b/app/components/Chart/CopyPngButton.vue
@@ -1,23 +1,84 @@
 <script setup lang="ts">
 // Custom entry for a vue-data-ui user options menu (via the #custom-menu-before
 // slot): copies the chart's PNG export to the clipboard. See useCopyChartPng.
+//
+// The library gives its own buttons a `button-info` hover label, but that style
+// is scoped to its SFC and slot content never gets its scope id, so the label
+// below re-creates it — including the mouseenter/mouseout toggle it uses — to
+// match the rest of the menu.
 defineProps<{
   copied: boolean
+  copying: boolean
 }>()
+
+const showLabel = shallowRef(false)
 </script>
 
 <template>
   <button
     type="button"
-    class="vue-ui-user-options-button cursor-pointer"
-    :title="$t('package.trends.copy_file', { fileType: 'PNG' })"
+    :aria-busy="copying"
     :aria-label="$t('package.trends.copy_file', { fileType: 'PNG' })"
+    class="vue-ui-user-options-button !cursor-pointer"
+    @mouseenter="showLabel = true"
+    @mouseleave="showLabel = false"
+    @focus="showLabel = true"
+    @blur="showLabel = false"
   >
+    <!-- Rasterising a large chart takes a moment, so the click needs feedback -->
+    <span
+      v-if="copying"
+      class="i-svg-spinners:ring-resize w-6 h-6 text-fg-subtle"
+      aria-hidden="true"
+    />
     <span
+      v-else
       class="w-6 h-6"
       :class="copied ? 'i-lucide:check text-accent' : 'i-lucide:copy text-fg-subtle'"
-      style="pointer-events: none"
       aria-hidden="true"
     />
+    <span class="button-info" :class="{ 'button-info-visible': showLabel }" aria-hidden="true">
+      {{ $t('package.trends.copy_file', { fileType: 'PNG' }) }}
+    </span>
   </button>
 </template>
+
+<style scoped>
+/* Mirrors .button-info-right in vue-data-ui's UserOptions, whose menu sits on
+   the right, so the label opens towards the chart */
+.button-info {
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  z-index: 2147483000;
+  padding: 4px 12px;
+  border-radius: 4px 0 0 4px;
+  background: var(--bg);
+  color: var(--fg);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.button-info-visible {
+  opacity: 1;
+  animation: show-button-info 0.2s ease-in forwards;
+}
+
+@keyframes show-button-info {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) scaleX(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button-info-visible {
+    animation: none;
+  }
+}
+</style>
diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index 3e45c64fec..276770dc46 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -317,7 +317,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
         </template>
 
         <template #custom-menu-before>
-          <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+          <ChartCopyPngButton :copied="copiedPng" :copying="isCopyingPng" @click="copyChartPng" />
         </template>
 
         <template #optionImg>
diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 5029e9d2c3..9c67a5b760 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -459,7 +459,11 @@ onMounted(async () => {
               <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
             </template>
             <template #custom-menu-before>
-              <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+              <ChartCopyPngButton
+                :copied="copiedPng"
+                :copying="isCopyingPng"
+                @click="copyChartPng"
+              />
             </template>
             <template #optionImg>
               <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
diff --git a/app/components/Package/TimelineChart.vue b/app/components/Package/TimelineChart.vue
index d1ffee0e64..a25cc82ee5 100644
--- a/app/components/Package/TimelineChart.vue
+++ b/app/components/Package/TimelineChart.vue
@@ -1000,7 +1000,7 @@ const timelineMetricTabs = computed(() => [
           <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
         </template>
         <template #custom-menu-before>
-          <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+          <ChartCopyPngButton :copied="copiedPng" :copying="isCopyingPng" @click="copyChartPng" />
         </template>
         <template #optionImg>
           <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
@@ -1109,7 +1109,7 @@ const timelineMetricTabs = computed(() => [
           <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
         </template>
         <template #custom-menu-before>
-          <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+          <ChartCopyPngButton :copied="copiedPng" :copying="isCopyingPng" @click="copyChartPng" />
         </template>
         <template #optionImg>
           <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 0871c8991d..481a784053 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1840,7 +1840,11 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
               <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
             </template>
             <template #custom-menu-before>
-              <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+              <ChartCopyPngButton
+                :copied="copiedPng"
+                :copying="isCopyingPng"
+                @click="copyChartPng"
+              />
             </template>
             <template #optionImg>
               <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index 597df64533..58fe698337 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -545,7 +545,11 @@ const chartConfig = computed<VueUiXyConfig>(() => {
               <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
             </template>
             <template #custom-menu-before>
-              <ChartCopyPngButton :copied="copiedPng" @click="copyChartPng" />
+              <ChartCopyPngButton
+                :copied="copiedPng"
+                :copying="isCopyingPng"
+                @click="copyChartPng"
+              />
             </template>
             <template #optionImg>
               <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
diff --git a/app/composables/useCopyChartPng.ts b/app/composables/useCopyChartPng.ts
index bb6bba5631..88d5a5ba01 100644
--- a/app/composables/useCopyChartPng.ts
+++ b/app/composables/useCopyChartPng.ts
@@ -17,25 +17,36 @@ type ChartWithImageExport = {
 export function useCopyChartPng(
   chartRef: MaybeRefOrGetter<ChartWithImageExport | null | undefined>,
 ) {
-  const { copy, copied: copiedPng } = useClipboardItems()
+  const { copy, copied: copiedPng, isSupported } = useClipboardItems()
+  const { announce } = useCommandPalette()
+  const { t } = useI18n()
   const isCopyingPng = shallowRef(false)
 
   async function copyChartPng() {
     const chart = toValue(chartRef)
-    if (!chart) return
+    if (!chart || !isSupported.value || isCopyingPng.value) return
 
     isCopyingPng.value = true
-    await nextTick()
 
-    const { imageUri } = await chart.getImage().finally(() => {
-      isCopyingPng.value = false
-    })
+    // Everything up to `copy()` stays synchronous, and the item is handed a
+    // pending blob: awaiting the export first would spend the user activation
+    // that Safari requires for navigator.clipboard.write.
+    const png = nextTick()
+      .then(() => chart.getImage())
+      .then(({ imageUri }) => {
+        // Decode the data URI manually: fetch() on data: URIs is blocked by the CSP
+        const binary = atob(imageUri.slice(imageUri.indexOf(',') + 1))
+        const bytes = new Uint8Array(binary.length)
+        for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+        return new Blob([bytes], { type: 'image/png' })
+      })
+      .finally(() => {
+        isCopyingPng.value = false
+      })
 
-    // Decode the data URI manually: fetch() on data: URIs is blocked by the CSP
-    const binary = atob(imageUri.slice(imageUri.indexOf(',') + 1))
-    const bytes = new Uint8Array(binary.length)
-    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
-    await copy([new ClipboardItem({ 'image/png': new Blob([bytes], { type: 'image/png' }) })])
+    await copy([new ClipboardItem({ 'image/png': png })])
+    // The button only swaps its icon, which says nothing to a screen reader
+    announce(t('command_palette.announcements.copied_to_clipboard'))
   }
 
   return { copiedPng, isCopyingPng, copyChartPng }
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 10b0b5e674..2834583d4c 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -1429,7 +1429,7 @@ describe('component accessibility audits', () => {
   describe('ChartCopyPngButton', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(ChartCopyPngButton, {
-        props: { copied: false },
+        props: { copied: false, copying: false },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
@@ -1437,7 +1437,15 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations in the copied state', async () => {
       const component = await mountSuspended(ChartCopyPngButton, {
-        props: { copied: true },
+        props: { copied: true, copying: false },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations while copying', async () => {
+      const component = await mountSuspended(ChartCopyPngButton, {
+        props: { copied: false, copying: true },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
@@ -1445,7 +1453,7 @@ describe('component accessibility audits', () => {
 
     it('should expose an accessible name, since the button is icon-only', async () => {
       const component = await mountSuspended(ChartCopyPngButton, {
-        props: { copied: false },
+        props: { copied: false, copying: false },
       })
       const button = component.get('button')
       expect(button.attributes('aria-label')).toBeTruthy()
@@ -1453,6 +1461,16 @@ describe('component accessibility audits', () => {
       // The icon carries no text, so it must not be announced
       expect(component.get('span').attributes('aria-hidden')).toBe('true')
     })
+
+    it('should mark the button busy while the export runs', async () => {
+      const component = await mountSuspended(ChartCopyPngButton, {
+        props: { copied: false, copying: true },
+      })
+      const button = component.get('button')
+      // The spinner is decorative, so aria-busy is what conveys the pending state
+      expect(button.attributes('aria-busy')).toBe('true')
+      expect(button.attributes('aria-label')).toBeTruthy()
+    })
   })
 
   describe('TabRoot + TabList + TabItem + TabPanel', () => {

From 3287ba19e2d64306e3eb296d7a2d3ddd9f98f085 Mon Sep 17 00:00:00 2001
From: BlankParticle <blankparticle@gmail.com>
Date: Tue, 4 Aug 2026 14:50:02 +0530
Subject: [PATCH 4/4] chore: simplify

---
 app/components/Chart/CopyPngButton.vue | 101 +++++++------------------
 app/composables/useCopyChartPng.ts     |  31 ++++----
 2 files changed, 45 insertions(+), 87 deletions(-)

diff --git a/app/components/Chart/CopyPngButton.vue b/app/components/Chart/CopyPngButton.vue
index 35ff290681..b527f24f44 100644
--- a/app/components/Chart/CopyPngButton.vue
+++ b/app/components/Chart/CopyPngButton.vue
@@ -1,84 +1,41 @@
 <script setup lang="ts">
 // Custom entry for a vue-data-ui user options menu (via the #custom-menu-before
 // slot): copies the chart's PNG export to the clipboard. See useCopyChartPng.
-//
-// The library gives its own buttons a `button-info` hover label, but that style
-// is scoped to its SFC and slot content never gets its scope id, so the label
-// below re-creates it — including the mouseenter/mouseout toggle it uses — to
-// match the rest of the menu.
 defineProps<{
   copied: boolean
   copying: boolean
 }>()
-
-const showLabel = shallowRef(false)
 </script>
 
 <template>
-  <button
-    type="button"
-    :aria-busy="copying"
-    :aria-label="$t('package.trends.copy_file', { fileType: 'PNG' })"
-    class="vue-ui-user-options-button !cursor-pointer"
-    @mouseenter="showLabel = true"
-    @mouseleave="showLabel = false"
-    @focus="showLabel = true"
-    @blur="showLabel = false"
+  <TooltipApp
+    :text="$t('package.trends.copy_file', { fileType: 'PNG' })"
+    position="left"
+    strategy="fixed"
+    :offset="0"
+    :tooltip-attr="{
+      class:
+        'px-3! py-1! text-base! text-fg-subtle! bg-bg! border-0! rounded-s! rounded-e-none! shadow-none! whitespace-nowrap!',
+    }"
   >
-    <!-- Rasterising a large chart takes a moment, so the click needs feedback -->
-    <span
-      v-if="copying"
-      class="i-svg-spinners:ring-resize w-6 h-6 text-fg-subtle"
-      aria-hidden="true"
-    />
-    <span
-      v-else
-      class="w-6 h-6"
-      :class="copied ? 'i-lucide:check text-accent' : 'i-lucide:copy text-fg-subtle'"
-      aria-hidden="true"
-    />
-    <span class="button-info" :class="{ 'button-info-visible': showLabel }" aria-hidden="true">
-      {{ $t('package.trends.copy_file', { fileType: 'PNG' }) }}
-    </span>
-  </button>
+    <button
+      type="button"
+      :aria-busy="copying"
+      :aria-label="$t('package.trends.copy_file', { fileType: 'PNG' })"
+      class="vue-ui-user-options-button !cursor-pointer"
+    >
+      <!-- Rasterising a large chart takes a moment, so the click needs feedback -->
+      <span
+        v-if="copying"
+        class="i-svg-spinners:ring-resize w-6 h-6 text-fg-subtle"
+        aria-hidden="true"
+      />
+      <span
+        v-else
+        class="w-6 h-6"
+        :class="copied ? 'i-lucide:check text-accent' : 'i-lucide:copy text-fg-subtle'"
+        aria-hidden="true"
+      />
+    </button>
+  </TooltipApp>
 </template>
-
-<style scoped>
-/* Mirrors .button-info-right in vue-data-ui's UserOptions, whose menu sits on
-   the right, so the label opens towards the chart */
-.button-info {
-  position: absolute;
-  top: 50%;
-  right: 100%;
-  z-index: 2147483000;
-  padding: 4px 12px;
-  border-radius: 4px 0 0 4px;
-  background: var(--bg);
-  color: var(--fg);
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(-50%);
-}
-
-.button-info-visible {
-  opacity: 1;
-  animation: show-button-info 0.2s ease-in forwards;
-}
-
-@keyframes show-button-info {
-  from {
-    opacity: 0;
-    transform: translateY(-50%) scaleX(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(-50%) scale(1);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .button-info-visible {
-    animation: none;
-  }
-}
-</style>
diff --git a/app/composables/useCopyChartPng.ts b/app/composables/useCopyChartPng.ts
index 88d5a5ba01..f372996724 100644
--- a/app/composables/useCopyChartPng.ts
+++ b/app/composables/useCopyChartPng.ts
@@ -31,22 +31,23 @@ export function useCopyChartPng(
     // Everything up to `copy()` stays synchronous, and the item is handed a
     // pending blob: awaiting the export first would spend the user activation
     // that Safari requires for navigator.clipboard.write.
-    const png = nextTick()
-      .then(() => chart.getImage())
-      .then(({ imageUri }) => {
-        // Decode the data URI manually: fetch() on data: URIs is blocked by the CSP
-        const binary = atob(imageUri.slice(imageUri.indexOf(',') + 1))
-        const bytes = new Uint8Array(binary.length)
-        for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
-        return new Blob([bytes], { type: 'image/png' })
-      })
-      .finally(() => {
-        isCopyingPng.value = false
-      })
+    try {
+      const png = nextTick()
+        .then(() => chart.getImage())
+        .then(({ imageUri }) => {
+          // Decode the data URI manually: fetch() on data: URIs is blocked by the CSP
+          const binary = atob(imageUri.slice(imageUri.indexOf(',') + 1))
+          const bytes = new Uint8Array(binary.length)
+          for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+          return new Blob([bytes], { type: 'image/png' })
+        })
 
-    await copy([new ClipboardItem({ 'image/png': png })])
-    // The button only swaps its icon, which says nothing to a screen reader
-    announce(t('command_palette.announcements.copied_to_clipboard'))
+      await copy([new ClipboardItem({ 'image/png': png })])
+      // The button only swaps its icon, which says nothing to a screen reader
+      announce(t('command_palette.announcements.copied_to_clipboard'))
+    } finally {
+      isCopyingPng.value = false
+    }
   }
 
   return { copiedPng, isCopyingPng, copyChartPng }