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

package/cjs/index.js

@@ -1,726 +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,
-  DEFAULT_DENSITY: () => DEFAULT_DENSITY2,
-  DEFAULT_THEME: () => DEFAULT_THEME,
-  DEFAULT_THEME_MODE: () => DEFAULT_THEME_MODE,
-  DensitySwitch: () => DensitySwitch,
-  Feature: () => Feature,
-  LoginPanel: () => LoginPanel,
-  Shell: () => Shell,
-  ShellContextProvider: () => ShellContextProvider,
-  ThemeContext: () => ThemeContext,
-  ThemeProvider: () => ThemeProvider,
-  ThemeSwitch: () => ThemeSwitch,
-  getAuthDetailsFromCookies: () => getAuthDetailsFromCookies,
-  logout: () => logout,
-  redirectToLogin: () => redirectToLogin,
-  useShellContext: () => useShellContext
-});
-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 [classBase5, 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", classBase5, 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_salt_lab = require("@heswell/salt-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,
-  onDensityChange
-}) => {
-  const handleSelectionChange = (0, import_react2.useCallback)((_event, selectedItem) => {
-    onDensityChange(selectedItem);
-  }, [onDensityChange]);
-  const className = (0, import_classnames2.default)(classBase, classNameProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_salt_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/ErrorBoundary.jsx
-var import_react3 = __toESM(require("react"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ErrorBoundary = class extends import_react3.default.Component {
-  constructor(props) {
-    super(props);
-    this.state = { errorMessage: null };
-  }
-  static getDerivedStateFromError(error) {
-    return { errorMessage: error.message };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.log(error, 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: "Something went wrong." }),
-        /* @__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/Feature.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function RawFeature({
-  url,
-  css,
-  params,
-  ...props
-}) {
-  if (css) {
-    import(
-      /* @vite-ignore */
-      css
-    ).then(
-      (cssModule) => {
-        document.adoptedStyleSheets = [
-          ...document.adoptedStyleSheets,
-          cssModule.default
-        ];
-      }
-    );
-  }
-  const LazyFeature = import_react4.default.lazy(() => import(
-    /* @vite-ignore */
-    url
-  ));
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loader, {}), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LazyFeature, { ...props, ...params }) }) });
-}
-var Feature = import_react4.default.memo(RawFeature);
-Feature.displayName = "Feature";
-(0, import_vuu_layout.registerComponent)("Feature", Feature, "view");
-
-// src/login/LoginPanel.tsx
-var import_react5 = require("react");
-var import_core = require("@salt-ds/core");
-var import_salt_lab2 = require("@heswell/salt-lab");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var classBase2 = "vuuLoginPanel";
-var LoginPanel = ({ onSubmit }) => {
-  const [username, setUserName] = (0, import_react5.useState)("");
-  const [password, setPassword] = (0, import_react5.useState)("");
-  const login = () => {
-    onSubmit(username, password);
-  };
-  const handleUsername = (_event, value) => {
-    setUserName(value);
-  };
-  const handlePassword = (_event, value) => {
-    setPassword(value);
-  };
-  const dataIsValid = username.trim() !== "" && password.trim() !== "";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: classBase2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab2.FormField, { label: "Username", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab2.Input, { value: username, id: "text-username", onChange: handleUsername }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab2.FormField, { label: "Password", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_salt_lab2.Input,
-      {
-        type: "password",
-        value: password,
-        id: "text-password",
-        onChange: handlePassword
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_core.Button,
-      {
-        className: `${classBase2}-login`,
-        disabled: !dataIsValid,
-        onClick: login,
-        variant: "cta",
-        children: "Login"
-      }
-    )
-  ] });
-};
-
-// src/login/login-utils.ts
-var import_vuu_utils = require("@vuu-ui/vuu-utils");
-var getAuthDetailsFromCookies = () => {
-  const username = (0, import_vuu_utils.getCookieValue)("vuu-username");
-  const token = (0, import_vuu_utils.getCookieValue)("vuu-auth-token");
-  return [username, token];
-};
-var redirectToLogin = (loginUrl = "login.html") => {
-  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/shell.tsx
-var import_vuu_data = require("@vuu-ui/vuu-data");
-var import_classnames5 = __toESM(require("classnames"));
-var import_react11 = require("react");
-
-// src/ShellContextProvider.tsx
-var import_react6 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var defaultConfig = {};
-var ShellContext = (0, import_react6.createContext)(defaultConfig);
-var Provider = ({
-  children,
-  context,
-  inheritedContext
-}) => {
-  const mergedContext = {
-    ...inheritedContext,
-    ...context
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ShellContext.Provider, { value: mergedContext, children });
-};
-var ShellContextProvider = ({
-  children,
-  value
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Provider, { context: value, inheritedContext: context, children }) });
-};
-var useShellContext = () => {
-  return (0, import_react6.useContext)(ShellContext);
-};
-
-// src/use-layout-config.js
-var import_react7 = require("react");
-var useLayoutConfig = (user, defaultLayout) => {
-  const [layout, _setLayout] = (0, import_react7.useState)(defaultLayout);
-  const setLayout = (layout2) => {
-    _setLayout(layout2);
-  };
-  const load = (0, import_react7.useCallback)(
-    async (id = "latest") => {
-      fetch(`api/vui/${user.username}/${id}`, {}).then((response) => {
-        return response.ok ? response.json() : defaultLayout;
-      }).then(setLayout).catch(() => {
-        setLayout(defaultLayout);
-      });
-    },
-    [defaultLayout, user.username]
-  );
-  (0, import_react7.useEffect)(() => {
-    load();
-  }, [load]);
-  const saveData = (0, import_react7.useCallback)(
-    (data) => {
-      fetch(`api/vui/${user.username}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(data)
-      }).then((response) => {
-        return response.ok ? response.json() : defaultLayout;
-      });
-    },
-    [defaultLayout, user]
-  );
-  const loadLayoutById = (0, import_react7.useCallback)(
-    (id) => {
-      load(id);
-    },
-    [load]
-  );
-  return [layout, saveData, loadLayoutById];
-};
-var use_layout_config_default = useLayoutConfig;
-
-// src/shell.tsx
-var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
-
-// src/app-header/AppHeader.tsx
-var import_react10 = require("react");
-
-// src/user-profile/UserProfile.tsx
-var import_core3 = require("@salt-ds/core");
-var import_salt_lab4 = require("@heswell/salt-lab");
-var import_icons2 = require("@salt-ds/icons");
-
-// src/user-profile/UserPanel.tsx
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
-var import_salt_lab3 = require("@heswell/salt-lab");
-var import_core2 = require("@salt-ds/core");
-var import_icons = require("@salt-ds/icons");
-var import_react8 = 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_runtime8 = require("react/jsx-runtime");
-var byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
-  return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
-};
-var HistoryListItem = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab3.ListItem, { ...props });
-};
-var UserPanel = (0, import_react8.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
-  const [history, setHistory] = (0, import_react8.useState)([]);
-  (0, import_react8.useEffect)(() => {
-    async function getHistory() {
-      const history2 = await getLayoutHistory(user);
-      const sortedHistory = history2.filter((item) => item.id !== "latest").sort(byLastUpdate).map(({ id, lastUpdate }) => ({
-        lastUpdate,
-        id,
-        label: `Saved at ${(0, import_vuu_utils2.formatDate)(new Date(lastUpdate), "kk:mm:ss")}`
-      }));
-      console.log({ sortedHistory });
-      setHistory(sortedHistory);
-    }
-    getHistory();
-  }, [user]);
-  const handleHisorySelected = (0, import_react8.useCallback)(
-    (evt, selected2) => {
-      if (selected2) {
-        onNavigate(selected2.id);
-      }
-    },
-    [onNavigate]
-  );
-  const handleLogout = (0, import_react8.useCallback)(() => {
-    logout(loginUrl);
-  }, [loginUrl]);
-  const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_salt_lab3.List,
-      {
-        ListItem: HistoryListItem,
-        className: "vuuUserPanel-history",
-        onSelect: handleHisorySelected,
-        selected,
-        source: history
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core2.Button, { "aria-label": "logout", onClick: handleLogout, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.ExportIcon, {}),
-      " Logout"
-    ] }) })
-  ] });
-});
-
-// src/user-profile/UserProfile.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var UserProfile = ({
-  layoutId,
-  loginUrl,
-  onNavigate,
-  user
-}) => {
-  const handleNavigate = (id) => {
-    onNavigate(id);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_salt_lab4.DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.UserSolidIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      UserPanel,
-      {
-        layoutId,
-        loginUrl,
-        onNavigate: handleNavigate,
-        user
-      }
-    )
-  ] });
-};
-
-// src/theme-switch/ThemeSwitch.tsx
-var import_salt_lab5 = require("@heswell/salt-lab");
-var import_classnames3 = __toESM(require("classnames"));
-var import_core4 = require("@salt-ds/core");
-var import_react9 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var classBase3 = "vuuThemeSwitch";
-var modes = ["light", "dark"];
-var ThemeSwitch = ({
-  className: classNameProp,
-  defaultMode: defaultModeProp,
-  mode: modeProp,
-  onChange,
-  ...htmlAttributes
-}) => {
-  const [mode, setMode] = (0, import_core4.useControlled)({
-    controlled: modeProp,
-    default: defaultModeProp != null ? defaultModeProp : "light",
-    name: "ThemeSwitch",
-    state: "mode"
-  });
-  const selectedIndex = modes.indexOf(mode);
-  const handleChangeSecondary = (0, import_react9.useCallback)(
-    (_evt, index) => {
-      const mode2 = modes[index];
-      setMode(mode2);
-      onChange(mode2);
-    },
-    [onChange, setMode]
-  );
-  const className = (0, import_classnames3.default)(classBase3, classNameProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    import_salt_lab5.ToggleButtonGroup,
-    {
-      className,
-      ...htmlAttributes,
-      onChange: handleChangeSecondary,
-      selectedIndex,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_salt_lab5.ToggleButton,
-          {
-            "aria-label": "alert",
-            tooltipText: "Light Theme",
-            "data-icon": "light"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_salt_lab5.ToggleButton,
-          {
-            "aria-label": "home",
-            tooltipText: "Dark Theme",
-            "data-icon": "dark"
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/app-header/AppHeader.tsx
-var import_classnames4 = __toESM(require("classnames"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var classBase4 = "vuuAppHeader";
-var AppHeader = ({
-  className: classNameProp,
-  layoutId,
-  loginUrl,
-  onNavigate,
-  onSwitchTheme,
-  themeMode = "light",
-  user,
-  ...htmlAttributes
-}) => {
-  const className = (0, import_classnames4.default)(classBase4, classNameProp);
-  const handleSwitchTheme = (0, import_react10.useCallback)(
-    (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
-    [onSwitchTheme]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { className, ...htmlAttributes, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      UserProfile,
-      {
-        layoutId,
-        loginUrl,
-        onNavigate,
-        user
-      }
-    )
-  ] });
-};
-
-// src/shell.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var warningLayout = {
-  type: "View",
-  props: {
-    style: { height: "calc(100% - 6px)" }
-  },
-  children: [
-    {
-      props: {
-        className: "vuuShell-warningPlaceholder"
-      },
-      type: "Placeholder"
-    }
-  ]
-};
-var Shell = ({
-  children,
-  className: classNameProp,
-  defaultLayout = warningLayout,
-  leftSidePanel,
-  loginUrl,
-  serverUrl,
-  user,
-  ...htmlAttributes
-}) => {
-  const rootRef = (0, import_react11.useRef)(null);
-  const paletteView = (0, import_react11.useRef)(null);
-  const [open, setOpen] = (0, import_react11.useState)(false);
-  const layoutId = (0, import_react11.useRef)("latest");
-  const [layout, setLayoutConfig, loadLayoutById] = use_layout_config_default(
-    user,
-    defaultLayout
-  );
-  const handleLayoutChange = (0, import_react11.useCallback)(
-    (layout2) => {
-      setLayoutConfig(layout2);
-    },
-    [setLayoutConfig]
-  );
-  const handleSwitchTheme = (0, import_react11.useCallback)((mode) => {
-    if (rootRef.current) {
-      rootRef.current.dataset.mode = mode;
-    }
-  }, []);
-  const handleDrawerClick = (e) => {
-    var _a;
-    const target = e.target;
-    if (!((_a = paletteView.current) == null ? void 0 : _a.contains(target))) {
-      setOpen(!open);
-    }
-  };
-  const handleNavigate = (0, import_react11.useCallback)(
-    (id) => {
-      layoutId.current = id;
-      loadLayoutById(id);
-    },
-    [loadLayoutById]
-  );
-  (0, import_react11.useEffect)(() => {
-    if (serverUrl && user.token) {
-      (0, import_vuu_data.connectToServer)({
-        authToken: user.token,
-        url: serverUrl,
-        username: user.username
-      });
-    }
-  }, [serverUrl, user.token, user.username]);
-  const getDrawers = () => {
-    const drawers = [];
-    if (leftSidePanel) {
-      drawers.push(
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_vuu_layout2.Drawer,
-          {
-            onClick: handleDrawerClick,
-            open,
-            position: "left",
-            inline: true,
-            peekaboo: true,
-            sizeOpen: 200,
-            toggleButton: "end",
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              import_vuu_layout2.View,
-              {
-                className: "vuuShell-palette",
-                id: "vw-app-palette",
-                ref: paletteView,
-                style: { height: "100%" },
-                children: leftSidePanel
-              },
-              "app-palette"
-            )
-          },
-          "left-panel"
-        )
-      );
-    }
-    return drawers;
-  };
-  const className = (0, import_classnames5.default)(
-    "vuuShell",
-    classNameProp,
-    "salt-theme",
-    "salt-density-high"
-  );
-  return (
-    // ShellContext TBD
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ShellContextProvider, { value: void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_layout2.LayoutProvider, { layout, onLayoutChange: handleLayoutChange, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        import_vuu_layout2.DraggableLayout,
-        {
-          className,
-          "data-mode": "light",
-          ref: rootRef,
-          ...htmlAttributes,
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-            import_vuu_layout2.Flexbox,
-            {
-              className: "App",
-              style: { flexDirection: "column", height: "100%", width: "100%" },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  AppHeader,
-                  {
-                    layoutId: layoutId.current,
-                    loginUrl,
-                    user,
-                    onNavigate: handleNavigate,
-                    onSwitchTheme: handleSwitchTheme
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_layout2.DockLayout, { style: { flex: 1 }, children: getDrawers().concat(
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    import_vuu_layout2.DraggableLayout,
-                    {
-                      dropTarget: true,
-                      style: { width: "100%", height: "100%" }
-                    },
-                    "main-content"
-                  )
-                ) })
-              ]
-            }
-          )
-        }
-      ) }),
-      children
-    ] })
-  );
-};
-
-// src/theme-provider/ThemeProvider.tsx
-var import_react12 = require("react");
-var import_classnames6 = __toESM(require("classnames"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var DEFAULT_DENSITY2 = "medium";
-var DEFAULT_THEME = "salt-theme";
-var DEFAULT_THEME_MODE = "light";
-var ThemeContext = (0, import_react12.createContext)({
-  density: "high",
-  theme: "salt-theme",
-  themeMode: "light"
-});
-var createThemedChildren = (children, theme, themeMode, density) => {
-  var _a;
-  if ((0, import_react12.isValidElement)(children)) {
-    return (0, import_react12.cloneElement)(children, {
-      className: (0, import_classnames6.default)(
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        (_a = children.props) == null ? void 0 : _a.className,
-        theme,
-        `salt-density-${density}`
-      ),
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      "data-mode": themeMode
-    });
-  } else {
-    console.warn(
-      `
+"use strict";var _e=Object.create;var A=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var Ge=Object.getOwnPropertyNames;var Je=Object.getPrototypeOf,ze=Object.prototype.hasOwnProperty;var Ye=(t,e)=>{for(var o in e)A(t,o,{get:e[o],enumerable:!0})},Q=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Ge(e))!ze.call(t,n)&&n!==o&&A(t,n,{get:()=>e[n],enumerable:!(r=$e(e,n))||r.enumerable});return t};var y=(t,e,o)=>(o=t!=null?_e(Je(t)):{},Q(e||!t||!t.__esModule?A(o,"default",{value:t,enumerable:!0}):o,t)),qe=t=>Q(A({},"__esModule",{value:!0}),t);var pt={};Ye(pt,{ConnectionStatusIcon:()=>We,DEFAULT_DENSITY:()=>He,DEFAULT_THEME:()=>Ne,DEFAULT_THEME_MODE:()=>be,DensitySwitch:()=>Ze,Feature:()=>_,LoginPanel:()=>et,Shell:()=>ut,ShellContextProvider:()=>Y,ThemeContext:()=>W,ThemeProvider:()=>ke,ThemeSwitch:()=>q,getAuthDetailsFromCookies:()=>tt,logout:()=>J,redirectToLogin:()=>le,useShellContext:()=>nt});module.exports=qe(pt);var w=y(require("react")),X=y(require("classnames"));var P=require("react/jsx-runtime"),We=({connectionStatus:t,className:e,element:o="span",...r})=>{let[n,s]=(0,w.useState)("vuuConnectingStatus");(0,w.useEffect)(()=>{switch(t){case"connected":case"reconnected":s("vuuActiveStatus");break;case"connecting":s("vuuConnectingStatus");break;case"disconnected":s("vuuDisconnectedStatus");break;default:break}},[t]);let a=w.default.createElement(o,{...r,className:(0,X.default)("vuuStatus vuuIcon",n,e)});return(0,P.jsx)(P.Fragment,{children:(0,P.jsxs)("div",{className:"vuuStatus-container salt-theme",children:[a,(0,P.jsxs)("div",{className:"vuuStatus-text",children:["Status: ",t.toUpperCase()]})]})})};var Z=require("@heswell/salt-lab"),j=require("react"),ee=y(require("classnames")),te=require("react/jsx-runtime"),Ke="vuuDensitySwitch",Qe=["high","medium","low","touch"],Xe="high",Ze=({className:t,defaultDensity:e=Xe,onDensityChange:o})=>{let r=(0,j.useCallback)((s,a)=>{o(a)},[o]),n=(0,ee.default)(Ke,t);return(0,te.jsx)(Z.Dropdown,{className:n,source:Qe,defaultSelected:e,onSelectionChange:r})};var k=y(require("react")),se=require("@vuu-ui/vuu-layout");var oe=y(require("react")),M=require("react/jsx-runtime"),B=class extends oe.default.Component{constructor(e){super(e),this.state={errorMessage:null}}static getDerivedStateFromError(e){return{errorMessage:e.message}}componentDidCatch(e,o){console.log(e,o)}render(){return this.state.errorMessage?(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)("h1",{children:"Something went wrong."}),(0,M.jsx)("p",{children:this.state.errorMessage})]}):this.props.children}};var ne=require("react/jsx-runtime"),re=()=>(0,ne.jsx)("div",{className:"hwLoader",children:"loading"});var b=require("react/jsx-runtime");function je({url:t,css:e,params:o,...r}){e&&import(e).then(s=>{document.adoptedStyleSheets=[...document.adoptedStyleSheets,s.default]});let n=k.default.lazy(()=>import(t));return(0,b.jsx)(B,{children:(0,b.jsx)(k.Suspense,{fallback:(0,b.jsx)(re,{}),children:(0,b.jsx)(n,{...r,...o})})})}var _=k.default.memo(je);_.displayName="Feature";(0,se.registerComponent)("Feature",_,"view");var $=require("react"),ie=require("@salt-ds/core"),D=require("@heswell/salt-lab");var x=require("react/jsx-runtime"),ae="vuuLoginPanel",et=({onSubmit:t})=>{let[e,o]=(0,$.useState)(""),[r,n]=(0,$.useState)(""),s=()=>{t(e,r)},a=(l,c)=>{o(c)},m=(l,c)=>{n(c)},i=e.trim()!==""&&r.trim()!=="";return(0,x.jsxs)("div",{className:ae,children:[(0,x.jsx)(D.FormField,{label:"Username",style:{width:200},children:(0,x.jsx)(D.Input,{value:e,id:"text-username",onChange:a})}),(0,x.jsx)(D.FormField,{label:"Password",style:{width:200},children:(0,x.jsx)(D.Input,{type:"password",value:r,id:"text-password",onChange:m})}),(0,x.jsx)(ie.Button,{className:`${ae}-login`,disabled:!i,onClick:s,variant:"cta",children:"Login"})]})};var G=require("@vuu-ui/vuu-utils"),tt=()=>{let t=(0,G.getCookieValue)("vuu-username"),e=(0,G.getCookieValue)("vuu-auth-token");return[t,e]},le=(t="login.html")=>{window.location.href=t},J=t=>{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",le(t)};var Ee=require("@vuu-ui/vuu-data"),we=y(require("classnames")),p=require("react");var V=require("react"),F=require("react/jsx-runtime"),ot={},z=(0,V.createContext)(ot),rt=({children:t,context:e,inheritedContext:o})=>{let r={...o,...e};return(0,F.jsx)(z.Provider,{value:r,children:t})},Y=({children:t,value:e})=>(0,F.jsx)(z.Consumer,{children:o=>(0,F.jsx)(rt,{context:e,inheritedContext:o,children:t})}),nt=()=>(0,V.useContext)(z);var T=require("react"),st=(t,e)=>{let[o,r]=(0,T.useState)(e),n=i=>{r(i)},s=(0,T.useCallback)(async(i="latest")=>{fetch(`api/vui/${t.username}/${i}`,{}).then(l=>l.ok?l.json():e).then(n).catch(()=>{n(e)})},[e,t.username]);(0,T.useEffect)(()=>{s()},[s]);let a=(0,T.useCallback)(i=>{fetch(`api/vui/${t.username}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)}).then(l=>l.ok?l.json():e)},[e,t]),m=(0,T.useCallback)(i=>{s(i)},[s]);return[o,a,m]},me=st;var u=require("@vuu-ui/vuu-layout");var Se=require("react");var ge=require("@salt-ds/core"),fe=require("@heswell/salt-lab"),ye=require("@salt-ds/icons");var ue=require("@vuu-ui/vuu-utils"),O=require("@heswell/salt-lab"),de=require("@salt-ds/core"),pe=require("@salt-ds/icons"),v=require("react");var ce=async t=>await fetch(`api/vui/${t.username}`,{}).then(o=>o.ok?o.json():null).catch(()=>{console.log("error getting history")});var C=require("react/jsx-runtime"),at=({lastUpdate:t},{lastUpdate:e})=>e===t?0:e<t?-1:1,it=t=>(0,C.jsx)(O.ListItem,{...t}),he=(0,v.forwardRef)(function({loginUrl:e,onNavigate:o,user:r,layoutId:n="latest"},s){let[a,m]=(0,v.useState)([]);(0,v.useEffect)(()=>{async function h(){let S=(await ce(r)).filter(E=>E.id!=="latest").sort(at).map(({id:E,lastUpdate:N})=>({lastUpdate:N,id:E,label:`Saved at ${(0,ue.formatDate)(new Date(N),"kk:mm:ss")}`}));console.log({sortedHistory:S}),m(S)}h()},[r]);let i=(0,v.useCallback)((h,d)=>{d&&o(d.id)},[o]),l=(0,v.useCallback)(()=>{J(e)},[e]),c=a.length===0?null:n==="latest"?a[0]:a.find(h=>h.id===n);return(0,C.jsxs)("div",{className:"vuuUserPanel",ref:s,children:[(0,C.jsx)(O.List,{ListItem:it,className:"vuuUserPanel-history",onSelect:i,selected:c,source:a}),(0,C.jsx)("div",{className:"vuuUserPanel-buttonBar",children:(0,C.jsxs)(de.Button,{"aria-label":"logout",onClick:l,children:[(0,C.jsx)(pe.ExportIcon,{})," Logout"]})})]})});var H=require("react/jsx-runtime"),ve=({layoutId:t,loginUrl:e,onNavigate:o,user:r})=>(0,H.jsxs)(fe.DropdownBase,{className:"vuuUserProfile",placement:"bottom-end",children:[(0,H.jsx)(ge.Button,{variant:"secondary",children:(0,H.jsx)(ye.UserSolidIcon,{})}),(0,H.jsx)(he,{layoutId:t,loginUrl:e,onNavigate:s=>{o(s)},user:r})]});var U=require("@heswell/salt-lab"),Te=y(require("classnames")),Ce=require("@salt-ds/core"),Le=require("react");var I=require("react/jsx-runtime"),lt="vuuThemeSwitch",xe=["light","dark"],q=({className:t,defaultMode:e,mode:o,onChange:r,...n})=>{let[s,a]=(0,Ce.useControlled)({controlled:o,default:e!=null?e:"light",name:"ThemeSwitch",state:"mode"}),m=xe.indexOf(s),i=(0,Le.useCallback)((c,h)=>{let d=xe[h];a(d),r(d)},[r,a]),l=(0,Te.default)(lt,t);return(0,I.jsxs)(U.ToggleButtonGroup,{className:l,...n,onChange:i,selectedIndex:m,children:[(0,I.jsx)(U.ToggleButton,{"aria-label":"alert",tooltipText:"Light Theme","data-icon":"light"}),(0,I.jsx)(U.ToggleButton,{"aria-label":"home",tooltipText:"Dark Theme","data-icon":"dark"})]})};var Pe=y(require("classnames"));var R=require("react/jsx-runtime"),mt="vuuAppHeader",Me=({className:t,layoutId:e,loginUrl:o,onNavigate:r,onSwitchTheme:n,themeMode:s="light",user:a,...m})=>{let i=(0,Pe.default)(mt,t),l=(0,Se.useCallback)(c=>n==null?void 0:n(c),[n]);return(0,R.jsxs)("header",{className:i,...m,children:[(0,R.jsx)(q,{defaultMode:s,onChange:l}),(0,R.jsx)(ve,{layoutId:e,loginUrl:o,onNavigate:r,user:a})]})};var f=require("react/jsx-runtime"),ct={type:"View",props:{style:{height:"calc(100% - 6px)"}},children:[{props:{className:"vuuShell-warningPlaceholder"},type:"Placeholder"}]},ut=({children:t,className:e,defaultLayout:o=ct,leftSidePanel:r,loginUrl:n,serverUrl:s,user:a,...m})=>{let i=(0,p.useRef)(null),l=(0,p.useRef)(null),[c,h]=(0,p.useState)(!1),d=(0,p.useRef)("latest"),[S,E,N]=me(a,o),Ie=(0,p.useCallback)(g=>{E(g)},[E]),Re=(0,p.useCallback)(g=>{i.current&&(i.current.dataset.mode=g)},[]),Ae=g=>{var K;let Oe=g.target;(K=l.current)!=null&&K.contains(Oe)||h(!c)},Be=(0,p.useCallback)(g=>{d.current=g,N(g)},[N]);(0,p.useEffect)(()=>{s&&a.token&&(0,Ee.connectToServer)({authToken:a.token,url:s,username:a.username})},[s,a.token,a.username]);let Fe=()=>{let g=[];return r&&g.push((0,f.jsx)(u.Drawer,{onClick:Ae,open:c,position:"left",inline:!0,peekaboo:!0,sizeOpen:200,toggleButton:"end",children:(0,f.jsx)(u.View,{className:"vuuShell-palette",id:"vw-app-palette",ref:l,style:{height:"100%"},children:r},"app-palette")},"left-panel")),g},Ve=(0,we.default)("vuuShell",e,"salt-theme","salt-density-high");return(0,f.jsxs)(Y,{value:void 0,children:[(0,f.jsx)(u.LayoutProvider,{layout:S,onLayoutChange:Ie,children:(0,f.jsx)(u.DraggableLayout,{className:Ve,"data-mode":"light",ref:i,...m,children:(0,f.jsxs)(u.Flexbox,{className:"App",style:{flexDirection:"column",height:"100%",width:"100%"},children:[(0,f.jsx)(Me,{layoutId:d.current,loginUrl:n,user:a,onNavigate:Be,onSwitchTheme:Re}),(0,f.jsx)(u.DockLayout,{style:{flex:1},children:Fe().concat((0,f.jsx)(u.DraggableLayout,{dropTarget:!0,style:{width:"100%",height:"100%"}},"main-content"))})]})})}),t]})};var L=require("react"),De=y(require("classnames")),Ue=require("react/jsx-runtime"),He="medium",Ne="salt-theme",be="light",W=(0,L.createContext)({density:"high",theme:"salt-theme",themeMode:"light"}),dt=(t,e,o,r)=>{var n;return(0,L.isValidElement)(t)?(0,L.cloneElement)(t,{className:(0,De.default)((n=t.props)==null?void 0:n.className,e,`salt-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 = ({
-  children,
-  theme: themeProp,
-  themeMode: themeModeProp,
-  density: densityProp
-}) => {
-  var _a, _b, _c;
-  const {
-    density: inheritedDensity,
-    themeMode: inheritedThemeMode,
-    theme: inheritedTheme
-  } = (0, import_react12.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 = createThemedChildren(
-    children,
-    theme,
-    themeMode,
-    density
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
-};
-ThemeProvider.displayName = "ThemeProvider";
+          Wrap elements with a single container`),t)},ke=({children:t,theme:e,themeMode:o,density:r})=>{var h,d,S;let{density:n,themeMode:s,theme:a}=(0,L.useContext)(W),m=(h=r!=null?r:n)!=null?h:He,i=(d=o!=null?o:s)!=null?d:be,l=(S=e!=null?e:a)!=null?S:Ne,c=dt(t,l,i,m);return(0,Ue.jsx)(W.Provider,{value:{themeMode:i,density:m,theme:l},children:c})};ke.displayName="ThemeProvider";
 //# sourceMappingURL=index.js.map