@vuu-ui/vuu-shell 0.8.41 → 0.8.43

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

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

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

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

package/cjs/app-header/AppHeader.js

@@ -1,11 +1,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var cx = require('clsx');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
 var loginUtils = require('../login/login-utils.js');
+var AppHeader$1 = require('./AppHeader.css.js');
 
 const classBase = "vuuAppHeader";
 const AppHeader = ({
@@ -18,6 +21,12 @@ const AppHeader = ({
   user,
   ...htmlAttributes
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-app-header",
+    css: AppHeader$1,
+    window: targetWindow
+  });
   const className = cx(classBase, classNameProp);
   const handleLogout = React.useCallback(() => {
     loginUtils.logout(loginUrl);

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

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

package/cjs/feature/Feature.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var vuuLayout = require('@vuu-ui/vuu-layout');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
 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) => {
@@ -38,7 +38,7 @@ function RawFeature({
   ...props
 }) {
   if (css) {
-    cssModuleLoader.importCSS(css).then((styleSheet) => {
+    vuuUtils.importCSS(css).then((styleSheet) => {
       document.adoptedStyleSheets = [
         ...document.adoptedStyleSheets,
         styleSheet

package/cjs/feature/Feature.js.map

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

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var featureListCss = ".vuuFeatureList {\n    background: var(--vuuFeatureList-background, var(--salt-container-primary-background));\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    padding: 195px 32px 16px 24px;\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\n";
+
+module.exports = featureListCss;
+//# sourceMappingURL=FeatureList.css.js.map

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

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

package/cjs/feature-list/FeatureList.js

@@ -2,7 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var vuuLayout = require('@vuu-ui/vuu-layout');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var Feature = require('../feature/Feature.js');
+var FeatureList$1 = require('./FeatureList.css.js');
 
 const classBase = "vuuFeatureList";
 const FeatureList = ({
@@ -10,6 +13,12 @@ const FeatureList = ({
   title = "VUU TABLES",
   ...htmlAttributes
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-feature-list",
+    css: FeatureList$1,
+    window: targetWindow
+  });
   const ViewProps = {};
   const listProps = {
     height: "100%"

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 { 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;;;;"}
+{"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;;;;"}

package/cjs/shell.css.js

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

package/cjs/shell.css.js.map

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

package/cjs/shell.js

@@ -2,21 +2,24 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var vuuDataRemote = require('@vuu-ui/vuu-data-remote');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var vuuLayout = require('@vuu-ui/vuu-layout');
 var vuuPopups = require('@vuu-ui/vuu-popups');
 var vuuUtils = require('@vuu-ui/vuu-utils');
+var core = require('@salt-ds/core');
 var cx = require('clsx');
 var React = require('react');
 var AppHeader = require('./app-header/AppHeader.js');
 require('@vuu-ui/vuu-ui-controls');
 require('html-to-image');
-require('@salt-ds/core');
 var useLayoutManager = require('./layout-management/useLayoutManager.js');
 var useLayoutContextMenuItems = require('./layout-management/useLayoutContextMenuItems.js');
 var defaultApplicationJson = require('./persistence-management/defaultApplicationJson.js');
 require('./persistence-management/LocalPersistenceManager.js');
 require('./persistence-management/RemotePersistenceManager.js');
 var useShellLayout = require('./shell-layouts/useShellLayout.js');
+var shell = require('./shell.css.js');
 
 if (typeof vuuLayout.StackLayout !== "function") {
   console.warn(
@@ -38,6 +41,12 @@ const Shell = ({
   user,
   ...htmlAttributes
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-shell",
+    css: shell,
+    window: targetWindow
+  });
   const rootRef = React.useRef(null);
   const { dialog, setDialogState } = vuuPopups.useDialog();
   const layoutId = React.useRef("latest");
@@ -76,8 +85,7 @@ const Shell = ({
       setConnectionStatus(connectionStatus2);
     }
   }, [serverUrl, user.token, user.username]);
-  const [themeClass, densityClass, dataMode] = vuuUtils.useThemeAttributes();
-  const className = cx("vuuShell", classNameProp, themeClass, densityClass);
+  const className = cx("vuuShell");
   const isLoading = applicationJson === defaultApplicationJson.loadingApplicationJson;
   const shellLayout = useShellLayout.useShellLayout({
     LeftSidePanelProps,
@@ -96,7 +104,7 @@ const Shell = ({
   if (connectionStatus === "rejected") {
     console.log("game over, no connection to server");
   }
-  return isLoading ? null : /* @__PURE__ */ jsxRuntime.jsx(vuuUtils.ThemeProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return isLoading ? null : /* @__PURE__ */ jsxRuntime.jsx(core.SaltProvider, { theme: "vuu-theme", density: "high", children: /* @__PURE__ */ jsxRuntime.jsxs(
     vuuPopups.ContextMenuProvider,
     {
       menuActionHandler: handleMenuAction,
@@ -112,7 +120,6 @@ const Shell = ({
               vuuLayout.DraggableLayout,
               {
                 className,
-                "data-mode": dataMode,
                 ref: rootRef,
                 ...htmlAttributes,
                 children: shellLayout

package/cjs/shell.js.map

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

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

@@ -0,0 +1,4 @@
+var appHeaderCss = ".vuuAppHeader {\n  --saltButton-borderRadius: 6px;\n  --saltButton-text-color: var(--vuu-color-gray-50);\n  --saltButton-padding: 12px;\n  --vuuToolbarItem-height: 26px;\n  --vuuOverflowContainer-gap: 8px;\n  --vuu-icon-color: var(--vuu-color-gray-45);\n  --vuu-icon-size: 16px;\n  --vuuToolbar-background: var(--vuuAppHeader-background, var(--vuu-color-gray-28));\n  --vuuToolbar-borderWidth: 1px;\n  --vuuToolbar-borderStyle: solid; \n  --vuuToolbar-borderColor: var(--vuu-color-gray-30);\n\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.vuu-theme .vuuAppHeader {\n  border-radius: 8px;\n   \n  margin-bottom: 8px;\n}\n\n";
+
+export { appHeaderCss as default };
+//# sourceMappingURL=AppHeader.css.js.map

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

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

package/esm/app-header/AppHeader.js

@@ -1,9 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCallback } from 'react';
 import { Toolbar } from '@vuu-ui/vuu-ui-controls';
-import cx from 'clsx';
 import { Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { useCallback } from 'react';
 import { logout } from '../login/login-utils.js';
+import appHeaderCss from './AppHeader.css.js';
 
 const classBase = "vuuAppHeader";
 const AppHeader = ({
@@ -16,6 +19,12 @@ const AppHeader = ({
   user,
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-app-header",
+    css: appHeaderCss,
+    window: targetWindow
+  });
   const className = cx(classBase, classNameProp);
   const handleLogout = useCallback(() => {
     logout(loginUrl);

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sources":["../../src/app-header/AppHeader.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback } from \"react\";\nimport { VuuUser } from \"../shell\";\n// import { UserProfile } from \"../user-profile\";\n// import { ThemeSwitch } from \"../theme-switch\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { logout } from \"../login\";\n\nimport { Button } from \"@salt-ds/core\";\nimport \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  layoutId: string;\n  loginUrl?: string;\n  onNavigate: (id: string) => void;\n  onSwitchTheme?: (mode: ThemeMode) => void;\n  themeMode?: ThemeMode;\n  user: VuuUser;\n}\n\nexport const AppHeader = ({\n  className: classNameProp,\n  layoutId,\n  loginUrl,\n  onNavigate,\n  onSwitchTheme,\n  themeMode: _,\n  user,\n  ...htmlAttributes\n}: AppHeaderProps) => {\n  const className = cx(classBase, classNameProp);\n  // const handleSwitchTheme = useCallback(\n  //   (mode: ThemeMode) => onSwitchTheme?.(mode),\n  //   [onSwitchTheme]\n  // );\n\n  const handleLogout = useCallback(() => {\n    logout(loginUrl);\n  }, [loginUrl]);\n\n  return (\n    <Toolbar\n      alignItems=\"end\"\n      className={className}\n      showSeparators\n      {...htmlAttributes}\n    >\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        Help\n      </Button>\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        History <span data-icon=\"history\" />\n      </Button>\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        View <span data-icon=\"settings\" />\n      </Button>\n      <Button\n        className={`${classBase}-menuItem`}\n        onClick={handleLogout}\n        variant=\"secondary\"\n      >\n        Log out\n      </Button>\n      {/* <ThemeSwitch\n        data-align=\"right\"\n        defaultMode={themeMode}\n        onChange={handleSwitchTheme}\n      /> */}\n      {/* <UserProfile\n        layoutId={layoutId}\n        loginUrl={loginUrl}\n        onNavigate={onNavigate}\n        user={user}\n      /> */}\n    </Toolbar>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,SAAY,GAAA,cAAA,CAAA;AAUX,MAAM,YAAY,CAAC;AAAA,EACxB,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAW,EAAA,CAAA;AAAA,EACX,IAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAM7C,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,MAAA,CAAO,QAAQ,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,KAAA;AAAA,MACX,SAAA;AAAA,MACA,cAAc,EAAA,IAAA;AAAA,MACb,GAAG,cAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,SAAA,CAAA,EAAA,OAAA,EAAQ,aAAY,QAEhE,EAAA,MAAA,EAAA,CAAA;AAAA,6BACC,MAAO,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAa,SAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,0BACtD,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,SAAU,EAAA,CAAA;AAAA,SACpC,EAAA,CAAA;AAAA,6BACC,MAAO,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAa,SAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,0BACzD,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,UAAW,EAAA,CAAA;AAAA,SAClC,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,OAAS,EAAA,YAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACT,QAAA,EAAA,SAAA;AAAA,WAAA;AAAA,SAED;AAAA,OAAA;AAAA,KAAA;AAAA,GAYF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AppHeader.js","sources":["../../src/app-header/AppHeader.tsx"],"sourcesContent":["import { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { logout } from \"../login\";\nimport { VuuUser } from \"../shell\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  layoutId: string;\n  loginUrl?: string;\n  onNavigate: (id: string) => void;\n  onSwitchTheme?: (mode: ThemeMode) => void;\n  themeMode?: ThemeMode;\n  user: VuuUser;\n}\n\nexport const AppHeader = ({\n  className: classNameProp,\n  layoutId,\n  loginUrl,\n  onNavigate,\n  onSwitchTheme,\n  themeMode: _,\n  user,\n  ...htmlAttributes\n}: AppHeaderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-app-header\",\n    css: appHeaderCss,\n    window: targetWindow,\n  });\n\n  const className = cx(classBase, classNameProp);\n  // const handleSwitchTheme = useCallback(\n  //   (mode: ThemeMode) => onSwitchTheme?.(mode),\n  //   [onSwitchTheme]\n  // );\n\n  const handleLogout = useCallback(() => {\n    logout(loginUrl);\n  }, [loginUrl]);\n\n  return (\n    <Toolbar\n      alignItems=\"end\"\n      className={className}\n      showSeparators\n      {...htmlAttributes}\n    >\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        Help\n      </Button>\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        History <span data-icon=\"history\" />\n      </Button>\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        View <span data-icon=\"settings\" />\n      </Button>\n      <Button\n        className={`${classBase}-menuItem`}\n        onClick={handleLogout}\n        variant=\"secondary\"\n      >\n        Log out\n      </Button>\n      {/* <ThemeSwitch\n        data-align=\"right\"\n        defaultMode={themeMode}\n        onChange={handleSwitchTheme}\n      /> */}\n      {/* <UserProfile\n        layoutId={layoutId}\n        loginUrl={loginUrl}\n        onNavigate={onNavigate}\n        user={user}\n      /> */}\n    </Toolbar>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAYA,MAAM,SAAY,GAAA,cAAA,CAAA;AAUX,MAAM,YAAY,CAAC;AAAA,EACxB,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAW,EAAA,CAAA;AAAA,EACX,IAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAM7C,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,MAAA,CAAO,QAAQ,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,KAAA;AAAA,MACX,SAAA;AAAA,MACA,cAAc,EAAA,IAAA;AAAA,MACb,GAAG,cAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,SAAA,CAAA,EAAA,OAAA,EAAQ,aAAY,QAEhE,EAAA,MAAA,EAAA,CAAA;AAAA,6BACC,MAAO,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAa,SAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,0BACtD,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,SAAU,EAAA,CAAA;AAAA,SACpC,EAAA,CAAA;AAAA,6BACC,MAAO,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAa,SAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,0BACzD,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,UAAW,EAAA,CAAA;AAAA,SAClC,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,OAAS,EAAA,YAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACT,QAAA,EAAA,SAAA;AAAA,WAAA;AAAA,SAED;AAAA,OAAA;AAAA,KAAA;AAAA,GAYF,CAAA;AAEJ;;;;"}

package/esm/feature/Feature.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import React, { Suspense, useEffect } from 'react';
 import { registerComponent } from '@vuu-ui/vuu-layout';
+import { importCSS } from '@vuu-ui/vuu-utils';
+import React, { Suspense, useEffect } from 'react';
 import { FeatureErrorBoundary } from './FeatureErrorBoundary.js';
 import { Loader } from './Loader.js';
-import { importCSS } from './css-module-loader.js';
 
 const componentsMap = /* @__PURE__ */ new Map();
 const useCachedFeature = (url) => {

package/esm/feature/Feature.js.map

@@ -1 +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":[],"mappings":";;;;;;;AASA,MAAM,aAAA,uBAAoB,GAA2C,EAAA,CAAA;AACrE,MAAM,gBAAA,GAAmB,CAAC,GAAgB,KAAA;AACxC,EAAA,SAAA;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,IAAA,SAAA,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,2BACG,oBAAqB,EAAA,EAAA,GAAA,EACpB,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAS,0BAAW,GAAA,CAAA,MAAA,EAAA,EAAO,CAC1B,EAAA,QAAA,kBAAA,GAAA,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;AACtB,iBAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}
+{"version":3,"file":"Feature.js","sources":["../../src/feature/Feature.tsx"],"sourcesContent":["import { registerComponent, ViewProps } from \"@vuu-ui/vuu-layout\";\nimport { importCSS } from \"@vuu-ui/vuu-utils\";\nimport React, { Suspense, useEffect } from \"react\";\nimport { FeatureErrorBoundary } from \"./FeatureErrorBoundary\";\nimport { Loader } from \"./Loader\";\n\n/**\n * Ensure we never lazy load the same component more than once\n */\nconst componentsMap = new Map<string, ReturnType<typeof React.lazy>>();\nconst useCachedFeature = (url: string) => {\n  useEffect(\n    () => () => {\n      componentsMap.delete(url);\n    },\n    [url]\n  );\n\n  if (!componentsMap.has(url)) {\n    componentsMap.set(\n      url,\n      React.lazy(() => import(/* @vite-ignore */ url))\n    );\n  }\n\n  const lazyFeature = componentsMap.get(url);\n\n  if (!lazyFeature) {\n    throw Error(`Unable to load Lazy Feature at url ${url}`);\n  } else {\n    return lazyFeature;\n  }\n};\n\nexport interface FeatureProps<P extends object | undefined = any> {\n  /**\n    props that will be passed to the lazily loaded component.\n   */\n  ComponentProps?: P;\n  ViewProps?: Partial<Pick<ViewProps, \"closeable\" | \"header\">>;\n  css?: string;\n  height?: number;\n  title?: string;\n  /** \n   The url of javascript bundle to lazily load. Bundle must provide a default export\n   and that export must be a React component.\n   */\n  url: string;\n  width?: number;\n}\n\nfunction RawFeature<Params extends object | undefined>({\n  url,\n  css,\n  ComponentProps: params,\n  ...props\n}: FeatureProps<Params>) {\n  // useEffect(() => {\n  //   console.log(\"%cFeature mount\", \"color: green;\");\n  //   return () => {\n  //     console.log(\"%cFeature unmount\", \"color:red;\");\n  //   };\n  // }, []);\n\n  if (css) {\n    //   import(/* @vite-ignore */ css, { assert: { type: \"css\" } }).then(\n    //     (cssModule) => {\n    //       console.log(\"%cInject Styles\", \"color: blue;font-weight: bold\");\n    //       document.adoptedStyleSheets = [\n    //         ...document.adoptedStyleSheets,\n    //         cssModule.default,\n    //       ];\n    //     }\n    //   );\n    // Polyfill until cypress build supports import assertions\n    // Note: already fully supported in esbuild and vite\n    importCSS(css).then((styleSheet) => {\n      document.adoptedStyleSheets = [\n        ...document.adoptedStyleSheets,\n        styleSheet,\n      ];\n    });\n  }\n\n  const LazyFeature = useCachedFeature(url);\n  return (\n    <FeatureErrorBoundary url={url}>\n      <Suspense fallback={<Loader />}>\n        <LazyFeature {...props} {...params} />\n      </Suspense>\n    </FeatureErrorBoundary>\n  );\n}\n\n/**\n  Feature is a wrapper around React Lazy Loading. It will load a component\n  from the given url. That url must resolve to a javascript bundle with a\n  single default export. That export must be a React component.\n */\nexport const Feature = React.memo(RawFeature);\nFeature.displayName = \"Feature\";\nregisterComponent(\"Feature\", Feature, \"view\");\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,aAAA,uBAAoB,GAA2C,EAAA,CAAA;AACrE,MAAM,gBAAA,GAAmB,CAAC,GAAgB,KAAA;AACxC,EAAA,SAAA;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,IAAA,SAAA,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,2BACG,oBAAqB,EAAA,EAAA,GAAA,EACpB,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAS,0BAAW,GAAA,CAAA,MAAA,EAAA,EAAO,CAC1B,EAAA,QAAA,kBAAA,GAAA,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;AACtB,iBAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}

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

@@ -0,0 +1,4 @@
+var featureListCss = ".vuuFeatureList {\n    background: var(--vuuFeatureList-background, var(--salt-container-primary-background));\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    padding: 195px 32px 16px 24px;\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\n";
+
+export { featureListCss as default };
+//# sourceMappingURL=FeatureList.css.js.map

package/esm/feature-list/FeatureList.css.js.map

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

package/esm/feature-list/FeatureList.js

@@ -1,6 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Palette, PaletteItem } from '@vuu-ui/vuu-layout';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { Feature } from '../feature/Feature.js';
+import featureListCss from './FeatureList.css.js';
 
 const classBase = "vuuFeatureList";
 const FeatureList = ({
@@ -8,6 +11,12 @@ const FeatureList = ({
   title = "VUU TABLES",
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-feature-list",
+    css: featureListCss,
+    window: targetWindow
+  });
   const ViewProps = {};
   const listProps = {
     height: "100%"

package/esm/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 { 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":[],"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,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,WAAY,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,oBAC7C,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;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,qBAAA,GAAA;AAAA,UAAC,WAAA;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,kBAAA,GAAA,CAAC,OAAS,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 { 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":[],"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,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,cAAA;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,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,WAAY,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,oBAC7C,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;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,qBAAA,GAAA;AAAA,UAAC,WAAA;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,kBAAA,GAAA,CAAC,OAAS,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/esm/shell.css.js

@@ -0,0 +1,4 @@
+var shellCss = ".vuuShell {\n  background-color: var(--vuu-color-gray-25);\n  height: var(--vuuShell-height, 100vh);\n  width: var(--vuuShell-width, 100vw);\n}\n\n.vuuShell-mainTabs {\n  background: var(--salt-container-primary-background);\n}\n\n.vuuShell-palette {\n  --vuuView-border: none;\n  --vuuView-margin: 0;\n}\n\n.vuuShell-warningPlaceholder {\n  background-color: var(--salt-container-background-high);\n  height: 100%;\n}\n\n/* until we reinstat5e the toolbar */\n.vuuToolbarProxy {\n  background: var(--salt-container-primary-background);\n}\n\n.vuuShell-mainTabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {\n  background: var(--vuu-color-gray-25);\n}\n\n.vuuShell-mainTabs {\n  --vuuTab-height: 28px;\n  border: solid 1px #D6D7DA;\n  border-top: none !important;\n  border-radius: 6px;\n  height: 100%;\n  padding: 36px 8px 8px 8px;\n  position: relative;\n  width: 100%;\n}\n\n.vuuShell-mainTabs > .vuuTabstrip {\n  left:-1px;\n  padding-bottom: 7px;\n  position: absolute !important;\n  right: 1px;\n  top: 0;\n  width: calc(100% + 2px) !important;\n}  \n\n";
+
+export { shellCss as default };
+//# sourceMappingURL=shell.css.js.map

package/esm/shell.css.js.map

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

package/esm/shell.js

@@ -1,20 +1,23 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { connectToServer } from '@vuu-ui/vuu-data-remote';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { StackLayout, LayoutProvider, DraggableLayout } from '@vuu-ui/vuu-layout';
 import { useDialog, ContextMenuProvider } from '@vuu-ui/vuu-popups';
-import { logger, useThemeAttributes, ThemeProvider } from '@vuu-ui/vuu-utils';
+import { logger } from '@vuu-ui/vuu-utils';
+import { SaltProvider } from '@salt-ds/core';
 import cx from 'clsx';
 import { useRef, useState, useCallback, useMemo } from 'react';
 import { AppHeader } from './app-header/AppHeader.js';
 import '@vuu-ui/vuu-ui-controls';
 import 'html-to-image';
-import '@salt-ds/core';
 import { useLayoutManager } from './layout-management/useLayoutManager.js';
 import { useLayoutContextMenuItems } from './layout-management/useLayoutContextMenuItems.js';
 import { loadingApplicationJson } from './persistence-management/defaultApplicationJson.js';
 import './persistence-management/LocalPersistenceManager.js';
 import './persistence-management/RemotePersistenceManager.js';
 import { useShellLayout } from './shell-layouts/useShellLayout.js';
+import shellCss from './shell.css.js';
 
 if (typeof StackLayout !== "function") {
   console.warn(
@@ -36,6 +39,12 @@ const Shell = ({
   user,
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-shell",
+    css: shellCss,
+    window: targetWindow
+  });
   const rootRef = useRef(null);
   const { dialog, setDialogState } = useDialog();
   const layoutId = useRef("latest");
@@ -74,8 +83,7 @@ const Shell = ({
       setConnectionStatus(connectionStatus2);
     }
   }, [serverUrl, user.token, user.username]);
-  const [themeClass, densityClass, dataMode] = useThemeAttributes();
-  const className = cx("vuuShell", classNameProp, themeClass, densityClass);
+  const className = cx("vuuShell");
   const isLoading = applicationJson === loadingApplicationJson;
   const shellLayout = useShellLayout({
     LeftSidePanelProps,
@@ -94,7 +102,7 @@ const Shell = ({
   if (connectionStatus === "rejected") {
     console.log("game over, no connection to server");
   }
-  return isLoading ? null : /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(
+  return isLoading ? null : /* @__PURE__ */ jsx(SaltProvider, { theme: "vuu-theme", density: "high", children: /* @__PURE__ */ jsxs(
     ContextMenuProvider,
     {
       menuActionHandler: handleMenuAction,
@@ -110,7 +118,6 @@ const Shell = ({
               DraggableLayout,
               {
                 className,
-                "data-mode": dataMode,
                 ref: rootRef,
                 ...htmlAttributes,
                 children: shellLayout

package/esm/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport {\n  DraggableLayout,\n  LayoutProvider,\n  LayoutProviderProps,\n  StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport { ContextMenuProvider, useDialog } from \"@vuu-ui/vuu-popups\";\nimport {\n  logger,\n  ThemeMode,\n  ThemeProvider,\n  useThemeAttributes,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport {\n  useLayoutContextMenuItems,\n  useLayoutManager,\n} from \"./layout-management\";\nimport { loadingApplicationJson } from \"./persistence-management\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\nimport { SaveLocation } from \"./shellTypes\";\n\nimport \"./shell.css\";\n\nif (typeof StackLayout !== \"function\") {\n  console.warn(\n    \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n  );\n}\n\nexport type VuuUser = {\n  username: string;\n  token: string;\n};\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  LayoutProps?: Pick<\n    LayoutProviderProps,\n    \"createNewChild\" | \"pathToDropTarget\"\n  >;\n  LeftSidePanelProps?: SidePanelProps;\n  children?: ReactNode;\n  leftSidePanelLayout?: \"full-height\" | \"inlay\";\n  loginUrl?: string;\n  // paletteConfig: any;\n  saveLocation?: SaveLocation;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nexport const Shell = ({\n  LayoutProps,\n  LeftSidePanelProps = defaultLeftSidePanel,\n  children,\n  className: classNameProp,\n  leftSidePanelLayout,\n  loginUrl,\n  saveLocation: _,\n  saveUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { dialog, setDialogState } = useDialog();\n  const layoutId = useRef(\"latest\");\n  const { applicationJson, saveApplicationLayout, loadLayoutById } =\n    useLayoutManager();\n  const { buildMenuOptions, handleMenuAction } =\n    useLayoutContextMenuItems(setDialogState);\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"connected\" | \"rejected\"\n  >(\"connected\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  const handleSwitchTheme = useCallback((mode: ThemeMode) => {\n    if (rootRef.current) {\n      rootRef.current.dataset.mode = mode;\n    }\n  }, []);\n\n  // TODO this is out of date\n  const handleNavigate = useCallback(\n    (id) => {\n      layoutId.current = id;\n      loadLayoutById(id);\n    },\n    [loadLayoutById]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const [themeClass, densityClass, dataMode] = useThemeAttributes();\n  const className = cx(\"vuuShell\", classNameProp, themeClass, densityClass);\n\n  const isLoading = applicationJson === loadingApplicationJson;\n\n  const shellLayout = useShellLayout({\n    LeftSidePanelProps,\n    leftSidePanelLayout,\n    appHeader: (\n      <AppHeader\n        layoutId={layoutId.current}\n        loginUrl={loginUrl}\n        user={user}\n        onNavigate={handleNavigate}\n        onSwitchTheme={handleSwitchTheme}\n      />\n    ),\n  });\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  return isLoading ? null : (\n    <ThemeProvider>\n      <ContextMenuProvider\n        menuActionHandler={handleMenuAction}\n        menuBuilder={buildMenuOptions}\n      >\n        <LayoutProvider\n          {...LayoutProps}\n          layout={applicationJson.layout}\n          onLayoutChange={handleLayoutChange}\n        >\n          <DraggableLayout\n            className={className}\n            data-mode={dataMode}\n            ref={rootRef}\n            {...htmlAttributes}\n          >\n            {shellLayout}\n          </DraggableLayout>\n        </LayoutProvider>\n        {children || dialog}\n      </ContextMenuProvider>\n    </ThemeProvider>\n  );\n};\n"],"names":["connectionStatus"],"mappings":"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"}
+{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  DraggableLayout,\n  LayoutProvider,\n  LayoutProviderProps,\n  StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport { ContextMenuProvider, useDialog } from \"@vuu-ui/vuu-popups\";\nimport { logger, ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport { SaltProvider } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport {\n  useLayoutContextMenuItems,\n  useLayoutManager,\n} from \"./layout-management\";\nimport { loadingApplicationJson } from \"./persistence-management\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\nimport { SaveLocation } from \"./shellTypes\";\n\nimport shellCss from \"./shell.css\";\n\nif (typeof StackLayout !== \"function\") {\n  console.warn(\n    \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n  );\n}\n\nexport type VuuUser = {\n  username: string;\n  token: string;\n};\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  LayoutProps?: Pick<\n    LayoutProviderProps,\n    \"createNewChild\" | \"pathToDropTarget\"\n  >;\n  LeftSidePanelProps?: SidePanelProps;\n  children?: ReactNode;\n  leftSidePanelLayout?: \"full-height\" | \"inlay\";\n  loginUrl?: string;\n  // paletteConfig: any;\n  saveLocation?: SaveLocation;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nexport const Shell = ({\n  LayoutProps,\n  LeftSidePanelProps = defaultLeftSidePanel,\n  children,\n  className: classNameProp,\n  leftSidePanelLayout,\n  loginUrl,\n  saveLocation: _,\n  saveUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { dialog, setDialogState } = useDialog();\n  const layoutId = useRef(\"latest\");\n  const { applicationJson, saveApplicationLayout, loadLayoutById } =\n    useLayoutManager();\n  const { buildMenuOptions, handleMenuAction } =\n    useLayoutContextMenuItems(setDialogState);\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"connected\" | \"rejected\"\n  >(\"connected\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  const handleSwitchTheme = useCallback((mode: ThemeMode) => {\n    if (rootRef.current) {\n      rootRef.current.dataset.mode = mode;\n    }\n  }, []);\n\n  // TODO this is out of date\n  const handleNavigate = useCallback(\n    (id) => {\n      layoutId.current = id;\n      loadLayoutById(id);\n    },\n    [loadLayoutById]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const className = cx(\"vuuShell\");\n\n  const isLoading = applicationJson === loadingApplicationJson;\n\n  const shellLayout = useShellLayout({\n    LeftSidePanelProps,\n    leftSidePanelLayout,\n    appHeader: (\n      <AppHeader\n        layoutId={layoutId.current}\n        loginUrl={loginUrl}\n        user={user}\n        onNavigate={handleNavigate}\n        onSwitchTheme={handleSwitchTheme}\n      />\n    ),\n  });\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  return isLoading ? null : (\n    <SaltProvider theme=\"vuu-theme\" density=\"high\">\n      <ContextMenuProvider\n        menuActionHandler={handleMenuAction}\n        menuBuilder={buildMenuOptions}\n      >\n        <LayoutProvider\n          {...LayoutProps}\n          layout={applicationJson.layout}\n          onLayoutChange={handleLayoutChange}\n        >\n          <DraggableLayout\n            className={className}\n            ref={rootRef}\n            {...htmlAttributes}\n          >\n            {shellLayout}\n          </DraggableLayout>\n        </LayoutProvider>\n        {children || dialog}\n      </ContextMenuProvider>\n    </SaltProvider>\n  );\n};\n"],"names":["connectionStatus"],"mappings":"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"}

package/package.json

@@ -1,22 +1,24 @@
 {
-  "version": "0.8.41",
+  "version": "0.8.43",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.41",
-    "@vuu-ui/vuu-protocol-types": "0.8.41",
-    "@vuu-ui/vuu-table-types": "0.8.41"
+    "@vuu-ui/vuu-data-types": "0.8.43",
+    "@vuu-ui/vuu-protocol-types": "0.8.43",
+    "@vuu-ui/vuu-table-types": "0.8.43"
   },
   "dependencies": {
     "@salt-ds/core": "1.17.0",
-    "@vuu-ui/vuu-data-remote": "0.8.41",
-    "@vuu-ui/vuu-icons": "0.8.41",
-    "@vuu-ui/vuu-layout": "0.8.41",
-    "@vuu-ui/vuu-popups": "0.8.41",
-    "@vuu-ui/vuu-table": "0.8.41",
-    "@vuu-ui/vuu-ui-controls": "0.8.41",
-    "@vuu-ui/vuu-utils": "0.8.41",
+    "@salt-ds/styles": "0.2.1",
+    "@salt-ds/window": "0.1.1",
+    "@vuu-ui/vuu-data-remote": "0.8.43",
+    "@vuu-ui/vuu-icons": "0.8.43",
+    "@vuu-ui/vuu-layout": "0.8.43",
+    "@vuu-ui/vuu-popups": "0.8.43",
+    "@vuu-ui/vuu-table": "0.8.43",
+    "@vuu-ui/vuu-ui-controls": "0.8.43",
+    "@vuu-ui/vuu-utils": "0.8.43",
     "html-to-image": "^1.11.11"
   },
   "peerDependencies": {

package/types/app-header/AppHeader.d.ts

@@ -1,7 +1,6 @@
+import { ThemeMode } from "@vuu-ui/vuu-utils";
 import { HTMLAttributes } from "react";
 import { VuuUser } from "../shell";
-import { ThemeMode } from "@vuu-ui/vuu-utils";
-import "./AppHeader.css";
 export interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {
     layoutId: string;
     loginUrl?: string;

package/types/feature/Feature.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 import { ViewProps } from "@vuu-ui/vuu-layout";
+import React from "react";
 export interface FeatureProps<P extends object | undefined = any> {
     /**
       props that will be passed to the lazily loaded component.

package/types/feature-list/FeatureList.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from "react";
 import { FeatureProps } from "../feature/Feature";
-import "./FeatureList.css";
 export interface FeatureListProps extends HTMLAttributes<HTMLDivElement> {
     features: FeatureProps[];
 }

package/types/shell.d.ts

@@ -2,7 +2,6 @@ import { LayoutProviderProps } from "@vuu-ui/vuu-layout";
 import { HTMLAttributes, ReactNode } from "react";
 import { SidePanelProps } from "./shell-layouts";
 import { SaveLocation } from "./shellTypes";
-import "./shell.css";
 export type VuuUser = {
     username: string;
     token: string;

package/cjs/app-header/AppHeader.css

@@ -1,24 +0,0 @@
-.vuuAppHeader {
-  --saltButton-borderRadius: 6px;
-  --saltButton-text-color: var(--vuu-color-gray-50);
-  --saltButton-padding: 12px;
-  --vuuToolbarItem-height: 26px;
-  --vuuOverflowContainer-gap: 8px;
-  --vuu-icon-color: var(--vuu-color-gray-45);
-  --vuu-icon-size: 16px;
-  --vuuToolbar-background: var(--vuuAppHeader-background, var(--vuu-color-gray-28));
-  --vuuToolbar-borderWidth: 1px;
-  --vuuToolbar-borderStyle: solid; 
-  --vuuToolbar-borderColor: var(--vuu-color-gray-30);
-
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.vuu-theme .vuuAppHeader {
-  border-radius: 8px;
-   
-  margin-bottom: 8px;
-}
-

package/cjs/feature/css-module-loader.js

@@ -1,9 +0,0 @@
-'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/feature/css-module-loader.js.map

@@ -1 +0,0 @@
-{"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/feature-list/FeatureList.css

@@ -1,21 +0,0 @@
-.vuuFeatureList {
-    background: var(--vuuFeatureList-background, var(--salt-container-primary-background));
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 195px 32px 16px 24px;
-}
-
-.vuuFeatureList-header {
-    flex: 0 0 40px;
-    font-size: 12px;
-    font-weight: 700;
-    line-height: 2;
-}
-
-.vuuFeatureList-content {
-    flex: 1 1 auto;
-    font-size: 12px;
-    font-weight: 700;
-}
-

package/cjs/shell.css

@@ -1,49 +0,0 @@
-.vuuShell {
-  background-color: var(--vuu-color-gray-25);
-  height: var(--vuuShell-height, 100vh);
-  width: var(--vuuShell-width, 100vw);
-}
-
-.vuuShell-mainTabs {
-  background: var(--salt-container-primary-background);
-}
-
-.vuuShell-palette {
-  --vuuView-border: none;
-  --vuuView-margin: 0;
-}
-
-.vuuShell-warningPlaceholder {
-  background-color: var(--salt-container-background-high);
-  height: 100%;
-}
-
-/* until we reinstat5e the toolbar */
-.vuuToolbarProxy {
-  background: var(--salt-container-primary-background);
-}
-
-.vuuShell-mainTabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {
-  background: var(--vuu-color-gray-25);
-}
-
-.vuuShell-mainTabs {
-  --vuuTab-height: 28px;
-  border: solid 1px #D6D7DA;
-  border-top: none !important;
-  border-radius: 6px;
-  height: 100%;
-  padding: 36px 8px 8px 8px;
-  position: relative;
-  width: 100%;
-}
-
-.vuuShell-mainTabs > .vuuTabstrip {
-  left:-1px;
-  padding-bottom: 7px;
-  position: absolute !important;
-  right: 1px;
-  top: 0;
-  width: calc(100% + 2px) !important;
-}  
-

package/esm/app-header/AppHeader.css

@@ -1,24 +0,0 @@
-.vuuAppHeader {
-  --saltButton-borderRadius: 6px;
-  --saltButton-text-color: var(--vuu-color-gray-50);
-  --saltButton-padding: 12px;
-  --vuuToolbarItem-height: 26px;
-  --vuuOverflowContainer-gap: 8px;
-  --vuu-icon-color: var(--vuu-color-gray-45);
-  --vuu-icon-size: 16px;
-  --vuuToolbar-background: var(--vuuAppHeader-background, var(--vuu-color-gray-28));
-  --vuuToolbar-borderWidth: 1px;
-  --vuuToolbar-borderStyle: solid; 
-  --vuuToolbar-borderColor: var(--vuu-color-gray-30);
-
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.vuu-theme .vuuAppHeader {
-  border-radius: 8px;
-   
-  margin-bottom: 8px;
-}
-

package/esm/feature/css-module-loader.js

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

package/esm/feature/css-module-loader.js.map

@@ -1 +0,0 @@
-{"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/esm/feature-list/FeatureList.css

@@ -1,21 +0,0 @@
-.vuuFeatureList {
-    background: var(--vuuFeatureList-background, var(--salt-container-primary-background));
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 195px 32px 16px 24px;
-}
-
-.vuuFeatureList-header {
-    flex: 0 0 40px;
-    font-size: 12px;
-    font-weight: 700;
-    line-height: 2;
-}
-
-.vuuFeatureList-content {
-    flex: 1 1 auto;
-    font-size: 12px;
-    font-weight: 700;
-}
-

package/esm/shell.css

@@ -1,49 +0,0 @@
-.vuuShell {
-  background-color: var(--vuu-color-gray-25);
-  height: var(--vuuShell-height, 100vh);
-  width: var(--vuuShell-width, 100vw);
-}
-
-.vuuShell-mainTabs {
-  background: var(--salt-container-primary-background);
-}
-
-.vuuShell-palette {
-  --vuuView-border: none;
-  --vuuView-margin: 0;
-}
-
-.vuuShell-warningPlaceholder {
-  background-color: var(--salt-container-background-high);
-  height: 100%;
-}
-
-/* until we reinstat5e the toolbar */
-.vuuToolbarProxy {
-  background: var(--salt-container-primary-background);
-}
-
-.vuuShell-mainTabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {
-  background: var(--vuu-color-gray-25);
-}
-
-.vuuShell-mainTabs {
-  --vuuTab-height: 28px;
-  border: solid 1px #D6D7DA;
-  border-top: none !important;
-  border-radius: 6px;
-  height: 100%;
-  padding: 36px 8px 8px 8px;
-  position: relative;
-  width: 100%;
-}
-
-.vuuShell-mainTabs > .vuuTabstrip {
-  left:-1px;
-  padding-bottom: 7px;
-  position: absolute !important;
-  right: 1px;
-  top: 0;
-  width: calc(100% + 2px) !important;
-}  
-