@vuu-ui/vuu-shell 0.6.8 → 0.6.9-debug

package/esm/index.js

@@ -1,2 +1,581 @@
-import D,{Suspense as he}from"react";import{registerComponent as ge}from"@vuu-ui/vuu-layout";import ue from"react";import{Fragment as ce,jsx as U,jsxs as de}from"react/jsx-runtime";var x=class extends ue.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?de(ce,{children:[U("h1",{children:"Something went wrong."}),U("p",{children:this.state.errorMessage})]}):this.props.children}};import{jsx as pe}from"react/jsx-runtime";var k=()=>pe("div",{className:"hwLoader",children:"loading"});var E=async t=>{let e=new CSSStyleSheet;return fetch(t).then(o=>o.text()).then(o=>e.replace(o))};import{jsx as C}from"react/jsx-runtime";function fe({url:t,css:e,params:o,...r}){e&&E(e).then(n=>{document.adoptedStyleSheets=[...document.adoptedStyleSheets,n]});let s=D.lazy(()=>import(t));return C(x,{children:C(he,{fallback:C(k,{}),children:C(s,{...r,...o})})})}var I=D.memo(fe);I.displayName="Feature";ge("Feature",I,"view");import{useState as R}from"react";import{Button as ye}from"@salt-ds/core";import{FormField as B,Input as F}from"@heswell/salt-lab";import{jsx as v,jsxs as ve}from"react/jsx-runtime";var A="vuuLoginPanel",Nt=({onSubmit:t})=>{let[e,o]=R(""),[r,s]=R(""),n=()=>{t(e,r)},a=(l,u)=>{o(u)},m=(l,u)=>{s(u)},i=e.trim()!==""&&r.trim()!=="";return ve("div",{className:A,children:[v(B,{label:"Username",style:{width:200},children:v(F,{value:e,id:"text-username",onChange:a})}),v(B,{label:"Password",style:{width:200},children:v(F,{type:"password",value:r,id:"text-password",onChange:m})}),v(ye,{className:`${A}-login`,disabled:!i,onClick:n,variant:"cta",children:"Login"})]})};var V=t=>{var e;return(e=document.cookie.split("; ").find(o=>o.startsWith(`${t}=`)))==null?void 0:e.split("=")[1]},Et=()=>{let t=V("vuu-username"),e=V("vuu-auth-token");return[t,e]},xe=(t="/login.html")=>{window.location.href=t},O=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",xe(t)};import{connectToServer as Ye}from"@vuu-ui/vuu-data";import{useCallback as H,useEffect as Ze,useRef as M,useState as ee}from"react";import{useCallback as P,useEffect as Ce,useState as Le}from"react";var Pe=(t,e)=>{let[o,r]=Le(e),s=i=>{r(i)},n=P(async(i="latest")=>{fetch(`api/vui/${t.username}/${i}`,{}).then(l=>l.ok?l.json():e).then(s).catch(()=>{s(e)})},[e,t.username]);Ce(()=>{n()},[n]);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=>{n(i)},[n]);return[o,a,m]},$=Pe;import{createContext as Se,useContext as Te}from"react";import{jsx as S}from"react/jsx-runtime";var we={},T=Se(we),He=({children:t,context:e,inheritedContext:o})=>{let r={...o,...e};return S(T.Provider,{value:r,children:t})},G=({children:t,value:e})=>S(T.Consumer,{children:o=>S(He,{context:e,inheritedContext:o,children:t})}),Gt=()=>Te(T);import je from"classnames";import{Chest as et,DraggableLayout as te,Drawer as tt,Flexbox as ot,LayoutProvider as rt,View as nt}from"@vuu-ui/vuu-layout";import{useCallback as We}from"react";import{Button as Fe}from"@salt-ds/core";import{DropdownBase as Ae}from"@heswell/salt-lab";import{UserSolidIcon as Ve}from"@salt-ds/icons";import{formatDate as Me}from"@vuu-ui/vuu-utils";import{List as be,ListItem as Ne}from"@heswell/salt-lab";import{Button as Ue}from"@salt-ds/core";import{ExportIcon as ke}from"@salt-ds/icons";import{forwardRef as Ee,useCallback as _,useEffect as De,useState as Ie}from"react";var J=async t=>await fetch(`api/vui/${t.username}`,{}).then(o=>o.ok?o.json():null).catch(()=>{console.log("error getting history")});import{jsx as L,jsxs as z}from"react/jsx-runtime";var Re=({lastUpdate:t},{lastUpdate:e})=>e===t?0:e<t?-1:1,Be=t=>L(Ne,{...t}),q=Ee(function({loginUrl:e,onNavigate:o,user:r,layoutId:s="latest"},n){let[a,m]=Ie([]);De(()=>{async function d(){let g=(await J(r)).filter(f=>f.id!=="latest").sort(Re).map(({id:f,lastUpdate:y})=>({lastUpdate:y,id:f,label:`Saved at ${Me(new Date(y),"kk:mm:ss")}`}));console.log({sortedHistory:g}),m(g)}d()},[r]);let i=_((d,p)=>{p&&o(p.id)},[o]),l=_(()=>{O(e)},[e]),u=a.length===0?null:s==="latest"?a[0]:a.find(d=>d.id===s);return z("div",{className:"vuuUserPanel",ref:n,children:[L(be,{ListItem:Be,className:"vuuUserPanel-history",onSelect:i,selected:u,source:a}),L("div",{className:"vuuUserPanel-buttonBar",children:z(Ue,{"aria-label":"logout",onClick:l,children:[L(ke,{})," Logout"]})})]})});import{jsx as w,jsxs as Oe}from"react/jsx-runtime";var W=({layoutId:t,loginUrl:e,onNavigate:o,user:r})=>Oe(Ae,{className:"vuuUserProfile",placement:"bottom-end",children:[w(Fe,{variant:"secondary",children:w(Ve,{})}),w(q,{layoutId:t,loginUrl:e,onNavigate:n=>{o(n)},user:r})]});import{ToggleButton as K,ToggleButtonGroup as $e}from"@heswell/salt-lab";import Ge from"classnames";import{useControlled as Je}from"@salt-ds/core";import{useCallback as _e}from"react";import{jsx as X,jsxs as qe}from"react/jsx-runtime";var ze="vuuThemeSwitch",Q=["light","dark"],Y=({className:t,defaultMode:e,mode:o,onChange:r,...s})=>{let[n,a]=Je({controlled:o,default:e!=null?e:"light",name:"ThemeSwitch",state:"mode"}),m=Q.indexOf(n),i=_e((u,d)=>{let p=Q[d];a(p),r(p)},[r,a]),l=Ge(ze,t);return qe($e,{className:l,...s,onChange:i,selectedIndex:m,children:[X(K,{"aria-label":"alert",tooltipText:"Light Theme","data-icon":"light"}),X(K,{"aria-label":"home",tooltipText:"Dark Theme","data-icon":"dark"})]})};import Ke from"classnames";import{jsx as Z,jsxs as Xe}from"react/jsx-runtime";var Qe="vuuAppHeader",j=({className:t,layoutId:e,loginUrl:o,onNavigate:r,onSwitchTheme:s,themeMode:n="light",user:a,...m})=>{let i=Ke(Qe,t,"salt-density-medium"),l=We(u=>s==null?void 0:s(u),[s]);return Xe("header",{className:i,...m,children:[Z(Y,{defaultMode:n,onChange:l}),Z(W,{layoutId:e,loginUrl:o,onNavigate:r,user:a})]})};import{jsx as h,jsxs as oe}from"react/jsx-runtime";var st={type:"View",props:{style:{height:"calc(100% - 6px)"}},children:[{props:{className:"vuuShell-warningPlaceholder"},type:"Placeholder"}]},ar=({children:t,className:e,defaultLayout:o=st,leftSidePanel:r,loginUrl:s,serverUrl:n,user:a,...m})=>{let i=M(null),[l]=ee("high"),u=M(null),[d,p]=ee(!1),g=M("latest"),[f,y,b]=$(a,o),re=H(c=>{y(c)},[y]),ne=H(c=>{i.current&&(i.current.dataset.mode=c)},[]),se=c=>{var N;let me=c.target;(N=u.current)!=null&&N.contains(me)||p(!d)},ae=H(c=>{g.current=c,b(c)},[b]);Ze(()=>{n&&a.token&&Ye(n,a.token)},[n,a.token]);let ie=()=>{let c=[];return r&&c.push(h(tt,{onClick:se,open:d,position:"left",inline:!0,peekaboo:!0,sizeOpen:200,toggleButton:"end",children:h(nt,{className:"vuuShell-palette",id:"vw-app-palette",ref:u,style:{height:"100%"},children:r},"app-palette")},"left-panel")),c},le=je("vuuShell",e,"salt-theme",`salt-density-${l}`);return oe(G,{value:void 0,children:[h(rt,{layout:f,onLayoutChange:re,children:h(te,{className:le,"data-mode":"light",ref:i,...m,children:oe(ot,{className:"App",style:{flexDirection:"column",height:"100%",width:"100%"},children:[h(j,{layoutId:g.current,loginUrl:s,user:a,onNavigate:ae,onSwitchTheme:ne}),h(et,{style:{flex:1},children:ie().concat(h(te,{dropTarget:!0,style:{width:"100%",height:"100%"}},"main-content"))})]})})}),t]})};export{I as Feature,Nt as LoginPanel,ar as Shell,G as ShellContextProvider,Y as ThemeSwitch,Et as getAuthDetailsFromCookies,O as logout,xe as redirectToLogin,Gt as useShellContext};
+// src/feature/Feature.tsx
+import React2, { Suspense } from "react";
+import { registerComponent } from "@vuu-ui/vuu-layout";
+
+// src/feature/ErrorBoundary.jsx
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ErrorBoundary = class extends React.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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("h1", { children: "Something went wrong." }),
+        /* @__PURE__ */ jsx("p", { children: this.state.errorMessage })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// src/feature/Loader.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Loader = () => /* @__PURE__ */ jsx2("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
+import { jsx as jsx3 } from "react/jsx-runtime";
+function RawFeature({
+  url,
+  css,
+  params,
+  ...props
+}) {
+  if (css) {
+    importCSS(css).then((styleSheet) => {
+      document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        styleSheet
+      ];
+    });
+  }
+  const LazyFeature = React2.lazy(() => import(
+    /* @vite-ignore */
+    url
+  ));
+  return /* @__PURE__ */ jsx3(ErrorBoundary, { children: /* @__PURE__ */ jsx3(Suspense, { fallback: /* @__PURE__ */ jsx3(Loader, {}), children: /* @__PURE__ */ jsx3(LazyFeature, { ...props, ...params }) }) });
+}
+var Feature = React2.memo(RawFeature);
+Feature.displayName = "Feature";
+registerComponent("Feature", Feature, "view");
+
+// src/login/LoginPanel.tsx
+import { useState } from "react";
+import { Button } from "@salt-ds/core";
+import { FormField, Input } from "@heswell/salt-lab";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var classBase = "vuuLoginPanel";
+var LoginPanel = ({ onSubmit }) => {
+  const [username, setUserName] = useState("");
+  const [password, setPassword] = 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__ */ jsxs2("div", { className: classBase, children: [
+    /* @__PURE__ */ jsx4(FormField, { label: "Username", style: { width: 200 }, children: /* @__PURE__ */ jsx4(Input, { value: username, id: "text-username", onChange: handleUsername }) }),
+    /* @__PURE__ */ jsx4(FormField, { label: "Password", style: { width: 200 }, children: /* @__PURE__ */ jsx4(
+      Input,
+      {
+        type: "password",
+        value: password,
+        id: "text-password",
+        onChange: handlePassword
+      }
+    ) }),
+    /* @__PURE__ */ jsx4(
+      Button,
+      {
+        className: `${classBase}-login`,
+        disabled: !dataIsValid,
+        onClick: login,
+        variant: "cta",
+        children: "Login"
+      }
+    )
+  ] });
+};
+
+// src/login/login-utils.ts
+var getCookieValue = (name) => {
+  var _a;
+  return (_a = document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))) == null ? void 0 : _a.split("=")[1];
+};
+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/shell.tsx
+import { connectToServer } from "@vuu-ui/vuu-data";
+import {
+  useCallback as useCallback5,
+  useEffect as useEffect3,
+  useRef,
+  useState as useState4
+} from "react";
+
+// src/use-layout-config.js
+import { useCallback, useEffect, useState as useState2 } from "react";
+var useLayoutConfig = (user, defaultLayout) => {
+  const [layout, _setLayout] = useState2(defaultLayout);
+  const setLayout = (layout2) => {
+    _setLayout(layout2);
+  };
+  const load = 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]
+  );
+  useEffect(() => {
+    load();
+  }, [load]);
+  const saveData = 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 = useCallback(
+    (id) => {
+      load(id);
+    },
+    [load]
+  );
+  return [layout, saveData, loadLayoutById];
+};
+var use_layout_config_default = useLayoutConfig;
+
+// src/ShellContextProvider.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var defaultConfig = {};
+var ShellContext = createContext(defaultConfig);
+var Provider = ({
+  children,
+  context,
+  inheritedContext
+}) => {
+  const mergedContext = {
+    ...inheritedContext,
+    ...context
+  };
+  return /* @__PURE__ */ jsx5(ShellContext.Provider, { value: mergedContext, children });
+};
+var ShellContextProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ jsx5(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ jsx5(Provider, { context: value, inheritedContext: context, children }) });
+};
+var useShellContext = () => {
+  return useContext(ShellContext);
+};
+
+// src/shell.tsx
+import cx3 from "classnames";
+import {
+  Chest,
+  DraggableLayout,
+  Drawer,
+  Flexbox,
+  LayoutProvider,
+  View
+} from "@vuu-ui/vuu-layout";
+
+// src/app-header/AppHeader.tsx
+import { useCallback as useCallback4 } from "react";
+
+// src/user-profile/UserProfile.tsx
+import { Button as Button3 } 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 Button2 } from "@salt-ds/core";
+import { ExportIcon } from "@salt-ds/icons";
+import {
+  forwardRef,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useState as useState3
+} 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 jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
+  return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
+};
+var HistoryListItem = (props) => {
+  return /* @__PURE__ */ jsx6(ListItem, { ...props });
+};
+var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
+  const [history, setHistory] = useState3([]);
+  useEffect2(() => {
+    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 = useCallback2(
+    (evt, selected2) => {
+      if (selected2) {
+        onNavigate(selected2.id);
+      }
+    },
+    [onNavigate]
+  );
+  const handleLogout = useCallback2(() => {
+    logout(loginUrl);
+  }, [loginUrl]);
+  const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
+  return /* @__PURE__ */ jsxs3("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
+    /* @__PURE__ */ jsx6(
+      List,
+      {
+        ListItem: HistoryListItem,
+        className: "vuuUserPanel-history",
+        onSelect: handleHisorySelected,
+        selected,
+        source: history
+      }
+    ),
+    /* @__PURE__ */ jsx6("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ jsxs3(Button2, { "aria-label": "logout", onClick: handleLogout, children: [
+      /* @__PURE__ */ jsx6(ExportIcon, {}),
+      " Logout"
+    ] }) })
+  ] });
+});
+
+// src/user-profile/UserProfile.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var UserProfile = ({
+  layoutId,
+  loginUrl,
+  onNavigate,
+  user
+}) => {
+  const handleNavigate = (id) => {
+    onNavigate(id);
+  };
+  return /* @__PURE__ */ jsxs4(DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
+    /* @__PURE__ */ jsx7(Button3, { variant: "secondary", children: /* @__PURE__ */ jsx7(UserSolidIcon, {}) }),
+    /* @__PURE__ */ jsx7(
+      UserPanel,
+      {
+        layoutId,
+        loginUrl,
+        onNavigate: handleNavigate,
+        user
+      }
+    )
+  ] });
+};
+
+// src/theme-switch/ThemeSwitch.tsx
+import {
+  ToggleButton,
+  ToggleButtonGroup
+} from "@heswell/salt-lab";
+import cx from "classnames";
+import { useControlled } from "@salt-ds/core";
+import { useCallback as useCallback3 } from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var classBase2 = "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 = useCallback3(
+    (_evt, index) => {
+      const mode2 = modes[index];
+      setMode(mode2);
+      onChange(mode2);
+    },
+    [onChange, setMode]
+  );
+  const className = cx(classBase2, classNameProp);
+  return /* @__PURE__ */ jsxs5(
+    ToggleButtonGroup,
+    {
+      className,
+      ...htmlAttributes,
+      onChange: handleChangeSecondary,
+      selectedIndex,
+      children: [
+        /* @__PURE__ */ jsx8(
+          ToggleButton,
+          {
+            "aria-label": "alert",
+            tooltipText: "Light Theme",
+            "data-icon": "light"
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          ToggleButton,
+          {
+            "aria-label": "home",
+            tooltipText: "Dark Theme",
+            "data-icon": "dark"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/app-header/AppHeader.tsx
+import cx2 from "classnames";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var classBase3 = "vuuAppHeader";
+var AppHeader = ({
+  className: classNameProp,
+  layoutId,
+  loginUrl,
+  onNavigate,
+  onSwitchTheme,
+  themeMode = "light",
+  user,
+  ...htmlAttributes
+}) => {
+  const className = cx2(classBase3, classNameProp, "salt-density-medium");
+  const handleSwitchTheme = useCallback4(
+    (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
+    [onSwitchTheme]
+  );
+  return /* @__PURE__ */ jsxs6("header", { className, ...htmlAttributes, children: [
+    /* @__PURE__ */ jsx9(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
+    /* @__PURE__ */ jsx9(
+      UserProfile,
+      {
+        layoutId,
+        loginUrl,
+        onNavigate,
+        user
+      }
+    )
+  ] });
+};
+
+// src/shell.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "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 = useRef(null);
+  const [density] = useState4("high");
+  const paletteView = useRef(null);
+  const [open, setOpen] = useState4(false);
+  const layoutId = useRef("latest");
+  const [layout, setLayoutConfig, loadLayoutById] = use_layout_config_default(
+    user,
+    defaultLayout
+  );
+  const handleLayoutChange = useCallback5(
+    (layout2) => {
+      setLayoutConfig(layout2);
+    },
+    [setLayoutConfig]
+  );
+  const handleSwitchTheme = useCallback5((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 = useCallback5(
+    (id) => {
+      layoutId.current = id;
+      loadLayoutById(id);
+    },
+    [loadLayoutById]
+  );
+  useEffect3(() => {
+    if (serverUrl && user.token) {
+      connectToServer(serverUrl, user.token);
+    }
+  }, [serverUrl, user.token]);
+  const getDrawers = () => {
+    const drawers = [];
+    if (leftSidePanel) {
+      drawers.push(
+        /* @__PURE__ */ jsx10(
+          Drawer,
+          {
+            onClick: handleDrawerClick,
+            open,
+            position: "left",
+            inline: true,
+            peekaboo: true,
+            sizeOpen: 200,
+            toggleButton: "end",
+            children: /* @__PURE__ */ jsx10(
+              View,
+              {
+                className: "vuuShell-palette",
+                id: "vw-app-palette",
+                ref: paletteView,
+                style: { height: "100%" },
+                children: leftSidePanel
+              },
+              "app-palette"
+            )
+          },
+          "left-panel"
+        )
+      );
+    }
+    return drawers;
+  };
+  const className = cx3(
+    "vuuShell",
+    classNameProp,
+    "salt-theme",
+    `salt-density-${density}`
+  );
+  return (
+    // ShellContext TBD
+    /* @__PURE__ */ jsxs7(ShellContextProvider, { value: void 0, children: [
+      /* @__PURE__ */ jsx10(LayoutProvider, { layout, onLayoutChange: handleLayoutChange, children: /* @__PURE__ */ jsx10(
+        DraggableLayout,
+        {
+          className,
+          "data-mode": "light",
+          ref: rootRef,
+          ...htmlAttributes,
+          children: /* @__PURE__ */ jsxs7(
+            Flexbox,
+            {
+              className: "App",
+              style: { flexDirection: "column", height: "100%", width: "100%" },
+              children: [
+                /* @__PURE__ */ jsx10(
+                  AppHeader,
+                  {
+                    layoutId: layoutId.current,
+                    loginUrl,
+                    user,
+                    onNavigate: handleNavigate,
+                    onSwitchTheme: handleSwitchTheme
+                  }
+                ),
+                /* @__PURE__ */ jsx10(Chest, { style: { flex: 1 }, children: getDrawers().concat(
+                  /* @__PURE__ */ jsx10(
+                    DraggableLayout,
+                    {
+                      dropTarget: true,
+                      style: { width: "100%", height: "100%" }
+                    },
+                    "main-content"
+                  )
+                ) })
+              ]
+            }
+          )
+        }
+      ) }),
+      children
+    ] })
+  );
+};
+export {
+  Feature,
+  LoginPanel,
+  Shell,
+  ShellContextProvider,
+  ThemeSwitch,
+  getAuthDetailsFromCookies,
+  logout,
+  redirectToLogin,
+  useShellContext
+};
 //# sourceMappingURL=index.js.map