From 6f3378046b2449648310df3e69ccf2209b50f1de Mon Sep 17 00:00:00 2001
From: Emil Jasinski <emil.jasinski@hexagon.com>
Date: Mon, 22 Sep 2025 10:56:36 +0200
Subject: [PATCH] Window-like popup

---
 demo/App.tsx                     |   1 +
 demo/public/layouts/popup.layout | 215 ++++++++++++++++++++++++++
 src/I18nLabel.ts                 |   1 +
 src/Types.ts                     |   3 +
 src/model/Actions.ts             |  15 ++
 src/model/IJsonModel.ts          |   6 +
 src/model/LayoutPopup.ts         | 119 +++++++++++++++
 src/model/Model.ts               |  53 ++++++-
 src/model/RowNode.ts             |   3 +-
 src/model/TabNode.ts             |  14 ++
 src/model/TabSetNode.ts          |  15 +-
 src/view/Icons.tsx               |  16 ++
 src/view/Layout.tsx              | 249 ++++++++++++++++++++++++++++++-
 src/view/Popup.tsx               |  38 +++++
 src/view/Row.tsx                 |  17 ++-
 src/view/TabButton.tsx           |  12 ++
 src/view/TabSet.tsx              |  49 +++++-
 style/_base.scss                 |  42 ++++++
 style/combined.css               |  32 ++++
 style/dark.css                   |  32 ++++
 style/gray.css                   |  32 ++++
 style/light.css                  |  32 ++++
 style/rounded.css                |  32 ++++
 style/underline.css              |  32 ++++
 24 files changed, 1051 insertions(+), 9 deletions(-)
 create mode 100644 demo/public/layouts/popup.layout
 create mode 100644 src/model/LayoutPopup.ts
 create mode 100644 src/view/Popup.tsx

diff --git a/demo/App.tsx b/demo/App.tsx
index d7641b34..ed07fb6b 100644
--- a/demo/App.tsx
+++ b/demo/App.tsx
@@ -541,6 +541,7 @@ function App() {
                     <div className="toolbar" dir="ltr">
                         <select className="toolbar_control" onChange={onSelectLayout}>
                             <option value="default">Default</option>
+                            <option value="popup">Popup</option>
                             <option value="newfeatures">New Features</option>
                             <option value="simple">Simple</option>
                             <option value="mosaic">Mosaic Style</option>
diff --git a/demo/public/layouts/popup.layout b/demo/public/layouts/popup.layout
new file mode 100644
index 00000000..a422f750
--- /dev/null
+++ b/demo/public/layouts/popup.layout
@@ -0,0 +1,215 @@
+{
+	"global": {
+		"tabSetEnableSingleTabStretch": true
+	},
+	"borders": [],
+	"layout": {
+		"type": "row",
+		"id": "1",
+		"children": [
+			{
+				"type": "tabset",
+				"id": "2",
+				"weight": 0.2,
+				"children": [
+					{
+						"type": "tab",
+						"id": "3",
+						"name": "Layout JSON",
+						"component": "json",
+						"enablePopout": true
+					}
+				],
+				"active": true
+			},
+			{
+				"type": "tabset",
+				"id": "4",
+				"weight": 0.2,
+				"children": [
+					{
+						"type": "tab",
+						"id": "5",
+						"name": "Grid 1",
+						"component": "grid",
+						"icon": "images/article.svg",
+						"enablePopout": true
+					},
+					{
+						"type": "tab",
+						"id": "5b",
+						"name": "Grid 1",
+						"component": "grid",
+						"icon": "images/article.svg",
+						"enablePopout": true
+					}
+				]
+			}
+		]
+	},
+	"popups": {
+		"b0d755f6-b7ca-48d0-bafc-8d37241b3db4": {
+			"rect": {
+				"height": 200,
+				"width": 400,
+				"x": 100,
+				"y": 100
+			},
+			"layout": {
+				"type": "row",
+				"id": "6",
+				"children": [
+					{
+						"type": "tabset",
+						"id": "7",
+						"weight": 1,
+						"children": [
+							{
+								"type": "tab",
+								"id": "8",
+								"name": "Grid 2",
+								"component": "grid",
+								"icon": "images/article.svg"
+							},
+							{
+								"type": "tab",
+								"id": "9",
+								"name": "Grid 3",
+								"component": "grid",
+								"icon": "images/article.svg"
+							}
+						]
+					}
+				]
+			}
+		},
+		"6356e1d9-8b58-4139-9f7c-846ac1185ae0": {
+			"rect": {
+				"height": 200,
+				"width": 400,
+				"x": 600,
+				"y": 200
+			},
+			"layout": {
+				"type": "row",
+				"id": "6h",
+				"children": [
+					{
+						"type": "tabset",
+						"id": "7s",
+						"weight": 1,
+						"children": [
+							{
+								"type": "tab",
+								"id": "8a",
+								"name": "Grid 2dfg",
+								"component": "grid",
+								"icon": "images/article.svg"
+							}
+						]
+					}
+				]
+			}
+		},
+		"8bfed9a6-470d-4309-80f6-ea8ff367f5a4": {
+			"rect": {
+				"height": 100,
+				"width": 800,
+				"x": 100,
+				"y": 600
+			},
+			"layout": {
+				"type": "row",
+				"id": "feb0094c-0aac-421e-9154-1c4998a556c0",
+				"children": [
+					{
+						"type": "tabset",
+						"id": "2a9889d9-cf04-4269-87c9-bbc1759842cf",
+						"weight": 0.2,
+						"children": [
+							{
+								"type": "tab",
+								"id": "6c1e256f-ed5d-4500-88a2-6941fcd18e69",
+								"name": "Layout JSON",
+								"component": "json"
+							}
+						],
+						"active": true
+					},
+					{
+						"type": "tabset",
+						"id": "b0788f86-7a8b-4643-959f-600711f6cab7",
+						"weight": 0.2,
+						"children": [
+							{
+								"type": "tab",
+								"id": "0fe797bf-f9f0-42ff-9bad-28032303b087",
+								"name": "Grid 1",
+								"component": "grid",
+								"icon": "images/article.svg"
+							},
+							{
+								"type": "tab",
+								"id": "d057cdeb-7420-467f-9165-6acf4323712c",
+								"name": "Grid 1",
+								"component": "grid",
+								"icon": "images/article.svg"
+							}
+						]
+					}
+				]
+			}
+		}
+	},
+	"popouts": {
+		"2feb4a46-0d72-458c-9d29-82495938cda7": {
+			"rect": {
+				"height": 300,
+				"width": 800,
+				"x": 100,
+				"y": 600
+			},
+			"layout": {
+				"type": "row",
+				"id": "d0ec924c-3d4b-4484-8ff5-d44722775f70",
+				"children": [
+					{
+						"type": "tabset",
+						"id": "bac93933-288a-4a0b-b9f5-823ec9745570",
+						"weight": 0.2,
+						"children": [
+							{
+								"type": "tab",
+								"id": "2e3d0e6e-aee7-4476-b19b-10f24851b67c",
+								"name": "Layout JSON",
+								"component": "json"
+							}
+						],
+						"active": true
+					},
+					{
+						"type": "tabset",
+						"id": "cce5875c-263d-443a-ad54-3f9476f0ade9",
+						"weight": 0.2,
+						"children": [
+							{
+								"type": "tab",
+								"id": "0cafdc45-5694-412d-8cce-786c86925128",
+								"name": "Grid 1",
+								"component": "grid",
+								"icon": "images/article.svg"
+							},
+							{
+								"type": "tab",
+								"id": "2857d7af-e201-47f6-bdac-5f1c145a2e7e",
+								"name": "Grid 1",
+								"component": "grid",
+								"icon": "images/article.svg"
+							}
+						]
+					}
+				]
+			}
+		}
+	}
+}
diff --git a/src/I18nLabel.ts b/src/I18nLabel.ts
index c79e22b0..9e7785dd 100644
--- a/src/I18nLabel.ts
+++ b/src/I18nLabel.ts
@@ -1,5 +1,6 @@
 export enum I18nLabel {
     Close_Tab = "Close",
+    Pin_Tab = "Toggle docking",
     Close_Tabset = "Close tab set",
     Active_Tabset = "Active tab set",
     Move_Tabset = "Move tab set",
diff --git a/src/Types.ts b/src/Types.ts
index cedd42cb..1e49ffc8 100644
--- a/src/Types.ts
+++ b/src/Types.ts
@@ -111,4 +111,7 @@ export enum CLASSES {
 
     FLEXLAYOUT__MINI_SCROLLBAR = "flexlayout__mini_scrollbar",
     FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER = "flexlayout__mini_scrollbar_container",
+
+    FLEXLAYOUT__POPUP = "flexlayout__popup",
+    FLEXLAYOUT__POPUP_TABBAR_OUTER = "flexlayout__popup_tabbar_outer",
 }
diff --git a/src/model/Actions.ts b/src/model/Actions.ts
index 506ff840..14503b46 100755
--- a/src/model/Actions.ts
+++ b/src/model/Actions.ts
@@ -22,6 +22,9 @@ export class Actions {
     static POPOUT_TABSET = "FlexLayout_PopoutTabset";
     static CLOSE_WINDOW = "FlexLayout_CloseWindow";
     static CREATE_WINDOW = "FlexLayout_CreateWindow";
+    static UPDATE_WINDOW_RECT = "FlexLayout_UpdateWindowRect";
+    static TOGGLE_DOCKING_MODE = "FlexLayout_ToggleDockingMode";
+    static BRING_TO_FRONT = "FlexLayout_BringToFront";
 
     /**
      * Adds a tab node to the given tabset node
@@ -185,4 +188,16 @@ export class Actions {
     static createWindow(layout: IJsonRowNode, rect: IJsonRect): Action {
         return new Action(Actions.CREATE_WINDOW, { layout, rect});
     }
+
+    static updateWindowRect(windowId: string, updatedRect: {x?: number, y?: number, width?: number, height?: number}): Action {
+        return new Action(Actions.UPDATE_WINDOW_RECT, { windowId, ...updatedRect });
+    }
+
+    static toggleDockingMode(windowId: string): Action {
+        return new Action(Actions.TOGGLE_DOCKING_MODE, { windowId });
+    }
+
+    static bringToFront(windowId: string): Action {
+        return new Action(Actions.BRING_TO_FRONT, { windowId });
+    }
 }
diff --git a/src/model/IJsonModel.ts b/src/model/IJsonModel.ts
index 9545c4b6..bd8b367c 100755
--- a/src/model/IJsonModel.ts
+++ b/src/model/IJsonModel.ts
@@ -7,6 +7,7 @@ export interface IJsonModel {
     borders?: IJsonBorderNode[];
     layout: IJsonRowNode; // top level 'row' is horizontal, rows inside rows take opposite orientation to parent row (ie can act as columns)
 	popouts?: Record<string, IJsonPopout>;
+	popups?: Record<string, IJsonPopup>;
 }
 
 export interface IJsonRect {
@@ -21,6 +22,11 @@ export interface IJsonPopout {
 	rect: IJsonRect ;
 }
 
+export interface IJsonPopup {
+    layout: IJsonRowNode;
+	rect: IJsonRect ;
+}
+
 export interface IJsonBorderNode extends IBorderAttributes {
     location: IBorderLocation;
     children: IJsonTabNode[];
diff --git a/src/model/LayoutPopup.ts b/src/model/LayoutPopup.ts
new file mode 100644
index 00000000..d693629c
--- /dev/null
+++ b/src/model/LayoutPopup.ts
@@ -0,0 +1,119 @@
+import { Rect } from "../Rect";
+import { IJsonPopup } from "./IJsonModel";
+import { Model } from "./Model";
+import { RowNode } from "./RowNode";
+import { Node } from "./Node";
+import { TabSetNode } from "./TabSetNode";
+import { LayoutInternal } from "../view/Layout";
+
+export class LayoutPopup {
+    private _windowId: string;
+    private _layout: LayoutInternal | undefined;
+    private _rect: Rect;
+    private _window?: Window | undefined;
+    private _root?: RowNode | undefined;
+    private _maximizedTabSet?: TabSetNode | undefined;
+    private _activeTabSet?: TabSetNode | undefined;
+    private _toScreenRectFunction: (rect: Rect) => Rect;
+    private _isDockingMode: boolean = false;
+
+    constructor(windowId: string, rect: Rect) {
+        this._windowId = windowId;
+        this._rect = rect;
+        this._toScreenRectFunction = (r) => r;
+    }
+
+    public visitNodes(fn: (node: Node, level: number) => void) {
+        this.root!.forEachNode(fn, 0);
+    }
+
+    public get windowId(): string {
+        return this._windowId;
+    }
+
+    public get rect(): Rect {
+        return this._rect;
+    }
+
+    public get layout(): LayoutInternal | undefined {
+        return this._layout;
+    }
+
+    public get window(): Window | undefined {
+        return this._window;
+    }
+
+    public get root(): RowNode | undefined {
+        return this._root;
+    }
+
+    public get maximizedTabSet(): TabSetNode | undefined {
+        return this._maximizedTabSet;
+    }
+
+    public get isDockingMode(): boolean {
+        return this._isDockingMode;
+    }
+
+    public get activeTabSet(): TabSetNode | undefined {
+        return this._activeTabSet;
+    }
+
+    /** @internal */
+    public set rect(value: Rect) {
+        this._rect = value;
+    }
+
+    /** @internal */
+    public set layout(value: LayoutInternal) {
+        this._layout = value;
+    }
+
+    /** @internal */
+    public set window(value: Window | undefined) {
+        this._window = value;
+    }
+
+    /** @internal */
+    public set root(value: RowNode | undefined) {
+        this._root = value;
+    }
+
+    /** @internal */
+    public set maximizedTabSet(value: TabSetNode | undefined) {
+        this._maximizedTabSet = value;
+    }
+
+    /** @internal */
+    public set isDockingMode(value: boolean) {
+        this._isDockingMode = value;
+    }
+
+    /** @internal */
+    public set activeTabSet(value: TabSetNode | undefined) {
+        this._activeTabSet = value;
+    }
+
+    /** @internal */
+    public get toScreenRectFunction(): (rect: Rect) => Rect {
+        return this._toScreenRectFunction!;
+    }
+
+    /** @internal */
+    public set toScreenRectFunction(value: (rect: Rect) => Rect) {
+        this._toScreenRectFunction = value;
+    }
+
+    public toJson(): IJsonPopup {
+        return { layout: this.root!.toJson(), rect: this.rect.toJson() }
+    }
+
+    static fromJson(windowJson: IJsonPopup, model: Model, windowId: string): LayoutPopup {
+        const count = model.getwindowsMap().size;
+        const rect = windowJson.rect ? Rect.fromJson(windowJson.rect) : new Rect(50 + 50 * count, 50 + 50 * count, 600, 400);
+        rect.snap(10); // snapping prevents issue where window moves 1 pixel per save/restore on Chrome
+        const layoutWindow = new LayoutPopup(windowId, rect);
+        layoutWindow.root = RowNode.fromJson(windowJson.layout, model, layoutWindow);
+        return layoutWindow;
+    }
+}
\ No newline at end of file
diff --git a/src/model/Model.ts b/src/model/Model.ts
index f730b672..2d2b8245 100755
--- a/src/model/Model.ts
+++ b/src/model/Model.ts
@@ -16,6 +16,7 @@ import { TabNode } from "./TabNode";
 import { TabSetNode } from "./TabSetNode";
 import { randomUUID } from "./Utils";
 import { LayoutWindow } from "./LayoutWindow";
+import { LayoutPopup } from './LayoutPopup';
 
 /** @internal */
 export const DefaultMin = 0;
@@ -44,7 +45,7 @@ export class Model {
     /** @internal */
     private onCreateTabSet?: (tabNode?: TabNode) => ITabSetAttributes;
     /** @internal */
-    private windows: Map<string, LayoutWindow>;
+    private windows: Map<string, LayoutWindow | LayoutPopup>;
     /** @internal */
     private rootWindow: LayoutWindow;
 
@@ -287,6 +288,38 @@ export class Model {
                 node.updateAttrs(action.data.json);
                 break;
             }
+            case Actions.UPDATE_WINDOW_RECT: {
+                const window = this.windows.get(action.data.windowId)!;
+                const { x, y, width, height } = action.data;
+
+                const newRect = window.rect.clone();
+                if (x) newRect.x = x;
+                if (y) newRect.y = y;
+                if (width) newRect.width = width;
+                if (height) newRect.height = height;
+
+                window.rect = newRect;
+                break;
+            }
+            case Actions.TOGGLE_DOCKING_MODE: {
+                const window = this.windows.get(action.data.windowId)!;
+                if (!(window instanceof LayoutPopup)) {
+                    console.warn("Warning: TOGGLE_DOCKING_MODE action can only be applied to popup windows");
+                    return;
+                }
+
+                window.isDockingMode = !window.isDockingMode;
+                break;
+            }
+            case Actions.BRING_TO_FRONT: {
+                const window = this.windows.get(action.data.windowId)!;
+
+                if (window) {
+                    this.windows.delete(action.data.windowId);
+                    this.windows.set(action.data.windowId, window);
+                }
+                break;
+            }
             default:
                 break;
         }
@@ -349,6 +382,17 @@ export class Model {
         return this.windows;
     }
 
+    getWindowOrderNumber(windowId: string): number {
+        let i = 0;
+        for (const id of this.windows.keys()) {
+            if (id === windowId) {
+                return i;
+            }
+            i++;
+        }
+        return -1;
+    }
+
     /**
      * Visits all the nodes in the model and calls the given function for each
      * @param fn a function that takes visited node and a integer level as parameters
@@ -411,6 +455,13 @@ export class Model {
                 model.windows.set(windowId, layoutWindow);
             }
         }
+        if (json.popups) {
+            for (const windowId in json.popups) {
+                const windowJson = json.popups[windowId];
+                const layoutPopup = LayoutPopup.fromJson(windowJson, model, windowId);
+                model.windows.set(windowId, layoutPopup);
+            }
+        }
 
         model.rootWindow.root = RowNode.fromJson(json.layout, model, model.getwindowsMap().get(Model.MAIN_WINDOW_ID)!);
         model.tidy(); // initial tidy of node tree
diff --git a/src/model/RowNode.ts b/src/model/RowNode.ts
index d3fdae82..eaab091b 100755
--- a/src/model/RowNode.ts
+++ b/src/model/RowNode.ts
@@ -14,12 +14,13 @@ import { Node } from "./Node";
 import { TabSetNode } from "./TabSetNode";
 import { canDockToWindow } from "../view/Utils";
 import { LayoutWindow } from "./LayoutWindow";
+import { LayoutPopup } from './LayoutPopup';
 
 export class RowNode extends Node implements IDropTarget {
     static readonly TYPE = "row";
 
     /** @internal */
-    static fromJson(json: any, model: Model, layoutWindow: LayoutWindow) {
+    static fromJson(json: any, model: Model, layoutWindow: LayoutWindow | LayoutPopup) {
         const newLayoutNode = new RowNode(model, layoutWindow.windowId, json);
 
         if (json.children != null) {
diff --git a/src/model/TabNode.ts b/src/model/TabNode.ts
index c9d38450..4149a158 100755
--- a/src/model/TabNode.ts
+++ b/src/model/TabNode.ts
@@ -6,6 +6,7 @@ import { IDraggable } from "./IDraggable";
 import { IJsonTabNode } from "./IJsonModel";
 import { Model } from "./Model";
 import { Node } from "./Node";
+import { RowNode } from './RowNode';
 import { TabSetNode } from "./TabSetNode";
 
 export class TabNode extends Node implements IDraggable {
@@ -102,6 +103,19 @@ export class TabNode extends Node implements IDraggable {
         return this.getWindowId() !== Model.MAIN_WINDOW_ID;
     }
 
+    isPopupRoot() {
+        const grandparent = this.parent?.getParent();
+        if (!(grandparent instanceof RowNode)) {
+            return false;
+        }
+
+        if (grandparent.getParent()) {
+            return false;
+        }
+
+        return grandparent.getChildren().length === 1;
+    }
+
     isSelected() {
         return (this.getParent() as TabSetNode | BorderNode).getSelectedNode() === this;
     }
diff --git a/src/model/TabSetNode.ts b/src/model/TabSetNode.ts
index 0c11c27f..8fae6b91 100755
--- a/src/model/TabSetNode.ts
+++ b/src/model/TabSetNode.ts
@@ -10,6 +10,7 @@ import { BorderNode } from "./BorderNode";
 import { IDraggable } from "./IDraggable";
 import { IDropTarget } from "./IDropTarget";
 import { IJsonTabSetNode } from "./IJsonModel";
+import { LayoutPopup } from './LayoutPopup';
 import { LayoutWindow } from "./LayoutWindow";
 import { Model } from "./Model";
 import { Node } from "./Node";
@@ -21,7 +22,7 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
     static readonly TYPE = "tabset";
 
     /** @internal */
-    static fromJson(json: any, model: Model, layoutWindow: LayoutWindow) {
+    static fromJson(json: any, model: Model, layoutWindow: LayoutWindow | LayoutPopup) {
         const newLayoutNode = new TabSetNode(model, json);
 
         if (json.children != null) {
@@ -213,6 +214,18 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         return this.getAttr("enableTabScrollbar") as boolean;
     }
 
+    isPopupRoot() {
+        if (!(this.parent instanceof RowNode)) {
+            return false;
+        }
+
+        if (this.parent.getChildren().length !== 1) {
+            return false;
+        }
+
+        return !this.parent.getParent();
+    }
+
     getClassNameTabStrip() {
         return this.getAttr("classNameTabStrip") as string | undefined;
     }
diff --git a/src/view/Icons.tsx b/src/view/Icons.tsx
index 911065bc..27ae6912 100644
--- a/src/view/Icons.tsx
+++ b/src/view/Icons.tsx
@@ -9,6 +9,22 @@ export const CloseIcon = () => {
     );
 }
 
+export const FloatingIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24">
+            <path fill="transparent" stroke="var(--color-icon)" strokeDasharray="2,2" strokeWidth="2" d="M5 5h14v14H5z" paintOrder="markers stroke fill"/>
+        </svg>
+    )
+};
+
+export const DockableIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24">
+            <path fill="transparent" stroke="var(--color-icon)" strokeWidth="2" d="M5 5h14v14H5z" paintOrder="markers stroke fill"/>
+        </svg>
+    );
+};
+
 export const MaximizeIcon = () => {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" fill="var(--color-icon)"><path d="M0 0h24v24H0z" fill="none" /><path stroke="var(--color-icon)" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" /></svg>
diff --git a/src/view/Layout.tsx b/src/view/Layout.tsx
index 1d6a6c7a..65410f83 100755
--- a/src/view/Layout.tsx
+++ b/src/view/Layout.tsx
@@ -20,7 +20,7 @@ import { BorderTab } from "./BorderTab";
 import { BorderTabSet } from "./BorderTabSet";
 import { DragContainer } from "./DragContainer";
 import { PopoutWindow } from "./PopoutWindow";
-import { AsterickIcon, CloseIcon, EdgeIcon, MaximizeIcon, OverflowIcon, PopoutIcon, RestoreIcon } from "./Icons";
+import { AsterickIcon, CloseIcon, EdgeIcon, MaximizeIcon, OverflowIcon, FloatingIcon, DockableIcon, PopoutIcon, RestoreIcon } from "./Icons";
 import { Overlay } from "./Overlay";
 import { Row } from "./Row";
 import { Tab } from "./Tab";
@@ -28,6 +28,8 @@ import { copyInlineStyles, enablePointerOnIFrames, isDesktop, isSafari } from ".
 import { LayoutWindow } from "../model/LayoutWindow";
 import { TabButtonStamp } from "./TabButtonStamp";
 import { SizeTracker } from "./SizeTracker";
+import { LayoutPopup } from '../model/LayoutPopup';
+import { Popup } from './Popup';
 
 export interface ILayoutProps {
     /** the model for this layout */
@@ -210,8 +212,21 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
 
     private dragEnterCount: number = 0;
     private dragging: boolean = false;
+    private moving: boolean = false;
+    private moveStartX: number = 0;
+    private moveStartY: number = 0;
+    private moveInitialLeft: number = 0;
+    private moveInitialTop: number = 0;
+    private resizeSide: 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | null = null;
+    private resizing: boolean = false;
+    private resizeStartX: number = 0;
+    private resizeStartY: number = 0;
+    private resizeStartWidth: number = 0;
+    private resizeStartHeight: number = 0;
+    private resizeStartTop: number = 0;
+    private resizeStartLeft: number = 0;
     private windowId: string;
-    private layoutWindow: LayoutWindow;
+    private layoutWindow: LayoutWindow | LayoutPopup;
     private mainLayout: LayoutInternal;
     private isMainWindow: boolean;
     private isDraggingOverWindow: boolean;
@@ -367,6 +382,8 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
         let reorderedTabMoveables = null;
         let tabStamps = null;
         let metricElements = null;
+        let resizeEventsListeners: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> = {};
+        let resizeHandles = null;
 
         if (this.isMainWindow) {
             floatingWindows = this.renderWindows();
@@ -378,6 +395,22 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
             </div>;
         }
 
+        if (this.isPopup()) {
+            resizeHandles = <>
+                <span style={{ position: "absolute", height: "4px", width: "100%", bottom: "0px", left: "0px" }}></span>
+                <span style={{ position: "absolute", height: "4px", width: "100%", top: "0px", left: "0px" }}></span>
+                <span style={{ position: "absolute", height: "100%", width: "4px", right: "0px", top: "0px" }}></span>
+                <span style={{ position: "absolute", height: "100%", width: "4px", left: "0px", top: "0px" }}></span>
+            </>;
+
+            resizeEventsListeners = {};
+            if (this.isPopup()) {
+                resizeEventsListeners.onPointerDown = this.onResizeStart;
+                resizeEventsListeners.onPointerMove = this.onResize;
+                resizeEventsListeners.onPointerUp = this.onResizeEnd;
+            }
+        }
+
         return (
             <div
                 ref={this.selfRef}
@@ -386,6 +419,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
                 onDragLeave={this.onDragLeaveRaw}
                 onDragOver={this.onDragOver}
                 onDrop={this.onDrop}
+                {...resizeEventsListeners}
             >
                 <div ref={this.moveablesRef} key="__moveables__" className={this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES)}></div>
                 {metricElements}
@@ -396,6 +430,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
                 {tabStamps}
                 {this.state.portal}
                 {floatingWindows}
+                {resizeHandles}
             </div>
         );
     }
@@ -534,8 +569,9 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
             const windows = this.props.model.getwindowsMap();
             let i = 1;
             for (const [windowId, layoutWindow] of windows) {
+                if (windowId === Model.MAIN_WINDOW_ID) continue;
 
-                if (windowId !== Model.MAIN_WINDOW_ID) {
+                if (layoutWindow instanceof LayoutWindow) {
                     floatingWindows.push(
                         <PopoutWindow
                             key={windowId}
@@ -551,8 +587,26 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
                             </div>
                         </PopoutWindow>
                     );
-                    i++;
                 }
+                else if (layoutWindow instanceof LayoutPopup) {
+                    floatingWindows.push(
+                        <Popup
+                            key={windowId}
+                            layout={this}
+                            title={this.popoutWindowName + " " + i}
+                            layoutWindow={layoutWindow}
+                            url={this.popoutURL + "?id=" + windowId}
+                            onSetWindow={this.onSetWindow}
+                            onCloseWindow={this.onCloseWindow}
+                        >
+                            <div className={this.props.popoutClassName}>
+                                <LayoutInternal {...this.props} windowId={windowId} mainLayout={this} />
+                            </div>
+                        </Popup>
+                    );
+                }
+
+                i++;
             }
         }
         return floatingWindows;
@@ -1085,6 +1139,18 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
         }
     }
 
+    isPopup() {
+        return this.layoutWindow instanceof LayoutPopup;
+    }
+
+    isDockingMode() {
+        if (!(this.layoutWindow instanceof LayoutPopup)) {
+            return true;
+        }
+
+        return (this.layoutWindow as LayoutPopup).isDockingMode;
+    }
+
     onDragEnterRaw = (event: React.DragEvent<HTMLElement>) => {
         this.dragEnterCount++;
         if (this.dragEnterCount === 1) {
@@ -1233,6 +1299,177 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     }
 
     // *************************** End Drag Drop *************************************
+
+    onMoveStart = (event: React.PointerEvent<HTMLElement>) => {
+        const movableDiv = event.currentTarget;
+
+        if (!movableDiv.contains(event.target as HTMLElement)) return; // only start move if on the movable div, not a child element
+
+        event.preventDefault();
+        this.moving = true;
+        
+        const { rect } = this.layoutWindow;
+
+        this.moveStartX = event.clientX;
+        this.moveStartY = event.clientY;
+        this.moveInitialLeft = rect.x;
+        this.moveInitialTop = rect.y;
+    }
+
+    onMove = (event: React.PointerEvent<HTMLElement>) => {
+        if (!this.moving) return;
+
+        const movableDiv = event.currentTarget;
+        movableDiv.setPointerCapture(event.pointerId);
+
+        const deltaX = event.clientX - this.moveStartX;
+        const deltaY = event.clientY - this.moveStartY;
+
+        this.doAction(Actions.updateWindowRect(this.windowId, {
+            x: this.moveInitialLeft + deltaX,
+            y: this.moveInitialTop + deltaY,
+        }));
+    }
+
+    onMoveEnd = (event: React.PointerEvent<HTMLElement>) => {
+        const movableDiv = event.currentTarget;
+        this.moving = false;
+        movableDiv.releasePointerCapture(event.pointerId);
+    }
+
+    onResizeStart = (event: React.PointerEvent<HTMLElement>) => {
+        const resizable = event.currentTarget;
+        const rect = resizable.getBoundingClientRect();
+
+        this.resizeSide = this.getResizeSide(resizable, event);
+
+        if (this.resizeSide) {
+            event.preventDefault();
+            event.stopPropagation();
+            resizable.setPointerCapture(event.pointerId);
+
+            this.resizing = true;
+            this.resizeStartX = event.clientX;
+            this.resizeStartY = event.clientY;
+
+            this.resizeStartWidth = rect.width;
+            this.resizeStartHeight = rect.height;
+            this.resizeStartTop = rect.y;
+            this.resizeStartLeft = rect.x;
+        }
+    }
+
+    onResize = (event: React.PointerEvent<HTMLElement>) => {
+        const resizable = event.currentTarget;
+
+        const hoverSide = this.getResizeSide(resizable, event);
+        resizable.style.cursor = this.getCursorForSide(hoverSide);
+
+        if (this.resizing) {
+            const dx = event.clientX - this.resizeStartX;
+            const dy = event.clientY - this.resizeStartY;
+
+            switch (this.resizeSide) {
+                case 'right':
+                    this.doAction(Actions.updateWindowRect(this.windowId, {
+                        width: this.resizeStartWidth + dx,
+                    }));
+                    break;
+                case 'left':
+                    this.doAction(Actions.updateWindowRect(this.windowId, {
+                        x: this.resizeStartLeft + dx,
+                        width: this.resizeStartWidth - dx,
+                    }));
+                    break;
+                case 'bottom':
+                    this.doAction(Actions.updateWindowRect(this.windowId, {
+                        height: this.resizeStartHeight + dy,
+                    }));
+                    break;
+                case 'top':
+                    this.doAction(Actions.updateWindowRect(this.windowId, {
+                        y: this.resizeStartTop + dy,
+                        height: this.resizeStartHeight - dy,
+                    }));
+                    break;
+                case 'top-left':
+                    this.doAction(Actions.updateWindowRect(this.windowId, {
+                        x: this.resizeStartLeft + dx,
+                        y: this.resizeStartTop + dy,
+                        width: this.resizeStartWidth - dx,
+                        height: this.resizeStartHeight - dy,
+                    }));
+                    break;
+                case 'top-right':
+                    this.doAction(Actions.updateWindowRect(this.windowId, {
+                        y: this.resizeStartTop + dy,
+                        width: this.resizeStartWidth + dx,
+                        height: this.resizeStartHeight - dy,
+                    }));
+                    break;
+                case 'bottom-left':
+                    this.doAction(Actions.updateWindowRect(this.windowId, {
+                        x: this.resizeStartLeft + dx,
+                        width: this.resizeStartWidth - dx,
+                        height: this.resizeStartHeight + dy,
+                    }));
+                    break;
+                case 'bottom-right':
+                    this.doAction(Actions.updateWindowRect(this.windowId, {
+                        width: this.resizeStartWidth + dx,
+                        height: this.resizeStartHeight + dy,
+                    }));
+                    break;
+            }
+        }
+    }
+
+    private getCursorForSide(side: typeof this.resizeSide): string {
+        switch (side) {
+            case 'left':
+            case 'right':
+                return 'ew-resize';
+            case 'top':
+            case 'bottom':
+                return 'ns-resize';
+            case 'top-left':
+            case 'bottom-right':
+                return 'nwse-resize';
+            case 'top-right':
+            case 'bottom-left':
+                return 'nesw-resize';
+            default:
+                return 'default';
+        }
+    }
+    
+    getResizeSide(resizable: HTMLElement, event: React.PointerEvent<HTMLElement>) {
+        const rect = resizable.getBoundingClientRect();
+        const borderSize = 4;
+        const mouseX = event.clientX - rect.left;
+        const mouseY = event.clientY - rect.top;
+
+        const withinLeft = mouseX < borderSize;
+        const withinRight = mouseX > rect.width - borderSize;
+        const withinTop = mouseY < borderSize;
+        const withinBottom = mouseY > rect.height - borderSize;
+
+        if (mouseX < borderSize && mouseY < borderSize) return 'top-left';
+        if (mouseX > rect.width - borderSize && mouseY < borderSize) return 'top-right';
+        if (mouseX < borderSize && mouseY > rect.height - borderSize) return 'bottom-left';
+        if (mouseX > rect.width - borderSize && mouseY > rect.height - borderSize) return 'bottom-right';
+
+        if (withinLeft) return 'left';
+        if (withinRight) return 'right';
+        if (withinTop) return 'top';
+        if (withinBottom) return 'bottom';
+        return null;
+    }
+
+    onResizeEnd = (event: React.PointerEvent<HTMLElement>) => {
+        this.resizing = false;
+        this.resizeSide = null;
+    }
 }
 declare const __VERSION__: string;
 export const FlexLayoutVersion = __VERSION__;
@@ -1281,6 +1518,8 @@ export interface ITabRenderValues {
 
 export interface IIcons {
     close?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));
+    floating?: (React.ReactNode | ((tabNode: TabNode | TabSetNode) => React.ReactNode));
+    dockable?: (React.ReactNode | ((tabNode: TabNode | TabSetNode) => React.ReactNode));
     closeTabset?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
     popout?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));
     maximize?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
@@ -1292,6 +1531,8 @@ export interface IIcons {
 
 const defaultIcons = {
     close: <CloseIcon />,
+    floating: <FloatingIcon />,
+    dockable: <DockableIcon />,
     closeTabset: <CloseIcon />,
     popout: <PopoutIcon />,
     maximize: <MaximizeIcon />,
diff --git a/src/view/Popup.tsx b/src/view/Popup.tsx
new file mode 100644
index 00000000..6c8cffcd
--- /dev/null
+++ b/src/view/Popup.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { LayoutInternal } from "./Layout";
+import { LayoutWindow } from "../model/LayoutWindow";
+import { LayoutPopup } from '../model/LayoutPopup';
+import { createPortal } from 'react-dom';
+import { CLASSES } from '../Types';
+import { Actions } from '../model/Actions';
+
+/** @internal */
+export interface IPopupWindowProps {
+    title: string;
+    layout: LayoutInternal;
+    layoutWindow: LayoutPopup;
+    url: string;
+    onCloseWindow: (layoutWindow: LayoutWindow) => void;
+    onSetWindow: (layoutWindow: LayoutWindow, window: Window) => void;
+}
+
+/** @internal */
+export const Popup = (props: React.PropsWithChildren<IPopupWindowProps>) => {
+    const { children, layout, layoutWindow } = props;
+    const { rect, windowId } = layoutWindow;
+    const { x, y, width, height } = rect;
+    const model = layout.getModel();
+    const zIndex = 9999 + model.getWindowOrderNumber(windowId);
+
+    const onPointerDown = () => {
+        layout.doAction({ type: Actions.BRING_TO_FRONT, data: { windowId } });
+    };
+
+    return (
+        createPortal(
+            <div className={CLASSES.FLEXLAYOUT__POPUP} style={{position: 'absolute', top: y, left: x, width, height, zIndex }} onPointerDown={onPointerDown}>
+                {children}
+            </div>,
+        document.body)
+    );
+};
\ No newline at end of file
diff --git a/src/view/Row.tsx b/src/view/Row.tsx
index 7615ad5c..873c2b62 100644
--- a/src/view/Row.tsx
+++ b/src/view/Row.tsx
@@ -19,6 +19,7 @@ export const Row = (props: IRowProps) => {
     const selfRef = React.useRef<HTMLDivElement | null>(null);
 
     const horizontal = node.getOrientation() === Orientation.HORZ;
+    const renderPopupBar = layout.isPopup() && node.getChildren().length > 1;
 
     React.useLayoutEffect(() => {
         node.setRect(layout.getBoundingClientRect(selfRef.current!));
@@ -54,7 +55,7 @@ export const Row = (props: IRowProps) => {
         style.flexDirection = "column";
     }
 
-     return (
+     const row = (
         <div
             ref={selfRef}
             className={layout.getClassName(CLASSES.FLEXLAYOUT__ROW)}
@@ -63,6 +64,20 @@ export const Row = (props: IRowProps) => {
             {items}
         </div>
     );
+
+    if (renderPopupBar) {
+        return (
+            <div style={{display: 'flex', flexDirection: 'column', width: '100%', height: '100%'}}>
+                <div className={CLASSES.FLEXLAYOUT__POPUP_TABBAR_OUTER}
+                    onPointerDown={layout.onMoveStart} onPointerMove={layout.onMove} onPointerUp={layout.onMoveEnd}>
+                    <div className={CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER}>Popup</div>
+                </div>
+                {row}
+            </div>
+        );
+    }
+
+    return row;
 };
 
 
diff --git a/src/view/TabButton.tsx b/src/view/TabButton.tsx
index cd2e48c6..c2986347 100755
--- a/src/view/TabButton.tsx
+++ b/src/view/TabButton.tsx
@@ -22,6 +22,7 @@ export const TabButton = (props: ITabButtonProps) => {
     const selfRef = React.useRef<HTMLDivElement | null>(null);
     const contentRef = React.useRef<HTMLInputElement | null>(null);
     const icons = layout.getIcons();
+    const isPopupMode = layout.isPopup() && node.isPopupRoot() && !layout.isDockingMode();
 
     React.useLayoutEffect(() => {
         node.setTabRect(layout.getBoundingClientRect(selfRef.current!));
@@ -31,6 +32,8 @@ export const TabButton = (props: ITabButtonProps) => {
     });
 
     const onDragStart = (event: React.DragEvent<HTMLElement>) => {
+        if (isPopupMode) return;
+
         if (node.isEnableDrag()) {
             event.stopPropagation(); // prevent starting a tabset drag as well
             layout.setDragNode(event.nativeEvent, node as TabNode);
@@ -40,6 +43,7 @@ export const TabButton = (props: ITabButtonProps) => {
     };
 
     const onDragEnd = (event: React.DragEvent<HTMLElement>) => {
+        if (isPopupMode) return;
         layout.clearDragMain();
     };
 
@@ -178,6 +182,13 @@ export const TabButton = (props: ITabButtonProps) => {
         );
     }
 
+    const movableEventsListeners: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> = {};
+    if (isPopupMode) {
+        movableEventsListeners.onPointerDown = layout.onMoveStart;
+        movableEventsListeners.onPointerMove = layout.onMove;
+        movableEventsListeners.onPointerUp = layout.onMoveEnd;
+    }
+
     return (
         <div
             ref={selfRef}
@@ -191,6 +202,7 @@ export const TabButton = (props: ITabButtonProps) => {
             onDragStart={onDragStart}
             onDragEnd={onDragEnd}
             onDoubleClick={onDoubleClick}
+            {...movableEventsListeners}
         >
             {leading}
             {content}
diff --git a/src/view/TabSet.tsx b/src/view/TabSet.tsx
index 998127cd..75831f7f 100755
--- a/src/view/TabSet.tsx
+++ b/src/view/TabSet.tsx
@@ -12,6 +12,7 @@ import { CLASSES } from "../Types";
 import { isAuxMouseEvent } from "./Utils";
 import { createPortal } from "react-dom";
 import { splitterDragging } from "./Splitter";
+import { LayoutPopup } from '../model/LayoutPopup';
 
 /** @internal */
 export interface ITabSetProps {
@@ -33,6 +34,7 @@ export const TabSet = (props: ITabSetProps) => {
     const timer = React.useRef<NodeJS.Timeout | undefined>(undefined);
 
     const icons = layout.getIcons();
+    const isPopupMode = layout.isPopup() && node.isPopupRoot() && !layout.isDockingMode();
 
     React.useLayoutEffect(() => {
         node.setRect(layout.getBoundingClientRect(selfRef.current!));
@@ -87,6 +89,8 @@ export const TabSet = (props: ITabSetProps) => {
     };
 
     const onDragStart = (event: React.DragEvent<HTMLElement>) => {
+        if (isPopupMode) return;
+
         if (!layout.getEditingTab()) {
             if (node.isEnableDrag()) {
                 event.stopPropagation();
@@ -150,6 +154,10 @@ export const TabSet = (props: ITabSetProps) => {
         }
     };
 
+    const onToggleDockingMode = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        layout.doAction(Actions.toggleDockingMode(layout.getWindowId()));
+    };
+
     // Start Render
 
     const cm = layout.getClassName;
@@ -189,7 +197,7 @@ export const TabSet = (props: ITabSetProps) => {
     buttons = renderState.buttons;
 
     const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;
-    const showClose = (isTabStretch && ((node.getChildren()[0] as TabNode).isEnableClose())) || node.isEnableClose();
+    const showClose = (isTabStretch && ((node.getChildren()[0] as TabNode).isEnableClose())) || node.isEnableClose() || layout.isPopup();
 
     if (renderState.overflowPosition === undefined) {
         renderState.overflowPosition = stickyButtons.length;
@@ -241,6 +249,36 @@ export const TabSet = (props: ITabSetProps) => {
         }
     }
 
+    if (layout.isPopup()) {
+        const window = layout.getModel().getwindowsMap().get(layout.getWindowId()) as LayoutPopup;
+        const pinTitle = layout.i18nName(I18nLabel.Pin_Tab);
+
+        if (window.isDockingMode) {
+            buttons.push(
+                <div
+                    key="dockable"
+                    data-layout-path={path + "/button/dockable"}
+                    title={pinTitle}
+                    onClick={onToggleDockingMode}
+                >
+                    {(typeof icons.dockable === "function" ? icons.dockable(node) : icons.dockable)}
+                </div>
+            );
+        }
+        else {
+            buttons.push(
+                <div
+                    key="floating"
+                    data-layout-path={path + "/button/floating"}
+                    title={pinTitle}
+                    onClick={onToggleDockingMode}
+                >
+                    {(typeof icons.floating === "function" ? icons.floating(node) : icons.floating)}
+                </div>
+            );
+        }
+    }
+
     if (selectedTabNode !== undefined &&
         layout.isSupportsPopout() &&
         selectedTabNode.isEnablePopout() &&
@@ -385,6 +423,14 @@ export const TabSet = (props: ITabSetProps) => {
                     />
                 );
             }
+
+            const movableEventsListeners: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> = {};
+            if (isPopupMode) {
+                movableEventsListeners.onPointerDown = layout.onMoveStart;
+                movableEventsListeners.onPointerMove = layout.onMove;
+                movableEventsListeners.onPointerUp = layout.onMoveEnd;
+            }
+
             tabStrip = (
                 <div className={tabStripClasses}
                     ref={tabStripRef}
@@ -404,6 +450,7 @@ export const TabSet = (props: ITabSetProps) => {
                             className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation())}
                             style={{ overflowX: 'auto', overflowY: "hidden" }}
                             onScroll={onScroll}
+                            {...movableEventsListeners}
                         >
                             <div
                                 style={{ width: (isTabStretch ? "100%" : "none") }}
diff --git a/style/_base.scss b/style/_base.scss
index a222a61c..d468c662 100644
--- a/style/_base.scss
+++ b/style/_base.scss
@@ -167,6 +167,48 @@
             overflow: hidden;
         }
 
+        &__popup {
+            &_tabbar {
+                &_outer {
+                    box-sizing: border-box;
+                    background-color: var(--color-tabset-background);
+                    overflow: hidden;
+                    display: flex;
+                    font-size: var(--font-size);
+                }
+
+                &_outer_top {
+                    padding: 0px 2px 0px 2px;
+                    border-bottom: 1px solid var(--color-tabset-divider-line);
+                }
+
+                &_inner {
+                    position: relative;
+                    box-sizing: border-box;
+                    display: flex;
+                    flex-grow: 1;
+                    scrollbar-width: none;
+
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
+
+                    &_tab_container {
+                        position: relative;
+                        display: flex;
+                        padding-left: 4px;
+                        padding-right: 4px;
+                        box-sizing: border-box;
+                        white-space: nowrap;
+
+                        &_top {
+                            border-top: 2px solid transparent;
+                        }
+                    }
+                }
+            }
+        }
+
         &__tabset {
             display: flex;
             flex-direction: column;
diff --git a/style/combined.css b/style/combined.css
index a27e91ce..2bf616f0 100644
--- a/style/combined.css
+++ b/style/combined.css
@@ -434,6 +434,38 @@
   box-sizing: border-box;
   overflow: hidden;
 }
+.flexlayout__popup_tabbar_outer {
+  box-sizing: border-box;
+  background-color: var(--color-tabset-background);
+  overflow: hidden;
+  display: flex;
+  font-size: var(--font-size);
+}
+.flexlayout__popup_tabbar_outer_top {
+  padding: 0px 2px 0px 2px;
+  border-bottom: 1px solid var(--color-tabset-divider-line);
+}
+.flexlayout__popup_tabbar_inner {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-grow: 1;
+  scrollbar-width: none;
+}
+.flexlayout__popup_tabbar_inner::-webkit-scrollbar {
+  display: none;
+}
+.flexlayout__popup_tabbar_inner_tab_container {
+  position: relative;
+  display: flex;
+  padding-left: 4px;
+  padding-right: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.flexlayout__popup_tabbar_inner_tab_container_top {
+  border-top: 2px solid transparent;
+}
 .flexlayout__tabset {
   display: flex;
   flex-direction: column;
diff --git a/style/dark.css b/style/dark.css
index 5fa42002..647497aa 100644
--- a/style/dark.css
+++ b/style/dark.css
@@ -203,6 +203,38 @@
   box-sizing: border-box;
   overflow: hidden;
 }
+.flexlayout__popup_tabbar_outer {
+  box-sizing: border-box;
+  background-color: var(--color-tabset-background);
+  overflow: hidden;
+  display: flex;
+  font-size: var(--font-size);
+}
+.flexlayout__popup_tabbar_outer_top {
+  padding: 0px 2px 0px 2px;
+  border-bottom: 1px solid var(--color-tabset-divider-line);
+}
+.flexlayout__popup_tabbar_inner {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-grow: 1;
+  scrollbar-width: none;
+}
+.flexlayout__popup_tabbar_inner::-webkit-scrollbar {
+  display: none;
+}
+.flexlayout__popup_tabbar_inner_tab_container {
+  position: relative;
+  display: flex;
+  padding-left: 4px;
+  padding-right: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.flexlayout__popup_tabbar_inner_tab_container_top {
+  border-top: 2px solid transparent;
+}
 .flexlayout__tabset {
   display: flex;
   flex-direction: column;
diff --git a/style/gray.css b/style/gray.css
index ad5f61e0..ed3f6a77 100644
--- a/style/gray.css
+++ b/style/gray.css
@@ -203,6 +203,38 @@
   box-sizing: border-box;
   overflow: hidden;
 }
+.flexlayout__popup_tabbar_outer {
+  box-sizing: border-box;
+  background-color: var(--color-tabset-background);
+  overflow: hidden;
+  display: flex;
+  font-size: var(--font-size);
+}
+.flexlayout__popup_tabbar_outer_top {
+  padding: 0px 2px 0px 2px;
+  border-bottom: 1px solid var(--color-tabset-divider-line);
+}
+.flexlayout__popup_tabbar_inner {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-grow: 1;
+  scrollbar-width: none;
+}
+.flexlayout__popup_tabbar_inner::-webkit-scrollbar {
+  display: none;
+}
+.flexlayout__popup_tabbar_inner_tab_container {
+  position: relative;
+  display: flex;
+  padding-left: 4px;
+  padding-right: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.flexlayout__popup_tabbar_inner_tab_container_top {
+  border-top: 2px solid transparent;
+}
 .flexlayout__tabset {
   display: flex;
   flex-direction: column;
diff --git a/style/light.css b/style/light.css
index 9ac49eac..d4d3fdb9 100644
--- a/style/light.css
+++ b/style/light.css
@@ -203,6 +203,38 @@
   box-sizing: border-box;
   overflow: hidden;
 }
+.flexlayout__popup_tabbar_outer {
+  box-sizing: border-box;
+  background-color: var(--color-tabset-background);
+  overflow: hidden;
+  display: flex;
+  font-size: var(--font-size);
+}
+.flexlayout__popup_tabbar_outer_top {
+  padding: 0px 2px 0px 2px;
+  border-bottom: 1px solid var(--color-tabset-divider-line);
+}
+.flexlayout__popup_tabbar_inner {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-grow: 1;
+  scrollbar-width: none;
+}
+.flexlayout__popup_tabbar_inner::-webkit-scrollbar {
+  display: none;
+}
+.flexlayout__popup_tabbar_inner_tab_container {
+  position: relative;
+  display: flex;
+  padding-left: 4px;
+  padding-right: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.flexlayout__popup_tabbar_inner_tab_container_top {
+  border-top: 2px solid transparent;
+}
 .flexlayout__tabset {
   display: flex;
   flex-direction: column;
diff --git a/style/rounded.css b/style/rounded.css
index 5c6a7f1e..7a03a870 100644
--- a/style/rounded.css
+++ b/style/rounded.css
@@ -203,6 +203,38 @@
   box-sizing: border-box;
   overflow: hidden;
 }
+.flexlayout__popup_tabbar_outer {
+  box-sizing: border-box;
+  background-color: var(--color-tabset-background);
+  overflow: hidden;
+  display: flex;
+  font-size: var(--font-size);
+}
+.flexlayout__popup_tabbar_outer_top {
+  padding: 0px 2px 0px 2px;
+  border-bottom: 1px solid var(--color-tabset-divider-line);
+}
+.flexlayout__popup_tabbar_inner {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-grow: 1;
+  scrollbar-width: none;
+}
+.flexlayout__popup_tabbar_inner::-webkit-scrollbar {
+  display: none;
+}
+.flexlayout__popup_tabbar_inner_tab_container {
+  position: relative;
+  display: flex;
+  padding-left: 4px;
+  padding-right: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.flexlayout__popup_tabbar_inner_tab_container_top {
+  border-top: 2px solid transparent;
+}
 .flexlayout__tabset {
   display: flex;
   flex-direction: column;
diff --git a/style/underline.css b/style/underline.css
index b1840f64..8814da47 100644
--- a/style/underline.css
+++ b/style/underline.css
@@ -206,6 +206,38 @@
   box-sizing: border-box;
   overflow: hidden;
 }
+.flexlayout__popup_tabbar_outer {
+  box-sizing: border-box;
+  background-color: var(--color-tabset-background);
+  overflow: hidden;
+  display: flex;
+  font-size: var(--font-size);
+}
+.flexlayout__popup_tabbar_outer_top {
+  padding: 0px 2px 0px 2px;
+  border-bottom: 1px solid var(--color-tabset-divider-line);
+}
+.flexlayout__popup_tabbar_inner {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-grow: 1;
+  scrollbar-width: none;
+}
+.flexlayout__popup_tabbar_inner::-webkit-scrollbar {
+  display: none;
+}
+.flexlayout__popup_tabbar_inner_tab_container {
+  position: relative;
+  display: flex;
+  padding-left: 4px;
+  padding-right: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.flexlayout__popup_tabbar_inner_tab_container_top {
+  border-top: 2px solid transparent;
+}
 .flexlayout__tabset {
   display: flex;
   flex-direction: column;