@vuu-ui/vuu-shell 0.8.42 → 0.8.44

package/esm/session-editing-form/SessionEditingForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionEditingForm.js","sources":["../../src/session-editing-form/SessionEditingForm.tsx"],"sourcesContent":["import { VuuDataSource } from \"@vuu-ui/vuu-data-remote\";\nimport { DataSource, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport {\n  VuuColumnDataType,\n  VuuDataRow,\n  VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  buildColumnMap,\n  hasAction,\n  isErrorResponse,\n  isValidNumber,\n  shallowEquals,\n} from \"@vuu-ui/vuu-utils\";\nimport { Button, useIdMemo } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport sessionEditingFormCss from \"./SessionEditingForm.css\";\n\nexport type FormFieldDescriptor = {\n  isKeyField?: boolean;\n  label?: string;\n  name: string;\n  type: VuuColumnDataType;\n  description: string;\n  readonly?: boolean;\n  required?: boolean;\n};\n\nexport type FormConfig = {\n  title: string;\n  key: string;\n  fields: FormFieldDescriptor[];\n};\n\nexport interface SessionEditingFormProps\n  extends HTMLAttributes<HTMLDivElement> {\n  config: FormConfig;\n  onClose: () => void;\n  dataSource?: DataSource;\n  schema?: TableSchema;\n}\n\nconst classBase = \"vuuSessionEditingForm\";\n\nconst getField = (\n  fields: FormFieldDescriptor[],\n  name: string\n): FormFieldDescriptor => {\n  const field = fields.find((f) => f.name === name);\n  if (field) {\n    return field;\n  } else {\n    throw Error(`SessionEditingForm, no field '${name}' found`);\n  }\n};\n\nconst getFieldNameAndValue = (\n  evt: ChangeEvent | FocusEvent\n): [string, string] => {\n  const {\n    dataset: { field },\n    value,\n  } = evt.target as HTMLInputElement;\n  if (field === undefined) {\n    throw Error(\"SessionEditingForm, form field has no field name\");\n  }\n  return [field, value];\n};\n\nconst Status = {\n  uninitialised: 0,\n  unchanged: 1,\n  changed: 2,\n  invalid: 3,\n};\n\nfunction getTypedValue(\n  value: string,\n  type: VuuColumnDataType,\n  throwIfUndefined?: false\n): VuuRowDataItemType | undefined;\nfunction getTypedValue(\n  value: string,\n  type: VuuColumnDataType,\n  throwIfUndefined: true\n): VuuRowDataItemType;\nfunction getTypedValue(\n  value: string,\n  type: VuuColumnDataType,\n  throwIfUndefined = false\n): VuuRowDataItemType | undefined {\n  switch (type) {\n    case \"int\":\n    case \"long\": {\n      const typedValue = parseInt(value, 10);\n      if (isValidNumber(typedValue)) {\n        return typedValue;\n      } else if (throwIfUndefined) {\n        throw Error(\"SessionEditingForm getTypedValue\");\n      } else {\n        return undefined;\n      }\n    }\n\n    case \"double\": {\n      const typedValue = parseFloat(value);\n      if (isValidNumber(typedValue)) {\n        return typedValue;\n      }\n      return undefined;\n    }\n\n    case \"boolean\":\n      return value === \"true\" ? true : false;\n    default:\n      return value;\n  }\n}\n\nconst getDataSource = (\n  dataSource?: DataSource,\n  schema?: TableSchema\n): DataSource => {\n  if (dataSource) {\n    return dataSource;\n  } else if (schema) {\n    return new VuuDataSource({\n      bufferSize: 0,\n      table: schema.table,\n      columns: schema.columns.map((col) => col.name),\n    }) as DataSource;\n  } else {\n    throw Error(\n      \"SessionEditingForm: either a DataSource or a TableSchema must be provided\"\n    );\n  }\n};\n\ntype FormValues = { [key: string]: VuuRowDataItemType | undefined };\n\nexport const SessionEditingForm = ({\n  className,\n  config: { fields, key: keyField },\n  dataSource: dataSourceProp,\n  id: idProp,\n  onClose,\n  schema,\n  ...htmlAttributes\n}: SessionEditingFormProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-session-editing-form\",\n    css: sessionEditingFormCss,\n    window: targetWindow,\n  });\n\n  const [values, setValues] = useState<FormValues>();\n  const [errorMessage, setErrorMessage] = useState(\"\");\n  const formContentRef = useRef<HTMLDivElement>(null);\n  const initialDataRef = useRef<FormValues>();\n  const dataStatusRef = useRef(Status.uninitialised);\n\n  const dataSource = useMemo(() => {\n    const applyServerData = (data: VuuDataRow) => {\n      if (columnMap) {\n        const values: { [key: string]: VuuRowDataItemType } = {};\n        for (const column of dataSource.columns) {\n          values[column] = data[columnMap[column]];\n        }\n        if (dataStatusRef.current === Status.uninitialised) {\n          dataStatusRef.current = Status.unchanged;\n          initialDataRef.current = values;\n        }\n        setValues(values);\n      }\n    };\n\n    const ds = getDataSource(dataSourceProp, schema);\n    const columnMap = buildColumnMap(ds.columns);\n    ds.subscribe({ range: { from: 0, to: 5 } }, (message) => {\n      if (message.type === \"viewport-update\" && message.rows) {\n        if (dataStatusRef.current === Status.uninitialised) {\n          applyServerData(message.rows[0]);\n        } else {\n          console.log(\"what do we do with server updates\");\n        }\n      }\n    });\n    return ds;\n  }, [dataSourceProp, schema]);\n\n  const id = useIdMemo(idProp);\n\n  const handleChange = useCallback(\n    (evt) => {\n      const [field, value] = getFieldNameAndValue(evt);\n      const { type } = getField(fields, field);\n      const typedValue = getTypedValue(value, type);\n      setValues((values = {}) => {\n        const newValues = {\n          ...values,\n          [field]: typedValue,\n        };\n        const notUpdated = shallowEquals(newValues, initialDataRef.current);\n        dataStatusRef.current = notUpdated\n          ? Status.unchanged\n          : typedValue !== undefined\n          ? Status.changed\n          : Status.invalid;\n        return newValues;\n      });\n    },\n    [fields]\n  );\n\n  const handleBlur = useCallback(\n    (evt: FocusEvent) => {\n      const [field, value] = getFieldNameAndValue(evt);\n      const { type } = getField(fields, field);\n      const rowKey = values?.[keyField];\n      const typedValue = getTypedValue(value, type, true);\n      if (typeof rowKey === \"string\") {\n        dataSource.menuRpcCall({\n          rowKey,\n          field: field,\n          value: typedValue,\n          type: \"VP_EDIT_CELL_RPC\",\n        });\n      }\n    },\n    [dataSource, fields, keyField, values]\n  );\n\n  const applyAction = useCallback(\n    (action: unknown) => {\n      if (typeof action === \"object\" && action !== null) {\n        if (\"type\" in action && action.type === \"CLOSE_DIALOG_ACTION\") {\n          onClose();\n        }\n      }\n    },\n    [onClose]\n  );\n\n  const handleSubmit = useCallback(async () => {\n    const response = await dataSource.menuRpcCall({\n      type: \"VP_EDIT_SUBMIT_FORM_RPC\",\n    });\n    if (isErrorResponse(response)) {\n      setErrorMessage(response.error);\n    } else if (hasAction(response)) {\n      applyAction(response.action);\n    }\n  }, [applyAction, dataSource]);\n\n  const handleKeyDown = useCallback(\n    (evt) => {\n      if (evt.key === \"Enter\" && dataStatusRef.current === Status.changed) {\n        handleSubmit();\n      }\n    },\n    [handleSubmit]\n  );\n\n  const handleCancel = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const getFormControl = (field: FormFieldDescriptor) => {\n    const value = String(values?.[field.name] ?? \"\");\n    if (field.readonly || field.name === keyField) {\n      return (\n        <div className={`${classBase}-fieldValue vuuReadOnly`}>{value}</div>\n      );\n    } else {\n      return (\n        <input\n          className={`${classBase}-fieldValue`}\n          data-field={field.name}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          type=\"text\"\n          value={value}\n          id={`${id}-input-${field.name}`}\n        />\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (formContentRef.current) {\n      const firstInput = formContentRef.current.querySelector(\n        \"input\"\n      ) as HTMLInputElement;\n      if (firstInput) {\n        setTimeout(() => {\n          firstInput.focus();\n          firstInput.select();\n        }, 100);\n      }\n    }\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (dataSource) {\n        dataSource.unsubscribe();\n      }\n    };\n  }, [dataSource]);\n\n  const isDirty = dataStatusRef.current === Status.changed;\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {errorMessage ? (\n        <div\n          className={`${classBase}-errorBanner`}\n          data-icon=\"error\"\n          title={errorMessage}\n        >\n          Error, edit(s) not saved\n        </div>\n      ) : undefined}\n      <div\n        className={`${classBase}-content`}\n        ref={formContentRef}\n        onKeyDown={handleKeyDown}\n      >\n        {fields.map((field) => (\n          <div className={`${classBase}-field`} key={field.name}>\n            <label\n              className={cx(`${classBase}-fieldLabel`, {\n                [`${classBase}-required`]: field.required,\n              })}\n              htmlFor={`${id}-input-${field.name}`}\n            >\n              {field?.label ?? field.description}\n            </label>\n            {getFormControl(field)}\n          </div>\n        ))}\n      </div>\n      <div className={`${classBase}-buttonbar salt-theme salt-density-high`}>\n        <Button\n          type=\"submit\"\n          variant=\"cta\"\n          disabled={!isDirty}\n          onClick={handleSubmit}\n        >\n          Submit\n        </Button>\n        <Button variant=\"secondary\" onClick={handleCancel}>\n          Cancel\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["values"],"mappings":"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"}

package/esm/shell-layouts/context-panel/ContextPanel.css.js

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

package/esm/shell-layouts/context-panel/ContextPanel.css.js.map

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

package/esm/{packages/vuu-shell/src/shell-layouts → shell-layouts}/context-panel/ContextPanel.js

@@ -1,8 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { useCallback, useMemo } from 'react';
 import { useLayoutProviderDispatch, layoutFromJson, View } from '@vuu-ui/vuu-layout';
+import contextPanelCss from './ContextPanel.css.js';
 
 const classBase = "vuuContextPanel";
 const ContextPanel = ({
@@ -12,6 +15,12 @@ const ContextPanel = ({
   overlay = false,
   title
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-context-panel",
+    css: contextPanelCss,
+    window: targetWindow
+  });
   const dispatchLayoutAction = useLayoutProviderDispatch();
   const handleClose = useCallback(() => {
     dispatchLayoutAction({

package/esm/shell-layouts/context-panel/ContextPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextPanel.js","sources":["../../../src/shell-layouts/context-panel/ContextPanel.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useCallback, useMemo } from \"react\";\nimport {\n  layoutFromJson,\n  LayoutJSON,\n  View,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\n\nimport contextPanelCss from \"./ContextPanel.css\";\n\nconst classBase = \"vuuContextPanel\";\n\nexport interface ContextPanelProps {\n  [key: string]: unknown;\n  className?: string;\n  content?: LayoutJSON;\n  expanded?: boolean;\n  overlay?: boolean;\n}\n\nexport const ContextPanel = ({\n  className: classNameProp,\n  expanded = false,\n  content: contentProp,\n  overlay = false,\n  title,\n}: ContextPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-context-panel\",\n    css: contextPanelCss,\n    window: targetWindow,\n  });\n\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  // const [contentJson, setContentJson] = useState(contentProp);\n  const handleClose = useCallback(() => {\n    dispatchLayoutAction({\n      path: \"#context-panel\",\n      propName: \"expanded\",\n      propValue: false,\n      type: \"set-prop\",\n    });\n  }, [dispatchLayoutAction]);\n  // TODO look up content using context\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-expanded`]: expanded,\n    [`${classBase}-inline`]: overlay !== true,\n    [`${classBase}-overlay`]: overlay,\n  });\n\n  const content = useMemo(\n    () =>\n      contentProp && expanded ? layoutFromJson(contentProp, \"context-0\") : null,\n    [contentProp, expanded]\n  );\n\n  return (\n    <div\n      className={cx(classBase, className, {\n        [`${classBase}-expanded`]: expanded,\n      })}\n    >\n      <View className={`${classBase}-inner`} header={false} id=\"context-panel\">\n        <div className={`${classBase}-header`}>\n          <h2 className={`${classBase}-title`}>{title}</h2>\n          <Button\n            className={`${classBase}-close`}\n            data-icon=\"close\"\n            onClick={handleClose}\n            variant=\"secondary\"\n          />\n        </div>\n        <div className={`${classBase}-content`}>{content}</div>\n      </View>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAcA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAUX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAW,EAAA,aAAA;AAAA,EACX,QAAW,GAAA,KAAA;AAAA,EACX,OAAS,EAAA,WAAA;AAAA,EACT,OAAU,GAAA,KAAA;AAAA,EACV,KAAA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,uBAAuB,yBAA0B,EAAA,CAAA;AAEvD,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAqB,oBAAA,CAAA;AAAA,MACnB,IAAM,EAAA,gBAAA;AAAA,MACN,QAAU,EAAA,UAAA;AAAA,MACV,SAAW,EAAA,KAAA;AAAA,MACX,IAAM,EAAA,UAAA;AAAA,KACP,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,oBAAoB,CAAC,CAAA,CAAA;AAGzB,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,IAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,OAAY,KAAA,IAAA;AAAA,IACrC,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,OAAA;AAAA,GAC3B,CAAA,CAAA;AAED,EAAA,MAAM,OAAU,GAAA,OAAA;AAAA,IACd,MACE,WAAe,IAAA,QAAA,GAAW,cAAe,CAAA,WAAA,EAAa,WAAW,CAAI,GAAA,IAAA;AAAA,IACvE,CAAC,aAAa,QAAQ,CAAA;AAAA,GACxB,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,OAC5B,CAAA;AAAA,MAED,QAAA,kBAAA,IAAA,CAAC,QAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAU,MAAA,CAAA,EAAA,MAAA,EAAQ,KAAO,EAAA,EAAA,EAAG,eACvD,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,OAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,0BAC5C,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,cACvB,WAAU,EAAA,OAAA;AAAA,cACV,OAAS,EAAA,WAAA;AAAA,cACT,OAAQ,EAAA,WAAA;AAAA,aAAA;AAAA,WACV;AAAA,SACF,EAAA,CAAA;AAAA,4BACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,OACnD,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/esm/shell-layouts/side-panel/SidePanel.css.js

@@ -0,0 +1,4 @@
+var sidePanelCss = ".vuuShellSidePanel {\n    transition: width .2s ease-out;\n    width: var(--shell-left-nav-size);\n}";
+
+export { sidePanelCss as default };
+//# sourceMappingURL=SidePanel.css.js.map

package/esm/shell-layouts/side-panel/SidePanel.css.js.map

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

package/esm/{packages/vuu-shell/src/shell-layouts → shell-layouts}/side-panel/SidePanel.js

@@ -1,6 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import sidePanelCss from './SidePanel.css.js';
 
 const classBase = "vuuShellSidePanel";
 const SidePanel = ({
@@ -11,6 +14,12 @@ const SidePanel = ({
   style: styleProp,
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-side-panel",
+    css: sidePanelCss,
+    window: targetWindow
+  });
   const style = useMemo(
     () => ({
       ...styleProp,

package/esm/shell-layouts/side-panel/SidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","sources":["../../../src/shell-layouts/side-panel/SidePanel.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, useMemo } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport sidePanelCss from \"./SidePanel.css\";\n// import { useLayoutManager } from \"../../layout-management\";\n\nconst classBase = \"vuuShellSidePanel\";\n\nexport interface SidePanelProps extends HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  path?: string;\n  sizeOpen?: number;\n  sizeClosed?: number;\n}\n\nexport const SidePanel = ({\n  children,\n  open = true,\n  sizeClosed = 90,\n  sizeOpen = 200,\n  style: styleProp,\n  ...htmlAttributes\n}: SidePanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-side-panel\",\n    css: sidePanelCss,\n    window: targetWindow,\n  });\n\n  //   const { applicationJson, saveApplicationSettings } = useLayoutManager();\n  //   console.log(`settings`, {\n  //     expanded: applicationJson?.settings?.leftNav?.expanded,\n  //     active: applicationJson?.settings?.leftNav?.activeTabIndex,\n  //   });\n\n  const style = useMemo(\n    () =>\n      ({\n        ...styleProp,\n        \"--shell-left-nav-size\": open ? `${sizeOpen}px` : `${sizeClosed}px`,\n      } as CSSProperties),\n    [open, sizeClosed, sizeOpen, styleProp]\n  );\n  return (\n    <div {...htmlAttributes} className={cx(classBase)} style={style}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,SAAY,GAAA,mBAAA,CAAA;AASX,MAAM,YAAY,CAAC;AAAA,EACxB,QAAA;AAAA,EACA,IAAO,GAAA,IAAA;AAAA,EACP,UAAa,GAAA,EAAA;AAAA,EACb,QAAW,GAAA,GAAA;AAAA,EACX,KAAO,EAAA,SAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAQD,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,OACG;AAAA,MACC,GAAG,SAAA;AAAA,MACH,yBAAyB,IAAO,GAAA,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAA,GAAO,GAAG,UAAU,CAAA,EAAA,CAAA;AAAA,KACjE,CAAA;AAAA,IACF,CAAC,IAAA,EAAM,UAAY,EAAA,QAAA,EAAU,SAAS,CAAA;AAAA,GACxC,CAAA;AACA,EACE,uBAAA,GAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAS,CAAG,EAAA,KAAA,EAChD,QACH,EAAA,CAAA,CAAA;AAEJ;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useInlayLeftPanel.js","sources":["../../src/shell-layouts/useInlayLeftPanel.tsx"],"sourcesContent":["import {\n  DockLayout,\n  DraggableLayout,\n  Drawer,\n  Flexbox,\n  View,\n} from \"@vuu-ui/vuu-layout\";\n\nimport { MouseEvent, ReactElement, useCallback, useRef, useState } from \"react\";\nimport { ShellLayoutProps } from \"./useShellLayout\";\n\nexport const useInlayLeftPanel = ({\n  appHeader,\n  LeftSidePanelProps,\n}: ShellLayoutProps): ReactElement => {\n  const paletteView = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(true);\n\n  const handleDrawerClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const target = e.target as HTMLElement;\n      if (!paletteView.current?.contains(target)) {\n        setOpen(!open);\n      }\n    },\n    [open]\n  );\n\n  const getDrawers = useCallback(\n    (leftSidePanel) => {\n      const drawers: ReactElement[] = [];\n      drawers.push(\n        <Drawer\n          key=\"left-panel\"\n          onClick={handleDrawerClick}\n          open={open}\n          position=\"left\"\n          inline\n          peekaboo\n          sizeOpen={200}\n          toggleButton=\"end\"\n        >\n          <View\n            className=\"vuuShell-palette\"\n            id=\"vw-app-palette\"\n            key=\"app-palette\"\n            ref={paletteView}\n            style={{ height: \"100%\" }}\n          >\n            {leftSidePanel}\n          </View>\n        </Drawer>\n      );\n\n      return drawers;\n    },\n    [handleDrawerClick, open]\n  );\n\n  return (\n    <Flexbox\n      className=\"App\"\n      style={{ flexDirection: \"column\", height: \"100%\", width: \"100%\" }}\n    >\n      {appHeader}\n      <DockLayout style={{ flex: 1 }}>\n        {getDrawers(LeftSidePanelProps?.children).concat(\n          <DraggableLayout\n            dropTarget\n            key=\"main-content\"\n            style={{ width: \"100%\", height: \"100%\" }}\n          />\n        )}\n      </DockLayout>\n    </Flexbox>\n  );\n};\n"],"names":[],"mappings":";;;;AAWO,MAAM,oBAAoB,CAAC;AAAA,EAChC,SAAA;AAAA,EACA,kBAAA;AACF,CAAsC,KAAA;AACpC,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAErC,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,CAA+B,KAAA;AAC9B,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,MAAA,IAAI,CAAC,WAAA,CAAY,OAAS,EAAA,QAAA,CAAS,MAAM,CAAG,EAAA;AAC1C,QAAA,OAAA,CAAQ,CAAC,IAAI,CAAA,CAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,aAAkB,KAAA;AACjB,MAAA,MAAM,UAA0B,EAAC,CAAA;AACjC,MAAQ,OAAA,CAAA,IAAA;AAAA,wBACN,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,OAAS,EAAA,iBAAA;AAAA,YACT,IAAA;AAAA,YACA,QAAS,EAAA,MAAA;AAAA,YACT,MAAM,EAAA,IAAA;AAAA,YACN,QAAQ,EAAA,IAAA;AAAA,YACR,QAAU,EAAA,GAAA;AAAA,YACV,YAAa,EAAA,KAAA;AAAA,YAEb,QAAA,kBAAA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,SAAU,EAAA,kBAAA;AAAA,gBACV,EAAG,EAAA,gBAAA;AAAA,gBAEH,GAAK,EAAA,WAAA;AAAA,gBACL,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAO,EAAA;AAAA,gBAEvB,QAAA,EAAA,aAAA;AAAA,eAAA;AAAA,cAJG,aAAA;AAAA,aAKN;AAAA,WAAA;AAAA,UAjBI,YAAA;AAAA,SAkBN;AAAA,OACF,CAAA;AAEA,MAAO,OAAA,OAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,mBAAmB,IAAI,CAAA;AAAA,GAC1B,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,OAAO,EAAE,aAAA,EAAe,UAAU,MAAQ,EAAA,MAAA,EAAQ,OAAO,MAAO,EAAA;AAAA,MAE/D,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,wBACD,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,IAAA,EAAM,GACxB,EAAA,QAAA,EAAA,UAAA,CAAW,kBAAoB,EAAA,QAAQ,CAAE,CAAA,MAAA;AAAA,0BACxC,GAAA;AAAA,YAAC,eAAA;AAAA,YAAA;AAAA,cACC,UAAU,EAAA,IAAA;AAAA,cAEV,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,aAAA;AAAA,YADnC,cAAA;AAAA,WAEN;AAAA,SAEJ,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"useShellLayout.js","sources":["../../src/shell-layouts/useShellLayout.ts"],"sourcesContent":["import { ReactElement } from \"react\";\nimport { ShellProps } from \"../shell\";\nimport { useFullHeightLeftPanel } from \"./useFullHeightLeftPanel\";\nimport { useInlayLeftPanel } from \"./useInlayLeftPanel\";\n\nexport type ShellLayoutType = \"full-height\" | \"inlay\";\nexport interface ShellLayoutProps {\n  LeftSidePanelProps: ShellProps[\"LeftSidePanelProps\"];\n  appHeader: ReactElement;\n}\n\nexport const useShellLayout = ({\n  leftSidePanelLayout = \"inlay\",\n  ...props\n}:\n  | ShellLayoutProps & {\n      leftSidePanelLayout?: \"full-height\" | \"inlay\";\n    }) => {\n  const useLayoutHook =\n    leftSidePanelLayout === \"inlay\"\n      ? useInlayLeftPanel\n      : useFullHeightLeftPanel;\n\n  return useLayoutHook(props);\n};\n"],"names":[],"mappings":";;;AAWO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,mBAAsB,GAAA,OAAA;AAAA,EACtB,GAAG,KAAA;AACL,CAGU,KAAA;AACR,EAAM,MAAA,aAAA,GACJ,mBAAwB,KAAA,OAAA,GACpB,iBACA,GAAA,sBAAA,CAAA;AAEN,EAAA,OAAO,cAAc,KAAK,CAAA,CAAA;AAC5B;;;;"}

package/esm/{packages/vuu-shell/src/shell.js → shell.js}

@@ -1,5 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { connectToServer } from '@vuu-ui/vuu-data-remote';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { StackLayout, LayoutProvider, DraggableLayout } from '@vuu-ui/vuu-layout';
 import { useDialog, ContextMenuProvider } from '@vuu-ui/vuu-popups';
 import { logger } from '@vuu-ui/vuu-utils';
@@ -16,8 +18,6 @@ import './persistence-management/LocalPersistenceManager.js';
 import './persistence-management/RemotePersistenceManager.js';
 import { useShellLayout } from './shell-layouts/useShellLayout.js';
 import shellCss from './shell.css.js';
-import { useWindow } from '../../../node_modules/@salt-ds/window/dist-es/WindowProvider.js';
-import { useComponentCssInjection } from '../../../node_modules/@salt-ds/styles/dist-es/use-style-injection/useStyleInjection.js';
 
 if (typeof StackLayout !== "function") {
   console.warn(

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

package/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.js

@@ -0,0 +1,4 @@
+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";
+
+export { themeSwitchCss as default };
+//# sourceMappingURL=ThemeSwitch.css.js.map

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

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

package/esm/{packages/vuu-shell/src/theme-switch → theme-switch}/ThemeSwitch.js

@@ -1,7 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'clsx';
 import { useControlled, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { useCallback } from 'react';
+import themeSwitchCss from './ThemeSwitch.css.js';
 
 const classBase = "vuuThemeSwitch";
 const ThemeSwitch = ({
@@ -11,6 +14,12 @@ const ThemeSwitch = ({
   onChange,
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-theme-switch",
+    css: themeSwitchCss,
+    window: targetWindow
+  });
   const [mode, setMode] = useControlled({
     controlled: modeProp,
     default: defaultModeProp ?? "light",

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 { 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":[],"mappings":";;;;;;;;AASA,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,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,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,22 +1,24 @@
 {
-  "version": "0.8.42",
+  "version": "0.8.44",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.42",
-    "@vuu-ui/vuu-protocol-types": "0.8.42",
-    "@vuu-ui/vuu-table-types": "0.8.42"
+    "@vuu-ui/vuu-data-types": "0.8.44",
+    "@vuu-ui/vuu-protocol-types": "0.8.44",
+    "@vuu-ui/vuu-table-types": "0.8.44"
   },
   "dependencies": {
     "@salt-ds/core": "1.17.0",
-    "@vuu-ui/vuu-data-remote": "0.8.42",
-    "@vuu-ui/vuu-icons": "0.8.42",
-    "@vuu-ui/vuu-layout": "0.8.42",
-    "@vuu-ui/vuu-popups": "0.8.42",
-    "@vuu-ui/vuu-table": "0.8.42",
-    "@vuu-ui/vuu-ui-controls": "0.8.42",
-    "@vuu-ui/vuu-utils": "0.8.42",
+    "@salt-ds/styles": "0.2.1",
+    "@salt-ds/window": "0.1.1",
+    "@vuu-ui/vuu-data-remote": "0.8.44",
+    "@vuu-ui/vuu-icons": "0.8.44",
+    "@vuu-ui/vuu-layout": "0.8.44",
+    "@vuu-ui/vuu-popups": "0.8.44",
+    "@vuu-ui/vuu-table": "0.8.44",
+    "@vuu-ui/vuu-ui-controls": "0.8.44",
+    "@vuu-ui/vuu-utils": "0.8.44",
     "html-to-image": "^1.11.11"
   },
   "peerDependencies": {
@@ -31,8 +33,13 @@
     "cjs",
     "/types"
   ],
+  "exports": {
+    "require": "./cjs/index.js",
+    "import": "./esm/index.js"
+  },
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "name": "@vuu-ui/vuu-shell",
+  "type": "module",
   "types": "types/index.d.ts"
 }

package/types/connection-status/{ConnectionStatusIcon.d.ts → ConnectionStatusIndicator.d.ts}

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import "./ConnectionStatusIcon.css";
 type connectionStatus = "connected" | "reconnected" | "connecting" | "disconnected";
 interface ConnectionStatusProps {
     connectionStatus: connectionStatus;
@@ -7,5 +6,5 @@ interface ConnectionStatusProps {
     props?: unknown;
     element?: string;
 }
-export declare const ConnectionStatusIcon: ({ connectionStatus, className, element, ...props }: ConnectionStatusProps) => JSX.Element;
+export declare const ConnectionStatusIndicator: ({ connectionStatus, className, element, ...props }: ConnectionStatusProps) => JSX.Element;
 export {};

package/types/connection-status/index.d.ts

@@ -1 +1 @@
-export * from "./ConnectionStatusIcon";
+export * from "./ConnectionStatusIndicator";

package/types/layout-management/LayoutList.d.ts

@@ -1,3 +1,2 @@
 import { HTMLAttributes } from "react";
-import "./LayoutList.css";
 export declare const LayoutList: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/types/layout-management/LayoutTile.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { LayoutMetadata } from "./layoutTypes";
-import "./LayoutTile.css";
 type LayoutTileProps = {
     metadata: LayoutMetadata;
     handleLoadLayout: (layoutId?: string) => void;

package/types/layout-management/SaveLayoutPanel.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { LayoutMetadataDto } from "./layoutTypes";
-import "./SaveLayoutPanel.css";
 type SaveLayoutPanelProps = {
     componentId?: string;
     defaultTitle?: string;

package/types/left-nav/LeftNav.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from "react";
 import { FeatureProps } from "../feature";
-import "./LeftNav.css";
 export type NavDisplayStatus = "menu-full" | "menu-icons" | "menu-full-content" | "menu-icons-content";
 export type NavDisplayStatusHandler = (navDisplayStatus: NavDisplayStatus) => void;
 export interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {

package/types/login/LoginPanel.d.ts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-import "./LoginPanel.css";
 export interface LoginPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSubmit"> {
     appName?: string;
     onSubmit: (username: string, password?: string) => void;

package/types/session-editing-form/SessionEditingForm.d.ts

@@ -1,7 +1,6 @@
 import { DataSource, TableSchema } from "@vuu-ui/vuu-data-types";
 import { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
 import { HTMLAttributes } from "react";
-import "./SessionEditingForm.css";
 export type FormFieldDescriptor = {
     isKeyField?: boolean;
     label?: string;

package/types/shell-layouts/context-panel/ContextPanel.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { LayoutJSON } from "@vuu-ui/vuu-layout";
-import "./ContextPanel.css";
 export interface ContextPanelProps {
     [key: string]: unknown;
     className?: string;

package/types/shell-layouts/side-panel/SidePanel.d.ts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-import "./SidePanel.css";
 export interface SidePanelProps extends HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     path?: string;

package/types/theme-switch/ThemeSwitch.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from "react";
 import { ThemeMode } from "@vuu-ui/vuu-utils";
-import "./ThemeSwitch.css";
 export interface ThemeSwitchProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     defaultMode?: ThemeMode;
     mode?: ThemeMode;

package/cjs/connection-status/ConnectionStatusIcon.css

@@ -1,68 +0,0 @@
-.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/cjs/layout-management/LayoutList.css

@@ -1,86 +0,0 @@
-.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/cjs/layout-management/LayoutTile.css

@@ -1,28 +0,0 @@
-.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%;
-}