@vuu-ui/grid-layout 4.0.0-alpha.1

package/src/useGridLayout.js

@@ -0,0 +1,727 @@
+import { jsx } from "react/jsx-runtime";
+import { asReactElements, isGridLayoutSplitDirection, isSimpleStateValue, uuid } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { layoutFromJson } from "./layoutFromJson.js";
+import { getActiveIndex, getGridArea, getSharedGridPosition } from "./grid-layout-utils.js";
+import { isTypedComponentTemplate, sourceIsComponent, sourceIsTabbedComponent, sourceIsTemplate } from "./GridLayoutContext.js";
+import { GridLayoutItem, isGridLayoutItem } from "./GridLayoutItem.js";
+import { GridLayoutModel } from "./GridLayoutModel.js";
+import { useGridChangeHandler, useGridLayoutOptions, useSavedGrid } from "./GridLayoutProvider.js";
+import { GridModel, GridModelChildItem, isStackedItem } from "./GridModel.js";
+import { addChildToStackedGridItem, getGridItemChild } from "./react-element-utils.js";
+import { GridCommandExecutionError, LegacyGridCommandExecutor, throwForGridCommandFailure } from "./GridCommand.js";
+import { GridController } from "./GridController.js";
+import { GridDragCoordinator } from "./GridDragCoordinator.js";
+import { gridSnapshotToGridLayoutDescriptor } from "./grid-snapshot-adapters.js";
+import { isGridLayoutStackedItem } from "./GridLayoutStackedtem.js";
+import { useGridControllerSnapshot } from "./useGridControllerSnapshot.js";
+const layoutDescriptorFromChildren = (colsAndRows, children)=>{
+    const stackTemplates = new Map(children.filter(isGridLayoutStackedItem).map((element)=>[
+            element.props.id,
+            element.props
+        ]));
+    return {
+        ...colsAndRows,
+        gridLayoutItems: Object.fromEntries(children.filter(isGridLayoutItem).map(({ props })=>{
+            const { componentId, contentVisible, "data-drop-target": dropTarget, header, id, minHeight, minWidth, resizeable, stackId, style, title } = props;
+            const stackTemplate = stackId ? stackTemplates.get(stackId) : void 0;
+            const gridArea = style?.gridArea ?? stackTemplate?.style?.gridArea;
+            if (!gridArea) throw Error(`[useGridLayout] GridLayoutItem #${id} has no gridArea`);
+            return [
+                id,
+                {
+                    componentId,
+                    contentVisible,
+                    dropTarget,
+                    gridArea,
+                    header,
+                    minHeight: minHeight ?? stackTemplate?.minHeight,
+                    minWidth: minWidth ?? stackTemplate?.minWidth,
+                    resizeable: resizeable ?? stackTemplate?.resizeable,
+                    stackId,
+                    title
+                }
+            ];
+        }))
+    };
+};
+const assertNeverGridLayoutAction = (action)=>{
+    throw new GridCommandExecutionError({
+        code: "UNSUPPORTED_ACTION",
+        message: `Unsupported GridLayoutAction: ${JSON.stringify(action)}`
+    });
+};
+const useGridLayout = ({ children: childrenProp, id, colsAndRows, onChange })=>{
+    const containerRef = useRef(null);
+    const { onCommittedSnapshot, releaseTemplateComponent, renderTemplateComponent } = useGridChangeHandler();
+    const layoutOptions = useGridLayoutOptions();
+    const getSavedGrid = useSavedGrid();
+    const [[children, layout, persistedPlaceholderIds], setInitialGrid] = useState(()=>{
+        const savedGrid = getSavedGrid?.(id);
+        if (savedGrid) {
+            const { components: savedChildren, layout: savedLayout } = savedGrid;
+            return [
+                Object.values(savedChildren),
+                savedLayout,
+                savedGrid.placeholderIds
+            ];
+        }
+        if (colsAndRows) {
+            const reactElements = asReactElements(childrenProp);
+            const layoutDescriptor = layoutDescriptorFromChildren(colsAndRows, reactElements);
+            return [
+                reactElements,
+                layoutDescriptor,
+                void 0
+            ];
+        }
+        throw Error("[useGridLayout] no saved grid details available and no layout provided. Either pass layout props or provide a layout using GridLayoutProvider");
+    });
+    const [childElements, setChildElements] = useState(children);
+    const childrenRef = useRef(childElements);
+    const contentRegistryRef = useRef(new Map(children.map((element)=>[
+            element.props.id,
+            element
+        ])));
+    const savedGridReaderRef = useRef(getSavedGrid);
+    useEffect(()=>{
+        if (savedGridReaderRef.current === getSavedGrid) return;
+        savedGridReaderRef.current = getSavedGrid;
+        const savedGrid = getSavedGrid?.(id);
+        if (savedGrid) {
+            const nextChildren = Object.values(savedGrid.components);
+            childrenRef.current = nextChildren;
+            contentRegistryRef.current = new Map(nextChildren.map((element)=>[
+                    element.props.id,
+                    element
+                ]));
+            setChildElements(nextChildren);
+            setInitialGrid([
+                nextChildren,
+                savedGrid.layout,
+                savedGrid.placeholderIds
+            ]);
+        }
+    }, [
+        getSavedGrid,
+        id
+    ]);
+    const setChildren = useCallback((newChildren)=>{
+        if (isSimpleStateValue(newChildren)) childrenRef.current = newChildren;
+        else {
+            const { current: prev } = childrenRef;
+            childrenRef.current = newChildren(prev);
+        }
+        contentRegistryRef.current = new Map(childrenRef.current.map((element)=>[
+                element.props.id,
+                element
+            ]));
+        setChildElements(childrenRef.current);
+    }, []);
+    const [gridModel, gridLayoutModel, containerCallback] = useMemo(()=>{
+        const gridModel = new GridModel(id, layout);
+        for (const placeholderId of persistedPlaceholderIds ?? [])gridModel.getChildItem(placeholderId, true).type = "placeholder";
+        for (const [stackId, items] of gridModel.getStackedChildItems())if (void 0 === gridModel.getChildItem(stackId)) {
+            const { column, row } = getSharedGridPosition(items);
+            const stackTemplate = children.find((element)=>isGridLayoutStackedItem(element) && element.props.id === stackId);
+            gridModel.setTabState(stackId, items, getActiveIndex(items));
+            gridModel.addChildItem(new GridModelChildItem({
+                column,
+                id: stackId,
+                minHeight: stackTemplate?.props.minHeight,
+                minWidth: stackTemplate?.props.minWidth,
+                resizeable: stackTemplate?.props.resizeable,
+                row,
+                type: "stacked-content"
+            }));
+        }
+        if (void 0 === persistedPlaceholderIds) gridModel.createPlaceholders();
+        const gridLayoutModel = new GridLayoutModel(gridModel);
+        const callbackRef = (el)=>{
+            if (el) containerRef.current = el;
+        };
+        return [
+            gridModel,
+            gridLayoutModel,
+            callbackRef
+        ];
+    }, [
+        children,
+        id,
+        layout,
+        persistedPlaceholderIds
+    ]);
+    const gridController = useMemo(()=>new GridController(gridModel, 0, new LegacyGridCommandExecutor(gridModel, gridLayoutModel)), [
+        gridLayoutModel,
+        gridModel
+    ]);
+    const snapshot = useGridControllerSnapshot(gridController);
+    const dragCoordinator = useMemo(()=>new GridDragCoordinator(id, gridController), [
+        gridController,
+        id
+    ]);
+    const provisionalTemplateRef = useRef(void 0);
+    const pendingExistingDragRef = useRef(void 0);
+    const clearPendingExistingDrag = useCallback(()=>{
+        if (pendingExistingDragRef.current) {
+            const { id, ownerWindow } = pendingExistingDragRef.current;
+            ownerWindow.clearTimeout(id);
+            pendingExistingDragRef.current = void 0;
+        }
+    }, []);
+    const clearDragAppearance = useCallback(()=>{
+        containerRef.current?.classList.remove("vuuDragging");
+    }, []);
+    useEffect(()=>()=>{
+            clearPendingExistingDrag();
+            clearDragAppearance();
+            dragCoordinator.dispose();
+        }, [
+        clearDragAppearance,
+        clearPendingExistingDrag,
+        dragCoordinator
+    ]);
+    const contentIds = useMemo(()=>new Set(childElements.filter(isGridLayoutItem).map(({ props: { id } })=>id)), [
+        childElements
+    ]);
+    const stackTemplates = useMemo(()=>new Map(childElements.filter(isGridLayoutStackedItem).map((element)=>[
+                element.props.id,
+                element
+            ])), [
+        childElements
+    ]);
+    const renderedChildren = snapshot.items.flatMap(({ id: itemId })=>{
+        const element = contentRegistryRef.current.get(itemId);
+        return element ? [
+            element
+        ] : [];
+    });
+    const nonContentGridItems = useMemo(()=>{
+        const placeholderPreview = "previewing" === dragCoordinator.state.phase && "palette-template" === dragCoordinator.state.source.kind && "replace" === dragCoordinator.state.target.intent.kind ? {
+            id: dragCoordinator.state.target.targetId,
+            snapshotId: dragCoordinator.state.source.item.id
+        } : void 0;
+        return {
+            placeholders: snapshot.items.filter(({ id: itemId })=>!contentIds.has(itemId)).map(({ id: snapshotId })=>placeholderPreview?.snapshotId === snapshotId ? placeholderPreview : {
+                    id: snapshotId,
+                    snapshotId
+                }),
+            splitters: gridLayoutModel.createSplitters(),
+            stackIds: snapshot.stacks.map(({ id: stackId })=>stackId)
+        };
+    }, [
+        contentIds,
+        dragCoordinator,
+        gridLayoutModel,
+        snapshot
+    ]);
+    const saveGridLayout = useCallback((id, gridLayout)=>{
+        onChange?.(id, gridLayout);
+    }, [
+        onChange
+    ]);
+    const handleDragStart = useCallback((evt, options)=>{
+        if ("text/plain" === options.type) {
+            clearPendingExistingDrag();
+            const ownerWindow = evt.currentTarget.ownerDocument.defaultView;
+            if (ownerWindow) {
+                const timeoutId = ownerWindow.setTimeout(()=>{
+                    pendingExistingDragRef.current = void 0;
+                    const result = dragCoordinator.begin({
+                        itemId: options.id,
+                        kind: "existing-item",
+                        sourceGridId: id
+                    });
+                    if (!result.ok) throw Error(result.error.message);
+                });
+                pendingExistingDragRef.current = {
+                    id: timeoutId,
+                    ownerWindow
+                };
+            }
+        }
+    }, [
+        clearPendingExistingDrag,
+        dragCoordinator,
+        id
+    ]);
+    const handleCancelDrag = useCallback(()=>{
+        clearPendingExistingDrag();
+        clearDragAppearance();
+        if ("dragging" === dragCoordinator.state.phase || "previewing" === dragCoordinator.state.phase) {
+            const result = dragCoordinator.cancel();
+            if (!result.ok) throw Error(result.error.message);
+        }
+        if (provisionalTemplateRef.current) {
+            releaseTemplateComponent?.(provisionalTemplateRef.current.itemId);
+            provisionalTemplateRef.current = void 0;
+        }
+    }, [
+        clearDragAppearance,
+        clearPendingExistingDrag,
+        dragCoordinator,
+        releaseTemplateComponent
+    ]);
+    const releaseProvisionalTemplate = useCallback(()=>{
+        const provisional = provisionalTemplateRef.current;
+        if (provisional) {
+            releaseTemplateComponent?.(provisional.itemId);
+            provisionalTemplateRef.current = void 0;
+        }
+    }, [
+        releaseTemplateComponent
+    ]);
+    const handleDragEnd = useCallback((_evt, dropped)=>{
+        clearDragAppearance();
+        if (!dropped) handleCancelDrag();
+        provisionalTemplateRef.current = void 0;
+    }, [
+        clearDragAppearance,
+        handleCancelDrag
+    ]);
+    const addChildComponent = useCallback((component, { column, header, id, row, title, type })=>{
+        if ("stacked-content" === type) {
+            const stackedGridItem = getGridItemChild(childrenRef.current, id);
+            const newChild = addChildToStackedGridItem(stackedGridItem, component);
+            setChildren((c)=>c.map((child)=>child.props.id === id ? newChild : child));
+        } else {
+            const newChild = /*#__PURE__*/ jsx(GridLayoutItem, {
+                "data-drop-target": true,
+                header: header,
+                id: id,
+                resizeable: "hv",
+                style: {
+                    gridArea: getGridArea({
+                        column,
+                        row
+                    })
+                },
+                title: title,
+                children: component
+            }, id);
+            setChildren((c)=>c.concat(newChild));
+        }
+    }, [
+        setChildren
+    ]);
+    const replaceChildComponent = useCallback((targetItemId, component, { column, header, id, row, title })=>{
+        const newChild = /*#__PURE__*/ jsx(GridLayoutItem, {
+            "data-drop-target": true,
+            header: header,
+            id: id,
+            resizeable: "hv",
+            style: {
+                gridArea: getGridArea({
+                    column,
+                    row
+                })
+            },
+            title: title,
+            children: component
+        }, id);
+        setChildren((c)=>c.map((child)=>child.props.id === targetItemId ? newChild : child));
+    }, [
+        setChildren
+    ]);
+    const prepareDragSource = useCallback((dragSource)=>{
+        if (sourceIsTemplate(dragSource)) {
+            let provisional = provisionalTemplateRef.current;
+            if (!provisional || provisional.template !== dragSource) {
+                if (provisional) releaseTemplateComponent?.(provisional.itemId);
+                const itemId = uuid();
+                const component = isTypedComponentTemplate(dragSource) ? renderTemplateComponent?.(dragSource, itemId) : (()=>{
+                    const { label: _label, ...layout } = JSON.parse(dragSource.componentJson);
+                    return layoutFromJson(layout);
+                })();
+                if (!component) throw Error(`[useGridLayout#${id}] component template could not be rendered`);
+                provisional = {
+                    component,
+                    itemId,
+                    template: dragSource
+                };
+                provisionalTemplateRef.current = provisional;
+            }
+            if ("dragging" !== dragCoordinator.state.phase && "previewing" !== dragCoordinator.state.phase) {
+                const begun = dragCoordinator.begin({
+                    item: {
+                        column: {
+                            span: 1,
+                            start: 1
+                        },
+                        dropTarget: true,
+                        header: layoutOptions?.newChildItem.header,
+                        id: provisional.itemId,
+                        resizeable: "hv",
+                        row: {
+                            span: 1,
+                            start: 1
+                        },
+                        title: dragSource.label ?? "New Item"
+                    },
+                    kind: "palette-template",
+                    templateId: isTypedComponentTemplate(dragSource) ? `${dragSource.component.type}@${dragSource.component.version}` : dragSource.componentJson
+                });
+                if (!begun.ok) {
+                    releaseProvisionalTemplate();
+                    throw Error(begun.error.message);
+                }
+            }
+        } else if (sourceIsComponent(dragSource) && "dragging" !== dragCoordinator.state.phase && "previewing" !== dragCoordinator.state.phase) {
+            clearPendingExistingDrag();
+            const begun = dragCoordinator.begin({
+                itemId: dragSource.id,
+                kind: "existing-item",
+                sourceGridId: dragSource.layoutId
+            });
+            if (!begun.ok) throw Error(begun.error.message);
+        } else if (sourceIsTabbedComponent(dragSource) && "dragging" !== dragCoordinator.state.phase && "previewing" !== dragCoordinator.state.phase) {
+            const begun = dragCoordinator.begin({
+                itemId: dragSource.tab.id,
+                kind: "stack-member",
+                selected: dragSource.isSelectedTab,
+                sourceGridId: dragSource.layoutId,
+                stackId: dragSource.tabsId
+            });
+            if (!begun.ok) throw Error(begun.error.message);
+        }
+    }, [
+        clearPendingExistingDrag,
+        dragCoordinator,
+        id,
+        layoutOptions?.newChildItem.header,
+        releaseTemplateComponent,
+        releaseProvisionalTemplate,
+        renderTemplateComponent
+    ]);
+    const handleDragLeave = useCallback(()=>{
+        const templateDrag = "idle" !== dragCoordinator.state.phase && "palette-template" === dragCoordinator.state.source.kind;
+        if ("previewing" === dragCoordinator.state.phase) {
+            const result = dragCoordinator.clearPreview();
+            if (!result.ok) throw Error(result.error.message);
+        }
+        if (templateDrag && "dragging" === dragCoordinator.state.phase) {
+            const result = dragCoordinator.cancel();
+            if (!result.ok) throw Error(result.error.message);
+        }
+        releaseProvisionalTemplate();
+    }, [
+        dragCoordinator,
+        releaseProvisionalTemplate
+    ]);
+    const handleDragPreview = useCallback((targetItemId, dragSource, position)=>{
+        const targetGridItem = gridModel.getChildItem(targetItemId, true);
+        if ("centre" === position && isStackedItem(targetGridItem)) return false;
+        prepareDragSource(dragSource);
+        const targetId = isGridLayoutSplitDirection(position) && isStackedItem(targetGridItem) ? targetGridItem.stackId : targetItemId;
+        const intent = isGridLayoutSplitDirection(position) ? {
+            kind: "split",
+            position
+        } : "centre" === position ? {
+            kind: "replace"
+        } : "header" === position ? {
+            kind: "create-stack"
+        } : void 0;
+        if (!intent) return false;
+        const previewed = dragCoordinator.preview({
+            gridId: id,
+            intent,
+            targetId
+        });
+        if (!previewed.ok) {
+            handleCancelDrag();
+            return false;
+        }
+        const cleared = dragCoordinator.clearPreview();
+        if (!cleared.ok) throw Error(cleared.error.message);
+        return true;
+    }, [
+        dragCoordinator,
+        gridModel,
+        handleCancelDrag,
+        id,
+        prepareDragSource
+    ]);
+    const handleDrop = useCallback((targetItemId, dragSource, position)=>{
+        containerRef.current?.classList.remove("vuuDragging");
+        prepareDragSource(dragSource);
+        const existingPlaceholderPreview = "centre" === position && "previewing" === dragCoordinator.state.phase && "palette-template" === dragCoordinator.state.source.kind && "replace" === dragCoordinator.state.target.intent.kind && dragCoordinator.state.target.targetId === targetItemId;
+        const replacingPlaceholder = "centre" === position && !contentRegistryRef.current.has(targetItemId);
+        const targetGridItem = existingPlaceholderPreview ? void 0 : gridModel.getChildItem(targetItemId, true);
+        if (!isGridLayoutSplitDirection(position) && "centre" !== position && "header" !== position) {
+            handleCancelDrag();
+            return false;
+        }
+        if ("centre" === position && targetGridItem && isStackedItem(targetGridItem)) {
+            handleCancelDrag();
+            return false;
+        }
+        const targetId = isGridLayoutSplitDirection(position) && targetGridItem && isStackedItem(targetGridItem) ? targetGridItem.stackId : targetItemId;
+        const intent = isGridLayoutSplitDirection(position) ? {
+            kind: "split",
+            position
+        } : "centre" === position ? {
+            kind: "replace"
+        } : {
+            kind: "create-stack"
+        };
+        const preview = existingPlaceholderPreview || dragCoordinator.preview({
+            gridId: id,
+            intent,
+            targetId
+        }).ok;
+        if (!preview) {
+            handleCancelDrag();
+            return false;
+        }
+        const committed = dragCoordinator.commit();
+        if (!committed.ok) throw Error(committed.error.message);
+        clearDragAppearance();
+        if (sourceIsTemplate(dragSource) || "centre" !== position) {
+            if (sourceIsTemplate(dragSource)) {
+                const provisional = provisionalTemplateRef.current;
+                if (!provisional) throw Error(`[useGridLayout#${id}] template item id not allocated`);
+                const newItem = gridModel.getChildItem(provisional.itemId, true);
+                if ("centre" !== position || replacingPlaceholder) addChildComponent(provisional.component, newItem);
+                else replaceChildComponent(targetItemId, provisional.component, newItem);
+                provisionalTemplateRef.current = void 0;
+            }
+        } else setChildren((current)=>current.filter((child)=>child.props.id !== targetItemId));
+        return true;
+    }, [
+        addChildComponent,
+        clearDragAppearance,
+        gridModel,
+        handleCancelDrag,
+        id,
+        dragCoordinator,
+        prepareDragSource,
+        replaceChildComponent,
+        setChildren
+    ]);
+    const handleDetachTab = useCallback(({ gridId, itemId, tabsId })=>{
+        if (gridId === id) {
+            const stack = snapshot.stacks.find(({ id })=>id === tabsId);
+            if (!itemId || !stack?.itemIds.includes(itemId)) throw Error(`[useGridLayout#${id}] cannot identify dragged tab #${itemId}`);
+            const result = dragCoordinator.begin({
+                itemId,
+                kind: "stack-member",
+                selected: stack?.selectedItemId === itemId,
+                sourceGridId: id,
+                stackId: tabsId
+            });
+            if (!result.ok) throw Error(result.error.message);
+        }
+    }, [
+        dragCoordinator,
+        id,
+        snapshot
+    ]);
+    const handleCancelTabDrag = useCallback(({ gridId })=>{
+        if (gridId === id && ("dragging" === dragCoordinator.state.phase || "previewing" === dragCoordinator.state.phase)) {
+            const result = dragCoordinator.cancel();
+            if (!result.ok) throw Error(result.error.message);
+        }
+    }, [
+        dragCoordinator,
+        id
+    ]);
+    const handleDropStackedItem = useCallback(({ dragSource, tabsId: targetStackItemId, dropPosition })=>{
+        if (!targetStackItemId || !dropPosition) throw Error("[useGridLayout] handleDropStackedItem no details of the stacked drop target");
+        const targetStack = snapshot.stacks.find(({ id })=>id === targetStackItemId);
+        if (!targetStack) throw Error(`[useGridLayout#${id}] stack drop target #${targetStackItemId} not found`);
+        const targetItemId = targetStack.itemIds.find((itemId)=>itemId === dropPosition.target);
+        if (!targetItemId) throw Error(`[useGridLayout#${id}] stack item drop target #${dropPosition.target} not found`);
+        let component;
+        let newChildId;
+        if (sourceIsTemplate(dragSource)) {
+            newChildId = uuid();
+            component = isTypedComponentTemplate(dragSource) ? renderTemplateComponent?.(dragSource, newChildId) : (()=>{
+                const { label: _label, ...layout } = JSON.parse(dragSource.componentJson);
+                return layoutFromJson(layout);
+            })();
+            if (!component) throw Error(`[useGridLayout#${id}] component template could not be rendered`);
+            const begun = dragCoordinator.begin({
+                item: {
+                    column: {
+                        span: 1,
+                        start: 1
+                    },
+                    dropTarget: true,
+                    header: layoutOptions?.newChildItem.header,
+                    id: newChildId,
+                    resizeable: "hv",
+                    row: {
+                        span: 1,
+                        start: 1
+                    },
+                    title: dragSource.label ?? "New Item"
+                },
+                kind: "palette-template",
+                templateId: isTypedComponentTemplate(dragSource) ? `${dragSource.component.type}@${dragSource.component.version}` : dragSource.componentJson
+            });
+            if (!begun.ok) throw Error(begun.error.message);
+        } else if (sourceIsComponent(dragSource) && "idle" === dragCoordinator.state.phase) {
+            const begun = dragCoordinator.begin({
+                itemId: dragSource.id,
+                kind: "existing-item",
+                sourceGridId: dragSource.layoutId
+            });
+            if (!begun.ok) throw Error(begun.error.message);
+        }
+        const preview = dragCoordinator.preview({
+            gridId: id,
+            intent: {
+                kind: "stack",
+                position: dropPosition.position,
+                targetItemId
+            },
+            targetId: targetStackItemId
+        });
+        if (!preview.ok) {
+            if ("dragging" === dragCoordinator.state.phase || "previewing" === dragCoordinator.state.phase) dragCoordinator.cancel();
+            return;
+        }
+        const committed = dragCoordinator.commit();
+        if (!committed.ok) throw Error(committed.error.message);
+        clearDragAppearance();
+        if (component && newChildId) addChildComponent(component, gridModel.getChildItem(newChildId, true));
+    }, [
+        addChildComponent,
+        clearDragAppearance,
+        dragCoordinator,
+        gridModel,
+        id,
+        layoutOptions?.newChildItem.header,
+        renderTemplateComponent,
+        snapshot
+    ]);
+    const dispatchGridLayoutAction = useCallback((action)=>{
+        switch(action.type){
+            case "close":
+                throwForGridCommandFailure(gridController.dispatch({
+                    itemId: action.id,
+                    reason: "close",
+                    type: "remove-item"
+                }));
+                setChildren((children)=>children.filter((child)=>child.props.id !== action.id));
+                break;
+            case "rename-tab":
+                throwForGridCommandFailure(gridController.dispatch({
+                    itemId: action.id,
+                    title: action.title,
+                    type: "rename-item"
+                }));
+                break;
+            case "add-tabbed-child":
+                {
+                    const { componentTemplate, title, stackId } = action;
+                    const { dropTarget = true } = componentTemplate;
+                    const { column, row } = gridModel.getChildItem(stackId, true);
+                    const newChildId = uuid();
+                    const component = isTypedComponentTemplate(componentTemplate) ? renderTemplateComponent?.(componentTemplate, newChildId) : layoutFromJson({
+                        ...JSON.parse(componentTemplate.componentJson),
+                        title
+                    });
+                    if (!component) throw Error(`[useGridLayout#${id}] component template could not be rendered`);
+                    throwForGridCommandFailure(gridController.dispatch({
+                        item: {
+                            id: newChildId,
+                            column: {
+                                span: column.end - column.start,
+                                start: column.start
+                            },
+                            dropTarget: dropTarget || void 0,
+                            header: layoutOptions?.newChildItem.header,
+                            resizeable: "hv",
+                            row: {
+                                span: row.end - row.start,
+                                start: row.start
+                            },
+                            title: title ?? componentTemplate.label ?? "New Item"
+                        },
+                        stackId,
+                        type: "add-stack-item"
+                    }));
+                    const gridModelChildItem = gridModel.getChildItem(newChildId, true);
+                    addChildComponent(component, gridModelChildItem);
+                    throwForGridCommandFailure(gridController.dispatch({
+                        itemId: newChildId,
+                        stackId,
+                        type: "select-stack-item"
+                    }));
+                }
+                break;
+            case "resize-grid-column":
+                throwForGridCommandFailure(gridController.dispatch({
+                    index: action.trackIndex,
+                    size: action.value,
+                    track: "column",
+                    type: "resize-track"
+                }));
+                break;
+            case "resize-grid-row":
+                throwForGridCommandFailure(gridController.dispatch({
+                    index: action.trackIndex,
+                    size: action.value,
+                    track: "row",
+                    type: "resize-track"
+                }));
+                break;
+            case "select-tab":
+                throwForGridCommandFailure(gridController.dispatch({
+                    itemId: action.itemId,
+                    stackId: action.stackId,
+                    type: "select-stack-item"
+                }));
+                break;
+            case "switch-tab":
+                throw new GridCommandExecutionError({
+                    code: "UNSUPPORTED_ACTION",
+                    message: "GridLayoutAction 'switch-tab' has no supported legacy semantics"
+                });
+            default:
+                return assertNeverGridLayoutAction(action);
+        }
+    }, [
+        addChildComponent,
+        gridController,
+        gridModel,
+        id,
+        layoutOptions?.newChildItem.header,
+        renderTemplateComponent,
+        setChildren
+    ]);
+    useEffect(()=>gridController.subscribeCommitted((transition)=>{
+            const { snapshot } = transition;
+            saveGridLayout(id, gridSnapshotToGridLayoutDescriptor(snapshot));
+            onCommittedSnapshot?.(transition, gridModel.getPlaceholders().map(({ id: placeholderId })=>placeholderId));
+        }), [
+        gridController,
+        gridModel,
+        id,
+        onCommittedSnapshot,
+        saveGridLayout
+    ]);
+    return {
+        children: renderedChildren,
+        containerCallback,
+        containerRef,
+        dispatchGridLayoutAction,
+        gridController,
+        gridLayoutModel,
+        gridModel,
+        gridSnapshot: snapshot,
+        nonContentGridItems,
+        onCancelDrag: handleCancelDrag,
+        onCancelTabDrag: handleCancelTabDrag,
+        onDetachTab: handleDetachTab,
+        onDragEnd: handleDragEnd,
+        onDragLeave: handleDragLeave,
+        onDragPreview: handleDragPreview,
+        onDragStart: handleDragStart,
+        onDrop: handleDrop,
+        onDropStackedItem: handleDropStackedItem,
+        stackTemplates
+    };
+};
+export { useGridLayout };