@vuu-ui/vuu-shell 0.7.0-debug → 0.7.1-debug

package/cjs/index.js

@@ -37,6 +37,7 @@ __export(src_exports, {
   DensitySwitch: () => DensitySwitch,
   Feature: () => Feature,
   LoginPanel: () => LoginPanel,
+  SessionEditingForm: () => SessionEditingForm,
   Shell: () => Shell,
   ShellContextProvider: () => ShellContextProvider,
   ThemeContext: () => ThemeContext,
@@ -54,7 +55,7 @@ var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var ConnectionStatusIcon = ({ connectionStatus, className, element = "span", ...props }) => {
-  const [classBase5, setClassBase] = (0, import_react.useState)("vuuConnectingStatus");
+  const [classBase6, setClassBase] = (0, import_react.useState)("vuuConnectingStatus");
   (0, import_react.useEffect)(() => {
     switch (connectionStatus) {
       case "connected":
@@ -75,7 +76,7 @@ var ConnectionStatusIcon = ({ connectionStatus, className, element = "span", ...
     element,
     {
       ...props,
-      className: (0, import_classnames.default)("vuuStatus vuuIcon", classBase5, className)
+      className: (0, import_classnames.default)("vuuStatus vuuIcon", classBase6, className)
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vuuStatus-container salt-theme", children: [
@@ -127,11 +128,11 @@ var ErrorBoundary = class extends import_react3.default.Component {
     super(props);
     this.state = { errorMessage: null };
   }
-  static getDerivedStateFromError(error) {
-    return { errorMessage: error.message };
+  static getDerivedStateFromError(error2) {
+    return { errorMessage: error2.message };
   }
-  componentDidCatch(error, errorInfo) {
-    console.log(error, errorInfo);
+  componentDidCatch(error2, errorInfo) {
+    console.log(error2, errorInfo);
   }
   render() {
     if (this.state.errorMessage) {
@@ -150,18 +151,45 @@ var Loader = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { classNa
 
 // src/feature/Feature.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var componentsMap = /* @__PURE__ */ new Map();
+var useCachedFeature = (url) => {
+  (0, import_react4.useEffect)(
+    () => () => {
+      componentsMap.delete(url);
+    },
+    [url]
+  );
+  if (!componentsMap.has(url)) {
+    componentsMap.set(
+      url,
+      import_react4.default.lazy(() => import(
+        /* @vite-ignore */
+        url
+      ))
+    );
+  }
+  return componentsMap.get(url);
+};
 function RawFeature({
   url,
   css,
   params,
   ...props
 }) {
+  console.log("Feature render", { css, url, props });
+  (0, import_react4.useEffect)(() => {
+    console.log("%cFeature mount", "color: green;");
+    return () => {
+      console.log("%cFeature unmount", "color:red;");
+    };
+  }, []);
   if (css) {
     import(
       /* @vite-ignore */
       css
     ).then(
       (cssModule) => {
+        console.log("%cInject Styles", "color: blue;font-weight: bold");
         document.adoptedStyleSheets = [
           ...document.adoptedStyleSheets,
           cssModule.default
@@ -169,10 +197,7 @@ function RawFeature({
       }
     );
   }
-  const LazyFeature = import_react4.default.lazy(() => import(
-    /* @vite-ignore */
-    url
-  ));
+  const LazyFeature = useCachedFeature(url);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loader, {}), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LazyFeature, { ...props, ...params }) }) });
 }
 var Feature = import_react4.default.memo(RawFeature);
@@ -238,16 +263,273 @@ var logout = (loginUrl) => {
   redirectToLogin(loginUrl);
 };
 
-// src/shell.tsx
+// src/session-editing-form/SessionEditingForm.tsx
+var import_react6 = require("react");
+var import_classnames3 = __toESM(require("classnames"));
+var import_core2 = require("@salt-ds/core");
+var import_core3 = require("@salt-ds/core");
 var import_vuu_data = require("@vuu-ui/vuu-data");
-var import_classnames5 = __toESM(require("classnames"));
-var import_react11 = require("react");
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var classBase3 = "vuuSessionEditingForm";
+var getField = (fields, name) => {
+  const field = fields.find((f) => f.name === name);
+  if (field) {
+    return field;
+  } else {
+    throw Error(`SessionEditingForm, no field '${name}' found`);
+  }
+};
+var getFieldNameAndValue = (evt) => {
+  const {
+    dataset: { field },
+    value
+  } = evt.target;
+  if (field === void 0) {
+    throw Error("SessionEditingForm, form field has no field name");
+  }
+  return [field, value];
+};
+var Status = {
+  uninitialised: 0,
+  unchanged: 1,
+  changed: 2,
+  invalid: 3
+};
+function getTypedValue(value, type, throwIfUndefined = false) {
+  switch (type) {
+    case "int":
+    case "long": {
+      const typedValue = parseInt(value, 10);
+      if ((0, import_vuu_utils2.isValidNumber)(typedValue)) {
+        return typedValue;
+      } else if (throwIfUndefined) {
+        throw Error("SessionEditingForm getTypedValue");
+      } else {
+        return void 0;
+      }
+    }
+    case "double": {
+      const typedValue = parseFloat(value);
+      if ((0, import_vuu_utils2.isValidNumber)(typedValue)) {
+        return typedValue;
+      }
+      return void 0;
+    }
+    case "boolean":
+      return value === "true" ? true : false;
+    default:
+      return value;
+  }
+}
+var getDataSource = (dataSource, schema) => {
+  if (dataSource) {
+    return dataSource;
+  } else if (schema) {
+    return new import_vuu_data.RemoteDataSource({
+      bufferSize: 0,
+      table: schema.table,
+      columns: schema.columns.map((col) => col.name)
+    });
+  } else {
+    throw Error(
+      "SessionEditingForm: either a DataSource or a TableSchema must be provided"
+    );
+  }
+};
+var SessionEditingForm = ({
+  className,
+  config: { fields, key: keyField },
+  dataSource: dataSourceProp,
+  id: idProp,
+  onClose,
+  schema,
+  ...htmlAttributes
+}) => {
+  const [values, setValues] = (0, import_react6.useState)();
+  const [errorMessage, setErrorMessage] = (0, import_react6.useState)("");
+  const formContentRef = (0, import_react6.useRef)(null);
+  const initialDataRef = (0, import_react6.useRef)();
+  const dataStatusRef = (0, import_react6.useRef)(Status.uninitialised);
+  const dataSource = (0, import_react6.useMemo)(() => {
+    const applyServerData = (data) => {
+      if (columnMap) {
+        const values2 = {};
+        for (const column of dataSource.columns) {
+          values2[column] = data[columnMap[column]];
+        }
+        if (dataStatusRef.current === Status.uninitialised) {
+          dataStatusRef.current = Status.unchanged;
+          initialDataRef.current = values2;
+        }
+        setValues(values2);
+      }
+    };
+    const ds = getDataSource(dataSourceProp, schema);
+    const columnMap = (0, import_vuu_utils2.buildColumnMap)(ds.columns);
+    ds.subscribe({ range: { from: 0, to: 5 } }, (message) => {
+      if (message.type === "viewport-update" && message.rows) {
+        if (dataStatusRef.current === Status.uninitialised) {
+          applyServerData(message.rows[0]);
+        } else {
+          console.log("what do we do with server updates");
+        }
+      }
+    });
+    return ds;
+  }, [dataSourceProp, schema]);
+  const id = (0, import_core2.useIdMemo)(idProp);
+  const handleChange = (0, import_react6.useCallback)(
+    (evt) => {
+      const [field, value] = getFieldNameAndValue(evt);
+      const { type } = getField(fields, field);
+      const typedValue = getTypedValue(value, type);
+      setValues((values2 = {}) => {
+        const newValues = {
+          ...values2,
+          [field]: typedValue
+        };
+        const notUpdated = (0, import_vuu_utils2.shallowEquals)(newValues, initialDataRef.current);
+        dataStatusRef.current = notUpdated ? Status.unchanged : typedValue !== void 0 ? Status.changed : Status.invalid;
+        return newValues;
+      });
+    },
+    [fields]
+  );
+  const handleBlur = (0, import_react6.useCallback)(
+    (evt) => {
+      const [field, value] = getFieldNameAndValue(evt);
+      const { type } = getField(fields, field);
+      console.log("BLUR", {
+        keyField
+      });
+      const rowKey = values == null ? void 0 : values[keyField];
+      const typedValue = getTypedValue(value, type, true);
+      if (typeof rowKey === "string") {
+        dataSource.menuRpcCall({
+          rowKey,
+          field,
+          value: typedValue,
+          type: "VP_EDIT_CELL_RPC"
+        });
+      }
+    },
+    [dataSource, fields, keyField, values]
+  );
+  const handleSubmit = (0, import_react6.useCallback)(async () => {
+    const response = await dataSource.menuRpcCall({
+      type: "VP_EDIT_SUBMIT_FORM_RPC"
+    });
+    if ((0, import_vuu_data.isErrorResponse)(response)) {
+      setErrorMessage(response.error);
+    }
+  }, [dataSource]);
+  const handleKeyDown = (0, import_react6.useCallback)(
+    (evt) => {
+      if (evt.key === "Enter" && dataStatusRef.current === Status.changed) {
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const handleCancel = (0, import_react6.useCallback)(() => {
+    onClose();
+  }, [onClose]);
+  const getFormControl = (field) => {
+    var _a;
+    const value = String((_a = values == null ? void 0 : values[field.name]) != null ? _a : "");
+    if (field.readonly || field.name === keyField) {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase3}-fieldValue vuuReadOnly`, children: value });
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          className: `${classBase3}-fieldValue`,
+          "data-field": field.name,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          type: "text",
+          value,
+          id: `${id}-input-${field.name}`
+        }
+      );
+    }
+  };
+  (0, import_react6.useEffect)(() => {
+    if (formContentRef.current) {
+      const firstInput = formContentRef.current.querySelector(
+        "input"
+      );
+      if (firstInput) {
+        setTimeout(() => {
+          firstInput.focus();
+          console.log("select item");
+          firstInput.select();
+        }, 100);
+      }
+    }
+  }, []);
+  const isDirty = dataStatusRef.current === Status.changed;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames3.default)(classBase3, className), children: [
+    errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        className: `${classBase3}-errorBanner`,
+        "data-icon": "error",
+        title: errorMessage,
+        children: "Error, edit(s) not saved"
+      }
+    ) : void 0,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        className: `${classBase3}-content`,
+        ref: formContentRef,
+        onKeyDown: handleKeyDown,
+        children: fields.map((field) => {
+          var _a;
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `${classBase3}-field`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "label",
+              {
+                className: (0, import_classnames3.default)(`${classBase3}-fieldLabel`, {
+                  [`${classBase3}-required`]: field.required
+                }),
+                htmlFor: `${id}-input-${field.name}`,
+                children: (_a = field == null ? void 0 : field.label) != null ? _a : field.description
+              }
+            ),
+            getFormControl(field)
+          ] }, field.name);
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `${classBase3}-buttonbar salt-theme salt-density-high`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_core3.Button,
+        {
+          type: "submit",
+          variant: "cta",
+          disabled: !isDirty,
+          onClick: handleSubmit,
+          children: "Submit"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core3.Button, { variant: "secondary", onClick: handleCancel, children: "Cancel" })
+    ] })
+  ] });
+};
+
+// src/shell.tsx
+var import_vuu_data2 = require("@vuu-ui/vuu-data");
+var import_classnames6 = __toESM(require("classnames"));
+var import_react12 = require("react");
 
 // src/ShellContextProvider.tsx
-var import_react6 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var defaultConfig = {};
-var ShellContext = (0, import_react6.createContext)(defaultConfig);
+var ShellContext = (0, import_react7.createContext)(defaultConfig);
 var Provider = ({
   children,
   context,
@@ -257,53 +539,106 @@ var Provider = ({
     ...inheritedContext,
     ...context
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ShellContext.Provider, { value: mergedContext, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ShellContext.Provider, { value: mergedContext, children });
 };
 var ShellContextProvider = ({
   children,
   value
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Provider, { context: value, inheritedContext: context, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Provider, { context: value, inheritedContext: context, children }) });
 };
 var useShellContext = () => {
-  return (0, import_react6.useContext)(ShellContext);
+  return (0, import_react7.useContext)(ShellContext);
 };
 
-// src/use-layout-config.js
-var import_react7 = require("react");
-var useLayoutConfig = (user, defaultLayout) => {
-  const [layout, _setLayout] = (0, import_react7.useState)(defaultLayout);
+// src/layout-config/use-layout-config.ts
+var import_react8 = require("react");
+
+// src/layout-config/local-config.ts
+var loadLocalConfig = (saveUrl, user, id = "latest") => new Promise((resolve, reject) => {
+  console.log(
+    `load local config at ${saveUrl} for user ${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 {
+    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) => {
+  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) => {
+  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 useLayoutConfig = ({
+  saveLocation,
+  saveUrl = "api/vui",
+  user,
+  defaultLayout
+}) => {
+  const [layout, _setLayout] = (0, import_react8.useState)(defaultLayout);
+  const usingRemote = saveLocation === "remote";
+  const loadConfig = usingRemote ? loadRemoteConfig : loadLocalConfig;
+  const saveConfig = usingRemote ? saveRemoteConfig : saveLocalConfig;
   const setLayout = (layout2) => {
     _setLayout(layout2);
   };
-  const load = (0, import_react7.useCallback)(
+  const load = (0, import_react8.useCallback)(
     async (id = "latest") => {
-      fetch(`api/vui/${user.username}/${id}`, {}).then((response) => {
-        return response.ok ? response.json() : defaultLayout;
-      }).then(setLayout).catch(() => {
+      try {
+        const layout2 = await loadConfig(saveUrl, user, id);
+        setLayout(layout2);
+      } catch {
         setLayout(defaultLayout);
-      });
+      }
     },
-    [defaultLayout, user.username]
+    [defaultLayout, loadConfig, saveUrl, user]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     load();
   }, [load]);
-  const saveData = (0, import_react7.useCallback)(
+  const saveData = (0, import_react8.useCallback)(
     (data) => {
-      fetch(`api/vui/${user.username}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(data)
-      }).then((response) => {
-        return response.ok ? response.json() : defaultLayout;
-      });
+      saveConfig(saveUrl, user, data);
     },
-    [defaultLayout, user]
+    [saveConfig, saveUrl, user]
   );
-  const loadLayoutById = (0, import_react7.useCallback)(
+  const loadLayoutById = (0, import_react8.useCallback)(
     (id) => {
       load(id);
     },
@@ -311,25 +646,24 @@ var useLayoutConfig = (user, defaultLayout) => {
   );
   return [layout, saveData, loadLayoutById];
 };
-var use_layout_config_default = useLayoutConfig;
 
 // src/shell.tsx
 var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
 
 // src/app-header/AppHeader.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/user-profile/UserProfile.tsx
-var import_core3 = require("@salt-ds/core");
+var import_core5 = require("@salt-ds/core");
 var import_salt_lab4 = require("@heswell/salt-lab");
 var import_icons2 = require("@salt-ds/icons");
 
 // src/user-profile/UserPanel.tsx
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
 var import_salt_lab3 = require("@heswell/salt-lab");
-var import_core2 = require("@salt-ds/core");
+var import_core4 = require("@salt-ds/core");
 var import_icons = require("@salt-ds/icons");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/get-layout-history.ts
 var getLayoutHistory = async (user) => {
@@ -342,29 +676,29 @@ var getLayoutHistory = async (user) => {
 };
 
 // src/user-profile/UserPanel.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
   return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
 };
 var HistoryListItem = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab3.ListItem, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab3.ListItem, { ...props });
 };
-var UserPanel = (0, import_react8.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
-  const [history, setHistory] = (0, import_react8.useState)([]);
-  (0, import_react8.useEffect)(() => {
+var UserPanel = (0, import_react9.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
+  const [history, setHistory] = (0, import_react9.useState)([]);
+  (0, import_react9.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_utils2.formatDate)(new Date(lastUpdate), "kk:mm:ss")}`
+        label: `Saved at ${(0, import_vuu_utils3.formatDate)(new Date(lastUpdate), "kk:mm:ss")}`
       }));
       console.log({ sortedHistory });
       setHistory(sortedHistory);
     }
     getHistory();
   }, [user]);
-  const handleHisorySelected = (0, import_react8.useCallback)(
+  const handleHisorySelected = (0, import_react9.useCallback)(
     (evt, selected2) => {
       if (selected2) {
         onNavigate(selected2.id);
@@ -372,12 +706,12 @@ var UserPanel = (0, import_react8.forwardRef)(function UserPanel2({ loginUrl, on
     },
     [onNavigate]
   );
-  const handleLogout = (0, import_react8.useCallback)(() => {
+  const handleLogout = (0, import_react9.useCallback)(() => {
     logout(loginUrl);
   }, [loginUrl]);
   const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_salt_lab3.List,
       {
         ListItem: HistoryListItem,
@@ -387,15 +721,15 @@ var UserPanel = (0, import_react8.forwardRef)(function UserPanel2({ loginUrl, on
         source: history
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core2.Button, { "aria-label": "logout", onClick: handleLogout, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.ExportIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.Button, { "aria-label": "logout", onClick: handleLogout, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons.ExportIcon, {}),
       " Logout"
     ] }) })
   ] });
 });
 
 // src/user-profile/UserProfile.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var UserProfile = ({
   layoutId,
   loginUrl,
@@ -405,9 +739,9 @@ var UserProfile = ({
   const handleNavigate = (id) => {
     onNavigate(id);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_salt_lab4.DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.UserSolidIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_salt_lab4.DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons2.UserSolidIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       UserPanel,
       {
         layoutId,
@@ -421,11 +755,11 @@ var UserProfile = ({
 
 // src/theme-switch/ThemeSwitch.tsx
 var import_salt_lab5 = require("@heswell/salt-lab");
-var import_classnames3 = __toESM(require("classnames"));
-var import_core4 = require("@salt-ds/core");
-var import_react9 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var classBase3 = "vuuThemeSwitch";
+var import_classnames4 = __toESM(require("classnames"));
+var import_core6 = require("@salt-ds/core");
+var import_react10 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var classBase4 = "vuuThemeSwitch";
 var modes = ["light", "dark"];
 var ThemeSwitch = ({
   className: classNameProp,
@@ -434,14 +768,14 @@ var ThemeSwitch = ({
   onChange,
   ...htmlAttributes
 }) => {
-  const [mode, setMode] = (0, import_core4.useControlled)({
+  const [mode, setMode] = (0, import_core6.useControlled)({
     controlled: modeProp,
     default: defaultModeProp != null ? defaultModeProp : "light",
     name: "ThemeSwitch",
     state: "mode"
   });
   const selectedIndex = modes.indexOf(mode);
-  const handleChangeSecondary = (0, import_react9.useCallback)(
+  const handleChangeSecondary = (0, import_react10.useCallback)(
     (_evt, index) => {
       const mode2 = modes[index];
       setMode(mode2);
@@ -449,8 +783,8 @@ var ThemeSwitch = ({
     },
     [onChange, setMode]
   );
-  const className = (0, import_classnames3.default)(classBase3, classNameProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  const className = (0, import_classnames4.default)(classBase4, classNameProp);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     import_salt_lab5.ToggleButtonGroup,
     {
       className,
@@ -458,7 +792,7 @@ var ThemeSwitch = ({
       onChange: handleChangeSecondary,
       selectedIndex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           import_salt_lab5.ToggleButton,
           {
             "aria-label": "alert",
@@ -466,7 +800,7 @@ var ThemeSwitch = ({
             "data-icon": "light"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           import_salt_lab5.ToggleButton,
           {
             "aria-label": "home",
@@ -480,9 +814,9 @@ var ThemeSwitch = ({
 };
 
 // src/app-header/AppHeader.tsx
-var import_classnames4 = __toESM(require("classnames"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var classBase4 = "vuuAppHeader";
+var import_classnames5 = __toESM(require("classnames"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var classBase5 = "vuuAppHeader";
 var AppHeader = ({
   className: classNameProp,
   layoutId,
@@ -493,14 +827,14 @@ var AppHeader = ({
   user,
   ...htmlAttributes
 }) => {
-  const className = (0, import_classnames4.default)(classBase4, classNameProp);
-  const handleSwitchTheme = (0, import_react10.useCallback)(
+  const className = (0, import_classnames5.default)(classBase5, classNameProp);
+  const handleSwitchTheme = (0, import_react11.useCallback)(
     (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
     [onSwitchTheme]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { className, ...htmlAttributes, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className, ...htmlAttributes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       UserProfile,
       {
         layoutId,
@@ -513,7 +847,9 @@ var AppHeader = ({
 };
 
 // src/shell.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var { error } = (0, import_vuu_utils4.logger)("Shell");
 var warningLayout = {
   type: "View",
   props: {
@@ -534,25 +870,32 @@ var Shell = ({
   defaultLayout = warningLayout,
   leftSidePanel,
   loginUrl,
+  saveLocation = "remote",
+  saveUrl,
   serverUrl,
   user,
   ...htmlAttributes
 }) => {
-  const rootRef = (0, import_react11.useRef)(null);
-  const paletteView = (0, import_react11.useRef)(null);
-  const [open, setOpen] = (0, import_react11.useState)(false);
-  const layoutId = (0, import_react11.useRef)("latest");
-  const [layout, setLayoutConfig, loadLayoutById] = use_layout_config_default(
-    user,
-    defaultLayout
-  );
-  const handleLayoutChange = (0, import_react11.useCallback)(
+  const rootRef = (0, import_react12.useRef)(null);
+  const paletteView = (0, import_react12.useRef)(null);
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const layoutId = (0, import_react12.useRef)("latest");
+  const [layout, saveLayoutConfig, loadLayoutById] = useLayoutConfig({
+    defaultLayout,
+    saveLocation,
+    user
+  });
+  const handleLayoutChange = (0, import_react12.useCallback)(
     (layout2) => {
-      setLayoutConfig(layout2);
+      try {
+        saveLayoutConfig(layout2);
+      } catch {
+        error == null ? void 0 : error("Failed to save layout");
+      }
     },
-    [setLayoutConfig]
+    [saveLayoutConfig]
   );
-  const handleSwitchTheme = (0, import_react11.useCallback)((mode) => {
+  const handleSwitchTheme = (0, import_react12.useCallback)((mode) => {
     if (rootRef.current) {
       rootRef.current.dataset.mode = mode;
     }
@@ -564,16 +907,16 @@ var Shell = ({
       setOpen(!open);
     }
   };
-  const handleNavigate = (0, import_react11.useCallback)(
+  const handleNavigate = (0, import_react12.useCallback)(
     (id) => {
       layoutId.current = id;
       loadLayoutById(id);
     },
     [loadLayoutById]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (serverUrl && user.token) {
-      (0, import_vuu_data.connectToServer)({
+      (0, import_vuu_data2.connectToServer)({
         authToken: user.token,
         url: serverUrl,
         username: user.username
@@ -584,7 +927,7 @@ var Shell = ({
     const drawers = [];
     if (leftSidePanel) {
       drawers.push(
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           import_vuu_layout2.Drawer,
           {
             onClick: handleDrawerClick,
@@ -594,7 +937,7 @@ var Shell = ({
             peekaboo: true,
             sizeOpen: 200,
             toggleButton: "end",
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               import_vuu_layout2.View,
               {
                 className: "vuuShell-palette",
@@ -612,7 +955,7 @@ var Shell = ({
     }
     return drawers;
   };
-  const className = (0, import_classnames5.default)(
+  const className = (0, import_classnames6.default)(
     "vuuShell",
     classNameProp,
     "salt-theme",
@@ -620,21 +963,21 @@ var Shell = ({
   );
   return (
     // ShellContext TBD
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ShellContextProvider, { value: void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_layout2.LayoutProvider, { layout, onLayoutChange: handleLayoutChange, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ShellContextProvider, { value: void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vuu_layout2.LayoutProvider, { layout, onLayoutChange: handleLayoutChange, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         import_vuu_layout2.DraggableLayout,
         {
           className,
           "data-mode": "light",
           ref: rootRef,
           ...htmlAttributes,
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             import_vuu_layout2.Flexbox,
             {
               className: "App",
               style: { flexDirection: "column", height: "100%", width: "100%" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   AppHeader,
                   {
                     layoutId: layoutId.current,
@@ -644,8 +987,8 @@ var Shell = ({
                     onSwitchTheme: handleSwitchTheme
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_layout2.DockLayout, { style: { flex: 1 }, children: getDrawers().concat(
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vuu_layout2.DockLayout, { style: { flex: 1 }, children: getDrawers().concat(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     import_vuu_layout2.DraggableLayout,
                     {
                       dropTarget: true,
@@ -665,22 +1008,22 @@ var Shell = ({
 };
 
 // src/theme-provider/ThemeProvider.tsx
-var import_react12 = require("react");
-var import_classnames6 = __toESM(require("classnames"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_classnames7 = __toESM(require("classnames"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_DENSITY2 = "medium";
 var DEFAULT_THEME = "salt-theme";
 var DEFAULT_THEME_MODE = "light";
-var ThemeContext = (0, import_react12.createContext)({
+var ThemeContext = (0, import_react13.createContext)({
   density: "high",
   theme: "salt-theme",
   themeMode: "light"
 });
 var createThemedChildren = (children, theme, themeMode, density) => {
   var _a;
-  if ((0, import_react12.isValidElement)(children)) {
-    return (0, import_react12.cloneElement)(children, {
-      className: (0, import_classnames6.default)(
+  if ((0, import_react13.isValidElement)(children)) {
+    return (0, import_react13.cloneElement)(children, {
+      className: (0, import_classnames7.default)(
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         (_a = children.props) == null ? void 0 : _a.className,
         theme,
@@ -710,7 +1053,7 @@ var ThemeProvider = ({
     density: inheritedDensity,
     themeMode: inheritedThemeMode,
     theme: inheritedTheme
-  } = (0, import_react12.useContext)(ThemeContext);
+  } = (0, import_react13.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;
@@ -720,7 +1063,7 @@ var ThemeProvider = ({
     themeMode,
     density
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
 };
 ThemeProvider.displayName = "ThemeProvider";
 //# sourceMappingURL=index.js.map