@vuu-ui/vuu-shell 0.13.9 → 0.13.11

package/cjs/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var ContextPanel = require('../context-panel/ContextPanel.js');
+var SidePanel = require('../side-panel/SidePanel.js');
+var React = require('react');
+var AppStatusBar = require('../../app-status-bar/AppStatusBar.js');
+
+const useFullHeightLeftPanel = ({
+  appHeader,
+  SidePanelProps: LeftSidePanelProps,
+  htmlAttributes
+}) => React.useMemo(
+  () => /* @__PURE__ */ jsxRuntime.jsxs(
+    vuuLayout.Flexbox,
+    {
+      ...htmlAttributes,
+      style: {
+        ...htmlAttributes?.style,
+        flexDirection: "row"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SidePanel.SidePanel, { ...LeftSidePanelProps, id: vuuUtils.VuuShellLocation.SidePanel }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          vuuLayout.Flexbox,
+          {
+            className: "vuuShell-content",
+            style: { flex: 1, flexDirection: "column" },
+            children: [
+              appHeader,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                vuuLayout.LayoutContainer,
+                {
+                  id: vuuUtils.VuuShellLocation.WorkspaceContainer,
+                  style: { flex: 1 }
+                },
+                "main-content"
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(AppStatusBar.ApplicationStatusBar, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ContextPanel.ContextPanel, { id: vuuUtils.VuuShellLocation.ContextPanel, overlay: true })
+      ]
+    }
+  ),
+  [LeftSidePanelProps, appHeader, htmlAttributes]
+);
+
+exports.useFullHeightLeftPanel = useFullHeightLeftPanel;
+//# sourceMappingURL=useFullHeightLeftPanel.js.map

package/cjs/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullHeightLeftPanel.js","sources":["../../../src/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.tsx"],"sourcesContent":["import { LayoutContainer, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { ContextPanel } from \"../context-panel\";\nimport { SidePanel } from \"../side-panel\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\nimport { useMemo } from \"react\";\nimport { ApplicationStatusBar } from \"../../app-status-bar\";\n\nexport const useFullHeightLeftPanel: ShellLayoutTemplateHook = ({\n  appHeader,\n  SidePanelProps: LeftSidePanelProps,\n  htmlAttributes,\n}) =>\n  useMemo(\n    () => (\n      <Flexbox\n        {...htmlAttributes}\n        style={{\n          ...htmlAttributes?.style,\n          flexDirection: \"row\",\n        }}\n      >\n        <SidePanel {...LeftSidePanelProps} id={VuuShellLocation.SidePanel} />\n        <Flexbox\n          className=\"vuuShell-content\"\n          style={{ flex: 1, flexDirection: \"column\" }}\n        >\n          {appHeader}\n          <LayoutContainer\n            id={VuuShellLocation.WorkspaceContainer}\n            key=\"main-content\"\n            style={{ flex: 1 }}\n          />\n          <ApplicationStatusBar />\n        </Flexbox>\n        <ContextPanel id={VuuShellLocation.ContextPanel} overlay></ContextPanel>\n      </Flexbox>\n    ),\n    [LeftSidePanelProps, appHeader, htmlAttributes],\n  );\n"],"names":["useMemo","jsxs","Flexbox","jsx","SidePanel","VuuShellLocation","LayoutContainer","ApplicationStatusBar","ContextPanel"],"mappings":";;;;;;;;;;AAQO,MAAM,yBAAkD,CAAC;AAAA,EAC9D,SAAA;AAAA,EACA,cAAgB,EAAA,kBAAA;AAAA,EAChB;AACF,CACE,KAAAA,aAAA;AAAA,EACE,sBACEC,eAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,cAAgB,EAAA,KAAA;AAAA,QACnB,aAAe,EAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,mBAAW,EAAA,EAAA,GAAG,kBAAoB,EAAA,EAAA,EAAIC,0BAAiB,SAAW,EAAA,CAAA;AAAA,wBACnEJ,eAAA;AAAA,UAACC,iBAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACDC,cAAA;AAAA,gBAACG,yBAAA;AAAA,gBAAA;AAAA,kBACC,IAAID,yBAAiB,CAAA,kBAAA;AAAA,kBAErB,KAAA,EAAO,EAAE,IAAA,EAAM,CAAE;AAAA,iBAAA;AAAA,gBADb;AAAA,eAEN;AAAA,6CACCE,iCAAqB,EAAA,EAAA;AAAA;AAAA;AAAA,SACxB;AAAA,uCACCC,yBAAa,EAAA,EAAA,EAAA,EAAIH,yBAAiB,CAAA,YAAA,EAAc,SAAO,IAAC,EAAA;AAAA;AAAA;AAAA,GAC3D;AAAA,EAEF,CAAC,kBAAoB,EAAA,SAAA,EAAW,cAAc;AAChD;;;;"}

package/cjs/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js

@@ -0,0 +1,83 @@
+'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');
+
+const useInlayLeftPanel = ({
+  SidePanelProps: LeftSidePanelProps,
+  appHeader,
+  htmlAttributes
+}) => {
+  const paletteView = React.useRef(null);
+  const [open, setOpen] = React.useState(true);
+  const handleDrawerClick = React.useCallback(
+    (e) => {
+      const target = e.target;
+      if (!paletteView.current?.contains(target)) {
+        setOpen(!open);
+      }
+    },
+    [open]
+  );
+  return React.useMemo(() => {
+    const getDrawers = (leftSidePanel) => {
+      const drawers = [];
+      drawers.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          vuuLayout.Drawer,
+          {
+            onClick: handleDrawerClick,
+            open,
+            position: "left",
+            inline: true,
+            peekaboo: true,
+            sizeOpen: 200,
+            toggleButton: "end",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              vuuLayout.View,
+              {
+                className: "vuuShell-palette",
+                id: "vw-app-palette",
+                ref: paletteView,
+                style: { height: "100%" },
+                children: leftSidePanel
+              },
+              "app-palette"
+            )
+          },
+          "left-panel"
+        )
+      );
+      return drawers;
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      vuuLayout.Flexbox,
+      {
+        ...htmlAttributes,
+        style: {
+          ...htmlAttributes?.style,
+          flexDirection: "column"
+        },
+        children: [
+          appHeader,
+          /* @__PURE__ */ jsxRuntime.jsx(vuuLayout.DockLayout, { style: { flex: 1 }, children: getDrawers(LeftSidePanelProps?.children).concat(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              vuuLayout.LayoutContainer,
+              {
+                dropTarget: true,
+                id: vuuUtils.VuuShellLocation.WorkspaceContainer,
+                style: { width: "100%", height: "100%" }
+              },
+              "main-content"
+            )
+          ) })
+        ]
+      }
+    );
+  }, [LeftSidePanelProps, appHeader, handleDrawerClick, htmlAttributes, open]);
+};
+
+exports.useInlayLeftPanel = useInlayLeftPanel;
+//# sourceMappingURL=useInlayLeftPanel.js.map

package/cjs/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInlayLeftPanel.js","sources":["../../../src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.tsx"],"sourcesContent":["import {\n  DockLayout,\n  LayoutContainer,\n  Drawer,\n  Flexbox,\n  View,\n} from \"@vuu-ui/vuu-layout\";\n\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport {\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\n\nexport const useInlayLeftPanel: ShellLayoutTemplateHook = ({\n  SidePanelProps: LeftSidePanelProps,\n  appHeader,\n  htmlAttributes,\n}) => {\n  const paletteView = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(true);\n  const handleDrawerClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const target = e.target as HTMLElement;\n      if (!paletteView.current?.contains(target)) {\n        setOpen(!open);\n      }\n    },\n    [open],\n  );\n\n  return useMemo(() => {\n    const getDrawers = (leftSidePanel: ReactNode) => {\n      const drawers: ReactElement[] = [];\n      drawers.push(\n        <Drawer\n          key=\"left-panel\"\n          onClick={handleDrawerClick}\n          open={open}\n          position=\"left\"\n          inline\n          peekaboo\n          sizeOpen={200}\n          toggleButton=\"end\"\n        >\n          <View\n            className=\"vuuShell-palette\"\n            id=\"vw-app-palette\"\n            key=\"app-palette\"\n            ref={paletteView}\n            style={{ height: \"100%\" }}\n          >\n            {leftSidePanel}\n          </View>\n        </Drawer>,\n      );\n\n      return drawers;\n    };\n\n    return (\n      <Flexbox\n        {...htmlAttributes}\n        style={{\n          ...htmlAttributes?.style,\n          flexDirection: \"column\",\n        }}\n      >\n        {appHeader}\n        <DockLayout style={{ flex: 1 }}>\n          {getDrawers(LeftSidePanelProps?.children).concat(\n            <LayoutContainer\n              dropTarget\n              id={VuuShellLocation.WorkspaceContainer}\n              key=\"main-content\"\n              style={{ width: \"100%\", height: \"100%\" }}\n            />,\n          )}\n        </DockLayout>\n      </Flexbox>\n    );\n  }, [LeftSidePanelProps, appHeader, handleDrawerClick, htmlAttributes, open]);\n};\n"],"names":["useRef","useState","useCallback","useMemo","jsx","Drawer","View","jsxs","Flexbox","DockLayout","LayoutContainer","VuuShellLocation"],"mappings":";;;;;;;AAoBO,MAAM,oBAA6C,CAAC;AAAA,EACzD,cAAgB,EAAA,kBAAA;AAAA,EAChB,SAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,WAAA,GAAcA,aAAuB,IAAI,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,IAAI,CAAA;AACrC,EAAA,MAAM,iBAAoB,GAAAC,iBAAA;AAAA,IACxB,CAAC,CAA+B,KAAA;AAC9B,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA;AACjB,MAAA,IAAI,CAAC,WAAA,CAAY,OAAS,EAAA,QAAA,CAAS,MAAM,CAAG,EAAA;AAC1C,QAAA,OAAA,CAAQ,CAAC,IAAI,CAAA;AAAA;AACf,KACF;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEA,EAAA,OAAOC,cAAQ,MAAM;AACnB,IAAM,MAAA,UAAA,GAAa,CAAC,aAA6B,KAAA;AAC/C,MAAA,MAAM,UAA0B,EAAC;AACjC,MAAQ,OAAA,CAAA,IAAA;AAAA,wBACNC,cAAA;AAAA,UAACC,gBAAA;AAAA,UAAA;AAAA,YAEC,OAAS,EAAA,iBAAA;AAAA,YACT,IAAA;AAAA,YACA,QAAS,EAAA,MAAA;AAAA,YACT,MAAM,EAAA,IAAA;AAAA,YACN,QAAQ,EAAA,IAAA;AAAA,YACR,QAAU,EAAA,GAAA;AAAA,YACV,YAAa,EAAA,KAAA;AAAA,YAEb,QAAA,kBAAAD,cAAA;AAAA,cAACE,cAAA;AAAA,cAAA;AAAA,gBACC,SAAU,EAAA,kBAAA;AAAA,gBACV,EAAG,EAAA,gBAAA;AAAA,gBAEH,GAAK,EAAA,WAAA;AAAA,gBACL,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAO,EAAA;AAAA,gBAEvB,QAAA,EAAA;AAAA,eAAA;AAAA,cAJG;AAAA;AAKN,WAAA;AAAA,UAjBI;AAAA;AAkBN,OACF;AAEA,MAAO,OAAA,OAAA;AAAA,KACT;AAEA,IACE,uBAAAC,eAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,KAAO,EAAA;AAAA,UACL,GAAG,cAAgB,EAAA,KAAA;AAAA,UACnB,aAAe,EAAA;AAAA,SACjB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,0BACDJ,cAAA,CAACK,oBAAW,EAAA,EAAA,KAAA,EAAO,EAAE,IAAA,EAAM,GACxB,EAAA,QAAA,EAAA,UAAA,CAAW,kBAAoB,EAAA,QAAQ,CAAE,CAAA,MAAA;AAAA,4BACxCL,cAAA;AAAA,cAACM,yBAAA;AAAA,cAAA;AAAA,gBACC,UAAU,EAAA,IAAA;AAAA,gBACV,IAAIC,yBAAiB,CAAA,kBAAA;AAAA,gBAErB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO;AAAA,eAAA;AAAA,cADnC;AAAA;AAEN,WAEJ,EAAA;AAAA;AAAA;AAAA,KACF;AAAA,KAED,CAAC,kBAAA,EAAoB,WAAW,iBAAmB,EAAA,cAAA,EAAgB,IAAI,CAAC,CAAA;AAC7E;;;;"}

package/cjs/shell-layout-templates/left-main-tabs/useLeftMainTabs.js

@@ -0,0 +1,46 @@
+'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');
+
+const useLeftMainTabs = ({
+  appHeader,
+  htmlAttributes,
+  ToolbarProps
+}) => {
+  if (ToolbarProps === void 0) {
+    throw Error("LeftMainTabs layout requires ToolbarProps");
+  }
+  return React.useMemo(() => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      vuuLayout.Flexbox,
+      {
+        ...htmlAttributes,
+        style: {
+          ...htmlAttributes?.style,
+          flexDirection: "column"
+        },
+        children: [
+          appHeader,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            vuuLayout.StackLayout,
+            {
+              TabstripProps: {
+                className: `${vuuUtils.VuuShellLocation.MultiWorkspaceContainer}-tabs`
+              },
+              active: 0,
+              showTabs: "left",
+              style: { flex: 1 },
+              id: vuuUtils.VuuShellLocation.MultiWorkspaceContainer
+            }
+          )
+        ]
+      }
+    );
+  }, [appHeader, htmlAttributes]);
+};
+
+exports.useLeftMainTabs = useLeftMainTabs;
+//# sourceMappingURL=useLeftMainTabs.js.map

package/cjs/shell-layout-templates/left-main-tabs/useLeftMainTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLeftMainTabs.js","sources":["../../../src/shell-layout-templates/left-main-tabs/useLeftMainTabs.tsx"],"sourcesContent":["import { Flexbox, StackLayout } from \"@vuu-ui/vuu-layout\";\n\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { useMemo } from \"react\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\n\nexport const useLeftMainTabs: ShellLayoutTemplateHook = ({\n  appHeader,\n  htmlAttributes,\n  ToolbarProps,\n}) => {\n  if (ToolbarProps === undefined) {\n    throw Error(\"LeftMainTabs layout requires ToolbarProps\");\n  }\n\n  return useMemo(() => {\n    return (\n      <Flexbox\n        {...htmlAttributes}\n        style={{\n          ...htmlAttributes?.style,\n          flexDirection: \"column\",\n        }}\n      >\n        {appHeader}\n        <StackLayout\n          TabstripProps={{\n            className: `${VuuShellLocation.MultiWorkspaceContainer}-tabs`,\n          }}\n          active={0}\n          showTabs=\"left\"\n          style={{ flex: 1 }}\n          id={VuuShellLocation.MultiWorkspaceContainer}\n        />\n      </Flexbox>\n    );\n  }, [appHeader, htmlAttributes]);\n};\n"],"names":["useMemo","jsxs","Flexbox","jsx","StackLayout","VuuShellLocation"],"mappings":";;;;;;;AAMO,MAAM,kBAA2C,CAAC;AAAA,EACvD,SAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,IAAI,iBAAiB,KAAW,CAAA,EAAA;AAC9B,IAAA,MAAM,MAAM,2CAA2C,CAAA;AAAA;AAGzD,EAAA,OAAOA,cAAQ,MAAM;AACnB,IACE,uBAAAC,eAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,KAAO,EAAA;AAAA,UACL,GAAG,cAAgB,EAAA,KAAA;AAAA,UACnB,aAAe,EAAA;AAAA,SACjB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,0BACDC,cAAA;AAAA,YAACC,qBAAA;AAAA,YAAA;AAAA,cACC,aAAe,EAAA;AAAA,gBACb,SAAA,EAAW,CAAG,EAAAC,yBAAA,CAAiB,uBAAuB,CAAA,KAAA;AAAA,eACxD;AAAA,cACA,MAAQ,EAAA,CAAA;AAAA,cACR,QAAS,EAAA,MAAA;AAAA,cACT,KAAA,EAAO,EAAE,IAAA,EAAM,CAAE,EAAA;AAAA,cACjB,IAAIA,yBAAiB,CAAA;AAAA;AAAA;AACvB;AAAA;AAAA,KACF;AAAA,GAED,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA;AAChC;;;;"}

package/cjs/shell-layout-templates/side-panel/SidePanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var sidePanelCss = ".vuuShellSidePanel {\n    transition: width .2s ease-out;\n    width: var(--shell-left-nav-size);\n}";
+
+module.exports = sidePanelCss;
+//# sourceMappingURL=SidePanel.css.js.map

package/cjs/shell-layout-templates/side-panel/SidePanel.css.js.map

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

package/cjs/shell-layout-templates/side-panel/SidePanel.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var SidePanel$1 = require('./SidePanel.css.js');
+
+const classBase = "vuuShellSidePanel";
+const SidePanel = ({
+  children,
+  open = true,
+  sizeClosed = 90,
+  sizeOpen = 200,
+  style: styleProp,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-side-panel",
+    css: SidePanel$1,
+    window: targetWindow
+  });
+  const style = React.useMemo(
+    () => ({
+      ...styleProp,
+      "--shell-left-nav-size": open ? `${sizeOpen}px` : `${sizeClosed}px`
+    }),
+    [open, sizeClosed, sizeOpen, styleProp]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlAttributes, className: cx(classBase), style, children });
+};
+
+exports.SidePanel = SidePanel;
+//# sourceMappingURL=SidePanel.js.map

package/cjs/shell-layout-templates/side-panel/SidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","sources":["../../../src/shell-layout-templates/side-panel/SidePanel.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, useMemo } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport sidePanelCss from \"./SidePanel.css\";\n// import { useLayoutManager } from \"../../layout-management\";\n\nconst classBase = \"vuuShellSidePanel\";\n\nexport interface SidePanelProps extends HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  path?: string;\n  sizeOpen?: number;\n  sizeClosed?: number;\n}\n\nexport const SidePanel = ({\n  children,\n  open = true,\n  sizeClosed = 90,\n  sizeOpen = 200,\n  style: styleProp,\n  ...htmlAttributes\n}: SidePanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-side-panel\",\n    css: sidePanelCss,\n    window: targetWindow,\n  });\n\n  //   const { applicationJson, saveApplicationSettings } = useLayoutManager();\n  //   console.log(`settings`, {\n  //     expanded: applicationJson?.settings?.leftNav?.expanded,\n  //     active: applicationJson?.settings?.leftNav?.activeTabIndex,\n  //   });\n\n  const style = useMemo(\n    () =>\n      ({\n        ...styleProp,\n        \"--shell-left-nav-size\": open ? `${sizeOpen}px` : `${sizeClosed}px`,\n      } as CSSProperties),\n    [open, sizeClosed, sizeOpen, styleProp]\n  );\n  return (\n    <div {...htmlAttributes} className={cx(classBase)} style={style}>\n      {children}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","sidePanelCss","useMemo","jsx"],"mappings":";;;;;;;;;AAQA,MAAM,SAAY,GAAA,mBAAA;AASX,MAAM,YAAY,CAAC;AAAA,EACxB,QAAA;AAAA,EACA,IAAO,GAAA,IAAA;AAAA,EACP,UAAa,GAAA,EAAA;AAAA,EACb,QAAW,GAAA,GAAA;AAAA,EACX,KAAO,EAAA,SAAA;AAAA,EACP,GAAG;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAQD,EAAA,MAAM,KAAQ,GAAAC,aAAA;AAAA,IACZ,OACG;AAAA,MACC,GAAG,SAAA;AAAA,MACH,yBAAyB,IAAO,GAAA,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAA,GAAO,GAAG,UAAU,CAAA,EAAA;AAAA,KACjE,CAAA;AAAA,IACF,CAAC,IAAA,EAAM,UAAY,EAAA,QAAA,EAAU,SAAS;AAAA,GACxC;AACA,EACE,uBAAAC,cAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAS,CAAG,EAAA,KAAA,EAChD,QACH,EAAA,CAAA;AAEJ;;;;"}

package/cjs/shell-layout-templates/simple-content-pane/useSimpleContentPane.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var ContextPanel = require('../context-panel/ContextPanel.js');
+var React = require('react');
+
+const useSimpleContentPane = ({
+  appHeader,
+  htmlAttributes
+}) => React.useMemo(
+  () => /* @__PURE__ */ jsxRuntime.jsxs(
+    vuuLayout.Flexbox,
+    {
+      ...htmlAttributes,
+      style: {
+        ...htmlAttributes?.style,
+        flexDirection: "row"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          vuuLayout.Flexbox,
+          {
+            className: "vuuShell-content",
+            style: { flex: 1, flexDirection: "column" },
+            children: [
+              appHeader,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                vuuLayout.LayoutContainer,
+                {
+                  id: vuuUtils.VuuShellLocation.WorkspaceContainer,
+                  style: { flex: 1 }
+                },
+                "main-content"
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ContextPanel.ContextPanel, { id: vuuUtils.VuuShellLocation.ContextPanel, overlay: true })
+      ]
+    }
+  ),
+  [appHeader, htmlAttributes]
+);
+
+exports.useSimpleContentPane = useSimpleContentPane;
+//# sourceMappingURL=useSimpleContentPane.js.map

package/cjs/shell-layout-templates/simple-content-pane/useSimpleContentPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSimpleContentPane.js","sources":["../../../src/shell-layout-templates/simple-content-pane/useSimpleContentPane.tsx"],"sourcesContent":["import { LayoutContainer, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { ContextPanel } from \"../context-panel\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\nimport { useMemo } from \"react\";\n\nexport const useSimpleContentPane: ShellLayoutTemplateHook = ({\n  appHeader,\n  htmlAttributes,\n}) =>\n  useMemo(\n    () => (\n      <Flexbox\n        {...htmlAttributes}\n        style={{\n          ...htmlAttributes?.style,\n          flexDirection: \"row\",\n        }}\n      >\n        <Flexbox\n          className=\"vuuShell-content\"\n          style={{ flex: 1, flexDirection: \"column\" }}\n        >\n          {appHeader}\n          <LayoutContainer\n            id={VuuShellLocation.WorkspaceContainer}\n            key=\"main-content\"\n            style={{ flex: 1 }}\n          />\n        </Flexbox>\n        <ContextPanel id={VuuShellLocation.ContextPanel} overlay></ContextPanel>\n      </Flexbox>\n    ),\n    [appHeader, htmlAttributes],\n  );\n"],"names":["useMemo","jsxs","Flexbox","jsx","LayoutContainer","VuuShellLocation","ContextPanel"],"mappings":";;;;;;;;AAMO,MAAM,uBAAgD,CAAC;AAAA,EAC5D,SAAA;AAAA,EACA;AACF,CACE,KAAAA,aAAA;AAAA,EACE,sBACEC,eAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,cAAgB,EAAA,KAAA;AAAA,QACnB,aAAe,EAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAACC,iBAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACDC,cAAA;AAAA,gBAACC,yBAAA;AAAA,gBAAA;AAAA,kBACC,IAAIC,yBAAiB,CAAA,kBAAA;AAAA,kBAErB,KAAA,EAAO,EAAE,IAAA,EAAM,CAAE;AAAA,iBAAA;AAAA,gBADb;AAAA;AAEN;AAAA;AAAA,SACF;AAAA,uCACCC,yBAAa,EAAA,EAAA,EAAA,EAAID,yBAAiB,CAAA,YAAA,EAAc,SAAO,IAAC,EAAA;AAAA;AAAA;AAAA,GAC3D;AAAA,EAEF,CAAC,WAAW,cAAc;AAC5B;;;;"}

package/cjs/shell-layout-templates/useShellLayout.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var useFullHeightLeftPanel = require('./full-height-left-panel/useFullHeightLeftPanel.js');
+var useInlayLeftPanel = require('./inlay-left-panel/useInlayLeftPanel.js');
+var useLeftMainTabs = require('./left-main-tabs/useLeftMainTabs.js');
+var useSimpleContentPane = require('./simple-content-pane/useSimpleContentPane.js');
+
+const LayoutHook = {
+  "full-height": useFullHeightLeftPanel.useFullHeightLeftPanel,
+  inlay: useInlayLeftPanel.useInlayLeftPanel,
+  "left-main-tabs": useLeftMainTabs.useLeftMainTabs,
+  "simple-content-pane": useSimpleContentPane.useSimpleContentPane
+};
+const useShellLayout = ({
+  layoutTemplateId = "simple-content-pane",
+  ...props
+}) => {
+  const useLayoutHook = LayoutHook[layoutTemplateId];
+  return useLayoutHook(props);
+};
+
+exports.useShellLayout = useShellLayout;
+//# sourceMappingURL=useShellLayout.js.map

package/cjs/shell-layout-templates/useShellLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShellLayout.js","sources":["../../src/shell-layout-templates/useShellLayout.ts"],"sourcesContent":["import { HTMLAttributes, ReactElement, ReactNode } from \"react\";\nimport { useFullHeightLeftPanel } from \"./full-height-left-panel/useFullHeightLeftPanel\";\nimport { useInlayLeftPanel } from \"./inlay-left-panel/useInlayLeftPanel\";\nimport { useLeftMainTabs } from \"./left-main-tabs/useLeftMainTabs\";\nimport { useSimpleContentPane } from \"./simple-content-pane/useSimpleContentPane\";\nimport { SidePanelProps as ShellSidePanelProps } from \"./side-panel\";\n\nconst LayoutHook = {\n  \"full-height\": useFullHeightLeftPanel,\n  inlay: useInlayLeftPanel,\n  \"left-main-tabs\": useLeftMainTabs,\n  \"simple-content-pane\": useSimpleContentPane,\n};\n\nexport type LayoutTemplateId = keyof typeof LayoutHook;\n\nexport type ShellLayoutTemplateProps = Omit<\n  ShellLayoutProps,\n  \"layoutTemplateId\"\n>;\n\nexport type ShellToolbarProps = {\n  children: ReactNode;\n  position?: \"left\";\n  width?: number;\n};\n\nexport type ShellLayoutTemplateHook = (\n  props: ShellLayoutTemplateProps,\n) => ReactElement;\n\n/**\n * The Shell Layout is the outermost 'chrome' of the appliciation,\n * enclosing the main content area. It will be rendered by one of\n * two available templates, determined by the layoutTemplateId,\n */\nexport interface ShellLayoutProps {\n  /**\n   * App Header will be rendered in position determined by layout-template\n   */\n  appHeader?: ReactNode;\n\n  /**\n   * HTML attributes that will be applied to root div.\n   */\n  htmlAttributes?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * identifier for shell layout template to be used. Default template\n   * will be \"inlay\"\n   */\n  layoutTemplateId?: LayoutTemplateId;\n  /**\n   * If template renders SidePanel, these props will be provided\n   */\n  SidePanelProps?: ShellSidePanelProps;\n  /**\n   * If template renders Toolbar, these props will be provided\n   */\n  ToolbarProps?: ShellToolbarProps;\n}\n\n/**\n * This hook acts as a stub for the actual shell layout\n * template hooks. It will delegate to the appropriate shell\n * layout hook, based on the value of layoutTemplateId.\n */\nexport const useShellLayout = ({\n  layoutTemplateId = \"simple-content-pane\",\n  ...props\n}: ShellLayoutProps) => {\n  const useLayoutHook = LayoutHook[layoutTemplateId];\n  return useLayoutHook(props);\n};\n"],"names":["useFullHeightLeftPanel","useInlayLeftPanel","useLeftMainTabs","useSimpleContentPane"],"mappings":";;;;;;;AAOA,MAAM,UAAa,GAAA;AAAA,EACjB,aAAe,EAAAA,6CAAA;AAAA,EACf,KAAO,EAAAC,mCAAA;AAAA,EACP,gBAAkB,EAAAC,+BAAA;AAAA,EAClB,qBAAuB,EAAAC;AACzB,CAAA;AAsDO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,gBAAmB,GAAA,qBAAA;AAAA,EACnB,GAAG;AACL,CAAwB,KAAA;AACtB,EAAM,MAAA,aAAA,GAAgB,WAAW,gBAAgB,CAAA;AACjD,EAAA,OAAO,cAAc,KAAK,CAAA;AAC5B;;;;"}

package/cjs/shell.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var shellCss = ".vuuShell {\n  background-color: var(\n    --vuuShell-background,\n    var(--salt-container-primary-background)\n  );\n  height: var(--vuuShell-height, 100vh);\n  width: var(--vuuShell-width, 100vw);\n\n  .left-main-tabs {\n    --vuuOverflowContainer-width: 48px;\n  }\n}\n\n.vuu-workspace-tabs {\n  background: var(\n    --vuuWorkspace-background,\n    var(--salt-container-primary-background)\n  );\n}\n\n.vuuShell-palette {\n  --vuuView-border: none;\n  --vuuView-margin: 0;\n}\n\n.vuuShell-warningPlaceholder {\n  background-color: var(--salt-container-background-high);\n  height: 100%;\n}\n\n/* until we reinstat5e the toolbar */\n.vuuToolbarProxy {\n  background: var(--salt-container-primary-background);\n}\n\n.vuu-workspace-tabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {\n  background: var(--vuuShell-background, var(--vuu-color-gray-25));\n}\n\n.vuu-workspace-tabs {\n  --vuuTab-height: 28px;\n  border: solid 1px var(--salt-separable-primary-borderColor);\n  border-top: none !important;\n  border-radius: 6px;\n  height: 100%;\n  padding: 36px 8px 8px 8px;\n  position: relative;\n  width: 100%;\n}\n\n.vuu-workspace-tabs > .vuuTabstrip {\n  left: 0px;\n  padding-bottom: 7px;\n  position: absolute !important;\n  right: 0px;\n  top: 0;\n}\n\n.vuuShell-content {\n  padding: var(--vuuShell-content-padding, 8px);\n}\n";
+
+module.exports = shellCss;
+//# sourceMappingURL=shell.css.js.map

package/cjs/shell.css.js.map

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

package/cjs/shell.js

@@ -0,0 +1,161 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuDataRemote = require('@vuu-ui/vuu-data-remote');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var vuuPopups = require('@vuu-ui/vuu-popups');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var AppHeader = require('./app-header/AppHeader.js');
+var ApplicationProvider = require('./application-provider/ApplicationProvider.js');
+var PersistenceProvider = require('./persistence-manager/PersistenceProvider.js');
+var LocalPersistenceManager = require('./persistence-manager/LocalPersistenceManager.js');
+require('@vuu-ui/vuu-ui-controls');
+require('@salt-ds/core');
+require('clsx');
+require('./persistence-manager/StaticPersistenceManager.js');
+var useShellLayout = require('./shell-layout-templates/useShellLayout.js');
+var UserSettingsPanel = require('./user-settings/UserSettingsPanel.js');
+require('html-to-image');
+var WorkspaceProvider = require('./workspace-management/WorkspaceProvider.js');
+require('./feature-and-layout-provider/FeatureAndLayoutProvider.js');
+var defaultWorkspaceJSON = require('./workspace-management/defaultWorkspaceJSON.js');
+var useWorkspaceContextMenuItems = require('./workspace-management/useWorkspaceContextMenuItems.js');
+var shell = require('./shell.css.js');
+var vuuContextMenu = require('@vuu-ui/vuu-context-menu');
+
+vuuUtils.registerComponent("ApplicationSettings", UserSettingsPanel.UserSettingsPanel, "view");
+if (process.env.NODE_ENV === "production") {
+  if (typeof vuuLayout.StackLayout !== "function") {
+    console.warn(
+      "StackLayout module not loaded, will be unable to deserialize from layout JSON"
+    );
+  }
+}
+const { error } = vuuUtils.logger("Shell");
+const defaultAppHeader = /* @__PURE__ */ jsxRuntime.jsx(AppHeader.AppHeader, {});
+const getAppHeader = (shellLayoutProps) => shellLayoutProps?.appHeader ?? defaultAppHeader;
+const defaultHTMLAttributes = {
+  className: "vuuShell"
+};
+const getHTMLAttributes = (props) => {
+  if (props?.htmlAttributes) {
+    return {
+      ...defaultHTMLAttributes,
+      ...props.htmlAttributes
+    };
+  } else {
+    return defaultHTMLAttributes;
+  }
+};
+const VuuApplication = ({
+  shellLayoutProps: ShellLayoutProps2,
+  children,
+  // loginUrl, // need to make this available to app header
+  serverUrl,
+  user
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-shell",
+    css: shell,
+    window: targetWindow
+  });
+  const notify = vuuPopups.useNotifications();
+  const { workspaceJSON, saveApplicationLayout } = WorkspaceProvider.useWorkspace();
+  const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems.useWorkspaceContextMenuItems();
+  const handleLayoutChange = React.useCallback(
+    (layout) => {
+      try {
+        saveApplicationLayout(layout);
+      } catch {
+        error?.("Failed to save layout");
+      }
+    },
+    [saveApplicationLayout]
+  );
+  React.useMemo(async () => {
+    if (serverUrl && user.token) {
+      const connectionResult = await vuuDataRemote.ConnectionManager.connect({
+        token: user.token,
+        url: serverUrl,
+        username: user.username
+      });
+      if (connectionResult === "rejected") {
+        notify({
+          type: "error",
+          body: "Unable to connect to VUU Server",
+          header: "Error"
+        });
+      }
+    } else {
+      console.warn(
+        `Shell: serverUrl: '${serverUrl}', token: '${Array(user.token.length).fill("#").join("")}'  
+        `
+      );
+    }
+  }, [notify, serverUrl, user.token, user.username]);
+  const isLayoutLoading = workspaceJSON === defaultWorkspaceJSON.loadingJSON;
+  const initialLayout = useShellLayout.useShellLayout({
+    ...ShellLayoutProps2,
+    appHeader: getAppHeader(ShellLayoutProps2),
+    htmlAttributes: getHTMLAttributes(ShellLayoutProps2)
+  });
+  return isLayoutLoading ? null : /* @__PURE__ */ jsxRuntime.jsxs(
+    vuuContextMenu.ContextMenuProvider,
+    {
+      menuActionHandler: handleMenuAction,
+      menuBuilder: buildMenuOptions,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          vuuLayout.LayoutProvider,
+          {
+            workspaceJSON,
+            onLayoutChange: handleLayoutChange,
+            children: initialLayout
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+const Shell = ({
+  loginUrl,
+  user,
+  userSettingsSchema,
+  workspaceProps,
+  ...props
+}) => {
+  const persistenceManager = PersistenceProvider.usePersistenceManager();
+  const localPersistenceManager = React.useMemo(() => {
+    if (persistenceManager) {
+      return void 0;
+    }
+    console.log(
+      `No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`
+    );
+    return new LocalPersistenceManager.LocalPersistenceManager(`vuu/${user.username}`);
+  }, [persistenceManager, user.username]);
+  const shellProviders = /* @__PURE__ */ jsxRuntime.jsx(
+    ApplicationProvider.ApplicationProvider,
+    {
+      density: "high",
+      loginUrl,
+      theme: "vuu-theme",
+      user,
+      userSettingsSchema,
+      children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceProvider.WorkspaceProvider, { ...workspaceProps, children: /* @__PURE__ */ jsxRuntime.jsx(vuuPopups.DialogProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(vuuPopups.NotificationsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(VuuApplication, { ...props, user }) }) }) })
+    }
+  );
+  if (persistenceManager) {
+    return shellProviders;
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsx(PersistenceProvider.PersistenceProvider, { persistenceManager: localPersistenceManager, children: shellProviders });
+  }
+};
+
+exports.Shell = Shell;
+//# sourceMappingURL=shell.js.map

package/cjs/shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { ConnectionManager } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport { LayoutProvider, StackLayout } from \"@vuu-ui/vuu-layout\";\nimport {\n  DialogProvider,\n  NotificationsProvider,\n  useNotifications,\n} 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 { HTMLAttributes, ReactNode, useCallback, useMemo } from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport {\n  IPersistenceManager,\n  LocalPersistenceManager,\n  PersistenceProvider,\n  usePersistenceManager,\n} from \"./persistence-manager\";\nimport { ShellLayoutProps, useShellLayout } from \"./shell-layout-templates\";\nimport { SettingsSchema, UserSettingsPanel } from \"./user-settings\";\nimport {\n  WorkspaceProps,\n  WorkspaceProvider,\n  useWorkspace,\n  useWorkspaceContextMenuItems,\n} from \"./workspace-management\";\n\nimport shellCss from \"./shell.css\";\nimport { loadingJSON } from \"./workspace-management/defaultWorkspaceJSON\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-context-menu\";\n\nregisterComponent(\"ApplicationSettings\", UserSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unable to deserialize from layout JSON\",\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  shellLayoutProps?: ShellLayoutProps;\n  userSettingsSchema?: SettingsSchema;\n  workspaceProps?: WorkspaceProps;\n  children?: ReactNode;\n  loginUrl?: string;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nconst defaultAppHeader = <AppHeader />;\n\nconst getAppHeader = (shellLayoutProps?: ShellLayoutProps) =>\n  shellLayoutProps?.appHeader ?? defaultAppHeader;\n\nconst defaultHTMLAttributes: HTMLAttributes<HTMLDivElement> = {\n  className: \"vuuShell\",\n};\n\nconst getHTMLAttributes = (props?: ShellLayoutProps) => {\n  if (props?.htmlAttributes) {\n    return {\n      ...defaultHTMLAttributes,\n      ...props.htmlAttributes,\n    };\n  } else {\n    return defaultHTMLAttributes;\n  }\n};\n\nconst VuuApplication = ({\n  shellLayoutProps: ShellLayoutProps,\n  children,\n  // loginUrl, // need to make this available to app header\n  serverUrl,\n  user,\n}: Omit<\n  ShellProps,\n  \"ContentLayoutProps\" | \"loginUrl\" | \"userSettingsSchema\" | \"workspaceProps\"\n>) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const notify = useNotifications();\n  const { workspaceJSON, saveApplicationLayout } = useWorkspace();\n\n  const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();\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 connectionResult = await ConnectionManager.connect({\n        token: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      if (connectionResult === \"rejected\") {\n        notify({\n          type: \"error\",\n          body: \"Unable to connect to VUU Server\",\n          header: \"Error\",\n        });\n      }\n    } else {\n      console.warn(\n        `Shell: serverUrl: '${serverUrl}', token: '${Array(user.token.length)\n          .fill(\"#\")\n          .join(\"\")}'  \n        `,\n      );\n    }\n  }, [notify, serverUrl, user.token, user.username]);\n\n  const isLayoutLoading = workspaceJSON === loadingJSON;\n\n  const initialLayout = useShellLayout({\n    ...ShellLayoutProps,\n    appHeader: getAppHeader(ShellLayoutProps),\n    htmlAttributes: getHTMLAttributes(ShellLayoutProps),\n  });\n\n  return isLayoutLoading ? null : (\n    <ContextMenuProvider\n      menuActionHandler={handleMenuAction}\n      menuBuilder={buildMenuOptions}\n    >\n      <LayoutProvider\n        workspaceJSON={workspaceJSON}\n        onLayoutChange={handleLayoutChange}\n      >\n        {initialLayout}\n      </LayoutProvider>\n      {children}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Shell = ({\n  loginUrl,\n  user,\n  userSettingsSchema,\n  workspaceProps,\n  ...props\n}: ShellProps) => {\n  // If user has provided an implementation of IPersistenceManager\n  // by wrapping higher level PersistenceProvider, use it, otw\n  // default to LocalPersistenceManager\n  const persistenceManager = usePersistenceManager();\n  const localPersistenceManager = useMemo<\n    IPersistenceManager | undefined\n  >(() => {\n    if (persistenceManager) {\n      return undefined;\n    }\n    console.log(\n      `No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`,\n    );\n    return new LocalPersistenceManager(`vuu/${user.username}`);\n  }, [persistenceManager, user.username]);\n\n  // ApplicationProvider must go outside Dialog and Notification providers\n  // ApplicationProvider injects the SaltProvider and this must be the root\n  // SaltProvider.\n\n  const shellProviders = (\n    <ApplicationProvider\n      density=\"high\"\n      loginUrl={loginUrl}\n      theme=\"vuu-theme\"\n      user={user}\n      userSettingsSchema={userSettingsSchema}\n    >\n      <WorkspaceProvider {...workspaceProps}>\n        <DialogProvider>\n          <NotificationsProvider>\n            <VuuApplication {...props} user={user} />\n          </NotificationsProvider>\n        </DialogProvider>\n      </WorkspaceProvider>\n    </ApplicationProvider>\n  );\n\n  if (persistenceManager) {\n    return shellProviders;\n  } else {\n    return (\n      <PersistenceProvider persistenceManager={localPersistenceManager}>\n        {shellProviders}\n      </PersistenceProvider>\n    );\n  }\n};\n"],"names":["registerComponent","UserSettingsPanel","StackLayout","logger","AppHeader","ShellLayoutProps","useWindow","useComponentCssInjection","shellCss","useNotifications","useWorkspace","useWorkspaceContextMenuItems","useCallback","useMemo","ConnectionManager","loadingJSON","useShellLayout","jsxs","ContextMenuProvider","jsx","LayoutProvider","usePersistenceManager","LocalPersistenceManager","ApplicationProvider","WorkspaceProvider","DialogProvider","NotificationsProvider","PersistenceProvider"],"mappings":"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"}

package/cjs/theme-switch/ThemeSwitch.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var themeSwitchCss = "\n.vuuThemeSwitch {\n    --saltButton-minWidth: 22px;\n    --svg-light: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 31q2.9 0 4.95-2.05Q31 26.9 31 24q0-2.9-2.05-4.95Q26.9 17 24 17q-2.9 0-4.95 2.05Q17 21.1 17 24q0 2.9 2.05 4.95Q21.1 31 24 31Zm0 3q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM3.5 25.5q-.65 0-1.075-.425Q2 24.65 2 24q0-.65.425-1.075Q2.85 22.5 3.5 22.5h5q.65 0 1.075.425Q10 23.35 10 24q0 .65-.425 1.075-.425.425-1.075.425Zm36 0q-.65 0-1.075-.425Q38 24.65 38 24q0-.65.425-1.075.425-.425 1.075-.425h5q.65 0 1.075.425Q46 23.35 46 24q0 .65-.425 1.075-.425.425-1.075.425ZM24 10q-.65 0-1.075-.425Q22.5 9.15 22.5 8.5v-5q0-.65.425-1.075Q23.35 2 24 2q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 10 24 10Zm0 36q-.65 0-1.075-.425-.425-.425-.425-1.075v-5q0-.65.425-1.075Q23.35 38 24 38q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 46 24 46ZM12 14.1l-2.85-2.8q-.45-.45-.425-1.075.025-.625.425-1.075.45-.45 1.075-.45t1.075.45L14.1 12q.4.45.4 1.05 0 .6-.4 1-.4.45-1.025.45-.625 0-1.075-.4Zm24.7 24.75L33.9 36q-.4-.45-.4-1.075t.45-1.025q.4-.45 1-.45t1.05.45l2.85 2.8q.45.45.425 1.075-.025.625-.425 1.075-.45.45-1.075.45t-1.075-.45ZM33.9 14.1q-.45-.45-.45-1.05 0-.6.45-1.05l2.8-2.85q.45-.45 1.075-.425.625.025 1.075.425.45.45.45 1.075t-.45 1.075L36 14.1q-.4.4-1.025.4-.625 0-1.075-.4ZM9.15 38.85q-.45-.45-.45-1.075t.45-1.075L12 33.9q.45-.45 1.05-.45.6 0 1.05.45.45.45.45 1.05 0 .6-.45 1.05l-2.8 2.85q-.45.45-1.075.425-.625-.025-1.075-.425ZM24 24Z\"/></svg>');\n    --svg-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 42q-7.5 0-12.75-5.25T6 24q0-7.5 5.25-12.75T24 6q.4 0 .85.025.45.025 1.15.075-1.8 1.6-2.8 3.95-1 2.35-1 4.95 0 4.5 3.15 7.65Q28.5 25.8 33 25.8q2.6 0 4.95-.925T41.9 22.3q.05.6.075.975Q42 23.65 42 24q0 7.5-5.25 12.75T24 42Zm0-3q5.45 0 9.5-3.375t5.05-7.925q-1.25.55-2.675.825Q34.45 28.8 33 28.8q-5.75 0-9.775-4.025T19.2 15q0-1.2.25-2.575.25-1.375.9-3.125-4.9 1.35-8.125 5.475Q9 18.9 9 24q0 6.25 4.375 10.625T24 39Zm-.2-14.85Z\"/></svg>');\n    padding: 2px;\n}\n\n.salt-density-high .vuuThemeSwitch {\n    --saltButton-minWidth: 16px;\n    --saltButton-width: 18px;\n    --vuuThemeSwitch-iconSize: 16px;\n}\n\n.vuuThemeSwitch [data-icon] {\n    --vuu-icon-size: var(--vuuThemeSwitch-iconSize,18px);\n}\n\n.vuuThemeSwitch [data-icon='light'] {\n    --vuu-icon-svg: var(--svg-light);\n}\n.vuuThemeSwitch [data-icon='dark'] {\n    --vuu-icon-svg: var(--svg-dark);\n}\n\n.vuuThemeSwitch .saltToggleButton {\n    height: 20px;\n    width: 20px;\n}\n\n";
+
+module.exports = themeSwitchCss;
+//# sourceMappingURL=ThemeSwitch.css.js.map

package/cjs/theme-switch/ThemeSwitch.css.js.map

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

package/cjs/theme-switch/ThemeSwitch.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('clsx');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var ThemeSwitch$1 = require('./ThemeSwitch.css.js');
+
+const classBase = "vuuThemeSwitch";
+const ThemeSwitch = ({
+  className: classNameProp,
+  defaultMode: defaultModeProp,
+  mode: modeProp,
+  onChange,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-theme-switch",
+    css: ThemeSwitch$1,
+    window: targetWindow
+  });
+  const [mode, setMode] = core.useControlled({
+    controlled: modeProp,
+    default: defaultModeProp ?? "light",
+    name: "ThemeSwitch",
+    state: "mode"
+  });
+  const handleChangeSecondary = React.useCallback(
+    (evt) => {
+      const { value } = evt.target;
+      setMode(value);
+      onChange(value);
+    },
+    [onChange, setMode]
+  );
+  const className = cx(classBase, classNameProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.ToggleButtonGroup,
+    {
+      className,
+      ...htmlAttributes,
+      onChange: handleChangeSecondary,
+      value: mode,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { "aria-label": "alert", "data-icon": "light", value: "light" }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { "aria-label": "home", "data-icon": "dark", value: "dark" })
+      ]
+    }
+  );
+};
+
+exports.ThemeSwitch = ThemeSwitch;
+//# sourceMappingURL=ThemeSwitch.js.map

package/cjs/theme-switch/ThemeSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitch.js","sources":["../../src/theme-switch/ThemeSwitch.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ToggleButton, ToggleButtonGroup, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, SyntheticEvent, useCallback } from \"react\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\n\nimport themeSwitchCss from \"./ThemeSwitch.css\";\n\nconst classBase = \"vuuThemeSwitch\";\nexport interface ThemeSwitchProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultMode?: ThemeMode;\n  mode?: ThemeMode;\n  onChange: (mode: ThemeMode) => void;\n}\n\nexport const ThemeSwitch = ({\n  className: classNameProp,\n  defaultMode: defaultModeProp,\n  mode: modeProp,\n  onChange,\n  ...htmlAttributes\n}: ThemeSwitchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-theme-switch\",\n    css: themeSwitchCss,\n    window: targetWindow,\n  });\n\n  const [mode, setMode] = useControlled<ThemeMode>({\n    controlled: modeProp,\n    default: defaultModeProp ?? \"light\",\n    name: \"ThemeSwitch\",\n    state: \"mode\",\n  });\n\n  const handleChangeSecondary = useCallback(\n    (evt: SyntheticEvent<HTMLButtonElement>) => {\n      const { value } = evt.target as HTMLButtonElement;\n      setMode(value as ThemeMode);\n      onChange(value as ThemeMode);\n    },\n    [onChange, setMode],\n  );\n  const className = cx(classBase, classNameProp);\n  return (\n    <ToggleButtonGroup\n      className={className}\n      {...htmlAttributes}\n      onChange={handleChangeSecondary}\n      value={mode}\n    >\n      <ToggleButton aria-label=\"alert\" data-icon=\"light\" value=\"light\" />\n      <ToggleButton aria-label=\"home\" data-icon=\"dark\" value=\"dark\" />\n    </ToggleButtonGroup>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","themeSwitchCss","useControlled","useCallback","jsxs","ToggleButtonGroup","jsx","ToggleButton"],"mappings":";;;;;;;;;;AASA,MAAM,SAAY,GAAA,gBAAA;AAQX,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,WAAa,EAAA,eAAA;AAAA,EACb,IAAM,EAAA,QAAA;AAAA,EACN,QAAA;AAAA,EACA,GAAG;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,kBAAyB,CAAA;AAAA,IAC/C,UAAY,EAAA,QAAA;AAAA,IACZ,SAAS,eAAmB,IAAA,OAAA;AAAA,IAC5B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,IAC5B,CAAC,GAA2C,KAAA;AAC1C,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAA,OAAA,CAAQ,KAAkB,CAAA;AAC1B,MAAA,QAAA,CAAS,KAAkB,CAAA;AAAA,KAC7B;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,GACpB;AACA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA;AAC7C,EACE,uBAAAC,eAAA;AAAA,IAACC,sBAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACJ,QAAU,EAAA,qBAAA;AAAA,MACV,KAAO,EAAA,IAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,qBAAa,YAAW,EAAA,OAAA,EAAQ,WAAU,EAAA,OAAA,EAAQ,OAAM,OAAQ,EAAA,CAAA;AAAA,uCAChEA,iBAAa,EAAA,EAAA,YAAA,EAAW,QAAO,WAAU,EAAA,MAAA,EAAO,OAAM,MAAO,EAAA;AAAA;AAAA;AAAA,GAChE;AAEJ;;;;"}

package/cjs/user-settings/SettingsForm.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var settingsFormCss = ".vuuSettingsForm {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n}\n";
+
+module.exports = settingsFormCss;
+//# sourceMappingURL=SettingsForm.css.js.map