@vuu-ui/vuu-shell 4.1.0 → 5.0.0-alpha.2

package/src/left-nav/LeftNav.js

@@ -1,17 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { VuuLogo } from "@vuu-ui/vuu-icons";
-import { Stack, useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
-import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
+import { GridLayout, GridLayoutItem } from "@vuu-ui/grid-layout";
+import { IconButton, 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, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { FeatureList } from "../feature-list/index.js";
-import { LayoutList } from "../workspace-management/index.js";
+import { LayoutList, useWorkspace } 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";
@@ -32,8 +31,7 @@ const byModule = (f1, f2)=>{
     throw Error("Invalid tableFeature");
 };
 const LeftNav_LeftNav = (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 { "data-path": path, defaultExpanded = true, defaultActiveTabIndex = 0, onActiveChange, onTogglePrimaryMenu, onWidthChange, sizeCollapsed = 80, sizeContent = 300, sizeExpanded = 240, style: styleProp, ...htmlAttributes } = props;
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-left-nav",
@@ -41,20 +39,45 @@ 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: defaultActiveTabIndex,
-        expanded: defaultExpanded
+        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
+    ]);
     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] = [];
-                return {
-                    ...acc,
-                    [key]: acc[key].concat(filterTableFeature)
-                };
+                acc[key].push(filterTableFeature);
+                return acc;
             }
         }, {}), [
         tableFeatures
@@ -67,48 +90,50 @@ const LeftNav_LeftNav = (props)=>{
         sizeContent,
         sizeExpanded
     ]);
+    useEffect(()=>{
+        onWidthChange?.(getFullWidth(visibleNavState.activeTabIndex, visibleNavState.expanded));
+    }, [
+        getFullWidth,
+        onWidthChange,
+        visibleNavState
+    ]);
     const handleTabSelection = useCallback((activeTabIndex)=>{
-        const { activeTabIndex: currentIndex, expanded } = navState;
+        const { activeTabIndex: currentIndex, expanded } = visibleNavState;
         const newState = {
             activeTabIndex,
-            expanded
+            expanded,
+            scopeIdentity
         };
         setNavState(newState);
-        if (0 === activeTabIndex || 0 === currentIndex) {
-            const width = getFullWidth(activeTabIndex, expanded);
-            dispatch({
-                type: "layout-resize",
-                path: "#vuu-side-panel",
-                size: width
-            });
-        }
+        getFullWidth(activeTabIndex, expanded);
+        setApplicationSetting("leftNav.activeTabIndex", activeTabIndex);
         onActiveChange?.(activeTabIndex);
     }, [
-        dispatch,
         getFullWidth,
-        navState,
-        onActiveChange
+        onActiveChange,
+        scopeIdentity,
+        setApplicationSetting,
+        visibleNavState
     ]);
-    const displayStatus = getDisplayStatus(navState.activeTabIndex, navState.expanded);
+    const displayStatus = getDisplayStatus(visibleNavState.activeTabIndex, visibleNavState.expanded);
     const toggleExpanded = useCallback(()=>{
-        const { activeTabIndex, expanded } = navState;
+        const { activeTabIndex, expanded } = visibleNavState;
         const primaryMenuExpanded = !expanded;
         const newState = {
             activeTabIndex,
-            expanded: primaryMenuExpanded
+            expanded: primaryMenuExpanded,
+            scopeIdentity
         };
         setNavState(newState);
-        dispatch({
-            type: "layout-resize",
-            path: "#vuu-side-panel",
-            size: getFullWidth(activeTabIndex, primaryMenuExpanded)
-        });
+        getFullWidth(activeTabIndex, primaryMenuExpanded);
+        setApplicationSetting("leftNav.expanded", primaryMenuExpanded);
         onTogglePrimaryMenu?.(primaryMenuExpanded);
     }, [
-        dispatch,
         getFullWidth,
-        navState,
-        onTogglePrimaryMenu
+        onTogglePrimaryMenu,
+        scopeIdentity,
+        setApplicationSetting,
+        visibleNavState
     ]);
     const style = {
         ...styleProp,
@@ -116,79 +141,93 @@ const LeftNav_LeftNav = (props)=>{
         "--nav-menu-expanded-width": `${sizeExpanded}px`,
         "--nav-menu-content-width": `${sizeContent}px`
     };
-    return /*#__PURE__*/ jsxs("div", {
+    return /*#__PURE__*/ jsx("div", {
         ...htmlAttributes,
         className: clsx(classBase, `${classBase}-${displayStatus}`),
         style: style,
-        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"
-                                }),
-                                /*#__PURE__*/ jsx(Tab, {
-                                    "data-icon": "tables",
-                                    label: "VUU TABLES"
+        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")
                                 }),
-                                /*#__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
+                                icon: displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
+                                onClick: toggleExpanded
+                            })
                         })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs(Stack, {
-                active: navState.activeTabIndex - 1,
-                className: `${classBase}-menu-secondary`,
-                showTabs: false,
-                children: [
-                    /*#__PURE__*/ jsx(FeatureList, {
+                    ]
+                }),
+                /*#__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, {
                         features: dynamicFeatures,
                         title: "VUU FEATURES"
-                    }),
-                    /*#__PURE__*/ jsx(FeatureList, {
+                    }) : 2 === visibleNavState.activeTabIndex ? /*#__PURE__*/ jsx(FeatureList, {
                         features: tableFeaturesByGroup,
                         title: "VUU TABLES"
-                    }),
-                    /*#__PURE__*/ jsx(LayoutList, {
+                    }) : 3 === visibleNavState.activeTabIndex ? /*#__PURE__*/ jsx(LayoutList, {
                         title: "MY LAYOUTS"
-                    })
-                ]
-            })
-        ]
+                    }) : null
+                })
+            ]
+        }, `${visibleNavState.expanded}-${visibleNavState.activeTabIndex}`)
     });
 };
 export { LeftNav_LeftNav as LeftNav };

package/src/module-registry/getRegisteredModules.js

@@ -0,0 +1,12 @@
+const getRegisteredModules = async (registryUrl, bearerToken)=>{
+    console.log(`getRegisteredModules ${registryUrl}`);
+    const response = await fetch(registryUrl, {
+        cache: "no-store",
+        headers: {
+            Authorization: `Bearer ${bearerToken}`
+        }
+    });
+    if (!response.ok) throw Error("bad return from module registry");
+    return await response.json();
+};
+export { getRegisteredModules };

package/src/persistence-manager/PersistenceProvider.js

@@ -1,14 +1,19 @@
 import { jsx } from "react/jsx-runtime";
+import { WorkspacePersistenceProvider, useOptionalWorkspacePersistenceService, useWorkspacePersistenceService } from "@vuu-ui/core";
 import { createContext, useContext } from "react";
 const PersistenceContext = /*#__PURE__*/ createContext({});
-const PersistenceProvider = ({ children, persistenceManager })=>/*#__PURE__*/ jsx(PersistenceContext.Provider, {
+const PersistenceProvider = ({ children, persistenceManager, workspacePersistenceService })=>/*#__PURE__*/ jsx(PersistenceContext.Provider, {
         value: {
-            persistenceManager
+            persistenceManager,
+            workspacePersistenceService
         },
-        children: children
+        children: /*#__PURE__*/ jsx(WorkspacePersistenceProvider, {
+            service: workspacePersistenceService,
+            children: children
+        })
     });
 const usePersistenceManager = ()=>{
     const { persistenceManager } = useContext(PersistenceContext);
     return persistenceManager;
 };
-export { PersistenceContext, PersistenceProvider, usePersistenceManager };
+export { PersistenceContext, PersistenceProvider, useOptionalWorkspacePersistenceService, usePersistenceManager, useWorkspacePersistenceService };

package/src/persistence-manager/index.js

@@ -3,3 +3,4 @@ export * from "./PersistenceProvider.js";
 export * from "./LocalPersistenceManager.js";
 export * from "./RemotePersistenceManager.js";
 export * from "./StaticPersistenceManager.js";
+export { LocalWorkspacePersistenceService, RemoteWorkspacePersistenceService, WorkspacePersistenceError } from "@vuu-ui/core";

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

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useWorkspace } from "../../workspace-management/index.js";
+import { ContextPanel } from "./ContextPanel.js";
+const ApplicationSettingsContextPanel = ()=>{
+    const { getApplicationSetting, setApplicationSetting } = useWorkspace();
+    const expanded = true === getApplicationSetting("applicationSettings.panelOpen");
+    const handleClose = useCallback(()=>{
+        setApplicationSetting("applicationSettings.panelOpen", false);
+    }, [
+        setApplicationSetting
+    ]);
+    return /*#__PURE__*/ jsx(ContextPanel, {
+        content: /*#__PURE__*/ jsx("div", {
+            children: "Application settings"
+        }),
+        expanded: expanded,
+        id: "vuu-context-panel",
+        onClose: handleClose,
+        overlay: true,
+        title: "Settings"
+    });
+};
+export { ApplicationSettingsContextPanel };

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

@@ -2,29 +2,30 @@ 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;
 
-  & .vuuView.vuuContextPanel-inner {
+  & .vuuContextPanel-inner {
     padding: 24px 8px 24px 18px;
   }
 }
 
 .vuuContextPanel-overlay {
-  width: 0 !important;
+  width: 0;
 }
 
-.vuuView.vuuContextPanel-inner {
+.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;
@@ -32,19 +33,18 @@ 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,14 +1,12 @@
 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 react, { useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { useCallback, useLayoutEffect, useRef } from "react";
 import ContextPanel from "./ContextPanel.css";
 const classBase = "vuuContextPanel";
-const ContextPanel_ContextPanel = ({ className: classNameProp, expanded = false, content: contentProp, id, onClose, overlay = false, title })=>{
+const ContextPanel_ContextPanel = ({ className, content, expanded = false, id, onClose, overlay = false, title })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-context-panel",
@@ -17,49 +15,33 @@ const ContextPanel_ContextPanel = ({ className: classNameProp, expanded = false,
     });
     const hideContextPanel = useHideContextPanel();
     const closeButtonRef = useRef(null);
-    const dispatchLayoutAction = useLayoutProviderDispatch();
     const handleClose = useCallback(()=>{
-        if (hideContextPanel) hideContextPanel();
-        else dispatchLayoutAction({
-            path: `#${VuuShellLocation.ContextPanel}`,
-            propName: "expanded",
-            propValue: false,
-            type: "set-prop"
-        });
+        hideContextPanel?.();
+        onClose?.();
     }, [
-        dispatchLayoutAction,
-        hideContextPanel
+        hideContextPanel,
+        onClose
     ]);
-    const handleKeyDown = useCallback((e)=>{
-        if ("Escape" === e.key) handleClose();
+    const handleKeyDown = useCallback((event)=>{
+        if ("Escape" === event.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,
-        onClose
+        expanded
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: clsx(classBase, className, "vuuScrollable", {
-            [`${classBase}-expanded`]: expanded
+            [`${classBase}-expanded`]: expanded,
+            [`${classBase}-inline`]: !overlay,
+            [`${classBase}-overlay`]: overlay
         }),
         id: id,
-        children: /*#__PURE__*/ jsxs(View, {
+        onKeyDown: handleKeyDown,
+        children: /*#__PURE__*/ jsxs("div", {
             className: `${classBase}-inner`,
-            header: false,
-            id: id,
             children: [
                 /*#__PURE__*/ jsxs("div", {
                     className: `${classBase}-header`,
@@ -70,11 +52,11 @@ const ContextPanel_ContextPanel = ({ className: classNameProp, expanded = false,
                         }),
                         /*#__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
@@ -83,7 +65,7 @@ const ContextPanel_ContextPanel = ({ className: classNameProp, expanded = false,
                 }),
                 /*#__PURE__*/ jsx("div", {
                     className: `${classBase}-content`,
-                    children: content
+                    children: expanded ? content : null
                 })
             ]
         })

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

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

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

@@ -1,44 +1,58 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Flexbox, LayoutContainer } from "@vuu-ui/vuu-layout";
-import { VuuShellLocation } from "@vuu-ui/vuu-utils";
-import { ContextPanel } from "../context-panel/index.js";
+import { GridLayout, GridLayoutItem } from "@vuu-ui/grid-layout";
+import { ApplicationSettingsContextPanel } from "../context-panel/index.js";
 import { SidePanel } from "../side-panel/index.js";
-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
-                })
+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"
             ]
-        }), [
-        LeftSidePanelProps,
-        appHeader,
-        htmlAttributes
-    ]);
+        },
+        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"
+                })
+            }),
+            /*#__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, {})
+            })
+        ]
+    });
+};
 export { useFullHeightLeftPanel };