@vuu-ui/vuu-shell 0.8.68 → 0.8.70

package/cjs/ShellContextProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShellContextProvider.js","sources":["../src/ShellContextProvider.tsx"],"sourcesContent":["import {\n  DefaultColumnConfiguration,\n  ListOption,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { RpcResponseHandler } from \"@vuu-ui/vuu-data-types\";\nimport { createContext, ReactElement, ReactNode, useContext } from \"react\";\nimport type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nexport type LookupTableProvider = (table: VuuTable) => ListOption[];\n\nexport interface ShellContextProps {\n  getDefaultColumnConfig?: DefaultColumnConfiguration;\n  getLookupValues?: LookupTableProvider;\n  handleRpcResponse?: RpcResponseHandler;\n}\n\nconst defaultConfig = {};\n\nconst ShellContext = createContext<ShellContextProps>(defaultConfig);\n\nexport interface ShellProviderProps {\n  children: ReactNode;\n  value?: ShellContextProps;\n}\n\nconst Provider = ({\n  children,\n  context,\n  inheritedContext,\n}: {\n  children: ReactNode;\n  context?: ShellContextProps;\n  inheritedContext?: ShellContextProps;\n}) => {\n  // TODO functions provided at multiple levels must be merged\n  const mergedContext = {\n    ...inheritedContext,\n    ...context,\n  };\n  return (\n    <ShellContext.Provider value={mergedContext}>\n      {children}\n    </ShellContext.Provider>\n  );\n};\n\nexport const ShellContextProvider = ({\n  children,\n  value,\n}: ShellProviderProps): ReactElement => {\n  return (\n    <ShellContext.Consumer>\n      {(context) => (\n        <Provider context={value} inheritedContext={context}>\n          {children}\n        </Provider>\n      )}\n    </ShellContext.Consumer>\n  );\n};\n\nexport const useShellContext = () => {\n  return useContext(ShellContext);\n};\n"],"names":["createContext","jsx","useContext"],"mappings":";;;;;AAgBA,MAAM,gBAAgB,EAAC,CAAA;AAEvB,MAAM,YAAA,GAAeA,oBAAiC,aAAa,CAAA,CAAA;AAOnE,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAA;AACF,CAIM,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,GAAG,gBAAA;AAAA,IACH,GAAG,OAAA;AAAA,GACL,CAAA;AACA,EAAA,sCACG,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,eAC3B,QACH,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,KAAA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACGC,cAAA,CAAA,YAAA,CAAa,QAAb,EAAA,EACE,QAAC,EAAA,CAAA,OAAA,qBACCA,cAAA,CAAA,QAAA,EAAA,EAAS,OAAS,EAAA,KAAA,EAAO,gBAAkB,EAAA,OAAA,EACzC,UACH,CAEJ,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,kBAAkB,MAAM;AACnC,EAAA,OAAOC,iBAAW,YAAY,CAAA,CAAA;AAChC;;;;;"}
+{"version":3,"file":"ShellContextProvider.js","sources":["../src/ShellContextProvider.tsx"],"sourcesContent":["import {\n  DefaultColumnConfiguration,\n  DefaultTableConfiguration,\n  ListOption,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { RpcResponseHandler } from \"@vuu-ui/vuu-data-types\";\nimport { createContext, ReactElement, ReactNode, useContext } from \"react\";\nimport type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nexport type LookupTableProvider = (table: VuuTable) => ListOption[];\n\nexport interface ShellContextProps {\n  getDefaultColumnConfig?: DefaultColumnConfiguration;\n  getDefaultTableConfig?: DefaultTableConfiguration;\n  getLookupValues?: LookupTableProvider;\n  handleRpcResponse?: RpcResponseHandler;\n}\n\nconst defaultConfig = {};\n\nconst ShellContext = createContext<ShellContextProps>(defaultConfig);\n\nexport interface ShellProviderProps {\n  children: ReactNode;\n  value?: ShellContextProps;\n}\n\nconst Provider = ({\n  children,\n  context,\n  inheritedContext,\n}: {\n  children: ReactNode;\n  context?: ShellContextProps;\n  inheritedContext?: ShellContextProps;\n}) => {\n  // TODO functions provided at multiple levels must be merged\n  const mergedContext = {\n    ...inheritedContext,\n    ...context,\n  };\n  return (\n    <ShellContext.Provider value={mergedContext}>\n      {children}\n    </ShellContext.Provider>\n  );\n};\n\nexport const ShellContextProvider = ({\n  children,\n  value,\n}: ShellProviderProps): ReactElement => {\n  return (\n    <ShellContext.Consumer>\n      {(context) => (\n        <Provider context={value} inheritedContext={context}>\n          {children}\n        </Provider>\n      )}\n    </ShellContext.Consumer>\n  );\n};\n\nexport const useShellContext = () => {\n  return useContext(ShellContext);\n};\n"],"names":["createContext","jsx","useContext"],"mappings":";;;;;AAkBA,MAAM,gBAAgB,EAAC,CAAA;AAEvB,MAAM,YAAA,GAAeA,oBAAiC,aAAa,CAAA,CAAA;AAOnE,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAA;AACF,CAIM,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,GAAG,gBAAA;AAAA,IACH,GAAG,OAAA;AAAA,GACL,CAAA;AACA,EAAA,sCACG,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,eAC3B,QACH,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,KAAA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACGC,cAAA,CAAA,YAAA,CAAa,QAAb,EAAA,EACE,QAAC,EAAA,CAAA,OAAA,qBACCA,cAAA,CAAA,QAAA,EAAA,EAAS,OAAS,EAAA,KAAA,EAAO,gBAAkB,EAAA,OAAA,EACzC,UACH,CAEJ,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,kBAAkB,MAAM;AACnC,EAAA,OAAOC,iBAAW,YAAY,CAAA,CAAA;AAChC;;;;;"}

package/cjs/application-provider/ApplicationProvider.js

@@ -9,18 +9,23 @@ require('../persistence-management/LocalPersistenceManager.js');
 require('../persistence-management/RemotePersistenceManager.js');
 require('../persistence-management/StaticPersistenceManager.js');
 
-const getThemeMode = (userSettings) => {
+const getThemeMode = (mode, userSettings) => {
   const themeMode = userSettings?.themeMode;
   if (themeMode === "light" || themeMode === "dark") {
     return themeMode;
   }
-  return "light";
+  return mode;
 };
 const ApplicationProvider = ({
   children,
+  density: densityProp,
+  mode = "light",
+  theme,
   userSettingsSchema,
   user
 }) => {
+  const { mode: inheritedMode, theme: inheritedTheme } = core.useTheme();
+  const density = core.useDensity(densityProp);
   const persistenceManager = PersistenceProvider.usePersistenceManager();
   const context = React.useContext(ApplicationContext.ApplicationContext);
   const [userSettings, setSettings] = React.useState();
@@ -55,9 +60,9 @@ const ApplicationProvider = ({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         core.SaltProvider,
         {
-          theme: "vuu-theme",
-          density: "high",
-          mode: getThemeMode(userSettings),
+          theme: theme ?? inheritedTheme ?? "vuu-theme",
+          density,
+          mode: getThemeMode(mode ?? inheritedMode, userSettings),
           children
         }
       )

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

@@ -1 +1 @@
-{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { SaltProvider } from \"@salt-ds/core\";\nimport {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { usePersistenceManager } from \"../persistence-management\";\n\nexport interface ApplicationProviderProps\n  extends Partial<Omit<ApplicationContextProps, \"userSettings\">> {\n  children: ReactNode;\n}\n\nconst getThemeMode = (\n  userSettings?: Record<string, string | number | boolean>\n) => {\n  const themeMode = userSettings?.themeMode;\n  if (themeMode === \"light\" || themeMode === \"dark\") {\n    return themeMode;\n  }\n  return \"light\";\n};\n\nexport const ApplicationProvider = ({\n  children,\n  userSettingsSchema: userSettingsSchema,\n  user,\n}: ApplicationProviderProps): ReactElement | null => {\n  const persistenceManager = usePersistenceManager();\n  const context = useContext(ApplicationContext);\n  const [userSettings, setSettings] =\n    useState<Record<string, string | number | boolean>>();\n\n  useMemo(async () => {\n    if (persistenceManager) {\n      const userSettings = await persistenceManager.getUserSettings();\n      setSettings(userSettings);\n    } else {\n      setSettings({});\n    }\n  }, [persistenceManager]);\n\n  const onUserSettingChanged = useCallback(\n    (propertyName: string, value: VuuRowDataItemType) => {\n      setSettings((currentSettings) => {\n        const newSettings = { ...currentSettings, [propertyName]: value };\n        persistenceManager?.saveUserSettings(newSettings);\n        return newSettings;\n      });\n    },\n    [persistenceManager]\n  );\n\n  return userSettings ? (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        onUserSettingChanged,\n        userSettings,\n        userSettingsSchema,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider\n        theme=\"vuu-theme\"\n        density=\"high\"\n        mode={getThemeMode(userSettings)}\n      >\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  ) : null;\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\n//Setter method (only used within the shell)\nexport const useApplicationSettings = () => {\n  const { onUserSettingChanged, userSettings, userSettingsSchema } =\n    useContext(ApplicationContext);\n  return {\n    onUserSettingChanged,\n    userSettings,\n    userSettingsSchema,\n  };\n};\n\n//Getter method (read only access to applicationSetting)\nexport const useUserSetting = () => {\n  const { userSettings } = useContext(ApplicationContext);\n  return { userSettings };\n};\n"],"names":["usePersistenceManager","useContext","ApplicationContext","useState","useMemo","userSettings","useCallback","jsx","SaltProvider"],"mappings":";;;;;;;;;;;AAqBA,MAAM,YAAA,GAAe,CACnB,YACG,KAAA;AACH,EAAA,MAAM,YAAY,YAAc,EAAA,SAAA,CAAA;AAChC,EAAI,IAAA,SAAA,KAAc,OAAW,IAAA,SAAA,KAAc,MAAQ,EAAA;AACjD,IAAO,OAAA,SAAA,CAAA;AAAA,GACT;AACA,EAAO,OAAA,OAAA,CAAA;AACT,CAAA,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,IAAA;AACF,CAAqD,KAAA;AACnD,EAAA,MAAM,qBAAqBA,yCAAsB,EAAA,CAAA;AACjD,EAAM,MAAA,OAAA,GAAUC,iBAAWC,qCAAkB,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,YAAA,EAAc,WAAW,CAAA,GAC9BC,cAAoD,EAAA,CAAA;AAEtD,EAAAC,aAAA,CAAQ,YAAY;AAClB,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAMC,MAAAA,aAAAA,GAAe,MAAM,kBAAA,CAAmB,eAAgB,EAAA,CAAA;AAC9D,MAAA,WAAA,CAAYA,aAAY,CAAA,CAAA;AAAA,KACnB,MAAA;AACL,MAAA,WAAA,CAAY,EAAE,CAAA,CAAA;AAAA,KAChB;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,CAAC,cAAsB,KAA8B,KAAA;AACnD,MAAA,WAAA,CAAY,CAAC,eAAoB,KAAA;AAC/B,QAAA,MAAM,cAAc,EAAE,GAAG,iBAAiB,CAAC,YAAY,GAAG,KAAM,EAAA,CAAA;AAChE,QAAA,kBAAA,EAAoB,iBAAiB,WAAW,CAAA,CAAA;AAChD,QAAO,OAAA,WAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACH;AAAA,IACA,CAAC,kBAAkB,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,OAAO,YACL,mBAAAC,cAAA;AAAA,IAACL,qCAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAG,OAAA;AAAA,QACH,oBAAA;AAAA,QACA,YAAA;AAAA,QACA,kBAAA;AAAA,QACA,IAAA,EAAM,QAAQ,OAAQ,CAAA,IAAA;AAAA,OACxB;AAAA,MAEA,QAAA,kBAAAK,cAAA;AAAA,QAACC,iBAAA;AAAA,QAAA;AAAA,UACC,KAAM,EAAA,WAAA;AAAA,UACN,OAAQ,EAAA,MAAA;AAAA,UACR,IAAA,EAAM,aAAa,YAAY,CAAA;AAAA,UAE9B,QAAA;AAAA,SAAA;AAAA,OACH;AAAA,KAAA;AAAA,GAEA,GAAA,IAAA,CAAA;AACN,EAAA;AAEO,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,EAAE,IAAA,EAAS,GAAAP,gBAAA,CAAWC,qCAAkB,CAAA,CAAA;AAC9C,EAAO,OAAA,IAAA,CAAA;AACT,EAAA;AAGO,MAAM,yBAAyB,MAAM;AAC1C,EAAA,MAAM,EAAE,oBAAsB,EAAA,YAAA,EAAc,kBAAmB,EAAA,GAC7DD,iBAAWC,qCAAkB,CAAA,CAAA;AAC/B,EAAO,OAAA;AAAA,IACL,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,kBAAA;AAAA,GACF,CAAA;AACF,EAAA;AAGO,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,EAAE,YAAA,EAAiB,GAAAD,gBAAA,CAAWC,qCAAkB,CAAA,CAAA;AACtD,EAAA,OAAO,EAAE,YAAa,EAAA,CAAA;AACxB;;;;;;;"}
+{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  Density,\n  Mode,\n  SaltProvider,\n  ThemeContextProps,\n  useDensity,\n  useTheme,\n} from \"@salt-ds/core\";\nimport {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { usePersistenceManager } from \"../persistence-management\";\n\nexport interface ApplicationProviderProps\n  extends Partial<Pick<ThemeContextProps, \"theme\" | \"mode\">>,\n    Partial<Omit<ApplicationContextProps, \"userSettings\">> {\n  children: ReactNode;\n  density?: Density;\n}\n\nconst getThemeMode = (\n  mode: Mode,\n  userSettings?: Record<string, string | number | boolean>\n) => {\n  const themeMode = userSettings?.themeMode;\n  if (themeMode === \"light\" || themeMode === \"dark\") {\n    return themeMode;\n  }\n  return mode;\n};\n\nexport const ApplicationProvider = ({\n  children,\n  density: densityProp,\n  mode = \"light\",\n  theme,\n  userSettingsSchema: userSettingsSchema,\n  user,\n}: ApplicationProviderProps): ReactElement | null => {\n  const { mode: inheritedMode, theme: inheritedTheme } = useTheme();\n  const density = useDensity(densityProp);\n  const persistenceManager = usePersistenceManager();\n  const context = useContext(ApplicationContext);\n  const [userSettings, setSettings] =\n    useState<Record<string, string | number | boolean>>();\n\n  useMemo(async () => {\n    if (persistenceManager) {\n      const userSettings = await persistenceManager.getUserSettings();\n      setSettings(userSettings);\n    } else {\n      setSettings({});\n    }\n  }, [persistenceManager]);\n\n  const onUserSettingChanged = useCallback(\n    (propertyName: string, value: VuuRowDataItemType) => {\n      setSettings((currentSettings) => {\n        const newSettings = { ...currentSettings, [propertyName]: value };\n        persistenceManager?.saveUserSettings(newSettings);\n        return newSettings;\n      });\n    },\n    [persistenceManager]\n  );\n\n  return userSettings ? (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        onUserSettingChanged,\n        userSettings,\n        userSettingsSchema,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider\n        theme={theme ?? inheritedTheme ?? \"vuu-theme\"}\n        density={density}\n        mode={getThemeMode(mode ?? inheritedMode, userSettings)}\n      >\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  ) : null;\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\n//Setter method (only used within the shell)\nexport const useApplicationSettings = () => {\n  const { onUserSettingChanged, userSettings, userSettingsSchema } =\n    useContext(ApplicationContext);\n  return {\n    onUserSettingChanged,\n    userSettings,\n    userSettingsSchema,\n  };\n};\n\n//Getter method (read only access to applicationSetting)\nexport const useUserSetting = () => {\n  const { userSettings } = useContext(ApplicationContext);\n  return { userSettings };\n};\n"],"names":["useTheme","useDensity","usePersistenceManager","useContext","ApplicationContext","useState","useMemo","userSettings","useCallback","jsx","SaltProvider"],"mappings":"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"}

package/cjs/left-nav/LeftNav.js

@@ -48,7 +48,6 @@ const byModule = (f1, f2) => {
 };
 const LeftNav = (props) => {
   const dispatch = vuuLayout.useLayoutProviderDispatch();
-  const [themeClass] = vuuUtils.useThemeAttributes();
   const {
     "data-path": path,
     defaultExpanded = true,
@@ -150,43 +149,36 @@ const LeftNav = (props) => {
       className: cx(classBase, `${classBase}-${displayStatus}`),
       style,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cx(`${classBase}-menu-primary`, themeClass),
-            "data-mode": "dark",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuLeftNav-logo", children: /* @__PURE__ */ jsxRuntime.jsx(vuuIcons.VuuLogo, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-main`, children: /* @__PURE__ */ jsxRuntime.jsxs(
-                vuuUiControls.Tabstrip,
-                {
-                  activeTabIndex: navState.activeTabIndex,
-                  animateSelectionThumb: false,
-                  className: `${classBase}-Tabstrip`,
-                  onActiveChange: handleTabSelection,
-                  orientation: "vertical",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "demo", label: "DEMO" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "features", label: "VUU FEATURES" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "tables", label: "VUU TABLES" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuLeftNav-buttonBar", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  className: cx("vuuLeftNav-toggleButton", {
-                    "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
-                    "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
-                  }),
-                  "data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
-                  onClick: toggleExpanded
-                }
-              ) })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(`${classBase}-menu-primary`), "data-mode": "dark", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuLeftNav-logo", children: /* @__PURE__ */ jsxRuntime.jsx(vuuIcons.VuuLogo, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-main`, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            vuuUiControls.Tabstrip,
+            {
+              activeTabIndex: navState.activeTabIndex,
+              animateSelectionThumb: false,
+              className: `${classBase}-Tabstrip`,
+              onActiveChange: handleTabSelection,
+              orientation: "vertical",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "demo", label: "DEMO" }),
+                /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "features", label: "VUU FEATURES" }),
+                /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "tables", label: "VUU TABLES" }),
+                /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuLeftNav-buttonBar", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: cx("vuuLeftNav-toggleButton", {
+                "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
+                "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
+              }),
+              "data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
+              onClick: toggleExpanded
+            }
+          ) })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           vuuLayout.Stack,
           {

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

@@ -1 +1 @@
-{"version":3,"file":"LeftNav.js","sources":["../../src/left-nav/LeftNav.tsx"],"sourcesContent":["import { VuuLogo } from \"@vuu-ui/vuu-icons\";\nimport {\n  LayoutResizeAction,\n  Stack,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { Tab, Tabstrip } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  FilterTableFeatureProps,\n  hasFilterTableFeatureProps,\n  useThemeAttributes,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { FeatureProps } from \"../feature\";\nimport { FeatureList, GroupedFeatureProps } from \"../feature-list\";\nimport { LayoutList } from \"../layout-management\";\n\nimport leftNavCss from \"./LeftNav.css\";\n\nconst classBase = \"vuuLeftNav\";\n\nexport type NavDisplayStatus =\n  | \"menu-full\"\n  | \"menu-icons\"\n  | \"menu-full-content\"\n  | \"menu-icons-content\";\n\nconst getDisplayStatus = (\n  activeTabIndex: number,\n  expanded: boolean\n): NavDisplayStatus => {\n  if (activeTabIndex === 0) {\n    return expanded ? \"menu-full\" : \"menu-icons\";\n  } else {\n    return expanded ? \"menu-full-content\" : \"menu-icons-content\";\n  }\n};\n\nexport type NavDisplayStatusHandler = (\n  navDisplayStatus: NavDisplayStatus\n) => void;\nexport interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {\n  \"data-path\"?: string;\n  defaultActiveTabIndex?: number;\n  defaultExpanded?: boolean;\n  features: FeatureProps[];\n  onActiveChange?: (activeTabIndex: number) => void;\n  onTogglePrimaryMenu?: (expanded: boolean) => void;\n  sizeCollapsed?: number;\n  sizeContent?: number;\n  sizeExpanded?: number;\n  tableFeatures: FeatureProps<FilterTableFeatureProps>[];\n}\n\ntype NavState = {\n  activeTabIndex: number;\n  expanded: boolean;\n};\n\nconst byModule = (\n  f1: FeatureProps<FilterTableFeatureProps>,\n  f2: FeatureProps<FilterTableFeatureProps>\n) => {\n  const t1 = f1.ComponentProps?.tableSchema.table;\n  const t2 = f2.ComponentProps?.tableSchema.table;\n  if (t1 && t2) {\n    const m1 = t1.module.toLowerCase();\n    const m2 = t2.module.toLowerCase();\n    if (m1 < m2) {\n      return -1;\n    } else if (m1 > m2) {\n      return 1;\n    } else if (t1.table < t2.table) {\n      return -1;\n    } else if (t1.table > t2.table) {\n      return 1;\n    } else {\n      return 0;\n    }\n  } else {\n    throw Error(\"Invalid tableFeature\");\n  }\n};\n\nexport const LeftNav = (props: LeftNavProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const [themeClass] = useThemeAttributes();\n  const {\n    \"data-path\": path,\n    defaultExpanded = true,\n    defaultActiveTabIndex = 0,\n    features,\n    onActiveChange,\n    onTogglePrimaryMenu,\n    sizeCollapsed = 80,\n    sizeContent = 300,\n    sizeExpanded = 240,\n    style: styleProp,\n    tableFeatures,\n    ...htmlAttributes\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-left-nav\",\n    css: leftNavCss,\n    window: targetWindow,\n  });\n\n  const [navState, setNavState] = useState<NavState>({\n    activeTabIndex: defaultActiveTabIndex,\n    expanded: defaultExpanded,\n  });\n\n  const tableFeaturesByGroup = useMemo(\n    () =>\n      tableFeatures\n        .sort(byModule)\n        .reduce<GroupedFeatureProps<FilterTableFeatureProps>>(\n          (acc, filterTableFeature) => {\n            if (hasFilterTableFeatureProps(filterTableFeature)) {\n              const { table } = filterTableFeature.ComponentProps.tableSchema;\n              const key = `${table.module} Tables`;\n              if (!acc[key]) {\n                acc[key] = [];\n              }\n              return {\n                ...acc,\n                [key]: acc[key].concat(filterTableFeature),\n              };\n            } else {\n              return acc;\n              // throw Error(\"LeftNaV invalid tableFeature\");\n            }\n          },\n          {}\n        ),\n    [tableFeatures]\n  );\n\n  const getFullWidth = useCallback(\n    (tabIndex: number, expanded: boolean): number => {\n      if (tabIndex === 0) {\n        return expanded ? sizeExpanded : sizeCollapsed;\n      } else {\n        return expanded\n          ? sizeExpanded + sizeContent\n          : sizeCollapsed + sizeContent;\n      }\n    },\n    [sizeCollapsed, sizeContent, sizeExpanded]\n  );\n\n  const handleTabSelection = useCallback(\n    (activeTabIndex: number) => {\n      const { activeTabIndex: currentIndex, expanded } = navState;\n      const newState = { activeTabIndex, expanded };\n      setNavState(newState);\n      if (activeTabIndex === 0 || currentIndex === 0) {\n        const width = getFullWidth(activeTabIndex, expanded);\n        dispatch({\n          type: \"layout-resize\",\n          path: \"#vuu-side-panel\",\n          size: width,\n        } as LayoutResizeAction);\n      }\n      onActiveChange?.(activeTabIndex);\n    },\n    [dispatch, getFullWidth, navState, onActiveChange]\n  );\n\n  const displayStatus = getDisplayStatus(\n    navState.activeTabIndex,\n    navState.expanded\n  );\n\n  const toggleExpanded = useCallback(() => {\n    const { activeTabIndex, expanded } = navState;\n    const primaryMenuExpanded = !expanded;\n    const newState = { activeTabIndex, expanded: primaryMenuExpanded };\n    setNavState(newState);\n    dispatch({\n      type: \"layout-resize\",\n      path: \"#vuu-side-panel\",\n      size: getFullWidth(activeTabIndex, primaryMenuExpanded),\n    } as LayoutResizeAction);\n    onTogglePrimaryMenu?.(primaryMenuExpanded);\n  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);\n\n  const style = {\n    ...styleProp,\n    \"--nav-menu-collapsed-width\": `${sizeCollapsed}px`,\n    \"--nav-menu-expanded-width\": `${sizeExpanded}px`,\n    \"--nav-menu-content-width\": `${sizeContent}px`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${displayStatus}`)}\n      style={style}\n    >\n      <div\n        className={cx(`${classBase}-menu-primary`, themeClass)}\n        data-mode=\"dark\"\n      >\n        <div className=\"vuuLeftNav-logo\">\n          <VuuLogo />\n        </div>\n        <div className={`${classBase}-main`}>\n          <Tabstrip\n            activeTabIndex={navState.activeTabIndex}\n            animateSelectionThumb={false}\n            className={`${classBase}-Tabstrip`}\n            onActiveChange={handleTabSelection}\n            orientation=\"vertical\"\n          >\n            <Tab data-icon=\"demo\" label=\"DEMO\"></Tab>\n            <Tab data-icon=\"features\" label=\"VUU FEATURES\"></Tab>\n            <Tab data-icon=\"tables\" label=\"VUU TABLES\"></Tab>\n            <Tab data-icon=\"layouts\" label=\"MY LAYOUTS\"></Tab>\n          </Tabstrip>\n        </div>\n        <div className=\"vuuLeftNav-buttonBar\">\n          <button\n            className={cx(\"vuuLeftNav-toggleButton\", {\n              \"vuuLeftNav-toggleButton-open\":\n                displayStatus.startsWith(\"menu-full\"),\n              \"vuuLeftNav-toggleButton-closed\":\n                displayStatus.startsWith(\"menu-icons\"),\n            })}\n            data-icon={\n              displayStatus.startsWith(\"menu-full\")\n                ? \"chevron-left\"\n                : \"chevron-right\"\n            }\n            onClick={toggleExpanded}\n          />\n        </div>\n      </div>\n      <Stack\n        active={navState.activeTabIndex - 1}\n        className={`${classBase}-menu-secondary`}\n        showTabs={false}\n      >\n        <FeatureList features={features} title=\"VUU FEATURES\" />\n        <FeatureList features={tableFeaturesByGroup} title=\"VUU TABLES\" />\n        <LayoutList title=\"MY LAYOUTS\" />\n      </Stack>\n    </div>\n  );\n};\n"],"names":["useLayoutProviderDispatch","useThemeAttributes","useWindow","useComponentCssInjection","leftNavCss","useState","useMemo","hasFilterTableFeatureProps","useCallback","jsxs","jsx","VuuLogo","Tabstrip","Tab","Stack","FeatureList","LayoutList"],"mappings":"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"}
+{"version":3,"file":"LeftNav.js","sources":["../../src/left-nav/LeftNav.tsx"],"sourcesContent":["import { VuuLogo } from \"@vuu-ui/vuu-icons\";\nimport {\n  LayoutResizeAction,\n  Stack,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { Tab, Tabstrip } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  FilterTableFeatureProps,\n  hasFilterTableFeatureProps,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { FeatureProps } from \"../feature\";\nimport { FeatureList, GroupedFeatureProps } from \"../feature-list\";\nimport { LayoutList } from \"../layout-management\";\n\nimport leftNavCss from \"./LeftNav.css\";\n\nconst classBase = \"vuuLeftNav\";\n\nexport type NavDisplayStatus =\n  | \"menu-full\"\n  | \"menu-icons\"\n  | \"menu-full-content\"\n  | \"menu-icons-content\";\n\nconst getDisplayStatus = (\n  activeTabIndex: number,\n  expanded: boolean\n): NavDisplayStatus => {\n  if (activeTabIndex === 0) {\n    return expanded ? \"menu-full\" : \"menu-icons\";\n  } else {\n    return expanded ? \"menu-full-content\" : \"menu-icons-content\";\n  }\n};\n\nexport type NavDisplayStatusHandler = (\n  navDisplayStatus: NavDisplayStatus\n) => void;\nexport interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {\n  \"data-path\"?: string;\n  defaultActiveTabIndex?: number;\n  defaultExpanded?: boolean;\n  features: FeatureProps[];\n  onActiveChange?: (activeTabIndex: number) => void;\n  onTogglePrimaryMenu?: (expanded: boolean) => void;\n  sizeCollapsed?: number;\n  sizeContent?: number;\n  sizeExpanded?: number;\n  tableFeatures: FeatureProps<FilterTableFeatureProps>[];\n}\n\ntype NavState = {\n  activeTabIndex: number;\n  expanded: boolean;\n};\n\nconst byModule = (\n  f1: FeatureProps<FilterTableFeatureProps>,\n  f2: FeatureProps<FilterTableFeatureProps>\n) => {\n  const t1 = f1.ComponentProps?.tableSchema.table;\n  const t2 = f2.ComponentProps?.tableSchema.table;\n  if (t1 && t2) {\n    const m1 = t1.module.toLowerCase();\n    const m2 = t2.module.toLowerCase();\n    if (m1 < m2) {\n      return -1;\n    } else if (m1 > m2) {\n      return 1;\n    } else if (t1.table < t2.table) {\n      return -1;\n    } else if (t1.table > t2.table) {\n      return 1;\n    } else {\n      return 0;\n    }\n  } else {\n    throw Error(\"Invalid tableFeature\");\n  }\n};\n\nexport const LeftNav = (props: LeftNavProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const {\n    \"data-path\": path,\n    defaultExpanded = true,\n    defaultActiveTabIndex = 0,\n    features,\n    onActiveChange,\n    onTogglePrimaryMenu,\n    sizeCollapsed = 80,\n    sizeContent = 300,\n    sizeExpanded = 240,\n    style: styleProp,\n    tableFeatures,\n    ...htmlAttributes\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-left-nav\",\n    css: leftNavCss,\n    window: targetWindow,\n  });\n\n  const [navState, setNavState] = useState<NavState>({\n    activeTabIndex: defaultActiveTabIndex,\n    expanded: defaultExpanded,\n  });\n\n  const tableFeaturesByGroup = useMemo(\n    () =>\n      tableFeatures\n        .sort(byModule)\n        .reduce<GroupedFeatureProps<FilterTableFeatureProps>>(\n          (acc, filterTableFeature) => {\n            if (hasFilterTableFeatureProps(filterTableFeature)) {\n              const { table } = filterTableFeature.ComponentProps.tableSchema;\n              const key = `${table.module} Tables`;\n              if (!acc[key]) {\n                acc[key] = [];\n              }\n              return {\n                ...acc,\n                [key]: acc[key].concat(filterTableFeature),\n              };\n            } else {\n              return acc;\n              // throw Error(\"LeftNaV invalid tableFeature\");\n            }\n          },\n          {}\n        ),\n    [tableFeatures]\n  );\n\n  const getFullWidth = useCallback(\n    (tabIndex: number, expanded: boolean): number => {\n      if (tabIndex === 0) {\n        return expanded ? sizeExpanded : sizeCollapsed;\n      } else {\n        return expanded\n          ? sizeExpanded + sizeContent\n          : sizeCollapsed + sizeContent;\n      }\n    },\n    [sizeCollapsed, sizeContent, sizeExpanded]\n  );\n\n  const handleTabSelection = useCallback(\n    (activeTabIndex: number) => {\n      const { activeTabIndex: currentIndex, expanded } = navState;\n      const newState = { activeTabIndex, expanded };\n      setNavState(newState);\n      if (activeTabIndex === 0 || currentIndex === 0) {\n        const width = getFullWidth(activeTabIndex, expanded);\n        dispatch({\n          type: \"layout-resize\",\n          path: \"#vuu-side-panel\",\n          size: width,\n        } as LayoutResizeAction);\n      }\n      onActiveChange?.(activeTabIndex);\n    },\n    [dispatch, getFullWidth, navState, onActiveChange]\n  );\n\n  const displayStatus = getDisplayStatus(\n    navState.activeTabIndex,\n    navState.expanded\n  );\n\n  const toggleExpanded = useCallback(() => {\n    const { activeTabIndex, expanded } = navState;\n    const primaryMenuExpanded = !expanded;\n    const newState = { activeTabIndex, expanded: primaryMenuExpanded };\n    setNavState(newState);\n    dispatch({\n      type: \"layout-resize\",\n      path: \"#vuu-side-panel\",\n      size: getFullWidth(activeTabIndex, primaryMenuExpanded),\n    } as LayoutResizeAction);\n    onTogglePrimaryMenu?.(primaryMenuExpanded);\n  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);\n\n  const style = {\n    ...styleProp,\n    \"--nav-menu-collapsed-width\": `${sizeCollapsed}px`,\n    \"--nav-menu-expanded-width\": `${sizeExpanded}px`,\n    \"--nav-menu-content-width\": `${sizeContent}px`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${displayStatus}`)}\n      style={style}\n    >\n      <div className={cx(`${classBase}-menu-primary`)} data-mode=\"dark\">\n        <div className=\"vuuLeftNav-logo\">\n          <VuuLogo />\n        </div>\n        <div className={`${classBase}-main`}>\n          <Tabstrip\n            activeTabIndex={navState.activeTabIndex}\n            animateSelectionThumb={false}\n            className={`${classBase}-Tabstrip`}\n            onActiveChange={handleTabSelection}\n            orientation=\"vertical\"\n          >\n            <Tab data-icon=\"demo\" label=\"DEMO\"></Tab>\n            <Tab data-icon=\"features\" label=\"VUU FEATURES\"></Tab>\n            <Tab data-icon=\"tables\" label=\"VUU TABLES\"></Tab>\n            <Tab data-icon=\"layouts\" label=\"MY LAYOUTS\"></Tab>\n          </Tabstrip>\n        </div>\n        <div className=\"vuuLeftNav-buttonBar\">\n          <button\n            className={cx(\"vuuLeftNav-toggleButton\", {\n              \"vuuLeftNav-toggleButton-open\":\n                displayStatus.startsWith(\"menu-full\"),\n              \"vuuLeftNav-toggleButton-closed\":\n                displayStatus.startsWith(\"menu-icons\"),\n            })}\n            data-icon={\n              displayStatus.startsWith(\"menu-full\")\n                ? \"chevron-left\"\n                : \"chevron-right\"\n            }\n            onClick={toggleExpanded}\n          />\n        </div>\n      </div>\n      <Stack\n        active={navState.activeTabIndex - 1}\n        className={`${classBase}-menu-secondary`}\n        showTabs={false}\n      >\n        <FeatureList features={features} title=\"VUU FEATURES\" />\n        <FeatureList features={tableFeaturesByGroup} title=\"VUU TABLES\" />\n        <LayoutList title=\"MY LAYOUTS\" />\n      </Stack>\n    </div>\n  );\n};\n"],"names":["useLayoutProviderDispatch","useWindow","useComponentCssInjection","leftNavCss","useState","useMemo","hasFilterTableFeatureProps","useCallback","jsxs","jsx","VuuLogo","Tabstrip","Tab","Stack","FeatureList","LayoutList"],"mappings":"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"}

package/cjs/shell-layouts/useFullHeightLeftPanel.js

@@ -27,7 +27,15 @@ const useFullHeightLeftPanel = ({
             style: { flex: 1, flexDirection: "column" },
             children: [
               appHeader,
-              /* @__PURE__ */ jsxRuntime.jsx(vuuLayout.DraggableLayout, { dropTarget: true, style: { flex: 1 } }, "main-content")
+              /* @__PURE__ */ jsxRuntime.jsx(
+                vuuLayout.DraggableLayout,
+                {
+                  dropTarget: true,
+                  className: "vuuShell-content-main",
+                  style: { flex: 1 }
+                },
+                "main-content"
+              )
             ]
           }
         ),

package/cjs/shell-layouts/useFullHeightLeftPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFullHeightLeftPanel.js","sources":["../../src/shell-layouts/useFullHeightLeftPanel.tsx"],"sourcesContent":["import { DraggableLayout, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { ReactElement } from \"react\";\nimport { ContextPanel } from \"./context-panel\";\nimport { SidePanel } from \"./side-panel\";\nimport { ShellLayoutProps } from \"./useShellLayout\";\n\nexport const useFullHeightLeftPanel = ({\n  appHeader,\n  LeftSidePanelProps,\n}: ShellLayoutProps): ReactElement => {\n  return (\n    <Flexbox\n      className=\"App\"\n      style={{\n        flexDirection: \"row\",\n        height: \"100%\",\n        width: \"100%\",\n      }}\n    >\n      <SidePanel {...LeftSidePanelProps} id=\"vuu-side-panel\" />\n      <Flexbox\n        className=\"vuuShell-content\"\n        style={{ flex: 1, flexDirection: \"column\" }}\n      >\n        {appHeader}\n        <DraggableLayout dropTarget key=\"main-content\" style={{ flex: 1 }} />\n      </Flexbox>\n      <ContextPanel id=\"context-panel\" overlay></ContextPanel>\n    </Flexbox>\n  );\n};\n"],"names":["jsxs","Flexbox","jsx","SidePanel","DraggableLayout","ContextPanel"],"mappings":";;;;;;;AAMO,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAA;AAAA,EACA,kBAAA;AACF,CAAsC,KAAA;AACpC,EACE,uBAAAA,eAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,KAAO,EAAA;AAAA,QACL,aAAe,EAAA,KAAA;AAAA,QACf,MAAQ,EAAA,MAAA;AAAA,QACR,KAAO,EAAA,MAAA;AAAA,OACT;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,mBAAW,EAAA,EAAA,GAAG,kBAAoB,EAAA,EAAA,EAAG,gBAAiB,EAAA,CAAA;AAAA,wBACvDH,eAAA;AAAA,UAACC,iBAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACDC,cAAA,CAACE,6BAAgB,UAAU,EAAA,IAAA,EAAoB,OAAO,EAAE,IAAA,EAAM,CAAE,EAAA,EAAA,EAAhC,cAAmC,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACrE;AAAA,wBACCF,cAAA,CAAAG,yBAAA,EAAA,EAAa,EAAG,EAAA,eAAA,EAAgB,SAAO,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC3C,CAAA;AAEJ;;;;"}
+{"version":3,"file":"useFullHeightLeftPanel.js","sources":["../../src/shell-layouts/useFullHeightLeftPanel.tsx"],"sourcesContent":["import { DraggableLayout, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { ReactElement } from \"react\";\nimport { ContextPanel } from \"./context-panel\";\nimport { SidePanel } from \"./side-panel\";\nimport { ShellLayoutProps } from \"./useShellLayout\";\n\nexport const useFullHeightLeftPanel = ({\n  appHeader,\n  LeftSidePanelProps,\n}: ShellLayoutProps): ReactElement => {\n  return (\n    <Flexbox\n      className=\"App\"\n      style={{\n        flexDirection: \"row\",\n        height: \"100%\",\n        width: \"100%\",\n      }}\n    >\n      <SidePanel {...LeftSidePanelProps} id=\"vuu-side-panel\" />\n      <Flexbox\n        className=\"vuuShell-content\"\n        style={{ flex: 1, flexDirection: \"column\" }}\n      >\n        {appHeader}\n        <DraggableLayout\n          dropTarget\n          className=\"vuuShell-content-main\"\n          key=\"main-content\"\n          style={{ flex: 1 }}\n        />\n      </Flexbox>\n      <ContextPanel id=\"context-panel\" overlay></ContextPanel>\n    </Flexbox>\n  );\n};\n"],"names":["jsxs","Flexbox","jsx","SidePanel","DraggableLayout","ContextPanel"],"mappings":";;;;;;;AAMO,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAA;AAAA,EACA,kBAAA;AACF,CAAsC,KAAA;AACpC,EACE,uBAAAA,eAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,KAAO,EAAA;AAAA,QACL,aAAe,EAAA,KAAA;AAAA,QACf,MAAQ,EAAA,MAAA;AAAA,QACR,KAAO,EAAA,MAAA;AAAA,OACT;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,mBAAW,EAAA,EAAA,GAAG,kBAAoB,EAAA,EAAA,EAAG,gBAAiB,EAAA,CAAA;AAAA,wBACvDH,eAAA;AAAA,UAACC,iBAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACDC,cAAA;AAAA,gBAACE,yBAAA;AAAA,gBAAA;AAAA,kBACC,UAAU,EAAA,IAAA;AAAA,kBACV,SAAU,EAAA,uBAAA;AAAA,kBAEV,KAAA,EAAO,EAAE,IAAA,EAAM,CAAE,EAAA;AAAA,iBAAA;AAAA,gBADb,cAAA;AAAA,eAEN;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,wBACCF,cAAA,CAAAG,yBAAA,EAAA,EAAa,EAAG,EAAA,eAAA,EAAgB,SAAO,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC3C,CAAA;AAEJ;;;;"}

package/cjs/shell.css.js

@@ -1,6 +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";
+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.vuuShell-content {\n  padding: var(--vuuShell-content-padding, 8px);\n}\n";
 
 module.exports = shellCss;
 //# sourceMappingURL=shell.css.js.map

package/esm/ShellContextProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShellContextProvider.js","sources":["../src/ShellContextProvider.tsx"],"sourcesContent":["import {\n  DefaultColumnConfiguration,\n  ListOption,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { RpcResponseHandler } from \"@vuu-ui/vuu-data-types\";\nimport { createContext, ReactElement, ReactNode, useContext } from \"react\";\nimport type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nexport type LookupTableProvider = (table: VuuTable) => ListOption[];\n\nexport interface ShellContextProps {\n  getDefaultColumnConfig?: DefaultColumnConfiguration;\n  getLookupValues?: LookupTableProvider;\n  handleRpcResponse?: RpcResponseHandler;\n}\n\nconst defaultConfig = {};\n\nconst ShellContext = createContext<ShellContextProps>(defaultConfig);\n\nexport interface ShellProviderProps {\n  children: ReactNode;\n  value?: ShellContextProps;\n}\n\nconst Provider = ({\n  children,\n  context,\n  inheritedContext,\n}: {\n  children: ReactNode;\n  context?: ShellContextProps;\n  inheritedContext?: ShellContextProps;\n}) => {\n  // TODO functions provided at multiple levels must be merged\n  const mergedContext = {\n    ...inheritedContext,\n    ...context,\n  };\n  return (\n    <ShellContext.Provider value={mergedContext}>\n      {children}\n    </ShellContext.Provider>\n  );\n};\n\nexport const ShellContextProvider = ({\n  children,\n  value,\n}: ShellProviderProps): ReactElement => {\n  return (\n    <ShellContext.Consumer>\n      {(context) => (\n        <Provider context={value} inheritedContext={context}>\n          {children}\n        </Provider>\n      )}\n    </ShellContext.Consumer>\n  );\n};\n\nexport const useShellContext = () => {\n  return useContext(ShellContext);\n};\n"],"names":[],"mappings":";;;AAgBA,MAAM,gBAAgB,EAAC,CAAA;AAEvB,MAAM,YAAA,GAAe,cAAiC,aAAa,CAAA,CAAA;AAOnE,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAA;AACF,CAIM,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,GAAG,gBAAA;AAAA,IACH,GAAG,OAAA;AAAA,GACL,CAAA;AACA,EAAA,2BACG,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,eAC3B,QACH,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,KAAA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACG,GAAA,CAAA,YAAA,CAAa,QAAb,EAAA,EACE,QAAC,EAAA,CAAA,OAAA,qBACC,GAAA,CAAA,QAAA,EAAA,EAAS,OAAS,EAAA,KAAA,EAAO,gBAAkB,EAAA,OAAA,EACzC,UACH,CAEJ,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,kBAAkB,MAAM;AACnC,EAAA,OAAO,WAAW,YAAY,CAAA,CAAA;AAChC;;;;"}
+{"version":3,"file":"ShellContextProvider.js","sources":["../src/ShellContextProvider.tsx"],"sourcesContent":["import {\n  DefaultColumnConfiguration,\n  DefaultTableConfiguration,\n  ListOption,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { RpcResponseHandler } from \"@vuu-ui/vuu-data-types\";\nimport { createContext, ReactElement, ReactNode, useContext } from \"react\";\nimport type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nexport type LookupTableProvider = (table: VuuTable) => ListOption[];\n\nexport interface ShellContextProps {\n  getDefaultColumnConfig?: DefaultColumnConfiguration;\n  getDefaultTableConfig?: DefaultTableConfiguration;\n  getLookupValues?: LookupTableProvider;\n  handleRpcResponse?: RpcResponseHandler;\n}\n\nconst defaultConfig = {};\n\nconst ShellContext = createContext<ShellContextProps>(defaultConfig);\n\nexport interface ShellProviderProps {\n  children: ReactNode;\n  value?: ShellContextProps;\n}\n\nconst Provider = ({\n  children,\n  context,\n  inheritedContext,\n}: {\n  children: ReactNode;\n  context?: ShellContextProps;\n  inheritedContext?: ShellContextProps;\n}) => {\n  // TODO functions provided at multiple levels must be merged\n  const mergedContext = {\n    ...inheritedContext,\n    ...context,\n  };\n  return (\n    <ShellContext.Provider value={mergedContext}>\n      {children}\n    </ShellContext.Provider>\n  );\n};\n\nexport const ShellContextProvider = ({\n  children,\n  value,\n}: ShellProviderProps): ReactElement => {\n  return (\n    <ShellContext.Consumer>\n      {(context) => (\n        <Provider context={value} inheritedContext={context}>\n          {children}\n        </Provider>\n      )}\n    </ShellContext.Consumer>\n  );\n};\n\nexport const useShellContext = () => {\n  return useContext(ShellContext);\n};\n"],"names":[],"mappings":";;;AAkBA,MAAM,gBAAgB,EAAC,CAAA;AAEvB,MAAM,YAAA,GAAe,cAAiC,aAAa,CAAA,CAAA;AAOnE,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAA;AACF,CAIM,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,GAAG,gBAAA;AAAA,IACH,GAAG,OAAA;AAAA,GACL,CAAA;AACA,EAAA,2BACG,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,eAC3B,QACH,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,KAAA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACG,GAAA,CAAA,YAAA,CAAa,QAAb,EAAA,EACE,QAAC,EAAA,CAAA,OAAA,qBACC,GAAA,CAAA,QAAA,EAAA,EAAS,OAAS,EAAA,KAAA,EAAO,gBAAkB,EAAA,OAAA,EACzC,UACH,CAEJ,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,kBAAkB,MAAM;AACnC,EAAA,OAAO,WAAW,YAAY,CAAA,CAAA;AAChC;;;;"}

package/esm/application-provider/ApplicationProvider.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { SaltProvider } from '@salt-ds/core';
+import { useTheme, useDensity, SaltProvider } from '@salt-ds/core';
 import { useContext, useState, useMemo, useCallback } from 'react';
 import { ApplicationContext } from './ApplicationContext.js';
 import { usePersistenceManager } from '../persistence-management/PersistenceProvider.js';
@@ -7,18 +7,23 @@ import '../persistence-management/LocalPersistenceManager.js';
 import '../persistence-management/RemotePersistenceManager.js';
 import '../persistence-management/StaticPersistenceManager.js';
 
-const getThemeMode = (userSettings) => {
+const getThemeMode = (mode, userSettings) => {
   const themeMode = userSettings?.themeMode;
   if (themeMode === "light" || themeMode === "dark") {
     return themeMode;
   }
-  return "light";
+  return mode;
 };
 const ApplicationProvider = ({
   children,
+  density: densityProp,
+  mode = "light",
+  theme,
   userSettingsSchema,
   user
 }) => {
+  const { mode: inheritedMode, theme: inheritedTheme } = useTheme();
+  const density = useDensity(densityProp);
   const persistenceManager = usePersistenceManager();
   const context = useContext(ApplicationContext);
   const [userSettings, setSettings] = useState();
@@ -53,9 +58,9 @@ const ApplicationProvider = ({
       children: /* @__PURE__ */ jsx(
         SaltProvider,
         {
-          theme: "vuu-theme",
-          density: "high",
-          mode: getThemeMode(userSettings),
+          theme: theme ?? inheritedTheme ?? "vuu-theme",
+          density,
+          mode: getThemeMode(mode ?? inheritedMode, userSettings),
           children
         }
       )

package/esm/application-provider/ApplicationProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { SaltProvider } from \"@salt-ds/core\";\nimport {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { usePersistenceManager } from \"../persistence-management\";\n\nexport interface ApplicationProviderProps\n  extends Partial<Omit<ApplicationContextProps, \"userSettings\">> {\n  children: ReactNode;\n}\n\nconst getThemeMode = (\n  userSettings?: Record<string, string | number | boolean>\n) => {\n  const themeMode = userSettings?.themeMode;\n  if (themeMode === \"light\" || themeMode === \"dark\") {\n    return themeMode;\n  }\n  return \"light\";\n};\n\nexport const ApplicationProvider = ({\n  children,\n  userSettingsSchema: userSettingsSchema,\n  user,\n}: ApplicationProviderProps): ReactElement | null => {\n  const persistenceManager = usePersistenceManager();\n  const context = useContext(ApplicationContext);\n  const [userSettings, setSettings] =\n    useState<Record<string, string | number | boolean>>();\n\n  useMemo(async () => {\n    if (persistenceManager) {\n      const userSettings = await persistenceManager.getUserSettings();\n      setSettings(userSettings);\n    } else {\n      setSettings({});\n    }\n  }, [persistenceManager]);\n\n  const onUserSettingChanged = useCallback(\n    (propertyName: string, value: VuuRowDataItemType) => {\n      setSettings((currentSettings) => {\n        const newSettings = { ...currentSettings, [propertyName]: value };\n        persistenceManager?.saveUserSettings(newSettings);\n        return newSettings;\n      });\n    },\n    [persistenceManager]\n  );\n\n  return userSettings ? (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        onUserSettingChanged,\n        userSettings,\n        userSettingsSchema,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider\n        theme=\"vuu-theme\"\n        density=\"high\"\n        mode={getThemeMode(userSettings)}\n      >\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  ) : null;\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\n//Setter method (only used within the shell)\nexport const useApplicationSettings = () => {\n  const { onUserSettingChanged, userSettings, userSettingsSchema } =\n    useContext(ApplicationContext);\n  return {\n    onUserSettingChanged,\n    userSettings,\n    userSettingsSchema,\n  };\n};\n\n//Getter method (read only access to applicationSetting)\nexport const useUserSetting = () => {\n  const { userSettings } = useContext(ApplicationContext);\n  return { userSettings };\n};\n"],"names":["userSettings"],"mappings":";;;;;;;;;AAqBA,MAAM,YAAA,GAAe,CACnB,YACG,KAAA;AACH,EAAA,MAAM,YAAY,YAAc,EAAA,SAAA,CAAA;AAChC,EAAI,IAAA,SAAA,KAAc,OAAW,IAAA,SAAA,KAAc,MAAQ,EAAA;AACjD,IAAO,OAAA,SAAA,CAAA;AAAA,GACT;AACA,EAAO,OAAA,OAAA,CAAA;AACT,CAAA,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,IAAA;AACF,CAAqD,KAAA;AACnD,EAAA,MAAM,qBAAqB,qBAAsB,EAAA,CAAA;AACjD,EAAM,MAAA,OAAA,GAAU,WAAW,kBAAkB,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,YAAA,EAAc,WAAW,CAAA,GAC9B,QAAoD,EAAA,CAAA;AAEtD,EAAA,OAAA,CAAQ,YAAY;AAClB,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAMA,MAAAA,aAAAA,GAAe,MAAM,kBAAA,CAAmB,eAAgB,EAAA,CAAA;AAC9D,MAAA,WAAA,CAAYA,aAAY,CAAA,CAAA;AAAA,KACnB,MAAA;AACL,MAAA,WAAA,CAAY,EAAE,CAAA,CAAA;AAAA,KAChB;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,cAAsB,KAA8B,KAAA;AACnD,MAAA,WAAA,CAAY,CAAC,eAAoB,KAAA;AAC/B,QAAA,MAAM,cAAc,EAAE,GAAG,iBAAiB,CAAC,YAAY,GAAG,KAAM,EAAA,CAAA;AAChE,QAAA,kBAAA,EAAoB,iBAAiB,WAAW,CAAA,CAAA;AAChD,QAAO,OAAA,WAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACH;AAAA,IACA,CAAC,kBAAkB,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,OAAO,YACL,mBAAA,GAAA;AAAA,IAAC,kBAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAG,OAAA;AAAA,QACH,oBAAA;AAAA,QACA,YAAA;AAAA,QACA,kBAAA;AAAA,QACA,IAAA,EAAM,QAAQ,OAAQ,CAAA,IAAA;AAAA,OACxB;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,KAAM,EAAA,WAAA;AAAA,UACN,OAAQ,EAAA,MAAA;AAAA,UACR,IAAA,EAAM,aAAa,YAAY,CAAA;AAAA,UAE9B,QAAA;AAAA,SAAA;AAAA,OACH;AAAA,KAAA;AAAA,GAEA,GAAA,IAAA,CAAA;AACN,EAAA;AAEO,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,UAAA,CAAW,kBAAkB,CAAA,CAAA;AAC9C,EAAO,OAAA,IAAA,CAAA;AACT,EAAA;AAGO,MAAM,yBAAyB,MAAM;AAC1C,EAAA,MAAM,EAAE,oBAAsB,EAAA,YAAA,EAAc,kBAAmB,EAAA,GAC7D,WAAW,kBAAkB,CAAA,CAAA;AAC/B,EAAO,OAAA;AAAA,IACL,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,kBAAA;AAAA,GACF,CAAA;AACF,EAAA;AAGO,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,EAAE,YAAA,EAAiB,GAAA,UAAA,CAAW,kBAAkB,CAAA,CAAA;AACtD,EAAA,OAAO,EAAE,YAAa,EAAA,CAAA;AACxB;;;;"}
+{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  Density,\n  Mode,\n  SaltProvider,\n  ThemeContextProps,\n  useDensity,\n  useTheme,\n} from \"@salt-ds/core\";\nimport {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { usePersistenceManager } from \"../persistence-management\";\n\nexport interface ApplicationProviderProps\n  extends Partial<Pick<ThemeContextProps, \"theme\" | \"mode\">>,\n    Partial<Omit<ApplicationContextProps, \"userSettings\">> {\n  children: ReactNode;\n  density?: Density;\n}\n\nconst getThemeMode = (\n  mode: Mode,\n  userSettings?: Record<string, string | number | boolean>\n) => {\n  const themeMode = userSettings?.themeMode;\n  if (themeMode === \"light\" || themeMode === \"dark\") {\n    return themeMode;\n  }\n  return mode;\n};\n\nexport const ApplicationProvider = ({\n  children,\n  density: densityProp,\n  mode = \"light\",\n  theme,\n  userSettingsSchema: userSettingsSchema,\n  user,\n}: ApplicationProviderProps): ReactElement | null => {\n  const { mode: inheritedMode, theme: inheritedTheme } = useTheme();\n  const density = useDensity(densityProp);\n  const persistenceManager = usePersistenceManager();\n  const context = useContext(ApplicationContext);\n  const [userSettings, setSettings] =\n    useState<Record<string, string | number | boolean>>();\n\n  useMemo(async () => {\n    if (persistenceManager) {\n      const userSettings = await persistenceManager.getUserSettings();\n      setSettings(userSettings);\n    } else {\n      setSettings({});\n    }\n  }, [persistenceManager]);\n\n  const onUserSettingChanged = useCallback(\n    (propertyName: string, value: VuuRowDataItemType) => {\n      setSettings((currentSettings) => {\n        const newSettings = { ...currentSettings, [propertyName]: value };\n        persistenceManager?.saveUserSettings(newSettings);\n        return newSettings;\n      });\n    },\n    [persistenceManager]\n  );\n\n  return userSettings ? (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        onUserSettingChanged,\n        userSettings,\n        userSettingsSchema,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider\n        theme={theme ?? inheritedTheme ?? \"vuu-theme\"}\n        density={density}\n        mode={getThemeMode(mode ?? inheritedMode, userSettings)}\n      >\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  ) : null;\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\n//Setter method (only used within the shell)\nexport const useApplicationSettings = () => {\n  const { onUserSettingChanged, userSettings, userSettingsSchema } =\n    useContext(ApplicationContext);\n  return {\n    onUserSettingChanged,\n    userSettings,\n    userSettingsSchema,\n  };\n};\n\n//Getter method (read only access to applicationSetting)\nexport const useUserSetting = () => {\n  const { userSettings } = useContext(ApplicationContext);\n  return { userSettings };\n};\n"],"names":["userSettings"],"mappings":"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"}

package/esm/left-nav/LeftNav.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { VuuLogo } from '@vuu-ui/vuu-icons';
 import { useLayoutProviderDispatch, Stack } from '@vuu-ui/vuu-layout';
 import { Tabstrip, Tab } from '@vuu-ui/vuu-ui-controls';
-import { useThemeAttributes, hasFilterTableFeatureProps } from '@vuu-ui/vuu-utils';
+import { hasFilterTableFeatureProps } from '@vuu-ui/vuu-utils';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
@@ -46,7 +46,6 @@ const byModule = (f1, f2) => {
 };
 const LeftNav = (props) => {
   const dispatch = useLayoutProviderDispatch();
-  const [themeClass] = useThemeAttributes();
   const {
     "data-path": path,
     defaultExpanded = true,
@@ -148,43 +147,36 @@ const LeftNav = (props) => {
       className: cx(classBase, `${classBase}-${displayStatus}`),
       style,
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cx(`${classBase}-menu-primary`, themeClass),
-            "data-mode": "dark",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "vuuLeftNav-logo", children: /* @__PURE__ */ jsx(VuuLogo, {}) }),
-              /* @__PURE__ */ jsx("div", { className: `${classBase}-main`, children: /* @__PURE__ */ jsxs(
-                Tabstrip,
-                {
-                  activeTabIndex: navState.activeTabIndex,
-                  animateSelectionThumb: false,
-                  className: `${classBase}-Tabstrip`,
-                  onActiveChange: handleTabSelection,
-                  orientation: "vertical",
-                  children: [
-                    /* @__PURE__ */ jsx(Tab, { "data-icon": "demo", label: "DEMO" }),
-                    /* @__PURE__ */ jsx(Tab, { "data-icon": "features", label: "VUU FEATURES" }),
-                    /* @__PURE__ */ jsx(Tab, { "data-icon": "tables", label: "VUU TABLES" }),
-                    /* @__PURE__ */ jsx(Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { className: "vuuLeftNav-buttonBar", children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  className: cx("vuuLeftNav-toggleButton", {
-                    "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
-                    "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
-                  }),
-                  "data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
-                  onClick: toggleExpanded
-                }
-              ) })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs("div", { className: cx(`${classBase}-menu-primary`), "data-mode": "dark", children: [
+          /* @__PURE__ */ jsx("div", { className: "vuuLeftNav-logo", children: /* @__PURE__ */ jsx(VuuLogo, {}) }),
+          /* @__PURE__ */ jsx("div", { className: `${classBase}-main`, children: /* @__PURE__ */ jsxs(
+            Tabstrip,
+            {
+              activeTabIndex: navState.activeTabIndex,
+              animateSelectionThumb: false,
+              className: `${classBase}-Tabstrip`,
+              onActiveChange: handleTabSelection,
+              orientation: "vertical",
+              children: [
+                /* @__PURE__ */ jsx(Tab, { "data-icon": "demo", label: "DEMO" }),
+                /* @__PURE__ */ jsx(Tab, { "data-icon": "features", label: "VUU FEATURES" }),
+                /* @__PURE__ */ jsx(Tab, { "data-icon": "tables", label: "VUU TABLES" }),
+                /* @__PURE__ */ jsx(Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "vuuLeftNav-buttonBar", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: cx("vuuLeftNav-toggleButton", {
+                "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
+                "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
+              }),
+              "data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
+              onClick: toggleExpanded
+            }
+          ) })
+        ] }),
         /* @__PURE__ */ jsxs(
           Stack,
           {

package/esm/left-nav/LeftNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftNav.js","sources":["../../src/left-nav/LeftNav.tsx"],"sourcesContent":["import { VuuLogo } from \"@vuu-ui/vuu-icons\";\nimport {\n  LayoutResizeAction,\n  Stack,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { Tab, Tabstrip } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  FilterTableFeatureProps,\n  hasFilterTableFeatureProps,\n  useThemeAttributes,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { FeatureProps } from \"../feature\";\nimport { FeatureList, GroupedFeatureProps } from \"../feature-list\";\nimport { LayoutList } from \"../layout-management\";\n\nimport leftNavCss from \"./LeftNav.css\";\n\nconst classBase = \"vuuLeftNav\";\n\nexport type NavDisplayStatus =\n  | \"menu-full\"\n  | \"menu-icons\"\n  | \"menu-full-content\"\n  | \"menu-icons-content\";\n\nconst getDisplayStatus = (\n  activeTabIndex: number,\n  expanded: boolean\n): NavDisplayStatus => {\n  if (activeTabIndex === 0) {\n    return expanded ? \"menu-full\" : \"menu-icons\";\n  } else {\n    return expanded ? \"menu-full-content\" : \"menu-icons-content\";\n  }\n};\n\nexport type NavDisplayStatusHandler = (\n  navDisplayStatus: NavDisplayStatus\n) => void;\nexport interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {\n  \"data-path\"?: string;\n  defaultActiveTabIndex?: number;\n  defaultExpanded?: boolean;\n  features: FeatureProps[];\n  onActiveChange?: (activeTabIndex: number) => void;\n  onTogglePrimaryMenu?: (expanded: boolean) => void;\n  sizeCollapsed?: number;\n  sizeContent?: number;\n  sizeExpanded?: number;\n  tableFeatures: FeatureProps<FilterTableFeatureProps>[];\n}\n\ntype NavState = {\n  activeTabIndex: number;\n  expanded: boolean;\n};\n\nconst byModule = (\n  f1: FeatureProps<FilterTableFeatureProps>,\n  f2: FeatureProps<FilterTableFeatureProps>\n) => {\n  const t1 = f1.ComponentProps?.tableSchema.table;\n  const t2 = f2.ComponentProps?.tableSchema.table;\n  if (t1 && t2) {\n    const m1 = t1.module.toLowerCase();\n    const m2 = t2.module.toLowerCase();\n    if (m1 < m2) {\n      return -1;\n    } else if (m1 > m2) {\n      return 1;\n    } else if (t1.table < t2.table) {\n      return -1;\n    } else if (t1.table > t2.table) {\n      return 1;\n    } else {\n      return 0;\n    }\n  } else {\n    throw Error(\"Invalid tableFeature\");\n  }\n};\n\nexport const LeftNav = (props: LeftNavProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const [themeClass] = useThemeAttributes();\n  const {\n    \"data-path\": path,\n    defaultExpanded = true,\n    defaultActiveTabIndex = 0,\n    features,\n    onActiveChange,\n    onTogglePrimaryMenu,\n    sizeCollapsed = 80,\n    sizeContent = 300,\n    sizeExpanded = 240,\n    style: styleProp,\n    tableFeatures,\n    ...htmlAttributes\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-left-nav\",\n    css: leftNavCss,\n    window: targetWindow,\n  });\n\n  const [navState, setNavState] = useState<NavState>({\n    activeTabIndex: defaultActiveTabIndex,\n    expanded: defaultExpanded,\n  });\n\n  const tableFeaturesByGroup = useMemo(\n    () =>\n      tableFeatures\n        .sort(byModule)\n        .reduce<GroupedFeatureProps<FilterTableFeatureProps>>(\n          (acc, filterTableFeature) => {\n            if (hasFilterTableFeatureProps(filterTableFeature)) {\n              const { table } = filterTableFeature.ComponentProps.tableSchema;\n              const key = `${table.module} Tables`;\n              if (!acc[key]) {\n                acc[key] = [];\n              }\n              return {\n                ...acc,\n                [key]: acc[key].concat(filterTableFeature),\n              };\n            } else {\n              return acc;\n              // throw Error(\"LeftNaV invalid tableFeature\");\n            }\n          },\n          {}\n        ),\n    [tableFeatures]\n  );\n\n  const getFullWidth = useCallback(\n    (tabIndex: number, expanded: boolean): number => {\n      if (tabIndex === 0) {\n        return expanded ? sizeExpanded : sizeCollapsed;\n      } else {\n        return expanded\n          ? sizeExpanded + sizeContent\n          : sizeCollapsed + sizeContent;\n      }\n    },\n    [sizeCollapsed, sizeContent, sizeExpanded]\n  );\n\n  const handleTabSelection = useCallback(\n    (activeTabIndex: number) => {\n      const { activeTabIndex: currentIndex, expanded } = navState;\n      const newState = { activeTabIndex, expanded };\n      setNavState(newState);\n      if (activeTabIndex === 0 || currentIndex === 0) {\n        const width = getFullWidth(activeTabIndex, expanded);\n        dispatch({\n          type: \"layout-resize\",\n          path: \"#vuu-side-panel\",\n          size: width,\n        } as LayoutResizeAction);\n      }\n      onActiveChange?.(activeTabIndex);\n    },\n    [dispatch, getFullWidth, navState, onActiveChange]\n  );\n\n  const displayStatus = getDisplayStatus(\n    navState.activeTabIndex,\n    navState.expanded\n  );\n\n  const toggleExpanded = useCallback(() => {\n    const { activeTabIndex, expanded } = navState;\n    const primaryMenuExpanded = !expanded;\n    const newState = { activeTabIndex, expanded: primaryMenuExpanded };\n    setNavState(newState);\n    dispatch({\n      type: \"layout-resize\",\n      path: \"#vuu-side-panel\",\n      size: getFullWidth(activeTabIndex, primaryMenuExpanded),\n    } as LayoutResizeAction);\n    onTogglePrimaryMenu?.(primaryMenuExpanded);\n  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);\n\n  const style = {\n    ...styleProp,\n    \"--nav-menu-collapsed-width\": `${sizeCollapsed}px`,\n    \"--nav-menu-expanded-width\": `${sizeExpanded}px`,\n    \"--nav-menu-content-width\": `${sizeContent}px`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${displayStatus}`)}\n      style={style}\n    >\n      <div\n        className={cx(`${classBase}-menu-primary`, themeClass)}\n        data-mode=\"dark\"\n      >\n        <div className=\"vuuLeftNav-logo\">\n          <VuuLogo />\n        </div>\n        <div className={`${classBase}-main`}>\n          <Tabstrip\n            activeTabIndex={navState.activeTabIndex}\n            animateSelectionThumb={false}\n            className={`${classBase}-Tabstrip`}\n            onActiveChange={handleTabSelection}\n            orientation=\"vertical\"\n          >\n            <Tab data-icon=\"demo\" label=\"DEMO\"></Tab>\n            <Tab data-icon=\"features\" label=\"VUU FEATURES\"></Tab>\n            <Tab data-icon=\"tables\" label=\"VUU TABLES\"></Tab>\n            <Tab data-icon=\"layouts\" label=\"MY LAYOUTS\"></Tab>\n          </Tabstrip>\n        </div>\n        <div className=\"vuuLeftNav-buttonBar\">\n          <button\n            className={cx(\"vuuLeftNav-toggleButton\", {\n              \"vuuLeftNav-toggleButton-open\":\n                displayStatus.startsWith(\"menu-full\"),\n              \"vuuLeftNav-toggleButton-closed\":\n                displayStatus.startsWith(\"menu-icons\"),\n            })}\n            data-icon={\n              displayStatus.startsWith(\"menu-full\")\n                ? \"chevron-left\"\n                : \"chevron-right\"\n            }\n            onClick={toggleExpanded}\n          />\n        </div>\n      </div>\n      <Stack\n        active={navState.activeTabIndex - 1}\n        className={`${classBase}-menu-secondary`}\n        showTabs={false}\n      >\n        <FeatureList features={features} title=\"VUU FEATURES\" />\n        <FeatureList features={tableFeaturesByGroup} title=\"VUU TABLES\" />\n        <LayoutList title=\"MY LAYOUTS\" />\n      </Stack>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAM,SAAY,GAAA,YAAA,CAAA;AAQlB,MAAM,gBAAA,GAAmB,CACvB,cAAA,EACA,QACqB,KAAA;AACrB,EAAA,IAAI,mBAAmB,CAAG,EAAA;AACxB,IAAA,OAAO,WAAW,WAAc,GAAA,YAAA,CAAA;AAAA,GAC3B,MAAA;AACL,IAAA,OAAO,WAAW,mBAAsB,GAAA,oBAAA,CAAA;AAAA,GAC1C;AACF,CAAA,CAAA;AAuBA,MAAM,QAAA,GAAW,CACf,EAAA,EACA,EACG,KAAA;AACH,EAAM,MAAA,EAAA,GAAK,EAAG,CAAA,cAAA,EAAgB,WAAY,CAAA,KAAA,CAAA;AAC1C,EAAM,MAAA,EAAA,GAAK,EAAG,CAAA,cAAA,EAAgB,WAAY,CAAA,KAAA,CAAA;AAC1C,EAAA,IAAI,MAAM,EAAI,EAAA;AACZ,IAAM,MAAA,EAAA,GAAK,EAAG,CAAA,MAAA,CAAO,WAAY,EAAA,CAAA;AACjC,IAAM,MAAA,EAAA,GAAK,EAAG,CAAA,MAAA,CAAO,WAAY,EAAA,CAAA;AACjC,IAAA,IAAI,KAAK,EAAI,EAAA;AACX,MAAO,OAAA,CAAA,CAAA,CAAA;AAAA,KACT,MAAA,IAAW,KAAK,EAAI,EAAA;AAClB,MAAO,OAAA,CAAA,CAAA;AAAA,KACE,MAAA,IAAA,EAAA,CAAG,KAAQ,GAAA,EAAA,CAAG,KAAO,EAAA;AAC9B,MAAO,OAAA,CAAA,CAAA,CAAA;AAAA,KACE,MAAA,IAAA,EAAA,CAAG,KAAQ,GAAA,EAAA,CAAG,KAAO,EAAA;AAC9B,MAAO,OAAA,CAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,CAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAA,MAAM,MAAM,sBAAsB,CAAA,CAAA;AAAA,GACpC;AACF,CAAA,CAAA;AAEa,MAAA,OAAA,GAAU,CAAC,KAAwB,KAAA;AAC9C,EAAA,MAAM,WAAW,yBAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,CAAC,UAAU,CAAA,GAAI,kBAAmB,EAAA,CAAA;AACxC,EAAM,MAAA;AAAA,IACJ,WAAa,EAAA,IAAA;AAAA,IACb,eAAkB,GAAA,IAAA;AAAA,IAClB,qBAAwB,GAAA,CAAA;AAAA,IACxB,QAAA;AAAA,IACA,cAAA;AAAA,IACA,mBAAA;AAAA,IACA,aAAgB,GAAA,EAAA;AAAA,IAChB,WAAc,GAAA,GAAA;AAAA,IACd,YAAe,GAAA,GAAA;AAAA,IACf,KAAO,EAAA,SAAA;AAAA,IACP,aAAA;AAAA,IACA,GAAG,cAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAmB,CAAA;AAAA,IACjD,cAAgB,EAAA,qBAAA;AAAA,IAChB,QAAU,EAAA,eAAA;AAAA,GACX,CAAA,CAAA;AAED,EAAA,MAAM,oBAAuB,GAAA,OAAA;AAAA,IAC3B,MACE,aAAA,CACG,IAAK,CAAA,QAAQ,CACb,CAAA,MAAA;AAAA,MACC,CAAC,KAAK,kBAAuB,KAAA;AAC3B,QAAI,IAAA,0BAAA,CAA2B,kBAAkB,CAAG,EAAA;AAClD,UAAA,MAAM,EAAE,KAAA,EAAU,GAAA,kBAAA,CAAmB,cAAe,CAAA,WAAA,CAAA;AACpD,UAAM,MAAA,GAAA,GAAM,CAAG,EAAA,KAAA,CAAM,MAAM,CAAA,OAAA,CAAA,CAAA;AAC3B,UAAI,IAAA,CAAC,GAAI,CAAA,GAAG,CAAG,EAAA;AACb,YAAI,GAAA,CAAA,GAAG,IAAI,EAAC,CAAA;AAAA,WACd;AACA,UAAO,OAAA;AAAA,YACL,GAAG,GAAA;AAAA,YACH,CAAC,GAAG,GAAG,IAAI,GAAG,CAAA,CAAE,OAAO,kBAAkB,CAAA;AAAA,WAC3C,CAAA;AAAA,SACK,MAAA;AACL,UAAO,OAAA,GAAA,CAAA;AAAA,SAET;AAAA,OACF;AAAA,MACA,EAAC;AAAA,KACH;AAAA,IACJ,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,UAAkB,QAA8B,KAAA;AAC/C,MAAA,IAAI,aAAa,CAAG,EAAA;AAClB,QAAA,OAAO,WAAW,YAAe,GAAA,aAAA,CAAA;AAAA,OAC5B,MAAA;AACL,QAAO,OAAA,QAAA,GACH,YAAe,GAAA,WAAA,GACf,aAAgB,GAAA,WAAA,CAAA;AAAA,OACtB;AAAA,KACF;AAAA,IACA,CAAC,aAAe,EAAA,WAAA,EAAa,YAAY,CAAA;AAAA,GAC3C,CAAA;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,cAA2B,KAAA;AAC1B,MAAA,MAAM,EAAE,cAAA,EAAgB,YAAc,EAAA,QAAA,EAAa,GAAA,QAAA,CAAA;AACnD,MAAM,MAAA,QAAA,GAAW,EAAE,cAAA,EAAgB,QAAS,EAAA,CAAA;AAC5C,MAAA,WAAA,CAAY,QAAQ,CAAA,CAAA;AACpB,MAAI,IAAA,cAAA,KAAmB,CAAK,IAAA,YAAA,KAAiB,CAAG,EAAA;AAC9C,QAAM,MAAA,KAAA,GAAQ,YAAa,CAAA,cAAA,EAAgB,QAAQ,CAAA,CAAA;AACnD,QAAS,QAAA,CAAA;AAAA,UACP,IAAM,EAAA,eAAA;AAAA,UACN,IAAM,EAAA,iBAAA;AAAA,UACN,IAAM,EAAA,KAAA;AAAA,SACe,CAAA,CAAA;AAAA,OACzB;AACA,MAAA,cAAA,GAAiB,cAAc,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAA,EAAU,YAAc,EAAA,QAAA,EAAU,cAAc,CAAA;AAAA,GACnD,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,gBAAA;AAAA,IACpB,QAAS,CAAA,cAAA;AAAA,IACT,QAAS,CAAA,QAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,IAAM,MAAA,EAAE,cAAgB,EAAA,QAAA,EAAa,GAAA,QAAA,CAAA;AACrC,IAAA,MAAM,sBAAsB,CAAC,QAAA,CAAA;AAC7B,IAAA,MAAM,QAAW,GAAA,EAAE,cAAgB,EAAA,QAAA,EAAU,mBAAoB,EAAA,CAAA;AACjE,IAAA,WAAA,CAAY,QAAQ,CAAA,CAAA;AACpB,IAAS,QAAA,CAAA;AAAA,MACP,IAAM,EAAA,eAAA;AAAA,MACN,IAAM,EAAA,iBAAA;AAAA,MACN,IAAA,EAAM,YAAa,CAAA,cAAA,EAAgB,mBAAmB,CAAA;AAAA,KACjC,CAAA,CAAA;AACvB,IAAA,mBAAA,GAAsB,mBAAmB,CAAA,CAAA;AAAA,KACxC,CAAC,QAAA,EAAU,YAAc,EAAA,QAAA,EAAU,mBAAmB,CAAC,CAAA,CAAA;AAE1D,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,4BAAA,EAA8B,GAAG,aAAa,CAAA,EAAA,CAAA;AAAA,IAC9C,2BAAA,EAA6B,GAAG,YAAY,CAAA,EAAA,CAAA;AAAA,IAC5C,0BAAA,EAA4B,GAAG,WAAW,CAAA,EAAA,CAAA;AAAA,GAC5C,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,WAAW,EAAG,CAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,aAAa,CAAE,CAAA,CAAA;AAAA,MACxD,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,iBAAiB,UAAU,CAAA;AAAA,YACrD,WAAU,EAAA,MAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iBACb,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAQ,CACX,EAAA,CAAA;AAAA,8BACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,KAAA,CAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,gBAAgB,QAAS,CAAA,cAAA;AAAA,kBACzB,qBAAuB,EAAA,KAAA;AAAA,kBACvB,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,kBACvB,cAAgB,EAAA,kBAAA;AAAA,kBAChB,WAAY,EAAA,UAAA;AAAA,kBAEZ,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,GAAI,EAAA,EAAA,WAAA,EAAU,MAAO,EAAA,KAAA,EAAM,MAAO,EAAA,CAAA;AAAA,oCAClC,GAAA,CAAA,GAAA,EAAA,EAAI,WAAU,EAAA,UAAA,EAAW,OAAM,cAAe,EAAA,CAAA;AAAA,oCAC9C,GAAA,CAAA,GAAA,EAAA,EAAI,WAAU,EAAA,QAAA,EAAS,OAAM,YAAa,EAAA,CAAA;AAAA,oCAC1C,GAAA,CAAA,GAAA,EAAA,EAAI,WAAU,EAAA,SAAA,EAAU,OAAM,YAAa,EAAA,CAAA;AAAA,mBAAA;AAAA,iBAAA;AAAA,eAEhD,EAAA,CAAA;AAAA,8BACA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,sBACb,EAAA,QAAA,kBAAA,GAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,GAAG,yBAA2B,EAAA;AAAA,oBACvC,8BAAA,EACE,aAAc,CAAA,UAAA,CAAW,WAAW,CAAA;AAAA,oBACtC,gCAAA,EACE,aAAc,CAAA,UAAA,CAAW,YAAY,CAAA;AAAA,mBACxC,CAAA;AAAA,kBACD,WACE,EAAA,aAAA,CAAc,UAAW,CAAA,WAAW,IAChC,cACA,GAAA,eAAA;AAAA,kBAEN,OAAS,EAAA,cAAA;AAAA,iBAAA;AAAA,eAEb,EAAA,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,wBACA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,SAAS,cAAiB,GAAA,CAAA;AAAA,YAClC,SAAA,EAAW,GAAG,SAAS,CAAA,eAAA,CAAA;AAAA,YACvB,QAAU,EAAA,KAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,WAAA,EAAA,EAAY,QAAoB,EAAA,KAAA,EAAM,cAAe,EAAA,CAAA;AAAA,8BACrD,GAAA,CAAA,WAAA,EAAA,EAAY,QAAU,EAAA,oBAAA,EAAsB,OAAM,YAAa,EAAA,CAAA;AAAA,8BAChE,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAM,YAAa,EAAA,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACjC;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LeftNav.js","sources":["../../src/left-nav/LeftNav.tsx"],"sourcesContent":["import { VuuLogo } from \"@vuu-ui/vuu-icons\";\nimport {\n  LayoutResizeAction,\n  Stack,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { Tab, Tabstrip } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  FilterTableFeatureProps,\n  hasFilterTableFeatureProps,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { FeatureProps } from \"../feature\";\nimport { FeatureList, GroupedFeatureProps } from \"../feature-list\";\nimport { LayoutList } from \"../layout-management\";\n\nimport leftNavCss from \"./LeftNav.css\";\n\nconst classBase = \"vuuLeftNav\";\n\nexport type NavDisplayStatus =\n  | \"menu-full\"\n  | \"menu-icons\"\n  | \"menu-full-content\"\n  | \"menu-icons-content\";\n\nconst getDisplayStatus = (\n  activeTabIndex: number,\n  expanded: boolean\n): NavDisplayStatus => {\n  if (activeTabIndex === 0) {\n    return expanded ? \"menu-full\" : \"menu-icons\";\n  } else {\n    return expanded ? \"menu-full-content\" : \"menu-icons-content\";\n  }\n};\n\nexport type NavDisplayStatusHandler = (\n  navDisplayStatus: NavDisplayStatus\n) => void;\nexport interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {\n  \"data-path\"?: string;\n  defaultActiveTabIndex?: number;\n  defaultExpanded?: boolean;\n  features: FeatureProps[];\n  onActiveChange?: (activeTabIndex: number) => void;\n  onTogglePrimaryMenu?: (expanded: boolean) => void;\n  sizeCollapsed?: number;\n  sizeContent?: number;\n  sizeExpanded?: number;\n  tableFeatures: FeatureProps<FilterTableFeatureProps>[];\n}\n\ntype NavState = {\n  activeTabIndex: number;\n  expanded: boolean;\n};\n\nconst byModule = (\n  f1: FeatureProps<FilterTableFeatureProps>,\n  f2: FeatureProps<FilterTableFeatureProps>\n) => {\n  const t1 = f1.ComponentProps?.tableSchema.table;\n  const t2 = f2.ComponentProps?.tableSchema.table;\n  if (t1 && t2) {\n    const m1 = t1.module.toLowerCase();\n    const m2 = t2.module.toLowerCase();\n    if (m1 < m2) {\n      return -1;\n    } else if (m1 > m2) {\n      return 1;\n    } else if (t1.table < t2.table) {\n      return -1;\n    } else if (t1.table > t2.table) {\n      return 1;\n    } else {\n      return 0;\n    }\n  } else {\n    throw Error(\"Invalid tableFeature\");\n  }\n};\n\nexport const LeftNav = (props: LeftNavProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const {\n    \"data-path\": path,\n    defaultExpanded = true,\n    defaultActiveTabIndex = 0,\n    features,\n    onActiveChange,\n    onTogglePrimaryMenu,\n    sizeCollapsed = 80,\n    sizeContent = 300,\n    sizeExpanded = 240,\n    style: styleProp,\n    tableFeatures,\n    ...htmlAttributes\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-left-nav\",\n    css: leftNavCss,\n    window: targetWindow,\n  });\n\n  const [navState, setNavState] = useState<NavState>({\n    activeTabIndex: defaultActiveTabIndex,\n    expanded: defaultExpanded,\n  });\n\n  const tableFeaturesByGroup = useMemo(\n    () =>\n      tableFeatures\n        .sort(byModule)\n        .reduce<GroupedFeatureProps<FilterTableFeatureProps>>(\n          (acc, filterTableFeature) => {\n            if (hasFilterTableFeatureProps(filterTableFeature)) {\n              const { table } = filterTableFeature.ComponentProps.tableSchema;\n              const key = `${table.module} Tables`;\n              if (!acc[key]) {\n                acc[key] = [];\n              }\n              return {\n                ...acc,\n                [key]: acc[key].concat(filterTableFeature),\n              };\n            } else {\n              return acc;\n              // throw Error(\"LeftNaV invalid tableFeature\");\n            }\n          },\n          {}\n        ),\n    [tableFeatures]\n  );\n\n  const getFullWidth = useCallback(\n    (tabIndex: number, expanded: boolean): number => {\n      if (tabIndex === 0) {\n        return expanded ? sizeExpanded : sizeCollapsed;\n      } else {\n        return expanded\n          ? sizeExpanded + sizeContent\n          : sizeCollapsed + sizeContent;\n      }\n    },\n    [sizeCollapsed, sizeContent, sizeExpanded]\n  );\n\n  const handleTabSelection = useCallback(\n    (activeTabIndex: number) => {\n      const { activeTabIndex: currentIndex, expanded } = navState;\n      const newState = { activeTabIndex, expanded };\n      setNavState(newState);\n      if (activeTabIndex === 0 || currentIndex === 0) {\n        const width = getFullWidth(activeTabIndex, expanded);\n        dispatch({\n          type: \"layout-resize\",\n          path: \"#vuu-side-panel\",\n          size: width,\n        } as LayoutResizeAction);\n      }\n      onActiveChange?.(activeTabIndex);\n    },\n    [dispatch, getFullWidth, navState, onActiveChange]\n  );\n\n  const displayStatus = getDisplayStatus(\n    navState.activeTabIndex,\n    navState.expanded\n  );\n\n  const toggleExpanded = useCallback(() => {\n    const { activeTabIndex, expanded } = navState;\n    const primaryMenuExpanded = !expanded;\n    const newState = { activeTabIndex, expanded: primaryMenuExpanded };\n    setNavState(newState);\n    dispatch({\n      type: \"layout-resize\",\n      path: \"#vuu-side-panel\",\n      size: getFullWidth(activeTabIndex, primaryMenuExpanded),\n    } as LayoutResizeAction);\n    onTogglePrimaryMenu?.(primaryMenuExpanded);\n  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);\n\n  const style = {\n    ...styleProp,\n    \"--nav-menu-collapsed-width\": `${sizeCollapsed}px`,\n    \"--nav-menu-expanded-width\": `${sizeExpanded}px`,\n    \"--nav-menu-content-width\": `${sizeContent}px`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${displayStatus}`)}\n      style={style}\n    >\n      <div className={cx(`${classBase}-menu-primary`)} data-mode=\"dark\">\n        <div className=\"vuuLeftNav-logo\">\n          <VuuLogo />\n        </div>\n        <div className={`${classBase}-main`}>\n          <Tabstrip\n            activeTabIndex={navState.activeTabIndex}\n            animateSelectionThumb={false}\n            className={`${classBase}-Tabstrip`}\n            onActiveChange={handleTabSelection}\n            orientation=\"vertical\"\n          >\n            <Tab data-icon=\"demo\" label=\"DEMO\"></Tab>\n            <Tab data-icon=\"features\" label=\"VUU FEATURES\"></Tab>\n            <Tab data-icon=\"tables\" label=\"VUU TABLES\"></Tab>\n            <Tab data-icon=\"layouts\" label=\"MY LAYOUTS\"></Tab>\n          </Tabstrip>\n        </div>\n        <div className=\"vuuLeftNav-buttonBar\">\n          <button\n            className={cx(\"vuuLeftNav-toggleButton\", {\n              \"vuuLeftNav-toggleButton-open\":\n                displayStatus.startsWith(\"menu-full\"),\n              \"vuuLeftNav-toggleButton-closed\":\n                displayStatus.startsWith(\"menu-icons\"),\n            })}\n            data-icon={\n              displayStatus.startsWith(\"menu-full\")\n                ? \"chevron-left\"\n                : \"chevron-right\"\n            }\n            onClick={toggleExpanded}\n          />\n        </div>\n      </div>\n      <Stack\n        active={navState.activeTabIndex - 1}\n        className={`${classBase}-menu-secondary`}\n        showTabs={false}\n      >\n        <FeatureList features={features} title=\"VUU FEATURES\" />\n        <FeatureList features={tableFeaturesByGroup} title=\"VUU TABLES\" />\n        <LayoutList title=\"MY LAYOUTS\" />\n      </Stack>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/shell-layouts/useFullHeightLeftPanel.js

@@ -25,7 +25,15 @@ const useFullHeightLeftPanel = ({
             style: { flex: 1, flexDirection: "column" },
             children: [
               appHeader,
-              /* @__PURE__ */ jsx(DraggableLayout, { dropTarget: true, style: { flex: 1 } }, "main-content")
+              /* @__PURE__ */ jsx(
+                DraggableLayout,
+                {
+                  dropTarget: true,
+                  className: "vuuShell-content-main",
+                  style: { flex: 1 }
+                },
+                "main-content"
+              )
             ]
           }
         ),

package/esm/shell-layouts/useFullHeightLeftPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFullHeightLeftPanel.js","sources":["../../src/shell-layouts/useFullHeightLeftPanel.tsx"],"sourcesContent":["import { DraggableLayout, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { ReactElement } from \"react\";\nimport { ContextPanel } from \"./context-panel\";\nimport { SidePanel } from \"./side-panel\";\nimport { ShellLayoutProps } from \"./useShellLayout\";\n\nexport const useFullHeightLeftPanel = ({\n  appHeader,\n  LeftSidePanelProps,\n}: ShellLayoutProps): ReactElement => {\n  return (\n    <Flexbox\n      className=\"App\"\n      style={{\n        flexDirection: \"row\",\n        height: \"100%\",\n        width: \"100%\",\n      }}\n    >\n      <SidePanel {...LeftSidePanelProps} id=\"vuu-side-panel\" />\n      <Flexbox\n        className=\"vuuShell-content\"\n        style={{ flex: 1, flexDirection: \"column\" }}\n      >\n        {appHeader}\n        <DraggableLayout dropTarget key=\"main-content\" style={{ flex: 1 }} />\n      </Flexbox>\n      <ContextPanel id=\"context-panel\" overlay></ContextPanel>\n    </Flexbox>\n  );\n};\n"],"names":[],"mappings":";;;;;AAMO,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAA;AAAA,EACA,kBAAA;AACF,CAAsC,KAAA;AACpC,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,KAAO,EAAA;AAAA,QACL,aAAe,EAAA,KAAA;AAAA,QACf,MAAQ,EAAA,MAAA;AAAA,QACR,KAAO,EAAA,MAAA;AAAA,OACT;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAW,EAAA,EAAA,GAAG,kBAAoB,EAAA,EAAA,EAAG,gBAAiB,EAAA,CAAA;AAAA,wBACvD,IAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACD,GAAA,CAAC,mBAAgB,UAAU,EAAA,IAAA,EAAoB,OAAO,EAAE,IAAA,EAAM,CAAE,EAAA,EAAA,EAAhC,cAAmC,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACrE;AAAA,wBACC,GAAA,CAAA,YAAA,EAAA,EAAa,EAAG,EAAA,eAAA,EAAgB,SAAO,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC3C,CAAA;AAEJ;;;;"}
+{"version":3,"file":"useFullHeightLeftPanel.js","sources":["../../src/shell-layouts/useFullHeightLeftPanel.tsx"],"sourcesContent":["import { DraggableLayout, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { ReactElement } from \"react\";\nimport { ContextPanel } from \"./context-panel\";\nimport { SidePanel } from \"./side-panel\";\nimport { ShellLayoutProps } from \"./useShellLayout\";\n\nexport const useFullHeightLeftPanel = ({\n  appHeader,\n  LeftSidePanelProps,\n}: ShellLayoutProps): ReactElement => {\n  return (\n    <Flexbox\n      className=\"App\"\n      style={{\n        flexDirection: \"row\",\n        height: \"100%\",\n        width: \"100%\",\n      }}\n    >\n      <SidePanel {...LeftSidePanelProps} id=\"vuu-side-panel\" />\n      <Flexbox\n        className=\"vuuShell-content\"\n        style={{ flex: 1, flexDirection: \"column\" }}\n      >\n        {appHeader}\n        <DraggableLayout\n          dropTarget\n          className=\"vuuShell-content-main\"\n          key=\"main-content\"\n          style={{ flex: 1 }}\n        />\n      </Flexbox>\n      <ContextPanel id=\"context-panel\" overlay></ContextPanel>\n    </Flexbox>\n  );\n};\n"],"names":[],"mappings":";;;;;AAMO,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAA;AAAA,EACA,kBAAA;AACF,CAAsC,KAAA;AACpC,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,KAAO,EAAA;AAAA,QACL,aAAe,EAAA,KAAA;AAAA,QACf,MAAQ,EAAA,MAAA;AAAA,QACR,KAAO,EAAA,MAAA;AAAA,OACT;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAW,EAAA,EAAA,GAAG,kBAAoB,EAAA,EAAA,EAAG,gBAAiB,EAAA,CAAA;AAAA,wBACvD,IAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACD,GAAA;AAAA,gBAAC,eAAA;AAAA,gBAAA;AAAA,kBACC,UAAU,EAAA,IAAA;AAAA,kBACV,SAAU,EAAA,uBAAA;AAAA,kBAEV,KAAA,EAAO,EAAE,IAAA,EAAM,CAAE,EAAA;AAAA,iBAAA;AAAA,gBADb,cAAA;AAAA,eAEN;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,wBACC,GAAA,CAAA,YAAA,EAAA,EAAa,EAAG,EAAA,eAAA,EAAgB,SAAO,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC3C,CAAA;AAEJ;;;;"}

package/esm/shell.css.js

@@ -1,4 +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";
+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.vuuShell-content {\n  padding: var(--vuuShell-content-padding, 8px);\n}\n";
 
 export { shellCss as default };
 //# sourceMappingURL=shell.css.js.map

package/package.json

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

package/types/ShellContextProvider.d.ts

@@ -1,10 +1,11 @@
-import { DefaultColumnConfiguration, ListOption } from "@vuu-ui/vuu-table-types";
+import { DefaultColumnConfiguration, DefaultTableConfiguration, ListOption } from "@vuu-ui/vuu-table-types";
 import type { RpcResponseHandler } from "@vuu-ui/vuu-data-types";
 import { ReactElement, ReactNode } from "react";
 import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
 export type LookupTableProvider = (table: VuuTable) => ListOption[];
 export interface ShellContextProps {
     getDefaultColumnConfig?: DefaultColumnConfiguration;
+    getDefaultTableConfig?: DefaultTableConfiguration;
     getLookupValues?: LookupTableProvider;
     handleRpcResponse?: RpcResponseHandler;
 }

package/types/application-provider/ApplicationProvider.d.ts

@@ -1,10 +1,12 @@
 import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import { Density, ThemeContextProps } from "@salt-ds/core";
 import { ReactElement, ReactNode } from "react";
 import { ApplicationContextProps } from "./ApplicationContext";
-export interface ApplicationProviderProps extends Partial<Omit<ApplicationContextProps, "userSettings">> {
+export interface ApplicationProviderProps extends Partial<Pick<ThemeContextProps, "theme" | "mode">>, Partial<Omit<ApplicationContextProps, "userSettings">> {
     children: ReactNode;
+    density?: Density;
 }
-export declare const ApplicationProvider: ({ children, userSettingsSchema: userSettingsSchema, user, }: ApplicationProviderProps) => ReactElement | null;
+export declare const ApplicationProvider: ({ children, density: densityProp, mode, theme, userSettingsSchema: userSettingsSchema, user, }: ApplicationProviderProps) => ReactElement | null;
 export declare const useApplicationUser: () => import("packages/vuu-utils/src").VuuUser;
 export declare const useApplicationSettings: () => {
     onUserSettingChanged: (propertyName: string, value: VuuRowDataItemType) => void;