@xui/dock-manager 2.0.0-alpha.11

package/fesm2022/xui-dock-manager.mjs

@@ -0,0 +1,2311 @@
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, InjectionToken, ElementRef, effect, ViewContainerRef, contentChildren, model, output, signal, computed, DestroyRef, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { provideIcons, NgIcon } from '@ng-icons/core';
+import { matOpenInNewRound, matCloseFullscreenRound, matOpenInFullRound, matPushPinRound, matDockRound, matCloseRound } from '@ng-icons/material-icons/round';
+import { xui } from '@xui/core';
+import { injectXDirection, arrowDirectionOnAxis } from '@xui/core/a11y';
+import { XuiIcon } from '@xui/icon';
+
+/**
+ * Declares the body of one content pane.
+ *
+ * The `contentId` links the template to the `contentId` of a
+ * {@link XuiDockContentPane} in the layout — the dock manager's equivalent of
+ * Ignite UI's `slot="…"` children.
+ *
+ * ```html
+ * <xui-dock-manager [(layout)]="layout">
+ *   <ng-template xuiDockContent="explorer">…</ng-template>
+ *   <ng-template xuiDockContent="editor">…</ng-template>
+ * </xui-dock-manager>
+ * ```
+ *
+ * The template is instantiated once, the first time its pane is shown, and the
+ * resulting view is then kept for as long as the pane is in the layout — docking,
+ * floating, unpinning and tab switching all move its DOM rather than rebuilding
+ * it, so scroll offsets, half-typed input and component state survive.
+ */
+class XuiDockContent {
+    /** Matches the `contentId` of a content pane in the layout. */
+    contentId = input.required({ ...(ngDevMode ? { debugName: "contentId" } : /* istanbul ignore next */ {}), alias: 'xuiDockContent' });
+    template = inject(TemplateRef);
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDockContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: XuiDockContent, isStandalone: true, selector: "ng-template[xuiDockContent]", inputs: { contentId: { classPropertyName: "contentId", publicName: "xuiDockContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDockContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[xuiDockContent]' }]
+        }], propDecorators: { contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xuiDockContent", required: true }] }] } });
+const XUI_DOCK_CONTENT_MOUNTER = new InjectionToken('XuiDockContentMounter');
+/**
+ * Fills its host element with the content view for a `contentId`.
+ *
+ * Used internally by `xui-dock-manager` wherever a pane body is rendered.
+ */
+class XuiDockContentOutlet {
+    host = inject(ElementRef).nativeElement;
+    mounter = inject(XUI_DOCK_CONTENT_MOUNTER);
+    contentId = input.required({ ...(ngDevMode ? { debugName: "contentId" } : /* istanbul ignore next */ {}), alias: 'xuiDockContentOutlet' });
+    constructor() {
+        effect(onCleanup => {
+            const contentId = this.contentId();
+            this.mounter.mountContent(contentId, this.host);
+            // Angular gives no ordering guarantee between the old outlet's cleanup and
+            // the new outlet's mount, so release is conditional on the nodes still
+            // being here — otherwise a re-layout could pull content out of the element
+            // that just claimed it.
+            onCleanup(() => this.mounter.releaseContent(contentId, this.host));
+        });
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDockContentOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: XuiDockContentOutlet, isStandalone: true, selector: "[xuiDockContentOutlet]", inputs: { contentId: { classPropertyName: "contentId", publicName: "xuiDockContentOutlet", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDockContentOutlet, decorators: [{
+            type: Directive,
+            args: [{ selector: '[xuiDockContentOutlet]' }]
+        }], ctorParameters: () => [], propDecorators: { contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xuiDockContentOutlet", required: true }] }] } });
+
+/**
+ * The dock manager's layout is a plain, serialisable tree — the same shape Ignite
+ * UI's `IgcDockManagerLayout` uses, so layouts port across with only the `Igc`
+ * prefix dropped. Nothing in the tree holds a DOM reference or an Angular type,
+ * which is what makes a layout safe to persist and restore.
+ */
+function isContentPane(pane) {
+    return pane.type === 'contentPane';
+}
+function isSplitPane(pane) {
+    return pane.type === 'splitPane';
+}
+function isTabGroupPane(pane) {
+    return pane.type === 'tabGroupPane';
+}
+function isDocumentHost(pane) {
+    return pane.type === 'documentHost';
+}
+function isParentPane(pane) {
+    return pane.type === 'splitPane' || pane.type === 'tabGroupPane';
+}
+
+/**
+ * Tree operations over a {@link XuiDockManagerLayout}.
+ *
+ * Every mutating function works **in place** on the layout object it is given and
+ * leaves the pane objects themselves identity-stable: docking a pane re-parents
+ * the very same object rather than a copy. The dock manager depends on that — it
+ * keys rendered panes, cached content views and drag targets off object identity,
+ * so a pane keeps its DOM (and therefore its scroll position, form state and
+ * focus) as it moves around the layout.
+ *
+ * Callers that need an undo buffer should snapshot with {@link cloneDockLayout}
+ * before mutating.
+ */
+const paneKeys = new WeakMap();
+let nextPaneKey = 0;
+/**
+ * A stable string key for a pane object, allocated on first use.
+ *
+ * Used for `@for` tracking and for finding the pane behind a DOM element during a
+ * drag. Keyed by object identity, so it survives every operation in this file and
+ * is *not* preserved by {@link cloneDockLayout}.
+ */
+function dockPaneKey(pane) {
+    let key = paneKeys.get(pane);
+    if (!key) {
+        key = `pane-${++nextPaneKey}`;
+        paneKeys.set(pane, key);
+    }
+    return key;
+}
+/**
+ * A structural copy of the layout, safe to keep as an undo snapshot.
+ *
+ * A round-trip through JSON, which the layout's own contract allows: every node
+ * is plain data. The copy is a *different* set of objects, so its panes get fresh
+ * {@link dockPaneKey}s and restoring it replaces the rendered panes rather than
+ * moving them.
+ */
+function cloneDockLayout(layout) {
+    return JSON.parse(JSON.stringify(layout));
+}
+/** The child panes of `pane`, or an empty array for a leaf. */
+function dockChildren(pane) {
+    if (isParentPane(pane)) {
+        return pane.panes;
+    }
+    return isDocumentHost(pane) ? [pane.rootPane] : [];
+}
+/** Every root of the layout: the docked tree, then each floating window. */
+function dockRoots(layout) {
+    return [layout.rootPane, ...(layout.floatingPanes ?? [])];
+}
+/**
+ * Depth-first walk over every pane in the layout, floating windows included.
+ * Returning `false` from `visitor` skips that pane's subtree.
+ */
+function visitDockPanes(layout, visitor) {
+    const walk = (pane) => {
+        if (visitor(pane) === false) {
+            return;
+        }
+        for (const child of [...dockChildren(pane)]) {
+            walk(child);
+        }
+    };
+    for (const root of dockRoots(layout)) {
+        walk(root);
+    }
+}
+/** The pane whose `panes` array holds `pane`, or `null` for a root. */
+function findDockParent(layout, pane) {
+    let found = null;
+    visitDockPanes(layout, candidate => {
+        if (found) {
+            return false;
+        }
+        if (isParentPane(candidate) && candidate.panes.includes(pane)) {
+            found = candidate;
+            return false;
+        }
+        return undefined;
+    });
+    return found;
+}
+/** `pane`'s ancestors, nearest first. */
+function dockAncestors(layout, pane) {
+    const path = [];
+    const walk = (current, trail) => {
+        if (current === pane) {
+            path.push(...trail);
+            return true;
+        }
+        for (const child of dockChildren(current)) {
+            if (walk(child, [current, ...trail])) {
+                return true;
+            }
+        }
+        return false;
+    };
+    for (const root of dockRoots(layout)) {
+        if (walk(root, [])) {
+            break;
+        }
+    }
+    return path;
+}
+/** The layout's document host, if it has one. */
+function findDocumentHost(layout) {
+    let host = null;
+    visitDockPanes(layout, pane => {
+        if (host) {
+            return false;
+        }
+        if (isDocumentHost(pane)) {
+            host = pane;
+            return false;
+        }
+        return undefined;
+    });
+    return host;
+}
+/** Whether `pane` sits inside the document host. */
+function isInDocumentHost(layout, pane) {
+    return dockAncestors(layout, pane).some(isDocumentHost);
+}
+/** Whether `pane` is the root of a floating window. */
+function isFloatingRoot(layout, pane) {
+    return (layout.floatingPanes ?? []).includes(pane);
+}
+/** Whether `pane` is a root that must not be collapsed away. */
+function isDockRoot(layout, pane) {
+    return pane === layout.rootPane || isFloatingRoot(layout, pane);
+}
+/** Every content pane in the layout, in tree order. */
+function collectContentPanes(layout) {
+    const out = [];
+    visitDockPanes(layout, pane => {
+        if (isContentPane(pane)) {
+            out.push(pane);
+        }
+    });
+    return out;
+}
+/** The content pane that is currently maximized, if any. */
+function findMaximizedPane(layout) {
+    return collectContentPanes(layout).find(pane => pane.isMaximized) ?? null;
+}
+/**
+ * Whether the pane takes up space in the docked layout. An unpinned content pane
+ * does not, and neither does a split pane or tab group whose whole subtree is
+ * unpinned — otherwise collapsing a sidebar would leave a gap behind it.
+ */
+function isDockPaneVisible(pane) {
+    if (isContentPane(pane)) {
+        return pane.isPinned !== false;
+    }
+    if (isDocumentHost(pane)) {
+        return true;
+    }
+    return pane.panes.some(isDockPaneVisible);
+}
+/** The children of `pane` that take up space, in order. */
+function visibleDockChildren(pane) {
+    return [...dockChildren(pane)].filter(isDockPaneVisible);
+}
+/** The tab a tab group shows: its `selectedIndex`, or the first pinned tab. */
+function selectedTabPane(group) {
+    const visible = group.panes.filter(isDockPaneVisible);
+    if (!visible.length) {
+        return null;
+    }
+    const selected = group.panes[group.selectedIndex ?? 0];
+    return selected && visible.includes(selected) ? selected : visible[0];
+}
+/**
+ * Which edge an unpinned pane collapses to when `unpinnedLocation` is unset.
+ *
+ * Follows the pane's own position in the tree — a pane in the first branch of a
+ * horizontal split goes to the inline start, one in the last branch to the inline
+ * end — so a sidebar collapses to the side it was already on.
+ */
+function defaultUnpinnedLocation(layout, pane) {
+    let child = pane;
+    for (const ancestor of dockAncestors(layout, pane)) {
+        if (isSplitPane(ancestor) && ancestor.panes.length > 1) {
+            const first = ancestor.panes.indexOf(child) === 0;
+            if (ancestor.orientation === 'horizontal') {
+                return first ? 'start' : 'end';
+            }
+            return first ? 'top' : 'bottom';
+        }
+        child = ancestor;
+    }
+    return 'end';
+}
+/** The unpinned content panes, grouped by the edge their tabs sit on. */
+function unpinnedDockPanes(layout) {
+    const groups = { start: [], end: [], top: [], bottom: [] };
+    for (const pane of collectContentPanes(layout)) {
+        if (pane.isPinned === false) {
+            groups[pane.unpinnedLocation ?? defaultUnpinnedLocation(layout, pane)].push(pane);
+        }
+    }
+    return groups;
+}
+/**
+ * Tidy the tree after a mutation: drop empty parents, unwrap split panes down to
+ * a single child, merge nested splits that run along the same axis, and clamp
+ * every tab group's selected index.
+ *
+ * Roots survive all of this — `layout.rootPane`, a floating window's root and a
+ * document host's root pane are structural and stay put even when empty. A root
+ * left with a single split pane beneath it absorbs that child rather than being
+ * replaced by it.
+ */
+function normalizeDockLayout(layout) {
+    const root = normalizePane(layout.rootPane, true);
+    layout.rootPane = (root ?? emptySplitPane());
+    const floating = [];
+    for (const pane of layout.floatingPanes ?? []) {
+        const normalized = normalizePane(pane, true);
+        // A floating window whose last pane was closed or docked away is gone.
+        if (normalized && isSplitPane(normalized) && normalized.panes.length) {
+            floating.push(normalized);
+        }
+    }
+    layout.floatingPanes = floating;
+}
+function emptySplitPane() {
+    return { type: 'splitPane', orientation: 'horizontal', panes: [], allowEmpty: true };
+}
+function normalizePane(pane, isRoot) {
+    if (isContentPane(pane)) {
+        return pane;
+    }
+    if (isDocumentHost(pane)) {
+        const inner = normalizePane(pane.rootPane, true);
+        pane.rootPane = inner && isSplitPane(inner) ? inner : emptySplitPane();
+        // The document host is structural: an empty editor area is a valid state.
+        return pane;
+    }
+    if (isTabGroupPane(pane)) {
+        if (!pane.panes.length && !pane.allowEmpty && !isRoot) {
+            return null;
+        }
+        pane.selectedIndex = Math.min(Math.max(pane.selectedIndex ?? 0, 0), Math.max(0, pane.panes.length - 1));
+        return pane;
+    }
+    const children = [];
+    for (const child of pane.panes) {
+        const normalized = normalizePane(child, false);
+        if (!normalized) {
+            continue;
+        }
+        // A split inside a split along the same axis is the same layout with an extra
+        // level of nesting; splice it away so repeated docking cannot grow the tree
+        // without bound.
+        if (isSplitPane(normalized) && normalized.orientation === pane.orientation && normalized.panes.length > 1) {
+            children.push(...redistribute(normalized.panes, normalized.size ?? 1));
+            continue;
+        }
+        children.push(normalized);
+    }
+    pane.panes = children;
+    if (!children.length) {
+        return pane.allowEmpty || isRoot ? pane : null;
+    }
+    if (children.length === 1) {
+        const only = children[0];
+        if (!isRoot) {
+            // The wrapper's share of the grandparent becomes the child's.
+            only.size = pane.size ?? only.size;
+            return only;
+        }
+        // A root cannot be replaced — floating geometry and the caller's reference
+        // hang off it — so it absorbs its lone child's axis and children instead.
+        // Without this, every drop onto the root would leave another dead level.
+        if (isSplitPane(only)) {
+            pane.orientation = only.orientation;
+            pane.panes = only.panes;
+        }
+    }
+    return pane;
+}
+/** Rescale `panes` so their weights sum to `total`, keeping their proportions. */
+function redistribute(panes, total) {
+    const sum = panes.reduce((acc, pane) => acc + (pane.size ?? 1), 0) || panes.length;
+    for (const pane of panes) {
+        pane.size = ((pane.size ?? 1) / sum) * total;
+    }
+    return panes;
+}
+/**
+ * Detach `pane` from wherever it sits — a parent's `panes`, or the floating
+ * window list — and tidy up behind it. Returns `false` if it was not in the
+ * layout at all.
+ */
+function removeDockPane(layout, pane) {
+    const floating = layout.floatingPanes ?? [];
+    const floatingIndex = floating.indexOf(pane);
+    if (floatingIndex >= 0) {
+        floating.splice(floatingIndex, 1);
+        normalizeDockLayout(layout);
+        return true;
+    }
+    const parent = findDockParent(layout, pane);
+    if (!parent) {
+        return false;
+    }
+    parent.panes.splice(parent.panes.indexOf(pane), 1);
+    normalizeDockLayout(layout);
+    return true;
+}
+/** The axis a docking position splits along. */
+function axisOf(position) {
+    return position === 'start' || position === 'end' ? 'horizontal' : 'vertical';
+}
+/** Whether the dragged pane goes before the target along that axis. */
+function isBefore(position) {
+    return position === 'start' || position === 'top';
+}
+/**
+ * Whether `pane` may be dropped onto `target`.
+ *
+ * A `documentOnly` pane is confined to the document host; anything else may dock
+ * anywhere. A pane can never be dropped onto itself or into its own subtree.
+ */
+function canDockInto(layout, pane, target, position) {
+    if (pane === target) {
+        return false;
+    }
+    if (dockAncestors(layout, target).includes(pane)) {
+        return false;
+    }
+    if (isContentPane(pane) && pane.allowDocking === false) {
+        return false;
+    }
+    if (!documentOnlyPanes(pane)) {
+        return true;
+    }
+    // Docking against the document host's outer edges would put the document
+    // *beside* the editor area rather than in it, so only `center` qualifies.
+    return isDocumentHost(target) ? position === 'center' : isInDocumentHost(layout, target);
+}
+/** Whether every content pane in `pane`'s subtree is `documentOnly`. */
+function documentOnlyPanes(pane) {
+    const contents = [];
+    const walk = (current) => {
+        if (isContentPane(current)) {
+            contents.push(current);
+            return;
+        }
+        for (const child of dockChildren(current)) {
+            walk(child);
+        }
+    };
+    walk(pane);
+    return contents.length > 0 && contents.every(content => content.documentOnly);
+}
+/**
+ * Attach `pane` to the layout next to `target`.
+ *
+ * `center` tabs the pane together with the target — turning a lone content pane
+ * into a two-tab group — while the four edge positions split the space. An edge
+ * drop reuses the target's parent when it already runs along the right axis, so
+ * dropping three panes to the right of each other yields one three-way split
+ * rather than three nested ones.
+ */
+function insertDockPane(layout, pane, target, position) {
+    if (position === 'center') {
+        return insertIntoCenter(layout, pane, target);
+    }
+    const axis = axisOf(position);
+    const before = isBefore(position);
+    const parent = findDockParent(layout, target);
+    if (parent && isSplitPane(parent) && parent.orientation === axis) {
+        const index = parent.panes.indexOf(target);
+        // Split the target's own share rather than adding weight, so the panes either
+        // side of it keep the proportions they had.
+        const share = target.size ?? 1;
+        target.size = share / 2;
+        pane.size = share / 2;
+        parent.panes.splice(before ? index : index + 1, 0, pane);
+        normalizeDockLayout(layout);
+        return true;
+    }
+    // A root has no parent to insert into, so it grows a level instead: it keeps
+    // its own identity (and any floating geometry) and adopts the new axis.
+    if (!parent && isSplitPane(target) && isDockRoot(layout, target)) {
+        if (target.orientation !== axis && target.panes.length > 1) {
+            const inner = { type: 'splitPane', orientation: target.orientation, panes: target.panes };
+            target.panes = [inner];
+        }
+        target.orientation = axis;
+        target.panes.splice(before ? 0 : target.panes.length, 0, pane);
+        normalizeDockLayout(layout);
+        return true;
+    }
+    const wrapper = {
+        type: 'splitPane',
+        orientation: axis,
+        size: target.size ?? 1,
+        panes: before ? [pane, target] : [target, pane]
+    };
+    target.size = 1;
+    pane.size = 1;
+    return replacePane(layout, target, wrapper);
+}
+function insertIntoCenter(layout, pane, target) {
+    const incoming = isContentPane(pane) ? [pane] : tabbableContentPanes(pane);
+    if (isDocumentHost(target)) {
+        return insertIntoCenter(layout, pane, target.rootPane);
+    }
+    if (isTabGroupPane(target) && incoming.length) {
+        target.panes.push(...incoming);
+        target.selectedIndex = target.panes.length - 1;
+        normalizeDockLayout(layout);
+        return true;
+    }
+    if (isSplitPane(target)) {
+        // Nothing to tab with — an empty split pane (a bare document host) simply
+        // adopts the pane.
+        target.panes.push(pane);
+        normalizeDockLayout(layout);
+        return true;
+    }
+    if (!isContentPane(target) || !incoming.length) {
+        return false;
+    }
+    const group = {
+        type: 'tabGroupPane',
+        size: target.size ?? 1,
+        panes: [target, ...incoming],
+        // Select the pane that was just dropped, the way a dragged browser tab lands
+        // in front.
+        selectedIndex: 1
+    };
+    target.size = 1;
+    return replacePane(layout, target, group);
+}
+/** The content panes of a subtree, flattened, for merging into a tab group. */
+function tabbableContentPanes(pane) {
+    const out = [];
+    const walk = (current) => {
+        if (isContentPane(current)) {
+            out.push(current);
+            return;
+        }
+        for (const child of dockChildren(current)) {
+            walk(child);
+        }
+    };
+    walk(pane);
+    return out;
+}
+/** Swap `target` for `replacement` wherever it sits, root positions included. */
+function replacePane(layout, target, replacement) {
+    if (target === layout.rootPane) {
+        layout.rootPane = replacement;
+        normalizeDockLayout(layout);
+        return true;
+    }
+    const floating = layout.floatingPanes ?? [];
+    const floatingIndex = floating.indexOf(target);
+    if (floatingIndex >= 0) {
+        floating[floatingIndex] = replacement;
+        normalizeDockLayout(layout);
+        return true;
+    }
+    const parent = findDockParent(layout, target);
+    if (parent) {
+        parent.panes[parent.panes.indexOf(target)] = replacement;
+        normalizeDockLayout(layout);
+        return true;
+    }
+    const host = dockAncestors(layout, target).find(isDocumentHost);
+    if (host && isSplitPane(replacement)) {
+        host.rootPane = replacement;
+        normalizeDockLayout(layout);
+        return true;
+    }
+    return false;
+}
+/** Move `pane` out of the layout and into a floating window of its own. */
+function floatDockPane(layout, pane, location, size) {
+    if (isContentPane(pane) && pane.allowFloating === false) {
+        return null;
+    }
+    // Already floating: this is a move, not a detach.
+    if (isSplitPane(pane) && isFloatingRoot(layout, pane)) {
+        pane.floatingLocation = location;
+        return pane;
+    }
+    if (!removeDockPane(layout, pane)) {
+        return null;
+    }
+    pane.size = 1;
+    const window = {
+        type: 'splitPane',
+        orientation: 'horizontal',
+        panes: [pane],
+        floatingLocation: location,
+        floatingWidth: size?.width ?? 400,
+        floatingHeight: size?.height ?? 300,
+        floatingResizable: true
+    };
+    layout.floatingPanes = [...(layout.floatingPanes ?? []), window];
+    normalizeDockLayout(layout);
+    return window;
+}
+/** Move `pane` from wherever it is to `position` relative to `target`. */
+function dockPaneAt(layout, pane, target, position) {
+    if (!canDockInto(layout, pane, target, position)) {
+        return false;
+    }
+    removeDockPane(layout, pane);
+    // Geometry only means something while the pane is a floating window; leaving it
+    // behind would resurrect the old size the next time it is floated.
+    if (isSplitPane(pane)) {
+        delete pane.floatingLocation;
+        delete pane.floatingWidth;
+        delete pane.floatingHeight;
+        delete pane.floatingResizable;
+    }
+    // `removeDockPane` normalises, which can unwrap the target's parent — but never
+    // the target itself, so it is still a valid insertion point.
+    return insertDockPane(layout, pane, target, position);
+}
+
+/** Thickness of the edge strips that hold unpinned panes' tabs, in pixels. */
+const STRIP_SIZE = 32;
+/** How close to the dock manager's own edge a drop docks against the whole layout. */
+const OUTER_EDGE = 28;
+/** A pane never resizes below this, so its header always stays grabbable. */
+const MIN_PANE_SIZE = 48;
+/** Where a floating window sits when its layout gives no `floatingLocation`. */
+const FLOATING_ORIGIN = { x: 40, y: 40 };
+/** Pointer travel before a press on a header turns into a drag. */
+const DRAG_THRESHOLD = 4;
+/** The centre of a pane is a "tab it here" target; outside it, the nearest edge wins. */
+const CENTRE_ZONE = 0.3;
+/** Size of one docking indicator square, and the gap between them. */
+const INDICATOR_SIZE = 30;
+const INDICATOR_GAP = 4;
+/** How far the outer ring of indicators sits from the dock manager's frame. */
+const INDICATOR_INSET = 8;
+/** Below this the joystick would not fit inside the pane, so it is not offered. */
+const INDICATOR_MIN_PANE = 96;
+/**
+ * An IDE-style docking layout: resizable split panes, tab groups, a document
+ * host, collapsible edge panels and floating windows, all driven by one
+ * serialisable {@link XuiDockManagerLayout} tree.
+ *
+ * ```html
+ * <xui-dock-manager [(layout)]="layout" class="h-[32rem]">
+ *   <ng-template xuiDockContent="explorer">…</ng-template>
+ *   <ng-template xuiDockContent="editor">…</ng-template>
+ * </xui-dock-manager>
+ * ```
+ *
+ * The layout shape follows Ignite UI's `IgcDockManagerLayout`, so existing
+ * layouts port over by dropping the `Igc` prefix and using string literals in
+ * place of its enums.
+ *
+ * Panes carry no content of their own: each one names a `contentId`, and the
+ * matching `[xuiDockContent]` template supplies the body. Those bodies are
+ * instantiated once and then *moved* as the layout changes, so a pane keeps its
+ * scroll position and component state when it is dragged to another dock, tabbed,
+ * floated or collapsed.
+ *
+ * `layout` is two-way bindable and the dock manager edits the tree **in place**
+ * before emitting, which is what keeps pane identity stable across a drag. Bind a
+ * signal to it and snapshot with `cloneDockLayout()` if you need an undo buffer.
+ *
+ * Dragging is a pointer gesture. Picking up a pane raises Visual Studio's docking
+ * targets: a five-way joystick over whichever pane is under the pointer — four
+ * arms to split it, the centre to tab with it — and an outer ring at the dock
+ * manager's edges to dock against the whole layout. Only the targets the dragged
+ * pane is allowed to take are drawn, and the one that would be used is
+ * highlighted while an outline previews the space it would claim.
+ *
+ * Off the targets, the two gestures differ. A header or tab drag has no other
+ * purpose, so the whole pane stays live and the nearest edge wins; dropping
+ * outside the layout floats the pane. Dragging a floating window's title bar is
+ * mostly about *moving* the window, so it docks from the targets alone.
+ *
+ * Every other operation — close, pin, maximize, float, tab selection, splitter
+ * resize — is reachable from the keyboard, and the public methods (`closePane`,
+ * `unpinPane`, `dockPane`, …) drive the same paths for code. Docking itself has no
+ * keyboard equivalent yet.
+ */
+class XuiDockManager {
+    el = inject(ElementRef).nativeElement;
+    document = this.el.ownerDocument;
+    vcr = inject(ViewContainerRef);
+    direction = injectXDirection();
+    /** Detached parking space for the content views of panes that are not on screen. */
+    holder = this.document.createElement('div');
+    views = new Map();
+    // `descendants` so the templates may sit inside a wrapper element rather than
+    // having to be immediate children.
+    contents = contentChildren(XuiDockContent, { ...(ngDevMode ? { debugName: "contents" } : /* istanbul ignore next */ {}), descendants: true });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /**
+     * The layout tree. Two-way bindable, and edited **in place** — see the class
+     * docs for why, and use `cloneDockLayout()` for snapshots.
+     */
+    layout = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** A pane was closed and removed from the layout. */
+    paneClose = output();
+    /** The pane the user last interacted with, or `null` once it is gone. */
+    activePaneChange = output();
+    panePinnedChange = output();
+    paneMaximizedChange = output();
+    paneFloatingChange = output();
+    /** A pointer drag on a pane header or tab began. */
+    paneDragStart = output();
+    /** A pointer drag ended, whether or not it changed the layout. */
+    paneDragEnd = output();
+    /** The pane last interacted with. Drives the active header accent. */
+    activePane = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePane" }] : /* istanbul ignore next */ []));
+    drag = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drag" }] : /* istanbul ignore next */ []));
+    dropTarget = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropTarget" }] : /* istanbul ignore next */ []));
+    dropRect = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropRect" }] : /* istanbul ignore next */ []));
+    dockIndicators = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockIndicators" }] : /* istanbul ignore next */ []));
+    /** The unpinned pane whose fly-out is open. */
+    flyout = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyout" }] : /* istanbul ignore next */ []));
+    maximized = computed(() => findMaximizedPane(this.layout()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximized" }] : /* istanbul ignore next */ []));
+    unpinned = computed(() => unpinnedDockPanes(this.layout()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unpinned" }] : /* istanbul ignore next */ []));
+    floatingPanes = computed(() => this.layout().floatingPanes ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingPanes" }] : /* istanbul ignore next */ []));
+    dragGhost = computed(() => {
+        const state = this.drag();
+        // A floating window drags itself, so it needs no ghost.
+        return state && !state.window ? { x: state.x, y: state.y, label: this.headerOf(state.pane) } : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragGhost" }] : /* istanbul ignore next */ []));
+    /** Exposed to the template so an indicator's box matches its hit area exactly. */
+    INDICATOR_SIZE = INDICATOR_SIZE;
+    /** Exposed to the template; the ids double as the axis to resize along. */
+    RESIZE_HANDLES = [
+        { id: 'top', class: 'absolute -top-1 inset-x-2 h-2 cursor-ns-resize' },
+        { id: 'bottom', class: 'absolute -bottom-1 inset-x-2 h-2 cursor-ns-resize' },
+        { id: 'left', class: 'absolute -left-1 inset-y-2 w-2 cursor-ew-resize' },
+        { id: 'right', class: 'absolute -right-1 inset-y-2 w-2 cursor-ew-resize' },
+        { id: 'top-left', class: 'absolute -top-1 -left-1 size-3 cursor-nwse-resize' },
+        { id: 'top-right', class: 'absolute -top-1 -right-1 size-3 cursor-nesw-resize' },
+        { id: 'bottom-left', class: 'absolute -bottom-1 -left-1 size-3 cursor-nesw-resize' },
+        { id: 'bottom-right', class: 'absolute -right-1 -bottom-1 size-3 cursor-nwse-resize' }
+    ];
+    constructor() {
+        // Content views outlive the pane bodies they are mounted into, so they are
+        // only destroyed once their pane leaves the layout for good.
+        effect(() => {
+            const live = new Set(collectContentPanes(this.layout()).map(pane => pane.contentId));
+            for (const [contentId, view] of this.views) {
+                if (!live.has(contentId)) {
+                    view.destroy();
+                    this.views.delete(contentId);
+                }
+            }
+            const active = this.activePane();
+            if (active && !live.has(active.contentId)) {
+                this.activePane.set(null);
+                this.activePaneChange.emit(null);
+            }
+            const flyout = this.flyout();
+            if (flyout && (!live.has(flyout.contentId) || flyout.isPinned !== false)) {
+                this.flyout.set(null);
+            }
+        });
+        // A fly-out is a transient overlay: a pointer press anywhere that is not the
+        // fly-out or an edge strip puts it away again.
+        effect(onCleanup => {
+            if (!this.flyout()) {
+                return;
+            }
+            const onPointerDown = (event) => {
+                if (event.target?.closest('[data-dock-flyout], [data-dock-strip]')) {
+                    return;
+                }
+                this.flyout.set(null);
+            };
+            this.document.addEventListener('pointerdown', onPointerDown, true);
+            onCleanup(() => this.document.removeEventListener('pointerdown', onPointerDown, true));
+        });
+        inject(DestroyRef).onDestroy(() => {
+            for (const view of this.views.values()) {
+                view.destroy();
+            }
+            this.views.clear();
+            this.stopPointerTracking();
+        });
+    }
+    // ─── content mounting ─────────────────────────────────────────────────────
+    mountContent(contentId, host) {
+        let view = this.views.get(contentId);
+        if (!view) {
+            const template = this.contents().find(content => content.contentId() === contentId)?.template;
+            if (!template) {
+                return;
+            }
+            view = this.vcr.createEmbeddedView(template);
+            this.views.set(contentId, view);
+        }
+        for (const node of view.rootNodes) {
+            host.appendChild(node);
+        }
+    }
+    releaseContent(contentId, host) {
+        const view = this.views.get(contentId);
+        if (!view) {
+            return;
+        }
+        for (const node of view.rootNodes) {
+            if (node.parentNode === host) {
+                this.holder.appendChild(node);
+            }
+        }
+    }
+    // ─── public API ───────────────────────────────────────────────────────────
+    /** Remove `pane` from the layout. Respects `allowClose`. */
+    closePane(pane) {
+        if (pane.allowClose === false) {
+            return;
+        }
+        const layout = this.layout();
+        if (removeDockPane(layout, pane)) {
+            pane.isMaximized = false;
+            this.commit();
+            this.paneClose.emit(pane);
+        }
+    }
+    /** Close every pane in a floating window. */
+    closeWindow(window) {
+        for (const pane of this.contentPanesOf(window)) {
+            this.closePane(pane);
+        }
+    }
+    /** Collapse `pane` to a tab on the nearest edge, keeping its place in the tree. */
+    unpinPane(pane) {
+        if (pane.allowPinning === false || pane.documentOnly || pane.isPinned === false) {
+            return;
+        }
+        // A pane inside a floating window has no edge to collapse to.
+        if (this.isFloating(pane)) {
+            this.dockBackPane(pane);
+        }
+        pane.isPinned = false;
+        pane.isMaximized = false;
+        this.flyout.set(null);
+        this.commit();
+        this.panePinnedChange.emit({ pane, value: false });
+    }
+    /** Restore `pane` to the position it was collapsed from. */
+    pinPane(pane) {
+        if (pane.isPinned !== false) {
+            return;
+        }
+        pane.isPinned = true;
+        this.flyout.set(null);
+        this.commit();
+        this.panePinnedChange.emit({ pane, value: true });
+    }
+    togglePinned(pane) {
+        if (pane.isPinned === false) {
+            this.pinPane(pane);
+        }
+        else {
+            this.unpinPane(pane);
+        }
+    }
+    /** Blow `pane` up to fill the whole dock manager, hiding everything else. */
+    maximizePane(pane) {
+        if (pane.allowMaximize === false) {
+            return;
+        }
+        for (const other of collectContentPanes(this.layout())) {
+            other.isMaximized = other === pane;
+        }
+        this.commit();
+        this.paneMaximizedChange.emit({ pane, value: true });
+    }
+    restorePane(pane) {
+        pane.isMaximized = false;
+        this.commit();
+        this.paneMaximizedChange.emit({ pane, value: false });
+    }
+    toggleMaximized(pane) {
+        if (pane.isMaximized) {
+            this.restorePane(pane);
+        }
+        else {
+            this.maximizePane(pane);
+        }
+    }
+    /** Move `pane` into a floating window of its own. */
+    floatPane(pane, location, size) {
+        const rect = this.el.getBoundingClientRect();
+        const fallback = { x: Math.round(rect.width / 4), y: Math.round(rect.height / 4) };
+        if (isContentPane(pane)) {
+            pane.isPinned = true;
+            pane.isMaximized = false;
+        }
+        if (!floatDockPane(this.layout(), pane, location ?? fallback, size)) {
+            return;
+        }
+        this.commit();
+        for (const content of this.contentPanesOf(pane)) {
+            this.paneFloatingChange.emit({ pane: content, value: true });
+        }
+    }
+    /** Dock `pane` at `position` relative to `target`. */
+    dockPane(pane, target, position) {
+        const wasFloating = this.isFloating(pane);
+        if (!dockPaneAt(this.layout(), pane, target, position)) {
+            return false;
+        }
+        this.commit();
+        if (wasFloating) {
+            for (const content of this.contentPanesOf(pane)) {
+                this.paneFloatingChange.emit({ pane: content, value: false });
+            }
+        }
+        return true;
+    }
+    /** Make `pane` the active one, selecting its tab and opening its fly-out. */
+    selectPane(pane) {
+        const group = this.tabGroupOf(pane);
+        if (group) {
+            group.selectedIndex = group.panes.indexOf(pane);
+            this.commit();
+        }
+        if (pane.isPinned === false) {
+            this.flyout.set(pane);
+        }
+        this.activate(pane);
+    }
+    // ─── template helpers ─────────────────────────────────────────────────────
+    key = dockPaneKey;
+    childrenOf(pane) {
+        return visibleDockChildren(pane);
+    }
+    unpinnedAt(location) {
+        return this.unpinned()[location];
+    }
+    pinnedTabs(group) {
+        return group.panes.filter(pane => pane.isPinned !== false);
+    }
+    selectedTab(group) {
+        return selectedTabPane(group);
+    }
+    flexOf(pane) {
+        return `${pane.size ?? 1} 1 0px`;
+    }
+    headerOf(pane) {
+        const contents = this.contentPanesOf(pane);
+        return contents[0]?.header || contents[0]?.contentId || 'panes';
+    }
+    /** The pane a floating window's title bar drags: its lone pane, or the root. */
+    floatingContent(window) {
+        return this.singlePane(window) ?? window;
+    }
+    singlePane(window) {
+        const only = window.panes.length === 1 ? window.panes[0] : null;
+        return only && isContentPane(only) ? only : null;
+    }
+    floatingTitle(window) {
+        const contents = this.contentPanesOf(window);
+        if (contents.length === 1) {
+            return contents[0].header || contents[0].contentId;
+        }
+        return `${contents.length} panes`;
+    }
+    isFloating(pane) {
+        const windows = this.layout().floatingPanes ?? [];
+        return windows.some(window => window === pane || this.contentPanesOf(window).includes(pane));
+    }
+    toggleFlyout(pane) {
+        this.flyout.update(current => (current === pane ? null : pane));
+        if (this.flyout()) {
+            this.activate(pane);
+        }
+    }
+    activate(pane) {
+        if (this.activePane() === pane) {
+            return;
+        }
+        this.activePane.set(pane);
+        this.activePaneChange.emit(pane);
+    }
+    onEscape() {
+        if (this.drag()) {
+            this.cancelDrag();
+            return;
+        }
+        this.flyout.set(null);
+    }
+    /** Dock a whole floating window back into the layout root. */
+    dockBack(window) {
+        this.dockPane(window, this.layout().rootPane, 'end');
+    }
+    dockBackPane(pane) {
+        this.dockPane(pane, this.layout().rootPane, 'end');
+    }
+    bringToFront(window) {
+        const windows = this.layout().floatingPanes ?? [];
+        if (windows[windows.length - 1] === window) {
+            return;
+        }
+        this.layout().floatingPanes = [...windows.filter(other => other !== window), window];
+        this.commit();
+    }
+    // ─── splitter resizing ────────────────────────────────────────────────────
+    startSplitterDrag(parent, gutter, event) {
+        const gutterEl = event.currentTarget;
+        const beforeEl = gutterEl.previousElementSibling;
+        const afterEl = gutterEl.nextElementSibling;
+        if (!beforeEl || !afterEl) {
+            return;
+        }
+        event.preventDefault();
+        const vertical = parent.orientation === 'vertical';
+        const children = this.childrenOf(parent);
+        const before = children[gutter];
+        const after = children[gutter + 1];
+        const beforePx = vertical ? beforeEl.offsetHeight : beforeEl.offsetWidth;
+        const afterPx = vertical ? afterEl.offsetHeight : afterEl.offsetWidth;
+        const start = vertical ? event.clientY : event.clientX;
+        // Dragging towards the inline end grows the leading pane; in RTL that is
+        // leftwards, so the horizontal delta is negated.
+        const sign = !vertical && this.direction() === 'rtl' ? -1 : 1;
+        const onMove = (moveEvent) => {
+            const position = vertical ? moveEvent.clientY : moveEvent.clientX;
+            const delta = this.clampSplitterDelta((position - start) * sign, beforePx, afterPx);
+            this.resizeSiblings(before, after, beforePx + delta, beforePx + afterPx);
+        };
+        this.trackPointer(onMove);
+    }
+    onSplitterKeydown(parent, gutter, event) {
+        const vertical = parent.orientation === 'vertical';
+        const arrow = arrowDirectionOnAxis(event.key, this.direction(), vertical ? 'vertical' : 'horizontal');
+        const gutterEl = event.currentTarget;
+        const beforeEl = gutterEl.previousElementSibling;
+        const afterEl = gutterEl.nextElementSibling;
+        if (!arrow || !beforeEl || !afterEl) {
+            return;
+        }
+        event.preventDefault();
+        const children = this.childrenOf(parent);
+        const beforePx = vertical ? beforeEl.offsetHeight : beforeEl.offsetWidth;
+        const afterPx = vertical ? afterEl.offsetHeight : afterEl.offsetWidth;
+        const step = (event.shiftKey ? 40 : 10) * (arrow === 'next' ? 1 : -1);
+        const delta = this.clampSplitterDelta(step, beforePx, afterPx);
+        this.resizeSiblings(children[gutter], children[gutter + 1], beforePx + delta, beforePx + afterPx);
+    }
+    clampSplitterDelta(delta, beforePx, afterPx) {
+        return Math.max(MIN_PANE_SIZE - beforePx, Math.min(afterPx - MIN_PANE_SIZE, delta));
+    }
+    /** Re-weight two siblings so `before` takes `beforePx` of their shared `totalPx`. */
+    resizeSiblings(before, after, beforePx, totalPx) {
+        if (totalPx <= 0) {
+            return;
+        }
+        const share = (before.size ?? 1) + (after.size ?? 1);
+        before.size = (share * beforePx) / totalPx;
+        after.size = share - before.size;
+        this.commit({ normalize: false });
+    }
+    // ─── floating windows ─────────────────────────────────────────────────────
+    startFloatingResize(window, handle, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const origin = window.floatingLocation ?? FLOATING_ORIGIN;
+        const width = window.floatingWidth ?? 400;
+        const height = window.floatingHeight ?? 300;
+        // In RTL the window is positioned from the right edge, so a rightward drag
+        // moves its inline start the other way.
+        const sign = this.direction() === 'rtl' ? -1 : 1;
+        const onMove = (moveEvent) => {
+            const dx = (moveEvent.clientX - startX) * sign;
+            const dy = moveEvent.clientY - startY;
+            const location = { ...origin };
+            let nextWidth = width;
+            let nextHeight = height;
+            if (handle.includes('left')) {
+                nextWidth = Math.max(MIN_PANE_SIZE * 2, width - dx);
+                location.x = origin.x + (width - nextWidth);
+            }
+            else if (handle.includes('right')) {
+                nextWidth = Math.max(MIN_PANE_SIZE * 2, width + dx);
+            }
+            if (handle.includes('top')) {
+                nextHeight = Math.max(MIN_PANE_SIZE * 2, height - dy);
+                location.y = origin.y + (height - nextHeight);
+            }
+            else if (handle.includes('bottom')) {
+                nextHeight = Math.max(MIN_PANE_SIZE * 2, height + dy);
+            }
+            window.floatingLocation = location;
+            window.floatingWidth = nextWidth;
+            window.floatingHeight = nextHeight;
+            this.commit({ normalize: false });
+        };
+        this.trackPointer(onMove);
+    }
+    // ─── dragging panes and docking ───────────────────────────────────────────
+    /**
+     * Start a drag on a pane header, a tab, or a floating window's title bar.
+     *
+     * A window drag moves the window as it goes and docks it if it is released over
+     * a valid target; a pane drag shows a ghost and either docks the pane or floats
+     * it where it was dropped.
+     */
+    startPaneDrag(pane, window, event) {
+        if (event.button !== 0) {
+            return;
+        }
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const origin = window?.floatingLocation ?? FLOATING_ORIGIN;
+        const sign = this.direction() === 'rtl' ? -1 : 1;
+        let started = false;
+        const onMove = (moveEvent) => {
+            const dx = moveEvent.clientX - startX;
+            const dy = moveEvent.clientY - startY;
+            if (!started) {
+                if (Math.hypot(dx, dy) < DRAG_THRESHOLD) {
+                    return;
+                }
+                started = true;
+                this.paneDragStart.emit(pane);
+            }
+            if (window) {
+                window.floatingLocation = { x: origin.x + dx * sign, y: origin.y + dy };
+                this.commit({ normalize: false });
+            }
+            this.drag.set({ pane, window, x: moveEvent.clientX, y: moveEvent.clientY });
+            this.updateDropTarget(moveEvent.clientX, moveEvent.clientY);
+        };
+        const onUp = (upEvent) => {
+            if (!started) {
+                return;
+            }
+            const target = this.dropTarget();
+            this.clearDrag();
+            if (target) {
+                this.dockPane(pane, target.pane, target.position);
+            }
+            else if (!window) {
+                this.floatAtPointer(pane, upEvent.clientX, upEvent.clientY);
+            }
+            this.paneDragEnd.emit(pane);
+        };
+        this.trackPointer(onMove, onUp);
+    }
+    cancelDrag() {
+        const state = this.drag();
+        this.clearDrag();
+        this.stopPointerTracking();
+        if (state) {
+            this.paneDragEnd.emit(state.pane);
+        }
+    }
+    clearDrag() {
+        this.drag.set(null);
+        this.dropTarget.set(null);
+        this.dropRect.set(null);
+        this.dockIndicators.set([]);
+    }
+    floatAtPointer(pane, clientX, clientY) {
+        const rect = this.el.getBoundingClientRect();
+        const inlineOffset = this.direction() === 'rtl' ? rect.right - clientX : clientX - rect.left;
+        this.floatPane(pane, { x: Math.round(inlineOffset - 40), y: Math.round(clientY - rect.top - 12) });
+    }
+    /**
+     * Work out where a drop at these coordinates would land, and size the preview
+     * rectangle to match.
+     *
+     * The dock manager's own edges win over whatever pane happens to be under the
+     * pointer, so there is always a way to dock against the full height or width of
+     * the layout.
+     */
+    updateDropTarget(clientX, clientY) {
+        const state = this.drag();
+        if (!state) {
+            return;
+        }
+        const hostRect = this.el.getBoundingClientRect();
+        const hovered = this.paneAt(clientX, clientY);
+        const indicators = this.buildIndicators(state.pane, hovered, hostRect);
+        const x = clientX - hostRect.left;
+        const y = clientY - hostRect.top;
+        // Landing on an indicator is an explicit choice and always wins.
+        const hit = indicators.find(indicator => x >= indicator.left &&
+            x <= indicator.left + INDICATOR_SIZE &&
+            y >= indicator.top &&
+            y <= indicator.top + INDICATOR_SIZE);
+        const target = hit
+            ? { pane: hit.pane, position: hit.position }
+            : this.looseTargetAt(state, hovered, clientX, clientY);
+        this.dockIndicators.set(indicators.map(indicator => ({
+            ...indicator,
+            active: !!target && indicator.pane === target.pane && indicator.position === target.position
+        })));
+        if (!target) {
+            this.dropTarget.set(null);
+            this.dropRect.set(null);
+            return;
+        }
+        const rect = this.elementForPane(target.pane)?.getBoundingClientRect() ?? hostRect;
+        this.dropTarget.set(target);
+        this.dropRect.set(this.previewRect(rect, hostRect, target.position));
+    }
+    /**
+     * The target for a drop that missed every indicator.
+     *
+     * A header or tab drag has no purpose other than docking, so the whole pane
+     * stays live and the nearest edge wins. Dragging a floating window is mostly
+     * about *moving* it, so it docks from the indicators alone.
+     */
+    looseTargetAt(state, hovered, clientX, clientY) {
+        if (state.window) {
+            return null;
+        }
+        const hostRect = this.el.getBoundingClientRect();
+        const target = this.outerEdgeAt(clientX, clientY, hostRect) ?? this.zoneTargetAt(hovered, clientX, clientY);
+        return target && canDockInto(this.layout(), state.pane, target.pane, target.position) ? target : null;
+    }
+    /**
+     * The joystick over the pane under the pointer, plus the outer ring that docks
+     * against the whole layout — Visual Studio's docking targets.
+     *
+     * Only the positions the dragged pane is actually allowed to take are built, so
+     * a document dragged over a tool window simply offers nothing.
+     */
+    buildIndicators(dragged, hovered, hostRect) {
+        const ltr = this.direction() !== 'rtl';
+        const root = this.layout().rootPane;
+        const step = INDICATOR_SIZE + INDICATOR_GAP;
+        const half = INDICATOR_SIZE / 2;
+        const far = INDICATOR_INSET + INDICATOR_SIZE;
+        const candidates = [];
+        const push = (pane, side, left, top) => {
+            const position = side === 'center'
+                ? 'center'
+                : side === 'top' || side === 'bottom'
+                    ? side
+                    : (side === 'left') === ltr
+                        ? 'start'
+                        : 'end';
+            if (canDockInto(this.layout(), dragged, pane, position)) {
+                candidates.push({ pane, position, side, left, top });
+            }
+        };
+        // The outer ring, pinned to the middle of each of the dock manager's edges.
+        push(root, 'top', hostRect.width / 2 - half, INDICATOR_INSET);
+        push(root, 'bottom', hostRect.width / 2 - half, hostRect.height - far);
+        push(root, 'left', INDICATOR_INSET, hostRect.height / 2 - half);
+        push(root, 'right', hostRect.width - far, hostRect.height / 2 - half);
+        if (hovered) {
+            const rect = this.elementForPane(hovered)?.getBoundingClientRect();
+            if (rect && rect.width >= INDICATOR_MIN_PANE && rect.height >= INDICATOR_MIN_PANE) {
+                const left = rect.left - hostRect.left + rect.width / 2 - half;
+                const top = rect.top - hostRect.top + rect.height / 2 - half;
+                push(hovered, 'center', left, top);
+                push(hovered, 'left', left - step, top);
+                push(hovered, 'right', left + step, top);
+                push(hovered, 'top', left, top - step);
+                push(hovered, 'bottom', left, top + step);
+            }
+        }
+        return candidates.map(candidate => ({
+            ...candidate,
+            key: `${dockPaneKey(candidate.pane)}-${candidate.position}-${candidate.side}`,
+            active: false
+        }));
+    }
+    /** A drop within `OUTER_EDGE` of the dock manager's frame docks the whole layout. */
+    outerEdgeAt(clientX, clientY, hostRect) {
+        if (clientX < hostRect.left || clientX > hostRect.right || clientY < hostRect.top || clientY > hostRect.bottom) {
+            return null;
+        }
+        const root = this.layout().rootPane;
+        const ltr = this.direction() !== 'rtl';
+        if (clientX - hostRect.left < OUTER_EDGE) {
+            return { pane: root, position: ltr ? 'start' : 'end' };
+        }
+        if (hostRect.right - clientX < OUTER_EDGE) {
+            return { pane: root, position: ltr ? 'end' : 'start' };
+        }
+        if (clientY - hostRect.top < OUTER_EDGE) {
+            return { pane: root, position: 'top' };
+        }
+        if (hostRect.bottom - clientY < OUTER_EDGE) {
+            return { pane: root, position: 'bottom' };
+        }
+        return null;
+    }
+    /**
+     * The pane under the pointer.
+     *
+     * Hit-tested against the rendered rectangles rather than `elementFromPoint`, so
+     * the drag ghost, the indicators and the floating window riding along with the
+     * pointer cannot get in the way. The innermost rectangle wins, and on a tie the
+     * one painted last does.
+     */
+    paneAt(clientX, clientY) {
+        const dragged = this.drag()?.window;
+        const draggedEl = dragged ? this.el.querySelector(`[data-dock-window="${dockPaneKey(dragged)}"]`) : null;
+        let element = null;
+        let smallest = Number.POSITIVE_INFINITY;
+        for (const candidate of this.el.querySelectorAll('[data-dock-key]')) {
+            // A collapsed pane's fly-out is a transient overlay, not a dock.
+            if (draggedEl?.contains(candidate) || candidate.closest('[data-dock-flyout]')) {
+                continue;
+            }
+            const bounds = candidate.getBoundingClientRect();
+            if (clientX < bounds.left ||
+                clientX > bounds.right ||
+                clientY < bounds.top ||
+                clientY > bounds.bottom ||
+                bounds.width * bounds.height > smallest) {
+                continue;
+            }
+            element = candidate;
+            smallest = bounds.width * bounds.height;
+        }
+        return element ? this.paneForKey(element.dataset['dockKey'] ?? '') : null;
+    }
+    /** Split `pane` along whichever edge the pointer sits nearest, or tab at its centre. */
+    zoneTargetAt(pane, clientX, clientY) {
+        const rect = pane && this.elementForPane(pane)?.getBoundingClientRect();
+        if (!pane || !rect) {
+            return null;
+        }
+        const u = rect.width ? (clientX - rect.left) / rect.width : 0.5;
+        const v = rect.height ? (clientY - rect.top) / rect.height : 0.5;
+        if (u > CENTRE_ZONE && u < 1 - CENTRE_ZONE && v > CENTRE_ZONE && v < 1 - CENTRE_ZONE) {
+            return { pane, position: 'center' };
+        }
+        const ltr = this.direction() !== 'rtl';
+        const edges = [
+            { position: (ltr ? 'start' : 'end'), fraction: u },
+            { position: (ltr ? 'end' : 'start'), fraction: 1 - u },
+            { position: 'top', fraction: v },
+            { position: 'bottom', fraction: 1 - v }
+        ];
+        return { pane, position: edges.reduce((a, b) => (b.fraction < a.fraction ? b : a)).position };
+    }
+    /** The slice of `rect` a drop would occupy, in coordinates relative to the host. */
+    previewRect(rect, hostRect, position) {
+        const left = rect.left - hostRect.left;
+        const top = rect.top - hostRect.top;
+        const ltr = this.direction() !== 'rtl';
+        const half = { width: rect.width / 2, height: rect.height / 2 };
+        switch (position) {
+            case 'center':
+                return { left, top, width: rect.width, height: rect.height };
+            case 'top':
+                return { left, top, width: rect.width, height: half.height };
+            case 'bottom':
+                return { left, top: top + half.height, width: rect.width, height: half.height };
+            case 'start':
+                return { left: ltr ? left : left + half.width, top, width: half.width, height: rect.height };
+            case 'end':
+                return { left: ltr ? left + half.width : left, top, width: half.width, height: rect.height };
+        }
+    }
+    elementForPane(pane) {
+        return this.el.querySelector(`[data-dock-key="${dockPaneKey(pane)}"]`);
+    }
+    paneForKey(key) {
+        let found = null;
+        const walk = (pane) => {
+            if (dockPaneKey(pane) === key) {
+                found = pane;
+                return;
+            }
+            if (isSplitPane(pane) || isTabGroupPane(pane)) {
+                pane.panes.forEach(walk);
+            }
+            else if (isDocumentHost(pane)) {
+                walk(pane.rootPane);
+            }
+        };
+        const layout = this.layout();
+        for (const root of [layout.rootPane, ...(layout.floatingPanes ?? [])]) {
+            if (found) {
+                break;
+            }
+            walk(root);
+        }
+        return found;
+    }
+    // ─── pointer plumbing ─────────────────────────────────────────────────────
+    release = null;
+    /** Follow the pointer until it is released, then clean up after ourselves. */
+    trackPointer(onMove, onUp) {
+        this.stopPointerTracking();
+        const move = (event) => onMove(event);
+        const up = (event) => {
+            this.stopPointerTracking();
+            onUp?.(event);
+        };
+        this.document.addEventListener('pointermove', move);
+        this.document.addEventListener('pointerup', up);
+        this.document.addEventListener('pointercancel', up);
+        this.release = () => {
+            this.document.removeEventListener('pointermove', move);
+            this.document.removeEventListener('pointerup', up);
+            this.document.removeEventListener('pointercancel', up);
+        };
+    }
+    stopPointerTracking() {
+        this.release?.();
+        this.release = null;
+    }
+    // ─── layout bookkeeping ───────────────────────────────────────────────────
+    /**
+     * Publish the in-place edits made to the tree.
+     *
+     * Skip normalisation for the continuous gestures — a resize or a window move
+     * cannot change the tree's shape, and re-walking it on every pointer event is
+     * wasted work.
+     */
+    commit(options) {
+        const layout = this.layout();
+        if (options?.normalize !== false) {
+            normalizeDockLayout(layout);
+        }
+        this.layout.set({ ...layout });
+    }
+    contentPanesOf(pane) {
+        const out = [];
+        const walk = (current) => {
+            if (isContentPane(current)) {
+                out.push(current);
+            }
+            else if (isSplitPane(current) || isTabGroupPane(current)) {
+                current.panes.forEach(walk);
+            }
+            else if (isDocumentHost(current)) {
+                walk(current.rootPane);
+            }
+        };
+        walk(pane);
+        return out;
+    }
+    tabGroupOf(pane) {
+        let group = null;
+        const walk = (current) => {
+            if (group) {
+                return;
+            }
+            if (isTabGroupPane(current)) {
+                if (current.panes.includes(pane)) {
+                    group = current;
+                    return;
+                }
+                return;
+            }
+            if (isSplitPane(current)) {
+                current.panes.forEach(walk);
+            }
+            else if (isDocumentHost(current)) {
+                walk(current.rootPane);
+            }
+        };
+        const layout = this.layout();
+        for (const root of [layout.rootPane, ...(layout.floatingPanes ?? [])]) {
+            walk(root);
+        }
+        return group;
+    }
+    // ─── keyboard ─────────────────────────────────────────────────────────────
+    onTabKeydown(group, event) {
+        const tabs = this.pinnedTabs(group);
+        if (!tabs.length) {
+            return;
+        }
+        const step = arrowDirectionOnAxis(event.key, this.direction(), 'horizontal');
+        const current = tabs.indexOf(this.selectedTab(group));
+        let next;
+        if (step === 'next') {
+            next = (current + 1) % tabs.length;
+        }
+        else if (step === 'previous') {
+            next = (current - 1 + tabs.length) % tabs.length;
+        }
+        else if (event.key === 'Home') {
+            next = 0;
+        }
+        else if (event.key === 'End') {
+            next = tabs.length - 1;
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        this.selectPane(tabs[next]);
+        // Roving tabindex: follow the selection with focus.
+        const strip = event.currentTarget.parentElement;
+        strip?.querySelectorAll('[role="tab"]')[next]?.focus();
+    }
+    // ─── classes ──────────────────────────────────────────────────────────────
+    computedClass = computed(() => xui('bg-surface text-foreground relative flex flex-col overflow-hidden text-sm select-none', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    splitClass(pane) {
+        return xui('flex min-h-0 min-w-0 flex-1', isSplitPane(pane) && pane.orientation === 'vertical' && 'flex-col');
+    }
+    frameClass(pane) {
+        return xui('border-border bg-surface flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-md border', this.isActiveFrame(pane) && 'border-primary-muted');
+    }
+    /** Whether the pane on screen in this frame is the active one. */
+    isActiveFrame(pane) {
+        const active = this.activePane();
+        if (!active) {
+            return false;
+        }
+        return isTabGroupPane(pane) ? this.selectedTab(pane) === active : pane === active;
+    }
+    headerClass(pane) {
+        return xui('border-border bg-surface-raised text-foreground-muted flex h-8 shrink-0 items-center gap-1 border-b ps-2 pe-1', 'text-xs font-medium', 
+        // The header is a drag handle; without this a touch drag scrolls the page
+        // instead of moving the pane.
+        'touch-none', isContentPane(pane) && 'cursor-grab');
+    }
+    tabStripClass() {
+        return xui('border-border bg-surface-raised flex h-8 shrink-0 touch-none items-center gap-0.5 border-b px-1');
+    }
+    tabClass(group, tab) {
+        return xui('group relative flex h-8 max-w-40 shrink-0 cursor-grab items-center gap-1 rounded-t px-2 text-xs', 'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus', tab === this.selectedTab(group)
+            ? 'bg-surface text-foreground border-border border-x border-t'
+            : 'text-foreground-muted hover:bg-hover-overlay hover:text-foreground');
+    }
+    tabCloseClass() {
+        return xui('hover:bg-hover-overlay grid size-4 shrink-0 place-items-center rounded opacity-60 hover:opacity-100');
+    }
+    actionClass() {
+        return xui('text-foreground-muted hover:bg-hover-overlay hover:text-foreground grid size-6 shrink-0 place-items-center', 'rounded focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus');
+    }
+    gutterClass(pane) {
+        return xui('group relative z-10 flex shrink-0 touch-none items-center justify-center', 'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus', isSplitPane(pane) && pane.orientation === 'vertical'
+            ? 'h-1.5 w-full cursor-row-resize'
+            : 'w-1.5 cursor-col-resize');
+    }
+    gutterHandleClass(pane) {
+        return xui('bg-border group-hover:bg-primary rounded-full transition-colors', isSplitPane(pane) && pane.orientation === 'vertical' ? 'h-0.5 w-8' : 'h-8 w-0.5');
+    }
+    stripClass(location) {
+        const vertical = location === 'start' || location === 'end';
+        return xui('border-border bg-surface-inset flex shrink-0 items-start gap-1 p-1', vertical ? 'w-8 flex-col' : 'h-8', location === 'start' && 'border-e', location === 'end' && 'border-s', location === 'top' && 'border-b', location === 'bottom' && 'border-t');
+    }
+    stripTabClass(location, pane) {
+        const vertical = location === 'start' || location === 'end';
+        return xui('text-foreground-muted hover:bg-hover-overlay hover:text-foreground max-h-40 max-w-40 truncate rounded px-1.5 py-1', 'text-xs focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus', vertical && '[writing-mode:vertical-rl]', pane === this.flyout() && 'bg-primary-muted text-foreground');
+    }
+    flyoutClass() {
+        return xui('bg-surface border-border absolute z-20 flex overflow-hidden border shadow-lg');
+    }
+    flyoutStyle(pane) {
+        const location = pane.unpinnedLocation ?? defaultUnpinnedLocation(this.layout(), pane);
+        const size = `${pane.unpinnedSize ?? 280}px`;
+        const offset = `${STRIP_SIZE}px`;
+        switch (location) {
+            case 'start':
+                return { insetInlineStart: offset, top: '0', bottom: '0', width: size };
+            case 'end':
+                return { insetInlineEnd: offset, top: '0', bottom: '0', width: size };
+            case 'top':
+                return { top: offset, insetInlineStart: '0', insetInlineEnd: '0', height: size };
+            case 'bottom':
+                return { bottom: offset, insetInlineStart: '0', insetInlineEnd: '0', height: size };
+        }
+    }
+    floatingClass() {
+        return xui('bg-surface border-border absolute z-40 flex flex-col overflow-hidden rounded-lg border shadow-xl');
+    }
+    floatingStyle(window) {
+        const location = window.floatingLocation ?? FLOATING_ORIGIN;
+        return {
+            insetInlineStart: `${location.x}px`,
+            top: `${location.y}px`,
+            width: `${window.floatingWidth ?? 400}px`,
+            height: `${window.floatingHeight ?? 300}px`
+        };
+    }
+    indicatorClass(indicator) {
+        return xui(
+        // Never interactive: the pointer is already captured by the drag, and the
+        // indicators are hit-tested by rectangle rather than by event target.
+        'bg-surface-overlay pointer-events-none absolute z-55 rounded border shadow-md', indicator.active ? 'border-primary' : 'border-border-strong');
+    }
+    /**
+     * The shaded block inside an indicator, showing which part of the target the
+     * pane will take — the same visual language as Visual Studio's dock targets.
+     */
+    indicatorFillClass(indicator) {
+        const sides = {
+            center: 'inset-1',
+            left: 'top-1 bottom-1 left-1 w-1/3',
+            right: 'top-1 bottom-1 right-1 w-1/3',
+            top: 'top-1 right-1 left-1 h-1/3',
+            bottom: 'right-1 bottom-1 left-1 h-1/3'
+        };
+        return xui('absolute rounded-sm', sides[indicator.side], indicator.active ? 'bg-primary' : 'bg-foreground-subtle/50');
+    }
+    titleBarClass() {
+        return xui('border-border bg-surface-raised text-foreground-muted flex h-7 shrink-0 cursor-grab items-center gap-1', 'touch-none border-b ps-2 pe-1 text-xs font-medium');
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDockManager, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiDockManager, isStandalone: true, selector: "xui-dock-manager", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { layout: "layoutChange", paneClose: "paneClose", activePaneChange: "activePaneChange", panePinnedChange: "panePinnedChange", paneMaximizedChange: "paneMaximizedChange", paneFloatingChange: "paneFloatingChange", paneDragStart: "paneDragStart", paneDragEnd: "paneDragEnd" }, host: { listeners: { "keydown.escape": "onEscape()" }, properties: { "class": "computedClass()" } }, providers: [{ provide: XUI_DOCK_CONTENT_MOUNTER, useExisting: forwardRef((() => XuiDockManager)) }], queries: [{ propertyName: "contents", predicate: XuiDockContent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!-- ─── one content pane: header chrome plus the body outlet ─────────── -->
+    <ng-template #contentTpl let-pane let-hideHeader="hideHeader">
+      <div
+        [class]="frameClass(pane)"
+        [attr.data-dock-key]="key(pane)"
+        (pointerdown)="activate(pane)"
+        (focusin)="activate(pane)"
+      >
+        @if (!hideHeader) {
+          <div
+            [class]="headerClass(pane)"
+            (pointerdown)="startPaneDrag(pane, null, $event)"
+            (dblclick)="toggleMaximized(pane)"
+          >
+            <span class="min-w-0 flex-1 truncate">{{ pane.header }}</span>
+            <ng-container [ngTemplateOutlet]="paneActionsTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+          </div>
+        }
+
+        <div class="min-h-0 min-w-0 flex-1 overflow-auto" [xuiDockContentOutlet]="pane.contentId"></div>
+      </div>
+    </ng-template>
+
+    <!-- ─── the pin / maximize / close cluster, shared by headers and tabs ── -->
+    <ng-template #paneActionsTpl let-pane>
+      <div class="flex shrink-0 items-center">
+        @if (pane.allowPinning !== false && !pane.documentOnly) {
+          <button
+            type="button"
+            [class]="actionClass()"
+            [attr.aria-label]="(pane.isPinned === false ? 'Pin ' : 'Collapse ') + (pane.header || pane.contentId)"
+            (click)="togglePinned(pane); $event.stopPropagation()"
+            (pointerdown)="$event.stopPropagation()"
+          >
+            <ng-icon xui size="14px" name="matPushPinRound" [class]="pane.isPinned === false ? 'text-primary' : ''" />
+          </button>
+        }
+        @if (pane.allowFloating !== false && !pane.documentOnly && !isFloating(pane)) {
+          <button
+            type="button"
+            [class]="actionClass()"
+            [attr.aria-label]="'Float ' + (pane.header || pane.contentId)"
+            (click)="floatPane(pane); $event.stopPropagation()"
+            (pointerdown)="$event.stopPropagation()"
+          >
+            <ng-icon xui size="14px" name="matOpenInNewRound" />
+          </button>
+        }
+        @if (pane.allowMaximize !== false) {
+          <button
+            type="button"
+            [class]="actionClass()"
+            [attr.aria-label]="(pane.isMaximized ? 'Restore ' : 'Maximize ') + (pane.header || pane.contentId)"
+            (click)="toggleMaximized(pane); $event.stopPropagation()"
+            (pointerdown)="$event.stopPropagation()"
+          >
+            <ng-icon xui size="14px" [name]="pane.isMaximized ? 'matCloseFullscreenRound' : 'matOpenInFullRound'" />
+          </button>
+        }
+        @if (pane.allowClose !== false) {
+          <button
+            type="button"
+            [class]="actionClass()"
+            [attr.aria-label]="'Close ' + (pane.header || pane.contentId)"
+            (click)="closePane(pane); $event.stopPropagation()"
+            (pointerdown)="$event.stopPropagation()"
+          >
+            <ng-icon xui size="14px" name="matCloseRound" />
+          </button>
+        }
+      </div>
+    </ng-template>
+
+    <!-- ─── a tab group: one strip, one visible body ─────────────────────── -->
+    <ng-template #tabGroupTpl let-pane>
+      <div [class]="frameClass(pane)" [attr.data-dock-key]="key(pane)">
+        <div [class]="tabStripClass()" role="tablist">
+          @for (tab of pinnedTabs(pane); track key(tab)) {
+            <button
+              type="button"
+              role="tab"
+              [class]="tabClass(pane, tab)"
+              [attr.aria-selected]="tab === selectedTab(pane)"
+              [tabindex]="tab === selectedTab(pane) ? 0 : -1"
+              (click)="selectPane(tab)"
+              (pointerdown)="startPaneDrag(tab, null, $event)"
+              (dblclick)="toggleMaximized(tab)"
+              (keydown)="onTabKeydown(pane, $event)"
+            >
+              <span class="min-w-0 truncate">{{ tab.header }}</span>
+              @if (tab.allowClose !== false) {
+                <!-- A nested <button> is invalid markup, so this affordance is
+                     pointer-only and hidden from assistive technology; the
+                     action cluster on the right carries the real close button. -->
+                <span
+                  aria-hidden="true"
+                  [class]="tabCloseClass()"
+                  (click)="closePane(tab); $event.stopPropagation()"
+                  (pointerdown)="$event.stopPropagation()"
+                >
+                  <ng-icon xui size="12px" name="matCloseRound" />
+                </span>
+              }
+            </button>
+          }
+
+          @if (selectedTab(pane); as tab) {
+            <div class="ms-auto flex items-center ps-1">
+              <ng-container [ngTemplateOutlet]="paneActionsTpl" [ngTemplateOutletContext]="{ $implicit: tab }" />
+            </div>
+          }
+        </div>
+
+        @if (selectedTab(pane); as tab) {
+          <div
+            role="tabpanel"
+            class="min-h-0 min-w-0 flex-1 overflow-auto"
+            [xuiDockContentOutlet]="tab.contentId"
+            (pointerdown)="activate(tab)"
+            (focusin)="activate(tab)"
+          ></div>
+        }
+      </div>
+    </ng-template>
+
+    <!-- ─── a split pane: children along one axis, gutters in between ────── -->
+    <ng-template #splitTpl let-pane>
+      <div [class]="splitClass(pane)">
+        @for (child of childrenOf(pane); track key(child); let i = $index, last = $last) {
+          <div class="relative flex min-h-0 min-w-0" [style.flex]="flexOf(child)">
+            <ng-container [ngTemplateOutlet]="paneTpl" [ngTemplateOutletContext]="{ $implicit: child }" />
+          </div>
+
+          @if (!last) {
+            <!-- Drag or arrow-key the gutter to trade space between the panes
+                 either side of it. -->
+            <div
+              role="separator"
+              tabindex="0"
+              [class]="gutterClass(pane)"
+              [attr.aria-orientation]="pane.orientation === 'vertical' ? 'horizontal' : 'vertical'"
+              [attr.aria-label]="'Resize ' + headerOf(child)"
+              (pointerdown)="startSplitterDrag(pane, i, $event)"
+              (keydown)="onSplitterKeydown(pane, i, $event)"
+            >
+              <span [class]="gutterHandleClass(pane)"></span>
+            </div>
+          }
+        }
+      </div>
+    </ng-template>
+
+    <!-- ─── the document host: the only home for documentOnly panes ─────── -->
+    <ng-template #documentHostTpl let-pane>
+      <div class="bg-surface-sunken flex min-h-0 min-w-0 flex-1" [attr.data-dock-key]="key(pane)">
+        <ng-container [ngTemplateOutlet]="paneTpl" [ngTemplateOutletContext]="{ $implicit: pane.rootPane }" />
+      </div>
+    </ng-template>
+
+    <ng-template #paneTpl let-pane>
+      @switch (pane.type) {
+        @case ('splitPane') {
+          <ng-container [ngTemplateOutlet]="splitTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+        }
+        @case ('tabGroupPane') {
+          <ng-container [ngTemplateOutlet]="tabGroupTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+        }
+        @case ('documentHost') {
+          <ng-container [ngTemplateOutlet]="documentHostTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+        }
+        @default {
+          <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+        }
+      }
+    </ng-template>
+
+    <!-- ─── the dock manager itself ─────────────────────────────────────── -->
+    @if (maximized(); as pane) {
+      <div class="absolute inset-0 z-30 flex">
+        <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+      </div>
+    } @else {
+      @if (unpinned().top.length) {
+        <ng-container [ngTemplateOutlet]="stripTpl" [ngTemplateOutletContext]="{ $implicit: 'top' }" />
+      }
+
+      <div class="flex min-h-0 min-w-0 flex-1">
+        @if (unpinned().start.length) {
+          <ng-container [ngTemplateOutlet]="stripTpl" [ngTemplateOutletContext]="{ $implicit: 'start' }" />
+        }
+
+        <div class="flex min-h-0 min-w-0 flex-1">
+          <ng-container [ngTemplateOutlet]="paneTpl" [ngTemplateOutletContext]="{ $implicit: layout().rootPane }" />
+        </div>
+
+        @if (unpinned().end.length) {
+          <ng-container [ngTemplateOutlet]="stripTpl" [ngTemplateOutletContext]="{ $implicit: 'end' }" />
+        }
+      </div>
+
+      @if (unpinned().bottom.length) {
+        <ng-container [ngTemplateOutlet]="stripTpl" [ngTemplateOutletContext]="{ $implicit: 'bottom' }" />
+      }
+
+      <!-- The fly-out an unpinned pane opens over the layout. -->
+      @if (flyout(); as pane) {
+        <div data-dock-flyout [class]="flyoutClass()" [style]="flyoutStyle(pane)">
+          <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+        </div>
+      }
+
+      @for (window of floatingPanes(); track key(window)) {
+        <div
+          [attr.data-dock-window]="key(window)"
+          [class]="floatingClass()"
+          [style]="floatingStyle(window)"
+          (pointerdown)="bringToFront(window)"
+        >
+          <div
+            [class]="titleBarClass()"
+            (pointerdown)="startPaneDrag(floatingContent(window), window, $event)"
+            (dblclick)="dockBack(window)"
+          >
+            <span class="min-w-0 flex-1 truncate">{{ floatingTitle(window) }}</span>
+            <button
+              type="button"
+              [class]="actionClass()"
+              aria-label="Dock window"
+              (click)="dockBack(window); $event.stopPropagation()"
+              (pointerdown)="$event.stopPropagation()"
+            >
+              <ng-icon xui size="14px" name="matDockRound" />
+            </button>
+
+            <!-- A one-pane window shows that pane's own actions; the header they
+                 would normally live in is suppressed below. -->
+            @if (singlePane(window); as pane) {
+              <ng-container [ngTemplateOutlet]="paneActionsTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+            } @else {
+              <button
+                type="button"
+                [class]="actionClass()"
+                aria-label="Close window"
+                (click)="closeWindow(window); $event.stopPropagation()"
+                (pointerdown)="$event.stopPropagation()"
+              >
+                <ng-icon xui size="14px" name="matCloseRound" />
+              </button>
+            }
+          </div>
+
+          <div class="flex min-h-0 min-w-0 flex-1">
+            @if (singlePane(window); as pane) {
+              <ng-container
+                [ngTemplateOutlet]="contentTpl"
+                [ngTemplateOutletContext]="{ $implicit: pane, hideHeader: true }"
+              />
+            } @else {
+              <ng-container [ngTemplateOutlet]="paneTpl" [ngTemplateOutletContext]="{ $implicit: window }" />
+            }
+          </div>
+
+          @if (window.floatingResizable !== false) {
+            @for (handle of RESIZE_HANDLES; track handle.id) {
+              <div
+                [class]="handle.class"
+                [attr.aria-hidden]="true"
+                (pointerdown)="startFloatingResize(window, handle.id, $event)"
+              ></div>
+            }
+          }
+        </div>
+      }
+    }
+
+    <!-- Where a drop would land. -->
+    @if (dropRect(); as rect) {
+      <div
+        class="border-primary bg-primary/20 pointer-events-none absolute z-50 rounded-sm border-2"
+        [style.left.px]="rect.left"
+        [style.top.px]="rect.top"
+        [style.width.px]="rect.width"
+        [style.height.px]="rect.height"
+      ></div>
+    }
+
+    <!-- ─── the docking joystick and the outer ring ─────────────────────── -->
+    @for (indicator of dockIndicators(); track indicator.key) {
+      <div
+        aria-hidden="true"
+        [class]="indicatorClass(indicator)"
+        [style.left.px]="indicator.left"
+        [style.top.px]="indicator.top"
+        [style.width.px]="INDICATOR_SIZE"
+        [style.height.px]="INDICATOR_SIZE"
+      >
+        <span [class]="indicatorFillClass(indicator)"></span>
+      </div>
+    }
+
+    @if (dragGhost(); as ghost) {
+      <div
+        class="bg-surface-overlay border-border text-foreground pointer-events-none fixed z-60 rounded-md border px-2 py-1 text-xs shadow-lg"
+        [style.left.px]="ghost.x + 12"
+        [style.top.px]="ghost.y + 12"
+      >
+        {{ ghost.label }}
+      </div>
+    }
+
+    <!-- ─── an edge strip of collapsed panes ────────────────────────────── -->
+    <ng-template #stripTpl let-location>
+      <div data-dock-strip [class]="stripClass(location)">
+        @for (pane of unpinnedAt(location); track key(pane)) {
+          <button
+            type="button"
+            [class]="stripTabClass(location, pane)"
+            [attr.aria-expanded]="pane === flyout()"
+            (click)="toggleFlyout(pane)"
+          >
+            {{ pane.header || pane.contentId }}
+          </button>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "title"], exportAs: ["xuiIcon"] }, { kind: "directive", type: XuiDockContentOutlet, selector: "[xuiDockContentOutlet]", inputs: ["xuiDockContentOutlet"] }], viewProviders: [
+            provideIcons({
+                matCloseRound,
+                matDockRound,
+                matPushPinRound,
+                matOpenInFullRound,
+                matCloseFullscreenRound,
+                matOpenInNewRound
+            })
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDockManager, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-dock-manager',
+                    imports: [NgTemplateOutlet, NgIcon, XuiIcon, XuiDockContentOutlet],
+                    viewProviders: [
+                        provideIcons({
+                            matCloseRound,
+                            matDockRound,
+                            matPushPinRound,
+                            matOpenInFullRound,
+                            matCloseFullscreenRound,
+                            matOpenInNewRound
+                        })
+                    ],
+                    providers: [{ provide: XUI_DOCK_CONTENT_MOUNTER, useExisting: forwardRef((() => XuiDockManager)) }],
+                    template: `
+    <!-- ─── one content pane: header chrome plus the body outlet ─────────── -->
+    <ng-template #contentTpl let-pane let-hideHeader="hideHeader">
+      <div
+        [class]="frameClass(pane)"
+        [attr.data-dock-key]="key(pane)"
+        (pointerdown)="activate(pane)"
+        (focusin)="activate(pane)"
+      >
+        @if (!hideHeader) {
+          <div
+            [class]="headerClass(pane)"
+            (pointerdown)="startPaneDrag(pane, null, $event)"
+            (dblclick)="toggleMaximized(pane)"
+          >
+            <span class="min-w-0 flex-1 truncate">{{ pane.header }}</span>
+            <ng-container [ngTemplateOutlet]="paneActionsTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+          </div>
+        }
+
+        <div class="min-h-0 min-w-0 flex-1 overflow-auto" [xuiDockContentOutlet]="pane.contentId"></div>
+      </div>
+    </ng-template>
+
+    <!-- ─── the pin / maximize / close cluster, shared by headers and tabs ── -->
+    <ng-template #paneActionsTpl let-pane>
+      <div class="flex shrink-0 items-center">
+        @if (pane.allowPinning !== false && !pane.documentOnly) {
+          <button
+            type="button"
+            [class]="actionClass()"
+            [attr.aria-label]="(pane.isPinned === false ? 'Pin ' : 'Collapse ') + (pane.header || pane.contentId)"
+            (click)="togglePinned(pane); $event.stopPropagation()"
+            (pointerdown)="$event.stopPropagation()"
+          >
+            <ng-icon xui size="14px" name="matPushPinRound" [class]="pane.isPinned === false ? 'text-primary' : ''" />
+          </button>
+        }
+        @if (pane.allowFloating !== false && !pane.documentOnly && !isFloating(pane)) {
+          <button
+            type="button"
+            [class]="actionClass()"
+            [attr.aria-label]="'Float ' + (pane.header || pane.contentId)"
+            (click)="floatPane(pane); $event.stopPropagation()"
+            (pointerdown)="$event.stopPropagation()"
+          >
+            <ng-icon xui size="14px" name="matOpenInNewRound" />
+          </button>
+        }
+        @if (pane.allowMaximize !== false) {
+          <button
+            type="button"
+            [class]="actionClass()"
+            [attr.aria-label]="(pane.isMaximized ? 'Restore ' : 'Maximize ') + (pane.header || pane.contentId)"
+            (click)="toggleMaximized(pane); $event.stopPropagation()"
+            (pointerdown)="$event.stopPropagation()"
+          >
+            <ng-icon xui size="14px" [name]="pane.isMaximized ? 'matCloseFullscreenRound' : 'matOpenInFullRound'" />
+          </button>
+        }
+        @if (pane.allowClose !== false) {
+          <button
+            type="button"
+            [class]="actionClass()"
+            [attr.aria-label]="'Close ' + (pane.header || pane.contentId)"
+            (click)="closePane(pane); $event.stopPropagation()"
+            (pointerdown)="$event.stopPropagation()"
+          >
+            <ng-icon xui size="14px" name="matCloseRound" />
+          </button>
+        }
+      </div>
+    </ng-template>
+
+    <!-- ─── a tab group: one strip, one visible body ─────────────────────── -->
+    <ng-template #tabGroupTpl let-pane>
+      <div [class]="frameClass(pane)" [attr.data-dock-key]="key(pane)">
+        <div [class]="tabStripClass()" role="tablist">
+          @for (tab of pinnedTabs(pane); track key(tab)) {
+            <button
+              type="button"
+              role="tab"
+              [class]="tabClass(pane, tab)"
+              [attr.aria-selected]="tab === selectedTab(pane)"
+              [tabindex]="tab === selectedTab(pane) ? 0 : -1"
+              (click)="selectPane(tab)"
+              (pointerdown)="startPaneDrag(tab, null, $event)"
+              (dblclick)="toggleMaximized(tab)"
+              (keydown)="onTabKeydown(pane, $event)"
+            >
+              <span class="min-w-0 truncate">{{ tab.header }}</span>
+              @if (tab.allowClose !== false) {
+                <!-- A nested <button> is invalid markup, so this affordance is
+                     pointer-only and hidden from assistive technology; the
+                     action cluster on the right carries the real close button. -->
+                <span
+                  aria-hidden="true"
+                  [class]="tabCloseClass()"
+                  (click)="closePane(tab); $event.stopPropagation()"
+                  (pointerdown)="$event.stopPropagation()"
+                >
+                  <ng-icon xui size="12px" name="matCloseRound" />
+                </span>
+              }
+            </button>
+          }
+
+          @if (selectedTab(pane); as tab) {
+            <div class="ms-auto flex items-center ps-1">
+              <ng-container [ngTemplateOutlet]="paneActionsTpl" [ngTemplateOutletContext]="{ $implicit: tab }" />
+            </div>
+          }
+        </div>
+
+        @if (selectedTab(pane); as tab) {
+          <div
+            role="tabpanel"
+            class="min-h-0 min-w-0 flex-1 overflow-auto"
+            [xuiDockContentOutlet]="tab.contentId"
+            (pointerdown)="activate(tab)"
+            (focusin)="activate(tab)"
+          ></div>
+        }
+      </div>
+    </ng-template>
+
+    <!-- ─── a split pane: children along one axis, gutters in between ────── -->
+    <ng-template #splitTpl let-pane>
+      <div [class]="splitClass(pane)">
+        @for (child of childrenOf(pane); track key(child); let i = $index, last = $last) {
+          <div class="relative flex min-h-0 min-w-0" [style.flex]="flexOf(child)">
+            <ng-container [ngTemplateOutlet]="paneTpl" [ngTemplateOutletContext]="{ $implicit: child }" />
+          </div>
+
+          @if (!last) {
+            <!-- Drag or arrow-key the gutter to trade space between the panes
+                 either side of it. -->
+            <div
+              role="separator"
+              tabindex="0"
+              [class]="gutterClass(pane)"
+              [attr.aria-orientation]="pane.orientation === 'vertical' ? 'horizontal' : 'vertical'"
+              [attr.aria-label]="'Resize ' + headerOf(child)"
+              (pointerdown)="startSplitterDrag(pane, i, $event)"
+              (keydown)="onSplitterKeydown(pane, i, $event)"
+            >
+              <span [class]="gutterHandleClass(pane)"></span>
+            </div>
+          }
+        }
+      </div>
+    </ng-template>
+
+    <!-- ─── the document host: the only home for documentOnly panes ─────── -->
+    <ng-template #documentHostTpl let-pane>
+      <div class="bg-surface-sunken flex min-h-0 min-w-0 flex-1" [attr.data-dock-key]="key(pane)">
+        <ng-container [ngTemplateOutlet]="paneTpl" [ngTemplateOutletContext]="{ $implicit: pane.rootPane }" />
+      </div>
+    </ng-template>
+
+    <ng-template #paneTpl let-pane>
+      @switch (pane.type) {
+        @case ('splitPane') {
+          <ng-container [ngTemplateOutlet]="splitTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+        }
+        @case ('tabGroupPane') {
+          <ng-container [ngTemplateOutlet]="tabGroupTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+        }
+        @case ('documentHost') {
+          <ng-container [ngTemplateOutlet]="documentHostTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+        }
+        @default {
+          <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+        }
+      }
+    </ng-template>
+
+    <!-- ─── the dock manager itself ─────────────────────────────────────── -->
+    @if (maximized(); as pane) {
+      <div class="absolute inset-0 z-30 flex">
+        <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+      </div>
+    } @else {
+      @if (unpinned().top.length) {
+        <ng-container [ngTemplateOutlet]="stripTpl" [ngTemplateOutletContext]="{ $implicit: 'top' }" />
+      }
+
+      <div class="flex min-h-0 min-w-0 flex-1">
+        @if (unpinned().start.length) {
+          <ng-container [ngTemplateOutlet]="stripTpl" [ngTemplateOutletContext]="{ $implicit: 'start' }" />
+        }
+
+        <div class="flex min-h-0 min-w-0 flex-1">
+          <ng-container [ngTemplateOutlet]="paneTpl" [ngTemplateOutletContext]="{ $implicit: layout().rootPane }" />
+        </div>
+
+        @if (unpinned().end.length) {
+          <ng-container [ngTemplateOutlet]="stripTpl" [ngTemplateOutletContext]="{ $implicit: 'end' }" />
+        }
+      </div>
+
+      @if (unpinned().bottom.length) {
+        <ng-container [ngTemplateOutlet]="stripTpl" [ngTemplateOutletContext]="{ $implicit: 'bottom' }" />
+      }
+
+      <!-- The fly-out an unpinned pane opens over the layout. -->
+      @if (flyout(); as pane) {
+        <div data-dock-flyout [class]="flyoutClass()" [style]="flyoutStyle(pane)">
+          <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+        </div>
+      }
+
+      @for (window of floatingPanes(); track key(window)) {
+        <div
+          [attr.data-dock-window]="key(window)"
+          [class]="floatingClass()"
+          [style]="floatingStyle(window)"
+          (pointerdown)="bringToFront(window)"
+        >
+          <div
+            [class]="titleBarClass()"
+            (pointerdown)="startPaneDrag(floatingContent(window), window, $event)"
+            (dblclick)="dockBack(window)"
+          >
+            <span class="min-w-0 flex-1 truncate">{{ floatingTitle(window) }}</span>
+            <button
+              type="button"
+              [class]="actionClass()"
+              aria-label="Dock window"
+              (click)="dockBack(window); $event.stopPropagation()"
+              (pointerdown)="$event.stopPropagation()"
+            >
+              <ng-icon xui size="14px" name="matDockRound" />
+            </button>
+
+            <!-- A one-pane window shows that pane's own actions; the header they
+                 would normally live in is suppressed below. -->
+            @if (singlePane(window); as pane) {
+              <ng-container [ngTemplateOutlet]="paneActionsTpl" [ngTemplateOutletContext]="{ $implicit: pane }" />
+            } @else {
+              <button
+                type="button"
+                [class]="actionClass()"
+                aria-label="Close window"
+                (click)="closeWindow(window); $event.stopPropagation()"
+                (pointerdown)="$event.stopPropagation()"
+              >
+                <ng-icon xui size="14px" name="matCloseRound" />
+              </button>
+            }
+          </div>
+
+          <div class="flex min-h-0 min-w-0 flex-1">
+            @if (singlePane(window); as pane) {
+              <ng-container
+                [ngTemplateOutlet]="contentTpl"
+                [ngTemplateOutletContext]="{ $implicit: pane, hideHeader: true }"
+              />
+            } @else {
+              <ng-container [ngTemplateOutlet]="paneTpl" [ngTemplateOutletContext]="{ $implicit: window }" />
+            }
+          </div>
+
+          @if (window.floatingResizable !== false) {
+            @for (handle of RESIZE_HANDLES; track handle.id) {
+              <div
+                [class]="handle.class"
+                [attr.aria-hidden]="true"
+                (pointerdown)="startFloatingResize(window, handle.id, $event)"
+              ></div>
+            }
+          }
+        </div>
+      }
+    }
+
+    <!-- Where a drop would land. -->
+    @if (dropRect(); as rect) {
+      <div
+        class="border-primary bg-primary/20 pointer-events-none absolute z-50 rounded-sm border-2"
+        [style.left.px]="rect.left"
+        [style.top.px]="rect.top"
+        [style.width.px]="rect.width"
+        [style.height.px]="rect.height"
+      ></div>
+    }
+
+    <!-- ─── the docking joystick and the outer ring ─────────────────────── -->
+    @for (indicator of dockIndicators(); track indicator.key) {
+      <div
+        aria-hidden="true"
+        [class]="indicatorClass(indicator)"
+        [style.left.px]="indicator.left"
+        [style.top.px]="indicator.top"
+        [style.width.px]="INDICATOR_SIZE"
+        [style.height.px]="INDICATOR_SIZE"
+      >
+        <span [class]="indicatorFillClass(indicator)"></span>
+      </div>
+    }
+
+    @if (dragGhost(); as ghost) {
+      <div
+        class="bg-surface-overlay border-border text-foreground pointer-events-none fixed z-60 rounded-md border px-2 py-1 text-xs shadow-lg"
+        [style.left.px]="ghost.x + 12"
+        [style.top.px]="ghost.y + 12"
+      >
+        {{ ghost.label }}
+      </div>
+    }
+
+    <!-- ─── an edge strip of collapsed panes ────────────────────────────── -->
+    <ng-template #stripTpl let-location>
+      <div data-dock-strip [class]="stripClass(location)">
+        @for (pane of unpinnedAt(location); track key(pane)) {
+          <button
+            type="button"
+            [class]="stripTabClass(location, pane)"
+            [attr.aria-expanded]="pane === flyout()"
+            (click)="toggleFlyout(pane)"
+          >
+            {{ pane.header || pane.contentId }}
+          </button>
+        }
+      </div>
+    </ng-template>
+  `,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '(keydown.escape)': 'onEscape()'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: () => [], propDecorators: { contents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XuiDockContent), { ...{ descendants: true }, isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }, { type: i0.Output, args: ["layoutChange"] }], paneClose: [{ type: i0.Output, args: ["paneClose"] }], activePaneChange: [{ type: i0.Output, args: ["activePaneChange"] }], panePinnedChange: [{ type: i0.Output, args: ["panePinnedChange"] }], paneMaximizedChange: [{ type: i0.Output, args: ["paneMaximizedChange"] }], paneFloatingChange: [{ type: i0.Output, args: ["paneFloatingChange"] }], paneDragStart: [{ type: i0.Output, args: ["paneDragStart"] }], paneDragEnd: [{ type: i0.Output, args: ["paneDragEnd"] }] } });
+
+const XuiDockManagerImports = [XuiDockManager, XuiDockContent];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XUI_DOCK_CONTENT_MOUNTER, XuiDockContent, XuiDockContentOutlet, XuiDockManager, XuiDockManagerImports, canDockInto, cloneDockLayout, collectContentPanes, defaultUnpinnedLocation, dockAncestors, dockChildren, dockPaneAt, dockPaneKey, dockRoots, findDockParent, findDocumentHost, findMaximizedPane, floatDockPane, insertDockPane, isContentPane, isDockPaneVisible, isDockRoot, isDocumentHost, isFloatingRoot, isInDocumentHost, isParentPane, isSplitPane, isTabGroupPane, normalizeDockLayout, removeDockPane, selectedTabPane, unpinnedDockPanes, visibleDockChildren, visitDockPanes };
+//# sourceMappingURL=xui-dock-manager.mjs.map