@vuu-ui/vuu-shell 0.6.24 → 0.6.25-debug

package/cjs/index.js

@@ -1,2 +1,674 @@
-"use strict";var be=Object.create;var D=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var Ue=Object.getOwnPropertyNames;var Ee=Object.getPrototypeOf,ke=Object.prototype.hasOwnProperty;var De=(t,e)=>{for(var o in e)D(t,o,{get:e[o],enumerable:!0})},K=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Ue(e))!ke.call(t,n)&&n!==o&&D(t,n,{get:()=>e[n],enumerable:!(r=Ne(e,n))||r.enumerable});return t};var M=(t,e,o)=>(o=t!=null?be(Ee(t)):{},K(e||!t||!t.__esModule?D(o,"default",{value:t,enumerable:!0}):o,t)),Ie=t=>K(D({},"__esModule",{value:!0}),t);var Qe={};De(Qe,{Feature:()=>A,LoginPanel:()=>Be,Shell:()=>Ke,ShellContextProvider:()=>J,ThemeSwitch:()=>_,getAuthDetailsFromCookies:()=>Fe,logout:()=>$,redirectToLogin:()=>te,useShellContext:()=>$e});module.exports=Ie(Qe);var N=M(require("react")),Z=require("@vuu-ui/vuu-layout");var Q=M(require("react")),L=require("react/jsx-runtime"),I=class extends Q.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,L.jsxs)(L.Fragment,{children:[(0,L.jsx)("h1",{children:"Something went wrong."}),(0,L.jsx)("p",{children:this.state.errorMessage})]}):this.props.children}};var X=require("react/jsx-runtime"),W=()=>(0,X.jsx)("div",{className:"hwLoader",children:"loading"});var Y=async t=>{let e=new CSSStyleSheet;return fetch(t).then(o=>o.text()).then(o=>e.replace(o))};var b=require("react/jsx-runtime");function Re({url:t,css:e,params:o,...r}){e&&Y(e).then(s=>{document.adoptedStyleSheets=[...document.adoptedStyleSheets,s]});let n=N.default.lazy(()=>import(t));return(0,b.jsx)(I,{children:(0,b.jsx)(N.Suspense,{fallback:(0,b.jsx)(W,{}),children:(0,b.jsx)(n,{...r,...o})})})}var A=N.default.memo(Re);A.displayName="Feature";(0,Z.registerComponent)("Feature",A,"view");var V=require("react"),ee=require("@salt-ds/core"),P=require("@heswell/salt-lab");var v=require("react/jsx-runtime"),j="vuuLoginPanel",Be=({onSubmit:t})=>{let[e,o]=(0,V.useState)(""),[r,n]=(0,V.useState)(""),s=()=>{t(e,r)},a=(l,p)=>{o(p)},c=(l,p)=>{n(p)},i=e.trim()!==""&&r.trim()!=="";return(0,v.jsxs)("div",{className:j,children:[(0,v.jsx)(P.FormField,{label:"Username",style:{width:200},children:(0,v.jsx)(P.Input,{value:e,id:"text-username",onChange:a})}),(0,v.jsx)(P.FormField,{label:"Password",style:{width:200},children:(0,v.jsx)(P.Input,{type:"password",value:r,id:"text-password",onChange:c})}),(0,v.jsx)(ee.Button,{className:`${j}-login`,disabled:!i,onClick:s,variant:"cta",children:"Login"})]})};var O=require("@vuu-ui/vuu-utils"),Fe=()=>{let t=(0,O.getCookieValue)("vuu-username"),e=(0,O.getCookieValue)("vuu-auth-token");return[t,e]},te=(t="/login.html")=>{window.location.href=t},$=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",te(t)};var xe=require("@vuu-ui/vuu-data"),m=require("react");var x=require("react"),Ae=(t,e)=>{let[o,r]=(0,x.useState)(e),n=i=>{r(i)},s=(0,x.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,x.useEffect)(()=>{s()},[s]);let a=(0,x.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]),c=(0,x.useCallback)(i=>{s(i)},[s]);return[o,a,c]},oe=Ae;var B=require("react"),R=require("react/jsx-runtime"),Ve={},G=(0,B.createContext)(Ve),Oe=({children:t,context:e,inheritedContext:o})=>{let r={...o,...e};return(0,R.jsx)(G.Provider,{value:r,children:t})},J=({children:t,value:e})=>(0,R.jsx)(G.Consumer,{children:o=>(0,R.jsx)(Oe,{context:e,inheritedContext:o,children:t})}),$e=()=>(0,B.useContext)(G);var Ce=M(require("classnames")),u=require("@vuu-ui/vuu-layout");var fe=require("react");var le=require("@salt-ds/core"),me=require("@heswell/salt-lab"),ue=require("@salt-ds/icons");var ne=require("@vuu-ui/vuu-utils"),F=require("@heswell/salt-lab"),se=require("@salt-ds/core"),ae=require("@salt-ds/icons"),f=require("react");var re=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"),Ge=({lastUpdate:t},{lastUpdate:e})=>e===t?0:e<t?-1:1,Je=t=>(0,C.jsx)(F.ListItem,{...t}),ie=(0,f.forwardRef)(function({loginUrl:e,onNavigate:o,user:r,layoutId:n="latest"},s){let[a,c]=(0,f.useState)([]);(0,f.useEffect)(()=>{async function g(){let T=(await re(r)).filter(w=>w.id!=="latest").sort(Ge).map(({id:w,lastUpdate:H})=>({lastUpdate:H,id:w,label:`Saved at ${(0,ne.formatDate)(new Date(H),"kk:mm:ss")}`}));console.log({sortedHistory:T}),c(T)}g()},[r]);let i=(0,f.useCallback)((g,y)=>{y&&o(y.id)},[o]),l=(0,f.useCallback)(()=>{$(e)},[e]),p=a.length===0?null:n==="latest"?a[0]:a.find(g=>g.id===n);return(0,C.jsxs)("div",{className:"vuuUserPanel",ref:s,children:[(0,C.jsx)(F.List,{ListItem:Je,className:"vuuUserPanel-history",onSelect:i,selected:p,source:a}),(0,C.jsx)("div",{className:"vuuUserPanel-buttonBar",children:(0,C.jsxs)(se.Button,{"aria-label":"logout",onClick:l,children:[(0,C.jsx)(ae.ExportIcon,{})," Logout"]})})]})});var S=require("react/jsx-runtime"),ce=({layoutId:t,loginUrl:e,onNavigate:o,user:r})=>(0,S.jsxs)(me.DropdownBase,{className:"vuuUserProfile",placement:"bottom-end",children:[(0,S.jsx)(le.Button,{variant:"secondary",children:(0,S.jsx)(ue.UserSolidIcon,{})}),(0,S.jsx)(ie,{layoutId:t,loginUrl:e,onNavigate:s=>{o(s)},user:r})]});var U=require("@heswell/salt-lab"),de=M(require("classnames")),he=require("@salt-ds/core"),ge=require("react");var E=require("react/jsx-runtime"),_e="vuuThemeSwitch",pe=["light","dark"],_=({className:t,defaultMode:e,mode:o,onChange:r,...n})=>{let[s,a]=(0,he.useControlled)({controlled:o,default:e!=null?e:"light",name:"ThemeSwitch",state:"mode"}),c=pe.indexOf(s),i=(0,ge.useCallback)((p,g)=>{let y=pe[g];a(y),r(y)},[r,a]),l=(0,de.default)(_e,t);return(0,E.jsxs)(U.ToggleButtonGroup,{className:l,...n,onChange:i,selectedIndex:c,children:[(0,E.jsx)(U.ToggleButton,{"aria-label":"alert",tooltipText:"Light Theme","data-icon":"light"}),(0,E.jsx)(U.ToggleButton,{"aria-label":"home",tooltipText:"Dark Theme","data-icon":"dark"})]})};var ye=M(require("classnames"));var k=require("react/jsx-runtime"),ze="vuuAppHeader",ve=({className:t,layoutId:e,loginUrl:o,onNavigate:r,onSwitchTheme:n,themeMode:s="light",user:a,...c})=>{let i=(0,ye.default)(ze,t,"salt-density-medium"),l=(0,fe.useCallback)(p=>n==null?void 0:n(p),[n]);return(0,k.jsxs)("header",{className:i,...c,children:[(0,k.jsx)(_,{defaultMode:s,onChange:l}),(0,k.jsx)(ce,{layoutId:e,loginUrl:o,onNavigate:r,user:a})]})};var h=require("react/jsx-runtime"),qe={type:"View",props:{style:{height:"calc(100% - 6px)"}},children:[{props:{className:"vuuShell-warningPlaceholder"},type:"Placeholder"}]},Ke=({children:t,className:e,defaultLayout:o=qe,leftSidePanel:r,loginUrl:n,serverUrl:s,user:a,...c})=>{let i=(0,m.useRef)(null),[l]=(0,m.useState)("high"),p=(0,m.useRef)(null),[g,y]=(0,m.useState)(!1),T=(0,m.useRef)("latest"),[w,H,z]=oe(a,o),Le=(0,m.useCallback)(d=>{H(d)},[H]),Pe=(0,m.useCallback)(d=>{i.current&&(i.current.dataset.mode=d)},[]),Se=d=>{var q;let Me=d.target;(q=p.current)!=null&&q.contains(Me)||y(!g)},Te=(0,m.useCallback)(d=>{T.current=d,z(d)},[z]);(0,m.useEffect)(()=>{s&&a.token&&(0,xe.connectToServer)(s,a.token)},[s,a.token]);let we=()=>{let d=[];return r&&d.push((0,h.jsx)(u.Drawer,{onClick:Se,open:g,position:"left",inline:!0,peekaboo:!0,sizeOpen:200,toggleButton:"end",children:(0,h.jsx)(u.View,{className:"vuuShell-palette",id:"vw-app-palette",ref:p,style:{height:"100%"},children:r},"app-palette")},"left-panel")),d},He=(0,Ce.default)("vuuShell",e,"salt-theme",`salt-density-${l}`);return(0,h.jsxs)(J,{value:void 0,children:[(0,h.jsx)(u.LayoutProvider,{layout:w,onLayoutChange:Le,children:(0,h.jsx)(u.DraggableLayout,{className:He,"data-mode":"light",ref:i,...c,children:(0,h.jsxs)(u.Flexbox,{className:"App",style:{flexDirection:"column",height:"100%",width:"100%"},children:[(0,h.jsx)(ve,{layoutId:T.current,loginUrl:n,user:a,onNavigate:Te,onSwitchTheme:Pe}),(0,h.jsx)(u.Chest,{style:{flex:1},children:we().concat((0,h.jsx)(u.DraggableLayout,{dropTarget:!0,style:{width:"100%",height:"100%"}},"main-content"))})]})})}),t]})};
+"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,
+  Feature: () => Feature,
+  LoginPanel: () => LoginPanel,
+  Shell: () => Shell,
+  ShellContextProvider: () => ShellContextProvider,
+  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/feature/Feature.tsx
+var import_react3 = __toESM(require("react"));
+var import_vuu_layout = require("@vuu-ui/vuu-layout");
+
+// src/feature/ErrorBoundary.jsx
+var import_react2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ErrorBoundary = class extends import_react2.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_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { children: "Something went wrong." }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: this.state.errorMessage })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// src/feature/Loader.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Loader = () => /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime4 = require("react/jsx-runtime");
+function RawFeature({
+  url,
+  css,
+  params,
+  ...props
+}) {
+  if (css) {
+    importCSS(css).then((styleSheet) => {
+      document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        styleSheet
+      ];
+    });
+  }
+  const LazyFeature = import_react3.default.lazy(() => import(
+    /* @vite-ignore */
+    url
+  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Loader, {}), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LazyFeature, { ...props, ...params }) }) });
+}
+var Feature = import_react3.default.memo(RawFeature);
+Feature.displayName = "Feature";
+(0, import_vuu_layout.registerComponent)("Feature", Feature, "view");
+
+// src/login/LoginPanel.tsx
+var import_react4 = require("react");
+var import_core = require("@salt-ds/core");
+var import_salt_lab = require("@heswell/salt-lab");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var classBase = "vuuLoginPanel";
+var LoginPanel = ({ onSubmit }) => {
+  const [username, setUserName] = (0, import_react4.useState)("");
+  const [password, setPassword] = (0, import_react4.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_runtime5.jsxs)("div", { className: classBase, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab.FormField, { label: "Username", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab.Input, { value: username, id: "text-username", onChange: handleUsername }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab.FormField, { label: "Password", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_salt_lab.Input,
+      {
+        type: "password",
+        value: password,
+        id: "text-password",
+        onChange: handlePassword
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_core.Button,
+      {
+        className: `${classBase}-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_react11 = require("react");
+
+// src/use-layout-config.js
+var import_react5 = require("react");
+var useLayoutConfig = (user, defaultLayout) => {
+  const [layout, _setLayout] = (0, import_react5.useState)(defaultLayout);
+  const setLayout = (layout2) => {
+    _setLayout(layout2);
+  };
+  const load = (0, import_react5.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_react5.useEffect)(() => {
+    load();
+  }, [load]);
+  const saveData = (0, import_react5.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_react5.useCallback)(
+    (id) => {
+      load(id);
+    },
+    [load]
+  );
+  return [layout, saveData, loadLayoutById];
+};
+var use_layout_config_default = useLayoutConfig;
+
+// src/ShellContextProvider.tsx
+var import_react6 = require("react");
+var import_jsx_runtime6 = 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_runtime6.jsx)(ShellContext.Provider, { value: mergedContext, children });
+};
+var ShellContextProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Provider, { context: value, inheritedContext: context, children }) });
+};
+var useShellContext = () => {
+  return (0, import_react6.useContext)(ShellContext);
+};
+
+// src/shell.tsx
+var import_classnames5 = __toESM(require("classnames"));
+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_lab3 = 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_lab2 = require("@heswell/salt-lab");
+var import_core2 = require("@salt-ds/core");
+var import_icons = require("@salt-ds/icons");
+var import_react7 = 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_runtime7 = 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_runtime7.jsx)(import_salt_lab2.ListItem, { ...props });
+};
+var UserPanel = (0, import_react7.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
+  const [history, setHistory] = (0, import_react7.useState)([]);
+  (0, import_react7.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_react7.useCallback)(
+    (evt, selected2) => {
+      if (selected2) {
+        onNavigate(selected2.id);
+      }
+    },
+    [onNavigate]
+  );
+  const handleLogout = (0, import_react7.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_runtime7.jsxs)("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_salt_lab2.List,
+      {
+        ListItem: HistoryListItem,
+        className: "vuuUserPanel-history",
+        onSelect: handleHisorySelected,
+        selected,
+        source: history
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core2.Button, { "aria-label": "logout", onClick: handleLogout, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons.ExportIcon, {}),
+      " Logout"
+    ] }) })
+  ] });
+});
+
+// src/user-profile/UserProfile.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var UserProfile = ({
+  layoutId,
+  loginUrl,
+  onNavigate,
+  user
+}) => {
+  const handleNavigate = (id) => {
+    onNavigate(id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_salt_lab3.DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core3.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons2.UserSolidIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      UserPanel,
+      {
+        layoutId,
+        loginUrl,
+        onNavigate: handleNavigate,
+        user
+      }
+    )
+  ] });
+};
+
+// src/theme-switch/ThemeSwitch.tsx
+var import_salt_lab4 = require("@heswell/salt-lab");
+var import_classnames2 = __toESM(require("classnames"));
+var import_core4 = require("@salt-ds/core");
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var classBase2 = "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_react8.useCallback)(
+    (_evt, index) => {
+      const mode2 = modes[index];
+      setMode(mode2);
+      onChange(mode2);
+    },
+    [onChange, setMode]
+  );
+  const className = (0, import_classnames2.default)(classBase2, classNameProp);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_salt_lab4.ToggleButtonGroup,
+    {
+      className,
+      ...htmlAttributes,
+      onChange: handleChangeSecondary,
+      selectedIndex,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_salt_lab4.ToggleButton,
+          {
+            "aria-label": "alert",
+            tooltipText: "Light Theme",
+            "data-icon": "light"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_salt_lab4.ToggleButton,
+          {
+            "aria-label": "home",
+            tooltipText: "Dark Theme",
+            "data-icon": "dark"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/app-header/AppHeader.tsx
+var import_classnames4 = __toESM(require("classnames"));
+
+// src/density-switch/DensitySwitch.tsx
+var import_salt_lab5 = require("@heswell/salt-lab");
+var import_core5 = require("@salt-ds/core");
+var import_react9 = require("react");
+var import_classnames3 = __toESM(require("classnames"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var classBase3 = "vuuDensitySwitch";
+var densities = ["high", "medium", "low", "touch"];
+var DensitySwitch = ({
+  className: classNameProp,
+  defaultDensity = import_core5.DEFAULT_DENSITY,
+  onDensityChange
+}) => {
+  const handleSelectionChange = (0, import_react9.useCallback)((_event, selectedItem) => {
+    onDensityChange(selectedItem);
+  }, [onDensityChange]);
+  const className = (0, import_classnames3.default)(classBase3, classNameProp);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_salt_lab5.Dropdown,
+    {
+      className,
+      source: densities,
+      defaultSelected: defaultDensity,
+      onSelectionChange: handleSelectionChange
+    }
+  );
+};
+
+// src/app-header/AppHeader.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var classBase4 = "vuuAppHeader";
+var AppHeader = ({
+  className: classNameProp,
+  layoutId,
+  loginUrl,
+  onNavigate,
+  onSwitchTheme,
+  themeMode = "light",
+  onDensitySwitch,
+  density = "medium",
+  user,
+  ...htmlAttributes
+}) => {
+  const className = (0, import_classnames4.default)(classBase4, classNameProp, `salt-density-${density}`);
+  const handleSwitchTheme = (0, import_react10.useCallback)(
+    (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
+    [onSwitchTheme]
+  );
+  const handleDensitySwitch = (0, import_react10.useCallback)(
+    (density2) => onDensitySwitch == null ? void 0 : onDensitySwitch(density2),
+    [onDensitySwitch]
+  );
+  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)(DensitySwitch, { defaultDensity: density, onDensityChange: handleDensitySwitch }),
+    /* @__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 [density, setDensity] = (0, import_react11.useState)("medium");
+  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 handleDensitySwitch = (0, import_react11.useCallback)(
+    (density2) => {
+      setDensity(density2);
+    },
+    [setDensity]
+  );
+  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)(serverUrl, user.token);
+    }
+  }, [serverUrl, user.token]);
+  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-${density}`
+  );
+  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,
+                    onDensitySwitch: handleDensitySwitch
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_layout2.Chest, { 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
+    ] })
+  );
+};
 //# sourceMappingURL=index.js.map