@mintplayer/ng-bootstrap 21.21.0 → 21.23.0

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

@@ -1,11 +1,14 @@
 import * as i0 from '@angular/core';
 import { input, viewChild, TemplateRef, ChangeDetectionStrategy, Component, output, signal, contentChildren, inject, effect, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { html, unsafeCSS, LitElement } from 'lit';
+import '@mintplayer/ng-bootstrap/web-components/tab-control';
+import '@mintplayer/ng-bootstrap/web-components/splitter';
 
 class BsDockPaneComponent {
     constructor() {
-        this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
-        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.template = viewChild.required(TemplateRef);
     }
     ngAfterContentInit() {
@@ -13,10 +16,10 @@ class BsDockPaneComponent {
             throw new Error('bs-dock-pane requires a unique "name" input.');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsDockPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.6", type: BsDockPaneComponent, isStandalone: true, selector: "bs-dock-pane", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDockPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: BsDockPaneComponent, isStandalone: true, selector: "bs-dock-pane", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsDockPaneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDockPaneComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bs-dock-pane',
@@ -25,502 +28,386 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                 }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
-const templateHtml = `
-  <style>
-    :host {
-      display: block;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      contain: layout paint size style;
-      box-sizing: border-box;
-      font-family: inherit;
-      color: inherit;
-      --dock-split-gap: 0.25rem;
-    }
-
-    .dock-root,
-    .dock-docked,
-    .dock-split,
-    .dock-split__child,
-    .dock-stack,
-    .dock-stack__content,
-    .dock-stack__pane {
-      box-sizing: border-box;
-      min-width: 0;
-      min-height: 0;
-    }
-
-    .dock-root {
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
-
-    .dock-docked {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      z-index: 0;
-    }
-
-    .dock-floating-layer {
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      z-index: 5;
-    }
-
-    .dock-intersections-layer {
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      z-index: 120;
-    }
-
-    .dock-floating {
-      position: absolute;
-      display: flex;
-      flex-direction: column;
-      pointer-events: auto;
-      border: 1px solid rgba(0, 0, 0, 0.3);
-      border-radius: 0.5rem;
-      background: rgba(255, 255, 255, 0.92);
-      box-shadow: 0 16px 32px rgba(15, 23, 42, 0.25);
-      overflow: hidden;
-      min-width: 12rem;
-      min-height: 8rem;
-    }
-
-    .dock-floating__chrome {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.35rem 0.75rem;
-      cursor: move;
-      background: linear-gradient(
-        to bottom,
-        rgba(148, 163, 184, 0.6),
-        rgba(148, 163, 184, 0.25)
-      );
-      border-bottom: 1px solid rgba(148, 163, 184, 0.5);
-      user-select: none;
-      -webkit-user-select: none;
-    }
-
-    .dock-floating__title {
-      flex: 1 1 auto;
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: rgba(30, 41, 59, 0.95);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .dock-floating > .dock-stack {
-      flex: 1 1 auto;
-      min-width: 12rem;
-      min-height: 8rem;
-    }
-
-    .dock-floating__resizer {
-      position: absolute;
-      pointer-events: auto;
-      z-index: 2;
-      background: rgba(148, 163, 184, 0.25);
-      transition: background 120ms ease;
-    }
-
-    .dock-floating__resizer:hover,
-    .dock-floating__resizer[data-resizing='true'] {
-      background: rgba(148, 163, 184, 0.4);
-    }
-
-    .dock-floating__resizer--top,
-    .dock-floating__resizer--bottom {
-      left: 0.75rem;
-      right: 0.75rem;
-      height: 0.5rem;
-    }
-
-    .dock-floating__resizer--top {
-      top: 0;
-      cursor: n-resize;
-    }
-
-    .dock-floating__resizer--bottom {
-      bottom: 0;
-      cursor: s-resize;
-    }
+// AUTO-GENERATED — do not edit by hand.
+// Source: mint-dock-manager.element.html + mint-dock-manager.element.scss
+// Regenerate with the codegen-wc Nx target.
+const template = html `<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">
+  <div class="dock-drop-joystick__spacer"></div>
+  <button
+    class="dock-drop-joystick__button"
+    type="button"
+    data-zone="top"
+    aria-label="Dock to top"
+  >
+    ↑
+  </button>
+  <div class="dock-drop-joystick__spacer"></div>
+  <button
+    class="dock-drop-joystick__button"
+    type="button"
+    data-zone="left"
+    aria-label="Dock to left"
+  >
+    ←
+  </button>
+  <button
+    class="dock-drop-joystick__button"
+    type="button"
+    data-zone="center"
+    aria-label="Dock to center"
+  >
+    •
+  </button>
+  <button
+    class="dock-drop-joystick__button"
+    type="button"
+    data-zone="right"
+    aria-label="Dock to right"
+  >
+    →
+  </button>
+  <div class="dock-drop-joystick__spacer"></div>
+  <button
+    class="dock-drop-joystick__button"
+    type="button"
+    data-zone="bottom"
+    aria-label="Dock to bottom"
+  >
+    ↓
+  </button>
+  <div class="dock-drop-joystick__spacer"></div>
+</div>`;
+const styles = unsafeCSS(`:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  contain: layout paint size style;
+  box-sizing: border-box;
+  font-family: inherit;
+  color: inherit;
+  --dock-split-gap: 0.25rem;
+}
 
-    .dock-floating__resizer--left,
-    .dock-floating__resizer--right {
-      top: 1.75rem;
-      bottom: 0.75rem;
-      width: 0.5rem;
-    }
+.dock-root,
+.dock-docked,
+.dock-split,
+.dock-stack,
+.dock-stack__pane {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+}
 
-    .dock-floating__resizer--left {
-      left: 0;
-      cursor: w-resize;
-    }
+.dock-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
 
-    .dock-floating__resizer--right {
-      right: 0;
-      cursor: e-resize;
-    }
+.dock-docked {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  z-index: 0;
+}
 
-    .dock-floating__resizer--top-left,
-    .dock-floating__resizer--top-right,
-    .dock-floating__resizer--bottom-left,
-    .dock-floating__resizer--bottom-right {
-      width: 0.75rem;
-      height: 0.75rem;
-    }
+.dock-floating-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 5;
+}
 
-    .dock-floating__resizer--top-left {
-      top: 0;
-      left: 0;
-      cursor: nw-resize;
-    }
+.dock-intersections-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 120;
+}
 
-    .dock-floating__resizer--top-right {
-      top: 0;
-      right: 0;
-      cursor: ne-resize;
-    }
+.dock-floating {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.5rem;
+  background: var(--bs-body-bg);
+  box-shadow: var(--bs-box-shadow-lg);
+  overflow: hidden;
+  min-width: 12rem;
+  min-height: 8rem;
+}
 
-    .dock-floating__resizer--bottom-left {
-      bottom: 0;
-      left: 0;
-      cursor: sw-resize;
-    }
+.dock-floating[data-dragging=true] {
+  pointer-events: none;
+}
 
-    .dock-floating__resizer--bottom-right {
-      right: 0;
-      bottom: 0;
-      cursor: se-resize;
-    }
+.dock-floating__chrome {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.75rem;
+  cursor: move;
+  background: linear-gradient(to bottom, rgba(var(--bs-primary-rgb), 0.15), rgba(var(--bs-primary-rgb), 0.05));
+  border-bottom: 1px solid var(--bs-primary-border-subtle);
+  user-select: none;
+  -webkit-user-select: none;
+}
 
-    .dock-split {
-      display: flex;
-      flex: 1 1 0;
-      gap: var(--dock-split-gap);
-      position: relative;
-    }
+.dock-floating__title {
+  flex: 1 1 auto;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--bs-body-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-    .dock-split[data-direction="vertical"] {
-      flex-direction: column;
-    }
+.dock-floating > .dock-stack {
+  flex: 1 1 auto;
+  min-width: 12rem;
+  min-height: 8rem;
+}
 
-    .dock-split[data-direction="horizontal"] {
-      flex-direction: row;
-    }
+.dock-floating__resizer {
+  position: absolute;
+  pointer-events: auto;
+  z-index: 2;
+  background: rgba(var(--bs-primary-rgb), 0.1);
+  transition: background 120ms ease;
+}
 
-    .dock-split__child {
-      display: flex;
-      flex: 1 1 0;
-      position: relative;
-    }
+.dock-floating__resizer:hover,
+.dock-floating__resizer[data-resizing=true] {
+  background: rgba(var(--bs-primary-rgb), 0.3);
+}
 
-    .dock-split__divider {
-      position: relative;
-      flex: 0 0 auto;
-      background: rgba(0, 0, 0, 0.08);
-      transition: background 120ms ease;
-    }
+.dock-floating__resizer--top,
+.dock-floating__resizer--bottom {
+  left: 0.75rem;
+  right: 0.75rem;
+  height: 0.5rem;
+}
 
-    .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-floating__resizer--top {
+  top: 0;
+  cursor: n-resize;
+}
 
-    .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-floating__resizer--bottom {
+  bottom: 0;
+  cursor: s-resize;
+}
 
-    .dock-split__divider::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      border-radius: 999px;
-      background: rgba(0, 0, 0, 0.25);
-    }
+.dock-floating__resizer--left,
+.dock-floating__resizer--right {
+  top: 1.75rem;
+  bottom: 0.75rem;
+  width: 0.5rem;
+}
 
-    .dock-split[data-direction="horizontal"] > .dock-split__divider::after {
-      width: 0.125rem;
-      height: 60%;
-    }
+.dock-floating__resizer--left {
+  left: 0;
+  cursor: w-resize;
+}
 
-    .dock-split[data-direction="vertical"] > .dock-split__divider::after {
-      width: 60%;
-      height: 0.125rem;
-    }
+.dock-floating__resizer--right {
+  right: 0;
+  cursor: e-resize;
+}
 
-    .dock-split__divider:hover,
-    .dock-split__divider:focus-visible,
-    .dock-split__divider[data-resizing='true'] {
-      background: rgba(59, 130, 246, 0.35);
-    }
+.dock-floating__resizer--top-left,
+.dock-floating__resizer--top-right,
+.dock-floating__resizer--bottom-left,
+.dock-floating__resizer--bottom-right {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
-    .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-floating__resizer--top-left {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+}
 
-    .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-floating__resizer--top-right {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+}
 
-    .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-floating__resizer--bottom-left {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+}
 
-    .dock-stack {
-      display: flex;
-      flex-direction: column;
-      flex: 1 1 0;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-      border-radius: 0.25rem;
-      background: rgba(255, 255, 255, 0.75);
-      backdrop-filter: blur(4px);
-    }
+.dock-floating__resizer--bottom-right {
+  right: 0;
+  bottom: 0;
+  cursor: se-resize;
+}
 
-    .dock-stack__header {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.25rem;
-      padding: 0.25rem;
-      background: rgba(0, 0, 0, 0.05);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-    }
+.dock-split {
+  flex: 1 1 0;
+  position: relative;
+}
 
-    .dock-tab {
-      appearance: none;
-      border: none;
-      padding: 0.25rem 0.5rem;
-      border-radius: 0.25rem;
-      background: transparent;
-      color: inherit;
-      font: inherit;
-      cursor: grab;
-      transition: background 160ms ease;
-    }
+.dock-intersection-handle {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  margin-left: -0.5rem;
+  margin-top: -0.5rem;
+  border-radius: 0.375rem;
+  background: var(--bs-primary-bg-subtle);
+  border: 1px solid var(--bs-primary-border-subtle);
+  box-shadow: var(--bs-box-shadow-sm);
+  cursor: all-scroll;
+  pointer-events: auto;
+  opacity: 0.45;
+  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
+}
 
-    .dock-tab:active {
-      cursor: grabbing;
-    }
+.dock-intersection-handle:hover,
+.dock-intersection-handle:focus-visible,
+.dock-intersection-handle[data-visible=true],
+.dock-intersection-handle[data-resizing=true] {
+  background: rgba(var(--bs-primary-rgb), 0.35);
+  border-color: var(--bs-primary);
+  opacity: 1;
+  outline: none;
+}
 
-    .dock-tab:hover {
-      background: rgba(0, 0, 0, 0.05);
-    }
+.dock-snap-marker {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  margin-left: -3px;
+  margin-top: -3px;
+  border-radius: 50%;
+  background: var(--bs-primary);
+  box-shadow: 0 0 0 2px var(--bs-primary-bg-subtle);
+  pointer-events: none;
+  z-index: 130;
+}
 
-    .dock-tab:focus-visible {
-      outline: 2px solid rgba(59, 130, 246, 0.8);
-      outline-offset: 1px;
-    }
+.dock-stack {
+  flex: 1 1 0;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.25rem;
+  background: var(--bs-body-bg);
+  backdrop-filter: blur(4px);
+}
 
-    .dock-tab--active {
-      background: rgba(59, 130, 246, 0.15);
-    }
+.dock-tab {
+  cursor: grab;
+  display: block;
+  padding: 0.5rem 1rem;
+  margin: -0.5rem -1rem;
+}
 
-    .dock-stack__content {
-      position: relative;
-      flex: 1 1 auto;
-      display: flex;
-      overflow: hidden;
-    }
+.dock-tab:active {
+  cursor: grabbing;
+}
 
-    .dock-stack__pane {
-      position: relative;
-      flex: 1 1 100%;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
+.dock-stack__pane {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+}
 
-    .dock-stack__pane[hidden] {
-      display: none !important;
-    }
+.dock-drop-indicator {
+  position: absolute;
+  pointer-events: none;
+  border: 2px solid var(--bs-primary);
+  background: rgba(var(--bs-primary-rgb), 0.2);
+  border-radius: 0.25rem;
+  opacity: 0;
+  transition: opacity 120ms ease;
+  z-index: 100;
+}
 
-    .dock-drop-indicator {
-      position: absolute;
-      pointer-events: none;
-      border: 2px solid rgba(59, 130, 246, 0.9);
-      background: rgba(59, 130, 246, 0.2);
-      border-radius: 0.25rem;
-      opacity: 0;
-      transition: opacity 120ms ease;
-      z-index: 100;
-    }
+.dock-drop-indicator[data-visible=true] {
+  opacity: 1;
+}
 
-    .dock-drop-indicator[data-visible='true'] {
-      opacity: 1;
-    }
+.dock-drop-joystick {
+  position: absolute;
+  display: grid;
+  grid-template-columns: repeat(3, min-content);
+  grid-template-rows: repeat(3, min-content);
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border-radius: 999px;
+  background: var(--bs-tertiary-bg);
+  box-shadow: var(--bs-box-shadow);
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  z-index: 110;
+}
 
-    .dock-drop-joystick {
-      position: absolute;
-      display: grid;
-      grid-template-columns: repeat(3, min-content);
-      grid-template-rows: repeat(3, min-content);
-      gap: 0.125rem;
-      padding: 0.125rem;
-      border-radius: 999px;
-      background: rgba(15, 23, 42, 0.15);
-      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
-      pointer-events: none;
-      transform: translate(-50%, -50%);
-      z-index: 110;
-    }
+.dock-drop-joystick__spacer {
+  width: 1.75rem;
+  height: 1.75rem;
+  pointer-events: none;
+}
 
-    .dock-drop-joystick__spacer {
-      width: 1.75rem;
-      height: 1.75rem;
-      pointer-events: none;
-    }
+.dock-drop-joystick__button {
+  width: 1.75rem;
+  height: 1.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--bs-primary-border-subtle);
+  background: var(--bs-body-bg);
+  color: var(--bs-primary);
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 600;
+  pointer-events: auto;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+}
 
-    .dock-drop-joystick__button {
-      width: 1.75rem;
-      height: 1.75rem;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 0.375rem;
-      border: 1px solid rgba(59, 130, 246, 0.4);
-      background: rgba(255, 255, 255, 0.9);
-      color: rgba(30, 64, 175, 0.9);
-      font-size: 0.75rem;
-      line-height: 1;
-      font-weight: 600;
-      pointer-events: auto;
-      cursor: pointer;
-      transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
-    }
+.dock-drop-joystick__button[data-active=true],
+.dock-drop-joystick__button:hover,
+.dock-drop-joystick__button:focus-visible {
+  background: var(--bs-primary-bg-subtle);
+  border-color: var(--bs-primary);
+  color: var(--bs-primary);
+}
 
-    .dock-drop-joystick__button[data-active='true'],
-    .dock-drop-joystick__button:hover,
-    .dock-drop-joystick__button:focus-visible {
-      background: rgba(59, 130, 246, 0.25);
-      border-color: rgba(59, 130, 246, 0.8);
-      color: rgba(30, 64, 175, 1);
-    }
+.dock-drop-joystick__button:focus-visible {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 1px;
+}
 
-    .dock-drop-joystick__button:focus-visible {
-      outline: 2px solid rgba(59, 130, 246, 0.9);
-      outline-offset: 1px;
-    }
+.dock-drop-joystick__button[data-zone=center] {
+  border-radius: 0.5rem;
+}
 
-    .dock-drop-joystick__button[data-zone='center'] {
-      border-radius: 0.5rem;
-    }
+::slotted(*) {
+  flex: 1 1 auto;
+  display: block;
+  min-width: 0;
+  min-height: 0;
+}`);
 
-    ::slotted(*) {
-      flex: 1 1 auto;
-      display: block;
-      min-width: 0;
-      min-height: 0;
-    }
-  </style>
-  <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">
-    <div class="dock-drop-joystick__spacer"></div>
-    <button
-      class="dock-drop-joystick__button"
-      type="button"
-      data-zone="top"
-      aria-label="Dock to top"
-    >
-      ↑
-    </button>
-    <div class="dock-drop-joystick__spacer"></div>
-    <button
-      class="dock-drop-joystick__button"
-      type="button"
-      data-zone="left"
-      aria-label="Dock to left"
-    >
-      ←
-    </button>
-    <button
-      class="dock-drop-joystick__button"
-      type="button"
-      data-zone="center"
-      aria-label="Dock to center"
-    >
-      •
-    </button>
-    <button
-      class="dock-drop-joystick__button"
-      type="button"
-      data-zone="right"
-      aria-label="Dock to right"
-    >
-      →
-    </button>
-    <div class="dock-drop-joystick__spacer"></div>
-    <button
-      class="dock-drop-joystick__button"
-      type="button"
-      data-zone="bottom"
-      aria-label="Dock to bottom"
-    >
-      ↓
-    </button>
-    <div class="dock-drop-joystick__spacer"></div>
-  </div>
-`;
-let cachedTemplate = null;
-let cachedTemplateDocument = null;
-function ensureTemplate(documentRef) {
-    if (!cachedTemplate || cachedTemplateDocument !== documentRef) {
-        cachedTemplate = documentRef.createElement('template');
-        cachedTemplate.innerHTML = templateHtml;
-        cachedTemplateDocument = documentRef;
-    }
-    return cachedTemplate;
-}
-class MintDockManagerElement extends HTMLElement {
+class MintDockManagerElement extends LitElement {
+    static { this.styles = [styles]; }
     static { this.documentRef = typeof document !== 'undefined' ? document : null; }
     static configureDocument(documentRef) {
         if (documentRef) {
@@ -528,43 +415,9 @@ class MintDockManagerElement extends HTMLElement {
         }
     }
     static get observedAttributes() {
-        return ['layout'];
-        // return ['layout', 'debug-snap-markers'];
+        return [...(super.observedAttributes ?? []), 'layout'];
     }
     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;
@@ -575,17 +428,23 @@ class MintDockManagerElement extends HTMLElement {
         if (!this.cornerResizeState)
             return;
         const rootRect = this.rootEl.getBoundingClientRect();
-        // Compute representative center lines from first entries
+        // Compute representative center lines from the dividers being resized.
+        // st.{hs,vs}[i].container is the <mp-splitter>; the divider lives in its
+        // shadow at getSplitterDividers(splitter)[index].
         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();
+            const v0 = st.vs[0];
+            const vDiv = this.getSplitterDividers(v0.container)[v0.index];
+            const vRect = vDiv?.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();
+            const h0 = st.hs[0];
+            const hDiv = this.getSplitterDividers(h0.container)[h0.index];
+            const hRect = hDiv?.getBoundingClientRect();
             if (hRect)
                 centerY = hRect.top + hRect.height / 2 - rootRect.top;
         }
@@ -623,19 +482,16 @@ class MintDockManagerElement extends HTMLElement {
         this.floatingLayouts = [];
         this.titles = {};
         this.pendingTabDragMetrics = null;
-        this.resizeState = null;
         this.dragState = null;
         this.floatingDragState = null;
         this.floatingResizeState = null;
         this.intersectionRaf = null;
-        this.intersectionHandles = new Map();
+        this.rootResizeObserver = null;
+        this.dockedMutationObserver = null;
         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 = [];
@@ -643,12 +499,31 @@ class MintDockManagerElement extends HTMLElement {
         this.showSnapMarkers = false;
         this.pendingDragEndTimeout = null;
         this.previousSplitSizes = new Map();
+        this.instanceId = `mint-dock-${++MintDockManagerElement.instanceCounter}`;
+        // Set windowRef eagerly so connectedCallback's window-level drag listeners
+        // (added before firstUpdated runs) can actually attach. Without this,
+        // win?.addEventListener was a silent no-op on first connect and HTML5
+        // drag-to-detach gestures never reached the dock — the floating wrapper
+        // was created but stayed at its conversion-time coordinates because the
+        // 'drag' listener that updates its position was never attached.
+        this.windowRef = typeof window !== 'undefined' ? window : null;
+        this.onPointerMove = this.onPointerMove.bind(this);
+        this.onPointerUp = this.onPointerUp.bind(this);
+        this.onDragPointerMove = this.onDragPointerMove.bind(this);
+        this.onDragPointerUp = this.onDragPointerUp.bind(this);
+        this.onDragPointerCancel = this.onDragPointerCancel.bind(this);
+        this.onSplitterResize = this.onSplitterResize.bind(this);
+    }
+    render() {
+        return template;
+    }
+    firstUpdated() {
+        // Resolve document and window now that we are connected.
         const documentRef = this.resolveDocument();
         this.documentRef = documentRef;
         this.windowRef = this.resolveWindow(documentRef);
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const template = ensureTemplate(documentRef);
-        shadowRoot.appendChild(template.content.cloneNode(true));
+        // Query the rendered shadow DOM for the dock skeleton.
+        const shadowRoot = this.shadowRoot;
         const root = shadowRoot.querySelector('.dock-root');
         if (!root) {
             throw new Error('mint-dock-manager template is missing the root element.');
@@ -679,75 +554,54 @@ class MintDockManagerElement extends HTMLElement {
         this.dropIndicator = indicator;
         this.dropJoystick = joystick;
         this.dropJoystickButtons = joystickButtons;
-        this.instanceId = `mint-dock-${++MintDockManagerElement.instanceCounter}`;
-        this.onPointerMove = this.onPointerMove.bind(this);
-        this.onPointerUp = this.onPointerUp.bind(this);
-        this.onDragOver = this.onDragOver.bind(this);
-        this.onGlobalDragOver = this.onGlobalDragOver.bind(this);
-        this.onGlobalDragEnd = this.onGlobalDragEnd.bind(this);
-        this.onDrop = this.onDrop.bind(this);
-        this.onDragLeave = this.onDragLeave.bind(this);
-        this.onDrag = this.onDrag.bind(this);
-        this.onDragMouseMove = this.onDragMouseMove.bind(this);
-        this.onDragTouchMove = this.onDragTouchMove.bind(this);
-        this.onDragMouseUp = this.onDragMouseUp.bind(this);
-        this.onDragTouchEnd = this.onDragTouchEnd.bind(this);
-        this.onWindowResize = this.onWindowResize.bind(this);
+        // Tag the docked surface with a root path so it can act as
+        // a drop target when the main layout is empty.
+        this.dockedEl.dataset['path'] = this.formatPath({ type: 'docked', segments: [] });
+        // Drop targeting (drop indicator + joystick zone selection) runs entirely
+        // off pointer-based hit-testing in updatePaneDragDropTargetFromPoint and
+        // findDropZoneByPoint — no HTML5 dragover/drop/dragleave listeners needed.
+        // Render any layout that was set before the shadow DOM existed.
+        this.renderLayout();
+        // Reactive triggers for intersection-handle re-rendering. Each observer
+        // wakes scheduleRenderIntersectionHandles() (rAF-coalesced), which means
+        // multiple notifications in the same frame collapse to one render and
+        // the rAF tick gives <mp-splitter> elements time to populate their
+        // shadow roots before we query their dividers.
+        this.rootResizeObserver = new ResizeObserver(() => this.scheduleRenderIntersectionHandles());
+        this.rootResizeObserver.observe(this.rootEl);
+        this.dockedMutationObserver = new MutationObserver(() => this.scheduleRenderIntersectionHandles());
+        this.dockedMutationObserver.observe(this.dockedEl, { childList: true, subtree: true });
+        // mp-splitter dispatches bubbling 'resizing' / 'resize-end' on user drag;
+        // delegating on dockedEl catches every nested splitter without per-instance wiring.
+        this.dockedEl.addEventListener('resizing', this.onSplitterResize);
+        this.dockedEl.addEventListener('resize-end', this.onSplitterResize);
     }
     connectedCallback() {
+        super.connectedCallback();
         if (!this.hasAttribute('role')) {
             this.setAttribute('role', 'application');
         }
-        // Tag the docked surface with a root path so it can act as
-        // a drop target when the main layout is empty.
-        this.dockedEl.dataset['path'] = this.formatPath({ type: 'docked', segments: [] });
-        this.render();
-        this.rootEl.addEventListener('dragover', this.onDragOver);
-        this.rootEl.addEventListener('drop', this.onDrop);
-        this.rootEl.addEventListener('dragleave', this.onDragLeave);
-        this.dropJoystick.addEventListener('dragover', this.onDragOver);
-        this.dropJoystick.addEventListener('drop', this.onDrop);
-        this.dropJoystick.addEventListener('dragleave', this.onDragLeave);
-        // Strengthen zone tracking by reacting to dragenter/dragover directly on the buttons.
-        // This avoids relying solely on hit-testing each frame which can be jittery during HTML5 drag.
-        this.dropJoystickButtons.forEach((btn) => {
-            const handler = (e) => {
-                if (!this.dragState)
-                    return;
-                const z = btn.dataset['zone'];
-                if (this.isDropZone(z)) {
-                    this.updateDropJoystickActiveZone(z);
-                    e.preventDefault();
-                }
-            };
-            btn.addEventListener('dragenter', handler);
-            btn.addEventListener('dragover', handler);
-        });
-        const win = this.windowRef;
-        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);
-        this.rootEl.removeEventListener('drop', this.onDrop);
-        this.rootEl.removeEventListener('dragleave', this.onDragLeave);
-        this.dropJoystick.removeEventListener('dragover', this.onDragOver);
-        this.dropJoystick.removeEventListener('drop', this.onDrop);
-        this.dropJoystick.removeEventListener('dragleave', this.onDragLeave);
         const win = this.windowRef;
-        win?.removeEventListener('dragover', this.onGlobalDragOver);
-        win?.removeEventListener('drag', this.onDrag);
-        win?.removeEventListener('dragend', this.onGlobalDragEnd, true);
         this.stopDragPointerTracking();
         win?.removeEventListener('pointermove', this.onPointerMove);
         win?.removeEventListener('pointerup', this.onPointerUp);
         this.pointerTrackingActive = false;
-        const win2 = this.windowRef;
-        win2?.removeEventListener('resize', this.onWindowResize);
+        this.rootResizeObserver?.disconnect();
+        this.rootResizeObserver = null;
+        this.dockedMutationObserver?.disconnect();
+        this.dockedMutationObserver = null;
+        this.dockedEl?.removeEventListener('resizing', this.onSplitterResize);
+        this.dockedEl?.removeEventListener('resize-end', this.onSplitterResize);
+        if (this.intersectionRaf !== null) {
+            this.windowRef?.clearTimeout(this.intersectionRaf);
+            this.intersectionRaf = null;
+        }
+        super.disconnectedCallback();
     }
     attributeChangedCallback(name, _oldValue, newValue) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
         if (name === 'layout') {
             this.layout = newValue ? this.parseLayout(newValue) : null;
         }
@@ -767,10 +621,51 @@ class MintDockManagerElement extends HTMLElement {
     }
     set layout(value) {
         const snapshot = this.ensureSnapshot(value);
+        // While a drag/resize is in flight, the dock manager is the source of
+        // truth for layout state — its mid-drag mutations (e.g. floating bounds
+        // updated every mousemove, or a stack split during a pane-drag-to-floating
+        // conversion) race the host's two-way binding round-trip. The host re-
+        // feeds the layout we *just* dispatched via `dock-layout-changed`, but by
+        // the time the round-trip arrives the user has moved the cursor again, so
+        // the structural-equality guard below would let it through and clobber the
+        // in-progress state (e.g. snap a freshly-detached floating window back to
+        // the converted-at coordinates instead of letting it follow the cursor).
+        // Reject any external layout write during interaction; the host will sync
+        // back to the dock's final state when interaction ends and the dock fires
+        // a fresh dock-layout-changed event.
+        if (this.isInteracting())
+            return;
+        // Skip renderLayout when the incoming layout is structurally identical
+        // to the current state. After a divider drag the dock dispatches
+        // dock-layout-changed; an Angular host doing two-way binding will feed
+        // that snapshot right back through `[layout]` (and through the
+        // `[attr.layout]` round-trip). Without this guard, every drag-end
+        // tears down and rebuilds the whole splitter tree, giving a one-frame
+        // flash of `flex: 1 1 0` equal-share before the pin restores sizes.
+        const currentJson = JSON.stringify({
+            root: this.rootLayout,
+            floating: this.floatingLayouts,
+            titles: this.titles,
+        });
+        const newJson = JSON.stringify(snapshot);
+        if (currentJson === newJson)
+            return;
         this.rootLayout = this.cloneLayoutNode(snapshot.root);
         this.floatingLayouts = this.cloneFloatingArray(snapshot.floating);
         this.titles = snapshot.titles ? { ...snapshot.titles } : {};
-        this.render();
+        this.renderLayout();
+    }
+    /**
+     * True while the user is actively interacting with the dock — pane drag,
+     * floating window drag, floating window resize, or intersection corner
+     * resize. The `set layout` setter consults this to refuse external
+     * round-trips that would overwrite in-progress drag state.
+     */
+    isInteracting() {
+        return !!(this.dragState ||
+            this.floatingDragState ||
+            this.floatingResizeState ||
+            this.cornerResizeState);
     }
     get snapshot() {
         return this.layout;
@@ -823,7 +718,12 @@ class MintDockManagerElement extends HTMLElement {
             titles: layout.titles ? { ...layout.titles } : {},
         };
     }
-    render() {
+    renderLayout() {
+        // The layout setter may run before firstUpdated() has populated the
+        // shadow-DOM fields (e.g. when an attribute is set on the markup).
+        // Bail out; firstUpdated() will call renderLayout() once ready.
+        if (!this.dockedEl)
+            return;
         this.dockedEl.innerHTML = '';
         this.floatingLayerEl.innerHTML = '';
         this.hideDropIndicator();
@@ -832,7 +732,10 @@ class MintDockManagerElement extends HTMLElement {
             this.dockedEl.appendChild(fragment);
         }
         this.renderFloatingPanes();
-        this.scheduleRenderIntersectionHandles();
+        // Note: intersection handles are repositioned reactively via observers
+        // wired up in firstUpdated (rootResizeObserver, dockedMutationObserver,
+        // and delegated 'resizing' / 'resize-end' events). The MutationObserver
+        // on dockedEl fires when the renderNode subtree above is appended.
     }
     renderNode(node, path, floatingIndex) {
         if (node.kind === 'split') {
@@ -927,104 +830,88 @@ class MintDockManagerElement extends HTMLElement {
             this.floatingLayerEl.appendChild(wrapper);
         });
     }
-    onWindowResize() {
-        // Recompute intersection handles on window resize
+    onSplitterResize() {
+        // mp-splitter dispatches 'resizing' continuously during a divider drag
+        // and 'resize-end' when the user releases. Both keep the handle glued
+        // to the new intersection coordinate.
         this.scheduleRenderIntersectionHandles();
     }
     scheduleRenderIntersectionHandles() {
-        this.intersectionRaf = null;
-        this.renderIntersectionHandles();
+        if (this.intersectionRaf !== null)
+            return;
+        const win = this.windowRef;
+        if (!win)
+            return;
+        // Defer with setTimeout(5) instead of rAF so we run AFTER any
+        // flex-redistribution settles. Sequence we have to wait through:
+        //   (1) DOM mutation (e.g. panel removed by drop)
+        //   (2) microtasks: <mp-splitter>'s slotchange + size-pinning rAF
+        //   (3) layout flush
+        // A bare rAF can fire before (2) resolves, so getBoundingClientRect on
+        // the dividers reads a transient flex-distributed position and the
+        // glyph lands ~tens of pixels off. 5ms is past the microtask queue and
+        // past splitter's pinning rAF in practice, so the divider rects we
+        // read are the settled, post-pin values.
+        this.intersectionRaf = win.setTimeout(() => {
+            this.intersectionRaf = null;
+            this.renderIntersectionHandles();
+        }, 5);
     }
     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
+        // Active corner-resize: keep st.handle alive (it owns pointer capture and
+        // the cornerResizeState references it). Update its position from current
+        // divider rects, drop every other handle by reference.
         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}"]`);
+            const hSplitter = this.findSplitterByPath(h0.path.segments);
+            const vSplitter = this.findSplitterByPath(v0.path.segments);
+            const hDiv = hSplitter ? this.getSplitterDividers(hSplitter)[h0.index] : null;
+            const vDiv = vSplitter ? this.getSplitterDividers(vSplitter)[v0.index] : null;
             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
+                st.handle.style.left = `${x}px`;
+                st.handle.style.top = `${y}px`;
                 Array.from(layer.querySelectorAll('.dock-intersection-handle')).forEach((el) => {
-                    if ((el.dataset['key'] ?? '') !== key) {
+                    if (el !== st.handle)
                         el.remove();
-                    }
                 });
-                // Normalize internal map as well
-                this.intersectionHandles = new Map([[key, handle]]);
             }
             return;
         }
-        const allDividers = Array.from(this.shadowRoot?.querySelectorAll('.dock-split__divider') ?? []);
+        // Idle path: full clear + rebuild. Cheaper to reason about than incremental
+        // diffing, and handles' positions are always derived from current divider
+        // rects so a layout change (drop, splitter restructure, flex redistribution)
+        // can never leave a stale glyph behind.
+        layer.replaceChildren();
         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 allSplitters = Array.from(this.shadowRoot?.querySelectorAll('.dock-split') ?? []);
+        allSplitters.forEach((splitter) => {
+            const direction = splitter.dataset['direction'];
+            const pathStr = splitter.dataset['path'] ?? '';
+            this.getSplitterDividers(splitter).forEach((el, index) => {
+                const info = { rect: el.getBoundingClientRect(), pathStr, index };
+                // direction='horizontal' means children flow left-to-right, so the
+                // divider bars between them are VERTICAL (and vice-versa).
+                if (direction === 'horizontal')
+                    vDividers.push(info);
+                else if (direction === '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();
+        // Group intersections that round to the same on-screen pixel, so two
+        // sibling splitters whose dividers happen to overlap share one handle.
+        const tol = 24;
+        const groups = new Map();
         hDividers.forEach((h) => {
             const hCenterY = h.rect.top + h.rect.height / 2;
             vDividers.forEach((v) => {
@@ -1035,53 +922,33 @@ class MintDockManagerElement extends HTMLElement {
                     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`;
+                const group = groups.get(gk) ?? { x, y, pairs: [] };
+                group.pairs.push({ h: { pathStr: h.pathStr, index: h.index }, v: { pathStr: v.pathStr, index: v.index } });
+                groups.set(gk, group);
             });
         });
-        // 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));
+        groups.forEach((group, gk) => {
+            const handle = this.documentRef.createElement('div');
+            handle.classList.add('dock-intersection-handle', 'glyph');
+            handle.setAttribute('role', 'separator');
+            handle.setAttribute('aria-label', 'Resize split intersection');
+            const firstPair = group.pairs[0];
+            const key = `${firstPair.h.pathStr}:${firstPair.h.index}|${firstPair.v.pathStr}:${firstPair.v.index}`;
+            handle.dataset['key'] = key;
+            handle.dataset['pairs'] = JSON.stringify(group.pairs);
+            handle.style.left = `${group.x}px`;
+            handle.style.top = `${group.y}px`;
+            // beginCornerResize/onIntersectionDoubleClick read data-pairs to
+            // reconstruct the (h, v) pair list, so the (h, v) args we pass here
+            // are only used as a fallback when data-pairs is empty — safe to use
+            // the first pair's structure as the seed.
+            const seedH = { path: this.parsePath(firstPair.h.pathStr), index: firstPair.h.index, container: this.findSplitterByPath(this.parsePath(firstPair.h.pathStr)?.segments ?? []) ?? this.rootEl, rect: new DOMRect() };
+            const seedV = { path: this.parsePath(firstPair.v.pathStr), index: firstPair.v.index, container: this.findSplitterByPath(this.parsePath(firstPair.v.pathStr)?.segments ?? []) ?? this.rootEl, rect: new DOMRect() };
+            handle.addEventListener('pointerdown', (ev) => this.beginCornerResize(ev, seedH, seedV, handle));
+            handle.addEventListener('dblclick', (ev) => this.onIntersectionDoubleClick(ev, handle));
+            layer.appendChild(handle);
         });
-        this.intersectionHandles = newMap;
     }
     beginCornerResize(event, h, v, handle) {
         event.preventDefault();
@@ -1094,20 +961,22 @@ class MintDockManagerElement extends HTMLElement {
             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)
+            const splitter = this.findSplitterByPath(path.segments);
+            if (!splitter)
                 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] });
-            }
+            // Initial pixel sizes come from each panel-wrapper inside the splitter's
+            // shadow root. We capture them once on pointerdown and feed deltas to
+            // setPanelSizes() during the drag.
+            const panels = this.getSplitterPanels(splitter);
+            if (panels.length === 0)
+                return;
+            const dim = axis === 'h' ? 'height' : 'width';
+            const initial = panels.map((p) => p.getBoundingClientRect()[dim]);
+            const entry = { path, index, container: splitter, initialSizes: initial, before: initial[index], after: initial[index + 1] };
+            if (axis === 'h')
+                hs.push(entry);
+            else
+                vs.push(entry);
         };
         if (parsed.length > 0) {
             parsed.forEach((p) => { ensureHV(p.h.pathStr, p.h.index, 'h'); ensureHV(p.v.pathStr, p.v.index, 'v'); });
@@ -1139,44 +1008,47 @@ class MintDockManagerElement extends HTMLElement {
         // Compute localized snap targets for this intersection
         try {
             const rootRect = this.rootEl.getBoundingClientRect();
-            // Use first pair to define the crossing lines
+            // Use first pair to define the crossing lines. Resolve dividers via
+            // each splitter's shadow root.
             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 vDiv = this.getSplitterDividers(vPair.container)[vPair.index];
                 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 hDiv = this.getSplitterDividers(hPair.container)[hPair.index];
                 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);
+            // Iterate every splitter, then flat-map its shadow dividers — a
+            // splitter's data-direction tells us whether its bars are vertical
+            // (horizontal split) or horizontal (vertical split).
+            const allSplitters = Array.from(this.shadowRoot?.querySelectorAll('.dock-split') ?? []);
+            allSplitters.forEach((splitter) => {
+                const direction = splitter.dataset['direction'] ?? undefined;
+                this.getSplitterDividers(splitter).forEach((el) => {
+                    const r = el.getBoundingClientRect();
+                    if (direction === '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);
+                    else if (direction === '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;
@@ -1237,49 +1109,37 @@ class MintDockManagerElement extends HTMLElement {
             if (bestDist <= tol)
                 clientY = best;
         }
-        // Update all horizontal bars (vertical splits) with Y delta
-        state.hs.forEach((h) => {
-            const node = this.resolveSplitNode(h.path);
+        // Apply the new pair sizes to one splitter's panel-wrappers via
+        // mp-splitter's setPanelSizes(pixels) API. We persist the normalized
+        // ratios on the layout node so renderSplit's initial sizing stays in sync.
+        const applyPairSize = (entry, delta) => {
+            const node = this.resolveSplitNode(entry.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);
+            const pairTotal = entry.beforeSize + entry.afterSize;
+            let newBefore = Math.min(Math.max(entry.beforeSize + delta, 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 sizesPx = [...entry.initialSizes];
+            sizesPx[entry.index] = newBefore;
+            sizesPx[entry.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`; });
-        });
+            node.sizes = total > 0 ? sizesPx.map((s) => s / total) : [];
+            entry.container
+                .setPanelSizes?.(sizesPx);
+        };
+        // Update all horizontal bars (vertical splits) with Y delta, then all
+        // vertical bars (horizontal splits) with X delta.
+        state.hs.forEach((h) => applyPairSize(h, clientY - h.startY));
+        state.vs.forEach((v) => applyPairSize(v, clientX - v.startX));
         this.dispatchLayoutChanged();
+        // setPanelSizes() is programmatic and doesn't fire 'resizing' events, so
+        // the delegated listener on dockedEl doesn't wake during a corner drag.
+        // Schedule the handle repositioning ourselves; renderIntersectionHandles
+        // has a fast-path for the active cornerResizeState that just updates
+        // left/top from the new divider rects.
+        this.scheduleRenderIntersectionHandles();
     }
     endCornerResize(pointerId) {
         const state = this.cornerResizeState;
@@ -1323,7 +1183,28 @@ class MintDockManagerElement extends HTMLElement {
         let hasStored = false;
         splitKeys.forEach((k) => { if (this.previousSplitSizes.has(k))
             hasStored = true; });
-        const applySizes = (pathStr, mutate) => {
+        // Persist `node.sizes` (normalized) and push pixel sizes into the
+        // matching <mp-splitter> via setPanelSizes(). The splitter's panel
+        // wrappers live in its shadow DOM, so direct flex mutation is no
+        // longer an option.
+        const pushSizesToSplitter = (path, normalized) => {
+            const splitter = this.findSplitterByPath(path.segments);
+            if (!splitter)
+                return;
+            const direction = splitter.dataset['direction'] ?? 'horizontal';
+            const containerSize = direction === 'horizontal'
+                ? splitter.getBoundingClientRect().width
+                : splitter.getBoundingClientRect().height;
+            if (!Number.isFinite(containerSize) || containerSize <= 0)
+                return;
+            const totalWeight = normalized.reduce((s, w) => s + Math.max(w, 0), 0);
+            if (totalWeight <= 0)
+                return;
+            const px = normalized.map((w) => (Math.max(w, 0) / totalWeight) * containerSize);
+            splitter
+                .setPanelSizes?.(px);
+        };
+        const applySizes = (pathStr, dividerIndex, mutate) => {
             const path = this.parsePath(pathStr);
             if (!path)
                 return;
@@ -1331,35 +1212,20 @@ class MintDockManagerElement extends HTMLElement {
             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);
+            const newSizes = mutate([...sizes], dividerIndex);
             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`; });
-            }
+            pushSizesToSplitter(path, newSizes);
         };
         if (hasStored) {
             // Restore stored sizes
             this.previousSplitSizes.forEach((sizes, pathStr) => {
                 const path = this.parsePath(pathStr);
                 const node = path ? this.resolveSplitNode(path) : null;
-                if (!node)
+                if (!node || !path)
                     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`; });
-                }
+                pushSizesToSplitter(path, norm);
             });
             this.previousSplitSizes.clear();
         }
@@ -1377,16 +1243,7 @@ class MintDockManagerElement extends HTMLElement {
                     }
                     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 equalize = (sizes, idx) => {
                     const total = (sizes[idx] ?? 0) + (sizes[idx + 1] ?? 0);
                     if (total <= 0)
                         return sizes;
@@ -1394,7 +1251,9 @@ class MintDockManagerElement extends HTMLElement {
                     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.h.pathStr, p.h.index, equalize);
+                applySizes(p.v.pathStr, p.v.index, equalize);
             });
         }
         this.dispatchLayoutChanged();
@@ -1482,11 +1341,13 @@ class MintDockManagerElement extends HTMLElement {
         }
         try {
             state.handle.releasePointerCapture(state.pointerId);
-            delete state.handle.dataset['resizing'];
         }
         catch (err) {
             /* no-op */
         }
+        // Clear outside the try so a thrown releasePointerCapture (capture
+        // already lost) doesn't strand the handle in its visual drag state.
+        delete state.handle.dataset['resizing'];
         const dropHandled = state.dropTarget
             ? this.handleFloatingStackDrop(state.index, state.dropTarget.path, state.dropTarget.zone)
             : false;
@@ -1582,6 +1443,12 @@ class MintDockManagerElement extends HTMLElement {
         catch (err) {
             /* no-op */
         }
+        // Clear `data-resizing` outside the try — releasePointerCapture can
+        // throw if the capture was already lost (e.g., the pointer left the
+        // window), and we still need to drop the resizing attribute or the
+        // CSS rule `.dock-floating__resizer[data-resizing='true']` keeps the
+        // border dark-blue forever.
+        delete state.handle.dataset['resizing'];
         this.floatingResizeState = null;
         this.dispatchLayoutChanged();
     }
@@ -1630,7 +1497,6 @@ class MintDockManagerElement extends HTMLElement {
     }
     stopPointerTrackingIfIdle() {
         if (this.pointerTrackingActive &&
-            !this.resizeState &&
             !this.floatingDragState &&
             !this.floatingResizeState &&
             !this.cornerResizeState) {
@@ -1672,63 +1538,102 @@ class MintDockManagerElement extends HTMLElement {
         titleEl.textContent = this.getFloatingWindowTitle(floating);
     }
     renderSplit(node, path, floatingIndex) {
-        const container = this.documentRef.createElement('div');
-        container.classList.add('dock-split');
-        container.dataset['direction'] = node.direction;
-        container.dataset['path'] = path.join('/');
-        const sizes = Array.isArray(node.sizes) ? node.sizes : [];
+        // Each DockSplitNode renders as <mp-splitter>. The dock keeps its `.dock-split`
+        // class on the host so existing `closest('.dock-split')` queries continue to
+        // resolve, and stamps `data-direction` / `data-path` for the tree-driven
+        // intersection-handle math.
+        const splitter = this.documentRef.createElement('mp-splitter');
+        splitter.classList.add('dock-split');
+        splitter.dataset['direction'] = node.direction;
+        splitter.dataset['path'] = path.join('/');
+        // mp-splitter uses 'horizontal' (left-right) and 'vertical' (top-bottom).
+        // The dock's DockSplitNode.direction matches that vocabulary 1:1.
+        splitter.setAttribute('orientation', node.direction);
+        const splitPath = typeof floatingIndex === 'number'
+            ? { type: 'floating', index: floatingIndex, segments: [...path] }
+            : { type: 'docked', segments: [...path] };
         node.children.forEach((child, index) => {
-            const childWrapper = this.documentRef.createElement('div');
-            childWrapper.classList.add('dock-split__child');
-            childWrapper.dataset['index'] = String(index);
-            const size = sizes[index];
-            if (typeof size === 'number' && Number.isFinite(size)) {
-                childWrapper.style.flex = `${Math.max(size, 0)} 1 0`;
-            }
-            else {
-                childWrapper.style.flex = '1 1 0';
-            }
-            childWrapper.appendChild(this.renderNode(child, [...path, index], floatingIndex));
-            container.appendChild(childWrapper);
-            if (index < node.children.length - 1) {
-                const divider = this.documentRef.createElement('div');
-                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));
-                container.appendChild(divider);
+            // mp-splitter accepts direct children — it wraps each in a panel-wrapper
+            // inside its shadow DOM and projects via a named slot per index.
+            splitter.appendChild(this.renderNode(child, [...path, index], floatingIndex));
+        });
+        // Apply persisted sizes from the layout tree once mp-splitter has built
+        // its panel wrappers. mp-splitter's setPanelSizes interprets values as
+        // pixel widths/heights; the dock's saved sizes are flex weights, so
+        // convert using the splitter's measured cross-axis container size.
+        const sizes = Array.isArray(node.sizes) ? node.sizes : [];
+        if (sizes.length > 0) {
+            requestAnimationFrame(() => {
+                const totalWeight = sizes.reduce((s, w) => s + Math.max(w, 0), 0);
+                if (totalWeight <= 0)
+                    return;
+                const containerSize = node.direction === 'horizontal'
+                    ? splitter.getBoundingClientRect().width
+                    : splitter.getBoundingClientRect().height;
+                if (!Number.isFinite(containerSize) || containerSize <= 0)
+                    return;
+                const px = sizes.map((w) => (Math.max(w, 0) / totalWeight) * containerSize);
+                splitter
+                    .setPanelSizes?.(px);
+            });
+        }
+        // mp-splitter fires resize-end with pixel sizes after a divider drag.
+        // Convert back to flex weights (sum to a stable total — keep current sum
+        // so future renders interpret consistently) and persist to the layout tree.
+        splitter.addEventListener('resize-end', (event) => {
+            // resize-end bubbles, so a nested mp-splitter's drag end would also
+            // reach this listener. Only react to events from THIS splitter, not
+            // from a descendant — otherwise we'd apply the inner's sizes to the
+            // outer's splitNode and mangle the outer's weights.
+            if (event.target !== splitter)
+                return;
+            const detail = event.detail;
+            if (!Array.isArray(detail?.sizes) || detail.sizes.length === 0)
+                return;
+            const splitNode = this.resolveSplitNode(splitPath);
+            if (!splitNode)
+                return;
+            const previousTotal = (splitNode.sizes ?? []).reduce((s, w) => s + Math.max(w, 0), 0);
+            const total = detail.sizes.reduce((s, v) => s + Math.max(v, 0), 0);
+            const targetTotal = previousTotal > 0 ? previousTotal : detail.sizes.length;
+            if (total > 0) {
+                splitNode.sizes = detail.sizes.map((px) => (Math.max(px, 0) / total) * targetTotal);
+                this.dispatchLayoutChanged();
             }
         });
-        return container;
+        return splitter;
     }
     renderStack(node, path, floatingIndex) {
-        const stack = this.documentRef.createElement('div');
+        // Dock stacks are rendered as <mp-tab-control>. The dock keeps `.dock-stack`
+        // as a class on the host so existing `closest('.dock-stack')` queries
+        // continue to resolve. The tab strip + body slot projection are owned by
+        // mp-tab-control; the dock just provides the slotted header/content
+        // elements and listens for tab-activate to drive layout-tree updates.
+        const stack = this.documentRef.createElement('mp-tab-control');
         stack.classList.add('dock-stack');
+        // Dock controls activation; tell mp-tab-control not to auto-pick.
+        stack.setAttribute('select-first-tab', 'false');
+        // `border="top"` gives us the strip-cutout line under the tabs (so the
+        // active tab visually punches through into the body) without adding the
+        // full Bootstrap frame, which would double up with the dock's own outer
+        // chrome border on `.dock-stack` (and on `.dock-floating` for floating
+        // panels).
+        stack.setAttribute('border', 'top');
         const location = typeof floatingIndex === 'number'
             ? { type: 'floating', index: floatingIndex, segments: [...path] }
             : { type: 'docked', segments: [...path] };
         stack.dataset['path'] = this.formatPath(location);
-        const header = this.documentRef.createElement('div');
-        header.classList.add('dock-stack__header');
-        header.setAttribute('role', 'tablist');
-        const content = this.documentRef.createElement('div');
-        content.classList.add('dock-stack__content');
         const panes = Array.from(new Set(node.panes));
         if (panes.length === 0) {
+            const emptyHeader = this.documentRef.createElement('span');
+            emptyHeader.setAttribute('slot', '__empty__-header');
+            emptyHeader.textContent = '(empty)';
             const empty = this.documentRef.createElement('div');
+            empty.setAttribute('slot', '__empty__-content');
             empty.classList.add('dock-stack__pane');
             empty.textContent = 'No panes configured';
-            content.appendChild(empty);
-            stack.append(header, content);
+            stack.append(emptyHeader, empty);
+            stack.setAttribute('active-tab', '__empty__');
             return stack;
         }
         const activePane = panes.includes(node.activePane ?? '')
@@ -1741,228 +1646,114 @@ class MintDockManagerElement extends HTMLElement {
             const paneSlug = paneSlugRaw.length > 0 ? paneSlugRaw : 'pane';
             const tabId = `${this.instanceId}-tab-${pathSlug}-${paneSlug}`;
             const panelId = `${this.instanceId}-panel-${pathSlug}-${paneSlug}`;
-            const button = this.documentRef.createElement('button');
-            button.type = 'button';
-            button.classList.add('dock-tab');
-            button.dataset['pane'] = paneName;
-            button.id = tabId;
-            button.textContent = this.titles[paneName] ?? paneName;
-            button.setAttribute('role', 'tab');
-            button.setAttribute('aria-controls', panelId);
-            if (paneName === activePane) {
-                button.classList.add('dock-tab--active');
-            }
-            button.setAttribute('aria-selected', String(paneName === activePane));
-            button.draggable = true;
-            button.addEventListener('pointerdown', (event) => {
-                const stackEl = button.closest('.dock-stack');
-                this.captureTabDragMetrics(event, stackEl ?? null);
+            // Header span — projected via mp-tab-control's `${tabId}-header` slot
+            // into the strip's button content. Carries the dock's drag handlers.
+            const headerSpan = this.documentRef.createElement('span');
+            headerSpan.setAttribute('slot', `${tabId}-header`);
+            headerSpan.classList.add('dock-tab');
+            headerSpan.dataset['pane'] = paneName;
+            headerSpan.dataset['tabId'] = tabId;
+            headerSpan.textContent = this.titles[paneName] ?? paneName;
+            // Pointer-only drag (no HTML5 dnd). pointerdown captures metrics + arms
+            // a threshold gesture; once the pointer moves >threshold pixels we
+            // promote it to a real pane drag via beginPaneDrag. Using pointer
+            // events sidesteps the entire class of HTML5 dnd quirks (cancellation
+            // when source DOM is removed mid-drag, suppressed mousemove, bogus 0/0
+            // coordinates in Firefox, browser-specific drag-image behavior).
+            headerSpan.addEventListener('pointerdown', (event) => {
+                this.captureTabDragMetrics(event, stack);
+                this.armPaneDragGesture(event, this.clonePath(location), paneName, stack);
                 event.stopPropagation();
             });
-            button.addEventListener('pointerup', () => this.clearPendingTabDragMetrics());
-            button.addEventListener('pointercancel', () => this.clearPendingTabDragMetrics());
-            button.addEventListener('dragstart', (event) => {
-                const stackEl = button.closest('.dock-stack');
-                this.beginPaneDrag(event, this.clonePath(location), paneName, stackEl ?? null);
-            });
-            button.addEventListener('dragend', () => {
-                this.endPaneDrag();
-                this.clearPendingTabDragMetrics();
-            });
-            button.addEventListener('click', () => {
-                this.activatePane(stack, paneName, this.clonePath(location));
-                this.dispatchEvent(new CustomEvent('dock-pane-activated', {
-                    detail: { pane: paneName },
-                    bubbles: true,
-                    composed: true,
-                }));
-            });
-            header.appendChild(button);
+            // Content wrapper — projected via mp-tab-control's `${tabId}-content`
+            // slot only when this tab is active. Holds the dock manager's per-pane
+            // <slot> for the consumer's content.
             const paneHost = this.documentRef.createElement('div');
+            paneHost.setAttribute('slot', `${tabId}-content`);
             paneHost.classList.add('dock-stack__pane');
             paneHost.dataset['pane'] = paneName;
+            paneHost.dataset['tabId'] = tabId;
             paneHost.id = panelId;
-            paneHost.setAttribute('role', 'tabpanel');
-            paneHost.setAttribute('aria-labelledby', tabId);
-            if (paneName !== activePane) {
-                paneHost.setAttribute('hidden', '');
-            }
             const slotEl = this.documentRef.createElement('slot');
             slotEl.name = paneName;
             paneHost.appendChild(slotEl);
-            content.appendChild(paneHost);
+            stack.append(headerSpan, paneHost);
+            if (paneName === activePane) {
+                stack.setAttribute('active-tab', tabId);
+            }
         });
         stack.dataset['activePane'] = activePane;
-        stack.append(header, content);
+        // Drive activatePane from mp-tab-control's tab-activate event. We map the
+        // tabId back to the original paneName via the header span's data-pane.
+        stack.addEventListener('tab-activate', (event) => {
+            const detail = event.detail;
+            const headerSpan = stack.querySelector(`:scope > [data-tab-id="${detail.tabId}"]`);
+            const paneName = headerSpan?.dataset['pane'];
+            if (paneName) {
+                this.activatePane(stack, paneName, this.clonePath(location));
+                this.dispatchEvent(new CustomEvent('dock-pane-activated', {
+                    detail: { pane: paneName },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        });
         return stack;
     }
-    beginResize(event, container, path, index) {
-        event.preventDefault();
-        const divider = event.currentTarget;
-        if (!divider) {
-            return;
-        }
-        const orientation = container.dataset['direction'] ?? 'horizontal';
-        const children = Array.from(container.querySelectorAll(':scope > .dock-split__child'));
-        const initialSizes = children.map((child) => {
-            const rect = child.getBoundingClientRect();
-            return orientation === 'horizontal' ? rect.width : rect.height;
-        });
-        const beforeSize = initialSizes[index];
-        const afterSize = initialSizes[index + 1];
-        const startPos = orientation === 'horizontal' ? event.clientX : event.clientY;
-        divider.setPointerCapture(event.pointerId);
-        divider.dataset['resizing'] = 'true';
-        this.resizeState = {
-            path: this.clonePath(path),
-            index,
-            pointerId: event.pointerId,
-            orientation,
-            container,
-            divider,
-            startPos,
-            initialSizes,
-            beforeSize,
-            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();
-        }
+    /**
+     * Returns the strip (`.tsc`) element inside an `<mp-tab-control>`'s shadow
+     * DOM. Used by drag/drop logic that needs the strip's geometry instead of
+     * the host element's bounds.
+     */
+    getStackStripEl(stack) {
+        if (stack.tagName !== 'MP-TAB-CONTROL')
+            return null;
+        return stack.shadowRoot?.querySelector('.tsc') ?? null;
+    }
+    /**
+     * Returns the rendered tab buttons inside an `<mp-tab-control>`'s shadow
+     * strip — the light-DOM `.dock-tab` spans the dock owns are projected into
+     * these buttons via `<slot>`. Use these for geometry / position queries
+     * (insert-index computation, drop-indicator placement). Use the light-DOM
+     * `.dock-tab` spans for data queries (paneName, drag listeners).
+     */
+    getStackTabButtons(stack) {
+        if (stack.tagName !== 'MP-TAB-CONTROL')
+            return [];
+        return Array.from(stack.shadowRoot?.querySelectorAll('button.nav-link') ?? []);
+    }
+    /**
+     * Returns the dividers inside an `<mp-splitter>`'s shadow DOM, in DOM order.
+     * mp-splitter renders one `.divider` between each pair of adjacent panels,
+     * so for an N-child split, length N-1.
+     */
+    getSplitterDividers(splitter) {
+        if (splitter.tagName !== 'MP-SPLITTER')
+            return [];
+        return Array.from(splitter.shadowRoot?.querySelectorAll('.divider') ?? []);
+    }
+    /**
+     * Returns the panel wrappers inside an `<mp-splitter>`'s shadow DOM, in
+     * DOM order. These are the elements mp-splitter sizes (via setPanelSizes)
+     * during a divider drag — the dock reads their geometry for intersection
+     * handle math and snap markers.
+     */
+    getSplitterPanels(splitter) {
+        if (splitter.tagName !== 'MP-SPLITTER')
+            return [];
+        return Array.from(splitter.shadowRoot?.querySelectorAll('.panel-wrapper') ?? []);
+    }
+    /**
+     * Locate the rendered `<mp-splitter>` element for a given DockPath
+     * `segments` value (the split-tree path). Searches the dock's shadow.
+     */
+    findSplitterByPath(segments) {
+        return (this.shadowRoot?.querySelector(`.dock-split[data-path="${segments.join('/')}"]`) ?? null);
     }
     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;
-            }
-            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 = 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;
-            }
-            if (newAfter < minSize) {
-                newAfter = minSize;
-                newBefore = pairTotal - minSize;
-            }
-            const newSizesPixels = [...state.initialSizes];
-            newSizesPixels[state.index] = newBefore;
-            newSizesPixels[state.index + 1] = newAfter;
-            const total = newSizesPixels.reduce((acc, size) => acc + size, 0);
-            const normalized = total > 0 ? newSizesPixels.map((size) => size / total) : [];
-            splitNode.sizes = normalized;
-            const children = Array.from(state.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();
-        }
         if (this.floatingResizeState && event.pointerId === this.floatingResizeState.pointerId) {
             this.handleFloatingResizeMove(event);
         }
@@ -1974,15 +1765,6 @@ class MintDockManagerElement extends HTMLElement {
         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);
         }
@@ -2022,30 +1804,55 @@ class MintDockManagerElement extends HTMLElement {
     clearPendingTabDragMetrics() {
         this.pendingTabDragMetrics = null;
     }
+    /**
+     * Pointerdown handler arms a "may become a drag" gesture. Once the pointer
+     * moves past `threshold` pixels we promote it to an actual pane drag via
+     * {@link beginPaneDrag}; if the user releases first we just clear the
+     * pending tab metrics. All listeners self-clean on resolve so the gesture
+     * stays scoped to a single pointerdown.
+     */
+    armPaneDragGesture(startEvent, path, pane, stackEl) {
+        if (startEvent.pointerType === 'mouse' && startEvent.button !== 0)
+            return;
+        const win = this.windowRef;
+        if (!win)
+            return;
+        const startX = startEvent.clientX;
+        const startY = startEvent.clientY;
+        const pointerId = startEvent.pointerId;
+        const threshold = 5;
+        let resolved = false;
+        const cleanup = () => {
+            resolved = true;
+            win.removeEventListener('pointermove', onMove, true);
+            win.removeEventListener('pointerup', onRelease, true);
+            win.removeEventListener('pointercancel', onRelease, true);
+        };
+        const onMove = (event) => {
+            if (resolved || event.pointerId !== pointerId)
+                return;
+            const dx = event.clientX - startX;
+            const dy = event.clientY - startY;
+            if (Math.hypot(dx, dy) < threshold)
+                return;
+            cleanup();
+            this.beginPaneDrag(event, path, pane, stackEl);
+        };
+        const onRelease = (event) => {
+            if (resolved || event.pointerId !== pointerId)
+                return;
+            cleanup();
+            this.clearPendingTabDragMetrics();
+        };
+        win.addEventListener('pointermove', onMove, true);
+        win.addEventListener('pointerup', onRelease, true);
+        win.addEventListener('pointercancel', onRelease, true);
+    }
     beginPaneDrag(event, path, pane, stackEl) {
-        if (!event.dataTransfer) {
-            return;
-        }
-        // Create a ghost element for the drag image. This prevents the browser from cancelling
-        // the drag operation when the original element is removed from the DOM during re-render.
-        const ghost = event.currentTarget.cloneNode(true);
-        ghost.style.position = 'absolute';
-        ghost.style.left = '-9999px';
-        ghost.style.top = '-9999px';
-        ghost.style.width = `${event.currentTarget.offsetWidth}px`;
-        ghost.style.height = `${event.currentTarget.offsetHeight}px`;
-        this.shadowRoot?.appendChild(ghost);
-        // Use the ghost element as the drag image.
-        // The offset is set to where the user's cursor is on the original element.
-        const dragImgOffsetX = Number.isFinite(event.offsetX) ? event.offsetX : 0;
-        const dragImgOffsetY = Number.isFinite(event.offsetY) ? event.offsetY : 0;
-        event.dataTransfer.setDragImage(ghost, dragImgOffsetX, dragImgOffsetY);
-        // The ghost element is no longer needed after the drag image is set.
-        // We defer its removal to ensure the browser has captured it.
-        setTimeout(() => ghost.remove(), 0);
         const { path: sourcePath, floatingIndex, pointerOffsetX, pointerOffsetY, } = this.preparePaneDragSource(path, pane, stackEl, event);
-        // Capture header bounds for detecting when to convert to floating
-        const headerEl = stackEl?.querySelector('.dock-stack__header') ?? null;
+        // Capture header bounds for detecting when to convert to floating.
+        // The strip lives inside the mp-tab-control's shadow as `.tsc`.
+        const headerEl = stackEl ? this.getStackStripEl(stackEl) : null;
         const headerRect = headerEl ? headerEl.getBoundingClientRect() : null;
         const headerBounds = headerRect
             ? { left: headerRect.left, top: headerRect.top, right: headerRect.right, bottom: headerRect.bottom }
@@ -2062,36 +1869,26 @@ class MintDockManagerElement extends HTMLElement {
             sourceHeaderBounds: headerBounds,
             startClientX: metrics && Number.isFinite(metrics.startClientX)
                 ? metrics.startClientX
-                : Number.isFinite(event.clientX)
-                    ? event.clientX
-                    : undefined,
+                : event.clientX,
             startClientY: metrics && Number.isFinite(metrics.startClientY)
                 ? metrics.startClientY
-                : Number.isFinite(event.clientY)
-                    ? event.clientY
-                    : undefined,
+                : event.clientY,
         };
-        // Seed last known pointer position from pointerdown metrics to avoid (0,0) glitches in Firefox
-        if (this.dragState.startClientX !== undefined &&
-            this.dragState.startClientY !== undefined &&
-            Number.isFinite(this.dragState.startClientX) &&
-            Number.isFinite(this.dragState.startClientY)) {
-            this.lastDragPointerPosition = {
-                x: this.dragState.startClientX,
-                y: this.dragState.startClientY,
-            };
-        }
-        // Prefer the pointer offset relative to the dragged tab to avoid jumps on conversion
-        if (Number.isFinite(event.offsetX)) {
-            this.dragState.pointerOffsetX = event.offsetX;
-        }
-        if (Number.isFinite(event.offsetY)) {
-            this.dragState.pointerOffsetY = event.offsetY;
-        }
-        this.updateDraggedFloatingPosition(event);
+        this.lastDragPointerPosition = {
+            x: this.dragState.startClientX,
+            y: this.dragState.startClientY,
+        };
+        // pointerOffsetX/Y from preparePaneDragSource is the offset within the
+        // source stack rect captured at pointerdown by captureTabDragMetrics.
+        // Don't overwrite with event.offsetX/Y here — the threshold-trigger
+        // pointermove fired on window, so its offset is in window-local coords
+        // (≈ clientX/Y) which would crash the conversion math to ~(0,0).
+        this.updateDraggedFloatingPositionFromPoint(event.clientX, event.clientY);
         this.startDragPointerTracking();
-        event.dataTransfer.effectAllowed = 'move';
-        event.dataTransfer.setData('text/plain', pane);
+        // Mark the source floating wrapper (if any) so its CSS rule kicks in and
+        // pointer-events:none lets findStackAtPoint see through to the docked
+        // stack underneath, enabling drop zones over the dock during the drag.
+        this.markDraggedFloatingWrapper();
         // 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).
@@ -2099,18 +1896,16 @@ class MintDockManagerElement extends HTMLElement {
             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") {
+                if (loc.context === 'docked') {
                     shouldConvert = true;
                 }
-                else if (loc.context === "floating") {
+                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
+                    shouldConvert = totalPanes > 1;
                 }
                 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);
+                    this.convertPendingTabDragToFloating(event.clientX, event.clientY);
                 }
             }
         }
@@ -2192,134 +1987,27 @@ class MintDockManagerElement extends HTMLElement {
     }
     endPaneDrag() {
         this.clearPendingDragEndTimeout();
+        // Restore the dragged tab's `data-hidden` and remove the placeholder span
+        // BEFORE we null out dragState — clearHeaderDragPlaceholder reads
+        // `dragState.placeholderEl`, `dragState.placeholderHeader`, and
+        // `dragState.pane` to know what to restore. If dragState is nulled first,
+        // this becomes a silent no-op and the dragged pane stays hidden in its
+        // source stack while the placeholder span lingers in the strip — which
+        // is exactly the "Panel disappears, only a small tab-thumb remains"
+        // regression the multi-pane drag-out path can otherwise trigger when
+        // no renderLayout() runs between conversion and end (e.g. user releases
+        // outside any drop zone, or HTML5 dragend fires without a drop).
+        this.clearHeaderDragPlaceholder();
+        this.clearDraggedFloatingWrapperMarkers();
         const state = this.dragState;
         this.dragState = null;
         this.hideDropIndicator();
-        this.clearHeaderDragPlaceholder();
         this.stopDragPointerTracking();
         this.lastDragPointerPosition = null;
         if (state && state.floatingIndex !== null && !state.dropHandled) {
             this.dispatchLayoutChanged();
         }
     }
-    onDragOver(event) {
-        if (!this.dragState) {
-            return;
-        }
-        event.preventDefault();
-        // Keep internal pointer tracking up-to-date.
-        this.updateDraggedFloatingPosition(event);
-        if (event.dataTransfer) {
-            event.dataTransfer.dropEffect = 'move';
-        }
-        // Some browsers intermittently report (0,0) for dragover coordinates.
-        // Mirror the robust logic used in onDrop: prefer actual event coordinates
-        // when valid, otherwise fall back to the last tracked pointer position.
-        const pointFromEvent = Number.isFinite(event.clientX) && Number.isFinite(event.clientY)
-            ? { clientX: event.clientX, clientY: event.clientY }
-            : null;
-        const point = pointFromEvent ??
-            (this.lastDragPointerPosition
-                ? { clientX: this.lastDragPointerPosition.x, clientY: this.lastDragPointerPosition.y }
-                : null);
-        const stack = this.findStackElement(event) ??
-            (point ? this.findStackAtPoint(point.clientX, point.clientY) : null);
-        if (!stack) {
-            if (this.dropJoystick.dataset['visible'] !== 'true') {
-                this.hideDropIndicator();
-            }
-            return;
-        }
-        const path = this.parsePath(stack.dataset['path']);
-        // While reordering within the same header, suppress the joystick/indicator entirely
-        if (this.dragState &&
-            this.dragState.floatingIndex !== null &&
-            this.dragState.floatingIndex < 0 &&
-            path &&
-            this.pathsEqual(path, this.dragState.sourcePath)) {
-            const px = (point ? point.clientX : event.clientX);
-            const py = (point ? point.clientY : event.clientY);
-            if (Number.isFinite(px) && Number.isFinite(py) && this.isPointerOverSourceHeader(px, py)) {
-                // Drive live reorder using the unified path so we update instantly.
-                this.updatePaneDragDropTargetFromPoint(px, py);
-                this.hideDropIndicator();
-                return;
-            }
-        }
-        // If the hovered stack changed, clear any sticky zone from the previous
-        // target before computing the new zone.
-        if (this.dropJoystickTarget && this.dropJoystickTarget !== stack) {
-            delete this.dropJoystick.dataset['zone'];
-            this.updateDropJoystickActiveZone(null);
-        }
-        const eventZoneHint = this.extractDropZoneFromEvent(event);
-        const pointZoneHint = point ? this.findDropZoneByPoint(point.clientX, point.clientY) : null;
-        const zone = this.computeDropZone(stack, point ?? event, pointZoneHint ?? eventZoneHint);
-        this.showDropIndicator(stack, zone);
-    }
-    updateDraggedFloatingPosition(event) {
-        if (!this.dragState) {
-            return;
-        }
-        const { clientX, clientY } = event;
-        const hasValidCoordinates = Number.isFinite(clientX) &&
-            Number.isFinite(clientY) &&
-            !(clientX === 0 && clientY === 0);
-        if (hasValidCoordinates) {
-            this.lastDragPointerPosition = { x: clientX, y: clientY };
-            this.updateDraggedFloatingPositionFromPoint(clientX, clientY);
-            return;
-        }
-        if (this.lastDragPointerPosition) {
-            const { x, y } = this.lastDragPointerPosition;
-            this.updateDraggedFloatingPositionFromPoint(x, y);
-        }
-    }
-    onGlobalDragOver(event) {
-        if (!this.dragState) {
-            return;
-        }
-        this.updateDraggedFloatingPosition(event);
-    }
-    onDrag(event) {
-        if (!this.dragState) {
-            return;
-        }
-        this.updateDraggedFloatingPosition(event);
-    }
-    onGlobalDragEnd() {
-        // Attempt to finalize a drop even if the drop event doesn't reach us (Firefox/edge cases)
-        const state = this.dragState;
-        const pos = this.lastDragPointerPosition;
-        if (state && pos) {
-            const stack = this.findStackAtPoint(pos.x, pos.y);
-            const joystickVisible = this.dropJoystick.dataset['visible'] === 'true';
-            const joystickPath = this.parsePath(this.dropJoystick.dataset['path']);
-            const joystickTarget = this.dropJoystickTarget;
-            const joystickTargetPath = joystickTarget ? this.parsePath(joystickTarget.dataset['path']) : null;
-            const path = stack ? this.parsePath(stack.dataset['path']) : (joystickPath ?? joystickTargetPath);
-            const joystickZone = this.dropJoystick.dataset['zone'];
-            const zone = this.isDropZone(joystickZone)
-                ? joystickZone
-                : (stack ? this.computeDropZone(stack, { clientX: pos.x, clientY: pos.y }, null) : null);
-            if (path && this.isDropZone(zone)) {
-                this.handleDrop(path, zone);
-                this.hideDropIndicator();
-                if (this.dragState) {
-                    this.dragState.dropHandled = true;
-                }
-            }
-        }
-        else {
-            this.hideDropIndicator();
-        }
-        if (!this.dragState) {
-            this.clearPendingTabDragMetrics();
-            return;
-        }
-        this.endPaneDrag();
-        this.clearPendingTabDragMetrics();
-    }
     updateDraggedFloatingPositionFromPoint(clientX, clientY) {
         if (!this.dragState) {
             return;
@@ -2327,10 +2015,6 @@ class MintDockManagerElement extends HTMLElement {
         if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
             return;
         }
-        // Ignore obviously bogus coordinates sometimes seen during HTML5 drag
-        if (clientX === 0 && clientY === 0) {
-            return;
-        }
         // If still dragging a tab inside its header, only convert to floating once we leave the header.
         if (this.dragState.floatingIndex !== null && this.dragState.floatingIndex < 0) {
             const b = this.dragState.sourceHeaderBounds;
@@ -2401,16 +2085,15 @@ class MintDockManagerElement extends HTMLElement {
             const inHeaderByBounds = !!this.dragState.sourceHeaderBounds && this.isPointWithinBounds(this.dragState.sourceHeaderBounds, clientX, clientY);
             const inHeaderByHitTest = this.isPointerOverSourceHeader(clientX, clientY);
             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.updateHeaderDragPlaceholderPosition(header, idx);
-                        // Keep model reordering until drop; only move the placeholder now
-                        this.dragState.liveReorderIndex = idx;
-                    }
+                // Ensure placeholder exists and move it as the pointer moves.
+                // Placeholder management mutates the slotted children of the
+                // mp-tab-control stack; the WC re-renders the strip on slotchange.
+                this.ensureHeaderDragPlaceholder(stack, this.dragState.pane);
+                const idx = this.computeHeaderInsertIndex(stack, clientX);
+                if (this.dragState.liveReorderIndex !== idx) {
+                    this.updateHeaderDragPlaceholderPosition(stack, idx);
+                    // Keep model reordering until drop; only move the placeholder now
+                    this.dragState.liveReorderIndex = idx;
                 }
                 this.hideDropIndicator();
                 return;
@@ -2422,81 +2105,125 @@ class MintDockManagerElement extends HTMLElement {
         const zone = this.computeDropZone(stack, { clientX, clientY }, zoneHint);
         this.showDropIndicator(stack, zone);
     }
-    // Returns true when the pointer is currently over the source stack's header (tab strip)
+    // Returns true when the pointer is currently over the source stack's header (tab strip).
+    // The strip lives inside the mp-tab-control's shadow as `.tsc`, so we test
+    // bounds directly rather than using elementsFromPoint(/contains) which won't
+    // pierce the shadow boundary cleanly.
     isPointerOverSourceHeader(clientX, clientY) {
         const state = this.dragState;
         if (!state) {
             return false;
         }
         const stackEl = state.sourceStackEl ?? null;
-        const header = stackEl?.querySelector('.dock-stack__header');
-        if (!header) {
-            // Be conservative: if we cannot resolve the header, treat as inside
+        const strip = stackEl ? this.getStackStripEl(stackEl) : null;
+        if (!strip) {
+            // Be conservative: if we cannot resolve the strip, treat as inside
             return true;
         }
-        const sr = this.shadowRoot;
-        const elements = sr ? sr.elementsFromPoint(clientX, clientY) : [];
-        for (const el of elements) {
-            if (el instanceof HTMLElement && header.contains(el)) {
-                return true;
-            }
-        }
-        return false;
+        const r = strip.getBoundingClientRect();
+        return clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom;
     }
     isPointWithinBounds(bounds, x, y) {
         return x >= bounds.left && x <= bounds.right && y >= bounds.top && y <= bounds.bottom;
     }
-    // Ensure a placeholder tab exists during in-header drag and hide the real dragged tab visually
-    ensureHeaderDragPlaceholder(header, pane) {
-        if (this.dragState?.placeholderHeader === header && this.dragState.placeholderEl) {
-            return;
-        }
-        const dragged = Array.from(header.querySelectorAll('.dock-tab')).find((t) => t.dataset['pane'] === pane) ?? null;
-        if (!dragged) {
-            return;
-        }
-        // Create placeholder
-        const placeholder = this.documentRef.createElement('button');
-        placeholder.type = 'button';
-        placeholder.classList.add('dock-tab');
-        placeholder.dataset['placeholder'] = 'true';
-        // 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);
+    // Ensure a placeholder tab exists during in-header drag and hide the real dragged tab visually.
+    // Operates on the mp-tab-control stack: the dragged content div gets `data-hidden`
+    // (mp-tab-control then skips its tab in the strip), and a placeholder header+content
+    // pair is appended as light-DOM children of the stack. mp-tab-control's mutation
+    // observer picks up the change and renders the placeholder as a tab.
+    ensureHeaderDragPlaceholder(stack, pane) {
+        if (stack.tagName !== 'MP-TAB-CONTROL')
+            return;
+        if (this.dragState?.placeholderHeader === stack && this.dragState.placeholderEl) {
+            return;
+        }
+        const draggedHeader = stack.querySelector(`:scope > .dock-tab[data-pane="${CSS.escape(pane)}"]`);
+        const draggedContent = stack.querySelector(`:scope > .dock-stack__pane[data-pane="${CSS.escape(pane)}"]`);
+        if (!draggedHeader || !draggedContent)
+            return;
+        // Measure the dragged tab's text-only width BEFORE hiding it. The
+        // `.dock-tab` rule applies padding (matching the strip button's padding so
+        // the span fills the button as a drag handle), so `offsetWidth` is
+        // text + padding — we subtract the span's own padding to get just the
+        // text width. That's the natural slot content width we want the
+        // placeholder to reserve; the placeholder span will re-apply the same
+        // padding on top, mirroring the original tab's geometry exactly.
+        const draggedCS = this.windowRef
+            ? this.windowRef.getComputedStyle(draggedHeader)
+            : globalThis.getComputedStyle(draggedHeader);
+        const draggedHorizontalPadding = parseFloat(draggedCS.paddingLeft) + parseFloat(draggedCS.paddingRight);
+        const slotContentWidth = Math.max(0, draggedHeader.offsetWidth - draggedHorizontalPadding);
+        // Hide the dragged tab from mp-tab-control's strip (frees up the slot).
+        draggedContent.setAttribute('data-hidden', '');
+        // Build placeholder header + content. The placeholder uses a unique tabId
+        // (`__dock-placeholder__`) so its slot names don't collide with real panes.
+        // We mirror the dragged tab's text into the placeholder (dimmed via opacity)
+        // so the strip reads as "this tab is being dragged" rather than "empty slot".
+        const placeholderTabId = '__dock-placeholder__';
+        const phHeader = this.documentRef.createElement('span');
+        phHeader.setAttribute('slot', `${placeholderTabId}-header`);
+        phHeader.classList.add('dock-tab');
+        phHeader.dataset['placeholder'] = 'true';
+        phHeader.dataset['tabId'] = placeholderTabId;
+        phHeader.setAttribute('aria-hidden', 'true');
+        phHeader.textContent = draggedHeader.textContent;
+        // `display: inline-block` is required for `min-width` to take effect on the
+        // span. Without it, an inline element ignores min-width and the placeholder
+        // collapses to its content width (or 0 if textContent is also empty),
+        // leaving a "mini-thumb" in the strip.
+        phHeader.style.display = 'inline-block';
+        phHeader.style.minWidth = `${slotContentWidth}px`;
+        phHeader.style.opacity = '0.5';
+        const phContent = this.documentRef.createElement('div');
+        phContent.setAttribute('slot', `${placeholderTabId}-content`);
+        phContent.classList.add('dock-stack__pane');
+        phContent.dataset['placeholder'] = 'true';
+        // Insert before the dragged header span so the placeholder appears in
+        // the dragged tab's original strip position. The mutation observer in
+        // mp-tab-control will refresh the tab list automatically.
+        stack.insertBefore(phHeader, draggedHeader);
+        stack.insertBefore(phContent, draggedContent);
         if (this.dragState) {
-            this.dragState.placeholderHeader = header;
-            this.dragState.placeholderEl = placeholder;
+            this.dragState.placeholderHeader = stack;
+            this.dragState.placeholderEl = phHeader;
         }
     }
-    // Move the placeholder to the computed target index within the header
-    updateHeaderDragPlaceholderPosition(header, targetIndex) {
-        const placeholder = this.dragState?.placeholderEl ?? null;
-        if (!placeholder) {
+    // Move the placeholder to the computed target index within the strip.
+    // We reorder light-DOM children (header span + matching content div); the
+    // mp-tab-control then re-renders the strip in the new order on slotchange.
+    updateHeaderDragPlaceholderPosition(stack, targetIndex) {
+        if (stack.tagName !== 'MP-TAB-CONTROL')
+            return;
+        const phHeader = this.dragState?.placeholderEl ?? null;
+        if (!phHeader)
             return;
-        }
         const draggedPane = this.dragState?.pane ?? null;
-        const tabs = Array.from(header.querySelectorAll('.dock-tab'))
-            .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);
-    }
-    // Remove placeholder and restore original tab visibility
+        // Find all real header spans (excluding the placeholder + the hidden dragged one).
+        const realHeaders = Array.from(stack.querySelectorAll(':scope > .dock-tab')).filter((h) => h !== phHeader &&
+            (!draggedPane || h.dataset['pane'] !== draggedPane));
+        const clampedTarget = Math.max(0, Math.min(targetIndex, realHeaders.length));
+        const ref = realHeaders[clampedTarget] ?? null;
+        stack.insertBefore(phHeader, ref);
+        // Keep the placeholder content adjacent to its header so child-order
+        // remains predictable for slotchange-driven re-renders.
+        const phContent = stack.querySelector(`:scope > .dock-stack__pane[data-placeholder="true"]`);
+        if (phContent && phHeader.nextElementSibling !== phContent) {
+            stack.insertBefore(phContent, phHeader.nextElementSibling);
+        }
+    }
+    // Remove placeholder and restore the dragged tab's visibility.
     clearHeaderDragPlaceholder() {
         const ph = this.dragState?.placeholderEl ?? null;
-        const header = this.dragState?.placeholderHeader ?? null;
-        if (header) {
-            const dragged = this.dragState?.pane
-                ? (Array.from(header.querySelectorAll('.dock-tab')).find((t) => t.dataset['pane'] === this.dragState?.pane) ?? null)
-                : null;
-            if (dragged) {
-                dragged.style.display = '';
+        const stack = this.dragState?.placeholderHeader ?? null;
+        if (stack) {
+            // Restore the dragged content div's visibility so its strip tab returns.
+            if (this.dragState?.pane) {
+                const draggedContent = stack.querySelector(`:scope > .dock-stack__pane[data-pane="${CSS.escape(this.dragState.pane)}"]`);
+                draggedContent?.removeAttribute('data-hidden');
             }
+            // Remove the placeholder content div sibling.
+            const phContent = stack.querySelector(`:scope > .dock-stack__pane[data-placeholder="true"]`);
+            phContent?.remove();
         }
         if (ph && ph.parentElement) {
             ph.parentElement.removeChild(ph);
@@ -2512,11 +2239,9 @@ class MintDockManagerElement extends HTMLElement {
         }
         this.lastDragPointerPosition = null;
         const win = this.windowRef;
-        win?.addEventListener('mousemove', this.onDragMouseMove, true);
-        win?.addEventListener('touchmove', this.onDragTouchMove, { passive: false });
-        win?.addEventListener('mouseup', this.onDragMouseUp, true);
-        win?.addEventListener('touchend', this.onDragTouchEnd, true);
-        win?.addEventListener('touchcancel', this.onDragTouchEnd, true);
+        win?.addEventListener('pointermove', this.onDragPointerMove, true);
+        win?.addEventListener('pointerup', this.onDragPointerUp, true);
+        win?.addEventListener('pointercancel', this.onDragPointerCancel, true);
         this.dragPointerTrackingActive = true;
     }
     stopDragPointerTracking() {
@@ -2524,52 +2249,38 @@ class MintDockManagerElement extends HTMLElement {
             return;
         }
         const win = this.windowRef;
-        win?.removeEventListener('mousemove', this.onDragMouseMove, true);
-        win?.removeEventListener('touchmove', this.onDragTouchMove);
-        win?.removeEventListener('mouseup', this.onDragMouseUp, true);
-        win?.removeEventListener('touchend', this.onDragTouchEnd, true);
-        win?.removeEventListener('touchcancel', this.onDragTouchEnd, true);
+        win?.removeEventListener('pointermove', this.onDragPointerMove, true);
+        win?.removeEventListener('pointerup', this.onDragPointerUp, true);
+        win?.removeEventListener('pointercancel', this.onDragPointerCancel, true);
         this.dragPointerTrackingActive = false;
         this.lastDragPointerPosition = null;
         this.clearPendingDragEndTimeout();
     }
-    onDragMouseMove(event) {
+    onDragPointerMove(event) {
         if (!this.dragState) {
             this.stopDragPointerTracking();
             return;
         }
-        if (event.buttons === 0) {
-            this.scheduleDeferredDragEnd();
-            return;
-        }
         this.lastDragPointerPosition = { x: event.clientX, y: event.clientY };
         this.updateDraggedFloatingPositionFromPoint(event.clientX, event.clientY);
     }
-    onDragTouchMove(event) {
-        if (!this.dragState) {
-            this.stopDragPointerTracking();
-            return;
-        }
-        const touch = event.touches[0];
-        if (!touch) {
-            this.scheduleDeferredDragEnd();
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        this.lastDragPointerPosition = { x: touch.clientX, y: touch.clientY };
-        this.updateDraggedFloatingPositionFromPoint(touch.clientX, touch.clientY);
-    }
-    onDragMouseUp() {
-        // Prefer committing a drop from pointer-up since some browsers suppress drop events
+    onDragPointerUp(event) {
+        // Commit the drop from pointer release; the pointer-up coordinates are
+        // authoritative for which stack/zone the user dropped into.
         if (this.dragState) {
-            const pos = this.lastDragPointerPosition;
-            if (pos) {
-                this.finalizeDropFromPoint(pos.x, pos.y);
+            const x = Number.isFinite(event.clientX) ? event.clientX : this.lastDragPointerPosition?.x;
+            const y = Number.isFinite(event.clientY) ? event.clientY : this.lastDragPointerPosition?.y;
+            if (x !== undefined && y !== undefined) {
+                this.finalizeDropFromPoint(x, y);
             }
         }
         this.handleDragPointerUpCommon();
     }
+    onDragPointerCancel() {
+        // OS-level cancel (e.g. pointer capture lost): end the drag without
+        // committing a drop.
+        this.handleDragPointerUpCommon();
+    }
     // Convert a currently in-header tab drag into a floating window
     convertPendingTabDragToFloating(clientX, clientY) {
         if (!this.dragState) {
@@ -2602,22 +2313,34 @@ class MintDockManagerElement extends HTMLElement {
             : stackRect && Number.isFinite(stackRect.height)
                 ? stackRect.height
                 : fallbackHeight;
-        const pointerOffsetX = Number.isFinite(this.dragState?.pointerOffsetX)
-            ? this.dragState.pointerOffsetX
-            : metrics && Number.isFinite(metrics.pointerOffsetX)
-                ? metrics.pointerOffsetX
-                : width / 2;
-        const pointerOffsetY = Number.isFinite(this.dragState?.pointerOffsetY)
-            ? this.dragState.pointerOffsetY
-            : metrics && Number.isFinite(metrics.pointerOffsetY)
-                ? metrics.pointerOffsetY
-                : height / 2;
-        const pointerLeft = Number.isFinite(clientX)
-            ? clientX - hostRect.left - pointerOffsetX
-            : 0;
-        const pointerTop = Number.isFinite(clientY)
-            ? clientY - hostRect.top - pointerOffsetY
-            : 0;
+        // Place the floating wrapper exactly where the docked stack was, so the
+        // pane appears in-place at the moment of detach instead of jumping under
+        // the cursor. metrics.left/top are host-relative (captured at pointerdown
+        // in captureTabDragMetrics). Compensate for the floating wrapper's 1px
+        // border so the visible content edge lines up with the original stack's
+        // visible content edge (the docked .dock-stack also has a 1px border, so
+        // the inner content rectangles match after this offset).
+        const FLOATING_BORDER = 1;
+        const initialLeft = metrics && Number.isFinite(metrics.left)
+            ? metrics.left - FLOATING_BORDER
+            : Number.isFinite(clientX)
+                ? clientX - hostRect.left - width / 2
+                : 0;
+        const initialTop = metrics && Number.isFinite(metrics.top)
+            ? metrics.top - FLOATING_BORDER
+            : Number.isFinite(clientY)
+                ? clientY - hostRect.top - height / 2
+                : 0;
+        // Derive pointerOffset from the cursor's actual position relative to the
+        // freshly-placed wrapper (not from pointerdown metrics) so the very next
+        // pointermove translates into a wrapper move of exactly the cursor delta
+        // — no jump, no drift.
+        const pointerOffsetX = Number.isFinite(clientX)
+            ? clientX - hostRect.left - initialLeft
+            : width / 2;
+        const pointerOffsetY = Number.isFinite(clientY)
+            ? clientY - hostRect.top - initialTop
+            : height / 2;
         // Remove pane from its current stack and create a new floating entry
         this.removePaneFromLocation(location, pane);
         const floatingStack = {
@@ -2627,8 +2350,8 @@ class MintDockManagerElement extends HTMLElement {
         };
         const floatingLayout = {
             bounds: {
-                left: pointerLeft,
-                top: pointerTop,
+                left: initialLeft,
+                top: initialTop,
                 width,
                 height,
             },
@@ -2637,7 +2360,7 @@ class MintDockManagerElement extends HTMLElement {
         };
         this.floatingLayouts.push(floatingLayout);
         const newIndex = this.floatingLayouts.length - 1;
-        this.render();
+        this.renderLayout();
         const wrapper = this.getFloatingWrapper(newIndex);
         if (wrapper) {
             this.promoteFloatingPane(newIndex, wrapper);
@@ -2647,32 +2370,54 @@ class MintDockManagerElement extends HTMLElement {
         state.floatingIndex = newIndex;
         state.pointerOffsetX = pointerOffsetX;
         state.pointerOffsetY = pointerOffsetY;
+        // Now that the wrapper exists, mark it so pointer-events:none kicks in
+        // and findStackAtPoint can see through to docked stacks underneath.
+        this.markDraggedFloatingWrapper();
         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 allTabs = Array.from(header.querySelectorAll('.dock-tab'));
-        if (allTabs.length === 0) {
+    // Toggle data-dragging on the floating wrapper currently associated with
+    // the active pane drag (dragState.floatingIndex), if any. Used to make the
+    // wrapper transparent to elementsFromPoint so drop zones can be shown on
+    // stacks underneath. clearDraggedFloatingWrapper() is the inverse.
+    markDraggedFloatingWrapper() {
+        const fi = this.dragState?.floatingIndex;
+        if (fi === null || fi === undefined || fi < 0)
+            return;
+        const wrapper = this.getFloatingWrapper(fi);
+        if (wrapper)
+            wrapper.dataset['dragging'] = 'true';
+    }
+    clearDraggedFloatingWrapperMarkers() {
+        const layer = this.floatingLayerEl;
+        if (!layer)
+            return;
+        layer.querySelectorAll('.dock-floating[data-dragging="true"]').forEach((el) => {
+            delete el.dataset['dragging'];
+        });
+    }
+    // Compute the intended tab insert index within a stack's strip based on pointer X.
+    // Uses the rendered tab buttons inside mp-tab-control's shadow strip for geometry;
+    // the dragged tab is hidden during drag (its content has data-hidden), and the
+    // placeholder button (if present) gives us the dragged-position reference.
+    computeHeaderInsertIndex(stack, clientX) {
+        if (stack.tagName !== 'MP-TAB-CONTROL')
+            return 0;
+        const allTabButtons = this.getStackTabButtons(stack);
+        if (allTabButtons.length === 0) {
             return 0;
         }
-        const draggedPane = this.dragState?.pane ?? null;
-        const draggedEl = draggedPane
-            ? (allTabs.find((t) => t.dataset['pane'] === draggedPane) ?? null)
+        const placeholderHeader = stack.querySelector(':scope > .dock-tab[data-placeholder="true"]');
+        const placeholderTabId = placeholderHeader?.dataset['tabId'];
+        const placeholderButton = placeholderTabId
+            ? allTabButtons.find((b) => b.id === `${placeholderTabId}-header-button`) ?? null
             : null;
-        const placeholderEl = header.querySelector('.dock-tab[data-placeholder="true"]');
-        const targets = allTabs.filter((t) => t !== draggedEl && t !== placeholderEl);
+        const targets = allTabButtons.filter((b) => b !== placeholderButton);
         if (targets.length === 0) {
             return 0;
         }
         const rightBias = 12;
         const leftBias = 0;
-        const baseRect = placeholderEl
-            ? placeholderEl.getBoundingClientRect()
-            : draggedEl
-                ? draggedEl.getBoundingClientRect()
-                : null;
+        const baseRect = placeholderButton ? placeholderButton.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) {
@@ -2706,9 +2451,6 @@ class MintDockManagerElement extends HTMLElement {
             }
         }
     }
-    onDragTouchEnd() {
-        this.handleDragPointerUpCommon();
-    }
     // Commit a drop using current pointer coordinates and joystick state
     finalizeDropFromPoint(clientX, clientY) {
         if (!this.dragState) {
@@ -2734,17 +2476,14 @@ class MintDockManagerElement extends HTMLElement {
             stackPath &&
             this.pathsEqual(stackPath, this.dragState.sourcePath) &&
             (!zone || zone === 'center')) {
-            const header = stack.querySelector('.dock-stack__header');
-            if (header) {
-                const location = this.resolveStackLocation(path);
-                if (location) {
-                    const idx = this.computeHeaderInsertIndex(header, clientX);
-                    this.reorderPaneInLocationAtIndex(location, this.dragState.pane, idx);
-                    this.render();
-                    this.dispatchLayoutChanged();
-                    this.dragState.dropHandled = true;
-                    return;
-                }
+            const location = this.resolveStackLocation(path);
+            if (location) {
+                const idx = this.computeHeaderInsertIndex(stack, clientX);
+                this.reorderPaneInLocationAtIndex(location, this.dragState.pane, idx);
+                this.renderLayout();
+                this.dispatchLayoutChanged();
+                this.dragState.dropHandled = true;
+                return;
             }
         }
         if (path && this.isDropZone(zone)) {
@@ -2783,112 +2522,6 @@ class MintDockManagerElement extends HTMLElement {
             ? win.setTimeout(completeDrag, 0)
             : setTimeout(completeDrag, 0);
     }
-    onDrop(event) {
-        if (!this.dragState) {
-            return;
-        }
-        event.preventDefault();
-        const pointFromEvent = Number.isFinite(event.clientX) && Number.isFinite(event.clientY)
-            ? { clientX: event.clientX, clientY: event.clientY }
-            : null;
-        const point = pointFromEvent ??
-            (this.lastDragPointerPosition
-                ? {
-                    clientX: this.lastDragPointerPosition.x,
-                    clientY: this.lastDragPointerPosition.y,
-                }
-                : null);
-        const stack = this.findStackElement(event) ??
-            (point ? this.findStackAtPoint(point.clientX, point.clientY) : null);
-        // Prefer joystick's stored target path when the joystick is visible (drop over buttons)
-        const joystickVisible = this.dropJoystick.dataset['visible'] === 'true';
-        const joystickPath = this.parsePath(this.dropJoystick.dataset['path']);
-        const joystickTarget = this.dropJoystickTarget;
-        const joystickTargetPath = joystickTarget ? this.parsePath(joystickTarget.dataset['path']) : null;
-        let path = stack
-            ? this.parsePath(stack.dataset['path'])
-            : (joystickPath ?? joystickTargetPath);
-        if (!path && joystickVisible) {
-            // As a last resort, target the main dock surface only when empty
-            const dockPath = this.parsePath(this.dockedEl.dataset['path']);
-            path = (!this.rootLayout ? dockPath : null);
-        }
-        // Defer same-header reorder decision until after zone resolution below
-        // Prefer joystick's active zone if available, else infer from event/point
-        const joystickZone = this.dropJoystick.dataset['zone'];
-        const eventZoneHint = this.extractDropZoneFromEvent(event);
-        const pointZoneHint = point ? this.findDropZoneByPoint(point.clientX, point.clientY) : null;
-        const zone = this.isDropZone(joystickZone)
-            ? joystickZone
-            : stack
-                ? this.computeDropZone(stack, point ?? event, pointZoneHint ?? eventZoneHint)
-                : (this.isDropZone(pointZoneHint ?? eventZoneHint) ? (pointZoneHint ?? eventZoneHint) : null);
-        // If still in same header and no side zone chosen, treat as in-header reorder
-        if (this.dragState &&
-            this.dragState.floatingIndex !== null &&
-            this.dragState.floatingIndex < 0 &&
-            stack &&
-            path &&
-            this.pathsEqual(path, this.dragState.sourcePath) &&
-            (!zone || zone === 'center')) {
-            const header = stack.querySelector('.dock-stack__header');
-            if (header) {
-                const x = (point ? point.clientX : event.clientX);
-                if (Number.isFinite(x)) {
-                    const location = this.resolveStackLocation(path);
-                    if (location) {
-                        const idx = this.computeHeaderInsertIndex(header, x);
-                        this.reorderPaneInLocationAtIndex(location, this.dragState.pane, idx);
-                        this.render();
-                        this.dispatchLayoutChanged();
-                        this.dragState.dropHandled = true;
-                        this.endPaneDrag();
-                        return;
-                    }
-                }
-            }
-        }
-        // If joystick is visible and both path and zone are resolved, force using joystick as authoritative
-        if (joystickVisible && path && this.isDropZone(joystickZone)) {
-            this.handleDrop(path, joystickZone);
-            this.endPaneDrag();
-            return;
-        }
-        if (!zone) {
-            this.hideDropIndicator();
-            this.endPaneDrag();
-            return;
-        }
-        this.handleDrop(path, zone);
-        this.endPaneDrag();
-    }
-    onDragLeave(event) {
-        const related = event.relatedTarget;
-        // During active drags, browsers can emit spurious dragleave with null
-        // relatedTarget while the pointer is still over the joystick/buttons.
-        // Be conservative: if we can resolve a stack/joystick at the last known
-        // pointer position, don’t hide (prevents flicker of active state).
-        if (this.dragState) {
-            const pos = (Number.isFinite(event.clientX) && Number.isFinite(event.clientY))
-                ? { x: event.clientX, y: event.clientY }
-                : this.lastDragPointerPosition;
-            if (pos) {
-                const stackAtPoint = this.findStackAtPoint(pos.x, pos.y);
-                if (stackAtPoint) {
-                    return; // still inside our drop area; ignore this dragleave
-                }
-            }
-        }
-        if (!related) {
-            this.hideDropIndicator();
-            return;
-        }
-        const rootContains = this.rootEl.contains(related);
-        const joystickContains = this.dropJoystick.contains(related);
-        if (!rootContains && !joystickContains) {
-            this.hideDropIndicator();
-        }
-    }
     handleDrop(targetPath, zone) {
         if (!this.dragState || !targetPath) {
             return;
@@ -2911,7 +2544,7 @@ class MintDockManagerElement extends HTMLElement {
             if (stackEmptied) {
                 this.cleanupLocation(source);
             }
-            this.render();
+            this.renderLayout();
             this.dispatchLayoutChanged();
             if (this.dragState) {
                 this.dragState.dropHandled = true;
@@ -2926,7 +2559,7 @@ class MintDockManagerElement extends HTMLElement {
                 return;
             }
             this.reorderPaneInLocation(source, pane);
-            this.render();
+            this.renderLayout();
             this.dispatchLayoutChanged();
             if (this.dragState) {
                 this.dragState.dropHandled = true;
@@ -2940,7 +2573,7 @@ class MintDockManagerElement extends HTMLElement {
             if (stackEmptied) {
                 this.cleanupLocation(source);
             }
-            this.render();
+            this.renderLayout();
             this.dispatchLayoutChanged();
             if (this.dragState) {
                 this.dragState.dropHandled = true;
@@ -2961,7 +2594,7 @@ class MintDockManagerElement extends HTMLElement {
                 if (stackEmptied) {
                     this.cleanupLocation(source);
                 }
-                this.render();
+                this.renderLayout();
                 this.dispatchLayoutChanged();
                 return;
             }
@@ -2971,7 +2604,7 @@ class MintDockManagerElement extends HTMLElement {
         if (stackEmptied) {
             this.cleanupLocation(source);
         }
-        this.render();
+        this.renderLayout();
         this.dispatchLayoutChanged();
         if (this.dragState) {
             this.dragState.dropHandled = true;
@@ -2988,7 +2621,7 @@ class MintDockManagerElement extends HTMLElement {
         if (!target && targetPath.type === 'docked' && !this.rootLayout) {
             this.rootLayout = this.cloneLayoutNode(source.root);
             this.removeFloatingAt(sourceIndex);
-            this.render();
+            this.renderLayout();
             this.dispatchLayoutChanged();
             return true;
         }
@@ -3013,7 +2646,7 @@ class MintDockManagerElement extends HTMLElement {
                 this.setActivePaneForLocation(target, activePane);
             }
             this.removeFloatingAt(sourceIndex);
-            this.render();
+            this.renderLayout();
             this.dispatchLayoutChanged();
             return true;
         }
@@ -3025,13 +2658,13 @@ class MintDockManagerElement extends HTMLElement {
             floating.root = this.dockNodeBeside(floating.root, target.node, source.root, zone);
             floating.activePane = source.activePane ?? this.findFirstPaneName(source.root) ?? undefined;
             this.removeFloatingAt(sourceIndex);
-            this.render();
+            this.renderLayout();
             this.dispatchLayoutChanged();
             return true;
         }
         this.rootLayout = this.dockNodeBeside(this.rootLayout, target.node, source.root, zone);
         this.removeFloatingAt(sourceIndex);
-        this.render();
+        this.renderLayout();
         this.dispatchLayoutChanged();
         return true;
     }
@@ -3355,24 +2988,6 @@ class MintDockManagerElement extends HTMLElement {
         }
         return null;
     }
-    findStackElement(event) {
-        const path = event.composedPath();
-        const stack = this.findStackInTargets(path);
-        if (stack) {
-            return stack;
-        }
-        // If the root dock area is empty, treat the docked surface as a valid
-        // target when it appears in the composed path.
-        if (!this.rootLayout) {
-            for (const target of path) {
-                if (target instanceof HTMLElement &&
-                    (target === this.dockedEl || target.classList.contains('dock-docked'))) {
-                    return this.dockedEl;
-                }
-            }
-        }
-        return null;
-    }
     findStackInTargets(targets) {
         for (const element of targets) {
             if (!(element instanceof HTMLElement)) {
@@ -3392,21 +3007,16 @@ class MintDockManagerElement extends HTMLElement {
     }
     activatePane(stack, paneName, path) {
         stack.dataset['activePane'] = paneName;
-        const headerButtons = stack.querySelectorAll('.dock-tab');
-        headerButtons.forEach((button) => {
-            const isSelected = button.dataset['pane'] === paneName;
-            button.classList.toggle('dock-tab--active', isSelected);
-            button.setAttribute('aria-selected', String(isSelected));
-        });
-        const panes = stack.querySelectorAll('.dock-stack__pane');
-        panes.forEach((pane) => {
-            if (pane.dataset['pane'] === paneName) {
-                pane.removeAttribute('hidden');
+        // Reflect to mp-tab-control's `active-tab` attribute. The WC handles
+        // strip button styling (active class, aria-selected) + body-slot
+        // projection automatically via the named-slot pattern.
+        if (stack.tagName === 'MP-TAB-CONTROL') {
+            const headerSpan = stack.querySelector(`:scope > .dock-tab[data-pane="${CSS.escape(paneName)}"]`);
+            const tabId = headerSpan?.dataset['tabId'];
+            if (tabId) {
+                stack.setAttribute('active-tab', tabId);
             }
-            else {
-                pane.setAttribute('hidden', '');
-            }
-        });
+        }
         const location = this.resolveStackLocation(path);
         if (!location) {
             return;
@@ -3612,7 +3222,10 @@ class MintDockManagerElement extends HTMLElement {
         return { type: 'docked', segments: [...path.segments] };
     }
     parsePath(path) {
-        if (!path) {
+        // The root splitter is tagged with data-path="" (raw segments-join of an
+        // empty array) so empty string is a valid path representing root docked.
+        // Only null/undefined is "no path".
+        if (path == null) {
             return null;
         }
         if (path.startsWith('f:')) {
@@ -3846,12 +3459,12 @@ class BsDockManagerComponent {
         return this.cloneLayout(this._layout);
     }
     constructor() {
-        this.layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        this.layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         this.layoutChange = output();
         this.layoutSnapshotChange = output();
-        this.layoutString = signal(null, ...(ngDevMode ? [{ debugName: "layoutString" }] : []));
-        this.panes = contentChildren(BsDockPaneComponent, ...(ngDevMode ? [{ debugName: "panes" }] : []));
-        this.managerRef = viewChild('manager', ...(ngDevMode ? [{ debugName: "managerRef" }] : []));
+        this.layoutString = signal(null, ...(ngDevMode ? [{ debugName: "layoutString" }] : /* istanbul ignore next */ []));
+        this.panes = contentChildren(BsDockPaneComponent, ...(ngDevMode ? [{ debugName: "panes" }] : /* istanbul ignore next */ []));
+        this.managerRef = viewChild('manager', ...(ngDevMode ? [{ debugName: "managerRef" }] : /* istanbul ignore next */ []));
         this.trackByPane = (_, pane) => pane.name();
         this._layout = { root: null, floating: [] };
         const documentRef = inject(DOCUMENT);
@@ -3914,10 +3527,10 @@ class BsDockManagerComponent {
     cloneLayout(layout) {
         return JSON.parse(JSON.stringify(layout));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsDockManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: BsDockManagerComponent, isStandalone: true, selector: "bs-dock-manager", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", layoutSnapshotChange: "layoutSnapshotChange" }, queries: [{ propertyName: "panes", predicate: BsDockPaneComponent, isSignal: true }], viewQueries: [{ propertyName: "managerRef", first: true, predicate: ["manager"], descendants: true, isSignal: true }], ngImport: i0, template: "<mint-dock-manager\n  #manager\n  class=\"bs-dock-manager\"\n  [attr.layout]=\"layoutString()\"\n  (dock-layout-changed)=\"onLayoutChanged($event)\"\n  >\n  @for (pane of panes(); track trackByPane($index, pane)) {\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name()\">\n      <ng-container *ngTemplateOutlet=\"pane.template()\"></ng-container>\n    </div>\n  }\n</mint-dock-manager>\n", styles: [":host{display:block;width:100%;height:100%}.bs-dock-manager{display:block;width:100%;height:100%}.bs-dock-pane{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDockManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsDockManagerComponent, isStandalone: true, selector: "bs-dock-manager", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", layoutSnapshotChange: "layoutSnapshotChange" }, queries: [{ propertyName: "panes", predicate: BsDockPaneComponent, isSignal: true }], viewQueries: [{ propertyName: "managerRef", first: true, predicate: ["manager"], descendants: true, isSignal: true }], ngImport: i0, template: "<mint-dock-manager\n  #manager\n  class=\"bs-dock-manager\"\n  [attr.layout]=\"layoutString()\"\n  (dock-layout-changed)=\"onLayoutChanged($event)\"\n  >\n  @for (pane of panes(); track trackByPane($index, pane)) {\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name()\">\n      <ng-container *ngTemplateOutlet=\"pane.template()\"></ng-container>\n    </div>\n  }\n</mint-dock-manager>\n", styles: [":host{display:block;width:100%;height:100%}.bs-dock-manager{display:block;width:100%;height:100%}.bs-dock-pane{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsDockManagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDockManagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-dock-manager', imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mint-dock-manager\n  #manager\n  class=\"bs-dock-manager\"\n  [attr.layout]=\"layoutString()\"\n  (dock-layout-changed)=\"onLayoutChanged($event)\"\n  >\n  @for (pane of panes(); track trackByPane($index, pane)) {\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name()\">\n      <ng-container *ngTemplateOutlet=\"pane.template()\"></ng-container>\n    </div>\n  }\n</mint-dock-manager>\n", styles: [":host{display:block;width:100%;height:100%}.bs-dock-manager{display:block;width:100%;height:100%}.bs-dock-pane{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], layoutSnapshotChange: [{ type: i0.Output, args: ["layoutSnapshotChange"] }], panes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BsDockPaneComponent), { isSignal: true }] }], managerRef: [{ type: i0.ViewChild, args: ['manager', { isSignal: true }] }] } });