react-simple-dock 0.1.2 → 0.1.4

package/index.css

@@ -0,0 +1,195 @@
+/* Light Theme, feel free to override */
+:root {
+    --sd-grid-gap: 3px;
+    --sd-panel-border: solid;
+}
+
+:root[data-theme="light"] {
+    --sd-background-color: #fff;
+    --sd-text-color: #000;
+    --sd-tab-border-color: #bdbdbd;
+    --sd-tab-background-color: white;
+    --sd-header-background-color: white;
+    --sd-header-border-color: #cecece;
+    --sd-overlay-color: rgba(69, 159, 232, 0.51);
+    --sd-highlight-color: #4591e8;
+}
+
+/* Dark Theme, feel free to override */
+:root[data-theme="dark"] {
+    --sd-background-color: #22272e;
+    --sd-text-color: #fff;
+    --sd-border-color: #666;
+    --sd-tab-border-color: #111;
+    --sd-highlight-color: #4591e8;
+    --sd-tab-background-color: #1c2128;
+    --sd-header-background-color: #333;
+    --sd-header-border-color: #444;
+    --sd-overlay-color: rgba(105, 159, 232, 0.51);
+}
+
+body[data-jp-theme-light] {
+    /* don't care about the theme, just that we're in JupyterLab */
+    --sd-grid-gap: 7px;
+    --sd-background-color: var(--jp-layout-color3);
+}
+
+.resize-border {
+    position: absolute;
+    background-color: var(--sd-background-color, #fff);
+    opacity: 0;
+    z-index: 10;
+}
+
+.resize-border:hover {
+    opacity: 0.8;
+}
+
+.resize-border.bottom {
+    bottom: calc(0px - var(--sd-grid-gap));
+    left: 0;
+    right: 0;
+    height: calc((var(--sd-grid-gap)));
+    cursor: row-resize;
+}
+
+.resize-border.right {
+    top: 0;
+    bottom: 0;
+    right: calc(0px - var(--sd-grid-gap));
+    width: calc((var(--sd-grid-gap)));
+    cursor: col-resize;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+}
+
+.tab-handle-overlay {
+    position: absolute;
+    box-sizing: border-box;
+    display: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    background: var(--sd-overlay-color, rgba(69, 159, 232, 0.51));
+    border: 2px dashed var(--sd-highlight-color, #4591e8);
+
+    pointer-events: none;
+    transition: 0s linear;
+    transition-property: left, right, top, bottom, width, height;
+}
+
+.panel {
+    position: relative;
+    display: flex;
+    flex: 1 100000000 0;
+    align-self: stretch;
+    height: 100%;
+    width: 100%;
+    background: var(--sd-background-color);
+}
+
+.panel.leaf {
+    flex-direction: column;
+}
+
+.row > .panel-content,
+.column > .panel-content {
+    display: grid;
+    grid-gap: var(--sd-grid-gap);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.leaf > .panel-content {
+    position: relative;
+    flex: 1;
+    border: var(--sd-panel-border, solid) var(--sd-tab-border-color, #bdbdbd);
+    border-width: 0 1px 1px 1px;
+}
+
+.leaf > .panel-content > div {
+    background: var(--sd-tab-background-color);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+}
+
+/* TAB HEADER */
+
+.tab-header {
+    display: flex;
+    flex-direction: row;
+    height: var(--sd-header-height);
+}
+
+.tab-header-border {
+    position: relative;
+    height: 1px;
+    background: var(--sd-tab-border-color, #cecece);
+    margin-top: -2px;
+    z-index: 0;
+}
+
+.tab-header-bottom {
+    position: relative;
+    background: var(--sd-tab-background-color, white);
+    height: 3px;
+    z-index: 2;
+    border: solid var(--sd-tab-border-color, #bdbdbd);
+    border-width: 0 1px 1px 1px;
+    /*
+    Why did I put this ? It messes up the overall width of the layout
+    margin-left: -1px;
+    margin-right: -1px;
+    */
+}
+
+.tab-placeholder {
+    width: 0;
+    transition: width 0.1s linear;
+    height: 0;
+}
+
+.tab-handle {
+    position: relative;
+    box-sizing: border-box;
+    padding: 5px;
+    color: var(--sd-text-color, #000);
+    background: var(--sd-tab-background-color, white);
+    font-size: calc((var(--sd-header-height) - 12px) * 0.8);
+    border: solid var(--sd-tab-border-color, #bdbdbd);
+    border-width: 1px 1px 1px 1px;
+    /* Too overlap the border of the next handle and avoid double borders */
+    margin-right: -1px;
+    z-index: 1;
+}
+
+.tab-handle:nth-child(2) {
+    border-left-width: 1px;
+}
+
+.tab-handle.tab-handle__hidden {
+    z-index: 0;
+}
+
+.tab-handle.tab-handle__visible:before {
+    content: "";
+    display: block;
+    background: var(--sd-highlight-color, #4591e8);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+}

package/index.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import "./index.css";
+import { LayoutConfig, PanelProps } from "./types";
+/**
+ * A Panel component.
+ *
+ * This component represents a Panel within the layout.
+ *
+ * @param props.name The unique identifier of the panel.
+ * @param props.header The content to render in the panel header.
+ * @param props.children The content to render within the panel.
+ */
+export declare const Panel: (props: PanelProps) => any;
+/**
+ * Main layout component that organizes panels and handles drag and drop.
+ *
+ * The Layout component takes child panel components, constructs an initial layout configuration,
+ * and renders the panel structure using NestedPanel. It also wraps the layout in a DndProvider
+ * if drag and drop support is enabled.
+ *
+ * @param children The children `Panel` components to render within the layout.
+ * @param defaultConfig The default layout configuration to use.
+ * @param wrapDnd A boolean flag to enable or disable drag and drop support (default: true).
+ * @returns A React element representing the complete panel layout.
+ */
+export declare function Layout({ children, defaultConfig, wrapDnd, }: {
+    children: React.ReactElement<PanelProps>[] | React.ReactElement<PanelProps>;
+    defaultConfig?: LayoutConfig;
+    wrapDnd?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/index.js

@@ -4,14 +4,24 @@ import "./index.css";
 import { DndProvider, useDrag, useDragDropManager, useDrop } from "react-dnd";
 import { filterPanels, movePanel } from "./utils";
 import { HTML5Backend } from "react-dnd-html5-backend";
-export const Panel = (props) => {
-    return null;
-};
 function useForceUpdate() {
     const [value, setValue] = useState(0); // integer state
     return () => setValue((value) => value + 1); // update state to force render
 }
-const getPanelElementHeader = (node) => node.children[0];
+const getPanelElementMaxHeaderHeight = (config, panelElements) => {
+    // If we have a leaf, then the header height is the max of each tabs header height
+    if (config.kind === "leaf") {
+        return Math.max(...config.tabs.map((tab) => panelElements.get(config).children[0].offsetHeight));
+    }
+    // If we have a row, then the header height is the max of each child's max header height
+    else if (config.kind === "row") {
+        return Math.max(...config.children.map((c) => getPanelElementMaxHeaderHeight(c, panelElements)));
+    }
+    // If we have a column, then the header height is the sum of each child's max header height
+    else {
+        return config.children.reduce((a, b) => a + getPanelElementMaxHeaderHeight(b, panelElements), 0);
+    }
+};
 const TabHandle = ({ name, index, visible, onClick, children, }) => {
     const getItem = () => ({
         name,
@@ -119,15 +129,16 @@ const NestedPanel = React.memo(({ leaves, config, index, onResize, saveSizes, is
         let size = savedSizes.current[idx] * ratio;
         let nextSize = savedSizes.current[idx + 1] + (savedSizes.current[idx] - size);
         const total = savedSizes.current.reduce((a, b) => a + b, 0);
-        const headerHeight = getPanelElementHeader(target.parentElement).offsetHeight;
         if (config.kind === "column") {
+            const headerHeightBefore = getPanelElementMaxHeaderHeight(config.children[idx], panelElements);
+            const headerHeightAfter = getPanelElementMaxHeaderHeight(config.children[idx + 1], panelElements);
             const parentHeight = panelContentRef.current.offsetHeight;
-            if ((size * parentHeight) / total < headerHeight) {
-                size = (headerHeight / parentHeight) * total;
+            if ((size * parentHeight) / total < headerHeightBefore) {
+                size = (headerHeightBefore / parentHeight) * total;
                 nextSize = savedSizes.current[idx + 1] + (savedSizes.current[idx] - size);
             }
-            else if ((nextSize * parentHeight) / total < headerHeight) {
-                nextSize = (headerHeight / parentHeight) * total;
+            else if ((nextSize * parentHeight) / total < headerHeightAfter) {
+                nextSize = (headerHeightAfter / parentHeight) * total;
                 size = savedSizes.current[idx] + (savedSizes.current[idx + 1] - nextSize);
             }
         }
@@ -148,7 +159,7 @@ const NestedPanel = React.memo(({ leaves, config, index, onResize, saveSizes, is
     };
     const panelContentRef = useRef(null);
     const panelRef = useRef(null);
-    return (_jsxs("div", { className: `${config.kind} panel`, style: style, ref: panelRef, children: [config.kind === "leaf" ? (_jsx(TabHeader, { config: config, leaves: leaves, onClick: handleHeaderClick })) : null, _jsx("div", { className: "panel-content", ref: panelContentRef, style: makeStyle(), children: config.kind === "leaf" ? (config.tabIndex < config.tabs.length ? (_jsx("div", { children: leaves[config.tabs[config.tabIndex]].element })) : (_jsx("div", { style: { width: "100%", height: "100%" } }))) : (config.children.map((c, i) => (_jsx(NestedPanel, { config: c, leaves: leaves, saveSizes: handleSaveSizes, index: i, onResize: handleResize, isLast: i === config.children.length - 1, direction: config.kind, panelElements: panelElements }, i)))) }), !isLast && direction === "column" && (_jsx("div", { className: "resize-border bottom", onMouseDown: (e) => handleMouseDown(e, "bottom") })), !isLast && direction === "row" && (_jsx("div", { className: "resize-border right", onMouseDown: (e) => handleMouseDown(e, "right") }))] }));
+    return (_jsxs("div", { className: `${config.kind} panel`, style: style, ref: panelRef, children: [config.kind === "leaf" ? (_jsx(TabHeader, { config: config, leaves: leaves, onClick: handleHeaderClick })) : null, _jsx("div", { className: "panel-content", ref: panelContentRef, style: makeStyle(), children: config.kind === "leaf" ? (config.tabIndex < config.tabs.length ? (_jsx("div", { children: leaves[config.tabs[config.tabIndex]].element }, config.tabs[config.tabIndex])) : (_jsx("div", { style: { width: "100%", height: "100%" } }))) : (config.children.map((c, i) => (_jsx(NestedPanel, { config: c, leaves: leaves, saveSizes: handleSaveSizes, index: i, onResize: handleResize, isLast: i === config.children.length - 1, direction: config.kind, panelElements: panelElements }, i)))) }), !isLast && direction === "column" && (_jsx("div", { className: "resize-border bottom", onMouseDown: (e) => handleMouseDown(e, "bottom") })), !isLast && direction === "row" && (_jsx("div", { className: "resize-border right", onMouseDown: (e) => handleMouseDown(e, "right") }))] }));
 });
 const Overlay = ({ panelElements, onDrop, rootConfig, }) => {
     const closestRef = useRef(null);
@@ -208,14 +219,19 @@ const Overlay = ({ panelElements, onDrop, rootConfig, }) => {
                         zones.push({ rect, config, index, element });
                     };
                     if (config.kind === "leaf") {
-                        if (!config.tabs.includes(name)) {
+                        if (!(config.tabs.length == 1 && config.tabs[0] == name)) {
                             pushZone("TOP", left, top, width, height / 2);
                             pushZone("BOTTOM", left, top + height / 2, width, height / 2);
                             pushZone("LEFT", left, top, width / 2, height);
                             pushZone("RIGHT", left + width / 2, top, width / 2, height);
                         }
-                        pushZone("CENTER", left, top, width, height);
-                        pushZone("TAB", left, top, width, getPanelElementHeader(element).offsetHeight);
+                        // Only allow center zone if it's for the panel to stay at the same spot.
+                        // Indeed, it was confusing since it appears like it's going to create
+                        // a new panel, when in reality it just creates a new tab in the target panel.
+                        else {
+                            pushZone("CENTER", left, top, width, height);
+                        }
+                        pushZone("TAB", left, top, width, element.children[0].offsetHeight);
                     }
                     else {
                         const firstTabs = config.children?.[0]?.tabs || [null];
@@ -340,9 +356,33 @@ const Overlay = ({ panelElements, onDrop, rootConfig, }) => {
     const overlayRef = useRef(null);
     return _jsx("div", { className: "tab-handle-overlay", ref: overlayRef });
 };
-export function Layout(props) {
-    const children = React.Children.toArray(props.children);
-    const namedChildren = Object.fromEntries(children.map((c, i) => [
+/**
+ * A Panel component.
+ *
+ * This component represents a Panel within the layout.
+ *
+ * @param props.name The unique identifier of the panel.
+ * @param props.header The content to render in the panel header.
+ * @param props.children The content to render within the panel.
+ */
+export const Panel = (props) => {
+    return null;
+};
+/**
+ * Main layout component that organizes panels and handles drag and drop.
+ *
+ * The Layout component takes child panel components, constructs an initial layout configuration,
+ * and renders the panel structure using NestedPanel. It also wraps the layout in a DndProvider
+ * if drag and drop support is enabled.
+ *
+ * @param children The children `Panel` components to render within the layout.
+ * @param defaultConfig The default layout configuration to use.
+ * @param wrapDnd A boolean flag to enable or disable drag and drop support (default: true).
+ * @returns A React element representing the complete panel layout.
+ */
+export function Layout({ children, defaultConfig, wrapDnd = true, }) {
+    const children_array = React.Children.toArray(children);
+    const namedChildren = Object.fromEntries(children_array.map((c, i) => [
         c.props.name || (c.key !== null ? c.key.toString().slice(2) : `unnamed-${i}`),
         {
             element: c.props.children,
@@ -350,14 +390,14 @@ export function Layout(props) {
         },
     ]));
     const panelElements = useRef(new Map());
-    const [rootConfig, setRootConfig] = useState(props.defaultConfig || {
+    const [rootConfig, setRootConfig] = useState(defaultConfig || {
         kind: "row",
         size: 1,
-        children: children.map((c, i) => ({
+        children: children_array.map((c, i) => ({
             kind: "leaf",
             tabs: [c.props.name || (c.key !== null ? c.key.toString().slice(2) : `unnamed-${i}`)],
             tabIndex: 0,
-            size: 100 / children.length,
+            size: 100 / children_array.length,
         })),
     });
     let config = rootConfig;
@@ -373,11 +413,8 @@ export function Layout(props) {
         setRootConfig(newConfig);
     };
     const container = (_jsxs("div", { className: "container", children: [_jsx(NestedPanel, { leaves: namedChildren, config: config, panelElements: panelElements.current }), _jsx(Overlay, { panelElements: panelElements, onDrop: handleDrop, rootConfig: config })] }));
-    if (props.wrapDnd) {
+    if (wrapDnd) {
         return _jsx(DndProvider, { backend: HTML5Backend, children: container });
     }
     return container;
 }
-Layout.defaultProps = {
-    wrapDnd: true,
-};

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "react-simple-dock",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "index.js",
-  "types": "index.d.ts",
   "description": "Simple dock component for React",
   "repository": "https://github.com/percevalw/react-simple-dock",
   "author": "Perceval Wajsbürt <perceval.wajsburt@gmail.com>",
@@ -14,11 +13,6 @@
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md"
-  ],
   "browserslist": {
     "production": [
       ">0.2%",
@@ -30,5 +24,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "types": "index.d.ts"
 }

package/types.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+/**
+ * Leaf layout configuration.
+ *
+ * Represents a panel that contains one or more tabs along with the current tab index and its size.
+ */
+export type LeafLayoutConfig = {
+    kind: "leaf";
+    tabs: string[];
+    tabIndex: number;
+    size: number;
+    nesting?: number;
+};
+/**
+ * Container layout configuration.
+ *
+ * Represents a container panel that arranges its child panels in either a row or a column.
+ */
+export type ContainerLayoutConfig = {
+    kind: "row" | "column";
+    children: LayoutConfig[];
+    size: number;
+    nesting?: number;
+};
+/**
+ * Layout configuration.
+ *
+ * A union type that represents either a leaf panel (with tabs) or a container panel (row/column with children).
+ */
+export type LayoutConfig = LeafLayoutConfig | ContainerLayoutConfig;
+/**
+ * Properties for a panel component.
+ *
+ * Defines the children to render within the panel, an optional name, and an optional header.
+ */
+export type PanelProps = {
+    children: React.ReactNode;
+    name?: string;
+    header?: React.ReactNode;
+};
+/**
+ * Represents a drop zone within the layout.
+ *
+ * Includes the rectangular coordinates, the associated layout configuration,
+ * an a to indicate the drop position, and a reference to the related DOM element.
+ */
+export type Zone = {
+    rect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    config: LayoutConfig;
+    index: "LEFT" | "RIGHT" | "TOP" | "BOTTOM" | "CENTER" | "TAB";
+    element: HTMLElement;
+    before?: string;
+};
+/**
+ * Drag and drop item for tab header drag operations.
+ *
+ * Contains the panel name and a reference to the draggable element.
+ */
+export type DnDItem = {
+    name: string;
+    handleElement: HTMLDivElement;
+};

package/types.js

@@ -0,0 +1 @@
+export {};

package/utils.d.ts

@@ -0,0 +1,26 @@
+import { Zone, LayoutConfig } from "./types";
+/**
+ * Moves a panel within the layout based on a drop zone and panel name.
+ *
+ * This function traverses the layout config tree, removing the panel from its original position,
+ * and re-inserting it based on the provided drop zone. It handles both leaf and container nodes,
+ * ensuring proper size calculations and layout updates.
+ *
+ * @param zone - The drop zone where the panel is to be moved.
+ * @param name - The name of the panel being moved.
+ * @param inside - The layout config in which the move operation takes place.
+ * @returns The updated layout config after moving the panel.
+ */
+export declare const movePanel: (zone: Zone | null, name: string, inside: LayoutConfig) => LayoutConfig;
+/**
+ * Filters panels from a layout configuration based on a provided list of panel names.
+ *
+ * Traverses the layout configuration tree and removes any panels (or tabs within panels)
+ * whose names are not included in the specified list. It simplifies nodes by filtering
+ * out unwanted tabs and recursively updating container nodes.
+ *
+ * @param names - An array of panel names that should remain in the layout.
+ * @param inside - The layout configuration to filter.
+ * @returns The updated layout configuration with only the specified panels, or null if empty.
+ */
+export declare const filterPanels: (names: string[], inside: LayoutConfig) => LayoutConfig;

package/utils.js

@@ -0,0 +1,248 @@
+/**
+ * Simplifies a layout configuration by flattening nested layouts with the same kind.
+ *
+ * If the layout configuration is a row or column, this function will flatten any nested child configurations
+ * that have the same kind as the parent. It recalculates the size of nested items based on their parent's size.
+ *
+ * @param config - The layout configuration to simplify.
+ * @returns The simplified layout configuration.
+ */
+const simplifyLayout = (config) => {
+    if (config.kind === "row" || config.kind === "column") {
+        let expandedChildren = [];
+        let changed = false;
+        config.children.forEach((child) => {
+            if (child.kind === config.kind) {
+                changed = true;
+                const totalChildContainerSize = child.children.reduce((a, b) => a + b.size, 0);
+                child.children.forEach((grandChild) => {
+                    expandedChildren.push({
+                        ...grandChild,
+                        size: (child.size * grandChild.size) / totalChildContainerSize,
+                    });
+                });
+            }
+            else {
+                expandedChildren.push(child);
+            }
+        });
+        if (changed) {
+            config = { ...config, children: expandedChildren };
+        }
+    }
+    return config;
+};
+/**
+ * Moves a panel within the layout based on a drop zone and panel name.
+ *
+ * This function traverses the layout config tree, removing the panel from its original position,
+ * and re-inserting it based on the provided drop zone. It handles both leaf and container nodes,
+ * ensuring proper size calculations and layout updates.
+ *
+ * @param zone - The drop zone where the panel is to be moved.
+ * @param name - The name of the panel being moved.
+ * @param inside - The layout config in which the move operation takes place.
+ * @returns The updated layout config after moving the panel.
+ */
+export const movePanel = (zone, name, inside) => {
+    const editLayout = (visitedConfig) => {
+        let config = visitedConfig;
+        if (config.kind === "leaf" && config.tabs.includes(name)) {
+            /* If it's a simple leaf, try to remove the matching tab if it was
+             * the tab that was picked by the user (since we're moving it) */
+            const newTabs = config.tabs.filter((tabName) => tabName !== name);
+            config = {
+                ...config,
+                tabs: newTabs,
+                tabIndex: Math.min(newTabs.length - 1, config.tabIndex),
+            };
+            if (config.tabs.length === 0) {
+                config = null;
+            }
+        }
+        /* If this zone is the zone targeted as drop-zone by the user */
+        if (zone && visitedConfig === zone.config) {
+            if (config === null) {
+                return {
+                    kind: "leaf",
+                    tabs: [name],
+                    tabIndex: 0,
+                    size: visitedConfig.size,
+                };
+            }
+            // or it's a container zone
+            else if (config.kind === "row" || config.kind === "column") {
+                const totalSize = config.children.reduce((a, b) => a + b.size, 0);
+                const fraction = config.kind === "column"
+                    ? zone.rect.height / zone.element.parentElement.offsetHeight
+                    : zone.rect.width / zone.element.parentElement.offsetWidth;
+                // x / (y + x) = a
+                // x = a y + a x
+                // x = a y / ( 1 - a )
+                const newConfigKind = zone.index === "TOP" || zone.index === "BOTTOM" ? "column" : "row";
+                if (config.kind === newConfigKind) {
+                    const newZone = {
+                        kind: "leaf",
+                        tabs: [name],
+                        tabIndex: 0,
+                        size: (totalSize * fraction) / (1 - fraction),
+                    };
+                    config = {
+                        ...config,
+                        children: zone.index === "LEFT" || zone.index === "TOP"
+                            ? [newZone, ...config.children.map(editLayout).filter((c) => c !== null)]
+                            : [...config.children.map(editLayout).filter((c) => c !== null), newZone],
+                    };
+                }
+                else {
+                    const newZone = {
+                        kind: "leaf",
+                        tabs: [name],
+                        tabIndex: 0,
+                        size: 50,
+                    };
+                    const oldConfig = {
+                        ...config,
+                        // Remove the panel that is being moved
+                        children: config.children.map(editLayout).filter((c) => c !== null),
+                        size: 50,
+                    };
+                    config = {
+                        kind: newConfigKind,
+                        children: zone.index === "TOP" || zone.index === "LEFT" ? [newZone, oldConfig] : [oldConfig, newZone],
+                        size: config.size,
+                    };
+                }
+            }
+            // Or it's a leaf zone
+            else if (config.kind === "leaf") {
+                if (zone.index === "CENTER") {
+                    const newTabs = [...config.tabs.filter((tabName) => tabName !== name), name];
+                    config = {
+                        ...config,
+                        tabs: newTabs,
+                        tabIndex: newTabs.length - 1,
+                    };
+                }
+                else if (zone.index === "TAB") {
+                    const newTabs = [...config.tabs];
+                    let insertIndex = newTabs.findIndex((tabName) => tabName === zone.before);
+                    if (insertIndex === -1) {
+                        insertIndex = newTabs.length;
+                    }
+                    newTabs.splice(insertIndex, 0, name);
+                    config = {
+                        ...config,
+                        tabs: newTabs,
+                        tabIndex: insertIndex,
+                    };
+                }
+                else {
+                    const newZone = {
+                        kind: "leaf",
+                        tabs: [name],
+                        tabIndex: 0,
+                        size: 50,
+                    };
+                    config = {
+                        kind: zone.index === "TOP" || zone.index === "BOTTOM" ? "column" : "row",
+                        children: zone.index === "TOP" || zone.index === "LEFT"
+                            ? [newZone, { ...config, size: 50 }]
+                            : [{ ...config, size: 50, }, newZone],
+                        size: config.size,
+                    };
+                }
+            }
+        }
+        // If there is nothing left after removing the dropped zone
+        else if (config === null) {
+            return null;
+        }
+        // Otherwise, recurse into the node
+        else {
+            let hasChanged = false;
+            if (config.kind !== "leaf") {
+                const children = config.children
+                    .map((child) => {
+                    const updated = editLayout(child);
+                    if (updated !== child) {
+                        hasChanged = true;
+                    }
+                    return updated;
+                })
+                    .filter((child) => child !== null);
+                if (hasChanged) {
+                    config = { ...config, children };
+                }
+            }
+        }
+        if ((config.kind === "leaf" && config.tabs.length === 0) ||
+            (config.kind !== "leaf" && config.children.length === 0)) {
+            return null;
+        }
+        /* Simplify a node of the layout by flattening row children of rows
+         * or column children of columns */
+        config = simplifyLayout(config);
+        return config;
+    };
+    return editLayout(inside);
+};
+/**
+ * Filters panels from a layout configuration based on a provided list of panel names.
+ *
+ * Traverses the layout configuration tree and removes any panels (or tabs within panels)
+ * whose names are not included in the specified list. It simplifies nodes by filtering
+ * out unwanted tabs and recursively updating container nodes.
+ *
+ * @param names - An array of panel names that should remain in the layout.
+ * @param inside - The layout configuration to filter.
+ * @returns The updated layout configuration with only the specified panels, or null if empty.
+ */
+export const filterPanels = (names, inside) => {
+    const editLayout = (visitedConfig) => {
+        let config = visitedConfig;
+        if (config.kind === "leaf" && !config.tabs.every((name) => names.includes(name))) {
+            /* If it's a simple leaf, try to remove the matching tab if it was
+             * the tab that was picked by the user (since we're moving it) */
+            config = {
+                ...config,
+                tabs: config.tabs.filter((name) => names.includes(name)),
+                tabIndex: Math.min(config.tabs.length - 1, config.tabIndex),
+            };
+            if (config.tabs.length === 0) {
+                config = null;
+            }
+        }
+        // If there is nothing left after removing the dropped zone
+        if (config === null) {
+            return null;
+        }
+        // Otherwise, recurse into the node
+        else {
+            let hasChanged = false;
+            if (config.kind !== "leaf") {
+                const children = config.children
+                    .map((child) => {
+                    const updated = editLayout(child);
+                    if (updated !== child) {
+                        hasChanged = true;
+                    }
+                    return updated;
+                })
+                    .filter((child) => child !== null);
+                if (hasChanged) {
+                    config = { ...config, children };
+                }
+            }
+        }
+        if ((config.kind === "leaf" && config.tabs.length === 0) ||
+            (config.kind !== "leaf" && config.children.length === 0)) {
+            return null;
+        }
+        /* Simplify a node of the layout by flattening row children of rows
+         * or column children of columns */
+        config = simplifyLayout(config);
+        return config;
+    };
+    return editLayout(inside);
+};