From b7242a78c2139441c236e76445c56142bd9ab41d Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sat, 28 Feb 2026 18:10:26 +0300
Subject: [PATCH] Fix context menu not showing: scoped slot pattern + icon fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CanvasContextMenu now exposes onContextMenu via scoped slot instead
  of wrapping in a <div> (which broke flex layout — the div had no
  flex-1, so it collapsed and never received contextmenu events)
- EditorCanvas binds the handler directly on its own flex-1 div
- Fix lucide/diamonds icon not found — use lucide/component for
  COMPONENT_SET (the actual 4-diamond component icon)
---
 components.d.ts                      | 5 +----
 src/components/CanvasContextMenu.vue | 5 +----
 src/components/EditorCanvas.vue      | 4 ++--
 src/components/LayersPanel.vue       | 2 +-
 4 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 5f7eeebb0..460f0cd77 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,6 +12,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AppearanceSection: typeof import('./src/components/properties/AppearanceSection.vue')['default']
+    CanvasContextMenu: typeof import('./src/components/CanvasContextMenu.vue')['default']
     ColorPicker: typeof import('./src/components/ColorPicker.vue')['default']
     EditorCanvas: typeof import('./src/components/EditorCanvas.vue')['default']
     FillPicker: typeof import('./src/components/FillPicker.vue')['default']
@@ -26,14 +27,11 @@ declare module 'vue' {
     IconLucideAlignVerticalJustifyCenter: typeof import('~icons/lucide/align-vertical-justify-center')['default']
     IconLucideAlignVerticalJustifyEnd: typeof import('~icons/lucide/align-vertical-justify-end')['default']
     IconLucideAlignVerticalJustifyStart: typeof import('~icons/lucide/align-vertical-justify-start')['default']
-    IconLucideArrowRight: typeof import('~icons/lucide/arrow-right')['default']
     IconLucideBaseline: typeof import('~icons/lucide/baseline')['default']
     IconLucideBlend: typeof import('~icons/lucide/blend')['default']
     IconLucideCheck: typeof import('~icons/lucide/check')['default']
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    IconLucideCircle: typeof import('~icons/lucide/circle')['default']
-    IconLucideDiamond: typeof import('~icons/lucide/diamond')['default']
     IconLucideEye: typeof import('~icons/lucide/eye')['default']
     IconLucideEyeOff: typeof import('~icons/lucide/eye-off')['default']
     IconLucideFile: typeof import('~icons/lucide/file')['default']
@@ -45,7 +43,6 @@ declare module 'vue' {
     IconLucideRotateCcw: typeof import('~icons/lucide/rotate-ccw')['default']
     IconLucideRotateCw: typeof import('~icons/lucide/rotate-cw')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
-    IconLucideSquare: typeof import('~icons/lucide/square')['default']
     LayersPanel: typeof import('./src/components/LayersPanel.vue')['default']
     LayoutSection: typeof import('./src/components/properties/LayoutSection.vue')['default']
     PageSection: typeof import('./src/components/properties/PageSection.vue')['default']
diff --git a/src/components/CanvasContextMenu.vue b/src/components/CanvasContextMenu.vue
index 4d4d1044d..5d62ea569 100644
--- a/src/components/CanvasContextMenu.vue
+++ b/src/components/CanvasContextMenu.vue
@@ -114,10 +114,7 @@ watch(open, (val) => {
 </script>
 
 <template>
-  <div @contextmenu="onContextMenu">
-    <slot />
-  </div>
-
+  <slot :onContextMenu="onContextMenu" />
   <Teleport to="body">
     <div
       v-if="open"
diff --git a/src/components/EditorCanvas.vue b/src/components/EditorCanvas.vue
index ccd974a51..894e046f1 100644
--- a/src/components/EditorCanvas.vue
+++ b/src/components/EditorCanvas.vue
@@ -67,8 +67,8 @@ function onTextKeyDown(e: KeyboardEvent) {
 </script>
 
 <template>
-  <CanvasContextMenu>
-  <div class="relative flex-1 min-w-0 min-h-0 overflow-hidden">
+  <CanvasContextMenu v-slot="{ onContextMenu }">
+  <div class="relative flex-1 min-w-0 min-h-0 overflow-hidden" @contextmenu="onContextMenu">
     <canvas ref="canvasRef" :style="{ cursor }" class="block size-full" />
     <textarea
       v-if="editingNode"
diff --git a/src/components/LayersPanel.vue b/src/components/LayersPanel.vue
index 9931e565b..b7bff0c95 100644
--- a/src/components/LayersPanel.vue
+++ b/src/components/LayersPanel.vue
@@ -5,7 +5,7 @@ import { TreeRoot, TreeItem } from 'reka-ui'
 
 import IconCircle from '~icons/lucide/circle'
 import IconComponent from '~icons/lucide/diamond'
-import IconComponentSet from '~icons/lucide/diamonds'
+import IconComponentSet from '~icons/lucide/component'
 import IconFrame from '~icons/lucide/frame'
 import IconGroup from '~icons/lucide/group'
 import IconInstance from '~icons/lucide/diamond'