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

package/esm/index.js

@@ -1,578 +1,2 @@
-// 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
-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/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
-};
+import ge,{useEffect as fe,useState as ye}from"react";import ve from"classnames";import{Fragment as xe,jsx as Se,jsxs as E}from"react/jsx-runtime";var bt=({connectionStatus:t,className:e,element:o="span",...r})=>{let[a,s]=ye("vuuConnectingStatus");fe(()=>{switch(t){case"connected":case"reconnected":s("vuuActiveStatus");break;case"connecting":s("vuuConnectingStatus");break;case"disconnected":s("vuuDisconnectedStatus");break;default:break}},[t]);let n=ge.createElement(o,{...r,className:ve("vuuStatus vuuIcon",a,e)});return Se(xe,{children:E("div",{className:"vuuStatus-container salt-theme",children:[n,E("div",{className:"vuuStatus-text",children:["Status: ",t.toUpperCase()]})]})})};import B,{Suspense as we}from"react";import{registerComponent as De}from"@vuu-ui/vuu-layout";import Ce from"react";import{Fragment as Le,jsx as U,jsxs as Pe}from"react/jsx-runtime";var x=class extends Ce.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(Le,{children:[U("h1",{children:"Something went wrong."}),U("p",{children:this.state.errorMessage})]}):this.props.children}};import{jsx as Te}from"react/jsx-runtime";var I=()=>Te("div",{className:"hwLoader",children:"loading"});var R=async t=>{let e=new CSSStyleSheet;return fetch(t).then(o=>o.text()).then(o=>e.replace(o))};import{jsx as S}from"react/jsx-runtime";function He({url:t,css:e,params:o,...r}){e&&R(e).then(s=>{document.adoptedStyleSheets=[...document.adoptedStyleSheets,s]});let a=B.lazy(()=>import(t));return S(x,{children:S(we,{fallback:S(I,{}),children:S(a,{...r,...o})})})}var A=B.memo(He);A.displayName="Feature";De("Feature",A,"view");import{useState as F}from"react";import{Button as be}from"@salt-ds/core";import{FormField as V,Input as O}from"@heswell/salt-lab";import{jsx as y,jsxs as Me}from"react/jsx-runtime";var $="vuuLoginPanel",oo=({onSubmit:t})=>{let[e,o]=F(""),[r,a]=F(""),s=()=>{t(e,r)},n=(l,u)=>{o(u)},c=(l,u)=>{a(u)},i=e.trim()!==""&&r.trim()!=="";return Me("div",{className:$,children:[y(V,{label:"Username",style:{width:200},children:y(O,{value:e,id:"text-username",onChange:n})}),y(V,{label:"Password",style:{width:200},children:y(O,{type:"password",value:r,id:"text-password",onChange:c})}),y(be,{className:`${$}-login`,disabled:!i,onClick:s,variant:"cta",children:"Login"})]})};import{getCookieValue as G}from"@vuu-ui/vuu-utils";var ao=()=>{let t=G("vuu-username"),e=G("vuu-auth-token");return[t,e]},Ne=(t="/login.html")=>{window.location.href=t},_=t=>{document.cookie="vuu-username= ; expires = Thu, 01 Jan 1970 00:00:00 GMT",document.cookie="vuu-auth-token= ; expires = Thu, 01 Jan 1970 00:00:00 GMT",Ne(t)};import{connectToServer as ht}from"@vuu-ui/vuu-data";import{useCallback as L,useEffect as gt,useRef as b,useState as ne}from"react";import{useCallback as P,useEffect as ke,useState as Ee}from"react";var Ue=(t,e)=>{let[o,r]=Ee(e),a=i=>{r(i)},s=P(async(i="latest")=>{fetch(`api/vui/${t.username}/${i}`,{}).then(l=>l.ok?l.json():e).then(a).catch(()=>{a(e)})},[e,t.username]);ke(()=>{s()},[s]);let n=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]),c=P(i=>{s(i)},[s]);return[o,n,c]},J=Ue;import{createContext as Ie,useContext as Re}from"react";import{jsx as T}from"react/jsx-runtime";var Be={},w=Ie(Be),Ae=({children:t,context:e,inheritedContext:o})=>{let r={...o,...e};return T(w.Provider,{value:r,children:t})},z=({children:t,value:e})=>T(w.Consumer,{children:o=>T(Ae,{context:e,inheritedContext:o,children:t})}),yo=()=>Re(w);import ft from"classnames";import{Chest as yt,DraggableLayout as se,Drawer as vt,Flexbox as xt,LayoutProvider as St,View as Ct}from"@vuu-ui/vuu-layout";import{useCallback as oe}from"react";import{Button as Ke}from"@salt-ds/core";import{DropdownBase as Qe}from"@heswell/salt-lab";import{UserSolidIcon as We}from"@salt-ds/icons";import{formatDate as Fe}from"@vuu-ui/vuu-utils";import{List as Ve,ListItem as Oe}from"@heswell/salt-lab";import{Button as $e}from"@salt-ds/core";import{ExportIcon as Ge}from"@salt-ds/icons";import{forwardRef as _e,useCallback as Y,useEffect as Je,useState as ze}from"react";var q=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 K}from"react/jsx-runtime";var qe=({lastUpdate:t},{lastUpdate:e})=>e===t?0:e<t?-1:1,Ye=t=>C(Oe,{...t}),Q=_e(function({loginUrl:e,onNavigate:o,user:r,layoutId:a="latest"},s){let[n,c]=ze([]);Je(()=>{async function d(){let h=(await q(r)).filter(f=>f.id!=="latest").sort(qe).map(({id:f,lastUpdate:v})=>({lastUpdate:v,id:f,label:`Saved at ${Fe(new Date(v),"kk:mm:ss")}`}));console.log({sortedHistory:h}),c(h)}d()},[r]);let i=Y((d,p)=>{p&&o(p.id)},[o]),l=Y(()=>{_(e)},[e]),u=n.length===0?null:a==="latest"?n[0]:n.find(d=>d.id===a);return K("div",{className:"vuuUserPanel",ref:s,children:[C(Ve,{ListItem:Ye,className:"vuuUserPanel-history",onSelect:i,selected:u,source:n}),C("div",{className:"vuuUserPanel-buttonBar",children:K($e,{"aria-label":"logout",onClick:l,children:[C(Ge,{})," Logout"]})})]})});import{jsx as D,jsxs as Xe}from"react/jsx-runtime";var W=({layoutId:t,loginUrl:e,onNavigate:o,user:r})=>Xe(Qe,{className:"vuuUserProfile",placement:"bottom-end",children:[D(Ke,{variant:"secondary",children:D(We,{})}),D(Q,{layoutId:t,loginUrl:e,onNavigate:s=>{o(s)},user:r})]});import{ToggleButton as X,ToggleButtonGroup as Ze}from"@heswell/salt-lab";import je from"classnames";import{useControlled as et}from"@salt-ds/core";import{useCallback as tt}from"react";import{jsx as j,jsxs as rt}from"react/jsx-runtime";var ot="vuuThemeSwitch",Z=["light","dark"],ee=({className:t,defaultMode:e,mode:o,onChange:r,...a})=>{let[s,n]=et({controlled:o,default:e!=null?e:"light",name:"ThemeSwitch",state:"mode"}),c=Z.indexOf(s),i=tt((u,d)=>{let p=Z[d];n(p),r(p)},[r,n]),l=je(ot,t);return rt(Ze,{className:l,...a,onChange:i,selectedIndex:c,children:[j(X,{"aria-label":"alert",tooltipText:"Light Theme","data-icon":"light"}),j(X,{"aria-label":"home",tooltipText:"Dark Theme","data-icon":"dark"})]})};import ut from"classnames";import{Dropdown as nt}from"@heswell/salt-lab";import{DEFAULT_DENSITY as st}from"@salt-ds/core";import{useCallback as at}from"react";import it from"classnames";import{jsx as ct}from"react/jsx-runtime";var lt="vuuDensitySwitch",mt=["high","medium","low","touch"],te=({className:t,defaultDensity:e=st,onDensityChange:o})=>{let r=at((s,n)=>{o(n)},[o]),a=it(lt,t);return ct(nt,{className:a,source:mt,defaultSelected:e,onSelectionChange:r})};import{jsx as H,jsxs as pt}from"react/jsx-runtime";var dt="vuuAppHeader",re=({className:t,layoutId:e,loginUrl:o,onNavigate:r,onSwitchTheme:a,themeMode:s="light",onDensitySwitch:n,density:c="medium",user:i,...l})=>{let u=ut(dt,t,`salt-density-${c}`),d=oe(h=>a==null?void 0:a(h),[a]),p=oe(h=>n==null?void 0:n(h),[n]);return pt("header",{className:u,...l,children:[H(ee,{defaultMode:s,onChange:d}),H(te,{defaultDensity:c,onDensityChange:p}),H(W,{layoutId:e,loginUrl:o,onNavigate:r,user:i})]})};import{jsx as g,jsxs as ae}from"react/jsx-runtime";var Lt={type:"View",props:{style:{height:"calc(100% - 6px)"}},children:[{props:{className:"vuuShell-warningPlaceholder"},type:"Placeholder"}]},qr=({children:t,className:e,defaultLayout:o=Lt,leftSidePanel:r,loginUrl:a,serverUrl:s,user:n,...c})=>{let i=b(null),[l,u]=ne("medium"),d=b(null),[p,h]=ne(!1),f=b("latest"),[v,M,N]=J(n,o),ie=L(m=>{M(m)},[M]),le=L(m=>{i.current&&(i.current.dataset.mode=m)},[]),me=L(m=>{u(m)},[u]),ce=m=>{var k;let he=m.target;(k=d.current)!=null&&k.contains(he)||h(!p)},ue=L(m=>{f.current=m,N(m)},[N]);gt(()=>{s&&n.token&&ht(s,n.token)},[s,n.token]);let de=()=>{let m=[];return r&&m.push(g(vt,{onClick:ce,open:p,position:"left",inline:!0,peekaboo:!0,sizeOpen:200,toggleButton:"end",children:g(Ct,{className:"vuuShell-palette",id:"vw-app-palette",ref:d,style:{height:"100%"},children:r},"app-palette")},"left-panel")),m},pe=ft("vuuShell",e,"salt-theme",`salt-density-${l}`);return ae(z,{value:void 0,children:[g(St,{layout:v,onLayoutChange:ie,children:g(se,{className:pe,"data-mode":"light",ref:i,...c,children:ae(xt,{className:"App",style:{flexDirection:"column",height:"100%",width:"100%"},children:[g(re,{layoutId:f.current,loginUrl:a,user:n,onNavigate:ue,onSwitchTheme:le,onDensitySwitch:me}),g(yt,{style:{flex:1},children:de().concat(g(se,{dropTarget:!0,style:{width:"100%",height:"100%"}},"main-content"))})]})})}),t]})};export{bt as ConnectionStatusIcon,A as Feature,oo as LoginPanel,qr as Shell,z as ShellContextProvider,ee as ThemeSwitch,ao as getAuthDetailsFromCookies,_ as logout,Ne as redirectToLogin,yo as useShellContext};
 //# sourceMappingURL=index.js.map