@vuu-ui/vuu-shell 0.8.35 → 0.8.36

package/esm/shell.css

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

package/esm/shell.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { connectToServer } from '@vuu-ui/vuu-data-remote';
+import { StackLayout, LayoutProvider, DraggableLayout } from '@vuu-ui/vuu-layout';
+import { useDialog, ContextMenuProvider } from '@vuu-ui/vuu-popups';
+import { logger, useThemeAttributes, ThemeProvider } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { AppHeader } from './app-header/AppHeader.js';
+import '@vuu-ui/vuu-ui-controls';
+import 'html-to-image';
+import '@salt-ds/core';
+import { useLayoutManager } from './layout-management/useLayoutManager.js';
+import { useLayoutContextMenuItems } from './layout-management/useLayoutContextMenuItems.js';
+import { loadingApplicationJson } from './persistence-management/defaultApplicationJson.js';
+import './persistence-management/LocalPersistenceManager.js';
+import './persistence-management/RemotePersistenceManager.js';
+import { useShellLayout } from './shell-layouts/useShellLayout.js';
+
+if (typeof StackLayout !== "function") {
+  console.warn(
+    "StackLayout module not loaded, will be unsbale to deserialize from layout JSON"
+  );
+}
+const { error } = logger("Shell");
+const defaultLeftSidePanel = {};
+const Shell = ({
+  LayoutProps,
+  LeftSidePanelProps = defaultLeftSidePanel,
+  children,
+  className: classNameProp,
+  leftSidePanelLayout,
+  loginUrl,
+  saveLocation: _,
+  saveUrl,
+  serverUrl,
+  user,
+  ...htmlAttributes
+}) => {
+  const rootRef = useRef(null);
+  const { dialog, setDialogState } = useDialog();
+  const layoutId = useRef("latest");
+  const { applicationJson, saveApplicationLayout, loadLayoutById } = useLayoutManager();
+  const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems(setDialogState);
+  const [connectionStatus, setConnectionStatus] = useState("connected");
+  const handleLayoutChange = useCallback(
+    (layout) => {
+      try {
+        saveApplicationLayout(layout);
+      } catch {
+        error?.("Failed to save layout");
+      }
+    },
+    [saveApplicationLayout]
+  );
+  const handleSwitchTheme = useCallback((mode) => {
+    if (rootRef.current) {
+      rootRef.current.dataset.mode = mode;
+    }
+  }, []);
+  const handleNavigate = useCallback(
+    (id) => {
+      layoutId.current = id;
+      loadLayoutById(id);
+    },
+    [loadLayoutById]
+  );
+  useMemo(async () => {
+    if (serverUrl && user.token) {
+      const connectionStatus2 = await connectToServer({
+        authToken: user.token,
+        url: serverUrl,
+        username: user.username
+      });
+      setConnectionStatus(connectionStatus2);
+    }
+  }, [serverUrl, user.token, user.username]);
+  const [themeClass, densityClass, dataMode] = useThemeAttributes();
+  const className = cx("vuuShell", classNameProp, themeClass, densityClass);
+  const isLoading = applicationJson === loadingApplicationJson;
+  const shellLayout = useShellLayout({
+    LeftSidePanelProps,
+    leftSidePanelLayout,
+    appHeader: /* @__PURE__ */ jsx(
+      AppHeader,
+      {
+        layoutId: layoutId.current,
+        loginUrl,
+        user,
+        onNavigate: handleNavigate,
+        onSwitchTheme: handleSwitchTheme
+      }
+    )
+  });
+  if (connectionStatus === "rejected") {
+    console.log("game over, no connection to server");
+  }
+  return isLoading ? null : /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(
+    ContextMenuProvider,
+    {
+      menuActionHandler: handleMenuAction,
+      menuBuilder: buildMenuOptions,
+      children: [
+        /* @__PURE__ */ jsx(
+          LayoutProvider,
+          {
+            ...LayoutProps,
+            layout: applicationJson.layout,
+            onLayoutChange: handleLayoutChange,
+            children: /* @__PURE__ */ jsx(
+              DraggableLayout,
+              {
+                className,
+                "data-mode": dataMode,
+                ref: rootRef,
+                ...htmlAttributes,
+                children: shellLayout
+              }
+            )
+          }
+        ),
+        children || dialog
+      ]
+    }
+  ) });
+};
+
+export { Shell };
+//# sourceMappingURL=shell.js.map

package/esm/shell.js.map

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

package/esm/shellTypes.js

@@ -0,0 +1,5 @@
+const isWildcardSchema = (schema) => schema === "*";
+const isTableSchema = (schema) => typeof schema === "object" && typeof schema.module === "string" && typeof schema.table === "string";
+
+export { isTableSchema, isWildcardSchema };
+//# sourceMappingURL=shellTypes.js.map

package/esm/shellTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shellTypes.js","sources":["../src/shellTypes.ts"],"sourcesContent":["import type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport type { ViewProps } from \"@vuu-ui/vuu-layout\";\n\ndeclare global {\n  const vuuConfig: Promise<VuuConfig>;\n}\n\nexport type SaveLocation = \"local\" | \"remote\";\n\nexport interface FeatureConfig {\n  name: string;\n  title: string;\n  url: string;\n  css?: string;\n  leftNavLocation: \"vuu-features\" | \"vuu-tables\";\n  featureProps?: {\n    schema?: \"*\" | VuuTable;\n    schemas?: VuuTable[];\n    ViewProps?: Partial<ViewProps>;\n  };\n}\n\nexport type Features = {\n  [key: string]: FeatureConfig;\n};\nexport interface VuuConfig {\n  features: Features;\n  authUrl?: string;\n  websocketUrl: string;\n  ssl: boolean;\n}\n\nexport const isWildcardSchema = (schema?: \"*\" | VuuTable): schema is \"*\" =>\n  schema === \"*\";\nexport const isTableSchema = (schema?: \"*\" | VuuTable): schema is VuuTable =>\n  typeof schema === \"object\" &&\n  typeof schema.module === \"string\" &&\n  typeof schema.table === \"string\";\n"],"names":[],"mappings":"AAgCa,MAAA,gBAAA,GAAmB,CAAC,MAAA,KAC/B,MAAW,KAAA,IAAA;AACN,MAAM,aAAgB,GAAA,CAAC,MAC5B,KAAA,OAAO,MAAW,KAAA,QAAA,IAClB,OAAO,MAAA,CAAO,MAAW,KAAA,QAAA,IACzB,OAAO,MAAA,CAAO,KAAU,KAAA;;;;"}

package/esm/theme-switch/ThemeSwitch.css

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

package/esm/theme-switch/ThemeSwitch.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { useControlled, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
+import { useCallback } from 'react';
+
+const classBase = "vuuThemeSwitch";
+const ThemeSwitch = ({
+  className: classNameProp,
+  defaultMode: defaultModeProp,
+  mode: modeProp,
+  onChange,
+  ...htmlAttributes
+}) => {
+  const [mode, setMode] = useControlled({
+    controlled: modeProp,
+    default: defaultModeProp ?? "light",
+    name: "ThemeSwitch",
+    state: "mode"
+  });
+  const handleChangeSecondary = useCallback(
+    (evt) => {
+      const { value } = evt.target;
+      setMode(value);
+      onChange(value);
+    },
+    [onChange, setMode]
+  );
+  const className = cx(classBase, classNameProp);
+  return /* @__PURE__ */ jsxs(
+    ToggleButtonGroup,
+    {
+      className,
+      ...htmlAttributes,
+      onChange: handleChangeSecondary,
+      value: mode,
+      children: [
+        /* @__PURE__ */ jsx(ToggleButton, { "aria-label": "alert", "data-icon": "light", value: "light" }),
+        /* @__PURE__ */ jsx(ToggleButton, { "aria-label": "home", "data-icon": "dark", value: "dark" })
+      ]
+    }
+  );
+};
+
+export { ThemeSwitch };
+//# sourceMappingURL=ThemeSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitch.js","sources":["../../src/theme-switch/ThemeSwitch.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ToggleButton, ToggleButtonGroup, useControlled } from \"@salt-ds/core\";\nimport { HTMLAttributes, SyntheticEvent, useCallback } from \"react\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\n\nimport \"./ThemeSwitch.css\";\n\nconst classBase = \"vuuThemeSwitch\";\nexport interface ThemeSwitchProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultMode?: ThemeMode;\n  mode?: ThemeMode;\n  onChange: (mode: ThemeMode) => void;\n}\n\nexport const ThemeSwitch = ({\n  className: classNameProp,\n  defaultMode: defaultModeProp,\n  mode: modeProp,\n  onChange,\n  ...htmlAttributes\n}: ThemeSwitchProps) => {\n  const [mode, setMode] = useControlled<ThemeMode>({\n    controlled: modeProp,\n    default: defaultModeProp ?? \"light\",\n    name: \"ThemeSwitch\",\n    state: \"mode\",\n  });\n\n  const handleChangeSecondary = useCallback(\n    (evt: SyntheticEvent<HTMLButtonElement>) => {\n      const { value } = evt.target as HTMLButtonElement;\n      setMode(value as ThemeMode);\n      onChange(value as ThemeMode);\n    },\n    [onChange, setMode]\n  );\n  const className = cx(classBase, classNameProp);\n  return (\n    <ToggleButtonGroup\n      className={className}\n      {...htmlAttributes}\n      onChange={handleChangeSecondary}\n      value={mode}\n    >\n      <ToggleButton aria-label=\"alert\" data-icon=\"light\" value=\"light\" />\n      <ToggleButton aria-label=\"home\" data-icon=\"dark\" value=\"dark\" />\n    </ToggleButtonGroup>\n  );\n};\n"],"names":[],"mappings":";;;;;AAOA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAQX,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,WAAa,EAAA,eAAA;AAAA,EACb,IAAM,EAAA,QAAA;AAAA,EACN,QAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,aAAyB,CAAA;AAAA,IAC/C,UAAY,EAAA,QAAA;AAAA,IACZ,SAAS,eAAmB,IAAA,OAAA;AAAA,IAC5B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,GAA2C,KAAA;AAC1C,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,MAAA,OAAA,CAAQ,KAAkB,CAAA,CAAA;AAC1B,MAAA,QAAA,CAAS,KAAkB,CAAA,CAAA;AAAA,KAC7B;AAAA,IACA,CAAC,UAAU,OAAO,CAAA;AAAA,GACpB,CAAA;AACA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAC7C,EACE,uBAAA,IAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACJ,QAAU,EAAA,qBAAA;AAAA,MACV,KAAO,EAAA,IAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,gBAAa,YAAW,EAAA,OAAA,EAAQ,WAAU,EAAA,OAAA,EAAQ,OAAM,OAAQ,EAAA,CAAA;AAAA,4BAChE,YAAa,EAAA,EAAA,YAAA,EAAW,QAAO,WAAU,EAAA,MAAA,EAAO,OAAM,MAAO,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAChE,CAAA;AAEJ;;;;"}

package/package.json

@@ -1,23 +1,23 @@
 {
-  "version": "0.8.35",
+  "version": "0.8.36",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.35",
-    "@vuu-ui/vuu-protocol-types": "0.8.35",
-    "@vuu-ui/vuu-table-types": "0.8.35"
+    "@vuu-ui/vuu-data-types": "0.8.36",
+    "@vuu-ui/vuu-protocol-types": "0.8.36",
+    "@vuu-ui/vuu-table-types": "0.8.36"
   },
   "dependencies": {
     "@salt-ds/core": "1.17.0",
-    "@vuu-ui/vuu-data-remote": "0.8.35",
-    "@vuu-ui/vuu-icons": "0.8.35",
-    "@vuu-ui/vuu-filters": "0.8.35",
-    "@vuu-ui/vuu-layout": "0.8.35",
-    "@vuu-ui/vuu-popups": "0.8.35",
-    "@vuu-ui/vuu-table": "0.8.35",
-    "@vuu-ui/vuu-ui-controls": "0.8.35",
-    "@vuu-ui/vuu-utils": "0.8.35",
+    "@vuu-ui/vuu-data-remote": "0.8.36",
+    "@vuu-ui/vuu-icons": "0.8.36",
+    "@vuu-ui/vuu-filters": "0.8.36",
+    "@vuu-ui/vuu-layout": "0.8.36",
+    "@vuu-ui/vuu-popups": "0.8.36",
+    "@vuu-ui/vuu-table": "0.8.36",
+    "@vuu-ui/vuu-ui-controls": "0.8.36",
+    "@vuu-ui/vuu-utils": "0.8.36",
     "html-to-image": "^1.11.11"
   },
   "peerDependencies": {
@@ -28,6 +28,8 @@
   "sideEffects": false,
   "files": [
     "README.md",
+    "esm",
+    "cjs",
     "/types"
   ],
   "main": "cjs/index.js",