@vuu-ui/vuu-layout 2.1.18 → 2.1.19-beta.2

package/src/layout-reducer/remove-layout-element.js

@@ -0,0 +1,161 @@
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
+import react from "react";
+import { followPath, followPathToParent, getProp, getProps, nextStep, resetPath, typeOf } from "../utils/index.js";
+import { createPlaceHolder } from "./flexUtils.js";
+import { layoutFromJson } from "./layoutUtils.js";
+import { swapChild } from "./replace-layout-element.js";
+function removeChild(layoutRoot, { path }) {
+    const target = followPath(layoutRoot, path);
+    let targetParent = followPathToParent(layoutRoot, path);
+    if (null === targetParent) return layoutRoot;
+    const { children } = getProps(targetParent);
+    if (children.length > 1 && "Stack" !== typeOf(targetParent) && allOtherChildrenArePlaceholders(children, path)) {
+        const { style: { flexBasis, display, flexDirection, ...style } } = getProps(targetParent);
+        let containerPath = getProp(targetParent, "path");
+        let newLayout = swapChild(layoutRoot, targetParent, createPlaceHolder(containerPath, flexBasis, style));
+        while(targetParent = followPathToParent(newLayout, containerPath)){
+            if ("0" === getProp(targetParent, "path")) break;
+            const { children } = getProps(targetParent);
+            if (allOtherChildrenArePlaceholders(children)) {
+                containerPath = getProp(targetParent, "path");
+                const { style: { flexBasis, display, flexDirection, ...style } } = getProps(targetParent);
+                newLayout = swapChild(layoutRoot, targetParent, createPlaceHolder(containerPath, flexBasis, style));
+            } else if (hasAdjacentPlaceholders(children)) newLayout = collapsePlaceholders(layoutRoot, targetParent);
+            else break;
+        }
+        return newLayout;
+    }
+    return _removeChild(layoutRoot, target);
+}
+function _removeChild(container, child) {
+    const props = getProps(container);
+    const { children: componentChildren, path, preserve } = props;
+    let { active, id: containerId } = props;
+    const { idx, finalStep } = nextStep(path, getProp(child, "path"));
+    const type = typeOf(container);
+    let children = componentChildren.slice();
+    if (finalStep) {
+        children.splice(idx, 1);
+        if (void 0 !== active && active >= idx) active = Math.max(0, active - 1);
+        if (0 === children.length && preserve && "Stack" === type) {
+            const { path, style: { flexBasis } } = getProps(child);
+            const placeHolder = containerId === VuuShellLocation.Workspace ? layoutFromJson({
+                props: {
+                    style: {
+                        flexGrow: 1,
+                        flexShrink: 1,
+                        flexBasis
+                    },
+                    title: "Tab 1"
+                },
+                type: "Placeholder"
+            }, path) : createPlaceHolder(path, flexBasis);
+            children.push(placeHolder);
+        } else if (1 === children.length && !preserve && "0" !== path && type.match(/Flexbox|Stack/)) return unwrap(container, children[0]);
+        if (!children.some(isFlexible) && children.some(canBeMadeFlexible)) children = makeFlexible(children);
+    } else children[idx] = _removeChild(children[idx], child);
+    children = children.map((child, i)=>resetPath(child, `${path}.${i}`));
+    return react.cloneElement(container, {
+        active
+    }, children);
+}
+function unwrap(container, child) {
+    const type = typeOf(container);
+    const { path, style: { flexBasis, flexGrow, flexShrink, width, height } } = getProps(container);
+    let unwrappedChild = resetPath(child, path);
+    if ("0" === path) unwrappedChild = react.cloneElement(unwrappedChild, {
+        style: {
+            ...child.props.style,
+            width,
+            height
+        }
+    });
+    else if ("Flexbox" === type) {
+        const dim = "column" === container.props.style.flexDirection ? "height" : "width";
+        const { style: { [dim]: size, ...style } } = unwrappedChild.props;
+        unwrappedChild = react.cloneElement(unwrappedChild, {
+            flexFill: void 0,
+            style: {
+                ...style,
+                flexGrow,
+                flexShrink,
+                flexBasis,
+                width,
+                height
+            }
+        });
+    }
+    return unwrappedChild;
+}
+const isFlexible = (element)=>element.props.style?.flexGrow > 0;
+const canBeMadeFlexible = (element)=>{
+    if (!element.props.style) return false;
+    {
+        const { width, height, flexGrow } = element.props.style;
+        return 0 === flexGrow && "number" != typeof width && "number" != typeof height;
+    }
+};
+const makeFlexible = (children)=>children.map((child)=>canBeMadeFlexible(child) ? react.cloneElement(child, {
+            style: {
+                ...child.props.style,
+                flexGrow: 1
+            }
+        }) : child);
+const hasAdjacentPlaceholders = (children)=>{
+    if (children && children.length > 0) {
+        let wasPlaceholder = getProp(children[0], "placeholder");
+        let isPlaceholder = false;
+        for(let i = 1; i < children.length; i++){
+            isPlaceholder = getProp(children[i], "placeholder");
+            if (wasPlaceholder && isPlaceholder) return true;
+            wasPlaceholder = isPlaceholder;
+        }
+    }
+};
+const collapsePlaceholders = (container, target)=>{
+    const { children: componentChildren, path } = getProps(container);
+    const { idx, finalStep } = nextStep(path, getProp(target, "path"));
+    let children = componentChildren.slice();
+    if (finalStep) children[idx] = _collapsePlaceHolders(target);
+    else children[idx] = collapsePlaceholders(children[idx], target);
+    children = children.map((child, i)=>resetPath(child, `${path}.${i}`));
+    return react.cloneElement(container, void 0, children);
+};
+const _collapsePlaceHolders = (container)=>{
+    const { children } = getProps(container);
+    const newChildren = [];
+    const placeholders = [];
+    for(let i = 0; i < children.length; i++)if (getProp(children[i], "placeholder")) placeholders.push(children[i]);
+    else {
+        if (1 === placeholders.length) newChildren.push(placeholders.pop());
+        else if (placeholders.length > 0) {
+            newChildren.push(mergePlaceholders(placeholders));
+            placeholders.length = 0;
+        }
+        newChildren.push(children[i]);
+    }
+    if (1 === placeholders.length) newChildren.push(placeholders.pop());
+    else if (placeholders.length > 0) newChildren.push(mergePlaceholders(placeholders));
+    const containerPath = getProp(container, "path");
+    return react.cloneElement(container, void 0, newChildren.map((child, i)=>resetPath(child, `${containerPath}.${i}`)));
+};
+const mergePlaceholders = ([placeholder, ...placeholders])=>{
+    const targetStyle = getProp(placeholder, "style");
+    let { flexBasis, flexGrow, flexShrink } = targetStyle;
+    for (const placeholder of placeholders){
+        const { style } = placeholder.props;
+        flexBasis += style.flexBasis;
+        flexGrow = Math.max(flexGrow, style.flexGrow);
+        flexShrink = Math.max(flexShrink, style.flexShrink);
+    }
+    return react.cloneElement(placeholder, {
+        style: {
+            ...targetStyle,
+            flexBasis,
+            flexGrow,
+            flexShrink
+        }
+    });
+};
+const allOtherChildrenArePlaceholders = (children, path)=>children.every((child)=>getProp(child, "placeholder") || path && getProp(child, "path") === path);
+export { removeChild };

package/src/layout-reducer/replace-layout-element.js

@@ -0,0 +1,70 @@
+import react from "react";
+import { getProp, getProps, nextStep } from "../utils/index.js";
+import { applyLayoutProps } from "./layoutUtils.js";
+function replaceChild(model, { target, replacement }) {
+    return _replaceChild(model, target, replacement);
+}
+function _replaceChild(model, child, replacement) {
+    const path = getProp(child, "path");
+    const resizeable = getProp(child, "resizeable");
+    const { style } = getProps(child);
+    const newChild = applyLayoutProps(react.cloneElement(replacement, {
+        resizeable,
+        style: {
+            ...style,
+            ...replacement.props.style
+        }
+    }), path);
+    return swapChild(model, child, newChild);
+}
+function swapChild(model, child, replacement, op) {
+    if (model === child) return replacement;
+    const { idx, finalStep } = nextStep(getProp(model, "path"), getProp(child, "path"));
+    const modelChildren = model.props.children;
+    const children = modelChildren.slice();
+    if (finalStep) if (op) {
+        if ("collapse" === op) children[idx] = collapse(model, children[idx]);
+        else if ("expand" === op) children[idx] = expand(children[idx]);
+    } else children[idx] = replacement;
+    else children[idx] = swapChild(children[idx], child, replacement, op);
+    return react.cloneElement(model, void 0, children);
+}
+function collapse(parent, child) {
+    const { style: parentStyle } = getProps(parent);
+    const { style: childStyle } = getProps(child);
+    const { width, height, flexBasis, flexShrink, flexGrow, ...rest } = childStyle;
+    const restoreStyle = {
+        width,
+        height,
+        flexBasis,
+        flexShrink,
+        flexGrow
+    };
+    const style = {
+        ...rest,
+        flexBasis: 0,
+        flexGrow: 0,
+        flexShrink: 0
+    };
+    const collapsed = "row" === parentStyle.flexDirection ? "vertical" : "column" === parentStyle.flexDirection ? "horizontal" : false;
+    if (collapsed) return react.cloneElement(child, {
+        collapsed,
+        restoreStyle,
+        style
+    });
+    return child;
+}
+function expand(child) {
+    const { style: childStyle, restoreStyle } = getProps(child);
+    const { flexBasis, flexShrink, flexGrow, ...rest } = childStyle;
+    const style = {
+        ...rest,
+        ...restoreStyle
+    };
+    return react.cloneElement(child, {
+        collapsed: false,
+        style,
+        restoreStyle: void 0
+    });
+}
+export { _replaceChild, replaceChild, swapChild };

package/src/layout-reducer/resize-flex-children.js

@@ -0,0 +1,48 @@
+import react from "react";
+import { followPath, getProps } from "../utils/index.js";
+import { swapChild } from "./replace-layout-element.js";
+function resizeFlexChild(layoutRoot, { path, size }) {
+    const target = followPath(layoutRoot, path, true);
+    const { style } = getProps(target);
+    const newStyle = {
+        ...style,
+        width: size
+    };
+    const replacement = react.cloneElement(target, {
+        style: newStyle
+    });
+    return swapChild(layoutRoot, target, replacement);
+}
+function resizeFlexChildren(layoutRoot, { path, sizes }) {
+    const target = followPath(layoutRoot, path, true);
+    const { children, style } = getProps(target);
+    const dimension = "column" === style.flexDirection ? "height" : "width";
+    const replacementChildren = applySizesToChildren(children, sizes, dimension);
+    const replacement = react.cloneElement(target, void 0, replacementChildren);
+    return swapChild(layoutRoot, target, replacement);
+}
+function applySizesToChildren(children, sizes, dimension) {
+    return children.map((child, i)=>{
+        const { style: { [dimension]: size, flexBasis: actualFlexBasis } } = getProps(child);
+        const meta = sizes[i];
+        const { currentSize, flexBasis } = meta;
+        const hasCurrentSize = void 0 !== currentSize;
+        const newSize = hasCurrentSize ? meta.currentSize : flexBasis;
+        if (void 0 === newSize || size === newSize || actualFlexBasis === newSize) return child;
+        return react.cloneElement(child, {
+            style: applySizeToChild(child.props.style, dimension, newSize)
+        });
+    });
+}
+function applySizeToChild(style, dimension, newSize) {
+    const hasSize = "number" == typeof style[dimension];
+    const { flexShrink = 1, flexGrow = 1 } = style;
+    return {
+        ...style,
+        [dimension]: hasSize ? newSize : "auto",
+        flexBasis: hasSize ? "auto" : newSize,
+        flexShrink,
+        flexGrow
+    };
+}
+export { resizeFlexChild, resizeFlexChildren };

package/src/layout-reducer/wrap-layout-element.js

@@ -0,0 +1,134 @@
+import { getLayoutComponent, uuid } from "@vuu-ui/vuu-utils";
+import react from "react";
+import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils/index.js";
+import { createFlexbox, createPlaceHolder, getFlexStyle, getIntrinsicSize, wrapIntrinsicSizeComponentWithFlexbox } from "./flexUtils.js";
+import { applyLayoutProps } from "./layoutUtils.js";
+const isHtmlElement = (component)=>{
+    const [firstLetter] = typeOf(component);
+    return firstLetter === firstLetter.toLowerCase();
+};
+function wrap(container, existingComponent, newComponent, pos, clientRect, dropRect) {
+    const { children: containerChildren, path: containerPath } = getProps(container);
+    const existingComponentPath = getProp(existingComponent, "path");
+    const { idx, finalStep } = nextStep(containerPath, existingComponentPath);
+    const children = finalStep ? updateChildren(container, containerChildren, existingComponent, newComponent, pos, clientRect, dropRect) : containerChildren.map((child, index)=>index === idx ? wrap(child, existingComponent, newComponent, pos, clientRect, dropRect) : child);
+    return react.cloneElement(container, void 0, children);
+}
+function updateChildren(container, containerChildren, existingComponent, newComponent, pos, clientRect, dropRect) {
+    const intrinsicSize = getIntrinsicSize(newComponent);
+    if (intrinsicSize?.width && intrinsicSize?.height) {
+        if (void 0 === clientRect || void 0 === dropRect) throw Error("wrap-layout-element, updateChildren clientRect and dropRect must both be available");
+        return wrapIntrinsicSizedComponent(containerChildren, existingComponent, newComponent, pos, clientRect, dropRect);
+    }
+    return wrapFlexComponent(container, containerChildren, existingComponent, newComponent, pos);
+}
+function wrapFlexComponent(container, containerChildren, existingComponent, newComponent, pos) {
+    const { version = 0 } = getProps(newComponent);
+    const { path: existingComponentPath, title } = getProps(existingComponent);
+    const { type, flexDirection, showTabs: showTabsProp } = getLayoutSpecForWrapper(pos);
+    const [style, existingComponentStyle, newComponentStyle] = getWrappedFlexStyles(type, existingComponent, newComponent, flexDirection, pos);
+    const targetFirst = isTargetFirst(pos);
+    const active = targetFirst ? 1 : 0;
+    const newComponentProps = {
+        resizeable: true,
+        style: newComponentStyle,
+        version: version + 1
+    };
+    const resizeProp = isHtmlElement(existingComponent) ? "data-resizeable" : "resizeable";
+    const existingComponentProps = {
+        [resizeProp]: true,
+        style: existingComponentStyle
+    };
+    const showTabs = "Stack" === type ? {
+        showTabs: showTabsProp
+    } : void 0;
+    const splitterSize = "Flexbox" === type ? {
+        splitterSize: ("Flexbox" === typeOf(container) && container.props.splitterSize) ?? void 0
+    } : void 0;
+    const id = uuid();
+    const wrapper = react.createElement(getLayoutComponent(type), {
+        active,
+        id,
+        key: id,
+        path: getProp(existingComponent, "path"),
+        flexFill: getProp(existingComponent, "flexFill"),
+        ...splitterSize,
+        ...showTabs,
+        style,
+        title,
+        resizeable: getProp(existingComponent, "resizeable")
+    }, targetFirst ? [
+        resetPath(existingComponent, `${existingComponentPath}.0`, existingComponentProps),
+        applyLayoutProps(react.cloneElement(newComponent, newComponentProps), `${existingComponentPath}.1`)
+    ] : [
+        applyLayoutProps(react.cloneElement(newComponent, newComponentProps), `${existingComponentPath}.0`),
+        resetPath(existingComponent, `${existingComponentPath}.1`, existingComponentProps)
+    ]);
+    return containerChildren.map((child)=>child === existingComponent ? wrapper : child);
+}
+function wrapIntrinsicSizedComponent(containerChildren, existingComponent, newComponent, pos, clientRect, dropRect) {
+    const { flexDirection } = getLayoutSpecForWrapper(pos);
+    const contraDirection = "column" === flexDirection ? "row" : "column";
+    const targetFirst = isTargetFirst(pos);
+    const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;
+    const [startPlaceholder, endPlaceholder] = "column" === flexDirection ? [
+        dropTop - clientRect.top,
+        clientRect.bottom - dropBottom
+    ] : [
+        dropLeft - clientRect.left,
+        clientRect.right - dropRight
+    ];
+    const pathRoot = getProp(existingComponent, "path");
+    let pathIndex = 0;
+    const resizeProp = isHtmlElement(existingComponent) ? "data-resizeable" : "resizeable";
+    const wrappedChildren = [];
+    if (startPlaceholder) wrappedChildren.push(targetFirst ? resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {
+        [resizeProp]: true,
+        style: {
+            flexBasis: startPlaceholder,
+            flexGrow: 1,
+            flexShrink: 1
+        }
+    }) : createPlaceHolder(`${pathRoot}.${pathIndex++}`, startPlaceholder, {
+        flexGrow: 0,
+        flexShrink: 0
+    }));
+    wrappedChildren.push(wrapIntrinsicSizeComponentWithFlexbox(newComponent, contraDirection, `${pathRoot}.${pathIndex++}`, clientRect, dropRect));
+    if (endPlaceholder) wrappedChildren.push(targetFirst ? createPlaceHolder(`${pathRoot}.${pathIndex++}`, 0) : resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {
+        [resizeProp]: true,
+        style: {
+            flexBasis: 0,
+            flexGrow: 1,
+            flexShrink: 1
+        }
+    }));
+    const wrapper = createFlexbox(flexDirection, existingComponent.props, wrappedChildren, pathRoot);
+    return containerChildren.map((child)=>child === existingComponent ? wrapper : child);
+}
+function getWrappedFlexStyles(type, existingComponent, newComponent, flexDirection, pos) {
+    const style = {
+        ...existingComponent.props.style,
+        flexDirection
+    };
+    const dimension = "Flexbox" === type && "column" === flexDirection ? "height" : "width";
+    const newComponentStyle = getFlexStyle(newComponent, dimension, pos);
+    const existingComponentStyle = getFlexStyle(existingComponent, dimension);
+    return [
+        style,
+        existingComponentStyle,
+        newComponentStyle
+    ];
+}
+const isTargetFirst = (pos)=>pos.position.SouthOrEast ? true : pos?.tab?.positionRelativeToTab === "before" ? false : !!pos.position.Header;
+function getLayoutSpecForWrapper(pos) {
+    if (pos.position.Header) return {
+        type: "Stack",
+        flexDirection: "column",
+        showTabs: true
+    };
+    return {
+        type: "Flexbox",
+        flexDirection: pos.position.EastOrWest ? "row" : "column"
+    };
+}
+export { wrap };

package/src/layout-view/View.css.js

@@ -0,0 +1,76 @@
+const css = `
+.vuuView {
+  --vuuToolbarProxy-height: var(--salt-size-base);
+  border-color: var(--vuuView-borderColor, transparent);
+  border-width: var(--vuuView-borderWidth, 1px);
+  border-style: var(--vuuView-borderStyle, solid);
+  margin: var(--vuuView-margin, 0px);
+  outline: none;
+  flex-direction: column;
+  min-width: 50px;
+  min-height: 50px;
+  transition: flex-basis .3s ease-in-out;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+
+  &.vuuHighlighted {
+    --vuuView-borderStyle: dashed;
+    --vuuView-borderColor: var(--salt-container-primary-borderColor);
+  }
+}
+
+.vuuSplitterResizing .vuuView {
+  transition: none;
+}
+
+.vuuView:has( > .vuuHeader) {
+  min-height: var(--vuuToolbarProxy-height);
+}
+
+.vuuView.focus-visible:after {
+  content: "";
+  border: 2px dotted #6495ed;
+  position: absolute;
+  inset: 0;
+}
+
+.vuuView.dragging {
+  box-shadow: 0 6px 12px #0000002d;
+}
+
+.vuuView-main {
+  flex-direction: var(--vuuView-flexDirection, column);
+  flex-wrap: var(--vuuView-flex-wrap, nowrap);
+  justify-content: var(--vuuView-justify, flex-start);
+  flex: 1;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.vuuView-main > * {
+  flex-basis: auto;
+  flex-grow: var(--vuuView-flex-grow, 1);
+  flex-shrink: var(--vuuView-flex-shrink, 1);
+}
+
+.vuuView-collapsed {
+  flex: 0 0 0 !important;
+}
+
+.vuuView-collapsed + .Splitter {
+  display: none;
+}
+
+.vuuView-collapsed .Toolbar-vertical {
+  border-right: solid 1px var(--grey40);
+}
+
+.vuuView-collapsed .Toolbar-vertical .toolbar-title {
+  display: none;
+}
+
+
+`;
+export default css;

package/src/layout-view/View.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { registerComponent, useId } from "@vuu-ui/vuu-utils";
+import { useForkRef } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import react, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { Header as Header_js_Header } from "../layout-header/Header.js";
+import { useView } from "./useView.js";
+import { useViewResize } from "./useViewResize.js";
+import { ViewContext } from "../layout-view-actions/ViewContext.js";
+import View_0 from "./View.css";
+const classBase = "vuuView";
+const getProps = (state, props)=>{
+    if (state && props) return {
+        ...state,
+        ...props
+    };
+    return state || props;
+};
+const View_View = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
+    const { Header = Header_js_Header, allowRename, children, className, collapsed, closeable, "data-path": dataPath, "data-resizeable": dataResizeable, dropTargets, expanded, flexFill, id: idProp, header, onCollapse, onExpand, orientation = "horizontal", path = dataPath, resize = "responsive", resizeable = dataResizeable, restoreStyle, tearOut, style = {}, title: titleProp, ...restProps } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-view",
+        css: View_0,
+        window: targetWindow
+    });
+    const id = useId(idProp);
+    const rootRef = useRef(null);
+    const mainRef = useRef(null);
+    const [componentProps, _setComponentProps] = useState();
+    const { contributions, dispatchViewAction, load, onConfigChange, onEditTitle, purge, restoredState, save, title } = useView({
+        id,
+        rootRef,
+        path,
+        dropTargets,
+        title: titleProp
+    });
+    useViewResize({
+        mainRef,
+        resize,
+        rootRef
+    });
+    const setComponentProps = useCallback((props)=>{
+        _setComponentProps(props);
+    }, []);
+    const getContent = ()=>{
+        if (/*#__PURE__*/ react.isValidElement(children) && (restoredState || componentProps)) return /*#__PURE__*/ react.cloneElement(children, getProps(restoredState, componentProps));
+        return children;
+    };
+    const viewContextValue = useMemo(()=>({
+            dispatch: dispatchViewAction,
+            id,
+            path,
+            title,
+            load,
+            onConfigChange,
+            purge,
+            save,
+            setComponentProps
+        }), [
+        dispatchViewAction,
+        id,
+        load,
+        onConfigChange,
+        path,
+        purge,
+        save,
+        setComponentProps,
+        title
+    ]);
+    const headerProps = "object" == typeof header ? header : {};
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        className: clsx(classBase, className, {
+            [`${classBase}-collapsed`]: collapsed,
+            [`${classBase}-expanded`]: expanded,
+            [`${classBase}-resize-defer`]: "defer" === resize
+        }),
+        "data-resizeable": resizeable,
+        id: id,
+        ref: useForkRef(forwardedRef, rootRef),
+        style: style,
+        tabIndex: -1,
+        children: /*#__PURE__*/ jsxs(ViewContext.Provider, {
+            value: viewContextValue,
+            children: [
+                header ? /*#__PURE__*/ jsx(Header, {
+                    ...headerProps,
+                    allowRename: allowRename,
+                    collapsed: collapsed,
+                    contributions: contributions,
+                    expanded: expanded,
+                    closeable: closeable,
+                    onCollapse: onCollapse,
+                    onEditTitle: onEditTitle,
+                    onExpand: onExpand,
+                    orientation: orientation,
+                    tearOut: tearOut,
+                    title: title
+                }) : null,
+                /*#__PURE__*/ jsx("div", {
+                    className: `${classBase}-main`,
+                    ref: mainRef,
+                    children: getContent()
+                })
+            ]
+        })
+    });
+});
+View_View.displayName = "View";
+const MemoView = /*#__PURE__*/ react.memo(View_View);
+MemoView.displayName = "View";
+registerComponent("View", MemoView, "view");
+export { MemoView as View };

package/src/layout-view/useView.js

@@ -0,0 +1,69 @@
+import { useCallback, useMemo } from "react";
+import { useLayoutProviderDispatch } from "../layout-provider/LayoutProvider.js";
+import { usePersistentState } from "../use-persistent-state.js";
+import { useViewActionDispatcher } from "../layout-view-actions/useViewActionDispatcher.js";
+const useView = ({ id, rootRef, path, dropTargets, title: titleProp })=>{
+    const layoutDispatch = useLayoutProviderDispatch();
+    const { loadState, purgeState, saveState } = usePersistentState();
+    const [dispatchViewAction, contributions] = useViewActionDispatcher(id, rootRef, path, dropTargets);
+    const title = useMemo(()=>loadState("view-title") ?? titleProp, [
+        loadState,
+        titleProp
+    ]);
+    const onEditTitle = useCallback((title)=>{
+        if (path) layoutDispatch({
+            type: "set-title",
+            path,
+            title
+        });
+    }, [
+        layoutDispatch,
+        path
+    ]);
+    const restoredState = useMemo(()=>loadState(id), [
+        id,
+        loadState
+    ]);
+    const load = useCallback((key)=>loadState(id, key), [
+        id,
+        loadState
+    ]);
+    const purge = useCallback((key)=>{
+        purgeState(id, key);
+        layoutDispatch({
+            type: "save"
+        });
+    }, [
+        id,
+        layoutDispatch,
+        purgeState
+    ]);
+    const save = useCallback((state, key)=>{
+        saveState(id, key, state);
+        layoutDispatch({
+            type: "save"
+        });
+    }, [
+        id,
+        layoutDispatch,
+        saveState
+    ]);
+    const onConfigChange = useCallback(({ type: key, ...config })=>{
+        const { [key]: data } = config;
+        save(data, key);
+    }, [
+        save
+    ]);
+    return {
+        contributions,
+        dispatchViewAction,
+        load,
+        onConfigChange,
+        onEditTitle,
+        purge,
+        restoredState,
+        save,
+        title
+    };
+};
+export { useView };