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

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

@@ -1,161 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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 };