dockview-react 7.0.4 → 8.0.0

package/dist/package/main.cjs.js

@@ -1,1038 +1,1012 @@
 /**
  * dockview-react
- * @version 7.0.4
- * @link https://github.com/mathuo/dockview
+ * @version 8.0.0
+ * @link https://github.com/dockview/dockview
  * @license MIT
  */
-'use strict';
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let dockview = require("dockview");
+let react = require("react");
+react = __toESM(react);
+let react_dom = require("react-dom");
+react_dom = __toESM(react_dom);
+
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
 
-Object.defineProperty(exports, '__esModule', { value: true });
+//#endregion
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
 
-var dockview = require('dockview');
-var React = require('react');
-var ReactDOM = require('react-dom');
+//#endregion
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectSpread2.js
+function ownKeys(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		r && (o = o.filter(function(r) {
+			return Object.getOwnPropertyDescriptor(e, r).enumerable;
+		})), t.push.apply(t, o);
+	}
+	return t;
+}
+function _objectSpread2(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
+			_defineProperty(e, r, t[r]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
+			Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+		});
+	}
+	return e;
+}
 
+//#endregion
+//#region src/react.ts
 /**
- * This component is intended to interface between vanilla-js and React hence we need to be
- * creative in how we update props.
- * A ref of the component is exposed with an update method; which when called stores the props
- * as a ref within this component and forcefully triggers a re-render of the component using
- * the ref of props we just set on the renderered component as the props passed to the inner
- * component
- */
+* This component is intended to interface between vanilla-js and React hence we need to be
+* creative in how we update props.
+* A ref of the component is exposed with an update method; which when called stores the props
+* as a ref within this component and forcefully triggers a re-render of the component using
+* the ref of props we just set on the renderered component as the props passed to the inner
+* component
+*/
 const ReactComponentBridge = (props, ref) => {
-    const [, triggerRender] = React.useState(0);
-    const _props = React.useRef(props.componentProps);
-    React.useImperativeHandle(ref, () => ({
-        update: (componentProps) => {
-            _props.current = Object.assign(Object.assign({}, _props.current), componentProps);
-            /**
-             * setting a arbitrary piece of state within this component will
-             * trigger a re-render.
-             * we use this rather than updating through a prop since we can
-             * pass a ref into the vanilla-js world.
-             *
-             * Use a monotonic counter rather than `Date.now()` so two
-             * updates within the same millisecond still produce distinct
-             * state values and avoid React's bailout.
-             */
-            triggerRender((n) => n + 1);
-        },
-    }), []);
-    return React.createElement(props.component, _props.current);
+	const [, triggerRender] = react.default.useState(0);
+	const _props = react.default.useRef(props.componentProps);
+	react.default.useImperativeHandle(ref, () => ({ update: (componentProps) => {
+		_props.current = _objectSpread2(_objectSpread2({}, _props.current), componentProps);
+		/**
+		* setting a arbitrary piece of state within this component will
+		* trigger a re-render.
+		* we use this rather than updating through a prop since we can
+		* pass a ref into the vanilla-js world.
+		*
+		* Use a monotonic counter rather than `Date.now()` so two
+		* updates within the same millisecond still produce distinct
+		* state values and avoid React's bailout.
+		*/
+		triggerRender((n) => n + 1);
+	} }), []);
+	return react.default.createElement(props.component, _props.current);
 };
-ReactComponentBridge.displayName = 'DockviewReactJsBridge';
+ReactComponentBridge.displayName = "DockviewReactJsBridge";
 /**
- * Since we are storing the React.Portal references in a rendered array they
- * require a key property like any other React element rendered in an array
- * to prevent excessive re-rendering
- */
+* Since we are storing the React.Portal references in a rendered array they
+* require a key property like any other React element rendered in an array
+* to prevent excessive re-rendering
+*/
 const uniquePortalKeyGenerator = (() => {
-    let value = 1;
-    return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
+	let value = 1;
+	return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
 })();
-const ReactPartContext = React.createContext({});
-class ReactPart {
-    constructor(parent, portalStore, component, parameters, context) {
-        this.parent = parent;
-        this.portalStore = portalStore;
-        this.component = component;
-        this.parameters = parameters;
-        this.context = context;
-        this._initialProps = {};
-        this.disposed = false;
-        this.createPortal();
-    }
-    update(props) {
-        if (this.disposed) {
-            throw new Error('invalid operation: resource is already disposed');
-        }
-        if (this.componentInstance) {
-            this.componentInstance.update(props);
-        }
-        else {
-            // if the component is yet to be mounted store the props
-            this._initialProps = Object.assign(Object.assign({}, this._initialProps), props);
-        }
-    }
-    createPortal() {
-        if (this.disposed) {
-            throw new Error('invalid operation: resource is already disposed');
-        }
-        if (!isReactComponent(this.component)) {
-            /**
-             * we know this isn't a React.FunctionComponent so throw an error here.
-             * if we do not intercept then React library will throw a very obsure error
-             * for the same reason... at least at this point we will emit a sensible stacktrace.
-             */
-            throw new Error('Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components');
-        }
-        const bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
-            component: this
-                .component,
-            componentProps: this.parameters,
-            ref: (element) => {
-                this.componentInstance = element;
-                if (Object.keys(this._initialProps).length > 0) {
-                    this.componentInstance.update(this._initialProps);
-                    this._initialProps = {}; // don't keep a reference to the users object once no longer required
-                }
-            },
-        });
-        const node = this.context
-            ? React.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent)
-            : bridgeComponent;
-        const portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
-        this.ref = {
-            portal,
-            disposable: this.portalStore.addPortal(portal),
-        };
-    }
-    dispose() {
-        var _a;
-        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.disposable.dispose();
-        this.disposed = true;
-    }
-}
+const ReactPartContext = react.default.createContext({});
+var ReactPart = class {
+	constructor(parent, portalStore, component, parameters, context) {
+		this.parent = parent;
+		this.portalStore = portalStore;
+		this.component = component;
+		this.parameters = parameters;
+		this.context = context;
+		this._initialProps = {};
+		this.disposed = false;
+		this.createPortal();
+	}
+	update(props) {
+		if (this.disposed) throw new Error("invalid operation: resource is already disposed");
+		if (this.componentInstance) this.componentInstance.update(props);
+		else this._initialProps = _objectSpread2(_objectSpread2({}, this._initialProps), props);
+	}
+	createPortal() {
+		if (this.disposed) throw new Error("invalid operation: resource is already disposed");
+		if (!isReactComponent(this.component))
+ /**
+		* we know this isn't a React.FunctionComponent so throw an error here.
+		* if we do not intercept then React library will throw a very obsure error
+		* for the same reason... at least at this point we will emit a sensible stacktrace.
+		*/
+		throw new Error("Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components");
+		const bridgeComponent = react.default.createElement(react.default.forwardRef(ReactComponentBridge), {
+			component: this.component,
+			componentProps: this.parameters,
+			ref: (element) => {
+				this.componentInstance = element;
+				if (Object.keys(this._initialProps).length > 0) {
+					this.componentInstance.update(this._initialProps);
+					this._initialProps = {};
+				}
+			}
+		});
+		const node = this.context ? react.default.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent) : bridgeComponent;
+		const portal = react_dom.default.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
+		this.ref = {
+			portal,
+			disposable: this.portalStore.addPortal(portal)
+		};
+	}
+	dispose() {
+		var _this$ref;
+		(_this$ref = this.ref) === null || _this$ref === void 0 || _this$ref.disposable.dispose();
+		this.disposed = true;
+	}
+};
 /**
- * A React Hook that returns an array of portals to be rendered by the user of this hook
- * and a disposable function to add a portal. Calling dispose removes this portal from the
- * portal array
- */
+* A React Hook that returns an array of portals to be rendered by the user of this hook
+* and a disposable function to add a portal. Calling dispose removes this portal from the
+* portal array
+*/
 const usePortalsLifecycle = () => {
-    const [portals, setPortals] = React.useState([]);
-    React.useDebugValue(`Portal count: ${portals.length}`);
-    const addPortal = React.useCallback((portal) => {
-        setPortals((existingPortals) => [...existingPortals, portal]);
-        let disposed = false;
-        return dockview.DockviewDisposable.from(() => {
-            if (disposed) {
-                throw new Error('invalid operation: resource already disposed');
-            }
-            disposed = true;
-            setPortals((existingPortals) => existingPortals.filter((p) => p !== portal));
-        });
-    }, []);
-    return [portals, addPortal];
+	const [portals, setPortals] = react.default.useState([]);
+	react.default.useDebugValue(`Portal count: ${portals.length}`);
+	return [portals, react.default.useCallback((portal) => {
+		setPortals((existingPortals) => [...existingPortals, portal]);
+		let disposed = false;
+		return dockview.DockviewDisposable.from(() => {
+			if (disposed) throw new Error("invalid operation: resource already disposed");
+			disposed = true;
+			setPortals((existingPortals) => existingPortals.filter((p) => p !== portal));
+		});
+	}, [])];
 };
 function isReactComponent(component) {
-    /**
-     * Yes, we could use "react-is" but that would introduce an unwanted peer dependency
-     * so for now we will check in a rather crude fashion...
-     */
-    return (typeof component === 'function' /** Functional Componnts */ ||
-        !!(component === null || component === void 0 ? void 0 : component.$$typeof) /** React.memo(...) Components */);
+	/**
+	* Yes, we could use "react-is" but that would introduce an unwanted peer dependency
+	* so for now we will check in a rather crude fashion...
+	*/
+	return typeof component === "function" || !!(component === null || component === void 0 ? void 0 : component.$$typeof);
 }
 
-class ReactPanelContentPart {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._onDidFocus = new dockview.DockviewEmitter();
-        this.onDidFocus = this._onDidFocus.event;
-        this._onDidBlur = new dockview.DockviewEmitter();
-        this.onDidBlur = this._onDidBlur.event;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    focus() {
-        // TODO
-    }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            params: parameters.params,
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-        });
-    }
-    update(event) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
-    }
-    layout(_width, _height) {
-        // noop
-    }
-    dispose() {
-        var _a;
-        this._onDidFocus.dispose();
-        this._onDidBlur.dispose();
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
+//#endregion
+//#region src/dockview/reactContentPart.ts
+var ReactPanelContentPart = class {
+	get element() {
+		return this._element;
+	}
+	constructor(id, component, reactPortalStore) {
+		this.id = id;
+		this.component = component;
+		this.reactPortalStore = reactPortalStore;
+		this._onDidFocus = new dockview.DockviewEmitter();
+		this.onDidFocus = this._onDidFocus.event;
+		this._onDidBlur = new dockview.DockviewEmitter();
+		this.onDidBlur = this._onDidBlur.event;
+		this._element = document.createElement("div");
+		this._element.className = "dv-react-part";
+		this._element.style.height = "100%";
+		this._element.style.width = "100%";
+	}
+	focus() {}
+	init(parameters) {
+		this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+			params: parameters.params,
+			api: parameters.api,
+			containerApi: parameters.containerApi
+		});
+	}
+	update(event) {
+		var _this$part;
+		(_this$part = this.part) === null || _this$part === void 0 || _this$part.update({ params: event.params });
+	}
+	layout(_width, _height) {}
+	dispose() {
+		var _this$part2;
+		this._onDidFocus.dispose();
+		this._onDidBlur.dispose();
+		(_this$part2 = this.part) === null || _this$part2 === void 0 || _this$part2.dispose();
+	}
+};
 
-class ReactPanelHeaderPart {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    focus() {
-        //noop
-    }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            params: parameters.params,
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-            tabLocation: parameters.tabLocation,
-        });
-    }
-    update(event) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
-    }
-    layout(_width, _height) {
-        // noop - retrieval from api
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
+//#endregion
+//#region src/dockview/reactHeaderPart.ts
+var ReactPanelHeaderPart = class {
+	get element() {
+		return this._element;
+	}
+	constructor(id, component, reactPortalStore) {
+		this.id = id;
+		this.component = component;
+		this.reactPortalStore = reactPortalStore;
+		this._element = document.createElement("div");
+		this._element.className = "dv-react-part";
+		this._element.style.height = "100%";
+		this._element.style.width = "100%";
+	}
+	focus() {}
+	init(parameters) {
+		this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+			params: parameters.params,
+			api: parameters.api,
+			containerApi: parameters.containerApi,
+			tabLocation: parameters.tabLocation
+		});
+	}
+	update(event) {
+		var _this$part;
+		(_this$part = this.part) === null || _this$part === void 0 || _this$part.update({ params: event.params });
+	}
+	layout(_width, _height) {}
+	dispose() {
+		var _this$part2;
+		(_this$part2 = this.part) === null || _this$part2 === void 0 || _this$part2.dispose();
+	}
+};
 
-class ReactWatermarkPart {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            group: parameters.group,
-            containerApi: parameters.containerApi,
-        });
-    }
-    focus() {
-        // noop
-    }
-    update(params) {
-        var _a, _b, _c;
-        if (this.parameters) {
-            this.parameters.params = params.params;
-        }
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: (_c = (_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) !== null && _c !== void 0 ? _c : {} });
-    }
-    layout(_width, _height) {
-        // noop - retrieval from api
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
+//#endregion
+//#region src/dockview/reactWatermarkPart.ts
+var ReactWatermarkPart = class {
+	get element() {
+		return this._element;
+	}
+	constructor(id, component, reactPortalStore) {
+		this.id = id;
+		this.component = component;
+		this.reactPortalStore = reactPortalStore;
+		this._element = document.createElement("div");
+		this._element.className = "dv-react-part";
+		this._element.style.height = "100%";
+		this._element.style.width = "100%";
+	}
+	init(parameters) {
+		this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+			group: parameters.group,
+			containerApi: parameters.containerApi
+		});
+	}
+	focus() {}
+	update(params) {
+		var _this$part, _this$parameters$para, _this$parameters;
+		if (this.parameters) this.parameters.params = params.params;
+		(_this$part = this.part) === null || _this$part === void 0 || _this$part.update({ params: (_this$parameters$para = (_this$parameters = this.parameters) === null || _this$parameters === void 0 ? void 0 : _this$parameters.params) !== null && _this$parameters$para !== void 0 ? _this$parameters$para : {} });
+	}
+	layout(_width, _height) {}
+	dispose() {
+		var _this$part2;
+		(_this$part2 = this.part) === null || _this$part2 === void 0 || _this$part2.dispose();
+	}
+};
 
-class ReactHeaderActionsRendererPart {
-    get element() {
-        return this._element;
-    }
-    get part() {
-        return this._part;
-    }
-    constructor(component, reactPortalStore, _group) {
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._group = _group;
-        this.mutableDisposable = new dockview.DockviewMutableDisposable();
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    init(parameters) {
-        this.mutableDisposable.value = new dockview.DockviewCompositeDisposable(this._group.model.onDidAddPanel(() => {
-            this.updatePanels();
-        }), this._group.model.onDidRemovePanel(() => {
-            this.updatePanels();
-        }), this._group.model.onDidActivePanelChange(() => {
-            this.updateActivePanel();
-        }), parameters.api.onDidActiveChange(() => {
-            this.updateGroupActive();
-        }), parameters.api.onDidLocationChange((event) => {
-            this.updateLocation(event.location);
-        }));
-        this._part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-            panels: this._group.model.panels,
-            activePanel: this._group.model.activePanel,
-            isGroupActive: this._group.api.isActive,
-            group: this._group,
-            headerPosition: this._group.model.headerPosition,
-            location: parameters.api.location,
-        });
-    }
-    dispose() {
-        var _a;
-        this.mutableDisposable.dispose();
-        (_a = this._part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-    update(event) {
-        var _a;
-        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
-    }
-    updatePanels() {
-        this.update({ params: { panels: this._group.model.panels } });
-    }
-    updateActivePanel() {
-        this.update({
-            params: {
-                activePanel: this._group.model.activePanel,
-            },
-        });
-    }
-    updateGroupActive() {
-        this.update({
-            params: {
-                isGroupActive: this._group.api.isActive,
-            },
-        });
-    }
-    updateLocation(location) {
-        this.update({ params: { location } });
-    }
-}
+//#endregion
+//#region src/dockview/headerActionsRenderer.ts
+var ReactHeaderActionsRendererPart = class {
+	get element() {
+		return this._element;
+	}
+	get part() {
+		return this._part;
+	}
+	constructor(component, reactPortalStore, _group) {
+		this.component = component;
+		this.reactPortalStore = reactPortalStore;
+		this._group = _group;
+		this.mutableDisposable = new dockview.DockviewMutableDisposable();
+		this._element = document.createElement("div");
+		this._element.className = "dv-react-part";
+		this._element.style.height = "100%";
+		this._element.style.width = "100%";
+	}
+	init(parameters) {
+		this.mutableDisposable.value = new dockview.DockviewCompositeDisposable(this._group.model.onDidAddPanel(() => {
+			this.updatePanels();
+		}), this._group.model.onDidRemovePanel(() => {
+			this.updatePanels();
+		}), this._group.model.onDidActivePanelChange(() => {
+			this.updateActivePanel();
+		}), parameters.api.onDidActiveChange(() => {
+			this.updateGroupActive();
+		}), parameters.api.onDidLocationChange((event) => {
+			this.updateLocation(event.location);
+		}));
+		this._part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+			api: parameters.api,
+			containerApi: parameters.containerApi,
+			panels: this._group.model.panels,
+			activePanel: this._group.model.activePanel,
+			isGroupActive: this._group.api.isActive,
+			group: this._group,
+			headerPosition: this._group.model.headerPosition,
+			location: parameters.api.location
+		});
+	}
+	dispose() {
+		var _this$_part;
+		this.mutableDisposable.dispose();
+		(_this$_part = this._part) === null || _this$_part === void 0 || _this$_part.dispose();
+	}
+	update(event) {
+		var _this$_part2;
+		(_this$_part2 = this._part) === null || _this$_part2 === void 0 || _this$_part2.update(event.params);
+	}
+	updatePanels() {
+		this.update({ params: { panels: this._group.model.panels } });
+	}
+	updateActivePanel() {
+		this.update({ params: { activePanel: this._group.model.activePanel } });
+	}
+	updateGroupActive() {
+		this.update({ params: { isGroupActive: this._group.api.isActive } });
+	}
+	updateLocation(location) {
+		this.update({ params: { location } });
+	}
+};
 
-class ReactContextMenuItemPart {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    init(props) {
-        this.part = new ReactPart(this._element, this.reactPortalStore, this.component, props);
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
+//#endregion
+//#region src/dockview/reactContextMenuItemPart.ts
+var ReactContextMenuItemPart = class {
+	get element() {
+		return this._element;
+	}
+	constructor(id, component, reactPortalStore) {
+		this.id = id;
+		this.component = component;
+		this.reactPortalStore = reactPortalStore;
+		this._element = document.createElement("div");
+		this._element.className = "dv-react-part";
+		this._element.style.height = "100%";
+		this._element.style.width = "100%";
+	}
+	init(props) {
+		this.part = new ReactPart(this._element, this.reactPortalStore, this.component, props);
+	}
+	dispose() {
+		var _this$part;
+		(_this$part = this.part) === null || _this$part === void 0 || _this$part.dispose();
+	}
+};
 
-class ReactTabGroupChipPart {
-    get element() {
-        return this._element;
-    }
-    constructor(component, reactPortalStore) {
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.display = 'inline-flex';
-    }
-    init(params) {
-        this.part = new ReactPart(this._element, this.reactPortalStore, this.component, {
-            tabGroup: params.tabGroup,
-            api: params.api,
-        });
-    }
-    update(params) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ tabGroup: params.tabGroup });
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
+//#endregion
+//#region src/dockview/reactTabGroupChipPart.ts
+var ReactTabGroupChipPart = class {
+	get element() {
+		return this._element;
+	}
+	constructor(component, reactPortalStore) {
+		this.component = component;
+		this.reactPortalStore = reactPortalStore;
+		this._element = document.createElement("div");
+		this._element.className = "dv-react-part";
+		this._element.style.display = "inline-flex";
+	}
+	init(params) {
+		this.part = new ReactPart(this._element, this.reactPortalStore, this.component, {
+			tabGroup: params.tabGroup,
+			api: params.api
+		});
+	}
+	update(params) {
+		var _this$part;
+		(_this$part = this.part) === null || _this$part === void 0 || _this$part.update({ tabGroup: params.tabGroup });
+	}
+	dispose() {
+		var _this$part2;
+		(_this$part2 = this.part) === null || _this$part2 === void 0 || _this$part2.dispose();
+	}
+};
 
-class ReactGroupDragGhostPart {
-    get element() {
-        return this._element;
-    }
-    constructor(component, reactPortalStore) {
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.display = 'inline-flex';
-    }
-    init(params) {
-        this.part = new ReactPart(this._element, this.reactPortalStore, this.component, {
-            group: params.group,
-            api: params.api,
-        });
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
+//#endregion
+//#region src/dockview/reactGroupDragGhostPart.ts
+var ReactGroupDragGhostPart = class {
+	get element() {
+		return this._element;
+	}
+	constructor(component, reactPortalStore) {
+		this.component = component;
+		this.reactPortalStore = reactPortalStore;
+		this._element = document.createElement("div");
+		this._element.className = "dv-react-part";
+		this._element.style.display = "inline-flex";
+	}
+	init(params) {
+		this.part = new ReactPart(this._element, this.reactPortalStore, this.component, {
+			group: params.group,
+			api: params.api
+		});
+	}
+	dispose() {
+		var _this$part;
+		(_this$part = this.part) === null || _this$part === void 0 || _this$part.dispose();
+	}
+};
 
+//#endregion
+//#region src/dockview/dockview.tsx
 function createGroupControlElement(component, store) {
-    return component
-        ? (groupPanel) => {
-            return new ReactHeaderActionsRendererPart(component, store, groupPanel);
-        }
-        : undefined;
+	return component ? (groupPanel) => {
+		return new ReactHeaderActionsRendererPart(component, store, groupPanel);
+	} : void 0;
 }
-const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
+const DEFAULT_REACT_TAB = "props.defaultTabComponent";
 function extractCoreOptions$3(props) {
-    const coreOptions = dockview.PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
-        if (key in props) {
-            obj[key] = props[key];
-        }
-        return obj;
-    }, {});
-    return coreOptions;
+	return dockview.PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
+		if (key in props) obj[key] = props[key];
+		return obj;
+	}, {});
 }
-const DockviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const dockviewRef = React.useRef(undefined);
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    const prevProps = React.useRef({});
-    React.useEffect(() => {
-        const changes = {};
-        dockview.PROPERTY_KEYS_DOCKVIEW.forEach((propKey) => {
-            const key = propKey;
-            const propValue = props[key];
-            if (key in props && propValue !== prevProps.current[key]) {
-                changes[key] = propValue;
-            }
-        });
-        if (dockviewRef.current) {
-            dockviewRef.current.updateOptions(changes);
-        }
-        prevProps.current = props;
-    }, dockview.PROPERTY_KEYS_DOCKVIEW.map((key) => props[key]));
-    React.useEffect(() => {
-        var _a;
-        if (!domRef.current) {
-            return;
-        }
-        const frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
-        if (props.defaultTabComponent) {
-            frameworkTabComponents[DEFAULT_REACT_TAB] =
-                props.defaultTabComponent;
-        }
-        const frameworkOptions = {
-            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
-            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
-            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
-            createComponent: (options) => {
-                return new ReactPanelContentPart(options.id, props.components[options.name], {
-                    addPortal,
-                });
-            },
-            createTabComponent(options) {
-                return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
-                    addPortal,
-                });
-            },
-            createWatermarkComponent: props.watermarkComponent
-                ? () => {
-                    return new ReactWatermarkPart('watermark', props.watermarkComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-            defaultTabComponent: props.defaultTabComponent
-                ? DEFAULT_REACT_TAB
-                : undefined,
-            createContextMenuItemComponent: (options) => {
-                if (!options.component) {
-                    return undefined;
-                }
-                return new ReactContextMenuItemPart(options.id, options.component, { addPortal });
-            },
-        };
-        const coreOptions = extractCoreOptions$3(props);
-        if (props.tabGroupChipComponent) {
-            const chipComponent = props.tabGroupChipComponent;
-            coreOptions.createTabGroupChipComponent = () => {
-                return new ReactTabGroupChipPart(chipComponent, {
-                    addPortal,
-                });
-            };
-        }
-        if (props.groupDragGhostComponent) {
-            const ghostComponent = props.groupDragGhostComponent;
-            coreOptions.createGroupDragGhostComponent = () => {
-                return new ReactGroupDragGhostPart(ghostComponent, {
-                    addPortal,
-                });
-            };
-        }
-        const api = dockview.createDockview(domRef.current, Object.assign(Object.assign({}, coreOptions), frameworkOptions));
-        const { clientWidth, clientHeight } = domRef.current;
-        api.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api });
-        }
-        dockviewRef.current = api;
-        return () => {
-            dockviewRef.current = undefined;
-            api.dispose();
-        };
-    }, []);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return () => {
-                // noop
-            };
-        }
-        const disposable = dockviewRef.current.onDidDrop((event) => {
-            if (props.onDidDrop) {
-                props.onDidDrop(event);
-            }
-        });
-        return () => {
-            disposable.dispose();
-        };
-    }, [props.onDidDrop]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return () => {
-                // noop
-            };
-        }
-        const disposable = dockviewRef.current.onWillDrop((event) => {
-            if (props.onWillDrop) {
-                props.onWillDrop(event);
-            }
-        });
-        return () => {
-            disposable.dispose();
-        };
-    }, [props.onWillDrop]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createTabGroupChipComponent: props.tabGroupChipComponent
-                ? () => {
-                    return new ReactTabGroupChipPart(props.tabGroupChipComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-        });
-    }, [props.tabGroupChipComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createGroupDragGhostComponent: props.groupDragGhostComponent
-                ? () => {
-                    return new ReactGroupDragGhostPart(props.groupDragGhostComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-        });
-    }, [props.groupDragGhostComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createComponent: (options) => {
-                return new ReactPanelContentPart(options.id, props.components[options.name], {
-                    addPortal,
-                });
-            },
-        });
-    }, [props.components]);
-    React.useEffect(() => {
-        var _a;
-        if (!dockviewRef.current) {
-            return;
-        }
-        const frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
-        if (props.defaultTabComponent) {
-            frameworkTabComponents[DEFAULT_REACT_TAB] =
-                props.defaultTabComponent;
-        }
-        dockviewRef.current.updateOptions({
-            defaultTabComponent: props.defaultTabComponent
-                ? DEFAULT_REACT_TAB
-                : undefined,
-            createTabComponent(options) {
-                return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
-                    addPortal,
-                });
-            },
-        });
-    }, [props.tabComponents, props.defaultTabComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createWatermarkComponent: props.watermarkComponent
-                ? () => {
-                    return new ReactWatermarkPart('watermark', props.watermarkComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-        });
-    }, [props.watermarkComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
-        });
-    }, [props.rightHeaderActionsComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
-        });
-    }, [props.leftHeaderActionsComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
-        });
-    }, [props.prefixHeaderActionsComponent]);
-    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+const DockviewReact = react.default.forwardRef((props, ref) => {
+	const domRef = react.default.useRef(null);
+	const dockviewRef = react.default.useRef(void 0);
+	const [portals, addPortal] = usePortalsLifecycle();
+	react.default.useImperativeHandle(ref, () => domRef.current, []);
+	const prevProps = react.default.useRef({});
+	react.default.useEffect(() => {
+		const changes = {};
+		dockview.PROPERTY_KEYS_DOCKVIEW.forEach((propKey) => {
+			const key = propKey;
+			const propValue = props[key];
+			if (key in props && propValue !== prevProps.current[key]) changes[key] = propValue;
+		});
+		if (dockviewRef.current) dockviewRef.current.updateOptions(changes);
+		prevProps.current = props;
+	}, dockview.PROPERTY_KEYS_DOCKVIEW.map((key) => props[key]));
+	react.default.useEffect(() => {
+		if (!domRef.current) return;
+		const frameworkTabComponents = _objectSpread2({}, props.tabComponents);
+		if (props.defaultTabComponent) frameworkTabComponents[DEFAULT_REACT_TAB] = props.defaultTabComponent;
+		const frameworkOptions = {
+			createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
+			createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+			createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
+			createComponent: (options) => {
+				return new ReactPanelContentPart(options.id, props.components[options.name], { addPortal });
+			},
+			createTabComponent(options) {
+				return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], { addPortal });
+			},
+			createWatermarkComponent: props.watermarkComponent ? () => {
+				return new ReactWatermarkPart("watermark", props.watermarkComponent, { addPortal });
+			} : void 0,
+			defaultTabComponent: props.defaultTabComponent ? DEFAULT_REACT_TAB : void 0,
+			createContextMenuItemComponent: (options) => {
+				if (!options.component) return;
+				return new ReactContextMenuItemPart(options.id, options.component, { addPortal });
+			}
+		};
+		const coreOptions = extractCoreOptions$3(props);
+		if (props.tabGroupChipComponent) {
+			const chipComponent = props.tabGroupChipComponent;
+			coreOptions.createTabGroupChipComponent = () => {
+				return new ReactTabGroupChipPart(chipComponent, { addPortal });
+			};
+		}
+		if (props.groupDragGhostComponent) {
+			const ghostComponent = props.groupDragGhostComponent;
+			coreOptions.createGroupDragGhostComponent = () => {
+				return new ReactGroupDragGhostPart(ghostComponent, { addPortal });
+			};
+		}
+		const api = (0, dockview.createDockview)(domRef.current, _objectSpread2(_objectSpread2({}, coreOptions), frameworkOptions));
+		const { clientWidth, clientHeight } = domRef.current;
+		api.layout(clientWidth, clientHeight);
+		if (props.onReady) props.onReady({ api });
+		dockviewRef.current = api;
+		return () => {
+			dockviewRef.current = void 0;
+			api.dispose();
+		};
+	}, []);
+	react.default.useEffect(() => {
+		if (!dockviewRef.current) return () => {};
+		const disposable = dockviewRef.current.onDidDrop((event) => {
+			if (props.onDidDrop) props.onDidDrop(event);
+		});
+		return () => {
+			disposable.dispose();
+		};
+	}, [props.onDidDrop]);
+	react.default.useEffect(() => {
+		if (!dockviewRef.current) return () => {};
+		const disposable = dockviewRef.current.onWillDrop((event) => {
+			if (props.onWillDrop) props.onWillDrop(event);
+		});
+		return () => {
+			disposable.dispose();
+		};
+	}, [props.onWillDrop]);
+	react.default.useEffect(() => {
+		if (!dockviewRef.current) return;
+		dockviewRef.current.updateOptions({ createTabGroupChipComponent: props.tabGroupChipComponent ? () => {
+			return new ReactTabGroupChipPart(props.tabGroupChipComponent, { addPortal });
+		} : void 0 });
+	}, [props.tabGroupChipComponent]);
+	react.default.useEffect(() => {
+		if (!dockviewRef.current) return;
+		dockviewRef.current.updateOptions({ createGroupDragGhostComponent: props.groupDragGhostComponent ? () => {
+			return new ReactGroupDragGhostPart(props.groupDragGhostComponent, { addPortal });
+		} : void 0 });
+	}, [props.groupDragGhostComponent]);
+	react.default.useEffect(() => {
+		if (!dockviewRef.current) return;
+		dockviewRef.current.updateOptions({ createComponent: (options) => {
+			return new ReactPanelContentPart(options.id, props.components[options.name], { addPortal });
+		} });
+	}, [props.components]);
+	react.default.useEffect(() => {
+		if (!dockviewRef.current) return;
+		const frameworkTabComponents = _objectSpread2({}, props.tabComponents);
+		if (props.defaultTabComponent) frameworkTabComponents[DEFAULT_REACT_TAB] = props.defaultTabComponent;
+		dockviewRef.current.updateOptions({
+			defaultTabComponent: props.defaultTabComponent ? DEFAULT_REACT_TAB : void 0,
+			createTabComponent(options) {
+				return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], { addPortal });
+			}
+		});
+	}, [props.tabComponents, props.defaultTabComponent]);
+	react.default.useEffect(() => {
+		if (!dockviewRef.current) return;
+		dockviewRef.current.updateOptions({ createWatermarkComponent: props.watermarkComponent ? () => {
+			return new ReactWatermarkPart("watermark", props.watermarkComponent, { addPortal });
+		} : void 0 });
+	}, [props.watermarkComponent]);
+	react.default.useEffect(() => {
+		if (!dockviewRef.current) return;
+		dockviewRef.current.updateOptions({ createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }) });
+	}, [props.rightHeaderActionsComponent]);
+	react.default.useEffect(() => {
+		if (!dockviewRef.current) return;
+		dockviewRef.current.updateOptions({ createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }) });
+	}, [props.leftHeaderActionsComponent]);
+	react.default.useEffect(() => {
+		if (!dockviewRef.current) return;
+		dockviewRef.current.updateOptions({ createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }) });
+	}, [props.prefixHeaderActionsComponent]);
+	return /* @__PURE__ */ react.default.createElement("div", {
+		style: {
+			height: "100%",
+			width: "100%"
+		},
+		ref: domRef
+	}, portals);
 });
-DockviewReact.displayName = 'DockviewComponent';
+DockviewReact.displayName = "DockviewComponent";
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
+//#endregion
+//#region src/svg.tsx
+const CloseButton = () => /* @__PURE__ */ react.default.createElement("svg", {
+	height: "11",
+	width: "11",
+	viewBox: "0 0 28 28",
+	"aria-hidden": "false",
+	focusable: false,
+	className: "dv-svg"
+}, /* @__PURE__ */ react.default.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" }));
+const PinButton = () => /* @__PURE__ */ react.default.createElement("svg", {
+	height: "11",
+	width: "11",
+	viewBox: "0 0 24 24",
+	"aria-hidden": "false",
+	focusable: false,
+	className: "dv-svg"
+}, /* @__PURE__ */ react.default.createElement("path", { d: "M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" }));
 
-const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dv-svg" },
-    React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
+//#endregion
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectWithoutPropertiesLoose.js
+function _objectWithoutPropertiesLoose(r, e) {
+	if (null == r) return {};
+	var t = {};
+	for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+		if (e.includes(n)) continue;
+		t[n] = r[n];
+	}
+	return t;
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectWithoutProperties.js
+function _objectWithoutProperties(e, t) {
+	if (null == e) return {};
+	var o, r, i = _objectWithoutPropertiesLoose(e, t);
+	if (Object.getOwnPropertySymbols) {
+		var s = Object.getOwnPropertySymbols(e);
+		for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+	}
+	return i;
+}
 
+//#endregion
+//#region src/dockview/defaultTab.tsx
+const _excluded = [
+	"api",
+	"containerApi",
+	"params",
+	"hideClose",
+	"closeActionOverride",
+	"onPointerDown",
+	"onPointerUp",
+	"onPointerLeave",
+	"tabLocation"
+];
 function useTitle(api) {
-    const [title, setTitle] = React.useState(api.title);
-    React.useEffect(() => {
-        const disposable = api.onDidTitleChange((event) => {
-            setTitle(event.title);
-        });
-        // Depending on the order in which React effects are run, the title may already be out of sync (cf. issue #1003).
-        if (title !== api.title) {
-            setTitle(api.title);
-        }
-        return () => {
-            disposable.dispose();
-        };
-    }, [api]);
-    return title;
+	const [title, setTitle] = react.default.useState(api.title);
+	react.default.useEffect(() => {
+		const disposable = api.onDidTitleChange((event) => {
+			setTitle(event.title);
+		});
+		if (title !== api.title) setTitle(api.title);
+		return () => {
+			disposable.dispose();
+		};
+	}, [api]);
+	return title;
 }
-const DockviewDefaultTab = (_a) => {
-    var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride, onPointerDown, onPointerUp, onPointerLeave, tabLocation } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride", "onPointerDown", "onPointerUp", "onPointerLeave", "tabLocation"]);
-    const title = useTitle(api);
-    const isMiddleMouseButton = React.useRef(false);
-    const onClose = React.useCallback((event) => {
-        event.preventDefault();
-        if (closeActionOverride) {
-            closeActionOverride();
-        }
-        else {
-            api.close();
-        }
-    }, [api, closeActionOverride]);
-    const onBtnPointerDown = React.useCallback((event) => {
-        event.preventDefault();
-    }, []);
-    const _onPointerDown = React.useCallback((event) => {
-        isMiddleMouseButton.current = event.button === 1;
-        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
-    }, [onPointerDown]);
-    const _onPointerUp = React.useCallback((event) => {
-        if (isMiddleMouseButton && event.button === 1 && !hideClose) {
-            isMiddleMouseButton.current = false;
-            onClose(event);
-        }
-        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
-    }, [onPointerUp, onClose, hideClose]);
-    const _onPointerLeave = React.useCallback((event) => {
-        isMiddleMouseButton.current = false;
-        onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(event);
-    }, [onPointerLeave]);
-    return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onPointerDown: _onPointerDown, onPointerUp: _onPointerUp, onPointerLeave: _onPointerLeave, className: "dv-default-tab" }),
-        React.createElement("span", { className: "dv-default-tab-content" }, title),
-        !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
-            React.createElement(CloseButton, null)))));
+function useIsPinned(api) {
+	const [isPinned, setIsPinned] = react.default.useState(api.isPinned);
+	react.default.useEffect(() => {
+		const disposable = api.onDidChangePinned((event) => {
+			setIsPinned(event.isPinned);
+		});
+		if (isPinned !== api.isPinned) setIsPinned(api.isPinned);
+		return () => {
+			disposable.dispose();
+		};
+	}, [api]);
+	return isPinned;
+}
+const DockviewDefaultTab = (_ref) => {
+	let { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride, onPointerDown, onPointerUp, onPointerLeave, tabLocation } = _ref, rest = _objectWithoutProperties(_ref, _excluded);
+	const title = useTitle(api);
+	const isPinned = useIsPinned(api);
+	const isMiddleMouseButton = react.default.useRef(false);
+	const onClose = react.default.useCallback((event) => {
+		event.preventDefault();
+		if (closeActionOverride) closeActionOverride();
+		else api.close();
+	}, [api, closeActionOverride]);
+	const onBtnPointerDown = react.default.useCallback((event) => {
+		event.preventDefault();
+	}, []);
+	const _onPointerDown = react.default.useCallback((event) => {
+		isMiddleMouseButton.current = event.button === 1;
+		onPointerDown === null || onPointerDown === void 0 || onPointerDown(event);
+	}, [onPointerDown]);
+	const _onPointerUp = react.default.useCallback((event) => {
+		if (isMiddleMouseButton.current && event.button === 1 && !hideClose) {
+			isMiddleMouseButton.current = false;
+			onClose(event);
+		}
+		onPointerUp === null || onPointerUp === void 0 || onPointerUp(event);
+	}, [
+		onPointerUp,
+		onClose,
+		hideClose
+	]);
+	const _onPointerLeave = react.default.useCallback((event) => {
+		isMiddleMouseButton.current = false;
+		onPointerLeave === null || onPointerLeave === void 0 || onPointerLeave(event);
+	}, [onPointerLeave]);
+	return /* @__PURE__ */ react.default.createElement("div", _objectSpread2(_objectSpread2({ "data-testid": "dockview-dv-default-tab" }, rest), {}, {
+		onPointerDown: _onPointerDown,
+		onPointerUp: _onPointerUp,
+		onPointerLeave: _onPointerLeave,
+		className: "dv-default-tab"
+	}), isPinned && /* @__PURE__ */ react.default.createElement("div", { className: "dv-tab-pin" }, /* @__PURE__ */ react.default.createElement(PinButton, null)), /* @__PURE__ */ react.default.createElement("span", { className: "dv-default-tab-content" }, title), !hideClose && /* @__PURE__ */ react.default.createElement("button", {
+		type: "button",
+		className: "dv-default-tab-action",
+		"aria-label": "Close tab",
+		onPointerDown: onBtnPointerDown,
+		onClick: onClose
+	}, /* @__PURE__ */ react.default.createElement(CloseButton, null)));
 };
 
-class ReactPanelView extends dockview.SplitviewPanel {
-    constructor(id, component, reactComponent, reactPortalStore) {
-        super(id, component);
-        this.reactComponent = reactComponent;
-        this.reactPortalStore = reactPortalStore;
-    }
-    getComponent() {
-        var _a, _b;
-        return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
-            api: this.api,
-            containerApi: new dockview.SplitviewApi(this._params.accessor),
-        });
-    }
-}
+//#endregion
+//#region src/splitview/view.ts
+var ReactPanelView = class extends dockview.SplitviewPanel {
+	constructor(id, component, reactComponent, reactPortalStore) {
+		super(id, component);
+		this.reactComponent = reactComponent;
+		this.reactPortalStore = reactPortalStore;
+	}
+	getComponent() {
+		var _this$_params$params, _this$_params;
+		return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
+			params: (_this$_params$params = (_this$_params = this._params) === null || _this$_params === void 0 ? void 0 : _this$_params.params) !== null && _this$_params$params !== void 0 ? _this$_params$params : {},
+			api: this.api,
+			containerApi: new dockview.SplitviewApi(this._params.accessor)
+		});
+	}
+};
 
+//#endregion
+//#region src/splitview/splitview.tsx
 function extractCoreOptions$2(props) {
-    const coreOptions = dockview.PROPERTY_KEYS_SPLITVIEW.reduce((obj, key) => {
-        if (key in props) {
-            obj[key] = props[key];
-        }
-        return obj;
-    }, {});
-    return coreOptions;
+	return dockview.PROPERTY_KEYS_SPLITVIEW.reduce((obj, key) => {
+		if (key in props) obj[key] = props[key];
+		return obj;
+	}, {});
 }
-const SplitviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const splitviewRef = React.useRef(undefined);
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    const prevProps = React.useRef({});
-    React.useEffect(() => {
-        const changes = {};
-        dockview.PROPERTY_KEYS_SPLITVIEW.forEach((propKey) => {
-            const key = propKey;
-            const propValue = props[key];
-            if (key in props && propValue !== prevProps.current[key]) {
-                changes[key] = propValue;
-            }
-        });
-        if (splitviewRef.current) {
-            splitviewRef.current.updateOptions(changes);
-        }
-        prevProps.current = props;
-    }, dockview.PROPERTY_KEYS_SPLITVIEW.map((key) => props[key]));
-    React.useEffect(() => {
-        if (!domRef.current) {
-            return () => {
-                // noop
-            };
-        }
-        const frameworkOptions = {
-            createComponent: (options) => {
-                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
-            },
-        };
-        const api = dockview.createSplitview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions$2(props)), frameworkOptions));
-        const { clientWidth, clientHeight } = domRef.current;
-        api.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api });
-        }
-        splitviewRef.current = api;
-        return () => {
-            splitviewRef.current = undefined;
-            api.dispose();
-        };
-    }, []);
-    React.useEffect(() => {
-        if (!splitviewRef.current) {
-            return;
-        }
-        splitviewRef.current.updateOptions({
-            createComponent: (options) => {
-                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
-            },
-        });
-    }, [props.components]);
-    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+const SplitviewReact = react.default.forwardRef((props, ref) => {
+	const domRef = react.default.useRef(null);
+	const splitviewRef = react.default.useRef(void 0);
+	const [portals, addPortal] = usePortalsLifecycle();
+	react.default.useImperativeHandle(ref, () => domRef.current, []);
+	const prevProps = react.default.useRef({});
+	react.default.useEffect(() => {
+		const changes = {};
+		dockview.PROPERTY_KEYS_SPLITVIEW.forEach((propKey) => {
+			const key = propKey;
+			const propValue = props[key];
+			if (key in props && propValue !== prevProps.current[key]) changes[key] = propValue;
+		});
+		if (splitviewRef.current) splitviewRef.current.updateOptions(changes);
+		prevProps.current = props;
+	}, dockview.PROPERTY_KEYS_SPLITVIEW.map((key) => props[key]));
+	react.default.useEffect(() => {
+		if (!domRef.current) return () => {};
+		const api = (0, dockview.createSplitview)(domRef.current, _objectSpread2(_objectSpread2({}, extractCoreOptions$2(props)), { createComponent: (options) => {
+			return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
+		} }));
+		const { clientWidth, clientHeight } = domRef.current;
+		api.layout(clientWidth, clientHeight);
+		if (props.onReady) props.onReady({ api });
+		splitviewRef.current = api;
+		return () => {
+			splitviewRef.current = void 0;
+			api.dispose();
+		};
+	}, []);
+	react.default.useEffect(() => {
+		if (!splitviewRef.current) return;
+		splitviewRef.current.updateOptions({ createComponent: (options) => {
+			return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
+		} });
+	}, [props.components]);
+	return /* @__PURE__ */ react.default.createElement("div", {
+		style: {
+			height: "100%",
+			width: "100%"
+		},
+		ref: domRef
+	}, portals);
 });
-SplitviewReact.displayName = 'SplitviewComponent';
+SplitviewReact.displayName = "SplitviewComponent";
 
-class ReactGridPanelView extends dockview.GridviewPanel {
-    constructor(id, component, reactComponent, reactPortalStore) {
-        super(id, component);
-        this.reactComponent = reactComponent;
-        this.reactPortalStore = reactPortalStore;
-    }
-    getComponent() {
-        var _a, _b;
-        return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
-            api: this.api,
-            // TODO: fix casting hack
-            containerApi: new dockview.GridviewApi(this._params
-                .accessor),
-        });
-    }
-}
+//#endregion
+//#region src/gridview/view.ts
+var ReactGridPanelView = class extends dockview.GridviewPanel {
+	constructor(id, component, reactComponent, reactPortalStore) {
+		super(id, component);
+		this.reactComponent = reactComponent;
+		this.reactPortalStore = reactPortalStore;
+	}
+	getComponent() {
+		var _this$_params$params, _this$_params;
+		return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
+			params: (_this$_params$params = (_this$_params = this._params) === null || _this$_params === void 0 ? void 0 : _this$_params.params) !== null && _this$_params$params !== void 0 ? _this$_params$params : {},
+			api: this.api,
+			containerApi: new dockview.GridviewApi(this._params.accessor)
+		});
+	}
+};
 
+//#endregion
+//#region src/gridview/gridview.tsx
 function extractCoreOptions$1(props) {
-    const coreOptions = dockview.PROPERTY_KEYS_GRIDVIEW.reduce((obj, key) => {
-        if (key in props) {
-            obj[key] = props[key];
-        }
-        return obj;
-    }, {});
-    return coreOptions;
+	return dockview.PROPERTY_KEYS_GRIDVIEW.reduce((obj, key) => {
+		if (key in props) obj[key] = props[key];
+		return obj;
+	}, {});
 }
-const GridviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const gridviewRef = React.useRef(undefined);
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    const prevProps = React.useRef({});
-    React.useEffect(() => {
-        const changes = {};
-        dockview.PROPERTY_KEYS_GRIDVIEW.forEach((propKey) => {
-            const key = propKey;
-            const propValue = props[key];
-            if (key in props && propValue !== prevProps.current[key]) {
-                changes[key] = propValue;
-            }
-        });
-        if (gridviewRef.current) {
-            gridviewRef.current.updateOptions(changes);
-        }
-        prevProps.current = props;
-    }, dockview.PROPERTY_KEYS_GRIDVIEW.map((key) => props[key]));
-    React.useEffect(() => {
-        if (!domRef.current) {
-            return () => {
-                // noop
-            };
-        }
-        const frameworkOptions = {
-            createComponent: (options) => {
-                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
-            },
-        };
-        const api = dockview.createGridview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions$1(props)), frameworkOptions));
-        const { clientWidth, clientHeight } = domRef.current;
-        api.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api });
-        }
-        gridviewRef.current = api;
-        return () => {
-            gridviewRef.current = undefined;
-            api.dispose();
-        };
-    }, []);
-    React.useEffect(() => {
-        if (!gridviewRef.current) {
-            return;
-        }
-        gridviewRef.current.updateOptions({
-            createComponent: (options) => {
-                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
-            },
-        });
-    }, [props.components]);
-    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+const GridviewReact = react.default.forwardRef((props, ref) => {
+	const domRef = react.default.useRef(null);
+	const gridviewRef = react.default.useRef(void 0);
+	const [portals, addPortal] = usePortalsLifecycle();
+	react.default.useImperativeHandle(ref, () => domRef.current, []);
+	const prevProps = react.default.useRef({});
+	react.default.useEffect(() => {
+		const changes = {};
+		dockview.PROPERTY_KEYS_GRIDVIEW.forEach((propKey) => {
+			const key = propKey;
+			const propValue = props[key];
+			if (key in props && propValue !== prevProps.current[key]) changes[key] = propValue;
+		});
+		if (gridviewRef.current) gridviewRef.current.updateOptions(changes);
+		prevProps.current = props;
+	}, dockview.PROPERTY_KEYS_GRIDVIEW.map((key) => props[key]));
+	react.default.useEffect(() => {
+		if (!domRef.current) return () => {};
+		const api = (0, dockview.createGridview)(domRef.current, _objectSpread2(_objectSpread2({}, extractCoreOptions$1(props)), { createComponent: (options) => {
+			return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
+		} }));
+		const { clientWidth, clientHeight } = domRef.current;
+		api.layout(clientWidth, clientHeight);
+		if (props.onReady) props.onReady({ api });
+		gridviewRef.current = api;
+		return () => {
+			gridviewRef.current = void 0;
+			api.dispose();
+		};
+	}, []);
+	react.default.useEffect(() => {
+		if (!gridviewRef.current) return;
+		gridviewRef.current.updateOptions({ createComponent: (options) => {
+			return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
+		} });
+	}, [props.components]);
+	return /* @__PURE__ */ react.default.createElement("div", {
+		style: {
+			height: "100%",
+			width: "100%"
+		},
+		ref: domRef
+	}, portals);
 });
-GridviewReact.displayName = 'GridviewComponent';
+GridviewReact.displayName = "GridviewComponent";
 
-class PanePanelSection {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            params: parameters.params,
-            api: parameters.api,
-            title: parameters.title,
-            containerApi: parameters.containerApi,
-        });
-    }
-    toJSON() {
-        return {
-            id: this.id,
-        };
-    }
-    update(params) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(params.params);
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
+//#endregion
+//#region src/paneview/view.ts
+var PanePanelSection = class {
+	get element() {
+		return this._element;
+	}
+	constructor(id, component, reactPortalStore) {
+		this.id = id;
+		this.component = component;
+		this.reactPortalStore = reactPortalStore;
+		this._element = document.createElement("div");
+		this._element.style.height = "100%";
+		this._element.style.width = "100%";
+	}
+	init(parameters) {
+		this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+			params: parameters.params,
+			api: parameters.api,
+			title: parameters.title,
+			containerApi: parameters.containerApi
+		});
+	}
+	toJSON() {
+		return { id: this.id };
+	}
+	update(params) {
+		var _this$part;
+		(_this$part = this.part) === null || _this$part === void 0 || _this$part.update(params.params);
+	}
+	dispose() {
+		var _this$part2;
+		(_this$part2 = this.part) === null || _this$part2 === void 0 || _this$part2.dispose();
+	}
+};
 
+//#endregion
+//#region src/paneview/paneview.tsx
 function extractCoreOptions(props) {
-    const coreOptions = dockview.PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
-        if (key in props) {
-            obj[key] = props[key];
-        }
-        return obj;
-    }, {});
-    return coreOptions;
+	return dockview.PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
+		if (key in props) obj[key] = props[key];
+		return obj;
+	}, {});
 }
-const PaneviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const paneviewRef = React.useRef(undefined);
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    const prevProps = React.useRef({});
-    React.useEffect(() => {
-        const changes = {};
-        dockview.PROPERTY_KEYS_PANEVIEW.forEach((propKey) => {
-            const key = propKey;
-            const propValue = props[key];
-            if (key in props && propValue !== prevProps.current[key]) {
-                changes[key] = propValue;
-            }
-        });
-        if (paneviewRef.current) {
-            paneviewRef.current.updateOptions(changes);
-        }
-        prevProps.current = props;
-    }, dockview.PROPERTY_KEYS_PANEVIEW.map((key) => props[key]));
-    React.useEffect(() => {
-        var _a;
-        if (!domRef.current) {
-            return () => {
-                // noop
-            };
-        }
-        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
-        const frameworkOptions = {
-            createComponent: (options) => {
-                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
-            },
-            createHeaderComponent: (options) => {
-                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
-            },
-        };
-        const api = dockview.createPaneview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
-        const { clientWidth, clientHeight } = domRef.current;
-        api.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api });
-        }
-        paneviewRef.current = api;
-        return () => {
-            paneviewRef.current = undefined;
-            api.dispose();
-        };
-    }, []);
-    React.useEffect(() => {
-        if (!paneviewRef.current) {
-            return;
-        }
-        paneviewRef.current.updateOptions({
-            createComponent: (options) => {
-                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
-            },
-        });
-    }, [props.components]);
-    React.useEffect(() => {
-        var _a;
-        if (!paneviewRef.current) {
-            return;
-        }
-        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
-        paneviewRef.current.updateOptions({
-            createHeaderComponent: (options) => {
-                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
-            },
-        });
-    }, [props.headerComponents]);
-    React.useEffect(() => {
-        if (!paneviewRef.current) {
-            return () => {
-                // noop
-            };
-        }
-        const disposable = paneviewRef.current.onDidDrop((event) => {
-            if (props.onDidDrop) {
-                props.onDidDrop(event);
-            }
-        });
-        return () => {
-            disposable.dispose();
-        };
-    }, [props.onDidDrop]);
-    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+const PaneviewReact = react.default.forwardRef((props, ref) => {
+	const domRef = react.default.useRef(null);
+	const paneviewRef = react.default.useRef(void 0);
+	const [portals, addPortal] = usePortalsLifecycle();
+	react.default.useImperativeHandle(ref, () => domRef.current, []);
+	const prevProps = react.default.useRef({});
+	react.default.useEffect(() => {
+		const changes = {};
+		dockview.PROPERTY_KEYS_PANEVIEW.forEach((propKey) => {
+			const key = propKey;
+			const propValue = props[key];
+			if (key in props && propValue !== prevProps.current[key]) changes[key] = propValue;
+		});
+		if (paneviewRef.current) paneviewRef.current.updateOptions(changes);
+		prevProps.current = props;
+	}, dockview.PROPERTY_KEYS_PANEVIEW.map((key) => props[key]));
+	react.default.useEffect(() => {
+		var _props$headerComponen;
+		if (!domRef.current) return () => {};
+		const headerComponents = (_props$headerComponen = props.headerComponents) !== null && _props$headerComponen !== void 0 ? _props$headerComponen : {};
+		const api = (0, dockview.createPaneview)(domRef.current, _objectSpread2(_objectSpread2({}, extractCoreOptions(props)), {
+			createComponent: (options) => {
+				return new PanePanelSection(options.id, props.components[options.name], { addPortal });
+			},
+			createHeaderComponent: (options) => {
+				return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
+			}
+		}));
+		const { clientWidth, clientHeight } = domRef.current;
+		api.layout(clientWidth, clientHeight);
+		if (props.onReady) props.onReady({ api });
+		paneviewRef.current = api;
+		return () => {
+			paneviewRef.current = void 0;
+			api.dispose();
+		};
+	}, []);
+	react.default.useEffect(() => {
+		if (!paneviewRef.current) return;
+		paneviewRef.current.updateOptions({ createComponent: (options) => {
+			return new PanePanelSection(options.id, props.components[options.name], { addPortal });
+		} });
+	}, [props.components]);
+	react.default.useEffect(() => {
+		var _props$headerComponen2;
+		if (!paneviewRef.current) return;
+		const headerComponents = (_props$headerComponen2 = props.headerComponents) !== null && _props$headerComponen2 !== void 0 ? _props$headerComponen2 : {};
+		paneviewRef.current.updateOptions({ createHeaderComponent: (options) => {
+			return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
+		} });
+	}, [props.headerComponents]);
+	react.default.useEffect(() => {
+		if (!paneviewRef.current) return () => {};
+		const disposable = paneviewRef.current.onDidDrop((event) => {
+			if (props.onDidDrop) props.onDidDrop(event);
+		});
+		return () => {
+			disposable.dispose();
+		};
+	}, [props.onDidDrop]);
+	return /* @__PURE__ */ react.default.createElement("div", {
+		style: {
+			height: "100%",
+			width: "100%"
+		},
+		ref: domRef
+	}, portals);
 });
-PaneviewReact.displayName = 'PaneviewComponent';
+PaneviewReact.displayName = "PaneviewComponent";
 
+//#endregion
 exports.DockviewDefaultTab = DockviewDefaultTab;
 exports.DockviewReact = DockviewReact;
 exports.GridviewReact = GridviewReact;
@@ -1043,8 +1017,8 @@ exports.SplitviewReact = SplitviewReact;
 exports.isReactComponent = isReactComponent;
 exports.usePortalsLifecycle = usePortalsLifecycle;
 Object.keys(dockview).forEach(function (k) {
-    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-        enumerable: true,
-        get: function () { return dockview[k]; }
-    });
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return dockview[k]; }
+  });
 });