@vuu-ui/vuu-shell 0.8.60 → 0.8.61

package/cjs/feature/Feature.js.map

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

package/cjs/feature-list/FeatureList.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var featureListCss = ".vuuFeatureList {\n  background: var(\n    --vuuFeatureList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: var(--vuuFeatureList-padding);\n}\n\n.vuuFeatureList-header {\n  flex: 0 0 40px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuFeatureList-content {\n  flex: 1 1 auto;\n  font-size: 12px;\n  font-weight: 700;\n}\n";
+var featureListCss = ".vuuFeatureList {\n  --vuuListItem-padding: var(--salt-spacing-200);\n  background: var(\n    --vuuFeatureList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuFeatureList-padding, 0);\n}\n\n.vuuFeatureList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuFeatureList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuFeatureList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuFeatureList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuFeatureList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuFeatureList-group + .vuuFeatureList-group {\n  margin-top: 24px;\n}\n\n.vuuFeatureList-itemName {\n  font-weight: 700;\n}\n";
 
 module.exports = featureListCss;
 //# sourceMappingURL=FeatureList.css.js.map

package/cjs/feature-list/FeatureList.js

@@ -2,12 +2,24 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var vuuLayout = require('@vuu-ui/vuu-layout');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
 var Feature = require('../feature/Feature.js');
 var FeatureList$1 = require('./FeatureList.css.js');
 
 const classBase = "vuuFeatureList";
+const listPropsFullHeight = {
+  height: void 0,
+  itemHeight: 40
+};
+const listPropsAutoHeight = {
+  displayedItemCount: 100,
+  height: void 0,
+  itemHeight: 40
+};
 const FeatureList = ({
   features,
   title = "VUU TABLES",
@@ -19,32 +31,51 @@ const FeatureList = ({
     css: FeatureList$1,
     window: targetWindow
   });
-  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(
+  const content = React.useMemo(() => {
+    if (Array.isArray(features)) {
+      return [
+        /* @__PURE__ */ jsxRuntime.jsx(vuuLayout.Palette, { orientation: "vertical", ListProps: listPropsFullHeight, children: features.map((featureProps, i) => /* @__PURE__ */ jsxRuntime.jsxs(
           vuuLayout.PaletteItem,
           {
             closeable: true,
+            component: /* @__PURE__ */ jsxRuntime.jsx(Feature.Feature, { ...featureProps }),
             label: featureProps.title,
             resizeable: true,
             resize: "defer",
             header: true,
-            children: /* @__PURE__ */ jsxRuntime.jsx(Feature.Feature, { ...featureProps })
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "draggable", size: 18 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
+            ]
           },
           i
-        ))
-      }
-    ) })
+        )) }, "0")
+      ];
+    } else {
+      return Object.entries(features).map(([heading, featureList], index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-group`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-groupHeader`, children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(vuuLayout.Palette, { orientation: "vertical", ListProps: listPropsAutoHeight, children: featureList.map((featureProps, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          vuuLayout.PaletteItem,
+          {
+            closeable: true,
+            component: /* @__PURE__ */ jsxRuntime.jsx(Feature.Feature, { ...featureProps }),
+            label: featureProps.title,
+            resizeable: true,
+            resize: "defer",
+            header: true,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "draggable", size: 18 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
+            ]
+          },
+          i
+        )) })
+      ] }, index));
+    }
+  }, [features]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuScrollable"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children: content })
   ] });
 };
 

package/cjs/feature-list/FeatureList.js.map

@@ -1 +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 { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { Feature, FeatureProps } from \"../feature/Feature\";\n\nimport featureListCss from \"./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 targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-feature-list\",\n    css: featureListCss,\n    window: targetWindow,\n  });\n\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":["useWindow","useComponentCssInjection","featureListCss","jsxs","jsx","Palette","PaletteItem","Feature"],"mappings":";;;;;;;;;AAUA,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,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,YAAY,EAAC,CAAA;AAEnB,EAAA,MAAM,SAAgC,GAAA;AAAA,IACpC,MAAQ,EAAA,MAAA;AAAA,GACV,CAAA;AAEA,EAAA,uBACGC,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;;;;"}
+{"version":3,"file":"FeatureList.js","sources":["../../src/feature-list/FeatureList.tsx"],"sourcesContent":["import { Palette, PaletteItem } from \"@vuu-ui/vuu-layout\";\nimport { Icon, ListProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { Feature, FeatureProps } from \"../feature/Feature\";\n\nimport featureListCss from \"./FeatureList.css\";\n\nconst classBase = \"vuuFeatureList\";\n\nexport type GroupedFeatureProps<P extends object | undefined = object> = Record<\n  string,\n  FeatureProps<P>[]\n>;\n\nexport interface FeatureListProps<P extends object | undefined = object>\n  extends HTMLAttributes<HTMLDivElement> {\n  features: FeatureProps<P>[] | GroupedFeatureProps<P>;\n}\n\nconst listPropsFullHeight: Partial<ListProps> = {\n  height: undefined,\n  itemHeight: 40,\n};\nconst listPropsAutoHeight: Partial<ListProps> = {\n  displayedItemCount: 100,\n  height: undefined,\n  itemHeight: 40,\n};\n\nexport const FeatureList = ({\n  features,\n  title = \"VUU TABLES\",\n  ...htmlAttributes\n}: FeatureListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-feature-list\",\n    css: featureListCss,\n    window: targetWindow,\n  });\n\n  const content = useMemo<JSX.Element[]>(() => {\n    if (Array.isArray(features)) {\n      return [\n        <Palette key=\"0\" orientation=\"vertical\" ListProps={listPropsFullHeight}>\n          {features.map((featureProps, i) => (\n            <PaletteItem\n              closeable\n              component={<Feature {...featureProps} />}\n              key={i}\n              label={featureProps.title}\n              resizeable\n              resize=\"defer\"\n              header\n            >\n              <Icon name=\"draggable\" size={18} />\n              <span className={`${classBase}-itemName`}>\n                {featureProps.title}\n              </span>\n            </PaletteItem>\n          ))}\n        </Palette>,\n      ];\n    } else {\n      return Object.entries(features).map(([heading, featureList], index) => (\n        <div className={`${classBase}-group`} key={index}>\n          <div className={`${classBase}-groupHeader`}>{heading}</div>\n          <Palette orientation=\"vertical\" ListProps={listPropsAutoHeight}>\n            {featureList.map((featureProps, i) => (\n              <PaletteItem\n                closeable\n                component={<Feature {...featureProps} />}\n                key={i}\n                label={featureProps.title}\n                resizeable\n                resize=\"defer\"\n                header\n              >\n                <Icon name=\"draggable\" size={18} />\n                <span className={`${classBase}-itemName`}>\n                  {featureProps.title}\n                </span>\n              </PaletteItem>\n            ))}\n          </Palette>\n        </div>\n      ));\n    }\n  }, [features]);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n      <div className={`${classBase}-header`}>{title}</div>\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","featureListCss","useMemo","jsx","Palette","jsxs","PaletteItem","Feature","Icon"],"mappings":"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"}

package/cjs/index.js

@@ -13,11 +13,11 @@ var loginUtils = require('./login/login-utils.js');
 var defaultApplicationJson = require('./persistence-management/defaultApplicationJson.js');
 var LocalPersistenceManager = require('./persistence-management/LocalPersistenceManager.js');
 var RemotePersistenceManager = require('./persistence-management/RemotePersistenceManager.js');
+var StaticPersistenceManager = require('./persistence-management/StaticPersistenceManager.js');
 var SessionEditingForm = require('./session-editing-form/SessionEditingForm.js');
 var shell = require('./shell.js');
 var ContextPanel = require('./shell-layouts/context-panel/ContextPanel.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');
@@ -44,12 +44,11 @@ exports.loadingApplicationJson = defaultApplicationJson.loadingApplicationJson;
 exports.warningLayout = defaultApplicationJson.warningLayout;
 exports.LocalPersistenceManager = LocalPersistenceManager.LocalPersistenceManager;
 exports.RemotePersistenceManager = RemotePersistenceManager.RemotePersistenceManager;
+exports.StaticPersistenceManager = StaticPersistenceManager.StaticPersistenceManager;
 exports.SessionEditingForm = SessionEditingForm.SessionEditingForm;
 exports.Shell = shell.Shell;
 exports.ContextPanel = ContextPanel.ContextPanel;
 exports.SidePanel = SidePanel.SidePanel;
-exports.isTableSchema = shellTypes.isTableSchema;
-exports.isWildcardSchema = shellTypes.isWildcardSchema;
 exports.ShellContextProvider = ShellContextProvider.ShellContextProvider;
 exports.useShellContext = ShellContextProvider.useShellContext;
 exports.FeatureList = FeatureList.FeatureList;

package/cjs/index.js.map

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

package/cjs/layout-management/LayoutList.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var layoutListCss = ".vuuLayoutList {\n    --vuuLayoutList-width: 90%;\n    --vuuMeasuredContainer-flex: 1 1 1px;\n    align-self: stretch;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden;\n    padding-right: 6px;\n\n    /* compatible with Chrome, Edge, and Safari */\n    ::-webkit-scrollbar {\n        width: 4px;\n        height: 4px;\n    }\n\n    ::-webkit-scrollbar-track {\n        background: transparent;\n        margin-top: 15px;\n        margin-bottom: 15px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 4px;\n        background: #D9D9D9;\n    }\n}\n\n.vuuLayoutList-header {\n    display: flex;\n    flex: 0 0 47px;\n    width: var(--vuuLayoutList-width);\n    padding: 16px 0;\n    border-bottom: 1px solid rgba(119, 124, 148, 0.10);\n    color: var(--light-text-primary, #15171B);\n    font-weight: 700;\n    letter-spacing: 0.48px;\n    line-height: 200%;\n    text-transform: uppercase;\n}\n\n.vuuLayoutList-groupName {\n    display: flex;\n    padding-top: 24px;\n    width: var(--vuuLayoutList-width);\n    color: var(--light-text-secondary, #606477);\n    font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n    font-family: Nunito Sans;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 200%;\n    letter-spacing: 0.48px;\n    text-transform: uppercase;\n}\n\n.vuuLayoutList-layoutContainer {\n    display: flex;\n    align-items: center;\n    width: 90%;\n    height: auto;\n    gap: 8px;\n    padding: 8px 0;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n\n.vuuLayoutList-layoutName {\n    color: var(--light-text-primary, #15171B);\n    font-weight: 600;\n    line-height: 133.333%;\n    text-transform: capitalize;\n}\n\n.vuuLayoutList-screenshot {\n    width: 60px;\n    height: 45.6px;\n    border: 1px solid #D6D7DA;\n}\n\n.vuuLayoutList-layoutDetails {\n    color: var(--light-text-secondary, #606477);\n    font-size: 10px;\n    font-weight: 600;\n    line-height: 150%;\n}\n";
+var layoutListCss = ".vuuLayoutList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuuListItem-separator-color: transparent;\n\n  background: var(\n    --vuuLayoutList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuLayoutList-padding, 0);\n\n  .vuuListItem {\n    border-bottom: none;\n    justify-content: space-between;\n  }\n}\n\n.vuuLayoutList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuLayoutList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuLayoutList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuLayoutList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuLayoutList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuLayoutList-group + .vuuLayoutList-group {\n  margin-top: 24px;\n}\n\n/* .vuuLayoutList-groupName {\n  display: flex;\n  padding-top: 24px;\n  width: var(--vuuLayoutList-width);\n  font-feature-settings: \"ss02\" on, \"ss01\" on, \"salt\" on, \"liga\" off;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 200%;\n  letter-spacing: 0.48px;\n  text-transform: uppercase;\n} */\n\n.vuuLayoutList-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #d6d7da;\n}\n\n.vuuLayoutList-layoutDetails {\n  color: var(--light-text-secondary, #606477);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
 
 module.exports = layoutListCss;
 //# sourceMappingURL=LayoutList.css.js.map

package/cjs/layout-management/LayoutList.js

@@ -1,15 +1,21 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var useLayoutManager = require('./useLayoutManager.js');
 var LayoutTile = require('./LayoutTile.js');
+var cx = require('clsx');
 var LayoutList$1 = require('./LayoutList.css.js');
 
 const classBase = "vuuLayoutList";
-const LayoutList = (props) => {
+const LayoutList = ({
+  className,
+  title,
+  ...htmlAttributes
+}) => {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "vuu-layout-list",
@@ -17,11 +23,14 @@ const LayoutList = (props) => {
     window: targetWindow
   });
   const { layoutMetadata, loadLayoutById } = useLayoutManager.useLayoutManager();
-  const handleLoadLayout = (layoutId) => {
-    if (layoutId) {
-      loadLayoutById(layoutId);
-    }
-  };
+  const handleLoadLayout = React.useCallback(
+    (layoutId) => {
+      if (layoutId) {
+        loadLayoutById(layoutId);
+      }
+    },
+    [loadLayoutById]
+  );
   const layoutsByGroup = layoutMetadata.reduce((acc, cur) => {
     if (acc[cur.group]) {
       return {
@@ -34,41 +43,46 @@ const LayoutList = (props) => {
       [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" }),
+  const content = React.useMemo(() => {
+    return Object.entries(layoutsByGroup).map(
+      ([heading, layoutMetadata2], index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-group`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-groupHeader`, children: heading }),
         /* @__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
-                ))
-              ] });
-            }
+            height: void 0,
+            itemHeight: 68,
+            selectionStrategy: "none",
+            source: layoutMetadata2,
+            ListItem: ({ item, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(vuuUiControls.ListItem, { ...props, children: [
+              /* @__PURE__ */ React.createElement(
+                LayoutTile.LayoutTile,
+                {
+                  ...htmlAttributes,
+                  key: item?.id,
+                  metadata: item,
+                  onLoadLayout: handleLoadLayout
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                vuuUiControls.IconButton,
+                {
+                  className: `${classBase}-menu`,
+                  "data-embedded": true,
+                  icon: "more-vert",
+                  variant: "secondary"
+                }
+              )
+            ] })
           }
         )
-      ]
-    }
-  );
+      ] }, index)
+    );
+  }, [handleLoadLayout, htmlAttributes, layoutsByGroup]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuScrollable"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children: content })
+  ] });
 };
 
 exports.LayoutList = LayoutList;

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutList.js","sources":["../../src/layout-management/LayoutList.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { List } from \"@vuu-ui/vuu-ui-controls\";\nimport { LayoutMetadata } from \"./layoutTypes\";\nimport { useLayoutManager } from \"./useLayoutManager\";\nimport { LayoutTile } from \"./LayoutTile\";\n\nimport layoutListCss from \"./LayoutList.css\";\n\ntype LayoutGroups = {\n  [groupName: string]: LayoutMetadata[];\n};\n\nconst classBase = \"vuuLayoutList\";\n\nexport const LayoutList = (props: HTMLAttributes<HTMLDivElement>) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-list\",\n    css: layoutListCss,\n    window: targetWindow,\n  });\n\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":["useWindow","useComponentCssInjection","layoutListCss","useLayoutManager","jsxs","jsx","List","Fragment","layoutMetadata","LayoutTile"],"mappings":";;;;;;;;;;AAcA,MAAM,SAAY,GAAA,eAAA,CAAA;AAEL,MAAA,UAAA,GAAa,CAAC,KAA0C,KAAA;AACnE,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,cAAA,EAAgB,cAAe,EAAA,GAAIC,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;;;;"}
+{"version":3,"file":"LayoutList.js","sources":["../../src/layout-management/LayoutList.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useMemo } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { IconButton, List, ListItem } from \"@vuu-ui/vuu-ui-controls\";\nimport { LayoutMetadata } from \"./layoutTypes\";\nimport { useLayoutManager } from \"./useLayoutManager\";\nimport { LayoutTile } from \"./LayoutTile\";\nimport cx from \"clsx\";\n\nimport layoutListCss from \"./LayoutList.css\";\n\ntype LayoutGroups = {\n  [groupName: string]: LayoutMetadata[];\n};\n\nconst classBase = \"vuuLayoutList\";\n\nexport const LayoutList = ({\n  className,\n  title,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDivElement>) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-list\",\n    css: layoutListCss,\n    window: targetWindow,\n  });\n\n  const { layoutMetadata, loadLayoutById } = useLayoutManager();\n\n  const handleLoadLayout = useCallback(\n    (layoutId?: string) => {\n      if (layoutId) {\n        loadLayoutById(layoutId);\n      }\n    },\n    [loadLayoutById]\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  const content = useMemo<JSX.Element[]>(() => {\n    return Object.entries(layoutsByGroup).map(\n      ([heading, layoutMetadata], index) => (\n        <div className={`${classBase}-group`} key={index}>\n          <div className={`${classBase}-groupHeader`}>{heading}</div>\n          <List<LayoutMetadata, \"none\">\n            height={undefined}\n            itemHeight={68}\n            selectionStrategy=\"none\"\n            source={layoutMetadata}\n            ListItem={({ item, ...props }) => (\n              <ListItem {...props}>\n                <LayoutTile\n                  {...htmlAttributes}\n                  key={item?.id}\n                  metadata={item as LayoutMetadata}\n                  onLoadLayout={handleLoadLayout}\n                />\n                <IconButton\n                  className={`${classBase}-menu`}\n                  data-embedded\n                  icon=\"more-vert\"\n                  variant=\"secondary\"\n                />\n              </ListItem>\n            )}\n          />\n        </div>\n      )\n    );\n  }, [handleLoadLayout, htmlAttributes, layoutsByGroup]);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n      <div className={`${classBase}-header`}>{title}</div>\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","layoutListCss","useLayoutManager","useCallback","useMemo","layoutMetadata","jsxs","jsx","List","ListItem","createElement","LayoutTile","IconButton"],"mappings":"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"}

package/cjs/layout-management/LayoutTile.js

@@ -1,35 +1,37 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var LayoutTile$1 = require('./LayoutTile.css.js');
 
 const classBase = "vuuLayoutTile";
-const LayoutTile = (props) => {
-  const { metadata, handleLoadLayout } = props;
+const LayoutTile = ({
+  metadata,
+  onLoadLayout,
+  ...htmlAttributes
+}) => {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "vuu-layout-tile",
     css: LayoutTile$1,
     window: targetWindow
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listitem", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
+      ...htmlAttributes,
       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}` }) })
-        ] })
-      ]
+      key: metadata?.id,
+      onClick: () => onLoadLayout(metadata?.id)
     },
-    metadata?.id
-  ) });
+    /* @__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?.created}` }) })
+    ] })
+  );
 };
 
 exports.LayoutTile = LayoutTile;

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutTile.js","sources":["../../src/layout-management/LayoutTile.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { LayoutMetadata } from \"./layoutTypes\";\n\nimport layoutTileCss from \"./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  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-tile\",\n    css: layoutTileCss,\n    window: targetWindow,\n  });\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":["useWindow","useComponentCssInjection","layoutTileCss","jsx","jsxs"],"mappings":";;;;;;;AAMA,MAAM,SAAY,GAAA,eAAA,CAAA;AAOL,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAM,MAAA,EAAE,QAAU,EAAA,gBAAA,EAAqB,GAAA,KAAA,CAAA;AACvC,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,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;;;;"}
+{"version":3,"file":"LayoutTile.js","sources":["../../src/layout-management/LayoutTile.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { LayoutMetadata } from \"./layoutTypes\";\n\nimport layoutTileCss from \"./LayoutTile.css\";\n\nconst classBase = \"vuuLayoutTile\";\n\nexport interface LayoutTileProps extends HTMLAttributes<HTMLDivElement> {\n  metadata: LayoutMetadata;\n  onLoadLayout: (layoutId?: string) => void;\n}\n\nexport const LayoutTile = ({\n  metadata,\n  onLoadLayout,\n  ...htmlAttributes\n}: LayoutTileProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-tile\",\n    css: layoutTileCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={`${classBase}-layoutTile`}\n      key={metadata?.id}\n      onClick={() => onLoadLayout(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?.created}`}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","layoutTileCss","createElement","jsx"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,eAAA,CAAA;AAOX,MAAM,aAAa,CAAC;AAAA,EACzB,QAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAuB,KAAA;AACrB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,mBAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,MACvB,KAAK,QAAU,EAAA,EAAA;AAAA,MACf,OAAS,EAAA,MAAM,YAAa,CAAA,QAAA,EAAU,EAAE,CAAA;AAAA,KAAA;AAAA,oBAExCC,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAe,WAAA,CAAA,EAAA,GAAA,EAAK,UAAU,UAAY,EAAA,CAAA;AAAA,oCACrE,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAAA,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,WAAA,CAAA,EAAgB,oBAAU,IAAK,EAAA,CAAA;AAAA,sBAC1DA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,cAAA,CAAA,EAC1B,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA,EAAK,QAAG,EAAA,CAAA,EAAA,QAAA,EAAU,OAAO,CAAA,CAAA,EAAG,CAC/B,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/cjs/layout-management/useLayoutManager.js

@@ -7,6 +7,7 @@ var vuuPopups = require('@vuu-ui/vuu-popups');
 var defaultApplicationJson = require('../persistence-management/defaultApplicationJson.js');
 var LocalPersistenceManager = require('../persistence-management/LocalPersistenceManager.js');
 var RemotePersistenceManager = require('../persistence-management/RemotePersistenceManager.js');
+require('../persistence-management/StaticPersistenceManager.js');
 
 let _persistenceManager;
 const getPersistenceManager = () => {
@@ -124,10 +125,14 @@ const LayoutManagementProvider = ({
   );
   const saveLayout = React.useCallback(
     (metadata) => {
-      const layoutToSave = vuuLayout.resolveJSONPath(
-        applicationJSONRef.current.layout,
-        "#main-tabs.ACTIVE_CHILD"
-      );
+      let layoutToSave;
+      try {
+        layoutToSave = vuuLayout.resolveJSONPath(
+          applicationJSONRef.current.layout,
+          "#main-tabs.ACTIVE_CHILD"
+        );
+      } catch (e) {
+      }
       if (layoutToSave && vuuLayout.isLayoutJSON(layoutToSave)) {
         persistenceManager.createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata)).then((metadata2) => {
           notify({

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

@@ -1 +1 @@
-{"version":3,"file":"useLayoutManager.js","sources":["../../src/layout-management/useLayoutManager.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ApplicationJSON,\n  ApplicationSettings,\n  LayoutJSON,\n  resolveJSONPath,\n  ApplicationSetting,\n  isLayoutJSON,\n} from \"@vuu-ui/vuu-layout\";\nimport { useNotifications } from \"@vuu-ui/vuu-popups\";\nimport { LayoutMetadata, LayoutMetadataDto } from \"./layoutTypes\";\nimport {\n  defaultApplicationJson,\n  PersistenceManager,\n  loadingApplicationJson,\n  LocalPersistenceManager,\n  RemotePersistenceManager,\n} from \"../persistence-management\";\n\nlet _persistenceManager: PersistenceManager;\n\nconst getPersistenceManager = () => {\n  if (_persistenceManager === undefined) {\n    _persistenceManager = process.env.LOCAL\n      ? new LocalPersistenceManager()\n      : new RemotePersistenceManager();\n  }\n  return _persistenceManager;\n};\n\nexport const LayoutManagementContext = React.createContext<{\n  layoutMetadata: LayoutMetadata[];\n  saveLayout: (n: LayoutMetadataDto) => void;\n  applicationJson: ApplicationJSON;\n  saveApplicationLayout: (layout: LayoutJSON) => void;\n  getApplicationSettings: (\n    key?: keyof ApplicationSettings\n  ) => ApplicationSettings | ApplicationSetting | undefined;\n  saveApplicationSettings: (\n    settings: ApplicationSettings | ApplicationSetting,\n    key?: keyof ApplicationSettings\n  ) => void;\n  loadLayoutById: (id: string) => void;\n}>({\n  getApplicationSettings: () => undefined,\n  layoutMetadata: [],\n  saveLayout: () => undefined,\n  // The default Application JSON will be served if no LayoutManagementProvider\n  applicationJson: defaultApplicationJson,\n  saveApplicationLayout: () => undefined,\n  saveApplicationSettings: () => undefined,\n  loadLayoutById: () => undefined,\n});\n\ntype LayoutManagementProviderProps = {\n  children: JSX.Element | JSX.Element[];\n  persistenceManager?: PersistenceManager;\n};\n\nconst ensureLayoutHasTitle = (\n  layout: LayoutJSON,\n  layoutMetadata: LayoutMetadataDto\n) => {\n  if (layout.props?.title !== undefined) {\n    return layout;\n  } else {\n    return {\n      ...layout,\n      props: {\n        ...layout.props,\n        title: layoutMetadata.name,\n      },\n    };\n  }\n};\n\nexport const LayoutManagementProvider = ({\n  persistenceManager: persistenceManagerProp,\n  ...props\n}: LayoutManagementProviderProps) => {\n  const [layoutMetadata, setLayoutMetadata] = useState<LayoutMetadata[]>([]);\n  // TODO this default should probably be a loading state rather than the placeholder\n  // It will be replaced as soon as the localStorage/remote layout is resolved\n  const [, forceRefresh] = useState({});\n  const notify = useNotifications();\n  const applicationJSONRef = useRef<ApplicationJSON>(loadingApplicationJson);\n\n  const persistenceManager = useMemo<PersistenceManager>(\n    () => persistenceManagerProp ?? getPersistenceManager(),\n    [persistenceManagerProp]\n  );\n\n  const setApplicationJSON = useCallback(\n    (applicationJSON: ApplicationJSON, rerender = true) => {\n      applicationJSONRef.current = applicationJSON;\n      if (rerender) {\n        forceRefresh({});\n      }\n    },\n    []\n  );\n\n  const setApplicationLayout = useCallback(\n    (layout: LayoutJSON, rerender = true) => {\n      setApplicationJSON(\n        {\n          ...applicationJSONRef.current,\n          layout,\n        },\n        rerender\n      );\n    },\n    [setApplicationJSON]\n  );\n\n  const setApplicationSettings = useCallback(\n    (settings: ApplicationSettings) => {\n      setApplicationJSON(\n        {\n          ...applicationJSONRef.current,\n          settings: {\n            ...applicationJSONRef.current.settings,\n            ...settings,\n          },\n        },\n        false\n      );\n    },\n    [setApplicationJSON]\n  );\n\n  useEffect(() => {\n    persistenceManager\n      .loadMetadata()\n      .then((metadata) => {\n        setLayoutMetadata(metadata);\n      })\n      .catch((error: Error) => {\n        notify({\n          type: \"error\",\n          header: \"Failed to Load Layouts\",\n          body: \"Could not load list of available layouts\",\n        });\n        console.error(\"Error occurred while retrieving metadata\", error);\n      });\n\n    persistenceManager\n      .loadApplicationJSON()\n      .then((applicationJSON: ApplicationJSON) => {\n        setApplicationJSON(applicationJSON);\n      })\n      .catch((error: Error) => {\n        notify({\n          type: \"error\",\n          header: \"Failed to Load Layout\",\n          body: \"Could not load your latest view\",\n        });\n        console.error(\n          \"Error occurred while retrieving application layout\",\n          error\n        );\n      });\n  }, [notify, persistenceManager, setApplicationJSON]);\n\n  const saveApplicationLayout = useCallback(\n    (layout: LayoutJSON) => {\n      if (isLayoutJSON(layout)) {\n        setApplicationLayout(layout, false);\n        persistenceManager.saveApplicationJSON(applicationJSONRef.current);\n      } else {\n        console.error(\"Tried to save invalid application layout\", layout);\n      }\n    },\n    [persistenceManager, setApplicationLayout]\n  );\n\n  const saveLayout = useCallback(\n    (metadata: LayoutMetadataDto) => {\n      const layoutToSave = resolveJSONPath(\n        applicationJSONRef.current.layout,\n        \"#main-tabs.ACTIVE_CHILD\"\n      );\n\n      if (layoutToSave && isLayoutJSON(layoutToSave)) {\n        persistenceManager\n          .createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata))\n          .then((metadata) => {\n            notify({\n              type: \"success\",\n              header: \"Layout Saved Successfully\",\n              body: `${metadata.name} saved successfully`,\n            });\n            setLayoutMetadata((prev) => [...prev, metadata]);\n          })\n          .catch((error: Error) => {\n            notify({\n              type: \"error\",\n              header: \"Failed to Save Layout\",\n              body: `Failed to save layout ${metadata.name}`,\n            });\n            console.error(\"Error occurred while saving layout\", error);\n          });\n      } else {\n        console.error(\"Tried to save invalid layout\", layoutToSave);\n        notify({\n          type: \"error\",\n          header: \"Failed to Save Layout\",\n          body: \"Cannot save invalid layout\",\n        });\n      }\n    },\n    [notify, persistenceManager]\n  );\n\n  const saveApplicationSettings = useCallback(\n    (\n      settings: ApplicationSettings | ApplicationSetting,\n      key?: keyof ApplicationSettings\n    ) => {\n      const { settings: applicationSettings } = applicationJSONRef.current;\n      if (key) {\n        setApplicationSettings({\n          ...applicationSettings,\n          [key]: settings,\n        });\n      } else {\n        setApplicationSettings(settings as ApplicationSettings);\n      }\n      persistenceManager.saveApplicationJSON(applicationJSONRef.current);\n    },\n    [persistenceManager, setApplicationSettings]\n  );\n\n  const getApplicationSettings = useCallback(\n    (key?: keyof ApplicationSettings) => {\n      const { settings } = applicationJSONRef.current;\n      return key ? settings?.[key] : settings;\n    },\n    []\n  );\n\n  const loadLayoutById = useCallback(\n    (id: string) => {\n      persistenceManager\n        .loadLayout(id)\n        .then((layoutJson) => {\n          const { layout: currentLayout } = applicationJSONRef.current;\n          setApplicationLayout({\n            ...currentLayout,\n            children: (currentLayout.children || []).concat(layoutJson),\n            props: {\n              ...currentLayout.props,\n              active: currentLayout.children?.length ?? 0,\n            },\n          });\n        })\n        .catch((error: Error) => {\n          notify({\n            type: \"error\",\n            header: \"Failed to Load Layout\",\n            body: \"Failed to load the requested layout\",\n          });\n          console.error(\"Error occurred while loading layout\", error);\n        });\n    },\n    [notify, persistenceManager, setApplicationLayout]\n  );\n\n  return (\n    <LayoutManagementContext.Provider\n      value={{\n        getApplicationSettings,\n        layoutMetadata,\n        saveLayout,\n        applicationJson: applicationJSONRef.current,\n        saveApplicationLayout,\n        saveApplicationSettings,\n        loadLayoutById,\n      }}\n    >\n      {props.children}\n    </LayoutManagementContext.Provider>\n  );\n};\n\nexport const useLayoutManager = () => useContext(LayoutManagementContext);\n"],"names":["LocalPersistenceManager","RemotePersistenceManager","defaultApplicationJson","useState","useNotifications","useRef","loadingApplicationJson","useMemo","useCallback","useEffect","isLayoutJSON","resolveJSONPath","metadata","jsx","useContext"],"mappings":"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"}
+{"version":3,"file":"useLayoutManager.js","sources":["../../src/layout-management/useLayoutManager.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ApplicationJSON,\n  ApplicationSettings,\n  LayoutJSON,\n  resolveJSONPath,\n  ApplicationSetting,\n  isLayoutJSON,\n} from \"@vuu-ui/vuu-layout\";\nimport { useNotifications } from \"@vuu-ui/vuu-popups\";\nimport { LayoutMetadata, LayoutMetadataDto } from \"./layoutTypes\";\nimport {\n  defaultApplicationJson,\n  PersistenceManager,\n  loadingApplicationJson,\n  LocalPersistenceManager,\n  RemotePersistenceManager,\n} from \"../persistence-management\";\n\nlet _persistenceManager: PersistenceManager;\n\nconst getPersistenceManager = () => {\n  if (_persistenceManager === undefined) {\n    _persistenceManager = process.env.LOCAL\n      ? new LocalPersistenceManager()\n      : new RemotePersistenceManager();\n  }\n  return _persistenceManager;\n};\n\nexport const LayoutManagementContext = React.createContext<{\n  layoutMetadata: LayoutMetadata[];\n  saveLayout: (n: LayoutMetadataDto) => void;\n  applicationJson: ApplicationJSON;\n  saveApplicationLayout: (layout: LayoutJSON) => void;\n  getApplicationSettings: (\n    key?: keyof ApplicationSettings\n  ) => ApplicationSettings | ApplicationSetting | undefined;\n  saveApplicationSettings: (\n    settings: ApplicationSettings | ApplicationSetting,\n    key?: keyof ApplicationSettings\n  ) => void;\n  loadLayoutById: (id: string) => void;\n}>({\n  getApplicationSettings: () => undefined,\n  layoutMetadata: [],\n  saveLayout: () => undefined,\n  // The default Application JSON will be served if no LayoutManagementProvider\n  applicationJson: defaultApplicationJson,\n  saveApplicationLayout: () => undefined,\n  saveApplicationSettings: () => undefined,\n  loadLayoutById: () => undefined,\n});\n\ntype LayoutManagementProviderProps = {\n  children: JSX.Element | JSX.Element[];\n  persistenceManager?: PersistenceManager;\n};\n\nconst ensureLayoutHasTitle = (\n  layout: LayoutJSON,\n  layoutMetadata: LayoutMetadataDto\n) => {\n  if (layout.props?.title !== undefined) {\n    return layout;\n  } else {\n    return {\n      ...layout,\n      props: {\n        ...layout.props,\n        title: layoutMetadata.name,\n      },\n    };\n  }\n};\n\nexport const LayoutManagementProvider = ({\n  persistenceManager: persistenceManagerProp,\n  ...props\n}: LayoutManagementProviderProps) => {\n  const [layoutMetadata, setLayoutMetadata] = useState<LayoutMetadata[]>([]);\n  // TODO this default should probably be a loading state rather than the placeholder\n  // It will be replaced as soon as the localStorage/remote layout is resolved\n  const [, forceRefresh] = useState({});\n  const notify = useNotifications();\n  const applicationJSONRef = useRef<ApplicationJSON>(loadingApplicationJson);\n\n  const persistenceManager = useMemo<PersistenceManager>(\n    () => persistenceManagerProp ?? getPersistenceManager(),\n    [persistenceManagerProp]\n  );\n\n  const setApplicationJSON = useCallback(\n    (applicationJSON: ApplicationJSON, rerender = true) => {\n      applicationJSONRef.current = applicationJSON;\n      if (rerender) {\n        forceRefresh({});\n      }\n    },\n    []\n  );\n\n  const setApplicationLayout = useCallback(\n    (layout: LayoutJSON, rerender = true) => {\n      setApplicationJSON(\n        {\n          ...applicationJSONRef.current,\n          layout,\n        },\n        rerender\n      );\n    },\n    [setApplicationJSON]\n  );\n\n  const setApplicationSettings = useCallback(\n    (settings: ApplicationSettings) => {\n      setApplicationJSON(\n        {\n          ...applicationJSONRef.current,\n          settings: {\n            ...applicationJSONRef.current.settings,\n            ...settings,\n          },\n        },\n        false\n      );\n    },\n    [setApplicationJSON]\n  );\n\n  useEffect(() => {\n    persistenceManager\n      .loadMetadata()\n      .then((metadata) => {\n        setLayoutMetadata(metadata);\n      })\n      .catch((error: Error) => {\n        notify({\n          type: \"error\",\n          header: \"Failed to Load Layouts\",\n          body: \"Could not load list of available layouts\",\n        });\n        console.error(\"Error occurred while retrieving metadata\", error);\n      });\n\n    persistenceManager\n      .loadApplicationJSON()\n      .then((applicationJSON: ApplicationJSON) => {\n        setApplicationJSON(applicationJSON);\n      })\n      .catch((error: Error) => {\n        notify({\n          type: \"error\",\n          header: \"Failed to Load Layout\",\n          body: \"Could not load your latest view\",\n        });\n        console.error(\n          \"Error occurred while retrieving application layout\",\n          error\n        );\n      });\n  }, [notify, persistenceManager, setApplicationJSON]);\n\n  const saveApplicationLayout = useCallback(\n    (layout: LayoutJSON) => {\n      if (isLayoutJSON(layout)) {\n        setApplicationLayout(layout, false);\n        persistenceManager.saveApplicationJSON(applicationJSONRef.current);\n      } else {\n        console.error(\"Tried to save invalid application layout\", layout);\n      }\n    },\n    [persistenceManager, setApplicationLayout]\n  );\n\n  const saveLayout = useCallback(\n    (metadata: LayoutMetadataDto) => {\n      let layoutToSave: LayoutJSON | undefined;\n      try {\n        layoutToSave = resolveJSONPath(\n          applicationJSONRef.current.layout,\n          \"#main-tabs.ACTIVE_CHILD\"\n        );\n      } catch (e) {\n        // ignore, code below will handle\n      }\n\n      if (layoutToSave && isLayoutJSON(layoutToSave)) {\n        persistenceManager\n          .createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata))\n          .then((metadata) => {\n            notify({\n              type: \"success\",\n              header: \"Layout Saved Successfully\",\n              body: `${metadata.name} saved successfully`,\n            });\n            setLayoutMetadata((prev) => [...prev, metadata]);\n          })\n          .catch((error: Error) => {\n            notify({\n              type: \"error\",\n              header: \"Failed to Save Layout\",\n              body: `Failed to save layout ${metadata.name}`,\n            });\n            console.error(\"Error occurred while saving layout\", error);\n          });\n      } else {\n        console.error(\"Tried to save invalid layout\", layoutToSave);\n        notify({\n          type: \"error\",\n          header: \"Failed to Save Layout\",\n          body: \"Cannot save invalid layout\",\n        });\n      }\n    },\n    [notify, persistenceManager]\n  );\n\n  const saveApplicationSettings = useCallback(\n    (\n      settings: ApplicationSettings | ApplicationSetting,\n      key?: keyof ApplicationSettings\n    ) => {\n      const { settings: applicationSettings } = applicationJSONRef.current;\n      if (key) {\n        setApplicationSettings({\n          ...applicationSettings,\n          [key]: settings,\n        });\n      } else {\n        setApplicationSettings(settings as ApplicationSettings);\n      }\n      persistenceManager.saveApplicationJSON(applicationJSONRef.current);\n    },\n    [persistenceManager, setApplicationSettings]\n  );\n\n  const getApplicationSettings = useCallback(\n    (key?: keyof ApplicationSettings) => {\n      const { settings } = applicationJSONRef.current;\n      return key ? settings?.[key] : settings;\n    },\n    []\n  );\n\n  const loadLayoutById = useCallback(\n    (id: string) => {\n      persistenceManager\n        .loadLayout(id)\n        .then((layoutJson) => {\n          const { layout: currentLayout } = applicationJSONRef.current;\n          setApplicationLayout({\n            ...currentLayout,\n            children: (currentLayout.children || []).concat(layoutJson),\n            props: {\n              ...currentLayout.props,\n              active: currentLayout.children?.length ?? 0,\n            },\n          });\n        })\n        .catch((error: Error) => {\n          notify({\n            type: \"error\",\n            header: \"Failed to Load Layout\",\n            body: \"Failed to load the requested layout\",\n          });\n          console.error(\"Error occurred while loading layout\", error);\n        });\n    },\n    [notify, persistenceManager, setApplicationLayout]\n  );\n\n  return (\n    <LayoutManagementContext.Provider\n      value={{\n        getApplicationSettings,\n        layoutMetadata,\n        saveLayout,\n        applicationJson: applicationJSONRef.current,\n        saveApplicationLayout,\n        saveApplicationSettings,\n        loadLayoutById,\n      }}\n    >\n      {props.children}\n    </LayoutManagementContext.Provider>\n  );\n};\n\nexport const useLayoutManager = () => useContext(LayoutManagementContext);\n"],"names":["LocalPersistenceManager","RemotePersistenceManager","defaultApplicationJson","useState","useNotifications","useRef","loadingApplicationJson","useMemo","useCallback","useEffect","isLayoutJSON","resolveJSONPath","metadata","jsx","useContext"],"mappings":"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"}

package/cjs/left-nav/LeftNav.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var leftNavCss = ".vuuLeftNav {\n  --vuuOverflowContainer-height: auto;\n  --vuuFeatureList-padding: 195px 32px 16px 24px;\n  --salt-navigable-fontWeight-active: 700;\n  --vuuTab-background-selected: rgba(255, 255, 255, 0.1);\n  --vuuTab-hover-background: rgba(255, 255, 255, 0.1);\n  --vuuTab-before-content: none;\n  --vuuTab-borderRadius: 6px;\n  --vuuTab-height: 40px;\n  --vuuTabstrip-fontWeight: 700;\n  --vuuTabstrip-width: 100%;\n  --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n  --svg-features: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n  --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n  --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n  --vuu-light-text-primary: #15171b;\n\n  --menu-level-2-width: 0px;\n\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  display: flex;\n  height: calc(100% - 4px);\n  margin-bottom: 4px;\n  overflow: hidden;\n  position: relative;\n  transition: width 0.2s ease-out;\n  z-index: 0;\n  /* width: calc(var(--menu-width) + var(--menu-level-2-width)); */\n  /* width: 100%; */\n}\n\n.vuuLeftNav-menu-full {\n  --menu-width: var(--nav-menu-expanded-width);\n}\n\n.vuuLeftNav-menu-icons {\n  --menu-width: var(--nav-menu-collapsed-width);\n}\n\n.vuuLeftNav-menu-icons-content {\n  --menu-width: var(--nav-menu-collapsed-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-full-content {\n  --menu-width: var(--nav-menu-expanded-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary,\n.vuuLeftNav-menu-full-content .vuuLeftNav-menu-secondary {\n  display: flex;\n}\n\n.vuuLeftNav-menu-primary {\n  background-color: #2a015f;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 32px 16px;\n  transition: flex-basis ease-out 0.2s;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--menu-width);\n}\n\n.vuuLeftNav-menu-secondary {\n  flex: 1 1 auto;\n  display: none;\n  /* position: absolute; */\n  top: 0;\n  right: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--nav-menu-content-width, 240px);\n  z-index: -1;\n}\n\n.vuuLeftNav .vuuTabstrip {\n  margin-top: 102px;\n}\n\n.vuuLeftNav .vuuTab {\n  --vuuTab-focusVisible-color: pink;\n  --vuu-icon-color: white;\n  --vuu-icon-left: 12px;\n  --vuu-icon-size: 16px;\n  border-left: solid 4px transparent;\n  padding: 0 0 0 48px;\n}\n\n.vuuLeftNav .vuuTab-selected {\n  --vuu-icon-color: var(--salt-navigable-indicator-active);\n  border-left: solid 4px var(--salt-navigable-indicator-active);\n}\n\n.vuuLeftNav-logo {\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n}\n\n.vuuLeftNav-main {\n  flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n  color: white;\n  margin-top: 102px;\n  padding: 0;\n}\n\n.vuuLeftNav [data-icon=\"demo\"] {\n  --vuu-icon-svg: var(--svg-demo);\n}\n\n.vuuLeftNav [data-icon=\"tables\"] {\n  --vuu-icon-svg: var(--svg-tables);\n}\n\n.vuuLeftNav [data-icon=\"features\"] {\n  --vuu-icon-svg: var(--svg-features);\n}\n\n.vuuLeftNav [data-icon=\"layouts\"] {\n  --vuu-icon-svg: var(--svg-layouts);\n}\n\n@container (max-width: 100px) {\n  .vuuTab {\n    /* --vuu-icon-left: 12px !important; */\n    --vuuTab-padding: 0 0 0 42px;\n  }\n\n  .vuuTab-main {\n    display: none !important;\n  }\n}\n\n.vuuLeftNav-buttonBar {\n  align-items: center;\n  display: flex;\n  flex: 0 0 100px;\n  justify-content: center;\n}\n\n.vuuLeftNav-toggleButton {\n  --vuu-icon-color: var(--vuu-light-text-primary);\n  --vuu-icon-left: 11px;\n  --vuu-icon-top: 10px;\n  --vuu-icon-size: 16px;\n  background-color: var(--salt-navigable-indicator-active);\n  border-width: 0;\n  border-radius: 18px;\n  height: 36px;\n  position: relative;\n  width: 36px;\n}\n\n.vuuLeftNav-toggleButton-open {\n  --vuu-icon-left: 9px;\n}\n\n.vuuLeftNav-drawer {\n  display: flex;\n  padding: 0 0 0 24px;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-shrink: 0;\n  align-self: stretch;\n  background: #fff;\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  height: 100%;\n}\n";
+var leftNavCss = ".vuuLeftNav {\n  --vuuOverflowContainer-height: auto;\n  --vuuFeatureList-padding: 195px 32px 16px 24px;\n  --salt-navigable-fontWeight-active: 700;\n  --vuuTab-background-selected: rgba(255, 255, 255, 0.1);\n  --vuuTab-hover-background: rgba(255, 255, 255, 0.1);\n  --vuuTab-before-content: none;\n  --vuuTab-borderRadius: 6px;\n  --vuuTab-height: 40px;\n  --vuuTabstrip-fontWeight: 700;\n  --vuuTabstrip-width: 100%;\n  --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n  --svg-features: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n  --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n  --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n  --vuu-light-text-primary: #15171b;\n\n  --menu-level-2-width: 0px;\n\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  display: flex;\n  height: calc(100% - 4px);\n  margin-bottom: 4px;\n  overflow: hidden;\n  position: relative;\n  transition: width 0.2s ease-out;\n  z-index: 0;\n  /* width: calc(var(--menu-width) + var(--menu-level-2-width)); */\n  /* width: 100%; */\n}\n\n.vuuLeftNav-menu-full {\n  --menu-width: var(--nav-menu-expanded-width);\n}\n\n.vuuLeftNav-menu-icons {\n  --menu-width: var(--nav-menu-collapsed-width);\n}\n\n.vuuLeftNav-menu-icons-content {\n  --menu-width: var(--nav-menu-collapsed-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-full-content {\n  --menu-width: var(--nav-menu-expanded-width);\n  --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary,\n.vuuLeftNav-menu-full-content .vuuLeftNav-menu-secondary {\n  display: flex;\n}\n\n.vuuLeftNav-menu-primary {\n  background-color: #2a015f;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 32px 16px;\n  transition: flex-basis ease-out 0.2s;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--menu-width);\n}\n\n.vuuLeftNav-menu-secondary {\n  flex: 1 1 auto;\n  display: none;\n  /* position: absolute; */\n  top: 0;\n  right: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: var(--nav-menu-content-width, 240px);\n  z-index: -1;\n\n  .vuuTabs-tabPanel {\n    background: var(--salt-container-primary-background);\n    height: 100%;\n    padding: var(--salt-spacing-200) var(--salt-spacing-100)\n      var(--salt-spacing-200) var(--salt-spacing-400);\n  }\n}\n\n.vuuLeftNav .vuuTabstrip {\n  margin-top: 102px;\n}\n\n.vuuLeftNav .vuuTab {\n  --vuuTab-focusVisible-color: pink;\n  --vuu-icon-color: white;\n  --vuu-icon-left: 12px;\n  --vuu-icon-size: 16px;\n  border-left: solid 4px transparent;\n  padding: 0 0 0 48px;\n}\n\n.vuuLeftNav .vuuTab-selected {\n  --vuu-icon-color: var(--salt-navigable-indicator-active);\n  border-left: solid 4px var(--salt-navigable-indicator-active);\n}\n\n.vuuLeftNav-logo {\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n}\n\n.vuuLeftNav-main {\n  flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n  color: white;\n  margin-top: 102px;\n  padding: 0;\n}\n\n.vuuLeftNav [data-icon=\"demo\"] {\n  --vuu-icon-svg: var(--svg-demo);\n}\n\n.vuuLeftNav [data-icon=\"tables\"] {\n  --vuu-icon-svg: var(--svg-tables);\n}\n\n.vuuLeftNav [data-icon=\"features\"] {\n  --vuu-icon-svg: var(--svg-features);\n}\n\n.vuuLeftNav [data-icon=\"layouts\"] {\n  --vuu-icon-svg: var(--svg-layouts);\n}\n\n@container (max-width: 100px) {\n  .vuuTab {\n    /* --vuu-icon-left: 12px !important; */\n    --vuuTab-padding: 0 0 0 42px;\n  }\n\n  .vuuTab-main {\n    display: none !important;\n  }\n}\n\n.vuuLeftNav-buttonBar {\n  align-items: center;\n  display: flex;\n  flex: 0 0 100px;\n  justify-content: center;\n}\n\n.vuuLeftNav-toggleButton {\n  --vuu-icon-color: var(--vuu-light-text-primary);\n  --vuu-icon-left: 11px;\n  --vuu-icon-top: 10px;\n  --vuu-icon-size: 16px;\n  background-color: var(--salt-navigable-indicator-active);\n  border-width: 0;\n  border-radius: 18px;\n  height: 36px;\n  position: relative;\n  width: 36px;\n}\n\n.vuuLeftNav-toggleButton-open {\n  --vuu-icon-left: 9px;\n}\n\n.vuuLeftNav-drawer {\n  display: flex;\n  padding: 0 0 0 24px;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-shrink: 0;\n  align-self: stretch;\n  background: #fff;\n  box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n  height: 100%;\n}\n";
 
 module.exports = leftNavCss;
 //# sourceMappingURL=LeftNav.css.js.map