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

@@ -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')
 

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'

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)

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)
 

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>()

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>
 

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(() => {

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'))
 

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

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(() => {