dockview 6.6.0 → 7.0.2

package/dist/package/main.cjs.js

@@ -1,1045 +1,960 @@
 /**
  * dockview
- * @version 6.6.0
+ * @version 7.0.2
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var dockviewCore = require('dockview-core');
-var React = require('react');
-var ReactDOM = require('react-dom');
 
 /**
- * This component is intended to interface between vanilla-js and React hence we need to be
- * creative in how we update props.
- * A ref of the component is exposed with an update method; which when called stores the props
- * as a ref within this component and forcefully triggers a re-render of the component using
- * the ref of props we just set on the renderered component as the props passed to the inner
- * component
- */
-const ReactComponentBridge = (props, ref) => {
-    const [, triggerRender] = React.useState(0);
-    const _props = React.useRef(props.componentProps);
-    React.useImperativeHandle(ref, () => ({
-        update: (componentProps) => {
-            _props.current = Object.assign(Object.assign({}, _props.current), componentProps);
-            /**
-             * setting a arbitrary piece of state within this component will
-             * trigger a re-render.
-             * we use this rather than updating through a prop since we can
-             * pass a ref into the vanilla-js world.
-             *
-             * Use a monotonic counter rather than `Date.now()` so two
-             * updates within the same millisecond still produce distinct
-             * state values and avoid React's bailout.
-             */
-            triggerRender((n) => n + 1);
-        },
-    }), []);
-    return React.createElement(props.component, _props.current);
-};
-ReactComponentBridge.displayName = 'DockviewReactJsBridge';
-/**
- * Since we are storing the React.Portal references in a rendered array they
- * require a key property like any other React element rendered in an array
- * to prevent excessive re-rendering
+ * dockview-modules
+ * @version 7.0.2
+ * @link https://github.com/mathuo/dockview
+ * @license MIT
  */
-const uniquePortalKeyGenerator = (() => {
-    let value = 1;
-    return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
-})();
-const ReactPartContext = React.createContext({});
-class ReactPart {
-    constructor(parent, portalStore, component, parameters, context) {
-        this.parent = parent;
-        this.portalStore = portalStore;
-        this.component = component;
-        this.parameters = parameters;
-        this.context = context;
-        this._initialProps = {};
-        this.disposed = false;
-        this.createPortal();
+
+class TabGroupChipsService {
+    constructor(host) {
+        this._host = host;
+    }
+    attachToGroup(group) {
+        return new dockviewCore.DockviewCompositeDisposable(group.model.onDidCreateTabGroup((e) => {
+            this._host.fireDidCreateTabGroup(e);
+        }), group.model.onDidDestroyTabGroup((e) => {
+            this._host.fireDidDestroyTabGroup(e);
+        }), group.model.onDidAddPanelToTabGroup((e) => {
+            this._host.fireDidAddPanelToTabGroup(e);
+        }), group.model.onDidRemovePanelFromTabGroup((e) => {
+            this._host.fireDidRemovePanelFromTabGroup(e);
+        }), group.model.onDidTabGroupChange((e) => {
+            this._host.fireDidTabGroupChange(e);
+        }), group.model.onDidTabGroupCollapsedChange((e) => {
+            this._host.fireDidTabGroupCollapsedChange(e);
+        }));
     }
-    update(props) {
-        if (this.disposed) {
-            throw new Error('invalid operation: resource is already disposed');
-        }
-        if (!this.componentInstance) {
-            // if the component is yet to be mounted store the props
-            this._initialProps = Object.assign(Object.assign({}, this._initialProps), props);
-        }
-        else {
-            this.componentInstance.update(props);
-        }
+    dispose() {
+        // No internal state to tear down — emitters live on the host.
     }
-    createPortal() {
-        if (this.disposed) {
-            throw new Error('invalid operation: resource is already disposed');
-        }
-        if (!isReactComponent(this.component)) {
-            /**
-             * we know this isn't a React.FunctionComponent so throw an error here.
-             * if we do not intercept then React library will throw a very obsure error
-             * for the same reason... at least at this point we will emit a sensible stacktrace.
-             */
-            throw new Error('Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components');
-        }
-        const bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
-            component: this
-                .component,
-            componentProps: this.parameters,
-            ref: (element) => {
-                this.componentInstance = element;
-                if (Object.keys(this._initialProps).length > 0) {
-                    this.componentInstance.update(this._initialProps);
-                    this._initialProps = {}; // don't keep a reference to the users object once no longer required
+}
+const TabGroupChipsModule = dockviewCore.defineModule({
+    name: 'TabGroupChips',
+    serviceKey: 'tabGroupChipsService',
+    create: (host) => new TabGroupChipsService(host),
+    init: (host, service) => {
+        // Self-attach to existing and future groups; tear down when groups
+        // are removed. Component doesn't need to know about this wiring.
+        const perGroupDisposables = new Map();
+        return new dockviewCore.DockviewCompositeDisposable(host.onDidAddGroup((group) => {
+            perGroupDisposables.set(group, service.attachToGroup(group));
+        }), host.onDidRemoveGroup((group) => {
+            var _a;
+            (_a = perGroupDisposables.get(group)) === null || _a === void 0 ? void 0 : _a.dispose();
+            perGroupDisposables.delete(group);
+        }), {
+            dispose: () => {
+                for (const d of perGroupDisposables.values()) {
+                    d.dispose();
                 }
+                perGroupDisposables.clear();
             },
         });
-        const node = this.context
-            ? React.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent)
-            : bridgeComponent;
-        const portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
-        this.ref = {
-            portal,
-            disposable: this.portalStore.addPortal(portal),
-        };
-    }
-    dispose() {
-        var _a;
-        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.disposable.dispose();
-        this.disposed = true;
-    }
+    },
+});
+
+function popoverZIndexFor(target) {
+    if (!(target instanceof HTMLElement)) {
+        return undefined;
+    }
+    // Floating overlays live in the shell as siblings of the popover anchor
+    // and the AriaLevelTracker sets their inline z-index. Without this, a
+    // popover opened from inside a floating group would render behind it
+    // because they share the shell stacking context.
+    const relativeParent = dockviewCore.findRelativeZIndexParent(target);
+    return (relativeParent === null || relativeParent === void 0 ? void 0 : relativeParent.style.zIndex)
+        ? `calc(${relativeParent.style.zIndex} * 2)`
+        : undefined;
 }
-/**
- * A React Hook that returns an array of portals to be rendered by the user of this hook
- * and a disposable function to add a portal. Calling dispose removes this portal from the
- * portal array
- */
-const usePortalsLifecycle = () => {
-    const [portals, setPortals] = React.useState([]);
-    React.useDebugValue(`Portal count: ${portals.length}`);
-    const addPortal = React.useCallback((portal) => {
-        setPortals((existingPortals) => [...existingPortals, portal]);
-        let disposed = false;
-        return dockviewCore.DockviewDisposable.from(() => {
-            if (disposed) {
-                throw new Error('invalid operation: resource already disposed');
-            }
-            disposed = true;
-            setPortals((existingPortals) => existingPortals.filter((p) => p !== portal));
-        });
-    }, []);
-    return [portals, addPortal];
-};
-function isReactComponent(component) {
-    /**
-     * Yes, we could use "react-is" but that would introduce an unwanted peer dependency
-     * so for now we will check in a rather crude fashion...
-     */
-    return (typeof component === 'function' /** Functional Componnts */ ||
-        !!(component === null || component === void 0 ? void 0 : component.$$typeof) /** React.memo(...) Components */);
+let _nextId = 0;
+const nextContextMenuItemId = () => `dv-ctx-menu-item-${_nextId++}`;
+function isItemConfig(item) {
+    return typeof item === 'object';
 }
-
-class ReactPanelContentPart {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._onDidFocus = new dockviewCore.DockviewEmitter();
-        this.onDidFocus = this._onDidFocus.event;
-        this._onDidBlur = new dockviewCore.DockviewEmitter();
-        this.onDidBlur = this._onDidBlur.event;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    focus() {
-        // TODO
-    }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            params: parameters.params,
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-        });
-    }
-    update(event) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
-    }
-    layout(_width, _height) {
-        // noop
-    }
-    dispose() {
-        var _a;
-        this._onDidFocus.dispose();
-        this._onDidBlur.dispose();
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
+function buildItem(label, close, action, disabled) {
+    const el = document.createElement('div');
+    el.className = 'dv-context-menu-item';
+    el.setAttribute('role', 'menuitem');
+    if (disabled) {
+        el.classList.add('dv-context-menu-item--disabled');
+        el.setAttribute('aria-disabled', 'true');
+    }
+    el.textContent = label;
+    if (!disabled) {
+        el.addEventListener('click', () => {
+            action();
+            close();
+        });
+    }
+    return el;
 }
-
-class ReactPanelHeaderPart {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    focus() {
-        //noop
-    }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            params: parameters.params,
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-            tabLocation: parameters.tabLocation,
-        });
-    }
-    update(event) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
-    }
-    layout(_width, _height) {
-        // noop - retrieval from api
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
+function buildSeparator() {
+    const el = document.createElement('div');
+    el.className = 'dv-context-menu-separator';
+    el.setAttribute('role', 'separator');
+    return el;
 }
-
-class ReactWatermarkPart {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
+function isCoarsePrimaryInput() {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return false;
     }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            group: parameters.group,
-            containerApi: parameters.containerApi,
-        });
-    }
-    focus() {
-        // noop
-    }
-    update(params) {
-        var _a, _b, _c;
-        if (this.parameters) {
-            this.parameters.params = params.params;
+    const coarse = window.matchMedia('(pointer: coarse)').matches;
+    const fine = window.matchMedia('(pointer: fine)').matches;
+    return coarse && !fine;
+}
+function buildRenameInput(tabGroup) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'dv-context-menu-rename';
+    const input = document.createElement('input');
+    input.className = 'dv-context-menu-rename-input';
+    input.type = 'text';
+    input.placeholder = 'Name This Group';
+    input.value = tabGroup.label;
+    input.addEventListener('input', () => {
+        tabGroup.setLabel(input.value);
+    });
+    input.addEventListener('keydown', (e) => {
+        if (e.key !== 'Escape' && e.key !== 'Enter') {
+            e.stopPropagation();
         }
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: (_c = (_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) !== null && _c !== void 0 ? _c : {} });
-    }
-    layout(_width, _height) {
-        // noop - retrieval from api
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
+    });
+    input.addEventListener('click', (e) => {
+        e.stopPropagation();
+    });
+    wrapper.appendChild(input);
+    // Skip auto-focus on touch-primary devices: focusing the input pops the
+    // on-screen keyboard, which fires `window resize`, which `PopupService`
+    // listens to and uses to dismiss the popover — so the menu opens, the
+    // keyboard appears, and the menu immediately closes before the user can
+    // type. The user can still tap the input to focus it intentionally.
+    if (!isCoarsePrimaryInput()) {
+        requestAnimationFrame(() => {
+            input.focus();
+            input.select();
+        });
+    }
+    return wrapper;
 }
-
-class ReactHeaderActionsRendererPart {
-    get element() {
-        return this._element;
-    }
-    get part() {
-        return this._part;
-    }
-    constructor(component, reactPortalStore, _group) {
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._group = _group;
-        this.mutableDisposable = new dockviewCore.DockviewMutableDisposable();
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
+function buildColorPicker(tabGroup, palette) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'dv-context-menu-color-picker';
+    if (!palette.enabled) {
+        // Opt-out: render no swatches. Returning a wrapper rather than null
+        // keeps the call site simple; the wrapper is empty and visually inert.
+        return wrapper;
+    }
+    for (const entry of palette.entries()) {
+        const swatch = document.createElement('div');
+        swatch.className = 'dv-context-menu-color-swatch';
+        // Use a CSS custom property rather than setting `backgroundColor`
+        // directly: the IDL setter validates the value against a color
+        // grammar and rejects `var(...)` references in some environments
+        // (notably jsdom; some browsers have historically had similar
+        // quirks). The matching SCSS rule reads the var at use time.
+        swatch.style.setProperty('--dv-tab-group-color', entry.value);
+        if (entry.label) {
+            swatch.title = entry.label;
+        }
+        if (tabGroup.color === entry.id) {
+            swatch.classList.add('dv-context-menu-color-swatch--selected');
+        }
+        swatch.addEventListener('click', () => {
+            tabGroup.setColor(entry.id);
+        });
+        wrapper.appendChild(swatch);
+    }
+    return wrapper;
+}
+class ContextMenuController {
+    constructor(accessor) {
+        this.accessor = accessor;
     }
-    init(parameters) {
-        this.mutableDisposable.value = new dockviewCore.DockviewCompositeDisposable(this._group.model.onDidAddPanel(() => {
-            this.updatePanels();
-        }), this._group.model.onDidRemovePanel(() => {
-            this.updatePanels();
-        }), this._group.model.onDidActivePanelChange(() => {
-            this.updateActivePanel();
-        }), parameters.api.onDidActiveChange(() => {
-            this.updateGroupActive();
-        }), parameters.api.onDidLocationChange((event) => {
-            this.updateLocation(event.location);
-        }));
-        this._part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-            panels: this._group.model.panels,
-            activePanel: this._group.model.activePanel,
-            isGroupActive: this._group.api.isActive,
-            group: this._group,
-            headerPosition: this._group.model.headerPosition,
-            location: parameters.api.location,
+    show(panel, group, event) {
+        var _a, _b;
+        if (!this.accessor.options.getTabContextMenuItems) {
+            return;
+        }
+        const items = this.accessor.options.getTabContextMenuItems({
+            panel,
+            group,
+            api: this.accessor.api,
+            event,
         });
-    }
-    dispose() {
-        var _a;
-        this.mutableDisposable.dispose();
-        (_a = this._part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-    update(event) {
-        var _a;
-        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
-    }
-    updatePanels() {
-        this.update({ params: { panels: this._group.model.panels } });
-    }
-    updateActivePanel() {
-        this.update({
-            params: {
-                activePanel: this._group.model.activePanel,
-            },
+        if (items.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        const popupService = this.accessor.getPopupServiceForGroup(group);
+        const close = () => popupService.close();
+        const menuEl = document.createElement('div');
+        menuEl.className = 'dv-context-menu';
+        menuEl.setAttribute('role', 'menu');
+        for (const item of items) {
+            if (item === 'separator') {
+                menuEl.appendChild(buildSeparator());
+            }
+            else if (item === 'close') {
+                menuEl.appendChild(buildItem('Close', close, () => panel.api.close()));
+            }
+            else if (item === 'closeOthers') {
+                menuEl.appendChild(buildItem('Close Others', close, () => {
+                    group.panels
+                        .filter((p) => p !== panel)
+                        .forEach((p) => p.api.close());
+                }));
+            }
+            else if (item === 'closeAll') {
+                menuEl.appendChild(buildItem('Close All', close, () => {
+                    [...group.panels].forEach((p) => p.api.close());
+                }));
+            }
+            else if (isItemConfig(item) && item.element) {
+                menuEl.appendChild(item.element);
+            }
+            else if (isItemConfig(item) && item.component) {
+                const renderer = (_b = (_a = this.accessor.options).createContextMenuItemComponent) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                    id: nextContextMenuItemId(),
+                    component: item.component,
+                });
+                if (renderer) {
+                    renderer.init({
+                        panel,
+                        group,
+                        api: this.accessor.api,
+                        close,
+                        componentProps: item.componentProps,
+                    });
+                    menuEl.appendChild(renderer.element);
+                }
+            }
+            else if (isItemConfig(item) && item.label) {
+                menuEl.appendChild(buildItem(item.label, close, () => { var _a; return (_a = item.action) === null || _a === void 0 ? void 0 : _a.call(item); }, item.disabled));
+            }
+        }
+        popupService.openPopover(menuEl, {
+            x: event.clientX,
+            y: event.clientY,
+            zIndex: popoverZIndexFor(event.target),
         });
     }
-    updateGroupActive() {
-        this.update({
-            params: {
-                isGroupActive: this._group.api.isActive,
-            },
+    showForChip(tabGroup, group, event) {
+        if (!this.accessor.options.getTabGroupChipContextMenuItems) {
+            return;
+        }
+        const items = this.accessor.options.getTabGroupChipContextMenuItems({
+            tabGroup,
+            group,
+            api: this.accessor.api,
+            event,
+        });
+        if (items.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        const popupService = this.accessor.getPopupServiceForGroup(group);
+        const close = () => popupService.close();
+        const menuEl = document.createElement('div');
+        menuEl.className = 'dv-context-menu';
+        menuEl.setAttribute('role', 'menu');
+        for (const item of items) {
+            if (item === 'separator') {
+                menuEl.appendChild(buildSeparator());
+            }
+            else if (item === 'rename') {
+                menuEl.appendChild(buildRenameInput(tabGroup));
+            }
+            else if (item === 'colorPicker') {
+                menuEl.appendChild(buildColorPicker(tabGroup, this.accessor.tabGroupColorPalette));
+            }
+            else if (isItemConfig(item) && item.element) {
+                menuEl.appendChild(item.element);
+            }
+            else if (isItemConfig(item) && item.label) {
+                menuEl.appendChild(buildItem(item.label, close, () => { var _a; return (_a = item.action) === null || _a === void 0 ? void 0 : _a.call(item); }, item.disabled));
+            }
+        }
+        popupService.openPopover(menuEl, {
+            x: event.clientX,
+            y: event.clientY,
+            zIndex: popoverZIndexFor(event.target),
         });
-    }
-    updateLocation(location) {
-        this.update({ params: { location } });
     }
 }
+const ContextMenuModule = dockviewCore.defineModule({
+    name: 'ContextMenu',
+    serviceKey: 'contextMenuService',
+    create: (host) => new ContextMenuController(host),
+});
 
-class ReactContextMenuItemPart {
-    get element() {
-        return this._element;
+/** Cursor offset of the group drag ghost, matched to the long-shipped default. */
+const GROUP_DRAG_GHOST_OFFSET_X = 30;
+const GROUP_DRAG_GHOST_OFFSET_Y = -10;
+/**
+ * The narrow surface the {@link AdvancedDnDService} needs from the host
+ * (the `DockviewComponent`).
+ *
+ * The `onWill*` emitters stay on the component so the public event shape is
+ * unchanged whether or not this module is registered — the service is only the
+ * dispatch point those fires are routed through. Engine policy (e.g. the
+ * `disableDnd` guard) stays on the component, ahead of the dispatch.
+ */
+/**
+ * Owns the dispatch of the advanced drag-and-drop hooks — `onWillDragPanel`,
+ * `onWillDragGroup`, `onWillDrop` and `onWillShowOverlay`.
+ *
+ * At this stage the service is a thin dispatcher that forwards to the host's
+ * emitters; the customisation surface it gates (custom drop overlays, custom
+ * group drag ghosts, hook veto/transform behaviour) is currently inlined in
+ * core and is extracted into this service in later phases. Routing the
+ * dispatch through a module slot is what lets that customisation layer move
+ * into a separately-distributed package in a future major version without
+ * changing the public event surface.
+ *
+ * The service holds no drag state of its own — the gesture is driven by the
+ * DnD backends, and the per-group subscriptions live on the component's group
+ * lifecycle (so groups created mid-move are not missed).
+ */
+class AdvancedDnDService {
+    constructor(host) {
+        this.host = host;
     }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
+    dispatchWillDragPanel(event) {
+        this.host.fireWillDragPanel(event);
     }
-    init(props) {
-        this.part = new ReactPart(this._element, this.reactPortalStore, this.component, props);
+    dispatchWillDragGroup(event) {
+        this.host.fireWillDragGroup(event);
     }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    dispatchWillDrop(event) {
+        this.host.fireWillDrop(event);
     }
-}
-
-class ReactTabGroupChipPart {
-    get element() {
-        return this._element;
+    dispatchWillShowOverlay(event) {
+        this.host.fireWillShowOverlay(event);
     }
-    constructor(component, reactPortalStore) {
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.display = 'inline-flex';
+    buildGroupDragGhost(group) {
+        const createGhost = this.host.options.createGroupDragGhostComponent;
+        if (!createGhost) {
+            return undefined;
+        }
+        const renderer = createGhost(group);
+        renderer.init({ group, api: this.host.api });
+        return {
+            element: renderer.element,
+            offsetX: GROUP_DRAG_GHOST_OFFSET_X,
+            offsetY: GROUP_DRAG_GHOST_OFFSET_Y,
+            dispose: renderer.dispose ? () => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); } : undefined,
+        };
     }
-    init(params) {
-        this.part = new ReactPart(this._element, this.reactPortalStore, this.component, {
-            tabGroup: params.tabGroup,
-            api: params.api,
-        });
+    resolveOverlayModel(location, group) {
+        var _a, _b;
+        return (_b = (_a = this.host.options).dropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, { location, group });
     }
-    update(params) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ tabGroup: params.tabGroup });
+    showPreviewOverlay(group, position) {
+        const target = group.model.contentDropTarget;
+        target.showOverlay(position);
+        return dockviewCore.DockviewDisposable.from(() => target.clearOverlay());
     }
     dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+        // no-op — see class doc: the service holds no state to tear down.
     }
 }
+const AdvancedDnDModule = dockviewCore.defineModule({
+    name: 'AdvancedDnD',
+    serviceKey: 'advancedDnDService',
+    create: (host) => new AdvancedDnDService(host),
+});
 
-class ReactGroupDragGhostPart {
-    get element() {
-        return this._element;
-    }
-    constructor(component, reactPortalStore) {
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.display = 'inline-flex';
-    }
-    init(params) {
-        this.part = new ReactPart(this._element, this.reactPortalStore, this.component, {
-            group: params.group,
-            api: params.api,
-        });
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+/**
+ * Marks (on the dockview root element) that a keyboard move is in progress, so
+ * the default navigation listener stands down while the advanced docking module
+ * drives the keys. A neutral DOM signal keeps the two listeners coordinated
+ * without either service holding a reference to the other.
+ */
+const KEYBOARD_MOVE_ATTRIBUTE = 'data-dv-kbd-moving';
+/**
+ * Does `e` match a binding string like `'ctrl+]'` / `'shift+f6'`? Modifiers are
+ * matched exactly (a binding without `shift` will not fire while Shift is held),
+ * and the final part is compared to `KeyboardEvent.key`, lower-cased.
+ */
+function matchesBinding(e, binding) {
+    const parts = binding.toLowerCase().split('+');
+    const key = parts[parts.length - 1];
+    const mods = parts.slice(0, -1);
+    return (e.ctrlKey === mods.includes('ctrl') &&
+        e.shiftKey === mods.includes('shift') &&
+        e.altKey === mods.includes('alt') &&
+        e.metaKey === (mods.includes('meta') || mods.includes('cmd')) &&
+        e.key.toLowerCase() === key);
+}
+/**
+ * Resolve the `keyboardNavigation` opt-in to its options object, or `undefined`
+ * when keyboard support is off. Both keyboard modules read the same opt-in.
+ */
+function readKeyboardNavigation(options) {
+    const opt = options.keyboardNavigation;
+    if (!opt) {
+        return undefined;
     }
+    return opt === true ? {} : opt;
 }
 
-function createGroupControlElement(component, store) {
-    return component
-        ? (groupPanel) => {
-            return new ReactHeaderActionsRendererPart(component, store, groupPanel);
-        }
-        : undefined;
-}
-const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
-function extractCoreOptions$3(props) {
-    const coreOptions = dockviewCore.PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
-        if (key in props) {
-            obj[key] = props[key];
-        }
-        return obj;
-    }, {});
-    return coreOptions;
-}
-const DockviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const dockviewRef = React.useRef(undefined);
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    const prevProps = React.useRef({});
-    React.useEffect(() => {
-        const changes = {};
-        dockviewCore.PROPERTY_KEYS_DOCKVIEW.forEach((propKey) => {
-            const key = propKey;
-            const propValue = props[key];
-            if (key in props && propValue !== prevProps.current[key]) {
-                changes[key] = propValue;
+const DEFAULT_KEYMAP$1 = {
+    nextTab: 'ctrl+]',
+    prevTab: 'ctrl+[',
+    focusNextGroup: 'f6',
+    focusPrevGroup: 'shift+f6',
+    focusTabs: 'ctrl+shift+\\',
+};
+/**
+ * Keyboard navigation & focus management — operate the dock without a mouse.
+ * Opt-in via `keyboardNavigation`, with a rebindable {@link DockviewKeybindings}
+ * keymap.
+ *
+ * - **Switch tab** (`Ctrl+]` / `Ctrl+[`) — cycle the focused group's tabs.
+ * - **Focus group** (`F6` / `Shift+F6`) — move focus to the next / previous
+ *   group in sequence.
+ * - **Focus the tab strip** (`Ctrl+Shift+\`) — jump focus from panel content to
+ *   the active group's tab strip (the strip's roving-tabindex takes over).
+ * - **Focus restore on close** — when removing a panel/group pulls focus out of
+ *   the dock, focus returns to the neighbour the layout just activated instead
+ *   of being stranded on `<body>`.
+ * - **Floating `Esc`** — `Esc` inside a floating group returns focus to the
+ *   control that had it before entering the float (polite: bubble phase,
+ *   respects `defaultPrevented`, so panel content keeps `Esc`).
+ * - **Floating Tab-containment** — Tab wraps within the floating group so focus
+ *   doesn't leak to the grid behind it.
+ *
+ * Stands down while an advanced keyboard move is in progress (see
+ * {@link KEYBOARD_MOVE_ATTRIBUTE}) so the docking module owns the keys then.
+ */
+class AccessibilityService extends dockviewCore.DockviewCompositeDisposable {
+    constructor(host) {
+        super();
+        this.host = host;
+        this._focusWasInside = false;
+        // Listen on the document (capture) rather than the dockview element:
+        // edge groups live in the shell *outside* the gridview, and the shell
+        // is created after this service, so a fixed element would miss them.
+        const doc = host.rootElement.ownerDocument;
+        const onKeyDown = (e) => this._onKeyDown(e);
+        doc.addEventListener('keydown', onKeyDown, true);
+        // Remember the last control focused in the main dock (outside any
+        // float) so Esc inside a floating group can return focus to its
+        // invoking control. Observe-only — never consumes.
+        const onFocusIn = (e) => {
+            const t = e.target;
+            if (t instanceof HTMLElement &&
+                this.host.rootElement.contains(t) &&
+                !t.closest('[role="dialog"]')) {
+                this._lastNonFloatFocus = t;
             }
-        });
-        if (dockviewRef.current) {
-            dockviewRef.current.updateOptions(changes);
-        }
-        prevProps.current = props;
-    }, dockviewCore.PROPERTY_KEYS_DOCKVIEW.map((key) => props[key]));
-    React.useEffect(() => {
-        var _a;
-        if (!domRef.current) {
-            return;
-        }
-        const frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
-        if (props.defaultTabComponent) {
-            frameworkTabComponents[DEFAULT_REACT_TAB] =
-                props.defaultTabComponent;
-        }
-        const frameworkOptions = {
-            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
-            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
-            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
-            createComponent: (options) => {
-                return new ReactPanelContentPart(options.id, props.components[options.name], {
-                    addPortal,
-                });
-            },
-            createTabComponent(options) {
-                return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
-                    addPortal,
-                });
-            },
-            createWatermarkComponent: props.watermarkComponent
-                ? () => {
-                    return new ReactWatermarkPart('watermark', props.watermarkComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-            defaultTabComponent: props.defaultTabComponent
-                ? DEFAULT_REACT_TAB
-                : undefined,
-            createContextMenuItemComponent: (options) => {
-                if (!options.component) {
-                    return undefined;
-                }
-                return new ReactContextMenuItemPart(options.id, options.component, { addPortal });
-            },
         };
-        const coreOptions = extractCoreOptions$3(props);
-        if (props.tabGroupChipComponent) {
-            const chipComponent = props.tabGroupChipComponent;
-            coreOptions.createTabGroupChipComponent = () => {
-                return new ReactTabGroupChipPart(chipComponent, {
-                    addPortal,
-                });
-            };
-        }
-        if (props.groupDragGhostComponent) {
-            const ghostComponent = props.groupDragGhostComponent;
-            coreOptions.createGroupDragGhostComponent = () => {
-                return new ReactGroupDragGhostPart(ghostComponent, {
-                    addPortal,
-                });
-            };
-        }
-        const api = dockviewCore.createDockview(domRef.current, Object.assign(Object.assign({}, coreOptions), frameworkOptions));
-        const { clientWidth, clientHeight } = domRef.current;
-        api.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api });
-        }
-        dockviewRef.current = api;
-        return () => {
-            dockviewRef.current = undefined;
-            api.dispose();
-        };
-    }, []);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return () => {
-                // noop
-            };
-        }
-        const disposable = dockviewRef.current.onDidDrop((event) => {
-            if (props.onDidDrop) {
-                props.onDidDrop(event);
+        doc.addEventListener('focusin', onFocusIn, true);
+        // Esc-from-float restore runs in the BUBBLE phase and respects
+        // defaultPrevented, so panel content that uses Esc keeps priority.
+        const onEscape = (e) => this._onFloatingEscape(e);
+        doc.addEventListener('keydown', onEscape, false);
+        this.addDisposables({
+            dispose: () => doc.removeEventListener('keydown', onKeyDown, true),
+        }, {
+            dispose: () => doc.removeEventListener('focusin', onFocusIn, true),
+        }, {
+            dispose: () => doc.removeEventListener('keydown', onEscape, false),
+        }, 
+        // When a close pulls focus out of the dock, return it to the
+        // neighbour the component just activated rather than leaving it
+        // stranded on <body>. Snapshot before the teardown (focus still on
+        // the closing panel), restore after.
+        host.onWillMutateLayout((e) => {
+            if (e.kind === 'remove' && this._nav) {
+                this._focusWasInside = this._isFocusInside();
             }
-        });
-        return () => {
-            disposable.dispose();
-        };
-    }, [props.onDidDrop]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return () => {
-                // noop
-            };
-        }
-        const disposable = dockviewRef.current.onWillDrop((event) => {
-            if (props.onWillDrop) {
-                props.onWillDrop(event);
+        }), host.onDidMutateLayout((e) => {
+            if (e.kind === 'remove' &&
+                this._nav &&
+                this._focusWasInside &&
+                !this._isFocusInside()) {
+                this._restoreFocus();
             }
-        });
-        return () => {
-            disposable.dispose();
-        };
-    }, [props.onWillDrop]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
+        }));
+    }
+    get _moveActive() {
+        return this.host.rootElement.hasAttribute(KEYBOARD_MOVE_ATTRIBUTE);
+    }
+    _isFocusInside() {
+        const active = this.host.rootElement.ownerDocument.activeElement;
+        return active instanceof Node && this.host.rootElement.contains(active);
+    }
+    _onFloatingEscape(e) {
+        if (!this._nav ||
+            this._moveActive ||
+            e.defaultPrevented ||
+            e.key !== 'Escape') {
             return;
         }
-        dockviewRef.current.updateOptions({
-            createTabGroupChipComponent: props.tabGroupChipComponent
-                ? () => {
-                    return new ReactTabGroupChipPart(props.tabGroupChipComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-        });
-    }, [props.tabGroupChipComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
+        const target = e.target;
+        if (!(target instanceof Element)) {
             return;
         }
-        dockviewRef.current.updateOptions({
-            createGroupDragGhostComponent: props.groupDragGhostComponent
-                ? () => {
-                    return new ReactGroupDragGhostPart(props.groupDragGhostComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-        });
-    }, [props.groupDragGhostComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
+        // Only when focus is inside one of *this* dock's floating groups.
+        const float = target.closest('[role="dialog"]');
+        if (!float || !this.host.rootElement.contains(float)) {
             return;
         }
-        dockviewRef.current.updateOptions({
-            createComponent: (options) => {
-                return new ReactPanelContentPart(options.id, props.components[options.name], {
-                    addPortal,
-                });
-            },
-        });
-    }, [props.components]);
-    React.useEffect(() => {
+        e.preventDefault();
+        e.stopPropagation();
+        this._returnFocusFromFloat();
+    }
+    /**
+     * Keep Tab inside the floating group that holds focus: at the last tabbable
+     * Tab wraps to the first, at the first Shift+Tab wraps to the last. Returns
+     * true if it handled the event. No-op outside a float.
+     */
+    _trapFloatTab(e) {
+        const target = e.target;
+        if (!(target instanceof Element)) {
+            return false;
+        }
+        const float = target.closest('[role="dialog"]');
+        if (!float || !this.host.rootElement.contains(float)) {
+            return false;
+        }
+        // Always manage Tab inside a float, never just at the boundary: focus
+        // often sits on non-tabbable plumbing (the content container, which is
+        // tabindex="-1"), and the browser's default Tab from there escapes to
+        // the grid behind. Drive the cursor through the float's tabbables
+        // ourselves and swallow the default so it can't leak out.
+        e.preventDefault();
+        const tabbables = this._tabbables(float);
+        if (tabbables.length === 0) {
+            return true;
+        }
+        const active = float.ownerDocument.activeElement;
+        const index = active instanceof HTMLElement ? tabbables.indexOf(active) : -1;
+        const n = tabbables.length;
+        const next = index === -1
+            ? e.shiftKey
+                ? n - 1
+                : 0
+            : (index + (e.shiftKey ? -1 : 1) + n) % n;
+        tabbables[next].focus();
+        return true;
+    }
+    _tabbables(root) {
+        const nodes = root.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), ' +
+            'select:not([disabled]), textarea:not([disabled]), [tabindex]');
+        // tabIndex >= 0 keeps naturally-focusable controls and roving anchors
+        // (the active tab) while dropping tabindex="-1" plumbing (content
+        // containers, inactive tabs).
+        return Array.from(nodes).filter((el) => el.tabIndex >= 0);
+    }
+    _returnFocusFromFloat() {
         var _a;
-        if (!dockviewRef.current) {
+        const prev = this._lastNonFloatFocus;
+        if (prev &&
+            prev.isConnected &&
+            this.host.rootElement.contains(prev) &&
+            !prev.closest('[role="dialog"]')) {
+            prev.focus();
             return;
         }
-        const frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
-        if (props.defaultTabComponent) {
-            frameworkTabComponents[DEFAULT_REACT_TAB] =
-                props.defaultTabComponent;
-        }
-        dockviewRef.current.updateOptions({
-            defaultTabComponent: props.defaultTabComponent
-                ? DEFAULT_REACT_TAB
-                : undefined,
-            createTabComponent(options) {
-                return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
-                    addPortal,
-                });
-            },
-        });
-    }, [props.tabComponents, props.defaultTabComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
+        // Invoking control is gone — fall back to a grid group's content.
+        (_a = this.host.groups
+            .find((g) => g.api.location.type === 'grid')) === null || _a === void 0 ? void 0 : _a.model.focusContent();
+    }
+    get _nav() {
+        return readKeyboardNavigation(this.host.options);
+    }
+    get _keymap() {
+        var _a;
+        return Object.assign(Object.assign({}, DEFAULT_KEYMAP$1), (_a = this._nav) === null || _a === void 0 ? void 0 : _a.keymap);
+    }
+    _onKeyDown(e) {
+        if (!this._nav) {
             return;
         }
-        dockviewRef.current.updateOptions({
-            createWatermarkComponent: props.watermarkComponent
-                ? () => {
-                    return new ReactWatermarkPart('watermark', props.watermarkComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-        });
-    }, [props.watermarkComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
+        // Stand down while the docking module is driving a keyboard move.
+        if (this._moveActive) {
             return;
         }
-        dockviewRef.current.updateOptions({
-            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
-        });
-    }, [props.rightHeaderActionsComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
+        // Only act on events originating inside *this* dockview.
+        if (!(e.target instanceof Node) ||
+            !this.host.rootElement.contains(e.target)) {
             return;
         }
-        dockviewRef.current.updateOptions({
-            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
-        });
-    }, [props.leftHeaderActionsComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
+        // Trap Tab within a floating group so focus doesn't leak to the grid
+        // behind it (the float is non-modal, but its Tab order should be).
+        if (e.key === 'Tab' && this._trapFloatTab(e)) {
             return;
         }
-        dockviewRef.current.updateOptions({
-            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
-        });
-    }, [props.prefixHeaderActionsComponent]);
-    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
-});
-DockviewReact.displayName = 'DockviewComponent';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dv-svg" },
-    React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
-
-function useTitle(api) {
-    const [title, setTitle] = React.useState(api.title);
-    React.useEffect(() => {
-        const disposable = api.onDidTitleChange((event) => {
-            setTitle(event.title);
-        });
-        // Depending on the order in which React effects are run, the title may already be out of sync (cf. issue #1003).
-        if (title !== api.title) {
-            setTitle(api.title);
+        const keymap = this._keymap;
+        if (matchesBinding(e, keymap.nextTab)) {
+            this._consume(e);
+            this._switchTab(false);
         }
-        return () => {
-            disposable.dispose();
-        };
-    }, [api]);
-    return title;
-}
-const DockviewDefaultTab = (_a) => {
-    var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride, onPointerDown, onPointerUp, onPointerLeave, tabLocation } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride", "onPointerDown", "onPointerUp", "onPointerLeave", "tabLocation"]);
-    const title = useTitle(api);
-    const isMiddleMouseButton = React.useRef(false);
-    const onClose = React.useCallback((event) => {
-        event.preventDefault();
-        if (closeActionOverride) {
-            closeActionOverride();
+        else if (matchesBinding(e, keymap.prevTab)) {
+            this._consume(e);
+            this._switchTab(true);
         }
-        else {
-            api.close();
+        else if (matchesBinding(e, keymap.focusNextGroup)) {
+            this._consume(e);
+            this._cycleGroup(false);
         }
-    }, [api, closeActionOverride]);
-    const onBtnPointerDown = React.useCallback((event) => {
-        event.preventDefault();
-    }, []);
-    const _onPointerDown = React.useCallback((event) => {
-        isMiddleMouseButton.current = event.button === 1;
-        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
-    }, [onPointerDown]);
-    const _onPointerUp = React.useCallback((event) => {
-        if (isMiddleMouseButton && event.button === 1 && !hideClose) {
-            isMiddleMouseButton.current = false;
-            onClose(event);
+        else if (matchesBinding(e, keymap.focusPrevGroup)) {
+            this._consume(e);
+            this._cycleGroup(true);
+        }
+        else if (matchesBinding(e, keymap.focusTabs)) {
+            this._consume(e);
+            this._focusTabs();
         }
-        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
-    }, [onPointerUp, onClose, hideClose]);
-    const _onPointerLeave = React.useCallback((event) => {
-        isMiddleMouseButton.current = false;
-        onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(event);
-    }, [onPointerLeave]);
-    return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onPointerDown: _onPointerDown, onPointerUp: _onPointerUp, onPointerLeave: _onPointerLeave, className: "dv-default-tab" }),
-        React.createElement("span", { className: "dv-default-tab-content" }, title),
-        !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
-            React.createElement(CloseButton, null)))));
-};
-
-class ReactPanelView extends dockviewCore.SplitviewPanel {
-    constructor(id, component, reactComponent, reactPortalStore) {
-        super(id, component);
-        this.reactComponent = reactComponent;
-        this.reactPortalStore = reactPortalStore;
     }
-    getComponent() {
-        var _a, _b;
-        return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
-            api: this.api,
-            containerApi: new dockviewCore.SplitviewApi(this._params.accessor),
-        });
+    // --- navigation (uses the public group API + the adjacentGroup primitive) ---
+    _focusTabs() {
+        var _a;
+        // Jump from panel content to the active group's tab strip; the
+        // tablist's own roving-tabindex handler takes over from there.
+        (_a = this.host.activeGroup) === null || _a === void 0 ? void 0 : _a.model.focusActiveTab();
     }
-}
-
-function extractCoreOptions$2(props) {
-    const coreOptions = dockviewCore.PROPERTY_KEYS_SPLITVIEW.reduce((obj, key) => {
-        if (key in props) {
-            obj[key] = props[key];
-        }
-        return obj;
-    }, {});
-    return coreOptions;
-}
-const SplitviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const splitviewRef = React.useRef(undefined);
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    const prevProps = React.useRef({});
-    React.useEffect(() => {
-        const changes = {};
-        dockviewCore.PROPERTY_KEYS_SPLITVIEW.forEach((propKey) => {
-            const key = propKey;
-            const propValue = props[key];
-            if (key in props && propValue !== prevProps.current[key]) {
-                changes[key] = propValue;
-            }
-        });
-        if (splitviewRef.current) {
-            splitviewRef.current.updateOptions(changes);
-        }
-        prevProps.current = props;
-    }, dockviewCore.PROPERTY_KEYS_SPLITVIEW.map((key) => props[key]));
-    React.useEffect(() => {
-        if (!domRef.current) {
-            return () => {
-                // noop
-            };
+    _switchTab(reverse) {
+        const group = this.host.activeGroup;
+        if (!group) {
+            return;
         }
-        const frameworkOptions = {
-            createComponent: (options) => {
-                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
-            },
-        };
-        const api = dockviewCore.createSplitview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions$2(props)), frameworkOptions));
-        const { clientWidth, clientHeight } = domRef.current;
-        api.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api });
+        if (reverse) {
+            group.model.moveToPrevious();
         }
-        splitviewRef.current = api;
-        return () => {
-            splitviewRef.current = undefined;
-            api.dispose();
-        };
-    }, []);
-    React.useEffect(() => {
-        if (!splitviewRef.current) {
+        else {
+            group.model.moveToNext();
+        }
+        // Keep DOM focus inside the dock: switching hides the previously
+        // focused content, which would otherwise drop focus to <body> and
+        // leave the keymap unable to see the next key.
+        group.model.focusContent();
+    }
+    _cycleGroup(reverse) {
+        const current = this.host.activeGroup;
+        const target = current
+            ? this.host.adjacentGroup(current, reverse)
+            : this.host.groups[0];
+        this._focusGroup(target);
+    }
+    _focusGroup(target) {
+        if (!target) {
             return;
         }
-        splitviewRef.current.updateOptions({
-            createComponent: (options) => {
-                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
-            },
-        });
-    }, [props.components]);
-    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
-});
-SplitviewReact.displayName = 'SplitviewComponent';
-
-class ReactGridPanelView extends dockviewCore.GridviewPanel {
-    constructor(id, component, reactComponent, reactPortalStore) {
-        super(id, component);
-        this.reactComponent = reactComponent;
-        this.reactPortalStore = reactPortalStore;
+        target.api.setActive();
+        target.model.focusContent();
     }
-    getComponent() {
-        var _a, _b;
-        return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
-            api: this.api,
-            // TODO: fix casting hack
-            containerApi: new dockviewCore.GridviewApi(this._params
-                .accessor),
-        });
+    /** Return DOM focus to the active group's content, keeping it in the dock. */
+    _restoreFocus() {
+        var _a;
+        (_a = this.host.activeGroup) === null || _a === void 0 ? void 0 : _a.model.focusContent();
+    }
+    _consume(e) {
+        e.preventDefault();
+        e.stopPropagation();
     }
 }
+const AccessibilityModule = dockviewCore.defineModule({
+    name: 'Accessibility',
+    serviceKey: 'accessibilityService',
+    create: (host) => new AccessibilityService(host),
+});
 
-function extractCoreOptions$1(props) {
-    const coreOptions = dockviewCore.PROPERTY_KEYS_GRIDVIEW.reduce((obj, key) => {
-        if (key in props) {
-            obj[key] = props[key];
+const EDGE_FROM_KEY = {
+    ArrowLeft: 'left',
+    ArrowRight: 'right',
+    ArrowUp: 'top',
+    ArrowDown: 'bottom',
+};
+const DEFAULT_KEYMAP = {
+    focusGroupLeft: 'ctrl+shift+arrowleft',
+    focusGroupRight: 'ctrl+shift+arrowright',
+    focusGroupUp: 'ctrl+shift+arrowup',
+    focusGroupDown: 'ctrl+shift+arrowdown',
+    dock: 'ctrl+m',
+};
+/**
+ * Advanced keyboard control — drive the layout itself without a mouse. Opt-in
+ * via `keyboardNavigation` (shared with the default navigation module).
+ *
+ * - **Spatial group focus** (`Ctrl+Shift+Arrows`) — move focus to the visually
+ *   adjacent group via the `adjacentGroupInDirection` geometry primitive.
+ * - **Keyboard docking** (`Ctrl+M`) — arms a two-phase move of the active panel
+ *   with a live drop preview + screen-reader narration:
+ *     1. PICK TARGET — arrows cycle the groups (incl. the panel's own, so a tab
+ *        can be split out); `Enter` selects one.
+ *     2. PICK EDGE — arrows choose a split edge (left/right/top/bottom) or the
+ *        centre (tab-into); `Enter` commits, `Escape` steps back.
+ *   `Escape` from the target phase cancels.
+ *
+ * While a move is in progress it marks the root with
+ * {@link KEYBOARD_MOVE_ATTRIBUTE} so the default navigation listener stands
+ * down and the move keys aren't double-handled.
+ */
+class KeyboardDockingService extends dockviewCore.DockviewCompositeDisposable {
+    constructor(host) {
+        super();
+        this.host = host;
+        this._move = null;
+        // Capture phase, on the document — matches the navigation listener so
+        // edge groups (outside the gridview) are covered.
+        const doc = host.rootElement.ownerDocument;
+        const onKeyDown = (e) => this._onKeyDown(e);
+        doc.addEventListener('keydown', onKeyDown, true);
+        this.addDisposables({ dispose: () => this._exit() }, {
+            dispose: () => doc.removeEventListener('keydown', onKeyDown, true),
+        });
+    }
+    get _enabled() {
+        return !!readKeyboardNavigation(this.host.options);
+    }
+    get _keymap() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // The public `keyboardNavigation.keymap` carries the default-navigation
+        // bindings; this module's bindings are read from the same object when
+        // present (so a consumer can rebind them too).
+        const overrides = ((_b = (_a = readKeyboardNavigation(this.host.options)) === null || _a === void 0 ? void 0 : _a.keymap) !== null && _b !== void 0 ? _b : {});
+        return {
+            focusGroupLeft: (_c = overrides.focusGroupLeft) !== null && _c !== void 0 ? _c : DEFAULT_KEYMAP.focusGroupLeft,
+            focusGroupRight: (_d = overrides.focusGroupRight) !== null && _d !== void 0 ? _d : DEFAULT_KEYMAP.focusGroupRight,
+            focusGroupUp: (_e = overrides.focusGroupUp) !== null && _e !== void 0 ? _e : DEFAULT_KEYMAP.focusGroupUp,
+            focusGroupDown: (_f = overrides.focusGroupDown) !== null && _f !== void 0 ? _f : DEFAULT_KEYMAP.focusGroupDown,
+            dock: (_g = overrides.dock) !== null && _g !== void 0 ? _g : DEFAULT_KEYMAP.dock,
+        };
+    }
+    get _messages() {
+        return dockviewCore.resolveMessages(this.host.options.messages);
+    }
+    _onKeyDown(e) {
+        if (!this._enabled) {
+            return;
         }
-        return obj;
-    }, {});
-    return coreOptions;
-}
-const GridviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const gridviewRef = React.useRef(undefined);
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    const prevProps = React.useRef({});
-    React.useEffect(() => {
-        const changes = {};
-        dockviewCore.PROPERTY_KEYS_GRIDVIEW.forEach((propKey) => {
-            const key = propKey;
-            const propValue = props[key];
-            if (key in props && propValue !== prevProps.current[key]) {
-                changes[key] = propValue;
-            }
-        });
-        if (gridviewRef.current) {
-            gridviewRef.current.updateOptions(changes);
+        if (this._move) {
+            this._onMoveKey(e);
+            return;
         }
-        prevProps.current = props;
-    }, dockviewCore.PROPERTY_KEYS_GRIDVIEW.map((key) => props[key]));
-    React.useEffect(() => {
-        if (!domRef.current) {
-            return () => {
-                // noop
-            };
+        // Only act on events originating inside *this* dockview.
+        if (!(e.target instanceof Node) ||
+            !this.host.rootElement.contains(e.target)) {
+            return;
         }
-        const frameworkOptions = {
-            createComponent: (options) => {
-                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
-            },
-        };
-        const api = dockviewCore.createGridview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions$1(props)), frameworkOptions));
-        const { clientWidth, clientHeight } = domRef.current;
-        api.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api });
+        const keymap = this._keymap;
+        if (matchesBinding(e, keymap.dock)) {
+            this._enterMoveMode(e);
         }
-        gridviewRef.current = api;
-        return () => {
-            gridviewRef.current = undefined;
-            api.dispose();
-        };
-    }, []);
-    React.useEffect(() => {
-        if (!gridviewRef.current) {
-            return;
+        else if (matchesBinding(e, keymap.focusGroupLeft)) {
+            this._consume(e);
+            this._focusGroupInDirection('left');
+        }
+        else if (matchesBinding(e, keymap.focusGroupRight)) {
+            this._consume(e);
+            this._focusGroupInDirection('right');
+        }
+        else if (matchesBinding(e, keymap.focusGroupUp)) {
+            this._consume(e);
+            this._focusGroupInDirection('up');
+        }
+        else if (matchesBinding(e, keymap.focusGroupDown)) {
+            this._consume(e);
+            this._focusGroupInDirection('down');
         }
-        gridviewRef.current.updateOptions({
-            createComponent: (options) => {
-                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
-            },
-        });
-    }, [props.components]);
-    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
-});
-GridviewReact.displayName = 'GridviewComponent';
-
-class PanePanelSection {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            params: parameters.params,
-            api: parameters.api,
-            title: parameters.title,
-            containerApi: parameters.containerApi,
-        });
     }
-    toJSON() {
-        return {
-            id: this.id,
-        };
+    // --- spatial focus ---
+    _focusGroupInDirection(direction) {
+        const current = this.host.activeGroup;
+        if (!current) {
+            return;
+        }
+        // Geometry lives on the host as the shared `adjacentGroupInDirection`
+        // primitive (also public on the api), so mouse and keyboard navigation
+        // agree on what "the group to the left" is.
+        this._focusGroup(this.host.adjacentGroupInDirection(current, direction));
     }
-    update(params) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(params.params);
+    _focusGroup(target) {
+        if (!target) {
+            return;
+        }
+        target.api.setActive();
+        target.model.focusContent();
     }
-    dispose() {
+    _restoreFocus() {
         var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_a = this.host.activeGroup) === null || _a === void 0 ? void 0 : _a.model.focusContent();
     }
-}
-
-function extractCoreOptions(props) {
-    const coreOptions = dockviewCore.PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
-        if (key in props) {
-            obj[key] = props[key];
-        }
-        return obj;
-    }, {});
-    return coreOptions;
-}
-const PaneviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const paneviewRef = React.useRef(undefined);
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    const prevProps = React.useRef({});
-    React.useEffect(() => {
-        const changes = {};
-        dockviewCore.PROPERTY_KEYS_PANEVIEW.forEach((propKey) => {
-            const key = propKey;
-            const propValue = props[key];
-            if (key in props && propValue !== prevProps.current[key]) {
-                changes[key] = propValue;
-            }
-        });
-        if (paneviewRef.current) {
-            paneviewRef.current.updateOptions(changes);
-        }
-        prevProps.current = props;
-    }, dockviewCore.PROPERTY_KEYS_PANEVIEW.map((key) => props[key]));
-    React.useEffect(() => {
-        var _a;
-        if (!domRef.current) {
-            return () => {
-                // noop
-            };
+    // --- keyboard docking (move mode) ---
+    _enterMoveMode(e) {
+        const source = this.host.activePanel;
+        const groups = this.host.groups;
+        if (!source || groups.length === 0) {
+            return;
         }
-        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
-        const frameworkOptions = {
-            createComponent: (options) => {
-                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
-            },
-            createHeaderComponent: (options) => {
-                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
-            },
+        e.preventDefault();
+        e.stopPropagation();
+        // Start on the panel's own group so a single group of tabs can still
+        // split a tab out via the edge phase.
+        const groupIndex = Math.max(0, groups.indexOf(source.group));
+        this._move = {
+            source,
+            groups,
+            groupIndex,
+            phase: 'target',
+            position: 'center',
         };
-        const api = dockviewCore.createPaneview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
-        const { clientWidth, clientHeight } = domRef.current;
-        api.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api });
+        // Signal the navigation module to stand down while the move runs.
+        this.host.rootElement.setAttribute(KEYBOARD_MOVE_ATTRIBUTE, '');
+        this._render();
+    }
+    _onMoveKey(e) {
+        const move = this._move;
+        if (e.key === 'Escape') {
+            this._consume(e);
+            if (move.phase === 'edge') {
+                move.phase = 'target';
+                move.position = 'center';
+                this._render();
+            }
+            else {
+                this._exit();
+                this.host.announce(this._messages.moveCancelled());
+                this._restoreFocus();
+            }
+            return;
         }
-        paneviewRef.current = api;
-        return () => {
-            paneviewRef.current = undefined;
-            api.dispose();
-        };
-    }, []);
-    React.useEffect(() => {
-        if (!paneviewRef.current) {
+        if (e.key === 'Enter') {
+            this._consume(e);
+            if (move.phase === 'target') {
+                move.phase = 'edge';
+                move.position = 'center';
+                this._render();
+            }
+            else {
+                this._commit();
+            }
             return;
         }
-        paneviewRef.current.updateOptions({
-            createComponent: (options) => {
-                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
-            },
-        });
-    }, [props.components]);
-    React.useEffect(() => {
-        var _a;
-        if (!paneviewRef.current) {
+        if (move.phase === 'target') {
+            const n = move.groups.length;
+            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+                this._consume(e);
+                move.groupIndex = (move.groupIndex + 1) % n;
+                this._render();
+            }
+            else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+                this._consume(e);
+                move.groupIndex = (move.groupIndex - 1 + n) % n;
+                this._render();
+            }
             return;
         }
-        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
-        paneviewRef.current.updateOptions({
-            createHeaderComponent: (options) => {
-                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
-            },
-        });
-    }, [props.headerComponents]);
-    React.useEffect(() => {
-        if (!paneviewRef.current) {
-            return () => {
-                // noop
-            };
+        // edge phase
+        const edge = EDGE_FROM_KEY[e.key];
+        if (edge) {
+            this._consume(e);
+            move.position = edge;
+            this._render();
         }
-        const disposable = paneviewRef.current.onDidDrop((event) => {
-            if (props.onDidDrop) {
-                props.onDidDrop(event);
-            }
-        });
-        return () => {
-            disposable.dispose();
-        };
-    }, [props.onDidDrop]);
-    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+        else if (e.key === ' ' || e.key === 'c' || e.key === 'C') {
+            this._consume(e);
+            move.position = 'center';
+            this._render();
+        }
+    }
+    _render() {
+        var _a, _b;
+        const move = this._move;
+        const group = move.groups[move.groupIndex];
+        this._clearPreview();
+        this._preview = this.host.showDropPreview(group, move.position);
+        const name = (_b = (_a = group.activePanel) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : group.id;
+        const m = this._messages;
+        if (move.phase === 'target') {
+            this.host.announce(m.movePickTarget(this._label(move.source), name, move.groupIndex + 1, move.groups.length));
+        }
+        else {
+            this.host.announce(m.movePickEdge(move.position, name));
+        }
+    }
+    _commit() {
+        var _a, _b;
+        const move = this._move;
+        const group = move.groups[move.groupIndex];
+        const position = move.position;
+        const source = move.source;
+        const name = (_b = (_a = group.activePanel) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : group.id;
+        const m = this._messages;
+        this._exit();
+        try {
+            this.host.dockPanel(source, group, position);
+            this.host.announce(m.moveCommitted(this._label(source), name, position));
+        }
+        catch (_c) {
+            this.host.announce(m.moveNotAllowed());
+        }
+        // The move re-renders the grid; pull focus back into the dock so the
+        // keymap keeps working without a click.
+        this._restoreFocus();
+    }
+    _exit() {
+        this._clearPreview();
+        this._move = null;
+        this.host.rootElement.removeAttribute(KEYBOARD_MOVE_ATTRIBUTE);
+    }
+    _clearPreview() {
+        var _a;
+        (_a = this._preview) === null || _a === void 0 ? void 0 : _a.dispose();
+        this._preview = undefined;
+    }
+    _consume(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    _label(panel) {
+        var _a;
+        return (_a = panel.title) !== null && _a !== void 0 ? _a : panel.id;
+    }
+}
+dockviewCore.defineModule({
+    name: 'KeyboardDocking',
+    serviceKey: 'keyboardDockingService',
+    create: (host) => new KeyboardDockingService(host),
+    dependsOn: [AdvancedDnDModule, dockviewCore.LiveRegionModule],
 });
-PaneviewReact.displayName = 'PaneviewComponent';
 
-exports.DockviewDefaultTab = DockviewDefaultTab;
-exports.DockviewReact = DockviewReact;
-exports.GridviewReact = GridviewReact;
-exports.PaneviewReact = PaneviewReact;
-exports.ReactPart = ReactPart;
-exports.ReactPartContext = ReactPartContext;
-exports.SplitviewReact = SplitviewReact;
-exports.isReactComponent = isReactComponent;
-exports.usePortalsLifecycle = usePortalsLifecycle;
+/**
+ * The set of modules provided by this package. `dockview` registers these via
+ * `registerModules(Modules)` so they are available to every component.
+ */
+const Modules = [
+    TabGroupChipsModule,
+    ContextMenuModule,
+    AdvancedDnDModule,
+    AccessibilityModule,
+];
+
+/**
+ * `dockview` is the batteries-included entry point: it re-exports the core API
+ * and registers the separable feature modules so every component gets the full
+ * feature set out of the box. Consumers who want only the core can depend on
+ * `dockview-core` directly.
+ */
+dockviewCore.registerModules(Modules);
+// Mark the public package as loaded so `dockview-core` doesn't warn about
+// direct usage. Purely drives that developer warning — no functional effect.
+dockviewCore.markDockviewPackageLoaded();
+
 Object.keys(dockviewCore).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,