From 5b6a12a59526b30deeff0ebe4809d6f13446286b Mon Sep 17 00:00:00 2001
From: Chris Tate <chris@ctate.dev>
Date: Wed, 25 Mar 2026 07:13:33 -0700
Subject: [PATCH] smoother sidebar resize

---
 packages/@visual-json/react/src/json-editor.tsx      |  5 ++++-
 .../svelte/src/components/JsonEditor.svelte          |  2 +-
 .../@visual-json/vue/src/components/JsonEditor.vue   | 12 ++++++------
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/@visual-json/react/src/json-editor.tsx b/packages/@visual-json/react/src/json-editor.tsx
index a24e8a2..d473e3b 100644
--- a/packages/@visual-json/react/src/json-editor.tsx
+++ b/packages/@visual-json/react/src/json-editor.tsx
@@ -118,6 +118,7 @@ function EditorLayout({
   sidebarOpen: boolean;
 }) {
   const [sidebarWidth, setSidebarWidth] = useState(280);
+  const [isDragging, setIsDragging] = useState(false);
   const [isNarrow, setIsNarrow] = useState(false);
   const [activePanel, setActivePanel] = useState<"tree" | "form">("tree");
   const containerRef = useRef<HTMLDivElement>(null);
@@ -140,6 +141,7 @@ function EditorLayout({
   const handleMouseDown = useCallback(
     (e: React.MouseEvent) => {
       dragging.current = true;
+      setIsDragging(true);
       startX.current = e.clientX;
       startWidth.current = sidebarWidth;
       document.body.style.cursor = "col-resize";
@@ -157,6 +159,7 @@ function EditorLayout({
 
       const handleMouseUp = () => {
         dragging.current = false;
+        setIsDragging(false);
         document.body.style.cursor = "";
         document.body.style.userSelect = "";
         document.removeEventListener("mousemove", handleMouseMove);
@@ -299,7 +302,7 @@ function EditorLayout({
           display: "flex",
           flexDirection: "column",
           width: sidebarOpen ? sidebarWidth : 0,
-          transition: "width 0.2s ease",
+          transition: isDragging ? "none" : "width 0.2s ease",
         }}
       >
         <SearchBar />
diff --git a/packages/@visual-json/svelte/src/components/JsonEditor.svelte b/packages/@visual-json/svelte/src/components/JsonEditor.svelte
index 7c55643..a69b4d8 100644
--- a/packages/@visual-json/svelte/src/components/JsonEditor.svelte
+++ b/packages/@visual-json/svelte/src/components/JsonEditor.svelte
@@ -247,7 +247,7 @@
 							display: flex;
 							flex-direction: column;
 							width: {sidebarOpen ? sidebarWidth + 'px' : '0'};
-							transition: width 0.2s ease;
+						transition: {isDragging ? 'none' : 'width 0.2s ease'};
 						"
         >
           <SearchBar />
diff --git a/packages/@visual-json/vue/src/components/JsonEditor.vue b/packages/@visual-json/vue/src/components/JsonEditor.vue
index b96f6d9..981d00d 100644
--- a/packages/@visual-json/vue/src/components/JsonEditor.vue
+++ b/packages/@visual-json/vue/src/components/JsonEditor.vue
@@ -71,7 +71,7 @@ const sidebarWidth = shallowRef(280);
 const isNarrow = shallowRef(false);
 const activePanel = shallowRef<"tree" | "form">("tree");
 const containerRef = shallowRef<HTMLDivElement | null>(null);
-let dragging = false;
+const isDragging = shallowRef(false);
 let startX = 0;
 let startWidth = 0;
 let observer: ResizeObserver | null = null;
@@ -95,20 +95,20 @@ onUnmounted(() => {
 });
 
 function handleMouseDown(e: MouseEvent) {
-  dragging = true;
+  isDragging.value = true;
   startX = e.clientX;
   startWidth = sidebarWidth.value;
   document.body.style.cursor = "col-resize";
   document.body.style.userSelect = "none";
 
   function handleMouseMove(ev: MouseEvent) {
-    if (!dragging) return;
+    if (!isDragging.value) return;
     const delta = ev.clientX - startX;
     sidebarWidth.value = Math.max(180, Math.min(600, startWidth + delta));
   }
 
   function handleMouseUp() {
-    dragging = false;
+    isDragging.value = false;
     document.body.style.cursor = "";
     document.body.style.userSelect = "";
     document.removeEventListener("mousemove", handleMouseMove);
@@ -267,7 +267,7 @@ const containerStyle  = computed<CSSProperties>(() => ({
             display: 'flex',
             flexDirection: 'column',
             width: props.sidebarOpen ? sidebarWidth + 'px' : '0',
-            transition: 'width 0.2s ease',
+            transition: isDragging ? 'none' : 'width 0.2s ease',
           }"
         >
           <SearchBar />
@@ -309,7 +309,7 @@ const containerStyle  = computed<CSSProperties>(() => ({
             "
             @mouseleave="
               (e) => {
-                if (!dragging) {
+                if (!isDragging) {
                   const parent = (e.currentTarget as HTMLElement).parentElement;
                   if (parent)
                     parent.style.backgroundColor =