dockview-core 6.6.1 → 7.0.3

package/dist/esm/dockview/accessibilityMessages.js

@@ -0,0 +1,30 @@
+/** Where a drop position lands, phrased for the *edge prompt*. */
+function edgeWhere(position, target) {
+    return position === 'center'
+        ? `Tab into ${target}`
+        : `Split ${position} of ${target}`;
+}
+/** Where a drop position landed, phrased for the *commit* sentence. */
+function committedWhere(position, target) {
+    return position === 'center'
+        ? `docked into ${target}`
+        : `split ${position} of ${target}`;
+}
+export const DEFAULT_MESSAGES = {
+    panelOpened: (title) => `${title} opened`,
+    panelClosed: (title) => `${title} closed`,
+    groupMaximized: (title) => `${title} maximized`,
+    groupRestored: (title) => `${title} restored`,
+    groupFloated: (title) => `${title} floated`,
+    groupDocked: (title) => `${title} docked`,
+    groupPoppedOut: (title) => `${title} opened in a new window`,
+    movePickTarget: (source, target, current, total) => `Moving ${source}. Target ${target}, ${current} of ${total}. Enter to choose where, Escape to cancel.`,
+    movePickEdge: (position, target) => `${edgeWhere(position, target)}. Arrows to change, Enter to confirm, Escape to go back.`,
+    moveCommitted: (source, target, position) => `${source} ${committedWhere(position, target)}.`,
+    moveCancelled: () => `Move cancelled.`,
+    moveNotAllowed: () => `That move is not allowed.`,
+};
+/** Merge an app's partial overrides over the English defaults. */
+export function resolveMessages(overrides) {
+    return overrides ? Object.assign(Object.assign({}, DEFAULT_MESSAGES), overrides) : DEFAULT_MESSAGES;
+}

package/dist/esm/dockview/allModules.d.ts

@@ -0,0 +1,8 @@
+import { DockviewModule } from './modules';
+/**
+ * Internal list of the built-in modules that ship with the core. Registered
+ * automatically by DockviewComponent at construction time; not exported from
+ * the package. Additional modules contributed by sibling packages (via
+ * `registerModules(...)`) are appended at construction.
+ */
+export declare const AllModules: DockviewModule<any>[];

package/dist/esm/dockview/allModules.js

@@ -0,0 +1,22 @@
+import { FloatingGroupModule } from './floatingGroupService';
+import { PopoutWindowModule } from './popoutWindowService';
+import { WatermarkModule } from './watermarkService';
+import { EdgeGroupModule } from './edgeGroupService';
+import { RootDropTargetModule } from './rootDropTargetService';
+import { HeaderActionsModule } from './headerActionsService';
+import { LiveRegionModule } from './liveRegionService';
+/**
+ * Internal list of the built-in modules that ship with the core. Registered
+ * automatically by DockviewComponent at construction time; not exported from
+ * the package. Additional modules contributed by sibling packages (via
+ * `registerModules(...)`) are appended at construction.
+ */
+export const AllModules = [
+    FloatingGroupModule,
+    PopoutWindowModule,
+    WatermarkModule,
+    EdgeGroupModule,
+    RootDropTargetModule,
+    HeaderActionsModule,
+    LiveRegionModule,
+];

package/dist/esm/dockview/components/panel/content.d.ts

@@ -19,6 +19,7 @@ export interface IContentContainer extends IDisposable {
         asActive: boolean;
     }): void;
     refreshFocusState(): void;
+    setLabelledBy(tabElementId: string | undefined): void;
 }
 export declare class ContentContainer extends CompositeDisposable implements IContentContainer {
     private readonly accessor;
@@ -37,6 +38,7 @@ export declare class ContentContainer extends CompositeDisposable implements ICo
     constructor(accessor: DockviewComponent, group: DockviewGroupPanelModel);
     show(): void;
     hide(): void;
+    setLabelledBy(tabElementId: string | undefined): void;
     renderPanel(panel: IDockviewPanel, options?: {
         asActive: boolean;
     }): void;

package/dist/esm/dockview/components/panel/content.js

@@ -1,14 +1,18 @@
-import { CompositeDisposable, MutableDisposable, } from '../../../lifecycle';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
 import { Emitter } from '../../../events';
 import { trackFocus } from '../../../dom';
 import { Droptarget } from '../../../dnd/droptarget';
 import { pointerBackend } from '../../../dnd/backend';
 import { getPanelData } from '../../../dnd/dataTransfer';
+let _contentId = 0;
+/** Stable DOM id so each tab's `aria-controls` can reference its tabpanel. */
+const nextContentId = () => `dv-tabpanel-${_contentId++}`;
 export class ContentContainer extends CompositeDisposable {
     get element() {
         return this._element;
     }
     constructor(accessor, group) {
+        var _a, _b, _c, _d, _e, _f, _g;
         super();
         this.accessor = accessor;
         this.group = group;
@@ -20,8 +24,17 @@ export class ContentContainer extends CompositeDisposable {
         this._element = document.createElement('div');
         this._element.className = 'dv-content-container';
         this._element.tabIndex = -1;
+        // WAI-ARIA Tabs pattern: the single content area per group is the
+        // tabpanel; `aria-labelledby` is pointed at the active tab in
+        // `setLabelledBy` (driven from the group model on activation).
+        this._element.id = nextContentId();
+        this._element.setAttribute('role', 'tabpanel');
         this.addDisposables(this._onDidFocus, this._onDidBlur);
-        const target = group.dropTargetContainer;
+        // Resolve the override anchor dynamically: a group can be relocated
+        // between roots (grid / floating / popout) after construction, and the
+        // popout anchor in particular lives in another window — a value
+        // captured here would mount overlays in the wrong window.
+        const getOverrideTarget = () => { var _a; return (_a = group.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; };
         const canDisplayOverlay = (event, position) => {
             if (this.group.locked === 'no-drop-target' ||
                 (this.group.locked && position === 'center')) {
@@ -33,7 +46,7 @@ export class ContentContainer extends CompositeDisposable {
                 this.group.location.type !== 'floating') {
                 return false;
             }
-            if (data && data.viewId === this.accessor.id) {
+            if ((data === null || data === void 0 ? void 0 : data.viewId) === this.accessor.id) {
                 return true;
             }
             return this.group.canDisplayOverlay(event, position, 'content');
@@ -51,7 +64,8 @@ export class ContentContainer extends CompositeDisposable {
             className: 'dv-drop-target-content',
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             canDisplayOverlay,
-            getOverrideTarget: target ? () => target.model : undefined,
+            getOverrideTarget,
+            overlayModel: (_b = (_a = this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'content'),
         });
         this.pointerDropTarget = pointerBackend.createDropTarget(this.element, {
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
@@ -63,9 +77,18 @@ export class ContentContainer extends CompositeDisposable {
                     : null;
             },
             className: 'dv-drop-target-content',
-            getOverrideTarget: target ? () => target.model : undefined,
+            getOverrideTarget,
+            overlayModel: (_d = (_c = this.accessor).resolveDropOverlayModel) === null || _d === void 0 ? void 0 : _d.call(_c, 'content'),
         });
-        this.addDisposables(this.dropTarget, this.pointerDropTarget);
+        this.addDisposables(this.dropTarget, this.pointerDropTarget, 
+        // Re-apply the app-supplied overlay model when options change.
+        // `{}` resets to the built-in default (all fields optional).
+        (_g = (_f = (_e = this.accessor).onDidOptionsChange) === null || _f === void 0 ? void 0 : _f.call(_e, () => {
+            var _a, _b, _c;
+            const model = (_c = (_b = (_a = this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'content')) !== null && _c !== void 0 ? _c : {};
+            this.dropTarget.setOverlayModel(model);
+            this.pointerDropTarget.setOverlayModel(model);
+        })) !== null && _g !== void 0 ? _g : Disposable.NONE);
     }
     show() {
         this.element.style.display = '';
@@ -73,6 +96,14 @@ export class ContentContainer extends CompositeDisposable {
     hide() {
         this.element.style.display = 'none';
     }
+    setLabelledBy(tabElementId) {
+        if (tabElementId) {
+            this._element.setAttribute('aria-labelledby', tabElementId);
+        }
+        else {
+            this._element.removeAttribute('aria-labelledby');
+        }
+    }
     renderPanel(panel, options = { asActive: true }) {
         var _a, _b, _c, _d;
         const doRender = options.asActive ||
@@ -82,7 +113,7 @@ export class ContentContainer extends CompositeDisposable {
             /**
              * If the currently attached panel is mounted directly to the content then remove it
              */
-            this._element.removeChild(this.panel.view.content.element);
+            this.panel.view.content.element.remove();
             (_b = (_a = this.panel.view.content).onHide) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
         this.panel = panel;
@@ -100,7 +131,7 @@ export class ContentContainer extends CompositeDisposable {
                 break;
             case 'always':
                 if (panel.view.content.element.parentElement === this._element) {
-                    this._element.removeChild(panel.view.content.element);
+                    panel.view.content.element.remove();
                 }
                 container = this.group.renderContainer.attach({
                     panel,
@@ -128,11 +159,11 @@ export class ContentContainer extends CompositeDisposable {
         // noop
     }
     closePanel() {
-        var _a, _b, _c;
+        var _a, _b;
         if (this.panel) {
             if (this.panel.api.renderer === 'onlyWhenVisible') {
-                (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
-                (_c = (_b = this.panel.view.content).onHide) === null || _c === void 0 ? void 0 : _c.call(_b);
+                this.panel.view.content.element.remove();
+                (_b = (_a = this.panel.view.content).onHide) === null || _b === void 0 ? void 0 : _b.call(_a);
             }
         }
         this.panel = undefined;

package/dist/esm/dockview/components/popupService.js

@@ -10,7 +10,7 @@ function isCoarsePrimaryInput(win) {
     return coarse && !fine;
 }
 export class PopupService extends CompositeDisposable {
-    constructor(root, win = window) {
+    constructor(root, win = globalThis.window) {
         super();
         this._active = null;
         this._activeDisposable = new MutableDisposable();

package/dist/esm/dockview/components/tab/tab.js

@@ -5,11 +5,15 @@ import { toggleClass } from '../../../dom';
 import { html5Backend, pointerBackend, } from '../../../dnd/backend';
 import { LongPressDetector } from '../../../dnd/pointer/longPress';
 import { resolveDndCapabilities } from '../../dndCapabilities';
+let _tabId = 0;
+/** Stable DOM id referenced by the tabpanel's `aria-labelledby`. */
+const nextTabId = () => `dv-tab-${_tabId++}`;
 export class Tab extends CompositeDisposable {
     get element() {
         return this._element;
     }
     constructor(panel, accessor, group) {
+        var _a, _b;
         super();
         this.panel = panel;
         this.accessor = accessor;
@@ -30,8 +34,20 @@ export class Tab extends CompositeDisposable {
         const caps = resolveDndCapabilities(this.accessor.options);
         this._element = document.createElement('div');
         this._element.className = 'dv-tab';
-        this._element.tabIndex = 0;
+        // Roving tabindex (WAI-ARIA Tabs pattern): only the active tab is in
+        // the tab order; `setActive` flips this. Inactive tabs are reachable
+        // via arrow keys, handled by the tab strip.
+        this._element.tabIndex = -1;
         this._element.draggable = caps.html5;
+        // WAI-ARIA Tabs pattern. `aria-controls` points at the group's single
+        // tabpanel (the content container); `aria-selected` tracks activation.
+        this._element.id = nextTabId();
+        this._element.setAttribute('role', 'tab');
+        this._element.setAttribute('aria-selected', 'false');
+        const contentContainerId = (_b = (_a = this.group) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.contentContainerId;
+        if (contentContainerId) {
+            this._element.setAttribute('aria-controls', contentContainerId);
+        }
         toggleClass(this.element, 'dv-inactive-tab', true);
         const canDisplayOverlay = (event, position) => {
             var _a;
@@ -39,7 +55,7 @@ export class Tab extends CompositeDisposable {
                 return false;
             }
             const data = getPanelData();
-            if (data && this.accessor.id === data.viewId) {
+            if (this.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
                 // Smooth-reorder takes over the in-flight visual when active,
                 // so individual tab overlays are suppressed for internal drags.
                 if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
@@ -114,13 +130,15 @@ export class Tab extends CompositeDisposable {
         }), addDisposableListener(this._element, 'click', (event) => {
             this._onTabClick.fire(event);
         }), addDisposableListener(this._element, 'contextmenu', (event) => {
-            this.accessor.contextMenuController.show(this.panel, this.group, event);
+            var _a;
+            (_a = this.accessor.contextMenuService) === null || _a === void 0 ? void 0 : _a.show(this.panel, this.group, event);
         }), new LongPressDetector(this._element, {
             onLongPress: (event) => {
+                var _a;
                 // Don't let a subsequent finger move arm a drag on top
                 // of the just-opened menu.
                 this.pointerDragSource.cancelPending();
-                this.accessor.contextMenuController.show(this.panel, this.group, event);
+                (_a = this.accessor.contextMenuService) === null || _a === void 0 ? void 0 : _a.show(this.panel, this.group, event);
             },
         }), this.dropTarget.onDrop((event) => {
             this._onDropped.fire(event);
@@ -131,21 +149,31 @@ export class Tab extends CompositeDisposable {
     setActive(isActive) {
         toggleClass(this.element, 'dv-active-tab', isActive);
         toggleClass(this.element, 'dv-inactive-tab', !isActive);
+        this._element.setAttribute('aria-selected', isActive ? 'true' : 'false');
+        // Roving tabindex anchors to the active tab; arrow-key navigation in
+        // the tab strip moves the rover from there.
+        this._element.tabIndex = isActive ? 0 : -1;
     }
     setContent(part) {
         if (this.content) {
-            this._element.removeChild(this.content.element);
+            this.content.element.remove();
         }
         this.content = part;
         this._element.appendChild(this.content.element);
     }
     _buildOverlayModel() {
-        var _a;
+        var _a, _b, _c;
+        // An app-supplied model (the dropOverlayModel option) takes precedence
+        // over the theme-derived default for this tab.
+        const custom = (_b = (_a = this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'tab', this.group);
+        if (custom) {
+            return custom;
+        }
         // 'line' themes render a 4px insertion strip at the tab edge via the
         // anchor container's small-boundary path.  'fill' themes render a
         // half-width highlighted area, so we disable the small-boundary path
         // entirely (boundary = 0 ⟹ isSmall always false).
-        const smallBoundary = ((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndTabIndicator) === 'line'
+        const smallBoundary = ((_c = this.accessor.options.theme) === null || _c === void 0 ? void 0 : _c.dndTabIndicator) === 'line'
             ? Number.POSITIVE_INFINITY
             : 0;
         return {

package/dist/esm/dockview/components/titlebar/floatingTitleBar.d.ts

@@ -0,0 +1,34 @@
+import { DockviewComponent } from '../../dockviewComponent';
+import { CompositeDisposable } from '../../../lifecycle';
+import { DockviewGroupPanel } from '../../dockviewGroupPanel';
+/**
+ * A dedicated, blank drag handle rendered above a floating group's tab bar.
+ *
+ * It plays the same dual role the tab-bar void container plays today: a plain
+ * pointer-drag moves the floating window (wired by the overlay via
+ * `setupDrag`), while a shift+drag (mouse) or long-press (touch) detaches the
+ * group to redock it into the grid. The redock half is provided by the shared
+ * {@link GroupDragSource}; the move half is owned by the overlay.
+ *
+ * The bar is intentionally contentless — styling is driven entirely through
+ * the `--dv-floating-titlebar-*` theme variables.
+ */
+export declare class FloatingTitleBar extends CompositeDisposable {
+    private readonly accessor;
+    private readonly _element;
+    private readonly dragSource;
+    private _group;
+    private readonly _onDragStart;
+    readonly onDragStart: import("../../../events").Event<PointerEvent | DragEvent>;
+    get element(): HTMLElement;
+    /** The window's current anchor group — the one this bar drags/activates. */
+    get group(): DockviewGroupPanel;
+    /**
+     * Retarget the bar at a new anchor group. Called when the original anchor
+     * leaves a multi-group floating window and another member is promoted, so
+     * the bar keeps activating/redocking a group that actually lives here.
+     */
+    setGroup(group: DockviewGroupPanel): void;
+    constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
+    updateDragAndDropState(): void;
+}

package/dist/esm/dockview/components/titlebar/floatingTitleBar.js

@@ -0,0 +1,65 @@
+import { addDisposableListener, Emitter } from '../../../events';
+import { CompositeDisposable } from '../../../lifecycle';
+import { quasiPreventDefault } from '../../../dom';
+import { GroupDragSource } from './groupDragSource';
+/**
+ * A dedicated, blank drag handle rendered above a floating group's tab bar.
+ *
+ * It plays the same dual role the tab-bar void container plays today: a plain
+ * pointer-drag moves the floating window (wired by the overlay via
+ * `setupDrag`), while a shift+drag (mouse) or long-press (touch) detaches the
+ * group to redock it into the grid. The redock half is provided by the shared
+ * {@link GroupDragSource}; the move half is owned by the overlay.
+ *
+ * The bar is intentionally contentless — styling is driven entirely through
+ * the `--dv-floating-titlebar-*` theme variables.
+ */
+export class FloatingTitleBar extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
+    /** The window's current anchor group — the one this bar drags/activates. */
+    get group() {
+        return this._group;
+    }
+    /**
+     * Retarget the bar at a new anchor group. Called when the original anchor
+     * leaves a multi-group floating window and another member is promoted, so
+     * the bar keeps activating/redocking a group that actually lives here.
+     */
+    setGroup(group) {
+        this._group = group;
+    }
+    constructor(accessor, group) {
+        super();
+        this.accessor = accessor;
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
+        this._group = group;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-floating-titlebar';
+        this.addDisposables(this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
+            this.accessor.doSetGroupActive(this._group);
+        }), 
+        // Shift+pointerdown marks the event so the overlay's
+        // move-the-float drag doesn't fire alongside the HTML5 redock
+        // drag. See VoidContainer for the same disambiguation.
+        addDisposableListener(this._element, 'pointerdown', (e) => {
+            if (e.shiftKey) {
+                quasiPreventDefault(e);
+            }
+        }, true));
+        this.dragSource = new GroupDragSource({
+            element: this._element,
+            accessor: this.accessor,
+            // resolve lazily so the drag source follows anchor reassignment
+            group: () => this._group,
+        });
+        this.addDisposables(this.dragSource, this.dragSource.onDragStart((event) => {
+            this._onDragStart.fire(event);
+        }));
+    }
+    updateDragAndDropState() {
+        this.dragSource.updateDragAndDropState();
+    }
+}

package/dist/esm/dockview/components/titlebar/groupDragSource.d.ts

@@ -0,0 +1,51 @@
+import { DockviewComponent } from '../../dockviewComponent';
+import { CompositeDisposable } from '../../../lifecycle';
+import { DockviewGroupPanel } from '../../dockviewGroupPanel';
+declare const FLOATING_REDOCK_INITIATION_DELAY_MS = 500;
+export interface GroupDragSourceOptions {
+    readonly element: HTMLElement;
+    readonly accessor: DockviewComponent;
+    /**
+     * The group this handle drags. Pass a function when the handle outlives the
+     * group it represents and can be retargeted — e.g. a floating window's
+     * dedicated title bar, whose anchor group is reassigned when the original
+     * anchor leaves a multi-group window. A fixed reference (the tab-bar void
+     * container, which lives inside its own group's DOM) is also accepted.
+     */
+    readonly group: DockviewGroupPanel | (() => DockviewGroupPanel);
+    /**
+     * Whether this element is the floating window's move handle. Only the move
+     * handle needs the floating disambiguation (shift for mouse / long-press
+     * for touch) that keeps the redock gesture from firing alongside the
+     * move-the-float gesture. Other handles on a floating group (e.g. the tab
+     * bar's void container when a dedicated title bar is the move handle) drag
+     * to redock with a plain drag, exactly like a group in the main grid.
+     * Defaults to `() => true`.
+     */
+    readonly isFloatingMoveHandle?: () => boolean;
+}
+/**
+ * The drag-source half of a group drag handle: html5 + pointer drag sources
+ * that publish a group-level `PanelTransfer`, the "Multiple Panels (N)" ghost,
+ * and the floating-group disambiguation that keeps the redock gesture from
+ * firing alongside the overlay's move-the-float gesture.
+ *
+ * Shared by the tab-bar void container and the dedicated floating title bar so
+ * both grab handles redock identically.
+ */
+export declare class GroupDragSource extends CompositeDisposable {
+    private readonly _element;
+    private readonly accessor;
+    private readonly groupAccessor;
+    private readonly html5DragSource;
+    private readonly pointerDragSource;
+    private readonly panelTransfer;
+    private readonly _onDragStart;
+    readonly onDragStart: import("../../../events").Event<PointerEvent | DragEvent>;
+    private readonly isFloatingMoveHandle;
+    private get group();
+    constructor(options: GroupDragSourceOptions);
+    updateDragAndDropState(): void;
+    private getFloatingOverlay;
+}
+export { FLOATING_REDOCK_INITIATION_DELAY_MS };

package/dist/esm/dockview/components/titlebar/groupDragSource.js

@@ -0,0 +1,178 @@
+import { LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
+import { html5Backend, pointerBackend, } from '../../../dnd/backend';
+import { Emitter } from '../../../events';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
+import { toggleClass } from '../../../dom';
+import { resolveDndCapabilities } from '../../dndCapabilities';
+// Floating-group redock via touch: require a deliberate long press so the
+// "move the float around" gesture doesn't double-trigger the redock ghost.
+// Infinity pressTolerance disables the pre-arm flick override; any motion
+// during the wait is treated as drag-the-float, not redock intent.
+const FLOATING_REDOCK_INITIATION_DELAY_MS = 500;
+/**
+ * The drag-source half of a group drag handle: html5 + pointer drag sources
+ * that publish a group-level `PanelTransfer`, the "Multiple Panels (N)" ghost,
+ * and the floating-group disambiguation that keeps the redock gesture from
+ * firing alongside the overlay's move-the-float gesture.
+ *
+ * Shared by the tab-bar void container and the dedicated floating title bar so
+ * both grab handles redock identically.
+ */
+export class GroupDragSource extends CompositeDisposable {
+    // Resolved lazily so a retargetable handle (the floating title bar) always
+    // drags the window's *current* anchor group, not the one captured here.
+    get group() {
+        return this.groupAccessor();
+    }
+    constructor(options) {
+        var _a, _b, _c;
+        super();
+        this.panelTransfer = LocalSelectionTransfer.getInstance();
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
+        this._element = options.element;
+        this.accessor = options.accessor;
+        const group = options.group;
+        this.groupAccessor = typeof group === 'function' ? group : () => group;
+        this.isFloatingMoveHandle =
+            (_a = options.isFloatingMoveHandle) !== null && _a !== void 0 ? _a : (() => true);
+        const caps = resolveDndCapabilities(this.accessor.options);
+        this._element.draggable = caps.html5;
+        toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
+        this.addDisposables(this._onDragStart);
+        const buildMultiPanelsGhost = () => {
+            const ghostEl = document.createElement('div');
+            const style = globalThis.getComputedStyle(this._element);
+            const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
+            const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
+            ghostEl.style.backgroundColor = bgColor;
+            ghostEl.style.color = color;
+            ghostEl.style.padding = '2px 8px';
+            ghostEl.style.height = '24px';
+            ghostEl.style.fontSize = '11px';
+            ghostEl.style.lineHeight = '20px';
+            ghostEl.style.borderRadius = '12px';
+            ghostEl.style.whiteSpace = 'nowrap';
+            ghostEl.style.boxSizing = 'border-box';
+            // HTML5 setDragImage snapshots the element as appended to the
+            // document; a default block-level div would stretch to the
+            // body's width and render as a viewport-wide bar.
+            ghostEl.style.display = 'inline-block';
+            ghostEl.textContent = `Multiple Panels (${this.group.size})`;
+            return ghostEl;
+        };
+        const buildGhostSpec = () => {
+            var _a, _b;
+            // The custom-ghost resolution (createGroupDragGhostComponent) is
+            // owned by the AdvancedDnD module; core keeps the default chip and
+            // falls back to it when no custom ghost is produced (incl. when
+            // the module is absent).
+            const customGhost = (_b = (_a = this.accessor).buildGroupDragGhost) === null || _b === void 0 ? void 0 : _b.call(_a, this.group);
+            if (customGhost) {
+                return customGhost;
+            }
+            return {
+                element: buildMultiPanelsGhost(),
+                offsetX: 30,
+                offsetY: -10,
+            };
+        };
+        const sharedDragOptions = {
+            getData: () => {
+                this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
+                return {
+                    dispose: () => {
+                        this.panelTransfer.clearData(PanelTransfer.prototype);
+                    },
+                };
+            },
+            createGhost: buildGhostSpec,
+            onDragStart: (event) => {
+                this._onDragStart.fire(event);
+            },
+        };
+        this.html5DragSource = html5Backend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.html5, isCancelled: (event) => {
+                // HTML5: when this element is the floating window's move
+                // handle, redock needs shift+drag (otherwise click-and-drag
+                // conflicts with moving the float). A non-move-handle (e.g. the
+                // void container when a title bar moves the float) redocks with
+                // a plain drag, like a group in the main grid.
+                if (this.group.api.location.type === 'floating' &&
+                    this.isFloatingMoveHandle() &&
+                    !event.shiftKey) {
+                    return true;
+                }
+                if (this.group.api.location.type === 'edge' &&
+                    this.group.size === 0) {
+                    return true;
+                }
+                return false;
+            } }));
+        // Only the move handle needs the touch disambiguation; other handles
+        // redock with the normal grid press behaviour.
+        const isFloating = () => {
+            var _a, _b, _c;
+            return ((_c = (_b = (_a = this.group) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.location) === null || _c === void 0 ? void 0 : _c.type) === 'floating' &&
+                this.isFloatingMoveHandle();
+        };
+        this.pointerDragSource = pointerBackend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.pointer, touchOnly: !caps.pointerHandlesMouse, 
+            // Floating groups share this element with the overlay's
+            // move-the-float drag. Without a longer hold + tolerance
+            // override, both gestures commit simultaneously and the
+            // user sees the float follow their finger *and* a ghost.
+            touchInitiationDelay: () => isFloating() ? FLOATING_REDOCK_INITIATION_DELAY_MS : 250, pressTolerance: () => (isFloating() ? Infinity : 8), isCancelled: () => {
+                if (!resolveDndCapabilities(this.accessor.options).pointer) {
+                    return true;
+                }
+                // Pointer: long-press IS the deliberate gesture, so
+                // floating groups don't need the shift gate.
+                if (this.group.api.location.type === 'edge' &&
+                    this.group.size === 0) {
+                    return true;
+                }
+                return false;
+            }, onDragStart: (event) => {
+                var _a;
+                // Redock just committed — abort any in-flight overlay
+                // move so the float stops following the finger while
+                // the ghost takes over.
+                (_a = this.getFloatingOverlay()) === null || _a === void 0 ? void 0 : _a.cancelPendingDrag();
+                this._onDragStart.fire(event);
+            } }));
+        // Mirror direction: once the overlay's move-the-float gesture has
+        // actually moved something, cancel the pending redock arm so the
+        // ghost doesn't appear mid-drag if the user holds past 500ms.
+        const overlayMoveSub = new MutableDisposable();
+        const refreshOverlayMoveSub = () => {
+            const overlay = this.getFloatingOverlay();
+            overlayMoveSub.value = overlay
+                ? overlay.onDidStartMoving(() => {
+                    this.pointerDragSource.cancelPending();
+                })
+                : Disposable.NONE;
+        };
+        refreshOverlayMoveSub();
+        this.addDisposables(overlayMoveSub);
+        const locationChange = (_c = (_b = this.group) === null || _b === void 0 ? void 0 : _b.api) === null || _c === void 0 ? void 0 : _c.onDidLocationChange;
+        if (locationChange) {
+            this.addDisposables(locationChange(refreshOverlayMoveSub));
+        }
+        this.addDisposables(this.html5DragSource, this.pointerDragSource);
+    }
+    updateDragAndDropState() {
+        const caps = resolveDndCapabilities(this.accessor.options);
+        this._element.draggable = caps.html5;
+        toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
+        this.html5DragSource.setDisabled(!caps.html5);
+        this.pointerDragSource.setDisabled(!caps.pointer);
+        this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+    }
+    getFloatingOverlay() {
+        var _a, _b;
+        if (!this.group) {
+            return undefined;
+        }
+        return (_b = (_a = this.accessor.floatingGroups) === null || _a === void 0 ? void 0 : _a.find((fg) => fg.group === this.group)) === null || _b === void 0 ? void 0 : _b.overlay;
+    }
+}
+export { FLOATING_REDOCK_INITIATION_DELAY_MS };