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

package/cjs/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ConnectionStatusIcon: () => ConnectionStatusIcon,
   Feature: () => Feature,
   LoginPanel: () => LoginPanel,
   Shell: () => Shell,
@@ -42,14 +43,52 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/connection-status/ConnectionStatusIcon.tsx
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var ConnectionStatusIcon = ({ connectionStatus, className, element = "span", ...props }) => {
+  const [classBase5, setClassBase] = (0, import_react.useState)("vuuConnectingStatus");
+  (0, import_react.useEffect)(() => {
+    switch (connectionStatus) {
+      case "connected":
+      case "reconnected":
+        setClassBase("vuuActiveStatus");
+        break;
+      case "connecting":
+        setClassBase("vuuConnectingStatus");
+        break;
+      case "disconnected":
+        setClassBase("vuuDisconnectedStatus");
+        break;
+      default:
+        break;
+    }
+  }, [connectionStatus]);
+  const statusIcon = import_react.default.createElement(
+    element,
+    {
+      ...props,
+      className: (0, import_classnames.default)("vuuStatus vuuIcon", classBase5, className)
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vuuStatus-container salt-theme", children: [
+    statusIcon,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vuuStatus-text", children: [
+      "Status: ",
+      connectionStatus.toUpperCase()
+    ] })
+  ] }) });
+};
+
 // src/feature/Feature.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_vuu_layout = require("@vuu-ui/vuu-layout");
 
 // src/feature/ErrorBoundary.jsx
-var import_react = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var ErrorBoundary = class extends import_react.default.Component {
+var import_react2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ErrorBoundary = class extends import_react2.default.Component {
   constructor(props) {
     super(props);
     this.state = { errorMessage: null };
@@ -62,9 +101,9 @@ var ErrorBoundary = class extends import_react.default.Component {
   }
   render() {
     if (this.state.errorMessage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: "Something went wrong." }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: this.state.errorMessage })
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { children: "Something went wrong." }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: this.state.errorMessage })
       ] });
     }
     return this.props.children;
@@ -72,8 +111,8 @@ var ErrorBoundary = class extends import_react.default.Component {
 };
 
 // src/feature/Loader.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Loader = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hwLoader", children: "loading" });
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Loader = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hwLoader", children: "loading" });
 
 // src/feature/css-module-loader.ts
 var importCSS = async (path) => {
@@ -82,7 +121,7 @@ var importCSS = async (path) => {
 };
 
 // src/feature/Feature.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function RawFeature({
   url,
   css,
@@ -97,25 +136,25 @@ function RawFeature({
       ];
     });
   }
-  const LazyFeature = import_react2.default.lazy(() => import(
+  const LazyFeature = import_react3.default.lazy(() => import(
     /* @vite-ignore */
     url
   ));
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, {}), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LazyFeature, { ...props, ...params }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Loader, {}), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LazyFeature, { ...props, ...params }) }) });
 }
-var Feature = import_react2.default.memo(RawFeature);
+var Feature = import_react3.default.memo(RawFeature);
 Feature.displayName = "Feature";
 (0, import_vuu_layout.registerComponent)("Feature", Feature, "view");
 
 // src/login/LoginPanel.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_core = require("@salt-ds/core");
 var import_salt_lab = require("@heswell/salt-lab");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var classBase = "vuuLoginPanel";
 var LoginPanel = ({ onSubmit }) => {
-  const [username, setUserName] = (0, import_react3.useState)("");
-  const [password, setPassword] = (0, import_react3.useState)("");
+  const [username, setUserName] = (0, import_react4.useState)("");
+  const [password, setPassword] = (0, import_react4.useState)("");
   const login = () => {
     onSubmit(username, password);
   };
@@ -126,9 +165,9 @@ var LoginPanel = ({ onSubmit }) => {
     setPassword(value);
   };
   const dataIsValid = username.trim() !== "" && password.trim() !== "";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: classBase, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_salt_lab.FormField, { label: "Username", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_salt_lab.Input, { value: username, id: "text-username", onChange: handleUsername }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_salt_lab.FormField, { label: "Password", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: classBase, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab.FormField, { label: "Username", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab.Input, { value: username, id: "text-username", onChange: handleUsername }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab.FormField, { label: "Password", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_salt_lab.Input,
       {
         type: "password",
@@ -137,7 +176,7 @@ var LoginPanel = ({ onSubmit }) => {
         onChange: handlePassword
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_core.Button,
       {
         className: `${classBase}-login`,
@@ -168,16 +207,16 @@ var logout = (loginUrl) => {
 
 // src/shell.tsx
 var import_vuu_data = require("@vuu-ui/vuu-data");
-var import_react9 = require("react");
+var import_react11 = require("react");
 
 // src/use-layout-config.js
-var import_react4 = require("react");
+var import_react5 = require("react");
 var useLayoutConfig = (user, defaultLayout) => {
-  const [layout, _setLayout] = (0, import_react4.useState)(defaultLayout);
+  const [layout, _setLayout] = (0, import_react5.useState)(defaultLayout);
   const setLayout = (layout2) => {
     _setLayout(layout2);
   };
-  const load = (0, import_react4.useCallback)(
+  const load = (0, import_react5.useCallback)(
     async (id = "latest") => {
       fetch(`api/vui/${user.username}/${id}`, {}).then((response) => {
         return response.ok ? response.json() : defaultLayout;
@@ -187,10 +226,10 @@ var useLayoutConfig = (user, defaultLayout) => {
     },
     [defaultLayout, user.username]
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     load();
   }, [load]);
-  const saveData = (0, import_react4.useCallback)(
+  const saveData = (0, import_react5.useCallback)(
     (data) => {
       fetch(`api/vui/${user.username}`, {
         method: "POST",
@@ -204,7 +243,7 @@ var useLayoutConfig = (user, defaultLayout) => {
     },
     [defaultLayout, user]
   );
-  const loadLayoutById = (0, import_react4.useCallback)(
+  const loadLayoutById = (0, import_react5.useCallback)(
     (id) => {
       load(id);
     },
@@ -215,10 +254,10 @@ var useLayoutConfig = (user, defaultLayout) => {
 var use_layout_config_default = useLayoutConfig;
 
 // src/ShellContextProvider.tsx
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var defaultConfig = {};
-var ShellContext = (0, import_react5.createContext)(defaultConfig);
+var ShellContext = (0, import_react6.createContext)(defaultConfig);
 var Provider = ({
   children,
   context,
@@ -228,24 +267,24 @@ var Provider = ({
     ...inheritedContext,
     ...context
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShellContext.Provider, { value: mergedContext, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ShellContext.Provider, { value: mergedContext, children });
 };
 var ShellContextProvider = ({
   children,
   value
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Provider, { context: value, inheritedContext: context, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Provider, { context: value, inheritedContext: context, children }) });
 };
 var useShellContext = () => {
-  return (0, import_react5.useContext)(ShellContext);
+  return (0, import_react6.useContext)(ShellContext);
 };
 
 // src/shell.tsx
-var import_classnames3 = __toESM(require("classnames"));
+var import_classnames5 = __toESM(require("classnames"));
 var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
 
 // src/app-header/AppHeader.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 
 // src/user-profile/UserProfile.tsx
 var import_core3 = require("@salt-ds/core");
@@ -257,7 +296,7 @@ var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
 var import_salt_lab2 = require("@heswell/salt-lab");
 var import_core2 = require("@salt-ds/core");
 var import_icons = require("@salt-ds/icons");
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/get-layout-history.ts
 var getLayoutHistory = async (user) => {
@@ -270,16 +309,16 @@ var getLayoutHistory = async (user) => {
 };
 
 // src/user-profile/UserPanel.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
   return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
 };
 var HistoryListItem = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab2.ListItem, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_salt_lab2.ListItem, { ...props });
 };
-var UserPanel = (0, import_react6.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
-  const [history, setHistory] = (0, import_react6.useState)([]);
-  (0, import_react6.useEffect)(() => {
+var UserPanel = (0, import_react7.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
+  const [history, setHistory] = (0, import_react7.useState)([]);
+  (0, import_react7.useEffect)(() => {
     async function getHistory() {
       const history2 = await getLayoutHistory(user);
       const sortedHistory = history2.filter((item) => item.id !== "latest").sort(byLastUpdate).map(({ id, lastUpdate }) => ({
@@ -292,7 +331,7 @@ var UserPanel = (0, import_react6.forwardRef)(function UserPanel2({ loginUrl, on
     }
     getHistory();
   }, [user]);
-  const handleHisorySelected = (0, import_react6.useCallback)(
+  const handleHisorySelected = (0, import_react7.useCallback)(
     (evt, selected2) => {
       if (selected2) {
         onNavigate(selected2.id);
@@ -300,12 +339,12 @@ var UserPanel = (0, import_react6.forwardRef)(function UserPanel2({ loginUrl, on
     },
     [onNavigate]
   );
-  const handleLogout = (0, import_react6.useCallback)(() => {
+  const handleLogout = (0, import_react7.useCallback)(() => {
     logout(loginUrl);
   }, [loginUrl]);
   const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_salt_lab2.List,
       {
         ListItem: HistoryListItem,
@@ -315,15 +354,15 @@ var UserPanel = (0, import_react6.forwardRef)(function UserPanel2({ loginUrl, on
         source: history
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core2.Button, { "aria-label": "logout", onClick: handleLogout, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons.ExportIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core2.Button, { "aria-label": "logout", onClick: handleLogout, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons.ExportIcon, {}),
       " Logout"
     ] }) })
   ] });
 });
 
 // src/user-profile/UserProfile.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var UserProfile = ({
   layoutId,
   loginUrl,
@@ -333,9 +372,9 @@ var UserProfile = ({
   const handleNavigate = (id) => {
     onNavigate(id);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_salt_lab3.DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core3.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons2.UserSolidIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_salt_lab3.DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core3.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons2.UserSolidIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       UserPanel,
       {
         layoutId,
@@ -349,10 +388,10 @@ var UserProfile = ({
 
 // src/theme-switch/ThemeSwitch.tsx
 var import_salt_lab4 = require("@heswell/salt-lab");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames2 = __toESM(require("classnames"));
 var import_core4 = require("@salt-ds/core");
-var import_react7 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var classBase2 = "vuuThemeSwitch";
 var modes = ["light", "dark"];
 var ThemeSwitch = ({
@@ -369,7 +408,7 @@ var ThemeSwitch = ({
     state: "mode"
   });
   const selectedIndex = modes.indexOf(mode);
-  const handleChangeSecondary = (0, import_react7.useCallback)(
+  const handleChangeSecondary = (0, import_react8.useCallback)(
     (_evt, index) => {
       const mode2 = modes[index];
       setMode(mode2);
@@ -377,8 +416,8 @@ var ThemeSwitch = ({
     },
     [onChange, setMode]
   );
-  const className = (0, import_classnames.default)(classBase2, classNameProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  const className = (0, import_classnames2.default)(classBase2, classNameProp);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     import_salt_lab4.ToggleButtonGroup,
     {
       className,
@@ -386,7 +425,7 @@ var ThemeSwitch = ({
       onChange: handleChangeSecondary,
       selectedIndex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           import_salt_lab4.ToggleButton,
           {
             "aria-label": "alert",
@@ -394,7 +433,7 @@ var ThemeSwitch = ({
             "data-icon": "light"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           import_salt_lab4.ToggleButton,
           {
             "aria-label": "home",
@@ -408,9 +447,39 @@ var ThemeSwitch = ({
 };
 
 // src/app-header/AppHeader.tsx
-var import_classnames2 = __toESM(require("classnames"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var classBase3 = "vuuAppHeader";
+var import_classnames4 = __toESM(require("classnames"));
+
+// src/density-switch/DensitySwitch.tsx
+var import_salt_lab5 = require("@heswell/salt-lab");
+var import_core5 = require("@salt-ds/core");
+var import_react9 = require("react");
+var import_classnames3 = __toESM(require("classnames"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var classBase3 = "vuuDensitySwitch";
+var densities = ["high", "medium", "low", "touch"];
+var DensitySwitch = ({
+  className: classNameProp,
+  defaultDensity = import_core5.DEFAULT_DENSITY,
+  onDensityChange
+}) => {
+  const handleSelectionChange = (0, import_react9.useCallback)((_event, selectedItem) => {
+    onDensityChange(selectedItem);
+  }, [onDensityChange]);
+  const className = (0, import_classnames3.default)(classBase3, classNameProp);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_salt_lab5.Dropdown,
+    {
+      className,
+      source: densities,
+      defaultSelected: defaultDensity,
+      onSelectionChange: handleSelectionChange
+    }
+  );
+};
+
+// src/app-header/AppHeader.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var classBase4 = "vuuAppHeader";
 var AppHeader = ({
   className: classNameProp,
   layoutId,
@@ -418,17 +487,24 @@ var AppHeader = ({
   onNavigate,
   onSwitchTheme,
   themeMode = "light",
+  onDensitySwitch,
+  density = "medium",
   user,
   ...htmlAttributes
 }) => {
-  const className = (0, import_classnames2.default)(classBase3, classNameProp, "salt-density-medium");
-  const handleSwitchTheme = (0, import_react8.useCallback)(
+  const className = (0, import_classnames4.default)(classBase4, classNameProp, `salt-density-${density}`);
+  const handleSwitchTheme = (0, import_react10.useCallback)(
     (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
     [onSwitchTheme]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("header", { className, ...htmlAttributes, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const handleDensitySwitch = (0, import_react10.useCallback)(
+    (density2) => onDensitySwitch == null ? void 0 : onDensitySwitch(density2),
+    [onDensitySwitch]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { className, ...htmlAttributes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DensitySwitch, { defaultDensity: density, onDensityChange: handleDensitySwitch }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       UserProfile,
       {
         layoutId,
@@ -441,7 +517,7 @@ var AppHeader = ({
 };
 
 // src/shell.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var warningLayout = {
   type: "View",
   props: {
@@ -466,26 +542,32 @@ var Shell = ({
   user,
   ...htmlAttributes
 }) => {
-  const rootRef = (0, import_react9.useRef)(null);
-  const [density] = (0, import_react9.useState)("high");
-  const paletteView = (0, import_react9.useRef)(null);
-  const [open, setOpen] = (0, import_react9.useState)(false);
-  const layoutId = (0, import_react9.useRef)("latest");
+  const rootRef = (0, import_react11.useRef)(null);
+  const [density, setDensity] = (0, import_react11.useState)("medium");
+  const paletteView = (0, import_react11.useRef)(null);
+  const [open, setOpen] = (0, import_react11.useState)(false);
+  const layoutId = (0, import_react11.useRef)("latest");
   const [layout, setLayoutConfig, loadLayoutById] = use_layout_config_default(
     user,
     defaultLayout
   );
-  const handleLayoutChange = (0, import_react9.useCallback)(
+  const handleLayoutChange = (0, import_react11.useCallback)(
     (layout2) => {
       setLayoutConfig(layout2);
     },
     [setLayoutConfig]
   );
-  const handleSwitchTheme = (0, import_react9.useCallback)((mode) => {
+  const handleSwitchTheme = (0, import_react11.useCallback)((mode) => {
     if (rootRef.current) {
       rootRef.current.dataset.mode = mode;
     }
   }, []);
+  const handleDensitySwitch = (0, import_react11.useCallback)(
+    (density2) => {
+      setDensity(density2);
+    },
+    [setDensity]
+  );
   const handleDrawerClick = (e) => {
     var _a;
     const target = e.target;
@@ -493,14 +575,14 @@ var Shell = ({
       setOpen(!open);
     }
   };
-  const handleNavigate = (0, import_react9.useCallback)(
+  const handleNavigate = (0, import_react11.useCallback)(
     (id) => {
       layoutId.current = id;
       loadLayoutById(id);
     },
     [loadLayoutById]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (serverUrl && user.token) {
       (0, import_vuu_data.connectToServer)(serverUrl, user.token);
     }
@@ -509,7 +591,7 @@ var Shell = ({
     const drawers = [];
     if (leftSidePanel) {
       drawers.push(
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_vuu_layout2.Drawer,
           {
             onClick: handleDrawerClick,
@@ -519,7 +601,7 @@ var Shell = ({
             peekaboo: true,
             sizeOpen: 200,
             toggleButton: "end",
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               import_vuu_layout2.View,
               {
                 className: "vuuShell-palette",
@@ -537,7 +619,7 @@ var Shell = ({
     }
     return drawers;
   };
-  const className = (0, import_classnames3.default)(
+  const className = (0, import_classnames5.default)(
     "vuuShell",
     classNameProp,
     "salt-theme",
@@ -545,32 +627,33 @@ var Shell = ({
   );
   return (
     // ShellContext TBD
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ShellContextProvider, { value: void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_vuu_layout2.LayoutProvider, { layout, onLayoutChange: handleLayoutChange, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ShellContextProvider, { value: void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_layout2.LayoutProvider, { layout, onLayoutChange: handleLayoutChange, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_vuu_layout2.DraggableLayout,
         {
           className,
           "data-mode": "light",
           ref: rootRef,
           ...htmlAttributes,
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             import_vuu_layout2.Flexbox,
             {
               className: "App",
               style: { flexDirection: "column", height: "100%", width: "100%" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   AppHeader,
                   {
                     layoutId: layoutId.current,
                     loginUrl,
                     user,
                     onNavigate: handleNavigate,
-                    onSwitchTheme: handleSwitchTheme
+                    onSwitchTheme: handleSwitchTheme,
+                    onDensitySwitch: handleDensitySwitch
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_vuu_layout2.Chest, { style: { flex: 1 }, children: getDrawers().concat(
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_layout2.Chest, { style: { flex: 1 }, children: getDrawers().concat(
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     import_vuu_layout2.DraggableLayout,
                     {
                       dropTarget: true,