From 1b4dc08c540e2dbc961d232e83039cd8160bafe2 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 2 Mar 2026 18:08:03 +0300
Subject: [PATCH 1/9] Add multi-file tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Open multiple documents in tabs within a single window, like Figma.

- Tab bar appears when 2+ documents are open, with close (×) and new (+) buttons
- ⌘N / ⌘T create a new empty tab
- ⌘W closes the active tab (last tab closes and reopens as Untitled)
- ⌘O opens .fig files in a new tab (reuses current tab if Untitled with no changes)
- Middle-click closes a tab
- Each tab has its own SceneGraph, UndoManager, viewport, and selection state
- Switching tabs remounts the canvas to rebind the Skia renderer to the active store
- Keyboard shortcuts, menu actions, and AI tools all operate on the active tab
---
 src/components/AppMenu.vue      | 112 +++++++++++++++++---------------
 src/components/TabBar.vue       |  55 ++++++++++++++++
 src/composables/use-chat.ts     |   9 ++-
 src/composables/use-keyboard.ts |  97 +++++++++++++++------------
 src/composables/use-menu.ts     |  53 ++++++++-------
 src/stores/editor.ts            |  14 +++-
 src/stores/tabs.ts              | 108 ++++++++++++++++++++++++++++++
 src/views/EditorView.vue        |  30 +++++----
 8 files changed, 347 insertions(+), 131 deletions(-)
 create mode 100644 src/components/TabBar.vue
 create mode 100644 src/stores/tabs.ts

diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue
index 9e30b2f01..89ac2307f 100644
--- a/src/components/AppMenu.vue
+++ b/src/components/AppMenu.vue
@@ -54,7 +54,12 @@ interface MenuItem {
 }
 
 const fileMenu: MenuItem[] = [
-  { label: 'Open…', shortcut: `${mod}O`, action: () => openFileDialog(store) },
+  {
+    label: 'New',
+    shortcut: `${mod}N`,
+    action: () => import('@/stores/tabs').then((m) => m.createTab())
+  },
+  { label: 'Open…', shortcut: `${mod}O`, action: () => openFileDialog() },
   { separator: true },
   { label: 'Save', shortcut: `${mod}S`, action: () => store.saveFigFile() },
   { label: 'Save as…', shortcut: `${mod}⇧S`, action: () => store.saveFigFileAs() },
@@ -159,7 +164,8 @@ const topMenus = [
         v-else
         class="min-w-0 flex-1 cursor-default truncate rounded px-1 py-0.5 text-xs text-surface hover:bg-hover"
         @dblclick="startRename"
-      >{{ store.state.documentName }}</span>
+        >{{ store.state.documentName }}</span
+      >
       <button
         class="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded text-muted transition-colors hover:bg-hover hover:text-surface"
         title="Toggle UI (⌘\)"
@@ -177,58 +183,60 @@ const topMenus = [
             {{ menu.label }}
           </MenubarTrigger>
 
-        <MenubarPortal>
-          <MenubarContent
-            :side-offset="4"
-            align="start"
-            class="min-w-52 rounded-lg border border-border bg-panel p-1 shadow-lg"
-          >
-            <template v-for="(item, i) in menu.items" :key="i">
-              <MenubarSeparator v-if="item.separator" class="mx-1 my-1 h-px bg-border" />
-              <MenubarSub v-else-if="item.sub">
-                <MenubarSubTrigger
-                  class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs text-surface outline-none select-none hover:bg-hover"
+          <MenubarPortal>
+            <MenubarContent
+              :side-offset="4"
+              align="start"
+              class="min-w-52 rounded-lg border border-border bg-panel p-1 shadow-lg"
+            >
+              <template v-for="(item, i) in menu.items" :key="i">
+                <MenubarSeparator v-if="item.separator" class="mx-1 my-1 h-px bg-border" />
+                <MenubarSub v-else-if="item.sub">
+                  <MenubarSubTrigger
+                    class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs text-surface outline-none select-none hover:bg-hover"
+                  >
+                    <span class="flex-1">{{ item.label }}</span>
+                    <IconChevronRight class="size-3 text-muted" />
+                  </MenubarSubTrigger>
+                  <MenubarPortal>
+                    <MenubarSubContent
+                      :side-offset="4"
+                      class="min-w-44 rounded-lg border border-border bg-panel p-1 shadow-lg"
+                    >
+                      <template v-for="(sub, j) in item.sub" :key="j">
+                        <MenubarSeparator v-if="sub.separator" class="mx-1 my-1 h-px bg-border" />
+                        <MenubarItem
+                          v-else
+                          class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-none select-none"
+                          :class="sub.disabled ? 'text-muted/50' : 'text-surface hover:bg-hover'"
+                          :disabled="sub.disabled"
+                          @select="sub.action?.()"
+                        >
+                          <span class="flex-1">{{ sub.label }}</span>
+                          <span v-if="sub.shortcut" class="text-[11px] text-muted">{{
+                            sub.shortcut
+                          }}</span>
+                        </MenubarItem>
+                      </template>
+                    </MenubarSubContent>
+                  </MenubarPortal>
+                </MenubarSub>
+                <MenubarItem
+                  v-else
+                  class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-none select-none"
+                  :class="item.disabled ? 'text-muted/50' : 'text-surface hover:bg-hover'"
+                  :disabled="item.disabled"
+                  @select="item.action?.()"
                 >
                   <span class="flex-1">{{ item.label }}</span>
-                  <IconChevronRight class="size-3 text-muted" />
-                </MenubarSubTrigger>
-                <MenubarPortal>
-                  <MenubarSubContent
-                    :side-offset="4"
-                    class="min-w-44 rounded-lg border border-border bg-panel p-1 shadow-lg"
-                  >
-                    <template v-for="(sub, j) in item.sub" :key="j">
-                      <MenubarSeparator v-if="sub.separator" class="mx-1 my-1 h-px bg-border" />
-                      <MenubarItem
-                        v-else
-                        class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-none select-none"
-                        :class="sub.disabled ? 'text-muted/50' : 'text-surface hover:bg-hover'"
-                        :disabled="sub.disabled"
-                        @select="sub.action?.()"
-                      >
-                        <span class="flex-1">{{ sub.label }}</span>
-                        <span v-if="sub.shortcut" class="text-[11px] text-muted">{{
-                          sub.shortcut
-                        }}</span>
-                      </MenubarItem>
-                    </template>
-                  </MenubarSubContent>
-                </MenubarPortal>
-              </MenubarSub>
-              <MenubarItem
-                v-else
-                class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-none select-none"
-                :class="item.disabled ? 'text-muted/50' : 'text-surface hover:bg-hover'"
-                :disabled="item.disabled"
-                @select="item.action?.()"
-              >
-                <span class="flex-1">{{ item.label }}</span>
-                <span v-if="item.shortcut" class="text-[11px] text-muted">{{ item.shortcut }}</span>
-              </MenubarItem>
-            </template>
-          </MenubarContent>
-        </MenubarPortal>
-      </MenubarMenu>
+                  <span v-if="item.shortcut" class="text-[11px] text-muted">{{
+                    item.shortcut
+                  }}</span>
+                </MenubarItem>
+              </template>
+            </MenubarContent>
+          </MenubarPortal>
+        </MenubarMenu>
       </MenubarRoot>
     </div>
   </div>
diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
new file mode 100644
index 000000000..3a27c2393
--- /dev/null
+++ b/src/components/TabBar.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useTabsStore, createTab } from '@/stores/tabs'
+
+const { tabs, switchTab, closeTab } = useTabsStore()
+
+function onMiddleClick(e: MouseEvent, tabId: string) {
+  if (e.button === 1) {
+    e.preventDefault()
+    closeTab(tabId)
+  }
+}
+
+function onClose(e: MouseEvent, tabId: string) {
+  e.stopPropagation()
+  closeTab(tabId)
+}
+</script>
+
+<template>
+  <div
+    v-if="tabs.length > 1"
+    class="flex h-9 shrink-0 items-end gap-0 overflow-x-auto border-b border-border bg-panel scrollbar-none"
+  >
+    <div
+      v-for="tab in tabs"
+      :key="tab.id"
+      class="group/tab flex h-full max-w-48 min-w-0 cursor-pointer items-center gap-1.5 border-r border-border px-3 text-xs transition-colors select-none"
+      :class="
+        tab.isActive
+          ? 'bg-surface text-surface'
+          : 'bg-panel text-muted hover:bg-hover hover:text-surface'
+      "
+      @click="switchTab(tab.id)"
+      @mousedown="onMiddleClick($event, tab.id)"
+    >
+      <icon-lucide-file class="size-3 shrink-0 opacity-50" />
+      <span class="min-w-0 flex-1 truncate">{{ tab.name }}</span>
+      <button
+        class="flex size-4 shrink-0 cursor-pointer items-center justify-center rounded opacity-0 transition-opacity hover:bg-hover group-hover/tab:opacity-100"
+        :class="tab.isActive ? 'opacity-100' : ''"
+        title="Close tab"
+        @click="onClose($event, tab.id)"
+      >
+        <icon-lucide-x class="size-3" />
+      </button>
+    </div>
+    <button
+      class="flex size-9 shrink-0 cursor-pointer items-center justify-center text-muted transition-colors hover:bg-hover hover:text-surface"
+      title="New tab"
+      @click="createTab()"
+    >
+      <icon-lucide-plus class="size-3.5" />
+    </button>
+  </div>
+</template>
diff --git a/src/composables/use-chat.ts b/src/composables/use-chat.ts
index b0455548e..c4a151225 100644
--- a/src/composables/use-chat.ts
+++ b/src/composables/use-chat.ts
@@ -6,6 +6,7 @@ import dedent from 'dedent'
 import { computed, ref, watch } from 'vue'
 
 import { createAITools } from '@/ai/tools'
+import { useEditorStore } from '@/stores/editor'
 
 import type { EditorStore } from '@/stores/editor'
 import type { UIMessage } from 'ai'
@@ -65,7 +66,13 @@ function createTransport() {
     }
   })
 
-  const tools = editorStore ? createAITools(editorStore) : {}
+  let currentStore: EditorStore | null = editorStore
+  try {
+    currentStore = useEditorStore()
+  } catch {
+    // store not yet available
+  }
+  const tools = currentStore ? createAITools(currentStore) : {}
 
   const agent = new ToolLoopAgent({
     model: openrouter(modelId.value),
diff --git a/src/composables/use-keyboard.ts b/src/composables/use-keyboard.ts
index 75b24180f..6ab4cacf9 100644
--- a/src/composables/use-keyboard.ts
+++ b/src/composables/use-keyboard.ts
@@ -1,56 +1,61 @@
 import { useEventListener } from '@vueuse/core'
 
 import { useAIChat } from '@/composables/use-chat'
-import { TOOL_SHORTCUTS } from '@/stores/editor'
+import { TOOL_SHORTCUTS, useEditorStore } from '@/stores/editor'
+import { closeTab, createTab, activeTab as activeTabRef } from '@/stores/tabs'
 
 import { openFileDialog } from './use-menu'
 
-import type { EditorStore } from '@/stores/editor'
-
 function isEditing(e: Event) {
   return e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement
 }
 
-export function useKeyboard(store: EditorStore) {
+export function useKeyboard() {
   const { activeTab } = useAIChat()
+
+  function store() {
+    return useEditorStore()
+  }
+
   useEventListener(window, 'copy', (e: ClipboardEvent) => {
     if (isEditing(e)) return
     e.preventDefault()
-    if (e.clipboardData) store.writeCopyData(e.clipboardData)
+    if (e.clipboardData) store().writeCopyData(e.clipboardData)
   })
 
   useEventListener(window, 'cut', (e: ClipboardEvent) => {
     if (isEditing(e)) return
     e.preventDefault()
-    if (e.clipboardData) store.writeCopyData(e.clipboardData)
-    store.deleteSelected()
+    if (e.clipboardData) store().writeCopyData(e.clipboardData)
+    store().deleteSelected()
   })
 
   useEventListener(window, 'paste', (e: ClipboardEvent) => {
     if (isEditing(e)) return
     e.preventDefault()
     const html = e.clipboardData?.getData('text/html') ?? ''
-    if (html) store.pasteFromHTML(html)
+    if (html) store().pasteFromHTML(html)
   })
 
   useEventListener(window, 'keydown', (e: KeyboardEvent) => {
     if (isEditing(e)) return
+    const s = store()
 
     const tool = TOOL_SHORTCUTS[e.key.toLowerCase()]
     if (tool) {
-      store.setTool(tool)
+      s.setTool(tool)
       return
     }
 
     if ((e.metaKey || e.ctrlKey) && e.altKey) {
       if (e.code === 'KeyK') {
         e.preventDefault()
-        store.createComponentFromSelection()
+        s.createComponentFromSelection()
         return
       }
       if (e.code === 'KeyB') {
         e.preventDefault()
-        store.detachInstance()
+        s.detachInstance()
         return
       }
     }
@@ -58,23 +63,23 @@ export function useKeyboard(store: EditorStore) {
     if ((e.metaKey || e.ctrlKey) && e.shiftKey) {
       if (e.code === 'KeyK') {
         e.preventDefault()
-        store.createComponentSetFromComponents()
+        s.createComponentSetFromComponents()
         return
       }
       if (e.code === 'KeyH') {
         e.preventDefault()
-        store.toggleVisibility()
+        s.toggleVisibility()
         return
       }
       if (e.code === 'KeyL') {
         e.preventDefault()
-        store.toggleLock()
+        s.toggleLock()
         return
       }
       if (e.code === 'KeyE') {
         e.preventDefault()
-        if (store.state.selectedIds.size > 0) {
-          store.exportSelection(1, 'PNG')
+        if (s.state.selectedIds.size > 0) {
+          s.exportSelection(1, 'PNG')
         }
         return
       }
@@ -83,7 +88,7 @@ export function useKeyboard(store: EditorStore) {
     if (e.metaKey || e.ctrlKey) {
       if (e.code === 'Backslash') {
         e.preventDefault()
-        store.state.showUI = !store.state.showUI
+        s.state.showUI = !s.state.showUI
         return
       }
       if (e.code === 'KeyJ') {
@@ -91,78 +96,88 @@ export function useKeyboard(store: EditorStore) {
         activeTab.value = activeTab.value === 'ai' ? 'design' : 'ai'
         return
       }
+      if (e.key === 'w') {
+        e.preventDefault()
+        if (activeTabRef.value) closeTab(activeTabRef.value.id)
+        return
+      }
+      if (e.key === 'n' || e.key === 't') {
+        e.preventDefault()
+        createTab()
+        return
+      }
       if (e.key === 'z' && !e.shiftKey) {
         e.preventDefault()
-        store.undoAction()
+        s.undoAction()
       } else if ((e.key === 'z' && e.shiftKey) || e.key === 'y') {
         e.preventDefault()
-        store.redoAction()
+        s.redoAction()
       } else if (e.key === '0') {
         e.preventDefault()
-        store.zoomToFit()
+        s.zoomToFit()
       } else if (e.key === 'd') {
         e.preventDefault()
-        store.duplicateSelected()
+        s.duplicateSelected()
       } else if (e.key === 'a') {
         e.preventDefault()
-        store.selectAll()
+        s.selectAll()
       } else if (e.key === 's' && e.shiftKey) {
         e.preventDefault()
-        store.saveFigFileAs()
+        s.saveFigFileAs()
       } else if (e.key === 's') {
         e.preventDefault()
-        store.saveFigFile()
+        s.saveFigFile()
       } else if (e.key === 'o') {
         e.preventDefault()
-        openFileDialog(store)
+        openFileDialog()
       } else if (e.key === 'g' && !e.shiftKey) {
         e.preventDefault()
-        store.groupSelected()
+        s.groupSelected()
       } else if (e.key === 'g' && e.shiftKey) {
         e.preventDefault()
-        store.ungroupSelected()
+        s.ungroupSelected()
       }
     }
 
     if (e.shiftKey && e.key === 'A') {
       e.preventDefault()
-      const node = store.selectedNode.value
-      if (node && node.type === 'FRAME' && store.selectedNodes.value.length === 1) {
-        store.setLayoutMode(node.id, node.layoutMode === 'NONE' ? 'VERTICAL' : 'NONE')
-      } else if (store.selectedNodes.value.length > 0) {
-        store.wrapInAutoLayout()
+      const node = s.selectedNode.value
+      if (node && node.type === 'FRAME' && s.selectedNodes.value.length === 1) {
+        s.setLayoutMode(node.id, node.layoutMode === 'NONE' ? 'VERTICAL' : 'NONE')
+      } else if (s.selectedNodes.value.length > 0) {
+        s.wrapInAutoLayout()
       }
       return
     }
 
     if (e.key === ']') {
       e.preventDefault()
-      store.bringToFront()
+      s.bringToFront()
       return
     }
     if (e.key === '[') {
       e.preventDefault()
-      store.sendToBack()
+      s.sendToBack()
       return
     }
 
     if (e.key === 'Backspace' || e.key === 'Delete') {
-      store.deleteSelected()
+      s.deleteSelected()
     }
 
-    if (e.key === 'Enter' && store.state.penState) {
+    if (e.key === 'Enter' && s.state.penState) {
       e.preventDefault()
-      store.penCommit(false)
+      s.penCommit(false)
       return
     }
 
     if (e.key === 'Escape') {
-      if (store.state.penState) {
-        store.penCancel()
+      if (s.state.penState) {
+        s.penCancel()
         return
       }
-      store.clearSelection()
-      store.setTool('SELECT')
+      s.clearSelection()
+      s.setTool('SELECT')
     }
   })
 }
diff --git a/src/composables/use-menu.ts b/src/composables/use-menu.ts
index 258e9314c..bae5c3140 100644
--- a/src/composables/use-menu.ts
+++ b/src/composables/use-menu.ts
@@ -1,10 +1,10 @@
 import { onUnmounted } from 'vue'
 
 import { IS_TAURI } from '@/constants'
+import { useEditorStore } from '@/stores/editor'
+import { openFileInNewTab, createTab, closeTab, activeTab } from '@/stores/tabs'
 
-import type { EditorStore } from '@/stores/editor'
-
-export async function openFileDialog(store: EditorStore) {
+export async function openFileDialog() {
   if (IS_TAURI) {
     const { open } = await import('@tauri-apps/plugin-dialog')
     const { readFile } = await import('@tauri-apps/plugin-fs')
@@ -15,7 +15,7 @@ export async function openFileDialog(store: EditorStore) {
     if (!path) return
     const bytes = await readFile(path as string)
     const file = new File([bytes], (path as string).split('/').pop() ?? 'file.fig')
-    await store.openFigFile(file, undefined, path as string)
+    await openFileInNewTab(file, undefined, path as string)
     return
   }
 
@@ -30,7 +30,7 @@ export async function openFileDialog(store: EditorStore) {
         ]
       })
       const file = await handle.getFile()
-      await store.openFigFile(file, handle)
+      await openFileInNewTab(file, handle)
       return
     } catch (e) {
       if ((e as Error).name === 'AbortError') return
@@ -42,29 +42,38 @@ export async function openFileDialog(store: EditorStore) {
   input.accept = '.fig'
   input.addEventListener('change', () => {
     const file = input.files?.[0]
-    if (file) store.openFigFile(file)
+    if (file) openFileInNewTab(file)
   })
   input.click()
 }
 
-const MENU_ACTIONS: Record<string, (store: EditorStore) => void> = {
-  open: (store) => openFileDialog(store),
-  save: (store) => store.saveFigFile(),
-  'save-as': (store) => store.saveFigFileAs(),
-  duplicate: (store) => store.duplicateSelected(),
-  delete: (store) => store.deleteSelected(),
-  group: (store) => store.groupSelected(),
-  ungroup: (store) => store.ungroupSelected(),
-  'create-component': (store) => store.createComponentFromSelection(),
-  'create-component-set': (store) => store.createComponentSetFromComponents(),
-  'detach-instance': (store) => store.detachInstance(),
-  'zoom-fit': (store) => store.zoomToFit(),
-  export: (store) => {
-    if (store.state.selectedIds.size > 0) store.exportSelection(1, 'PNG')
+function getStore() {
+  return useEditorStore()
+}
+
+const MENU_ACTIONS: Record<string, () => void> = {
+  open: () => openFileDialog(),
+  save: () => getStore().saveFigFile(),
+  'save-as': () => getStore().saveFigFileAs(),
+  duplicate: () => getStore().duplicateSelected(),
+  delete: () => getStore().deleteSelected(),
+  group: () => getStore().groupSelected(),
+  ungroup: () => getStore().ungroupSelected(),
+  'create-component': () => getStore().createComponentFromSelection(),
+  'create-component-set': () => getStore().createComponentSetFromComponents(),
+  'detach-instance': () => getStore().detachInstance(),
+  'zoom-fit': () => getStore().zoomToFit(),
+  export: () => {
+    const s = getStore()
+    if (s.state.selectedIds.size > 0) s.exportSelection(1, 'PNG')
+  },
+  'new-tab': () => createTab(),
+  'close-tab': () => {
+    if (activeTab.value) closeTab(activeTab.value.id)
   }
 }
 
-export function useMenu(store: EditorStore) {
+export function useMenu() {
   if (!IS_TAURI) return
 
   let unlisten: (() => void) | undefined
@@ -72,7 +81,7 @@ export function useMenu(store: EditorStore) {
   import('@tauri-apps/api/event').then(({ listen }) => {
     listen<string>('menu-event', (event) => {
       const action = MENU_ACTIONS[event.payload]
-      if (action) action(store)
+      if (action) action()
     }).then((fn) => {
       unlisten = fn
     })
diff --git a/src/stores/editor.ts b/src/stores/editor.ts
index 2bb73f08c..df3ee3a7a 100644
--- a/src/stores/editor.ts
+++ b/src/stores/editor.ts
@@ -618,7 +618,11 @@ export function createEditorStore() {
       if (!path) return
       filePath = path
       fileHandle = null
-      state.documentName = path.split('/').pop()?.replace(/\.fig$/i, '') ?? 'Untitled'
+      state.documentName =
+        path
+          .split('/')
+          .pop()
+          ?.replace(/\.fig$/i, '') ?? 'Untitled'
       await writeFile(data)
       return
     }
@@ -1595,8 +1599,8 @@ export function createEditorStore() {
     parseFigmaClipboard(html).then((figma) => {
       if (figma) {
         const bounds = figmaNodesBounds(figma.nodes)
-        const viewCenterX = (-state.panX + (window.innerWidth / 2)) / state.zoom
-        const viewCenterY = (-state.panY + (window.innerHeight / 2)) / state.zoom
+        const viewCenterX = (-state.panX + window.innerWidth / 2) / state.zoom
+        const viewCenterY = (-state.panY + window.innerHeight / 2) / state.zoom
         const offsetX = bounds ? viewCenterX - (bounds.x + bounds.w / 2) : 0
         const offsetY = bounds ? viewCenterY - (bounds.y + bounds.h / 2) : 0
 
@@ -1965,6 +1969,10 @@ export type EditorStore = ReturnType<typeof createEditorStore>
 
 const storeRef = shallowRef<EditorStore>()
 
+export function setActiveEditorStore(store: EditorStore) {
+  storeRef.value = store
+}
+
 export function provideEditorStore(): EditorStore {
   const store = createEditorStore()
   storeRef.value = store
diff --git a/src/stores/tabs.ts b/src/stores/tabs.ts
new file mode 100644
index 000000000..76f0c2195
--- /dev/null
+++ b/src/stores/tabs.ts
@@ -0,0 +1,108 @@
+import { shallowRef, computed } from 'vue'
+
+import { createEditorStore, setActiveEditorStore } from './editor'
+
+import type { EditorStore } from './editor'
+
+export interface Tab {
+  id: string
+  store: EditorStore
+}
+
+let nextTabId = 1
+
+function generateTabId(): string {
+  return `tab-${nextTabId++}`
+}
+
+const tabsRef = shallowRef<Tab[]>([])
+const activeTabId = shallowRef('')
+
+export const activeTab = computed(() => tabsRef.value.find((t) => t.id === activeTabId.value))
+
+export const allTabs = computed(() =>
+  tabsRef.value.map((t) => ({
+    id: t.id,
+    name: t.store.state.documentName,
+    isActive: t.id === activeTabId.value
+  }))
+)
+
+export function getActiveStore(): EditorStore {
+  const tab = tabsRef.value.find((t) => t.id === activeTabId.value)
+  if (!tab) throw new Error('No active tab')
+  return tab.store
+}
+
+export function createTab(store?: EditorStore): Tab {
+  const s = store ?? createEditorStore()
+  const tab: Tab = { id: generateTabId(), store: s }
+  tabsRef.value = [...tabsRef.value, tab]
+  activateTab(tab)
+  return tab
+}
+
+function activateTab(tab: Tab) {
+  activeTabId.value = tab.id
+  setActiveEditorStore(tab.store)
+  window.__OPEN_PENCIL_STORE__ = tab.store
+}
+
+export function switchTab(tabId: string) {
+  const tab = tabsRef.value.find((t) => t.id === tabId)
+  if (!tab) return
+  activateTab(tab)
+}
+
+export function closeTab(tabId: string) {
+  const idx = tabsRef.value.findIndex((t) => t.id === tabId)
+  if (idx < 0) return
+
+  const wasActive = activeTabId.value === tabId
+  tabsRef.value = tabsRef.value.filter((t) => t.id !== tabId)
+
+  if (tabsRef.value.length === 0) {
+    createTab()
+    return
+  }
+
+  if (wasActive) {
+    const newIdx = Math.min(idx, tabsRef.value.length - 1)
+    activateTab(tabsRef.value[newIdx])
+  }
+}
+
+export async function openFileInNewTab(
+  file: File,
+  handle?: FileSystemFileHandle,
+  path?: string
+): Promise<void> {
+  const current = activeTab.value
+  const isUntouched =
+    current && current.store.state.documentName === 'Untitled' && !current.store.undo.canUndo
+
+  if (isUntouched) {
+    await current.store.openFigFile(file, handle, path)
+  } else {
+    const store = createEditorStore()
+    createTab(store)
+    await store.openFigFile(file, handle, path)
+  }
+}
+
+export function tabCount(): number {
+  return tabsRef.value.length
+}
+
+export function useTabsStore() {
+  return {
+    tabs: allTabs,
+    activeTabId,
+    createTab,
+    switchTab,
+    closeTab,
+    openFileInNewTab,
+    getActiveStore,
+    tabCount
+  }
+}
diff --git a/src/views/EditorView.vue b/src/views/EditorView.vue
index badbc35f3..97dc48f5f 100644
--- a/src/views/EditorView.vue
+++ b/src/views/EditorView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide } from 'vue'
+import { computed, provide } from 'vue'
 import { useEventListener, useUrlSearchParams } from '@vueuse/core'
 import { useRoute, useRouter } from 'vue-router'
 import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
@@ -9,24 +9,26 @@ import { useMenu } from '@/composables/use-menu'
 import { useCollab, COLLAB_KEY } from '@/composables/use-collab'
 import { toast } from '@/composables/use-toast'
 import { createDemoShapes } from '@/demo'
-import { provideEditorStore } from '@/stores/editor'
+import { useEditorStore } from '@/stores/editor'
+import { createTab, activeTab } from '@/stores/tabs'
 
 import CollabPanel from '@/components/CollabPanel.vue'
 import EditorCanvas from '@/components/EditorCanvas.vue'
 import LayersPanel from '@/components/LayersPanel.vue'
 import PropertiesPanel from '@/components/PropertiesPanel.vue'
 import SafariBanner from '@/components/SafariBanner.vue'
+import TabBar from '@/components/TabBar.vue'
 import Toolbar from '@/components/Toolbar.vue'
 
 const route = useRoute()
 const router = useRouter()
 
-const store = provideEditorStore()
-useKeyboard(store)
-useMenu(store)
-const collab = useCollab(store)
+const firstTab = createTab()
+const store = computed(() => useEditorStore())
+useKeyboard()
+useMenu()
+const collab = useCollab(firstTab.store)
 provide(COLLAB_KEY, collab)
-window.__OPEN_PENCIL_STORE__ = store
 
 useEventListener(
   document,
@@ -37,12 +39,10 @@ useEventListener(
   { passive: false }
 )
 
-
-
 const params = useUrlSearchParams('history')
 const showChrome = !('no-chrome' in params)
 if (!('test' in params)) {
-  createDemoShapes(store)
+  createDemoShapes(firstTab.store)
 }
 
 const pendingRoomId = (route.params.roomId as string) || null
@@ -68,8 +68,10 @@ function onDisconnect() {
 <template>
   <div class="flex h-screen w-screen flex-col">
     <SafariBanner />
+    <TabBar />
     <SplitterGroup
       v-if="showChrome && store.state.showUI"
+      :key="activeTab?.id"
       direction="horizontal"
       class="flex-1 overflow-hidden"
       auto-save-id="editor-layout"
@@ -108,7 +110,11 @@ function onDisconnect() {
         <PropertiesPanel />
       </SplitterPanel>
     </SplitterGroup>
-    <div v-else-if="showChrome" class="flex flex-1 overflow-hidden">
+    <div
+      v-else-if="showChrome"
+      :key="'collapsed-' + activeTab?.id"
+      class="flex flex-1 overflow-hidden"
+    >
       <div class="relative flex min-w-0 flex-1">
         <EditorCanvas />
         <Toolbar />
@@ -127,7 +133,7 @@ function onDisconnect() {
         </div>
       </div>
     </div>
-    <div v-else class="flex flex-1 overflow-hidden">
+    <div v-else :key="'bare-' + activeTab?.id" class="flex flex-1 overflow-hidden">
       <div class="relative flex min-w-0 flex-1">
         <EditorCanvas />
       </div>

From b3438cd272631e0c06b1ea2b137165e5030da9d0 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 2 Mar 2026 18:11:07 +0300
Subject: [PATCH 2/9] Fix active tab text invisible against same-color
 background

---
 src/components/TabBar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
index 3a27c2393..7b4f4cace 100644
--- a/src/components/TabBar.vue
+++ b/src/components/TabBar.vue
@@ -19,7 +19,7 @@ function onClose(e: MouseEvent, tabId: string) {
 <template>
   <div
     v-if="tabs.length > 1"
-    class="flex h-9 shrink-0 items-end gap-0 overflow-x-auto border-b border-border bg-panel scrollbar-none"
+    class="flex h-9 shrink-0 items-end gap-0 overflow-x-auto border-b border-border bg-[#1e1e1e] scrollbar-none"
   >
     <div
       v-for="tab in tabs"
@@ -27,8 +27,8 @@ function onClose(e: MouseEvent, tabId: string) {
       class="group/tab flex h-full max-w-48 min-w-0 cursor-pointer items-center gap-1.5 border-r border-border px-3 text-xs transition-colors select-none"
       :class="
         tab.isActive
-          ? 'bg-surface text-surface'
-          : 'bg-panel text-muted hover:bg-hover hover:text-surface'
+          ? 'bg-panel text-surface'
+          : 'text-muted hover:text-surface'
       "
       @click="switchTab(tab.id)"
       @mousedown="onMiddleClick($event, tab.id)"
@@ -45,7 +45,7 @@ function onClose(e: MouseEvent, tabId: string) {
       </button>
     </div>
     <button
-      class="flex size-9 shrink-0 cursor-pointer items-center justify-center text-muted transition-colors hover:bg-hover hover:text-surface"
+      class="flex size-9 shrink-0 cursor-pointer items-center justify-center text-muted transition-colors hover:text-surface"
       title="New tab"
       @click="createTab()"
     >

From 1f652b5e908228861a7bba646fb2d0711ca92325 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 2 Mar 2026 18:24:47 +0300
Subject: [PATCH 3/9] Use reka-ui Tabs for tab bar accessibility

Arrow key navigation, role=tablist/tab, aria-selected,
focus management, and screen reader support.
---
 src/components/TabBar.vue | 62 +++++++++++++++++++++++----------------
 1 file changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
index 7b4f4cace..697d5257f 100644
--- a/src/components/TabBar.vue
+++ b/src/components/TabBar.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
+
 import { useTabsStore, createTab } from '@/stores/tabs'
 
-const { tabs, switchTab, closeTab } = useTabsStore()
+const { tabs, activeTabId, switchTab, closeTab } = useTabsStore()
+
+const modelValue = computed({
+  get: () => activeTabId.value,
+  set: (id: string) => switchTab(id)
+})
 
 function onMiddleClick(e: MouseEvent, tabId: string) {
   if (e.button === 1) {
@@ -17,39 +25,41 @@ function onClose(e: MouseEvent, tabId: string) {
 </script>
 
 <template>
-  <div
+  <TabsRoot
     v-if="tabs.length > 1"
-    class="flex h-9 shrink-0 items-end gap-0 overflow-x-auto border-b border-border bg-[#1e1e1e] scrollbar-none"
+    v-model="modelValue"
+    activation-mode="automatic"
+    class="flex h-9 shrink-0 items-end overflow-x-auto border-b border-border bg-[#1e1e1e] scrollbar-none"
   >
-    <div
-      v-for="tab in tabs"
-      :key="tab.id"
-      class="group/tab flex h-full max-w-48 min-w-0 cursor-pointer items-center gap-1.5 border-r border-border px-3 text-xs transition-colors select-none"
-      :class="
-        tab.isActive
-          ? 'bg-panel text-surface'
-          : 'text-muted hover:text-surface'
-      "
-      @click="switchTab(tab.id)"
-      @mousedown="onMiddleClick($event, tab.id)"
-    >
-      <icon-lucide-file class="size-3 shrink-0 opacity-50" />
-      <span class="min-w-0 flex-1 truncate">{{ tab.name }}</span>
-      <button
-        class="flex size-4 shrink-0 cursor-pointer items-center justify-center rounded opacity-0 transition-opacity hover:bg-hover group-hover/tab:opacity-100"
-        :class="tab.isActive ? 'opacity-100' : ''"
-        title="Close tab"
-        @click="onClose($event, tab.id)"
+    <TabsList class="flex h-full items-end">
+      <TabsTrigger
+        v-for="tab in tabs"
+        :key="tab.id"
+        :value="tab.id"
+        class="group/tab flex h-full max-w-48 min-w-0 cursor-pointer items-center gap-1.5 border-r border-border px-3 text-xs transition-colors select-none outline-none focus-visible:ring-1 focus-visible:ring-accent data-[state=active]:bg-panel data-[state=active]:text-surface data-[state=inactive]:text-muted data-[state=inactive]:hover:text-surface"
+        @mousedown="onMiddleClick($event, tab.id)"
       >
-        <icon-lucide-x class="size-3" />
-      </button>
-    </div>
+        <icon-lucide-file class="size-3 shrink-0 opacity-50" />
+        <span class="min-w-0 flex-1 truncate">{{ tab.name }}</span>
+        <button
+          class="flex size-4 shrink-0 cursor-pointer items-center justify-center rounded opacity-0 transition-opacity hover:bg-hover group-hover/tab:opacity-100 data-[state=active]:opacity-100"
+          :class="tab.isActive ? 'opacity-100' : ''"
+          :title="`Close ${tab.name}`"
+          :aria-label="`Close ${tab.name}`"
+          tabindex="-1"
+          @click="onClose($event, tab.id)"
+        >
+          <icon-lucide-x class="size-3" />
+        </button>
+      </TabsTrigger>
+    </TabsList>
     <button
       class="flex size-9 shrink-0 cursor-pointer items-center justify-center text-muted transition-colors hover:text-surface"
       title="New tab"
+      aria-label="New tab"
       @click="createTab()"
     >
       <icon-lucide-plus class="size-3.5" />
     </button>
-  </div>
+  </TabsRoot>
 </template>

From a6634b954309e9b6f97b0f9a71919d4f5908669f Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 2 Mar 2026 18:24:54 +0300
Subject: [PATCH 4/9] Wire native Tauri menu to tab actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Map File → New to createTab() and File → Close Tab to closeTab().
Rename menu labels from 'New File'/'Close Window' to 'New'/'Close Tab'.
---
 desktop/src/lib.rs          | 4 ++--
 src/composables/use-menu.ts | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/desktop/src/lib.rs b/desktop/src/lib.rs
index df67437d4..3e2984c4b 100644
--- a/desktop/src/lib.rs
+++ b/desktop/src/lib.rs
@@ -243,7 +243,7 @@ pub fn run() {
             #[allow(unused_mut)]
             let mut file_menu_builder = SubmenuBuilder::new(app, "File")
                 .item(
-                    &MenuItemBuilder::new("New File")
+                    &MenuItemBuilder::new("New")
                         .id("new")
                         .accelerator("CmdOrCtrl+N")
                         .build(app)?,
@@ -276,7 +276,7 @@ pub fn run() {
                 )
                 .separator()
                 .item(
-                    &MenuItemBuilder::new("Close Window")
+                    &MenuItemBuilder::new("Close Tab")
                         .id("close")
                         .accelerator("CmdOrCtrl+W")
                         .build(app)?,
diff --git a/src/composables/use-menu.ts b/src/composables/use-menu.ts
index bae5c3140..c1b360825 100644
--- a/src/composables/use-menu.ts
+++ b/src/composables/use-menu.ts
@@ -52,7 +52,11 @@ function getStore() {
 }
 
 const MENU_ACTIONS: Record<string, () => void> = {
+  new: () => createTab(),
   open: () => openFileDialog(),
+  close: () => {
+    if (activeTab.value) closeTab(activeTab.value.id)
+  },
   save: () => getStore().saveFigFile(),
   'save-as': () => getStore().saveFigFileAs(),
   duplicate: () => getStore().duplicateSelected(),
@@ -66,10 +70,6 @@ const MENU_ACTIONS: Record<string, () => void> = {
   export: () => {
     const s = getStore()
     if (s.state.selectedIds.size > 0) s.exportSelection(1, 'PNG')
-  },
-  'new-tab': () => createTab(),
-  'close-tab': () => {
-    if (activeTab.value) closeTab(activeTab.value.id)
   }
 }
 

From af9b9fd0faa655e6ae36c6c78c1bcbbaec01cbf6 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 2 Mar 2026 18:28:36 +0300
Subject: [PATCH 5/9] Replace store thunks with a late-binding proxy

useEditorStore() now returns a Proxy that delegates to the current
active store at access time. No more store() wrapper functions,
try/catch guards, or passing stores through function parameters.
---
 src/components/PropertiesPanel.vue |  2 +-
 src/composables/use-chat.ts        | 16 +-----
 src/composables/use-keyboard.ts    | 78 ++++++++++++++----------------
 src/composables/use-menu.ts        | 27 +++++------
 src/stores/editor.ts               | 18 ++++---
 src/views/EditorView.vue           |  4 +-
 6 files changed, 65 insertions(+), 80 deletions(-)

diff --git a/src/components/PropertiesPanel.vue b/src/components/PropertiesPanel.vue
index 4b5adabe1..a2353beff 100644
--- a/src/components/PropertiesPanel.vue
+++ b/src/components/PropertiesPanel.vue
@@ -9,7 +9,7 @@ import CodePanel from './CodePanel.vue'
 import DesignPanel from './DesignPanel.vue'
 
 const store = useEditorStore()
-const { activeTab } = useAIChat(store)
+const { activeTab } = useAIChat()
 </script>
 
 <template>
diff --git a/src/composables/use-chat.ts b/src/composables/use-chat.ts
index c4a151225..2f30f0ac8 100644
--- a/src/composables/use-chat.ts
+++ b/src/composables/use-chat.ts
@@ -8,7 +8,6 @@ import { computed, ref, watch } from 'vue'
 import { createAITools } from '@/ai/tools'
 import { useEditorStore } from '@/stores/editor'
 
-import type { EditorStore } from '@/stores/editor'
 import type { UIMessage } from 'ai'
 
 export { AI_MODELS as MODELS } from '@open-pencil/core'
@@ -34,8 +33,6 @@ const apiKey = ref(localStorage.getItem(API_KEY_STORAGE) ?? '')
 const modelId = ref(localStorage.getItem(MODEL_STORAGE) ?? DEFAULT_AI_MODEL)
 const activeTab = ref<'design' | 'ai'>('design')
 
-let editorStore: EditorStore | null = null
-
 watch(apiKey, (key) => {
   if (key) {
     localStorage.setItem(API_KEY_STORAGE, key)
@@ -66,13 +63,7 @@ function createTransport() {
     }
   })
 
-  let currentStore: EditorStore | null = editorStore
-  try {
-    currentStore = useEditorStore()
-  } catch {
-    // store not yet available
-  }
-  const tools = currentStore ? createAITools(currentStore) : {}
+  const tools = createAITools(useEditorStore())
 
   const agent = new ToolLoopAgent({
     model: openrouter(modelId.value),
@@ -103,10 +94,7 @@ if (typeof window !== 'undefined') {
   }
 }
 
-export function useAIChat(store?: EditorStore) {
-  if (store) {
-    editorStore = store
-  }
+export function useAIChat() {
   return {
     apiKey,
     modelId,
diff --git a/src/composables/use-keyboard.ts b/src/composables/use-keyboard.ts
index 6ab4cacf9..3d2262d2c 100644
--- a/src/composables/use-keyboard.ts
+++ b/src/composables/use-keyboard.ts
@@ -12,50 +12,46 @@ function isEditing(e: Event) {
 
 export function useKeyboard() {
   const { activeTab } = useAIChat()
-
-  function store() {
-    return useEditorStore()
-  }
+  const store = useEditorStore()
 
   useEventListener(window, 'copy', (e: ClipboardEvent) => {
     if (isEditing(e)) return
     e.preventDefault()
-    if (e.clipboardData) store().writeCopyData(e.clipboardData)
+    if (e.clipboardData) store.writeCopyData(e.clipboardData)
   })
 
   useEventListener(window, 'cut', (e: ClipboardEvent) => {
     if (isEditing(e)) return
     e.preventDefault()
-    if (e.clipboardData) store().writeCopyData(e.clipboardData)
-    store().deleteSelected()
+    if (e.clipboardData) store.writeCopyData(e.clipboardData)
+    store.deleteSelected()
   })
 
   useEventListener(window, 'paste', (e: ClipboardEvent) => {
     if (isEditing(e)) return
     e.preventDefault()
     const html = e.clipboardData?.getData('text/html') ?? ''
-    if (html) store().pasteFromHTML(html)
+    if (html) store.pasteFromHTML(html)
   })
 
   useEventListener(window, 'keydown', (e: KeyboardEvent) => {
     if (isEditing(e)) return
-    const s = store()
 
     const tool = TOOL_SHORTCUTS[e.key.toLowerCase()]
     if (tool) {
-      s.setTool(tool)
+      store.setTool(tool)
       return
     }
 
     if ((e.metaKey || e.ctrlKey) && e.altKey) {
       if (e.code === 'KeyK') {
         e.preventDefault()
-        s.createComponentFromSelection()
+        store.createComponentFromSelection()
         return
       }
       if (e.code === 'KeyB') {
         e.preventDefault()
-        s.detachInstance()
+        store.detachInstance()
         return
       }
     }
@@ -63,23 +59,23 @@ export function useKeyboard() {
     if ((e.metaKey || e.ctrlKey) && e.shiftKey) {
       if (e.code === 'KeyK') {
         e.preventDefault()
-        s.createComponentSetFromComponents()
+        store.createComponentSetFromComponents()
         return
       }
       if (e.code === 'KeyH') {
         e.preventDefault()
-        s.toggleVisibility()
+        store.toggleVisibility()
         return
       }
       if (e.code === 'KeyL') {
         e.preventDefault()
-        s.toggleLock()
+        store.toggleLock()
         return
       }
       if (e.code === 'KeyE') {
         e.preventDefault()
-        if (s.state.selectedIds.size > 0) {
-          s.exportSelection(1, 'PNG')
+        if (store.state.selectedIds.size > 0) {
+          store.exportSelection(1, 'PNG')
         }
         return
       }
@@ -88,7 +84,7 @@ export function useKeyboard() {
     if (e.metaKey || e.ctrlKey) {
       if (e.code === 'Backslash') {
         e.preventDefault()
-        s.state.showUI = !s.state.showUI
+        store.state.showUI = !store.state.showUI
         return
       }
       if (e.code === 'KeyJ') {
@@ -108,76 +104,76 @@ export function useKeyboard() {
       }
       if (e.key === 'z' && !e.shiftKey) {
         e.preventDefault()
-        s.undoAction()
+        store.undoAction()
       } else if ((e.key === 'z' && e.shiftKey) || e.key === 'y') {
         e.preventDefault()
-        s.redoAction()
+        store.redoAction()
       } else if (e.key === '0') {
         e.preventDefault()
-        s.zoomToFit()
+        store.zoomToFit()
       } else if (e.key === 'd') {
         e.preventDefault()
-        s.duplicateSelected()
+        store.duplicateSelected()
       } else if (e.key === 'a') {
         e.preventDefault()
-        s.selectAll()
+        store.selectAll()
       } else if (e.key === 's' && e.shiftKey) {
         e.preventDefault()
-        s.saveFigFileAs()
+        store.saveFigFileAs()
       } else if (e.key === 's') {
         e.preventDefault()
-        s.saveFigFile()
+        store.saveFigFile()
       } else if (e.key === 'o') {
         e.preventDefault()
         openFileDialog()
       } else if (e.key === 'g' && !e.shiftKey) {
         e.preventDefault()
-        s.groupSelected()
+        store.groupSelected()
       } else if (e.key === 'g' && e.shiftKey) {
         e.preventDefault()
-        s.ungroupSelected()
+        store.ungroupSelected()
       }
     }
 
     if (e.shiftKey && e.key === 'A') {
       e.preventDefault()
-      const node = s.selectedNode.value
-      if (node && node.type === 'FRAME' && s.selectedNodes.value.length === 1) {
-        s.setLayoutMode(node.id, node.layoutMode === 'NONE' ? 'VERTICAL' : 'NONE')
-      } else if (s.selectedNodes.value.length > 0) {
-        s.wrapInAutoLayout()
+      const node = store.selectedNode.value
+      if (node && node.type === 'FRAME' && store.selectedNodes.value.length === 1) {
+        store.setLayoutMode(node.id, node.layoutMode === 'NONE' ? 'VERTICAL' : 'NONE')
+      } else if (store.selectedNodes.value.length > 0) {
+        store.wrapInAutoLayout()
       }
       return
     }
 
     if (e.key === ']') {
       e.preventDefault()
-      s.bringToFront()
+      store.bringToFront()
       return
     }
     if (e.key === '[') {
       e.preventDefault()
-      s.sendToBack()
+      store.sendToBack()
       return
     }
 
     if (e.key === 'Backspace' || e.key === 'Delete') {
-      s.deleteSelected()
+      store.deleteSelected()
     }
 
-    if (e.key === 'Enter' && s.state.penState) {
+    if (e.key === 'Enter' && store.state.penState) {
       e.preventDefault()
-      s.penCommit(false)
+      store.penCommit(false)
       return
     }
 
     if (e.key === 'Escape') {
-      if (s.state.penState) {
-        s.penCancel()
+      if (store.state.penState) {
+        store.penCancel()
         return
       }
-      s.clearSelection()
-      s.setTool('SELECT')
+      store.clearSelection()
+      store.setTool('SELECT')
     }
   })
 }
diff --git a/src/composables/use-menu.ts b/src/composables/use-menu.ts
index c1b360825..1ff3715b7 100644
--- a/src/composables/use-menu.ts
+++ b/src/composables/use-menu.ts
@@ -47,9 +47,7 @@ export async function openFileDialog() {
   input.click()
 }
 
-function getStore() {
-  return useEditorStore()
-}
+const store = useEditorStore()
 
 const MENU_ACTIONS: Record<string, () => void> = {
   new: () => createTab(),
@@ -57,19 +55,18 @@ const MENU_ACTIONS: Record<string, () => void> = {
   close: () => {
     if (activeTab.value) closeTab(activeTab.value.id)
   },
-  save: () => getStore().saveFigFile(),
-  'save-as': () => getStore().saveFigFileAs(),
-  duplicate: () => getStore().duplicateSelected(),
-  delete: () => getStore().deleteSelected(),
-  group: () => getStore().groupSelected(),
-  ungroup: () => getStore().ungroupSelected(),
-  'create-component': () => getStore().createComponentFromSelection(),
-  'create-component-set': () => getStore().createComponentSetFromComponents(),
-  'detach-instance': () => getStore().detachInstance(),
-  'zoom-fit': () => getStore().zoomToFit(),
+  save: () => store.saveFigFile(),
+  'save-as': () => store.saveFigFileAs(),
+  duplicate: () => store.duplicateSelected(),
+  delete: () => store.deleteSelected(),
+  group: () => store.groupSelected(),
+  ungroup: () => store.ungroupSelected(),
+  'create-component': () => store.createComponentFromSelection(),
+  'create-component-set': () => store.createComponentSetFromComponents(),
+  'detach-instance': () => store.detachInstance(),
+  'zoom-fit': () => store.zoomToFit(),
   export: () => {
-    const s = getStore()
-    if (s.state.selectedIds.size > 0) s.exportSelection(1, 'PNG')
+    if (store.state.selectedIds.size > 0) store.exportSelection(1, 'PNG')
   }
 }
 
diff --git a/src/stores/editor.ts b/src/stores/editor.ts
index df3ee3a7a..0df7fc413 100644
--- a/src/stores/editor.ts
+++ b/src/stores/editor.ts
@@ -1973,13 +1973,17 @@ export function setActiveEditorStore(store: EditorStore) {
   storeRef.value = store
 }
 
-export function provideEditorStore(): EditorStore {
-  const store = createEditorStore()
-  storeRef.value = store
-  return store
-}
-
-export function useEditorStore(): EditorStore {
+export function getActiveEditorStore(): EditorStore {
   if (!storeRef.value) throw new Error('Editor store not provided')
   return storeRef.value
 }
+
+const storeProxy = new Proxy({} as EditorStore, {
+  get(_, prop) {
+    return Reflect.get(getActiveEditorStore(), prop)
+  }
+})
+
+export function useEditorStore(): EditorStore {
+  return storeProxy
+}
diff --git a/src/views/EditorView.vue b/src/views/EditorView.vue
index 97dc48f5f..556601526 100644
--- a/src/views/EditorView.vue
+++ b/src/views/EditorView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { provide } from 'vue'
 import { useEventListener, useUrlSearchParams } from '@vueuse/core'
 import { useRoute, useRouter } from 'vue-router'
 import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
@@ -24,7 +24,7 @@ const route = useRoute()
 const router = useRouter()
 
 const firstTab = createTab()
-const store = computed(() => useEditorStore())
+const store = useEditorStore()
 useKeyboard()
 useMenu()
 const collab = useCollab(firstTab.store)

From ce55af617190c7e9ef9035257ab5bc8b273557e3 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 2 Mar 2026 18:45:50 +0300
Subject: [PATCH 6/9] Fix pasteID int overflow and make error toasts copyable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use Int32Array instead of Uint32Array for Kiwi pasteID (signed int field)
- Error toasts: don't auto-dismiss, show copy button, text is selectable
- Add clipboard roundtrip tests (encode → decode → verify)
---
 packages/core/src/clipboard.ts |   2 +-
 src/components/AppToast.vue    |  32 +++++++--
 tests/engine/clipboard.test.ts | 116 ++++++++++++++++++++++++++++++++-
 3 files changed, 142 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/clipboard.ts b/packages/core/src/clipboard.ts
index 368601f84..554f39106 100644
--- a/packages/core/src/clipboard.ts
+++ b/packages/core/src/clipboard.ts
@@ -420,7 +420,7 @@ export function buildFigmaClipboardHTML(nodes: SceneNode[], graph: SceneGraph):
     type: 'NODE_CHANGES',
     sessionID: 0,
     ackID: 0,
-    pasteID: crypto.getRandomValues(new Uint32Array(1))[0],
+    pasteID: crypto.getRandomValues(new Int32Array(1))[0],
     pasteFileKey: 'openpencil',
     nodeChanges
   }
diff --git a/src/components/AppToast.vue b/src/components/AppToast.vue
index 407e07a6f..87275f69e 100644
--- a/src/components/AppToast.vue
+++ b/src/components/AppToast.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import { ToastProvider, ToastRoot, ToastDescription, ToastViewport } from 'reka-ui'
+import { ToastProvider, ToastRoot, ToastDescription, ToastViewport, ToastClose } from 'reka-ui'
+
+import { useClipboard } from '@vueuse/core'
 
 import { toast } from '@/composables/use-toast'
+
+const { copy, copied } = useClipboard({ copiedDuring: 1500 })
 </script>
 
 <template>
-  <ToastProvider :duration="toast.TOAST_DURATION" swipe-direction="up">
+  <ToastProvider swipe-direction="up">
     <ToastRoot
       v-for="t in toast.toasts.value"
       :key="t.id"
-      class="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-white shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in data-[state=open]:slide-in-from-top-1 data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-1 data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)] data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform"
+      :duration="t.variant === 'error' ? 0 : toast.TOAST_DURATION"
+      class="flex max-w-sm items-start gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-white shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in data-[state=open]:slide-in-from-top-1 data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-1 data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)] data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform"
       :class="t.variant === 'error' ? 'bg-red-600' : 'bg-blue-600'"
       @update:open="
         (open) => {
@@ -17,9 +22,24 @@ import { toast } from '@/composables/use-toast'
         }
       "
     >
-      <icon-lucide-check v-if="t.variant === 'default'" class="size-3 shrink-0" />
-      <icon-lucide-alert-triangle v-else class="size-3 shrink-0" />
-      <ToastDescription>{{ t.message }}</ToastDescription>
+      <icon-lucide-check v-if="t.variant === 'default'" class="mt-0.5 size-3 shrink-0" />
+      <icon-lucide-alert-triangle v-else class="mt-0.5 size-3 shrink-0" />
+      <ToastDescription class="min-w-0 flex-1 select-text">{{ t.message }}</ToastDescription>
+      <button
+        v-if="t.variant === 'error'"
+        class="mt-0.5 shrink-0 cursor-pointer rounded p-0.5 opacity-70 hover:opacity-100"
+        :title="copied ? 'Copied!' : 'Copy error'"
+        @click="copy(t.message)"
+      >
+        <icon-lucide-check v-if="copied" class="size-3" />
+        <icon-lucide-copy v-else class="size-3" />
+      </button>
+      <ToastClose
+        v-if="t.variant === 'error'"
+        class="mt-0.5 shrink-0 cursor-pointer rounded p-0.5 opacity-70 hover:opacity-100"
+      >
+        <icon-lucide-x class="size-3" />
+      </ToastClose>
     </ToastRoot>
 
     <ToastViewport
diff --git a/tests/engine/clipboard.test.ts b/tests/engine/clipboard.test.ts
index 89187b347..036fa457c 100644
--- a/tests/engine/clipboard.test.ts
+++ b/tests/engine/clipboard.test.ts
@@ -1,10 +1,12 @@
-import { describe, expect, it } from 'bun:test'
+import { beforeAll, describe, expect, it } from 'bun:test'
 
 import {
   parseFigmaClipboard,
   importClipboardNodes,
   figmaNodesBounds,
+  buildFigmaClipboardHTML,
 } from '../../packages/core/src/clipboard'
+import { initCodec } from '../../packages/core/src/kiwi/codec'
 import { SceneGraph, type SceneNode } from '../../packages/core/src/scene-graph'
 
 function makeClipboardHtml(nodeChanges: unknown[], meta = { fileKey: 'test', pasteID: 1, dataType: 'scene' }) {
@@ -334,3 +336,115 @@ describe('figmaNodesBounds', () => {
     expect(figmaNodesBounds(nodes)).toBeNull()
   })
 })
+
+describe('buildFigmaClipboardHTML', () => {
+  beforeAll(async () => {
+    await initCodec()
+  })
+
+  it('encodes a simple frame without throwing', () => {
+    const graph = new SceneGraph()
+    const page = graph.getPages()[0]
+    const frame = graph.createNode('FRAME', page.id, {
+      name: 'Card',
+      x: 0, y: 0, width: 300, height: 200,
+      fills: [{ type: 'SOLID', color: { r: 1, g: 1, b: 1, a: 1 }, opacity: 1, visible: true }],
+    })
+
+    const html = buildFigmaClipboardHTML([frame], graph)
+    expect(html).toContain('figmeta')
+    expect(html).toContain('figma')
+  })
+
+  it('encodes text nodes with style runs', () => {
+    const graph = new SceneGraph()
+    const page = graph.getPages()[0]
+    const text = graph.createNode('TEXT', page.id, {
+      name: 'Styled',
+      x: 0, y: 0, width: 200, height: 24,
+      text: 'Hello World',
+      fontFamily: 'Inter',
+      fontWeight: 400,
+      fontSize: 16,
+      styleRuns: [
+        { start: 0, length: 5, style: { fontWeight: 700 } },
+        { start: 6, length: 5, style: { fontWeight: 400, italic: true } },
+      ],
+    })
+
+    const html = buildFigmaClipboardHTML([text], graph)
+    expect(html).toContain('figmeta')
+  })
+
+  it('encodes auto-layout frames', () => {
+    const graph = new SceneGraph()
+    const page = graph.getPages()[0]
+    const frame = graph.createNode('FRAME', page.id, {
+      name: 'Row',
+      x: 0, y: 0, width: 400, height: 100,
+      layoutMode: 'HORIZONTAL',
+      itemSpacing: 16,
+      paddingTop: 12, paddingRight: 12, paddingBottom: 12, paddingLeft: 12,
+      primaryAxisSizing: 'HUG',
+      counterAxisSizing: 'FIXED',
+    })
+    graph.createNode('RECTANGLE', frame.id, {
+      name: 'Child',
+      x: 0, y: 0, width: 50, height: 50,
+    })
+
+    const html = buildFigmaClipboardHTML([frame], graph)
+    expect(html).toContain('figmeta')
+  })
+
+  it('roundtrips: encode then decode back', async () => {
+    const graph = new SceneGraph()
+    const page = graph.getPages()[0]
+    const frame = graph.createNode('FRAME', page.id, {
+      name: 'Analytics Overview',
+      x: 0, y: 0, width: 300, height: 200,
+      layoutMode: 'VERTICAL',
+      itemSpacing: 8,
+      paddingTop: 20, paddingRight: 20, paddingBottom: 20, paddingLeft: 20,
+      fills: [{ type: 'SOLID', color: { r: 1, g: 1, b: 1, a: 1 }, opacity: 1, visible: true }],
+      cornerRadius: 12,
+    })
+    graph.createNode('TEXT', frame.id, {
+      name: 'Title',
+      x: 0, y: 0, width: 260, height: 24,
+      text: 'Analytics Overview',
+      fontFamily: 'Inter',
+      fontWeight: 600,
+      fontSize: 18,
+    })
+    graph.createNode('TEXT', frame.id, {
+      name: 'Subtitle',
+      x: 0, y: 0, width: 260, height: 40,
+      text: 'Track your key metrics and performance indicators in real time.',
+      fontFamily: 'Inter',
+      fontWeight: 400,
+      fontSize: 14,
+    })
+
+    const html = buildFigmaClipboardHTML([frame], graph)
+    expect(html).not.toBeNull()
+
+    const parsed = await parseFigmaClipboard(html!)
+    expect(parsed).not.toBeNull()
+    expect(parsed!.nodes.length).toBeGreaterThan(0)
+
+    const graph2 = new SceneGraph()
+    const page2 = graph2.getPages()[0]
+    const created = importClipboardNodes(parsed!.nodes, graph2, page2.id)
+    expect(created).toHaveLength(1)
+
+    const imported = graph2.getNode(created[0])!
+    expect(imported.name).toBe('Analytics Overview')
+    expect(imported.cornerRadius).toBe(12)
+
+    const children = graph2.getChildren(imported.id)
+    expect(children).toHaveLength(2)
+    expect(children[0].text).toBe('Analytics Overview')
+    expect(children[1].text).toContain('Track your key metrics')
+  })
+})

From a3236a08a07cf3eb827e0785f3e0db82e7bd3c70 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 2 Mar 2026 18:56:59 +0300
Subject: [PATCH 7/9] Update changelog with multi-file tabs and clipboard fix

---
 CHANGELOG.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0c0fa4ce5..e0517e351 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,23 @@
 # Changelog
 
+## Unreleased
+
+### Features
+
+- Multi-file tabs — open multiple documents in tabs within a single window
+- Tab bar with close buttons, middle-click to close, and new tab (+) button
+- Keyboard shortcuts: ⌘N/⌘T new tab, ⌘W close tab, ⌘O opens in new tab
+- Native Tauri menu: File → New and File → Close Tab wired to tab actions
+
+### Fixes
+
+- Fix clipboard "Outside int range" error — `pasteID` used unsigned int exceeding Kiwi's signed 32-bit field
+- Error toasts are now sticky (don't auto-dismiss), with selectable text, copy button, and close button
+
+### Tests
+
+- Clipboard roundtrip tests: encode to Figma Kiwi binary → decode → verify
+
 ## [0.4.2] (2026-03-02)
 
 ### Fixes

From ef78ffd2e4d45d558693aeb12e04100b34e26a43 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 2 Mar 2026 19:33:00 +0300
Subject: [PATCH 8/9] Render text from SkPicture cache when fonts are missing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On copy: serialize each text node's paragraph into an SkPicture and
embed the bytes (base64) in the OpenPencil clipboard payload.

On paste: if the font isn't available, render from the cached SkPicture
instead of the broken fallback. Text looks pixel-perfect without the
font installed — same behavior as Figma.

Missing font indicator:
- Orange ⚠ badge on canvas over text nodes with unavailable fonts
- Amber warning banner in the Typography panel listing missing families
- isFontLoaded() check in @open-pencil/core for querying font status
---
 packages/core/src/clipboard.ts                | 42 ++++++++++++++---
 packages/core/src/fonts.ts                    |  4 ++
 packages/core/src/index.ts                    |  4 +-
 packages/core/src/renderer.ts                 | 47 +++++++++++++++++--
 packages/core/src/scene-graph.ts              |  3 ++
 .../properties/TypographySection.vue          | 11 ++++-
 src/composables/use-font-status.ts            | 23 +++++++++
 src/stores/editor.ts                          |  5 +-
 8 files changed, 125 insertions(+), 14 deletions(-)
 create mode 100644 src/composables/use-font-status.ts

diff --git a/packages/core/src/clipboard.ts b/packages/core/src/clipboard.ts
index 554f39106..90813bd17 100644
--- a/packages/core/src/clipboard.ts
+++ b/packages/core/src/clipboard.ts
@@ -458,6 +458,7 @@ export function parseOpenPencilClipboard(
   try {
     const decoded = JSON.parse(atob(match[1]))
     if (decoded.format === 'openpencil/v1' && Array.isArray(decoded.nodes)) {
+      restoreTextPictures(decoded.nodes)
       return decoded.nodes
     }
   } catch {
@@ -466,23 +467,50 @@ export function parseOpenPencilClipboard(
   return null
 }
 
-export function buildOpenPencilClipboardHTML(nodes: SceneNode[], graph: SceneGraph): string {
+function restoreTextPictures(nodes: Array<Record<string, unknown>>): void {
+  for (const node of nodes) {
+    if (typeof node.textPicture === 'string') {
+      node.textPicture = base64ToBinary(node.textPicture)
+    }
+    if (Array.isArray(node.children)) {
+      restoreTextPictures(node.children)
+    }
+  }
+}
+
+export type TextPictureBuilder = (node: SceneNode) => Uint8Array | null
+
+export function buildOpenPencilClipboardHTML(
+  nodes: SceneNode[],
+  graph: SceneGraph,
+  textPictureBuilder?: TextPictureBuilder
+): string {
   const data = {
     format: 'openpencil/v1',
-    nodes: collectNodeTree(nodes, graph)
+    nodes: collectNodeTree(nodes, graph, textPictureBuilder)
   }
   return `<!--(openpencil)${btoa(JSON.stringify(data))}(/openpencil)-->`
 }
 
 function collectNodeTree(
   nodes: SceneNode[],
-  graph: SceneGraph
-): Array<SceneNode & { children?: SceneNode[] }> {
+  graph: SceneGraph,
+  textPictureBuilder?: TextPictureBuilder
+): Array<Record<string, unknown>> {
   return nodes.map((node) => {
     const children = graph.getChildren(node.id)
-    return {
-      ...node,
-      children: children.length > 0 ? collectNodeTree(children, graph) : undefined
+    const serialized: Record<string, unknown> = { ...node }
+
+    if (node.type === 'TEXT' && node.text && textPictureBuilder) {
+      const pic = node.textPicture ?? textPictureBuilder(node)
+      if (pic) serialized.textPicture = binaryToBase64(pic)
+    } else {
+      delete serialized.textPicture
     }
+
+    if (children.length > 0) {
+      serialized.children = collectNodeTree(children, graph, textPictureBuilder)
+    }
+    return serialized
   })
 }
diff --git a/packages/core/src/fonts.ts b/packages/core/src/fonts.ts
index 647a6687e..bc4594849 100644
--- a/packages/core/src/fonts.ts
+++ b/packages/core/src/fonts.ts
@@ -133,6 +133,10 @@ export async function ensureNodeFont(family: string, weight: number): Promise<vo
   await loadFont(family, style)
 }
 
+export function isFontLoaded(family: string): boolean {
+  return [...loadedFamilies.keys()].some((k) => k.startsWith(`${family}|`))
+}
+
 export function weightToStyle(weight: number, italic = false): string {
   let label = 'Regular'
   if (weight <= 100) label = 'Thin'
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index f72f10d4e..4fcee02f4 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -54,6 +54,7 @@ export {
   listFamilies,
   initFontService,
   getFontProvider,
+  isFontLoaded,
   ensureNodeFont,
   styleToWeight,
   weightToStyle
@@ -126,7 +127,8 @@ export {
   parseOpenPencilClipboard,
   buildFigmaClipboardHTML,
   buildOpenPencilClipboardHTML,
-  prefetchFigmaSchema
+  prefetchFigmaSchema,
+  type TextPictureBuilder
 } from './clipboard'
 
 export { readFigFile, parseFigFile } from './kiwi/fig-file'
diff --git a/packages/core/src/renderer.ts b/packages/core/src/renderer.ts
index db3df7474..d3973d1d2 100644
--- a/packages/core/src/renderer.ts
+++ b/packages/core/src/renderer.ts
@@ -58,6 +58,7 @@ import {
   TEXT_CARET_WIDTH
 } from './constants'
 import { vectorNetworkToPath } from './vector'
+import { isFontLoaded } from './fonts'
 
 import type { SceneNode, SceneGraph, Fill, Stroke } from './scene-graph'
 import type { SnapGuide } from './snap'
@@ -1676,14 +1677,54 @@ export class SkiaRenderer {
     if (!text) return
 
     if (this.fontsLoaded && this.fontProvider) {
-      const paragraph = this.buildParagraph(node, this.fillPaint.getColor())
-      canvas.drawParagraph(paragraph, 0, 0)
-      paragraph.delete()
+      if (this.isNodeFontLoaded(node)) {
+        const paragraph = this.buildParagraph(node, this.fillPaint.getColor())
+        canvas.drawParagraph(paragraph, 0, 0)
+        paragraph.delete()
+      } else if (node.textPicture) {
+        const pic = this.ck.MakePicture(node.textPicture)
+        if (pic) {
+          canvas.drawPicture(pic)
+          pic.delete()
+        }
+      } else if (this.textFont) {
+        canvas.drawText(text, 0, node.fontSize || DEFAULT_FONT_SIZE, this.fillPaint, this.textFont)
+      }
     } else if (this.textFont) {
       canvas.drawText(text, 0, node.fontSize || DEFAULT_FONT_SIZE, this.fillPaint, this.textFont)
     }
   }
 
+  isNodeFontLoaded(node: SceneNode): boolean {
+    const families = new Set<string>()
+    families.add(node.fontFamily || 'Inter')
+    for (const run of node.styleRuns) {
+      if (run.style.fontFamily) families.add(run.style.fontFamily)
+    }
+    return [...families].every((f) => isFontLoaded(f))
+  }
+
+  buildTextPicture(node: SceneNode): Uint8Array | null {
+    if (!this.fontsLoaded || !this.fontProvider || !this.isNodeFontLoaded(node)) return null
+    if (node.type !== 'TEXT' || !node.text) return null
+
+    const ck = this.ck
+    const recorder = new ck.PictureRecorder()
+    const bounds = ck.LTRBRect(0, 0, node.width || 1e6, node.height || 1e6)
+    const recCanvas = recorder.beginRecording(bounds)
+
+    const paragraph = this.buildParagraph(node)
+    recCanvas.drawParagraph(paragraph, 0, 0)
+    paragraph.delete()
+
+    const picture = recorder.finishRecordingAsPicture()
+    recorder.delete()
+
+    const bytes = picture.serialize()
+    picture.delete()
+    return bytes ?? null
+  }
+
   buildParagraph(node: SceneNode, color?: Float32Array): import('canvaskit-wasm').Paragraph {
     const ck = this.ck
     const baseColor = color ?? ck.BLACK
diff --git a/packages/core/src/scene-graph.ts b/packages/core/src/scene-graph.ts
index 5cae0a0cb..c4c5d96c0 100644
--- a/packages/core/src/scene-graph.ts
+++ b/packages/core/src/scene-graph.ts
@@ -265,6 +265,8 @@ export interface SceneNode {
   overrides: Record<string, unknown>
 
   boundVariables: Record<string, string>
+
+  textPicture: Uint8Array | null
 }
 
 export type VariableType = 'COLOR' | 'FLOAT' | 'STRING' | 'BOOLEAN'
@@ -385,6 +387,7 @@ function createDefaultNode(type: NodeType, overrides: Partial<SceneNode> = {}):
     componentId: null,
     overrides: {},
     boundVariables: {},
+    textPicture: null,
     ...overrides
   }
 }
diff --git a/src/components/properties/TypographySection.vue b/src/components/properties/TypographySection.vue
index b72d4a8d2..25f3fb091 100644
--- a/src/components/properties/TypographySection.vue
+++ b/src/components/properties/TypographySection.vue
@@ -3,10 +3,12 @@ import { computed, onMounted } from 'vue'
 
 import FontPicker from '@/components/FontPicker.vue'
 import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeFontStatus } from '@/composables/use-font-status'
 import { useNodeProps } from '@/composables/use-node-props'
 import { loadFont } from '@/engine/fonts'
 
 const { store, node, updateProp, commitProp } = useNodeProps()
+const { missingFonts, hasMissingFonts } = useNodeFontStatus(() => node.value)
 
 const WEIGHTS = [
   { value: 100, label: 'Thin' },
@@ -73,8 +75,13 @@ onMounted(async () => {
   <div v-if="node" class="border-b border-border px-3 py-2">
     <label class="mb-1.5 block text-[11px] text-muted">Typography</label>
 
-    <div class="mb-1.5">
-      <FontPicker :model-value="node.fontFamily" @select="selectFamily" />
+    <div class="mb-1.5 flex items-center gap-1.5">
+      <FontPicker class="min-w-0 flex-1" :model-value="node.fontFamily" @select="selectFamily" />
+      <icon-lucide-alert-triangle
+        v-if="hasMissingFonts"
+        class="size-3.5 shrink-0 text-amber-400"
+        :title="'Missing font' + (missingFonts.length > 1 ? 's' : '') + ': ' + missingFonts.join(', ')"
+      />
     </div>
 
     <!-- Weight + Size -->
diff --git a/src/composables/use-font-status.ts b/src/composables/use-font-status.ts
new file mode 100644
index 000000000..8628c32a0
--- /dev/null
+++ b/src/composables/use-font-status.ts
@@ -0,0 +1,23 @@
+import { isFontLoaded } from '@open-pencil/core'
+import { computed } from 'vue'
+
+import type { SceneNode } from '@open-pencil/core'
+
+export function useNodeFontStatus(node: () => SceneNode) {
+  const missingFonts = computed(() => {
+    const n = node()
+    if (n.type !== 'TEXT') return []
+
+    const families = new Set<string>()
+    families.add(n.fontFamily || 'Inter')
+    for (const run of n.styleRuns) {
+      if (run.style.fontFamily) families.add(run.style.fontFamily)
+    }
+
+    return [...families].filter((f) => !isFontLoaded(f))
+  })
+
+  const hasMissingFonts = computed(() => missingFonts.value.length > 0)
+
+  return { missingFonts, hasMissingFonts }
+}
diff --git a/src/stores/editor.ts b/src/stores/editor.ts
index 0df7fc413..5ff908714 100644
--- a/src/stores/editor.ts
+++ b/src/stores/editor.ts
@@ -1569,7 +1569,10 @@ export function createEditorStore() {
     if (nodes.length === 0) return
 
     const names = nodes.map((n) => n.name).join('\n')
-    const internalHtml = buildOpenPencilClipboardHTML(nodes, graph)
+    const textPicBuilder = _renderer
+      ? (node: SceneNode) => _renderer!.buildTextPicture(node)
+      : undefined
+    const internalHtml = buildOpenPencilClipboardHTML(nodes, graph, textPicBuilder)
     const figmaHtml = buildFigmaClipboardHTML(nodes, graph)
 
     const html = figmaHtml ? figmaHtml + internalHtml : internalHtml

From 7534c46583342332820c503f1e4fe8bf8397b03d Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 2 Mar 2026 19:38:17 +0300
Subject: [PATCH 9/9] Truncate long node names in export button

---
 CHANGELOG.md                                | 3 +++
 src/components/properties/ExportSection.vue | 2 +-
 src/stores/editor.ts                        | 5 +++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0517e351..e4568edff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,11 +8,14 @@
 - Tab bar with close buttons, middle-click to close, and new tab (+) button
 - Keyboard shortcuts: ⌘N/⌘T new tab, ⌘W close tab, ⌘O opens in new tab
 - Native Tauri menu: File → New and File → Close Tab wired to tab actions
+- Render text from SkPicture cache when fonts are missing — pixel-perfect display without the font installed
+- Missing font indicator (⚠) next to font picker in the sidebar
 
 ### Fixes
 
 - Fix clipboard "Outside int range" error — `pasteID` used unsigned int exceeding Kiwi's signed 32-bit field
 - Error toasts are now sticky (don't auto-dismiss), with selectable text, copy button, and close button
+- Truncate long node names in export button
 
 ### Tests
 
diff --git a/src/components/properties/ExportSection.vue b/src/components/properties/ExportSection.vue
index dda91462f..0ecea3654 100644
--- a/src/components/properties/ExportSection.vue
+++ b/src/components/properties/ExportSection.vue
@@ -138,7 +138,7 @@ function formatScale(scale: number): string {
 
     <button
       v-if="settings.length > 0"
-      class="mt-1.5 w-full cursor-pointer rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700 disabled:cursor-default disabled:opacity-50"
+      class="mt-1.5 w-full cursor-pointer truncate rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700 disabled:cursor-default disabled:opacity-50"
       :disabled="exporting"
       @click="doExport"
     >
diff --git a/src/stores/editor.ts b/src/stores/editor.ts
index 5ff908714..91b8df080 100644
--- a/src/stores/editor.ts
+++ b/src/stores/editor.ts
@@ -1569,8 +1569,9 @@ export function createEditorStore() {
     if (nodes.length === 0) return
 
     const names = nodes.map((n) => n.name).join('\n')
-    const textPicBuilder = _renderer
-      ? (node: SceneNode) => _renderer!.buildTextPicture(node)
+    const renderer = _renderer
+    const textPicBuilder = renderer
+      ? (node: SceneNode) => renderer.buildTextPicture(node)
       : undefined
     const internalHtml = buildOpenPencilClipboardHTML(nodes, graph, textPicBuilder)
     const figmaHtml = buildFigmaClipboardHTML(nodes, graph)