Add lateResize mode back in

tp-hsplitter.js

@@ -64,6 +64,7 @@ class TpHSplitter extends LitElement {
       bottomHidden: { type: Boolean, reflect: true },
       dragging: { type: Boolean, reflect: true },
       minSideHeight: { type: Number },
+      lateResize: { type: Boolean },
     };
   }
 
@@ -72,6 +73,7 @@ class TpHSplitter extends LitElement {
 
     this._disableDrag = this._disableDrag.bind(this);
     this._resize = this._resize.bind(this);
+    this._bufferedDelta = 0;
   }
 
   get top() {
@@ -107,6 +109,13 @@ class TpHSplitter extends LitElement {
     document.removeEventListener('mousemove', this._resize);
     document.body.style['userSelect'] = '';
     this.dragging = false;
+
+    if (this.lateResize && this._bufferedDelta) {
+      this.splitter.style.transform = '';
+      this.style.gridTemplateRows = `${this._topHeight + this._bufferedDelta}px 5px 1fr`;
+      this._bufferedDelta = 0;
+    }
+
     this.dispatchEvent(new CustomEvent('resize-done', { detail: this.style.gridTemplateRows, bubbles: true, composed: true }));
   }
 
@@ -114,13 +123,20 @@ class TpHSplitter extends LitElement {
     const delta = e.clientY - this._startY;
     const totalHeight = this.offsetHeight;
     const minHeight = this.minSideHeight || 0;
-    
-    // Get splitter width from CSS variable, fallback to 5px.
     const splitterWidth = parseInt(getComputedStyle(this).getPropertyValue('--tp-splitter-width')) || 5;
     
-    // Calculate new top height while ensuring it stays within bounds.
-    let newTopHeight = Math.max(minHeight, Math.min(this._topHeight + delta, totalHeight - splitterWidth - minHeight));
-    
+    // Calculate restricted delta
+    const maxDelta = totalHeight - splitterWidth - minHeight - this._topHeight;
+    const minDelta = -this._topHeight + minHeight;
+    const restrictedDelta = Math.max(minDelta, Math.min(delta, maxDelta));
+  
+    if (this.lateResize) {
+      this._bufferedDelta = restrictedDelta;
+      this.splitter.style.transform = `translateY(${this._bufferedDelta}px)`;
+      return;
+    }
+  
+    const newTopHeight = this._topHeight + restrictedDelta;
     this.style.gridTemplateRows = `${newTopHeight}px ${splitterWidth}px 1fr`;
     this.dispatchEvent(new CustomEvent('resized', { detail: null, bubbles: true, composed: true }));
   }