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

package/cjs/index.js

@@ -1,1762 +1,4 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  ConnectionStatusIcon: () => ConnectionStatusIcon,
-  ContextPanel: () => ContextPanel,
-  DEFAULT_DENSITY: () => DEFAULT_DENSITY2,
-  DEFAULT_THEME: () => DEFAULT_THEME,
-  DEFAULT_THEME_MODE: () => DEFAULT_THEME_MODE,
-  DensitySwitch: () => DensitySwitch,
-  Feature: () => Feature,
-  FeatureList: () => FeatureList,
-  LayoutManagementContext: () => LayoutManagementContext,
-  LayoutManagementProvider: () => LayoutManagementProvider,
-  LayoutsList: () => LayoutsList,
-  LeftNav: () => LeftNav,
-  LoginPanel: () => LoginPanel,
-  SaveLayoutPanel: () => SaveLayoutPanel,
-  SessionEditingForm: () => SessionEditingForm,
-  Shell: () => Shell,
-  ShellContextProvider: () => ShellContextProvider,
-  ThemeContext: () => ThemeContext,
-  ThemeProvider: () => ThemeProvider,
-  ThemeSwitch: () => ThemeSwitch,
-  getAuthDetailsFromCookies: () => getAuthDetailsFromCookies,
-  getAuthModeFromCookies: () => getAuthModeFromCookies,
-  logout: () => logout,
-  redirectToLogin: () => redirectToLogin,
-  useLayoutConfig: () => useLayoutConfig,
-  useLayoutManager: () => useLayoutManager,
-  useShellContext: () => useShellContext,
-  useShellLayout: () => useShellLayout,
-  useThemeAttributes: () => useThemeAttributes
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/connection-status/ConnectionStatusIcon.tsx
-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 [classBase11, setClassBase] = (0, import_react.useState)("vuuConnectingStatus");
-  (0, import_react.useEffect)(() => {
-    switch (connectionStatus) {
-      case "connected":
-      case "reconnected":
-        setClassBase("vuuActiveStatus");
-        break;
-      case "connecting":
-        setClassBase("vuuConnectingStatus");
-        break;
-      case "disconnected":
-        setClassBase("vuuDisconnectedStatus");
-        break;
-      default:
-        break;
-    }
-  }, [connectionStatus]);
-  const statusIcon = import_react.default.createElement(
-    element,
-    {
-      ...props,
-      className: (0, import_classnames.default)("vuuStatus vuuIcon", classBase11, 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: [
-    statusIcon,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vuuStatus-text", children: [
-      "Status: ",
-      connectionStatus.toUpperCase()
-    ] })
-  ] }) });
-};
-
-// src/density-switch/DensitySwitch.tsx
-var import_lab = require("@salt-ds/lab");
-var import_react2 = require("react");
-var import_classnames2 = __toESM(require("classnames"));
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var classBase = "vuuDensitySwitch";
-var densities = ["high", "medium", "low", "touch"];
-var DEFAULT_DENSITY = "high";
-var DensitySwitch = ({
-  className: classNameProp,
-  defaultDensity = DEFAULT_DENSITY,
-  onChange
-}) => {
-  const handleSelectionChange = (0, import_react2.useCallback)(
-    (_event, selectedItem) => {
-      onChange(selectedItem);
-    },
-    [onChange]
-  );
-  const className = (0, import_classnames2.default)(classBase, classNameProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_lab.Dropdown,
-    {
-      className,
-      source: densities,
-      defaultSelected: defaultDensity,
-      onSelectionChange: handleSelectionChange
-    }
-  );
-};
-
-// src/feature/Feature.tsx
-var import_react4 = __toESM(require("react"));
-var import_vuu_layout = require("@vuu-ui/vuu-layout");
-
-// src/feature/FeatureErrorBoundary.tsx
-var import_react3 = __toESM(require("react"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var FeatureErrorBoundary = class extends import_react3.default.Component {
-  constructor(props) {
-    super(props);
-    this.state = { errorMessage: null };
-  }
-  static getDerivedStateFromError(error2) {
-    return { errorMessage: error2.message };
-  }
-  componentDidCatch(error2, errorInfo) {
-    console.log(`error creating component at ${this.props.url}`);
-    console.log(error2, errorInfo);
-  }
-  render() {
-    if (this.state.errorMessage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { children: "An error occured while creating component." }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: this.state.errorMessage })
-      ] });
-    }
-    return this.props.children;
-  }
-};
-
-// src/feature/Loader.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Loader = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hwLoader", children: "loading" });
-
-// src/feature/css-module-loader.ts
-var importCSS = async (path) => {
-  const container = new CSSStyleSheet();
-  return fetch(path).then((x) => x.text()).then((x) => container.replace(x));
-};
-
-// 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
-      ))
-    );
-  }
-  const lazyFeature = componentsMap.get(url);
-  if (!lazyFeature) {
-    throw Error(`Unable to load Lazy Feature at url ${url}`);
-  } else {
-    return lazyFeature;
-  }
-};
-function RawFeature({
-  url,
-  css,
-  ComponentProps: params,
-  ...props
-}) {
-  if (css) {
-    importCSS(css).then((styleSheet) => {
-      document.adoptedStyleSheets = [
-        ...document.adoptedStyleSheets,
-        styleSheet
-      ];
-    });
-  }
-  const LazyFeature = useCachedFeature(url);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FeatureErrorBoundary, { url, 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);
-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_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");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var classBase2 = "saveLayoutPanel";
-var formField = `${classBase2}-formField`;
-var groups = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5"];
-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)(() => {
-    if (componentId) {
-      (0, import_vuu_utils.takeScreenshot)(document.getElementById(componentId)).then(
-        (screenshot2) => setScreenshot(screenshot2)
-      );
-    }
-  }, []);
-  const handleSubmit = () => {
-    onSave({
-      name: layoutName,
-      group,
-      screenshot: screenshot != null ? screenshot : "",
-      user: "User",
-      date: (0, import_vuu_utils.formatDate)(/* @__PURE__ */ new Date(), "dd.mm.yyyy")
-    });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${classBase2}-panelContainer`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${classBase2}-panelContent`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${classBase2}-formContainer`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core.FormField, { className: formField, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.FormFieldLabel, { children: "Group" }),
-          /* @__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: {
-                inputProps: {
-                  className: `${classBase2}-inputText`,
-                  placeholder: "Select Group or Enter New Name",
-                  onChange: (event) => setGroup(event.target.value)
-                }
-              },
-              width: 120,
-              onSelectionChange: (_, value) => setGroup(value || "")
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core.FormField, { className: formField, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.FormFieldLabel, { children: "Layout Name" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_core.Input,
-            {
-              inputProps: {
-                className: `${classBase2}-inputText`,
-                placeholder: "Enter Layout Name"
-              },
-              onChange: (event) => setLayoutName(event.target.value),
-              value: layoutName
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core.FormField, { className: formField, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.FormFieldLabel, { children: "Some Layout Setting" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${classBase2}-settingsGroup`, children: checkboxValues.map((value, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_vuu_ui_controls.Checkbox,
-            {
-              onToggle: () => setCheckValues(
-                (prev) => prev.includes(value) ? prev.filter((entry) => entry !== value) : [...prev, value]
-              ),
-              checked: checkValues.includes(value),
-              label: value
-            },
-            i
-          )) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core.FormField, { className: formField, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.FormFieldLabel, { children: "Some Layout Setting" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${classBase2}-settingsGroup`, children: radioValues.map((value, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_vuu_ui_controls.RadioButton,
-            {
-              onClick: () => setRadioValue(value),
-              checked: radioValue === value,
-              label: value,
-              groupName: "radioGroup"
-            },
-            i
-          )) })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${classBase2}-screenshotContainer`, children: screenshot ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "img",
-        {
-          className: `${classBase2}-screenshot`,
-          src: screenshot,
-          alt: "screenshot of current layout"
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.Text, { className: "screenshot", children: "No screenshot available" }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${classBase2}-buttonsContainer`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.Button, { className: `${classBase2}-cancelButton`, onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_core.Button,
-        {
-          className: `${classBase2}-saveButton`,
-          onClick: handleSubmit,
-          disabled: layoutName === "" || group === "",
-          children: "Save"
-        }
-      )
-    ] })
-  ] });
-};
-
-// src/layout-management/LayoutList.tsx
-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_jsx_runtime7 = require("react/jsx-runtime");
-var LayoutManagementContext = import_react7.default.createContext({ layouts: [], saveLayout: () => {
-} });
-var LayoutManagementProvider = (props) => {
-  const [layouts, setLayouts] = (0, import_react7.useState)([]);
-  (0, import_react7.useEffect)(() => {
-    const layouts2 = (0, import_vuu_filters.getLocalEntity)("layouts");
-    setLayouts(layouts2 || []);
-  }, []);
-  (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: {
-            ...metadata,
-            id: (0, import_vuu_utils2.getUniqueId)()
-          },
-          json
-        }
-      ]);
-    }
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LayoutManagementContext.Provider, { value: { layouts, saveLayout }, children: props.children });
-};
-var useLayoutManager = () => (0, import_react7.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 handleLoadLayout = (layoutId) => {
-    console.log("loading layout with id", layoutId);
-    console.log(
-      "json:",
-      layouts.find((layout) => layout.metadata.id === layoutId)
-    );
-  };
-  const layoutsByGroup = layoutMetadata.reduce((acc, cur) => {
-    if (acc[cur.group]) {
-      return {
-        ...acc,
-        [cur.group]: [...acc[cur.group], cur]
-      };
-    }
-    return {
-      ...acc,
-      [cur.group]: [cur]
-    };
-  }, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: classBase3, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase3}-header`, children: "My Layouts" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_vuu_ui_controls2.List,
-      {
-        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
-              )
-            }
-          )
-        ] })
-      }
-    )
-  ] });
-};
-
-// ../vuu-icons/src/VuuLogo.tsx
-var import_react8 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var VuuLogo = (0, import_react8.memo)(() => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    "svg",
-    {
-      width: "44",
-      height: "45",
-      viewBox: "0 0 44 45",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { clipPath: "url(#clip0_217_6990)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "path",
-            {
-              d: "M39.8642 15.5509L35.9196 7.58974L34.3369 6.85464L24.6235 22.0825L39.1628 30.618L42.3152 25.6347L39.8642 15.5509Z",
-              fill: "url(#paint0_linear_217_6990)"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "path",
-            {
-              d: "M42.6246 24.8716C41.9199 25.9157 40.9625 26.824 39.767 27.4905C38.424 28.2396 36.9563 28.597 35.5081 28.597C32.7541 28.597 30.0715 27.3094 28.4466 24.9855L15.772 3.90967L15.7655 3.9206C13.3615 0.137431 8.25372 -1.13143 4.24754 1.10507C0.178173 3.37435 -1.20852 8.39359 1.14854 12.3125L18.3445 40.9095C19.1108 42.1846 20.1816 43.1834 21.4144 43.8764C21.4241 43.8826 21.4338 43.8889 21.4435 43.8951C21.4484 43.8982 21.4549 43.9013 21.4597 43.9045C22.0332 44.2228 22.6423 44.471 23.2725 44.6536C23.3194 44.6677 23.368 44.6817 23.415 44.6942C23.6418 44.7551 23.8702 44.8097 24.1019 44.8534C24.1456 44.8612 24.1894 44.8659 24.2331 44.8737C24.4194 44.9049 24.6073 44.9314 24.7952 44.9501C24.8698 44.9579 24.9443 44.9658 25.0188 44.9704C25.2342 44.9876 25.4497 44.9985 25.6668 45.0001C25.6781 45.0001 25.6895 45.0001 25.6992 45.0001C25.7024 45.0001 25.704 45.0001 25.7073 45.0001C25.7105 45.0001 25.7121 45.0001 25.7154 45.0001C25.9503 45.0001 26.1868 44.9876 26.4217 44.9689C26.4751 44.9642 26.5286 44.9595 26.5837 44.9533C26.8137 44.9299 27.0438 44.9002 27.2738 44.8596C27.277 44.8596 27.2803 44.8596 27.2835 44.8596C27.5362 44.8144 27.7889 44.7551 28.0384 44.6864C28.0546 44.6817 28.0692 44.677 28.0854 44.6723C28.4483 44.5709 28.8063 44.4445 29.1594 44.2931C29.1659 44.29 29.174 44.2868 29.1805 44.2837C29.4494 44.1682 29.7151 44.0418 29.9759 43.8967C30.24 43.75 30.491 43.5908 30.7308 43.4206C30.9398 43.2739 31.1407 43.1179 31.3367 42.9524C31.5748 42.7495 31.8 42.5373 32.009 42.3141C32.1661 42.1471 32.3168 41.9723 32.4609 41.7913C32.5079 41.732 32.5517 41.6711 32.5954 41.6118C32.6942 41.4807 32.7882 41.3465 32.8789 41.2091C32.9259 41.1373 32.9728 41.0671 33.0182 40.9953C33.036 40.9672 33.0555 40.9407 33.0717 40.9126L42.7153 24.8763H42.6214L42.6246 24.8716Z",
-              fill: "url(#paint1_linear_217_6990)"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "path",
-            {
-              d: "M42.8402 16.4218L42.1112 15.2232L38.9636 9.58433L37.504 7.19644C37.2286 6.56123 36.579 6.11331 35.8176 6.11331C34.8083 6.11331 33.9919 6.90147 33.9919 7.87223C33.9919 8.20154 34.0907 8.50432 34.2543 8.76808L34.2349 8.78056L39.9048 18.0808C40.5884 19.2186 40.7715 20.5437 40.4199 21.8141C40.0684 23.0845 39.226 24.1458 38.045 24.806C37.2675 25.2398 36.3846 25.4693 35.4936 25.4693C33.6727 25.4693 31.9766 24.5281 31.0662 23.0143L22.9161 9.63271H22.9323L19.4899 3.90958L19.4834 3.92051C19.4235 3.8253 19.3538 3.73947 19.2907 3.64738L19.1935 3.48663C19.1935 3.48663 19.1854 3.49131 19.1821 3.49443C17.5654 1.27666 14.9799 0.0390178 12.3118 0.00936427V0H7.91199V0.02185C10.9851 -0.184164 14.0582 1.23296 15.7656 3.92051L15.7721 3.90958L28.4451 24.987C30.0699 27.3093 32.7542 28.5985 35.5066 28.5985C36.9548 28.5985 38.4225 28.2426 39.7655 27.4919C40.961 26.8255 41.9168 25.9156 42.6231 24.8731H42.717L42.6846 24.9261C43.1366 24.2347 43.4833 23.4731 43.7068 22.6615C44.2916 20.5452 43.9871 18.3352 42.8369 16.4234L42.8402 16.4218Z",
-              fill: "#F37880"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { opacity: "0.86", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              "path",
-              {
-                d: "M34.2332 8.78212L39.9031 18.0824C40.5868 19.2202 40.7698 20.5452 40.4183 21.8156C40.2044 22.5897 39.8059 23.2858 39.2616 23.8617C39.9744 23.2343 40.4879 22.4243 40.7423 21.5035C41.0938 20.2331 40.9107 18.908 40.2271 17.7703L34.5572 8.46998L34.5767 8.4575C34.413 8.19374 34.3142 7.89096 34.3142 7.56165C34.3142 7.15586 34.4584 6.78285 34.6982 6.48476C34.2672 6.80626 33.9902 7.30881 33.9902 7.87379C33.9902 8.2031 34.0891 8.50588 34.2527 8.76964L34.2332 8.78212Z",
-                fill: "white"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              "path",
-              {
-                d: "M42.6917 24.9169L42.6863 24.9256C42.6863 24.9256 42.6899 24.9187 42.6935 24.9152C42.6935 24.9152 42.6935 24.9152 42.6935 24.9169H42.6917Z",
-                fill: "white"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              "path",
-              {
-                d: "M40.0911 27.1798C38.7481 27.9289 37.2804 28.2863 35.8322 28.2863C33.0782 28.2863 30.3955 26.9988 28.7707 24.6749L16.0961 3.59744L16.0896 3.60837C14.9281 1.78077 13.1364 0.543128 11.1422 0H7.91199V0.02185C10.9851 -0.184164 14.0582 1.23296 15.7656 3.92051L15.7721 3.90958L28.4451 24.987C30.0699 27.3093 32.7542 28.5985 35.5066 28.5985C36.9548 28.5985 38.4225 28.2426 39.7655 27.4919C40.4815 27.0924 41.1084 26.6055 41.6511 26.0561C41.1862 26.479 40.6662 26.8583 40.0894 27.1798H40.0911Z",
-                fill: "white"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("defs", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-            "linearGradient",
-            {
-              id: "paint0_linear_217_6990",
-              x1: "24.6235",
-              y1: "18.7363",
-              x2: "42.3152",
-              y2: "18.7363",
-              gradientUnits: "userSpaceOnUse",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { stopColor: "#4906A5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "1", stopColor: "#D3423A" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-            "linearGradient",
-            {
-              id: "paint1_linear_217_6990",
-              x1: "-2.35794e-05",
-              y1: "22.5009",
-              x2: "42.7186",
-              y2: "22.5009",
-              gradientUnits: "userSpaceOnUse",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { stopColor: "#7C06A5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "1", stopColor: "#D3423A" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("clipPath", { id: "clip0_217_6990", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { width: "44", height: "45", fill: "white" }) })
-        ] })
-      ]
-    }
-  );
-});
-VuuLogo.displayName = "VuuLogo";
-
-// src/left-nav/LeftNav.tsx
-var import_vuu_layout4 = 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");
-
-// src/feature-list/FeatureList.tsx
-var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var classBase4 = "vuuFeatureList";
-var FeatureList = ({
-  features,
-  title = "VUU TABLES",
-  ...htmlAttributes
-}) => {
-  const ViewProps = {};
-  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,
-      {
-        closeable: true,
-        label: featureProps.title,
-        resizeable: true,
-        resize: "defer",
-        header: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Feature, { ...featureProps })
-      },
-      i
-    )) })
-  ] });
-};
-
-// src/theme-provider/ThemeProvider.tsx
-var import_react9 = 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)({
-  density: "high",
-  theme: "vuu",
-  themeMode: "light"
-});
-var DEFAULT_THEME_ATTRIBUTES = [
-  "vuu",
-  "vuu-density-high",
-  "light"
-];
-var useThemeAttributes = () => {
-  const context = (0, import_react9.useContext)(ThemeContext);
-  if (context) {
-    return [
-      `${context.theme}-theme`,
-      `${context.theme}-density-${context.density}`,
-      context.themeMode
-    ];
-  }
-  return DEFAULT_THEME_ATTRIBUTES;
-};
-var createThemedChildren = (children, theme, themeMode, density) => {
-  var _a;
-  if ((0, import_react9.isValidElement)(children)) {
-    return (0, import_react9.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,
-        `${theme}-theme`,
-        `${theme}-density-${density}`
-      ),
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      "data-mode": themeMode
-    });
-  } else {
-    console.warn(
-      `
+"use strict";var so=Object.create;var Te=Object.defineProperty;var io=Object.getOwnPropertyDescriptor;var lo=Object.getOwnPropertyNames;var uo=Object.getPrototypeOf,co=Object.prototype.hasOwnProperty;var mo=(e,t)=>{for(var o in t)Te(e,o,{get:t[o],enumerable:!0})},st=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of lo(t))!co.call(e,a)&&a!==o&&Te(e,a,{get:()=>t[a],enumerable:!(r=io(t,a))||r.enumerable});return e};var E=(e,t,o)=>(o=e!=null?so(uo(e)):{},st(t||!e||!e.__esModule?Te(o,"default",{value:e,enumerable:!0}):o,e)),po=e=>st(Te({},"__esModule",{value:!0}),e);var Go={};mo(Go,{ConnectionStatusIcon:()=>fo,ContextPanel:()=>tt,DEFAULT_DENSITY:()=>wt,DEFAULT_THEME:()=>Mt,DEFAULT_THEME_MODE:()=>Ft,DensitySwitch:()=>vo,Feature:()=>ye,FeatureList:()=>Me,LayoutManagementContext:()=>Ge,LayoutManagementProvider:()=>No,LayoutsList:()=>qe,LeftNav:()=>wo,LoginPanel:()=>Mo,SaveLayoutPanel:()=>bo,SessionEditingForm:()=>Vo,Shell:()=>Ao,ShellContextProvider:()=>_o,ThemeContext:()=>Fe,ThemeProvider:()=>De,ThemeSwitch:()=>je,getAuthDetailsFromCookies:()=>Fo,getAuthModeFromCookies:()=>Vt,logout:()=>Ke,redirectToLogin:()=>kt,useLayoutConfig:()=>Je,useLayoutManager:()=>Ye,useShellContext:()=>Jo,useShellLayout:()=>ot,useThemeAttributes:()=>Le});module.exports=po(Go);var ue=E(require("react")),it=E(require("classnames"));var X=require("react/jsx-runtime"),fo=({connectionStatus:e,className:t,element:o="span",...r})=>{let[a,n]=(0,ue.useState)("vuuConnectingStatus");(0,ue.useEffect)(()=>{switch(e){case"connected":case"reconnected":n("vuuActiveStatus");break;case"connecting":n("vuuConnectingStatus");break;case"disconnected":n("vuuDisconnectedStatus");break;default:break}},[e]);let s=ue.default.createElement(o,{...r,className:(0,it.default)("vuuStatus vuuIcon",a,t)});return(0,X.jsx)(X.Fragment,{children:(0,X.jsxs)("div",{className:"vuuStatus-container salt-theme",children:[s,(0,X.jsxs)("div",{className:"vuuStatus-text",children:["Status: ",e.toUpperCase()]})]})})};var lt=require("@salt-ds/lab"),ut=require("react"),ct=E(require("classnames")),mt=require("react/jsx-runtime"),ho="vuuDensitySwitch",go=["high","medium","low","touch"],yo="high",vo=({className:e,defaultDensity:t=yo,onChange:o})=>{let r=(0,ut.useCallback)((n,s)=>{o(s)},[o]),a=(0,ct.default)(ho,e);return(0,mt.jsx)(lt.Dropdown,{className:a,source:go,defaultSelected:t,onSelectionChange:r})};var j=E(require("react")),gt=require("@vuu-ui/vuu-layout");var dt=E(require("react")),Q=require("react/jsx-runtime"),be=class extends dt.default.Component{constructor(t){super(t),this.state={errorMessage:null}}static getDerivedStateFromError(t){return{errorMessage:t.message}}componentDidCatch(t,o){console.log(`error creating component at ${this.props.url}`),console.log(t,o)}render(){return this.state.errorMessage?(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)("h1",{children:"An error occured while creating component."}),(0,Q.jsx)("p",{children:this.state.errorMessage})]}):this.props.children}};var ft=require("react/jsx-runtime"),pt=()=>(0,ft.jsx)("div",{className:"hwLoader",children:"loading"});var ht=async e=>{let t=new CSSStyleSheet;return fetch(e).then(o=>o.text()).then(o=>t.replace(o))};var ge=require("react/jsx-runtime"),Ne=new Map,Lo=e=>{(0,j.useEffect)(()=>()=>{Ne.delete(e)},[e]),Ne.has(e)||Ne.set(e,j.default.lazy(()=>import(e)));let t=Ne.get(e);if(t)return t;throw Error(`Unable to load Lazy Feature at url ${e}`)};function Co({url:e,css:t,ComponentProps:o,...r}){t&&ht(t).then(n=>{document.adoptedStyleSheets=[...document.adoptedStyleSheets,n]});let a=Lo(e);return(0,ge.jsx)(be,{url:e,children:(0,ge.jsx)(j.Suspense,{fallback:(0,ge.jsx)(pt,{}),children:(0,ge.jsx)(a,{...r,...o})})})}var ye=j.default.memo(Co);ye.displayName="Feature";(0,gt.registerComponent)("Feature",ye,"view");var Y=require("react");var yt=require("@vuu-ui/vuu-layout"),vt=(e,t,o="latest")=>new Promise((r,a)=>{console.log(`load local config at ${e} for user ${t==null?void 0:t.username}, id ${o}`);let n=localStorage.getItem(e);if(n){let s=JSON.parse(n);r(s)}else a()}),Lt=(e,t,o)=>new Promise((r,a)=>{try{let n=(0,yt.resolveJSONPath)(o,"#main-tabs.ACTIVE_CHILD");console.log(n),localStorage.setItem(e,JSON.stringify(o)),r(void 0)}catch{a()}});var Ct=(e,t,o="latest")=>new Promise((r,a)=>{if(t===void 0)throw Error("user mustb be provided to load remote config");fetch(`${e}/${t.username}/${o}`,{}).then(n=>{n.ok?r(n.json()):a(void 0)}).catch(()=>{a(void 0)})}),St=(e,t,o)=>new Promise((r,a)=>{if(t===void 0)throw Error("user mustb be provided to load remote config");fetch(`${e}/${t.username}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(o)}).then(n=>{n.ok?r(void 0):a()})});var So={type:"Placeholder"},Je=({saveLocation:e,saveUrl:t="api/vui",user:o,defaultLayout:r=So})=>{let[a,n]=(0,Y.useState)(r),s=e==="remote",p=s?Ct:vt,u=s?St:Lt,m=(0,Y.useCallback)(async(d="latest")=>{try{let C=await p(t,o,d);n(C)}catch{n(r)}},[r,p,t,o]);(0,Y.useEffect)(()=>{m()},[m]);let l=(0,Y.useCallback)(d=>{u(t,o,d)},[u,t,o]),S=(0,Y.useCallback)(d=>m(d),[m]);return[a,l,S]};var Z=require("react"),T=require("@salt-ds/core"),ce=require("@vuu-ui/vuu-ui-controls"),Ee=require("@vuu-ui/vuu-utils");var f=require("react/jsx-runtime"),w="saveLayoutPanel",Pe=`${w}-formField`,xo=["Group 1","Group 2","Group 3","Group 4","Group 5"],To=["Value 1","Value 2","Value 3"],xt=["Value 1","Value 2","Value 3"],bo=e=>{let{onCancel:t,onSave:o,componentId:r}=e,[a,n]=(0,Z.useState)(""),[s,p]=(0,Z.useState)(""),[u,m]=(0,Z.useState)([]),[l,S]=(0,Z.useState)(xt[0]),[d,C]=(0,Z.useState)();(0,Z.useEffect)(()=>{r&&(0,Ee.takeScreenshot)(document.getElementById(r)).then(c=>C(c))},[]);let v=()=>{o({name:a,group:s,screenshot:d!=null?d:"",user:"User",date:(0,Ee.formatDate)(new Date,"dd.mm.yyyy")})};return(0,f.jsxs)("div",{className:`${w}-panelContainer`,children:[(0,f.jsxs)("div",{className:`${w}-panelContent`,children:[(0,f.jsxs)("div",{className:`${w}-formContainer`,children:[(0,f.jsxs)(T.FormField,{className:Pe,children:[(0,f.jsx)(T.FormFieldLabel,{children:"Group"}),(0,f.jsx)(ce.ComboBox,{ListProps:{style:{zIndex:1e4,border:"1px solid #777C94",borderRadius:10,boxSizing:"border-box"}},source:xo,allowFreeText:!0,InputProps:{inputProps:{className:`${w}-inputText`,placeholder:"Select Group or Enter New Name",onChange:c=>p(c.target.value)}},width:120,onSelectionChange:(c,N)=>p(N||"")})]}),(0,f.jsxs)(T.FormField,{className:Pe,children:[(0,f.jsx)(T.FormFieldLabel,{children:"Layout Name"}),(0,f.jsx)(T.Input,{inputProps:{className:`${w}-inputText`,placeholder:"Enter Layout Name"},onChange:c=>n(c.target.value),value:a})]}),(0,f.jsxs)(T.FormField,{className:Pe,children:[(0,f.jsx)(T.FormFieldLabel,{children:"Some Layout Setting"}),(0,f.jsx)("div",{className:`${w}-settingsGroup`,children:To.map((c,N)=>(0,f.jsx)(ce.Checkbox,{onToggle:()=>m(I=>I.includes(c)?I.filter(K=>K!==c):[...I,c]),checked:u.includes(c),label:c},N))})]}),(0,f.jsxs)(T.FormField,{className:Pe,children:[(0,f.jsx)(T.FormFieldLabel,{children:"Some Layout Setting"}),(0,f.jsx)("div",{className:`${w}-settingsGroup`,children:xt.map((c,N)=>(0,f.jsx)(ce.RadioButton,{onClick:()=>S(c),checked:l===c,label:c,groupName:"radioGroup"},N))})]})]}),(0,f.jsx)("div",{className:`${w}-screenshotContainer`,children:d?(0,f.jsx)("img",{className:`${w}-screenshot`,src:d,alt:"screenshot of current layout"}):(0,f.jsx)(T.Text,{className:"screenshot",children:"No screenshot available"})})]}),(0,f.jsxs)("div",{className:`${w}-buttonsContainer`,children:[(0,f.jsx)(T.Button,{className:`${w}-cancelButton`,onClick:t,children:"Cancel"}),(0,f.jsx)(T.Button,{className:`${w}-saveButton`,onClick:v,disabled:a===""||s==="",children:"Save"})]})]})};var Ze=require("@vuu-ui/vuu-ui-controls");var D=E(require("react")),ve=require("@vuu-ui/vuu-filters"),Tt=require("@vuu-ui/vuu-utils"),bt=require("react/jsx-runtime"),Ge=D.default.createContext({layouts:[],saveLayout:()=>{}}),No=e=>{let[t,o]=(0,D.useState)([]);(0,D.useEffect)(()=>{let a=(0,ve.getLocalEntity)("layouts");o(a||[])},[]),(0,D.useEffect)(()=>{(0,ve.saveLocalEntity)("layouts",t)},[t]);let r=(0,D.useCallback)(a=>{let n=(0,ve.getLocalEntity)("api/vui");n&&o(s=>[...s,{metadata:{...a,id:(0,Tt.getUniqueId)()},json:n}])},[]);return(0,bt.jsx)(Ge.Provider,{value:{layouts:t,saveLayout:r},children:e.children})},Ye=()=>(0,D.useContext)(Ge);var b=require("react/jsx-runtime"),ee="vuuLayoutList",qe=e=>{let{layouts:t}=Ye(),o=t.map(n=>n.metadata),r=n=>{console.log("loading layout with id",n),console.log("json:",t.find(s=>s.metadata.id===n))},a=o.reduce((n,s)=>n[s.group]?{...n,[s.group]:[...n[s.group],s]}:{...n,[s.group]:[s]},{});return(0,b.jsxs)("div",{className:ee,...e,children:[(0,b.jsx)("div",{className:`${ee}-header`,children:"My Layouts"}),(0,b.jsx)(Ze.List,{height:"fit-content",source:Object.entries(a),ListItem:({item:n})=>(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)("div",{className:`${ee}-groupName`,children:n==null?void 0:n[0]}),(0,b.jsx)(Ze.List,{height:"fit-content",source:n==null?void 0:n[1],ListItem:({item:s})=>(0,b.jsxs)("div",{className:`${ee}-layoutContainer`,onClick:()=>r(s==null?void 0:s.id),children:[(0,b.jsx)("img",{className:`${ee}-screenshot`,src:s==null?void 0:s.screenshot}),(0,b.jsxs)("div",{children:[(0,b.jsx)("div",{className:`${ee}-layoutName`,children:s==null?void 0:s.name}),(0,b.jsx)("div",{className:`${ee}-layoutDetails`,children:(0,b.jsx)("div",{children:`${s==null?void 0:s.user}, ${s==null?void 0:s.date}`})})]})]},s==null?void 0:s.id)})]})})]})};var Nt=require("react"),y=require("react/jsx-runtime"),ze=(0,Nt.memo)(()=>(0,y.jsxs)("svg",{width:"44",height:"45",viewBox:"0 0 44 45",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,y.jsxs)("g",{clipPath:"url(#clip0_217_6990)",children:[(0,y.jsx)("path",{d:"M39.8642 15.5509L35.9196 7.58974L34.3369 6.85464L24.6235 22.0825L39.1628 30.618L42.3152 25.6347L39.8642 15.5509Z",fill:"url(#paint0_linear_217_6990)"}),(0,y.jsx)("path",{d:"M42.6246 24.8716C41.9199 25.9157 40.9625 26.824 39.767 27.4905C38.424 28.2396 36.9563 28.597 35.5081 28.597C32.7541 28.597 30.0715 27.3094 28.4466 24.9855L15.772 3.90967L15.7655 3.9206C13.3615 0.137431 8.25372 -1.13143 4.24754 1.10507C0.178173 3.37435 -1.20852 8.39359 1.14854 12.3125L18.3445 40.9095C19.1108 42.1846 20.1816 43.1834 21.4144 43.8764C21.4241 43.8826 21.4338 43.8889 21.4435 43.8951C21.4484 43.8982 21.4549 43.9013 21.4597 43.9045C22.0332 44.2228 22.6423 44.471 23.2725 44.6536C23.3194 44.6677 23.368 44.6817 23.415 44.6942C23.6418 44.7551 23.8702 44.8097 24.1019 44.8534C24.1456 44.8612 24.1894 44.8659 24.2331 44.8737C24.4194 44.9049 24.6073 44.9314 24.7952 44.9501C24.8698 44.9579 24.9443 44.9658 25.0188 44.9704C25.2342 44.9876 25.4497 44.9985 25.6668 45.0001C25.6781 45.0001 25.6895 45.0001 25.6992 45.0001C25.7024 45.0001 25.704 45.0001 25.7073 45.0001C25.7105 45.0001 25.7121 45.0001 25.7154 45.0001C25.9503 45.0001 26.1868 44.9876 26.4217 44.9689C26.4751 44.9642 26.5286 44.9595 26.5837 44.9533C26.8137 44.9299 27.0438 44.9002 27.2738 44.8596C27.277 44.8596 27.2803 44.8596 27.2835 44.8596C27.5362 44.8144 27.7889 44.7551 28.0384 44.6864C28.0546 44.6817 28.0692 44.677 28.0854 44.6723C28.4483 44.5709 28.8063 44.4445 29.1594 44.2931C29.1659 44.29 29.174 44.2868 29.1805 44.2837C29.4494 44.1682 29.7151 44.0418 29.9759 43.8967C30.24 43.75 30.491 43.5908 30.7308 43.4206C30.9398 43.2739 31.1407 43.1179 31.3367 42.9524C31.5748 42.7495 31.8 42.5373 32.009 42.3141C32.1661 42.1471 32.3168 41.9723 32.4609 41.7913C32.5079 41.732 32.5517 41.6711 32.5954 41.6118C32.6942 41.4807 32.7882 41.3465 32.8789 41.2091C32.9259 41.1373 32.9728 41.0671 33.0182 40.9953C33.036 40.9672 33.0555 40.9407 33.0717 40.9126L42.7153 24.8763H42.6214L42.6246 24.8716Z",fill:"url(#paint1_linear_217_6990)"}),(0,y.jsx)("path",{d:"M42.8402 16.4218L42.1112 15.2232L38.9636 9.58433L37.504 7.19644C37.2286 6.56123 36.579 6.11331 35.8176 6.11331C34.8083 6.11331 33.9919 6.90147 33.9919 7.87223C33.9919 8.20154 34.0907 8.50432 34.2543 8.76808L34.2349 8.78056L39.9048 18.0808C40.5884 19.2186 40.7715 20.5437 40.4199 21.8141C40.0684 23.0845 39.226 24.1458 38.045 24.806C37.2675 25.2398 36.3846 25.4693 35.4936 25.4693C33.6727 25.4693 31.9766 24.5281 31.0662 23.0143L22.9161 9.63271H22.9323L19.4899 3.90958L19.4834 3.92051C19.4235 3.8253 19.3538 3.73947 19.2907 3.64738L19.1935 3.48663C19.1935 3.48663 19.1854 3.49131 19.1821 3.49443C17.5654 1.27666 14.9799 0.0390178 12.3118 0.00936427V0H7.91199V0.02185C10.9851 -0.184164 14.0582 1.23296 15.7656 3.92051L15.7721 3.90958L28.4451 24.987C30.0699 27.3093 32.7542 28.5985 35.5066 28.5985C36.9548 28.5985 38.4225 28.2426 39.7655 27.4919C40.961 26.8255 41.9168 25.9156 42.6231 24.8731H42.717L42.6846 24.9261C43.1366 24.2347 43.4833 23.4731 43.7068 22.6615C44.2916 20.5452 43.9871 18.3352 42.8369 16.4234L42.8402 16.4218Z",fill:"#F37880"}),(0,y.jsxs)("g",{opacity:"0.86",children:[(0,y.jsx)("path",{d:"M34.2332 8.78212L39.9031 18.0824C40.5868 19.2202 40.7698 20.5452 40.4183 21.8156C40.2044 22.5897 39.8059 23.2858 39.2616 23.8617C39.9744 23.2343 40.4879 22.4243 40.7423 21.5035C41.0938 20.2331 40.9107 18.908 40.2271 17.7703L34.5572 8.46998L34.5767 8.4575C34.413 8.19374 34.3142 7.89096 34.3142 7.56165C34.3142 7.15586 34.4584 6.78285 34.6982 6.48476C34.2672 6.80626 33.9902 7.30881 33.9902 7.87379C33.9902 8.2031 34.0891 8.50588 34.2527 8.76964L34.2332 8.78212Z",fill:"white"}),(0,y.jsx)("path",{d:"M42.6917 24.9169L42.6863 24.9256C42.6863 24.9256 42.6899 24.9187 42.6935 24.9152C42.6935 24.9152 42.6935 24.9152 42.6935 24.9169H42.6917Z",fill:"white"}),(0,y.jsx)("path",{d:"M40.0911 27.1798C38.7481 27.9289 37.2804 28.2863 35.8322 28.2863C33.0782 28.2863 30.3955 26.9988 28.7707 24.6749L16.0961 3.59744L16.0896 3.60837C14.9281 1.78077 13.1364 0.543128 11.1422 0H7.91199V0.02185C10.9851 -0.184164 14.0582 1.23296 15.7656 3.92051L15.7721 3.90958L28.4451 24.987C30.0699 27.3093 32.7542 28.5985 35.5066 28.5985C36.9548 28.5985 38.4225 28.2426 39.7655 27.4919C40.4815 27.0924 41.1084 26.6055 41.6511 26.0561C41.1862 26.479 40.6662 26.8583 40.0894 27.1798H40.0911Z",fill:"white"})]})]}),(0,y.jsxs)("defs",{children:[(0,y.jsxs)("linearGradient",{id:"paint0_linear_217_6990",x1:"24.6235",y1:"18.7363",x2:"42.3152",y2:"18.7363",gradientUnits:"userSpaceOnUse",children:[(0,y.jsx)("stop",{stopColor:"#4906A5"}),(0,y.jsx)("stop",{offset:"1",stopColor:"#D3423A"})]}),(0,y.jsxs)("linearGradient",{id:"paint1_linear_217_6990",x1:"-2.35794e-05",y1:"22.5009",x2:"42.7186",y2:"22.5009",gradientUnits:"userSpaceOnUse",children:[(0,y.jsx)("stop",{stopColor:"#7C06A5"}),(0,y.jsx)("stop",{offset:"1",stopColor:"#D3423A"})]}),(0,y.jsx)("clipPath",{id:"clip0_217_6990",children:(0,y.jsx)("rect",{width:"44",height:"45",fill:"white"})})]})]}));ze.displayName="VuuLogo";var re=require("@vuu-ui/vuu-layout"),q=require("@vuu-ui/vuu-ui-controls"),He=E(require("classnames"));var oe=require("react");var we=require("@vuu-ui/vuu-layout");var te=require("react/jsx-runtime"),Pt="vuuFeatureList",Me=({features:e,title:t="VUU TABLES",...o})=>{let r={};return console.log({features:e}),(0,te.jsxs)("div",{...o,className:Pt,children:[(0,te.jsx)("div",{className:`${Pt}-header`,children:t}),(0,te.jsx)(we.Palette,{orientation:"vertical",ViewProps:r,children:e.map((a,n)=>(0,te.jsx)(we.PaletteItem,{closeable:!0,label:a.title,resizeable:!0,resize:"defer",header:!0,children:(0,te.jsx)(ye,{...a})},n))})]})};var B=require("react"),Et=E(require("classnames")),Dt=require("react/jsx-runtime"),wt="medium",Mt="salt-theme",Ft="light",Fe=(0,B.createContext)({density:"high",theme:"vuu",themeMode:"light"}),Po=["vuu","vuu-density-high","light"],Le=()=>{let e=(0,B.useContext)(Fe);return e?[`${e.theme}-theme`,`${e.theme}-density-${e.density}`,e.themeMode]:Po},Eo=(e,t,o,r)=>{var a;return(0,B.isValidElement)(e)?(0,B.cloneElement)(e,{className:(0,Et.default)((a=e.props)==null?void 0:a.className,`${t}-theme`,`${t}-density-${r}`),"data-mode":o}):(console.warn(`
 ThemeProvider can only apply CSS classes for theming to a single nested child element of the ThemeProvider.
-          Wrap elements with a single container`
-    );
-    return children;
-  }
-};
-var ThemeProvider = ({
-  applyThemeClasses = false,
-  children,
-  theme: themeProp,
-  themeMode: themeModeProp,
-  density: densityProp
-}) => {
-  var _a, _b, _c;
-  const {
-    density: inheritedDensity,
-    themeMode: inheritedThemeMode,
-    theme: inheritedTheme
-  } = (0, import_react9.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;
-  const themedChildren = applyThemeClasses ? createThemedChildren(children, theme, themeMode, density) : children;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
-};
-ThemeProvider.displayName = "ThemeProvider";
-
-// src/left-nav/LeftNav.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var classBase5 = "vuuLeftNav";
-var LeftNav = ({
-  "data-path": path,
-  features,
-  onResize,
-  sizeCollapsed = 80,
-  sizeContent = 240,
-  sizeExpanded = 240,
-  style: styleProp,
-  tableFeatures,
-  ...htmlAttributes
-}) => {
-  const dispatch = (0, import_vuu_layout4.useLayoutProviderDispatch)();
-  const [navState, setNavState] = (0, import_react10.useState)({
-    activeTabIndex: 0,
-    navStatus: "menu-full"
-  });
-  const [themeClass] = useThemeAttributes();
-  const toggleNavWidth = (0, import_react10.useCallback)(
-    (navStatus) => {
-      switch (navStatus) {
-        case "menu-icons":
-          return sizeExpanded;
-        case "menu-full":
-          return sizeCollapsed;
-        case "menu-full-content":
-          return sizeCollapsed + sizeContent;
-        case "menu-icons-content":
-          return sizeExpanded + sizeContent;
-      }
-    },
-    [sizeCollapsed, sizeContent, sizeExpanded]
-  );
-  const toggleNavStatus = (navStatus) => {
-    switch (navStatus) {
-      case "menu-icons":
-        return "menu-full";
-      case "menu-full":
-        return "menu-icons";
-      case "menu-full-content":
-        return "menu-icons-content";
-      case "menu-icons-content":
-        return "menu-full-content";
-    }
-  };
-  const getWidthAndStatus = (0, import_react10.useCallback)(
-    (navState2, tabIndex) => {
-      if (tabIndex === 0) {
-        const newNavState = navState2 === "menu-full-content" ? "menu-full" : navState2 === "menu-icons-content" ? "menu-icons" : navState2;
-        return newNavState === "menu-icons" ? [sizeCollapsed, newNavState] : [sizeExpanded, newNavState];
-      } else {
-        const newNavState = navState2 === "menu-full" ? "menu-full-content" : navState2 === "menu-icons" ? "menu-icons-content" : navState2;
-        return newNavState === "menu-icons-content" ? [sizeCollapsed + sizeContent, newNavState] : [sizeExpanded + sizeContent, newNavState];
-      }
-    },
-    [sizeCollapsed, sizeContent, sizeExpanded]
-  );
-  const handleTabSelection = (0, import_react10.useCallback)(
-    (value) => {
-      const [width, navStatus] = getWidthAndStatus(navState.navStatus, value);
-      setNavState({
-        activeTabIndex: value,
-        navStatus
-      });
-      dispatch({
-        type: import_vuu_layout4.Action.LAYOUT_RESIZE,
-        path,
-        size: width
-      });
-    },
-    [dispatch, getWidthAndStatus, navState, path]
-  );
-  const toggleSize = (0, import_react10.useCallback)(() => {
-    const { activeTabIndex, navStatus: currentNavStatus } = navState;
-    setNavState({
-      activeTabIndex,
-      navStatus: toggleNavStatus(currentNavStatus)
-    });
-    dispatch({
-      type: import_vuu_layout4.Action.LAYOUT_RESIZE,
-      path,
-      size: toggleNavWidth(currentNavStatus)
-    });
-  }, [dispatch, navState, path, toggleNavWidth]);
-  const style = {
-    ...styleProp,
-    "--nav-menu-collapsed-width": `${sizeCollapsed}px`,
-    "--nav-menu-expanded-width": `${sizeExpanded}px`
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "div",
-    {
-      ...htmlAttributes,
-      className: (0, import_classnames4.default)(classBase5, `${classBase5}-${navState.navStatus}`),
-      style,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          "div",
-          {
-            className: (0, import_classnames4.default)(`${classBase5}-menu-primary`, themeClass),
-            "data-mode": "dark",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "vuuLeftNav-logo", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(VuuLogo, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase5}-main`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-                import_vuu_ui_controls3.Tabstrip,
-                {
-                  activeTabIndex: navState.activeTabIndex,
-                  animateSelectionThumb: false,
-                  className: `${classBase5}-Tabstrip`,
-                  onActiveChange: handleTabSelection,
-                  orientation: "vertical",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_ui_controls3.Tab, { "data-icon": "demo", label: "DEMO" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_ui_controls3.Tab, { "data-icon": "features", label: "VUU FEATURES" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_ui_controls3.Tab, { "data-icon": "tables", label: "VUU TABLES" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_ui_controls3.Tab, { "data-icon": "templates", label: "LAYOUT TEMPLATES" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_ui_controls3.Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "vuuLeftNav-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                "button",
-                {
-                  className: (0, import_classnames4.default)("vuuLeftNav-toggleButton", {
-                    "vuuLeftNav-toggleButton-open": navState.navStatus.startsWith("menu-full"),
-                    "vuuLeftNav-toggleButton-closed": navState.navStatus.startsWith("menu-icons")
-                  }),
-                  "data-icon": navState.navStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
-                  onClick: toggleSize
-                }
-              ) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          import_vuu_layout4.Stack,
-          {
-            active: navState.activeTabIndex - 1,
-            className: `${classBase5}-menu-secondary`,
-            showTabs: false,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FeatureList, { features, title: "Vuu Features" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FeatureList, { features: tableFeatures, title: "Vuu Tables" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { background: "green", height: "100%" }, children: "Layout Templates" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "vuuLeftNav-drawer", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LayoutsList, {}) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/login/LoginPanel.tsx
-var import_react11 = require("react");
-var import_core2 = require("@salt-ds/core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var classBase6 = "vuuLoginPanel";
-var LoginPanel = ({
-  requirePassword = true,
-  onSubmit
-}) => {
-  const [username, setUserName] = (0, import_react11.useState)("");
-  const [password, setPassword] = (0, import_react11.useState)("");
-  const login = () => {
-    onSubmit(username, password);
-  };
-  const handleUsername = (evt) => {
-    setUserName(evt.target.value);
-  };
-  const handlePassword = (evt) => {
-    setPassword(evt.target.value);
-  };
-  const dataIsValid = username.trim() !== "" && (requirePassword === false || password.trim() !== "");
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: classBase6, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core2.FormField, { style: { width: 200 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core2.FormFieldLabel, { children: "Username" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core2.Input, { value: username, id: "text-username", onChange: handleUsername })
-    ] }),
-    requirePassword ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core2.FormField, { style: { width: 200 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core2.FormFieldLabel, { children: "Password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_core2.Input,
-        {
-          inputProps: {
-            type: "password"
-          },
-          value: password,
-          id: "text-password",
-          onChange: handlePassword
-        }
-      )
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_core2.Button,
-      {
-        className: `${classBase6}-login`,
-        disabled: !dataIsValid,
-        onClick: login,
-        variant: "cta",
-        children: "Login"
-      }
-    )
-  ] });
-};
-
-// src/login/login-utils.ts
-var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
-var getAuthModeFromCookies = () => {
-  const mode = (0, import_vuu_utils3.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");
-  return [username, token];
-};
-var getDefaultLoginUrl = () => {
-  const authMode = getAuthModeFromCookies();
-  return authMode === "login" ? "login.html" : "demo.html";
-};
-var redirectToLogin = (loginUrl = getDefaultLoginUrl()) => {
-  window.location.href = loginUrl;
-};
-var logout = (loginUrl) => {
-  document.cookie = "vuu-username= ; expires = Thu, 01 Jan 1970 00:00:00 GMT";
-  document.cookie = "vuu-auth-token= ; expires = Thu, 01 Jan 1970 00:00:00 GMT";
-  redirectToLogin(loginUrl);
-};
-
-// src/session-editing-form/SessionEditingForm.tsx
-var import_react12 = 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_jsx_runtime14 = require("react/jsx-runtime");
-var classBase7 = "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_utils4.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_utils4.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_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 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_utils4.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_core3.useIdMemo)(idProp);
-  const handleChange = (0, import_react12.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_utils4.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)(
-    (evt) => {
-      const [field, value] = getFieldNameAndValue(evt);
-      const { type } = getField(fields, field);
-      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 applyAction = (0, import_react12.useCallback)(
-    (action) => {
-      if (typeof action === "object" && action !== null) {
-        if ("type" in action && action.type === "CLOSE_DIALOG_ACTION") {
-          onClose();
-        }
-      }
-    },
-    [onClose]
-  );
-  const handleSubmit = (0, import_react12.useCallback)(async () => {
-    const response = await dataSource.menuRpcCall({
-      type: "VP_EDIT_SUBMIT_FORM_RPC"
-    });
-    if ((0, import_vuu_data.isErrorResponse)(response)) {
-      setErrorMessage(response.error);
-    } else if ((0, import_vuu_data.hasAction)(response)) {
-      applyAction(response.action);
-    }
-  }, [applyAction, dataSource]);
-  const handleKeyDown = (0, import_react12.useCallback)(
-    (evt) => {
-      if (evt.key === "Enter" && dataStatusRef.current === Status.changed) {
-        handleSubmit();
-      }
-    },
-    [handleSubmit]
-  );
-  const handleCancel = (0, import_react12.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_runtime14.jsx)("div", { className: `${classBase7}-fieldValue vuuReadOnly`, children: value });
-    } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        "input",
-        {
-          className: `${classBase7}-fieldValue`,
-          "data-field": field.name,
-          onBlur: handleBlur,
-          onChange: handleChange,
-          type: "text",
-          value,
-          id: `${id}-input-${field.name}`
-        }
-      );
-    }
-  };
-  (0, import_react12.useEffect)(() => {
-    if (formContentRef.current) {
-      const firstInput = formContentRef.current.querySelector(
-        "input"
-      );
-      if (firstInput) {
-        setTimeout(() => {
-          firstInput.focus();
-          firstInput.select();
-        }, 100);
-      }
-    }
-  }, []);
-  (0, import_react12.useEffect)(() => {
-    return () => {
-      if (dataSource) {
-        dataSource.unsubscribe();
-      }
-    };
-  }, [dataSource]);
-  const isDirty = dataStatusRef.current === Status.changed;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames5.default)(classBase7, className), children: [
-    errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      "div",
-      {
-        className: `${classBase7}-errorBanner`,
-        "data-icon": "error",
-        title: errorMessage,
-        children: "Error, edit(s) not saved"
-      }
-    ) : void 0,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      "div",
-      {
-        className: `${classBase7}-content`,
-        ref: formContentRef,
-        onKeyDown: handleKeyDown,
-        children: fields.map((field) => {
-          var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `${classBase7}-field`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "label",
-              {
-                className: (0, import_classnames5.default)(`${classBase7}-fieldLabel`, {
-                  [`${classBase7}-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_runtime14.jsxs)("div", { className: `${classBase7}-buttonbar salt-theme salt-density-high`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_core4.Button,
-        {
-          type: "submit",
-          variant: "cta",
-          disabled: !isDirty,
-          onClick: handleSubmit,
-          children: "Submit"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core4.Button, { variant: "secondary", onClick: handleCancel, children: "Cancel" })
-    ] })
-  ] });
-};
-
-// 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");
-
-// src/app-header/AppHeader.tsx
-var import_react15 = require("react");
-
-// src/user-profile/UserProfile.tsx
-var import_core6 = require("@salt-ds/core");
-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_lab2 = require("@salt-ds/lab");
-var import_core5 = require("@salt-ds/core");
-var import_icons = require("@salt-ds/icons");
-var import_react13 = require("react");
-
-// src/get-layout-history.ts
-var getLayoutHistory = async (user) => {
-  const history = await fetch(`api/vui/${user.username}`, {}).then((response) => {
-    return response.ok ? response.json() : null;
-  }).catch(() => {
-    console.log("error getting history");
-  });
-  return history;
-};
-
-// src/user-profile/UserPanel.tsx
-var import_jsx_runtime15 = 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_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)(() => {
-    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")}`
-      }));
-      console.log({ sortedHistory });
-      setHistory(sortedHistory);
-    }
-    getHistory();
-  }, [user]);
-  const handleHisorySelected = (0, import_react13.useCallback)(
-    (evt, selected2) => {
-      if (selected2) {
-        onNavigate(selected2.id);
-      }
-    },
-    [onNavigate]
-  );
-  const handleLogout = (0, import_react13.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_runtime15.jsxs)("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_lab2.List,
-      {
-        ListItem: HistoryListItem,
-        className: "vuuUserPanel-history",
-        onSelect: handleHisorySelected,
-        selected,
-        source: history
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core5.Button, { "aria-label": "logout", onClick: handleLogout, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons.ExportIcon, {}),
-      " Logout"
-    ] }) })
-  ] });
-});
-
-// src/user-profile/UserProfile.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var UserProfile = ({
-  layoutId,
-  loginUrl,
-  onNavigate,
-  user
-}) => {
-  const handleNavigate = (id) => {
-    onNavigate(id);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_lab3.DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core6.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons2.UserSolidIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      UserPanel,
-      {
-        layoutId,
-        loginUrl,
-        onNavigate: handleNavigate,
-        user
-      }
-    )
-  ] });
-};
-
-// 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_jsx_runtime17 = require("react/jsx-runtime");
-var classBase8 = "vuuThemeSwitch";
-var ThemeSwitch = ({
-  className: classNameProp,
-  defaultMode: defaultModeProp,
-  mode: modeProp,
-  onChange,
-  ...htmlAttributes
-}) => {
-  const [mode, setMode] = (0, import_core7.useControlled)({
-    controlled: modeProp,
-    default: defaultModeProp != null ? defaultModeProp : "light",
-    name: "ThemeSwitch",
-    state: "mode"
-  });
-  const handleChangeSecondary = (0, import_react14.useCallback)(
-    (evt) => {
-      const { value } = evt.target;
-      setMode(value);
-      onChange(value);
-    },
-    [onChange, setMode]
-  );
-  const className = (0, import_classnames6.default)(classBase8, classNameProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    import_core7.ToggleButtonGroup,
-    {
-      className,
-      ...htmlAttributes,
-      onChange: handleChangeSecondary,
-      value: mode,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core7.ToggleButton, { "aria-label": "alert", "data-icon": "light", value: "dark" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core7.ToggleButton, { "aria-label": "home", "data-icon": "dark", value: "light" })
-      ]
-    }
-  );
-};
-
-// src/app-header/AppHeader.tsx
-var import_classnames7 = __toESM(require("classnames"));
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var classBase9 = "vuuAppHeader";
-var AppHeader = ({
-  className: classNameProp,
-  layoutId,
-  loginUrl,
-  onNavigate,
-  onSwitchTheme,
-  themeMode = "light",
-  user,
-  ...htmlAttributes
-}) => {
-  const className = (0, import_classnames7.default)(classBase9, classNameProp);
-  const handleSwitchTheme = (0, import_react15.useCallback)(
-    (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
-    [onSwitchTheme]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("header", { className, ...htmlAttributes, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      UserProfile,
-      {
-        layoutId,
-        loginUrl,
-        onNavigate,
-        user
-      }
-    )
-  ] });
-};
-
-// src/shell.tsx
-var import_vuu_utils6 = 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_jsx_runtime19 = require("react/jsx-runtime");
-var classBase10 = "vuuContextPanel";
-var ContextPanel = ({
-  className: classNameProp,
-  expanded = false,
-  content: contentProp,
-  overlay = false,
-  title
-}) => {
-  const dispatchLayoutAction = (0, import_vuu_layout5.useLayoutProviderDispatch)();
-  const handleClose = (0, import_react16.useCallback)(() => {
-    dispatchLayoutAction({
-      path: "#context-panel",
-      propName: "expanded",
-      propValue: false,
-      type: "set-prop"
-    });
-  }, [dispatchLayoutAction]);
-  const className = (0, import_classnames8.default)(classBase10, classNameProp, {
-    [`${classBase10}-expanded`]: expanded,
-    [`${classBase10}-inline`]: overlay !== true,
-    [`${classBase10}-overlay`]: overlay
-  });
-  const content = (0, import_react16.useMemo)(
-    () => contentProp ? (0, import_vuu_layout5.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: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `${classBase10}-header`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: `${classBase10}-title`, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_core8.Button,
-        {
-          className: `${classBase10}-close`,
-          "data-icon": "close",
-          onClick: handleClose,
-          variant: "secondary"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `${classBase10}-content`, children: content })
-  ] }) });
-};
-
-// src/shell-layouts/useFullHeightLeftPanel.tsx
-var import_vuu_layout6 = 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,
-    {
-      className: "App",
-      style: {
-        flexDirection: "row",
-        height: "100%",
-        width: "100%"
-      },
-      children: [
-        leftSidePanel,
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          import_vuu_layout6.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)(
-          ContextPanel,
-          {
-            id: "context-panel",
-            overlay: true,
-            title: "Column Settings"
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/shell-layouts/useInlayLeftPanel.tsx
-var import_vuu_layout7 = require("@vuu-ui/vuu-layout");
-var import_react17 = 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)(
-    (e) => {
-      var _a;
-      const target = e.target;
-      if (!((_a = paletteView.current) == null ? void 0 : _a.contains(target))) {
-        setOpen(!open);
-      }
-    },
-    [open]
-  );
-  const getDrawers = (0, import_react17.useCallback)(
-    (leftSidePanel2) => {
-      const drawers = [];
-      drawers.push(
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_vuu_layout7.Drawer,
-          {
-            onClick: handleDrawerClick,
-            open,
-            position: "left",
-            inline: true,
-            peekaboo: true,
-            sizeOpen: 200,
-            toggleButton: "end",
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_vuu_layout7.View,
-              {
-                className: "vuuShell-palette",
-                id: "vw-app-palette",
-                ref: paletteView,
-                style: { height: "100%" },
-                children: leftSidePanel2
-              },
-              "app-palette"
-            )
-          },
-          "left-panel"
-        )
-      );
-      return drawers;
-    },
-    [handleDrawerClick, open]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    import_vuu_layout7.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_layout7.DraggableLayout,
-            {
-              dropTarget: true,
-              style: { width: "100%", height: "100%" }
-            },
-            "main-content"
-          )
-        ) })
-      ]
-    }
-  );
-};
-
-// src/shell-layouts/useShellLayout.ts
-var useShellLayout = ({
-  leftSidePanelLayout = "inlay",
-  ...props
-}) => {
-  const useLayoutHook = leftSidePanelLayout === "inlay" ? useInlayLeftPanel : useFullHeightLeftPanel;
-  return useLayoutHook(props);
-};
-
-// 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 Shell = ({
-  LayoutProps,
-  children,
-  className: classNameProp,
-  defaultLayout = warningLayout,
-  leftSidePanel,
-  leftSidePanelLayout,
-  loginUrl,
-  saveLocation = "remote",
-  saveUrl,
-  serverUrl,
-  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) => {
-      try {
-        console.log(`handle layout changed ${layoutChangeReason}`);
-        saveLayoutConfig(layout2);
-      } catch {
-        error == null ? void 0 : error("Failed to save layout");
-      }
-    },
-    [saveLayoutConfig]
-  );
-  const handleSwitchTheme = (0, import_react18.useCallback)((mode) => {
-    if (rootRef.current) {
-      rootRef.current.dataset.mode = mode;
-    }
-  }, []);
-  const handleNavigate = (0, import_react18.useCallback)(
-    (id) => {
-      layoutId.current = id;
-      loadLayoutById(id);
-    },
-    [loadLayoutById]
-  );
-  (0, import_react18.useEffect)(() => {
-    if (serverUrl && user.token) {
-      (0, import_vuu_data2.connectToServer)({
-        authToken: user.token,
-        url: serverUrl,
-        username: user.username
-      });
-    }
-  }, [serverUrl, user.token, user.username]);
-  const [themeClass, densityClass, dataMode] = useThemeAttributes();
-  const className = (0, import_classnames9.default)("vuuShell", classNameProp, themeClass, densityClass);
-  const shellLayout = useShellLayout({
-    leftSidePanelLayout,
-    appHeader: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      AppHeader,
-      {
-        layoutId: layoutId.current,
-        loginUrl,
-        user,
-        onNavigate: handleNavigate,
-        onSwitchTheme: handleSwitchTheme
-      }
-    ),
-    leftSidePanel
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ThemeProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_vuu_layout8.LayoutProvider,
-      {
-        ...LayoutProps,
-        layout,
-        onLayoutChange: handleLayoutChange,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_vuu_layout8.DraggableLayout,
-          {
-            className,
-            "data-mode": dataMode,
-            ref: rootRef,
-            ...htmlAttributes,
-            children: shellLayout
-          }
-        )
-      }
-    ),
-    children
-  ] });
-};
-
-// src/ShellContextProvider.tsx
-var import_react19 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var defaultConfig = {};
-var ShellContext = (0, import_react19.createContext)(defaultConfig);
-var Provider = ({
-  children,
-  context,
-  inheritedContext
-}) => {
-  const mergedContext = {
-    ...inheritedContext,
-    ...context
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ShellContext.Provider, { value: mergedContext, children });
-};
-var ShellContextProvider = ({
-  children,
-  value
-}) => {
-  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);
-};
+          Wrap elements with a single container`),e)},De=({applyThemeClasses:e=!1,children:t,theme:o,themeMode:r,density:a})=>{var d,C,v;let{density:n,themeMode:s,theme:p}=(0,B.useContext)(Fe),u=(d=a!=null?a:n)!=null?d:wt,m=(C=r!=null?r:s)!=null?C:Ft,l=(v=o!=null?o:p)!=null?v:Mt,S=e?Eo(t,l,m,u):t;return(0,Dt.jsx)(Fe.Provider,{value:{themeMode:m,density:u,theme:l},children:S})};De.displayName="ThemeProvider";var h=require("react/jsx-runtime"),me="vuuLeftNav",wo=({"data-path":e,features:t,onResize:o,sizeCollapsed:r=80,sizeContent:a=240,sizeExpanded:n=240,style:s,tableFeatures:p,...u})=>{let m=(0,re.useLayoutProviderDispatch)(),[l,S]=(0,oe.useState)({activeTabIndex:0,navStatus:"menu-full"}),[d]=Le(),C=(0,oe.useCallback)(g=>{switch(g){case"menu-icons":return n;case"menu-full":return r;case"menu-full-content":return r+a;case"menu-icons-content":return n+a}},[r,a,n]),v=g=>{switch(g){case"menu-icons":return"menu-full";case"menu-full":return"menu-icons";case"menu-full-content":return"menu-icons-content";case"menu-icons-content":return"menu-full-content"}},c=(0,oe.useCallback)((g,M)=>{if(M===0){let P=g==="menu-full-content"?"menu-full":g==="menu-icons-content"?"menu-icons":g;return P==="menu-icons"?[r,P]:[n,P]}else{let P=g==="menu-full"?"menu-full-content":g==="menu-icons"?"menu-icons-content":g;return P==="menu-icons-content"?[r+a,P]:[n+a,P]}},[r,a,n]),N=(0,oe.useCallback)(g=>{let[M,P]=c(l.navStatus,g);S({activeTabIndex:g,navStatus:P}),m({type:re.Action.LAYOUT_RESIZE,path:e,size:M})},[m,c,l,e]),I=(0,oe.useCallback)(()=>{let{activeTabIndex:g,navStatus:M}=l;S({activeTabIndex:g,navStatus:v(M)}),m({type:re.Action.LAYOUT_RESIZE,path:e,size:C(M)})},[m,l,e,C]),K={...s,"--nav-menu-collapsed-width":`${r}px`,"--nav-menu-expanded-width":`${n}px`};return(0,h.jsxs)("div",{...u,className:(0,He.default)(me,`${me}-${l.navStatus}`),style:K,children:[(0,h.jsxs)("div",{className:(0,He.default)(`${me}-menu-primary`,d),"data-mode":"dark",children:[(0,h.jsx)("div",{className:"vuuLeftNav-logo",children:(0,h.jsx)(ze,{})}),(0,h.jsx)("div",{className:`${me}-main`,children:(0,h.jsxs)(q.Tabstrip,{activeTabIndex:l.activeTabIndex,animateSelectionThumb:!1,className:`${me}-Tabstrip`,onActiveChange:N,orientation:"vertical",children:[(0,h.jsx)(q.Tab,{"data-icon":"demo",label:"DEMO"}),(0,h.jsx)(q.Tab,{"data-icon":"features",label:"VUU FEATURES"}),(0,h.jsx)(q.Tab,{"data-icon":"tables",label:"VUU TABLES"}),(0,h.jsx)(q.Tab,{"data-icon":"templates",label:"LAYOUT TEMPLATES"}),(0,h.jsx)(q.Tab,{"data-icon":"layouts",label:"MY LAYOUTS"})]})}),(0,h.jsx)("div",{className:"vuuLeftNav-buttonBar",children:(0,h.jsx)("button",{className:(0,He.default)("vuuLeftNav-toggleButton",{"vuuLeftNav-toggleButton-open":l.navStatus.startsWith("menu-full"),"vuuLeftNav-toggleButton-closed":l.navStatus.startsWith("menu-icons")}),"data-icon":l.navStatus.startsWith("menu-full")?"chevron-left":"chevron-right",onClick:I})})]}),(0,h.jsxs)(re.Stack,{active:l.activeTabIndex-1,className:`${me}-menu-secondary`,showTabs:!1,children:[(0,h.jsx)(Me,{features:t,title:"Vuu Features"}),(0,h.jsx)(Me,{features:p,title:"Vuu Tables"}),(0,h.jsx)("div",{style:{background:"green",height:"100%"},children:"Layout Templates"}),(0,h.jsx)("div",{className:"vuuLeftNav-drawer",children:(0,h.jsx)(qe,{})})]})]})};var We=require("react"),H=require("@salt-ds/core");var V=require("react/jsx-runtime"),Ht="vuuLoginPanel",Mo=({requirePassword:e=!0,onSubmit:t})=>{let[o,r]=(0,We.useState)(""),[a,n]=(0,We.useState)(""),s=()=>{t(o,a)},p=l=>{r(l.target.value)},u=l=>{n(l.target.value)},m=o.trim()!==""&&(e===!1||a.trim()!=="");return(0,V.jsxs)("div",{className:Ht,children:[(0,V.jsxs)(H.FormField,{style:{width:200},children:[(0,V.jsx)(H.FormFieldLabel,{children:"Username"}),(0,V.jsx)(H.Input,{value:o,id:"text-username",onChange:p})]}),e?(0,V.jsxs)(H.FormField,{style:{width:200},children:[(0,V.jsx)(H.FormFieldLabel,{children:"Password"}),(0,V.jsx)(H.Input,{inputProps:{type:"password"},value:a,id:"text-password",onChange:u})]}):null,(0,V.jsx)(H.Button,{className:`${Ht}-login`,disabled:!m,onClick:s,variant:"cta",children:"Login"})]})};var Ve=require("@vuu-ui/vuu-utils"),Vt=()=>{let e=(0,Ve.getCookieValue)("vuu-auth-mode");return e!=null?e:""},Fo=()=>{let e=(0,Ve.getCookieValue)("vuu-username"),t=(0,Ve.getCookieValue)("vuu-auth-token");return[e,t]},Do=()=>Vt()==="login"?"login.html":"demo.html",kt=(e=Do())=>{window.location.href=e},Ke=e=>{document.cookie="vuu-username= ; expires = Thu, 01 Jan 1970 00:00:00 GMT",document.cookie="vuu-auth-token= ; expires = Thu, 01 Jan 1970 00:00:00 GMT",kt(e)};var L=require("react"),Xe=E(require("classnames")),$t=require("@salt-ds/core"),Qe=require("@salt-ds/core"),de=require("@vuu-ui/vuu-data"),ne=require("@vuu-ui/vuu-utils");var F=require("react/jsx-runtime"),O="vuuSessionEditingForm",Rt=(e,t)=>{let o=e.find(r=>r.name===t);if(o)return o;throw Error(`SessionEditingForm, no field '${t}' found`)},It=e=>{let{dataset:{field:t},value:o}=e.target;if(t===void 0)throw Error("SessionEditingForm, form field has no field name");return[t,o]},_={uninitialised:0,unchanged:1,changed:2,invalid:3};function Ut(e,t,o=!1){switch(t){case"int":case"long":{let r=parseInt(e,10);if((0,ne.isValidNumber)(r))return r;if(o)throw Error("SessionEditingForm getTypedValue");return}case"double":{let r=parseFloat(e);return(0,ne.isValidNumber)(r)?r:void 0}case"boolean":return e==="true";default:return e}}var Ho=(e,t)=>{if(e)return e;if(t)return new de.RemoteDataSource({bufferSize:0,table:t.table,columns:t.columns.map(o=>o.name)});throw Error("SessionEditingForm: either a DataSource or a TableSchema must be provided")},Vo=({className:e,config:{fields:t,key:o},dataSource:r,id:a,onClose:n,schema:s,...p})=>{let[u,m]=(0,L.useState)(),[l,S]=(0,L.useState)(""),d=(0,L.useRef)(null),C=(0,L.useRef)(),v=(0,L.useRef)(_.uninitialised),c=(0,L.useMemo)(()=>{let i=$=>{if(U){let A={};for(let le of c.columns)A[le]=$[U[le]];v.current===_.uninitialised&&(v.current=_.unchanged,C.current=A),m(A)}},x=Ho(r,s),U=(0,ne.buildColumnMap)(x.columns);return x.subscribe({range:{from:0,to:5}},$=>{$.type==="viewport-update"&&$.rows&&(v.current===_.uninitialised?i($.rows[0]):console.log("what do we do with server updates"))}),x},[r,s]),N=(0,$t.useIdMemo)(a),I=(0,L.useCallback)(i=>{let[x,U]=It(i),{type:$}=Rt(t,x),A=Ut(U,$);m((le={})=>{let at={...le,[x]:A},ao=(0,ne.shallowEquals)(at,C.current);return v.current=ao?_.unchanged:A!==void 0?_.changed:_.invalid,at})},[t]),K=(0,L.useCallback)(i=>{let[x,U]=It(i),{type:$}=Rt(t,x),A=u==null?void 0:u[o],le=Ut(U,$,!0);typeof A=="string"&&c.menuRpcCall({rowKey:A,field:x,value:le,type:"VP_EDIT_CELL_RPC"})},[c,t,o,u]),g=(0,L.useCallback)(i=>{typeof i=="object"&&i!==null&&"type"in i&&i.type==="CLOSE_DIALOG_ACTION"&&n()},[n]),M=(0,L.useCallback)(async()=>{let i=await c.menuRpcCall({type:"VP_EDIT_SUBMIT_FORM_RPC"});(0,de.isErrorResponse)(i)?S(i.error):(0,de.hasAction)(i)&&g(i.action)},[g,c]),P=(0,L.useCallback)(i=>{i.key==="Enter"&&v.current===_.changed&&M()},[M]),Be=(0,L.useCallback)(()=>{n()},[n]),Oe=i=>{var U;let x=String((U=u==null?void 0:u[i.name])!=null?U:"");return i.readonly||i.name===o?(0,F.jsx)("div",{className:`${O}-fieldValue vuuReadOnly`,children:x}):(0,F.jsx)("input",{className:`${O}-fieldValue`,"data-field":i.name,onBlur:K,onChange:I,type:"text",value:x,id:`${N}-input-${i.name}`})};(0,L.useEffect)(()=>{if(d.current){let i=d.current.querySelector("input");i&&setTimeout(()=>{i.focus(),i.select()},100)}},[]),(0,L.useEffect)(()=>()=>{c&&c.unsubscribe()},[c]);let _e=v.current===_.changed;return(0,F.jsxs)("div",{...p,className:(0,Xe.default)(O,e),children:[l?(0,F.jsx)("div",{className:`${O}-errorBanner`,"data-icon":"error",title:l,children:"Error, edit(s) not saved"}):void 0,(0,F.jsx)("div",{className:`${O}-content`,ref:d,onKeyDown:P,children:t.map(i=>{var x;return(0,F.jsxs)("div",{className:`${O}-field`,children:[(0,F.jsx)("label",{className:(0,Xe.default)(`${O}-fieldLabel`,{[`${O}-required`]:i.required}),htmlFor:`${N}-input-${i.name}`,children:(x=i==null?void 0:i.label)!=null?x:i.description}),Oe(i)]},i.name)})}),(0,F.jsxs)("div",{className:`${O}-buttonbar salt-theme salt-density-high`,children:[(0,F.jsx)(Qe.Button,{type:"submit",variant:"cta",disabled:!_e,onClick:M,children:"Submit"}),(0,F.jsx)(Qe.Button,{variant:"secondary",onClick:Be,children:"Cancel"})]})]})};var oo=require("@vuu-ui/vuu-data"),ro=E(require("classnames")),G=require("react");var Ue=require("@vuu-ui/vuu-layout");var Kt=require("react");var Gt=require("@salt-ds/core"),Yt=require("@salt-ds/lab"),Zt=require("@salt-ds/icons");var Bt=require("@vuu-ui/vuu-utils"),ke=require("@salt-ds/lab"),Ot=require("@salt-ds/core"),_t=require("@salt-ds/icons"),J=require("react");var At=async e=>await fetch(`api/vui/${e.username}`,{}).then(o=>o.ok?o.json():null).catch(()=>{console.log("error getting history")});var z=require("react/jsx-runtime"),ko=({lastUpdate:e},{lastUpdate:t})=>t===e?0:t<e?-1:1,Ro=e=>(0,z.jsx)(ke.ListItem,{...e}),Jt=(0,J.forwardRef)(function({loginUrl:t,onNavigate:o,user:r,layoutId:a="latest"},n){let[s,p]=(0,J.useState)([]);(0,J.useEffect)(()=>{async function S(){let C=(await At(r)).filter(v=>v.id!=="latest").sort(ko).map(({id:v,lastUpdate:c})=>({lastUpdate:c,id:v,label:`Saved at ${(0,Bt.formatDate)(new Date(c),"kk:mm:ss")}`}));console.log({sortedHistory:C}),p(C)}S()},[r]);let u=(0,J.useCallback)((S,d)=>{d&&o(d.id)},[o]),m=(0,J.useCallback)(()=>{Ke(t)},[t]),l=s.length===0?null:a==="latest"?s[0]:s.find(S=>S.id===a);return(0,z.jsxs)("div",{className:"vuuUserPanel",ref:n,children:[(0,z.jsx)(ke.List,{ListItem:Ro,className:"vuuUserPanel-history",onSelect:u,selected:l,source:s}),(0,z.jsx)("div",{className:"vuuUserPanel-buttonBar",children:(0,z.jsxs)(Ot.Button,{"aria-label":"logout",onClick:m,children:[(0,z.jsx)(_t.ExportIcon,{})," Logout"]})})]})});var pe=require("react/jsx-runtime"),qt=({layoutId:e,loginUrl:t,onNavigate:o,user:r})=>(0,pe.jsxs)(Yt.DropdownBase,{className:"vuuUserProfile",placement:"bottom-end",children:[(0,pe.jsx)(Gt.Button,{variant:"secondary",children:(0,pe.jsx)(Zt.UserSolidIcon,{})}),(0,pe.jsx)(Jt,{layoutId:e,loginUrl:t,onNavigate:n=>{o(n)},user:r})]});var zt=E(require("classnames")),ae=require("@salt-ds/core"),Wt=require("react");var Ce=require("react/jsx-runtime"),Io="vuuThemeSwitch",je=({className:e,defaultMode:t,mode:o,onChange:r,...a})=>{let[n,s]=(0,ae.useControlled)({controlled:o,default:t!=null?t:"light",name:"ThemeSwitch",state:"mode"}),p=(0,Wt.useCallback)(m=>{let{value:l}=m.target;s(l),r(l)},[r,s]),u=(0,zt.default)(Io,e);return(0,Ce.jsxs)(ae.ToggleButtonGroup,{className:u,...a,onChange:p,value:n,children:[(0,Ce.jsx)(ae.ToggleButton,{"aria-label":"alert","data-icon":"light",value:"dark"}),(0,Ce.jsx)(ae.ToggleButton,{"aria-label":"home","data-icon":"dark",value:"light"})]})};var Xt=E(require("classnames"));var Se=require("react/jsx-runtime"),Uo="vuuAppHeader",Qt=({className:e,layoutId:t,loginUrl:o,onNavigate:r,onSwitchTheme:a,themeMode:n="light",user:s,...p})=>{let u=(0,Xt.default)(Uo,e),m=(0,Kt.useCallback)(l=>a==null?void 0:a(l),[a]);return(0,Se.jsxs)("header",{className:u,...p,children:[(0,Se.jsx)(je,{defaultMode:n,onChange:m}),(0,Se.jsx)(qt,{layoutId:t,loginUrl:o,onNavigate:r,user:s})]})};var no=require("@vuu-ui/vuu-utils");var jt=require("@salt-ds/core"),et=E(require("classnames")),Re=require("react"),Ie=require("@vuu-ui/vuu-layout");var W=require("react/jsx-runtime"),k="vuuContextPanel",tt=({className:e,expanded:t=!1,content:o,overlay:r=!1,title:a})=>{let n=(0,Ie.useLayoutProviderDispatch)(),s=(0,Re.useCallback)(()=>{n({path:"#context-panel",propName:"expanded",propValue:!1,type:"set-prop"})},[n]),p=(0,et.default)(k,e,{[`${k}-expanded`]:t,[`${k}-inline`]:r!==!0,[`${k}-overlay`]:r}),u=(0,Re.useMemo)(()=>o?(0,Ie.layoutFromJson)(o,"context-0"):null,[o]);return(0,W.jsx)("div",{className:(0,et.default)(k,p),children:(0,W.jsxs)("div",{className:`${k}-inner`,children:[(0,W.jsxs)("div",{className:`${k}-header`,children:[(0,W.jsx)("h2",{className:`${k}-title`,children:a}),(0,W.jsx)(jt.Button,{className:`${k}-close`,"data-icon":"close",onClick:s,variant:"secondary"})]}),(0,W.jsx)("div",{className:`${k}-content`,children:u})]})})};var xe=require("@vuu-ui/vuu-layout");var fe=require("react/jsx-runtime"),eo=({appHeader:e,leftSidePanel:t})=>(0,fe.jsxs)(xe.Flexbox,{className:"App",style:{flexDirection:"row",height:"100%",width:"100%"},children:[t,(0,fe.jsxs)(xe.Flexbox,{className:"vuuShell-content",style:{flex:1,flexDirection:"column"},children:[e,(0,fe.jsx)(xe.DraggableLayout,{dropTarget:!0,style:{flex:1}},"main-content")]}),(0,fe.jsx)(tt,{id:"context-panel",overlay:!0,title:"Column Settings"})]});var R=require("@vuu-ui/vuu-layout"),ie=require("react"),se=require("react/jsx-runtime"),to=({appHeader:e,leftSidePanel:t})=>{let o=(0,ie.useRef)(null),[r,a]=(0,ie.useState)(!0),n=(0,ie.useCallback)(p=>{var m;let u=p.target;(m=o.current)!=null&&m.contains(u)||a(!r)},[r]),s=(0,ie.useCallback)(p=>{let u=[];return u.push((0,se.jsx)(R.Drawer,{onClick:n,open:r,position:"left",inline:!0,peekaboo:!0,sizeOpen:200,toggleButton:"end",children:(0,se.jsx)(R.View,{className:"vuuShell-palette",id:"vw-app-palette",ref:o,style:{height:"100%"},children:p},"app-palette")},"left-panel")),u},[n,r]);return(0,se.jsxs)(R.Flexbox,{className:"App",style:{flexDirection:"column",height:"100%",width:"100%"},children:[e,(0,se.jsx)(R.DockLayout,{style:{flex:1},children:s(t).concat((0,se.jsx)(R.DraggableLayout,{dropTarget:!0,style:{width:"100%",height:"100%"}},"main-content"))})]})};var ot=({leftSidePanelLayout:e="inlay",...t})=>(e==="inlay"?to:eo)(t);var he=require("react/jsx-runtime"),{error:rt}=(0,no.logger)("Shell"),$o={type:"View",props:{style:{height:"calc(100% - 6px)"}},children:[{props:{className:"vuuShell-warningPlaceholder"},type:"Placeholder"}]},Ao=({LayoutProps:e,children:t,className:o,defaultLayout:r=$o,leftSidePanel:a,leftSidePanelLayout:n,loginUrl:s,saveLocation:p="remote",saveUrl:u,serverUrl:m,user:l,...S})=>{let d=(0,G.useRef)(null),C=(0,G.useRef)("latest"),[v,c,N]=Je({defaultLayout:r,saveLocation:p,saveUrl:u,user:l}),I=(0,G.useCallback)((i,x)=>{try{console.log(`handle layout changed ${x}`),c(i)}catch{rt==null||rt("Failed to save layout")}},[c]),K=(0,G.useCallback)(i=>{d.current&&(d.current.dataset.mode=i)},[]),g=(0,G.useCallback)(i=>{C.current=i,N(i)},[N]);(0,G.useEffect)(()=>{m&&l.token&&(0,oo.connectToServer)({authToken:l.token,url:m,username:l.username})},[m,l.token,l.username]);let[M,P,Be]=Le(),Oe=(0,ro.default)("vuuShell",o,M,P),_e=ot({leftSidePanelLayout:n,appHeader:(0,he.jsx)(Qt,{layoutId:C.current,loginUrl:s,user:l,onNavigate:g,onSwitchTheme:K}),leftSidePanel:a});return(0,he.jsxs)(De,{children:[(0,he.jsx)(Ue.LayoutProvider,{...e,layout:v,onLayoutChange:I,children:(0,he.jsx)(Ue.DraggableLayout,{className:Oe,"data-mode":Be,ref:d,...S,children:_e})}),t]})};var Ae=require("react"),$e=require("react/jsx-runtime"),Bo={},nt=(0,Ae.createContext)(Bo),Oo=({children:e,context:t,inheritedContext:o})=>{let r={...o,...t};return(0,$e.jsx)(nt.Provider,{value:r,children:e})},_o=({children:e,value:t})=>(0,$e.jsx)(nt.Consumer,{children:o=>(0,$e.jsx)(Oo,{context:t,inheritedContext:o,children:e})}),Jo=()=>(0,Ae.useContext)(nt);
 //# sourceMappingURL=index.js.map