@vuu-ui/vuu-table-extras 0.8.8-debug → 0.8.9-debug

package/esm/index.js

@@ -17,13 +17,55 @@ var __privateSet = (obj, member, value, setter) => {
   return value;
 };
 
+// src/cell-edit-validators/CaseValidator.ts
+import { registerComponent } from "@vuu-ui/vuu-utils";
+var isString = (value) => typeof value === "string";
+var CaseValidator = (rule, value) => {
+  if (isString(value)) {
+    if (value === "") {
+      return true;
+    } else if (rule.value === "lower" && value.toLowerCase() !== value) {
+      return "value must be all lowercase";
+    } else if (rule.value === "upper" && value.toUpperCase() !== value) {
+      return "value must be all uppercase";
+    } else {
+      return true;
+    }
+  } else {
+    return "value must be a string";
+  }
+};
+registerComponent("vuu-case", CaseValidator, "data-edit-validator", {});
+
+// src/cell-edit-validators/PatternValidator.ts
+import { registerComponent as registerComponent2 } from "@vuu-ui/vuu-utils";
+var isString2 = (value) => typeof value === "string";
+var defaultMessage = "value does not match expected pattern";
+var PatternValidator = (rule, value) => {
+  if (typeof rule.value !== "string") {
+    throw Error("Pattern validation rule must provide pattern");
+  }
+  if (isString2(value)) {
+    if (value === "") {
+      return true;
+    } else {
+      const { message = defaultMessage } = rule;
+      const pattern = new RegExp(rule.value);
+      return pattern.test(value) || message;
+    }
+  } else {
+    return "value must be a string";
+  }
+};
+registerComponent2("vuu-pattern", PatternValidator, "data-edit-validator", {});
+
 // src/cell-renderers/background-cell/BackgroundCell.tsx
 import {
   DOWN1,
   DOWN2,
   isTypeDescriptor as isTypeDescriptor2,
   metadataKeys,
-  registerComponent,
+  registerComponent as registerComponent3,
   UP1,
   UP2
 } from "@vuu-ui/vuu-utils";
@@ -55,7 +97,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var CHAR_ARROW_UP = String.fromCharCode(11014);
 var CHAR_ARROW_DOWN = String.fromCharCode(11015);
 var { KEY } = metadataKeys;
-var classBase = "vuuBackgroundCell";
+var classBase = "vuuBackgroundCellDeprecated";
 var FlashStyle = {
   ArrowOnly: "arrow",
   BackgroundOnly: "bg-only",
@@ -85,7 +127,9 @@ var BackgroundCell = ({ column, row }) => {
     valueFormatter(row[column.key])
   ] });
 };
-registerComponent("background", BackgroundCell, "cell-renderer", {
+registerComponent3("background", BackgroundCell, "cell-renderer", {
+  description: "Background Cell renderer for VuuTable",
+  label: "Background Cell (deprecated)",
   serverDataType: ["long", "int", "double"]
 });
 
@@ -93,7 +137,8 @@ registerComponent("background", BackgroundCell, "cell-renderer", {
 import {
   isColumnTypeRenderer,
   isTypeDescriptor as isTypeDescriptor3,
-  registerComponent as registerComponent2
+  isValidNumber as isValidNumber2,
+  registerComponent as registerComponent4
 } from "@vuu-ui/vuu-utils";
 import cx2 from "classnames";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -105,22 +150,27 @@ var ProgressCell = ({ column, columnMap, row }) => {
   let percentage = 0;
   if (isTypeDescriptor3(type) && isColumnTypeRenderer(type.renderer)) {
     const { associatedField } = type.renderer;
-    const associatedValue = row[columnMap[associatedField]];
-    if (typeof value === "number" && typeof associatedValue === "number") {
-      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);
+    if (associatedField) {
+      const associatedValue = row[columnMap[associatedField]];
+      if (typeof isValidNumber2(value) && isValidNumber2(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 = cx2(classBase2, {});
@@ -138,7 +188,84 @@ var ProgressCell = ({ column, columnMap, row }) => {
     /* @__PURE__ */ jsx2("span", { className: `${classBase2}-text`, children: `${percentage} %` })
   ] });
 };
-registerComponent2("vuu.progress", ProgressCell, "cell-renderer", {
+registerComponent4("vuu.progress", ProgressCell, "cell-renderer", {
+  description: "Progress formatter",
+  label: "Progress formatter",
+  serverDataType: ["long", "int", "double"]
+});
+
+// src/cell-renderers-next/background-cell/BackgroundCell.tsx
+import {
+  DOWN1 as DOWN12,
+  DOWN2 as DOWN22,
+  isTypeDescriptor as isTypeDescriptor5,
+  metadataKeys as metadataKeys2,
+  registerComponent as registerComponent5,
+  UP1 as UP12,
+  UP2 as UP22
+} from "@vuu-ui/vuu-utils";
+import cx3 from "classnames";
+
+// src/cell-renderers-next/background-cell/useDirection.ts
+import {
+  getMovingValueDirection as getMovingValueDirection2,
+  isTypeDescriptor as isTypeDescriptor4,
+  isValidNumber as isValidNumber3
+} from "@vuu-ui/vuu-utils";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+var INITIAL_VALUE2 = [void 0, void 0, void 0, void 0];
+function useDirection2(key, value, column) {
+  var _a;
+  const ref = useRef2();
+  const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE2;
+  const { type: dataType } = column;
+  const decimals = isTypeDescriptor4(dataType) ? (_a = dataType.formatting) == null ? void 0 : _a.decimals : void 0;
+  const direction = key === prevKey && isValidNumber3(value) && isValidNumber3(prevValue) && column === prevColumn ? getMovingValueDirection2(value, prevDirection, prevValue, decimals) : "";
+  useEffect2(() => {
+    ref.current = [key, value, column, direction];
+  });
+  return direction;
+}
+
+// src/cell-renderers-next/background-cell/BackgroundCell.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CHAR_ARROW_UP2 = String.fromCharCode(11014);
+var CHAR_ARROW_DOWN2 = String.fromCharCode(11015);
+var { KEY: KEY2 } = metadataKeys2;
+var classBase3 = "vuuBackgroundCell";
+var FlashStyle2 = {
+  ArrowOnly: "arrow",
+  BackgroundOnly: "bg-only",
+  ArrowBackground: "arrow-bg"
+};
+var getFlashStyle2 = (colType) => {
+  if (isTypeDescriptor5(colType) && colType.renderer) {
+    if ("flashStyle" in colType.renderer) {
+      return colType.renderer["flashStyle"];
+    }
+  }
+  return FlashStyle2.BackgroundOnly;
+};
+var BackgroundCell2 = ({ column, row }) => {
+  const { key, type, valueFormatter } = column;
+  const value = row[key];
+  const flashStyle = getFlashStyle2(type);
+  const direction = useDirection2(row[KEY2], value, column);
+  const arrow = flashStyle === FlashStyle2.ArrowOnly || flashStyle === FlashStyle2.ArrowBackground ? direction === UP12 || direction === UP22 ? CHAR_ARROW_UP2 : direction === DOWN12 || direction === DOWN22 ? CHAR_ARROW_DOWN2 : null : null;
+  const dirClass = direction ? ` ` + direction : "";
+  const className = cx3(classBase3, dirClass, {
+    [`${classBase3}-arrowOnly`]: flashStyle === FlashStyle2.ArrowOnly,
+    [`${classBase3}-arrowBackground`]: flashStyle === FlashStyle2.ArrowBackground
+  });
+  return /* @__PURE__ */ jsxs3("div", { className, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx3("div", { className: `${classBase3}-flasher`, children: arrow }),
+    valueFormatter(row[column.key])
+  ] });
+};
+console.log("register BackgroundCellNext");
+registerComponent5("background-next", BackgroundCell2, "cell-renderer", {
+  description: "Change background color of cell when value changes",
+  label: "Background Flash",
   serverDataType: ["long", "int", "double"]
 });
 
@@ -149,10 +276,10 @@ import {
 } from "@vuu-ui/vuu-ui-controls";
 import { Checkbox } from "@salt-ds/core";
 import { Switch } from "@salt-ds/lab";
-import cx3 from "classnames";
+import cx4 from "classnames";
 import { useCallback } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var classBase3 = "vuuColumnList";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var classBase4 = "vuuColumnList";
 var classBaseListItem = "vuuColumnListItem";
 var ColumnListItem = ({
   className: classNameProp,
@@ -160,19 +287,19 @@ var ColumnListItem = ({
   ...listItemProps
 }) => {
   var _a;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     ListItem,
     {
       ...listItemProps,
-      className: cx3(classNameProp, classBaseListItem),
+      className: cx4(classNameProp, classBaseListItem),
       "data-name": item == null ? void 0 : item.name,
       children: [
-        /* @__PURE__ */ jsx3(Switch, { className: `${classBase3}-switch`, checked: item == null ? void 0 : item.subscribed }),
-        /* @__PURE__ */ jsx3("span", { className: `${classBase3}-text`, children: (_a = item == null ? void 0 : item.label) != null ? _a : item == null ? void 0 : item.name }),
-        /* @__PURE__ */ jsx3(
+        (item == null ? void 0 : item.isCalculated) ? /* @__PURE__ */ jsx4("span", { className: `${classBase4}-icon`, "data-icon": "function" }) : /* @__PURE__ */ jsx4(Switch, { className: `${classBase4}-switch`, checked: item == null ? void 0 : item.subscribed }),
+        /* @__PURE__ */ jsx4("span", { className: `${classBase4}-text`, children: (_a = item == null ? void 0 : item.label) != null ? _a : item == null ? void 0 : item.name }),
+        /* @__PURE__ */ jsx4(
           Checkbox,
           {
-            className: `${classBase3}-checkBox`,
+            className: `${classBase4}-checkBox`,
             checked: (item == null ? void 0 : item.hidden) !== true,
             disabled: (item == null ? void 0 : item.subscribed) !== true
           }
@@ -192,29 +319,29 @@ var ColumnList = ({
       const input = evt.target;
       const listItem = input.closest(`.${classBaseListItem}`);
       const {
-        dataset: { name }
+        dataset: { name: name2 }
       } = listItem;
-      if (name) {
-        const saltSwitch = input.closest(`.${classBase3}-switch`);
+      if (name2) {
+        const saltSwitch = input.closest(`.${classBase4}-switch`);
         const saltCheckbox = input.closest(
-          `.${classBase3}-checkBox`
+          `.${classBase4}-checkBox`
         );
         if (saltSwitch) {
-          onChange(name, "subscribed", input.checked);
+          onChange(name2, "subscribed", input.checked);
         } else if (saltCheckbox) {
-          onChange(name, "hidden", input.checked === false);
+          onChange(name2, "hidden", input.checked === false);
         }
       }
     },
     [onChange]
   );
-  return /* @__PURE__ */ jsxs3("div", { ...htmlAttributes, className: classBase3, children: [
-    /* @__PURE__ */ jsx3("div", { className: `${classBase3}-header`, children: /* @__PURE__ */ jsx3("span", { children: "Column Selection" }) }),
-    /* @__PURE__ */ jsxs3("div", { className: `${classBase3}-colHeadings`, children: [
-      /* @__PURE__ */ jsx3("span", { children: "Column subscription" }),
-      /* @__PURE__ */ jsx3("span", { children: "Visibility" })
+  return /* @__PURE__ */ jsxs4("div", { ...htmlAttributes, className: classBase4, children: [
+    /* @__PURE__ */ jsx4("div", { className: `${classBase4}-header`, children: /* @__PURE__ */ jsx4("span", { children: "Column Selection" }) }),
+    /* @__PURE__ */ jsxs4("div", { className: `${classBase4}-colHeadings`, children: [
+      /* @__PURE__ */ jsx4("span", { children: "Column subscription" }),
+      /* @__PURE__ */ jsx4("span", { children: "Visibility" })
     ] }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       List,
       {
         ListItem: ColumnListItem,
@@ -230,6 +357,410 @@ var ColumnList = ({
   ] });
 };
 
+// src/column-settings/ColumnSettingsPanel.tsx
+import { getDefaultAlignment, isCalculatedColumn } from "@vuu-ui/vuu-utils";
+import {
+  Button as Button2,
+  FormField as FormField4,
+  FormFieldLabel as FormFieldLabel4,
+  ToggleButton,
+  ToggleButtonGroup
+} from "@salt-ds/core";
+
+// src/column-formatting-settings/ColumnFormattingPanel.tsx
+import { Dropdown } from "@vuu-ui/vuu-ui-controls";
+import { FormField as FormField2, FormFieldLabel as FormFieldLabel2 } from "@salt-ds/core";
+import cx5 from "classnames";
+import { useMemo } from "react";
+
+// src/column-formatting-settings/NumericFormattingSettings.tsx
+import { FormField, FormFieldLabel, Input } from "@salt-ds/core";
+import { Switch as Switch2 } from "@salt-ds/lab";
+import { getTypeSettingsFromColumn } from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback2,
+  useState
+} from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var classBase5 = "vuuFormattingSettings";
+var NumericFormattingSettings = ({
+  column,
+  onChange
+}) => {
+  var _a;
+  const [formattingSettings, setFormattingSettings] = useState(
+    getTypeSettingsFromColumn(column)
+  );
+  const handleInputKeyDown = useCallback2(
+    (evt) => {
+      if (evt.key === "Enter" || evt.key === "Tab") {
+        onChange(formattingSettings);
+      }
+    },
+    [formattingSettings, onChange]
+  );
+  const handleChangeDecimals = useCallback2(
+    (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 = useCallback2(
+    (evt) => {
+      const { checked } = evt.target;
+      const newFormattingSettings = {
+        ...formattingSettings,
+        alignOnDecimals: checked
+      };
+      setFormattingSettings(newFormattingSettings);
+      onChange(newFormattingSettings);
+    },
+    [formattingSettings, onChange]
+  );
+  const handleChangeZeroPad = useCallback2(
+    (evt) => {
+      const { checked } = evt.target;
+      const newFormattingSettings = {
+        ...formattingSettings,
+        zeroPad: checked
+      };
+      setFormattingSettings(newFormattingSettings);
+      onChange(newFormattingSettings);
+    },
+    [formattingSettings, onChange]
+  );
+  return /* @__PURE__ */ jsxs5("div", { className: classBase5, children: [
+    /* @__PURE__ */ jsxs5(FormField, { "data-field": "decimals", children: [
+      /* @__PURE__ */ jsx5(FormFieldLabel, { children: "Number of decimals" }),
+      /* @__PURE__ */ jsx5(
+        Input,
+        {
+          className: "vuuInput",
+          onChange: handleChangeDecimals,
+          onKeyDown: handleInputKeyDown,
+          value: (_a = formattingSettings.decimals) != null ? _a : ""
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5(FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ jsx5(FormFieldLabel, { children: "Align on decimals" }),
+      /* @__PURE__ */ jsx5(
+        Switch2,
+        {
+          checked: formattingSettings.alignOnDecimals,
+          onChange: handleChangeAlignDecimals,
+          value: "align-decimals"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5(FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ jsx5(FormFieldLabel, { children: "Zero pad decimals" }),
+      /* @__PURE__ */ jsx5(
+        Switch2,
+        {
+          checked: formattingSettings.zeroPad,
+          onChange: handleChangeZeroPad,
+          value: "zero-pad"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/column-formatting-settings/ColumnFormattingPanel.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var classBase6 = "vuuColumnFormattingPanel";
+var itemToString = (item) => {
+  var _a;
+  return (_a = item.label) != null ? _a : item.name;
+};
+var ColumnFormattingPanel = ({
+  availableRenderers,
+  selectedCellRenderer,
+  className,
+  column,
+  onChangeFormatting,
+  onChangeRenderer,
+  ...htmlAttributes
+}) => {
+  const content = useMemo(() => {
+    switch (column.serverDataType) {
+      case "double":
+      case "int":
+      case "long":
+        return /* @__PURE__ */ jsx6(
+          NumericFormattingSettings,
+          {
+            column,
+            onChange: onChangeFormatting
+          }
+        );
+      default:
+        return null;
+    }
+  }, [column, onChangeFormatting]);
+  const { serverDataType = "string" } = column;
+  return /* @__PURE__ */ jsxs6("div", { ...htmlAttributes, className: `vuuColumnSettingsPanel-header`, children: [
+    /* @__PURE__ */ jsx6("div", { children: "Formatting" }),
+    /* @__PURE__ */ jsxs6(FormField2, { children: [
+      /* @__PURE__ */ jsx6(FormFieldLabel2, { children: "Renderer" }),
+      /* @__PURE__ */ jsx6(
+        Dropdown,
+        {
+          className: cx5(`${classBase6}-renderer`),
+          itemToString,
+          onSelectionChange: onChangeRenderer,
+          selected: selectedCellRenderer,
+          source: availableRenderers,
+          width: "100%"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: cx5(classBase6, className, `${classBase6}-${serverDataType}`),
+        children: content
+      }
+    )
+  ] });
+};
+
+// src/column-settings/useColumnSettings.ts
+import {
+  getRegisteredCellRenderers,
+  isColumnTypeRenderer as isColumnTypeRenderer2,
+  isTypeDescriptor as isTypeDescriptor6,
+  isValidColumnAlignment,
+  isValidPinLocation,
+  setCalculatedColumnName,
+  updateColumnRenderer,
+  updateColumnType
+} from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback3,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState2
+} from "react";
+var integerCellRenderers = [
+  {
+    description: "Default formatter for columns with data type integer",
+    label: "Default Renderer (data type int, long)",
+    name: "default-int"
+  }
+];
+var doubleCellRenderers = [
+  {
+    description: "Default formatter for columns with data type double",
+    label: "Default Renderer (data type double)",
+    name: "default-double"
+  },
+  ...getRegisteredCellRenderers("double")
+];
+var stringCellRenderers = [
+  {
+    description: "Default formatter for columns with data type string",
+    label: "Default Renderer (data type string)",
+    name: "default-string"
+  }
+];
+var getAvailableCellRenderers = (column) => {
+  switch (column.serverDataType) {
+    case "char":
+    case "string":
+      return stringCellRenderers;
+    case "int":
+    case "long":
+      return integerCellRenderers;
+    case "double":
+      return doubleCellRenderers;
+    default:
+      return stringCellRenderers;
+  }
+};
+var getCellRendererDescriptor = (availableRenderers, column) => {
+  if (isTypeDescriptor6(column.type)) {
+    const { renderer } = column.type;
+    if (isColumnTypeRenderer2(renderer)) {
+      const cellRenderer = availableRenderers.find(
+        (r) => r.name === renderer.name
+      );
+      if (cellRenderer) {
+        return cellRenderer;
+      }
+    }
+  }
+  const typedAvailableRenderers = getAvailableCellRenderers(column);
+  return typedAvailableRenderers[0];
+};
+var getFieldName = (input) => {
+  const saltFormField = input.closest(".saltFormField");
+  if (saltFormField && saltFormField.dataset.field) {
+    const {
+      dataset: { field }
+    } = saltFormField;
+    return field;
+  } else {
+    throw Error("named form field not found");
+  }
+};
+var 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}`);
+  }
+};
+var replaceColumn = (tableConfig, column) => ({
+  ...tableConfig,
+  columns: tableConfig.columns.map(
+    (col) => col.name === column.name ? column : col
+  )
+});
+var useColumnSettings = ({
+  column: columnProp,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  tableConfig
+}) => {
+  const [column, setColumn] = useState2(
+    getColumn(tableConfig.columns, columnProp)
+  );
+  const availableRenderers = useMemo2(() => {
+    return getAvailableCellRenderers(column);
+  }, [column]);
+  const selectedCellRendererRef = useRef3(
+    getCellRendererDescriptor(availableRenderers, column)
+  );
+  const handleInputCommit = useCallback3(() => {
+    onConfigChange(replaceColumn(tableConfig, column));
+  }, [column, onConfigChange, tableConfig]);
+  const handleChange = useCallback3(
+    (evt) => {
+      const input = evt.target;
+      const fieldName = getFieldName(input);
+      const { value } = input;
+      switch (fieldName) {
+        case "column-label":
+          setColumn((state) => ({ ...state, label: value }));
+          break;
+        case "column-name":
+          setColumn((state) => setCalculatedColumnName(state, value));
+          break;
+        case "column-width":
+          setColumn((state) => ({ ...state, width: parseInt(value) }));
+          break;
+        case "column-alignment":
+          if (isValidColumnAlignment(value)) {
+            const newColumn = {
+              ...column,
+              align: value || void 0
+            };
+            setColumn(newColumn);
+            onConfigChange(replaceColumn(tableConfig, newColumn));
+          }
+          break;
+        case "column-pin":
+          if (isValidPinLocation(value)) {
+            const newColumn = {
+              ...column,
+              pin: value || void 0
+            };
+            setColumn(newColumn);
+            onConfigChange(replaceColumn(tableConfig, newColumn));
+            break;
+          }
+      }
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const handleChangeRenderer = useCallback3(
+    (evt, cellRenderer) => {
+      if (cellRenderer) {
+        const newColumn = updateColumnRenderer(
+          column,
+          cellRenderer
+        );
+        selectedCellRendererRef.current = cellRenderer;
+        setColumn(newColumn);
+        onConfigChange(replaceColumn(tableConfig, newColumn));
+      }
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const handleChangeFormatting = useCallback3(
+    (formatting) => {
+      const newColumn = updateColumnType(column, formatting);
+      setColumn(newColumn);
+      onConfigChange(replaceColumn(tableConfig, newColumn));
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const navigateColumn = useCallback3(
+    ({ moveBy }) => {
+      const { columns } = tableConfig;
+      const index = columns.indexOf(column) + moveBy;
+      const newColumn = columns[index];
+      if (newColumn) {
+        selectedCellRendererRef.current = getCellRendererDescriptor(
+          availableRenderers,
+          newColumn
+        );
+        setColumn(newColumn);
+      }
+    },
+    [availableRenderers, column, tableConfig]
+  );
+  const navigateNextColumn = useCallback3(() => {
+    navigateColumn({ moveBy: 1 });
+  }, [navigateColumn]);
+  const navigatePrevColumn = useCallback3(() => {
+    navigateColumn({ moveBy: -1 });
+  }, [navigateColumn]);
+  const handleSaveCalculatedColumn = useCallback3(
+    (calculatedColumn) => {
+      onCreateCalculatedColumn({
+        ...column,
+        ...calculatedColumn
+      });
+    },
+    [column, onCreateCalculatedColumn]
+  );
+  return {
+    availableRenderers,
+    selectedCellRenderer: selectedCellRendererRef.current,
+    column,
+    navigateNextColumn,
+    navigatePrevColumn,
+    onChange: handleChange,
+    onChangeFormatting: handleChangeFormatting,
+    onChangeRenderer: handleChangeRenderer,
+    onInputCommit: handleInputCommit,
+    onSave: handleSaveCalculatedColumn
+  };
+};
+
+// src/column-expression-panel/ColumnExpressionPanel.tsx
+import { Dropdown as Dropdown2 } from "@vuu-ui/vuu-ui-controls";
+import {
+  getCalculatedColumnExpression,
+  getCalculatedColumnName,
+  getCalculatedColumnType
+} from "@vuu-ui/vuu-utils";
+import { Button, FormField as FormField3, FormFieldLabel as FormFieldLabel3, Input as Input2 } from "@salt-ds/core";
+import { useCallback as useCallback7, useRef as useRef7 } from "react";
+
 // src/column-expression-input/useColumnExpressionEditor.ts
 import {
   autocompletion,
@@ -242,7 +773,7 @@ import {
   startCompletion
 } from "@vuu-ui/vuu-codemirror";
 import { createEl } from "@vuu-ui/vuu-utils";
-import { useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef4 } from "react";
 
 // src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts
 import {
@@ -690,8 +1221,8 @@ var walkTree = (tree, source) => {
   const columnExpression = new ColumnExpression();
   const cursor = tree.cursor();
   do {
-    const { name, from, to } = cursor;
-    switch (name) {
+    const { name: name2, from, to } = cursor;
+    switch (name2) {
       case "AndCondition":
         columnExpression.setCondition("and");
         break;
@@ -876,7 +1407,7 @@ import {
   getValue,
   syntaxTree
 } from "@vuu-ui/vuu-codemirror";
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback4 } from "react";
 var applyPrefix = (completions, prefix) => prefix ? completions.map((completion) => {
   var _a;
   return {
@@ -885,6 +1416,13 @@ var applyPrefix = (completions, prefix) => prefix ? completions.map((completion)
   };
 }) : completions;
 var isOperator = (node) => node === void 0 ? false : ["Times", "Divide", "Plus", "Minus"].includes(node.name);
+var completionDone = (onSubmit) => ({
+  apply: () => {
+    onSubmit == null ? void 0 : onSubmit();
+  },
+  label: "Done",
+  boost: 10
+});
 var getLastChild = (node, context) => {
   var _a;
   let { lastChild: childNode } = node;
@@ -970,33 +1508,17 @@ var handleConditionalExpression = (node, context, suggestionProvider, maybeCompl
       });
     case "CloseBrace":
       if (maybeComplete) {
-        const options = [
-          {
-            apply: () => {
-              onSubmit == null ? void 0 : onSubmit();
-            },
-            label: "Save Expression",
-            boost: 10
-          }
-        ];
+        const options = [completionDone(onSubmit)];
         return { from: context.pos, options };
       }
   }
 };
 var promptToSave = (context, onSubmit) => {
-  const options = [
-    {
-      apply: () => {
-        onSubmit == null ? void 0 : onSubmit();
-      },
-      label: "Save Expression",
-      boost: 10
-    }
-  ];
+  const options = [completionDone(onSubmit)];
   return { from: context.pos, options };
 };
 var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
-  const makeSuggestions2 = useCallback2(
+  const makeSuggestions2 = useCallback4(
     async (context, suggestionType, optionalArgs = {}) => {
       const options = await suggestionProvider.getSuggestions(
         suggestionType,
@@ -1007,7 +1529,7 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
     },
     [suggestionProvider]
   );
-  return useCallback2(
+  return useCallback4(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -1020,7 +1542,6 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
       const nodeBefore = tree.resolveInner(pos, -1);
       const text = state.doc.toString();
       const maybeComplete = isCompleteExpression(text);
-      console.log({ nodeBeforeName: nodeBefore.name });
       switch (nodeBefore.name) {
         case "If": {
           console.log(`conditional expression  If`);
@@ -1036,9 +1557,6 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
                   columnName: getValue(lastChild, state)
                 });
               }
-              console.log(
-                `Condition last child Column, prev child ${prevChild == null ? void 0 : prevChild.name}`
-              );
             } else if ((lastChild == null ? void 0 : lastChild.name) === "RelationalOperator") {
               return makeSuggestions2(context, "expression");
             }
@@ -1101,9 +1619,6 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
                 prefix: ", "
               });
             }
-            console.log(
-              `we have a string, column is ${columnName} ${from} ${to}`
-            );
           }
           break;
         case "ArithmeticExpression":
@@ -1156,13 +1671,7 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
             if ((lastChild == null ? void 0 : lastChild.name) === "Column") {
               if (maybeComplete) {
                 const options = [
-                  {
-                    apply: () => {
-                      onSubmit.current();
-                    },
-                    label: "Save Expression",
-                    boost: 10
-                  }
+                  completionDone(onSubmit.current)
                 ];
                 const columnName = getValue(lastChild, state);
                 const columnOptions = await suggestionProvider.getSuggestions("operator", {
@@ -1175,31 +1684,14 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
               }
             } else if ((lastChild == null ? void 0 : lastChild.name) === "CallExpression") {
               if (maybeComplete) {
-                const options = [
-                  {
-                    apply: () => {
-                      onSubmit.current();
-                    },
-                    label: "Save Expression",
-                    boost: 10
-                  }
-                ];
                 return {
                   from: context.pos,
-                  options
+                  options: [completionDone(onSubmit.current)]
                 };
               }
             } else if ((lastChild == null ? void 0 : lastChild.name) === "ArithmeticExpression") {
               if (maybeComplete) {
-                let options = [
-                  {
-                    apply: () => {
-                      onSubmit.current();
-                    },
-                    label: "Save Expression",
-                    boost: 10
-                  }
-                ];
+                let options = [completionDone(onSubmit.current)];
                 const lastExpressionChild = getLastChild(lastChild, context);
                 if ((lastExpressionChild == null ? void 0 : lastExpressionChild.name) === "Column") {
                   const columnName = getValue(lastExpressionChild, state);
@@ -1263,9 +1755,6 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
                 return promptToSave(context, onSubmit.current);
               }
             }
-            console.log(
-              `does closebrace denote an ARgList or a parenthetised expression ? ${parentNode}`
-            );
           }
           break;
         default: {
@@ -1304,20 +1793,21 @@ var injectOptionContent = (completion) => {
 var useColumnExpressionEditor = ({
   onChange,
   onSubmitExpression,
+  source,
   suggestionProvider
 }) => {
-  const editorRef = useRef2(null);
-  const onSubmit = useRef2(noop);
-  const viewRef = useRef2();
-  const completionFn = useColumnAutoComplete(suggestionProvider, onSubmit);
-  const [createState, clearInput] = useMemo(() => {
+  const editorRef = useRef4(null);
+  const onSubmitRef = useRef4(noop);
+  const viewRef = useRef4();
+  const completionFn = useColumnAutoComplete(suggestionProvider, onSubmitRef);
+  const [createState, clearInput] = useMemo3(() => {
     const parseExpression = () => {
       const view = getView(viewRef);
-      const source = view.state.doc.toString();
+      const source2 = view.state.doc.toString();
       const tree = ensureSyntaxTree(view.state, view.state.doc.length, 5e3);
       if (tree) {
-        const expression = walkTree(tree, source);
-        return [source, expression];
+        const expression = walkTree(tree, source2);
+        return [source2, expression];
       } else {
         return ["", void 0];
       }
@@ -1325,21 +1815,9 @@ var useColumnExpressionEditor = ({
     const clearInput2 = () => {
       getView(viewRef).setState(createState2());
     };
-    const submitExpressionAndClearInput = () => {
-      const [source, expression] = parseExpression();
-      onSubmitExpression == null ? void 0 : onSubmitExpression(source, expression);
-      clearInput2();
-    };
-    const submitFilter = (key) => {
-      return keymap.of([
-        {
-          key,
-          run() {
-            submitExpressionAndClearInput();
-            return true;
-          }
-        }
-      ]);
+    const submitExpression = () => {
+      const [source2, expression] = parseExpression();
+      onSubmitExpression == null ? void 0 : onSubmitExpression(source2, expression);
     };
     const showSuggestions = (key) => {
       return keymap.of([
@@ -1353,7 +1831,7 @@ var useColumnExpressionEditor = ({
       ]);
     };
     const createState2 = () => EditorState2.create({
-      doc: "",
+      doc: source,
       extensions: [
         minimalSetup,
         autocompletion({
@@ -1368,14 +1846,13 @@ var useColumnExpressionEditor = ({
         }),
         columnExpressionLanguageSupport(),
         keymap.of(defaultKeymap),
-        submitFilter("Ctrl-Enter"),
         showSuggestions("ArrowDown"),
         EditorView2.updateListener.of((v) => {
           const view = getView(viewRef);
           if (v.docChanged) {
             startCompletion(view);
-            const source = view.state.doc.toString();
-            onChange == null ? void 0 : onChange(source, void 0);
+            const source2 = view.state.doc.toString();
+            onChange == null ? void 0 : onChange(source2);
           }
         }),
         // Enforces single line view
@@ -1386,15 +1863,12 @@ var useColumnExpressionEditor = ({
         vuuHighlighting
       ]
     });
-    onSubmit.current = () => {
-      submitExpressionAndClearInput();
-      setTimeout(() => {
-        getView(viewRef).focus();
-      }, 100);
+    onSubmitRef.current = () => {
+      submitExpression();
     };
     return [createState2, clearInput2];
-  }, [completionFn, onChange, onSubmitExpression]);
-  useEffect2(() => {
+  }, [completionFn, onChange, onSubmitExpression, source]);
+  useEffect3(() => {
     if (!editorRef.current) {
       throw Error("editor not in dom");
     }
@@ -1411,19 +1885,21 @@ var useColumnExpressionEditor = ({
 };
 
 // src/column-expression-input/ColumnExpressionInput.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var classBase4 = "vuuColumnExpressionInput";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var classBase7 = "vuuColumnExpressionInput";
 var ColumnExpressionInput = ({
   onChange,
   onSubmitExpression,
+  source = "",
   suggestionProvider
 }) => {
   const { editorRef } = useColumnExpressionEditor({
     onChange,
     onSubmitExpression,
+    source,
     suggestionProvider
   });
-  return /* @__PURE__ */ jsx4("div", { className: `${classBase4}`, ref: editorRef });
+  return /* @__PURE__ */ jsx7("div", { className: `${classBase7}`, ref: editorRef });
 };
 
 // src/column-expression-input/useColumnExpressionSuggestionProvider.ts
@@ -1439,7 +1915,7 @@ import {
   useTypeaheadSuggestions
 } from "@vuu-ui/vuu-data-react";
 import { isNumericColumn, isTextColumn } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback3, useRef as useRef3 } from "react";
+import { useCallback as useCallback5, useRef as useRef5 } from "react";
 
 // src/column-expression-input/column-function-descriptors.ts
 var columnFunctionDescriptors = [
@@ -1716,7 +2192,7 @@ var columnFunctionDescriptors = [
 // src/column-expression-input/functionDocInfo.ts
 import { createEl as createEl2 } from "@vuu-ui/vuu-utils";
 var functionDocInfo = ({
-  name,
+  name: name2,
   description,
   example,
   params,
@@ -1724,7 +2200,7 @@ var functionDocInfo = ({
 }) => {
   const rootElement = createEl2("div", "vuuFunctionDoc");
   const headingElement = createEl2("div", "function-heading");
-  const nameElement = createEl2("span", "function-name", name);
+  const nameElement = createEl2("span", "function-name", name2);
   const paramElement = createEl2("span", "param-list", params.description);
   const typeElement = createEl2("span", "function-type", type);
   headingElement.appendChild(nameElement);
@@ -1860,13 +2336,13 @@ var useColumnExpressionSuggestionProvider = ({
   columns,
   table
 }) => {
-  const findColumn3 = useCallback3(
-    (name) => name ? columns.find((col) => col.name === name) : void 0,
+  const findColumn2 = useCallback5(
+    (name2) => name2 ? columns.find((col) => col.name === name2) : void 0,
     [columns]
   );
-  const latestSuggestionsRef = useRef3();
+  const latestSuggestionsRef = useRef5();
   const getTypeaheadSuggestions = useTypeaheadSuggestions();
-  const getSuggestions = useCallback3(
+  const getSuggestions = useCallback5(
     async (suggestionType, options = NONE) => {
       const { columnName, functionName, operator, prefix } = options;
       switch (suggestionType) {
@@ -1881,18 +2357,18 @@ var useColumnExpressionSuggestionProvider = ({
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "operator": {
-          const suggestions = await getOperators(findColumn3(columnName));
+          const suggestions = await getOperators(findColumn2(columnName));
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "relational-operator": {
           const suggestions = await getRelationalOperators(
-            findColumn3(columnName)
+            findColumn2(columnName)
           );
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "condition-operator":
           {
-            const column = findColumn3(columnName);
+            const column = findColumn2(columnName);
             if (column) {
               const suggestions = await getConditionOperators(column);
               if (suggestions) {
@@ -1929,9 +2405,9 @@ var useColumnExpressionSuggestionProvider = ({
       }
       return [];
     },
-    [columns, findColumn3, getTypeaheadSuggestions, table]
+    [columns, findColumn2, getTypeaheadSuggestions, table]
   );
-  const isPartialMatch = useCallback3(
+  const isPartialMatch = useCallback5(
     async (valueType, columnName, pattern) => {
       const { current: latestSuggestions } = latestSuggestionsRef;
       let maybe = false;
@@ -1955,781 +2431,330 @@ var useColumnExpressionSuggestionProvider = ({
   };
 };
 
-// src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
-import { Button as Button2, Panel as Panel5 } from "@salt-ds/core";
-import cx6 from "classnames";
-import {
-  useCallback as useCallback8,
-  useState as useState3
-} from "react";
-
-// src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
-import { Stack } from "@vuu-ui/vuu-layout";
-import { StepperInput as StepperInput2 } from "@salt-ds/lab";
+// src/column-expression-panel/useColumnExpression.ts
 import {
-  Checkbox as Checkbox2,
-  FormField as FormField2,
-  FormFieldLabel as FormFieldLabel2,
-  Input,
-  Panel as Panel2,
-  RadioButton,
-  RadioButtonGroup,
-  Text as Text2
-} from "@salt-ds/core";
-import cx5 from "classnames";
-import {
-  useCallback as useCallback5,
-  useState
-} from "react";
-
-// src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
-import { getRegisteredCellRenderers } from "@vuu-ui/vuu-utils";
-import { Dropdown } from "@salt-ds/lab";
-import { Panel } from "@salt-ds/core";
-import cx4 from "classnames";
-import { useMemo as useMemo2 } from "react";
-
-// src/datagrid-configuration-ui/column-type-panel/NumericColumnPanel.tsx
-import { StepperInput, Switch as Switch2 } from "@salt-ds/lab";
-import { FormField, FormFieldLabel, Text } from "@salt-ds/core";
-import { useCallback as useCallback4 } from "react";
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var defaultValues = {
-  alignOnDecimals: false,
-  decimals: 4,
-  zeroPad: false
-};
-var getColumnValues = (columnType, gridDefaultValues) => {
-  const columnValue = typeof columnType === "object" && columnType.formatting ? columnType.formatting : {};
-  const properties = ["alignOnDecimals", "decimals", "zeroPad"];
-  return properties.reduce((configValues, property) => {
-    if (columnValue[property] !== void 0) {
-      return {
-        ...configValues,
-        [property]: columnValue[property]
-      };
-    } else if ((gridDefaultValues == null ? void 0 : gridDefaultValues[property]) !== void 0) {
-      return {
-        ...configValues,
-        [property]: gridDefaultValues[property]
-      };
-    }
-    return configValues;
-  }, defaultValues);
-};
-var NumericColumnPanel = ({
-  column,
-  dispatchColumnAction
-}) => {
-  const { decimals, alignOnDecimals, zeroPad } = getColumnValues(column == null ? void 0 : column.type);
-  const dispatchUpdate = useCallback4(
-    (values) => dispatchColumnAction({
-      type: "updateColumnTypeFormatting",
-      column,
-      ...values
-    }),
-    [column, dispatchColumnAction]
-  );
-  const handleChangeDecimals = useCallback4(
-    (value) => dispatchUpdate({ decimals: parseInt(value.toString(), 10) }),
-    [dispatchUpdate]
-  );
-  const handleChangeAlignOnDecimals = useCallback4(
-    (evt) => dispatchUpdate({ alignOnDecimals: Boolean(evt.target.value) }),
-    [dispatchUpdate]
-  );
-  const handleChangeZeroPad = useCallback4(
-    (evt) => dispatchUpdate({ zeroPad: Boolean(evt.target.value) }),
-    [dispatchUpdate]
-  );
-  switch (column.serverDataType) {
-    case "double":
-      return /* @__PURE__ */ jsxs4(Fragment, { children: [
-        /* @__PURE__ */ jsxs4(FormField, { labelPlacement: "top", children: [
-          /* @__PURE__ */ jsx5(FormFieldLabel, { children: "No of Decimals" }),
-          /* @__PURE__ */ jsx5(StepperInput, { value: decimals, onChange: handleChangeDecimals })
-        ] }),
-        /* @__PURE__ */ jsx5(
-          Switch2,
-          {
-            checked: alignOnDecimals,
-            label: "Align on decimals",
-            onChange: handleChangeAlignOnDecimals
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          Switch2,
-          {
-            checked: zeroPad,
-            label: "Zero pad",
-            onChange: handleChangeZeroPad
-          }
-        )
-      ] });
-    case "long":
-    case "int":
-      return /* @__PURE__ */ jsx5(Fragment, { children: /* @__PURE__ */ jsx5(Text, { children: "Work in progress" }) });
-    default:
-      return null;
+  getCalculatedColumnDetails,
+  setCalculatedColumnExpression,
+  setCalculatedColumnName as setCalculatedColumnName2,
+  setCalculatedColumnType
+} from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback6, useRef as useRef6, useState as useState3 } from "react";
+var applyDefaults = (column) => {
+  const [name2, expression, type] = getCalculatedColumnDetails(column);
+  if (type === "") {
+    return {
+      ...column,
+      name: `${name2}:${expression}:string`
+    };
+  } else {
+    return column;
   }
 };
-
-// src/datagrid-configuration-ui/column-type-panel/StringColumnPanel.tsx
-import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
-var StringColumnPanel = ({
-  column,
-  dispatchColumnAction
+var useColumnExpression = ({
+  column: columnProp,
+  onSave: onSaveProp
 }) => {
-  console.log({ column, dispatchColumnAction });
-  return /* @__PURE__ */ jsx6(Fragment2, { children: "what" });
+  const [column, setColumn] = useState3(
+    applyDefaults(columnProp)
+  );
+  const expressionRef = useRef6(getCalculatedColumnDetails(column)[1]);
+  const onChangeName = useCallback6((evt) => {
+    const { value } = evt.target;
+    setColumn((state) => setCalculatedColumnName2(state, value));
+  }, []);
+  const onChangeExpression = useCallback6((value) => {
+    expressionRef.current = value.trim();
+  }, []);
+  const onChangeType = useCallback6((evt, value) => {
+    if (typeof value === "string") {
+      setColumn((state) => setCalculatedColumnType(state, value));
+    }
+  }, []);
+  const onSave = useCallback6(() => {
+    const newColumn = setCalculatedColumnExpression(
+      column,
+      expressionRef.current
+    );
+    setColumn(newColumn);
+    onSaveProp(newColumn);
+  }, [column, onSaveProp]);
+  return {
+    column,
+    onChangeExpression,
+    onChangeName,
+    onChangeType,
+    onSave
+  };
 };
 
-// src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var classBase5 = "vuuColumnTypePanel";
-var integerCellRenderers = ["Default Renderer (int, long)"];
-var doubleCellRenderers = ["Default Renderer (double)"];
-var stringCellRenderers = ["Default Renderer (string)"];
-var getAvailableCellRenderers = (column) => {
-  const customCellRenderers = getRegisteredCellRenderers(column.serverDataType);
-  const customRendererNames = customCellRenderers.map((r) => r.name);
-  console.log({ customRendererNames });
-  switch (column.serverDataType) {
-    case "char":
-    case "string":
-      return stringCellRenderers;
-    case "int":
-    case "long":
-      return integerCellRenderers;
-    case "double":
-      return doubleCellRenderers.concat(customRendererNames);
-    default:
-      return stringCellRenderers;
-  }
-};
-var ColumnTypePanel = ({
-  className,
-  column,
-  dispatchColumnAction,
-  ...props
+// src/column-expression-panel/ColumnExpressionPanel.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var classBase8 = "vuuColumnExpressionPanel";
+var ColumnExpressionPanel = ({
+  column: columnProp,
+  onSave: onSaveProp,
+  tableConfig,
+  vuuTable
 }) => {
-  const content = useMemo2(() => {
-    switch (column.serverDataType) {
-      case "double":
-      case "int":
-      case "long":
-        return /* @__PURE__ */ jsx7(
-          NumericColumnPanel,
-          {
-            column,
-            dispatchColumnAction
-          }
-        );
-      default:
-        return /* @__PURE__ */ jsx7(
-          StringColumnPanel,
-          {
-            column,
-            dispatchColumnAction
-          }
-        );
-    }
-  }, [column, dispatchColumnAction]);
-  const { serverDataType = "string" } = column;
-  const availableRenderers = getAvailableCellRenderers(column);
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(
-      Dropdown,
-      {
-        className: cx4(`${classBase5}-renderer`),
-        fullWidth: true,
-        selected: availableRenderers[0],
-        source: availableRenderers
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      Panel,
-      {
-        ...props,
-        className: cx4(classBase5, className, `${classBase5}-${serverDataType}`),
-        children: content
-      }
-    )
+  const typeRef = useRef7(null);
+  const { column, onChangeExpression, onChangeName, onChangeType, onSave } = useColumnExpression({ column: columnProp, onSave: onSaveProp });
+  const suggestionProvider = useColumnExpressionSuggestionProvider({
+    columns: tableConfig.columns,
+    table: vuuTable
+  });
+  const handleSubmitExpression = useCallback7(() => {
+    requestAnimationFrame(() => {
+      var _a, _b;
+      (_b = (_a = typeRef.current) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs7("div", { className: classBase8, children: [
+    /* @__PURE__ */ jsx8("div", { className: "vuuColumnSettingsPanel-header", children: /* @__PURE__ */ jsx8("span", { children: "Calculation" }) }),
+    /* @__PURE__ */ jsxs7(FormField3, { "data-field": "column-name", children: [
+      /* @__PURE__ */ jsx8(FormFieldLabel3, { children: "Column Name" }),
+      /* @__PURE__ */ jsx8(
+        Input2,
+        {
+          className: "vuuInput",
+          onChange: onChangeName,
+          value: getCalculatedColumnName(column)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs7(FormField3, { "data-field": "column-expression", children: [
+      /* @__PURE__ */ jsx8(FormFieldLabel3, { children: "Expression" }),
+      /* @__PURE__ */ jsx8(
+        ColumnExpressionInput,
+        {
+          onChange: onChangeExpression,
+          onSubmitExpression: handleSubmitExpression,
+          source: getCalculatedColumnExpression(column),
+          suggestionProvider
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs7(FormField3, { "data-field": "type", children: [
+      /* @__PURE__ */ jsx8(FormFieldLabel3, { children: "Column type" }),
+      /* @__PURE__ */ jsx8(
+        Dropdown2,
+        {
+          className: `${classBase8}-type`,
+          onSelectionChange: onChangeType,
+          ref: typeRef,
+          selected: getCalculatedColumnType(column) || null,
+          source: ["double", "long", "string"],
+          width: "100%"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
+      /* @__PURE__ */ jsx8(Button, { className: `${classBase8}-buttonCancel`, tabIndex: -1, children: "cancel" }),
+      /* @__PURE__ */ jsx8(Button, { className: `${classBase8}-buttonApply`, tabIndex: -1, children: "apply" }),
+      /* @__PURE__ */ jsx8(
+        Button,
+        {
+          className: `${classBase8}-buttonSave`,
+          onClick: onSave,
+          variant: "cta",
+          children: "save"
+        }
+      )
+    ] })
   ] });
 };
 
-// src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var classBase6 = "vuuColumnSettingsPanel";
-var tabstripProps = {
-  className: "salt-density-high"
-};
+// src/column-settings/ColumnSettingsPanel.tsx
+import { VuuInput } from "@vuu-ui/vuu-ui-controls";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var classBase9 = "vuuColumnSettingsPanel";
 var ColumnSettingsPanel = ({
-  column,
-  dispatchColumnAction,
-  style: styleProp,
-  ...props
-}) => {
-  var _a, _b, _c, _d;
-  const [activeTab, setActiveTab] = useState(0);
-  const dispatchUpdate = useCallback5(
-    (values) => dispatchColumnAction({
-      type: "updateColumnProp",
-      column,
-      ...values
-    }),
-    [column, dispatchColumnAction]
-  );
-  const handleChangeAlign = useCallback5(
-    (evt) => dispatchUpdate({ align: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangePin = useCallback5(
-    (evt) => dispatchUpdate({ pin: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangeHidden = useCallback5(
-    (evt) => dispatchUpdate({ hidden: evt.target.checked }),
-    [dispatchUpdate]
-  );
-  const handleChangeLabel = useCallback5(
-    (evt) => dispatchUpdate({ label: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangeWidth = useCallback5(
-    (value) => dispatchUpdate({ width: parseInt(value.toString(), 10) }),
-    [dispatchUpdate]
-  );
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      className: classBase6,
-      ...props,
-      style: {
-        ...styleProp
-      },
-      children: [
-        /* @__PURE__ */ jsx8(Text2, { as: "h4", children: "Column Settings" }),
-        /* @__PURE__ */ jsxs6(
-          Stack,
-          {
-            active: activeTab,
-            className: cx5(`${classBase6}-columnTabs`),
-            onTabSelectionChanged: setActiveTab,
-            TabstripProps: tabstripProps,
-            children: [
-              /* @__PURE__ */ jsxs6(Panel2, { title: "Column", children: [
-                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Hidden" }),
-                  /* @__PURE__ */ jsx8(
-                    Checkbox2,
-                    {
-                      checked: column.hidden === true,
-                      onChange: handleChangeHidden
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Label" }),
-                  /* @__PURE__ */ jsx8(
-                    Input,
-                    {
-                      value: (_a = column.label) != null ? _a : column.name,
-                      onChange: handleChangeLabel
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Width" }),
-                  /* @__PURE__ */ jsx8(
-                    StepperInput2,
-                    {
-                      value: (_b = column.width) != null ? _b : 100,
-                      onChange: handleChangeWidth
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "ALign" }),
-                  /* @__PURE__ */ jsxs6(
-                    RadioButtonGroup,
-                    {
-                      "aria-label": "Column Align",
-                      value: (_c = column.align) != null ? _c : "left",
-                      onChange: handleChangeAlign,
-                      children: [
-                        /* @__PURE__ */ jsx8(RadioButton, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ jsx8(RadioButton, { label: "Right", value: "right" })
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Pin Column" }),
-                  /* @__PURE__ */ jsxs6(
-                    RadioButtonGroup,
-                    {
-                      "aria-label": "Pin Column",
-                      value: (_d = column.pin) != null ? _d : "",
-                      onChange: handleChangePin,
-                      children: [
-                        /* @__PURE__ */ jsx8(RadioButton, { label: "Do not pin", value: "" }),
-                        /* @__PURE__ */ jsx8(RadioButton, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ jsx8(RadioButton, { label: "Right", value: "right" })
-                      ]
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx8(
-                ColumnTypePanel,
-                {
-                  column,
-                  dispatchColumnAction,
-                  title: "Data Cell"
-                }
-              ),
-              /* @__PURE__ */ jsxs6(Panel2, { title: "Vuu", variant: "secondary", children: [
-                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Name" }),
-                  /* @__PURE__ */ jsx8(Input, { value: column.name })
-                ] }),
-                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Vuu Type" }),
-                  /* @__PURE__ */ jsx8(Input, { value: column.serverDataType })
-                ] })
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/datagrid-configuration-ui/settings-panel/GridSettingsPanel.tsx
-import {
-  FormField as FormField3,
-  FormFieldLabel as FormFieldLabel3,
-  Panel as Panel3,
-  RadioButton as RadioButton2,
-  RadioButtonGroup as RadioButtonGroup2,
-  Text as Text3
-} from "@salt-ds/core";
-import { StepperInput as StepperInput3 } from "@salt-ds/lab";
-import { useCallback as useCallback6 } from "react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var classBase7 = "vuuGridSettingsPanel";
-var GridSettingsPanel = ({
-  config,
-  dispatchColumnAction,
-  style: styleProp,
-  ...props
+  column: columnProp,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  tableConfig,
+  vuuTable
 }) => {
-  var _a;
-  const dispatchUpdate = useCallback6(
-    (values) => dispatchColumnAction({
-      type: "updateGridSettings",
-      ...values
-    }),
-    [dispatchColumnAction]
-  );
-  const handleChangeLabelFormatting = useCallback6(
-    (evt) => dispatchUpdate({
-      columnFormatHeader: evt.target.value
-    }),
-    [dispatchUpdate]
-  );
-  const handleChangeWidth = useCallback6(
-    (value) => dispatchUpdate({ columnDefaultWidth: parseInt(value.toString(), 10) }),
-    [dispatchUpdate]
-  );
-  return /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      className: classBase7,
-      ...props,
-      style: {
-        ...styleProp
-      },
-      children: [
-        /* @__PURE__ */ jsx9(Text3, { as: "h4", children: "Grid Settings" }),
-        /* @__PURE__ */ jsxs7(Panel3, { children: [
-          /* @__PURE__ */ jsxs7(FormField3, { labelPlacement: "left", children: [
-            /* @__PURE__ */ jsx9(FormFieldLabel3, { children: "Format column labels" }),
-            /* @__PURE__ */ jsxs7(
-              RadioButtonGroup2,
+  const isNewCalculatedColumn = columnProp.name === "::";
+  const {
+    availableRenderers,
+    selectedCellRenderer,
+    column,
+    navigateNextColumn,
+    navigatePrevColumn,
+    onChange,
+    onChangeFormatting,
+    onChangeRenderer,
+    onInputCommit,
+    onSave
+  } = useColumnSettings({
+    column: columnProp,
+    onConfigChange,
+    onCreateCalculatedColumn,
+    tableConfig
+  });
+  const {
+    serverDataType,
+    align = getDefaultAlignment(serverDataType),
+    name: name2,
+    label = name2,
+    pin,
+    width
+  } = column;
+  return /* @__PURE__ */ jsxs8("div", { className: classBase9, children: [
+    /* @__PURE__ */ jsx9("div", { className: `${classBase9}-header`, children: /* @__PURE__ */ jsx9("span", { children: name2 }) }),
+    /* @__PURE__ */ jsxs8(FormField4, { "data-field": "column-label", children: [
+      /* @__PURE__ */ jsx9(FormFieldLabel4, { children: "Column Label" }),
+      /* @__PURE__ */ jsx9(
+        VuuInput,
+        {
+          className: "vuuInput",
+          onChange,
+          onCommit: onInputCommit,
+          value: label
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8(FormField4, { "data-field": "column-width", children: [
+      /* @__PURE__ */ jsx9(FormFieldLabel4, { children: "Column Width" }),
+      /* @__PURE__ */ jsx9(
+        VuuInput,
+        {
+          className: "vuuInput",
+          onChange,
+          value: width,
+          onCommit: onInputCommit
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8(FormField4, { "data-field": "column-alignment", children: [
+      /* @__PURE__ */ jsx9(FormFieldLabel4, { children: "Alignment" }),
+      /* @__PURE__ */ jsxs8(
+        ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange,
+          value: align,
+          children: [
+            /* @__PURE__ */ jsx9(
+              ToggleButton,
               {
-                "aria-label": "Format column labels",
-                value: config.columnFormatHeader,
-                onChange: handleChangeLabelFormatting,
-                children: [
-                  /* @__PURE__ */ jsx9(RadioButton2, { label: "No Formatting", value: void 0 }),
-                  /* @__PURE__ */ jsx9(RadioButton2, { label: "Capitalize", value: "capitalize" }),
-                  /* @__PURE__ */ jsx9(RadioButton2, { label: "Uppercase", value: "uppercase" })
-                ]
+                "data-icon": "align-left",
+                className: "vuuIconToggleButton",
+                value: "left"
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs7(FormField3, { labelPlacement: "left", children: [
-            /* @__PURE__ */ jsx9(FormFieldLabel3, { children: "Default Column Width" }),
+            ),
             /* @__PURE__ */ jsx9(
-              StepperInput3,
+              ToggleButton,
               {
-                value: (_a = config.columnDefaultWidth) != null ? _a : 100,
-                onChange: handleChangeWidth
+                "data-icon": "align-right",
+                className: "vuuIconToggleButton",
+                value: "right"
               }
             )
-          ] })
-        ] })
-      ]
-    }
-  );
-};
-
-// src/datagrid-configuration-ui/settings-panel/useGridSettings.ts
-import { useReducer } from "react";
-import { moveItem } from "@vuu-ui/vuu-ui-controls";
-import { fromServerDataType } from "@vuu-ui/vuu-utils";
-var gridSettingsReducer = (state, action) => {
-  console.log(`gridSettingsReducer ${action.type}`);
-  switch (action.type) {
-    case "addColumn":
-      return addColumn(state, action);
-    case "addCalculatedColumn":
-      return addCalculatedColumn(state, action);
-    case "moveColumn":
-      return moveColumn(state, action);
-    case "removeColumn":
-      return removeColumn(state, action);
-    case "updateColumn":
-      return state;
-    case "updateColumnProp":
-      return updateColumnProp(state, action);
-    case "updateGridSettings":
-      return updateGridSettings(state, action);
-    case "updateColumnTypeFormatting":
-      return updateColumnTypeFormatting(state, action);
-    default:
-      return state;
-  }
-};
-var useGridSettings = (config) => {
-  const [state, dispatchColumnAction] = useReducer(
-    gridSettingsReducer,
-    config
-  );
-  return {
-    gridSettings: state,
-    dispatchColumnAction
-  };
-};
-function addColumn(state, { column, columns, index = -1 }) {
-  const { columns: stateColumns } = state;
-  if (index === -1) {
-    if (Array.isArray(columns)) {
-      return { ...state, columns: stateColumns.concat(columns) };
-    } else if (column) {
-      return { ...state, columns: stateColumns.concat(column) };
-    }
-  }
-  return state;
-}
-function addCalculatedColumn(state, { columnName, columnType, expression }) {
-  const { columns: stateColumns } = state;
-  const calculatedColumn = {
-    name: columnName,
-    expression,
-    serverDataType: columnType
-  };
-  return { ...state, columns: stateColumns.concat(calculatedColumn) };
-}
-function removeColumn(state, { column }) {
-  const { columns: stateColumns } = state;
-  return {
-    ...state,
-    columns: stateColumns.filter((col) => col.name !== column.name)
-  };
-}
-function moveColumn(state, { column, moveBy, moveFrom, moveTo }) {
-  const { columns: stateColumns } = state;
-  if (column && typeof moveBy === "number") {
-    const idx = stateColumns.indexOf(column);
-    const newColumns = stateColumns.slice();
-    const [movedColumns] = newColumns.splice(idx, 1);
-    newColumns.splice(idx + moveBy, 0, movedColumns);
-    return {
-      ...state,
-      columns: newColumns
-    };
-  } else if (typeof moveFrom === "number" && typeof moveTo === "number") {
-    return {
-      ...state,
-      columns: moveItem(stateColumns, moveFrom, moveTo)
-    };
-  } else {
-    return state;
-  }
-}
-function updateColumnProp(state, { align, column, hidden, label, width }) {
-  let { columns: stateColumns } = state;
-  if (align === "left" || align === "right") {
-    stateColumns = replaceColumn(stateColumns, { ...column, align });
-  }
-  if (typeof hidden === "boolean") {
-    stateColumns = replaceColumn(stateColumns, { ...column, hidden });
-  }
-  if (typeof label === "string") {
-    stateColumns = replaceColumn(stateColumns, { ...column, label });
-  }
-  if (typeof width === "number") {
-    stateColumns = replaceColumn(stateColumns, { ...column, width });
-  }
-  return {
-    ...state,
-    columns: stateColumns
-  };
-}
-function updateGridSettings(state, { columnFormatHeader }) {
-  return {
-    ...state,
-    columnFormatHeader: columnFormatHeader != null ? columnFormatHeader : state.columnFormatHeader
-  };
-}
-function updateColumnTypeFormatting(state, {
-  alignOnDecimals,
-  column,
-  decimals,
-  zeroPad
-}) {
-  const { columns: stateColumns } = state;
-  const targetColumn = stateColumns.find((col) => col.name === column.name);
-  if (targetColumn) {
-    const {
-      serverDataType = "string",
-      type: columnType = fromServerDataType(serverDataType)
-    } = column;
-    const type = typeof columnType === "string" ? {
-      name: columnType
-    } : {
-      ...columnType
-    };
-    if (typeof alignOnDecimals === "boolean") {
-      type.formatting = {
-        ...type.formatting,
-        alignOnDecimals
-      };
-    }
-    if (typeof decimals === "number") {
-      type.formatting = {
-        ...type.formatting,
-        decimals
-      };
-    }
-    if (typeof zeroPad === "boolean") {
-      type.formatting = {
-        ...type.formatting,
-        zeroPad
-      };
-    }
-    return {
-      ...state,
-      columns: replaceColumn(stateColumns, { ...column, type })
-    };
-  } else {
-    return state;
-  }
-}
-function replaceColumn(columns, column) {
-  return columns.map((col) => col.name === column.name ? column : col);
-}
-
-// src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
-import { Stack as Stack2 } from "@vuu-ui/vuu-layout";
-
-// src/datagrid-configuration-ui/calculated-column-panel/CalculatedColumnPanel.tsx
-import {
-  Button,
-  FormField as FormField4,
-  FormFieldLabel as FormFieldLabel4,
-  Input as Input2,
-  Panel as Panel4,
-  Text as Text4
-} from "@salt-ds/core";
-import {
-  useCallback as useCallback7,
-  useRef as useRef4,
-  useState as useState2
-} from "react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-var CalculatedColumnPanel = ({
-  columns,
-  dispatchColumnAction,
-  table
-}) => {
-  const [columnName, setColumnName] = useState2("");
-  const [, setExpression] = useState2();
-  const sourceRef = useRef4("");
-  const suggestionProvider = useColumnExpressionSuggestionProvider({
-    columns,
-    table
-  });
-  const handleChangeName = useCallback7(
-    (evt) => {
-      const { value } = evt.target;
-      setColumnName(value);
-    },
-    []
-  );
-  const handleChangeExpression = useCallback7((source) => {
-    sourceRef.current = source;
-  }, []);
-  const handleSubmitExpression = useCallback7(
-    (source, expression) => {
-      console.log({ source });
-      setExpression(expression);
-    },
-    []
-  );
-  const handleSave = useCallback7(() => {
-    if (sourceRef.current) {
-      console.log(
-        `save expression ${JSON.stringify(sourceRef.current, null, 2)}`
-      );
-      dispatchColumnAction({
-        type: "addCalculatedColumn",
-        columnName,
-        expression: sourceRef.current,
-        columnType: "string"
-      });
-    }
-  }, [columnName, dispatchColumnAction]);
-  return /* @__PURE__ */ jsxs8(Panel4, { className: "vuuCalculatedColumnPanel", title: "Define Computed Column", children: [
-    /* @__PURE__ */ jsx10(Text4, { styleAs: "h4", children: "Define Computed Column" }),
-    /* @__PURE__ */ jsxs8(FormField4, { labelPlacement: "left", children: [
-      /* @__PURE__ */ jsx10(FormFieldLabel4, { children: "Column Name" }),
-      /* @__PURE__ */ jsx10(Input2, { value: columnName, onChange: handleChangeName })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8(FormField4, { "data-field": "column-pin", children: [
+      /* @__PURE__ */ jsx9(FormFieldLabel4, { children: "Pin Column" }),
+      /* @__PURE__ */ jsxs8(
+        ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange,
+          value: pin != null ? pin : "",
+          children: [
+            /* @__PURE__ */ jsx9(
+              ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "cross-circle",
+                value: ""
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "pin-left",
+                value: "left"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "pin-float",
+                value: "floating"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "pin-right",
+                value: "right"
+              }
+            )
+          ]
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx10(
-      ColumnExpressionInput,
+    /* @__PURE__ */ jsx9(
+      ColumnFormattingPanel,
       {
-        onChange: handleChangeExpression,
-        onSubmitExpression: handleSubmitExpression,
-        suggestionProvider
+        availableRenderers,
+        selectedCellRenderer,
+        column,
+        onChangeFormatting,
+        onChangeRenderer
       }
     ),
-    /* @__PURE__ */ jsx10("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx10(Button, { onClick: handleSave, children: "Add Column" }) })
-  ] });
-};
-
-// src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var classBase8 = "vuuDatagridSettingsPanel";
-var getTabLabel = () => void 0;
-var icons = [
-  "table-settings",
-  "column-chooser",
-  "column-settings",
-  "define-column"
-];
-var getTabIcon = (component, tabIndex) => icons[tabIndex];
-var DatagridSettingsPanel = ({
-  availableColumns,
-  className,
-  gridConfig,
-  onCancel,
-  onConfigChange,
-  ...props
-}) => {
-  var _a;
-  console.log(`DatagridSettingsPanel render`);
-  const [selectedTabIndex, setSelectedTabIndex] = useState3(0);
-  const { gridSettings, dispatchColumnAction } = useGridSettings(gridConfig);
-  const [selectedColumnName, setSelectedColumnName] = useState3(
-    null
-  );
-  const handleColumnSelected = useCallback8(
-    (selected) => {
-      setSelectedColumnName(selected ? selected.name : null);
-    },
-    []
-  );
-  const handleApply = useCallback8(
-    (evt, closePanel = false) => {
-      console.log(`1) DataGridSettingsPanel fire onConfigChange`);
-      onConfigChange == null ? void 0 : onConfigChange(gridSettings, closePanel);
-    },
-    [gridSettings, onConfigChange]
-  );
-  const handleTabSelectionChanged = useCallback8((selectedTabIndex2) => {
-    setSelectedTabIndex(selectedTabIndex2);
-  }, []);
-  const handleSave = useCallback8(
-    (evt) => handleApply(evt, true),
-    [handleApply]
-  );
-  const selectedColumn = selectedColumnName === null ? null : (_a = gridSettings.columns.find((col) => col.name === selectedColumnName)) != null ? _a : null;
-  const tabstripProps2 = {
-    activeTabIndex: selectedTabIndex,
-    allowRenameTab: false,
-    orientation: "vertical"
-  };
-  const handleAddCalculatedColumn = useCallback8(
-    () => setSelectedTabIndex(3),
-    []
-  );
-  const panelShift = selectedTabIndex === 2 ? "right" : void 0;
-  return /* @__PURE__ */ jsxs9("div", { ...props, className: cx6(classBase8, className), children: [
-    /* @__PURE__ */ jsxs9(
-      Stack2,
+    isCalculatedColumn(column.name) ? /* @__PURE__ */ jsx9(
+      ColumnExpressionPanel,
+      {
+        column,
+        onSave,
+        tableConfig,
+        vuuTable
+      }
+    ) : /* @__PURE__ */ jsxs8(
+      "div",
       {
-        TabstripProps: tabstripProps2,
-        className: `${classBase8}-stack`,
-        getTabIcon,
-        getTabLabel,
-        active: selectedTabIndex === 2 ? 1 : selectedTabIndex,
-        onTabSelectionChanged: handleTabSelectionChanged,
+        className: `${classBase9}-buttonBar`,
+        "data-align": isNewCalculatedColumn ? "right" : void 0,
         children: [
-          /* @__PURE__ */ jsx11(
-            GridSettingsPanel,
+          /* @__PURE__ */ jsx9(
+            Button2,
             {
-              config: gridSettings,
-              dispatchColumnAction
+              className: `${classBase9}-buttonNavPrev`,
+              variant: "secondary",
+              "data-icon": "arrow-left",
+              onClick: navigatePrevColumn,
+              children: "PREVIOUS"
             }
           ),
-          /* @__PURE__ */ jsx11("div", { className: `${classBase8}-columnPanels`, "data-align": panelShift, children: selectedColumn === null ? /* @__PURE__ */ jsx11(Panel5, { className: "vuuColumnSettingsPanel", children: "Select a column" }) : /* @__PURE__ */ jsx11(
-            ColumnSettingsPanel,
-            {
-              column: selectedColumn,
-              dispatchColumnAction,
-              style: { background: "white", flex: "1 0 150px" }
-            }
-          ) }),
-          /* @__PURE__ */ jsx11("div", { title: "Column Settings", children: "Column Settings" }),
-          /* @__PURE__ */ jsx11(
-            CalculatedColumnPanel,
+          /* @__PURE__ */ jsx9(
+            Button2,
             {
-              columns: gridSettings.columns,
-              dispatchColumnAction,
-              table: { module: "SIMUL", table: "instruments" }
+              className: `${classBase9}-buttonNavNext`,
+              variant: "secondary",
+              "data-icon": "arrow-right",
+              onClick: navigateNextColumn,
+              children: "NEXT"
             }
           )
         ]
       }
-    ),
-    /* @__PURE__ */ jsxs9("div", { className: `${classBase8}-buttonBar`, children: [
-      /* @__PURE__ */ jsx11(Button2, { onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx11(Button2, { onClick: handleApply, children: "Apply" }),
-      /* @__PURE__ */ jsx11(Button2, { onClick: handleSave, children: "Save" })
-    ] })
+    )
   ] });
 };
 
 // src/datasource-stats/DatasourceStats.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
-import cx7 from "classnames";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
-var classBase9 = "vuuDatasourceStats";
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import cx6 from "classnames";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var classBase10 = "vuuDatasourceStats";
 var numberFormatter = new Intl.NumberFormat();
 var DataSourceStats = ({
   className: classNameProp,
@@ -2737,39 +2762,41 @@ var DataSourceStats = ({
 }) => {
   const [range, setRange] = useState4(dataSource.range);
   const [size, setSize] = useState4(dataSource.size);
-  useEffect3(() => {
+  useEffect4(() => {
     setSize(dataSource.size);
     dataSource.on("resize", setSize);
     dataSource.on("range", setRange);
   }, [dataSource]);
-  const className = cx7(classBase9, classNameProp);
+  const className = cx6(classBase10, classNameProp);
   const from = numberFormatter.format(range.from);
   const to = numberFormatter.format(range.to - 1);
   const value = numberFormatter.format(size);
-  return /* @__PURE__ */ jsxs10("div", { className, children: [
-    /* @__PURE__ */ jsx12("span", { children: "Showing rows" }),
-    /* @__PURE__ */ jsx12("span", { className: `${classBase9}-range`, children: from }),
-    /* @__PURE__ */ jsx12("span", { className: `${classBase9}-range`, children: to }),
-    /* @__PURE__ */ jsx12("span", { children: "of" }),
-    /* @__PURE__ */ jsx12("span", { className: `${classBase9}-size`, children: value })
+  return /* @__PURE__ */ jsxs9("div", { className, children: [
+    /* @__PURE__ */ jsx10("span", { className: `${classBase10}-label`, children: "Row count" }),
+    /* @__PURE__ */ jsx10("span", { className: `${classBase10}-range`, children: from }),
+    /* @__PURE__ */ jsx10("span", { children: "-" }),
+    /* @__PURE__ */ jsx10("span", { className: `${classBase10}-range`, children: to }),
+    /* @__PURE__ */ jsx10("span", { children: "of" }),
+    /* @__PURE__ */ jsx10("span", { className: `${classBase10}-size`, children: value })
   ] });
 };
 
 // src/table-settings/TableSettingsPanel.tsx
 import {
+  Button as Button4,
   FormField as FormField5,
   FormFieldLabel as FormFieldLabel5,
-  Input as Input3,
-  ToggleButton,
-  ToggleButtonGroup
+  Input as Input4,
+  ToggleButton as ToggleButton2,
+  ToggleButtonGroup as ToggleButtonGroup2
 } from "@salt-ds/core";
 
 // src/table-settings/useTableSettings.ts
-import { useLayoutEffectSkipFirst as useLayoutEffectSkipFirst2 } from "@vuu-ui/vuu-layout";
+import { useLayoutEffectSkipFirst as useLayoutEffectSkipFirst3 } from "@vuu-ui/vuu-layout";
 
 // ../vuu-table/src/table/ColumnResizer.tsx
-import { useCallback as useCallback9, useRef as useRef5 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { useCallback as useCallback8, useRef as useRef8 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 
 // ../vuu-table/src/table/context-menu/buildContextMenuDescriptors.ts
 import { isNumericColumn as isNumericColumn2 } from "@vuu-ui/vuu-utils";
@@ -2794,35 +2821,36 @@ import {
   buildColumnMap,
   getColumnStyle as getColumnStyle3,
   isGroupColumn as isGroupColumn2,
-  metadataKeys as metadataKeys5,
+  metadataKeys as metadataKeys6,
   notHidden as notHidden2,
   visibleColumnAtIndex
 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback16, useMemo as useMemo3 } from "react";
+import { useCallback as useCallback15, useMemo as useMemo4 } from "react";
 
 // ../vuu-table/src/table/TableRow.tsx
 import {
   isGroupColumn,
   isJsonColumn,
   isJsonGroup,
-  metadataKeys as metadataKeys4,
-  notHidden
+  metadataKeys as metadataKeys5,
+  notHidden,
+  RowSelected
 } from "@vuu-ui/vuu-utils";
-import cx9 from "classnames";
-import { memo as memo2, useCallback as useCallback12 } from "react";
+import cx8 from "classnames";
+import { memo as memo2, useCallback as useCallback11 } from "react";
 
 // ../vuu-table/src/table/TableCell.tsx
-import { getColumnStyle, metadataKeys as metadataKeys2 } from "@vuu-ui/vuu-utils";
+import { getColumnStyle, metadataKeys as metadataKeys3 } from "@vuu-ui/vuu-utils";
 import { EditableLabel } from "@vuu-ui/vuu-ui-controls";
-import cx8 from "classnames";
+import cx7 from "classnames";
 import {
   memo,
-  useCallback as useCallback10,
-  useRef as useRef6,
+  useCallback as useCallback9,
+  useRef as useRef9,
   useState as useState5
 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var { KEY: KEY2 } = metadataKeys2;
+import { jsx as jsx12 } from "react/jsx-runtime";
+var { KEY: KEY3 } = metadataKeys3;
 var TableCell = memo(
   ({
     className: classNameProp,
@@ -2831,7 +2859,7 @@ var TableCell = memo(
     onClick,
     row
   }) => {
-    const labelFieldRef = useRef6(null);
+    const labelFieldRef = useRef9(null);
     const {
       align,
       CellRenderer,
@@ -2853,7 +2881,7 @@ var TableCell = memo(
         setEditing(true);
       }
     };
-    const handleClick = useCallback10(
+    const handleClick = useCallback9(
       (evt) => {
         onClick == null ? void 0 : onClick(evt, column);
       },
@@ -2874,7 +2902,7 @@ var TableCell = memo(
         (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
       }
     };
-    const className = cx8(classNameProp, {
+    const className = cx7(classNameProp, {
       vuuAlignRight: align === "right",
       vuuPinFloating: pin === "floating",
       vuuPinLeft: pin === "left",
@@ -2882,7 +2910,7 @@ var TableCell = memo(
       "vuuTableCell-resizing": resizing
     }) || void 0;
     const style = getColumnStyle(column);
-    return editable ? /* @__PURE__ */ jsx14(
+    return editable ? /* @__PURE__ */ jsx12(
       "div",
       {
         className,
@@ -2890,7 +2918,7 @@ var TableCell = memo(
         role: "cell",
         style,
         onKeyDown: handleTitleKeyDown,
-        children: /* @__PURE__ */ jsx14(
+        children: /* @__PURE__ */ jsx12(
           EditableLabel,
           {
             editing,
@@ -2906,14 +2934,14 @@ var TableCell = memo(
           "title"
         )
       }
-    ) : /* @__PURE__ */ jsx14(
+    ) : /* @__PURE__ */ jsx12(
       "div",
       {
         className,
         role: "cell",
         style,
         onClick: handleClick,
-        children: CellRenderer ? /* @__PURE__ */ jsx14(CellRenderer, { column, columnMap, row }) : value
+        children: CellRenderer ? /* @__PURE__ */ jsx12(CellRenderer, { column, columnMap, row }) : value
       }
     );
   },
@@ -2921,22 +2949,22 @@ var TableCell = memo(
 );
 TableCell.displayName = "TableCell";
 function cellValuesAreEqual(prev, next) {
-  return prev.column === next.column && prev.onClick === next.onClick && prev.row[KEY2] === next.row[KEY2] && prev.row[prev.column.key] === next.row[next.column.key];
+  return prev.column === next.column && prev.onClick === next.onClick && prev.row[KEY3] === next.row[KEY3] && prev.row[prev.column.key] === next.row[next.column.key];
 }
 
 // ../vuu-table/src/table/TableGroupCell.tsx
 import {
   getColumnStyle as getColumnStyle2,
   getGroupValueAndOffset,
-  metadataKeys as metadataKeys3
+  metadataKeys as metadataKeys4
 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback11 } from "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-var { IS_LEAF } = metadataKeys3;
+import { useCallback as useCallback10 } from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var { IS_LEAF } = metadataKeys4;
 var TableGroupCell = ({ column, onClick, row }) => {
   const { columns } = column;
   const [value, offset] = getGroupValueAndOffset(columns, row);
-  const handleClick = useCallback11(
+  const handleClick = useCallback10(
     (evt) => {
       onClick == null ? void 0 : onClick(evt, column);
     },
@@ -2944,8 +2972,8 @@ var TableGroupCell = ({ column, onClick, row }) => {
   );
   const style = getColumnStyle2(column);
   const isLeaf = row[IS_LEAF];
-  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx15("span", { className: "vuuTableGroupCell-spacer" }, i));
-  return /* @__PURE__ */ jsxs11(
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx13("span", { className: "vuuTableGroupCell-spacer" }, i));
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: "vuuTableGroupCell vuuPinLeft",
@@ -2954,17 +2982,18 @@ var TableGroupCell = ({ column, onClick, row }) => {
       style,
       children: [
         spacers,
-        isLeaf ? null : /* @__PURE__ */ jsx15("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
-        /* @__PURE__ */ jsx15("span", { children: value })
+        isLeaf ? null : /* @__PURE__ */ jsx13("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
+        /* @__PURE__ */ jsx13("span", { children: value })
       ]
     }
   );
 };
 
 // ../vuu-table/src/table/TableRow.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-var { IDX, IS_EXPANDED, SELECTED } = metadataKeys4;
-var classBase10 = "vuuTableRow";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var { IDX, IS_EXPANDED, SELECTED } = metadataKeys5;
+var { True, First, Last } = RowSelected;
+var classBase11 = "vuuTableRow";
 var TableRow = memo2(function Row({
   columnMap,
   columns,
@@ -2977,14 +3006,16 @@ var TableRow = memo2(function Row({
   const {
     [IDX]: rowIndex,
     [IS_EXPANDED]: isExpanded,
-    [SELECTED]: isSelected
+    [SELECTED]: selectionStatus
   } = row;
-  const className = cx9(classBase10, {
-    [`${classBase10}-even`]: rowIndex % 2 === 0,
-    [`${classBase10}-expanded`]: isExpanded,
-    [`${classBase10}-preSelected`]: isSelected === 2
+  const className = cx8(classBase11, {
+    [`${classBase11}-even`]: rowIndex % 2 === 0,
+    [`${classBase11}-expanded`]: isExpanded,
+    [`${classBase11}-selected`]: selectionStatus & True,
+    [`${classBase11}-selectedStart`]: selectionStatus & First,
+    [`${classBase11}-selectedEnd`]: selectionStatus & Last
   });
-  const handleRowClick = useCallback12(
+  const handleRowClick = useCallback11(
     (evt) => {
       const rangeSelect = evt.shiftKey;
       const keepExistingSelection = evt.ctrlKey || evt.metaKey;
@@ -2992,7 +3023,7 @@ var TableRow = memo2(function Row({
     },
     [onClick, row]
   );
-  const handleGroupCellClick = useCallback12(
+  const handleGroupCellClick = useCallback11(
     (evt, column) => {
       if (isGroupColumn(column) || isJsonGroup(column, row)) {
         evt.stopPropagation();
@@ -3001,10 +3032,10 @@ var TableRow = memo2(function Row({
     },
     [onToggleGroup, row]
   );
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
-      "aria-selected": isSelected === 1 ? true : void 0,
+      "aria-selected": selectionStatus & True ? true : void 0,
       "aria-rowindex": rowIndex,
       className,
       onClick: handleRowClick,
@@ -3013,12 +3044,12 @@ var TableRow = memo2(function Row({
         transform: `translate3d(0px, ${offset}px, 0px)`
       },
       children: [
-        virtualColSpan > 0 ? /* @__PURE__ */ jsx16("div", { role: "cell", style: { width: virtualColSpan } }) : null,
+        virtualColSpan > 0 ? /* @__PURE__ */ jsx14("div", { role: "cell", style: { width: virtualColSpan } }) : null,
         columns.filter(notHidden).map((column) => {
           const isGroup = isGroupColumn(column);
           const isJsonCell = isJsonColumn(column);
           const Cell = isGroup ? TableGroupCell : TableCell;
-          return /* @__PURE__ */ jsx16(
+          return /* @__PURE__ */ jsx14(
             Cell,
             {
               column,
@@ -3035,37 +3066,38 @@ var TableRow = memo2(function Row({
 });
 
 // ../vuu-table/src/table/TableGroupHeaderCell.tsx
-import cx10 from "classnames";
-import { useRef as useRef8 } from "react";
+import cx9 from "classnames";
+import { useRef as useRef11 } from "react";
 
 // ../vuu-table/src/table/useTableColumnResize.tsx
-import { useCallback as useCallback13, useRef as useRef7 } from "react";
+import { useCallback as useCallback12, useRef as useRef10 } from "react";
 
 // ../vuu-table/src/table/TableGroupHeaderCell.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 
 // ../vuu-table/src/table/TableHeaderCell.tsx
-import cx13 from "classnames";
-import { useCallback as useCallback15, useRef as useRef9 } from "react";
+import cx12 from "classnames";
+import { useCallback as useCallback14, useRef as useRef12 } from "react";
 
 // ../vuu-table/src/table/SortIndicator.tsx
-import cx11 from "classnames";
+import cx10 from "classnames";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 
 // ../vuu-table/src/table/TableHeaderCell.tsx
 import { useContextMenu as useContextMenu2 } from "@vuu-ui/vuu-popups";
 
 // ../vuu-table/src/table/filter-indicator.tsx
 import { useContextMenu } from "@vuu-ui/vuu-popups";
-import cx12 from "classnames";
-import { useCallback as useCallback14 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import cx11 from "classnames";
+import { useCallback as useCallback13 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
 
 // ../vuu-table/src/table/TableHeaderCell.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 
 // ../vuu-table/src/table/RowBasedTable.tsx
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
-var { RENDER_IDX } = metadataKeys5;
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var { RENDER_IDX } = metadataKeys6;
 
 // ../vuu-table/src/table/useTable.ts
 import { useContextMenu as usePopupContextMenu } from "@vuu-ui/vuu-popups";
@@ -3073,14 +3105,14 @@ import {
   applySort,
   buildColumnMap as buildColumnMap2,
   isJsonGroup as isJsonGroup2,
-  metadataKeys as metadataKeys9,
-  moveItem as moveItem3
+  metadataKeys as metadataKeys10,
+  moveItemDeprecated as moveItemDeprecated2
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback26,
-  useEffect as useEffect8,
-  useMemo as useMemo9,
-  useRef as useRef19,
+  useCallback as useCallback25,
+  useEffect as useEffect9,
+  useMemo as useMemo10,
+  useRef as useRef22,
   useState as useState9
 } from "react";
 
@@ -3089,22 +3121,22 @@ import {
   isVuuFeatureAction,
   isVuuFeatureInvocation
 } from "@vuu-ui/vuu-data-react";
-import { getFullRange, metadataKeys as metadataKeys6, WindowRange } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback17, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef10, useState as useState6 } from "react";
-var { SELECTED: SELECTED2 } = metadataKeys6;
+import { getFullRange, metadataKeys as metadataKeys7, WindowRange } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback16, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef13, useState as useState6 } from "react";
+var { SELECTED: SELECTED2 } = metadataKeys7;
 
 // ../vuu-table/src/table/useDraggableColumn.ts
 import { useDragDropNext as useDragDrop } from "@vuu-ui/vuu-ui-controls";
-import { useCallback as useCallback18, useRef as useRef11 } from "react";
+import { useCallback as useCallback17, useRef as useRef14 } from "react";
 
 // ../vuu-table/src/table/useKeyboardNavigation.ts
 import { withinRange } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback19,
-  useEffect as useEffect5,
+  useCallback as useCallback18,
+  useEffect as useEffect6,
   useLayoutEffect,
-  useMemo as useMemo5,
-  useRef as useRef12
+  useMemo as useMemo6,
+  useRef as useRef15
 } from "react";
 
 // ../vuu-table/src/table/keyUtils.ts
@@ -3161,11 +3193,11 @@ var specialKeys = union(
 );
 
 // ../vuu-table/src/table/useMeasuredContainer.ts
-import { isValidNumber as isValidNumber2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback21, useMemo as useMemo6, useRef as useRef14, useState as useState7 } from "react";
+import { isValidNumber as isValidNumber4 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback20, useMemo as useMemo7, useRef as useRef17, useState as useState7 } from "react";
 
 // ../vuu-table/src/table/useResizeObserver.ts
-import { useCallback as useCallback20, useEffect as useEffect6, useRef as useRef13 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect7, useRef as useRef16 } from "react";
 var observedMap = /* @__PURE__ */ new Map();
 var getTargetSize = (element, size, dimension) => {
   switch (dimension) {
@@ -3220,11 +3252,11 @@ var resizeObserver = new ResizeObserver((entries) => {
 import {
   deselectItem,
   isRowSelected,
-  metadataKeys as metadataKeys7,
+  metadataKeys as metadataKeys8,
   selectItem
 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback22, useRef as useRef15 } from "react";
-var { IDX: IDX2 } = metadataKeys7;
+import { useCallback as useCallback21, useRef as useRef18 } from "react";
+var { IDX: IDX2 } = metadataKeys8;
 
 // ../vuu-table/src/table/useTableModel.ts
 import {
@@ -3239,21 +3271,22 @@ import {
   isFilteredColumn,
   isGroupColumn as isGroupColumn3,
   isPinned,
-  isTypeDescriptor as isTypeDescriptor4,
-  metadataKeys as metadataKeys8,
+  isTypeDescriptor as isTypeDescriptor7,
+  metadataKeys as metadataKeys9,
   updateColumn,
   sortPinnedColumns,
   stripFilterFromColumns,
-  moveItem as moveItem2
+  moveItemDeprecated,
+  getDefaultAlignment as getDefaultAlignment2
 } from "@vuu-ui/vuu-utils";
-import { useReducer as useReducer2 } from "react";
-var KEY_OFFSET = metadataKeys8.count;
+import { useReducer } from "react";
+var KEY_OFFSET = metadataKeys9.count;
 
 // ../vuu-table/src/table/useTableScroll.ts
-import { useCallback as useCallback23, useRef as useRef16 } from "react";
+import { useCallback as useCallback22, useRef as useRef19 } from "react";
 
-// ../vuu-table/src/table/useTableViewport.ts
-import { useCallback as useCallback24, useMemo as useMemo7, useRef as useRef17 } from "react";
+// ../vuu-table/src/table-next/useTableViewport.ts
+import { useCallback as useCallback23, useMemo as useMemo8, useRef as useRef20 } from "react";
 import {
   actualRowPositioning,
   virtualRowPositioning
@@ -3264,26 +3297,26 @@ import {
   getColumnsInViewport,
   itemsChanged
 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback25, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef18, useState as useState8 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect8, useMemo as useMemo9, useRef as useRef21, useState as useState8 } from "react";
 
 // ../vuu-table/src/table/useTable.ts
-var { KEY: KEY3, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = metadataKeys9;
+var { KEY: KEY4, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = metadataKeys10;
 
 // ../vuu-table/src/table/Table.tsx
-import cx14 from "classnames";
+import cx13 from "classnames";
 import { isDataLoading } from "@vuu-ui/vuu-utils";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 
 // ../vuu-table/src/table/cell-renderers/json-cell/JsonCell.tsx
-import cx15 from "classnames";
+import cx14 from "classnames";
 import {
   isJsonAttribute,
-  metadataKeys as metadataKeys10,
-  registerComponent as registerComponent3
+  metadataKeys as metadataKeys11,
+  registerComponent as registerComponent6
 } from "@vuu-ui/vuu-utils";
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
-var classBase11 = "vuuJsonCell";
-var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY4 } = metadataKeys10;
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var classBase12 = "vuuJsonCell";
+var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY5 } = metadataKeys11;
 var localKey = (key) => {
   const pos = key.lastIndexOf("|");
   if (pos === -1) {
@@ -3303,137 +3336,198 @@ var JsonCell = ({ column, row }) => {
     value = value.slice(0, -1);
     isToggle = true;
   }
-  const rowKey = localKey(row[KEY4]);
-  const className = cx15({
-    [`${classBase11}-name`]: rowKey === value,
-    [`${classBase11}-value`]: rowKey !== value,
-    [`${classBase11}-group`]: isToggle
+  const rowKey = localKey(row[KEY5]);
+  const className = cx14({
+    [`${classBase12}-name`]: rowKey === value,
+    [`${classBase12}-value`]: rowKey !== value,
+    [`${classBase12}-group`]: isToggle
   });
   if (isToggle) {
     const toggleIcon = row[IS_EXPANDED3] ? "minus-box" : "plus-box";
     return /* @__PURE__ */ jsxs17("span", { className, children: [
-      /* @__PURE__ */ jsx22("span", { className: `${classBase11}-value`, children: value }),
-      /* @__PURE__ */ jsx22("span", { className: `${classBase11}-toggle`, "data-icon": toggleIcon })
+      /* @__PURE__ */ jsx21("span", { className: `${classBase12}-value`, children: value }),
+      /* @__PURE__ */ jsx21("span", { className: `${classBase12}-toggle`, "data-icon": toggleIcon })
     ] });
   } else if (value) {
-    return /* @__PURE__ */ jsx22("span", { className, children: value });
+    return /* @__PURE__ */ jsx21("span", { className, children: value });
   } else {
     return null;
   }
 };
-registerComponent3("json", JsonCell, "cell-renderer", {});
+registerComponent6("json", JsonCell, "cell-renderer", {
+  description: "JSON formatter",
+  label: "JSON formatter",
+  serverDataType: "json"
+});
 
-// ../vuu-table/src/table-next/TableNext.tsx
-import { ContextMenuProvider as ContextMenuProvider2 } from "@vuu-ui/vuu-popups";
-import { metadataKeys as metadataKeys14, notHidden as notHidden4 } from "@vuu-ui/vuu-utils";
+// ../vuu-table/src/table-next/header-cell/GroupHeaderCell.tsx
+import cx17 from "classnames";
+import { useRef as useRef25 } from "react";
 
-// ../vuu-table/src/table-next/HeaderCell.tsx
-import { useCallback as useCallback30, useRef as useRef23 } from "react";
+// ../vuu-table/src/table-next/column-resizing/ColumnResizer.tsx
+import { useCallback as useCallback26, useRef as useRef23 } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table-next/column-resizing/useTableColumnResize.tsx
+import { useCallback as useCallback27, useRef as useRef24, useState as useState10 } from "react";
 
 // ../vuu-table/src/table-next/useCell.ts
 import { getColumnStyle as getColumnStyle4 } from "@vuu-ui/vuu-utils";
-import cx16 from "classnames";
-import { useMemo as useMemo10 } from "react";
-var useCell = (column, classBase14, isHeader) => (
+import cx15 from "classnames";
+import { useMemo as useMemo11 } from "react";
+var useCell = (column, classBase19, isHeader) => (
   // TODO measure perf without the memo, might not be worth the cost
-  useMemo10(() => {
-    const className = cx16(classBase14, {
+  useMemo11(() => {
+    const className = cx15(classBase19, {
       vuuPinFloating: column.pin === "floating",
       vuuPinLeft: column.pin === "left",
       vuuPinRight: column.pin === "right",
       vuuEndPin: isHeader && column.endPin,
-      [`${classBase14}-resizing`]: column.resizing,
-      [`${classBase14}-right`]: column.align === "right"
+      // [`${classBase}-resizing`]: column.resizing,
+      [`${classBase19}-editable`]: column.editable,
+      [`${classBase19}-right`]: column.align === "right"
     });
     const style = getColumnStyle4(column);
     return {
       className,
       style
     };
-  }, [column, classBase14, isHeader])
+  }, [column, classBase19, isHeader])
 );
 
-// ../vuu-table/src/table-next/ColumnMenu.tsx
+// ../vuu-table/src/table-next/column-header-pill/ColumnHeaderPill.tsx
+import cx16 from "classnames";
+import { useCallback as useCallback28 } from "react";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table-next/column-header-pill/GroupColumnPill.tsx
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table-next/column-header-pill/SortIndicator.tsx
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table-next/header-cell/GroupHeaderCell.tsx
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { createElement } from "react";
+
+// ../vuu-table/src/table-next/header-cell/GroupHeaderCellNext.tsx
+import cx18 from "classnames";
+import { useCallback as useCallback29, useRef as useRef26, useState as useState11 } from "react";
+import {
+  OverflowContainer,
+  useLayoutEffectSkipFirst
+} from "@vuu-ui/vuu-layout";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { createElement as createElement2 } from "react";
+
+// ../vuu-table/src/table-next/header-cell/HeaderCell.tsx
+import { useCallback as useCallback31, useRef as useRef28 } from "react";
+
+// ../vuu-table/src/table-next/column-menu/ColumnMenu.tsx
 import { useContextMenu as useContextMenu3 } from "@vuu-ui/vuu-popups";
-import cx17 from "classnames";
+import cx19 from "classnames";
 import {
-  useCallback as useCallback27,
-  useRef as useRef20,
-  useState as useState10
+  useCallback as useCallback30,
+  useRef as useRef27,
+  useState as useState12
 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-
-// ../vuu-table/src/table-next/column-resizing/ColumnResizer.tsx
-import { useCallback as useCallback28, useRef as useRef21 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 
-// ../vuu-table/src/table-next/column-resizing/useTableColumnResize.tsx
-import { useCallback as useCallback29, useRef as useRef22 } from "react";
+// ../vuu-table/src/table-next/header-cell/HeaderCell.tsx
+import cx20 from "classnames";
+import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 
-// ../vuu-table/src/table-next/HeaderCell.tsx
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+// ../vuu-table/src/table-next/TableNext.tsx
+import { ContextMenuProvider as ContextMenuProvider2 } from "@vuu-ui/vuu-popups";
+import { isGroupColumn as isGroupColumn7, metadataKeys as metadataKeys18, notHidden as notHidden4 } from "@vuu-ui/vuu-utils";
+import cx23 from "classnames";
+import { useRef as useRef34 } from "react";
 
 // ../vuu-table/src/table-next/Row.tsx
 import {
   isGroupColumn as isGroupColumn4,
-  metadataKeys as metadataKeys12,
+  isJsonColumn as isJsonColumn2,
+  isJsonGroup as isJsonGroup3,
+  metadataKeys as metadataKeys14,
   notHidden as notHidden3,
-  RowSelected
+  RowSelected as RowSelected2
 } from "@vuu-ui/vuu-utils";
-import cx18 from "classnames";
-import { memo as memo3, useCallback as useCallback32 } from "react";
+import cx22 from "classnames";
+import { memo as memo3, useCallback as useCallback34 } from "react";
 
-// ../vuu-table/src/table-next/TableCell.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
-var TableCell2 = ({ column, row }) => {
-  const { className, style } = useCell(column, "vuuTableNextCell");
-  return /* @__PURE__ */ jsx26("div", { className, role: "cell", style, children: row[column.key] });
+// ../vuu-table/src/table-next/table-cell/TableCell.tsx
+import { metadataKeys as metadataKeys12 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback32 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var { IDX: IDX3 } = metadataKeys12;
+var classBase13 = "vuuTableNextCell";
+var TableCell2 = ({
+  column,
+  columnMap,
+  onDataEdited,
+  row
+}) => {
+  const { className, style } = useCell(column, classBase13);
+  const { CellRenderer, name: name2, valueFormatter } = column;
+  const dataIdx = columnMap[name2];
+  const handleDataItemEdited = useCallback32(
+    (value) => {
+      onDataEdited == null ? void 0 : onDataEdited(row[IDX3], name2, value);
+      return true;
+    },
+    [name2, onDataEdited, row]
+  );
+  return /* @__PURE__ */ jsx30("div", { className, role: "cell", style, children: CellRenderer ? /* @__PURE__ */ jsx30(
+    CellRenderer,
+    {
+      column,
+      columnMap,
+      onCommit: handleDataItemEdited,
+      row
+    }
+  ) : valueFormatter(row[dataIdx]) });
 };
 
-// ../vuu-table/src/table-next/TableGroupCell.tsx
-import { getGroupValueAndOffset as getGroupValueAndOffset2, metadataKeys as metadataKeys11 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback31 } from "react";
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
-var { IS_LEAF: IS_LEAF3 } = metadataKeys11;
+// ../vuu-table/src/table-next/table-cell/TableGroupCell.tsx
+import { getGroupValueAndOffset as getGroupValueAndOffset2, metadataKeys as metadataKeys13 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback33 } from "react";
+import cx21 from "classnames";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+var { IS_LEAF: IS_LEAF3 } = metadataKeys13;
+var classBase14 = "vuuTableNextGroupCell";
 var TableGroupCell2 = ({ column, onClick, row }) => {
   const { columns } = column;
   const [value, offset] = getGroupValueAndOffset2(columns, row);
-  const { className, style } = useCell(column, "vuuTable2-groupCell");
-  const handleClick = useCallback31(
+  const { className, style } = useCell(column, classBase14);
+  const handleClick = useCallback33(
     (evt) => {
       onClick == null ? void 0 : onClick(evt, column);
     },
     [column, onClick]
   );
   const isLeaf = row[IS_LEAF3];
-  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx27("span", { className: "vuuTable2-groupCell-spacer" }, i));
-  return /* @__PURE__ */ jsxs19(
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx31("span", { className: `${classBase14}-spacer` }, i));
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
-      className,
+      className: cx21(className, "vuuTableNextCell"),
       role: "cell",
       style,
       onClick: isLeaf ? void 0 : handleClick,
       children: [
         spacers,
-        isLeaf ? null : /* @__PURE__ */ jsx27(
-          "span",
-          {
-            className: "vuuTable2-groupCell-toggle",
-            "data-icon": "vuu-triangle-right"
-          }
-        ),
-        /* @__PURE__ */ jsx27("span", { children: value })
+        isLeaf ? null : /* @__PURE__ */ jsx31("span", { className: `${classBase14}-toggle`, "data-icon": "triangle-right" }),
+        /* @__PURE__ */ jsx31("span", { children: value })
       ]
     }
   );
 };
 
 // ../vuu-table/src/table-next/Row.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
-import { createElement } from "react";
-var { IDX: IDX3, IS_EXPANDED: IS_EXPANDED4, SELECTED: SELECTED3 } = metadataKeys12;
-var classBase12 = "vuuTableNextRow";
+import { jsx as jsx32 } from "react/jsx-runtime";
+import { createElement as createElement3 } from "react";
+var { IDX: IDX4, IS_EXPANDED: IS_EXPANDED4, SELECTED: SELECTED3 } = metadataKeys14;
+var classBase15 = "vuuTableNextRow";
 var Row2 = memo3(
   ({
     className: classNameProp,
@@ -3442,15 +3536,17 @@ var Row2 = memo3(
     row,
     offset,
     onClick,
+    onDataEdited,
     onToggleGroup,
+    zebraStripes = false,
     ...htmlAttributes
   }) => {
     const {
-      [IDX3]: rowIndex,
+      [IDX4]: rowIndex,
       [IS_EXPANDED4]: isExpanded,
       [SELECTED3]: selectionStatus
     } = row;
-    const handleRowClick = useCallback32(
+    const handleRowClick = useCallback34(
       (evt) => {
         const rangeSelect = evt.shiftKey;
         const keepExistingSelection = evt.ctrlKey || evt.metaKey;
@@ -3458,51 +3554,87 @@ var Row2 = memo3(
       },
       [onClick, row]
     );
-    const { True, First, Last } = RowSelected;
-    const className = cx18(classBase12, classNameProp, {
-      [`${classBase12}-even`]: rowIndex % 2 === 0,
-      [`${classBase12}-expanded`]: isExpanded,
-      [`${classBase12}-selected`]: selectionStatus & True,
-      [`${classBase12}-selectedStart`]: selectionStatus & First,
-      [`${classBase12}-selectedEnd`]: selectionStatus & Last
+    const { True: True2, First: First2, Last: Last2 } = RowSelected2;
+    const className = cx22(classBase15, classNameProp, {
+      [`${classBase15}-even`]: zebraStripes && rowIndex % 2 === 0,
+      [`${classBase15}-expanded`]: isExpanded,
+      [`${classBase15}-selected`]: selectionStatus & True2,
+      [`${classBase15}-selectedStart`]: selectionStatus & First2,
+      [`${classBase15}-selectedEnd`]: selectionStatus & Last2
     });
-    const style = typeof offset === "number" ? { transform: `translate3d(0px, ${offset}px, 0px)` } : void 0;
-    return /* @__PURE__ */ createElement(
+    const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
+    const handleGroupCellClick = useCallback34(
+      (evt, column) => {
+        if (isGroupColumn4(column) || isJsonGroup3(column, row)) {
+          evt.stopPropagation();
+          onToggleGroup == null ? void 0 : onToggleGroup(row, column);
+        }
+      },
+      [onToggleGroup, row]
+    );
+    return /* @__PURE__ */ createElement3(
       "div",
       {
         ...htmlAttributes,
+        "aria-rowindex": row[0],
         key: `row-${row[0]}`,
         role: "row",
         className,
         onClick: handleRowClick,
         style
       },
-      /* @__PURE__ */ jsx28("span", { className: `${classBase12}-selectionDecorator vuuStickyLeft` }),
+      /* @__PURE__ */ jsx32("span", { className: `${classBase15}-selectionDecorator vuuStickyLeft` }),
       columns.filter(notHidden3).map((column) => {
         const isGroup = isGroupColumn4(column);
+        const isJsonCell = isJsonColumn2(column);
         const Cell = isGroup ? TableGroupCell2 : TableCell2;
-        return /* @__PURE__ */ jsx28(Cell, { column, row }, column.key);
+        return /* @__PURE__ */ jsx32(
+          Cell,
+          {
+            column,
+            columnMap,
+            onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
+            onDataEdited,
+            row
+          },
+          column.key
+        );
       }),
-      /* @__PURE__ */ jsx28("span", { className: `${classBase12}-selectionDecorator vuuStickyRight` })
+      /* @__PURE__ */ jsx32("span", { className: `${classBase15}-selectionDecorator vuuStickyRight` })
     );
   }
 );
 Row2.displayName = "Row";
 
 // ../vuu-table/src/table-next/useTableNext.ts
+import { useLayoutEffectSkipFirst as useLayoutEffectSkipFirst2 } from "@vuu-ui/vuu-layout";
+import { useDragDropNext as useDragDrop2 } from "@vuu-ui/vuu-ui-controls";
+
+// ../vuu-table/src/table-next/useKeyboardNavigation.ts
 import {
-  useLayoutEffectSkipFirst,
-  useLayoutProviderDispatch
-} from "@vuu-ui/vuu-layout";
-import { useContextMenu as usePopupContextMenu2 } from "@vuu-ui/vuu-popups";
+  useCallback as useCallback35,
+  useEffect as useEffect10,
+  useMemo as useMemo12,
+  useRef as useRef29
+} from "react";
+
+// ../vuu-table/src/table-next/useTableNext.ts
 import {
   applySort as applySort2,
-  buildColumnMap as buildColumnMap3,
-  isValidNumber as isValidNumber3,
+  buildColumnMap as buildColumnMap4,
+  isGroupColumn as isGroupColumn6,
+  isJsonGroup as isJsonGroup4,
+  isValidNumber as isValidNumber5,
+  metadataKeys as metadataKeys17,
   updateColumn as updateColumn2,
   visibleColumnAtIndex as visibleColumnAtIndex2
 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback36, useMemo as useMemo13, useState as useState12 } from "react";
+import {
+  useCallback as useCallback41,
+  useEffect as useEffect13,
+  useMemo as useMemo15,
+  useState as useState14
+} from "react";
 
 // ../vuu-table/src/table-next/table-config.ts
 var updateTableConfig = (config, action) => {
@@ -3527,82 +3659,265 @@ var updateTableConfig = (config, action) => {
 };
 
 // ../vuu-table/src/table-next/useDataSource.ts
-import { useCallback as useCallback33, useMemo as useMemo11, useState as useState11 } from "react";
+import {
+  isVuuFeatureAction as isVuuFeatureAction2,
+  isVuuFeatureInvocation as isVuuFeatureInvocation2
+} from "@vuu-ui/vuu-data-react/src";
+import { getFullRange as getFullRange2, NULL_RANGE } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback36, useEffect as useEffect11, useMemo as useMemo13, useRef as useRef30, useState as useState13 } from "react";
+
+// ../vuu-table/src/table-next/moving-window.ts
+import { metadataKeys as metadataKeys15, WindowRange as WindowRange2 } from "@vuu-ui/vuu-utils";
+var { SELECTED: SELECTED4 } = metadataKeys15;
 
 // ../vuu-table/src/table-next/useInitialValue.ts
-import { useMemo as useMemo12, useRef as useRef24 } from "react";
+import { useMemo as useMemo14, useRef as useRef31 } from "react";
+
+// ../vuu-table/src/table-next/useTableContextMenu.ts
+import { buildColumnMap as buildColumnMap3 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback37 } from "react";
+import { useContextMenu as usePopupContextMenu2 } from "@vuu-ui/vuu-popups";
+
+// ../vuu-table/src/table-next/useCellEditing.ts
+import { isCharacterKey } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback38 } from "react";
 
 // ../vuu-table/src/table-next/useTableModel.ts
-import { moveItem as moveItem4 } from "@vuu-ui/vuu-ui-controls";
 import {
   applyFilterToColumns as applyFilterToColumns2,
   applyGroupByToColumns as applyGroupByToColumns2,
   applySortToColumns as applySortToColumns2,
-  findColumn as findColumn2,
   getCellRenderer as getCellRenderer2,
-  getColumnName as getColumnName3,
   getTableHeadings as getTableHeadings2,
   getValueFormatter as getValueFormatter2,
+  hasValidationRules,
   isFilteredColumn as isFilteredColumn2,
   isGroupColumn as isGroupColumn5,
   isPinned as isPinned2,
-  isTypeDescriptor as isTypeDescriptor5,
+  isTypeDescriptor as isTypeDescriptor8,
   logger,
-  metadataKeys as metadataKeys13,
+  metadataKeys as metadataKeys16,
+  moveItem,
   sortPinnedColumns as sortPinnedColumns2,
-  stripFilterFromColumns as stripFilterFromColumns2
+  stripFilterFromColumns as stripFilterFromColumns2,
+  subscribedOnly
 } from "@vuu-ui/vuu-utils";
-import { useReducer as useReducer3 } from "react";
+import { buildValidationChecker } from "@vuu-ui/vuu-ui-controls";
+import { useReducer as useReducer2 } from "react";
 var { info } = logger("useTableModel");
-var KEY_OFFSET2 = metadataKeys13.count;
+var KEY_OFFSET2 = metadataKeys16.count;
 
 // ../vuu-table/src/table-next/useTableScroll.ts
-import { useCallback as useCallback34, useRef as useRef25 } from "react";
+import { useCallback as useCallback39, useRef as useRef32 } from "react";
 
 // ../vuu-table/src/table-next/useVirtualViewport.ts
-import { useCallback as useCallback35, useRef as useRef26 } from "react";
+import { useCallback as useCallback40, useEffect as useEffect12, useRef as useRef33 } from "react";
+
+// ../vuu-table/src/table-next/useTableNext.ts
+var { KEY: KEY6, IS_EXPANDED: IS_EXPANDED5, IS_LEAF: IS_LEAF4 } = metadataKeys17;
 
 // ../vuu-table/src/table-next/TableNext.tsx
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
-var { IDX: IDX4, RENDER_IDX: RENDER_IDX2 } = metadataKeys14;
+import { MeasuredContainer, useId } from "@vuu-ui/vuu-layout";
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+import { createElement as createElement4 } from "react";
+var { IDX: IDX5, RENDER_IDX: RENDER_IDX2 } = metadataKeys18;
+
+// ../vuu-table/src/table-next/cell-renderers/dropdown-cell/DropdownCell.tsx
+import {
+  Dropdown as Dropdown3
+} from "@vuu-ui/vuu-ui-controls";
+import {
+  isColumnTypeRenderer as isColumnTypeRenderer3,
+  isTypeDescriptor as isTypeDescriptor9,
+  registerComponent as registerComponent7
+} from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback42, useState as useState15 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var classBase16 = "vuuTableDropdownCell";
+var openKeys = ["Enter", " "];
+var DropdownCell = ({ column, columnMap, row }) => {
+  var _a, _b, _c;
+  const values = isTypeDescriptor9(column.type) && isColumnTypeRenderer3((_a = column.type) == null ? void 0 : _a.renderer) ? (_c = (_b = column.type) == null ? void 0 : _b.renderer) == null ? void 0 : _c.values : [];
+  const dataIdx = columnMap[column.name];
+  const [value, setValue] = useState15(row[dataIdx]);
+  const handleSelectionChange = useCallback42(
+    (evt, selectedItem) => {
+      if (selectedItem) {
+        setValue(selectedItem);
+      }
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx34(
+    Dropdown3,
+    {
+      className: classBase16,
+      onSelectionChange: handleSelectionChange,
+      openKeys,
+      selected: value,
+      source: values,
+      width: column.width - 17
+    }
+  );
+};
+registerComponent7("dropdown-cell", DropdownCell, "cell-renderer", {});
+
+// ../vuu-table/src/table-next/cell-renderers/input-cell/InputCell.tsx
+import { registerComponent as registerComponent8 } from "@vuu-ui/vuu-utils";
+import { Input as Input3 } from "@salt-ds/core";
+import { useEditableText } from "@vuu-ui/vuu-ui-controls";
+import cx24 from "classnames";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var classBase17 = "vuuTableInputCell";
+var WarnCommit = () => {
+  console.warn(
+    "onCommit handler has not been provided to InputCell cell renderer"
+  );
+  return true;
+};
+var InputCell = ({
+  column,
+  columnMap,
+  onCommit = WarnCommit,
+  row
+}) => {
+  const dataIdx = columnMap[column.name];
+  const {
+    align = "left",
+    clientSideEditValidationCheck,
+    valueFormatter
+  } = column;
+  const { warningMessage, ...editProps } = useEditableText({
+    initialValue: valueFormatter(row[dataIdx]),
+    onCommit,
+    clientSideEditValidationCheck
+  });
+  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsx35("span", { className: `${classBase17}-icon`, "data-icon": "error" }) : void 0;
+  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsx35("span", { className: `${classBase17}-icon`, "data-icon": "error" }) : void 0;
+  return /* @__PURE__ */ jsx35(
+    Input3,
+    {
+      ...editProps,
+      className: cx24(classBase17, {
+        [`${classBase17}-error`]: warningMessage !== void 0
+      }),
+      endAdornment,
+      startAdornment
+    }
+  );
+};
+registerComponent8("input-cell", InputCell, "cell-renderer", {});
 
 // src/table-settings/useTableSettings.ts
-import { useCallback as useCallback37, useMemo as useMemo14, useState as useState13 } from "react";
+import {
+  addColumnToSubscribedColumns,
+  isCalculatedColumn as isCalculatedColumn2,
+  moveItem as moveItem2,
+  subscribedOnly as subscribedOnly2
+} from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback43,
+  useMemo as useMemo16,
+  useState as useState16
+} from "react";
+var sortOrderFromAvailableColumns = (availableColumns, columns) => {
+  const sortedColumns = [];
+  for (const { name: name2 } of availableColumns) {
+    const column = columns.find((col) => col.name === name2);
+    if (column) {
+      sortedColumns.push(column);
+    }
+  }
+  return sortedColumns;
+};
 var buildColumnItems = (availableColumns, configuredColumns) => {
-  return availableColumns.map(({ name, serverDataType }) => {
-    const configuredColumn = configuredColumns.find((col) => col.name === name);
+  return availableColumns.map(({ name: name2, serverDataType }) => {
+    const configuredColumn = configuredColumns.find((col) => col.name === name2);
     return {
       hidden: configuredColumn == null ? void 0 : configuredColumn.hidden,
+      isCalculated: isCalculatedColumn2(name2),
       label: configuredColumn == null ? void 0 : configuredColumn.label,
-      name,
+      name: name2,
       serverDataType,
       subscribed: configuredColumn !== void 0
     };
   });
 };
 var useTableSettings = ({
-  availableColumns,
+  availableColumns: availableColumnsProp,
   onConfigChange,
+  onDataSourceConfigChange,
   tableConfig: tableConfigProp
 }) => {
-  const [tableConfig, setTableConfig] = useState13(tableConfigProp);
-  const columnItems = useMemo14(
+  const [{ availableColumns, tableConfig }, setColumnState] = useState16({
+    availableColumns: availableColumnsProp,
+    tableConfig: tableConfigProp
+  });
+  const columnItems = useMemo16(
     () => buildColumnItems(availableColumns, tableConfig.columns),
     [availableColumns, tableConfig.columns]
   );
-  const handleMoveListItem = useCallback37(
+  const handleMoveListItem = useCallback43(
     (fromIndex, toIndex) => {
-      console.log(`move list item from ${fromIndex} to ${toIndex}`);
+      setColumnState((state) => {
+        const newAvailableColumns = moveItem2(
+          state.availableColumns,
+          fromIndex,
+          toIndex
+        );
+        const newColumns = sortOrderFromAvailableColumns(
+          newAvailableColumns,
+          tableConfig.columns
+        );
+        return {
+          availableColumns: newAvailableColumns,
+          tableConfig: {
+            ...state.tableConfig,
+            columns: newColumns
+          }
+        };
+      });
     },
-    []
+    [tableConfig.columns]
   );
-  const handleColumnChange = useCallback37(
-    (name, property, value) => {
-      const columnItem = columnItems.find((col) => col.name === name);
+  const handleColumnChange = useCallback43(
+    (name2, property, value) => {
+      const columnItem = columnItems.find((col) => col.name === name2);
       if (property === "subscribed") {
-        console.log(`unsubscribe from ${name}`);
+        if (columnItem == null ? void 0 : columnItem.subscribed) {
+          const subscribedColumns = tableConfig.columns.filter((col) => col.name !== name2).map((col) => col.name);
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: {
+              ...tableConfig,
+              columns: tableConfig.columns.filter(
+                subscribedOnly2(subscribedColumns)
+              )
+            }
+          }));
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        } else {
+          const newConfig = {
+            ...tableConfig,
+            columns: addColumnToSubscribedColumns(
+              tableConfig.columns,
+              availableColumns,
+              name2
+            )
+          };
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
+          const subscribedColumns = newConfig.columns.map((col) => col.name);
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        }
       } else if (columnItem == null ? void 0 : columnItem.subscribed) {
-        const column = tableConfig.columns.find((col) => col.name === name);
+        const column = tableConfig.columns.find((col) => col.name === name2);
         if (column) {
           const newConfig = updateTableConfig(tableConfig, {
             type: "column-prop",
@@ -3610,21 +3925,40 @@ var useTableSettings = ({
             column,
             value
           });
-          setTableConfig(newConfig);
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
         }
       }
     },
-    [columnItems, tableConfig]
+    [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
   );
-  const handleChangeColumnLabels = useCallback37((evt) => {
+  const handleChangeColumnLabels = useCallback43((evt) => {
     const { value } = evt.target;
     const columnFormatHeader = value === "0" ? void 0 : value === "1" ? "capitalize" : "uppercase";
-    setTableConfig((config) => ({
-      ...config,
-      columnFormatHeader
+    setColumnState((state) => ({
+      ...state,
+      tableConfig: {
+        ...state.tableConfig,
+        columnFormatHeader
+      }
     }));
   }, []);
-  useLayoutEffectSkipFirst2(() => {
+  const handleChangeTableAttribute = useCallback43(
+    (evt) => {
+      const { ariaChecked, value } = evt.target;
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          [value]: ariaChecked !== "true"
+        }
+      }));
+    },
+    []
+  );
+  useLayoutEffectSkipFirst3(() => {
     onConfigChange == null ? void 0 : onConfigChange(tableConfig);
   }, [onConfigChange, tableConfig]);
   const columnLabelsValue = tableConfig.columnFormatHeader === void 0 ? 0 : tableConfig.columnFormatHeader === "capitalize" ? 1 : 2;
@@ -3632,59 +3966,66 @@ var useTableSettings = ({
     columnItems,
     columnLabelsValue,
     onChangeColumnLabels: handleChangeColumnLabels,
+    onChangeTableAttribute: handleChangeTableAttribute,
     onColumnChange: handleColumnChange,
-    onMoveListItem: handleMoveListItem
+    onMoveListItem: handleMoveListItem,
+    tableConfig
   };
 };
 
 // src/table-settings/TableSettingsPanel.tsx
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
-var classBase13 = "vuuTableSettingsPanel";
+import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+var classBase18 = "vuuTableSettingsPanel";
 var TableSettingsPanel = ({
   availableColumns,
+  onAddCalculatedColumn,
   onConfigChange,
-  tableConfig,
+  onDataSourceConfigChange,
+  tableConfig: tableConfigProp,
   ...htmlAttributes
 }) => {
   const {
     columnItems,
     columnLabelsValue,
     onChangeColumnLabels,
+    onChangeTableAttribute,
     onColumnChange,
-    onMoveListItem
+    onMoveListItem,
+    tableConfig
   } = useTableSettings({
     availableColumns,
     onConfigChange,
-    tableConfig
+    onDataSourceConfigChange,
+    tableConfig: tableConfigProp
   });
-  return /* @__PURE__ */ jsxs21("div", { ...htmlAttributes, className: classBase13, children: [
-    /* @__PURE__ */ jsxs21(FormField5, { children: [
-      /* @__PURE__ */ jsx30(FormFieldLabel5, { children: "Column Labels" }),
-      /* @__PURE__ */ jsxs21(
-        ToggleButtonGroup,
+  return /* @__PURE__ */ jsxs26("div", { ...htmlAttributes, className: classBase18, children: [
+    /* @__PURE__ */ jsxs26(FormField5, { children: [
+      /* @__PURE__ */ jsx36(FormFieldLabel5, { children: "Column Labels" }),
+      /* @__PURE__ */ jsxs26(
+        ToggleButtonGroup2,
         {
           className: "vuuToggleButtonGroup",
           onChange: onChangeColumnLabels,
           value: columnLabelsValue,
           children: [
-            /* @__PURE__ */ jsx30(
-              ToggleButton,
+            /* @__PURE__ */ jsx36(
+              ToggleButton2,
               {
                 className: "vuuIconToggleButton",
                 "data-icon": "text-strikethrough",
                 value: 0
               }
             ),
-            /* @__PURE__ */ jsx30(
-              ToggleButton,
+            /* @__PURE__ */ jsx36(
+              ToggleButton2,
               {
                 className: "vuuIconToggleButton",
                 "data-icon": "text-Tt",
                 value: 1
               }
             ),
-            /* @__PURE__ */ jsx30(
-              ToggleButton,
+            /* @__PURE__ */ jsx36(
+              ToggleButton2,
               {
                 className: "vuuIconToggleButton",
                 "data-icon": "text-T",
@@ -3695,26 +4036,173 @@ var TableSettingsPanel = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs21(FormField5, { children: [
-      /* @__PURE__ */ jsx30(FormFieldLabel5, { children: "Default Column Width" }),
-      /* @__PURE__ */ jsx30(Input3, { className: "vuuInput" })
+    /* @__PURE__ */ jsxs26(FormField5, { children: [
+      /* @__PURE__ */ jsx36(FormFieldLabel5, { children: "Grid separators" }),
+      /* @__PURE__ */ jsxs26("div", { className: "saltToggleButtonGroup vuuToggleButtonGroup saltToggleButtonGroup-horizontal vuuGridSeparators", children: [
+        /* @__PURE__ */ jsx36(
+          ToggleButton2,
+          {
+            className: "vuuIconToggleButton",
+            "data-icon": "row-striping",
+            selected: tableConfig.zebraStripes,
+            onChange: onChangeTableAttribute,
+            value: "zebraStripes"
+          }
+        ),
+        /* @__PURE__ */ jsx36(
+          ToggleButton2,
+          {
+            className: "vuuIconToggleButton",
+            "data-icon": "row-lines",
+            selected: tableConfig.rowSeparators,
+            onChange: onChangeTableAttribute,
+            value: "rowSeparators"
+          }
+        ),
+        /* @__PURE__ */ jsx36(
+          ToggleButton2,
+          {
+            className: "vuuIconToggleButton",
+            "data-icon": "col-lines",
+            selected: tableConfig.columnSeparators,
+            onChange: onChangeTableAttribute,
+            value: "columnSeparators"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs26(FormField5, { children: [
+      /* @__PURE__ */ jsx36(FormFieldLabel5, { children: "Default Column Width" }),
+      /* @__PURE__ */ jsx36(Input4, { className: "vuuInput" })
     ] }),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx36(
       ColumnList,
       {
         columnItems,
         onChange: onColumnChange,
         onMoveListItem
       }
-    )
+    ),
+    /* @__PURE__ */ jsxs26("div", { className: `${classBase18}-calculatedButtonbar`, children: [
+      /* @__PURE__ */ jsx36(Button4, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
+      /* @__PURE__ */ jsx36("span", { className: `${classBase18}-calculatedLabel`, children: "Add calculated column" })
+    ] })
   ] });
 };
+
+// src/useTableAndColumnSettings.ts
+import { useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
+import { getCalculatedColumnType as getCalculatedColumnType2 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback44, useRef as useRef35, useState as useState17 } from "react";
+var useTableAndColumnSettings = ({
+  availableColumns: availableColumnsProps,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  onDataSourceConfigChange,
+  tableConfig
+}) => {
+  const dispatchLayoutAction = useLayoutProviderDispatch();
+  const showTableSettingsRef = useRef35();
+  const [availableColumns, setAvailableColumns] = useState17(
+    availableColumnsProps
+  );
+  const showContextPanel = useCallback44(
+    (componentType, title, props) => {
+      dispatchLayoutAction({
+        type: "set-props",
+        path: "#context-panel",
+        props: {
+          expanded: true,
+          content: {
+            type: componentType,
+            props
+          },
+          title
+        }
+      });
+    },
+    [dispatchLayoutAction]
+  );
+  const handleCreateCalculatedColumn = useCallback44(
+    (column) => {
+      const newAvailableColumns = availableColumns.concat({
+        name: column.name,
+        serverDataType: getCalculatedColumnType2(column)
+      });
+      setAvailableColumns(newAvailableColumns);
+      onAvailableColumnsChange == null ? void 0 : onAvailableColumnsChange(newAvailableColumns);
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
+      });
+      onCreateCalculatedColumn(column);
+    },
+    [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
+  );
+  const showColumnSettingsPanel = useCallback44(
+    (action) => {
+      showContextPanel("ColumnSettings", "Column Settings", {
+        column: action.column,
+        onConfigChange,
+        onCreateCalculatedColumn: handleCreateCalculatedColumn,
+        tableConfig,
+        vuuTable: action.vuuTable
+      });
+    },
+    [
+      handleCreateCalculatedColumn,
+      onConfigChange,
+      showContextPanel,
+      tableConfig
+    ]
+  );
+  const handleAddCalculatedColumn = useCallback44(() => {
+    showColumnSettingsPanel({
+      column: {
+        name: "::",
+        serverDataType: "string"
+      },
+      type: "columnSettings",
+      vuuTable: { module: "SIMUL", table: "instruments" }
+    });
+  }, [showColumnSettingsPanel]);
+  showTableSettingsRef.current = useCallback44(() => {
+    showContextPanel("TableSettings", "DataGrid Settings", {
+      availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name: name2, serverDataType }) => ({
+        name: name2,
+        serverDataType
+      })),
+      onAddCalculatedColumn: handleAddCalculatedColumn,
+      onConfigChange,
+      onDataSourceConfigChange,
+      tableConfig
+    });
+  }, [
+    availableColumns,
+    handleAddCalculatedColumn,
+    onConfigChange,
+    onDataSourceConfigChange,
+    showContextPanel,
+    tableConfig
+  ]);
+  return {
+    showColumnSettingsPanel,
+    showTableSettingsPanel: showTableSettingsRef.current
+  };
+};
 export {
+  BackgroundCell2 as BackgroundCell,
+  CaseValidator,
   ColumnExpressionInput,
+  ColumnExpressionPanel,
+  ColumnFormattingPanel,
   ColumnList,
   ColumnNamedTerms,
+  ColumnSettingsPanel,
   DataSourceStats,
-  DatagridSettingsPanel,
+  NumericFormattingSettings,
+  PatternValidator,
   TableSettingsPanel,
   columnExpressionLanguageSupport,
   isCompleteExpression,
@@ -3722,6 +4210,7 @@ export {
   lastNamedChild,
   useColumnExpressionEditor,
   useColumnExpressionSuggestionProvider,
+  useTableAndColumnSettings,
   useTableSettings,
   walkTree
 };