dockview-core 5.1.0 → 6.0.0

package/dist/cjs/dockview/tabGroupAccent.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabGroupColorPalette = exports.DEFAULT_TAB_GROUP_COLORS = void 0;
+exports.applyTabGroupAccent = applyTabGroupAccent;
+exports.resolveTabGroupAccent = resolveTabGroupAccent;
+exports.DEFAULT_TAB_GROUP_COLORS = [
+    { id: 'grey', value: 'var(--dv-tab-group-color-grey)', label: 'Grey' },
+    { id: 'blue', value: 'var(--dv-tab-group-color-blue)', label: 'Blue' },
+    { id: 'red', value: 'var(--dv-tab-group-color-red)', label: 'Red' },
+    {
+        id: 'yellow',
+        value: 'var(--dv-tab-group-color-yellow)',
+        label: 'Yellow',
+    },
+    { id: 'green', value: 'var(--dv-tab-group-color-green)', label: 'Green' },
+    { id: 'pink', value: 'var(--dv-tab-group-color-pink)', label: 'Pink' },
+    {
+        id: 'purple',
+        value: 'var(--dv-tab-group-color-purple)',
+        label: 'Purple',
+    },
+    { id: 'cyan', value: 'var(--dv-tab-group-color-cyan)', label: 'Cyan' },
+    {
+        id: 'orange',
+        value: 'var(--dv-tab-group-color-orange)',
+        label: 'Orange',
+    },
+];
+/**
+ * Runtime palette for tab-group color accents.
+ *
+ * Resolves a stored `color` string to a CSS color expression, with three
+ * fall-through modes:
+ *   1. `id` matches an entry → entry's `value`
+ *   2. `id` doesn't match → `id` itself (raw CSS literal pass-through)
+ *   3. `id` is empty or undefined → undefined (caller skips assignment)
+ *
+ * When `enabled` is false the palette returns undefined for everything; this
+ * is the `tabGroupAccent: 'off'` opt-out path.
+ */
+var TabGroupColorPalette = /** @class */ (function () {
+    function TabGroupColorPalette(entries, enabled) {
+        if (enabled === void 0) { enabled = true; }
+        this._entries = entries.slice();
+        this._byId = new Map(entries.map(function (e) { return [e.id, e]; }));
+        this._enabled = enabled;
+    }
+    Object.defineProperty(TabGroupColorPalette.prototype, "enabled", {
+        get: function () {
+            return this._enabled;
+        },
+        set: function (value) {
+            this._enabled = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Replace the entry list in place. Used by `updateOptions` so that
+     * existing palette references (held by chips, indicators, etc.) see
+     * the new palette without needing to be re-wired.
+     */
+    TabGroupColorPalette.prototype.setEntries = function (entries) {
+        this._entries = entries.slice();
+        this._byId = new Map(entries.map(function (e) { return [e.id, e]; }));
+    };
+    TabGroupColorPalette.prototype.entries = function () {
+        return this._entries;
+    };
+    TabGroupColorPalette.prototype.has = function (id) {
+        return this._byId.has(id);
+    };
+    TabGroupColorPalette.prototype.get = function (id) {
+        return this._byId.get(id);
+    };
+    /** First entry's id; used as the default when a color is unset. */
+    TabGroupColorPalette.prototype.defaultId = function () {
+        var _a;
+        return (_a = this._entries[0]) === null || _a === void 0 ? void 0 : _a.id;
+    };
+    /**
+     * Resolve a stored color to its CSS value, or undefined if no value
+     * should be written (palette disabled, or color empty/undefined).
+     */
+    TabGroupColorPalette.prototype.resolveValue = function (color) {
+        if (!this._enabled || !color) {
+            return undefined;
+        }
+        var entry = this._byId.get(color);
+        return entry ? entry.value : color;
+    };
+    return TabGroupColorPalette;
+}());
+exports.TabGroupColorPalette = TabGroupColorPalette;
+var _fallbackPalette;
+/**
+ * Lazy-built palette used when the accessor isn't available (test mocks,
+ * isolated chip construction). Production code paths always pass a real
+ * palette through.
+ */
+function getFallbackPalette() {
+    if (!_fallbackPalette) {
+        _fallbackPalette = new TabGroupColorPalette(exports.DEFAULT_TAB_GROUP_COLORS, true);
+    }
+    return _fallbackPalette;
+}
+/**
+ * Set the `--dv-tab-group-color` custom property on `el` to the resolved
+ * accent value, or remove it when the palette is disabled / color is unset.
+ */
+function applyTabGroupAccent(el, color, palette) {
+    var value = (palette !== null && palette !== void 0 ? palette : getFallbackPalette()).resolveValue(color);
+    if (value === undefined) {
+        el.style.removeProperty('--dv-tab-group-color');
+    }
+    else {
+        el.style.setProperty('--dv-tab-group-color', value);
+    }
+}
+/**
+ * Return the resolved CSS color for a tab group, or undefined when the
+ * palette is disabled or no color is set. Use this when you need the raw
+ * value to assign to a non-custom-property style (e.g. SVG stroke,
+ * backgroundColor on the indicator underline).
+ */
+function resolveTabGroupAccent(color, palette) {
+    return (palette !== null && palette !== void 0 ? palette : getFallbackPalette()).resolveValue(color);
+}

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

@@ -1,3 +1,5 @@
+import { TabAnimation } from './options';
+export type DockviewTabGroupIndicator = 'wrap' | 'none';
 export interface DockviewTheme {
     /**
      *  The name of the theme
@@ -7,10 +9,20 @@ export interface DockviewTheme {
      * The class name to apply to the theme containing the CSS variables settings.
      */
     className: string;
+    /**
+     * Whether the theme is light or dark. Useful for adapting panel content colors.
+     */
+    colorScheme?: 'light' | 'dark';
     /**
      * The gap between the groups
      */
     gap?: number;
+    /**
+     * The collapsed size (in px) for edge groups when using this theme.
+     * When set, this overrides the default 35px collapsed size so that
+     * collapsed edge groups match the theme's tab strip height.
+     */
+    edgeGroupCollapsedSize?: number;
     /**
      * The mouting position of the overlay shown when dragging a panel. `absolute`
      * will mount the overlay to root of the dockview component whereas `relative` will mount the overlay to the group container.
@@ -20,12 +32,55 @@ export interface DockviewTheme {
      * When dragging a panel, the overlay can either encompass the panel contents or the entire group including the tab header space.
      */
     dndPanelOverlay?: 'content' | 'group';
+    /**
+     * The style of the drop indicator shown when dragging a tab over another tab.
+     * `'line'` renders a thin 4px insertion strip at the tab edge (suited to bordered/spaced themes).
+     * `'fill'` renders a half-width highlighted area (suited to themes that use a background fill).
+     * Defaults to `'fill'`.
+     */
+    dndTabIndicator?: 'line' | 'fill';
+    /**
+     * The CSS value applied to `--dv-drag-over-border` when this theme is active.
+     * For example `'2px solid var(--dv-active-sash-color)'`.
+     * When unset the CSS variable is left to the stylesheet default (`none`).
+     */
+    dndOverlayBorder?: string;
+    /**
+     * Controls how tab groups are visually indicated in the tab bar.
+     *
+     * - `'wrap'` (default): Chrome-style SVG underline that wraps around the active tab
+     *   with rounded corners. Requires JavaScript for positioning and path computation.
+     * - `'none'`: Flat continuous colored bar spanning the full tab group width.
+     *   Unlike `'wrap'`, the bar does not curve around the active tab.
+     */
+    tabGroupIndicator?: DockviewTabGroupIndicator;
+    /**
+     * Controls tab drag-and-drop reorder animation style.
+     *
+     * - `"smooth"`: tabs animate smoothly during drag-and-drop reorder —
+     *   tabs slide apart to reveal the insertion gap, then animate to their
+     *   final positions on drop (Chrome-like behavior).
+     * - `"default"`: standard tab reorder behavior without animation.
+     *
+     * Defaults to `"default"`.
+     */
+    tabAnimation?: TabAnimation;
 }
 export declare const themeDark: DockviewTheme;
 export declare const themeLight: DockviewTheme;
 export declare const themeVisualStudio: DockviewTheme;
 export declare const themeAbyss: DockviewTheme;
 export declare const themeDracula: DockviewTheme;
-export declare const themeReplit: DockviewTheme;
 export declare const themeAbyssSpaced: DockviewTheme;
 export declare const themeLightSpaced: DockviewTheme;
+export declare const themeNord: DockviewTheme;
+export declare const themeNordSpaced: DockviewTheme;
+export declare const themeCatppuccinMocha: DockviewTheme;
+export declare const themeCatppuccinMochaSpaced: DockviewTheme;
+export declare const themeMonokai: DockviewTheme;
+export declare const themeSolarizedLight: DockviewTheme;
+export declare const themeSolarizedLightSpaced: DockviewTheme;
+export declare const themeGithubDark: DockviewTheme;
+export declare const themeGithubDarkSpaced: DockviewTheme;
+export declare const themeGithubLight: DockviewTheme;
+export declare const themeGithubLightSpaced: DockviewTheme;

package/dist/cjs/dockview/theme.js

@@ -1,42 +1,139 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.themeLightSpaced = exports.themeAbyssSpaced = exports.themeReplit = exports.themeDracula = exports.themeAbyss = exports.themeVisualStudio = exports.themeLight = exports.themeDark = void 0;
+exports.themeGithubLightSpaced = exports.themeGithubLight = exports.themeGithubDarkSpaced = exports.themeGithubDark = exports.themeSolarizedLightSpaced = exports.themeSolarizedLight = exports.themeMonokai = exports.themeCatppuccinMochaSpaced = exports.themeCatppuccinMocha = exports.themeNordSpaced = exports.themeNord = exports.themeLightSpaced = exports.themeAbyssSpaced = exports.themeDracula = exports.themeAbyss = exports.themeVisualStudio = exports.themeLight = exports.themeDark = void 0;
 exports.themeDark = {
     name: 'dark',
     className: 'dockview-theme-dark',
+    colorScheme: 'dark',
 };
 exports.themeLight = {
     name: 'light',
     className: 'dockview-theme-light',
+    colorScheme: 'light',
 };
 exports.themeVisualStudio = {
     name: 'visualStudio',
     className: 'dockview-theme-vs',
+    colorScheme: 'dark',
+    // --dv-tabs-and-actions-container-height is 20px, but the VS theme applies
+    // box-sizing: content-box + border-bottom: 2px, so the rendered strip is 22px.
+    edgeGroupCollapsedSize: 22,
 };
 exports.themeAbyss = {
     name: 'abyss',
     className: 'dockview-theme-abyss',
+    colorScheme: 'dark',
+    tabGroupIndicator: 'none',
 };
 exports.themeDracula = {
     name: 'dracula',
     className: 'dockview-theme-dracula',
-};
-exports.themeReplit = {
-    name: 'replit',
-    className: 'dockview-theme-replit',
-    gap: 10,
+    colorScheme: 'dark',
 };
 exports.themeAbyssSpaced = {
     name: 'abyssSpaced',
     className: 'dockview-theme-abyss-spaced',
+    colorScheme: 'dark',
     gap: 10,
+    edgeGroupCollapsedSize: 44,
     dndOverlayMounting: 'absolute',
     dndPanelOverlay: 'group',
+    dndTabIndicator: 'line',
+    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
 };
 exports.themeLightSpaced = {
     name: 'lightSpaced',
     className: 'dockview-theme-light-spaced',
+    colorScheme: 'light',
+    gap: 10,
+    edgeGroupCollapsedSize: 44,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+    dndTabIndicator: 'line',
+    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
+};
+exports.themeNord = {
+    name: 'nord',
+    className: 'dockview-theme-nord',
+    colorScheme: 'dark',
+};
+exports.themeNordSpaced = {
+    name: 'nordSpaced',
+    className: 'dockview-theme-nord-spaced',
+    colorScheme: 'dark',
+    gap: 10,
+    edgeGroupCollapsedSize: 44,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+    dndTabIndicator: 'line',
+    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
+};
+exports.themeCatppuccinMocha = {
+    name: 'catppuccinMocha',
+    className: 'dockview-theme-catppuccin-mocha',
+    colorScheme: 'dark',
+};
+exports.themeCatppuccinMochaSpaced = {
+    name: 'catppuccinMochaSpaced',
+    className: 'dockview-theme-catppuccin-mocha-spaced',
+    colorScheme: 'dark',
+    gap: 10,
+    edgeGroupCollapsedSize: 44,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+    dndTabIndicator: 'line',
+    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
+};
+exports.themeMonokai = {
+    name: 'monokai',
+    className: 'dockview-theme-monokai',
+    colorScheme: 'dark',
+};
+exports.themeSolarizedLight = {
+    name: 'solarizedLight',
+    className: 'dockview-theme-solarized-light',
+    colorScheme: 'light',
+};
+exports.themeSolarizedLightSpaced = {
+    name: 'solarizedLightSpaced',
+    className: 'dockview-theme-solarized-light-spaced',
+    colorScheme: 'light',
+    gap: 10,
+    edgeGroupCollapsedSize: 44,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+    dndTabIndicator: 'line',
+    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
+};
+exports.themeGithubDark = {
+    name: 'githubDark',
+    className: 'dockview-theme-github-dark',
+    colorScheme: 'dark',
+};
+exports.themeGithubDarkSpaced = {
+    name: 'githubDarkSpaced',
+    className: 'dockview-theme-github-dark-spaced',
+    colorScheme: 'dark',
+    gap: 10,
+    edgeGroupCollapsedSize: 44,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+    dndTabIndicator: 'line',
+    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
+};
+exports.themeGithubLight = {
+    name: 'githubLight',
+    className: 'dockview-theme-github-light',
+    colorScheme: 'light',
+};
+exports.themeGithubLightSpaced = {
+    name: 'githubLightSpaced',
+    className: 'dockview-theme-github-light-spaced',
+    colorScheme: 'light',
     gap: 10,
+    edgeGroupCollapsedSize: 44,
     dndOverlayMounting: 'absolute',
     dndPanelOverlay: 'group',
+    dndTabIndicator: 'line',
+    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
 };

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

@@ -31,6 +31,8 @@ export interface ITabRenderer extends Optional<Omit<IPanel, 'id'>, RendererMetho
 export interface IContentRenderer extends Optional<Omit<IPanel, 'id'>, RendererMethodOptionalList> {
     readonly element: HTMLElement;
     init(parameters: GroupPanelPartInitParameters): void;
+    onShow?(): void;
+    onHide?(): void;
 }
 export interface IGroupPanelInitParameters extends PanelInitParameters, HeaderPartInitParameters {
 }

package/dist/cjs/dom.js

@@ -26,7 +26,24 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findRelativeZIndexParent = exports.shiftAbsoluteElementIntoView = exports.onDidWindowResizeEnd = exports.onDidWindowMoveEnd = exports.isChildEntirelyVisibleWithinParent = exports.Classnames = exports.getDockviewTheme = exports.disableIframePointEvents = exports.addTestId = exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = exports.OverflowObserver = void 0;
+exports.Classnames = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.OverflowObserver = void 0;
+exports.watchElementResize = watchElementResize;
+exports.isAncestor = isAncestor;
+exports.getElementsByTagName = getElementsByTagName;
+exports.trackFocus = trackFocus;
+exports.quasiPreventDefault = quasiPreventDefault;
+exports.quasiDefaultPrevented = quasiDefaultPrevented;
+exports.addStyles = addStyles;
+exports.getDomNodePagePosition = getDomNodePagePosition;
+exports.isInDocument = isInDocument;
+exports.addTestId = addTestId;
+exports.disableIframePointEvents = disableIframePointEvents;
+exports.getDockviewTheme = getDockviewTheme;
+exports.isChildEntirelyVisibleWithinParent = isChildEntirelyVisibleWithinParent;
+exports.onDidWindowMoveEnd = onDidWindowMoveEnd;
+exports.onDidWindowResizeEnd = onDidWindowResizeEnd;
+exports.shiftAbsoluteElementIntoView = shiftAbsoluteElementIntoView;
+exports.findRelativeZIndexParent = findRelativeZIndexParent;
 var events_1 = require("./events");
 var lifecycle_1 = require("./lifecycle");
 var OverflowObserver = /** @class */ (function (_super) {
@@ -67,7 +84,6 @@ function watchElementResize(element, cb) {
         },
     };
 }
-exports.watchElementResize = watchElementResize;
 var removeClasses = function (element) {
     var e_1, _a;
     var classes = [];
@@ -133,15 +149,12 @@ function isAncestor(testChild, testAncestor) {
     }
     return false;
 }
-exports.isAncestor = isAncestor;
 function getElementsByTagName(tag, document) {
     return Array.prototype.slice.call(document.querySelectorAll(tag), 0);
 }
-exports.getElementsByTagName = getElementsByTagName;
 function trackFocus(element) {
     return new FocusTracker(element);
 }
-exports.trackFocus = trackFocus;
 /**
  * Track focus on an element. Ensure tabIndex is set when an HTMLElement is not focusable by default
  */
@@ -201,12 +214,10 @@ var QUASI_PREVENT_DEFAULT_KEY = 'dv-quasiPreventDefault';
 function quasiPreventDefault(event) {
     event[QUASI_PREVENT_DEFAULT_KEY] = true;
 }
-exports.quasiPreventDefault = quasiPreventDefault;
 // check if this event has been marked
 function quasiDefaultPrevented(event) {
     return event[QUASI_PREVENT_DEFAULT_KEY];
 }
-exports.quasiDefaultPrevented = quasiDefaultPrevented;
 function addStyles(document, styleSheetList) {
     var e_3, _a, e_4, _b;
     var styleSheets = Array.from(styleSheetList);
@@ -227,7 +238,7 @@ function addStyles(document, styleSheetList) {
                 }
             }
             catch (err) {
-                // security errors (lack of permissions), ignore
+                console.warn('dockview: failed to access stylesheet rules due to security restrictions', err);
             }
             try {
                 for (var cssTexts_1 = (e_4 = void 0, __values(cssTexts)), cssTexts_1_1 = cssTexts_1.next(); !cssTexts_1_1.done; cssTexts_1_1 = cssTexts_1.next()) {
@@ -254,7 +265,6 @@ function addStyles(document, styleSheetList) {
         finally { if (e_3) throw e_3.error; }
     }
 }
-exports.addStyles = addStyles;
 function getDomNodePagePosition(domNode) {
     var _a = domNode.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
     return {
@@ -264,7 +274,6 @@ function getDomNodePagePosition(domNode) {
         height: height,
     };
 }
-exports.getDomNodePagePosition = getDomNodePagePosition;
 /**
  * Check whether an element is in the DOM (including the Shadow DOM)
  * @see https://terodox.tech/how-to-tell-if-an-element-is-in-the-dom-including-the-shadow-dom/
@@ -285,11 +294,9 @@ function isInDocument(element) {
     }
     return false;
 }
-exports.isInDocument = isInDocument;
 function addTestId(element, id) {
     element.setAttribute('data-testid', id);
 }
-exports.addTestId = addTestId;
 /**
  * Should be more efficient than element.querySelectorAll("*") since there
  * is no need to store every element in-memory using this approach
@@ -363,7 +370,6 @@ function disableIframePointEvents(rootNode) {
         },
     };
 }
-exports.disableIframePointEvents = disableIframePointEvents;
 function getDockviewTheme(element) {
     function toClassList(element) {
         var list = [];
@@ -385,7 +391,6 @@ function getDockviewTheme(element) {
     }
     return theme;
 }
-exports.getDockviewTheme = getDockviewTheme;
 var Classnames = /** @class */ (function () {
     function Classnames(element) {
         this.element = element;
@@ -448,7 +453,6 @@ function isChildEntirelyVisibleWithinParent(child, parent) {
     }
     return true;
 }
-exports.isChildEntirelyVisibleWithinParent = isChildEntirelyVisibleWithinParent;
 function onDidWindowMoveEnd(window) {
     var emitter = new events_1.Emitter();
     var previousScreenX = window.screenX;
@@ -474,7 +478,6 @@ function onDidWindowMoveEnd(window) {
     checkMovement();
     return emitter;
 }
-exports.onDidWindowMoveEnd = onDidWindowMoveEnd;
 function onDidWindowResizeEnd(element, cb) {
     var resizeTimeout;
     var disposable = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableListener)(element, 'resize', function () {
@@ -485,7 +488,6 @@ function onDidWindowResizeEnd(element, cb) {
     }));
     return disposable;
 }
-exports.onDidWindowResizeEnd = onDidWindowResizeEnd;
 function shiftAbsoluteElementIntoView(element, root, options) {
     if (options === void 0) { options = { buffer: 10 }; }
     var buffer = options.buffer;
@@ -516,7 +518,6 @@ function shiftAbsoluteElementIntoView(element, root, options) {
         element.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
     }
 }
-exports.shiftAbsoluteElementIntoView = shiftAbsoluteElementIntoView;
 function findRelativeZIndexParent(el) {
     var tmp = el;
     while (tmp && (tmp.style.zIndex === 'auto' || tmp.style.zIndex === '')) {
@@ -524,4 +525,3 @@ function findRelativeZIndexParent(el) {
     }
     return tmp;
 }
-exports.findRelativeZIndexParent = findRelativeZIndexParent;

package/dist/cjs/events.js

@@ -11,7 +11,8 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AsapEvent = exports.addDisposableListener = exports.Emitter = exports.AcceptableEvent = exports.DockviewEvent = exports.Event = void 0;
+exports.AsapEvent = exports.Emitter = exports.AcceptableEvent = exports.DockviewEvent = exports.Event = void 0;
+exports.addDisposableListener = addDisposableListener;
 var Event;
 (function (Event) {
     Event.any = function () {
@@ -227,7 +228,6 @@ function addDisposableListener(element, type, listener, options) {
         },
     };
 }
-exports.addDisposableListener = addDisposableListener;
 /**
  *
  * Event Emitter that fires events from a Microtask callback, only one event will fire per event-loop cycle.

package/dist/cjs/gridview/baseComponentGridview.d.ts

@@ -105,6 +105,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
     removeGroup(group: T): void;
     moveToNext(options?: MovementOptions2): void;
     moveToPrevious(options?: MovementOptions2): void;
+    protected forceRelayout(): void;
     layout(width: number, height: number, forceResize?: boolean): void;
     dispose(): void;
 }

package/dist/cjs/gridview/baseComponentGridview.js

@@ -26,7 +26,8 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseGrid = exports.toTarget = void 0;
+exports.BaseGrid = void 0;
+exports.toTarget = toTarget;
 var events_1 = require("../events");
 var gridview_1 = require("./gridview");
 var lifecycle_1 = require("../lifecycle");
@@ -50,7 +51,6 @@ function toTarget(direction) {
             return 'center';
     }
 }
-exports.toTarget = toTarget;
 var BaseGrid = /** @class */ (function (_super) {
     __extends(BaseGrid, _super);
     function BaseGrid(container, options) {
@@ -88,7 +88,7 @@ var BaseGrid = /** @class */ (function (_super) {
         }), _this.gridview.onDidViewVisibilityChange(function () {
             return _this._onDidViewVisibilityChangeMicroTaskQueue.fire();
         }), _this.onDidViewVisibilityChangeMicroTaskQueue(function () {
-            _this.layout(_this.width, _this.height, true);
+            _this.forceRelayout();
         }), lifecycle_1.Disposable.from(function () {
             var _a;
             (_a = _this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(_this.element);
@@ -296,6 +296,9 @@ var BaseGrid = /** @class */ (function (_super) {
         var next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
         this.doSetGroupActive(next);
     };
+    BaseGrid.prototype.forceRelayout = function () {
+        this.layout(this.width, this.height, true);
+    };
     BaseGrid.prototype.layout = function (width, height, forceResize) {
         var different = forceResize || width !== this.width || height !== this.height;
         if (!different) {

package/dist/cjs/gridview/gridview.js

@@ -29,7 +29,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Gridview = exports.isGridBranchNode = exports.orthogonal = exports.getLocationOrientation = exports.getDirectionOrientation = exports.getRelativeLocation = exports.getGridLocation = exports.indexInParent = void 0;
+exports.Gridview = exports.orthogonal = void 0;
+exports.indexInParent = indexInParent;
+exports.getGridLocation = getGridLocation;
+exports.getRelativeLocation = getRelativeLocation;
+exports.getDirectionOrientation = getDirectionOrientation;
+exports.getLocationOrientation = getLocationOrientation;
+exports.isGridBranchNode = isGridBranchNode;
 var splitview_1 = require("../splitview/splitview");
 var array_1 = require("../array");
 var leafNode_1 = require("./leafNode");
@@ -94,7 +100,6 @@ function indexInParent(element) {
     }
     return index;
 }
-exports.indexInParent = indexInParent;
 /**
  * Find the grid location of a specific DOM element by traversing the parent
  * chain and finding each child index on the way.
@@ -113,7 +118,6 @@ function getGridLocation(element) {
     var ancestor = parentElement.parentElement.parentElement.parentElement;
     return __spreadArray(__spreadArray([], __read(getGridLocation(ancestor)), false), [index], false);
 }
-exports.getGridLocation = getGridLocation;
 function getRelativeLocation(rootOrientation, location, direction) {
     var orientation = getLocationOrientation(rootOrientation, location);
     var directionOrientation = getDirectionOrientation(direction);
@@ -130,19 +134,16 @@ function getRelativeLocation(rootOrientation, location, direction) {
         return __spreadArray(__spreadArray([], __read(location), false), [index], false);
     }
 }
-exports.getRelativeLocation = getRelativeLocation;
 function getDirectionOrientation(direction) {
     return direction === 'top' || direction === 'bottom'
         ? splitview_1.Orientation.VERTICAL
         : splitview_1.Orientation.HORIZONTAL;
 }
-exports.getDirectionOrientation = getDirectionOrientation;
 function getLocationOrientation(rootOrientation, location) {
     return location.length % 2 === 0
         ? (0, exports.orthogonal)(rootOrientation)
         : rootOrientation;
 }
-exports.getLocationOrientation = getLocationOrientation;
 var orthogonal = function (orientation) {
     return orientation === splitview_1.Orientation.HORIZONTAL
         ? splitview_1.Orientation.VERTICAL
@@ -152,7 +153,6 @@ exports.orthogonal = orthogonal;
 function isGridBranchNode(node) {
     return !!node.children;
 }
-exports.isGridBranchNode = isGridBranchNode;
 var serializeBranchNode = function (node, orientation) {
     var size = orientation === splitview_1.Orientation.VERTICAL ? node.box.width : node.box.height;
     if (!isGridBranchNode(node)) {

package/dist/cjs/index.d.ts

@@ -16,18 +16,21 @@ export * from './gridview/baseComponentGridview';
 export { DraggablePaneviewPanel, PaneviewDidDropEvent as PaneviewDropEvent, } from './paneview/draggablePaneviewPanel';
 export * from './dockview/components/panel/content';
 export * from './dockview/components/tab/tab';
-export { DockviewGroupPanelModel, DockviewDidDropEvent, DockviewWillDropEvent, DockviewGroupChangeEvent, } from './dockview/dockviewGroupPanelModel';
-export { DockviewWillShowOverlayLocationEvent } from './dockview/events';
+export { DockviewGroupPanelModel, DockviewDidDropEvent, DockviewWillDropEvent, DockviewGroupChangeEvent, DockviewGroupLocation, } from './dockview/dockviewGroupPanelModel';
+export { DockviewWillShowOverlayLocationEvent, DockviewTabGroupChangeEvent, DockviewTabGroupCollapsedChangeEvent, DockviewTabGroupPanelChangeEvent, } from './dockview/events';
 export { TabDragEvent, GroupDragEvent, } from './dockview/components/titlebar/tabsContainer';
 export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
-export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, } from './dockview/framework';
+export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, ITabGroupChipRenderer, } from './dockview/framework';
 export * from './dockview/options';
 export * from './dockview/theme';
 export * from './dockview/dockviewPanel';
+export { DockviewTabGroupColor, ITabGroup, SerializedTabGroup, TabGroupOptions, } from './dockview/tabGroup';
+export { DEFAULT_TAB_GROUP_COLORS, DockviewTabGroupColorEntry, TabGroupColorPalette, applyTabGroupAccent, resolveTabGroupAccent, } from './dockview/tabGroupAccent';
 export { DefaultTab } from './dockview/components/tab/defaultTab';
 export { DefaultDockviewDeserialzier, IPanelDeserializer, } from './dockview/deserializer';
 export * from './dockview/dockviewComponent';
+export { EdgeGroupOptions, EdgeGroupPosition, SerializedEdgeGroups, } from './dockview/dockviewShell';
 export * from './gridview/gridviewComponent';
 export * from './splitview/splitviewComponent';
 export * from './paneview/paneviewComponent';
@@ -43,6 +46,6 @@ export { SizeEvent, GridviewPanelApi, GridConstraintChangeEvent, } from './api/g
 export { TitleEvent, RendererChangedEvent, DockviewPanelApi, DockviewPanelMoveParams, } from './api/dockviewPanelApi';
 export { PanelSizeEvent, PanelConstraintChangeEvent, SplitviewPanelApi, } from './api/splitviewPanelApi';
 export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
-export { DockviewGroupPanelApi, DockviewGroupPanelFloatingChangeEvent, DockviewGroupMoveParams, } from './api/dockviewGroupPanelApi';
-export { CommonApi, SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api';
+export { DockviewGroupPanelApi, DockviewGroupPanelFloatingChangeEvent, DockviewGroupPanelCollapsedChangeEvent, DockviewGroupMoveParams, } from './api/dockviewGroupPanelApi';
+export { CommonApi, SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, DockviewGetTabGroupsOptions, } from './api/component.api';
 export { createDockview, createGridview, createPaneview, createSplitview, } from './api/entryPoints';