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

package/esm/index.js

@@ -1,4 +1,1074 @@
-import me,{useEffect as ce,useState as ue}from"react";import de from"classnames";import{Fragment as pe,jsx as he,jsxs as H}from"react/jsx-runtime";var Rt=({connectionStatus:t,className:e,element:o="span",...r})=>{let[n,s]=ue("vuuConnectingStatus");ce(()=>{switch(t){case"connected":case"reconnected":s("vuuActiveStatus");break;case"connecting":s("vuuConnectingStatus");break;case"disconnected":s("vuuDisconnectedStatus");break;default:break}},[t]);let a=me.createElement(o,{...r,className:de("vuuStatus vuuIcon",n,e)});return he(pe,{children:H("div",{className:"vuuStatus-container salt-theme",children:[a,H("div",{className:"vuuStatus-text",children:["Status: ",t.toUpperCase()]})]})})};import{Dropdown as ge}from"@heswell/salt-lab";import{useCallback as fe}from"react";import ye from"classnames";import{jsx as Ce}from"react/jsx-runtime";var ve="vuuDensitySwitch",xe=["high","medium","low","touch"],Te="high",Jt=({className:t,defaultDensity:e=Te,onDensityChange:o})=>{let r=fe((s,a)=>{o(a)},[o]),n=ye(ve,t);return Ce(ge,{className:n,source:xe,defaultSelected:e,onSelectionChange:r})};import k,{Suspense as Ee}from"react";import{registerComponent as we}from"@vuu-ui/vuu-layout";import Le from"react";import{Fragment as Se,jsx as N,jsxs as Pe}from"react/jsx-runtime";var x=class extends Le.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?Pe(Se,{children:[N("h1",{children:"Something went wrong."}),N("p",{children:this.state.errorMessage})]}):this.props.children}};import{jsx as Me}from"react/jsx-runtime";var b=()=>Me("div",{className:"hwLoader",children:"loading"});import{jsx as T}from"react/jsx-runtime";function De({url:t,css:e,params:o,...r}){e&&import(e).then(s=>{document.adoptedStyleSheets=[...document.adoptedStyleSheets,s.default]});let n=k.lazy(()=>import(t));return T(x,{children:T(Ee,{fallback:T(b,{}),children:T(n,{...r,...o})})})}var U=k.memo(De);U.displayName="Feature";we("Feature",U,"view");import{useState as I}from"react";import{Button as He}from"@salt-ds/core";import{FormField as R,Input as A}from"@heswell/salt-lab";import{jsx as v,jsxs as Ne}from"react/jsx-runtime";var B="vuuLoginPanel",yo=({onSubmit:t})=>{let[e,o]=I(""),[r,n]=I(""),s=()=>{t(e,r)},a=(l,c)=>{o(c)},m=(l,c)=>{n(c)},i=e.trim()!==""&&r.trim()!=="";return Ne("div",{className:B,children:[v(R,{label:"Username",style:{width:200},children:v(A,{value:e,id:"text-username",onChange:a})}),v(R,{label:"Password",style:{width:200},children:v(A,{type:"password",value:r,id:"text-password",onChange:m})}),v(He,{className:`${B}-login`,disabled:!i,onClick:s,variant:"cta",children:"Login"})]})};import{getCookieValue as F}from"@vuu-ui/vuu-utils";var Co=()=>{let t=F("vuu-username"),e=F("vuu-auth-token");return[t,e]},be=(t="login.html")=>{window.location.href=t},V=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",be(t)};import{connectToServer as mt}from"@vuu-ui/vuu-data";import ct from"classnames";import{useCallback as E,useEffect as ut,useRef as w,useState as dt}from"react";import{createContext as ke,useContext as Ue}from"react";import{jsx as L}from"react/jsx-runtime";var Ie={},S=ke(Ie),Re=({children:t,context:e,inheritedContext:o})=>{let r={...o,...e};return L(S.Provider,{value:r,children:t})},O=({children:t,value:e})=>L(S.Consumer,{children:o=>L(Re,{context:e,inheritedContext:o,children:t})}),Ho=()=>Ue(S);import{useCallback as P,useEffect as Ae,useState as Be}from"react";var Fe=(t,e)=>{let[o,r]=Be(e),n=i=>{r(i)},s=P(async(i="latest")=>{fetch(`api/vui/${t.username}/${i}`,{}).then(l=>l.ok?l.json():e).then(n).catch(()=>{n(e)})},[e,t.username]);Ae(()=>{s()},[s]);let a=P(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=P(i=>{s(i)},[s]);return[o,a,m]},_=Fe;import{DockLayout as pt,DraggableLayout as j,Drawer as ht,Flexbox as gt,LayoutProvider as ft,View as yt}from"@vuu-ui/vuu-layout";import{useCallback as st}from"react";import{Button as Ke}from"@salt-ds/core";import{DropdownBase as Qe}from"@heswell/salt-lab";import{UserSolidIcon as Xe}from"@salt-ds/icons";import{formatDate as Ve}from"@vuu-ui/vuu-utils";import{List as Oe,ListItem as _e}from"@heswell/salt-lab";import{Button as $e}from"@salt-ds/core";import{ExportIcon as Ge}from"@salt-ds/icons";import{forwardRef as Je,useCallback as G,useEffect as ze,useState as Ye}from"react";var $=async t=>await fetch(`api/vui/${t.username}`,{}).then(o=>o.ok?o.json():null).catch(()=>{console.log("error getting history")});import{jsx as C,jsxs as J}from"react/jsx-runtime";var qe=({lastUpdate:t},{lastUpdate:e})=>e===t?0:e<t?-1:1,We=t=>C(_e,{...t}),z=Je(function({loginUrl:e,onNavigate:o,user:r,layoutId:n="latest"},s){let[a,m]=Ye([]);ze(()=>{async function d(){let h=(await $(r)).filter(f=>f.id!=="latest").sort(qe).map(({id:f,lastUpdate:y})=>({lastUpdate:y,id:f,label:`Saved at ${Ve(new Date(y),"kk:mm:ss")}`}));console.log({sortedHistory:h}),m(h)}d()},[r]);let i=G((d,u)=>{u&&o(u.id)},[o]),l=G(()=>{V(e)},[e]),c=a.length===0?null:n==="latest"?a[0]:a.find(d=>d.id===n);return J("div",{className:"vuuUserPanel",ref:s,children:[C(Oe,{ListItem:We,className:"vuuUserPanel-history",onSelect:i,selected:c,source:a}),C("div",{className:"vuuUserPanel-buttonBar",children:J($e,{"aria-label":"logout",onClick:l,children:[C(Ge,{})," Logout"]})})]})});import{jsx as M,jsxs as Ze}from"react/jsx-runtime";var Y=({layoutId:t,loginUrl:e,onNavigate:o,user:r})=>Ze(Qe,{className:"vuuUserProfile",placement:"bottom-end",children:[M(Ke,{variant:"secondary",children:M(Xe,{})}),M(z,{layoutId:t,loginUrl:e,onNavigate:s=>{o(s)},user:r})]});import{ToggleButton as q,ToggleButtonGroup as je}from"@heswell/salt-lab";import et from"classnames";import{useControlled as tt}from"@salt-ds/core";import{useCallback as ot}from"react";import{jsx as K,jsxs as nt}from"react/jsx-runtime";var rt="vuuThemeSwitch",W=["light","dark"],Q=({className:t,defaultMode:e,mode:o,onChange:r,...n})=>{let[s,a]=tt({controlled:o,default:e!=null?e:"light",name:"ThemeSwitch",state:"mode"}),m=W.indexOf(s),i=ot((c,d)=>{let u=W[d];a(u),r(u)},[r,a]),l=et(rt,t);return nt(je,{className:l,...n,onChange:i,selectedIndex:m,children:[K(q,{"aria-label":"alert",tooltipText:"Light Theme","data-icon":"light"}),K(q,{"aria-label":"home",tooltipText:"Dark Theme","data-icon":"dark"})]})};import at from"classnames";import{jsx as X,jsxs as lt}from"react/jsx-runtime";var it="vuuAppHeader",Z=({className:t,layoutId:e,loginUrl:o,onNavigate:r,onSwitchTheme:n,themeMode:s="light",user:a,...m})=>{let i=at(it,t),l=st(c=>n==null?void 0:n(c),[n]);return lt("header",{className:i,...m,children:[X(Q,{defaultMode:s,onChange:l}),X(Y,{layoutId:e,loginUrl:o,onNavigate:r,user:a})]})};import{jsx as g,jsxs as ee}from"react/jsx-runtime";var vt={type:"View",props:{style:{height:"calc(100% - 6px)"}},children:[{props:{className:"vuuShell-warningPlaceholder"},type:"Placeholder"}]},qr=({children:t,className:e,defaultLayout:o=vt,leftSidePanel:r,loginUrl:n,serverUrl:s,user:a,...m})=>{let i=w(null),l=w(null),[c,d]=dt(!1),u=w("latest"),[h,f,y]=_(a,o),oe=E(p=>{f(p)},[f]),re=E(p=>{i.current&&(i.current.dataset.mode=p)},[]),ne=p=>{var D;let le=p.target;(D=l.current)!=null&&D.contains(le)||d(!c)},se=E(p=>{u.current=p,y(p)},[y]);ut(()=>{s&&a.token&&mt({authToken:a.token,url:s,username:a.username})},[s,a.token,a.username]);let ae=()=>{let p=[];return r&&p.push(g(ht,{onClick:ne,open:c,position:"left",inline:!0,peekaboo:!0,sizeOpen:200,toggleButton:"end",children:g(yt,{className:"vuuShell-palette",id:"vw-app-palette",ref:l,style:{height:"100%"},children:r},"app-palette")},"left-panel")),p},ie=ct("vuuShell",e,"salt-theme","salt-density-high");return ee(O,{value:void 0,children:[g(ft,{layout:h,onLayoutChange:oe,children:g(j,{className:ie,"data-mode":"light",ref:i,...m,children:ee(gt,{className:"App",style:{flexDirection:"column",height:"100%",width:"100%"},children:[g(Z,{layoutId:u.current,loginUrl:n,user:a,onNavigate:se,onSwitchTheme:re}),g(pt,{style:{flex:1},children:ae().concat(g(j,{dropTarget:!0,style:{width:"100%",height:"100%"}},"main-content"))})]})})}),t]})};import{createContext as xt,isValidElement as Tt,cloneElement as Ct,useContext as Lt}from"react";import St from"classnames";import{jsx as Ht}from"react/jsx-runtime";var Pt="medium",Mt="salt-theme",Et="light",te=xt({density:"high",theme:"salt-theme",themeMode:"light"}),wt=(t,e,o,r)=>{var n;return Tt(t)?Ct(t,{className:St((n=t.props)==null?void 0:n.className,e,`salt-density-${r}`),"data-mode":o}):(console.warn(`
+// src/connection-status/ConnectionStatusIcon.tsx
+import React, { useEffect, useState } from "react";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ConnectionStatusIcon = ({ connectionStatus, className, element = "span", ...props }) => {
+  const [classBase6, setClassBase] = useState("vuuConnectingStatus");
+  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 = React.createElement(
+    element,
+    {
+      ...props,
+      className: cx("vuuStatus vuuIcon", classBase6, className)
+    }
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "vuuStatus-container salt-theme", children: [
+    statusIcon,
+    /* @__PURE__ */ jsxs("div", { className: "vuuStatus-text", children: [
+      "Status: ",
+      connectionStatus.toUpperCase()
+    ] })
+  ] }) });
+};
+
+// src/density-switch/DensitySwitch.tsx
+import { Dropdown } from "@heswell/salt-lab";
+import { useCallback } from "react";
+import cx2 from "classnames";
+import { jsx as jsx2 } from "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 = useCallback((_event, selectedItem) => {
+    onDensityChange(selectedItem);
+  }, [onDensityChange]);
+  const className = cx2(classBase, classNameProp);
+  return /* @__PURE__ */ jsx2(
+    Dropdown,
+    {
+      className,
+      source: densities,
+      defaultSelected: defaultDensity,
+      onSelectionChange: handleSelectionChange
+    }
+  );
+};
+
+// src/feature/Feature.tsx
+import React3, { Suspense, useEffect as useEffect2 } from "react";
+import { registerComponent } from "@vuu-ui/vuu-layout";
+
+// src/feature/ErrorBoundary.jsx
+import React2 from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ErrorBoundary = class extends React2.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__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx3("h1", { children: "Something went wrong." }),
+        /* @__PURE__ */ jsx3("p", { children: this.state.errorMessage })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// src/feature/Loader.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Loader = () => /* @__PURE__ */ jsx4("div", { className: "hwLoader", children: "loading" });
+
+// src/feature/Feature.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var componentsMap = /* @__PURE__ */ new Map();
+var useCachedFeature = (url) => {
+  useEffect2(
+    () => () => {
+      componentsMap.delete(url);
+    },
+    [url]
+  );
+  if (!componentsMap.has(url)) {
+    componentsMap.set(
+      url,
+      React3.lazy(() => import(
+        /* @vite-ignore */
+        url
+      ))
+    );
+  }
+  return componentsMap.get(url);
+};
+function RawFeature({
+  url,
+  css,
+  params,
+  ...props
+}) {
+  console.log("Feature render", { css, url, props });
+  useEffect2(() => {
+    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__ */ jsx5(ErrorBoundary, { children: /* @__PURE__ */ jsx5(Suspense, { fallback: /* @__PURE__ */ jsx5(Loader, {}), children: /* @__PURE__ */ jsx5(LazyFeature, { ...props, ...params }) }) });
+}
+var Feature = React3.memo(RawFeature);
+Feature.displayName = "Feature";
+registerComponent("Feature", Feature, "view");
+
+// src/login/LoginPanel.tsx
+import { useState as useState2 } from "react";
+import { Button } from "@salt-ds/core";
+import { FormField, Input } from "@heswell/salt-lab";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase2 = "vuuLoginPanel";
+var LoginPanel = ({ onSubmit }) => {
+  const [username, setUserName] = useState2("");
+  const [password, setPassword] = useState2("");
+  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__ */ jsxs3("div", { className: classBase2, children: [
+    /* @__PURE__ */ jsx6(FormField, { label: "Username", style: { width: 200 }, children: /* @__PURE__ */ jsx6(Input, { value: username, id: "text-username", onChange: handleUsername }) }),
+    /* @__PURE__ */ jsx6(FormField, { label: "Password", style: { width: 200 }, children: /* @__PURE__ */ jsx6(
+      Input,
+      {
+        type: "password",
+        value: password,
+        id: "text-password",
+        onChange: handlePassword
+      }
+    ) }),
+    /* @__PURE__ */ jsx6(
+      Button,
+      {
+        className: `${classBase2}-login`,
+        disabled: !dataIsValid,
+        onClick: login,
+        variant: "cta",
+        children: "Login"
+      }
+    )
+  ] });
+};
+
+// src/login/login-utils.ts
+import { getCookieValue } from "@vuu-ui/vuu-utils";
+var getAuthDetailsFromCookies = () => {
+  const username = getCookieValue("vuu-username");
+  const token = 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
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useMemo,
+  useRef,
+  useState as useState3
+} from "react";
+import cx3 from "classnames";
+import { useIdMemo } from "@salt-ds/core";
+import { Button as Button2 } from "@salt-ds/core";
+import {
+  isErrorResponse,
+  RemoteDataSource
+} from "@vuu-ui/vuu-data";
+import {
+  buildColumnMap,
+  isValidNumber,
+  shallowEquals
+} from "@vuu-ui/vuu-utils";
+import { jsx as jsx7, jsxs as jsxs4 } from "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 (isValidNumber(typedValue)) {
+        return typedValue;
+      } else if (throwIfUndefined) {
+        throw Error("SessionEditingForm getTypedValue");
+      } else {
+        return void 0;
+      }
+    }
+    case "double": {
+      const typedValue = parseFloat(value);
+      if (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 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] = useState3();
+  const [errorMessage, setErrorMessage] = useState3("");
+  const formContentRef = useRef(null);
+  const initialDataRef = useRef();
+  const dataStatusRef = useRef(Status.uninitialised);
+  const dataSource = 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 = 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 = useIdMemo(idProp);
+  const handleChange = useCallback2(
+    (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 = shallowEquals(newValues, initialDataRef.current);
+        dataStatusRef.current = notUpdated ? Status.unchanged : typedValue !== void 0 ? Status.changed : Status.invalid;
+        return newValues;
+      });
+    },
+    [fields]
+  );
+  const handleBlur = useCallback2(
+    (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 = useCallback2(async () => {
+    const response = await dataSource.menuRpcCall({
+      type: "VP_EDIT_SUBMIT_FORM_RPC"
+    });
+    if (isErrorResponse(response)) {
+      setErrorMessage(response.error);
+    }
+  }, [dataSource]);
+  const handleKeyDown = useCallback2(
+    (evt) => {
+      if (evt.key === "Enter" && dataStatusRef.current === Status.changed) {
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const handleCancel = useCallback2(() => {
+    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__ */ jsx7("div", { className: `${classBase3}-fieldValue vuuReadOnly`, children: value });
+    } else {
+      return /* @__PURE__ */ jsx7(
+        "input",
+        {
+          className: `${classBase3}-fieldValue`,
+          "data-field": field.name,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          type: "text",
+          value,
+          id: `${id}-input-${field.name}`
+        }
+      );
+    }
+  };
+  useEffect3(() => {
+    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__ */ jsxs4("div", { ...htmlAttributes, className: cx3(classBase3, className), children: [
+    errorMessage ? /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: `${classBase3}-errorBanner`,
+        "data-icon": "error",
+        title: errorMessage,
+        children: "Error, edit(s) not saved"
+      }
+    ) : void 0,
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: `${classBase3}-content`,
+        ref: formContentRef,
+        onKeyDown: handleKeyDown,
+        children: fields.map((field) => {
+          var _a;
+          return /* @__PURE__ */ jsxs4("div", { className: `${classBase3}-field`, children: [
+            /* @__PURE__ */ jsx7(
+              "label",
+              {
+                className: cx3(`${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__ */ jsxs4("div", { className: `${classBase3}-buttonbar salt-theme salt-density-high`, children: [
+      /* @__PURE__ */ jsx7(
+        Button2,
+        {
+          type: "submit",
+          variant: "cta",
+          disabled: !isDirty,
+          onClick: handleSubmit,
+          children: "Submit"
+        }
+      ),
+      /* @__PURE__ */ jsx7(Button2, { variant: "secondary", onClick: handleCancel, children: "Cancel" })
+    ] })
+  ] });
+};
+
+// src/shell.tsx
+import { connectToServer } from "@vuu-ui/vuu-data";
+import cx6 from "classnames";
+import {
+  useCallback as useCallback7,
+  useEffect as useEffect6,
+  useRef as useRef2,
+  useState as useState6
+} from "react";
+
+// src/ShellContextProvider.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var defaultConfig = {};
+var ShellContext = createContext(defaultConfig);
+var Provider = ({
+  children,
+  context,
+  inheritedContext
+}) => {
+  const mergedContext = {
+    ...inheritedContext,
+    ...context
+  };
+  return /* @__PURE__ */ jsx8(ShellContext.Provider, { value: mergedContext, children });
+};
+var ShellContextProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ jsx8(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ jsx8(Provider, { context: value, inheritedContext: context, children }) });
+};
+var useShellContext = () => {
+  return useContext(ShellContext);
+};
+
+// src/layout-config/use-layout-config.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useState as useState4 } from "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] = useState4(defaultLayout);
+  const usingRemote = saveLocation === "remote";
+  const loadConfig = usingRemote ? loadRemoteConfig : loadLocalConfig;
+  const saveConfig = usingRemote ? saveRemoteConfig : saveLocalConfig;
+  const setLayout = (layout2) => {
+    _setLayout(layout2);
+  };
+  const load = useCallback3(
+    async (id = "latest") => {
+      try {
+        const layout2 = await loadConfig(saveUrl, user, id);
+        setLayout(layout2);
+      } catch {
+        setLayout(defaultLayout);
+      }
+    },
+    [defaultLayout, loadConfig, saveUrl, user]
+  );
+  useEffect4(() => {
+    load();
+  }, [load]);
+  const saveData = useCallback3(
+    (data) => {
+      saveConfig(saveUrl, user, data);
+    },
+    [saveConfig, saveUrl, user]
+  );
+  const loadLayoutById = useCallback3(
+    (id) => {
+      load(id);
+    },
+    [load]
+  );
+  return [layout, saveData, loadLayoutById];
+};
+
+// src/shell.tsx
+import {
+  DockLayout,
+  DraggableLayout,
+  Drawer,
+  Flexbox,
+  LayoutProvider,
+  View
+} from "@vuu-ui/vuu-layout";
+
+// src/app-header/AppHeader.tsx
+import { useCallback as useCallback6 } from "react";
+
+// src/user-profile/UserProfile.tsx
+import { Button as Button4 } from "@salt-ds/core";
+import { DropdownBase } from "@heswell/salt-lab";
+import { UserSolidIcon } from "@salt-ds/icons";
+
+// src/user-profile/UserPanel.tsx
+import { formatDate } from "@vuu-ui/vuu-utils";
+import { List, ListItem } from "@heswell/salt-lab";
+import { Button as Button3 } from "@salt-ds/core";
+import { ExportIcon } from "@salt-ds/icons";
+import {
+  forwardRef,
+  useCallback as useCallback4,
+  useEffect as useEffect5,
+  useState as useState5
+} from "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
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
+  return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
+};
+var HistoryListItem = (props) => {
+  return /* @__PURE__ */ jsx9(ListItem, { ...props });
+};
+var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
+  const [history, setHistory] = useState5([]);
+  useEffect5(() => {
+    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 ${formatDate(new Date(lastUpdate), "kk:mm:ss")}`
+      }));
+      console.log({ sortedHistory });
+      setHistory(sortedHistory);
+    }
+    getHistory();
+  }, [user]);
+  const handleHisorySelected = useCallback4(
+    (evt, selected2) => {
+      if (selected2) {
+        onNavigate(selected2.id);
+      }
+    },
+    [onNavigate]
+  );
+  const handleLogout = useCallback4(() => {
+    logout(loginUrl);
+  }, [loginUrl]);
+  const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
+  return /* @__PURE__ */ jsxs5("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
+    /* @__PURE__ */ jsx9(
+      List,
+      {
+        ListItem: HistoryListItem,
+        className: "vuuUserPanel-history",
+        onSelect: handleHisorySelected,
+        selected,
+        source: history
+      }
+    ),
+    /* @__PURE__ */ jsx9("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ jsxs5(Button3, { "aria-label": "logout", onClick: handleLogout, children: [
+      /* @__PURE__ */ jsx9(ExportIcon, {}),
+      " Logout"
+    ] }) })
+  ] });
+});
+
+// src/user-profile/UserProfile.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var UserProfile = ({
+  layoutId,
+  loginUrl,
+  onNavigate,
+  user
+}) => {
+  const handleNavigate = (id) => {
+    onNavigate(id);
+  };
+  return /* @__PURE__ */ jsxs6(DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
+    /* @__PURE__ */ jsx10(Button4, { variant: "secondary", children: /* @__PURE__ */ jsx10(UserSolidIcon, {}) }),
+    /* @__PURE__ */ jsx10(
+      UserPanel,
+      {
+        layoutId,
+        loginUrl,
+        onNavigate: handleNavigate,
+        user
+      }
+    )
+  ] });
+};
+
+// src/theme-switch/ThemeSwitch.tsx
+import {
+  ToggleButton,
+  ToggleButtonGroup
+} from "@heswell/salt-lab";
+import cx4 from "classnames";
+import { useControlled } from "@salt-ds/core";
+import { useCallback as useCallback5 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var classBase4 = "vuuThemeSwitch";
+var modes = ["light", "dark"];
+var ThemeSwitch = ({
+  className: classNameProp,
+  defaultMode: defaultModeProp,
+  mode: modeProp,
+  onChange,
+  ...htmlAttributes
+}) => {
+  const [mode, setMode] = useControlled({
+    controlled: modeProp,
+    default: defaultModeProp != null ? defaultModeProp : "light",
+    name: "ThemeSwitch",
+    state: "mode"
+  });
+  const selectedIndex = modes.indexOf(mode);
+  const handleChangeSecondary = useCallback5(
+    (_evt, index) => {
+      const mode2 = modes[index];
+      setMode(mode2);
+      onChange(mode2);
+    },
+    [onChange, setMode]
+  );
+  const className = cx4(classBase4, classNameProp);
+  return /* @__PURE__ */ jsxs7(
+    ToggleButtonGroup,
+    {
+      className,
+      ...htmlAttributes,
+      onChange: handleChangeSecondary,
+      selectedIndex,
+      children: [
+        /* @__PURE__ */ jsx11(
+          ToggleButton,
+          {
+            "aria-label": "alert",
+            tooltipText: "Light Theme",
+            "data-icon": "light"
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          ToggleButton,
+          {
+            "aria-label": "home",
+            tooltipText: "Dark Theme",
+            "data-icon": "dark"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/app-header/AppHeader.tsx
+import cx5 from "classnames";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var classBase5 = "vuuAppHeader";
+var AppHeader = ({
+  className: classNameProp,
+  layoutId,
+  loginUrl,
+  onNavigate,
+  onSwitchTheme,
+  themeMode = "light",
+  user,
+  ...htmlAttributes
+}) => {
+  const className = cx5(classBase5, classNameProp);
+  const handleSwitchTheme = useCallback6(
+    (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
+    [onSwitchTheme]
+  );
+  return /* @__PURE__ */ jsxs8("header", { className, ...htmlAttributes, children: [
+    /* @__PURE__ */ jsx12(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
+    /* @__PURE__ */ jsx12(
+      UserProfile,
+      {
+        layoutId,
+        loginUrl,
+        onNavigate,
+        user
+      }
+    )
+  ] });
+};
+
+// src/shell.tsx
+import { logger } from "@vuu-ui/vuu-utils";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var { error } = 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 = useRef2(null);
+  const paletteView = useRef2(null);
+  const [open, setOpen] = useState6(false);
+  const layoutId = useRef2("latest");
+  const [layout, saveLayoutConfig, loadLayoutById] = useLayoutConfig({
+    defaultLayout,
+    saveLocation,
+    user
+  });
+  const handleLayoutChange = useCallback7(
+    (layout2) => {
+      try {
+        saveLayoutConfig(layout2);
+      } catch {
+        error == null ? void 0 : error("Failed to save layout");
+      }
+    },
+    [saveLayoutConfig]
+  );
+  const handleSwitchTheme = useCallback7((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 = useCallback7(
+    (id) => {
+      layoutId.current = id;
+      loadLayoutById(id);
+    },
+    [loadLayoutById]
+  );
+  useEffect6(() => {
+    if (serverUrl && user.token) {
+      connectToServer({
+        authToken: user.token,
+        url: serverUrl,
+        username: user.username
+      });
+    }
+  }, [serverUrl, user.token, user.username]);
+  const getDrawers = () => {
+    const drawers = [];
+    if (leftSidePanel) {
+      drawers.push(
+        /* @__PURE__ */ jsx13(
+          Drawer,
+          {
+            onClick: handleDrawerClick,
+            open,
+            position: "left",
+            inline: true,
+            peekaboo: true,
+            sizeOpen: 200,
+            toggleButton: "end",
+            children: /* @__PURE__ */ jsx13(
+              View,
+              {
+                className: "vuuShell-palette",
+                id: "vw-app-palette",
+                ref: paletteView,
+                style: { height: "100%" },
+                children: leftSidePanel
+              },
+              "app-palette"
+            )
+          },
+          "left-panel"
+        )
+      );
+    }
+    return drawers;
+  };
+  const className = cx6(
+    "vuuShell",
+    classNameProp,
+    "salt-theme",
+    "salt-density-high"
+  );
+  return (
+    // ShellContext TBD
+    /* @__PURE__ */ jsxs9(ShellContextProvider, { value: void 0, children: [
+      /* @__PURE__ */ jsx13(LayoutProvider, { layout, onLayoutChange: handleLayoutChange, children: /* @__PURE__ */ jsx13(
+        DraggableLayout,
+        {
+          className,
+          "data-mode": "light",
+          ref: rootRef,
+          ...htmlAttributes,
+          children: /* @__PURE__ */ jsxs9(
+            Flexbox,
+            {
+              className: "App",
+              style: { flexDirection: "column", height: "100%", width: "100%" },
+              children: [
+                /* @__PURE__ */ jsx13(
+                  AppHeader,
+                  {
+                    layoutId: layoutId.current,
+                    loginUrl,
+                    user,
+                    onNavigate: handleNavigate,
+                    onSwitchTheme: handleSwitchTheme
+                  }
+                ),
+                /* @__PURE__ */ jsx13(DockLayout, { style: { flex: 1 }, children: getDrawers().concat(
+                  /* @__PURE__ */ jsx13(
+                    DraggableLayout,
+                    {
+                      dropTarget: true,
+                      style: { width: "100%", height: "100%" }
+                    },
+                    "main-content"
+                  )
+                ) })
+              ]
+            }
+          )
+        }
+      ) }),
+      children
+    ] })
+  );
+};
+
+// src/theme-provider/ThemeProvider.tsx
+import {
+  createContext as createContext2,
+  isValidElement,
+  cloneElement,
+  useContext as useContext2
+} from "react";
+import cx7 from "classnames";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var DEFAULT_DENSITY2 = "medium";
+var DEFAULT_THEME = "salt-theme";
+var DEFAULT_THEME_MODE = "light";
+var ThemeContext = createContext2({
+  density: "high",
+  theme: "salt-theme",
+  themeMode: "light"
+});
+var createThemedChildren = (children, theme, themeMode, density) => {
+  var _a;
+  if (isValidElement(children)) {
+    return cloneElement(children, {
+      className: cx7(
+        // 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`),t)},Dt=({children:t,theme:e,themeMode:o,density:r})=>{var d,u,h;let{density:n,themeMode:s,theme:a}=Lt(te),m=(d=r!=null?r:n)!=null?d:Pt,i=(u=o!=null?o:s)!=null?u:Et,l=(h=e!=null?e:a)!=null?h:Mt,c=wt(t,l,i,m);return Ht(te.Provider,{value:{themeMode:i,density:m,theme:l},children:c})};Dt.displayName="ThemeProvider";export{Rt as ConnectionStatusIcon,Pt as DEFAULT_DENSITY,Mt as DEFAULT_THEME,Et as DEFAULT_THEME_MODE,Jt as DensitySwitch,U as Feature,yo as LoginPanel,qr as Shell,O as ShellContextProvider,te as ThemeContext,Dt as ThemeProvider,Q as ThemeSwitch,Co as getAuthDetailsFromCookies,V as logout,be as redirectToLogin,Ho as useShellContext};
+          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
+  } = useContext2(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__ */ jsx14(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
+};
+ThemeProvider.displayName = "ThemeProvider";
+export {
+  ConnectionStatusIcon,
+  DEFAULT_DENSITY2 as DEFAULT_DENSITY,
+  DEFAULT_THEME,
+  DEFAULT_THEME_MODE,
+  DensitySwitch,
+  Feature,
+  LoginPanel,
+  SessionEditingForm,
+  Shell,
+  ShellContextProvider,
+  ThemeContext,
+  ThemeProvider,
+  ThemeSwitch,
+  getAuthDetailsFromCookies,
+  logout,
+  redirectToLogin,
+  useShellContext
+};
 //# sourceMappingURL=index.js.map