dockview-core 5.1.0 → 6.0.0

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

@@ -11,19 +11,63 @@ import { GroupOptions } from './dockviewGroupPanelModel';
 import { DockviewGroupDropLocation } from './events';
 import { IDockviewPanel } from './dockviewPanel';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
-import { IGroupHeaderProps } from './framework';
+import { IGroupHeaderProps, ITabGroupChipRenderer } from './framework';
 import { FloatingGroupOptions } from './dockviewComponent';
 import { Contraints } from '../gridview/gridviewPanel';
 import { AcceptableEvent, IAcceptableEvent } from '../events';
 import { DockviewTheme } from './theme';
+import { ITabGroup } from './tabGroup';
+import { DockviewTabGroupColorEntry } from './tabGroupAccent';
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
     init(params: IGroupHeaderProps): void;
 }
-export interface TabContextMenuEvent {
+export type BuiltInContextMenuItem = 'close' | 'closeOthers' | 'closeAll' | 'separator';
+export type BuiltInChipContextMenuItem = 'separator' | 'colorPicker' | 'rename';
+export interface ContextMenuItemConfig {
+    label?: string;
+    /**
+     * A framework component to render as the menu item.
+     * The component type is opaque to core; the framework adapter renders it.
+     */
+    component?: unknown;
+    componentProps?: object;
+    /**
+     * A raw DOM element to embed as-is in the context menu.
+     * Use this when you want to render custom content without a framework component.
+     */
+    element?: HTMLElement;
+    action?: () => void;
+    disabled?: boolean;
+}
+export type ContextMenuItem = BuiltInContextMenuItem | ContextMenuItemConfig;
+export interface GetTabContextMenuItemsParams {
+    panel: IDockviewPanel;
+    group: DockviewGroupPanel;
+    api: DockviewApi;
     event: MouseEvent;
+}
+export interface GetTabGroupChipContextMenuItemsParams {
+    tabGroup: ITabGroup;
+    group: DockviewGroupPanel;
     api: DockviewApi;
+    event: MouseEvent;
+}
+export interface IContextMenuItemComponentProps {
     panel: IDockviewPanel;
+    group: DockviewGroupPanel;
+    api: DockviewApi;
+    /** Call to close the context menu */
+    close: () => void;
+    componentProps?: object;
+}
+export interface IContextMenuItemRenderer extends IDisposable {
+    readonly element: HTMLElement;
+    init(props: IContextMenuItemComponentProps): void;
+}
+export interface CreateContextMenuItemComponentOptions {
+    id: string;
+    component: unknown;
 }
 export interface ViewFactoryData {
     content: string;
@@ -69,7 +113,57 @@ export interface DockviewOptions {
      * This is only applied to the tab header section. Defaults to `custom`.
      */
     scrollbars?: 'native' | 'custom';
+    /**
+     * Return the items to display in the tab context menu on right-click.
+     *
+     * Use built-in string shortcuts (`'close'`, `'closeOthers'`, `'closeAll'`, `'separator'`)
+     * or provide a `ContextMenuItemConfig` object for custom items.
+     *
+     * If omitted, no context menu is shown.
+     * Return an empty array to suppress the menu for specific cases.
+     */
+    getTabContextMenuItems?: (params: GetTabContextMenuItemsParams) => ContextMenuItem[];
+    /**
+     * Return the items to display in the tab group chip context menu on right-click.
+     *
+     * Use built-in string shortcuts (`'separator'`, `'colorPicker'`, `'rename'`) or provide a
+     * `ContextMenuItemConfig` object for custom items.
+     * `'colorPicker'` renders a native grid of color swatches for the tab group.
+     * `'rename'` renders an inline text input to rename the tab group.
+     *
+     * If omitted, no context menu is shown on chip right-click.
+     * Return an empty array to suppress the menu for specific cases.
+     */
+    getTabGroupChipContextMenuItems?: (params: GetTabGroupChipContextMenuItemsParams) => (BuiltInChipContextMenuItem | ContextMenuItemConfig)[];
+    /**
+     * Factory to create custom tab group chip renderers.
+     * If not provided, the default chip renderer is used.
+     */
+    createTabGroupChipComponent?: (tabGroup: ITabGroup) => ITabGroupChipRenderer;
+    /**
+     * Replace the built-in tab group color palette with a user-defined list.
+     *
+     * Each entry has an `id` (stored on `tabGroup.color` and serialized),
+     * a `value` (any CSS color expression — hex, rgb(), `var(...)`, etc.),
+     * and an optional `label` shown in the context menu picker.
+     *
+     * If omitted, the default 9-color palette is used. The list fully
+     * replaces the defaults — there is no merge.
+     */
+    tabGroupColors?: DockviewTabGroupColorEntry[];
+    /**
+     * Controls how dockview applies tab group color accents.
+     *
+     * - `'palette'` (default): write `--dv-tab-group-color`, render the
+     *   color picker, and apply built-in accent styling.
+     * - `'off'`: opt out entirely. No `--dv-tab-group-color` is written,
+     *   the color picker is suppressed, and chips/indicators render
+     *   without the accent. The `tg.color` data field is preserved so
+     *   custom chip renderers can still read it and roll their own visual.
+     */
+    tabGroupAccent?: 'palette' | 'off';
 }
+export type TabAnimation = 'smooth' | 'default';
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;
     target: DockviewGroupDropLocation;
@@ -104,6 +198,7 @@ export interface DockviewFrameworkOptions {
     createTabComponent?: (options: CreateComponentOptions) => ITabRenderer | undefined;
     createComponent: (options: CreateComponentOptions) => IContentRenderer;
     createWatermarkComponent?: () => IWatermarkRenderer;
+    createContextMenuItemComponent?: (options: CreateContextMenuItemComponentOptions) => IContextMenuItemRenderer | undefined;
 }
 export type DockviewComponentOptions = DockviewOptions & DockviewFrameworkOptions;
 export interface PanelOptions<P extends object = Parameters> {

package/dist/esm/dockview/options.js

@@ -33,6 +33,11 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         theme: undefined,
         disableTabsOverflowList: undefined,
         scrollbars: undefined,
+        getTabContextMenuItems: undefined,
+        getTabGroupChipContextMenuItems: undefined,
+        createTabGroupChipComponent: undefined,
+        tabGroupColors: undefined,
+        tabGroupAccent: undefined,
     };
     return Object.keys(properties);
 })();

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

@@ -0,0 +1,99 @@
+import { Event } from '../events';
+import { CompositeDisposable } from '../lifecycle';
+/**
+ * The accent color associated with a tab group.
+ *
+ * This is any CSS color expression: a palette id (e.g. `'grey'`, `'blue'`),
+ * a raw color literal (`'#abc123'`, `'rgb(0,0,0)'`), or `undefined` to inherit
+ * the default. Resolution to a concrete CSS value is handled by the
+ * dockview's `TabGroupColorPalette` (see `tabGroupAccent.ts`).
+ */
+export type DockviewTabGroupColor = string;
+export interface SerializedTabGroup {
+    id: string;
+    label?: string;
+    color?: string;
+    collapsed: boolean;
+    panelIds: string[];
+    componentParams?: Record<string, unknown>;
+}
+export interface TabGroupOptions {
+    label?: string;
+    color?: string;
+    collapsed?: boolean;
+    /**
+     * Free-form data passed to a custom chip renderer
+     * (`createTabGroupChipComponent`). Read via `tabGroup.componentParams`
+     * inside the renderer's `init` / `update`. Must be JSON-serializable to
+     * round-trip through layout serialization.
+     */
+    componentParams?: Record<string, unknown>;
+}
+export interface ITabGroup {
+    readonly id: string;
+    readonly label: string;
+    readonly color: string | undefined;
+    readonly collapsed: boolean;
+    readonly panelIds: readonly string[];
+    readonly size: number;
+    readonly isEmpty: boolean;
+    readonly componentParams: Record<string, unknown> | undefined;
+    readonly onDidChange: Event<void>;
+    readonly onDidPanelChange: Event<{
+        panelId: string;
+        type: 'add' | 'remove';
+    }>;
+    readonly onDidCollapseChange: Event<boolean>;
+    readonly onDidDestroy: Event<void>;
+    addPanel(panelId: string, index?: number): void;
+    removePanel(panelId: string): boolean;
+    indexOfPanel(panelId: string): number;
+    containsPanel(panelId: string): boolean;
+    setLabel(value: string): void;
+    setColor(value: string | undefined): void;
+    setComponentParams(value: Record<string, unknown> | undefined): void;
+    collapse(): void;
+    expand(): void;
+    toggle(): void;
+    toJSON(): SerializedTabGroup;
+    dispose(): void;
+}
+export declare class TabGroup extends CompositeDisposable implements ITabGroup {
+    readonly id: string;
+    private _label;
+    private _color;
+    private _collapsed;
+    private _componentParams;
+    private readonly _panelIds;
+    private readonly _onDidChange;
+    readonly onDidChange: Event<void>;
+    private readonly _onDidPanelChange;
+    readonly onDidPanelChange: Event<{
+        panelId: string;
+        type: "add" | "remove";
+    }>;
+    private readonly _onDidCollapseChange;
+    readonly onDidCollapseChange: Event<boolean>;
+    private readonly _onDidDestroy;
+    readonly onDidDestroy: Event<void>;
+    get label(): string;
+    get color(): string | undefined;
+    get componentParams(): Record<string, unknown> | undefined;
+    setLabel(value: string): void;
+    setColor(value: string | undefined): void;
+    setComponentParams(value: Record<string, unknown> | undefined): void;
+    get collapsed(): boolean;
+    get panelIds(): readonly string[];
+    get size(): number;
+    get isEmpty(): boolean;
+    constructor(id: string, options?: TabGroupOptions);
+    addPanel(panelId: string, index?: number): void;
+    removePanel(panelId: string): boolean;
+    indexOfPanel(panelId: string): number;
+    containsPanel(panelId: string): boolean;
+    collapse(): void;
+    expand(): void;
+    toggle(): void;
+    toJSON(): SerializedTabGroup;
+    dispose(): void;
+}

package/dist/esm/dockview/tabGroup.js

@@ -0,0 +1,144 @@
+import { Emitter } from '../events';
+import { CompositeDisposable } from '../lifecycle';
+export class TabGroup extends CompositeDisposable {
+    get label() {
+        return this._label;
+    }
+    get color() {
+        return this._color;
+    }
+    get componentParams() {
+        return this._componentParams;
+    }
+    setLabel(value) {
+        if (this.isDisposed || this._label === value) {
+            return;
+        }
+        this._label = value;
+        this._onDidChange.fire();
+    }
+    setColor(value) {
+        if (this.isDisposed) {
+            return;
+        }
+        const next = value === '' ? undefined : value;
+        if (this._color === next) {
+            return;
+        }
+        this._color = next;
+        this._onDidChange.fire();
+    }
+    setComponentParams(value) {
+        if (this.isDisposed) {
+            return;
+        }
+        this._componentParams = value;
+        this._onDidChange.fire();
+    }
+    get collapsed() {
+        return this._collapsed;
+    }
+    get panelIds() {
+        return this._panelIds;
+    }
+    get size() {
+        return this._panelIds.length;
+    }
+    get isEmpty() {
+        return this._panelIds.length === 0;
+    }
+    constructor(id, options) {
+        var _a, _b;
+        super();
+        this.id = id;
+        this._collapsed = false;
+        this._panelIds = [];
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._onDidPanelChange = new Emitter();
+        this.onDidPanelChange = this._onDidPanelChange.event;
+        this._onDidCollapseChange = new Emitter();
+        this.onDidCollapseChange = this._onDidCollapseChange.event;
+        this._onDidDestroy = new Emitter();
+        this.onDidDestroy = this._onDidDestroy.event;
+        this._label = (_a = options === null || options === void 0 ? void 0 : options.label) !== null && _a !== void 0 ? _a : '';
+        this._color = (options === null || options === void 0 ? void 0 : options.color) === '' ? undefined : options === null || options === void 0 ? void 0 : options.color;
+        this._collapsed = (_b = options === null || options === void 0 ? void 0 : options.collapsed) !== null && _b !== void 0 ? _b : false;
+        this._componentParams = options === null || options === void 0 ? void 0 : options.componentParams;
+        this.addDisposables(this._onDidChange, this._onDidPanelChange, this._onDidCollapseChange, this._onDidDestroy);
+    }
+    addPanel(panelId, index) {
+        if (this.isDisposed) {
+            return;
+        }
+        if (this._panelIds.includes(panelId)) {
+            return;
+        }
+        const insertIndex = index !== undefined
+            ? Math.max(0, Math.min(index, this._panelIds.length))
+            : this._panelIds.length;
+        this._panelIds.splice(insertIndex, 0, panelId);
+        this._onDidPanelChange.fire({ panelId, type: 'add' });
+    }
+    removePanel(panelId) {
+        if (this.isDisposed) {
+            return false;
+        }
+        const index = this._panelIds.indexOf(panelId);
+        if (index === -1) {
+            return false;
+        }
+        this._panelIds.splice(index, 1);
+        this._onDidPanelChange.fire({ panelId, type: 'remove' });
+        return true;
+    }
+    indexOfPanel(panelId) {
+        return this._panelIds.indexOf(panelId);
+    }
+    containsPanel(panelId) {
+        return this._panelIds.includes(panelId);
+    }
+    collapse() {
+        if (this.isDisposed || this._collapsed) {
+            return;
+        }
+        this._collapsed = true;
+        this._onDidCollapseChange.fire(true);
+    }
+    expand() {
+        if (this.isDisposed || !this._collapsed) {
+            return;
+        }
+        this._collapsed = false;
+        this._onDidCollapseChange.fire(false);
+    }
+    toggle() {
+        if (this._collapsed) {
+            this.expand();
+        }
+        else {
+            this.collapse();
+        }
+    }
+    toJSON() {
+        const result = {
+            id: this.id,
+            collapsed: this._collapsed,
+            panelIds: [...this._panelIds],
+        };
+        if (this._label) {
+            result.label = this._label;
+        }
+        if (this._color !== undefined) {
+            result.color = this._color;
+        }
+        if (this._componentParams !== undefined) {
+            result.componentParams = this._componentParams;
+        }
+        return result;
+    }
+    dispose() {
+        this._onDidDestroy.fire();
+        super.dispose();
+    }
+}

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

@@ -0,0 +1,65 @@
+/**
+ * A single entry in the tab-group color palette.
+ *
+ * `id` is the value stored on `ITabGroup.color` and serialized in
+ * `SerializedTabGroup.color`. `value` is any CSS color expression — a hex
+ * literal, an rgb()/hsl()/oklch() function, or a `var(...)` reference.
+ *
+ * The default palette ships with `var(--dv-tab-group-color-${id})` values so
+ * themes can override the defaults purely in CSS. User-supplied palettes
+ * typically use raw color literals.
+ */
+export interface DockviewTabGroupColorEntry {
+    id: string;
+    value: string;
+    label?: string;
+}
+export declare const DEFAULT_TAB_GROUP_COLORS: readonly DockviewTabGroupColorEntry[];
+/**
+ * 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.
+ */
+export declare class TabGroupColorPalette {
+    private _entries;
+    private _byId;
+    private _enabled;
+    constructor(entries: readonly DockviewTabGroupColorEntry[], enabled?: boolean);
+    get enabled(): boolean;
+    set enabled(value: boolean);
+    /**
+     * 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.
+     */
+    setEntries(entries: readonly DockviewTabGroupColorEntry[]): void;
+    entries(): readonly DockviewTabGroupColorEntry[];
+    has(id: string): boolean;
+    get(id: string): DockviewTabGroupColorEntry | undefined;
+    /** First entry's id; used as the default when a color is unset. */
+    defaultId(): string | undefined;
+    /**
+     * Resolve a stored color to its CSS value, or undefined if no value
+     * should be written (palette disabled, or color empty/undefined).
+     */
+    resolveValue(color: string | undefined): string | undefined;
+}
+/**
+ * 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.
+ */
+export declare function applyTabGroupAccent(el: HTMLElement, color: string | undefined, palette: TabGroupColorPalette | undefined): void;
+/**
+ * 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).
+ */
+export declare function resolveTabGroupAccent(color: string | undefined, palette: TabGroupColorPalette | undefined): string | undefined;

package/dist/esm/dockview/tabGroupAccent.js

@@ -0,0 +1,116 @@
+export const 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.
+ */
+export class TabGroupColorPalette {
+    constructor(entries, enabled = true) {
+        this._entries = entries.slice();
+        this._byId = new Map(entries.map((e) => [e.id, e]));
+        this._enabled = enabled;
+    }
+    get enabled() {
+        return this._enabled;
+    }
+    set enabled(value) {
+        this._enabled = value;
+    }
+    /**
+     * 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.
+     */
+    setEntries(entries) {
+        this._entries = entries.slice();
+        this._byId = new Map(entries.map((e) => [e.id, e]));
+    }
+    entries() {
+        return this._entries;
+    }
+    has(id) {
+        return this._byId.has(id);
+    }
+    get(id) {
+        return this._byId.get(id);
+    }
+    /** First entry's id; used as the default when a color is unset. */
+    defaultId() {
+        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).
+     */
+    resolveValue(color) {
+        if (!this._enabled || !color) {
+            return undefined;
+        }
+        const entry = this._byId.get(color);
+        return entry ? entry.value : color;
+    }
+}
+let _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(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.
+ */
+export function applyTabGroupAccent(el, color, palette) {
+    const 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).
+ */
+export function resolveTabGroupAccent(color, palette) {
+    return (palette !== null && palette !== void 0 ? palette : getFallbackPalette()).resolveValue(color);
+}

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