@vuu-ui/vuu-shell 0.8.32 → 0.8.34

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

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

package/cjs/packages/vuu-shell/src/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":["StackLayout","logger","useRef","useDialog","useLayoutManager","useLayoutContextMenuItems","useState","useCallback","useMemo","connectionStatus","connectToServer","useThemeAttributes","loadingApplicationJson","useShellLayout","jsx","AppHeader","ThemeProvider","jsxs","ContextMenuProvider","LayoutProvider","DraggableLayout"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+'use strict';
+
+const isWildcardSchema = (schema) => schema === "*";
+const isTableSchema = (schema) => typeof schema === "object" && typeof schema.module === "string" && typeof schema.table === "string";
+
+exports.isTableSchema = isTableSchema;
+exports.isWildcardSchema = isWildcardSchema;
+//# sourceMappingURL=shellTypes.js.map

package/cjs/packages/vuu-shell/src/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/cjs/packages/vuu-shell/src/theme-switch/ThemeSwitch.js

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

package/cjs/packages/vuu-shell/src/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":["useControlled","useCallback","jsxs","ToggleButtonGroup","jsx","ToggleButton"],"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,GAAIA,kBAAyB,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,GAAAC,iBAAA;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,uBAAAC,eAAA;AAAA,IAACC,sBAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACJ,QAAU,EAAA,qBAAA;AAAA,MACV,KAAO,EAAA,IAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,qBAAa,YAAW,EAAA,OAAA,EAAQ,WAAU,EAAA,OAAA,EAAQ,OAAM,OAAQ,EAAA,CAAA;AAAA,uCAChEA,iBAAa,EAAA,EAAA,YAAA,EAAW,QAAO,WAAU,EAAA,MAAA,EAAO,OAAM,MAAO,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAChE,CAAA;AAEJ;;;;"}

package/cjs/session-editing-form/SessionEditingForm.css

@@ -0,0 +1,53 @@
+.vuuSessionEditingForm {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 400px;
+    padding: 6px;
+}
+
+.vuuSessionEditingForm-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    gap: 3px;
+    overflow: auto;
+}
+
+.vuuSessionEditingForm-field {
+    align-items: center;
+    display: flex;
+    height: 32px;
+}
+
+.vuuSessionEditingForm-fieldLabel {
+    flex: 0 0 50%;
+}
+
+.vuuSessionEditingForm-fieldValue {
+    max-width: 50%;
+}
+
+.vuuSessionEditingForm-fieldValue.vuuReadOnly {
+    font-weight: var(--salt-text-label-fontWeight-strong);
+}
+
+.vuuSessionEditingForm-buttonbar {
+    align-items: center;
+    border-top: solid 1px var(--salt-container-primary-borderColor);
+    display: flex;
+    justify-content: flex-end;
+    flex: 0 0 autox;
+    gap: 6px;
+    padding-top: 6px;
+}
+
+.vuuSessionEditingForm-errorBanner {
+    --vuu-icon-left: 3px;
+    --vuu-icon-size: 18px;
+    --vuu-icon-top: 3px;
+    border: solid 1px var(--salt-status-error-borderColor);
+    line-height: 24px;
+    padding: 0 6px 0 26px;
+    position: relative;
+}

package/cjs/shell-layouts/context-panel/ContextPanel.css

@@ -0,0 +1,58 @@
+.vuuContextPanel {
+    position: relative;
+    transition: width .3s ease-in-out;
+    width: var(--vuu-side-panel-width, 0px) !important;
+    z-index: 1;
+}
+
+.vuuContextPanel-expanded {
+    --vuu-side-panel-width: 300px !important;
+    --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);
+    --vuu-side-panel-padding: 24px;
+}
+
+.vuuContextPanel-overlay {
+    width: 0px !important;
+}
+
+.vuuContextPanel-inner {
+    background-color: var(--salt-container-primary-background);
+    box-shadow: var(--vuu-side-panel-shadow, none);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0 !important;
+    overflow: auto;
+    padding-bottom: 24px;
+    padding-top: 24px;
+    padding-left: var(--vuu-side-panel-padding, 0);
+    padding-right: var(--vuu-side-panel-padding, 0);
+    position: absolute !important;
+    right: 0;
+    top:0;
+    transition-property: padding-left, padding-right, width;
+    transition-duration: .3s;
+    transition-timing-function: ease-in-out;
+    width: var(--vuu-side-panel-width, 0px);
+
+}
+
+.vuuContextPanel-header {
+    align-items: center;
+    display: flex;
+    flex-wrap: nowrap;
+    flex: 0 0 27px !important;
+    justify-content: space-between;
+}
+
+.vuuContextPanel-title {
+    font-size: 20px;
+    font-weight: 700;
+    white-space: nowrap;
+}
+
+.vuuContextPanel-content {
+    flex: 1 1 auto;
+    width: 100%;
+
+}

package/cjs/shell-layouts/side-panel/SidePanel.css

@@ -0,0 +1,4 @@
+.vuuShellSidePanel {
+    transition: width .2s ease-out;
+    width: var(--shell-left-nav-size);
+}

package/cjs/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/cjs/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/app-header/AppHeader.css

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

package/esm/connection-status/ConnectionStatusIcon.css

@@ -0,0 +1,68 @@
+.vuuStatus-container {
+	display: flex;
+}
+
+.vuuStatus-text {
+	align-self: center;
+}
+
+
+.vuuStatus {
+	--vuu-icon-height: 18px;
+	--vuu-icon-padding: var(--vuuStatus-padding, 6px);
+	--vuu-icon-width: var(--vuuStatus-width, auto);
+	--vuu-icon-min-width: var(--vuuStatus-min-width, 20px);
+	align-items: center;
+	display: inline-flex;
+	height: var(--vuu-icon-height);
+	justify-content: center;
+	min-width: var(--vuu-icon-min-width);
+	padding: 0 var(--vuu-icon-padding);
+	width: var(--vuu-icon-width);
+	position: relative;
+}
+
+.vuuStatus[data-icon]::after {
+	inset: 0 0 0 0;
+	content: '';
+	box-shadow: 0 0 0 0 black;
+	position: absolute;
+	mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
+	-webkit-mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
+}
+
+.vuuActiveStatus::after {
+	--vuu-icon-svg: var(--svg-active-status);
+	background-color: rgb(0, 255, 0);
+}
+
+.vuuConnectingStatus::after {
+	--vuu-icon-svg: var(--svg-connecting-status);
+	background-color: orange;
+	transform: scale(1);
+	animation: infinite pulse 1s;
+}
+
+.vuuDisconnectedStatus::after {
+	--vuu-icon-svg: var(--svg-disconnected-status);
+	background-color: red;
+	transform: scale(1);
+	animation: infinite pulse 0.5s;
+}
+
+@keyframes pulse {
+	0% {
+		transform: scale(0.95);
+		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+	}
+
+	70% {
+		transform: scale(1);
+		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+	}
+
+	100% {
+		transform: scale(0.95);
+		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+	}
+}

package/esm/feature-list/FeatureList.css

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

package/esm/layout-management/LayoutList.css

@@ -0,0 +1,86 @@
+.vuuLayoutList {
+    --vuuLayoutList-width: 90%;
+    --vuuMeasuredContainer-flex: 1 1 1px;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    padding-right: 6px;
+
+    /* compatible with Chrome, Edge, and Safari */
+    ::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: transparent;
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border-radius: 4px;
+        background: #D9D9D9;
+    }
+}
+
+.vuuLayoutList-header {
+    display: flex;
+    flex: 0 0 47px;
+    width: var(--vuuLayoutList-width);
+    padding: 16px 0;
+    border-bottom: 1px solid rgba(119, 124, 148, 0.10);
+    color: var(--light-text-primary, #15171B);
+    font-weight: 700;
+    letter-spacing: 0.48px;
+    line-height: 200%;
+    text-transform: uppercase;
+}
+
+.vuuLayoutList-groupName {
+    display: flex;
+    padding-top: 24px;
+    width: var(--vuuLayoutList-width);
+    color: var(--light-text-secondary, #606477);
+    font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+    font-family: Nunito Sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 200%;
+    letter-spacing: 0.48px;
+    text-transform: uppercase;
+}
+
+.vuuLayoutList-layoutContainer {
+    display: flex;
+    align-items: center;
+    width: 90%;
+    height: auto;
+    gap: 8px;
+    padding: 8px 0;
+    flex: 1 1 auto;
+    cursor: pointer;
+}
+
+.vuuLayoutList-layoutName {
+    color: var(--light-text-primary, #15171B);
+    font-weight: 600;
+    line-height: 133.333%;
+    text-transform: capitalize;
+}
+
+.vuuLayoutList-screenshot {
+    width: 60px;
+    height: 45.6px;
+    border: 1px solid #D6D7DA;
+}
+
+.vuuLayoutList-layoutDetails {
+    color: var(--light-text-secondary, #606477);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 150%;
+}

package/esm/layout-management/LayoutTile.css

@@ -0,0 +1,28 @@
+.vuuLayoutTile-layoutTile {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0px;
+  flex: 1 1 auto;
+  cursor: pointer;
+}
+
+.vuuLayoutTile-layoutName {
+  color: var(--light-text-primary, #15171B);
+  font-weight: 600;
+  line-height: 133.333%;
+  text-transform: capitalize;
+}
+
+.vuuLayoutTile-screenshot {
+  width: 60px;
+  height: 45.6px;
+  border: 1px solid #D6D7DA;
+}
+
+.vuuLayoutTile-layoutDetails {
+  color: var(--light-text-secondary, #606477);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 150%;
+}