dockview-vue 6.6.1 → 7.0.2

package/README.md

@@ -67,7 +67,7 @@ Use the component in a Vue SFC:
 
 <script setup lang="ts">
 import { DockviewVue } from 'dockview-vue';
-import type { DockviewReadyEvent } from 'dockview-core';
+import type { DockviewReadyEvent } from 'dockview-vue';
 
 function onReady(event: DockviewReadyEvent) {
     event.api.addPanel({

package/dist/dockview-vue.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dockviewCore = require("dockview-core");
+const dockview = require("dockview");
 const vue = require("vue");
 function findComponent(parent, name, components) {
   if (components && components[name]) {
@@ -134,14 +134,14 @@ class VueHeaderActionsRenderer extends AbstractVueRenderer {
   }
   group;
   _renderDisposable;
-  _mutableDisposable = new dockviewCore.DockviewMutableDisposable();
+  _mutableDisposable = new dockview.DockviewMutableDisposable();
   _baseProps;
   get element() {
     return this._element;
   }
   init(props) {
     this._baseProps = props;
-    this._mutableDisposable.value = new dockviewCore.DockviewCompositeDisposable(
+    this._mutableDisposable.value = new dockview.DockviewCompositeDisposable(
       this.group.model.onDidAddPanel(() => {
         this.updateProps();
       }),
@@ -301,13 +301,14 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     singleTabMode: {},
     disableFloatingGroups: { type: Boolean },
     floatingGroupBounds: {},
+    transformFloatingGroupDrag: { type: Function },
+    floatingGroupDragHandle: {},
     popoutUrl: {},
     nonce: { type: [String, Function] },
     defaultRenderer: {},
     defaultHeaderPosition: {},
     debug: { type: Boolean },
     dndEdges: { type: [Boolean, Object] },
-    rootOverlayModel: {},
     disableDnd: { type: Boolean },
     dndStrategy: {},
     locked: { type: Boolean },
@@ -320,6 +321,12 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     getTabGroupChipContextMenuItems: { type: Function },
     createTabGroupChipComponent: { type: Function },
     createGroupDragGhostComponent: { type: Function },
+    dropOverlayModel: { type: Function },
+    announcements: { type: Boolean },
+    getAnnouncement: { type: Function },
+    announcer: { type: Function },
+    messages: {},
+    keyboardNavigation: { type: [Boolean, Object] },
     tabGroupColors: {},
     tabGroupAccent: {},
     components: {},
@@ -335,7 +342,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   emits: ["ready", "didDrop", "willDrop"],
   setup(__props, { emit: __emit }) {
     function extractCoreOptions(props2) {
-      const coreOptions = dockviewCore.PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
+      const coreOptions = dockview.PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
         obj[key] = props2[key];
         return obj;
       }, {});
@@ -346,7 +353,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     const el = vue.ref(null);
     const instance = vue.ref(null);
     const eventDisposables = [];
-    dockviewCore.PROPERTY_KEYS_DOCKVIEW.forEach((coreOptionKey) => {
+    dockview.PROPERTY_KEYS_DOCKVIEW.forEach((coreOptionKey) => {
       vue.watch(
         () => props[coreOptionKey],
         (newValue, oldValue) => {
@@ -561,7 +568,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           return new VueGroupDragGhostRenderer(component, inst);
         };
       }
-      const api = dockviewCore.createDockview(el.value, {
+      const api = dockview.createDockview(el.value, {
         ...coreOptions,
         ...frameworkOptions
       });
@@ -682,7 +689,7 @@ function useViewComponent(config, props, emit) {
     instance
   };
 }
-class VueSplitviewPanelView extends dockviewCore.SplitviewPanel {
+class VueSplitviewPanelView extends dockview.SplitviewPanel {
   constructor(id, component, vueComponent, parent) {
     super(id, component);
     this.vueComponent = vueComponent;
@@ -694,7 +701,7 @@ class VueSplitviewPanelView extends dockviewCore.SplitviewPanel {
     const part = new VuePart(this.element, this.vueComponent, this.parent, {
       params: this._params?.params ?? {},
       api: this.api,
-      containerApi: new dockviewCore.SplitviewApi(this._params.accessor)
+      containerApi: new dockview.SplitviewApi(this._params.accessor)
     });
     part.init();
     return part;
@@ -715,7 +722,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   emits: ["ready"],
   setup(__props, { emit: __emit }) {
     function extractCoreOptions(props2) {
-      const coreOptions = dockviewCore.PROPERTY_KEYS_SPLITVIEW.reduce((obj, key) => {
+      const coreOptions = dockview.PROPERTY_KEYS_SPLITVIEW.reduce((obj, key) => {
         obj[key] = props2[key];
         return obj;
       }, {});
@@ -726,8 +733,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     const { el } = useViewComponent(
       {
         componentName: "splitview-vue",
-        propertyKeys: dockviewCore.PROPERTY_KEYS_SPLITVIEW,
-        createApi: dockviewCore.createSplitview,
+        propertyKeys: dockview.PROPERTY_KEYS_SPLITVIEW,
+        createApi: dockview.createSplitview,
         createView: (id, name, component, instance) => new VueSplitviewPanelView(id, name, component, instance),
         extractCoreOptions
       },
@@ -743,7 +750,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-class VueGridviewPanelView extends dockviewCore.GridviewPanel {
+class VueGridviewPanelView extends dockview.GridviewPanel {
   constructor(id, component, vueComponent, parent) {
     super(id, component);
     this.vueComponent = vueComponent;
@@ -755,7 +762,7 @@ class VueGridviewPanelView extends dockviewCore.GridviewPanel {
     const part = new VuePart(this.element, this.vueComponent, this.parent, {
       params: this._params?.params ?? {},
       api: this.api,
-      containerApi: new dockviewCore.GridviewApi(this._params.accessor)
+      containerApi: new dockview.GridviewApi(this._params.accessor)
     });
     part.init();
     return part;
@@ -774,7 +781,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   emits: ["ready"],
   setup(__props, { emit: __emit }) {
     function extractCoreOptions(props2) {
-      const coreOptions = dockviewCore.PROPERTY_KEYS_GRIDVIEW.reduce((obj, key) => {
+      const coreOptions = dockview.PROPERTY_KEYS_GRIDVIEW.reduce((obj, key) => {
         obj[key] = props2[key];
         return obj;
       }, {});
@@ -785,8 +792,8 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     const { el } = useViewComponent(
       {
         componentName: "gridview-vue",
-        propertyKeys: dockviewCore.PROPERTY_KEYS_GRIDVIEW,
-        createApi: dockviewCore.createGridview,
+        propertyKeys: dockview.PROPERTY_KEYS_GRIDVIEW,
+        createApi: dockview.createGridview,
         createView: (id, name, component, instance) => new VueGridviewPanelView(id, name, component, instance),
         extractCoreOptions
       },
@@ -851,7 +858,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   emits: ["ready", "didDrop"],
   setup(__props, { emit: __emit }) {
     function extractCoreOptions(props2) {
-      const coreOptions = dockviewCore.PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
+      const coreOptions = dockview.PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
         obj[key] = props2[key];
         return obj;
       }, {});
@@ -862,8 +869,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const { el } = useViewComponent(
       {
         componentName: "paneview-vue",
-        propertyKeys: dockviewCore.PROPERTY_KEYS_PANEVIEW,
-        createApi: dockviewCore.createPaneview,
+        propertyKeys: dockview.PROPERTY_KEYS_PANEVIEW,
+        createApi: dockview.createPaneview,
         createView: (id, name, component, instance) => new VuePaneviewPanelView(id, component, instance),
         extractCoreOptions,
         onApiCreated: (api) => [
@@ -896,9 +903,9 @@ exports.VueWatermarkRenderer = VueWatermarkRenderer;
 exports.findComponent = findComponent;
 exports.mountVueComponent = mountVueComponent;
 exports.resolveComponent = resolveComponent;
-Object.keys(dockviewCore).forEach((k) => {
+Object.keys(dockview).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,
-    get: () => dockviewCore[k]
+    get: () => dockview[k]
   });
 });

package/dist/dockview-vue.es.js

@@ -1,5 +1,5 @@
-import { DockviewMutableDisposable, DockviewCompositeDisposable, PROPERTY_KEYS_DOCKVIEW, createDockview, SplitviewPanel, SplitviewApi, createSplitview, PROPERTY_KEYS_SPLITVIEW, GridviewPanel, GridviewApi, createGridview, PROPERTY_KEYS_GRIDVIEW, createPaneview, PROPERTY_KEYS_PANEVIEW } from "dockview-core";
-export * from "dockview-core";
+import { DockviewMutableDisposable, DockviewCompositeDisposable, PROPERTY_KEYS_DOCKVIEW, createDockview, SplitviewPanel, SplitviewApi, createSplitview, PROPERTY_KEYS_SPLITVIEW, GridviewPanel, GridviewApi, createGridview, PROPERTY_KEYS_GRIDVIEW, createPaneview, PROPERTY_KEYS_PANEVIEW } from "dockview";
+export * from "dockview";
 import { createVNode, render, cloneVNode, defineComponent, ref, watch, getCurrentInstance, onMounted, markRaw, onBeforeUnmount, openBlock, createElementBlock } from "vue";
 function findComponent(parent, name, components) {
   if (components && components[name]) {
@@ -300,13 +300,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     singleTabMode: {},
     disableFloatingGroups: { type: Boolean },
     floatingGroupBounds: {},
+    transformFloatingGroupDrag: { type: Function },
+    floatingGroupDragHandle: {},
     popoutUrl: {},
     nonce: { type: [String, Function] },
     defaultRenderer: {},
     defaultHeaderPosition: {},
     debug: { type: Boolean },
     dndEdges: { type: [Boolean, Object] },
-    rootOverlayModel: {},
     disableDnd: { type: Boolean },
     dndStrategy: {},
     locked: { type: Boolean },
@@ -319,6 +320,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     getTabGroupChipContextMenuItems: { type: Function },
     createTabGroupChipComponent: { type: Function },
     createGroupDragGhostComponent: { type: Function },
+    dropOverlayModel: { type: Function },
+    announcements: { type: Boolean },
+    getAnnouncement: { type: Function },
+    announcer: { type: Function },
+    messages: {},
+    keyboardNavigation: { type: [Boolean, Object] },
     tabGroupColors: {},
     tabGroupAccent: {},
     components: {},

package/dist/dockview-vue.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("dockview-core"), require("vue")) : typeof define === "function" && define.amd ? define(["exports", "dockview-core", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["dockview-vue"] = {}, global.DockviewCore, global.Vue));
-})(this, (function(exports2, dockviewCore, vue) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("dockview"), require("vue")) : typeof define === "function" && define.amd ? define(["exports", "dockview", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["dockview-vue"] = {}, global.dockview, global.Vue));
+})(this, (function(exports2, dockview, vue) {
   "use strict";
   function findComponent(parent, name, components) {
     if (components && components[name]) {
@@ -134,14 +134,14 @@
     }
     group;
     _renderDisposable;
-    _mutableDisposable = new dockviewCore.DockviewMutableDisposable();
+    _mutableDisposable = new dockview.DockviewMutableDisposable();
     _baseProps;
     get element() {
       return this._element;
     }
     init(props) {
       this._baseProps = props;
-      this._mutableDisposable.value = new dockviewCore.DockviewCompositeDisposable(
+      this._mutableDisposable.value = new dockview.DockviewCompositeDisposable(
         this.group.model.onDidAddPanel(() => {
           this.updateProps();
         }),
@@ -301,13 +301,14 @@
       singleTabMode: {},
       disableFloatingGroups: { type: Boolean },
       floatingGroupBounds: {},
+      transformFloatingGroupDrag: { type: Function },
+      floatingGroupDragHandle: {},
       popoutUrl: {},
       nonce: { type: [String, Function] },
       defaultRenderer: {},
       defaultHeaderPosition: {},
       debug: { type: Boolean },
       dndEdges: { type: [Boolean, Object] },
-      rootOverlayModel: {},
       disableDnd: { type: Boolean },
       dndStrategy: {},
       locked: { type: Boolean },
@@ -320,6 +321,12 @@
       getTabGroupChipContextMenuItems: { type: Function },
       createTabGroupChipComponent: { type: Function },
       createGroupDragGhostComponent: { type: Function },
+      dropOverlayModel: { type: Function },
+      announcements: { type: Boolean },
+      getAnnouncement: { type: Function },
+      announcer: { type: Function },
+      messages: {},
+      keyboardNavigation: { type: [Boolean, Object] },
       tabGroupColors: {},
       tabGroupAccent: {},
       components: {},
@@ -335,7 +342,7 @@
     emits: ["ready", "didDrop", "willDrop"],
     setup(__props, { emit: __emit }) {
       function extractCoreOptions(props2) {
-        const coreOptions = dockviewCore.PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
+        const coreOptions = dockview.PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
           obj[key] = props2[key];
           return obj;
         }, {});
@@ -346,7 +353,7 @@
       const el = vue.ref(null);
       const instance = vue.ref(null);
       const eventDisposables = [];
-      dockviewCore.PROPERTY_KEYS_DOCKVIEW.forEach((coreOptionKey) => {
+      dockview.PROPERTY_KEYS_DOCKVIEW.forEach((coreOptionKey) => {
         vue.watch(
           () => props[coreOptionKey],
           (newValue, oldValue) => {
@@ -561,7 +568,7 @@
             return new VueGroupDragGhostRenderer(component, inst);
           };
         }
-        const api = dockviewCore.createDockview(el.value, {
+        const api = dockview.createDockview(el.value, {
           ...coreOptions,
           ...frameworkOptions
         });
@@ -682,7 +689,7 @@
       instance
     };
   }
-  class VueSplitviewPanelView extends dockviewCore.SplitviewPanel {
+  class VueSplitviewPanelView extends dockview.SplitviewPanel {
     constructor(id, component, vueComponent, parent) {
       super(id, component);
       this.vueComponent = vueComponent;
@@ -694,7 +701,7 @@
       const part = new VuePart(this.element, this.vueComponent, this.parent, {
         params: this._params?.params ?? {},
         api: this.api,
-        containerApi: new dockviewCore.SplitviewApi(this._params.accessor)
+        containerApi: new dockview.SplitviewApi(this._params.accessor)
       });
       part.init();
       return part;
@@ -715,7 +722,7 @@
     emits: ["ready"],
     setup(__props, { emit: __emit }) {
       function extractCoreOptions(props2) {
-        const coreOptions = dockviewCore.PROPERTY_KEYS_SPLITVIEW.reduce((obj, key) => {
+        const coreOptions = dockview.PROPERTY_KEYS_SPLITVIEW.reduce((obj, key) => {
           obj[key] = props2[key];
           return obj;
         }, {});
@@ -726,8 +733,8 @@
       const { el } = useViewComponent(
         {
           componentName: "splitview-vue",
-          propertyKeys: dockviewCore.PROPERTY_KEYS_SPLITVIEW,
-          createApi: dockviewCore.createSplitview,
+          propertyKeys: dockview.PROPERTY_KEYS_SPLITVIEW,
+          createApi: dockview.createSplitview,
           createView: (id, name, component, instance) => new VueSplitviewPanelView(id, name, component, instance),
           extractCoreOptions
         },
@@ -743,7 +750,7 @@
       };
     }
   });
-  class VueGridviewPanelView extends dockviewCore.GridviewPanel {
+  class VueGridviewPanelView extends dockview.GridviewPanel {
     constructor(id, component, vueComponent, parent) {
       super(id, component);
       this.vueComponent = vueComponent;
@@ -755,7 +762,7 @@
       const part = new VuePart(this.element, this.vueComponent, this.parent, {
         params: this._params?.params ?? {},
         api: this.api,
-        containerApi: new dockviewCore.GridviewApi(this._params.accessor)
+        containerApi: new dockview.GridviewApi(this._params.accessor)
       });
       part.init();
       return part;
@@ -774,7 +781,7 @@
     emits: ["ready"],
     setup(__props, { emit: __emit }) {
       function extractCoreOptions(props2) {
-        const coreOptions = dockviewCore.PROPERTY_KEYS_GRIDVIEW.reduce((obj, key) => {
+        const coreOptions = dockview.PROPERTY_KEYS_GRIDVIEW.reduce((obj, key) => {
           obj[key] = props2[key];
           return obj;
         }, {});
@@ -785,8 +792,8 @@
       const { el } = useViewComponent(
         {
           componentName: "gridview-vue",
-          propertyKeys: dockviewCore.PROPERTY_KEYS_GRIDVIEW,
-          createApi: dockviewCore.createGridview,
+          propertyKeys: dockview.PROPERTY_KEYS_GRIDVIEW,
+          createApi: dockview.createGridview,
           createView: (id, name, component, instance) => new VueGridviewPanelView(id, name, component, instance),
           extractCoreOptions
         },
@@ -851,7 +858,7 @@
     emits: ["ready", "didDrop"],
     setup(__props, { emit: __emit }) {
       function extractCoreOptions(props2) {
-        const coreOptions = dockviewCore.PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
+        const coreOptions = dockview.PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
           obj[key] = props2[key];
           return obj;
         }, {});
@@ -862,8 +869,8 @@
       const { el } = useViewComponent(
         {
           componentName: "paneview-vue",
-          propertyKeys: dockviewCore.PROPERTY_KEYS_PANEVIEW,
-          createApi: dockviewCore.createPaneview,
+          propertyKeys: dockview.PROPERTY_KEYS_PANEVIEW,
+          createApi: dockview.createPaneview,
           createView: (id, name, component, instance) => new VuePaneviewPanelView(id, component, instance),
           extractCoreOptions,
           onApiCreated: (api) => [
@@ -896,10 +903,10 @@
   exports2.findComponent = findComponent;
   exports2.mountVueComponent = mountVueComponent;
   exports2.resolveComponent = resolveComponent;
-  Object.keys(dockviewCore).forEach((k) => {
+  Object.keys(dockview).forEach((k) => {
     if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k)) Object.defineProperty(exports2, k, {
       enumerable: true,
-      get: () => dockviewCore[k]
+      get: () => dockview[k]
     });
   });
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });

package/dist/styles/dockview.css

@@ -62,6 +62,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -124,6 +129,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -190,6 +200,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -281,6 +296,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -357,6 +377,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -398,7 +423,7 @@
 .dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {
   position: absolute;
   left: 0px;
-  top: 0px;
+  bottom: 0px;
   content: "";
   width: 100%;
   height: 1px;
@@ -446,6 +471,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -553,6 +583,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -569,7 +604,7 @@
   --dv-tab-group-line-opacity: 0.6;
   --dv-spacing-padding: 10px;
   --dv-tab-font-size: 12px;
-  --dv-border-radius: 20px;
+  --dv-border-radius: 12px;
   --dv-tab-margin: 0.5rem 0.25rem;
   --dv-tabs-and-actions-container-height: 44px;
   --dv-tab-border-radius: 8px;
@@ -577,6 +612,10 @@
   --dv-dropdown-border-radius: 8px;
   --dv-tab-close-icon-size: 8px;
   --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);
+  --dv-floating-titlebar-background-color: var(
+      --dv-group-view-background-color
+  );
+  --dv-floating-titlebar-border-bottom: none;
   box-sizing: border-box;
   padding: var(--dv-spacing-padding);
   background-color: var(--dv-group-view-background-color);
@@ -603,6 +642,17 @@
 .dockview-theme-nord-spaced .dv-resize-container .dv-groupview {
   border: var(--dv-floating-group-border);
 }
+.dockview-theme-nord-spaced .dv-resize-container > .dv-grid-view {
+  box-sizing: border-box;
+  padding: var(--dv-spacing-padding);
+}
+.dockview-theme-nord-spaced .dv-resize-container-with-titlebar > .dv-grid-view {
+  padding-top: 0;
+}
+.dockview-theme-nord-spaced .dv-resize-container-with-titlebar > .dv-floating-titlebar {
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
+}
 .dockview-theme-nord-spaced .dv-tabs-overflow-container,
 .dockview-theme-nord-spaced .dv-tabs-overflow-dropdown-default {
   border-radius: var(--dv-dropdown-border-radius);
@@ -627,6 +677,8 @@
 }
 .dockview-theme-nord-spaced .dv-groupview .dv-tabs-and-actions-container {
   padding: 0px calc(var(--dv-border-radius) / 2);
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
 }
 .dockview-theme-nord-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {
   padding: calc(var(--dv-border-radius) / 2) 0;
@@ -699,6 +751,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -760,7 +817,7 @@
 .dockview-theme-catppuccin-mocha .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {
   position: absolute;
   left: 0px;
-  top: 0px;
+  bottom: 0px;
   content: "";
   width: 100%;
   height: 2px;
@@ -773,7 +830,7 @@
 .dockview-theme-catppuccin-mocha .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {
   position: absolute;
   left: 0px;
-  top: 0px;
+  bottom: 0px;
   content: "";
   width: 100%;
   height: 2px;
@@ -808,6 +865,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -824,7 +886,7 @@
   --dv-tab-group-line-opacity: 0.6;
   --dv-spacing-padding: 10px;
   --dv-tab-font-size: 12px;
-  --dv-border-radius: 20px;
+  --dv-border-radius: 12px;
   --dv-tab-margin: 0.5rem 0.25rem;
   --dv-tabs-and-actions-container-height: 44px;
   --dv-tab-border-radius: 8px;
@@ -832,6 +894,10 @@
   --dv-dropdown-border-radius: 8px;
   --dv-tab-close-icon-size: 8px;
   --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);
+  --dv-floating-titlebar-background-color: var(
+      --dv-group-view-background-color
+  );
+  --dv-floating-titlebar-border-bottom: none;
   box-sizing: border-box;
   padding: var(--dv-spacing-padding);
   background-color: var(--dv-group-view-background-color);
@@ -858,6 +924,17 @@
 .dockview-theme-catppuccin-mocha-spaced .dv-resize-container .dv-groupview {
   border: var(--dv-floating-group-border);
 }
+.dockview-theme-catppuccin-mocha-spaced .dv-resize-container > .dv-grid-view {
+  box-sizing: border-box;
+  padding: var(--dv-spacing-padding);
+}
+.dockview-theme-catppuccin-mocha-spaced .dv-resize-container-with-titlebar > .dv-grid-view {
+  padding-top: 0;
+}
+.dockview-theme-catppuccin-mocha-spaced .dv-resize-container-with-titlebar > .dv-floating-titlebar {
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
+}
 .dockview-theme-catppuccin-mocha-spaced .dv-tabs-overflow-container,
 .dockview-theme-catppuccin-mocha-spaced .dv-tabs-overflow-dropdown-default {
   border-radius: var(--dv-dropdown-border-radius);
@@ -882,6 +959,8 @@
 }
 .dockview-theme-catppuccin-mocha-spaced .dv-groupview .dv-tabs-and-actions-container {
   padding: 0px calc(var(--dv-border-radius) / 2);
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
 }
 .dockview-theme-catppuccin-mocha-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {
   padding: calc(var(--dv-border-radius) / 2) 0;
@@ -956,6 +1035,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -1056,6 +1140,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -1133,6 +1222,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -1149,7 +1243,7 @@
   --dv-tab-group-line-opacity: 0.6;
   --dv-spacing-padding: 10px;
   --dv-tab-font-size: 12px;
-  --dv-border-radius: 20px;
+  --dv-border-radius: 12px;
   --dv-tab-margin: 0.5rem 0.25rem;
   --dv-tabs-and-actions-container-height: 44px;
   --dv-tab-border-radius: 8px;
@@ -1157,6 +1251,10 @@
   --dv-dropdown-border-radius: 8px;
   --dv-tab-close-icon-size: 8px;
   --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);
+  --dv-floating-titlebar-background-color: var(
+      --dv-group-view-background-color
+  );
+  --dv-floating-titlebar-border-bottom: none;
   box-sizing: border-box;
   padding: var(--dv-spacing-padding);
   background-color: var(--dv-group-view-background-color);
@@ -1183,6 +1281,17 @@
 .dockview-theme-solarized-light-spaced .dv-resize-container .dv-groupview {
   border: var(--dv-floating-group-border);
 }
+.dockview-theme-solarized-light-spaced .dv-resize-container > .dv-grid-view {
+  box-sizing: border-box;
+  padding: var(--dv-spacing-padding);
+}
+.dockview-theme-solarized-light-spaced .dv-resize-container-with-titlebar > .dv-grid-view {
+  padding-top: 0;
+}
+.dockview-theme-solarized-light-spaced .dv-resize-container-with-titlebar > .dv-floating-titlebar {
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
+}
 .dockview-theme-solarized-light-spaced .dv-tabs-overflow-container,
 .dockview-theme-solarized-light-spaced .dv-tabs-overflow-dropdown-default {
   border-radius: var(--dv-dropdown-border-radius);
@@ -1207,6 +1316,8 @@
 }
 .dockview-theme-solarized-light-spaced .dv-groupview .dv-tabs-and-actions-container {
   padding: 0px calc(var(--dv-border-radius) / 2);
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
 }
 .dockview-theme-solarized-light-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {
   padding: calc(var(--dv-border-radius) / 2) 0;
@@ -1275,6 +1386,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -1358,6 +1474,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -1374,7 +1495,7 @@
   --dv-tab-group-line-opacity: 0.6;
   --dv-spacing-padding: 10px;
   --dv-tab-font-size: 12px;
-  --dv-border-radius: 20px;
+  --dv-border-radius: 12px;
   --dv-tab-margin: 0.5rem 0.25rem;
   --dv-tabs-and-actions-container-height: 44px;
   --dv-tab-border-radius: 8px;
@@ -1382,6 +1503,10 @@
   --dv-dropdown-border-radius: 8px;
   --dv-tab-close-icon-size: 8px;
   --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);
+  --dv-floating-titlebar-background-color: var(
+      --dv-group-view-background-color
+  );
+  --dv-floating-titlebar-border-bottom: none;
   box-sizing: border-box;
   padding: var(--dv-spacing-padding);
   background-color: var(--dv-group-view-background-color);
@@ -1408,6 +1533,17 @@
 .dockview-theme-github-dark-spaced .dv-resize-container .dv-groupview {
   border: var(--dv-floating-group-border);
 }
+.dockview-theme-github-dark-spaced .dv-resize-container > .dv-grid-view {
+  box-sizing: border-box;
+  padding: var(--dv-spacing-padding);
+}
+.dockview-theme-github-dark-spaced .dv-resize-container-with-titlebar > .dv-grid-view {
+  padding-top: 0;
+}
+.dockview-theme-github-dark-spaced .dv-resize-container-with-titlebar > .dv-floating-titlebar {
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
+}
 .dockview-theme-github-dark-spaced .dv-tabs-overflow-container,
 .dockview-theme-github-dark-spaced .dv-tabs-overflow-dropdown-default {
   border-radius: var(--dv-dropdown-border-radius);
@@ -1432,6 +1568,8 @@
 }
 .dockview-theme-github-dark-spaced .dv-groupview .dv-tabs-and-actions-container {
   padding: 0px calc(var(--dv-border-radius) / 2);
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
 }
 .dockview-theme-github-dark-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {
   padding: calc(var(--dv-border-radius) / 2) 0;
@@ -1506,6 +1644,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -1595,6 +1738,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -1611,7 +1759,7 @@
   --dv-tab-group-line-opacity: 0.6;
   --dv-spacing-padding: 10px;
   --dv-tab-font-size: 12px;
-  --dv-border-radius: 20px;
+  --dv-border-radius: 12px;
   --dv-tab-margin: 0.5rem 0.25rem;
   --dv-tabs-and-actions-container-height: 44px;
   --dv-tab-border-radius: 8px;
@@ -1619,6 +1767,10 @@
   --dv-dropdown-border-radius: 8px;
   --dv-tab-close-icon-size: 8px;
   --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);
+  --dv-floating-titlebar-background-color: var(
+      --dv-group-view-background-color
+  );
+  --dv-floating-titlebar-border-bottom: none;
   box-sizing: border-box;
   padding: var(--dv-spacing-padding);
   background-color: var(--dv-group-view-background-color);
@@ -1645,6 +1797,17 @@
 .dockview-theme-github-light-spaced .dv-resize-container .dv-groupview {
   border: var(--dv-floating-group-border);
 }
+.dockview-theme-github-light-spaced .dv-resize-container > .dv-grid-view {
+  box-sizing: border-box;
+  padding: var(--dv-spacing-padding);
+}
+.dockview-theme-github-light-spaced .dv-resize-container-with-titlebar > .dv-grid-view {
+  padding-top: 0;
+}
+.dockview-theme-github-light-spaced .dv-resize-container-with-titlebar > .dv-floating-titlebar {
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
+}
 .dockview-theme-github-light-spaced .dv-tabs-overflow-container,
 .dockview-theme-github-light-spaced .dv-tabs-overflow-dropdown-default {
   border-radius: var(--dv-dropdown-border-radius);
@@ -1669,6 +1832,8 @@
 }
 .dockview-theme-github-light-spaced .dv-groupview .dv-tabs-and-actions-container {
   padding: 0px calc(var(--dv-border-radius) / 2);
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
 }
 .dockview-theme-github-light-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {
   padding: calc(var(--dv-border-radius) / 2) 0;
@@ -1748,6 +1913,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -1764,7 +1934,7 @@
   --dv-tab-group-line-opacity: 0.6;
   --dv-spacing-padding: 10px;
   --dv-tab-font-size: 12px;
-  --dv-border-radius: 20px;
+  --dv-border-radius: 12px;
   --dv-tab-margin: 0.5rem 0.25rem;
   --dv-tabs-and-actions-container-height: 44px;
   --dv-tab-border-radius: 8px;
@@ -1772,6 +1942,10 @@
   --dv-dropdown-border-radius: 8px;
   --dv-tab-close-icon-size: 8px;
   --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);
+  --dv-floating-titlebar-background-color: var(
+      --dv-group-view-background-color
+  );
+  --dv-floating-titlebar-border-bottom: none;
   box-sizing: border-box;
   padding: var(--dv-spacing-padding);
   background-color: var(--dv-group-view-background-color);
@@ -1798,6 +1972,17 @@
 .dockview-theme-abyss-spaced .dv-resize-container .dv-groupview {
   border: var(--dv-floating-group-border);
 }
+.dockview-theme-abyss-spaced .dv-resize-container > .dv-grid-view {
+  box-sizing: border-box;
+  padding: var(--dv-spacing-padding);
+}
+.dockview-theme-abyss-spaced .dv-resize-container-with-titlebar > .dv-grid-view {
+  padding-top: 0;
+}
+.dockview-theme-abyss-spaced .dv-resize-container-with-titlebar > .dv-floating-titlebar {
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
+}
 .dockview-theme-abyss-spaced .dv-tabs-overflow-container,
 .dockview-theme-abyss-spaced .dv-tabs-overflow-dropdown-default {
   border-radius: var(--dv-dropdown-border-radius);
@@ -1822,6 +2007,8 @@
 }
 .dockview-theme-abyss-spaced .dv-groupview .dv-tabs-and-actions-container {
   padding: 0px calc(var(--dv-border-radius) / 2);
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
 }
 .dockview-theme-abyss-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {
   padding: calc(var(--dv-border-radius) / 2) 0;
@@ -1898,6 +2085,11 @@
   --dv-floating-group-border: none;
   --dv-drag-over-border: none;
   --dv-floating-group-dragging-opacity: 0.5;
+  --dv-floating-titlebar-height: 22px;
+  --dv-floating-titlebar-background-color: var(
+      --dv-tabs-and-actions-container-background-color
+  );
+  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
   --dv-tab-group-color-grey: #5f6368;
   --dv-tab-group-color-blue: #1a73e8;
   --dv-tab-group-color-red: #d93025;
@@ -1914,7 +2106,7 @@
   --dv-tab-group-line-opacity: 0.6;
   --dv-spacing-padding: 10px;
   --dv-tab-font-size: 12px;
-  --dv-border-radius: 20px;
+  --dv-border-radius: 12px;
   --dv-tab-margin: 0.5rem 0.25rem;
   --dv-tabs-and-actions-container-height: 44px;
   --dv-tab-border-radius: 8px;
@@ -1922,6 +2114,10 @@
   --dv-dropdown-border-radius: 8px;
   --dv-tab-close-icon-size: 8px;
   --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);
+  --dv-floating-titlebar-background-color: var(
+      --dv-group-view-background-color
+  );
+  --dv-floating-titlebar-border-bottom: none;
   box-sizing: border-box;
   padding: var(--dv-spacing-padding);
   background-color: var(--dv-group-view-background-color);
@@ -1948,6 +2144,17 @@
 .dockview-theme-light-spaced .dv-resize-container .dv-groupview {
   border: var(--dv-floating-group-border);
 }
+.dockview-theme-light-spaced .dv-resize-container > .dv-grid-view {
+  box-sizing: border-box;
+  padding: var(--dv-spacing-padding);
+}
+.dockview-theme-light-spaced .dv-resize-container-with-titlebar > .dv-grid-view {
+  padding-top: 0;
+}
+.dockview-theme-light-spaced .dv-resize-container-with-titlebar > .dv-floating-titlebar {
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
+}
 .dockview-theme-light-spaced .dv-tabs-overflow-container,
 .dockview-theme-light-spaced .dv-tabs-overflow-dropdown-default {
   border-radius: var(--dv-dropdown-border-radius);
@@ -1972,6 +2179,8 @@
 }
 .dockview-theme-light-spaced .dv-groupview .dv-tabs-and-actions-container {
   padding: 0px calc(var(--dv-border-radius) / 2);
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
 }
 .dockview-theme-light-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {
   padding: calc(var(--dv-border-radius) / 2) 0;
@@ -2007,7 +2216,7 @@
 .dockview-spaced {
   --dv-spacing-padding: 10px;
   --dv-tab-font-size: 12px;
-  --dv-border-radius: 20px;
+  --dv-border-radius: 12px;
   --dv-tab-margin: 0.5rem 0.25rem;
   --dv-tabs-and-actions-container-height: 44px;
   --dv-tab-border-radius: 8px;
@@ -2015,6 +2224,10 @@
   --dv-dropdown-border-radius: 8px;
   --dv-tab-close-icon-size: 8px;
   --dv-floating-group-border: 2px solid var(--dv-group-view-background-color);
+  --dv-floating-titlebar-background-color: var(
+      --dv-group-view-background-color
+  );
+  --dv-floating-titlebar-border-bottom: none;
   box-sizing: border-box;
   padding: var(--dv-spacing-padding);
   background-color: var(--dv-group-view-background-color);
@@ -2041,6 +2254,17 @@
 .dockview-spaced .dv-resize-container .dv-groupview {
   border: var(--dv-floating-group-border);
 }
+.dockview-spaced .dv-resize-container > .dv-grid-view {
+  box-sizing: border-box;
+  padding: var(--dv-spacing-padding);
+}
+.dockview-spaced .dv-resize-container-with-titlebar > .dv-grid-view {
+  padding-top: 0;
+}
+.dockview-spaced .dv-resize-container-with-titlebar > .dv-floating-titlebar {
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
+}
 .dockview-spaced .dv-tabs-overflow-container,
 .dockview-spaced .dv-tabs-overflow-dropdown-default {
   border-radius: var(--dv-dropdown-border-radius);
@@ -2065,6 +2289,8 @@
 }
 .dockview-spaced .dv-groupview .dv-tabs-and-actions-container {
   padding: 0px calc(var(--dv-border-radius) / 2);
+  border-top-left-radius: var(--dv-border-radius);
+  border-top-right-radius: var(--dv-border-radius);
 }
 .dockview-spaced .dv-groupview .dv-tabs-and-actions-container.dv-groupview-header-vertical {
   padding: calc(var(--dv-border-radius) / 2) 0;
@@ -2162,6 +2388,11 @@
   top: auto;
   bottom: 0;
 }
+
+.dv-groupview.dv-groupview-header-bottom.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after, .dv-groupview.dv-groupview-header-bottom.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {
+  top: 0px;
+  bottom: auto;
+}
 .dv-drop-target-container {
   position: absolute;
   z-index: 9999;
@@ -2325,10 +2556,42 @@
   pointer-events: auto;
 }
 
+.dv-resize-container > .dv-grid-view {
+  width: 100%;
+  height: 100%;
+}
+
+.dv-resize-container-with-titlebar {
+  display: flex;
+  flex-direction: column;
+}
+.dv-resize-container-with-titlebar > .dv-floating-titlebar {
+  flex: 0 0 auto;
+}
+.dv-resize-container-with-titlebar > .dv-grid-view {
+  height: auto;
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+.dv-floating-titlebar {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: var(--dv-floating-titlebar-height, 22px);
+  background-color: var(--dv-floating-titlebar-background-color);
+  border-bottom: var(--dv-floating-titlebar-border-bottom, none);
+  user-select: none;
+  touch-action: none;
+}
+.dv-floating-titlebar.dv-draggable {
+  cursor: grab;
+}
+
 .dv-resize-container {
   --dv-overlay-z-index: var(--dv-overlay-z-index, 999);
   position: absolute;
   z-index: calc(var(--dv-overlay-z-index) - 2);
+  background-color: var(--dv-group-view-background-color);
   border: var(--dv-floating-border);
   box-shadow: var(--dv-floating-box-shadow);
   /* GPU optimizations for floating group movement */
@@ -2836,7 +3099,6 @@
   border-radius: 2px;
   background-color: var(--dv-icon-hover-background-color);
 }
-@charset "UTF-8";
 .dv-tabs-container {
   display: flex;
   position: relative;
@@ -2858,7 +3120,7 @@
    * Empty space between tabs (and the scrollbar lane) keeps pan-x so a
    * flick on those areas produces native momentum scroll. The tab and
    * chip elements themselves opt out (`touch-action: none`) so the
-   * pointer drag source owns the gesture from pointerdown — a flick on
+   * pointer drag source owns the gesture from pointerdown - a flick on
    * a tab or chip always becomes a drag, regardless of direction.
    */
   touch-action: pan-x;

package/dist/types/composables/useViewComponent.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentInternalInstance } from 'vue';
-import type { DockviewIDisposable } from 'dockview-core';
+import type { DockviewIDisposable } from 'dockview';
 export interface ViewComponentConfig<TApi, TOptions, TProps, TEvents, TView, TFrameworkOptions> {
     componentName: string;
     propertyKeys: readonly (keyof TOptions)[];

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

@@ -1,12 +1,12 @@
 import type { IDockviewVueProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<IDockviewVueProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    ready: (event: import("dockview-core").DockviewReadyEvent) => any;
-    didDrop: (event: import("dockview-core").DockviewDidDropEvent) => any;
-    willDrop: (event: import("dockview-core").DockviewWillDropEvent) => any;
+    ready: (event: import("dockview").DockviewReadyEvent) => any;
+    didDrop: (event: import("dockview").DockviewDidDropEvent) => any;
+    willDrop: (event: import("dockview").DockviewWillDropEvent) => any;
 }, string, import("vue").PublicProps, Readonly<IDockviewVueProps> & Readonly<{
-    onReady?: (event: import("dockview-core").DockviewReadyEvent) => any;
-    onDidDrop?: (event: import("dockview-core").DockviewDidDropEvent) => any;
-    onWillDrop?: (event: import("dockview-core").DockviewWillDropEvent) => any;
+    onReady?: (event: import("dockview").DockviewReadyEvent) => any;
+    onDidDrop?: (event: import("dockview").DockviewDidDropEvent) => any;
+    onWillDrop?: (event: import("dockview").DockviewWillDropEvent) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,4 @@
-import { type DockviewDidDropEvent, type DockviewOptions, type DockviewReadyEvent, type DockviewWillDropEvent } from 'dockview-core';
+import { type DockviewDidDropEvent, type DockviewOptions, type DockviewReadyEvent, type DockviewWillDropEvent } from 'dockview';
 import type { VueComponent } from '../utils';
 export interface VueProps {
     components?: Record<string, VueComponent>;

package/dist/types/gridview/types.d.ts

@@ -1,4 +1,4 @@
-import type { GridviewApi, GridviewOptions, GridviewPanelApi } from 'dockview-core';
+import type { GridviewApi, GridviewOptions, GridviewPanelApi } from 'dockview';
 import type { VueComponent } from '../utils';
 export interface GridviewReadyEvent {
     api: GridviewApi;

package/dist/types/gridview/view.d.ts

@@ -1,4 +1,4 @@
-import { GridviewPanel, IFrameworkPart } from 'dockview-core';
+import { GridviewPanel, IFrameworkPart } from 'dockview';
 import { type ComponentInternalInstance } from 'vue';
 import { type VueComponent } from '../utils';
 import type { IGridviewVuePanelProps } from './types';

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export * from 'dockview-core';
+export * from 'dockview';
 import DockviewVue from './dockview/dockview.vue';
 import SplitviewVue from './splitview/splitview.vue';
 import GridviewVue from './gridview/gridview.vue';

package/dist/types/paneview/paneview.vue.d.ts

@@ -1,10 +1,10 @@
 import type { IPaneviewVueProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<IPaneviewVueProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     ready: (event: import("./types").PaneviewReadyEvent) => any;
-    didDrop: (event: import("dockview-core").PaneviewDropEvent) => any;
+    didDrop: (event: import("dockview").PaneviewDidDropEvent) => any;
 }, string, import("vue").PublicProps, Readonly<IPaneviewVueProps> & Readonly<{
     onReady?: (event: import("./types").PaneviewReadyEvent) => any;
-    onDidDrop?: (event: import("dockview-core").PaneviewDropEvent) => any;
+    onDidDrop?: (event: import("dockview").PaneviewDidDropEvent) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/paneview/types.d.ts

@@ -1,4 +1,4 @@
-import type { PaneviewApi, PaneviewDropEvent, PaneviewOptions, PaneviewPanelApi } from 'dockview-core';
+import type { PaneviewApi, PaneviewDidDropEvent, PaneviewOptions, PaneviewPanelApi } from 'dockview';
 import type { VueComponent } from '../utils';
 export interface PaneviewReadyEvent {
     api: PaneviewApi;
@@ -14,5 +14,5 @@ export interface IPaneviewVueProps extends PaneviewOptions {
 }
 export type PaneviewVueEvents = {
     ready: [event: PaneviewReadyEvent];
-    didDrop: [event: PaneviewDropEvent];
+    didDrop: [event: PaneviewDidDropEvent];
 };

package/dist/types/paneview/view.d.ts

@@ -1,4 +1,4 @@
-import { IPanePart, PanePanelComponentInitParameter, PanelUpdateEvent } from 'dockview-core';
+import { IPanePart, PanePanelComponentInitParameter, PanelUpdateEvent } from 'dockview';
 import { type ComponentInternalInstance } from 'vue';
 import { type VueComponent } from '../utils';
 import type { IPaneviewVuePanelProps } from './types';

package/dist/types/splitview/types.d.ts

@@ -1,4 +1,4 @@
-import type { SplitviewApi, SplitviewOptions, SplitviewPanelApi } from 'dockview-core';
+import type { SplitviewApi, SplitviewOptions, SplitviewPanelApi } from 'dockview';
 import type { VueComponent } from '../utils';
 export interface SplitviewReadyEvent {
     api: SplitviewApi;

package/dist/types/splitview/view.d.ts

@@ -1,4 +1,4 @@
-import { SplitviewPanel, IFrameworkPart } from 'dockview-core';
+import { SplitviewPanel, IFrameworkPart } from 'dockview';
 import { type ComponentInternalInstance } from 'vue';
 import { type VueComponent } from '../utils';
 import type { ISplitviewVuePanelProps } from './types';

package/dist/types/utils.d.ts

@@ -1,4 +1,4 @@
-import type { DockviewApi, DockviewGroupPanel, IContentRenderer, IDockviewGroupPanel, IGroupDragGhostRenderer, IGroupHeaderProps, IHeaderActionsRenderer, ITabGroupChipRenderer, ITabGroup, ITabRenderer, IWatermarkRenderer, IContextMenuItemRenderer, IContextMenuItemComponentProps, PanelUpdateEvent, Parameters, TabPartInitParameters, WatermarkRendererInitParameters } from 'dockview-core';
+import type { DockviewApi, DockviewGroupPanel, IContentRenderer, IDockviewGroupPanel, IGroupDragGhostRenderer, IGroupHeaderProps, IHeaderActionsRenderer, ITabGroupChipRenderer, ITabGroup, ITabRenderer, IWatermarkRenderer, IContextMenuItemRenderer, IContextMenuItemComponentProps, PanelUpdateEvent, Parameters, TabPartInitParameters, WatermarkRendererInitParameters } from 'dockview';
 import { type ComponentOptionsBase, type DefineComponent, type ComponentInternalInstance } from 'vue';
 export type ComponentInterface = ComponentOptionsBase<any, any, any, any, any, any, any, any>;
 export type VueComponent<T = any> = DefineComponent<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockview-vue",
-    "version": "6.6.1",
+    "version": "7.0.2",
     "description": "Vue 3 docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels",
     "keywords": [
         "splitview",
@@ -38,6 +38,19 @@
     "main": "dist/dockview-vue.umd.js",
     "module": "dist/dockview-vue.es.js",
     "types": "dist/types/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/dockview-vue.es.js",
+            "require": "./dist/dockview-vue.umd.js"
+        },
+        "./dist/styles/*": "./dist/styles/*",
+        "./package.json": "./package.json"
+    },
+    "sideEffects": [
+        "**/*.css",
+        "**/*.scss"
+    ],
     "homepage": "https://github.com/mathuo/dockview",
     "bugs": {
         "url": "https://github.com/mathuo/dockview/issues"
@@ -69,7 +82,7 @@
         "format:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx,vue}'"
     },
     "dependencies": {
-        "dockview-core": "^6.6.1"
+        "dockview": "^7.0.2"
     },
     "peerDependencies": {
         "vue": "^3.4.0"