@vuu-ui/vuu-shell 0.8.56 → 0.8.58

package/cjs/app-header/AppHeader.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var vuuLayout = require('@vuu-ui/vuu-layout');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
@@ -13,12 +14,8 @@ var AppHeader$1 = require('./AppHeader.css.js');
 const classBase = "vuuAppHeader";
 const AppHeader = ({
   className: classNameProp,
-  layoutId,
   loginUrl,
-  onNavigate,
-  onSwitchTheme,
   themeMode: _,
-  user,
   ...htmlAttributes
 }) => {
   const targetWindow = window.useWindow();
@@ -28,9 +25,23 @@ const AppHeader = ({
     window: targetWindow
   });
   const className = cx(classBase, classNameProp);
+  const dispatchLayoutAction = vuuLayout.useLayoutProviderDispatch();
   const handleLogout = React.useCallback(() => {
     loginUtils.logout(loginUrl);
   }, [loginUrl]);
+  const handleShowSettings = React.useCallback(() => {
+    dispatchLayoutAction({
+      type: "set-props",
+      path: "#context-panel",
+      props: {
+        expanded: true,
+        content: {
+          type: "ApplicationSettings"
+        },
+        title: "Settings"
+      }
+    });
+  }, [dispatchLayoutAction]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     vuuUiControls.Toolbar,
     {
@@ -44,10 +55,18 @@ const AppHeader = ({
           "History ",
           /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "history" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(core.Button, { className: `${classBase}-menuItem`, variant: "secondary", children: [
-          "View ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "settings" })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          core.Button,
+          {
+            className: `${classBase}-menuItem`,
+            onClick: handleShowSettings,
+            variant: "secondary",
+            children: [
+              "Settings ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "settings" })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           core.Button,
           {

package/cjs/app-header/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sources":["../../src/app-header/AppHeader.tsx"],"sourcesContent":["import { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { logout } from \"../login\";\nimport { VuuUser } from \"../shell\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  layoutId: string;\n  loginUrl?: string;\n  onNavigate: (id: string) => void;\n  onSwitchTheme?: (mode: ThemeMode) => void;\n  themeMode?: ThemeMode;\n  user: VuuUser;\n}\n\nexport const AppHeader = ({\n  className: classNameProp,\n  layoutId,\n  loginUrl,\n  onNavigate,\n  onSwitchTheme,\n  themeMode: _,\n  user,\n  ...htmlAttributes\n}: AppHeaderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-app-header\",\n    css: appHeaderCss,\n    window: targetWindow,\n  });\n\n  const className = cx(classBase, classNameProp);\n  // const handleSwitchTheme = useCallback(\n  //   (mode: ThemeMode) => onSwitchTheme?.(mode),\n  //   [onSwitchTheme]\n  // );\n\n  const handleLogout = useCallback(() => {\n    logout(loginUrl);\n  }, [loginUrl]);\n\n  return (\n    <Toolbar\n      alignItems=\"end\"\n      className={className}\n      showSeparators\n      {...htmlAttributes}\n    >\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        Help\n      </Button>\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        History <span data-icon=\"history\" />\n      </Button>\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        View <span data-icon=\"settings\" />\n      </Button>\n      <Button\n        className={`${classBase}-menuItem`}\n        onClick={handleLogout}\n        variant=\"secondary\"\n      >\n        Log out\n      </Button>\n      {/* <ThemeSwitch\n        data-align=\"right\"\n        defaultMode={themeMode}\n        onChange={handleSwitchTheme}\n      /> */}\n      {/* <UserProfile\n        layoutId={layoutId}\n        loginUrl={loginUrl}\n        onNavigate={onNavigate}\n        user={user}\n      /> */}\n    </Toolbar>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","appHeaderCss","useCallback","logout","jsxs","Toolbar","jsx","Button"],"mappings":";;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,cAAA,CAAA;AAUX,MAAM,YAAY,CAAC;AAAA,EACxB,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAW,EAAA,CAAA;AAAA,EACX,IAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAM7C,EAAM,MAAA,YAAA,GAAeC,kBAAY,MAAM;AACrC,IAAAC,iBAAA,CAAO,QAAQ,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EACE,uBAAAC,eAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,KAAA;AAAA,MACX,SAAA;AAAA,MACA,cAAc,EAAA,IAAA;AAAA,MACb,GAAG,cAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,eAAO,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,SAAA,CAAA,EAAA,OAAA,EAAQ,aAAY,QAEhE,EAAA,MAAA,EAAA,CAAA;AAAA,wCACCA,WAAO,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAa,SAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,0BACtDD,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,SAAU,EAAA,CAAA;AAAA,SACpC,EAAA,CAAA;AAAA,wCACCC,WAAO,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAa,SAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,0BACzDD,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,UAAW,EAAA,CAAA;AAAA,SAClC,EAAA,CAAA;AAAA,wBACAA,cAAA;AAAA,UAACC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,OAAS,EAAA,YAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACT,QAAA,EAAA,SAAA;AAAA,WAAA;AAAA,SAED;AAAA,OAAA;AAAA,KAAA;AAAA,GAYF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AppHeader.js","sources":["../../src/app-header/AppHeader.tsx"],"sourcesContent":["import { useLayoutProviderDispatch } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { logout } from \"../login\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  loginUrl?: string;\n  themeMode?: ThemeMode;\n}\n\nexport const AppHeader = ({\n  className: classNameProp,\n  loginUrl,\n  themeMode: _,\n  ...htmlAttributes\n}: AppHeaderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-app-header\",\n    css: appHeaderCss,\n    window: targetWindow,\n  });\n\n  const className = cx(classBase, classNameProp);\n\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n\n  const handleLogout = useCallback(() => {\n    logout(loginUrl);\n  }, [loginUrl]);\n\n  const handleShowSettings = useCallback(() => {\n    dispatchLayoutAction({\n      type: \"set-props\",\n      path: \"#context-panel\",\n      props: {\n        expanded: true,\n        content: {\n          type: \"ApplicationSettings\",\n        },\n        title: \"Settings\",\n      },\n    });\n  }, [dispatchLayoutAction]);\n\n  return (\n    <Toolbar\n      alignItems=\"end\"\n      className={className}\n      showSeparators\n      {...htmlAttributes}\n    >\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        Help\n      </Button>\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        History <span data-icon=\"history\" />\n      </Button>\n      <Button\n        className={`${classBase}-menuItem`}\n        onClick={handleShowSettings}\n        variant=\"secondary\"\n      >\n        Settings <span data-icon=\"settings\" />\n      </Button>\n      <Button\n        className={`${classBase}-menuItem`}\n        onClick={handleLogout}\n        variant=\"secondary\"\n      >\n        Log out\n      </Button>\n    </Toolbar>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","appHeaderCss","useLayoutProviderDispatch","useCallback","logout","jsxs","Toolbar","jsx","Button"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,cAAA,CAAA;AAMX,MAAM,YAAY,CAAC;AAAA,EACxB,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,SAAW,EAAA,CAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAE7C,EAAA,MAAM,uBAAuBC,mCAA0B,EAAA,CAAA;AAEvD,EAAM,MAAA,YAAA,GAAeC,kBAAY,MAAM;AACrC,IAAAC,iBAAA,CAAO,QAAQ,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,kBAAA,GAAqBD,kBAAY,MAAM;AAC3C,IAAqB,oBAAA,CAAA;AAAA,MACnB,IAAM,EAAA,WAAA;AAAA,MACN,IAAM,EAAA,gBAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACL,QAAU,EAAA,IAAA;AAAA,QACV,OAAS,EAAA;AAAA,UACP,IAAM,EAAA,qBAAA;AAAA,SACR;AAAA,QACA,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,KACD,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,oBAAoB,CAAC,CAAA,CAAA;AAEzB,EACE,uBAAAE,eAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,KAAA;AAAA,MACX,SAAA;AAAA,MACA,cAAc,EAAA,IAAA;AAAA,MACb,GAAG,cAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,eAAO,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,SAAA,CAAA,EAAA,OAAA,EAAQ,aAAY,QAEhE,EAAA,MAAA,EAAA,CAAA;AAAA,wCACCA,WAAO,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAa,SAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,0BACtDD,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,SAAU,EAAA,CAAA;AAAA,SACpC,EAAA,CAAA;AAAA,wBACAF,eAAA;AAAA,UAACG,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,OAAS,EAAA,kBAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACT,QAAA,EAAA;AAAA,cAAA,WAAA;AAAA,8BACUD,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,UAAW,EAAA,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACtC;AAAA,wBACAA,cAAA;AAAA,UAACC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,OAAS,EAAA,YAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACT,QAAA,EAAA,SAAA;AAAA,WAAA;AAAA,SAED;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/cjs/application-provider/ApplicationContext.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+
+const Guest = {
+  username: "unknown",
+  token: ""
+};
+const ApplicationContext = React.createContext({
+  changeSetting: (propertyName) => console.log(
+    `Cannot change setting '${propertyName}'.
+Did you forget to declare an ApplicationProvider ?`
+  ),
+  settings: {
+    themeMode: "light"
+  },
+  user: Guest
+});
+
+exports.ApplicationContext = ApplicationContext;
+//# sourceMappingURL=ApplicationContext.js.map

package/cjs/application-provider/ApplicationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationContext.js","sources":["../../src/application-provider/ApplicationContext.tsx"],"sourcesContent":["import type { ThemeMode, VuuUser } from \"@vuu-ui/vuu-utils\";\nimport { createContext } from \"react\";\n\nexport interface CoreSettings {\n  themeMode: ThemeMode;\n}\n\nconst Guest: VuuUser = {\n  username: \"unknown\",\n  token: \"\",\n};\n\nexport interface ApplicationContextProps {\n  changeSetting: (propertyName: string, value: unknown) => void;\n  settings: CoreSettings;\n  user: VuuUser;\n}\n\nexport const ApplicationContext = createContext<ApplicationContextProps>({\n  changeSetting: (propertyName: string) =>\n    console.log(\n      `Cannot change setting '${propertyName}'.\\nDid you forget to declare an ApplicationProvider ?`\n    ),\n  settings: {\n    themeMode: \"light\",\n  },\n  user: Guest,\n});\n"],"names":["createContext"],"mappings":";;;;AAOA,MAAM,KAAiB,GAAA;AAAA,EACrB,QAAU,EAAA,SAAA;AAAA,EACV,KAAO,EAAA,EAAA;AACT,CAAA,CAAA;AAQO,MAAM,qBAAqBA,mBAAuC,CAAA;AAAA,EACvE,aAAA,EAAe,CAAC,YAAA,KACd,OAAQ,CAAA,GAAA;AAAA,IACN,0BAA0B,YAAY,CAAA;AAAA,kDAAA,CAAA;AAAA,GACxC;AAAA,EACF,QAAU,EAAA;AAAA,IACR,SAAW,EAAA,OAAA;AAAA,GACb;AAAA,EACA,IAAM,EAAA,KAAA;AACR,CAAC;;;;"}

package/cjs/application-provider/ApplicationProvider.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ApplicationContext = require('./ApplicationContext.js');
+var core = require('@salt-ds/core');
+
+const ApplicationProvider = ({
+  children,
+  settings: settingsProp,
+  user
+}) => {
+  const context = React.useContext(ApplicationContext.ApplicationContext);
+  const [settings, setSettings] = React.useState(settingsProp ?? context.settings);
+  const changeSetting = React.useCallback((propertyName, value) => {
+    setSettings((s) => ({ ...s, [propertyName]: value }));
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ApplicationContext.ApplicationContext.Provider,
+    {
+      value: {
+        ...context,
+        changeSetting,
+        settings,
+        user: user ?? context.user
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(core.SaltProvider, { theme: "vuu-theme", density: "high", mode: settings.themeMode, children })
+    }
+  );
+};
+const useApplicationSettings = () => {
+  const { changeSetting, settings } = React.useContext(ApplicationContext.ApplicationContext);
+  return { changeSetting, settings };
+};
+
+exports.ApplicationProvider = ApplicationProvider;
+exports.useApplicationSettings = useApplicationSettings;
+//# sourceMappingURL=ApplicationProvider.js.map

package/cjs/application-provider/ApplicationProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { SaltProvider } from \"@salt-ds/core\";\n\nexport interface ApplicationProviderProps\n  extends Partial<ApplicationContextProps> {\n  children: ReactNode;\n}\n\nexport const ApplicationProvider = ({\n  children,\n  settings: settingsProp,\n  user,\n}: ApplicationProviderProps): ReactElement => {\n  const context = useContext(ApplicationContext);\n  const [settings, setSettings] = useState(settingsProp ?? context.settings);\n\n  const changeSetting = useCallback((propertyName: string, value: unknown) => {\n    setSettings((s) => ({ ...s, [propertyName]: value }));\n  }, []);\n\n  return (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        changeSetting,\n        settings,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider theme=\"vuu-theme\" density=\"high\" mode={settings.themeMode}>\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  );\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\nexport const useApplicationSettings = () => {\n  const { changeSetting, settings } = useContext(ApplicationContext);\n  return { changeSetting, settings };\n};\n"],"names":["useContext","ApplicationContext","useState","useCallback","jsx","SaltProvider"],"mappings":";;;;;;;AAkBO,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AACF,CAA8C,KAAA;AAC5C,EAAM,MAAA,OAAA,GAAUA,iBAAWC,qCAAkB,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAIC,cAAS,CAAA,YAAA,IAAgB,QAAQ,QAAQ,CAAA,CAAA;AAEzE,EAAA,MAAM,aAAgB,GAAAC,iBAAA,CAAY,CAAC,YAAA,EAAsB,KAAmB,KAAA;AAC1E,IAAY,WAAA,CAAA,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,YAAY,GAAG,KAAA,EAAQ,CAAA,CAAA,CAAA;AAAA,GACtD,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAAC,cAAA;AAAA,IAACH,qCAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAG,OAAA;AAAA,QACH,aAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA,EAAM,QAAQ,OAAQ,CAAA,IAAA;AAAA,OACxB;AAAA,MAEA,QAAA,kBAAAG,cAAA,CAACC,qBAAa,KAAM,EAAA,WAAA,EAAY,SAAQ,MAAO,EAAA,IAAA,EAAM,QAAS,CAAA,SAAA,EAC3D,QACH,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AAOO,MAAM,yBAAyB,MAAM;AAC1C,EAAA,MAAM,EAAE,aAAA,EAAe,QAAS,EAAA,GAAIL,iBAAWC,qCAAkB,CAAA,CAAA;AACjE,EAAO,OAAA,EAAE,eAAe,QAAS,EAAA,CAAA;AACnC;;;;;"}

package/cjs/application-settings/ApplicationSettingsPanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var applicationSettingsPanelCss = ".vuuApplicationSettingsPanel {\n    height: 100%;\n}";
+
+module.exports = applicationSettingsPanelCss;
+//# sourceMappingURL=ApplicationSettingsPanel.css.js.map

package/cjs/application-settings/ApplicationSettingsPanel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationSettingsPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/application-settings/ApplicationSettingsPanel.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var ApplicationSettingsPanel$1 = require('./ApplicationSettingsPanel.css.js');
+var core = require('@salt-ds/core');
+var ApplicationProvider = require('../application-provider/ApplicationProvider.js');
+
+const classBase = "vuuApplicationSettingsPanel";
+const ApplicationSettingsPanel = () => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-application-settings-panel",
+    css: ApplicationSettingsPanel$1,
+    window: targetWindow
+  });
+  const { changeSetting, settings } = ApplicationProvider.useApplicationSettings();
+  const onChangeToggleButton = React.useCallback(
+    (e) => {
+      const button = vuuUtils.queryClosest(e.target, "button");
+      if (button) {
+        const fieldName = vuuUtils.getFieldName(button);
+        const { value } = button;
+        changeSetting(fieldName, value);
+      }
+    },
+    [changeSetting]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classBase, children: /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "themeMode", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Light or Dark Mode" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      core.ToggleButtonGroup,
+      {
+        onChange: onChangeToggleButton,
+        value: settings.themeMode,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "light", children: "Light" }),
+          /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "dark", children: "Dark" })
+        ]
+      }
+    )
+  ] }) });
+};
+
+exports.ApplicationSettingsPanel = ApplicationSettingsPanel;
+//# sourceMappingURL=ApplicationSettingsPanel.js.map

package/cjs/application-settings/ApplicationSettingsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationSettingsPanel.js","sources":["../../src/application-settings/ApplicationSettingsPanel.tsx"],"sourcesContent":["import { getFieldName, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { FormEventHandler, HTMLAttributes, useCallback } from \"react\";\n\nimport applicationSettingsPanelCss from \"./ApplicationSettingsPanel.css\";\nimport {\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useApplicationSettings } from \"../application-provider\";\n\nexport interface ApplicationSettingsPanelProps\n  extends HTMLAttributes<HTMLDivElement> {\n  settings: { [key: string]: unknown };\n}\n\nconst classBase = \"vuuApplicationSettingsPanel\";\n\nexport const ApplicationSettingsPanel = () => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-application-settings-panel\",\n    css: applicationSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const { changeSetting, settings } = useApplicationSettings();\n\n  const onChangeToggleButton = useCallback<FormEventHandler>(\n    (e) => {\n      const button = queryClosest<HTMLButtonElement>(e.target, \"button\");\n      if (button) {\n        const fieldName = getFieldName(button);\n        const { value } = button;\n        changeSetting(fieldName, value);\n      }\n    },\n    [changeSetting]\n  );\n\n  return (\n    <div className={classBase}>\n      <FormField data-field=\"themeMode\">\n        <FormFieldLabel>Light or Dark Mode</FormFieldLabel>\n        <ToggleButtonGroup\n          onChange={onChangeToggleButton}\n          value={settings.themeMode}\n        >\n          <ToggleButton value=\"light\">Light</ToggleButton>\n          <ToggleButton value=\"dark\">Dark</ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","applicationSettingsPanelCss","useApplicationSettings","useCallback","queryClosest","getFieldName","jsxs","FormField","jsx","FormFieldLabel","ToggleButtonGroup","ToggleButton"],"mappings":";;;;;;;;;;;AAmBA,MAAM,SAAY,GAAA,6BAAA,CAAA;AAEX,MAAM,2BAA2B,MAAM;AAC5C,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gCAAA;AAAA,IACR,GAAK,EAAAC,0BAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,aAAA,EAAe,QAAS,EAAA,GAAIC,0CAAuB,EAAA,CAAA;AAE3D,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,MAAS,GAAAC,qBAAA,CAAgC,CAAE,CAAA,MAAA,EAAQ,QAAQ,CAAA,CAAA;AACjE,MAAA,IAAI,MAAQ,EAAA;AACV,QAAM,MAAA,SAAA,GAAYC,sBAAa,MAAM,CAAA,CAAA;AACrC,QAAM,MAAA,EAAE,OAAU,GAAA,MAAA,CAAA;AAClB,QAAA,aAAA,CAAc,WAAW,KAAK,CAAA,CAAA;AAAA,OAChC;AAAA,KACF;AAAA,IACA,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,sCACG,KAAI,EAAA,EAAA,SAAA,EAAW,WACd,QAAC,kBAAAC,eAAA,CAAAC,cAAA,EAAA,EAAU,cAAW,WACpB,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,uBAAe,QAAkB,EAAA,oBAAA,EAAA,CAAA;AAAA,oBAClCH,eAAA;AAAA,MAACI,sBAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,oBAAA;AAAA,QACV,OAAO,QAAS,CAAA,SAAA;AAAA,QAEhB,QAAA,EAAA;AAAA,0BAACF,cAAA,CAAAG,iBAAA,EAAA,EAAa,KAAM,EAAA,OAAA,EAAQ,QAAK,EAAA,OAAA,EAAA,CAAA;AAAA,0BAChCH,cAAA,CAAAG,iBAAA,EAAA,EAAa,KAAM,EAAA,MAAA,EAAO,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACjC;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/feature/Feature.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var vuuLayout = require('@vuu-ui/vuu-layout');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var React = require('react');
 var FeatureErrorBoundary = require('./FeatureErrorBoundary.js');
@@ -50,7 +49,7 @@ function RawFeature({
 }
 const Feature = React.memo(RawFeature);
 Feature.displayName = "Feature";
-vuuLayout.registerComponent("Feature", Feature, "view");
+vuuUtils.registerComponent("Feature", Feature, "view");
 
 exports.Feature = Feature;
 //# sourceMappingURL=Feature.js.map

package/cjs/feature/Feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"Feature.js","sources":["../../src/feature/Feature.tsx"],"sourcesContent":["import { registerComponent, ViewProps } from \"@vuu-ui/vuu-layout\";\nimport { importCSS } from \"@vuu-ui/vuu-utils\";\nimport React, { Suspense, useEffect } from \"react\";\nimport { FeatureErrorBoundary } from \"./FeatureErrorBoundary\";\nimport { Loader } from \"./Loader\";\n\n/**\n * Ensure we never lazy load the same component more than once\n */\nconst componentsMap = new Map<string, ReturnType<typeof React.lazy>>();\nconst useCachedFeature = (url: string) => {\n  useEffect(\n    () => () => {\n      componentsMap.delete(url);\n    },\n    [url]\n  );\n\n  if (!componentsMap.has(url)) {\n    componentsMap.set(\n      url,\n      React.lazy(() => import(/* @vite-ignore */ url))\n    );\n  }\n\n  const lazyFeature = componentsMap.get(url);\n\n  if (!lazyFeature) {\n    throw Error(`Unable to load Lazy Feature at url ${url}`);\n  } else {\n    return lazyFeature;\n  }\n};\n\nexport interface FeatureProps<P extends object | undefined = any> {\n  /**\n    props that will be passed to the lazily loaded component.\n   */\n  ComponentProps?: P;\n  ViewProps?: Partial<Pick<ViewProps, \"closeable\" | \"header\">>;\n  css?: string;\n  height?: number;\n  title?: string;\n  /** \n   The url of javascript bundle to lazily load. Bundle must provide a default export\n   and that export must be a React component.\n   */\n  url: string;\n  width?: number;\n}\n\nfunction RawFeature<Params extends object | undefined>({\n  url,\n  css,\n  ComponentProps: params,\n  ...props\n}: FeatureProps<Params>) {\n  // useEffect(() => {\n  //   console.log(\"%cFeature mount\", \"color: green;\");\n  //   return () => {\n  //     console.log(\"%cFeature unmount\", \"color:red;\");\n  //   };\n  // }, []);\n\n  if (css) {\n    //   import(/* @vite-ignore */ css, { assert: { type: \"css\" } }).then(\n    //     (cssModule) => {\n    //       console.log(\"%cInject Styles\", \"color: blue;font-weight: bold\");\n    //       document.adoptedStyleSheets = [\n    //         ...document.adoptedStyleSheets,\n    //         cssModule.default,\n    //       ];\n    //     }\n    //   );\n    // Polyfill until cypress build supports import assertions\n    // Note: already fully supported in esbuild and vite\n    importCSS(css).then((styleSheet) => {\n      document.adoptedStyleSheets = [\n        ...document.adoptedStyleSheets,\n        styleSheet,\n      ];\n    });\n  }\n\n  const LazyFeature = useCachedFeature(url);\n  return (\n    <FeatureErrorBoundary url={url}>\n      <Suspense fallback={<Loader />}>\n        <LazyFeature {...props} {...params} />\n      </Suspense>\n    </FeatureErrorBoundary>\n  );\n}\n\n/**\n  Feature is a wrapper around React Lazy Loading. It will load a component\n  from the given url. That url must resolve to a javascript bundle with a\n  single default export. That export must be a React component.\n */\nexport const Feature = React.memo(RawFeature);\nFeature.displayName = \"Feature\";\nregisterComponent(\"Feature\", Feature, \"view\");\n"],"names":["useEffect","importCSS","FeatureErrorBoundary","jsx","Suspense","Loader","registerComponent"],"mappings":";;;;;;;;;AASA,MAAM,aAAA,uBAAoB,GAA2C,EAAA,CAAA;AACrE,MAAM,gBAAA,GAAmB,CAAC,GAAgB,KAAA;AACxC,EAAAA,eAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,aAAA,CAAc,OAAO,GAAG,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,GAAG,CAAA;AAAA,GACN,CAAA;AAEA,EAAA,IAAI,CAAC,aAAA,CAAc,GAAI,CAAA,GAAG,CAAG,EAAA;AAC3B,IAAc,aAAA,CAAA,GAAA;AAAA,MACZ,GAAA;AAAA,MACA,KAAA,CAAM,KAAK,MAAM;AAAA;AAAA,QAA0B,GAAA;AAAA,OAAI,CAAA;AAAA,KACjD,CAAA;AAAA,GACF;AAEA,EAAM,MAAA,WAAA,GAAc,aAAc,CAAA,GAAA,CAAI,GAAG,CAAA,CAAA;AAEzC,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,KAAA,CAAM,CAAsC,mCAAA,EAAA,GAAG,CAAE,CAAA,CAAA,CAAA;AAAA,GAClD,MAAA;AACL,IAAO,OAAA,WAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAmBA,SAAS,UAA8C,CAAA;AAAA,EACrD,GAAA;AAAA,EACA,GAAA;AAAA,EACA,cAAgB,EAAA,MAAA;AAAA,EAChB,GAAG,KAAA;AACL,CAAyB,EAAA;AAQvB,EAAA,IAAI,GAAK,EAAA;AAYP,IAAAC,kBAAA,CAAU,GAAG,CAAA,CAAE,IAAK,CAAA,CAAC,UAAe,KAAA;AAClC,MAAA,QAAA,CAAS,kBAAqB,GAAA;AAAA,QAC5B,GAAG,QAAS,CAAA,kBAAA;AAAA,QACZ,UAAA;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAM,MAAA,WAAA,GAAc,iBAAiB,GAAG,CAAA,CAAA;AACxC,EAAA,sCACGC,yCAAqB,EAAA,EAAA,GAAA,EACpB,QAAC,kBAAAC,cAAA,CAAAC,cAAA,EAAA,EAAS,0BAAWD,cAAA,CAAAE,aAAA,EAAA,EAAO,CAC1B,EAAA,QAAA,kBAAAF,cAAA,CAAC,eAAa,GAAG,KAAA,EAAQ,GAAG,MAAA,EAAQ,GACtC,CACF,EAAA,CAAA,CAAA;AAEJ,CAAA;AAOa,MAAA,OAAA,GAAU,KAAM,CAAA,IAAA,CAAK,UAAU,EAAA;AAC5C,OAAA,CAAQ,WAAc,GAAA,SAAA,CAAA;AACtBG,2BAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}
+{"version":3,"file":"Feature.js","sources":["../../src/feature/Feature.tsx"],"sourcesContent":["import { ViewProps } from \"@vuu-ui/vuu-layout\";\nimport { importCSS, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport React, { Suspense, useEffect } from \"react\";\nimport { FeatureErrorBoundary } from \"./FeatureErrorBoundary\";\nimport { Loader } from \"./Loader\";\n\n/**\n * Ensure we never lazy load the same component more than once\n */\nconst componentsMap = new Map<string, ReturnType<typeof React.lazy>>();\nconst useCachedFeature = (url: string) => {\n  useEffect(\n    () => () => {\n      componentsMap.delete(url);\n    },\n    [url]\n  );\n\n  if (!componentsMap.has(url)) {\n    componentsMap.set(\n      url,\n      React.lazy(() => import(/* @vite-ignore */ url))\n    );\n  }\n\n  const lazyFeature = componentsMap.get(url);\n\n  if (!lazyFeature) {\n    throw Error(`Unable to load Lazy Feature at url ${url}`);\n  } else {\n    return lazyFeature;\n  }\n};\n\nexport interface FeatureProps<P extends object | undefined = any> {\n  /**\n    props that will be passed to the lazily loaded component.\n   */\n  ComponentProps?: P;\n  ViewProps?: Partial<Pick<ViewProps, \"closeable\" | \"header\">>;\n  css?: string;\n  height?: number;\n  title?: string;\n  /** \n   The url of javascript bundle to lazily load. Bundle must provide a default export\n   and that export must be a React component.\n   */\n  url: string;\n  width?: number;\n}\n\nfunction RawFeature<Params extends object | undefined>({\n  url,\n  css,\n  ComponentProps: params,\n  ...props\n}: FeatureProps<Params>) {\n  // useEffect(() => {\n  //   console.log(\"%cFeature mount\", \"color: green;\");\n  //   return () => {\n  //     console.log(\"%cFeature unmount\", \"color:red;\");\n  //   };\n  // }, []);\n\n  if (css) {\n    //   import(/* @vite-ignore */ css, { assert: { type: \"css\" } }).then(\n    //     (cssModule) => {\n    //       console.log(\"%cInject Styles\", \"color: blue;font-weight: bold\");\n    //       document.adoptedStyleSheets = [\n    //         ...document.adoptedStyleSheets,\n    //         cssModule.default,\n    //       ];\n    //     }\n    //   );\n    // Polyfill until cypress build supports import assertions\n    // Note: already fully supported in esbuild and vite\n    importCSS(css).then((styleSheet) => {\n      document.adoptedStyleSheets = [\n        ...document.adoptedStyleSheets,\n        styleSheet,\n      ];\n    });\n  }\n\n  const LazyFeature = useCachedFeature(url);\n  return (\n    <FeatureErrorBoundary url={url}>\n      <Suspense fallback={<Loader />}>\n        <LazyFeature {...props} {...params} />\n      </Suspense>\n    </FeatureErrorBoundary>\n  );\n}\n\n/**\n  Feature is a wrapper around React Lazy Loading. It will load a component\n  from the given url. That url must resolve to a javascript bundle with a\n  single default export. That export must be a React component.\n */\nexport const Feature = React.memo(RawFeature);\nFeature.displayName = \"Feature\";\nregisterComponent(\"Feature\", Feature, \"view\");\n"],"names":["useEffect","importCSS","FeatureErrorBoundary","jsx","Suspense","Loader","registerComponent"],"mappings":";;;;;;;;AASA,MAAM,aAAA,uBAAoB,GAA2C,EAAA,CAAA;AACrE,MAAM,gBAAA,GAAmB,CAAC,GAAgB,KAAA;AACxC,EAAAA,eAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,aAAA,CAAc,OAAO,GAAG,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,GAAG,CAAA;AAAA,GACN,CAAA;AAEA,EAAA,IAAI,CAAC,aAAA,CAAc,GAAI,CAAA,GAAG,CAAG,EAAA;AAC3B,IAAc,aAAA,CAAA,GAAA;AAAA,MACZ,GAAA;AAAA,MACA,KAAA,CAAM,KAAK,MAAM;AAAA;AAAA,QAA0B,GAAA;AAAA,OAAI,CAAA;AAAA,KACjD,CAAA;AAAA,GACF;AAEA,EAAM,MAAA,WAAA,GAAc,aAAc,CAAA,GAAA,CAAI,GAAG,CAAA,CAAA;AAEzC,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,KAAA,CAAM,CAAsC,mCAAA,EAAA,GAAG,CAAE,CAAA,CAAA,CAAA;AAAA,GAClD,MAAA;AACL,IAAO,OAAA,WAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAmBA,SAAS,UAA8C,CAAA;AAAA,EACrD,GAAA;AAAA,EACA,GAAA;AAAA,EACA,cAAgB,EAAA,MAAA;AAAA,EAChB,GAAG,KAAA;AACL,CAAyB,EAAA;AAQvB,EAAA,IAAI,GAAK,EAAA;AAYP,IAAAC,kBAAA,CAAU,GAAG,CAAA,CAAE,IAAK,CAAA,CAAC,UAAe,KAAA;AAClC,MAAA,QAAA,CAAS,kBAAqB,GAAA;AAAA,QAC5B,GAAG,QAAS,CAAA,kBAAA;AAAA,QACZ,UAAA;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAM,MAAA,WAAA,GAAc,iBAAiB,GAAG,CAAA,CAAA;AACxC,EAAA,sCACGC,yCAAqB,EAAA,EAAA,GAAA,EACpB,QAAC,kBAAAC,cAAA,CAAAC,cAAA,EAAA,EAAS,0BAAWD,cAAA,CAAAE,aAAA,EAAA,EAAO,CAC1B,EAAA,QAAA,kBAAAF,cAAA,CAAC,eAAa,GAAG,KAAA,EAAQ,GAAG,MAAA,EAAQ,GACtC,CACF,EAAA,CAAA,CAAA;AAEJ,CAAA;AAOa,MAAA,OAAA,GAAU,KAAM,CAAA,IAAA,CAAK,UAAU,EAAA;AAC5C,OAAA,CAAQ,WAAc,GAAA,SAAA,CAAA;AACtBG,0BAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}

package/cjs/index.js

@@ -13,7 +13,6 @@ var loginUtils = require('./login/login-utils.js');
 var SessionEditingForm = require('./session-editing-form/SessionEditingForm.js');
 var shell = require('./shell.js');
 var ContextPanel = require('./shell-layouts/context-panel/ContextPanel.js');
-var useShellLayout = require('./shell-layouts/useShellLayout.js');
 var SidePanel = require('./shell-layouts/side-panel/SidePanel.js');
 var shellTypes = require('./shellTypes.js');
 var ShellContextProvider = require('./ShellContextProvider.js');
@@ -40,7 +39,6 @@ exports.redirectToLogin = loginUtils.redirectToLogin;
 exports.SessionEditingForm = SessionEditingForm.SessionEditingForm;
 exports.Shell = shell.Shell;
 exports.ContextPanel = ContextPanel.ContextPanel;
-exports.useShellLayout = useShellLayout.useShellLayout;
 exports.SidePanel = SidePanel.SidePanel;
 exports.isTableSchema = shellTypes.isTableSchema;
 exports.isWildcardSchema = shellTypes.isWildcardSchema;

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/layout-management/SaveLayoutPanel.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var screenshotUtils = require('./screenshot-utils.js');
 var core = require('@salt-ds/core');
 var React = require('react');
+require('@vuu-ui/vuu-ui-controls');
 require('clsx');
 var loginUtils = require('../login/login-utils.js');
 var SaveLayoutPanel$1 = require('./SaveLayoutPanel.css.js');
@@ -14,8 +14,6 @@ var SaveLayoutPanel$1 = require('./SaveLayoutPanel.css.js');
 const classBase = "saveLayoutPanel";
 const formField = `${classBase}-formField`;
 const groups = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5"];
-const checkboxValues = ["Value 1", "Value 2", "Value 3"];
-const radioValues = ["Value 1", "Value 2", "Value 3"];
 const SaveLayoutPanel = (props) => {
   const { defaultTitle = "", onCancel, onSave, componentId } = props;
   const targetWindow = window.useWindow();
@@ -26,8 +24,6 @@ const SaveLayoutPanel = (props) => {
   });
   const [layoutName, setLayoutName] = React.useState(defaultTitle);
   const [group, setGroup] = React.useState("");
-  const [checkValues, setCheckValues] = React.useState([]);
-  const [radioValue, setRadioValue] = React.useState(radioValues[0]);
   const [screenshot, setScreenshot] = React.useState();
   const [screenshotErrorMessage, setScreenshotErrorMessage] = React.useState();
   const [username] = loginUtils.getAuthDetailsFromCookies();
@@ -64,25 +60,37 @@ const SaveLayoutPanel = (props) => {
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "spinner" });
   }, [screenshot, screenshotErrorMessage]);
+  const handleSelectionChange = React.useCallback(
+    (e, [selectedValue]) => {
+      if (e.key === "Tab" && !selectedValue.toLowerCase().startsWith(group.toLowerCase())) ; else {
+        setGroup(selectedValue || "");
+      }
+    },
+    [group]
+  );
+  const handleChange = React.useCallback((e) => {
+    console.log(`set Group ${e.target.value}`);
+    setGroup(e.target.value);
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-panelContainer`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-panelContent`, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-formContainer`, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { className: formField, children: [
           /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Group" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            vuuUiControls.ComboBox,
+            core.ComboBox,
             {
-              source: groups,
-              allowFreeText: true,
-              InputProps: {
-                inputProps: {
-                  className: `${classBase}-inputText`,
-                  placeholder: "Select Group or Enter New Name",
-                  onChange: (event) => setGroup(event.target.value)
-                }
+              inputProps: {
+                autoComplete: "off",
+                className: `${classBase}-inputText`,
+                placeholder: "Select Group or Enter New Name"
+                // onChange: (event: ChangeEvent<HTMLInputElement>) =>
+                //   setGroup(event.target.value),
               },
-              width: "100%",
-              onSelectionChange: (_, value) => setGroup(value || "")
+              onChange: handleChange,
+              onSelectionChange: handleSelectionChange,
+              value: group,
+              children: groups.map((group2, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: group2 }, i))
             }
           )
         ] }),
@@ -99,33 +107,6 @@ const SaveLayoutPanel = (props) => {
               value: layoutName
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { className: formField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Some Layout Setting" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-settingsGroup`, children: checkboxValues.map((value, i) => /* @__PURE__ */ jsxRuntime.jsx(
-            vuuUiControls.Checkbox,
-            {
-              onToggle: () => setCheckValues(
-                (prev) => prev.includes(value) ? prev.filter((entry) => entry !== value) : [...prev, value]
-              ),
-              checked: checkValues.includes(value),
-              label: value
-            },
-            i
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { className: formField, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Some Layout Setting" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-settingsGroup`, children: radioValues.map((value, i) => /* @__PURE__ */ jsxRuntime.jsx(
-            vuuUiControls.RadioButton,
-            {
-              onClick: () => setRadioValue(value),
-              checked: radioValue === value,
-              label: value,
-              groupName: "radioGroup"
-            },
-            i
-          )) })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-screenshotContainer`, children: screenshotContent })

package/cjs/layout-management/SaveLayoutPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaveLayoutPanel.js","sources":["../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { Checkbox, ComboBox, RadioButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { takeScreenshot } from \"./screenshot-utils\";\nimport { Button, FormField, FormFieldLabel, Input, Text } from \"@salt-ds/core\";\nimport { ChangeEvent, useEffect, useMemo, useState } from \"react\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { getAuthDetailsFromCookies } from \"../login\";\n\nimport saveLayoutPanelCss from \"./SaveLayoutPanel.css\";\n\nconst classBase = \"saveLayoutPanel\";\nconst formField = `${classBase}-formField`;\n\nconst groups = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\", \"Group 5\"];\n\nconst checkboxValues = [\"Value 1\", \"Value 2\", \"Value 3\"];\n\nconst radioValues = [\"Value 1\", \"Value 2\", \"Value 3\"] as const;\n\ntype RadioValue = (typeof radioValues)[number];\n\ntype SaveLayoutPanelProps = {\n  componentId?: string;\n  defaultTitle?: string;\n  onCancel: () => void;\n  onSave: (layoutMetadata: LayoutMetadataDto) => void;\n};\n\nexport const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {\n  const { defaultTitle = \"\", onCancel, onSave, componentId } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-save-layout-panel\",\n    css: saveLayoutPanelCss,\n    window: targetWindow,\n  });\n\n  const [layoutName, setLayoutName] = useState<string>(defaultTitle);\n  const [group, setGroup] = useState<string>(\"\");\n  const [checkValues, setCheckValues] = useState<string[]>([]);\n  const [radioValue, setRadioValue] = useState<RadioValue>(radioValues[0]);\n  const [screenshot, setScreenshot] = useState<string | undefined>();\n  const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<\n    string | undefined\n  >();\n  const [username] = getAuthDetailsFromCookies();\n\n  useEffect(() => {\n    if (componentId) {\n      takeScreenshot(document.getElementById(componentId) as HTMLElement)\n        .then((screenshot) => {\n          setScreenshot(screenshot);\n        })\n        .catch((error: Error) => {\n          setScreenshotErrorMessage(error.message);\n        });\n    }\n  }, [componentId]);\n\n  const handleSubmit = () => {\n    onSave({\n      name: layoutName,\n      group,\n      screenshot: screenshot ?? \"\",\n      user: username,\n    });\n  };\n\n  const screenshotContent = useMemo(() => {\n    if (screenshot) {\n      return (\n        <img\n          className={`${classBase}-screenshot`}\n          src={screenshot}\n          alt=\"screenshot of current layout\"\n        />\n      );\n    }\n    if (screenshotErrorMessage) {\n      return <Text>{screenshotErrorMessage}</Text>;\n    }\n    return <div className=\"spinner\" />;\n  }, [screenshot, screenshotErrorMessage]);\n\n  return (\n    <div className={`${classBase}-panelContainer`}>\n      <div className={`${classBase}-panelContent`}>\n        <div className={`${classBase}-formContainer`}>\n          <FormField className={formField}>\n            <FormFieldLabel>Group</FormFieldLabel>\n            <ComboBox\n              source={groups}\n              allowFreeText\n              InputProps={{\n                inputProps: {\n                  className: `${classBase}-inputText`,\n                  placeholder: \"Select Group or Enter New Name\",\n                  onChange: (event: ChangeEvent<HTMLInputElement>) =>\n                    setGroup(event.target.value),\n                },\n              }}\n              width=\"100%\"\n              onSelectionChange={(_, value) => setGroup(value || \"\")}\n            />\n          </FormField>\n          <FormField className={formField}>\n            <FormFieldLabel>Layout Name</FormFieldLabel>\n            <Input\n              inputProps={{\n                className: `${classBase}-inputText`,\n                placeholder: \"Enter Layout Name\",\n              }}\n              onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                setLayoutName(event.target.value)\n              }\n              value={layoutName}\n            />\n          </FormField>\n          <FormField className={formField}>\n            <FormFieldLabel>Some Layout Setting</FormFieldLabel>\n            <div className={`${classBase}-settingsGroup`}>\n              {checkboxValues.map((value, i) => (\n                <Checkbox\n                  key={i}\n                  onToggle={() =>\n                    setCheckValues((prev) =>\n                      prev.includes(value)\n                        ? prev.filter((entry) => entry !== value)\n                        : [...prev, value]\n                    )\n                  }\n                  checked={checkValues.includes(value)}\n                  label={value}\n                />\n              ))}\n            </div>\n          </FormField>\n          <FormField className={formField}>\n            <FormFieldLabel>Some Layout Setting</FormFieldLabel>\n            <div className={`${classBase}-settingsGroup`}>\n              {radioValues.map((value, i) => (\n                <RadioButton\n                  key={i}\n                  onClick={() => setRadioValue(value)}\n                  checked={radioValue === value}\n                  label={value}\n                  groupName=\"radioGroup\"\n                />\n              ))}\n            </div>\n          </FormField>\n        </div>\n        <div className={`${classBase}-screenshotContainer`}>\n          {screenshotContent}\n        </div>\n      </div>\n      <div className={`${classBase}-buttonsContainer`}>\n        <Button className={`${classBase}-cancelButton`} onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button\n          className={`${classBase}-saveButton`}\n          onClick={handleSubmit}\n          disabled={layoutName === \"\" || group === \"\"}\n        >\n          Save\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","saveLayoutPanelCss","useState","getAuthDetailsFromCookies","useEffect","takeScreenshot","screenshot","useMemo","jsx","Text","jsxs","FormField","FormFieldLabel","ComboBox","Input","Checkbox","RadioButton","Button"],"mappings":"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"}
+{"version":3,"file":"SaveLayoutPanel.js","sources":["../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { takeScreenshot } from \"./screenshot-utils\";\nimport {\n  Button,\n  ComboBox,\n  FormField,\n  FormFieldLabel,\n  Input,\n  Option,\n  Text,\n} from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { getAuthDetailsFromCookies } from \"../login\";\n\nimport saveLayoutPanelCss from \"./SaveLayoutPanel.css\";\n\nconst classBase = \"saveLayoutPanel\";\nconst formField = `${classBase}-formField`;\n\nconst groups = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\", \"Group 5\"];\n\ntype SaveLayoutPanelProps = {\n  componentId?: string;\n  defaultTitle?: string;\n  onCancel: () => void;\n  onSave: (layoutMetadata: LayoutMetadataDto) => void;\n};\n\nexport const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {\n  const { defaultTitle = \"\", onCancel, onSave, componentId } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-save-layout-panel\",\n    css: saveLayoutPanelCss,\n    window: targetWindow,\n  });\n\n  const [layoutName, setLayoutName] = useState<string>(defaultTitle);\n  const [group, setGroup] = useState<string>(\"\");\n  const [screenshot, setScreenshot] = useState<string | undefined>();\n  const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<\n    string | undefined\n  >();\n  const [username] = getAuthDetailsFromCookies();\n\n  useEffect(() => {\n    if (componentId) {\n      takeScreenshot(document.getElementById(componentId) as HTMLElement)\n        .then((screenshot) => {\n          setScreenshot(screenshot);\n        })\n        .catch((error: Error) => {\n          setScreenshotErrorMessage(error.message);\n        });\n    }\n  }, [componentId]);\n\n  const handleSubmit = () => {\n    onSave({\n      name: layoutName,\n      group,\n      screenshot: screenshot ?? \"\",\n      user: username,\n    });\n  };\n\n  const screenshotContent = useMemo(() => {\n    if (screenshot) {\n      return (\n        <img\n          className={`${classBase}-screenshot`}\n          src={screenshot}\n          alt=\"screenshot of current layout\"\n        />\n      );\n    }\n    if (screenshotErrorMessage) {\n      return <Text>{screenshotErrorMessage}</Text>;\n    }\n    return <div className=\"spinner\" />;\n  }, [screenshot, screenshotErrorMessage]);\n\n  const handleSelectionChange = useCallback(\n    (e: SyntheticEvent | KeyboardEvent, [selectedValue]: string[]) => {\n      if (\n        (e as KeyboardEvent).key === \"Tab\" &&\n        !selectedValue.toLowerCase().startsWith(group.toLowerCase())\n      ) {\n        // ignore. The ComboBox forces selection of a value from the list on Tab\n      } else {\n        setGroup(selectedValue || \"\");\n      }\n    },\n    [group]\n  );\n\n  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    console.log(`set Group ${e.target.value}`);\n    setGroup(e.target.value);\n  }, []);\n\n  return (\n    <div className={`${classBase}-panelContainer`}>\n      <div className={`${classBase}-panelContent`}>\n        <div className={`${classBase}-formContainer`}>\n          <FormField className={formField}>\n            <FormFieldLabel>Group</FormFieldLabel>\n            <ComboBox\n              inputProps={{\n                autoComplete: \"off\",\n                className: `${classBase}-inputText`,\n                placeholder: \"Select Group or Enter New Name\",\n                // onChange: (event: ChangeEvent<HTMLInputElement>) =>\n                //   setGroup(event.target.value),\n              }}\n              onChange={handleChange}\n              onSelectionChange={handleSelectionChange}\n              value={group}\n            >\n              {groups.map((group, i) => (\n                <Option key={i} value={group} />\n              ))}\n            </ComboBox>\n          </FormField>\n          <FormField className={formField}>\n            <FormFieldLabel>Layout Name</FormFieldLabel>\n            <Input\n              inputProps={{\n                className: `${classBase}-inputText`,\n                placeholder: \"Enter Layout Name\",\n              }}\n              onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                setLayoutName(event.target.value)\n              }\n              value={layoutName}\n            />\n          </FormField>\n        </div>\n        <div className={`${classBase}-screenshotContainer`}>\n          {screenshotContent}\n        </div>\n      </div>\n      <div className={`${classBase}-buttonsContainer`}>\n        <Button className={`${classBase}-cancelButton`} onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button\n          className={`${classBase}-saveButton`}\n          onClick={handleSubmit}\n          disabled={layoutName === \"\" || group === \"\"}\n        >\n          Save\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","saveLayoutPanelCss","useState","getAuthDetailsFromCookies","useEffect","takeScreenshot","screenshot","useMemo","jsx","Text","useCallback","jsxs","FormField","FormFieldLabel","ComboBox","group","Option","Input","Button"],"mappings":"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"}

package/cjs/shell.js

@@ -2,17 +2,19 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var vuuDataRemote = require('@vuu-ui/vuu-data-remote');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var vuuLayout = require('@vuu-ui/vuu-layout');
 var vuuPopups = require('@vuu-ui/vuu-popups');
 var vuuUtils = require('@vuu-ui/vuu-utils');
-var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var cx = require('clsx');
 var React = require('react');
 var AppHeader = require('./app-header/AppHeader.js');
-require('@vuu-ui/vuu-ui-controls');
+var ApplicationProvider = require('./application-provider/ApplicationProvider.js');
+var ApplicationSettingsPanel = require('./application-settings/ApplicationSettingsPanel.js');
 require('html-to-image');
+require('@salt-ds/core');
+require('@vuu-ui/vuu-ui-controls');
 var useLayoutManager = require('./layout-management/useLayoutManager.js');
 var useLayoutContextMenuItems = require('./layout-management/useLayoutContextMenuItems.js');
 var defaultApplicationJson = require('./persistence-management/defaultApplicationJson.js');
@@ -21,6 +23,7 @@ require('./persistence-management/RemotePersistenceManager.js');
 var useShellLayout = require('./shell-layouts/useShellLayout.js');
 var shell = require('./shell.css.js');
 
+vuuUtils.registerComponent("ApplicationSettings", ApplicationSettingsPanel.ApplicationSettingsPanel, "view");
 if (typeof vuuLayout.StackLayout !== "function") {
   console.warn(
     "StackLayout module not loaded, will be unsbale to deserialize from layout JSON"
@@ -49,8 +52,7 @@ const Shell = ({
   });
   const rootRef = React.useRef(null);
   const { dialog, setDialogState } = vuuPopups.useDialog();
-  const layoutId = React.useRef("latest");
-  const { applicationJson, saveApplicationLayout, loadLayoutById } = useLayoutManager.useLayoutManager();
+  const { applicationJson, saveApplicationLayout } = useLayoutManager.useLayoutManager();
   const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems.useLayoutContextMenuItems(setDialogState);
   const [connectionStatus, setConnectionStatus] = React.useState("connected");
   const handleLayoutChange = React.useCallback(
@@ -63,18 +65,6 @@ const Shell = ({
     },
     [saveApplicationLayout]
   );
-  const handleSwitchTheme = React.useCallback((mode) => {
-    if (rootRef.current) {
-      rootRef.current.dataset.mode = mode;
-    }
-  }, []);
-  const handleNavigate = React.useCallback(
-    (id) => {
-      layoutId.current = id;
-      loadLayoutById(id);
-    },
-    [loadLayoutById]
-  );
   React.useMemo(async () => {
     if (serverUrl && user.token) {
       const connectionStatus2 = await vuuDataRemote.connectToServer({
@@ -86,25 +76,16 @@ const Shell = ({
     }
   }, [serverUrl, user.token, user.username]);
   const className = cx("vuuShell");
-  const isLoading = applicationJson === defaultApplicationJson.loadingApplicationJson;
+  const isLayoutLoading = applicationJson === defaultApplicationJson.loadingApplicationJson;
   const shellLayout = useShellLayout.useShellLayout({
     LeftSidePanelProps,
     leftSidePanelLayout,
-    appHeader: /* @__PURE__ */ jsxRuntime.jsx(
-      AppHeader.AppHeader,
-      {
-        layoutId: layoutId.current,
-        loginUrl,
-        user,
-        onNavigate: handleNavigate,
-        onSwitchTheme: handleSwitchTheme
-      }
-    )
+    appHeader: /* @__PURE__ */ jsxRuntime.jsx(AppHeader.AppHeader, { loginUrl })
   });
   if (connectionStatus === "rejected") {
     console.log("game over, no connection to server");
   }
-  return isLoading ? null : /* @__PURE__ */ jsxRuntime.jsx(core.SaltProvider, { theme: "vuu-theme", density: "high", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return isLayoutLoading ? null : /* @__PURE__ */ jsxRuntime.jsx(ApplicationProvider.ApplicationProvider, { user, children: /* @__PURE__ */ jsxRuntime.jsxs(
     vuuPopups.ContextMenuProvider,
     {
       menuActionHandler: handleMenuAction,

package/cjs/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  DraggableLayout,\n  LayoutProvider,\n  LayoutProviderProps,\n  StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport { ContextMenuProvider, useDialog } from \"@vuu-ui/vuu-popups\";\nimport { logger, ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport { SaltProvider } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport {\n  useLayoutContextMenuItems,\n  useLayoutManager,\n} from \"./layout-management\";\nimport { loadingApplicationJson } from \"./persistence-management\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\nimport { SaveLocation } from \"./shellTypes\";\n\nimport shellCss from \"./shell.css\";\n\nif (typeof StackLayout !== \"function\") {\n  console.warn(\n    \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n  );\n}\n\nexport type VuuUser = {\n  username: string;\n  token: string;\n};\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  LayoutProps?: Pick<\n    LayoutProviderProps,\n    \"createNewChild\" | \"pathToDropTarget\"\n  >;\n  LeftSidePanelProps?: SidePanelProps;\n  children?: ReactNode;\n  leftSidePanelLayout?: \"full-height\" | \"inlay\";\n  loginUrl?: string;\n  // paletteConfig: any;\n  saveLocation?: SaveLocation;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nexport const Shell = ({\n  LayoutProps,\n  LeftSidePanelProps = defaultLeftSidePanel,\n  children,\n  className: classNameProp,\n  leftSidePanelLayout,\n  loginUrl,\n  saveLocation: _,\n  saveUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { dialog, setDialogState } = useDialog();\n  const layoutId = useRef(\"latest\");\n  const { applicationJson, saveApplicationLayout, loadLayoutById } =\n    useLayoutManager();\n  const { buildMenuOptions, handleMenuAction } =\n    useLayoutContextMenuItems(setDialogState);\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"connected\" | \"rejected\"\n  >(\"connected\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  const handleSwitchTheme = useCallback((mode: ThemeMode) => {\n    if (rootRef.current) {\n      rootRef.current.dataset.mode = mode;\n    }\n  }, []);\n\n  // TODO this is out of date\n  const handleNavigate = useCallback(\n    (id) => {\n      layoutId.current = id;\n      loadLayoutById(id);\n    },\n    [loadLayoutById]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const className = cx(\"vuuShell\");\n\n  const isLoading = applicationJson === loadingApplicationJson;\n\n  const shellLayout = useShellLayout({\n    LeftSidePanelProps,\n    leftSidePanelLayout,\n    appHeader: (\n      <AppHeader\n        layoutId={layoutId.current}\n        loginUrl={loginUrl}\n        user={user}\n        onNavigate={handleNavigate}\n        onSwitchTheme={handleSwitchTheme}\n      />\n    ),\n  });\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  return isLoading ? null : (\n    <SaltProvider theme=\"vuu-theme\" density=\"high\">\n      <ContextMenuProvider\n        menuActionHandler={handleMenuAction}\n        menuBuilder={buildMenuOptions}\n      >\n        <LayoutProvider\n          {...LayoutProps}\n          layout={applicationJson.layout}\n          onLayoutChange={handleLayoutChange}\n        >\n          <DraggableLayout\n            className={className}\n            ref={rootRef}\n            {...htmlAttributes}\n          >\n            {shellLayout}\n          </DraggableLayout>\n        </LayoutProvider>\n        {children || dialog}\n      </ContextMenuProvider>\n    </SaltProvider>\n  );\n};\n"],"names":["StackLayout","logger","useWindow","useComponentCssInjection","shellCss","useRef","useDialog","useLayoutManager","useLayoutContextMenuItems","useState","useCallback","useMemo","connectionStatus","connectToServer","loadingApplicationJson","useShellLayout","jsx","AppHeader","SaltProvider","jsxs","ContextMenuProvider","LayoutProvider","DraggableLayout"],"mappings":"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"}
+{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport {\n  DraggableLayout,\n  LayoutProvider,\n  LayoutProviderProps,\n  StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport { ContextMenuProvider, useDialog } from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport { ApplicationSettingsPanel } from \"./application-settings\";\nimport {\n  useLayoutContextMenuItems,\n  useLayoutManager,\n} from \"./layout-management\";\nimport { loadingApplicationJson } from \"./persistence-management\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\nimport { SaveLocation } from \"./shellTypes\";\n\nimport shellCss from \"./shell.css\";\n\nregisterComponent(\"ApplicationSettings\", ApplicationSettingsPanel, \"view\");\n\nif (typeof StackLayout !== \"function\") {\n  console.warn(\n    \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n  );\n}\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  LayoutProps?: Pick<\n    LayoutProviderProps,\n    \"createNewChild\" | \"pathToDropTarget\"\n  >;\n  LeftSidePanelProps?: SidePanelProps;\n  children?: ReactNode;\n  leftSidePanelLayout?: \"full-height\" | \"inlay\";\n  loginUrl?: string;\n  // paletteConfig: any;\n  saveLocation?: SaveLocation;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nexport const Shell = ({\n  LayoutProps,\n  LeftSidePanelProps = defaultLeftSidePanel,\n  children,\n  className: classNameProp,\n  leftSidePanelLayout,\n  loginUrl,\n  saveLocation: _,\n  saveUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { dialog, setDialogState } = useDialog();\n  const { applicationJson, saveApplicationLayout } = useLayoutManager();\n  const { buildMenuOptions, handleMenuAction } =\n    useLayoutContextMenuItems(setDialogState);\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"connected\" | \"rejected\"\n  >(\"connected\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const className = cx(\"vuuShell\");\n\n  const isLayoutLoading = applicationJson === loadingApplicationJson;\n\n  const shellLayout = useShellLayout({\n    LeftSidePanelProps,\n    leftSidePanelLayout,\n    appHeader: <AppHeader loginUrl={loginUrl} />,\n  });\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  return isLayoutLoading ? null : (\n    <ApplicationProvider user={user}>\n      <ContextMenuProvider\n        menuActionHandler={handleMenuAction}\n        menuBuilder={buildMenuOptions}\n      >\n        <LayoutProvider\n          {...LayoutProps}\n          layout={applicationJson.layout}\n          onLayoutChange={handleLayoutChange}\n        >\n          <DraggableLayout\n            className={className}\n            ref={rootRef}\n            {...htmlAttributes}\n          >\n            {shellLayout}\n          </DraggableLayout>\n        </LayoutProvider>\n        {children || dialog}\n      </ContextMenuProvider>\n    </ApplicationProvider>\n  );\n};\n"],"names":["registerComponent","ApplicationSettingsPanel","StackLayout","logger","useWindow","useComponentCssInjection","shellCss","useRef","useDialog","useLayoutManager","useLayoutContextMenuItems","useState","useCallback","useMemo","connectionStatus","connectToServer","loadingApplicationJson","useShellLayout","jsx","AppHeader","ApplicationProvider","jsxs","ContextMenuProvider","LayoutProvider","DraggableLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkCAA,0BAAkB,CAAA,qBAAA,EAAuBC,mDAA0B,MAAM,CAAA,CAAA;AAEzE,IAAI,OAAOC,0BAAgB,UAAY,EAAA;AACrC,EAAQ,OAAA,CAAA,IAAA;AAAA,IACN,gFAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEA,MAAM,EAAE,KAAA,EAAU,GAAAC,eAAA,CAAO,OAAO,CAAA,CAAA;AAEhC,MAAM,uBAAyD,EAAC,CAAA;AAoBzD,MAAM,QAAQ,CAAC;AAAA,EACpB,WAAA;AAAA,EACA,kBAAqB,GAAA,oBAAA;AAAA,EACrB,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAc,EAAA,CAAA;AAAA,EACd,OAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAkB,KAAA;AAChB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,KAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,EAAE,MAAA,EAAQ,cAAe,EAAA,GAAIC,mBAAU,EAAA,CAAA;AAC7C,EAAA,MAAM,EAAE,eAAA,EAAiB,qBAAsB,EAAA,GAAIC,iCAAiB,EAAA,CAAA;AACpE,EAAA,MAAM,EAAE,gBAAA,EAAkB,gBAAiB,EAAA,GACzCC,oDAA0B,cAAc,CAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIC,eAE9C,WAAW,CAAA,CAAA;AAEb,EAAA,MAAM,kBAAqB,GAAAC,iBAAA;AAAA,IACzB,CAAC,MAAW,KAAA;AACV,MAAI,IAAA;AACF,QAAA,qBAAA,CAAsB,MAAM,CAAA,CAAA;AAAA,OACtB,CAAA,MAAA;AACN,QAAA,KAAA,GAAQ,uBAAuB,CAAA,CAAA;AAAA,OACjC;AAAA,KACF;AAAA,IACA,CAAC,qBAAqB,CAAA;AAAA,GACxB,CAAA;AAEA,EAAAC,aAAA,CAAQ,YAAY;AAClB,IAAI,IAAA,SAAA,IAAa,KAAK,KAAO,EAAA;AAC3B,MAAMC,MAAAA,iBAAAA,GAAmB,MAAMC,6BAAgB,CAAA;AAAA,QAC7C,WAAW,IAAK,CAAA,KAAA;AAAA,QAChB,GAAK,EAAA,SAAA;AAAA,QACL,UAAU,IAAK,CAAA,QAAA;AAAA,OAChB,CAAA,CAAA;AACD,MAAA,mBAAA,CAAoBD,iBAAgB,CAAA,CAAA;AAAA,KACtC;AAAA,KACC,CAAC,SAAA,EAAW,KAAK,KAAO,EAAA,IAAA,CAAK,QAAQ,CAAC,CAAA,CAAA;AAEzC,EAAM,MAAA,SAAA,GAAY,GAAG,UAAU,CAAA,CAAA;AAE/B,EAAA,MAAM,kBAAkB,eAAoB,KAAAE,6CAAA,CAAA;AAE5C,EAAA,MAAM,cAAcC,6BAAe,CAAA;AAAA,IACjC,kBAAA;AAAA,IACA,mBAAA;AAAA,IACA,SAAA,kBAAYC,cAAA,CAAAC,mBAAA,EAAA,EAAU,QAAoB,EAAA,CAAA;AAAA,GAC3C,CAAA,CAAA;AAED,EAAA,IAAI,qBAAqB,UAAY,EAAA;AACnC,IAAA,OAAA,CAAQ,IAAI,oCAAoC,CAAA,CAAA;AAAA,GAClD;AAEA,EAAA,OAAO,eAAkB,GAAA,IAAA,mBACtBD,cAAA,CAAAE,uCAAA,EAAA,EAAoB,IACnB,EAAA,QAAA,kBAAAC,eAAA;AAAA,IAACC,6BAAA;AAAA,IAAA;AAAA,MACC,iBAAmB,EAAA,gBAAA;AAAA,MACnB,WAAa,EAAA,gBAAA;AAAA,MAEb,QAAA,EAAA;AAAA,wBAAAJ,cAAA;AAAA,UAACK,wBAAA;AAAA,UAAA;AAAA,YACE,GAAG,WAAA;AAAA,YACJ,QAAQ,eAAgB,CAAA,MAAA;AAAA,YACxB,cAAgB,EAAA,kBAAA;AAAA,YAEhB,QAAA,kBAAAL,cAAA;AAAA,cAACM,yBAAA;AAAA,cAAA;AAAA,gBACC,SAAA;AAAA,gBACA,GAAK,EAAA,OAAA;AAAA,gBACJ,GAAG,cAAA;AAAA,gBAEH,QAAA,EAAA,WAAA;AAAA,eAAA;AAAA,aACH;AAAA,WAAA;AAAA,SACF;AAAA,QACC,QAAY,IAAA,MAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAEjB,EAAA,CAAA,CAAA;AAEJ;;;;"}