@vuu-ui/vuu-shell 0.8.10-debug → 0.8.11-debug

package/esm/index.js

@@ -154,107 +154,8 @@ var Feature = React3.memo(RawFeature);
 Feature.displayName = "Feature";
 registerComponent("Feature", Feature, "view");
 
-// src/layout-config/use-layout-config.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useState as useState2 } from "react";
-
-// src/layout-config/local-config.ts
-import { resolveJSONPath } from "@vuu-ui/vuu-layout";
-var loadLocalConfig = (saveUrl, user, id = "latest") => new Promise((resolve, reject) => {
-  console.log(
-    `load local config at ${saveUrl} for user ${user == null ? void 0 : user.username}, id ${id}`
-  );
-  const data = localStorage.getItem(saveUrl);
-  if (data) {
-    const layout = JSON.parse(data);
-    resolve(layout);
-  } else {
-    reject();
-  }
-});
-var saveLocalConfig = (saveUrl, user, data) => new Promise((resolve, reject) => {
-  try {
-    const layoutJson = resolveJSONPath(data, "#main-tabs.ACTIVE_CHILD");
-    console.log(layoutJson);
-    localStorage.setItem(saveUrl, JSON.stringify(data));
-    resolve(void 0);
-  } catch {
-    reject();
-  }
-});
-
-// src/layout-config/remote-config.ts
-var loadRemoteConfig = (saveUrl, user, id = "latest") => new Promise((resolve, reject) => {
-  if (user === void 0) {
-    throw Error("user mustb be provided to load remote config");
-  }
-  fetch(`${saveUrl}/${user.username}/${id}`, {}).then((response) => {
-    if (response.ok) {
-      resolve(response.json());
-    } else {
-      reject(void 0);
-    }
-  }).catch(() => {
-    reject(void 0);
-  });
-});
-var saveRemoteConfig = (saveUrl, user, data) => new Promise((resolve, reject) => {
-  if (user === void 0) {
-    throw Error("user mustb be provided to load remote config");
-  }
-  fetch(`${saveUrl}/${user.username}`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify(data)
-  }).then((response) => {
-    if (response.ok) {
-      resolve(void 0);
-    } else {
-      reject();
-    }
-  });
-});
-
-// src/layout-config/use-layout-config.ts
-var FALLBACK_LAYOUT = { type: "Placeholder" };
-var useLayoutConfig = ({
-  saveLocation,
-  saveUrl = "api/vui",
-  user,
-  // TODO this should be an error panel
-  defaultLayout = FALLBACK_LAYOUT
-}) => {
-  const [layout, _setLayout] = useState2(defaultLayout);
-  const usingRemote = saveLocation === "remote";
-  const loadConfig = usingRemote ? loadRemoteConfig : loadLocalConfig;
-  const saveConfig = usingRemote ? saveRemoteConfig : saveLocalConfig;
-  const load = useCallback2(
-    async (id = "latest") => {
-      try {
-        const layout2 = await loadConfig(saveUrl, user, id);
-        _setLayout(layout2);
-      } catch {
-        _setLayout(defaultLayout);
-      }
-    },
-    [defaultLayout, loadConfig, saveUrl, user]
-  );
-  useEffect3(() => {
-    load();
-  }, [load]);
-  const saveData = useCallback2(
-    (data) => {
-      saveConfig(saveUrl, user, data);
-    },
-    [saveConfig, saveUrl, user]
-  );
-  const loadLayoutById = useCallback2((id) => load(id), [load]);
-  return [layout, saveData, loadLayoutById];
-};
-
 // src/layout-management/SaveLayoutPanel.tsx
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState2 } from "react";
 import { Input, Button, FormField, FormFieldLabel, Text } from "@salt-ds/core";
 import { ComboBox, Checkbox, RadioButton } from "@vuu-ui/vuu-ui-controls";
 import { formatDate, takeScreenshot } from "@vuu-ui/vuu-utils";
@@ -266,18 +167,18 @@ var checkboxValues = ["Value 1", "Value 2", "Value 3"];
 var radioValues = ["Value 1", "Value 2", "Value 3"];
 var SaveLayoutPanel = (props) => {
   const { onCancel, onSave, componentId } = props;
-  const [layoutName, setLayoutName] = useState3("");
-  const [group, setGroup] = useState3("");
-  const [checkValues, setCheckValues] = useState3([]);
-  const [radioValue, setRadioValue] = useState3(radioValues[0]);
-  const [screenshot, setScreenshot] = useState3();
-  useEffect4(() => {
+  const [layoutName, setLayoutName] = useState2("");
+  const [group, setGroup] = useState2("");
+  const [checkValues, setCheckValues] = useState2([]);
+  const [radioValue, setRadioValue] = useState2(radioValues[0]);
+  const [screenshot, setScreenshot] = useState2();
+  useEffect3(() => {
     if (componentId) {
       takeScreenshot(document.getElementById(componentId)).then(
         (screenshot2) => setScreenshot(screenshot2)
       );
     }
-  }, []);
+  }, [componentId]);
   const handleSubmit = () => {
     onSave({
       name: layoutName,
@@ -295,14 +196,6 @@ var SaveLayoutPanel = (props) => {
           /* @__PURE__ */ jsx6(
             ComboBox,
             {
-              ListProps: {
-                style: {
-                  zIndex: 1e4,
-                  border: "1px solid #777C94",
-                  borderRadius: 10,
-                  boxSizing: "border-box"
-                }
-              },
               source: groups,
               allowFreeText: true,
               InputProps: {
@@ -387,37 +280,77 @@ var SaveLayoutPanel = (props) => {
 import { List } from "@vuu-ui/vuu-ui-controls";
 
 // src/layout-management/useLayoutManager.tsx
-import React4, { useState as useState4, useCallback as useCallback3, useContext, useEffect as useEffect5 } from "react";
-import { getLocalEntity, saveLocalEntity } from "@vuu-ui/vuu-filters";
-import { getUniqueId } from "@vuu-ui/vuu-utils";
+import React4, { useState as useState3, useCallback as useCallback2, useContext, useEffect as useEffect4 } from "react";
+import {
+  LocalLayoutPersistenceManager,
+  resolveJSONPath
+} from "@vuu-ui/vuu-layout";
+import { defaultLayout } from "@vuu-ui/vuu-layout/";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var LayoutManagementContext = React4.createContext({ layouts: [], saveLayout: () => {
-} });
+var persistenceManager = new LocalLayoutPersistenceManager();
+var LayoutManagementContext = React4.createContext({
+  layoutMetadata: [],
+  saveLayout: () => {
+  },
+  applicationLayout: defaultLayout,
+  saveApplicationLayout: () => {
+  },
+  loadLayoutById: () => defaultLayout
+});
 var LayoutManagementProvider = (props) => {
-  const [layouts, setLayouts] = useState4([]);
-  useEffect5(() => {
-    const layouts2 = getLocalEntity("layouts");
-    setLayouts(layouts2 || []);
+  const [layoutMetadata, setLayoutMetadata] = useState3([]);
+  const [applicationLayout, setApplicationLayout] = useState3(defaultLayout);
+  useEffect4(() => {
+    persistenceManager.loadMetadata().then((metadata) => {
+      setLayoutMetadata(metadata);
+    });
+    persistenceManager.loadApplicationLayout().then((layout) => {
+      setApplicationLayout(layout);
+    });
   }, []);
-  useEffect5(() => {
-    saveLocalEntity("layouts", layouts);
-  }, [layouts]);
-  const saveLayout = useCallback3((metadata) => {
-    const json = getLocalEntity("api/vui");
-    if (json) {
-      setLayouts((prev) => [
-        ...prev,
-        {
-          metadata: {
+  const saveApplicationLayout = useCallback2((layout) => {
+    setApplicationLayout(layout);
+    persistenceManager.saveApplicationLayout(layout);
+  }, []);
+  const saveLayout = useCallback2(
+    (metadata) => {
+      const layoutToSave = resolveJSONPath(
+        applicationLayout,
+        "#main-tabs.ACTIVE_CHILD"
+      );
+      if (layoutToSave) {
+        persistenceManager.createLayout(metadata, layoutToSave).then((generatedId) => {
+          const newMetadata = {
             ...metadata,
-            id: getUniqueId()
-          },
-          json
-        }
-      ]);
-    }
+            id: generatedId
+          };
+          setLayoutMetadata((prev) => [...prev, newMetadata]);
+        });
+      }
+    },
+    [applicationLayout]
+  );
+  const loadLayoutById = useCallback2((id) => {
+    persistenceManager.loadLayout(id).then((layoutJson) => {
+      setApplicationLayout((prev) => ({
+        ...prev,
+        children: [...prev.children || [], layoutJson]
+      }));
+    });
   }, []);
-  return /* @__PURE__ */ jsx7(LayoutManagementContext.Provider, { value: { layouts, saveLayout }, children: props.children });
+  return /* @__PURE__ */ jsx7(
+    LayoutManagementContext.Provider,
+    {
+      value: {
+        layoutMetadata,
+        saveLayout,
+        applicationLayout,
+        saveApplicationLayout,
+        loadLayoutById
+      },
+      children: props.children
+    }
+  );
 };
 var useLayoutManager = () => useContext(LayoutManagementContext);
 
@@ -425,14 +358,11 @@ var useLayoutManager = () => useContext(LayoutManagementContext);
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var classBase3 = "vuuLayoutList";
 var LayoutsList = (props) => {
-  const { layouts } = useLayoutManager();
-  const layoutMetadata = layouts.map((layout) => layout.metadata);
+  const { layoutMetadata, loadLayoutById } = useLayoutManager();
   const handleLoadLayout = (layoutId) => {
-    console.log("loading layout with id", layoutId);
-    console.log(
-      "json:",
-      layouts.find((layout) => layout.metadata.id === layoutId)
-    );
+    if (layoutId) {
+      loadLayoutById(layoutId);
+    }
   };
   const layoutsByGroup = layoutMetadata.reduce((acc, cur) => {
     if (acc[cur.group]) {
@@ -453,37 +383,35 @@ var LayoutsList = (props) => {
       {
         height: "fit-content",
         source: Object.entries(layoutsByGroup),
-        ListItem: ({ item }) => /* @__PURE__ */ jsxs4(Fragment3, { children: [
-          /* @__PURE__ */ jsx8("div", { className: `${classBase3}-groupName`, children: item == null ? void 0 : item[0] }),
-          /* @__PURE__ */ jsx8(
-            List,
-            {
-              height: "fit-content",
-              source: item == null ? void 0 : item[1],
-              ListItem: ({ item: layout }) => /* @__PURE__ */ jsxs4(
-                "div",
-                {
-                  className: `${classBase3}-layoutContainer`,
-                  onClick: () => handleLoadLayout(layout == null ? void 0 : layout.id),
-                  children: [
-                    /* @__PURE__ */ jsx8(
-                      "img",
-                      {
-                        className: `${classBase3}-screenshot`,
-                        src: layout == null ? void 0 : layout.screenshot
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs4("div", { children: [
-                      /* @__PURE__ */ jsx8("div", { className: `${classBase3}-layoutName`, children: layout == null ? void 0 : layout.name }),
-                      /* @__PURE__ */ jsx8("div", { className: `${classBase3}-layoutDetails`, children: /* @__PURE__ */ jsx8("div", { children: `${layout == null ? void 0 : layout.user}, ${layout == null ? void 0 : layout.date}` }) })
-                    ] })
-                  ]
-                },
-                layout == null ? void 0 : layout.id
-              )
-            }
-          )
-        ] })
+        ListItem: ({ item }) => {
+          if (!item)
+            return /* @__PURE__ */ jsx8(Fragment3, {});
+          const [groupName, layouts] = item;
+          return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+            /* @__PURE__ */ jsx8("div", { className: `${classBase3}-groupName`, children: groupName }),
+            layouts.map((layout) => /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                className: `${classBase3}-layoutContainer`,
+                onClick: () => handleLoadLayout(layout == null ? void 0 : layout.id),
+                children: [
+                  /* @__PURE__ */ jsx8(
+                    "img",
+                    {
+                      className: `${classBase3}-screenshot`,
+                      src: layout == null ? void 0 : layout.screenshot
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs4("div", { children: [
+                    /* @__PURE__ */ jsx8("div", { className: `${classBase3}-layoutName`, children: layout == null ? void 0 : layout.name }),
+                    /* @__PURE__ */ jsx8("div", { className: `${classBase3}-layoutDetails`, children: /* @__PURE__ */ jsx8("div", { children: `${layout == null ? void 0 : layout.user}, ${layout == null ? void 0 : layout.date}` }) })
+                  ] })
+                ]
+              },
+              layout == null ? void 0 : layout.id
+            ))
+          ] });
+        }
       }
     )
   ] });
@@ -591,7 +519,7 @@ VuuLogo.displayName = "VuuLogo";
 import { Action, Stack, useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
 import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
 import cx4 from "classnames";
-import { useCallback as useCallback4, useState as useState5 } from "react";
+import { useCallback as useCallback3, useState as useState4 } from "react";
 
 // src/feature-list/FeatureList.tsx
 import { Palette, PaletteItem } from "@vuu-ui/vuu-layout";
@@ -643,9 +571,15 @@ var DEFAULT_THEME_ATTRIBUTES = [
   "vuu-density-high",
   "light"
 ];
-var useThemeAttributes = () => {
+var useThemeAttributes = (themeAttributes) => {
   const context = useContext2(ThemeContext);
-  if (context) {
+  if (themeAttributes) {
+    return [
+      themeAttributes.themeClass,
+      themeAttributes.densityClass,
+      themeAttributes.dataMode
+    ];
+  } else if (context) {
     return [
       `${context.theme}-theme`,
       `${context.theme}-density-${context.density}`,
@@ -713,12 +647,12 @@ var LeftNav = ({
   ...htmlAttributes
 }) => {
   const dispatch = useLayoutProviderDispatch();
-  const [navState, setNavState] = useState5({
+  const [navState, setNavState] = useState4({
     activeTabIndex: 0,
     navStatus: "menu-full"
   });
   const [themeClass] = useThemeAttributes();
-  const toggleNavWidth = useCallback4(
+  const toggleNavWidth = useCallback3(
     (navStatus) => {
       switch (navStatus) {
         case "menu-icons":
@@ -745,7 +679,7 @@ var LeftNav = ({
         return "menu-full-content";
     }
   };
-  const getWidthAndStatus = useCallback4(
+  const getWidthAndStatus = useCallback3(
     (navState2, tabIndex) => {
       if (tabIndex === 0) {
         const newNavState = navState2 === "menu-full-content" ? "menu-full" : navState2 === "menu-icons-content" ? "menu-icons" : navState2;
@@ -757,7 +691,7 @@ var LeftNav = ({
     },
     [sizeCollapsed, sizeContent, sizeExpanded]
   );
-  const handleTabSelection = useCallback4(
+  const handleTabSelection = useCallback3(
     (value) => {
       const [width, navStatus] = getWidthAndStatus(navState.navStatus, value);
       setNavState({
@@ -772,7 +706,7 @@ var LeftNav = ({
     },
     [dispatch, getWidthAndStatus, navState, path]
   );
-  const toggleSize = useCallback4(() => {
+  const toggleSize = useCallback3(() => {
     const { activeTabIndex, navStatus: currentNavStatus } = navState;
     setNavState({
       activeTabIndex,
@@ -854,7 +788,7 @@ var LeftNav = ({
 };
 
 // src/login/LoginPanel.tsx
-import { useState as useState6 } from "react";
+import { useState as useState5 } from "react";
 import { Button as Button2, FormField as FormField2, FormFieldLabel as FormFieldLabel2, Input as Input2 } from "@salt-ds/core";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var classBase6 = "vuuLoginPanel";
@@ -862,8 +796,8 @@ var LoginPanel = ({
   requirePassword = true,
   onSubmit
 }) => {
-  const [username, setUserName] = useState6("");
-  const [password, setPassword] = useState6("");
+  const [username, setUserName] = useState5("");
+  const [password, setPassword] = useState5("");
   const login = () => {
     onSubmit(username, password);
   };
@@ -932,11 +866,11 @@ var logout = (loginUrl) => {
 
 // src/session-editing-form/SessionEditingForm.tsx
 import {
-  useCallback as useCallback5,
-  useEffect as useEffect6,
+  useCallback as useCallback4,
+  useEffect as useEffect5,
   useMemo,
   useRef,
-  useState as useState7
+  useState as useState6
 } from "react";
 import cx5 from "classnames";
 import { useIdMemo } from "@salt-ds/core";
@@ -1027,8 +961,8 @@ var SessionEditingForm = ({
   schema,
   ...htmlAttributes
 }) => {
-  const [values, setValues] = useState7();
-  const [errorMessage, setErrorMessage] = useState7("");
+  const [values, setValues] = useState6();
+  const [errorMessage, setErrorMessage] = useState6("");
   const formContentRef = useRef(null);
   const initialDataRef = useRef();
   const dataStatusRef = useRef(Status.uninitialised);
@@ -1060,7 +994,7 @@ var SessionEditingForm = ({
     return ds;
   }, [dataSourceProp, schema]);
   const id = useIdMemo(idProp);
-  const handleChange = useCallback5(
+  const handleChange = useCallback4(
     (evt) => {
       const [field, value] = getFieldNameAndValue(evt);
       const { type } = getField(fields, field);
@@ -1077,7 +1011,7 @@ var SessionEditingForm = ({
     },
     [fields]
   );
-  const handleBlur = useCallback5(
+  const handleBlur = useCallback4(
     (evt) => {
       const [field, value] = getFieldNameAndValue(evt);
       const { type } = getField(fields, field);
@@ -1094,7 +1028,7 @@ var SessionEditingForm = ({
     },
     [dataSource, fields, keyField, values]
   );
-  const applyAction = useCallback5(
+  const applyAction = useCallback4(
     (action) => {
       if (typeof action === "object" && action !== null) {
         if ("type" in action && action.type === "CLOSE_DIALOG_ACTION") {
@@ -1104,7 +1038,7 @@ var SessionEditingForm = ({
     },
     [onClose]
   );
-  const handleSubmit = useCallback5(async () => {
+  const handleSubmit = useCallback4(async () => {
     const response = await dataSource.menuRpcCall({
       type: "VP_EDIT_SUBMIT_FORM_RPC"
     });
@@ -1114,7 +1048,7 @@ var SessionEditingForm = ({
       applyAction(response.action);
     }
   }, [applyAction, dataSource]);
-  const handleKeyDown = useCallback5(
+  const handleKeyDown = useCallback4(
     (evt) => {
       if (evt.key === "Enter" && dataStatusRef.current === Status.changed) {
         handleSubmit();
@@ -1122,7 +1056,7 @@ var SessionEditingForm = ({
     },
     [handleSubmit]
   );
-  const handleCancel = useCallback5(() => {
+  const handleCancel = useCallback4(() => {
     onClose();
   }, [onClose]);
   const getFormControl = (field) => {
@@ -1145,7 +1079,7 @@ var SessionEditingForm = ({
       );
     }
   };
-  useEffect6(() => {
+  useEffect5(() => {
     if (formContentRef.current) {
       const firstInput = formContentRef.current.querySelector(
         "input"
@@ -1158,7 +1092,7 @@ var SessionEditingForm = ({
       }
     }
   }, []);
-  useEffect6(() => {
+  useEffect5(() => {
     return () => {
       if (dataSource) {
         dataSource.unsubscribe();
@@ -1220,8 +1154,8 @@ var SessionEditingForm = ({
 import { connectToServer } from "@vuu-ui/vuu-data";
 import cx9 from "classnames";
 import {
-  useCallback as useCallback11,
-  useEffect as useEffect8,
+  useCallback as useCallback10,
+  useEffect as useEffect7,
   useRef as useRef3
 } from "react";
 import {
@@ -1230,7 +1164,7 @@ import {
 } from "@vuu-ui/vuu-layout";
 
 // src/app-header/AppHeader.tsx
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback7 } from "react";
 
 // src/user-profile/UserProfile.tsx
 import { Button as Button5 } from "@salt-ds/core";
@@ -1244,9 +1178,9 @@ import { Button as Button4 } from "@salt-ds/core";
 import { ExportIcon } from "@salt-ds/icons";
 import {
   forwardRef,
-  useCallback as useCallback6,
-  useEffect as useEffect7,
-  useState as useState8
+  useCallback as useCallback5,
+  useEffect as useEffect6,
+  useState as useState7
 } from "react";
 
 // src/get-layout-history.ts
@@ -1268,8 +1202,8 @@ var HistoryListItem = (props) => {
   return /* @__PURE__ */ jsx15(ListItem, { ...props });
 };
 var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
-  const [history, setHistory] = useState8([]);
-  useEffect7(() => {
+  const [history, setHistory] = useState7([]);
+  useEffect6(() => {
     async function getHistory() {
       const history2 = await getLayoutHistory(user);
       const sortedHistory = history2.filter((item) => item.id !== "latest").sort(byLastUpdate).map(({ id, lastUpdate }) => ({
@@ -1282,7 +1216,7 @@ var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, lay
     }
     getHistory();
   }, [user]);
-  const handleHisorySelected = useCallback6(
+  const handleHisorySelected = useCallback5(
     (evt, selected2) => {
       if (selected2) {
         onNavigate(selected2.id);
@@ -1290,7 +1224,7 @@ var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, lay
     },
     [onNavigate]
   );
-  const handleLogout = useCallback6(() => {
+  const handleLogout = useCallback5(() => {
     logout(loginUrl);
   }, [loginUrl]);
   const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
@@ -1340,7 +1274,7 @@ var UserProfile = ({
 // src/theme-switch/ThemeSwitch.tsx
 import cx6 from "classnames";
 import { ToggleButton, ToggleButtonGroup, useControlled } from "@salt-ds/core";
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback6 } from "react";
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var classBase8 = "vuuThemeSwitch";
 var ThemeSwitch = ({
@@ -1356,7 +1290,7 @@ var ThemeSwitch = ({
     name: "ThemeSwitch",
     state: "mode"
   });
-  const handleChangeSecondary = useCallback7(
+  const handleChangeSecondary = useCallback6(
     (evt) => {
       const { value } = evt.target;
       setMode(value);
@@ -1395,7 +1329,7 @@ var AppHeader = ({
   ...htmlAttributes
 }) => {
   const className = cx7(classBase9, classNameProp);
-  const handleSwitchTheme = useCallback8(
+  const handleSwitchTheme = useCallback7(
     (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
     [onSwitchTheme]
   );
@@ -1419,7 +1353,7 @@ import { logger } from "@vuu-ui/vuu-utils";
 // src/shell-layouts/context-panel/ContextPanel.tsx
 import { Button as Button6 } from "@salt-ds/core";
 import cx8 from "classnames";
-import { useCallback as useCallback9, useMemo as useMemo2 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo2 } from "react";
 import {
   layoutFromJson,
   useLayoutProviderDispatch as useLayoutProviderDispatch2
@@ -1434,7 +1368,7 @@ var ContextPanel = ({
   title
 }) => {
   const dispatchLayoutAction = useLayoutProviderDispatch2();
-  const handleClose = useCallback9(() => {
+  const handleClose = useCallback8(() => {
     dispatchLayoutAction({
       path: "#context-panel",
       propName: "expanded",
@@ -1518,15 +1452,15 @@ import {
   Flexbox as Flexbox2,
   View
 } from "@vuu-ui/vuu-layout";
-import { useCallback as useCallback10, useRef as useRef2, useState as useState9 } from "react";
+import { useCallback as useCallback9, useRef as useRef2, useState as useState8 } from "react";
 import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var useInlayLeftPanel = ({
   appHeader,
   leftSidePanel
 }) => {
   const paletteView = useRef2(null);
-  const [open, setOpen] = useState9(true);
-  const handleDrawerClick = useCallback10(
+  const [open, setOpen] = useState8(true);
+  const handleDrawerClick = useCallback9(
     (e) => {
       var _a;
       const target = e.target;
@@ -1536,7 +1470,7 @@ var useInlayLeftPanel = ({
     },
     [open]
   );
-  const getDrawers = useCallback10(
+  const getDrawers = useCallback9(
     (leftSidePanel2) => {
       const drawers = [];
       drawers.push(
@@ -1603,25 +1537,10 @@ var useShellLayout = ({
 // src/shell.tsx
 import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var { error } = logger("Shell");
-var warningLayout = {
-  type: "View",
-  props: {
-    style: { height: "calc(100% - 6px)" }
-  },
-  children: [
-    {
-      props: {
-        className: "vuuShell-warningPlaceholder"
-      },
-      type: "Placeholder"
-    }
-  ]
-};
 var Shell = ({
   LayoutProps,
   children,
   className: classNameProp,
-  defaultLayout = warningLayout,
   leftSidePanel,
   leftSidePanelLayout,
   loginUrl,
@@ -1633,36 +1552,31 @@ var Shell = ({
 }) => {
   const rootRef = useRef3(null);
   const layoutId = useRef3("latest");
-  const [layout, saveLayoutConfig, loadLayoutById] = useLayoutConfig({
-    defaultLayout,
-    saveLocation,
-    saveUrl,
-    user
-  });
-  const handleLayoutChange = useCallback11(
-    (layout2, layoutChangeReason) => {
+  const { applicationLayout, saveApplicationLayout, loadLayoutById } = useLayoutManager();
+  const handleLayoutChange = useCallback10(
+    (layout, layoutChangeReason) => {
       try {
+        saveApplicationLayout(layout);
         console.log(`handle layout changed ${layoutChangeReason}`);
-        saveLayoutConfig(layout2);
       } catch {
         error == null ? void 0 : error("Failed to save layout");
       }
     },
-    [saveLayoutConfig]
+    [saveApplicationLayout]
   );
-  const handleSwitchTheme = useCallback11((mode) => {
+  const handleSwitchTheme = useCallback10((mode) => {
     if (rootRef.current) {
       rootRef.current.dataset.mode = mode;
     }
   }, []);
-  const handleNavigate = useCallback11(
+  const handleNavigate = useCallback10(
     (id) => {
       layoutId.current = id;
       loadLayoutById(id);
     },
     [loadLayoutById]
   );
-  useEffect8(() => {
+  useEffect7(() => {
     if (serverUrl && user.token) {
       connectToServer({
         authToken: user.token,
@@ -1692,7 +1606,7 @@ var Shell = ({
       LayoutProvider,
       {
         ...LayoutProps,
-        layout,
+        layout: applicationLayout,
         onLayoutChange: handleLayoutChange,
         children: /* @__PURE__ */ jsx22(
           DraggableLayout3,
@@ -1760,7 +1674,6 @@ export {
   getAuthModeFromCookies,
   logout,
   redirectToLogin,
-  useLayoutConfig,
   useLayoutManager,
   useShellContext,
   useShellLayout,