dockview-core 5.1.0 → 6.0.0

package/dist/cjs/dnd/droptarget.js

@@ -15,7 +15,11 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateQuadrantAsPixels = exports.calculateQuadrantAsPercentage = exports.Droptarget = exports.positionToDirection = exports.directionToPosition = exports.WillShowOverlayEvent = void 0;
+exports.Droptarget = exports.WillShowOverlayEvent = void 0;
+exports.directionToPosition = directionToPosition;
+exports.positionToDirection = positionToDirection;
+exports.calculateQuadrantAsPercentage = calculateQuadrantAsPercentage;
+exports.calculateQuadrantAsPixels = calculateQuadrantAsPixels;
 var dom_1 = require("../dom");
 var events_1 = require("../events");
 var lifecycle_1 = require("../lifecycle");
@@ -103,7 +107,6 @@ function directionToPosition(direction) {
             throw new Error("invalid direction '".concat(direction, "'"));
     }
 }
-exports.directionToPosition = directionToPosition;
 function positionToDirection(position) {
     switch (position) {
         case 'top':
@@ -120,7 +123,6 @@ function positionToDirection(position) {
             throw new Error("invalid position '".concat(position, "'"));
     }
 }
-exports.positionToDirection = positionToDirection;
 var DEFAULT_ACTIVATION_SIZE = {
     value: 20,
     type: 'percentage',
@@ -306,13 +308,15 @@ var Droptarget = /** @class */ (function (_super) {
         return typeof value === 'boolean' && value;
     };
     Droptarget.prototype.toggleClasses = function (quadrant, width, height) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         var target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
         if (!target && !this.overlayElement) {
             return;
         }
-        var isSmallX = width < SMALL_WIDTH_BOUNDARY;
-        var isSmallY = height < SMALL_HEIGHT_BOUNDARY;
+        var smallWidthBoundary = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.smallWidthBoundary) !== null && _d !== void 0 ? _d : SMALL_WIDTH_BOUNDARY;
+        var smallHeightBoundary = (_f = (_e = this.options.overlayModel) === null || _e === void 0 ? void 0 : _e.smallHeightBoundary) !== null && _f !== void 0 ? _f : SMALL_HEIGHT_BOUNDARY;
+        var isSmallX = width < smallWidthBoundary;
+        var isSmallY = height < smallHeightBoundary;
         var isLeft = quadrant === 'left';
         var isRight = quadrant === 'right';
         var isTop = quadrant === 'top';
@@ -322,7 +326,7 @@ var Droptarget = /** @class */ (function (_super) {
         var topClass = !isSmallY && isTop;
         var bottomClass = !isSmallY && isBottom;
         var size = 1;
-        var sizeOptions = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : DEFAULT_SIZE;
+        var sizeOptions = (_h = (_g = this.options.overlayModel) === null || _g === void 0 ? void 0 : _g.size) !== null && _h !== void 0 ? _h : DEFAULT_SIZE;
         if (sizeOptions.type === 'percentage') {
             size = (0, math_1.clamp)(sizeOptions.value, 0, 100) / 100;
         }
@@ -335,7 +339,7 @@ var Droptarget = /** @class */ (function (_super) {
             }
         }
         if (target) {
-            var outlineEl = (_g = (_f = (_e = this.options).getOverlayOutline) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : this.element;
+            var outlineEl = (_l = (_k = (_j = this.options).getOverlayOutline) === null || _k === void 0 ? void 0 : _k.call(_j)) !== null && _l !== void 0 ? _l : this.element;
             var elBox = outlineEl.getBoundingClientRect();
             var ta = target.getElements(undefined, outlineEl);
             var el = ta.root;
@@ -370,6 +374,13 @@ var Droptarget = /** @class */ (function (_super) {
                 box_1.left = rootLeft + width - 4;
                 box_1.width = 4;
             }
+            if (isSmallY && isTop) {
+                box_1.height = 4;
+            }
+            if (isSmallY && isBottom) {
+                box_1.top = rootTop + height - 4;
+                box_1.height = 4;
+            }
             // Use GPU-optimized bounds checking and setting
             if (!checkBoundsChanged(overlay_1, box_1)) {
                 return;
@@ -380,6 +391,8 @@ var Droptarget = /** @class */ (function (_super) {
             (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-right', isRight);
             (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-top', isTop);
             (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-bottom', isBottom);
+            (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-anchor-line', (isSmallX && (isLeft || isRight)) ||
+                (isSmallY && (isTop || isBottom)));
             (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-center', quadrant === 'center');
             if (ta.changed) {
                 (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-anchor-container-changed', true);
@@ -426,9 +439,26 @@ var Droptarget = /** @class */ (function (_super) {
             box.top = "".concat(100 * (1 - size), "%");
             box.height = "".concat(100 * size, "%");
         }
+        if (isSmallX && isLeft) {
+            box.width = '4px';
+        }
+        if (isSmallX && isRight) {
+            box.left = "".concat(width - 4, "px");
+            box.width = '4px';
+        }
+        if (isSmallY && isTop) {
+            box.height = '4px';
+        }
+        if (isSmallY && isBottom) {
+            box.top = "".concat(height - 4, "px");
+            box.height = '4px';
+        }
         setGPUOptimizedBoundsFromStrings(this.overlayElement, box);
+        var isLine = (isSmallX && (isLeft || isRight)) ||
+            (isSmallY && (isTop || isBottom));
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
+        (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-selection-line', isLine);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-left', isLeft);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-right', isRight);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-top', isTop);
@@ -478,7 +508,6 @@ function calculateQuadrantAsPercentage(overlayType, x, y, width, height, thresho
     }
     return 'center';
 }
-exports.calculateQuadrantAsPercentage = calculateQuadrantAsPercentage;
 function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold) {
     if (overlayType.has('left') && x < threshold) {
         return 'left';
@@ -497,4 +526,3 @@ function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold)
     }
     return 'center';
 }
-exports.calculateQuadrantAsPixels = calculateQuadrantAsPixels;

package/dist/cjs/dnd/ghost.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addGhostImage = void 0;
+exports.addGhostImage = addGhostImage;
 var dom_1 = require("../dom");
 function addGhostImage(dataTransfer, ghostElement, options) {
     var _a, _b;
@@ -15,4 +15,3 @@ function addGhostImage(dataTransfer, ghostElement, options) {
         ghostElement.remove();
     }, 0);
 }
-exports.addGhostImage = addGhostImage;

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

@@ -82,6 +82,7 @@ var ContentContainer = /** @class */ (function (_super) {
     };
     ContentContainer.prototype.renderPanel = function (panel, options) {
         var _this = this;
+        var _a, _b, _c, _d;
         if (options === void 0) { options = { asActive: true }; }
         var doRender = options.asActive ||
             (this.panel && this.group.isPanelActive(this.panel));
@@ -91,6 +92,7 @@ var ContentContainer = /** @class */ (function (_super) {
              * If the currently attached panel is mounted directly to the content then remove it
              */
             this._element.removeChild(this.panel.view.content.element);
+            (_b = (_a = this.panel.view.content).onHide) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
         this.panel = panel;
         var container;
@@ -100,6 +102,7 @@ var ContentContainer = /** @class */ (function (_super) {
                 if (this.panel) {
                     if (doRender) {
                         this._element.appendChild(this.panel.view.content.element);
+                        (_d = (_c = this.panel.view.content).onShow) === null || _d === void 0 ? void 0 : _d.call(_c);
                     }
                 }
                 container = this._element;
@@ -134,10 +137,11 @@ var ContentContainer = /** @class */ (function (_super) {
         // noop
     };
     ContentContainer.prototype.closePanel = function () {
-        var _a;
+        var _a, _b, _c;
         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 = undefined;

package/dist/cjs/dockview/components/popupService.d.ts

@@ -1,10 +1,17 @@
 import { CompositeDisposable } from '../../lifecycle';
 export declare class PopupService extends CompositeDisposable {
-    private readonly root;
     private readonly _element;
     private _active;
     private readonly _activeDisposable;
-    constructor(root: HTMLElement);
+    private _root;
+    private readonly _window;
+    constructor(root: HTMLElement, win?: Window);
+    /**
+     * Move the popup anchor into a new root element. Call this when a shell
+     * wraps the dockview component so that edge-group overflow dropdowns
+     * position correctly relative to the full layout area.
+     */
+    updateRoot(newRoot: HTMLElement): void;
     openPopover(element: HTMLElement, position: {
         x: number;
         y: number;

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

@@ -21,25 +21,36 @@ var events_1 = require("../../events");
 var lifecycle_1 = require("../../lifecycle");
 var PopupService = /** @class */ (function (_super) {
     __extends(PopupService, _super);
-    function PopupService(root) {
+    function PopupService(root, win) {
+        if (win === void 0) { win = window; }
         var _this = _super.call(this) || this;
-        _this.root = root;
         _this._active = null;
         _this._activeDisposable = new lifecycle_1.MutableDisposable();
-        _this._element = document.createElement('div');
+        _this._root = root;
+        _this._window = win;
+        _this._element = win.document.createElement('div');
         _this._element.className = 'dv-popover-anchor';
         _this._element.style.position = 'relative';
-        _this.root.prepend(_this._element);
+        _this._root.prepend(_this._element);
         _this.addDisposables(lifecycle_1.Disposable.from(function () {
             _this.close();
         }), _this._activeDisposable);
         return _this;
     }
+    /**
+     * Move the popup anchor into a new root element. Call this when a shell
+     * wraps the dockview component so that edge-group overflow dropdowns
+     * position correctly relative to the full layout area.
+     */
+    PopupService.prototype.updateRoot = function (newRoot) {
+        newRoot.prepend(this._element);
+        this._root = newRoot;
+    };
     PopupService.prototype.openPopover = function (element, position) {
         var _this = this;
         var _a;
         this.close();
-        var wrapper = document.createElement('div');
+        var wrapper = this._window.document.createElement('div');
         wrapper.style.position = 'absolute';
         wrapper.style.zIndex = (_a = position.zIndex) !== null && _a !== void 0 ? _a : 'var(--dv-overlay-z-index)';
         wrapper.appendChild(element);
@@ -50,7 +61,7 @@ var PopupService = /** @class */ (function (_super) {
         wrapper.style.left = "".concat(position.x - offsetX, "px");
         this._element.appendChild(wrapper);
         this._active = wrapper;
-        this._activeDisposable.value = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableListener)(window, 'pointerdown', function (event) {
+        this._activeDisposable.value = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableListener)(this._window, 'pointerdown', function (event) {
             var _a;
             var target = event.target;
             if (!(target instanceof HTMLElement)) {
@@ -64,11 +75,15 @@ var PopupService = /** @class */ (function (_super) {
                 return; // clicked within popover
             }
             _this.close();
-        }), (0, events_1.addDisposableListener)(window, 'resize', function () {
+        }), (0, events_1.addDisposableListener)(this._window, 'keydown', function (event) {
+            if (event.key === 'Escape' || event.key === 'Enter') {
+                _this.close();
+            }
+        }), (0, events_1.addDisposableListener)(this._window, 'resize', function () {
             _this.close();
         }));
-        requestAnimationFrame(function () {
-            (0, dom_1.shiftAbsoluteElementIntoView)(wrapper, _this.root);
+        this._window.requestAnimationFrame(function () {
+            (0, dom_1.shiftAbsoluteElementIntoView)(wrapper, _this._root);
         });
     };
     PopupService.prototype.close = function () {

package/dist/cjs/dockview/components/tab/tab.d.ts

@@ -5,6 +5,7 @@ import { ITabRenderer } from '../../types';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { DroptargetEvent, WillShowOverlayEvent } from '../../../dnd/droptarget';
 import { IDockviewPanel } from '../../dockviewPanel';
+import { DockviewHeaderDirection } from '../../options';
 export declare class Tab extends CompositeDisposable {
     readonly panel: IDockviewPanel;
     private readonly accessor;
@@ -13,17 +14,23 @@ export declare class Tab extends CompositeDisposable {
     private readonly dropTarget;
     private content;
     private readonly dragHandler;
+    private _direction;
     private readonly _onPointDown;
     readonly onPointerDown: Event<MouseEvent>;
+    private readonly _onTabClick;
+    readonly onTabClick: Event<MouseEvent>;
     private readonly _onDropped;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
     readonly onDragStart: Event<DragEvent>;
+    private readonly _onDragEnd;
+    readonly onDragEnd: Event<DragEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(isActive: boolean): void;
     setContent(part: ITabRenderer): void;
+    private _buildOverlayModel;
+    setDirection(direction: DockviewHeaderDirection): void;
     updateDragAndDropState(): void;
-    dispose(): void;
 }

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

@@ -52,12 +52,17 @@ var Tab = /** @class */ (function (_super) {
         _this.accessor = accessor;
         _this.group = group;
         _this.content = undefined;
+        _this._direction = 'horizontal';
         _this._onPointDown = new events_1.Emitter();
         _this.onPointerDown = _this._onPointDown.event;
+        _this._onTabClick = new events_1.Emitter();
+        _this.onTabClick = _this._onTabClick.event;
         _this._onDropped = new events_1.Emitter();
         _this.onDrop = _this._onDropped.event;
         _this._onDragStart = new events_1.Emitter();
         _this.onDragStart = _this._onDragStart.event;
+        _this._onDragEnd = new events_1.Emitter();
+        _this.onDragEnd = _this._onDragEnd.event;
         _this._element = document.createElement('div');
         _this._element.className = 'dv-tab';
         _this._element.tabIndex = 0;
@@ -66,13 +71,22 @@ var Tab = /** @class */ (function (_super) {
         _this.dragHandler = new TabDragHandler(_this._element, _this.accessor, _this.group, _this.panel, !!_this.accessor.options.disableDnd);
         _this.dropTarget = new droptarget_1.Droptarget(_this._element, {
             acceptedTargetZones: ['left', 'right'],
-            overlayModel: { activationSize: { value: 50, type: 'percentage' } },
+            overlayModel: _this._buildOverlayModel(),
             canDisplayOverlay: function (event, position) {
+                var _a;
                 if (_this.group.locked) {
                     return false;
                 }
                 var data = (0, dataTransfer_1.getPanelData)();
                 if (data && _this.accessor.id === data.viewId) {
+                    if (((_a = _this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
+                        // When smooth reorder is enabled, the Tabs
+                        // container handles all intra-accessor drops
+                        // (both same-group and cross-group) via
+                        // animation.  Suppress the per-tab overlay so
+                        // the tab is dropped *beside* rather than *on*.
+                        return false;
+                    }
                     return true;
                 }
                 return _this.group.model.canDisplayOverlay(event, position, 'tab');
@@ -80,22 +94,80 @@ var Tab = /** @class */ (function (_super) {
             getOverrideTarget: function () { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         _this.onWillShowOverlay = _this.dropTarget.onWillShowOverlay;
-        _this.addDisposables(_this._onPointDown, _this._onDropped, _this._onDragStart, _this.dragHandler.onDragStart(function (event) {
+        _this.addDisposables(_this._onPointDown, _this._onTabClick, _this._onDropped, _this._onDragStart, _this._onDragEnd, _this.accessor.onDidOptionsChange(function () {
+            _this.dropTarget.setOverlayModel(_this._buildOverlayModel());
+        }), _this.dragHandler.onDragStart(function (event) {
+            var _a;
             if (event.dataTransfer) {
                 var style_1 = getComputedStyle(_this.element);
                 var newNode_1 = _this.element.cloneNode(true);
+                var isVertical_1 = _this._direction === 'vertical';
+                /**
+                 * Properties to skip when copying computed styles for a
+                 * vertical tab ghost.  `writing-mode` is excluded so we
+                 * can force `horizontal-tb`.  Size and margin logical
+                 * properties are excluded because their physical meaning
+                 * flips when writing-mode changes, which would produce
+                 * incorrect dimensions.
+                 */
+                var verticalSkip_1 = new Set([
+                    'writing-mode',
+                    'inline-size',
+                    'block-size',
+                    'min-inline-size',
+                    'min-block-size',
+                    'max-inline-size',
+                    'max-block-size',
+                    'margin-inline',
+                    'margin-inline-start',
+                    'margin-inline-end',
+                    'margin-block',
+                    'margin-block-start',
+                    'margin-block-end',
+                    'padding-inline',
+                    'padding-inline-start',
+                    'padding-inline-end',
+                    'padding-block',
+                    'padding-block-start',
+                    'padding-block-end',
+                ]);
                 Array.from(style_1).forEach(function (key) {
-                    return newNode_1.style.setProperty(key, style_1.getPropertyValue(key), style_1.getPropertyPriority(key));
+                    if (isVertical_1 && verticalSkip_1.has(key)) {
+                        return;
+                    }
+                    newNode_1.style.setProperty(key, style_1.getPropertyValue(key), style_1.getPropertyPriority(key));
                 });
+                if (isVertical_1) {
+                    // Force horizontal text flow and swap the physical
+                    // dimensions so the ghost appears as a horizontal tab.
+                    newNode_1.style.setProperty('writing-mode', 'horizontal-tb');
+                    newNode_1.style.setProperty('width', style_1.height);
+                    newNode_1.style.setProperty('height', style_1.width);
+                }
                 newNode_1.style.position = 'absolute';
+                newNode_1.classList.add('dv-tab-ghost-drag');
                 (0, ghost_1.addGhostImage)(event.dataTransfer, newNode_1, {
                     y: -10,
                     x: 30,
                 });
             }
             _this._onDragStart.fire(event);
+            if (((_a = _this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
+                // Delay collapse to next frame so the browser
+                // captures the full drag image first
+                requestAnimationFrame(function () {
+                    (0, dom_1.toggleClass)(_this.element, 'dv-tab--dragging', true);
+                });
+            }
+        }), (0, events_1.addDisposableListener)(_this._element, 'dragend', function (event) {
+            (0, dom_1.toggleClass)(_this.element, 'dv-tab--dragging', false);
+            _this._onDragEnd.fire(event);
         }), _this.dragHandler, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function (event) {
             _this._onPointDown.fire(event);
+        }), (0, events_1.addDisposableListener)(_this._element, 'click', function (event) {
+            _this._onTabClick.fire(event);
+        }), (0, events_1.addDisposableListener)(_this._element, 'contextmenu', function (event) {
+            _this.accessor.contextMenuController.show(_this.panel, _this.group, event);
         }), _this.dropTarget.onDrop(function (event) {
             _this._onDropped.fire(event);
         }), _this.dropTarget);
@@ -119,13 +191,29 @@ var Tab = /** @class */ (function (_super) {
         this.content = part;
         this._element.appendChild(this.content.element);
     };
+    Tab.prototype._buildOverlayModel = function () {
+        var _a;
+        // '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).
+        var smallBoundary = ((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndTabIndicator) === 'line'
+            ? Number.POSITIVE_INFINITY
+            : 0;
+        return {
+            activationSize: { value: 50, type: 'percentage' },
+            smallWidthBoundary: smallBoundary,
+            smallHeightBoundary: smallBoundary,
+        };
+    };
+    Tab.prototype.setDirection = function (direction) {
+        this._direction = direction;
+        this.dropTarget.setTargetZones(direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right']);
+    };
     Tab.prototype.updateDragAndDropState = function () {
         this._element.draggable = !this.accessor.options.disableDnd;
         this.dragHandler.setDisabled(!!this.accessor.options.disableDnd);
     };
-    Tab.prototype.dispose = function () {
-        _super.prototype.dispose.call(this);
-    };
     return Tab;
 }(lifecycle_1.CompositeDisposable));
 exports.Tab = Tab;

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

@@ -0,0 +1,30 @@
+import { Event } from '../../../events';
+import { CompositeDisposable } from '../../../lifecycle';
+import { ITabGroup } from '../../tabGroup';
+import { TabGroupColorPalette } from '../../tabGroupAccent';
+import { ITabGroupChipRenderer } from '../../framework';
+import { DockviewApi } from '../../../api/component.api';
+export declare class TabGroupChip extends CompositeDisposable implements ITabGroupChipRenderer {
+    private readonly _palette?;
+    private readonly _element;
+    private readonly _label;
+    private _tabGroup;
+    private readonly _onClick;
+    readonly onClick: Event<MouseEvent>;
+    private readonly _onContextMenu;
+    readonly onContextMenu: Event<MouseEvent>;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<DragEvent>;
+    get element(): HTMLElement;
+    constructor(_palette?: TabGroupColorPalette | undefined);
+    init(params: {
+        tabGroup: ITabGroup;
+        api: DockviewApi;
+    }): void;
+    update(params: {
+        tabGroup: ITabGroup;
+    }): void;
+    private updateColor;
+    private updateLabel;
+    private updateCollapsed;
+}

package/dist/cjs/dockview/components/titlebar/tabGroupChip.js

@@ -0,0 +1,95 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabGroupChip = void 0;
+var events_1 = require("../../../events");
+var lifecycle_1 = require("../../../lifecycle");
+var dom_1 = require("../../../dom");
+var tabGroupAccent_1 = require("../../tabGroupAccent");
+var TabGroupChip = /** @class */ (function (_super) {
+    __extends(TabGroupChip, _super);
+    function TabGroupChip(_palette) {
+        var _this = _super.call(this) || this;
+        _this._palette = _palette;
+        _this._onClick = new events_1.Emitter();
+        _this.onClick = _this._onClick.event;
+        _this._onContextMenu = new events_1.Emitter();
+        _this.onContextMenu = _this._onContextMenu.event;
+        _this._onDragStart = new events_1.Emitter();
+        _this.onDragStart = _this._onDragStart.event;
+        _this._element = document.createElement('div');
+        _this._element.className = 'dv-tab-group-chip';
+        _this._element.tabIndex = 0;
+        _this._element.draggable = true;
+        _this._label = document.createElement('span');
+        _this._label.className = 'dv-tab-group-chip-label';
+        _this._element.appendChild(_this._label);
+        _this.addDisposables(_this._onClick, _this._onContextMenu, _this._onDragStart, (0, events_1.addDisposableListener)(_this._element, 'click', function (event) {
+            _this._onClick.fire(event);
+        }), (0, events_1.addDisposableListener)(_this._element, 'contextmenu', function (event) {
+            _this._onContextMenu.fire(event);
+        }), (0, events_1.addDisposableListener)(_this._element, 'dragstart', function (event) {
+            _this._onDragStart.fire(event);
+        }));
+        return _this;
+    }
+    Object.defineProperty(TabGroupChip.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TabGroupChip.prototype.init = function (params) {
+        var _this = this;
+        this._tabGroup = params.tabGroup;
+        this.updateColor(params.tabGroup.color);
+        this.updateLabel(params.tabGroup.label);
+        this.updateCollapsed(params.tabGroup.collapsed);
+        this.addDisposables(params.tabGroup.onDidChange(function () {
+            if (_this._tabGroup) {
+                _this.updateColor(_this._tabGroup.color);
+                _this.updateLabel(_this._tabGroup.label);
+            }
+        }), params.tabGroup.onDidCollapseChange(function (collapsed) {
+            _this.updateCollapsed(collapsed);
+        }), this._onClick.event(function () {
+            var _a;
+            (_a = _this._tabGroup) === null || _a === void 0 ? void 0 : _a.toggle();
+        }));
+    };
+    TabGroupChip.prototype.update = function (params) {
+        this._tabGroup = params.tabGroup;
+        this.updateColor(params.tabGroup.color);
+        this.updateLabel(params.tabGroup.label);
+        this.updateCollapsed(params.tabGroup.collapsed);
+    };
+    TabGroupChip.prototype.updateColor = function (color) {
+        var _a;
+        (0, tabGroupAccent_1.applyTabGroupAccent)(this._element, color, this._palette);
+        (0, dom_1.toggleClass)(this._element, 'dv-tab-group-chip--accent-off', ((_a = this._palette) === null || _a === void 0 ? void 0 : _a.enabled) === false);
+    };
+    TabGroupChip.prototype.updateLabel = function (label) {
+        this._label.textContent = label;
+        (0, dom_1.toggleClass)(this._label, 'dv-tab-group-chip-label--empty', !label);
+    };
+    TabGroupChip.prototype.updateCollapsed = function (collapsed) {
+        (0, dom_1.toggleClass)(this._element, 'dv-tab-group-chip--collapsed', collapsed);
+    };
+    return TabGroupChip;
+}(lifecycle_1.CompositeDisposable));
+exports.TabGroupChip = TabGroupChip;

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

@@ -0,0 +1,71 @@
+import { IValueDisposable } from '../../../lifecycle';
+import { DockviewHeaderDirection } from '../../options';
+import { Tab } from '../tab/tab';
+import { ITabGroup } from '../../tabGroup';
+import { TabGroupColorPalette } from '../../tabGroupAccent';
+export interface TabGroupIndicatorContext {
+    readonly tabsList: HTMLElement;
+    getTabGroups(): readonly ITabGroup[];
+    getActivePanelId(): string | undefined;
+    getTabMap(): Map<string, IValueDisposable<Tab>>;
+    getChipElement(groupId: string): HTMLElement | undefined;
+    getDirection(): DockviewHeaderDirection;
+    getColorPalette(): TabGroupColorPalette | undefined;
+}
+export interface ITabGroupIndicator {
+    readonly underlines: ReadonlyMap<string, HTMLElement>;
+    positionUnderlines(): void;
+    trackUnderlines(): void;
+    syncUnderlineElements(activeGroupIds: Set<string>): void;
+    getUnderline(groupId: string): HTMLElement | undefined;
+    dispose(): void;
+}
+/**
+ * Shared positioning logic for tab group indicators.
+ * Subclasses implement `applyShape` to control the visual output.
+ */
+declare abstract class BaseTabGroupIndicator implements ITabGroupIndicator {
+    protected readonly _ctx: TabGroupIndicatorContext;
+    protected readonly _underlines: Map<string, HTMLElement>;
+    private _rafId;
+    get underlines(): ReadonlyMap<string, HTMLElement>;
+    constructor(_ctx: TabGroupIndicatorContext);
+    positionUnderlines(): void;
+    /**
+     * Continuously reposition underlines every frame for the duration
+     * of a tab transition (~200ms), so the underline tracks tab sizes.
+     */
+    trackUnderlines(): void;
+    syncUnderlineElements(activeGroupIds: Set<string>): void;
+    getUnderline(groupId: string): HTMLElement | undefined;
+    dispose(): void;
+    /**
+     * Apply the visual shape to the underline element.
+     * Called once per tab group per frame with the computed geometry.
+     */
+    protected abstract applyShape(underline: HTMLElement, tg: ITabGroup, startEdge: number, span: number, containerCrossSize: number, activePanelId: string | undefined, containerRect: DOMRect, isVertical: boolean): void;
+    private _positionUnderlinesSync;
+}
+/**
+ * Chrome-style wrap-around indicator using SVG paths.
+ */
+export declare class WrapTabGroupIndicator extends BaseTabGroupIndicator {
+    private _applyStraightLine;
+    /**
+     * Chrome-style wrap-around underline: a stroked SVG path that runs
+     * along the bottom (or left edge in vertical mode), curving up and
+     * over the active tab with rounded corners.
+     *
+     * The SVG and path elements are created once per underline and reused;
+     * only the `d`, `stroke`, and viewport attributes are updated each frame.
+     */
+    protected applyShape(underline: HTMLElement, tg: ITabGroup, groupStart: number, groupSpan: number, containerCrossSize: number, activePanelId: string | undefined, containerRect: DOMRect, isVertical: boolean): void;
+}
+/**
+ * Flat continuous bar indicator — no wrap-around, just a colored line
+ * spanning the full tab group width.
+ */
+export declare class NoneTabGroupIndicator extends BaseTabGroupIndicator {
+    protected applyShape(underline: HTMLElement, tg: ITabGroup, _startEdge: number, span: number, _containerCrossSize: number, _activePanelId: string | undefined, _containerRect: DOMRect, isVertical: boolean): void;
+}
+export {};