From a89e8869812e9cb0a862efef43ed82d8d522f460 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sat, 28 Feb 2026 22:22:39 +0300
Subject: [PATCH] Make left and right panels resizable with reka-ui Splitter

Uses SplitterGroup/SplitterPanel/SplitterResizeHandle. Panels
default to 15% width, min 10%, max 30%. Layout persists across
reloads via auto-save-id. Resize handle highlights blue on hover.
---
 src/App.vue                        | 22 ++++++++++++++++++----
 src/components/LayersPanel.vue     |  2 +-
 src/components/PropertiesPanel.vue |  2 +-
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 512ab8e22..e668f27e5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useEventListener, useUrlSearchParams } from '@vueuse/core'
+import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
 
 import { useKeyboard } from './composables/use-keyboard'
 import { useMenu } from './composables/use-menu'
@@ -30,13 +31,26 @@ if (!('test' in params)) {
 
 <template>
   <div class="flex h-screen w-screen flex-col">
-    <div class="flex flex-1 overflow-hidden">
-      <LayersPanel v-if="showChrome" />
+    <SplitterGroup v-if="showChrome" direction="horizontal" class="flex-1 overflow-hidden" auto-save-id="editor-layout">
+      <SplitterPanel :default-size="15" :min-size="10" :max-size="30" class="flex">
+        <LayersPanel />
+      </SplitterPanel>
+      <SplitterResizeHandle class="w-0 cursor-col-resize after:absolute after:inset-y-0 after:-left-0.5 after:w-1 after:hover:bg-accent after:hover:opacity-50" />
+      <SplitterPanel :default-size="70" :min-size="30" class="flex">
+        <div class="relative flex min-w-0 flex-1">
+          <EditorCanvas />
+          <Toolbar />
+        </div>
+      </SplitterPanel>
+      <SplitterResizeHandle class="w-0 cursor-col-resize after:absolute after:inset-y-0 after:-left-0.5 after:w-1 after:hover:bg-accent after:hover:opacity-50" />
+      <SplitterPanel :default-size="15" :min-size="10" :max-size="30" class="flex">
+        <PropertiesPanel />
+      </SplitterPanel>
+    </SplitterGroup>
+    <div v-else class="flex flex-1 overflow-hidden">
       <div class="relative flex min-w-0 flex-1">
         <EditorCanvas />
-        <Toolbar v-if="showChrome" />
       </div>
-      <PropertiesPanel v-if="showChrome" />
     </div>
   </div>
 </template>
diff --git a/src/components/LayersPanel.vue b/src/components/LayersPanel.vue
index b7bff0c95..d490c8b2a 100644
--- a/src/components/LayersPanel.vue
+++ b/src/components/LayersPanel.vue
@@ -211,7 +211,7 @@ function updateDropTarget(ev: PointerEvent) {
 </script>
 
 <template>
-  <aside class="flex w-60 flex-col overflow-y-auto border-r border-border bg-panel">
+  <aside class="flex min-w-0 flex-1 flex-col overflow-y-auto border-r border-border bg-panel">
     <PagesPanel />
     <header class="shrink-0 px-3 py-2 text-[11px] uppercase tracking-wider text-muted">Layers</header>
     <div ref="listRef" class="relative flex-1 overflow-y-auto px-1">
diff --git a/src/components/PropertiesPanel.vue b/src/components/PropertiesPanel.vue
index e53017c16..52bd8333e 100644
--- a/src/components/PropertiesPanel.vue
+++ b/src/components/PropertiesPanel.vue
@@ -23,7 +23,7 @@ const isComponentType = computed(() => {
 </script>
 
 <template>
-  <aside class="flex w-[241px] flex-col overflow-hidden border-l border-border bg-panel">
+  <aside class="flex min-w-0 flex-1 flex-col overflow-hidden border-l border-border bg-panel">
     <!-- Tabs -->
     <div class="flex h-10 shrink-0 items-center gap-1 border-b border-border px-2">
       <button class="rounded px-2.5 py-1 text-xs font-semibold text-surface">Design</button>