dockview-core 5.2.0 → 6.0.1

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

@@ -32,8 +32,11 @@ export class Tab extends CompositeDisposable {
         this.accessor = accessor;
         this.group = group;
         this.content = undefined;
+        this._direction = 'horizontal';
         this._onPointDown = new Emitter();
         this.onPointerDown = this._onPointDown.event;
+        this._onTabClick = new Emitter();
+        this.onTabClick = this._onTabClick.event;
         this._onDropped = new Emitter();
         this.onDrop = this._onDropped.event;
         this._onDragStart = new Emitter();
@@ -48,15 +51,20 @@ export class Tab extends CompositeDisposable {
         this.dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel, !!this.accessor.options.disableDnd);
         this.dropTarget = new Droptarget(this._element, {
             acceptedTargetZones: ['left', 'right'],
-            overlayModel: { activationSize: { value: 50, type: 'percentage' } },
+            overlayModel: this._buildOverlayModel(),
             canDisplayOverlay: (event, position) => {
+                var _a;
                 if (this.group.locked) {
                     return false;
                 }
                 const data = getPanelData();
                 if (data && this.accessor.id === data.viewId) {
-                    if (this.accessor.options.tabAnimation === 'smooth' &&
-                        data.groupId === this.group.id) {
+                    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;
@@ -66,19 +74,65 @@ export class Tab extends CompositeDisposable {
             getOverrideTarget: () => { 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._onDragEnd, this.dragHandler.onDragStart((event) => {
+        this.addDisposables(this._onPointDown, this._onTabClick, this._onDropped, this._onDragStart, this._onDragEnd, this.accessor.onDidOptionsChange(() => {
+            this.dropTarget.setOverlayModel(this._buildOverlayModel());
+        }), this.dragHandler.onDragStart((event) => {
+            var _a;
             if (event.dataTransfer) {
                 const style = getComputedStyle(this.element);
                 const newNode = this.element.cloneNode(true);
-                Array.from(style).forEach((key) => newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key)));
+                const isVertical = 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.
+                 */
+                const verticalSkip = 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).forEach((key) => {
+                    if (isVertical && verticalSkip.has(key)) {
+                        return;
+                    }
+                    newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
+                });
+                if (isVertical) {
+                    // Force horizontal text flow and swap the physical
+                    // dimensions so the ghost appears as a horizontal tab.
+                    newNode.style.setProperty('writing-mode', 'horizontal-tb');
+                    newNode.style.setProperty('width', style.height);
+                    newNode.style.setProperty('height', style.width);
+                }
                 newNode.style.position = 'absolute';
+                newNode.classList.add('dv-tab-ghost-drag');
                 addGhostImage(event.dataTransfer, newNode, {
                     y: -10,
                     x: 30,
                 });
             }
             this._onDragStart.fire(event);
-            if (this.accessor.options.tabAnimation === 'smooth') {
+            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(() => {
@@ -90,6 +144,10 @@ export class Tab extends CompositeDisposable {
             this._onDragEnd.fire(event);
         }), this.dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
             this._onPointDown.fire(event);
+        }), addDisposableListener(this._element, 'click', (event) => {
+            this._onTabClick.fire(event);
+        }), addDisposableListener(this._element, 'contextmenu', (event) => {
+            this.accessor.contextMenuController.show(this.panel, this.group, event);
         }), this.dropTarget.onDrop((event) => {
             this._onDropped.fire(event);
         }), this.dropTarget);
@@ -105,11 +163,27 @@ export class Tab extends CompositeDisposable {
         this.content = part;
         this._element.appendChild(this.content.element);
     }
+    _buildOverlayModel() {
+        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).
+        const 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,
+        };
+    }
+    setDirection(direction) {
+        this._direction = direction;
+        this.dropTarget.setTargetZones(direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right']);
+    }
     updateDragAndDropState() {
         this._element.draggable = !this.accessor.options.disableDnd;
         this.dragHandler.setDisabled(!!this.accessor.options.disableDnd);
     }
-    dispose() {
-        super.dispose();
-    }
 }

package/dist/esm/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/esm/dockview/components/titlebar/tabGroupChip.js

@@ -0,0 +1,68 @@
+import { addDisposableListener, Emitter } from '../../../events';
+import { CompositeDisposable } from '../../../lifecycle';
+import { toggleClass } from '../../../dom';
+import { applyTabGroupAccent, } from '../../tabGroupAccent';
+export class TabGroupChip extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
+    constructor(_palette) {
+        super();
+        this._palette = _palette;
+        this._onClick = new Emitter();
+        this.onClick = this._onClick.event;
+        this._onContextMenu = new Emitter();
+        this.onContextMenu = this._onContextMenu.event;
+        this._onDragStart = new 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, addDisposableListener(this._element, 'click', (event) => {
+            this._onClick.fire(event);
+        }), addDisposableListener(this._element, 'contextmenu', (event) => {
+            this._onContextMenu.fire(event);
+        }), addDisposableListener(this._element, 'dragstart', (event) => {
+            this._onDragStart.fire(event);
+        }));
+    }
+    init(params) {
+        this._tabGroup = params.tabGroup;
+        this.updateColor(params.tabGroup.color);
+        this.updateLabel(params.tabGroup.label);
+        this.updateCollapsed(params.tabGroup.collapsed);
+        this.addDisposables(params.tabGroup.onDidChange(() => {
+            if (this._tabGroup) {
+                this.updateColor(this._tabGroup.color);
+                this.updateLabel(this._tabGroup.label);
+            }
+        }), params.tabGroup.onDidCollapseChange((collapsed) => {
+            this.updateCollapsed(collapsed);
+        }), this._onClick.event(() => {
+            var _a;
+            (_a = this._tabGroup) === null || _a === void 0 ? void 0 : _a.toggle();
+        }));
+    }
+    update(params) {
+        this._tabGroup = params.tabGroup;
+        this.updateColor(params.tabGroup.color);
+        this.updateLabel(params.tabGroup.label);
+        this.updateCollapsed(params.tabGroup.collapsed);
+    }
+    updateColor(color) {
+        var _a;
+        applyTabGroupAccent(this._element, color, this._palette);
+        toggleClass(this._element, 'dv-tab-group-chip--accent-off', ((_a = this._palette) === null || _a === void 0 ? void 0 : _a.enabled) === false);
+    }
+    updateLabel(label) {
+        this._label.textContent = label;
+        toggleClass(this._label, 'dv-tab-group-chip-label--empty', !label);
+    }
+    updateCollapsed(collapsed) {
+        toggleClass(this._element, 'dv-tab-group-chip--collapsed', collapsed);
+    }
+}

package/dist/esm/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 {};

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

@@ -0,0 +1,354 @@
+import { resolveTabGroupAccent, } from '../../tabGroupAccent';
+/**
+ * Shared positioning logic for tab group indicators.
+ * Subclasses implement `applyShape` to control the visual output.
+ */
+class BaseTabGroupIndicator {
+    get underlines() {
+        return this._underlines;
+    }
+    constructor(_ctx) {
+        this._ctx = _ctx;
+        this._underlines = new Map();
+        this._rafId = null;
+    }
+    positionUnderlines() {
+        requestAnimationFrame(() => {
+            this._positionUnderlinesSync();
+        });
+    }
+    /**
+     * Continuously reposition underlines every frame for the duration
+     * of a tab transition (~200ms), so the underline tracks tab sizes.
+     */
+    trackUnderlines() {
+        if (this._rafId !== null) {
+            cancelAnimationFrame(this._rafId);
+        }
+        const start = performance.now();
+        const duration = 250; // slightly longer than transition to ensure we catch the end
+        const tick = () => {
+            this._positionUnderlinesSync();
+            if (performance.now() - start < duration) {
+                this._rafId = requestAnimationFrame(tick);
+            }
+            else {
+                this._rafId = null;
+            }
+        };
+        this._rafId = requestAnimationFrame(tick);
+    }
+    syncUnderlineElements(activeGroupIds) {
+        // Ensure underline elements exist for active groups
+        for (const groupId of activeGroupIds) {
+            if (!this._underlines.has(groupId)) {
+                const underline = document.createElement('div');
+                underline.className = 'dv-tab-group-underline';
+                this._ctx.tabsList.appendChild(underline);
+                this._underlines.set(groupId, underline);
+            }
+        }
+        // Remove underlines for dissolved groups
+        for (const [groupId, el] of this._underlines) {
+            if (!activeGroupIds.has(groupId)) {
+                el.remove();
+                this._underlines.delete(groupId);
+            }
+        }
+    }
+    getUnderline(groupId) {
+        return this._underlines.get(groupId);
+    }
+    dispose() {
+        if (this._rafId !== null) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = null;
+        }
+        for (const [, el] of this._underlines) {
+            el.remove();
+        }
+        this._underlines.clear();
+    }
+    _positionUnderlinesSync() {
+        const containerRect = this._ctx.tabsList.getBoundingClientRect();
+        const tabGroups = this._ctx.getTabGroups();
+        const isVertical = this._ctx.getDirection() === 'vertical';
+        const containerCrossSize = isVertical
+            ? containerRect.width
+            : containerRect.height;
+        const activePanelId = this._ctx.getActivePanelId();
+        const tabMap = this._ctx.getTabMap();
+        for (const tg of tabGroups) {
+            const underline = this._underlines.get(tg.id);
+            if (!underline) {
+                continue;
+            }
+            const panelIds = tg.panelIds;
+            if (panelIds.length === 0) {
+                underline.style.display = 'none';
+                continue;
+            }
+            underline.style.display = '';
+            const chipEl = this._ctx.getChipElement(tg.id);
+            // In vertical mode, compute top/bottom edges; in horizontal, left/right.
+            let startEdge;
+            if (chipEl) {
+                const chipRect = chipEl.getBoundingClientRect();
+                const chipStyle = getComputedStyle(chipEl);
+                const leadingMargin = isVertical
+                    ? Number.parseFloat(chipStyle.marginTop) || 0
+                    : Number.parseFloat(chipStyle.marginLeft) || 0;
+                startEdge = isVertical
+                    ? chipRect.top - containerRect.top - leadingMargin
+                    : chipRect.left - containerRect.left - leadingMargin;
+            }
+            else {
+                const firstPanelId = panelIds[0];
+                const firstTabEntry = tabMap.get(firstPanelId);
+                if (firstTabEntry) {
+                    const firstRect = firstTabEntry.value.element.getBoundingClientRect();
+                    startEdge = isVertical
+                        ? firstRect.top - containerRect.top
+                        : firstRect.left - containerRect.left;
+                }
+                else {
+                    startEdge = 0;
+                }
+            }
+            // Measure the actual last tab position (follows CSS transitions in real-time)
+            const lastPanelId = panelIds[panelIds.length - 1];
+            const lastTabEntry = tabMap.get(lastPanelId);
+            if (!lastTabEntry) {
+                if (isVertical) {
+                    underline.style.top = `${startEdge}px`;
+                    underline.style.height = '0px';
+                    underline.style.left = '';
+                    underline.style.width = '';
+                }
+                else {
+                    underline.style.left = `${startEdge}px`;
+                    underline.style.width = '0px';
+                    underline.style.top = '';
+                    underline.style.height = '';
+                }
+                continue;
+            }
+            const lastTabRect = lastTabEntry.value.element.getBoundingClientRect();
+            let endEdge = isVertical
+                ? lastTabRect.bottom - containerRect.top
+                : lastTabRect.right - containerRect.left;
+            let span = endEdge - startEdge;
+            // During collapse or expand: converge both edges toward chip center
+            const isAnimating = tg.collapsed ||
+                tg.panelIds.some((pid) => {
+                    const te = tabMap.get(pid);
+                    return (te &&
+                        te.value.element.classList.contains('dv-tab--group-expanding'));
+                });
+            if (isAnimating && chipEl) {
+                const chipRect = chipEl.getBoundingClientRect();
+                const chipCenter = isVertical
+                    ? chipRect.top + chipRect.height / 2 - containerRect.top
+                    : chipRect.left + chipRect.width / 2 - containerRect.left;
+                // Sum of current visible tab sizes (shrinking or growing)
+                let currentTabSize = 0;
+                let fullTabSize = 0;
+                for (const pid of tg.panelIds) {
+                    const te = tabMap.get(pid);
+                    if (!te)
+                        continue;
+                    const el = te.value.element;
+                    if (isVertical) {
+                        currentTabSize += el.getBoundingClientRect().height;
+                        fullTabSize += el.scrollHeight;
+                    }
+                    else {
+                        currentTabSize += el.getBoundingClientRect().width;
+                        fullTabSize += el.scrollWidth;
+                    }
+                }
+                // progress: 0 when tabs at 0 size, 1 when fully open
+                const progress = fullTabSize > 0
+                    ? Math.min(1, currentTabSize / fullTabSize)
+                    : 0;
+                // Interpolate start and end edges toward chip center
+                startEdge = chipCenter + (startEdge - chipCenter) * progress;
+                endEdge = chipCenter + (endEdge - chipCenter) * progress;
+                span = Math.max(0, endEdge - startEdge);
+            }
+            if (isVertical) {
+                underline.style.top = `${startEdge}px`;
+                underline.style.height = `${Math.max(0, span)}px`;
+                // Clear horizontal properties
+                underline.style.left = '';
+                underline.style.width = '';
+            }
+            else {
+                underline.style.left = `${startEdge}px`;
+                underline.style.width = `${Math.max(0, span)}px`;
+                // Clear vertical properties
+                underline.style.top = '';
+                underline.style.height = '';
+            }
+            this.applyShape(underline, tg, startEdge, span, containerCrossSize, activePanelId, containerRect, isVertical);
+        }
+    }
+}
+/**
+ * Chrome-style wrap-around indicator using SVG paths.
+ */
+export class WrapTabGroupIndicator extends BaseTabGroupIndicator {
+    _applyStraightLine(svg, path, underline, t, mainSize, isVertical) {
+        if (isVertical) {
+            svg.setAttribute('width', String(t));
+            svg.setAttribute('height', String(mainSize));
+            underline.style.width = `${t}px`;
+            underline.style.height = `${mainSize}px`;
+            path.setAttribute('d', `M ${t / 2},0 L ${t / 2},${mainSize}`);
+        }
+        else {
+            svg.setAttribute('width', String(mainSize));
+            svg.setAttribute('height', String(t));
+            underline.style.width = `${mainSize}px`;
+            underline.style.height = `${t}px`;
+            path.setAttribute('d', `M 0,${t / 2} L ${mainSize},${t / 2}`);
+        }
+    }
+    /**
+     * 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.
+     */
+    applyShape(underline, tg, groupStart, groupSpan, containerCrossSize, activePanelId, containerRect, isVertical) {
+        const t = 2; // line thickness in px
+        const crossSize = containerCrossSize;
+        const mainSize = groupSpan;
+        const color = resolveTabGroupAccent(tg.color, this._ctx.getColorPalette());
+        if (mainSize <= 0 || crossSize <= 0 || color === undefined) {
+            underline.style.display = 'none';
+            return;
+        }
+        underline.style.display = '';
+        // Find the active tab within this group
+        let activeTabEntry;
+        if (activePanelId && tg.panelIds.includes(activePanelId)) {
+            activeTabEntry = this._ctx.getTabMap().get(activePanelId);
+        }
+        // Ensure SVG + path child exists (created once, reused)
+        let svg = underline.firstElementChild;
+        let path;
+        if (!svg || svg.tagName !== 'svg') {
+            underline.innerHTML = '';
+            svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.style.display = 'block';
+            path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('fill', 'none');
+            svg.appendChild(path);
+            underline.appendChild(svg);
+        }
+        else {
+            path = svg.firstElementChild;
+        }
+        path.setAttribute('stroke', color);
+        path.setAttribute('stroke-width', String(t));
+        if (!activeTabEntry) {
+            this._applyStraightLine(svg, path, underline, t, mainSize, isVertical);
+            return;
+        }
+        const activeRect = activeTabEntry.value.element.getBoundingClientRect();
+        // Compute active tab start/end relative to the group start
+        let aStart;
+        let aEnd;
+        if (isVertical) {
+            aStart = Math.max(0, activeRect.top - containerRect.top - groupStart);
+            aEnd = Math.min(mainSize, activeRect.bottom - containerRect.top - groupStart);
+        }
+        else {
+            aStart = Math.max(0, activeRect.left - containerRect.left - groupStart);
+            aEnd = Math.min(mainSize, activeRect.right - containerRect.left - groupStart);
+        }
+        if (aEnd <= aStart) {
+            this._applyStraightLine(svg, path, underline, t, mainSize, isVertical);
+            return;
+        }
+        const r = 6; // corner radius
+        const half = t / 2;
+        if (isVertical) {
+            const svgW = crossSize;
+            const svgH = mainSize;
+            svg.setAttribute('width', String(svgW));
+            svg.setAttribute('height', String(svgH));
+            underline.style.width = `${svgW}px`;
+            underline.style.height = `${svgH}px`;
+            const xLeft = half;
+            const xRight = svgW - half;
+            const d = [
+                `M ${xLeft},0`,
+                `L ${xLeft},${aStart - r}`,
+                `Q ${xLeft},${aStart} ${xLeft + r},${aStart}`,
+                `L ${xRight - r},${aStart}`,
+                `Q ${xRight},${aStart} ${xRight},${aStart + r}`,
+                `L ${xRight},${aEnd - r}`,
+                `Q ${xRight},${aEnd} ${xRight - r},${aEnd}`,
+                `L ${xLeft + r},${aEnd}`,
+                `Q ${xLeft},${aEnd} ${xLeft},${aEnd + r}`,
+                `L ${xLeft},${svgH}`,
+            ].join(' ');
+            path.setAttribute('d', d);
+        }
+        else {
+            const svgW = mainSize;
+            const svgH = crossSize;
+            svg.setAttribute('width', String(svgW));
+            svg.setAttribute('height', String(svgH));
+            underline.style.width = `${svgW}px`;
+            underline.style.height = `${svgH}px`;
+            const yBot = svgH - half;
+            const yTop = half;
+            const d = [
+                `M 0,${yBot}`,
+                `L ${aStart - r},${yBot}`,
+                `Q ${aStart},${yBot} ${aStart},${yBot - r}`,
+                `L ${aStart},${yTop + r}`,
+                `Q ${aStart},${yTop} ${aStart + r},${yTop}`,
+                `L ${aEnd - r},${yTop}`,
+                `Q ${aEnd},${yTop} ${aEnd},${yTop + r}`,
+                `L ${aEnd},${yBot - r}`,
+                `Q ${aEnd},${yBot} ${aEnd + r},${yBot}`,
+                `L ${svgW},${yBot}`,
+            ].join(' ');
+            path.setAttribute('d', d);
+        }
+    }
+}
+/**
+ * Flat continuous bar indicator — no wrap-around, just a colored line
+ * spanning the full tab group width.
+ */
+export class NoneTabGroupIndicator extends BaseTabGroupIndicator {
+    applyShape(underline, tg, _startEdge, span, _containerCrossSize, _activePanelId, _containerRect, isVertical) {
+        const t = 2; // line thickness in px
+        const color = resolveTabGroupAccent(tg.color, this._ctx.getColorPalette());
+        if (span <= 0 || color === undefined) {
+            underline.style.display = 'none';
+            return;
+        }
+        underline.style.display = '';
+        // Clear any SVG content left over from a mode switch
+        if (underline.firstElementChild) {
+            underline.innerHTML = '';
+        }
+        underline.style.backgroundColor = color;
+        if (isVertical) {
+            underline.style.width = `${t}px`;
+            underline.style.height = `${span}px`;
+        }
+        else {
+            underline.style.width = `${span}px`;
+            underline.style.height = `${t}px`;
+        }
+    }
+}