@mintplayer/ng-bootstrap 21.24.0 → 21.26.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, viewChild, TemplateRef, ChangeDetectionStrategy, Component, output, signal, contentChildren, inject, effect, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { input, viewChild, TemplateRef, ChangeDetectionStrategy, Component, computed, output, signal, contentChildren, inject, effect, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { html, unsafeCSS, LitElement } from 'lit';
 import '@mintplayer/ng-bootstrap/web-components/tab-control';
@@ -318,12 +318,21 @@ const styles = unsafeCSS(`:host {
   padding: 0.5rem 1rem;
   margin: -0.5rem -1rem;
   touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
 }
 
 .dock-tab:active {
   cursor: grabbing;
 }
 
+.dock-tab[data-pressing=true] {
+  background-color: var(--bs-secondary-bg-subtle, rgba(0, 0, 0, 0.05));
+  transform: scale(1.02);
+  transition: background-color 100ms ease-out, transform 100ms ease-out;
+}
+
 .dock-stack__pane {
   position: relative;
   display: flex;
@@ -419,9 +428,16 @@ class MintDockManagerElement extends LitElement {
         }
     }
     static get observedAttributes() {
-        return [...(super.observedAttributes ?? []), 'layout'];
+        return [...(super.observedAttributes ?? []), 'layout', 'debug-layout-integrity'];
     }
     static { this.instanceCounter = 0; }
+    // Touch tab-drag gesture: a finger that lands on a tab header must be able
+    // to scroll the tabstrip natively. We require a stationary hold before
+    // arming the drag, so a horizontal swipe scrolls instead of undocking.
+    // See docs/prd/dock-touch-long-press-drag.md.
+    static { this.TOUCH_LONG_PRESS_MS = 600; }
+    static { this.TOUCH_LONG_PRESS_SLOP_PX = 10; }
+    static { this.TOUCH_PRESS_FEEDBACK_DELAY_MS = 150; }
     renderSnapMarkersForCorner() {
         if (!this.showSnapMarkers)
             return;
@@ -501,6 +517,11 @@ class MintDockManagerElement extends LitElement {
         this.cornerSnapYTargets = [];
         // Debug: render snap markers while dragging
         this.showSnapMarkers = false;
+        // Debug: assert every pane has a projection slot in shadow DOM after each
+        // render. Off by default so production hosts pay no overhead; demo enables
+        // it via the `debug-layout-integrity` attribute to catch layout-tree bugs
+        // loudly during development.
+        this.debugLayoutIntegrity = false;
         this.pendingDragEndTimeout = null;
         this.previousSplitSizes = new Map();
         this.instanceId = `mint-dock-${++MintDockManagerElement.instanceCounter}`;
@@ -615,6 +636,9 @@ class MintDockManagerElement extends LitElement {
                 this.clearSnapMarkers();
             }
         }
+        else if (name === 'debug-layout-integrity') {
+            this.debugLayoutIntegrity = !(newValue === null || newValue === 'false' || newValue === '0');
+        }
     }
     get layout() {
         return {
@@ -657,6 +681,9 @@ class MintDockManagerElement extends LitElement {
         this.rootLayout = this.cloneLayoutNode(snapshot.root);
         this.floatingLayouts = this.cloneFloatingArray(snapshot.floating);
         this.titles = snapshot.titles ? { ...snapshot.titles } : {};
+        // Sanitize whatever the host fed us: empty stacks, 0/1-child splits, and
+        // nested same-direction splits get pruned/flattened before we render.
+        this.normalizeAllLayouts();
         this.renderLayout();
     }
     /**
@@ -740,6 +767,7 @@ class MintDockManagerElement extends LitElement {
         // wired up in firstUpdated (rootResizeObserver, dockedMutationObserver,
         // and delegated 'resizing' / 'resize-end' events). The MutationObserver
         // on dockedEl fires when the renderNode subtree above is appended.
+        this.verifyProjectionSlots();
     }
     renderNode(node, path, floatingIndex) {
         if (node.kind === 'split') {
@@ -1814,13 +1842,18 @@ class MintDockManagerElement extends LitElement {
         this.pendingTabDragMetrics = null;
     }
     /**
-     * Pointerdown handler arms a "may become a drag" gesture. Once the pointer
-     * moves past `threshold` pixels we promote it to an actual pane drag via
-     * {@link beginPaneDrag}; if the user releases first we just clear the
-     * pending tab metrics. All listeners self-clean on resolve so the gesture
-     * stays scoped to a single pointerdown.
+     * Pointerdown handler arms a "may become a drag" gesture. Mouse / pen use a
+     * 5 px distance threshold and arm immediately; touch dispatches to
+     * {@link armPaneDragGestureTouch} which requires a 600 ms stationary hold
+     * (so the user can scroll the tabstrip natively without undocking).
+     * Once armed, both paths converge on {@link beginPaneDrag}. All listeners
+     * self-clean on resolve so the gesture stays scoped to a single pointerdown.
      */
     armPaneDragGesture(startEvent, path, pane, stackEl) {
+        if (startEvent.pointerType === 'touch') {
+            this.armPaneDragGestureTouch(startEvent, path, pane, stackEl);
+            return;
+        }
         if (startEvent.pointerType === 'mouse' && startEvent.button !== 0)
             return;
         const win = this.windowRef;
@@ -1857,6 +1890,152 @@ class MintDockManagerElement extends LitElement {
         win.addEventListener('pointerup', onRelease, true);
         win.addEventListener('pointercancel', onRelease, true);
     }
+    /**
+     * Touch-specific gesture arming. With `.dock-tab` set to `touch-action:
+     * none`, the browser never arbitrates the gesture itself, so JS owns it
+     * from frame 1. Three outcomes from the pending state:
+     *
+     *  - User holds within {@link TOUCH_LONG_PRESS_SLOP_PX} for
+     *    {@link TOUCH_LONG_PRESS_MS} → timer fires → drag arms via
+     *    {@link beginPaneDrag}.
+     *  - User moves past slop and the move is mostly horizontal, and the
+     *    strip's `<ul>` is scrollable → enter `scrolling` mode and drive
+     *    `ul.scrollLeft` from JS for the rest of the gesture (no drag, no
+     *    momentum — direct 1:1 finger follow).
+     *  - User moves past slop in any other direction, releases, or
+     *    pointercancel fires → abandoned, no drag, no scroll. Releases
+     *    under slop fire the synthesized click that drives `tab-activate`.
+     *
+     * `touch-action: pan-x` was the original PRD design but doesn't work:
+     * the policy is frozen at touchstart and `setPointerCapture` doesn't
+     * promote it, so first move after a long-press fires pointercancel and
+     * strands the panel. JS-driven scroll is the only model that holds.
+     */
+    armPaneDragGestureTouch(startEvent, path, pane, stackEl) {
+        const win = this.windowRef;
+        if (!win)
+            return;
+        const startX = startEvent.clientX;
+        const startY = startEvent.clientY;
+        const pointerId = startEvent.pointerId;
+        let latestX = startX;
+        let latestY = startY;
+        let lastScrollX = startX;
+        let resolved = false;
+        let scrolling = false;
+        let pressFeedbackApplied = false;
+        const tabSpan = startEvent.currentTarget instanceof HTMLElement
+            ? startEvent.currentTarget
+            : startEvent.target instanceof HTMLElement
+                ? startEvent.target.closest('.dock-tab')
+                : null;
+        const stripUl = stackEl
+            ? this.getStackStripEl(stackEl)?.querySelector('ul.nav.nav-tabs') ?? null
+            : null;
+        const cleanup = () => {
+            if (resolved)
+                return;
+            resolved = true;
+            win.clearTimeout(longPressTimeout);
+            win.clearTimeout(pressFeedbackTimeout);
+            win.removeEventListener('pointermove', onMove, true);
+            win.removeEventListener('pointerup', onRelease, true);
+            win.removeEventListener('pointercancel', onCancel, true);
+            if (pressFeedbackApplied && tabSpan) {
+                tabSpan.removeAttribute('data-pressing');
+            }
+        };
+        const onMove = (event) => {
+            if (resolved || event.pointerId !== pointerId)
+                return;
+            if (scrolling) {
+                const dx = event.clientX - lastScrollX;
+                lastScrollX = event.clientX;
+                if (stripUl)
+                    stripUl.scrollLeft -= dx;
+                return;
+            }
+            latestX = event.clientX;
+            latestY = event.clientY;
+            const dx = event.clientX - startX;
+            const dy = event.clientY - startY;
+            if (Math.hypot(dx, dy) <= MintDockManagerElement.TOUCH_LONG_PRESS_SLOP_PX) {
+                return;
+            }
+            // Slop crossed before the long-press fired. If the move is mostly
+            // horizontal and the strip can scroll, take over scroll in JS;
+            // otherwise abandon (no drag — browser native UI is fully suppressed
+            // by `touch-action: none` so no fallback is needed).
+            const stripScrollable = !!stripUl && stripUl.scrollWidth > stripUl.clientWidth;
+            if (Math.abs(dx) > Math.abs(dy) && stripScrollable) {
+                win.clearTimeout(longPressTimeout);
+                win.clearTimeout(pressFeedbackTimeout);
+                if (pressFeedbackApplied && tabSpan) {
+                    tabSpan.removeAttribute('data-pressing');
+                    pressFeedbackApplied = false;
+                }
+                scrolling = true;
+                lastScrollX = event.clientX;
+                stripUl.scrollLeft -= dx;
+                this.clearPendingTabDragMetrics();
+                return;
+            }
+            cleanup();
+            this.clearPendingTabDragMetrics();
+        };
+        const onRelease = (event) => {
+            if (resolved || event.pointerId !== pointerId)
+                return;
+            cleanup();
+            this.clearPendingTabDragMetrics();
+        };
+        const onCancel = (event) => {
+            if (resolved || event.pointerId !== pointerId)
+                return;
+            cleanup();
+            this.clearPendingTabDragMetrics();
+        };
+        const longPressTimeout = win.setTimeout(() => {
+            if (resolved)
+                return;
+            cleanup();
+            try {
+                this.setPointerCapture(pointerId);
+            }
+            catch {
+                // setPointerCapture throws if the pointer is no longer active
+                // (e.g. timer raced a pointerup we didn't see). Drag will abort
+                // naturally on the next event.
+            }
+            if (typeof navigator !== 'undefined' && typeof navigator.vibrate === 'function') {
+                try {
+                    navigator.vibrate(10);
+                }
+                catch {
+                    // ignore
+                }
+            }
+            const synthEvent = new PointerEvent('pointermove', {
+                pointerId,
+                pointerType: 'touch',
+                isPrimary: true,
+                clientX: latestX,
+                clientY: latestY,
+                bubbles: false,
+                cancelable: false,
+            });
+            this.beginPaneDrag(synthEvent, path, pane, stackEl);
+        }, MintDockManagerElement.TOUCH_LONG_PRESS_MS);
+        const pressFeedbackTimeout = win.setTimeout(() => {
+            if (resolved || !tabSpan)
+                return;
+            pressFeedbackApplied = true;
+            tabSpan.setAttribute('data-pressing', 'true');
+        }, MintDockManagerElement.TOUCH_PRESS_FEEDBACK_DELAY_MS);
+        win.addEventListener('pointermove', onMove, true);
+        win.addEventListener('pointerup', onRelease, true);
+        win.addEventListener('pointercancel', onCancel, true);
+    }
     beginPaneDrag(event, path, pane, stackEl) {
         const { path: sourcePath, floatingIndex, pointerOffsetX, pointerOffsetY, } = this.preparePaneDragSource(path, pane, stackEl, event);
         // Capture header bounds for detecting when to convert to floating.
@@ -2420,7 +2599,32 @@ class MintDockManagerElement extends LitElement {
         const placeholderButton = placeholderTabId
             ? allTabButtons.find((b) => b.id === `${placeholderTabId}-header-button`) ?? null
             : null;
-        const targets = allTabButtons.filter((b) => b !== placeholderButton);
+        // The dragged pane's content is `data-hidden`, but mp-tab-control's strip
+        // re-render is async (its MutationObserver schedules a Lit microtask). When
+        // beginPaneDrag calls updateDraggedFloatingPositionFromPoint synchronously
+        // right after preparePaneDragSource, this runs before that re-render — so
+        // the dragged button is still in the strip's shadow. We must exclude it
+        // explicitly, otherwise the loop counts it as a real target and the
+        // placeholder gets appended past the live tabs (visible on touch
+        // long-press, where the finger doesn't move and the user sees the
+        // mis-positioned placeholder for the duration of the hold).
+        const draggedPane = this.dragState?.pane ?? null;
+        let draggedTabId = null;
+        if (draggedPane) {
+            for (const child of Array.from(stack.children)) {
+                if (child instanceof HTMLElement &&
+                    child.classList.contains('dock-tab') &&
+                    !child.hasAttribute('data-placeholder') &&
+                    child.dataset['pane'] === draggedPane) {
+                    draggedTabId = child.dataset['tabId'] ?? null;
+                    break;
+                }
+            }
+        }
+        const draggedButton = draggedTabId
+            ? allTabButtons.find((b) => b.id === `${draggedTabId}-header-button`) ?? null
+            : null;
+        const targets = allTabButtons.filter((b) => b !== placeholderButton && b !== draggedButton);
         if (targets.length === 0) {
             return 0;
         }
@@ -2543,16 +2747,14 @@ class MintDockManagerElement extends LitElement {
             if (!source) {
                 return;
             }
-            const stackEmptied = this.removePaneFromLocation(source, pane, true);
+            this.removePaneFromLocation(source, pane, true);
             const newRoot = {
                 kind: 'stack',
                 panes: [pane],
                 activePane: pane,
             };
             this.rootLayout = newRoot;
-            if (stackEmptied) {
-                this.cleanupLocation(source);
-            }
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             if (this.dragState) {
@@ -2568,6 +2770,7 @@ class MintDockManagerElement extends LitElement {
                 return;
             }
             this.reorderPaneInLocation(source, pane);
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             if (this.dragState) {
@@ -2575,13 +2778,11 @@ class MintDockManagerElement extends LitElement {
             }
             return;
         }
-        const stackEmptied = this.removePaneFromLocation(source, pane, true);
+        this.removePaneFromLocation(source, pane, true);
         if (zone === 'center') {
             this.addPaneToLocation(target, pane);
             this.setActivePaneForLocation(target, pane);
-            if (stackEmptied) {
-                this.cleanupLocation(source);
-            }
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             if (this.dragState) {
@@ -2600,9 +2801,7 @@ class MintDockManagerElement extends LitElement {
         else {
             const floating = this.floatingLayouts[target.index];
             if (!floating) {
-                if (stackEmptied) {
-                    this.cleanupLocation(source);
-                }
+                this.normalizeAllLayouts();
                 this.renderLayout();
                 this.dispatchLayoutChanged();
                 return;
@@ -2610,9 +2809,7 @@ class MintDockManagerElement extends LitElement {
             floating.root = this.dockNodeBeside(floating.root, target.node, newStack, zone);
             floating.activePane = pane;
         }
-        if (stackEmptied) {
-            this.cleanupLocation(source);
-        }
+        this.normalizeAllLayouts();
         this.renderLayout();
         this.dispatchLayoutChanged();
         if (this.dragState) {
@@ -2630,6 +2827,7 @@ class MintDockManagerElement extends LitElement {
         if (!target && targetPath.type === 'docked' && !this.rootLayout) {
             this.rootLayout = this.cloneLayoutNode(source.root);
             this.removeFloatingAt(sourceIndex);
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             return true;
@@ -2655,6 +2853,7 @@ class MintDockManagerElement extends LitElement {
                 this.setActivePaneForLocation(target, activePane);
             }
             this.removeFloatingAt(sourceIndex);
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             return true;
@@ -2667,12 +2866,14 @@ class MintDockManagerElement extends LitElement {
             floating.root = this.dockNodeBeside(floating.root, target.node, source.root, zone);
             floating.activePane = source.activePane ?? this.findFirstPaneName(source.root) ?? undefined;
             this.removeFloatingAt(sourceIndex);
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             return true;
         }
         this.rootLayout = this.dockNodeBeside(this.rootLayout, target.node, source.root, zone);
         this.removeFloatingAt(sourceIndex);
+        this.normalizeAllLayouts();
         this.renderLayout();
         this.dispatchLayoutChanged();
         return true;
@@ -2710,7 +2911,7 @@ class MintDockManagerElement extends LitElement {
         if (skipCleanup) {
             return true;
         }
-        this.rootLayout = this.cleanupEmptyStackInTree(this.rootLayout, stack);
+        this.normalizeAllLayouts();
         return true;
     }
     findParentSplit(node, child) {
@@ -3083,48 +3284,6 @@ class MintDockManagerElement extends LitElement {
         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';
@@ -3345,21 +3504,6 @@ class MintDockManagerElement extends LitElement {
             }
         }
     }
-    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);
@@ -3415,10 +3559,7 @@ class MintDockManagerElement extends LitElement {
         if (skipCleanup) {
             return true;
         }
-        floating.root = this.cleanupEmptyStackInTree(floating.root, node);
-        if (!floating.root) {
-            this.removeFloatingAt(index);
-        }
+        this.normalizeAllLayouts();
         return true;
     }
     normalizeSizesArray(sizes, count) {
@@ -3438,6 +3579,115 @@ class MintDockManagerElement extends LitElement {
     normalizeSplitNode(split) {
         split.sizes = this.normalizeSizesArray(split.sizes, split.children.length);
     }
+    /**
+     * Bottom-up layout sanitizer. Returns a normalized version of `node` where:
+     * - Empty stacks (panes.length === 0) are dropped (returned as null).
+     * - A stack's `activePane` is repaired if it no longer references one of `panes`.
+     * - Splits whose direction matches a child split are flattened, with sizes
+     *   combined multiplicatively so the resulting on-screen pixel layout is
+     *   identical to the pre-merge one.
+     * - Splits with 0 children become null. Splits with 1 child are unwrapped.
+     *
+     * Idempotent: passing the result back through this method yields the same
+     * structure. Mutates the input tree in place but only returns nodes that
+     * remain part of the layout.
+     */
+    normalizeLayoutNode(node) {
+        if (!node)
+            return null;
+        if (node.kind === 'stack') {
+            if (node.panes.length === 0)
+                return null;
+            if (!node.activePane || !node.panes.includes(node.activePane)) {
+                node.activePane = node.panes[0];
+            }
+            return node;
+        }
+        const slotSizes = this.normalizeSizesArray(node.sizes, node.children.length);
+        // Pair each child with its slot weight, drop nulls, then expand any
+        // same-direction child split into its grandchildren with sizes scaled
+        // multiplicatively. A 0.4 slot containing [0.3, 0.7] becomes [0.12, 0.28].
+        const survivors = node.children
+            .map((child, i) => ({ child: this.normalizeLayoutNode(child), slot: slotSizes[i] }))
+            .filter((p) => p.child !== null)
+            .flatMap(({ child, slot }) => {
+            if (child.kind === 'split' && child.direction === node.direction) {
+                const innerSizes = this.normalizeSizesArray(child.sizes, child.children.length);
+                return child.children.map((grandchild, idx) => ({
+                    child: grandchild,
+                    slot: slot * innerSizes[idx],
+                }));
+            }
+            return [{ child, slot }];
+        });
+        if (survivors.length === 0)
+            return null;
+        if (survivors.length === 1)
+            return survivors[0].child;
+        node.children = survivors.map((s) => s.child);
+        node.sizes = this.normalizeSizesArray(survivors.map((s) => s.slot), survivors.length);
+        return node;
+    }
+    /**
+     * Apply `normalizeLayoutNode` to `rootLayout` and every floating window's
+     * root, drop floating windows whose root collapses to null, and repair
+     * stale `activePane` references on each floating window. Run this at the
+     * end of every public mutation entry point (drop handlers, layout setter,
+     * pane removal) so the tree the renderer sees is always in canonical form.
+     */
+    normalizeAllLayouts() {
+        this.rootLayout = this.normalizeLayoutNode(this.rootLayout);
+        this.floatingLayouts = this.floatingLayouts
+            .map((floating) => {
+            floating.root = this.normalizeLayoutNode(floating.root);
+            if (!floating.root)
+                return null;
+            const panes = this.collectPaneNames(floating.root);
+            if (!floating.activePane || !panes.includes(floating.activePane)) {
+                const fallback = this.findFirstPaneName(floating.root);
+                if (fallback) {
+                    floating.activePane = fallback;
+                }
+                else {
+                    delete floating.activePane;
+                }
+            }
+            return floating;
+        })
+            .filter((f) => f !== null);
+    }
+    /**
+     * Dev-mode integrity guard: walks every pane referenced by the current
+     * layout and asserts that the rendered shadow DOM contains a matching
+     * `<slot name="${pane}">`. A missing slot means the layout tree got into
+     * a state the renderer can't display — typically a missed normalize() call
+     * or a render bug. Opt in via the `debug-layout-integrity` attribute or
+     * the `debugLayoutIntegrity` property; off by default.
+     */
+    verifyProjectionSlots() {
+        if (!this.debugLayoutIntegrity)
+            return;
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        // Collect every slot the renderer produced. Walking the rendered DOM
+        // (instead of building a CSS selector per pane) sidesteps environment
+        // differences — e.g. jsdom does not expose `CSS.escape`, which would
+        // crash the guard during unit tests before the assertion runs.
+        const slotNames = new Set(Array.from(root.querySelectorAll('slot'))
+            .map((slot) => slot.getAttribute('name'))
+            .filter((name) => !!name));
+        const panes = [
+            ...this.collectPaneNames(this.rootLayout),
+            ...this.floatingLayouts.flatMap((f) => this.collectPaneNames(f.root)),
+        ];
+        const missing = panes.find((pane) => !slotNames.has(pane));
+        if (missing) {
+            throw new Error(`mint-dock-manager: pane "${missing}" has no projection slot in the shadow DOM. ` +
+                `The layout tree got into a state the renderer can't display — likely a ` +
+                `missing normalize() call or a render bug.`);
+        }
+    }
     dispatchLayoutChanged() {
         this.dispatchEvent(new CustomEvent('dock-layout-changed', {
             detail: this.snapshot,
@@ -3469,6 +3719,14 @@ class BsDockManagerComponent {
     }
     constructor() {
         this.layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        /**
+         * Dev-mode integrity guard. When `true`, the inner web component throws
+         * after each render if any registered pane has no projection slot in the
+         * shadow DOM — a signal that the layout tree got corrupted. Off by default;
+         * enable in development to catch layout-logic bugs loudly.
+         */
+        this.debugLayoutIntegrity = input(false, ...(ngDevMode ? [{ debugName: "debugLayoutIntegrity" }] : /* istanbul ignore next */ []));
+        this.debugLayoutIntegrityAttr = computed(() => this.debugLayoutIntegrity() ? '' : null, ...(ngDevMode ? [{ debugName: "debugLayoutIntegrityAttr" }] : /* istanbul ignore next */ []));
         this.layoutChange = output();
         this.layoutSnapshotChange = output();
         this.layoutString = signal(null, ...(ngDevMode ? [{ debugName: "layoutString" }] : /* istanbul ignore next */ []));
@@ -3537,12 +3795,12 @@ class BsDockManagerComponent {
         return JSON.parse(JSON.stringify(layout));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDockManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsDockManagerComponent, isStandalone: true, selector: "bs-dock-manager", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", layoutSnapshotChange: "layoutSnapshotChange" }, queries: [{ propertyName: "panes", predicate: BsDockPaneComponent, isSignal: true }], viewQueries: [{ propertyName: "managerRef", first: true, predicate: ["manager"], descendants: true, isSignal: true }], ngImport: i0, template: "<mint-dock-manager\n  #manager\n  class=\"bs-dock-manager\"\n  [attr.layout]=\"layoutString()\"\n  (dock-layout-changed)=\"onLayoutChanged($event)\"\n  >\n  @for (pane of panes(); track trackByPane($index, pane)) {\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name()\">\n      <ng-container *ngTemplateOutlet=\"pane.template()\"></ng-container>\n    </div>\n  }\n</mint-dock-manager>\n", styles: [":host{display:block;width:100%;height:100%}.bs-dock-manager{display:block;width:100%;height:100%}.bs-dock-pane{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsDockManagerComponent, isStandalone: true, selector: "bs-dock-manager", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, debugLayoutIntegrity: { classPropertyName: "debugLayoutIntegrity", publicName: "debugLayoutIntegrity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", layoutSnapshotChange: "layoutSnapshotChange" }, queries: [{ propertyName: "panes", predicate: BsDockPaneComponent, isSignal: true }], viewQueries: [{ propertyName: "managerRef", first: true, predicate: ["manager"], descendants: true, isSignal: true }], ngImport: i0, template: "<mint-dock-manager\n  #manager\n  class=\"bs-dock-manager\"\n  [attr.layout]=\"layoutString()\"\n  [attr.debug-layout-integrity]=\"debugLayoutIntegrityAttr()\"\n  (dock-layout-changed)=\"onLayoutChanged($event)\"\n  >\n  @for (pane of panes(); track trackByPane($index, pane)) {\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name()\">\n      <ng-container *ngTemplateOutlet=\"pane.template()\"></ng-container>\n    </div>\n  }\n</mint-dock-manager>\n", styles: [":host{display:block;width:100%;height:100%}.bs-dock-manager{display:block;width:100%;height:100%}.bs-dock-pane{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDockManagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-dock-manager', imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mint-dock-manager\n  #manager\n  class=\"bs-dock-manager\"\n  [attr.layout]=\"layoutString()\"\n  (dock-layout-changed)=\"onLayoutChanged($event)\"\n  >\n  @for (pane of panes(); track trackByPane($index, pane)) {\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name()\">\n      <ng-container *ngTemplateOutlet=\"pane.template()\"></ng-container>\n    </div>\n  }\n</mint-dock-manager>\n", styles: [":host{display:block;width:100%;height:100%}.bs-dock-manager{display:block;width:100%;height:100%}.bs-dock-pane{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], layoutSnapshotChange: [{ type: i0.Output, args: ["layoutSnapshotChange"] }], panes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BsDockPaneComponent), { isSignal: true }] }], managerRef: [{ type: i0.ViewChild, args: ['manager', { isSignal: true }] }] } });
+            args: [{ selector: 'bs-dock-manager', imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mint-dock-manager\n  #manager\n  class=\"bs-dock-manager\"\n  [attr.layout]=\"layoutString()\"\n  [attr.debug-layout-integrity]=\"debugLayoutIntegrityAttr()\"\n  (dock-layout-changed)=\"onLayoutChanged($event)\"\n  >\n  @for (pane of panes(); track trackByPane($index, pane)) {\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name()\">\n      <ng-container *ngTemplateOutlet=\"pane.template()\"></ng-container>\n    </div>\n  }\n</mint-dock-manager>\n", styles: [":host{display:block;width:100%;height:100%}.bs-dock-manager{display:block;width:100%;height:100%}.bs-dock-pane{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], debugLayoutIntegrity: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugLayoutIntegrity", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], layoutSnapshotChange: [{ type: i0.Output, args: ["layoutSnapshotChange"] }], panes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BsDockPaneComponent), { isSignal: true }] }], managerRef: [{ type: i0.ViewChild, args: ['manager', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.