@vuu-ui/vuu-table-extras 0.13.6 → 0.13.8

package/cjs/index.js

@@ -1,68 +1,4257 @@
 'use strict';
 
-var CaseValidator = require('./cell-edit-validators/CaseValidator.js');
-var PatternValidator = require('./cell-edit-validators/PatternValidator.js');
-var BackgroundCell = require('./cell-renderers/background-cell/BackgroundCell.js');
-var BackgroundCellConfigurationEditor = require('./cell-renderers/background-cell/BackgroundCellConfigurationEditor.js');
-var DropdownCell = require('./cell-renderers/dropdown-cell/DropdownCell.js');
-var LookupCell = require('./cell-renderers/lookup-cell/LookupCell.js');
-var PctProgressCell = require('./cell-renderers/pct-progress-cell/PctProgressCell.js');
-require('./cell-renderers/progress-cell/ProgressCell.js');
-var ColumnList = require('./column-list/ColumnList.js');
-var ColumnMenu = require('./column-menu/ColumnMenu.js');
-var useColumnActions = require('./column-menu/useColumnActions.js');
-var ColumnSettingsPanel = require('./table-column-settings/ColumnSettingsPanel.js');
-var useColumnSettings = require('./table-column-settings/useColumnSettings.js');
-var TableSettingsPanel = require('./table-column-settings/TableSettingsPanel.js');
-var useTableSettings = require('./table-column-settings/useTableSettings.js');
-var useTableAndColumnSettings = require('./table-column-settings/useTableAndColumnSettings.js');
-var ColumnExpressionInput = require('./column-expression-input/ColumnExpressionInput.js');
-var ColumnExpressionLanguage = require('./column-expression-input/column-language-parser/ColumnExpressionLanguage.js');
-var ColumnExpressionTreeWalker = require('./column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js');
-var columnExpressionParseUtils = require('./column-expression-input/column-language-parser/column-expression-parse-utils.js');
-var useColumnExpressionEditor = require('./column-expression-input/useColumnExpressionEditor.js');
-var useColumnExpressionSuggestionProvider = require('./column-expression-input/useColumnExpressionSuggestionProvider.js');
-var ColumnExpressionPanel = require('./column-expression-panel/ColumnExpressionPanel.js');
-var ColumnFormattingPanel = require('./column-formatting-settings/ColumnFormattingPanel.js');
-var BaseNumericFormattingSettings = require('./column-formatting-settings/BaseNumericFormattingSettings.js');
-var DateTimeFormattingSettings = require('./column-formatting-settings/DateTimeFormattingSettings.js');
-var DatasourceStats = require('./datasource-stats/DatasourceStats.js');
-var TableProvider = require('./table-provider/TableProvider.js');
-
-
-
-exports.CaseValidator = CaseValidator.CaseValidator;
-exports.PatternValidator = PatternValidator.PatternValidator;
-exports.BackgroundCell = BackgroundCell.BackgroundCell;
-exports.BackgroundCellConfigurationEditor = BackgroundCellConfigurationEditor.BackgroundCellConfigurationEditor;
-exports.DropdownCell = DropdownCell.DropdownCell;
-exports.LookupCell = LookupCell.LookupCell;
-exports.PctProgressCell = PctProgressCell.PctProgressCell;
-exports.ColumnList = ColumnList.ColumnList;
-exports.ColumnMenu = ColumnMenu.ColumnMenu;
-exports.useColumnActions = useColumnActions.useColumnActions;
-exports.ColumnSettingsPanel = ColumnSettingsPanel.ColumnSettingsPanel;
-exports.useColumnSettings = useColumnSettings.useColumnSettings;
-exports.TableSettingsPanel = TableSettingsPanel.TableSettingsPanel;
-exports.defaultTableSettingsPermissions = TableSettingsPanel.defaultTableSettingsPermissions;
-exports.useTableSettings = useTableSettings.useTableSettings;
-exports.columnSettingsFromColumnMenuPermissions = useTableAndColumnSettings.columnSettingsFromColumnMenuPermissions;
-exports.tableSettingsFromColumnMenuPermissions = useTableAndColumnSettings.tableSettingsFromColumnMenuPermissions;
-exports.useTableAndColumnSettings = useTableAndColumnSettings.useTableAndColumnSettings;
-exports.ColumnExpressionInput = ColumnExpressionInput.ColumnExpressionInput;
-exports.columnExpressionLanguageSupport = ColumnExpressionLanguage.columnExpressionLanguageSupport;
-exports.walkTree = ColumnExpressionTreeWalker.walkTree;
-exports.ColumnNamedTerms = columnExpressionParseUtils.ColumnNamedTerms;
-exports.isCompleteExpression = columnExpressionParseUtils.isCompleteExpression;
-exports.isCompleteRelationalExpression = columnExpressionParseUtils.isCompleteRelationalExpression;
-exports.lastNamedChild = columnExpressionParseUtils.lastNamedChild;
-exports.useColumnExpressionEditor = useColumnExpressionEditor.useColumnExpressionEditor;
-exports.useColumnExpressionSuggestionProvider = useColumnExpressionSuggestionProvider.useColumnExpressionSuggestionProvider;
-exports.ColumnExpressionPanel = ColumnExpressionPanel.ColumnExpressionPanel;
-exports.ColumnFormattingPanel = ColumnFormattingPanel.ColumnFormattingPanel;
-exports.BaseNumericFormattingSettings = BaseNumericFormattingSettings.BaseNumericFormattingSettings;
-exports.DateTimeFormattingSettings = DateTimeFormattingSettings.DateTimeFormattingSettings;
-exports.DataSourceStats = DatasourceStats.DataSourceStats;
-exports.TableProvider = TableProvider.TableProvider;
-exports.useTableContext = TableProvider.useTableContext;
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var react = require('react');
+var core = require('@salt-ds/core');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuTable = require('@vuu-ui/vuu-table');
+var vuuCodemirror = require('@vuu-ui/vuu-codemirror');
+var lr = require('@lezer/lr');
+
+const isString$1 = (value) => typeof value === "string";
+const CaseValidator = (rule, value) => {
+  if (isString$1(value)) {
+    if (value === "") {
+      return vuuDataReact.OK;
+    } else if (rule.value === "lower" && value.toLowerCase() !== value) {
+      return { ok: false, message: "value must be all lowercase" };
+    } else if (rule.value === "upper" && value.toUpperCase() !== value) {
+      return { ok: false, message: "value must be all uppercase" };
+    } else {
+      return vuuDataReact.OK;
+    }
+  } else {
+    return { ok: false, message: "value must be a string" };
+  }
+};
+vuuUtils.registerComponent("vuu-case", CaseValidator, "data-edit-validator", {});
+
+const isString = (value) => typeof value === "string";
+const defaultMessage = "value does not match expected pattern";
+const PatternValidator = (rule, value) => {
+  if (typeof rule.value !== "string") {
+    throw Error("Pattern validation rule must provide pattern");
+  }
+  if (isString(value)) {
+    if (value === "") {
+      return vuuDataReact.OK;
+    } else {
+      const { message = defaultMessage } = rule;
+      const pattern = new RegExp(rule.value);
+      if (pattern.test(value)) {
+        return vuuDataReact.OK;
+      } else {
+        return { ok: false, message };
+      }
+    }
+  } else {
+    return { ok: false, message: "value must be a string" };
+  }
+};
+vuuUtils.registerComponent("vuu-pattern", PatternValidator, "data-edit-validator", {});
+
+const INITIAL_VALUE = [void 0, void 0, void 0, void 0];
+function useDirection(key, value, column) {
+  const ref = react.useRef(void 0);
+  const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE;
+  const { type: dataType } = column;
+  const decimals = vuuUtils.isTypeDescriptor(dataType) ? dataType.formatting?.decimals : void 0;
+  const direction = key === prevKey && vuuUtils.isValidNumber(value) && vuuUtils.isValidNumber(prevValue) && column === prevColumn ? vuuUtils.getMovingValueDirection(value, prevDirection, prevValue, decimals) : "";
+  react.useEffect(() => {
+    ref.current = [key, value, column, direction];
+  });
+  return direction;
+}
+
+var backgroundCellCss = "\n.vuuBackgroundCell {\n  --background-animation-duration: 10s;\n  color: var(--vuuBackgroundCell-color, var(--vuu-color-gray-80));\n  padding-right: var(--salt-size-unit);\n  position: relative;\n  z-index: -1;\n}\n\n.vuuBackgroundCell-arrowBackground,\n.vuuBackgroundCell-arrowOnly {\n  padding-left: 14px;\n}\n\n.vuuBackgroundCell-arrow {\n  background-color: var(--background-cell-background);\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n}\n\n.vuuBackgroundCell-arrow {\n  text-align: left;\n}\n.vuuBackgroundCell-arrow + .num {\n  padding-left: 8px;\n}\n\n.right .vuuBackgroundCell-arrow {\n  text-align: right;\n}\n.right .vuuBackgroundCell-arrow + .num {\n  padding-right: 8px;\n}\n\n.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  background-color: transparent;\n}\n\n.vuuBackgroundCell-backgroundOnly.up1,\n.vuuBackgroundCell-arrowBackground.up1 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgup1;\n}\n\n.vuuBackgroundCell-backgroundOnly.up2,\n.vuuBackgroundCell-arrowBackground.up2 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgup2;\n}\n\n.vuuBackgroundCell-backgroundOnly.down1,\n.vuuBackgroundCell-arrowBackground.down1 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgdown1;\n}\n\n.vuuBackgroundCell-backgroundOnly.down2,\n.vuuBackgroundCell-arrowBackground.down2 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgdown2;\n}\n\n.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowdown2;\n}\n\n.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowdown2;\n}\n";
+
+var backgroundKeyFramesCss = "\n@keyframes vuubgup1 {\n    0% {\n      background-color: var(--vuu-color-green-50);\n      color: white;\n    }\n\n    30% {\n      color: white;\n    }  \n    33% {\n      color: var(--vuu-color-gray-80);\n    }  \n\n    100% {\n      background-color: transparent;\n      color: var(--vuu-color-gray-80);\n    }\n  }\n  \n  @keyframes vuubgup2 {\n    0% {\n      background-color: var(--vuu-color-green-50);\n      color: white;\n    }\n\n    30% {\n      color: white;\n    }  \n    33% {\n      color: var(--vuu-color-gray-80);\n    }  \n\n    100% {\n      background-color: transparent;\n      color: var(--vuu-color-gray-80);\n    }\n  }\n  \n  @keyframes vuubgdown1 {\n    0% {\n      background-color: var(--vuu-color-red-50);\n      color: white;\n    }\n    30% {\n      color: white;\n    }  \n    33% {\n      color: var(--vuu-color-gray-80);\n    }  \n    100% {\n      background-color: transparent;\n      color: var(--vuu-color-gray-80);\n    }\n  }\n  \n  @keyframes vuubgdown2 {\n    0% {\n      background-color: var(--vuu-color-red-50);\n      color: white;\n    }\n    30% {\n      color: white;\n    }  \n    33% {\n      color: var(--vuu-color-gray-80);\n    }  \n    100% {\n      background-color: transparent;\n      color: var(--vuu-color-gray-80);\n    }\n  }\n  \n  @keyframes vuuarrowup1 {\n    from {\n      color: var(--salt-differential-positive-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuuarrowup2 {\n    from {\n      color: var(--salt-differential-positive-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuuarrowdown1 {\n    from {\n      color: var(--salt-differential-negative-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuuarrowdown2 {\n    from {\n      color: var(--salt-differential-negative-foreground);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowup1 {\n    0% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: var(--vuu-color-green-50);\n    }\n    20% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowup2 {\n    0% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: var(--vuu-color-green-50);\n    }\n    20% {\n      color: var(--salt-differential-positive-foreground);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowdown1 {\n    0% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: var(--vuu-color-red-50);\n    }\n    20% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowdown2 {\n    0% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: var(--vuu-color-red-50);\n    }\n    20% {\n      color: var(--salt-differential-negative-foreground);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  ";
+
+const CHAR_ARROW_UP = String.fromCharCode(11014);
+const CHAR_ARROW_DOWN = String.fromCharCode(11015);
+const { KEY } = vuuUtils.metadataKeys;
+const classBase$f = "vuuBackgroundCell";
+const FlashStyle = {
+  ArrowOnly: "arrow",
+  BackgroundOnly: "bg-only",
+  ArrowBackground: "arrow-bg"
+};
+const getFlashStyle = (colType) => {
+  if (vuuUtils.isTypeDescriptor(colType) && colType.renderer) {
+    if ("flashStyle" in colType.renderer) {
+      return colType.renderer["flashStyle"];
+    }
+  }
+  return FlashStyle.BackgroundOnly;
+};
+const BackgroundCell = react.memo(function BackgroundCell2({
+  column,
+  columnMap,
+  row
+}) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-background-cell",
+    css: backgroundCellCss,
+    window: targetWindow
+  });
+  styles.useComponentCssInjection({
+    testId: "vuu-background-keyframes",
+    css: backgroundKeyFramesCss,
+    window: targetWindow
+  });
+  const { name, type, valueFormatter } = column;
+  const dataIdx = columnMap[name];
+  const value = row[dataIdx];
+  const flashStyle = getFlashStyle(type);
+  const direction = useDirection(row[KEY], value, column);
+  const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === vuuUtils.UP1 || direction === vuuUtils.UP2 ? CHAR_ARROW_UP : direction === vuuUtils.DOWN1 || direction === vuuUtils.DOWN2 ? CHAR_ARROW_DOWN : null : null;
+  const dirClass = direction ? ` ` + direction : "";
+  const className = cx(classBase$f, dirClass, {
+    [`${classBase$f}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,
+    [`${classBase$f}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,
+    [`${classBase$f}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, tabIndex: -1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase$f}-arrow`, children: arrow }),
+    valueFormatter(row[dataIdx])
+  ] });
+}, vuuUtils.dataAndColumnUnchanged);
+vuuUtils.registerComponent(
+  "vuu.price-move-background",
+  BackgroundCell,
+  "cell-renderer",
+  {
+    description: "Change background color of cell when value changes",
+    configEditor: "BackgroundCellConfigurationEditor",
+    label: "Background Flash",
+    serverDataType: ["long", "int", "double"]
+  }
+);
+
+var backgroundCellConfigurationEditorCss = ".vuuBackgroundCellConfiguration {\n    height: 50px;\n    background-color: red;\n}";
+
+const classBase$e = "vuuBackgroundCellConfiguration";
+const flashOptions = [
+  { label: "Background Only", value: "bg-only" },
+  { label: "Background and Arrow", value: "arrow-bg" },
+  { label: "Arrow Only", value: "arrow" }
+];
+const [defaultFlashOption] = flashOptions;
+const valueFromColumn = (column) => {
+  const { flashStyle } = column.type.renderer;
+  return flashOptions.find((o) => o.value === flashStyle) || defaultFlashOption;
+};
+const BackgroundCellConfigurationEditor = ({
+  column,
+  onChangeRendering
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-background-cell-configuration-editor",
+    css: backgroundCellConfigurationEditorCss,
+    window: targetWindow
+  });
+  console.log({ type: column.type });
+  const [flashStyle, setFlashStyle] = react.useState(
+    valueFromColumn(column)
+  );
+  const handleSelectionChange = react.useCallback(
+    (_, [flashOption]) => {
+      setFlashStyle(flashOption);
+      const renderProps = column.type.renderer;
+      onChangeRendering({
+        ...renderProps,
+        flashStyle: flashOption?.value ?? defaultFlashOption.value
+      });
+    },
+    [column.type, onChangeRendering]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Flash Style" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.Dropdown,
+      {
+        className: `${classBase$e}-flashStyle`,
+        onSelectionChange: handleSelectionChange,
+        selected: flashStyle ? [flashStyle] : [],
+        value: flashStyle?.label,
+        children: flashOptions.map((flashOption, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: flashOption, children: flashOption.label }, i))
+      }
+    )
+  ] });
+};
+vuuUtils.registerConfigurationEditor(
+  "BackgroundCellConfigurationEditor",
+  BackgroundCellConfigurationEditor
+);
+
+var dropdownCellCss = ".vuuTableCell {\n  .vuuTableDropdownCell {\n    --vuu-icon-height: 15px;\n    --vuu-icon-left: calc(100% - 20px);\n    --vuu-icon-size: 8px;\n    --vuu-icon-top: -2px;\n    --salt-focused-outlineStyle: none;\n    --saltButton-borderRadius: 2px;\n\n    border: solid 1px var(--salt-editable-borderColor);\n    border-radius: 2px;\n    position: relative;\n    font-weight: 500;\n    height: var(--vuu-table-embedded-control-height);\n    min-height: var(--vuu-table-embedded-control-height);\n    text-align: left;\n\n    button:focus-visible {\n      --saltButton-borderColor: var(--salt-focused-outlineColor);\n      --saltButton-borderWidth: 2px;\n      padding-left: 7px;\n    }\n    &.saltDropdown:focus {\n      outline: none;\n    }\n  }\n\n  .vuuTableDropdownCell:focus {\n    border: solid 2px var(--salt-focused-outlineColor);\n  }\n}\n\n/* .vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n  border: solid 2px var(--salt-focused-outlineColor);\n  padding: 0 3px;\n} */\n";
+
+const classBase$d = "vuuTableDropdownCell";
+const DropdownCell = react.memo(function DropdownCell2({
+  column,
+  columnMap,
+  onEdit,
+  row
+}) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-dropdown-cell",
+    css: dropdownCellCss,
+    window: targetWindow
+  });
+  const [open, setOpen] = react.useState(false);
+  const dataIdx = columnMap[column.name];
+  const dataValue = row[dataIdx];
+  const { values } = vuuDataReact.useLookupValues(column, dataValue);
+  const valueRef = react.useRef(void 0);
+  react.useMemo(() => {
+    valueRef.current = vuuUtils.getSelectedOption(values, dataValue);
+  }, [dataValue, values]);
+  const handleOpenChange = react.useCallback((isOpen) => {
+    console.log(`handleOpenChange ${isOpen}`);
+    if (isOpen === false) {
+      setOpen(false);
+    }
+  }, []);
+  const handleSelectionChange = react.useCallback(
+    async (evt, [selectedOption2]) => {
+      if (selectedOption2) {
+        const response = await onEdit?.(
+          {
+            editType: "commit",
+            previousValue: valueRef.current?.value,
+            value: selectedOption2.value
+          },
+          "commit"
+        );
+        if (response === true) {
+          vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
+        }
+      }
+    },
+    [onEdit]
+  );
+  const handleClick = react.useCallback(() => {
+    if (!open) {
+      setOpen(true);
+    }
+  }, [open]);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !open) {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpen(true);
+      }
+    },
+    [open]
+  );
+  const { current: selectedOption } = valueRef;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Dropdown,
+    {
+      className: classBase$d,
+      "data-icon": "triangle-down",
+      onClick: handleClick,
+      onKeyDownCapture: handleKeyDown,
+      onOpenChange: handleOpenChange,
+      onSelectionChange: handleSelectionChange,
+      open,
+      selected: selectedOption ? [selectedOption] : [],
+      value: selectedOption?.label,
+      children: values.map((listOption, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: listOption, children: listOption.label }, i))
+    }
+  );
+}, vuuUtils.dataColumnAndKeyUnchanged);
+vuuUtils.registerComponent("dropdown-cell", DropdownCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+const LookupCell = react.memo(function LookupCell2({
+  column,
+  columnMap,
+  row
+}) {
+  const dataIdx = columnMap[column.name];
+  const dataValue = row[dataIdx];
+  const { initialValue: value } = vuuDataReact.useLookupValues(column, dataValue);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value?.label });
+}, vuuUtils.dataAndColumnUnchanged);
+vuuUtils.registerComponent("lookup-cell", LookupCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+var pctProgressCellCss = ".vuuPctProgressCell {\n    --progress-bar-width: 2px;\n    position: relative;\n}\n\n.vuuPctProgressCell-zero {\n    --progress-bar-width: 0px;\n}\n.vuuPctProgressCell-complete {\n    --progress-bar-width: 0px;\n}\n\n.vuuPctProgressCell-progressBar {\n    background-color: var(--vuu-color-green-60-fade-30);\n    border-right: solid var(--progress-bar-width) var(--vuu-color-green-60);\n    display: inline-block;\n    height: 20px;\n    left: 0;\n    overflow: hidden;\n    position: absolute;\n    width: var(--progress-bar-pct, 0);\n}\n\n\n.vuuPctProgressCell-text {\n    display: inline-block;\n    text-align: left;\n    width: 80%;\n    z-index: 1;\n}";
+
+const classBase$c = "vuuPctProgressCell";
+const getPercentageValue = (value) => {
+  if (value >= 0 && value <= 1) {
+    return value * 100;
+  } else if (value > 2) {
+    return 0;
+  } else if (value > 1) {
+    return 100;
+  } else {
+    return 0;
+  }
+};
+const PctProgressCell = ({ column, columnMap, row }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-pct-progress-cell",
+    css: pctProgressCellCss,
+    window: targetWindow
+  });
+  const value = row[columnMap[column.name]];
+  const percentageValue = getPercentageValue(value);
+  const className = cx(classBase$c, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(className, {
+        [`${classBase$c}-zero`]: percentageValue === 0,
+        [`${classBase$c}-complete`]: percentageValue >= 100
+      }),
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `${classBase$c}-progressBar`,
+            style: { "--progress-bar-pct": `${percentageValue}%` }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase$c}-text`, children: `${percentageValue.toFixed(
+          2
+        )} %` })
+      ]
+    }
+  );
+};
+vuuUtils.registerComponent("vuu.pct-progress", PctProgressCell, "cell-renderer", {
+  description: "Percentage formatter",
+  label: "Percentage formatter",
+  serverDataType: "double"
+});
+
+var progressCellCss = ".vuuProgressCell {\n   align-items: center;\n   display: flex;\n}\n\n.vuuProgressCell-track {\n    display: inline-block;\n    flex: auto 1 1;\n    height: 4px;\n    overflow: hidden;\n    position: relative;\n}\n\n.vuuProgressCell-bg {\n    background-color: var(--salt-measured-background);\n    display: inline-block;\n    height: 2px;\n    left: 0;\n    position: absolute;\n    top: 1px;\n    width: 100%;\n}\n\n\n.vuuProgressCell-bar {\n    background-color: var(--salt-measured-fill);\n    display: inline-block;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top:0;\n    transform: translateX(var(--progress-bar-pct, -100%));\n    width: 100%;\n}\n\n.vuuProgressCell-text {\n    flex: 35px 0 0;\n    text-align: right;\n}";
+
+const classBase$b = "vuuProgressCell";
+const ProgressCell = ({ column, columnMap, row }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-progress-cell",
+    css: progressCellCss,
+    window: targetWindow
+  });
+  const { name, type } = column;
+  const value = row[columnMap[name]];
+  let showProgress = false;
+  let percentage = 0;
+  if (vuuUtils.isTypeDescriptor(type) && vuuUtils.isColumnTypeRenderer(type.renderer)) {
+    const { associatedField } = type.renderer;
+    if (associatedField) {
+      const associatedValue = row[columnMap[associatedField]];
+      if (vuuUtils.isValidNumber(value) && vuuUtils.isValidNumber(associatedValue)) {
+        percentage = Math.min(Math.round(value / associatedValue * 100), 100);
+        percentage = Math.min(Math.round(value / associatedValue * 100), 100);
+        showProgress = isFinite(percentage);
+      } else {
+        const floatValue = parseFloat(value);
+        if (Number.isFinite(floatValue)) {
+          const floatOtherValue = parseFloat(associatedValue);
+          if (Number.isFinite(floatOtherValue)) {
+            percentage = Math.min(
+              Math.round(floatValue / floatOtherValue * 100),
+              100
+            );
+            showProgress = isFinite(percentage);
+          }
+        }
+      }
+    } else {
+      throw Error("ProgressCell associatedField is required to render");
+    }
+  }
+  const className = cx(classBase$b, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, tabIndex: -1, children: [
+    showProgress ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${classBase$b}-track`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase$b}-bg` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `${classBase$b}-bar`,
+          style: { "--progress-bar-pct": `-${100 - percentage}%` }
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase$b}-text`, children: `${percentage} %` })
+  ] });
+};
+vuuUtils.registerComponent("vuu.progress", ProgressCell, "cell-renderer", {
+  description: "Progress formatter",
+  label: "Progress formatter",
+  serverDataType: ["long", "int", "double"],
+  // Not until we provide settings for associaetd field
+  userCanAssign: false
+});
+
+var columnList = ".vuuColumnList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuu-svg-function: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\"><path d=\"M5.8625 10.5V9.625H6.72291L8.4875 7.59792L6.72291 5.54167H5.64375L4.60833 10.8792C4.53055 11.3167 4.36527 11.6545 4.1125 11.8927C3.85972 12.1309 3.53402 12.25 3.13541 12.25C2.7368 12.25 2.40382 12.1333 2.13645 11.9C1.86909 11.6667 1.73541 11.375 1.73541 11.025C1.73541 10.7625 1.80833 10.551 1.95416 10.3906C2.1 10.2302 2.28958 10.15 2.52291 10.15C2.72708 10.15 2.89479 10.2083 3.02604 10.325C3.15729 10.4417 3.22291 10.5972 3.22291 10.7917C3.22291 10.8986 3.20104 10.9983 3.15729 11.0906C3.11354 11.183 3.05277 11.2583 2.975 11.3167C3.01388 11.3361 3.0552 11.3507 3.09895 11.3604C3.1427 11.3701 3.18888 11.375 3.2375 11.375C3.36388 11.375 3.47083 11.3142 3.55833 11.1927C3.64583 11.0712 3.70902 10.9132 3.74791 10.7188L4.75416 5.54167H2.91666V4.66667H4.91458L5.22083 3.12083C5.30833 2.68333 5.48333 2.34549 5.74583 2.10729C6.00833 1.8691 6.33402 1.75 6.72291 1.75C7.12152 1.75 7.44965 1.86667 7.70729 2.1C7.96493 2.33333 8.09375 2.625 8.09375 2.975C8.09375 3.2375 8.02083 3.44896 7.875 3.60938C7.72916 3.76979 7.53958 3.85 7.30625 3.85C7.1118 3.85 6.94652 3.7941 6.81041 3.68229C6.6743 3.57049 6.60625 3.42222 6.60625 3.2375C6.60625 3.14028 6.62569 3.04549 6.66458 2.95312C6.70347 2.86076 6.75208 2.78542 6.81041 2.72708C6.79097 2.70764 6.7618 2.69063 6.72291 2.67604C6.68402 2.66146 6.64513 2.65417 6.60625 2.65417C6.47986 2.65417 6.37048 2.7125 6.27812 2.82917C6.18576 2.94583 6.12013 3.09653 6.08125 3.28125L5.81875 4.66667H8.575V5.54167H7.88958L9.1 6.94167L10.2375 5.54167H9.5375V4.66667H12.25V5.54167H11.4042L9.65416 7.59792L11.4042 9.625H12.25V10.5H9.5375V9.625H10.2375L9.07083 8.26875L7.875 9.625H8.575V10.5H5.8625Z\"/></svg>');\n  --vuuList-borderStyle: none;\n  --vuuListItem-padding: 0;\n  display: flex;\n  flex-direction: column;\n\n\n  .saltOption {\n    align-items: center;\n    background-color: var(--salt-container-primary-background);\n    border-bottom: var(--vuuColumnListItem-border, solid) 1px\n      var(--salt-separable-tertiary-borderColor);\n    gap: var(--salt-spacing-200);\n    padding: var(--salt=spacin-100) 0;\n\n    .vuuIcon {\n      --vuu-icon-color: var(--salt-content-secondary-foreground);\n    }\n  }\n\n  .vuuColumnList-text {\n    flex: 1 1 auto;\n  }\n\n}\n\n[data-icon=\"function\"] {\n  --vuu-icon-svg: var(--vuu-svg-function);\n}\n\n\n\n.vuuColumnList-withColumnNavgation {\n  .vuuColumnList-text:hover {\n    font-weight: 600;\n    text-decoration: underline;\n  }\n}\n\n.vuuColumnList-header {\n  border-top: solid 2px var(--vuu-color-gray-30);\n  flex: 0 0 40px;\n  font-size: 14px;\n  font-weight: 600;\n  padding-top: 24px;\n}\n\n.vuuColumnList-colHeadings {\n  border-bottom: solid 2px var(--vuu-color-gray-30);\n  color: var(--vuu-color-gray-50);\n  display: flex;\n  flex: 0 0 24px;\n  font-size: 10px;\n  justify-content: space-between;\n  margin-top: 16px;\n  padding-bottom: 8px;\n}\n";
+
+const classBase$a = "vuuColumnList";
+const classBaseListItem = "vuuColumnListItem";
+const useSorting = (id, index, allowSort = true) => {
+  const { handleRef: sortableHandleRef, ref: sortableRef } = vuuUtils.useSortable({
+    id,
+    index
+  });
+  const noopRef = react.useCallback(() => {
+  }, []);
+  const [handleRef, ref] = react.useMemo(() => {
+    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];
+  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);
+  return {
+    handleRef,
+    ref
+  };
+};
+const ColumnListItem = ({
+  className: classNameProp,
+  index,
+  item,
+  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },
+  ...optionProps
+}) => {
+  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Option,
+    {
+      ...optionProps,
+      className: cx(classNameProp, classBaseListItem),
+      "data-name": item.name,
+      id: item.name,
+      ref,
+      children: [
+        allowReorderColumns ? /* @__PURE__ */ jsxRuntime.jsx(
+          vuuUiControls.IconButton,
+          {
+            "data-embedded": true,
+            appearance: "transparent",
+            icon: "draggable",
+            ref: handleRef,
+            size: 16
+          }
+        ) : null,
+        item?.isCalculated ? /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "function" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          core.Checkbox,
+          {
+            className: `${classBase$a}-checkBox`,
+            checked: item?.subscribed,
+            readOnly: allowRemoveColumns === false
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase$a}-text`, children: vuuUtils.getColumnLabel(item) }),
+        allowHideColumns !== false ? /* @__PURE__ */ jsxRuntime.jsx(
+          core.Switch,
+          {
+            className: `${classBase$a}-switch`,
+            checked: item?.hidden !== true,
+            disabled: item?.subscribed !== true
+          }
+        ) : null
+      ]
+    }
+  );
+};
+const defaultPermissions = {
+  allowHideColumns: true,
+  allowRemoveColumns: true,
+  allowReorderColumns: true
+};
+const ColumnList = ({
+  className,
+  columnItems,
+  onChange,
+  onNavigateToColumn,
+  onReorderColumnItems,
+  permissions = defaultPermissions,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-column-list",
+    css: columnList,
+    window: targetWindow
+  });
+  const listRef = react.useRef(null);
+  const handleChange = react.useCallback(
+    ({ target }) => {
+      const input = target;
+      const listItem = vuuUtils.queryClosest(target, `.${classBaseListItem}`);
+      if (listItem) {
+        const {
+          dataset: { name }
+        } = listItem;
+        if (name) {
+          const saltCheckbox = vuuUtils.queryClosest(target, `.${classBase$a}-checkBox`);
+          const saltSwitch = vuuUtils.queryClosest(target, `.${classBase$a}-switch`);
+          if (saltCheckbox) {
+            onChange(name, "subscribed", input.checked);
+          } else if (saltSwitch) {
+            onChange(name, "hidden", input.checked === false);
+          }
+        }
+      }
+    },
+    [onChange]
+  );
+  const handleClick = react.useCallback(
+    (evt) => {
+      const targetEl = evt.target;
+      if (targetEl.classList.contains("vuuColumnList-text")) {
+        const listItemEl = targetEl.closest(".vuuListItem");
+        if (listItemEl?.dataset.name) {
+          onNavigateToColumn?.(listItemEl.dataset.name);
+        }
+      }
+    },
+    [onNavigateToColumn]
+  );
+  const handleDragEnd = react.useCallback(() => {
+    setTimeout(() => {
+      const listItems = listRef.current?.querySelectorAll(".saltOption");
+      if (listItems) {
+        const orderedIds = Array.from(listItems).map(({ id }) => id);
+        onReorderColumnItems?.(vuuUtils.reorderColumnItems(columnItems, orderedIds));
+      }
+    }, 300);
+  }, [columnItems, onReorderColumnItems]);
+  return /* @__PURE__ */ jsxRuntime.jsx(vuuUtils.DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase$a, className, {
+        [`${classBase$a}-withColumnNavigation`]: typeof onNavigateToColumn === "function"
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase$a}-header`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column Selection" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase$a}-colHeadings`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column subscription" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Visibility" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.ListBox, { ref: listRef, children: columnItems.map((columnItem, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnListItem,
+          {
+            item: columnItem,
+            index,
+            onChange: handleChange,
+            onClick: handleClick,
+            permissions,
+            value: columnItem
+          },
+          columnItem.name
+        )) })
+      ]
+    }
+  ) });
+};
+
+const NullMenuActionHandler = (menuItemId) => {
+  console.log(
+    `[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`
+  );
+  return false;
+};
+const NullDataSource = {};
+const TableContext = react.createContext({
+  dataSource: NullDataSource,
+  menuActionHandler: NullMenuActionHandler
+});
+const TableProvider = ({
+  children,
+  dataSource,
+  menuActionHandler
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableContext.Provider,
+    {
+      value: {
+        dataSource,
+        menuActionHandler
+      },
+      children
+    }
+  );
+};
+function useTableContext(throwIfNoDataSource = false) {
+  const { dataSource, menuActionHandler } = react.useContext(TableContext);
+  if (dataSource === NullDataSource && menuActionHandler == NullMenuActionHandler && throwIfNoDataSource) {
+    throw Error(`[TableProvider] no DataSourceProvider has been declared`);
+  } else {
+    return {
+      dataSource,
+      menuActionHandler
+    };
+  }
+}
+
+var columnMenuCss = ".vuuMenuItem {\n  --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuColumnMenu {\n  --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-minWidth: var(--menu-button-size);\n  --saltButton-height: var(--menu-button-size);\n  --saltButton-width: var(--menu-button-size);\n\n  --vuu-icon-height: var(--menu-button-size);\n  --vuu-icon-left: 0px;\n  --vuu-icon-top: 0px;\n  --vuu-icon-width: var(--menu-button-size);\n\n  border: none;\n  border-radius: 4px;\n  flex: 0 0 var(--menu-button-size);\n  margin: var(--vuuTable-columnMenu-margin, 0);\n  padding: 0;\n}\n";
+
+const isColumnMenuActionType = (value) => value !== void 0 && [
+  "agg-count",
+  "agg-distinct",
+  "agg-sum",
+  "agg-avg",
+  "agg-high",
+  "agg-low",
+  "sort-asc",
+  "sort-dsc",
+  "sort-add-asc",
+  "sort-add-dsc",
+  "remove-sort",
+  "group-column",
+  "remove-group",
+  "add-to-group",
+  "remove-from-group",
+  "pin-column-left",
+  "pin-column-right",
+  "pin-column-floating",
+  "unpin-column",
+  "hide-column",
+  "remove-column",
+  "column-settings",
+  "table-settings"
+].includes(value);
+const getColumnMenuActionType = (target) => {
+  const { menuActionId } = target.dataset;
+  if (isColumnMenuActionType(menuActionId)) {
+    return menuActionId;
+  } else {
+    throw Error(
+      "[vuu-table-extras] column-menu-utils target element is not a valid Column MenuItem"
+    );
+  }
+};
+function buildSortMenu(column, dataSource, menuActionClickHandler, isAllowed = true) {
+  if (!isAllowed || column.sortable === false) {
+    return null;
+  } else {
+    const { name, label = name } = column;
+    const menuItems = [];
+    const columnSortStatus = vuuUtils.getSortStatus(column.name, dataSource.sort);
+    switch (columnSortStatus) {
+      case "no-sort":
+        menuItems.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "sort-asc",
+              onClick: menuActionClickHandler,
+              children: "Sort ascending"
+            },
+            "sort-asc"
+          )
+        );
+        menuItems.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "sort-dsc",
+              onClick: menuActionClickHandler,
+              children: "Sort descending"
+            },
+            "sort-dsc"
+          )
+        );
+        break;
+      case "single-sort-asc":
+        menuItems.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "sort-dsc",
+              onClick: menuActionClickHandler,
+              children: "Reverse Sort (DSC)"
+            },
+            "sort-dsc"
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "remove-sort",
+              onClick: menuActionClickHandler,
+              children: "Remove Sort"
+            },
+            "remove-sort"
+          )
+        );
+        break;
+      case "single-sort-desc":
+        menuItems.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "sort-asc",
+              onClick: menuActionClickHandler,
+              children: "Reverse Sort (ASC)"
+            },
+            "sort-asc"
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "remove-sort",
+              onClick: menuActionClickHandler,
+              children: "Remove Sort"
+            },
+            "remove-sort"
+          )
+        );
+        break;
+      case "sort-other-column":
+        menuItems.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "sort-add-asc",
+              onClick: menuActionClickHandler,
+              children: "Add to sort ASC"
+            },
+            "sort-add-asc"
+          )
+        );
+        menuItems.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "sort-add-dsc",
+              onClick: menuActionClickHandler,
+              children: "Add to sort DSC"
+            },
+            "sort-add-dsc"
+          )
+        );
+        menuItems.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "sort-asc",
+              onClick: menuActionClickHandler,
+              children: "Ascending"
+            },
+            "sort-asc"
+          )
+        );
+        menuItems.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "sort-dsc",
+              onClick: menuActionClickHandler,
+              children: "Descending"
+            },
+            "sort-dsc"
+          )
+        );
+        break;
+      case "multi-sort-includes-column-asc":
+      case "multi-sort-includes-column-desc":
+        break;
+      default:
+        vuuUtils.logUnhandledMessage(
+          columnSortStatus,
+          "[vuu-table-extras] column-menu-utils buildSortMenu"
+        );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(core.Menu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: `Sort by ${label}` }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.MenuPanel, { children: menuItems })
+    ] }, "sort-menu");
+  }
+}
+function buildGroupMenu(column, dataSource, menuActionClickHandler, isAllowed = true) {
+  if (!isAllowed || column.groupable === false) {
+    return null;
+  } else {
+    const menuItems = [];
+    const columnGroupStatus = vuuUtils.getGroupStatus(column.name, dataSource.groupBy);
+    const { name, label = name } = column;
+    switch (columnGroupStatus) {
+      case "no-groupby":
+      case "single-groupby-other-column":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          core.MenuItem,
+          {
+            "data-menu-action-id": "group-column",
+            onClick: menuActionClickHandler,
+            children: `Group by ${label}`
+          },
+          "group-column"
+        );
+      case "single-groupby":
+        menuItems.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "remove-group",
+              onClick: menuActionClickHandler,
+              children: "Remove Grouping"
+            },
+            "remove-group"
+          )
+        );
+        break;
+      case "multi-groupby-other-columns":
+        menuItems.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "add-to-group",
+              onClick: menuActionClickHandler,
+              children: "Add to grouping"
+            },
+            "add-to-group"
+          )
+        );
+        break;
+      case "multi-groupby-includes-column":
+        menuItems.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              "data-menu-action-id": "remove-from-group",
+              onClick: menuActionClickHandler,
+              children: "Remove from grouping"
+            },
+            "remove-from-group"
+          )
+        );
+        break;
+      default:
+        vuuUtils.logUnhandledMessage(
+          columnGroupStatus,
+          "[vuu-table-extras] column-menu-utils buildGroupMenu"
+        );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(core.Menu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "Group data" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.MenuPanel, { children: menuItems })
+    ] }, "group-menu");
+  }
+}
+const buildVisibilityMenuItems = (column, menuActionClickHandler, isAllowed = true) => {
+  if (!isAllowed) {
+    return null;
+  }
+  const menuItems = [];
+  const { name, label = name } = column;
+  menuItems.push(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.MenuItem,
+      {
+        "data-menu-action-id": "hide-column",
+        onClick: menuActionClickHandler,
+        children: `Hide ${label} column`
+      },
+      "hide-column"
+    )
+  );
+  menuItems.push(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.MenuItem,
+      {
+        "data-menu-action-id": "remove-column",
+        onClick: menuActionClickHandler,
+        children: `Remove ${label} column`
+      },
+      "remove-column"
+    )
+  );
+  return menuItems;
+};
+const buildPinMenuItems = (column, menuActionClickHandler, isAllowed = true) => {
+  if (!isAllowed || column === void 0) {
+    return [];
+  }
+  const { pin } = column;
+  const menuItems = [];
+  const pinLeft = /* @__PURE__ */ jsxRuntime.jsx(
+    core.MenuItem,
+    {
+      "data-menu-action-id": "pin-column-left",
+      onClick: menuActionClickHandler,
+      children: "Pin left"
+    },
+    "pin-column-left"
+  );
+  const pinFloating = /* @__PURE__ */ jsxRuntime.jsx(
+    core.MenuItem,
+    {
+      "data-menu-action-id": "pin-column-floating",
+      onClick: menuActionClickHandler,
+      children: "Pin floating"
+    },
+    "pin-column-floating"
+  );
+  const pinRight = /* @__PURE__ */ jsxRuntime.jsx(
+    core.MenuItem,
+    {
+      "data-menu-action-id": "pin-column-right",
+      onClick: menuActionClickHandler,
+      children: "Pin right"
+    },
+    "pin-column-right"
+  );
+  if (pin === void 0) {
+    menuItems.push(
+      /* @__PURE__ */ jsxRuntime.jsxs(core.Menu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "Pin Column" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.MenuPanel, { children: [
+          pinLeft,
+          pinFloating,
+          pinRight
+        ] })
+      ] }, "pin-menu")
+    );
+  } else {
+    menuItems.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.MenuItem,
+        {
+          "data-menu-action-id": "unpin-column",
+          onClick: menuActionClickHandler,
+          children: "Unpin"
+        },
+        "unpin-column"
+      )
+    );
+    if (pin === "left") {
+      menuItems.push(
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Menu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "Pin Column" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(core.MenuPanel, { children: [
+            pinFloating,
+            pinRight
+          ] })
+        ] }, "pin-menu")
+      );
+    } else if (pin === "floating") {
+      menuItems.push(
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Menu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "Pin Column" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(core.MenuPanel, { children: [
+            pinLeft,
+            pinRight
+          ] })
+        ] }, "pin-menu")
+      );
+    } else {
+      menuItems.push(
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Menu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "Pin Column" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(core.MenuPanel, { children: [
+            pinFloating,
+            pinRight
+          ] })
+        ] }, "pin-menu")
+      );
+    }
+  }
+  return menuItems;
+};
+const buildSettingsMenuItems = (_, menuActionClickHandler, allowColumnSettings = true, allowTableSettings = true) => {
+  if (!allowColumnSettings && !allowTableSettings) {
+    return null;
+  }
+  const menuItems = [];
+  if (allowColumnSettings) {
+    menuItems.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.MenuItem,
+        {
+          "data-icon": "settings",
+          "data-menu-action-id": "column-settings",
+          onClick: menuActionClickHandler,
+          children: "Column settings ..."
+        },
+        "column-settings"
+      )
+    );
+  }
+  if (allowTableSettings) {
+    menuItems.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.MenuItem,
+        {
+          "data-icon": "settings",
+          "data-menu-action-id": "table-settings",
+          onClick: menuActionClickHandler,
+          children: "Table settings ..."
+        },
+        "table-settings"
+      )
+    );
+  }
+  return menuItems;
+};
+function buildAggregationMenuItems(column, dataSource, menuActionClickHandler, isAllowed = true) {
+  if (!isAllowed) {
+    return null;
+  }
+  const { name, label = name } = column;
+  if (dataSource.groupBy?.length === 0) {
+    return [];
+  } else {
+    const menuItems = [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.MenuItem,
+        {
+          "data-menu-action-id": "agg-count",
+          onClick: menuActionClickHandler,
+          children: "Count"
+        },
+        "agg-count"
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.MenuItem,
+        {
+          "data-menu-action-id": "agg-distinct",
+          onClick: menuActionClickHandler,
+          children: "Distinct"
+        },
+        "agg-distinct"
+      )
+    ];
+    if (vuuUtils.isNumericColumn(column)) {
+      menuItems.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.MenuItem,
+          {
+            "data-menu-action-id": "agg-sum",
+            onClick: menuActionClickHandler,
+            children: "Sum"
+          },
+          "agg-sum"
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.MenuItem,
+          {
+            "data-menu-action-id": "agg-avg",
+            onClick: menuActionClickHandler,
+            children: "Average"
+          },
+          "agg-avg"
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.MenuItem,
+          {
+            "data-menu-action-id": "agg-high",
+            onClick: menuActionClickHandler,
+            children: "High"
+          },
+          "agg-high"
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.MenuItem,
+          {
+            "data-menu-action-id": "agg-low",
+            onClick: menuActionClickHandler,
+            children: "Low"
+          },
+          "agg-low"
+        )
+      );
+    }
+    return [
+      /* @__PURE__ */ jsxRuntime.jsxs(core.Menu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: `Aggregate ${label}` }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.MenuPanel, { children: menuItems })
+      ] }, "aggregate-menu")
+    ];
+  }
+}
+
+const buildColumnItems = (availableColumns, configuredColumns) => {
+  return availableColumns.map(({ name, serverDataType }) => {
+    const configuredColumn = configuredColumns.find((col) => col.name === name);
+    return {
+      hidden: configuredColumn?.hidden,
+      isCalculated: vuuUtils.isCalculatedColumn(name),
+      label: configuredColumn?.label ?? name,
+      name,
+      serverDataType,
+      subscribed: configuredColumn !== void 0
+    };
+  });
+};
+const useTableSettings = ({
+  availableColumns: availableColumnsProp,
+  onConfigChange,
+  onDataSourceConfigChange,
+  tableConfig: tableConfigProp
+}) => {
+  const [{ availableColumns, tableConfig }, setColumnState] = react.useState({
+    availableColumns: availableColumnsProp,
+    tableConfig: tableConfigProp
+  });
+  const columnItems = react.useMemo(
+    () => buildColumnItems(availableColumns, tableConfig.columns),
+    [availableColumns, tableConfig.columns]
+  );
+  const handleReorderColumnItems = react.useCallback(
+    (columnItems2) => {
+      const orderedNames = columnItems2.map((c) => c.name);
+      setColumnState((state) => {
+        const newAvailableColumns = vuuUtils.reorderColumnItems(
+          state.availableColumns,
+          orderedNames
+        );
+        const newColumns = vuuUtils.reorderColumnItems(
+          tableConfig.columns,
+          orderedNames
+        );
+        return {
+          availableColumns: newAvailableColumns,
+          tableConfig: {
+            ...state.tableConfig,
+            columns: newColumns
+          }
+        };
+      });
+    },
+    [tableConfig.columns]
+  );
+  const handleColumnChange = react.useCallback(
+    (name, property, value) => {
+      const columnItem = columnItems.find((col) => col.name === name);
+      if (property === "subscribed") {
+        if (columnItem?.subscribed) {
+          const subscribedColumns = tableConfig.columns.filter((col) => col.name !== name).map((col) => col.name);
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: {
+              ...tableConfig,
+              columns: tableConfig.columns.filter(
+                vuuUtils.subscribedOnly(subscribedColumns)
+              )
+            }
+          }));
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        } else {
+          const newConfig = {
+            ...tableConfig,
+            columns: vuuUtils.addColumnToSubscribedColumns(
+              tableConfig.columns,
+              availableColumns,
+              name
+            )
+          };
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
+          const subscribedColumns = newConfig.columns.map((col) => col.name);
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        }
+      } else if (columnItem?.subscribed) {
+        const column = tableConfig.columns.find((col) => col.name === name);
+        if (column) {
+          const newConfig = vuuTable.updateTableConfig(tableConfig, {
+            type: "column-prop",
+            property,
+            column,
+            value
+          });
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
+        }
+      }
+    },
+    [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
+  );
+  const handleChangeColumnLabels = react.useCallback((evt) => {
+    const button = vuuUtils.queryClosest(evt.target, "button");
+    if (button) {
+      const value = parseInt(button.value);
+      const columnFormatHeader = value === 0 ? void 0 : value === 1 ? "capitalize" : "uppercase";
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          columnFormatHeader
+        }
+      }));
+    }
+  }, []);
+  const handleChangeTableAttribute = react.useCallback(
+    (evt) => {
+      const button = vuuUtils.queryClosest(evt.target, "button");
+      if (button) {
+        const { ariaPressed, value } = button;
+        setColumnState((state) => ({
+          ...state,
+          tableConfig: {
+            ...state.tableConfig,
+            [value]: ariaPressed !== "true"
+          }
+        }));
+      }
+    },
+    []
+  );
+  const handleCommitColumnWidth = react.useCallback((_, value) => {
+    if (typeof value === "string") {
+      const columnDefaultWidth = parseInt(value);
+      if (!isNaN(columnDefaultWidth)) {
+        setColumnState((state) => ({
+          ...state,
+          tableConfig: {
+            ...state.tableConfig,
+            columnDefaultWidth
+          }
+        }));
+      }
+    }
+  }, []);
+  vuuUtils.useLayoutEffectSkipFirst(() => {
+    onConfigChange?.(tableConfig);
+  }, [onConfigChange, tableConfig]);
+  const columnLabelsValue = tableConfig.columnFormatHeader === void 0 ? 0 : tableConfig.columnFormatHeader === "capitalize" ? 1 : 2;
+  return {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels: handleChangeColumnLabels,
+    onChangeTableAttribute: handleChangeTableAttribute,
+    onColumnChange: handleColumnChange,
+    onCommitColumnWidth: handleCommitColumnWidth,
+    onReorderColumnItems: handleReorderColumnItems,
+    tableConfig
+  };
+};
+
+var tableSettingsPanelCss = ".vuuTableSettingsPanel {\n    --vuu-svg-text-strikethrough: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M28.3333 9.33334C28.8867 9.33334 29.3333 8.88668 29.3333 8.33334C29.3333 7.78001 28.8867 7.33334 28.3333 7.33334H20.26L22.26 9.33334H23.48L23.1133 10.1867L24.5067 11.58L25.4733 9.33334H28.3333ZM27.6267 16.5867L18.7467 7.70668C18.4867 7.44668 18.0667 7.44668 17.8067 7.70668C17.5467 7.96668 17.5467 8.38668 17.8067 8.64668L21.98 12.82L20.88 15.38C20.62 15.9933 21.0667 16.6667 21.7267 16.6667C22.0933 16.6667 22.4267 16.4467 22.5733 16.1067L23.38 14.22L26.68 17.52C26.94 17.78 27.36 17.78 27.62 17.52C27.8867 17.2667 27.8867 16.8467 27.6267 16.5867Z\"/></svg>');\n    --vuu-svg-text-Tt: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M17.6667 7.66666C17.6667 8.21999 18.1133 8.66666 18.6667 8.66666H21V15.6667C21 16.22 21.4467 16.6667 22 16.6667C22.5533 16.6667 23 16.22 23 15.6667V8.66666H25.3333C25.8867 8.66666 26.3333 8.21999 26.3333 7.66666C26.3333 7.11332 25.8867 6.66666 25.3333 6.66666H18.6667C18.1133 6.66666 17.6667 7.11332 17.6667 7.66666ZM29.3333 9.99999H25.3333C24.78 9.99999 24.3333 10.4467 24.3333 11C24.3333 11.5533 24.78 12 25.3333 12H26.3333V15.6667C26.3333 16.22 26.78 16.6667 27.3333 16.6667C27.8867 16.6667 28.3333 16.22 28.3333 15.6667V12H29.3333C29.8867 12 30.3333 11.5533 30.3333 11C30.3333 10.4467 29.8867 9.99999 29.3333 9.99999Z\" /></svg>');\n    --vuu-svg-text-T: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M19.3333 7.66666C19.3333 8.21999 19.78 8.66666 20.3333 8.66666H23V15.6667C23 16.22 23.4467 16.6667 24 16.6667C24.5533 16.6667 25 16.22 25 15.6667V8.66666H27.6667C28.22 8.66666 28.6667 8.21999 28.6667 7.66666C28.6667 7.11332 28.22 6.66666 27.6667 6.66666H20.3333C19.78 6.66666 19.3333 7.11332 19.3333 7.66666Z\"/></svg>');\n    --vuu-svg-stripes: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"5\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"8\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"11\" width=\"12\" height=\"2\" rx=\"0.3\"/></svg>');\n    --vuu-svg-row-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"3\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"6\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"9\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"12\" width=\"12\" height=\"1\" rx=\"0.3\"/></svg>');\n    --vuu-svg-col-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"3\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 3 14)\"/><rect x=\"6\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 6 14)\"/><rect x=\"9\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 9 14)\"/><rect x=\"12\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 12 14)\"/></svg>');\n\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n    max-width: 254px;\n    padding: 24px 2px 0 2px;\n}\n\n\n.vuuTableSettingsPanel [data-icon=\"text-strikethrough\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-strikethrough);\n}\n.vuuTableSettingsPanel [data-icon=\"text-Tt\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-Tt);\n}\n.vuuTableSettingsPanel [data-icon=\"text-T\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-T);\n}\n.vuuTableSettingsPanel [data-icon=\"col-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-col-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-row-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-striping\"]{\n    --vuu-icon-svg: var(--vuu-svg-stripes);\n}\n\n.vuuTableSettingsPanel-header {\n    border-top: solid 2px var(--vuu-color-gray-30);\n    font-size: 14px;\n    font-weight: 600;\n    padding-top: 24px;\n}\n\n.vuuTableSettingsPanel .vuuColumnList {\n    flex-grow: 1;\n    flex-shrink:  1;\n    flex-basis: 0;\n}\n\n.vuuTableSettingsPanel-calculatedButtonbar {\n    --vuu-icon-size: 16px;\n    --saltButton-height: 24px;\n    --saltButton-width: 24px;\n    align-items: center;\n    display: flex;\n    flex: 0 0 32px;\n    gap: 12px;\n}\n\n\n\n\n\n\n";
+
+const classBase$9 = "vuuTableSettingsPanel";
+const defaultTableSettingsPermissions = {
+  allowColumnLabelCase: true,
+  allowColumnDefaultWidth: true,
+  allowGridSeparators: true,
+  allowReorderColumns: true,
+  allowRemoveColumns: true,
+  allowHideColumns: true,
+  allowCalculatedColumns: true
+};
+const TableSettingsPanel = ({
+  availableColumns,
+  onAddCalculatedColumn,
+  onConfigChange,
+  onDataSourceConfigChange,
+  onNavigateToColumn,
+  tableConfig: tableConfigProp,
+  permissions = defaultTableSettingsPermissions
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-table-settings-panel",
+    css: tableSettingsPanelCss,
+    window: targetWindow
+  });
+  const {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels,
+    onChangeTableAttribute,
+    onReorderColumnItems,
+    onColumnChange,
+    onCommitColumnWidth,
+    tableConfig
+  } = useTableSettings({
+    availableColumns,
+    onConfigChange,
+    onDataSourceConfigChange,
+    tableConfig: tableConfigProp
+  });
+  const {
+    allowColumnLabelCase = true,
+    allowColumnDefaultWidth = true,
+    allowGridSeparators = true,
+    allowCalculatedColumns,
+    ...columnListPermissions
+  } = permissions;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase$9, children: [
+    allowColumnLabelCase || allowColumnDefaultWidth || allowGridSeparators ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase$9}-header`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column Settings" }) }) : null,
+    allowColumnDefaultWidth ? /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Width" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        vuuUiControls.VuuInput,
+        {
+          className: "vuuInput",
+          "data-embedded": true,
+          onCommit: onCommitColumnWidth
+        }
+      )
+    ] }) : null,
+    allowColumnLabelCase ? /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Labels" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        core.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: onChangeColumnLabels,
+          value: columnLabelsValue,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { className: "vuuIconToggleButton", value: 0, children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "text-strikethrough", size: 48 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { className: "vuuIconToggleButton", value: 1, children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "text-Tt", size: 48 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { className: "vuuIconToggleButton", value: 2, children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "text-T", size: 48 }) })
+          ]
+        }
+      )
+    ] }) : null,
+    allowGridSeparators ? /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Grid separators" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.ToggleButton,
+          {
+            selected: tableConfig.zebraStripes ?? false,
+            onChange: onChangeTableAttribute,
+            value: "zebraStripes",
+            children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "row-striping", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.ToggleButton,
+          {
+            selected: tableConfig.rowSeparators ?? false,
+            onChange: onChangeTableAttribute,
+            value: "rowSeparators",
+            children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "row-lines", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.ToggleButton,
+          {
+            selected: tableConfig.columnSeparators ?? false,
+            onChange: onChangeTableAttribute,
+            value: "columnSeparators",
+            children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "col-lines", size: 16 })
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ColumnList,
+      {
+        columnItems,
+        permissions: columnListPermissions,
+        onChange: onColumnChange,
+        onNavigateToColumn,
+        onReorderColumnItems
+      }
+    ),
+    allowCalculatedColumns ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase$9}-calculatedButtonbar`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase$9}-calculatedLabel`, children: "Add calculated column" })
+    ] }) : null
+  ] });
+};
+
+const classBase$8 = "vuuColumnMenu";
+const defaultColumnMenuPermissions = {
+  allowSort: true,
+  allowGroup: true,
+  allowAggregation: true,
+  allowHide: true,
+  allowPin: true,
+  allowColumnSettings: true,
+  allowTableSettings: defaultTableSettingsPermissions
+};
+const ColumnMenu = ({
+  className,
+  column,
+  menuActionHandler: menuActionHandlerProp,
+  menuPermissions: {
+    allowSort,
+    allowGroup,
+    allowAggregation,
+    allowHide,
+    allowPin,
+    allowColumnSettings,
+    allowTableSettings
+  } = defaultColumnMenuPermissions
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-column-menu",
+    css: columnMenuCss,
+    window: targetWindow
+  });
+  const { dataSource, menuActionHandler } = useTableContext(true);
+  const menuActionClickHandler = react.useCallback(
+    (evt) => {
+      const columnMenuActionType = getColumnMenuActionType(evt.target);
+      if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) {
+        return menuActionHandler(columnMenuActionType, column);
+      }
+    },
+    [column, menuActionHandler, menuActionHandlerProp]
+  );
+  const sortMenu = buildSortMenu(
+    column,
+    dataSource,
+    menuActionClickHandler,
+    allowSort
+  );
+  const groupMenu = buildGroupMenu(
+    column,
+    dataSource,
+    menuActionClickHandler,
+    allowGroup
+  );
+  const aggregationMenu = buildAggregationMenuItems(
+    column,
+    dataSource,
+    menuActionClickHandler,
+    allowAggregation
+  );
+  const visibilityMenuItems = buildVisibilityMenuItems(
+    column,
+    menuActionClickHandler,
+    allowHide
+  );
+  const pinMenu = buildPinMenuItems(column, menuActionClickHandler, allowPin);
+  const settingsMenuItems = buildSettingsMenuItems(
+    column,
+    menuActionClickHandler,
+    allowColumnSettings,
+    allowTableSettings
+  );
+  const handleClick = react.useCallback(
+    (evt) => {
+      evt.stopPropagation();
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Menu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      vuuUiControls.IconButton,
+      {
+        appearance: "transparent",
+        className: cx(classBase$8, className),
+        "data-embedded": true,
+        icon: "more-vert",
+        sentiment: "neutral",
+        "aria-label": "Open Column Menu",
+        onClick: handleClick
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(core.MenuPanel, { children: [
+      sortMenu,
+      groupMenu,
+      aggregationMenu,
+      visibilityMenuItems,
+      pinMenu,
+      settingsMenuItems
+    ] })
+  ] });
+};
+
+const { Average, Count, Distinct, High, Low, Sum } = vuuUtils.AggregationType;
+const useColumnActions = ({
+  dataSource,
+  onColumnDisplayAction,
+  onDisplaySettingsAction
+}) => {
+  const handleContextMenuAction = (columnMenuActionType, column) => {
+    if (column && dataSource) {
+      switch (columnMenuActionType) {
+        // 1) DataSource operations ...
+        case "sort-asc":
+          return dataSource.sort = vuuUtils.setSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-dsc":
+          return dataSource.sort = vuuUtils.setSortColumn(dataSource.sort, column, "D"), true;
+        case "remove-sort":
+          return dataSource.sort = { sortDefs: [] }, true;
+        case "sort-add-asc":
+          return dataSource.sort = vuuUtils.addSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-add-dsc":
+          return dataSource.sort = vuuUtils.addSortColumn(dataSource.sort, column, "D"), true;
+        case "group-column":
+          return dataSource.groupBy = vuuUtils.addGroupColumn(dataSource.groupBy ?? [], column), true;
+        case "add-to-group":
+          return dataSource.groupBy = vuuUtils.addGroupColumn(dataSource.groupBy ?? [], column), true;
+        case "remove-group":
+          return dataSource.groupBy = [], true;
+        case "remove-from-group":
+          return dataSource.groupBy = vuuUtils.removeGroupColumn(dataSource.groupBy ?? [], column), true;
+        case "remove-column":
+          return dataSource.columns = dataSource.columns.filter((name) => name !== column.name), true;
+        // case "filter-remove-column": return (dataSource.filter = removeFilterColumn(dataSource.filter, column)), true;
+        // case "remove-filters": return (dataSource.filter = {filter:""}), true;
+        case "agg-avg":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, Average), true;
+        case "agg-high":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, High), true;
+        case "agg-low":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, Low), true;
+        case "agg-count":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, Count), true;
+        case "agg-distinct":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, Distinct), true;
+        case "agg-sum":
+          return dataSource.aggregations = vuuUtils.setAggregations(dataSource.aggregations, column, Sum), true;
+        // 2) Column display options ...
+        case "hide-column":
+          return onColumnDisplayAction?.({ type: "hideColumn", column }), true;
+        case "pin-column-floating":
+          return onColumnDisplayAction?.({ type: "pinColumn", column, pin: "floating" }), true;
+        case "pin-column-left":
+          return onColumnDisplayAction?.({ type: "pinColumn", column, pin: "left" }), true;
+        case "pin-column-right":
+          return onColumnDisplayAction?.({ type: "pinColumn", column, pin: "right" }), true;
+        case "unpin-column":
+          return onColumnDisplayAction?.({ type: "pinColumn", column, pin: false }), true;
+        // 3) Table Admin options ...
+        case "column-settings":
+          return onDisplaySettingsAction?.({ type: "column-settings", column }), true;
+        case "table-settings":
+          return onDisplaySettingsAction?.({ type: "table-settings" }), true;
+        default:
+          vuuUtils.logUnhandledMessage(columnMenuActionType, `[vuu-table-extras] useColumnActions handleContextMenuAction, unhandled columnMenuActionType`);
+      }
+    }
+    return false;
+  };
+  return handleContextMenuAction;
+};
+
+const parser = lr.LRParser.deserialize({
+  version: 14,
+  states: "&xOVQPOOO!fQPO'#C^OVQPO'#CcQ!pQPOOO#bQPO'#CkO#gQPO'#CrOOQO'#Cy'#CyO#lQPO,58}OVQPO,59QOVQPO,59QOOQO'#Cn'#CnOVQPO,59XOVQPO,59VOVQPO'#CtOOQO,59^,59^OOQO1G.i1G.iOOQO1G.l1G.lO$bQPO1G.lO%ZQPO1G.sO!pQPO'#CmO%qQQO1G.qO%|QQO'#C{OOQO'#C{'#C{O&wQPO,59`OVQPO,59ZOVQPO,59[OVQPO7+$]OVQPO'#CuO'RQPO1G.zOOQO1G.z1G.zO'ZQQO'#C^O'eQQO1G.sO'{QQO1G.uOOQO1G.v1G.vO(WQPO<<GwO(_QPO,59aOOQO-E6s-E6sOOQO7+$f7+$fOVQPOAN=cO(iQQO1G.lO(yQPOG22}OOQOLD(iLD(iO)QQPO,59QO)QQPO,59QO)QQPO,59X",
+  stateData: ")n~OlOS~ORUOSUOTUOUUOWQO`SOnPO~OWgXZQX[QX]QX^QXpQXqQXrQXsQXtQXuQXeQX~OjQXXQX~PnOZWO[WO]XO^XOpYOqYOrYOsYOtYOuYO~OW[O~OW]O~OX_O~P!pO]Yi^YipYiqYirYisYitYiuYieYi~OZWO[WOjYiXYi~P#sOpaiqairaisaitaiuaieai~OZWO[WO]XO^XOjaiXai~P$rOejOvhOwiO~OZmX[mX]mX^mXeoXpmXqmXrmXsmXtmXumXvoXwoX~OXmOekO~P!pOXuOekO~OvQXwQX~PnOZzO[zO]{O^{Ovaiwai~P$rOwiOecivci~OevO~P!pOXiaeia~P!pOZzO[zOvYiwYi~P#sOXyO~P!pORUOSUOTUOUUOWQO`SOnnO~O`UTn~",
+  goto: "$epPPqPPPPqPPqPPPPqP!S!g!r!rPq!w#Y#]PPP#cP$[oUOQWXZ[]hijkvz{|hUOQWXZ]jkvz{|Ve[hi[ZRVgrsxR|cVf[hioTOQWXZ[]hijkvz{|R^TQlgRtlQROQVQS`WzQaXQbZUc[hiQg]Qo|QrjQskQw{RxvQd[QphRqi",
+  nodeNames: "\u26A0 ColumnDefinitionExpression Column Number String True False ParenthesizedExpression OpenBrace CloseBrace ArithmeticExpression Divide Times Plus Minus ConditionalExpression If RelationalExpression RelationalOperator AndCondition OrCondition Comma CallExpression Function ArgList",
+  maxTerm: 39,
+  skippedNodes: [0],
+  repeatNodeCount: 1,
+  tokenData: ".^~RnXY#PYZ#P]^#Ppq#Pqr#brs#mxy$eyz$jz{$o{|$t|}$y}!O%O!O!P%T!P!Q%c!Q![%h!^!_%s!_!`&Q!`!a&V!c!}&d#R#S&d#T#U&u#U#Y&d#Y#Z(Y#Z#]&d#]#^*j#^#c&d#c#d+f#d#h&d#h#i,b#i#o&d~#USl~XY#PYZ#P]^#Ppq#P~#eP!_!`#h~#mOu~~#pWOX#mZ]#m^r#mrs$Ys#O#m#P;'S#m;'S;=`$_<%lO#m~$_OS~~$bP;=`<%l#m~$jOW~~$oOX~~$tO[~~$yO]~~%OOe~~%TO^~~%WP!Q![%Z~%`PR~!Q![%Z~%hOZ~~%mQR~!O!P%Z!Q![%h~%xPr~!_!`%{~&QOt~~&VOp~~&[Pq~!_!`&_~&dOs~P&iSnP!Q![&d!c!}&d#R#S&d#T#o&dR&zUnP!Q![&d!c!}&d#R#S&d#T#b&d#b#c'^#c#o&dR'cUnP!Q![&d!c!}&d#R#S&d#T#W&d#W#X'u#X#o&dR'|SvQnP!Q![&d!c!}&d#R#S&d#T#o&d~(_TnP!Q![&d!c!}&d#R#S&d#T#U(n#U#o&d~(sUnP!Q![&d!c!}&d#R#S&d#T#`&d#`#a)V#a#o&d~)[UnP!Q![&d!c!}&d#R#S&d#T#g&d#g#h)n#h#o&d~)sUnP!Q![&d!c!}&d#R#S&d#T#X&d#X#Y*V#Y#o&d~*^SU~nP!Q![&d!c!}&d#R#S&d#T#o&d~*oUnP!Q![&d!c!}&d#R#S&d#T#Y&d#Y#Z+R#Z#o&d~+YS`~nP!Q![&d!c!}&d#R#S&d#T#o&dR+kUnP!Q![&d!c!}&d#R#S&d#T#f&d#f#g+}#g#o&dR,USwQnP!Q![&d!c!}&d#R#S&d#T#o&d~,gUnP!Q![&d!c!}&d#R#S&d#T#f&d#f#g,y#g#o&d~-OUnP!Q![&d!c!}&d#R#S&d#T#i&d#i#j-b#j#o&d~-gUnP!Q![&d!c!}&d#R#S&d#T#X&d#X#Y-y#Y#o&d~.QST~nP!Q![&d!c!}&d#R#S&d#T#o&d",
+  tokenizers: [0, 1],
+  topRules: { "ColumnDefinitionExpression": [0, 1] },
+  tokenPrec: 393
+});
+
+const columnExpressionLanguage = vuuCodemirror.LRLanguage.define({
+  name: "VuuColumnExpression",
+  parser: parser.configure({
+    props: [
+      vuuCodemirror.styleTags({
+        Column: vuuCodemirror.tags.attributeValue,
+        Function: vuuCodemirror.tags.variableName,
+        String: vuuCodemirror.tags.string,
+        Or: vuuCodemirror.tags.emphasis,
+        Operator: vuuCodemirror.tags.operator
+      })
+    ]
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  })
+});
+const columnExpressionLanguageSupport = () => {
+  return new vuuCodemirror.LanguageSupport(
+    columnExpressionLanguage
+  );
+};
+
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _expressions, _op, _expressions2, _expressions3, _op2, _expressions4, _op3, _expressions5, _expression, _callStack;
+class LiteralExpressionImpl {
+  constructor(value) {
+    __publicField(this, "type");
+    __publicField(this, "value");
+    this.value = value;
+    switch (typeof value) {
+      case "boolean":
+        this.type = "booleanLiteralExpression";
+        break;
+      case "number":
+        this.type = "numericLiteralExpression";
+        break;
+      default:
+        this.type = "stringLiteralExpression";
+    }
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      value: this.value
+    };
+  }
+}
+class ColumnExpressionImpl {
+  constructor(columnName) {
+    __publicField(this, "type", "colExpression");
+    __publicField(this, "column");
+    this.column = columnName;
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      column: this.column
+    };
+  }
+}
+class ArithmeticExpressionImpl {
+  constructor(op = "unknown") {
+    __privateAdd(this, _expressions, [
+      { type: "unknown" },
+      { type: "unknown" }
+    ]);
+    __privateAdd(this, _op);
+    __publicField(this, "type", "arithmeticExpression");
+    __privateSet(this, _op, op);
+  }
+  get op() {
+    return __privateGet(this, _op);
+  }
+  set op(op) {
+    __privateSet(this, _op, op);
+  }
+  get expressions() {
+    return __privateGet(this, _expressions);
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      op: __privateGet(this, _op),
+      expressions: __privateGet(this, _expressions)
+    };
+  }
+}
+_expressions = new WeakMap();
+_op = new WeakMap();
+class CallExpressionImpl {
+  constructor(functionName) {
+    __privateAdd(this, _expressions2, []);
+    __publicField(this, "functionName");
+    __publicField(this, "type", "callExpression");
+    this.functionName = functionName;
+  }
+  get expressions() {
+    return __privateGet(this, _expressions2);
+  }
+  get arguments() {
+    return __privateGet(this, _expressions2);
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      functionName: this.functionName,
+      arguments: __privateGet(this, _expressions2).map((e) => e.toJSON?.())
+    };
+  }
+}
+_expressions2 = new WeakMap();
+class RelationalExpressionImpl {
+  constructor() {
+    __privateAdd(this, _expressions3, [
+      { type: "unknown" },
+      { type: "unknown" }
+    ]);
+    __privateAdd(this, _op2, "unknown");
+    __publicField(this, "type", "relationalExpression");
+  }
+  get op() {
+    return __privateGet(this, _op2);
+  }
+  set op(op) {
+    __privateSet(this, _op2, op);
+  }
+  get expressions() {
+    return __privateGet(this, _expressions3);
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      op: __privateGet(this, _op2),
+      expressions: __privateGet(this, _expressions3)
+    };
+  }
+}
+_expressions3 = new WeakMap();
+_op2 = new WeakMap();
+class BooleanConditionImp {
+  constructor(booleanOperator) {
+    __privateAdd(this, _expressions4, [
+      { type: "unknown" },
+      { type: "unknown" }
+    ]);
+    __privateAdd(this, _op3);
+    __publicField(this, "type", "booleanCondition");
+    __privateSet(this, _op3, booleanOperator);
+  }
+  get op() {
+    return __privateGet(this, _op3);
+  }
+  get expressions() {
+    return __privateGet(this, _expressions4);
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      op: __privateGet(this, _op3),
+      expressions: __privateGet(this, _expressions4).map((e) => e.toJSON?.())
+    };
+  }
+}
+_expressions4 = new WeakMap();
+_op3 = new WeakMap();
+class ConditionalExpressionImpl {
+  constructor(booleanOperator) {
+    __privateAdd(this, _expressions5);
+    __publicField(this, "type", "conditionalExpression");
+    __privateSet(this, _expressions5, [
+      booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl(),
+      { type: "unknown" },
+      { type: "unknown" }
+    ]);
+  }
+  get expressions() {
+    return __privateGet(this, _expressions5);
+  }
+  get condition() {
+    return __privateGet(this, _expressions5)[0];
+  }
+  get truthyExpression() {
+    return __privateGet(this, _expressions5)[1];
+  }
+  set truthyExpression(expression) {
+    __privateGet(this, _expressions5)[1] = expression;
+  }
+  get falsyExpression() {
+    return __privateGet(this, _expressions5)[2];
+  }
+  set falsyExpression(expression) {
+    __privateGet(this, _expressions5)[2] = expression;
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      condition: this.condition.toJSON?.(),
+      truthyExpression: this.truthyExpression,
+      falsyExpression: this.falsyExpression?.toJSON?.() ?? this.falsyExpression
+    };
+  }
+}
+_expressions5 = new WeakMap();
+const isUnknown = (e) => e.type === "unknown";
+const isArithmeticExpression = (expression) => expression.type === "arithmeticExpression";
+const isCallExpression = (expression) => expression.type === "callExpression";
+const isConditionalExpression = (expression) => expression.type === "conditionalExpression";
+const isCondition = (expression) => expression.type === "relationalExpression" || expression.type === "booleanCondition";
+const isBooleanCondition = (expression) => expression.type === "booleanCondition";
+const isRelationalExpression = (expression) => expression?.type === "relationalExpression";
+const firstIncompleteExpression = (expression) => {
+  if (isUnknown(expression)) {
+    return expression;
+  } else if (isRelationalExpression(expression)) {
+    const [operand1, operand2] = expression.expressions;
+    if (expressionIsIncomplete(operand1)) {
+      return firstIncompleteExpression(operand1);
+    } else if (expression.op === "unknown") {
+      return expression;
+    } else if (expressionIsIncomplete(operand2)) {
+      return firstIncompleteExpression(operand2);
+    }
+  } else if (isCondition(expression)) {
+    const { expressions = [] } = expression;
+    for (const e of expressions) {
+      if (expressionIsIncomplete(e)) {
+        return firstIncompleteExpression(e);
+      }
+    }
+  } else if (isConditionalExpression(expression)) {
+    const { condition, truthyExpression, falsyExpression } = expression;
+    if (expressionIsIncomplete(condition)) {
+      return firstIncompleteExpression(condition);
+    } else if (expressionIsIncomplete(truthyExpression)) {
+      return firstIncompleteExpression(truthyExpression);
+    } else if (expressionIsIncomplete(falsyExpression)) {
+      return firstIncompleteExpression(falsyExpression);
+    }
+  } else if (isArithmeticExpression(expression)) {
+    const { expressions = [] } = expression;
+    for (const e of expressions) {
+      if (expressionIsIncomplete(e)) {
+        return firstIncompleteExpression(e);
+      }
+    }
+  }
+};
+const replaceUnknownExpression = (incompleteExpression, unknownExpression, expression) => {
+  const { expressions = [] } = incompleteExpression;
+  if (expressions.includes(unknownExpression)) {
+    const pos = expressions.indexOf(unknownExpression);
+    expressions.splice(pos, 1, expression);
+    return true;
+  } else {
+    for (const e of expressions) {
+      if (replaceUnknownExpression(e, unknownExpression, expression)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+const expressionIsIncomplete = (expression) => {
+  if (isUnknown(expression)) {
+    return true;
+  } else if (isConditionalExpression(expression)) {
+    return expressionIsIncomplete(expression.condition) || expressionIsIncomplete(expression.truthyExpression) || expressionIsIncomplete(expression.falsyExpression);
+  } else if (isRelationalExpression(expression) || isBooleanCondition(expression)) {
+    return expression.op === void 0 || expression.expressions.some((e) => expressionIsIncomplete(e));
+  }
+  return false;
+};
+const addExpression = (expression, subExpression) => {
+  const targetExpression = firstIncompleteExpression(expression);
+  if (targetExpression) {
+    if (targetExpression.expressions) {
+      targetExpression.expressions.push(subExpression);
+    } else {
+      console.warn("don't know how to treat targetExpression");
+    }
+  } else {
+    console.error("no target expression found");
+  }
+};
+class ColumnExpression {
+  constructor() {
+    __privateAdd(this, _expression);
+    __privateAdd(this, _callStack, []);
+  }
+  setCondition(booleanOperator) {
+    if (__privateGet(this, _expression) === void 0) {
+      this.addExpression(new ConditionalExpressionImpl(booleanOperator));
+    } else if (isConditionalExpression(__privateGet(this, _expression))) {
+      if (expressionIsIncomplete(__privateGet(this, _expression).condition)) {
+        const condition = booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl();
+        this.addExpression(condition);
+      } else if (isUnknown(__privateGet(this, _expression).truthyExpression)) {
+        __privateGet(this, _expression).truthyExpression = new ConditionalExpressionImpl(
+          booleanOperator
+        );
+      } else if (expressionIsIncomplete(__privateGet(this, _expression).truthyExpression)) {
+        const condition = booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl();
+        this.addExpression(condition);
+      } else if (isUnknown(__privateGet(this, _expression).falsyExpression)) {
+        __privateGet(this, _expression).falsyExpression = new ConditionalExpressionImpl(
+          booleanOperator
+        );
+      } else if (expressionIsIncomplete(__privateGet(this, _expression).falsyExpression)) {
+        const condition = booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl();
+        this.addExpression(condition);
+      }
+    } else {
+      console.error("setCondition called unexpectedly");
+    }
+  }
+  addExpression(expression) {
+    if (__privateGet(this, _callStack).length > 0) {
+      const currentCallExpression = __privateGet(this, _callStack).at(-1);
+      currentCallExpression?.arguments.push(expression);
+    } else if (__privateGet(this, _expression) === void 0) {
+      __privateSet(this, _expression, expression);
+    } else if (isArithmeticExpression(__privateGet(this, _expression))) {
+      const targetExpression = firstIncompleteExpression(__privateGet(this, _expression));
+      if (targetExpression && isUnknown(targetExpression)) {
+        replaceUnknownExpression(
+          __privateGet(this, _expression),
+          targetExpression,
+          expression
+        );
+      }
+    } else if (isConditionalExpression(__privateGet(this, _expression))) {
+      if (expressionIsIncomplete(__privateGet(this, _expression))) {
+        const targetExpression = firstIncompleteExpression(__privateGet(this, _expression));
+        if (targetExpression && isUnknown(targetExpression)) {
+          replaceUnknownExpression(
+            __privateGet(this, _expression),
+            targetExpression,
+            expression
+          );
+        } else if (targetExpression) {
+          addExpression(targetExpression, expression);
+        }
+      }
+    }
+  }
+  setFunction(functionName) {
+    const callExpression = new CallExpressionImpl(functionName);
+    this.addExpression(callExpression);
+    __privateGet(this, _callStack).push(callExpression);
+  }
+  setColumn(columnName) {
+    this.addExpression(new ColumnExpressionImpl(columnName));
+  }
+  setArithmeticOp(value) {
+    const op = value;
+    const expression = __privateGet(this, _expression);
+    if (isArithmeticExpression(expression)) {
+      expression.op = op;
+    }
+  }
+  setRelationalOperator(value) {
+    const op = value;
+    if (__privateGet(this, _expression) && isConditionalExpression(__privateGet(this, _expression))) {
+      const targetExpression = firstIncompleteExpression(__privateGet(this, _expression));
+      if (isRelationalExpression(targetExpression)) {
+        targetExpression.op = op;
+      } else {
+        console.error(`no target expression found (op = ${value})`);
+      }
+    }
+  }
+  setValue(value) {
+    const literalExpression = new LiteralExpressionImpl(value);
+    if (__privateGet(this, _expression) === void 0) {
+      __privateSet(this, _expression, literalExpression);
+    } else if (isArithmeticExpression(__privateGet(this, _expression))) {
+      this.addExpression(literalExpression);
+    } else if (isCallExpression(__privateGet(this, _expression))) {
+      __privateGet(this, _expression).arguments.push(literalExpression);
+    } else if (isConditionalExpression(__privateGet(this, _expression))) {
+      if (expressionIsIncomplete(__privateGet(this, _expression))) {
+        const targetExpression = firstIncompleteExpression(__privateGet(this, _expression));
+        if (targetExpression && isUnknown(targetExpression)) {
+          replaceUnknownExpression(
+            __privateGet(this, _expression),
+            targetExpression,
+            literalExpression
+          );
+        } else if (targetExpression) {
+          addExpression(targetExpression, literalExpression);
+        }
+      } else {
+        console.log("what do we do with value, in a complete expression");
+      }
+    }
+  }
+  closeBrace() {
+    __privateGet(this, _callStack).pop();
+  }
+  get expression() {
+    return __privateGet(this, _expression);
+  }
+  toJSON() {
+    return __privateGet(this, _expression)?.toJSON();
+  }
+}
+_expression = new WeakMap();
+_callStack = new WeakMap();
+const walkTree = (tree, source) => {
+  const columnExpression = new ColumnExpression();
+  const cursor = tree.cursor();
+  do {
+    const { name, from, to } = cursor;
+    switch (name) {
+      case "AndCondition":
+        columnExpression.setCondition("and");
+        break;
+      case "OrCondition":
+        columnExpression.setCondition("or");
+        break;
+      case "RelationalExpression":
+        columnExpression.setCondition();
+        break;
+      case "ArithmeticExpression":
+        columnExpression.addExpression(new ArithmeticExpressionImpl());
+        break;
+      case "Column":
+        {
+          const columnName = source.substring(from, to);
+          columnExpression.setColumn(columnName);
+        }
+        break;
+      case "Function":
+        {
+          const functionName = source.substring(from, to);
+          columnExpression.setFunction(functionName);
+        }
+        break;
+      case "Times":
+      case "Divide":
+      case "Plus":
+      case "Minus":
+        {
+          const op = source.substring(from, to);
+          columnExpression.setArithmeticOp(op);
+        }
+        break;
+      case "RelationalOperator":
+        {
+          const op = source.substring(from, to);
+          columnExpression.setRelationalOperator(op);
+        }
+        break;
+      case "False":
+      case "True":
+        {
+          const value = source.substring(from, to);
+          columnExpression.setValue(value === "true" ? true : false);
+        }
+        break;
+      case "String":
+        columnExpression.setValue(source.substring(from + 1, to - 1));
+        break;
+      case "Number":
+        columnExpression.setValue(parseFloat(source.substring(from, to)));
+        break;
+      case "CloseBrace":
+        columnExpression.closeBrace();
+        break;
+    }
+  } while (cursor.next());
+  return columnExpression.toJSON();
+};
+
+const strictParser = parser.configure({ strict: true });
+const RelationalOperands = ["Number", "String"];
+const ColumnNamedTerms = [
+  ...RelationalOperands,
+  "AndCondition",
+  "ArithmeticExpression",
+  "BooleanOperator",
+  "RelationalOperatorOperator",
+  "CallExpression",
+  "CloseBrace",
+  "Column",
+  "Comma",
+  "ConditionalExpression",
+  "Divide",
+  "Equal",
+  "If",
+  "Minus",
+  "OpenBrace",
+  "OrCondition",
+  "ParenthesizedExpression",
+  "Plus",
+  "RelationalExpression",
+  "RelationalOperator",
+  "Times"
+];
+const isCompleteExpression = (src) => {
+  try {
+    strictParser.parse(src);
+    return true;
+  } catch (err) {
+    return false;
+  }
+};
+const lastNamedChild = (node) => {
+  let { lastChild } = node;
+  while (lastChild && !ColumnNamedTerms.includes(lastChild.name)) {
+    lastChild = lastChild.prevSibling;
+    console.log(lastChild?.name);
+  }
+  return lastChild;
+};
+const isCompleteRelationalExpression = (node) => {
+  if (node?.name === "RelationalExpression") {
+    const { firstChild } = node;
+    const lastChild = lastNamedChild(node);
+    if (firstChild?.name === "Column" && typeof lastChild?.name === "string" && RelationalOperands.includes(lastChild.name)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+const myHighlightStyle = vuuCodemirror.HighlightStyle.define([
+  {
+    tag: vuuCodemirror.tags.attributeValue,
+    color: "var(--vuuFilterEditor-variableColor);font-weight: bold"
+  },
+  { tag: vuuCodemirror.tags.variableName, color: "var(--vuuFilterEditor-variableColor)" },
+  { tag: vuuCodemirror.tags.comment, color: "green", fontStyle: "italic" }
+]);
+const vuuHighlighting = vuuCodemirror.syntaxHighlighting(myHighlightStyle);
+
+const vuuTheme = vuuCodemirror.EditorView.theme(
+  {
+    "&": {
+      border: "solid 1px var(--salt-container-primary-borderColor)",
+      color: "var(--vuuFilterEditor-color)",
+      backgroundColor: "var(--vuuFilterEditor-background)"
+    },
+    ".cm-content": {
+      caretColor: "var(--vuuFilterEditor-cursorColor)"
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--vuuFilterEditor-cursorColor)"
+    },
+    "&.cm-focused .cm-selectionBackground, ::selection": {
+      backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
+    },
+    ".cm-selectionBackground, ::selection": {
+      backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
+    },
+    ".cm-scroller": {
+      fontFamily: "var(--vuuFilterEditor-fontFamily)"
+    },
+    ".cm-completionLabel": {
+      color: "var(--vuu-color-gray-50)"
+    },
+    ".cm-completionMatchedText": {
+      color: "var(--vuu-color-gray-80)",
+      fontWeight: 700,
+      textDecoration: "none"
+    },
+    ".cm-tooltip": {
+      background: "var(--vuuFilterEditor-tooltipBackground)",
+      border: "var(--vuuFilterEditor-tooltipBorder)",
+      borderRadius: "4px",
+      boxShadow: "var(--vuuFilterEditor-tooltipElevation)",
+      "&.cm-tooltip-autocomplete > ul": {
+        fontFamily: "var(--vuuFilterEditor-fontFamily)",
+        fontSize: "var(--vuuFilterEditor-fontSize)",
+        maxHeight: "240px"
+      },
+      "&.cm-tooltip-autocomplete > ul > li": {
+        height: "var(--vuuFilterEditor-suggestion-height)",
+        padding: "0 3px",
+        lineHeight: "var(--vuuFilterEditor-suggestion-height)"
+      },
+      "&.cm-tooltip-autocomplete li[aria-selected]": {
+        background: "var(--vuuFilterEditor-suggestion-selectedBackground)",
+        color: "var(--vuuFilterEditor-suggestion-selectedColor)"
+      },
+      "&.cm-tooltip-autocomplete li .cm-completionDetail": {
+        color: "var(--vuuFilterEditor-suggestion-detailColor)"
+      }
+    }
+  },
+  { dark: false }
+);
+
+const applyPrefix = (completions, prefix) => prefix ? completions.map((completion) => ({
+  ...completion,
+  apply: typeof completion.apply === "function" ? completion.apply : `${prefix}${completion.apply ?? completion.label}`
+})) : completions;
+const isOperator = (node) => node === void 0 ? false : ["Times", "Divide", "Plus", "Minus"].includes(node.name);
+const completionDone = (onSubmit) => ({
+  apply: () => {
+    onSubmit?.();
+  },
+  label: "Done",
+  boost: 10
+});
+const getLastChild = (node, context) => {
+  let { lastChild: childNode } = node;
+  const { pos } = context;
+  while (childNode) {
+    const isBeforeCursor = childNode.from < pos;
+    if (isBeforeCursor && ColumnNamedTerms.includes(childNode.name)) {
+      if (childNode.name === "ParenthesizedExpression") {
+        const expression = childNode.firstChild?.nextSibling;
+        if (expression) {
+          childNode = expression;
+        }
+      }
+      return childNode;
+    } else {
+      childNode = childNode.prevSibling;
+    }
+  }
+};
+const getFunctionName = (node, state) => {
+  if (node.name === "ArgList") {
+    const functionNode = node.prevSibling;
+    if (functionNode) {
+      return vuuCodemirror.getValue(functionNode, state);
+    }
+  } else if (node.name === "OpenBrace") {
+    const maybeFunction = node.parent?.prevSibling;
+    if (maybeFunction?.name === "Function") {
+      return vuuCodemirror.getValue(maybeFunction, state);
+    }
+  }
+};
+const getRelationalOperator = (node, state) => {
+  if (node.name === "RelationalExpression") {
+    const lastNode = lastNamedChild(node);
+    if (lastNode?.name === "RelationalOperator") {
+      return vuuCodemirror.getValue(lastNode, state);
+    }
+  } else {
+    const prevNode = node.prevSibling;
+    if (prevNode?.name === "RelationalOperator") {
+      return vuuCodemirror.getValue(prevNode, state);
+    }
+  }
+};
+const getColumnName = (node, state) => {
+  if (node.name === "RelationalExpression") {
+    if (node.firstChild?.name === "Column") {
+      return vuuCodemirror.getValue(node.firstChild, state);
+    }
+  } else {
+    const prevNode = node.prevSibling;
+    if (prevNode?.name === "Column") {
+      return vuuCodemirror.getValue(prevNode, state);
+    } else if (prevNode?.name === "RelationalOperator") {
+      return getColumnName(prevNode, state);
+    }
+  }
+};
+const makeSuggestions = async (context, suggestionProvider, suggestionType, optionalArgs = {}) => {
+  const options = await suggestionProvider.getSuggestions(
+    suggestionType,
+    optionalArgs
+  );
+  const { startsWith = "" } = optionalArgs;
+  return { from: context.pos - startsWith.length, options };
+};
+const handleConditionalExpression = (node, context, suggestionProvider, maybeComplete, onSubmit) => {
+  const lastChild = getLastChild(node, context);
+  switch (lastChild?.name) {
+    case "If":
+      return makeSuggestions(context, suggestionProvider, "expression", {
+        prefix: "( "
+      });
+    case "OpenBrace":
+      return makeSuggestions(context, suggestionProvider, "expression");
+    case "Condition":
+      return makeSuggestions(context, suggestionProvider, "expression", {
+        prefix: ", "
+      });
+    case "CloseBrace":
+      if (maybeComplete) {
+        const options = [completionDone(onSubmit)];
+        return { from: context.pos, options };
+      }
+  }
+};
+const promptToSave = (context, onSubmit) => {
+  const options = [completionDone(onSubmit)];
+  return { from: context.pos, options };
+};
+const useColumnAutoComplete = (suggestionProvider, onSubmit) => {
+  const makeSuggestions2 = react.useCallback(
+    async (context, suggestionType, optionalArgs = {}) => {
+      const options = await suggestionProvider.getSuggestions(
+        suggestionType,
+        optionalArgs
+      );
+      const { startsWith = "" } = optionalArgs;
+      return { from: context.pos - startsWith.length, options };
+    },
+    [suggestionProvider]
+  );
+  return react.useCallback(
+    async (context) => {
+      const { state, pos } = context;
+      const word = context.matchBefore(/\w*/) ?? {
+        from: 0,
+        to: 0,
+        text: void 0
+      };
+      const tree = vuuCodemirror.syntaxTree(state);
+      const nodeBefore = tree.resolveInner(pos, -1);
+      const text = state.doc.toString();
+      const maybeComplete = isCompleteExpression(text);
+      switch (nodeBefore.name) {
+        case "If": {
+          return makeSuggestions2(context, "expression", { prefix: "( " });
+        }
+        case "Condition":
+          {
+            const lastChild = getLastChild(nodeBefore, context);
+            if (lastChild?.name === "Column") {
+              const prevChild = vuuCodemirror.getPreviousNode(lastChild);
+              if (prevChild?.name !== "RelationalOperator") {
+                return makeSuggestions2(context, "condition-operator", {
+                  columnName: vuuCodemirror.getValue(lastChild, state)
+                });
+              }
+            } else if (lastChild?.name === "RelationalOperator") {
+              return makeSuggestions2(context, "expression");
+            }
+          }
+          break;
+        case "ConditionalExpression":
+          return handleConditionalExpression(
+            nodeBefore,
+            context,
+            suggestionProvider
+          );
+        case "RelationalExpression":
+          {
+            if (isCompleteRelationalExpression(nodeBefore)) {
+              return {
+                from: context.pos,
+                options: vuuCodemirror.booleanJoinSuggestions.concat({
+                  label: ", <truthy expression>, <falsy expression>",
+                  apply: ", "
+                })
+              };
+            } else {
+              const operator = getRelationalOperator(nodeBefore, state);
+              const columnName = getColumnName(nodeBefore, state);
+              if (!operator) {
+                const options = await suggestionProvider.getSuggestions(
+                  "condition-operator",
+                  {
+                    columnName
+                  }
+                );
+                return { from: context.pos, options };
+              } else {
+                return makeSuggestions2(context, "expression");
+              }
+            }
+          }
+        case "RelationalOperator":
+          return makeSuggestions2(context, "expression");
+        case "String":
+          {
+            const operator = getRelationalOperator(
+              nodeBefore,
+              state
+            );
+            const columnName = getColumnName(nodeBefore, state);
+            const { from, to } = nodeBefore;
+            if (to - from === 2 && context.pos === from + 1) {
+              if (columnName && operator) {
+                return makeSuggestions2(context, "columnValue", {
+                  columnName,
+                  operator,
+                  startsWith: word.text
+                });
+              }
+            } else if (to - from > 2 && context.pos === to) {
+              return makeSuggestions2(context, "expression", {
+                prefix: ", "
+              });
+            }
+          }
+          break;
+        case "ArithmeticExpression":
+          {
+            const lastChild = getLastChild(nodeBefore, context);
+            if (lastChild?.name === "Column") {
+              return makeSuggestions2(context, "expression");
+            } else if (isOperator(lastChild)) {
+              const operator = lastChild.name;
+              return makeSuggestions2(context, "column", { operator });
+            }
+          }
+          break;
+        case "OpenBrace":
+          {
+            const functionName = getFunctionName(nodeBefore, state);
+            return makeSuggestions2(context, "expression", { functionName });
+          }
+        case "ArgList": {
+          const functionName = getFunctionName(nodeBefore, state);
+          const lastArgument = getLastChild(nodeBefore, context);
+          const prefix = lastArgument?.name === "OpenBrace" || lastArgument?.name === "Comma" ? void 0 : ",";
+          let options = await suggestionProvider.getSuggestions("expression", {
+            functionName
+          });
+          options = prefix ? applyPrefix(options, ", ") : options;
+          if (lastArgument?.name !== "OpenBrace" && lastArgument?.name !== "Comma") {
+            options = [
+              {
+                apply: ") ",
+                boost: 10,
+                label: "Done - no more arguments"
+              }
+            ].concat(options);
+          }
+          return { from: context.pos, options };
+        }
+        case "Equal":
+          if (text.trim() === "=") {
+            return makeSuggestions2(context, "expression");
+          }
+          break;
+        case "ParenthesizedExpression":
+        case "ColumnDefinitionExpression":
+          if (context.pos === 0) {
+            return makeSuggestions2(context, "expression");
+          } else {
+            const lastChild = getLastChild(nodeBefore, context);
+            if (lastChild?.name === "Column") {
+              if (maybeComplete) {
+                const options = [
+                  completionDone(onSubmit.current)
+                ];
+                const columnName = vuuCodemirror.getValue(lastChild, state);
+                const columnOptions = await suggestionProvider.getSuggestions("operator", {
+                  columnName
+                });
+                return {
+                  from: context.pos,
+                  options: options.concat(columnOptions)
+                };
+              }
+            } else if (lastChild?.name === "CallExpression") {
+              if (maybeComplete) {
+                return {
+                  from: context.pos,
+                  options: [completionDone(onSubmit.current)]
+                };
+              }
+            } else if (lastChild?.name === "ArithmeticExpression") {
+              if (maybeComplete) {
+                let options = [completionDone(onSubmit.current)];
+                const lastExpressionChild = getLastChild(lastChild, context);
+                if (lastExpressionChild?.name === "Column") {
+                  const columnName = vuuCodemirror.getValue(lastExpressionChild, state);
+                  const suggestions = await suggestionProvider.getSuggestions(
+                    "operator",
+                    { columnName }
+                  );
+                  options = options.concat(suggestions);
+                }
+                return {
+                  from: context.pos,
+                  options
+                };
+              }
+            } else if (lastChild?.name === "ConditionalExpression") {
+              return handleConditionalExpression(
+                lastChild,
+                context,
+                suggestionProvider,
+                maybeComplete,
+                onSubmit.current
+              );
+            }
+            break;
+          }
+        case "Column":
+          {
+            const isPartialMatch = await suggestionProvider.isPartialMatch(
+              "expression",
+              void 0,
+              word.text
+            );
+            if (isPartialMatch) {
+              return makeSuggestions2(context, "expression", {
+                startsWith: word.text
+              });
+            }
+          }
+          break;
+        case "Comma":
+          {
+            const parentNode = vuuCodemirror.getNamedParentNode(nodeBefore);
+            if (parentNode?.name === "ConditionalExpression") {
+              return makeSuggestions2(context, "expression");
+            }
+          }
+          break;
+        case "CloseBrace":
+          {
+            const parentNode = vuuCodemirror.getNamedParentNode(nodeBefore);
+            if (parentNode?.name === "ConditionalExpression") {
+              return handleConditionalExpression(
+                parentNode,
+                context,
+                suggestionProvider,
+                maybeComplete,
+                onSubmit.current
+              );
+            } else if (parentNode?.name === "ArgList") {
+              if (maybeComplete) {
+                return promptToSave(context, onSubmit.current);
+              }
+            }
+          }
+          break;
+        default: {
+          if (nodeBefore?.prevSibling?.name === "FilterClause") {
+            console.log("looks like we ight be a or|and operator");
+          }
+        }
+      }
+    },
+    [makeSuggestions2, onSubmit, suggestionProvider]
+  );
+};
+
+const getView = (ref) => {
+  if (ref.current == void 0) {
+    throw Error("EditorView not defined");
+  }
+  return ref.current;
+};
+const getOptionClass = () => {
+  return "vuuSuggestion";
+};
+const noop = () => console.log("noooop");
+const hasExpressionType = (completion) => "expressionType" in completion;
+const injectOptionContent = (completion) => {
+  if (hasExpressionType(completion)) {
+    const div = vuuUtils.createEl("div", "expression-type-container");
+    const span = vuuUtils.createEl("span", "expression-type", completion.expressionType);
+    div.appendChild(span);
+    return div;
+  } else {
+    return null;
+  }
+};
+const useColumnExpressionEditor = ({
+  onChange,
+  onSubmitExpression,
+  source,
+  suggestionProvider
+}) => {
+  const editorRef = react.useRef(null);
+  const onSubmitRef = react.useRef(noop);
+  const viewRef = react.useRef(void 0);
+  const completionFn = useColumnAutoComplete(suggestionProvider, onSubmitRef);
+  const [createState, clearInput, submit] = react.useMemo(() => {
+    const parseExpression = () => {
+      const view = getView(viewRef);
+      const source2 = view.state.doc.toString();
+      const tree = vuuCodemirror.ensureSyntaxTree(view.state, view.state.doc.length, 5e3);
+      if (tree) {
+        const expression = walkTree(tree, source2);
+        return [source2, expression];
+      } else {
+        return ["", void 0];
+      }
+    };
+    const clearInput2 = () => {
+      getView(viewRef).setState(createState2());
+    };
+    const submitExpression = () => {
+      const [source2, expression] = parseExpression();
+      onSubmitExpression?.(source2, expression);
+    };
+    const showSuggestions = (key) => {
+      return vuuCodemirror.keymap.of([
+        {
+          key,
+          run() {
+            vuuCodemirror.startCompletion(getView(viewRef));
+            return true;
+          }
+        }
+      ]);
+    };
+    const createState2 = () => vuuCodemirror.EditorState.create({
+      doc: source,
+      extensions: [
+        vuuCodemirror.minimalSetup,
+        vuuCodemirror.autocompletion({
+          addToOptions: [
+            {
+              render: injectOptionContent,
+              position: 70
+            }
+          ],
+          override: [completionFn],
+          optionClass: getOptionClass
+        }),
+        columnExpressionLanguageSupport(),
+        vuuCodemirror.keymap.of(vuuCodemirror.defaultKeymap),
+        showSuggestions("ArrowDown"),
+        vuuCodemirror.EditorView.updateListener.of((v) => {
+          const view = getView(viewRef);
+          if (v.docChanged) {
+            vuuCodemirror.startCompletion(view);
+            const source2 = view.state.doc.toString();
+            onChange?.(source2);
+          }
+        }),
+        // Enforces single line view
+        vuuCodemirror.EditorState.transactionFilter.of(
+          (tr) => tr.newDoc.lines > 1 ? [] : tr
+        ),
+        vuuTheme,
+        vuuHighlighting
+      ]
+    });
+    onSubmitRef.current = () => {
+      submitExpression();
+    };
+    return [createState2, clearInput2, submitExpression];
+  }, [completionFn, onChange, onSubmitExpression, source]);
+  react.useEffect(() => {
+    if (!editorRef.current) {
+      throw Error("editor not in dom");
+    }
+    viewRef.current = new vuuCodemirror.EditorView({
+      state: createState(),
+      parent: editorRef.current
+    });
+    return () => {
+      viewRef.current?.destroy();
+    };
+  }, [completionFn, createState]);
+  const handleBlur = react.useCallback(() => {
+    submit();
+  }, [submit]);
+  return { editorRef, clearInput, onBlur: handleBlur };
+};
+
+var colummExpressionInputCss = "\n.vuuColumnExpressionInput {\n    --vuuFilterEditor-background: var(--salt-container-primary-background);\n    --vuuFilterEditor-color: var(--salt-content-primary-foreground);\n    --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);\n    --vuuFilterEditor-fontSize: var(--salt-text-fontSize);\n    --vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground);\n    --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);\n    --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);\n    --vuuFilterEditor-tooltipBorder: solid 1px var(--vuu-color-purple-10); \n    --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n    --vuuFilterEditor-suggestion-selectedBackground: var(--vuu-color-gray-10);\n    --vuuFilterEditor-suggestion-selectedColor: var(--salt-content-primary-foreground);\n    --vuuFilterEditor-suggestion-detailColor: var(--salt-content-secondary-foreground-disabled);\n    --vuuFilterEditor-suggestion-height: 24px;\n    --vuuFilterEditor-variableColor: var(--vuu-color-purple-10);\n\n    align-items: center;\n    box-sizing: border-box;\n    height: 30px;\n}\n\n.vuuColumnExpressionInput-FilterButton,\n.vuuColumnExpressionInput-ClearButton {\n    --vuu-icon-size: 12px;\n    --saltButton-width: 28px;\n}\n\n.expression-type-container {\n    margin: 0 3px 0 auto;\n    color: var(--salt-content-secondary-foreground)\n}\n\n.expression-kind {\n    display: inline-block;\n    width: 50px;\n}\n\n.expression-type {\n    display: inline-block;\n    text-align: right;\n    width: 50px;\n}\n\n.vuuSuggestion {\n    display: flex;\n    align-items: center;\n}\n\n.vuuFunctionDoc {\n    padding: 13px 7px;\n}\n\n.vuuFunctionDoc .function-heading {\n    display: flex;\n    gap: 3px;\n}\n\n.vuuFunctionDoc .function-name {\n    font-weight: 700;\n    text-transform: capitalize;\n}\n\n.vuuFunctionDoc .param-list {\n    color: var(--vuu-color-gray-50);\n    white-space: pre;\n}\n\n.vuuFunctionDoc .function-type {\n    color: var(--vuu-color-gray-50);\n    font-weight: 700;\n    margin-left: auto;\n    text-transform: capitalize;\n}\n\n.vuuFunctionDoc .example-container {\n    background-color: var(--vuu-color-gray-03);\n    margin: 6px 0;\n    padding: 3px;\n}\n\n.vuuFunctionDoc .example-expression {\n    color: var(--vuu-color-gray-80);\n    font-family: var(--salt-typography-fontFamily-code);\n    font-weight: 500;\n    padding: 8px;\n}\n\n.vuuFunctionDoc .example-result {\n    margin-left: 8px;\n    margin-top: 6px;\n}";
+
+const classBase$7 = "vuuColumnExpressionInput";
+const ColumnExpressionInput = react.memo(
+  ({
+    onChange,
+    onSubmitExpression,
+    source = "",
+    suggestionProvider
+  }) => {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "vuu-column-expression-input",
+      css: colummExpressionInputCss,
+      window: targetWindow
+    });
+    const { editorRef, onBlur } = useColumnExpressionEditor({
+      onChange,
+      onSubmitExpression,
+      source,
+      suggestionProvider
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase$7}`, onBlur, ref: editorRef });
+  },
+  (prevProps, newProps) => {
+    return prevProps.source === newProps.source;
+  }
+);
+ColumnExpressionInput.displayName = "ColumnExpressionInput";
+
+const columnFunctionDescriptors = [
+  /**
+   * and
+   */
+  {
+    accepts: ["boolean"],
+    description: "Applies boolean and operator across supplied parameters to returns a single boolean result",
+    example: {
+      expression: 'and(ccy="EUR",quantity=0)',
+      result: "true | false"
+    },
+    name: "and",
+    params: {
+      description: "( boolean, [ boolean* ] )"
+    },
+    type: "boolean"
+  },
+  /**
+   * concatenate()
+   */
+  {
+    accepts: "string",
+    description: "Returns multiple string values as a single joined string. Arguments may be string literal values, string columns or other string expressions. Non string arguments may also be included, these will be converted to strings.",
+    example: {
+      expression: 'concatenate("example", "-test")',
+      result: '"example-test"'
+    },
+    name: "concatenate",
+    params: {
+      description: "( string, string, [ string* ] )"
+    },
+    type: "string"
+  },
+  /**
+   * contains()
+   */
+  {
+    accepts: ["string", "string"],
+    description: "Tests a string value to determine whether it contains a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> contains one or more occurrences of <target subscring>",
+    example: {
+      expression: 'contains("Royal Bank of Scotland", "bank")',
+      result: "true"
+    },
+    name: "contains",
+    params: {
+      description: "( string )"
+    },
+    type: "boolean"
+  },
+  /**
+   * left()
+   */
+  {
+    accepts: ["string", "number"],
+    description: "Returns the leftmost <number> characters from <string>. First argument may be a string literal, string column or other string expression.",
+    example: {
+      expression: 'left("USD Benchmark Report", 3)',
+      result: '"USD"'
+    },
+    name: "left",
+    params: {
+      count: 2,
+      description: "( string, number )"
+    },
+    type: "string"
+  },
+  /**
+   * len()
+   */
+  {
+    accepts: "string",
+    description: "Returns the number of characters in <string>. Argument may be a string literal, string column or other string expression.",
+    example: {
+      expression: 'len("example")',
+      result: "7"
+    },
+    name: "len",
+    params: {
+      description: "(string)"
+    },
+    type: "number"
+  },
+  /**
+   * lower()
+   */
+  {
+    accepts: "string",
+    description: "Convert a string value to lowercase. Argument may be a string column or other string expression.",
+    example: {
+      expression: 'lower("examPLE")',
+      result: '"example"'
+    },
+    name: "lower",
+    params: {
+      description: "( string )"
+    },
+    type: "string"
+  },
+  /**
+   * or
+   */
+  {
+    accepts: ["boolean"],
+    description: "Applies boolean or operator across supplied parameters to returns a single boolean result",
+    example: {
+      expression: 'or(status="cancelled",quantity=0)',
+      result: "true | false"
+    },
+    name: "or",
+    params: {
+      description: "( boolean, [ boolean* ] )"
+    },
+    type: "boolean"
+  },
+  /**
+   * upper()
+   */
+  {
+    accepts: "string",
+    description: "Convert a string value to uppercase. Argument may be a string column or other string expression.",
+    example: {
+      expression: 'upper("example")',
+      result: '"EXAMPLE"'
+    },
+    name: "upper",
+    params: {
+      description: "( string )"
+    },
+    type: "string"
+  },
+  /**
+   * right()
+   */
+  {
+    accepts: ["string", "number"],
+    description: "Returns the rightmost <number> characters from <string>. First argument may be a string literal, string column or other string expression.",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "right",
+    params: {
+      description: "( string )"
+    },
+    type: "string"
+  },
+  /**
+   * replace()
+   */
+  {
+    accepts: ["string", "string", "string"],
+    description: "Replace characters within a string. Accepts three arguments: source text, text to replace and replacement text. Returns a copy of <source text> with any occurrences of <text to replace> replaced by <replacement text>",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "replace",
+    params: {
+      description: "( string )"
+    },
+    type: "string"
+  },
+  /**
+   * text()
+   */
+  {
+    accepts: "number",
+    description: "Converts a number to a string.",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "text",
+    params: {
+      description: "( string )"
+    },
+    type: "string"
+  },
+  /**
+   * starts()
+   */
+  {
+    accepts: "string",
+    description: "Tests a string value to determine whether it starts with a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> starts with <target subscring>.",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "starts",
+    params: {
+      description: "( string )"
+    },
+    type: "boolean"
+  },
+  /**
+   * starts()
+   */
+  {
+    accepts: "string",
+    description: "Tests a string value to determine whether it ends with a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> ends with <target subscring>.",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "ends",
+    params: {
+      description: "( string )"
+    },
+    type: "boolean"
+  },
+  {
+    accepts: "number",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "min",
+    params: {
+      description: "( string )"
+    },
+    type: "number"
+  },
+  {
+    accepts: "number",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "max",
+    params: {
+      description: "( string )"
+    },
+    type: "number"
+  },
+  {
+    accepts: "number",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "sum",
+    params: {
+      description: "( string )"
+    },
+    type: "number"
+  },
+  {
+    accepts: "number",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "round",
+    params: {
+      description: "( string )"
+    },
+    type: "number"
+  },
+  {
+    accepts: "any",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "or",
+    params: {
+      description: "( string )"
+    },
+    type: "boolean"
+  },
+  {
+    accepts: "any",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "and",
+    params: {
+      description: "( string )"
+    },
+    type: "boolean"
+  },
+  {
+    accepts: "any",
+    description: "Return one of two possible result values, depending on the evaluation of a filter expression. If <filterExpression> resolves to true, result is <expression1>, otherwise <expression2>. ",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "if",
+    params: {
+      description: "( filterExpression, expression1, expression 2)"
+    },
+    type: "variable"
+  }
+];
+
+const functionDocInfo = ({
+  name,
+  description,
+  example,
+  params,
+  type
+}) => {
+  const rootElement = vuuUtils.createEl("div", "vuuFunctionDoc");
+  const headingElement = vuuUtils.createEl("div", "function-heading");
+  const nameElement = vuuUtils.createEl("span", "function-name", name);
+  const paramElement = vuuUtils.createEl("span", "param-list", params.description);
+  const typeElement = vuuUtils.createEl("span", "function-type", type);
+  headingElement.appendChild(nameElement);
+  headingElement.appendChild(paramElement);
+  headingElement.appendChild(typeElement);
+  const child2 = vuuUtils.createEl("p", void 0, description);
+  rootElement.appendChild(headingElement);
+  rootElement.appendChild(child2);
+  if (example) {
+    const exampleElement = vuuUtils.createEl("div", "example-container");
+    const expressionElement = vuuUtils.createEl(
+      "div",
+      "example-expression",
+      example.expression
+    );
+    const resultElement = vuuUtils.createEl("div", "example-result", example.result);
+    exampleElement.appendChild(expressionElement);
+    rootElement.appendChild(exampleElement);
+    rootElement.appendChild(resultElement);
+  }
+  return rootElement;
+};
+
+const NO_OPERATORS = [];
+const withApplySpace = (suggestions) => suggestions.map((suggestion) => ({
+  ...suggestion,
+  apply: (suggestion.apply ?? suggestion.label) + " "
+}));
+const getValidColumns = (columns, { functionName, operator }) => {
+  if (operator) {
+    return columns.filter(vuuUtils.isNumericColumn);
+  } else if (functionName) {
+    const fn = columnFunctionDescriptors.find((f) => f.name === functionName);
+    if (fn) {
+      switch (fn.accepts) {
+        case "string":
+          return columns.filter(vuuUtils.isTextColumn);
+        case "number":
+          return columns.filter(vuuUtils.isNumericColumn);
+        default:
+          return columns;
+      }
+    }
+  }
+  return columns;
+};
+const getColumns = (columns, options) => {
+  const validColumns = getValidColumns(columns, options);
+  return validColumns.map((column) => {
+    const label = column.label ?? column.name;
+    return {
+      apply: options.prefix ? `${options.prefix}${column.name}` : column.name,
+      label,
+      boost: 5,
+      type: "column",
+      expressionType: column.serverDataType
+    };
+  });
+};
+const arithmeticOperators = [
+  { apply: "* ", boost: 2, label: "*", type: "operator" },
+  { apply: "/ ", boost: 2, label: "/", type: "operator" },
+  { apply: "+ ", boost: 2, label: "+", type: "operator" },
+  { apply: "- ", boost: 2, label: "-", type: "operator" }
+];
+const getOperators = (column) => {
+  if (column === void 0 || vuuUtils.isNumericColumn(column)) {
+    return arithmeticOperators;
+  } else {
+    return NO_OPERATORS;
+  }
+};
+const getConditionOperators = (column) => {
+  switch (column.serverDataType) {
+    case "string":
+    case "char":
+      return withApplySpace(
+        vuuCodemirror.stringOperators
+        /*, startsWith*/
+      );
+    case "int":
+    case "long":
+    case "double":
+      return withApplySpace(vuuCodemirror.numericOperators);
+  }
+};
+const toFunctionCompletion = (functionDescriptor) => ({
+  apply: `${functionDescriptor.name}( `,
+  boost: 2,
+  expressionType: functionDescriptor.type,
+  info: () => functionDocInfo(functionDescriptor),
+  label: functionDescriptor.name,
+  type: "function"
+});
+const getAcceptedTypes = (fn) => {
+  if (fn) {
+    if (typeof fn.accepts === "string") {
+      return fn.accepts;
+    } else if (Array.isArray(fn.accepts)) {
+      if (fn.accepts.every((s) => s === "string")) {
+        return "string";
+      } else {
+        return "any";
+      }
+    }
+  }
+  return "any";
+};
+const functions = columnFunctionDescriptors.map(toFunctionCompletion);
+const getFunctions = ({ functionName }) => {
+  if (functionName) {
+    const fn = columnFunctionDescriptors.find((f) => f.name === functionName);
+    const acceptedTypes = getAcceptedTypes(fn);
+    if (fn) {
+      switch (acceptedTypes) {
+        case "string":
+          return columnFunctionDescriptors.filter((f) => f.type === "string" || f.type === "variable").map(toFunctionCompletion);
+        case "number":
+          return columnFunctionDescriptors.filter((f) => f.type === "number" || f.type === "variable").map(toFunctionCompletion);
+      }
+    }
+  }
+  return functions;
+};
+const NONE = {};
+const useColumnExpressionSuggestionProvider = ({
+  columns,
+  table
+}) => {
+  const findColumn = react.useCallback(
+    (name) => name ? columns.find((col) => col.name === name) : void 0,
+    [columns]
+  );
+  const latestSuggestionsRef = react.useRef(void 0);
+  const getTypeaheadSuggestions = vuuDataReact.useTypeaheadSuggestions();
+  const getSuggestions = react.useCallback(
+    async (suggestionType, options = NONE) => {
+      const { columnName, functionName, operator, prefix } = options;
+      switch (suggestionType) {
+        case "expression": {
+          const suggestions = await withApplySpace(
+            getColumns(columns, { functionName, prefix })
+          ).concat(getFunctions(options));
+          return latestSuggestionsRef.current = suggestions;
+        }
+        case "column": {
+          const suggestions = await getColumns(columns, options);
+          return latestSuggestionsRef.current = withApplySpace(suggestions);
+        }
+        case "operator": {
+          const suggestions = await getOperators(findColumn(columnName));
+          return latestSuggestionsRef.current = withApplySpace(suggestions);
+        }
+        case "relational-operator": {
+          const suggestions = await vuuCodemirror.getRelationalOperators(
+            findColumn(columnName)
+          );
+          return latestSuggestionsRef.current = withApplySpace(suggestions);
+        }
+        case "condition-operator":
+          {
+            const column = findColumn(columnName);
+            if (column) {
+              const suggestions = await getConditionOperators(column);
+              if (suggestions) {
+                return latestSuggestionsRef.current = withApplySpace(suggestions);
+              }
+            }
+          }
+          break;
+        case "columnValue":
+          if (columnName && operator) {
+            const params = vuuDataReact.getTypeaheadParams(
+              table,
+              columnName
+            );
+            const suggestions = await getTypeaheadSuggestions(params);
+            if (suggestions) {
+              latestSuggestionsRef.current = vuuCodemirror.toSuggestions(suggestions, {
+                suffix: ""
+              });
+              latestSuggestionsRef.current.forEach((suggestion) => {
+                suggestion.apply = (view, completion, from) => {
+                  const annotation = new vuuCodemirror.AnnotationType();
+                  const cursorPos = from + completion.label.length + 1;
+                  view.dispatch({
+                    changes: { from, insert: completion.label },
+                    selection: { anchor: cursorPos, head: cursorPos },
+                    annotations: annotation.of(completion)
+                  });
+                };
+              });
+            }
+            return latestSuggestionsRef.current || [];
+          }
+          break;
+      }
+      return [];
+    },
+    [columns, findColumn, getTypeaheadSuggestions, table]
+  );
+  const isPartialMatch = react.useCallback(
+    async (valueType, columnName, pattern) => {
+      const { current: latestSuggestions } = latestSuggestionsRef;
+      let maybe = false;
+      const suggestions = latestSuggestions || await getSuggestions(valueType, { columnName });
+      if (pattern && suggestions) {
+        for (const option of suggestions) {
+          if (option.label === pattern) {
+            return false;
+          } else if (option.label.startsWith(pattern)) {
+            maybe = true;
+          }
+        }
+      }
+      return maybe;
+    },
+    [getSuggestions]
+  );
+  return {
+    getSuggestions,
+    isPartialMatch
+  };
+};
+
+const applyDefaults = (column) => {
+  const { name, expression, serverDataType } = vuuUtils.getCalculatedColumnDetails(column);
+  if (serverDataType === void 0) {
+    return {
+      ...column,
+      name: `${name}:string:${expression}`
+    };
+  } else {
+    return column;
+  }
+};
+const useColumnExpression = ({
+  column: columnProp,
+  onChangeName: onChangeNameProp,
+  onChangeServerDataType: onChangeServerDataTypeProp
+}) => {
+  const [column, _setColumn] = react.useState(
+    applyDefaults(columnProp)
+  );
+  const columnRef = react.useRef(columnProp);
+  const setColumn = react.useCallback((column2) => {
+    columnRef.current = column2;
+    _setColumn(column2);
+  }, []);
+  const onChangeName = react.useCallback(
+    (evt) => {
+      const { value } = evt.target;
+      const newColumn = vuuUtils.setCalculatedColumnName(column, value);
+      setColumn(newColumn);
+      onChangeNameProp?.(newColumn.name);
+    },
+    [column, onChangeNameProp, setColumn]
+  );
+  const onChangeExpression = react.useCallback(
+    (value) => {
+      const expression = value.trim();
+      const { current: column2 } = columnRef;
+      const newColumn = vuuUtils.setCalculatedColumnExpression(column2, expression);
+      setColumn(newColumn);
+      onChangeNameProp?.(newColumn.name);
+    },
+    [onChangeNameProp, setColumn]
+  );
+  const onChangeServerDataType = react.useCallback(
+    (_e, [serverDataType]) => {
+      if (vuuUtils.isVuuColumnDataType(serverDataType)) {
+        const newColumn = vuuUtils.setCalculatedColumnType(column, serverDataType);
+        setColumn(newColumn);
+        onChangeNameProp?.(newColumn.name);
+        onChangeServerDataTypeProp?.(serverDataType);
+      }
+    },
+    [column, onChangeNameProp, onChangeServerDataTypeProp, setColumn]
+  );
+  return {
+    column,
+    onChangeExpression,
+    onChangeName,
+    onChangeServerDataType
+  };
+};
+
+const classBase$6 = "vuuColumnExpressionPanel";
+const ColumnExpressionPanel = ({
+  column: columnProp,
+  onChangeName: onChangeNameProp,
+  onChangeServerDataType: onChangeServerDataTypeProp,
+  tableConfig,
+  vuuTable
+}) => {
+  const typeRef = react.useRef(null);
+  const { column, onChangeExpression, onChangeName, onChangeServerDataType } = useColumnExpression({
+    column: columnProp,
+    onChangeName: onChangeNameProp,
+    onChangeServerDataType: onChangeServerDataTypeProp
+  });
+  const initialExpressionRef = react.useRef(
+    vuuUtils.getCalculatedColumnDetails(column).expression ?? ""
+  );
+  const suggestionProvider = useColumnExpressionSuggestionProvider({
+    columns: tableConfig.columns,
+    table: vuuTable
+  });
+  const handleSubmitExpression = react.useCallback(() => {
+    if (typeRef.current) {
+      typeRef.current?.querySelector("button")?.focus();
+    }
+  }, []);
+  const { name, serverDataType } = vuuUtils.getCalculatedColumnDetails(column);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase$6, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuColumnSettingsPanel-header", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Calculation" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-name", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Name" }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Input, { className: "vuuInput", onChange: onChangeName, value: name })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-expression", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Expression" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ColumnExpressionInput,
+        {
+          onChange: onChangeExpression,
+          onSubmitExpression: handleSubmitExpression,
+          source: initialExpressionRef.current,
+          suggestionProvider
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "type", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column type" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        core.Dropdown,
+        {
+          className: `${classBase$6}-type`,
+          onSelectionChange: onChangeServerDataType,
+          ref: typeRef,
+          selected: serverDataType ? [serverDataType] : [],
+          value: serverDataType,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "boolean", children: "Boolean" }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "double", children: "Double" }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "long", children: "Long" }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "string", children: "String" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+const classBase$5 = "vuuFormattingSettings";
+const BaseNumericFormattingSettings = ({
+  column,
+  onChangeFormatting: onChange
+}) => {
+  const [formattingSettings, setFormattingSettings] = react.useState(vuuUtils.getTypeFormattingFromColumn(column));
+  const handleInputKeyDown = react.useCallback(
+    (evt) => {
+      if (evt.key === "Enter" || evt.key === "Tab") {
+        onChange(formattingSettings);
+      }
+    },
+    [formattingSettings, onChange]
+  );
+  const handleChangeDecimals = react.useCallback(
+    (evt) => {
+      const { value } = evt.target;
+      const numericValue = value === "" ? void 0 : isNaN(parseInt(value)) ? void 0 : parseInt(value);
+      const newFormattingSettings = {
+        ...formattingSettings,
+        decimals: numericValue
+      };
+      setFormattingSettings(newFormattingSettings);
+    },
+    [formattingSettings]
+  );
+  const handleChangeAlignDecimals = react.useCallback(
+    (evt) => {
+      const { checked } = evt.target;
+      const newFormattingSettings = {
+        ...formattingSettings,
+        alignOnDecimals: checked
+      };
+      setFormattingSettings(newFormattingSettings);
+      onChange(newFormattingSettings);
+    },
+    [formattingSettings, onChange]
+  );
+  const handleChangeZeroPad = react.useCallback(
+    (evt) => {
+      const { checked } = evt.target;
+      const newFormattingSettings = {
+        ...formattingSettings,
+        zeroPad: checked
+      };
+      setFormattingSettings(newFormattingSettings);
+      onChange(newFormattingSettings);
+    },
+    [formattingSettings, onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase$5, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "decimals", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Number of decimals" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Input,
+        {
+          className: "vuuInput",
+          onChange: handleChangeDecimals,
+          onKeyDown: handleInputKeyDown,
+          value: formattingSettings.decimals ?? ""
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Align on decimals" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Switch,
+        {
+          checked: formattingSettings.alignOnDecimals ?? false,
+          onChange: handleChangeAlignDecimals,
+          value: "align-decimals"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Zero pad decimals" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Switch,
+        {
+          checked: formattingSettings.zeroPad ?? false,
+          onChange: handleChangeZeroPad,
+          value: "zero-pad"
+        }
+      )
+    ] })
+  ] });
+};
+
+const toggleValues$1 = ["date", "time", "both"];
+function getToggleValue(pattern) {
+  return !pattern.time ? "date" : !pattern.date ? "time" : "both";
+}
+const getSelectedPattern = (pattern) => {
+  if (vuuUtils.isDatePattern(pattern)) {
+    return [pattern];
+  } else if (vuuUtils.isTimePattern(pattern)) {
+    return [pattern];
+  } else {
+    return void 0;
+  }
+};
+const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
+  const formatting = vuuUtils.getTypeFormattingFromColumn(column);
+  const { pattern = vuuUtils.fallbackDateTimePattern } = formatting;
+  const toggleValue = react.useMemo(() => getToggleValue(pattern), [pattern]);
+  const [fallbackState, setFallbackState] = react.useState(
+    {
+      time: pattern.time ?? vuuUtils.defaultPatternsByType.time,
+      date: pattern.date ?? vuuUtils.defaultPatternsByType.date
+    }
+  );
+  const onPatternChange = react.useCallback(
+    (pattern2) => onChange({ ...formatting, pattern: pattern2 }),
+    [onChange, formatting]
+  );
+  const onDropdownChange = react.useCallback(
+    (dateTime) => (_, [selectedPattern]) => {
+      const updatedPattern = {
+        ...pattern ?? {},
+        [dateTime]: selectedPattern
+      };
+      setFallbackState((s) => ({
+        time: updatedPattern.time ?? s.time,
+        date: updatedPattern.date ?? s.date
+      }));
+      onPatternChange(updatedPattern);
+    },
+    [onPatternChange, pattern]
+  );
+  const onToggleChange = react.useCallback(
+    (evnt) => {
+      const value = evnt.currentTarget.value;
+      switch (value) {
+        case "time":
+          return onPatternChange({
+            [value]: pattern[value] ?? fallbackState[value]
+          });
+        case "date":
+          return onPatternChange({
+            [value]: pattern[value] ?? fallbackState[value]
+          });
+        case "both":
+          return onPatternChange({
+            time: pattern.time ?? fallbackState.time,
+            date: pattern.date ?? fallbackState.date
+          });
+      }
+    },
+    [onPatternChange, pattern, fallbackState]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { labelPlacement: "top", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Display" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: onToggleChange,
+          value: toggleValue,
+          "data-variant": "primary",
+          children: toggleValues$1.map((v) => /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: v, children: v.toUpperCase() }, v))
+        }
+      )
+    ] }),
+    ["date", "time"].filter((v) => !!pattern[v]).map((v) => /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { labelPlacement: "top", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: `${vuuUtils.dateTimeLabelByType[v]} pattern` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Dropdown,
+        {
+          onSelectionChange: onDropdownChange(v),
+          selected: getSelectedPattern(pattern[v]),
+          children: vuuUtils.supportedDateTimePatterns[v].map((pattern2, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: pattern2, children: pattern2 }, i))
+        }
+      )
+    ] }, v))
+  ] });
+};
+
+var longTypeFormattingSettingsCss = ".vuuLongColumnFormattingSettings {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  padding-top: 6px;\n}\n";
+
+const classBase$4 = "vuuLongColumnFormattingSettings";
+const LongTypeFormattingSettings = (props) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-long-formatting-settings",
+    css: longTypeFormattingSettingsCss,
+    window: targetWindow
+  });
+  const { column, onChangeColumnType: onChangeType } = props;
+  const type = vuuUtils.isTypeDescriptor(column.type) ? column.type.name : column.type;
+  const handleToggleChange = react.useCallback(
+    (event) => {
+      const value = event.currentTarget.value;
+      onChangeType(value);
+    },
+    [onChangeType]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase$4, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Type inferred as" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: handleToggleChange,
+          value: type ?? "number",
+          children: toggleValues.map((v) => /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: v, children: v.toUpperCase() }, v))
+        }
+      )
+    ] }),
+    vuuUtils.isDateTimeDataValue(column) ? /* @__PURE__ */ jsxRuntime.jsx(DateTimeFormattingSettings, { ...props, column }) : /* @__PURE__ */ jsxRuntime.jsx(BaseNumericFormattingSettings, { ...props })
+  ] });
+};
+const toggleValues = ["number", "date/time"];
+
+const classBase$3 = "vuuColumnFormattingPanel";
+const ColumnFormattingPanel = ({
+  availableRenderers,
+  className,
+  column,
+  onChangeFormatting,
+  onChangeColumnType,
+  onChangeRendering,
+  ...htmlAttributes
+}) => {
+  const formattingSettingsComponent = react.useMemo(
+    () => getFormattingSettingsComponent({
+      column,
+      onChangeFormatting,
+      onChangeColumnType
+    }),
+    [column, onChangeColumnType, onChangeFormatting]
+  );
+  console.log({ formattingSettingsComponent });
+  const ConfigEditor = react.useMemo(() => {
+    const { type } = column;
+    if (vuuUtils.isTypeDescriptor(type) && vuuUtils.isColumnTypeRenderer(type.renderer)) {
+      const cellRendererOptions = vuuUtils.getCellRendererOptions(type.renderer.name);
+      return vuuUtils.getConfigurationEditor(cellRendererOptions?.configEditor);
+    }
+    return void 0;
+  }, [column]);
+  const selectedCellRenderer = react.useMemo(() => {
+    const { type } = column;
+    const [defaultRenderer] = availableRenderers;
+    const rendererName = vuuUtils.isTypeDescriptor(type) && vuuUtils.isColumnTypeRenderer(type.renderer) ? type.renderer.name : void 0;
+    const configuredRenderer = availableRenderers.find(
+      (renderer) => renderer.name === rendererName
+    );
+    return configuredRenderer ?? defaultRenderer;
+  }, [availableRenderers, column]);
+  const handleChangeRenderer = react.useCallback(
+    (_e, [cellRendererDescriptor]) => {
+      const renderProps = {
+        name: cellRendererDescriptor.name
+      };
+      onChangeRendering?.(renderProps);
+    },
+    [onChangeRendering]
+  );
+  const { serverDataType = "string" } = column;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: `vuuColumnSettingsPanel-header`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Formatting" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: `Renderer (data type ${column.serverDataType})` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Dropdown,
+        {
+          className: cx(`${classBase$3}-renderer`),
+          onSelectionChange: handleChangeRenderer,
+          selected: selectedCellRenderer ? [selectedCellRenderer] : [],
+          value: selectedCellRenderer?.label ?? selectedCellRenderer?.name,
+          children: availableRenderers.map((cellRenderer, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: cellRenderer, children: cellRenderer.label ?? cellRenderer.name }, i))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cx(classBase$3, className, `${classBase$3}-${serverDataType}`),
+        children: [
+          formattingSettingsComponent,
+          ConfigEditor ? /* @__PURE__ */ jsxRuntime.jsx(
+            ConfigEditor,
+            {
+              column,
+              onChangeRendering
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+};
+function getFormattingSettingsComponent(props) {
+  const { column } = props;
+  switch (column.serverDataType) {
+    case "double":
+    case "int":
+      return /* @__PURE__ */ jsxRuntime.jsx(BaseNumericFormattingSettings, { ...props });
+    case "long":
+      return /* @__PURE__ */ jsxRuntime.jsx(LongTypeFormattingSettings, { ...props });
+    default:
+      return null;
+  }
+}
+
+var columnNameLabelCss = ".vuuColumnNameLabel-calculated {\n    cursor: pointer;\n    display: flex;\n    gap: 2px;\n}\n\n.vuuColumnNameLabel-edit {\n    margin-left: auto;\n}\n\n.vuuColumnNameLabel-placeholder {\n    color: var(--vuu-color-gray-35);\n}";
+
+const classBase$2 = "vuuColumnNameLabel";
+const ColumnNameLabel = ({ column, onClick }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-column-label",
+    css: columnNameLabelCss,
+    window: targetWindow
+  });
+  if (vuuUtils.isCalculatedColumn(column.name)) {
+    const { name, serverDataType, expression } = vuuUtils.getCalculatedColumnDetails(column);
+    const displayName = name || "name";
+    const displayExpression = "=expression";
+    const nameClass = displayName === "name" ? `${classBase$2}-placeholder` : void 0;
+    const expressionClass = expression === "" ? `${classBase$2}-placeholder` : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cx(classBase$2, `${classBase$2}-calculated`),
+        onClick,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: nameClass, children: displayName }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: ":" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: serverDataType || "string" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: ":" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: expressionClass, children: displayExpression }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase$2}-edit`, "data-icon": "edit" })
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classBase$2, children: column.name });
+  }
+};
+
+const integerCellRenderers = [
+  {
+    description: "Default formatter for columns with data type integer",
+    label: "Default Renderer (int, long)",
+    name: "default-int"
+  }
+];
+const doubleCellRenderers = [
+  {
+    description: "Default formatter for columns with data type double",
+    label: "Default Renderer (double)",
+    name: "default-double"
+  }
+];
+const stringCellRenderers = [
+  {
+    description: "Default formatter for columns with data type string",
+    label: "Default Renderer (string)",
+    name: "default-string"
+  }
+];
+const booleanCellRenderers = [];
+const getAvailableCellRenderers = (column) => {
+  switch (column.serverDataType) {
+    case "char":
+    case "string":
+      return stringCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("string"));
+    case "int":
+    case "long":
+      return integerCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("int"));
+    case "double":
+      return doubleCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("double"));
+    case "boolean":
+      return booleanCellRenderers.concat(vuuUtils.getRegisteredCellRenderers("boolean"));
+    default:
+      return stringCellRenderers;
+  }
+};
+const getColumn = (columns, column) => {
+  if (column.name === "::") {
+    return column;
+  } else {
+    const col = columns.find((col2) => col2.name === column.name);
+    if (col) {
+      return col;
+    }
+    throw Error(`columns does not contain column ${name}`);
+  }
+};
+const replaceColumn = (tableConfig, column) => ({
+  ...tableConfig,
+  columns: tableConfig.columns.map(
+    (col) => col.name === column.name ? column : col
+  )
+});
+const useColumnSettings = ({
+  column: columnProp,
+  onCancelCreateColumn,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  tableConfig
+}) => {
+  const [column, setColumn] = react.useState(
+    getColumn(tableConfig.columns, columnProp)
+  );
+  const columnRef = react.useRef(column);
+  const [inEditMode, setEditMode] = react.useState(column.name === "::");
+  const handleEditCalculatedcolumn = react.useCallback(() => {
+    columnRef.current = column;
+    setEditMode(true);
+  }, [column]);
+  react.useEffect(() => {
+    setColumn(columnProp);
+    setEditMode(columnProp.name === "::");
+  }, [columnProp]);
+  const availableRenderers = react.useMemo(() => {
+    return getAvailableCellRenderers(column);
+  }, [column]);
+  const handleInputCommit = react.useCallback(() => {
+    onConfigChange(replaceColumn(tableConfig, column));
+  }, [column, onConfigChange, tableConfig]);
+  const handleChangeToggleButton = react.useCallback(
+    (evt) => {
+      const button = vuuUtils.queryClosest(evt.target, "button");
+      if (button) {
+        const fieldName = vuuUtils.getFieldName(button);
+        const { value } = button;
+        switch (fieldName) {
+          case "column-alignment":
+            if (vuuUtils.isValidColumnAlignment(value)) {
+              const newColumn = {
+                ...column,
+                align: value || void 0
+              };
+              setColumn(newColumn);
+              onConfigChange(replaceColumn(tableConfig, newColumn));
+            }
+            break;
+          case "column-pin":
+            if (vuuUtils.isValidPinLocation(value)) {
+              const newColumn = {
+                ...column,
+                pin: value || void 0
+              };
+              setColumn(newColumn);
+              onConfigChange(replaceColumn(tableConfig, newColumn));
+              break;
+            }
+        }
+      }
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const handleChange = react.useCallback((evt) => {
+    const input = evt.target;
+    const fieldName = vuuUtils.getFieldName(input);
+    const { value } = input;
+    switch (fieldName) {
+      case "column-label":
+        setColumn((state) => ({ ...state, label: value }));
+        break;
+      case "column-name":
+        setColumn((state) => vuuUtils.setCalculatedColumnName(state, value));
+        break;
+      case "column-width":
+        setColumn((state) => ({ ...state, width: parseInt(value) }));
+        break;
+    }
+  }, []);
+  const handleChangeCalculatedColumnName = react.useCallback((name2) => {
+    setColumn((state) => ({ ...state, name: name2 }));
+  }, []);
+  const handleChangeFormatting = react.useCallback(
+    (formatting) => {
+      const newColumn = vuuUtils.updateColumnFormatting(column, formatting);
+      setColumn(newColumn);
+      onConfigChange(replaceColumn(tableConfig, newColumn));
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const handleChangeType = react.useCallback(
+    (type) => {
+      const updatedColumn = vuuUtils.updateColumnType(column, type);
+      setColumn(updatedColumn);
+      onConfigChange(replaceColumn(tableConfig, updatedColumn));
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const handleChangeServerDataType = react.useCallback(
+    (serverDataType) => {
+      setColumn((col) => ({ ...col, serverDataType }));
+    },
+    []
+  );
+  const handleChangeRendering = react.useCallback(
+    (renderProps) => {
+      if (renderProps) {
+        const newColumn = vuuUtils.updateColumnRenderProps(
+          column,
+          renderProps
+        );
+        setColumn(newColumn);
+        onConfigChange(replaceColumn(tableConfig, newColumn));
+      }
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const navigateColumn = react.useCallback(
+    ({ moveBy }) => {
+      const { columns } = tableConfig;
+      const index = columns.indexOf(column) + moveBy;
+      const newColumn = columns[index];
+      if (newColumn) {
+        setColumn(newColumn);
+      }
+    },
+    [column, tableConfig]
+  );
+  const navigateNextColumn = react.useCallback(() => {
+    navigateColumn({ moveBy: 1 });
+  }, [navigateColumn]);
+  const navigatePrevColumn = react.useCallback(() => {
+    navigateColumn({ moveBy: -1 });
+  }, [navigateColumn]);
+  const handleSaveCalculatedColumn = react.useCallback(() => {
+    onCreateCalculatedColumn(column);
+  }, [column, onCreateCalculatedColumn]);
+  const handleCancelEdit = react.useCallback(() => {
+    if (columnProp.name === "::") {
+      onCancelCreateColumn();
+    } else {
+      if (columnRef.current !== void 0 && columnRef.current !== column) {
+        setColumn(columnRef.current);
+      }
+      setEditMode(false);
+    }
+  }, [column, columnProp.name, onCancelCreateColumn]);
+  return {
+    availableRenderers,
+    editCalculatedColumn: inEditMode,
+    column,
+    navigateNextColumn,
+    navigatePrevColumn,
+    onCancel: handleCancelEdit,
+    onChange: handleChange,
+    onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
+    onChangeFormatting: handleChangeFormatting,
+    onChangeRendering: handleChangeRendering,
+    onChangeServerDataType: handleChangeServerDataType,
+    onChangeToggleButton: handleChangeToggleButton,
+    onChangeType: handleChangeType,
+    onEditCalculatedColumn: handleEditCalculatedcolumn,
+    onInputCommit: handleInputCommit,
+    onSave: handleSaveCalculatedColumn
+  };
+};
+
+var colunSettingsPanelCss = ".vuuColumnSettingsPanel {\n    --vuu-svg-align-left: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M9.33333 10H2.66667C2.3 10 2 10.3 2 10.6667C2 11.0333 2.3 11.3333 2.66667 11.3333H9.33333C9.7 11.3333 10 11.0333 10 10.6667C10 10.3 9.7 10 9.33333 10ZM9.33333 4.66667H2.66667C2.3 4.66667 2 4.96667 2 5.33333C2 5.7 2.3 6 2.66667 6H9.33333C9.7 6 10 5.7 10 5.33333C10 4.96667 9.7 4.66667 9.33333 4.66667ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>');\n    --vuu-svg-align-right: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM6.66667 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H6.66667C6.3 10 6 10.3 6 10.6667C6 11.0333 6.3 11.3333 6.66667 11.3333ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM6.66667 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H6.66667C6.3 4.66667 6 4.96667 6 5.33333C6 5.7 6.3 6 6.66667 6ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>');\n    --vuu-svg-pin-left: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M7.33333 9.86V8.66666H13.3333C13.7 8.66666 14 8.36666 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333L7.33333 7.33333V6.14C7.33333 5.84 6.97333 5.69333 6.76667 5.90666L4.90667 7.76666C4.77333 7.89999 4.77333 8.10666 4.90667 8.24L6.76667 10.1C6.97333 10.3067 7.33333 10.16 7.33333 9.86ZM2.66667 13.3333C3.03333 13.3333 3.33333 13.0333 3.33333 12.6667L3.33333 3.33333C3.33333 2.96666 3.03333 2.66666 2.66667 2.66666C2.3 2.66666 2 2.96666 2 3.33333L2 12.6667C2 13.0333 2.3 13.3333 2.66667 13.3333Z\" /></svg>');\n    --vuu-svg-pin-float: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6 4.66667H4.66667V6H6V4.66667ZM6 7.33333H4.66667V8.66667H6V7.33333ZM6 2C5.26 2 4.66667 2.6 4.66667 3.33333H6V2ZM8.66667 10H7.33333V11.3333H8.66667V10ZM12.6667 2V3.33333H14C14 2.6 13.4 2 12.6667 2ZM8.66667 2H7.33333V3.33333H8.66667V2ZM6 11.3333V10H4.66667C4.66667 10.7333 5.26 11.3333 6 11.3333ZM12.6667 8.66667H14V7.33333H12.6667V8.66667ZM12.6667 6H14V4.66667H12.6667V6ZM12.6667 11.3333C13.4 11.3333 14 10.7333 14 10H12.6667V11.3333ZM2.66667 4.66667C2.3 4.66667 2 4.96667 2 5.33333V12.6667C2 13.4 2.6 14 3.33333 14H10.6667C11.0333 14 11.3333 13.7 11.3333 13.3333C11.3333 12.9667 11.0333 12.6667 10.6667 12.6667H4C3.63333 12.6667 3.33333 12.3667 3.33333 12V5.33333C3.33333 4.96667 3.03333 4.66667 2.66667 4.66667ZM10 3.33333H11.3333V2H10V3.33333ZM10 11.3333H11.3333V10H10V11.3333Z\" /></svg>');\n    --vuu-svg-pin-right: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M8.66667 6.14V7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36666 2.3 8.66666 2.66667 8.66666H8.66667V9.86C8.66667 10.16 9.02667 10.3067 9.23333 10.0933L11.0933 8.23333C11.2267 8.1 11.2267 7.89333 11.0933 7.76L9.23333 5.9C9.02667 5.69333 8.66667 5.84 8.66667 6.14ZM13.3333 13.3333C13.7 13.3333 14 13.0333 14 12.6667V3.33333C14 2.96666 13.7 2.66666 13.3333 2.66666C12.9667 2.66666 12.6667 2.96666 12.6667 3.33333V12.6667C12.6667 13.0333 12.9667 13.3333 13.3333 13.3333Z\"/></svg>');\n    --vuuDropdown-height: 24px;\n    --vuuDropdown-width: 100%;\n    \n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n    padding-top: 24px;\n}\n\n.vuuColumnSettingsPanel-header {\n  border-top: solid 2px var(--vuu-color-gray-30);\n  font-size: 14px;\n  font-weight: 600;\n  padding: 24px 2px 0 2px;\n}\n\n\n.vuuColumnSettingsPanel-buttonBar {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-top: auto;\n}\n\n.vuuColumnSettingsPanel-buttonBar[data-align=\"right\"]{\n  gap: 6px;\n  justify-content: flex-end;\n}\n\n.vuuColumnSettingsPanel-buttonNavPrev {\n  --vuu-icon-left: 6px;\n  padding-left: 24px\n}\n\n.vuuColumnSettingsPanel-buttonNavNext {\n  --vuu-icon-left: calc(100% - 18px);\n  padding-right: 24px\n}\n\n\n\n[data-icon='align-left'] {\n    --vuu-icon-svg: var(--vuu-svg-align-left);\n  }\n\n  [data-icon='align-right'] {\n    --vuu-icon-svg: var(--vuu-svg-align-right);\n  }\n\n  [data-icon='pin-left'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-left);\n  }\n  [data-icon='pin-float'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-float);\n  }\n  [data-icon='pin-right'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-right);\n  }\n\n  .vuuColumnSettingsPanel-editing .vuuColumnNameLabel-edit {\n    display: none;\n  }\n  \n\n\n  \n  \n  \n  \n  \n";
+
+const classBase$1 = "vuuColumnSettingsPanel";
+const getColumnLabel = (column) => {
+  const { name, label } = column;
+  if (vuuUtils.isCalculatedColumn(name)) {
+    return label ?? vuuUtils.getCalculatedColumnDetails(column).name;
+  } else {
+    return label ?? name;
+  }
+};
+const ColumnSettingsPanel = ({
+  column: columnProp,
+  onCancelCreateColumn,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  tableConfig,
+  vuuTable
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-column-settings-panel",
+    css: colunSettingsPanelCss,
+    window: targetWindow
+  });
+  const isNewCalculatedColumn = columnProp.name === "::";
+  const {
+    availableRenderers,
+    editCalculatedColumn,
+    column,
+    navigateNextColumn,
+    navigatePrevColumn,
+    onCancel,
+    onChange,
+    onChangeCalculatedColumnName,
+    onChangeFormatting,
+    onChangeRendering,
+    onChangeServerDataType,
+    onChangeToggleButton,
+    onChangeType,
+    onEditCalculatedColumn,
+    onInputCommit,
+    onSave
+  } = useColumnSettings({
+    column: columnProp,
+    onCancelCreateColumn,
+    onConfigChange,
+    onCreateCalculatedColumn,
+    tableConfig
+  });
+  const {
+    serverDataType,
+    align = vuuUtils.getDefaultAlignment(serverDataType),
+    pin,
+    width
+  } = column;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(classBase$1, {
+        [`${classBase$1}-editing`]: editCalculatedColumn
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase$1}-header`, children: /* @__PURE__ */ jsxRuntime.jsx(ColumnNameLabel, { column, onClick: onEditCalculatedColumn }) }),
+        editCalculatedColumn ? /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnExpressionPanel,
+          {
+            column,
+            onChangeName: onChangeCalculatedColumnName,
+            onChangeServerDataType,
+            tableConfig,
+            vuuTable
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-label", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Label" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            vuuUiControls.VuuInput,
+            {
+              className: "vuuInput",
+              "data-embedded": true,
+              onChange,
+              onCommit: onInputCommit,
+              value: getColumnLabel(column)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-width", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Width" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            vuuUiControls.VuuInput,
+            {
+              className: "vuuInput",
+              "data-embedded": true,
+              onChange,
+              value: width,
+              onCommit: onInputCommit
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-alignment", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Alignment" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(core.ToggleButtonGroup, { onChange: onChangeToggleButton, value: align, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "left", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "align-left", size: 16 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "right", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "align-right", size: 16 }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-pin", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Pin Column" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            core.ToggleButtonGroup,
+            {
+              onChange: onChangeToggleButton,
+              value: pin || "false",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "left", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-left", size: 16 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "floating", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-float", size: 16 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "right", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "pin-right", size: 16 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "cross-circle", size: 16 }) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnFormattingPanel,
+          {
+            availableRenderers,
+            column,
+            onChangeFormatting,
+            onChangeRendering,
+            onChangeColumnType: onChangeType
+          }
+        ),
+        editCalculatedColumn ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              className: `${classBase$1}-buttonCancel`,
+              onClick: onCancel,
+              tabIndex: -1,
+              children: "cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              className: `${classBase$1}-buttonSave`,
+              onClick: onSave,
+              variant: "cta",
+              children: "save"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `${classBase$1}-buttonBar`,
+            "data-align": isNewCalculatedColumn ? "right" : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                core.Button,
+                {
+                  className: `${classBase$1}-buttonNavPrev`,
+                  variant: "secondary",
+                  "data-icon": "arrow-left",
+                  onClick: navigatePrevColumn,
+                  children: "PREVIOUS"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                core.Button,
+                {
+                  className: `${classBase$1}-buttonNavNext`,
+                  variant: "secondary",
+                  "data-icon": "arrow-right",
+                  onClick: navigateNextColumn,
+                  children: "NEXT"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+const columnSettingsFromColumnMenuPermissions = (settings) => typeof settings === void 0 ? true : typeof settings === "boolean" ? settings : settings?.allowColumnSettings ?? true;
+const tableSettingsFromColumnMenuPermissions = (settings) => typeof settings === void 0 ? defaultTableSettingsPermissions : typeof settings === "boolean" ? settings : settings?.allowTableSettings ?? defaultTableSettingsPermissions;
+const useTableAndColumnSettings = ({
+  availableColumns: availableColumnsProps,
+  settingsPermissions,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  onDataSourceConfigChange,
+  tableConfig
+}) => {
+  const showTableSettingsRef = react.useRef(void 0);
+  const [availableColumns, setAvailableColumns] = react.useState(
+    availableColumnsProps
+  );
+  const showContextPanel = vuuUiControls.useContextPanel();
+  const handleCancelCreateColumn = react.useCallback(() => {
+    requestAnimationFrame(() => {
+      showTableSettingsRef.current?.();
+    });
+  }, []);
+  const handleCreateCalculatedColumn = react.useCallback(
+    (column) => {
+      const { serverDataType } = vuuUtils.getCalculatedColumnDetails(column);
+      if (serverDataType) {
+        const newAvailableColumns = availableColumns.concat({
+          name: column.name,
+          serverDataType
+        });
+        setAvailableColumns(newAvailableColumns);
+        onAvailableColumnsChange?.(newAvailableColumns);
+        requestAnimationFrame(() => {
+          showTableSettingsRef.current?.();
+        });
+        onCreateCalculatedColumn(column);
+      } else {
+        throw Error(
+          "Cannot create calculatec columns without valis serverDataType"
+        );
+      }
+    },
+    [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
+  );
+  const showColumnSettingsPanel = react.useCallback(
+    (action) => {
+      showContextPanel("ColumnSettings", "Column Settings", {
+        column: action.column,
+        onCancelCreateColumn: handleCancelCreateColumn,
+        onConfigChange,
+        onCreateCalculatedColumn: handleCreateCalculatedColumn,
+        tableConfig,
+        vuuTable: action.vuuTable
+      });
+    },
+    [
+      handleCancelCreateColumn,
+      handleCreateCalculatedColumn,
+      onConfigChange,
+      showContextPanel,
+      tableConfig
+    ]
+  );
+  const handleAddCalculatedColumn = react.useCallback(() => {
+    showColumnSettingsPanel({
+      column: {
+        name: "::",
+        serverDataType: "string"
+      },
+      type: "column-settings",
+      vuuTable: { module: "SIMUL", table: "instruments" }
+    });
+  }, [showColumnSettingsPanel]);
+  const handleNavigateToColumn = react.useCallback(
+    (columnName) => {
+      const column = tableConfig.columns.find((c) => c.name === columnName);
+      if (column) {
+        showColumnSettingsPanel({
+          type: "column-settings",
+          column,
+          //TODO where do we get this from
+          vuuTable: { module: "SIMUL", table: "instruments" }
+        });
+      }
+    },
+    [showColumnSettingsPanel, tableConfig.columns]
+  );
+  showTableSettingsRef.current = react.useCallback(() => {
+    showContextPanel("TableSettings", "DataGrid Settings", {
+      availableColumns: availableColumns ?? tableConfig.columns.map(({ name, serverDataType }) => ({
+        name,
+        serverDataType
+      })),
+      onAddCalculatedColumn: handleAddCalculatedColumn,
+      onConfigChange,
+      onDataSourceConfigChange,
+      onNavigateToColumn: handleNavigateToColumn,
+      permissions: settingsPermissions?.allowTableSettings,
+      tableConfig
+    });
+  }, [
+    availableColumns,
+    handleAddCalculatedColumn,
+    handleNavigateToColumn,
+    onConfigChange,
+    onDataSourceConfigChange,
+    settingsPermissions,
+    showContextPanel,
+    tableConfig
+  ]);
+  return {
+    showColumnSettingsPanel,
+    showTableSettingsPanel: showTableSettingsRef.current
+  };
+};
+
+var dataSourceStats = ".vuuDatasourceStats {\n  display: flex;\n  font-size: 10px;\n  gap: var(--salt-spacing-100);\n  padding: 4px 0 0 12px;\n}\n\n.vuuDatasourceStats-label {\n  color: var(--salt-content-secondary-foreground);\n}\n";
+
+const classBase = "vuuDatasourceStats";
+const numberFormatter = new Intl.NumberFormat();
+const DataSourceStats = ({
+  className: classNameProp,
+  dataSource
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-datasource-stats",
+    css: dataSourceStats,
+    window: targetWindow
+  });
+  const [range, setRange] = react.useState(dataSource.range);
+  const [size, setSize] = react.useState(dataSource.size);
+  react.useEffect(() => {
+    setSize(dataSource.size);
+    dataSource.on("resize", setSize);
+    dataSource.on("range", setRange);
+    return () => {
+      dataSource.removeListener("resize", setSize);
+      dataSource.removeListener("range", setRange);
+    };
+  }, [dataSource]);
+  const className = cx(classBase, classNameProp);
+  const from = numberFormatter.format(range.firstRowInViewport);
+  const to = numberFormatter.format(range.lastRowInViewport);
+  const value = numberFormatter.format(size);
+  if (size === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-label`, children: "No Rows to display" }) });
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-label`, children: "Rows" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-range`, children: from }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "-" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-range`, children: to }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "of" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-size`, children: value })
+    ] });
+  }
+};
+
+exports.BackgroundCell = BackgroundCell;
+exports.BackgroundCellConfigurationEditor = BackgroundCellConfigurationEditor;
+exports.BaseNumericFormattingSettings = BaseNumericFormattingSettings;
+exports.CaseValidator = CaseValidator;
+exports.ColumnExpressionInput = ColumnExpressionInput;
+exports.ColumnExpressionPanel = ColumnExpressionPanel;
+exports.ColumnFormattingPanel = ColumnFormattingPanel;
+exports.ColumnList = ColumnList;
+exports.ColumnMenu = ColumnMenu;
+exports.ColumnNamedTerms = ColumnNamedTerms;
+exports.ColumnSettingsPanel = ColumnSettingsPanel;
+exports.DataSourceStats = DataSourceStats;
+exports.DateTimeFormattingSettings = DateTimeFormattingSettings;
+exports.DropdownCell = DropdownCell;
+exports.LookupCell = LookupCell;
+exports.PatternValidator = PatternValidator;
+exports.PctProgressCell = PctProgressCell;
+exports.TableProvider = TableProvider;
+exports.TableSettingsPanel = TableSettingsPanel;
+exports.columnExpressionLanguageSupport = columnExpressionLanguageSupport;
+exports.columnSettingsFromColumnMenuPermissions = columnSettingsFromColumnMenuPermissions;
+exports.defaultTableSettingsPermissions = defaultTableSettingsPermissions;
+exports.isCompleteExpression = isCompleteExpression;
+exports.isCompleteRelationalExpression = isCompleteRelationalExpression;
+exports.lastNamedChild = lastNamedChild;
+exports.tableSettingsFromColumnMenuPermissions = tableSettingsFromColumnMenuPermissions;
+exports.useColumnActions = useColumnActions;
+exports.useColumnExpressionEditor = useColumnExpressionEditor;
+exports.useColumnExpressionSuggestionProvider = useColumnExpressionSuggestionProvider;
+exports.useColumnSettings = useColumnSettings;
+exports.useTableAndColumnSettings = useTableAndColumnSettings;
+exports.useTableContext = useTableContext;
+exports.useTableSettings = useTableSettings;
+exports.walkTree = walkTree;
 //# sourceMappingURL=index.js.map