@mintplayer/ng-bootstrap 20.6.0 → 20.6.2

package/fesm2022/mintplayer-ng-bootstrap-dock.mjs

@@ -39,6 +39,7 @@ const templateHtml = `
       box-sizing: border-box;
       font-family: inherit;
       color: inherit;
+      --dock-split-gap: 0.25rem;
     }
 
     .dock-root,
@@ -73,6 +74,13 @@ const templateHtml = `
       z-index: 5;
     }
 
+    .dock-intersections-layer {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      z-index: 120;
+    }
+
     .dock-floating {
       position: absolute;
       display: flex;
@@ -127,7 +135,8 @@ const templateHtml = `
       transition: background 120ms ease;
     }
 
-    .dock-floating__resizer:hover {
+    .dock-floating__resizer:hover,
+    .dock-floating__resizer[data-resizing='true'] {
       background: rgba(148, 163, 184, 0.4);
     }
 
@@ -200,7 +209,7 @@ const templateHtml = `
     .dock-split {
       display: flex;
       flex: 1 1 0;
-      gap: 0.25rem;
+      gap: var(--dock-split-gap);
       position: relative;
     }
 
@@ -228,11 +237,17 @@ const templateHtml = `
     .dock-split[data-direction="horizontal"] > .dock-split__divider {
       width: 0.5rem;
       cursor: col-resize;
+      /* Extend through perpendicular gaps for visual continuity */
+      margin-top: calc(var(--dock-split-gap) * -1);
+      margin-bottom: calc(var(--dock-split-gap) * -1);
     }
 
     .dock-split[data-direction="vertical"] > .dock-split__divider {
       height: 0.5rem;
       cursor: row-resize;
+      /* Extend through perpendicular gaps for visual continuity */
+      margin-left: calc(var(--dock-split-gap) * -1);
+      margin-right: calc(var(--dock-split-gap) * -1);
     }
 
     .dock-split__divider::after {
@@ -261,6 +276,45 @@ const templateHtml = `
       background: rgba(59, 130, 246, 0.35);
     }
 
+    .dock-intersection-handle {
+      position: absolute;
+      width: 1rem;
+      height: 1rem;
+      margin-left: -0.5rem;
+      margin-top: -0.5rem;
+      border-radius: 0.375rem;
+      background: rgba(59, 130, 246, 0.2);
+      border: 1px solid rgba(59, 130, 246, 0.6);
+      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
+      cursor: all-scroll;
+      pointer-events: auto;
+      opacity: 0;
+      transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
+    }
+
+    .dock-intersection-handle:hover,
+    .dock-intersection-handle:focus-visible,
+    .dock-intersection-handle[data-visible='true'],
+    .dock-intersection-handle[data-resizing='true'] {
+      background: rgba(59, 130, 246, 0.35);
+      border-color: rgba(59, 130, 246, 0.9);
+      opacity: 1;
+      outline: none;
+    }
+
+    .dock-snap-marker {
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      margin-left: -3px;
+      margin-top: -3px;
+      border-radius: 50%;
+      background: rgba(59, 130, 246, 0.7);
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+      pointer-events: none;
+      z-index: 130;
+    }
+
     .dock-stack {
       display: flex;
       flex-direction: column;
@@ -409,6 +463,7 @@ const templateHtml = `
   <div class="dock-root">
     <div class="dock-docked"></div>
     <div class="dock-floating-layer"></div>
+    <div class="dock-intersections-layer dock-intersection-layer"></div>
   </div>
   <div class="dock-drop-indicator"></div>
   <div class="dock-drop-joystick" data-visible="false">
@@ -477,8 +532,93 @@ class MintDockManagerElement extends HTMLElement {
     }
     static get observedAttributes() {
         return ['layout'];
+        // return ['layout', 'debug-snap-markers'];
     }
     static { this.instanceCounter = 0; }
+    renderSnapMarkersForDivider() {
+        if (!this.showSnapMarkers)
+            return;
+        const layer = this.shadowRoot?.querySelector('.dock-intersections-layer, .dock-intersection-layer');
+        if (!layer)
+            return;
+        // Clear previous
+        Array.from(layer.querySelectorAll('.dock-snap-marker')).forEach((el) => el.remove());
+        if (!this.resizeState || !this.activeSnapAxis || this.activeSnapTargets.length === 0)
+            return;
+        const rootRect = this.rootEl.getBoundingClientRect();
+        const dRect = this.resizeState.divider.getBoundingClientRect();
+        if (this.activeSnapAxis === 'x') {
+            const y = dRect.top + dRect.height / 2 - rootRect.top;
+            this.activeSnapTargets.forEach((sx) => {
+                const dot = this.documentRef.createElement('div');
+                dot.className = 'dock-snap-marker';
+                dot.style.left = `${rootRect.left + sx - rootRect.left}px`;
+                dot.style.top = `${y}px`;
+                layer.appendChild(dot);
+            });
+        }
+        else if (this.activeSnapAxis === 'y') {
+            const x = dRect.left + dRect.width / 2 - rootRect.left;
+            this.activeSnapTargets.forEach((sy) => {
+                const dot = this.documentRef.createElement('div');
+                dot.className = 'dock-snap-marker';
+                dot.style.left = `${x}px`;
+                dot.style.top = `${rootRect.top + sy - rootRect.top}px`;
+                layer.appendChild(dot);
+            });
+        }
+    }
+    renderSnapMarkersForCorner() {
+        if (!this.showSnapMarkers)
+            return;
+        const layer = this.shadowRoot?.querySelector('.dock-intersections-layer, .dock-intersection-layer');
+        if (!layer)
+            return;
+        Array.from(layer.querySelectorAll('.dock-snap-marker')).forEach((el) => el.remove());
+        if (!this.cornerResizeState)
+            return;
+        const rootRect = this.rootEl.getBoundingClientRect();
+        // Compute representative center lines from first entries
+        let centerX = null;
+        let centerY = null;
+        const st = this.cornerResizeState;
+        if (st.vs.length > 0) {
+            const vRect = st.vs[0].container.querySelector(':scope > .dock-split__divider')?.getBoundingClientRect();
+            if (vRect)
+                centerX = vRect.left + vRect.width / 2 - rootRect.left;
+        }
+        if (st.hs.length > 0) {
+            const hRect = st.hs[0].container.querySelector(':scope > .dock-split__divider')?.getBoundingClientRect();
+            if (hRect)
+                centerY = hRect.top + hRect.height / 2 - rootRect.top;
+        }
+        if (centerY != null) {
+            this.cornerSnapXTargets.forEach((sx) => {
+                const dot = this.documentRef.createElement('div');
+                dot.className = 'dock-snap-marker';
+                dot.style.left = `${sx}px`;
+                dot.style.top = `${centerY}px`;
+                layer.appendChild(dot);
+            });
+        }
+        if (centerX != null) {
+            this.cornerSnapYTargets.forEach((sy) => {
+                const dot = this.documentRef.createElement('div');
+                dot.className = 'dock-snap-marker';
+                dot.style.left = `${centerX}px`;
+                dot.style.top = `${sy}px`;
+                layer.appendChild(dot);
+            });
+        }
+    }
+    clearSnapMarkers() {
+        if (!this.showSnapMarkers)
+            return;
+        const layer = this.shadowRoot?.querySelector('.dock-intersections-layer, .dock-intersection-layer');
+        if (!layer)
+            return;
+        Array.from(layer.querySelectorAll('.dock-snap-marker')).forEach((el) => el.remove());
+    }
     constructor() {
         super();
         this.dropJoystickTarget = null;
@@ -490,10 +630,22 @@ class MintDockManagerElement extends HTMLElement {
         this.dragState = null;
         this.floatingDragState = null;
         this.floatingResizeState = null;
+        this.intersectionRaf = null;
+        this.intersectionHandles = new Map();
+        this.cornerResizeState = null;
         this.pointerTrackingActive = false;
         this.dragPointerTrackingActive = false;
         this.lastDragPointerPosition = null;
+        // Localized snapping while dragging a divider
+        this.activeSnapAxis = null;
+        this.activeSnapTargets = [];
+        // Localized snapping while dragging an intersection handle
+        this.cornerSnapXTargets = [];
+        this.cornerSnapYTargets = [];
+        // Debug: render snap markers while dragging
+        this.showSnapMarkers = false;
         this.pendingDragEndTimeout = null;
+        this.previousSplitSizes = new Map();
         const documentRef = this.resolveDocument();
         this.documentRef = documentRef;
         this.windowRef = this.resolveWindow(documentRef);
@@ -543,6 +695,7 @@ class MintDockManagerElement extends HTMLElement {
         this.onDragTouchMove = this.onDragTouchMove.bind(this);
         this.onDragMouseUp = this.onDragMouseUp.bind(this);
         this.onDragTouchEnd = this.onDragTouchEnd.bind(this);
+        this.onWindowResize = this.onWindowResize.bind(this);
     }
     connectedCallback() {
         if (!this.hasAttribute('role')) {
@@ -577,6 +730,7 @@ class MintDockManagerElement extends HTMLElement {
         win?.addEventListener('dragover', this.onGlobalDragOver);
         win?.addEventListener('drag', this.onDrag);
         win?.addEventListener('dragend', this.onGlobalDragEnd, true);
+        win?.addEventListener('resize', this.onWindowResize);
     }
     disconnectedCallback() {
         this.rootEl.removeEventListener('dragover', this.onDragOver);
@@ -593,11 +747,19 @@ class MintDockManagerElement extends HTMLElement {
         win?.removeEventListener('pointermove', this.onPointerMove);
         win?.removeEventListener('pointerup', this.onPointerUp);
         this.pointerTrackingActive = false;
+        const win2 = this.windowRef;
+        win2?.removeEventListener('resize', this.onWindowResize);
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         if (name === 'layout') {
             this.layout = newValue ? this.parseLayout(newValue) : null;
         }
+        else if (name === 'debug-snap-markers') {
+            this.showSnapMarkers = !(newValue === null || newValue === 'false' || newValue === '0');
+            if (!this.showSnapMarkers) {
+                this.clearSnapMarkers();
+            }
+        }
     }
     get layout() {
         return {
@@ -673,6 +835,7 @@ class MintDockManagerElement extends HTMLElement {
             this.dockedEl.appendChild(fragment);
         }
         this.renderFloatingPanes();
+        this.scheduleRenderIntersectionHandles();
     }
     renderNode(node, path, floatingIndex) {
         if (node.kind === 'split') {
@@ -767,6 +930,479 @@ class MintDockManagerElement extends HTMLElement {
             this.floatingLayerEl.appendChild(wrapper);
         });
     }
+    onWindowResize() {
+        // Recompute intersection handles on window resize
+        this.scheduleRenderIntersectionHandles();
+    }
+    scheduleRenderIntersectionHandles() {
+        this.intersectionRaf = null;
+        this.renderIntersectionHandles();
+    }
+    renderIntersectionHandles() {
+        const layer = this.shadowRoot?.querySelector('.dock-intersections-layer, .dock-intersection-layer');
+        if (!layer)
+            return;
+        // Keep existing handles; we will diff and update positions
+        // 1) Clean up legacy handles (created before keying) that lack a data-key
+        Array.from(layer.querySelectorAll('.dock-intersection-handle'))
+            .filter((el) => !el.dataset['key'])
+            .forEach((el) => el.remove());
+        // 2) Rebuild the internal map from DOM to avoid drifting state and dedupe duplicates
+        const domByKey = new Map();
+        Array.from(layer.querySelectorAll('.dock-intersection-handle[data-key]')).forEach((el) => {
+            const key = el.dataset['key'] ?? '';
+            if (!key)
+                return;
+            if (domByKey.has(key)) {
+                // Remove duplicates with the same key, keep the first one
+                el.remove();
+                return;
+            }
+            domByKey.set(key, el);
+            // Ensure listener is attached only once
+            if (!el.dataset['listener']) {
+                el.dataset['listener'] = '1';
+                // Listener will be (re)assigned later when we know the current h/v pair
+            }
+        });
+        // Sync internal map with DOM
+        this.intersectionHandles = domByKey;
+        const rootRect = this.rootEl.getBoundingClientRect();
+        // If a corner resize is active, only update that handle's position and avoid creating new ones
+        if (this.cornerResizeState) {
+            const st = this.cornerResizeState;
+            const h0 = st.hs[0];
+            const v0 = st.vs[0];
+            const hPathStr = this.formatPath(h0.path);
+            const vPathStr = this.formatPath(v0.path);
+            const key = `${hPathStr}:${h0.index}|${vPathStr}:${v0.index}`;
+            // Find divider elements corresponding to active paths
+            const hDiv = this.shadowRoot?.querySelector(`.dock-split__divider[data-path="${hPathStr}"][data-index="${h0.index}"]`);
+            const vDiv = this.shadowRoot?.querySelector(`.dock-split__divider[data-path="${vPathStr}"][data-index="${v0.index}"]`);
+            if (hDiv && vDiv) {
+                const hr = hDiv.getBoundingClientRect();
+                const vr = vDiv.getBoundingClientRect();
+                const x = vr.left + vr.width / 2 - rootRect.left;
+                const y = hr.top + hr.height / 2 - rootRect.top;
+                const handle = st.handle;
+                if (!handle.dataset['key']) {
+                    handle.dataset['key'] = key;
+                }
+                this.intersectionHandles.set(key, handle);
+                handle.style.left = `${x}px`;
+                handle.style.top = `${y}px`;
+                // Remove any other handles that don't match the active key
+                Array.from(layer.querySelectorAll('.dock-intersection-handle')).forEach((el) => {
+                    if ((el.dataset['key'] ?? '') !== key) {
+                        el.remove();
+                    }
+                });
+                // Normalize internal map as well
+                this.intersectionHandles = new Map([[key, handle]]);
+            }
+            return;
+        }
+        const allDividers = Array.from(this.shadowRoot?.querySelectorAll('.dock-split__divider') ?? []);
+        const hDividers = [];
+        const vDividers = [];
+        allDividers.forEach((el) => {
+            const orientation = el.dataset['orientation'] ?? undefined;
+            const rect = el.getBoundingClientRect();
+            const container = el.closest('.dock-split');
+            const path = this.parsePath(el.dataset['path']);
+            const pathStr = el.dataset['path'] ?? '';
+            const index = Number.parseInt(el.dataset['index'] ?? '', 10);
+            if (!container || !Number.isFinite(index))
+                return;
+            const info = { el, rect, path, pathStr, index, container };
+            // Note: node.direction === 'horizontal' means the split lays out children left-to-right,
+            // which yields a VERTICAL divider bar. So mapping is inverted here.
+            if (orientation === 'horizontal') {
+                vDividers.push(info);
+            }
+            else if (orientation === 'vertical') {
+                hDividers.push(info);
+            }
+        });
+        const desiredKeys = new Set();
+        const tol = 24; // px tolerance to account for gaps and subpixel layout
+        const groupMap = new Map();
+        const groupPairs = new Map();
+        hDividers.forEach((h) => {
+            const hCenterY = h.rect.top + h.rect.height / 2;
+            vDividers.forEach((v) => {
+                const vCenterX = v.rect.left + v.rect.width / 2;
+                const dx = vCenterX < h.rect.left ? h.rect.left - vCenterX : vCenterX > h.rect.right ? vCenterX - h.rect.right : 0;
+                const dy = hCenterY < v.rect.top ? v.rect.top - hCenterY : hCenterY > v.rect.bottom ? hCenterY - v.rect.bottom : 0;
+                if (dx > tol || dy > tol)
+                    return;
+                const x = vCenterX - rootRect.left;
+                const y = hCenterY - rootRect.top;
+                const key = `${h.pathStr}:${h.index}|${v.pathStr}:${v.index}`;
+                const gk = `${Math.round(x)}:${Math.round(y)}`;
+                let handle = groupMap.get(gk);
+                if (!handle) {
+                    // Try reuse via existing pair mapping
+                    handle = this.intersectionHandles.get(key) ?? null;
+                    if (!handle) {
+                        handle = this.documentRef.createElement('div');
+                        handle.classList.add('dock-intersection-handle', 'glyph');
+                        handle.setAttribute('role', 'separator');
+                        handle.setAttribute('aria-label', 'Resize split intersection');
+                        handle.dataset['key'] = key;
+                        handle.dataset['listener'] = '1';
+                        handle.addEventListener('pointerdown', (ev) => this.beginCornerResize(ev, h, v, handle));
+                        handle.addEventListener('dblclick', (ev) => this.onIntersectionDoubleClick(ev, handle));
+                        layer.appendChild(handle);
+                    }
+                    groupMap.set(gk, handle);
+                }
+                // Track pairs for this group and map all pair keys to the same handle
+                const arr = groupPairs.get(gk) ?? [];
+                arr.push({ h: { pathStr: h.pathStr ?? '', index: h.index }, v: { pathStr: v.pathStr ?? '', index: v.index } });
+                groupPairs.set(gk, arr);
+                this.intersectionHandles.set(key, handle);
+                // Update position for the grouped handle
+                handle.style.left = `${x}px`;
+                handle.style.top = `${y}px`;
+            });
+        });
+        // Attach grouped pairs data to each handle and prune stale ones
+        const keep = new Set(groupMap.values());
+        groupMap.forEach((handle, gk) => {
+            const pairs = groupPairs.get(gk) ?? [];
+            handle.dataset['pairs'] = JSON.stringify(pairs);
+        });
+        Array.from(layer.querySelectorAll('.dock-intersection-handle')).forEach((el) => {
+            if (!keep.has(el)) {
+                el.remove();
+            }
+        });
+        // Reset intersectionHandles to only currently mapped keys
+        const newMap = new Map();
+        groupPairs.forEach((pairs, gk) => {
+            const handle = groupMap.get(gk);
+            pairs.forEach((p) => newMap.set(`${p.h.pathStr}:${p.h.index}|${p.v.pathStr}:${p.v.index}`, handle));
+        });
+        this.intersectionHandles = newMap;
+    }
+    beginCornerResize(event, h, v, handle) {
+        event.preventDefault();
+        // Build pairs from dataset if available (grouped intersections), otherwise from the provided pair
+        const pairsRaw = handle.dataset['pairs'];
+        const parsed = pairsRaw ? JSON.parse(pairsRaw) : [];
+        const hs = [];
+        const vs = [];
+        const ensureHV = (pathStr, index, axis) => {
+            const path = this.parsePath(pathStr);
+            if (!path)
+                return;
+            const div = this.shadowRoot?.querySelector(`.dock-split__divider[data-path="${pathStr}"][data-index="${index}"]`) ?? null;
+            const container = div?.closest('.dock-split');
+            if (!container)
+                return;
+            if (axis === 'h') {
+                const children = Array.from(container.querySelectorAll(':scope > .dock-split__child'));
+                const initial = children.map((c) => c.getBoundingClientRect().height);
+                hs.push({ path, index, container, initialSizes: initial, before: initial[index], after: initial[index + 1] });
+            }
+            else {
+                const children = Array.from(container.querySelectorAll(':scope > .dock-split__child'));
+                const initial = children.map((c) => c.getBoundingClientRect().width);
+                vs.push({ path, index, container, initialSizes: initial, before: initial[index], after: initial[index + 1] });
+            }
+        };
+        if (parsed.length > 0) {
+            parsed.forEach((p) => { ensureHV(p.h.pathStr, p.h.index, 'h'); ensureHV(p.v.pathStr, p.v.index, 'v'); });
+        }
+        else if (h.path && v.path) {
+            ensureHV(this.formatPath(h.path), h.index, 'h');
+            ensureHV(this.formatPath(v.path), v.index, 'v');
+        }
+        if (hs.length === 0 && vs.length === 0)
+            return;
+        try {
+            handle.setPointerCapture(event.pointerId);
+            handle.dataset['resizing'] = 'true';
+            handle.classList.add('hovering');
+        }
+        catch { }
+        this.cornerResizeState = {
+            pointerId: event.pointerId,
+            handle,
+            hs: hs.map((e) => ({ path: this.clonePath(e.path), index: e.index, container: e.container, beforeSize: e.before, afterSize: e.after, initialSizes: e.initialSizes, startY: event.clientY })),
+            vs: vs.map((e) => ({ path: this.clonePath(e.path), index: e.index, container: e.container, beforeSize: e.before, afterSize: e.after, initialSizes: e.initialSizes, startX: event.clientX })),
+        };
+        this.startPointerTracking();
+        // Ensure handle has a stable key (use group if present)
+        if (!handle.dataset['key']) {
+            handle.dataset['key'] = handle.dataset['group'] ?? '';
+        }
+        this.renderSnapMarkersForCorner();
+        // Compute localized snap targets for this intersection
+        try {
+            const rootRect = this.rootEl.getBoundingClientRect();
+            // Use first pair to define the crossing lines
+            let centerX = null;
+            let centerY = null;
+            // Resolve one vertical bar (from vs) and one horizontal bar (from hs)
+            if (vs.length > 0) {
+                const vPair = vs[0];
+                const vPathStr = this.formatPath(vPair.path);
+                const vDiv = this.shadowRoot?.querySelector(`.dock-split__divider[data-path="${vPathStr}"][data-index="${vPair.index}"]`) ?? null;
+                const vr = vDiv?.getBoundingClientRect();
+                if (vr)
+                    centerX = vr.left + vr.width / 2;
+            }
+            if (hs.length > 0) {
+                const hPair = hs[0];
+                const hPathStr = this.formatPath(hPair.path);
+                const hDiv = this.shadowRoot?.querySelector(`.dock-split__divider[data-path="${hPathStr}"][data-index="${hPair.index}"]`) ?? null;
+                const hr = hDiv?.getBoundingClientRect();
+                if (hr)
+                    centerY = hr.top + hr.height / 2;
+            }
+            const xTargets = [];
+            const yTargets = [];
+            const allDividers = Array.from(this.shadowRoot?.querySelectorAll('.dock-split__divider') ?? []);
+            allDividers.forEach((el) => {
+                const o = el.dataset['orientation'] ?? undefined;
+                const r = el.getBoundingClientRect();
+                if (o === 'horizontal' && centerY != null) {
+                    // vertical bar → contributes X if it crosses centerY
+                    if (centerY >= r.top && centerY <= r.bottom) {
+                        xTargets.push(r.left + r.width / 2 - rootRect.left);
+                    }
+                }
+                else if (o === 'vertical' && centerX != null) {
+                    // horizontal bar → contributes Y if it crosses centerX
+                    if (centerX >= r.left && centerX <= r.right) {
+                        yTargets.push(r.top + r.height / 2 - rootRect.top);
+                    }
+                }
+            });
+            this.cornerSnapXTargets = xTargets;
+            this.cornerSnapYTargets = yTargets;
+        }
+        catch {
+            this.cornerSnapXTargets = [];
+            this.cornerSnapYTargets = [];
+        }
+    }
+    handleCornerResizeMove(event) {
+        const state = this.cornerResizeState;
+        if (!state || state.pointerId !== event.pointerId)
+            return;
+        const snapValue = (val, total, active) => {
+            if (!active || total <= 0)
+                return val;
+            const ratios = [1 / 3, 1 / 2, 2 / 3];
+            const r = val / total;
+            let best = ratios[0];
+            let d = Math.abs(r - best);
+            for (let i = 1; i < ratios.length; i++) {
+                const dd = Math.abs(r - ratios[i]);
+                if (dd < d) {
+                    d = dd;
+                    best = ratios[i];
+                }
+            }
+            return best * total;
+        };
+        // Axis snapping to nearby intersections
+        const tol = 10;
+        const rootRect = this.rootEl.getBoundingClientRect();
+        let clientX = event.clientX;
+        let clientY = event.clientY;
+        if (this.cornerSnapXTargets.length) {
+            let best = clientX, bestDist = tol + 1;
+            this.cornerSnapXTargets.forEach((sx) => {
+                const px = rootRect.left + sx;
+                const d = Math.abs(px - clientX);
+                if (d < bestDist) {
+                    bestDist = d;
+                    best = px;
+                }
+            });
+            if (bestDist <= tol)
+                clientX = best;
+        }
+        if (this.cornerSnapYTargets.length) {
+            let best = clientY, bestDist = tol + 1;
+            this.cornerSnapYTargets.forEach((sy) => {
+                const py = rootRect.top + sy;
+                const d = Math.abs(py - clientY);
+                if (d < bestDist) {
+                    bestDist = d;
+                    best = py;
+                }
+            });
+            if (bestDist <= tol)
+                clientY = best;
+        }
+        // Update all horizontal bars (vertical splits) with Y delta
+        state.hs.forEach((h) => {
+            const node = this.resolveSplitNode(h.path);
+            if (!node)
+                return;
+            const deltaY = clientY - h.startY;
+            const minSize = 48;
+            const pairTotal = h.beforeSize + h.afterSize;
+            let newBefore = Math.min(Math.max(h.beforeSize + deltaY, minSize), pairTotal - minSize);
+            newBefore = snapValue(newBefore, pairTotal, event.shiftKey);
+            const newAfter = pairTotal - newBefore;
+            const sizesPx = [...h.initialSizes];
+            sizesPx[h.index] = newBefore;
+            sizesPx[h.index + 1] = newAfter;
+            const total = sizesPx.reduce((a, s) => a + s, 0);
+            const normalized = total > 0 ? sizesPx.map((s) => s / total) : [];
+            node.sizes = normalized;
+            const children = Array.from(h.container.querySelectorAll(':scope > .dock-split__child'));
+            normalized.forEach((size, idx) => { if (children[idx])
+                children[idx].style.flex = `${Math.max(size, 0)} 1 0`; });
+        });
+        // Update all vertical bars (horizontal splits) with X delta
+        state.vs.forEach((v) => {
+            const node = this.resolveSplitNode(v.path);
+            if (!node)
+                return;
+            const deltaX = clientX - v.startX;
+            const minSize = 48;
+            const pairTotal = v.beforeSize + v.afterSize;
+            let newBefore = Math.min(Math.max(v.beforeSize + deltaX, minSize), pairTotal - minSize);
+            newBefore = snapValue(newBefore, pairTotal, event.shiftKey);
+            const newAfter = pairTotal - newBefore;
+            const sizesPx = [...v.initialSizes];
+            sizesPx[v.index] = newBefore;
+            sizesPx[v.index + 1] = newAfter;
+            const total = sizesPx.reduce((a, s) => a + s, 0);
+            const normalized = total > 0 ? sizesPx.map((s) => s / total) : [];
+            node.sizes = normalized;
+            const children = Array.from(v.container.querySelectorAll(':scope > .dock-split__child'));
+            normalized.forEach((size, idx) => { if (children[idx])
+                children[idx].style.flex = `${Math.max(size, 0)} 1 0`; });
+        });
+        this.dispatchLayoutChanged();
+    }
+    endCornerResize(pointerId) {
+        const state = this.cornerResizeState;
+        if (!state || pointerId !== state.pointerId)
+            return;
+        try {
+            state.handle.releasePointerCapture(state.pointerId);
+        }
+        catch { }
+        state.handle.dataset['resizing'] = 'false';
+        this.cornerResizeState = null;
+        // Re-render handles to account for new positions
+        this.scheduleRenderIntersectionHandles();
+        this.cornerSnapXTargets = [];
+        this.cornerSnapYTargets = [];
+    }
+    onIntersectionDoubleClick(event, handle) {
+        event.preventDefault();
+        const pairsRaw = handle.dataset['pairs'];
+        const parsed = pairsRaw ? JSON.parse(pairsRaw) : [];
+        if (!Array.isArray(parsed) || parsed.length === 0) {
+            const k = handle.dataset['key'] ?? '';
+            const parts = k.split('|');
+            if (parts.length === 2) {
+                const [hPart, vPart] = parts;
+                const hi = hPart.lastIndexOf(':');
+                const vi = vPart.lastIndexOf(':');
+                if (hi > 0 && vi > 0) {
+                    const hPathStr = hPart.slice(0, hi);
+                    const vPathStr = vPart.slice(0, vi);
+                    const hIdx = Number.parseInt(hPart.slice(hi + 1), 10);
+                    const vIdx = Number.parseInt(vPart.slice(vi + 1), 10);
+                    parsed.push({ h: { pathStr: hPathStr, index: hIdx }, v: { pathStr: vPathStr, index: vIdx } });
+                }
+            }
+        }
+        if (parsed.length === 0)
+            return;
+        const splitKeys = new Set();
+        parsed.forEach((p) => { splitKeys.add(p.h.pathStr); splitKeys.add(p.v.pathStr); });
+        let hasStored = false;
+        splitKeys.forEach((k) => { if (this.previousSplitSizes.has(k))
+            hasStored = true; });
+        const applySizes = (pathStr, mutate) => {
+            const path = this.parsePath(pathStr);
+            if (!path)
+                return;
+            const node = this.resolveSplitNode(path);
+            if (!node)
+                return;
+            const sizes = this.normalizeSizesArray(node.sizes ?? [], node.children.length);
+            // Find divider index from any divider belonging to this path
+            const divEl = this.shadowRoot?.querySelector(`.dock-split__divider[data-path="${pathStr}"]`);
+            const index = divEl ? Number.parseInt(divEl.dataset['index'] ?? '0', 10) : 0;
+            const newSizes = mutate([...sizes], index);
+            node.sizes = newSizes;
+            const segments = path.segments.join('/');
+            const container = this.shadowRoot?.querySelector(`.dock-split[data-path="${segments}"]`);
+            if (container) {
+                const children = Array.from(container.querySelectorAll(':scope > .dock-split__child'));
+                newSizes.forEach((s, i) => { if (children[i])
+                    children[i].style.flex = `${Math.max(s, 0)} 1 0`; });
+            }
+        };
+        if (hasStored) {
+            // Restore stored sizes
+            this.previousSplitSizes.forEach((sizes, pathStr) => {
+                const path = this.parsePath(pathStr);
+                const node = path ? this.resolveSplitNode(path) : null;
+                if (!node)
+                    return;
+                const norm = this.normalizeSizesArray(sizes, node.children.length);
+                node.sizes = norm;
+                const segments = path.segments.join('/');
+                const container = this.shadowRoot?.querySelector(`.dock-split[data-path="${segments}"]`);
+                if (container) {
+                    const children = Array.from(container.querySelectorAll(':scope > .dock-split__child'));
+                    norm.forEach((s, i) => { if (children[i])
+                        children[i].style.flex = `${Math.max(s, 0)} 1 0`; });
+                }
+            });
+            this.previousSplitSizes.clear();
+        }
+        else {
+            // Equalize the two panes adjacent to each divider and store previous sizes
+            const touched = new Set();
+            parsed.forEach((p) => {
+                [p.h.pathStr, p.v.pathStr].forEach((key) => {
+                    if (touched.has(key))
+                        return;
+                    const path = this.parsePath(key);
+                    const node = path ? this.resolveSplitNode(path) : null;
+                    if (node && Array.isArray(node.sizes)) {
+                        this.previousSplitSizes.set(key, [...node.sizes]);
+                    }
+                    touched.add(key);
+                });
+                applySizes(p.h.pathStr, (sizes, idx) => {
+                    const total = (sizes[idx] ?? 0) + (sizes[idx + 1] ?? 0);
+                    if (total <= 0)
+                        return sizes;
+                    sizes[idx] = total / 2;
+                    sizes[idx + 1] = total / 2;
+                    const sum = sizes.reduce((a, s) => a + s, 0);
+                    return sum > 0 ? sizes.map((s) => s / sum) : sizes;
+                });
+                applySizes(p.v.pathStr, (sizes, idx) => {
+                    const total = (sizes[idx] ?? 0) + (sizes[idx + 1] ?? 0);
+                    if (total <= 0)
+                        return sizes;
+                    sizes[idx] = total / 2;
+                    sizes[idx + 1] = total / 2;
+                    const sum = sizes.reduce((a, s) => a + s, 0);
+                    return sum > 0 ? sizes.map((s) => s / sum) : sizes;
+                });
+            });
+        }
+        this.dispatchLayoutChanged();
+        this.scheduleRenderIntersectionHandles();
+    }
     beginFloatingDrag(event, index, wrapper, handle) {
         const floating = this.floatingLayouts[index];
         if (!floating) {
@@ -803,6 +1439,7 @@ class MintDockManagerElement extends HTMLElement {
         event.stopPropagation();
         try {
             handle.setPointerCapture(event.pointerId);
+            handle.dataset['resizing'] = 'true';
         }
         catch (err) {
             /* pointer capture may not be supported */
@@ -848,6 +1485,7 @@ class MintDockManagerElement extends HTMLElement {
         }
         try {
             state.handle.releasePointerCapture(state.pointerId);
+            delete state.handle.dataset['resizing'];
         }
         catch (err) {
             /* no-op */
@@ -997,7 +1635,8 @@ class MintDockManagerElement extends HTMLElement {
         if (this.pointerTrackingActive &&
             !this.resizeState &&
             !this.floatingDragState &&
-            !this.floatingResizeState) {
+            !this.floatingResizeState &&
+            !this.cornerResizeState) {
             const win = this.windowRef;
             win?.removeEventListener('pointermove', this.onPointerMove);
             win?.removeEventListener('pointerup', this.onPointerUp);
@@ -1059,6 +1698,13 @@ class MintDockManagerElement extends HTMLElement {
                 divider.classList.add('dock-split__divider');
                 divider.setAttribute('role', 'separator');
                 divider.tabIndex = 0;
+                // Tag divider with metadata for intersection detection
+                const dividerPath = typeof floatingIndex === 'number'
+                    ? { type: 'floating', index: floatingIndex, segments: [...path] }
+                    : { type: 'docked', segments: [...path] };
+                divider.dataset['path'] = this.formatPath(dividerPath);
+                divider.dataset['index'] = String(index);
+                divider.dataset['orientation'] = node.direction;
                 divider.addEventListener('pointerdown', (event) => this.beginResize(event, container, floatingIndex !== undefined
                     ? { type: 'floating', index: floatingIndex, segments: [...path] }
                     : { type: 'docked', segments: [...path] }, index));
@@ -1183,19 +1829,121 @@ class MintDockManagerElement extends HTMLElement {
             afterSize,
         };
         this.startPointerTracking();
+        // Compute localized snap targets: intersections with perpendicular dividers near this divider
+        try {
+            const rootRect = this.rootEl.getBoundingClientRect();
+            const dividerRect = divider.getBoundingClientRect();
+            const allDividers = Array.from(this.shadowRoot?.querySelectorAll('.dock-split__divider') ?? []);
+            const targets = [];
+            if (orientation === 'horizontal') {
+                // Current bar is vertical → snap X to centers of other vertical bars (no crossing check needed)
+                allDividers.forEach((el) => {
+                    if (el === divider)
+                        return;
+                    const o = el.dataset['orientation'] ?? undefined;
+                    if (o !== 'horizontal')
+                        return; // vertical divider bars (split direction horizontal)
+                    const r = el.getBoundingClientRect();
+                    const xCenter = r.left + r.width / 2 - rootRect.left;
+                    targets.push(xCenter);
+                });
+                this.activeSnapAxis = 'x';
+                this.activeSnapTargets = targets;
+                this.renderSnapMarkersForDivider();
+            }
+            else {
+                // Current bar is horizontal → snap Y to centers of other horizontal bars (no crossing check needed)
+                allDividers.forEach((el) => {
+                    if (el === divider)
+                        return;
+                    const o = el.dataset['orientation'] ?? undefined;
+                    if (o !== 'vertical')
+                        return; // horizontal divider bars (split direction vertical)
+                    const r = el.getBoundingClientRect();
+                    const yCenter = r.top + r.height / 2 - rootRect.top;
+                    targets.push(yCenter);
+                });
+                this.activeSnapAxis = 'y';
+                this.activeSnapTargets = targets;
+                this.renderSnapMarkersForDivider();
+            }
+        }
+        catch {
+            this.activeSnapAxis = null;
+            this.activeSnapTargets = [];
+            this.clearSnapMarkers();
+        }
     }
     onPointerMove(event) {
+        if (this.cornerResizeState && event.pointerId === this.cornerResizeState.pointerId) {
+            this.handleCornerResizeMove(event);
+        }
         if (this.resizeState && event.pointerId === this.resizeState.pointerId) {
             const state = this.resizeState;
             const splitNode = this.resolveSplitNode(state.path);
             if (!splitNode) {
                 return;
             }
-            const currentPos = state.orientation === 'horizontal' ? event.clientX : event.clientY;
+            let currentPos = state.orientation === 'horizontal' ? event.clientX : event.clientY;
+            // Localized axis snap near neighboring intersections
+            const tol = 10;
+            const rootRect = this.rootEl.getBoundingClientRect();
+            if (this.activeSnapTargets.length) {
+                if (state.orientation === 'horizontal' && this.activeSnapAxis === 'x') {
+                    // Vertical divider snapping along X
+                    let closest = Number.POSITIVE_INFINITY;
+                    let best = currentPos;
+                    const pointerX = event.clientX;
+                    this.activeSnapTargets.forEach((sx) => {
+                        const px = rootRect.left + sx;
+                        const d = Math.abs(pointerX - px);
+                        if (d < closest) {
+                            closest = d;
+                            best = px;
+                        }
+                    });
+                    if (closest <= tol)
+                        currentPos = best;
+                    this.renderSnapMarkersForDivider();
+                }
+                else if (state.orientation === 'vertical' && this.activeSnapAxis === 'y') {
+                    // Horizontal divider snapping along Y
+                    let closest = Number.POSITIVE_INFINITY;
+                    let best = currentPos;
+                    const pointerY = event.clientY;
+                    this.activeSnapTargets.forEach((sy) => {
+                        const py = rootRect.top + sy;
+                        const d = Math.abs(pointerY - py);
+                        if (d < closest) {
+                            closest = d;
+                            best = py;
+                        }
+                    });
+                    if (closest <= tol)
+                        currentPos = best;
+                    this.renderSnapMarkersForDivider();
+                }
+            }
             const delta = currentPos - state.startPos;
             const minSize = 48;
             const pairTotal = state.beforeSize + state.afterSize;
-            let newBefore = Math.min(Math.max(state.beforeSize + delta, minSize), pairTotal - minSize);
+            let newBefore = state.beforeSize + delta;
+            // Optional snap with Shift
+            if (event.shiftKey && pairTotal > 0) {
+                const ratios = [1 / 3, 1 / 2, 2 / 3];
+                const target = newBefore / pairTotal;
+                let best = ratios[0];
+                let bestDist = Math.abs(target - best);
+                for (let i = 1; i < ratios.length; i++) {
+                    const d = Math.abs(target - ratios[i]);
+                    if (d < bestDist) {
+                        best = ratios[i];
+                        bestDist = d;
+                    }
+                }
+                newBefore = best * pairTotal;
+            }
+            newBefore = Math.min(Math.max(newBefore, minSize), pairTotal - minSize);
             let newAfter = pairTotal - newBefore;
             if (!Number.isFinite(newBefore) || !Number.isFinite(newAfter)) {
                 return;
@@ -1226,11 +1974,17 @@ class MintDockManagerElement extends HTMLElement {
         }
     }
     onPointerUp(event) {
+        if (this.cornerResizeState && event.pointerId === this.cornerResizeState.pointerId) {
+            this.endCornerResize(event.pointerId);
+        }
         if (this.resizeState && event.pointerId === this.resizeState.pointerId) {
             const divider = this.resizeState.divider;
             divider.dataset['resizing'] = 'false';
             divider.releasePointerCapture(this.resizeState.pointerId);
             this.resizeState = null;
+            this.scheduleRenderIntersectionHandles();
+            this.activeSnapAxis = null;
+            this.activeSnapTargets = [];
         }
         if (this.floatingDragState && event.pointerId === this.floatingDragState.pointerId) {
             this.endFloatingDrag(event.pointerId);
@@ -1341,6 +2095,28 @@ class MintDockManagerElement extends HTMLElement {
         this.startDragPointerTracking();
         event.dataTransfer.effectAllowed = 'move';
         event.dataTransfer.setData('text/plain', pane);
+        // Preferred UX: if the dragged tab is the only one in its stack,
+        // immediately convert to a floating window unless it is already the
+        // only pane in a floating window (this case is handled by reuse logic).
+        if (this.dragState && this.dragState.floatingIndex !== null && this.dragState.floatingIndex < 0) {
+            const loc = this.resolveStackLocation(this.dragState.sourcePath);
+            if (loc && Array.isArray(loc.node.panes) && loc.node.panes.length === 1) {
+                let shouldConvert = false;
+                if (loc.context === "docked") {
+                    shouldConvert = true;
+                }
+                else if (loc.context === "floating") {
+                    const floating = this.floatingLayouts[loc.index];
+                    const totalPanes = floating && floating.root ? this.countPanesInTree(floating.root) : 0;
+                    shouldConvert = totalPanes > 1; // not the only pane in this floating window
+                }
+                if (shouldConvert) {
+                    const startX = Number.isFinite(event.clientX) ? event.clientX : (this.dragState.startClientX ?? 0);
+                    const startY = Number.isFinite(event.clientY) ? event.clientY : (this.dragState.startClientY ?? 0);
+                    this.convertPendingTabDragToFloating(startX, startY);
+                }
+            }
+        }
     }
     preparePaneDragSource(path, pane, stackEl, event) {
         const location = this.resolveStackLocation(path);
@@ -1607,6 +2383,8 @@ class MintDockManagerElement extends HTMLElement {
             if (this.dropJoystick.dataset['visible'] !== 'true') {
                 this.hideDropIndicator();
             }
+            // Also ensure any in-header placeholder is cleared when not over a stack
+            this.clearHeaderDragPlaceholder();
             return;
         }
         // If we moved to a different target stack, reset any sticky zone so
@@ -1617,7 +2395,7 @@ class MintDockManagerElement extends HTMLElement {
         }
         // Previous behavior hid the indicator and returned early here; instead,
         // allow the live-reorder branch below to handle in-header drags.
-        // While reordering within the same header, update order live and suppress joystick/indicator
+        // While dragging within the same header, show a placeholder and suppress joystick/indicator
         if (this.dragState &&
             this.dragState.floatingIndex !== null &&
             this.dragState.floatingIndex < 0 &&
@@ -1628,16 +2406,12 @@ class MintDockManagerElement extends HTMLElement {
             if (inHeaderByBounds || inHeaderByHitTest) {
                 const header = stack.querySelector('.dock-stack__header');
                 if (header) {
+                    // Ensure placeholder exists and move it as the pointer moves
+                    this.ensureHeaderDragPlaceholder(header, this.dragState.pane);
                     const idx = this.computeHeaderInsertIndex(header, clientX);
                     if (this.dragState.liveReorderIndex !== idx) {
-                        this.ensureHeaderDragPlaceholder(header, this.dragState.pane);
                         this.updateHeaderDragPlaceholderPosition(header, idx);
-                        const location = this.resolveStackLocation(path);
-                        if (location) {
-                            this.reorderPaneInLocationAtIndex(location, this.dragState.pane, idx);
-                            this.render();
-                            this.dispatchLayoutChanged();
-                        }
+                        // Keep model reordering until drop; only move the placeholder now
                         this.dragState.liveReorderIndex = idx;
                     }
                 }
@@ -1645,6 +2419,8 @@ class MintDockManagerElement extends HTMLElement {
                 return;
             }
         }
+        // Leaving the header: ensure any placeholder is removed immediately
+        this.clearHeaderDragPlaceholder();
         const zoneHint = this.findDropZoneByPoint(clientX, clientY);
         const zone = this.computeDropZone(stack, { clientX, clientY }, zoneHint);
         this.showDropIndicator(stack, zone);
@@ -1687,11 +2463,14 @@ class MintDockManagerElement extends HTMLElement {
         placeholder.type = 'button';
         placeholder.classList.add('dock-tab');
         placeholder.dataset['placeholder'] = 'true';
-        placeholder.textContent = dragged.textContent ?? '';
-        // Hide the original dragged tab so it doesn't duplicate visually
-        dragged.style.visibility = 'hidden';
-        // Insert placeholder next to dragged initially
-        header.insertBefore(placeholder, dragged.nextSibling);
+        // Keep the placeholder visually empty but reserving the same width
+        placeholder.textContent = '';
+        placeholder.setAttribute('aria-hidden', 'true');
+        placeholder.style.width = `${dragged.offsetWidth}px`;
+        // Hide the original dragged tab so it doesn't duplicate visually and free up its slot
+        dragged.style.display = 'none';
+        // Insert placeholder in the original position of the dragged tab
+        header.insertBefore(placeholder, dragged);
         if (this.dragState) {
             this.dragState.placeholderHeader = header;
             this.dragState.placeholderEl = placeholder;
@@ -1703,8 +2482,9 @@ class MintDockManagerElement extends HTMLElement {
         if (!placeholder) {
             return;
         }
+        const draggedPane = this.dragState?.pane ?? null;
         const tabs = Array.from(header.querySelectorAll('.dock-tab'))
-            .filter((t) => t !== placeholder);
+            .filter((t) => t !== placeholder && (!draggedPane || t.dataset['pane'] !== draggedPane));
         const clampedTarget = Math.max(0, Math.min(targetIndex, tabs.length));
         const ref = tabs[clampedTarget] ?? null;
         header.insertBefore(placeholder, ref);
@@ -1718,7 +2498,7 @@ class MintDockManagerElement extends HTMLElement {
                 ? (Array.from(header.querySelectorAll('.dock-tab')).find((t) => t.dataset['pane'] === this.dragState?.pane) ?? null)
                 : null;
             if (dragged) {
-                dragged.style.visibility = '';
+                dragged.style.display = '';
             }
         }
         if (ph && ph.parentElement) {
@@ -1872,20 +2652,41 @@ class MintDockManagerElement extends HTMLElement {
         this.dispatchLayoutChanged();
     }
     // Compute the intended tab insert index within a header based on pointer X
+    // Adds a slight rightward bias and uses the placeholder rect (if present)
+    // to ensure offsets are correct even when the dragged tab is display:none.
     computeHeaderInsertIndex(header, clientX) {
-        const tabs = Array.from(header.querySelectorAll('.dock-tab'))
-            .filter((t) => t.dataset['placeholder'] !== 'true');
-        if (tabs.length === 0) {
+        const allTabs = Array.from(header.querySelectorAll('.dock-tab'));
+        if (allTabs.length === 0) {
             return 0;
         }
-        for (let i = 0; i < tabs.length; i += 1) {
-            const rect = tabs[i].getBoundingClientRect();
-            const mid = rect.left + rect.width / 2;
+        const draggedPane = this.dragState?.pane ?? null;
+        const draggedEl = draggedPane
+            ? (allTabs.find((t) => t.dataset['pane'] === draggedPane) ?? null)
+            : null;
+        const placeholderEl = header.querySelector('.dock-tab[data-placeholder="true"]');
+        const targets = allTabs.filter((t) => t !== draggedEl && t !== placeholderEl);
+        if (targets.length === 0) {
+            return 0;
+        }
+        const rightBias = 12;
+        const leftBias = 0;
+        const baseRect = placeholderEl
+            ? placeholderEl.getBoundingClientRect()
+            : draggedEl
+                ? draggedEl.getBoundingClientRect()
+                : null;
+        const rectValid = !!baseRect && Number.isFinite(baseRect.width) && baseRect.width > 0;
+        const draggedCenter = rectValid && baseRect ? baseRect.left + baseRect.width / 2 : null;
+        for (let i = 0; i < targets.length; i += 1) {
+            const rect = targets[i].getBoundingClientRect();
+            const baseMid = rect.left + rect.width / 2;
+            const isRightOfDragged = draggedCenter !== null ? baseMid >= draggedCenter : false;
+            const mid = isRightOfDragged ? baseMid + rightBias : baseMid - leftBias;
             if (clientX < mid) {
                 return i;
             }
         }
-        return tabs.length; // insert at end
+        return targets.length;
     }
     reorderPaneInLocationAtIndex(location, pane, targetIndex) {
         const panes = location.node.panes;