dockview-core 8.3.0 → 8.4.0

package/dist/cjs/api/component.api.d.ts

@@ -1,4 +1,6 @@
 import { DockviewActivePanelChangeEvent, DockviewPanelPinnedChangeEvent, DockviewLayoutMutationEvent, DockviewMaximizedGroupChangeEvent, DockviewPopoutGroupOptions, FloatingGroupOptions, GroupNavigationDirection, IDockviewComponent, MovePanelEvent, PopoutGroup, PopoutGroupChangePositionEvent, PopoutGroupChangeSizeEvent, SerializedDockview } from '../dockview/dockviewComponent';
+import { PopoutWindowEvent, PopoutWindowFailure } from '../popoutWindow';
+import { DndCapabilities } from '../dockview/dndCapabilities';
 import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, MovementOptions, SmartGuidesOptions } from '../dockview/options';
 import { DockviewMessages } from '../dockview/accessibilityMessages';
 import { Parameters } from '../panel/types';
@@ -449,6 +451,13 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      */
     get onWillDragPanel(): Event<TabDragEvent>;
     get onUnhandledDragOver(): Event<DockviewDndOverlayEvent>;
+    /**
+     * The drag-and-drop backends currently live: `dndStrategy` resolved against
+     * this device, which `'auto'` reads from the primary input device. Only an
+     * HTML5 drag can leave the window it started in, so check `html5` before
+     * relying on a drag between a popout window and the main window.
+     */
+    get dndCapabilities(): DndCapabilities;
     get onDidPopoutGroupSizeChange(): Event<PopoutGroupChangeSizeEvent>;
     get onDidPopoutGroupPositionChange(): Event<PopoutGroupChangePositionEvent>;
     /**
@@ -463,7 +472,23 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      * {@link onDidAddPopoutGroup}; not fired during component disposal.
      */
     get onDidRemovePopoutGroup(): Event<PopoutGroup>;
-    get onDidOpenPopoutWindowFail(): Event<void>;
+    /**
+     * Fires when a popout window could not be used, carrying which way it
+     * failed: the URL was refused, the browser blocked the window, the host
+     * returned a window whose document the opener cannot reach, or it closed
+     * before loading. The group stays in (or returns to) the main grid.
+     */
+    get onDidOpenPopoutWindowFail(): Event<PopoutWindowFailure>;
+    /**
+     * Fires as dockview lets go of a popout window, while that window is still
+     * open, carrying its live `Window` handle. Covers every popout the component
+     * opened and every reason for closing one, disposal included;
+     * {@link onDidAddPopoutGroup} is the opening half.
+     *
+     * For hosts that own their windows: in a desktop webview the page's own
+     * `close()` can be a no-op, so the shell has to be told.
+     */
+    get onWillClosePopoutWindow(): Event<PopoutWindowEvent>;
     /** Enumerate the popout groups currently open in their own windows. */
     getPopouts(): PopoutGroup[];
     /**

package/dist/cjs/dismissableLayer.d.ts

@@ -8,13 +8,20 @@ export interface DismissableLayerOptions {
     /** A pointerdown landed *inside* the layer (not a dismissal). Use it to
      *  mark interaction (e.g. make a transient layer sticky). */
     readonly onInsidePointerDown?: (event: PointerEvent) => void;
-    /** Whether a pointer event is inside the layer. Defaults to a DOM
-     *  `contains` check against {@link DismissableLayerOptions.elements}.
+    /** Whether a pointer event is inside the layer. Defaults to checking the
+     *  event's composed path against {@link DismissableLayerOptions.elements}.
      *  Provide this for geometry-based hit testing (e.g. when the visible
      *  content is a sibling overlay stacked on top of the layer). */
     readonly isInside?: (event: PointerEvent) => boolean;
     /** Elements treated as "inside" by the default contains check. */
     readonly elements?: () => HTMLElement[];
+    /** An element the layer is anchored to, used only to locate the shadow
+     *  roots it lives in for {@link focusOut}. `elements` already provides
+     *  that, so pass this when the layer has none — a layer that decides
+     *  inside/outside purely by geometry ({@link isInside} /
+     *  {@link isFocusInside}) would otherwise never see a focus move *within*
+     *  a shadow root, since such a move never reaches the window. */
+    readonly anchor?: () => Node | null | undefined;
     /** Dismiss on `Escape` (default `true`). */
     readonly escape?: boolean;
     /** Extra keys that also dismiss (e.g. `'Enter'`). */
@@ -32,9 +39,14 @@ export interface DismissableLayerOptions {
      *  `false`): the "slide back on focus loss" behaviour. */
     readonly focusOut?: boolean;
     /** Whether a newly-focused element is inside the layer (for
-     *  {@link focusOut}). Defaults to a `contains` check against
-     *  {@link elements}. Provide this for geometry-based testing when the
-     *  content is a sibling overlay stacked on top of the layer. */
+     *  {@link focusOut}). Receives the target as seen from the layer's own
+     *  tree — the one holding {@link anchor}, else the first of
+     *  {@link elements} — so a predicate can always be written against the
+     *  elements it was given: focus inside a *nested* web component arrives as
+     *  that component's host, while focus in the layer's own shadow root
+     *  arrives as the real element. Defaults to checking the event's composed
+     *  path against {@link elements}. Provide this for geometry-based testing
+     *  when the content is a sibling overlay stacked on top of the layer. */
     readonly isFocusInside?: (focused: Element) => boolean;
     /** Listen in the capture phase (default `false`). Use capture when the
      *  layer must see the event before content handlers stop its propagation. */
@@ -47,8 +59,8 @@ export interface DismissableLayerOptions {
  * peeks): while it lives it watches a configurable set of dismiss signals
  * (Escape / extra keys, outside-pointerdown with an optional grace window,
  * window resize, focus moving outside) and calls `onDismiss`. Inside/outside is
- * decided by an `isInside` predicate (geometry) or a `contains` check against
- * `elements`. Dispose to detach every listener.
+ * decided by an `isInside` predicate (geometry) or by checking the event's
+ * composed path against `elements`. Dispose to detach every listener.
  *
  * It owns only the *signals*, not the surface element, its position, or any
  * hover/keep-open policy, so callers keep their own element lifecycle and

package/dist/cjs/dnd/droptarget.d.ts

@@ -123,6 +123,13 @@ export interface DroptargetOptions {
      * `undefined` (the default) uses the built-in cursor-quadrant logic.
      */
     getPositionResolver?: () => PositionResolver | undefined;
+    /**
+     * Pointer backend only: skip this target during hit-testing so the ancestor
+     * walk continues past it, making an element a hit-test stop for some
+     * payloads and transparent for the rest. The HTML5 backend ignores it —
+     * propagation there is the DOM event flow's job.
+     */
+    isHitTestTransparent?: () => boolean;
 }
 /**
  * Backend-agnostic drop target. Both the HTML5 `Droptarget` and the pointer
@@ -136,6 +143,10 @@ export interface IDropTarget extends IDisposable {
     disabled: boolean;
     setTargetZones(zones: Position[]): void;
     setOverlayModel(model: DroptargetOverlayModel): void;
+    /** Drop whatever this target is showing, for a consumer that commits a
+     *  drop this target never sees (a capturing listener that stops the
+     *  event, say) and so has to tear the overlay down itself. */
+    clearOverlay(): void;
 }
 export declare class Droptarget extends CompositeDisposable implements IDropTarget {
     private readonly element;

package/dist/cjs/dnd/ghost.d.ts

@@ -2,4 +2,7 @@ export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement:
     x?: number;
     y?: number;
     ownerDocument?: Document;
+    /** The drag source. When it is inside a shadow root the ghost is
+     *  appended there, so the styles scoped to that root apply. */
+    owner?: Node;
 }): void;

package/dist/cjs/dnd/pointer/pointerDragController.d.ts

@@ -36,6 +36,7 @@ export declare class PointerDragController extends CompositeDisposable {
     private _upListener;
     private _cancelListener;
     private _iframeShield;
+    private _selectionShield;
     private _onDragMoveCallback?;
     private _onDragEndCallback?;
     private readonly _onDragStart;

package/dist/cjs/dnd/pointer/pointerDragSource.d.ts

@@ -40,6 +40,7 @@ export declare class PointerDragSource extends CompositeDisposable {
     private _pendingUpListener;
     private _pendingCancelListener;
     private _armTimer;
+    private _selectionShield;
     private _armed;
     private _startX;
     private _startY;

package/dist/cjs/dnd/pointer/pointerDropTarget.d.ts

@@ -16,6 +16,8 @@ export interface PointerDropTargetOptions {
      * change at runtime; `undefined` (default) uses the cursor-quadrant logic.
      */
     getPositionResolver?: () => PositionResolver | undefined;
+    /** See `DroptargetOptions.isHitTestTransparent`. */
+    isHitTestTransparent?: () => boolean;
 }
 /** Pointer-driven counterpart to `Droptarget` with identical visual output. */
 export declare class PointerDropTarget extends CompositeDisposable implements IDropTarget {
@@ -35,6 +37,7 @@ export declare class PointerDropTarget extends CompositeDisposable implements ID
     set disabled(value: boolean);
     get state(): Position | undefined;
     constructor(element: HTMLElement, options: PointerDropTargetOptions);
+    clearOverlay(): void;
     setTargetZones(zones: Position[]): void;
     setOverlayModel(model: DroptargetOverlayModel): void;
     dispose(): void;

package/dist/cjs/dnd/pointer/pointerGhost.d.ts

@@ -9,8 +9,9 @@ export interface PointerGhostOptions {
     /** Default 0.8. */
     opacity?: number;
     /**
-     * Source element whose `ownerDocument.body` hosts the ghost. Pass it for
-     * popout-window drags so the ghost renders in the popout's document.
+     * Source element whose document body (or shadow root, when it lives in
+     * one) hosts the ghost. Pass it for popout-window drags so the ghost
+     * renders in the popout's document.
      */
     owner?: Element;
 }
@@ -21,6 +22,9 @@ export interface PointerGhostOptions {
  */
 export declare class PointerGhost implements IDisposable {
     private readonly element;
+    /** What is positioned and attached: `element`, or a top-layer wrapper
+     *  around it when the ghost lives in a shadow root. */
+    private readonly container;
     private readonly offsetX;
     private readonly offsetY;
     private _disposed;

package/dist/cjs/dnd/pointer/types.d.ts

@@ -13,4 +13,9 @@ export interface IPointerDropTargetHandle {
     handleDragOver(event: PointerDragEvent): void;
     handleDragLeave(): void;
     handleDrop(event: PointerDragEvent): void;
+    /**
+     * Skip this target during hit-testing so the ancestor walk continues past
+     * it. A target that merely declines on drop still shadows its ancestors.
+     */
+    isHitTestTransparent?(): boolean;
 }

package/dist/cjs/dockview/components/titlebar/tabGroups.d.ts

@@ -6,7 +6,7 @@ import { DockviewHeaderDirection } from '../../options';
 import { Tab } from '../tab/tab';
 import { ITabGroup } from '../../tabGroup';
 import { ITabGroupChipRenderer } from '../../framework';
-import { Droptarget, DroptargetEvent } from '../../../dnd/droptarget';
+import { DroptargetEvent, IDropTarget } from '../../../dnd/droptarget';
 export interface TabGroupManagerContext {
     readonly group: DockviewGroupPanel;
     readonly accessor: DockviewComponent;
@@ -39,7 +39,8 @@ interface ChipRendererEntry {
     /** Disposes the two drag sources + their shared dragend listener. */
     dragSourcesDisposable: IDisposable | undefined;
     disposable: IDisposable;
-    dropTarget: Droptarget;
+    dropTarget: IDropTarget;
+    pointerDropTarget: IDropTarget;
 }
 export declare class TabGroupManager {
     private readonly _ctx;
@@ -66,7 +67,15 @@ export declare class TabGroupManager {
     refreshAccents(): void;
     positionAllChips(): void;
     updateDirection(): void;
-    snapshotChipWidths(): Map<string, number>;
+    /**
+     * Drop any overlay the chips are showing. A group move is committed by a
+     * capturing listener on the tabs list that stops the event, so the chip
+     * target under the cursor never sees the drop that would clear its own.
+     */
+    clearChipDropOverlays(): void;
+    /** Each chip's extent along the strip's main axis: width for a horizontal
+     *  header, height for a vertical one. */
+    snapshotChipSizes(): Map<string, number>;
     positionUnderlines(): void;
     trackUnderlines(): void;
     setGroupDragImage(event: DragEvent, tabGroup: ITabGroup, chipEl: HTMLElement): void;

package/dist/cjs/dockview/components/titlebar/tabReorderController.d.ts

@@ -9,23 +9,43 @@ export interface TabAnimationState {
     sourceTabId: string;
     sourceIndex: number;
     tabPositions: Map<string, DOMRect>;
-    /** Group-chip widths keyed by group ID, captured before collapse */
-    chipPositions: Map<string, number>;
+    /** Group-chip main-axis sizes keyed by group ID, captured before collapse */
+    chipSizes: Map<string, number>;
     currentInsertionIndex: number | null;
     targetTabGroupId: string | null;
     /** When set, the drag source is a group chip (entire group drag) */
     sourceTabGroupId: string | null;
     /** Cached panel IDs of the source group (avoids repeated lookups during drag) */
     sourceGroupPanelIds: Set<string> | null;
-    /** Width of the group chip, captured before collapse */
-    sourceChipWidth: number;
-    /** Distance from cursor to the left edge of the drag image */
-    cursorOffsetFromDragLeft: number;
-    /** Total width of the dragged content (chip + tabs for groups, tab width for singles) */
-    sourceGapWidth: number;
-    /** Left edge of the tabs container at drag start */
-    containerLeft: number;
+    /** Main-axis size of the group chip, captured before collapse */
+    sourceChipSize: number;
+    /** Distance from the cursor to the leading edge of the drag image */
+    cursorOffsetFromDragStart: number;
+    /** Total main-axis size of the dragged content (chip + tabs for groups,
+     *  the tab's own size for singles) */
+    sourceGapSize: number;
+    /** Leading edge of the tabs container at drag start */
+    containerStart: number;
 }
+/**
+ * Main-axis extent of a rect. Tabs flow along x in a horizontal header
+ * (top/bottom) and along y in a vertical one (the left/right edge groups),
+ * so the reorder math reads every size through this.
+ */
+export declare function mainAxisSize(rect: {
+    width: number;
+    height: number;
+}, direction: DockviewHeaderDirection): number;
+/** Leading edge of a rect along the main axis. */
+export declare function mainAxisStart(rect: {
+    left: number;
+    top: number;
+}, direction: DockviewHeaderDirection): number;
+/** A cursor position projected onto the main axis. */
+export declare function mainAxisCursor(event: {
+    clientX: number;
+    clientY: number;
+}, direction: DockviewHeaderDirection): number;
 export interface ITabReorderHost {
     /** Live tab list (the `_tabs` array of the owning `Tabs`). */
     readonly tabItems: IValueDisposable<Tab>[];
@@ -88,7 +108,16 @@ export declare class TabReorderController extends CompositeDisposable {
      */
     clearExternalAnimState(): void;
     snapshotTabPositions(): Map<string, DOMRect>;
-    private getAverageTabWidth;
+    /** Main-axis extent of a rect for this header's orientation. */
+    private _mainAxisSize;
+    /** Main-axis leading edge of a rect for this header's orientation. */
+    private _mainAxisStart;
+    /** The cursor coordinate along the main axis. */
+    private _mainAxisCoord;
+    /** The margin that opens the insertion gap. It must run along the main
+     *  axis, so a vertical header pushes tabs down rather than sideways. */
+    private get _gapMarginProperty();
+    private getAverageTabSize;
     /**
      * Pointer-event entry point. The HTML5 path enters via the per-element
      * `dragover` listener; this one hit-tests the global pointer-drag
@@ -161,16 +190,18 @@ export declare class TabReorderController extends CompositeDisposable {
      */
     private _buildFirstPanelToGroupMap;
     /**
-     * Walk the tabs left-to-right by their original widths and return the
-     * insertion slot for the drag image's left edge (null if no slot fits).
+     * Walk the tabs in flow order by their original main-axis sizes and return
+     * the insertion slot for the drag image's leading edge (null if no slot
+     * fits).
      */
     private _computeDragOverInsertionIndex;
     /**
-     * Rebuild the accumulated original width up to `insertionIndex`, walking the
-     * tabs exactly the way the accumulation loop does, so callers know the
-     * original right edge of the chip (if any) that precedes the insertion slot.
+     * Rebuild the accumulated original main-axis size up to `insertionIndex`,
+     * walking the tabs exactly the way the accumulation loop does, so callers
+     * know the original trailing edge of the chip (if any) that precedes the
+     * insertion slot.
      */
-    private _accumulatedWidthUpTo;
+    private _accumulatedSizeUpTo;
     /**
      * Given a raw insertion index, snap it out of / into any tab group it falls
      * within and resolve the target group (if the drop should merge into one).
@@ -246,9 +277,9 @@ export declare class TabReorderController extends CompositeDisposable {
      */
     uncollapseSourceTab(sourceTabId: string): void;
     applyDragOverTransforms(skipTransition?: boolean): void;
-    /** Gap width for the current drag: the whole group's span for a group
-     *  drag, otherwise the source tab's own width. */
-    private _computeGapWidth;
+    /** Gap size for the current drag: the whole group's span for a group
+     *  drag, otherwise the source tab's own main-axis size. */
+    private _computeGapSize;
     /**
      * When the insertion lands at or before a group's first tab, the chip is
      * shifted so the gap appears before the entire group. Returns that chip
@@ -270,7 +301,7 @@ export declare class TabReorderController extends CompositeDisposable {
     private _applyGapMargins;
     /** Pick the correct shifting class for tabs vs chips. */
     private _shiftingClass;
-    /** Apply a margin-left value to an element, optionally bypassing CSS
+    /** Apply the main-axis gap margin to an element, optionally bypassing CSS
      *  transitions for instant positioning. */
     private _setMargin;
     /** Clear an element's gap margin, animating it back to zero unless

package/dist/cjs/dockview/components/titlebar/tabs.d.ts

@@ -207,6 +207,10 @@ export declare class Tabs extends CompositeDisposable implements ITabReorderHost
      * (when the source tab is currently to the left of the target slot, its
      * removal shifts the insertion index down by one). Always clears
      * `targetTabGroupId` so the dropped tab lands outside the group.
+     *
+     * A chip dropped on a chip is a group move: the panel path would route it
+     * through the cross-group machinery, which rebuilds the tab group under a
+     * new id.
      */
     private _handleChipDrop;
     /**

package/dist/cjs/dockview/dndCapabilities.d.ts

@@ -1,9 +1,8 @@
 import { DockviewOptions } from './options';
 /**
- * Internal mapping of the user-facing `dndStrategy` option into the
- * per-backend capability flags consumed by drag-source / drop-target
- * construction sites. Not part of the public API; consumers only see
- * the `dndStrategy` option itself.
+ * Which drag-and-drop backends are live: the `dndStrategy` option resolved
+ * against the device. Read by the drag-source / drop-target construction sites,
+ * and exposed to consumers as `api.dndCapabilities`.
  */
 export interface DndCapabilities {
     /** HTML5 drag/drop wiring active (draggable attr, dragstart). */

package/dist/cjs/dockview/dockviewComponent.d.ts

@@ -1,5 +1,6 @@
 import { SerializedGridObject, Gridview, SerializedGridview } from '../gridview/gridview';
 import { DroptargetOverlayModel, Position, PositionResolver } from '../dnd/droptarget';
+import { DndCapabilities } from './dndCapabilities';
 import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { IDisposable } from '../lifecycle';
 import { Event, Emitter } from '../events';
@@ -22,6 +23,7 @@ import { IKeyboardNavigationHost, IAdvancedDnDHost, IAutoHideEdgeGroupHost, ICon
 import { IHeaderActionsHost } from './headerActionsService';
 import { AnchoredBox, AnchorPosition, Box } from '../types';
 import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlay/overlayRenderContainer';
+import { PopoutWindowEvent, PopoutWindowFailure } from '../popoutWindow';
 import { PopupService } from './components/popupService';
 import { IRootDropTargetHost } from './rootDropTargetService';
 import { ILiveRegionHost } from './liveRegionService';
@@ -41,14 +43,16 @@ export interface DockviewPopoutGroupOptions {
      * Defaults to `/popout.html` if not provided
      */
     popoutUrl?: string;
-    onDidOpen?: (event: {
-        id: string;
-        window: Window;
-    }) => void;
-    onWillClose?: (event: {
-        id: string;
-        window: Window;
-    }) => void;
+    /**
+     * Called once this popout's window has opened, before its group is moved in.
+     * Scoped to this call; `onDidAddPopoutGroup` covers every popout.
+     */
+    onDidOpen?: (event: PopoutWindowEvent) => void;
+    /**
+     * Called while this popout's window is still open, as dockview lets go of
+     * it. Scoped to this call; `onWillClosePopoutWindow` covers every popout.
+     */
+    onWillClose?: (event: PopoutWindowEvent) => void;
 }
 interface DockviewPopoutGroupOptionsInternal extends DockviewPopoutGroupOptions {
     referenceGroup?: DockviewGroupPanel;
@@ -251,7 +255,8 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidPopoutGroupPositionChange: Event<PopoutGroupChangePositionEvent>;
     readonly onDidAddPopoutGroup: Event<PopoutGroup>;
     readonly onDidRemovePopoutGroup: Event<PopoutGroup>;
-    readonly onDidOpenPopoutWindowFail: Event<void>;
+    readonly onDidOpenPopoutWindowFail: Event<PopoutWindowFailure>;
+    readonly onWillClosePopoutWindow: Event<PopoutWindowEvent>;
     getPopouts(): PopoutGroup[];
     readonly onDidCreateTabGroup: Event<DockviewTabGroupChangeEvent>;
     readonly onDidDestroyTabGroup: Event<DockviewTabGroupChangeEvent>;
@@ -260,6 +265,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidTabGroupChange: Event<DockviewTabGroupChangeEvent>;
     readonly onDidTabGroupCollapsedChange: Event<DockviewTabGroupCollapsedChangeEvent>;
     readonly options: DockviewComponentOptions;
+    readonly dndCapabilities: DndCapabilities;
     readonly tabGroupColorPalette: TabGroupColorPalette;
     updateOptions(options: DockviewOptions): void;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
@@ -379,7 +385,11 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
      *  state (e.g. a live region in each popout). */
     readonly onDidChangePopouts: Event<void>;
     private readonly _onDidOpenPopoutWindowFail;
-    readonly onDidOpenPopoutWindowFail: Event<void>;
+    readonly onDidOpenPopoutWindowFail: Event<PopoutWindowFailure>;
+    private readonly _onWillClosePopoutWindow;
+    /** Fires for every popout window this component opened, however it was
+     *  opened, while that window is still there. See `DockviewApi`. */
+    readonly onWillClosePopoutWindow: Event<PopoutWindowEvent>;
     private readonly _onDidStartFloatingGroupDrag;
     /** Fires with the dragged group when a floating group move-drag first moves.
      *  Consumed by the Smart Guides service (`ISmartGuidesHost`) to start each
@@ -434,6 +444,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get orientation(): Orientation;
     get totalPanels(): number;
     get panels(): IDockviewPanel[];
+    /** `dndStrategy` resolved against this device; see `DockviewApi`. */
+    get dndCapabilities(): DndCapabilities;
     get options(): DockviewComponentOptions;
     get tabGroupColorPalette(): TabGroupColorPalette;
     get activePanel(): IDockviewPanel | undefined;
@@ -647,10 +659,11 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     getPopoutWindows(): Window[];
     private _doAddPopoutGroup;
     /**
-     * The popout window was blocked (e.g. by the browser's popup blocker,
-     * common when restoring popouts on load). Fall back gracefully so the
-     * group(s) end up valid and visible in the main grid rather than as
-     * orphans that later crash clear()/remove().
+     * The popout window never opened - blocked by the browser's popup blocker
+     * (common when restoring popouts on load), or refused outright because its
+     * URL failed the same-origin guard. Fall back gracefully so the group(s)
+     * end up valid and visible in the main grid rather than as orphans that
+     * render nothing and later crash clear()/remove().
      */
     private handleBlockedPopout;
     /**
@@ -671,9 +684,11 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private disposePopoutWindow;
     addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, options?: FloatingGroupOptionsInternal): void;
     private _doAddFloatingGroup;
+    private removeGroupIfEmpty;
     /**
-     * Build an empty gridview configured to match the main grid's styling, for
-     * hosting a nested layout inside a floating or popout window.
+     * Build an empty gridview configured to match the main grid's styling and
+     * resize behaviour, for hosting a nested layout inside a floating or popout
+     * window.
      */
     private createNestedGridview;
     /**

package/dist/cjs/dockview/dockviewShell.d.ts

@@ -152,6 +152,18 @@ export declare class ShellManager implements IDisposable {
      * Throws if a group at this position is already registered.
      */
     addEdgeView(position: EdgeGroupPosition, options: EdgeGroupOptions, group: IEdgeGroupHost): EdgeGroupView;
+    /**
+     * Lay out from the shell's current size.
+     *
+     * The ResizeObserver above only reports asynchronously, so between
+     * construction and its first callback the shell believes it has no size -
+     * and any layout built in that window (panels added straight after
+     * `createDockview`, say) resolves its sizes against zero and collapses to
+     * minimums, permanently. Seeding the size synchronously gives that work
+     * the real dimensions. Same guards as the observer: a detached or hidden
+     * shell has no size worth propagating.
+     */
+    layoutFromElement(): void;
     layout(width: number, height: number): void;
     /**
      * Called when the active theme changes. Updates splitview margins and

package/dist/cjs/dockview/options.d.ts

@@ -293,6 +293,19 @@ export interface DockviewOptions {
      * Call `.layout(width, height)` to manually resize the container.
      */
     disableAutoResizing?: boolean;
+    /**
+     * Distribute the available space proportionally between groups when the
+     * container is resized, preserving each group's share of the layout.
+     *
+     * When `false` the extra (or missing) space is absorbed by the last group
+     * in each row/column instead, leaving the other splitters where they are -
+     * the behaviour found in VS Code. If the last group reaches its minimum or
+     * maximum size, the remainder moves on to the group before it.
+     *
+     * Applies to floating and popout windows too, and can be changed at runtime
+     * with `updateOptions`; `undefined` restores the default. Default: `true`.
+     */
+    proportionalLayout?: boolean;
     hideBorders?: boolean;
     singleTabMode?: 'fullwidth' | 'default';
     disableFloatingGroups?: boolean;

package/dist/cjs/dockview/popoutWindowService.d.ts

@@ -55,7 +55,7 @@ export interface IPopoutWindowService extends IDisposable {
     findReferenceGroupId(group: DockviewGroupPanel): string | undefined;
     observeGridviewSize(popoutWindow: PopoutWindow, gridview: Gridview, overlayRenderContainer: OverlayRenderContainer): IDisposable | undefined;
     readonly restorationPromise: Promise<void>;
-    scheduleRestoration(delayMs: number, work: () => void, onCancel?: () => void): Promise<void>;
+    scheduleRestoration(delayMs: number, work: () => void | Promise<unknown>, onCancel?: () => void): Promise<void>;
     finishRestoration(promises: Promise<void>[]): void;
     cancelPendingRestorations(): void;
     serialize(): SerializedPopoutGroup[];
@@ -90,7 +90,13 @@ export declare class PopoutWindowService implements IPopoutWindowService {
      * the popout realm has no ResizeObserver (e.g. jsdom).
      */
     observeGridviewSize(popoutWindow: PopoutWindow, gridview: Gridview, overlayRenderContainer: OverlayRenderContainer): IDisposable | undefined;
-    scheduleRestoration(delayMs: number, work: () => void, onCancel?: () => void): Promise<void>;
+    /**
+     * Runs `work` after `delayMs`, resolving once it has finished. Work that
+     * returns a promise is awaited, so a caller holding
+     * `restorationPromise` waits for the popout window itself rather than
+     * only for the timer that starts it.
+     */
+    scheduleRestoration(delayMs: number, work: () => void | Promise<unknown>, onCancel?: () => void): Promise<void>;
     finishRestoration(promises: Promise<void>[]): void;
     cancelPendingRestorations(): void;
     serialize(): SerializedPopoutGroup[];

package/dist/cjs/dom.d.ts

@@ -24,11 +24,31 @@ export interface IFocusTracker extends IDisposable {
 export declare function trackFocus(element: HTMLElement): IFocusTracker;
 export declare function quasiPreventDefault(event: Event): void;
 export declare function quasiDefaultPrevented(event: Event): boolean;
+/** Whether the event originated within any of `elements`. Checks the
+ *  composed path, so it also holds for elements inside a shadow root, which a
+ *  window or document listener sees retargeted to the shadow host. */
+export declare function isEventWithin(event: Event, elements: readonly Element[]): boolean;
+/** Every shadow root between `element` and its document, innermost first. An
+ *  element in a component nested inside another component sits in more than
+ *  one, and an event is cut at each boundary. */
+export declare function shadowRootsOf(node: Node): ShadowRoot[];
+/**
+ * `element` as a listener rooted in `scope`'s tree sees it. A node in a shadow
+ * root *below* that tree is retargeted to its host there, repeatedly for
+ * nested roots; a node already in the same tree is returned unchanged. Omit
+ * `scope` (or pass a node in the document) for the document-level view, which
+ * is what a window listener gets.
+ *
+ * The scope matters: a layer living inside a shadow root must be able to tell
+ * its own elements apart, and retargeting everything out to the document would
+ * collapse them all onto the one host.
+ */
+export declare function retargetInto(element: Element, scope?: Node | null): Element;
 export type CspNonceProvider = string | ((targetDocument: Document) => string | undefined);
 export interface AddStylesOptions {
     nonce?: CspNonceProvider;
 }
-export declare function addStyles(document: Document, styleSheetList: StyleSheetList, options?: AddStylesOptions): void;
+export declare function addStyles(document: Document, styleSheetList: StyleSheetList | readonly CSSStyleSheet[], options?: AddStylesOptions): void;
 export declare function getDomNodePagePosition(domNode: Element): {
     left: number;
     top: number;
@@ -40,10 +60,40 @@ export declare function getDomNodePagePosition(domNode: Element): {
  * @see https://terodox.tech/how-to-tell-if-an-element-is-in-the-dom-including-the-shadow-dom/
  */
 export declare function isInDocument(element: Element): boolean;
+/** Duck-typed so it holds for a shadow root from another window's realm. */
+export declare function isShadowRoot(node: Node | null | undefined): node is ShadowRoot;
+/**
+ * The document or shadow root to hit-test (`elementFromPoint` /
+ * `elementsFromPoint`) against for `node`. Hit-testing on the document stops
+ * at a shadow host, so when dockview is mounted in a shadow root it has to go
+ * through that root to reach its own elements. Falls back to the owning
+ * document (which may be a popout's) for a detached node.
+ */
+export declare function getHitTestRoot(node: Node): DocumentOrShadowRoot;
 export declare function addTestId(element: HTMLElement, id: string): void;
 export declare function disableIframePointEvents(rootNode?: ParentNode): {
     release: () => void;
 };
+/**
+ * Suppress text selection for the duration of a pointer drag.
+ *
+ * A pointer drag is just a held button as far as the browser is concerned, so
+ * it selects text under the cursor as it travels. HTML5 drag-and-drop is
+ * exempt - the browser owns the gesture - which is why this is only needed on
+ * the pointer backend.
+ *
+ * `user-select: none` alone is not enough on WebKit: it starts the selection
+ * gesture from a mousedown on a `user-select: none` element unless that
+ * element is also natively draggable, then extends it into whatever the
+ * pointer crosses. Cancelling `selectstart` refuses that first extension,
+ * which ends the gesture for the rest of the drag.
+ *
+ * An existing selection is left alone: a mousedown on a `user-select: none`
+ * element does not clear one natively, and a pointer drag should not either.
+ */
+export declare function disableTextSelection(rootNode?: ParentNode): {
+    release: () => void;
+};
 export declare function getDockviewTheme(element: HTMLElement): string | undefined;
 export declare class Classnames {
     private readonly element;
@@ -66,3 +116,13 @@ export declare function prefersReducedMotion(doc?: Document): boolean;
  *  surface a non-see-through backdrop derived from the live DOM. Returns `''`
  *  when nothing opaque is found (let the stylesheet decide). */
 export declare function resolveOpaqueBackground(element: HTMLElement): string;
+/** The focused element as seen from `node`'s own tree. Unlike
+ *  `document.activeElement`, which is the shadow host when focus is inside a
+ *  shadow root, this reaches into the root `node` lives in (and a popout's
+ *  own document), while a web component nested inside that tree still
+ *  resolves to its host there. */
+export declare function getActiveElement(node: Node): Element | null;
+/** Where to append a floating element (e.g. a drag ghost) for `node`: its
+ *  shadow root when it lives in one, so styles scoped there still apply,
+ *  otherwise the body of its own document (which may be a popout's). */
+export declare function getOverlayParent(node: Node): ParentNode;