@vuu-ui/vuu-shell 0.8.32 → 0.8.34

package/cjs/packages/vuu-shell/src/connection-status/ConnectionStatusIcon.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cx = require('clsx');
+
+const ConnectionStatusIcon = ({
+  connectionStatus,
+  className,
+  element = "span",
+  ...props
+}) => {
+  const [classBase, setClassBase] = React.useState("vuuConnectingStatus");
+  React.useEffect(() => {
+    switch (connectionStatus) {
+      case "connected":
+      case "reconnected":
+        setClassBase("vuuActiveStatus");
+        break;
+      case "connecting":
+        setClassBase("vuuConnectingStatus");
+        break;
+      case "disconnected":
+        setClassBase("vuuDisconnectedStatus");
+        break;
+    }
+  }, [connectionStatus]);
+  const statusIcon = React.createElement(element, {
+    ...props,
+    className: cx("vuuStatus vuuIcon", classBase, className)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vuuStatus-container salt-theme", children: [
+    statusIcon,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vuuStatus-text", children: [
+      "Status: ",
+      connectionStatus.toUpperCase()
+    ] })
+  ] }) });
+};
+
+exports.ConnectionStatusIcon = ConnectionStatusIcon;
+//# sourceMappingURL=ConnectionStatusIcon.js.map

package/cjs/packages/vuu-shell/src/connection-status/ConnectionStatusIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionStatusIcon.js","sources":["../../../../../src/connection-status/ConnectionStatusIcon.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport \"./ConnectionStatusIcon.css\";\n\ntype connectionStatus =\n  | \"connected\"\n  | \"reconnected\"\n  | \"connecting\"\n  | \"disconnected\";\n\ninterface ConnectionStatusProps {\n  connectionStatus: connectionStatus;\n  className?: string;\n  props?: unknown;\n  element?: string;\n}\n\nexport const ConnectionStatusIcon = ({\n  connectionStatus,\n  className,\n  element = \"span\",\n  ...props\n}: ConnectionStatusProps) => {\n  const [classBase, setClassBase] = useState<string>(\"vuuConnectingStatus\");\n  useEffect(() => {\n    switch (connectionStatus) {\n      case \"connected\":\n      case \"reconnected\":\n        setClassBase(\"vuuActiveStatus\");\n        break;\n      case \"connecting\":\n        setClassBase(\"vuuConnectingStatus\");\n        break;\n      case \"disconnected\":\n        setClassBase(\"vuuDisconnectedStatus\");\n        break;\n      default:\n        break;\n    }\n  }, [connectionStatus]);\n\n  const statusIcon = React.createElement(element, {\n    ...props,\n    className: cx(\"vuuStatus vuuIcon\", classBase, className),\n  });\n\n  return (\n    <>\n      <div className=\"vuuStatus-container salt-theme\">\n        {statusIcon}\n        <div className=\"vuuStatus-text\">\n          Status: {connectionStatus.toUpperCase()}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["useState","useEffect","jsx","Fragment","jsxs"],"mappings":";;;;;;AAkBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,MAAA;AAAA,EACV,GAAG,KAAA;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAiB,qBAAqB,CAAA,CAAA;AACxE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,QAAQ,gBAAkB;AAAA,MACxB,KAAK,WAAA,CAAA;AAAA,MACL,KAAK,aAAA;AACH,QAAA,YAAA,CAAa,iBAAiB,CAAA,CAAA;AAC9B,QAAA,MAAA;AAAA,MACF,KAAK,YAAA;AACH,QAAA,YAAA,CAAa,qBAAqB,CAAA,CAAA;AAClC,QAAA,MAAA;AAAA,MACF,KAAK,cAAA;AACH,QAAA,YAAA,CAAa,uBAAuB,CAAA,CAAA;AACpC,QAAA,MAAA;AAEA,KACJ;AAAA,GACF,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,UAAA,GAAa,KAAM,CAAA,aAAA,CAAc,OAAS,EAAA;AAAA,IAC9C,GAAG,KAAA;AAAA,IACH,SAAW,EAAA,EAAA,CAAG,mBAAqB,EAAA,SAAA,EAAW,SAAS,CAAA;AAAA,GACxD,CAAA,CAAA;AAED,EAAA,uBAEIC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,kBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gCACZ,EAAA,QAAA,EAAA;AAAA,IAAA,UAAA;AAAA,oBACDA,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gBAAiB,EAAA,QAAA,EAAA;AAAA,MAAA,UAAA;AAAA,MACrB,iBAAiB,WAAY,EAAA;AAAA,KACxC,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/packages/vuu-shell/src/feature/Feature.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var FeatureErrorBoundary = require('./FeatureErrorBoundary.js');
+var Loader = require('./Loader.js');
+var cssModuleLoader = require('./css-module-loader.js');
+
+const componentsMap = /* @__PURE__ */ new Map();
+const useCachedFeature = (url) => {
+  React.useEffect(
+    () => () => {
+      componentsMap.delete(url);
+    },
+    [url]
+  );
+  if (!componentsMap.has(url)) {
+    componentsMap.set(
+      url,
+      React.lazy(() => import(
+        /* @vite-ignore */
+        url
+      ))
+    );
+  }
+  const lazyFeature = componentsMap.get(url);
+  if (!lazyFeature) {
+    throw Error(`Unable to load Lazy Feature at url ${url}`);
+  } else {
+    return lazyFeature;
+  }
+};
+function RawFeature({
+  url,
+  css,
+  ComponentProps: params,
+  ...props
+}) {
+  if (css) {
+    cssModuleLoader.importCSS(css).then((styleSheet) => {
+      document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        styleSheet
+      ];
+    });
+  }
+  const LazyFeature = useCachedFeature(url);
+  return /* @__PURE__ */ jsxRuntime.jsx(FeatureErrorBoundary.FeatureErrorBoundary, { url, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, {}), children: /* @__PURE__ */ jsxRuntime.jsx(LazyFeature, { ...props, ...params }) }) });
+}
+const Feature = React.memo(RawFeature);
+Feature.displayName = "Feature";
+vuuLayout.registerComponent("Feature", Feature, "view");
+
+exports.Feature = Feature;
+//# sourceMappingURL=Feature.js.map

package/cjs/packages/vuu-shell/src/feature/Feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feature.js","sources":["../../../../../src/feature/Feature.tsx"],"sourcesContent":["import React, { Suspense, useEffect } from \"react\";\nimport { registerComponent, ViewProps } from \"@vuu-ui/vuu-layout\";\nimport { FeatureErrorBoundary } from \"./FeatureErrorBoundary\";\nimport { Loader } from \"./Loader\";\nimport { importCSS } from \"./css-module-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,yBAAA,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;;;;"}

package/cjs/packages/vuu-shell/src/feature/FeatureErrorBoundary.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+class FeatureErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { errorMessage: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { errorMessage: error.message };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.log(`error creating component at ${this.props.url}`);
+    console.log(error, errorInfo);
+  }
+  render() {
+    if (this.state.errorMessage) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "An error occured while creating component." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: this.state.errorMessage })
+      ] });
+    }
+    return this.props.children;
+  }
+}
+
+exports.FeatureErrorBoundary = FeatureErrorBoundary;
+//# sourceMappingURL=FeatureErrorBoundary.js.map

package/cjs/packages/vuu-shell/src/feature/FeatureErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureErrorBoundary.js","sources":["../../../../../src/feature/FeatureErrorBoundary.tsx"],"sourcesContent":["import React, { ErrorInfo, ReactNode } from \"react\";\nimport { FeatureProps } from \"./Feature\";\n\nexport interface FeatureErrorBoundaryProps extends FeatureProps {\n  children: ReactNode;\n}\n\nexport class FeatureErrorBoundary extends React.Component<\n  FeatureErrorBoundaryProps,\n  any\n> {\n  constructor(props: FeatureErrorBoundaryProps) {\n    super(props);\n    this.state = { errorMessage: null };\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    // Update state so the next render will show the fallback UI.\n    return { errorMessage: error.message };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    // You can also log the error to an error reporting service\n    console.log(`error creating component at ${this.props.url}`);\n    console.log(error, errorInfo);\n  }\n\n  render() {\n    if (this.state.errorMessage) {\n      return (\n        <>\n          <h1>An error occured while creating component.</h1>\n          <p>{this.state.errorMessage}</p>\n        </>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;AAOa,MAAA,oBAAA,SAA6B,MAAM,SAG9C,CAAA;AAAA,EACA,YAAY,KAAkC,EAAA;AAC5C,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACX,IAAK,IAAA,CAAA,KAAA,GAAQ,EAAE,YAAA,EAAc,IAAK,EAAA,CAAA;AAAA,GACpC;AAAA,EAEA,OAAO,yBAAyB,KAAc,EAAA;AAE5C,IAAO,OAAA,EAAE,YAAc,EAAA,KAAA,CAAM,OAAQ,EAAA,CAAA;AAAA,GACvC;AAAA,EAEA,iBAAA,CAAkB,OAAc,SAAsB,EAAA;AAEpD,IAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,4BAAA,EAA+B,IAAK,CAAA,KAAA,CAAM,GAAG,CAAE,CAAA,CAAA,CAAA;AAC3D,IAAQ,OAAA,CAAA,GAAA,CAAI,OAAO,SAAS,CAAA,CAAA;AAAA,GAC9B;AAAA,EAEA,MAAS,GAAA;AACP,IAAI,IAAA,IAAA,CAAK,MAAM,YAAc,EAAA;AAC3B,MAAA,uBAEIA,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,QAAG,QAA0C,EAAA,4CAAA,EAAA,CAAA;AAAA,wBAC7CA,cAAA,CAAA,GAAA,EAAA,EAAG,QAAK,EAAA,IAAA,CAAA,KAAA,CAAM,YAAa,EAAA,CAAA;AAAA,OAC9B,EAAA,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,OAAO,KAAK,KAAM,CAAA,QAAA,CAAA;AAAA,GACpB;AACF;;;;"}

package/cjs/packages/vuu-shell/src/feature/Loader.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const Loader = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hwLoader" });
+
+exports.Loader = Loader;
+//# sourceMappingURL=Loader.js.map

package/cjs/packages/vuu-shell/src/feature/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sources":["../../../../../src/feature/Loader.tsx"],"sourcesContent":["// TODO\nexport const Loader = () => <div className=\"hwLoader\"></div>;\n"],"names":["jsx"],"mappings":";;;;AACO,MAAM,MAAS,GAAA,sBAAOA,cAAA,CAAA,KAAA,EAAA,EAAI,WAAU,UAAW,EAAA;;;;"}

package/cjs/packages/vuu-shell/src/feature/css-module-loader.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const importCSS = async (path) => {
+  const container = new CSSStyleSheet();
+  return fetch(path).then((x) => x.text()).then((x) => container.replace(x));
+};
+
+exports.importCSS = importCSS;
+//# sourceMappingURL=css-module-loader.js.map

package/cjs/packages/vuu-shell/src/feature/css-module-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-module-loader.js","sources":["../../../../../src/feature/css-module-loader.ts"],"sourcesContent":["export const importCSS = async (path: string) => {\n  const container = new CSSStyleSheet();\n  return fetch(path)\n    .then((x) => x.text())\n    .then((x) => container.replace(x));\n};\n"],"names":[],"mappings":";;AAAa,MAAA,SAAA,GAAY,OAAO,IAAiB,KAAA;AAC/C,EAAM,MAAA,SAAA,GAAY,IAAI,aAAc,EAAA,CAAA;AACpC,EAAA,OAAO,MAAM,IAAI,CAAA,CACd,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,IAAA,EAAM,CAAA,CACpB,KAAK,CAAC,CAAA,KAAM,SAAU,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA;AACrC;;;;"}

package/cjs/packages/vuu-shell/src/feature-list/FeatureList.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var Feature = require('../feature/Feature.js');
+
+const classBase = "vuuFeatureList";
+const FeatureList = ({
+  features,
+  title = "VUU TABLES",
+  ...htmlAttributes
+}) => {
+  const ViewProps = {};
+  const listProps = {
+    height: "100%"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      vuuLayout.Palette,
+      {
+        orientation: "vertical",
+        ListProps: listProps,
+        ViewProps,
+        children: features.map((featureProps, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          vuuLayout.PaletteItem,
+          {
+            closeable: true,
+            label: featureProps.title,
+            resizeable: true,
+            resize: "defer",
+            header: true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Feature.Feature, { ...featureProps })
+          },
+          i
+        ))
+      }
+    ) })
+  ] });
+};
+
+exports.FeatureList = FeatureList;
+//# sourceMappingURL=FeatureList.js.map

package/cjs/packages/vuu-shell/src/feature-list/FeatureList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureList.js","sources":["../../../../../src/feature-list/FeatureList.tsx"],"sourcesContent":["import { Palette, PaletteItem } from \"@vuu-ui/vuu-layout\";\nimport { ListProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes } from \"react\";\nimport { Feature, FeatureProps } from \"../feature/Feature\";\n\nimport \"./FeatureList.css\";\n\nconst classBase = \"vuuFeatureList\";\n\nexport interface FeatureListProps extends HTMLAttributes<HTMLDivElement> {\n  features: FeatureProps[];\n}\n\nexport const FeatureList = ({\n  features,\n  title = \"VUU TABLES\",\n  ...htmlAttributes\n}: FeatureListProps) => {\n  const ViewProps = {};\n\n  const listProps: Partial<ListProps> = {\n    height: \"100%\",\n  };\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      <div className={`${classBase}-header`}>{title}</div>\n      <div className={`${classBase}-content`}>\n        <Palette\n          orientation=\"vertical\"\n          ListProps={listProps}\n          ViewProps={ViewProps}\n        >\n          {features.map((featureProps, i) => (\n            <PaletteItem\n              closeable\n              key={i}\n              label={featureProps.title}\n              resizeable\n              resize=\"defer\"\n              header\n            >\n              <Feature {...featureProps} />\n            </PaletteItem>\n          ))}\n        </Palette>\n      </div>\n    </div>\n  );\n};\n"],"names":["jsxs","jsx","Palette","PaletteItem","Feature"],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAMX,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,KAAQ,GAAA,YAAA;AAAA,EACR,GAAG,cAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,YAAY,EAAC,CAAA;AAEnB,EAAA,MAAM,SAAgC,GAAA;AAAA,IACpC,MAAQ,EAAA,MAAA;AAAA,GACV,CAAA;AAEA,EAAA,uBACGA,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,WAAY,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,oBAC7CA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACC,WAAY,EAAA,UAAA;AAAA,QACZ,SAAW,EAAA,SAAA;AAAA,QACX,SAAA;AAAA,QAEC,QAAS,EAAA,QAAA,CAAA,GAAA,CAAI,CAAC,YAAA,EAAc,CAC3B,qBAAAD,cAAA;AAAA,UAACE,qBAAA;AAAA,UAAA;AAAA,YACC,SAAS,EAAA,IAAA;AAAA,YAET,OAAO,YAAa,CAAA,KAAA;AAAA,YACpB,UAAU,EAAA,IAAA;AAAA,YACV,MAAO,EAAA,OAAA;AAAA,YACP,MAAM,EAAA,IAAA;AAAA,YAEN,QAAA,kBAAAF,cAAA,CAACG,eAAS,EAAA,EAAA,GAAG,YAAc,EAAA,CAAA;AAAA,WAAA;AAAA,UANtB,CAAA;AAAA,SAQR,CAAA;AAAA,OAAA;AAAA,KAEL,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/packages/vuu-shell/src/index.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var AppHeader = require('./app-header/AppHeader.js');
+var ConnectionStatusIcon = require('./connection-status/ConnectionStatusIcon.js');
+var Feature = require('./feature/Feature.js');
+var SaveLayoutPanel = require('./layout-management/SaveLayoutPanel.js');
+var LayoutList = require('./layout-management/LayoutList.js');
+var useLayoutManager = require('./layout-management/useLayoutManager.js');
+var useLayoutContextMenuItems = require('./layout-management/useLayoutContextMenuItems.js');
+var LeftNav = require('./left-nav/LeftNav.js');
+var LoginPanel = require('./login/LoginPanel.js');
+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');
+var FeatureList = require('./feature-list/FeatureList.js');
+var ThemeSwitch = require('./theme-switch/ThemeSwitch.js');
+
+
+
+exports.AppHeader = AppHeader.AppHeader;
+exports.ConnectionStatusIcon = ConnectionStatusIcon.ConnectionStatusIcon;
+exports.Feature = Feature.Feature;
+exports.SaveLayoutPanel = SaveLayoutPanel.SaveLayoutPanel;
+exports.LayoutList = LayoutList.LayoutList;
+exports.LayoutManagementContext = useLayoutManager.LayoutManagementContext;
+exports.LayoutManagementProvider = useLayoutManager.LayoutManagementProvider;
+exports.useLayoutManager = useLayoutManager.useLayoutManager;
+exports.useLayoutContextMenuItems = useLayoutContextMenuItems.useLayoutContextMenuItems;
+exports.LeftNav = LeftNav.LeftNav;
+exports.LoginPanel = LoginPanel.LoginPanel;
+exports.getAuthDetailsFromCookies = loginUtils.getAuthDetailsFromCookies;
+exports.getAuthModeFromCookies = loginUtils.getAuthModeFromCookies;
+exports.logout = loginUtils.logout;
+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;
+exports.ShellContextProvider = ShellContextProvider.ShellContextProvider;
+exports.useShellContext = ShellContextProvider.useShellContext;
+exports.FeatureList = FeatureList.FeatureList;
+exports.ThemeSwitch = ThemeSwitch.ThemeSwitch;
+//# sourceMappingURL=index.js.map

package/cjs/packages/vuu-shell/src/index.js.map

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

package/cjs/packages/vuu-shell/src/layout-management/LayoutList.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var useLayoutManager = require('./useLayoutManager.js');
+var LayoutTile = require('./LayoutTile.js');
+
+const classBase = "vuuLayoutList";
+const LayoutList = (props) => {
+  const { layoutMetadata, loadLayoutById } = useLayoutManager.useLayoutManager();
+  const handleLoadLayout = (layoutId) => {
+    if (layoutId) {
+      loadLayoutById(layoutId);
+    }
+  };
+  const layoutsByGroup = layoutMetadata.reduce((acc, cur) => {
+    if (acc[cur.group]) {
+      return {
+        ...acc,
+        [cur.group]: [...acc[cur.group], cur]
+      };
+    }
+    return {
+      ...acc,
+      [cur.group]: [cur]
+    };
+  }, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classBase,
+      ...props,
+      role: "listbox",
+      "aria-label": "my layouts",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: "My Layouts" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          vuuUiControls.List,
+          {
+            height: "auto",
+            source: Object.entries(layoutsByGroup),
+            ListItem: ({ item }) => {
+              if (!item)
+                return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+              const [groupName, layoutMetadata2] = item;
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "list", "aria-label": groupName, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-groupName`, children: groupName }),
+                layoutMetadata2.map((metadata) => /* @__PURE__ */ jsxRuntime.jsx(
+                  LayoutTile.LayoutTile,
+                  {
+                    metadata,
+                    handleLoadLayout
+                  },
+                  metadata.id
+                ))
+              ] });
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.LayoutList = LayoutList;
+//# sourceMappingURL=LayoutList.js.map

package/cjs/packages/vuu-shell/src/layout-management/LayoutList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutList.js","sources":["../../../../../src/layout-management/LayoutList.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { List } from \"@vuu-ui/vuu-ui-controls\";\nimport { LayoutMetadata } from \"./layoutTypes\";\nimport { useLayoutManager } from \"./useLayoutManager\";\nimport { LayoutTile } from \"./LayoutTile\";\n\nimport \"./LayoutList.css\";\n\ntype LayoutGroups = {\n  [groupName: string]: LayoutMetadata[];\n};\n\nconst classBase = \"vuuLayoutList\";\n\nexport const LayoutList = (props: HTMLAttributes<HTMLDivElement>) => {\n  const { layoutMetadata, loadLayoutById } = useLayoutManager();\n\n  const handleLoadLayout = (layoutId?: string) => {\n    if (layoutId) {\n      loadLayoutById(layoutId);\n    }\n  };\n\n  const layoutsByGroup = layoutMetadata.reduce((acc: LayoutGroups, cur) => {\n    if (acc[cur.group]) {\n      return {\n        ...acc,\n        [cur.group]: [...acc[cur.group], cur],\n      };\n    }\n    return {\n      ...acc,\n      [cur.group]: [cur],\n    };\n  }, {});\n\n  return (\n    <div\n      className={classBase}\n      {...props}\n      role=\"listbox\"\n      aria-label=\"my layouts\"\n    >\n      <div className={`${classBase}-header`}>My Layouts</div>\n      <List<[string, LayoutMetadata[]]>\n        height=\"auto\"\n        source={Object.entries(layoutsByGroup)}\n        ListItem={({ item }) => {\n          if (!item) return <></>;\n          const [groupName, layoutMetadata] = item;\n          return (\n            <div role=\"list\" aria-label={groupName}>\n              <div className={`${classBase}-groupName`}>{groupName}</div>\n              {layoutMetadata.map((metadata) => (\n                <LayoutTile\n                  key={metadata.id}\n                  metadata={metadata}\n                  handleLoadLayout={handleLoadLayout}\n                />\n              ))}\n            </div>\n          );\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["useLayoutManager","jsxs","jsx","List","Fragment","layoutMetadata","LayoutTile"],"mappings":";;;;;;;AAYA,MAAM,SAAY,GAAA,eAAA,CAAA;AAEL,MAAA,UAAA,GAAa,CAAC,KAA0C,KAAA;AACnE,EAAA,MAAM,EAAE,cAAA,EAAgB,cAAe,EAAA,GAAIA,iCAAiB,EAAA,CAAA;AAE5D,EAAM,MAAA,gBAAA,GAAmB,CAAC,QAAsB,KAAA;AAC9C,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,cAAA,CAAe,QAAQ,CAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAA,cAAA,CAAe,MAAO,CAAA,CAAC,KAAmB,GAAQ,KAAA;AACvE,IAAI,IAAA,GAAA,CAAI,GAAI,CAAA,KAAK,CAAG,EAAA;AAClB,MAAO,OAAA;AAAA,QACL,GAAG,GAAA;AAAA,QACH,CAAC,GAAI,CAAA,KAAK,GAAG,CAAC,GAAG,GAAI,CAAA,GAAA,CAAI,KAAK,CAAA,EAAG,GAAG,CAAA;AAAA,OACtC,CAAA;AAAA,KACF;AACA,IAAO,OAAA;AAAA,MACL,GAAG,GAAA;AAAA,MACH,CAAC,GAAA,CAAI,KAAK,GAAG,CAAC,GAAG,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,SAAA;AAAA,MACV,GAAG,KAAA;AAAA,MACJ,IAAK,EAAA,SAAA;AAAA,MACL,YAAW,EAAA,YAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,WAAW,QAAU,EAAA,YAAA,EAAA,CAAA;AAAA,wBACjDA,cAAA;AAAA,UAACC,kBAAA;AAAA,UAAA;AAAA,YACC,MAAO,EAAA,MAAA;AAAA,YACP,MAAA,EAAQ,MAAO,CAAA,OAAA,CAAQ,cAAc,CAAA;AAAA,YACrC,QAAU,EAAA,CAAC,EAAE,IAAA,EAAW,KAAA;AACtB,cAAA,IAAI,CAAC,IAAA;AAAM,gBAAA,uBAASD,cAAA,CAAAE,mBAAA,EAAA,EAAA,CAAA,CAAA;AACpB,cAAM,MAAA,CAAC,SAAWC,EAAAA,eAAc,CAAI,GAAA,IAAA,CAAA;AACpC,cAAA,uBACGJ,eAAA,CAAA,KAAA,EAAA,EAAI,IAAK,EAAA,MAAA,EAAO,cAAY,SAC3B,EAAA,QAAA,EAAA;AAAA,gCAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,cAAe,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,gBACpDG,eAAAA,CAAe,GAAI,CAAA,CAAC,QACnB,qBAAAH,cAAA;AAAA,kBAACI,qBAAA;AAAA,kBAAA;AAAA,oBAEC,QAAA;AAAA,oBACA,gBAAA;AAAA,mBAAA;AAAA,kBAFK,QAAS,CAAA,EAAA;AAAA,iBAIjB,CAAA;AAAA,eACH,EAAA,CAAA,CAAA;AAAA,aAEJ;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/cjs/packages/vuu-shell/src/layout-management/LayoutTile.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const classBase = "vuuLayoutTile";
+const LayoutTile = (props) => {
+  const { metadata, handleLoadLayout } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listitem", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${classBase}-layoutTile`,
+      role: "button",
+      onClick: () => handleLoadLayout(metadata?.id),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("img", { className: `${classBase}-screenshot`, src: metadata?.screenshot }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-layoutName`, children: metadata?.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-layoutDetails`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: `${metadata?.user}, ${metadata?.created}` }) })
+        ] })
+      ]
+    },
+    metadata?.id
+  ) });
+};
+
+exports.LayoutTile = LayoutTile;
+//# sourceMappingURL=LayoutTile.js.map

package/cjs/packages/vuu-shell/src/layout-management/LayoutTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutTile.js","sources":["../../../../../src/layout-management/LayoutTile.tsx"],"sourcesContent":["import { LayoutMetadata } from \"./layoutTypes\";\n\nimport \"./LayoutTile.css\";\n\nconst classBase = \"vuuLayoutTile\";\n\ntype LayoutTileProps = {\n  metadata: LayoutMetadata;\n  handleLoadLayout: (layoutId?: string) => void;\n};\n\nexport const LayoutTile = (props: LayoutTileProps) => {\n  const { metadata, handleLoadLayout } = props;\n\n  return (\n    <div role=\"listitem\">\n      <div\n        className={`${classBase}-layoutTile`}\n        key={metadata?.id}\n        role=\"button\"\n        onClick={() => handleLoadLayout(metadata?.id)}\n      >\n        <img className={`${classBase}-screenshot`} src={metadata?.screenshot} />\n        <div>\n          <div className={`${classBase}-layoutName`}>{metadata?.name}</div>\n          <div className={`${classBase}-layoutDetails`}>\n            <div>{`${metadata?.user}, ${metadata?.created}`}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["jsx","jsxs"],"mappings":";;;;AAIA,MAAM,SAAY,GAAA,eAAA,CAAA;AAOL,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAM,MAAA,EAAE,QAAU,EAAA,gBAAA,EAAqB,GAAA,KAAA,CAAA;AAEvC,EACE,uBAAAA,cAAA,CAAC,KAAI,EAAA,EAAA,IAAA,EAAK,UACR,EAAA,QAAA,kBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,MAEvB,IAAK,EAAA,QAAA;AAAA,MACL,OAAS,EAAA,MAAM,gBAAiB,CAAA,QAAA,EAAU,EAAE,CAAA;AAAA,MAE5C,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAe,WAAA,CAAA,EAAA,GAAA,EAAK,UAAU,UAAY,EAAA,CAAA;AAAA,wCACrE,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAAA,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,WAAA,CAAA,EAAgB,oBAAU,IAAK,EAAA,CAAA;AAAA,0BAC1DA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,cAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA,CAAC,KAAK,EAAA,EAAA,QAAA,EAAA,CAAA,EAAG,UAAU,IAAI,CAAA,EAAA,EAAK,QAAU,EAAA,OAAO,IAAG,CAClD,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,IAVK,QAAU,EAAA,EAAA;AAAA,GAYnB,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/packages/vuu-shell/src/layout-management/SaveLayoutPanel.js

@@ -0,0 +1,140 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var screenshotUtils = require('./screenshot-utils.js');
+var core = require('@salt-ds/core');
+var React = require('react');
+require('clsx');
+var loginUtils = require('../login/login-utils.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 [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();
+  React.useEffect(() => {
+    if (componentId) {
+      screenshotUtils.takeScreenshot(document.getElementById(componentId)).then((screenshot2) => {
+        setScreenshot(screenshot2);
+      }).catch((error) => {
+        setScreenshotErrorMessage(error.message);
+      });
+    }
+  }, [componentId]);
+  const handleSubmit = () => {
+    onSave({
+      name: layoutName,
+      group,
+      screenshot: screenshot ?? "",
+      user: username
+    });
+  };
+  const screenshotContent = React.useMemo(() => {
+    if (screenshot) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          className: `${classBase}-screenshot`,
+          src: screenshot,
+          alt: "screenshot of current layout"
+        }
+      );
+    }
+    if (screenshotErrorMessage) {
+      return /* @__PURE__ */ jsxRuntime.jsx(core.Text, { children: screenshotErrorMessage });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "spinner" });
+  }, [screenshot, screenshotErrorMessage]);
+  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,
+            {
+              source: groups,
+              allowFreeText: true,
+              InputProps: {
+                inputProps: {
+                  className: `${classBase}-inputText`,
+                  placeholder: "Select Group or Enter New Name",
+                  onChange: (event) => setGroup(event.target.value)
+                }
+              },
+              width: "100%",
+              onSelectionChange: (_, value) => setGroup(value || "")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { className: formField, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Layout Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Input,
+            {
+              inputProps: {
+                className: `${classBase}-inputText`,
+                placeholder: "Enter Layout Name"
+              },
+              onChange: (event) => setLayoutName(event.target.value),
+              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 })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-buttonsContainer`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Button, { className: `${classBase}-cancelButton`, onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Button,
+        {
+          className: `${classBase}-saveButton`,
+          onClick: handleSubmit,
+          disabled: layoutName === "" || group === "",
+          children: "Save"
+        }
+      )
+    ] })
+  ] });
+};
+
+exports.SaveLayoutPanel = SaveLayoutPanel;
+//# sourceMappingURL=SaveLayoutPanel.js.map

package/cjs/packages/vuu-shell/src/layout-management/SaveLayoutPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveLayoutPanel.js","sources":["../../../../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { Checkbox, ComboBox, RadioButton } from \"@vuu-ui/vuu-ui-controls\";\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 \"./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 [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":["useState","getAuthDetailsFromCookies","useEffect","takeScreenshot","screenshot","useMemo","jsx","Text","jsxs","FormField","FormFieldLabel","ComboBox","Input","Checkbox","RadioButton","Button"],"mappings":"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"}

package/cjs/packages/vuu-shell/src/layout-management/screenshot-utils.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('../../../../node_modules/html-to-image/es/index.js');
+
+const takeScreenshot = (node) => {
+  return new Promise((resolve, reject) => {
+    index.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"));
+    });
+  });
+};
+
+exports.takeScreenshot = takeScreenshot;
+//# sourceMappingURL=screenshot-utils.js.map

package/cjs/packages/vuu-shell/src/layout-management/screenshot-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenshot-utils.js","sources":["../../../../../src/layout-management/screenshot-utils.ts"],"sourcesContent":["import { toPng } from \"html-to-image\";\n\n/**\n * Takes a screenshot of the given node and returns the base64 encoded image url\n * @param node HTMLElement to take screenshot of\n * @returns Base64 encoded image url\n */\nexport const takeScreenshot = (node: HTMLElement): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    toPng(node, {\n      cacheBust: true /*,\n      filter: (child) =>\n        // remove content of table rows\n        child.nodeType === Node.TEXT_NODE ||\n        child.getAttribute(\"role\") !== \"row\",*/,\n    })\n      .then((screenshot) => {\n        if (!screenshot) {\n          reject(new Error(\"No Screenshot available\"));\n        }\n        resolve(screenshot);\n      })\n      .catch((error: Error) => {\n        console.error(\n          \"the following error occurred while taking a screenshot of a DOMNode\",\n          error\n        );\n        reject(new Error(\"Error taking screenshot\"));\n      });\n  });\n};\n"],"names":["toPng"],"mappings":";;;;AAOa,MAAA,cAAA,GAAiB,CAAC,IAAuC,KAAA;AACpE,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,EAAS,MAAW,KAAA;AACtC,IAAAA,WAAA,CAAM,IAAM,EAAA;AAAA,MACV,SAAW,EAAA,IAAA;AAAA,KAKZ,CAAA,CACE,IAAK,CAAA,CAAC,UAAe,KAAA;AACpB,MAAA,IAAI,CAAC,UAAY,EAAA;AACf,QAAO,MAAA,CAAA,IAAI,KAAM,CAAA,yBAAyB,CAAC,CAAA,CAAA;AAAA,OAC7C;AACA,MAAA,OAAA,CAAQ,UAAU,CAAA,CAAA;AAAA,KACnB,CAAA,CACA,KAAM,CAAA,CAAC,KAAiB,KAAA;AACvB,MAAQ,OAAA,CAAA,KAAA;AAAA,QACN,qEAAA;AAAA,QACA,KAAA;AAAA,OACF,CAAA;AACA,MAAO,MAAA,CAAA,IAAI,KAAM,CAAA,yBAAyB,CAAC,CAAA,CAAA;AAAA,KAC5C,CAAA,CAAA;AAAA,GACJ,CAAA,CAAA;AACH;;;;"}