ui-layout-manager-dev 0.0.1

package/dist/esm/LayoutWorker.js

@@ -0,0 +1,494 @@
+let LAYOUT_WORKER_PROTOCOL = {
+    INITIALIZE: 1,
+    INITIALIZE_FLEXBOX: 2,
+    APPLY_SIZES: 3,
+    ERROR: 4,
+    TRANSFORMATIONS: 5,
+    MOVE_HANDLE_BAR: 6
+};
+LAYOUT_WORKER_PROTOCOL = Object.freeze(LAYOUT_WORKER_PROTOCOL);
+
+var LAYOUT_WORKER_PROTOCOL$1 = LAYOUT_WORKER_PROTOCOL;
+
+let TRANSFORMATION_TYPES = {
+    UPDATE_SIZE: 1
+};
+TRANSFORMATION_TYPES = Object.freeze(TRANSFORMATION_TYPES);
+
+var TRANSFORMATION_TYPES$1 = TRANSFORMATION_TYPES;
+
+/**
+ * This class generates transformations based on the
+ * parents layout configuration. For example, it collapses
+ * a container if the parent size reaches a threshold
+ * or expands it if the is above a threshold.
+ */
+class ParentRuleEnforcer {
+    /**
+     * Initialize the rule enforcer.
+     * @param {Object} sizes 
+     * @param {Object} parent 
+     * @param {Object} child 
+     */
+    constructor (sizes, parent, child) {
+        this.sizes = sizes;
+        this.parent = parent;
+        this.child = child;
+        this.type = null;
+        this.args = {};
+    }
+
+    /**
+     * Get props given node orientation.
+     * @param {Object} node 
+     */
+    getProps(node) {
+        // Identify the dynamic property based on orientation.
+        if (node.orientation === "horizontal") {
+            return {"dynamic": "width", "fixed": "height"};
+        } else if (node.orientation === "vertical") {
+            return {"dynamic": "height", "fixed": "width"};
+        } else {
+            throw new Error(`Unknown orientation "${node.orientation}" in LDF configuration`);
+        }  
+    }
+
+    /**
+     * Evaluate the rules based on parent and child sizes and
+     * the specified layout configuration.
+     */
+    evaluate() {
+        if (this.child.hasOwnProperty("collapse") && this.child["collapse"]["relative"] === "parent") { 
+            this.evaluateCollapseByParent();
+        }
+    }
+
+    /**
+     * Evaluate the collapse by parent property.
+     */
+    evaluateCollapseByParent() {
+        const props = this.getProps(this.parent);
+        const parentSize = this.sizes[this.parent.id];
+
+        let args = {};
+        if (parentSize[props["dynamic"]] <= this.child.collapse.value && this.child.collapse.condition === "lessThan") { 
+            // Collapse below threshold
+            if (!this.child.hidden) {
+                this.type = TRANSFORMATION_TYPES$1.UPDATE_SIZE;
+                args = {style: {"display":"none"}};
+                const prop = "min-" + props["dynamic"];
+                args.style[prop] = 0;
+                this.child.hidden = true;
+            }
+        } else {          
+            // Expand above threshold
+            if (this.child.hidden) {
+                this.type = TRANSFORMATION_TYPES$1.UPDATE_SIZE;
+                args = {style: {"display":"flex"}};
+                if ("min" in this.child.size) {
+                    const prop = "min-" + props["dynamic"];
+                    args.style[prop] = this.child.size.min.value + this.child.size.min.unit;
+                }
+                this.child.hidden = false;
+            }
+        }
+        Object.assign(this.args, args);
+    }
+}
+
+/**
+ * This class generates transformations based on the handle
+ * bars movements. It sets up thresholds at which it collapses
+ * and expands the containers. This isn't the width of the container,
+ * it is the position of the handle bar in the parent container. So
+ * even if a container has a min width of 200px, when the handle bar
+ * reaches 50px from the left, it will collapse it.
+ * 
+ * This will be expanded in the future to have different collapsed states.
+ * So rather than fully collapsing the container, it sets up a 
+ * minimum size, this willl be useful for accordians and other containers.
+ */
+class HandleRulesEnforcer {
+    /**
+     * Initialize the child rule enforcer.
+     * @param {Object} parent
+     * @param {Object} sibling1
+     * @param {Object} sibling2
+     * @param {Object} handleMetadata
+     */
+    constructor (parent, sibling1, sibling2, handleMetadata) {
+        this.parent = parent;
+        this.type = null;
+        this.args = {};
+        this.sibling1 = sibling1;
+        this.sibling2 = sibling2;
+        this.handleMetadata = handleMetadata;
+    }
+
+    /**
+     * Get props given node orientation.
+     * @param {Object} node 
+     */
+    getProps(node) {
+        // Identify the dynamic property based on orientation.
+        if (node.orientation === "horizontal") {
+            return {"dynamic": "width", "fixed": "height"};
+        } else if (node.orientation === "vertical") {
+            return {"dynamic": "height", "fixed": "width"};
+        } else {
+            throw new Error(`Unknown orientation "${node.orientation}" in LDF configuration`);
+        }  
+    }
+    
+    /**
+     * Evaluate the rules based on childs 
+     */
+    evaluate() {
+        this.activeSibling = null;
+        const props = this.getProps(this.parent);
+        if (props.dynamic === "width") {
+            this.processVerticalContainers();
+        } else if (props.dynamic === "height") {
+            this.processHorizontalContainers();
+        }
+    }
+
+    /**
+     * Process the vertical containers.
+     */
+    processVerticalContainers () {
+        const totalWidth = this.handleMetadata.sizes[this.parent.id].width;
+        this.type = TRANSFORMATION_TYPES$1.UPDATE_SIZE;
+
+        // Currently only collapse the edge containers
+        // TODO: In the future add logic for middle containers (accordian style)
+        if (!this.checkIfEdgeContainer()) {
+            return;
+        }
+        
+        if (this.handleMetadata.handle.x < 100) {
+            this.args = {style: {"display":"none", "min-width":0}};
+            this.sibling1.hidden = true;
+            this.activeSibling = this.sibling1.id;
+        } else if (this.handleMetadata.handle.x > 100 && this.sibling1.hidden) {
+            this.args = {style: {"display":"flex"}};
+            const sibling = this.getSiblingProps(this.sibling1.id);
+            if ("min" in sibling.size) {
+                this.args.style["min-width"] = sibling.size.min.value + sibling.size.min.unit;
+            }
+            this.sibling1.hidden = false;
+            this.activeSibling = this.sibling1.id;
+        } 
+        
+        
+        if (this.handleMetadata.handle.x > totalWidth - 100) {
+            this.args = {style: {"display":"none", "min-width":0}};
+            this.sibling2.hidden = true;
+            this.activeSibling = this.sibling2.id;
+        } else if (this.handleMetadata.handle.x < totalWidth - 100 && this.sibling2.hidden) {
+            this.args = {style: {"display":"flex"}};
+            const sibling = this.getSiblingProps(this.sibling2.id);
+            if ("min" in sibling.size) {
+                this.args.style["min-width"] = sibling.size.min.value + sibling.size.min.unit;
+            }
+            this.sibling2.hidden = false;
+            this.activeSibling = this.sibling2.id;
+        }
+    }
+
+
+     /**
+     * Process the vertical containers.
+     */
+    processHorizontalContainers () {
+        const totalHeight = this.handleMetadata.sizes[this.parent.id].height;
+        this.type = TRANSFORMATION_TYPES$1.UPDATE_SIZE;
+
+        // Currently only collapse the edge containers
+        // TODO: In the future add logic for middle containers (accordian style)
+        if (!this.checkIfEdgeContainer()) {
+            return;
+        }
+        
+        if (this.handleMetadata.handle.y < 100) {
+            this.args = {style: {"display":"none", "min-height":0}};
+            this.sibling1.hidden = true;
+            this.activeSibling = this.sibling1.id;
+        } else if (this.handleMetadata.handle.y > 100 && this.sibling1.hidden) {
+            this.args = {style: {"display":"flex"}};
+            const sibling = this.getSiblingProps(this.sibling1.id);
+            if ("min" in sibling.size) {
+                this.args.style["min-height"] = sibling.size.min.value + sibling.size.min.unit;
+            }
+            this.sibling1.hidden = false;
+            this.activeSibling = this.sibling1.id;
+        } 
+        
+        
+        if (this.handleMetadata.handle.y > totalHeight - 100) {
+            this.args = {style: {"display":"none", "min-height":0}};
+            this.sibling2.hidden = true;
+            this.activeSibling = this.sibling2.id;
+        } else if (this.handleMetadata.handle.y < totalHeight - 100 && this.sibling2.hidden) {
+            this.args = {style: {"display":"flex"}};
+            const sibling = this.getSiblingProps(this.sibling2.id);
+            if ("min" in sibling.size) {
+                this.args.style["min-height"] = sibling.size.min.value + sibling.size.min.unit;
+            }
+            this.sibling2.hidden = false;
+            this.activeSibling = this.sibling2.id;
+        }
+    }
+
+    /**
+     * Given the sibling ID, it returns the child properties from the parent.
+     * This includes the min-size and max-size. This is done because the actual
+     * min and max sizes are saved in the children of the parent, not in the actual
+     * container itself in the LDF file. 
+     * @param {String} siblingId 
+     */
+    getSiblingProps (siblingId) {
+        for (let i = 0; i < this.parent.children.length; i++) {
+            const child = this.parent.children[i];
+            if (child.containerId ===  siblingId) {
+                return child;
+            }
+        }
+    }
+
+
+    /**
+     * Check if the handle bar is attached to the edge of the parent container.
+     * i.e. Is sibling1 on the very left or is sibling2 on the very right.
+     */
+    checkIfEdgeContainer () {
+        const firstSibling = this.parent.children[0];
+        const lastSibling = this.parent.children[this.parent.children.length -1];
+
+        if (firstSibling.containerId === this.sibling1.id) {
+            return true;
+        } else if (lastSibling.containerId === this.sibling2.id) {
+            return true;
+        }
+
+        return false;
+    }
+}
+
+class LayoutEditor {
+
+    /**
+     * Initializes the editor with the given ldf file.
+     * @param {Object} ldf 
+     */
+    constructor (ldf) {
+        this.ldf = ldf;
+        console.log("Created modifier with ", this.ldf);
+        this.transformations = [];
+    }
+
+    /**
+     * Initializes flexbox layout by processing LDF file.
+     */
+    initializeFlexBox() {
+        this.initializeNode(this.ldf.containers[this.ldf.layoutRoot]);        
+        postMessage({
+            type: LAYOUT_WORKER_PROTOCOL$1.INITIALIZE_FLEXBOX,
+            data: this.transformations
+        });
+        this.transformations = [];
+    }
+
+    /**
+     * Get props given node orientation.
+     * @param {Object} node 
+     */
+    getProps(node) {
+        // Identify the dynamic property based on orientation.
+        if (node.orientation === "horizontal") {
+            return {"dynamic": "width", "fixed": "height"};
+        } else if (node.orientation === "vertical") {
+            return {"dynamic": "height", "fixed": "width"};
+        } else {
+            throw new Error(`Unknown orientation "${node.orientation}" in LDF configuration`);
+        }  
+    }
+
+    /**
+     * Processes the node and applies the initial flex box styles. It recursively
+     * calls the initialization function on the nodes children until the entire
+     * layout is initialized.
+     * 
+     * After initialization, the layout is recalculated when the handle bar moves
+     * or when the window is resized. In the future, I will add programatic control
+     * to modify the layout. This means that the API will ask to divide a container
+     * in two or to delete container.
+     * 
+     * TODO: Implement the programmatic control of layout containers (see above).
+     * 
+     * @param {Object} node Node to process.
+     */
+    initializeNode (node) {
+        const isSplit = node.type ? node.type === "split": false;
+
+        // If node is not split, then it has no children and is a leaf node, so we return.
+        if (!isSplit) {
+            return;
+        }
+
+        const props = this.getProps(node);
+        
+        for (const child of node.children) {
+            if (child.type === "container") {
+                let childStyle = {};
+                switch(child.size.initial.type) {
+                    case "fixed":
+                        childStyle[props["dynamic"]] = child.size.initial.value + "px" ;                    
+                        childStyle["flex"] = "0 0 auto";
+                        break;
+                    case "fill":
+                        childStyle["flexGrow"] = 1;
+                        break;
+                    default:
+                        throw new Error(`Unknown size type "${child.size.initial.type}" in LDF configuration`);
+                }
+
+                if ("min" in child.size) {
+                    childStyle["min-" + props["dynamic"]] = child.size.min.value + "px"  ;
+                }
+
+                if ("max" in child.size) {
+                    childStyle["max-" + props["dynamic"]] = child.size.max.value + "px" ;
+                }
+
+                const childContainer = this.ldf.containers[child.containerId];
+                childContainer.collapsed = false;
+                this.transformations.push(
+                    {
+                        id: childContainer.id, 
+                        type: TRANSFORMATION_TYPES$1.UPDATE_SIZE,
+                        args: {style: childStyle}
+                    }
+                );
+                this.initializeNode(childContainer);
+            }
+        }
+    }
+
+    /**
+     * Use the given sizes to perform layout calculations and generate
+     * transformations.
+     * @param {Object} sizes 
+     */
+    applySizes(sizes) {        
+        this.sizes = sizes; 
+        this.applyLayoutToNode(this.ldf.layoutRoot);        
+        postMessage({
+            type: LAYOUT_WORKER_PROTOCOL$1.TRANSFORMATIONS,
+            data: this.transformations
+        });
+        this.transformations = [];
+    }
+
+    /**
+     * This function moves the handlebar.
+     * @param {Object} metadata 
+     */
+    moveHandleBar(metadata) {
+        const parent = this.ldf.containers[metadata.parent];
+        const sibling1 = this.ldf.containers[metadata.sibling1];
+        const sibling2 = this.ldf.containers[metadata.sibling2];
+        const enforcer = new HandleRulesEnforcer(parent, sibling1, sibling2, metadata);
+        enforcer.evaluate();
+
+        if (enforcer.activeSibling !== null) {
+            this.transformations.push(
+                {
+                    id: enforcer.activeSibling, 
+                    type: TRANSFORMATION_TYPES$1.UPDATE_SIZE,
+                    args: enforcer.args
+                }
+            );   
+            postMessage({
+                type: LAYOUT_WORKER_PROTOCOL$1.TRANSFORMATIONS,
+                data: this.transformations
+            });
+            this.transformations = [];
+        }
+    }
+
+    /**
+     * Applys the layout logic to the node with the given container id. 
+     * @param {String} containerId 
+     * @returns 
+     */
+    applyLayoutToNode(containerId) {
+        const parent = this.ldf.containers[containerId];        
+
+        // If node is not split, then it has no children and is a leaf node, so we return.
+        if ((!parent.type ? parent.type === "split": false) || (!("children" in parent))) {
+            return;
+        }
+
+        if (!this.sizes[containerId]) {
+            console.warn(`Parent size not found for node ${parent.id}. Skipping collapse checks.`);
+            return;
+        }
+
+        for (const child of parent.children) {
+            if (child.type === "container") {
+                const enforcer = new ParentRuleEnforcer(this.sizes, parent, child);
+                enforcer.evaluate();
+                if (enforcer.type) {
+                    this.transformations.push(
+                        {
+                            id: this.ldf.containers[child.containerId].id,
+                            type: enforcer.type,
+                            args: enforcer.args,
+                        }
+                    );
+                }
+                this.applyLayoutToNode(child.containerId);
+            }
+        }
+    }
+}
+
+/**
+ * This function receives messages from the main thread and executes
+ * the layout manipulation logic.
+ * @param {Object} e 
+ */
+let editor;
+self.onmessage = function (e) {
+
+    try {
+        const args = e.data.args;
+        switch (e.data.code) {
+            case LAYOUT_WORKER_PROTOCOL$1.INITIALIZE:
+                /** @type {LayoutEditor} */
+                editor = new LayoutEditor(args.ldf);
+                break;
+            case LAYOUT_WORKER_PROTOCOL$1.INITIALIZE_FLEXBOX:
+                editor.initializeFlexBox();
+                break;
+            case LAYOUT_WORKER_PROTOCOL$1.APPLY_SIZES:
+                editor.applySizes(args.sizes);
+                break;
+            case LAYOUT_WORKER_PROTOCOL$1.MOVE_HANDLE_BAR:
+                editor.moveHandleBar(args.metadata);
+                break;
+            default:
+                break;
+        }
+
+    } catch (e) {
+        postMessage({
+            type: LAYOUT_WORKER_PROTOCOL$1.ERROR,
+            error: {
+                message: e.message,
+                stack: e.stack
+            }
+        });
+    }
+};

package/dist/esm/index.js

@@ -0,0 +1,15 @@
+import e,{useMemo as n,useEffect as r,createContext as t,useContext as o,useRef as i,lazy as a,Suspense as c,useState as s,useCallback as l,useLayoutEffect as u}from"react";import{jsx as f}from"react/jsx-runtime";function p(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var d,y={exports:{}},h={exports:{}},v={};var m,b,g,w,S,x,O,E,k,R,T,C,j,I,P,N={};
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */function z(){return b||(b=1,"production"===process.env.NODE_ENV?h.exports=function(){if(d)return v;d=1;var e="function"==typeof Symbol&&Symbol.for,n=e?Symbol.for("react.element"):60103,r=e?Symbol.for("react.portal"):60106,t=e?Symbol.for("react.fragment"):60107,o=e?Symbol.for("react.strict_mode"):60108,i=e?Symbol.for("react.profiler"):60114,a=e?Symbol.for("react.provider"):60109,c=e?Symbol.for("react.context"):60110,s=e?Symbol.for("react.async_mode"):60111,l=e?Symbol.for("react.concurrent_mode"):60111,u=e?Symbol.for("react.forward_ref"):60112,f=e?Symbol.for("react.suspense"):60113,p=e?Symbol.for("react.suspense_list"):60120,y=e?Symbol.for("react.memo"):60115,h=e?Symbol.for("react.lazy"):60116,m=e?Symbol.for("react.block"):60121,b=e?Symbol.for("react.fundamental"):60117,g=e?Symbol.for("react.responder"):60118,w=e?Symbol.for("react.scope"):60119;function S(e){if("object"==typeof e&&null!==e){var p=e.$$typeof;switch(p){case n:switch(e=e.type){case s:case l:case t:case i:case o:case f:return e;default:switch(e=e&&e.$$typeof){case c:case u:case h:case y:case a:return e;default:return p}}case r:return p}}}function x(e){return S(e)===l}return v.AsyncMode=s,v.ConcurrentMode=l,v.ContextConsumer=c,v.ContextProvider=a,v.Element=n,v.ForwardRef=u,v.Fragment=t,v.Lazy=h,v.Memo=y,v.Portal=r,v.Profiler=i,v.StrictMode=o,v.Suspense=f,v.isAsyncMode=function(e){return x(e)||S(e)===s},v.isConcurrentMode=x,v.isContextConsumer=function(e){return S(e)===c},v.isContextProvider=function(e){return S(e)===a},v.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},v.isForwardRef=function(e){return S(e)===u},v.isFragment=function(e){return S(e)===t},v.isLazy=function(e){return S(e)===h},v.isMemo=function(e){return S(e)===y},v.isPortal=function(e){return S(e)===r},v.isProfiler=function(e){return S(e)===i},v.isStrictMode=function(e){return S(e)===o},v.isSuspense=function(e){return S(e)===f},v.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===t||e===l||e===i||e===o||e===f||e===p||"object"==typeof e&&null!==e&&(e.$$typeof===h||e.$$typeof===y||e.$$typeof===a||e.$$typeof===c||e.$$typeof===u||e.$$typeof===b||e.$$typeof===g||e.$$typeof===w||e.$$typeof===m)},v.typeOf=S,v}():h.exports=(m||(m=1,"production"!==process.env.NODE_ENV&&function(){var e="function"==typeof Symbol&&Symbol.for,n=e?Symbol.for("react.element"):60103,r=e?Symbol.for("react.portal"):60106,t=e?Symbol.for("react.fragment"):60107,o=e?Symbol.for("react.strict_mode"):60108,i=e?Symbol.for("react.profiler"):60114,a=e?Symbol.for("react.provider"):60109,c=e?Symbol.for("react.context"):60110,s=e?Symbol.for("react.async_mode"):60111,l=e?Symbol.for("react.concurrent_mode"):60111,u=e?Symbol.for("react.forward_ref"):60112,f=e?Symbol.for("react.suspense"):60113,p=e?Symbol.for("react.suspense_list"):60120,d=e?Symbol.for("react.memo"):60115,y=e?Symbol.for("react.lazy"):60116,h=e?Symbol.for("react.block"):60121,v=e?Symbol.for("react.fundamental"):60117,m=e?Symbol.for("react.responder"):60118,b=e?Symbol.for("react.scope"):60119;function g(e){if("object"==typeof e&&null!==e){var p=e.$$typeof;switch(p){case n:var h=e.type;switch(h){case s:case l:case t:case i:case o:case f:return h;default:var v=h&&h.$$typeof;switch(v){case c:case u:case y:case d:case a:return v;default:return p}}case r:return p}}}var w=s,S=l,x=c,O=a,E=n,k=u,R=t,T=y,C=d,j=r,I=i,P=o,z=f,L=!1;function $(e){return g(e)===l}N.AsyncMode=w,N.ConcurrentMode=S,N.ContextConsumer=x,N.ContextProvider=O,N.Element=E,N.ForwardRef=k,N.Fragment=R,N.Lazy=T,N.Memo=C,N.Portal=j,N.Profiler=I,N.StrictMode=P,N.Suspense=z,N.isAsyncMode=function(e){return L||(L=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),$(e)||g(e)===s},N.isConcurrentMode=$,N.isContextConsumer=function(e){return g(e)===c},N.isContextProvider=function(e){return g(e)===a},N.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},N.isForwardRef=function(e){return g(e)===u},N.isFragment=function(e){return g(e)===t},N.isLazy=function(e){return g(e)===y},N.isMemo=function(e){return g(e)===d},N.isPortal=function(e){return g(e)===r},N.isProfiler=function(e){return g(e)===i},N.isStrictMode=function(e){return g(e)===o},N.isSuspense=function(e){return g(e)===f},N.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===t||e===l||e===i||e===o||e===f||e===p||"object"==typeof e&&null!==e&&(e.$$typeof===y||e.$$typeof===d||e.$$typeof===a||e.$$typeof===c||e.$$typeof===u||e.$$typeof===v||e.$$typeof===m||e.$$typeof===b||e.$$typeof===h)},N.typeOf=g}()),N)),h.exports}
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/function L(){if(w)return g;w=1;var e=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;return g=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var n={},r=0;r<10;r++)n["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(n).map(function(e){return n[e]}).join(""))return!1;var t={};return"abcdefghijklmnopqrst".split("").forEach(function(e){t[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},t)).join("")}catch(e){return!1}}()?Object.assign:function(t,o){for(var i,a,c=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(t),s=1;s<arguments.length;s++){for(var l in i=Object(arguments[s]))n.call(i,l)&&(c[l]=i[l]);if(e){a=e(i);for(var u=0;u<a.length;u++)r.call(i,a[u])&&(c[a[u]]=i[a[u]])}}return c},g}function $(){if(x)return S;x=1;return S="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}function A(){return E?O:(E=1,O=Function.call.bind(Object.prototype.hasOwnProperty))}function _(){if(R)return k;R=1;var e=function(){};if("production"!==process.env.NODE_ENV){var n=$(),r={},t=A();e=function(e){var n="Warning: "+e;"undefined"!=typeof console&&console.error(n);try{throw new Error(n)}catch(e){}}}function o(o,i,a,c,s){if("production"!==process.env.NODE_ENV)for(var l in o)if(t(o,l)){var u;try{if("function"!=typeof o[l]){var f=Error((c||"React class")+": "+a+" type `"+l+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof o[l]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw f.name="Invariant Violation",f}u=o[l](i,l,c,a,null,n)}catch(e){u=e}if(!u||u instanceof Error||e((c||"React class")+": type specification of "+a+" `"+l+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof u+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),u instanceof Error&&!(u.message in r)){r[u.message]=!0;var p=s?s():"";e("Failed "+a+" type: "+u.message+(null!=p?p:""))}}}return o.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(r={})},k=o}function B(){if(C)return T;C=1;var e=z(),n=L(),r=$(),t=A(),o=_(),i=function(){};function a(){return null}return"production"!==process.env.NODE_ENV&&(i=function(e){var n="Warning: "+e;"undefined"!=typeof console&&console.error(n);try{throw new Error(n)}catch(e){}}),T=function(c,s){var l="function"==typeof Symbol&&Symbol.iterator;var u="<<anonymous>>",f={array:h("array"),bigint:h("bigint"),bool:h("boolean"),func:h("function"),number:h("number"),object:h("object"),string:h("string"),symbol:h("symbol"),any:y(a),arrayOf:function(e){return y(function(n,t,o,i,a){if("function"!=typeof e)return new d("Property `"+a+"` of component `"+o+"` has invalid PropType notation inside arrayOf.");var c=n[t];if(!Array.isArray(c))return new d("Invalid "+i+" `"+a+"` of type `"+b(c)+"` supplied to `"+o+"`, expected an array.");for(var s=0;s<c.length;s++){var l=e(c,s,o,i,a+"["+s+"]",r);if(l instanceof Error)return l}return null})},element:y(function(e,n,r,t,o){var i=e[n];return c(i)?null:new d("Invalid "+t+" `"+o+"` of type `"+b(i)+"` supplied to `"+r+"`, expected a single ReactElement.")}),elementType:y(function(n,r,t,o,i){var a=n[r];return e.isValidElementType(a)?null:new d("Invalid "+o+" `"+i+"` of type `"+b(a)+"` supplied to `"+t+"`, expected a single ReactElement type.")}),instanceOf:function(e){return y(function(n,r,t,o,i){if(!(n[r]instanceof e)){var a=e.name||u;return new d("Invalid "+o+" `"+i+"` of type `"+(((c=n[r]).constructor&&c.constructor.name?c.constructor.name:u)+"` supplied to `")+t+"`, expected instance of `"+a+"`.")}var c;return null})},node:y(function(e,n,r,t,o){return m(e[n])?null:new d("Invalid "+t+" `"+o+"` supplied to `"+r+"`, expected a ReactNode.")}),objectOf:function(e){return y(function(n,o,i,a,c){if("function"!=typeof e)return new d("Property `"+c+"` of component `"+i+"` has invalid PropType notation inside objectOf.");var s=n[o],l=b(s);if("object"!==l)return new d("Invalid "+a+" `"+c+"` of type `"+l+"` supplied to `"+i+"`, expected an object.");for(var u in s)if(t(s,u)){var f=e(s,u,i,a,c+"."+u,r);if(f instanceof Error)return f}return null})},oneOf:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&i(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),a;return y(function(n,r,t,o,i){for(var a=n[r],c=0;c<e.length;c++)if(p(a,e[c]))return null;var s=JSON.stringify(e,function(e,n){return"symbol"===g(n)?String(n):n});return new d("Invalid "+o+" `"+i+"` of value `"+String(a)+"` supplied to `"+t+"`, expected one of "+s+".")})},oneOfType:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&i("Invalid argument supplied to oneOfType, expected an instance of array."),a;for(var n=0;n<e.length;n++){var o=e[n];if("function"!=typeof o)return i("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+w(o)+" at index "+n+"."),a}return y(function(n,o,i,a,c){for(var s=[],l=0;l<e.length;l++){var u=(0,e[l])(n,o,i,a,c,r);if(null==u)return null;u.data&&t(u.data,"expectedType")&&s.push(u.data.expectedType)}return new d("Invalid "+a+" `"+c+"` supplied to `"+i+"`"+(s.length>0?", expected one of type ["+s.join(", ")+"]":"")+".")})},shape:function(e){return y(function(n,t,o,i,a){var c=n[t],s=b(c);if("object"!==s)return new d("Invalid "+i+" `"+a+"` of type `"+s+"` supplied to `"+o+"`, expected `object`.");for(var l in e){var u=e[l];if("function"!=typeof u)return v(o,i,a,l,g(u));var f=u(c,l,o,i,a+"."+l,r);if(f)return f}return null})},exact:function(e){return y(function(o,i,a,c,s){var l=o[i],u=b(l);if("object"!==u)return new d("Invalid "+c+" `"+s+"` of type `"+u+"` supplied to `"+a+"`, expected `object`.");var f=n({},o[i],e);for(var p in f){var y=e[p];if(t(e,p)&&"function"!=typeof y)return v(a,c,s,p,g(y));if(!y)return new d("Invalid "+c+" `"+s+"` key `"+p+"` supplied to `"+a+"`.\nBad object: "+JSON.stringify(o[i],null,"  ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null,"  "));var h=y(l,p,a,c,s+"."+p,r);if(h)return h}return null})}};function p(e,n){return e===n?0!==e||1/e==1/n:e!=e&&n!=n}function d(e,n){this.message=e,this.data=n&&"object"==typeof n?n:{},this.stack=""}function y(e){if("production"!==process.env.NODE_ENV)var n={},t=0;function o(o,a,c,l,f,p,y){if(l=l||u,p=p||c,y!==r){if(s){var h=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw h.name="Invariant Violation",h}if("production"!==process.env.NODE_ENV&&"undefined"!=typeof console){var v=l+":"+c;!n[v]&&t<3&&(i("You are manually calling a React.PropTypes validation function for the `"+p+"` prop on `"+l+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),n[v]=!0,t++)}}return null==a[c]?o?null===a[c]?new d("The "+f+" `"+p+"` is marked as required in `"+l+"`, but its value is `null`."):new d("The "+f+" `"+p+"` is marked as required in `"+l+"`, but its value is `undefined`."):null:e(a,c,l,f,p)}var a=o.bind(null,!1);return a.isRequired=o.bind(null,!0),a}function h(e){return y(function(n,r,t,o,i,a){var c=n[r];return b(c)!==e?new d("Invalid "+o+" `"+i+"` of type `"+g(c)+"` supplied to `"+t+"`, expected `"+e+"`.",{expectedType:e}):null})}function v(e,n,r,t,o){return new d((e||"React class")+": "+n+" type `"+r+"."+t+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+o+"`.")}function m(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(m);if(null===e||c(e))return!0;var n=function(e){var n=e&&(l&&e[l]||e["@@iterator"]);if("function"==typeof n)return n}(e);if(!n)return!1;var r,t=n.call(e);if(n!==e.entries){for(;!(r=t.next()).done;)if(!m(r.value))return!1}else for(;!(r=t.next()).done;){var o=r.value;if(o&&!m(o[1]))return!1}return!0;default:return!1}}function b(e){var n=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,n){return"symbol"===e||!!n&&("Symbol"===n["@@toStringTag"]||"function"==typeof Symbol&&n instanceof Symbol)}(n,e)?"symbol":n}function g(e){if(null==e)return""+e;var n=b(e);if("object"===n){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return n}function w(e){var n=g(e);switch(n){case"array":case"object":return"an "+n;case"boolean":case"date":case"regexp":return"a "+n;default:return n}}return d.prototype=Error.prototype,f.checkPropTypes=o,f.resetWarningCache=o.resetWarningCache,f.PropTypes=f,f},T}function M(){if(I)return j;I=1;var e=$();function n(){}function r(){}return r.resetWarningCache=n,j=function(){function t(n,r,t,o,i,a){if(a!==e){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function o(){return t}t.isRequired=t;var i={array:t,bigint:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:o,element:t,elementType:t,instanceOf:o,node:t,objectOf:o,oneOf:o,oneOfType:o,shape:o,exact:o,checkPropTypes:r,resetWarningCache:n};return i.PropTypes=i,i}}function V(){if(P)return y.exports;if(P=1,"production"!==process.env.NODE_ENV){var e=z();y.exports=B()(e.isElement,true)}else y.exports=M()();return y.exports}var D=p(V());function F(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=Array(n);r<n;r++)t[r]=e[r];return t}function W(e,n,r){return n&&function(e,n){for(var r=0;r<n.length;r++){var t=n[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,Y(t.key),t)}}(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function H(e,n){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=U(e))||n){r&&(e=r);var t=0,o=function(){};return{s:o,n:function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,c=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return a=e.done,e},e:function(e){c=!0,i=e},f:function(){try{a||null==r.return||r.return()}finally{if(c)throw i}}}}function q(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,o,i,a,c=[],s=!0,l=!1;try{if(i=(r=r.call(e)).next,0===n);else for(;!(s=(t=i.call(r)).done)&&(c.push(t.value),c.length!==n);s=!0);}catch(e){l=!0,o=e}finally{try{if(!s&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(l)throw o}}return c}}(e,n)||U(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Y(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function U(e,n){if(e){if("string"==typeof e)return F(e,n);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?F(e,n):void 0}}var X={INITIALIZE:1,INITIALIZE_FLEXBOX:2,APPLY_SIZES:3,ERROR:4,TRANSFORMATIONS:5,MOVE_HANDLE_BAR:6},Z=X=Object.freeze(X),K={UPDATE_SIZE:1},J=K=Object.freeze(K),G=function(){return W(function e(n){!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e),this.containers={},this.containerRefs={},this.ldf=n,this.numberOfContainers=0,this.registeredContainers=0,this.layoutLoaded=!1,this.numberOfContainers=this.ldf.containers?Object.keys(this.ldf.containers).length:0;try{this.worker=new Worker(new URL("./Worker/LayoutWorker.js",import.meta.url),{type:"module"}),this.worker.onmessage=this.handleWorkerMessage.bind(this),this.worker.onerror=function(e){return console.error("Worker error:",e)},this.sendToWorker(Z.INITIALIZE,{ldf:n})}catch(e){console.error("Failed to create worker:",e)}},[{key:"sendToWorker",value:function(e,n){this.worker.postMessage({code:e,args:n})}},{key:"registerContainer",value:function(e,n,r){e in this.containers||(this.registeredContainers+=1),this.containers[e]=n,this.containerRefs[e]=r,console.log("Registered container with id: ".concat(e," ")),this.registeredContainers!==this.numberOfContainers||this.layoutLoaded||(console.log("All containers registered, layout is ready."),this.sendToWorker(Z.INITIALIZE_FLEXBOX))}},{key:"unregisterContainer",value:function(e){delete this.containers[e]}},{key:"handleRootResize",value:function(){if(this.layoutLoaded){var e={};for(var n in this.containerRefs)if(this.containerRefs.hasOwnProperty(n)){var r=this.containerRefs[n].getBoundingClientRect();e[n]={width:r.width,height:r.height}}this.sendToWorker(Z.APPLY_SIZES,{sizes:e})}}},{key:"moveHandleBar",value:function(e){for(var n={},r=0,t=[e.parent,e.sibling1,e.sibling2];r<t.length;r++){var o=t[r],i=this.containerRefs[o].getBoundingClientRect();n[o]={width:i.width,height:i.height}}e.sizes=n,this.sendToWorker(Z.MOVE_HANDLE_BAR,{metadata:e}),this.handleRootResize()}},{key:"applyTransformations",value:function(e,n){var r=this;requestAnimationFrame(function(){var t,o=H(e);try{for(o.s();!(t=o.n()).done;){var i=t.value;switch(i.type){case J.UPDATE_SIZE:r.containers[i.id].current.updateStyles(i.args.style);break;case J.REMOVE_NODE:break;default:console.warn("Unknown transformation was requested.")}}}catch(e){o.e(e)}finally{o.f()}n&&(r.layoutLoaded=!0)})}},{key:"handleWorkerMessage",value:function(e){var n;switch(e.data.type){case Z.INITIALIZE_FLEXBOX:n=e.data.data,this.applyTransformations(n,!0);break;case Z.TRANSFORMATIONS:n=e.data.data,this.applyTransformations(n,!1);break;case Z.ERROR:console.error("Error from worker:",e.data)}}},{key:"destroy",value:function(){this.worker&&(this.worker.terminate(),this.worker=null)}}])}(),Q=t(null);function ee(e){var t=e.layout,o=e.children,i=n(function(){return new G(t)},[t]);return r(function(){return function(){i.destroy()}},[i]),f(Q.Provider,{value:i,children:o})}function ne(){var e=o(Q);if(!e)throw new Error("useLayoutController must be used within a LayoutControllerProvider");return e}function re(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}ee.propTypes={layout:D.object.isRequired,children:D.node.isRequired};re(".handleBarHorizontalContainer {\n  position: relative;\n  width: 100%;\n  height: 1px;\n  background-color: #414141;\n}\n\n.handleBarHorizontal {\n  position: absolute;\n  top: 50%;\n  height: 1px;\n  left: 0;\n  right: 0;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n}\n\n.handleBarHorizontal:hover {\n  background-color: #007acc;\n  cursor: ns-resize;\n  height: 5px;\n  z-index: 10;\n}\n\n.handleBarHorizontalHover {\n  background-color: #007acc;\n  cursor: ns-resize;\n  height: 5px;\n  z-index: 10;\n}\n\n.handleBarVerticalContainer {\n  position: relative;\n  height: 100%;\n  width: 1px;\n  background-color: #414141;\n  z-index: 1;\n}\n\n.handleBarVertical {\n  position: absolute;\n  top: 0;\n  width: 1px;\n  left: 50%;\n  bottom: 0;\n  transform: translateX(-50%);\n  transition: all 0.3s ease;\n}\n\n.handleBarVertical:hover {\n  background-color: #007acc;\n  cursor: ew-resize;\n  width: 5px;\n  z-index: 10;\n}\n\n.handleBarVerticalHover {\n  background-color: #007acc;\n  cursor: ew-resize;\n  width: 5px;\n  z-index: 10;\n}");var te=function(n){var r=n.orientation,t=n.parent,o=n.sibling1,a=n.sibling2,c=ne(),s=i(null),l=i(null),u=i(null),p=function(e){var n,i,u;e.preventDefault(),e.stopPropagation(),document.addEventListener("mousemove",d),document.addEventListener("mouseup",y),"horizontal"===r?(n="clientY",i="height",u="handleBarHorizontalHover"):"vertical"===r&&(n="clientX",i="width",u="handleBarVerticalHover");for(var f,p,h=c.containerRefs[t],v=c.containerRefs[o],m=c.containerRefs[a],b=c.ldf.containers[t],g=0;g<b.children.length;g++)b.children[g].containerId===o?f=b.children[g].size:b.children[g].containerId===a&&(p=b.children[g].size);s.current={downValueY:e[n],hoverClass:u,downKey:n,propKey:i,parentSize:h.getBoundingClientRect()[i],parentRef:h,sibling1Ref:v,sibling2Ref:m,sibling1LayoutConfig:f,sibling2LayoutConfig:p,sibling1Size:v.getBoundingClientRect()[i],sibling2Size:m.getBoundingClientRect()[i]},l.current.classList.add(u)};var d=function(e){if(s.current){e.preventDefault(),e.stopPropagation();var n=s.current,r=e[n.downKey]-n.downValueY,i=n.sibling1Size+r,l=n.sibling2Size-r;clearTimeout(u.current),u.current=setTimeout(function(){var r,i,s;c.moveHandleBar({handle:(r=e,i=n.parentRef,s=i.getBoundingClientRect(),{x:r.clientX-s.left,y:r.clientY-s.top}),parent:t,sibling1:o,sibling2:a})},.1);var f=Object.keys(n.sibling1LayoutConfig);if(!(f.includes("min")&&i<=n.sibling1LayoutConfig.min.value||f.includes("max")&&i>=n.sibling1LayoutConfig.max.value)){var p=Object.keys(n.sibling2LayoutConfig);if(!(p.includes("min")&&l<=n.sibling2LayoutConfig.min.value||p.includes("max")&&l>=n.sibling2LayoutConfig.max.value)){var d=n.sibling1LayoutConfig.initial.type,y=n.sibling2LayoutConfig.initial.type;if("fill"===d&&"fill"===y&&i>50&&l>50)return c.containerRefs[o].style[n.propKey]=i+"px",void(c.containerRefs[a].style[n.propKey]=l+"px");"fill"!==d&&(c.containerRefs[o].style[n.propKey]=i+"px"),"fill"!==y&&(c.containerRefs[a].style[n.propKey]=l+"px")}}}},y=function(e){e.preventDefault(),e.stopPropagation(),document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",y),l.current.classList.remove(s.current.hoverClass),s.current=null};return f(e.Fragment,{children:"horizontal"===r?f("div",{onMouseDown:function(e){return p(e)},className:"handleBarHorizontalContainer",children:f("div",{ref:l,className:"handleBarHorizontal"})}):"vertical"===r?f("div",{onMouseDown:function(e){return p(e)},className:"handleBarVerticalContainer",children:f("div",{ref:l,className:"handleBarVertical"})}):null})};te.propTypes={orientation:D.string,sibling1:D.string,sibling2:D.string,parent:D.string};re(".relative-container {\n  position: relative;\n}\n\n.relative-container.hiding-horizontal {\n  width: 0px !important;\n}\n\n.relative-container.hiding-vertical {\n  height: 0px !important;\n}\n\n.verticalLine {\n  height: 100%;\n  width: 1px;\n  background: red;\n}\n\n.horizontalLine {\n  width: 100%;\n  height: 1px;\n  background: red;\n}");var oe=t({});oe.displayName="ComponentRegistryContext";re(".lazyContainer {\n  position: absolute;\n  top: 0px;\n  bottom: 0px;\n  left: 0px;\n  right: 0px;\n}");var ie=function(e){var r=e.content,t=o(oe),i=n(function(){if(t&&r&&"component"in r&&r.component in t)return a(t[r.component])},[t,r]);return f("div",{className:"lazyContainer",children:f(c,{fallback:f("div",{children:"Loading..."}),children:i&&f(i,{})})})};ie.propTypes={content:D.object};var ae=function(e){var n=e.node,r=ne(),t=i(null),o=i(null),a=q(s(null),2),c=a[0],p=a[1],d=l(function(e){for(var n=[],t=0;t<e.children.length;t++){var o=e.children[t];if("container"===o.type){var i=r.ldf.containers[e.children[t].containerId];i.parent=e,n.push(f(ae,{meta:e.children[t],id:i.id,node:i},t))}else"handleBar"===o.type&&("horizontal"===e.orientation?n.push(f(te,{orientation:"vertical",parent:e.id,sibling1:o.sibling1,sibling2:o.sibling2},t)):"vertical"===e.orientation&&n.push(f(te,{orientation:"horizontal",parent:e.id,sibling1:o.sibling1,sibling2:o.sibling2},t)))}return n},[r]),y=i({});return y.current={updateStyles:function(e){var n="hiding-"+o.current;for(var r in e)if("display"===r&&"none"===e[r]){if(t.current.classList.contains(n))return;t.current.classList.add(n)}else if("display"===r&&"flex"===e[r]){if(!t.current.classList.contains(n))return;t.current.classList.remove(n)}else t.current.style[r]=e[r]}},u(function(){if(n&&r&&t.current){o.current=n.parent.orientation;var e=n.children&&n.children.length>0;return e?"horizontal"===n.orientation?(t.current.style.display="flex",t.current.style.flexDirection="row",t.current.style.width="100%"):"vertical"===n.orientation?(t.current.style.display="flex",t.current.style.flexDirection="column",t.current.style.height="100%"):console.warn("Unknown orientation:",n.orientation):n.background?t.current.style.background=n.background:t.current.style.background="transparent",p(e?d(n):f(ie,{content:n})),r.registerContainer(n.id,y,t.current),function(){r.unregisterContainer(n.id)}}},[n,r,d]),f("div",{ref:t,className:"relative-container",children:c})};ae.propTypes={node:D.object};re(".root-container {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.relative-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}");var ce=function(){var e=ne(),n=i(null),r=i(null),t=i(!1),o=i({});o.current={};var a=q(s(null),2),c=a[0],p=a[1],d=l(function(n){for(var r=[],t=0;t<n.children.length;t++){var o=n.children[t];if("container"===o.type){var i=e.ldf.containers[n.children[t].containerId];i.parent=n,r.push(f(ae,{meta:n.children[t],id:i.id,node:i},t))}else"handleBar"===o.type&&("horizontal"===n.orientation?r.push(f("div",{className:"verticalLine"})):"vertical"===n.orientation&&r.push(f("div",{className:"horizontalLine"})))}return r},[e]);return u(function(){if(e){var i=e.ldf.containers[e.ldf.layoutRoot],a=i.children&&i.children.length>0;e.registerContainer(i.id,o,n.current),a&&("horizontal"===i.orientation?n.current.style.flexDirection="row":"vertical"===i.orientation&&(n.current.style.flexDirection="column")),p(a?d(i):null);var c=new ResizeObserver(function(n){t.current||(t.current=!0);var o,i=H(n);try{var a=function(){var n=o.value.contentRect,i=n.width,a=n.height;clearTimeout(r.current),r.current=setTimeout(function(){t.current=!1,e.handleRootResize(i,a)},1)};for(i.s();!(o=i.n()).done;)a()}catch(e){i.e(e)}finally{i.f()}});return c.observe(n.current),function(){e.unregisterContainer(e.ldf.layoutRoot),c.disconnect()}}},[e]),f("div",{className:"root-container",children:f("div",{ref:n,className:"relative-container",children:c})})};re("");var se=function(e){var n=e.ldf,r=e.registry;return f(ee,{layout:n,children:f(oe.Provider,{value:r,children:f(ce,{})})})};se.propTypes={ldf:D.object,registry:D.object};export{se as LayoutManager};
+//# sourceMappingURL=index.js.map