@vuu-ui/vuu-shell 4.0.0-alpha.9 → 4.0.0-beta.1

package/src/left-nav/LeftNav.css.js

@@ -17,11 +17,13 @@ const css = `
   --vuu-light-text-primary: #15171b;
   --menu-level-2-width: 0px;
   z-index: 0;
-  height: 100%;
+  height: calc(100% - 4px);
+  margin-bottom: 4px;
   transition: width .2s ease-out;
   display: flex;
   position: relative;
   overflow: hidden;
+  box-shadow: 3px 4px 4px #00000026;
 }
 
 .vuuLeftNav-menu-full {
@@ -62,7 +64,7 @@ const css = `
 .vuuLeftNav-menu-secondary {
   flex: none;
   flex-basis: var(--nav-menu-content-width, 240px);
-  z-index: 0;
+  z-index: -1;
   display: none;
   top: 0;
   right: 0;

package/src/left-nav/LeftNav.js

@@ -1,16 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { VuuLogo } from "@vuu-ui/vuu-icons";
-import { GridLayout, GridLayoutItem } from "@vuu-ui/grid-layout";
-import { IconButton, Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
+import { Stack, useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
+import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
 import { hasFilterTableFeatureProps } from "@vuu-ui/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import clsx from "clsx";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { FeatureList } from "../feature-list/index.js";
-import { LayoutList, useWorkspace } from "../workspace-management/index.js";
+import { LayoutList } from "../workspace-management/index.js";
 import LeftNav from "./LeftNav.css";
 import { useFeatures } from "../feature-and-layout-provider/index.js";
+import { Button } from "@salt-ds/core";
 const classBase = "vuuLeftNav";
 const getDisplayStatus = (activeTabIndex, expanded)=>{
     if (0 === activeTabIndex) return expanded ? "menu-full" : "menu-icons";
@@ -31,7 +32,8 @@ const byModule = (f1, f2)=>{
     throw Error("Invalid tableFeature");
 };
 const LeftNav_LeftNav = (props)=>{
-    const { "data-path": path, defaultExpanded = true, defaultActiveTabIndex = 0, onActiveChange, onTogglePrimaryMenu, onWidthChange, sizeCollapsed = 80, sizeContent = 300, sizeExpanded = 240, style: styleProp, ...htmlAttributes } = props;
+    const dispatch = useLayoutProviderDispatch();
+    const { "data-path": path, defaultExpanded = true, defaultActiveTabIndex = 0, onActiveChange, onTogglePrimaryMenu, sizeCollapsed = 80, sizeContent = 300, sizeExpanded = 240, style: styleProp, ...htmlAttributes } = props;
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-left-nav",
@@ -39,45 +41,20 @@ const LeftNav_LeftNav = (props)=>{
         window: targetWindow
     });
     const { dynamicFeatures = [], tableFeatures = [] } = useFeatures();
-    const { getApplicationSetting, scopeIdentity, setApplicationSetting, status } = useWorkspace();
-    const storedActiveTabIndex = getApplicationSetting("leftNav.activeTabIndex");
-    const storedExpanded = getApplicationSetting("leftNav.expanded");
     const [navState, setNavState] = useState({
-        activeTabIndex: "number" == typeof storedActiveTabIndex ? storedActiveTabIndex : defaultActiveTabIndex,
-        expanded: "boolean" == typeof storedExpanded ? storedExpanded : defaultExpanded,
-        scopeIdentity: "loading" === status ? "" : scopeIdentity
-    });
-    const visibleNavState = "loading" !== status && navState.scopeIdentity === scopeIdentity ? navState : {
         activeTabIndex: defaultActiveTabIndex,
-        expanded: defaultExpanded,
-        scopeIdentity: ""
-    };
-    useEffect(()=>{
-        "loading" === status ? setNavState({
-            activeTabIndex: defaultActiveTabIndex,
-            expanded: defaultExpanded,
-            scopeIdentity: ""
-        }) : setNavState({
-            activeTabIndex: "number" == typeof storedActiveTabIndex ? storedActiveTabIndex : defaultActiveTabIndex,
-            expanded: "boolean" == typeof storedExpanded ? storedExpanded : defaultExpanded,
-            scopeIdentity
-        });
-    }, [
-        defaultActiveTabIndex,
-        defaultExpanded,
-        scopeIdentity,
-        status,
-        storedActiveTabIndex,
-        storedExpanded
-    ]);
+        expanded: defaultExpanded
+    });
     const tableFeaturesByGroup = useMemo(()=>tableFeatures?.sort(byModule).reduce((acc, filterTableFeature)=>{
             if (!hasFilterTableFeatureProps(filterTableFeature)) return acc;
             {
                 const { table } = filterTableFeature.ComponentProps.tableSchema;
                 const key = `${table.module} Tables`;
                 if (!acc[key]) acc[key] = [];
-                acc[key].push(filterTableFeature);
-                return acc;
+                return {
+                    ...acc,
+                    [key]: acc[key].concat(filterTableFeature)
+                };
             }
         }, {}), [
         tableFeatures
@@ -90,50 +67,48 @@ const LeftNav_LeftNav = (props)=>{
         sizeContent,
         sizeExpanded
     ]);
-    useEffect(()=>{
-        onWidthChange?.(getFullWidth(visibleNavState.activeTabIndex, visibleNavState.expanded));
-    }, [
-        getFullWidth,
-        onWidthChange,
-        visibleNavState
-    ]);
     const handleTabSelection = useCallback((activeTabIndex)=>{
-        const { activeTabIndex: currentIndex, expanded } = visibleNavState;
+        const { activeTabIndex: currentIndex, expanded } = navState;
         const newState = {
             activeTabIndex,
-            expanded,
-            scopeIdentity
+            expanded
         };
         setNavState(newState);
-        getFullWidth(activeTabIndex, expanded);
-        setApplicationSetting("leftNav.activeTabIndex", activeTabIndex);
+        if (0 === activeTabIndex || 0 === currentIndex) {
+            const width = getFullWidth(activeTabIndex, expanded);
+            dispatch({
+                type: "layout-resize",
+                path: "#vuu-side-panel",
+                size: width
+            });
+        }
         onActiveChange?.(activeTabIndex);
     }, [
+        dispatch,
         getFullWidth,
-        onActiveChange,
-        scopeIdentity,
-        setApplicationSetting,
-        visibleNavState
+        navState,
+        onActiveChange
     ]);
-    const displayStatus = getDisplayStatus(visibleNavState.activeTabIndex, visibleNavState.expanded);
+    const displayStatus = getDisplayStatus(navState.activeTabIndex, navState.expanded);
     const toggleExpanded = useCallback(()=>{
-        const { activeTabIndex, expanded } = visibleNavState;
+        const { activeTabIndex, expanded } = navState;
         const primaryMenuExpanded = !expanded;
         const newState = {
             activeTabIndex,
-            expanded: primaryMenuExpanded,
-            scopeIdentity
+            expanded: primaryMenuExpanded
         };
         setNavState(newState);
-        getFullWidth(activeTabIndex, primaryMenuExpanded);
-        setApplicationSetting("leftNav.expanded", primaryMenuExpanded);
+        dispatch({
+            type: "layout-resize",
+            path: "#vuu-side-panel",
+            size: getFullWidth(activeTabIndex, primaryMenuExpanded)
+        });
         onTogglePrimaryMenu?.(primaryMenuExpanded);
     }, [
+        dispatch,
         getFullWidth,
-        onTogglePrimaryMenu,
-        scopeIdentity,
-        setApplicationSetting,
-        visibleNavState
+        navState,
+        onTogglePrimaryMenu
     ]);
     const style = {
         ...styleProp,
@@ -141,93 +116,79 @@ const LeftNav_LeftNav = (props)=>{
         "--nav-menu-expanded-width": `${sizeExpanded}px`,
         "--nav-menu-content-width": `${sizeContent}px`
     };
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsxs("div", {
         ...htmlAttributes,
         className: clsx(classBase, `${classBase}-${displayStatus}`),
         style: style,
-        children: /*#__PURE__*/ jsxs(GridLayout, {
-            colsAndRows: {
-                cols: [
-                    `${visibleNavState.expanded ? sizeExpanded : sizeCollapsed}px`,
-                    `${0 === visibleNavState.activeTabIndex ? 0 : sizeContent}px`
-                ],
-                rows: [
-                    "1fr"
-                ]
-            },
-            id: "vuu-left-nav-grid",
-            children: [
-                /*#__PURE__*/ jsxs(GridLayoutItem, {
-                    className: clsx(`${classBase}-menu-primary`),
-                    "data-mode": "dark",
-                    id: "vuu-left-nav-primary",
-                    style: {
-                        gridArea: "1/1/2/2"
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx("div", {
-                            className: "vuuLeftNav-logo",
-                            children: /*#__PURE__*/ jsx(VuuLogo, {})
-                        }),
-                        /*#__PURE__*/ jsx("div", {
-                            className: `${classBase}-main`,
-                            children: /*#__PURE__*/ jsxs(Tabstrip, {
-                                activeTabIndex: visibleNavState.activeTabIndex,
-                                animateSelectionThumb: false,
-                                className: `${classBase}-Tabstrip`,
-                                onActiveChange: handleTabSelection,
-                                orientation: "vertical",
-                                children: [
-                                    /*#__PURE__*/ jsx(Tab, {
-                                        "data-icon": "demo",
-                                        label: "DEMO"
-                                    }),
-                                    /*#__PURE__*/ jsx(Tab, {
-                                        "data-icon": "features",
-                                        label: "VUU FEATURES"
-                                    }),
-                                    /*#__PURE__*/ jsx(Tab, {
-                                        "data-icon": "tables",
-                                        label: "VUU TABLES"
-                                    }),
-                                    /*#__PURE__*/ jsx(Tab, {
-                                        "data-icon": "layouts",
-                                        label: "MY LAYOUTS"
-                                    })
-                                ]
-                            })
-                        }),
-                        /*#__PURE__*/ jsx("div", {
-                            className: "vuuLeftNav-buttonBar",
-                            children: /*#__PURE__*/ jsx(IconButton, {
-                                className: clsx("vuuLeftNav-toggleButton", {
-                                    "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
-                                    "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: clsx(`${classBase}-menu-primary`),
+                "data-mode": "dark",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "vuuLeftNav-logo",
+                        children: /*#__PURE__*/ jsx(VuuLogo, {})
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-main`,
+                        children: /*#__PURE__*/ jsxs(Tabstrip, {
+                            activeTabIndex: navState.activeTabIndex,
+                            animateSelectionThumb: false,
+                            className: `${classBase}-Tabstrip`,
+                            onActiveChange: handleTabSelection,
+                            orientation: "vertical",
+                            children: [
+                                /*#__PURE__*/ jsx(Tab, {
+                                    "data-icon": "demo",
+                                    label: "DEMO"
+                                }),
+                                /*#__PURE__*/ jsx(Tab, {
+                                    "data-icon": "features",
+                                    label: "VUU FEATURES"
                                 }),
-                                icon: displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
-                                onClick: toggleExpanded
-                            })
+                                /*#__PURE__*/ jsx(Tab, {
+                                    "data-icon": "tables",
+                                    label: "VUU TABLES"
+                                }),
+                                /*#__PURE__*/ jsx(Tab, {
+                                    "data-icon": "layouts",
+                                    label: "MY LAYOUTS"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "vuuLeftNav-buttonBar",
+                        children: /*#__PURE__*/ jsx(Button, {
+                            className: clsx("vuuLeftNav-toggleButton", {
+                                "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
+                                "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
+                            }),
+                            "data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
+                            onClick: toggleExpanded
                         })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(GridLayoutItem, {
-                    className: `${classBase}-menu-secondary`,
-                    id: "vuu-left-nav-secondary",
-                    style: {
-                        gridArea: "1/2/2/3"
-                    },
-                    children: 1 === visibleNavState.activeTabIndex ? /*#__PURE__*/ jsx(FeatureList, {
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Stack, {
+                active: navState.activeTabIndex - 1,
+                className: `${classBase}-menu-secondary`,
+                showTabs: false,
+                children: [
+                    /*#__PURE__*/ jsx(FeatureList, {
                         features: dynamicFeatures,
                         title: "VUU FEATURES"
-                    }) : 2 === visibleNavState.activeTabIndex ? /*#__PURE__*/ jsx(FeatureList, {
+                    }),
+                    /*#__PURE__*/ jsx(FeatureList, {
                         features: tableFeaturesByGroup,
                         title: "VUU TABLES"
-                    }) : 3 === visibleNavState.activeTabIndex ? /*#__PURE__*/ jsx(LayoutList, {
+                    }),
+                    /*#__PURE__*/ jsx(LayoutList, {
                         title: "MY LAYOUTS"
-                    }) : null
-                })
-            ]
-        }, `${visibleNavState.expanded}-${visibleNavState.activeTabIndex}`)
+                    })
+                ]
+            })
+        ]
     });
 };
 export { LeftNav_LeftNav as LeftNav };

package/src/persistence-manager/PersistenceProvider.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 const PersistenceContext = /*#__PURE__*/ createContext({});
-const PersistenceProvider = ({ children, persistenceManager, workspacePersistenceService })=>/*#__PURE__*/ jsx(PersistenceContext.Provider, {
+const PersistenceProvider = ({ children, persistenceManager })=>/*#__PURE__*/ jsx(PersistenceContext.Provider, {
         value: {
-            persistenceManager,
-            workspacePersistenceService
+            persistenceManager
         },
         children: children
     });
@@ -12,10 +11,4 @@ const usePersistenceManager = ()=>{
     const { persistenceManager } = useContext(PersistenceContext);
     return persistenceManager;
 };
-const useWorkspacePersistenceService = ()=>{
-    const { workspacePersistenceService } = useContext(PersistenceContext);
-    if (!workspacePersistenceService) throw new Error("useWorkspacePersistenceService requires a configured PersistenceProvider");
-    return workspacePersistenceService;
-};
-const useOptionalWorkspacePersistenceService = ()=>useContext(PersistenceContext).workspacePersistenceService;
-export { PersistenceContext, PersistenceProvider, useOptionalWorkspacePersistenceService, usePersistenceManager, useWorkspacePersistenceService };
+export { PersistenceContext, PersistenceProvider, usePersistenceManager };

package/src/persistence-manager/index.js

@@ -3,6 +3,3 @@ export * from "./PersistenceProvider.js";
 export * from "./LocalPersistenceManager.js";
 export * from "./RemotePersistenceManager.js";
 export * from "./StaticPersistenceManager.js";
-export * from "./WorkspacePersistenceService.js";
-export * from "./LocalWorkspacePersistenceService.js";
-export * from "./RemoteWorkspacePersistenceService.js";

package/src/shell-layout-templates/context-panel/ContextPanel.css.js

@@ -2,30 +2,29 @@ const css = `
 .vuuContextPanel {
   --header-height: var(--vuuContextPanel-header-height, 48px);
   background: var(--vuuContextPanel-background, var(--salt-container-primary-background));
-  width: var(--vuu-side-panel-width, 0px);
   z-index: 1;
   transition: width .3s ease-in-out;
   position: relative;
+  width: var(--vuu-side-panel-width, 0px) !important;
 }
 
 .vuuContextPanel-expanded {
-  --vuu-side-panel-width: var(--vuuContextPanel-width, 300px);
   --vuu-side-panel-shadow: -4px 4px 4px #0000001a;
   --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);
+  --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;
 
-  & .vuuContextPanel-inner {
+  & .vuuView.vuuContextPanel-inner {
     padding: 24px 8px 24px 18px;
   }
 }
 
 .vuuContextPanel-overlay {
-  width: 0;
+  width: 0 !important;
 }
 
-.vuuContextPanel-inner {
+.vuuView.vuuContextPanel-inner {
   background-color: inherit;
   box-shadow: var(--vuu-side-panel-shadow, none);
-  min-width: 0;
   height: 100%;
   width: var(--vuu-side-panel-width, 0px);
   flex-direction: column;
@@ -33,18 +32,19 @@ const css = `
   transition-duration: .3s;
   transition-timing-function: ease-in-out;
   display: flex;
-  position: absolute;
   top: 0;
   right: 0;
   overflow: auto;
+  min-width: 0 !important;
+  position: absolute !important;
 }
 
 .vuuContextPanel-header {
   flex-wrap: nowrap;
-  flex: 0 0 var(--header-height);
   justify-content: space-between;
   align-items: center;
   display: flex;
+  flex: 0 0 var(--header-height) !important;
 }
 
 .vuuContextPanel-title {

package/src/shell-layout-templates/context-panel/ContextPanel.js

@@ -1,12 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { View, layoutFromJson, useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
+import { IconButton, useHideContextPanel } from "@vuu-ui/vuu-ui-controls";
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import { IconButton, useHideContextPanel } from "@vuu-ui/vuu-ui-controls";
 import clsx from "clsx";
-import { useCallback, useLayoutEffect, useRef } from "react";
+import react, { useCallback, useLayoutEffect, useMemo, useRef } from "react";
 import ContextPanel from "./ContextPanel.css";
 const classBase = "vuuContextPanel";
-const ContextPanel_ContextPanel = ({ className, content, expanded = false, id, onClose, overlay = false, title })=>{
+const ContextPanel_ContextPanel = ({ className: classNameProp, expanded = false, content: contentProp, id, onClose, overlay = false, title })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-context-panel",
@@ -15,33 +17,49 @@ const ContextPanel_ContextPanel = ({ className, content, expanded = false, id, o
     });
     const hideContextPanel = useHideContextPanel();
     const closeButtonRef = useRef(null);
+    const dispatchLayoutAction = useLayoutProviderDispatch();
     const handleClose = useCallback(()=>{
-        hideContextPanel?.();
-        onClose?.();
+        if (hideContextPanel) hideContextPanel();
+        else dispatchLayoutAction({
+            path: `#${VuuShellLocation.ContextPanel}`,
+            propName: "expanded",
+            propValue: false,
+            type: "set-prop"
+        });
     }, [
-        hideContextPanel,
-        onClose
+        dispatchLayoutAction,
+        hideContextPanel
     ]);
-    const handleKeyDown = useCallback((event)=>{
-        if ("Escape" === event.key) handleClose();
+    const handleKeyDown = useCallback((e)=>{
+        if ("Escape" === e.key) handleClose();
     }, [
         handleClose
     ]);
+    const className = clsx(classBase, classNameProp, {
+        [`${classBase}-expanded`]: expanded,
+        [`${classBase}-inline`]: true !== overlay,
+        [`${classBase}-overlay`]: overlay
+    });
+    const content = useMemo(()=>contentProp && expanded ? /*#__PURE__*/ react.isValidElement(contentProp) ? contentProp : layoutFromJson(contentProp, "context-0") : null, [
+        contentProp,
+        expanded
+    ]);
     useLayoutEffect(()=>{
         if (expanded) closeButtonRef.current?.focus();
+        else onClose?.();
     }, [
-        expanded
+        expanded,
+        onClose
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: clsx(classBase, className, "vuuScrollable", {
-            [`${classBase}-expanded`]: expanded,
-            [`${classBase}-inline`]: !overlay,
-            [`${classBase}-overlay`]: overlay
+            [`${classBase}-expanded`]: expanded
         }),
         id: id,
-        onKeyDown: handleKeyDown,
-        children: /*#__PURE__*/ jsxs("div", {
+        children: /*#__PURE__*/ jsxs(View, {
             className: `${classBase}-inner`,
+            header: false,
+            id: id,
             children: [
                 /*#__PURE__*/ jsxs("div", {
                     className: `${classBase}-header`,
@@ -52,11 +70,11 @@ const ContextPanel_ContextPanel = ({ className, content, expanded = false, id, o
                         }),
                         /*#__PURE__*/ jsx(IconButton, {
                             appearance: "transparent",
-                            "aria-label": "Close context panel",
                             className: `${classBase}-close`,
                             "data-embedded": true,
                             icon: "close",
                             onClick: handleClose,
+                            onKeyDown: handleKeyDown,
                             ref: closeButtonRef,
                             sentiment: "neutral",
                             size: 16
@@ -65,7 +83,7 @@ const ContextPanel_ContextPanel = ({ className, content, expanded = false, id, o
                 }),
                 /*#__PURE__*/ jsx("div", {
                     className: `${classBase}-content`,
-                    children: expanded ? content : null
+                    children: content
                 })
             ]
         })

package/src/shell-layout-templates/context-panel/index.js

@@ -1,2 +1 @@
 export * from "./ContextPanel.js";
-export * from "./ApplicationSettingsContextPanel.js";

package/src/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js

@@ -1,58 +1,44 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { GridLayout, GridLayoutItem } from "@vuu-ui/grid-layout";
-import { ApplicationSettingsContextPanel } from "../context-panel/index.js";
+import { Flexbox, LayoutContainer } from "@vuu-ui/vuu-layout";
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
+import { ContextPanel } from "../context-panel/index.js";
 import { SidePanel } from "../side-panel/index.js";
-const useFullHeightLeftPanel = ({ appHeader, SidePanelProps, htmlAttributes, workspaceHost })=>{
-    const { onChange: _onChange, ...gridAttributes } = htmlAttributes ?? {};
-    return /*#__PURE__*/ jsxs(GridLayout, {
-        ...gridAttributes,
-        className: `${htmlAttributes?.className ?? ""} vuuShell-staticGrid`,
-        colsAndRows: {
-            cols: [
-                `${SidePanelProps?.sizeOpen ?? 200}px`,
-                "1fr",
-                "0px"
-            ],
-            rows: [
-                "40px",
-                "1fr"
-            ]
-        },
-        id: "vuu-shell-grid",
-        children: [
-            /*#__PURE__*/ jsx(GridLayoutItem, {
-                id: "vuu-shell-left-nav",
-                style: {
-                    gridArea: "1/1/3/2"
-                },
-                children: /*#__PURE__*/ jsx(SidePanel, {
-                    ...SidePanelProps,
-                    id: "vuu-side-panel"
+import { useMemo } from "react";
+const useFullHeightLeftPanel = ({ appHeader, SidePanelProps: LeftSidePanelProps, htmlAttributes })=>useMemo(()=>/*#__PURE__*/ jsxs(Flexbox, {
+            ...htmlAttributes,
+            style: {
+                ...htmlAttributes?.style,
+                flexDirection: "row"
+            },
+            children: [
+                /*#__PURE__*/ jsx(SidePanel, {
+                    ...LeftSidePanelProps,
+                    id: VuuShellLocation.SidePanel
+                }),
+                /*#__PURE__*/ jsxs(Flexbox, {
+                    className: "vuuShell-content",
+                    style: {
+                        flex: 1,
+                        flexDirection: "column"
+                    },
+                    children: [
+                        appHeader,
+                        /*#__PURE__*/ jsx(LayoutContainer, {
+                            id: VuuShellLocation.WorkspaceContainer,
+                            style: {
+                                flex: 1
+                            }
+                        }, "main-content")
+                    ]
+                }),
+                /*#__PURE__*/ jsx(ContextPanel, {
+                    id: VuuShellLocation.ContextPanel,
+                    overlay: true
                 })
-            }),
-            /*#__PURE__*/ jsx(GridLayoutItem, {
-                id: "vuu-shell-header",
-                style: {
-                    gridArea: "1/2/2/3"
-                },
-                children: appHeader
-            }),
-            /*#__PURE__*/ jsx(GridLayoutItem, {
-                className: "vuuShell-content",
-                id: "vuu-shell-workspace-host",
-                style: {
-                    gridArea: "2/2/3/3"
-                },
-                children: workspaceHost
-            }),
-            /*#__PURE__*/ jsx(GridLayoutItem, {
-                id: "vuu-shell-context",
-                style: {
-                    gridArea: "1/3/3/4"
-                },
-                children: /*#__PURE__*/ jsx(ApplicationSettingsContextPanel, {})
-            })
-        ]
-    });
-};
+            ]
+        }), [
+        LeftSidePanelProps,
+        appHeader,
+        htmlAttributes
+    ]);
 export { useFullHeightLeftPanel };