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

package/cjs/index.js

@@ -54,7 +54,6 @@ __export(src_exports, {
   getAuthModeFromCookies: () => getAuthModeFromCookies,
   logout: () => logout,
   redirectToLogin: () => redirectToLogin,
-  useLayoutConfig: () => useLayoutConfig,
   useLayoutManager: () => useLayoutManager,
   useShellContext: () => useShellContext,
   useShellLayout: () => useShellLayout,
@@ -218,107 +217,8 @@ var Feature = import_react4.default.memo(RawFeature);
 Feature.displayName = "Feature";
 (0, import_vuu_layout.registerComponent)("Feature", Feature, "view");
 
-// src/layout-config/use-layout-config.ts
-var import_react5 = require("react");
-
-// src/layout-config/local-config.ts
-var import_vuu_layout2 = require("@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 = (0, import_vuu_layout2.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] = (0, import_react5.useState)(defaultLayout);
-  const usingRemote = saveLocation === "remote";
-  const loadConfig = usingRemote ? loadRemoteConfig : loadLocalConfig;
-  const saveConfig = usingRemote ? saveRemoteConfig : saveLocalConfig;
-  const load = (0, import_react5.useCallback)(
-    async (id = "latest") => {
-      try {
-        const layout2 = await loadConfig(saveUrl, user, id);
-        _setLayout(layout2);
-      } catch {
-        _setLayout(defaultLayout);
-      }
-    },
-    [defaultLayout, loadConfig, saveUrl, user]
-  );
-  (0, import_react5.useEffect)(() => {
-    load();
-  }, [load]);
-  const saveData = (0, import_react5.useCallback)(
-    (data) => {
-      saveConfig(saveUrl, user, data);
-    },
-    [saveConfig, saveUrl, user]
-  );
-  const loadLayoutById = (0, import_react5.useCallback)((id) => load(id), [load]);
-  return [layout, saveData, loadLayoutById];
-};
-
 // src/layout-management/SaveLayoutPanel.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_core = require("@salt-ds/core");
 var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils = require("@vuu-ui/vuu-utils");
@@ -330,18 +230,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] = (0, import_react6.useState)("");
-  const [group, setGroup] = (0, import_react6.useState)("");
-  const [checkValues, setCheckValues] = (0, import_react6.useState)([]);
-  const [radioValue, setRadioValue] = (0, import_react6.useState)(radioValues[0]);
-  const [screenshot, setScreenshot] = (0, import_react6.useState)();
-  (0, import_react6.useEffect)(() => {
+  const [layoutName, setLayoutName] = (0, import_react5.useState)("");
+  const [group, setGroup] = (0, import_react5.useState)("");
+  const [checkValues, setCheckValues] = (0, import_react5.useState)([]);
+  const [radioValue, setRadioValue] = (0, import_react5.useState)(radioValues[0]);
+  const [screenshot, setScreenshot] = (0, import_react5.useState)();
+  (0, import_react5.useEffect)(() => {
     if (componentId) {
       (0, import_vuu_utils.takeScreenshot)(document.getElementById(componentId)).then(
         (screenshot2) => setScreenshot(screenshot2)
       );
     }
-  }, []);
+  }, [componentId]);
   const handleSubmit = () => {
     onSave({
       name: layoutName,
@@ -359,14 +259,6 @@ var SaveLayoutPanel = (props) => {
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_vuu_ui_controls.ComboBox,
             {
-              ListProps: {
-                style: {
-                  zIndex: 1e4,
-                  border: "1px solid #777C94",
-                  borderRadius: 10,
-                  boxSizing: "border-box"
-                }
-              },
               source: groups,
               allowFreeText: true,
               InputProps: {
@@ -451,52 +343,86 @@ var SaveLayoutPanel = (props) => {
 var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
 
 // src/layout-management/useLayoutManager.tsx
-var import_react7 = __toESM(require("react"));
-var import_vuu_filters = require("@vuu-ui/vuu-filters");
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_react6 = __toESM(require("react"));
+var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
+var import_vuu_layout3 = require("@vuu-ui/vuu-layout/");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var LayoutManagementContext = import_react7.default.createContext({ layouts: [], saveLayout: () => {
-} });
+var persistenceManager = new import_vuu_layout2.LocalLayoutPersistenceManager();
+var LayoutManagementContext = import_react6.default.createContext({
+  layoutMetadata: [],
+  saveLayout: () => {
+  },
+  applicationLayout: import_vuu_layout3.defaultLayout,
+  saveApplicationLayout: () => {
+  },
+  loadLayoutById: () => import_vuu_layout3.defaultLayout
+});
 var LayoutManagementProvider = (props) => {
-  const [layouts, setLayouts] = (0, import_react7.useState)([]);
-  (0, import_react7.useEffect)(() => {
-    const layouts2 = (0, import_vuu_filters.getLocalEntity)("layouts");
-    setLayouts(layouts2 || []);
+  const [layoutMetadata, setLayoutMetadata] = (0, import_react6.useState)([]);
+  const [applicationLayout, setApplicationLayout] = (0, import_react6.useState)(import_vuu_layout3.defaultLayout);
+  (0, import_react6.useEffect)(() => {
+    persistenceManager.loadMetadata().then((metadata) => {
+      setLayoutMetadata(metadata);
+    });
+    persistenceManager.loadApplicationLayout().then((layout) => {
+      setApplicationLayout(layout);
+    });
   }, []);
-  (0, import_react7.useEffect)(() => {
-    (0, import_vuu_filters.saveLocalEntity)("layouts", layouts);
-  }, [layouts]);
-  const saveLayout = (0, import_react7.useCallback)((metadata) => {
-    const json = (0, import_vuu_filters.getLocalEntity)("api/vui");
-    if (json) {
-      setLayouts((prev) => [
-        ...prev,
-        {
-          metadata: {
+  const saveApplicationLayout = (0, import_react6.useCallback)((layout) => {
+    setApplicationLayout(layout);
+    persistenceManager.saveApplicationLayout(layout);
+  }, []);
+  const saveLayout = (0, import_react6.useCallback)(
+    (metadata) => {
+      const layoutToSave = (0, import_vuu_layout2.resolveJSONPath)(
+        applicationLayout,
+        "#main-tabs.ACTIVE_CHILD"
+      );
+      if (layoutToSave) {
+        persistenceManager.createLayout(metadata, layoutToSave).then((generatedId) => {
+          const newMetadata = {
             ...metadata,
-            id: (0, import_vuu_utils2.getUniqueId)()
-          },
-          json
-        }
-      ]);
-    }
+            id: generatedId
+          };
+          setLayoutMetadata((prev) => [...prev, newMetadata]);
+        });
+      }
+    },
+    [applicationLayout]
+  );
+  const loadLayoutById = (0, import_react6.useCallback)((id) => {
+    persistenceManager.loadLayout(id).then((layoutJson) => {
+      setApplicationLayout((prev) => ({
+        ...prev,
+        children: [...prev.children || [], layoutJson]
+      }));
+    });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LayoutManagementContext.Provider, { value: { layouts, saveLayout }, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    LayoutManagementContext.Provider,
+    {
+      value: {
+        layoutMetadata,
+        saveLayout,
+        applicationLayout,
+        saveApplicationLayout,
+        loadLayoutById
+      },
+      children: props.children
+    }
+  );
 };
-var useLayoutManager = () => (0, import_react7.useContext)(LayoutManagementContext);
+var useLayoutManager = () => (0, import_react6.useContext)(LayoutManagementContext);
 
 // src/layout-management/LayoutList.tsx
 var import_jsx_runtime8 = require("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]) {
@@ -517,46 +443,44 @@ var LayoutsList = (props) => {
       {
         height: "fit-content",
         source: Object.entries(layoutsByGroup),
-        ListItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase3}-groupName`, children: item == null ? void 0 : item[0] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            import_vuu_ui_controls2.List,
-            {
-              height: "fit-content",
-              source: item == null ? void 0 : item[1],
-              ListItem: ({ item: layout }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                "div",
-                {
-                  className: `${classBase3}-layoutContainer`,
-                  onClick: () => handleLoadLayout(layout == null ? void 0 : layout.id),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "img",
-                      {
-                        className: `${classBase3}-screenshot`,
-                        src: layout == null ? void 0 : layout.screenshot
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase3}-layoutName`, children: layout == null ? void 0 : layout.name }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase3}-layoutDetails`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {});
+          const [groupName, layouts] = item;
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase3}-groupName`, children: groupName }),
+            layouts.map((layout) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              "div",
+              {
+                className: `${classBase3}-layoutContainer`,
+                onClick: () => handleLoadLayout(layout == null ? void 0 : layout.id),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    "img",
+                    {
+                      className: `${classBase3}-screenshot`,
+                      src: layout == null ? void 0 : layout.screenshot
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase3}-layoutName`, children: layout == null ? void 0 : layout.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase3}-layoutDetails`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: `${layout == null ? void 0 : layout.user}, ${layout == null ? void 0 : layout.date}` }) })
+                  ] })
+                ]
+              },
+              layout == null ? void 0 : layout.id
+            ))
+          ] });
+        }
       }
     )
   ] });
 };
 
 // ../vuu-icons/src/VuuLogo.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var VuuLogo = (0, import_react8.memo)(() => {
+var VuuLogo = (0, import_react7.memo)(() => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "svg",
     {
@@ -652,13 +576,13 @@ var VuuLogo = (0, import_react8.memo)(() => {
 VuuLogo.displayName = "VuuLogo";
 
 // src/left-nav/LeftNav.tsx
-var import_vuu_layout4 = require("@vuu-ui/vuu-layout");
+var import_vuu_layout5 = require("@vuu-ui/vuu-layout");
 var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
 var import_classnames4 = __toESM(require("classnames"));
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/feature-list/FeatureList.tsx
-var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
+var import_vuu_layout4 = require("@vuu-ui/vuu-layout");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var classBase4 = "vuuFeatureList";
 var FeatureList = ({
@@ -670,8 +594,8 @@ var FeatureList = ({
   console.log({ features });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ...htmlAttributes, className: classBase4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${classBase4}-header`, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_vuu_layout3.Palette, { orientation: "vertical", ViewProps, children: features.map((featureProps, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_vuu_layout3.PaletteItem,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_vuu_layout4.Palette, { orientation: "vertical", ViewProps, children: features.map((featureProps, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_vuu_layout4.PaletteItem,
       {
         closeable: true,
         label: featureProps.title,
@@ -686,13 +610,13 @@ var FeatureList = ({
 };
 
 // src/theme-provider/ThemeProvider.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_classnames3 = __toESM(require("classnames"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var DEFAULT_DENSITY2 = "medium";
 var DEFAULT_THEME = "salt-theme";
 var DEFAULT_THEME_MODE = "light";
-var ThemeContext = (0, import_react9.createContext)({
+var ThemeContext = (0, import_react8.createContext)({
   density: "high",
   theme: "vuu",
   themeMode: "light"
@@ -702,9 +626,15 @@ var DEFAULT_THEME_ATTRIBUTES = [
   "vuu-density-high",
   "light"
 ];
-var useThemeAttributes = () => {
-  const context = (0, import_react9.useContext)(ThemeContext);
-  if (context) {
+var useThemeAttributes = (themeAttributes) => {
+  const context = (0, import_react8.useContext)(ThemeContext);
+  if (themeAttributes) {
+    return [
+      themeAttributes.themeClass,
+      themeAttributes.densityClass,
+      themeAttributes.dataMode
+    ];
+  } else if (context) {
     return [
       `${context.theme}-theme`,
       `${context.theme}-density-${context.density}`,
@@ -715,8 +645,8 @@ var useThemeAttributes = () => {
 };
 var createThemedChildren = (children, theme, themeMode, density) => {
   var _a;
-  if ((0, import_react9.isValidElement)(children)) {
-    return (0, import_react9.cloneElement)(children, {
+  if ((0, import_react8.isValidElement)(children)) {
+    return (0, import_react8.cloneElement)(children, {
       className: (0, import_classnames3.default)(
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         (_a = children.props) == null ? void 0 : _a.className,
@@ -748,7 +678,7 @@ var ThemeProvider = ({
     density: inheritedDensity,
     themeMode: inheritedThemeMode,
     theme: inheritedTheme
-  } = (0, import_react9.useContext)(ThemeContext);
+  } = (0, import_react8.useContext)(ThemeContext);
   const density = (_a = densityProp != null ? densityProp : inheritedDensity) != null ? _a : DEFAULT_DENSITY2;
   const themeMode = (_b = themeModeProp != null ? themeModeProp : inheritedThemeMode) != null ? _b : DEFAULT_THEME_MODE;
   const theme = (_c = themeProp != null ? themeProp : inheritedTheme) != null ? _c : DEFAULT_THEME;
@@ -771,13 +701,13 @@ var LeftNav = ({
   tableFeatures,
   ...htmlAttributes
 }) => {
-  const dispatch = (0, import_vuu_layout4.useLayoutProviderDispatch)();
-  const [navState, setNavState] = (0, import_react10.useState)({
+  const dispatch = (0, import_vuu_layout5.useLayoutProviderDispatch)();
+  const [navState, setNavState] = (0, import_react9.useState)({
     activeTabIndex: 0,
     navStatus: "menu-full"
   });
   const [themeClass] = useThemeAttributes();
-  const toggleNavWidth = (0, import_react10.useCallback)(
+  const toggleNavWidth = (0, import_react9.useCallback)(
     (navStatus) => {
       switch (navStatus) {
         case "menu-icons":
@@ -804,7 +734,7 @@ var LeftNav = ({
         return "menu-full-content";
     }
   };
-  const getWidthAndStatus = (0, import_react10.useCallback)(
+  const getWidthAndStatus = (0, import_react9.useCallback)(
     (navState2, tabIndex) => {
       if (tabIndex === 0) {
         const newNavState = navState2 === "menu-full-content" ? "menu-full" : navState2 === "menu-icons-content" ? "menu-icons" : navState2;
@@ -816,7 +746,7 @@ var LeftNav = ({
     },
     [sizeCollapsed, sizeContent, sizeExpanded]
   );
-  const handleTabSelection = (0, import_react10.useCallback)(
+  const handleTabSelection = (0, import_react9.useCallback)(
     (value) => {
       const [width, navStatus] = getWidthAndStatus(navState.navStatus, value);
       setNavState({
@@ -824,21 +754,21 @@ var LeftNav = ({
         navStatus
       });
       dispatch({
-        type: import_vuu_layout4.Action.LAYOUT_RESIZE,
+        type: import_vuu_layout5.Action.LAYOUT_RESIZE,
         path,
         size: width
       });
     },
     [dispatch, getWidthAndStatus, navState, path]
   );
-  const toggleSize = (0, import_react10.useCallback)(() => {
+  const toggleSize = (0, import_react9.useCallback)(() => {
     const { activeTabIndex, navStatus: currentNavStatus } = navState;
     setNavState({
       activeTabIndex,
       navStatus: toggleNavStatus(currentNavStatus)
     });
     dispatch({
-      type: import_vuu_layout4.Action.LAYOUT_RESIZE,
+      type: import_vuu_layout5.Action.LAYOUT_RESIZE,
       path,
       size: toggleNavWidth(currentNavStatus)
     });
@@ -894,7 +824,7 @@ var LeftNav = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          import_vuu_layout4.Stack,
+          import_vuu_layout5.Stack,
           {
             active: navState.activeTabIndex - 1,
             className: `${classBase5}-menu-secondary`,
@@ -913,7 +843,7 @@ var LeftNav = ({
 };
 
 // src/login/LoginPanel.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_core2 = require("@salt-ds/core");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var classBase6 = "vuuLoginPanel";
@@ -921,8 +851,8 @@ var LoginPanel = ({
   requirePassword = true,
   onSubmit
 }) => {
-  const [username, setUserName] = (0, import_react11.useState)("");
-  const [password, setPassword] = (0, import_react11.useState)("");
+  const [username, setUserName] = (0, import_react10.useState)("");
+  const [password, setPassword] = (0, import_react10.useState)("");
   const login = () => {
     onSubmit(username, password);
   };
@@ -966,14 +896,14 @@ var LoginPanel = ({
 };
 
 // src/login/login-utils.ts
-var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
 var getAuthModeFromCookies = () => {
-  const mode = (0, import_vuu_utils3.getCookieValue)("vuu-auth-mode");
+  const mode = (0, import_vuu_utils2.getCookieValue)("vuu-auth-mode");
   return mode != null ? mode : "";
 };
 var getAuthDetailsFromCookies = () => {
-  const username = (0, import_vuu_utils3.getCookieValue)("vuu-username");
-  const token = (0, import_vuu_utils3.getCookieValue)("vuu-auth-token");
+  const username = (0, import_vuu_utils2.getCookieValue)("vuu-username");
+  const token = (0, import_vuu_utils2.getCookieValue)("vuu-auth-token");
   return [username, token];
 };
 var getDefaultLoginUrl = () => {
@@ -990,12 +920,12 @@ var logout = (loginUrl) => {
 };
 
 // src/session-editing-form/SessionEditingForm.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_classnames5 = __toESM(require("classnames"));
 var import_core3 = require("@salt-ds/core");
 var import_core4 = require("@salt-ds/core");
 var import_vuu_data = require("@vuu-ui/vuu-data");
-var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var classBase7 = "vuuSessionEditingForm";
 var getField = (fields, name) => {
@@ -1027,7 +957,7 @@ function getTypedValue(value, type, throwIfUndefined = false) {
     case "int":
     case "long": {
       const typedValue = parseInt(value, 10);
-      if ((0, import_vuu_utils4.isValidNumber)(typedValue)) {
+      if ((0, import_vuu_utils3.isValidNumber)(typedValue)) {
         return typedValue;
       } else if (throwIfUndefined) {
         throw Error("SessionEditingForm getTypedValue");
@@ -1037,7 +967,7 @@ function getTypedValue(value, type, throwIfUndefined = false) {
     }
     case "double": {
       const typedValue = parseFloat(value);
-      if ((0, import_vuu_utils4.isValidNumber)(typedValue)) {
+      if ((0, import_vuu_utils3.isValidNumber)(typedValue)) {
         return typedValue;
       }
       return void 0;
@@ -1072,12 +1002,12 @@ var SessionEditingForm = ({
   schema,
   ...htmlAttributes
 }) => {
-  const [values, setValues] = (0, import_react12.useState)();
-  const [errorMessage, setErrorMessage] = (0, import_react12.useState)("");
-  const formContentRef = (0, import_react12.useRef)(null);
-  const initialDataRef = (0, import_react12.useRef)();
-  const dataStatusRef = (0, import_react12.useRef)(Status.uninitialised);
-  const dataSource = (0, import_react12.useMemo)(() => {
+  const [values, setValues] = (0, import_react11.useState)();
+  const [errorMessage, setErrorMessage] = (0, import_react11.useState)("");
+  const formContentRef = (0, import_react11.useRef)(null);
+  const initialDataRef = (0, import_react11.useRef)();
+  const dataStatusRef = (0, import_react11.useRef)(Status.uninitialised);
+  const dataSource = (0, import_react11.useMemo)(() => {
     const applyServerData = (data) => {
       if (columnMap) {
         const values2 = {};
@@ -1092,7 +1022,7 @@ var SessionEditingForm = ({
       }
     };
     const ds = getDataSource(dataSourceProp, schema);
-    const columnMap = (0, import_vuu_utils4.buildColumnMap)(ds.columns);
+    const columnMap = (0, import_vuu_utils3.buildColumnMap)(ds.columns);
     ds.subscribe({ range: { from: 0, to: 5 } }, (message) => {
       if (message.type === "viewport-update" && message.rows) {
         if (dataStatusRef.current === Status.uninitialised) {
@@ -1105,7 +1035,7 @@ var SessionEditingForm = ({
     return ds;
   }, [dataSourceProp, schema]);
   const id = (0, import_core3.useIdMemo)(idProp);
-  const handleChange = (0, import_react12.useCallback)(
+  const handleChange = (0, import_react11.useCallback)(
     (evt) => {
       const [field, value] = getFieldNameAndValue(evt);
       const { type } = getField(fields, field);
@@ -1115,14 +1045,14 @@ var SessionEditingForm = ({
           ...values2,
           [field]: typedValue
         };
-        const notUpdated = (0, import_vuu_utils4.shallowEquals)(newValues, initialDataRef.current);
+        const notUpdated = (0, import_vuu_utils3.shallowEquals)(newValues, initialDataRef.current);
         dataStatusRef.current = notUpdated ? Status.unchanged : typedValue !== void 0 ? Status.changed : Status.invalid;
         return newValues;
       });
     },
     [fields]
   );
-  const handleBlur = (0, import_react12.useCallback)(
+  const handleBlur = (0, import_react11.useCallback)(
     (evt) => {
       const [field, value] = getFieldNameAndValue(evt);
       const { type } = getField(fields, field);
@@ -1139,7 +1069,7 @@ var SessionEditingForm = ({
     },
     [dataSource, fields, keyField, values]
   );
-  const applyAction = (0, import_react12.useCallback)(
+  const applyAction = (0, import_react11.useCallback)(
     (action) => {
       if (typeof action === "object" && action !== null) {
         if ("type" in action && action.type === "CLOSE_DIALOG_ACTION") {
@@ -1149,7 +1079,7 @@ var SessionEditingForm = ({
     },
     [onClose]
   );
-  const handleSubmit = (0, import_react12.useCallback)(async () => {
+  const handleSubmit = (0, import_react11.useCallback)(async () => {
     const response = await dataSource.menuRpcCall({
       type: "VP_EDIT_SUBMIT_FORM_RPC"
     });
@@ -1159,7 +1089,7 @@ var SessionEditingForm = ({
       applyAction(response.action);
     }
   }, [applyAction, dataSource]);
-  const handleKeyDown = (0, import_react12.useCallback)(
+  const handleKeyDown = (0, import_react11.useCallback)(
     (evt) => {
       if (evt.key === "Enter" && dataStatusRef.current === Status.changed) {
         handleSubmit();
@@ -1167,7 +1097,7 @@ var SessionEditingForm = ({
     },
     [handleSubmit]
   );
-  const handleCancel = (0, import_react12.useCallback)(() => {
+  const handleCancel = (0, import_react11.useCallback)(() => {
     onClose();
   }, [onClose]);
   const getFormControl = (field) => {
@@ -1190,7 +1120,7 @@ var SessionEditingForm = ({
       );
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (formContentRef.current) {
       const firstInput = formContentRef.current.querySelector(
         "input"
@@ -1203,7 +1133,7 @@ var SessionEditingForm = ({
       }
     }
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return () => {
       if (dataSource) {
         dataSource.unsubscribe();
@@ -1264,11 +1194,11 @@ var SessionEditingForm = ({
 // src/shell.tsx
 var import_vuu_data2 = require("@vuu-ui/vuu-data");
 var import_classnames9 = __toESM(require("classnames"));
-var import_react18 = require("react");
-var import_vuu_layout8 = require("@vuu-ui/vuu-layout");
+var import_react17 = require("react");
+var import_vuu_layout9 = require("@vuu-ui/vuu-layout");
 
 // src/app-header/AppHeader.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 
 // src/user-profile/UserProfile.tsx
 var import_core6 = require("@salt-ds/core");
@@ -1276,11 +1206,11 @@ var import_lab3 = require("@salt-ds/lab");
 var import_icons2 = require("@salt-ds/icons");
 
 // src/user-profile/UserPanel.tsx
-var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
 var import_lab2 = require("@salt-ds/lab");
 var import_core5 = require("@salt-ds/core");
 var import_icons = require("@salt-ds/icons");
-var import_react13 = require("react");
+var import_react12 = require("react");
 
 // src/get-layout-history.ts
 var getLayoutHistory = async (user) => {
@@ -1300,22 +1230,22 @@ var byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
 var HistoryListItem = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lab2.ListItem, { ...props });
 };
-var UserPanel = (0, import_react13.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
-  const [history, setHistory] = (0, import_react13.useState)([]);
-  (0, import_react13.useEffect)(() => {
+var UserPanel = (0, import_react12.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
+  const [history, setHistory] = (0, import_react12.useState)([]);
+  (0, import_react12.useEffect)(() => {
     async function getHistory() {
       const history2 = await getLayoutHistory(user);
       const sortedHistory = history2.filter((item) => item.id !== "latest").sort(byLastUpdate).map(({ id, lastUpdate }) => ({
         lastUpdate,
         id,
-        label: `Saved at ${(0, import_vuu_utils5.formatDate)(new Date(lastUpdate), "kk:mm:ss")}`
+        label: `Saved at ${(0, import_vuu_utils4.formatDate)(new Date(lastUpdate), "kk:mm:ss")}`
       }));
       console.log({ sortedHistory });
       setHistory(sortedHistory);
     }
     getHistory();
   }, [user]);
-  const handleHisorySelected = (0, import_react13.useCallback)(
+  const handleHisorySelected = (0, import_react12.useCallback)(
     (evt, selected2) => {
       if (selected2) {
         onNavigate(selected2.id);
@@ -1323,7 +1253,7 @@ var UserPanel = (0, import_react13.forwardRef)(function UserPanel2({ loginUrl, o
     },
     [onNavigate]
   );
-  const handleLogout = (0, import_react13.useCallback)(() => {
+  const handleLogout = (0, import_react12.useCallback)(() => {
     logout(loginUrl);
   }, [loginUrl]);
   const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
@@ -1373,7 +1303,7 @@ var UserProfile = ({
 // src/theme-switch/ThemeSwitch.tsx
 var import_classnames6 = __toESM(require("classnames"));
 var import_core7 = require("@salt-ds/core");
-var import_react14 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var classBase8 = "vuuThemeSwitch";
 var ThemeSwitch = ({
@@ -1389,7 +1319,7 @@ var ThemeSwitch = ({
     name: "ThemeSwitch",
     state: "mode"
   });
-  const handleChangeSecondary = (0, import_react14.useCallback)(
+  const handleChangeSecondary = (0, import_react13.useCallback)(
     (evt) => {
       const { value } = evt.target;
       setMode(value);
@@ -1428,7 +1358,7 @@ var AppHeader = ({
   ...htmlAttributes
 }) => {
   const className = (0, import_classnames7.default)(classBase9, classNameProp);
-  const handleSwitchTheme = (0, import_react15.useCallback)(
+  const handleSwitchTheme = (0, import_react14.useCallback)(
     (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
     [onSwitchTheme]
   );
@@ -1447,13 +1377,13 @@ var AppHeader = ({
 };
 
 // src/shell.tsx
-var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
 
 // src/shell-layouts/context-panel/ContextPanel.tsx
 var import_core8 = require("@salt-ds/core");
 var import_classnames8 = __toESM(require("classnames"));
-var import_react16 = require("react");
-var import_vuu_layout5 = require("@vuu-ui/vuu-layout");
+var import_react15 = require("react");
+var import_vuu_layout6 = require("@vuu-ui/vuu-layout");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var classBase10 = "vuuContextPanel";
 var ContextPanel = ({
@@ -1463,8 +1393,8 @@ var ContextPanel = ({
   overlay = false,
   title
 }) => {
-  const dispatchLayoutAction = (0, import_vuu_layout5.useLayoutProviderDispatch)();
-  const handleClose = (0, import_react16.useCallback)(() => {
+  const dispatchLayoutAction = (0, import_vuu_layout6.useLayoutProviderDispatch)();
+  const handleClose = (0, import_react15.useCallback)(() => {
     dispatchLayoutAction({
       path: "#context-panel",
       propName: "expanded",
@@ -1477,8 +1407,8 @@ var ContextPanel = ({
     [`${classBase10}-inline`]: overlay !== true,
     [`${classBase10}-overlay`]: overlay
   });
-  const content = (0, import_react16.useMemo)(
-    () => contentProp ? (0, import_vuu_layout5.layoutFromJson)(contentProp, "context-0") : null,
+  const content = (0, import_react15.useMemo)(
+    () => contentProp ? (0, import_vuu_layout6.layoutFromJson)(contentProp, "context-0") : null,
     [contentProp]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_classnames8.default)(classBase10, className), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `${classBase10}-inner`, children: [
@@ -1499,14 +1429,14 @@ var ContextPanel = ({
 };
 
 // src/shell-layouts/useFullHeightLeftPanel.tsx
-var import_vuu_layout6 = require("@vuu-ui/vuu-layout");
+var import_vuu_layout7 = require("@vuu-ui/vuu-layout");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var useFullHeightLeftPanel = ({
   appHeader,
   leftSidePanel
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    import_vuu_layout6.Flexbox,
+    import_vuu_layout7.Flexbox,
     {
       className: "App",
       style: {
@@ -1517,13 +1447,13 @@ var useFullHeightLeftPanel = ({
       children: [
         leftSidePanel,
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          import_vuu_layout6.Flexbox,
+          import_vuu_layout7.Flexbox,
           {
             className: "vuuShell-content",
             style: { flex: 1, flexDirection: "column" },
             children: [
               appHeader,
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_vuu_layout6.DraggableLayout, { dropTarget: true, style: { flex: 1 } }, "main-content")
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_vuu_layout7.DraggableLayout, { dropTarget: true, style: { flex: 1 } }, "main-content")
             ]
           }
         ),
@@ -1541,16 +1471,16 @@ var useFullHeightLeftPanel = ({
 };
 
 // src/shell-layouts/useInlayLeftPanel.tsx
-var import_vuu_layout7 = require("@vuu-ui/vuu-layout");
-var import_react17 = require("react");
+var import_vuu_layout8 = require("@vuu-ui/vuu-layout");
+var import_react16 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var useInlayLeftPanel = ({
   appHeader,
   leftSidePanel
 }) => {
-  const paletteView = (0, import_react17.useRef)(null);
-  const [open, setOpen] = (0, import_react17.useState)(true);
-  const handleDrawerClick = (0, import_react17.useCallback)(
+  const paletteView = (0, import_react16.useRef)(null);
+  const [open, setOpen] = (0, import_react16.useState)(true);
+  const handleDrawerClick = (0, import_react16.useCallback)(
     (e) => {
       var _a;
       const target = e.target;
@@ -1560,12 +1490,12 @@ var useInlayLeftPanel = ({
     },
     [open]
   );
-  const getDrawers = (0, import_react17.useCallback)(
+  const getDrawers = (0, import_react16.useCallback)(
     (leftSidePanel2) => {
       const drawers = [];
       drawers.push(
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_vuu_layout7.Drawer,
+          import_vuu_layout8.Drawer,
           {
             onClick: handleDrawerClick,
             open,
@@ -1575,7 +1505,7 @@ var useInlayLeftPanel = ({
             sizeOpen: 200,
             toggleButton: "end",
             children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_vuu_layout7.View,
+              import_vuu_layout8.View,
               {
                 className: "vuuShell-palette",
                 id: "vw-app-palette",
@@ -1594,15 +1524,15 @@ var useInlayLeftPanel = ({
     [handleDrawerClick, open]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    import_vuu_layout7.Flexbox,
+    import_vuu_layout8.Flexbox,
     {
       className: "App",
       style: { flexDirection: "column", height: "100%", width: "100%" },
       children: [
         appHeader,
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_vuu_layout7.DockLayout, { style: { flex: 1 }, children: getDrawers(leftSidePanel).concat(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_vuu_layout8.DockLayout, { style: { flex: 1 }, children: getDrawers(leftSidePanel).concat(
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_vuu_layout7.DraggableLayout,
+            import_vuu_layout8.DraggableLayout,
             {
               dropTarget: true,
               style: { width: "100%", height: "100%" }
@@ -1626,26 +1556,11 @@ var useShellLayout = ({
 
 // src/shell.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var { error } = (0, import_vuu_utils6.logger)("Shell");
-var warningLayout = {
-  type: "View",
-  props: {
-    style: { height: "calc(100% - 6px)" }
-  },
-  children: [
-    {
-      props: {
-        className: "vuuShell-warningPlaceholder"
-      },
-      type: "Placeholder"
-    }
-  ]
-};
+var { error } = (0, import_vuu_utils5.logger)("Shell");
 var Shell = ({
   LayoutProps,
   children,
   className: classNameProp,
-  defaultLayout = warningLayout,
   leftSidePanel,
   leftSidePanelLayout,
   loginUrl,
@@ -1655,38 +1570,33 @@ var Shell = ({
   user,
   ...htmlAttributes
 }) => {
-  const rootRef = (0, import_react18.useRef)(null);
-  const layoutId = (0, import_react18.useRef)("latest");
-  const [layout, saveLayoutConfig, loadLayoutById] = useLayoutConfig({
-    defaultLayout,
-    saveLocation,
-    saveUrl,
-    user
-  });
-  const handleLayoutChange = (0, import_react18.useCallback)(
-    (layout2, layoutChangeReason) => {
+  const rootRef = (0, import_react17.useRef)(null);
+  const layoutId = (0, import_react17.useRef)("latest");
+  const { applicationLayout, saveApplicationLayout, loadLayoutById } = useLayoutManager();
+  const handleLayoutChange = (0, import_react17.useCallback)(
+    (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 = (0, import_react18.useCallback)((mode) => {
+  const handleSwitchTheme = (0, import_react17.useCallback)((mode) => {
     if (rootRef.current) {
       rootRef.current.dataset.mode = mode;
     }
   }, []);
-  const handleNavigate = (0, import_react18.useCallback)(
+  const handleNavigate = (0, import_react17.useCallback)(
     (id) => {
       layoutId.current = id;
       loadLayoutById(id);
     },
     [loadLayoutById]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (serverUrl && user.token) {
       (0, import_vuu_data2.connectToServer)({
         authToken: user.token,
@@ -1713,13 +1623,13 @@ var Shell = ({
   });
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ThemeProvider, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_vuu_layout8.LayoutProvider,
+      import_vuu_layout9.LayoutProvider,
       {
         ...LayoutProps,
-        layout,
+        layout: applicationLayout,
         onLayoutChange: handleLayoutChange,
         children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_vuu_layout8.DraggableLayout,
+          import_vuu_layout9.DraggableLayout,
           {
             className,
             "data-mode": dataMode,
@@ -1735,10 +1645,10 @@ var Shell = ({
 };
 
 // src/ShellContextProvider.tsx
-var import_react19 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var defaultConfig = {};
-var ShellContext = (0, import_react19.createContext)(defaultConfig);
+var ShellContext = (0, import_react18.createContext)(defaultConfig);
 var Provider = ({
   children,
   context,
@@ -1757,6 +1667,6 @@ var ShellContextProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Provider, { context: value, inheritedContext: context, children }) });
 };
 var useShellContext = () => {
-  return (0, import_react19.useContext)(ShellContext);
+  return (0, import_react18.useContext)(ShellContext);
 };
 //# sourceMappingURL=index.js.map