'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var useMeasure = require('react-use-measure');
var react = require('@use-gesture/react');

/*! *****************************************************************************
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 */

var extendStatics = function(d, b) {
    extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
    return extendStatics(d, b);
};

function __extends(d, b) {
    if (typeof b !== "function" && b !== null)
        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

var __assign = function() {
    __assign = Object.assign || function __assign(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};

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;
}

function __spreadArray(to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
}

function leafDehydrate() {
    var _a = this, children = _a.children, onTab = _a.onTab, grow = _a.grow;
    return { children: children, onTab: onTab, grow: grow };
}
function branchDehydrate() {
    var _a = this, children = _a.children, isRow = _a.isRow, grow = _a.grow;
    var childrenDehydrated = children.map(function (it) {
        return isTileLeaf(it) ? it.dehydrate() : it.dehydrate();
    });
    return { children: childrenDehydrated, isRow: isRow, grow: grow };
}

function calcChildGrows(children) {
    var growsSolid = children.map(function (c) { var _a; return (_a = c.grow) !== null && _a !== void 0 ? _a : 1; });
    var growSum = growsSolid.reduce(function (s, n) { return (s += n); }, 0); // 部分值
    var grows = growsSolid.map(function (c) { return c / growSum; }); // 相对值
    return grows;
}
function calcChildRects(parent, grows) {
    var isRow = parent.isRow, rect = parent.rect;
    var top = rect.top, left = rect.left, width = rect.width, height = rect.height;
    if (isRow) {
        var childLeft_1 = grows.reduce(function (arr, n, i) {
            // 计算子元素 left
            if (i > 0)
                arr.push(arr[i - 1] + width * grows[i - 1]);
            return arr;
        }, [left]);
        return grows.map(function (n, i) { return ({
            top: top,
            height: height,
            width: n * width,
            left: childLeft_1[i],
        }); });
    }
    else {
        var childTop_1 = grows.reduce(function (arr, n, i) {
            // 计算子元素 top
            if (i > 0)
                arr.push(arr[i - 1] + height * grows[i - 1]);
            return arr;
        }, [top]);
        return grows.map(function (n, i) { return ({
            left: left,
            width: width,
            height: n * height,
            top: childTop_1[i],
        }); });
    }
}

function isTileLeaf(node) {
    var _a = node.children, children = _a === void 0 ? '0' : _a;
    if (children instanceof Array) {
        return isTilePaneNames(children);
    }
    return true;
}
function isTilePaneNames(list) {
    return !(list[0] instanceof Object);
}

function createTileBranch(sub) {
    var isRow = sub.isRow, children = sub.children, id = sub.id, grow = sub.grow;
    return new TileBranch(isRow, children, id, null, grow, undefined);
}

function unfold(node) {
    var leaves = [];
    var branches = [node];
    var stretchBars = [];
    unfold(node);
    function unfold(pane) {
        var children = pane.children;
        !isTilePaneNames(children) &&
            children.forEach(function (p, i) {
                if (!isTileLeaf(p)) {
                    unfold(p);
                    branches.push(p);
                }
                else {
                    leaves.push(p);
                }
                var prevPane = children[i - 1];
                if (!prevPane)
                    return;
                var bar = new StretchBarEntity(pane, prevPane, p);
                stretchBars.push(bar);
            });
    }
    return {
        leaves: leaves,
        branches: branches,
        stretchBars: stretchBars,
    };
}

function isNotNil(target) {
    return target !== null && target !== undefined;
}

function createTilePanes(obj) {
    var map = {};
    var list = [];
    Object.keys(obj).forEach(function (key) {
        map[key] = key;
        list.push({
            name: key,
            child: obj[key],
        });
    });
    return [list, map];
}

function removeInArray(arr, one) {
    var newArr = arr.slice();
    var index = one instanceof Function
        ? arr.findIndex(one)
        : arr.findIndex(function (it) { return it === one; });
    newArr.splice(index, 1);
    return newArr;
}
function replaceInArray(arr, one, newOne) {
    var newArr = arr.slice();
    var index = one instanceof Function
        ? arr.findIndex(one)
        : arr.findIndex(function (it) { return it === one; });
    newArr.splice(index, 1, newOne);
    return newArr;
}

function trimBranch(branch) {
    if (branch.children instanceof Array) {
        branch.children.forEach(function (it) {
            return it instanceof Object &&
                !isTileLeaf(it) &&
                trim(it, branch);
        });
    }
    return branch;
    function trim(node, parent) {
        if (node.children instanceof Array) {
            node.children.forEach(function (it) {
                return it instanceof Object &&
                    !isTileLeaf(it) &&
                    trim(it, node);
            });
            if (node.children.length === 0) {
                parent.children = removeInArray(parent.children, node);
            }
            if (node.children.length === 1) {
                var child = node.children[0];
                if (child instanceof Object) {
                    parent.children = replaceInArray(parent.children, node, child);
                }
            }
        }
    }
}

var ref = { n: 0 };
function increasingID() {
    return (ref.n++).toString(36);
}

function leafSetChildren(children) {
    this.children = children.filter(function (child, i) { return children.findIndex(function (it) { return it === child; }) === i; });
}
function branchSetChildren(children) {
    var _this = this;
    var grows = calcChildGrows(children);
    var rect = calcChildRects(this, grows);
    this.children = children
        .filter(function (child, i) { return children.findIndex(function (it) { return it === child; }) === i; })
        .map(function (it, i) {
        return isTileLeaf(it)
            ? new TileLeaf(it.onTab, it.children instanceof Array ? it.children : [it.children], it.id, _this, grows[i], rect[i])
            : new TileBranch(it.isRow, it.children, it.id, _this, grows[i], rect[i]);
    });
}

var TileNode = /** @class */ (function () {
    function TileNode(id, parent, grow, rect) {
        if (id === void 0) { id = increasingID(); }
        if (parent === void 0) { parent = null; }
        if (grow === void 0) { grow = 1; }
        if (rect === void 0) { rect = {
            top: 0,
            left: 0,
            width: 1,
            height: 1,
        }; }
        this.id = id;
        this.parent = parent;
        this.grow = grow;
        this.rect = rect;
    }
    return TileNode;
}());
var TileLeaf = /** @class */ (function (_super) {
    __extends(TileLeaf, _super);
    function TileLeaf(onTab, children) {
        if (onTab === void 0) { onTab = 0; }
        if (children === void 0) { children = []; }
        var rest = [];
        for (var _i = 2; _i < arguments.length; _i++) {
            rest[_i - 2] = arguments[_i];
        }
        var _this = _super.apply(this, rest) || this;
        _this.onTab = onTab;
        _this.children = children;
        _this.setChildren = leafSetChildren;
        _this.dehydrate = leafDehydrate;
        return _this;
    }
    return TileLeaf;
}(TileNode));
var TileBranch = /** @class */ (function (_super) {
    __extends(TileBranch, _super);
    function TileBranch(isRow, children) {
        if (isRow === void 0) { isRow = false; }
        var rest = [];
        for (var _i = 2; _i < arguments.length; _i++) {
            rest[_i - 2] = arguments[_i];
        }
        var _this = _super.apply(this, rest) || this;
        _this.isRow = isRow;
        _this.setChildren = branchSetChildren;
        _this.dehydrate = branchDehydrate;
        _this.setChildren(children);
        return _this;
    }
    return TileBranch;
}(TileNode));

/**
 * @param {number} distance percentage in container
 * @return {boolean} Did the move succeed?
 */
function move(distance) {
    var lengthSum = this.parentPane.isRow
        ? this.parentPane.rect.width
        : this.parentPane.rect.height;
    var offset = distance / lengthSum;
    var previousPaneGrow = this.previousPane.grow + offset;
    var nextPaneGrow = this.nextPane.grow - offset;
    var isMoved = isValidGrow(previousPaneGrow, nextPaneGrow);
    if (isMoved) {
        this.previousPane.grow = previousPaneGrow;
        this.nextPane.grow = nextPaneGrow;
        this.parentPane.setChildren(this.parentPane.children);
    }
    return isMoved;
}
function isValidGrow(growA, growB) {
    if (growA < 0.04 || growB < 0.04)
        return false;
    var growSum = growA + growB;
    if (growA > growSum || growB > growSum)
        return false;
    return true;
}

var StretchBarEntity = /** @class */ (function () {
    function StretchBarEntity(parentPane, previousPane, nextPane) {
        this.parentPane = parentPane;
        this.previousPane = previousPane;
        this.nextPane = nextPane;
        this.rect = this.nextPane.rect;
        this.move = move;
    }
    return StretchBarEntity;
}());

function useDragAndPosition(paneWithPreBoxRef, name, leaf, hook, drag) {
    if (hook === void 0) { hook = {}; }
    if (drag === void 0) { drag = { threshold: 10, filterTaps: true }; }
    var dispatch = React.useContext(TileDispatchContext);
    var _a = React.useState(), position = _a[0], setPosition = _a[1];
    var isDragging = !!position;
    var bind = react.useGesture({
        onDrag: function (e) {
            var _a;
            (_a = hook === null || hook === void 0 ? void 0 : hook.onDrag) === null || _a === void 0 ? void 0 : _a.call(hook, e);
            var down = e.down, xy = e.xy;
            if (down) {
                setPosition(xy);
            }
            else {
                setPosition(undefined);
            }
        },
        onDragStart: function (e) {
            var _a;
            (_a = hook === null || hook === void 0 ? void 0 : hook.onDragStart) === null || _a === void 0 ? void 0 : _a.call(hook, e);
            dispatch({ tabToStartMoving: { name: name, leaf: leaf } });
        },
        onDragEnd: function (e) {
            var _a;
            dispatch({
                tabToStopMoving: { pane: name, preBox: paneWithPreBoxRef.current },
            });
            (_a = hook === null || hook === void 0 ? void 0 : hook.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(hook, e);
        },
    }, { drag: drag });
    return { bind: bind, position: position, isDragging: isDragging };
}

/* eslint-disable @typescript-eslint/no-explicit-any */
function useThrottleFn(fn, ms) {
    var result = React.useRef();
    var timerRef = React.useRef();
    var throttledFn = React.useCallback(function () {
        var arg = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            arg[_i] = arguments[_i];
        }
        if (!timerRef.current) {
            timerRef.current = window.setTimeout(function () {
                clearTimeout(timerRef.current);
                timerRef.current = undefined;
            }, ms);
            result.current = fn.apply(void 0, arg);
        }
        return result.current;
    }, [fn, ms]);
    return ms ? throttledFn : fn;
}

function useMovingChecker() {
    var tabs = React.useContext(MovingTabsContext);
    var isMoving = React.useCallback(function (name) { return tabs.map(function (tab) { return tab.name; }).includes(name); }, [tabs]);
    return isMoving;
}

function calcBoxPosition(paneWithPreBox, containerRect) {
    var _a;
    if (!paneWithPreBox)
        return {
            top: containerRect.top,
            left: containerRect.left,
            height: containerRect.height,
            width: containerRect.width,
        };
    var node = (_a = paneWithPreBox.leaf) !== null && _a !== void 0 ? _a : paneWithPreBox.branch;
    if (!node)
        return { top: 0, left: 0, height: 1, width: 1 };
    var target = node.target, into = node.into;
    var _b = target.rect, top = _b.top, left = _b.left, width = _b.width, height = _b.height;
    switch (into) {
        case 'left':
            return {
                top: containerRect.top + top * containerRect.height,
                left: containerRect.left + left * containerRect.width,
                height: containerRect.height * height,
                width: containerRect.width * width * proportion,
            };
        case 'right':
            return {
                top: containerRect.top + top * containerRect.height,
                left: containerRect.left +
                    left * containerRect.width +
                    containerRect.width * width * (1 - proportion),
                height: containerRect.height * height,
                width: containerRect.width * width * proportion,
            };
        case 'top':
            return {
                top: containerRect.top + top * containerRect.height,
                left: containerRect.left + left * containerRect.width,
                height: containerRect.height * height * proportion,
                width: containerRect.width * width,
            };
        case 'bottom':
            return {
                top: containerRect.top +
                    top * containerRect.height +
                    containerRect.height * height * (1 - proportion),
                left: containerRect.left + left * containerRect.width,
                height: containerRect.height * height * proportion,
                width: containerRect.width * width,
            };
        default:
            return {
                top: containerRect.top + top * containerRect.height,
                left: containerRect.left + left * containerRect.width,
                height: containerRect.height * height,
                width: containerRect.width * width,
            };
    }
}
var thickness = 0.01;
function calcTitleBoxPosition(paneWithPreBox, leafWithTitleRects, config) {
    if (!(paneWithPreBox === null || paneWithPreBox === void 0 ? void 0 : paneWithPreBox.tab))
        return;
    var _a = paneWithPreBox.tab, target = _a.target, into = _a.into, isNext = _a.hasNext;
    var children = target.children;
    var currentTitle = children[into];
    var current = leafWithTitleRects.find(function (it) { return it.title === currentTitle; });
    if (current) {
        var _b = current.rect, top_1 = _b.top, left = _b.left, height = _b.height, width = _b.width;
        var isEnd = (config === null || config === void 0 ? void 0 : config.isReverse) ? !isNext : isNext;
        var intoLeft = { top: top_1, left: left, height: height, width: thickness };
        var intoRight = {
            top: top_1,
            height: height,
            width: thickness,
            left: left + width - thickness,
        };
        var intoTop = { top: top_1, left: left, height: thickness, width: width };
        var intoBottom = {
            top: top_1 + height - thickness,
            height: thickness,
            width: width,
            left: left,
        };
        var intoPrev = (config === null || config === void 0 ? void 0 : config.isRow) ? intoLeft : intoTop;
        var intoNext = (config === null || config === void 0 ? void 0 : config.isRow) ? intoRight : intoBottom;
        return isEnd ? intoNext : intoPrev;
    }
}
function toInContainer(rect, containerRect) {
    if (!rect)
        return;
    var top = rect.top, left = rect.left, width = rect.width, height = rect.height;
    return {
        top: containerRect.top + top * containerRect.height,
        left: containerRect.left + left * containerRect.width,
        height: containerRect.height * height,
        width: containerRect.width * width,
    };
}

function calcLeafWithTitleRect(titleRects, leaves) {
    var leafWithTitleRects = [];
    leaves.forEach(function (leaf) {
        leaf.children.forEach(function (title, index) {
            var rect = titleRects[title];
            if (!rect)
                return;
            leafWithTitleRects.push({
                leaf: leaf,
                title: title,
                index: index,
                rect: rect,
            });
        });
    });
    return leafWithTitleRects;
}

var branchProportion = 0.05;
var leafProportion = 0.3;
function calcPreBox(branches, leaves, leafWithTitleRects, innerPosition, config) {
    if (!innerPosition)
        return;
    var x = innerPosition[0], y = innerPosition[1];
    for (var _i = 0, leafWithTitleRects_1 = leafWithTitleRects; _i < leafWithTitleRects_1.length; _i++) {
        var _a = leafWithTitleRects_1[_i], leaf = _a.leaf, titleRect = _a.rect, index = _a.index;
        if (isInPane(titleRect, innerPosition)) {
            var isEnd = (config === null || config === void 0 ? void 0 : config.isRow)
                ? titleRect.left + titleRect.width / 2 < x
                : titleRect.top + titleRect.height / 2 < y;
            var isNext = (config === null || config === void 0 ? void 0 : config.isReverse) ? !isEnd : isEnd;
            return {
                tab: {
                    target: leaf,
                    into: index,
                    hasNext: isNext,
                },
            };
        }
    }
    for (var _b = 0, branches_1 = branches; _b < branches_1.length; _b++) {
        var pane = branches_1[_b];
        if (isInPane(pane.rect, innerPosition)) {
            var _c = pane.rect, left = _c.left, top_1 = _c.top, width = _c.width, height = _c.height;
            if (pane.isRow) {
                if (y - top_1 < height * branchProportion)
                    return { branch: { target: pane, into: 'top' } };
                if (top_1 + height - y < height * branchProportion)
                    return { branch: { target: pane, into: 'bottom' } };
            }
            else {
                if (x - left < width * branchProportion)
                    return { branch: { target: pane, into: 'left' } };
                if (left + width - x < width * branchProportion)
                    return { branch: { target: pane, into: 'right' } };
            }
        }
    }
    for (var _d = 0, leaves_1 = leaves; _d < leaves_1.length; _d++) {
        var pane = leaves_1[_d];
        if (isInPane(pane.rect, innerPosition)) {
            var _e = pane.rect, left = _e.left, top_2 = _e.top, width = _e.width, height = _e.height;
            if (x - left < width * leafProportion)
                return { leaf: { target: pane, into: 'left' } };
            if (left + width - x < width * leafProportion)
                return { leaf: { target: pane, into: 'right' } };
            if (y - top_2 < height * leafProportion)
                return { leaf: { target: pane, into: 'top' } };
            if (top_2 + height - y < height * leafProportion)
                return { leaf: { target: pane, into: 'bottom' } };
            return { leaf: { target: pane, into: 'center' } };
        }
    }
}
function isInPane(position, _a) {
    var x = _a[0], y = _a[1];
    var left = position.left, top = position.top, width = position.width, height = position.height;
    return left < x && x < left + width && top < y && y < top + height;
}

function useCalcPreBox(position, throttle) {
    var containerRect = React.useContext(ContainerRectContext);
    var branches = React.useContext(TileBranchesContext);
    var leaves = React.useContext(TileLeavesContext);
    var preBoxInTabBar = React.useContext(TabsBarContext).preBox;
    var titleRects = React.useContext(TitleRectsContext);
    var leafWithTitleRects = React.useMemo(function () { return calcLeafWithTitleRect(titleRects, leaves); }, [leaves, titleRects]);
    var innerPosition = React.useMemo(function () { return absolute2Relative.apply(void 0, __spreadArray([containerRect], position, false)); }, [containerRect, position]);
    var calcLazyPreBox = useThrottleFn(calcPreBox, throttle);
    var paneWithPreBox = React.useMemo(function () {
        return calcLazyPreBox(branches, leaves, leafWithTitleRects, innerPosition, preBoxInTabBar);
    }, [
        branches,
        calcLazyPreBox,
        innerPosition,
        leafWithTitleRects,
        leaves,
        preBoxInTabBar,
    ]);
    return { paneWithPreBox: paneWithPreBox, leafWithTitleRects: leafWithTitleRects };
}

var PreBoxInner = function (_a) {
    var position = _a.position, paneWithPreBoxRef = _a.paneWithPreBoxRef;
    var containerRect = React.useContext(ContainerRectContext);
    var _b = React.useContext(PreBoxConfigContext), throttle = _b.throttle, style = _b.style, className = _b.className, child = _b.child;
    var preBoxInTabBar = React.useContext(TabsBarContext).preBox;
    var _c = useCalcPreBox(position, throttle), paneWithPreBox = _c.paneWithPreBox, leafWithTitleRects = _c.leafWithTitleRects;
    paneWithPreBoxRef.current = paneWithPreBox;
    return React.useMemo(function () {
        var _a;
        var styled = typeof style === 'function' ? style(paneWithPreBox !== null && paneWithPreBox !== void 0 ? paneWithPreBox : {}) : style;
        var classNamed = typeof className === 'function'
            ? className(paneWithPreBox !== null && paneWithPreBox !== void 0 ? paneWithPreBox : {})
            : className;
        var boxPosition = (_a = toInContainer(calcTitleBoxPosition(paneWithPreBox, leafWithTitleRects, preBoxInTabBar), containerRect)) !== null && _a !== void 0 ? _a : calcBoxPosition(paneWithPreBox, containerRect);
        var children = typeof child === 'function' ? child(paneWithPreBox !== null && paneWithPreBox !== void 0 ? paneWithPreBox : {}) : child;
        return (jsxRuntime.jsx("div", __assign({ className: classNamed, style: __assign(__assign(__assign({}, styled), { zIndex: 1, visibility: 'visible', position: 'fixed' }), boxPosition) }, { children: children }), void 0));
    }, [
        child,
        className,
        containerRect,
        leafWithTitleRects,
        paneWithPreBox,
        preBoxInTabBar,
        style,
    ]);
};
var proportion = 0.5;
var PreBox = React.memo(PreBoxInner);

function orFn(orFunc) {
    var args = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        args[_i - 1] = arguments[_i];
    }
    return typeof orFunc === 'function'
        ? orFunc.apply(void 0, args) : orFunc;
}

var DraggableTitleInner = function (props) {
    var name = props.name, dragConfig = props.dragConfig;
    var paneWithPreBoxRef = React.useRef();
    var pane = React.useContext(LeafContext);
    var _a = useDragAndPosition(paneWithPreBoxRef, name, pane, props, dragConfig), position = _a.position, bind = _a.bind, isDragging = _a.isDragging;
    var _b = useFn(props, isDragging), style = _b.style, className = _b.className, children = _b.children, rest = _b.rest;
    var _c = useMeasure({ scroll: true }), targetRef = _c[0], rect = _c[1];
    var setTitleRects = React.useContext(SetTitleRectsContext);
    var left = rect.left, height = rect.height, top = rect.top, width = rect.width;
    React.useEffect(function () {
        setTitleRects({ name: name, rect: { left: left, height: height, top: top, width: width } });
    }, [height, left, name, rect, setTitleRects, top, width]);
    var styled = React.useMemo(function () {
        return (position
            ? __assign(__assign({}, style), { visibility: 'visible', position: 'fixed', left: position[0], top: position[1], transform: 'translate(-50%,-50%)', zIndex: 1, userSelect: 'none' }) : style);
    }, [position, style]);
    return React.useMemo(function () { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [position && jsxRuntime.jsx(PreBox, __assign({}, { paneWithPreBoxRef: paneWithPreBoxRef, position: position }), void 0), jsxRuntime.jsx("div", __assign({}, bind(), rest, { ref: targetRef, style: __assign(__assign({}, styled), { touchAction: 'none' }), className: className }, { children: children }), void 0)] }, void 0)); }, [bind, children, className, position, rest, styled, targetRef]);
};
function useFn(_a, isMoving) {
    var childrenFn = _a.children, styleFn = _a.style, classNameFn = _a.className, rest = __rest(_a, ["children", "style", "className"]);
    var style = React.useMemo(function () { return orFn(styleFn, isMoving); }, [isMoving, styleFn]);
    var children = React.useMemo(function () { return orFn(childrenFn, isMoving); }, [childrenFn, isMoving]);
    var className = React.useMemo(function () { return orFn(classNameFn, isMoving); }, [classNameFn, isMoving]);
    return { style: style, children: children, className: className, rest: rest };
}
var DraggableTitle = React.memo(DraggableTitleInner);

var TabBarInner = function (_a) {
    var tabs = _a.tabs, onTab = _a.onTab, action = _a.action;
    var checkTabMoving = useMovingChecker();
    return React.useMemo(function () { return (jsxRuntime.jsx("div", __assign({ className: "react-tile-pane-tabBar" }, { children: tabs.map(function (tab, i) { return (jsxRuntime.jsx(DraggableTitle, __assign({ className: function (isMoving) {
                return isMoving ? 'react-tile-pane-tabMoving' : 'react-tile-pane-tab';
            }, name: tab }, { children: jsxRuntime.jsxs("div", __assign({ className: i === onTab
                    ? 'react-tile-pane-tabInner '
                    : 'react-tile-pane-tabInnerOff', onClick: function () { return action.switchTab(i); } }, { children: [jsxRuntime.jsx("div", __assign({ className: "react-tile-pane-tabTitle" }, { children: tab }), void 0), !checkTabMoving(tabs[i]) && (jsxRuntime.jsx("div", __assign({ className: "react-tile-pane-off", onClick: function () { return action.closeTab(i); } }, { children: "\u00D7" }), void 0))] }), void 0) }), tab)); }) }), void 0)); }, [action, checkTabMoving, onTab, tabs]);
};
var DefaultTabBar = React.memo(TabBarInner);
var defaultTabsBarConfig = {
    render: DefaultTabBar,
    thickness: 24,
    position: 'top',
    preBox: {
        isRow: true,
        isReverse: false,
    },
};
var TabsBarContext = React.createContext(defaultTabsBarConfig);

var defaultStretchBar = {
    className: function (isRow) { return (isRow ? 'react-tile-pane-Bar' : 'react-tile-pane-Bar'); },
    style: function (isRow) { return ({ cursor: isRow ? 'ew-resize' : 'ns-resize' }); },
};
var StretchBarConfigContext = React.createContext(defaultStretchBar);

var defaultPreBox = {
    throttle: 66,
    style: function (_a) {
        var branch = _a.branch, leaf = _a.leaf, tab = _a.tab;
        if (branch)
            return {
                background: '#35cf9457',
                transition: 'cubic-bezier(0.5, 0.1, 0.165, 1) 233ms',
            };
        if (leaf)
            return {
                background: '#23c6cc57',
                transition: 'cubic-bezier(0.5, 0.1, 0.165, 1) 233ms',
            };
        if (tab)
            return {
                background: '#23c6cc',
                transition: 'cubic-bezier(0.5, 0.1, 0.165, 1) 233ms',
            };
        return {
            background: '#ffffff00',
            transition: 'cubic-bezier(0.5, 0.1, 0.165, 1) 233ms',
        };
    },
};
var PreBoxConfigContext = React.createContext(defaultPreBox);

var defaultPane = {};
var PaneContext = React.createContext(defaultPane);

var TitlePanesContext = React.createContext([]);

function moveBar(_a, barToMove) {
    var rootNode = _a.rootNode, movingTabs = _a.movingTabs;
    var bar = barToMove.bar, distance = barToMove.distance;
    bar.move(distance);
    var nodes = unfold(rootNode);
    return __assign(__assign({}, nodes), { movingTabs: movingTabs, rootNode: rootNode });
}

function startMovingTab(_a, tabToStopMoving, notMoving) {
    var _b;
    var movingTabs = _a.movingTabs, leaves = _a.leaves, branches = _a.branches, rootNode = _a.rootNode;
    var newMovingTabs = movingTabs.slice();
    var name = tabToStopMoving.name;
    var existedTab = newMovingTabs.find(function (it) { return (it.name = name); });
    var leafIndex = leaves.findIndex(function (l) { return l === tabToStopMoving.leaf; });
    var leaf = leaves.find(function (l) { return l.children.includes(name); });
    var tabIndex = (_b = leaf === null || leaf === void 0 ? void 0 : leaf.children.findIndex(function (it) { return it === name; })) !== null && _b !== void 0 ? _b : 0;
    if (leaf) {
        var newChildren = removeInArray(leaf.children, name);
        leaf.onTab = 0;
        leaf.setChildren(newChildren);
        if (newChildren.length === 0) {
            removeNode(branches, leaf);
        }
    }
    if (!notMoving && !existedTab) {
        newMovingTabs.push(__assign(__assign({}, tabToStopMoving), { tabIndex: tabIndex, leafIndex: leafIndex }));
    }
    var nodes = unfold(rootNode);
    return __assign({ movingTabs: newMovingTabs, rootNode: rootNode }, nodes);
}
function removeNode(branches, node) {
    var parent = branches.find(function (it) { return it === node.parent; });
    if (parent) {
        var newChildren = removeInArray(parent.children, function (it) { return it.id === node.id; });
        if (newChildren.length === 0) {
            removeNode(branches, parent);
        }
        else {
            parent.setChildren(newChildren);
        }
    }
}

function stopMovingTab(_a, _b) {
    var pane = _b.pane, preBox = _b.preBox;
    var movingTabs = _a.movingTabs, rest = __rest(_a, ["movingTabs"]);
    var newMovingTabs = removeInArray(movingTabs, function (it) { return (it.name = pane); });
    if (preBox) {
        var rootNode = rest.rootNode;
        insertPane(pane, preBox, rest);
        var nodes = unfold(rootNode);
        return __assign({ movingTabs: newMovingTabs, rootNode: rootNode }, nodes);
    }
    else
        return __assign({ movingTabs: newMovingTabs }, rest);
}
var next = ['right', 'bottom'];
var row = ['right', 'left'];
function insertPane(pane, preBox, nodes) {
    var _a, _b;
    // const { targetNode: node, into } = preBox
    var node = (_b = (_a = preBox.leaf) !== null && _a !== void 0 ? _a : preBox.branch) !== null && _b !== void 0 ? _b : preBox.tab;
    if (!node)
        return;
    var target = node.target, into = node.into;
    var leaves = nodes.leaves, branches = nodes.branches;
    var isNext = typeof into === 'number' ? false : next.includes(into);
    var isBrother = typeof into === 'number' ? false : isSegment(target, into);
    var isRow = typeof into === 'number' ? false : row.includes(into);
    if (isTileLeaf(target)) {
        var leaf = leaves.find(function (it) { return it === target; });
        if (leaf) {
            if (into === 'center') {
                var newChildren = leaf.children.slice();
                newChildren.push(pane);
                leaf.setChildren(newChildren);
                leaf.onTab = leaf.children.length - 1;
            }
            else if (preBox.tab) {
                var newChildren = leaf.children.slice();
                var index = preBox.tab.into + (preBox.tab.hasNext ? 1 : 0);
                newChildren.splice(index, 0, pane);
                leaf.setChildren(newChildren);
                leaf.onTab = index;
            }
            else {
                isBrother
                    ? segment(target, pane, isNext)
                    : fission(target, pane, isNext, isRow);
            }
        }
    }
    else {
        var branch = branches.find(function (it) { return it === target; });
        if (branch) {
            fission(target, pane, isNext, isRow);
        }
    }
}
/** 分割 ——插入同级节点 */
function segment(node, pane, isNext) {
    var parent = node.parent;
    if (!parent)
        return;
    var grow = node.grow / 2;
    var leaf = { grow: grow, children: [pane] };
    node.grow = grow;
    var indexInParent = parent.children.findIndex(function (it) { return it === node; });
    var index = isNext ? indexInParent + 1 : indexInParent;
    var newNodes = parent.children.slice();
    if (newNodes.find(function (_a) {
        var children = _a.children;
        if (children instanceof Array)
            return children.includes(pane);
        return children === pane;
    }))
        return;
    newNodes.splice(index, 0, leaf);
    parent.setChildren(newNodes);
}
/** 分裂 ——插入子级节点*/
function fission(node, pane, isNext, isRow) {
    var parent = node.parent, grow = node.grow;
    if (!parent) {
        var newLeaf_1 = { grow: grow, children: [pane] };
        var oldLeaf = isTileLeaf(node)
            ? node.dehydrate()
            : node.dehydrate();
        if (substanceHasPane(oldLeaf, pane))
            return;
        if (!isTileLeaf(node)) {
            node.isRow = isRow;
            node.setChildren(isNext ? [oldLeaf, newLeaf_1] : [newLeaf_1, oldLeaf]);
        }
        return;
    }
    var brother = parent.children.filter(function (it) { return it !== node; });
    if (brother.some(function (it) { return hasPane(it, pane); }))
        return;
    var newLeaf = { grow: grow, children: [pane] };
    var branch = {
        grow: grow,
        isRow: isRow,
        children: isNext ? [node, newLeaf] : [newLeaf, node],
    };
    var newNodes = replaceInArray(parent === null || parent === void 0 ? void 0 : parent.children, node, branch);
    parent.setChildren(newNodes);
}
function isSegment(node, into) {
    var _a;
    var isRow = (_a = node.parent) === null || _a === void 0 ? void 0 : _a.isRow;
    var segmentInto = isRow ? ['left', 'right'] : ['top', 'bottom'];
    return segmentInto.includes(into);
}
function hasPane(node, pane) {
    if (isTileLeaf(node))
        return node.children.includes(pane);
    return node.children.some(function (it) { return hasPane(it, pane); });
}
function substanceHasPane(substance, pane) {
    if (substance.children instanceof Array)
        return substance.children.some(function (it) {
            if (typeof it === 'object')
                return substanceHasPane(it, pane);
            return it === pane;
        });
    return substance.children === pane;
}

function switchLeafTab(state, switchLeafTab) {
    var leaves = state.leaves, rest = __rest(state, ["leaves"]);
    var newLeaves = leaves.slice();
    var leaf = newLeaves.find(function (l) { return l === switchLeafTab.leaf; });
    if (leaf) {
        leaf.onTab = switchLeafTab.onTab;
    }
    return __assign({ leaves: newLeaves }, rest);
}

function initRootNode(rootNodeSub) {
    var rootNode = createTileBranch(rootNodeSub);
    var nodes = unfold(rootNode);
    return __assign({ rootNode: rootNode }, nodes);
}

var tileStoreReducer = function (state, _a) {
    var leafToSwitchTab = _a.leafToSwitchTab, tabToStopMoving = _a.tabToStopMoving, tabToStartMoving = _a.tabToStartMoving, barToMove = _a.barToMove, leafToCloseTab = _a.leafToCloseTab, reset = _a.reset;
    if (leafToSwitchTab)
        return switchLeafTab(state, leafToSwitchTab);
    if (leafToCloseTab)
        return startMovingTab(state, leafToCloseTab, true);
    if (tabToStartMoving)
        return startMovingTab(state, tabToStartMoving);
    if (tabToStopMoving)
        return stopMovingTab(state, tabToStopMoving);
    if (barToMove)
        return moveBar(state, barToMove);
    if (reset)
        return __assign({ movingTabs: [] }, initRootNode(reset));
    return state;
};

var TitleRectsContext = React.createContext({});
var SetTitleRectsContext = React.createContext(function () { return void null; });
var TitleRectsProvider = function (_a) {
    var children = _a.children;
    var containerRect = React.useContext(ContainerRectContext);
    var _b = React.useReducer(reducer, {}), titleRects = _b[0], setTitleRects = _b[1];
    return React.useMemo(function () { return (jsxRuntime.jsx(TitleRectsContext.Provider, __assign({ value: titleRects }, { children: jsxRuntime.jsx(SetTitleRectsContext.Provider, __assign({ value: setTitleRects }, { children: children }), void 0) }), void 0)); }, [children, titleRects]);
    function reducer(state, _a) {
        var rect = _a.rect, name = _a.name;
        var _b = absolute2Relative(containerRect, rect.left, rect.top), left = _b[0], top = _b[1];
        var _c = absolute2Relative(containerRect, rect.left + rect.width, rect.top + rect.height), right = _c[0], bottom = _c[1];
        var width = right - left;
        var height = bottom - top;
        state[name] = { left: left, height: height, width: width, top: top };
        return state;
    }
};
var LeafWithTitleRectProvider = function (_a) {
    var children = _a.children;
    return React.useMemo(function () { return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }, void 0); }, [children]);
};
function absolute2Relative(containerRect, x, y) {
    return [
        (x - containerRect.left) / containerRect.width,
        (y - containerRect.top) / containerRect.height,
    ];
}

var TileDispatchContext = React.createContext(function (s) { return s; });
var TileBranchesContext = React.createContext([]);
var TileLeavesContext = React.createContext([]);
var StretchBarsContext = React.createContext([]);
var MovingTabsContext = React.createContext([]);
var MovingTabsDispatchContext = React.createContext(function (s) { return s; });
var ContainerRefContext = React.createContext(function () { return null; });
var defaultRect = {
    left: 0,
    top: 0,
    width: 0,
    height: 0,
    bottom: 0,
    right: 0,
    x: 0,
    y: 0,
};
var ContainerRectContext = React.createContext(defaultRect);
var MousePositionContext = React.createContext([0, 0]);

function useGetRootNode() {
    var nodes = React.useContext(TileBranchesContext);
    return function () { return nodes[0].dehydrate(); };
}

function useGetLeaf() {
    var leaves = React.useContext(TileLeavesContext);
    return function (name) {
        var leaf = leaves.find(function (l) { return l.children.includes(name); });
        return leaf;
    };
}

function useMovePane() {
    var dispatch = React.useContext(TileDispatchContext);
    var branches = React.useContext(TileBranchesContext);
    var leaves = React.useContext(TileLeavesContext);
    var preBoxInTabBar = React.useContext(TabsBarContext).preBox;
    var titleRects = React.useContext(TitleRectsContext);
    var leafWithTitleRects = React.useMemo(function () { return calcLeafWithTitleRect(titleRects, leaves); }, [leaves, titleRects]);
    return function (name, position) {
        if (!position) {
            dispatch({ leafToCloseTab: { name: name } });
            return;
        }
        var paneWithPreBox = calcPreBox(branches, leaves, leafWithTitleRects, position, preBoxInTabBar);
        dispatch({ tabToStartMoving: { name: name } });
        dispatch({ tabToStopMoving: { pane: name, preBox: paneWithPreBox } });
    };
}

function useReset() {
    var dispatch = React.useContext(TileDispatchContext);
    return React.useCallback(function (reset) {
        dispatch({ reset: reset });
    }, [dispatch]);
}

var TileProviderInner = function (_a) {
    var children = _a.children, rootNodeSub = _a.rootNode, tilePanes = _a.tilePanes, _b = _a.tabBar, tabBar = _b === void 0 ? defaultTabsBarConfig : _b, _c = _a.stretchBar, stretchBar = _c === void 0 ? defaultStretchBar : _c, _d = _a.preBox, preBox = _d === void 0 ? defaultPreBox : _d, _e = _a.pane, pane = _e === void 0 ? defaultPane : _e;
    var _f = React.useReducer(tileStoreReducer, __assign({ movingTabs: [] }, initRootNode(rootNodeSub))), _g = _f[0], branches = _g.branches, leaves = _g.leaves, stretchBars = _g.stretchBars, movingTabs = _g.movingTabs, tileStoreDispatch = _f[1];
    var childrenMemo = React.useMemo(function () { return children; }, [children]);
    var _h = useMeasure({ scroll: true }), targetRef = _h[0], containerRect = _h[1];
    return (jsxRuntime.jsx(ContainerRefContext.Provider, __assign({ value: targetRef }, { children: jsxRuntime.jsx(PreBoxConfigContext.Provider, __assign({ value: preBox }, { children: jsxRuntime.jsx(TitlePanesContext.Provider, __assign({ value: tilePanes }, { children: jsxRuntime.jsx(ContainerRectContext.Provider, __assign({ value: containerRect }, { children: jsxRuntime.jsx(TileBranchesContext.Provider, __assign({ value: branches }, { children: jsxRuntime.jsx(StretchBarConfigContext.Provider, __assign({ value: stretchBar }, { children: jsxRuntime.jsx(TileLeavesContext.Provider, __assign({ value: leaves }, { children: jsxRuntime.jsx(PaneContext.Provider, __assign({ value: pane }, { children: jsxRuntime.jsx(StretchBarsContext.Provider, __assign({ value: stretchBars }, { children: jsxRuntime.jsx(TileDispatchContext.Provider, __assign({ value: tileStoreDispatch }, { children: jsxRuntime.jsx(MovingTabsContext.Provider, __assign({ value: movingTabs }, { children: jsxRuntime.jsx(TabsBarContext.Provider, __assign({ value: tabBar }, { children: jsxRuntime.jsx(TitleRectsProvider, { children: childrenMemo }, void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
};
var TileProvider = React.memo(TileProviderInner);

function usePanes() {
    var movingTabs = React.useContext(MovingTabsContext);
    var leaves = React.useContext(TileLeavesContext);
    var panes = React.useMemo(function () {
        var panes = movingTabs.map(function (_a) {
            var name = _a.name;
            return ({
                name: name,
                rect: null,
            });
        });
        leaves.forEach(function (leaf) {
            panes.push.apply(panes, leaf.children.map(function (name, i) { return ({
                name: name,
                rect: leaf.onTab === i ? leaf.rect : null,
            }); }));
        });
        return panes;
    }, [leaves, movingTabs]);
    return panes;
}

function useChild(id) {
    var tilePanes = React.useContext(TitlePanesContext);
    var findChildPane = React.useCallback(function (id) {
        var pane = tilePanes.find(function (it) { return it.name === id; });
        return pane === null || pane === void 0 ? void 0 : pane.child;
    }, [tilePanes]);
    var child = React.useMemo(function () { return findChildPane(id); }, [findChildPane, id]);
    return child;
}

function useStyle$1(rect) {
    var tabBar = React.useContext(TabsBarContext);
    var position = tabBar.position;
    var _a = React.useMemo(function () { return toQuadrant(position); }, [position]), isVertical = _a[0], isAfter = _a[1];
    var thickness = React.useMemo(function () { return completeUnit(tabBar.thickness); }, [
        tabBar.thickness,
    ]);
    return rect
        ? {
            position: 'absolute',
            height: isVertical
                ? toCssCalcLength(rect.height, thickness, '-')
                : toCssLength(rect.height),
            width: isVertical
                ? toCssLength(rect.width)
                : toCssCalcLength(rect.width, thickness, '-'),
            top: isVertical && !isAfter
                ? toCssCalcLength(rect.top, thickness, '+')
                : toCssLength(rect.top),
            left: !isVertical && !isAfter
                ? toCssCalcLength(rect.left, thickness, '+')
                : toCssLength(rect.left),
        }
        : {
            display: 'none',
        };
}

var TilePaneInner = function (_a) {
    var pane = _a.pane;
    var _b = React.useContext(PaneContext), style = _b.style, className = _b.className;
    var child = useChild(pane.name);
    var styled = useStyle$1(pane.rect);
    return React.useMemo(function () { return (jsxRuntime.jsx("div", __assign({ className: className, style: __assign(__assign({}, style), styled) }, { children: child }), void 0)); }, [child, className, style, styled]);
};
var TilePane = React.memo(TilePaneInner);

var TilePanesInner = function () {
    var panes = usePanes();
    return React.useMemo(function () { return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: panes.map(function (pane) { return (jsxRuntime.jsx(TilePane, { pane: pane }, pane.name)); }) }, void 0)); }, [panes]);
};
var TilePanes = React.memo(TilePanesInner);

function useStyle(rect, isHidden) {
    var table = React.useContext(TabsBarContext);
    var position = table.position;
    var _a = React.useMemo(function () { return toQuadrant(position); }, [position]), isVertical = _a[0], isAfter = _a[1];
    var thickness = React.useMemo(function () { return completeUnit(table.thickness); }, [table]);
    return {
        visibility: isHidden ? 'hidden' : undefined,
        position: 'absolute',
        width: isVertical ? toCssLength(rect.width) : thickness,
        height: isVertical ? thickness : toCssLength(rect.height),
        top: isAfter ? undefined : toCssLength(rect.top),
        bottom: isAfter ? toCssLength(1 - rect.top - rect.height) : undefined,
        left: isAfter ? undefined : toCssLength(rect.left),
        right: isAfter ? toCssLength(1 - rect.left - rect.width) : undefined,
    };
}

var LeafContext = React.createContext(undefined);
var TabsBarInner = function (props) {
    var leaf = props.leaf, isHidden = props.isHidden;
    var tabBar = React.useContext(TabsBarContext);
    var dispatch = React.useContext(TileDispatchContext);
    var switchTab = React.useCallback(function (onTab) {
        return dispatch({
            leafToSwitchTab: {
                leaf: leaf,
                onTab: onTab,
            },
        });
    }, [dispatch, leaf]);
    var closeTab = React.useCallback(function (index) {
        return dispatch({
            leafToCloseTab: {
                leaf: leaf,
                name: leaf.children[index],
            },
        });
    }, [dispatch, leaf]);
    var action = React.useMemo(function () { return ({ switchTab: switchTab, closeTab: closeTab }); }, [
        closeTab,
        switchTab,
    ]);
    var Render = tabBar.render;
    var style = useStyle(leaf.rect, isHidden);
    return React.useMemo(function () { return (jsxRuntime.jsx(LeafContext.Provider, __assign({ value: leaf }, { children: jsxRuntime.jsx("div", __assign({ style: style }, { children: jsxRuntime.jsx(Render, __assign({ action: action }, props), void 0) }), void 0) }), void 0)); }, [Render, action, leaf, props, style]);
};
var TabsBar = React.memo(TabsBarInner);

function useTabs() {
    var leaves = React.useContext(TileLeavesContext);
    var movingTabs = React.useContext(MovingTabsContext);
    var tabBarsProps = React.useMemo(function () {
        var tabBarsProps = leaves.map(function (leaf) { return ({
            leaf: leaf,
            onTab: leaf.onTab,
            tabs: leaf.children.slice(),
        }); });
        // 保持 onTab
        var onTabs = tabBarsProps.map(function (it) { return it.tabs[it.onTab]; });
        movingTabs.forEach(function (tab) {
            var leaf = tab.leaf;
            if (!leaf)
                return;
            var tabBar = tabBarsProps.find(function (it) { return it.leaf.id === leaf.id; });
            if (tabBar) {
                tabBar.tabs.splice(tab.tabIndex, 0, tab.name);
            }
            else {
                tabBarsProps.splice(tab.leafIndex, 0, {
                    leaf: leaf,
                    onTab: leaf.onTab,
                    tabs: [tab.name],
                    isHidden: true,
                });
            }
        });
        tabBarsProps.forEach(function (it, i) {
            var onTab = it.tabs.findIndex(function (tab) { return tab === onTabs[i]; });
            it.onTab = onTab;
        });
        return tabBarsProps;
    }, [leaves, movingTabs]);
    return tabBarsProps;
}

var TabsBarsInner = function () {
    var tabBars = useTabs();
    return React.useMemo(function () { return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tabBars.map(function (tabBar) { return (jsxRuntime.jsx(TabsBar, __assign({}, tabBar), tabBar.leaf.id)); }) }, void 0)); }, [tabBars]);
};
var TabsBars = React.memo(TabsBarsInner);

function useThrottleMove(bar) {
    var throttle = React.useContext(StretchBarConfigContext).throttle;
    var timerRef = React.useRef();
    var accumulation = React.useRef(0);
    var dispatch = React.useContext(TileDispatchContext);
    var move = React.useCallback(function (distance) {
        var _a;
        if (!timerRef.current) {
            timerRef.current = window.setTimeout(function () {
                clearTimeout(timerRef.current);
                timerRef.current = undefined;
            }, throttle);
            dispatch({
                barToMove: {
                    bar: bar,
                    distance: (_a = accumulation.current) !== null && _a !== void 0 ? _a : distance,
                },
            });
            accumulation.current = distance;
        }
        else {
            accumulation.current += distance;
        }
    }, [bar, dispatch, throttle]);
    return move;
}

function calcBarStyles(_a, offset, isRow) {
    var top = _a.top, left = _a.left, width = _a.width, height = _a.height;
    return {
        top: top * 100 + '%',
        left: left * 100 + '%',
        width: isRow ? undefined : width * 100 + '%',
        height: isRow ? height * 100 + '%' : undefined,
        transform: "translate".concat(isRow ? 'X' : 'Y', "(").concat(offset, "%)"),
    };
}

var StretchBarInner = function (_a) {
    var bar = _a.bar;
    var isRow = bar.parentPane.isRow;
    var containerRect = React.useContext(ContainerRectContext);
    var _b = React.useContext(StretchBarConfigContext), style = _b.style, className = _b.className, child = _b.child, _c = _b.position, position = _c === void 0 ? 'previous' : _c;
    var move = useThrottleMove(bar);
    var styled = React.useMemo(function () { return (typeof style === 'function' ? style(isRow) : style); }, [isRow, style]);
    var classNamed = React.useMemo(function () { return (typeof className === 'function' ? className(isRow) : className); }, [className, isRow]);
    var children = React.useMemo(function () { return (typeof child === 'function' ? child(isRow) : child); }, [child, isRow]);
    var moveBar = React.useCallback(function (mx, my) {
        var distance = isRow
            ? mx / containerRect.width
            : my / containerRect.height;
        move(distance);
    }, [containerRect.height, containerRect.width, isRow, move]);
    var bind = react.useDrag(function (_a) {
        var down = _a.down, _b = _a.delta, mx = _b[0], my = _b[1];
        down && moveBar(mx, my);
    }, { enabled: true });
    var _d = bar.nextPane.rect, top = _d.top, left = _d.left, width = _d.width, height = _d.height;
    return React.useMemo(function () { return (jsxRuntime.jsx("div", __assign({}, bind(), { className: classNamed, style: __assign(__assign(__assign({}, styled), { position: 'absolute', touchAction: 'none' }), calcBarStyles({ top: top, left: left, width: width, height: height }, positionToOffset(position), isRow)) }, { children: children }), void 0)); }, [
        bind,
        children,
        classNamed,
        height,
        isRow,
        left,
        position,
        styled,
        top,
        width,
    ]);
};
var StretchBar = React.memo(StretchBarInner);
function positionToOffset(position) {
    if (position === void 0) { position = 'middle'; }
    switch (position) {
        case 'previous':
            return -100;
        case 'next':
            return -0;
        default:
            return -50;
    }
}

var StretchBarsInner = function () {
    var bars = React.useContext(StretchBarsContext);
    return React.useMemo(function () { return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: bars.map(function (bar) { return (jsxRuntime.jsx(StretchBar, { bar: bar }, bar.nextPane.id)); }) }, void 0)); }, [bars]);
};
var StretchBars = React.memo(StretchBarsInner);

function toCssLength(length) {
    return "".concat(length * 100, "%");
}
function toCssCalcLength(percent, offset, mode) {
    return "calc(".concat(toCssLength(percent), " ").concat(mode, " ").concat(offset, ")");
}
var toQuadrant = function (position) { return [
    ['top', 'bottom'].includes(position),
    ['right', 'bottom'].includes(position),
]; };
var completeUnit = function (len) {
    return typeof len === 'number' ? "".concat(len, "px") : len;
};

var TileContainerInner = function (_a) {
    var _b = _a.style, style = _b === void 0 ? { width: '100%', height: '100%' } : _b, className = _a.className;
    var targetRef = React.useContext(ContainerRefContext);
    var movingTabs = React.useContext(MovingTabsContext);
    return React.useMemo(function () { return (jsxRuntime.jsxs("div", __assign({ ref: targetRef, className: className, style: __assign(__assign({}, style), { position: 'relative', userSelect: movingTabs.length ? 'none' : 'auto' }) }, { children: [jsxRuntime.jsx(TabsBars, {}, void 0), jsxRuntime.jsx(TilePanes, {}, void 0), jsxRuntime.jsx(StretchBars, {}, void 0)] }), void 0)); }, [className, movingTabs.length, style, targetRef]);
};
var TileContainer = React.memo(TileContainerInner);

exports.ContainerRectContext = ContainerRectContext;
exports.ContainerRefContext = ContainerRefContext;
exports.DefaultTabBar = DefaultTabBar;
exports.DraggableTitle = DraggableTitle;
exports.LeafContext = LeafContext;
exports.LeafWithTitleRectProvider = LeafWithTitleRectProvider;
exports.MousePositionContext = MousePositionContext;
exports.MovingTabsContext = MovingTabsContext;
exports.MovingTabsDispatchContext = MovingTabsDispatchContext;
exports.PaneContext = PaneContext;
exports.PreBoxConfigContext = PreBoxConfigContext;
exports.SetTitleRectsContext = SetTitleRectsContext;
exports.StretchBarConfigContext = StretchBarConfigContext;
exports.StretchBarEntity = StretchBarEntity;
exports.StretchBars = StretchBars;
exports.StretchBarsContext = StretchBarsContext;
exports.TabsBar = TabsBar;
exports.TabsBarContext = TabsBarContext;
exports.TabsBars = TabsBars;
exports.TileBranch = TileBranch;
exports.TileBranchesContext = TileBranchesContext;
exports.TileContainer = TileContainer;
exports.TileDispatchContext = TileDispatchContext;
exports.TileLeaf = TileLeaf;
exports.TileLeavesContext = TileLeavesContext;
exports.TileNode = TileNode;
exports.TilePanes = TilePanes;
exports.TileProvider = TileProvider;
exports.TitlePanesContext = TitlePanesContext;
exports.TitleRectsContext = TitleRectsContext;
exports.TitleRectsProvider = TitleRectsProvider;
exports.absolute2Relative = absolute2Relative;
exports.completeUnit = completeUnit;
exports.createTileBranch = createTileBranch;
exports.createTilePanes = createTilePanes;
exports.defaultPane = defaultPane;
exports.defaultPreBox = defaultPreBox;
exports.defaultStretchBar = defaultStretchBar;
exports.defaultTabsBarConfig = defaultTabsBarConfig;
exports.increasingID = increasingID;
exports.initRootNode = initRootNode;
exports.isNotNil = isNotNil;
exports.isTileLeaf = isTileLeaf;
exports.isTilePaneNames = isTilePaneNames;
exports.removeInArray = removeInArray;
exports.replaceInArray = replaceInArray;
exports.tileStoreReducer = tileStoreReducer;
exports.toCssCalcLength = toCssCalcLength;
exports.toCssLength = toCssLength;
exports.toQuadrant = toQuadrant;
exports.trimBranch = trimBranch;
exports.unfold = unfold;
exports.useGetLeaf = useGetLeaf;
exports.useGetRootNode = useGetRootNode;
exports.useMovePane = useMovePane;
exports.useMovingChecker = useMovingChecker;
exports.useReset = useReset;