@vuu-ui/vuu-shell 3.0.0 → 3.1.0-beta.1

package/src/workspace-management/WorkspaceProvider.mjs

@@ -0,0 +1,209 @@
+import { jsx } from "react/jsx-runtime";
+import { isLayoutJSON, resolveJSONPath } from "@vuu-ui/vuu-layout";
+import { useNotifications } from "@vuu-ui/vuu-notifications";
+import { VuuShellLocation, WorkspaceContext, logger } from "@vuu-ui/vuu-utils";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { usePersistenceManager } from "../persistence-manager/index.mjs";
+import { getWorkspaceWithLayoutJSON, loadingJSON } from "./defaultWorkspaceJSON.mjs";
+const { info: info } = logger("useLayoutManager");
+const ensureLayoutHasTitle = (layout, layoutMetadata)=>{
+    if (layout.props?.title !== void 0) return layout;
+    return {
+        ...layout,
+        props: {
+            ...layout.props,
+            title: layoutMetadata.name
+        }
+    };
+};
+const loadingApplicationJSON = {
+    workspaceJSON: loadingJSON
+};
+const WorkspaceProvider = ({ TabstripProps, children, layoutJSON, activeLayoutIndex, layoutPlaceholderJSON, showTabs, workspaceJSON: customWorkspaceJSON })=>{
+    const [layoutMetadata, setLayoutMetadata] = useState([]);
+    const [, forceRefresh] = useState({});
+    const { showNotification } = useNotifications();
+    const persistenceManager = usePersistenceManager();
+    const applicationJSONRef = useRef(loadingApplicationJSON);
+    const setApplicationJSON = useCallback((applicationJSON, rerender = true)=>{
+        applicationJSONRef.current = applicationJSON;
+        if (rerender) forceRefresh({});
+    }, []);
+    const setWorkspaceJSON = useCallback((workspaceJSON, rerender = true)=>{
+        setApplicationJSON({
+            ...applicationJSONRef.current,
+            workspaceJSON
+        }, rerender);
+    }, [
+        setApplicationJSON
+    ]);
+    const setApplicationSettings = useCallback((settings)=>{
+        setApplicationJSON({
+            ...applicationJSONRef.current,
+            settings: {
+                ...applicationJSONRef.current.settings,
+                ...settings
+            }
+        }, false);
+    }, [
+        setApplicationJSON
+    ]);
+    useEffect(()=>{
+        persistenceManager?.loadMetadata().then((metadata)=>{
+            setLayoutMetadata(metadata);
+        }).catch((error)=>{
+            showNotification({
+                content: "Could not load list of available layouts",
+                header: "Failed to Load Layouts",
+                status: "error",
+                type: "toast"
+            });
+            console.error("Error occurred while retrieving metadata", error);
+        });
+        persistenceManager?.loadApplicationJSON().then((applicationJSON)=>{
+            if (applicationJSON) {
+                info?.("applicationJSON loaded successfully");
+                setApplicationJSON(applicationJSON);
+            } else {
+                const workspaceJSON = getWorkspaceWithLayoutJSON(customWorkspaceJSON, layoutJSON, activeLayoutIndex, {
+                    TabstripProps,
+                    showTabs
+                });
+                info?.(`applicationJSON not found, getting defaultWorkspaceJSON,
+            ${JSON.stringify(workspaceJSON, null, 2)}
+            `);
+                setApplicationJSON({
+                    workspaceJSON
+                });
+            }
+        }).catch((error)=>{
+            showNotification({
+                content: "Could not load your latest view",
+                header: "Failed to Load Layout",
+                status: "error",
+                type: "toast"
+            });
+            console.error("Error occurred while retrieving application layout", error);
+        });
+    }, [
+        TabstripProps,
+        activeLayoutIndex,
+        customWorkspaceJSON,
+        layoutJSON,
+        showNotification,
+        persistenceManager,
+        setApplicationJSON,
+        showTabs
+    ]);
+    const saveApplicationLayout = useCallback((layout)=>{
+        if (isLayoutJSON(layout)) {
+            setWorkspaceJSON(layout, false);
+            persistenceManager?.saveApplicationJSON(applicationJSONRef.current);
+        } else console.error("Tried to save invalid application layout", layout);
+    }, [
+        persistenceManager,
+        setWorkspaceJSON
+    ]);
+    const saveLayout = useCallback((metadata)=>{
+        let layoutToSave;
+        try {
+            const { workspaceJSON } = applicationJSONRef.current;
+            if (Array.isArray(workspaceJSON)) console.log("how do we identify the right thing to save");
+            else layoutToSave = resolveJSONPath(workspaceJSON, `#${VuuShellLocation.Workspace}.ACTIVE_CHILD`);
+        } catch (e) {}
+        if (layoutToSave && isLayoutJSON(layoutToSave)) persistenceManager?.createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata)).then((metadata)=>{
+            showNotification({
+                content: `${metadata.name} saved successfully`,
+                header: "Layout Saved Successfully",
+                status: "success",
+                type: "toast"
+            });
+            setLayoutMetadata((prev)=>[
+                    ...prev,
+                    metadata
+                ]);
+        }).catch((error)=>{
+            showNotification({
+                content: `Failed to save layout ${metadata.name}`,
+                header: "Failed to Save Layout",
+                status: "error",
+                type: "toast"
+            });
+            console.error("Error occurred while saving layout", error);
+        });
+        else {
+            console.error("Tried to save invalid layout", layoutToSave);
+            showNotification({
+                content: "Cannot save invalid layout",
+                header: "Failed to Save Layout",
+                status: "error",
+                type: "toast"
+            });
+        }
+    }, [
+        showNotification,
+        persistenceManager
+    ]);
+    const saveApplicationSettings = useCallback((settings, key)=>{
+        const { settings: applicationSettings } = applicationJSONRef.current;
+        key ? setApplicationSettings({
+            ...applicationSettings,
+            [key]: settings
+        }) : setApplicationSettings(settings);
+        persistenceManager?.saveApplicationJSON(applicationJSONRef.current);
+    }, [
+        persistenceManager,
+        setApplicationSettings
+    ]);
+    const getApplicationSettings = useCallback((key)=>{
+        const { settings } = applicationJSONRef.current;
+        return key ? settings?.[key] : settings;
+    }, []);
+    const loadLayoutById = useCallback((id)=>{
+        persistenceManager?.loadLayout(id).then((layoutJson)=>{
+            const { workspaceJSON: currentLayout } = applicationJSONRef.current;
+            if (Array.isArray(currentLayout)) console.log("how do we deal witha amulti layoput");
+            else setWorkspaceJSON({
+                ...currentLayout,
+                children: (currentLayout.children || []).concat(layoutJson),
+                props: {
+                    ...currentLayout.props,
+                    active: currentLayout.children?.length ?? 0
+                }
+            });
+        }).catch((error)=>{
+            showNotification({
+                content: "Failed to load the requested layout",
+                header: "Failed to Load Layout",
+                status: "error",
+                type: "toast"
+            });
+            console.error("Error occurred while loading layout", error);
+        });
+    }, [
+        showNotification,
+        persistenceManager,
+        setWorkspaceJSON
+    ]);
+    return /*#__PURE__*/ jsx(WorkspaceContext.Provider, {
+        value: {
+            getApplicationSettings,
+            layoutMetadata,
+            layoutPlaceholderJSON,
+            saveLayout,
+            workspaceJSON: applicationJSONRef.current.workspaceJSON,
+            saveApplicationLayout,
+            saveApplicationSettings,
+            loadLayoutById
+        },
+        children: children
+    });
+};
+const useWorkspace = ()=>{
+    const { workspaceJSON = getWorkspaceWithLayoutJSON(), ...contextProps } = useContext(WorkspaceContext);
+    return {
+        ...contextProps,
+        workspaceJSON
+    };
+};
+export { WorkspaceProvider, useWorkspace };

package/src/workspace-management/defaultWorkspaceJSON.mjs

@@ -0,0 +1,88 @@
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
+const warningLayout = {
+    type: "View",
+    props: {
+        style: {
+            height: "calc(100% - 6px)"
+        }
+    },
+    children: [
+        {
+            props: {
+                className: "vuuShell-warningPlaceholder"
+            },
+            type: "Placeholder"
+        }
+    ]
+};
+const loadingJSON = {
+    type: "Component",
+    id: "loading-main",
+    props: {}
+};
+const defaultWorkspaceJSON = {
+    type: "Stack",
+    id: VuuShellLocation.Workspace,
+    props: {
+        className: `${VuuShellLocation.Workspace}-tabs`,
+        TabstripProps: {
+            allowAddTab: true,
+            allowCloseTab: true,
+            allowRenameTab: true,
+            animateSelectionThumb: false,
+            "aria-label": "Workspace Tabs",
+            location: "workspace-tab",
+            variant: "primary"
+        },
+        preserve: true
+    }
+};
+const getStackWorkspaceJSON = (activeLayoutIndex)=>({
+        ...defaultWorkspaceJSON,
+        active: activeLayoutIndex ?? 0
+    });
+const placeholderLayout = {
+    props: {
+        id: "tab1",
+        title: "Tab 1",
+        className: "vuuShell-Placeholder"
+    },
+    type: "Placeholder"
+};
+const getWorkspaceWithLayoutJSON = (customWorkspaceJSON, layoutJSON = placeholderLayout, activeLayoutIndex, stackProps)=>{
+    const stackWorkspace = getStackWorkspaceJSON(activeLayoutIndex);
+    if (Array.isArray(customWorkspaceJSON)) {
+        const workspace = customWorkspaceJSON.find((layout)=>layout.id === VuuShellLocation.Workspace);
+        if (workspace) return customWorkspaceJSON.map((ws)=>{
+            if (ws.id === VuuShellLocation.Workspace) return {
+                ...ws,
+                children: Array.isArray(layoutJSON) ? layoutJSON : [
+                    layoutJSON
+                ]
+            };
+            return ws;
+        });
+        throw Error("Multiple workspaces have been provided but none has the workspace id");
+    }
+    if (customWorkspaceJSON) return {
+        ...customWorkspaceJSON,
+        children: Array.isArray(layoutJSON) ? layoutJSON : [
+            layoutJSON
+        ]
+    };
+    return {
+        ...stackWorkspace,
+        props: {
+            ...stackWorkspace.props,
+            ...stackProps,
+            TabstripProps: {
+                ...stackWorkspace.props?.TabstripProps,
+                ...stackProps?.TabstripProps
+            }
+        },
+        children: Array.isArray(layoutJSON) ? layoutJSON : [
+            layoutJSON
+        ]
+    };
+};
+export { defaultWorkspaceJSON, getStackWorkspaceJSON, getWorkspaceWithLayoutJSON, loadingJSON, warningLayout };

package/src/workspace-management/index.mjs

@@ -0,0 +1,5 @@
+export * from "./SaveLayoutPanel.mjs";
+export * from "./LayoutList.mjs";
+export * from "./WorkspaceProvider.mjs";
+export * from "./defaultWorkspaceJSON.mjs";
+export * from "./useWorkspaceContextMenuItems.mjs";

package/src/workspace-management/screenshot-utils.mjs

@@ -0,0 +1,13 @@
+import { toPng } from "html-to-image";
+const takeScreenshot = (node)=>new Promise((resolve, reject)=>{
+        toPng(node, {
+            cacheBust: true
+        }).then((screenshot)=>{
+            if (!screenshot) reject(new Error("No Screenshot available"));
+            resolve(screenshot);
+        }).catch((error)=>{
+            console.error("the following error occurred while taking a screenshot of a DOMNode", error);
+            reject(new Error("Error taking screenshot"));
+        });
+    });
+export { takeScreenshot };

package/src/workspace-management/useWorkspaceContextMenuItems.mjs

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { useModal } from "@vuu-ui/vuu-ui-controls";
+import { useCallback, useMemo } from "react";
+import { SaveLayoutPanel } from "./SaveLayoutPanel.mjs";
+import { useWorkspace } from "./WorkspaceProvider.mjs";
+const useWorkspaceContextMenuItems = ()=>{
+    const { saveLayout } = useWorkspace();
+    const { showDialog, closeDialog } = useModal();
+    const handleCloseDialog = useCallback(()=>{
+        closeDialog();
+    }, [
+        closeDialog
+    ]);
+    const handleSave = useCallback((layoutMetadata)=>{
+        saveLayout(layoutMetadata);
+        closeDialog();
+    }, [
+        saveLayout,
+        closeDialog
+    ]);
+    const [buildMenuOptions, handleMenuAction] = useMemo(()=>[
+            (location, options)=>{
+                const locations = location.split(" ");
+                const menuDescriptors = [];
+                if (locations.includes("workspace-tab")) menuDescriptors.push({
+                    label: "Save Layout",
+                    id: "save-layout",
+                    options
+                }, {
+                    label: "Layout Settings",
+                    id: "layout-settings",
+                    options
+                });
+                return menuDescriptors;
+            },
+            (menuItemId, options)=>{
+                if ("save-layout" === menuItemId) {
+                    showDialog(/*#__PURE__*/ jsx(SaveLayoutPanel, {
+                        onCancel: handleCloseDialog,
+                        onSave: handleSave,
+                        componentId: options?.controlledComponentId,
+                        defaultTitle: options?.controlledComponentTitle
+                    }), "Save Layout", [], true);
+                    return true;
+                }
+                return false;
+            }
+        ], [
+        handleCloseDialog,
+        handleSave,
+        showDialog
+    ]);
+    return {
+        buildMenuOptions,
+        handleMenuAction
+    };
+};
+export { useWorkspaceContextMenuItems };

package/cjs/ShellContextProvider.js

@@ -1,25 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-
-const Provider = ({
-  children,
-  context,
-  inheritedContext
-}) => {
-  const mergedContext = {
-    ...inheritedContext,
-    ...context
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(vuuUtils.ShellContext.Provider, { value: mergedContext, children });
-};
-const ShellContextProvider = ({
-  children,
-  value
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(vuuUtils.ShellContext.Consumer, { children: (context) => /* @__PURE__ */ jsxRuntime.jsx(Provider, { context: value, inheritedContext: context, children }) });
-};
-
-exports.ShellContextProvider = ShellContextProvider;
-//# sourceMappingURL=ShellContextProvider.js.map

package/cjs/ShellContextProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ShellContextProvider.js","sources":["../../../packages/vuu-shell/src/ShellContextProvider.tsx"],"sourcesContent":["import { ShellContext, ShellContextProps } from \"@vuu-ui/vuu-utils\";\nimport { ReactElement, ReactNode } from \"react\";\n\nexport interface ShellProviderProps {\n  children: ReactNode;\n  value?: ShellContextProps;\n}\n\nconst Provider = ({\n  children,\n  context,\n  inheritedContext,\n}: {\n  children: ReactNode;\n  context?: ShellContextProps;\n  inheritedContext?: ShellContextProps;\n}) => {\n  // TODO functions provided at multiple levels must be merged\n  const mergedContext = {\n    ...inheritedContext,\n    ...context,\n  };\n  return (\n    <ShellContext.Provider value={mergedContext}>\n      {children}\n    </ShellContext.Provider>\n  );\n};\n\nexport const ShellContextProvider = ({\n  children,\n  value,\n}: ShellProviderProps): ReactElement => {\n  return (\n    <ShellContext.Consumer>\n      {(context) => (\n        <Provider context={value} inheritedContext={context}>\n          {children}\n        </Provider>\n      )}\n    </ShellContext.Consumer>\n  );\n};\n"],"names":["ShellContext","jsx"],"mappings":";;;;;AAQA,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAIM,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,GAAG,gBAAA;AAAA,IACH,GAAG;AAAA,GACL;AACA,EAAA,sCACGA,qBAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,eAC3B,QACH,EAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACGC,cAAA,CAAAD,qBAAA,CAAa,QAAb,EAAA,EACE,QAAC,EAAA,CAAA,OAAA,qBACCC,cAAA,CAAA,QAAA,EAAA,EAAS,OAAS,EAAA,KAAA,EAAO,gBAAkB,EAAA,OAAA,EACzC,UACH,CAEJ,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,6 +0,0 @@
-'use strict';
-
-var appHeaderCss = ".vuuAppHeader {\n  --saltButton-borderRadius: 6px;\n  --saltButton-text-color: var(--vuu-color-gray-50);\n  --saltButton-padding: 12px;\n  --vuuToolbarItem-height: 26px;\n  --vuuOverflowContainer-gap: 8px;\n  --vuuOverflowContainer-height: var(--vuuAppHeader-height, 42px);\n  --vuu-icon-color: var(--vuu-color-gray-45);\n  --vuu-icon-size: 16px;\n  --vuuToolbar-borderWidth: 1px;\n  --vuuToolbar-borderStyle: solid;\n  --vuuToolbar-borderColor: var(--salt-separable-primary-borderColor);\n\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n}\n\n";
-
-module.exports = appHeaderCss;
-//# sourceMappingURL=AppHeader.css.js.map

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

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

package/cjs/app-header/AppHeader.js

@@ -1,118 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var vuuLayout = require('@vuu-ui/vuu-layout');
-var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var cx = require('clsx');
-var React = require('react');
-var PersistenceProvider = require('../persistence-manager/PersistenceProvider.js');
-require('../persistence-manager/LocalPersistenceManager.js');
-require('../persistence-manager/StaticPersistenceManager.js');
-var vuuNotifications = require('@vuu-ui/vuu-notifications');
-var ApplicationProvider = require('../application-provider/ApplicationProvider.js');
-var AppHeader$1 = require('./AppHeader.css.js');
-
-const classBase = "vuuAppHeader";
-const AppHeader = ({
-  className: classNameProp,
-  themeMode: _,
-  ...htmlAttributes
-}) => {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "vuu-app-header",
-    css: AppHeader$1,
-    window: targetWindow
-  });
-  const persistenceManager = PersistenceProvider.usePersistenceManager();
-  const settingsButtonRef = React.useRef(null);
-  const className = cx(classBase, classNameProp);
-  const logout = ApplicationProvider.useLogout();
-  const { showComponentInContextPanel } = vuuLayout.useLayoutOperation();
-  const { showNotification } = vuuNotifications.useNotifications();
-  const handleReset = React.useCallback(() => {
-    persistenceManager?.clearUserSettings();
-    showNotification({
-      animationType: "slide-out",
-      renderPostRefresh: true,
-      type: vuuNotifications.NotificationType.Toast,
-      header: "Success",
-      content: "Settings cleared",
-      status: "success"
-    });
-    location.reload();
-  }, [persistenceManager, showNotification]);
-  const handleShowSettings = React.useCallback(() => {
-    showComponentInContextPanel(
-      {
-        type: "ApplicationSettings"
-      },
-      "Settings",
-      () => settingsButtonRef.current?.focus()
-    );
-  }, [showComponentInContextPanel]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    vuuUiControls.Toolbar,
-    {
-      alignItems: "end",
-      className,
-      role: "banner",
-      showSeparators: true,
-      ...htmlAttributes,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.Button,
-          {
-            className: `${classBase}-menuItem`,
-            appearance: "transparent",
-            sentiment: "neutral",
-            children: "Help"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          core.Button,
-          {
-            appearance: "transparent",
-            className: `${classBase}-menuItem`,
-            onClick: handleReset,
-            sentiment: "neutral",
-            children: [
-              "Reset ",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "history" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          core.Button,
-          {
-            appearance: "transparent",
-            className: `${classBase}-menuItem`,
-            onClick: handleShowSettings,
-            ref: settingsButtonRef,
-            sentiment: "neutral",
-            children: [
-              "Settings ",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "settings" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.Button,
-          {
-            appearance: "transparent",
-            className: `${classBase}-menuItem`,
-            onClick: logout,
-            sentiment: "neutral",
-            children: "Log out"
-          }
-        )
-      ]
-    }
-  );
-};
-
-exports.AppHeader = AppHeader;
-//# sourceMappingURL=AppHeader.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AppHeader.js","sources":["../../../../packages/vuu-shell/src/app-header/AppHeader.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLayoutOperation } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport type { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { usePersistenceManager } from \"../persistence-manager\";\nimport { NotificationType, useNotifications } from \"@vuu-ui/vuu-notifications\";\nimport { useLogout } from \"../application-provider\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  themeMode?: ThemeMode;\n}\n\nexport const AppHeader = ({\n  className: classNameProp,\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 persistenceManager = usePersistenceManager();\n  const settingsButtonRef = useRef<HTMLButtonElement>(null);\n\n  const className = cx(classBase, classNameProp);\n  const logout = useLogout();\n\n  const { showComponentInContextPanel } = useLayoutOperation();\n  const { showNotification } = useNotifications();\n\n  const handleReset = useCallback(() => {\n    persistenceManager?.clearUserSettings();\n    showNotification({\n      animationType: \"slide-out\",\n      renderPostRefresh: true,\n      type: NotificationType.Toast,\n      header: \"Success\",\n      content: \"Settings cleared\",\n      status: \"success\",\n    });\n    location.reload();\n  }, [persistenceManager, showNotification]);\n\n  const handleShowSettings = useCallback(() => {\n    showComponentInContextPanel(\n      {\n        type: \"ApplicationSettings\",\n      },\n      \"Settings\",\n      () => settingsButtonRef.current?.focus(),\n    );\n  }, [showComponentInContextPanel]);\n\n  return (\n    <Toolbar\n      alignItems=\"end\"\n      className={className}\n      role=\"banner\"\n      showSeparators\n      {...htmlAttributes}\n    >\n      <Button\n        className={`${classBase}-menuItem`}\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n      >\n        Help\n      </Button>\n      <Button\n        appearance=\"transparent\"\n        className={`${classBase}-menuItem`}\n        onClick={handleReset}\n        sentiment=\"neutral\"\n      >\n        Reset <span data-icon=\"history\" />\n      </Button>\n      <Button\n        appearance=\"transparent\"\n        className={`${classBase}-menuItem`}\n        onClick={handleShowSettings}\n        ref={settingsButtonRef}\n        sentiment=\"neutral\"\n      >\n        Settings <span data-icon=\"settings\" />\n      </Button>\n      <Button\n        appearance=\"transparent\"\n        className={`${classBase}-menuItem`}\n        onClick={logout}\n        sentiment=\"neutral\"\n      >\n        Log out\n      </Button>\n    </Toolbar>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","appHeaderCss","usePersistenceManager","useRef","useLogout","useLayoutOperation","useNotifications","useCallback","NotificationType","jsxs","Toolbar","jsx","Button"],"mappings":"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"}

package/cjs/application-provider/ApplicationContext.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ApplicationContext.js","sources":["../../../../packages/vuu-shell/src/application-provider/ApplicationContext.tsx"],"sourcesContent":["import type { Settings, VuuUser } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { createContext } from \"react\";\nimport { SettingsSchema } from \"../user-settings\";\n\nconst Guest: VuuUser = {\n  username: \"unknown\",\n};\n\nexport interface ApplicationContextProps {\n  onUserSettingChanged: (\n    propertyName: string,\n    value: VuuRowDataItemType,\n  ) => void;\n  logout?: () => void;\n  userSettings?: Settings;\n  userSettingsSchema?: SettingsSchema;\n  user: VuuUser;\n}\n\nexport const ApplicationContext = createContext<ApplicationContextProps>({\n  onUserSettingChanged: (propertyName: string) =>\n    console.warn(\n      `Cannot change setting '${propertyName}'.\\nDid you forget to declare an ApplicationProvider ?`,\n    ),\n  user: Guest,\n});\n"],"names":["createContext"],"mappings":";;;;AAKA,MAAM,KAAiB,GAAA;AAAA,EACrB,QAAU,EAAA;AACZ,CAAA;AAaO,MAAM,qBAAqBA,mBAAuC,CAAA;AAAA,EACvE,oBAAA,EAAsB,CAAC,YAAA,KACrB,OAAQ,CAAA,IAAA;AAAA,IACN,0BAA0B,YAAY,CAAA;AAAA,kDAAA;AAAA,GACxC;AAAA,EACF,IAAM,EAAA;AACR,CAAC;;;;"}

package/cjs/application-provider/ApplicationProvider.js

@@ -1,102 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var React = require('react');
-var ApplicationContext = require('./ApplicationContext.js');
-var PersistenceProvider = require('../persistence-manager/PersistenceProvider.js');
-require('../persistence-manager/LocalPersistenceManager.js');
-require('../persistence-manager/StaticPersistenceManager.js');
-
-const accentPurple = "purple";
-const getThemeMode = (mode = "light", userSettings) => {
-  const themeMode = userSettings?.themeMode;
-  if (themeMode === "light" || themeMode === "dark") {
-    return themeMode;
-  }
-  return mode;
-};
-const ApplicationProvider = ({
-  children,
-  density: densityProp,
-  logout,
-  mode,
-  theme,
-  userSettingsSchema,
-  user
-}) => {
-  const { mode: inheritedMode, theme: inheritedTheme } = core.useTheme();
-  const density = core.useDensity(densityProp);
-  const persistenceManager = PersistenceProvider.usePersistenceManager();
-  const context = React.useContext(ApplicationContext.ApplicationContext);
-  const [userSettings, setSettings] = React.useState();
-  React.useMemo(async () => {
-    if (persistenceManager) {
-      const userSettings2 = await persistenceManager.getUserSettings();
-      setSettings(userSettings2);
-    } else {
-      setSettings({});
-    }
-  }, [persistenceManager]);
-  const onUserSettingChanged = React.useCallback(
-    (propertyName, value) => {
-      setSettings((currentSettings) => {
-        const newSettings = { ...currentSettings, [propertyName]: value };
-        persistenceManager?.saveUserSettings(newSettings);
-        return newSettings;
-      });
-    },
-    [persistenceManager]
-  );
-  return userSettings ? /* @__PURE__ */ jsxRuntime.jsx(
-    ApplicationContext.ApplicationContext.Provider,
-    {
-      value: {
-        ...context,
-        logout,
-        onUserSettingChanged,
-        userSettings,
-        userSettingsSchema,
-        user: user ?? context.user
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        core.SaltProviderNext,
-        {
-          accent: accentPurple,
-          corner: "rounded",
-          theme: theme ?? inheritedTheme ?? "vuu-theme",
-          density,
-          mode: getThemeMode(mode ?? inheritedMode, userSettings),
-          children
-        }
-      )
-    }
-  ) : null;
-};
-const useApplicationUser = () => {
-  const { user } = React.useContext(ApplicationContext.ApplicationContext);
-  return user;
-};
-const useApplicationSettings = () => {
-  const { onUserSettingChanged, userSettings, userSettingsSchema } = React.useContext(ApplicationContext.ApplicationContext);
-  return {
-    onUserSettingChanged,
-    userSettings,
-    userSettingsSchema
-  };
-};
-const useUserSetting = () => {
-  const { userSettings } = React.useContext(ApplicationContext.ApplicationContext);
-  return userSettings;
-};
-const useLogout = () => {
-  const { logout } = React.useContext(ApplicationContext.ApplicationContext);
-  return logout;
-};
-
-exports.ApplicationProvider = ApplicationProvider;
-exports.useApplicationSettings = useApplicationSettings;
-exports.useApplicationUser = useApplicationUser;
-exports.useLogout = useLogout;
-exports.useUserSetting = useUserSetting;
-//# sourceMappingURL=ApplicationProvider.js.map