From 30a2b224f7edc594288149a550680c8e154ba489 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Mon, 2 Mar 2026 11:57:55 +0100
Subject: [PATCH 1/2] fix: replace built-in icons with lucide icons in chart
 context menus

---
 app/components/Package/TrendsChart.vue        | 30 +++++++++++++++++++
 .../Package/VersionDistribution.vue           | 23 ++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 5b239ee567..d59bdee89e 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -2036,6 +2036,14 @@ watch(selectedMetric, value => {
             <template #optionSvg>
               <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
             </template>
+            <template #optionStack="{ isStack }">
+              <span
+                v-if="isStack"
+                class="i-lucide:layers-2 text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+              <span v-else class="i-lucide:chart-line text-fg-subtle w-6 h-6" aria-hidden="true" />
+            </template>
 
             <template #annotator-action-close>
               <span
@@ -2047,6 +2055,28 @@ watch(selectedMetric, value => {
             <template #annotator-action-color="{ color }">
               <span class="i-lucide:palette w-6 h-6" :style="{ color }" aria-hidden="true" />
             </template>
+            <template #annotator-action-draw="{ mode }">
+              <span
+                v-if="mode === 'arrow'"
+                class="i-lucide:move-up-right text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+              <span
+                v-if="mode === 'text'"
+                class="i-lucide:type text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+              <span
+                v-if="mode === 'line'"
+                class="i-lucide:pen-line text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+              <span
+                v-if="mode === 'draw'"
+                class="i-lucide:line-squiggle text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+            </template>
             <template #annotator-action-undo>
               <span
                 class="i-lucide:undo-2 w-6 h-6 text-fg-subtle"
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index ce5456f893..7e41968694 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -551,6 +551,29 @@ const chartConfig = computed<VueUiXyConfig>(() => {
               <span class="i-lucide:palette w-6 h-6" :style="{ color }" aria-hidden="true" />
             </template>
 
+            <template #annotator-action-draw="{ mode }">
+              <span
+                v-if="mode === 'arrow'"
+                class="i-lucide:move-up-right text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+              <span
+                v-if="mode === 'text'"
+                class="i-lucide:type text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+              <span
+                v-if="mode === 'line'"
+                class="i-lucide:pen-line text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+              <span
+                v-if="mode === 'draw'"
+                class="i-lucide:line-squiggle text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+            </template>
+
             <template #annotator-action-undo>
               <span
                 class="i-lucide:undo-2 w-6 h-6 text-fg-subtle"

From 1c6240bb88f74de6d8bcf7b95c4f3b60af196734 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Mon, 2 Mar 2026 12:00:44 +0100
Subject: [PATCH 2/2] fix: set point-events-none on stack mode icons

---
 app/components/Package/TrendsChart.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index d59bdee89e..cb3308ca74 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -2039,10 +2039,14 @@ watch(selectedMetric, value => {
             <template #optionStack="{ isStack }">
               <span
                 v-if="isStack"
-                class="i-lucide:layers-2 text-fg-subtle w-6 h-6"
+                class="i-lucide:layers-2 text-fg-subtle w-6 h-6 pointer-events-none"
+                aria-hidden="true"
+              />
+              <span
+                v-else
+                class="i-lucide:chart-line text-fg-subtle w-6 h-6 pointer-events-none"
                 aria-hidden="true"
               />
-              <span v-else class="i-lucide:chart-line text-fg-subtle w-6 h-6" aria-hidden="true" />
             </template>
 
             <template #annotator-action-close>