@vuu-ui/vuu-shell 0.8.13 → 0.8.14-debug

package/esm/index.js

@@ -1,4 +1,3029 @@
-import{useCallback as ko}from"react";import Fo from"classnames";import{Toolbar as $o}from"@vuu-ui/vuu-layout";import{useCallback as it,useEffect as So,useRef as No,useState as at}from"react";import{Button as Ro,FormField as ut,FormFieldLabel as lt}from"@salt-ds/core";import{VuuInput as ct}from"@vuu-ui/vuu-ui-controls";import{useMemo as wo}from"react";import{jsx as H,jsxs as Z}from"react/jsx-runtime";var st=()=>wo(()=>Z("svg",{width:"184",height:"90",viewBox:"0 0 184 90",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[Z("g",{clipPath:"url(#clip0_1173_59965)",children:[H("path",{d:"M77.0775 31.1019L69.4572 15.1795L66.3997 13.7093L47.6353 44.165L75.7224 61.2361L81.8124 51.2694L77.0775 31.1019Z",fill:"url(#paint0_linear_1173_59965)"}),H("path",{d:"M82.4101 49.7431C81.0488 51.8314 79.1993 53.648 76.8897 54.9809C74.2954 56.4792 71.4601 57.194 68.6623 57.194C63.3422 57.194 58.1597 54.6188 55.0209 49.971L30.5358 7.8193L30.5232 7.84116C25.8791 0.274825 16.0118 -2.26289 8.27258 2.21011C0.411306 6.74866 -2.26753 16.7872 2.28587 24.625L35.5054 81.8189C36.9856 84.3691 39.0542 86.3668 41.4358 87.7527C41.4545 87.7652 41.4733 87.7777 41.4921 87.7902C41.5015 87.7964 41.514 87.8027 41.5234 87.8089C42.6312 88.4457 43.8079 88.942 45.0253 89.3072C45.116 89.3353 45.2099 89.3634 45.3007 89.3883C45.7388 89.5101 46.1801 89.6193 46.6276 89.7067C46.7121 89.7223 46.7966 89.7317 46.8811 89.7473C47.241 89.8097 47.604 89.8628 47.967 89.9003C48.111 89.9159 48.2549 89.9315 48.3989 89.9408C48.8151 89.9752 49.2313 89.997 49.6507 90.0001C49.6726 90.0001 49.6945 90.0001 49.7132 90.0001C49.7195 90.0001 49.7226 90.0001 49.7289 90.0001C49.7352 90.0001 49.7383 90.0001 49.7445 90.0001C50.1983 90.0001 50.6552 89.9752 51.109 89.9377C51.2123 89.9283 51.3155 89.919 51.422 89.9065C51.8663 89.8597 52.3107 89.8004 52.7551 89.7192C52.7614 89.7192 52.7676 89.7192 52.7739 89.7192C53.2621 89.6287 53.7503 89.5101 54.2322 89.3727C54.2635 89.3634 54.2917 89.354 54.323 89.3446C55.024 89.1418 55.7156 88.8889 56.3978 88.5861C56.4104 88.5799 56.426 88.5736 56.4385 88.5674C56.958 88.3364 57.4712 88.0836 57.9751 87.7933C58.4852 87.4999 58.9703 87.1815 59.4334 86.8413C59.8371 86.5478 60.2252 86.2357 60.6039 85.9048C61.0639 85.499 61.4989 85.0745 61.9026 84.6282C62.2062 84.2942 62.4972 83.9446 62.7757 83.5825C62.8665 83.4639 62.951 83.3421 63.0355 83.2235C63.2264 82.9613 63.4079 82.6929 63.5831 82.4182C63.6739 82.2746 63.7646 82.1342 63.8523 81.9906C63.8867 81.9344 63.9242 81.8813 63.9555 81.8251L82.5854 49.7525H82.4039L82.4101 49.7431Z",fill:"url(#paint1_linear_1173_59965)"}),H("path",{d:"M82.8264 32.8436L81.4181 30.4464L75.3375 19.1687L72.5178 14.3929C71.9858 13.1225 70.7309 12.2266 69.26 12.2266C67.3104 12.2266 65.7331 13.8029 65.7331 15.7445C65.7331 16.4031 65.924 17.0086 66.2401 17.5362L66.2025 17.5611L77.1557 36.1617C78.4764 38.4372 78.83 41.0873 78.1509 43.6281C77.4718 46.169 75.8445 48.2915 73.5631 49.6119C72.0609 50.4797 70.3553 50.9385 68.6341 50.9385C65.1166 50.9385 61.84 49.0563 60.0812 46.0285L44.3368 19.2654H44.3681L37.7179 7.81917L37.7054 7.84102C37.5896 7.65061 37.455 7.47893 37.333 7.29477L37.1452 6.97326C37.1452 6.97326 37.1296 6.98262 37.1233 6.98887C34.0001 2.55332 29.0054 0.0780356 23.8512 0.0187285V0H15.3515V0.0436999C21.2881 -0.368328 27.2247 2.46593 30.5232 7.84102L30.5357 7.81917L55.0177 49.974C58.1566 54.6187 63.3422 57.197 68.6592 57.197C71.4569 57.197 74.2922 56.4853 76.8866 54.9839C79.1961 53.651 81.0425 51.8312 82.407 49.7461H82.5885L82.5259 49.8523C83.399 48.4695 84.0687 46.9462 84.5006 45.3231C85.6304 41.0904 85.042 36.6705 82.8201 32.8467L82.8264 32.8436Z",fill:"#F37880"}),Z("g",{opacity:"0.86",children:[H("path",{d:"M66.1994 17.5642L77.1526 36.1648C78.4732 38.4403 78.8269 41.0904 78.1478 43.6313C77.7347 45.1795 76.9648 46.5716 75.9133 47.7234C77.2903 46.4686 78.2823 44.8486 78.7737 43.007C79.4527 40.4661 79.0991 37.816 77.7785 35.5405L66.8253 16.94L66.8628 16.915C66.5467 16.3875 66.3558 15.7819 66.3558 15.1233C66.3558 14.3117 66.6344 13.5657 67.0975 12.9695C66.2651 13.6125 65.7299 14.6176 65.7299 15.7476C65.7299 16.4062 65.9208 17.0118 66.2369 17.5393L66.1994 17.5642Z",fill:"white"}),H("path",{d:"M82.5382 49.8335L82.5291 49.8487C82.5291 49.8487 82.5352 49.8365 82.5413 49.8304C82.5413 49.8304 82.5413 49.8304 82.5413 49.8335H82.5382Z",fill:"white"}),H("path",{d:"M77.5156 54.3596C74.9213 55.8579 72.0859 56.5727 69.2882 56.5727C63.9681 56.5727 58.7856 53.9975 55.6467 49.3497L31.1616 7.19488L31.1491 7.21673C28.9053 3.56154 25.4441 1.08626 21.5917 0H15.3515V0.0436999C21.2881 -0.368328 27.2247 2.46593 30.5232 7.84102L30.5357 7.81917L55.0177 49.974C58.1566 54.6187 63.3422 57.197 68.6592 57.197C71.4569 57.197 74.2922 56.4853 76.8866 54.9839C78.2698 54.1848 79.4809 53.2109 80.5293 52.1122C79.6311 52.9581 78.6266 53.7166 77.5125 54.3596H77.5156Z",fill:"white"})]})]}),H("path",{d:"M117.046 58.661C116.362 58.661 115.792 58.509 115.336 58.205C114.906 57.8757 114.551 57.3943 114.272 56.761L104.354 34.493C104.076 33.8597 104 33.3023 104.126 32.821C104.253 32.3397 104.519 31.9597 104.924 31.681C105.33 31.4023 105.811 31.263 106.368 31.263C107.103 31.263 107.648 31.4277 108.002 31.757C108.382 32.061 108.699 32.5297 108.952 33.163L117.958 54.025H116.324L125.292 33.125C125.571 32.517 125.9 32.061 126.28 31.757C126.66 31.4277 127.192 31.263 127.876 31.263C128.434 31.263 128.89 31.4023 129.244 31.681C129.624 31.9597 129.865 32.3397 129.966 32.821C130.068 33.3023 129.979 33.8597 129.7 34.493L119.782 56.761C119.504 57.3943 119.149 57.8757 118.718 58.205C118.313 58.509 117.756 58.661 117.046 58.661Z",fill:"white"}),H("path",{d:"M144.63 58.737C142.781 58.737 141.147 58.4963 139.728 58.015C138.335 57.5337 137.157 56.8243 136.194 55.887C135.232 54.9243 134.51 53.7337 134.028 52.315C133.547 50.8963 133.306 49.2497 133.306 47.375V33.733C133.306 32.897 133.509 32.2763 133.914 31.871C134.345 31.4657 134.953 31.263 135.738 31.263C136.524 31.263 137.119 31.4657 137.524 31.871C137.955 32.2763 138.17 32.897 138.17 33.733V47.337C138.17 49.7437 138.715 51.555 139.804 52.771C140.919 53.9617 142.528 54.557 144.63 54.557C146.733 54.557 148.329 53.9617 149.418 52.771C150.508 51.555 151.052 49.7437 151.052 47.337V33.733C151.052 32.897 151.255 32.2763 151.66 31.871C152.091 31.4657 152.699 31.263 153.484 31.263C154.244 31.263 154.827 31.4657 155.232 31.871C155.663 32.2763 155.878 32.897 155.878 33.733V47.375C155.878 49.8577 155.448 51.9477 154.586 53.645C153.75 55.3423 152.496 56.6217 150.824 57.483C149.152 58.319 147.088 58.737 144.63 58.737Z",fill:"white"}),H("path",{d:"M172.685 58.737C170.836 58.737 169.202 58.4963 167.783 58.015C166.39 57.5337 165.212 56.8243 164.249 55.887C163.286 54.9243 162.564 53.7337 162.083 52.315C161.602 50.8963 161.361 49.2497 161.361 47.375V33.733C161.361 32.897 161.564 32.2763 161.969 31.871C162.4 31.4657 163.008 31.263 163.793 31.263C164.578 31.263 165.174 31.4657 165.579 31.871C166.01 32.2763 166.225 32.897 166.225 33.733V47.337C166.225 49.7437 166.77 51.555 167.859 52.771C168.974 53.9617 170.582 54.557 172.685 54.557C174.788 54.557 176.384 53.9617 177.473 52.771C178.562 51.555 179.107 49.7437 179.107 47.337V33.733C179.107 32.897 179.31 32.2763 179.715 31.871C180.146 31.4657 180.754 31.263 181.539 31.263C182.299 31.263 182.882 31.4657 183.287 31.871C183.718 32.2763 183.933 32.897 183.933 33.733V47.375C183.933 49.8577 183.502 51.9477 182.641 53.645C181.805 55.3423 180.551 56.6217 178.879 57.483C177.207 58.319 175.142 58.737 172.685 58.737Z",fill:"white"}),Z("defs",{children:[Z("linearGradient",{id:"paint0_linear_1173_59965",x1:"47.6353",y1:"37.4727",x2:"81.8124",y2:"37.4727",gradientUnits:"userSpaceOnUse",children:[H("stop",{stopColor:"#4906A5"}),H("stop",{offset:"1",stopColor:"#D3423A"})]}),Z("linearGradient",{id:"paint1_linear_1173_59965",x1:"0.0670626",y1:"45.0017",x2:"82.5916",y2:"45.0017",gradientUnits:"userSpaceOnUse",children:[H("stop",{stopColor:"#7C06A5"}),H("stop",{offset:"1",stopColor:"#D3423A"})]}),H("clipPath",{id:"clip0_1173_59965",children:H("rect",{width:"85",height:"90",fill:"white",transform:"translate(0.0670471)"})})]})]}),[]);import Ho from"classnames";import{jsx as V,jsxs as ee}from"react/jsx-runtime";var _="vuuLoginPanel",ui=({appName:e="Demo App",className:t,requirePassword:o=!0,onSubmit:n,...s})=>{let[r,a]=at(""),[l,i]=at(""),c=No(null),f=()=>{n(r,l)},M=m=>{a(m.target.value)},h=m=>{i(m.target.value)},d=it(()=>{o||n(r)},[n,o,r]),g=it(()=>{r&&n(r,l)},[n,l,r]),p=r.trim()!==""&&(o===!1||l.trim()!=="");return So(()=>{var m;console.log("inputRef",{input:c.current}),(m=c.current)==null||m.focus()},[]),ee("div",{...s,className:Ho(_,t),children:[ee("div",{className:`${_}-branding`,children:[V(st,{}),V("div",{className:`${_}-appName`,children:e})]}),ee("div",{className:`${_}-form`,children:[V("div",{className:`${_}-title`,children:"Welcome Back"}),ee(ut,{children:[V(lt,{children:"Username"}),V(ct,{value:r,id:"text-username",inputRef:c,onChange:M,onCommit:d})]}),o?ee(ut,{children:[V(lt,{children:"Password"}),V(ct,{className:`${_}-password`,inputProps:{type:"password"},value:l,id:"text-password",onChange:h,onCommit:g,endAdornment:V("span",{"data-icon":"eye",style:{cursor:"pointer"}})})]}):null,V(Ro,{className:`${_}-login`,disabled:!p,onClick:f,variant:"cta",children:"Login"})]})]})};import{getCookieValue as we}from"@vuu-ui/vuu-utils";var Do=()=>{let e=we("vuu-auth-mode");return e!=null?e:""},di=()=>{let e=we("vuu-username"),t=we("vuu-auth-token");return[e,t]},Ao=()=>Do()==="login"?"login.html":"demo.html",Io=(e=Ao())=>{window.location.href=e},pt=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",Io(e)};import{Button as ie}from"@salt-ds/core";import{jsx as ae,jsxs as Se}from"react/jsx-runtime";var te="vuuAppHeader",dt=({className:e,layoutId:t,loginUrl:o,onNavigate:n,onSwitchTheme:s,themeMode:r="light",user:a,...l})=>{let i=Fo(te,e),c=ko(()=>{pt(o)},[o]);return Se($o,{alignItems:"end",className:i,height:36,showSeparators:!0,...l,children:[ae(ie,{className:`${te}-menuItem`,variant:"secondary",children:"Help"}),Se(ie,{className:`${te}-menuItem`,variant:"secondary",children:["History ",ae("span",{"data-icon":"history"})]}),Se(ie,{className:`${te}-menuItem`,variant:"secondary",children:["View ",ae("span",{"data-icon":"settings"})]}),ae(ie,{className:`${te}-menuItem`,onClick:c,variant:"secondary",children:"Log out"})]})};import Bo,{useEffect as Vo,useState as Oo}from"react";import Uo from"classnames";import{Fragment as Ko,jsx as Go,jsxs as mt}from"react/jsx-runtime";var ki=({connectionStatus:e,className:t,element:o="span",...n})=>{let[s,r]=Oo("vuuConnectingStatus");Vo(()=>{switch(e){case"connected":case"reconnected":r("vuuActiveStatus");break;case"connecting":r("vuuConnectingStatus");break;case"disconnected":r("vuuDisconnectedStatus");break;default:break}},[e]);let a=Bo.createElement(o,{...n,className:Uo("vuuStatus vuuIcon",s,t)});return Go(Ko,{children:mt("div",{className:"vuuStatus-container salt-theme",children:[a,mt("div",{className:"vuuStatus-text",children:["Status: ",e.toUpperCase()]})]})})};import{Dropdown as Jo}from"@salt-ds/lab";import{useCallback as _o}from"react";import zo from"classnames";import{jsx as Xo}from"react/jsx-runtime";var Wo="vuuDensitySwitch",qo=["high","medium","low","touch"],Zo="high",Ji=({className:e,defaultDensity:t=Zo,onChange:o})=>{let n=_o((r,a)=>{o(a)},[o]),s=zo(Wo,e);return Xo(Jo,{className:s,source:qo,defaultSelected:t,onSelectionChange:n})};import yt,{Suspense as tn,useEffect as on}from"react";import{registerComponent as nn}from"@vuu-ui/vuu-layout";import Yo from"react";import{Fragment as Qo,jsx as ft,jsxs as jo}from"react/jsx-runtime";var ue=class extends Yo.Component{constructor(t){super(t),this.state={errorMessage:null}}static getDerivedStateFromError(t){return{errorMessage:t.message}}componentDidCatch(t,o){console.log(`error creating component at ${this.props.url}`),console.log(t,o)}render(){return this.state.errorMessage?jo(Qo,{children:[ft("h1",{children:"An error occured while creating component."}),ft("p",{children:this.state.errorMessage})]}):this.props.children}};import{jsx as en}from"react/jsx-runtime";var ht=()=>en("div",{className:"hwLoader"});var gt=async e=>{let t=new CSSStyleSheet;return fetch(e).then(o=>o.text()).then(o=>t.replace(o))};import{jsx as ce}from"react/jsx-runtime";var le=new Map,rn=e=>{on(()=>()=>{le.delete(e)},[e]),le.has(e)||le.set(e,yt.lazy(()=>import(e)));let t=le.get(e);if(t)return t;throw Error(`Unable to load Lazy Feature at url ${e}`)};function sn({url:e,css:t,ComponentProps:o,...n}){t&&gt(t).then(r=>{document.adoptedStyleSheets=[...document.adoptedStyleSheets,r]});let s=rn(e);return ce(ue,{url:e,children:ce(tn,{fallback:ce(ht,{}),children:ce(s,{...n,...o})})})}var pe=yt.memo(sn);pe.displayName="Feature";nn("Feature",pe,"view");import{useEffect as an,useState as oe}from"react";import{Input as un,Button as vt,FormField as de,FormFieldLabel as me,Text as ln}from"@salt-ds/core";import{ComboBox as cn,Checkbox as pn,RadioButton as dn}from"@vuu-ui/vuu-ui-controls";import{takeScreenshot as mn}from"@vuu-ui/vuu-utils";import{jsx as D,jsxs as K}from"react/jsx-runtime";var A="saveLayoutPanel",fe=`${A}-formField`,fn=["Group 1","Group 2","Group 3","Group 4","Group 5"],hn=["Value 1","Value 2","Value 3"],Ct=["Value 1","Value 2","Value 3"],ba=e=>{let{defaultTitle:t="",onCancel:o,onSave:n,componentId:s}=e,[r,a]=oe(t),[l,i]=oe(""),[c,f]=oe([]),[M,h]=oe(Ct[0]),[d,g]=oe();an(()=>{s&&mn(document.getElementById(s)).then(m=>g(m))},[s]);let p=()=>{n({name:r,group:l,screenshot:d!=null?d:"",user:"User"})};return K("div",{className:`${A}-panelContainer`,children:[K("div",{className:`${A}-panelContent`,children:[K("div",{className:`${A}-formContainer`,children:[K(de,{className:fe,children:[D(me,{children:"Group"}),D(cn,{source:fn,allowFreeText:!0,InputProps:{inputProps:{className:`${A}-inputText`,placeholder:"Select Group or Enter New Name",onChange:m=>i(m.target.value)}},width:"100%",onSelectionChange:(m,P)=>i(P||"")})]}),K(de,{className:fe,children:[D(me,{children:"Layout Name"}),D(un,{inputProps:{className:`${A}-inputText`,placeholder:"Enter Layout Name"},onChange:m=>a(m.target.value),value:r})]}),K(de,{className:fe,children:[D(me,{children:"Some Layout Setting"}),D("div",{className:`${A}-settingsGroup`,children:hn.map((m,P)=>D(pn,{onToggle:()=>f(S=>S.includes(m)?S.filter(w=>w!==m):[...S,m]),checked:c.includes(m),label:m},P))})]}),K(de,{className:fe,children:[D(me,{children:"Some Layout Setting"}),D("div",{className:`${A}-settingsGroup`,children:Ct.map((m,P)=>D(dn,{onClick:()=>h(m),checked:M===m,label:m,groupName:"radioGroup"},P))})]})]}),D("div",{className:`${A}-screenshotContainer`,children:d?D("img",{className:`${A}-screenshot`,src:d,alt:"screenshot of current layout"}):D(ln,{className:"screenshot",children:"No screenshot available"})})]}),K("div",{className:`${A}-buttonsContainer`,children:[D(vt,{className:`${A}-cancelButton`,onClick:o,children:"Cancel"}),D(vt,{className:`${A}-saveButton`,onClick:p,disabled:r===""||l==="",children:"Save"})]})]})};import{List as Fr}from"@vuu-ui/vuu-ui-controls";import Er,{useCallback as z,useContext as wr,useEffect as Sr,useRef as Nr,useState as Xt}from"react";import{loadingApplicationJson as Rr,LocalLayoutPersistenceManager as Hr,resolveJSONPath as Dr,defaultApplicationJson as Ar}from"@vuu-ui/vuu-layout";import{Scrim as En}from"@salt-ds/lab";import wn from"classnames";import{useCallback as Sn,useRef as Nn}from"react";import{useLayoutEffect as Mt,useRef as gn,useState as yn}from"react";import{createPortal as vn}from"react-dom";function Cn(e){return typeof e=="function"?e():e}var Mn="vuu-portal-root",X=({children:e,container:t=document.body,id:o=Mn,onRender:n,open:s=!0,themeAttributes:r})=>{var d;let[a,l]=yn(!1),i=gn(null),c=(d=Cn(t))!=null?d:document.body,[f,M,h]=G(r);return Mt(()=>{let g=document.getElementById(o);g?i.current=g:(i.current=document.createElement("div"),i.current.id=o);let p=i.current;c.contains(p)||c.appendChild(p),p.classList.add(f,M),p.dataset.mode=h,l(!0)},[o,c,f,M,h]),Mt(()=>{requestAnimationFrame(()=>{n==null||n()})},[n]),s&&a&&i.current&&e?vn(e,i.current):null};import{Button as bn,Text as xn}from"@salt-ds/core";import Ln from"classnames";import{jsx as bt,jsxs as Tn}from"react/jsx-runtime";var Pn="vuuDialogHeader",xt=({hideCloseButton:e=!1,title:t,onClose:o,...n})=>Tn("div",{...n,className:Ln(Pn,"vuuToolbarProxy"),children:[bt(xn,{className:"dialogHeader",children:t}),!e&&bt(bn,{onClick:o,"data-align":"end","data-icon":"close",variant:"secondary"},"close")]});import{jsx as he,jsxs as Rn}from"react/jsx-runtime";var Ne="vuuDialog",Lt=({children:e,className:t,isOpen:o=!1,onClose:n,title:s,hideCloseButton:r=!1,...a})=>{let l=Nn(null),i=Sn(()=>{n==null||n()},[n]);return o?he(X,{children:he(En,{className:`${Ne}-scrim`,open:o,autoFocusRef:l,children:Rn("div",{...a,className:wn(Ne,t),ref:l,children:[he(xt,{hideCloseButton:r,onClose:i,title:s}),he("div",{className:`${Ne}-body`,children:e})]})})}):null};import{useCallback as Hn,useState as Dn}from"react";import{jsx as An}from"react/jsx-runtime";var Pt=()=>{let[e,t]=Dn(),o=Hn(()=>{t(void 0)},[]);return{dialog:e?An(Lt,{className:"vuDialog",isOpen:!0,onClose:o,style:{maxHeight:500},title:e.title,hideCloseButton:e.hideCloseButton,children:e.content}):null,setDialogState:t}};import{useCallback as Kt,useRef as Be}from"react";import kt,{useLayoutEffect as qn,useMemo as Zn,useRef as Xn}from"react";import Ft from"classnames";import{useId as Yn}from"@vuu-ui/vuu-layout";import{useCallback as ge,useMemo as Un,useRef as Re,useState as Kn}from"react";var Tt=e=>e.closest("[data-root='true']")!==null,Et=(e,t)=>{var o;return e.ariaHasPopup==="true"&&((o=e.dataset)==null?void 0:o.idx)===`${t}`||e.querySelector(`:scope > [data-index='${t}'][aria-haspopup='true']`)!==null};function In(e,...t){let o=new Set(e);for(let n of t)for(let s of n)o.add(s);return o}var kn="Enter";var Fn="Delete",$n=new Set([kn,Fn]),Bn=new Set(["Tab"]),Vn=new Set(["ArrowRight","ArrowLeft"]),wt=new Set(["Home","End","ArrowDown","ArrowUp"]),St=new Set(["Home","End","ArrowRight","ArrowLeft"]),On=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),cu=In($n,St,wt,Vn,On,Bn);var Nt=({key:e},t="vertical")=>(t==="vertical"?wt:St).has(e);import{isValidNumber as He}from"@vuu-ui/vuu-utils";var Rt=({autoHighlightFirstItem:e=!1,count:t,defaultHighlightedIdx:o,highlightedIndex:n,onActivate:s,onHighlight:r,onCloseMenu:a,onOpenMenu:l})=>{var N;if(He(n)&&He(o))throw Error("useKeyboardNavigation do not pass values for both highlightedIndex and defaultHighlightedIdx");let i=He(n),c=Re((N=o!=null?o:n)!=null?N:e?0:-1),[,f]=Kn(null),M=ge(L=>{c.current=L,r==null||r(L),f({})},[r]),h=ge(L=>{L!==c.current&&(i||M(L))},[i,M]),d=Re(!0),g=Re(!1),p=L=>g.current=L,m=i?n:c.current,P=ge(L=>{let y=Gn(t,L.key,c.current);y!==c.current&&h(y)},[t,h]),S=ge(L=>{if(Nt(L))L.preventDefault(),L.stopPropagation(),d.current=!0,P(L);else if((L.key==="ArrowRight"||L.key==="Enter")&&Et(L.target,m)){let v=L.target.querySelector(`:scope > [data-index='${m}']`);v&&(l==null||l(v,!0))}else L.key==="ArrowLeft"&&!Tt(L.target)?a(m):L.key==="Enter"?(L.preventDefault(),L.stopPropagation(),s&&s(m)):L.key==="Tab"&&a(-1)},[m,P,s,a,l]),w=Un(()=>({onFocus:()=>{m===-1&&M(0)},onKeyDown:S,onMouseDownCapture:()=>{d.current=!1,p(!0)},onMouseMove:()=>{d.current&&(d.current=!1)},onMouseLeave:()=>{d.current=!0,p(!1),h(-1)}}),[S,m,M,h]);return{focusVisible:d.current?m:-1,controlledHighlighting:i,highlightedIndex:m,setHighlightedIndex:h,listProps:w,setIgnoreFocus:p}};function Gn(e,t,o){return t==="ArrowUp"?o>0?o-1:o:o===null?0:o===e-1?o:o+1}import Ht,{useCallback as Jn,useMemo as _n}from"react";var De=e=>e.type===Ae||!!e.props["data-group"],zn=e=>{if(Array.isArray(e)&&Ie(e[0]))return e[0]},Wn=(e,t,o,n=!1)=>{let{props:{children:s}}=e;return{childWithId:Ht.cloneElement(e,{hasSeparator:n,id:`${t}`,key:t,children:o?zn(s):s}),grandChildren:o?s:void 0}},Dt=(e,t)=>{let o=Jn(()=>{let r=(a,l=t,i={},c={})=>{let f=i[l]=[],M=0,h=!1;return Ht.Children.forEach(a,d=>{if(!Ie(d))if(d.type===At)h=!0;else{let g=De(d),p=`${l}-${M}`,{props:{action:m,options:P}}=d,{childWithId:S,grandChildren:w}=Wn(d,p,g,h);f.push(S),w?r(w,p,i,c):c[p]={action:m,options:P},M+=1,h=!1}}),[i,c]};return r(e)},[t,e]),[n,s]=_n(()=>o(),[o]);return[n,s]};import{Fragment as tr,jsx as Y}from"react/jsx-runtime";var It="vuuMenuList",At=()=>Y("li",{className:"vuuMenuItem-divider"}),Ae=()=>null,ke=({children:e,idx:t,options:o,...n})=>Y("div",{...n,children:e}),$t=({children:e})=>Y(tr,{children:e});$t.displayName="MenuItemLabel";ke.Label=$t;var Qn=e=>kt.isValidElement(e)&&typeof e.type!="string"&&"displayName"in e.type?e.type.displayName:void 0,Ie=e=>Qn(e)==="MenuItemLabel",jn=e=>e.props["data-icon"],Fe=({activatedByKeyboard:e,childMenuShowing:t,children:o,className:n,defaultHighlightedIdx:s,highlightedIdx:r,id:a,isRoot:l,listItemProps:i,onHighlightMenuItem:c,onActivate:f,onCloseMenu:M,openMenu:h,...d})=>{let g=Yn(a),p=Xn(null),m=Zn(()=>new Map,[]),P=C=>{var b;let u=(b=p.current)==null?void 0:b.querySelector(`:scope > [data-index='${C}']`);u!=null&&u.id&&(f==null||f(u.id))},{focusVisible:S,highlightedIndex:w,listProps:N}=Rt({count:kt.Children.count(o),defaultHighlightedIdx:s,highlightedIndex:r,onActivate:P,onHighlight:c,onOpenMenu:h,onCloseMenu:M}),L=t==null?S:-1;qn(()=>{var C;t===void 0&&e&&((C=p.current)==null||C.focus())},[e,t]);let y=()=>w===void 0||w===-1?void 0:m.get(w);function v(){let C={...i,role:"menuitem"},u=(E,x,R)=>x?[Y("span",{className:"vuuIconContainer","data-icon":R},"icon")].concat(E):E;function b(E,x,R,k){var rt;let{children:B,className:Lo,"data-icon":ot,id:se,hasSeparator:Po,label:Te,...To}=x.props,Ee=De(x),nt=Ee&&t===se,Eo=nt?`${g}-${se}`:void 0;E.push(Y(ke,{...To,...C,...er(se,R,(rt=x.key)!=null?rt:se,w,L,Lo,Po),"aria-controls":Eo,"aria-haspopup":Ee||void 0,"aria-expanded":nt||void 0,children:u(Ee&&Te!=null?Te:B,k,ot)}))}let T=[];if(o.length>0){let E=o.some(jn);o.forEach((x,R)=>{b(T,x,R,E)})}return T}return Y("div",{...d,...N,"aria-activedescendant":y(),className:Ft(It,n,{[`${It}-childMenuShowing`]:t!==void 0}),"data-root":l||void 0,id:g,ref:p,role:"menu",children:v()})},er=(e,t,o,n,s,r,a)=>({id:`menuitem-${e}`,key:o!=null?o:t,"data-index":t,"data-highlighted":t===n||void 0,className:Ft("vuuMenuItem",r,{"vuuMenuItem-separator":a,focusVisible:s===t})});Fe.displayName="MenuList";import{useCallback as F,useMemo as or,useRef as ye,useState as nr}from"react";var $e=e=>e==null?void 0:e.closest("[data-index],[aria-posinset]");var Vt=(e,t,o)=>e.map((n,s)=>s===e.length-1?{...n,[o]:n[o]-t}:n),rr=(e,t)=>Vt(e,t,"left"),sr=(e,t)=>Vt(e,t,"top"),ir=(e,t)=>{let[o,n]=t.slice(-2),s=document.getElementById(`${e}-${n.id}`);if(s===null)throw Error(`useCascade.flipSides element with id ${n.id} not found`);let{width:r}=s.getBoundingClientRect();return t.map(a=>a===n?{...a,left:o.left-(r-2)}:a)},ar=(e,t)=>{let[{left:o,top:n}]=t.slice(-1),{offsetWidth:s,offsetTop:r}=e;return{left:o+s,top:r+n}},Ot=(e,t)=>{let o=e.lastIndexOf("-");return e.startsWith("menuitem")?o>-1?e.slice(9,o):t:o>-1?e.slice(0,o):t},ur=e=>e.slice(9),Bt=({ariaExpanded:e,ariaHasPopup:t,id:o},n)=>{if(o.startsWith("menuitem"))return{hostMenuId:Ot(o,n),targetMenuId:ur(o),menuItemId:o,isGroup:t==="true",isOpen:e==="true"};throw Error(`getMenuItemDetails #${o} is not a menuitem`)},Ut=({id:e,onActivate:t,onMouseEnterItem:o,position:{x:n,y:s}})=>{let[,r]=nr({}),a=ye([{id:e,left:n,top:s}]),l=F(y=>a.current.findIndex(v=>v.id===y)!==-1,[]),i=F(y=>{let v=h.current[y];if(v===void 0)throw Error(`getOpenMenuState no entry for menu ${y}`);return v},[]),c=F(y=>{a.current=y,r({})},[]),f=ye(),M=ye(),h=ye({[e]:"no-popup"}),d=F((y=e,v,C=null)=>{if(y===e&&C===null)c([{id:e,left:n,top:s}]);else{h.current[y]="popup-open";let u=document.getElementById(C);if(u!==null){let{left:b,top:T}=ar(u,a.current);c(a.current.concat({id:v,left:b,top:T}))}else throw Error(`openMenu no menuItem ${C}`)}},[e,n,s,c]),g=F(y=>{if(y===e)c([]);else{let v=a.current.slice(),C=v.pop();h.current[C.id]="no-popup";let u=v.at(-1);u&&(h.current[u.id]="no-popup"),c(v)}},[e,c]),p=F(y=>{let v=a.current.slice(),C=y.slice(9),{id:u}=v.at(-1);for(;v.length>1&&!C.startsWith(u);){let b=Ot(u,e);v.pop(),h.current[u]="no-popup",h.current[b]="no-popup",{id:u}=v[v.length-1]}v.length<a.current.length&&c(v)},[e,c]),m=F(()=>{f.current&&(clearTimeout(f.current),f.current=void 0)},[]),P=F((y,v,C,u=300)=>{m(),f.current=window.setTimeout(()=>{p(C),h.current[y]="popup-open",h.current[v]="no-popup",d(y,v,C)},u)},[m,p,d]),S=F((y,v,C)=>{h.current[v]="pending-close",M.current=window.setTimeout(()=>{p(C)},400)},[p]),w=F(()=>{let{current:y}=a,v=y.at(-1),C=v?document.getElementById(v.id):void 0;if(C){let{right:u,bottom:b}=C.getBoundingClientRect(),{clientHeight:T,clientWidth:E}=document.body;if(u>E){let x=y.length>1?ir(e,y):rr(y,u-E);c(x)}else if(b>T){let x=sr(y,b-T);c(x)}typeof C.tabIndex=="number"&&C.focus()}},[e,c]),N=F((y,v=!1)=>{let{hostMenuId:C,targetMenuId:u,menuItemId:b,isGroup:T,isOpen:E}=Bt(y,e),{current:{[C]:x}}=h,R=v?0:void 0;if(x==="no-popup"&&T)h.current[C]="popup-pending",P(C,u,b,R);else if(x==="popup-pending"&&!T)h.current[C]="no-popup",clearTimeout(f.current),f.current=void 0;else if(x==="popup-pending"&&T)clearTimeout(f.current),P(C,u,b,R);else if(x==="popup-open")if(l(u)){let k=i(u);switch(p(b),k){case"pending-close":clearTimeout(M.current),M.current=void 0,h.current[u]="no-popup",m();break;default:}}else{let[k,B]=a.current.slice(-2);k.id===C&&h.current[B.id]!=="pending-close"?(S(C,B.id,b),T&&!E&&P(C,u,b,R)):k.id===C&&T&&b!==B.id&&h.current[B.id]==="pending-close"||T?P(C,u,b,R):h.current[B.id]!=="pending-close"&&p(b)}x==="pending-close"&&(m(),clearTimeout(M.current),M.current=void 0,h.current[C]="popup-open")},[m,p,i,l,e,S,P]),L=or(()=>({onMouseEnter:y=>{let v=$e(y.target);N(v),o(y,v.id)},onClick:y=>{let v=$e(y.target),{isGroup:C,menuItemId:u}=Bt(v,e);C?N(v):t(u)}}),[t,o,e,N]);return{closeMenu:g,handleRender:w,listItemProps:L,openMenu:N,openMenus:a.current}};import{useId as lr}from"@vuu-ui/vuu-layout";import{Fragment as pr,jsx as Jt}from"react/jsx-runtime";import{createElement as Gt}from"react";var cr=()=>{},_t=({PortalProps:e,activatedByKeyboard:t,children:o,className:n,id:s,onClose:r=()=>{},position:a={x:0,y:0},style:l,...i})=>{let c=Be(r);c.current=r;let f=lr(s),M=Be(cr),[h,d]=Dt(o,f),g=Be(t),p=Kt(()=>{g.current=!1},[]),m=Kt(b=>{let T=b.slice(9),{action:E,options:x}=d[T];M.current(f),r({type:"menu-action",menuId:E,options:x})},[d,f,r]),{closeMenu:P,listItemProps:S,openMenu:w,openMenus:N,handleRender:L}=Ut({id:`${f}`,onActivate:m,onMouseEnterItem:p,position:a});M.current=P;let y=()=>{g.current=!0,P()},v=()=>{},C=N.length-1,u=b=>{if(!(b>=C)){let{id:T}=N[b+1];return T}};return Jt(pr,{children:N.map(({id:b,left:T,top:E},x,R)=>{let k=u(x);return Gt(X,{...e,key:x,onRender:L},Jt(zt,{anchorElement:{current:document.body},placement:"absolute",position:{left:T,top:E},children:Gt(Fe,{...i,activatedByKeyboard:g.current,childMenuShowing:k,className:n,id:b,isRoot:x===0,key:x,listItemProps:S,onActivate:m,onHighlightMenuItem:v,onCloseMenu:y,openMenu:w,style:l,tabIndex:x===R.length-1?0:void 0},h[b])}))})})};_t.displayName="ContextMenu";import{createContext as dr,useCallback as mr,useMemo as fr}from"react";import{jsx as Ve}from"react/jsx-runtime";var Oe=dr(null),hr=({children:e,context:t,menuActionHandler:o,menuBuilder:n})=>{let s=fr(()=>t!=null&&t.menuBuilders&&n?t.menuBuilders.concat(n):n?[n]:(t==null?void 0:t.menuBuilders)||[],[t,n]),r=mr(a=>{var l;if(o!=null&&o(a)||(l=t==null?void 0:t.menuActionHandler)!=null&&l.call(t,a))return!0},[t,o]);return Ve(Oe.Provider,{value:{menuActionHandler:r,menuBuilders:s},children:e})},Wt=({children:e,label:t,menuActionHandler:o,menuBuilder:n})=>Ve(Oe.Consumer,{children:s=>Ve(hr,{context:s,label:t,menuActionHandler:o,menuBuilder:n,children:e})});import{isGroupMenuItemDescriptor as Gl}from"@vuu-ui/vuu-utils";import{cloneElement as _l,useCallback as zl,useContext as Wl,useMemo as ql}from"react";import fl from"classnames";import gl,{createElement as yl}from"react";import xl from"react-dom";import*as gr from"react-dom";import il from"classnames";import br from"classnames";import{useCallback as yr,useLayoutEffect as vr,useRef as Cr,useState as Mr}from"react";var qt=(e,t,o,n,s,r)=>{let{bottom:a,height:l,left:i,right:c,top:f,width:M}=e.getBoundingClientRect();switch(t){case"below":return{left:i+o,top:a+n};case"right":return{left:c+o,top:f+n};case"below-center":return{left:i+M/2+o,top:a+n};case"below-right":return{left:i,minWidth:s,top:a+n};case"below-full-width":return{left:i+o,minWidth:s,top:a+n,width:M};case"center":return r?{left:M/2-r.width/2+o,top:l/2-r.height/2+n,visibility:"visible"}:{left:M/2+o,top:l/2+n,visibility:"hidden"};default:throw Error("Popup getPositionRelativeToAnchor only supported placement values are below and right")}},Ue=({anchorElement:e,minWidth:t,offsetLeft:o=0,offsetTop:n=0,placement:s,position:r})=>{let a=Cr(null),[l,i]=Mr(r);vr(()=>{if(s==="absolute"&&r)i(r);else if(e.current){let f=a.current===null?void 0:a.current.getBoundingClientRect(),M=qt(e.current,s,o,n,t,f);i(M)}},[e,t,o,n,s,r]);let c=yr(f=>{if(a.current=f,f&&s==="center"&&e.current){let{height:M,width:h}=f.getBoundingClientRect();i(qt(e.current,s,o,n,void 0,{height:M,width:h}))}},[e,o,n,s]);return{position:l,popupRef:s==="center"?c:void 0}};import{jsx as xr}from"react/jsx-runtime";var zt=({children:e,className:t,anchorElement:o,minWidth:n,placement:s,position:r})=>{let{popupRef:a,position:l}=Ue({anchorElement:o,minWidth:n,placement:s,position:r});return l===void 0?null:xr("div",{className:br("vuuPortal",t),ref:a,style:l,children:e})};import{jsx as rc}from"react/jsx-runtime";import{useCallback as vc,useRef as Cc,useState as Mc}from"react";import Ec from"classnames";import{Button as Sc}from"@salt-ds/core";import{useId as Rc}from"@vuu-ui/vuu-layout";import{jsx as Ac}from"react/jsx-runtime";import{Button as Uc}from"@salt-ds/core";import Gc from"classnames";import{useLayoutEffect as zc,useRef as Wc}from"react";import{jsx as jc,jsxs as ep}from"react/jsx-runtime";var Yc={current:document.body};import{useLayoutEffect as ip,useState as ap}from"react";import gp from"classnames";import{jsx as Cp}from"react/jsx-runtime";import{useCallback as Pp,useRef as Tp,useState as Ep}from"react";import{useId as Sp}from"@vuu-ui/vuu-layout";import Lr,{useState as Fp,useContext as Pr,useCallback as $p,useEffect as Bp}from"react";import Op from"classnames";import{getUniqueId as Kp}from"@vuu-ui/vuu-utils";import{jsx as zp,jsxs as Wp}from"react/jsx-runtime";var Tr=Lr.createContext({notify:()=>"have you forgotten to provide a NotificationProvider?"});var Zt=()=>Pr(Tr);import{jsx as kr}from"react/jsx-runtime";var Ke,ne=()=>(Ke===void 0&&(Ke=new Hr),Ke),Yt=Er.createContext({layoutMetadata:[],saveLayout:()=>{},applicationJson:Ar,saveApplicationLayout:()=>{},saveApplicationSettings:()=>{},loadLayoutById:()=>{}}),Ir=(e,t)=>{var o;return((o=e.props)==null?void 0:o.title)!==void 0?e:{...e,props:{...e.props,title:t.name}}},yd=e=>{let[t,o]=Xt([]),[,n]=Xt({}),{notify:s}=Zt(),r=Nr(Rr),a=z((d,g=!0)=>{r.current=d,g&&n({})},[]),l=z((d,g=!0)=>{a({...r.current,layout:d},g)},[a]),i=z(d=>{a({...r.current,settings:{...r.current.settings,...d}},!1)},[a]);Sr(()=>{let d=ne();d.loadMetadata().then(g=>{o(g)}).catch(g=>{s({type:"error",header:"Failed to Load Layouts",body:"Could not load list of available layouts"}),console.error("Error occurred while retrieving metadata",g)}),d.loadApplicationJSON().then(g=>{a(g)}).catch(g=>{s({type:"error",header:"Failed to Load Layout",body:"Could not load your latest view"}),console.error("Error occurred while retrieving application layout",g)})},[s,a]);let c=z(d=>{l(d,!1),ne().saveApplicationJSON(r.current)},[l]),f=z(d=>{let g=Dr(r.current.layout,"#main-tabs.ACTIVE_CHILD");g?ne().createLayout(d,Ir(g,d)).then(p=>{s({type:"success",header:"Layout Saved Successfully",body:`${p.name} saved successfully`}),o(m=>[...m,p])}).catch(p=>{s({type:"error",header:"Failed to Save Layout",body:`Failed to save layout ${d.name}`}),console.error("Error occurred while saving layout",p)}):s({type:"error",header:"Failed to Save Layout",body:"Cannot save undefined layout"})},[s]),M=z(d=>{i(d),ne().saveApplicationJSON(r.current)},[i]),h=z(d=>{ne().loadLayout(d).then(g=>{var m,P;let{layout:p}=r.current;l({...p,children:(p.children||[]).concat(g),props:{...p.props,active:(P=(m=p.children)==null?void 0:m.length)!=null?P:0}})}).catch(g=>{s({type:"error",header:"Failed to Load Layout",body:"Failed to load the requested layout"}),console.error("Error occurred while loading layout",g)})},[s,l]);return kr(Yt.Provider,{value:{layoutMetadata:t,saveLayout:f,applicationJson:r.current,saveApplicationLayout:c,saveApplicationSettings:M,loadLayoutById:h},children:e.children})},ve=()=>wr(Yt);import{Fragment as Qt,jsx as J,jsxs as Ce}from"react/jsx-runtime";var W="vuuLayoutList",jt=e=>{let{layoutMetadata:t,loadLayoutById:o}=ve(),n=r=>{r&&o(r)},s=t.reduce((r,a)=>r[a.group]?{...r,[a.group]:[...r[a.group],a]}:{...r,[a.group]:[a]},{});return Ce("div",{className:W,...e,children:[J("div",{className:`${W}-header`,children:"My Layouts"}),J(Fr,{height:"auto",source:Object.entries(s),ListItem:({item:r})=>{if(!r)return J(Qt,{});let[a,l]=r;return Ce(Qt,{children:[J("div",{className:`${W}-groupName`,children:a}),l.map(i=>Ce("div",{className:`${W}-layoutContainer`,onClick:()=>n(i==null?void 0:i.id),children:[J("img",{className:`${W}-screenshot`,src:i==null?void 0:i.screenshot}),Ce("div",{children:[J("div",{className:`${W}-layoutName`,children:i==null?void 0:i.name}),J("div",{className:`${W}-layoutDetails`,children:J("div",{children:`${i==null?void 0:i.user}, ${i==null?void 0:i.created}`})})]})]},i==null?void 0:i.id))]})}})]})};import{VuuLogo as Xr}from"@vuu-ui/vuu-icons";import{Stack as Yr,useLayoutProviderDispatch as Qr}from"@vuu-ui/vuu-layout";import{Tab as Me,Tabstrip as jr}from"@vuu-ui/vuu-ui-controls";import We from"classnames";import{useCallback as qe,useState as es}from"react";import{Palette as $r,PaletteItem as Br}from"@vuu-ui/vuu-layout";import{jsx as re,jsxs as Vr}from"react/jsx-runtime";var Ge="vuuFeatureList",Je=({features:e,title:t="VUU TABLES",...o})=>{let n={},s={height:"100%"};return Vr("div",{...o,className:Ge,children:[re("div",{className:`${Ge}-header`,children:t}),re("div",{className:`${Ge}-content`,children:re($r,{orientation:"vertical",ListProps:s,ViewProps:n,children:e.map((r,a)=>re(Br,{closeable:!0,label:r.title,resizeable:!0,resize:"defer",header:!0,children:re(pe,{...r})},a))})})]})};import{createContext as Or,isValidElement as Ur,cloneElement as Kr,useContext as eo}from"react";import Gr from"classnames";import{jsx as Zr}from"react/jsx-runtime";var Jr="medium",_r="salt-theme",zr="light",_e=Or({density:"high",theme:"vuu",themeMode:"light"}),Wr=["vuu","vuu-density-high","light"],G=e=>{let t=eo(_e);return e?[e.themeClass,e.densityClass,e.dataMode]:t?[`${t.theme}-theme`,`${t.theme}-density-${t.density}`,t.themeMode]:Wr},qr=(e,t,o,n)=>{var s;return Ur(e)?Kr(e,{className:Gr((s=e.props)==null?void 0:s.className,`${t}-theme`,`${t}-density-${n}`),"data-mode":o}):(console.warn(`
+// src/app-header/AppHeader.tsx
+import { useCallback as useCallback2 } from "react";
+import cx2 from "classnames";
+import { Toolbar } from "@vuu-ui/vuu-layout";
+
+// src/login/LoginPanel.tsx
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Button, FormField, FormFieldLabel } from "@salt-ds/core";
+import { VuuInput } from "@vuu-ui/vuu-ui-controls";
+
+// src/login/VuuLogo.tsx
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VuuLogo = () => {
+  const logo = useMemo(
+    () => /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: "184",
+        height: "90",
+        viewBox: "0 0 184 90",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_1173_59965)", children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M77.0775 31.1019L69.4572 15.1795L66.3997 13.7093L47.6353 44.165L75.7224 61.2361L81.8124 51.2694L77.0775 31.1019Z",
+                fill: "url(#paint0_linear_1173_59965)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M82.4101 49.7431C81.0488 51.8314 79.1993 53.648 76.8897 54.9809C74.2954 56.4792 71.4601 57.194 68.6623 57.194C63.3422 57.194 58.1597 54.6188 55.0209 49.971L30.5358 7.8193L30.5232 7.84116C25.8791 0.274825 16.0118 -2.26289 8.27258 2.21011C0.411306 6.74866 -2.26753 16.7872 2.28587 24.625L35.5054 81.8189C36.9856 84.3691 39.0542 86.3668 41.4358 87.7527C41.4545 87.7652 41.4733 87.7777 41.4921 87.7902C41.5015 87.7964 41.514 87.8027 41.5234 87.8089C42.6312 88.4457 43.8079 88.942 45.0253 89.3072C45.116 89.3353 45.2099 89.3634 45.3007 89.3883C45.7388 89.5101 46.1801 89.6193 46.6276 89.7067C46.7121 89.7223 46.7966 89.7317 46.8811 89.7473C47.241 89.8097 47.604 89.8628 47.967 89.9003C48.111 89.9159 48.2549 89.9315 48.3989 89.9408C48.8151 89.9752 49.2313 89.997 49.6507 90.0001C49.6726 90.0001 49.6945 90.0001 49.7132 90.0001C49.7195 90.0001 49.7226 90.0001 49.7289 90.0001C49.7352 90.0001 49.7383 90.0001 49.7445 90.0001C50.1983 90.0001 50.6552 89.9752 51.109 89.9377C51.2123 89.9283 51.3155 89.919 51.422 89.9065C51.8663 89.8597 52.3107 89.8004 52.7551 89.7192C52.7614 89.7192 52.7676 89.7192 52.7739 89.7192C53.2621 89.6287 53.7503 89.5101 54.2322 89.3727C54.2635 89.3634 54.2917 89.354 54.323 89.3446C55.024 89.1418 55.7156 88.8889 56.3978 88.5861C56.4104 88.5799 56.426 88.5736 56.4385 88.5674C56.958 88.3364 57.4712 88.0836 57.9751 87.7933C58.4852 87.4999 58.9703 87.1815 59.4334 86.8413C59.8371 86.5478 60.2252 86.2357 60.6039 85.9048C61.0639 85.499 61.4989 85.0745 61.9026 84.6282C62.2062 84.2942 62.4972 83.9446 62.7757 83.5825C62.8665 83.4639 62.951 83.3421 63.0355 83.2235C63.2264 82.9613 63.4079 82.6929 63.5831 82.4182C63.6739 82.2746 63.7646 82.1342 63.8523 81.9906C63.8867 81.9344 63.9242 81.8813 63.9555 81.8251L82.5854 49.7525H82.4039L82.4101 49.7431Z",
+                fill: "url(#paint1_linear_1173_59965)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M82.8264 32.8436L81.4181 30.4464L75.3375 19.1687L72.5178 14.3929C71.9858 13.1225 70.7309 12.2266 69.26 12.2266C67.3104 12.2266 65.7331 13.8029 65.7331 15.7445C65.7331 16.4031 65.924 17.0086 66.2401 17.5362L66.2025 17.5611L77.1557 36.1617C78.4764 38.4372 78.83 41.0873 78.1509 43.6281C77.4718 46.169 75.8445 48.2915 73.5631 49.6119C72.0609 50.4797 70.3553 50.9385 68.6341 50.9385C65.1166 50.9385 61.84 49.0563 60.0812 46.0285L44.3368 19.2654H44.3681L37.7179 7.81917L37.7054 7.84102C37.5896 7.65061 37.455 7.47893 37.333 7.29477L37.1452 6.97326C37.1452 6.97326 37.1296 6.98262 37.1233 6.98887C34.0001 2.55332 29.0054 0.0780356 23.8512 0.0187285V0H15.3515V0.0436999C21.2881 -0.368328 27.2247 2.46593 30.5232 7.84102L30.5357 7.81917L55.0177 49.974C58.1566 54.6187 63.3422 57.197 68.6592 57.197C71.4569 57.197 74.2922 56.4853 76.8866 54.9839C79.1961 53.651 81.0425 51.8312 82.407 49.7461H82.5885L82.5259 49.8523C83.399 48.4695 84.0687 46.9462 84.5006 45.3231C85.6304 41.0904 85.042 36.6705 82.8201 32.8467L82.8264 32.8436Z",
+                fill: "#F37880"
+              }
+            ),
+            /* @__PURE__ */ jsxs("g", { opacity: "0.86", children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M66.1994 17.5642L77.1526 36.1648C78.4732 38.4403 78.8269 41.0904 78.1478 43.6313C77.7347 45.1795 76.9648 46.5716 75.9133 47.7234C77.2903 46.4686 78.2823 44.8486 78.7737 43.007C79.4527 40.4661 79.0991 37.816 77.7785 35.5405L66.8253 16.94L66.8628 16.915C66.5467 16.3875 66.3558 15.7819 66.3558 15.1233C66.3558 14.3117 66.6344 13.5657 67.0975 12.9695C66.2651 13.6125 65.7299 14.6176 65.7299 15.7476C65.7299 16.4062 65.9208 17.0118 66.2369 17.5393L66.1994 17.5642Z",
+                  fill: "white"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M82.5382 49.8335L82.5291 49.8487C82.5291 49.8487 82.5352 49.8365 82.5413 49.8304C82.5413 49.8304 82.5413 49.8304 82.5413 49.8335H82.5382Z",
+                  fill: "white"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M77.5156 54.3596C74.9213 55.8579 72.0859 56.5727 69.2882 56.5727C63.9681 56.5727 58.7856 53.9975 55.6467 49.3497L31.1616 7.19488L31.1491 7.21673C28.9053 3.56154 25.4441 1.08626 21.5917 0H15.3515V0.0436999C21.2881 -0.368328 27.2247 2.46593 30.5232 7.84102L30.5357 7.81917L55.0177 49.974C58.1566 54.6187 63.3422 57.197 68.6592 57.197C71.4569 57.197 74.2922 56.4853 76.8866 54.9839C78.2698 54.1848 79.4809 53.2109 80.5293 52.1122C79.6311 52.9581 78.6266 53.7166 77.5125 54.3596H77.5156Z",
+                  fill: "white"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M117.046 58.661C116.362 58.661 115.792 58.509 115.336 58.205C114.906 57.8757 114.551 57.3943 114.272 56.761L104.354 34.493C104.076 33.8597 104 33.3023 104.126 32.821C104.253 32.3397 104.519 31.9597 104.924 31.681C105.33 31.4023 105.811 31.263 106.368 31.263C107.103 31.263 107.648 31.4277 108.002 31.757C108.382 32.061 108.699 32.5297 108.952 33.163L117.958 54.025H116.324L125.292 33.125C125.571 32.517 125.9 32.061 126.28 31.757C126.66 31.4277 127.192 31.263 127.876 31.263C128.434 31.263 128.89 31.4023 129.244 31.681C129.624 31.9597 129.865 32.3397 129.966 32.821C130.068 33.3023 129.979 33.8597 129.7 34.493L119.782 56.761C119.504 57.3943 119.149 57.8757 118.718 58.205C118.313 58.509 117.756 58.661 117.046 58.661Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M144.63 58.737C142.781 58.737 141.147 58.4963 139.728 58.015C138.335 57.5337 137.157 56.8243 136.194 55.887C135.232 54.9243 134.51 53.7337 134.028 52.315C133.547 50.8963 133.306 49.2497 133.306 47.375V33.733C133.306 32.897 133.509 32.2763 133.914 31.871C134.345 31.4657 134.953 31.263 135.738 31.263C136.524 31.263 137.119 31.4657 137.524 31.871C137.955 32.2763 138.17 32.897 138.17 33.733V47.337C138.17 49.7437 138.715 51.555 139.804 52.771C140.919 53.9617 142.528 54.557 144.63 54.557C146.733 54.557 148.329 53.9617 149.418 52.771C150.508 51.555 151.052 49.7437 151.052 47.337V33.733C151.052 32.897 151.255 32.2763 151.66 31.871C152.091 31.4657 152.699 31.263 153.484 31.263C154.244 31.263 154.827 31.4657 155.232 31.871C155.663 32.2763 155.878 32.897 155.878 33.733V47.375C155.878 49.8577 155.448 51.9477 154.586 53.645C153.75 55.3423 152.496 56.6217 150.824 57.483C149.152 58.319 147.088 58.737 144.63 58.737Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M172.685 58.737C170.836 58.737 169.202 58.4963 167.783 58.015C166.39 57.5337 165.212 56.8243 164.249 55.887C163.286 54.9243 162.564 53.7337 162.083 52.315C161.602 50.8963 161.361 49.2497 161.361 47.375V33.733C161.361 32.897 161.564 32.2763 161.969 31.871C162.4 31.4657 163.008 31.263 163.793 31.263C164.578 31.263 165.174 31.4657 165.579 31.871C166.01 32.2763 166.225 32.897 166.225 33.733V47.337C166.225 49.7437 166.77 51.555 167.859 52.771C168.974 53.9617 170.582 54.557 172.685 54.557C174.788 54.557 176.384 53.9617 177.473 52.771C178.562 51.555 179.107 49.7437 179.107 47.337V33.733C179.107 32.897 179.31 32.2763 179.715 31.871C180.146 31.4657 180.754 31.263 181.539 31.263C182.299 31.263 182.882 31.4657 183.287 31.871C183.718 32.2763 183.933 32.897 183.933 33.733V47.375C183.933 49.8577 183.502 51.9477 182.641 53.645C181.805 55.3423 180.551 56.6217 178.879 57.483C177.207 58.319 175.142 58.737 172.685 58.737Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: "paint0_linear_1173_59965",
+                x1: "47.6353",
+                y1: "37.4727",
+                x2: "81.8124",
+                y2: "37.4727",
+                gradientUnits: "userSpaceOnUse",
+                children: [
+                  /* @__PURE__ */ jsx("stop", { stopColor: "#4906A5" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#D3423A" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: "paint1_linear_1173_59965",
+                x1: "0.0670626",
+                y1: "45.0017",
+                x2: "82.5916",
+                y2: "45.0017",
+                gradientUnits: "userSpaceOnUse",
+                children: [
+                  /* @__PURE__ */ jsx("stop", { stopColor: "#7C06A5" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#D3423A" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("clipPath", { id: "clip0_1173_59965", children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                width: "85",
+                height: "90",
+                fill: "white",
+                transform: "translate(0.0670471)"
+              }
+            ) })
+          ] })
+        ]
+      }
+    ),
+    []
+  );
+  return logo;
+};
+
+// src/login/LoginPanel.tsx
+import cx from "classnames";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var classBase = "vuuLoginPanel";
+var LoginPanel = ({
+  appName = "Demo App",
+  className,
+  requirePassword = true,
+  onSubmit,
+  ...htmlAttributes
+}) => {
+  const [username, setUserName] = useState("");
+  const [password, setPassword] = useState("");
+  const inputRef = useRef(null);
+  const login = () => {
+    onSubmit(username, password);
+  };
+  const handleUsername = (evt) => {
+    setUserName(evt.target.value);
+  };
+  const handlePassword = (evt) => {
+    setPassword(evt.target.value);
+  };
+  const handleCommitName = useCallback(() => {
+    if (!requirePassword) {
+      onSubmit(username);
+    }
+  }, [onSubmit, requirePassword, username]);
+  const handleCommitPassword = useCallback(() => {
+    if (username) {
+      onSubmit(username, password);
+    }
+  }, [onSubmit, password, username]);
+  const dataIsValid = username.trim() !== "" && (requirePassword === false || password.trim() !== "");
+  useEffect(() => {
+    var _a;
+    console.log(`inputRef`, {
+      input: inputRef.current
+    });
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  return /* @__PURE__ */ jsxs2("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: `${classBase}-branding`, children: [
+      /* @__PURE__ */ jsx2(VuuLogo, {}),
+      /* @__PURE__ */ jsx2("div", { className: `${classBase}-appName`, children: appName })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: `${classBase}-form`, children: [
+      /* @__PURE__ */ jsx2("div", { className: `${classBase}-title`, children: "Welcome Back" }),
+      /* @__PURE__ */ jsxs2(FormField, { children: [
+        /* @__PURE__ */ jsx2(FormFieldLabel, { children: "Username" }),
+        /* @__PURE__ */ jsx2(
+          VuuInput,
+          {
+            value: username,
+            id: "text-username",
+            inputRef,
+            onChange: handleUsername,
+            onCommit: handleCommitName
+          }
+        )
+      ] }),
+      requirePassword ? /* @__PURE__ */ jsxs2(FormField, { children: [
+        /* @__PURE__ */ jsx2(FormFieldLabel, { children: "Password" }),
+        /* @__PURE__ */ jsx2(
+          VuuInput,
+          {
+            className: `${classBase}-password`,
+            inputProps: {
+              type: "password"
+            },
+            value: password,
+            id: "text-password",
+            onChange: handlePassword,
+            onCommit: handleCommitPassword,
+            endAdornment: /* @__PURE__ */ jsx2("span", { "data-icon": "eye", style: { cursor: "pointer" } })
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsx2(
+        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 getAuthModeFromCookies = () => {
+  const mode = getCookieValue("vuu-auth-mode");
+  return mode != null ? mode : "";
+};
+var getAuthDetailsFromCookies = () => {
+  const username = getCookieValue("vuu-username");
+  const token = getCookieValue("vuu-auth-token");
+  return [username, token];
+};
+var getDefaultLoginUrl = () => {
+  const authMode = getAuthModeFromCookies();
+  return authMode === "login" ? "login.html" : "demo.html";
+};
+var redirectToLogin = (loginUrl = getDefaultLoginUrl()) => {
+  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/app-header/AppHeader.tsx
+import { Button as Button2 } from "@salt-ds/core";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase2 = "vuuAppHeader";
+var AppHeader = ({
+  className: classNameProp,
+  layoutId,
+  loginUrl,
+  onNavigate,
+  onSwitchTheme,
+  themeMode = "light",
+  user,
+  ...htmlAttributes
+}) => {
+  const className = cx2(classBase2, classNameProp);
+  const handleLogout = useCallback2(() => {
+    logout(loginUrl);
+  }, [loginUrl]);
+  return /* @__PURE__ */ jsxs3(
+    Toolbar,
+    {
+      alignItems: "end",
+      className,
+      height: 36,
+      showSeparators: true,
+      ...htmlAttributes,
+      children: [
+        /* @__PURE__ */ jsx3(Button2, { className: `${classBase2}-menuItem`, variant: "secondary", children: "Help" }),
+        /* @__PURE__ */ jsxs3(Button2, { className: `${classBase2}-menuItem`, variant: "secondary", children: [
+          "History ",
+          /* @__PURE__ */ jsx3("span", { "data-icon": "history" })
+        ] }),
+        /* @__PURE__ */ jsxs3(Button2, { className: `${classBase2}-menuItem`, variant: "secondary", children: [
+          "View ",
+          /* @__PURE__ */ jsx3("span", { "data-icon": "settings" })
+        ] }),
+        /* @__PURE__ */ jsx3(
+          Button2,
+          {
+            className: `${classBase2}-menuItem`,
+            onClick: handleLogout,
+            variant: "secondary",
+            children: "Log out"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/connection-status/ConnectionStatusIcon.tsx
+import React, { useEffect as useEffect2, useState as useState2 } from "react";
+import cx3 from "classnames";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ConnectionStatusIcon = ({ connectionStatus, className, element = "span", ...props }) => {
+  const [classBase15, setClassBase] = useState2("vuuConnectingStatus");
+  useEffect2(() => {
+    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: cx3("vuuStatus vuuIcon", classBase15, className)
+    }
+  );
+  return /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsxs4("div", { className: "vuuStatus-container salt-theme", children: [
+    statusIcon,
+    /* @__PURE__ */ jsxs4("div", { className: "vuuStatus-text", children: [
+      "Status: ",
+      connectionStatus.toUpperCase()
+    ] })
+  ] }) });
+};
+
+// src/density-switch/DensitySwitch.tsx
+import { Dropdown } from "@salt-ds/lab";
+import { useCallback as useCallback3 } from "react";
+import cx4 from "classnames";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var classBase3 = "vuuDensitySwitch";
+var densities = ["high", "medium", "low", "touch"];
+var DEFAULT_DENSITY = "high";
+var DensitySwitch = ({
+  className: classNameProp,
+  defaultDensity = DEFAULT_DENSITY,
+  onChange
+}) => {
+  const handleSelectionChange = useCallback3(
+    (_event, selectedItem) => {
+      onChange(selectedItem);
+    },
+    [onChange]
+  );
+  const className = cx4(classBase3, classNameProp);
+  return /* @__PURE__ */ jsx5(
+    Dropdown,
+    {
+      className,
+      source: densities,
+      defaultSelected: defaultDensity,
+      onSelectionChange: handleSelectionChange
+    }
+  );
+};
+
+// src/feature/Feature.tsx
+import React3, { Suspense, useEffect as useEffect3 } from "react";
+import { registerComponent } from "@vuu-ui/vuu-layout";
+
+// src/feature/FeatureErrorBoundary.tsx
+import React2 from "react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var FeatureErrorBoundary = class extends React2.Component {
+  constructor(props) {
+    super(props);
+    this.state = { errorMessage: null };
+  }
+  static getDerivedStateFromError(error2) {
+    return { errorMessage: error2.message };
+  }
+  componentDidCatch(error2, errorInfo) {
+    console.log(`error creating component at ${this.props.url}`);
+    console.log(error2, errorInfo);
+  }
+  render() {
+    if (this.state.errorMessage) {
+      return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx6("h1", { children: "An error occured while creating component." }),
+        /* @__PURE__ */ jsx6("p", { children: this.state.errorMessage })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// src/feature/Loader.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Loader = () => /* @__PURE__ */ jsx7("div", { className: "hwLoader" });
+
+// 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 jsx8 } from "react/jsx-runtime";
+var componentsMap = /* @__PURE__ */ new Map();
+var useCachedFeature = (url) => {
+  useEffect3(
+    () => () => {
+      componentsMap.delete(url);
+    },
+    [url]
+  );
+  if (!componentsMap.has(url)) {
+    componentsMap.set(
+      url,
+      React3.lazy(() => import(
+        /* @vite-ignore */
+        url
+      ))
+    );
+  }
+  const lazyFeature = componentsMap.get(url);
+  if (!lazyFeature) {
+    throw Error(`Unable to load Lazy Feature at url ${url}`);
+  } else {
+    return lazyFeature;
+  }
+};
+function RawFeature({
+  url,
+  css,
+  ComponentProps: params,
+  ...props
+}) {
+  if (css) {
+    importCSS(css).then((styleSheet) => {
+      document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        styleSheet
+      ];
+    });
+  }
+  const LazyFeature = useCachedFeature(url);
+  return /* @__PURE__ */ jsx8(FeatureErrorBoundary, { url, children: /* @__PURE__ */ jsx8(Suspense, { fallback: /* @__PURE__ */ jsx8(Loader, {}), children: /* @__PURE__ */ jsx8(LazyFeature, { ...props, ...params }) }) });
+}
+var Feature = React3.memo(RawFeature);
+Feature.displayName = "Feature";
+registerComponent("Feature", Feature, "view");
+
+// src/layout-management/SaveLayoutPanel.tsx
+import { useEffect as useEffect4, useState as useState3 } from "react";
+import { Input, Button as Button3, FormField as FormField2, FormFieldLabel as FormFieldLabel2, Text } from "@salt-ds/core";
+import { ComboBox, Checkbox, RadioButton } from "@vuu-ui/vuu-ui-controls";
+import { takeScreenshot } from "@vuu-ui/vuu-utils";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var classBase4 = "saveLayoutPanel";
+var formField = `${classBase4}-formField`;
+var groups = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5"];
+var checkboxValues = ["Value 1", "Value 2", "Value 3"];
+var radioValues = ["Value 1", "Value 2", "Value 3"];
+var SaveLayoutPanel = (props) => {
+  const { defaultTitle = "", onCancel, onSave, componentId } = props;
+  const [layoutName, setLayoutName] = useState3(defaultTitle);
+  const [group, setGroup] = useState3("");
+  const [checkValues, setCheckValues] = useState3([]);
+  const [radioValue, setRadioValue] = useState3(radioValues[0]);
+  const [screenshot, setScreenshot] = useState3();
+  useEffect4(() => {
+    if (componentId) {
+      takeScreenshot(document.getElementById(componentId)).then(
+        (screenshot2) => setScreenshot(screenshot2)
+      );
+    }
+  }, [componentId]);
+  const handleSubmit = () => {
+    onSave({
+      name: layoutName,
+      group,
+      screenshot: screenshot != null ? screenshot : "",
+      user: "User"
+    });
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: `${classBase4}-panelContainer`, children: [
+    /* @__PURE__ */ jsxs6("div", { className: `${classBase4}-panelContent`, children: [
+      /* @__PURE__ */ jsxs6("div", { className: `${classBase4}-formContainer`, children: [
+        /* @__PURE__ */ jsxs6(FormField2, { className: formField, children: [
+          /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Group" }),
+          /* @__PURE__ */ jsx9(
+            ComboBox,
+            {
+              source: groups,
+              allowFreeText: true,
+              InputProps: {
+                inputProps: {
+                  className: `${classBase4}-inputText`,
+                  placeholder: "Select Group or Enter New Name",
+                  onChange: (event) => setGroup(event.target.value)
+                }
+              },
+              width: "100%",
+              onSelectionChange: (_, value) => setGroup(value || "")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6(FormField2, { className: formField, children: [
+          /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Layout Name" }),
+          /* @__PURE__ */ jsx9(
+            Input,
+            {
+              inputProps: {
+                className: `${classBase4}-inputText`,
+                placeholder: "Enter Layout Name"
+              },
+              onChange: (event) => setLayoutName(event.target.value),
+              value: layoutName
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6(FormField2, { className: formField, children: [
+          /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Some Layout Setting" }),
+          /* @__PURE__ */ jsx9("div", { className: `${classBase4}-settingsGroup`, children: checkboxValues.map((value, i) => /* @__PURE__ */ jsx9(
+            Checkbox,
+            {
+              onToggle: () => setCheckValues(
+                (prev) => prev.includes(value) ? prev.filter((entry) => entry !== value) : [...prev, value]
+              ),
+              checked: checkValues.includes(value),
+              label: value
+            },
+            i
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs6(FormField2, { className: formField, children: [
+          /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Some Layout Setting" }),
+          /* @__PURE__ */ jsx9("div", { className: `${classBase4}-settingsGroup`, children: radioValues.map((value, i) => /* @__PURE__ */ jsx9(
+            RadioButton,
+            {
+              onClick: () => setRadioValue(value),
+              checked: radioValue === value,
+              label: value,
+              groupName: "radioGroup"
+            },
+            i
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx9("div", { className: `${classBase4}-screenshotContainer`, children: screenshot ? /* @__PURE__ */ jsx9(
+        "img",
+        {
+          className: `${classBase4}-screenshot`,
+          src: screenshot,
+          alt: "screenshot of current layout"
+        }
+      ) : /* @__PURE__ */ jsx9(Text, { className: "screenshot", children: "No screenshot available" }) })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: `${classBase4}-buttonsContainer`, children: [
+      /* @__PURE__ */ jsx9(Button3, { className: `${classBase4}-cancelButton`, onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx9(
+        Button3,
+        {
+          className: `${classBase4}-saveButton`,
+          onClick: handleSubmit,
+          disabled: layoutName === "" || group === "",
+          children: "Save"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/layout-management/LayoutList.tsx
+import { List } from "@vuu-ui/vuu-ui-controls";
+
+// src/layout-management/useLayoutManager.tsx
+import React8, {
+  useCallback as useCallback16,
+  useContext as useContext3,
+  useEffect as useEffect6,
+  useRef as useRef12,
+  useState as useState13
+} from "react";
+import {
+  loadingApplicationJson,
+  LocalLayoutPersistenceManager,
+  resolveJSONPath,
+  defaultApplicationJson
+} from "@vuu-ui/vuu-layout";
+
+// ../vuu-popups/src/dialog/Dialog.tsx
+import { Scrim } from "@salt-ds/lab";
+import cx6 from "classnames";
+import { useCallback as useCallback4, useRef as useRef3 } from "react";
+
+// ../vuu-popups/src/portal/Portal.tsx
+import { useLayoutEffect, useRef as useRef2, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+function getContainer(container) {
+  return typeof container === "function" ? container() : container;
+}
+var DEFAULT_ID = "vuu-portal-root";
+var Portal = ({
+  children,
+  container: containerProp = document.body,
+  id = DEFAULT_ID,
+  onRender,
+  open = true,
+  themeAttributes
+}) => {
+  var _a;
+  const [mounted, setMounted] = useState4(false);
+  const portalRef = useRef2(null);
+  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
+  const [themeClass, densityClass, dataMode] = useThemeAttributes(themeAttributes);
+  useLayoutEffect(() => {
+    const root = document.getElementById(id);
+    if (root) {
+      portalRef.current = root;
+    } else {
+      portalRef.current = document.createElement("div");
+      portalRef.current.id = id;
+    }
+    const el = portalRef.current;
+    if (!container.contains(el)) {
+      container.appendChild(el);
+    }
+    el.classList.add(themeClass, densityClass);
+    el.dataset.mode = dataMode;
+    setMounted(true);
+  }, [id, container, themeClass, densityClass, dataMode]);
+  useLayoutEffect(() => {
+    requestAnimationFrame(() => {
+      onRender == null ? void 0 : onRender();
+    });
+  }, [onRender]);
+  if (open && mounted && portalRef.current && children) {
+    return createPortal(children, portalRef.current);
+  }
+  return null;
+};
+
+// ../vuu-popups/src/dialog-header/DialogHeader.tsx
+import { Button as Button4, Text as Text2 } from "@salt-ds/core";
+import cx5 from "classnames";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var classBase5 = "vuuDialogHeader";
+var DialogHeader = ({
+  hideCloseButton = false,
+  title,
+  onClose,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsxs7("div", { ...htmlAttributes, className: cx5(classBase5, "vuuToolbarProxy"), children: [
+    /* @__PURE__ */ jsx10(Text2, { className: "dialogHeader", children: title }),
+    !hideCloseButton && /* @__PURE__ */ jsx10(
+      Button4,
+      {
+        onClick: onClose,
+        "data-align": "end",
+        "data-icon": "close",
+        variant: "secondary"
+      },
+      "close"
+    )
+  ] });
+};
+
+// ../vuu-popups/src/dialog/Dialog.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var classBase6 = "vuuDialog";
+var Dialog = ({
+  children,
+  className,
+  isOpen = false,
+  onClose,
+  title,
+  hideCloseButton = false,
+  ...props
+}) => {
+  const root = useRef3(null);
+  const close = useCallback4(() => {
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx11(Portal, { children: /* @__PURE__ */ jsx11(Scrim, { className: `${classBase6}-scrim`, open: isOpen, autoFocusRef: root, children: /* @__PURE__ */ jsxs8("div", { ...props, className: cx6(classBase6, className), ref: root, children: [
+    /* @__PURE__ */ jsx11(
+      DialogHeader,
+      {
+        hideCloseButton,
+        onClose: close,
+        title
+      }
+    ),
+    /* @__PURE__ */ jsx11("div", { className: `${classBase6}-body`, children })
+  ] }) }) });
+};
+
+// ../vuu-popups/src/dialog/useDialog.tsx
+import { useCallback as useCallback5, useState as useState5 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var useDialog = () => {
+  const [dialogState, setDialogState] = useState5();
+  const handleClose = useCallback5(() => {
+    setDialogState(void 0);
+  }, []);
+  const dialog = dialogState ? /* @__PURE__ */ jsx12(
+    Dialog,
+    {
+      className: "vuDialog",
+      isOpen: true,
+      onClose: handleClose,
+      style: { maxHeight: 500 },
+      title: dialogState.title,
+      hideCloseButton: dialogState.hideCloseButton,
+      children: dialogState.content
+    }
+  ) : null;
+  return {
+    dialog,
+    setDialogState
+  };
+};
+
+// ../vuu-popups/src/menu/ContextMenu.tsx
+import { useCallback as useCallback9, useRef as useRef7 } from "react";
+
+// ../vuu-popups/src/menu/MenuList.tsx
+import React5, {
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo4,
+  useRef as useRef5
+} from "react";
+import cx7 from "classnames";
+import { useId } from "@vuu-ui/vuu-layout";
+
+// ../vuu-popups/src/menu/use-keyboard-navigation.ts
+import {
+  useCallback as useCallback6,
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState6
+} from "react";
+
+// ../vuu-popups/src/menu/utils.ts
+var isRoot = (el) => el.closest(`[data-root='true']`) !== null;
+var hasPopup = (el, idx) => {
+  var _a;
+  return el.ariaHasPopup === "true" && ((_a = el.dataset) == null ? void 0 : _a.idx) === `${idx}` || el.querySelector(`:scope > [data-index='${idx}'][aria-haspopup='true']`) !== null;
+};
+
+// ../vuu-popups/src/menu/key-code.ts
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (const set of sets) {
+    for (const element of set) {
+      result.add(element);
+    }
+  }
+  return result;
+}
+var Enter = "Enter";
+var Delete = "Delete";
+var actionKeys = /* @__PURE__ */ new Set([Enter, Delete]);
+var focusKeys = /* @__PURE__ */ new Set(["Tab"]);
+var arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+var verticalNavigationKeys = /* @__PURE__ */ new Set(["Home", "End", "ArrowDown", "ArrowUp"]);
+var horizontalNavigationKeys = /* @__PURE__ */ new Set([
+  "Home",
+  "End",
+  "ArrowRight",
+  "ArrowLeft"
+]);
+var functionKeys = /* @__PURE__ */ new Set([
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12"
+]);
+var specialKeys = union(
+  actionKeys,
+  horizontalNavigationKeys,
+  verticalNavigationKeys,
+  arrowLeftRightKeys,
+  functionKeys,
+  focusKeys
+);
+var isNavigationKey = ({ key }, orientation = "vertical") => {
+  const navigationKeys = orientation === "vertical" ? verticalNavigationKeys : horizontalNavigationKeys;
+  return navigationKeys.has(key);
+};
+
+// ../vuu-popups/src/menu/use-keyboard-navigation.ts
+import { isValidNumber } from "@vuu-ui/vuu-utils";
+var useKeyboardNavigation = ({
+  autoHighlightFirstItem = false,
+  count,
+  defaultHighlightedIdx,
+  highlightedIndex: highlightedIndexProp,
+  onActivate,
+  onHighlight,
+  // onKeyDown,
+  onCloseMenu,
+  onOpenMenu
+}) => {
+  var _a;
+  if (isValidNumber(highlightedIndexProp) && isValidNumber(defaultHighlightedIdx)) {
+    throw Error(
+      "useKeyboardNavigation do not pass values for both highlightedIndex and defaultHighlightedIdx"
+    );
+  }
+  const controlledHighlighting = isValidNumber(highlightedIndexProp);
+  const highlightedIndexRef = useRef4(
+    (_a = defaultHighlightedIdx != null ? defaultHighlightedIdx : highlightedIndexProp) != null ? _a : autoHighlightFirstItem ? 0 : -1
+  );
+  const [, forceRender] = useState6(null);
+  const setHighlightedIdx = useCallback6(
+    (idx) => {
+      highlightedIndexRef.current = idx;
+      onHighlight == null ? void 0 : onHighlight(idx);
+      forceRender({});
+    },
+    [onHighlight]
+  );
+  const setHighlightedIndex = useCallback6(
+    (idx) => {
+      if (idx !== highlightedIndexRef.current) {
+        if (!controlledHighlighting) {
+          setHighlightedIdx(idx);
+        }
+      }
+    },
+    [controlledHighlighting, setHighlightedIdx]
+  );
+  const keyBoardNavigation = useRef4(true);
+  const ignoreFocus = useRef4(false);
+  const setIgnoreFocus = (value) => ignoreFocus.current = value;
+  const highlightedIndex = controlledHighlighting ? highlightedIndexProp : highlightedIndexRef.current;
+  const navigateChildldItems = useCallback6(
+    (e) => {
+      const nextIdx = nextItemIdx(count, e.key, highlightedIndexRef.current);
+      if (nextIdx !== highlightedIndexRef.current) {
+        setHighlightedIndex(nextIdx);
+      }
+    },
+    [count, setHighlightedIndex]
+  );
+  const handleKeyDown = useCallback6(
+    (e) => {
+      if (isNavigationKey(e)) {
+        e.preventDefault();
+        e.stopPropagation();
+        keyBoardNavigation.current = true;
+        navigateChildldItems(e);
+      } else if ((e.key === "ArrowRight" || e.key === "Enter") && hasPopup(e.target, highlightedIndex)) {
+        const menuEl = e.target;
+        const menuItemEl = menuEl.querySelector(
+          `:scope > [data-index='${highlightedIndex}']`
+        );
+        if (menuItemEl) {
+          onOpenMenu == null ? void 0 : onOpenMenu(menuItemEl, true);
+        }
+      } else if (e.key === "ArrowLeft" && !isRoot(e.target)) {
+        onCloseMenu(highlightedIndex);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        onActivate && onActivate(highlightedIndex);
+      } else if (e.key === "Tab") {
+        onCloseMenu(-1);
+      }
+    },
+    [
+      highlightedIndex,
+      navigateChildldItems,
+      onActivate,
+      onCloseMenu,
+      onOpenMenu
+    ]
+  );
+  const listProps = useMemo2(
+    () => ({
+      onFocus: () => {
+        if (highlightedIndex === -1) {
+          setHighlightedIdx(0);
+        }
+      },
+      onKeyDown: handleKeyDown,
+      onMouseDownCapture: () => {
+        keyBoardNavigation.current = false;
+        setIgnoreFocus(true);
+      },
+      // onMouseEnter would seem less expensive but it misses some cases
+      onMouseMove: () => {
+        if (keyBoardNavigation.current) {
+          keyBoardNavigation.current = false;
+        }
+      },
+      onMouseLeave: () => {
+        keyBoardNavigation.current = true;
+        setIgnoreFocus(false);
+        setHighlightedIndex(-1);
+      }
+    }),
+    [handleKeyDown, highlightedIndex, setHighlightedIdx, setHighlightedIndex]
+  );
+  return {
+    focusVisible: keyBoardNavigation.current ? highlightedIndex : -1,
+    controlledHighlighting,
+    highlightedIndex,
+    setHighlightedIndex,
+    // keyBoardNavigation,
+    listProps,
+    setIgnoreFocus
+  };
+};
+function nextItemIdx(count, key, idx) {
+  if (key === "ArrowUp") {
+    if (idx > 0) {
+      return idx - 1;
+    } else {
+      return idx;
+    }
+  } else {
+    if (idx === null) {
+      return 0;
+    } else if (idx === count - 1) {
+      return idx;
+    } else {
+      return idx + 1;
+    }
+  }
+}
+
+// ../vuu-popups/src/menu/use-items-with-ids-next.ts
+import React4, { useCallback as useCallback7, useMemo as useMemo3 } from "react";
+var isMenuItemGroup = (child) => child.type === MenuItemGroup || !!child.props["data-group"];
+var getLabelFromChildren = (children) => {
+  if (Array.isArray(children) && isMenuItemLabel(children[0])) {
+    return children[0];
+  }
+};
+var assignId = (child, path, group, hasSeparator = false) => {
+  const {
+    props: { children }
+  } = child;
+  return {
+    childWithId: React4.cloneElement(child, {
+      hasSeparator,
+      id: `${path}`,
+      key: path,
+      children: group ? getLabelFromChildren(children) : children
+    }),
+    grandChildren: group ? children : void 0
+  };
+};
+var useItemsWithIdsNext = (childrenProp, rootId) => {
+  const normalizeChildren = useCallback7(() => {
+    const collectChildren = (children, path = rootId, menus2 = {}, actions2 = {}) => {
+      const list = menus2[path] = [];
+      let idx = 0;
+      let hasSeparator = false;
+      React4.Children.forEach(children, (child) => {
+        if (isMenuItemLabel(child)) {
+        } else if (child.type === Separator) {
+          hasSeparator = true;
+        } else {
+          const hasChildItems = isMenuItemGroup(child);
+          const childPath = `${path}-${idx}`;
+          const {
+            props: { action, options }
+          } = child;
+          const { childWithId, grandChildren } = assignId(
+            child,
+            childPath,
+            hasChildItems,
+            hasSeparator
+          );
+          list.push(childWithId);
+          if (grandChildren) {
+            collectChildren(grandChildren, childPath, menus2, actions2);
+          } else {
+            actions2[childPath] = { action, options };
+          }
+          idx += 1;
+          hasSeparator = false;
+        }
+      });
+      return [menus2, actions2];
+    };
+    return collectChildren(childrenProp);
+  }, [rootId, childrenProp]);
+  const [menus, actions] = useMemo3(
+    () => normalizeChildren(),
+    [normalizeChildren]
+  );
+  return [menus, actions];
+};
+
+// ../vuu-popups/src/menu/MenuList.tsx
+import { Fragment as Fragment3, jsx as jsx13 } from "react/jsx-runtime";
+var classBase7 = "vuuMenuList";
+var Separator = () => /* @__PURE__ */ jsx13("li", { className: "vuuMenuItem-divider" });
+var MenuItemGroup = () => null;
+var MenuItem = ({
+  children,
+  idx,
+  options,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx13("div", { ...props, children });
+};
+var MenuItemLabel = ({ children }) => /* @__PURE__ */ jsx13(Fragment3, { children });
+MenuItemLabel.displayName = "MenuItemLabel";
+MenuItem.Label = MenuItemLabel;
+var getDisplayName = (item) => React5.isValidElement(item) && typeof item.type !== "string" && "displayName" in item.type ? item.type.displayName : void 0;
+var isMenuItemLabel = (item) => getDisplayName(item) === "MenuItemLabel";
+var hasIcon = (child) => child.props["data-icon"];
+var MenuList = ({
+  activatedByKeyboard,
+  childMenuShowing,
+  children,
+  className,
+  defaultHighlightedIdx,
+  highlightedIdx: highlightedIdxProp,
+  id: idProp,
+  isRoot: isRoot2,
+  listItemProps,
+  onHighlightMenuItem,
+  onActivate,
+  onCloseMenu,
+  openMenu: onOpenMenu,
+  ...props
+}) => {
+  const id = useId(idProp);
+  const root = useRef5(null);
+  const mapIdxToId = useMemo4(() => /* @__PURE__ */ new Map(), []);
+  const handleActivate = (idx) => {
+    var _a;
+    const el = (_a = root.current) == null ? void 0 : _a.querySelector(`:scope > [data-index='${idx}']`);
+    (el == null ? void 0 : el.id) && (onActivate == null ? void 0 : onActivate(el.id));
+  };
+  const { focusVisible, highlightedIndex, listProps } = useKeyboardNavigation({
+    count: React5.Children.count(children),
+    defaultHighlightedIdx,
+    highlightedIndex: highlightedIdxProp,
+    onActivate: handleActivate,
+    onHighlight: onHighlightMenuItem,
+    onOpenMenu,
+    onCloseMenu
+  });
+  const appliedFocusVisible = childMenuShowing == void 0 ? focusVisible : -1;
+  useLayoutEffect2(() => {
+    var _a;
+    if (childMenuShowing === void 0 && activatedByKeyboard) {
+      (_a = root.current) == null ? void 0 : _a.focus();
+    }
+  }, [activatedByKeyboard, childMenuShowing]);
+  const getActiveDescendant = () => highlightedIndex === void 0 || highlightedIndex === -1 ? void 0 : mapIdxToId.get(highlightedIndex);
+  function renderContent() {
+    const propsCommonToAllListItems = {
+      ...listItemProps,
+      role: "menuitem"
+    };
+    const maybeIcon = (childElement, withIcon, iconName) => withIcon ? [
+      /* @__PURE__ */ jsx13(
+        "span",
+        {
+          className: "vuuIconContainer",
+          "data-icon": iconName
+        },
+        "icon"
+      )
+    ].concat(childElement) : childElement;
+    function addClonedChild(list, child, idx, withIcon) {
+      var _a;
+      const {
+        children: children2,
+        className: className2,
+        "data-icon": iconName,
+        id: itemId,
+        hasSeparator,
+        label,
+        ...props2
+      } = child.props;
+      const hasSubMenu = isMenuItemGroup(child);
+      const subMenuShowing = hasSubMenu && childMenuShowing === itemId;
+      const ariaControls = subMenuShowing ? `${id}-${itemId}` : void 0;
+      list.push(
+        /* @__PURE__ */ jsx13(
+          MenuItem,
+          {
+            ...props2,
+            ...propsCommonToAllListItems,
+            ...getMenuItemProps(
+              itemId,
+              idx,
+              (_a = child.key) != null ? _a : itemId,
+              highlightedIndex,
+              appliedFocusVisible,
+              className2,
+              hasSeparator
+            ),
+            "aria-controls": ariaControls,
+            "aria-haspopup": hasSubMenu || void 0,
+            "aria-expanded": subMenuShowing || void 0,
+            children: hasSubMenu ? maybeIcon(label != null ? label : children2, withIcon, iconName) : maybeIcon(children2, withIcon, iconName)
+          }
+        )
+      );
+    }
+    const listItems = [];
+    if (children.length > 0) {
+      const withIcon = children.some(hasIcon);
+      children.forEach((child, idx) => {
+        addClonedChild(listItems, child, idx, withIcon);
+      });
+    }
+    return listItems;
+  }
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      ...props,
+      ...listProps,
+      "aria-activedescendant": getActiveDescendant(),
+      className: cx7(classBase7, className, {
+        [`${classBase7}-childMenuShowing`]: childMenuShowing !== void 0
+      }),
+      "data-root": isRoot2 || void 0,
+      id,
+      ref: root,
+      role: "menu",
+      children: renderContent()
+    }
+  );
+};
+var getMenuItemProps = (itemId, idx, key, highlightedIdx, focusVisible, className, hasSeparator) => ({
+  id: `menuitem-${itemId}`,
+  key: key != null ? key : idx,
+  "data-index": idx,
+  "data-highlighted": idx === highlightedIdx || void 0,
+  className: cx7("vuuMenuItem", className, {
+    "vuuMenuItem-separator": hasSeparator,
+    focusVisible: focusVisible === idx
+  })
+});
+MenuList.displayName = "MenuList";
+
+// ../vuu-popups/src/menu/use-cascade.ts
+import {
+  useCallback as useCallback8,
+  useMemo as useMemo5,
+  useRef as useRef6,
+  useState as useState7
+} from "react";
+
+// ../vuu-popups/src/menu/list-dom-utils.ts
+var closestListItem = (el) => el == null ? void 0 : el.closest("[data-index],[aria-posinset]");
+
+// ../vuu-popups/src/menu/use-cascade.ts
+var nudge = (menus, distance, pos) => {
+  return menus.map(
+    (m, i) => i === menus.length - 1 ? {
+      ...m,
+      [pos]: m[pos] - distance
+    } : m
+  );
+};
+var nudgeLeft = (menus, distance) => nudge(menus, distance, "left");
+var nudgeUp = (menus, distance) => nudge(menus, distance, "top");
+var flipSides = (id, menus) => {
+  const [parentMenu, menu] = menus.slice(-2);
+  const el = document.getElementById(`${id}-${menu.id}`);
+  if (el === null) {
+    throw Error(`useCascade.flipSides element with id ${menu.id} not found`);
+  }
+  const { width } = el.getBoundingClientRect();
+  return menus.map(
+    (m) => m === menu ? {
+      ...m,
+      left: parentMenu.left - (width - 2)
+    } : m
+  );
+};
+var getPosition = (el, openMenus) => {
+  const [{ left, top: menuTop }] = openMenus.slice(-1);
+  const { offsetWidth: width, offsetTop: top } = el;
+  return { left: left + width, top: top + menuTop };
+};
+var getHostMenuId = (id, rootId) => {
+  const pos = id.lastIndexOf("-");
+  if (id.startsWith("menuitem")) {
+    return pos > -1 ? id.slice(9, pos) : rootId;
+  } else {
+    return pos > -1 ? id.slice(0, pos) : rootId;
+  }
+};
+var getTargetMenuId = (id) => id.slice(9);
+var getMenuItemDetails = ({ ariaExpanded, ariaHasPopup, id }, rootId) => {
+  if (id.startsWith("menuitem")) {
+    return {
+      hostMenuId: getHostMenuId(id, rootId),
+      targetMenuId: getTargetMenuId(id),
+      menuItemId: id,
+      isGroup: ariaHasPopup === "true",
+      isOpen: ariaExpanded === "true"
+    };
+  } else {
+    throw Error(`getMenuItemDetails #${id} is not a menuitem`);
+  }
+};
+var useCascade = ({
+  id: rootId,
+  onActivate,
+  onMouseEnterItem,
+  position: { x: posX, y: posY }
+}) => {
+  const [, forceRefresh] = useState7({});
+  const openMenus = useRef6([
+    { id: rootId, left: posX, top: posY }
+  ]);
+  const menuIsOpen = useCallback8(
+    (menuId) => openMenus.current.findIndex((menu) => menu.id === menuId) !== -1,
+    []
+  );
+  const getOpenMenuStatus = useCallback8((menuId) => {
+    const state = menuState.current[menuId];
+    if (state === void 0) {
+      throw Error(`getOpenMenuState no entry for menu ${menuId}`);
+    }
+    return state;
+  }, []);
+  const setOpenMenus = useCallback8((menus) => {
+    openMenus.current = menus;
+    forceRefresh({});
+  }, []);
+  const menuOpenPendingTimeout = useRef6();
+  const menuClosePendingTimeout = useRef6();
+  const menuState = useRef6({ [rootId]: "no-popup" });
+  const openMenu = useCallback8(
+    (hostMenuId = rootId, targetMenuId, itemId = null) => {
+      if (hostMenuId === rootId && itemId === null) {
+        setOpenMenus([{ id: rootId, left: posX, top: posY }]);
+      } else {
+        menuState.current[hostMenuId] = "popup-open";
+        const el = document.getElementById(itemId);
+        if (el !== null) {
+          const { left, top } = getPosition(el, openMenus.current);
+          setOpenMenus(
+            openMenus.current.concat({ id: targetMenuId, left, top })
+          );
+        } else {
+          throw Error(`openMenu no menuItem ${itemId}`);
+        }
+      }
+    },
+    [rootId, posX, posY, setOpenMenus]
+  );
+  const closeMenu = useCallback8(
+    (menuId) => {
+      if (menuId === rootId) {
+        setOpenMenus([]);
+      } else {
+        const menus = openMenus.current.slice();
+        const lastMenu = menus.pop();
+        menuState.current[lastMenu.id] = "no-popup";
+        const parentMenu = menus.at(-1);
+        if (parentMenu) {
+          menuState.current[parentMenu.id] = "no-popup";
+        }
+        setOpenMenus(menus);
+      }
+    },
+    [rootId, setOpenMenus]
+  );
+  const closeMenus = useCallback8(
+    (menuItemId) => {
+      const menus = openMenus.current.slice();
+      const menuItemMenuId = menuItemId.slice(9);
+      let { id: lastMenuId } = menus.at(-1);
+      while (menus.length > 1 && !menuItemMenuId.startsWith(lastMenuId)) {
+        const parentMenuId = getHostMenuId(lastMenuId, rootId);
+        menus.pop();
+        menuState.current[lastMenuId] = "no-popup";
+        menuState.current[parentMenuId] = "no-popup";
+        ({ id: lastMenuId } = menus[menus.length - 1]);
+      }
+      if (menus.length < openMenus.current.length) {
+        setOpenMenus(menus);
+      }
+    },
+    [rootId, setOpenMenus]
+  );
+  const clearAnyScheduledOpenTasks = useCallback8(() => {
+    if (menuOpenPendingTimeout.current) {
+      clearTimeout(menuOpenPendingTimeout.current);
+      menuOpenPendingTimeout.current = void 0;
+    }
+  }, []);
+  const scheduleOpen = useCallback8(
+    (hostMenuId, targetMenuId, menuItemId, delay = 300) => {
+      clearAnyScheduledOpenTasks();
+      menuOpenPendingTimeout.current = window.setTimeout(() => {
+        closeMenus(menuItemId);
+        menuState.current[hostMenuId] = "popup-open";
+        menuState.current[targetMenuId] = "no-popup";
+        openMenu(hostMenuId, targetMenuId, menuItemId);
+      }, delay);
+    },
+    [clearAnyScheduledOpenTasks, closeMenus, openMenu]
+  );
+  const scheduleClose = useCallback8(
+    (hostMenuId, openMenuId, itemId) => {
+      menuState.current[openMenuId] = "pending-close";
+      menuClosePendingTimeout.current = window.setTimeout(() => {
+        closeMenus(itemId);
+      }, 400);
+    },
+    [closeMenus]
+  );
+  const handleRender = useCallback8(() => {
+    const { current: menus } = openMenus;
+    const menu = menus.at(-1);
+    const el = menu ? document.getElementById(menu.id) : void 0;
+    if (el) {
+      const { right, bottom } = el.getBoundingClientRect();
+      const { clientHeight, clientWidth } = document.body;
+      if (right > clientWidth) {
+        const newMenus = menus.length > 1 ? flipSides(rootId, menus) : nudgeLeft(menus, right - clientWidth);
+        setOpenMenus(newMenus);
+      } else if (bottom > clientHeight) {
+        const newMenus = nudgeUp(menus, bottom - clientHeight);
+        setOpenMenus(newMenus);
+      }
+      if (typeof el.tabIndex === "number") {
+        el.focus();
+      }
+    }
+  }, [rootId, setOpenMenus]);
+  const triggerChildMenu = useCallback8(
+    (menuItemEl, immediate = false) => {
+      const { hostMenuId, targetMenuId, menuItemId, isGroup, isOpen } = getMenuItemDetails(menuItemEl, rootId);
+      const {
+        current: { [hostMenuId]: state }
+      } = menuState;
+      const delay = immediate ? 0 : void 0;
+      if (state === "no-popup" && isGroup) {
+        menuState.current[hostMenuId] = "popup-pending";
+        scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+      } else if (state === "popup-pending" && !isGroup) {
+        menuState.current[hostMenuId] = "no-popup";
+        clearTimeout(menuOpenPendingTimeout.current);
+        menuOpenPendingTimeout.current = void 0;
+      } else if (state === "popup-pending" && isGroup) {
+        clearTimeout(menuOpenPendingTimeout.current);
+        scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+      } else if (state === "popup-open") {
+        if (menuIsOpen(targetMenuId)) {
+          const menuStatus = getOpenMenuStatus(targetMenuId);
+          closeMenus(menuItemId);
+          switch (menuStatus) {
+            case "pending-close":
+              clearTimeout(menuClosePendingTimeout.current);
+              menuClosePendingTimeout.current = void 0;
+              menuState.current[targetMenuId] = "no-popup";
+              clearAnyScheduledOpenTasks();
+              break;
+            default:
+          }
+        } else {
+          const [parentOfLastOpenedMenu, lastOpenedMenu] = openMenus.current.slice(-2);
+          if (parentOfLastOpenedMenu.id === hostMenuId && menuState.current[lastOpenedMenu.id] !== "pending-close") {
+            scheduleClose(hostMenuId, lastOpenedMenu.id, menuItemId);
+            if (isGroup && !isOpen) {
+              scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+            }
+          } else if (parentOfLastOpenedMenu.id === hostMenuId && isGroup && menuItemId !== lastOpenedMenu.id && menuState.current[lastOpenedMenu.id] === "pending-close") {
+            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+          } else if (isGroup) {
+            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+          } else if (!(menuState.current[lastOpenedMenu.id] === "pending-close")) {
+            closeMenus(menuItemId);
+          }
+        }
+      }
+      if (state === "pending-close") {
+        clearAnyScheduledOpenTasks();
+        clearTimeout(menuClosePendingTimeout.current);
+        menuClosePendingTimeout.current = void 0;
+        menuState.current[hostMenuId] = "popup-open";
+      }
+    },
+    [
+      clearAnyScheduledOpenTasks,
+      closeMenus,
+      getOpenMenuStatus,
+      menuIsOpen,
+      rootId,
+      scheduleClose,
+      scheduleOpen
+    ]
+  );
+  const listItemProps = useMemo5(
+    () => ({
+      onMouseEnter: (evt) => {
+        const menuItemEl = closestListItem(evt.target);
+        triggerChildMenu(menuItemEl);
+        onMouseEnterItem(evt, menuItemEl.id);
+      },
+      onClick: (evt) => {
+        const listItemEl = closestListItem(evt.target);
+        const { isGroup, menuItemId } = getMenuItemDetails(listItemEl, rootId);
+        if (isGroup) {
+          triggerChildMenu(listItemEl);
+        } else {
+          onActivate(menuItemId);
+        }
+      }
+    }),
+    [onActivate, onMouseEnterItem, rootId, triggerChildMenu]
+  );
+  return {
+    closeMenu,
+    handleRender,
+    listItemProps,
+    openMenu: triggerChildMenu,
+    openMenus: openMenus.current
+  };
+};
+
+// ../vuu-popups/src/menu/ContextMenu.tsx
+import { useId as useId2 } from "@vuu-ui/vuu-layout";
+import { Fragment as Fragment4, jsx as jsx14 } from "react/jsx-runtime";
+import { createElement } from "react";
+var noop = () => void 0;
+var ContextMenu = ({
+  PortalProps: PortalProps2,
+  activatedByKeyboard,
+  children: childrenProp,
+  className,
+  id: idProp,
+  onClose = () => void 0,
+  position = { x: 0, y: 0 },
+  style,
+  ...menuListProps
+}) => {
+  const closeHandlerRef = useRef7(onClose);
+  closeHandlerRef.current = onClose;
+  const id = useId2(idProp);
+  const closeMenuRef = useRef7(noop);
+  const [menus, actions] = useItemsWithIdsNext(childrenProp, id);
+  const navigatingWithKeyboard = useRef7(activatedByKeyboard);
+  const handleMouseEnterItem = useCallback9(() => {
+    navigatingWithKeyboard.current = false;
+  }, []);
+  const handleActivate = useCallback9(
+    (menuItemId) => {
+      const actionId = menuItemId.slice(9);
+      const { action, options } = actions[actionId];
+      closeMenuRef.current(id);
+      onClose({
+        type: "menu-action",
+        menuId: action,
+        options
+      });
+    },
+    [actions, id, onClose]
+  );
+  const {
+    closeMenu,
+    listItemProps,
+    openMenu: onOpenMenu,
+    openMenus,
+    handleRender
+  } = useCascade({
+    // FIXME
+    id: `${id}`,
+    onActivate: handleActivate,
+    onMouseEnterItem: handleMouseEnterItem,
+    position
+  });
+  closeMenuRef.current = closeMenu;
+  const handleCloseMenu = () => {
+    navigatingWithKeyboard.current = true;
+    closeMenu();
+  };
+  const handleHighlightMenuItem = () => {
+  };
+  const lastMenu = openMenus.length - 1;
+  const getChildMenuId = (i) => {
+    if (i >= lastMenu) {
+      return void 0;
+    } else {
+      const { id: id2 } = openMenus[i + 1];
+      return id2;
+    }
+  };
+  return /* @__PURE__ */ jsx14(Fragment4, { children: openMenus.map(({ id: menuId, left, top }, i, all) => {
+    const childMenuId = getChildMenuId(i);
+    return /* @__PURE__ */ createElement(Portal, { ...PortalProps2, key: i, onRender: handleRender }, /* @__PURE__ */ jsx14(
+      PopupComponent,
+      {
+        anchorElement: { current: document.body },
+        placement: "absolute",
+        position: { left, top },
+        children: /* @__PURE__ */ createElement(
+          MenuList,
+          {
+            ...menuListProps,
+            activatedByKeyboard: navigatingWithKeyboard.current,
+            childMenuShowing: childMenuId,
+            className,
+            id: menuId,
+            isRoot: i === 0,
+            key: i,
+            listItemProps,
+            onActivate: handleActivate,
+            onHighlightMenuItem: handleHighlightMenuItem,
+            onCloseMenu: handleCloseMenu,
+            openMenu: onOpenMenu,
+            style,
+            tabIndex: i === all.length - 1 ? 0 : void 0
+          },
+          menus[menuId]
+        )
+      }
+    ));
+  }) });
+};
+ContextMenu.displayName = "ContextMenu";
+
+// ../vuu-popups/src/menu/context-menu-provider.tsx
+import { createContext, useCallback as useCallback10, useMemo as useMemo6 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ContextMenuContext = createContext(
+  null
+);
+var Provider = ({
+  children,
+  context,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  const menuBuilders = useMemo6(() => {
+    if ((context == null ? void 0 : context.menuBuilders) && menuBuilder) {
+      return context.menuBuilders.concat(menuBuilder);
+    } else if (menuBuilder) {
+      return [menuBuilder];
+    } else {
+      return (context == null ? void 0 : context.menuBuilders) || [];
+    }
+  }, [context, menuBuilder]);
+  const handleMenuAction = useCallback10(
+    (reason) => {
+      var _a;
+      if (menuActionHandler == null ? void 0 : menuActionHandler(reason)) {
+        return true;
+      }
+      if ((_a = context == null ? void 0 : context.menuActionHandler) == null ? void 0 : _a.call(context, reason)) {
+        return true;
+      }
+    },
+    [context, menuActionHandler]
+  );
+  return /* @__PURE__ */ jsx15(
+    ContextMenuContext.Provider,
+    {
+      value: {
+        menuActionHandler: handleMenuAction,
+        menuBuilders
+      },
+      children
+    }
+  );
+};
+var ContextMenuProvider = ({
+  children,
+  label,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  return /* @__PURE__ */ jsx15(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ jsx15(
+    Provider,
+    {
+      context: parentContext,
+      label,
+      menuActionHandler,
+      menuBuilder,
+      children
+    }
+  ) });
+};
+
+// ../vuu-popups/src/menu/useContextMenu.tsx
+import { isGroupMenuItemDescriptor } from "@vuu-ui/vuu-utils";
+import { cloneElement, useCallback as useCallback12, useContext, useMemo as useMemo7 } from "react";
+
+// ../vuu-popups/src/popup/popup-service.ts
+import cx9 from "classnames";
+import React6, {
+  createElement as createElement2
+} from "react";
+import ReactDOM2 from "react-dom";
+
+// ../vuu-popups/src/portal-deprecated/render-portal.tsx
+import * as ReactDOM from "react-dom";
+import cx8 from "classnames";
+
+// ../vuu-popups/src/popup/Popup.tsx
+import cx10 from "classnames";
+
+// ../vuu-popups/src/popup/useAnchoredPosition.ts
+import { useCallback as useCallback11, useLayoutEffect as useLayoutEffect3, useRef as useRef8, useState as useState8 } from "react";
+var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetTop, minWidth, dimensions) => {
+  const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
+  switch (placement) {
+    case "below":
+      return { left: left + offsetLeft, top: bottom + offsetTop };
+    case "right":
+      return { left: right + offsetLeft, top: top + offsetTop };
+    case "below-center":
+      return { left: left + width / 2 + offsetLeft, top: bottom + offsetTop };
+    case "below-right":
+      return { left, minWidth, top: bottom + offsetTop };
+    case "below-full-width":
+      return {
+        left: left + offsetLeft,
+        minWidth,
+        top: bottom + offsetTop,
+        width
+      };
+    case "center":
+      if (dimensions) {
+        return {
+          left: width / 2 - dimensions.width / 2 + offsetLeft,
+          top: height / 2 - dimensions.height / 2 + offsetTop,
+          visibility: "visible"
+        };
+      } else {
+        return {
+          left: width / 2 + offsetLeft,
+          top: height / 2 + offsetTop,
+          visibility: "hidden"
+        };
+      }
+    default:
+      throw Error(
+        "Popup getPositionRelativeToAnchor only supported placement values are below and right"
+      );
+  }
+};
+var useAnchoredPosition = ({
+  anchorElement,
+  minWidth,
+  offsetLeft = 0,
+  offsetTop = 0,
+  placement,
+  position: positionProp
+}) => {
+  const popupRef = useRef8(null);
+  const [position, setPosition] = useState8(positionProp);
+  useLayoutEffect3(() => {
+    if (placement === "absolute" && positionProp) {
+      setPosition(positionProp);
+    } else if (anchorElement.current) {
+      const dimensions = popupRef.current === null ? void 0 : popupRef.current.getBoundingClientRect();
+      const position2 = getPositionRelativeToAnchor(
+        anchorElement.current,
+        placement,
+        offsetLeft,
+        offsetTop,
+        minWidth,
+        dimensions
+      );
+      setPosition(position2);
+    }
+  }, [anchorElement, minWidth, offsetLeft, offsetTop, placement, positionProp]);
+  const popupCallbackRef = useCallback11(
+    (el) => {
+      popupRef.current = el;
+      if (el && placement === "center" && anchorElement.current) {
+        const { height, width } = el.getBoundingClientRect();
+        setPosition(
+          getPositionRelativeToAnchor(
+            anchorElement.current,
+            placement,
+            offsetLeft,
+            offsetTop,
+            void 0,
+            { height, width }
+          )
+        );
+      }
+    },
+    [anchorElement, offsetLeft, offsetTop, placement]
+  );
+  return {
+    position,
+    popupRef: placement === "center" ? popupCallbackRef : void 0
+  };
+};
+
+// ../vuu-popups/src/popup/Popup.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var PopupComponent = ({
+  children,
+  className,
+  anchorElement,
+  minWidth,
+  placement,
+  position: positionProp
+}) => {
+  const { popupRef, position } = useAnchoredPosition({
+    anchorElement,
+    minWidth,
+    placement,
+    position: positionProp
+  });
+  return position === void 0 ? null : /* @__PURE__ */ jsx16("div", { className: cx10(`vuuPortal`, className), ref: popupRef, style: position, children });
+};
+
+// ../vuu-popups/src/menu/useContextMenu.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+
+// ../vuu-popups/src/popup-menu/PopupMenu.tsx
+import {
+  useCallback as useCallback13,
+  useRef as useRef9,
+  useState as useState9
+} from "react";
+import cx11 from "classnames";
+import { Button as Button5 } from "@salt-ds/core";
+import { useId as useId3 } from "@vuu-ui/vuu-layout";
+import { jsx as jsx18 } from "react/jsx-runtime";
+
+// ../vuu-popups/src/prompt/Prompt.tsx
+import { Button as Button6 } from "@salt-ds/core";
+import cx12 from "classnames";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef10 } from "react";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+var AnchorBody = { current: document.body };
+
+// ../vuu-popups/src/tooltip/useAnchoredPosition.ts
+import { useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
+
+// ../vuu-popups/src/tooltip/Tooltip.tsx
+import cx13 from "classnames";
+import { jsx as jsx20 } from "react/jsx-runtime";
+
+// ../vuu-popups/src/tooltip/useTooltip.ts
+import { useCallback as useCallback14, useRef as useRef11, useState as useState11 } from "react";
+import { useId as useId4 } from "@vuu-ui/vuu-layout";
+
+// ../vuu-popups/src/notifications/NotificationsProvider.tsx
+import React7, { useState as useState12, useContext as useContext2, useCallback as useCallback15, useEffect as useEffect5 } from "react";
+import classNames from "classnames";
+import { getUniqueId } from "@vuu-ui/vuu-utils";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+var NotificationsContext = React7.createContext({
+  notify: () => "have you forgotten to provide a NotificationProvider?"
+});
+var useNotifications = () => useContext2(NotificationsContext);
+
+// src/layout-management/useLayoutManager.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var _persistenceManager;
+var getPersistenceManager = () => {
+  if (_persistenceManager === void 0) {
+    _persistenceManager = true ? new LocalLayoutPersistenceManager() : new RemoteLayoutPersistenceManager();
+  }
+  return _persistenceManager;
+};
+var LayoutManagementContext = React8.createContext({
+  layoutMetadata: [],
+  saveLayout: () => void 0,
+  // The default Application JSON will be served if no LayoutManagementProvider
+  applicationJson: defaultApplicationJson,
+  saveApplicationLayout: () => void 0,
+  saveApplicationSettings: () => void 0,
+  loadLayoutById: () => void 0
+});
+var ensureLayoutHasTitle = (layout, layoutMetadata) => {
+  var _a;
+  if (((_a = layout.props) == null ? void 0 : _a.title) !== void 0) {
+    return layout;
+  } else {
+    return {
+      ...layout,
+      props: {
+        ...layout.props,
+        title: layoutMetadata.name
+      }
+    };
+  }
+};
+var LayoutManagementProvider = (props) => {
+  const [layoutMetadata, setLayoutMetadata] = useState13([]);
+  const [, forceRefresh] = useState13({});
+  const { notify } = useNotifications();
+  const applicationJSONRef = useRef12(loadingApplicationJson);
+  const setApplicationJSON = useCallback16(
+    (applicationJSON, rerender = true) => {
+      applicationJSONRef.current = applicationJSON;
+      if (rerender) {
+        forceRefresh({});
+      }
+    },
+    []
+  );
+  const setApplicationLayout = useCallback16(
+    (layout, rerender = true) => {
+      setApplicationJSON(
+        {
+          ...applicationJSONRef.current,
+          layout
+        },
+        rerender
+      );
+    },
+    [setApplicationJSON]
+  );
+  const setApplicationSettings = useCallback16(
+    (settings) => {
+      setApplicationJSON(
+        {
+          ...applicationJSONRef.current,
+          settings: {
+            ...applicationJSONRef.current.settings,
+            ...settings
+          }
+        },
+        false
+      );
+    },
+    [setApplicationJSON]
+  );
+  useEffect6(() => {
+    const persistenceManager = getPersistenceManager();
+    persistenceManager.loadMetadata().then((metadata) => {
+      setLayoutMetadata(metadata);
+    }).catch((error2) => {
+      notify({
+        type: "error" /* Error */,
+        header: "Failed to Load Layouts",
+        body: "Could not load list of available layouts"
+      });
+      console.error("Error occurred while retrieving metadata", error2);
+    });
+    persistenceManager.loadApplicationJSON().then((applicationJSON) => {
+      setApplicationJSON(applicationJSON);
+    }).catch((error2) => {
+      notify({
+        type: "error" /* Error */,
+        header: "Failed to Load Layout",
+        body: "Could not load your latest view"
+      });
+      console.error(
+        "Error occurred while retrieving application layout",
+        error2
+      );
+    });
+  }, [notify, setApplicationJSON]);
+  const saveApplicationLayout = useCallback16(
+    (layout) => {
+      setApplicationLayout(layout, false);
+      getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);
+    },
+    [setApplicationLayout]
+  );
+  const saveLayout = useCallback16(
+    (metadata) => {
+      const layoutToSave = resolveJSONPath(
+        applicationJSONRef.current.layout,
+        "#main-tabs.ACTIVE_CHILD"
+      );
+      if (layoutToSave) {
+        getPersistenceManager().createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata)).then((metadata2) => {
+          notify({
+            type: "success" /* Success */,
+            header: "Layout Saved Successfully",
+            body: `${metadata2.name} saved successfully`
+          });
+          setLayoutMetadata((prev) => [...prev, metadata2]);
+        }).catch((error2) => {
+          notify({
+            type: "error" /* Error */,
+            header: "Failed to Save Layout",
+            body: `Failed to save layout ${metadata.name}`
+          });
+          console.error("Error occurred while saving layout", error2);
+        });
+      } else {
+        notify({
+          type: "error" /* Error */,
+          header: "Failed to Save Layout",
+          body: "Cannot save undefined layout"
+        });
+      }
+    },
+    [notify]
+  );
+  const saveApplicationSettings = useCallback16(
+    (settings) => {
+      setApplicationSettings(settings);
+      getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);
+    },
+    [setApplicationSettings]
+  );
+  const loadLayoutById = useCallback16(
+    (id) => {
+      getPersistenceManager().loadLayout(id).then((layoutJson) => {
+        var _a, _b;
+        const { layout: currentLayout } = applicationJSONRef.current;
+        setApplicationLayout({
+          ...currentLayout,
+          children: (currentLayout.children || []).concat(layoutJson),
+          props: {
+            ...currentLayout.props,
+            active: (_b = (_a = currentLayout.children) == null ? void 0 : _a.length) != null ? _b : 0
+          }
+        });
+      }).catch((error2) => {
+        notify({
+          type: "error" /* Error */,
+          header: "Failed to Load Layout",
+          body: "Failed to load the requested layout"
+        });
+        console.error("Error occurred while loading layout", error2);
+      });
+    },
+    [notify, setApplicationLayout]
+  );
+  return /* @__PURE__ */ jsx22(
+    LayoutManagementContext.Provider,
+    {
+      value: {
+        layoutMetadata,
+        saveLayout,
+        applicationJson: applicationJSONRef.current,
+        saveApplicationLayout,
+        saveApplicationSettings,
+        loadLayoutById
+      },
+      children: props.children
+    }
+  );
+};
+var useLayoutManager = () => useContext3(LayoutManagementContext);
+
+// src/layout-management/LayoutList.tsx
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+var classBase8 = "vuuLayoutList";
+var LayoutsList = (props) => {
+  const { layoutMetadata, loadLayoutById } = useLayoutManager();
+  const handleLoadLayout = (layoutId) => {
+    if (layoutId) {
+      loadLayoutById(layoutId);
+    }
+  };
+  const layoutsByGroup = layoutMetadata.reduce((acc, cur) => {
+    if (acc[cur.group]) {
+      return {
+        ...acc,
+        [cur.group]: [...acc[cur.group], cur]
+      };
+    }
+    return {
+      ...acc,
+      [cur.group]: [cur]
+    };
+  }, {});
+  return /* @__PURE__ */ jsxs11("div", { className: classBase8, ...props, children: [
+    /* @__PURE__ */ jsx23("div", { className: `${classBase8}-header`, children: "My Layouts" }),
+    /* @__PURE__ */ jsx23(
+      List,
+      {
+        height: "auto",
+        source: Object.entries(layoutsByGroup),
+        ListItem: ({ item }) => {
+          if (!item)
+            return /* @__PURE__ */ jsx23(Fragment5, {});
+          const [groupName, layoutMetadata2] = item;
+          return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+            /* @__PURE__ */ jsx23("div", { className: `${classBase8}-groupName`, children: groupName }),
+            layoutMetadata2.map((metadata) => /* @__PURE__ */ jsxs11(
+              "div",
+              {
+                className: `${classBase8}-layoutContainer`,
+                onClick: () => handleLoadLayout(metadata == null ? void 0 : metadata.id),
+                children: [
+                  /* @__PURE__ */ jsx23(
+                    "img",
+                    {
+                      className: `${classBase8}-screenshot`,
+                      src: metadata == null ? void 0 : metadata.screenshot
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs11("div", { children: [
+                    /* @__PURE__ */ jsx23("div", { className: `${classBase8}-layoutName`, children: metadata == null ? void 0 : metadata.name }),
+                    /* @__PURE__ */ jsx23("div", { className: `${classBase8}-layoutDetails`, children: /* @__PURE__ */ jsx23("div", { children: `${metadata == null ? void 0 : metadata.user}, ${metadata == null ? void 0 : metadata.created}` }) })
+                  ] })
+                ]
+              },
+              metadata == null ? void 0 : metadata.id
+            ))
+          ] });
+        }
+      }
+    )
+  ] });
+};
+
+// src/left-nav/LeftNav.tsx
+import { VuuLogo as VuuLogo2 } from "@vuu-ui/vuu-icons";
+import { Stack, useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
+import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
+import cx15 from "classnames";
+import { useCallback as useCallback17, useState as useState14 } from "react";
+
+// src/feature-list/FeatureList.tsx
+import { Palette, PaletteItem } from "@vuu-ui/vuu-layout";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+var classBase9 = "vuuFeatureList";
+var FeatureList = ({
+  features,
+  title = "VUU TABLES",
+  ...htmlAttributes
+}) => {
+  const ViewProps2 = {};
+  const listProps = {
+    height: "100%"
+  };
+  return /* @__PURE__ */ jsxs12("div", { ...htmlAttributes, className: classBase9, children: [
+    /* @__PURE__ */ jsx24("div", { className: `${classBase9}-header`, children: title }),
+    /* @__PURE__ */ jsx24("div", { className: `${classBase9}-content`, children: /* @__PURE__ */ jsx24(
+      Palette,
+      {
+        orientation: "vertical",
+        ListProps: listProps,
+        ViewProps: ViewProps2,
+        children: features.map((featureProps, i) => /* @__PURE__ */ jsx24(
+          PaletteItem,
+          {
+            closeable: true,
+            label: featureProps.title,
+            resizeable: true,
+            resize: "defer",
+            header: true,
+            children: /* @__PURE__ */ jsx24(Feature, { ...featureProps })
+          },
+          i
+        ))
+      }
+    ) })
+  ] });
+};
+
+// src/theme-provider/ThemeProvider.tsx
+import {
+  createContext as createContext2,
+  isValidElement,
+  cloneElement as cloneElement2,
+  useContext as useContext4
+} from "react";
+import cx14 from "classnames";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var DEFAULT_DENSITY2 = "medium";
+var DEFAULT_THEME = "salt-theme";
+var DEFAULT_THEME_MODE = "light";
+var ThemeContext = createContext2({
+  density: "high",
+  theme: "vuu",
+  themeMode: "light"
+});
+var DEFAULT_THEME_ATTRIBUTES = [
+  "vuu",
+  "vuu-density-high",
+  "light"
+];
+var useThemeAttributes = (themeAttributes) => {
+  const context = useContext4(ThemeContext);
+  if (themeAttributes) {
+    return [
+      themeAttributes.themeClass,
+      themeAttributes.densityClass,
+      themeAttributes.dataMode
+    ];
+  } else if (context) {
+    return [
+      `${context.theme}-theme`,
+      `${context.theme}-density-${context.density}`,
+      context.themeMode
+    ];
+  }
+  return DEFAULT_THEME_ATTRIBUTES;
+};
+var createThemedChildren = (children, theme, themeMode, density) => {
+  var _a;
+  if (isValidElement(children)) {
+    return cloneElement2(children, {
+      className: cx14(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        (_a = children.props) == null ? void 0 : _a.className,
+        `${theme}-theme`,
+        `${theme}-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)},ze=({applyThemeClasses:e=!1,children:t,theme:o,themeMode:n,density:s})=>{var h,d,g;let{density:r,themeMode:a,theme:l}=eo(_e),i=(h=s!=null?s:r)!=null?h:Jr,c=(d=n!=null?n:a)!=null?d:zr,f=(g=o!=null?o:l)!=null?g:_r,M=e?qr(t,f,c,i):t;return Zr(_e.Provider,{value:{themeMode:c,density:i,theme:f},children:M})};ze.displayName="ThemeProvider";import{jsx as I,jsxs as be}from"react/jsx-runtime";var Q="vuuLeftNav",ts=(e,t)=>e===0?t?"menu-full":"menu-icons":t?"menu-full-content":"menu-icons-content",cm=e=>{let t=Qr(),[o]=G(),{"data-path":n,defaultExpanded:s=!0,defaultActiveTabIndex:r=0,features:a,onActiveChange:l,onTogglePrimaryMenu:i,sizeCollapsed:c=80,sizeContent:f=300,sizeExpanded:M=240,style:h,tableFeatures:d,...g}=e,[p,m]=es({activeTabIndex:r,expanded:s}),P=qe((y,v)=>y===0?v?M:c:v?M+f:c+f,[c,f,M]),S=qe(y=>{let{activeTabIndex:v,expanded:C}=p;if(m({activeTabIndex:y,expanded:C}),y===0||v===0){let b=P(y,C);t({type:"layout-resize",path:"#vuu-side-panel",size:b})}l==null||l(y)},[t,P,p,l]),w=ts(p.activeTabIndex,p.expanded),N=qe(()=>{let{activeTabIndex:y,expanded:v}=p,C=!v;m({activeTabIndex:y,expanded:C}),t({type:"layout-resize",path:"#vuu-side-panel",size:P(y,C)}),i==null||i(C)},[t,P,p,i]),L={...h,"--nav-menu-collapsed-width":`${c}px`,"--nav-menu-expanded-width":`${M}px`,"--nav-menu-content-width":`${f}px`};return be("div",{...g,className:We(Q,`${Q}-${w}`),style:L,children:[be("div",{className:We(`${Q}-menu-primary`,o),"data-mode":"dark",children:[I("div",{className:"vuuLeftNav-logo",children:I(Xr,{})}),I("div",{className:`${Q}-main`,children:be(jr,{activeTabIndex:p.activeTabIndex,animateSelectionThumb:!1,className:`${Q}-Tabstrip`,onActiveChange:S,orientation:"vertical",children:[I(Me,{"data-icon":"demo",label:"DEMO"}),I(Me,{"data-icon":"features",label:"VUU FEATURES"}),I(Me,{"data-icon":"tables",label:"VUU TABLES"}),I(Me,{"data-icon":"layouts",label:"MY LAYOUTS"})]})}),I("div",{className:"vuuLeftNav-buttonBar",children:I("button",{className:We("vuuLeftNav-toggleButton",{"vuuLeftNav-toggleButton-open":w.startsWith("menu-full"),"vuuLeftNav-toggleButton-closed":w.startsWith("menu-icons")}),"data-icon":w.startsWith("menu-full")?"chevron-left":"chevron-right",onClick:N})})]}),be(Yr,{active:p.activeTabIndex-1,className:`${Q}-menu-secondary`,showTabs:!1,children:[I(Je,{features:a,title:"VUU FEATURES"}),I(Je,{features:d,title:"VUU TABLES"}),I("div",{className:"vuuLeftNav-drawer",children:I(jt,{})})]})]})};import{useCallback as j,useEffect as to,useMemo as os,useRef as Ze,useState as oo}from"react";import no from"classnames";import{useIdMemo as ns}from"@salt-ds/core";import{Button as ro}from"@salt-ds/core";import{hasAction as rs,isErrorResponse as ss,RemoteDataSource as is}from"@vuu-ui/vuu-data";import{buildColumnMap as as,isValidNumber as so,shallowEquals as us}from"@vuu-ui/vuu-utils";import{jsx as q,jsxs as Xe}from"react/jsx-runtime";var O="vuuSessionEditingForm",io=(e,t)=>{let o=e.find(n=>n.name===t);if(o)return o;throw Error(`SessionEditingForm, no field '${t}' found`)},ao=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]},U={uninitialised:0,unchanged:1,changed:2,invalid:3};function uo(e,t,o=!1){switch(t){case"int":case"long":{let n=parseInt(e,10);if(so(n))return n;if(o)throw Error("SessionEditingForm getTypedValue");return}case"double":{let n=parseFloat(e);return so(n)?n:void 0}case"boolean":return e==="true";default:return e}}var ls=(e,t)=>{if(e)return e;if(t)return new is({bufferSize:0,table:t.table,columns:t.columns.map(o=>o.name)});throw Error("SessionEditingForm: either a DataSource or a TableSchema must be provided")},Nm=({className:e,config:{fields:t,key:o},dataSource:n,id:s,onClose:r,schema:a,...l})=>{let[i,c]=oo(),[f,M]=oo(""),h=Ze(null),d=Ze(),g=Ze(U.uninitialised),p=os(()=>{let u=E=>{if(T){let x={};for(let R of p.columns)x[R]=E[T[R]];g.current===U.uninitialised&&(g.current=U.unchanged,d.current=x),c(x)}},b=ls(n,a),T=as(b.columns);return b.subscribe({range:{from:0,to:5}},E=>{E.type==="viewport-update"&&E.rows&&(g.current===U.uninitialised?u(E.rows[0]):console.log("what do we do with server updates"))}),b},[n,a]),m=ns(s),P=j(u=>{let[b,T]=ao(u),{type:E}=io(t,b),x=uo(T,E);c((R={})=>{let k={...R,[b]:x},B=us(k,d.current);return g.current=B?U.unchanged:x!==void 0?U.changed:U.invalid,k})},[t]),S=j(u=>{let[b,T]=ao(u),{type:E}=io(t,b),x=i==null?void 0:i[o],R=uo(T,E,!0);typeof x=="string"&&p.menuRpcCall({rowKey:x,field:b,value:R,type:"VP_EDIT_CELL_RPC"})},[p,t,o,i]),w=j(u=>{typeof u=="object"&&u!==null&&"type"in u&&u.type==="CLOSE_DIALOG_ACTION"&&r()},[r]),N=j(async()=>{let u=await p.menuRpcCall({type:"VP_EDIT_SUBMIT_FORM_RPC"});ss(u)?M(u.error):rs(u)&&w(u.action)},[w,p]),L=j(u=>{u.key==="Enter"&&g.current===U.changed&&N()},[N]),y=j(()=>{r()},[r]),v=u=>{var T;let b=String((T=i==null?void 0:i[u.name])!=null?T:"");return u.readonly||u.name===o?q("div",{className:`${O}-fieldValue vuuReadOnly`,children:b}):q("input",{className:`${O}-fieldValue`,"data-field":u.name,onBlur:S,onChange:P,type:"text",value:b,id:`${m}-input-${u.name}`})};to(()=>{if(h.current){let u=h.current.querySelector("input");u&&setTimeout(()=>{u.focus(),u.select()},100)}},[]),to(()=>()=>{p&&p.unsubscribe()},[p]);let C=g.current===U.changed;return Xe("div",{...l,className:no(O,e),children:[f?q("div",{className:`${O}-errorBanner`,"data-icon":"error",title:f,children:"Error, edit(s) not saved"}):void 0,q("div",{className:`${O}-content`,ref:h,onKeyDown:L,children:t.map(u=>{var b;return Xe("div",{className:`${O}-field`,children:[q("label",{className:no(`${O}-fieldLabel`,{[`${O}-required`]:u.required}),htmlFor:`${m}-input-${u.name}`,children:(b=u==null?void 0:u.label)!=null?b:u.description}),v(u)]},u.name)})}),Xe("div",{className:`${O}-buttonbar salt-theme salt-density-high`,children:[q(ro,{type:"submit",variant:"cta",disabled:!C,onClick:N,children:"Submit"}),q(ro,{variant:"secondary",onClick:y,children:"Cancel"})]})]})};import{connectToServer as Ns}from"@vuu-ui/vuu-data";import{DraggableLayout as Rs,LayoutProvider as Hs,loadingApplicationJson as Ds,useLayoutContextMenuItems as As}from"@vuu-ui/vuu-layout";import{logger as Is}from"@vuu-ui/vuu-utils";import ks from"classnames";import{useCallback as Qe,useEffect as Fs,useRef as Mo}from"react";import{Button as cs}from"@salt-ds/core";import lo from"classnames";import{useCallback as ps,useMemo as ds}from"react";import{layoutFromJson as ms,View as fs,useLayoutProviderDispatch as hs}from"@vuu-ui/vuu-layout";import{jsx as xe,jsxs as co}from"react/jsx-runtime";var $="vuuContextPanel",po=({className:e,expanded:t=!1,content:o,overlay:n=!1,title:s})=>{let r=hs(),a=ps(()=>{r({path:"#context-panel",propName:"expanded",propValue:!1,type:"set-prop"})},[r]),l=lo($,e,{[`${$}-expanded`]:t,[`${$}-inline`]:n!==!0,[`${$}-overlay`]:n}),i=ds(()=>o&&t?ms(o,"context-0"):null,[o,t]);return xe("div",{className:lo($,l,{[`${$}-expanded`]:t}),children:co(fs,{className:`${$}-inner`,header:!1,id:"context-panel",children:[co("div",{className:`${$}-header`,children:[xe("h2",{className:`${$}-title`,children:s}),xe(cs,{className:`${$}-close`,"data-icon":"close",onClick:a,variant:"secondary"})]}),xe("div",{className:`${$}-content`,children:i})]})})};import{DraggableLayout as Ms,Flexbox as fo}from"@vuu-ui/vuu-layout";import{useMemo as gs}from"react";import ys from"classnames";import{jsx as Cs}from"react/jsx-runtime";var vs="vuuShellSidePanel",mo=({children:e,open:t=!0,sizeClosed:o=90,sizeOpen:n=200,style:s,...r})=>{let a=gs(()=>({...s,"--shell-left-nav-size":t?`${n}px`:`${o}px`}),[t,o,n,s]);return Cs("div",{...r,className:ys(vs),style:a,children:e})};import{jsx as Ye,jsxs as ho}from"react/jsx-runtime";var go=({appHeader:e,LeftSidePanelProps:t})=>ho(fo,{className:"App",style:{flexDirection:"row",height:"100%",width:"100%"},children:[Ye(mo,{...t,id:"vuu-side-panel"}),ho(fo,{className:"vuuShell-content",style:{flex:1,flexDirection:"column"},children:[e,Ye(Ms,{dropTarget:!0,style:{flex:1}},"main-content")]}),Ye(po,{id:"context-panel",overlay:!0})]});import{DockLayout as bs,DraggableLayout as xs,Drawer as Ls,Flexbox as Ps,View as Ts}from"@vuu-ui/vuu-layout";import{useCallback as yo,useRef as Es,useState as ws}from"react";import{jsx as Le,jsxs as Ss}from"react/jsx-runtime";var vo=({appHeader:e,LeftSidePanelProps:t})=>{let o=Es(null),[n,s]=ws(!0),r=yo(l=>{var c;let i=l.target;(c=o.current)!=null&&c.contains(i)||s(!n)},[n]),a=yo(l=>{let i=[];return i.push(Le(Ls,{onClick:r,open:n,position:"left",inline:!0,peekaboo:!0,sizeOpen:200,toggleButton:"end",children:Le(Ts,{className:"vuuShell-palette",id:"vw-app-palette",ref:o,style:{height:"100%"},children:l},"app-palette")},"left-panel")),i},[r,n]);return Ss(Ps,{className:"App",style:{flexDirection:"column",height:"100%",width:"100%"},children:[e,Le(bs,{style:{flex:1},children:a(t==null?void 0:t.children).concat(Le(xs,{dropTarget:!0,style:{width:"100%",height:"100%"}},"main-content"))})]})};var Co=({leftSidePanelLayout:e="inlay",...t})=>(e==="inlay"?vo:go)(t);import{jsx as Pe,jsxs as Bs}from"react/jsx-runtime";var{error:je}=Is("Shell"),$s={},Uf=({LayoutProps:e,LeftSidePanelProps:t=$s,children:o,className:n,leftSidePanelLayout:s,loginUrl:r,saveLocation:a="remote",saveUrl:l,serverUrl:i,user:c,...f})=>{let M=Mo(null),{dialog:h,setDialogState:d}=Pt(),g=Mo("latest"),{applicationJson:p,saveApplicationLayout:m,loadLayoutById:P}=ve(),{buildMenuOptions:S,handleMenuAction:w}=As(d),N=Qe((x,R)=>{try{m(x)}catch{je==null||je("Failed to save layout")}},[m]),L=Qe(x=>{M.current&&(M.current.dataset.mode=x)},[]),y=Qe(x=>{g.current=x,P(x)},[P]);Fs(()=>{i&&c.token&&Ns({authToken:c.token,url:i,username:c.username})},[i,c.token,c.username]);let[v,C,u]=G(),b=ks("vuuShell",n,v,C),T=p===Ds,E=Co({LeftSidePanelProps:t,leftSidePanelLayout:s,appHeader:Pe(dt,{layoutId:g.current,loginUrl:r,user:c,onNavigate:y,onSwitchTheme:L})});return T?null:Pe(ze,{children:Bs(Wt,{menuActionHandler:w,menuBuilder:S,children:[Pe(Hs,{...e,layout:p.layout,onLayoutChange:N,children:Pe(Rs,{className:b,"data-mode":u,ref:M,...f,children:E})}),o||h]})})};var Jf=e=>e==="*",_f=e=>typeof e=="object"&&typeof e.module=="string"&&typeof e.table=="string";import{createContext as Vs,useContext as Os}from"react";import{jsx as et}from"react/jsx-runtime";var Us={},tt=Vs(Us),Ks=({children:e,context:t,inheritedContext:o})=>{let n={...o,...t};return et(tt.Provider,{value:n,children:e})},Xf=({children:e,value:t})=>et(tt.Consumer,{children:o=>et(Ks,{context:t,inheritedContext:o,children:e})}),Yf=()=>Os(tt);import Gs from"classnames";import{ToggleButton as bo,ToggleButtonGroup as Js,useControlled as _s}from"@salt-ds/core";import{useCallback as zs}from"react";import{jsx as xo,jsxs as qs}from"react/jsx-runtime";var Ws="vuuThemeSwitch",u1=({className:e,defaultMode:t,mode:o,onChange:n,...s})=>{let[r,a]=_s({controlled:o,default:t!=null?t:"light",name:"ThemeSwitch",state:"mode"}),l=zs(c=>{let{value:f}=c.target;a(f),n(f)},[n,a]),i=Gs(Ws,e);return qs(Js,{className:i,...s,onChange:l,value:r,children:[xo(bo,{"aria-label":"alert","data-icon":"light",value:"dark"}),xo(bo,{"aria-label":"home","data-icon":"dark",value:"light"})]})};export{dt as AppHeader,ki as ConnectionStatusIcon,po as ContextPanel,Jr as DEFAULT_DENSITY,_r as DEFAULT_THEME,zr as DEFAULT_THEME_MODE,Ji as DensitySwitch,pe as Feature,Je as FeatureList,Yt as LayoutManagementContext,yd as LayoutManagementProvider,jt as LayoutsList,cm as LeftNav,ui as LoginPanel,ba as SaveLayoutPanel,Nm as SessionEditingForm,Uf as Shell,Xf as ShellContextProvider,mo as SidePanel,_e as ThemeContext,ze as ThemeProvider,u1 as ThemeSwitch,di as getAuthDetailsFromCookies,Do as getAuthModeFromCookies,_f as isTableSchema,Jf as isWildcardSchema,pt as logout,Io as redirectToLogin,ve as useLayoutManager,Yf as useShellContext,Co as useShellLayout,G as useThemeAttributes};
+          Wrap elements with a single container`
+    );
+    return children;
+  }
+};
+var ThemeProvider = ({
+  applyThemeClasses = false,
+  children,
+  theme: themeProp,
+  themeMode: themeModeProp,
+  density: densityProp
+}) => {
+  var _a, _b, _c;
+  const {
+    density: inheritedDensity,
+    themeMode: inheritedThemeMode,
+    theme: inheritedTheme
+  } = useContext4(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 = applyThemeClasses ? createThemedChildren(children, theme, themeMode, density) : children;
+  return /* @__PURE__ */ jsx25(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
+};
+ThemeProvider.displayName = "ThemeProvider";
+
+// src/left-nav/LeftNav.tsx
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+var classBase10 = "vuuLeftNav";
+var getDisplayStatus = (activeTabIndex, expanded) => {
+  if (activeTabIndex === 0) {
+    return expanded ? "menu-full" : "menu-icons";
+  } else {
+    return expanded ? "menu-full-content" : "menu-icons-content";
+  }
+};
+var LeftNav = (props) => {
+  const dispatch = useLayoutProviderDispatch();
+  const [themeClass] = useThemeAttributes();
+  const {
+    "data-path": path,
+    defaultExpanded = true,
+    defaultActiveTabIndex = 0,
+    features,
+    onActiveChange,
+    onTogglePrimaryMenu,
+    sizeCollapsed = 80,
+    sizeContent = 300,
+    sizeExpanded = 240,
+    style: styleProp,
+    tableFeatures,
+    ...htmlAttributes
+  } = props;
+  const [navState, setNavState] = useState14({
+    activeTabIndex: defaultActiveTabIndex,
+    expanded: defaultExpanded
+  });
+  const getFullWidth = useCallback17(
+    (tabIndex, expanded) => {
+      if (tabIndex === 0) {
+        return expanded ? sizeExpanded : sizeCollapsed;
+      } else {
+        return expanded ? sizeExpanded + sizeContent : sizeCollapsed + sizeContent;
+      }
+    },
+    [sizeCollapsed, sizeContent, sizeExpanded]
+  );
+  const handleTabSelection = useCallback17(
+    (activeTabIndex) => {
+      const { activeTabIndex: currentIndex, expanded } = navState;
+      const newState = { activeTabIndex, expanded };
+      setNavState(newState);
+      if (activeTabIndex === 0 || currentIndex === 0) {
+        const width = getFullWidth(activeTabIndex, expanded);
+        dispatch({
+          type: "layout-resize",
+          path: "#vuu-side-panel",
+          size: width
+        });
+      }
+      onActiveChange == null ? void 0 : onActiveChange(activeTabIndex);
+    },
+    [dispatch, getFullWidth, navState, onActiveChange]
+  );
+  const displayStatus = getDisplayStatus(
+    navState.activeTabIndex,
+    navState.expanded
+  );
+  const toggleExpanded = useCallback17(() => {
+    const { activeTabIndex, expanded } = navState;
+    const primaryMenuExpanded = !expanded;
+    const newState = { activeTabIndex, expanded: primaryMenuExpanded };
+    setNavState(newState);
+    dispatch({
+      type: "layout-resize",
+      path: "#vuu-side-panel",
+      size: getFullWidth(activeTabIndex, primaryMenuExpanded)
+    });
+    onTogglePrimaryMenu == null ? void 0 : onTogglePrimaryMenu(primaryMenuExpanded);
+  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);
+  const style = {
+    ...styleProp,
+    "--nav-menu-collapsed-width": `${sizeCollapsed}px`,
+    "--nav-menu-expanded-width": `${sizeExpanded}px`,
+    "--nav-menu-content-width": `${sizeContent}px`
+  };
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx15(classBase10, `${classBase10}-${displayStatus}`),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            className: cx15(`${classBase10}-menu-primary`, themeClass),
+            "data-mode": "dark",
+            children: [
+              /* @__PURE__ */ jsx26("div", { className: "vuuLeftNav-logo", children: /* @__PURE__ */ jsx26(VuuLogo2, {}) }),
+              /* @__PURE__ */ jsx26("div", { className: `${classBase10}-main`, children: /* @__PURE__ */ jsxs13(
+                Tabstrip,
+                {
+                  activeTabIndex: navState.activeTabIndex,
+                  animateSelectionThumb: false,
+                  className: `${classBase10}-Tabstrip`,
+                  onActiveChange: handleTabSelection,
+                  orientation: "vertical",
+                  children: [
+                    /* @__PURE__ */ jsx26(Tab, { "data-icon": "demo", label: "DEMO" }),
+                    /* @__PURE__ */ jsx26(Tab, { "data-icon": "features", label: "VUU FEATURES" }),
+                    /* @__PURE__ */ jsx26(Tab, { "data-icon": "tables", label: "VUU TABLES" }),
+                    /* @__PURE__ */ jsx26(Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx26("div", { className: "vuuLeftNav-buttonBar", children: /* @__PURE__ */ jsx26(
+                "button",
+                {
+                  className: cx15("vuuLeftNav-toggleButton", {
+                    "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
+                    "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
+                  }),
+                  "data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
+                  onClick: toggleExpanded
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs13(
+          Stack,
+          {
+            active: navState.activeTabIndex - 1,
+            className: `${classBase10}-menu-secondary`,
+            showTabs: false,
+            children: [
+              /* @__PURE__ */ jsx26(FeatureList, { features, title: "VUU FEATURES" }),
+              /* @__PURE__ */ jsx26(FeatureList, { features: tableFeatures, title: "VUU TABLES" }),
+              /* @__PURE__ */ jsx26("div", { className: "vuuLeftNav-drawer", children: /* @__PURE__ */ jsx26(LayoutsList, {}) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/session-editing-form/SessionEditingForm.tsx
+import {
+  useCallback as useCallback18,
+  useEffect as useEffect7,
+  useMemo as useMemo8,
+  useRef as useRef13,
+  useState as useState15
+} from "react";
+import cx16 from "classnames";
+import { useIdMemo } from "@salt-ds/core";
+import { Button as Button7 } from "@salt-ds/core";
+import {
+  hasAction,
+  isErrorResponse,
+  RemoteDataSource
+} from "@vuu-ui/vuu-data";
+import {
+  buildColumnMap,
+  isValidNumber as isValidNumber2,
+  shallowEquals
+} from "@vuu-ui/vuu-utils";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+var classBase11 = "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 (isValidNumber2(typedValue)) {
+        return typedValue;
+      } else if (throwIfUndefined) {
+        throw Error("SessionEditingForm getTypedValue");
+      } else {
+        return void 0;
+      }
+    }
+    case "double": {
+      const typedValue = parseFloat(value);
+      if (isValidNumber2(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] = useState15();
+  const [errorMessage, setErrorMessage] = useState15("");
+  const formContentRef = useRef13(null);
+  const initialDataRef = useRef13();
+  const dataStatusRef = useRef13(Status.uninitialised);
+  const dataSource = useMemo8(() => {
+    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 = useCallback18(
+    (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 = useCallback18(
+    (evt) => {
+      const [field, value] = getFieldNameAndValue(evt);
+      const { type } = getField(fields, field);
+      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 applyAction = useCallback18(
+    (action) => {
+      if (typeof action === "object" && action !== null) {
+        if ("type" in action && action.type === "CLOSE_DIALOG_ACTION") {
+          onClose();
+        }
+      }
+    },
+    [onClose]
+  );
+  const handleSubmit = useCallback18(async () => {
+    const response = await dataSource.menuRpcCall({
+      type: "VP_EDIT_SUBMIT_FORM_RPC"
+    });
+    if (isErrorResponse(response)) {
+      setErrorMessage(response.error);
+    } else if (hasAction(response)) {
+      applyAction(response.action);
+    }
+  }, [applyAction, dataSource]);
+  const handleKeyDown = useCallback18(
+    (evt) => {
+      if (evt.key === "Enter" && dataStatusRef.current === Status.changed) {
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const handleCancel = useCallback18(() => {
+    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__ */ jsx27("div", { className: `${classBase11}-fieldValue vuuReadOnly`, children: value });
+    } else {
+      return /* @__PURE__ */ jsx27(
+        "input",
+        {
+          className: `${classBase11}-fieldValue`,
+          "data-field": field.name,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          type: "text",
+          value,
+          id: `${id}-input-${field.name}`
+        }
+      );
+    }
+  };
+  useEffect7(() => {
+    if (formContentRef.current) {
+      const firstInput = formContentRef.current.querySelector(
+        "input"
+      );
+      if (firstInput) {
+        setTimeout(() => {
+          firstInput.focus();
+          firstInput.select();
+        }, 100);
+      }
+    }
+  }, []);
+  useEffect7(() => {
+    return () => {
+      if (dataSource) {
+        dataSource.unsubscribe();
+      }
+    };
+  }, [dataSource]);
+  const isDirty = dataStatusRef.current === Status.changed;
+  return /* @__PURE__ */ jsxs14("div", { ...htmlAttributes, className: cx16(classBase11, className), children: [
+    errorMessage ? /* @__PURE__ */ jsx27(
+      "div",
+      {
+        className: `${classBase11}-errorBanner`,
+        "data-icon": "error",
+        title: errorMessage,
+        children: "Error, edit(s) not saved"
+      }
+    ) : void 0,
+    /* @__PURE__ */ jsx27(
+      "div",
+      {
+        className: `${classBase11}-content`,
+        ref: formContentRef,
+        onKeyDown: handleKeyDown,
+        children: fields.map((field) => {
+          var _a;
+          return /* @__PURE__ */ jsxs14("div", { className: `${classBase11}-field`, children: [
+            /* @__PURE__ */ jsx27(
+              "label",
+              {
+                className: cx16(`${classBase11}-fieldLabel`, {
+                  [`${classBase11}-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__ */ jsxs14("div", { className: `${classBase11}-buttonbar salt-theme salt-density-high`, children: [
+      /* @__PURE__ */ jsx27(
+        Button7,
+        {
+          type: "submit",
+          variant: "cta",
+          disabled: !isDirty,
+          onClick: handleSubmit,
+          children: "Submit"
+        }
+      ),
+      /* @__PURE__ */ jsx27(Button7, { variant: "secondary", onClick: handleCancel, children: "Cancel" })
+    ] })
+  ] });
+};
+
+// src/shell.tsx
+import { connectToServer } from "@vuu-ui/vuu-data";
+import {
+  DraggableLayout as DraggableLayout3,
+  LayoutProvider,
+  loadingApplicationJson as loadingApplicationJson2,
+  useLayoutContextMenuItems
+} from "@vuu-ui/vuu-layout";
+import { logger } from "@vuu-ui/vuu-utils";
+import cx19 from "classnames";
+import {
+  useCallback as useCallback21,
+  useEffect as useEffect8,
+  useRef as useRef15
+} from "react";
+
+// src/shell-layouts/context-panel/ContextPanel.tsx
+import { Button as Button8 } from "@salt-ds/core";
+import cx17 from "classnames";
+import { useCallback as useCallback19, useMemo as useMemo9 } from "react";
+import {
+  layoutFromJson,
+  View,
+  useLayoutProviderDispatch as useLayoutProviderDispatch2
+} from "@vuu-ui/vuu-layout";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+var classBase12 = "vuuContextPanel";
+var ContextPanel = ({
+  className: classNameProp,
+  expanded = false,
+  content: contentProp,
+  overlay = false,
+  title
+}) => {
+  const dispatchLayoutAction = useLayoutProviderDispatch2();
+  const handleClose = useCallback19(() => {
+    dispatchLayoutAction({
+      path: "#context-panel",
+      propName: "expanded",
+      propValue: false,
+      type: "set-prop"
+    });
+  }, [dispatchLayoutAction]);
+  const className = cx17(classBase12, classNameProp, {
+    [`${classBase12}-expanded`]: expanded,
+    [`${classBase12}-inline`]: overlay !== true,
+    [`${classBase12}-overlay`]: overlay
+  });
+  const content = useMemo9(
+    () => contentProp && expanded ? layoutFromJson(contentProp, "context-0") : null,
+    [contentProp, expanded]
+  );
+  return /* @__PURE__ */ jsx28(
+    "div",
+    {
+      className: cx17(classBase12, className, {
+        [`${classBase12}-expanded`]: expanded
+      }),
+      children: /* @__PURE__ */ jsxs15(View, { className: `${classBase12}-inner`, header: false, id: "context-panel", children: [
+        /* @__PURE__ */ jsxs15("div", { className: `${classBase12}-header`, children: [
+          /* @__PURE__ */ jsx28("h2", { className: `${classBase12}-title`, children: title }),
+          /* @__PURE__ */ jsx28(
+            Button8,
+            {
+              className: `${classBase12}-close`,
+              "data-icon": "close",
+              onClick: handleClose,
+              variant: "secondary"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx28("div", { className: `${classBase12}-content`, children: content })
+      ] })
+    }
+  );
+};
+
+// src/shell-layouts/useFullHeightLeftPanel.tsx
+import { DraggableLayout, Flexbox } from "@vuu-ui/vuu-layout";
+
+// src/shell-layouts/side-panel/SidePanel.tsx
+import { useMemo as useMemo10 } from "react";
+import cx18 from "classnames";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var classBase13 = "vuuShellSidePanel";
+var SidePanel = ({
+  children,
+  open = true,
+  sizeClosed = 90,
+  sizeOpen = 200,
+  style: styleProp,
+  ...htmlAttributes
+}) => {
+  const style = useMemo10(
+    () => ({
+      ...styleProp,
+      "--shell-left-nav-size": open ? `${sizeOpen}px` : `${sizeClosed}px`
+    }),
+    [open, sizeClosed, sizeOpen, styleProp]
+  );
+  return /* @__PURE__ */ jsx29("div", { ...htmlAttributes, className: cx18(classBase13), style, children });
+};
+
+// src/shell-layouts/useFullHeightLeftPanel.tsx
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+var useFullHeightLeftPanel = ({
+  appHeader,
+  LeftSidePanelProps
+}) => {
+  return /* @__PURE__ */ jsxs16(
+    Flexbox,
+    {
+      className: "App",
+      style: {
+        flexDirection: "row",
+        height: "100%",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx30(SidePanel, { ...LeftSidePanelProps, id: "vuu-side-panel" }),
+        /* @__PURE__ */ jsxs16(
+          Flexbox,
+          {
+            className: "vuuShell-content",
+            style: { flex: 1, flexDirection: "column" },
+            children: [
+              appHeader,
+              /* @__PURE__ */ jsx30(DraggableLayout, { dropTarget: true, style: { flex: 1 } }, "main-content")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx30(ContextPanel, { id: "context-panel", overlay: true })
+      ]
+    }
+  );
+};
+
+// src/shell-layouts/useInlayLeftPanel.tsx
+import {
+  DockLayout,
+  DraggableLayout as DraggableLayout2,
+  Drawer,
+  Flexbox as Flexbox2,
+  View as View2
+} from "@vuu-ui/vuu-layout";
+import { useCallback as useCallback20, useRef as useRef14, useState as useState16 } from "react";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+var useInlayLeftPanel = ({
+  appHeader,
+  LeftSidePanelProps
+}) => {
+  const paletteView = useRef14(null);
+  const [open, setOpen] = useState16(true);
+  const handleDrawerClick = useCallback20(
+    (e) => {
+      var _a;
+      const target = e.target;
+      if (!((_a = paletteView.current) == null ? void 0 : _a.contains(target))) {
+        setOpen(!open);
+      }
+    },
+    [open]
+  );
+  const getDrawers = useCallback20(
+    (leftSidePanel) => {
+      const drawers = [];
+      drawers.push(
+        /* @__PURE__ */ jsx31(
+          Drawer,
+          {
+            onClick: handleDrawerClick,
+            open,
+            position: "left",
+            inline: true,
+            peekaboo: true,
+            sizeOpen: 200,
+            toggleButton: "end",
+            children: /* @__PURE__ */ jsx31(
+              View2,
+              {
+                className: "vuuShell-palette",
+                id: "vw-app-palette",
+                ref: paletteView,
+                style: { height: "100%" },
+                children: leftSidePanel
+              },
+              "app-palette"
+            )
+          },
+          "left-panel"
+        )
+      );
+      return drawers;
+    },
+    [handleDrawerClick, open]
+  );
+  return /* @__PURE__ */ jsxs17(
+    Flexbox2,
+    {
+      className: "App",
+      style: { flexDirection: "column", height: "100%", width: "100%" },
+      children: [
+        appHeader,
+        /* @__PURE__ */ jsx31(DockLayout, { style: { flex: 1 }, children: getDrawers(LeftSidePanelProps == null ? void 0 : LeftSidePanelProps.children).concat(
+          /* @__PURE__ */ jsx31(
+            DraggableLayout2,
+            {
+              dropTarget: true,
+              style: { width: "100%", height: "100%" }
+            },
+            "main-content"
+          )
+        ) })
+      ]
+    }
+  );
+};
+
+// src/shell-layouts/useShellLayout.ts
+var useShellLayout = ({
+  leftSidePanelLayout = "inlay",
+  ...props
+}) => {
+  const useLayoutHook = leftSidePanelLayout === "inlay" ? useInlayLeftPanel : useFullHeightLeftPanel;
+  return useLayoutHook(props);
+};
+
+// src/shell.tsx
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+var { error } = logger("Shell");
+var defaultLeftSidePanel = {};
+var Shell = ({
+  LayoutProps,
+  LeftSidePanelProps = defaultLeftSidePanel,
+  children,
+  className: classNameProp,
+  leftSidePanelLayout,
+  loginUrl,
+  saveLocation = "remote",
+  saveUrl,
+  serverUrl,
+  user,
+  ...htmlAttributes
+}) => {
+  const rootRef = useRef15(null);
+  const { dialog, setDialogState } = useDialog();
+  const layoutId = useRef15("latest");
+  const { applicationJson, saveApplicationLayout, loadLayoutById } = useLayoutManager();
+  const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems(setDialogState);
+  const handleLayoutChange = useCallback21(
+    (layout, layoutChangeReason) => {
+      try {
+        saveApplicationLayout(layout);
+      } catch {
+        error == null ? void 0 : error("Failed to save layout");
+      }
+    },
+    [saveApplicationLayout]
+  );
+  const handleSwitchTheme = useCallback21((mode) => {
+    if (rootRef.current) {
+      rootRef.current.dataset.mode = mode;
+    }
+  }, []);
+  const handleNavigate = useCallback21(
+    (id) => {
+      layoutId.current = id;
+      loadLayoutById(id);
+    },
+    [loadLayoutById]
+  );
+  useEffect8(() => {
+    if (serverUrl && user.token) {
+      connectToServer({
+        authToken: user.token,
+        url: serverUrl,
+        username: user.username
+      });
+    }
+  }, [serverUrl, user.token, user.username]);
+  const [themeClass, densityClass, dataMode] = useThemeAttributes();
+  const className = cx19("vuuShell", classNameProp, themeClass, densityClass);
+  const isLoading = applicationJson === loadingApplicationJson2;
+  const shellLayout = useShellLayout({
+    LeftSidePanelProps,
+    leftSidePanelLayout,
+    appHeader: /* @__PURE__ */ jsx32(
+      AppHeader,
+      {
+        layoutId: layoutId.current,
+        loginUrl,
+        user,
+        onNavigate: handleNavigate,
+        onSwitchTheme: handleSwitchTheme
+      }
+    )
+  });
+  return isLoading ? null : /* @__PURE__ */ jsx32(ThemeProvider, { children: /* @__PURE__ */ jsxs18(
+    ContextMenuProvider,
+    {
+      menuActionHandler: handleMenuAction,
+      menuBuilder: buildMenuOptions,
+      children: [
+        /* @__PURE__ */ jsx32(
+          LayoutProvider,
+          {
+            ...LayoutProps,
+            layout: applicationJson.layout,
+            onLayoutChange: handleLayoutChange,
+            children: /* @__PURE__ */ jsx32(
+              DraggableLayout3,
+              {
+                className,
+                "data-mode": dataMode,
+                ref: rootRef,
+                ...htmlAttributes,
+                children: shellLayout
+              }
+            )
+          }
+        ),
+        children || dialog
+      ]
+    }
+  ) });
+};
+
+// src/shellTypes.ts
+var isWildcardSchema = (schema) => schema === "*";
+var isTableSchema = (schema) => typeof schema === "object" && typeof schema.module === "string" && typeof schema.table === "string";
+
+// src/ShellContextProvider.tsx
+import { createContext as createContext3, useContext as useContext5 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var defaultConfig = {};
+var ShellContext = createContext3(defaultConfig);
+var Provider2 = ({
+  children,
+  context,
+  inheritedContext
+}) => {
+  const mergedContext = {
+    ...inheritedContext,
+    ...context
+  };
+  return /* @__PURE__ */ jsx33(ShellContext.Provider, { value: mergedContext, children });
+};
+var ShellContextProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ jsx33(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ jsx33(Provider2, { context: value, inheritedContext: context, children }) });
+};
+var useShellContext = () => {
+  return useContext5(ShellContext);
+};
+
+// src/theme-switch/ThemeSwitch.tsx
+import cx20 from "classnames";
+import { ToggleButton, ToggleButtonGroup, useControlled } from "@salt-ds/core";
+import { useCallback as useCallback22 } from "react";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+var classBase14 = "vuuThemeSwitch";
+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 handleChangeSecondary = useCallback22(
+    (evt) => {
+      const { value } = evt.target;
+      setMode(value);
+      onChange(value);
+    },
+    [onChange, setMode]
+  );
+  const className = cx20(classBase14, classNameProp);
+  return /* @__PURE__ */ jsxs19(
+    ToggleButtonGroup,
+    {
+      className,
+      ...htmlAttributes,
+      onChange: handleChangeSecondary,
+      value: mode,
+      children: [
+        /* @__PURE__ */ jsx34(ToggleButton, { "aria-label": "alert", "data-icon": "light", value: "dark" }),
+        /* @__PURE__ */ jsx34(ToggleButton, { "aria-label": "home", "data-icon": "dark", value: "light" })
+      ]
+    }
+  );
+};
+export {
+  AppHeader,
+  ConnectionStatusIcon,
+  ContextPanel,
+  DEFAULT_DENSITY2 as DEFAULT_DENSITY,
+  DEFAULT_THEME,
+  DEFAULT_THEME_MODE,
+  DensitySwitch,
+  Feature,
+  FeatureList,
+  LayoutManagementContext,
+  LayoutManagementProvider,
+  LayoutsList,
+  LeftNav,
+  LoginPanel,
+  SaveLayoutPanel,
+  SessionEditingForm,
+  Shell,
+  ShellContextProvider,
+  SidePanel,
+  ThemeContext,
+  ThemeProvider,
+  ThemeSwitch,
+  getAuthDetailsFromCookies,
+  getAuthModeFromCookies,
+  isTableSchema,
+  isWildcardSchema,
+  logout,
+  redirectToLogin,
+  useLayoutManager,
+  useShellContext,
+  useShellLayout,
+  useThemeAttributes
+};
 //# sourceMappingURL=index.js.map