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

package/src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js

@@ -1,68 +1,58 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { DockLayout, Drawer, Flexbox, LayoutContainer, View } from "@vuu-ui/vuu-layout";
-import { VuuShellLocation } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo, useRef, useState } from "react";
-const useInlayLeftPanel = ({ SidePanelProps: LeftSidePanelProps, appHeader, htmlAttributes })=>{
-    const paletteView = useRef(null);
-    const [open, setOpen] = useState(true);
-    const handleDrawerClick = useCallback((e)=>{
-        const target = e.target;
-        if (!paletteView.current?.contains(target)) setOpen(!open);
-    }, [
-        open
-    ]);
-    return useMemo(()=>{
-        const getDrawers = (leftSidePanel)=>{
-            const drawers = [];
-            drawers.push(/*#__PURE__*/ jsx(Drawer, {
-                onClick: handleDrawerClick,
-                open: open,
-                position: "left",
-                inline: true,
-                peekaboo: true,
-                sizeOpen: 200,
-                toggleButton: "end",
-                children: /*#__PURE__*/ jsx(View, {
-                    className: "vuuShell-palette",
-                    id: "vw-app-palette",
-                    ref: paletteView,
-                    style: {
-                        height: "100%"
-                    },
-                    children: leftSidePanel
-                }, "app-palette")
-            }, "left-panel"));
-            return drawers;
-        };
-        return /*#__PURE__*/ jsxs(Flexbox, {
-            ...htmlAttributes,
-            style: {
-                ...htmlAttributes?.style,
-                flexDirection: "column"
-            },
-            children: [
-                appHeader,
-                /*#__PURE__*/ jsx(DockLayout, {
-                    style: {
-                        flex: 1
-                    },
-                    children: getDrawers(LeftSidePanelProps?.children).concat(/*#__PURE__*/ jsx(LayoutContainer, {
-                        dropTarget: true,
-                        id: VuuShellLocation.WorkspaceContainer,
-                        style: {
-                            width: "100%",
-                            height: "100%"
-                        }
-                    }, "main-content"))
-                })
+import { GridLayout, GridLayoutItem } from "@heswell/grid-layout";
+import { SidePanel } from "../side-panel/index.js";
+import { ApplicationSettingsContextPanel } from "../context-panel/index.js";
+const useInlayLeftPanel = ({ SidePanelProps, appHeader, 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,
-        handleDrawerClick,
-        htmlAttributes,
-        open
-    ]);
+        },
+        id: "vuu-shell-grid",
+        children: [
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-header",
+                style: {
+                    gridArea: "1/1/2/3"
+                },
+                children: appHeader
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-left-nav",
+                style: {
+                    gridArea: "2/1/3/2"
+                },
+                children: /*#__PURE__*/ jsx(SidePanel, {
+                    ...SidePanelProps,
+                    id: "vuu-side-panel"
+                })
+            }),
+            /*#__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 { useInlayLeftPanel };

package/src/shell-layout-templates/left-main-tabs/useLeftMainTabs.js

@@ -1,32 +1,53 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Flexbox, StackLayout } from "@vuu-ui/vuu-layout";
-import { VuuShellLocation } from "@vuu-ui/vuu-utils";
-import { useMemo } from "react";
-const useLeftMainTabs = ({ appHeader, htmlAttributes, ToolbarProps })=>{
-    if (void 0 === ToolbarProps) throw Error("LeftMainTabs layout requires ToolbarProps");
-    return useMemo(()=>/*#__PURE__*/ jsxs(Flexbox, {
-            ...htmlAttributes,
-            style: {
-                ...htmlAttributes?.style,
-                flexDirection: "column"
-            },
-            children: [
-                appHeader,
-                /*#__PURE__*/ jsx(StackLayout, {
-                    TabstripProps: {
-                        className: `${VuuShellLocation.MultiWorkspaceContainer}-tabs`
-                    },
-                    active: 0,
-                    showTabs: "left",
-                    style: {
-                        flex: 1
-                    },
-                    id: VuuShellLocation.MultiWorkspaceContainer
-                })
+import { GridLayout, GridLayoutItem } from "@heswell/grid-layout";
+import { ApplicationSettingsContextPanel } from "../context-panel/index.js";
+const useLeftMainTabs = ({ appHeader, htmlAttributes, ToolbarProps, workspaceHost })=>{
+    const { onChange: _onChange, ...gridAttributes } = htmlAttributes ?? {};
+    return /*#__PURE__*/ jsxs(GridLayout, {
+        ...gridAttributes,
+        className: `${htmlAttributes?.className ?? ""} vuuShell-staticGrid`,
+        colsAndRows: {
+            cols: [
+                `${ToolbarProps?.width ?? 48}px`,
+                "1fr",
+                "0px"
+            ],
+            rows: [
+                "40px",
+                "1fr"
             ]
-        }), [
-        appHeader,
-        htmlAttributes
-    ]);
+        },
+        id: "vuu-shell-grid",
+        children: [
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-header",
+                style: {
+                    gridArea: "1/1/2/3"
+                },
+                children: appHeader
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-toolbar",
+                style: {
+                    gridArea: "2/1/3/2"
+                },
+                children: ToolbarProps?.children
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                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 { useLeftMainTabs };

package/src/shell-layout-templates/side-panel/SidePanel.css.js

@@ -1,6 +1,8 @@
 const css = `
 .vuuShellSidePanel {
-  width: var(--shell-left-nav-size);
+  height: 100%;
+  min-width: var(--shell-left-nav-size);
+  width: auto;
   transition: width .2s ease-out;
 }
 

package/src/shell-layout-templates/simple-content-pane/useSimpleContentPane.js

@@ -1,38 +1,46 @@
 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 { useMemo } from "react";
-const useSimpleContentPane = ({ appHeader, htmlAttributes })=>useMemo(()=>/*#__PURE__*/ jsxs(Flexbox, {
-            ...htmlAttributes,
-            style: {
-                ...htmlAttributes?.style,
-                flexDirection: "row"
-            },
-            children: [
-                /*#__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
-                })
+import { GridLayout, GridLayoutItem } from "@heswell/grid-layout";
+import { ApplicationSettingsContextPanel } from "../context-panel/index.js";
+const useSimpleContentPane = ({ appHeader, htmlAttributes, workspaceHost })=>{
+    const { onChange: _onChange, ...gridAttributes } = htmlAttributes ?? {};
+    return /*#__PURE__*/ jsxs(GridLayout, {
+        ...gridAttributes,
+        className: `${htmlAttributes?.className ?? ""} vuuShell-staticGrid`,
+        colsAndRows: {
+            cols: [
+                "1fr",
+                "0px"
+            ],
+            rows: [
+                "40px",
+                "1fr"
             ]
-        }), [
-        appHeader,
-        htmlAttributes
-    ]);
+        },
+        id: "vuu-shell-grid",
+        children: [
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-header",
+                style: {
+                    gridArea: "1/1/2/2"
+                },
+                children: appHeader
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                className: "vuuShell-content",
+                id: "vuu-shell-workspace-host",
+                style: {
+                    gridArea: "2/1/3/2"
+                },
+                children: workspaceHost
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-context",
+                style: {
+                    gridArea: "1/2/3/3"
+                },
+                children: /*#__PURE__*/ jsx(ApplicationSettingsContextPanel, {})
+            })
+        ]
+    });
+};
 export { useSimpleContentPane };

package/src/shell.css.js

@@ -1,8 +1,9 @@
 const css = `
-.vuuShell {
+.vuuShell.vuuGridLayout {
   background-color: var(--vuuShell-background, var(--salt-container-primary-background));
   height: var(--vuuShell-height, 100vh);
   width: var(--vuuShell-width, 100vw);
+  padding: 0;
 
   & .left-main-tabs {
     --vuuOverflowContainer-width: 48px;
@@ -51,7 +52,89 @@ const css = `
 }
 
 .vuuShell-content {
-  padding: var(--vuuShell-content-padding, 8px);
+  padding: var(--vuuShell-content-padding, 8px 0 0 0);
+  margin: 0 8px 8px 0;
+}
+
+.vuuShell-staticGrid, .vuuWorkspaceHost, .vuuWorkspaceHost-content, .vuuWorkspaceHost-workspace {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.vuuShell-staticGrid {
+  --vuu-grid-gap: 0px;
+  overflow: hidden;
+}
+
+.vuuShell-staticGrid > .vuuGridLayoutItem {
+  border: 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.vuuShell-staticGrid > #vuu-shell-workspace-host {
+  overflow: hidden;
+}
+
+.vuuLeftNav > .vuuGridLayout {
+  --vuu-grid-gap: 0px;
+  width: max-content;
+  height: 100%;
+}
+
+.vuuLeftNav > .vuuGridLayout > .vuuGridLayoutItem {
+  border: 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.vuuWorkspaceHost {
+  flex-direction: column;
+  display: flex;
+}
+
+.vuuWorkspaceHost-content {
+  flex: auto;
+  min-height: 0;
+}
+
+.vuuWorkspaceHost-workspace[hidden] {
+  display: none;
+}
+
+.vuuWorkspaceHost-workspace {
+  position: relative;
+}
+
+.vuuWorkspaceHost-workspace > .vuuGridLayout {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.vuuWorkspaceHost-state {
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  display: flex;
+}
+
+.vuuWorkspaceHost-empty {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  position: relative;
+}
+
+.vuuWorkspaceHost-emptyGrid {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
 }
 
 

package/src/shell.js

@@ -1,108 +1,186 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { GridLayout, GridLayoutItem, GridLayoutProvider } from "@heswell/grid-layout";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
+import { ModalProvider, useAuthenticatedUser } from "@vuu-ui/core";
 import { ContextMenuProvider } from "@vuu-ui/vuu-context-menu";
-import { LayoutProvider, StackLayout } from "@vuu-ui/vuu-layout";
+import { useLostConnection } from "@vuu-ui/vuu-data-react";
 import { NotificationsProvider } from "@vuu-ui/vuu-notifications";
-import { ModalProvider } from "@vuu-ui/vuu-ui-controls";
-import { logger, registerComponent } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo } from "react";
+import { ContextPanelProvider } from "@vuu-ui/vuu-ui-controls";
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { createContext, isValidElement, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { AppHeader } from "./app-header/index.js";
 import { ApplicationProvider } from "./application-provider/index.js";
-import { LocalPersistenceManager, PersistenceProvider, usePersistenceManager } from "./persistence-manager/index.js";
-import { useShellLayout } from "./shell-layout-templates/index.js";
-import { UserSettingsPanel } from "./user-settings/index.js";
-import { WorkspaceProvider, useWorkspace, useWorkspaceContextMenuItems } from "./workspace-management/index.js";
-import { loadingJSON } from "./workspace-management/defaultWorkspaceJSON.js";
-import { useLostConnection } from "@vuu-ui/vuu-data-react";
+import { LeftNav } from "./left-nav/index.js";
+import { ContextPanel, SidePanel } from "./shell-layout-templates/index.js";
+import { WorkspaceHost, WorkspaceProvider, createWorkspaceComponentRegistries, shellWorkspaceComponentRegistrations, useWorkspace, useWorkspaceContextMenuItems } from "./workspace-management/index.js";
 import shell from "./shell.css";
-registerComponent("ApplicationSettings", UserSettingsPanel, "view");
-if ("production" === process.env.NODE_ENV) {
-    if ("function" != typeof StackLayout) console.warn("StackLayout module not loaded, will be unable to deserialize from layout JSON");
-}
-const { error: error } = logger("Shell");
 const defaultAppHeader = /*#__PURE__*/ jsx(AppHeader, {});
-const getAppHeader = (shellLayoutProps)=>shellLayoutProps?.appHeader ?? defaultAppHeader;
-const defaultHTMLAttributes = {
-    className: "vuuShell"
+const defaultRegistries = createWorkspaceComponentRegistries(shellWorkspaceComponentRegistrations);
+const ShellContextPanelStateContext = /*#__PURE__*/ createContext(void 0);
+const StaticContextPanel = ()=>{
+    const contextPanel = useContext(ShellContextPanelStateContext);
+    return /*#__PURE__*/ jsx(ContextPanel, {
+        content: contextPanel?.content,
+        expanded: void 0 !== contextPanel,
+        id: VuuShellLocation.ContextPanel,
+        overlay: true,
+        title: contextPanel?.title
+    });
 };
-const getHTMLAttributes = (props)=>{
-    if (props?.htmlAttributes) return {
-        ...defaultHTMLAttributes,
-        ...props.htmlAttributes
-    };
-    return defaultHTMLAttributes;
+const StaticShellLayout = ({ appHeader = defaultAppHeader, className, leftNavWidth: initialLeftNavWidth = 200, style, workspaceHost = /*#__PURE__*/ jsx(WorkspaceHost, {}), ...htmlAttributes })=>{
+    const { setApplicationSetting } = useWorkspace();
+    const [leftNavWidth, setLeftNavWidth] = useState(initialLeftNavWidth);
+    const [contextPanel, setContextPanel] = useState();
+    const contextPanelTrigger = useRef(null);
+    const handleLeftNavWidthChange = useCallback((width)=>{
+        setLeftNavWidth(width);
+    }, []);
+    const showContextPanel = useCallback((content, title)=>{
+        if (!/*#__PURE__*/ isValidElement(content)) throw new Error(`Context panel component "${content}" must be provided as a React element`);
+        contextPanelTrigger.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        setContextPanel({
+            content,
+            title
+        });
+    }, []);
+    const hideContextPanel = useCallback(()=>{
+        setContextPanel(void 0);
+        setApplicationSetting("applicationSettings.panelOpen", false).catch(()=>void 0);
+        requestAnimationFrame(()=>contextPanelTrigger.current?.focus());
+    }, [
+        setApplicationSetting
+    ]);
+    return /*#__PURE__*/ jsx(ContextPanelProvider, {
+        hideContextPanel: hideContextPanel,
+        showContextPanel: showContextPanel,
+        children: /*#__PURE__*/ jsx(ShellContextPanelStateContext.Provider, {
+            value: contextPanel,
+            children: /*#__PURE__*/ jsxs(GridLayout, {
+                ...htmlAttributes,
+                className: clsx("vuuShell", "vuuShell-staticGrid", className),
+                colsAndRows: {
+                    cols: [
+                        `${initialLeftNavWidth}px`,
+                        "1fr",
+                        "0px"
+                    ],
+                    rows: [
+                        "48px",
+                        "1fr"
+                    ]
+                },
+                "full-page": true,
+                id: "vuu-shell-grid",
+                style: {
+                    ...style,
+                    gridTemplateColumns: `${leftNavWidth}px minmax(0, 1fr) 0px`
+                },
+                children: [
+                    /*#__PURE__*/ jsx(GridLayoutItem, {
+                        id: "vuu-shell-left-nav",
+                        style: {
+                            gridArea: "1/1/3/2"
+                        },
+                        children: /*#__PURE__*/ jsx(SidePanel, {
+                            id: "vuu-side-panel",
+                            sizeOpen: initialLeftNavWidth,
+                            children: /*#__PURE__*/ jsx(LeftNav, {
+                                onWidthChange: handleLeftNavWidthChange,
+                                sizeExpanded: initialLeftNavWidth
+                            })
+                        })
+                    }),
+                    /*#__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-panel-host",
+                        style: {
+                            gridArea: "1/3/3/4",
+                            overflow: "visible",
+                            position: "relative"
+                        },
+                        children: /*#__PURE__*/ jsx(StaticContextPanel, {})
+                    })
+                ]
+            })
+        })
+    });
 };
-const VuuApplication = ({ shellLayoutProps: ShellLayoutProps, children })=>{
+const VuuApplication = ({ appHeader, children, htmlAttributes, leftNavWidth })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-shell",
         css: shell,
         window: targetWindow
     });
-    const { workspaceJSON, saveApplicationLayout } = useWorkspace();
     const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();
-    const handleLayoutChange = useCallback((layout)=>{
-        try {
-            saveApplicationLayout(layout);
-        } catch  {
-            error?.("Failed to save layout");
-        }
-    }, [
-        saveApplicationLayout
-    ]);
-    const isLayoutLoading = workspaceJSON === loadingJSON;
-    const initialLayout = useShellLayout({
-        ...ShellLayoutProps,
-        appHeader: getAppHeader(ShellLayoutProps),
-        htmlAttributes: getHTMLAttributes(ShellLayoutProps)
-    });
     useLostConnection();
-    return isLayoutLoading ? null : /*#__PURE__*/ jsxs(ContextMenuProvider, {
+    return /*#__PURE__*/ jsxs(ContextMenuProvider, {
         menuActionHandler: handleMenuAction,
         menuBuilder: buildMenuOptions,
         children: [
-            /*#__PURE__*/ jsx(LayoutProvider, {
-                workspaceJSON: workspaceJSON,
-                onLayoutChange: handleLayoutChange,
-                children: initialLayout
+            /*#__PURE__*/ jsx(GridLayoutProvider, {
+                children: /*#__PURE__*/ jsx(StaticShellLayout, {
+                    ...htmlAttributes,
+                    appHeader: appHeader,
+                    leftNavWidth: leftNavWidth
+                })
             }),
             children
         ]
     });
 };
-const Shell = ({ logout, user, userSettingsSchema, workspaceProps, ...props })=>{
-    const persistenceManager = usePersistenceManager();
-    const localPersistenceManager = useMemo(()=>{
-        if (persistenceManager) return;
-        console.log(`No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`);
-        return new LocalPersistenceManager(`vuu/${user.username}`);
-    }, [
-        persistenceManager,
-        user.username
+const Shell = ({ appHeader, children, leftNavWidth, logout, saveUrl: _saveUrl, serverUrl: _serverUrl, shellLayoutProps, workspaceProps, ...htmlAttributes })=>{
+    const user = useAuthenticatedUser();
+    const resolvedWorkspaceProps = useMemo(()=>({
+            ...workspaceProps,
+            componentRenderers: workspaceProps?.componentRenderers ?? defaultRegistries.renderers,
+            settingsCodecs: workspaceProps?.settingsCodecs ?? defaultRegistries.settingsCodecs
+        }), [
+        workspaceProps
     ]);
-    const shellProviders = /*#__PURE__*/ jsx(ApplicationProvider, {
+    const resolvedHtmlAttributes = {
+        ...htmlAttributes,
+        ...shellLayoutProps?.htmlAttributes,
+        className: clsx(htmlAttributes.className, shellLayoutProps?.htmlAttributes?.className),
+        style: {
+            ...htmlAttributes.style,
+            ...shellLayoutProps?.htmlAttributes?.style
+        }
+    };
+    return /*#__PURE__*/ jsx(ApplicationProvider, {
         density: "high",
         logout: logout,
         theme: "vuu-theme",
-        user: user,
-        userSettingsSchema: userSettingsSchema,
-        children: /*#__PURE__*/ jsx(WorkspaceProvider, {
-            ...workspaceProps,
-            children: /*#__PURE__*/ jsx(ModalProvider, {
-                children: /*#__PURE__*/ jsx(NotificationsProvider, {
+        children: /*#__PURE__*/ jsx(ModalProvider, {
+            children: /*#__PURE__*/ jsx(NotificationsProvider, {
+                children: /*#__PURE__*/ jsx(WorkspaceProvider, {
+                    ...resolvedWorkspaceProps,
+                    userId: user.userName,
                     children: /*#__PURE__*/ jsx(VuuApplication, {
-                        ...props,
-                        user: user
+                        appHeader: appHeader ?? shellLayoutProps?.appHeader,
+                        htmlAttributes: resolvedHtmlAttributes,
+                        leftNavWidth: leftNavWidth ?? shellLayoutProps?.SidePanelProps?.sizeOpen,
+                        children: children
                     })
                 })
             })
         })
     });
-    if (persistenceManager) return shellProviders;
-    return /*#__PURE__*/ jsx(PersistenceProvider, {
-        persistenceManager: localPersistenceManager,
-        children: shellProviders
-    });
 };
-export { Shell };
+export { Shell, StaticShellLayout };