From 299d9b73b840fe51dc4d8fda29113c0b04fe3d6c Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Tue, 3 Mar 2026 14:48:51 +0300
Subject: [PATCH] Auto-expand layers tree to reveal selected node

---
 CHANGELOG.md                   |  6 +++++-
 src/components/LayersPanel.vue | 25 ++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab76f3f90..0966568a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,8 +29,12 @@
 
 ### UI
 
-- Resizable pages/layers split in left panel using reka-ui Splitter
+- Resizable pages/layers split in left panel with reka-ui Splitter
+- Layers tree auto-expands and scrolls to reveal selected node
 - Loading overlay on canvas while opening .fig files
+- Hide internal-only pages (e.g. "Internal Only Canvas" in design systems)
+- Render page dividers — pages named with only dashes/asterisks/spaces show as horizontal lines
+- Only show component labels for COMPONENT and COMPONENT_SET, not instances
 - Replace all native `<select>` dropdowns with reka-ui `AppSelect` component
 - Smoother trackpad pinch-to-zoom with `Math.exp` curve and deltaMode normalization
 - Fix font picker dropdown truncating long font names
diff --git a/src/components/LayersPanel.vue b/src/components/LayersPanel.vue
index ef0501b6a..b86f25078 100644
--- a/src/components/LayersPanel.vue
+++ b/src/components/LayersPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { TreeRoot, TreeItem, ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal } from 'reka-ui'
 
@@ -74,6 +74,29 @@ watch([() => store.state.sceneVersion, () => store.state.currentPageId], () => {
 
 const expanded = ref<string[]>([])
 
+watch(
+  () => store.state.selectedIds,
+  (ids) => {
+    const toExpand = new Set(expanded.value)
+    for (const id of ids) {
+      let node = store.graph.getNode(id)
+      while (node?.parentId && node.parentId !== store.state.currentPageId) {
+        toExpand.add(node.parentId)
+        node = store.graph.getNode(node.parentId)
+      }
+    }
+    if (toExpand.size > expanded.value.length) {
+      expanded.value = [...toExpand]
+    }
+    nextTick(() => {
+      const first = [...ids][0]
+      if (!first) return
+      const el = listRef.value?.querySelector<HTMLElement>(`[data-node-id="${first}"]`)
+      el?.scrollIntoView({ block: 'nearest' })
+    })
+  }
+)
+
 function onSelect(ev: CustomEvent) {
   ev.preventDefault()
   const node = ev.detail.value as LayerNode