@vuu-ui/vuu-layout 3.0.0 → 3.1.0-beta.1

package/src/layout-header/useHeader.mjs

@@ -0,0 +1,76 @@
+import { useCallback, useRef, useState } from "react";
+import { useViewDispatch } from "../layout-view-actions/ViewContext.mjs";
+import { queryClosest } from "@vuu-ui/vuu-utils";
+const useHeader = ({ onCollapse, onEditTitle, onExpand, title })=>{
+    const [editing, setEditing] = useState(false);
+    const [value, setValue] = useState(title);
+    const labelFieldRef = useRef(null);
+    const viewDispatch = useViewDispatch();
+    const handleClose = useCallback((evt)=>viewDispatch?.({
+            type: "remove"
+        }, evt), [
+        viewDispatch
+    ]);
+    const focusTitle = useCallback(()=>{
+        labelFieldRef.current?.focus();
+    }, []);
+    const handleClickEdit = useCallback(()=>{
+        focusTitle();
+        setEditing((isEditing)=>!isEditing);
+    }, [
+        focusTitle
+    ]);
+    const handleTitleKeyDown = (evt)=>{
+        if ("Enter" === evt.key) setEditing(true);
+    };
+    const handleMouseDown = useCallback((e)=>{
+        const button = queryClosest(e.target, ".saltButton");
+        if (null === button) viewDispatch?.({
+            type: "mousedown"
+        }, e);
+    }, [
+        viewDispatch
+    ]);
+    const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false)=>{
+        setEditing(false);
+        if (editCancelled) setValue(originalValue);
+        else if (finalValue !== originalValue) {
+            setValue(finalValue);
+            onEditTitle?.(finalValue);
+        }
+        if (false === allowDeactivation) labelFieldRef.current?.focus();
+    };
+    const handleToggleCollapse = useCallback((e)=>{
+        viewDispatch?.({
+            type: "collapse"
+        }, e);
+        onCollapse?.();
+    }, [
+        onCollapse,
+        viewDispatch
+    ]);
+    const handleToggleExpand = useCallback((e)=>{
+        viewDispatch?.({
+            type: "expand"
+        }, e);
+        onExpand?.();
+    }, [
+        onExpand,
+        viewDispatch
+    ]);
+    return {
+        editing,
+        focusTitle,
+        labelFieldRef,
+        onClickEdit: handleClickEdit,
+        onClose: handleClose,
+        onExitEditMode: handleExitEditMode,
+        onMouseDown: handleMouseDown,
+        onToggleCollapse: handleToggleCollapse,
+        onToggleExpand: handleToggleExpand,
+        onTitleKeyDown: handleTitleKeyDown,
+        setValue,
+        value
+    };
+};
+export { useHeader };

package/src/layout-provider/LayoutProvider.mjs

@@ -0,0 +1,242 @@
+import { jsx } from "react/jsx-runtime";
+import { VuuShellLocation, usePlaceholderJSON } from "@vuu-ui/vuu-utils";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { LayoutActionType, cloneElementAddLayoutProps, layoutFromJson, layoutQuery, layoutReducer, layoutToJSON } from "../layout-reducer/index.mjs";
+import { findTarget, getChildProp, getProp, getProps, typeOf } from "../utils/index.mjs";
+import { LayoutProviderContext } from "./LayoutProviderContext.mjs";
+import { useLayoutDragDrop } from "./useLayoutDragDrop.mjs";
+const isWorkspaceContainer = (props)=>props.id === VuuShellLocation.WorkspaceContainer;
+const isMultiWorkspaceContainer = (props)=>props.id === VuuShellLocation.MultiWorkspaceContainer;
+const shouldSave = (action)=>[
+        "add",
+        "drag-drop",
+        "remove",
+        "set-title",
+        "splitter-resize",
+        "switch-tab"
+    ].includes(action.type);
+const getLayoutChangeReason = (action)=>{
+    switch(action.type){
+        case "switch-tab":
+            if (action.id === VuuShellLocation.Workspace) return "switch-active-layout";
+            return "switch-active-tab";
+        case "save":
+            return "save-feature-props";
+        case "drag-drop":
+            return "drag-drop-operation";
+        case "add":
+            return "add-component";
+        case "remove":
+            return "remove-component";
+        case "splitter-resize":
+            return "resize-component";
+        case "set-title":
+            return "edit-feature-title";
+        default:
+            throw Error("unknown layout action");
+    }
+};
+const LayoutProviderVersion = ()=>{
+    const version = useLayoutProviderVersion();
+    return /*#__PURE__*/ jsx("div", {
+        children: `Context: ${version} `
+    });
+};
+const pathToDropTarget = `#${VuuShellLocation.Workspace}.ACTIVE_CHILD`;
+const LayoutProvider = (props)=>{
+    const { children, createNewChild, workspaceJSON, onLayoutChange } = props;
+    const state = useRef(void 0);
+    const childrenRef = useRef(children);
+    const [, forceRefresh] = useState(null);
+    const serializeState = useCallback((source, layoutChangeReason)=>{
+        if (onLayoutChange) {
+            const workspaceContainer = findTarget(source, isWorkspaceContainer) || state.current;
+            const isLayoutContainer = "LayoutContainer" === typeOf(workspaceContainer);
+            const target = isLayoutContainer ? getProps(workspaceContainer).children[0] : workspaceContainer;
+            const serializedModel = layoutToJSON(target);
+            onLayoutChange(serializedModel, layoutChangeReason);
+        }
+    }, [
+        onLayoutChange
+    ]);
+    const dispatchLayoutAction = useCallback((action, suppressSave = false)=>{
+        const nextState = layoutReducer(state.current, action);
+        if (nextState !== state.current) {
+            state.current = nextState;
+            forceRefresh({});
+            if (!suppressSave && shouldSave(action)) serializeState(nextState, getLayoutChangeReason(action));
+        }
+    }, [
+        forceRefresh,
+        serializeState
+    ]);
+    const addComponentToWorkspace = useCallback((component)=>{
+        dispatchLayoutAction({
+            type: "add",
+            path: `#${VuuShellLocation.Workspace}`,
+            component
+        });
+    }, [
+        dispatchLayoutAction
+    ]);
+    const switchWorkspace = useCallback((idx)=>{
+        dispatchLayoutAction({
+            type: "switch-tab",
+            nextIdx: idx,
+            path: `#${VuuShellLocation.MultiWorkspaceContainer}`
+        });
+    }, [
+        dispatchLayoutAction
+    ]);
+    const showComponentInContextPanel = useCallback((component, title, onContextPanelClose)=>{
+        dispatchLayoutAction({
+            type: "set-props",
+            path: `#${VuuShellLocation.ContextPanel}`,
+            props: {
+                expanded: true,
+                content: component,
+                onClose: onContextPanelClose,
+                title
+            }
+        });
+    }, [
+        dispatchLayoutAction
+    ]);
+    const layoutActionDispatcher = useCallback((action)=>{
+        switch(action.type){
+            case "drag-start":
+                prepareToDragLayout(action);
+                break;
+            case "save":
+                if (state.current) serializeState(state.current, getLayoutChangeReason(action));
+                break;
+            case "query":
+                if ("PARENT_CONTAINER" === action.query) return layoutQuery(action.query, action.path, state.current);
+                break;
+            default:
+                dispatchLayoutAction(action);
+                break;
+        }
+    }, [
+        dispatchLayoutAction,
+        serializeState
+    ]);
+    const prepareToDragLayout = useLayoutDragDrop(state, layoutActionDispatcher, pathToDropTarget);
+    useEffect(()=>{
+        if (workspaceJSON) if (Array.isArray(workspaceJSON)) {
+            const targetContainer = findTarget(state.current, isMultiWorkspaceContainer);
+            if (targetContainer) {
+                const { path: targetContainerPath } = targetContainer.props;
+                const target = getChildProp(targetContainer);
+                const newLayouts = workspaceJSON.map((ws, i)=>layoutFromJson(ws, `${targetContainerPath}.${i}`));
+                const action = target ? {
+                    type: LayoutActionType.REPLACE,
+                    target,
+                    replacement: newLayouts
+                } : {
+                    type: LayoutActionType.ADD,
+                    path: targetContainerPath,
+                    component: newLayouts
+                };
+                dispatchLayoutAction(action, true);
+            }
+        } else {
+            const targetContainer = findTarget(state.current, isWorkspaceContainer);
+            if (targetContainer) {
+                const { path: targetContainerPath } = targetContainer.props;
+                const target = getChildProp(targetContainer);
+                const newLayout = layoutFromJson(workspaceJSON, `${targetContainerPath}.0`);
+                const action = target ? {
+                    type: LayoutActionType.REPLACE,
+                    target,
+                    replacement: newLayout
+                } : {
+                    type: LayoutActionType.ADD,
+                    path: targetContainerPath,
+                    component: newLayout
+                };
+                dispatchLayoutAction(action, true);
+            } else if (workspaceJSON.id === getProp(state.current, "id")) {
+                const newLayout = layoutFromJson(workspaceJSON, "0");
+                const action = {
+                    type: LayoutActionType.REPLACE,
+                    target: state.current,
+                    replacement: newLayout
+                };
+                dispatchLayoutAction(action, true);
+            } else throw Error(`LayoutProvider unable to render new workspaceJson, no valid target container. Use a valid Shell Layout Template or include a container with the standard workspace id '${VuuShellLocation.Workspace}' `);
+        }
+    }, [
+        dispatchLayoutAction,
+        workspaceJSON
+    ]);
+    if (void 0 === state.current) state.current = cloneElementAddLayoutProps(children);
+    else if (children !== childrenRef.current) {
+        state.current = cloneElementAddLayoutProps(children, state.current);
+        childrenRef.current = children;
+    }
+    return /*#__PURE__*/ jsx(LayoutProviderContext.Provider, {
+        value: {
+            addComponentToWorkspace,
+            createNewChild,
+            dispatchLayoutProvider: layoutActionDispatcher,
+            showComponentInContextPanel,
+            switchWorkspace,
+            version: 0
+        },
+        children: state.current
+    });
+};
+const useLayoutProviderDispatch = ()=>{
+    const { dispatchLayoutProvider } = useContext(LayoutProviderContext);
+    return dispatchLayoutProvider;
+};
+const useLayoutOperation = ()=>{
+    const { addComponentToWorkspace, showComponentInContextPanel, switchWorkspace } = useContext(LayoutProviderContext);
+    return {
+        addComponentToWorkspace,
+        showComponentInContextPanel,
+        switchWorkspace
+    };
+};
+const useLayoutCreateNewChild = ()=>{
+    const layoutPlaceholderJSON = usePlaceholderJSON();
+    const { createNewChild } = useContext(LayoutProviderContext);
+    const defaultCreateNewChild = useMemo(()=>function() {
+            if (layoutPlaceholderJSON) {
+                const { props } = layoutPlaceholderJSON;
+                return layoutFromJson({
+                    ...layoutPlaceholderJSON,
+                    props: {
+                        ...props,
+                        resizeable: true,
+                        style: {
+                            ...props?.style,
+                            flexGrow: 1,
+                            flexShrink: 0,
+                            flexBasis: 0
+                        }
+                    }
+                }, "0");
+            }
+            return layoutFromJson({
+                type: "Placeholder",
+                props: {
+                    resizeable: true,
+                    style: {
+                        flexGrow: 1,
+                        flexShrink: 0,
+                        flexBasis: 0
+                    }
+                }
+            }, "0");
+        }, [
+        layoutPlaceholderJSON
+    ]);
+    return createNewChild ?? defaultCreateNewChild;
+};
+const useLayoutProviderVersion = ()=>{
+    const { version } = useContext(LayoutProviderContext);
+    return version;
+};
+export { LayoutProvider, LayoutProviderVersion, useLayoutCreateNewChild, useLayoutOperation, useLayoutProviderDispatch, useLayoutProviderVersion };

package/src/layout-provider/LayoutProviderContext.mjs

@@ -0,0 +1,13 @@
+import { createContext } from "react";
+const unconfiguredLayoutProviderDispatch = (action)=>console.log(`dispatch ${action.type}, have you forgotten to provide a LayoutProvider ?`);
+const unconfiguredService = (message)=>()=>console.log(`${message}, have you forgotten to provide a LayoutProvider ?`);
+const MissingLayoutContextPanel = unconfiguredService("showComponentInContextPanel");
+const isUnconfiguredProperty = (property)=>property === MissingLayoutContextPanel;
+const LayoutProviderContext = createContext({
+    addComponentToWorkspace: unconfiguredService("addComponentToWorkspace"),
+    dispatchLayoutProvider: unconfiguredLayoutProviderDispatch,
+    showComponentInContextPanel: MissingLayoutContextPanel,
+    switchWorkspace: unconfiguredService("switchWorkspace"),
+    version: -1
+});
+export { LayoutProviderContext, isUnconfiguredProperty };

package/src/layout-provider/index.mjs

@@ -0,0 +1,2 @@
+export * from "./LayoutProvider.mjs";
+export * from "./LayoutProviderContext.mjs";

package/src/layout-provider/useLayoutDragDrop.mjs

@@ -0,0 +1,147 @@
+import { useCallback, useRef } from "react";
+import { Draggable } from "../drag-drop/index.mjs";
+import { getIntrinsicSize } from "../layout-reducer/flexUtils.mjs";
+import { followPath, resolvePath } from "../utils/index.mjs";
+const NO_INSTRUCTIONS = {};
+const NO_OFFSETS = [
+    0,
+    0
+];
+const getDragElement = (rect, id, dragElement)=>{
+    const wrapper = document.createElement("div");
+    wrapper.className = "vuuSimpleDraggableWrapper";
+    wrapper.classList.add("vuuSimpleDraggableWrapper", "salt-theme", "salt-density-medium");
+    wrapper.dataset.dragging = "true";
+    const div = dragElement ?? document.createElement("div");
+    div.id = id;
+    wrapper.appendChild(div);
+    document.body.appendChild(wrapper);
+    const cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;
+    return [
+        wrapper,
+        cssText,
+        rect.left,
+        rect.top
+    ];
+};
+const determineDragOffsets = (draggedElement)=>{
+    const { offsetParent } = draggedElement;
+    if (null === offsetParent) return NO_OFFSETS;
+    {
+        const { left: offsetLeft, top: offsetTop } = offsetParent.getBoundingClientRect();
+        return [
+            offsetLeft,
+            offsetTop
+        ];
+    }
+};
+const useLayoutDragDrop = (rootLayoutRef, dispatch, pathToDropTarget)=>{
+    const dragActionRef = useRef(void 0);
+    const dragOperationRef = useRef(void 0);
+    const draggableHTMLElementRef = useRef(void 0);
+    const handleDrag = useCallback((x, y)=>{
+        if (dragOperationRef.current && draggableHTMLElementRef.current) {
+            const { dragOffsets: [offsetX, offsetY], targetPosition } = dragOperationRef.current;
+            const left = "number" == typeof x ? x - offsetX : targetPosition.left;
+            const top = "number" == typeof y ? y - offsetY : targetPosition.top;
+            if (left !== targetPosition.left || top !== targetPosition.top) {
+                dragOperationRef.current.targetPosition.left = left;
+                dragOperationRef.current.targetPosition.top = top;
+                draggableHTMLElementRef.current.style.top = top + "px";
+                draggableHTMLElementRef.current.style.left = left + "px";
+            }
+        }
+    }, []);
+    const handleDrop = useCallback((dropTarget)=>{
+        if (dragOperationRef.current) {
+            const { dragInstructions, payload: draggedReactElement, originalCSS } = dragOperationRef.current;
+            if (dropTarget) dispatch({
+                type: "drag-drop",
+                draggedReactElement,
+                dragInstructions,
+                dropTarget
+            });
+            if (draggableHTMLElementRef.current) if (!dropTarget && dragInstructions.DriftHomeIfNoDropTarget) {
+                console.log("drift back to start");
+                document.body.removeChild(draggableHTMLElementRef.current);
+            } else if (dragInstructions.RemoveDraggableOnDragEnd) document.body.removeChild(draggableHTMLElementRef.current);
+            else {
+                draggableHTMLElementRef.current.style.cssText = originalCSS;
+                delete draggableHTMLElementRef.current.dataset.dragging;
+            }
+            dragActionRef.current = void 0;
+            dragOperationRef.current = void 0;
+            draggableHTMLElementRef.current = void 0;
+        }
+    }, [
+        dispatch
+    ]);
+    const handleDragStart = useCallback((evt)=>{
+        if (dragActionRef.current) {
+            const { payload: component, dragContainerPath, dragElement, dragRect, instructions = NO_INSTRUCTIONS, path } = dragActionRef.current;
+            const { current: rootLayout } = rootLayoutRef;
+            const dragPos = {
+                x: evt.clientX,
+                y: evt.clientY
+            };
+            const dragPayload = component ?? followPath(rootLayout, path, true);
+            const { id: dragPayloadId } = dragPayload.props;
+            const intrinsicSize = getIntrinsicSize(dragPayload);
+            let originalCSS = "", dragCSS = "", dragTransform = "";
+            let dragStartLeft = -1;
+            let dragStartTop = -1;
+            let dragOffsets = NO_OFFSETS;
+            let element = document.getElementById(dragPayloadId);
+            if (null === element) [element, dragCSS, dragStartLeft, dragStartTop] = getDragElement(dragRect, dragPayloadId, dragElement);
+            else {
+                dragOffsets = determineDragOffsets(element);
+                const [offsetLeft, offsetTop] = dragOffsets;
+                const { width, height, left, top } = element.getBoundingClientRect();
+                dragStartLeft = left - offsetLeft;
+                dragStartTop = top - offsetTop;
+                dragCSS = `width:${width}px;height:${height}px;left:${dragStartLeft}px;top:${dragStartTop}px;z-index: 100;background-color:#ccc;opacity: 0.6;`;
+                element.dataset.dragging = "true";
+                originalCSS = element.style.cssText;
+            }
+            dragTransform = Draggable.initDrag(rootLayoutRef.current, dragContainerPath, dragRect, dragPos, {
+                drag: handleDrag,
+                drop: handleDrop
+            }, intrinsicSize);
+            element.style.cssText = dragCSS + dragTransform;
+            draggableHTMLElementRef.current = element;
+            dragOperationRef.current = {
+                payload: dragPayload,
+                originalCSS,
+                dragRect,
+                dragOffsets,
+                dragInstructions: instructions,
+                targetPosition: {
+                    left: dragStartLeft,
+                    top: dragStartTop
+                }
+            };
+        }
+    }, [
+        handleDrag,
+        handleDrop,
+        rootLayoutRef
+    ]);
+    const prepareToDrag = useCallback((action)=>{
+        const { evt, ...options } = action;
+        try {
+            dragActionRef.current = {
+                ...options,
+                dragContainerPath: resolvePath(rootLayoutRef.current, pathToDropTarget)
+            };
+            Draggable.handleMousedown(evt, handleDragStart, options.instructions);
+        } catch (err) {
+            console.warn(`[useLayoutDragDrop] path ${pathToDropTarget} not resolved, the application layout does not have the required elements to support drag drop`);
+        }
+    }, [
+        handleDragStart,
+        pathToDropTarget,
+        rootLayoutRef
+    ]);
+    return prepareToDrag;
+};
+export { useLayoutDragDrop };

package/src/layout-reducer/flexUtils.mjs

@@ -0,0 +1,186 @@
+import { getLayoutComponent, uuid } from "@vuu-ui/vuu-utils";
+import react from "react";
+import { getProps, resetPath } from "../utils/index.mjs";
+const placeHolderProps = {
+    "data-placeholder": true,
+    "data-resizeable": true
+};
+const NO_STYLE = {};
+const auto = "auto";
+const defaultFlexStyle = {
+    flexBasis: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    height: auto,
+    width: auto
+};
+const CROSS_DIMENSION = {
+    height: "width",
+    width: "height"
+};
+const getFlexDimensions = (flexDirection = "row")=>{
+    if ("row" === flexDirection) return [
+        "width",
+        "height",
+        "column"
+    ];
+    return [
+        "height",
+        "width",
+        "row"
+    ];
+};
+const isPercentageSize = (value)=>"string" == typeof value && value.endsWith("%");
+const getIntrinsicSize = (component)=>{
+    const { style: { width = auto, height = auto } = NO_STYLE } = component.props;
+    const numHeight = "number" == typeof height;
+    const numWidth = "number" == typeof width;
+    if (numHeight && numWidth) return {
+        height,
+        width
+    };
+    if (numHeight) return {
+        height
+    };
+    if (numWidth) return {
+        width
+    };
+};
+function getFlexStyle(component, dimension, pos) {
+    const crossDimension = CROSS_DIMENSION[dimension];
+    const { style: { [crossDimension]: intrinsicCrossSize = auto, ...intrinsicStyles } = NO_STYLE } = component.props;
+    if (pos && pos[dimension]) return {
+        ...intrinsicStyles,
+        ...defaultFlexStyle,
+        flexBasis: pos[dimension],
+        flexGrow: 0,
+        flexShrink: 0
+    };
+    return {
+        ...intrinsicStyles,
+        ...defaultFlexStyle,
+        [crossDimension]: intrinsicCrossSize
+    };
+}
+function hasUnboundedFlexStyle(component) {
+    const { style: { flex, flexGrow, flexShrink, flexBasis } = NO_STYLE } = component.props;
+    if ("number" == typeof flex) return true;
+    if (0 === flexBasis && 1 === flexGrow && 1 === flexShrink) return true;
+    if ("number" == typeof flexBasis) return false;
+    return true;
+}
+function getFlexOrIntrinsicStyle(component, dimension, pos) {
+    const crossDimension = CROSS_DIMENSION[dimension];
+    const { style: { [dimension]: intrinsicSize = auto, [crossDimension]: intrinsicCrossSize = auto, ...intrinsicStyles } = NO_STYLE } = component.props;
+    if (intrinsicSize !== auto) {
+        if (isPercentageSize(intrinsicSize)) return {
+            flexBasis: 0,
+            flexGrow: 1,
+            flexShrink: 1,
+            [dimension]: void 0,
+            [crossDimension]: intrinsicCrossSize
+        };
+        return {
+            flexBasis: intrinsicSize,
+            flexGrow: 0,
+            flexShrink: 0,
+            [dimension]: intrinsicSize,
+            [crossDimension]: intrinsicCrossSize
+        };
+    }
+    if (pos && pos[dimension]) return {
+        ...intrinsicStyles,
+        ...defaultFlexStyle,
+        flexBasis: pos[dimension],
+        flexGrow: 0,
+        flexShrink: 0
+    };
+    return {
+        ...intrinsicStyles,
+        [crossDimension]: intrinsicCrossSize
+    };
+}
+function wrapIntrinsicSizeComponentWithFlexbox(component, flexDirection, path, clientRect, dropRect) {
+    const wrappedChildren = [];
+    let pathIndex = 0;
+    let endPlaceholder;
+    if (clientRect && dropRect) {
+        let startPlaceholder;
+        const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;
+        [startPlaceholder, endPlaceholder] = "column" === flexDirection ? [
+            dropTop - clientRect.top,
+            clientRect.bottom - dropBottom
+        ] : [
+            dropLeft - clientRect.left,
+            clientRect.right - dropRight
+        ];
+        if (startPlaceholder) wrappedChildren.push(createPlaceHolder(`${path}.${pathIndex++}`, startPlaceholder, {
+            flexGrow: 0,
+            flexShrink: 0
+        }));
+    } else endPlaceholder = true;
+    const { version = 0, style } = getProps(component);
+    wrappedChildren.push(resetPath(component, `${path}.${pathIndex++}`, {
+        version: version + 1,
+        style: {
+            ...style,
+            flexBasis: "auto",
+            flexGrow: 0,
+            flexShrink: 0
+        }
+    }));
+    if (endPlaceholder) wrappedChildren.push(createPlaceHolder(`${path}.${pathIndex++}`, 0, void 0, {
+        [`data-${flexDirection}-placeholder`]: true
+    }));
+    return createFlexbox(flexDirection, {
+        resizeable: false,
+        style: {
+            flexBasis: "auto"
+        }
+    }, wrappedChildren, path);
+}
+const getFlexValue = (flexBasis, flexFill)=>{
+    if (flexFill) return;
+    return 0 === flexBasis ? 1 : 0;
+};
+function createFlexbox(flexDirection, props, children, path) {
+    const id = uuid();
+    const { flexFill, style, resizeable = true } = props;
+    const { flexBasis = flexFill ? void 0 : "auto" } = style;
+    const flex = getFlexValue(flexBasis, flexFill);
+    const FlexboxLayout = getLayoutComponent("Flexbox");
+    return react.createElement(FlexboxLayout, {
+        id,
+        key: id,
+        path,
+        flexFill,
+        style: {
+            ...style,
+            flexDirection,
+            flexBasis,
+            flexGrow: flex,
+            flexShrink: flex
+        },
+        resizeable
+    }, children);
+}
+const baseStyle = {
+    flexGrow: 1,
+    flexShrink: 1
+};
+function createPlaceHolder(path, size, style, props) {
+    const id = uuid();
+    return react.createElement("div", {
+        ...placeHolderProps,
+        ...props,
+        "data-path": path,
+        id,
+        key: id,
+        style: {
+            ...baseStyle,
+            ...style,
+            flexBasis: size
+        }
+    });
+}
+export { createFlexbox, createPlaceHolder, getFlexDimensions, getFlexOrIntrinsicStyle, getFlexStyle, getIntrinsicSize, hasUnboundedFlexStyle, wrapIntrinsicSizeComponentWithFlexbox };

package/src/layout-reducer/index.mjs

@@ -0,0 +1,4 @@
+export * from "./flexUtils.mjs";
+export * from "./layout-reducer.mjs";
+export * from "./layoutTypes.mjs";
+export * from "./layoutUtils.mjs";