@mintplayer/ng-bootstrap 20.1.0 → 20.2.0

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

@@ -1,587 +1,2633 @@
 import * as i0 from '@angular/core';
-import { Input, ViewChild, Component, HostBinding, ViewChildren, ContentChildren, Injectable, HostListener, NgModule } from '@angular/core';
-import * as i7 from '@angular/common';
-import { AsyncPipe } from '@angular/common';
-import * as i2 from '@angular/cdk/portal';
-import { DomPortal, PortalModule } from '@angular/cdk/portal';
-import { BsCardModule } from '@mintplayer/ng-bootstrap/card';
-import * as i4 from '@mintplayer/ng-bootstrap/splitter';
-import { BsSplitterModule } from '@mintplayer/ng-bootstrap/splitter';
-import * as i6 from '@mintplayer/ng-bootstrap/resizable';
-import { BsResizableModule } from '@mintplayer/ng-bootstrap/resizable';
-import * as i5 from '@mintplayer/ng-bootstrap/tab-control';
-import { BsTabControlModule } from '@mintplayer/ng-bootstrap/tab-control';
-import * as i3 from '@mintplayer/ng-bootstrap/instance-of';
-import { BsInstanceOfModule } from '@mintplayer/ng-bootstrap/instance-of';
-import { BehaviorSubject, map, take } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { deepClone } from '@mintplayer/parentify';
-import * as i1 from '@angular/cdk/overlay';
-
-class BsDockPanelComponent {
-    constructor() {
-        this.panelId = '';
-    }
-    ngAfterViewInit() {
-        this.headerPortal = new DomPortal(this.headerElement.nativeElement);
-        this.contentPortal = new DomPortal(this.contentElement.nativeElement);
+import { TemplateRef, ViewChild, Input, Component, EventEmitter, QueryList, ContentChildren, Output, Inject, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+
+class BsDockPaneComponent {
+    ngAfterContentInit() {
+        if (!this.name) {
+            throw new Error('bs-dock-pane requires a unique "name" input.');
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: BsDockPanelComponent, isStandalone: false, selector: "bs-dock-panel", inputs: { panelId: "panelId" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["headerElement"], descendants: true }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true }], ngImport: i0, template: "<!-- <bs-split-panel> -->\n<div #headerElement class=\"dock-header\">\n    <ng-content select=\"bs-dock-panel-header\"></ng-content>\n</div>\n<div #contentElement>\n    <ng-content></ng-content>\n</div>\n<!-- </bs-split-panel> -->", styles: [".dock-header{padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);margin:calc(-1 * var(--bs-nav-link-padding-y)) calc(-1 * var(--bs-nav-link-padding-x))}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: BsDockPaneComponent, isStandalone: false, selector: "bs-dock-pane", inputs: { name: "name", title: "title" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `<ng-template><ng-content></ng-content></ng-template>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockPaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-dock-panel', standalone: false, template: "<!-- <bs-split-panel> -->\n<div #headerElement class=\"dock-header\">\n    <ng-content select=\"bs-dock-panel-header\"></ng-content>\n</div>\n<div #contentElement>\n    <ng-content></ng-content>\n</div>\n<!-- </bs-split-panel> -->", styles: [".dock-header{padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);margin:calc(-1 * var(--bs-nav-link-padding-y)) calc(-1 * var(--bs-nav-link-padding-x))}\n"] }]
-        }], propDecorators: { headerElement: [{
-                type: ViewChild,
-                args: ['headerElement']
-            }], contentElement: [{
-                type: ViewChild,
-                args: ['contentElement']
-            }], panelId: [{
+            args: [{
+                    selector: 'bs-dock-pane',
+                    template: `<ng-template><ng-content></ng-content></ng-template>`,
+                    standalone: false,
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], title: [{
                 type: Input
+            }], template: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
             }] } });
 
-class BsDockPane {
-}
+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;
+    }
 
-class BsTabGroupPane extends BsDockPane {
-    constructor(data) {
-        super();
-        this.panes = [];
-        Object.assign(this, data);
+    .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;
     }
-    get isEmpty() {
-        return this.panes.length === 0;
+
+    .dock-root {
+      position: relative;
+      width: 100%;
+      height: 100%;
     }
-}
 
-class BsDocumentHost extends BsDockPane {
-    constructor(data) {
-        super();
-        Object.assign(this, data);
+    .dock-docked {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      z-index: 0;
     }
-    get isEmpty() {
-        return this.rootPane?.isEmpty ?? true;
+
+    .dock-floating-layer {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      z-index: 5;
     }
-}
 
-class BsContentPane extends BsDockPane {
-    constructor(data) {
-        super();
-        Object.assign(this, data);
+    .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;
     }
-    get isEmpty() {
-        return false;
+
+    .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;
     }
-}
 
-class BsFloatingPane extends BsDockPane {
-    constructor(data) {
-        super();
-        Object.assign(this, data);
+    .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;
     }
-    get isEmpty() {
-        return this.pane?.isEmpty ?? true;
+
+    .dock-floating > .dock-stack {
+      flex: 1 1 auto;
+      min-width: 12rem;
+      min-height: 8rem;
     }
-}
 
-class BsSplitPane extends BsDockPane {
-    constructor(data) {
-        super();
-        this.orientation = 'horizontal';
-        this.panes = [];
-        Object.assign(this, data);
+    .dock-floating__resizer {
+      position: absolute;
+      pointer-events: auto;
+      z-index: 2;
+      background: rgba(148, 163, 184, 0.25);
+      transition: background 120ms ease;
     }
-    get isEmpty() {
-        return this.panes.length === 0;
+
+    .dock-floating__resizer:hover {
+      background: rgba(148, 163, 184, 0.4);
     }
-}
 
-var EPaneType;
-(function (EPaneType) {
-    EPaneType[EPaneType["documentHost"] = 1] = "documentHost";
-    EPaneType[EPaneType["splitPane"] = 2] = "splitPane";
-    EPaneType[EPaneType["contentPane"] = 3] = "contentPane";
-    EPaneType[EPaneType["tabGroupPane"] = 4] = "tabGroupPane";
-})(EPaneType || (EPaneType = {}));
-
-class BsDockPaneRendererComponent {
-    constructor(overlay, element) {
-        this.overlay = overlay;
-        this.paneTypes = EPaneType;
-        this.BsDocumentHostType = BsDocumentHost;
-        this.BsTabGroupType = BsTabGroupPane;
-        this.BsSplitterType = BsSplitPane;
-        this.BsContentPaneType = BsContentPane;
-        this.BsFloatingPaneType = BsFloatingPane;
-        //#region Layout
-        this.layout$ = new BehaviorSubject(null);
-        this.portal = new DomPortal(element);
+    .dock-floating__resizer--top,
+    .dock-floating__resizer--bottom {
+      left: 0.75rem;
+      right: 0.75rem;
+      height: 0.5rem;
     }
-    get layout() {
-        return this.layout$.value;
+
+    .dock-floating__resizer--top {
+      top: 0;
+      cursor: n-resize;
     }
-    set layout(value) {
-        this.layout$.next(value);
+
+    .dock-floating__resizer--bottom {
+      bottom: 0;
+      cursor: s-resize;
     }
-    moveToOverlay() {
-        if (!this.overlayRef && !this.portal.isAttached) {
-            this.overlayRef = this.overlay.create({});
-            this.portal.attach(this.overlayRef);
-        }
+
+    .dock-floating__resizer--left,
+    .dock-floating__resizer--right {
+      top: 1.75rem;
+      bottom: 0.75rem;
+      width: 0.5rem;
     }
-    disposeOverlay() {
-        if (this.overlayRef) {
-            this.portal.detach();
-            this.overlayRef.dispose();
-            this.overlayRef = undefined;
-        }
+
+    .dock-floating__resizer--left {
+      left: 0;
+      cursor: w-resize;
+    }
+
+    .dock-floating__resizer--right {
+      right: 0;
+      cursor: e-resize;
+    }
+
+    .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__resizer--top-left {
+      top: 0;
+      left: 0;
+      cursor: nw-resize;
+    }
+
+    .dock-floating__resizer--top-right {
+      top: 0;
+      right: 0;
+      cursor: ne-resize;
+    }
+
+    .dock-floating__resizer--bottom-left {
+      bottom: 0;
+      left: 0;
+      cursor: sw-resize;
+    }
+
+    .dock-floating__resizer--bottom-right {
+      right: 0;
+      bottom: 0;
+      cursor: se-resize;
+    }
+
+    .dock-split {
+      display: flex;
+      flex: 1 1 0;
+      gap: 0.25rem;
+      position: relative;
+    }
+
+    .dock-split[data-direction="vertical"] {
+      flex-direction: column;
+    }
+
+    .dock-split[data-direction="horizontal"] {
+      flex-direction: row;
+    }
+
+    .dock-split__child {
+      display: flex;
+      flex: 1 1 0;
+      position: relative;
+    }
+
+    .dock-split__divider {
+      position: relative;
+      flex: 0 0 auto;
+      background: rgba(0, 0, 0, 0.08);
+      transition: background 120ms ease;
+    }
+
+    .dock-split[data-direction="horizontal"] > .dock-split__divider {
+      width: 0.5rem;
+      cursor: col-resize;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockPaneRendererComponent, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: BsDockPaneRendererComponent, isStandalone: false, selector: "bs-dock-pane-renderer", inputs: { layout: "layout" }, ngImport: i0, template: "<!-- <ng-content></ng-content> -->\n<ng-container [bsInstanceof]=\"layout$ | async\">\n    <div *bsInstanceofCase=\"BsDocumentHostType; let documentHost\" data-hello>\n        <bs-dock-pane-renderer [layout]=\"documentHost\"></bs-dock-pane-renderer>\n    </div>\n    <bs-tab-control *bsInstanceofCase=\"BsTabGroupType; let tabGroup\" [allowDragDrop]=\"false\" class=\"d-flex flex-column h-100 dock-tabs\">\n        @for (tab of tabGroup.panes; track tab) {\n            <bs-tab-page>\n                <ng-container *bsTabPageHeader>\n                    <ng-template [cdkPortalOutlet]=\"tab.dockPanel.headerPortal\"></ng-template>\n                </ng-container>\n                <bs-dock-pane-renderer [layout]=\"tab\"></bs-dock-pane-renderer>\n            </bs-tab-page>\n        }\n    </bs-tab-control>\n    <bs-splitter *bsInstanceofCase=\"BsSplitterType; let splitter\" [orientation]=\"splitter.orientation\">\n        @for (panel of splitter.panes; track panel) {\n            <bs-split-panel>\n                <bs-dock-pane-renderer [layout]=\"panel\"></bs-dock-pane-renderer>\n            </bs-split-panel>\n        }\n    </bs-splitter>\n    <ng-container *bsInstanceofCase=\"BsContentPaneType; let content\">\n        <ng-template [cdkPortalOutlet]=\"content.dockPanel.contentPortal\"></ng-template>\n    </ng-container>\n    <ng-container *bsInstanceofCase=\"BsFloatingPaneType; let floating\">\n        @if (floating.pane) {\n            <bs-resizable [positioning]=\"'absolute'\" [presetPosition]=\"{ left: floating.location?.x ?? 0, top: floating.location?.y ?? 0, width: floating.size?.width ?? 200, height: floating.size?.height ?? 100 }\">\n                <bs-dock-pane-renderer [layout]=\"floating.pane\"></bs-dock-pane-renderer>\n            </bs-resizable>\n        }\n    </ng-container>\n    <div *bsInstanceofDefault>\n        No match\n    </div>\n</ng-container>", styles: [".dock-tabs{background:#f3f3f3}:host ::ng-deep .tab-page-content{background:#fff;min-height:100%}\n"], dependencies: [{ kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i3.BsInstanceOfDirective, selector: "[bsInstanceof]", inputs: ["bsInstanceof"] }, { kind: "directive", type: i3.BsInstanceofCaseDirective, selector: "[bsInstanceofCase]", inputs: ["bsInstanceofCase"] }, { kind: "directive", type: i3.BsInstanceOfDefaultDirective, selector: "[bsInstanceofDefault]" }, { kind: "component", type: i4.BsSplitterComponent, selector: "bs-splitter", inputs: ["orientation"] }, { kind: "component", type: i4.BsSplitPanelComponent, selector: "bs-split-panel" }, { kind: "component", type: i5.BsTabControlComponent, selector: "bs-tab-control", inputs: ["border", "restrictDragging", "selectFirstTab", "tabsPosition", "allowDragDrop"] }, { kind: "component", type: i5.BsTabPageComponent, selector: "bs-tab-page", inputs: ["disabled"] }, { kind: "directive", type: i5.BsTabPageHeaderDirective, selector: "[bsTabPageHeader]" }, { kind: "component", type: i6.BsResizableComponent, selector: "bs-resizable", inputs: ["positioning", "presetPosition"] }, { kind: "component", type: BsDockPaneRendererComponent, selector: "bs-dock-pane-renderer", inputs: ["layout"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockPaneRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bs-dock-pane-renderer', standalone: false, template: "<!-- <ng-content></ng-content> -->\n<ng-container [bsInstanceof]=\"layout$ | async\">\n    <div *bsInstanceofCase=\"BsDocumentHostType; let documentHost\" data-hello>\n        <bs-dock-pane-renderer [layout]=\"documentHost\"></bs-dock-pane-renderer>\n    </div>\n    <bs-tab-control *bsInstanceofCase=\"BsTabGroupType; let tabGroup\" [allowDragDrop]=\"false\" class=\"d-flex flex-column h-100 dock-tabs\">\n        @for (tab of tabGroup.panes; track tab) {\n            <bs-tab-page>\n                <ng-container *bsTabPageHeader>\n                    <ng-template [cdkPortalOutlet]=\"tab.dockPanel.headerPortal\"></ng-template>\n                </ng-container>\n                <bs-dock-pane-renderer [layout]=\"tab\"></bs-dock-pane-renderer>\n            </bs-tab-page>\n        }\n    </bs-tab-control>\n    <bs-splitter *bsInstanceofCase=\"BsSplitterType; let splitter\" [orientation]=\"splitter.orientation\">\n        @for (panel of splitter.panes; track panel) {\n            <bs-split-panel>\n                <bs-dock-pane-renderer [layout]=\"panel\"></bs-dock-pane-renderer>\n            </bs-split-panel>\n        }\n    </bs-splitter>\n    <ng-container *bsInstanceofCase=\"BsContentPaneType; let content\">\n        <ng-template [cdkPortalOutlet]=\"content.dockPanel.contentPortal\"></ng-template>\n    </ng-container>\n    <ng-container *bsInstanceofCase=\"BsFloatingPaneType; let floating\">\n        @if (floating.pane) {\n            <bs-resizable [positioning]=\"'absolute'\" [presetPosition]=\"{ left: floating.location?.x ?? 0, top: floating.location?.y ?? 0, width: floating.size?.width ?? 200, height: floating.size?.height ?? 100 }\">\n                <bs-dock-pane-renderer [layout]=\"floating.pane\"></bs-dock-pane-renderer>\n            </bs-resizable>\n        }\n    </ng-container>\n    <div *bsInstanceofDefault>\n        No match\n    </div>\n</ng-container>", styles: [".dock-tabs{background:#f3f3f3}:host ::ng-deep .tab-page-content{background:#fff;min-height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ElementRef }], propDecorators: { layout: [{
-                type: Input
-            }] } });
 
-class BsDockComponent {
+    .dock-split[data-direction="vertical"] > .dock-split__divider {
+      height: 0.5rem;
+      cursor: row-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-split[data-direction="horizontal"] > .dock-split__divider::after {
+      width: 0.125rem;
+      height: 60%;
+    }
+
+    .dock-split[data-direction="vertical"] > .dock-split__divider::after {
+      width: 60%;
+      height: 0.125rem;
+    }
+
+    .dock-split__divider:hover,
+    .dock-split__divider:focus-visible,
+    .dock-split__divider[data-resizing='true'] {
+      background: rgba(59, 130, 246, 0.35);
+    }
+
+    .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-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-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-tab:active {
+      cursor: grabbing;
+    }
+
+    .dock-tab:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+
+    .dock-tab:focus-visible {
+      outline: 2px solid rgba(59, 130, 246, 0.8);
+      outline-offset: 1px;
+    }
+
+    .dock-tab--active {
+      background: rgba(59, 130, 246, 0.15);
+    }
+
+    .dock-stack__content {
+      position: relative;
+      flex: 1 1 auto;
+      display: flex;
+      overflow: hidden;
+    }
+
+    .dock-stack__pane {
+      position: relative;
+      flex: 1 1 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .dock-stack__pane[hidden] {
+      display: none !important;
+    }
+
+    .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-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__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: 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 rgba(59, 130, 246, 0.9);
+      outline-offset: 1px;
+    }
+
+    .dock-drop-joystick__button[data-zone='center'] {
+      border-radius: 0.5rem;
+    }
+
+    ::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>
+  <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 {
+    static { this.documentRef = typeof document !== 'undefined' ? document : null; }
+    static configureDocument(documentRef) {
+        if (documentRef) {
+            MintDockManagerElement.documentRef = documentRef;
+        }
+    }
+    static get observedAttributes() {
+        return ['layout'];
+    }
+    static { this.instanceCounter = 0; }
     constructor() {
-        //#region Panels
-        this.panels$ = new BehaviorSubject([]);
-        //#endregion
-        this.floating$ = new BehaviorSubject([]);
-        this.positionAbsolute = true;
-        this.positionPx = 0;
-        const tabs = new BsTabGroupPane();
-        const docHost = new BsDocumentHost();
-        docHost.rootPane = tabs;
-        this.layout$ = new BehaviorSubject({
-            rootPane: docHost,
-            floatingPanes: []
-        });
-        this.floating$.pipe(takeUntilDestroyed())
-            .subscribe((floating) => {
-            floating.forEach((panel) => panel.moveToOverlay());
-        });
-        this.parentifiedLayout$ = this.layout$.pipe(map(layout => {
-            const clone = deepClone(layout, true, 
-            // []
-            [BsContentPane, BsDocumentHost, BsFloatingPane, BsSplitPane, BsTabGroupPane], true, this.paneCache);
-            // this.paneCache = clone.cache;
-            console.log('parentify', { layout, result: clone.result });
-            return clone.result;
-        }));
-        this.parentifiedLayout$.pipe(takeUntilDestroyed()).subscribe(console.log);
+        super();
+        this.dropJoystickTarget = null;
+        this.rootLayout = null;
+        this.floatingLayouts = [];
+        this.pendingTabDragMetrics = null;
+        this.resizeState = null;
+        this.dragState = null;
+        this.floatingDragState = null;
+        this.floatingResizeState = null;
+        this.pointerTrackingActive = false;
+        this.dragPointerTrackingActive = false;
+        this.lastDragPointerPosition = null;
+        this.pendingDragEndTimeout = null;
+        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));
+        const root = shadowRoot.querySelector('.dock-root');
+        if (!root) {
+            throw new Error('mint-dock-manager template is missing the root element.');
+        }
+        const docked = shadowRoot.querySelector('.dock-docked');
+        if (!docked) {
+            throw new Error('mint-dock-manager template is missing the docked surface element.');
+        }
+        const floatingLayer = shadowRoot.querySelector('.dock-floating-layer');
+        if (!floatingLayer) {
+            throw new Error('mint-dock-manager template is missing the floating layer element.');
+        }
+        const indicator = shadowRoot.querySelector('.dock-drop-indicator');
+        if (!indicator) {
+            throw new Error('mint-dock-manager template is missing the drop indicator element.');
+        }
+        const joystick = shadowRoot.querySelector('.dock-drop-joystick');
+        if (!joystick) {
+            throw new Error('mint-dock-manager template is missing the drop joystick element.');
+        }
+        const joystickButtons = Array.from(joystick.querySelectorAll('.dock-drop-joystick__button[data-zone]'));
+        if (joystickButtons.length === 0) {
+            throw new Error('mint-dock-manager template is missing drop joystick buttons.');
+        }
+        this.rootEl = root;
+        this.dockedEl = docked;
+        this.floatingLayerEl = floatingLayer;
+        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);
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'application');
+        }
+        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);
+        const win = this.windowRef;
+        win?.addEventListener('dragover', this.onGlobalDragOver);
+        win?.addEventListener('drag', this.onDrag);
+        win?.addEventListener('dragend', this.onGlobalDragEnd, true);
     }
-    set panels(value) {
-        this.panels$.next(value.toArray());
+    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;
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === 'layout') {
+            this.layout = newValue ? this.parseLayout(newValue) : null;
+        }
     }
     get layout() {
-        return this.layout$.value;
+        return {
+            root: this.cloneLayoutNode(this.rootLayout),
+            floating: this.cloneFloatingArray(this.floatingLayouts),
+        };
     }
     set layout(value) {
-        this.layout$.next(value);
+        const snapshot = this.ensureSnapshot(value);
+        this.rootLayout = this.cloneLayoutNode(snapshot.root);
+        this.floatingLayouts = this.cloneFloatingArray(snapshot.floating);
+        this.render();
     }
-    set floatingPanes(value) {
-        this.floating$.next(value.toArray());
+    get snapshot() {
+        return this.layout;
     }
-    ngOnDestroy() {
-        this.floating$.value.forEach(panel => panel.disposeOverlay());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: BsDockComponent, isStandalone: false, selector: "bs-dock", inputs: { layout: "layout" }, host: { properties: { "class.position-absolute": "this.positionAbsolute", "style.top": "this.positionPx", "style.left": "this.positionPx", "style.bottom": "this.positionPx", "style.right": "this.positionPx" } }, queries: [{ propertyName: "panels", predicate: BsDockPanelComponent }], viewQueries: [{ propertyName: "floatingPanes", predicate: ["floating"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n@if (layout$ | async; as layout) {\n    <bs-dock-pane-renderer [layout]=\"layout.rootPane\"></bs-dock-pane-renderer>\n    @for (pane of layout.floatingPanes; track pane) {\n        @if (pane.pane) {\n            <bs-dock-pane-renderer #floating [layout]=\"pane\"></bs-dock-pane-renderer>\n        }\n    }\n}", styles: [":host ::ng-deep .tab-content{max-height:calc(100% - 41px);overflow:auto}:host ::ng-deep bs-dock-pane-renderer{min-width:100%;min-height:100%}:host ::ng-deep>bs-dock-panel>*{display:none}\n"], dependencies: [{ kind: "component", type: BsDockPaneRendererComponent, selector: "bs-dock-pane-renderer", inputs: ["layout"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bs-dock', standalone: false, template: "<ng-content></ng-content>\n@if (layout$ | async; as layout) {\n    <bs-dock-pane-renderer [layout]=\"layout.rootPane\"></bs-dock-pane-renderer>\n    @for (pane of layout.floatingPanes; track pane) {\n        @if (pane.pane) {\n            <bs-dock-pane-renderer #floating [layout]=\"pane\"></bs-dock-pane-renderer>\n        }\n    }\n}", styles: [":host ::ng-deep .tab-content{max-height:calc(100% - 41px);overflow:auto}:host ::ng-deep bs-dock-pane-renderer{min-width:100%;min-height:100%}:host ::ng-deep>bs-dock-panel>*{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { panels: [{
-                type: ContentChildren,
-                args: [BsDockPanelComponent]
-            }], layout: [{
-                type: Input
-            }], floatingPanes: [{
-                type: ViewChildren,
-                args: ['floating']
-            }], positionAbsolute: [{
-                type: HostBinding,
-                args: ['class.position-absolute']
-            }], positionPx: [{
-                type: HostBinding,
-                args: ['style.top']
-            }, {
-                type: HostBinding,
-                args: ['style.left']
-            }, {
-                type: HostBinding,
-                args: ['style.bottom']
-            }, {
-                type: HostBinding,
-                args: ['style.right']
-            }] } });
-
-class BsDockService {
-    buildTraces(layout) {
-        const result = [layout.rootPane, ...layout.floatingPanes].map(pane => this.buildTracesPrivate([pane]));
-        // const result = this.buildTracesPrivate([layout.rootPane]);
-        return result.flatMap(traceGroup => traceGroup);
+    toJSON() {
+        return this.snapshot;
     }
-    buildTracesPrivate(currentSequence) {
-        const children = this.getChildPanes(currentSequence[currentSequence.length - 1]);
-        if (children.length === 0) {
-            return [{
-                    finished: true,
-                    trace: currentSequence
-                }];
+    resolveDocument() {
+        const staticDocument = MintDockManagerElement.documentRef;
+        const ownerDocument = this.ownerDocument ?? null;
+        const globalDocument = typeof document !== 'undefined' ? document : null;
+        const resolvedDocument = staticDocument ?? ownerDocument ?? globalDocument;
+        if (!resolvedDocument) {
+            throw new Error('mint-dock-manager requires a Document to initialize.');
         }
-        else {
-            const result = children.map(child => this.buildTracesPrivate([...currentSequence, child]));
-            return result.flatMap(r => r);
+        if (!MintDockManagerElement.documentRef) {
+            MintDockManagerElement.documentRef = resolvedDocument;
         }
+        return resolvedDocument;
     }
-    getChildPanes(pane) {
-        if (pane instanceof BsContentPane) {
-            return [];
+    resolveWindow(documentRef) {
+        if (typeof window !== 'undefined') {
+            return window;
         }
-        else if (pane instanceof BsTabGroupPane) {
-            return pane.panes;
+        return documentRef.defaultView ?? null;
+    }
+    parseLayout(value) {
+        try {
+            const parsed = JSON.parse(value);
+            return this.ensureSnapshot(parsed);
         }
-        else if (pane instanceof BsSplitPane) {
-            return pane.panes;
+        catch (err) {
+            console.warn('mint-dock-manager: failed to parse layout attribute', err);
+            return null;
         }
-        else if (pane instanceof BsFloatingPane) {
-            return pane.pane ? [pane.pane] : [];
+    }
+    ensureSnapshot(value) {
+        if (!value) {
+            return { root: null, floating: [] };
         }
-        else if (pane instanceof BsDocumentHost) {
-            return pane.rootPane ? [pane.rootPane] : [];
+        if (value.kind) {
+            return { root: value, floating: [] };
         }
-        else {
-            return [];
+        const layout = value;
+        return {
+            root: layout.root ?? null,
+            floating: Array.isArray(layout.floating)
+                ? layout.floating.map((floating) => this.normalizeFloatingLayout(floating))
+                : [],
+        };
+    }
+    render() {
+        this.dockedEl.innerHTML = '';
+        this.floatingLayerEl.innerHTML = '';
+        this.hideDropIndicator();
+        if (this.rootLayout) {
+            const fragment = this.renderNode(this.rootLayout, []);
+            this.dockedEl.appendChild(fragment);
         }
+        this.renderFloatingPanes();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class BsDockPanelHeaderComponent {
-    constructor(dockPanel, dock, dockService, element, destroy) {
-        this.dockPanel = dockPanel;
-        this.dock = dock;
-        this.dockService = dockService;
-        this.element = element;
-        this.destroy = destroy;
-        this.isMouseDown = false;
-        this.isDragging = false;
-        this.dBlock = true;
-    }
-    onMouseDown(ev) {
-        ev.preventDefault();
-        this.isMouseDown = true;
-    }
-    onMouseMove(ev) {
-        if (this.isMouseDown) {
-            if (!this.isDragging) {
-                this.isDragging = true;
-                this.dock.parentifiedLayout$.pipe(take(1), takeUntilDestroyed(this.destroy)).subscribe((parentifiedLayout) => {
-                    // this.dock.layout$.pipe(take(1)).subscribe((layout) => {
-                    const traces = this.dockService.buildTraces(parentifiedLayout);
-                    console.log('traces', { parentifiedLayout, traces });
-                    const matching = traces.filter(t => {
-                        const lastPane = t.trace[t.trace.length - 1];
-                        // return (lastPane instanceof BsContentPane) && (lastPane.dockPanel === this.dockPanel);
-                        return (lastPane instanceof BsContentPane) && (lastPane.dockPanel === this.dockPanel);
-                    });
-                    console.log('matching', matching);
-                    if (matching.length !== 1) {
-                        return;
-                    }
-                    // const tabs = matching[0].trace.filter(pane => pane instanceof BsTabGroupPane);
-                    // const lastTabGroup = tabs[tabs.length - 1];
-                    // // console.log('last tabgroup', lastTabGroup);
-                    let tabControlEl = this.element.nativeElement;
-                    do {
-                        if (tabControlEl.parentElement) {
-                            tabControlEl = tabControlEl.parentElement;
-                        }
-                        else {
-                            throw 'No more parents';
-                        }
-                    } while (tabControlEl.tagName.toUpperCase() !== 'BS-TAB-CONTROL');
-                    const coords = {
-                        width: tabControlEl.clientWidth,
-                        height: tabControlEl.clientHeight,
-                        left: ev.clientX - ev.offsetX,
-                        top: ev.clientY - ev.offsetY,
-                    };
-                    // this.dockPanel.headerPortal?.isAttached && this.dockPanel.headerPortal?.detach();
-                    // this.dockPanel.contentPortal?.isAttached && this.dockPanel.contentPortal?.detach();
-                    this.removeFromPane(parentifiedLayout.$original.rootPane, this.dockPanel);
-                    const trace = [...matching[0].trace];
-                    this.dockPanel.headerPortal?.isAttached && this.dockPanel.headerPortal?.detach();
-                    this.dockPanel.contentPortal?.isAttached && this.dockPanel.contentPortal?.detach();
-                    for (let index = trace.length - 1; index >= 0; index--) {
-                        if (index > 0) {
-                            this.removeFromPaneBis(trace[index - 1], trace[index]);
-                            if (!trace[index - 1].isEmpty)
-                                break;
-                        }
-                        else {
-                            const floatingIndex = parentifiedLayout.floatingPanes.indexOf(trace[0]);
-                            if (trace[0].isEmpty && (floatingIndex > -1)) {
-                                parentifiedLayout.$original.floatingPanes.splice(floatingIndex, 1);
-                            }
-                        }
-                    }
-                    // this.removeFromPane((<any>matching[0].trace[0])['$original'], this.dockPanel);
-                    const floatingPane = new BsFloatingPane({
-                        pane: new BsTabGroupPane({
-                            panes: [
-                                new BsContentPane({
-                                    dockPanel: this.dockPanel
-                                })
-                            ]
-                        }),
-                        size: {
-                            width: coords.width,
-                            height: coords.height,
-                        },
-                        location: {
-                            x: coords.left,
-                            y: coords.top,
-                        }
-                    });
-                    this.dragOperation = {
-                        offsetX: ev.offsetX,
-                        offsetY: ev.offsetY,
-                        floatingPane
-                    };
-                    parentifiedLayout.$original.floatingPanes.push(floatingPane);
-                    // debugger;
-                    setTimeout(() => this.dock.layout$.next(parentifiedLayout.$original), 5);
-                    // console.log('traces', { traces, matching, dockPanel: this.dockPanel, equals: traces[2].trace[3] });
-                    //     let element: HTMLElement | null = this.element.nativeElement;
-                    //     let tree: HTMLElement[] = [];
-                    //     do {
-                    //       tree.push(element!);
-                    //       element = element!.parentElement;
-                    //     } while (element);
-                    //     const tabControls = tree.filter(el => el.tagName.toUpperCase() === 'BS-TAB-CONTROL');
-                    //     if (tabControls.length > 0) {
-                    //       const coords = {
-                    //         width: tabControls[0].clientWidth,
-                    //         height: tabControls[0].clientHeight,
-                    //         left: ev.clientX - ev.offsetX,
-                    //         top: ev.clientY - ev.offsetY,
-                    //       };
-                    //       this.dockPanel.headerPortal?.isAttached && this.dockPanel.headerPortal?.detach();
-                    //       this.dockPanel.contentPortal?.isAttached && this.dockPanel.contentPortal?.detach();
-                    //       this.removeFromPane(layout.rootPane, this.dockPanel);
-                    //       const floatingPane = new BsFloatingPane({
-                    //         pane: new BsTabGroupPane({
-                    //           panes: [
-                    //             new BsContentPane({
-                    //               dockPanel: this.dockPanel
-                    //             })
-                    //           ]
-                    //         }),
-                    //         size: {
-                    //           width: coords.width,
-                    //           height: coords.height,
-                    //         },
-                    //         location: {
-                    //           x: coords.left,
-                    //           y: coords.top,
-                    //         }
-                    //       });
-                    //       this.dragOperation = {
-                    //         offsetX: ev.offsetX,
-                    //         offsetY: ev.offsetY,
-                    //         floatingPane
-                    //       };
-                    //       layout.floatingPanes.push(floatingPane);
-                    //       this.dock.layout$.next(layout);
-                    //     }
-                });
+    renderNode(node, path, floatingIndex) {
+        if (node.kind === 'split') {
+            return this.renderSplit(node, path, floatingIndex);
+        }
+        return this.renderStack(node, path, floatingIndex);
+    }
+    renderFloatingPanes() {
+        this.floatingLayerEl.innerHTML = '';
+        this.floatingLayouts.forEach((floating, index) => {
+            const wrapper = this.documentRef.createElement('div');
+            wrapper.classList.add('dock-floating');
+            wrapper.dataset['path'] = this.formatPath({
+                type: 'floating',
+                index,
+                segments: [],
+            });
+            const { left, top, width, height } = floating.bounds;
+            wrapper.style.left = `${left}px`;
+            wrapper.style.top = `${top}px`;
+            wrapper.style.width = `${width}px`;
+            wrapper.style.height = `${height}px`;
+            const zIndex = this.getFloatingPaneZIndex(index);
+            wrapper.style.zIndex = String(zIndex);
+            const chrome = this.documentRef.createElement('div');
+            chrome.classList.add('dock-floating__chrome');
+            chrome.addEventListener('pointerdown', (event) => this.beginFloatingDrag(event, index, wrapper, chrome));
+            const title = this.documentRef.createElement('div');
+            title.classList.add('dock-floating__title');
+            title.textContent = this.getFloatingWindowTitle(floating);
+            chrome.appendChild(title);
+            wrapper.appendChild(chrome);
+            if (floating.root) {
+                const content = this.renderNode(floating.root, [], index);
+                content.classList.add('dock-floating__stack');
+                wrapper.appendChild(content);
             }
             else {
-                if (this.dragOperation) {
-                    if (this.dragOperation.floatingPane.location) {
-                        this.dragOperation.floatingPane.location.x = ev.clientX - this.dragOperation.offsetX;
-                        this.dragOperation.floatingPane.location.y = ev.clientY - this.dragOperation.offsetY;
-                    }
-                    //   } else {
-                    //     const traces = this.dockService.buildTraces(this.dock.layout);
-                    //     const matchingTrace = traces.filter(trace => {
-                    //       const pane = trace.trace[trace.trace.length - 1];
-                    //       return (pane instanceof BsContentPane) && (pane.dockPanel === this.dockPanel);
-                    //     });
-                    //     console.log('matching', { traces, matchingTrace });
-                    //     // this.dragOperation = {
-                    //     // }
-                }
+                const placeholder = this.documentRef.createElement('div');
+                placeholder.classList.add('dock-stack');
+                placeholder.dataset['path'] = this.formatPath({
+                    type: 'floating',
+                    index,
+                    segments: [],
+                });
+                const empty = this.documentRef.createElement('div');
+                empty.classList.add('dock-stack__pane');
+                empty.textContent = 'No panes configured';
+                placeholder.appendChild(empty);
+                wrapper.appendChild(placeholder);
             }
+            const resizerConfigs = [
+                {
+                    classes: ['dock-floating__resizer', 'dock-floating__resizer--top-left'],
+                    edges: { horizontal: 'left', vertical: 'top' },
+                },
+                {
+                    classes: ['dock-floating__resizer', 'dock-floating__resizer--top'],
+                    edges: { horizontal: 'none', vertical: 'top' },
+                },
+                {
+                    classes: ['dock-floating__resizer', 'dock-floating__resizer--top-right'],
+                    edges: { horizontal: 'right', vertical: 'top' },
+                },
+                {
+                    classes: ['dock-floating__resizer', 'dock-floating__resizer--right'],
+                    edges: { horizontal: 'right', vertical: 'none' },
+                },
+                {
+                    classes: ['dock-floating__resizer', 'dock-floating__resizer--bottom-right'],
+                    edges: { horizontal: 'right', vertical: 'bottom' },
+                },
+                {
+                    classes: ['dock-floating__resizer', 'dock-floating__resizer--bottom'],
+                    edges: { horizontal: 'none', vertical: 'bottom' },
+                },
+                {
+                    classes: ['dock-floating__resizer', 'dock-floating__resizer--bottom-left'],
+                    edges: { horizontal: 'left', vertical: 'bottom' },
+                },
+                {
+                    classes: ['dock-floating__resizer', 'dock-floating__resizer--left'],
+                    edges: { horizontal: 'left', vertical: 'none' },
+                },
+            ];
+            resizerConfigs.forEach(({ classes, edges }) => {
+                const resizer = this.documentRef.createElement('div');
+                resizer.classList.add(...classes);
+                resizer.addEventListener('pointerdown', (event) => this.beginFloatingResize(event, index, wrapper, resizer, edges));
+                wrapper.appendChild(resizer);
+            });
+            this.floatingLayerEl.appendChild(wrapper);
+        });
+    }
+    beginFloatingDrag(event, index, wrapper, handle) {
+        const floating = this.floatingLayouts[index];
+        if (!floating) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const { left, top } = floating.bounds;
+        try {
+            handle.setPointerCapture(event.pointerId);
         }
+        catch (err) {
+            /* no-op: pointer capture may not be supported in all environments */
+        }
+        this.promoteFloatingPane(index, wrapper);
+        this.floatingDragState = {
+            index,
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            startLeft: left,
+            startTop: top,
+            wrapper,
+            handle,
+        };
+        this.startPointerTracking();
+    }
+    beginFloatingResize(event, index, wrapper, handle, edges) {
+        const floating = this.floatingLayouts[index];
+        if (!floating) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        try {
+            handle.setPointerCapture(event.pointerId);
+        }
+        catch (err) {
+            /* pointer capture may not be supported */
+        }
+        this.promoteFloatingPane(index, wrapper);
+        this.floatingResizeState = {
+            index,
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            startWidth: floating.bounds.width,
+            startHeight: floating.bounds.height,
+            startLeft: floating.bounds.left,
+            startTop: floating.bounds.top,
+            wrapper,
+            handle,
+            edges,
+        };
+        this.startPointerTracking();
+    }
+    handleFloatingDragMove(event) {
+        const state = this.floatingDragState;
+        if (!state || event.pointerId !== state.pointerId) {
+            return;
+        }
+        const deltaX = event.clientX - state.startX;
+        const deltaY = event.clientY - state.startY;
+        const newLeft = state.startLeft + deltaX;
+        const newTop = state.startTop + deltaY;
+        state.wrapper.style.left = `${newLeft}px`;
+        state.wrapper.style.top = `${newTop}px`;
+        const floating = this.floatingLayouts[state.index];
+        if (floating) {
+            floating.bounds.left = newLeft;
+            floating.bounds.top = newTop;
+        }
+        this.updateFloatingDragDropTarget(event);
     }
-    removeFromPaneBis(host, pane) {
-        if (host instanceof BsContentPane) {
+    endFloatingDrag(pointerId) {
+        const state = this.floatingDragState;
+        if (!state || pointerId !== state.pointerId) {
+            return;
         }
-        else if (host instanceof BsDocumentHost) {
-            // Actually documentHost should never be removed
+        try {
+            state.handle.releasePointerCapture(state.pointerId);
         }
-        else if (host instanceof BsTabGroupPane) {
-            if (pane instanceof BsContentPane) {
-                const index = host.panes.indexOf(pane);
-                host.panes.splice(index, 1);
+        catch (err) {
+            /* no-op */
+        }
+        const dropHandled = state.dropTarget
+            ? this.handleFloatingStackDrop(state.index, state.dropTarget.path, state.dropTarget.zone)
+            : false;
+        this.floatingDragState = null;
+        this.hideDropIndicator();
+        if (!dropHandled) {
+            this.dispatchLayoutChanged();
+        }
+    }
+    updateFloatingDragDropTarget(event) {
+        const state = this.floatingDragState;
+        if (!state) {
+            return;
+        }
+        const stack = this.findStackAtPoint(event.clientX, event.clientY);
+        if (!stack) {
+            if (state.dropTarget) {
+                delete state.dropTarget;
+                this.hideDropIndicator();
             }
+            return;
         }
-        else if (host instanceof BsSplitPane) {
-            const index = host.panes.indexOf(pane);
-            host.panes.splice(index, 1);
+        const path = this.parsePath(stack.dataset['path']);
+        if (!path || (path.type === 'floating' && path.index === state.index)) {
+            if (state.dropTarget) {
+                delete state.dropTarget;
+                this.hideDropIndicator();
+            }
+            return;
         }
-        else if (host instanceof BsFloatingPane) {
+        const zone = this.computeDropZone(stack, event, this.extractDropZoneFromEvent(event));
+        if (zone) {
+            state.dropTarget = { path, zone };
         }
-        else {
-            throw 'Unknown pane type';
+        else if (state.dropTarget) {
+            delete state.dropTarget;
+        }
+        this.showDropIndicator(stack, zone);
+    }
+    handleFloatingResizeMove(event) {
+        const state = this.floatingResizeState;
+        if (!state || event.pointerId !== state.pointerId) {
+            return;
         }
+        const deltaX = event.clientX - state.startX;
+        const deltaY = event.clientY - state.startY;
+        const minWidth = 192;
+        const minHeight = 128;
+        let newWidth = state.startWidth;
+        let newHeight = state.startHeight;
+        let newLeft = state.startLeft;
+        let newTop = state.startTop;
+        if (state.edges.horizontal === 'right') {
+            newWidth = Math.max(minWidth, state.startWidth + deltaX);
+        }
+        else if (state.edges.horizontal === 'left') {
+            newWidth = Math.max(minWidth, state.startWidth - deltaX);
+            newLeft = state.startLeft + (state.startWidth - newWidth);
+        }
+        if (state.edges.vertical === 'bottom') {
+            newHeight = Math.max(minHeight, state.startHeight + deltaY);
+        }
+        else if (state.edges.vertical === 'top') {
+            newHeight = Math.max(minHeight, state.startHeight - deltaY);
+            newTop = state.startTop + (state.startHeight - newHeight);
+        }
+        state.wrapper.style.width = `${newWidth}px`;
+        state.wrapper.style.height = `${newHeight}px`;
+        state.wrapper.style.left = `${newLeft}px`;
+        state.wrapper.style.top = `${newTop}px`;
+        const floating = this.floatingLayouts[state.index];
+        if (floating) {
+            floating.bounds.width = newWidth;
+            floating.bounds.height = newHeight;
+            floating.bounds.left = newLeft;
+            floating.bounds.top = newTop;
+        }
+    }
+    endFloatingResize(pointerId) {
+        const state = this.floatingResizeState;
+        if (!state || pointerId !== state.pointerId) {
+            return;
+        }
+        try {
+            state.handle.releasePointerCapture(state.pointerId);
+        }
+        catch (err) {
+            /* no-op */
+        }
+        this.floatingResizeState = null;
+        this.dispatchLayoutChanged();
+    }
+    getFloatingPaneZIndex(index) {
+        const floating = this.floatingLayouts[index];
+        if (!floating) {
+            return 10 + index;
+        }
+        const base = typeof floating.zIndex === 'number' && Number.isFinite(floating.zIndex)
+            ? floating.zIndex
+            : 10 + index;
+        return base;
     }
-    removeFromPane(host, panel /*, parents: BsDockPane[] */) {
-        if (host instanceof BsContentPane) {
-            return { paneRemoved: false, hostIsEmpty: false };
+    promoteFloatingPane(index, wrapper) {
+        const floating = this.floatingLayouts[index];
+        if (!floating) {
+            return;
         }
-        else if (host instanceof BsDocumentHost) {
-            // Actually documentHost should never be removed
-            if (!host.rootPane) {
-                return { paneRemoved: false, hostIsEmpty: true };
+        const maxExisting = this.floatingLayouts.reduce((max, layout, idx) => {
+            if (!layout) {
+                return max;
             }
-            const result = this.removeFromPane(host.rootPane, panel);
-            return { paneRemoved: result.paneRemoved, hostIsEmpty: result.hostIsEmpty };
+            const z = idx === index ? Number.NEGATIVE_INFINITY : this.getFloatingPaneZIndex(idx);
+            return Math.max(max, z);
+        }, 0);
+        const nextZ = Math.max(maxExisting + 2, 12);
+        floating.zIndex = nextZ;
+        wrapper.style.zIndex = String(nextZ);
+    }
+    getFloatingWrapper(index) {
+        const selector = `.dock-floating[data-path="${this.formatPath({
+            type: 'floating',
+            index,
+            segments: [],
+        })}"]`;
+        return this.floatingLayerEl.querySelector(selector);
+    }
+    startPointerTracking() {
+        if (this.pointerTrackingActive) {
+            return;
+        }
+        const win = this.windowRef;
+        win?.addEventListener('pointermove', this.onPointerMove);
+        win?.addEventListener('pointerup', this.onPointerUp);
+        this.pointerTrackingActive = true;
+    }
+    stopPointerTrackingIfIdle() {
+        if (this.pointerTrackingActive &&
+            !this.resizeState &&
+            !this.floatingDragState &&
+            !this.floatingResizeState) {
+            const win = this.windowRef;
+            win?.removeEventListener('pointermove', this.onPointerMove);
+            win?.removeEventListener('pointerup', this.onPointerUp);
+            this.pointerTrackingActive = false;
+        }
+    }
+    getFloatingWindowTitle(floating) {
+        const fallback = 'Floating Pane';
+        if (!floating || !floating.root) {
+            return fallback;
+        }
+        const preferred = floating.activePane ?? this.findFirstPaneName(floating.root);
+        if (!preferred) {
+            return fallback;
+        }
+        const owningStack = this.findStackContainingPane(floating.root, preferred);
+        if (!owningStack) {
+            return preferred ?? fallback;
+        }
+        return owningStack.titles?.[preferred] ?? preferred ?? fallback;
+    }
+    updateFloatingWindowTitle(index) {
+        const floating = this.floatingLayouts[index];
+        if (!floating) {
+            return;
+        }
+        const selector = `.dock-floating[data-path="${this.formatPath({
+            type: 'floating',
+            index,
+            segments: [],
+        })}"]`;
+        const wrapper = this.floatingLayerEl.querySelector(selector);
+        if (!wrapper) {
+            return;
         }
-        else if (host instanceof BsTabGroupPane) {
-            const matching = host.panes.filter(p => p.dockPanel === panel);
-            if (matching.length > 0) {
-                host.panes.splice(host.panes.findIndex(p => p.dockPanel === panel), 1);
-                return { paneRemoved: true, hostIsEmpty: host.panes.length === 0 };
+        const titleEl = wrapper.querySelector('.dock-floating__title');
+        if (!titleEl) {
+            return;
+        }
+        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 : [];
+        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 {
-                // ATM. all panes are ContentPanes anyway.
-                // So unless you'd want to have splitters inside the tabs,
-                // This code will not be hit.
-                // const result = host.panes
-                //   .map(parentPane => this.removeFromPane(parentPane, panel))
-                //   .filter(r => r.paneRemoved);
-                //
-                // if (result.length > 0) {
-                //   return { paneRemoved: true, hostIsEmpty: }
-                // }
-                return { paneRemoved: false, hostIsEmpty: host.panes.length === 0 };
-            }
-        }
-        else if (host instanceof BsSplitPane) {
-            const matching = host.panes
-                .filter(p => p instanceof BsContentPane)
-                .map(p => p)
-                .filter(p => p.dockPanel === panel);
-            if (matching.length > 0) {
-                host.panes.splice(host.panes.findIndex(p => (p instanceof BsContentPane) && matching.includes(p)), 1);
-                // TODO: Remove splitter if only 1 pane left?
-                return { paneRemoved: true, hostIsEmpty: host.panes.length === 0 };
+                childWrapper.style.flex = '1 1 0';
             }
-            else {
-                for (let splitPane of host.panes) {
-                    const result = this.removeFromPane(splitPane, panel);
-                    if (result.paneRemoved && result.hostIsEmpty) {
-                        // splitPane is empty now, so we can remove it from this splitter
-                        host.panes.splice(host.panes.indexOf(splitPane), 1);
-                        return { paneRemoved: true, hostIsEmpty: host.panes.length === 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;
+                divider.addEventListener('pointerdown', (event) => this.beginResize(event, container, floatingIndex !== undefined
+                    ? { type: 'floating', index: floatingIndex, segments: [...path] }
+                    : { type: 'docked', segments: [...path] }, index));
+                container.appendChild(divider);
+            }
+        });
+        return container;
+    }
+    renderStack(node, path, floatingIndex) {
+        const stack = this.documentRef.createElement('div');
+        stack.classList.add('dock-stack');
+        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 empty = this.documentRef.createElement('div');
+            empty.classList.add('dock-stack__pane');
+            empty.textContent = 'No panes configured';
+            content.appendChild(empty);
+            stack.append(header, content);
+            return stack;
+        }
+        const activePane = panes.includes(node.activePane ?? '')
+            ? node.activePane
+            : panes[0];
+        const baseSlug = path.length ? path.join('-') : 'root';
+        const pathSlug = typeof floatingIndex === 'number' ? `f${floatingIndex}-${baseSlug}` : baseSlug;
+        panes.forEach((paneName) => {
+            const paneSlugRaw = paneName.replace(/[^a-zA-Z0-9_-]/g, '-');
+            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 = node.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);
+                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);
+            const paneHost = this.documentRef.createElement('div');
+            paneHost.classList.add('dock-stack__pane');
+            paneHost.dataset['pane'] = paneName;
+            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.dataset['activePane'] = activePane;
+        stack.append(header, content);
+        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();
+    }
+    onPointerMove(event) {
+        if (this.resizeState && event.pointerId === this.resizeState.pointerId) {
+            const state = this.resizeState;
+            const splitNode = this.resolveSplitNode(state.path);
+            if (!splitNode) {
+                return;
+            }
+            const currentPos = state.orientation === 'horizontal' ? event.clientX : event.clientY;
+            const delta = currentPos - state.startPos;
+            const minSize = 48;
+            const pairTotal = state.beforeSize + state.afterSize;
+            let newBefore = Math.min(Math.max(state.beforeSize + delta, minSize), pairTotal - minSize);
+            let 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);
+        }
+        if (this.floatingDragState && event.pointerId === this.floatingDragState.pointerId) {
+            console.warn('state', this.floatingDragState);
+            this.handleFloatingDragMove(event);
+        }
+    }
+    onPointerUp(event) {
+        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;
+        }
+        if (this.floatingDragState && event.pointerId === this.floatingDragState.pointerId) {
+            this.endFloatingDrag(event.pointerId);
+        }
+        if (this.floatingResizeState && event.pointerId === this.floatingResizeState.pointerId) {
+            this.endFloatingResize(event.pointerId);
+        }
+        this.stopPointerTrackingIfIdle();
+    }
+    captureTabDragMetrics(event, stackEl) {
+        if (!stackEl) {
+            this.pendingTabDragMetrics = null;
+            return;
+        }
+        if (!Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) {
+            this.pendingTabDragMetrics = null;
+            return;
+        }
+        const hostRect = this.getBoundingClientRect();
+        const stackRect = stackEl.getBoundingClientRect();
+        const pointerOffsetX = event.clientX - stackRect.left;
+        const pointerOffsetY = event.clientY - stackRect.top;
+        const left = stackRect.left - hostRect.left;
+        const top = stackRect.top - hostRect.top;
+        const width = Number.isFinite(stackRect.width) ? stackRect.width : 0;
+        const height = Number.isFinite(stackRect.height) ? stackRect.height : 0;
+        this.pendingTabDragMetrics = {
+            pointerOffsetX,
+            pointerOffsetY,
+            left,
+            top,
+            width,
+            height,
+        };
+    }
+    clearPendingTabDragMetrics() {
+        this.pendingTabDragMetrics = null;
+    }
+    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.
+        event.dataTransfer.setDragImage(ghost, event.offsetX, event.offsetY);
+        // 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);
+        this.dragState = {
+            pane,
+            sourcePath: this.clonePath(sourcePath),
+            floatingIndex,
+            pointerOffsetX,
+            pointerOffsetY,
+            dropHandled: false,
+        };
+        this.updateDraggedFloatingPosition(event);
+        this.startDragPointerTracking();
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('text/plain', pane);
+    }
+    preparePaneDragSource(path, pane, stackEl, event) {
+        const location = this.resolveStackLocation(path);
+        if (!location || !location.node.panes.includes(pane)) {
+            this.clearPendingTabDragMetrics();
+            return {
+                path,
+                floatingIndex: null,
+                pointerOffsetX: 0,
+                pointerOffsetY: 0,
+            };
+        }
+        const metrics = this.pendingTabDragMetrics;
+        this.pendingTabDragMetrics = null;
+        const domHasSibling = !!stackEl &&
+            Array.from(stackEl.querySelectorAll('.dock-tab')).some((button) => button.dataset['pane'] && button.dataset['pane'] !== pane);
+        const hasSiblingInStack = location.node.panes.some((existing) => existing !== pane);
+        const floating = location.context === 'floating' ? this.floatingLayouts[location.index] : null;
+        const floatingPaneCount = floating && floating.root ? this.countPanesInTree(floating.root) : hasSiblingInStack ? 2 : 1;
+        const shouldReuseExistingWindow = location.context === 'floating' &&
+            !!floating &&
+            !hasSiblingInStack &&
+            !domHasSibling &&
+            floatingPaneCount <= 1;
+        if (shouldReuseExistingWindow) {
+            if (floating) {
+                floating.activePane = pane;
+                this.updateFloatingWindowTitle(location.index);
+                const wrapper = this.getFloatingWrapper(location.index);
+                if (wrapper) {
+                    this.promoteFloatingPane(location.index, wrapper);
                 }
+                const hostRect = this.getBoundingClientRect();
+                const pointerOffsetX = metrics &&
+                    Number.isFinite(metrics.pointerOffsetX) &&
+                    Number.isFinite(metrics.left) &&
+                    Number.isFinite(floating.bounds.left)
+                    ? metrics.pointerOffsetX + (metrics.left - floating.bounds.left)
+                    : Number.isFinite(event.clientX) && Number.isFinite(floating.bounds.left)
+                        ? event.clientX - hostRect.left - floating.bounds.left
+                        : floating.bounds.width / 2;
+                const pointerOffsetY = metrics &&
+                    Number.isFinite(metrics.pointerOffsetY) &&
+                    Number.isFinite(metrics.top) &&
+                    Number.isFinite(floating.bounds.top)
+                    ? metrics.pointerOffsetY + (metrics.top - floating.bounds.top)
+                    : Number.isFinite(event.clientY) && Number.isFinite(floating.bounds.top)
+                        ? event.clientY - hostRect.top - floating.bounds.top
+                        : floating.bounds.height / 2;
+                return {
+                    path,
+                    floatingIndex: location.index,
+                    pointerOffsetX,
+                    pointerOffsetY,
+                };
             }
-            return { paneRemoved: false, hostIsEmpty: host.panes.length === 0 };
+            return {
+                path,
+                floatingIndex: null,
+                pointerOffsetX: 0,
+                pointerOffsetY: 0,
+            };
         }
-        else {
-            throw 'unknown host type';
+        const hostRect = this.getBoundingClientRect();
+        const stackRect = stackEl?.getBoundingClientRect() ?? null;
+        const fallbackWidth = 320;
+        const fallbackHeight = 240;
+        const width = metrics && Number.isFinite(metrics.width) && metrics.width > 0
+            ? metrics.width
+            : stackRect && Number.isFinite(stackRect.width)
+                ? stackRect.width
+                : fallbackWidth;
+        const height = metrics && Number.isFinite(metrics.height) && metrics.height > 0
+            ? metrics.height
+            : stackRect && Number.isFinite(stackRect.height)
+                ? stackRect.height
+                : fallbackHeight;
+        const pointerOffsetX = metrics && Number.isFinite(metrics.pointerOffsetX)
+            ? metrics.pointerOffsetX
+            : stackRect && Number.isFinite(event.clientX)
+                ? event.clientX - stackRect.left
+                : width / 2;
+        const pointerOffsetY = metrics && Number.isFinite(metrics.pointerOffsetY)
+            ? metrics.pointerOffsetY
+            : stackRect && Number.isFinite(event.clientY)
+                ? event.clientY - stackRect.top
+                : height / 2;
+        const pointerLeft = metrics && Number.isFinite(metrics.left)
+            ? metrics.left
+            : Number.isFinite(event.clientX)
+                ? event.clientX - hostRect.left - pointerOffsetX
+                : null;
+        const pointerTop = metrics && Number.isFinite(metrics.top)
+            ? metrics.top
+            : Number.isFinite(event.clientY)
+                ? event.clientY - hostRect.top - pointerOffsetY
+                : null;
+        const left = pointerLeft !== null
+            ? pointerLeft
+            : stackRect
+                ? stackRect.left - hostRect.left
+                : (hostRect.width - width) / 2;
+        const top = pointerTop !== null
+            ? pointerTop
+            : stackRect
+                ? stackRect.top - hostRect.top
+                : (hostRect.height - height) / 2;
+        // Defer the DOM modification to prevent the browser from cancelling the drag operation.
+        setTimeout(() => {
+            const paneTitle = location.node.titles?.[pane];
+            this.removePaneFromLocation(location, pane);
+            const floatingStack = {
+                kind: 'stack',
+                panes: [pane],
+                activePane: pane,
+            };
+            if (paneTitle) {
+                floatingStack.titles = { [pane]: paneTitle };
+            }
+            const floatingLayout = {
+                bounds: {
+                    left,
+                    top,
+                    width,
+                    height,
+                },
+                root: floatingStack,
+                activePane: pane,
+            };
+            if (paneTitle) {
+                floatingLayout.titles = { [pane]: paneTitle };
+            }
+            this.floatingLayouts.push(floatingLayout);
+            const floatingIndex = this.floatingLayouts.length - 1;
+            // Defer rendering to avoid interrupting the drag-and-drop initialization in the browser.
+            // Synchronously re-rendering can cause the browser to lose track of the drag operation.
+            this.render();
+            const wrapper = this.getFloatingWrapper(floatingIndex);
+            if (wrapper) {
+                this.promoteFloatingPane(floatingIndex, wrapper);
+            }
+            this.dispatchLayoutChanged();
+            if (this.dragState) {
+                this.dragState.sourcePath = { type: 'floating', index: floatingIndex, segments: [] };
+                this.dragState.floatingIndex = floatingIndex;
+            }
+        }, 0);
+        return {
+            path: { type: 'floating', index: -1, segments: [] }, // Placeholder path
+            floatingIndex: -1,
+            pointerOffsetX,
+            pointerOffsetY,
+        };
+    }
+    endPaneDrag() {
+        this.clearPendingDragEndTimeout();
+        const state = this.dragState;
+        this.dragState = null;
+        this.hideDropIndicator();
+        this.stopDragPointerTracking();
+        this.lastDragPointerPosition = null;
+        if (state && state.floatingIndex !== null && !state.dropHandled) {
+            this.dispatchLayoutChanged();
+        }
+    }
+    onDragOver(event) {
+        if (!this.dragState) {
+            return;
         }
+        event.preventDefault();
+        this.updateDraggedFloatingPosition(event);
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        const stack = this.findStackElement(event);
+        if (!stack) {
+            this.hideDropIndicator();
+            return;
+        }
+        const path = this.parsePath(stack.dataset['path']);
+        const zone = this.computeDropZone(stack, event, this.extractDropZoneFromEvent(event));
+        this.showDropIndicator(stack, zone);
     }
-    onMouseUp(ev) {
-        this.isMouseDown = false;
-        this.isDragging = false;
-        this.dragOperation = undefined;
+    updateDraggedFloatingPosition(event) {
+        if (!this.dragState) {
+            return;
+        }
+        const { clientX, clientY, screenX, screenY } = event;
+        const hasValidCoordinates = Number.isFinite(clientX) &&
+            Number.isFinite(clientY) &&
+            !(clientX === 0 && clientY === 0 && screenX === 0 && screenY === 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);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockPanelHeaderComponent, deps: [{ token: BsDockPanelComponent }, { token: BsDockComponent }, { token: BsDockService }, { token: i0.ElementRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: BsDockPanelHeaderComponent, isStandalone: false, selector: "bs-dock-panel-header", host: { listeners: { "mousedown": "onMouseDown($event)", "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)" }, properties: { "class.d-block": "this.dBlock" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);margin:calc(-1 * var(--bs-nav-link-padding-y)) calc(-1 * var(--bs-nav-link-padding-x))}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockPanelHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bs-dock-panel-header', standalone: false, template: "<ng-content></ng-content>", styles: [":host{padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);margin:calc(-1 * var(--bs-nav-link-padding-y)) calc(-1 * var(--bs-nav-link-padding-x))}\n"] }]
-        }], ctorParameters: () => [{ type: BsDockPanelComponent }, { type: BsDockComponent }, { type: BsDockService }, { type: i0.ElementRef }, { type: i0.DestroyRef }], propDecorators: { onMouseDown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }], onMouseMove: [{
-                type: HostListener,
-                args: ['document:mousemove', ['$event']]
-            }], onMouseUp: [{
-                type: HostListener,
-                args: ['document:mouseup', ['$event']]
-            }], dBlock: [{
-                type: HostBinding,
-                args: ['class.d-block']
+    onGlobalDragOver(event) {
+        if (!this.dragState) {
+            return;
+        }
+        this.updateDraggedFloatingPosition(event);
+    }
+    onDrag(event) {
+        if (!this.dragState) {
+            return;
+        }
+        this.updateDraggedFloatingPosition(event);
+    }
+    onGlobalDragEnd() {
+        this.hideDropIndicator();
+        if (!this.dragState) {
+            this.clearPendingTabDragMetrics();
+            return;
+        }
+        this.endPaneDrag();
+        this.clearPendingTabDragMetrics();
+    }
+    updateDraggedFloatingPositionFromPoint(clientX, clientY) {
+        if (!this.dragState) {
+            return;
+        }
+        if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
+            return;
+        }
+        this.updatePaneDragDropTargetFromPoint(clientX, clientY);
+        const { floatingIndex, pointerOffsetX, pointerOffsetY } = this.dragState;
+        if (floatingIndex === null || floatingIndex < 0) {
+            return;
+        }
+        const floating = this.floatingLayouts[floatingIndex];
+        if (!floating) {
+            return;
+        }
+        const hostRect = this.getBoundingClientRect();
+        const newLeft = clientX - hostRect.left - pointerOffsetX;
+        const newTop = clientY - hostRect.top - pointerOffsetY;
+        floating.bounds.left = newLeft;
+        floating.bounds.top = newTop;
+        const wrapper = this.getFloatingWrapper(floatingIndex);
+        if (wrapper) {
+            wrapper.style.left = `${newLeft}px`;
+            wrapper.style.top = `${newTop}px`;
+        }
+    }
+    updatePaneDragDropTargetFromPoint(clientX, clientY) {
+        if (!this.dragState) {
+            return;
+        }
+        const stack = this.findStackAtPoint(clientX, clientY);
+        if (!stack) {
+            this.hideDropIndicator();
+            return;
+        }
+        const path = this.parsePath(stack.dataset['path']);
+        if (!path) {
+            this.hideDropIndicator();
+            return;
+        }
+        const zoneHint = this.findDropZoneByPoint(clientX, clientY);
+        const zone = this.computeDropZone(stack, { clientX, clientY }, zoneHint);
+        this.showDropIndicator(stack, zone);
+    }
+    startDragPointerTracking() {
+        if (this.dragPointerTrackingActive) {
+            return;
+        }
+        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);
+        this.dragPointerTrackingActive = true;
+    }
+    stopDragPointerTracking() {
+        if (!this.dragPointerTrackingActive) {
+            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);
+        this.dragPointerTrackingActive = false;
+        this.lastDragPointerPosition = null;
+        this.clearPendingDragEndTimeout();
+    }
+    onDragMouseMove(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();
+        this.lastDragPointerPosition = { x: touch.clientX, y: touch.clientY };
+        this.updateDraggedFloatingPositionFromPoint(touch.clientX, touch.clientY);
+    }
+    onDragMouseUp() {
+        if (!this.dragState) {
+            this.stopDragPointerTracking();
+            return;
+        }
+        this.scheduleDeferredDragEnd();
+    }
+    onDragTouchEnd() {
+        if (!this.dragState) {
+            this.stopDragPointerTracking();
+            return;
+        }
+        this.scheduleDeferredDragEnd();
+    }
+    clearPendingDragEndTimeout() {
+        if (this.pendingDragEndTimeout !== null) {
+            const win = this.windowRef;
+            if (win && typeof this.pendingDragEndTimeout === 'number') {
+                win.clearTimeout(this.pendingDragEndTimeout);
+            }
+            else {
+                globalThis.clearTimeout(this.pendingDragEndTimeout);
+            }
+            this.pendingDragEndTimeout = null;
+        }
+    }
+    scheduleDeferredDragEnd() {
+        if (this.pendingDragEndTimeout !== null) {
+            return;
+        }
+        const completeDrag = () => {
+            this.pendingDragEndTimeout = null;
+            this.hideDropIndicator();
+            if (!this.dragState) {
+                this.clearPendingTabDragMetrics();
+                return;
+            }
+            this.endPaneDrag();
+            this.clearPendingTabDragMetrics();
+        };
+        const win = this.windowRef;
+        this.pendingDragEndTimeout = win
+            ? 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);
+        if (!stack) {
+            this.hideDropIndicator();
+            this.endPaneDrag();
+            return;
+        }
+        const path = this.parsePath(stack.dataset['path']);
+        const eventZoneHint = this.extractDropZoneFromEvent(event);
+        const pointZoneHint = point ? this.findDropZoneByPoint(point.clientX, point.clientY) : null;
+        const zone = this.computeDropZone(stack, point ?? event, pointZoneHint ?? eventZoneHint);
+        if (!zone) {
+            this.hideDropIndicator();
+            this.endPaneDrag();
+            return;
+        }
+        this.handleDrop(path, zone);
+        this.endPaneDrag();
+    }
+    onDragLeave(event) {
+        const related = event.relatedTarget;
+        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;
+        }
+        const { pane, sourcePath } = this.dragState;
+        const source = this.resolveStackLocation(sourcePath);
+        const target = this.resolveStackLocation(targetPath);
+        if (!source || !target) {
+            return;
+        }
+        if (zone === 'center' && this.pathsEqual(sourcePath, targetPath)) {
+            if (!source.node.panes.includes(pane)) {
+                return;
+            }
+            this.reorderPaneInLocation(source, pane);
+            this.render();
+            this.dispatchLayoutChanged();
+            if (this.dragState) {
+                this.dragState.dropHandled = true;
+            }
+            return;
+        }
+        const paneTitle = source.node.titles?.[pane];
+        const stackEmptied = this.removePaneFromLocation(source, pane, true);
+        if (zone === 'center') {
+            this.addPaneToLocation(target, pane);
+            this.setActivePaneForLocation(target, pane);
+            if (paneTitle) {
+                target.node.titles = target.node.titles ? { ...target.node.titles } : {};
+                target.node.titles[pane] = paneTitle;
+            }
+            if (stackEmptied) {
+                this.cleanupLocation(source);
+            }
+            this.render();
+            this.dispatchLayoutChanged();
+            if (this.dragState) {
+                this.dragState.dropHandled = true;
+            }
+            return;
+        }
+        const newStack = {
+            kind: 'stack',
+            panes: [pane],
+            activePane: pane,
+        };
+        if (paneTitle) {
+            newStack.titles = { [pane]: paneTitle };
+        }
+        if (target.context === 'docked') {
+            this.rootLayout = this.dockNodeBeside(this.rootLayout, target.node, newStack, zone);
+        }
+        else {
+            const floating = this.floatingLayouts[target.index];
+            if (!floating) {
+                if (stackEmptied) {
+                    this.cleanupLocation(source);
+                }
+                this.render();
+                this.dispatchLayoutChanged();
+                return;
+            }
+            floating.root = this.dockNodeBeside(floating.root, target.node, newStack, zone);
+            floating.activePane = pane;
+        }
+        if (stackEmptied) {
+            this.cleanupLocation(source);
+        }
+        this.render();
+        this.dispatchLayoutChanged();
+        if (this.dragState) {
+            this.dragState.dropHandled = true;
+        }
+    }
+    handleFloatingStackDrop(sourceIndex, targetPath, zone) {
+        const source = this.floatingLayouts[sourceIndex];
+        if (!source || !source.root) {
+            return false;
+        }
+        const target = this.resolveStackLocation(targetPath);
+        if (!target) {
+            return false;
+        }
+        if (target.context === 'floating' && target.index === sourceIndex) {
+            return false;
+        }
+        if (zone === 'center') {
+            const { panes, titles } = this.collectFloatingPaneMetadata(source.root);
+            if (panes.length === 0) {
+                return false;
+            }
+            panes.forEach((pane) => {
+                this.addPaneToLocation(target, pane);
+                const title = titles[pane];
+                if (title) {
+                    target.node.titles = target.node.titles ? { ...target.node.titles } : {};
+                    target.node.titles[pane] = title;
+                }
+            });
+            const activePane = source.activePane && panes.includes(source.activePane)
+                ? source.activePane
+                : this.findFirstPaneName(source.root) ?? panes[0];
+            if (activePane) {
+                this.setActivePaneForLocation(target, activePane);
+            }
+            this.removeFloatingAt(sourceIndex);
+            this.render();
+            this.dispatchLayoutChanged();
+            return true;
+        }
+        if (target.context === 'floating') {
+            const floating = this.floatingLayouts[target.index];
+            if (!floating) {
+                return false;
+            }
+            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.dispatchLayoutChanged();
+            return true;
+        }
+        this.rootLayout = this.dockNodeBeside(this.rootLayout, target.node, source.root, zone);
+        this.removeFloatingAt(sourceIndex);
+        this.render();
+        this.dispatchLayoutChanged();
+        return true;
+    }
+    insertWeight(sizes, index, totalChildren) {
+        const existingCount = totalChildren - 1;
+        const normalized = this.normalizeSizesArray(sizes, existingCount);
+        const newWeight = 1 / totalChildren;
+        const remaining = 1 - newWeight;
+        const result = [];
+        for (let i = 0; i < totalChildren; i += 1) {
+            if (i === index) {
+                result.push(newWeight);
+            }
+            else {
+                const sourceIndex = i < index ? i : i - 1;
+                result.push(normalized[sourceIndex] * remaining);
+            }
+        }
+        return result;
+    }
+    removePaneFromStack(stack, pane, skipCleanup = false) {
+        stack.panes = stack.panes.filter((p) => p !== pane);
+        if (!stack.panes.includes(stack.activePane ?? '')) {
+            if (stack.panes.length > 0) {
+                stack.activePane = stack.panes[0];
+            }
+            else {
+                delete stack.activePane;
+            }
+        }
+        if (stack.panes.length > 0) {
+            return false;
+        }
+        if (skipCleanup) {
+            return true;
+        }
+        this.rootLayout = this.cleanupEmptyStackInTree(this.rootLayout, stack);
+        return true;
+    }
+    findParentSplit(node, child) {
+        if (!node || node === child) {
+            return null;
+        }
+        if (node.kind !== 'split') {
+            return null;
+        }
+        const index = node.children.indexOf(child);
+        if (index !== -1) {
+            return { parent: node, index };
+        }
+        for (let i = 0; i < node.children.length; i += 1) {
+            const result = this.findParentSplit(node.children[i], child);
+            if (result) {
+                return result;
+            }
+        }
+        return null;
+    }
+    computeDropZone(stack, point, zoneHint) {
+        const hintedZone = this.isDropZone(zoneHint) ? zoneHint : null;
+        if (hintedZone) {
+            this.updateDropJoystickActiveZone(hintedZone);
+            return hintedZone;
+        }
+        const pointZone = point &&
+            Number.isFinite(point.clientX) &&
+            Number.isFinite(point.clientY)
+            ? this.findDropZoneByPoint(point.clientX, point.clientY)
+            : null;
+        if (pointZone) {
+            this.updateDropJoystickActiveZone(pointZone);
+            return pointZone;
+        }
+        if (this.dropJoystickTarget === stack) {
+            this.updateDropJoystickActiveZone(null);
+        }
+        return null;
+    }
+    extractDropZoneFromEvent(event) {
+        if (!event) {
+            return null;
+        }
+        if (typeof event.composedPath === 'function') {
+            const path = event.composedPath();
+            for (const target of path) {
+                if (target instanceof HTMLElement &&
+                    target.classList.contains('dock-drop-joystick__button')) {
+                    const zone = target.dataset?.['zone'];
+                    if (this.isDropZone(zone)) {
+                        return zone;
+                    }
+                }
+            }
+        }
+        if ('clientX' in event && 'clientY' in event) {
+            const pointEvent = event;
+            const zoneFromPoint = this.findDropZoneByPoint(pointEvent.clientX, pointEvent.clientY);
+            if (zoneFromPoint) {
+                return zoneFromPoint;
+            }
+        }
+        return null;
+    }
+    findDropZoneByPoint(clientX, clientY) {
+        if (!this.dropJoystickButtons ||
+            this.dropJoystick.dataset['visible'] !== 'true' ||
+            !this.dropJoystickTarget) {
+            return null;
+        }
+        for (const button of this.dropJoystickButtons) {
+            const rect = button.getBoundingClientRect();
+            if (clientX >= rect.left &&
+                clientX <= rect.right &&
+                clientY >= rect.top &&
+                clientY <= rect.bottom) {
+                const zone = button.dataset['zone'];
+                if (this.isDropZone(zone)) {
+                    return zone;
+                }
+            }
+        }
+        return null;
+    }
+    updateDropJoystickActiveZone(zone) {
+        this.dropJoystickButtons.forEach((button) => {
+            const isActive = zone !== null && button.dataset['zone'] === zone;
+            if (isActive) {
+                button.dataset['active'] = 'true';
+            }
+            else {
+                delete button.dataset['active'];
+            }
+        });
+        if (zone) {
+            this.dropJoystick.dataset['zone'] = zone;
+        }
+        else {
+            delete this.dropJoystick.dataset['zone'];
+        }
+    }
+    isDropZone(value) {
+        return value === 'left' || value === 'right' || value === 'top' || value === 'bottom' || value === 'center';
+    }
+    showDropIndicator(stack, zone) {
+        const targetPath = this.parsePath(stack.dataset['path']);
+        const sourcePath = this.dragState?.sourcePath ?? null;
+        if (targetPath && sourcePath && this.isOrIsAncestorOf(targetPath, sourcePath)) {
+            // Don't show any drop indicators on the pane being dragged.
+            return;
+        }
+        const rect = stack.getBoundingClientRect();
+        const hostRect = this.getBoundingClientRect();
+        const indicator = this.dropIndicator;
+        const joystick = this.dropJoystick;
+        joystick.hidden = false;
+        const path = this.parsePath(stack.dataset['path']);
+        let overlayZ = 100;
+        if (path && path.type === 'floating') {
+            overlayZ = this.getFloatingPaneZIndex(path.index) + 100;
+        }
+        indicator.style.zIndex = String(overlayZ);
+        joystick.style.zIndex = String(overlayZ + 1);
+        let left = rect.left - hostRect.left;
+        let top = rect.top - hostRect.top;
+        let width = rect.width;
+        let height = rect.height;
+        const portion = 0.5;
+        if (zone) {
+            switch (zone) {
+                case 'left':
+                    width = rect.width * portion;
+                    break;
+                case 'right':
+                    width = rect.width * portion;
+                    left += rect.width * (1 - portion);
+                    break;
+                case 'top':
+                    height = rect.height * portion;
+                    break;
+                case 'bottom':
+                    height = rect.height * portion;
+                    top += rect.height * (1 - portion);
+                    break;
+                default:
+                    break;
+            }
+            indicator.style.left = `${left}px`;
+            indicator.style.top = `${top}px`;
+            indicator.style.width = `${width}px`;
+            indicator.style.height = `${height}px`;
+            indicator.dataset['visible'] = 'true';
+        }
+        else {
+            indicator.dataset['visible'] = 'false';
+        }
+        joystick.style.left = `${rect.left - hostRect.left + rect.width / 2}px`;
+        joystick.style.top = `${rect.top - hostRect.top + rect.height / 2}px`;
+        joystick.dataset['visible'] = 'true';
+        this.dropJoystick.style.display = 'grid';
+        joystick.dataset['path'] = stack.dataset['path'] ?? '';
+        this.dropJoystickTarget = stack;
+        this.updateDropJoystickActiveZone(zone);
+    }
+    hideDropIndicator() {
+        this.dropIndicator.dataset['visible'] = 'false';
+        this.dropJoystick.dataset['visible'] = 'false';
+        this.dropJoystick.style.display = 'none';
+        delete this.dropJoystick.dataset['path'];
+        this.dropJoystickTarget = null;
+        this.updateDropJoystickActiveZone(null);
+    }
+    findStackAtPoint(clientX, clientY) {
+        const shadow = this.shadowRoot;
+        if (!shadow) {
+            return null;
+        }
+        const elements = shadow.elementsFromPoint(clientX, clientY);
+        for (const element of elements) {
+            if (!(element instanceof HTMLElement)) {
+                continue;
+            }
+            if (element.classList.contains('dock-stack')) {
+                return element;
+            }
+            if (this.dropJoystickTarget &&
+                (element.classList.contains('dock-drop-joystick') ||
+                    element.classList.contains('dock-drop-joystick__button') ||
+                    element.classList.contains('dock-drop-joystick__spacer'))) {
+                return this.dropJoystickTarget;
+            }
+        }
+        return null;
+    }
+    findStackElement(event) {
+        const path = event.composedPath();
+        for (const target of path) {
+            if (!(target instanceof HTMLElement)) {
+                continue;
+            }
+            if (target.classList.contains('dock-stack')) {
+                return target;
+            }
+            if (this.dropJoystickTarget &&
+                (target.classList.contains('dock-drop-joystick') ||
+                    target.classList.contains('dock-drop-joystick__button') ||
+                    target.classList.contains('dock-drop-joystick__spacer'))) {
+                return this.dropJoystickTarget;
+            }
+        }
+        return null;
+    }
+    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');
+            }
+            else {
+                pane.setAttribute('hidden', '');
+            }
+        });
+        const location = this.resolveStackLocation(path);
+        if (!location) {
+            return;
+        }
+        location.node.activePane = paneName;
+        if (path.type === 'floating') {
+            const floating = this.floatingLayouts[path.index];
+            if (floating) {
+                floating.activePane = paneName;
+            }
+            this.updateFloatingWindowTitle(path.index);
+        }
+        this.dispatchLayoutChanged();
+    }
+    getNodeAtPath(root, path) {
+        if (!root) {
+            return null;
+        }
+        let current = root;
+        if (path.length === 0) {
+            return current;
+        }
+        for (const segment of path) {
+            if (!current || current.kind !== 'split') {
+                return null;
+            }
+            current = current.children[segment] ?? null;
+        }
+        return current;
+    }
+    resolveSplitNode(path) {
+        if (path.type === 'docked') {
+            const node = this.getNodeAtPath(this.rootLayout, path.segments);
+            return node && node.kind === 'split' ? node : null;
+        }
+        const floating = this.floatingLayouts[path.index];
+        if (!floating || !floating.root) {
+            return null;
+        }
+        const node = this.getNodeAtPath(floating.root, path.segments);
+        return node && node.kind === 'split' ? node : null;
+    }
+    replaceNodeInTree(root, target, replacement) {
+        if (!root) {
+            return replacement;
+        }
+        if (root === target) {
+            return replacement;
+        }
+        const parentInfo = this.findParentSplit(root, target);
+        if (!parentInfo) {
+            return root;
+        }
+        parentInfo.parent.children[parentInfo.index] = replacement;
+        this.normalizeSplitNode(parentInfo.parent);
+        return root;
+    }
+    cleanupEmptyStackInTree(root, stack) {
+        if (!root || stack.panes.length > 0) {
+            return root;
+        }
+        const parentInfo = this.findParentSplit(root, stack);
+        if (!parentInfo) {
+            return root === stack ? null : root;
+        }
+        const parent = parentInfo.parent;
+        const index = parent.children.indexOf(stack);
+        if (index === -1) {
+            return root;
+        }
+        parent.children.splice(index, 1);
+        if (Array.isArray(parent.sizes)) {
+            parent.sizes.splice(index, 1);
+        }
+        this.normalizeSplitNode(parent);
+        return this.cleanupSplitIfNecessary(root, parent);
+    }
+    cleanupSplitIfNecessary(root, split) {
+        if (split.children.length === 1) {
+            return this.replaceNodeInTree(root, split, split.children[0]);
+        }
+        if (split.children.length === 0) {
+            const parentInfo = this.findParentSplit(root, split);
+            if (!parentInfo) {
+                return null;
+            }
+            const parent = parentInfo.parent;
+            const index = parent.children.indexOf(split);
+            if (index !== -1) {
+                parent.children.splice(index, 1);
+                if (Array.isArray(parent.sizes)) {
+                    parent.sizes.splice(index, 1);
+                }
+                this.normalizeSplitNode(parent);
+                return this.cleanupSplitIfNecessary(root, parent);
+            }
+        }
+        return root;
+    }
+    dockNodeBeside(root, targetNode, newNode, zone) {
+        const orientation = zone === 'left' || zone === 'right' ? 'horizontal' : 'vertical';
+        const placeBefore = zone === 'left' || zone === 'top';
+        const parentInfo = this.findParentSplit(root, targetNode);
+        if (parentInfo && parentInfo.parent.direction === orientation) {
+            const insertIndex = placeBefore ? parentInfo.index : parentInfo.index + 1;
+            parentInfo.parent.children.splice(insertIndex, 0, newNode);
+            parentInfo.parent.sizes = this.insertWeight(parentInfo.parent.sizes, insertIndex, parentInfo.parent.children.length);
+            return root ?? newNode;
+        }
+        const split = {
+            kind: 'split',
+            direction: orientation,
+            children: placeBefore ? [newNode, targetNode] : [targetNode, newNode],
+            sizes: [0.5, 0.5],
+        };
+        return this.replaceNodeInTree(root, targetNode, split);
+    }
+    forEachStack(node, visitor, path = []) {
+        if (!node) {
+            return;
+        }
+        if (node.kind === 'stack') {
+            visitor(node, path);
+            return;
+        }
+        node.children.forEach((child, index) => this.forEachStack(child, visitor, [...path, index]));
+    }
+    findStackContainingPane(node, pane) {
+        let result = null;
+        this.forEachStack(node, (stack) => {
+            if (!result && stack.panes.includes(pane)) {
+                result = stack;
+            }
+        });
+        return result;
+    }
+    findFirstPaneName(node) {
+        let found = null;
+        this.forEachStack(node, (stack) => {
+            if (found || stack.panes.length === 0) {
+                return;
+            }
+            if (stack.activePane && stack.panes.includes(stack.activePane)) {
+                found = stack.activePane;
+            }
+            else {
+                found = stack.panes[0];
+            }
+        });
+        return found;
+    }
+    collectFloatingPaneMetadata(node) {
+        const panes = [];
+        const titles = {};
+        this.forEachStack(node, (stack) => {
+            stack.panes.forEach((pane) => {
+                panes.push(pane);
+                const title = stack.titles?.[pane];
+                if (title) {
+                    titles[pane] = title;
+                }
+            });
+        });
+        return { panes, titles };
+    }
+    normalizeFloatingLayout(layout) {
+        const bounds = layout.bounds ?? { left: 0, top: 0, width: 320, height: 200 };
+        const normalizedBounds = {
+            left: Number.isFinite(bounds.left) ? bounds.left : 0,
+            top: Number.isFinite(bounds.top) ? bounds.top : 0,
+            width: Number.isFinite(bounds.width) ? Math.max(bounds.width, 160) : 320,
+            height: Number.isFinite(bounds.height) ? Math.max(bounds.height, 120) : 200,
+        };
+        let root = layout.root ? this.cloneLayoutNode(layout.root) : null;
+        if (!root) {
+            const panes = Array.isArray(layout.panes) ? [...layout.panes] : [];
+            if (panes.length > 0) {
+                const active = layout.activePane && panes.includes(layout.activePane)
+                    ? layout.activePane
+                    : panes[0];
+                root = {
+                    kind: 'stack',
+                    panes,
+                    titles: layout.titles ? { ...layout.titles } : undefined,
+                    activePane: active,
+                };
+            }
+        }
+        return {
+            id: layout.id,
+            bounds: normalizedBounds,
+            zIndex: layout.zIndex,
+            root,
+            activePane: layout.activePane,
+        };
+    }
+    formatPath(path) {
+        if (path.type === 'floating') {
+            const suffix = path.segments.length > 0
+                ? `/${path.segments.map((segment) => segment.toString()).join('/')}`
+                : '';
+            return `f:${path.index}${suffix}`;
+        }
+        const suffix = path.segments.join('/');
+        return suffix.length > 0 ? `d:${suffix}` : 'd:';
+    }
+    clonePath(path) {
+        if (path.type === 'floating') {
+            return { type: 'floating', index: path.index, segments: [...path.segments] };
+        }
+        return { type: 'docked', segments: [...path.segments] };
+    }
+    parsePath(path) {
+        if (!path) {
+            return null;
+        }
+        if (path.startsWith('f:')) {
+            const remainder = path.slice(2);
+            const [indexPart, ...segmentParts] = remainder.split('/');
+            const index = Number.parseInt(indexPart, 10);
+            if (!Number.isFinite(index)) {
+                return null;
+            }
+            const segments = segmentParts
+                .filter((segment) => segment.length > 0)
+                .map((segment) => Number.parseInt(segment, 10))
+                .filter((value) => Number.isFinite(value));
+            return { type: 'floating', index, segments };
+        }
+        const normalized = path.startsWith('d:') ? path.slice(2) : path;
+        if (normalized.length === 0) {
+            return { type: 'docked', segments: [] };
+        }
+        const segments = normalized
+            .split('/')
+            .filter((segment) => segment.length > 0)
+            .map((segment) => Number.parseInt(segment, 10))
+            .filter((value) => Number.isFinite(value));
+        return { type: 'docked', segments };
+    }
+    pathsEqual(a, b) {
+        if (a.type !== b.type) {
+            return false;
+        }
+        if (a.type === 'floating') {
+            const other = b;
+            if (a.index !== other.index) {
+                return false;
+            }
+            if (a.segments.length !== other.segments.length) {
+                return false;
+            }
+            return a.segments.every((value, index) => value === other.segments[index]);
+        }
+        const other = b;
+        if (a.segments.length !== other.segments.length) {
+            return false;
+        }
+        return a.segments.every((value, index) => value === other.segments[index]);
+    }
+    isOrIsAncestorOf(ancestor, descendant) {
+        if (ancestor.type !== descendant.type) {
+            return false;
+        }
+        if (ancestor.type === 'floating') {
+            if (descendant.index !== ancestor.index) {
+                return false;
+            }
+        }
+        if (ancestor.segments.length > descendant.segments.length) {
+            return false;
+        }
+        return ancestor.segments.every((segment, i) => segment === descendant.segments[i]);
+    }
+    countPanesInTree(node) {
+        if (!node) {
+            return 0;
+        }
+        if (node.kind === 'stack') {
+            return node.panes.length;
+        }
+        return node.children.reduce((total, child) => total + this.countPanesInTree(child), 0);
+    }
+    resolveStackLocation(path) {
+        if (path.type === 'floating') {
+            const layout = this.floatingLayouts[path.index];
+            if (!layout || !layout.root) {
+                return null;
+            }
+            const node = this.getNodeAtPath(layout.root, path.segments);
+            if (!node || node.kind !== 'stack') {
+                return null;
+            }
+            return { context: 'floating', index: path.index, path: [...path.segments], node };
+        }
+        const node = this.getNodeAtPath(this.rootLayout, path.segments);
+        if (!node || node.kind !== 'stack') {
+            return null;
+        }
+        return { context: 'docked', path: [...path.segments], node };
+    }
+    removePaneFromLocation(location, pane, skipCleanup = false) {
+        if (location.context === 'docked') {
+            return this.removePaneFromStack(location.node, pane, skipCleanup);
+        }
+        return this.removePaneFromFloating(location.index, location.path, pane, skipCleanup);
+    }
+    addPaneToLocation(location, pane) {
+        const panes = location.node.panes;
+        const existingIndex = panes.indexOf(pane);
+        if (existingIndex !== -1) {
+            panes.splice(existingIndex, 1);
+        }
+        panes.push(pane);
+    }
+    setActivePaneForLocation(location, pane) {
+        location.node.activePane = pane;
+        if (location.context === 'floating') {
+            const floating = this.floatingLayouts[location.index];
+            if (floating) {
+                floating.activePane = pane;
+            }
+        }
+    }
+    cleanupLocation(location) {
+        if (location.context === 'docked') {
+            this.rootLayout = this.cleanupEmptyStackInTree(this.rootLayout, location.node);
+        }
+        else {
+            const floating = this.floatingLayouts[location.index];
+            if (!floating) {
+                return;
+            }
+            floating.root = this.cleanupEmptyStackInTree(floating.root, location.node);
+            if (!floating.root) {
+                this.removeFloatingAt(location.index);
+            }
+        }
+    }
+    reorderPaneInLocation(location, pane) {
+        const panes = location.node.panes;
+        const index = panes.indexOf(pane);
+        if (index === -1) {
+            return;
+        }
+        panes.splice(index, 1);
+        panes.push(pane);
+        location.node.activePane = pane;
+        if (location.context === 'floating') {
+            const floating = this.floatingLayouts[location.index];
+            if (floating) {
+                floating.activePane = pane;
+            }
+        }
+    }
+    removeFloatingAt(index) {
+        if (index < 0 || index >= this.floatingLayouts.length) {
+            return;
+        }
+        this.floatingLayouts.splice(index, 1);
+    }
+    removePaneFromFloating(index, path, pane, skipCleanup = false) {
+        const floating = this.floatingLayouts[index];
+        if (!floating || !floating.root) {
+            return false;
+        }
+        const node = this.getNodeAtPath(floating.root, path);
+        if (!node || node.kind !== 'stack') {
+            return false;
+        }
+        node.panes = node.panes.filter((p) => p !== pane);
+        if (!node.panes.includes(node.activePane ?? '')) {
+            if (node.panes.length > 0) {
+                node.activePane = node.panes[0];
+            }
+            else {
+                delete node.activePane;
+            }
+        }
+        if (floating.activePane === pane) {
+            const fallback = this.findFirstPaneName(floating.root);
+            if (fallback) {
+                floating.activePane = fallback;
+            }
+            else {
+                delete floating.activePane;
+            }
+        }
+        if (node.panes.length > 0) {
+            return false;
+        }
+        if (skipCleanup) {
+            return true;
+        }
+        floating.root = this.cleanupEmptyStackInTree(floating.root, node);
+        if (!floating.root) {
+            this.removeFloatingAt(index);
+        }
+        return true;
+    }
+    normalizeSizesArray(sizes, count) {
+        if (count <= 0) {
+            return [];
+        }
+        if (!Array.isArray(sizes) || sizes.length !== count) {
+            return Array.from({ length: count }, () => 1 / count);
+        }
+        const normalized = sizes.map((value) => (Number.isFinite(value) ? Math.max(value, 0) : 0));
+        const total = normalized.reduce((acc, value) => acc + value, 0);
+        if (total <= 0) {
+            return Array.from({ length: count }, () => 1 / count);
+        }
+        return normalized.map((value) => value / total);
+    }
+    normalizeSplitNode(split) {
+        split.sizes = this.normalizeSizesArray(split.sizes, split.children.length);
+    }
+    dispatchLayoutChanged() {
+        this.dispatchEvent(new CustomEvent('dock-layout-changed', {
+            detail: this.snapshot,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    cloneLayoutNode(layout) {
+        if (!layout) {
+            return null;
+        }
+        return JSON.parse(JSON.stringify(layout));
+    }
+    cloneFloatingArray(layouts) {
+        return JSON.parse(JSON.stringify(layouts));
+    }
+}
+const tagName = 'mint-dock-manager';
+if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+    customElements.define(tagName, MintDockManagerElement);
+}
+
+class BsDockManagerComponent {
+    set layout(value) {
+        const snapshot = this.cloneLayout(this.ensureSnapshot(value));
+        this._layout = snapshot;
+        this.layoutString = this.stringifyLayout(snapshot);
+        this.applyLayout();
+    }
+    get layout() {
+        if (!this._layout.root && this._layout.floating.length === 0) {
+            return null;
+        }
+        return this.cloneLayout(this._layout);
+    }
+    constructor(changeDetector, documentRef) {
+        this.changeDetector = changeDetector;
+        this.layoutChange = new EventEmitter();
+        this.layoutSnapshotChange = new EventEmitter();
+        this.layoutString = null;
+        this.panes = new QueryList();
+        this.trackByPane = (_, pane) => pane.name;
+        this._layout = { root: null, floating: [] };
+        if (documentRef) {
+            MintDockManagerElement.configureDocument(documentRef);
+        }
+    }
+    ngAfterViewInit() {
+        this.applyLayout();
+    }
+    captureLayout() {
+        const element = this.managerRef?.nativeElement;
+        return element?.snapshot ?? { root: null, floating: [] };
+    }
+    onLayoutChanged(event) {
+        const snapshot = event.detail ?? {
+            root: null,
+            floating: [],
+        };
+        this._layout = this.cloneLayout(snapshot);
+        this.layoutString = this.stringifyLayout(this._layout);
+        this.layoutChange.emit(this.layout);
+        this.layoutSnapshotChange.emit(this.cloneLayout(snapshot));
+        this.changeDetector.markForCheck();
+    }
+    applyLayout() {
+        if (!this.managerRef) {
+            return;
+        }
+        const element = this.managerRef.nativeElement;
+        const layout = this.layout;
+        element.layout = layout ?? null;
+    }
+    ensureSnapshot(value) {
+        if (!value) {
+            return { root: null, floating: [] };
+        }
+        if ('kind' in value) {
+            return { root: value, floating: [] };
+        }
+        return {
+            root: value.root ?? null,
+            floating: Array.isArray(value.floating) ? [...value.floating] : [],
+        };
+    }
+    stringifyLayout(layout) {
+        if (!layout.root && layout.floating.length === 0) {
+            return null;
+        }
+        return JSON.stringify(layout);
+    }
+    cloneLayout(layout) {
+        return JSON.parse(JSON.stringify(layout));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockManagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: BsDockManagerComponent, isStandalone: false, selector: "bs-dock-manager", inputs: { layout: "layout" }, outputs: { layoutChange: "layoutChange", layoutSnapshotChange: "layoutSnapshotChange" }, queries: [{ propertyName: "panes", predicate: BsDockPaneComponent }], viewQueries: [{ propertyName: "managerRef", first: true, predicate: ["manager"], descendants: true, static: 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  <ng-container *ngFor=\"let pane of panes; trackBy: trackByPane\">\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name\">\n      <ng-container *ngTemplateOutlet=\"pane.template\"></ng-container>\n    </div>\n  </ng-container>\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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-dock-manager', standalone: false, 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  <ng-container *ngFor=\"let pane of panes; trackBy: trackByPane\">\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name\">\n      <ng-container *ngTemplateOutlet=\"pane.template\"></ng-container>\n    </div>\n  </ng-container>\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: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { layout: [{
+                type: Input
+            }], layoutChange: [{
+                type: Output
+            }], layoutSnapshotChange: [{
+                type: Output
+            }], panes: [{
+                type: ContentChildren,
+                args: [BsDockPaneComponent]
+            }], managerRef: [{
+                type: ViewChild,
+                args: ['manager', { static: true }]
             }] } });
 
 class BsDockModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: BsDockModule, declarations: [BsDockComponent,
-            BsDockPanelComponent,
-            BsDockPanelHeaderComponent,
-            BsDockPaneRendererComponent], imports: [AsyncPipe,
-            PortalModule,
-            BsCardModule,
-            BsInstanceOfModule,
-            BsSplitterModule,
-            BsTabControlModule,
-            BsResizableModule], exports: [BsDockComponent,
-            BsDockPanelComponent,
-            BsDockPanelHeaderComponent,
-            BsDockPaneRendererComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockModule, imports: [PortalModule,
-            BsCardModule,
-            BsInstanceOfModule,
-            BsSplitterModule,
-            BsTabControlModule,
-            BsResizableModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: BsDockModule, declarations: [BsDockManagerComponent, BsDockPaneComponent], imports: [CommonModule], exports: [BsDockManagerComponent, BsDockPaneComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsDockModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        BsDockComponent,
-                        BsDockPanelComponent,
-                        BsDockPanelHeaderComponent,
-                        BsDockPaneRendererComponent
-                    ],
-                    imports: [
-                        AsyncPipe,
-                        PortalModule,
-                        BsCardModule,
-                        BsInstanceOfModule,
-                        BsSplitterModule,
-                        BsTabControlModule,
-                        BsResizableModule
-                    ],
-                    exports: [
-                        BsDockComponent,
-                        BsDockPanelComponent,
-                        BsDockPanelHeaderComponent,
-                        BsDockPaneRendererComponent
-                    ]
+                    declarations: [BsDockManagerComponent, BsDockPaneComponent],
+                    imports: [CommonModule],
+                    exports: [BsDockManagerComponent, BsDockPaneComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }] });
 
@@ -589,5 +2635,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BsContentPane, BsDockComponent, BsDockModule, BsDockPane, BsDockPaneRendererComponent, BsDockPanelComponent, BsDockPanelHeaderComponent, BsDockService, BsDocumentHost, BsFloatingPane, BsSplitPane, BsTabGroupPane, EPaneType };
+export { BsDockManagerComponent, BsDockModule, BsDockPaneComponent, MintDockManagerElement };
 //# sourceMappingURL=mintplayer-ng-bootstrap-dock.mjs.map