@vuu-ui/vuu-shell 2.1.19-beta.2 → 2.1.19-beta.4

package/cjs/theme-switch/ThemeSwitch.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var themeSwitchCss = "\n.vuuThemeSwitch {\n    --saltButton-minWidth: 22px;\n    --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>');\n    --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>');\n    padding: 2px;\n}\n\n.salt-density-high .vuuThemeSwitch {\n    --saltButton-minWidth: 16px;\n    --saltButton-width: 18px;\n    --vuuThemeSwitch-iconSize: 16px;\n}\n\n.vuuThemeSwitch [data-icon] {\n    --vuu-icon-size: var(--vuuThemeSwitch-iconSize,18px);\n}\n\n.vuuThemeSwitch [data-icon='light'] {\n    --vuu-icon-svg: var(--svg-light);\n}\n.vuuThemeSwitch [data-icon='dark'] {\n    --vuu-icon-svg: var(--svg-dark);\n}\n\n.vuuThemeSwitch .saltToggleButton {\n    height: 20px;\n    width: 20px;\n}\n\n";
+
+module.exports = themeSwitchCss;
+//# sourceMappingURL=ThemeSwitch.css.js.map

package/cjs/theme-switch/ThemeSwitch.css.js.map

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

package/cjs/theme-switch/ThemeSwitch.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('clsx');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var ThemeSwitch$1 = require('./ThemeSwitch.css.js');
+
+const classBase = "vuuThemeSwitch";
+const ThemeSwitch = ({
+  className: classNameProp,
+  defaultMode: defaultModeProp,
+  mode: modeProp,
+  onChange,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-theme-switch",
+    css: ThemeSwitch$1,
+    window: targetWindow
+  });
+  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/theme-switch/ThemeSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitch.js","sources":["../../../../packages/vuu-shell/src/theme-switch/ThemeSwitch.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ToggleButton, ToggleButtonGroup, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, SyntheticEvent, useCallback } from \"react\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\n\nimport themeSwitchCss from \"./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 targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-theme-switch\",\n    css: themeSwitchCss,\n    window: targetWindow,\n  });\n\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":["useWindow","useComponentCssInjection","themeSwitchCss","useControlled","useCallback","jsxs","ToggleButtonGroup","jsx","ToggleButton"],"mappings":";;;;;;;;;;AASA,MAAM,SAAY,GAAA,gBAAA;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;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,kBAAyB,CAAA;AAAA,IAC/C,UAAY,EAAA,QAAA;AAAA,IACZ,SAAS,eAAmB,IAAA,OAAA;AAAA,IAC5B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,IAC5B,CAAC,GAA2C,KAAA;AAC1C,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAA,OAAA,CAAQ,KAAkB,CAAA;AAC1B,MAAA,QAAA,CAAS,KAAkB,CAAA;AAAA,KAC7B;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,GACpB;AACA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,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;AAAA;AAAA;AAAA,GAChE;AAEJ;;;;"}

package/cjs/user-settings/SettingsForm.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var settingsFormCss = ".vuuSettingsForm {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n}\n";
+
+module.exports = settingsFormCss;
+//# sourceMappingURL=SettingsForm.css.js.map

package/cjs/user-settings/SettingsForm.css.js.map

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

package/cjs/user-settings/SettingsForm.js

@@ -0,0 +1,168 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
+var SettingsForm$1 = require('./SettingsForm.css.js');
+
+const isOption = (value) => typeof value === "object" && "label" in value && "label" in value;
+const isBooleanProperty = (property) => property.type === "boolean";
+const isStringOrNumber = (value) => typeof value === "string" || typeof value === "number";
+const getValueAndLabel = (value) => isOption(value) ? [value.value, value.label] : [value, value];
+const defaultPropertyValue = {
+  boolean: false,
+  number: 0,
+  string: ""
+};
+const classBase = "vuuSettingsForm";
+function FormControl({
+  property,
+  changeHandler,
+  selectHandler,
+  inputHandler,
+  currentValue = property.defaultValue ?? defaultPropertyValue[property.type]
+}) {
+  const [value, setValue] = React.useState(currentValue);
+  if (isBooleanProperty(property)) {
+    const checked = typeof currentValue === "boolean" ? currentValue : property.defaultValue ?? false;
+    return /* @__PURE__ */ jsxRuntime.jsx(core.Switch, { checked, onChange: changeHandler });
+  }
+  if (Array.isArray(property.values)) {
+    if (property.values.length <= 2) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.ToggleButtonGroup,
+        {
+          value: currentValue,
+          onChange: changeHandler,
+          children: property.values.map((valueOrOption) => {
+            const [value2, label] = getValueAndLabel(valueOrOption);
+            return /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: value2, children: label }, value2);
+          })
+        }
+      );
+    } else if (property.values.length > 2) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.Dropdown,
+        {
+          value: currentValue,
+          onSelectionChange: selectHandler,
+          children: property.values.map((valueOrOption) => {
+            const [value2, label] = getValueAndLabel(valueOrOption);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              core.Option,
+              {
+                value: label,
+                "data-field": property.name
+              },
+              value2
+            );
+          })
+        }
+      );
+    }
+  } else {
+    const valid = isValidInput(currentValue, property.type);
+    const errorMessage = getTooltipContent(property.type, valid);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      vuuUiControls.VuuInput,
+      {
+        errorMessage,
+        onCommit: inputHandler,
+        onChange: (e) => setValue(e.target.value),
+        value
+      },
+      property.name
+    );
+  }
+  return null;
+}
+const isValidInput = (value, type) => {
+  if (value === "") {
+    return void 0;
+  }
+  if (type === "string") {
+    return "success";
+  } else if (type === "number") {
+    if (Number.isNaN(Number(value))) {
+      return "error";
+    }
+    return "success";
+  }
+};
+function getTooltipContent(type, valid) {
+  if (valid === "error") {
+    if (type === "number") {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Field is expecting a number" });
+    } else if (type === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Field is expecting a string" });
+    } else {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Please contact Admin for more information on expected type" });
+    }
+  } else {
+    return void 0;
+  }
+}
+const SettingsForm = ({
+  className,
+  settingsSchema,
+  settings,
+  onSettingChanged,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-settings-form",
+    css: SettingsForm$1,
+    window: targetWindow
+  });
+  const changeHandler = React.useCallback(
+    (event) => {
+      const fieldName = vuuUtils.getFieldName(event.target);
+      const { checked, value } = event.target;
+      onSettingChanged(fieldName, checked ?? value);
+    },
+    [onSettingChanged]
+  );
+  const selectHandler = React.useCallback(
+    (event, [selected]) => {
+      const fieldName = vuuUtils.getFieldName(event.target);
+      onSettingChanged(fieldName, selected);
+    },
+    [onSettingChanged]
+  );
+  const inputHandler = React.useCallback(
+    (event) => {
+      const fieldName = vuuUtils.getFieldName(event.target);
+      const { value } = event.target;
+      if (!Number.isNaN(Number(value)) && value != "") {
+        const numValue = Number(value);
+        onSettingChanged(fieldName, numValue);
+      } else {
+        onSettingChanged(fieldName, value);
+      }
+    },
+    [onSettingChanged]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlAttributes, className: cx(classBase, className), children: settingsSchema.properties.map((property) => /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": property.name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: property.label }),
+    FormControl({
+      property,
+      changeHandler,
+      selectHandler,
+      inputHandler,
+      currentValue: settings[property.name]
+    })
+  ] }, property.name)) });
+};
+
+exports.FormControl = FormControl;
+exports.SettingsForm = SettingsForm;
+exports.isBooleanProperty = isBooleanProperty;
+exports.isOption = isOption;
+exports.isStringOrNumber = isStringOrNumber;
+//# sourceMappingURL=SettingsForm.js.map

package/cjs/user-settings/SettingsForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsForm.js","sources":["../../../../packages/vuu-shell/src/user-settings/SettingsForm.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { getFieldName, Settings } from \"@vuu-ui/vuu-utils\";\nimport {\n  Dropdown,\n  DropdownProps,\n  FormField,\n  FormFieldLabel,\n  Option,\n  Switch,\n  ToggleButton,\n  ToggleButtonGroup,\n  ToggleButtonGroupProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  FormEventHandler,\n  HTMLAttributes,\n  SyntheticEvent,\n  useCallback,\n  useState,\n} from \"react\";\n\nimport settingsFormCss from \"./SettingsForm.css\";\n\nexport interface SettingsSchema {\n  properties: SettingsProperty[];\n}\n\nexport type Option<T> = { label: string; value: T };\n\nexport const isOption = (\n  value: Option<number | string> | number | string,\n): value is Option<number | string> =>\n  typeof value === \"object\" && \"label\" in value && \"label\" in value;\n\nexport interface BaseProperty {\n  name: string;\n  label: string;\n}\n\nexport interface StringProperty extends BaseProperty {\n  values?: string[] | Option<string>[];\n  defaultValue?: string;\n  type: \"string\";\n}\nexport interface NumericProperty extends BaseProperty {\n  values?: number[] | Option<number>[];\n  defaultValue?: number;\n  type: \"number\";\n}\nexport interface BooleanProperty extends BaseProperty {\n  defaultValue?: boolean;\n  type: \"boolean\";\n}\n\nexport type SettingsProperty =\n  | StringProperty\n  | NumericProperty\n  | BooleanProperty;\n\nexport const isBooleanProperty = (\n  property: SettingsProperty,\n): property is BooleanProperty => property.type === \"boolean\";\n\nexport const isStringOrNumber = (value: unknown): value is string | number =>\n  typeof value === \"string\" || typeof value === \"number\";\n\nconst getValueAndLabel = (value: string | number | Option<string | number>) =>\n  isOption(value) ? [value.value, value.label] : [value, value];\n\nconst defaultPropertyValue: Record<\n  SettingsProperty[\"type\"],\n  VuuRowDataItemType\n> = {\n  boolean: false,\n  number: 0,\n  string: \"\",\n};\n\nconst classBase = \"vuuSettingsForm\";\n\n// Determine the form control type to be displayed\nexport function FormControl({\n  property,\n  changeHandler,\n  selectHandler,\n  inputHandler,\n  currentValue = property.defaultValue ?? defaultPropertyValue[property.type],\n}: {\n  property: SettingsProperty;\n  changeHandler: FormEventHandler;\n  selectHandler: DropdownProps[\"onSelectionChange\"];\n  inputHandler: FormEventHandler;\n  currentValue: VuuRowDataItemType;\n}) {\n  const [value, setValue] = useState(currentValue);\n  if (isBooleanProperty(property)) {\n    const checked =\n      typeof currentValue === \"boolean\"\n        ? currentValue\n        : (property.defaultValue ?? false);\n\n    return <Switch checked={checked} onChange={changeHandler}></Switch>;\n  }\n  // Toggle Box for 1 or 2 values\n  if (Array.isArray(property.values)) {\n    if (property.values.length <= 2) {\n      return (\n        <ToggleButtonGroup\n          value={currentValue as ToggleButtonGroupProps[\"value\"]}\n          onChange={changeHandler}\n        >\n          {property.values.map((valueOrOption) => {\n            const [value, label] = getValueAndLabel(valueOrOption);\n            return (\n              <ToggleButton key={value} value={value}>\n                {label}\n              </ToggleButton>\n            );\n          })}\n        </ToggleButtonGroup>\n      );\n    } else if (property.values.length > 2) {\n      return (\n        <Dropdown\n          value={currentValue as DropdownProps[\"value\"]}\n          onSelectionChange={selectHandler}\n        >\n          {property.values.map((valueOrOption) => {\n            const [value, label] = getValueAndLabel(valueOrOption);\n            return (\n              <Option\n                value={label}\n                key={value}\n                data-field={property.name}\n              ></Option>\n            );\n          })}\n        </Dropdown>\n      );\n    }\n  } else {\n    const valid = isValidInput(currentValue, property.type);\n    const errorMessage = getTooltipContent(property.type, valid);\n    return (\n      <VuuInput\n        errorMessage={errorMessage}\n        key={property.name}\n        onCommit={inputHandler}\n        onChange={(e) => setValue((e.target as HTMLInputElement).value)}\n        value={value as string}\n      />\n    );\n  }\n  return null;\n}\n\n//Validation logic for input boxes\nconst isValidInput = (value: unknown, type: unknown) => {\n  if (value === \"\") {\n    return undefined;\n  }\n  if (type === \"string\") {\n    return \"success\";\n  } else if (type === \"number\") {\n    if (Number.isNaN(Number(value))) {\n      return \"error\";\n    }\n    return \"success\";\n  }\n};\n\n//Function to Generate Tooltip Content\nfunction getTooltipContent(type: string, valid: string | undefined) {\n  if (valid === \"error\") {\n    if (type === \"number\") {\n      return <p>Field is expecting a number</p>;\n    } else if (type === \"string\") {\n      return <p>Field is expecting a string</p>;\n    } else {\n      return <p>Please contact Admin for more information on expected type</p>;\n    }\n  } else {\n    return undefined;\n  }\n}\n\nexport interface SettingsFormProps extends HTMLAttributes<HTMLDivElement> {\n  settingsSchema: SettingsSchema;\n  settings: Settings;\n  onSettingChanged: (\n    propertyName: string,\n    value: string | number | boolean,\n  ) => void;\n}\n\n// Generates application settings form component\nexport const SettingsForm = ({\n  className,\n  settingsSchema,\n  settings,\n  onSettingChanged,\n  ...htmlAttributes\n}: SettingsFormProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-settings-form\",\n    css: settingsFormCss,\n    window: targetWindow,\n  });\n\n  // Change Handler for toggle and switch buttons\n  const changeHandler = useCallback<FormEventHandler>(\n    (event) => {\n      const fieldName = getFieldName(event.target);\n      const { checked, value } = event.target as HTMLInputElement;\n      onSettingChanged(fieldName, checked ?? value);\n    },\n    [onSettingChanged],\n  );\n\n  // Change handler for selection form controls\n  const selectHandler = useCallback(\n    (event: SyntheticEvent, [selected]: string[]) => {\n      const fieldName = getFieldName(event.target);\n      onSettingChanged(fieldName, selected);\n    },\n    [onSettingChanged],\n  );\n\n  // Change Handler for input boxes\n  const inputHandler = useCallback<FormEventHandler>(\n    (event) => {\n      const fieldName = getFieldName(event.target);\n      const { value } = event.target as HTMLInputElement;\n      if (!Number.isNaN(Number(value)) && value != \"\") {\n        const numValue = Number(value);\n        onSettingChanged(fieldName, numValue);\n      } else {\n        onSettingChanged(fieldName, value);\n      }\n    },\n    [onSettingChanged],\n  );\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {settingsSchema.properties.map((property) => (\n        <FormField data-field={property.name} key={property.name}>\n          <FormFieldLabel>{property.label}</FormFieldLabel>\n          {FormControl({\n            property,\n            changeHandler,\n            selectHandler,\n            inputHandler,\n            currentValue: settings[property.name],\n          })}\n        </FormField>\n      ))}\n    </div>\n  );\n};\n"],"names":["useState","jsx","Switch","ToggleButtonGroup","value","ToggleButton","Dropdown","Option","VuuInput","useWindow","useComponentCssInjection","settingsFormCss","useCallback","getFieldName","FormField","FormFieldLabel"],"mappings":"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"}

package/cjs/user-settings/UserSettingsPanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var userSettingsPanelCss = ".vuuUserSettingsPanel {\n  height: 100%;\n  overflow: auto;\n}\n";
+
+module.exports = userSettingsPanelCss;
+//# sourceMappingURL=UserSettingsPanel.css.js.map

package/cjs/user-settings/UserSettingsPanel.css.js.map

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

package/cjs/user-settings/UserSettingsPanel.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var ApplicationProvider = require('../application-provider/ApplicationProvider.js');
+var SettingsForm = require('./SettingsForm.js');
+var cx = require('clsx');
+var UserSettingsPanel$1 = require('./UserSettingsPanel.css.js');
+
+const classBase = "vuuUserSettingsPanel";
+const UserSettingsPanel = ({
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-user-settings-panel",
+    css: UserSettingsPanel$1,
+    window: targetWindow
+  });
+  const {
+    onUserSettingChanged,
+    userSettings = {},
+    userSettingsSchema
+  } = ApplicationProvider.useApplicationSettings();
+  if (userSettingsSchema) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlAttributes, className: cx(classBase, "vuuScrollable"), children: /* @__PURE__ */ jsxRuntime.jsx(
+      SettingsForm.SettingsForm,
+      {
+        settings: userSettings,
+        settingsSchema: userSettingsSchema,
+        onSettingChanged: onUserSettingChanged
+      }
+    ) });
+  } else {
+    console.log("no settingsSchema provided to UserSettingsPanel");
+    return null;
+  }
+};
+
+exports.UserSettingsPanel = UserSettingsPanel;
+//# sourceMappingURL=UserSettingsPanel.js.map

package/cjs/user-settings/UserSettingsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSettingsPanel.js","sources":["../../../../packages/vuu-shell/src/user-settings/UserSettingsPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { useApplicationSettings } from \"../application-provider\";\nimport { SettingsForm } from \"./SettingsForm\";\nimport cx from \"clsx\";\n\nimport userSettingsPanelCss from \"./UserSettingsPanel.css\";\n\nexport type UserSettingsPanelProps = HTMLAttributes<HTMLDivElement>;\n\nconst classBase = \"vuuUserSettingsPanel\";\n\nexport const UserSettingsPanel = ({\n  ...htmlAttributes\n}: UserSettingsPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-user-settings-panel\",\n    css: userSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    onUserSettingChanged,\n    userSettings = {},\n    userSettingsSchema,\n  } = useApplicationSettings();\n\n  // Without a schema, we can't render a form\n  // We could render a list of input boxes but lets require a schema for now.\n  if (userSettingsSchema) {\n    return (\n      <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n        <SettingsForm\n          settings={userSettings}\n          settingsSchema={userSettingsSchema}\n          onSettingChanged={onUserSettingChanged}\n        />\n      </div>\n    );\n  } else {\n    console.log(\"no settingsSchema provided to UserSettingsPanel\");\n    return null;\n  }\n};\n"],"names":["useWindow","useComponentCssInjection","userSettingsPanelCss","useApplicationSettings","jsx","SettingsForm"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAY,GAAA,sBAAA;AAEX,MAAM,oBAAoB,CAAC;AAAA,EAChC,GAAG;AACL,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB;AAAA,MACEC,0CAAuB,EAAA;AAI3B,EAAA,IAAI,kBAAoB,EAAA;AACtB,IACE,uBAAAC,cAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,eAAe,CAC/D,EAAA,QAAA,kBAAAA,cAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,YAAA;AAAA,QACV,cAAgB,EAAA,kBAAA;AAAA,QAChB,gBAAkB,EAAA;AAAA;AAAA,KAEtB,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IAAA,OAAA,CAAQ,IAAI,iDAAiD,CAAA;AAC7D,IAAO,OAAA,IAAA;AAAA;AAEX;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var layoutListCss = ".vuuLayoutList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuuList-borderStyle: none;\n  --vuuListItem-separator-color: transparent;\n\n  background: var(\n    --vuuLayoutList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuLayoutList-padding, 0);\n\n  .vuuListItem {\n    border-bottom: none;\n    justify-content: space-between;\n  }\n}\n\n.vuuLayoutList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuLayoutList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuLayoutList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuLayoutList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuLayoutList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuLayoutList-group + .vuuLayoutList-group {\n  margin-top: 24px;\n}\n\n/* .vuuLayoutList-groupName {\n  display: flex;\n  padding-top: 24px;\n  width: var(--vuuLayoutList-width);\n  font-feature-settings: \"ss02\" on, \"ss01\" on, \"salt\" on, \"liga\" off;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 200%;\n  letter-spacing: 0.48px;\n  text-transform: uppercase;\n} */\n\n.vuuLayoutList-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #d6d7da;\n}\n\n.vuuLayoutList-layoutDetails {\n  color: var(--light-text-secondary, #606477);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
+
+module.exports = layoutListCss;
+//# sourceMappingURL=LayoutList.css.js.map

package/cjs/workspace-management/LayoutList.css.js.map

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

package/cjs/workspace-management/LayoutList.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var core = require('@salt-ds/core');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var LayoutTile = require('./LayoutTile.js');
+var WorkspaceProvider = require('./WorkspaceProvider.js');
+var FeatureAndLayoutProvider = require('../feature-and-layout-provider/FeatureAndLayoutProvider.js');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var LayoutList$1 = require('./LayoutList.css.js');
+
+const classBase = "vuuLayoutList";
+const NO_SELECTION = [];
+const LayoutList = ({
+  className,
+  title,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-layout-list",
+    css: LayoutList$1,
+    window: targetWindow
+  });
+  const { layoutMetadata, loadLayoutById } = WorkspaceProvider.useWorkspace();
+  const { systemLayouts } = FeatureAndLayoutProvider.useLayouts();
+  const handleLoadLayout = React.useCallback(
+    (layoutId) => {
+      if (layoutId) {
+        loadLayoutById(layoutId);
+      }
+    },
+    [loadLayoutById]
+  );
+  const dispatch = vuuLayout.useLayoutProviderDispatch();
+  const handleLoadSysLayout = (layoutId, layoutJSON) => {
+    if (layoutJSON) {
+      dispatch({
+        type: "add",
+        path: `#${vuuUtils.VuuShellLocation.Workspace}`,
+        component: vuuLayout.layoutFromJson(layoutJSON, "0")
+      });
+    } else {
+      throw Error("layoutJSON is required for system layouts");
+    }
+  };
+  const layoutsByGroup = layoutMetadata.reduce((acc, cur) => {
+    if (acc[cur.group]) {
+      return {
+        ...acc,
+        [cur.group]: [...acc[cur.group], cur]
+      };
+    }
+    return {
+      ...acc,
+      [cur.group]: [cur]
+    };
+  }, {});
+  let sysContent = [];
+  if (systemLayouts) {
+    sysContent = [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-group`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-groupHeader`, children: "System Layout" }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.ListBox, { selected: NO_SELECTION, children: systemLayouts.map((layout) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: layout, children: /* @__PURE__ */ React.createElement(
+          LayoutTile.LayoutTile,
+          {
+            ...htmlAttributes,
+            key: layout.id,
+            metadata: layout,
+            onLoadLayout: handleLoadSysLayout
+          }
+        ) }, layout.id)) })
+      ] }, 0)
+    ];
+  }
+  const content = React.useMemo(() => {
+    return Object.entries(layoutsByGroup).map(
+      ([heading, layoutMetadata2], index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-group`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-groupHeader`, children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.ListBox, { selected: NO_SELECTION, children: layoutMetadata2.map((layout) => /* @__PURE__ */ jsxRuntime.jsxs(core.Option, { value: layout, children: [
+          /* @__PURE__ */ React.createElement(
+            LayoutTile.LayoutTile,
+            {
+              ...htmlAttributes,
+              key: layout.id,
+              metadata: layout,
+              onLoadLayout: handleLoadLayout
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            vuuUiControls.IconButton,
+            {
+              className: `${classBase}-menu`,
+              "data-embedded": true,
+              icon: "more-vert",
+              appearance: "transparent",
+              sentiment: "neutral"
+            }
+          )
+        ] }, layout.id)) })
+      ] }, index)
+    );
+  }, [handleLoadLayout, htmlAttributes, layoutsByGroup]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuScrollable"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children: [sysContent, ...content] })
+  ] });
+};
+
+exports.LayoutList = LayoutList;
+//# sourceMappingURL=LayoutList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutList.js","sources":["../../../../packages/vuu-shell/src/workspace-management/LayoutList.tsx"],"sourcesContent":["import { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { ListBox, Option } from \"@salt-ds/core\";\nimport {\n  LayoutJSON,\n  LayoutMetadata,\n  VuuShellLocation,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, ReactElement, useCallback, useMemo } from \"react\";\nimport { LayoutTile } from \"./LayoutTile\";\nimport { useWorkspace } from \"./WorkspaceProvider\";\nimport { useLayouts } from \"../feature-and-layout-provider\";\nimport { layoutFromJson, useLayoutProviderDispatch } from \"@vuu-ui/vuu-layout\";\n\nimport layoutListCss from \"./LayoutList.css\";\n\ntype LayoutGroups = {\n  [groupName: string]: LayoutMetadata[];\n};\n\nconst classBase = \"vuuLayoutList\";\n\nconst NO_SELECTION: never[] = [];\n\nexport const LayoutList = ({\n  className,\n  title,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDivElement>) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-list\",\n    css: layoutListCss,\n    window: targetWindow,\n  });\n\n  const { layoutMetadata, loadLayoutById } = useWorkspace();\n  const { systemLayouts } = useLayouts();\n\n  const handleLoadLayout = useCallback(\n    (layoutId?: string) => {\n      if (layoutId) {\n        loadLayoutById(layoutId);\n      }\n    },\n    [loadLayoutById],\n  );\n\n  const dispatch = useLayoutProviderDispatch();\n  const handleLoadSysLayout = (layoutId?: string, layoutJSON?: LayoutJSON) => {\n    if (layoutJSON) {\n      dispatch({\n        type: \"add\",\n        path: `#${VuuShellLocation.Workspace}`,\n        component: layoutFromJson(layoutJSON, \"0\"),\n      });\n    } else {\n      throw Error(\"layoutJSON is required for system layouts\");\n    }\n  };\n\n  const layoutsByGroup = layoutMetadata.reduce((acc: LayoutGroups, cur) => {\n    if (acc[cur.group]) {\n      return {\n        ...acc,\n        [cur.group]: [...acc[cur.group], cur],\n      };\n    }\n    return {\n      ...acc,\n      [cur.group]: [cur],\n    };\n  }, {});\n\n  let sysContent: ReactElement[] = [];\n  if (systemLayouts) {\n    sysContent = [\n      <div className={`${classBase}-group`} key={0}>\n        <div className={`${classBase}-groupHeader`}>System Layout</div>\n        <ListBox selected={NO_SELECTION}>\n          {systemLayouts.map((layout) => (\n            <Option value={layout} key={layout.id}>\n              <LayoutTile\n                {...htmlAttributes}\n                key={layout.id}\n                metadata={layout}\n                onLoadLayout={handleLoadSysLayout}\n              />\n            </Option>\n          ))}\n        </ListBox>\n      </div>,\n    ];\n  }\n\n  const content = useMemo<ReactElement[]>(() => {\n    return Object.entries(layoutsByGroup).map(\n      ([heading, layoutMetadata], index) => (\n        <div className={`${classBase}-group`} key={index}>\n          <div className={`${classBase}-groupHeader`}>{heading}</div>\n          <ListBox selected={NO_SELECTION}>\n            {layoutMetadata.map((layout) => (\n              <Option value={layout} key={layout.id}>\n                <LayoutTile\n                  {...htmlAttributes}\n                  key={layout.id}\n                  metadata={layout}\n                  onLoadLayout={handleLoadLayout}\n                />\n                <IconButton\n                  className={`${classBase}-menu`}\n                  data-embedded\n                  icon=\"more-vert\"\n                  appearance=\"transparent\"\n                  sentiment=\"neutral\"\n                />\n              </Option>\n            ))}\n          </ListBox>\n        </div>\n      ),\n    );\n  }, [handleLoadLayout, htmlAttributes, layoutsByGroup]);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n      <div className={`${classBase}-header`}>{title}</div>\n      <div className={`${classBase}-content`}>{[sysContent, ...content]}</div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","layoutListCss","useWorkspace","useLayouts","useCallback","useLayoutProviderDispatch","VuuShellLocation","layoutFromJson","jsxs","jsx","ListBox","Option","createElement","LayoutTile","useMemo","layoutMetadata","IconButton"],"mappings":"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"}

package/cjs/workspace-management/LayoutTile.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var layoutTileCss = ".vuuLayoutTile-layoutTile {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 0px;\n  flex: 1 1 auto;\n  cursor: pointer;\n}\n\n.vuuLayoutTile-layoutName {\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.vuuLayoutTile-screenshot {\n  width: 60px;\n  height: 45.6px;\n  border: 1px solid #d6d7da;\n}\n\n.vuuLayoutTile-layoutDetails {\n  color: var(--salt-content-secondary-foreground);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n}\n";
+
+module.exports = layoutTileCss;
+//# sourceMappingURL=LayoutTile.css.js.map

package/cjs/workspace-management/LayoutTile.css.js.map

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

package/cjs/workspace-management/LayoutTile.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var LayoutTile$1 = require('./LayoutTile.css.js');
+
+const classBase = "vuuLayoutTile";
+const LayoutTile = ({
+  metadata,
+  onLoadLayout,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-layout-tile",
+    css: LayoutTile$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...htmlAttributes,
+      className: `${classBase}-layoutTile`,
+      key: metadata?.id,
+      onClick: () => onLoadLayout(
+        metadata?.id,
+        metadata.layoutJSON
+      )
+    },
+    /* @__PURE__ */ jsxRuntime.jsx("img", { className: `${classBase}-screenshot`, src: metadata?.screenshot }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-layoutName`, children: metadata?.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-layoutDetails`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: `${metadata?.created}` }) })
+    ] })
+  );
+};
+
+exports.LayoutTile = LayoutTile;
+//# sourceMappingURL=LayoutTile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutTile.js","sources":["../../../../packages/vuu-shell/src/workspace-management/LayoutTile.tsx"],"sourcesContent":["import {\n  LayoutJSON,\n  LayoutMetadata,\n  SystemLayoutMetadata,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\n\nimport layoutTileCss from \"./LayoutTile.css\";\n\nconst classBase = \"vuuLayoutTile\";\n\nexport interface LayoutTileProps extends HTMLAttributes<HTMLDivElement> {\n  metadata: LayoutMetadata | SystemLayoutMetadata;\n  onLoadLayout: (layoutId?: string, layoutJSON?: LayoutJSON) => void;\n}\n\nexport const LayoutTile = ({\n  metadata,\n  onLoadLayout,\n  ...htmlAttributes\n}: LayoutTileProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-tile\",\n    css: layoutTileCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={`${classBase}-layoutTile`}\n      key={metadata?.id}\n      onClick={() =>\n        onLoadLayout(\n          metadata?.id,\n          (metadata as SystemLayoutMetadata).layoutJSON,\n        )\n      }\n    >\n      <img className={`${classBase}-screenshot`} src={metadata?.screenshot} />\n      <div>\n        <div className={`${classBase}-layoutName`}>{metadata?.name}</div>\n        <div className={`${classBase}-layoutDetails`}>\n          <div>{`${metadata?.created}`}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","layoutTileCss","createElement","jsx"],"mappings":";;;;;;;;AAWA,MAAM,SAAY,GAAA,eAAA;AAOX,MAAM,aAAa,CAAC;AAAA,EACzB,QAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG;AACL,CAAuB,KAAA;AACrB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,mBAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,MACvB,KAAK,QAAU,EAAA,EAAA;AAAA,MACf,SAAS,MACP,YAAA;AAAA,QACE,QAAU,EAAA,EAAA;AAAA,QACT,QAAkC,CAAA;AAAA;AACrC,KAAA;AAAA,oBAGFC,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAe,WAAA,CAAA,EAAA,GAAA,EAAK,UAAU,UAAY,EAAA,CAAA;AAAA,oCACrE,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAAA,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,WAAA,CAAA,EAAgB,oBAAU,IAAK,EAAA,CAAA;AAAA,sBAC1DA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,cAAA,CAAA,EAC1B,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA,EAAK,QAAG,EAAA,CAAA,EAAA,QAAA,EAAU,OAAO,CAAA,CAAA,EAAG,CAC/B,EAAA;AAAA,KACF,EAAA;AAAA,GACF;AAEJ;;;;"}

package/cjs/workspace-management/SaveLayoutPanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var saveLayoutPanelCss = ".vuuSaveLayoutPanel {\n  --salt-selectable-foreground-hover: #6d18bdc3;\n  --salt-selectable-foreground-selected: #6d18bd;\n  --salt-selectable-borderColor-selected: #6d18bd;\n  --saltInputLegacy-fontSize: 12px;\n  --salt-text-label-fontSize: 10px;\n  --saltFormFieldLegacy-label-paddingLeft: 0;\n  --saltFormField-label-fontWeight: 400;\n  --saltText-color: var(--text-secondary-foreground, #606477);\n\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n\n  .saltFormField {\n    border: solid 1px var(--salt-editable-borderColor);\n    padding: var(--salt-spacing-50) var(--salt-spacing-200);\n  }\n\n  .saltComboBox {\n    .saltPillInput-endAdornmentContainer {\n      .saltButton {\n        border: none;\n        width: 18px;\n        transform: rotate(90deg);\n      }\n      .saltButton:after {\n        content: \"\";\n        background-color: var(--salt-content-secondary-foreground);\n        left: auto;\n        height: 20px;\n        mask: var(--vuu-svg-triangle-right) center center/20px 20px;\n        mask-repeat: no-repeat;\n        position: absolute;\n        top: var(--vuu-icon-top, auto);\n        transform: var(--vuu-icon-transform, none);\n        width: 20px;\n      }\n    }\n    .saltPillInput-activationIndicator {\n      display: none;\n    }\n  }\n}\n\n.spinner {\n  width: 100px;\n  height: 100px;\n  background-image: var(--svg-spinner);\n}\n\n.vuuSaveLayoutPanel-panelContent {\n  display: grid;\n  gap: 32px;\n  margin-top: var(--salt-spacing-200);\n}\n\n.vuuSaveLayoutPanel-inputText {\n  border: none;\n  color: var(--light-text-primary, #15171b);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  padding-left: 4px;\n  width: 100%;\n  outline: none;\n}\n\n.vuuSaveLayoutPanel-settingsGroup {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  gap: 10px;\n  width: 100%;\n  line-height: 16px;\n}\n\n.vuuSaveLayoutPanel-screenshotContainer {\n  display: flex;\n  width: 304px;\n  height: 208px;\n  padding: 11px 15.5px;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid #e8e8e8;\n  background: var(--dark-text-primary, #fff);\n}\n\n.vuuSaveLayoutPanel-screenshot {\n  background: lightgray 50% / cover no-repeat;\n  width: 273px;\n  height: 186px;\n}\n\n.vuuSaveLayoutPanel-buttonsContainer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-start;\n  align-self: stretch;\n  padding-top: 24px;\n  gap: 8px;\n}\n\n.vuuSaveLayoutPanel-cancelButton,\n.vuuSaveLayoutPanel-saveButton {\n  display: flex;\n  height: fit-content;\n  padding: 4px 8px;\n  align-items: flex-start;\n  gap: 8px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 133.333%;\n  letter-spacing: 0.48px;\n  text-transform: uppercase;\n}\n";
+
+module.exports = saveLayoutPanelCss;
+//# sourceMappingURL=SaveLayoutPanel.css.js.map

package/cjs/workspace-management/SaveLayoutPanel.css.js.map

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