react-simple-dock 0.2.2 → 0.2.4

package/README.md

@@ -2,7 +2,7 @@
 
 [![PyPI - pret-simple-dock](https://img.shields.io/pypi/v/pret-simple-dock?style=flat-square&color=blue)](https://pypi.org/project/pret-simple-dock/)
 [![npm - react-simple-dock](https://img.shields.io/npm/v/react-simple-dock?style=flat-square&color=blue)](https://www.npmjs.com/package/react-simple-dock)
-[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/percevalw/react-simple-dock/playwright.yml?style=flat-square)](https://github.com/percevalw/react-simple-dock/actions/workflows/playwright.yml)
+[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/percevalw/react-simple-dock/test.yml?style=flat-square)](https://github.com/percevalw/react-simple-dock/actions/workflows/test.yml)
 
 A set of React components to create a dockable interface, allowing to arrange and resize tabs.
 
@@ -69,6 +69,41 @@ const App = () => (
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<App />);
 ```
 
+## Dynamic tab placement
+
+When children are added/removed dynamically, `Layout` now preserves user-arranged layout and applies `place` only
+when a panel appears for the first time in the current layout.
+
+```tsx
+<Layout
+    defaultConfig={{
+        kind: "row",
+        children: [
+            { kind: "leaf", tabs: ["Panel 1", "@anchor-1"] },
+            { kind: "leaf", tabs: ["Panel 2"] },
+        ],
+    }}
+>
+    <Panel key="Panel 1">...</Panel>
+    <Panel key="Panel 2">...</Panel>
+
+    {/* Insert into the same tab list */}
+    <Panel key="Panel 3" place={{ where: "after-tab", of: "Panel 1" }}>
+        ...
+    </Panel>
+
+    {/* Insert as a sibling leaf around the target leaf */}
+    <Panel key="Panel 4" place={{ where: "right", of: "@anchor-1" }}>
+        ...
+    </Panel>
+</Layout>
+```
+
+- `where` supports: `before-tab`, `after-tab`, `first-tab`, `last-tab`, `left`, `right`, `top`, `bottom`.
+- `of` references panel keys (or anchor tabs in `defaultConfig`, such as `@anchor-1`).
+- If `of` is missing, placement falls back to the first tab currently present in the layout.
+- Tabs prefixed with `@` are treated as virtual anchors: preserved for placement, but never rendered as visible tabs or leaves.
+
 ## Development
 
 ### Installation
@@ -111,7 +146,7 @@ pip install pret
 If you have changed the signature of the components, you will need to update the python stubs.
 
 ```bash
-pret stub . SimpleDock pret/ui/simple_dock/__init__.py
+pret stub . SimpleDock pret_simple_dock/__init__.py
 ```
 
 To build the python library and make it available in your environment:

package/index.css

@@ -35,7 +35,6 @@ body[data-jp-theme-light] {
 }
 
 .resize-border {
-    position: absolute;
     background-color: var(--sd-background-color, #fff);
     opacity: 0;
     z-index: 10;
@@ -43,21 +42,19 @@ body[data-jp-theme-light] {
 
 .resize-border:hover {
     opacity: 0.8;
+    border: 1px solid var(--sd-background-color, #fff);
+    box-sizing: border-box;
 }
 
 .resize-border.bottom {
-    bottom: calc(0px - var(--sd-grid-gap));
-    left: 0;
-    right: 0;
-    height: calc((var(--sd-grid-gap)));
+    height: 100%;
+    width: 100%;
     cursor: row-resize;
 }
 
 .resize-border.right {
-    top: 0;
-    bottom: 0;
-    right: calc(0px - var(--sd-grid-gap));
-    width: calc((var(--sd-grid-gap)));
+    height: 100%;
+    width: 100%;
     cursor: col-resize;
 }
 
@@ -91,6 +88,7 @@ body[data-jp-theme-light] {
     height: 100%;
     width: 100%;
     background: var(--sd-background-color);
+    overflow-x: hidden;
 }
 
 .panel.leaf {
@@ -100,7 +98,6 @@ body[data-jp-theme-light] {
 .row > .panel-content,
 .column > .panel-content {
     display: grid;
-    grid-gap: var(--sd-grid-gap);
     position: absolute;
     left: 0;
     top: 0;
@@ -125,12 +122,23 @@ body[data-jp-theme-light] {
     overflow: auto;
 }
 
+.leaf > div:nth-child(1) {
+    padding-right: 0px;
+}
+
 /* TAB HEADER */
 
 .tab-header {
     display: flex;
     flex-direction: row;
     height: var(--sd-header-height);
+    width: 100%;
+    overflow: auto;
+    -ms-overflow-style: none; /* Internet Explorer 10+ */
+    scrollbar-width: none; /* Firefox, Safari 18.2+, Chromium 121+ */
+}
+.tab-header::-webkit-scrollbar {
+    display: none; /* Older Safari and Chromium */
 }
 
 .tab-header-border {

package/index.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { DndProvider, useDrag, useDrop, useDragDropManager } from "react-dnd";
 import "./index.css";
-import { filterPanels, movePanel } from "./utils";
+import { filterPanels, getLayoutTabs, insertPanel, isAnchorTab, movePanel } from "./utils";
 import { HTML5Backend } from "react-dnd-html5-backend";
 function useForceUpdate() {
     const [value, setValue] = useState(0); // integer state
@@ -14,9 +14,13 @@ const isMobileDevice = () => {
     return /Mobi|Android|iPhone|iPad|iPod|Windows Phone|IEMobile|Opera Mini/i.test(navigator.userAgent || "");
 };
 const getPanelElementMaxHeaderHeight = (config, panelElements) => {
-    // If we have a leaf, then the header height is the max of each tabs header height
+    // If we have a leaf, then the header height is the tab header height.
     if (config.kind === "leaf") {
-        return Math.max(...config.tabs.map((tab) => panelElements.get(config).children[0].offsetHeight));
+        const element = panelElements.get(config);
+        if (!element) {
+            return 0;
+        }
+        return element.children[0]?.offsetHeight || 0;
     }
     // If we have a row, then the header height is the max of each child's max header height
     else if (config.kind === "row") {
@@ -47,7 +51,42 @@ function normalizeConfig(config, siblingsCount, depth = 0, default_kind = depth
     const children = container.children.map((child) => normalizeConfig(child, container.children.length, depth + 1, kind === "row" ? "column" : "row"));
     return { kind, children, size, nesting: container.nesting };
 }
-const TabHandle = ({ name, index, visible, onClick, children, }) => {
+const getPanelName = (panel, index) => panel.props.name || (panel.key !== null ? panel.key.toString().slice(2) : `unnamed-${index}`);
+const getRenderableTabs = (tabs) => tabs.filter((tab) => !isAnchorTab(tab));
+const isRenderableConfig = (config) => {
+    if (config.kind === "leaf") {
+        return getRenderableTabs(config.tabs).length > 0;
+    }
+    return config.children.some((child) => isRenderableConfig(child));
+};
+const getFirstRenderableTab = (config) => {
+    if (config.kind === "leaf") {
+        return getRenderableTabs(config.tabs)[0] || null;
+    }
+    const firstRenderableChild = config.children.find((child) => isRenderableConfig(child));
+    if (!firstRenderableChild) {
+        return null;
+    }
+    return getFirstRenderableTab(firstRenderableChild);
+};
+const getLastRenderableTab = (config) => {
+    if (config.kind === "leaf") {
+        const tabs = getRenderableTabs(config.tabs);
+        return tabs[tabs.length - 1] || null;
+    }
+    const children = config.children.filter((child) => isRenderableConfig(child));
+    if (!children.length) {
+        return null;
+    }
+    return getLastRenderableTab(children[children.length - 1]);
+};
+const getRenderableTabCount = (config) => {
+    if (config.kind === "leaf") {
+        return getRenderableTabs(config.tabs).length;
+    }
+    return config.children.reduce((count, child) => count + getRenderableTabCount(child), 0);
+};
+const TabHandle = ({ name, visible, onClick, children, }) => {
     const getItem = () => ({
         name,
         handleElement: targetRef.current,
@@ -62,13 +101,15 @@ const TabHandle = ({ name, index, visible, onClick, children, }) => {
     return (_jsx("div", { className: `tab-handle tab-handle__${visible ? "visible" : "hidden"}`, ref: (element) => {
             dragRef(element);
             targetRef.current = element;
-        }, onClick: () => onClick(index), children: children }));
+        }, onClick: () => onClick(name), children: children }));
 };
 const TabHeader = ({ config, onClick, leaves, }) => {
-    return (_jsxs("div", { children: [_jsxs("div", { className: "tab-header", children: [config.tabs
-                        .map((tab, i) => [
-                        _jsx("div", { className: "tab-placeholder", style: { width: "0px" }, "data-panel-name": tab }, `${i}-placeholder`),
-                        _jsx(TabHandle, { name: tab, index: i, visible: config.tabIndex === i, onClick: onClick, children: leaves[tab].header || tab }, i),
+    const renderableTabs = getRenderableTabs(config.tabs);
+    const selectedTab = config.tabs[config.tabIndex];
+    return (_jsxs("div", { children: [_jsxs("div", { className: "tab-header", children: [renderableTabs
+                        .map((tab) => [
+                        _jsx("div", { className: "tab-placeholder", style: { width: "0px" }, "data-panel-name": tab }, `${tab}-placeholder`),
+                        _jsx(TabHandle, { name: tab, visible: selectedTab === tab, onClick: onClick, children: leaves[tab]?.header || tab }, tab),
                     ])
                         .flat(), _jsx("div", { className: "tab-placeholder" })] }), _jsx("div", { className: "tab-header-border" }), _jsx("div", { className: "tab-header-bottom" })] }));
 };
@@ -76,6 +117,11 @@ const NestedPanel = React.memo(({ leaves, config, index, onResize, saveSizes, is
     const startEvent = useRef(null);
     const savedSizes = useRef([]);
     const forceUpdate = useForceUpdate();
+    const renderableChildren = config.kind === "leaf"
+        ? []
+        : config.children
+            .map((child, childIndex) => ({ child, childIndex }))
+            .filter(({ child }) => isRenderableConfig(child));
     useEffect(() => {
         const handleMouseUp = (e) => {
             document.removeEventListener("mousemove", startEvent.current?.handleMouseMove);
@@ -105,17 +151,21 @@ const NestedPanel = React.memo(({ leaves, config, index, onResize, saveSizes, is
         const { clientX, clientY } = e;
         // get Panel top left corner
         const { top, left } = (startEvent.current?.target).parentElement.getBoundingClientRect();
+        const parent = (startEvent.current?.target).parentElement;
+        const containerWidth = parent.offsetWidth;
+        const containerHeight = parent.offsetHeight;
         let ratio;
         if (startEvent.current.side === "bottom") {
-            ratio = (clientY - top) / startEvent.current.height;
+            ratio = containerHeight > 0 ? (clientY - top) / containerHeight : 0;
         }
         else if (startEvent.current.side === "right") {
-            ratio = (clientX - left) / startEvent.current.width;
+            ratio = containerWidth > 0 ? (clientX - left) / containerWidth : 0;
         }
         else {
             return;
         }
-        onResize && onResize(ratio, index, startEvent.current.target);
+        const boundedRatio = Math.max(0, Math.min(1, ratio));
+        onResize && onResize(boundedRatio, index, startEvent.current.target);
     }, [onResize, index]);
     const handleMouseDown = (e, side) => {
         if (startEvent.current) {
@@ -126,8 +176,6 @@ const NestedPanel = React.memo(({ leaves, config, index, onResize, saveSizes, is
         e.preventDefault();
         saveSizes && saveSizes();
         startEvent.current = {
-            width: e.clientX - left,
-            height: e.clientY - top,
             target: e.currentTarget,
             side: side,
             handleMouseMove,
@@ -138,53 +186,82 @@ const NestedPanel = React.memo(({ leaves, config, index, onResize, saveSizes, is
         if (config.kind === "row") {
             // return {gridTemplateColumns: config.children.map(c => `calc((${100}% - var(--grid-gap) * ${config.children.length - 1}) * ${c.size / 100})`).join(" ")};
             return {
-                gridTemplateColumns: config.children.map((c) => `${c.size}fr`).join(" "),
+                gridTemplateColumns: renderableChildren.map(({ child, childIndex }) => (childIndex == 0 ? `${child.size}fr` : `7px ${child.size}fr`)).join(" "),
             };
         }
         if (config.kind === "column") {
             // return {gridTemplateRows: config.children.map(c => `calc((${100}% - var(--grid-gap) * ${config.children.length - 1}) * ${c.size / 100})`).join(" ")};
             return {
-                gridTemplateRows: config.children.map((c) => `${c.size}fr`).join(" "),
+                gridTemplateRows: renderableChildren.map(({ child, childIndex }) => (childIndex == 0 ? `${child.size}fr` : `7px ${child.size}fr`)).join(" "),
             };
         }
     };
     const handleResize = useCallback((ratio, idx, target) => {
         if (config.kind === "leaf")
             return;
-        let size = savedSizes.current[idx] * ratio;
-        let nextSize = savedSizes.current[idx + 1] + (savedSizes.current[idx] - size);
+        const current = renderableChildren[idx];
+        const next = renderableChildren[idx + 1];
+        if (!current || !next) {
+            return;
+        }
         const total = savedSizes.current.reduce((a, b) => a + b, 0);
+        if (total <= 0) {
+            return;
+        }
+        const sizeBefore = savedSizes.current.slice(0, idx).reduce((a, b) => a + b, 0);
+        const pairTotal = savedSizes.current[idx] + savedSizes.current[idx + 1];
+        let size = ratio * total - sizeBefore;
+        size = Math.max(0, Math.min(pairTotal, size));
+        let nextSize = pairTotal - size;
         if (config.kind === "column") {
-            const headerHeightBefore = getPanelElementMaxHeaderHeight(config.children[idx], panelElements);
-            const headerHeightAfter = getPanelElementMaxHeaderHeight(config.children[idx + 1], panelElements);
+            const headerHeightBefore = getPanelElementMaxHeaderHeight(current.child, panelElements);
+            const headerHeightAfter = getPanelElementMaxHeaderHeight(next.child, panelElements);
             const parentHeight = panelContentRef.current.offsetHeight;
+            if (parentHeight <= 0) {
+                return;
+            }
             if ((size * parentHeight) / total < headerHeightBefore) {
                 size = (headerHeightBefore / parentHeight) * total;
-                nextSize = savedSizes.current[idx + 1] + (savedSizes.current[idx] - size);
+                size = Math.max(0, Math.min(pairTotal, size));
+                nextSize = pairTotal - size;
             }
             else if ((nextSize * parentHeight) / total < headerHeightAfter) {
-                nextSize = (headerHeightAfter / parentHeight) * total;
-                size = savedSizes.current[idx] + (savedSizes.current[idx + 1] - nextSize);
+                nextSize = Math.max(0, Math.min(pairTotal, (headerHeightAfter / parentHeight) * total));
+                size = pairTotal - nextSize;
             }
         }
-        config.children[idx].size = size;
-        config.children[idx + 1].size = nextSize;
+        current.child.size = size;
+        next.child.size = nextSize;
         Object.assign(panelContentRef.current.style, makeStyle());
-    }, [config]);
+    }, [config, renderableChildren]);
     const handleSaveSizes = useCallback(() => {
         if (config.kind === "leaf")
             return;
-        savedSizes.current = config.children.map((child) => child.size);
-    }, [config]);
-    const handleHeaderClick = (i) => {
+        savedSizes.current = renderableChildren.map(({ child }) => child.size);
+    }, [config, renderableChildren]);
+    const handleHeaderClick = (name) => {
         if (config.kind === "leaf") {
+            const tabIndex = config.tabs.findIndex((tab) => tab === name);
+            if (tabIndex === -1) {
+                return;
+            }
             forceUpdate();
-            config.tabIndex = i;
+            config.tabIndex = tabIndex;
         }
     };
+    const activeTab = config.kind === "leaf"
+        ? (() => {
+            const selected = config.tabs[config.tabIndex];
+            if (selected && !isAnchorTab(selected) && leaves[selected]) {
+                return selected;
+            }
+            return getRenderableTabs(config.tabs).find((tab) => leaves[tab]) || null;
+        })()
+        : null;
+    const leafContent = activeTab ? (_jsx("div", { children: leaves[activeTab].element }, activeTab)) : (_jsx("div", { style: { width: "100%", height: "100%" } }));
     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 }, 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") }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${config.kind} panel`, style: style, ref: panelRef, children: [config.kind === "leaf" && getRenderableTabs(config.tabs).length > 0 ? (_jsx(TabHeader, { config: config, leaves: leaves, onClick: handleHeaderClick })) : null, _jsx("div", { className: "panel-content", ref: panelContentRef, style: makeStyle(), children: config.kind === "leaf" ? (leafContent) : (renderableChildren.map(({ child, childIndex }, i) => (_jsx(NestedPanel, { config: child, leaves: leaves, saveSizes: handleSaveSizes, index: i, onResize: handleResize, isLast: i === renderableChildren.length - 1, direction: config.kind, panelElements: panelElements }, childIndex)))) })] }), !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 [, set] = useState();
@@ -245,7 +322,8 @@ const Overlay = ({ panelElements, onDrop, rootConfig, }) => {
                         zones.push({ rect, config, index, element });
                     };
                     if (config.kind === "leaf") {
-                        if (!(config.tabs.length == 1 && config.tabs[0] == name)) {
+                        const renderableTabs = getRenderableTabs(config.tabs);
+                        if (!(renderableTabs.length === 1 && renderableTabs[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);
@@ -260,24 +338,32 @@ const Overlay = ({ panelElements, onDrop, rootConfig, }) => {
                         pushZone("TAB", left, top, width, element.children[0].offsetHeight);
                     }
                     else {
-                        const firstTabs = config.children?.[0]?.tabs || [null];
-                        const lastTabs = config.children?.[config.children.length - 1]?.tabs || [null];
+                        const renderableChildren = config.children.filter((child) => isRenderableConfig(child));
+                        if (!renderableChildren.length) {
+                            continue;
+                        }
+                        const firstChild = renderableChildren[0];
+                        const lastChild = renderableChildren[renderableChildren.length - 1];
+                        const firstTab = getFirstRenderableTab(firstChild);
+                        const lastTab = getLastRenderableTab(lastChild);
+                        const firstTabCount = getRenderableTabCount(firstChild);
+                        const lastTabCount = getRenderableTabCount(lastChild);
                         if (config.kind === "row" || config === rootConfig) {
-                            const zoneWidth = width / (config.kind === "row" ? config.children.length + 1 : 2);
+                            const zoneWidth = width / (config.kind === "row" ? renderableChildren.length + 1 : 2);
                             // check that the dragged item is not the last item in the row and a single tab
-                            if (config === rootConfig || lastTabs.length > 1 || lastTabs[0] !== name) {
+                            if (config === rootConfig || lastTabCount > 1 || lastTab !== name) {
                                 pushZone("RIGHT", left + width - zoneWidth, top, zoneWidth, height);
                             }
-                            if (config === rootConfig || firstTabs.length > 1 || firstTabs[0] !== name) {
+                            if (config === rootConfig || firstTabCount > 1 || firstTab !== name) {
                                 pushZone("LEFT", left, top, zoneWidth, height);
                             }
                         }
                         if (config.kind === "column" || config === rootConfig) {
-                            const zoneHeight = height / (config.kind === "column" ? config.children.length + 1 : 2);
-                            if (config === rootConfig || lastTabs.length > 1 || lastTabs[0] !== name) {
+                            const zoneHeight = height / (config.kind === "column" ? renderableChildren.length + 1 : 2);
+                            if (config === rootConfig || lastTabCount > 1 || lastTab !== name) {
                                 pushZone("BOTTOM", left, top + height - zoneHeight, width, zoneHeight);
                             }
-                            if (config === rootConfig || firstTabs.length > 1 || firstTabs[0] !== name) {
+                            if (config === rootConfig || firstTabCount > 1 || firstTab !== name) {
                                 pushZone("TOP", left, top, width, zoneHeight);
                             }
                         }
@@ -409,11 +495,19 @@ export const Panel = (props) => {
  */
 export function Layout({ children, defaultConfig, wrapDnd = true, collapseTabsOnMobile = 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}`),
+    const panelDefinitions = children_array.map((panel, i) => ({
+        name: getPanelName(panel, i),
+        header: panel.props.header,
+        element: panel.props.children,
+        place: panel.props.place,
+    }));
+    const panelNames = panelDefinitions.map((panel) => panel.name);
+    const placementByName = new Map(panelDefinitions.map((panel) => [panel.name, panel.place]));
+    const namedChildren = Object.fromEntries(panelDefinitions.map((panel) => [
+        panel.name,
         {
-            element: c.props.children,
-            header: c.props.header,
+            element: panel.element,
+            header: panel.header,
         },
     ]));
     const panelElements = useRef(new Map());
@@ -423,9 +517,9 @@ export function Layout({ children, defaultConfig, wrapDnd = true, collapseTabsOn
             : {
                 kind: "row",
                 size: 1,
-                children: children_array.map((c, i) => ({
+                children: panelDefinitions.map((panel) => ({
                     kind: "leaf",
-                    tabs: [c.props.name || (c.key !== null ? c.key.toString().slice(2) : `unnamed-${i}`)],
+                    tabs: [panel.name],
                     tabIndex: 0,
                     size: 100 / children_array.length,
                 })),
@@ -433,7 +527,7 @@ export function Layout({ children, defaultConfig, wrapDnd = true, collapseTabsOn
         if (collapseTabsOnMobile && isMobileDevice()) {
             // If collapseTabsOnMobile is a list, use the names in the list as the first tabs
             // then complete with the rest of the named children
-            const actualTabs = Object.keys(namedChildren);
+            const actualTabs = panelNames;
             const tabs = [
                 ...(Array.isArray(collapseTabsOnMobile)
                     ? collapseTabsOnMobile.filter((name) => actualTabs.includes(name))
@@ -451,18 +545,26 @@ export function Layout({ children, defaultConfig, wrapDnd = true, collapseTabsOn
         return base;
     });
     let config = rootConfig;
-    if (rootConfig.kind !== "leaf" || rootConfig.tabs.length > 0) {
-        const newConfig = filterPanels(Object.keys(namedChildren), rootConfig);
-        if (newConfig !== rootConfig) {
-            config = newConfig || { kind: "leaf", tabs: [], tabIndex: 0, size: 100 };
-            setRootConfig(config);
-        }
+    let nextConfig = rootConfig;
+    if (nextConfig.kind !== "leaf" || nextConfig.tabs.length > 0) {
+        nextConfig = filterPanels(panelNames, nextConfig) || { kind: "leaf", tabs: [], tabIndex: 0, size: 100 };
+    }
+    const tabs = getLayoutTabs(nextConfig);
+    const missingPanels = panelNames.filter((name) => !tabs.includes(name));
+    if (missingPanels.length > 0) {
+        missingPanels.forEach((name) => {
+            nextConfig = insertPanel(placementByName.get(name), name, nextConfig);
+        });
+    }
+    if (nextConfig !== rootConfig) {
+        config = nextConfig;
+        setRootConfig(nextConfig);
     }
     const handleDrop = (zone, name) => {
         const newConfig = movePanel(zone, name, rootConfig);
         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 })] }));
+    const container = (_jsxs("div", { className: "container", children: [isRenderableConfig(config) ? (_jsx(NestedPanel, { leaves: namedChildren, config: config, panelElements: panelElements.current })) : (_jsx("div", { style: { width: "100%", height: "100%" } })), _jsx(Overlay, { panelElements: panelElements, onDrop: handleDrop, rootConfig: config })] }));
     if (wrapDnd) {
         return _jsx(DndProvider, { backend: HTML5Backend, children: container });
     }

package/index.test.d.ts

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

package/index.test.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { Layout, Panel } from "./index";
+jest.mock("react-dnd", () => {
+    const React = require("react");
+    return {
+        DndProvider: ({ children }) => _jsx(_Fragment, { children: children }),
+        useDrag: () => [{}, () => null],
+        useDrop: () => [{}, () => null],
+        useDragDropManager: () => ({
+            getMonitor: () => ({
+                subscribeToStateChange: () => () => null,
+                subscribeToOffsetChange: () => () => null,
+                getItemType: () => null,
+                isDragging: () => false,
+                getItem: () => null,
+                getClientOffset: () => null,
+            }),
+        }),
+    };
+});
+jest.mock("react-dnd-html5-backend", () => ({
+    HTML5Backend: {},
+}));
+describe("Layout virtual anchors", () => {
+    it("does not render anchor tabs", () => {
+        render(_jsx(Layout, { wrapDnd: false, defaultConfig: { kind: "leaf", tabs: ["panel-1", "@anchor-1"] }, children: _jsx(Panel, { name: "panel-1", children: _jsx("div", { children: "Panel One" }) }) }));
+        expect(screen.getByText("panel-1")).not.toBeNull();
+        expect(screen.queryByText("@anchor-1")).toBeNull();
+    });
+    it("does not render anchor-only leaves", () => {
+        const { container } = render(_jsx(Layout, { wrapDnd: false, defaultConfig: {
+                kind: "row",
+                children: [
+                    { kind: "leaf", tabs: ["@anchor-1"] },
+                    { kind: "leaf", tabs: ["panel-1"] },
+                ],
+            }, children: _jsx(Panel, { name: "panel-1", children: _jsx("div", { children: "Panel One" }) }) }));
+        // eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
+        expect(container.querySelectorAll(".panel.leaf")).toHaveLength(1);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-dock",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "main": "index.js",
   "description": "Simple dock component for React",
   "repository": "https://github.com/percevalw/react-simple-dock",

package/types.d.ts

@@ -45,6 +45,10 @@ export type DefaultContainerConfig = {
     nesting?: number;
 };
 export type DefaultLayoutConfig = string | DefaultLeafConfig | DefaultContainerConfig | DefaultLayoutConfig[];
+export type PanelPlacement = {
+    where: "before-tab" | "after-tab" | "first-tab" | "last-tab" | "left" | "right" | "top" | "bottom";
+    of: string;
+};
 /**
  * Properties for a panel component.
  *
@@ -54,6 +58,7 @@ export type PanelProps = {
     children: React.ReactNode;
     name?: string;
     header?: React.ReactNode;
+    place?: PanelPlacement;
 };
 /**
  * Represents a drop zone within the layout.

package/utils.d.ts

@@ -1,4 +1,7 @@
-import { Zone, LayoutConfig } from "./types";
+import { Zone, LayoutConfig, PanelPlacement } from "./types";
+export declare const isAnchorTab: (name: string) => boolean;
+export declare const getLayoutTabs: (inside: LayoutConfig) => string[];
+export declare const insertPanel: (place: PanelPlacement | undefined, name: string, inside: LayoutConfig) => LayoutConfig;
 /**
  * Moves a panel within the layout based on a drop zone and panel name.
  *

package/utils.js

@@ -32,6 +32,151 @@ const simplifyLayout = (config) => {
     }
     return config;
 };
+export const isAnchorTab = (name) => name.startsWith("@");
+export const getLayoutTabs = (inside) => {
+    if (inside.kind === "leaf") {
+        return [...inside.tabs];
+    }
+    return inside.children.flatMap((child) => getLayoutTabs(child));
+};
+const cloneLayout = (inside) => {
+    if (inside.kind === "leaf") {
+        return {
+            ...inside,
+            tabs: [...inside.tabs],
+        };
+    }
+    return {
+        ...inside,
+        children: inside.children.map(cloneLayout),
+    };
+};
+const findLeafPathByTab = (inside, name, path = []) => {
+    if (inside.kind === "leaf") {
+        return inside.tabs.includes(name) ? path : null;
+    }
+    for (let i = 0; i < inside.children.length; i += 1) {
+        const childPath = findLeafPathByTab(inside.children[i], name, [...path, i]);
+        if (childPath) {
+            return childPath;
+        }
+    }
+    return null;
+};
+const getNodeAtPath = (inside, path) => {
+    let current = inside;
+    path.forEach((index) => {
+        if (current.kind !== "leaf") {
+            current = current.children[index];
+        }
+    });
+    return current;
+};
+const insertTabRelative = (inside, name, target, where) => {
+    const targetPath = findLeafPathByTab(inside, target);
+    if (!targetPath) {
+        return inside;
+    }
+    const next = cloneLayout(inside);
+    const targetLeaf = getNodeAtPath(next, targetPath);
+    const targetTabIndex = targetLeaf.tabs.findIndex((tab) => tab === target);
+    if (targetTabIndex === -1) {
+        return inside;
+    }
+    const insertIndex = where === "before-tab"
+        ? targetTabIndex
+        : where === "after-tab"
+            ? targetTabIndex + 1
+            : where === "first-tab"
+                ? 0
+                : targetLeaf.tabs.length;
+    targetLeaf.tabs.splice(insertIndex, 0, name);
+    targetLeaf.tabIndex = insertIndex;
+    return next;
+};
+const insertSplitRelative = (inside, name, target, where) => {
+    const targetPath = findLeafPathByTab(inside, target);
+    if (!targetPath) {
+        return inside;
+    }
+    const splitKind = where === "left" || where === "right" ? "row" : "column";
+    const insertBefore = where === "left" || where === "top";
+    const next = cloneLayout(inside);
+    const targetLeaf = getNodeAtPath(next, targetPath);
+    const newLeaf = {
+        kind: "leaf",
+        tabs: [name],
+        tabIndex: 0,
+        size: 50,
+    };
+    if (targetPath.length === 0) {
+        const originalRoot = next;
+        const existingRoot = {
+            ...originalRoot,
+            tabs: [...originalRoot.tabs],
+            size: 50,
+        };
+        return {
+            kind: splitKind,
+            children: insertBefore ? [newLeaf, existingRoot] : [existingRoot, newLeaf],
+            size: originalRoot.size,
+        };
+    }
+    const parentPath = targetPath.slice(0, -1);
+    const targetIndex = targetPath[targetPath.length - 1];
+    const parent = getNodeAtPath(next, parentPath);
+    if (parent.kind === splitKind) {
+        const currentTarget = parent.children[targetIndex];
+        const insertedSize = currentTarget.size / 2;
+        currentTarget.size -= insertedSize;
+        const insertedLeaf = {
+            ...newLeaf,
+            size: insertedSize,
+        };
+        parent.children.splice(insertBefore ? targetIndex : targetIndex + 1, 0, insertedLeaf);
+        return next;
+    }
+    const wrappedTarget = targetLeaf;
+    const wrappedTargetLeaf = {
+        ...wrappedTarget,
+        tabs: [...wrappedTarget.tabs],
+        size: 50,
+    };
+    const wrappedContainer = {
+        kind: splitKind,
+        children: insertBefore ? [newLeaf, wrappedTargetLeaf] : [wrappedTargetLeaf, newLeaf],
+        size: wrappedTarget.size,
+    };
+    parent.children[targetIndex] = wrappedContainer;
+    return next;
+};
+export const insertPanel = (place, name, inside) => {
+    const existingTabs = getLayoutTabs(inside);
+    if (existingTabs.includes(name)) {
+        return inside;
+    }
+    if (existingTabs.length === 0) {
+        if (inside.kind === "leaf") {
+            return {
+                ...inside,
+                tabs: [name],
+                tabIndex: 0,
+            };
+        }
+        return {
+            kind: "leaf",
+            tabs: [name],
+            tabIndex: 0,
+            size: inside.size,
+        };
+    }
+    const target = place && existingTabs.includes(place.of) ? place.of : existingTabs[0];
+    const where = place?.where || "after-tab";
+    if (where === "before-tab" || where === "after-tab" || where === "first-tab" || where === "last-tab") {
+        return insertTabRelative(inside, name, target, where);
+    }
+    return insertSplitRelative(inside, name, target, where);
+};
 /**
  * Moves a panel within the layout based on a drop zone and panel name.
  *
@@ -201,13 +346,15 @@ export const movePanel = (zone, name, inside) => {
 export const filterPanels = (names, inside) => {
     const editLayout = (visitedConfig) => {
         let config = visitedConfig;
-        if (config.kind === "leaf" && !config.tabs.every((name) => names.includes(name))) {
+        if (config.kind === "leaf" &&
+            !config.tabs.every((name) => names.includes(name) || isAnchorTab(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 tabs = config.tabs.filter((name) => names.includes(name) || isAnchorTab(name));
             config = {
                 ...config,
-                tabs: config.tabs.filter((name) => names.includes(name)),
-                tabIndex: Math.min(config.tabs.length - 1, config.tabIndex),
+                tabs,
+                tabIndex: tabs.length ? Math.min(tabs.length - 1, config.tabIndex) : 0,
             };
             if (config.tabs.length === 0) {
                 config = null;

package/utils.test.d.ts

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

package/utils.test.js

@@ -0,0 +1,65 @@
+import { filterPanels, insertPanel } from "./utils";
+describe("filterPanels", () => {
+    it("keeps anchors even when they are not part of rendered Panel children", () => {
+        const config = {
+            kind: "leaf",
+            tabs: ["@anchor-1", "Panel 1", "Panel 2"],
+            tabIndex: 2,
+            size: 100,
+        };
+        const filtered = filterPanels(["Panel 1"], config);
+        expect(filtered.kind).toBe("leaf");
+        expect(filtered.tabs).toEqual(["@anchor-1", "Panel 1"]);
+        expect(filtered.tabIndex).toBe(1);
+    });
+});
+describe("insertPanel", () => {
+    it("falls back to first tab when place.of is missing", () => {
+        const config = {
+            kind: "leaf",
+            tabs: ["Panel 1", "Panel 2"],
+            tabIndex: 0,
+            size: 100,
+        };
+        const updated = insertPanel({ where: "after-tab", of: "Missing" }, "Panel 3", config);
+        expect(updated.kind).toBe("leaf");
+        expect(updated.tabs).toEqual(["Panel 1", "Panel 3", "Panel 2"]);
+    });
+    it("inserts a new sibling leaf when splitting in the same container axis", () => {
+        const config = {
+            kind: "row",
+            size: 100,
+            children: [
+                { kind: "leaf", tabs: ["Panel 1"], tabIndex: 0, size: 60 },
+                { kind: "leaf", tabs: ["Panel 2"], tabIndex: 0, size: 40 },
+            ],
+        };
+        const updated = insertPanel({ where: "right", of: "Panel 1" }, "Panel 3", config);
+        expect(updated.kind).toBe("row");
+        const tabs = updated.children.map((child) => child.tabs[0]);
+        expect(tabs).toEqual(["Panel 1", "Panel 3", "Panel 2"]);
+        expect(updated.children.map((child) => child.size)).toEqual([30, 30, 40]);
+    });
+    it("inserts at the start of the target tab list with first-tab", () => {
+        const config = {
+            kind: "leaf",
+            tabs: ["Panel 1", "Panel 2", "Panel 3"],
+            tabIndex: 1,
+            size: 100,
+        };
+        const updated = insertPanel({ where: "first-tab", of: "Panel 2" }, "Panel 4", config);
+        expect(updated.kind).toBe("leaf");
+        expect(updated.tabs).toEqual(["Panel 4", "Panel 1", "Panel 2", "Panel 3"]);
+    });
+    it("inserts at the end of the target tab list with last-tab", () => {
+        const config = {
+            kind: "leaf",
+            tabs: ["Panel 1", "Panel 2", "Panel 3"],
+            tabIndex: 1,
+            size: 100,
+        };
+        const updated = insertPanel({ where: "last-tab", of: "Panel 2" }, "Panel 4", config);
+        expect(updated.kind).toBe("leaf");
+        expect(updated.tabs).toEqual(["Panel 1", "Panel 2", "Panel 3", "Panel 4"]);
+    });
+});