@vuu-ui/vuu-shell 0.7.4 → 0.7.5-debug

package/cjs/index.js

@@ -1,4 +1,1069 @@
-"use strict";var pt=Object.create;var W=Object.defineProperty;var ft=Object.getOwnPropertyDescriptor;var gt=Object.getOwnPropertyNames;var ht=Object.getPrototypeOf,yt=Object.prototype.hasOwnProperty;var vt=(e,t)=>{for(var o in t)W(e,o,{get:t[o],enumerable:!0})},Se=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of gt(t))!yt.call(e,n)&&n!==o&&W(e,n,{get:()=>t[n],enumerable:!(r=ft(t,n))||r.enumerable});return e};var w=(e,t,o)=>(o=e!=null?pt(ht(e)):{},Se(t||!e||!e.__esModule?W(o,"default",{value:e,enumerable:!0}):o,e)),St=e=>Se(W({},"__esModule",{value:!0}),e);var $t={};vt($t,{ConnectionStatusIcon:()=>Tt,DEFAULT_DENSITY:()=>it,DEFAULT_THEME:()=>lt,DEFAULT_THEME_MODE:()=>ut,DensitySwitch:()=>wt,Feature:()=>ie,LoginPanel:()=>bt,SessionEditingForm:()=>Nt,Shell:()=>At,ShellContextProvider:()=>fe,ThemeContext:()=>ye,ThemeProvider:()=>ct,ThemeSwitch:()=>ge,getAuthDetailsFromCookies:()=>Mt,logout:()=>ce,redirectToLogin:()=>He,useShellContext:()=>Ft});module.exports=St($t);var A=w(require("react")),Te=w(require("classnames"));var k=require("react/jsx-runtime"),Tt=({connectionStatus:e,className:t,element:o="span",...r})=>{let[n,a]=(0,A.useState)("vuuConnectingStatus");(0,A.useEffect)(()=>{switch(e){case"connected":case"reconnected":a("vuuActiveStatus");break;case"connecting":a("vuuConnectingStatus");break;case"disconnected":a("vuuDisconnectedStatus");break;default:break}},[e]);let l=A.default.createElement(o,{...r,className:(0,Te.default)("vuuStatus vuuIcon",n,t)});return(0,k.jsx)(k.Fragment,{children:(0,k.jsxs)("div",{className:"vuuStatus-container salt-theme",children:[l,(0,k.jsxs)("div",{className:"vuuStatus-text",children:["Status: ",e.toUpperCase()]})]})})};var xe=require("@heswell/salt-lab"),Ce=require("react"),Le=w(require("classnames")),we=require("react/jsx-runtime"),xt="vuuDensitySwitch",Ct=["high","medium","low","touch"],Lt="high",wt=({className:e,defaultDensity:t=Lt,onDensityChange:o})=>{let r=(0,Ce.useCallback)((a,l)=>{o(l)},[o]),n=(0,Le.default)(xt,e);return(0,we.jsx)(xe.Dropdown,{className:n,source:Ct,defaultSelected:t,onSelectionChange:r})};var N=w(require("react")),Me=require("@vuu-ui/vuu-layout");var De=w(require("react")),U=require("react/jsx-runtime"),Q=class extends De.default.Component{constructor(t){super(t),this.state={errorMessage:null}}static getDerivedStateFromError(t){return{errorMessage:t.message}}componentDidCatch(t,o){console.log(t,o)}render(){return this.state.errorMessage?(0,U.jsxs)(U.Fragment,{children:[(0,U.jsx)("h1",{children:"Something went wrong."}),(0,U.jsx)("p",{children:this.state.errorMessage})]}):this.props.children}};var be=require("react/jsx-runtime"),Ee=()=>(0,be.jsx)("div",{className:"hwLoader",children:"loading"});var q=require("react/jsx-runtime"),X=new Map,Dt=e=>((0,N.useEffect)(()=>()=>{X.delete(e)},[e]),X.has(e)||X.set(e,N.default.lazy(()=>import(e))),X.get(e));function Et({url:e,css:t,params:o,...r}){console.log("Feature render",{css:t,url:e,props:r}),(0,N.useEffect)(()=>(console.log("%cFeature mount","color: green;"),()=>{console.log("%cFeature unmount","color:red;")}),[]),t&&import(t).then(a=>{console.log("%cInject Styles","color: blue;font-weight: bold"),document.adoptedStyleSheets=[...document.adoptedStyleSheets,a.default]});let n=Dt(e);return(0,q.jsx)(Q,{children:(0,q.jsx)(N.Suspense,{fallback:(0,q.jsx)(Ee,{}),children:(0,q.jsx)(n,{...r,...o})})})}var ie=N.default.memo(Et);ie.displayName="Feature";(0,Me.registerComponent)("Feature",ie,"view");var le=require("react"),Ne=require("@salt-ds/core"),O=require("@heswell/salt-lab");var H=require("react/jsx-runtime"),Pe="vuuLoginPanel",bt=({onSubmit:e})=>{let[t,o]=(0,le.useState)(""),[r,n]=(0,le.useState)(""),a=()=>{e(t,r)},l=(m,u)=>{o(u)},c=(m,u)=>{n(u)},i=t.trim()!==""&&r.trim()!=="";return(0,H.jsxs)("div",{className:Pe,children:[(0,H.jsx)(O.FormField,{label:"Username",style:{width:200},children:(0,H.jsx)(O.Input,{value:t,id:"text-username",onChange:l})}),(0,H.jsx)(O.FormField,{label:"Password",style:{width:200},children:(0,H.jsx)(O.Input,{type:"password",value:r,id:"text-password",onChange:c})}),(0,H.jsx)(Ne.Button,{className:`${Pe}-login`,disabled:!i,onClick:a,variant:"cta",children:"Login"})]})};var ue=require("@vuu-ui/vuu-utils"),Mt=()=>{let e=(0,ue.getCookieValue)("vuu-username"),t=(0,ue.getCookieValue)("vuu-auth-token");return[e,t]},He=(e="login.html")=>{window.location.href=e},ce=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",He(e)};var g=require("react"),me=w(require("classnames")),ke=require("@salt-ds/core"),de=require("@salt-ds/core"),Z=require("@vuu-ui/vuu-data"),I=require("@vuu-ui/vuu-utils");var T=require("react/jsx-runtime"),b="vuuSessionEditingForm",Re=(e,t)=>{let o=e.find(r=>r.name===t);if(o)return o;throw Error(`SessionEditingForm, no field '${t}' found`)},Fe=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]},M={uninitialised:0,unchanged:1,changed:2,invalid:3};function Ve(e,t,o=!1){switch(t){case"int":case"long":{let r=parseInt(e,10);if((0,I.isValidNumber)(r))return r;if(o)throw Error("SessionEditingForm getTypedValue");return}case"double":{let r=parseFloat(e);return(0,I.isValidNumber)(r)?r:void 0}case"boolean":return e==="true";default:return e}}var Pt=(e,t)=>{if(e)return e;if(t)return new Z.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")},Nt=({className:e,config:{fields:t,key:o},dataSource:r,id:n,onClose:a,schema:l,...c})=>{let[i,m]=(0,g.useState)(),[u,h]=(0,g.useState)(""),d=(0,g.useRef)(null),p=(0,g.useRef)(),y=(0,g.useRef)(M.uninitialised),L=(0,g.useMemo)(()=>{let s=D=>{if(S){let E={};for(let B of L.columns)E[B]=D[S[B]];y.current===M.uninitialised&&(y.current=M.unchanged,p.current=E),m(E)}},f=Pt(r,l),S=(0,I.buildColumnMap)(f.columns);return f.subscribe({range:{from:0,to:5}},D=>{D.type==="viewport-update"&&D.rows&&(y.current===M.uninitialised?s(D.rows[0]):console.log("what do we do with server updates"))}),f},[r,l]),J=(0,ke.useIdMemo)(n),Y=(0,g.useCallback)(s=>{let[f,S]=Fe(s),{type:D}=Re(t,f),E=Ve(S,D);m((B={})=>{let ve={...B,[f]:E},dt=(0,I.shallowEquals)(ve,p.current);return y.current=dt?M.unchanged:E!==void 0?M.changed:M.invalid,ve})},[t]),oe=(0,g.useCallback)(s=>{let[f,S]=Fe(s),{type:D}=Re(t,f);console.log("BLUR",{keyField:o});let E=i==null?void 0:i[o],B=Ve(S,D,!0);typeof E=="string"&&L.menuRpcCall({rowKey:E,field:f,value:B,type:"VP_EDIT_CELL_RPC"})},[L,t,o,i]),_=(0,g.useCallback)(async()=>{let s=await L.menuRpcCall({type:"VP_EDIT_SUBMIT_FORM_RPC"});(0,Z.isErrorResponse)(s)&&h(s.error)},[L]),re=(0,g.useCallback)(s=>{s.key==="Enter"&&y.current===M.changed&&_()},[_]),ne=(0,g.useCallback)(()=>{a()},[a]),se=s=>{var S;let f=String((S=i==null?void 0:i[s.name])!=null?S:"");return s.readonly||s.name===o?(0,T.jsx)("div",{className:`${b}-fieldValue vuuReadOnly`,children:f}):(0,T.jsx)("input",{className:`${b}-fieldValue`,"data-field":s.name,onBlur:oe,onChange:Y,type:"text",value:f,id:`${J}-input-${s.name}`})};(0,g.useEffect)(()=>{if(d.current){let s=d.current.querySelector("input");s&&setTimeout(()=>{s.focus(),console.log("select item"),s.select()},100)}},[]);let ae=y.current===M.changed;return(0,T.jsxs)("div",{...c,className:(0,me.default)(b,e),children:[u?(0,T.jsx)("div",{className:`${b}-errorBanner`,"data-icon":"error",title:u,children:"Error, edit(s) not saved"}):void 0,(0,T.jsx)("div",{className:`${b}-content`,ref:d,onKeyDown:re,children:t.map(s=>{var f;return(0,T.jsxs)("div",{className:`${b}-field`,children:[(0,T.jsx)("label",{className:(0,me.default)(`${b}-fieldLabel`,{[`${b}-required`]:s.required}),htmlFor:`${J}-input-${s.name}`,children:(f=s==null?void 0:s.label)!=null?f:s.description}),se(s)]},s.name)})}),(0,T.jsxs)("div",{className:`${b}-buttonbar salt-theme salt-density-high`,children:[(0,T.jsx)(de.Button,{type:"submit",variant:"cta",disabled:!ae,onClick:_,children:"Submit"}),(0,T.jsx)(de.Button,{variant:"secondary",onClick:ne,children:"Cancel"})]})]})};var rt=require("@vuu-ui/vuu-data"),nt=w(require("classnames")),x=require("react");var ee=require("react"),j=require("react/jsx-runtime"),Ht={},pe=(0,ee.createContext)(Ht),Rt=({children:e,context:t,inheritedContext:o})=>{let r={...o,...t};return(0,j.jsx)(pe.Provider,{value:r,children:e})},fe=({children:e,value:t})=>(0,j.jsx)(pe.Consumer,{children:o=>(0,j.jsx)(Rt,{context:t,inheritedContext:o,children:e})}),Ft=()=>(0,ee.useContext)(pe);var R=require("react");var Ue=(e,t,o="latest")=>new Promise((r,n)=>{console.log(`load local config at ${e} for user ${t.username}, id ${o}`);let a=localStorage.getItem(e);if(a){let l=JSON.parse(a);r(l)}else n()}),Ie=(e,t,o)=>new Promise((r,n)=>{try{localStorage.setItem(e,JSON.stringify(o)),r(void 0)}catch{n()}});var Be=(e,t,o="latest")=>new Promise((r,n)=>{fetch(`${e}/${t.username}/${o}`,{}).then(a=>{a.ok?r(a.json()):n(void 0)}).catch(()=>{n(void 0)})}),Ae=(e,t,o)=>new Promise((r,n)=>{fetch(`${e}/${t.username}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(o)}).then(a=>{a.ok?r(void 0):n()})});var Oe=({saveLocation:e,saveUrl:t="api/vui",user:o,defaultLayout:r})=>{let[n,a]=(0,R.useState)(r),l=e==="remote",c=l?Be:Ue,i=l?Ae:Ie,m=p=>{a(p)},u=(0,R.useCallback)(async(p="latest")=>{try{let y=await c(t,o,p);m(y)}catch{m(r)}},[r,c,t,o]);(0,R.useEffect)(()=>{u()},[u]);let h=(0,R.useCallback)(p=>{i(t,o,p)},[i,t,o]),d=(0,R.useCallback)(p=>{u(p)},[u]);return[n,h,d]};var v=require("@vuu-ui/vuu-layout");var et=require("react");var ze=require("@salt-ds/core"),Ke=require("@heswell/salt-lab"),Ye=require("@salt-ds/icons");var Je=require("@vuu-ui/vuu-utils"),te=require("@heswell/salt-lab"),_e=require("@salt-ds/core"),qe=require("@salt-ds/icons"),P=require("react");var $e=async e=>await fetch(`api/vui/${e.username}`,{}).then(o=>o.ok?o.json():null).catch(()=>{console.log("error getting history")});var F=require("react/jsx-runtime"),Vt=({lastUpdate:e},{lastUpdate:t})=>t===e?0:t<e?-1:1,kt=e=>(0,F.jsx)(te.ListItem,{...e}),Ge=(0,P.forwardRef)(function({loginUrl:t,onNavigate:o,user:r,layoutId:n="latest"},a){let[l,c]=(0,P.useState)([]);(0,P.useEffect)(()=>{async function h(){let p=(await $e(r)).filter(y=>y.id!=="latest").sort(Vt).map(({id:y,lastUpdate:L})=>({lastUpdate:L,id:y,label:`Saved at ${(0,Je.formatDate)(new Date(L),"kk:mm:ss")}`}));console.log({sortedHistory:p}),c(p)}h()},[r]);let i=(0,P.useCallback)((h,d)=>{d&&o(d.id)},[o]),m=(0,P.useCallback)(()=>{ce(t)},[t]),u=l.length===0?null:n==="latest"?l[0]:l.find(h=>h.id===n);return(0,F.jsxs)("div",{className:"vuuUserPanel",ref:a,children:[(0,F.jsx)(te.List,{ListItem:kt,className:"vuuUserPanel-history",onSelect:i,selected:u,source:l}),(0,F.jsx)("div",{className:"vuuUserPanel-buttonBar",children:(0,F.jsxs)(_e.Button,{"aria-label":"logout",onClick:m,children:[(0,F.jsx)(qe.ExportIcon,{})," Logout"]})})]})});var $=require("react/jsx-runtime"),We=({layoutId:e,loginUrl:t,onNavigate:o,user:r})=>(0,$.jsxs)(Ke.DropdownBase,{className:"vuuUserProfile",placement:"bottom-end",children:[(0,$.jsx)(ze.Button,{variant:"secondary",children:(0,$.jsx)(Ye.UserSolidIcon,{})}),(0,$.jsx)(Ge,{layoutId:e,loginUrl:t,onNavigate:a=>{o(a)},user:r})]});var G=require("@heswell/salt-lab"),Xe=w(require("classnames")),Ze=require("@salt-ds/core"),je=require("react");var z=require("react/jsx-runtime"),Ut="vuuThemeSwitch",Qe=["light","dark"],ge=({className:e,defaultMode:t,mode:o,onChange:r,...n})=>{let[a,l]=(0,Ze.useControlled)({controlled:o,default:t!=null?t:"light",name:"ThemeSwitch",state:"mode"}),c=Qe.indexOf(a),i=(0,je.useCallback)((u,h)=>{let d=Qe[h];l(d),r(d)},[r,l]),m=(0,Xe.default)(Ut,e);return(0,z.jsxs)(G.ToggleButtonGroup,{className:m,...n,onChange:i,selectedIndex:c,children:[(0,z.jsx)(G.ToggleButton,{"aria-label":"alert",tooltipText:"Light Theme","data-icon":"light"}),(0,z.jsx)(G.ToggleButton,{"aria-label":"home",tooltipText:"Dark Theme","data-icon":"dark"})]})};var tt=w(require("classnames"));var K=require("react/jsx-runtime"),It="vuuAppHeader",ot=({className:e,layoutId:t,loginUrl:o,onNavigate:r,onSwitchTheme:n,themeMode:a="light",user:l,...c})=>{let i=(0,tt.default)(It,e),m=(0,et.useCallback)(u=>n==null?void 0:n(u),[n]);return(0,K.jsxs)("header",{className:i,...c,children:[(0,K.jsx)(ge,{defaultMode:a,onChange:m}),(0,K.jsx)(We,{layoutId:t,loginUrl:o,onNavigate:r,user:l})]})};var st=require("@vuu-ui/vuu-utils");var C=require("react/jsx-runtime"),{error:he}=(0,st.logger)("Shell"),Bt={type:"View",props:{style:{height:"calc(100% - 6px)"}},children:[{props:{className:"vuuShell-warningPlaceholder"},type:"Placeholder"}]},At=({children:e,className:t,defaultLayout:o=Bt,leftSidePanel:r,loginUrl:n,saveLocation:a="remote",saveUrl:l,serverUrl:c,user:i,...m})=>{let u=(0,x.useRef)(null),h=(0,x.useRef)(null),[d,p]=(0,x.useState)(!1),y=(0,x.useRef)("latest"),[L,J,Y]=Oe({defaultLayout:o,saveLocation:a,user:i}),oe=(0,x.useCallback)(s=>{try{J(s)}catch{he==null||he("Failed to save layout")}},[J]),_=(0,x.useCallback)(s=>{u.current&&(u.current.dataset.mode=s)},[]),re=s=>{var S;let f=s.target;(S=h.current)!=null&&S.contains(f)||p(!d)},ne=(0,x.useCallback)(s=>{y.current=s,Y(s)},[Y]);(0,x.useEffect)(()=>{c&&i.token&&(0,rt.connectToServer)({authToken:i.token,url:c,username:i.username})},[c,i.token,i.username]);let se=()=>{let s=[];return r&&s.push((0,C.jsx)(v.Drawer,{onClick:re,open:d,position:"left",inline:!0,peekaboo:!0,sizeOpen:200,toggleButton:"end",children:(0,C.jsx)(v.View,{className:"vuuShell-palette",id:"vw-app-palette",ref:h,style:{height:"100%"},children:r},"app-palette")},"left-panel")),s},ae=(0,nt.default)("vuuShell",t,"salt-theme","salt-density-high");return(0,C.jsxs)(fe,{value:void 0,children:[(0,C.jsx)(v.LayoutProvider,{layout:L,onLayoutChange:oe,children:(0,C.jsx)(v.DraggableLayout,{className:ae,"data-mode":"light",ref:u,...m,children:(0,C.jsxs)(v.Flexbox,{className:"App",style:{flexDirection:"column",height:"100%",width:"100%"},children:[(0,C.jsx)(ot,{layoutId:y.current,loginUrl:n,user:i,onNavigate:ne,onSwitchTheme:_}),(0,C.jsx)(v.DockLayout,{style:{flex:1},children:se().concat((0,C.jsx)(v.DraggableLayout,{dropTarget:!0,style:{width:"100%",height:"100%"}},"main-content"))})]})})}),e]})};var V=require("react"),at=w(require("classnames")),mt=require("react/jsx-runtime"),it="medium",lt="salt-theme",ut="light",ye=(0,V.createContext)({density:"high",theme:"salt-theme",themeMode:"light"}),Ot=(e,t,o,r)=>{var n;return(0,V.isValidElement)(e)?(0,V.cloneElement)(e,{className:(0,at.default)((n=e.props)==null?void 0:n.className,t,`salt-density-${r}`),"data-mode":o}):(console.warn(`
+"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,
+  SessionEditingForm: () => SessionEditingForm,
+  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 [classBase6, 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", classBase6, className)
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vuuStatus-container salt-theme", children: [
+    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(error2) {
+    return { errorMessage: error2.message };
+  }
+  componentDidCatch(error2, errorInfo) {
+    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: "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");
+var componentsMap = /* @__PURE__ */ new Map();
+var useCachedFeature = (url) => {
+  (0, import_react4.useEffect)(
+    () => () => {
+      componentsMap.delete(url);
+    },
+    [url]
+  );
+  if (!componentsMap.has(url)) {
+    componentsMap.set(
+      url,
+      import_react4.default.lazy(() => import(
+        /* @vite-ignore */
+        url
+      ))
+    );
+  }
+  return componentsMap.get(url);
+};
+function RawFeature({
+  url,
+  css,
+  params,
+  ...props
+}) {
+  console.log("Feature render", { css, url, props });
+  (0, import_react4.useEffect)(() => {
+    console.log("%cFeature mount", "color: green;");
+    return () => {
+      console.log("%cFeature unmount", "color:red;");
+    };
+  }, []);
+  if (css) {
+    import(
+      /* @vite-ignore */
+      css
+    ).then(
+      (cssModule) => {
+        console.log("%cInject Styles", "color: blue;font-weight: bold");
+        document.adoptedStyleSheets = [
+          ...document.adoptedStyleSheets,
+          cssModule.default
+        ];
+      }
+    );
+  }
+  const LazyFeature = useCachedFeature(url);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loader, {}), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LazyFeature, { ...props, ...params }) }) });
+}
+var Feature = import_react4.default.memo(RawFeature);
+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/session-editing-form/SessionEditingForm.tsx
+var import_react6 = require("react");
+var import_classnames3 = __toESM(require("classnames"));
+var import_core2 = require("@salt-ds/core");
+var import_core3 = require("@salt-ds/core");
+var import_vuu_data = require("@vuu-ui/vuu-data");
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var classBase3 = "vuuSessionEditingForm";
+var getField = (fields, name) => {
+  const field = fields.find((f) => f.name === name);
+  if (field) {
+    return field;
+  } else {
+    throw Error(`SessionEditingForm, no field '${name}' found`);
+  }
+};
+var getFieldNameAndValue = (evt) => {
+  const {
+    dataset: { field },
+    value
+  } = evt.target;
+  if (field === void 0) {
+    throw Error("SessionEditingForm, form field has no field name");
+  }
+  return [field, value];
+};
+var Status = {
+  uninitialised: 0,
+  unchanged: 1,
+  changed: 2,
+  invalid: 3
+};
+function getTypedValue(value, type, throwIfUndefined = false) {
+  switch (type) {
+    case "int":
+    case "long": {
+      const typedValue = parseInt(value, 10);
+      if ((0, import_vuu_utils2.isValidNumber)(typedValue)) {
+        return typedValue;
+      } else if (throwIfUndefined) {
+        throw Error("SessionEditingForm getTypedValue");
+      } else {
+        return void 0;
+      }
+    }
+    case "double": {
+      const typedValue = parseFloat(value);
+      if ((0, import_vuu_utils2.isValidNumber)(typedValue)) {
+        return typedValue;
+      }
+      return void 0;
+    }
+    case "boolean":
+      return value === "true" ? true : false;
+    default:
+      return value;
+  }
+}
+var getDataSource = (dataSource, schema) => {
+  if (dataSource) {
+    return dataSource;
+  } else if (schema) {
+    return new import_vuu_data.RemoteDataSource({
+      bufferSize: 0,
+      table: schema.table,
+      columns: schema.columns.map((col) => col.name)
+    });
+  } else {
+    throw Error(
+      "SessionEditingForm: either a DataSource or a TableSchema must be provided"
+    );
+  }
+};
+var SessionEditingForm = ({
+  className,
+  config: { fields, key: keyField },
+  dataSource: dataSourceProp,
+  id: idProp,
+  onClose,
+  schema,
+  ...htmlAttributes
+}) => {
+  const [values, setValues] = (0, import_react6.useState)();
+  const [errorMessage, setErrorMessage] = (0, import_react6.useState)("");
+  const formContentRef = (0, import_react6.useRef)(null);
+  const initialDataRef = (0, import_react6.useRef)();
+  const dataStatusRef = (0, import_react6.useRef)(Status.uninitialised);
+  const dataSource = (0, import_react6.useMemo)(() => {
+    const applyServerData = (data) => {
+      if (columnMap) {
+        const values2 = {};
+        for (const column of dataSource.columns) {
+          values2[column] = data[columnMap[column]];
+        }
+        if (dataStatusRef.current === Status.uninitialised) {
+          dataStatusRef.current = Status.unchanged;
+          initialDataRef.current = values2;
+        }
+        setValues(values2);
+      }
+    };
+    const ds = getDataSource(dataSourceProp, schema);
+    const columnMap = (0, import_vuu_utils2.buildColumnMap)(ds.columns);
+    ds.subscribe({ range: { from: 0, to: 5 } }, (message) => {
+      if (message.type === "viewport-update" && message.rows) {
+        if (dataStatusRef.current === Status.uninitialised) {
+          applyServerData(message.rows[0]);
+        } else {
+          console.log("what do we do with server updates");
+        }
+      }
+    });
+    return ds;
+  }, [dataSourceProp, schema]);
+  const id = (0, import_core2.useIdMemo)(idProp);
+  const handleChange = (0, import_react6.useCallback)(
+    (evt) => {
+      const [field, value] = getFieldNameAndValue(evt);
+      const { type } = getField(fields, field);
+      const typedValue = getTypedValue(value, type);
+      setValues((values2 = {}) => {
+        const newValues = {
+          ...values2,
+          [field]: typedValue
+        };
+        const notUpdated = (0, import_vuu_utils2.shallowEquals)(newValues, initialDataRef.current);
+        dataStatusRef.current = notUpdated ? Status.unchanged : typedValue !== void 0 ? Status.changed : Status.invalid;
+        return newValues;
+      });
+    },
+    [fields]
+  );
+  const handleBlur = (0, import_react6.useCallback)(
+    (evt) => {
+      const [field, value] = getFieldNameAndValue(evt);
+      const { type } = getField(fields, field);
+      console.log("BLUR", {
+        keyField
+      });
+      const rowKey = values == null ? void 0 : values[keyField];
+      const typedValue = getTypedValue(value, type, true);
+      if (typeof rowKey === "string") {
+        dataSource.menuRpcCall({
+          rowKey,
+          field,
+          value: typedValue,
+          type: "VP_EDIT_CELL_RPC"
+        });
+      }
+    },
+    [dataSource, fields, keyField, values]
+  );
+  const handleSubmit = (0, import_react6.useCallback)(async () => {
+    const response = await dataSource.menuRpcCall({
+      type: "VP_EDIT_SUBMIT_FORM_RPC"
+    });
+    if ((0, import_vuu_data.isErrorResponse)(response)) {
+      setErrorMessage(response.error);
+    }
+  }, [dataSource]);
+  const handleKeyDown = (0, import_react6.useCallback)(
+    (evt) => {
+      if (evt.key === "Enter" && dataStatusRef.current === Status.changed) {
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const handleCancel = (0, import_react6.useCallback)(() => {
+    onClose();
+  }, [onClose]);
+  const getFormControl = (field) => {
+    var _a;
+    const value = String((_a = values == null ? void 0 : values[field.name]) != null ? _a : "");
+    if (field.readonly || field.name === keyField) {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase3}-fieldValue vuuReadOnly`, children: value });
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          className: `${classBase3}-fieldValue`,
+          "data-field": field.name,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          type: "text",
+          value,
+          id: `${id}-input-${field.name}`
+        }
+      );
+    }
+  };
+  (0, import_react6.useEffect)(() => {
+    if (formContentRef.current) {
+      const firstInput = formContentRef.current.querySelector(
+        "input"
+      );
+      if (firstInput) {
+        setTimeout(() => {
+          firstInput.focus();
+          console.log("select item");
+          firstInput.select();
+        }, 100);
+      }
+    }
+  }, []);
+  const isDirty = dataStatusRef.current === Status.changed;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames3.default)(classBase3, className), children: [
+    errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        className: `${classBase3}-errorBanner`,
+        "data-icon": "error",
+        title: errorMessage,
+        children: "Error, edit(s) not saved"
+      }
+    ) : void 0,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        className: `${classBase3}-content`,
+        ref: formContentRef,
+        onKeyDown: handleKeyDown,
+        children: fields.map((field) => {
+          var _a;
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `${classBase3}-field`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "label",
+              {
+                className: (0, import_classnames3.default)(`${classBase3}-fieldLabel`, {
+                  [`${classBase3}-required`]: field.required
+                }),
+                htmlFor: `${id}-input-${field.name}`,
+                children: (_a = field == null ? void 0 : field.label) != null ? _a : field.description
+              }
+            ),
+            getFormControl(field)
+          ] }, field.name);
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `${classBase3}-buttonbar salt-theme salt-density-high`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_core3.Button,
+        {
+          type: "submit",
+          variant: "cta",
+          disabled: !isDirty,
+          onClick: handleSubmit,
+          children: "Submit"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core3.Button, { variant: "secondary", onClick: handleCancel, children: "Cancel" })
+    ] })
+  ] });
+};
+
+// src/shell.tsx
+var import_vuu_data2 = require("@vuu-ui/vuu-data");
+var import_classnames6 = __toESM(require("classnames"));
+var import_react12 = require("react");
+
+// src/ShellContextProvider.tsx
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var defaultConfig = {};
+var ShellContext = (0, import_react7.createContext)(defaultConfig);
+var Provider = ({
+  children,
+  context,
+  inheritedContext
+}) => {
+  const mergedContext = {
+    ...inheritedContext,
+    ...context
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ShellContext.Provider, { value: mergedContext, children });
+};
+var ShellContextProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Provider, { context: value, inheritedContext: context, children }) });
+};
+var useShellContext = () => {
+  return (0, import_react7.useContext)(ShellContext);
+};
+
+// src/layout-config/use-layout-config.ts
+var import_react8 = require("react");
+
+// src/layout-config/local-config.ts
+var loadLocalConfig = (saveUrl, user, id = "latest") => new Promise((resolve, reject) => {
+  console.log(
+    `load local config at ${saveUrl} for user ${user.username}, id ${id}`
+  );
+  const data = localStorage.getItem(saveUrl);
+  if (data) {
+    const layout = JSON.parse(data);
+    resolve(layout);
+  } else {
+    reject();
+  }
+});
+var saveLocalConfig = (saveUrl, user, data) => new Promise((resolve, reject) => {
+  try {
+    localStorage.setItem(saveUrl, JSON.stringify(data));
+    resolve(void 0);
+  } catch {
+    reject();
+  }
+});
+
+// src/layout-config/remote-config.ts
+var loadRemoteConfig = (saveUrl, user, id = "latest") => new Promise((resolve, reject) => {
+  fetch(`${saveUrl}/${user.username}/${id}`, {}).then((response) => {
+    if (response.ok) {
+      resolve(response.json());
+    } else {
+      reject(void 0);
+    }
+  }).catch(() => {
+    reject(void 0);
+  });
+});
+var saveRemoteConfig = (saveUrl, user, data) => new Promise((resolve, reject) => {
+  fetch(`${saveUrl}/${user.username}`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(data)
+  }).then((response) => {
+    if (response.ok) {
+      resolve(void 0);
+    } else {
+      reject();
+    }
+  });
+});
+
+// src/layout-config/use-layout-config.ts
+var useLayoutConfig = ({
+  saveLocation,
+  saveUrl = "api/vui",
+  user,
+  defaultLayout
+}) => {
+  const [layout, _setLayout] = (0, import_react8.useState)(defaultLayout);
+  const usingRemote = saveLocation === "remote";
+  const loadConfig = usingRemote ? loadRemoteConfig : loadLocalConfig;
+  const saveConfig = usingRemote ? saveRemoteConfig : saveLocalConfig;
+  const setLayout = (layout2) => {
+    _setLayout(layout2);
+  };
+  const load = (0, import_react8.useCallback)(
+    async (id = "latest") => {
+      try {
+        const layout2 = await loadConfig(saveUrl, user, id);
+        setLayout(layout2);
+      } catch {
+        setLayout(defaultLayout);
+      }
+    },
+    [defaultLayout, loadConfig, saveUrl, user]
+  );
+  (0, import_react8.useEffect)(() => {
+    load();
+  }, [load]);
+  const saveData = (0, import_react8.useCallback)(
+    (data) => {
+      saveConfig(saveUrl, user, data);
+    },
+    [saveConfig, saveUrl, user]
+  );
+  const loadLayoutById = (0, import_react8.useCallback)(
+    (id) => {
+      load(id);
+    },
+    [load]
+  );
+  return [layout, saveData, loadLayoutById];
+};
+
+// src/shell.tsx
+var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
+
+// src/app-header/AppHeader.tsx
+var import_react11 = require("react");
+
+// src/user-profile/UserProfile.tsx
+var import_core5 = require("@salt-ds/core");
+var import_salt_lab4 = require("@heswell/salt-lab");
+var import_icons2 = require("@salt-ds/icons");
+
+// src/user-profile/UserPanel.tsx
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_salt_lab3 = require("@heswell/salt-lab");
+var import_core4 = require("@salt-ds/core");
+var import_icons = require("@salt-ds/icons");
+var import_react9 = 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_runtime9 = require("react/jsx-runtime");
+var byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
+  return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
+};
+var HistoryListItem = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab3.ListItem, { ...props });
+};
+var UserPanel = (0, import_react9.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
+  const [history, setHistory] = (0, import_react9.useState)([]);
+  (0, import_react9.useEffect)(() => {
+    async function getHistory() {
+      const history2 = await getLayoutHistory(user);
+      const sortedHistory = history2.filter((item) => item.id !== "latest").sort(byLastUpdate).map(({ id, lastUpdate }) => ({
+        lastUpdate,
+        id,
+        label: `Saved at ${(0, import_vuu_utils3.formatDate)(new Date(lastUpdate), "kk:mm:ss")}`
+      }));
+      console.log({ sortedHistory });
+      setHistory(sortedHistory);
+    }
+    getHistory();
+  }, [user]);
+  const handleHisorySelected = (0, import_react9.useCallback)(
+    (evt, selected2) => {
+      if (selected2) {
+        onNavigate(selected2.id);
+      }
+    },
+    [onNavigate]
+  );
+  const handleLogout = (0, import_react9.useCallback)(() => {
+    logout(loginUrl);
+  }, [loginUrl]);
+  const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_salt_lab3.List,
+      {
+        ListItem: HistoryListItem,
+        className: "vuuUserPanel-history",
+        onSelect: handleHisorySelected,
+        selected,
+        source: history
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.Button, { "aria-label": "logout", onClick: handleLogout, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons.ExportIcon, {}),
+      " Logout"
+    ] }) })
+  ] });
+});
+
+// src/user-profile/UserProfile.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var UserProfile = ({
+  layoutId,
+  loginUrl,
+  onNavigate,
+  user
+}) => {
+  const handleNavigate = (id) => {
+    onNavigate(id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_salt_lab4.DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons2.UserSolidIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      UserPanel,
+      {
+        layoutId,
+        loginUrl,
+        onNavigate: handleNavigate,
+        user
+      }
+    )
+  ] });
+};
+
+// src/theme-switch/ThemeSwitch.tsx
+var import_salt_lab5 = require("@heswell/salt-lab");
+var import_classnames4 = __toESM(require("classnames"));
+var import_core6 = require("@salt-ds/core");
+var import_react10 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var classBase4 = "vuuThemeSwitch";
+var modes = ["light", "dark"];
+var ThemeSwitch = ({
+  className: classNameProp,
+  defaultMode: defaultModeProp,
+  mode: modeProp,
+  onChange,
+  ...htmlAttributes
+}) => {
+  const [mode, setMode] = (0, import_core6.useControlled)({
+    controlled: modeProp,
+    default: defaultModeProp != null ? defaultModeProp : "light",
+    name: "ThemeSwitch",
+    state: "mode"
+  });
+  const selectedIndex = modes.indexOf(mode);
+  const handleChangeSecondary = (0, import_react10.useCallback)(
+    (_evt, index) => {
+      const mode2 = modes[index];
+      setMode(mode2);
+      onChange(mode2);
+    },
+    [onChange, setMode]
+  );
+  const className = (0, import_classnames4.default)(classBase4, classNameProp);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    import_salt_lab5.ToggleButtonGroup,
+    {
+      className,
+      ...htmlAttributes,
+      onChange: handleChangeSecondary,
+      selectedIndex,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_salt_lab5.ToggleButton,
+          {
+            "aria-label": "alert",
+            tooltipText: "Light Theme",
+            "data-icon": "light"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_salt_lab5.ToggleButton,
+          {
+            "aria-label": "home",
+            tooltipText: "Dark Theme",
+            "data-icon": "dark"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/app-header/AppHeader.tsx
+var import_classnames5 = __toESM(require("classnames"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var classBase5 = "vuuAppHeader";
+var AppHeader = ({
+  className: classNameProp,
+  layoutId,
+  loginUrl,
+  onNavigate,
+  onSwitchTheme,
+  themeMode = "light",
+  user,
+  ...htmlAttributes
+}) => {
+  const className = (0, import_classnames5.default)(classBase5, classNameProp);
+  const handleSwitchTheme = (0, import_react11.useCallback)(
+    (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
+    [onSwitchTheme]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className, ...htmlAttributes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      UserProfile,
+      {
+        layoutId,
+        loginUrl,
+        onNavigate,
+        user
+      }
+    )
+  ] });
+};
+
+// src/shell.tsx
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var { error } = (0, import_vuu_utils4.logger)("Shell");
+var warningLayout = {
+  type: "View",
+  props: {
+    style: { height: "calc(100% - 6px)" }
+  },
+  children: [
+    {
+      props: {
+        className: "vuuShell-warningPlaceholder"
+      },
+      type: "Placeholder"
+    }
+  ]
+};
+var Shell = ({
+  children,
+  className: classNameProp,
+  defaultLayout = warningLayout,
+  leftSidePanel,
+  loginUrl,
+  saveLocation = "remote",
+  saveUrl,
+  serverUrl,
+  user,
+  ...htmlAttributes
+}) => {
+  const rootRef = (0, import_react12.useRef)(null);
+  const paletteView = (0, import_react12.useRef)(null);
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const layoutId = (0, import_react12.useRef)("latest");
+  const [layout, saveLayoutConfig, loadLayoutById] = useLayoutConfig({
+    defaultLayout,
+    saveLocation,
+    user
+  });
+  const handleLayoutChange = (0, import_react12.useCallback)(
+    (layout2) => {
+      try {
+        saveLayoutConfig(layout2);
+      } catch {
+        error == null ? void 0 : error("Failed to save layout");
+      }
+    },
+    [saveLayoutConfig]
+  );
+  const handleSwitchTheme = (0, import_react12.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_react12.useCallback)(
+    (id) => {
+      layoutId.current = id;
+      loadLayoutById(id);
+    },
+    [loadLayoutById]
+  );
+  (0, import_react12.useEffect)(() => {
+    if (serverUrl && user.token) {
+      (0, import_vuu_data2.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_runtime13.jsx)(
+          import_vuu_layout2.Drawer,
+          {
+            onClick: handleDrawerClick,
+            open,
+            position: "left",
+            inline: true,
+            peekaboo: true,
+            sizeOpen: 200,
+            toggleButton: "end",
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.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_classnames6.default)(
+    "vuuShell",
+    classNameProp,
+    "salt-theme",
+    "salt-density-high"
+  );
+  return (
+    // ShellContext TBD
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ShellContextProvider, { value: void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vuu_layout2.LayoutProvider, { layout, onLayoutChange: handleLayoutChange, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_vuu_layout2.DraggableLayout,
+        {
+          className,
+          "data-mode": "light",
+          ref: rootRef,
+          ...htmlAttributes,
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            import_vuu_layout2.Flexbox,
+            {
+              className: "App",
+              style: { flexDirection: "column", height: "100%", width: "100%" },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  AppHeader,
+                  {
+                    layoutId: layoutId.current,
+                    loginUrl,
+                    user,
+                    onNavigate: handleNavigate,
+                    onSwitchTheme: handleSwitchTheme
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vuu_layout2.DockLayout, { style: { flex: 1 }, children: getDrawers().concat(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    import_vuu_layout2.DraggableLayout,
+                    {
+                      dropTarget: true,
+                      style: { width: "100%", height: "100%" }
+                    },
+                    "main-content"
+                  )
+                ) })
+              ]
+            }
+          )
+        }
+      ) }),
+      children
+    ] })
+  );
+};
+
+// src/theme-provider/ThemeProvider.tsx
+var import_react13 = require("react");
+var import_classnames7 = __toESM(require("classnames"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DEFAULT_DENSITY2 = "medium";
+var DEFAULT_THEME = "salt-theme";
+var DEFAULT_THEME_MODE = "light";
+var ThemeContext = (0, import_react13.createContext)({
+  density: "high",
+  theme: "salt-theme",
+  themeMode: "light"
+});
+var createThemedChildren = (children, theme, themeMode, density) => {
+  var _a;
+  if ((0, import_react13.isValidElement)(children)) {
+    return (0, import_react13.cloneElement)(children, {
+      className: (0, import_classnames7.default)(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        (_a = children.props) == null ? void 0 : _a.className,
+        theme,
+        `salt-density-${density}`
+      ),
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      "data-mode": themeMode
+    });
+  } else {
+    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`),e)},ct=({children:e,theme:t,themeMode:o,density:r})=>{var h,d,p;let{density:n,themeMode:a,theme:l}=(0,V.useContext)(ye),c=(h=r!=null?r:n)!=null?h:it,i=(d=o!=null?o:a)!=null?d:ut,m=(p=t!=null?t:l)!=null?p:lt,u=Ot(e,m,i,c);return(0,mt.jsx)(ye.Provider,{value:{themeMode:i,density:c,theme:m},children:u})};ct.displayName="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_react13.useContext)(ThemeContext);
+  const density = (_a = densityProp != null ? densityProp : inheritedDensity) != null ? _a : DEFAULT_DENSITY2;
+  const themeMode = (_b = themeModeProp != null ? themeModeProp : inheritedThemeMode) != null ? _b : DEFAULT_THEME_MODE;
+  const theme = (_c = themeProp != null ? themeProp : inheritedTheme) != null ? _c : DEFAULT_THEME;
+  const themedChildren = createThemedChildren(
+    children,
+    theme,
+    themeMode,
+    density
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
+};
+ThemeProvider.displayName = "ThemeProvider";
 //# sourceMappingURL=index.js.map