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

package/cjs/index.js

@@ -49,16 +49,18 @@ var __privateSet = (obj, member, value, setter) => {
 var src_exports = {};
 __export(src_exports, {
   ColumnExpressionInput: () => ColumnExpressionInput,
+  ColumnList: () => ColumnList,
   ColumnNamedTerms: () => ColumnNamedTerms,
-  ColumnSettingsPanel: () => ColumnSettingsPanel2,
   DataSourceStats: () => DataSourceStats,
   DatagridSettingsPanel: () => DatagridSettingsPanel,
+  TableSettingsPanel: () => TableSettingsPanel,
   columnExpressionLanguageSupport: () => columnExpressionLanguageSupport,
   isCompleteExpression: () => isCompleteExpression,
   isCompleteRelationalExpression: () => isCompleteRelationalExpression,
   lastNamedChild: () => lastNamedChild,
   useColumnExpressionEditor: () => useColumnExpressionEditor,
   useColumnExpressionSuggestionProvider: () => useColumnExpressionSuggestionProvider,
+  useTableSettings: () => useTableSettings,
   walkTree: () => walkTree
 });
 module.exports = __toCommonJS(src_exports);
@@ -172,10 +174,95 @@ var ProgressCell = ({ column, columnMap, row }) => {
   serverDataType: ["long", "int", "double"]
 });
 
+// src/column-list/ColumnList.tsx
+var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
+var import_core = require("@salt-ds/core");
+var import_lab = require("@salt-ds/lab");
+var import_classnames3 = __toESM(require("classnames"), 1);
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var classBase3 = "vuuColumnList";
+var classBaseListItem = "vuuColumnListItem";
+var ColumnListItem = ({
+  className: classNameProp,
+  item,
+  ...listItemProps
+}) => {
+  var _a;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_vuu_ui_controls.ListItem,
+    {
+      ...listItemProps,
+      className: (0, import_classnames3.default)(classNameProp, classBaseListItem),
+      "data-name": item == null ? void 0 : item.name,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lab.Switch, { className: `${classBase3}-switch`, checked: item == null ? void 0 : item.subscribed }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${classBase3}-text`, children: (_a = item == null ? void 0 : item.label) != null ? _a : item == null ? void 0 : item.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_core.Checkbox,
+          {
+            className: `${classBase3}-checkBox`,
+            checked: (item == null ? void 0 : item.hidden) !== true,
+            disabled: (item == null ? void 0 : item.subscribed) !== true
+          }
+        )
+      ]
+    }
+  );
+};
+var ColumnList = ({
+  columnItems,
+  onChange,
+  onMoveListItem,
+  ...htmlAttributes
+}) => {
+  const handleChange = (0, import_react2.useCallback)(
+    (evt) => {
+      const input = evt.target;
+      const listItem = input.closest(`.${classBaseListItem}`);
+      const {
+        dataset: { name }
+      } = listItem;
+      if (name) {
+        const saltSwitch = input.closest(`.${classBase3}-switch`);
+        const saltCheckbox = input.closest(
+          `.${classBase3}-checkBox`
+        );
+        if (saltSwitch) {
+          onChange(name, "subscribed", input.checked);
+        } else if (saltCheckbox) {
+          onChange(name, "hidden", input.checked === false);
+        }
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...htmlAttributes, className: classBase3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${classBase3}-header`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Column Selection" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `${classBase3}-colHeadings`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Column subscription" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Visibility" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_vuu_ui_controls.List,
+      {
+        ListItem: ColumnListItem,
+        allowDragDrop: true,
+        height: "100%",
+        onChange: handleChange,
+        onMoveListItem,
+        selectionStrategy: "none",
+        source: columnItems,
+        itemHeight: 33
+      }
+    )
+  ] });
+};
+
 // src/column-expression-input/useColumnExpressionEditor.ts
 var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
 var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts
 var import_vuu_codemirror = require("@vuu-ui/vuu-codemirror");
@@ -794,7 +881,7 @@ var vuuTheme = import_vuu_codemirror3.EditorView.theme(
 
 // src/column-expression-input/useColumnAutoComplete.ts
 var import_vuu_codemirror4 = require("@vuu-ui/vuu-codemirror");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var applyPrefix = (completions, prefix) => prefix ? completions.map((completion) => {
   var _a;
   return {
@@ -914,7 +1001,7 @@ var promptToSave = (context, onSubmit) => {
   return { from: context.pos, options };
 };
 var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
-  const makeSuggestions2 = (0, import_react2.useCallback)(
+  const makeSuggestions2 = (0, import_react3.useCallback)(
     async (context, suggestionType, optionalArgs = {}) => {
       const options = await suggestionProvider.getSuggestions(
         suggestionType,
@@ -925,7 +1012,7 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
     },
     [suggestionProvider]
   );
-  return (0, import_react2.useCallback)(
+  return (0, import_react3.useCallback)(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -1224,11 +1311,11 @@ var useColumnExpressionEditor = ({
   onSubmitExpression,
   suggestionProvider
 }) => {
-  const editorRef = (0, import_react3.useRef)(null);
-  const onSubmit = (0, import_react3.useRef)(noop);
-  const viewRef = (0, import_react3.useRef)();
+  const editorRef = (0, import_react4.useRef)(null);
+  const onSubmit = (0, import_react4.useRef)(noop);
+  const viewRef = (0, import_react4.useRef)();
   const completionFn = useColumnAutoComplete(suggestionProvider, onSubmit);
-  const [createState, clearInput] = (0, import_react3.useMemo)(() => {
+  const [createState, clearInput] = (0, import_react4.useMemo)(() => {
     const parseExpression = () => {
       const view = getView(viewRef);
       const source = view.state.doc.toString();
@@ -1312,7 +1399,7 @@ var useColumnExpressionEditor = ({
     };
     return [createState2, clearInput2];
   }, [completionFn, onChange, onSubmitExpression]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!editorRef.current) {
       throw Error("editor not in dom");
     }
@@ -1329,8 +1416,8 @@ var useColumnExpressionEditor = ({
 };
 
 // src/column-expression-input/ColumnExpressionInput.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var classBase3 = "vuuColumnExpressionInput";
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var classBase4 = "vuuColumnExpressionInput";
 var ColumnExpressionInput = ({
   onChange,
   onSubmitExpression,
@@ -1341,14 +1428,14 @@ var ColumnExpressionInput = ({
     onSubmitExpression,
     suggestionProvider
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${classBase3}`, ref: editorRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${classBase4}`, ref: editorRef });
 };
 
 // src/column-expression-input/useColumnExpressionSuggestionProvider.ts
 var import_vuu_codemirror6 = require("@vuu-ui/vuu-codemirror");
 var import_vuu_data_react = require("@vuu-ui/vuu-data-react");
 var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/column-expression-input/column-function-descriptors.ts
 var columnFunctionDescriptors = [
@@ -1769,13 +1856,13 @@ var useColumnExpressionSuggestionProvider = ({
   columns,
   table
 }) => {
-  const findColumn = (0, import_react4.useCallback)(
+  const findColumn3 = (0, import_react5.useCallback)(
     (name) => name ? columns.find((col) => col.name === name) : void 0,
     [columns]
   );
-  const latestSuggestionsRef = (0, import_react4.useRef)();
+  const latestSuggestionsRef = (0, import_react5.useRef)();
   const getTypeaheadSuggestions = (0, import_vuu_data_react.useTypeaheadSuggestions)();
-  const getSuggestions = (0, import_react4.useCallback)(
+  const getSuggestions = (0, import_react5.useCallback)(
     async (suggestionType, options = NONE) => {
       const { columnName, functionName, operator, prefix } = options;
       switch (suggestionType) {
@@ -1790,18 +1877,18 @@ var useColumnExpressionSuggestionProvider = ({
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "operator": {
-          const suggestions = await getOperators(findColumn(columnName));
+          const suggestions = await getOperators(findColumn3(columnName));
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "relational-operator": {
           const suggestions = await (0, import_vuu_codemirror6.getRelationalOperators)(
-            findColumn(columnName)
+            findColumn3(columnName)
           );
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "condition-operator":
           {
-            const column = findColumn(columnName);
+            const column = findColumn3(columnName);
             if (column) {
               const suggestions = await getConditionOperators(column);
               if (suggestions) {
@@ -1838,9 +1925,9 @@ var useColumnExpressionSuggestionProvider = ({
       }
       return [];
     },
-    [columns, findColumn, getTypeaheadSuggestions, table]
+    [columns, findColumn3, getTypeaheadSuggestions, table]
   );
-  const isPartialMatch = (0, import_react4.useCallback)(
+  const isPartialMatch = (0, import_react5.useCallback)(
     async (valueType, columnName, pattern) => {
       const { current: latestSuggestions } = latestSuggestionsRef;
       let maybe = false;
@@ -1869,216 +1956,25 @@ var import_core7 = require("@salt-ds/core");
 var import_classnames6 = __toESM(require("classnames"), 1);
 var import_react12 = require("react");
 
-// src/datagrid-configuration-ui/column-picker/ColumnPicker.tsx
-var import_lab2 = require("@salt-ds/lab");
-var import_core = require("@salt-ds/core");
-var import_react5 = require("react");
-
-// src/datagrid-configuration-ui/column-picker/ColumnListItem.tsx
-var import_lab = require("@salt-ds/lab");
-var import_classnames3 = __toESM(require("classnames"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var classBase4 = "vuuColumnListItem";
-var ColumnListItem = ({
-  className: classNameProp,
-  item,
-  label,
-  style: styleProp,
-  ...restProps
-}) => {
-  const className = (0, import_classnames3.default)(classBase4, classNameProp, {
-    [`${classBase4}-calculated`]: item == null ? void 0 : item.expression,
-    [`${classBase4}-hidden`]: item == null ? void 0 : item.hidden
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_lab.ListItem, { className, ...restProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `${classBase4}-iconType` }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: `${classBase4}-label`, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `${classBase4}-iconHidden` })
-  ] });
-};
-
-// src/datagrid-configuration-ui/column-picker/ColumnPicker.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var classBase5 = "vuuColumnPicker";
-var removeSelectedColumns = (availableColumns, selectedColumns) => {
-  return availableColumns.filter(
-    (column) => selectedColumns.find((col) => col.name === column.name) == null
-  );
-};
-var ColumnPicker = ({
-  availableColumns,
-  id: idProp,
-  dispatchColumnAction: dispatch,
-  onAddCalculatedColumnClick,
-  onSelectionChange,
-  chosenColumns,
-  selectedColumn
-}) => {
-  const [selected1, setSelected1] = (0, import_react5.useState)([]);
-  const id = (0, import_core.useIdMemo)(idProp);
-  const unusedColumns = removeSelectedColumns(availableColumns, chosenColumns);
-  const addColumn2 = (0, import_react5.useCallback)(() => {
-    if (selected1.length > 0) {
-      setSelected1([]);
-      dispatch({ type: "addColumn", columns: selected1 });
-    }
-  }, [dispatch, selected1]);
-  const removeColumn2 = (0, import_react5.useCallback)(
-    () => selectedColumn && dispatch({ type: "removeColumn", column: selectedColumn }),
-    [selectedColumn, dispatch]
-  );
-  const moveColumnUp = (0, import_react5.useCallback)(
-    () => selectedColumn && dispatch({ type: "moveColumn", column: selectedColumn, moveBy: -1 }),
-    [dispatch, selectedColumn]
-  );
-  const moveColumnDown = (0, import_react5.useCallback)(
-    () => selectedColumn && dispatch({ type: "moveColumn", column: selectedColumn, moveBy: 1 }),
-    [dispatch, selectedColumn]
-  );
-  const handleSelectionChange1 = (0, import_react5.useCallback)(
-    (evt, selected) => setSelected1(selected),
-    []
-  );
-  const handleSelectionChange2 = (0, import_react5.useCallback)(
-    (evt, selected) => onSelectionChange == null ? void 0 : onSelectionChange(selected),
-    [onSelectionChange]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: classBase5, id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${classBase5}-listColumn`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `available-${id}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core.Text, { as: "h4", children: "Available Columns" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "div",
-        {
-          className: `${classBase5}-listContainer`,
-          style: { flex: 1, overflow: "hidden" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_lab2.List,
-            {
-              borderless: true,
-              checkable: false,
-              height: "100%",
-              id: `available-${id}`,
-              itemHeight: 24,
-              itemToString: (item) => item.name,
-              onSelectionChange: handleSelectionChange1,
-              selected: selected1,
-              selectionStrategy: "extended",
-              source: unusedColumns
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            flex: "0 0 32px",
-            marginTop: "var(--salt-size-basis-unit)"
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core.Button, { onClick: addColumn2, disabled: selected1.length === 0, children: [
-            "Show",
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": "arrow-thin-right", style: { marginLeft: 8 } })
-          ] })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${classBase5}-listColumn`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `selected-${id}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core.Text, { as: "h4", children: "Included Columns" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "div",
-        {
-          className: `${classBase5}-listContainer`,
-          style: { flex: 1, overflow: "hidden" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_lab2.List,
-            {
-              ListItem: ColumnListItem,
-              borderless: true,
-              height: "100%",
-              id: `selected-${id}`,
-              itemHeight: 24,
-              itemToString: (item) => item.name,
-              onSelectionChange: handleSelectionChange2,
-              selected: selectedColumn,
-              style: { flex: 1 },
-              source: chosenColumns
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-        "div",
-        {
-          style: {
-            alignItems: "center",
-            flex: "0 0 32px",
-            display: "flex",
-            gap: 6,
-            marginTop: "var(--salt-size-basis-unit)"
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core.Button, { onClick: removeColumn2, disabled: selectedColumn === null, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": "arrow-thin-left", style: { marginRight: 8 } }),
-              "Hide"
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_core.Button,
-              {
-                "aria-label": "Move column up",
-                onClick: moveColumnUp,
-                disabled: selectedColumn === null || (chosenColumns == null ? void 0 : chosenColumns.indexOf(selectedColumn)) === 0,
-                style: { width: 28 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": "arrow-thin-up" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_core.Button,
-              {
-                "aria-label": "Move column down",
-                onClick: moveColumnDown,
-                disabled: selectedColumn === null || chosenColumns.indexOf(selectedColumn) === chosenColumns.length - 1,
-                style: { width: 28 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": "arrow-thin-down" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_core.Button,
-              {
-                "aria-label": "Add calculated column",
-                className: `${classBase5}-addCalculatedColumn`,
-                onClick: onAddCalculatedColumnClick,
-                variant: "primary",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": "add" })
-              }
-            )
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-
 // src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
 var import_vuu_layout = require("@vuu-ui/vuu-layout");
-var import_lab5 = require("@salt-ds/lab");
+var import_lab4 = require("@salt-ds/lab");
 var import_core4 = require("@salt-ds/core");
 var import_classnames5 = __toESM(require("classnames"), 1);
 var import_react8 = require("react");
 
 // src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
 var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
-var import_lab4 = require("@salt-ds/lab");
+var import_lab3 = require("@salt-ds/lab");
 var import_core3 = require("@salt-ds/core");
 var import_classnames4 = __toESM(require("classnames"), 1);
 var import_react7 = require("react");
 
 // src/datagrid-configuration-ui/column-type-panel/NumericColumnPanel.tsx
-var import_lab3 = require("@salt-ds/lab");
+var import_lab2 = require("@salt-ds/lab");
 var import_core2 = require("@salt-ds/core");
 var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var defaultValues = {
   alignOnDecimals: false,
   decimals: 4,
@@ -2120,60 +2016,58 @@ var NumericColumnPanel = ({
     [dispatchUpdate]
   );
   const handleChangeAlignOnDecimals = (0, import_react6.useCallback)(
-    (evt, value) => dispatchUpdate({ alignOnDecimals: value }),
+    (evt) => dispatchUpdate({ alignOnDecimals: Boolean(evt.target.value) }),
     [dispatchUpdate]
   );
   const handleChangeZeroPad = (0, import_react6.useCallback)(
-    (evt, value) => dispatchUpdate({ zeroPad: value }),
+    (evt) => dispatchUpdate({ zeroPad: Boolean(evt.target.value) }),
     [dispatchUpdate]
   );
   switch (column.serverDataType) {
     case "double":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core2.FormField, { labelPlacement: "top", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core2.FormFieldLabel, { children: "No of Decimals" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lab3.StepperInput, { value: decimals, onChange: handleChangeDecimals })
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core2.FormField, { labelPlacement: "top", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.FormFieldLabel, { children: "No of Decimals" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lab2.StepperInput, { value: decimals, onChange: handleChangeDecimals })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_lab3.Switch,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_lab2.Switch,
           {
             checked: alignOnDecimals,
             label: "Align on decimals",
-            LabelProps: { className: "vuuColumnPanelSwitch" },
             onChange: handleChangeAlignOnDecimals
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_lab3.Switch,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_lab2.Switch,
           {
             checked: zeroPad,
             label: "Zero pad",
-            LabelProps: { className: "vuuColumnPanelSwitch" },
             onChange: handleChangeZeroPad
           }
         )
       ] });
     case "long":
     case "int":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core2.Text, { children: "Work in progress" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.Text, { children: "Work in progress" }) });
     default:
       return null;
   }
 };
 
 // src/datagrid-configuration-ui/column-type-panel/StringColumnPanel.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var StringColumnPanel = ({
   column,
   dispatchColumnAction
 }) => {
   console.log({ column, dispatchColumnAction });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: "what" });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: "what" });
 };
 
 // src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var classBase6 = "vuuColumnTypePanel";
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var classBase5 = "vuuColumnTypePanel";
 var integerCellRenderers = ["Default Renderer (int, long)"];
 var doubleCellRenderers = ["Default Renderer (double)"];
 var stringCellRenderers = ["Default Renderer (string)"];
@@ -2205,7 +2099,7 @@ var ColumnTypePanel = ({
       case "double":
       case "int":
       case "long":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           NumericColumnPanel,
           {
             column,
@@ -2213,7 +2107,7 @@ var ColumnTypePanel = ({
           }
         );
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           StringColumnPanel,
           {
             column,
@@ -2224,21 +2118,21 @@ var ColumnTypePanel = ({
   }, [column, dispatchColumnAction]);
   const { serverDataType = "string" } = column;
   const availableRenderers = getAvailableCellRenderers(column);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_lab4.Dropdown,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_lab3.Dropdown,
       {
-        className: (0, import_classnames4.default)(`${classBase6}-renderer`),
+        className: (0, import_classnames4.default)(`${classBase5}-renderer`),
         fullWidth: true,
         selected: availableRenderers[0],
         source: availableRenderers
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_core3.Panel,
       {
         ...props,
-        className: (0, import_classnames4.default)(classBase6, className, `${classBase6}-${serverDataType}`),
+        className: (0, import_classnames4.default)(classBase5, className, `${classBase5}-${serverDataType}`),
         children: content
       }
     )
@@ -2246,8 +2140,8 @@ var ColumnTypePanel = ({
 };
 
 // src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var classBase7 = "vuuColumnSettingsPanel";
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var classBase6 = "vuuColumnSettingsPanel";
 var tabstripProps = {
   className: "salt-density-high"
 };
@@ -2287,28 +2181,28 @@ var ColumnSettingsPanel = ({
     (value) => dispatchUpdate({ width: parseInt(value.toString(), 10) }),
     [dispatchUpdate]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
-      className: classBase7,
+      className: classBase6,
       ...props,
       style: {
         ...styleProp
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.Text, { as: "h4", children: "Column Settings" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.Text, { as: "h4", children: "Column Settings" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           import_vuu_layout.Stack,
           {
             active: activeTab,
-            className: (0, import_classnames5.default)(`${classBase7}-columnTabs`),
+            className: (0, import_classnames5.default)(`${classBase6}-columnTabs`),
             onTabSelectionChanged: setActiveTab,
             TabstripProps: tabstripProps,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.Panel, { title: "Column", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.FormFieldLabel, { children: "Hidden" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.Panel, { title: "Column", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Hidden" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     import_core4.Checkbox,
                     {
                       checked: column.hidden === true,
@@ -2316,9 +2210,9 @@ var ColumnSettingsPanel = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.FormFieldLabel, { children: "Label" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Label" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     import_core4.Input,
                     {
                       value: (_a = column.label) != null ? _a : column.name,
@@ -2326,49 +2220,49 @@ var ColumnSettingsPanel = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.FormFieldLabel, { children: "Width" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    import_lab5.StepperInput,
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Width" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    import_lab4.StepperInput,
                     {
                       value: (_b = column.width) != null ? _b : 100,
                       onChange: handleChangeWidth
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.FormFieldLabel, { children: "ALign" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "ALign" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                     import_core4.RadioButtonGroup,
                     {
                       "aria-label": "Column Align",
                       value: (_c = column.align) != null ? _c : "left",
                       onChange: handleChangeAlign,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.RadioButton, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.RadioButton, { label: "Right", value: "right" })
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.RadioButton, { label: "Left", value: "left" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.RadioButton, { label: "Right", value: "right" })
                       ]
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.FormFieldLabel, { children: "Pin Column" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Pin Column" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                     import_core4.RadioButtonGroup,
                     {
                       "aria-label": "Pin Column",
                       value: (_d = column.pin) != null ? _d : "",
                       onChange: handleChangePin,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.RadioButton, { label: "Do not pin", value: "" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.RadioButton, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.RadioButton, { label: "Right", value: "right" })
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.RadioButton, { label: "Do not pin", value: "" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.RadioButton, { label: "Left", value: "left" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.RadioButton, { label: "Right", value: "right" })
                       ]
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 ColumnTypePanel,
                 {
                   column,
@@ -2376,14 +2270,14 @@ var ColumnSettingsPanel = ({
                   title: "Data Cell"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.Panel, { title: "Vuu", variant: "secondary", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.FormField, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.FormFieldLabel, { children: "Name" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.Input, { value: column.name })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.Panel, { title: "Vuu", variant: "secondary", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "top", readOnly: true, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Name" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.Input, { value: column.name })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.FormField, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.FormFieldLabel, { children: "Vuu Type" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.Input, { value: column.serverDataType })
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "top", readOnly: true, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Vuu Type" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.Input, { value: column.serverDataType })
                 ] })
               ] })
             ]
@@ -2396,10 +2290,10 @@ var ColumnSettingsPanel = ({
 
 // src/datagrid-configuration-ui/settings-panel/GridSettingsPanel.tsx
 var import_core5 = require("@salt-ds/core");
-var import_lab6 = require("@salt-ds/lab");
+var import_lab5 = require("@salt-ds/lab");
 var import_react9 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var classBase8 = "vuuGridSettingsPanel";
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var classBase7 = "vuuGridSettingsPanel";
 var GridSettingsPanel = ({
   config,
   dispatchColumnAction,
@@ -2424,37 +2318,37 @@ var GridSettingsPanel = ({
     (value) => dispatchUpdate({ columnDefaultWidth: parseInt(value.toString(), 10) }),
     [dispatchUpdate]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
-      className: classBase8,
+      className: classBase7,
       ...props,
       style: {
         ...styleProp
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.Text, { as: "h4", children: "Grid Settings" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core5.Panel, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core5.FormField, { labelPlacement: "left", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.FormFieldLabel, { children: "Format column labels" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.Text, { as: "h4", children: "Grid Settings" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core5.Panel, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core5.FormField, { labelPlacement: "left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.FormFieldLabel, { children: "Format column labels" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               import_core5.RadioButtonGroup,
               {
                 "aria-label": "Format column labels",
                 value: config.columnFormatHeader,
                 onChange: handleChangeLabelFormatting,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.RadioButton, { label: "No Formatting", value: void 0 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.RadioButton, { label: "Capitalize", value: "capitalize" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.RadioButton, { label: "Uppercase", value: "uppercase" })
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.RadioButton, { label: "No Formatting", value: void 0 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.RadioButton, { label: "Capitalize", value: "capitalize" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.RadioButton, { label: "Uppercase", value: "uppercase" })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core5.FormField, { labelPlacement: "left", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.FormFieldLabel, { children: "Default Column Width" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_lab6.StepperInput,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core5.FormField, { labelPlacement: "left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.FormFieldLabel, { children: "Default Column Width" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_lab5.StepperInput,
               {
                 value: (_a = config.columnDefaultWidth) != null ? _a : 100,
                 onChange: handleChangeWidth
@@ -2469,7 +2363,7 @@ var GridSettingsPanel = ({
 
 // src/datagrid-configuration-ui/settings-panel/useGridSettings.ts
 var import_react10 = require("react");
-var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
 var gridSettingsReducer = (state, action) => {
   console.log(`gridSettingsReducer ${action.type}`);
@@ -2545,7 +2439,7 @@ function moveColumn(state, { column, moveBy, moveFrom, moveTo }) {
   } else if (typeof moveFrom === "number" && typeof moveTo === "number") {
     return {
       ...state,
-      columns: (0, import_vuu_ui_controls.moveItem)(stateColumns, moveFrom, moveTo)
+      columns: (0, import_vuu_ui_controls2.moveItem)(stateColumns, moveFrom, moveTo)
     };
   } else {
     return state;
@@ -2630,7 +2524,7 @@ var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
 // src/datagrid-configuration-ui/calculated-column-panel/CalculatedColumnPanel.tsx
 var import_core6 = require("@salt-ds/core");
 var import_react11 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var CalculatedColumnPanel = ({
   columns,
   dispatchColumnAction,
@@ -2673,13 +2567,13 @@ var CalculatedColumnPanel = ({
       });
     }
   }, [columnName, dispatchColumnAction]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core6.Panel, { className: "vuuCalculatedColumnPanel", title: "Define Computed Column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core6.Text, { styleAs: "h4", children: "Define Computed Column" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core6.FormField, { labelPlacement: "left", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core6.FormFieldLabel, { children: "Column Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core6.Input, { value: columnName, onChange: handleChangeName })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core6.Panel, { className: "vuuCalculatedColumnPanel", title: "Define Computed Column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core6.Text, { styleAs: "h4", children: "Define Computed Column" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core6.FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core6.FormFieldLabel, { children: "Column Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core6.Input, { value: columnName, onChange: handleChangeName })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ColumnExpressionInput,
       {
         onChange: handleChangeExpression,
@@ -2687,13 +2581,13 @@ var CalculatedColumnPanel = ({
         suggestionProvider
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core6.Button, { onClick: handleSave, children: "Add Column" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core6.Button, { onClick: handleSave, children: "Add Column" }) })
   ] });
 };
 
 // src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var classBase9 = "vuuDatagridSettingsPanel";
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var classBase8 = "vuuDatagridSettingsPanel";
 var getTabLabel = () => void 0;
 var icons = [
   "table-settings",
@@ -2738,7 +2632,7 @@ var DatagridSettingsPanel = ({
     [handleApply]
   );
   const selectedColumn = selectedColumnName === null ? null : (_a = gridSettings.columns.find((col) => col.name === selectedColumnName)) != null ? _a : null;
-  const tabstripProps3 = {
+  const tabstripProps2 = {
     activeTabIndex: selectedTabIndex,
     allowRenameTab: false,
     orientation: "vertical"
@@ -2748,47 +2642,34 @@ var DatagridSettingsPanel = ({
     []
   );
   const panelShift = selectedTabIndex === 2 ? "right" : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ...props, className: (0, import_classnames6.default)(classBase9, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ...props, className: (0, import_classnames6.default)(classBase8, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       import_vuu_layout2.Stack,
       {
-        TabstripProps: tabstripProps3,
-        className: `${classBase9}-stack`,
+        TabstripProps: tabstripProps2,
+        className: `${classBase8}-stack`,
         getTabIcon,
         getTabLabel,
         active: selectedTabIndex === 2 ? 1 : selectedTabIndex,
         onTabSelectionChanged: handleTabSelectionChanged,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             GridSettingsPanel,
             {
               config: gridSettings,
               dispatchColumnAction
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${classBase9}-columnPanels`, "data-align": panelShift, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              ColumnPicker,
-              {
-                availableColumns,
-                chosenColumns: gridSettings.columns,
-                dispatchColumnAction,
-                onSelectionChange: handleColumnSelected,
-                onAddCalculatedColumnClick: handleAddCalculatedColumn,
-                selectedColumn
-              }
-            ),
-            selectedColumn === null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core7.Panel, { className: "vuuColumnSettingsPanel", children: "Select a column" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              ColumnSettingsPanel,
-              {
-                column: selectedColumn,
-                dispatchColumnAction,
-                style: { background: "white", flex: "1 0 150px" }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { title: "Column Settings", children: "Column Settings" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${classBase8}-columnPanels`, "data-align": panelShift, children: selectedColumn === null ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Panel, { className: "vuuColumnSettingsPanel", children: "Select a column" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            ColumnSettingsPanel,
+            {
+              column: selectedColumn,
+              dispatchColumnAction,
+              style: { background: "white", flex: "1 0 150px" }
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { title: "Column Settings", children: "Column Settings" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             CalculatedColumnPanel,
             {
               columns: gridSettings.columns,
@@ -2799,10 +2680,10 @@ var DatagridSettingsPanel = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${classBase9}-buttonBar`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core7.Button, { onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core7.Button, { onClick: handleApply, children: "Apply" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core7.Button, { onClick: handleSave, children: "Save" })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase8}-buttonBar`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Button, { onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Button, { onClick: handleApply, children: "Apply" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Button, { onClick: handleSave, children: "Save" })
     ] })
   ] });
 };
@@ -2810,8 +2691,8 @@ var DatagridSettingsPanel = ({
 // src/datasource-stats/DatasourceStats.tsx
 var import_react13 = require("react");
 var import_classnames7 = __toESM(require("classnames"), 1);
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var classBase10 = "vuuDatasourceStats";
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var classBase9 = "vuuDatasourceStats";
 var numberFormatter = new Intl.NumberFormat();
 var DataSourceStats = ({
   className: classNameProp,
@@ -2824,350 +2705,849 @@ var DataSourceStats = ({
     dataSource.on("resize", setSize);
     dataSource.on("range", setRange);
   }, [dataSource]);
-  const className = (0, import_classnames7.default)(classBase10, classNameProp);
+  const className = (0, import_classnames7.default)(classBase9, classNameProp);
   const from = numberFormatter.format(range.from);
   const to = numberFormatter.format(range.to - 1);
   const value = numberFormatter.format(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Showing rows" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${classBase10}-range`, children: from }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${classBase10}-range`, children: to }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "of" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${classBase10}-size`, children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Showing rows" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase9}-range`, children: from }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase9}-range`, children: to }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "of" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase9}-size`, children: value })
   ] });
 };
 
-// src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx
-var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
-var import_lab9 = require("@salt-ds/lab");
-var import_core10 = require("@salt-ds/core");
-var import_classnames9 = __toESM(require("classnames"), 1);
-var import_react16 = require("react");
+// src/table-settings/TableSettingsPanel.tsx
+var import_core9 = require("@salt-ds/core");
+
+// src/table-settings/useTableSettings.ts
+var import_vuu_layout4 = require("@vuu-ui/vuu-layout");
 
-// src/table-settings/column-type-panel/ColumnTypePanel.tsx
+// ../vuu-table/src/table/ColumnResizer.tsx
+var import_react14 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+
+// ../vuu-table/src/table/context-menu/buildContextMenuDescriptors.ts
 var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
-var import_lab8 = require("@salt-ds/lab");
-var import_core9 = require("@salt-ds/core");
-var import_classnames8 = __toESM(require("classnames"), 1);
-var import_react15 = require("react");
 
-// src/table-settings/column-type-panel/NumericColumnPanel.tsx
-var import_lab7 = require("@salt-ds/lab");
+// ../vuu-table/src/table/context-menu/useTableContextMenu.ts
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var { Average, Count, Distinct, High, Low, Sum } = import_vuu_utils11.AggregationType;
+
+// ../vuu-table/src/table/Table.tsx
+var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
 var import_core8 = require("@salt-ds/core");
-var import_react14 = require("react");
+
+// ../vuu-table/src/table/RowBasedTable.tsx
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var import_react22 = require("react");
+
+// ../vuu-table/src/table/TableRow.tsx
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_classnames9 = __toESM(require("classnames"));
+var import_react17 = require("react");
+
+// ../vuu-table/src/table/TableCell.tsx
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
+var import_classnames8 = __toESM(require("classnames"));
+var import_react15 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var defaultValues2 = {
-  alignOnDecimals: false,
-  decimals: 4,
-  zeroPad: false
-};
-var getColumnValues2 = (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;
-  }, defaultValues2);
-};
-var NumericColumnPanel2 = ({
-  column,
-  dispatchColumnAction
-}) => {
-  const { decimals, alignOnDecimals, zeroPad } = getColumnValues2(column == null ? void 0 : column.type);
-  const dispatchUpdate = (0, import_react14.useCallback)(
-    (values) => dispatchColumnAction({
-      type: "updateColumnTypeFormatting",
-      column,
-      ...values
-    }),
-    [column, dispatchColumnAction]
-  );
-  const handleChangeDecimals = (0, import_react14.useCallback)(
-    (value) => dispatchUpdate({ decimals: parseInt(value.toString(), 10) }),
-    [dispatchUpdate]
-  );
-  const handleChangeAlignOnDecimals = (0, import_react14.useCallback)(
-    (evt, value) => dispatchUpdate({ alignOnDecimals: value }),
-    [dispatchUpdate]
-  );
-  const handleChangeZeroPad = (0, import_react14.useCallback)(
-    (evt, value) => dispatchUpdate({ zeroPad: value }),
-    [dispatchUpdate]
-  );
-  switch (column.serverDataType) {
-    case "double":
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core8.FormField, { labelPlacement: "top", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core8.FormFieldLabel, { children: "No of Decimals" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lab7.StepperInput, { value: decimals, onChange: handleChangeDecimals })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_lab7.Switch,
-          {
-            checked: alignOnDecimals,
-            label: "Align on decimals",
-            LabelProps: { className: "vuuColumnPanelSwitch" },
-            onChange: handleChangeAlignOnDecimals
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_lab7.Switch,
+var { KEY: KEY2 } = import_vuu_utils12.metadataKeys;
+var TableCell = (0, import_react15.memo)(
+  ({
+    className: classNameProp,
+    column,
+    columnMap,
+    onClick,
+    row
+  }) => {
+    const labelFieldRef = (0, import_react15.useRef)(null);
+    const {
+      align,
+      CellRenderer,
+      key,
+      pin,
+      editable,
+      resizing,
+      valueFormatter
+    } = column;
+    const [editing, setEditing] = (0, import_react15.useState)(false);
+    const value = valueFormatter(row[key]);
+    const [editableValue, setEditableValue] = (0, import_react15.useState)(value);
+    const handleTitleMouseDown = () => {
+      var _a;
+      (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+    };
+    const handleTitleKeyDown = (evt) => {
+      if (evt.key === "Enter") {
+        setEditing(true);
+      }
+    };
+    const handleClick = (0, import_react15.useCallback)(
+      (evt) => {
+        onClick == null ? void 0 : onClick(evt, column);
+      },
+      [column, onClick]
+    );
+    const handleEnterEditMode = () => {
+      setEditing(true);
+    };
+    const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false) => {
+      var _a;
+      setEditing(false);
+      if (editCancelled) {
+        setEditableValue(originalValue);
+      } else if (finalValue !== originalValue) {
+        setEditableValue(finalValue);
+      }
+      if (allowDeactivation === false) {
+        (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    const className = (0, import_classnames8.default)(classNameProp, {
+      vuuAlignRight: align === "right",
+      vuuPinFloating: pin === "floating",
+      vuuPinLeft: pin === "left",
+      vuuPinRight: pin === "right",
+      "vuuTableCell-resizing": resizing
+    }) || void 0;
+    const style = (0, import_vuu_utils12.getColumnStyle)(column);
+    return editable ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        className,
+        "data-editable": true,
+        role: "cell",
+        style,
+        onKeyDown: handleTitleKeyDown,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_vuu_ui_controls3.EditableLabel,
           {
-            checked: zeroPad,
-            label: "Zero pad",
-            LabelProps: { className: "vuuColumnPanelSwitch" },
-            onChange: handleChangeZeroPad
-          }
+            editing,
+            value: editableValue,
+            onChange: setEditableValue,
+            onMouseDownCapture: handleTitleMouseDown,
+            onEnterEditMode: handleEnterEditMode,
+            onExitEditMode: handleExitEditMode,
+            onKeyDown: handleTitleKeyDown,
+            ref: labelFieldRef,
+            tabIndex: 0
+          },
+          "title"
         )
-      ] });
-    case "long":
-    case "int":
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core8.Text, { children: "Work in progress" }) });
-    default:
-      return null;
-  }
-};
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        className,
+        role: "cell",
+        style,
+        onClick: handleClick,
+        children: CellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CellRenderer, { column, columnMap, row }) : value
+      }
+    );
+  },
+  cellValuesAreEqual
+);
+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];
+}
 
-// src/table-settings/column-type-panel/StringColumnPanel.tsx
+// ../vuu-table/src/table/TableGroupCell.tsx
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_react16 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var StringColumnPanel2 = ({
-  column,
-  dispatchColumnAction
-}) => {
-  console.log(column, dispatchColumnAction);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: "what" });
+var { IS_LEAF } = import_vuu_utils13.metadataKeys;
+var TableGroupCell = ({ column, onClick, row }) => {
+  const { columns } = column;
+  const [value, offset] = (0, import_vuu_utils13.getGroupValueAndOffset)(columns, row);
+  const handleClick = (0, import_react16.useCallback)(
+    (evt) => {
+      onClick == null ? void 0 : onClick(evt, column);
+    },
+    [column, onClick]
+  );
+  const style = (0, import_vuu_utils13.getColumnStyle)(column);
+  const isLeaf = row[IS_LEAF];
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "vuuTableGroupCell-spacer" }, i));
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: "vuuTableGroupCell vuuPinLeft",
+      onClick: isLeaf ? void 0 : handleClick,
+      role: "cell",
+      style,
+      children: [
+        spacers,
+        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: value })
+      ]
+    }
+  );
 };
 
-// src/table-settings/column-type-panel/ColumnTypePanel.tsx
+// ../vuu-table/src/table/TableRow.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var classBase11 = "vuuColumnTypePanel";
-var integerCellRenderers2 = ["Default Renderer (int, long)"];
-var doubleCellRenderers2 = ["Default Renderer (double)"];
-var stringCellRenderers2 = ["Default Renderer (string)"];
-var getAvailableCellRenderers2 = (column) => {
-  const customCellRenderers = (0, import_vuu_utils9.getRegisteredCellRenderers)(column.serverDataType);
-  const customRendererNames = customCellRenderers.map((r) => r.name);
-  console.log({ customRendererNames });
-  switch (column.serverDataType) {
-    case "char":
-    case "string":
-      return stringCellRenderers2;
-    case "int":
-    case "long":
-      return integerCellRenderers2;
-    case "double":
-      return doubleCellRenderers2.concat(customRendererNames);
-    default:
-      return stringCellRenderers2;
+var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils14.metadataKeys;
+var classBase10 = "vuuTableRow";
+var TableRow = (0, import_react17.memo)(function Row({
+  columnMap,
+  columns,
+  offset,
+  onClick,
+  onToggleGroup,
+  virtualColSpan = 0,
+  row
+}) {
+  const {
+    [IDX]: rowIndex,
+    [IS_EXPANDED]: isExpanded,
+    [SELECTED]: isSelected
+  } = row;
+  const className = (0, import_classnames9.default)(classBase10, {
+    [`${classBase10}-even`]: rowIndex % 2 === 0,
+    [`${classBase10}-expanded`]: isExpanded,
+    [`${classBase10}-preSelected`]: isSelected === 2
+  });
+  const handleRowClick = (0, import_react17.useCallback)(
+    (evt) => {
+      const rangeSelect = evt.shiftKey;
+      const keepExistingSelection = evt.ctrlKey || evt.metaKey;
+      onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
+    },
+    [onClick, row]
+  );
+  const handleGroupCellClick = (0, import_react17.useCallback)(
+    (evt, column) => {
+      if ((0, import_vuu_utils14.isGroupColumn)(column) || (0, import_vuu_utils14.isJsonGroup)(column, row)) {
+        evt.stopPropagation();
+        onToggleGroup == null ? void 0 : onToggleGroup(row, column);
+      }
+    },
+    [onToggleGroup, row]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      "aria-selected": isSelected === 1 ? true : void 0,
+      "aria-rowindex": rowIndex,
+      className,
+      onClick: handleRowClick,
+      role: "row",
+      style: {
+        transform: `translate3d(0px, ${offset}px, 0px)`
+      },
+      children: [
+        virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "cell", style: { width: virtualColSpan } }) : null,
+        columns.filter(import_vuu_utils14.notHidden).map((column) => {
+          const isGroup = (0, import_vuu_utils14.isGroupColumn)(column);
+          const isJsonCell = (0, import_vuu_utils14.isJsonColumn)(column);
+          const Cell = isGroup ? TableGroupCell : TableCell;
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Cell,
+            {
+              column,
+              columnMap,
+              onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
+              row
+            },
+            column.name
+          );
+        })
+      ]
+    }
+  );
+});
+
+// ../vuu-table/src/table/TableGroupHeaderCell.tsx
+var import_classnames10 = __toESM(require("classnames"));
+var import_react19 = require("react");
+
+// ../vuu-table/src/table/useTableColumnResize.tsx
+var import_react18 = require("react");
+
+// ../vuu-table/src/table/TableGroupHeaderCell.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// ../vuu-table/src/table/TableHeaderCell.tsx
+var import_classnames13 = __toESM(require("classnames"));
+var import_react21 = require("react");
+
+// ../vuu-table/src/table/SortIndicator.tsx
+var import_classnames11 = __toESM(require("classnames"));
+var import_jsx_runtime18 = require("react/jsx-runtime");
+
+// ../vuu-table/src/table/TableHeaderCell.tsx
+var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
+
+// ../vuu-table/src/table/filter-indicator.tsx
+var import_vuu_popups = require("@vuu-ui/vuu-popups");
+var import_classnames12 = __toESM(require("classnames"));
+var import_react20 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// ../vuu-table/src/table/TableHeaderCell.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// ../vuu-table/src/table/RowBasedTable.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var { RENDER_IDX } = import_vuu_utils15.metadataKeys;
+
+// ../vuu-table/src/table/useTable.ts
+var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
+var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
+var import_react33 = require("react");
+
+// ../vuu-table/src/table/useDataSource.ts
+var import_vuu_data_react2 = require("@vuu-ui/vuu-data-react");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
+var import_react23 = require("react");
+var { SELECTED: SELECTED2 } = import_vuu_utils16.metadataKeys;
+
+// ../vuu-table/src/table/useDraggableColumn.ts
+var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
+var import_react24 = require("react");
+
+// ../vuu-table/src/table/useKeyboardNavigation.ts
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
+var import_react25 = require("react");
+
+// ../vuu-table/src/table/keyUtils.ts
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (let set of sets) {
+    for (let element of set) {
+      result.add(element);
+    }
   }
-};
-var ColumnTypePanel2 = ({
-  className,
-  column,
-  dispatchColumnAction,
-  ...props
-}) => {
-  const content = (0, import_react15.useMemo)(() => {
-    switch (column.serverDataType) {
-      case "double":
-      case "int":
-      case "long":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          NumericColumnPanel2,
-          {
-            column,
-            dispatchColumnAction
-          }
-        );
-      default:
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          StringColumnPanel2,
-          {
-            column,
-            dispatchColumnAction
-          }
+  return result;
+}
+var ArrowUp = "ArrowUp";
+var ArrowDown = "ArrowDown";
+var ArrowLeft = "ArrowLeft";
+var ArrowRight = "ArrowRight";
+var Home = "Home";
+var End = "End";
+var PageUp = "PageUp";
+var PageDown = "PageDown";
+var actionKeys = /* @__PURE__ */ new Set(["Enter", "Delete", " "]);
+var focusKeys = /* @__PURE__ */ new Set(["Tab"]);
+var arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+var navigationKeys = /* @__PURE__ */ new Set([
+  Home,
+  End,
+  PageUp,
+  PageDown,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp
+]);
+var functionKeys = /* @__PURE__ */ new Set([
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12"
+]);
+var specialKeys = union(
+  actionKeys,
+  navigationKeys,
+  arrowLeftRightKeys,
+  functionKeys,
+  focusKeys
+);
+
+// ../vuu-table/src/table/useMeasuredContainer.ts
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var import_react27 = require("react");
+
+// ../vuu-table/src/table/useResizeObserver.ts
+var import_react26 = require("react");
+var observedMap = /* @__PURE__ */ new Map();
+var getTargetSize = (element, size, dimension) => {
+  switch (dimension) {
+    case "height":
+      return size.height;
+    case "clientHeight":
+      return element.clientHeight;
+    case "clientWidth":
+      return element.clientWidth;
+    case "contentHeight":
+      return size.contentHeight;
+    case "contentWidth":
+      return size.contentWidth;
+    case "scrollHeight":
+      return Math.ceil(element.scrollHeight);
+    case "scrollWidth":
+      return Math.ceil(element.scrollWidth);
+    case "width":
+      return size.width;
+    default:
+      return 0;
+  }
+};
+var resizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    const { target, borderBoxSize, contentBoxSize } = entry;
+    const observedTarget = observedMap.get(target);
+    if (observedTarget) {
+      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
+      const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
+      const { onResize, measurements } = observedTarget;
+      let sizeChanged = false;
+      for (const [dimension, size] of Object.entries(measurements)) {
+        const newSize = getTargetSize(
+          target,
+          { height, width, contentHeight, contentWidth },
+          dimension
         );
-    }
-  }, [column, dispatchColumnAction]);
-  const { serverDataType = "string" } = column;
-  const availableRenderers = getAvailableCellRenderers2(column);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_lab8.Dropdown,
-      {
-        className: (0, import_classnames8.default)(`${classBase11}-renderer`),
-        fullWidth: true,
-        selected: availableRenderers[0],
-        source: availableRenderers
+        if (newSize !== size) {
+          sizeChanged = true;
+          measurements[dimension] = newSize;
+        }
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_core9.Panel,
-      {
-        ...props,
-        className: (0, import_classnames8.default)(classBase11, className, `${classBase11}-${serverDataType}`),
-        children: content
+      if (sizeChanged) {
+        onResize && onResize(measurements);
       }
-    )
-  ] });
+    }
+  }
+});
+
+// ../vuu-table/src/table/useSelection.ts
+var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
+var import_react28 = require("react");
+var { IDX: IDX2 } = import_vuu_utils19.metadataKeys;
+
+// ../vuu-table/src/table/useTableModel.ts
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_react29 = require("react");
+var KEY_OFFSET = import_vuu_utils20.metadataKeys.count;
+
+// ../vuu-table/src/table/useTableScroll.ts
+var import_react30 = require("react");
+
+// ../vuu-table/src/table/useTableViewport.ts
+var import_react31 = require("react");
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+
+// ../vuu-table/src/table/useVirtualViewport.ts
+var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_react32 = require("react");
+
+// ../vuu-table/src/table/useTable.ts
+var { KEY: KEY3, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils23.metadataKeys;
+
+// ../vuu-table/src/table/Table.tsx
+var import_classnames14 = __toESM(require("classnames"));
+var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+
+// ../vuu-table/src/table/cell-renderers/json-cell/JsonCell.tsx
+var import_classnames15 = __toESM(require("classnames"));
+var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var classBase11 = "vuuJsonCell";
+var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY4 } = import_vuu_utils25.metadataKeys;
+var localKey = (key) => {
+  const pos = key.lastIndexOf("|");
+  if (pos === -1) {
+    return "";
+  } else {
+    return key.slice(pos + 1);
+  }
+};
+var JsonCell = ({ column, row }) => {
+  const {
+    key: columnKey
+    /*, type, valueFormatter */
+  } = column;
+  let value = row[columnKey];
+  let isToggle = false;
+  if ((0, import_vuu_utils25.isJsonAttribute)(value)) {
+    value = value.slice(0, -1);
+    isToggle = true;
+  }
+  const rowKey = localKey(row[KEY4]);
+  const className = (0, import_classnames15.default)({
+    [`${classBase11}-name`]: rowKey === value,
+    [`${classBase11}-value`]: rowKey !== value,
+    [`${classBase11}-group`]: isToggle
+  });
+  if (isToggle) {
+    const toggleIcon = row[IS_EXPANDED3] ? "minus-box" : "plus-box";
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: `${classBase11}-value`, children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: `${classBase11}-toggle`, "data-icon": toggleIcon })
+    ] });
+  } else if (value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className, children: value });
+  } else {
+    return null;
+  }
 };
+(0, import_vuu_utils25.registerComponent)("json", JsonCell, "cell-renderer", {});
 
-// src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var classBase12 = "vuuColumnSettingsPanel";
-var tabstripProps2 = {
-  className: "salt-density-high"
+// ../vuu-table/src/table-next/TableNext.tsx
+var import_vuu_popups7 = require("@vuu-ui/vuu-popups");
+var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
+
+// ../vuu-table/src/table-next/HeaderCell.tsx
+var import_react38 = require("react");
+
+// ../vuu-table/src/table-next/useCell.ts
+var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
+var import_classnames16 = __toESM(require("classnames"));
+var import_react34 = require("react");
+var useCell = (column, classBase14, isHeader) => (
+  // TODO measure perf without the memo, might not be worth the cost
+  (0, import_react34.useMemo)(() => {
+    const className = (0, import_classnames16.default)(classBase14, {
+      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"
+    });
+    const style = (0, import_vuu_utils26.getColumnStyle)(column);
+    return {
+      className,
+      style
+    };
+  }, [column, classBase14, isHeader])
+);
+
+// ../vuu-table/src/table-next/ColumnMenu.tsx
+var import_vuu_popups5 = require("@vuu-ui/vuu-popups");
+var import_classnames17 = __toESM(require("classnames"));
+var import_react35 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+
+// ../vuu-table/src/table-next/column-resizing/ColumnResizer.tsx
+var import_react36 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+
+// ../vuu-table/src/table-next/column-resizing/useTableColumnResize.tsx
+var import_react37 = require("react");
+
+// ../vuu-table/src/table-next/HeaderCell.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+
+// ../vuu-table/src/table-next/Row.tsx
+var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
+var import_classnames18 = __toESM(require("classnames"));
+var import_react40 = require("react");
+
+// ../vuu-table/src/table-next/TableCell.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var TableCell2 = ({ column, row }) => {
+  const { className, style } = useCell(column, "vuuTableNextCell");
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className, role: "cell", style, children: row[column.key] });
 };
-var ColumnSettingsPanel2 = ({
-  column,
-  dispatchColumnAction,
-  style: styleProp,
-  ...props
-}) => {
-  var _a, _b, _c, _d;
-  const [activeTab, setActiveTab] = (0, import_react16.useState)(0);
-  const dispatchUpdate = (0, import_react16.useCallback)(
-    (values) => dispatchColumnAction({
-      type: "updateColumnProp",
-      column,
-      ...values
-    }),
-    [column, dispatchColumnAction]
-  );
-  const handleChangeAlign = (0, import_react16.useCallback)(
-    (evt) => dispatchUpdate({ align: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangePin = (0, import_react16.useCallback)(
-    (evt) => dispatchUpdate({ pin: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangeHidden = (0, import_react16.useCallback)(
-    (evt) => dispatchUpdate({ hidden: evt.target.checked }),
-    [dispatchUpdate]
-  );
-  const handleChangeLabel = (0, import_react16.useCallback)(
-    (evt) => dispatchUpdate({ label: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangeWidth = (0, import_react16.useCallback)(
-    (value) => dispatchUpdate({ width: parseInt(value.toString(), 10) }),
-    [dispatchUpdate]
+
+// ../vuu-table/src/table-next/TableGroupCell.tsx
+var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
+var import_react39 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var { IS_LEAF: IS_LEAF3 } = import_vuu_utils27.metadataKeys;
+var TableGroupCell2 = ({ column, onClick, row }) => {
+  const { columns } = column;
+  const [value, offset] = (0, import_vuu_utils27.getGroupValueAndOffset)(columns, row);
+  const { className, style } = useCell(column, "vuuTable2-groupCell");
+  const handleClick = (0, import_react39.useCallback)(
+    (evt) => {
+      onClick == null ? void 0 : onClick(evt, column);
+    },
+    [column, onClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  const isLeaf = row[IS_LEAF3];
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "vuuTable2-groupCell-spacer" }, i));
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "div",
     {
-      className: classBase12,
-      ...props,
-      style: {
-        ...styleProp
-      },
+      className,
+      role: "cell",
+      style,
+      onClick: isLeaf ? void 0 : handleClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.Text, { as: "h4", children: "Column Settings" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-          import_vuu_layout3.Stack,
+        spacers,
+        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "span",
           {
-            active: activeTab,
-            className: (0, import_classnames9.default)(`${classBase12}-columnTabs`),
-            onTabSelectionChanged: setActiveTab,
-            TabstripProps: tabstripProps2,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core10.Panel, { title: "Column", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core10.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.FormFieldLabel, { children: "Hidden" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    import_core10.Checkbox,
-                    {
-                      checked: column.hidden === true,
-                      onChange: handleChangeHidden
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core10.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.FormFieldLabel, { children: "Label" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    import_core10.Input,
-                    {
-                      value: (_a = column.label) != null ? _a : column.name,
-                      onChange: handleChangeLabel
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core10.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.FormFieldLabel, { children: "Width" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    import_lab9.StepperInput,
-                    {
-                      value: (_b = column.width) != null ? _b : 100,
-                      onChange: handleChangeWidth
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core10.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.FormFieldLabel, { children: "Align" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-                    import_core10.RadioButtonGroup,
-                    {
-                      "aria-label": "Column Align",
-                      value: (_c = column.align) != null ? _c : "left",
-                      onChange: handleChangeAlign,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.RadioButton, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.RadioButton, { label: "Right", value: "right" })
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core10.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.FormFieldLabel, { children: "Pin Column" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-                    import_core10.RadioButtonGroup,
-                    {
-                      "aria-label": "Pin Column",
-                      value: (_d = column.pin) != null ? _d : "",
-                      onChange: handleChangePin,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.RadioButton, { label: "Do not pin", value: "" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.RadioButton, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.RadioButton, { label: "Right", value: "right" })
-                      ]
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                ColumnTypePanel2,
-                {
-                  column,
-                  dispatchColumnAction,
-                  title: "Data Cell"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core10.Panel, { title: "Vuu", variant: "secondary", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core10.FormField, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.FormFieldLabel, { children: "Name" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.Input, { value: column.name })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core10.FormField, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.FormFieldLabel, { children: "Vuu Type" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.Input, { value: column.serverDataType })
-                ] })
-              ] })
-            ]
+            className: "vuuTable2-groupCell-toggle",
+            "data-icon": "vuu-triangle-right"
           }
-        )
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: value })
       ]
     }
   );
 };
+
+// ../vuu-table/src/table-next/Row.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react41 = require("react");
+var { IDX: IDX3, IS_EXPANDED: IS_EXPANDED4, SELECTED: SELECTED3 } = import_vuu_utils28.metadataKeys;
+var classBase12 = "vuuTableNextRow";
+var Row2 = (0, import_react40.memo)(
+  ({
+    className: classNameProp,
+    columnMap,
+    columns,
+    row,
+    offset,
+    onClick,
+    onToggleGroup,
+    ...htmlAttributes
+  }) => {
+    const {
+      [IDX3]: rowIndex,
+      [IS_EXPANDED4]: isExpanded,
+      [SELECTED3]: selectionStatus
+    } = row;
+    const handleRowClick = (0, import_react40.useCallback)(
+      (evt) => {
+        const rangeSelect = evt.shiftKey;
+        const keepExistingSelection = evt.ctrlKey || evt.metaKey;
+        onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
+      },
+      [onClick, row]
+    );
+    const { True, First, Last } = import_vuu_utils28.RowSelected;
+    const className = (0, import_classnames18.default)(classBase12, classNameProp, {
+      [`${classBase12}-even`]: rowIndex % 2 === 0,
+      [`${classBase12}-expanded`]: isExpanded,
+      [`${classBase12}-selected`]: selectionStatus & True,
+      [`${classBase12}-selectedStart`]: selectionStatus & First,
+      [`${classBase12}-selectedEnd`]: selectionStatus & Last
+    });
+    const style = typeof offset === "number" ? { transform: `translate3d(0px, ${offset}px, 0px)` } : void 0;
+    return /* @__PURE__ */ (0, import_react41.createElement)(
+      "div",
+      {
+        ...htmlAttributes,
+        key: `row-${row[0]}`,
+        role: "row",
+        className,
+        onClick: handleRowClick,
+        style
+      },
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: `${classBase12}-selectionDecorator vuuStickyLeft` }),
+      columns.filter(import_vuu_utils28.notHidden).map((column) => {
+        const isGroup = (0, import_vuu_utils28.isGroupColumn)(column);
+        const Cell = isGroup ? TableGroupCell2 : TableCell2;
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Cell, { column, row }, column.key);
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: `${classBase12}-selectionDecorator vuuStickyRight` })
+    );
+  }
+);
+Row2.displayName = "Row";
+
+// ../vuu-table/src/table-next/useTableNext.ts
+var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
+var import_vuu_popups6 = require("@vuu-ui/vuu-popups");
+var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
+var import_react47 = require("react");
+
+// ../vuu-table/src/table-next/table-config.ts
+var updateTableConfig = (config, action) => {
+  switch (action.type) {
+    case "col-size":
+      return {
+        ...config,
+        columns: config.columns.map(
+          (col) => col.name === action.column.name ? { ...col, width: action.width } : col
+        )
+      };
+    case "column-prop":
+      return {
+        ...config,
+        columns: config.columns.map(
+          (col) => col.name === action.column.name ? { ...col, [action.property]: action.value } : col
+        )
+      };
+    default:
+      return config;
+  }
+};
+
+// ../vuu-table/src/table-next/useDataSource.ts
+var import_react42 = require("react");
+
+// ../vuu-table/src/table-next/useInitialValue.ts
+var import_react43 = require("react");
+
+// ../vuu-table/src/table-next/useTableModel.ts
+var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
+var import_react44 = require("react");
+var { info } = (0, import_vuu_utils29.logger)("useTableModel");
+var KEY_OFFSET2 = import_vuu_utils29.metadataKeys.count;
+
+// ../vuu-table/src/table-next/useTableScroll.ts
+var import_react45 = require("react");
+
+// ../vuu-table/src/table-next/useVirtualViewport.ts
+var import_react46 = require("react");
+
+// ../vuu-table/src/table-next/TableNext.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var { IDX: IDX4, RENDER_IDX: RENDER_IDX2 } = import_vuu_utils31.metadataKeys;
+
+// src/table-settings/useTableSettings.ts
+var import_react48 = require("react");
+var buildColumnItems = (availableColumns, configuredColumns) => {
+  return availableColumns.map(({ name, serverDataType }) => {
+    const configuredColumn = configuredColumns.find((col) => col.name === name);
+    return {
+      hidden: configuredColumn == null ? void 0 : configuredColumn.hidden,
+      label: configuredColumn == null ? void 0 : configuredColumn.label,
+      name,
+      serverDataType,
+      subscribed: configuredColumn !== void 0
+    };
+  });
+};
+var useTableSettings = ({
+  availableColumns,
+  onConfigChange,
+  tableConfig: tableConfigProp
+}) => {
+  const [tableConfig, setTableConfig] = (0, import_react48.useState)(tableConfigProp);
+  const columnItems = (0, import_react48.useMemo)(
+    () => buildColumnItems(availableColumns, tableConfig.columns),
+    [availableColumns, tableConfig.columns]
+  );
+  const handleMoveListItem = (0, import_react48.useCallback)(
+    (fromIndex, toIndex) => {
+      console.log(`move list item from ${fromIndex} to ${toIndex}`);
+    },
+    []
+  );
+  const handleColumnChange = (0, import_react48.useCallback)(
+    (name, property, value) => {
+      const columnItem = columnItems.find((col) => col.name === name);
+      if (property === "subscribed") {
+        console.log(`unsubscribe from ${name}`);
+      } else if (columnItem == null ? void 0 : columnItem.subscribed) {
+        const column = tableConfig.columns.find((col) => col.name === name);
+        if (column) {
+          const newConfig = updateTableConfig(tableConfig, {
+            type: "column-prop",
+            property,
+            column,
+            value
+          });
+          setTableConfig(newConfig);
+        }
+      }
+    },
+    [columnItems, tableConfig]
+  );
+  const handleChangeColumnLabels = (0, import_react48.useCallback)((evt) => {
+    const { value } = evt.target;
+    const columnFormatHeader = value === "0" ? void 0 : value === "1" ? "capitalize" : "uppercase";
+    setTableConfig((config) => ({
+      ...config,
+      columnFormatHeader
+    }));
+  }, []);
+  (0, import_vuu_layout4.useLayoutEffectSkipFirst)(() => {
+    onConfigChange == null ? void 0 : onConfigChange(tableConfig);
+  }, [onConfigChange, tableConfig]);
+  const columnLabelsValue = tableConfig.columnFormatHeader === void 0 ? 0 : tableConfig.columnFormatHeader === "capitalize" ? 1 : 2;
+  return {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels: handleChangeColumnLabels,
+    onColumnChange: handleColumnChange,
+    onMoveListItem: handleMoveListItem
+  };
+};
+
+// src/table-settings/TableSettingsPanel.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var classBase13 = "vuuTableSettingsPanel";
+var TableSettingsPanel = ({
+  availableColumns,
+  onConfigChange,
+  tableConfig,
+  ...htmlAttributes
+}) => {
+  const {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels,
+    onColumnChange,
+    onMoveListItem
+  } = useTableSettings({
+    availableColumns,
+    onConfigChange,
+    tableConfig
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...htmlAttributes, className: classBase13, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core9.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core9.FormFieldLabel, { children: "Column Labels" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        import_core9.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: onChangeColumnLabels,
+          value: columnLabelsValue,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              import_core9.ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "text-strikethrough",
+                value: 0
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              import_core9.ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "text-Tt",
+                value: 1
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              import_core9.ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "text-T",
+                value: 2
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core9.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core9.FormFieldLabel, { children: "Default Column Width" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core9.Input, { className: "vuuInput" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      ColumnList,
+      {
+        columnItems,
+        onChange: onColumnChange,
+        onMoveListItem
+      }
+    )
+  ] });
+};
 //# sourceMappingURL=index.js.map