From 412a692237331e0ec895e9a8458ab7febaeb8910 Mon Sep 17 00:00:00 2001
From: Maximilian Mayer <office@maximilianmayer.at>
Date: Fri, 11 Sep 2026 12:56:13 +0200
Subject: [PATCH 1/2] fix(demo): use currentColor so action icons are visible
 on the toolbar

Signed-off-by: Maximilian Mayer <office@maximilianmayer.at>
---
 examples/basic/components/DeleteButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/basic/components/DeleteButton.vue b/examples/basic/components/DeleteButton.vue
index 2130e9e..799f0b9 100644
--- a/examples/basic/components/DeleteButton.vue
+++ b/examples/basic/components/DeleteButton.vue
@@ -18,7 +18,7 @@ export default defineComponent({
 .delete-btn {
   border: none;
   background: transparent;
-  color: #ffffff;
+  color: currentColor;
   padding: 4px;
   border-radius: 4px;
   cursor: pointer;

From 793e787c2a1b84c322486d32223320dc766133c7 Mon Sep 17 00:00:00 2001
From: Maximilian Mayer <office@maximilianmayer.at>
Date: Fri, 11 Sep 2026 12:56:19 +0200
Subject: [PATCH 2/2] feat(demo): add duplicate button and cover it with an e2e
 test

Signed-off-by: Maximilian Mayer <office@maximilianmayer.at>
---
 e2e/signature-actions.spec.ts                 |  5 +++
 examples/basic/App.vue                        |  5 ++-
 examples/basic/components/DuplicateButton.vue | 33 +++++++++++++++++++
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 examples/basic/components/DuplicateButton.vue

diff --git a/e2e/signature-actions.spec.ts b/e2e/signature-actions.spec.ts
index e305459..048f266 100644
--- a/e2e/signature-actions.spec.ts
+++ b/e2e/signature-actions.spec.ts
@@ -57,3 +57,8 @@ test("zoom a pdf element", async({page})=> {
   await expect(page.locator(".signature-box")).toHaveCount(1)
   expect(after.x).not.toBe(before.y);
 })
+
+test("duplicates a signature element", async ({ page }) => {
+  await page.getByTitle("Duplicate").click();
+  await expect(page.locator(".signature-box")).toHaveCount(2);
+});
diff --git a/examples/basic/App.vue b/examples/basic/App.vue
index 15df9bc..fc8efcd 100644
--- a/examples/basic/App.vue
+++ b/examples/basic/App.vue
@@ -41,7 +41,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           />
         </template>
 
-        <template #actions="{ onDelete }">
+        <template #actions="{ onDelete, onDuplicate }">
+          <DuplicateButton @duplicate="onDuplicate" />
           <DeleteButton @delete="onDelete" />
         </template>
       </PDFElements>
@@ -63,6 +64,7 @@ import AppToolbar from './components/AppToolbar.vue'
 import DocumentsList from './components/DocumentsList.vue'
 import SignatureBox from './components/SignatureBox.vue'
 import DeleteButton from './components/DeleteButton.vue'
+import DuplicateButton from './components/DuplicateButton.vue'
 import ElementsViewer from './components/ElementsViewer.vue'
 
 export default defineComponent({
@@ -73,6 +75,7 @@ export default defineComponent({
     DocumentsList,
     SignatureBox,
     DeleteButton,
+    DuplicateButton,
     ElementsViewer,
   },
   data() {
diff --git a/examples/basic/components/DuplicateButton.vue b/examples/basic/components/DuplicateButton.vue
new file mode 100644
index 0000000..7e7ef60
--- /dev/null
+++ b/examples/basic/components/DuplicateButton.vue
@@ -0,0 +1,33 @@
+<template>
+  <button class="duplicate-btn" type="button" title="Duplicate" @click.stop="$emit('duplicate')">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M16 1H6a2 2 0 0 0-2 2v12h2V3h10V1zm3 4H10a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H10V7h9v14z"/>
+    </svg>
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'DuplicateButton',
+})
+</script>
+
+<style scoped>
+.duplicate-btn {
+  border: none;
+  background: transparent;
+  color: currentColor;
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 120ms ease;
+}
+.duplicate-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+</style>