From 267f251f8a5f0ed47e20595231eb8f3a8b021b54 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Tue, 17 Mar 2026 10:38:40 +0300
Subject: [PATCH] Phase 7: Migrate 10 components from useEditorStore to
 useEditor

Components now using useEditor() from SDK instead of app's useEditorStore():
- CodePanel, DesignPanel, ImageFillPicker, LayerTree, PagesPanel,
  PropertiesPanel, VariablesDialog, FillSection, PageSection,
  VariablesSection

7 components remain on useEditorStore for app-specific methods:
- AppMenu, Toolbar, MobileHud (saveFigFile, exportSelection, mobile*)
- CanvasMenu (renderExportImage)
- EditorCanvas (cursorCanvasX/Y app state)
- MobileDrawer (mobileDrawerSnap app state)
- ExportSection (exportSelection, renderExportImage)
---
 src/components/CodePanel.vue                   |  4 ++--
 src/components/DesignPanel.vue                 |  8 ++++----
 src/components/ImageFillPicker.vue             |  4 ++--
 src/components/LayerTree.vue                   | 12 ++++++++----
 src/components/PagesPanel.vue                  |  5 ++---
 src/components/PropertiesPanel.vue             |  4 ++--
 src/components/VariablesDialog.vue             |  4 ++--
 src/components/properties/FillSection.vue      |  5 ++---
 src/components/properties/PageSection.vue      |  4 ++--
 src/components/properties/VariablesSection.vue |  4 ++--
 10 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/components/CodePanel.vue b/src/components/CodePanel.vue
index 48f91dcd6..6476a2f59 100644
--- a/src/components/CodePanel.vue
+++ b/src/components/CodePanel.vue
@@ -5,11 +5,11 @@ import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewpor
 import { computed, ref, watch } from 'vue'
 
 import { selectionToJSX } from '@open-pencil/core'
-import { useEditorStore } from '@/stores/editor'
+import { useEditor } from '@open-pencil/vue'
 
 import type { JSXFormat } from '@open-pencil/core'
 
-const store = useEditorStore()
+const store = useEditor()
 const copied = ref(false)
 const jsxFormat = ref<JSXFormat>('openpencil')
 
diff --git a/src/components/DesignPanel.vue b/src/components/DesignPanel.vue
index 62f02836c..a174ca227 100644
--- a/src/components/DesignPanel.vue
+++ b/src/components/DesignPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import { useEditorStore } from '@/stores/editor'
+import { useEditor } from '@open-pencil/vue'
 
 import VariablesDialog from './VariablesDialog.vue'
 import AppearanceSection from './properties/AppearanceSection.vue'
@@ -15,11 +15,11 @@ import StrokeSection from './properties/StrokeSection.vue'
 import TypographySection from './properties/TypographySection.vue'
 import VariablesSection from './properties/VariablesSection.vue'
 
-const store = useEditorStore()
+const store = useEditor()
 const variablesOpen = ref(false)
 
-const node = computed(() => store.selectedNode.value)
-const multiCount = computed(() => store.selectedNodes.value.length)
+const node = computed(() => store.getSelectedNode())
+const multiCount = computed(() => store.getSelectedNodes().length)
 const isComponentType = computed(() => {
   const t = node.value?.type
   return t === 'COMPONENT' || t === 'COMPONENT_SET' || t === 'INSTANCE'
diff --git a/src/components/ImageFillPicker.vue b/src/components/ImageFillPicker.vue
index 5a6e15db1..b31f8a428 100644
--- a/src/components/ImageFillPicker.vue
+++ b/src/components/ImageFillPicker.vue
@@ -3,7 +3,7 @@ import { computed, shallowRef, watch } from 'vue'
 import { useFileDialog, useObjectUrl } from '@vueuse/core'
 
 import AppSelect from './AppSelect.vue'
-import { useEditorStore } from '@/stores/editor'
+import { useEditor } from '@open-pencil/vue'
 
 import type { Fill, ImageScaleMode } from '@open-pencil/core'
 
@@ -16,7 +16,7 @@ const IMAGE_SCALE_MODES: { value: ImageScaleMode; label: string }[] = [
 
 const { fill } = defineProps<{ fill: Fill }>()
 const emit = defineEmits<{ update: [fill: Fill] }>()
-const store = useEditorStore()
+const store = useEditor()
 
 const imageBlob = shallowRef<Blob | null>(null)
 const imagePreviewUrl = useObjectUrl(imageBlob)
diff --git a/src/components/LayerTree.vue b/src/components/LayerTree.vue
index c6ca86cc8..6e954c2a6 100644
--- a/src/components/LayerTree.vue
+++ b/src/components/LayerTree.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { TreeRoot, TreeItem, ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal } from 'reka-ui'
 
-import { LayerTreeRoot, LayerTreeItem, useInlineRename, useLayerDrag } from '@open-pencil/vue'
-
-import { useEditorStore } from '@/stores/editor'
+import {
+  LayerTreeRoot,
+  LayerTreeItem,
+  useInlineRename,
+  useLayerDrag,
+  useEditor
+} from '@open-pencil/vue'
 import { nodeIcon, COMPONENT_TYPES } from '@/utils/layer-icons'
 import CanvasMenu from './CanvasMenu.vue'
 
 const INDENT = 16
-const store = useEditorStore()
+const store = useEditor()
 const rename = useInlineRename((id, name) => store.renameNode(id, name))
 const { draggingId, instruction, instructionTargetId } = useLayerDrag(store, INDENT)
 
diff --git a/src/components/PagesPanel.vue b/src/components/PagesPanel.vue
index b0acfc6cf..ae3163d2c 100644
--- a/src/components/PagesPanel.vue
+++ b/src/components/PagesPanel.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import { useInlineRename } from '@open-pencil/vue'
-import { useEditorStore } from '@/stores/editor'
+import { useInlineRename, useEditor } from '@open-pencil/vue'
 
-const store = useEditorStore()
+const store = useEditor()
 
 const DIVIDER_RE = /^[-–—*\s]+$/
 const pageInputRefs = new Map<string, HTMLInputElement>()
diff --git a/src/components/PropertiesPanel.vue b/src/components/PropertiesPanel.vue
index 31a2bf0a8..7ebe2f7f6 100644
--- a/src/components/PropertiesPanel.vue
+++ b/src/components/PropertiesPanel.vue
@@ -2,13 +2,13 @@
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
 
 import { useAIChat } from '@/composables/use-chat'
-import { useEditorStore } from '@/stores/editor'
+import { useEditor } from '@open-pencil/vue'
 
 import ChatPanel from './ChatPanel.vue'
 import CodePanel from './CodePanel.vue'
 import DesignPanel from './DesignPanel.vue'
 
-const store = useEditorStore()
+const store = useEditor()
 const { activeTab } = useAIChat()
 </script>
 
diff --git a/src/components/VariablesDialog.vue b/src/components/VariablesDialog.vue
index c5ae5cfad..d8baf6da3 100644
--- a/src/components/VariablesDialog.vue
+++ b/src/components/VariablesDialog.vue
@@ -25,11 +25,11 @@ import IconToggleLeft from '~icons/lucide/toggle-left'
 import IconX from '~icons/lucide/x'
 import ColorInput from './ColorInput.vue'
 import { colorToHexRaw, parseColor, randomHex } from '@open-pencil/core'
-import { useEditorStore } from '@/stores/editor'
+import { useEditor } from '@open-pencil/vue'
 import type { Variable, VariableCollection, VariableValue, Color } from '@open-pencil/core'
 
 const open = defineModel<boolean>('open', { default: false })
-const store = useEditorStore()
+const store = useEditor()
 const searchTerm = ref('')
 
 const collections = computed(() => {
diff --git a/src/components/properties/FillSection.vue b/src/components/properties/FillSection.vue
index 85bc1a69c..08631b8e5 100644
--- a/src/components/properties/FillSection.vue
+++ b/src/components/properties/FillSection.vue
@@ -15,14 +15,13 @@ import {
 
 import FillPicker from '@/components/FillPicker.vue'
 import ScrubInput from '@/components/ScrubInput.vue'
-import { PropertyListRoot } from '@open-pencil/vue'
-import { useEditorStore } from '@/stores/editor'
+import { PropertyListRoot, useEditor } from '@open-pencil/vue'
 import { DEFAULT_SHAPE_FILL } from '@/constants'
 import { colorToCSS, colorToHexRaw } from '@open-pencil/core'
 
 import type { Fill, Variable } from '@open-pencil/core'
 
-const store = useEditorStore()
+const store = useEditor()
 
 const colorVariables = computed(() => store.graph.getVariablesByType('COLOR'))
 
diff --git a/src/components/properties/PageSection.vue b/src/components/properties/PageSection.vue
index a496b1802..ca7ef34ef 100644
--- a/src/components/properties/PageSection.vue
+++ b/src/components/properties/PageSection.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import ColorInput from '@/components/ColorInput.vue'
-import { useEditorStore } from '@/stores/editor'
+import { useEditor } from '@open-pencil/vue'
 
 import type { Color } from '@open-pencil/core'
 
-const store = useEditorStore()
+const store = useEditor()
 
 function updateColor(color: Color) {
   store.state.pageColor = color
diff --git a/src/components/properties/VariablesSection.vue b/src/components/properties/VariablesSection.vue
index 94059382e..b5f95be62 100644
--- a/src/components/properties/VariablesSection.vue
+++ b/src/components/properties/VariablesSection.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { useEditorStore } from '@/stores/editor'
+import { useEditor } from '@open-pencil/vue'
 
-const store = useEditorStore()
+const store = useEditor()
 const emit = defineEmits<{ openDialog: [] }>()
 
 const collectionCount = computed(() => {