chore(release): publish v4.7.0

bug: fix always renderers initial position

.codesandbox/ci.json

@@ -1,23 +1,45 @@
 {
   "packages": [
     "packages/dockview-core",
+    "packages/dockview-vue",
+    "packages/dockview-react",
     "packages/dockview"
   ],
   "sandboxes": [
     "/packages/docs/sandboxes/constraints-dockview",
-    "/packages/docs/sandboxes/customheader-dockview",
+    "/packages/docs/sandboxes/demo-dockview",
     "/packages/docs/sandboxes/dnd-dockview",
+    "/packages/docs/sandboxes/dockview-app",
+    "/packages/docs/sandboxes/editor-gridview",
     "/packages/docs/sandboxes/events-dockview",
     "/packages/docs/sandboxes/externaldnd-dockview",
+    "/packages/docs/sandboxes/floatinggroup-dockview",
     "/packages/docs/sandboxes/fullwidthtab-dockview",
+    "/packages/docs/sandboxes/headeractions-dockview",
     "/packages/docs/sandboxes/groupcontol-dockview",
+    "/packages/docs/sandboxes/iframe-dockview",
+    "/packages/docs/sandboxes/keyboard-dockview",
     "/packages/docs/sandboxes/layout-dockview",
+    "/packages/docs/sandboxes/lockedgroup-dockview",
+    "/packages/docs/sandboxes/maximizegroup-dockview",
     "/packages/docs/sandboxes/nativeapp-dockview",
     "/packages/docs/sandboxes/nested-dockview",
+    "/packages/docs/sandboxes/popoutgroup-dockview",
+    "/packages/docs/sandboxes/rendering-dockview",
+    "/packages/docs/sandboxes/rendermode-dockview",
     "/packages/docs/sandboxes/resize-dockview",
+    "/packages/docs/sandboxes/resizecontainer-dockview",
+    "/packages/docs/sandboxes/scrollbars-dockview",
     "/packages/docs/sandboxes/simple-dockview",
+    "/packages/docs/sandboxes/simple-gridview",
+    "/packages/docs/sandboxes/simple-paneview",
+    "/packages/docs/sandboxes/tabheight-dockview",
     "/packages/docs/sandboxes/updatetitle-dockview",
-    "/packages/docs/sandboxes/watermark-dockview"
+    "/packages/docs/sandboxes/watermark-dockview",
+    "/packages/docs/sandboxes/javascript/fullwidthtab-dockview",
+    "/packages/docs/sandboxes/javascript/simple-dockview",
+    "/packages/docs/sandboxes/javascript/tabheight-dockview",
+    "/packages/docs/sandboxes/javascript/vanilla-dockview"
   ],
-  "node": "16"
+  "node": "18"
 }

.eslintrc.js

@@ -2,18 +2,34 @@ module.exports = {
     root: true,
     parserOptions: {
         sourceType: 'module',
-        project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
+        project: [
+            './tsconfig.eslint.json',
+            './packages/*/tsconfig.json',
+            './packages/dockview-vue/tsconfig.app.json'
+        ],
         tsconfigRootDir: __dirname,
     },
     plugins: ['@typescript-eslint'],
     extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+    ignorePatterns: [
+        'packages/docs/**',
+        '**/__tests__/**',
+        '**/__mocks__/**',
+        '**/*.spec.*',
+        '**/*.test.*',
+        'dist/',
+        'node_modules/',
+        '*.scss'
+    ],
     rules: {
         'no-case-declarations': 'off',
         '@typescript-eslint/no-namespace': 'off',
         '@typescript-eslint/explicit-module-boundary-types': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-explicit-any': 'warn',
-        '@typescript-eslint/no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': 'warn',
         '@typescript-eslint/ban-types': 'off',
-        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'warn',
+        'prefer-const': 'warn',
+        '@typescript-eslint/no-var-requires': 'error',
     },
 };

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,33 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+[dockview.dev](https://dockview.dev) provides a number of examples with Code Sandbox templates. Are you able to produce the bug by forking one of those templates? Sharing a link to the forked sandbox with the bug would be extremely helpful.
+
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/codeql-analysis.yml

@@ -30,11 +30,11 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@v2
+              uses: actions/checkout@v4
 
             # Initializes the CodeQL tools for scanning.
             - name: Initialize CodeQL
-              uses: github/codeql-action/init@v1
+              uses: github/codeql-action/init@v3
               with:
                   languages: ${{ matrix.language }}
                   # If you wish to specify custom queries, you can do so here or in a config file.
@@ -45,7 +45,7 @@ jobs:
             # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
             # If this step fails, then you should remove it and run the build manually (see below)
             - name: Autobuild
-              uses: github/codeql-action/autobuild@v1
+              uses: github/codeql-action/autobuild@v3
 
             # ℹ️ Command-line programs to run using the OS shell.
             # 📚 https://git.io/JvXDl
@@ -59,4 +59,4 @@ jobs:
             #   make release
 
             - name: Perform CodeQL Analysis
-              uses: github/codeql-action/analyze@v1
+              uses: github/codeql-action/analyze@v3

.github/workflows/deploy-docs.yml

@@ -1,24 +1,20 @@
 name: Deploy Docs
 
 on:
-    schedule:
+    workflow_dispatch:
-        - cron: '0 3 * * *' # every day at 3 am UTC
 
 jobs:
     deploy-nightly-demo-app:
         runs-on: ubuntu-latest
         steps:
             - name: Checkout 🛎️
-              uses: actions/checkout@v2.3.1 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
+              uses: actions/checkout@v4
-              with:
-                  persist-credentials: false
-
             - name: Use Node.js
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v4
               with:
-                  node-version: '16.x'
+                  node-version: '20.x'
 
-            - uses: actions/cache@v2
+            - uses: actions/cache@v4
               with:
                   path: ~/.npm
                   key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
@@ -26,15 +22,20 @@ jobs:
                       ${{ runner.os }}-node-
 
             - run: yarn install
-            - run: lerna bootstrap
             - run: npm run build
               working-directory: packages/dockview-core
             - run: npm run build
               working-directory: packages/dockview
+            - run: npm run build
+              working-directory: packages/dockview-vue
+            - run: npm run build
+              working-directory: packages/dockview-react
             - run: npm run build
               working-directory: packages/docs
-            - run: npm run deploy-docs
+            - run: npm run docs
-              working-directory: packages/docs
+              working-directory: .
+            - run: node scripts/package-docs.js
+              working-directory: .
             - name: Deploy 🚀
               uses: JamesIves/github-pages-deploy-action@3.7.1
               with:

.github/workflows/main.yml

@@ -7,16 +7,16 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v4
               # might be required for sonar to work correctly
               with:
                   fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
             - name: Use Node.js
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v4
               with:
-                  node-version: '16.x'
+                  node-version: '20.x'
 
-            - uses: actions/cache@v2
+            - uses: actions/cache@v4
               with:
                   path: ~/.npm
                   key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
@@ -24,11 +24,11 @@ jobs:
                       ${{ runner.os }}-node-
 
             - run: yarn
-            - run: npm run bootstrap
             - run: npm run build
+            - run: npm run build:bundle
             - run: npm run test:cov
             - name: SonarCloud Scan
-              uses: SonarSource/sonarcloud-github-action@master
+              uses: sonarsource/sonarqube-scan-action@v5
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
                   SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.github/workflows/publish.yml

@@ -0,0 +1,78 @@
+name: Publish to npm
+
+env:
+    NPM_CONFIG_PROVENANCE: true
+on:
+    workflow_dispatch:
+    release:
+        types: [published]
+jobs:
+    publish:
+        if: github.event_name == 'release'
+        runs-on: ubuntu-latest
+        env:
+            NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        permissions:
+            id-token: write
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '20.x'
+                  registry-url: 'https://registry.npmjs.org'
+
+            - uses: actions/cache@v4
+              with:
+                  path: ~/.npm
+                  key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+                  restore-keys: |
+                      ${{ runner.os }}-node-
+
+            - run: yarn
+            - name: Publish dockview-core
+              run: npm publish --provenance
+              working-directory: packages/dockview-core
+            - name: Publish dockview
+              run: npm publish --provenance
+              working-directory: packages/dockview
+            - name: Publish dockview-vue
+              run: npm publish --provenance
+              working-directory: packages/dockview-vue
+            - name: Publish dockview-react
+              run: npm publish --provenance
+              working-directory: packages/dockview-react
+    publish-experimental:
+        if: github.event_name == 'workflow_dispatch'
+        runs-on: ubuntu-latest
+        env:
+            NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        permissions:
+            id-token: write
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '20.x'
+                  registry-url: 'https://registry.npmjs.org'
+
+            - uses: actions/cache@v4
+              with:
+                  path: ~/.npm
+                  key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+                  restore-keys: |
+                      ${{ runner.os }}-node-
+
+            - run: yarn
+            - run: node scripts/set-experimental-versions
+            - name: Publish dockview-core
+              run: npm publish --provenance --tag experimental
+              working-directory: packages/dockview-core
+            - name: Publish dockview
+              run: npm publish --provenance --tag experimental
+              working-directory: packages/dockview
+            - name: Publish dockview-vue
+              run: npm publish --provenance --tag experimental
+              working-directory: packages/dockview-vue
+            - name: Publish dockview-react
+              run: npm publish --provenance --tag experimental
+              working-directory: packages/dockview-react

.gitignore

@@ -13,3 +13,5 @@ test-report.xml
 *.code-workspace
 yarn-error.log
 /build
+/docs/
+/generated/

.vscode/extensions.json

@@ -7,7 +7,8 @@
         "esbenp.prettier-vscode",
         "redhat.vscode-yaml",
         "dbaeumer.vscode-eslint",
-        "editorconfig.editorconfig"
+        "editorconfig.editorconfig",
+        "vue.volar"
     ],
     // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
     "unwantedRecommendations": []

CLAUDE.md

@@ -0,0 +1,153 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Dockview is a zero-dependency layout manager supporting tabs, groups, grids and splitviews. It provides framework support for React, Vue, and vanilla TypeScript. The project is organized as a Lerna monorepo with multiple packages.
+
+## Development Commands
+
+### Build
+
+-   `npm run build` - Build core packages (dockview-core, dockview, dockview-vue, dockview-react)
+-   `npm run clean` - Clean all packages
+
+### Testing
+
+-   `npm test` - Run Jest tests across all packages
+-   `npm run test:cov` - Run tests with coverage reporting
+
+### Linting
+
+-   `npm run lint` - Run ESLint on TypeScript/JavaScript source files across packages
+-   `npm run lint:fix` - Run ESLint with automatic fixing of fixable issues
+
+### Documentation
+
+-   `npm run docs` - Generate documentation using custom script
+
+### Package Management
+
+-   `npm run version` - Version packages using Lerna
+-   `npm run build:bundle` - Package build artifacts
+-   `npm run generate-docs` - Package documentation
+
+## Architecture
+
+### Monorepo Structure
+
+-   **packages/dockview-core** - Core layout engine (TypeScript, framework-agnostic)
+-   **packages/dockview** - React bindings and components
+-   **packages/dockview-vue** - Vue bindings and components
+-   **packages/dockview-angular** - Angular bindings and components
+-   **packages/dockview-react** - Additional React utilities
+-   **packages/docs** - Documentation website (Docusaurus)
+
+### Key Components
+
+#### Core Architecture (dockview-core)
+
+-   **DockviewComponent** - Main container managing panels and groups
+-   **DockviewGroupPanel** - Container for related panels with tabs
+-   **DockviewPanel** - Individual content panels
+-   **Gridview/Splitview/Paneview** - Different layout strategies
+-   **API Layer** - Programmatic interfaces for each component type
+
+#### Framework Integration
+
+-   Framework-specific packages provide thin wrappers around core components
+-   React package uses HOCs and hooks for component lifecycle management
+-   Vue package provides Vue 3 composition API integration
+-   All frameworks share the same core serialization/deserialization logic
+
+#### Key Features
+
+-   Drag and drop with customizable drop zones
+-   Floating groups and popout windows
+-   Serialization/deserialization for state persistence
+-   Theming system with CSS custom properties
+-   Comprehensive API for programmatic control
+
+### Testing Strategy
+
+-   Jest with ts-jest preset for TypeScript support
+-   Testing Library for React component testing
+-   Coverage reporting with SonarCloud integration
+-   Each package has its own jest.config.ts extending root configuration
+
+### Build System
+
+-   Lerna for monorepo management
+-   Rollup for package bundling
+-   TypeScript for type checking and compilation
+-   Gulp for additional build tasks (SCSS processing)
+
+### Code Quality
+
+-   ESLint configuration extends recommended TypeScript rules
+-   Linting targets source files in packages/\*/src/\*\* (excludes tests, docs, node_modules)
+-   Configuration centralized in .eslintrc.js with ignore patterns
+-   Current rules focus on TypeScript best practices while allowing some flexibility
+-   Most linting issues require manual fixes (type specifications, unused variables, null assertions)
+
+## Development Notes
+
+### Working with Packages
+
+-   Use Lerna commands for cross-package operations
+-   Each package can be built independently
+-   Core package must be built before framework packages
+-   Use workspaces for dependency management
+
+### Adding New Features
+
+-   Start with core package implementation
+-   Add corresponding API methods in api/ directory
+-   Create framework-specific wrappers as needed
+-   Update TypeDoc documentation
+-   Add tests in **tests** directories
+-   Run `npm run lint` to check code quality before committing
+
+### State Management
+
+-   Components use internal state with event-driven updates
+-   Serialization provides snapshot-based state persistence
+-   APIs provide reactive interfaces with event subscriptions
+
+## Release Management
+
+### Creating Release Notes
+
+Release notes are stored in `packages/docs/blog/` with the naming format `YYYY-MM-DD-dockview-X.Y.Z.md`.
+
+To create release notes for a new version:
+
+1. Check git commits since the last release: `git log --oneline --since="YYYY-MM-DD"`
+2. Create a new markdown file following the established format:
+   - Front matter with slug, title, and tags
+   - Sections for Features (🚀), Miscs (🛠), and Breaking changes (🔥)
+   - Reference GitHub PR numbers for significant changes
+   - Focus on user-facing changes, bug fixes, and new features
+
+Example format:
+```markdown
+---
+slug: dockview-X.Y.Z-release
+title: Dockview X.Y.Z
+tags: [release]
+---
+
+# Release Notes
+
+Please reference docs @ [dockview.dev](https://dockview.dev).
+
+## 🚀 Features
+- Feature description [#PR](link)
+
+## 🛠 Miscs
+- Bug: Fix description [#PR](link)
+- Chore: Maintenance description [#PR](link)
+
+## 🔥 Breaking changes
+```

README.md

@@ -1,52 +1,38 @@
 <div align="center">
 <h1>dockview</h1>
 
-<p>Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support written in TypeScript</p>
+<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue and Vanilla TypeScript</p>
 
 </div>
 
 ---
 
-[![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview)
+[![npm version](https://badge.fury.io/js/dockview-core.svg)](https://www.npmjs.com/package/dockview-core)
+[![npm](https://img.shields.io/npm/dm/dockview-core)](https://www.npmjs.com/package/dockview-core)
 [![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
-[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview)
+[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview-core)](https://bundlephobia.com/result?p=dockview-core)
 
 ##
 
-Please see the website: https://dockview.dev
+![](packages/docs/static/img/splashscreen.gif)
 
-Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
+Please see the website: https://dockview.dev
 
 ## Features
 
--   Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with
+-   Serialization / deserialization with full layout management
-    dockable and tabular views
+-   Support for split-views, grid-views and 'dockable' views
--   Extensive API support at the component level and view level
+-   Themeable and customizable
--   Themable and customizable
+-   Tab and Group docking / Drag n' Drop
--   Serialization / deserialization support
+-   Popout Windows
--   Tabular docking and Drag and Drop support
+-   Floating Groups
--   Documentation and examples
+-   Extensive API
+-   Supports Shadow DOMs
+-   High test coverage
+-   Documentation website with live examples
+-   Transparent builds and Code Analysis
+-   Security at mind - verifed publishing and builds through GitHub Actions
 
-This project was inspired by many popular IDE editors. Some parts of the core resizable panelling are inspired by code found in the VSCode codebase, [splitview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview) and [gridview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid).
+Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#user-content-provenance).
-
-## Quick start
-
-Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview). Please see the [Getting Started Guide](https://mathuo.github.io/dockview/docs/).
-
-```
-npm install --save dockview
-```
-
-Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css` and attach a theme.
-
-```css
-@import '~dockview/dist/styles/dockview.css';
-```
-
-You should also attach a dockview theme to an element containing your components. For example:
-
-```html
-<body classname="dockview-theme-dark"></body>
-```

SECURITY.md

@@ -0,0 +1,8 @@
+# Reporting a Vulnerability
+
+- Dockview is an entirely open source project.
+- All build and publication scripts use public Github Action files found [here](https://github.com/mathuo/dockview/tree/master/.github/workflows).
+- All npm publications are verified through the use of [provenance statements](https://docs.npmjs.com/generating-provenance-statements/).
+- All builds are scanned with SonarCube and outputs can be found [here](https://sonarcloud.io/summary/overall?id=mathuo_dockview).
+
+If you believe you have found a security or vulnerability issue please send a complete example to github.mathuo@gmail.com where it will be investigated.

jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

jest.config.ts

@@ -8,7 +8,7 @@ const config: JestConfigWithTsJest = {
     collectCoverageFrom: ['<rootDir>/packages/*/src/**/*.{js,jsx,ts,tsx}'],
     coveragePathIgnorePatterns: [
         '/node_modules/',
-        '<rootDir>packages/*/src/__tests__/',
+        '<rootDir>/packages/*/src/__tests__/',
     ],
     coverageDirectory: 'coverage',
     testResultsProcessor: 'jest-sonar-reporter',

lerna.json

@@ -2,8 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "useWorkspaces": true,
+  "version": "4.7.0",
-  "version": "1.7.0",
   "npmClient": "yarn",
   "command": {
     "publish": {

module-build/tsconfig.esm.json

@@ -1,24 +0,0 @@
-{
-    "compilerOptions": {
-        "module": "ES2020",
-        "declaration": true,
-        "target": "es6",
-        "moduleResolution": "node",
-        "esModuleInterop": true,
-        "downlevelIteration": true,
-        "incremental": true,
-        "noImplicitReturns": true,
-        "noImplicitAny": true,
-        "allowUnreachableCode": false,
-        "forceConsistentCasingInFileNames": true,
-        "strict": true,
-        "lib": [
-          "ES2015",
-          "ES2016.Array.Include",
-          "ES2017.String",
-          "ES2018.Promise",
-          "ES2019",
-          "DOM",
-		  ]
-    }
-}

package.json

@@ -1,68 +1,79 @@
 {
   "name": "dockview-monorepo-root",
   "private": true,
-  "workspaces": [
-    "packages/*"
-  ],
-  "nohoist": [
-    "**/babel-jest",
-    "**/babel-jest/**"
-  ],
   "description": "Monorepo for https://github.com/mathuo/dockview",
-  "scripts": {
+  "homepage": "https://github.com/mathuo/dockview#readme",
-    "test": "jest",
+  "bugs": {
-    "lint": "eslint packages/**/src/** --ext .ts,.tsx,.js,.jsx",
+    "url": "https://github.com/mathuo/dockview/issues"
-    "package": "node scripts/package.js",
-    "package-all": "lerna run docs --scope '{dockview-core,dockview}' && node scripts/package.js",
-    "build": "lerna run build --scope '{dockview-core,dockview}'",
-    "clean": "lerna run clean",
-    "bootstrap": "lerna bootstrap",
-    "test:cov": "jest --coverage",
-    "version-beta-build": "lerna version prerelease --preid beta",
-    "publish-app": "lerna publish"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mathuo/dockview.git"
   },
-  "author": "https://github.com/mathuo",
   "license": "MIT",
-  "bugs": {
+  "author": "https://github.com/mathuo",
-    "url": "https://github.com/mathuo/dockview/issues"
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "build": "lerna run build --scope '{dockview-core,dockview,dockview-vue,dockview-react}'",
+    "build:bundle": "lerna run build:bundle --scope '{dockview-core,dockview,dockview-vue,dockview-react}'",
+    "clean": "lerna run clean",
+    "docs": "typedoc && node scripts/docs.mjs",
+    "lint": "eslint 'packages/*/src/**/*.{ts,tsx,js,jsx}'",
+    "lint:fix": "eslint 'packages/*/src/**/*.{ts,tsx,js,jsx}' --fix",
+    "test": "jest",
+    "test:cov": "jest --coverage",
+    "version": "lerna version"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18"
   },
-  "homepage": "https://github.com/mathuo/dockview#readme",
   "devDependencies": {
-    "@testing-library/dom": "^8.20.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@types/jest": "^29.4.0",
+    "@rollup/plugin-terser": "^0.4.4",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@rollup/plugin-typescript": "^11.1.5",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@testing-library/dom": "^9.3.3",
-    "codecov": "^3.8.3",
+    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/react": "^14.1.2",
+    "@total-typescript/shoehorn": "^0.1.1",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/tsconfig": "^0.5.1",
+    "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.7.3",
+    "eslint": "^8.56.0",
-    "eslint": "^8.34.0",
+    "fs-extra": "^11.2.0",
-    "fs-extra": "^11.1.0",
     "gulp": "^4.0.2",
     "gulp-concat": "^2.6.1",
-    "gulp-dart-sass": "^1.0.2",
+    "gulp-dart-sass": "^1.1.0",
-    "jest-environment-jsdom": "^29.4.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-sonar-reporter": "^2.0.0",
-    "jsdom": "^21.1.0",
+    "jsdom": "^23.0.1",
-    "lerna": "^6.5.1",
+    "lerna": "^8.2.1",
-    "merge2": "^1.4.1",
+    "react": "^18.2.0",
-    "rimraf": "^4.1.2",
+    "react-dom": "^18.2.0",
-    "sass": "^1.58.1",
+    "rimraf": "^5.0.5",
-    "sass-loader": "^13.2.0",
+    "rollup": "^4.9.2",
-    "style-loader": "^3.3.1",
+    "rollup-plugin-postcss": "^4.0.2",
-    "ts-jest": "^29.0.5",
+    "ts-jest": "^29.1.1",
-    "ts-loader": "^9.4.2",
+    "ts-loader": "^9.5.1",
-    "tslib": "^2.5.0",
+    "ts-node": "^10.9.2",
-    "typescript": "^4.9.5",
+    "tslib": "^2.6.2",
-    "webpack": "^5.75.0",
+    "typedoc": "^0.25.6",
-    "webpack-cli": "^5.0.1",
+    "typescript": "^5.3.3",
-    "webpack-dev-server": "^4.11.1"
+    "vite": "^5.1.5",
+    "vue": "^3.4.21",
+    "vue-sfc-loader": "^0.1.0",
+    "vue-tsc": "^2.0.5"
   },
-  "dependencies": {
+  "engines": {
-    "jest": "^29.5.0",
+    "node": ">=18.0"
-    "ts-node": "^10.9.1"
   }
 }

packages/dockview-angular/README.md

@@ -0,0 +1,56 @@
+<div align="center">
+<h1>dockview</h1>
+
+<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews with ReactJS support written in TypeScript</p>
+
+</div>
+
+---
+
+[![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview)
+[![npm](https://img.shields.io/npm/dm/dockview)](https://www.npmjs.com/package/dockview)
+[![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
+[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
+[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview)
+
+##
+
+Please see the website: https://dockview.dev
+
+## Features
+
+-   Serialization / deserialization with full layout management
+-   Support for split-views, grid-views and 'dockable' views
+-   Themeable and customizable
+-   Tab and Group docking / Drag n' Drop
+-   Popout Windows
+-   Floating Groups
+-   Extensive API
+-   Supports Shadow DOMs
+-   High test coverage
+-   Documentation website with live examples
+-   Transparent builds and Code Analysis
+-   Security at mind - verifed publishing and builds through GitHub Actions
+
+Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
+
+## Quick start
+
+Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview).
+
+```
+npm install --save dockview
+```
+
+Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css` and attach a theme.
+
+```css
+@import '~dockview/dist/styles/dockview.css';
+```
+
+You should also attach a dockview theme to an element containing your components. For example:
+
+```html
+<body classname="dockview-theme-dark"></body>
+```

packages/dockview-angular/jest.config.ts

@@ -0,0 +1,34 @@
+import { JestConfigWithTsJest } from 'ts-jest';
+
+const config: JestConfigWithTsJest = {
+    preset: 'ts-jest',
+    roots: ['<rootDir>/packages/dockview-angular'],
+    modulePaths: ['<rootDir>/packages/dockview-angular/src'],
+    displayName: { name: 'dockview-angular', color: 'blue' },
+    rootDir: '../../',
+    collectCoverageFrom: [
+        '<rootDir>/packages/dockview-angular/src/**/*.{js,jsx,ts,tsx}',
+    ],
+    setupFiles: [
+        // '<rootDir>/packages/dockview-angular/src/__tests__/__mocks__/resizeObserver.js',
+    ],
+    setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
+    coveragePathIgnorePatterns: ['/node_modules/'],
+    modulePathIgnorePatterns: [
+        // '<rootDir>/packages/dockview-angular/src/__tests__/__mocks__',
+        // '<rootDir>/packages/dockview-angular/src/__tests__/__test_utils__',
+    ],
+    coverageDirectory: '<rootDir>/packages/dockview-angular/coverage/',
+    testResultsProcessor: 'jest-sonar-reporter',
+    testEnvironment: 'jsdom',
+    transform: {
+        '^.+\\.tsx?$': [
+            'ts-jest',
+            {
+                tsconfig: '<rootDir>/tsconfig.test.json',
+            },
+        ],
+    },
+};
+
+export default config;

packages/dockview-angular/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "dockview-angular",
+  "version": "4.7.0",
+  "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
+  "keywords": [
+    "splitview",
+    "split-view",
+    "gridview",
+    "grid-view",
+    "dockview",
+    "dock-view",
+    "grid",
+    "tabs",
+    "layout",
+    "layout manager",
+    "dock layout",
+    "dock",
+    "docking",
+    "splitter",
+    "drag-and-drop",
+    "drag",
+    "drop",
+    "react",
+    "react-component"
+  ],
+  "homepage": "https://github.com/mathuo/dockview",
+  "bugs": {
+    "url": "https://github.com/mathuo/dockview/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mathuo/dockview.git"
+  },
+  "license": "MIT",
+  "author": "https://github.com/mathuo",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/cjs/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build:bundle": "rollup -c",
+    "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics",
+    "build:css": "gulp sass",
+    "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics",
+    "build": "npm run build:cjs && npm run build:esm && npm run build:css",
+    "clean": "rimraf dist/ .build/ .rollup.cache/",
+    "prepublishOnly": "npm run rebuild && npm run build:bundle && npm run test",
+    "rebuild": "npm run clean && npm run build",
+    "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview",
+    "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage"
+  },
+  "dependencies": {
+    "dockview-core": "^4.7.0"
+  }
+}

packages/dockview-angular/rollup.config.js

@@ -0,0 +1,113 @@
+/* eslint-disable */
+
+const { join } = require('path');
+const typescript = require('@rollup/plugin-typescript');
+const terser = require('@rollup/plugin-terser');
+const postcss = require('rollup-plugin-postcss');
+const nodeResolve = require('@rollup/plugin-node-resolve');
+
+const { name, version, homepage, license } = require('./package.json');
+const main = join(__dirname, './scripts/rollupEntryTarget.ts');
+const mainNoStyles = join(__dirname, './src/index.ts');
+const outputDir = join(__dirname, 'dist');
+
+function outputFile(format, isMinified, withStyles) {
+    let filename = join(outputDir, name);
+
+    if (format !== 'umd') {
+        filename += `.${format}`;
+    }
+    if (isMinified) {
+        filename += '.min';
+    }
+    if (!withStyles) {
+        filename += '.noStyle';
+    }
+
+    return `${filename}.js`;
+}
+
+function getInput(options) {
+    const { withStyles } = options;
+
+    if (withStyles) {
+        return main;
+    }
+
+    return mainNoStyles;
+}
+
+function createBundle(format, options) {
+    const { withStyles, isMinified } = options;
+    const input = getInput(options);
+    const file = outputFile(format, isMinified, withStyles);
+
+    const external = [];
+
+    const output = {
+        file,
+        format,
+        sourcemap: true,
+        globals: {},
+        banner: [
+            `/**`,
+            ` * ${name}`,
+            ` * @version ${version}`,
+            ` * @link ${homepage}`,
+            ` * @license ${license}`,
+            ` */`,
+        ].join('\n'),
+    };
+
+    const plugins = [
+        nodeResolve({
+            include: ['node_modules/dockview-core/**'],
+        }),
+        typescript({
+            tsconfig: 'tsconfig.esm.json',
+        }),
+    ];
+
+    if (isMinified) {
+        plugins.push(terser());
+    }
+    if (withStyles) {
+        plugins.push(postcss());
+    }
+
+    if (format === 'umd') {
+        output['name'] = name;
+    }
+
+    external.push('react', 'react-dom');
+
+    if (format === 'umd') {
+        output.globals['react'] = 'React';
+        output.globals['react-dom'] = 'ReactDOM';
+    }
+
+    return {
+        input,
+        output,
+        plugins,
+        external,
+    };
+}
+
+module.exports = [
+    // amd
+    createBundle('amd', { withStyles: false, isMinified: false }),
+    createBundle('amd', { withStyles: true, isMinified: false }),
+    createBundle('amd', { withStyles: false, isMinified: true }),
+    createBundle('amd', { withStyles: true, isMinified: true }),
+    // umd
+    createBundle('umd', { withStyles: false, isMinified: false }),
+    createBundle('umd', { withStyles: true, isMinified: false }),
+    createBundle('umd', { withStyles: false, isMinified: true }),
+    createBundle('umd', { withStyles: true, isMinified: true }),
+    // cjs
+    createBundle('cjs', { withStyles: true, isMinified: false }),
+    // esm
+    createBundle('esm', { withStyles: true, isMinified: false }),
+    createBundle('esm', { withStyles: true, isMinified: true }),
+];

packages/dockview-angular/scripts/rollupEntryTarget.ts

@@ -0,0 +1,2 @@
+import '../dist/styles/dockview.css';
+export * from '../src/index';

packages/dockview-angular/src/__tests__/empty.spec.ts

@@ -0,0 +1,5 @@
+describe('empty', () => {
+    test('that passes', () => {
+        expect(true).toBeTruthy();
+    });
+});

packages/dockview-angular/src/index.ts

@@ -0,0 +1 @@
+export * from 'dockview-core';

packages/dockview-angular/tsconfig.esm.json

@@ -0,0 +1,14 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "module": "ES2020",
+        "moduleResolution": "node",
+        "target": "es6",
+        "outDir": "dist/esm",
+        "tsBuildInfoFile": ".build/tsconfig.tsbuildinfo.esm",
+        "jsx": "react",
+        "rootDir": "src"
+    },
+    "include": ["src"],
+    "exclude": ["**/node_modules", "src/__tests__"]
+}

packages/dockview-angular/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "dist/cjs",
+        "tsBuildInfoFile": ".build/tsconfig.tsbuildinfo.cjs",
+        "jsx": "react",
+        "rootDir": "src"
+    },
+    "include": ["src"],
+    "exclude": ["**/node_modules", "src/__tests__"]
+}

packages/dockview-angular/typedoc.json

@@ -0,0 +1,5 @@
+{
+    "extends": ["../../typedoc.base.json"],
+    "entryPoints": ["src/index.ts"],
+    "exclude": ["**/dist/**"]
+}

packages/dockview-core/README.md

@@ -1,13 +1,14 @@
 <div align="center">
 <h1>dockview</h1>
 
-<p>Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support written in TypeScript</p>
+<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue and Vanilla TypeScript</p>
 
 </div>
 
 ---
 
 [![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview)
+[![npm](https://img.shields.io/npm/dm/dockview)](https://www.npmjs.com/package/dockview)
 [![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
@@ -15,38 +16,23 @@
 
 ##
 
-Please see the website: https://dockview.dev
+![](packages/docs/static/img/splashscreen.gif)
 
-Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
+Please see the website: https://dockview.dev
 
 ## Features
 
--   Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with
+-   Serialization / deserialization with full layout management
-    dockable and tabular views
+-   Support for split-views, grid-views and 'dockable' views
--   Extensive API support at the component level and view level
+-   Themeable and customizable
--   Themable and customizable
+-   Tab and Group docking / Drag n' Drop
--   Serialization / deserialization support
+-   Popout Windows
--   Tabular docking and Drag and Drop support
+-   Floating Groups
--   Documentation and examples
+-   Extensive API
+-   Supports Shadow DOMs
+-   High test coverage
+-   Documentation website with live examples
+-   Transparent builds and Code Analysis
+-   Security at mind - verifed publishing and builds through GitHub Actions
 
-This project was inspired by many popular IDE editors. Some parts of the core resizable panelling are inspired by code found in the VSCode codebase, [splitview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview) and [gridview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid).
+Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
-
-## Quick start
-
-Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview). Please see the [Getting Started Guide](https://mathuo.github.io/dockview/docs/).
-
-```
-npm install --save dockview
-```
-
-Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css` and attach a theme.
-
-```css
-@import '~dockview/dist/styles/dockview.css';
-```
-
-You should also attach a dockview theme to an element containing your components. For example:
-
-```html
-<body classname="dockview-theme-dark"></body>
-```

packages/dockview-core/gulpfile.js

@@ -1,6 +1,13 @@
 const gulp = require('gulp');
-const buildfile = require('../../scripts/build');
+const gulpSass = require('gulp-dart-sass');
+const concat = require('gulp-concat');
 
-buildfile.init();
+gulp.task('sass', () => {
+    return gulp
+        .src('./src/**/*.scss')
+        .pipe(gulpSass().on('error', gulpSass.logError))
+        .pipe(concat('dockview.css'))
+        .pipe(gulp.dest('./dist/styles/'));
+});
 
 gulp.task('run', gulp.series(['sass']));

packages/dockview-core/jest.config.ts

@@ -12,6 +12,7 @@ const config: JestConfigWithTsJest = {
     setupFiles: [
         '<rootDir>/packages/dockview-core/src/__tests__/__mocks__/resizeObserver.js',
     ],
+    setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
     coveragePathIgnorePatterns: ['/node_modules/'],
     modulePathIgnorePatterns: [
         '<rootDir>/packages/dockview-core/src/__tests__/__mocks__',
@@ -20,6 +21,14 @@ const config: JestConfigWithTsJest = {
     coverageDirectory: '<rootDir>/packages/dockview-core/coverage/',
     testResultsProcessor: 'jest-sonar-reporter',
     testEnvironment: 'jsdom',
+    transform: {
+        '^.+\\.tsx?$': [
+            'ts-jest',
+            {
+                tsconfig: '<rootDir>/tsconfig.test.json',
+            },
+        ],
+    },
 };
 
 export default config;

packages/dockview-core/package.json

@@ -1,37 +1,7 @@
 {
   "name": "dockview-core",
-  "version": "1.7.0",
+  "version": "4.7.0",
-  "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
+  "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/cjs/index.d.ts",
-  "module": "./dist/esm/index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mathuo/dockview.git"
-  },
-  "bugs": {
-    "url": "https://github.com/mathuo/dockview/issues"
-  },
-  "homepage": "https://github.com/mathuo/dockview",
-  "scripts": {
-    "build:ci": "npm run build:cjs && npm run build:esm && npm run build:css",
-    "build:cjs": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.json --extendedDiagnostics",
-    "build:css": "gulp sass",
-    "build:esm": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.esm.json --extendedDiagnostics",
-    "build:modulefiles": "rollup -c",
-    "build": "npm run build:ci && npm run build:modulefiles",
-    "clean": "rimraf dist/ .build/",
-    "prepublishOnly": "npm run rebuild && npm run test",
-    "docs": "typedoc",
-    "rebuild": "npm run clean && npm run build",
-    "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core",
-    "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core --coverage",
-    "dev-publish": "node ./scripts/publishExperimental.js"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
   "keywords": [
     "splitview",
     "split-view",
@@ -53,16 +23,33 @@
     "react",
     "react-component"
   ],
-  "author": "https://github.com/mathuo",
+  "homepage": "https://github.com/mathuo/dockview",
+  "bugs": {
+    "url": "https://github.com/mathuo/dockview/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mathuo/dockview.git"
+  },
   "license": "MIT",
-  "devDependencies": {
+  "author": "https://github.com/mathuo",
-    "@rollup/plugin-typescript": "^11.0.0",
+  "main": "./dist/cjs/index.js",
-    "cross-env": "^7.0.3",
+  "module": "./dist/esm/index.js",
-    "postcss": "^8.4.21",
+  "types": "./dist/cjs/index.d.ts",
-    "rimraf": "^4.1.2",
+  "files": [
-    "rollup": "^3.15.0",
+    "dist",
-    "rollup-plugin-postcss": "^4.0.2",
+    "README.md"
-    "rollup-plugin-terser": "^7.0.2",
+  ],
-    "typedoc": "^0.23.25"
+  "scripts": {
+    "build:bundle": "rollup -c",
+    "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics",
+    "build:css": "gulp sass",
+    "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics",
+    "build": "npm run build:cjs && npm run build:esm && npm run build:css",
+    "clean": "rimraf dist/ .build/ .rollup.cache/",
+    "prepublishOnly": "npm run rebuild && npm run build:bundle && npm run test",
+    "rebuild": "npm run clean && npm run build",
+    "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core",
+    "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core --coverage"
   }
 }

packages/dockview-core/rollup.config.js

@@ -2,7 +2,7 @@
 
 const { join } = require('path');
 const typescript = require('@rollup/plugin-typescript');
-const { terser } = require('rollup-plugin-terser');
+const terser = require('@rollup/plugin-terser');
 const postcss = require('rollup-plugin-postcss');
 
 const { name, version, homepage, license } = require('./package.json');
@@ -46,6 +46,7 @@ function createBundle(format, options) {
     const output = {
         file,
         format,
+        sourcemap: true,
         globals: {},
         banner: [
             `/**`,
@@ -60,10 +61,6 @@ function createBundle(format, options) {
     const plugins = [
         typescript({
             tsconfig: 'tsconfig.esm.json',
-            incremental: false,
-            tsBuildInfoFile: undefined,
-            outDir: undefined,
-            declaration: false,
         }),
     ];
 

packages/dockview-core/scripts/publishExperimental.js

@@ -1,63 +0,0 @@
-const cp = require('child_process');
-const fs = require('fs-extra');
-const path = require('path');
-
-const rootDir = path.join(__dirname, '..');
-const publishDir = path.join(rootDir, '__publish__');
-
-cp.execSync('npm run clean', { cwd: rootDir, stdio: 'inherit' });
-cp.execSync('npm run test', { cwd: __dirname, stdio: 'inherit' });
-cp.execSync('npm run build', { cwd: rootDir, stdio: 'inherit' });
-
-if (fs.existsSync(publishDir)) {
-    fs.removeSync(publishDir);
-}
-fs.mkdirSync(publishDir);
-
-if (!fs.existsSync(path.join(publishDir, 'dist'))) {
-    fs.mkdirSync(path.join(publishDir, 'dist'));
-}
-
-const package = JSON.parse(
-    fs.readFileSync(path.join(rootDir, 'package.json')).toString()
-);
-
-for (const file of package.files) {
-    fs.copySync(path.join(rootDir, file), path.join(publishDir, file));
-}
-
-const result = cp
-    .execSync('git rev-parse --short HEAD', {
-        cwd: rootDir,
-    })
-    .toString()
-    .replace(/\n/g, '');
-
-function formatDate() {
-    const date = new Date();
-
-    function pad(value) {
-        if (value.toString().length === 1) {
-            return `0${value}`;
-        }
-        return value;
-    }
-
-    return `${date.getFullYear()}${pad(date.getMonth() + 1)}${pad(
-        date.getDate()
-    )}`;
-}
-
-package.version = `0.0.0-experimental-${result}-${formatDate()}`;
-package.scripts = {};
-
-fs.writeFileSync(
-    path.join(publishDir, 'package.json'),
-    JSON.stringify(package, null, 4)
-);
-
-const command = 'npm publish --tag experimental';
-
-cp.execSync(command, { cwd: publishDir, stdio: 'inherit' });
-
-fs.removeSync(publishDir);

packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelModel.ts

@@ -1,27 +1,39 @@
 import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
 import {
-    GroupPanelPartInitParameters,
+    TabPartInitParameters,
-    GroupPanelUpdateEvent,
     IContentRenderer,
     ITabRenderer,
 } from '../../dockview/types';
+import { PanelUpdateEvent } from '../../panel/types';
+import { TabLocation } from '../../dockview/framework';
 
 export class DockviewPanelModelMock implements IDockviewPanelModel {
     constructor(
         readonly contentComponent: string,
         readonly content: IContentRenderer,
-        readonly tabComponent?: string,
+        readonly tabComponent: string,
-        readonly tab?: ITabRenderer
+        readonly tab: ITabRenderer
     ) {
         //
     }
 
-    init(params: GroupPanelPartInitParameters): void {
+    createTabRenderer(tabLocation: TabLocation): ITabRenderer {
+        return this.tab;
+    }
+
+    init(params: TabPartInitParameters): void {
         //
     }
 
-    update(event: GroupPanelUpdateEvent): void {
+    updateParentGroup(
+        group: DockviewGroupPanel,
+        isPanelVisible: boolean
+    ): void {
+        //
+    }
+
+    update(event: PanelUpdateEvent): void {
         //
     }
 

packages/dockview-core/src/__tests__/__mocks__/mockWindow.ts

@@ -0,0 +1,45 @@
+import { fromPartial } from '@total-typescript/shoehorn';
+
+export function setupMockWindow() {
+    const listeners: Record<string, (() => void)[]> = {};
+
+    let width = 1000;
+    let height = 2000;
+
+    return fromPartial<Window>({
+        addEventListener: (type: string, listener: () => void) => {
+            if (!listeners[type]) {
+                listeners[type] = [];
+            }
+            listeners[type].push(listener);
+            if (type === 'load') {
+                listener();
+            }
+        },
+        removeEventListener: (type: string, listener: () => void) => {
+            if (listeners[type]) {
+                const index = listeners[type].indexOf(listener);
+                if (index > -1) {
+                    listeners[type].splice(index, 1);
+                }
+            }
+        },
+        dispatchEvent: (event: Event) => {
+            const items = listeners[event.type];
+            if (!items) {
+                return;
+            }
+            items.forEach((item) => item());
+        },
+        document: document,
+        close: () => {
+            listeners['beforeunload']?.forEach((f) => f());
+        },
+        get innerWidth() {
+            return width++;
+        },
+        get innerHeight() {
+            return height++;
+        },
+    });
+}

packages/dockview-core/src/__tests__/__test_utils__/utils.ts

@@ -1,4 +1,13 @@
-import * as React from 'react';
+import React from 'react';
+
+/**
+ * useful utility type to erase readonly signatures for testing purposes
+ *
+ * @see https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#readonly-mapped-type-modifiers-and-readonly-arrays
+ */
+export type Writable<T> = T extends object
+    ? { -readonly [K in keyof T]: Writable<T[K]> }
+    : T;
 
 export function setMockRefElement(node: Partial<HTMLElement>): void {
     const mockRef = {
@@ -12,3 +21,59 @@ export function setMockRefElement(node: Partial<HTMLElement>): void {
 
     jest.spyOn(React, 'useRef').mockReturnValueOnce(mockRef);
 }
+
+export function createOffsetDragOverEvent(params: {
+    clientX: number;
+    clientY: number;
+}): Event {
+    const event = new Event('dragover', {
+        bubbles: true,
+        cancelable: true,
+    });
+    Object.defineProperty(event, 'clientX', { get: () => params.clientX });
+    Object.defineProperty(event, 'clientY', { get: () => params.clientY });
+    return event;
+}
+
+/**
+ * `jest.runAllTicks` doesn't seem to exhaust all events in the micro-task queue so
+ * as a **hacky** alternative we'll wait for an empty Promise to complete which runs
+ * on the micro-task queue so will force a run-to-completion emptying the queue
+ * of any pending micro-task
+ */
+export function exhaustMicrotaskQueue(): Promise<void> {
+    return new Promise<void>((resolve) => resolve());
+}
+
+export function exhaustAnimationFrame(): Promise<void> {
+    return new Promise<void>((resolve) => {
+        requestAnimationFrame(() => resolve());
+    });
+}
+
+export const mockGetBoundingClientRect = ({
+    left,
+    top,
+    height,
+    width,
+}: {
+    left: number;
+    top: number;
+    height: number;
+    width: number;
+}) => {
+    const result = {
+        left,
+        top,
+        height,
+        width,
+        right: left + width,
+        bottom: top + height,
+        x: left,
+        y: top,
+    };
+    return {
+        ...result,
+        toJSON: () => result,
+    };
+};

packages/dockview-core/src/__tests__/api/api.spec.ts

@@ -1,13 +1,30 @@
 import { PanelApiImpl } from '../../api/panelApi';
+import { IPanel } from '../../panel/types';
 
 describe('api', () => {
     let api: PanelApiImpl;
 
     beforeEach(() => {
-        api = new PanelApiImpl('dummy_id');
+        api = new PanelApiImpl('dummy_id', 'fake-component');
     });
 
-    it('should update isFcoused getter', () => {
+    test('updateParameters', () => {
+        const panel = {
+            update: jest.fn(),
+        } as Partial<IPanel>;
+
+        api.initialize(panel as IPanel);
+
+        expect(panel.update).toHaveBeenCalledTimes(0);
+
+        api.updateParameters({ keyA: 'valueA' });
+        expect(panel.update).toHaveBeenCalledTimes(1);
+        expect(panel.update).toHaveBeenCalledWith({
+            params: { keyA: 'valueA' },
+        });
+    });
+
+    test('should update isFcoused getter', () => {
         expect(api.isFocused).toBeFalsy();
 
         api._onDidChangeFocus.fire({ isFocused: true });
@@ -17,7 +34,7 @@ describe('api', () => {
         expect(api.isFocused).toBeFalsy();
     });
 
-    it('should update isActive getter', () => {
+    test('should update isActive getter', () => {
         expect(api.isFocused).toBeFalsy();
 
         api._onDidActiveChange.fire({ isActive: true });
@@ -27,7 +44,7 @@ describe('api', () => {
         expect(api.isActive).toBeFalsy();
     });
 
-    it('should update isActive getter', () => {
+    test('should update isActive getter', () => {
         expect(api.isVisible).toBeTruthy();
 
         api._onDidVisibilityChange.fire({ isVisible: false });
@@ -37,7 +54,7 @@ describe('api', () => {
         expect(api.isVisible).toBeTruthy();
     });
 
-    it('should update width and height getter', () => {
+    test('should update width and height getter', () => {
         expect(api.height).toBe(0);
         expect(api.width).toBe(0);
 

packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts

@@ -1,42 +1,59 @@
-import { DockviewPanelApiImpl, TitleEvent } from '../../api/dockviewPanelApi';
+import { DockviewPanelApiImpl } from '../../api/dockviewPanelApi';
 import { DockviewComponent } from '../../dockview/dockviewComponent';
-import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel';
+import { DockviewPanel } from '../../dockview/dockviewPanel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+import { fromPartial } from '@total-typescript/shoehorn';
 
 describe('groupPanelApi', () => {
     test('title', () => {
-        const panelMock = jest.fn<DockviewPanel, []>(() => {
+        const accessor = fromPartial<DockviewComponent>({
-            return {
-                update: jest.fn(),
-            } as any;
-        });
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
-            return {} as any;
-        });
-
-        const panel = new panelMock();
-        const group = new groupMock();
-
-        const cut = new DockviewPanelApiImpl(panel, group);
-
-        cut.setTitle('test_title');
-
-        expect(panel.update).toBeCalledTimes(1);
-        expect(panel.update).toBeCalledWith({
-            params: { title: 'test_title' },
-        });
-    });
-
-    test('onDidGroupChange', () => {
-        const groupPanel: Partial<IDockviewPanel> = {
-            id: 'test_id',
-        };
-
-        const accessor: Partial<DockviewComponent> = {
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
             options: {},
+            onDidOptionsChange: jest.fn(),
+        });
+
+        const panelMock = jest.fn<DockviewPanel, []>(() => {
+            return {
+                update: jest.fn(),
+                setTitle: jest.fn(),
+            } as any;
+        });
+
+        const panel = new panelMock();
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
+                onDidActiveChange: jest.fn(),
+            },
+        });
+
+        const cut = new DockviewPanelApiImpl(
+            panel,
+            group,
+            <DockviewComponent>accessor,
+            'fake-component'
+        );
+
+        cut.setTitle('test_title');
+        expect(panel.setTitle).toBeCalledTimes(1);
+        expect(panel.setTitle).toBeCalledWith('test_title');
+    });
+
+    test('updateParameters', () => {
+        const groupPanel: Partial<DockviewPanel> = {
+            id: 'test_id',
+            update: jest.fn(),
         };
+
+        const accessor = fromPartial<DockviewComponent>({
+            onDidAddPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
+            options: {},
+            onDidOptionsChange: jest.fn(),
+        });
+
         const groupViewPanel = new DockviewGroupPanel(
             <DockviewComponent>accessor,
             '',
@@ -44,8 +61,43 @@ describe('groupPanelApi', () => {
         );
 
         const cut = new DockviewPanelApiImpl(
-            <IDockviewPanel>groupPanel,
+            <DockviewPanel>groupPanel,
-            <DockviewGroupPanel>groupViewPanel
+            <DockviewGroupPanel>groupViewPanel,
+            <DockviewComponent>accessor,
+            'fake-component'
+        );
+
+        cut.updateParameters({ keyA: 'valueA' });
+
+        expect(groupPanel.update).toHaveBeenCalledWith({
+            params: { keyA: 'valueA' },
+        });
+        expect(groupPanel.update).toHaveBeenCalledTimes(1);
+    });
+
+    test('onDidGroupChange', () => {
+        const groupPanel: Partial<DockviewPanel> = {
+            id: 'test_id',
+        };
+
+        const accessor = fromPartial<DockviewComponent>({
+            onDidAddPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
+            options: {},
+            onDidOptionsChange: jest.fn(),
+        });
+
+        const groupViewPanel = new DockviewGroupPanel(
+            <DockviewComponent>accessor,
+            '',
+            {}
+        );
+
+        const cut = new DockviewPanelApiImpl(
+            <DockviewPanel>groupPanel,
+            <DockviewGroupPanel>groupViewPanel,
+            <DockviewComponent>accessor,
+            'fake-component'
         );
 
         let events = 0;

packages/dockview-core/src/__tests__/array.spec.ts

@@ -3,6 +3,7 @@ import {
     last,
     pushToEnd,
     pushToStart,
+    remove,
     sequenceEquals,
     tail,
 } from '../array';
@@ -47,4 +48,22 @@ describe('array', () => {
         expect(sequenceEquals([1, 2, 3, 4], [1, 2, 3])).toBeFalsy();
         expect(sequenceEquals([1, 2, 3, 4], [1, 2, 3, 4, 5])).toBeFalsy();
     });
+
+    test('remove', () => {
+        const arr1 = [1, 2, 3, 4];
+        remove(arr1, 2);
+        expect(arr1).toEqual([1, 3, 4]);
+
+        const arr2 = [1, 2, 2, 3, 4];
+        remove(arr2, 2);
+        expect(arr2).toEqual([1, 2, 3, 4]);
+
+        const arr3 = [1];
+        remove(arr3, 2);
+        expect(arr3).toEqual([1]);
+        remove(arr3, 1);
+        expect(arr3).toEqual([]);
+        remove(arr3, 1);
+        expect(arr3).toEqual([]);
+    });
 });

packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts

@@ -20,10 +20,6 @@ describe('abstractDragHandler', () => {
                     },
                 };
             }
-
-            dispose(): void {
-                super.dispose();
-            }
         })(element);
 
         expect(element.classList.contains('dv-dragged')).toBeFalsy();
@@ -62,10 +58,6 @@ describe('abstractDragHandler', () => {
                     },
                 };
             }
-
-            dispose(): void {
-                //
-            }
         })(element);
 
         expect(iframe.style.pointerEvents).toBeFalsy();
@@ -78,10 +70,110 @@ describe('abstractDragHandler', () => {
         expect(span.style.pointerEvents).toBeFalsy();
 
         fireEvent.dragEnd(element);
-        expect(iframe.style.pointerEvents).toBe('auto');
+        expect(iframe.style.pointerEvents).toBe('');
-        expect(webview.style.pointerEvents).toBe('auto');
+        expect(webview.style.pointerEvents).toBe('');
         expect(span.style.pointerEvents).toBeFalsy();
 
         handler.dispose();
     });
+
+    test('that the disabling of pointerEvents is restored on a premature disposal of the handler', () => {
+        jest.useFakeTimers();
+
+        const element = document.createElement('div');
+        const iframe = document.createElement('iframe');
+        const webview = document.createElement('webview');
+        const span = document.createElement('span');
+
+        document.body.appendChild(element);
+        document.body.appendChild(iframe);
+        document.body.appendChild(webview);
+        document.body.appendChild(span);
+
+        const handler = new (class TestClass extends DragHandler {
+            constructor(el: HTMLElement) {
+                super(el);
+            }
+
+            getData(): IDisposable {
+                return {
+                    dispose: () => {
+                        // /
+                    },
+                };
+            }
+        })(element);
+
+        expect(iframe.style.pointerEvents).toBeFalsy();
+        expect(webview.style.pointerEvents).toBeFalsy();
+        expect(span.style.pointerEvents).toBeFalsy();
+
+        fireEvent.dragStart(element);
+        expect(iframe.style.pointerEvents).toBe('none');
+        expect(webview.style.pointerEvents).toBe('none');
+        expect(span.style.pointerEvents).toBeFalsy();
+
+        handler.dispose();
+        expect(iframe.style.pointerEvents).toBe('');
+        expect(webview.style.pointerEvents).toBe('');
+        expect(span.style.pointerEvents).toBeFalsy();
+    });
+
+    test('that .preventDefault() is called for cancelled events', () => {
+        const element = document.createElement('div');
+
+        const handler = new (class TestClass extends DragHandler {
+            constructor(el: HTMLElement) {
+                super(el);
+            }
+
+            protected isCancelled(_event: DragEvent): boolean {
+                return true;
+            }
+
+            getData(): IDisposable {
+                return {
+                    dispose: () => {
+                        // /
+                    },
+                };
+            }
+        })(element);
+
+        const event = new Event('dragstart');
+        const spy = jest.spyOn(event, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy).toBeCalledTimes(1);
+
+        handler.dispose();
+    });
+
+    test('that .preventDefault() is not called for non-cancelled events', () => {
+        const element = document.createElement('div');
+
+        const handler = new (class TestClass extends DragHandler {
+            constructor(el: HTMLElement) {
+                super(el);
+            }
+
+            protected isCancelled(_event: DragEvent): boolean {
+                return false;
+            }
+
+            getData(): IDisposable {
+                return {
+                    dispose: () => {
+                        // /
+                    },
+                };
+            }
+        })(element);
+
+        const event = new Event('dragstart');
+        const spy = jest.spyOn(event, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy).toHaveBeenCalledTimes(0);
+
+        handler.dispose();
+    });
 });

packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts

@@ -7,19 +7,7 @@ import {
     positionToDirection,
 } from '../../dnd/droptarget';
 import { fireEvent } from '@testing-library/dom';
-
+import { createOffsetDragOverEvent } from '../__test_utils__/utils';
-function createOffsetDragOverEvent(params: {
-    clientX: number;
-    clientY: number;
-}): Event {
-    const event = new Event('dragover', {
-        bubbles: true,
-        cancelable: true,
-    });
-    Object.defineProperty(event, 'clientX', { get: () => params.clientX });
-    Object.defineProperty(event, 'clientY', { get: () => params.clientY });
-    return event;
-}
 
 describe('droptarget', () => {
     let element: HTMLElement;
@@ -28,10 +16,52 @@ describe('droptarget', () => {
     beforeEach(() => {
         element = document.createElement('div');
 
-        jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
+        jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
             () => 100
         );
-        jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 200);
+        jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 200);
+    });
+
+    test('that dragover events are marked', () => {
+        droptarget = new Droptarget(element, {
+            canDisplayOverlay: () => true,
+            acceptedTargetZones: ['center'],
+        });
+
+        fireEvent.dragEnter(element);
+        const event = new Event('dragover');
+        fireEvent(element, event);
+
+        expect(
+            (event as any)['__dockview_droptarget_event_is_used__']
+        ).toBeTruthy();
+    });
+
+    test('that the drop target is removed when receiving a marked dragover event', () => {
+        let position: Position | undefined = undefined;
+
+        droptarget = new Droptarget(element, {
+            canDisplayOverlay: () => true,
+            acceptedTargetZones: ['center'],
+        });
+
+        droptarget.onDrop((event) => {
+            position = event.position;
+        });
+
+        fireEvent.dragEnter(element);
+        fireEvent.dragOver(element);
+
+        const target = element.querySelector(
+            '.dv-drop-target-dropzone'
+        ) as HTMLElement;
+        fireEvent.drop(target);
+        expect(position).toBe('center');
+
+        const event = new Event('dragover');
+        (event as any)['__dockview_droptarget_event_is_used__'] = true;
+        fireEvent(element, event);
+        expect(element.querySelector('.dv-drop-target-dropzone')).toBeNull();
     });
 
     test('directionToPosition', () => {
@@ -72,7 +102,7 @@ describe('droptarget', () => {
         fireEvent.dragOver(element);
 
         const target = element.querySelector(
-            '.drop-target-dropzone'
+            '.dv-drop-target-dropzone'
         ) as HTMLElement;
         fireEvent.drop(target);
         expect(position).toBe('center');
@@ -94,7 +124,7 @@ describe('droptarget', () => {
         fireEvent.dragOver(element);
 
         const target = element.querySelector(
-            '.drop-target-dropzone'
+            '.dv-drop-target-dropzone'
         ) as HTMLElement;
 
         jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100);
@@ -125,12 +155,12 @@ describe('droptarget', () => {
         fireEvent.dragOver(element);
 
         let viewQuery = element.querySelectorAll(
-            '.drop-target > .drop-target-dropzone > .drop-target-selection'
+            '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
         );
         expect(viewQuery.length).toBe(1);
 
         const target = element.querySelector(
-            '.drop-target-dropzone'
+            '.dv-drop-target-dropzone'
         ) as HTMLElement;
 
         jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100);
@@ -141,18 +171,40 @@ describe('droptarget', () => {
             createOffsetDragOverEvent({ clientX: 19, clientY: 0 })
         );
 
+        function check(
+            element: HTMLElement,
+            box: {
+                left: string;
+                top: string;
+                width: string;
+                height: string;
+            }
+        ) {
+            // Check positioning (back to top/left with GPU layer maintained)
+            expect(element.style.top).toBe(box.top);
+            expect(element.style.left).toBe(box.left);
+            expect(element.style.width).toBe(box.width);
+            expect(element.style.height).toBe(box.height);
+            // Ensure GPU layer is maintained
+            expect(element.style.transform).toBe('translate3d(0, 0, 0)');
+        }
+
         viewQuery = element.querySelectorAll(
-            '.drop-target > .drop-target-dropzone > .drop-target-selection'
+            '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
         );
         expect(viewQuery.length).toBe(1);
         expect(droptarget.state).toBe('left');
-        expect(
+        check(
-            (
+            element
-                element
+                .getElementsByClassName('dv-drop-target-selection')
-                    .getElementsByClassName('drop-target-selection')
+                .item(0) as HTMLDivElement,
-                    .item(0) as HTMLDivElement
+            {
-            ).style.transform
+                top: '0px',
-        ).toBe('translateX(-25%) scaleX(0.5)');
+                left: '0px',
+                width: '50%',
+                height: '100%',
+            }
+        );
 
         fireEvent(
             target,
@@ -160,17 +212,21 @@ describe('droptarget', () => {
         );
 
         viewQuery = element.querySelectorAll(
-            '.drop-target > .drop-target-dropzone > .drop-target-selection'
+            '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
         );
         expect(viewQuery.length).toBe(1);
         expect(droptarget.state).toBe('top');
-        expect(
+        check(
-            (
+            element
-                element
+                .getElementsByClassName('dv-drop-target-selection')
-                    .getElementsByClassName('drop-target-selection')
+                .item(0) as HTMLDivElement,
-                    .item(0) as HTMLDivElement
+            {
-            ).style.transform
+                top: '0px',
-        ).toBe('translateY(-25%) scaleY(0.5)');
+                left: '0px',
+                width: '100%',
+                height: '50%',
+            }
+        );
 
         fireEvent(
             target,
@@ -178,17 +234,21 @@ describe('droptarget', () => {
         );
 
         viewQuery = element.querySelectorAll(
-            '.drop-target > .drop-target-dropzone > .drop-target-selection'
+            '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
         );
         expect(viewQuery.length).toBe(1);
         expect(droptarget.state).toBe('bottom');
-        expect(
+        check(
-            (
+            element
-                element
+                .getElementsByClassName('dv-drop-target-selection')
-                    .getElementsByClassName('drop-target-selection')
+                .item(0) as HTMLDivElement,
-                    .item(0) as HTMLDivElement
+            {
-            ).style.transform
+                top: '50%',
-        ).toBe('translateY(25%) scaleY(0.5)');
+                left: '0px',
+                width: '100%',
+                height: '50%',
+            }
+        );
 
         fireEvent(
             target,
@@ -196,34 +256,38 @@ describe('droptarget', () => {
         );
 
         viewQuery = element.querySelectorAll(
-            '.drop-target > .drop-target-dropzone > .drop-target-selection'
+            '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
         );
         expect(viewQuery.length).toBe(1);
         expect(droptarget.state).toBe('right');
-        expect(
+        check(
-            (
+            element
-                element
+                .getElementsByClassName('dv-drop-target-selection')
-                    .getElementsByClassName('drop-target-selection')
+                .item(0) as HTMLDivElement,
-                    .item(0) as HTMLDivElement
+            {
-            ).style.transform
+                top: '0px',
-        ).toBe('translateX(25%) scaleX(0.5)');
+                left: '50%',
-
+                width: '50%',
+                height: '100%',
+            }
+        );
         fireEvent(
             target,
             createOffsetDragOverEvent({ clientX: 100, clientY: 50 })
         );
         expect(droptarget.state).toBe('center');
+        // With GPU optimizations, elements always have a base transform layer
         expect(
             (
                 element
-                    .getElementsByClassName('drop-target-selection')
+                    .getElementsByClassName('dv-drop-target-selection')
                     .item(0) as HTMLDivElement
             ).style.transform
-        ).toBe('');
+        ).toBe('translate3d(0, 0, 0)');
 
         fireEvent.dragLeave(target);
         expect(droptarget.state).toBe('center');
-        viewQuery = element.querySelectorAll('.drop-target');
+        viewQuery = element.querySelectorAll('.dv-drop-target');
         expect(viewQuery.length).toBe(0);
     });
 

packages/dockview-core/src/__tests__/dnd/groupDragHandler.spec.ts

@@ -0,0 +1,114 @@
+import { fireEvent } from '@testing-library/dom';
+import { GroupDragHandler } from '../../dnd/groupDragHandler';
+import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer';
+import { DockviewComponent } from '../../dockview/dockviewComponent';
+
+describe('groupDragHandler', () => {
+    test('that the dnd transfer object is setup and torndown', () => {
+        const element = document.createElement('div');
+
+        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
+            const partial: Partial<DockviewGroupPanel> = {
+                id: 'test_group_id',
+                api: { location: { type: 'grid' } } as any,
+            };
+            return partial as DockviewGroupPanel;
+        });
+        const group = new groupMock();
+
+        const cut = new GroupDragHandler(
+            element,
+            { id: 'test_accessor_id' } as DockviewComponent,
+            group
+        );
+
+        fireEvent.dragStart(element, new Event('dragstart'));
+
+        expect(
+            LocalSelectionTransfer.getInstance<PanelTransfer>().hasData(
+                PanelTransfer.prototype
+            )
+        ).toBeTruthy();
+        const transferObject =
+            LocalSelectionTransfer.getInstance<PanelTransfer>().getData(
+                PanelTransfer.prototype
+            )![0];
+        expect(transferObject).toBeTruthy();
+        expect(transferObject.viewId).toBe('test_accessor_id');
+        expect(transferObject.groupId).toBe('test_group_id');
+        expect(transferObject.panelId).toBeNull();
+
+        fireEvent.dragStart(element, new Event('dragend'));
+        expect(
+            LocalSelectionTransfer.getInstance<PanelTransfer>().hasData(
+                PanelTransfer.prototype
+            )
+        ).toBeFalsy();
+
+        cut.dispose();
+    });
+    test('that the event is cancelled when floating and shiftKey=true', () => {
+        const element = document.createElement('div');
+
+        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
+            const partial: Partial<DockviewGroupPanel> = {
+                api: { location: { type: 'floating' } } as any,
+            };
+            return partial as DockviewGroupPanel;
+        });
+        const group = new groupMock();
+
+        const cut = new GroupDragHandler(
+            element,
+            { id: 'accessor_id' } as DockviewComponent,
+            group
+        );
+
+        const event = new KeyboardEvent('dragstart', { shiftKey: false });
+
+        const spy = jest.spyOn(event, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy).toBeCalledTimes(1);
+
+        const event2 = new KeyboardEvent('dragstart', { shiftKey: true });
+
+        const spy2 = jest.spyOn(event2, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy2).toBeCalledTimes(0);
+
+        cut.dispose();
+    });
+
+    test('that the event is never cancelled when the group is not floating', () => {
+        const element = document.createElement('div');
+
+        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
+            const partial: Partial<DockviewGroupPanel> = {
+                api: { location: { type: 'grid' } } as any,
+            };
+            return partial as DockviewGroupPanel;
+        });
+        const group = new groupMock();
+
+        const cut = new GroupDragHandler(
+            element,
+            { id: 'accessor_id' } as DockviewComponent,
+            group
+        );
+
+        const event = new KeyboardEvent('dragstart', { shiftKey: false });
+
+        const spy = jest.spyOn(event, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy).toBeCalledTimes(0);
+
+        const event2 = new KeyboardEvent('dragstart', { shiftKey: true });
+
+        const spy2 = jest.spyOn(event2, 'preventDefault');
+        fireEvent(element, event);
+        expect(spy2).toBeCalledTimes(0);
+
+        cut.dispose();
+    });
+});

packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts

@@ -0,0 +1,174 @@
+import { fireEvent } from '@testing-library/dom';
+import { ContentContainer } from '../../../../dockview/components/panel/content';
+import {
+    GroupPanelPartInitParameters,
+    IContentRenderer,
+} from '../../../../dockview/types';
+import { CompositeDisposable } from '../../../../lifecycle';
+import { PanelUpdateEvent } from '../../../../panel/types';
+import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
+import { IDockviewPanelModel } from '../../../../dockview/dockviewPanelModel';
+import { DockviewComponent } from '../../../../dockview/dockviewComponent';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { DockviewGroupPanelModel } from '../../../../dockview/dockviewGroupPanelModel';
+import { OverlayRenderContainer } from '../../../../overlay/overlayRenderContainer';
+
+class TestContentRenderer
+    extends CompositeDisposable
+    implements IContentRenderer
+{
+    readonly element: HTMLElement;
+
+    constructor(public id: string) {
+        super();
+        this.element = document.createElement('div');
+        this.element.id = id;
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        //
+    }
+
+    layout(width: number, height: number): void {
+        //
+    }
+    update(event: PanelUpdateEvent): void {
+        //
+    }
+
+    toJSON(): object {
+        return {};
+    }
+
+    focus(): void {
+        //
+    }
+}
+
+describe('contentContainer', () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    test('basic focus test', () => {
+        let focus = 0;
+        let blur = 0;
+
+        const disposable = new CompositeDisposable();
+
+        const overlayRenderContainer = new OverlayRenderContainer(
+            document.createElement('div'),
+            fromPartial<DockviewComponent>({})
+        );
+
+        const cut = new ContentContainer(
+            fromPartial<DockviewComponent>({
+                renderer: 'onlyWhenVisible',
+                overlayRenderContainer,
+            }),
+            fromPartial<DockviewGroupPanelModel>({
+                renderContainer: overlayRenderContainer,
+            })
+        );
+
+        disposable.addDisposables(
+            cut.onDidFocus(() => {
+                focus++;
+            }),
+            cut.onDidBlur(() => {
+                blur++;
+            })
+        );
+
+        const contentRenderer = new TestContentRenderer('id-1');
+
+        const panel = fromPartial<IDockviewPanel>({
+            view: {
+                content: contentRenderer,
+            },
+            api: { renderer: 'onlyWhenVisible' },
+        });
+
+        cut.openPanel(panel as IDockviewPanel);
+
+        expect(focus).toBe(0);
+        expect(blur).toBe(0);
+
+        // container has focus within
+        fireEvent.focus(contentRenderer.element);
+        expect(focus).toBe(1);
+        expect(blur).toBe(0);
+
+        // container looses focus
+        fireEvent.blur(contentRenderer.element);
+        jest.runAllTimers();
+        expect(focus).toBe(1);
+        expect(blur).toBe(1);
+
+        const contentRenderer2 = new TestContentRenderer('id-2');
+
+        const panel2 = {
+            view: {
+                content: contentRenderer2,
+            } as Partial<IDockviewPanelModel>,
+            api: { renderer: 'onlyWhenVisible' },
+        } as Partial<IDockviewPanel>;
+
+        cut.openPanel(panel2 as IDockviewPanel);
+        // expect(focus).toBe(2);
+        // expect(blur).toBe(1);
+
+        // new panel recieves focus
+        fireEvent.focus(contentRenderer2.element);
+        expect(focus).toBe(2);
+        expect(blur).toBe(1);
+
+        // new panel looses focus
+        fireEvent.blur(contentRenderer2.element);
+        jest.runAllTimers();
+        expect(focus).toBe(2);
+        expect(blur).toBe(2);
+
+        disposable.dispose();
+    });
+
+    test("that panels renderered as 'onlyWhenVisible' are removed when closed", () => {
+        const overlayRenderContainer = fromPartial<OverlayRenderContainer>({
+            detatch: jest.fn(),
+        });
+
+        const cut = new ContentContainer(
+            fromPartial<DockviewComponent>({
+                overlayRenderContainer,
+            }),
+            fromPartial<DockviewGroupPanelModel>({
+                renderContainer: overlayRenderContainer,
+            })
+        );
+
+        const panel1 = fromPartial<IDockviewPanel>({
+            api: {
+                renderer: 'onlyWhenVisible',
+            },
+            view: { content: new TestContentRenderer('panel_1') },
+        });
+
+        const panel2 = fromPartial<IDockviewPanel>({
+            api: {
+                renderer: 'onlyWhenVisible',
+            },
+            view: { content: new TestContentRenderer('panel_2') },
+        });
+
+        cut.openPanel(panel1);
+
+        expect(panel1.view.content.element.parentElement).toBe(cut.element);
+        expect(cut.element.childNodes.length).toBe(1);
+
+        cut.openPanel(panel2);
+
+        expect(panel1.view.content.element.parentElement).toBeNull();
+        expect(panel2.view.content.element.parentElement).toBe(cut.element);
+        expect(cut.element.childNodes.length).toBe(1);
+    });
+});

packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts

@@ -0,0 +1,342 @@
+import { fireEvent } from '@testing-library/dom';
+import {
+    LocalSelectionTransfer,
+    PanelTransfer,
+} from '../../../dnd/dataTransfer';
+import { DockviewComponent } from '../../../dockview/dockviewComponent';
+import { DockviewGroupPanel } from '../../../dockview/dockviewGroupPanel';
+import { DockviewGroupPanelModel } from '../../../dockview/dockviewGroupPanelModel';
+import { Tab } from '../../../dockview/components/tab/tab';
+import { IDockviewPanel } from '../../../dockview/dockviewPanel';
+import { fromPartial } from '@total-typescript/shoehorn';
+
+describe('tab', () => {
+    test('that empty tab has inactive-tab class', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            options: {}
+        });
+        const groupMock = jest.fn();
+
+        const cut = new Tab(
+            { id: 'panelId' } as IDockviewPanel,
+            accessor,
+            new groupMock()
+        );
+
+        expect(cut.element.className).toBe('dv-tab dv-inactive-tab');
+    });
+
+    test('that active tab has active-tab class', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            options: {}
+        });
+        const groupMock = jest.fn();
+
+        const cut = new Tab(
+            { id: 'panelId' } as IDockviewPanel,
+            accessor,
+            new groupMock()
+        );
+
+        cut.setActive(true);
+        expect(cut.element.className).toBe('dv-tab dv-active-tab');
+
+        cut.setActive(false);
+        expect(cut.element.className).toBe('dv-tab dv-inactive-tab');
+    });
+
+    test('that an external event does not render a drop target and calls through to the group model', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            id: 'testcomponentid',
+            options: {}
+        });
+
+        const groupView = fromPartial<DockviewGroupPanelModel>({
+            canDisplayOverlay: jest.fn(),
+        });
+
+        const groupPanel = fromPartial<DockviewGroupPanel>({
+            id: 'testgroupid',
+            model: groupView,
+        });
+
+        const cut = new Tab(
+            { id: 'panelId' } as IDockviewPanel,
+            accessor,
+            groupPanel
+        );
+
+        jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
+            () => 100
+        );
+        jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
+            () => 100
+        );
+
+        fireEvent.dragEnter(cut.element);
+        fireEvent.dragOver(cut.element);
+
+        expect(groupView.canDisplayOverlay).toHaveBeenCalled();
+
+        expect(
+            cut.element.getElementsByClassName('dv-drop-target-dropzone').length
+        ).toBe(0);
+    });
+
+    test('that if you drag over yourself a drop target is shown', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            id: 'testcomponentid',
+            options: {}
+        });
+
+        const groupView = fromPartial<DockviewGroupPanelModel>({
+            canDisplayOverlay: jest.fn(),
+        });
+
+        const groupPanel = fromPartial<DockviewGroupPanel>({
+            id: 'testgroupid',
+            model: groupView,
+        });
+
+        const cut = new Tab(
+            { id: 'panel1' } as IDockviewPanel,
+            accessor,
+            groupPanel
+        );
+
+        jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
+            () => 100
+        );
+        jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
+            () => 100
+        );
+
+        LocalSelectionTransfer.getInstance().setData(
+            [new PanelTransfer('testcomponentid', 'anothergroupid', 'panel1')],
+            PanelTransfer.prototype
+        );
+
+        fireEvent.dragEnter(cut.element);
+        fireEvent.dragOver(cut.element);
+
+        expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
+
+        expect(
+            cut.element.getElementsByClassName('dv-drop-target-dropzone').length
+        ).toBe(1);
+    });
+
+    test('that if you drag over another tab a drop target is shown', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            id: 'testcomponentid',
+            options: {}
+        });
+
+        const groupView = fromPartial<DockviewGroupPanelModel>({
+            canDisplayOverlay: jest.fn(),
+        });
+
+        const groupPanel = fromPartial<DockviewGroupPanel>({
+            id: 'testgroupid',
+            model: groupView,
+        });
+
+        const cut = new Tab(
+            { id: 'panel1' } as IDockviewPanel,
+            accessor,
+            groupPanel
+        );
+
+        jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
+            () => 100
+        );
+        jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
+            () => 100
+        );
+
+        LocalSelectionTransfer.getInstance().setData(
+            [new PanelTransfer('testcomponentid', 'anothergroupid', 'panel2')],
+            PanelTransfer.prototype
+        );
+
+        fireEvent.dragEnter(cut.element);
+        fireEvent.dragOver(cut.element);
+
+        expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
+
+        expect(
+            cut.element.getElementsByClassName('dv-drop-target-dropzone').length
+        ).toBe(1);
+    });
+
+    test('that dropping on a tab with the same id but from a different component should not render a drop over and call through to the group model', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            id: 'testcomponentid',
+            options: {}
+        });
+
+        const groupView = fromPartial<DockviewGroupPanelModel>({
+            canDisplayOverlay: jest.fn(),
+        });
+
+        const groupPanel = fromPartial<DockviewGroupPanel>({
+            id: 'testgroupid',
+            model: groupView,
+        });
+
+        const cut = new Tab(
+            { id: 'panel1' } as IDockviewPanel,
+            accessor,
+            groupPanel
+        );
+
+        jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
+            () => 100
+        );
+        jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
+            () => 100
+        );
+
+        LocalSelectionTransfer.getInstance().setData(
+            [
+                new PanelTransfer(
+                    'anothercomponentid',
+                    'anothergroupid',
+                    'panel1'
+                ),
+            ],
+            PanelTransfer.prototype
+        );
+
+        fireEvent.dragEnter(cut.element);
+        fireEvent.dragOver(cut.element);
+
+        expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
+
+        expect(
+            cut.element.getElementsByClassName('dv-drop-target-dropzone').length
+        ).toBe(0);
+    });
+
+    test('that dropping on a tab from a different component should not render a drop over and call through to the group model', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            id: 'testcomponentid',
+            options: {}
+        });
+
+        const groupView = fromPartial<DockviewGroupPanelModel>({
+            canDisplayOverlay: jest.fn(),
+        });
+
+        const groupPanel = fromPartial<DockviewGroupPanel>({
+            id: 'testgroupid',
+            model: groupView,
+        });
+
+        const cut = new Tab(
+            { id: 'panel1' } as IDockviewPanel,
+            accessor,
+            groupPanel
+        );
+
+        jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
+            () => 100
+        );
+        jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
+            () => 100
+        );
+
+        LocalSelectionTransfer.getInstance().setData(
+            [
+                new PanelTransfer(
+                    'anothercomponentid',
+                    'anothergroupid',
+                    'panel2'
+                ),
+            ],
+            PanelTransfer.prototype
+        );
+
+        fireEvent.dragEnter(cut.element);
+        fireEvent.dragOver(cut.element);
+
+        expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
+
+        expect(
+            cut.element.getElementsByClassName('dv-drop-target-dropzone').length
+        ).toBe(0);
+    });
+
+    describe('disableDnd option', () => {
+        test('that tab is draggable by default (disableDnd not set)', () => {
+            const accessor = fromPartial<DockviewComponent>({
+                options: {}
+            });
+            const groupMock = jest.fn();
+
+            const cut = new Tab(
+                { id: 'panelId' } as IDockviewPanel,
+                accessor,
+                new groupMock()
+            );
+
+            expect(cut.element.draggable).toBe(true);
+        });
+
+        test('that tab is draggable when disableDnd is false', () => {
+            const accessor = fromPartial<DockviewComponent>({
+                options: { disableDnd: false }
+            });
+            const groupMock = jest.fn();
+
+            const cut = new Tab(
+                { id: 'panelId' } as IDockviewPanel,
+                accessor,
+                new groupMock()
+            );
+
+            expect(cut.element.draggable).toBe(true);
+        });
+
+        test('that tab is not draggable when disableDnd is true', () => {
+            const accessor = fromPartial<DockviewComponent>({
+                options: { disableDnd: true }
+            });
+            const groupMock = jest.fn();
+
+            const cut = new Tab(
+                { id: 'panelId' } as IDockviewPanel,
+                accessor,
+                new groupMock()
+            );
+
+            expect(cut.element.draggable).toBe(false);
+        });
+
+        test('that updateDragAndDropState updates draggable attribute based on disableDnd option', () => {
+            const options = { disableDnd: false };
+            const accessor = fromPartial<DockviewComponent>({
+                options
+            });
+            const groupMock = jest.fn();
+
+            const cut = new Tab(
+                { id: 'panelId' } as IDockviewPanel,
+                accessor,
+                new groupMock()
+            );
+
+            expect(cut.element.draggable).toBe(true);
+
+            // Simulate option change
+            options.disableDnd = true;
+            cut.updateDragAndDropState();
+            expect(cut.element.draggable).toBe(false);
+
+            // Change back
+            options.disableDnd = false;
+            cut.updateDragAndDropState();
+            expect(cut.element.draggable).toBe(true);
+        });
+    });
+});

packages/dockview-core/src/__tests__/dockview/components/tab/defaultTab.spec.ts

@@ -0,0 +1,140 @@
+import { DockviewApi } from '../../../../api/component.api';
+import { DockviewPanelApi, TitleEvent } from '../../../../api/dockviewPanelApi';
+import { DefaultTab } from '../../../../dockview/components/tab/defaultTab';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { Emitter } from '../../../../events';
+import { fireEvent } from '@testing-library/dom';
+
+describe('defaultTab', () => {
+    test('that title updates', () => {
+        const cut = new DefaultTab();
+
+        let el = cut.element.querySelector('.dv-default-tab-content');
+        expect(el).toBeTruthy();
+        expect(el!.textContent).toBe('');
+
+        const onDidTitleChange = new Emitter<TitleEvent>();
+
+        const api = fromPartial<DockviewPanelApi>({
+            onDidTitleChange: onDidTitleChange.event,
+        });
+        const containerApi = fromPartial<DockviewApi>({});
+
+        cut.init({
+            api,
+            containerApi,
+            params: {},
+            title: 'title_abc',
+        });
+
+        el = cut.element.querySelector('.dv-default-tab-content');
+        expect(el).toBeTruthy();
+        expect(el!.textContent).toBe('title_abc');
+
+        onDidTitleChange.fire({ title: 'title_def' });
+
+        expect(el!.textContent).toBe('title_def');
+    });
+
+    test('that click closes tab', () => {
+        const cut = new DefaultTab();
+
+        const api = fromPartial<DockviewPanelApi>({
+            onDidTitleChange: jest.fn(),
+            close: jest.fn(),
+        });
+        const containerApi = fromPartial<DockviewApi>({});
+
+        cut.init({
+            api,
+            containerApi,
+            params: {},
+            title: 'title_abc',
+        });
+
+        let el = cut.element.querySelector('.dv-default-tab-action');
+
+        fireEvent.pointerDown(el!);
+        expect(api.close).toHaveBeenCalledTimes(0);
+
+        fireEvent.click(el!);
+        expect(api.close).toHaveBeenCalledTimes(1);
+    });
+
+    test('that close button prevents default behavior', () => {
+        const cut = new DefaultTab();
+
+        const api = fromPartial<DockviewPanelApi>({
+            onDidTitleChange: jest.fn(),
+            close: jest.fn(),
+        });
+        const containerApi = fromPartial<DockviewApi>({});
+
+        cut.init({
+            api,
+            containerApi,
+            params: {},
+            title: 'title_abc',
+        });
+
+        let el = cut.element.querySelector('.dv-default-tab-action');
+
+        // Create a custom event to verify preventDefault is called
+        const clickEvent = new Event('click', { cancelable: true });
+        const preventDefaultSpy = jest.spyOn(clickEvent, 'preventDefault');
+
+        el!.dispatchEvent(clickEvent);
+
+        expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+        expect(api.close).toHaveBeenCalledTimes(1);
+    });
+
+    test('that close button respects already prevented events', () => {
+        const cut = new DefaultTab();
+
+        const api = fromPartial<DockviewPanelApi>({
+            onDidTitleChange: jest.fn(),
+            close: jest.fn(),
+        });
+        const containerApi = fromPartial<DockviewApi>({});
+
+        cut.init({
+            api,
+            containerApi,
+            params: {},
+            title: 'title_abc',
+        });
+
+        let el = cut.element.querySelector('.dv-default-tab-action');
+
+        // Create a custom event and prevent it before dispatching
+        const clickEvent = new Event('click', { cancelable: true });
+        clickEvent.preventDefault();
+
+        el!.dispatchEvent(clickEvent);
+
+        // Close should not be called if event was already prevented
+        expect(api.close).not.toHaveBeenCalled();
+    });
+
+    test('that close button is visible by default', () => {
+        const cut = new DefaultTab();
+
+        const api = fromPartial<DockviewPanelApi>({
+            onDidTitleChange: jest.fn(),
+            close: jest.fn(),
+        });
+        const containerApi = fromPartial<DockviewApi>({});
+
+        cut.init({
+            api,
+            containerApi,
+            params: {},
+            title: 'title_abc',
+        });
+
+        let el = cut.element.querySelector('.dv-default-tab-action') as HTMLElement;
+        expect(el).toBeTruthy();
+        expect(el.style.display).not.toBe('none');
+    });
+});

packages/dockview-core/src/__tests__/dockview/components/titlebar/tabs.spec.ts

@@ -0,0 +1,95 @@
+import { Tabs } from '../../../../dockview/components/titlebar/tabs';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { DockviewGroupPanel } from '../../../../dockview/dockviewGroupPanel';
+import { DockviewComponent } from '../../../../dockview/dockviewComponent';
+
+describe('tabs', () => {
+    describe('disableCustomScrollbars', () => {
+        test('enabled by default', () => {
+            const cut = new Tabs(
+                fromPartial<DockviewGroupPanel>({}),
+                fromPartial<DockviewComponent>({
+                    options: {},
+                }),
+                {
+                    showTabsOverflowControl: true,
+                }
+            );
+
+            expect(
+                cut.element.querySelectorAll(
+                    '.dv-scrollable > .dv-tabs-container'
+                ).length
+            ).toBe(1);
+        });
+
+        test('enabled when disabled flag is false', () => {
+            const cut = new Tabs(
+                fromPartial<DockviewGroupPanel>({}),
+                fromPartial<DockviewComponent>({
+                    options: {
+                        scrollbars: 'custom',
+                    },
+                }),
+                {
+                    showTabsOverflowControl: true,
+                }
+            );
+
+            expect(
+                cut.element.querySelectorAll(
+                    '.dv-scrollable > .dv-tabs-container'
+                ).length
+            ).toBe(1);
+        });
+
+        test('disabled when disabled flag is true', () => {
+            const cut = new Tabs(
+                fromPartial<DockviewGroupPanel>({}),
+                fromPartial<DockviewComponent>({
+                    options: {
+                        scrollbars: 'native',
+                    },
+                }),
+                {
+                    showTabsOverflowControl: true,
+                }
+            );
+
+            expect(
+                cut.element.querySelectorAll(
+                    '.dv-scrollable > .dv-tabs-container'
+                ).length
+            ).toBe(0);
+        });
+    });
+
+    describe('updateDragAndDropState', () => {
+        test('that updateDragAndDropState calls updateDragAndDropState on all tabs', () => {
+            const cut = new Tabs(
+                fromPartial<DockviewGroupPanel>({}),
+                fromPartial<DockviewComponent>({
+                    options: {},
+                }),
+                {
+                    showTabsOverflowControl: true,
+                }
+            );
+
+            // Mock tab to verify the method is called
+            const mockTab1 = { updateDragAndDropState: jest.fn() };
+            const mockTab2 = { updateDragAndDropState: jest.fn() };
+
+            // Add mock tabs to the internal tabs array
+            (cut as any)._tabs = [
+                { value: mockTab1 },
+                { value: mockTab2 }
+            ];
+
+            cut.updateDragAndDropState();
+
+            expect(mockTab1.updateDragAndDropState).toHaveBeenCalledTimes(1);
+            expect(mockTab2.updateDragAndDropState).toHaveBeenCalledTimes(1);
+        });
+    });
+});

packages/dockview-core/src/__tests__/dockview/components/titlebar/voidContainer.spec.ts

@@ -0,0 +1,115 @@
+import { VoidContainer } from '../../../../dockview/components/titlebar/voidContainer';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { DockviewComponent } from '../../../../dockview/dockviewComponent';
+import { DockviewGroupPanel } from '../../../../dockview/dockviewGroupPanel';
+import { fireEvent } from '@testing-library/dom';
+
+describe('voidContainer', () => {
+    test('that `pointerDown` triggers activation', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            doSetGroupActive: jest.fn(),
+            options: {}
+        });
+        const group = fromPartial<DockviewGroupPanel>({});
+        const cut = new VoidContainer(accessor, group);
+
+        expect(accessor.doSetGroupActive).not.toHaveBeenCalled();
+
+        fireEvent.pointerDown(cut.element);
+        expect(accessor.doSetGroupActive).toHaveBeenCalledWith(group);
+    });
+
+    describe('disableDnd option', () => {
+        test('that void container is draggable by default (disableDnd not set)', () => {
+            const accessor = fromPartial<DockviewComponent>({
+                options: {}
+            });
+            const group = fromPartial<DockviewGroupPanel>({});
+            const cut = new VoidContainer(accessor, group);
+
+            expect(cut.element.draggable).toBe(true);
+        });
+
+        test('that void container is draggable when disableDnd is false', () => {
+            const accessor = fromPartial<DockviewComponent>({
+                options: { disableDnd: false }
+            });
+            const group = fromPartial<DockviewGroupPanel>({});
+            const cut = new VoidContainer(accessor, group);
+
+            expect(cut.element.draggable).toBe(true);
+        });
+
+        test('that void container is not draggable when disableDnd is true', () => {
+            const accessor = fromPartial<DockviewComponent>({
+                options: { disableDnd: true }
+            });
+            const group = fromPartial<DockviewGroupPanel>({});
+            const cut = new VoidContainer(accessor, group);
+
+            expect(cut.element.draggable).toBe(false);
+        });
+
+        test('that updateDragAndDropState updates draggable attribute based on disableDnd option', () => {
+            const options = { disableDnd: false };
+            const accessor = fromPartial<DockviewComponent>({
+                options
+            });
+            const group = fromPartial<DockviewGroupPanel>({});
+            const cut = new VoidContainer(accessor, group);
+
+            expect(cut.element.draggable).toBe(true);
+
+            // Simulate option change
+            options.disableDnd = true;
+            cut.updateDragAndDropState();
+            expect(cut.element.draggable).toBe(false);
+
+            // Change back
+            options.disableDnd = false;
+            cut.updateDragAndDropState();
+            expect(cut.element.draggable).toBe(true);
+        });
+
+        test('that void container has dv-draggable class when draggable', () => {
+            const accessor = fromPartial<DockviewComponent>({
+                options: { disableDnd: false }
+            });
+            const group = fromPartial<DockviewGroupPanel>({});
+            const cut = new VoidContainer(accessor, group);
+
+            expect(cut.element.classList.contains('dv-draggable')).toBe(true);
+        });
+
+        test('that void container does not have dv-draggable class when not draggable', () => {
+            const accessor = fromPartial<DockviewComponent>({
+                options: { disableDnd: true }
+            });
+            const group = fromPartial<DockviewGroupPanel>({});
+            const cut = new VoidContainer(accessor, group);
+
+            expect(cut.element.classList.contains('dv-draggable')).toBe(false);
+        });
+
+        test('that updateDragAndDropState updates dv-draggable class based on disableDnd option', () => {
+            const options = { disableDnd: false };
+            const accessor = fromPartial<DockviewComponent>({
+                options
+            });
+            const group = fromPartial<DockviewGroupPanel>({});
+            const cut = new VoidContainer(accessor, group);
+
+            expect(cut.element.classList.contains('dv-draggable')).toBe(true);
+
+            // Simulate option change
+            options.disableDnd = true;
+            cut.updateDragAndDropState();
+            expect(cut.element.classList.contains('dv-draggable')).toBe(false);
+
+            // Change back
+            options.disableDnd = false;
+            cut.updateDragAndDropState();
+            expect(cut.element.classList.contains('dv-draggable')).toBe(true);
+        });
+    });
+});

packages/dockview-core/src/__tests__/dockview/dockviewGroupPanel.spec.ts

@@ -0,0 +1,190 @@
+import { DockviewComponent } from '../../dockview/dockviewComponent';
+import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { GroupOptions } from '../../dockview/dockviewGroupPanelModel';
+import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel';
+import { DockviewPanelModelMock } from '../__mocks__/mockDockviewPanelModel';
+import { IContentRenderer, ITabRenderer } from '../../dockview/types';
+import { OverlayRenderContainer } from '../../overlay/overlayRenderContainer';
+import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
+import { ContentContainer } from '../../dockview/components/panel/content';
+
+describe('dockviewGroupPanel', () => {
+    test('default minimum/maximium width/height', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            onDidActivePanelChange: jest.fn(),
+            onDidAddPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
+            options: {},
+            onDidOptionsChange: jest.fn(),
+        });
+        const options = fromPartial<GroupOptions>({});
+        const cut = new DockviewGroupPanel(accessor, 'test_id', options);
+
+        expect(cut.minimumWidth).toBe(100);
+        expect(cut.minimumHeight).toBe(100);
+        expect(cut.maximumHeight).toBe(Number.MAX_SAFE_INTEGER);
+        expect(cut.maximumWidth).toBe(Number.MAX_SAFE_INTEGER);
+    });
+
+    test('that onDidActivePanelChange is configured at inline', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            onDidActivePanelChange: jest.fn(),
+            onDidAddPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
+            options: {},
+            api: {},
+            renderer: 'always',
+            overlayRenderContainer: {
+                attach: jest.fn(),
+                detatch: jest.fn(),
+            },
+            doSetGroupActive: jest.fn(),
+            onDidOptionsChange: jest.fn(),
+        });
+        const options = fromPartial<GroupOptions>({});
+
+        const cut = new DockviewGroupPanel(accessor, 'test_id', options);
+
+        let counter = 0;
+
+        cut.api.onDidActivePanelChange((event) => {
+            counter++;
+        });
+
+        cut.model.openPanel(
+            fromPartial<IDockviewPanel>({
+                updateParentGroup: jest.fn(),
+                view: {
+                    tab: { element: document.createElement('div') },
+                    content: new ContentContainer(accessor, cut.model),
+                },
+                api: {
+                    renderer: 'onlyWhenVisible',
+                    onDidTitleChange: jest.fn(),
+                    onDidParametersChange: jest.fn(),
+                },
+                layout: jest.fn(),
+                runEvents: jest.fn(),
+            })
+        );
+
+        expect(counter).toBe(1);
+    });
+
+    test('group constraints', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            onDidActivePanelChange: jest.fn(),
+            onDidAddPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
+            doSetGroupActive: jest.fn(),
+            overlayRenderContainer: fromPartial<OverlayRenderContainer>({
+                attach: jest.fn(),
+                detatch: jest.fn(),
+            }),
+            options: {},
+            onDidOptionsChange: jest.fn(),
+        });
+        const options = fromPartial<GroupOptions>({});
+        const cut = new DockviewGroupPanel(accessor, 'test_id', options);
+
+        cut.api.setConstraints({
+            minimumHeight: 10,
+            maximumHeight: 100,
+            minimumWidth: 20,
+            maximumWidth: 200,
+        });
+
+        // initial constraints
+
+        expect(cut.minimumWidth).toBe(20);
+        expect(cut.minimumHeight).toBe(10);
+        expect(cut.maximumHeight).toBe(100);
+        expect(cut.maximumWidth).toBe(200);
+
+        const panelModel = new DockviewPanelModelMock(
+            'content_component',
+            fromPartial<IContentRenderer>({
+                element: document.createElement('div'),
+            }),
+            'tab_component',
+            fromPartial<ITabRenderer>({
+                element: document.createElement('div'),
+            })
+        );
+
+        const panel = new DockviewPanel(
+            'panel_id',
+            'component_id',
+            undefined,
+            accessor,
+            accessor.api,
+            cut,
+            panelModel,
+            {
+                renderer: 'onlyWhenVisible',
+                minimumWidth: 21,
+                minimumHeight: 11,
+                maximumHeight: 101,
+                maximumWidth: 201,
+            }
+        );
+
+        cut.model.openPanel(panel);
+
+        // active panel constraints
+
+        expect(cut.minimumWidth).toBe(21);
+        expect(cut.minimumHeight).toBe(11);
+        expect(cut.maximumHeight).toBe(101);
+        expect(cut.maximumWidth).toBe(201);
+
+        const panel2 = new DockviewPanel(
+            'panel_id',
+            'component_id',
+            undefined,
+            accessor,
+            accessor.api,
+            cut,
+            panelModel,
+            {
+                renderer: 'onlyWhenVisible',
+                minimumWidth: 22,
+                minimumHeight: 12,
+                maximumHeight: 102,
+                maximumWidth: 202,
+            }
+        );
+
+        cut.model.openPanel(panel2);
+
+        // active panel constraints
+
+        expect(cut.minimumWidth).toBe(22);
+        expect(cut.minimumHeight).toBe(12);
+        expect(cut.maximumHeight).toBe(102);
+        expect(cut.maximumWidth).toBe(202);
+
+        const panel3 = new DockviewPanel(
+            'panel_id',
+            'component_id',
+            undefined,
+            accessor,
+            accessor.api,
+            cut,
+            panelModel,
+            {
+                renderer: 'onlyWhenVisible',
+            }
+        );
+
+        cut.model.openPanel(panel3);
+
+        // active panel without specified constraints so falls back to group constraints
+
+        expect(cut.minimumWidth).toBe(20);
+        expect(cut.minimumHeight).toBe(10);
+        expect(cut.maximumHeight).toBe(100);
+        expect(cut.maximumWidth).toBe(200);
+    });
+});

packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts

@@ -1,6 +1,5 @@
 import { DockviewComponent } from '../../dockview/dockviewComponent';
 import {
-    GroupPanelUpdateEvent,
     GroupviewPanelState,
     IGroupPanelInitParameters,
     GroupPanelPartInitParameters,
@@ -8,7 +7,7 @@ import {
     ITabRenderer,
     IWatermarkRenderer,
 } from '../../dockview/types';
-import { PanelUpdateEvent } from '../../panel/types';
+import { PanelUpdateEvent, Parameters } from '../../panel/types';
 import {
     DockviewGroupPanelModel,
     GroupOptions,
@@ -18,11 +17,14 @@ import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer';
 import { CompositeDisposable } from '../../lifecycle';
 import { DockviewPanelApi } from '../../api/dockviewPanelApi';
 import { IDockviewPanel } from '../../dockview/dockviewPanel';
-import {
+import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
-    IDockviewPanelModel,
-    DockviewPanelModel,
-} from '../../dockview/dockviewPanelModel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+import { WatermarkRendererInitParameters } from '../../dockview/types';
+import { createOffsetDragOverEvent } from '../__test_utils__/utils';
+import { OverlayRenderContainer } from '../../overlay/overlayRenderContainer';
+import { Emitter } from '../../events';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { TabLocation } from '../../dockview/framework';
 
 enum GroupChangeKind2 {
     ADD_PANEL,
@@ -35,13 +37,17 @@ class TestModel implements IDockviewPanelModel {
     readonly contentComponent: string;
     readonly tab: ITabRenderer;
 
-    constructor(id: string) {
+    constructor(readonly id: string) {
         this.content = new TestHeaderPart(id);
         this.contentComponent = id;
         this.tab = new TestContentPart(id);
     }
 
-    update(event: GroupPanelUpdateEvent): void {
+    createTabRenderer(tabLocation: TabLocation): ITabRenderer {
+        return new TestHeaderPart(this.id);
+    }
+
+    update(event: PanelUpdateEvent): void {
         //
     }
 
@@ -76,7 +82,7 @@ class Watermark implements IWatermarkRenderer {
         return 'watermark-id';
     }
 
-    init(params: GroupPanelPartInitParameters) {
+    init(params: WatermarkRendererInitParameters) {
         //
     }
 
@@ -96,10 +102,6 @@ class Watermark implements IWatermarkRenderer {
         return {};
     }
 
-    updateParentGroup() {
-        //
-    }
-
     dispose() {
         //
     }
@@ -170,7 +172,7 @@ class TestHeaderPart implements ITabRenderer {
 
 export class TestPanel implements IDockviewPanel {
     private _group: DockviewGroupPanel | undefined;
-    private _params: IGroupPanelInitParameters;
+    private _params: IGroupPanelInitParameters | undefined;
     readonly view: IDockviewPanelModel;
 
     get title() {
@@ -181,7 +183,7 @@ export class TestPanel implements IDockviewPanel {
         return this._group!;
     }
 
-    get params(): Record<string, any> {
+    get params(): Parameters {
         return {};
     }
 
@@ -197,7 +199,11 @@ export class TestPanel implements IDockviewPanel {
         this._params = params;
     }
 
-    updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void {
+    updateParentGroup(group: DockviewGroupPanel): void {
+        //
+    }
+
+    runEvents(): void {
         //
     }
 
@@ -205,6 +211,10 @@ export class TestPanel implements IDockviewPanel {
         //noop
     }
 
+    setTitle(title: string): void {
+        //
+    }
+
     update(event: PanelUpdateEvent) {
         //noop
     }
@@ -225,7 +235,7 @@ export class TestPanel implements IDockviewPanel {
     }
 }
 
-describe('groupview', () => {
+describe('dockviewGroupPanelModel', () => {
     let groupview: DockviewGroupPanel;
     let dockview: DockviewComponent;
     let options: GroupOptions;
@@ -233,35 +243,46 @@ describe('groupview', () => {
     let removePanelMock: jest.Mock;
     let removeGroupMock: jest.Mock;
 
+    let panelApi: DockviewPanelApi;
+
     beforeEach(() => {
         removePanelMock = jest.fn();
         removeGroupMock = jest.fn();
 
-        dockview = (<Partial<DockviewComponent>>{
+        options = {};
+
+        panelApi = fromPartial<DockviewPanelApi>({
+            renderer: 'onlyWhenVisible',
+            onDidTitleChange: new Emitter().event,
+            onDidParametersChange: new Emitter().event,
+        });
+
+        dockview = fromPartial<DockviewComponent>({
             options: {},
             createWatermarkComponent: () => new Watermark(),
             doSetGroupActive: jest.fn(),
             id: 'dockview-1',
             removePanel: removePanelMock,
             removeGroup: removeGroupMock,
-            onDidAddPanel: jest.fn(),
+            onDidAddPanel: () => ({ dispose: jest.fn() }),
-            onDidRemovePanel: jest.fn(),
+            onDidRemovePanel: () => ({ dispose: jest.fn() }),
-        }) as DockviewComponent;
+            overlayRenderContainer: new OverlayRenderContainer(
+                document.createElement('div'),
+                fromPartial<DockviewComponent>({})
+            ),
+            onDidOptionsChange: () => ({ dispose: jest.fn() }),
+        });
 
-        options = {
-            tabHeight: 30,
-        };
         groupview = new DockviewGroupPanel(dockview, 'groupview-1', options);
         groupview.initialize();
     });
 
     test('panel events are captured during de-serialization', () => {
-        const panel1 = new TestPanel('panel1', jest.fn() as any);
+        const panel1 = new TestPanel('panel1', panelApi);
-        const panel2 = new TestPanel('panel2', jest.fn() as any);
+        const panel2 = new TestPanel('panel2', panelApi);
-        const panel3 = new TestPanel('panel3', jest.fn() as any);
+        const panel3 = new TestPanel('panel3', panelApi);
 
         const groupview2 = new DockviewGroupPanel(dockview, 'groupview-2', {
-            tabHeight: 25,
             panels: [panel1, panel2, panel3],
             activePanel: panel2,
         });
@@ -343,9 +364,9 @@ describe('groupview', () => {
             })
         );
 
-        const panel1 = new TestPanel('panel1', jest.fn() as any);
+        const panel1 = new TestPanel('panel1', panelApi);
-        const panel2 = new TestPanel('panel2', jest.fn() as any);
+        const panel2 = new TestPanel('panel2', panelApi);
-        const panel3 = new TestPanel('panel3', jest.fn() as any);
+        const panel3 = new TestPanel('panel3', panelApi);
 
         expect(events.length).toBe(0);
 
@@ -423,9 +444,9 @@ describe('groupview', () => {
     });
 
     test('moveToPrevious and moveToNext', () => {
-        const panel1 = new TestPanel('panel1', jest.fn() as any);
+        const panel1 = new TestPanel('panel1', panelApi);
-        const panel2 = new TestPanel('panel2', jest.fn() as any);
+        const panel2 = new TestPanel('panel2', panelApi);
-        const panel3 = new TestPanel('panel3', jest.fn() as any);
+        const panel3 = new TestPanel('panel3', panelApi);
 
         groupview.model.openPanel(panel1);
         groupview.model.openPanel(panel2);
@@ -458,20 +479,20 @@ describe('groupview', () => {
 
     test('default', () => {
         let viewQuery = groupview.element.querySelectorAll(
-            '.groupview > .tabs-and-actions-container'
+            '.dv-groupview > .dv-tabs-and-actions-container'
         );
         expect(viewQuery).toBeTruthy();
 
         viewQuery = groupview.element.querySelectorAll(
-            '.groupview > .content-container'
+            '.dv-groupview > .dv-content-container'
         );
         expect(viewQuery).toBeTruthy();
     });
 
     test('closeAllPanels with panels', () => {
-        const panel1 = new TestPanel('panel1', jest.fn() as any);
+        const panel1 = new TestPanel('panel1', panelApi);
-        const panel2 = new TestPanel('panel2', jest.fn() as any);
+        const panel2 = new TestPanel('panel2', panelApi);
-        const panel3 = new TestPanel('panel3', jest.fn() as any);
+        const panel3 = new TestPanel('panel3', panelApi);
 
         groupview.model.openPanel(panel1);
         groupview.model.openPanel(panel2);
@@ -479,20 +500,25 @@ describe('groupview', () => {
 
         groupview.model.closeAllPanels();
 
-        expect(removePanelMock).toBeCalledWith(panel1);
+        expect(removePanelMock).toHaveBeenCalledWith(panel1, undefined);
-        expect(removePanelMock).toBeCalledWith(panel2);
+        expect(removePanelMock).toHaveBeenCalledWith(panel2, undefined);
-        expect(removePanelMock).toBeCalledWith(panel3);
+        expect(removePanelMock).toHaveBeenCalledWith(panel3, undefined);
     });
 
     test('closeAllPanels with no panels', () => {
         groupview.model.closeAllPanels();
-        expect(removeGroupMock).toBeCalledWith(groupview);
+        expect(removeGroupMock).toHaveBeenCalledWith(groupview);
     });
 
     test('that group is set on panel during onDidAddPanel event', () => {
         const cut = new DockviewComponent(document.createElement('div'), {
-            components: {
+            createComponent(options) {
-                component: TestContentPart,
+                switch (options.name) {
+                    case 'component':
+                        return new TestContentPart(options.id);
+                    default:
+                        throw new Error(`unsupported`);
+                }
             },
         });
 
@@ -508,8 +534,13 @@ describe('groupview', () => {
         const dockviewComponent = new DockviewComponent(
             document.createElement('div'),
             {
-                components: {
+                createComponent(options) {
-                    component: TestContentPart,
+                    switch (options.name) {
+                        case 'component':
+                            return new TestContentPart(options.id);
+                        default:
+                            throw new Error(`unsupported`);
+                    }
                 },
             }
         );
@@ -519,7 +550,7 @@ describe('groupview', () => {
             dockviewComponent,
             'id',
             {},
-            null
+            null as any
         );
 
         expect(cut.toJSON()).toEqual({
@@ -533,8 +564,13 @@ describe('groupview', () => {
         const dockviewComponent = new DockviewComponent(
             document.createElement('div'),
             {
-                components: {
+                createComponent(options) {
-                    component: TestContentPart,
+                    switch (options.name) {
+                        case 'component':
+                            return new TestContentPart(options.id);
+                        default:
+                            throw new Error(`unsupported`);
+                    }
                 },
             }
         );
@@ -544,7 +580,7 @@ describe('groupview', () => {
             dockviewComponent,
             'id',
             {},
-            null
+            null as any
         );
 
         cut.locked = true;
@@ -563,8 +599,13 @@ describe('groupview', () => {
         const dockviewComponent = new DockviewComponent(
             document.createElement('div'),
             {
-                components: {
+                createComponent(options) {
-                    component: TestContentPart,
+                    switch (options.name) {
+                        case 'component':
+                            return new TestContentPart(options.id);
+                        default:
+                            throw new Error(`unsupported`);
+                    }
                 },
             }
         );
@@ -575,27 +616,27 @@ describe('groupview', () => {
             dockviewComponent,
             'id',
             {},
-            null
+            null as any
         );
         const contentContainer = groupviewContainer
-            .getElementsByClassName('content-container')
+            .getElementsByClassName('dv-content-container')
             .item(0)!.childNodes;
 
-        const panel1 = new TestPanel('id_1', null);
+        const panel1 = new TestPanel('id_1', panelApi);
 
         cut.openPanel(panel1);
         expect(contentContainer.length).toBe(1);
         expect(contentContainer.item(0)).toBe(panel1.view.content.element);
 
-        const panel2 = new TestPanel('id_2', null);
+        const panel2 = new TestPanel('id_2', panelApi);
 
         cut.openPanel(panel2);
         expect(contentContainer.length).toBe(1);
         expect(contentContainer.item(0)).toBe(panel2.view.content.element);
 
-        const panel3 = new TestPanel('id_2', null);
+        const panel3 = new TestPanel('id_2', panelApi);
 
-        cut.openPanel(panel3, { skipSetPanelActive: true });
+        cut.openPanel(panel3, { skipSetActive: true });
         expect(contentContainer.length).toBe(1);
         expect(contentContainer.item(0)).toBe(panel2.view.content.element);
 
@@ -605,18 +646,15 @@ describe('groupview', () => {
     });
 
     test('that should not show drop target is external event', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
+        const accessor = fromPartial<DockviewComponent>({
-            return {
+            id: 'testcomponentid',
-                id: 'testcomponentid',
+            options: {},
-                options: {
+            getPanel: jest.fn(),
-                    showDndOverlay: jest.fn(),
+            onDidAddPanel: jest.fn(),
-                },
+            onDidRemovePanel: jest.fn(),
-                getPanel: jest.fn(),
+            onDidOptionsChange: jest.fn(),
-                onDidAddPanel: jest.fn(),
-                onDidRemovePanel: jest.fn(),
-            };
         });
-        const accessor = new accessorMock() as DockviewComponent;
+
         const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
             () => {
                 return {
@@ -645,39 +683,205 @@ describe('groupview', () => {
             new groupPanelMock() as DockviewGroupPanel
         );
 
-        const element = container
+        let counter = 0;
-            .getElementsByClassName('content-container')
-            .item(0)!;
 
-        jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
+        cut.onUnhandledDragOverEvent(() => {
+            counter++;
+        });
+
+        const element = container
+            .getElementsByClassName('dv-content-container')
+            .item(0)! as HTMLElement;
+
+        jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
             () => 100
         );
-        jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 100);
+        jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
 
         fireEvent.dragEnter(element);
         fireEvent.dragOver(element);
 
-        expect(accessor.options.showDndOverlay).toBeCalledTimes(1);
+        expect(counter).toBe(1);
 
         expect(
-            element.getElementsByClassName('drop-target-dropzone').length
+            element.getElementsByClassName('dv-drop-target-dropzone').length
         ).toBe(0);
     });
 
-    test('that should not show drop target if dropping on self', () => {
+    test('that the .locked behaviour is as', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
+        const accessor = fromPartial<DockviewComponent>({
+            id: 'testcomponentid',
+            options: {},
+            getPanel: jest.fn(),
+            onDidAddPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
+            onDidOptionsChange: jest.fn(),
+        });
+
+        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
+            () => {
+                return {
+                    canDisplayOverlay: jest.fn(),
+                };
+            }
+        );
+
+        const groupView = new groupviewMock() as DockviewGroupPanelModel;
+
+        const groupPanelMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
+            () => {
+                return {
+                    id: 'testgroupid',
+                    model: groupView,
+                };
+            }
+        );
+
+        const container = document.createElement('div');
+        const cut = new DockviewGroupPanelModel(
+            container,
+            accessor,
+            'groupviewid',
+            {},
+            new groupPanelMock() as DockviewGroupPanel
+        );
+
+        cut.onUnhandledDragOverEvent((e) => {
+            e.accept();
+        });
+
+        const element = container
+            .getElementsByClassName('dv-content-container')
+            .item(0)! as HTMLElement;
+
+        jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
+            () => 100
+        );
+        jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
+
+        function run(value: number) {
+            fireEvent.dragEnter(element);
+            fireEvent(
+                element,
+                createOffsetDragOverEvent({ clientX: value, clientY: value })
+            );
+        }
+
+        // base case - not locked
+        cut.locked = false;
+        run(10);
+        expect(
+            element.getElementsByClassName('dv-drop-target-dropzone').length
+        ).toBe(1);
+        fireEvent.dragEnd(element);
+
+        // special case - locked with no possible target
+        cut.locked = 'no-drop-target';
+        run(10);
+        expect(
+            element.getElementsByClassName('dv-drop-target-dropzone').length
+        ).toBe(0);
+        fireEvent.dragEnd(element);
+
+        // standard locked - only show if not center target
+        cut.locked = true;
+        run(10);
+        expect(
+            element.getElementsByClassName('dv-drop-target-dropzone').length
+        ).toBe(1);
+        fireEvent.dragEnd(element);
+
+        // standard locked but for center target - expect not shown
+        cut.locked = true;
+        run(25);
+        expect(
+            element.getElementsByClassName('dv-drop-target-dropzone').length
+        ).toBe(0);
+        fireEvent.dragEnd(element);
+    });
+
+    test('that should show drop target if dropping on self', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            id: 'testcomponentid',
+            options: {},
+            getPanel: jest.fn(),
+            doSetGroupActive: jest.fn(),
+            onDidAddPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
+            overlayRenderContainer: new OverlayRenderContainer(
+                document.createElement('div'),
+                fromPartial<DockviewComponent>({})
+            ),
+            onDidOptionsChange: jest.fn(),
+        });
+
+        const groupView = fromPartial<DockviewGroupPanelModel>({
+            canDisplayOverlay: jest.fn(),
+        });
+
+        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
             return {
-                id: 'testcomponentid',
+                id: 'testgroupid',
-                options: {
+                model: groupView,
-                    showDndOverlay: jest.fn(),
-                },
-                getPanel: jest.fn(),
-                doSetGroupActive: jest.fn(),
-                onDidAddPanel: jest.fn(),
-                onDidRemovePanel: jest.fn(),
             };
         });
-        const accessor = new accessorMock() as DockviewComponent;
+
+        const container = document.createElement('div');
+        const cut = new DockviewGroupPanelModel(
+            container,
+            accessor,
+            'groupviewid',
+            {},
+            new groupPanelMock() as DockviewGroupPanel
+        );
+
+        let counter = 0;
+
+        cut.onUnhandledDragOverEvent(() => {
+            counter++;
+        });
+
+        cut.openPanel(new TestPanel('panel1', panelApi));
+
+        const element = container
+            .getElementsByClassName('dv-content-container')
+            .item(0)! as HTMLElement;
+
+        jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
+            () => 100
+        );
+        jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
+
+        LocalSelectionTransfer.getInstance().setData(
+            [new PanelTransfer('testcomponentid', 'groupviewid', 'panel1')],
+            PanelTransfer.prototype
+        );
+
+        fireEvent.dragEnter(element);
+        fireEvent.dragOver(element);
+
+        expect(counter).toBe(0);
+
+        expect(
+            element.getElementsByClassName('dv-drop-target-dropzone').length
+        ).toBe(1);
+    });
+
+    test('that should allow drop when dropping on self for same component id', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            id: 'testcomponentid',
+            options: {},
+            getPanel: jest.fn(),
+            doSetGroupActive: jest.fn(),
+            onDidAddPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
+            overlayRenderContainer: new OverlayRenderContainer(
+                document.createElement('div'),
+                fromPartial<DockviewComponent>({})
+            ),
+            onDidOptionsChange: jest.fn(),
+        });
+
         const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
             () => {
                 return {
@@ -704,16 +908,23 @@ describe('groupview', () => {
             new groupPanelMock() as DockviewGroupPanel
         );
 
-        cut.openPanel(new TestPanel('panel1', jest.fn() as any));
+        let counter = 0;
+
+        cut.onUnhandledDragOverEvent(() => {
+            counter++;
+        });
+
+        cut.openPanel(new TestPanel('panel1', panelApi));
+        cut.openPanel(new TestPanel('panel2', panelApi));
 
         const element = container
-            .getElementsByClassName('content-container')
+            .getElementsByClassName('dv-content-container')
-            .item(0)!;
+            .item(0) as HTMLElement;
 
-        jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
+        jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
             () => 100
         );
-        jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 100);
+        jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
 
         LocalSelectionTransfer.getInstance().setData(
             [new PanelTransfer('testcomponentid', 'groupviewid', 'panel1')],
@@ -723,94 +934,28 @@ describe('groupview', () => {
         fireEvent.dragEnter(element);
         fireEvent.dragOver(element);
 
-        expect(accessor.options.showDndOverlay).toBeCalledTimes(0);
+        expect(counter).toBe(0);
 
         expect(
-            element.getElementsByClassName('drop-target-dropzone').length
+            element.getElementsByClassName('dv-drop-target-dropzone').length
-        ).toBe(0);
+        ).toBe(1);
-    });
-
-    test('that should not allow drop when dropping on self for same component id', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                id: 'testcomponentid',
-                options: {
-                    showDndOverlay: jest.fn(),
-                },
-                getPanel: jest.fn(),
-                doSetGroupActive: jest.fn(),
-                onDidAddPanel: jest.fn(),
-                onDidRemovePanel: jest.fn(),
-            };
-        });
-        const accessor = new accessorMock() as DockviewComponent;
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
-
-        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
-            return {
-                id: 'testgroupid',
-                model: groupView,
-            };
-        });
-
-        const container = document.createElement('div');
-        const cut = new DockviewGroupPanelModel(
-            container,
-            accessor,
-            'groupviewid',
-            {},
-            new groupPanelMock() as DockviewGroupPanel
-        );
-
-        cut.openPanel(new TestPanel('panel1', jest.fn() as any));
-        cut.openPanel(new TestPanel('panel2', jest.fn() as any));
-
-        const element = container
-            .getElementsByClassName('content-container')
-            .item(0)!;
-
-        jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
-            () => 100
-        );
-        jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 100);
-
-        LocalSelectionTransfer.getInstance().setData(
-            [new PanelTransfer('testcomponentid', 'groupviewid', 'panel1')],
-            PanelTransfer.prototype
-        );
-
-        fireEvent.dragEnter(element);
-        fireEvent.dragOver(element);
-
-        expect(accessor.options.showDndOverlay).toBeCalledTimes(0);
-
-        expect(
-            element.getElementsByClassName('drop-target-dropzone').length
-        ).toBe(0);
     });
 
     test('that should not allow drop when not dropping for different component id', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
+        const accessor = fromPartial<DockviewComponent>({
-            return {
+            id: 'testcomponentid',
-                id: 'testcomponentid',
+            options: {},
-                options: {
+            getPanel: jest.fn(),
-                    showDndOverlay: jest.fn(),
+            doSetGroupActive: jest.fn(),
-                },
+            onDidAddPanel: jest.fn(),
-                getPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
-                doSetGroupActive: jest.fn(),
+            overlayRenderContainer: new OverlayRenderContainer(
-                onDidAddPanel: jest.fn(),
+                document.createElement('div'),
-                onDidRemovePanel: jest.fn(),
+                fromPartial<DockviewComponent>({})
-            };
+            ),
+            onDidOptionsChange: jest.fn(),
         });
-        const accessor = new accessorMock() as DockviewComponent;
+
         const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
             () => {
                 return {
@@ -837,17 +982,23 @@ describe('groupview', () => {
             new groupPanelMock() as DockviewGroupPanel
         );
 
-        cut.openPanel(new TestPanel('panel1', jest.fn() as any));
+        let counter = 0;
-        cut.openPanel(new TestPanel('panel2', jest.fn() as any));
+
+        cut.onUnhandledDragOverEvent(() => {
+            counter++;
+        });
+
+        cut.openPanel(new TestPanel('panel1', panelApi));
+        cut.openPanel(new TestPanel('panel2', panelApi));
 
         const element = container
-            .getElementsByClassName('content-container')
+            .getElementsByClassName('dv-content-container')
-            .item(0)!;
+            .item(0) as HTMLElement;
 
-        jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
+        jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
             () => 100
         );
-        jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 100);
+        jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
 
         LocalSelectionTransfer.getInstance().setData(
             [new PanelTransfer('anothercomponentid', 'groupviewid', 'panel1')],
@@ -857,10 +1008,51 @@ describe('groupview', () => {
         fireEvent.dragEnter(element);
         fireEvent.dragOver(element);
 
-        expect(accessor.options.showDndOverlay).toBeCalledTimes(1);
+        expect(counter).toBe(1);
 
         expect(
-            element.getElementsByClassName('drop-target-dropzone').length
+            element.getElementsByClassName('dv-drop-target-dropzone').length
+        ).toBe(0);
+    });
+
+    test('that the watermark is removed when dispose is called', () => {
+        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
+            () => {
+                return {
+                    canDisplayOverlay: jest.fn(),
+                };
+            }
+        );
+
+        const groupView = new groupviewMock() as DockviewGroupPanelModel;
+
+        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
+            return {
+                id: 'testgroupid',
+                model: groupView,
+            };
+        });
+
+        const container = document.createElement('div');
+
+        const cut = new DockviewGroupPanelModel(
+            container,
+            dockview,
+            'groupviewid',
+            {},
+            new groupPanelMock() as DockviewGroupPanel
+        );
+
+        cut.initialize();
+
+        expect(
+            container.getElementsByClassName('watermark-test-container').length
+        ).toBe(1);
+
+        cut.dispose();
+
+        expect(
+            container.getElementsByClassName('watermark-test-container').length
         ).toBe(0);
     });
 
@@ -898,17 +1090,17 @@ describe('groupview', () => {
             container.getElementsByClassName('watermark-test-container').length
         ).toBe(1);
 
-        cut.openPanel(new TestPanel('panel1', jest.fn() as any));
+        cut.openPanel(new TestPanel('panel1', panelApi));
 
         expect(
             container.getElementsByClassName('watermark-test-container').length
         ).toBe(0);
         expect(
-            container.getElementsByClassName('tabs-and-actions-container')
+            container.getElementsByClassName('dv-tabs-and-actions-container')
                 .length
         ).toBe(1);
 
-        cut.openPanel(new TestPanel('panel2', jest.fn() as any));
+        cut.openPanel(new TestPanel('panel2', panelApi));
 
         expect(
             container.getElementsByClassName('watermark-test-container').length
@@ -926,7 +1118,7 @@ describe('groupview', () => {
             container.getElementsByClassName('watermark-test-container').length
         ).toBe(1);
 
-        cut.openPanel(new TestPanel('panel1', jest.fn() as any));
+        cut.openPanel(new TestPanel('panel1', panelApi));
 
         expect(
             container.getElementsByClassName('watermark-test-container').length

packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts

@@ -3,33 +3,37 @@ import { DockviewApi } from '../../api/component.api';
 import { DockviewPanel } from '../../dockview/dockviewPanel';
 import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+import { fromPartial } from '@total-typescript/shoehorn';
 
 describe('dockviewPanel', () => {
     test('update title', () => {
-        const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
+        const api = fromPartial<DockviewApi>({});
-            return {
+        const accessor = fromPartial<DockviewComponent>({});
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
                 onDidActiveChange: jest.fn(),
-            } as any;
+            },
         });
-        const accessorMock = jest.fn<DockviewComponent, []>(() => {
+        const model = fromPartial<IDockviewPanelModel>({
-            return {} as any;
+            update: jest.fn(),
-        });
+            init: jest.fn(),
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
+            dispose: jest.fn(),
-            return {} as any;
-        });
-        const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
-            return {
-                update: jest.fn(),
-                init: jest.fn(),
-            };
         });
 
-        const api = new dockviewApiMock();
+        const cut = new DockviewPanel(
-        const accessor = new accessorMock();
+            'fake-id',
-        const group = new groupMock();
+            'fake-component',
-        const model = <IDockviewPanelModel>new panelModelMock();
+            undefined,
-
+            accessor,
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
+            api,
+            group,
+            model,
+            {
+                renderer: 'onlyWhenVisible',
+            }
+        );
 
         let latestTitle: string | undefined = undefined;
 
@@ -37,13 +41,13 @@ describe('dockviewPanel', () => {
             latestTitle = event.title;
         });
 
-        expect(cut.title).toBe('');
+        expect(cut.title).toBeUndefined();
 
         cut.init({ title: 'new title', params: {} });
         expect(latestTitle).toBe('new title');
         expect(cut.title).toBe('new title');
 
-        cut.update({ params: { title: 'another title' } });
+        cut.setTitle('another title');
         expect(latestTitle).toBe('another title');
         expect(cut.title).toBe('another title');
 
@@ -51,62 +55,77 @@ describe('dockviewPanel', () => {
     });
 
     test('that .setTitle updates the title', () => {
-        const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
+        const api = fromPartial<DockviewApi>({});
-            return {
+        const accessor = fromPartial<DockviewComponent>({});
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
                 onDidActiveChange: jest.fn(),
-            } as any;
+            },
         });
-        const accessorMock = jest.fn<DockviewComponent, []>(() => {
+        const model = fromPartial<IDockviewPanelModel>({
-            return {} as any;
+            update: jest.fn(),
-        });
+            init: jest.fn(),
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
-            return {} as any;
-        });
-        const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
-            return {
-                update: jest.fn(),
-                init: jest.fn(),
-            };
         });
 
-        const api = new dockviewApiMock();
+        const cut = new DockviewPanel(
-        const accessor = new accessorMock();
+            'fake-id',
-        const group = new groupMock();
+            'fake-component',
-        const model = <IDockviewPanelModel>new panelModelMock();
+            undefined,
-
+            accessor,
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
+            api,
+            group,
+            model,
+            {
+                renderer: 'onlyWhenVisible',
+            }
+        );
 
         cut.init({ title: 'myTitle', params: {} });
         expect(cut.title).toBe('myTitle');
 
         cut.setTitle('newTitle');
         expect(cut.title).toBe('newTitle');
+
+        cut.api.setTitle('new title 2');
+        expect(cut.title).toBe('new title 2');
     });
 
     test('dispose cleanup', () => {
-        const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
+        const api = fromPartial<DockviewApi>({});
-            return {} as any;
+        const accessor = fromPartial<DockviewComponent>({});
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest
+                    .fn()
+                    .mockReturnValue({ dispose: jest.fn() }),
+                onDidLocationChange: jest
+                    .fn()
+                    .mockReturnValue({ dispose: jest.fn() }),
+                onDidActiveChange: jest
+                    .fn()
+                    .mockReturnValue({ dispose: jest.fn() }),
+            },
         });
-        const accessorMock = jest.fn<DockviewComponent, []>(() => {
+        const model = fromPartial<IDockviewPanelModel>({
-            return {} as any;
+            update: jest.fn(),
-        });
+            init: jest.fn(),
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
+            dispose: jest.fn(),
-            return {} as any;
-        });
-        const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
-            return {
-                update: jest.fn(),
-                init: jest.fn(),
-                dispose: jest.fn(),
-            };
         });
 
-        const api = new dockviewApiMock();
+        const cut = new DockviewPanel(
-        const accessor = new accessorMock();
+            'fake-id',
-        const group = new groupMock();
+            'fake-component',
-        const model = <IDockviewPanelModel>new panelModelMock();
+            undefined,
-
+            accessor,
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
+            api,
+            group,
+            model,
+            {
+                renderer: 'onlyWhenVisible',
+            }
+        );
 
         cut.init({ params: {}, title: 'title' });
 
@@ -116,69 +135,153 @@ describe('dockviewPanel', () => {
     });
 
     test('get params', () => {
-        const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
+        const api = fromPartial<DockviewApi>({});
-            return {} as any;
+        const accessor = fromPartial<DockviewComponent>({});
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
+                onDidActiveChange: jest.fn(),
+            },
         });
-        const accessorMock = jest.fn<DockviewComponent, []>(() => {
+        const model = fromPartial<IDockviewPanelModel>({
-            return {} as any;
+            update: jest.fn(),
-        });
+            init: jest.fn(),
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
+            dispose: jest.fn(),
-            return {} as any;
-        });
-        const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
-            return {
-                update: jest.fn(),
-                init: jest.fn(),
-                dispose: jest.fn(),
-            };
         });
 
-        const api = new dockviewApiMock();
+        const cut = new DockviewPanel(
-        const accessor = new accessorMock();
+            'fake-id',
-        const group = new groupMock();
+            'fake-component',
-        const model = <IDockviewPanelModel>new panelModelMock();
+            undefined,
-
+            accessor,
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
+            api,
+            group,
+            model,
+            {
+                renderer: 'onlyWhenVisible',
+            }
+        );
 
         expect(cut.params).toEqual(undefined);
 
-        cut.update({ params: { params: { variableA: 'A', variableB: 'B' } } });
+        cut.update({ params: { variableA: 'A', variableB: 'B' } });
 
         expect(cut.params).toEqual({ variableA: 'A', variableB: 'B' });
     });
 
     test('setSize propagates to underlying group', () => {
-        const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
+        const api = fromPartial<DockviewApi>({});
-            return {} as any;
+        const accessor = fromPartial<DockviewComponent>({});
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
+                onDidActiveChange: jest.fn(),
+                setSize: jest.fn(),
+            },
         });
-        const accessorMock = jest.fn<DockviewComponent, []>(() => {
+        const model = fromPartial<IDockviewPanelModel>({
-            return {} as any;
+            update: jest.fn(),
-        });
+            init: jest.fn(),
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
+            dispose: jest.fn(),
-            return {
-                api: {
-                    setSize: jest.fn(),
-                },
-            } as any;
-        });
-        const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
-            return {
-                update: jest.fn(),
-                init: jest.fn(),
-                dispose: jest.fn(),
-            };
         });
 
-        const api = new dockviewApiMock();
+        const cut = new DockviewPanel(
-        const accessor = new accessorMock();
+            'fake-id',
-        const group = new groupMock();
+            'fake-component',
-        const model = <IDockviewPanelModel>new panelModelMock();
+            undefined,
-
+            accessor,
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
+            api,
+            group,
+            model,
+            {
+                renderer: 'onlyWhenVisible',
+            }
+        );
 
         cut.api.setSize({ height: 123, width: 456 });
 
-        expect(group.api.setSize).toBeCalledWith({ height: 123, width: 456 });
+        expect(group.api.setSize).toHaveBeenCalledWith({
-        expect(group.api.setSize).toBeCalledTimes(1);
+            height: 123,
+            width: 456,
+        });
+        expect(group.api.setSize).toHaveBeenCalledTimes(1);
+    });
+
+    test('updateParameter', () => {
+        const api = fromPartial<DockviewApi>({});
+        const accessor = fromPartial<DockviewComponent>({});
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
+                onDidActiveChange: jest.fn(),
+            },
+        });
+        const model = fromPartial<IDockviewPanelModel>({
+            update: jest.fn(),
+            init: jest.fn(),
+            dispose: jest.fn(),
+        });
+
+        const cut = new DockviewPanel(
+            'fake-id',
+            'fake-component',
+            undefined,
+            accessor,
+            api,
+            group,
+            model,
+            {
+                renderer: 'onlyWhenVisible',
+            }
+        );
+
+        cut.init({ params: { a: '1', b: '2' }, title: 'A title' });
+        expect(cut.params).toEqual({ a: '1', b: '2' });
+
+        // update 'a' and add 'c'
+        cut.update({ params: { a: '-1', c: '3' } });
+        expect(cut.params).toEqual({ a: '-1', b: '2', c: '3' });
+        expect(model.update).toHaveBeenCalledWith({
+            params: { a: '-1', b: '2', c: '3' },
+        });
+
+        cut.update({ params: { d: '4', e: '5', f: '6' } });
+        expect(cut.params).toEqual({
+            a: '-1',
+            b: '2',
+            c: '3',
+            d: '4',
+            e: '5',
+            f: '6',
+        });
+        expect(model.update).toHaveBeenCalledWith({
+            params: { a: '-1', b: '2', c: '3', d: '4', e: '5', f: '6' },
+        });
+
+        cut.update({
+            params: {
+                d: '',
+                e: null,
+                f: undefined,
+                g: '',
+                h: null,
+                i: undefined,
+            },
+        });
+        expect(cut.params).toEqual({
+            a: '-1',
+            b: '2',
+            c: '3',
+            d: '',
+            e: null,
+            g: '',
+            h: null,
+        });
+        expect(model.update).toHaveBeenCalledWith({
+            params: { a: '-1', b: '2', c: '3', d: '', e: null, g: '', h: null },
+        });
     });
 });

packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts

@@ -1,43 +1,58 @@
-import {
+import { DockviewComponent } from '../../dockview/dockviewComponent';
-    DockviewComponent,
-    IDockviewComponent,
-} from '../../dockview/dockviewComponent';
 import { DockviewPanelModel } from '../../dockview/dockviewPanelModel';
 import { IContentRenderer, ITabRenderer } from '../../dockview/types';
+import { DefaultTab } from '../../dockview/components/tab/defaultTab';
+import { fromPartial } from '@total-typescript/shoehorn';
 
 describe('dockviewGroupPanel', () => {
-    test('that dispose is called on content and tab renderers when present', () => {
+    let contentMock: jest.Mock<IContentRenderer>;
-        const contentMock = jest.fn<IContentRenderer, []>(() => {
+    let tabMock: jest.Mock<ITabRenderer>;
+    let accessorMock: DockviewComponent;
+
+    beforeEach(() => {
+        contentMock = jest.fn<IContentRenderer, []>(() => {
             const partial: Partial<IContentRenderer> = {
                 element: document.createElement('div'),
                 dispose: jest.fn(),
+                update: jest.fn(),
             };
             return partial as IContentRenderer;
         });
 
-        const tabMock = jest.fn<ITabRenderer, []>(() => {
+        tabMock = jest.fn<ITabRenderer, []>(() => {
             const partial: Partial<IContentRenderer> = {
                 element: document.createElement('div'),
                 dispose: jest.fn(),
+                update: jest.fn(),
             };
             return partial as IContentRenderer;
         });
 
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
+        accessorMock = fromPartial<DockviewComponent>({
-            return {
+            options: {
-                options: {
+                createComponent(options) {
-                    components: {
+                    switch (options.name) {
-                        contentComponent: contentMock,
+                        case 'contentComponent':
-                    },
+                            return new contentMock(options.id, options.name);
-                    tabComponents: {
+                        default:
-                        tabComponent: tabMock,
+                            throw new Error(`unsupported`);
-                    },
+                    }
                 },
-            };
+                createTabComponent(options) {
+                    switch (options.name) {
+                        case 'tabComponent':
+                            return new tabMock(options.id, options.name);
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+            },
         });
+    });
 
+    test('that dispose is called on content and tab renderers when present', () => {
         const cut = new DockviewPanelModel(
-            <IDockviewComponent>new accessorMock(),
+            accessorMock,
             'id',
             'contentComponent',
             'tabComponent'
@@ -50,36 +65,8 @@ describe('dockviewGroupPanel', () => {
     });
 
     test('that update is called on content and tab renderers when present', () => {
-        const contentMock = jest.fn<IContentRenderer, []>(() => {
-            const partial: Partial<IContentRenderer> = {
-                element: document.createElement('div'),
-                update: jest.fn(),
-            };
-            return partial as IContentRenderer;
-        });
-
-        const tabMock = jest.fn<ITabRenderer, []>(() => {
-            const partial: Partial<IContentRenderer> = {
-                element: document.createElement('div'),
-                update: jest.fn(),
-            };
-            return partial as IContentRenderer;
-        });
-
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                options: {
-                    components: {
-                        contentComponent: contentMock,
-                    },
-                    tabComponents: {
-                        tabComponent: tabMock,
-                    },
-                },
-            };
-        });
         const cut = new DockviewPanelModel(
-            <IDockviewComponent>new accessorMock(),
+            accessorMock,
             'id',
             'contentComponent',
             'tabComponent'
@@ -93,79 +80,121 @@ describe('dockviewGroupPanel', () => {
         expect(cut.tab.update).toHaveBeenCalled();
     });
 
-    test('that events are fired', () => {
+    test('that the default tab is created', () => {
-        const contentMock = jest.fn<IContentRenderer, []>(() => {
+        accessorMock = fromPartial<DockviewComponent>({
-            const partial: Partial<IContentRenderer> = {
+            options: {
-                element: document.createElement('div'),
+                createComponent(options) {
-                onGroupChange: jest.fn(),
+                    switch (options.name) {
-                onPanelVisibleChange: jest.fn(),
+                        case 'contentComponent':
-            };
+                            return new contentMock(options.id, options.name);
-            return partial as IContentRenderer;
+                        default:
-        });
+                            throw new Error(`unsupported`);
-
+                    }
-        const tabMock = jest.fn<ITabRenderer, []>(() => {
-            const partial: Partial<IContentRenderer> = {
-                element: document.createElement('div'),
-                onGroupChange: jest.fn(),
-                onPanelVisibleChange: jest.fn(),
-            };
-            return partial as IContentRenderer;
-        });
-
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                options: {
-                    components: {
-                        contentComponent: contentMock,
-                    },
-                    tabComponents: {
-                        tabComponent: tabMock,
-                    },
                 },
-            };
+                createTabComponent(options) {
+                    switch (options.name) {
+                        case 'tabComponent':
+                            return tabMock;
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+            },
         });
+
         const cut = new DockviewPanelModel(
-            <IDockviewComponent>new accessorMock(),
+            accessorMock,
             'id',
             'contentComponent',
             'tabComponent'
         );
 
-        const group1 = jest.fn() as any;
+        expect(cut.tab).toEqual(tabMock);
-        const group2 = jest.fn() as any;
+    });
-        cut.updateParentGroup(group1, false);
 
-        expect(cut.content.onGroupChange).toHaveBeenNthCalledWith(1, group1);
+    test('that the provided default tab is chosen when no implementation is provided', () => {
-        expect(cut.tab.onGroupChange).toHaveBeenNthCalledWith(1, group1);
+        accessorMock = fromPartial<DockviewComponent>({
-        expect(cut.content.onPanelVisibleChange).toHaveBeenNthCalledWith(
+            options: {
-            1,
+                defaultTabComponent: 'tabComponent',
-            false
+                createComponent(options) {
+                    switch (options.name) {
+                        case 'contentComponent':
+                            return new contentMock(options.id, options.name);
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+                createTabComponent(options) {
+                    switch (options.name) {
+                        case 'tabComponent':
+                            return tabMock;
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+            },
+        });
+
+        const cut = new DockviewPanelModel(
+            accessorMock,
+            'id',
+            'contentComponent'
         );
-        expect(cut.tab.onPanelVisibleChange).toHaveBeenNthCalledWith(1, false);
-        expect(cut.content.onGroupChange).toHaveBeenCalledTimes(1);
-        expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(1);
-        expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(1);
-        expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(1);
 
-        cut.updateParentGroup(group1, true);
+        expect(cut.tab).toEqual(tabMock);
+    });
 
-        expect(cut.content.onPanelVisibleChange).toHaveBeenNthCalledWith(
+    test('that is library default tab instance is created when no alternative exists', () => {
-            2,
+        accessorMock = fromPartial<DockviewComponent>({
-            true
+            options: {
+                createComponent(options) {
+                    switch (options.name) {
+                        case 'contentComponent':
+                            return new contentMock(options.id, options.name);
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+            },
+        });
+
+        const cut = new DockviewPanelModel(
+            accessorMock,
+            'id',
+            'contentComponent'
         );
-        expect(cut.tab.onPanelVisibleChange).toHaveBeenNthCalledWith(2, true);
-        expect(cut.content.onGroupChange).toHaveBeenCalledTimes(1);
-        expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(1);
-        expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(2);
-        expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(2);
 
-        cut.updateParentGroup(group2, true);
+        expect(cut.tab instanceof DefaultTab).toBeTruthy();
+    });
 
-        expect(cut.content.onGroupChange).toHaveBeenNthCalledWith(2, group2);
+    test('that the default content is created', () => {
-        expect(cut.tab.onGroupChange).toHaveBeenNthCalledWith(2, group2);
+        accessorMock = fromPartial<DockviewComponent>({
-        expect(cut.content.onGroupChange).toHaveBeenCalledTimes(2);
+            options: {
-        expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(2);
+                createComponent(options) {
-        expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(2);
+                    switch (options.name) {
-        expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(2);
+                        case 'contentComponent':
+                            return contentMock;
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+                createTabComponent(options) {
+                    switch (options.name) {
+                        case 'tabComponent':
+                            return tabMock;
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+            },
+        });
+
+        const cut = new DockviewPanelModel(
+            accessorMock,
+            'id',
+            'contentComponent'
+        );
+
+        expect(cut.content).toEqual(contentMock);
     });
 });

packages/dockview-core/src/__tests__/dom.spec.ts

@@ -0,0 +1,83 @@
+import {
+    disableIframePointEvents,
+    isInDocument,
+    quasiDefaultPrevented,
+    quasiPreventDefault,
+} from '../dom';
+
+describe('dom', () => {
+    test('quasiPreventDefault', () => {
+        const event = new Event('myevent');
+        expect((event as any)['dv-quasiPreventDefault']).toBeUndefined();
+        quasiPreventDefault(event);
+        expect((event as any)['dv-quasiPreventDefault']).toBe(true);
+    });
+
+    test('quasiDefaultPrevented', () => {
+        const event = new Event('myevent');
+        expect(quasiDefaultPrevented(event)).toBeFalsy();
+
+        (event as any)['dv-quasiPreventDefault'] = false;
+        expect(quasiDefaultPrevented(event)).toBeFalsy();
+
+        (event as any)['dv-quasiPreventDefault'] = true;
+        expect(quasiDefaultPrevented(event)).toBeTruthy();
+    });
+
+    test('isInDocument: DOM element', () => {
+        const el = document.createElement('div');
+
+        expect(isInDocument(el)).toBeFalsy();
+
+        document.body.appendChild(el);
+        expect(isInDocument(el)).toBeTruthy();
+    });
+
+    test('isInDocument: Shadow DOM element', () => {
+        const el = document.createElement('div');
+        document.body.appendChild(el);
+
+        const shadow = el.attachShadow({ mode: 'open' });
+
+        const el2 = document.createElement('div');
+        expect(isInDocument(el2)).toBeFalsy();
+
+        shadow.appendChild(el2);
+
+        expect(isInDocument(el2)).toBeTruthy();
+    });
+
+    test('disableIframePointEvents', () => {
+        const el1 = document.createElement('iframe');
+        const el2 = document.createElement('iframe');
+        const el3 = document.createElement('webview');
+        const el4 = document.createElement('webview');
+
+        document.body.appendChild(el1);
+        document.body.appendChild(el2);
+        document.body.appendChild(el3);
+        document.body.appendChild(el4);
+
+        el1.style.pointerEvents = 'inherit';
+        el3.style.pointerEvents = 'inherit';
+
+        expect(el1.style.pointerEvents).toBe('inherit');
+        expect(el2.style.pointerEvents).toBe('');
+        expect(el3.style.pointerEvents).toBe('inherit');
+        expect(el4.style.pointerEvents).toBe('');
+
+        const f = disableIframePointEvents();
+
+        expect(el1.style.pointerEvents).toBe('none');
+        expect(el2.style.pointerEvents).toBe('none');
+        expect(el3.style.pointerEvents).toBe('none');
+        expect(el4.style.pointerEvents).toBe('none');
+
+        f.release();
+
+        expect(el1.style.pointerEvents).toBe('inherit');
+        expect(el2.style.pointerEvents).toBe('');
+        expect(el3.style.pointerEvents).toBe('inherit');
+        expect(el4.style.pointerEvents).toBe('');
+    });
+});

packages/dockview-core/src/__tests__/events.spec.ts

@@ -1,7 +1,11 @@
-import { Emitter, Event } from '../events';
+import { AsapEvent, Emitter, Event, addDisposableListener } from '../events';
 
 describe('events', () => {
     describe('emitter', () => {
+        it('debug mode is off', () => {
+            expect(Emitter.ENABLE_TRACKING).toBeFalsy();
+        });
+
         it('should emit values', () => {
             const emitter = new Emitter<number>();
             let value: number | undefined = undefined;
@@ -58,7 +62,7 @@ describe('events', () => {
             expect(value).toBeUndefined();
         });
 
-        it('should relay last value in replay mode', () => {
+        it('should replay last value in replay mode', () => {
             const emitter = new Emitter<number>({ replay: true });
             let value: number | undefined = undefined;
 
@@ -71,6 +75,55 @@ describe('events', () => {
 
             stream.dispose();
         });
+
+        it('should not replay last value in replay mode', () => {
+            const emitter = new Emitter<number>();
+            let value: number | undefined = undefined;
+
+            emitter.fire(1);
+
+            const stream = emitter.event((x) => {
+                value = x;
+            });
+            expect(value).toBeUndefined();
+
+            stream.dispose();
+        });
+    });
+
+    describe('asapEvent', () => {
+        test('that asapEvents fire once per event-loop-cycle', () => {
+            jest.useFakeTimers();
+
+            const event = new AsapEvent();
+
+            let preFireCount = 0;
+            let postFireCount = 0;
+
+            event.onEvent(() => {
+                preFireCount++;
+            });
+
+            for (let i = 0; i < 100; i++) {
+                event.fire();
+            }
+
+            /**
+             * check that subscribing after the events have fired but before the event-loop cycle completes
+             * results in no event fires.
+             */
+            event.onEvent((e) => {
+                postFireCount++;
+            });
+
+            expect(preFireCount).toBe(0);
+            expect(postFireCount).toBe(0);
+
+            jest.runAllTimers();
+
+            expect(preFireCount).toBe(1);
+            expect(postFireCount).toBe(0);
+        });
     });
 
     it('should emit a value when any event fires', () => {
@@ -97,4 +150,138 @@ describe('events', () => {
         emitter3.fire(3);
         expect(value).toBe(3);
     });
+
+    it('addDisposableListener with capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableListener(
+            element as any,
+            'pointerdown',
+            handler,
+            true
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'pointerdown',
+            handler,
+            true
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'pointerdown',
+            handler,
+            true
+        );
+    });
+
+    it('addDisposableListener without capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableListener(
+            element as any,
+            'pointerdown',
+            handler
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'pointerdown',
+            handler,
+            undefined
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'pointerdown',
+            handler,
+            undefined
+        );
+    });
+
+    it('addDisposableListener with capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableListener(
+            element as any,
+            'pointerdown',
+            handler,
+            true
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'pointerdown',
+            handler,
+            true
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'pointerdown',
+            handler,
+            true
+        );
+    });
+
+    it('addDisposableListener without capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableListener(
+            element as any,
+            'pointerdown',
+            handler
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'pointerdown',
+            handler,
+            undefined
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'pointerdown',
+            handler,
+            undefined
+        );
+    });
 });

packages/dockview-core/src/__tests__/gridview/baseComponentGridview.spec.ts

@@ -17,13 +17,9 @@ class TestPanel implements IGridPanelView {
     _onDidChange = new Emitter<IViewSize | undefined>();
     readonly onDidChange = this._onDidChange.event;
 
-    get isActive(): boolean {
+    isVisible: boolean = true;
-        return true;
+    isActive: boolean = true;
-    }
+    params: Parameters = {};
-
-    get params(): Record<string, any> {
-        return {};
-    }
 
     constructor(
         public readonly id: string,
@@ -70,8 +66,10 @@ class TestPanel implements IGridPanelView {
 }
 
 class ClassUnderTest extends BaseGrid<TestPanel> {
-    constructor(element: HTMLElement, options: BaseGridOptions) {
+    readonly gridview = this.gridview;
-        super(element, options);
+
+    constructor(parentElement: HTMLElement, options: BaseGridOptions) {
+        super(parentElement, options);
     }
 
     doRemoveGroup(
@@ -107,23 +105,62 @@ class ClassUnderTest extends BaseGrid<TestPanel> {
 }
 
 describe('baseComponentGridview', () => {
+    test('that the container is not removed when grid is disposed', () => {
+        const root = document.createElement('div');
+        const container = document.createElement('div');
+        root.appendChild(container);
+
+        const cut = new ClassUnderTest(container, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: true,
+        });
+
+        cut.dispose();
+
+        expect(container.parentElement).toBe(root);
+    });
+
+    test('that .layout(...) force flag works', () => {
+        const cut = new ClassUnderTest(document.createElement('div'), {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: true,
+        });
+
+        const spy = jest.spyOn(cut.gridview, 'layout');
+
+        cut.layout(100, 100);
+        expect(spy).toHaveBeenCalledTimes(1);
+
+        cut.layout(100, 100, false);
+        expect(spy).toHaveBeenCalledTimes(1);
+
+        cut.layout(100, 100, true);
+        expect(spy).toHaveBeenCalledTimes(2);
+
+        cut.layout(150, 150, false);
+        expect(spy).toHaveBeenCalledTimes(3);
+
+        cut.layout(150, 150, true);
+        expect(spy).toHaveBeenCalledTimes(4);
+    });
+
     test('can add group', () => {
         const cut = new ClassUnderTest(document.createElement('div'), {
             orientation: Orientation.HORIZONTAL,
             proportionalLayout: true,
         });
 
-        const events: TestPanel[] = [];
+        const events: { type: string; panel: TestPanel | undefined }[] = [];
 
         const disposable = new CompositeDisposable(
-            cut.onDidAddGroup((event) => {
+            cut.onDidAdd((event) => {
-                events.push(event);
+                events.push({ type: 'add', panel: event });
             }),
-            cut.onDidRemoveGroup((event) => {
+            cut.onDidRemove((event) => {
-                events.push(event);
+                events.push({ type: 'remove', panel: event });
             }),
-            cut.onDidActiveGroupChange((event) => {
+            cut.onDidActiveChange((event) => {
-                events.push(event);
+                events.push({ type: 'active', panel: event });
             })
         );
 
@@ -140,9 +177,8 @@ describe('baseComponentGridview', () => {
 
         cut.doAddGroup(panel1);
 
-        expect(events.length).toBe(2);
+        expect(events.length).toBe(1);
-        expect(events[0]).toBe(panel1);
+        expect(events[0]).toEqual({ type: 'add', panel: panel1 });
-        expect(events[1]).toBe(panel1);
 
         const panel2 = new TestPanel(
             'id',
@@ -157,12 +193,12 @@ describe('baseComponentGridview', () => {
 
         cut.doAddGroup(panel2);
 
-        expect(events.length).toBe(4);
+        expect(events.length).toBe(2);
-        expect(events[2]).toBe(panel2);
+        expect(events[1]).toEqual({ type: 'add', panel: panel2 });
 
         cut.doRemoveGroup(panel1);
-        expect(events.length).toBe(5);
+        expect(events.length).toBe(3);
-        expect(events[4]).toBe(panel1);
+        expect(events[2]).toEqual({ type: 'remove', panel: panel1 });
 
         disposable.dispose();
         cut.dispose();

packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts

@@ -8,6 +8,7 @@ describe('gridviewPanel', () => {
                 onDidAddPanel: jest.fn(),
                 onDidRemovePanel: jest.fn(),
                 options: {},
+                onDidOptionsChange: jest.fn(),
             } as any;
         });
 

packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts

@@ -1,135 +0,0 @@
-import { fireEvent } from '@testing-library/dom';
-import { Emitter, Event } from '../../../events';
-import { ContentContainer } from '../../../dockview/components/panel/content';
-import {
-    GroupPanelContentPartInitParameters,
-    IContentRenderer,
-} from '../../../dockview/types';
-import { CompositeDisposable } from '../../../lifecycle';
-import { PanelUpdateEvent } from '../../../panel/types';
-import { IDockviewPanel } from '../../../dockview/dockviewPanel';
-import { IDockviewPanelModel } from '../../../dockview/dockviewPanelModel';
-
-class TestContentRenderer
-    extends CompositeDisposable
-    implements IContentRenderer
-{
-    readonly element: HTMLElement;
-
-    readonly _onDidFocus = new Emitter<void>();
-    readonly _onDidBlur = new Emitter<void>();
-    readonly onDidFocus: Event<void> = this._onDidFocus.event;
-    readonly onDidBlur: Event<void> = this._onDidBlur.event;
-
-    constructor(public id: string) {
-        super();
-        this.element = document.createElement('div');
-    }
-
-    init(parameters: GroupPanelContentPartInitParameters): void {
-        //
-    }
-
-    layout(width: number, height: number): void {
-        //
-    }
-    update(event: PanelUpdateEvent): void {
-        //
-    }
-
-    toJSON(): object {
-        return {};
-    }
-
-    focus(): void {
-        //
-    }
-}
-
-describe('contentContainer', () => {
-    beforeEach(() => {
-        jest.useFakeTimers();
-    });
-
-    test('basic focus test', () => {
-        let focus = 0;
-        let blur = 0;
-
-        const disposable = new CompositeDisposable();
-        const cut = new ContentContainer();
-
-        disposable.addDisposables(
-            cut.onDidFocus(() => {
-                focus++;
-            }),
-            cut.onDidBlur(() => {
-                blur++;
-            })
-        );
-
-        const contentRenderer = new TestContentRenderer('id-1');
-
-        const panel = {
-            view: {
-                content: contentRenderer,
-            } as Partial<IDockviewPanelModel>,
-        } as Partial<IDockviewPanel>;
-
-        cut.openPanel(panel as IDockviewPanel);
-
-        expect(focus).toBe(0);
-        expect(blur).toBe(0);
-
-        // container has focus within
-        fireEvent.focus(contentRenderer.element);
-        expect(focus).toBe(1);
-        expect(blur).toBe(0);
-
-        // container looses focus
-        fireEvent.blur(contentRenderer.element);
-        jest.runAllTimers();
-        expect(focus).toBe(1);
-        expect(blur).toBe(1);
-
-        // renderer explicitly asks for focus
-        contentRenderer._onDidFocus.fire();
-        expect(focus).toBe(2);
-        expect(blur).toBe(1);
-
-        // renderer explicitly looses focus
-        contentRenderer._onDidBlur.fire();
-        expect(focus).toBe(2);
-        expect(blur).toBe(2);
-
-        const contentRenderer2 = new TestContentRenderer('id-2');
-
-        const panel2 = {
-            view: {
-                content: contentRenderer2,
-            } as Partial<IDockviewPanelModel>,
-        } as Partial<IDockviewPanel>;
-
-        cut.openPanel(panel2 as IDockviewPanel);
-        expect(focus).toBe(2);
-        expect(blur).toBe(2);
-
-        // previous renderer events should no longer be attached to container
-        contentRenderer._onDidFocus.fire();
-        contentRenderer._onDidBlur.fire();
-        expect(focus).toBe(2);
-        expect(blur).toBe(2);
-
-        // new panel recieves focus
-        fireEvent.focus(contentRenderer2.element);
-        expect(focus).toBe(3);
-        expect(blur).toBe(2);
-
-        // new panel looses focus
-        fireEvent.blur(contentRenderer2.element);
-        jest.runAllTimers();
-        expect(focus).toBe(3);
-        expect(blur).toBe(3);
-
-        disposable.dispose();
-    });
-});

packages/dockview-core/src/__tests__/groupview/tab.spec.ts

@@ -1,287 +0,0 @@
-import { fireEvent } from '@testing-library/dom';
-import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer';
-import { DockviewComponent } from '../../dockview/dockviewComponent';
-import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
-import { DockviewGroupPanelModel } from '../../dockview/dockviewGroupPanelModel';
-import { Tab } from '../../dockview/components/tab/tab';
-
-describe('tab', () => {
-    test('that empty tab has inactive-tab class', () => {
-        const accessorMock = jest.fn();
-        const groupMock = jest.fn();
-
-        const cut = new Tab('panelId', new accessorMock(), new groupMock());
-
-        expect(cut.element.className).toBe('tab inactive-tab');
-    });
-
-    test('that active tab has active-tab class', () => {
-        const accessorMock = jest.fn();
-        const groupMock = jest.fn();
-
-        const cut = new Tab('panelId', new accessorMock(), new groupMock());
-
-        cut.setActive(true);
-        expect(cut.element.className).toBe('tab active-tab');
-
-        cut.setActive(false);
-        expect(cut.element.className).toBe('tab inactive-tab');
-    });
-
-    test('that an external event does not render a drop target and calls through to the group model', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                id: 'testcomponentid',
-            };
-        });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
-
-        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
-            return {
-                id: 'testgroupid',
-                model: groupView,
-            };
-        });
-
-        const accessor = new accessorMock() as DockviewComponent;
-        const groupPanel = new groupPanelMock() as DockviewGroupPanel;
-
-        const cut = new Tab('panelId', accessor, groupPanel);
-
-        jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
-            () => 100
-        );
-        jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
-            () => 100
-        );
-
-        fireEvent.dragEnter(cut.element);
-        fireEvent.dragOver(cut.element);
-
-        expect(groupView.canDisplayOverlay).toBeCalled();
-
-        expect(
-            cut.element.getElementsByClassName('drop-target-dropzone').length
-        ).toBe(0);
-    });
-
-    test('that if you drag over yourself no drop target is shown', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                id: 'testcomponentid',
-            };
-        });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
-
-        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
-            return {
-                id: 'testgroupid',
-                model: groupView,
-            };
-        });
-
-        const accessor = new accessorMock() as DockviewComponent;
-        const groupPanel = new groupPanelMock() as DockviewGroupPanel;
-
-        const cut = new Tab('panel1', accessor, groupPanel);
-
-        jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
-            () => 100
-        );
-        jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
-            () => 100
-        );
-
-        LocalSelectionTransfer.getInstance().setData(
-            [new PanelTransfer('testcomponentid', 'anothergroupid', 'panel1')],
-            PanelTransfer.prototype
-        );
-
-        fireEvent.dragEnter(cut.element);
-        fireEvent.dragOver(cut.element);
-
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
-
-        expect(
-            cut.element.getElementsByClassName('drop-target-dropzone').length
-        ).toBe(0);
-    });
-
-    test('that if you drag over another tab a drop target is shown', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                id: 'testcomponentid',
-            };
-        });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
-
-        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
-            return {
-                id: 'testgroupid',
-                model: groupView,
-            };
-        });
-
-        const accessor = new accessorMock() as DockviewComponent;
-        const groupPanel = new groupPanelMock() as DockviewGroupPanel;
-
-        const cut = new Tab('panel1', accessor, groupPanel);
-
-        jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
-            () => 100
-        );
-        jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
-            () => 100
-        );
-
-        LocalSelectionTransfer.getInstance().setData(
-            [new PanelTransfer('testcomponentid', 'anothergroupid', 'panel2')],
-            PanelTransfer.prototype
-        );
-
-        fireEvent.dragEnter(cut.element);
-        fireEvent.dragOver(cut.element);
-
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
-
-        expect(
-            cut.element.getElementsByClassName('drop-target-dropzone').length
-        ).toBe(1);
-    });
-
-    test('that dropping on a tab with the same id but from a different component should not render a drop over and call through to the group model', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                id: 'testcomponentid',
-            };
-        });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
-
-        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
-            return {
-                id: 'testgroupid',
-                model: groupView,
-            };
-        });
-
-        const accessor = new accessorMock() as DockviewComponent;
-        const groupPanel = new groupPanelMock() as DockviewGroupPanel;
-
-        const cut = new Tab('panel1', accessor, groupPanel);
-
-        jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
-            () => 100
-        );
-        jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
-            () => 100
-        );
-
-        LocalSelectionTransfer.getInstance().setData(
-            [
-                new PanelTransfer(
-                    'anothercomponentid',
-                    'anothergroupid',
-                    'panel1'
-                ),
-            ],
-            PanelTransfer.prototype
-        );
-
-        fireEvent.dragEnter(cut.element);
-        fireEvent.dragOver(cut.element);
-
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
-
-        expect(
-            cut.element.getElementsByClassName('drop-target-dropzone').length
-        ).toBe(0);
-    });
-
-    test('that dropping on a tab from a different component should not render a drop over and call through to the group model', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                id: 'testcomponentid',
-            };
-        });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
-
-        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
-            return {
-                id: 'testgroupid',
-                model: groupView,
-            };
-        });
-
-        const accessor = new accessorMock() as DockviewComponent;
-        const groupPanel = new groupPanelMock() as DockviewGroupPanel;
-
-        const cut = new Tab('panel1', accessor, groupPanel);
-
-        jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
-            () => 100
-        );
-        jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
-            () => 100
-        );
-
-        LocalSelectionTransfer.getInstance().setData(
-            [
-                new PanelTransfer(
-                    'anothercomponentid',
-                    'anothergroupid',
-                    'panel2'
-                ),
-            ],
-            PanelTransfer.prototype
-        );
-
-        fireEvent.dragEnter(cut.element);
-        fireEvent.dragOver(cut.element);
-
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
-
-        expect(
-            cut.element.getElementsByClassName('drop-target-dropzone').length
-        ).toBe(0);
-    });
-});

packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts

@@ -1,334 +0,0 @@
-import { DockviewComponent } from '../../../dockview/dockviewComponent';
-import { TabsContainer } from '../../../dockview/components/titlebar/tabsContainer';
-import { fireEvent } from '@testing-library/dom';
-import {
-    LocalSelectionTransfer,
-    PanelTransfer,
-} from '../../../dnd/dataTransfer';
-import { TestPanel } from '../dockviewGroupPanelModel.spec';
-import { DockviewGroupPanelModel } from '../../../dockview/dockviewGroupPanelModel';
-import { DockviewGroupPanel } from '../../../dockview/dockviewGroupPanel';
-
-describe('tabsContainer', () => {
-    test('that an external event does not render a drop target and calls through to the group mode', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                onDidAddPanel: jest.fn(),
-                onDidRemovePanel: jest.fn(),
-                options: {},
-            };
-        });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
-
-        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
-            return {
-                model: groupView,
-            };
-        });
-
-        const accessor = new accessorMock() as DockviewComponent;
-        const groupPanel = new groupPanelMock() as DockviewGroupPanel;
-
-        const cut = new TabsContainer(accessor, groupPanel);
-
-        const emptySpace = cut.element
-            .getElementsByClassName('void-container')
-            .item(0);
-
-        if (!emptySpace) {
-            fail('element not found');
-        }
-
-        jest.spyOn(emptySpace, 'clientHeight', 'get').mockImplementation(
-            () => 100
-        );
-        jest.spyOn(emptySpace, 'clientWidth', 'get').mockImplementation(
-            () => 100
-        );
-
-        fireEvent.dragEnter(emptySpace);
-        fireEvent.dragOver(emptySpace);
-
-        expect(groupView.canDisplayOverlay).toBeCalled();
-
-        expect(
-            cut.element.getElementsByClassName('drop-target-dropzone').length
-        ).toBe(0);
-    });
-
-    test('that a drag over event from another tab should render a drop target', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                id: 'testcomponentid',
-                onDidAddPanel: jest.fn(),
-                onDidRemovePanel: jest.fn(),
-                options: {},
-            };
-        });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
-
-        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
-            return {
-                id: 'testgroupid',
-                model: groupView,
-                panels: [],
-            };
-        });
-
-        const accessor = new accessorMock() as DockviewComponent;
-        const groupPanel = new groupPanelMock() as DockviewGroupPanel;
-
-        const cut = new TabsContainer(accessor, groupPanel);
-
-        const emptySpace = cut.element
-            .getElementsByClassName('void-container')
-            .item(0);
-
-        if (!emptySpace) {
-            fail('element not found');
-        }
-
-        jest.spyOn(emptySpace, 'clientHeight', 'get').mockImplementation(
-            () => 100
-        );
-        jest.spyOn(emptySpace, 'clientWidth', 'get').mockImplementation(
-            () => 100
-        );
-
-        LocalSelectionTransfer.getInstance().setData(
-            [
-                new PanelTransfer(
-                    'testcomponentid',
-                    'anothergroupid',
-                    'anotherpanelid'
-                ),
-            ],
-            PanelTransfer.prototype
-        );
-
-        fireEvent.dragEnter(emptySpace);
-        fireEvent.dragOver(emptySpace);
-
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
-
-        expect(
-            cut.element.getElementsByClassName('drop-target-dropzone').length
-        ).toBe(1);
-    });
-
-    test('that dropping over the empty space should render a drop target', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                id: 'testcomponentid',
-                onDidAddPanel: jest.fn(),
-                onDidRemovePanel: jest.fn(),
-                options: {},
-            };
-        });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
-
-        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
-            return {
-                id: 'testgroupid',
-                model: groupView,
-                panels: [],
-            };
-        });
-
-        const accessor = new accessorMock() as DockviewComponent;
-        const groupPanel = new groupPanelMock() as DockviewGroupPanel;
-
-        const cut = new TabsContainer(accessor, groupPanel);
-
-        cut.openPanel(new TestPanel('panel1', jest.fn() as any));
-        cut.openPanel(new TestPanel('panel2', jest.fn() as any));
-
-        const emptySpace = cut.element
-            .getElementsByClassName('void-container')
-            .item(0);
-
-        if (!emptySpace) {
-            fail('element not found');
-        }
-
-        jest.spyOn(emptySpace, 'clientHeight', 'get').mockImplementation(
-            () => 100
-        );
-        jest.spyOn(emptySpace, 'clientWidth', 'get').mockImplementation(
-            () => 100
-        );
-
-        LocalSelectionTransfer.getInstance().setData(
-            [new PanelTransfer('testcomponentid', 'anothergroupid', 'panel2')],
-            PanelTransfer.prototype
-        );
-
-        fireEvent.dragEnter(emptySpace);
-        fireEvent.dragOver(emptySpace);
-
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
-
-        expect(
-            cut.element.getElementsByClassName('drop-target-dropzone').length
-        ).toBe(1);
-    });
-
-    test('that dropping the first tab should render a drop target', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                id: 'testcomponentid',
-                onDidAddPanel: jest.fn(),
-                onDidRemovePanel: jest.fn(),
-                options: {},
-            };
-        });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
-
-        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
-            return {
-                id: 'testgroupid',
-                model: groupView,
-                panels: [],
-            };
-        });
-
-        const accessor = new accessorMock() as DockviewComponent;
-        const groupPanel = new groupPanelMock() as DockviewGroupPanel;
-
-        const cut = new TabsContainer(accessor, groupPanel);
-
-        cut.openPanel(new TestPanel('panel1', jest.fn() as any));
-        cut.openPanel(new TestPanel('panel2', jest.fn() as any));
-
-        const emptySpace = cut.element
-            .getElementsByClassName('void-container')
-            .item(0);
-
-        if (!emptySpace) {
-            fail('element not found');
-        }
-
-        jest.spyOn(emptySpace, 'clientHeight', 'get').mockImplementation(
-            () => 100
-        );
-        jest.spyOn(emptySpace, 'clientWidth', 'get').mockImplementation(
-            () => 100
-        );
-
-        LocalSelectionTransfer.getInstance().setData(
-            [new PanelTransfer('testcomponentid', 'anothergroupid', 'panel1')],
-            PanelTransfer.prototype
-        );
-
-        fireEvent.dragEnter(emptySpace);
-        fireEvent.dragOver(emptySpace);
-
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
-
-        expect(
-            cut.element.getElementsByClassName('drop-target-dropzone').length
-        ).toBe(1);
-    });
-
-    test('that dropping a tab from another component should not render a drop target', () => {
-        const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
-            return {
-                id: 'testcomponentid',
-                onDidAddPanel: jest.fn(),
-                onDidRemovePanel: jest.fn(),
-                options: {},
-            };
-        });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
-
-        const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
-            return {
-                id: 'testgroupid',
-                model: groupView,
-            };
-        });
-
-        const accessor = new accessorMock() as DockviewComponent;
-        const groupPanel = new groupPanelMock() as DockviewGroupPanel;
-
-        const cut = new TabsContainer(accessor, groupPanel);
-
-        cut.openPanel(new TestPanel('panel1', jest.fn() as any));
-        cut.openPanel(new TestPanel('panel2', jest.fn() as any));
-
-        const emptySpace = cut.element
-            .getElementsByClassName('void-container')
-            .item(0);
-
-        if (!emptySpace) {
-            fail('element not found');
-        }
-
-        jest.spyOn(emptySpace, 'clientHeight', 'get').mockImplementation(
-            () => 100
-        );
-        jest.spyOn(emptySpace, 'clientWidth', 'get').mockImplementation(
-            () => 100
-        );
-
-        LocalSelectionTransfer.getInstance().setData(
-            [
-                new PanelTransfer(
-                    'anothercomponentid',
-                    'anothergroupid',
-                    'panel1'
-                ),
-            ],
-            PanelTransfer.prototype
-        );
-
-        fireEvent.dragEnter(emptySpace);
-        fireEvent.dragOver(emptySpace);
-
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
-
-        expect(
-            cut.element.getElementsByClassName('drop-target-dropzone').length
-        ).toBe(0);
-    });
-});

packages/dockview-core/src/__tests__/lifecycle.spec.ts

@@ -1,4 +1,8 @@
-import { CompositeDisposable, MutableDisposable } from '../lifecycle';
+import {
+    CompositeDisposable,
+    Disposable,
+    MutableDisposable,
+} from '../lifecycle';
 
 describe('lifecycle', () => {
     test('mutable disposable', () => {
@@ -48,4 +52,32 @@ describe('lifecycle', () => {
         expect(d3.dispose).toHaveBeenCalledTimes(1);
         expect(d4.dispose).toHaveBeenCalledTimes(1);
     });
+
+    test('that isDisposed=true once CompositeDisposable is disposed', () => {
+        class Test extends CompositeDisposable {
+            checkIsDisposed(): boolean {
+                return this.isDisposed;
+            }
+        }
+
+        const cut = new Test();
+
+        expect(cut.checkIsDisposed()).toBeFalsy();
+
+        cut.dispose();
+
+        expect(cut.checkIsDisposed()).toBeTruthy();
+    });
+
+    test('Disposable.from(...)', () => {
+        const func = jest.fn();
+
+        const disposable = Disposable.from(func);
+
+        expect(func).not.toHaveBeenCalled();
+
+        disposable.dispose();
+
+        expect(func).toHaveBeenCalledTimes(1);
+    });
 });

packages/dockview-core/src/__tests__/math.spec.ts

@@ -8,10 +8,8 @@ describe('math', () => {
             expect(clamp(55, 40, 50)).toBe(50);
         });
 
-        it('should throw an error if min > max', () => {
+        it('if min > max return min', () => {
-            expect(() => clamp(55, 50, 40)).toThrow(
+            expect(clamp(55, 50, 40)).toBe(50);
-                '50 > 40 is an invalid condition'
-            );
         });
     });
 

packages/dockview-core/src/__tests__/overlay/overlay.spec.ts

@@ -0,0 +1,418 @@
+import { Overlay } from '../../overlay/overlay';
+import { mockGetBoundingClientRect } from '../__test_utils__/utils';
+
+describe('overlay', () => {
+    test('toJSON, top left', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        document.body.appendChild(container);
+        container.appendChild(content);
+
+        const cut = new Overlay({
+            height: 200,
+            width: 100,
+            left: 10,
+            top: 20,
+            minimumInViewportWidth: 0,
+            minimumInViewportHeight: 0,
+            container,
+            content,
+        });
+
+        jest.spyOn(
+            container.childNodes.item(0) as HTMLElement,
+            'getBoundingClientRect'
+        ).mockImplementation(() => {
+            return mockGetBoundingClientRect({
+                left: 80,
+                top: 100,
+                width: 40,
+                height: 50,
+            });
+        });
+        jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
+            () => {
+                return mockGetBoundingClientRect({
+                    left: 20,
+                    top: 30,
+                    width: 100,
+                    height: 100,
+                });
+            }
+        );
+
+        cut.setBounds();
+
+        expect(cut.toJSON()).toEqual({
+            top: 70,
+            left: 60,
+            width: 40,
+            height: 50,
+        });
+
+        cut.dispose();
+    });
+
+    test('toJSON, bottom right', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        document.body.appendChild(container);
+        container.appendChild(content);
+
+        const cut = new Overlay({
+            height: 200,
+            width: 100,
+            right: 10,
+            bottom: 20,
+            minimumInViewportWidth: 0,
+            minimumInViewportHeight: 0,
+            container,
+            content,
+        });
+
+        jest.spyOn(
+            container.childNodes.item(0) as HTMLElement,
+            'getBoundingClientRect'
+        ).mockImplementation(() => {
+            return mockGetBoundingClientRect({
+                left: 80,
+                top: 100,
+                width: 40,
+                height: 50,
+            });
+        });
+        jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
+            () => {
+                return mockGetBoundingClientRect({
+                    left: 20,
+                    top: 30,
+                    width: 100,
+                    height: 100,
+                });
+            }
+        );
+
+        cut.setBounds();
+
+        expect(cut.toJSON()).toEqual({
+            bottom: -20,
+            right: 0,
+            width: 40,
+            height: 50,
+        });
+
+        cut.dispose();
+    });
+
+    test('that out-of-bounds dimensions are fixed, top left', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        document.body.appendChild(container);
+        container.appendChild(content);
+
+        const cut = new Overlay({
+            height: 200,
+            width: 100,
+            left: -1000,
+            top: -1000,
+            minimumInViewportWidth: 0,
+            minimumInViewportHeight: 0,
+            container,
+            content,
+        });
+
+        jest.spyOn(
+            container.childNodes.item(0) as HTMLElement,
+            'getBoundingClientRect'
+        ).mockImplementation(() => {
+            return mockGetBoundingClientRect({
+                left: 80,
+                top: 100,
+                width: 40,
+                height: 50,
+            });
+        });
+        jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
+            () => {
+                return mockGetBoundingClientRect({
+                    left: 20,
+                    top: 30,
+                    width: 100,
+                    height: 100,
+                });
+            }
+        );
+
+        cut.setBounds();
+
+        expect(cut.toJSON()).toEqual({
+            top: 70,
+            left: 60,
+            width: 40,
+            height: 50,
+        });
+
+        cut.dispose();
+    });
+
+    test('that out-of-bounds dimensions are fixed, bottom right', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        document.body.appendChild(container);
+        container.appendChild(content);
+
+        const cut = new Overlay({
+            height: 200,
+            width: 100,
+            bottom: -1000,
+            right: -1000,
+            minimumInViewportWidth: 0,
+            minimumInViewportHeight: 0,
+            container,
+            content,
+        });
+
+        jest.spyOn(
+            container.childNodes.item(0) as HTMLElement,
+            'getBoundingClientRect'
+        ).mockImplementation(() => {
+            return mockGetBoundingClientRect({
+                left: 80,
+                top: 100,
+                width: 40,
+                height: 50,
+            });
+        });
+        jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
+            () => {
+                return mockGetBoundingClientRect({
+                    left: 20,
+                    top: 30,
+                    width: 100,
+                    height: 100,
+                });
+            }
+        );
+
+        cut.setBounds();
+
+        expect(cut.toJSON()).toEqual({
+            bottom: -20,
+            right: 0,
+            width: 40,
+            height: 50,
+        });
+
+        cut.dispose();
+    });
+
+    test('setBounds, top left', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        document.body.appendChild(container);
+        container.appendChild(content);
+
+        const cut = new Overlay({
+            height: 1000,
+            width: 1000,
+            left: 0,
+            top: 0,
+            minimumInViewportWidth: 0,
+            minimumInViewportHeight: 0,
+            container,
+            content,
+        });
+
+        const element: HTMLElement = container.querySelector(
+            '.dv-resize-container'
+        )!;
+        expect(element).toBeTruthy();
+
+        jest.spyOn(element, 'getBoundingClientRect').mockImplementation(() => {
+            return mockGetBoundingClientRect({
+                left: 300,
+                top: 400,
+                width: 200,
+                height: 100,
+            });
+        });
+        jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
+            () => {
+                return mockGetBoundingClientRect({
+                    left: 0,
+                    top: 0,
+                    width: 1000,
+                    height: 1000,
+                });
+            }
+        );
+
+        cut.setBounds({ height: 100, width: 200, left: 300, top: 400 });
+
+        expect(element.style.height).toBe('100px');
+        expect(element.style.width).toBe('200px');
+        expect(element.style.left).toBe('300px');
+        expect(element.style.top).toBe('400px');
+
+        cut.dispose();
+    });
+
+    test('setBounds, bottom right', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        document.body.appendChild(container);
+        container.appendChild(content);
+
+        const cut = new Overlay({
+            height: 1000,
+            width: 1000,
+            right: 0,
+            bottom: 0,
+            minimumInViewportWidth: 0,
+            minimumInViewportHeight: 0,
+            container,
+            content,
+        });
+
+        const element: HTMLElement = container.querySelector(
+            '.dv-resize-container'
+        )!;
+        expect(element).toBeTruthy();
+
+        jest.spyOn(element, 'getBoundingClientRect').mockImplementation(() => {
+            return mockGetBoundingClientRect({
+                left: 500,
+                top: 500,
+                width: 200,
+                height: 100,
+            });
+        });
+        jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
+            () => {
+                return mockGetBoundingClientRect({
+                    left: 0,
+                    top: 0,
+                    width: 1000,
+                    height: 1000,
+                });
+            }
+        );
+
+        cut.setBounds({ height: 100, width: 200, right: 300, bottom: 400 });
+
+        expect(element.style.height).toBe('100px');
+        expect(element.style.width).toBe('200px');
+        expect(element.style.right).toBe('300px');
+        expect(element.style.bottom).toBe('400px');
+
+        cut.dispose();
+    });
+
+    test('that the resize handles are added', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        const cut = new Overlay({
+            height: 500,
+            width: 500,
+            left: 100,
+            top: 200,
+            minimumInViewportWidth: 0,
+            minimumInViewportHeight: 0,
+            container,
+            content,
+        });
+
+        expect(container.querySelector('.dv-resize-handle-top')).toBeTruthy();
+        expect(
+            container.querySelector('.dv-resize-handle-bottom')
+        ).toBeTruthy();
+        expect(container.querySelector('.dv-resize-handle-left')).toBeTruthy();
+        expect(container.querySelector('.dv-resize-handle-right')).toBeTruthy();
+        expect(
+            container.querySelector('.dv-resize-handle-topleft')
+        ).toBeTruthy();
+        expect(
+            container.querySelector('.dv-resize-handle-topright')
+        ).toBeTruthy();
+        expect(
+            container.querySelector('.dv-resize-handle-bottomleft')
+        ).toBeTruthy();
+        expect(
+            container.querySelector('.dv-resize-handle-bottomright')
+        ).toBeTruthy();
+
+        cut.dispose();
+    });
+
+    test('aria-level attributes and corresponding z-index', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        const createOverlay = () =>
+            new Overlay({
+                height: 500,
+                width: 500,
+                left: 100,
+                top: 200,
+                minimumInViewportWidth: 0,
+                minimumInViewportHeight: 0,
+                container,
+                content,
+            });
+
+        const overlay1 = createOverlay();
+
+        const zIndexValue = (delta: number) =>
+            `calc(var(--dv-overlay-z-index, 999) + ${delta})`;
+
+        expect(overlay1.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay1.element.style.zIndex).toBe(zIndexValue(0));
+
+        const overlay2 = createOverlay();
+        const overlay3 = createOverlay();
+
+        expect(overlay1.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay2.element.getAttribute('aria-level')).toBe('1');
+        expect(overlay3.element.getAttribute('aria-level')).toBe('2');
+        expect(overlay1.element.style.zIndex).toBe(zIndexValue(0));
+        expect(overlay2.element.style.zIndex).toBe(zIndexValue(2));
+        expect(overlay3.element.style.zIndex).toBe(zIndexValue(4));
+
+        overlay2.bringToFront();
+
+        expect(overlay1.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay2.element.getAttribute('aria-level')).toBe('2');
+        expect(overlay3.element.getAttribute('aria-level')).toBe('1');
+        expect(overlay1.element.style.zIndex).toBe(zIndexValue(0));
+        expect(overlay2.element.style.zIndex).toBe(zIndexValue(4));
+        expect(overlay3.element.style.zIndex).toBe(zIndexValue(2));
+
+        overlay1.bringToFront();
+
+        expect(overlay1.element.getAttribute('aria-level')).toBe('2');
+        expect(overlay2.element.getAttribute('aria-level')).toBe('1');
+        expect(overlay3.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay1.element.style.zIndex).toBe(zIndexValue(4));
+        expect(overlay2.element.style.zIndex).toBe(zIndexValue(2));
+        expect(overlay3.element.style.zIndex).toBe(zIndexValue(0));
+
+        overlay2.dispose();
+
+        expect(overlay1.element.getAttribute('aria-level')).toBe('1');
+        expect(overlay3.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay1.element.style.zIndex).toBe(zIndexValue(2));
+        expect(overlay3.element.style.zIndex).toBe(zIndexValue(0));
+
+        overlay1.dispose();
+
+        expect(overlay3.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay3.element.style.zIndex).toBe(zIndexValue(0));
+    });
+});

packages/dockview-core/src/__tests__/overlay/overlayRenderContainer.spec.ts

@@ -0,0 +1,457 @@
+import { Droptarget } from '../../dnd/droptarget';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
+import { Emitter } from '../../events';
+import {
+    IRenderable,
+    OverlayRenderContainer,
+} from '../../overlay/overlayRenderContainer';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { Writable, exhaustMicrotaskQueue, exhaustAnimationFrame } from '../__test_utils__/utils';
+import { DockviewComponent } from '../../dockview/dockviewComponent';
+import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+
+describe('overlayRenderContainer', () => {
+    let referenceContainer: IRenderable;
+    let parentContainer: HTMLElement;
+
+    beforeEach(() => {
+        parentContainer = document.createElement('div');
+
+        referenceContainer = {
+            element: document.createElement('div'),
+            dropTarget: fromPartial<Droptarget>({}),
+        };
+    });
+
+    test('that attach(...) and detach(...) mutate the DOM as expected', () => {
+        const cut = new OverlayRenderContainer(
+            parentContainer,
+            fromPartial<DockviewComponent>({})
+        );
+
+        const panelContentEl = document.createElement('div');
+
+        const onDidVisibilityChange = new Emitter<any>();
+        const onDidDimensionsChange = new Emitter<any>();
+        const onDidLocationChange = new Emitter<any>();
+
+        const panel = fromPartial<IDockviewPanel>({
+            api: {
+                id: 'test_panel_id',
+                onDidVisibilityChange: onDidVisibilityChange.event,
+                onDidDimensionsChange: onDidDimensionsChange.event,
+                onDidLocationChange: onDidLocationChange.event,
+                isVisible: true,
+                location: { type: 'grid' },
+            },
+            view: {
+                content: {
+                    element: panelContentEl,
+                },
+            },
+            group: {
+                api: {
+                    location: { type: 'grid' },
+                },
+            },
+        });
+
+        cut.attach({ panel, referenceContainer });
+
+        expect(panelContentEl.parentElement?.parentElement).toBe(
+            parentContainer
+        );
+
+        cut.detatch(panel);
+
+        expect(panelContentEl.parentElement?.parentElement).toBeUndefined();
+    });
+
+    test('add a view that is not currently in the DOM', async () => {
+        const cut = new OverlayRenderContainer(
+            parentContainer,
+            fromPartial<DockviewComponent>({})
+        );
+
+        const panelContentEl = document.createElement('div');
+
+        const onDidVisibilityChange = new Emitter<any>();
+        const onDidDimensionsChange = new Emitter<any>();
+        const onDidLocationChange = new Emitter<any>();
+
+        const panel = fromPartial<IDockviewPanel>({
+            api: {
+                id: 'test_panel_id',
+                onDidVisibilityChange: onDidVisibilityChange.event,
+                onDidDimensionsChange: onDidDimensionsChange.event,
+                onDidLocationChange: onDidLocationChange.event,
+                isVisible: true,
+                location: { type: 'grid' },
+            },
+            view: {
+                content: {
+                    element: panelContentEl,
+                },
+            },
+            group: {
+                api: {
+                    location: { type: 'grid' },
+                },
+            },
+        });
+
+        (parentContainer as jest.Mocked<HTMLDivElement>).getBoundingClientRect =
+            jest
+                .fn<DOMRect, []>()
+                .mockReturnValueOnce(
+                    fromPartial<DOMRect>({
+                        left: 100,
+                        top: 200,
+                        width: 1000,
+                        height: 500,
+                    })
+                )
+                .mockReturnValueOnce(
+                    fromPartial<DOMRect>({
+                        left: 101,
+                        top: 201,
+                        width: 1000,
+                        height: 500,
+                    })
+                )
+                .mockReturnValueOnce(
+                    fromPartial<DOMRect>({
+                        left: 100,
+                        top: 200,
+                        width: 1000,
+                        height: 500,
+                    })
+                );
+
+        (
+            referenceContainer.element as jest.Mocked<HTMLDivElement>
+        ).getBoundingClientRect = jest
+            .fn<DOMRect, []>()
+            .mockReturnValueOnce(
+                fromPartial<DOMRect>({
+                    left: 150,
+                    top: 300,
+                    width: 100,
+                    height: 200,
+                })
+            )
+            .mockReturnValueOnce(
+                fromPartial<DOMRect>({
+                    left: 150,
+                    top: 300,
+                    width: 101,
+                    height: 201,
+                })
+            )
+            .mockReturnValueOnce(
+                fromPartial<DOMRect>({
+                    left: 150,
+                    top: 300,
+                    width: 100,
+                    height: 200,
+                })
+            );
+
+        const container = cut.attach({ panel, referenceContainer });
+
+        await exhaustMicrotaskQueue();
+        await exhaustAnimationFrame();
+
+        expect(panelContentEl.parentElement).toBe(container);
+        expect(container.parentElement).toBe(parentContainer);
+
+        expect(container.style.display).toBe('');
+
+        expect(container.style.left).toBe('50px');
+        expect(container.style.top).toBe('100px');
+        expect(container.style.width).toBe('100px');
+        expect(container.style.height).toBe('200px');
+        expect(
+            referenceContainer.element.getBoundingClientRect
+        ).toHaveBeenCalledTimes(1);
+
+        onDidDimensionsChange.fire({});
+        await exhaustAnimationFrame();
+        expect(container.style.display).toBe('');
+
+        expect(container.style.left).toBe('49px');
+        expect(container.style.top).toBe('99px');
+        expect(container.style.width).toBe('101px');
+        expect(container.style.height).toBe('201px');
+        expect(
+            referenceContainer.element.getBoundingClientRect
+        ).toHaveBeenCalledTimes(2);
+
+        (panel as Writable<IDockviewPanel>).api.isVisible = false;
+        onDidVisibilityChange.fire({});
+        expect(container.style.display).toBe('none');
+        expect(
+            referenceContainer.element.getBoundingClientRect
+        ).toHaveBeenCalledTimes(2);
+
+        (panel as Writable<IDockviewPanel>).api.isVisible = true;
+        onDidVisibilityChange.fire({});
+        expect(container.style.display).toBe('');
+
+        expect(container.style.left).toBe('49px');
+        expect(container.style.top).toBe('99px');
+        expect(container.style.width).toBe('101px');
+        expect(container.style.height).toBe('201px');
+        expect(
+            referenceContainer.element.getBoundingClientRect
+        ).toHaveBeenCalledTimes(2);
+    });
+
+    test('related z-index from `aria-level` set on floating panels', async () => {
+        const group = fromPartial<DockviewGroupPanel>({});
+
+        const element = document.createElement('div');
+        element.setAttribute('aria-level', '2');
+        const spy = jest.spyOn(element, 'getAttribute');
+
+        const accessor = fromPartial<DockviewComponent>({
+            floatingGroups: [
+                {
+                    group,
+                    overlay: {
+                        element,
+                    },
+                },
+            ],
+        });
+
+        const cut = new OverlayRenderContainer(parentContainer, accessor);
+
+        const panelContentEl = document.createElement('div');
+
+        const onDidVisibilityChange = new Emitter<any>();
+        const onDidDimensionsChange = new Emitter<any>();
+        const onDidLocationChange = new Emitter<any>();
+
+        const panel = fromPartial<IDockviewPanel>({
+            api: {
+                id: 'test_panel_id',
+                onDidVisibilityChange: onDidVisibilityChange.event,
+                onDidDimensionsChange: onDidDimensionsChange.event,
+                onDidLocationChange: onDidLocationChange.event,
+                isVisible: true,
+                group,
+                location: { type: 'floating' },
+            },
+            view: {
+                content: {
+                    element: panelContentEl,
+                },
+            },
+            group: {
+                api: {
+                    location: { type: 'floating' },
+                },
+            },
+        });
+
+        cut.attach({ panel, referenceContainer });
+
+        await exhaustMicrotaskQueue();
+
+        expect(spy).toHaveBeenCalledWith('aria-level');
+        expect(panelContentEl.parentElement!.style.zIndex).toBe(
+            'calc(var(--dv-overlay-z-index, 999) + 5)'
+        );
+    });
+
+    test('that frequent resize calls are batched to prevent shaking (issue #988)', async () => {
+        const cut = new OverlayRenderContainer(
+            parentContainer,
+            fromPartial<DockviewComponent>({})
+        );
+
+        const panelContentEl = document.createElement('div');
+        const onDidVisibilityChange = new Emitter<any>();
+        const onDidDimensionsChange = new Emitter<any>();
+        const onDidLocationChange = new Emitter<any>();
+
+        const panel = fromPartial<IDockviewPanel>({
+            api: {
+                id: 'test_panel_id',
+                onDidVisibilityChange: onDidVisibilityChange.event,
+                onDidDimensionsChange: onDidDimensionsChange.event,
+                onDidLocationChange: onDidLocationChange.event,
+                isVisible: true,
+                location: { type: 'grid' },
+            },
+            view: {
+                content: {
+                    element: panelContentEl,
+                },
+            },
+            group: {
+                api: {
+                    location: {
+                        type: 'grid',
+                    },
+                },
+            },
+        });
+
+        jest.spyOn(referenceContainer.element, 'getBoundingClientRect')
+            .mockReturnValue(
+                fromPartial<DOMRect>({
+                    left: 100,
+                    top: 200,
+                    width: 150,
+                    height: 250,
+                })
+            );
+
+        jest.spyOn(parentContainer, 'getBoundingClientRect').mockReturnValue(
+            fromPartial<DOMRect>({
+                left: 50,
+                top: 100,
+                width: 200,
+                height: 300,
+            })
+        );
+
+        const container = cut.attach({ panel, referenceContainer });
+
+        // Wait for initial positioning
+        await exhaustMicrotaskQueue();
+        await exhaustAnimationFrame();
+
+        expect(container.style.left).toBe('50px');
+        expect(container.style.top).toBe('100px');
+
+        // Simulate rapid resize events that could cause shaking
+        onDidDimensionsChange.fire({});
+        onDidDimensionsChange.fire({});
+        onDidDimensionsChange.fire({});
+        onDidDimensionsChange.fire({});
+        onDidDimensionsChange.fire({});
+
+        // Even with multiple rapid events, only one RAF should be scheduled
+        await exhaustAnimationFrame();
+        
+        expect(container.style.left).toBe('50px');
+        expect(container.style.top).toBe('100px');
+        expect(container.style.width).toBe('150px');
+        expect(container.style.height).toBe('250px');
+
+        // Verify that DOM measurements are cached within the same frame
+        // Should be called initially and possibly one more time for visibility change
+        expect(referenceContainer.element.getBoundingClientRect).toHaveBeenCalledTimes(2);
+        expect(parentContainer.getBoundingClientRect).toHaveBeenCalledTimes(2);
+    });
+
+    test('updateAllPositions forces position recalculation for visible panels', async () => {
+        const cut = new OverlayRenderContainer(
+            parentContainer,
+            fromPartial<DockviewComponent>({})
+        );
+
+        const panelContentEl1 = document.createElement('div');
+        const panelContentEl2 = document.createElement('div');
+        
+        const onDidVisibilityChange1 = new Emitter<any>();
+        const onDidDimensionsChange1 = new Emitter<any>();
+        const onDidLocationChange1 = new Emitter<any>();
+        
+        const onDidVisibilityChange2 = new Emitter<any>();
+        const onDidDimensionsChange2 = new Emitter<any>();
+        const onDidLocationChange2 = new Emitter<any>();
+
+        const panel1 = fromPartial<IDockviewPanel>({
+            api: {
+                id: 'panel1',
+                onDidVisibilityChange: onDidVisibilityChange1.event,
+                onDidDimensionsChange: onDidDimensionsChange1.event,
+                onDidLocationChange: onDidLocationChange1.event,
+                isVisible: true,
+                location: { type: 'grid' },
+            },
+            view: {
+                content: {
+                    element: panelContentEl1,
+                },
+            },
+            group: {
+                api: {
+                    location: { type: 'grid' },
+                },
+            },
+        });
+
+        const panel2 = fromPartial<IDockviewPanel>({
+            api: {
+                id: 'panel2',
+                onDidVisibilityChange: onDidVisibilityChange2.event,
+                onDidDimensionsChange: onDidDimensionsChange2.event,
+                onDidLocationChange: onDidLocationChange2.event,
+                isVisible: false, // This panel is not visible
+                location: { type: 'grid' },
+            },
+            view: {
+                content: {
+                    element: panelContentEl2,
+                },
+            },
+            group: {
+                api: {
+                    location: { type: 'grid' },
+                },
+            },
+        });
+
+        // Mock getBoundingClientRect for consistent testing
+        jest.spyOn(referenceContainer.element, 'getBoundingClientRect')
+            .mockReturnValue(
+                fromPartial<DOMRect>({
+                    left: 100,
+                    top: 200,
+                    width: 150,
+                    height: 250,
+                })
+            );
+
+        jest.spyOn(parentContainer, 'getBoundingClientRect').mockReturnValue(
+            fromPartial<DOMRect>({
+                left: 50,
+                top: 100,
+                width: 200,
+                height: 300,
+            })
+        );
+
+        // Attach both panels
+        const container1 = cut.attach({ panel: panel1, referenceContainer });
+        const container2 = cut.attach({ panel: panel2, referenceContainer });
+
+        await exhaustMicrotaskQueue();
+        await exhaustAnimationFrame();
+
+        // Clear previous calls to getBoundingClientRect
+        jest.clearAllMocks();
+
+        // Call updateAllPositions
+        cut.updateAllPositions();
+
+        // Should trigger resize for visible panels only
+        await exhaustAnimationFrame();
+
+        // Verify that positioning was updated for visible panel
+        expect(container1.style.left).toBe('50px');
+        expect(container1.style.top).toBe('100px');
+        expect(container1.style.width).toBe('150px');
+        expect(container1.style.height).toBe('250px');
+
+        // Verify getBoundingClientRect was called for visible panel only
+        // updateAllPositions should call the resize function which triggers getBoundingClientRect
+        expect(referenceContainer.element.getBoundingClientRect).toHaveBeenCalled();
+        expect(parentContainer.getBoundingClientRect).toHaveBeenCalled();
+    });
+});

packages/dockview-core/src/__tests__/panel/componentFactory.spec.ts

@@ -1,102 +0,0 @@
-import { createComponent } from '../../panel/componentFactory';
-
-describe('componentFactory', () => {
-    describe('createComponent', () => {
-        test('valid component and framework component', () => {
-            const mock = jest.fn();
-            const mock2 = jest.fn();
-
-            expect(() =>
-                createComponent(
-                    'id-1',
-                    'component-1',
-                    { 'component-1': mock },
-                    { 'component-1': mock2 }
-                )
-            ).toThrow(
-                "Cannot create 'id-1'. component 'component-1' registered as both a component and frameworkComponent"
-            );
-        });
-
-        test('valid framework component but no factory', () => {
-            const mock = jest.fn();
-
-            expect(() =>
-                createComponent(
-                    'id-1',
-                    'component-1',
-                    {},
-                    { 'component-1': mock }
-                )
-            ).toThrow(
-                "Cannot create 'id-1' for framework component 'component-1'. you must register a frameworkPanelWrapper to use framework components"
-            );
-        });
-
-        test('valid framework component', () => {
-            const component = jest.fn();
-            const createComponentFn = jest
-                .fn()
-                .mockImplementation(() => component);
-            const frameworkComponent = jest.fn();
-
-            expect(
-                createComponent(
-                    'id-1',
-                    'component-1',
-                    {},
-                    { 'component-1': frameworkComponent },
-                    {
-                        createComponent: createComponentFn,
-                    }
-                )
-            ).toBe(component);
-
-            expect(createComponentFn).toHaveBeenCalledWith(
-                'id-1',
-                'component-1',
-                frameworkComponent
-            );
-        });
-
-        test('no valid component with fallback', () => {
-            const mock = jest.fn();
-
-            expect(
-                createComponent(
-                    'id-1',
-                    'component-1',
-                    {},
-                    {},
-                    {
-                        createComponent: () => null,
-                    },
-                    () => mock
-                )
-            ).toBe(mock);
-        });
-
-        test('no valid component', () => {
-            expect(() =>
-                createComponent('id-1', 'component-1', {}, {})
-            ).toThrow(
-                "Cannot create 'id-1', no component 'component-1' provided"
-            );
-        });
-
-        test('valid component', () => {
-            const component = jest.fn();
-
-            const componentResult = createComponent(
-                'id-1',
-                'component-1',
-                { 'component-1': component },
-                {}
-            );
-
-            expect(component).toHaveBeenCalled();
-
-            expect(componentResult instanceof component);
-        });
-    });
-});

packages/dockview-core/src/__tests__/paneview/paneview.spec.ts

@@ -1,14 +1,10 @@
 import { CompositeDisposable } from '../../lifecycle';
 import { Paneview } from '../../paneview/paneview';
-import {
+import { IPanePart, PaneviewPanel } from '../../paneview/paneviewPanel';
-    IPaneBodyPart,
-    IPaneHeaderPart,
-    PaneviewPanel,
-} from '../../paneview/paneviewPanel';
 import { Orientation } from '../../splitview/splitview';
 
 class TestPanel extends PaneviewPanel {
-    protected getBodyComponent(): IPaneBodyPart {
+    protected getBodyComponent(): IPanePart {
         return {
             element: document.createElement('div'),
             update: () => {
@@ -23,7 +19,7 @@ class TestPanel extends PaneviewPanel {
         };
     }
 
-    protected getHeaderComponent(): IPaneHeaderPart {
+    protected getHeaderComponent(): IPanePart {
         return {
             element: document.createElement('div'),
             update: () => {
@@ -60,22 +56,28 @@ describe('paneview', () => {
             paneview.onDidRemoveView((view) => removed.push(view))
         );
 
-        const view1 = new TestPanel(
+        const view1 = new TestPanel({
-            'id',
+            id: 'id',
-            'component',
+            component: 'component',
-            'headerComponent',
+            headerComponent: 'headerComponent',
-            Orientation.VERTICAL,
+            orientation: Orientation.VERTICAL,
-            true,
+            isExpanded: true,
-            true
+            isHeaderVisible: true,
-        );
+            headerSize: 22,
-        const view2 = new TestPanel(
+            minimumBodySize: 0,
-            'id2',
+            maximumBodySize: Number.MAX_SAFE_INTEGER,
-            'component',
+        });
-            'headerComponent',
+        const view2 = new TestPanel({
-            Orientation.VERTICAL,
+            id: 'id2',
-            true,
+            component: 'component',
-            true
+            headerComponent: 'headerComponent',
-        );
+            orientation: Orientation.VERTICAL,
+            isExpanded: true,
+            isHeaderVisible: true,
+            headerSize: 22,
+            minimumBodySize: 0,
+            maximumBodySize: Number.MAX_SAFE_INTEGER,
+        });
 
         expect(added.length).toBe(0);
         expect(removed.length).toBe(0);
@@ -110,22 +112,28 @@ describe('paneview', () => {
             orientation: Orientation.HORIZONTAL,
         });
 
-        const view1 = new TestPanel(
+        const view1 = new TestPanel({
-            'id',
+            id: 'id',
-            'component',
+            component: 'component',
-            'headerComponent',
+            headerComponent: 'headerComponent',
-            Orientation.VERTICAL,
+            orientation: Orientation.VERTICAL,
-            true,
+            isExpanded: true,
-            true
+            isHeaderVisible: true,
-        );
+            headerSize: 22,
-        const view2 = new TestPanel(
+            minimumBodySize: 0,
-            'id2',
+            maximumBodySize: Number.MAX_SAFE_INTEGER,
-            'component',
+        });
-            'headerComponent',
+        const view2 = new TestPanel({
-            Orientation.VERTICAL,
+            id: 'id2',
-            true,
+            component: 'component',
-            true
+            headerComponent: 'headerComponent',
-        );
+            orientation: Orientation.VERTICAL,
+            isExpanded: true,
+            isHeaderVisible: true,
+            headerSize: 22,
+            minimumBodySize: 0,
+            maximumBodySize: Number.MAX_SAFE_INTEGER,
+        });
 
         paneview.addPane(view1);
         paneview.addPane(view2);

packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts

@@ -4,19 +4,28 @@ import { PanelUpdateEvent } from '../../panel/types';
 import { PaneviewComponent } from '../../paneview/paneviewComponent';
 import {
     PaneviewPanel,
-    IPaneBodyPart,
+    IPanePart,
-    IPaneHeaderPart,
     PanePanelComponentInitParameter,
 } from '../../paneview/paneviewPanel';
 import { Orientation } from '../../splitview/splitview';
 
 class TestPanel extends PaneviewPanel {
     constructor(id: string, component: string) {
-        super(id, component, 'header', Orientation.VERTICAL, false, true);
+        super({
+            id,
+            component,
+            headerComponent: 'header',
+            orientation: Orientation.VERTICAL,
+            isExpanded: false,
+            isHeaderVisible: true,
+            headerSize: 22,
+            minimumBodySize: 0,
+            maximumBodySize: Number.MAX_SAFE_INTEGER,
+        });
     }
 
     getHeaderComponent() {
-        return new (class Header implements IPaneHeaderPart {
+        return new (class Header implements IPanePart {
             private _element: HTMLElement = document.createElement('div');
 
             get element() {
@@ -38,7 +47,7 @@ class TestPanel extends PaneviewPanel {
     }
 
     getBodyComponent() {
-        return new (class Header implements IPaneBodyPart {
+        return new (class Header implements IPanePart {
             private _element: HTMLElement = document.createElement('div');
 
             get element() {
@@ -60,7 +69,7 @@ class TestPanel extends PaneviewPanel {
     }
 }
 
-describe('componentPaneview', () => {
+describe('paneviewComponent', () => {
     let container: HTMLElement;
 
     beforeEach(() => {
@@ -68,25 +77,52 @@ describe('componentPaneview', () => {
         container.className = 'container';
     });
 
+    test('that the container is not removed when grid is disposed', () => {
+        const root = document.createElement('div');
+        const container = document.createElement('div');
+        root.appendChild(container);
+
+        const paneview = new PaneviewComponent(container, {
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+        });
+
+        paneview.dispose();
+
+        expect(container.parentElement).toBe(root);
+        expect(container.children.length).toBe(0);
+    });
+
     test('vertical panels', () => {
         const disposables = new CompositeDisposable();
 
         const paneview = new PaneviewComponent(container, {
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
-        paneview.layout(600, 400);
+        paneview.layout(300, 200);
 
         paneview.addPanel({
             id: 'panel1',
-            component: 'testPanel',
+            component: 'default',
             title: 'Panel 1',
         });
         paneview.addPanel({
             id: 'panel2',
-            component: 'testPanel',
+            component: 'default',
             title: 'Panel2',
         });
 
@@ -107,6 +143,8 @@ describe('componentPaneview', () => {
             })
         );
 
+        paneview.layout(600, 400);
+
         expect(panel1Dimensions).toEqual({ width: 600, height: 22 });
         expect(panel2Dimensions).toEqual({ width: 600, height: 22 });
 
@@ -142,11 +180,18 @@ describe('componentPaneview', () => {
 
     test('serialization', () => {
         const paneview = new PaneviewComponent(container, {
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
+        expect(container.querySelectorAll('.dv-pane-container').length).toBe(1);
+
         paneview.fromJSON({
             size: 6,
             views: [
@@ -154,7 +199,7 @@ describe('componentPaneview', () => {
                     size: 1,
                     data: {
                         id: 'panel1',
-                        component: 'testPanel',
+                        component: 'default',
                         title: 'Panel 1',
                     },
                     expanded: true,
@@ -163,7 +208,7 @@ describe('componentPaneview', () => {
                     size: 2,
                     data: {
                         id: 'panel2',
-                        component: 'testPanel',
+                        component: 'default',
                         title: 'Panel 2',
                     },
                     expanded: false,
@@ -172,13 +217,15 @@ describe('componentPaneview', () => {
                     size: 3,
                     data: {
                         id: 'panel3',
-                        component: 'testPanel',
+                        component: 'default',
                         title: 'Panel 3',
                     },
                 },
             ],
         });
 
+        expect(container.querySelectorAll('.dv-pane-container').length).toBe(1);
+
         paneview.layout(400, 800);
 
         const panel1 = paneview.getPanel('panel1');
@@ -218,31 +265,31 @@ describe('componentPaneview', () => {
                     size: 756,
                     data: {
                         id: 'panel1',
-                        component: 'testPanel',
+                        component: 'default',
                         title: 'Panel 1',
                     },
                     expanded: true,
-                    minimumSize: 100,
+                    headerSize: 22,
                 },
                 {
                     size: 22,
                     data: {
                         id: 'panel2',
-                        component: 'testPanel',
+                        component: 'default',
                         title: 'Panel 2',
                     },
                     expanded: false,
-                    minimumSize: 100,
+                    headerSize: 22,
                 },
                 {
                     size: 22,
                     data: {
                         id: 'panel3',
-                        component: 'testPanel',
+                        component: 'default',
                         title: 'Panel 3',
                     },
                     expanded: false,
-                    minimumSize: 100,
+                    headerSize: 22,
                 },
             ],
         });
@@ -250,20 +297,25 @@ describe('componentPaneview', () => {
 
     test('toJSON shouldnt fire any layout events', () => {
         const paneview = new PaneviewComponent(container, {
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
         paneview.layout(1000, 1000);
 
         paneview.addPanel({
             id: 'panel1',
-            component: 'testPanel',
+            component: 'default',
             title: 'Panel 1',
         });
         paneview.addPanel({
             id: 'panel2',
-            component: 'testPanel',
+            component: 'default',
             title: 'Panel 2',
         });
 
@@ -277,39 +329,15 @@ describe('componentPaneview', () => {
         disposable.dispose();
     });
 
-    test('dispose of paneviewComponent', () => {
-        expect(container.childNodes.length).toBe(0);
-
-        const paneview = new PaneviewComponent(container, {
-            components: {
-                testPanel: TestPanel,
-            },
-        });
-
-        paneview.layout(1000, 1000);
-
-        paneview.addPanel({
-            id: 'panel1',
-            component: 'testPanel',
-            title: 'Panel 1',
-        });
-        paneview.addPanel({
-            id: 'panel2',
-            component: 'testPanel',
-            title: 'Panel 2',
-        });
-
-        expect(container.childNodes.length).toBeGreaterThan(0);
-
-        paneview.dispose();
-
-        expect(container.childNodes.length).toBe(0);
-    });
-
     test('panel is disposed of when component is disposed', () => {
         const paneview = new PaneviewComponent(container, {
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
@@ -317,17 +345,17 @@ describe('componentPaneview', () => {
 
         paneview.addPanel({
             id: 'panel1',
-            component: 'testPanel',
+            component: 'default',
             title: 'Panel 1',
         });
         paneview.addPanel({
             id: 'panel2',
-            component: 'testPanel',
+            component: 'default',
             title: 'Panel 2',
         });
 
-        const panel1 = paneview.getPanel('panel1');
+        const panel1 = paneview.getPanel('panel1')!;
-        const panel2 = paneview.getPanel('panel2');
+        const panel2 = paneview.getPanel('panel2')!;
 
         const panel1Spy = jest.spyOn(panel1, 'dispose');
         const panel2Spy = jest.spyOn(panel2, 'dispose');
@@ -340,8 +368,13 @@ describe('componentPaneview', () => {
 
     test('panel is disposed of when removed', () => {
         const paneview = new PaneviewComponent(container, {
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
@@ -349,17 +382,17 @@ describe('componentPaneview', () => {
 
         paneview.addPanel({
             id: 'panel1',
-            component: 'testPanel',
+            component: 'default',
             title: 'Panel 1',
         });
         paneview.addPanel({
             id: 'panel2',
-            component: 'testPanel',
+            component: 'default',
             title: 'Panel 2',
         });
 
-        const panel1 = paneview.getPanel('panel1');
+        const panel1 = paneview.getPanel('panel1')!;
-        const panel2 = paneview.getPanel('panel2');
+        const panel2 = paneview.getPanel('panel2')!;
 
         const panel1Spy = jest.spyOn(panel1, 'dispose');
         const panel2Spy = jest.spyOn(panel2, 'dispose');
@@ -372,8 +405,13 @@ describe('componentPaneview', () => {
 
     test('panel is disposed of when fromJSON is called', () => {
         const paneview = new PaneviewComponent(container, {
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
@@ -381,17 +419,17 @@ describe('componentPaneview', () => {
 
         paneview.addPanel({
             id: 'panel1',
-            component: 'testPanel',
+            component: 'default',
             title: 'Panel 1',
         });
         paneview.addPanel({
             id: 'panel2',
-            component: 'testPanel',
+            component: 'default',
             title: 'Panel 2',
         });
 
-        const panel1 = paneview.getPanel('panel1');
+        const panel1 = paneview.getPanel('panel1')!;
-        const panel2 = paneview.getPanel('panel2');
+        const panel2 = paneview.getPanel('panel2')!;
 
         const panel1Spy = jest.spyOn(panel1, 'dispose');
         const panel2Spy = jest.spyOn(panel2, 'dispose');
@@ -401,4 +439,181 @@ describe('componentPaneview', () => {
         expect(panel1Spy).toHaveBeenCalledTimes(1);
         expect(panel2Spy).toHaveBeenCalledTimes(1);
     });
+
+    test('that fromJSON layouts are resized to the current dimensions', async () => {
+        const paneview = new PaneviewComponent(container, {
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+        });
+
+        paneview.layout(400, 600);
+
+        paneview.fromJSON({
+            size: 6,
+            views: [
+                {
+                    size: 1,
+                    data: {
+                        id: 'panel1',
+                        component: 'default',
+                        title: 'Panel 1',
+                    },
+                    minimumSize: 100,
+                    expanded: true,
+                },
+                {
+                    size: 2,
+                    data: {
+                        id: 'panel2',
+                        component: 'default',
+                        title: 'Panel 2',
+                    },
+                    expanded: true,
+                },
+                {
+                    size: 3,
+                    data: {
+                        id: 'panel3',
+                        component: 'default',
+                        title: 'Panel 3',
+                    },
+                    expanded: true,
+                },
+            ],
+        });
+
+        // heights slightly differ because header height isn't accounted for
+        expect(JSON.parse(JSON.stringify(paneview.toJSON()))).toEqual({
+            size: 600,
+            views: [
+                {
+                    size: 122,
+                    data: {
+                        id: 'panel1',
+                        component: 'default',
+                        title: 'Panel 1',
+                    },
+                    expanded: true,
+                    minimumSize: 100,
+                    headerSize: 22,
+                },
+                {
+                    size: 22,
+                    data: {
+                        id: 'panel2',
+                        component: 'default',
+                        title: 'Panel 2',
+                    },
+                    expanded: true,
+                    headerSize: 22,
+                },
+                {
+                    size: 456,
+                    data: {
+                        id: 'panel3',
+                        component: 'default',
+                        title: 'Panel 3',
+                    },
+                    expanded: true,
+                    headerSize: 22,
+                },
+            ],
+        });
+    });
+
+    test('that disableAutoResizing is false by default', () => {
+        const paneview = new PaneviewComponent(container, {
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+        });
+
+        expect(paneview.disableResizing).toBeFalsy();
+    });
+
+    test('that disableAutoResizing can be enabled', () => {
+        const paneview = new PaneviewComponent(container, {
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+            disableAutoResizing: true,
+        });
+
+        expect(paneview.disableResizing).toBeTruthy();
+    });
+
+    test('that setVisible toggles visiblity', () => {
+        const paneview = new PaneviewComponent(container, {
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+            disableAutoResizing: true,
+        });
+
+        paneview.layout(1000, 1000);
+
+        const panel1 = paneview.addPanel({
+            id: 'panel1',
+            component: 'default',
+            title: 'panel1',
+        });
+        const panel2 = paneview.addPanel({
+            id: 'panel2',
+            component: 'default',
+            title: 'panel2',
+        });
+
+        expect(panel1.api.isVisible).toBeTruthy();
+        expect(panel2.api.isVisible).toBeTruthy();
+
+        panel1.api.setVisible(false);
+        expect(panel1.api.isVisible).toBeFalsy();
+        expect(panel2.api.isVisible).toBeTruthy();
+
+        panel1.api.setVisible(true);
+        expect(panel1.api.isVisible).toBeTruthy();
+        expect(panel2.api.isVisible).toBeTruthy();
+    });
+
+    test('update className', () => {
+        const paneview = new PaneviewComponent(container, {
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+            disableAutoResizing: true,
+            className: 'test-a test-b',
+        });
+
+        expect(paneview.element.className).toBe('test-a test-b');
+
+        paneview.updateOptions({ className: 'test-b test-c' });
+
+        expect(paneview.element.className).toBe('test-b test-c');
+    });
 });

packages/dockview-core/src/__tests__/splitview/splitview.spec.ts

@@ -7,7 +7,7 @@ import {
     Sizing,
     Splitview,
 } from '../../splitview/splitview';
-
+import { fireEvent } from '@testing-library/dom';
 class Testview implements IView {
     private _element: HTMLElement = document.createElement('div');
     private _size = 0;
@@ -84,6 +84,8 @@ describe('splitview', () => {
     beforeEach(() => {
         container = document.createElement('div');
         container.className = 'container';
+
+        jest.clearAllMocks();
     });
 
     test('vertical splitview', () => {
@@ -94,7 +96,7 @@ describe('splitview', () => {
         expect(splitview.orientation).toBe(Orientation.HORIZONTAL);
 
         const viewQuery = container.querySelectorAll(
-            '.split-view-container horizontal'
+            '.dv-split-view-container dv-horizontal'
         );
         expect(viewQuery).toBeTruthy();
 
@@ -109,7 +111,7 @@ describe('splitview', () => {
         expect(splitview.orientation).toBe(Orientation.VERTICAL);
 
         const viewQuery = container.querySelectorAll(
-            '.split-view-container vertical'
+            '.dv-split-view-container dv-vertical'
         );
         expect(viewQuery).toBeTruthy();
 
@@ -126,48 +128,48 @@ describe('splitview', () => {
         splitview.addView(new Testview(50, 50));
 
         let viewQuery = container.querySelectorAll(
-            '.split-view-container > .view-container > .view'
+            '.dv-split-view-container > .dv-view-container > .dv-view'
         );
         expect(viewQuery.length).toBe(3);
 
         let sashQuery = container.querySelectorAll(
-            '.split-view-container > .sash-container > .sash'
+            '.dv-split-view-container > .dv-sash-container > .dv-sash'
         );
         expect(sashQuery.length).toBe(2);
 
         splitview.removeView(2);
 
         viewQuery = container.querySelectorAll(
-            '.split-view-container > .view-container > .view'
+            '.dv-split-view-container > .dv-view-container > .dv-view'
         );
         expect(viewQuery.length).toBe(2);
 
         sashQuery = container.querySelectorAll(
-            '.split-view-container > .sash-container > .sash'
+            '.dv-split-view-container > .dv-sash-container > .dv-sash'
         );
         expect(sashQuery.length).toBe(1);
 
         splitview.removeView(0);
 
         viewQuery = container.querySelectorAll(
-            '.split-view-container > .view-container > .view'
+            '.dv-split-view-container > .dv-view-container > .dv-view'
         );
         expect(viewQuery.length).toBe(1);
 
         sashQuery = container.querySelectorAll(
-            '.split-view-container > .sash-container > .sash'
+            '.dv-split-view-container > .dv-sash-container > .dv-sash'
         );
         expect(sashQuery.length).toBe(0);
 
         splitview.removeView(0);
 
         viewQuery = container.querySelectorAll(
-            '.split-view-container > .view-container > .view'
+            '.dv-split-view-container > .dv-view-container > .dv-view'
         );
         expect(viewQuery.length).toBe(0);
 
         sashQuery = container.querySelectorAll(
-            '.split-view-container > .sash-container > .sash'
+            '.dv-split-view-container > .dv-sash-container > .dv-sash'
         );
         expect(sashQuery.length).toBe(0);
 
@@ -186,14 +188,14 @@ describe('splitview', () => {
         splitview.addView(view2);
 
         let viewQuery = container.querySelectorAll(
-            '.split-view-container > .view-container > .view.visible'
+            '.dv-split-view-container > .dv-view-container > .dv-view.visible'
         );
         expect(viewQuery.length).toBe(2);
 
         splitview.setViewVisible(1, false);
 
         viewQuery = container.querySelectorAll(
-            '.split-view-container > .view-container > .view.visible'
+            '.dv-split-view-container > .dv-view-container > .dv-view.visible'
         );
         expect(viewQuery.length).toBe(1);
 
@@ -585,8 +587,315 @@ describe('splitview', () => {
 
         expect(container.childNodes.length).toBeGreaterThan(0);
 
-        splitview.dispose();
+        let anyEvents = false;
+        const listener = splitview.onDidRemoveView((e) => {
+            anyEvents = true; // disposing of the splitview shouldn't fire onDidRemoveView events
+        });
 
+        splitview.dispose();
+        listener.dispose();
+
+        expect(anyEvents).toBeFalsy();
         expect(container.childNodes.length).toBe(0);
     });
+
+    test('dnd: pointer events to move sash', () => {
+        const splitview = new Splitview(container, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: false,
+        });
+        splitview.layout(400, 500);
+
+        const view1 = new Testview(0, 1000);
+        const view2 = new Testview(0, 1000);
+
+        splitview.addView(view1);
+        splitview.addView(view2);
+
+        const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+        const removeEventListenerSpy = jest.spyOn(
+            document,
+            'removeEventListener'
+        );
+
+        const sashElement = container
+            .getElementsByClassName('dv-sash')
+            .item(0) as HTMLElement;
+
+        // validate the expected state before drag
+        expect([view1.size, view2.size]).toEqual([200, 200]);
+        expect(sashElement).toBeTruthy();
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('');
+
+        // start the drag event
+        fireEvent(
+            sashElement,
+            new MouseEvent('pointerdown', { clientX: 50, clientY: 100 })
+        );
+
+        expect(addEventListenerSpy).toBeCalledTimes(3);
+
+        // during a sash drag the views should have pointer-events disabled
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('none');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('none');
+
+        // expect a delta move of 70 - 50 = 20
+        fireEvent(
+            document,
+            new MouseEvent('pointermove', { clientX: 70, clientY: 110 })
+        );
+        expect([view1.size, view2.size]).toEqual([220, 180]);
+
+        // expect a delta move of 75 - 70 = 5
+        fireEvent(
+            document,
+            new MouseEvent('pointermove', { clientX: 75, clientY: 110 })
+        );
+        expect([view1.size, view2.size]).toEqual([225, 175]);
+
+        // end the drag event
+        fireEvent(
+            document,
+            new MouseEvent('pointerup', { clientX: 70, clientY: 110 })
+        );
+
+        expect(removeEventListenerSpy).toBeCalledTimes(3);
+
+        // expect pointer-eventes on views to be restored
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('');
+
+        fireEvent(
+            document,
+            new MouseEvent('pointermove', { clientX: 100, clientY: 100 })
+        );
+        // expect no additional resizes
+        expect([view1.size, view2.size]).toEqual([225, 175]);
+        // expect no additional document listeners
+        expect(addEventListenerSpy).toBeCalledTimes(3);
+        expect(removeEventListenerSpy).toBeCalledTimes(3);
+    });
+
+    test('setViewVisible', () => {
+        const splitview = new Splitview(container, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: false,
+        });
+        splitview.layout(900, 500);
+
+        const view1 = new Testview(0, 1000);
+        const view2 = new Testview(0, 1000);
+        const view3 = new Testview(0, 1000);
+
+        splitview.addView(view1);
+        splitview.addView(view2);
+        splitview.addView(view3);
+
+        expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]);
+
+        splitview.setViewVisible(0, false);
+        expect([view1.size, view2.size, view3.size]).toEqual([0, 300, 600]);
+
+        splitview.setViewVisible(0, true);
+        expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]);
+    });
+
+    test('setViewVisible with one view having high layout priority', () => {
+        const splitview = new Splitview(container, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: false,
+        });
+        splitview.layout(900, 500);
+
+        const view1 = new Testview(0, 1000);
+        const view2 = new Testview(0, 1000, LayoutPriority.High);
+        const view3 = new Testview(0, 1000);
+
+        splitview.addView(view1);
+        splitview.addView(view2);
+        splitview.addView(view3);
+
+        expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]);
+
+        splitview.setViewVisible(0, false);
+        expect([view1.size, view2.size, view3.size]).toEqual([0, 600, 300]);
+
+        splitview.setViewVisible(0, true);
+        expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]);
+    });
+
+    test('set view size', () => {
+        const splitview = new Splitview(container, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: false,
+        });
+        splitview.layout(900, 500);
+
+        const view1 = new Testview(0, 1000);
+        const view2 = new Testview(0, 1000);
+        const view3 = new Testview(0, 1000);
+
+        splitview.addView(view1);
+        splitview.addView(view2);
+        splitview.addView(view3);
+
+        expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]);
+
+        view1.fireChangeEvent({ size: 0 });
+        expect([view1.size, view2.size, view3.size]).toEqual([0, 300, 600]);
+
+        view1.fireChangeEvent({ size: 300 });
+        expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]);
+    });
+
+    test('set view size with one view having high layout priority', () => {
+        const splitview = new Splitview(container, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: false,
+        });
+        splitview.layout(900, 500);
+
+        const view1 = new Testview(0, 1000);
+        const view2 = new Testview(0, 1000, LayoutPriority.High);
+        const view3 = new Testview(0, 1000);
+
+        splitview.addView(view1);
+        splitview.addView(view2);
+        splitview.addView(view3);
+
+        expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]);
+
+        view1.fireChangeEvent({ size: 0 });
+        expect([view1.size, view2.size, view3.size]).toEqual([0, 600, 300]);
+
+        view1.fireChangeEvent({ size: 300 });
+        expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]);
+    });
+
+    test('that margins are applied to view sizing', () => {
+        const splitview = new Splitview(container, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: false,
+            margin: 24,
+        });
+        splitview.layout(924, 500);
+
+        const view1 = new Testview(0, 1000);
+        const view2 = new Testview(0, 1000);
+        const view3 = new Testview(0, 1000);
+        const view4 = new Testview(0, 1000);
+
+        splitview.addView(view1);
+        expect([view1.size]).toEqual([924]);
+
+        splitview.addView(view2);
+        expect([view1.size, view2.size]).toEqual([450, 450]); // 450 + 24 + 450  = 924
+
+        splitview.addView(view3);
+        expect([view1.size, view2.size, view3.size]).toEqual([292, 292, 292]); // 292 + 24 + 292 + 24 + 292 = 924
+
+        splitview.addView(view4);
+        expect([view1.size, view2.size, view3.size, view4.size]).toEqual([
+            213, 213, 213, 213,
+        ]); // 213 + 24 + 213 + 24 + 213 + 24 + 213 = 924
+
+        let viewQuery = Array.from(
+            container
+                .querySelectorAll(
+                    '.dv-split-view-container > .dv-view-container > .dv-view'
+                )
+                .entries()
+        )
+            .map(([i, e]) => e as HTMLElement)
+            .map((e) => ({
+                left: e.style.left,
+                top: e.style.top,
+                height: e.style.height,
+                width: e.style.width,
+            }));
+
+        let sashQuery = Array.from(
+            container
+                .querySelectorAll(
+                    '.dv-split-view-container > .dv-sash-container > .dv-sash'
+                )
+                .entries()
+        )
+            .map(([i, e]) => e as HTMLElement)
+            .map((e) => ({
+                left: e.style.left,
+                top: e.style.top,
+            }));
+
+        // check HTMLElement positions since these are the ones that really matter
+
+        expect(viewQuery).toEqual([
+            { left: '0px', top: '', width: '213px', height: '' },
+            // 213 + 24 = 237
+            { left: '237px', top: '', width: '213px', height: '' },
+            // 237 + 213 + 24 = 474
+            { left: '474px', top: '', width: '213px', height: '' },
+            // 474 + 213 + 24 = 474
+            { left: '711px', top: '', width: '213px', height: '' },
+            // 711 + 213 = 924
+        ]);
+
+        // 924 / 4 = 231 view size
+        // 231 - (24*3/4) = 213 margin adjusted view size
+        // 213 - 4/2 + 24/2 = 223
+        expect(sashQuery).toEqual([
+            // 213 - 4/2 + 24/2 = 223
+            { left: '223px', top: '0px' },
+            // 213 + 24 + 213 = 450
+            // 450 - 4/2 + 24/2 = 460
+            { left: '460px', top: '0px' },
+            // 213 + 24 + 213 + 24 + 213 = 687
+            // 687 - 4/2 + 24/2 = 697
+            { left: '697px', top: '0px' },
+        ]);
+
+        splitview.setViewVisible(0, false);
+
+        viewQuery = Array.from(
+            container
+                .querySelectorAll(
+                    '.dv-split-view-container > .dv-view-container > .dv-view'
+                )
+                .entries()
+        )
+            .map(([i, e]) => e as HTMLElement)
+            .map((e) => ({
+                left: e.style.left,
+                top: e.style.top,
+                height: e.style.height,
+                width: e.style.width,
+            }));
+
+        sashQuery = Array.from(
+            container
+                .querySelectorAll(
+                    '.dv-split-view-container > .dv-sash-container > .dv-sash'
+                )
+                .entries()
+        )
+            .map(([i, e]) => e as HTMLElement)
+            .map((e) => ({
+                left: e.style.left,
+                top: e.style.top,
+            }));
+
+        expect(viewQuery).toEqual([
+            { left: '0px', top: '', width: '0px', height: '' },
+            { left: '0px', top: '', width: '215px', height: '' },
+            { left: '239px', top: '', width: '215px', height: '' },
+            { left: '478px', top: '', width: '446px', height: '' },
+        ]);
+
+        expect(sashQuery).toEqual([
+            { left: '0px', top: '0px' },
+            { left: '225px', top: '0px' },
+            { left: '464px', top: '0px' },
+        ]);
+    });
 });

packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts

@@ -1,4 +1,5 @@
 import { PanelDimensionChangeEvent } from '../../api/panelApi';
+import { Emitter } from '../../events';
 import { CompositeDisposable } from '../../lifecycle';
 import { Orientation } from '../../splitview/splitview';
 import { SplitviewComponent } from '../../splitview/splitviewComponent';
@@ -25,22 +26,93 @@ describe('componentSplitview', () => {
         container.className = 'container';
     });
 
-    test('remove panel', () => {
+    test('that the container is not removed when grid is disposed', () => {
+        const root = document.createElement('div');
+        const container = document.createElement('div');
+        root.appendChild(container);
+
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.VERTICAL,
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+        });
+
+        splitview.dispose();
+
+        expect(container.parentElement).toBe(root);
+        expect(container.children.length).toBe(0);
+    });
+
+    test('event leakage', () => {
+        Emitter.setLeakageMonitorEnabled(true);
+
+        const splitview = new SplitviewComponent(container, {
+            orientation: Orientation.VERTICAL,
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
         splitview.layout(600, 400);
 
-        splitview.addPanel({ id: 'panel1', component: 'testPanel' });
+        const panel1 = splitview.addPanel({
-        splitview.addPanel({ id: 'panel2', component: 'testPanel' });
+            id: 'panel1',
-        splitview.addPanel({ id: 'panel3', component: 'testPanel' });
+            component: 'default',
+        });
+        const panel2 = splitview.addPanel({
+            id: 'panel2',
+            component: 'default',
+        });
 
-        const panel1 = splitview.getPanel('panel1');
+        splitview.movePanel(0, 1);
-        const panel2 = splitview.getPanel('panel2');
+
-        const panel3 = splitview.getPanel('panel3');
+        splitview.removePanel(panel1);
+
+        splitview.dispose();
+
+        if (Emitter.MEMORY_LEAK_WATCHER.size > 0) {
+            for (const entry of Array.from(
+                Emitter.MEMORY_LEAK_WATCHER.events
+            )) {
+                console.log(entry[1]);
+            }
+            throw new Error('not all listeners disposed');
+        }
+
+        Emitter.setLeakageMonitorEnabled(false);
+    });
+
+    test('remove panel', () => {
+        const splitview = new SplitviewComponent(container, {
+            orientation: Orientation.VERTICAL,
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+        });
+        splitview.layout(600, 400);
+
+        splitview.addPanel({ id: 'panel1', component: 'default' });
+        splitview.addPanel({ id: 'panel2', component: 'default' });
+        splitview.addPanel({ id: 'panel3', component: 'default' });
+
+        const panel1 = splitview.getPanel('panel1')!;
+        const panel2 = splitview.getPanel('panel2')!;
+        const panel3 = splitview.getPanel('panel3')!;
 
         expect(panel1.api.isActive).toBeFalsy();
         expect(panel2.api.isActive).toBeFalsy();
@@ -63,8 +135,13 @@ describe('componentSplitview', () => {
     test('horizontal dimensions', () => {
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.HORIZONTAL,
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
         splitview.layout(600, 400);
@@ -76,8 +153,13 @@ describe('componentSplitview', () => {
     test('vertical dimensions', () => {
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.VERTICAL,
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
         splitview.layout(600, 400);
@@ -89,19 +171,24 @@ describe('componentSplitview', () => {
     test('api resize', () => {
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.VERTICAL,
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
         splitview.layout(400, 600);
-        splitview.addPanel({ id: 'panel1', component: 'testPanel' });
+        splitview.addPanel({ id: 'panel1', component: 'default' });
-        splitview.addPanel({ id: 'panel2', component: 'testPanel' });
+        splitview.addPanel({ id: 'panel2', component: 'default' });
-        splitview.addPanel({ id: 'panel3', component: 'testPanel' });
+        splitview.addPanel({ id: 'panel3', component: 'default' });
 
-        const panel1 = splitview.getPanel('panel1');
+        const panel1 = splitview.getPanel('panel1')!;
-        const panel2 = splitview.getPanel('panel2');
+        const panel2 = splitview.getPanel('panel2')!;
-        const panel3 = splitview.getPanel('panel3');
+        const panel3 = splitview.getPanel('panel3')!;
 
         expect(panel1.width).toBe(400);
         expect(panel1.height).toBe(200);
@@ -141,13 +228,18 @@ describe('componentSplitview', () => {
     test('api', () => {
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.HORIZONTAL,
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
         splitview.layout(600, 400);
-        splitview.addPanel({ id: 'panel1', component: 'testPanel' });
+        splitview.addPanel({ id: 'panel1', component: 'default' });
 
         const panel1 = splitview.getPanel('panel1');
 
@@ -158,7 +250,7 @@ describe('componentSplitview', () => {
         // expect(panel1?.api.isFocused).toBeFalsy();
         expect(panel1!.api.isVisible).toBeTruthy();
 
-        splitview.addPanel({ id: 'panel2', component: 'testPanel' });
+        splitview.addPanel({ id: 'panel2', component: 'default' });
 
         const panel2 = splitview.getPanel('panel2');
 
@@ -182,15 +274,20 @@ describe('componentSplitview', () => {
 
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.VERTICAL,
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
-        splitview.layout(600, 400);
+        splitview.layout(300, 200);
 
-        splitview.addPanel({ id: 'panel1', component: 'testPanel' });
+        splitview.addPanel({ id: 'panel1', component: 'default' });
-        splitview.addPanel({ id: 'panel2', component: 'testPanel' });
+        splitview.addPanel({ id: 'panel2', component: 'default' });
 
         const panel1 = splitview.getPanel('panel1') as SplitviewPanel;
         const panel2 = splitview.getPanel('panel2') as SplitviewPanel;
@@ -209,6 +306,8 @@ describe('componentSplitview', () => {
             })
         );
 
+        splitview.layout(600, 400);
+
         expect(panel1Dimensions).toEqual({ width: 600, height: 200 });
         expect(panel2Dimensions).toEqual({ width: 600, height: 200 });
 
@@ -231,15 +330,20 @@ describe('componentSplitview', () => {
 
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.HORIZONTAL,
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
-        splitview.layout(600, 400);
+        splitview.layout(300, 200);
 
-        splitview.addPanel({ id: 'panel1', component: 'testPanel' });
+        splitview.addPanel({ id: 'panel1', component: 'default' });
-        splitview.addPanel({ id: 'panel2', component: 'testPanel' });
+        splitview.addPanel({ id: 'panel2', component: 'default' });
 
         const panel1 = splitview.getPanel('panel1') as SplitviewPanel;
         const panel2 = splitview.getPanel('panel2') as SplitviewPanel;
@@ -258,6 +362,8 @@ describe('componentSplitview', () => {
             })
         );
 
+        splitview.layout(600, 400);
+
         expect(panel1Dimensions).toEqual({ width: 300, height: 400 });
         expect(panel2Dimensions).toEqual({ width: 300, height: 400 });
 
@@ -278,48 +384,61 @@ describe('componentSplitview', () => {
     test('serialization', () => {
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.VERTICAL,
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
-        splitview.layout(600, 400);
+        splitview.layout(400, 6);
+
+        expect(
+            container.querySelectorAll('.dv-split-view-container').length
+        ).toBe(1);
 
         splitview.fromJSON({
             views: [
                 {
                     size: 1,
-                    data: { id: 'panel1', component: 'testPanel' },
+                    data: { id: 'panel1', component: 'default' },
                     snap: false,
                 },
                 {
                     size: 2,
-                    data: { id: 'panel2', component: 'testPanel' },
+                    data: { id: 'panel2', component: 'default' },
                     snap: true,
                 },
-                { size: 3, data: { id: 'panel3', component: 'testPanel' } },
+                { size: 3, data: { id: 'panel3', component: 'default' } },
             ],
             size: 6,
             orientation: Orientation.VERTICAL,
             activeView: 'panel1',
         });
 
+        expect(
+            container.querySelectorAll('.dv-split-view-container').length
+        ).toBe(1);
+
         expect(splitview.length).toBe(3);
 
         expect(JSON.parse(JSON.stringify(splitview.toJSON()))).toEqual({
             views: [
                 {
                     size: 1,
-                    data: { id: 'panel1', component: 'testPanel' },
+                    data: { id: 'panel1', component: 'default' },
                     snap: false,
                 },
                 {
                     size: 2,
-                    data: { id: 'panel2', component: 'testPanel' },
+                    data: { id: 'panel2', component: 'default' },
                     snap: true,
                 },
                 {
                     size: 3,
-                    data: { id: 'panel3', component: 'testPanel' },
+                    data: { id: 'panel3', component: 'default' },
                     snap: false,
                 },
             ],
@@ -332,8 +451,13 @@ describe('componentSplitview', () => {
     test('toJSON shouldnt fire any layout events', () => {
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.HORIZONTAL,
-            components: {
+            createComponent: (options) => {
-                testPanel: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
@@ -341,11 +465,11 @@ describe('componentSplitview', () => {
 
         splitview.addPanel({
             id: 'panel1',
-            component: 'testPanel',
+            component: 'default',
         });
         splitview.addPanel({
             id: 'panel2',
-            component: 'testPanel',
+            component: 'default',
         });
 
         const disposable = splitview.onDidLayoutChange(() => {
@@ -358,39 +482,16 @@ describe('componentSplitview', () => {
         disposable.dispose();
     });
 
-    test('dispose of splitviewComponent', () => {
-        expect(container.childNodes.length).toBe(0);
-
-        const splitview = new SplitviewComponent(container, {
-            orientation: Orientation.HORIZONTAL,
-            components: {
-                testPanel: TestPanel,
-            },
-        });
-
-        splitview.layout(1000, 1000);
-
-        splitview.addPanel({
-            id: 'panel1',
-            component: 'testPanel',
-        });
-        splitview.addPanel({
-            id: 'panel2',
-            component: 'testPanel',
-        });
-
-        expect(container.childNodes.length).toBeGreaterThan(0);
-
-        splitview.dispose();
-
-        expect(container.childNodes.length).toBe(0);
-    });
-
     test('panel is disposed of when component is disposed', () => {
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.HORIZONTAL,
-            components: {
+            createComponent: (options) => {
-                default: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
@@ -405,8 +506,8 @@ describe('componentSplitview', () => {
             component: 'default',
         });
 
-        const panel1 = splitview.getPanel('panel1');
+        const panel1 = splitview.getPanel('panel1')!;
-        const panel2 = splitview.getPanel('panel2');
+        const panel2 = splitview.getPanel('panel2')!;
 
         const panel1Spy = jest.spyOn(panel1, 'dispose');
         const panel2Spy = jest.spyOn(panel2, 'dispose');
@@ -420,8 +521,13 @@ describe('componentSplitview', () => {
     test('panel is disposed of when removed', () => {
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.HORIZONTAL,
-            components: {
+            createComponent: (options) => {
-                default: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
@@ -436,8 +542,8 @@ describe('componentSplitview', () => {
             component: 'default',
         });
 
-        const panel1 = splitview.getPanel('panel1');
+        const panel1 = splitview.getPanel('panel1')!;
-        const panel2 = splitview.getPanel('panel2');
+        const panel2 = splitview.getPanel('panel2')!;
 
         const panel1Spy = jest.spyOn(panel1, 'dispose');
         const panel2Spy = jest.spyOn(panel2, 'dispose');
@@ -451,8 +557,13 @@ describe('componentSplitview', () => {
     test('panel is disposed of when fromJSON is called', () => {
         const splitview = new SplitviewComponent(container, {
             orientation: Orientation.HORIZONTAL,
-            components: {
+            createComponent: (options) => {
-                default: TestPanel,
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
             },
         });
 
@@ -467,8 +578,8 @@ describe('componentSplitview', () => {
             component: 'default',
         });
 
-        const panel1 = splitview.getPanel('panel1');
+        const panel1 = splitview.getPanel('panel1')!;
-        const panel2 = splitview.getPanel('panel2');
+        const panel2 = splitview.getPanel('panel2')!;
 
         const panel1Spy = jest.spyOn(panel1, 'dispose');
         const panel2Spy = jest.spyOn(panel2, 'dispose');
@@ -482,4 +593,151 @@ describe('componentSplitview', () => {
         expect(panel1Spy).toHaveBeenCalledTimes(1);
         expect(panel2Spy).toHaveBeenCalledTimes(1);
     });
+
+    test('that fromJSON layouts are resized to the current dimensions', async () => {
+        const splitview = new SplitviewComponent(container, {
+            orientation: Orientation.VERTICAL,
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+        });
+        splitview.layout(400, 600);
+
+        splitview.fromJSON({
+            views: [
+                {
+                    size: 1,
+                    data: { id: 'panel1', component: 'default' },
+                    snap: false,
+                },
+                {
+                    size: 2,
+                    data: { id: 'panel2', component: 'default' },
+                    snap: true,
+                },
+                { size: 3, data: { id: 'panel3', component: 'default' } },
+            ],
+            size: 6,
+            orientation: Orientation.VERTICAL,
+            activeView: 'panel1',
+        });
+
+        expect(JSON.parse(JSON.stringify(splitview.toJSON()))).toEqual({
+            views: [
+                {
+                    size: 100,
+                    data: { id: 'panel1', component: 'default' },
+                    snap: false,
+                },
+                {
+                    size: 200,
+                    data: { id: 'panel2', component: 'default' },
+                    snap: true,
+                },
+                {
+                    size: 300,
+                    data: { id: 'panel3', component: 'default' },
+                    snap: false,
+                },
+            ],
+            size: 600,
+            orientation: Orientation.VERTICAL,
+            activeView: 'panel1',
+        });
+    });
+
+    test('that disableAutoResizing is false by default', () => {
+        const splitview = new SplitviewComponent(container, {
+            orientation: Orientation.VERTICAL,
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+        });
+
+        expect(splitview.disableResizing).toBeFalsy();
+    });
+
+    test('that disableAutoResizing can be enabled', () => {
+        const splitview = new SplitviewComponent(container, {
+            orientation: Orientation.VERTICAL,
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+            disableAutoResizing: true,
+        });
+
+        expect(splitview.disableResizing).toBeTruthy();
+    });
+
+    test('that setVisible toggles visiblity', () => {
+        const splitview = new SplitviewComponent(container, {
+            orientation: Orientation.HORIZONTAL,
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+        });
+
+        splitview.layout(1000, 1000);
+
+        const panel1 = splitview.addPanel({
+            id: 'panel1',
+            component: 'default',
+        });
+        const panel2 = splitview.addPanel({
+            id: 'panel2',
+            component: 'default',
+        });
+
+        expect(panel1.api.isVisible).toBeTruthy();
+        expect(panel2.api.isVisible).toBeTruthy();
+
+        panel1.api.setVisible(false);
+        expect(panel1.api.isVisible).toBeFalsy();
+        expect(panel2.api.isVisible).toBeTruthy();
+
+        panel1.api.setVisible(true);
+        expect(panel1.api.isVisible).toBeTruthy();
+        expect(panel2.api.isVisible).toBeTruthy();
+    });
+
+    test('update className', () => {
+        const splitview = new SplitviewComponent(container, {
+            orientation: Orientation.HORIZONTAL,
+            createComponent: (options) => {
+                switch (options.name) {
+                    case 'default':
+                        return new TestPanel(options.id, options.name);
+                    default:
+                        throw new Error('unsupported');
+                }
+            },
+            className: 'test-a test-b',
+        });
+
+        expect(splitview.element.className).toBe('test-a test-b');
+
+        splitview.updateOptions({ className: 'test-b test-c' });
+
+        expect(splitview.element.className).toBe('test-b test-c');
+    });
 });

packages/dockview-core/src/api/component.api.ts

@@ -1,13 +1,20 @@
 import {
-    DockviewDropEvent,
+    DockviewMaximizedGroupChanged,
+    FloatingGroupOptions,
     IDockviewComponent,
+    MovePanelEvent,
+    PopoutGroupChangePositionEvent,
+    PopoutGroupChangeSizeEvent,
     SerializedDockview,
 } from '../dockview/dockviewComponent';
 import {
     AddGroupOptions,
     AddPanelOptions,
+    DockviewComponentOptions,
+    DockviewDndOverlayEvent,
     MovementOptions,
 } from '../dockview/options';
+import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
 import {
     AddComponentOptions,
@@ -26,7 +33,6 @@ import {
     AddSplitviewComponentOptions,
     ISplitviewComponent,
     SerializedSplitview,
-    SplitviewComponentUpdateOptions,
 } from '../splitview/splitviewComponent';
 import { IView, Orientation, Sizing } from '../splitview/splitview';
 import { ISplitviewPanel } from '../splitview/splitviewPanel';
@@ -34,9 +40,25 @@ import {
     DockviewGroupPanel,
     IDockviewGroupPanel,
 } from '../dockview/dockviewGroupPanel';
-import { Emitter, Event } from '../events';
+import { Event } from '../events';
 import { IDockviewPanel } from '../dockview/dockviewPanel';
-import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
+import { PaneviewDidDropEvent } from '../paneview/draggablePaneviewPanel';
+import {
+    GroupDragEvent,
+    TabDragEvent,
+} from '../dockview/components/titlebar/tabsContainer';
+import { Box } from '../types';
+import {
+    DockviewDidDropEvent,
+    DockviewWillDropEvent,
+} from '../dockview/dockviewGroupPanelModel';
+import { WillShowOverlayLocationEvent } from '../dockview/events';
+import {
+    PaneviewComponentOptions,
+    PaneviewDndOverlayEvent,
+} from '../paneview/options';
+import { SplitviewComponentOptions } from '../splitview/options';
+import { GridviewComponentOptions } from '../gridview/options';
 
 export interface CommonApi<T = any> {
     readonly height: number;
@@ -48,236 +70,413 @@ export interface CommonApi<T = any> {
     fromJSON(data: T): void;
     toJSON(): T;
     clear(): void;
+    dispose(): void;
 }
 
 export class SplitviewApi implements CommonApi<SerializedSplitview> {
+    /**
+     * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+     */
     get minimumSize(): number {
         return this.component.minimumSize;
     }
 
+    /**
+     * The maximum size the component can reach where size is measured in the direction of orientation provided.
+     */
     get maximumSize(): number {
         return this.component.maximumSize;
     }
 
-    get height(): number {
+    /**
-        return this.component.height;
+     * Width of the component.
-    }
+     */
-
     get width(): number {
         return this.component.width;
     }
 
+    /**
+     * Height of the component.
+     */
+    get height(): number {
+        return this.component.height;
+    }
+    /**
+     * The current number of panels.
+     */
     get length(): number {
         return this.component.length;
     }
 
+    /**
+     * The current orientation of the component.
+     */
     get orientation(): Orientation {
         return this.component.orientation;
     }
 
+    /**
+     * The list of current panels.
+     */
     get panels(): ISplitviewPanel[] {
         return this.component.panels;
     }
 
+    /**
+     * Invoked after a layout is loaded through the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void> {
         return this.component.onDidLayoutFromJSON;
     }
 
+    /**
+     * Invoked whenever any aspect of the layout changes.
+     * If listening to this event it may be worth debouncing ouputs.
+     */
     get onDidLayoutChange(): Event<void> {
         return this.component.onDidLayoutChange;
     }
 
+    /**
+     * Invoked when a view is added.
+     */
     get onDidAddView(): Event<IView> {
         return this.component.onDidAddView;
     }
 
+    /**
+     * Invoked when a view is removed.
+     */
     get onDidRemoveView(): Event<IView> {
         return this.component.onDidRemoveView;
     }
 
     constructor(private readonly component: ISplitviewComponent) {}
 
-    updateOptions(options: SplitviewComponentUpdateOptions): void {
+    /**
-        this.component.updateOptions(options);
+     * Removes an existing panel and optionally provide a `Sizing` method
-    }
+     * for the subsequent resize.
-
+     */
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void {
         this.component.removePanel(panel, sizing);
     }
 
+    /**
+     * Focus the component.
+     */
     focus(): void {
         this.component.focus();
     }
 
+    /**
+     * Get the reference to a panel given it's `string` id.
+     */
     getPanel(id: string): ISplitviewPanel | undefined {
         return this.component.getPanel(id);
     }
 
+    /**
+     * Layout the panel with a width and height.
+     */
     layout(width: number, height: number): void {
         return this.component.layout(width, height);
     }
 
-    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel {
+    /**
+     * Add a new panel and return the created instance.
+     */
+    addPanel<T extends object = Parameters>(
+        options: AddSplitviewComponentOptions<T>
+    ): ISplitviewPanel {
         return this.component.addPanel(options);
     }
 
+    /**
+     * Move a panel given it's current and desired index.
+     */
     movePanel(from: number, to: number): void {
         this.component.movePanel(from, to);
     }
 
+    /**
+     * Deserialize a layout to built a splitivew.
+     */
     fromJSON(data: SerializedSplitview): void {
         this.component.fromJSON(data);
     }
 
+    /** Serialize a layout */
     toJSON(): SerializedSplitview {
         return this.component.toJSON();
     }
 
+    /**
+     * Remove all panels and clear the component.
+     */
     clear(): void {
         this.component.clear();
     }
+
+    /**
+     * Update configuratable options.
+     */
+    updateOptions(options: Partial<SplitviewComponentOptions>): void {
+        this.component.updateOptions(options);
+    }
+
+    /**
+     * Release resources and teardown component. Do not call when using framework versions of dockview.
+     */
+    dispose(): void {
+        this.component.dispose();
+    }
 }
 
 export class PaneviewApi implements CommonApi<SerializedPaneview> {
+    /**
+     * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+     */
     get minimumSize(): number {
         return this.component.minimumSize;
     }
 
+    /**
+     * The maximum size the component can reach where size is measured in the direction of orientation provided.
+     */
     get maximumSize(): number {
         return this.component.maximumSize;
     }
 
-    get height(): number {
+    /**
-        return this.component.height;
+     * Width of the component.
-    }
+     */
-
     get width(): number {
         return this.component.width;
     }
 
+    /**
+     * Height of the component.
+     */
+    get height(): number {
+        return this.component.height;
+    }
+
+    /**
+     * All panel objects.
+     */
     get panels(): IPaneviewPanel[] {
         return this.component.panels;
     }
 
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void> {
         return this.component.onDidLayoutChange;
     }
 
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void> {
         return this.component.onDidLayoutFromJSON;
     }
 
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddView(): Event<IPaneviewPanel> {
         return this.component.onDidAddView;
     }
 
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemoveView(): Event<IPaneviewPanel> {
         return this.component.onDidRemoveView;
     }
 
-    get onDidDrop(): Event<PaneviewDropEvent> {
+    /**
-        const emitter = new Emitter<PaneviewDropEvent>();
+     * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+     */
+    get onDidDrop(): Event<PaneviewDidDropEvent> {
+        return this.component.onDidDrop;
+    }
 
-        const disposable = this.component.onDidDrop((e) => {
+    get onUnhandledDragOverEvent(): Event<PaneviewDndOverlayEvent> {
-            emitter.fire({ ...e, api: this });
+        return this.component.onUnhandledDragOverEvent;
-        });
-
-        emitter.dispose = () => {
-            disposable.dispose();
-            emitter.dispose();
-        };
-
-        return emitter.event;
     }
 
     constructor(private readonly component: IPaneviewComponent) {}
 
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel: IPaneviewPanel): void {
         this.component.removePanel(panel);
     }
 
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IPaneviewPanel | undefined {
         return this.component.getPanel(id);
     }
 
+    /**
+     * Move a panel given it's current and desired index.
+     */
     movePanel(from: number, to: number): void {
         this.component.movePanel(from, to);
     }
 
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus(): void {
         this.component.focus();
     }
 
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number): void {
         this.component.layout(width, height);
     }
 
-    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel {
+    /**
+     * Add a panel and return the created object.
+     */
+    addPanel<T extends object = Parameters>(
+        options: AddPaneviewComponentOptions<T>
+    ): IPaneviewPanel {
         return this.component.addPanel(options);
     }
 
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedPaneview): void {
         this.component.fromJSON(data);
     }
 
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedPaneview {
         return this.component.toJSON();
     }
 
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void {
         this.component.clear();
     }
+
+    /**
+     * Update configuratable options.
+     */
+    updateOptions(options: Partial<PaneviewComponentOptions>): void {
+        this.component.updateOptions(options);
+    }
+
+    /**
+     * Release resources and teardown component. Do not call when using framework versions of dockview.
+     */
+    dispose(): void {
+        this.component.dispose();
+    }
 }
 
 export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
-    get minimumHeight(): number {
+    /**
-        return this.component.minimumHeight;
+     * Width of the component.
-    }
+     */
-
-    get maximumHeight(): number {
-        return this.component.maximumHeight;
-    }
-
-    get minimumWidth(): number {
-        return this.component.minimumWidth;
-    }
-
-    get maximumWidth(): number {
-        return this.component.maximumWidth;
-    }
-
     get width(): number {
         return this.component.width;
     }
 
+    /**
+     * Height of the component.
+     */
     get height(): number {
         return this.component.height;
     }
 
+    /**
+     * Minimum height of the component.
+     */
+    get minimumHeight(): number {
+        return this.component.minimumHeight;
+    }
+
+    /**
+     * Maximum height of the component.
+     */
+    get maximumHeight(): number {
+        return this.component.maximumHeight;
+    }
+
+    /**
+     * Minimum width of the component.
+     */
+    get minimumWidth(): number {
+        return this.component.minimumWidth;
+    }
+
+    /**
+     * Maximum width of the component.
+     */
+    get maximumWidth(): number {
+        return this.component.maximumWidth;
+    }
+
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void> {
         return this.component.onDidLayoutChange;
     }
 
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddPanel(): Event<IGridviewPanel> {
         return this.component.onDidAddGroup;
     }
 
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemovePanel(): Event<IGridviewPanel> {
         return this.component.onDidRemoveGroup;
     }
 
+    /**
+     * Invoked when the active panel changes. May be undefined if no panel is active.
+     */
     get onDidActivePanelChange(): Event<IGridviewPanel | undefined> {
         return this.component.onDidActiveGroupChange;
     }
 
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void> {
         return this.component.onDidLayoutFromJSON;
     }
 
+    /**
+     * All panel objects.
+     */
     get panels(): IGridviewPanel[] {
         return this.component.groups;
     }
 
+    /**
+     * Current orientation. Can be changed after initialization.
+     */
     get orientation(): Orientation {
         return this.component.orientation;
     }
@@ -288,22 +487,39 @@ export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
 
     constructor(private readonly component: IGridviewComponent) {}
 
+    /**
+     *  Focus the component. Will try to focus an active panel if one exists.
+     */
     focus(): void {
         this.component.focus();
     }
 
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number, force = false): void {
         this.component.layout(width, height, force);
     }
 
-    addPanel(options: AddComponentOptions): IGridviewPanel {
+    /**
+     * Add a panel and return the created object.
+     */
+    addPanel<T extends object = Parameters>(
+        options: AddComponentOptions<T>
+    ): IGridviewPanel {
         return this.component.addPanel(options);
     }
 
+    /**
+     * Remove a panel given the panel object.
+     */
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void {
         this.component.removePanel(panel, sizing);
     }
 
+    /**
+     * Move a panel in a particular direction relative to another panel.
+     */
     movePanel(
         panel: IGridviewPanel,
         options: { direction: Direction; reference: string; size?: number }
@@ -311,171 +527,411 @@ export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
         this.component.movePanel(panel, options);
     }
 
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IGridviewPanel | undefined {
         return this.component.getPanel(id);
     }
 
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedGridviewComponent): void {
         return this.component.fromJSON(data);
     }
 
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedGridviewComponent {
         return this.component.toJSON();
     }
 
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void {
         this.component.clear();
     }
+
+    updateOptions(options: Partial<GridviewComponentOptions>) {
+        this.component.updateOptions(options);
+    }
+
+    /**
+     * Release resources and teardown component. Do not call when using framework versions of dockview.
+     */
+    dispose(): void {
+        this.component.dispose();
+    }
 }
 
 export class DockviewApi implements CommonApi<SerializedDockview> {
+    /**
+     * The unique identifier for this instance. Used to manage scope of Drag'n'Drop events.
+     */
     get id(): string {
         return this.component.id;
     }
 
+    /**
+     * Width of the component.
+     */
     get width(): number {
         return this.component.width;
     }
 
+    /**
+     * Height of the component.
+     */
     get height(): number {
         return this.component.height;
     }
 
+    /**
+     * Minimum height of the component.
+     */
     get minimumHeight(): number {
         return this.component.minimumHeight;
     }
 
+    /**
+     * Maximum height of the component.
+     */
     get maximumHeight(): number {
         return this.component.maximumHeight;
     }
 
+    /**
+     * Minimum width of the component.
+     */
     get minimumWidth(): number {
         return this.component.minimumWidth;
     }
 
+    /**
+     * Maximum width of the component.
+     */
     get maximumWidth(): number {
         return this.component.maximumWidth;
     }
 
+    /**
+     * Total number of groups.
+     */
     get size(): number {
         return this.component.size;
     }
 
+    /**
+     * Total number of panels.
+     */
     get totalPanels(): number {
         return this.component.totalPanels;
     }
 
+    /**
+     * Invoked when the active group changes. May be undefined if no group is active.
+     */
     get onDidActiveGroupChange(): Event<DockviewGroupPanel | undefined> {
         return this.component.onDidActiveGroupChange;
     }
 
+    /**
+     * Invoked when a group is added. May be called multiple times when moving groups.
+     */
     get onDidAddGroup(): Event<DockviewGroupPanel> {
         return this.component.onDidAddGroup;
     }
 
+    /**
+     * Invoked when a group is removed. May be called multiple times when moving groups.
+     */
     get onDidRemoveGroup(): Event<DockviewGroupPanel> {
         return this.component.onDidRemoveGroup;
     }
 
+    /**
+     * Invoked when the active panel changes. May be undefined if no panel is active.
+     */
     get onDidActivePanelChange(): Event<IDockviewPanel | undefined> {
         return this.component.onDidActivePanelChange;
     }
 
+    /**
+     * Invoked when a panel is added. May be called multiple times when moving panels.
+     */
     get onDidAddPanel(): Event<IDockviewPanel> {
         return this.component.onDidAddPanel;
     }
 
+    /**
+     * Invoked when a panel is removed. May be called multiple times when moving panels.
+     */
     get onDidRemovePanel(): Event<IDockviewPanel> {
         return this.component.onDidRemovePanel;
     }
 
+    get onDidMovePanel(): Event<MovePanelEvent> {
+        return this.component.onDidMovePanel;
+    }
+
+    /**
+     * Invoked after a layout is deserialzied using the `fromJSON` method.
+     */
     get onDidLayoutFromJSON(): Event<void> {
         return this.component.onDidLayoutFromJSON;
     }
 
+    /**
+     * Invoked when any layout change occures, an aggregation of many events.
+     */
     get onDidLayoutChange(): Event<void> {
         return this.component.onDidLayoutChange;
     }
 
-    get onDidDrop(): Event<DockviewDropEvent> {
+    /**
+     * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
+     */
+    get onDidDrop(): Event<DockviewDidDropEvent> {
         return this.component.onDidDrop;
     }
 
+    /**
+     * Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and
+     * prevent the event from occuring using the standard `preventDefault()` syntax.
+     *
+     * Preventing certain events may causes unexpected behaviours, use carefully.
+     */
+    get onWillDrop(): Event<DockviewWillDropEvent> {
+        return this.component.onWillDrop;
+    }
+
+    /**
+     * Invoked before an overlay is shown indicating a drop target.
+     *
+     * Calling `event.preventDefault()` will prevent the overlay being shown and prevent
+     * the any subsequent drop event.
+     */
+    get onWillShowOverlay(): Event<WillShowOverlayLocationEvent> {
+        return this.component.onWillShowOverlay;
+    }
+
+    /**
+     * Invoked before a group is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the group drag starting.
+     *
+     */
+    get onWillDragGroup(): Event<GroupDragEvent> {
+        return this.component.onWillDragGroup;
+    }
+
+    /**
+     * Invoked before a panel is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
+     */
+    get onWillDragPanel(): Event<TabDragEvent> {
+        return this.component.onWillDragPanel;
+    }
+
+    get onUnhandledDragOverEvent(): Event<DockviewDndOverlayEvent> {
+        return this.component.onUnhandledDragOverEvent;
+    }
+
+    get onDidPopoutGroupSizeChange(): Event<PopoutGroupChangeSizeEvent> {
+        return this.component.onDidPopoutGroupSizeChange;
+    }
+
+    get onDidPopoutGroupPositionChange(): Event<PopoutGroupChangePositionEvent> {
+        return this.component.onDidPopoutGroupPositionChange;
+    }
+
+    get onDidOpenPopoutWindowFail(): Event<void> {
+        return this.component.onDidOpenPopoutWindowFail;
+    }
+
+    /**
+     * All panel objects.
+     */
     get panels(): IDockviewPanel[] {
         return this.component.panels;
     }
 
+    /**
+     * All group objects.
+     */
     get groups(): DockviewGroupPanel[] {
         return this.component.groups;
     }
 
+    /**
+     *  Active panel object.
+     */
     get activePanel(): IDockviewPanel | undefined {
         return this.component.activePanel;
     }
 
+    /**
+     * Active group object.
+     */
     get activeGroup(): DockviewGroupPanel | undefined {
         return this.component.activeGroup;
     }
 
     constructor(private readonly component: IDockviewComponent) {}
 
-    getTabHeight(): number | undefined {
+    /**
-        return this.component.tabHeight;
+     *  Focus the component. Will try to focus an active panel if one exists.
-    }
+     */
-
-    setTabHeight(height: number | undefined): void {
-        this.component.tabHeight = height;
-    }
-
     focus(): void {
         this.component.focus();
     }
 
+    /**
+     * Get a panel object given a `string` id. May return `undefined`.
+     */
     getPanel(id: string): IDockviewPanel | undefined {
         return this.component.getGroupPanel(id);
     }
 
+    /**
+     * Force resize the component to an exact width and height. Read about auto-resizing before using.
+     */
     layout(width: number, height: number, force = false): void {
         this.component.layout(width, height, force);
     }
 
-    addPanel(options: AddPanelOptions): IDockviewPanel {
+    /**
+     * Add a panel and return the created object.
+     */
+    addPanel<T extends object = Parameters>(
+        options: AddPanelOptions<T>
+    ): IDockviewPanel {
         return this.component.addPanel(options);
     }
 
-    addGroup(options?: AddGroupOptions): IDockviewGroupPanel {
+    /**
+     * Remove a panel given the panel object.
+     */
+    removePanel(panel: IDockviewPanel): void {
+        this.component.removePanel(panel);
+    }
+
+    /**
+     * Add a group and return the created object.
+     */
+    addGroup(options?: AddGroupOptions): DockviewGroupPanel {
         return this.component.addGroup(options);
     }
 
-    moveToNext(options?: MovementOptions): void {
+    /**
-        this.component.moveToNext(options);
+     * Close all groups and panels.
-    }
+     */
-
-    moveToPrevious(options?: MovementOptions): void {
-        this.component.moveToPrevious(options);
-    }
-
     closeAllGroups(): void {
         return this.component.closeAllGroups();
     }
 
+    /**
+     * Remove a group and any panels within the group.
+     */
     removeGroup(group: IDockviewGroupPanel): void {
         this.component.removeGroup(<DockviewGroupPanel>group);
     }
 
-    getGroup(id: string): DockviewGroupPanel | undefined {
+    /**
+     * Get a group object given a `string` id. May return undefined.
+     */
+    getGroup(id: string): IDockviewGroupPanel | undefined {
         return this.component.getPanel(id);
     }
 
+    /**
+     * Add a floating group
+     */
+    addFloatingGroup(
+        item: IDockviewPanel | DockviewGroupPanel,
+        options?: FloatingGroupOptions
+    ): void {
+        return this.component.addFloatingGroup(item, options);
+    }
+
+    /**
+     * Create a component from a serialized object.
+     */
     fromJSON(data: SerializedDockview): void {
         this.component.fromJSON(data);
     }
 
+    /**
+     * Create a serialized object of the current component.
+     */
     toJSON(): SerializedDockview {
         return this.component.toJSON();
     }
 
+    /**
+     * Reset the component back to an empty and default state.
+     */
     clear(): void {
         this.component.clear();
     }
+
+    /**
+     * Move the focus progmatically to the next panel or group.
+     */
+    moveToNext(options?: MovementOptions): void {
+        this.component.moveToNext(options);
+    }
+
+    /**
+     * Move the focus progmatically to the previous panel or group.
+     */
+    moveToPrevious(options?: MovementOptions): void {
+        this.component.moveToPrevious(options);
+    }
+
+    maximizeGroup(panel: IDockviewPanel): void {
+        this.component.maximizeGroup(panel.group);
+    }
+
+    hasMaximizedGroup(): boolean {
+        return this.component.hasMaximizedGroup();
+    }
+
+    exitMaximizedGroup(): void {
+        this.component.exitMaximizedGroup();
+    }
+
+    get onDidMaximizedGroupChange(): Event<DockviewMaximizedGroupChanged> {
+        return this.component.onDidMaximizedGroupChange;
+    }
+
+    /**
+     * Add a popout group in a new Window
+     */
+    addPopoutGroup(
+        item: IDockviewPanel | DockviewGroupPanel,
+        options?: {
+            position?: Box;
+            popoutUrl?: string;
+            onDidOpen?: (event: { id: string; window: Window }) => void;
+            onWillClose?: (event: { id: string; window: Window }) => void;
+        }
+    ): Promise<boolean> {
+        return this.component.addPopoutGroup(item, options);
+    }
+
+    updateOptions(options: Partial<DockviewComponentOptions>) {
+        this.component.updateOptions(options);
+    }
+
+    /**
+     * Release resources and teardown component. Do not call when using framework versions of dockview.
+     */
+    dispose(): void {
+        this.component.dispose();
+    }
 }

packages/dockview-core/src/api/dockviewGroupPanelApi.ts

@@ -0,0 +1,145 @@
+import { Position, positionToDirection } from '../dnd/droptarget';
+import { DockviewComponent } from '../dockview/dockviewComponent';
+import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
+import {
+    DockviewGroupChangeEvent,
+    DockviewGroupLocation,
+} from '../dockview/dockviewGroupPanelModel';
+import { Emitter, Event } from '../events';
+import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
+
+export interface DockviewGroupMoveParams {
+    group?: DockviewGroupPanel;
+    position?: Position;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
+    /**
+     * Whether to skip setting the group as active after moving
+     */
+    skipSetActive?: boolean;
+}
+
+export interface DockviewGroupPanelApi extends GridviewPanelApi {
+    readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
+    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
+    readonly location: DockviewGroupLocation;
+    /**
+     * If you require the Window object
+     */
+    getWindow(): Window;
+    moveTo(options: DockviewGroupMoveParams): void;
+    maximize(): void;
+    isMaximized(): boolean;
+    exitMaximized(): void;
+    close(): void;
+}
+
+export interface DockviewGroupPanelFloatingChangeEvent {
+    readonly location: DockviewGroupLocation;
+}
+
+const NOT_INITIALIZED_MESSAGE =
+    'dockview: DockviewGroupPanelApiImpl not initialized';
+
+export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
+    private _group: DockviewGroupPanel | undefined;
+
+    readonly _onDidLocationChange =
+        new Emitter<DockviewGroupPanelFloatingChangeEvent>();
+    readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent> =
+        this._onDidLocationChange.event;
+
+    readonly _onDidActivePanelChange = new Emitter<DockviewGroupChangeEvent>();
+    readonly onDidActivePanelChange = this._onDidActivePanelChange.event;
+
+    get location(): DockviewGroupLocation {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        return this._group.model.location;
+    }
+
+    constructor(id: string, private readonly accessor: DockviewComponent) {
+        super(id, '__dockviewgroup__');
+
+        this.addDisposables(
+            this._onDidLocationChange,
+            this._onDidActivePanelChange
+        );
+    }
+
+    close(): void {
+        if (!this._group) {
+            return;
+        }
+        return this.accessor.removeGroup(this._group);
+    }
+
+    getWindow(): Window {
+        return this.location.type === 'popout'
+            ? this.location.getWindow()
+            : window;
+    }
+
+    moveTo(options: DockviewGroupMoveParams): void {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+
+        const group =
+            options.group ??
+            this.accessor.addGroup({
+                direction: positionToDirection(options.position ?? 'right'),
+                skipSetActive: options.skipSetActive ?? false,
+            });
+
+        this.accessor.moveGroupOrPanel({
+            from: { groupId: this._group.id },
+            to: {
+                group,
+                position: options.group
+                    ? options.position ?? 'center'
+                    : 'center',
+                index: options.index,
+            },
+            skipSetActive: options.skipSetActive,
+        });
+    }
+
+    maximize(): void {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+
+        if (this.location.type !== 'grid') {
+            // only grid groups can be maximized
+            return;
+        }
+
+        this.accessor.maximizeGroup(this._group);
+    }
+
+    isMaximized(): boolean {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+
+        return this.accessor.isMaximizedGroup(this._group);
+    }
+
+    exitMaximized(): void {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+
+        if (this.isMaximized()) {
+            this.accessor.exitMaximizedGroup();
+        }
+    }
+
+    initialize(group: DockviewGroupPanel): void {
+        this._group = group;
+    }
+}

packages/dockview-core/src/api/dockviewPanelApi.ts

@@ -1,29 +1,67 @@
 import { Emitter, Event } from '../events';
 import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
-import { MutableDisposable } from '../lifecycle';
+import { CompositeDisposable, MutableDisposable } from '../lifecycle';
-import { IDockviewPanel } from '../dockview/dockviewPanel';
+import { DockviewPanel } from '../dockview/dockviewPanel';
+import { DockviewComponent } from '../dockview/dockviewComponent';
+import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
+import {
+    DockviewGroupMoveParams,
+    DockviewGroupPanelFloatingChangeEvent,
+} from './dockviewGroupPanelApi';
+import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 
 export interface TitleEvent {
     readonly title: string;
 }
 
-/*
+export interface RendererChangedEvent {
- * omit visibility modifiers since the visibility of a single group doesn't make sense
+    readonly renderer: DockviewPanelRenderer;
- * because it belongs to a groupview
+}
- */
+
+export interface ActiveGroupEvent {
+    readonly isActive: boolean;
+}
+
+export interface GroupChangedEvent {
+    // empty
+}
+
+export type DockviewPanelMoveParams = DockviewGroupMoveParams;
+
 export interface DockviewPanelApi
     extends Omit<
         GridviewPanelApi,
+        // omit properties that do not make sense here
         'setVisible' | 'onDidConstraintsChange' | 'setConstraints'
     > {
+    /**
+     * The id of the tab component renderer
+     *
+     * Undefined if no custom tab renderer is provided
+     */
+    readonly tabComponent: string | undefined;
     readonly group: DockviewGroupPanel;
     readonly isGroupActive: boolean;
-    readonly title: string;
+    readonly renderer: DockviewPanelRenderer;
-    readonly onDidActiveGroupChange: Event<void>;
+    readonly title: string | undefined;
-    readonly onDidGroupChange: Event<void>;
+    readonly onDidActiveGroupChange: Event<ActiveGroupEvent>;
+    readonly onDidGroupChange: Event<GroupChangedEvent>;
+    readonly onDidTitleChange: Event<TitleEvent>;
+    readonly onDidRendererChange: Event<RendererChangedEvent>;
+    readonly location: DockviewGroupLocation;
+    readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
     close(): void;
     setTitle(title: string): void;
+    setRenderer(renderer: DockviewPanelRenderer): void;
+    moveTo(options: DockviewPanelMoveParams): void;
+    maximize(): void;
+    isMaximized(): boolean;
+    exitMaximized(): void;
+    /**
+     * If you require the Window object
+     */
+    getWindow(): Window;
 }
 
 export class DockviewPanelApiImpl
@@ -31,41 +69,56 @@ export class DockviewPanelApiImpl
     implements DockviewPanelApi
 {
     private _group: DockviewGroupPanel;
+    private readonly _tabComponent: string | undefined;
 
     readonly _onDidTitleChange = new Emitter<TitleEvent>();
     readonly onDidTitleChange = this._onDidTitleChange.event;
 
-    private readonly _onDidActiveGroupChange = new Emitter<void>();
+    private readonly _onDidActiveGroupChange = new Emitter<ActiveGroupEvent>();
     readonly onDidActiveGroupChange = this._onDidActiveGroupChange.event;
 
-    private readonly _onDidGroupChange = new Emitter<void>();
+    private readonly _onDidGroupChange = new Emitter<GroupChangedEvent>();
     readonly onDidGroupChange = this._onDidGroupChange.event;
 
-    private readonly disposable = new MutableDisposable();
+    readonly _onDidRendererChange = new Emitter<RendererChangedEvent>();
+    readonly onDidRendererChange = this._onDidRendererChange.event;
 
-    get title(): string {
+    private readonly _onDidLocationChange =
+        new Emitter<DockviewGroupPanelFloatingChangeEvent>();
+    readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent> =
+        this._onDidLocationChange.event;
+
+    private readonly groupEventsDisposable = new MutableDisposable();
+
+    get location(): DockviewGroupLocation {
+        return this.group.api.location;
+    }
+
+    get title(): string | undefined {
         return this.panel.title;
     }
 
     get isGroupActive(): boolean {
-        return !!this.group?.isActive;
+        return this.group.isActive;
+    }
+
+    get renderer(): DockviewPanelRenderer {
+        return this.panel.renderer;
     }
 
     set group(value: DockviewGroupPanel) {
-        const isOldGroupActive = this.isGroupActive;
+        const oldGroup = this._group;
 
-        this._group = value;
+        if (this._group !== value) {
+            this._group = value;
 
-        this._onDidGroupChange.fire();
+            this._onDidGroupChange.fire({});
 
-        if (this._group) {
+            this.setupGroupEventListeners(oldGroup);
-            this.disposable.value = this._group.api.onDidActiveChange(() => {
+
-                this._onDidActiveGroupChange.fire();
+            this._onDidLocationChange.fire({
+                location: this.group.api.location,
             });
-
-            if (this.isGroupActive !== isOldGroupActive) {
-                this._onDidActiveGroupChange.fire();
-            }
         }
     }
 
@@ -73,26 +126,112 @@ export class DockviewPanelApiImpl
         return this._group;
     }
 
-    constructor(private panel: IDockviewPanel, group: DockviewGroupPanel) {
+    get tabComponent(): string | undefined {
-        super(panel.id);
+        return this._tabComponent;
+    }
+
+    constructor(
+        private readonly panel: DockviewPanel,
+        group: DockviewGroupPanel,
+        private readonly accessor: DockviewComponent,
+        component: string,
+        tabComponent?: string
+    ) {
+        super(panel.id, component);
+
+        this._tabComponent = tabComponent;
 
         this.initialize(panel);
 
         this._group = group;
+        this.setupGroupEventListeners();
 
         this.addDisposables(
-            this.disposable,
+            this.groupEventsDisposable,
+            this._onDidRendererChange,
             this._onDidTitleChange,
             this._onDidGroupChange,
-            this._onDidActiveGroupChange
+            this._onDidActiveGroupChange,
+            this._onDidLocationChange
         );
     }
 
-    public setTitle(title: string): void {
+    getWindow(): Window {
-        this.panel.update({ params: { title } });
+        return this.group.api.getWindow();
     }
 
-    public close(): void {
+    moveTo(options: DockviewPanelMoveParams): void {
+        this.accessor.moveGroupOrPanel({
+            from: { groupId: this._group.id, panelId: this.panel.id },
+            to: {
+                group: options.group ?? this._group,
+                position: options.group
+                    ? options.position ?? 'center'
+                    : 'center',
+                index: options.index,
+            },
+            skipSetActive: options.skipSetActive,
+        });
+    }
+
+    setTitle(title: string): void {
+        this.panel.setTitle(title);
+    }
+
+    setRenderer(renderer: DockviewPanelRenderer): void {
+        this.panel.setRenderer(renderer);
+    }
+
+    close(): void {
         this.group.model.closePanel(this.panel);
     }
+
+    maximize(): void {
+        this.group.api.maximize();
+    }
+
+    isMaximized(): boolean {
+        return this.group.api.isMaximized();
+    }
+
+    exitMaximized(): void {
+        this.group.api.exitMaximized();
+    }
+
+    private setupGroupEventListeners(previousGroup?: DockviewGroupPanel) {
+        let _trackGroupActive = previousGroup?.isActive ?? false; // prevent duplicate events with same state
+
+        this.groupEventsDisposable.value = new CompositeDisposable(
+            this.group.api.onDidVisibilityChange((event) => {
+                const hasBecomeHidden = !event.isVisible && this.isVisible;
+                const hasBecomeVisible = event.isVisible && !this.isVisible;
+
+                const isActivePanel = this.group.model.isPanelActive(
+                    this.panel
+                );
+
+                if (hasBecomeHidden || (hasBecomeVisible && isActivePanel)) {
+                    this._onDidVisibilityChange.fire(event);
+                }
+            }),
+            this.group.api.onDidLocationChange((event) => {
+                if (this.group !== this.panel.group) {
+                    return;
+                }
+                this._onDidLocationChange.fire(event);
+            }),
+            this.group.api.onDidActiveChange(() => {
+                if (this.group !== this.panel.group) {
+                    return;
+                }
+
+                if (_trackGroupActive !== this.isGroupActive) {
+                    _trackGroupActive = this.isGroupActive;
+                    this._onDidActiveGroupChange.fire({
+                        isActive: this.isGroupActive,
+                    });
+                }
+            })
+        );
+    }
 }

packages/dockview-core/src/api/entryPoints.ts

@@ -0,0 +1,46 @@
+import {
+    DockviewApi,
+    GridviewApi,
+    PaneviewApi,
+    SplitviewApi,
+} from '../api/component.api';
+import { DockviewComponent } from '../dockview/dockviewComponent';
+import { DockviewComponentOptions } from '../dockview/options';
+import { GridviewComponent } from '../gridview/gridviewComponent';
+import { GridviewComponentOptions } from '../gridview/options';
+import { PaneviewComponentOptions } from '../paneview/options';
+import { PaneviewComponent } from '../paneview/paneviewComponent';
+import { SplitviewComponentOptions } from '../splitview/options';
+import { SplitviewComponent } from '../splitview/splitviewComponent';
+
+export function createDockview(
+    element: HTMLElement,
+    options: DockviewComponentOptions
+): DockviewApi {
+    const component = new DockviewComponent(element, options);
+    return component.api;
+}
+
+export function createSplitview(
+    element: HTMLElement,
+    options: SplitviewComponentOptions
+): SplitviewApi {
+    const component = new SplitviewComponent(element, options);
+    return new SplitviewApi(component);
+}
+
+export function createGridview(
+    element: HTMLElement,
+    options: GridviewComponentOptions
+): GridviewApi {
+    const component = new GridviewComponent(element, options);
+    return new GridviewApi(component);
+}
+
+export function createPaneview(
+    element: HTMLElement,
+    options: PaneviewComponentOptions
+): PaneviewApi {
+    const component = new PaneviewComponent(element, options);
+    return new PaneviewApi(component);
+}

packages/dockview-core/src/api/gridviewPanelApi.ts

@@ -37,17 +37,15 @@ export class GridviewPanelApiImpl
     readonly onDidConstraintsChangeInternal: Event<GridConstraintChangeEvent2> =
         this._onDidConstraintsChangeInternal.event;
 
-    readonly _onDidConstraintsChange = new Emitter<GridConstraintChangeEvent>({
+    readonly _onDidConstraintsChange = new Emitter<GridConstraintChangeEvent>();
-        replay: true,
-    });
     readonly onDidConstraintsChange: Event<GridConstraintChangeEvent> =
         this._onDidConstraintsChange.event;
 
     private readonly _onDidSizeChange = new Emitter<SizeEvent>();
     readonly onDidSizeChange: Event<SizeEvent> = this._onDidSizeChange.event;
 
-    constructor(id: string, panel?: IPanel) {
+    constructor(id: string, component: string, panel?: IPanel) {
-        super(id);
+        super(id, component);
 
         this.addDisposables(
             this._onDidConstraintsChangeInternal,

packages/dockview-core/src/api/panelApi.ts

@@ -1,4 +1,4 @@
-import { Emitter, Event } from '../events';
+import { DockviewEvent, Emitter, Event } from '../events';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { IPanel, Parameters } from '../panel/types';
 
@@ -24,9 +24,14 @@ export interface PanelApi {
     readonly onDidFocusChange: Event<FocusEvent>;
     readonly onDidVisibilityChange: Event<VisibilityEvent>;
     readonly onDidActiveChange: Event<ActiveEvent>;
-    setVisible(isVisible: boolean): void;
+    readonly onDidParametersChange: Event<Parameters>;
     setActive(): void;
+    setVisible(isVisible: boolean): void;
     updateParameters(parameters: Parameters): void;
+    /**
+     * The id of the component renderer
+     */
+    readonly component: string;
     /**
      * The id of the panel that would have been assigned when the panel was created
      */
@@ -51,6 +56,16 @@ export interface PanelApi {
      * The panel height in pixels
      */
     readonly height: number;
+
+    readonly onWillFocus: Event<WillFocusEvent>;
+
+    getParameters<T extends Parameters = Parameters>(): T;
+}
+
+export class WillFocusEvent extends DockviewEvent {
+    constructor() {
+        super();
+    }
 }
 
 /**
@@ -62,79 +77,62 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
     private _isVisible = true;
     private _width = 0;
     private _height = 0;
+    private _parameters: Parameters = {};
 
     private readonly panelUpdatesDisposable = new MutableDisposable();
 
-    readonly _onDidDimensionChange = new Emitter<PanelDimensionChangeEvent>({
+    readonly _onDidDimensionChange = new Emitter<PanelDimensionChangeEvent>();
-        replay: true,
-    });
     readonly onDidDimensionsChange = this._onDidDimensionChange.event;
-    //
+
-    readonly _onDidChangeFocus = new Emitter<FocusEvent>({
+    readonly _onDidChangeFocus = new Emitter<FocusEvent>();
-        replay: true,
-    });
     readonly onDidFocusChange: Event<FocusEvent> = this._onDidChangeFocus.event;
     //
-    readonly _onFocusEvent = new Emitter<void>();
+    readonly _onWillFocus = new Emitter<WillFocusEvent>();
-    readonly onFocusEvent: Event<void> = this._onFocusEvent.event;
+    readonly onWillFocus: Event<WillFocusEvent> = this._onWillFocus.event;
     //
-    readonly _onDidVisibilityChange = new Emitter<VisibilityEvent>({
+    readonly _onDidVisibilityChange = new Emitter<VisibilityEvent>();
-        replay: true,
-    });
     readonly onDidVisibilityChange: Event<VisibilityEvent> =
         this._onDidVisibilityChange.event;
-    //
 
-    readonly _onVisibilityChange = new Emitter<VisibilityEvent>();
+    readonly _onWillVisibilityChange = new Emitter<VisibilityEvent>();
-    readonly onVisibilityChange: Event<VisibilityEvent> =
+    readonly onWillVisibilityChange: Event<VisibilityEvent> =
-        this._onVisibilityChange.event;
+        this._onWillVisibilityChange.event;
-    //
+
-    readonly _onDidActiveChange = new Emitter<ActiveEvent>({
+    readonly _onDidActiveChange = new Emitter<ActiveEvent>();
-        replay: true,
-    });
     readonly onDidActiveChange: Event<ActiveEvent> =
         this._onDidActiveChange.event;
-    //
+
     readonly _onActiveChange = new Emitter<void>();
     readonly onActiveChange: Event<void> = this._onActiveChange.event;
-    //
-    readonly _onUpdateParameters = new Emitter<Parameters>();
-    readonly onUpdateParameters: Event<Parameters> =
-        this._onUpdateParameters.event;
-    //
 
-    get isFocused() {
+    readonly _onDidParametersChange = new Emitter<Parameters>();
+    readonly onDidParametersChange: Event<Parameters> =
+        this._onDidParametersChange.event;
+
+    get isFocused(): boolean {
         return this._isFocused;
     }
 
-    get isActive() {
+    get isActive(): boolean {
         return this._isActive;
     }
-    get isVisible() {
+
+    get isVisible(): boolean {
         return this._isVisible;
     }
 
-    get width() {
+    get width(): number {
         return this._width;
     }
 
-    get height() {
+    get height(): number {
         return this._height;
     }
 
-    constructor(readonly id: string) {
+    constructor(readonly id: string, readonly component: string) {
         super();
 
         this.addDisposables(
-            this.panelUpdatesDisposable,
-            this._onDidDimensionChange,
-            this._onDidChangeFocus,
-            this._onDidVisibilityChange,
-            this._onDidActiveChange,
-            this._onFocusEvent,
-            this._onActiveChange,
-            this._onVisibilityChange,
-            this._onUpdateParameters,
             this.onDidFocusChange((event) => {
                 this._isFocused = event.isFocused;
             }),
@@ -147,24 +145,37 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
             this.onDidDimensionsChange((event) => {
                 this._width = event.width;
                 this._height = event.height;
-            })
+            }),
+            this.panelUpdatesDisposable,
+            this._onDidDimensionChange,
+            this._onDidChangeFocus,
+            this._onDidVisibilityChange,
+            this._onDidActiveChange,
+            this._onWillFocus,
+            this._onActiveChange,
+            this._onWillFocus,
+            this._onWillVisibilityChange,
+            this._onDidParametersChange
         );
     }
 
+    getParameters<T extends Parameters = Parameters>(): T {
+        return this._parameters as T;
+    }
+
     public initialize(panel: IPanel): void {
-        this.panelUpdatesDisposable.value = this._onUpdateParameters.event(
+        this.panelUpdatesDisposable.value = this._onDidParametersChange.event(
             (parameters) => {
+                this._parameters = parameters;
                 panel.update({
-                    params: {
+                    params: parameters,
-                        params: parameters,
-                    },
                 });
             }
         );
     }
 
-    setVisible(isVisible: boolean) {
+    setVisible(isVisible: boolean): void {
-        this._onVisibilityChange.fire({ isVisible });
+        this._onWillVisibilityChange.fire({ isVisible });
     }
 
     setActive(): void {
@@ -172,10 +183,6 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
     }
 
     updateParameters(parameters: Parameters): void {
-        this._onUpdateParameters.fire(parameters);
+        this._onDidParametersChange.fire(parameters);
-    }
-
-    dispose() {
-        super.dispose();
     }
 }

packages/dockview-core/src/api/paneviewPanelApi.ts

@@ -35,8 +35,8 @@ export class PaneviewPanelApiImpl
         this._pane = pane;
     }
 
-    constructor(id: string) {
+    constructor(id: string, component: string) {
-        super(id);
+        super(id, component);
 
         this.addDisposables(
             this._onDidExpansionChange,

packages/dockview-core/src/api/splitviewPanelApi.ts

@@ -45,8 +45,8 @@ export class SplitviewPanelApiImpl
         this._onDidSizeChange.event;
     //
 
-    constructor(id: string) {
+    constructor(id: string, component: string) {
-        super(id);
+        super(id, component);
 
         this.addDisposables(
             this._onDidConstraintsChangeInternal,

packages/dockview-core/src/array.ts

@@ -61,3 +61,13 @@ export function firstIndex<T>(
 
     return -1;
 }
+
+export function remove<T>(array: T[], value: T): boolean {
+    const index = array.findIndex((t) => t === value);
+
+    if (index > -1) {
+        array.splice(index, 1);
+        return true;
+    }
+    return false;
+}

packages/dockview-core/src/constants.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
+
+export const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
+
+export const DESERIALIZATION_POPOUT_DELAY_MS = 100

packages/dockview-core/src/dnd/abstractDragHandler.ts

@@ -1,4 +1,4 @@
-import { getElementsByTagName } from '../dom';
+import { disableIframePointEvents } from '../dom';
 import { addDisposableListener, Emitter } from '../events';
 import {
     CompositeDisposable,
@@ -7,63 +7,77 @@ import {
 } from '../lifecycle';
 
 export abstract class DragHandler extends CompositeDisposable {
-    private readonly disposable = new MutableDisposable();
+    private readonly dataDisposable = new MutableDisposable();
+    private readonly pointerEventsDisposable = new MutableDisposable();
 
-    private readonly _onDragStart = new Emitter<void>();
+    private readonly _onDragStart = new Emitter<DragEvent>();
     readonly onDragStart = this._onDragStart.event;
 
-    private iframes: HTMLElement[] = [];
-
     constructor(protected readonly el: HTMLElement) {
         super();
+
+        this.addDisposables(
+            this._onDragStart,
+            this.dataDisposable,
+            this.pointerEventsDisposable
+        );
+
         this.configure();
     }
 
-    abstract getData(dataTransfer?: DataTransfer | null): IDisposable;
+    abstract getData(event: DragEvent): IDisposable;
+
+    protected isCancelled(_event: DragEvent): boolean {
+        return false;
+    }
 
     private configure(): void {
         this.addDisposables(
             this._onDragStart,
             addDisposableListener(this.el, 'dragstart', (event) => {
-                this.iframes = [
+                if (event.defaultPrevented || this.isCancelled(event)) {
-                    ...getElementsByTagName('iframe'),
+                    event.preventDefault();
-                    ...getElementsByTagName('webview'),
+                    return;
-                ];
-
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'none';
                 }
 
+                const iframes = disableIframePointEvents();
+
+                this.pointerEventsDisposable.value = {
+                    dispose: () => {
+                        iframes.release();
+                    },
+                };
+
                 this.el.classList.add('dv-dragged');
                 setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
 
-                this.disposable.value = this.getData(event.dataTransfer);
+                this.dataDisposable.value = this.getData(event);
+                this._onDragStart.fire(event);
 
                 if (event.dataTransfer) {
                     event.dataTransfer.effectAllowed = 'move';
 
-                    /**
+                    const hasData = event.dataTransfer.items.length > 0;
-                     * Although this is not used by dockview many third party dnd libraries will check
+
-                     * dataTransfer.types to determine valid drag events.
+                    if (!hasData) {
-                     *
+                        /**
-                     * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
+                         * Although this is not used by dockview many third party dnd libraries will check
-                     * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
+                         * dataTransfer.types to determine valid drag events.
-                     * dnd logic. You can see the code at
+                         *
-                     * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                         * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                     */
+                         * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                    event.dataTransfer.setData(
+                         * dnd logic. You can see the code at
-                        'text/plain',
+                     P    * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                        '__dockview_internal_drag_event__'
+                         */
-                    );
+                        event.dataTransfer.setData('text/plain', '');
+                    }
                 }
             }),
             addDisposableListener(this.el, 'dragend', () => {
-                for (const iframe of this.iframes) {
+                this.pointerEventsDisposable.dispose();
-                    iframe.style.pointerEvents = 'auto';
+                setTimeout(() => {
-                }
+                    this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
-                this.iframes = [];
+                }, 0);
-
-                this.disposable.dispose();
             })
         );
     }

packages/dockview-core/src/dnd/dataTransfer.ts

@@ -1,7 +1,5 @@
 class TransferObject {
-    constructor() {
+    // intentionally empty class
-        //
-    }
 }
 
 export class PanelTransfer extends TransferObject {

packages/dockview-core/src/dnd/dnd.ts

@@ -13,22 +13,51 @@ export class DragAndDropObserver extends CompositeDisposable {
     private target: EventTarget | null = null;
 
     constructor(
-        private element: HTMLElement,
+        private readonly element: HTMLElement,
-        private callbacks: IDragAndDropObserverCallbacks
+        private readonly callbacks: IDragAndDropObserverCallbacks
     ) {
         super();
 
         this.registerListeners();
     }
 
+    onDragEnter(e: DragEvent): void {
+        this.target = e.target;
+        this.callbacks.onDragEnter(e);
+    }
+
+    onDragOver(e: DragEvent): void {
+        e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
+
+        if (this.callbacks.onDragOver) {
+            this.callbacks.onDragOver(e);
+        }
+    }
+
+    onDragLeave(e: DragEvent): void {
+        if (this.target === e.target) {
+            this.target = null;
+
+            this.callbacks.onDragLeave(e);
+        }
+    }
+
+    onDragEnd(e: DragEvent): void {
+        this.target = null;
+        this.callbacks.onDragEnd(e);
+    }
+
+    onDrop(e: DragEvent): void {
+        this.callbacks.onDrop(e);
+    }
+
     private registerListeners(): void {
         this.addDisposables(
             addDisposableListener(
                 this.element,
                 'dragenter',
                 (e: DragEvent) => {
-                    this.target = e.target;
+                    this.onDragEnter(e);
-                    this.callbacks.onDragEnter(e);
                 },
                 true
             )
@@ -39,11 +68,7 @@ export class DragAndDropObserver extends CompositeDisposable {
                 this.element,
                 'dragover',
                 (e: DragEvent) => {
-                    e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
+                    this.onDragOver(e);
-
-                    if (this.callbacks.onDragOver) {
-                        this.callbacks.onDragOver(e);
-                    }
                 },
                 true
             )
@@ -51,24 +76,19 @@ export class DragAndDropObserver extends CompositeDisposable {
 
         this.addDisposables(
             addDisposableListener(this.element, 'dragleave', (e: DragEvent) => {
-                if (this.target === e.target) {
+                this.onDragLeave(e);
-                    this.target = null;
-
-                    this.callbacks.onDragLeave(e);
-                }
             })
         );
 
         this.addDisposables(
             addDisposableListener(this.element, 'dragend', (e: DragEvent) => {
-                this.target = null;
+                this.onDragEnd(e);
-                this.callbacks.onDragEnd(e);
             })
         );
 
         this.addDisposables(
             addDisposableListener(this.element, 'drop', (e: DragEvent) => {
-                this.callbacks.onDrop(e);
+                this.onDrop(e);
             })
         );
     }

packages/dockview-core/src/dnd/dropTargetAnchorContainer.scss

@@ -0,0 +1,27 @@
+.dv-drop-target-container {
+    position: absolute;
+    z-index: 9999;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    --dv-transition-duration: 300ms;
+
+    .dv-drop-target-anchor {
+        position: relative;
+        border: var(--dv-drag-over-border);
+        background-color: var(--dv-drag-over-background-color);
+        opacity: 1;
+        
+        /* GPU optimizations */
+        will-change: transform, opacity;
+        transform: translate3d(0, 0, 0);
+        backface-visibility: hidden;
+        contain: layout paint;
+        
+        transition: opacity var(--dv-transition-duration) ease-in,
+            transform var(--dv-transition-duration) ease-out;
+    }
+}

packages/dockview-core/src/dnd/dropTargetAnchorContainer.ts

@@ -0,0 +1,102 @@
+import { CompositeDisposable, Disposable } from '../lifecycle';
+import { DropTargetTargetModel } from './droptarget';
+
+export class DropTargetAnchorContainer extends CompositeDisposable {
+    private _model:
+        | { root: HTMLElement; overlay: HTMLElement; changed: boolean }
+        | undefined;
+
+    private _outline: HTMLElement | undefined;
+
+    private _disabled = false;
+
+    get disabled(): boolean {
+        return this._disabled;
+    }
+
+    set disabled(value: boolean) {
+        if (this.disabled === value) {
+            return;
+        }
+
+        this._disabled = value;
+
+        if (value) {
+            this.model?.clear();
+        }
+    }
+
+    get model(): DropTargetTargetModel | undefined {
+        if (this.disabled) {
+            return undefined;
+        }
+
+        return {
+            clear: () => {
+                if (this._model) {
+                    this._model.root.parentElement?.removeChild(
+                        this._model.root
+                    );
+                }
+                this._model = undefined;
+            },
+            exists: () => {
+                return !!this._model;
+            },
+            getElements: (event?: DragEvent, outline?: HTMLElement) => {
+                const changed = this._outline !== outline;
+                this._outline = outline;
+
+                if (this._model) {
+                    this._model.changed = changed;
+                    return this._model;
+                }
+
+                const container = this.createContainer();
+                const anchor = this.createAnchor();
+
+                this._model = { root: container, overlay: anchor, changed };
+
+                container.appendChild(anchor);
+                this.element.appendChild(container);
+
+                if (event?.target instanceof HTMLElement) {
+                    const targetBox = event.target.getBoundingClientRect();
+                    const box = this.element.getBoundingClientRect();
+
+                    anchor.style.left = `${targetBox.left - box.left}px`;
+                    anchor.style.top = `${targetBox.top - box.top}px`;
+                }
+
+                return this._model;
+            },
+        };
+    }
+
+    constructor(readonly element: HTMLElement, options: { disabled: boolean }) {
+        super();
+
+        this._disabled = options.disabled;
+
+        this.addDisposables(
+            Disposable.from(() => {
+                this.model?.clear();
+            })
+        );
+    }
+
+    private createContainer(): HTMLElement {
+        const el = document.createElement('div');
+        el.className = 'dv-drop-target-container';
+
+        return el;
+    }
+
+    private createAnchor(): HTMLElement {
+        const el = document.createElement('div');
+        el.className = 'dv-drop-target-anchor';
+        el.style.visibility = 'hidden';
+
+        return el;
+    }
+}

packages/dockview-core/src/dnd/droptarget.scss

@@ -1,38 +1,53 @@
-.drop-target {
+.dv-drop-target {
     position: relative;
+    --dv-transition-duration: 70ms;
 
-    > .drop-target-dropzone {
+    > .dv-drop-target-dropzone {
         position: absolute;
         left: 0px;
         top: 0px;
         height: 100%;
         width: 100%;
-        z-index: 10000;
+        z-index: 1000;
+        pointer-events: none;
 
-        > .drop-target-selection {
+        > .dv-drop-target-selection {
             position: relative;
             box-sizing: border-box;
             height: 100%;
             width: 100%;
+            border: var(--dv-drag-over-border);
             background-color: var(--dv-drag-over-background-color);
-            transition: top 70ms ease-out,left 70ms ease-out,width 70ms ease-out,height 70ms ease-out,opacity .15s ease-out;
+            transition: top var(--dv-transition-duration) ease-out,
+                left var(--dv-transition-duration) ease-out,
+                width var(--dv-transition-duration) ease-out,
+                height var(--dv-transition-duration) ease-out,
+                opacity var(--dv-transition-duration) ease-out;
             will-change: transform;
             pointer-events: none;
 
-            &.small-top {
+            &.dv-drop-target-top {
-                border-top: 1px solid var(--dv-drag-over-border-color);
+                &.dv-drop-target-small-vertical {
+                    border-top: 1px solid var(--dv-drag-over-border-color);
+                }
             }
 
-            &.small-bottom {
+            &.dv-drop-target-bottom {
-                border-bottom: 1px solid var(--dv-drag-over-border-color);
+                &.dv-drop-target-small-vertical {
+                    border-bottom: 1px solid var(--dv-drag-over-border-color);
+                }
             }
 
-            &.small-left {
+            &.dv-drop-target-left {
-                border-left: 1px solid var(--dv-drag-over-border-color);
+                &.dv-drop-target-small-horizontal {
+                    border-left: 1px solid var(--dv-drag-over-border-color);
+                }
             }
 
-            &.small-right {
+            &.dv-drop-target-right {
-                border-right: 1px solid var(--dv-drag-over-border-color);
+                &.dv-drop-target-small-horizontal {
+                    border-right: 1px solid var(--dv-drag-over-border-color);
+                }
             }
         }
     }

packages/dockview-core/src/dnd/droptarget.ts

@@ -1,12 +1,97 @@
 import { toggleClass } from '../dom';
-import { Emitter, Event } from '../events';
+import { DockviewEvent, Emitter, Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { DragAndDropObserver } from './dnd';
 import { clamp } from '../math';
 import { Direction } from '../gridview/baseComponentGridview';
 
-function numberOrFallback(maybeNumber: any, fallback: number): number {
+interface DropTargetRect {
-    return typeof maybeNumber === 'number' ? maybeNumber : fallback;
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+
+function setGPUOptimizedBounds(element: HTMLElement, bounds: DropTargetRect): void {
+    const { top, left, width, height } = bounds;
+    const topPx = `${Math.round(top)}px`;
+    const leftPx = `${Math.round(left)}px`;
+    const widthPx = `${Math.round(width)}px`;
+    const heightPx = `${Math.round(height)}px`;
+    
+    // Use traditional positioning but maintain GPU layer
+    element.style.top = topPx;
+    element.style.left = leftPx;
+    element.style.width = widthPx;
+    element.style.height = heightPx;
+    element.style.visibility = 'visible';
+    
+    // Ensure GPU layer is maintained
+    if (!element.style.transform || element.style.transform === '') {
+        element.style.transform = 'translate3d(0, 0, 0)';
+    }
+}
+
+function setGPUOptimizedBoundsFromStrings(element: HTMLElement, bounds: {
+    top: string;
+    left: string;
+    width: string;
+    height: string;
+}): void {
+    const { top, left, width, height } = bounds;
+    
+    // Use traditional positioning but maintain GPU layer
+    element.style.top = top;
+    element.style.left = left;
+    element.style.width = width;
+    element.style.height = height;
+    element.style.visibility = 'visible';
+    
+    // Ensure GPU layer is maintained
+    if (!element.style.transform || element.style.transform === '') {
+        element.style.transform = 'translate3d(0, 0, 0)';
+    }
+}
+
+function checkBoundsChanged(element: HTMLElement, bounds: DropTargetRect): boolean {
+    const { top, left, width, height } = bounds;
+    const topPx = `${Math.round(top)}px`;
+    const leftPx = `${Math.round(left)}px`;
+    const widthPx = `${Math.round(width)}px`;
+    const heightPx = `${Math.round(height)}px`;
+    
+    // Check if position or size changed (back to traditional method)
+    return element.style.top !== topPx ||
+           element.style.left !== leftPx ||
+           element.style.width !== widthPx || 
+           element.style.height !== heightPx;
+}
+
+export interface DroptargetEvent {
+    readonly position: Position;
+    readonly nativeEvent: DragEvent;
+}
+
+export class WillShowOverlayEvent
+    extends DockviewEvent
+    implements DroptargetEvent
+{
+    get nativeEvent(): DragEvent {
+        return this.options.nativeEvent;
+    }
+
+    get position(): Position {
+        return this.options.position;
+    }
+
+    constructor(
+        private readonly options: {
+            nativeEvent: DragEvent;
+            position: Position;
+        }
+    ) {
+        super();
+    }
 }
 
 export function directionToPosition(direction: Direction): Position {
@@ -43,140 +128,280 @@ export function positionToDirection(position: Position): Direction {
     }
 }
 
-export interface DroptargetEvent {
-    readonly position: Position;
-    readonly nativeEvent: DragEvent;
-}
-
 export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
 
-export type CanDisplayOverlay =
+export type CanDisplayOverlay = (
-    | boolean
+    dragEvent: DragEvent,
-    | ((dragEvent: DragEvent, state: Position) => boolean);
+    state: Position
+) => boolean;
+
+export type MeasuredValue = { value: number; type: 'pixels' | 'percentage' };
+
+export type DroptargetOverlayModel = {
+    size?: MeasuredValue;
+    activationSize?: MeasuredValue;
+};
+
+const DEFAULT_ACTIVATION_SIZE: MeasuredValue = {
+    value: 20,
+    type: 'percentage',
+};
+
+const DEFAULT_SIZE: MeasuredValue = {
+    value: 50,
+    type: 'percentage',
+};
+
+const SMALL_WIDTH_BOUNDARY = 100;
+const SMALL_HEIGHT_BOUNDARY = 100;
+
+export interface DropTargetTargetModel {
+    getElements(
+        event?: DragEvent,
+        outline?: HTMLElement
+    ): {
+        root: HTMLElement;
+        overlay: HTMLElement;
+        changed: boolean;
+    };
+    exists(): boolean;
+    clear(): void;
+}
+
+export interface DroptargetOptions {
+    canDisplayOverlay: CanDisplayOverlay;
+    acceptedTargetZones: Position[];
+    overlayModel?: DroptargetOverlayModel;
+    getOverrideTarget?: () => DropTargetTargetModel | undefined;
+    className?: string;
+    getOverlayOutline?: () => HTMLElement | null;
+}
 
 export class Droptarget extends CompositeDisposable {
     private targetElement: HTMLElement | undefined;
     private overlayElement: HTMLElement | undefined;
     private _state: Position | undefined;
+    private _acceptedTargetZonesSet: Set<Position>;
 
     private readonly _onDrop = new Emitter<DroptargetEvent>();
     readonly onDrop: Event<DroptargetEvent> = this._onDrop.event;
 
+    private readonly _onWillShowOverlay = new Emitter<WillShowOverlayEvent>();
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent> =
+        this._onWillShowOverlay.event;
+
+    readonly dnd: DragAndDropObserver;
+
+    private static USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
+
+    private static ACTUAL_TARGET: Droptarget | undefined;
+
+    private _disabled: boolean;
+
+    get disabled(): boolean {
+        return this._disabled;
+    }
+
+    set disabled(value: boolean) {
+        this._disabled = value;
+    }
+
     get state(): Position | undefined {
         return this._state;
     }
 
     constructor(
         private readonly element: HTMLElement,
-        private readonly options: {
+        private readonly options: DroptargetOptions
-            canDisplayOverlay: CanDisplayOverlay;
-            acceptedTargetZones: Position[];
-            overlayModel?: {
-                size?: { value: number; type: 'pixels' | 'percentage' };
-                activationSize?: {
-                    value: number;
-                    type: 'pixels' | 'percentage';
-                };
-            };
-        }
     ) {
         super();
 
+        this._disabled = false;
+
         // use a set to take advantage of #<set>.has
-        const acceptedTargetZonesSet = new Set(
+        this._acceptedTargetZonesSet = new Set(
             this.options.acceptedTargetZones
         );
 
-        this.addDisposables(
+        this.dnd = new DragAndDropObserver(this.element, {
-            this._onDrop,
+            onDragEnter: () => {
-            new DragAndDropObserver(this.element, {
+                this.options.getOverrideTarget?.()?.getElements();
-                onDragEnter: () => undefined,
+            },
-                onDragOver: (e) => {
+            onDragOver: (e) => {
-                    const width = this.element.clientWidth;
+                Droptarget.ACTUAL_TARGET = this;
-                    const height = this.element.clientHeight;
 
-                    if (width === 0 || height === 0) {
+                const overrideTarget = this.options.getOverrideTarget?.();
-                        return; // avoid div!0
-                    }
 
-                    const rect = (
+                if (this._acceptedTargetZonesSet.size === 0) {
-                        e.currentTarget as HTMLElement
+                    if (overrideTarget) {
-                    ).getBoundingClientRect();
-                    const x = e.clientX - rect.left;
-                    const y = e.clientY - rect.top;
-
-                    const quadrant = this.calculateQuadrant(
-                        acceptedTargetZonesSet,
-                        x,
-                        y,
-                        width,
-                        height
-                    );
-
-                    if (quadrant === null) {
-                        // no drop target should be displayed
-                        this.removeDropTarget();
                         return;
                     }
-
-                    if (typeof this.options.canDisplayOverlay === 'boolean') {
-                        if (!this.options.canDisplayOverlay) {
-                            return;
-                        }
-                    } else if (!this.options.canDisplayOverlay(e, quadrant)) {
-                        return;
-                    }
-
-                    if (!this.targetElement) {
-                        this.targetElement = document.createElement('div');
-                        this.targetElement.className = 'drop-target-dropzone';
-                        this.overlayElement = document.createElement('div');
-                        this.overlayElement.className = 'drop-target-selection';
-                        this._state = 'center';
-                        this.targetElement.appendChild(this.overlayElement);
-
-                        this.element.classList.add('drop-target');
-                        this.element.append(this.targetElement);
-                    }
-
-                    if (this.options.acceptedTargetZones.length === 0) {
-                        return;
-                    }
-
-                    if (!this.targetElement || !this.overlayElement) {
-                        return;
-                    }
-
-                    this.toggleClasses(quadrant, width, height);
-
-                    this.setState(quadrant);
-                },
-                onDragLeave: () => {
                     this.removeDropTarget();
-                },
+                    return;
-                onDragEnd: () => {
+                }
+
+                const target =
+                    this.options.getOverlayOutline?.() ?? this.element;
+
+                const width = target.offsetWidth;
+                const height = target.offsetHeight;
+
+                if (width === 0 || height === 0) {
+                    return; // avoid div!0
+                }
+
+                const rect = (
+                    e.currentTarget as HTMLElement
+                ).getBoundingClientRect();
+                const x = (e.clientX ?? 0) - rect.left;
+                const y = (e.clientY ?? 0) - rect.top;
+
+                const quadrant = this.calculateQuadrant(
+                    this._acceptedTargetZonesSet,
+                    x,
+                    y,
+                    width,
+                    height
+                );
+
+                /**
+                 * If the event has already been used by another DropTarget instance
+                 * then don't show a second drop target, only one target should be
+                 * active at any one time
+                 */
+                if (this.isAlreadyUsed(e) || quadrant === null) {
+                    // no drop target should be displayed
                     this.removeDropTarget();
-                },
+                    return;
-                onDrop: (e) => {
+                }
-                    e.preventDefault();
-
-                    const state = this._state;
 
+                if (!this.options.canDisplayOverlay(e, quadrant)) {
+                    if (overrideTarget) {
+                        return;
+                    }
                     this.removeDropTarget();
+                    return;
+                }
 
-                    if (state) {
+                const willShowOverlayEvent = new WillShowOverlayEvent({
+                    nativeEvent: e,
+                    position: quadrant,
+                });
+
+                /**
+                 * Provide an opportunity to prevent the overlay appearing and in turn
+                 * any dnd behaviours
+                 */
+                this._onWillShowOverlay.fire(willShowOverlayEvent);
+
+                if (willShowOverlayEvent.defaultPrevented) {
+                    this.removeDropTarget();
+                    return;
+                }
+
+                this.markAsUsed(e);
+
+                if (overrideTarget) {
+                    //
+                } else if (!this.targetElement) {
+                    this.targetElement = document.createElement('div');
+                    this.targetElement.className = 'dv-drop-target-dropzone';
+                    this.overlayElement = document.createElement('div');
+                    this.overlayElement.className = 'dv-drop-target-selection';
+                    this._state = 'center';
+                    this.targetElement.appendChild(this.overlayElement);
+
+                    target.classList.add('dv-drop-target');
+                    target.append(this.targetElement);
+
+                    // this.overlayElement.style.opacity = '0';
+
+                    // requestAnimationFrame(() => {
+                    //     if (this.overlayElement) {
+                    //         this.overlayElement.style.opacity = '';
+                    //     }
+                    // });
+                }
+
+                this.toggleClasses(quadrant, width, height);
+
+                this._state = quadrant;
+            },
+            onDragLeave: () => {
+                const target = this.options.getOverrideTarget?.();
+
+                if (target) {
+                    return;
+                }
+
+                this.removeDropTarget();
+            },
+            onDragEnd: (e) => {
+                const target = this.options.getOverrideTarget?.();
+
+                if (target && Droptarget.ACTUAL_TARGET === this) {
+                    if (this._state) {
                         // only stop the propagation of the event if we are dealing with it
                         // which is only when the target has state
                         e.stopPropagation();
-                        this._onDrop.fire({ position: state, nativeEvent: e });
+                        this._onDrop.fire({
+                            position: this._state,
+                            nativeEvent: e,
+                        });
                     }
-                },
+                }
-            })
+
-        );
+                this.removeDropTarget();
+
+                target?.clear();
+            },
+            onDrop: (e) => {
+                e.preventDefault();
+
+                const state = this._state;
+
+                this.removeDropTarget();
+
+                this.options.getOverrideTarget?.()?.clear();
+
+                if (state) {
+                    // only stop the propagation of the event if we are dealing with it
+                    // which is only when the target has state
+                    e.stopPropagation();
+                    this._onDrop.fire({ position: state, nativeEvent: e });
+                }
+            },
+        });
+
+        this.addDisposables(this._onDrop, this._onWillShowOverlay, this.dnd);
     }
 
-    public dispose(): void {
+    setTargetZones(acceptedTargetZones: Position[]): void {
+        this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
+    }
+
+    setOverlayModel(model: DroptargetOverlayModel): void {
+        this.options.overlayModel = model;
+    }
+
+    dispose(): void {
         this.removeDropTarget();
+        super.dispose();
+    }
+
+    /**
+     * Add a property to the event object for other potential listeners to check
+     */
+    private markAsUsed(event: DragEvent): void {
+        (event as any)[Droptarget.USED_EVENT_ID] = true;
+    }
+
+    /**
+     * Check is the event has already been used by another instance of DropTarget
+     */
+    private isAlreadyUsed(event: DragEvent): boolean {
+        const value = (event as any)[Droptarget.USED_EVENT_ID];
+        return typeof value === 'boolean' && value;
     }
 
     private toggleClasses(
@@ -184,12 +409,14 @@ export class Droptarget extends CompositeDisposable {
         width: number,
         height: number
     ): void {
-        if (!this.overlayElement) {
+        const target = this.options.getOverrideTarget?.();
+
+        if (!target && !this.overlayElement) {
             return;
         }
 
-        const isSmallX = width < 100;
+        const isSmallX = width < SMALL_WIDTH_BOUNDARY;
-        const isSmallY = height < 100;
+        const isSmallY = height < SMALL_HEIGHT_BOUNDARY;
 
         const isLeft = quadrant === 'left';
         const isRight = quadrant === 'right';
@@ -201,68 +428,159 @@ export class Droptarget extends CompositeDisposable {
         const topClass = !isSmallY && isTop;
         const bottomClass = !isSmallY && isBottom;
 
-        let size = 0.5;
+        let size = 1;
 
-        if (this.options.overlayModel?.size?.type === 'percentage') {
+        const sizeOptions = this.options.overlayModel?.size ?? DEFAULT_SIZE;
-            size = clamp(this.options.overlayModel.size.value, 0, 100) / 100;
-        }
 
-        if (this.options.overlayModel?.size?.type === 'pixels') {
+        if (sizeOptions.type === 'percentage') {
+            size = clamp(sizeOptions.value, 0, 100) / 100;
+        } else {
             if (rightClass || leftClass) {
-                size =
+                size = clamp(0, sizeOptions.value, width) / width;
-                    clamp(0, this.options.overlayModel.size.value, width) /
-                    width;
             }
             if (topClass || bottomClass) {
-                size =
+                size = clamp(0, sizeOptions.value, height) / height;
-                    clamp(0, this.options.overlayModel.size.value, height) /
-                    height;
             }
         }
 
-        const translate = (1 - size) / 2;
+        if (target) {
-        const scale = size;
+            const outlineEl =
+                this.options.getOverlayOutline?.() ?? this.element;
+            const elBox = outlineEl.getBoundingClientRect();
 
-        let transform: string;
+            const ta = target.getElements(undefined, outlineEl);
+            const el = ta.root;
+            const overlay = ta.overlay;
 
+            const bigbox = el.getBoundingClientRect();
+
+            const rootTop = elBox.top - bigbox.top;
+            const rootLeft = elBox.left - bigbox.left;
+
+            const box = {
+                top: rootTop,
+                left: rootLeft,
+                width: width,
+                height: height,
+            };
+
+            if (rightClass) {
+                box.left = rootLeft + width * (1 - size);
+                box.width = width * size;
+            } else if (leftClass) {
+                box.width = width * size;
+            } else if (topClass) {
+                box.height = height * size;
+            } else if (bottomClass) {
+                box.top = rootTop + height * (1 - size);
+                box.height = height * size;
+            }
+
+            if (isSmallX && isLeft) {
+                box.width = 4;
+            }
+            if (isSmallX && isRight) {
+                box.left = rootLeft + width - 4;
+                box.width = 4;
+            }
+
+            // Use GPU-optimized bounds checking and setting
+            if (!checkBoundsChanged(overlay, box)) {
+                return;
+            }
+
+            setGPUOptimizedBounds(overlay, box);
+
+            overlay.className = `dv-drop-target-anchor${
+                this.options.className ? ` ${this.options.className}` : ''
+            }`;
+
+            toggleClass(overlay, 'dv-drop-target-left', isLeft);
+            toggleClass(overlay, 'dv-drop-target-right', isRight);
+            toggleClass(overlay, 'dv-drop-target-top', isTop);
+            toggleClass(overlay, 'dv-drop-target-bottom', isBottom);
+            toggleClass(
+                overlay,
+                'dv-drop-target-center',
+                quadrant === 'center'
+            );
+
+            if (ta.changed) {
+                toggleClass(
+                    overlay,
+                    'dv-drop-target-anchor-container-changed',
+                    true
+                );
+                setTimeout(() => {
+                    toggleClass(
+                        overlay,
+                        'dv-drop-target-anchor-container-changed',
+                        false
+                    );
+                }, 10);
+            }
+
+            return;
+        }
+
+        if (!this.overlayElement) {
+            return;
+        }
+
+        const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
+
+        /**
+         * You can also achieve the overlay placement using the transform CSS property
+         * to translate and scale the element however this has the undesired effect of
+         * 'skewing' the element. Comment left here for anybody that ever revisits this.
+         *
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
+         *
+         * right
+         * translateX(${100 * (1 - size) / 2}%) scaleX(${scale})
+         *
+         * left
+         * translateX(-${100 * (1 - size) / 2}%) scaleX(${scale})
+         *
+         * top
+         * translateY(-${100 * (1 - size) / 2}%) scaleY(${scale})
+         *
+         * bottom
+         * translateY(${100 * (1 - size) / 2}%) scaleY(${scale})
+         */
         if (rightClass) {
-            transform = `translateX(${100 * translate}%) scaleX(${scale})`;
+            box.left = `${100 * (1 - size)}%`;
+            box.width = `${100 * size}%`;
         } else if (leftClass) {
-            transform = `translateX(-${100 * translate}%) scaleX(${scale})`;
+            box.width = `${100 * size}%`;
         } else if (topClass) {
-            transform = `translateY(-${100 * translate}%) scaleY(${scale})`;
+            box.height = `${100 * size}%`;
         } else if (bottomClass) {
-            transform = `translateY(${100 * translate}%) scaleY(${scale})`;
+            box.top = `${100 * (1 - size)}%`;
-        } else {
+            box.height = `${100 * size}%`;
-            transform = '';
         }
 
-        this.overlayElement.style.transform = transform;
+        setGPUOptimizedBoundsFromStrings(this.overlayElement, box);
 
-        toggleClass(this.overlayElement, 'small-right', isSmallX && isRight);
+        toggleClass(
-        toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft);
+            this.overlayElement,
-        toggleClass(this.overlayElement, 'small-top', isSmallY && isTop);
+            'dv-drop-target-small-vertical',
-        toggleClass(this.overlayElement, 'small-bottom', isSmallY && isBottom);
+            isSmallY
-    }
+        );
-
+        toggleClass(
-    private setState(quadrant: Position): void {
+            this.overlayElement,
-        switch (quadrant) {
+            'dv-drop-target-small-horizontal',
-            case 'top':
+            isSmallX
-                this._state = 'top';
+        );
-                break;
+        toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);
-            case 'left':
+        toggleClass(this.overlayElement, 'dv-drop-target-right', isRight);
-                this._state = 'left';
+        toggleClass(this.overlayElement, 'dv-drop-target-top', isTop);
-                break;
+        toggleClass(this.overlayElement, 'dv-drop-target-bottom', isBottom);
-            case 'bottom':
+        toggleClass(
-                this._state = 'bottom';
+            this.overlayElement,
-                break;
+            'dv-drop-target-center',
-            case 'right':
+            quadrant === 'center'
-                this._state = 'right';
+        );
-                break;
-            case 'center':
-                this._state = 'center';
-                break;
-        }
     }
 
     private calculateQuadrant(
@@ -272,14 +590,11 @@ export class Droptarget extends CompositeDisposable {
         width: number,
         height: number
     ): Position | null {
-        const isPercentage =
+        const activationSizeOptions =
-            this.options.overlayModel?.activationSize === undefined ||
+            this.options.overlayModel?.activationSize ??
-            this.options.overlayModel?.activationSize?.type === 'percentage';
+            DEFAULT_ACTIVATION_SIZE;
 
-        const value = numberOrFallback(
+        const isPercentage = activationSizeOptions.type === 'percentage';
-            this.options?.overlayModel?.activationSize?.value,
-            20
-        );
 
         if (isPercentage) {
             return calculateQuadrantAsPercentage(
@@ -288,7 +603,7 @@ export class Droptarget extends CompositeDisposable {
                 y,
                 width,
                 height,
-                value
+                activationSizeOptions.value
             );
         }
 
@@ -298,17 +613,19 @@ export class Droptarget extends CompositeDisposable {
             y,
             width,
             height,
-            value
+            activationSizeOptions.value
         );
     }
 
     private removeDropTarget(): void {
         if (this.targetElement) {
             this._state = undefined;
-            this.element.removeChild(this.targetElement);
+            this.targetElement.parentElement?.classList.remove(
+                'dv-drop-target'
+            );
+            this.targetElement.remove();
             this.targetElement = undefined;
             this.overlayElement = undefined;
-            this.element.classList.remove('drop-target');
         }
     }
 }

packages/dockview-core/src/dnd/ghost.ts

@@ -2,13 +2,17 @@ import { addClasses, removeClasses } from '../dom';
 
 export function addGhostImage(
     dataTransfer: DataTransfer,
-    ghostElement: HTMLElement
+    ghostElement: HTMLElement,
+    options?: { x?: number; y?: number }
 ): void {
     // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
     addClasses(ghostElement, 'dv-dragged');
 
+    // move the element off-screen initially otherwise it may in some cases be rendered at (0,0) momentarily
+    ghostElement.style.top = '-9999px';
+
     document.body.appendChild(ghostElement);
-    dataTransfer.setDragImage(ghostElement, 0, 0);
+    dataTransfer.setDragImage(ghostElement, options?.x ?? 0, options?.y ?? 0);
 
     setTimeout(() => {
         removeClasses(ghostElement, 'dv-dragged');

packages/dockview-core/src/dnd/groupDragHandler.ts

@@ -1,4 +1,7 @@
+import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
+import { quasiPreventDefault } from '../dom';
+import { addDisposableListener } from '../events';
 import { IDisposable } from '../lifecycle';
 import { DragHandler } from './abstractDragHandler';
 import { LocalSelectionTransfer, PanelTransfer } from './dataTransfer';
@@ -10,15 +13,42 @@ export class GroupDragHandler extends DragHandler {
 
     constructor(
         element: HTMLElement,
-        private readonly accessorId: string,
+        private readonly accessor: DockviewComponent,
         private readonly group: DockviewGroupPanel
     ) {
         super(element);
+
+        this.addDisposables(
+            addDisposableListener(
+                element,
+                'pointerdown',
+                (e) => {
+                    if (e.shiftKey) {
+                        /**
+                         * You cannot call e.preventDefault() because that will prevent drag events from firing
+                         * but we also need to stop any group overlay drag events from occuring
+                         * Use a custom event marker that can be checked by the overlay drag events
+                         */
+                        quasiPreventDefault(e);
+                    }
+                },
+                true
+            )
+        );
     }
 
-    getData(dataTransfer: DataTransfer | null): IDisposable {
+    override isCancelled(_event: DragEvent): boolean {
+        if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
+            return true;
+        }
+        return false;
+    }
+
+    getData(dragEvent: DragEvent): IDisposable {
+        const dataTransfer = dragEvent.dataTransfer;
+
         this.panelTransfer.setData(
-            [new PanelTransfer(this.accessorId, this.group.id, null)],
+            [new PanelTransfer(this.accessor.id, this.group.id, null)],
             PanelTransfer.prototype
         );
 
@@ -42,9 +72,11 @@ export class GroupDragHandler extends DragHandler {
             ghostElement.style.lineHeight = '20px';
             ghostElement.style.borderRadius = '12px';
             ghostElement.style.position = 'absolute';
+            ghostElement.style.pointerEvents = 'none';
+            ghostElement.style.top = '-9999px';
             ghostElement.textContent = `Multiple Panels (${this.group.size})`;
 
-            addGhostImage(dataTransfer, ghostElement);
+            addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
         }
 
         return {
@@ -53,8 +85,4 @@ export class GroupDragHandler extends DragHandler {
             },
         };
     }
-
-    public dispose(): void {
-        //
-    }
 }

packages/dockview-core/src/dockview/components/panel/content.ts

@@ -6,8 +6,13 @@ import {
 import { Emitter, Event } from '../../../events';
 import { trackFocus } from '../../../dom';
 import { IDockviewPanel } from '../../dockviewPanel';
+import { DockviewComponent } from '../../dockviewComponent';
+import { Droptarget } from '../../../dnd/droptarget';
+import { DockviewGroupPanelModel } from '../../dockviewGroupPanelModel';
+import { getPanelData } from '../../../dnd/dataTransfer';
 
 export interface IContentContainer extends IDisposable {
+    readonly dropTarget: Droptarget;
     onDidFocus: Event<void>;
     onDidBlur: Event<void>;
     element: HTMLElement;
@@ -16,15 +21,16 @@ export interface IContentContainer extends IDisposable {
     closePanel: () => void;
     show(): void;
     hide(): void;
+    renderPanel(panel: IDockviewPanel, options: { asActive: boolean }): void;
 }
 
 export class ContentContainer
     extends CompositeDisposable
     implements IContentContainer
 {
-    private _element: HTMLElement;
+    private readonly _element: HTMLElement;
     private panel: IDockviewPanel | undefined;
-    private disposable = new MutableDisposable();
+    private readonly disposable = new MutableDisposable();
 
     private readonly _onDidFocus = new Emitter<void>();
     readonly onDidFocus: Event<void> = this._onDidFocus.event;
@@ -36,19 +42,57 @@ export class ContentContainer
         return this._element;
     }
 
-    constructor() {
+    readonly dropTarget: Droptarget;
+
+    constructor(
+        private readonly accessor: DockviewComponent,
+        private readonly group: DockviewGroupPanelModel
+    ) {
         super();
         this._element = document.createElement('div');
-        this._element.className = 'content-container';
+        this._element.className = 'dv-content-container';
         this._element.tabIndex = -1;
 
         this.addDisposables(this._onDidFocus, this._onDidBlur);
 
-        // for hosted containers
+        const target = group.dropTargetContainer;
-        // 1) register a drop target on the host
+
-        // 2) register window dragStart events to disable pointer events
+        this.dropTarget = new Droptarget(this.element, {
-        // 3) register dragEnd events
+            getOverlayOutline: () => {
-        // 4) register mouseMove events (if no buttons are present we take this as a dragEnd event)
+                return accessor.options.theme?.dndPanelOverlay === 'group'
+                    ? this.element.parentElement
+                    : null;
+            },
+            className: 'dv-drop-target-content',
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+            canDisplayOverlay: (event, position) => {
+                if (
+                    this.group.locked === 'no-drop-target' ||
+                    (this.group.locked && position === 'center')
+                ) {
+                    return false;
+                }
+
+                const data = getPanelData();
+
+                if (
+                    !data &&
+                    event.shiftKey &&
+                    this.group.location.type !== 'floating'
+                ) {
+                    return false;
+                }
+
+                if (data && data.viewId === this.accessor.id) {
+                    return true;
+                }
+
+                return this.group.canDisplayOverlay(event, position, 'content');
+            },
+            getOverrideTarget: target ? () => target.model : undefined,
+        });
+
+        this.addDisposables(this.dropTarget);
     }
 
     show(): void {
@@ -59,46 +103,77 @@ export class ContentContainer
         this.element.style.display = 'none';
     }
 
+    renderPanel(
+        panel: IDockviewPanel,
+        options: { asActive: boolean } = { asActive: true }
+    ): void {
+        const doRender =
+            options.asActive ||
+            (this.panel && this.group.isPanelActive(this.panel));
+
+        if (
+            this.panel &&
+            this.panel.view.content.element.parentElement === this._element
+        ) {
+            /**
+             * If the currently attached panel is mounted directly to the content then remove it
+             */
+            this._element.removeChild(this.panel.view.content.element);
+        }
+
+        this.panel = panel;
+
+        let container: HTMLElement;
+
+        switch (panel.api.renderer) {
+            case 'onlyWhenVisible':
+                this.group.renderContainer.detatch(panel);
+                if (this.panel) {
+                    if (doRender) {
+                        this._element.appendChild(
+                            this.panel.view.content.element
+                        );
+                    }
+                }
+                container = this._element;
+                break;
+            case 'always':
+                if (
+                    panel.view.content.element.parentElement === this._element
+                ) {
+                    this._element.removeChild(panel.view.content.element);
+                }
+                container = this.group.renderContainer.attach({
+                    panel,
+                    referenceContainer: this,
+                });
+                break;
+            default:
+                throw new Error(
+                    `dockview: invalid renderer type '${panel.api.renderer}'`
+                );
+        }
+
+        if (doRender) {
+            const focusTracker = trackFocus(container);
+            const disposable = new CompositeDisposable();
+
+            disposable.addDisposables(
+                focusTracker,
+                focusTracker.onDidFocus(() => this._onDidFocus.fire()),
+                focusTracker.onDidBlur(() => this._onDidBlur.fire())
+            );
+
+            this.disposable.value = disposable;
+        }
+    }
+
     public openPanel(panel: IDockviewPanel): void {
         if (this.panel === panel) {
             return;
         }
-        if (this.panel) {
-            if (this.panel.view?.content) {
-                this._element.removeChild(this.panel.view.content.element);
-            }
-            this.panel = undefined;
-        }
-        this.panel = panel;
 
-        const disposable = new CompositeDisposable();
+        this.renderPanel(panel);
-
-        if (this.panel.view) {
-            const _onDidFocus = this.panel.view.content.onDidFocus;
-            const _onDidBlur = this.panel.view.content.onDidBlur;
-
-            const { onDidFocus, onDidBlur } = trackFocus(this._element);
-
-            disposable.addDisposables(
-                onDidFocus(() => this._onDidFocus.fire()),
-                onDidBlur(() => this._onDidBlur.fire())
-            );
-
-            if (_onDidFocus) {
-                disposable.addDisposables(
-                    _onDidFocus(() => this._onDidFocus.fire())
-                );
-            }
-            if (_onDidBlur) {
-                disposable.addDisposables(
-                    _onDidBlur(() => this._onDidBlur.fire())
-                );
-            }
-
-            this._element.appendChild(this.panel.view.content.element);
-        }
-
-        this.disposable.value = disposable;
     }
 
     public layout(_width: number, _height: number): void {
@@ -106,10 +181,14 @@ export class ContentContainer
     }
 
     public closePanel(): void {
-        if (this.panel?.view?.content?.element) {
+        if (this.panel) {
-            this._element.removeChild(this.panel.view.content.element);
+            if (this.panel.api.renderer === 'onlyWhenVisible') {
-            this.panel = undefined;
+                this.panel.view.content.element.parentElement?.removeChild(
+                    this.panel.view.content.element
+                );
+            }
         }
+        this.panel = undefined;
     }
 
     public dispose(): void {

packages/dockview-core/src/dockview/components/popupService.ts

@@ -0,0 +1,87 @@
+import { shiftAbsoluteElementIntoView } from '../../dom';
+import { addDisposableListener } from '../../events';
+import {
+    CompositeDisposable,
+    Disposable,
+    MutableDisposable,
+} from '../../lifecycle';
+
+export class PopupService extends CompositeDisposable {
+    private readonly _element: HTMLElement;
+    private _active: HTMLElement | null = null;
+    private readonly _activeDisposable = new MutableDisposable();
+
+    constructor(private readonly root: HTMLElement) {
+        super();
+
+        this._element = document.createElement('div');
+        this._element.className = 'dv-popover-anchor';
+        this._element.style.position = 'relative';
+
+        this.root.prepend(this._element);
+
+        this.addDisposables(
+            Disposable.from(() => {
+                this.close();
+            }),
+            this._activeDisposable
+        );
+    }
+
+    openPopover(
+        element: HTMLElement,
+        position: { x: number; y: number; zIndex?: string }
+    ): void {
+        this.close();
+
+        const wrapper = document.createElement('div');
+        wrapper.style.position = 'absolute';
+        wrapper.style.zIndex = position.zIndex ?? 'var(--dv-overlay-z-index)';
+        wrapper.appendChild(element);
+
+        const anchorBox = this._element.getBoundingClientRect();
+        const offsetX = anchorBox.left;
+        const offsetY = anchorBox.top;
+
+        wrapper.style.top = `${position.y - offsetY}px`;
+        wrapper.style.left = `${position.x - offsetX}px`;
+
+        this._element.appendChild(wrapper);
+
+        this._active = wrapper;
+
+        this._activeDisposable.value = new CompositeDisposable(
+            addDisposableListener(window, 'pointerdown', (event) => {
+                const target = event.target;
+
+                if (!(target instanceof HTMLElement)) {
+                    return;
+                }
+
+                let el: HTMLElement | null = target;
+
+                while (el && el !== wrapper) {
+                    el = el?.parentElement ?? null;
+                }
+
+                if (el) {
+                    return; // clicked within popover
+                }
+
+                this.close();
+            })
+        );
+
+        requestAnimationFrame(() => {
+            shiftAbsoluteElementIntoView(wrapper, this.root);
+        });
+    }
+
+    close(): void {
+        if (this._active) {
+            this._active.remove();
+            this._activeDisposable.dispose();
+            this._active = null;
+        }
+    }
+}

packages/dockview-core/src/dockview/components/tab/defaultTab.scss

@@ -6,70 +6,78 @@
     ); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */
 }
 
-.tab {
+.dv-tab {
     flex-shrink: 0;
 
+    &:focus-within,
+    &:focus {
+        position: relative;
+
+        &::after {
+            position: absolute;
+            content: '';
+            height: 100%;
+            width: 100%;
+            top: 0px;
+            left: 0px;
+            pointer-events: none;
+            outline: 1px solid var(--dv-tab-divider-color) !important;
+            outline-offset: -1px;
+            z-index: 5;
+        }
+    }
+
     &.dv-tab-dragging {
-        .tab-action {
+        .dv-default-tab-action {
             background-color: var(--dv-activegroup-visiblepanel-tab-color);
         }
     }
 
-    &.active-tab > .default-tab {
+    &.dv-active-tab {
-        .tab-action {
+        .dv-default-tab {
-            visibility: visible;
+            .dv-default-tab-action {
-        }
-    }
-
-    &.inactive-tab > .default-tab {
-        .tab-action {
-            visibility: hidden;
-        }
-        &:hover {
-            .tab-action {
                 visibility: visible;
             }
         }
     }
 
-    .default-tab {
+    &.dv-inactive-tab {
-        position: relative;
+        .dv-default-tab {
-        height: 100%;
+            .dv-default-tab-action {
-        display: flex;
+                visibility: hidden;
-        min-width: 80px;
+            }
-        align-items: center;
+            &:hover {
-        padding: 0px 8px;
+                .dv-default-tab-action {
-        white-space: nowrap;
+                    visibility: visible;
-        text-overflow: elipsis;
-
-        .tab-content {
-            padding: 0px 8px;
-            flex-grow: 1;
-        }
-
-        .action-container {
-            text-align: right;
-            display: flex;
-
-            .tab-list {
-                display: flex;
-                padding: 0px;
-                margin: 0px;
-                justify-content: flex-end;
-
-                .tab-action {
-                    padding: 4px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    box-sizing: border-box;
-
-                    &:hover {
-                        border-radius: 2px;
-                        background-color: var(--dv-icon-hover-background-color);
-                    }
                 }
             }
         }
     }
+
+    .dv-default-tab {
+        position: relative;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        .dv-default-tab-content {
+            flex-grow: 1;
+            margin-right: 4px;
+        }
+
+        .dv-default-tab-action {
+            padding: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+
+            &:hover {
+                border-radius: 2px;
+                background-color: var(--dv-icon-hover-background-color);
+            }
+        }
+    }
 }

packages/dockview-core/src/dockview/components/tab/defaultTab.ts

@@ -1,18 +1,13 @@
 import { CompositeDisposable } from '../../../lifecycle';
 import { ITabRenderer, GroupPanelPartInitParameters } from '../../types';
 import { addDisposableListener } from '../../../events';
-import { PanelUpdateEvent } from '../../../panel/types';
-import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { createCloseButton } from '../../../svg';
 
 export class DefaultTab extends CompositeDisposable implements ITabRenderer {
-    private _element: HTMLElement;
+    private readonly _element: HTMLElement;
-    private _content: HTMLElement;
+    private readonly _content: HTMLElement;
-    private _actionContainer: HTMLElement;
+    private readonly action: HTMLElement;
-    private _list: HTMLElement;
+    private _title: string | undefined;
-    private action: HTMLElement;
-    //
-    private params: GroupPanelPartInitParameters = {} as any;
 
     get element(): HTMLElement {
         return this._element;
@@ -22,70 +17,48 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
         super();
 
         this._element = document.createElement('div');
-        this._element.className = 'default-tab';
+        this._element.className = 'dv-default-tab';
-        //
+
         this._content = document.createElement('div');
-        this._content.className = 'tab-content';
+        this._content.className = 'dv-default-tab-content';
-        //
+
-        this._actionContainer = document.createElement('div');
-        this._actionContainer.className = 'action-container';
-        //
-        this._list = document.createElement('ul');
-        this._list.className = 'tab-list';
-        //
         this.action = document.createElement('div');
-        this.action.className = 'tab-action';
+        this.action.className = 'dv-default-tab-action';
         this.action.appendChild(createCloseButton());
 
-        //
         this._element.appendChild(this._content);
-        this._element.appendChild(this._actionContainer);
+        this._element.appendChild(this.action);
-        this._actionContainer.appendChild(this._list);
+
-        this._list.appendChild(this.action);
+        this.render();
-        //
+    }
+
+    init(params: GroupPanelPartInitParameters): void {
+        this._title = params.title;
+
         this.addDisposables(
-            addDisposableListener(this._actionContainer, 'mousedown', (ev) => {
+            params.api.onDidTitleChange((event) => {
+                this._title = event.title;
+                this.render();
+            }),
+            addDisposableListener(this.action, 'pointerdown', (ev) => {
                 ev.preventDefault();
+            }),
+            addDisposableListener(this.action, 'click', (ev) => {
+                if (ev.defaultPrevented) {
+                    return;
+                }
+
+                ev.preventDefault();
+                params.api.close();
             })
         );
 
         this.render();
     }
 
-    public update(event: PanelUpdateEvent): void {
-        this.params = { ...this.params, ...event.params };
-        this.render();
-    }
-
-    focus(): void {
-        //noop
-    }
-
-    public init(params: GroupPanelPartInitParameters): void {
-        this.params = params;
-        this._content.textContent = params.title;
-
-        addDisposableListener(this.action, 'click', (ev) => {
-            ev.preventDefault(); //
-            this.params.api.close();
-        });
-    }
-
-    onGroupChange(_group: DockviewGroupPanel): void {
-        this.render();
-    }
-
-    onPanelVisibleChange(_isPanelVisible: boolean): void {
-        this.render();
-    }
-
-    public layout(_width: number, _height: number): void {
-        // noop
-    }
-
     private render(): void {
-        if (this._content.textContent !== this.params.title) {
+        if (this._content.textContent !== this._title) {
-            this._content.textContent = this.params.title;
+            this._content.textContent = this._title ?? '';
         }
     }
 }

packages/dockview-core/src/dockview/components/tab/tab.ts

@@ -6,97 +6,89 @@ import {
     PanelTransfer,
 } from '../../../dnd/dataTransfer';
 import { toggleClass } from '../../../dom';
-import { IDockviewComponent } from '../../dockviewComponent';
+import { DockviewComponent } from '../../dockviewComponent';
-import { DockviewDropTargets, ITabRenderer } from '../../types';
+import { ITabRenderer } from '../../types';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
-import { DroptargetEvent, Droptarget } from '../../../dnd/droptarget';
+import {
+    DroptargetEvent,
+    Droptarget,
+    WillShowOverlayEvent,
+} from '../../../dnd/droptarget';
 import { DragHandler } from '../../../dnd/abstractDragHandler';
+import { IDockviewPanel } from '../../dockviewPanel';
+import { addGhostImage } from '../../../dnd/ghost';
 
-export interface ITab {
+class TabDragHandler extends DragHandler {
-    readonly panelId: string;
+    private readonly panelTransfer =
-    readonly element: HTMLElement;
+        LocalSelectionTransfer.getInstance<PanelTransfer>();
-    setContent: (element: ITabRenderer) => void;
+
-    onChanged: Event<MouseEvent>;
+    constructor(
-    onDrop: Event<DroptargetEvent>;
+        element: HTMLElement,
-    setActive(isActive: boolean): void;
+        private readonly accessor: DockviewComponent,
+        private readonly group: DockviewGroupPanel,
+        private readonly panel: IDockviewPanel
+    ) {
+        super(element);
+    }
+
+    getData(event: DragEvent): IDisposable {
+        this.panelTransfer.setData(
+            [new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)],
+            PanelTransfer.prototype
+        );
+
+        return {
+            dispose: () => {
+                this.panelTransfer.clearData(PanelTransfer.prototype);
+            },
+        };
+    }
 }
 
-export class Tab extends CompositeDisposable implements ITab {
+export class Tab extends CompositeDisposable {
     private readonly _element: HTMLElement;
-    private readonly droptarget: Droptarget;
+    private readonly dropTarget: Droptarget;
-    private content?: ITabRenderer;
+    private content: ITabRenderer | undefined = undefined;
 
-    private readonly _onChanged = new Emitter<MouseEvent>();
+    private readonly _onPointDown = new Emitter<MouseEvent>();
-    readonly onChanged: Event<MouseEvent> = this._onChanged.event;
+    readonly onPointerDown: Event<MouseEvent> = this._onPointDown.event;
 
     private readonly _onDropped = new Emitter<DroptargetEvent>();
     readonly onDrop: Event<DroptargetEvent> = this._onDropped.event;
 
+    private readonly _onDragStart = new Emitter<DragEvent>();
+    readonly onDragStart = this._onDragStart.event;
+
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
+
     public get element(): HTMLElement {
         return this._element;
     }
 
     constructor(
-        public readonly panelId: string,
+        public readonly panel: IDockviewPanel,
-        private readonly accessor: IDockviewComponent,
+        private readonly accessor: DockviewComponent,
         private readonly group: DockviewGroupPanel
     ) {
         super();
 
-        this.addDisposables(this._onChanged, this._onDropped);
-
         this._element = document.createElement('div');
-        this._element.className = 'tab';
+        this._element.className = 'dv-tab';
         this._element.tabIndex = 0;
-        this._element.draggable = true;
+        this._element.draggable = !this.accessor.options.disableDnd;
 
-        toggleClass(this.element, 'inactive-tab', true);
+        toggleClass(this.element, 'dv-inactive-tab', true);
 
-        this.addDisposables(
+        const dragHandler = new TabDragHandler(
-            new (class Handler extends DragHandler {
+            this._element,
-                private readonly panelTransfer =
+            this.accessor,
-                    LocalSelectionTransfer.getInstance<PanelTransfer>();
+            this.group,
-
+            this.panel
-                getData(): IDisposable {
-                    this.panelTransfer.setData(
-                        [new PanelTransfer(accessor.id, group.id, panelId)],
-                        PanelTransfer.prototype
-                    );
-
-                    return {
-                        dispose: () => {
-                            this.panelTransfer.clearData(
-                                PanelTransfer.prototype
-                            );
-                        },
-                    };
-                }
-
-                public dispose(): void {
-                    //
-                }
-            })(this._element)
         );
 
-        this.addDisposables(
+        this.dropTarget = new Droptarget(this._element, {
-            addDisposableListener(this._element, 'mousedown', (event) => {
+            acceptedTargetZones: ['left', 'right'],
-                if (event.defaultPrevented) {
+            overlayModel: { activationSize: { value: 50, type: 'percentage' } },
-                    return;
-                }
-                /**
-                 * TODO: alternative to stopPropagation
-                 *
-                 * I need to stop the event propagation here since otherwise it'll be intercepted by event handlers
-                 * on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
-                 */
-                event.stopPropagation();
-
-                this._onChanged.fire(event);
-            })
-        );
-
-        this.droptarget = new Droptarget(this._element, {
-            acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
                 if (this.group.locked) {
                     return false;
@@ -105,35 +97,58 @@ export class Tab extends CompositeDisposable implements ITab {
                 const data = getPanelData();
 
                 if (data && this.accessor.id === data.viewId) {
-                    if (
+                    return true;
-                        data.panelId === null &&
-                        data.groupId === this.group.id
-                    ) {
-                        // don't allow group move to drop on self
-                        return false;
-                    }
-
-                    return this.panelId !== data.panelId;
                 }
 
                 return this.group.model.canDisplayOverlay(
                     event,
                     position,
-                    DockviewDropTargets.Tab
+                    'tab'
                 );
             },
+            getOverrideTarget: () => group.model.dropTargetContainer?.model,
         });
 
+        this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
+
         this.addDisposables(
-            this.droptarget.onDrop((event) => {
+            this._onPointDown,
+            this._onDropped,
+            this._onDragStart,
+            dragHandler.onDragStart((event) => {
+                if (event.dataTransfer) {
+                    const style = getComputedStyle(this.element);
+                    const newNode = this.element.cloneNode(true) as HTMLElement;
+                    Array.from(style).forEach((key) =>
+                        newNode.style.setProperty(
+                            key,
+                            style.getPropertyValue(key),
+                            style.getPropertyPriority(key)
+                        )
+                    );
+                    newNode.style.position = 'absolute';
+
+                    addGhostImage(event.dataTransfer, newNode, {
+                        y: -10,
+                        x: 30,
+                    });
+                }
+                this._onDragStart.fire(event);
+            }),
+            dragHandler,
+            addDisposableListener(this._element, 'pointerdown', (event) => {
+                this._onPointDown.fire(event);
+            }),
+            this.dropTarget.onDrop((event) => {
                 this._onDropped.fire(event);
-            })
+            }),
+            this.dropTarget
         );
     }
 
     public setActive(isActive: boolean): void {
-        toggleClass(this.element, 'active-tab', isActive);
+        toggleClass(this.element, 'dv-active-tab', isActive);
-        toggleClass(this.element, 'inactive-tab', !isActive);
+        toggleClass(this.element, 'dv-inactive-tab', !isActive);
     }
 
     public setContent(part: ITabRenderer): void {
@@ -144,8 +159,11 @@ export class Tab extends CompositeDisposable implements ITab {
         this._element.appendChild(this.content.element);
     }
 
+    public updateDragAndDropState(): void {
+        this._element.draggable = !this.accessor.options.disableDnd;
+    }
+
     public dispose(): void {
         super.dispose();
-        this.droptarget.dispose();
     }
 }

packages/dockview-core/src/dockview/components/titlebar/tabOverflowControl.scss

@@ -0,0 +1,19 @@
+.dv-tabs-overflow-dropdown-default {
+    height: 100%;
+    color: var(--dv-activegroup-hiddenpanel-tab-color);
+
+    margin: var(--dv-tab-margin);
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+
+    > span {
+        padding-left: 0.25rem;
+    }
+
+    > svg {
+        transform: rotate(90deg);
+    }
+}

packages/dockview-core/src/dockview/components/titlebar/tabOverflowControl.ts

@@ -0,0 +1,25 @@
+import { createChevronRightButton } from '../../../svg';
+
+export type DropdownElement = {
+    element: HTMLElement;
+    update: (params: { tabs: number }) => void;
+    dispose?: () => void;
+};
+
+export function createDropdownElementHandle(): DropdownElement {
+    const el = document.createElement('div');
+    el.className = 'dv-tabs-overflow-dropdown-default';
+
+    const text = document.createElement('span');
+    text.textContent = ``;
+    const icon = createChevronRightButton();
+    el.appendChild(icon);
+    el.appendChild(text);
+
+    return {
+        element: el,
+        update: (params: { tabs: number }) => {
+            text.textContent = `${params.tabs}`;
+        },
+    };
+}

packages/dockview-core/src/dockview/components/titlebar/tabs.scss

@@ -0,0 +1,83 @@
+.dv-tabs-container {
+    display: flex;
+    height: 100%;
+    overflow: auto;
+    scrollbar-width: thin; // firefox
+    
+    /* GPU optimizations for smooth scrolling */
+    will-change: scroll-position;
+    transform: translate3d(0, 0, 0);
+
+    &.dv-horizontal {
+        .dv-tab {
+            &:not(:first-child)::before {
+                content: ' ';
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 5;
+                pointer-events: none;
+                background-color: var(--dv-tab-divider-color);
+                width: 1px;
+                height: 100%;
+            }
+        }
+    }
+
+    &::-webkit-scrollbar {
+        height: 3px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: var(--dv-tabs-container-scrollbar-color);
+    }
+}
+
+.dv-scrollable {
+    > .dv-tabs-container {
+        overflow: hidden;
+    }
+}
+
+.dv-tab {
+    -webkit-user-drag: element;
+    outline: none;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    position: relative;
+    box-sizing: border-box;
+    font-size: var(--dv-tab-font-size);
+    margin: var(--dv-tab-margin);
+}
+
+.dv-tabs-overflow-container {
+    flex-direction: column;
+    height: unset;
+    border: 1px solid var(--dv-tab-divider-color);
+    background-color: var(--dv-group-view-background-color);
+
+    .dv-tab {
+        &:not(:last-child) {
+            border-bottom: 1px solid var(--dv-tab-divider-color);
+        }
+    }
+
+    .dv-active-tab {
+        background-color: var(
+            --dv-activegroup-visiblepanel-tab-background-color
+        );
+        color: var(--dv-activegroup-visiblepanel-tab-color);
+    }
+    .dv-inactive-tab {
+        background-color: var(
+            --dv-activegroup-hiddenpanel-tab-background-color
+        );
+        color: var(--dv-activegroup-hiddenpanel-tab-color);
+    }
+}